diff --git a/packages/app/src/app/components/CodeEditor/Monaco/index.js b/packages/app/src/app/components/CodeEditor/Monaco/index.js
index 51895492327..e1bda4d2ccb 100644
--- a/packages/app/src/app/components/CodeEditor/Monaco/index.js
+++ b/packages/app/src/app/components/CodeEditor/Monaco/index.js
@@ -946,9 +946,7 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
       ),
       options: {
         inlineClassName: classification.type
-          ? `${classification.kind} ${classification.type}-of-${
-              classification.parentKind
-            }`
+          ? `${classification.kind} ${classification.type}-of-${classification.parentKind}`
           : classification.kind,
       },
     }));
diff --git a/packages/app/src/app/pages/Profile/Showcase/index.js b/packages/app/src/app/pages/Profile/Showcase/index.js
deleted file mode 100644
index 37c8b6c1deb..00000000000
--- a/packages/app/src/app/pages/Profile/Showcase/index.js
+++ /dev/null
@@ -1,74 +0,0 @@
-import * as React from 'react';
-import { inject, observer } from 'app/componentConnectors';
-
-import Column from '@codesandbox/common/lib/components/flex/Column';
-import Centered from '@codesandbox/common/lib/components/flex/Centered';
-import Margin from '@codesandbox/common/lib/components/spacing/Margin';
-import { Button } from '@codesandbox/common/lib/components/Button';
-
-import SandboxInfo from './SandboxInfo';
-import ShowcasePreview from '../../common/ShowcasePreview';
-
-import { ErrorTitle } from './elements';
-
-class Showcase extends React.Component {
-  openModal = () => {
-    this.props.signals.profile.selectSandboxClicked();
-  };
-
-  render() {
-    const { store } = this.props;
-    const sandbox = store.profile.showcasedSandbox;
-    const isCurrentUser = store.profile.isProfileCurrentUser;
-
-    if (store.profile.isLoadingProfile) {
-      return (
-        <Centered vertical horizontal>
-          <Margin top={4}>
-            <ErrorTitle>Loading showcased sandbox...</ErrorTitle>
-          </Margin>
-        </Centered>
-      );
-    }
-
-    if (!sandbox) {
-      return (
-        <Centered vertical horizontal>
-          <Margin top={4}>
-            <ErrorTitle>
-              {isCurrentUser ? "You don't" : "This user doesn't"} have any
-              sandboxes yet
-            </ErrorTitle>
-          </Margin>
-        </Centered>
-      );
-    }
-
-    return (
-      <Column alignItems="center">
-        <Margin top={1}>
-          {isCurrentUser && (
-            <Button small onClick={this.openModal}>
-              Change Sandbox
-            </Button>
-          )}
-        </Margin>
-        <Margin top={2} style={{ width: '100%' }}>
-          <Column alignItems="initial">
-            <div style={{ flex: 2 }}>
-              <ShowcasePreview
-                sandbox={sandbox}
-                settings={this.props.store.preferences.settings}
-              />
-            </div>
-            <div style={{ flex: 1 }}>
-              <SandboxInfo sandbox={sandbox} isLoggedIn={store.isLoggedIn} />
-            </div>
-          </Column>
-        </Margin>
-      </Column>
-    );
-  }
-}
-
-export default inject('signals', 'store')(observer(Showcase));
diff --git a/packages/app/src/app/pages/Profile/Showcase/index.tsx b/packages/app/src/app/pages/Profile/Showcase/index.tsx
new file mode 100644
index 00000000000..3633e61e45d
--- /dev/null
+++ b/packages/app/src/app/pages/Profile/Showcase/index.tsx
@@ -0,0 +1,77 @@
+import React from 'react';
+import { useOvermind } from 'app/overmind';
+
+import Column from '@codesandbox/common/lib/components/flex/Column';
+import Centered from '@codesandbox/common/lib/components/flex/Centered';
+import Margin from '@codesandbox/common/lib/components/spacing/Margin';
+import { Button } from '@codesandbox/common/lib/components/Button';
+
+import SandboxInfo from './SandboxInfo';
+import ShowcasePreview from '../../common/ShowcasePreview';
+
+import { ErrorTitle } from './elements';
+
+export const Showcase: React.FC<{}> = () => {
+  const {
+    state: {
+      profile,
+      profile: { isLoadingProfile },
+      preferences: { settings },
+      isLoggedIn,
+    },
+    actions: {
+      profile: { selectSandboxClicked },
+    },
+  } = useOvermind();
+  const sandbox = profile.showcasedSandbox;
+  const isCurrentUser = profile.isProfileCurrentUser;
+
+  const openModal = () => {
+    selectSandboxClicked();
+  };
+
+  if (isLoadingProfile) {
+    return (
+      <Centered vertical horizontal>
+        <Margin top={4}>
+          <ErrorTitle>Loading showcased sandbox...</ErrorTitle>
+        </Margin>
+      </Centered>
+    );
+  }
+
+  if (!sandbox) {
+    return (
+      <Centered vertical horizontal>
+        <Margin top={4}>
+          <ErrorTitle>
+            {isCurrentUser ? "You don't" : "This user doesn't"} have any
+            sandboxes yet
+          </ErrorTitle>
+        </Margin>
+      </Centered>
+    );
+  }
+
+  return (
+    <Column alignItems="center">
+      <Margin top={1}>
+        {isCurrentUser && (
+          <Button small onClick={openModal}>
+            Change Sandbox
+          </Button>
+        )}
+      </Margin>
+      <Margin top={2} style={{ width: '100%' }}>
+        <Column alignItems="initial">
+          <div style={{ flex: 2 }}>
+            <ShowcasePreview sandbox={sandbox} settings={settings} />
+          </div>
+          <div style={{ flex: 1 }}>
+            <SandboxInfo sandbox={sandbox} isLoggedIn={isLoggedIn} />
+          </div>
+        </Column>
+      </Margin>
+    </Column>
+  );
+};
diff --git a/packages/app/src/app/pages/Profile/index.tsx b/packages/app/src/app/pages/Profile/index.tsx
index 8147c33f56a..47c8762a72c 100644
--- a/packages/app/src/app/pages/Profile/index.tsx
+++ b/packages/app/src/app/pages/Profile/index.tsx
@@ -11,7 +11,7 @@ import { NotFound } from 'app/pages/common/NotFound';
 import { useOvermind } from 'app/overmind';
 import Header from './Header';
 import Navigation from './Navigation';
-import Showcase from './Showcase';
+import { Showcase } from './Showcase';
 import Sandboxes from './Sandboxes';
 import { Container, Content } from './elements';
 
diff --git a/packages/common/src/components/flex/Column.tsx b/packages/common/src/components/flex/Column.tsx
index d573a37fb07..bcde99f3833 100644
--- a/packages/common/src/components/flex/Column.tsx
+++ b/packages/common/src/components/flex/Column.tsx
@@ -2,14 +2,15 @@ import styled from 'styled-components';
 
 export default styled.div<{
   flex?: boolean;
-  justifyContent: string;
-  alignItems: string;
+  justifyContent?: string;
+  alignItems?: string;
 }>`
   display: flex;
   flex-direction: column;
 
   ${props => props.flex && `flex: ${props.flex}`};
 
-  justify-content: ${props => props.justifyContent};
-  align-items: ${props => props.alignItems};
+  ${props =>
+    props.justifyContent && `justify-content: ${props.justifyContent}`};
+  ${props => props.alignItems && `align-items: ${props.alignItems}`};
 `;