diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/elements.js b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/elements.ts
similarity index 100%
rename from packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/elements.js
rename to packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/elements.ts
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/index.js b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/index.js
deleted file mode 100644
index 7bfeaffaf1d..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/index.js
+++ /dev/null
@@ -1,112 +0,0 @@
-// @flow
-import * as React from 'react';
-import { inject, hooksObserver } from 'app/componentConnectors';
-
-import Margin from '@codesandbox/common/lib/components/spacing/Margin';
-import getDefinition from '@codesandbox/common/lib/templates';
-import { WorkspaceSubtitle } from '../elements';
-
-import AddVersion from './AddVersion';
-import { VersionEntry } from './VersionEntry';
-import AddResource from './AddResource';
-import ExternalResource from './ExternalResource';
-
-import { ErrorMessage } from './elements';
-
-const Dependencies = inject('store', 'signals')(
-  hooksObserver(
-    ({ store: { editor }, signals: { workspace, editor: editorSignals } }) => {
-      const sandbox = editor.currentSandbox;
-
-      if (!editor.parsedConfigurations.package) {
-        return <ErrorMessage>Unable to find package.json</ErrorMessage>;
-      }
-
-      const { parsed, error } = editor.parsedConfigurations.package;
-
-      if (error) {
-        return (
-          <ErrorMessage>
-            We weren
-            {"'"}t able to parse the package.json
-          </ErrorMessage>
-        );
-      }
-
-      const dependencies = parsed.dependencies || {};
-      // const devDependencies = parsed.devDependencies || {};
-
-      const templateDefinition = getDefinition(sandbox.template);
-
-      return (
-        <div>
-          <Margin bottom={0}>
-            {Object.keys(dependencies)
-              .sort()
-              .map(dep => (
-                <VersionEntry
-                  key={dep}
-                  dependencies={dependencies}
-                  dependency={dep}
-                  onRemove={name =>
-                    editorSignals.npmDependencyRemoved({ name })
-                  }
-                  onRefresh={(name, version) =>
-                    editorSignals.addNpmDependency({
-                      name,
-                      version,
-                    })
-                  }
-                />
-              ))}
-            {/* {Object.keys(devDependencies).length > 0 && (
-          <WorkspaceSubtitle>Development Dependencies</WorkspaceSubtitle>
-        )}
-        {Object.keys(devDependencies)
-          .sort()
-          .map(dep => (
-            <VersionEntry
-              key={dep}
-              dependencies={devDependencies}
-              dependency={dep}
-              onRemove={name => signals.editor.npmDependencyRemoved({ name })}
-              onRefresh={(name, version) =>
-                signals.editor.addNpmDependency({
-                  name,
-                  version,
-                })
-              }
-            />
-          ))} */}
-            <AddVersion>Add Dependency</AddVersion>
-          </Margin>
-          {templateDefinition.externalResourcesEnabled && (
-            <div>
-              <WorkspaceSubtitle>External Resources</WorkspaceSubtitle>
-              {(sandbox.externalResources || []).map(resource => (
-                <ExternalResource
-                  key={resource}
-                  resource={resource}
-                  removeResource={() =>
-                    workspace.externalResourceRemoved({
-                      resource,
-                    })
-                  }
-                />
-              ))}
-              <AddResource
-                addResource={resource =>
-                  workspace.externalResourceAdded({
-                    resource,
-                  })
-                }
-              />
-            </div>
-          )}
-        </div>
-      );
-    }
-  )
-);
-
-export default Dependencies;
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/index.tsx
new file mode 100644
index 00000000000..64ea6d20bea
--- /dev/null
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/index.tsx
@@ -0,0 +1,109 @@
+// @flow
+
+import Margin from '@codesandbox/common/lib/components/spacing/Margin';
+import getDefinition from '@codesandbox/common/lib/templates';
+import React, { FunctionComponent } from 'react';
+import { useOvermind } from 'app/overmind';
+import { WorkspaceSubtitle } from '../elements';
+
+import AddVersion from './AddVersion';
+import { VersionEntry } from './VersionEntry';
+import AddResource from './AddResource';
+import ExternalResource from './ExternalResource';
+
+import { ErrorMessage } from './elements';
+
+export const Dependencies: FunctionComponent = () => {
+  const {
+    state: { editor },
+    actions: { workspace, editor: editorSignals },
+  } = useOvermind();
+
+  const sandbox = editor.currentSandbox;
+
+  if (!editor.parsedConfigurations.package) {
+    return <ErrorMessage>Unable to find package.json</ErrorMessage>;
+  }
+
+  const { parsed, error } = editor.parsedConfigurations.package;
+
+  if (error) {
+    return (
+      <ErrorMessage>
+        We weren
+        {"'"}t able to parse the package.json
+      </ErrorMessage>
+    );
+  }
+
+  const dependencies = parsed.dependencies || {};
+  // const devDependencies = parsed.devDependencies || {};
+
+  const templateDefinition = getDefinition(sandbox.template);
+
+  return (
+    <div>
+      <Margin bottom={0}>
+        {Object.keys(dependencies)
+          .sort()
+          .map(dep => (
+            <VersionEntry
+              key={dep}
+              dependencies={dependencies}
+              dependency={dep}
+              onRemove={name => editorSignals.npmDependencyRemoved({ name })}
+              onRefresh={(name, version) =>
+                editorSignals.addNpmDependency({
+                  name,
+                  version,
+                })
+              }
+            />
+          ))}
+        {/* {Object.keys(devDependencies).length > 0 && (
+      <WorkspaceSubtitle>Development Dependencies</WorkspaceSubtitle>
+    )}
+    {Object.keys(devDependencies)
+      .sort()
+      .map(dep => (
+        <VersionEntry
+          key={dep}
+          dependencies={devDependencies}
+          dependency={dep}
+          onRemove={name => signals.editor.npmDependencyRemoved({ name })}
+          onRefresh={(name, version) =>
+            signals.editor.addNpmDependency({
+              name,
+              version,
+            })
+          }
+        />
+      ))} */}
+        <AddVersion>Add Dependency</AddVersion>
+      </Margin>
+      {templateDefinition.externalResourcesEnabled && (
+        <div>
+          <WorkspaceSubtitle>External Resources</WorkspaceSubtitle>
+          {(sandbox.externalResources || []).map(resource => (
+            <ExternalResource
+              key={resource}
+              resource={resource}
+              removeResource={() =>
+                workspace.externalResourceRemoved({
+                  resource,
+                })
+              }
+            />
+          ))}
+          <AddResource
+            addResource={resource =>
+              workspace.externalResourceAdded({
+                resource,
+              })
+            }
+          />
+        </div>
+      )}
+    </div>
+  );
+};
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 3bd6e3ed68f..90689bfded2 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,6 +1,6 @@
 import React, { useState } from 'react';
 import { useOvermind } from 'app/overmind';
-import Dependencies from '../../Dependencies';
+import { Dependencies } from '../../Dependencies';
 import Files from '../../Files';
 import { Project } from '../../Project';
 import { WorkspaceItem } from '../../WorkspaceItem';