diff --git a/packages/app/config/stubs/lru-cache.js b/packages/app/config/stubs/lru-cache.js
index c6116c608bf..d856d54ad53 100644
--- a/packages/app/config/stubs/lru-cache.js
+++ b/packages/app/config/stubs/lru-cache.js
@@ -479,4 +479,4 @@ function Entry(key, value, length, now, maxAge) {
   this.length = length;
   this.now = now;
   this.maxAge = maxAge || 0;
-}
+}
\ No newline at end of file
diff --git a/packages/app/src/app/pages/Profile/index.js b/packages/app/src/app/pages/Profile/index.js
deleted file mode 100644
index 3bc831a7ff3..00000000000
--- a/packages/app/src/app/pages/Profile/index.js
+++ /dev/null
@@ -1,105 +0,0 @@
-/* @flow */
-import React from 'react';
-import Helmet from 'react-helmet';
-import { Route, Switch } from 'react-router-dom';
-import MaxWidth from '@codesandbox/common/lib/components/flex/MaxWidth';
-import Margin from '@codesandbox/common/lib/components/spacing/Margin';
-import {
-  profileSandboxesUrl,
-  profileLikesUrl,
-} from '@codesandbox/common/lib/utils/url-generator';
-import { inject, observer } from 'app/componentConnectors';
-import { NotFound } from 'app/pages/common/NotFound';
-import Header from './Header';
-import Navigation from './Navigation';
-import Showcase from './Showcase';
-import Sandboxes from './Sandboxes';
-import { Container, Content } from './elements';
-
-type Props = {
-  match: {
-    params: { username: string },
-    url: string,
-  },
-  signals: any,
-  store: any,
-};
-
-class Profile extends React.Component<Props> {
-  componentDidMount() {
-    const { username } = this.props.match.params;
-
-    this.props.signals.profile.profileMounted({ username });
-  }
-
-  componentDidUpdate(prevProps) {
-    const prevUsername = prevProps.match.params.username;
-    const { username } = this.props.match.params;
-
-    if (prevUsername !== username) {
-      this.props.signals.profile.profileMounted({ username });
-    }
-  }
-
-  render() {
-    const { store, match } = this.props;
-
-    if (store.profile.notFound) {
-      return <NotFound />;
-    }
-
-    if (!store.profile.current) return <div />;
-
-    const user = store.profile.current;
-
-    return (
-      <Container>
-        <Helmet>
-          <title>{user.name || user.username} - CodeSandbox</title>
-        </Helmet>
-        <Header user={user} />
-        <Content>
-          <MaxWidth>
-            <Navigation
-              username={user.username}
-              sandboxCount={user.sandboxCount}
-              likeCount={user.givenLikeCount}
-            />
-          </MaxWidth>
-        </Content>
-        <MaxWidth width={1024}>
-          <Margin horizontal={2} style={{ minHeight: '60vh' }}>
-            <Switch>
-              <Route path={match.url} exact render={() => <Showcase />} />
-              <Route
-                path={`${profileSandboxesUrl(user.username)}/:page?`}
-                // eslint-disable-next-line
-                children={({ match }) => (
-                  <Sandboxes
-                    source="currentSandboxes"
-                    page={match.params.page && +match.params.page}
-                    baseUrl={profileSandboxesUrl(user.username)}
-                  />
-                )}
-              />
-              <Route
-                path={`${profileLikesUrl(user.username)}/:page?`}
-                // eslint-disable-next-line
-                children={({ match }) => (
-                  <Sandboxes
-                    source="currentLikedSandboxes"
-                    page={match.params.page && +match.params.page}
-                    baseUrl={profileLikesUrl(user.username)}
-                  />
-                )}
-              />
-            </Switch>
-          </Margin>
-        </MaxWidth>
-      </Container>
-    );
-  }
-}
-
-// eslint-disable-next-line import/no-default-export
-export default inject('signals', 'store')(observer(Profile));
diff --git a/packages/app/src/app/pages/Profile/index.tsx b/packages/app/src/app/pages/Profile/index.tsx
new file mode 100644
index 00000000000..fc8af9ca4c5
--- /dev/null
+++ b/packages/app/src/app/pages/Profile/index.tsx
@@ -0,0 +1,86 @@
+import MaxWidth from '@codesandbox/common/lib/components/flex/MaxWidth';
+import Margin from '@codesandbox/common/lib/components/spacing/Margin';
+import { profileLikesUrl, profileSandboxesUrl } from '@codesandbox/common/lib/utils/url-generator';
+import { useOvermind } from 'app/overmind';
+import { NotFound } from 'app/pages/common/NotFound';
+import React from 'react';
+import Helmet from 'react-helmet';
+import { RouteComponentProps, withRouter } from 'react-router';
+import { Route, Switch } from 'react-router-dom';
+import { Container, Content } from './elements';
+import Header from './Header';
+import Navigation from './Navigation';
+import Sandboxes from './Sandboxes';
+import Showcase from './Showcase';
+
+const Profile: React.FC<RouteComponentProps<{}>> = ({
+  match: {
+    params: { username },
+    url,
+  },
+}) => {
+  const {
+    state: {
+      profile: { notFound, current },
+    },
+    actions: {
+      profile: { profileMounted },
+    },
+  } = useOvermind();
+
+  React.useEffect(() => {
+    profileMounted({ username });
+  }, [profileMounted, username]);
+
+  if (notFound) {
+    return <NotFound />;
+  }
+  if (!current) {
+    return <div />;
+  }
+  return (
+    <Container>
+      <Helmet>
+        <title>{current.name || current.username} - CodeSandbox</title>
+      </Helmet>
+      <Header user={current} />
+      <Content>
+        <MaxWidth>
+          <Navigation
+            username={current.username}
+            sandboxCount={current.sandboxCount}
+            likeCount={current.givenLikeCount}
+          />
+        </MaxWidth>
+      </Content>
+      <MaxWidth width={1024}>
+        <Margin horizontal={2} style={{ minHeight: '60vh' }}>
+          <Switch>
+            <Route path={url} exact render={() => <Showcase />} />
+            <Route path={`${profileSandboxesUrl(current.username)}/:page?`}>
+              {({ match }) => (
+                <Sandboxes
+                  source="currentSandboxes"
+                  page={match.params.page && +match.params.page}
+                  baseUrl={profileSandboxesUrl(current.username)}
+                />
+              )}
+            </Route>
+            <Route path={`${profileLikesUrl(current.username)}/:page?`}>
+              {({ match }) => (
+                <Sandboxes
+                  source="currentLikedSandboxes"
+                  page={match.params.page && +match.params.page}
+                  baseUrl={profileLikesUrl(current.username)}
+                />
+              )}
+            </Route>
+          </Switch>
+        </Margin>
+      </MaxWidth>
+    </Container>
+  );
+};
+
+// eslint-disable-next-line import/no-default-export
+export default withRouter(Profile);