diff --git a/packages/app/src/app/pages/common/Modals/ForkServerModal/index.js b/packages/app/src/app/pages/common/Modals/ForkServerModal/index.js
deleted file mode 100644
index 57a3507c403..00000000000
--- a/packages/app/src/app/pages/common/Modals/ForkServerModal/index.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import React from 'react';
-import { inject, observer } from 'app/componentConnectors';
-import getTemplateDefinition from '@codesandbox/common/lib/templates';
-import { SignInButton } from 'app/pages/common/SignInButton';
-
-import { Container, Heading, Explanation } from '../elements';
-
-class ForkServerModal extends React.Component {
-  UNSAFE_componentWillUpdate() {
-    // Which means that the user signed in in the meantime with the intention to
-    // fork
-    if (this.props.store.loggedIn) {
-      this.props.signals.editor.forkSandboxClicked();
-      this.props.signals.modalClosed();
-    }
-  }
-
-  render() {
-    const { store } = this.props;
-    const template =
-      store.editor.currentSandbox && store.editor.currentSandbox.template;
-
-    const templateDefinition = getTemplateDefinition(template);
-    const niceName = (
-      <span style={{ color: templateDefinition.color(), fontWeight: 500 }}>
-        {templateDefinition.niceName}
-      </span>
-    );
-
-    return (
-      <Container>
-        <Heading>Fork {niceName} Sandbox</Heading>
-        <Explanation>
-          We execute {niceName} sandboxes in a server container. This is still
-          in beta, so we require you to sign in before you can fork a {niceName}{' '}
-          sandbox.
-        </Explanation>
-
-        <SignInButton style={{ marginTop: 12 }} />
-      </Container>
-    );
-  }
-}
-
-export default inject('store', 'signals')(observer(ForkServerModal));
diff --git a/packages/app/src/app/pages/common/Modals/ForkServerModal/index.tsx b/packages/app/src/app/pages/common/Modals/ForkServerModal/index.tsx
new file mode 100644
index 00000000000..3c407bee998
--- /dev/null
+++ b/packages/app/src/app/pages/common/Modals/ForkServerModal/index.tsx
@@ -0,0 +1,48 @@
+import React, { useEffect } from 'react';
+import { useOvermind } from 'app/overmind';
+import getTemplateDefinition from '@codesandbox/common/lib/templates';
+import { SignInButton } from 'app/pages/common/SignInButton';
+
+import { Container, Heading, Explanation } from '../elements';
+
+export const ForkServerModal: React.FC = () => {
+  const {
+    state: {
+      isLoggedIn,
+      editor: { currentSandbox },
+    },
+    actions: {
+      modalClosed,
+      editor: { forkSandboxClicked },
+    },
+  } = useOvermind();
+
+  useEffect(() => {
+    // Which means that the user signed in in the meantime with the intention to
+    // fork
+    if (isLoggedIn) {
+      forkSandboxClicked();
+      modalClosed();
+    }
+  }, [forkSandboxClicked, isLoggedIn, modalClosed]);
+
+  const templateDefinition = getTemplateDefinition(currentSandbox.template);
+  const niceName = (
+    <span style={{ color: templateDefinition.color(), fontWeight: 500 }}>
+      {templateDefinition.niceName}
+    </span>
+  );
+
+  return (
+    <Container>
+      <Heading>Fork {niceName} Sandbox</Heading>
+      <Explanation>
+        We execute {niceName} sandboxes in a server container. This is still in
+        beta, so we require you to sign in before you can fork a {niceName}{' '}
+        sandbox.
+      </Explanation>
+
+      <SignInButton style={{ marginTop: 12 }} />
+    </Container>
+  );
+};
diff --git a/packages/app/src/app/pages/common/Modals/index.js b/packages/app/src/app/pages/common/Modals/index.js
index 62cdd565c85..65892adeb52 100644
--- a/packages/app/src/app/pages/common/Modals/index.js
+++ b/packages/app/src/app/pages/common/Modals/index.js
@@ -1,38 +1,38 @@
-import React, { Component } from 'react';
+import getTemplateDefinition from '@codesandbox/common/lib/templates';
+import codesandbox from '@codesandbox/common/lib/themes/codesandbox.json';
 import { inject, observer } from 'app/componentConnectors';
-import { ThemeProvider } from 'styled-components';
 import Modal from 'app/components/Modal';
+import getVSCodeTheme from 'app/src/app/pages/Sandbox/Editor/utils/get-vscode-theme';
 import Loadable from 'app/utils/Loadable';
 import { templateColor } from 'app/utils/template-color';
-import getTemplateDefinition from '@codesandbox/common/lib/templates';
-import codesandbox from '@codesandbox/common/lib/themes/codesandbox.json';
-import getVSCodeTheme from 'app/src/app/pages/Sandbox/Editor/utils/get-vscode-theme';
+import React, { Component } from 'react';
+import { ThemeProvider } from 'styled-components';
 
-import NewSandbox from './NewSandbox';
-import PreferencesModal from './PreferencesModal';
-import DeleteSandboxModal from './DeleteSandboxModal';
-import DeleteDeploymentModal from './DeleteDeploymentModal';
-import ShareModal from './ShareModal';
-import DeploymentModal from './DeploymentModal';
-import ExportGitHubModal from './ExportGitHubModal';
 import CommitModal from './CommitModal';
-import PRModal from './PRModal';
-import SelectSandboxModal from './SelectSandboxModal';
-import SearchDependenciesModal from './SearchDependenciesModal';
+import DeleteDeploymentModal from './DeleteDeploymentModal';
 import DeleteProfileSandboxModal from './DeleteProfileSandboxModal';
+import DeleteSandboxModal from './DeleteSandboxModal';
+import DeploymentModal from './DeploymentModal';
 import EmptyTrash from './EmptyTrash';
+import ExportGitHubModal from './ExportGitHubModal';
+import FeedbackModal from './FeedbackModal';
+import { ForkServerModal } from './ForkServerModal';
 import LiveSessionEnded from './LiveSessionEnded';
 import LiveSessionVersionMismatch from './LiveSessionVersionMismatch';
-import UploadModal from './UploadModal';
-import StorageManagementModal from './StorageManagementModal';
-import ForkServerModal from './ForkServerModal';
-import PrivacyServerWarning from './PrivacyServerWarning';
-import PickSandboxModal from './PickSandboxModal';
-import FeedbackModal from './FeedbackModal';
 import NetlifyLogs from './NetlifyLogs';
+import NewSandbox from './NewSandbox';
+import PickSandboxModal from './PickSandboxModal';
+import PreferencesModal from './PreferencesModal';
+import PrivacyServerWarning from './PrivacyServerWarning';
+import PRModal from './PRModal';
+import SearchDependenciesModal from './SearchDependenciesModal';
+import SelectSandboxModal from './SelectSandboxModal';
+import ShareModal from './ShareModal';
 // eslint-disable-next-line
 import SignInForTemplates from './SignInForTemplates/index.ts';
+import StorageManagementModal from './StorageManagementModal';
 import { SurveyModal } from './SurveyModal';
+import UploadModal from './UploadModal';
 
 const MoveSandboxFolderModal = Loadable(() =>
   import('./MoveSandboxFolderModal')