diff --git a/.all-contributorsrc b/.all-contributorsrc
index a7b41bd699e..d304c336631 100644
--- a/.all-contributorsrc
+++ b/.all-contributorsrc
@@ -1395,6 +1395,15 @@
         "code"
       ]
     },
+    {
+    "login": "ivandevp",
+      "name": "Ivan Medina",
+      "avatar_url": "https://avatars3.githubusercontent.com/u/9284690?v=4",
+      "profile": "https://twitter.com/ivandevp",
+            "contributions": [
+        "code"
+      ]
+      },
     {
       "login": "Gobinath-Manokaran",
       "name": "Gobinath-Manokaran",
diff --git a/README.md b/README.md
index 096bf5ad22f..2303af4b32d 100644
--- a/README.md
+++ b/README.md
@@ -235,6 +235,8 @@ Thanks goes to these wonderful people
   </tr>
   <tr>
     <td align="center"><a href="http://hetpatel33.github.io"><img src="https://avatars0.githubusercontent.com/u/13877514?v=4" width="100px;" alt="Het Patel"/><br /><sub><b>Het Patel</b></sub></a><br /><a href="https://github.com/codesandbox/codesandbox-client/commits?author=hetpatel33" title="Code">💻</a></td>
+    <td align="center"><a href="https://twitter.com/ivandevp"><img src="https://avatars3.githubusercontent.com/u/9284690?v=4" width="100px;" alt="Ivan Medina"/><br /><sub><b>Ivan Medina</b></sub></a><br /><a href="https://github.com/codesandbox/codesandbox-client/commits?author=ivandevp" title="Code">💻</a></td>
+    <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="https://github.com/Gobinath-Manokaran"><img src="https://avatars2.githubusercontent.com/u/6711914?v=4" width="100px;" alt="Gobinath-Manokaran"/><br /><sub><b>Gobinath-Manokaran</b></sub></a><br /><a href="https://github.com/codesandbox/codesandbox-client/commits?author=Gobinath-Manokaran" title="Code">💻</a></td>
     <td align="center"><a href="https://armujahid.me"><img src="https://avatars1.githubusercontent.com/u/3725386?v=4" width="100px;" alt="Abdul Rauf"/><br /><sub><b>Abdul Rauf</b></sub></a><br /><a href="https://github.com/codesandbox/codesandbox-client/commits?author=armujahid" title="Code">💻</a> <a href="https://github.com/codesandbox/codesandbox-client/commits?author=armujahid" title="Documentation">📖</a></td>
     <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>
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/index.js b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/index.js
deleted file mode 100644
index ab5b2c342fc..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/index.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import { getModulePath } from '@codesandbox/common/lib/sandbox/modules';
-import { inject, observer } from 'app/componentConnectors';
-import * as React from 'react';
-
-import EditIcons from './DirectoryEntry/Entry/EditIcons';
-import DirectoryEntry from './DirectoryEntry/index';
-
-class Files extends React.Component {
-  createModule = () => {
-    // INCREDIBLY BAD PRACTICE! TODO: FIX THIS
-    this._createModule();
-  };
-
-  createDirectory = () => {
-    // INCREDIBLY BAD PRACTICE! TODO: FIX THIS
-    this._createDirectory();
-  };
-
-  uploadFile = () => {
-    // INCREDIBLY BAD PRACTICE! TODO: FIX THIS
-    this._uploadFile();
-  };
-
-  onDownload = () => {
-    this.props.signals.editor.createZipClicked();
-  };
-
-  getModulePath = moduleId => {
-    try {
-      const sandbox = this.props.store.editor.currentSandbox;
-      return getModulePath(sandbox.modules, sandbox.directories, moduleId);
-    } catch (e) {
-      return '';
-    }
-  };
-
-  render() {
-    const { store } = this.props;
-    const sandbox = store.editor.currentSandbox;
-
-    return (
-      <DirectoryEntry
-        root
-        getModulePath={this.getModulePath}
-        title={sandbox.title || 'Project'}
-        signals={
-          this.props
-            .signals /* TODO: Just pass what is needed by the DragDrop */
-        }
-        initializeProperties={({
-          onCreateModuleClick,
-          onCreateDirectoryClick,
-          onUploadFileClick,
-        }) => {
-          this._createModule = onCreateModuleClick;
-          this._createDirectory = onCreateDirectoryClick;
-          this._uploadFile = onUploadFileClick;
-
-          if (this.props.setEditActions) {
-            this.props.setEditActions(
-              <EditIcons
-                hovering
-                forceShow={window.__isTouch}
-                onCreateFile={this.createModule}
-                onCreateDirectory={this.createDirectory}
-                onDownload={this.onDownload}
-                onUploadFile={
-                  store.isLoggedIn && sandbox.privacy === 0
-                    ? this.uploadFile
-                    : undefined
-                }
-              />
-            );
-          }
-        }}
-        depth={-1}
-        id={null}
-        shortid={null}
-      />
-    );
-  }
-}
-
-export default inject('signals', 'store')(observer(Files));
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/index.tsx
new file mode 100644
index 00000000000..448d1da891a
--- /dev/null
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/index.tsx
@@ -0,0 +1,65 @@
+import { getModulePath } from '@codesandbox/common/lib/sandbox/modules';
+import { useOvermind } from 'app/overmind';
+import React from 'react';
+
+import EditIcons from './DirectoryEntry/Entry/EditIcons';
+import DirectoryEntry from './DirectoryEntry/index';
+
+interface IFilesProps {
+  setEditActions: React.Dispatch<any>;
+}
+
+export const Files: React.FC<IFilesProps> = ({ setEditActions }) => {
+  const {
+    state: {
+      editor: { currentSandbox: sandbox },
+      isLoggedIn,
+    },
+    actions: {
+      editor: {
+        createZipClicked,
+      }
+    },
+  } = useOvermind();
+
+  const _getModulePath = moduleId => {
+    try {
+      return getModulePath(sandbox.modules, sandbox.directories, moduleId);
+    } catch (e) {
+      return '';
+    }
+  };
+
+  return (
+    <DirectoryEntry
+      root
+      getModulePath={_getModulePath}
+      title={sandbox.title || 'Project'}
+      initializeProperties={({
+        onCreateModuleClick,
+        onCreateDirectoryClick,
+        onUploadFileClick,
+      }) => {
+        if (setEditActions) {
+          setEditActions(
+            <EditIcons
+              hovering
+              forceShow={window.__isTouch}
+              onCreateFile={onCreateModuleClick}
+              onCreateDirectory={onCreateDirectoryClick}
+              onDownload={createZipClicked}
+              onUploadFile={
+                isLoggedIn && sandbox.privacy === 0
+                  ? onUploadFileClick
+                  : undefined
+              }
+            />
+          );
+        }
+      }}
+      depth={-1}
+      id={null}
+      shortid={null}
+    />
+  );
+};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Files/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Files/index.tsx
index b90b79aa728..a0f60b8b34d 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Files/index.tsx
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Files/index.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 
 import { useOvermind } from 'app/overmind';
-import Files from '../../Files';
+import { Files } from '../../Files';
 import { Dependencies } from '../../Dependencies';
 import { WorkspaceItem } from '../../WorkspaceItem';
 import { ItemTitle } from '../../elements';
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/NotOwnedSandboxInfo/NotOwnedSandboxInfo.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/NotOwnedSandboxInfo/NotOwnedSandboxInfo.tsx
index 90689bfded2..546a9d7e410 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/NotOwnedSandboxInfo/NotOwnedSandboxInfo.tsx
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/NotOwnedSandboxInfo/NotOwnedSandboxInfo.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { useOvermind } from 'app/overmind';
 import { Dependencies } from '../../Dependencies';
-import Files from '../../Files';
+import { Files } from '../../Files';
 import { Project } from '../../Project';
 import { WorkspaceItem } from '../../WorkspaceItem';