diff --git a/packages/app/src/app/overmind/namespaces/preferences/actions.ts b/packages/app/src/app/overmind/namespaces/preferences/actions.ts
index 66bf2452f78..b70cdf671e4 100755
--- a/packages/app/src/app/overmind/namespaces/preferences/actions.ts
+++ b/packages/app/src/app/overmind/namespaces/preferences/actions.ts
@@ -18,9 +18,10 @@ export const setDevtoolsOpen: Action<boolean> = ({ state }, isOpen) => {
   state.preferences.showDevtools = isOpen;
 };
 
-export const itemIdChanged: AsyncAction<{
-  itemId: string;
-}> = async ({ state, actions, effects }, { itemId }) => {
+export const itemIdChanged: AsyncAction<string> = async (
+  { actions, state },
+  itemId
+) => {
   state.preferences.itemId = itemId;
 
   if (itemId === 'integrations') {
diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/EditorTheme/elements.ts b/packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/EditorTheme/elements.ts
index a7c0552e67c..008743eed80 100644
--- a/packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/EditorTheme/elements.ts
+++ b/packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/EditorTheme/elements.ts
@@ -1,14 +1,6 @@
 import { PreferenceText as PreferenceTextBase } from '@codesandbox/common/lib/components/Preference/PreferenceText';
 import styled from 'styled-components';
 
-export const BigTitle = styled.h2`
-  font-weight: 600;
-  color: white;
-  font-size: 1rem;
-  padding-top: 1.5rem;
-  margin-bottom: 0.5rem;
-`;
-
 export const PreferenceText = styled(PreferenceTextBase)`
   font-family: 'Source Code Pro';
   font-size: 0.8rem;
diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/EditorTheme/index.tsx b/packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/EditorTheme/index.tsx
index e4db81c7004..42f879ea054 100644
--- a/packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/EditorTheme/index.tsx
+++ b/packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/EditorTheme/index.tsx
@@ -1,9 +1,10 @@
+import { Text } from '@codesandbox/components';
 import React, { FunctionComponent } from 'react';
 
 import { useOvermind } from 'app/overmind';
-import { Text } from '@codesandbox/components';
 
 import { Rule } from '../../elements';
+
 import { PreferenceText } from './elements';
 
 export const EditorTheme: FunctionComponent = () => {
@@ -23,32 +24,27 @@ export const EditorTheme: FunctionComponent = () => {
 
   return (
     <div>
-      <Text block size={3} marginTop={8} marginBottom={2}>
+      <Text block marginBottom={2} marginTop={8} size={3}>
         Editor Theme
       </Text>
 
-      <Text variant="muted" size={3} block>
+      <Text block size={3} variant="muted">
         You can select your editor theme by selecting File {'->'} Preferences{' '}
         {'->'} Color Theme in the menu bar.
       </Text>
 
       <Rule />
 
-      <Text size={3} marginBottom={2} block>
+      <Text block marginBottom={2} size={3}>
         Custom VSCode Theme
       </Text>
 
-      <Text variant="muted" size={3} marginBottom={4} block>
-        After changing this setting you
-        {"'"}
-        ll have to reload the browser and select {'"'}
-        Custom
-        {'"'} as your color theme.
+      <Text block marginBottom={4} size={3} variant="muted">
+        {`After changing this setting you'll have to reload the browser and select 'Custom' as your color theme.`}
       </Text>
 
       <PreferenceText
         block
-        style={{ minHeight: 130 }}
         isTextArea
         placeholder={`You can use your own theme from VSCode directly:
 1. Open VSCode
@@ -56,6 +52,7 @@ export const EditorTheme: FunctionComponent = () => {
 3. Enter: '> Developer: Generate Color Scheme From Current Settings'
 4. Copy the contents and paste them here!`}
         rows={7}
+        style={{ minHeight: 130 }}
         {...bindValue('manualCustomVSCodeTheme', true)}
       />
     </div>
diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/index.tsx b/packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/index.tsx
index 8201f10d685..1c47b31f8dd 100644
--- a/packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/index.tsx
+++ b/packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/index.tsx
@@ -1,12 +1,14 @@
-import React, { FunctionComponent } from 'react';
 import { Text } from '@codesandbox/components';
+import React, { FunctionComponent } from 'react';
+
 import { PreferenceContainer, SubContainer } from '../elements';
 import { VSCodePlaceholder } from '../VSCodePlaceholder';
+
 import { EditorTheme } from './EditorTheme';
 
 export const Appearance: FunctionComponent = () => (
   <div>
-    <Text size={4} marginBottom={6} block variant="muted" weight="bold">
+    <Text block marginBottom={6} size={4} variant="muted" weight="bold">
       Appearance
     </Text>
 
diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/Badges/index.tsx b/packages/app/src/app/pages/common/Modals/PreferencesModal/Badges.tsx
similarity index 79%
rename from packages/app/src/app/pages/common/Modals/PreferencesModal/Badges/index.tsx
rename to packages/app/src/app/pages/common/Modals/PreferencesModal/Badges.tsx
index b0d0be5da4a..aebfefac772 100644
--- a/packages/app/src/app/pages/common/Modals/PreferencesModal/Badges/index.tsx
+++ b/packages/app/src/app/pages/common/Modals/PreferencesModal/Badges.tsx
@@ -1,7 +1,8 @@
-import React, { FunctionComponent } from 'react';
-import { useOvermind } from 'app/overmind';
 import { Text, Element } from '@codesandbox/components';
 import Badge from '@codesandbox/common/lib/utils/badges/Badge';
+import React, { FunctionComponent } from 'react';
+
+import { useOvermind } from 'app/overmind';
 
 export const Badges: FunctionComponent = () => {
   const {
@@ -15,14 +16,14 @@ export const Badges: FunctionComponent = () => {
 
   return (
     <>
-      <Text size={4} marginBottom={6} block variant="muted" weight="bold">
+      <Text block marginBottom={6} size={4} variant="muted" weight="bold">
         Badges
       </Text>
 
       <Text size={3}>
-        You currently have {badges.length} badge
-        {badges.length === 1 ? '' : 's'}. You can click on the badges to toggle
-        visibility.
+        You currently have{' '}
+        {`${badges.length} badge${badges.length === 1 ? '' : 's'}`}. You can
+        click on the badges to toggle visibility.
       </Text>
 
       <Element marginTop={4}>
diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/CodeFormatting/Prettier/index.tsx b/packages/app/src/app/pages/common/Modals/PreferencesModal/CodeFormatting/Prettier.tsx
similarity index 90%
rename from packages/app/src/app/pages/common/Modals/PreferencesModal/CodeFormatting/Prettier/index.tsx
rename to packages/app/src/app/pages/common/Modals/PreferencesModal/CodeFormatting/Prettier.tsx
index d23ba3e95f0..d1aa9773d4f 100644
--- a/packages/app/src/app/pages/common/Modals/PreferencesModal/CodeFormatting/Prettier/index.tsx
+++ b/packages/app/src/app/pages/common/Modals/PreferencesModal/CodeFormatting/Prettier.tsx
@@ -8,7 +8,7 @@ import {
   PreferenceContainer,
   PaddedPreference,
   Rule,
-} from '../../elements';
+} from '../elements';
 
 export const Prettier: FunctionComponent = () => {
   const {
@@ -17,7 +17,10 @@ export const Prettier: FunctionComponent = () => {
     },
     state: {
       preferences: {
-        settings: { prettierConfig },
+        settings: {
+          prettierConfig,
+          prettierConfig: { fluid },
+        },
       },
     },
   } = useOvermind();
@@ -56,23 +59,16 @@ export const Prettier: FunctionComponent = () => {
         </Text>
 
         <Rule />
-        <Element
-          css={css({
-            pointerEvents: prettierConfig.fluid ? 'none' : 'all',
-          })}
-        >
+
+        <Element css={css({ pointerEvents: fluid ? 'none' : 'all' })}>
           <PaddedPreference
-            style={{ opacity: prettierConfig.fluid ? 0.5 : 1 }}
+            style={{ opacity: fluid ? 0.5 : 1 }}
             title="Print width"
             type="number"
             {...bindValue('printWidth')}
           />
 
-          <Text
-            size={2}
-            variant="muted"
-            style={{ opacity: prettierConfig.fluid ? 0.5 : 1 }}
-          >
+          <Text size={2} variant="muted" style={{ opacity: fluid ? 0.5 : 1 }}>
             Specify the line length that the printer will wrap on.
           </Text>
         </Element>
diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/CodeFormatting/index.tsx b/packages/app/src/app/pages/common/Modals/PreferencesModal/CodeFormatting/index.tsx
index 43cc35f2724..a3dcb5672bc 100644
--- a/packages/app/src/app/pages/common/Modals/PreferencesModal/CodeFormatting/index.tsx
+++ b/packages/app/src/app/pages/common/Modals/PreferencesModal/CodeFormatting/index.tsx
@@ -1,22 +1,22 @@
-import React, { FunctionComponent } from 'react';
-
 import { Text } from '@codesandbox/components';
+import React, { FunctionComponent } from 'react';
 
 import { Question } from './elements';
 import { Prettier } from './Prettier';
 
 export const CodeFormatting: FunctionComponent = () => (
   <>
-    <Text size={4} marginBottom={4} block variant="muted" weight="bold">
+    <Text block marginBottom={4} size={4} variant="muted" weight="bold">
       Prettier Settings{' '}
       <a
         href="https://prettier.io/docs/en/options.html"
-        target="_blank"
         rel="noopener noreferrer"
+        target="_blank"
       >
         <Question />
       </a>
     </Text>
+
     <Prettier />
   </>
 );
diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/EditorPageSettings/EditorSettings/index.tsx b/packages/app/src/app/pages/common/Modals/PreferencesModal/EditorPageSettings/EditorSettings.tsx
similarity index 73%
rename from packages/app/src/app/pages/common/Modals/PreferencesModal/EditorPageSettings/EditorSettings/index.tsx
rename to packages/app/src/app/pages/common/Modals/PreferencesModal/EditorPageSettings/EditorSettings.tsx
index 12c14111efc..d7db2b40246 100644
--- a/packages/app/src/app/pages/common/Modals/PreferencesModal/EditorPageSettings/EditorSettings/index.tsx
+++ b/packages/app/src/app/pages/common/Modals/PreferencesModal/EditorPageSettings/EditorSettings.tsx
@@ -1,40 +1,42 @@
-import React from 'react';
+import { Preference } from '@codesandbox/common/lib/components/Preference';
+import { Text, Element } from '@codesandbox/components';
+import React, { FunctionComponent, useState } from 'react';
+
 import Modal from 'app/components/Modal';
 import { useOvermind } from 'app/overmind';
-import { Text, Element } from '@codesandbox/components';
-import { Preference } from '@codesandbox/common/lib/components/Preference';
 
-import { Alert } from '../../../Common/Alert';
-import { PreferenceContainer } from '../../elements';
-import { VSCodePlaceholder } from '../../VSCodePlaceholder';
+import { Alert } from '../../Common/Alert';
+
+import { VSCodePlaceholder } from '../VSCodePlaceholder';
+
+import { PreferenceContainer } from '../elements';
 
-const isSafari: boolean = /^((?!chrome|android).)*safari/i.test(
-  navigator.userAgent
-);
-const isFF: boolean = navigator.userAgent.toLowerCase().includes('firefox');
+const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+const isFF = navigator.userAgent.toLowerCase().includes('firefox');
 
-export const EditorSettings: React.FC = () => {
-  const [showModal, setShowModal] = React.useState(false);
+export const EditorSettings: FunctionComponent = () => {
   const {
-    state: {
-      preferences: { settings },
-    },
     actions: {
       preferences: { settingChanged },
     },
+    state: {
+      preferences: { settings },
+    },
   } = useOvermind();
+  const [showModal, setShowModal] = useState(false);
 
   const bindValue = (name: string) => ({
-    value: settings[name],
     setValue: (value: any) => {
       settingChanged({ name, value });
+
       setShowModal(true);
     },
+    value: settings[name],
   });
 
   return (
     <>
-      <Text size={4} marginBottom={6} block variant="muted" weight="bold">
+      <Text block marginBottom={6} size={4} variant="muted" weight="bold">
         Appearance
       </Text>
 
@@ -49,35 +51,36 @@ export const EditorSettings: React.FC = () => {
               type="boolean"
               {...bindValue('vimMode')}
             />
+
             <Text
-              marginTop={2}
               block
+              marginTop={2}
               size={2}
-              variant="muted"
               style={{ maxWidth: '60%', lineHeight: 1.5 }}
+              variant="muted"
             >
               Toggling the VIM extension will require a refresh. When enabled,
               use the command palette to control VIM
             </Text>
           </PreferenceContainer>
         </Element>
+
         {isSafari || isFF ? (
-          <Text size={2} variant="muted" marginBottom={2} block marginTop={2}>
+          <Text block marginBottom={2} marginTop={2} size={2} variant="muted">
             The VIM extension currently only works on Chrome and Microsoft Edge.
           </Text>
         ) : null}
+
         <Modal
           isOpen={showModal}
           onClose={() => setShowModal(false)}
           width={400}
         >
           <Alert
-            title="Toggle VIM extension"
             description="You need to refresh the browser for this to take effect, do you want to do that now?"
             onCancel={() => setShowModal(false)}
-            onPrimaryAction={() => {
-              location.reload(true);
-            }}
+            onPrimaryAction={() => location.reload(true)}
+            title="Toggle VIM extension"
           />
         </Modal>
       </Element>
diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/EditorPageSettings/PreviewSettings/index.tsx b/packages/app/src/app/pages/common/Modals/PreferencesModal/EditorPageSettings/PreviewSettings.tsx
similarity index 73%
rename from packages/app/src/app/pages/common/Modals/PreferencesModal/EditorPageSettings/PreviewSettings/index.tsx
rename to packages/app/src/app/pages/common/Modals/PreferencesModal/EditorPageSettings/PreviewSettings.tsx
index 42d99ab696c..580d5263917 100644
--- a/packages/app/src/app/pages/common/Modals/PreferencesModal/EditorPageSettings/PreviewSettings/index.tsx
+++ b/packages/app/src/app/pages/common/Modals/PreferencesModal/EditorPageSettings/PreviewSettings.tsx
@@ -1,27 +1,33 @@
-import React from 'react';
-import { useOvermind } from 'app/overmind';
 import { Text } from '@codesandbox/components';
+import React, { FunctionComponent } from 'react';
+
+import { useOvermind } from 'app/overmind';
+
 import {
-  SubContainer,
-  PreferenceContainer,
   PaddedPreference,
+  PreferenceContainer,
+  SubContainer,
   Rule,
-} from '../../elements';
-
-export const PreviewSettings: React.FC = () => {
-  const { state, actions } = useOvermind();
-  const bindValue = name => ({
-    value: state.preferences.settings[name],
-    setValue: value =>
-      actions.preferences.settingChanged({
-        name,
-        value,
-      }),
+} from '../elements';
+
+export const PreviewSettings: FunctionComponent = () => {
+  const {
+    actions: {
+      preferences: { settingChanged },
+    },
+    state: {
+      preferences: { settings },
+    },
+  } = useOvermind();
+
+  const bindValue = (name: string) => ({
+    setValue: value => settingChanged({ name, value }),
+    value: settings[name],
   });
 
   return (
     <div>
-      <Text size={4} marginBottom={6} block variant="muted" weight="bold">
+      <Text block marginBottom={6} size={4} variant="muted" weight="bold">
         Preview
       </Text>
 
@@ -29,29 +35,36 @@ export const PreviewSettings: React.FC = () => {
         <PreferenceContainer>
           <PaddedPreference
             title="Preview on edit"
+            tooltip="Only update on save"
             type="boolean"
             {...bindValue('livePreviewEnabled')}
-            tooltip="Only update on save"
           />
+
           <Text size={2} variant="muted">
             Preview the latest code without saving.
           </Text>
+
           <Rule />
+
           <PaddedPreference
             title="Clear console"
+            tooltip="Clear console when executing"
             type="boolean"
             {...bindValue('clearConsoleEnabled')}
-            tooltip="Clear console when executing"
           />
+
           <Text size={2} variant="muted">
             Clear your developer console between every execution.
           </Text>
+
           <Rule />
+
           <PaddedPreference
             title="Instant preview"
             type="boolean"
             {...bindValue('instantPreviewEnabled')}
           />
+
           <Text size={2} variant="muted">
             Show preview on every keypress.
           </Text>
diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/Experiments/ContainerLSP.tsx b/packages/app/src/app/pages/common/Modals/PreferencesModal/Experiments/ContainerLSP.tsx
index 3f84a260998..9500c53a2fe 100644
--- a/packages/app/src/app/pages/common/Modals/PreferencesModal/Experiments/ContainerLSP.tsx
+++ b/packages/app/src/app/pages/common/Modals/PreferencesModal/Experiments/ContainerLSP.tsx
@@ -1,6 +1,8 @@
+import { Text } from '@codesandbox/components';
 import React, { FunctionComponent } from 'react';
+
 import { useOvermind } from 'app/overmind';
-import { Text } from '@codesandbox/components';
+
 import { PaddedPreference } from '../elements';
 
 export const ContainerLSP: FunctionComponent = () => {
@@ -14,18 +16,19 @@ export const ContainerLSP: FunctionComponent = () => {
   return user ? (
     <>
       <PaddedPreference
-        setValue={() => toggleContainerLspExperiment()}
+        setValue={toggleContainerLspExperiment}
         title="Use container language server"
         tooltip="Language server"
         type="boolean"
         value={user.experiments.containerLsp}
       />
+
       <Text
-        size={3}
-        variant="muted"
-        marginTop={2}
         block
+        marginTop={2}
+        size={3}
         style={{ maxWidth: '60%' }}
+        variant="muted"
       >
         As part of making containers more powerful we now allow the language
         server to run there. Please help us test it :-)
diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/Experiments/index.tsx b/packages/app/src/app/pages/common/Modals/PreferencesModal/Experiments/index.tsx
index 2e8300b9f0a..acc0f32d0a4 100644
--- a/packages/app/src/app/pages/common/Modals/PreferencesModal/Experiments/index.tsx
+++ b/packages/app/src/app/pages/common/Modals/PreferencesModal/Experiments/index.tsx
@@ -1,13 +1,16 @@
-import React from 'react';
 import { Text, Element } from '@codesandbox/components';
+import React, { FunctionComponent } from 'react';
+
 import { SubContainer } from '../elements';
+
 import { ContainerLSP } from './ContainerLSP';
 
-export const Experiments: React.FunctionComponent = () => (
+export const Experiments: FunctionComponent = () => (
   <>
-    <Text size={4} marginBottom={6} block variant="muted" weight="bold">
+    <Text block marginBottom={6} size={4} variant="muted" weight="bold">
       Experiments
     </Text>
+
     <SubContainer>
       <Element paddingTop={2}>
         <ContainerLSP />
diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/Integrations/elements.js b/packages/app/src/app/pages/common/Modals/PreferencesModal/Integrations/elements.ts
similarity index 100%
rename from packages/app/src/app/pages/common/Modals/PreferencesModal/Integrations/elements.js
rename to packages/app/src/app/pages/common/Modals/PreferencesModal/Integrations/elements.ts
diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/Integrations/index.js b/packages/app/src/app/pages/common/Modals/PreferencesModal/Integrations/index.js
deleted file mode 100644
index b16f4e5adfd..00000000000
--- a/packages/app/src/app/pages/common/Modals/PreferencesModal/Integrations/index.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react';
-
-import { VercelIntegration } from 'app/pages/common/VercelIntegration';
-import { GithubIntegration } from 'app/pages/common/GithubIntegration';
-import { Text } from '@codesandbox/components';
-
-import { Container } from './elements';
-
-export function Integrations() {
-  return (
-    <div>
-      <Text size={4} marginBottom={6} block variant="muted" weight="bold">
-        Integrations
-      </Text>
-
-      <Container>
-        <VercelIntegration />
-        <GithubIntegration />
-      </Container>
-    </div>
-  );
-}
diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/Integrations/index.tsx b/packages/app/src/app/pages/common/Modals/PreferencesModal/Integrations/index.tsx
new file mode 100644
index 00000000000..82031929e15
--- /dev/null
+++ b/packages/app/src/app/pages/common/Modals/PreferencesModal/Integrations/index.tsx
@@ -0,0 +1,21 @@
+import { Text } from '@codesandbox/components';
+import React, { FunctionComponent } from 'react';
+
+import { GithubIntegration } from 'app/pages/common/GithubIntegration';
+import { VercelIntegration } from 'app/pages/common/VercelIntegration';
+
+import { Container } from './elements';
+
+export const Integrations: FunctionComponent = () => (
+  <div>
+    <Text block marginBottom={6} size={4} variant="muted" weight="bold">
+      Integrations
+    </Text>
+
+    <Container>
+      <VercelIntegration />
+
+      <GithubIntegration />
+    </Container>
+  </div>
+);
diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/KeyMapping/index.tsx b/packages/app/src/app/pages/common/Modals/PreferencesModal/KeyMapping.tsx
similarity index 65%
rename from packages/app/src/app/pages/common/Modals/PreferencesModal/KeyMapping/index.tsx
rename to packages/app/src/app/pages/common/Modals/PreferencesModal/KeyMapping.tsx
index 987b6268c88..5cb23464d99 100644
--- a/packages/app/src/app/pages/common/Modals/PreferencesModal/KeyMapping/index.tsx
+++ b/packages/app/src/app/pages/common/Modals/PreferencesModal/KeyMapping.tsx
@@ -1,13 +1,14 @@
 import React, { FunctionComponent } from 'react';
 import { Text } from '@codesandbox/components';
 
-import { VSCodePlaceholder } from '../VSCodePlaceholder';
+import { VSCodePlaceholder } from './VSCodePlaceholder';
 
 export const KeyMapping: FunctionComponent = () => (
   <>
-    <Text size={4} marginBottom={6} block variant="muted" weight="bold">
+    <Text block marginBottom={6} size={4} variant="muted" weight="bold">
       Key Bindings
     </Text>
+
     <VSCodePlaceholder />
   </>
 );
diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/PaymentInfo/Icons.tsx b/packages/app/src/app/pages/common/Modals/PreferencesModal/PaymentInfo/Card/Icons.tsx
similarity index 94%
rename from packages/app/src/app/pages/common/Modals/PreferencesModal/PaymentInfo/Icons.tsx
rename to packages/app/src/app/pages/common/Modals/PreferencesModal/PaymentInfo/Card/Icons.tsx
index befaaf07a00..db2e58a79da 100644
--- a/packages/app/src/app/pages/common/Modals/PreferencesModal/PaymentInfo/Icons.tsx
+++ b/packages/app/src/app/pages/common/Modals/PreferencesModal/PaymentInfo/Card/Icons.tsx
@@ -1,6 +1,8 @@
-import React from 'react';
+import React, { FunctionComponent, SVGProps } from 'react';
 
-export const AmexIcon = props => (
+type IconProps = SVGProps<SVGSVGElement>;
+
+export const AmexIcon: FunctionComponent<IconProps> = props => (
   <svg width={58} height={38} fill="none" viewBox="0 0 58 38" {...props}>
     <filter
       id="a"
@@ -43,7 +45,7 @@ export const AmexIcon = props => (
   </svg>
 );
 
-export const MasterCardIcon = props => (
+export const MasterCardIcon: FunctionComponent<IconProps> = props => (
   <svg width={58} height={38} fill="none" viewBox="0 0 58 38" {...props}>
     <filter
       id="a"
@@ -94,7 +96,7 @@ export const MasterCardIcon = props => (
   </svg>
 );
 
-export const VisaIcon = props => (
+export const VisaIcon: FunctionComponent<IconProps> = props => (
   <svg width={58} height={38} fill="none" viewBox="0 0 58 38" {...props}>
     <filter
       id="a"
@@ -138,7 +140,7 @@ export const VisaIcon = props => (
   </svg>
 );
 
-export const BlankIcon = props => (
+export const BlankIcon: FunctionComponent<IconProps> = props => (
   <svg width={58} height={38} fill="none" viewBox="0 0 58 38" {...props}>
     <filter
       id="a"
@@ -192,7 +194,7 @@ export const BlankIcon = props => (
   </svg>
 );
 
-export const DiscoverIcon = props => (
+export const DiscoverIcon: FunctionComponent<IconProps> = props => (
   <svg width={58} height={38} fill="none" viewBox="0 0 58 38" {...props}>
     <filter
       id="a"
diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/PaymentInfo/Card/index.tsx b/packages/app/src/app/pages/common/Modals/PreferencesModal/PaymentInfo/Card/index.tsx
new file mode 100644
index 00000000000..db738c1b020
--- /dev/null
+++ b/packages/app/src/app/pages/common/Modals/PreferencesModal/PaymentInfo/Card/index.tsx
@@ -0,0 +1,71 @@
+import { Element, Stack, Text } from '@codesandbox/components';
+import css from '@styled-system/css';
+import React, { FunctionComponent } from 'react';
+
+import { useOvermind } from 'app/overmind';
+
+import {
+  AmexIcon,
+  BlankIcon,
+  DiscoverIcon,
+  MasterCardIcon,
+  VisaIcon,
+} from './Icons';
+
+const Icon: FunctionComponent<{ brand?: string }> = ({ brand }) => {
+  const iconsByBrand = {
+    'American Express': AmexIcon,
+    Discover: DiscoverIcon,
+    MasterCard: MasterCardIcon,
+    Visa: VisaIcon,
+  };
+  const IconByBrand = iconsByBrand[brand] || BlankIcon;
+
+  return <IconByBrand />;
+};
+
+export const Card: FunctionComponent = () => {
+  const {
+    state: {
+      preferences: { paymentDetails },
+    },
+  } = useOvermind();
+  const { brand, last4, name } = paymentDetails || {};
+
+  return (
+    <Stack align="flex-start" paddingY={4}>
+      <Element
+        css={css({
+          svg: {
+            height: 16,
+            width: 'auto',
+          },
+        })}
+        marginTop={1}
+        paddingRight={2}
+      >
+        <Icon brand={brand} />
+      </Element>
+
+      <Element>
+        <Element>
+          <Text size={3} weight="bold">
+            {brand}
+          </Text>
+
+          <Text variant="muted"> ending in </Text>
+
+          <Text size={3} weight="bold">
+            {last4}
+          </Text>
+        </Element>
+
+        <Element>
+          <Text size={3} weight="bold">
+            {name}
+          </Text>
+        </Element>
+      </Element>
+    </Stack>
+  );
+};
diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/PaymentInfo/index.tsx b/packages/app/src/app/pages/common/Modals/PreferencesModal/PaymentInfo/index.tsx
index 30d6b779cc6..9e9db32e547 100644
--- a/packages/app/src/app/pages/common/Modals/PreferencesModal/PaymentInfo/index.tsx
+++ b/packages/app/src/app/pages/common/Modals/PreferencesModal/PaymentInfo/index.tsx
@@ -1,45 +1,15 @@
-import React, { ComponentProps, FunctionComponent, useEffect } from 'react';
+import { Element, Stack, Text } from '@codesandbox/components';
+import React, { FunctionComponent, useEffect } from 'react';
 
 import { SubscribeForm } from 'app/components/SubscribeForm';
 import { useOvermind } from 'app/overmind';
-import css from '@styled-system/css';
 
-import { Text, Element, Stack } from '@codesandbox/components';
-import {
-  AmexIcon,
-  MasterCardIcon,
-  VisaIcon,
-  BlankIcon,
-  DiscoverIcon,
-} from './Icons';
+import { Card } from './Card';
 
-const Icon = (name: string) => {
-  let icon;
-  switch (name) {
-    case 'MasterCard':
-      icon = MasterCardIcon;
-      break;
-    case 'American Express':
-      icon = AmexIcon;
-      break;
-    case 'Discover':
-      icon = DiscoverIcon;
-      break;
-    case 'Visa':
-      icon = VisaIcon;
-      break;
-
-    default:
-      icon = BlankIcon;
-  }
-
-  return icon;
-};
-
-export const PaymentInfo: FunctionComponent = () => {
+const Body: FunctionComponent = () => {
   const {
     actions: {
-      preferences: { paymentDetailsRequested, paymentDetailsUpdated },
+      preferences: { paymentDetailsUpdated },
     },
     state: {
       preferences: {
@@ -49,92 +19,67 @@ export const PaymentInfo: FunctionComponent = () => {
       },
     },
   } = useOvermind();
+  const { name } = paymentDetails || {};
 
-  useEffect(() => {
-    paymentDetailsRequested();
-  }, [paymentDetailsRequested]);
+  if (isLoadingPaymentDetails) {
+    return (
+      <Text align="center" marginTop={6} size={3}>
+        Loading payment details...
+      </Text>
+    );
+  }
 
-  const updatePaymentDetails: ComponentProps<
-    typeof SubscribeForm
-  >['subscribe'] = ({ token }) => paymentDetailsUpdated(token);
+  if (paymentDetailError) {
+    return (
+      <Text align="center" marginTop={6} size={3}>
+        {`An error occurred: ${paymentDetailError}`}
+      </Text>
+    );
+  }
 
-  const Body = () => {
-    const { brand, last4, name } = paymentDetails || {};
-    if (isLoadingPaymentDetails) {
-      return (
-        <Text size={3} align="center" marginTop={6}>
-          Loading payment details...
+  return (
+    <Stack gap={4}>
+      <Element>
+        <Text block marginBottom={4} marginTop={4} size={3}>
+          Update card info
         </Text>
-      );
-    }
 
-    if (paymentDetailError) {
-      return (
-        <Text size={3} align="center" marginTop={6}>
-          An error occurred: {paymentDetailError}
+        <SubscribeForm
+          buttonName="Update"
+          loadingText="Updating Card Info..."
+          name={name}
+          subscribe={({ token }) => paymentDetailsUpdated(token)}
+        />
+      </Element>
+
+      <Element>
+        <Text block marginBottom={2} marginTop={4} size={3}>
+          Current card
         </Text>
-      );
-    }
 
-    return (
-      <>
-        <Stack gap={4}>
-          <Element>
-            <Text block size={3} marginTop={4} marginBottom={4}>
-              Update card info
-            </Text>
-            <SubscribeForm
-              buttonName="Update"
-              loadingText="Updating Card Info..."
-              name={name}
-              subscribe={updatePaymentDetails}
-            />
-          </Element>
-          <Element>
-            <Text block size={3} marginTop={4} marginBottom={2}>
-              Current card
-            </Text>
-            <Stack align="flex-start" paddingY={4}>
-              <Element
-                paddingRight={2}
-                marginTop={1}
-                css={css({
-                  svg: {
-                    height: 16,
-                    width: 'auto',
-                  },
-                })}
-              >
-                {Icon(brand)()}
-              </Element>
-              <Element>
-                <Element>
-                  <Text weight="bold" size={3}>
-                    {brand}
-                  </Text>{' '}
-                  <Text variant="muted">ending in </Text>
-                  <Text weight="bold" size={3}>
-                    {last4}
-                  </Text>
-                </Element>
-                <Element>
-                  <Text weight="bold" size={3}>
-                    {name}
-                  </Text>
-                </Element>
-              </Element>
-            </Stack>
-          </Element>
-        </Stack>
-      </>
-    );
-  };
+        <Card />
+      </Element>
+    </Stack>
+  );
+};
+
+export const PaymentInfo: FunctionComponent = () => {
+  const {
+    actions: {
+      preferences: { paymentDetailsRequested },
+    },
+  } = useOvermind();
+
+  useEffect(() => {
+    paymentDetailsRequested();
+  }, [paymentDetailsRequested]);
 
   return (
     <Element>
-      <Text size={4} marginBottom={6} block variant="muted" weight="bold">
+      <Text block marginBottom={6} size={4} variant="muted" weight="bold">
         Payment Info
       </Text>
+
       <Body />
     </Element>
   );
diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/SideNavigation.tsx b/packages/app/src/app/pages/common/Modals/PreferencesModal/SideNavigation.tsx
new file mode 100644
index 00000000000..4ede41321cb
--- /dev/null
+++ b/packages/app/src/app/pages/common/Modals/PreferencesModal/SideNavigation.tsx
@@ -0,0 +1,77 @@
+import { Element, Stack, Text } from '@codesandbox/components';
+import css from '@styled-system/css';
+import React, { ComponentType, FunctionComponent } from 'react';
+
+import { useOvermind } from 'app/overmind';
+
+type MenuItem = {
+  Icon: ComponentType;
+  id: string;
+  title: string;
+};
+type Props = {
+  menuItems: MenuItem[];
+};
+export const SideNavigation: FunctionComponent<Props> = ({ menuItems }) => {
+  const {
+    actions: {
+      preferences: { itemIdChanged },
+    },
+    state: {
+      preferences: { itemId = 'appearance' },
+    },
+  } = useOvermind();
+
+  return (
+    <Element
+      css={css({
+        backgroundColor: 'sideBar.background',
+        borderWidth: 1,
+        borderRightStyle: 'solid',
+        borderColor: 'sideBar.border',
+        width: 220,
+      })}
+      paddingBottom={8}
+    >
+      <Text
+        block
+        paddingBottom={6}
+        paddingLeft={6}
+        paddingTop={6}
+        size={4}
+        weight="bold"
+      >
+        Preferences
+      </Text>
+
+      <Element style={{ position: 'relative' }}>
+        {menuItems.map(({ Icon, id, title }) => (
+          <Stack
+            align="center"
+            css={css({
+              transition: '0.3s ease all',
+              fontSize: 3,
+              paddingX: 6,
+              paddingY: 2,
+              cursor: 'pointer',
+              lineHeight: 1,
+              color: itemId === id ? 'list.hoverForeground' : 'mutedForeground',
+              '&:hover': {
+                backgroundColor: 'list.hoverBackground',
+                color: 'list.hoverForeground',
+              },
+            })}
+            key={title}
+            onClick={() => itemIdChanged(id)}
+          >
+            <Element marginRight={3}>
+              <Icon />
+            </Element>
+
+            {title}
+          </Stack>
+        ))}
+      </Element>
+    </Element>
+  );
+};
diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/SideNavigation/index.js b/packages/app/src/app/pages/common/Modals/PreferencesModal/SideNavigation/index.js
deleted file mode 100644
index 0b06fc3e102..00000000000
--- a/packages/app/src/app/pages/common/Modals/PreferencesModal/SideNavigation/index.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import React from 'react';
-import { Element, Text, Stack } from '@codesandbox/components';
-import css from '@styled-system/css';
-
-export const SideNavigation = ({ menuItems, itemId, setItem }) => (
-  <Element
-    paddingBottom={8}
-    css={css({
-      backgroundColor: 'sideBar.background',
-      borderWidth: 1,
-      borderRightStyle: 'solid',
-      borderColor: 'sideBar.border',
-      width: 220,
-    })}
-  >
-    <Text
-      paddingLeft={6}
-      paddingTop={6}
-      paddingBottom={6}
-      size={4}
-      block
-      weight="bold"
-    >
-      Preferences
-    </Text>
-    <Element style={{ position: 'relative' }}>
-      {menuItems.map(item => (
-        <Stack
-          align="center"
-          css={css({
-            transition: '0.3s ease all',
-            fontSize: 3,
-            paddingX: 6,
-            paddingY: 2,
-            cursor: 'pointer',
-            lineHeight: 1,
-            color:
-              itemId === item.id ? 'list.hoverForeground' : 'mutedForeground',
-            '&:hover': {
-              backgroundColor: 'list.hoverBackground',
-              color: 'list.hoverForeground',
-            },
-          })}
-          onClick={() => setItem({ itemId: item.id })}
-          key={item.title}
-          selected={itemId === item.id}
-        >
-          <Element marginRight={3}>{item.icon}</Element>
-          {item.title}
-        </Stack>
-      ))}
-    </Element>
-  </Element>
-);
diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/VSCodePlaceholder/OpenVSCodeSettingsButton/index.tsx b/packages/app/src/app/pages/common/Modals/PreferencesModal/VSCodePlaceholder/OpenVSCodeSettingsButton.tsx
similarity index 100%
rename from packages/app/src/app/pages/common/Modals/PreferencesModal/VSCodePlaceholder/OpenVSCodeSettingsButton/index.tsx
rename to packages/app/src/app/pages/common/Modals/PreferencesModal/VSCodePlaceholder/OpenVSCodeSettingsButton.tsx
diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/VSCodePlaceholder/index.tsx b/packages/app/src/app/pages/common/Modals/PreferencesModal/VSCodePlaceholder/index.tsx
index 7093a42db9c..666f37a8fdc 100644
--- a/packages/app/src/app/pages/common/Modals/PreferencesModal/VSCodePlaceholder/index.tsx
+++ b/packages/app/src/app/pages/common/Modals/PreferencesModal/VSCodePlaceholder/index.tsx
@@ -1,26 +1,20 @@
 import { editorUrl } from '@codesandbox/common/lib/utils/url-generator';
+import { Text } from '@codesandbox/components';
 import React, { FunctionComponent } from 'react';
 import { Route } from 'react-router-dom';
-import { Text } from '@codesandbox/components';
 
 import { OpenVSCodeSettingsButton } from './OpenVSCodeSettingsButton';
 
-type Props = {
-  hideTitle?: boolean;
-};
-export const VSCodePlaceholder: FunctionComponent<Props> = ({
-  hideTitle = false,
-}) =>
-  hideTitle ? null : (
-    <>
-      <Text size={3} block fontStyle="italic" style={{ lineHeight: 1.5 }}>
-        Some options are disabled because they are handled by VSCode. You can
-        open the settings of VSCode by pressing {"'"}
-        CTRL/CMD + ,{"'"}.
-      </Text>
-      <Route
-        path={editorUrl()}
-        render={({ match }) => match && <OpenVSCodeSettingsButton />}
-      />
-    </>
-  );
+export const VSCodePlaceholder: FunctionComponent = () => (
+  <>
+    <Text block fontStyle="italic" size={3} style={{ lineHeight: 1.5 }}>
+      Some options are disabled because they are handled by VSCode. You can open
+      the settings of VSCode by pressing <kbd>CTRL/CMD</kbd> + <kbd>,</kbd>.
+    </Text>
+
+    <Route
+      path={editorUrl()}
+      render={({ match }) => (match ? <OpenVSCodeSettingsButton /> : null)}
+    />
+  </>
+);
diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/elements.ts b/packages/app/src/app/pages/common/Modals/PreferencesModal/elements.ts
index 25cb1f28e09..c70d3037617 100644
--- a/packages/app/src/app/pages/common/Modals/PreferencesModal/elements.ts
+++ b/packages/app/src/app/pages/common/Modals/PreferencesModal/elements.ts
@@ -12,15 +12,16 @@ export const SubContainer = styled.div`
 `;
 
 export const PreferenceContainer = styled.div<{ disabled?: boolean }>`
-  padding-top: 0.5rem;
+  ${({ disabled }) => css`
+    padding-top: 0.5rem;
 
-  ${props =>
-    props.disabled &&
-    css`
-      opacity: 0.5;
-      pointer-events: none;
-      cursor: disabled;
-    `}
+    ${disabled &&
+      css`
+        opacity: 0.5;
+        pointer-events: none;
+        cursor: disabled;
+      `}
+  `};
 `;
 
 // Preference is typed in a bad way, not possible to infer
diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/index.tsx b/packages/app/src/app/pages/common/Modals/PreferencesModal/index.tsx
index 8b0b60be622..2c27764d57e 100644
--- a/packages/app/src/app/pages/common/Modals/PreferencesModal/index.tsx
+++ b/packages/app/src/app/pages/common/Modals/PreferencesModal/index.tsx
@@ -1,131 +1,118 @@
-import React, { useMemo } from 'react';
-import { useOvermind } from 'app/overmind';
-import css from '@styled-system/css';
 import { Stack } from '@codesandbox/components';
+import css from '@styled-system/css';
+import React, { ComponentProps, ComponentType, FunctionComponent } from 'react';
 
-import AppearanceIcon from 'react-icons/lib/md/color-lens';
 import CodeIcon from 'react-icons/lib/fa/code';
-import CreditCardIcon from 'react-icons/lib/md/credit-card';
+import CodeFormatIcon from 'react-icons/lib/fa/dedent';
+import FlaskIcon from 'react-icons/lib/fa/flask';
 import BrowserIcon from 'react-icons/lib/go/browser';
+import KeyboardIcon from 'react-icons/lib/go/keyboard';
 import StarIcon from 'react-icons/lib/go/star';
-import FlaskIcon from 'react-icons/lib/fa/flask';
-import CodeFormatIcon from 'react-icons/lib/fa/dedent';
+import AppearanceIcon from 'react-icons/lib/md/color-lens';
+import CreditCardIcon from 'react-icons/lib/md/credit-card';
 import IntegrationIcon from 'react-icons/lib/md/device-hub';
-import KeyboardIcon from 'react-icons/lib/go/keyboard';
 
-import { SideNavigation } from './SideNavigation';
+import { useOvermind } from 'app/overmind';
+
+import { Alert } from '../Common/Alert';
 
 import { Appearance } from './Appearance';
+import { Badges } from './Badges';
+import { CodeFormatting } from './CodeFormatting';
 import { EditorSettings } from './EditorPageSettings/EditorSettings';
 import { PreviewSettings } from './EditorPageSettings/PreviewSettings';
-import { CodeFormatting } from './CodeFormatting';
-import { PaymentInfo } from './PaymentInfo';
-import { Integrations } from './Integrations';
-import { Badges } from './Badges';
 import { Experiments } from './Experiments';
+import { Integrations } from './Integrations';
 import { KeyMapping } from './KeyMapping';
-import { Alert } from '../Common/Alert';
+import { PaymentInfo } from './PaymentInfo';
+import { SideNavigation } from './SideNavigation';
 
-const PreferencesModal: React.FC = () => {
+type MenuItem = ComponentProps<typeof SideNavigation>['menuItems'][0] & {
+  Content: ComponentType;
+};
+const getItems = (isLoggedIn: boolean, isPatron: boolean): MenuItem[] =>
+  [
+    {
+      Content: Appearance,
+      Icon: AppearanceIcon,
+      id: 'appearance',
+      title: 'Appearance',
+    },
+    {
+      Content: EditorSettings,
+      Icon: CodeIcon,
+      id: 'editor',
+      title: 'Editor',
+    },
+    {
+      Content: CodeFormatting,
+      Icon: CodeFormatIcon,
+      id: 'prettierSettings',
+      title: 'Prettier Settings',
+    },
+    {
+      Content: PreviewSettings,
+      Icon: BrowserIcon,
+      id: 'preview',
+      title: 'Preview',
+    },
+    {
+      Content: KeyMapping,
+      Icon: KeyboardIcon,
+      id: 'keybindings',
+      title: 'Key Bindings',
+    },
+    isLoggedIn && {
+      Content: Integrations,
+      Icon: IntegrationIcon,
+      id: 'integrations',
+      title: 'Integrations',
+    },
+    isPatron && {
+      Content: PaymentInfo,
+      Icon: CreditCardIcon,
+      id: 'paymentInfo',
+      title: 'Payment Info',
+    },
+    isPatron && {
+      Content: Badges,
+      Icon: StarIcon,
+      id: 'badges',
+      title: 'Badges',
+    },
+    {
+      Content: Experiments,
+      Icon: FlaskIcon,
+      id: 'experiments',
+      title: 'Experiments',
+    },
+  ].filter(Boolean);
+
+export const PreferencesModal: FunctionComponent = () => {
   const {
     state: {
-      isPatron,
       isLoggedIn,
+      isPatron,
       preferences: { itemId = 'appearance' },
     },
-    actions: {
-      preferences: { itemIdChanged },
-    },
   } = useOvermind();
-
-  const items = useMemo(
-    () =>
-      [
-        {
-          id: 'appearance',
-          title: 'Appearance',
-          icon: <AppearanceIcon />,
-          content: <Appearance />,
-        },
-        {
-          id: 'editor',
-          title: 'Editor',
-          icon: <CodeIcon />,
-          content: <EditorSettings />,
-        },
-        {
-          id: 'prettierSettings',
-          title: 'Prettier Settings',
-          icon: <CodeFormatIcon />,
-          content: <CodeFormatting />,
-        },
-        {
-          id: 'preview',
-          title: 'Preview',
-          icon: <BrowserIcon />,
-          content: <PreviewSettings />,
-        },
-        {
-          id: 'keybindings',
-          title: 'Key Bindings',
-          icon: <KeyboardIcon />,
-          content: <KeyMapping />,
-        },
-        isLoggedIn && {
-          id: 'integrations',
-          title: 'Integrations',
-          icon: <IntegrationIcon />,
-          content: <Integrations />,
-        },
-        isPatron && {
-          id: 'paymentInfo',
-          title: 'Payment Info',
-          icon: <CreditCardIcon />,
-          content: <PaymentInfo />,
-        },
-        isPatron && {
-          id: 'badges',
-          title: 'Badges',
-          icon: <StarIcon />,
-          content: <Badges />,
-        },
-        {
-          id: 'experiments',
-          title: 'Experiments',
-          icon: <FlaskIcon />,
-          content: <Experiments />,
-        },
-      ].filter(Boolean),
-    [isLoggedIn, isPatron]
-  );
-
-  const item = items.find(currentItem => currentItem.id === itemId);
+  const items = getItems(isLoggedIn, isPatron);
+  const { Content } = items.find(({ id }) => id === itemId);
 
   return (
-    <Stack
-      css={css({
-        fontFamily: "'Inter', sans-serif",
-      })}
-    >
-      <SideNavigation
-        itemId={itemId}
-        menuItems={items}
-        setItem={itemIdChanged}
-      />
+    <Stack css={css({ fontFamily: "'Inter', sans-serif" })}>
+      <SideNavigation menuItems={items} />
+
       <Alert
         css={css({
           height: 482,
           width: '100%',
           padding: 6,
-          '*': {
-            boxSizing: 'border-box',
-          },
+          '*': { boxSizing: 'border-box' },
         })}
       >
-        {item.content}
+        <Content />
       </Alert>
     </Stack>
   );
 };
-
-export default PreferencesModal;
diff --git a/packages/app/src/app/pages/common/Modals/index.tsx b/packages/app/src/app/pages/common/Modals/index.tsx
index 356c0498f5c..5c527ad0d15 100644
--- a/packages/app/src/app/pages/common/Modals/index.tsx
+++ b/packages/app/src/app/pages/common/Modals/index.tsx
@@ -22,7 +22,7 @@ import { LiveSessionEnded } from './LiveSessionEnded';
 import LiveSessionVersionMismatch from './LiveSessionVersionMismatch';
 import { NetlifyLogs } from './NetlifyLogs';
 import { PickSandboxModal } from './PickSandboxModal';
-import PreferencesModal from './PreferencesModal';
+import { PreferencesModal } from './PreferencesModal';
 import { SearchDependenciesModal } from './SearchDependenciesModal';
 import { SelectSandboxModal } from './SelectSandboxModal';
 import { ShareModal } from './ShareModal';
diff --git a/packages/app/src/app/pages/common/VercelIntegration/index.tsx b/packages/app/src/app/pages/common/VercelIntegration.tsx
similarity index 88%
rename from packages/app/src/app/pages/common/VercelIntegration/index.tsx
rename to packages/app/src/app/pages/common/VercelIntegration.tsx
index 347e0870bf6..2ffed87925e 100644
--- a/packages/app/src/app/pages/common/VercelIntegration/index.tsx
+++ b/packages/app/src/app/pages/common/VercelIntegration.tsx
@@ -7,7 +7,9 @@ import { useOvermind } from 'app/overmind';
 type Props = {
   small?: boolean;
 };
-export const VercelIntegration: FunctionComponent<Props> = ({ small }) => {
+export const VercelIntegration: FunctionComponent<Props> = ({
+  small = false,
+}) => {
   const {
     actions: { signInVercelClicked, signOutVercelClicked },
     state: { user, isLoadingVercel },