diff --git a/packages/app/src/app/overmind/namespaces/files/actions.ts b/packages/app/src/app/overmind/namespaces/files/actions.ts
index 5ce46105b96..e4f2d7316ce 100755
--- a/packages/app/src/app/overmind/namespaces/files/actions.ts
+++ b/packages/app/src/app/overmind/namespaces/files/actions.ts
@@ -4,13 +4,14 @@ import {
   getModulesAndDirectoriesInDirectory,
 } from '@codesandbox/common/lib/sandbox/modules';
 import getDefinition from '@codesandbox/common/lib/templates';
-import { Directory, Module } from '@codesandbox/common/lib/types';
+import { Directory, Module, UploadFile } from '@codesandbox/common/lib/types';
 import { getTextOperation } from '@codesandbox/common/lib/utils/diff';
+import denormalize from 'codesandbox-import-utils/lib/utils/files/denormalize';
+import { INormalizedModules } from 'codesandbox-import-util-types';
+
 import { AsyncAction } from 'app/overmind';
 import { withOwnedSandbox } from 'app/overmind/factories';
 import { createOptimisticModule } from 'app/overmind/utils/common';
-import { INormalizedModules } from 'codesandbox-import-util-types';
-import denormalize from 'codesandbox-import-utils/lib/utils/files/denormalize';
 
 import {
   resolveDirectoryWrapped,
@@ -417,10 +418,10 @@ export const gotUploadedFiles: AsyncAction<string> = async (
   }
 };
 
-export const addedFileToSandbox: AsyncAction<{
-  url: string;
-  name: string;
-}> = withOwnedSandbox(
+export const addedFileToSandbox: AsyncAction<Pick<
+  UploadFile,
+  'name' | 'url'
+>> = withOwnedSandbox(
   async ({ actions, effects, state }, { name, url }) => {
     if (!state.editor.currentSandbox) {
       return;
@@ -439,9 +440,10 @@ export const addedFileToSandbox: AsyncAction<{
   'write_code'
 );
 
-export const deletedUploadedFile: AsyncAction<{
-  id: string;
-}> = async ({ state, actions, effects }, { id }) => {
+export const deletedUploadedFile: AsyncAction<string> = async (
+  { actions, effects, state },
+  id
+) => {
   if (!state.uploadedFiles) {
     return;
   }
diff --git a/packages/app/src/app/pages/common/Modals/StorageManagementModal/AddFileToSandboxButton/elements.js b/packages/app/src/app/pages/common/Modals/StorageManagementModal/AddFileToSandboxButton/elements.js
deleted file mode 100644
index 6d1600bb57c..00000000000
--- a/packages/app/src/app/pages/common/Modals/StorageManagementModal/AddFileToSandboxButton/elements.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import AddIcon from 'react-icons/lib/md/add';
-import Tooltip from '@codesandbox/common/lib/components/Tooltip';
-
-export const AddFileToSandboxButton = styled(props => (
-  <Tooltip content="Add file to sandbox" isEnabled={!props.disabled}>
-    <button type="button" {...props}>
-      <AddIcon />
-    </button>
-  </Tooltip>
-))`
-  font-size: 1.2em;
-  background-color: inherit;
-  border: none;
-  padding: 5px 6px 9px 6px;
-  color: rgba(255, 255, 255, 0.5);
-  cursor: pointer;
-  &:hover {
-    color: rgba(255, 255, 255, 1);
-  }
-  &[disabled] {
-    opacity: 0.5;
-    cursor: default;
-  }
-`;
diff --git a/packages/app/src/app/pages/common/Modals/StorageManagementModal/AddFileToSandboxButton/index.js b/packages/app/src/app/pages/common/Modals/StorageManagementModal/AddFileToSandboxButton/index.js
deleted file mode 100644
index 05035497dcd..00000000000
--- a/packages/app/src/app/pages/common/Modals/StorageManagementModal/AddFileToSandboxButton/index.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-import { AddFileToSandboxButton } from './elements';
-
-export default class AddFileToSandboxButtonContainer extends React.PureComponent {
-  addFileToSandbox = () => {
-    const { onAddFileToSandbox, url, name } = this.props;
-    onAddFileToSandbox({ url, name });
-  };
-
-  render() {
-    return (
-      <AddFileToSandboxButton
-        disabled={this.props.disabled}
-        onClick={this.addFileToSandbox}
-      />
-    );
-  }
-}
diff --git a/packages/app/src/app/pages/common/Modals/StorageManagementModal/DeleteFileButton/elements.js b/packages/app/src/app/pages/common/Modals/StorageManagementModal/DeleteFileButton/elements.js
deleted file mode 100644
index bb59cf2a036..00000000000
--- a/packages/app/src/app/pages/common/Modals/StorageManagementModal/DeleteFileButton/elements.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import DeleteIcon from 'react-icons/lib/md/delete';
-import Tooltip from '@codesandbox/common/lib/components/Tooltip';
-
-export const DeleteFileButton = styled(props => (
-  <Tooltip content="Delete File">
-    <button type="button" {...props}>
-      <DeleteIcon />
-    </button>
-  </Tooltip>
-))`
-  font-size: 1.2em;
-  background-color: inherit;
-  border: none;
-  padding: 5px 6px 9px 6px;
-  color: rgba(255, 255, 255, 0.5);
-  cursor: pointer;
-  &:hover {
-    color: rgba(255, 255, 255, 1);
-  }
-  &[disabled] {
-    opacity: 0.5;
-    cursor: default;
-  }
-`;
diff --git a/packages/app/src/app/pages/common/Modals/StorageManagementModal/DeleteFileButton/index.js b/packages/app/src/app/pages/common/Modals/StorageManagementModal/DeleteFileButton/index.js
deleted file mode 100644
index 93a76398f22..00000000000
--- a/packages/app/src/app/pages/common/Modals/StorageManagementModal/DeleteFileButton/index.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import * as React from 'react';
-import { DeleteFileButton } from './elements';
-
-export default class DeleteFileButtonContainer extends React.PureComponent {
-  deleteFile = () => {
-    this.props.onDelete({ id: this.props.id });
-  };
-
-  render() {
-    return <DeleteFileButton onClick={this.deleteFile} />;
-  }
-}
diff --git a/packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/AddFileToSandboxButton.tsx b/packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/AddFileToSandboxButton.tsx
new file mode 100644
index 00000000000..38737dfbd19
--- /dev/null
+++ b/packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/AddFileToSandboxButton.tsx
@@ -0,0 +1,35 @@
+import { UploadFile } from '@codesandbox/common/lib/types';
+import React, { FunctionComponent } from 'react';
+import AddIcon from 'react-icons/lib/md/add';
+
+import { useOvermind } from 'app/overmind';
+
+import { Button } from './Button';
+
+type Props = Pick<UploadFile, 'name' | 'url'>;
+export const AddFileToSandboxButton: FunctionComponent<Props> = ({
+  name,
+  url,
+}) => {
+  const {
+    actions: {
+      files: { addedFileToSandbox },
+    },
+    state: {
+      editor: { currentSandbox },
+    },
+  } = useOvermind();
+
+  if (!currentSandbox) {
+    return null;
+  }
+
+  return (
+    <Button
+      disabled={!currentSandbox}
+      Icon={AddIcon}
+      onClick={() => addedFileToSandbox({ name, url })}
+      tooltip="Add file to sandbox"
+    />
+  );
+};
diff --git a/packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/Button/elements.ts b/packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/Button/elements.ts
new file mode 100644
index 00000000000..3fe51f9338e
--- /dev/null
+++ b/packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/Button/elements.ts
@@ -0,0 +1,38 @@
+import TooltipBase from '@codesandbox/common/lib/components/Tooltip';
+import styled from 'styled-components';
+
+export const ButtonComponent = styled.button`
+  font-size: 1.2em;
+  background-color: inherit;
+  border: none;
+  padding: 5px 6px 9px 6px;
+  color: rgba(255, 255, 255, 0.5);
+  cursor: pointer;
+
+  &:hover {
+    color: rgba(255, 255, 255, 1);
+  }
+
+  &[disabled] {
+    opacity: 0.5;
+    cursor: default;
+  }
+`;
+
+export const Tooltip = styled(TooltipBase)`
+  font-size: 1.2em;
+  background-color: inherit;
+  border: none;
+  padding: 5px 6px 9px 6px;
+  color: rgba(255, 255, 255, 0.5);
+  cursor: pointer;
+
+  &:hover {
+    color: rgba(255, 255, 255, 1);
+  }
+
+  &[disabled] {
+    opacity: 0.5;
+    cursor: default;
+  }
+`;
diff --git a/packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/Button/index.tsx b/packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/Button/index.tsx
new file mode 100644
index 00000000000..66f663eff94
--- /dev/null
+++ b/packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/Button/index.tsx
@@ -0,0 +1,20 @@
+import React, { ComponentType, FunctionComponent, HTMLAttributes } from 'react';
+import { ButtonComponent, Tooltip } from './elements';
+
+type Props = {
+  disabled?: boolean;
+  Icon: ComponentType;
+  tooltip: string;
+} & Pick<HTMLAttributes<HTMLButtonElement>, 'onClick'>;
+export const Button: FunctionComponent<Props> = ({
+  disabled = false,
+  Icon,
+  onClick,
+  tooltip,
+}) => (
+  <Tooltip content={tooltip} isEnabled={!disabled}>
+    <ButtonComponent onClick={onClick} type="button">
+      <Icon />
+    </ButtonComponent>
+  </Tooltip>
+);
diff --git a/packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/DeleteFileButton.tsx b/packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/DeleteFileButton.tsx
new file mode 100644
index 00000000000..cfc0d2da378
--- /dev/null
+++ b/packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/DeleteFileButton.tsx
@@ -0,0 +1,24 @@
+import { UploadFile } from '@codesandbox/common/lib/types';
+import React, { FunctionComponent } from 'react';
+import DeleteIcon from 'react-icons/lib/md/delete';
+
+import { useOvermind } from 'app/overmind';
+
+import { Button } from './Button';
+
+type Props = Pick<UploadFile, 'id'>;
+export const DeleteFileButton: FunctionComponent<Props> = ({ id }) => {
+  const {
+    actions: {
+      files: { deletedUploadedFile },
+    },
+  } = useOvermind();
+
+  return (
+    <Button
+      Icon={DeleteIcon}
+      onClick={() => deletedUploadedFile(id)}
+      tooltip="Delete File"
+    />
+  );
+};
diff --git a/packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/elements.js b/packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/elements.js
deleted file mode 100644
index ad2a98f05a8..00000000000
--- a/packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/elements.js
+++ /dev/null
@@ -1,78 +0,0 @@
-import delayEffect from '@codesandbox/common/lib/utils/animation/delay-effect';
-import styled, { css } from 'styled-components';
-
-export const HeaderTitle = styled.th`
-  font-weight: 400;
-  text-align: left;
-  padding: 0.5rem;
-  color: rgba(255, 255, 255, 0.9);
-`;
-
-export const Buttons = styled.div`
-  margin: 0.5rem 0;
-  display: flex;
-  justify-content: space-between;
-`;
-
-export const Table = styled.table`
-  ${delayEffect(0.2)};
-  width: 100%;
-  border-spacing: 0;
-  background-color: ${props => props.theme.background2};
-`;
-
-export const StatBody = styled.td`
-  width: 2rem;
-  text-align: center;
-`;
-
-export const Body = styled.tbody`
-  margin-top: 3rem;
-  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.5);
-  color: ${props =>
-    props.theme.light ? 'rgba(0, 0, 0, 0.7)' : 'rgba(255, 255, 255, 0.7)'};
-  background-color: ${props => props.theme.background2};
-
-  td {
-    border: none;
-    padding: 1rem 0.5rem;
-    margin: 0;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
-  }
-`;
-
-export const FileRow = styled.tr`
-  transition: 0.3s ease all;
-  ${props => delayEffect(0.25 + props.index * 0.05, false)};
-  border: none;
-  margin: 0;
-
-  &:hover {
-    background-color: ${props => props.theme.primary.clearer(0.9)};
-    color: rgba(255, 255, 255, 0.9);
-  }
-`;
-
-export const CheckBox = styled.span`
-  ${props =>
-    props.selected
-      ? css`
-          background: ${props.color} url('') no-repeat 50%/10px;
-          background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 10 9' xmlns='http://www.w3.org/2000/svg'><path d='M1 4.88l2.378 2.435L9.046 1.6' stroke-width='1.6' stroke='%23FFF' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'/></svg>");
-        `
-      : css`
-          background: rgba(0, 0, 0, 0.3) url('') no-repeat 50%/10px;
-          background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 10 9' xmlns='http://www.w3.org/2000/svg'><path fill='rgba(255, 255, 255, 0.2)/></svg>");
-        `};
-  border: 2px solid rgba(255, 255, 255, 0.5);
-  margin-left: 1rem;
-  box-shadow: none;
-  display: inline-block;
-  border-radius: 3.5px;
-  width: 16px;
-  height: 16px;
-  outline: none;
-  vertical-align: middle;
-  transition: 0.15s ease all;
-  cursor: pointer;
-`;
diff --git a/packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/elements.ts b/packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/elements.ts
new file mode 100644
index 00000000000..7ae899896a6
--- /dev/null
+++ b/packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/elements.ts
@@ -0,0 +1,90 @@
+import delayEffect from '@codesandbox/common/lib/utils/animation/delay-effect';
+import styled, { css } from 'styled-components';
+
+export const HeaderTitle = styled.th`
+  font-weight: 400;
+  text-align: left;
+  padding: 0.5rem;
+  color: rgba(255, 255, 255, 0.9);
+`;
+
+export const Buttons = styled.div`
+  margin: 0.5rem 0;
+  display: flex;
+  justify-content: space-between;
+`;
+
+export const Table = styled.table`
+  ${({ theme }) => css`
+    ${delayEffect(0.2)};
+    width: 100%;
+    border-spacing: 0;
+    background-color: ${theme.background2};
+  `};
+`;
+
+export const StatBody = styled.td`
+  width: 2rem;
+  text-align: center;
+  padding: 0.55rem 0.5rem;
+  cursor: pointer;
+`;
+
+export const Body = styled.tbody`
+  ${({ theme }) => css`
+    margin-top: 3rem;
+    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.5);
+    color: ${theme.light ? 'rgba(0, 0, 0, 0.7)' : 'rgba(255, 255, 255, 0.7)'};
+    background-color: ${theme.background2};
+
+    td {
+      border: none;
+      padding: 1rem 0.5rem;
+      margin: 0;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+    }
+  `};
+`;
+
+export const FileRow = styled.tr<{ index: number }>`
+  ${({ index, theme }) => css`
+    transition: 0.3s ease all;
+    ${delayEffect(0.25 + index * 0.05, false)};
+    border: none;
+    margin: 0;
+
+    &:hover {
+      background-color: ${theme.primary.clearer(0.9)};
+      color: rgba(255, 255, 255, 0.9);
+    }
+  `};
+`;
+
+export const CheckBox = styled.span<{ selected: boolean }>`
+  ${({ selected }) => css`
+    ${selected
+      ? css`
+          background: url('') no-repeat 50%/10px;
+          background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 10 9' xmlns='http://www.w3.org/2000/svg'><path d='M1 4.88l2.378 2.435L9.046 1.6' stroke-width='1.6' stroke='%23FFF' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'/></svg>");
+        `
+      : css`
+          background: rgba(0, 0, 0, 0.3) url('') no-repeat 50%/10px;
+          background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 10 9' xmlns='http://www.w3.org/2000/svg'><path fill='rgba(255, 255, 255, 0.2)/></svg>");
+        `};
+    border: 2px solid rgba(255, 255, 255, 0.5);
+    margin-left: 1rem;
+    box-shadow: none;
+    display: inline-block;
+    border-radius: 3.5px;
+    width: 16px;
+    height: 16px;
+    outline: none;
+    vertical-align: middle;
+    transition: 0.15s ease all;
+    cursor: pointer;
+  `};
+`;
+
+export const Container = styled.div`
+  margin: 0 2rem;
+`;
diff --git a/packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/index.js b/packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/index.js
deleted file mode 100644
index 5e99ef2b5dd..00000000000
--- a/packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/index.js
+++ /dev/null
@@ -1,142 +0,0 @@
-import { Button } from '@codesandbox/common/lib/components/Button';
-import filesize from 'filesize';
-import { sortBy } from 'lodash-es';
-import React, { Component } from 'react';
-
-import AddFileToSandboxButton from '../AddFileToSandboxButton';
-import DeleteFileButton from '../DeleteFileButton';
-import {
-  Body,
-  Buttons,
-  CheckBox,
-  FileRow,
-  HeaderTitle,
-  StatBody,
-  Table,
-} from './elements';
-
-const getSelectedFiles = obj =>
-  Object.keys(obj).filter(key => obj[key] === true);
-
-class FilesList extends Component {
-  state = {};
-
-  toggleCheckbox = (e, id) => {
-    this.setState(state => ({
-      ...state,
-      [id]: !state[id],
-    }));
-  };
-
-  getSelection = () => {
-    const selectedIds = Object.keys(this.state);
-    const selected = this.props.files.filter(file =>
-      selectedIds.includes(file.id)
-    );
-    return selected;
-  };
-
-  render() {
-    const {
-      files,
-      deleteFile,
-      addFileToSandbox,
-      deleteFiles,
-      addFilesToSandbox,
-    } = this.props;
-    const canAddFile = Boolean(addFileToSandbox);
-    const filesToRemove = getSelectedFiles(this.state);
-
-    return (
-      <div css={{ margin: '0 2rem' }}>
-        <Buttons>
-          <Button
-            disabled={!filesToRemove.length || !canAddFile}
-            small
-            onClick={() => addFilesToSandbox(this.getSelection())}
-          >
-            Add all selected to project
-          </Button>
-          <Button
-            disabled={!filesToRemove.length}
-            small
-            onClick={() => deleteFiles(filesToRemove)}
-          >
-            Delete all selected
-          </Button>
-        </Buttons>
-        <Table>
-          <thead>
-            <tr
-              css={`
-                height: 3rem;
-              `}
-            >
-              <HeaderTitle
-                css={`
-                  padding-left: 1rem;
-                  max-width: 20px;
-                `}
-              />
-              <HeaderTitle>File</HeaderTitle>
-              <HeaderTitle>Size</HeaderTitle>
-              <HeaderTitle />
-              <HeaderTitle />
-              <HeaderTitle />
-            </tr>
-          </thead>
-          <Body>
-            {sortBy(files, 'name').map((f, i) => (
-              <FileRow index={i} key={f.id}>
-                <td>
-                  <CheckBox
-                    name={f.id}
-                    onClick={e => this.toggleCheckbox(e, f.id)}
-                    selected={this.state[f.id]}
-                  />
-                </td>
-                <td
-                  css={`
-                    max-width: 100;
-                    white-space: nowrap;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                  `}
-                  title={f.name}
-                >
-                  <a target="_blank" rel="noreferrer noopener" href={f.url}>
-                    {f.name}
-                  </a>
-                </td>
-                <td>{filesize(f.objectSize)}</td>
-                <StatBody
-                  css={`
-                    padding: 0.55rem 0.5rem;
-                    cursor: pointer;
-                  `}
-                >
-                  <AddFileToSandboxButton
-                    disabled={!canAddFile}
-                    url={f.url}
-                    name={f.name}
-                    onAddFileToSandbox={addFileToSandbox}
-                  />
-                </StatBody>
-                <StatBody
-                  css={`
-                    padding: 0.55rem 0.5rem;
-                    cursor: pointer;
-                  `}
-                >
-                  <DeleteFileButton id={f.id} onDelete={deleteFile} />
-                </StatBody>
-              </FileRow>
-            ))}
-          </Body>
-        </Table>
-      </div>
-    );
-  }
-}
-
-export default FilesList;
diff --git a/packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/index.tsx b/packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/index.tsx
new file mode 100644
index 00000000000..a0107da9057
--- /dev/null
+++ b/packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/index.tsx
@@ -0,0 +1,137 @@
+import { Button } from '@codesandbox/common/lib/components/Button';
+import filesize from 'filesize';
+import { sortBy } from 'lodash-es';
+import React, { FunctionComponent, useState } from 'react';
+
+import { useOvermind } from 'app/overmind';
+
+import { AddFileToSandboxButton } from './AddFileToSandboxButton';
+import { DeleteFileButton } from './DeleteFileButton';
+import {
+  Body,
+  Buttons,
+  CheckBox,
+  Container,
+  FileRow,
+  HeaderTitle,
+  StatBody,
+  Table,
+} from './elements';
+
+export const FilesList: FunctionComponent = () => {
+  const {
+    actions: {
+      files: { deletedUploadedFile, addedFileToSandbox },
+    },
+    state: {
+      editor: { currentSandbox },
+      uploadedFiles,
+    },
+  } = useOvermind();
+  const [selectedItems, setSelectedItems] = useState<string[]>([]);
+
+  const getSelection = () =>
+    uploadedFiles.filter(({ id }) => selectedItems.includes(id));
+  const toggleCheckbox = (id: string) =>
+    setSelectedItems(items =>
+      items.includes(id) ? items.filter(item => item !== id) : items.concat(id)
+    );
+
+  return (
+    <Container>
+      <Buttons>
+        <Button
+          disabled={selectedItems.length === 0 || !currentSandbox}
+          onClick={() => getSelection().map(addedFileToSandbox)}
+          small
+        >
+          Add all selected to project
+        </Button>
+
+        <Button
+          disabled={selectedItems.length === 0}
+          onClick={() => selectedItems.map(deletedUploadedFile)}
+          small
+        >
+          Delete all selected
+        </Button>
+      </Buttons>
+
+      <Table>
+        <thead>
+          <tr
+            css={`
+              height: 3rem;
+            `}
+          >
+            <HeaderTitle
+              css={`
+                padding-left: 1rem;
+                max-width: 20px;
+              `}
+            />
+
+            <HeaderTitle>File</HeaderTitle>
+
+            <HeaderTitle>Size</HeaderTitle>
+
+            <HeaderTitle />
+
+            <HeaderTitle />
+
+            <HeaderTitle />
+          </tr>
+        </thead>
+
+        <Body>
+          {sortBy(uploadedFiles, 'name').map(
+            ({ id, name, objectSize, url }, index) => (
+              <FileRow index={index} key={id}>
+                <td>
+                  <CheckBox
+                    onClick={() => toggleCheckbox(id)}
+                    selected={selectedItems.includes(id)}
+                  />
+                </td>
+
+                <td
+                  css={`
+                    max-width: 100px;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                  `}
+                  title={name}
+                >
+                  <a href={url} rel="noreferrer noopener" target="_blank">
+                    {name}
+                  </a>
+                </td>
+
+                <td>{filesize(objectSize)}</td>
+
+                <StatBody
+                  css={`
+                    padding: 0.55rem 0.5rem;
+                    cursor: pointer;
+                  `}
+                >
+                  <AddFileToSandboxButton name={name} url={url} />
+                </StatBody>
+
+                <StatBody
+                  css={`
+                    padding: 0.55rem 0.5rem;
+                    cursor: pointer;
+                  `}
+                >
+                  <DeleteFileButton id={id} />
+                </StatBody>
+              </FileRow>
+            )
+          )}
+        </Body>
+      </Table>
+    </Container>
+  );
+};
diff --git a/packages/app/src/app/pages/common/Modals/StorageManagementModal/elements.ts b/packages/app/src/app/pages/common/Modals/StorageManagementModal/elements.ts
index a7b4a6faf25..827a41b714d 100644
--- a/packages/app/src/app/pages/common/Modals/StorageManagementModal/elements.ts
+++ b/packages/app/src/app/pages/common/Modals/StorageManagementModal/elements.ts
@@ -1,9 +1,11 @@
-import styled, { keyframes } from 'styled-components';
+import styled, { css, keyframes } from 'styled-components';
 
 export const Container = styled.div`
-  background-color: ${props => props.theme.background};
-  width: 100%;
-  padding-bottom: 2rem;
+  ${({ theme }) => css`
+    background-color: ${theme.background};
+    width: 100%;
+    padding-bottom: 2rem;
+  `};
 `;
 
 export const JustifiedArea = styled.div`
@@ -16,7 +18,6 @@ export const Title = styled.h2`
   font-weight: 500;
   padding: 2rem;
   color: rgba(255, 255, 255, 0.9);
-  margin-top: 0 !important;
   font-size: 1.125rem;
   margin: 0;
   text-transform: uppercase;
@@ -27,7 +28,6 @@ export const SubTitle = styled.p`
   font-weight: 700;
   font-size: 0.875rem;
   padding: 2rem;
-  margin-top: 0 !important;
   margin: 0;
   line-height: 1.4;
 `;
@@ -41,12 +41,13 @@ export const Description = styled.div`
 `;
 
 export const SubDescription = styled.div`
-  margin: 0;
-  padding-left: 2rem;
-  font-weight: 500;
-  color: ${props =>
-    props.theme.light ? 'rgba(0, 0, 0, 0.7)' : 'rgba(255, 255, 255, 0.7)'};
-  font-size: 1rem;
+  ${({ theme }) => css`
+    margin: 0;
+    padding-left: 2rem;
+    font-weight: 500;
+    color: ${theme.light ? 'rgba(0, 0, 0, 0.7)' : 'rgba(255, 255, 255, 0.7)'};
+    font-size: 1rem;
+  `};
 `;
 
 export const Rule = styled.hr`
@@ -62,6 +63,7 @@ const loadingAnimation = keyframes`
   0% {
     transform: rotate(0deg);
   }
+
   100% {
     transform: rotate(360deg);
   }
diff --git a/packages/app/src/app/pages/common/Modals/StorageManagementModal/index.tsx b/packages/app/src/app/pages/common/Modals/StorageManagementModal/index.tsx
index baaad54a51d..b7750230c03 100644
--- a/packages/app/src/app/pages/common/Modals/StorageManagementModal/index.tsx
+++ b/packages/app/src/app/pages/common/Modals/StorageManagementModal/index.tsx
@@ -5,29 +5,20 @@ import { useOvermind } from 'app/overmind';
 
 import {
   Container,
-  Title,
-  JustifiedArea,
-  SubTitle,
   Description,
-  SubDescription,
-  Rule,
+  JustifiedArea,
   LoadingAnimationContainer,
+  Rule,
+  SubDescription,
+  SubTitle,
+  Title,
 } from './elements';
-import FilesList from './FilesList';
+import { FilesList } from './FilesList';
 
 export const StorageManagementModal: FunctionComponent = () => {
   const {
-    state: {
-      editor: { currentSandbox },
-      usedStorage,
-      maxStorage,
-      uploadedFiles,
-    },
-    actions: {
-      files: { deletedUploadedFile, addedFileToSandbox },
-    },
+    state: { maxStorage, uploadedFiles, usedStorage },
   } = useOvermind();
-
   const isLoading = uploadedFiles === null;
   const isEmpty = !isLoading && uploadedFiles.length === 0;
 
@@ -37,9 +28,7 @@ export const StorageManagementModal: FunctionComponent = () => {
         <Title>Storage Management</Title>
 
         <SubTitle>
-          Used {filesize(usedStorage)}
-          {' / '}
-          Total {filesize(maxStorage)}
+          {`Used ${filesize(usedStorage)} / Total ${filesize(maxStorage)}`}
         </SubTitle>
       </JustifiedArea>
 
@@ -49,15 +38,7 @@ export const StorageManagementModal: FunctionComponent = () => {
 
       <Rule />
 
-      {!isEmpty && !isLoading && (
-        <FilesList
-          files={uploadedFiles}
-          deleteFile={deletedUploadedFile}
-          deleteFiles={files => files.map(id => deletedUploadedFile({ id }))}
-          addFilesToSandbox={files => files.map(addedFileToSandbox)}
-          addFileToSandbox={currentSandbox ? addedFileToSandbox : undefined}
-        />
-      )}
+      {!isEmpty && !isLoading && <FilesList />}
 
       {isEmpty && <SubDescription>You have no uploaded files.</SubDescription>}