diff --git a/packages/app/src/app/overmind/namespaces/dashboard/actions.ts b/packages/app/src/app/overmind/namespaces/dashboard/actions.ts
index c27b0aadf06..32b2ffa72c1 100755
--- a/packages/app/src/app/overmind/namespaces/dashboard/actions.ts
+++ b/packages/app/src/app/overmind/namespaces/dashboard/actions.ts
@@ -2,7 +2,7 @@ import { Action, AsyncAction } from 'app/overmind';
 import { withLoadApp } from 'app/overmind/factories';
 import { OrderBy } from './state';
 
-export const dashboardMounted = withLoadApp();
+export const dashboardMounted: AsyncAction = withLoadApp();
 
 export const sandboxesSelected: Action<{
   sandboxIds: string[];
diff --git a/packages/app/src/app/pages/Dashboard/index.js b/packages/app/src/app/pages/Dashboard/index.js
deleted file mode 100644
index 600c7dee405..00000000000
--- a/packages/app/src/app/pages/Dashboard/index.js
+++ /dev/null
@@ -1,110 +0,0 @@
-// @ts-check
-import * as React from 'react';
-import { inject, observer } from 'app/componentConnectors';
-import RightIcon from 'react-icons/lib/md/keyboard-arrow-right';
-import LeftIcon from 'react-icons/lib/md/keyboard-arrow-left';
-import { withRouter } from 'react-router-dom';
-import { Navigation } from 'app/pages/common/Navigation';
-import { SignInButton } from 'app/pages/common/SignInButton';
-import { client } from 'app/graphql/client';
-
-import SidebarContents from './Sidebar';
-import Content from './Content';
-import {
-  Container,
-  Centered,
-  Content as ContentContainer,
-  LoggedInContainer,
-  LoggedInTitle,
-  Sidebar,
-  NavigationContainer,
-  ShowSidebarButton,
-  OffsettedLogo,
-} from './elements';
-
-class Dashboard extends React.Component {
-  state = {
-    showSidebar: false,
-  };
-
-  componentDidMount() {
-    this.props.signals.dashboard.dashboardMounted();
-  }
-
-  componentWillUnmount() {
-    // Reset store so new visits get fresh data
-    client.resetStore();
-  }
-
-  onRouteChange = () => {
-    this.setState({ showSidebar: false });
-  };
-
-  toggleSidebar = () => {
-    this.setState(({ showSidebar }) => ({ showSidebar: !showSidebar }));
-  };
-
-  render() {
-    const {
-      store: { hasLogIn },
-      history,
-    } = this.props;
-    const { showSidebar } = this.state;
-
-    history.listen(({ state }) => {
-      if (!!state && state.from === 'sandboxSearchFocused') {
-        return;
-      }
-
-      this.onRouteChange();
-    });
-
-    let DashboardContent = (
-      <>
-        <Sidebar active={showSidebar}>
-          <SidebarContents />
-          <ShowSidebarButton onClick={this.toggleSidebar}>
-            {showSidebar ? (
-              <LeftIcon style={{ color: 'white' }} />
-            ) : (
-              <RightIcon style={{ color: 'white' }} />
-            )}
-          </ShowSidebarButton>
-        </Sidebar>
-
-        <ContentContainer>
-          <Content />
-        </ContentContainer>
-      </>
-    );
-
-    if (!hasLogIn) {
-      DashboardContent = (
-        <Container>
-          <Centered>
-            <LoggedInContainer>
-              <OffsettedLogo />
-              <LoggedInTitle>Sign in to CodeSandbox</LoggedInTitle>
-
-              <SignInButton big style={{ fontSize: '1rem' }} />
-            </LoggedInContainer>
-          </Centered>
-        </Container>
-      );
-    }
-
-    return (
-      <Container>
-        <NavigationContainer>
-          <Navigation searchNoInput title="Dashboard" />
-        </NavigationContainer>
-
-        <div style={{ display: 'flex', overflow: 'hidden' }}>
-          {DashboardContent}
-        </div>
-      </Container>
-    );
-  }
-}
-
-export default inject('store', 'signals')(withRouter(observer(Dashboard)));
diff --git a/packages/app/src/app/pages/Dashboard/index.tsx b/packages/app/src/app/pages/Dashboard/index.tsx
new file mode 100644
index 00000000000..0500e590097
--- /dev/null
+++ b/packages/app/src/app/pages/Dashboard/index.tsx
@@ -0,0 +1,105 @@
+import React, { useState, useEffect } from 'react';
+import { useOvermind } from 'app/overmind';
+import RightIcon from 'react-icons/lib/md/keyboard-arrow-right';
+import LeftIcon from 'react-icons/lib/md/keyboard-arrow-left';
+import { withRouter } from 'react-router-dom';
+import { Navigation } from 'app/pages/common/Navigation';
+import { SignInButton } from 'app/pages/common/SignInButton';
+import { client } from 'app/graphql/client';
+
+import SidebarContents from './Sidebar';
+import Content from './Content';
+import {
+  Container,
+  Centered,
+  Content as ContentContainer,
+  LoggedInContainer,
+  LoggedInTitle,
+  Sidebar,
+  NavigationContainer,
+  ShowSidebarButton,
+  OffsettedLogo,
+} from './elements';
+
+const Dashboard = props => {
+  const [showSidebar, setShowSidebar] = useState(false);
+
+  const {
+    state: { hasLogIn },
+    actions: { dashboard },
+  } = useOvermind();
+
+  useEffect(() => {
+    dashboard.dashboardMounted();
+    return () => {
+      // Reset store so new visits get fresh data
+      client.resetStore();
+    };
+  }, [dashboard]);
+
+  const onRouteChange = () => {
+    setShowSidebar(false);
+  };
+
+  const toggleSidebar = () => {
+    setShowSidebar(!showSidebar);
+  };
+
+  const { history } = props;
+
+  history.listen(({ state }) => {
+    if (!!state && state.from === 'sandboxSearchFocused') {
+      return;
+    }
+
+    onRouteChange();
+  });
+
+  let DashboardContent = (
+    <>
+      <Sidebar active={showSidebar}>
+        <SidebarContents />
+        <ShowSidebarButton onClick={toggleSidebar}>
+          {showSidebar ? (
+            <LeftIcon style={{ color: 'white' }} />
+          ) : (
+            <RightIcon style={{ color: 'white' }} />
+          )}
+        </ShowSidebarButton>
+      </Sidebar>
+
+      <ContentContainer>
+        <Content />
+      </ContentContainer>
+    </>
+  );
+
+  if (!hasLogIn) {
+    DashboardContent = (
+      <Container>
+        <Centered>
+          <LoggedInContainer>
+            <OffsettedLogo />
+            <LoggedInTitle>Sign in to CodeSandbox</LoggedInTitle>
+
+            <SignInButton big style={{ fontSize: '1rem' }} />
+          </LoggedInContainer>
+        </Centered>
+      </Container>
+    );
+  }
+
+  return (
+    <Container>
+      <NavigationContainer>
+        <Navigation searchNoInput title="Dashboard" />
+      </NavigationContainer>
+
+      <div style={{ display: 'flex', overflow: 'hidden' }}>
+        {DashboardContent}
+      </div>
+    </Container>
+  );
+};
+
+export default withRouter(Dashboard);
diff --git a/packages/common/src/components/Button/index.tsx b/packages/common/src/components/Button/index.tsx
index 732cb10487e..1b4221d0964 100644
--- a/packages/common/src/components/Button/index.tsx
+++ b/packages/common/src/components/Button/index.tsx
@@ -4,6 +4,7 @@ import { LinkButton, AButton, Button } from './elements';
 export type Props = {
   to?: string;
   href?: string;
+  big?: boolean;
   small?: boolean;
   style?: React.CSSProperties;
   block?: boolean;