diff --git a/.all-contributorsrc b/.all-contributorsrc
index a7b41bd699e..abb18ce8409 100644
--- a/.all-contributorsrc
+++ b/.all-contributorsrc
@@ -1440,6 +1440,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "sajadhsm",
+      "name": "Sajad Hashemian",
+      "avatar_url": "https://avatars3.githubusercontent.com/u/20022818?v=4",
+      "profile": "https://github.com/sajadhsm",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "contributorsPerLine": 7,
diff --git a/README.md b/README.md
index 096bf5ad22f..f92cd187494 100644
--- a/README.md
+++ b/README.md
@@ -240,6 +240,7 @@ Thanks goes to these wonderful people
     <td align="center"><a href="https://github.com/milap1296"><img src="https://avatars2.githubusercontent.com/u/19545730?v=4" width="100px;" alt="milap1296"/><br /><sub><b>milap1296</b></sub></a><br /><a href="https://github.com/codesandbox/codesandbox-client/commits?author=milap1296" title="Code">💻</a></td>
     <td align="center"><a href="http://yevhenorlov.com"><img src="https://avatars2.githubusercontent.com/u/17388747?v=4" width="100px;" alt="yevhen orlov"/><br /><sub><b>yevhen orlov</b></sub></a><br /><a href="https://github.com/codesandbox/codesandbox-client/commits?author=yevhenorlov" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/NileshPatel17"><img src="https://avatars2.githubusercontent.com/u/27020381?v=4" width="100px;" alt="Nilesh Patel"/><br /><sub><b>Nilesh Patel</b></sub></a><br /><a href="https://github.com/codesandbox/codesandbox-client/commits?author=NileshPatel17" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/sajadhsm"><img src="https://avatars3.githubusercontent.com/u/20022818?v=4" width="100px;" alt="Sajad Hashemian"/><br /><sub><b>Sajad Hashemian</b></sub></a><br /><a href="https://github.com/codesandbox/codesandbox-client/commits?author=sajadhsm" title="Code">💻</a></td>
   </tr>
 </table>
 
diff --git a/packages/app/src/app/components/IntegrationModal/IntegrationModal.tsx b/packages/app/src/app/components/IntegrationModal/IntegrationModal.tsx
index 725a2d11f6d..ac2b390410a 100644
--- a/packages/app/src/app/components/IntegrationModal/IntegrationModal.tsx
+++ b/packages/app/src/app/components/IntegrationModal/IntegrationModal.tsx
@@ -13,7 +13,7 @@ import {
 
 interface IIntegrationModalProps {
   title: string;
-  subtitle: string;
+  subtitle: string | React.ReactNode;
   signedIn: boolean;
   Integration: React.ComponentType;
   name: string;
diff --git a/packages/app/src/app/pages/common/Modals/DeploymentModal/Cube/elements.js b/packages/app/src/app/pages/common/Modals/DeploymentModal/Cube/elements.js
deleted file mode 100644
index 16c89b8164c..00000000000
--- a/packages/app/src/app/pages/common/Modals/DeploymentModal/Cube/elements.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import styled, { css, keyframes } from 'styled-components';
-
-const rotateAnimation = keyframes`
-  0% {
-    transform: rotateX(-37.5deg) rotateY(45deg);
-  }
-  100% {
-    transform: rotateX(-37.5deg) rotateY(405deg);
-  }
-`;
-export const Cube = styled.div`
-  position: absolute;
-  width: ${props => props.size + 1}px;
-  height: ${props => props.size + 1}px;
-
-  * {
-    position: absolute;
-    width: ${props => props.size + 1}px;
-    height: ${props => props.size + 1}px;
-  }
-`;
-
-export const Sides = styled.div`
-  ${({ noAnimation }) =>
-    !noAnimation &&
-    css`
-      animation: ${rotateAnimation} 1s linear infinite;
-    `};
-  transform-style: preserve-3d;
-  transform: rotateX(-37.5deg) rotateY(45deg);
-
-  * {
-    box-sizing: border-box;
-    background-color: rgba(242, 119, 119, 0.5);
-    border: ${({ size }) => size / 10}px solid white;
-  }
-`;
-
-export const Side = styled.div`
-  transform-origin: 50% 50%;
-  transform: ${({ rotate }) => rotate} translateZ(${({ size }) => size / 2}px);
-`;
diff --git a/packages/app/src/app/pages/common/Modals/DeploymentModal/Cube/index.js b/packages/app/src/app/pages/common/Modals/DeploymentModal/Cube/index.js
deleted file mode 100644
index e282765360c..00000000000
--- a/packages/app/src/app/pages/common/Modals/DeploymentModal/Cube/index.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-import { Cube, Sides, Side } from './elements';
-
-function CubeComponent({ size = 150, noAnimation, className }) {
-  return (
-    <Cube className={className} size={size}>
-      <Sides noAnimation={noAnimation} size={size}>
-        <Side rotate="rotateX(90deg)" size={size} />
-        <Side rotate="rotateX(-90deg)" size={size} />
-        <Side rotate="rotateY(0deg)" size={size} />
-        <Side rotate="rotateY(-180deg)" size={size} />
-        <Side rotate="rotateY(-90deg)" size={size} />
-        <Side rotate="rotateY(90deg)" size={size} />
-      </Sides>
-    </Cube>
-  );
-}
-
-export default CubeComponent;
diff --git a/packages/app/src/app/pages/common/Modals/DeploymentModal/index.js b/packages/app/src/app/pages/common/Modals/DeploymentModal/DeploymentModal.tsx
similarity index 77%
rename from packages/app/src/app/pages/common/Modals/DeploymentModal/index.js
rename to packages/app/src/app/pages/common/Modals/DeploymentModal/DeploymentModal.tsx
index 8f9cb16e8b0..a9ec3c3f4c5 100644
--- a/packages/app/src/app/pages/common/Modals/DeploymentModal/index.js
+++ b/packages/app/src/app/pages/common/Modals/DeploymentModal/DeploymentModal.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { FunctionComponent } from 'react';
 import { Button } from '@codesandbox/common/lib/components/Button';
 import Centered from '@codesandbox/common/lib/components/flex/Centered';
 import Margin from '@codesandbox/common/lib/components/spacing/Margin';
-import { inject, observer } from 'app/componentConnectors';
+import { useOvermind } from 'app/overmind';
 import { ZeitIntegration } from 'app/pages/common/ZeitIntegration';
 import { IntegrationModal } from 'app/components/IntegrationModal';
 import track from '@codesandbox/common/lib/utils/analytics';
@@ -17,10 +17,20 @@ import {
   DeploymentManagementNotice,
 } from './elements';
 
-function DeploymentModal({ store, signals }) {
-  const { user } = store;
+export const DeploymentModal: FunctionComponent = () => {
+  const {
+    state: {
+      user: {
+        integrations: { zeit },
+      },
+      deployment: { deploying, url },
+    },
+    actions: {
+      deployment: { deployClicked },
+    },
+  } = useOvermind();
 
-  const zeitSignedIn = user.integrations.zeit;
+  const zeitSignedIn = !!zeit;
 
   return (
     <IntegrationModal
@@ -43,10 +53,10 @@ function DeploymentModal({ store, signals }) {
       signedIn={zeitSignedIn}
     >
       <Centered horizontal>
-        {store.deployment.deploying && (
+        {deploying && (
           <Margin top={1}>
             <DeployText>Deploying sandbox...</DeployText>
-            <DeployAnimationContainer deploying={store.deployment.deploying}>
+            <DeployAnimationContainer deploying={deploying}>
               <StyledLogo width={70} height={70} />
               {[0, 1, 2, 3].map(i => (
                 <StyledCube key={i} i={i} size={20} />
@@ -56,17 +66,17 @@ function DeploymentModal({ store, signals }) {
           </Margin>
         )}
 
-        {store.deployment.url ? (
+        {url ? (
           <Margin top={1} bottom={2}>
             <Centered horizontal>
               <DeployText>Deployed!</DeployText>
 
               <DeployedLink
-                href={store.deployment.url}
+                href={url}
                 rel="nofollow noreferrer"
                 target="_blank"
               >
-                {store.deployment.url}
+                {url}
               </DeployedLink>
 
               <DeploymentManagementNotice>
@@ -83,13 +93,13 @@ function DeploymentModal({ store, signals }) {
             </Centered>
           </Margin>
         ) : (
-          <ButtonContainer deploying={store.deployment.deploying}>
+          <ButtonContainer deploying={deploying}>
             <Button
               onClick={() => {
                 track('Deploy Clicked', { provider: 'zeit' });
-                signals.deployment.deployClicked();
+                deployClicked();
               }}
-              disabled={!zeitSignedIn || store.deployment.deploying}
+              disabled={!zeitSignedIn || deploying}
             >
               Deploy Now
             </Button>
@@ -98,6 +108,4 @@ function DeploymentModal({ store, signals }) {
       </Centered>
     </IntegrationModal>
   );
-}
-
-export default inject('store', 'signals')(observer(DeploymentModal));
+};
diff --git a/packages/app/src/app/pages/common/Modals/DeploymentModal/elements.js b/packages/app/src/app/pages/common/Modals/DeploymentModal/elements.ts
similarity index 67%
rename from packages/app/src/app/pages/common/Modals/DeploymentModal/elements.js
rename to packages/app/src/app/pages/common/Modals/DeploymentModal/elements.ts
index d795276db1b..4ff73195f8f 100644
--- a/packages/app/src/app/pages/common/Modals/DeploymentModal/elements.js
+++ b/packages/app/src/app/pages/common/Modals/DeploymentModal/elements.ts
@@ -1,9 +1,9 @@
-import styled, { keyframes } from 'styled-components';
+import styled, { css, keyframes } from 'styled-components';
 import delayInEffect from '@codesandbox/common/lib/utils/animation/delay-effect';
 import delayOutEffect from '@codesandbox/common/lib/utils/animation/delay-out-effect';
 import { NowLogo } from 'app/components/NowLogo';
 import { OpaqueLogo } from 'app/components/OpaqueLogo';
-import Cube from './Cube';
+import { Cube } from 'app/components/Cube';
 
 const cubeAnimation = keyframes`
   0% {
@@ -23,24 +23,28 @@ const cubeAnimation = keyframes`
   }
 `;
 
-export const ButtonContainer = styled.div`
-  margin: 2rem 4rem;
-  margin-bottom: 3rem;
-  ${delayInEffect()} ${({ deploying }) =>
-    deploying && delayOutEffect(0, false)};
+export const ButtonContainer = styled.div<{ deploying: boolean }>`
+  ${({ deploying }) => css`
+    margin: 2rem 4rem;
+    margin-bottom: 3rem;
+    ${delayInEffect()}
+    ${deploying && delayOutEffect(0, false)};
+  `}
 `;
 
-export const DeployAnimationContainer = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: absolute;
-  top: 16px;
-  bottom: 10px;
-  right: 0;
-  left: 0;
+export const DeployAnimationContainer = styled.div<{ deploying: boolean }>`
+  ${({ deploying }) => css`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    top: 16px;
+    bottom: 10px;
+    right: 0;
+    left: 0;
 
-  ${({ deploying }) => deploying && delayInEffect(0, false)};
+    ${deploying && delayInEffect(0, false)};
+  `}
 `;
 
 export const StyledNowLogo = styled(NowLogo)`
@@ -49,7 +53,7 @@ export const StyledNowLogo = styled(NowLogo)`
   transform: translateY(10px) translateX(80px);
 `;
 
-export const StyledCube = styled(Cube)`
+export const StyledCube = styled(Cube)<{ i: number }>`
   position: absolute;
   animation: ${cubeAnimation} 2s ease-in infinite;
   animation-delay: ${({ i }) => i * 0.5}s;
diff --git a/packages/app/src/app/pages/common/Modals/DeploymentModal/index.ts b/packages/app/src/app/pages/common/Modals/DeploymentModal/index.ts
new file mode 100644
index 00000000000..6a65fee8a25
--- /dev/null
+++ b/packages/app/src/app/pages/common/Modals/DeploymentModal/index.ts
@@ -0,0 +1 @@
+export { DeploymentModal } from './DeploymentModal';
diff --git a/packages/app/src/app/pages/common/Modals/index.js b/packages/app/src/app/pages/common/Modals/index.js
index 7bac3e035f5..b073f0e6b65 100644
--- a/packages/app/src/app/pages/common/Modals/index.js
+++ b/packages/app/src/app/pages/common/Modals/index.js
@@ -12,7 +12,7 @@ import CommitModal from './CommitModal';
 import { DeleteDeploymentModal } from './DeleteDeploymentModal';
 import { DeleteProfileSandboxModal } from './DeleteProfileSandboxModal';
 import DeleteSandboxModal from './DeleteSandboxModal';
-import DeploymentModal from './DeploymentModal';
+import { DeploymentModal } from './DeploymentModal';
 import { EmptyTrash } from './EmptyTrash';
 import ExportGitHubModal from './ExportGitHubModal';
 import { FeedbackModal } from './FeedbackModal';