diff --git a/packages/app/src/app/pages/Sandbox/ZenModeIntroductionModal/elements.js b/packages/app/src/app/pages/Sandbox/ZenModeIntroductionModal/elements.ts
similarity index 100%
rename from packages/app/src/app/pages/Sandbox/ZenModeIntroductionModal/elements.js
rename to packages/app/src/app/pages/Sandbox/ZenModeIntroductionModal/elements.ts
diff --git a/packages/app/src/app/pages/Sandbox/ZenModeIntroductionModal/index.js b/packages/app/src/app/pages/Sandbox/ZenModeIntroductionModal/index.js
deleted file mode 100644
index 045d62d7e05..00000000000
--- a/packages/app/src/app/pages/Sandbox/ZenModeIntroductionModal/index.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react';
-import { inject, hooksObserver } from 'app/componentConnectors';
-
-import { Button } from '@codesandbox/common/lib/components/Button';
-import Row from '@codesandbox/common/lib/components/flex/Row';
-
-import { Container, Heading, Explanation } from './elements';
-
-function ZenModeIntroduction({ signals }) {
-  return (
-    <Container>
-      <Heading>Zen Mode Explained</Heading>
-      <Explanation>
-        Zen Mode is perfect for giving instruction videos and presentations. You
-        can toggle the sidebar by double tapping <tt>shift</tt>. You can leave
-        Zen Mode by hovering over the file name above the editor and clicking
-        the icon on the right.
-      </Explanation>
-
-      <Row justifyContent="space-around">
-        <Button
-          style={{ marginRight: '.5rem' }}
-          onClick={() => {
-            signals.modalClosed();
-          }}
-        >
-          Close
-        </Button>
-      </Row>
-    </Container>
-  );
-}
-
-export default inject('signals')(hooksObserver(ZenModeIntroduction));
diff --git a/packages/app/src/app/pages/Sandbox/ZenModeIntroductionModal/index.tsx b/packages/app/src/app/pages/Sandbox/ZenModeIntroductionModal/index.tsx
new file mode 100644
index 00000000000..3985426b855
--- /dev/null
+++ b/packages/app/src/app/pages/Sandbox/ZenModeIntroductionModal/index.tsx
@@ -0,0 +1,30 @@
+import React, { FunctionComponent } from 'react';
+import { useOvermind } from 'app/overmind';
+import { Button } from '@codesandbox/common/lib/components/Button';
+import Row from '@codesandbox/common/lib/components/flex/Row';
+
+import { Container, Heading, Explanation } from './elements';
+
+export const ZenModeIntroduction: FunctionComponent = () => {
+  const {
+    actions: { modalClosed },
+  } = useOvermind();
+
+  return (
+    <Container>
+      <Heading>Zen Mode Explained</Heading>
+      <Explanation>
+        Zen Mode is perfect for giving instruction videos and presentations. You
+        can toggle the sidebar by double tapping <code>shift</code>. You can
+        leave Zen Mode by hovering over the file name above the editor and
+        clicking the icon on the right.
+      </Explanation>
+
+      <Row justifyContent="space-around">
+        <Button style={{ marginRight: '.5rem' }} onClick={() => modalClosed()}>
+          Close
+        </Button>
+      </Row>
+    </Container>
+  );
+};
diff --git a/yarn.lock b/yarn.lock
index 66222a2fa7b..c03cfd459c7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1144,7 +1144,7 @@
     exec-sh "^0.3.2"
     minimist "^1.2.0"
 
-"@codesandbox/template-icons@^1.0.1", "@codesandbox/template-icons@^1.01":
+"@codesandbox/template-icons@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@codesandbox/template-icons/-/template-icons-1.0.1.tgz#c29068ce93d7d1db8dfbf0c82d618ee7192d9fb8"
   integrity sha512-o7Zgw88GoV/xogZ56rwXFohIYoYsB2UiKERC49Y1yuwV6SFAshPLdUBx9GX6HAHLUQg5R0pOoRrSeEsan+dHEw==