diff --git a/packages/app/src/app/components/CodeEditor/Configuration/index.tsx b/packages/app/src/app/components/CodeEditor/Configuration/index.tsx
index d3a4e9a846d..372445bb4b6 100644
--- a/packages/app/src/app/components/CodeEditor/Configuration/index.tsx
+++ b/packages/app/src/app/components/CodeEditor/Configuration/index.tsx
@@ -3,7 +3,7 @@ import { TextOperation } from 'ot';
 import { Module } from '@codesandbox/common/lib/types';
 import getUI from '@codesandbox/common/lib/templates/configuration/ui';
 import { getType } from 'app/utils/get-type';
-import { EntryIcons } from 'app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons';
+import { EntryIcons } from 'app/components/EntryIcons';
 import Tooltip from '@codesandbox/common/lib/components/Tooltip';
 import { ConfigurationFile } from '@codesandbox/common/lib/templates/configuration/types';
 
diff --git a/packages/app/src/app/components/CodeEditor/FilePath/index.js b/packages/app/src/app/components/CodeEditor/FilePath/index.js
index 854adbf922e..9992296f2ad 100644
--- a/packages/app/src/app/components/CodeEditor/FilePath/index.js
+++ b/packages/app/src/app/components/CodeEditor/FilePath/index.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { getModulePath } from '@codesandbox/common/lib/sandbox/modules';
 import Tooltip from '@codesandbox/common/lib/components/Tooltip';
-import EntryIcons from 'app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons';
+import EntryIcons from 'app/components/EntryIcons';
 import { getType } from 'app/utils/get-type';
 
 import { Container, Chevron, FileName, StyledExitZen } from './elements';
diff --git a/packages/app/src/app/components/CodeEditor/FuzzySearch/index.js b/packages/app/src/app/components/CodeEditor/FuzzySearch/index.js
index 2a7890c74ba..36a6de82cdb 100644
--- a/packages/app/src/app/components/CodeEditor/FuzzySearch/index.js
+++ b/packages/app/src/app/components/CodeEditor/FuzzySearch/index.js
@@ -4,7 +4,7 @@ import Downshift from 'downshift';
 import matchSorter from 'match-sorter';
 import { getModulePath } from '@codesandbox/common/lib/sandbox/modules';
 import Input from '@codesandbox/common/lib/components/Input';
-import { EntryIcons } from 'app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons';
+import { EntryIcons } from 'app/components/EntryIcons';
 // eslint-disable-next-line import/extensions
 import { getType } from 'app/utils/get-type.ts';
 import { ESC } from '@codesandbox/common/lib/utils/keycodes';
diff --git a/packages/app/src/app/components/CodeEditor/VSCode/Configuration/elements.ts b/packages/app/src/app/components/CodeEditor/VSCode/Configuration/elements.ts
deleted file mode 100644
index 45dbff9e00e..00000000000
--- a/packages/app/src/app/components/CodeEditor/VSCode/Configuration/elements.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import styled from 'styled-components';
-
-export const Container = styled.div`
-  padding: 1rem;
-  color: ${props => props.theme['sideBar.foreground'] || 'inherit'};
-  box-sizing: border-box;
-  max-height: 100%;
-  overflow: auto;
-`;
-
-export const Title = styled.h1`
-  display: inline-block;
-  font-weight: 600;
-  font-size: 1.25rem;
-  color: ${props => props.theme['sideBar.foreground'] || 'inherit'};
-  text-transform: uppercase;
-  margin-top: 0;
-  margin-bottom: 0;
-  margin-left: 1rem;
-  flex: 1;
-`;
-
-export const Description = styled.p`
-  font-size: 1;
-  line-height: 1.4;
-  color: ${props => props.theme['sideBar.foreground'] || 'inherit'};
-`;
diff --git a/packages/app/src/app/components/CodeEditor/VSCode/Configuration/index.tsx b/packages/app/src/app/components/CodeEditor/VSCode/Configuration/index.tsx
deleted file mode 100644
index 3663a7a6bc5..00000000000
--- a/packages/app/src/app/components/CodeEditor/VSCode/Configuration/index.tsx
+++ /dev/null
@@ -1,164 +0,0 @@
-import { ConfigurationFile } from '@codesandbox/common/lib/templates/configuration/types';
-import { withTheme } from 'styled-components';
-import { ThemeProvider } from '@codesandbox/components';
-import getUI from '@codesandbox/common/lib/templates/configuration/ui';
-import theme from '@codesandbox/common/lib/theme';
-import { Module } from '@codesandbox/common/lib/types';
-import { EntryIcons } from 'app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons';
-import { getType } from 'app/utils/get-type';
-import { TextOperation } from 'ot';
-import React from 'react';
-
-import { Editor, Props as EditorProps } from '../../types'; // eslint-disable-line
-import { Container, Description, Title } from './elements';
-
-type Disposable = {
-  dispose: () => void;
-};
-
-type Props = EditorProps & {
-  config: ConfigurationFile;
-  onChange: (code: string, moduleShortid: string) => void;
-  toggleConfigUI: () => void;
-  onDidChangeDirty: (cb: () => void) => Disposable;
-  getCode: () => string;
-  onChangeVSCode: (val: string) => void;
-  onDispose: (cb: () => void) => void;
-  openText: () => void;
-  theme: any;
-};
-
-class ConfigurationComponent extends React.PureComponent<Props> {
-  disposeInitializer: Function;
-  currentModule: Module;
-  dirtyChangeListener: Disposable;
-  receivingCode: boolean = false;
-
-  constructor(props: Props) {
-    super(props);
-
-    this.registerListeners();
-  }
-
-  registerListeners() {
-    if (this.props.onDidChangeDirty) {
-      this.dirtyChangeListener = this.props.onDidChangeDirty(() => {
-        this.forceUpdate();
-        this.props.onChange(
-          this.props.getCode(),
-          this.props.currentModule.shortid
-        );
-      });
-    }
-
-    this.props.onDispose(() => {
-      this.dirtyChangeListener.dispose();
-    });
-  }
-
-  componentDidMount() {
-    if (this.props.onInitialized) {
-      this.disposeInitializer = this.props.onInitialized(this);
-    }
-  }
-
-  componentDidUpdate(prevProps) {
-    if (prevProps.currentModule.id !== this.props.currentModule.id) {
-      this.dirtyChangeListener.dispose();
-
-      this.registerListeners();
-    }
-  }
-
-  componentWillUnmount() {
-    if (this.disposeInitializer) {
-      this.disposeInitializer();
-    }
-  }
-
-  sendLiveChanges = (code: string) => {
-    const { sendTransforms, isLive, onCodeReceived } = this.props;
-    if (sendTransforms) {
-      const oldCode = this.currentModule.code || '';
-
-      // We don't know exactly what changed, just that the code changed. So
-      // we send the whole code.
-
-      const op = new TextOperation();
-
-      op.delete(oldCode.length);
-      op.insert(code);
-
-      sendTransforms(op);
-    } else if (!isLive && onCodeReceived) {
-      onCodeReceived();
-    }
-  };
-
-  updateFile = (code: string) => {
-    const { isLive, sendTransforms } = this.props;
-
-    if (isLive && sendTransforms && !this.receivingCode) {
-      this.sendLiveChanges(code);
-    }
-
-    this.props.onChangeVSCode(code);
-  };
-
-  render() {
-    const { config, width, height, sandbox } = this.props;
-    const { currentModule } = this.props;
-
-    const { ConfigWizard } = getUI(config.type);
-
-    return (
-      <Container style={{ width, height }}>
-        <div style={{ display: 'flex', alignItems: 'center' }}>
-          <EntryIcons
-            width={32}
-            height={32}
-            type={getType(currentModule.title)}
-          />
-          <Title>{config.title}</Title>
-        </div>
-        <button
-          type="button"
-          style={{
-            outline: 0,
-            border: 0,
-            backgroundColor: 'transparent',
-            color: theme.secondary(),
-            textDecoration: 'underline',
-            margin: 0,
-            padding: 0,
-            marginTop: '1rem',
-            cursor: 'pointer',
-          }}
-          tabIndex={-1}
-          onClick={() => this.props.openText()}
-        >
-          Open file in editor
-        </button>
-        <Description>
-          {config.description}{' '}
-          <a
-            href={config.moreInfoUrl}
-            target="_blank"
-            rel="noreferrer noopener"
-          >
-            More info...
-          </a>
-        </Description>
-        <ThemeProvider theme={this.props.theme.vscodeTheme}>
-          <ConfigWizard
-            sandbox={sandbox}
-            updateFile={this.updateFile}
-            file={this.props.getCode()}
-          />
-        </ThemeProvider>
-      </Container>
-    );
-  }
-}
-
-export const Configuration = withTheme(ConfigurationComponent);
diff --git a/packages/app/src/app/components/CodeEditor/VSCode/elements.ts b/packages/app/src/app/components/CodeEditor/VSCode/elements.ts
deleted file mode 100644
index d92a89ba540..00000000000
--- a/packages/app/src/app/components/CodeEditor/VSCode/elements.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import styled, { createGlobalStyle } from 'styled-components';
-
-export const Container = styled.div`
-  width: 100%;
-  height: 100%;
-  z-index: 30;
-`;
-
-export const GlobalStyles = createGlobalStyle`
-  .monaco-quick-open-widget {
-    z-index: 50 !important;
-  }
-`;
diff --git a/packages/app/src/app/components/CodeEditor/VSCode/icon-theme.css b/packages/app/src/app/components/CodeEditor/VSCode/icon-theme.css
deleted file mode 100644
index b903d7a6687..00000000000
--- a/packages/app/src/app/components/CodeEditor/VSCode/icon-theme.css
+++ /dev/null
@@ -1,1491 +0,0 @@
-@font-face {
-  src: url('/static/fonts/seti.woff') format('woff');
-  font-family: 'seti';
-  font-weight: normal;
-  font-style: normal;
-}
-.show-file-icons .file-icon::before,
-.show-file-icons .folder-icon::before,
-.show-file-icons .rootfolder-icon::before {
-  font-family: 'seti';
-  font-size: 150%;
-}
-.show-file-icons .file-icon::before,
-.show-file-icons .txt-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #d4d7d6;
-  content: '\E01D';
-}
-.show-file-icons .bat-lang-file-icon.file-icon::before {
-  color: #519aba;
-  content: '\E086';
-}
-.show-file-icons .clojure-lang-file-icon.file-icon::before {
-  color: #8dc149;
-  content: '\E010';
-}
-.show-file-icons .coffeescript-lang-file-icon.file-icon::before {
-  color: #cbcb41;
-  content: '\E012';
-}
-.show-file-icons .c-lang-file-icon.file-icon::before {
-  color: #519aba;
-  content: '\E009';
-}
-.show-file-icons .cpp-lang-file-icon.file-icon::before {
-  color: #519aba;
-  content: '\E016';
-}
-.show-file-icons .csharp-lang-file-icon.file-icon::before {
-  color: #519aba;
-  content: '\E008';
-}
-.show-file-icons .css-lang-file-icon.file-icon::before,
-.show-file-icons
-  .css\.map-ext-file-icon.map-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons .sss-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #519aba;
-  content: '\E019';
-}
-.show-file-icons .dockerfile-lang-file-icon.file-icon::before {
-  color: #519aba;
-  content: '\E01F';
-}
-.show-file-icons .fsharp-lang-file-icon.file-icon::before {
-  color: #519aba;
-  content: '\E028';
-}
-.show-file-icons .go-lang-file-icon.file-icon::before {
-  color: #519aba;
-  content: '\E033';
-}
-.show-file-icons .groovy-lang-file-icon.file-icon::before,
-.show-file-icons .gsp-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #8dc149;
-  content: '\E035';
-}
-.show-file-icons .handlebars-lang-file-icon.file-icon::before,
-.show-file-icons .mustache-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons .stache-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #e37933;
-  content: '\E058';
-}
-.show-file-icons .html-lang-file-icon.file-icon::before {
-  color: #e37933;
-  content: '\E03E';
-}
-.show-file-icons .properties-lang-file-icon.file-icon::before,
-.show-file-icons .java-lang-file-icon.file-icon::before,
-.show-file-icons .class-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons .classpath-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #cc3e44;
-  content: '\E046';
-}
-.show-file-icons .javascriptreact-lang-file-icon.file-icon::before,
-.show-file-icons .typescriptreact-lang-file-icon.file-icon::before,
-.show-file-icons .cjsx-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #519aba;
-  content: '\E069';
-}
-.show-file-icons .javascript-lang-file-icon.file-icon::before,
-.show-file-icons
-  .js\.map-ext-file-icon.map-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons .es-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons .es5-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons .es7-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #cbcb41;
-  content: '\E047';
-}
-.show-file-icons .json-lang-file-icon.file-icon::before,
-.show-file-icons .jsonc-lang-file-icon.file-icon::before,
-.show-file-icons .cson-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #cbcb41;
-  content: '\E04B';
-}
-.show-file-icons .less-lang-file-icon.file-icon::before {
-  color: #519aba;
-  content: '\E04E';
-}
-.show-file-icons .lua-lang-file-icon.file-icon::before {
-  color: #519aba;
-  content: '\E053';
-}
-.show-file-icons .makefile-lang-file-icon.file-icon::before {
-  color: #e37933;
-  content: '\E054';
-}
-.show-file-icons .markdown-lang-file-icon.file-icon::before {
-  color: #519aba;
-  content: '\E055';
-}
-.show-file-icons .objective-c-lang-file-icon.file-icon::before {
-  color: #cbcb41;
-  content: '\E009';
-}
-.show-file-icons .perl-lang-file-icon.file-icon::before {
-  color: #519aba;
-  content: '\E060';
-}
-.show-file-icons .php-lang-file-icon.file-icon::before,
-.show-file-icons
-  .php\.inc-ext-file-icon.inc-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #a074c4;
-  content: '\E062';
-}
-.show-file-icons .powershell-lang-file-icon.file-icon::before {
-  color: #519aba;
-  content: '\E063';
-}
-.show-file-icons .jade-lang-file-icon.file-icon::before {
-  color: #cc3e44;
-  content: '\E045';
-}
-.show-file-icons .python-lang-file-icon.file-icon::before {
-  color: #519aba;
-  content: '\E067';
-}
-.show-file-icons .ruby-lang-file-icon.file-icon::before {
-  color: #cc3e44;
-  content: '\E06B';
-}
-.show-file-icons .rust-lang-file-icon.file-icon::before {
-  color: #6d8086;
-  content: '\E06C';
-}
-.show-file-icons .scss-lang-file-icon.file-icon::before,
-.show-file-icons .sass-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons
-  .sass-lint\.yml-name-file-icon.yml-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #f55385;
-  content: '\E06E';
-}
-.show-file-icons .shellscript-lang-file-icon.file-icon::before,
-.show-file-icons .fish-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #4d5a5e;
-  content: '\E073';
-}
-.show-file-icons .sql-lang-file-icon.file-icon::before {
-  color: #f55385;
-  content: '\E01C';
-}
-.show-file-icons .swift-lang-file-icon.file-icon::before {
-  color: #e37933;
-  content: '\E07A';
-}
-.show-file-icons .typescript-lang-file-icon.file-icon::before {
-  color: #519aba;
-  content: '\E080';
-}
-.show-file-icons .xml-lang-file-icon.file-icon::before {
-  color: #e37933;
-  content: '\E089';
-}
-.show-file-icons .yaml-lang-file-icon.file-icon::before {
-  color: #a074c4;
-  content: '\E08B';
-}
-.show-file-icons .bsl-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #cc3e44;
-  content: '\E007';
-}
-.show-file-icons .mdo-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #cc3e44;
-  content: '\E057';
-}
-.show-file-icons .asm-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons .s-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #cc3e44;
-  content: '\E003';
-}
-.show-file-icons .h-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #a074c4;
-  content: '\E009';
-}
-.show-file-icons .hh-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons .hpp-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons .hxx-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #a074c4;
-  content: '\E016';
-}
-.show-file-icons .edn-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #519aba;
-  content: '\E010';
-}
-.show-file-icons .cfc-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons .cfm-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #519aba;
-  content: '\E014';
-}
-.show-file-icons .config-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons .cfg-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons .conf-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons .toml-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons .direnv-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons .env-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons .static-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons .editorconfig-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons .slugignore-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons .htaccess-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons
-  .mime\.types-name-file-icon.types-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #6d8086;
-  content: '\E015';
-}
-.show-file-icons .cr-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #d4d7d6;
-  content: '\E017';
-}
-.show-file-icons .ecr-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons .slang-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #d4d7d6;
-  content: '\E018';
-}
-.show-file-icons .csv-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #8dc149;
-  content: '\E01A';
-}
-.show-file-icons .xls-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons .xlsx-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #8dc149;
-  content: '\E088';
-}
-.show-file-icons .cake-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #cc3e44;
-  content: '\E00A';
-}
-.show-file-icons .ctp-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #cc3e44;
-  content: '\E00B';
-}
-.show-file-icons .d-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #cc3e44;
-  content: '\E01B';
-}
-.show-file-icons .doc-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons .docx-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #519aba;
-  content: '\E087';
-}
-.show-file-icons .ejs-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #cbcb41;
-  content: '\E021';
-}
-.show-file-icons .ex-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #a074c4;
-  content: '\E022';
-}
-.show-file-icons .exs-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #a074c4;
-  content: '\E023';
-}
-.show-file-icons .elm-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #519aba;
-  content: '\E024';
-}
-.show-file-icons .ico-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #cbcb41;
-  content: '\E029';
-}
-.show-file-icons .gitignore-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons .gitconfig-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons .gitkeep-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons .gitattributes-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons .gitmodules-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #41535b;
-  content: '\E02E';
-}
-.show-file-icons .slide-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons .article-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #519aba;
-  content: '\E032';
-}
-.show-file-icons .gradle-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #8dc149;
-  content: '\E034';
-}
-.show-file-icons .haml-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #cc3e44;
-  content: '\E039';
-}
-.show-file-icons .hs-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons .lhs-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #a074c4;
-  content: '\E03A';
-}
-.show-file-icons .hx-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #e37933;
-  content: '\E03B';
-}
-.show-file-icons .hxs-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #cbcb41;
-  content: '\E03B';
-}
-.show-file-icons .hxp-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #519aba;
-  content: '\E03B';
-}
-.show-file-icons .hxml-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #a074c4;
-  content: '\E03B';
-}
-.show-file-icons
-  .spec\.js-ext-file-icon.js-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #e37933;
-  content: '\E047';
-}
-.show-file-icons .jinja-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons .jinja2-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #cc3e44;
-  content: '\E049';
-}
-.show-file-icons .jl-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #a074c4;
-  content: '\E04C';
-}
-.show-file-icons .liquid-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #8dc149;
-  content: '\E050';
-}
-.show-file-icons .ls-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #519aba;
-  content: '\E051';
-}
-.show-file-icons .njk-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons .nunjucks-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons .nunjs-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons .nunj-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons .njs-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons .nj-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #8dc149;
-  content: '\E05C';
-}
-.show-file-icons
-  .npm-debug\.log-ext-file-icon.log-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #41535b;
-  content: '\E05A';
-}
-.show-file-icons .npmignore-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons .npmrc-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #cc3e44;
-  content: '\E05A';
-}
-.show-file-icons .ml-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons .mli-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons .cmx-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons .cmxa-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #e37933;
-  content: '\E05D';
-}
-.show-file-icons .odata-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #e37933;
-  content: '\E05E';
-}
-.show-file-icons .pug-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #cc3e44;
-  content: '\E065';
-}
-.show-file-icons .pp-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons .epp-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #cbcb41;
-  content: '\E066';
-}
-.show-file-icons .erb-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons
-  .erb\.html-ext-file-icon.html-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons
-  .html\.erb-ext-file-icon.erb-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #cc3e44;
-  content: '\E03F';
-}
-.show-file-icons .springbeans-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #8dc149;
-  content: '\E076';
-}
-.show-file-icons .slim-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #e37933;
-  content: '\E074';
-}
-.show-file-icons
-  .smarty\.tpl-ext-file-icon.tpl-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #cbcb41;
-  content: '\E075';
-}
-.show-file-icons .sbt-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #519aba;
-  content: '\E06F';
-}
-.show-file-icons .scala-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #cc3e44;
-  content: '\E070';
-}
-.show-file-icons .sol-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #519aba;
-  content: '\E027';
-}
-.show-file-icons .styl-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #8dc149;
-  content: '\E077';
-}
-.show-file-icons .tf-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons
-  .tf\.json-ext-file-icon.json-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons .tfvars-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #a074c4;
-  content: '\E07B';
-}
-.show-file-icons .tex-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #519aba;
-  content: '\E07C';
-}
-.show-file-icons .sty-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #cbcb41;
-  content: '\E07C';
-}
-.show-file-icons .dtx-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #e37933;
-  content: '\E07C';
-}
-.show-file-icons .ins-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #d4d7d6;
-  content: '\E07C';
-}
-.show-file-icons .twig-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #8dc149;
-  content: '\E07F';
-}
-.show-file-icons
-  .spec\.ts-ext-file-icon.ts-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #cbcb41;
-  content: '\E080';
-}
-.show-file-icons .vala-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons .vapi-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #6d8086;
-  content: '\E081';
-}
-.show-file-icons .vue-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #8dc149;
-  content: '\E083';
-}
-.show-file-icons .jar-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #cc3e44;
-  content: '\E08C';
-}
-.show-file-icons .zip-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #6d8086;
-  content: '\E08C';
-}
-.show-file-icons .wgt-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #519aba;
-  content: '\E085';
-}
-.show-file-icons .ai-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #cbcb41;
-  content: '\E041';
-}
-.show-file-icons .psd-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #519aba;
-  content: '\E061';
-}
-.show-file-icons .pdf-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #cc3e44;
-  content: '\E05F';
-}
-.show-file-icons .eot-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons .ttf-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons .woff-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons .woff2-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #cc3e44;
-  content: '\E02D';
-}
-.show-file-icons .gif-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons .jpg-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons .jpeg-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons .png-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons .pxm-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons .svgx-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #a074c4;
-  content: '\E042';
-}
-.show-file-icons .svg-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #a074c4;
-  content: '\E079';
-}
-.show-file-icons .sublime-project-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons
-  .sublime-workspace-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #e37933;
-  content: '\E078';
-}
-.show-file-icons .component-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons .cls-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #519aba;
-  content: '\E06D';
-}
-.show-file-icons .mov-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons .ogv-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons .webm-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons .avi-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons .mpg-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons .mp4-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #f55385;
-  content: '\E082';
-}
-.show-file-icons .mp3-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons .ogg-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons .wav-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #a074c4;
-  content: '\E004';
-}
-.show-file-icons .babelrc-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #cbcb41;
-  content: '\E005';
-}
-.show-file-icons .bowerrc-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons
-  .bower\.json-name-file-icon.json-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #e37933;
-  content: '\E006';
-}
-.show-file-icons .dockerignore-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #4d5a5e;
-  content: '\E01F';
-}
-.show-file-icons
-  .codeclimate\.yml-ext-file-icon.yml-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #8dc149;
-  content: '\E011';
-}
-.show-file-icons .eslintrc-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons
-  .eslintrc\.js-ext-file-icon.js-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons
-  .eslintrc\.yaml-ext-file-icon.yaml-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons
-  .eslintrc\.yml-ext-file-icon.yml-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons
-  .eslintrc\.json-ext-file-icon.json-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #a074c4;
-  content: '\E026';
-}
-.show-file-icons .eslintignore-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #4d5a5e;
-  content: '\E026';
-}
-.show-file-icons .firebaserc-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons
-  .firebase\.json-name-file-icon.json-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #e37933;
-  content: '\E02A';
-}
-.show-file-icons .jshintrc-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons .jscsrc-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #519aba;
-  content: '\E047';
-}
-.show-file-icons .tmp-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #6d8086;
-  content: '\E00F';
-}
-.show-file-icons .key-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons .cert-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #8dc149;
-  content: '\E052';
-}
-.show-file-icons .ds_store-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #41535b;
-  content: '\E040';
-}
-.show-file-icons .mix-name-file-icon.ext-file-icon.file-icon::before {
-  color: #cc3e44;
-  content: '\E03D';
-}
-.show-file-icons
-  .karma\.conf\.js-name-file-icon.conf\.js-ext-file-icon.js-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons
-  .karma\.conf\.coffee-name-file-icon.conf\.coffee-ext-file-icon.coffee-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #8dc149;
-  content: '\E04D';
-}
-.show-file-icons
-  .readme\.md-name-file-icon.md-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #519aba;
-  content: '\E043';
-}
-.show-file-icons
-  .changelog\.md-name-file-icon.md-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons .changelog-name-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons
-  .version\.md-name-file-icon.md-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons .version-name-file-icon.ext-file-icon.file-icon::before {
-  color: #519aba;
-  content: '\E00F';
-}
-.show-file-icons .mvnw-name-file-icon.ext-file-icon.file-icon::before {
-  color: #cc3e44;
-  content: '\E056';
-}
-.show-file-icons .jenkinsfile-name-file-icon.ext-file-icon.file-icon::before {
-  color: #cc3e44;
-  content: '\E048';
-}
-.show-file-icons
-  .docker-healthcheck-name-file-icon.ext-file-icon.file-icon::before {
-  color: #8dc149;
-  content: '\E01F';
-}
-.show-file-icons
-  .docker-compose\.yml-name-file-icon.yml-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons
-  .docker-compose\.yaml-name-file-icon.yaml-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #f55385;
-  content: '\E01F';
-}
-.show-file-icons .geckodriver-name-file-icon.ext-file-icon.file-icon::before {
-  color: #e37933;
-  content: '\E02B';
-}
-.show-file-icons
-  .gruntfile\.js-name-file-icon.js-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons
-  .gruntfile\.babel\.js-name-file-icon.babel\.js-ext-file-icon.js-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons
-  .gruntfile\.coffee-name-file-icon.coffee-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #e37933;
-  content: '\E036';
-}
-.show-file-icons .gulpfile-name-file-icon.ext-file-icon.file-icon::before {
-  color: #cc3e44;
-  content: '\E037';
-}
-.show-file-icons
-  .ionic\.config\.json-name-file-icon.config\.json-ext-file-icon.json-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons
-  .ionic\.project-name-file-icon.project-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #519aba;
-  content: '\E044';
-}
-.show-file-icons
-  .rollup\.config\.js-name-file-icon.config\.js-ext-file-icon.js-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #cc3e44;
-  content: '\E06A';
-}
-.show-file-icons
-  .yarn\.clean-name-file-icon.clean-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons
-  .yarn\.lock-name-file-icon.lock-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #519aba;
-  content: '\E08A';
-}
-.show-file-icons
-  .webpack\.config\.js-name-file-icon.config\.js-ext-file-icon.js-ext-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons
-  .webpack\.config\.build\.js-name-file-icon.config\.build\.js-ext-file-icon.build\.js-ext-file-icon.js-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #519aba;
-  content: '\E084';
-}
-.show-file-icons .license-name-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons .licence-name-file-icon.ext-file-icon.file-icon::before,
-.show-file-icons .copying-name-file-icon.ext-file-icon.file-icon::before {
-  color: #cbcb41;
-  content: '\E04F';
-}
-.show-file-icons .compiling-name-file-icon.ext-file-icon.file-icon::before {
-  color: #e37933;
-  content: '\E04F';
-}
-.show-file-icons .contributing-name-file-icon.ext-file-icon.file-icon::before {
-  color: #cc3e44;
-  content: '\E04F';
-}
-.show-file-icons .qmakefile-name-file-icon.ext-file-icon.file-icon::before {
-  color: #a074c4;
-  content: '\E054';
-}
-.show-file-icons .omakefile-name-file-icon.ext-file-icon.file-icon::before {
-  color: #6d8086;
-  content: '\E054';
-}
-.show-file-icons
-  .cmakelists\.txt-name-file-icon.txt-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #519aba;
-  content: '\E054';
-}
-.show-file-icons .procfile-name-file-icon.ext-file-icon.file-icon::before {
-  color: #a074c4;
-  content: '\E03C';
-}
-.show-file-icons .todo-name-file-icon.ext-file-icon.file-icon::before {
-  content: '\E07E';
-}
-.show-file-icons
-  .npm-debug\.log-name-file-icon.log-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #41535b;
-  content: '\E05B';
-}
-.vs .show-file-icons .file-icon::before,
-.vs .show-file-icons .txt-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #bfc2c1;
-  content: '\E01D';
-}
-.vs .show-file-icons .bat-lang-file-icon.file-icon::before {
-  color: #498ba7;
-  content: '\E086';
-}
-.vs .show-file-icons .clojure-lang-file-icon.file-icon::before {
-  color: #7fae42;
-  content: '\E010';
-}
-.vs .show-file-icons .coffeescript-lang-file-icon.file-icon::before {
-  color: #b7b73b;
-  content: '\E012';
-}
-.vs .show-file-icons .c-lang-file-icon.file-icon::before {
-  color: #498ba7;
-  content: '\E009';
-}
-.vs .show-file-icons .cpp-lang-file-icon.file-icon::before {
-  color: #498ba7;
-  content: '\E016';
-}
-.vs .show-file-icons .csharp-lang-file-icon.file-icon::before {
-  color: #498ba7;
-  content: '\E008';
-}
-.vs .show-file-icons .css-lang-file-icon.file-icon::before,
-.vs
-  .show-file-icons
-  .css\.map-ext-file-icon.map-ext-file-icon.ext-file-icon.file-icon::before,
-.vs .show-file-icons .sss-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #498ba7;
-  content: '\E019';
-}
-.vs .show-file-icons .dockerfile-lang-file-icon.file-icon::before {
-  color: #498ba7;
-  content: '\E01F';
-}
-.vs .show-file-icons .fsharp-lang-file-icon.file-icon::before {
-  color: #498ba7;
-  content: '\E028';
-}
-.vs .show-file-icons .go-lang-file-icon.file-icon::before {
-  color: #498ba7;
-  content: '\E033';
-}
-.vs .show-file-icons .groovy-lang-file-icon.file-icon::before,
-.vs .show-file-icons .gsp-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #7fae42;
-  content: '\E035';
-}
-.vs .show-file-icons .handlebars-lang-file-icon.file-icon::before,
-.vs .show-file-icons .mustache-ext-file-icon.ext-file-icon.file-icon::before,
-.vs .show-file-icons .stache-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #cc6d2e;
-  content: '\E058';
-}
-.vs .show-file-icons .html-lang-file-icon.file-icon::before {
-  color: #cc6d2e;
-  content: '\E03E';
-}
-.vs .show-file-icons .properties-lang-file-icon.file-icon::before,
-.vs .show-file-icons .java-lang-file-icon.file-icon::before,
-.vs .show-file-icons .class-ext-file-icon.ext-file-icon.file-icon::before,
-.vs .show-file-icons .classpath-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #b8383d;
-  content: '\E046';
-}
-.vs .show-file-icons .javascriptreact-lang-file-icon.file-icon::before,
-.vs .show-file-icons .typescriptreact-lang-file-icon.file-icon::before,
-.vs .show-file-icons .cjsx-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #498ba7;
-  content: '\E069';
-}
-.vs .show-file-icons .javascript-lang-file-icon.file-icon::before,
-.vs
-  .show-file-icons
-  .js\.map-ext-file-icon.map-ext-file-icon.ext-file-icon.file-icon::before,
-.vs .show-file-icons .es-ext-file-icon.ext-file-icon.file-icon::before,
-.vs .show-file-icons .es5-ext-file-icon.ext-file-icon.file-icon::before,
-.vs .show-file-icons .es7-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #b7b73b;
-  content: '\E047';
-}
-.vs .show-file-icons .json-lang-file-icon.file-icon::before,
-.vs .show-file-icons .jsonc-lang-file-icon.file-icon::before,
-.vs .show-file-icons .cson-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #b7b73b;
-  content: '\E04B';
-}
-.vs .show-file-icons .less-lang-file-icon.file-icon::before {
-  color: #498ba7;
-  content: '\E04E';
-}
-.vs .show-file-icons .lua-lang-file-icon.file-icon::before {
-  color: #498ba7;
-  content: '\E053';
-}
-.vs .show-file-icons .makefile-lang-file-icon.file-icon::before {
-  color: #cc6d2e;
-  content: '\E054';
-}
-.vs .show-file-icons .markdown-lang-file-icon.file-icon::before {
-  color: #498ba7;
-  content: '\E055';
-}
-.vs .show-file-icons .objective-c-lang-file-icon.file-icon::before {
-  color: #b7b73b;
-  content: '\E009';
-}
-.vs .show-file-icons .perl-lang-file-icon.file-icon::before {
-  color: #498ba7;
-  content: '\E060';
-}
-.vs .show-file-icons .php-lang-file-icon.file-icon::before,
-.vs
-  .show-file-icons
-  .php\.inc-ext-file-icon.inc-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #9068b0;
-  content: '\E062';
-}
-.vs .show-file-icons .powershell-lang-file-icon.file-icon::before {
-  color: #498ba7;
-  content: '\E063';
-}
-.vs .show-file-icons .jade-lang-file-icon.file-icon::before {
-  color: #b8383d;
-  content: '\E045';
-}
-.vs .show-file-icons .python-lang-file-icon.file-icon::before {
-  color: #498ba7;
-  content: '\E067';
-}
-.vs .show-file-icons .ruby-lang-file-icon.file-icon::before {
-  color: #b8383d;
-  content: '\E06B';
-}
-.vs .show-file-icons .rust-lang-file-icon.file-icon::before {
-  color: #627379;
-  content: '\E06C';
-}
-.vs .show-file-icons .scss-lang-file-icon.file-icon::before,
-.vs .show-file-icons .sass-ext-file-icon.ext-file-icon.file-icon::before,
-.vs
-  .show-file-icons
-  .sass-lint\.yml-name-file-icon.yml-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #dd4b78;
-  content: '\E06E';
-}
-.vs .show-file-icons .shellscript-lang-file-icon.file-icon::before,
-.vs .show-file-icons .fish-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #455155;
-  content: '\E073';
-}
-.vs .show-file-icons .sql-lang-file-icon.file-icon::before {
-  color: #dd4b78;
-  content: '\E01C';
-}
-.vs .show-file-icons .swift-lang-file-icon.file-icon::before {
-  color: #cc6d2e;
-  content: '\E07A';
-}
-.vs .show-file-icons .typescript-lang-file-icon.file-icon::before {
-  color: #498ba7;
-  content: '\E080';
-}
-.vs .show-file-icons .xml-lang-file-icon.file-icon::before {
-  color: #cc6d2e;
-  content: '\E089';
-}
-.vs .show-file-icons .yaml-lang-file-icon.file-icon::before {
-  color: #9068b0;
-  content: '\E08B';
-}
-.vs .show-file-icons .bsl-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #b8383d;
-  content: '\E007';
-}
-.vs .show-file-icons .mdo-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #b8383d;
-  content: '\E057';
-}
-.vs .show-file-icons .asm-ext-file-icon.ext-file-icon.file-icon::before,
-.vs .show-file-icons .s-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #b8383d;
-  content: '\E003';
-}
-.vs .show-file-icons .h-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #9068b0;
-  content: '\E009';
-}
-.vs .show-file-icons .hh-ext-file-icon.ext-file-icon.file-icon::before,
-.vs .show-file-icons .hpp-ext-file-icon.ext-file-icon.file-icon::before,
-.vs .show-file-icons .hxx-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #9068b0;
-  content: '\E016';
-}
-.vs .show-file-icons .edn-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #498ba7;
-  content: '\E010';
-}
-.vs .show-file-icons .cfc-ext-file-icon.ext-file-icon.file-icon::before,
-.vs .show-file-icons .cfm-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #498ba7;
-  content: '\E014';
-}
-.vs .show-file-icons .config-ext-file-icon.ext-file-icon.file-icon::before,
-.vs .show-file-icons .cfg-ext-file-icon.ext-file-icon.file-icon::before,
-.vs .show-file-icons .conf-ext-file-icon.ext-file-icon.file-icon::before,
-.vs .show-file-icons .toml-ext-file-icon.ext-file-icon.file-icon::before,
-.vs .show-file-icons .direnv-ext-file-icon.ext-file-icon.file-icon::before,
-.vs .show-file-icons .env-ext-file-icon.ext-file-icon.file-icon::before,
-.vs .show-file-icons .static-ext-file-icon.ext-file-icon.file-icon::before,
-.vs
-  .show-file-icons
-  .editorconfig-ext-file-icon.ext-file-icon.file-icon::before,
-.vs .show-file-icons .slugignore-ext-file-icon.ext-file-icon.file-icon::before,
-.vs .show-file-icons .htaccess-ext-file-icon.ext-file-icon.file-icon::before,
-.vs
-  .show-file-icons
-  .mime\.types-name-file-icon.types-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #627379;
-  content: '\E015';
-}
-.vs .show-file-icons .cr-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #bfc2c1;
-  content: '\E017';
-}
-.vs .show-file-icons .ecr-ext-file-icon.ext-file-icon.file-icon::before,
-.vs .show-file-icons .slang-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #bfc2c1;
-  content: '\E018';
-}
-.vs .show-file-icons .csv-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #7fae42;
-  content: '\E01A';
-}
-.vs .show-file-icons .xls-ext-file-icon.ext-file-icon.file-icon::before,
-.vs .show-file-icons .xlsx-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #7fae42;
-  content: '\E088';
-}
-.vs .show-file-icons .cake-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #b8383d;
-  content: '\E00A';
-}
-.vs .show-file-icons .ctp-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #b8383d;
-  content: '\E00B';
-}
-.vs .show-file-icons .d-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #b8383d;
-  content: '\E01B';
-}
-.vs .show-file-icons .doc-ext-file-icon.ext-file-icon.file-icon::before,
-.vs .show-file-icons .docx-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #498ba7;
-  content: '\E087';
-}
-.vs .show-file-icons .ejs-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #b7b73b;
-  content: '\E021';
-}
-.vs .show-file-icons .ex-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #9068b0;
-  content: '\E022';
-}
-.vs .show-file-icons .exs-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #9068b0;
-  content: '\E023';
-}
-.vs .show-file-icons .elm-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #498ba7;
-  content: '\E024';
-}
-.vs .show-file-icons .ico-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #b7b73b;
-  content: '\E029';
-}
-.vs .show-file-icons .gitignore-ext-file-icon.ext-file-icon.file-icon::before,
-.vs .show-file-icons .gitconfig-ext-file-icon.ext-file-icon.file-icon::before,
-.vs .show-file-icons .gitkeep-ext-file-icon.ext-file-icon.file-icon::before,
-.vs
-  .show-file-icons
-  .gitattributes-ext-file-icon.ext-file-icon.file-icon::before,
-.vs .show-file-icons .gitmodules-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #3b4b52;
-  content: '\E02E';
-}
-.vs .show-file-icons .slide-ext-file-icon.ext-file-icon.file-icon::before,
-.vs .show-file-icons .article-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #498ba7;
-  content: '\E032';
-}
-.vs .show-file-icons .gradle-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #7fae42;
-  content: '\E034';
-}
-.vs .show-file-icons .haml-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #b8383d;
-  content: '\E039';
-}
-.vs .show-file-icons .hs-ext-file-icon.ext-file-icon.file-icon::before,
-.vs .show-file-icons .lhs-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #9068b0;
-  content: '\E03A';
-}
-.vs .show-file-icons .hx-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #cc6d2e;
-  content: '\E03B';
-}
-.vs .show-file-icons .hxs-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #b7b73b;
-  content: '\E03B';
-}
-.vs .show-file-icons .hxp-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #498ba7;
-  content: '\E03B';
-}
-.vs .show-file-icons .hxml-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #9068b0;
-  content: '\E03B';
-}
-.vs
-  .show-file-icons
-  .spec\.js-ext-file-icon.js-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #cc6d2e;
-  content: '\E047';
-}
-.vs .show-file-icons .jinja-ext-file-icon.ext-file-icon.file-icon::before,
-.vs .show-file-icons .jinja2-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #b8383d;
-  content: '\E049';
-}
-.vs .show-file-icons .jl-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #9068b0;
-  content: '\E04C';
-}
-.vs .show-file-icons .liquid-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #7fae42;
-  content: '\E050';
-}
-.vs .show-file-icons .ls-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #498ba7;
-  content: '\E051';
-}
-.vs .show-file-icons .njk-ext-file-icon.ext-file-icon.file-icon::before,
-.vs .show-file-icons .nunjucks-ext-file-icon.ext-file-icon.file-icon::before,
-.vs .show-file-icons .nunjs-ext-file-icon.ext-file-icon.file-icon::before,
-.vs .show-file-icons .nunj-ext-file-icon.ext-file-icon.file-icon::before,
-.vs .show-file-icons .njs-ext-file-icon.ext-file-icon.file-icon::before,
-.vs .show-file-icons .nj-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #7fae42;
-  content: '\E05C';
-}
-.vs
-  .show-file-icons
-  .npm-debug\.log-ext-file-icon.log-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #3b4b52;
-  content: '\E05A';
-}
-.vs .show-file-icons .npmignore-ext-file-icon.ext-file-icon.file-icon::before,
-.vs .show-file-icons .npmrc-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #b8383d;
-  content: '\E05A';
-}
-.vs .show-file-icons .ml-ext-file-icon.ext-file-icon.file-icon::before,
-.vs .show-file-icons .mli-ext-file-icon.ext-file-icon.file-icon::before,
-.vs .show-file-icons .cmx-ext-file-icon.ext-file-icon.file-icon::before,
-.vs .show-file-icons .cmxa-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #cc6d2e;
-  content: '\E05D';
-}
-.vs .show-file-icons .odata-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #cc6d2e;
-  content: '\E05E';
-}
-.vs .show-file-icons .pug-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #b8383d;
-  content: '\E065';
-}
-.vs .show-file-icons .pp-ext-file-icon.ext-file-icon.file-icon::before,
-.vs .show-file-icons .epp-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #b7b73b;
-  content: '\E066';
-}
-.vs .show-file-icons .erb-ext-file-icon.ext-file-icon.file-icon::before,
-.vs
-  .show-file-icons
-  .erb\.html-ext-file-icon.html-ext-file-icon.ext-file-icon.file-icon::before,
-.vs
-  .show-file-icons
-  .html\.erb-ext-file-icon.erb-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #b8383d;
-  content: '\E03F';
-}
-.vs
-  .show-file-icons
-  .springbeans-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #7fae42;
-  content: '\E076';
-}
-.vs .show-file-icons .slim-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #cc6d2e;
-  content: '\E074';
-}
-.vs
-  .show-file-icons
-  .smarty\.tpl-ext-file-icon.tpl-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #b7b73b;
-  content: '\E075';
-}
-.vs .show-file-icons .sbt-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #498ba7;
-  content: '\E06F';
-}
-.vs .show-file-icons .scala-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #b8383d;
-  content: '\E070';
-}
-.vs .show-file-icons .sol-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #498ba7;
-  content: '\E027';
-}
-.vs .show-file-icons .styl-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #7fae42;
-  content: '\E077';
-}
-.vs .show-file-icons .tf-ext-file-icon.ext-file-icon.file-icon::before,
-.vs
-  .show-file-icons
-  .tf\.json-ext-file-icon.json-ext-file-icon.ext-file-icon.file-icon::before,
-.vs .show-file-icons .tfvars-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #9068b0;
-  content: '\E07B';
-}
-.vs .show-file-icons .tex-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #498ba7;
-  content: '\E07C';
-}
-.vs .show-file-icons .sty-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #b7b73b;
-  content: '\E07C';
-}
-.vs .show-file-icons .dtx-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #cc6d2e;
-  content: '\E07C';
-}
-.vs .show-file-icons .ins-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #bfc2c1;
-  content: '\E07C';
-}
-.vs .show-file-icons .twig-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #7fae42;
-  content: '\E07F';
-}
-.vs
-  .show-file-icons
-  .spec\.ts-ext-file-icon.ts-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #b7b73b;
-  content: '\E080';
-}
-.vs .show-file-icons .vala-ext-file-icon.ext-file-icon.file-icon::before,
-.vs .show-file-icons .vapi-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #627379;
-  content: '\E081';
-}
-.vs .show-file-icons .vue-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #7fae42;
-  content: '\E083';
-}
-.vs .show-file-icons .jar-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #b8383d;
-  content: '\E08C';
-}
-.vs .show-file-icons .zip-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #627379;
-  content: '\E08C';
-}
-.vs .show-file-icons .wgt-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #498ba7;
-  content: '\E085';
-}
-.vs .show-file-icons .ai-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #b7b73b;
-  content: '\E041';
-}
-.vs .show-file-icons .psd-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #498ba7;
-  content: '\E061';
-}
-.vs .show-file-icons .pdf-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #b8383d;
-  content: '\E05F';
-}
-.vs .show-file-icons .eot-ext-file-icon.ext-file-icon.file-icon::before,
-.vs .show-file-icons .ttf-ext-file-icon.ext-file-icon.file-icon::before,
-.vs .show-file-icons .woff-ext-file-icon.ext-file-icon.file-icon::before,
-.vs .show-file-icons .woff2-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #b8383d;
-  content: '\E02D';
-}
-.vs .show-file-icons .gif-ext-file-icon.ext-file-icon.file-icon::before,
-.vs .show-file-icons .jpg-ext-file-icon.ext-file-icon.file-icon::before,
-.vs .show-file-icons .jpeg-ext-file-icon.ext-file-icon.file-icon::before,
-.vs .show-file-icons .png-ext-file-icon.ext-file-icon.file-icon::before,
-.vs .show-file-icons .pxm-ext-file-icon.ext-file-icon.file-icon::before,
-.vs .show-file-icons .svgx-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #9068b0;
-  content: '\E042';
-}
-.vs .show-file-icons .svg-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #9068b0;
-  content: '\E079';
-}
-.vs
-  .show-file-icons
-  .sublime-project-ext-file-icon.ext-file-icon.file-icon::before,
-.vs
-  .show-file-icons
-  .sublime-workspace-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #cc6d2e;
-  content: '\E078';
-}
-.vs .show-file-icons .component-ext-file-icon.ext-file-icon.file-icon::before,
-.vs .show-file-icons .cls-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #498ba7;
-  content: '\E06D';
-}
-.vs .show-file-icons .mov-ext-file-icon.ext-file-icon.file-icon::before,
-.vs .show-file-icons .ogv-ext-file-icon.ext-file-icon.file-icon::before,
-.vs .show-file-icons .webm-ext-file-icon.ext-file-icon.file-icon::before,
-.vs .show-file-icons .avi-ext-file-icon.ext-file-icon.file-icon::before,
-.vs .show-file-icons .mpg-ext-file-icon.ext-file-icon.file-icon::before,
-.vs .show-file-icons .mp4-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #dd4b78;
-  content: '\E082';
-}
-.vs .show-file-icons .mp3-ext-file-icon.ext-file-icon.file-icon::before,
-.vs .show-file-icons .ogg-ext-file-icon.ext-file-icon.file-icon::before,
-.vs .show-file-icons .wav-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #9068b0;
-  content: '\E004';
-}
-.vs .show-file-icons .babelrc-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #b7b73b;
-  content: '\E005';
-}
-.vs .show-file-icons .bowerrc-ext-file-icon.ext-file-icon.file-icon::before,
-.vs
-  .show-file-icons
-  .bower\.json-name-file-icon.json-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #cc6d2e;
-  content: '\E006';
-}
-.vs
-  .show-file-icons
-  .dockerignore-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #455155;
-  content: '\E01F';
-}
-.vs
-  .show-file-icons
-  .codeclimate\.yml-ext-file-icon.yml-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #7fae42;
-  content: '\E011';
-}
-.vs .show-file-icons .eslintrc-ext-file-icon.ext-file-icon.file-icon::before,
-.vs
-  .show-file-icons
-  .eslintrc\.js-ext-file-icon.js-ext-file-icon.ext-file-icon.file-icon::before,
-.vs
-  .show-file-icons
-  .eslintrc\.yaml-ext-file-icon.yaml-ext-file-icon.ext-file-icon.file-icon::before,
-.vs
-  .show-file-icons
-  .eslintrc\.yml-ext-file-icon.yml-ext-file-icon.ext-file-icon.file-icon::before,
-.vs
-  .show-file-icons
-  .eslintrc\.json-ext-file-icon.json-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #9068b0;
-  content: '\E026';
-}
-.vs
-  .show-file-icons
-  .eslintignore-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #455155;
-  content: '\E026';
-}
-.vs .show-file-icons .firebaserc-ext-file-icon.ext-file-icon.file-icon::before,
-.vs
-  .show-file-icons
-  .firebase\.json-name-file-icon.json-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #cc6d2e;
-  content: '\E02A';
-}
-.vs .show-file-icons .jshintrc-ext-file-icon.ext-file-icon.file-icon::before,
-.vs .show-file-icons .jscsrc-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #498ba7;
-  content: '\E047';
-}
-.vs .show-file-icons .tmp-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #627379;
-  content: '\E00F';
-}
-.vs .show-file-icons .key-ext-file-icon.ext-file-icon.file-icon::before,
-.vs .show-file-icons .cert-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #7fae42;
-  content: '\E052';
-}
-.vs .show-file-icons .ds_store-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #3b4b52;
-  content: '\E040';
-}
-.vs .show-file-icons .mix-name-file-icon.ext-file-icon.file-icon::before {
-  color: #b8383d;
-  content: '\E03D';
-}
-.vs
-  .show-file-icons
-  .karma\.conf\.js-name-file-icon.conf\.js-ext-file-icon.js-ext-file-icon.ext-file-icon.file-icon::before,
-.vs
-  .show-file-icons
-  .karma\.conf\.coffee-name-file-icon.conf\.coffee-ext-file-icon.coffee-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #7fae42;
-  content: '\E04D';
-}
-.vs
-  .show-file-icons
-  .readme\.md-name-file-icon.md-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #498ba7;
-  content: '\E043';
-}
-.vs
-  .show-file-icons
-  .changelog\.md-name-file-icon.md-ext-file-icon.ext-file-icon.file-icon::before,
-.vs .show-file-icons .changelog-name-file-icon.ext-file-icon.file-icon::before,
-.vs
-  .show-file-icons
-  .version\.md-name-file-icon.md-ext-file-icon.ext-file-icon.file-icon::before,
-.vs .show-file-icons .version-name-file-icon.ext-file-icon.file-icon::before {
-  color: #498ba7;
-  content: '\E00F';
-}
-.vs .show-file-icons .mvnw-name-file-icon.ext-file-icon.file-icon::before {
-  color: #b8383d;
-  content: '\E056';
-}
-.vs
-  .show-file-icons
-  .jenkinsfile-name-file-icon.ext-file-icon.file-icon::before {
-  color: #b8383d;
-  content: '\E048';
-}
-.vs
-  .show-file-icons
-  .docker-healthcheck-name-file-icon.ext-file-icon.file-icon::before {
-  color: #7fae42;
-  content: '\E01F';
-}
-.vs
-  .show-file-icons
-  .docker-compose\.yml-name-file-icon.yml-ext-file-icon.ext-file-icon.file-icon::before,
-.vs
-  .show-file-icons
-  .docker-compose\.yaml-name-file-icon.yaml-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #dd4b78;
-  content: '\E01F';
-}
-.vs
-  .show-file-icons
-  .geckodriver-name-file-icon.ext-file-icon.file-icon::before {
-  color: #cc6d2e;
-  content: '\E02B';
-}
-.vs
-  .show-file-icons
-  .gruntfile\.js-name-file-icon.js-ext-file-icon.ext-file-icon.file-icon::before,
-.vs
-  .show-file-icons
-  .gruntfile\.babel\.js-name-file-icon.babel\.js-ext-file-icon.js-ext-file-icon.ext-file-icon.file-icon::before,
-.vs
-  .show-file-icons
-  .gruntfile\.coffee-name-file-icon.coffee-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #cc6d2e;
-  content: '\E036';
-}
-.vs .show-file-icons .gulpfile-name-file-icon.ext-file-icon.file-icon::before {
-  color: #b8383d;
-  content: '\E037';
-}
-.vs
-  .show-file-icons
-  .ionic\.config\.json-name-file-icon.config\.json-ext-file-icon.json-ext-file-icon.ext-file-icon.file-icon::before,
-.vs
-  .show-file-icons
-  .ionic\.project-name-file-icon.project-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #498ba7;
-  content: '\E044';
-}
-.vs
-  .show-file-icons
-  .rollup\.config\.js-name-file-icon.config\.js-ext-file-icon.js-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #b8383d;
-  content: '\E06A';
-}
-.vs
-  .show-file-icons
-  .yarn\.clean-name-file-icon.clean-ext-file-icon.ext-file-icon.file-icon::before,
-.vs
-  .show-file-icons
-  .yarn\.lock-name-file-icon.lock-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #498ba7;
-  content: '\E08A';
-}
-.vs
-  .show-file-icons
-  .webpack\.config\.js-name-file-icon.config\.js-ext-file-icon.js-ext-file-icon.ext-file-icon.file-icon::before,
-.vs
-  .show-file-icons
-  .webpack\.config\.build\.js-name-file-icon.config\.build\.js-ext-file-icon.build\.js-ext-file-icon.js-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #498ba7;
-  content: '\E084';
-}
-.vs .show-file-icons .license-name-file-icon.ext-file-icon.file-icon::before,
-.vs .show-file-icons .licence-name-file-icon.ext-file-icon.file-icon::before,
-.vs .show-file-icons .copying-name-file-icon.ext-file-icon.file-icon::before {
-  color: #b7b73b;
-  content: '\E04F';
-}
-.vs .show-file-icons .compiling-name-file-icon.ext-file-icon.file-icon::before {
-  color: #cc6d2e;
-  content: '\E04F';
-}
-.vs
-  .show-file-icons
-  .contributing-name-file-icon.ext-file-icon.file-icon::before {
-  color: #b8383d;
-  content: '\E04F';
-}
-.vs .show-file-icons .qmakefile-name-file-icon.ext-file-icon.file-icon::before {
-  color: #9068b0;
-  content: '\E054';
-}
-.vs .show-file-icons .omakefile-name-file-icon.ext-file-icon.file-icon::before {
-  color: #627379;
-  content: '\E054';
-}
-.vs
-  .show-file-icons
-  .cmakelists\.txt-name-file-icon.txt-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #498ba7;
-  content: '\E054';
-}
-.vs .show-file-icons .procfile-name-file-icon.ext-file-icon.file-icon::before {
-  color: #9068b0;
-  content: '\E03C';
-}
-.vs
-  .show-file-icons
-  .npm-debug\.log-name-file-icon.log-ext-file-icon.ext-file-icon.file-icon::before {
-  color: #3b4b52;
-  content: '\E05B';
-}
diff --git a/packages/app/src/app/components/CodeEditor/VSCode/index.tsx b/packages/app/src/app/components/CodeEditor/VSCode/index.tsx
deleted file mode 100644
index c28b1a734ba..00000000000
--- a/packages/app/src/app/components/CodeEditor/VSCode/index.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import './icon-theme.css';
-import './workbench-theme.css';
-
-import getTemplate from '@codesandbox/common/lib/templates';
-import getUI from '@codesandbox/common/lib/templates/configuration/ui';
-import theme from '@codesandbox/common/lib/theme';
-import { useActions, useAppState, useEffects } from 'app/overmind';
-import { json } from 'overmind';
-import React, { useEffect, useRef } from 'react';
-import { render } from 'react-dom';
-import { ThemeProvider } from 'styled-components';
-
-import { Configuration } from './Configuration';
-import { Container, GlobalStyles } from './elements';
-
-export const VSCode: React.FunctionComponent = () => {
-  const state = useAppState();
-  const actions = useActions();
-  const effects = useEffects();
-  const containerEl = useRef(null);
-
-  const getCurrentModule = React.useCallback(
-    () => state.editor.currentModule,
-    [] // eslint-disable-line
-  );
-  const currentSandboxTemplate = state.editor.currentSandbox?.template;
-  useEffect(() => {
-    const rootEl = containerEl.current;
-    const mainContainer = effects.vscode.getEditorElement(
-      (modulePath: string) => {
-        if (!state.editor.currentSandbox) {
-          return false;
-        }
-
-        const template = getTemplate(state.editor.currentSandbox.template);
-        const config = template.configurationFiles[modulePath];
-
-        const ui = config && getUI(config.type);
-        return (
-          ui &&
-          ui.ConfigWizard &&
-          ((container, extraProps) =>
-            render(
-              <ThemeProvider theme={theme}>
-                <Configuration
-                  onChange={(code, moduleShortid) =>
-                    actions.editor.codeChanged({ code, moduleShortid })
-                  }
-                  // Copy the object, we don't want mutations in the component
-                  currentModule={json(getCurrentModule())}
-                  config={config}
-                  sandbox={state.editor.currentSandbox}
-                  {...(extraProps as any)}
-                />
-              </ThemeProvider>,
-              container
-            ))
-        );
-      }
-    );
-
-    rootEl.appendChild(mainContainer);
-    const { width, height } = rootEl.getBoundingClientRect();
-    effects.vscode.updateLayout(width, height);
-
-    document.getElementById('root').classList.add('monaco-shell');
-
-    return () => {
-      document.getElementById('root').classList.remove('monaco-shell');
-    };
-  }, [
-    actions.editor,
-    effects.vscode,
-    state.editor.currentSandbox,
-    currentSandboxTemplate,
-    getCurrentModule,
-  ]);
-
-  return (
-    <Container id="vscode-container" ref={containerEl}>
-      <GlobalStyles />
-    </Container>
-  );
-};
diff --git a/packages/app/src/app/components/CodeEditor/VSCode/workbench-theme.css b/packages/app/src/app/components/CodeEditor/VSCode/workbench-theme.css
deleted file mode 100644
index 157d3552c4d..00000000000
--- a/packages/app/src/app/components/CodeEditor/VSCode/workbench-theme.css
+++ /dev/null
@@ -1,241 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- *  Copyright (c) Microsoft Corporation. All rights reserved.
- *  Licensed under the MIT License. See License.txt in the project root for license information.
- *--------------------------------------------------------------------------------------------*/
-
-.monaco-workbench {
-  font-size: 13px;
-  line-height: 1.4em;
-  position: relative;
-  z-index: 1;
-  /* overflow: hidden; Removed for allowing menus to overlay eg. preview */
-
-  width: 100%;
-  height: 100%;
-}
-
-.monaco-workbench > .part {
-  position: absolute;
-  box-sizing: border-box;
-}
-
-.monaco-workbench
-  .part.editor
-  > .content
-  .editor-group-container
-  > .title
-  .tabs-container
-  > .tab.sizing-fit {
-  min-width: -moz-fit-content;
-}
-
-.monaco-font-aliasing-antialiased {
-  -webkit-font-smoothing: antialiased;
-}
-
-.monaco-font-aliasing-none {
-  -webkit-font-smoothing: none;
-}
-
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-  .monaco-font-aliasing-auto {
-    -webkit-font-smoothing: antialiased;
-  }
-}
-
-/* Taken from shell.css */
-
-/* .monaco-shell {
-  height: 100%;
-  width: 100%;
-  margin: 0;
-  padding: 0;
-  overflow: hidden;
-  font-size: 11px;
-  user-select: none;
-} */
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-/* .monaco-shell img {
-  border: 0;
-} */
-
-.monaco-shell label {
-  cursor: pointer;
-}
-
-.monaco-shell a {
-  text-decoration: none;
-}
-
-.monaco-shell a:active {
-  color: inherit;
-  background-color: inherit;
-}
-
-.monaco-shell a.plain {
-  color: inherit;
-  text-decoration: none;
-}
-
-.monaco-shell a.plain:hover,
-.monaco-shell a.plain.hover {
-  color: inherit;
-  text-decoration: none;
-}
-
-.monaco-shell input {
-  /* color: inherit; */
-  font-family: inherit;
-  /* font-size: 100%; */
-}
-
-.monaco-shell select {
-  font-family: inherit;
-}
-
-.monaco-shell .pointer {
-  cursor: pointer;
-}
-
-.monaco-shell .context-view {
-  -webkit-app-region: no-drag;
-}
-
-.monaco-shell .monaco-menu .monaco-action-bar.vertical {
-  padding: 0.5em 0;
-}
-
-.monaco-shell .monaco-menu .monaco-action-bar.vertical .action-menu-item {
-  height: 1.8em;
-}
-
-.monaco-shell
-  .monaco-menu
-  .monaco-action-bar.vertical
-  .action-label:not(.separator),
-.monaco-shell .monaco-menu .monaco-action-bar.vertical .keybinding {
-  font-size: inherit;
-  padding: 0 2em;
-}
-
-.monaco-shell .monaco-menu .monaco-action-bar.vertical .menu-item-check {
-  font-size: inherit;
-  width: 2em;
-}
-
-.monaco-shell .monaco-menu .monaco-action-bar.vertical .action-label.separator {
-  font-size: inherit;
-  padding: 0.2em 0 0 0;
-  margin-bottom: 0.2em;
-}
-
-.monaco-shell .monaco-menu .monaco-action-bar.vertical .submenu-indicator {
-  font-size: 60%;
-  padding: 0 1.8em;
-}
-
-.monaco-shell
-  .linux
-  .monaco-menu
-  .monaco-action-bar.vertical
-  .submenu-indicator {
-  height: 100%;
-  -webkit-mask-size: 10px 10px;
-  mask-size: 10px 10px;
-}
-
-.monaco-shell .monaco-menu .action-item {
-  cursor: default;
-}
-
-/* START Keyboard Focus Indication Styles */
-
-.monaco-shell [tabindex='0']:focus,
-.monaco-shell .synthetic-focus,
-.monaco-shell select:focus,
-.monaco-shell input[type='button']:focus,
-.monaco-shell input[type='text']:focus,
-.monaco-shell textarea:focus,
-.monaco-shell input[type='checkbox']:focus {
-  outline-width: 1px;
-  outline-style: solid;
-  outline-offset: -1px;
-  opacity: 1 !important;
-}
-
-.monaco-shell [tabindex='0']:active,
-.monaco-shell select:active,
-.monaco-shell input[type='button']:active,
-.monaco-shell input[type='checkbox']:active,
-.monaco-shell
-  .monaco-tree
-  .monaco-tree-row
-  .monaco-shell
-  .monaco-tree.focused.no-focused-item:active:before {
-  outline: 0 !important; /* fixes some flashing outlines from showing up when clicking */
-}
-
-.monaco-shell .mac select:focus {
-  border-color: transparent; /* outline is a square, but border has a radius, so we avoid this glitch when focused (https://github.com/Microsoft/vscode/issues/26045) */
-}
-
-.monaco-shell
-  .monaco-tree.focused
-  .monaco-tree-row.focused
-  [tabindex='0']:focus {
-  outline-width: 1px; /* higher contrast color for focusable elements in a row that shows focus feedback */
-  outline-style: solid;
-}
-
-.monaco-shell .monaco-tree.focused.no-focused-item:focus:before,
-.monaco-shell .monaco-list:not(.element-focused):focus:before {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 5; /* make sure we are on top of the tree items */
-  content: '';
-  pointer-events: none; /* enable click through */
-  outline: 1px solid; /* we still need to handle the empty tree or no focus item case */
-  outline-width: 1px;
-  outline-style: solid;
-  outline-offset: -1px;
-}
-
-.monaco-shell .synthetic-focus :focus {
-  outline: 0 !important; /* elements within widgets that draw synthetic-focus should never show focus */
-}
-
-.monaco-shell .monaco-inputbox.info.synthetic-focus,
-.monaco-shell .monaco-inputbox.warning.synthetic-focus,
-.monaco-shell .monaco-inputbox.error.synthetic-focus,
-.monaco-shell .monaco-inputbox.info input[type='text']:focus,
-.monaco-shell .monaco-inputbox.warning input[type='text']:focus,
-.monaco-shell .monaco-inputbox.error input[type='text']:focus {
-  outline: 0 !important; /* outline is not going well with decoration */
-}
-
-.monaco-shell .monaco-tree.focused:focus,
-.monaco-shell .monaco-list:focus {
-  outline: 0 !important; /* tree indicates focus not via outline but through the focused item */
-}
-
-/* CodeSandbox Change */
-.context-view.monaco-menu-container {
-  font-size: 0.75rem;
-}
-
-/* Fixes https://github.com/codesandbox/codesandbox-client/issues/3882 */
-.monaco-editor .parameter-hints-widget {
-  overflow-y: scroll;
-}
diff --git a/packages/app/src/app/components/CodeEditor/index.tsx b/packages/app/src/app/components/CodeEditor/index.tsx
deleted file mode 100644
index 305460db92c..00000000000
--- a/packages/app/src/app/components/CodeEditor/index.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-/* eslint-disable react/no-unused-state */
-import Tooltip from '@codesandbox/common/lib/components/Tooltip';
-import { getModulePath } from '@codesandbox/common/lib/sandbox/modules';
-import getDefinition from '@codesandbox/common/lib/templates';
-import getUI from '@codesandbox/common/lib/templates/configuration/ui';
-import React from 'react';
-import QuestionIcon from 'react-icons/lib/go/question';
-
-import { Icons } from './elements';
-import { Props } from './types'; // eslint-disable-line
-import { VSCode } from './VSCode';
-
-type State = {
-  showConfigUI: boolean;
-};
-
-export class CodeEditor extends React.PureComponent<
-  Props & {
-    editor?: 'vscode' | 'monaco' | 'codemirror';
-    style?: React.CSSProperties;
-  },
-  State
-> {
-  state = {
-    showConfigUI: true,
-  };
-
-  toggleConfigUI = () => {
-    this.setState(state => ({ showConfigUI: !state.showConfigUI }));
-  };
-
-  render() {
-    const { props } = this;
-
-    const { isModuleSynced, sandbox, currentModule: module } = props;
-
-    const template = getDefinition(sandbox.template);
-    const modulePath = getModulePath(
-      sandbox.modules,
-      sandbox.directories,
-      module.id
-    );
-    const config = template.configurationFiles[modulePath];
-
-    return (
-      <div
-        style={{
-          height: props.height || '100%',
-          width: props.width || '100%',
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-          ...props.style,
-        }}
-      >
-        {!isModuleSynced(module.shortid) && module.title === 'index.html' && (
-          <Icons>
-            You may have to save this file and refresh the preview to see
-            changes
-          </Icons>
-        )}
-        {config && getUI(config.type) ? (
-          <Icons>
-            {config.partialSupportDisclaimer ? (
-              <Tooltip
-                placement="bottom"
-                content={config.partialSupportDisclaimer}
-                style={{
-                  display: 'flex',
-                  'align-items': 'center',
-                }}
-              >
-                Partially Supported Config{' '}
-                <QuestionIcon style={{ marginLeft: '.5rem' }} />
-              </Tooltip>
-            ) : (
-              <div>Supported Configuration</div>
-            )}
-          </Icons>
-        ) : null}
-        <VSCode {...props} />
-      </div>
-    );
-  }
-}
diff --git a/packages/app/src/app/components/Create/CreateBox.tsx b/packages/app/src/app/components/Create/CreateBox.tsx
index bf3361d4335..67d66a7abfc 100644
--- a/packages/app/src/app/components/Create/CreateBox.tsx
+++ b/packages/app/src/app/components/Create/CreateBox.tsx
@@ -12,8 +12,6 @@ import React, { useState, useEffect } from 'react';
 import track from '@codesandbox/common/lib/utils/analytics';
 import { sandboxUrl } from '@codesandbox/common/lib/utils/url-generator';
 
-import { useBetaSandboxEditor } from 'app/hooks/useBetaSandboxEditor';
-
 import { ModalContentProps } from 'app/pages/common/Modals';
 import { useGlobalPersistedState } from 'app/hooks/usePersistedState';
 
@@ -143,13 +141,10 @@ export const CreateBox: React.FC<CreateBoxProps> = ({
     }
   }, [searchQuery]);
 
-  const [hasBetaEditorExperiment] = useBetaSandboxEditor();
-
   const selectTemplate = (sandbox: SandboxToFork) => {
     if (!hasLogIn) {
       // Open template in editor for anonymous users
-      window.location.href =
-        sandbox.editorUrl || sandboxUrl(sandbox, hasBetaEditorExperiment);
+      window.location.href = sandbox.editorUrl || sandboxUrl(sandbox);
       return;
     }
 
@@ -163,8 +158,7 @@ export const CreateBox: React.FC<CreateBoxProps> = ({
   };
 
   const openTemplate = (sandbox: SandboxToFork) => {
-    const url =
-      sandbox.editorUrl || sandboxUrl(sandbox, hasBetaEditorExperiment);
+    const url = sandbox.editorUrl || sandboxUrl(sandbox);
     window.open(url, '_blank');
 
     track(`Create - Open template`, {
@@ -230,7 +224,7 @@ export const CreateBox: React.FC<CreateBoxProps> = ({
 
         <ModalBody>
           <ModalContent
-            css={{
+            style={{
               overflow: 'visible',
               width: '100%',
               boxSizing: 'border-box',
@@ -385,7 +379,6 @@ const CreateBoxConfig: React.FC<{
   const [collectionId, setCollectionId] = useState<string | undefined>(
     initialCollectionId
   );
-  const [hasBetaEditorExperiment] = useBetaSandboxEditor();
   const [autoLaunchVSCode] = useGlobalPersistedState(
     'AUTO_LAUNCH_VSCODE',
     false
@@ -414,13 +407,12 @@ const CreateBoxConfig: React.FC<{
 
     setLoading(true);
 
-    actions.editor
-      .forkExternalSandbox({
+    actions.dashboard
+      .forkSandbox({
         sandboxId,
         openInNewWindow: false,
         openInVSCode,
         autoLaunchVSCode,
-        hasBetaEditorExperiment,
         customVMTier,
         redirectAfterFork: !isStandalone,
         body: {
@@ -438,7 +430,7 @@ const CreateBoxConfig: React.FC<{
               data: {
                 id: forkedSandbox.id,
                 alias: forkedSandbox.alias,
-                url: sandboxUrl(forkedSandbox, hasBetaEditorExperiment),
+                url: sandboxUrl(forkedSandbox),
               },
             },
             '*'
diff --git a/packages/app/src/app/components/Create/CreateRepoFiles.tsx b/packages/app/src/app/components/Create/CreateRepoFiles.tsx
index 30cc74054a4..d37abae7d4e 100644
--- a/packages/app/src/app/components/Create/CreateRepoFiles.tsx
+++ b/packages/app/src/app/components/Create/CreateRepoFiles.tsx
@@ -7,7 +7,7 @@ export function CreateRepoFiles() {
   useEffect(() => {
     window.addEventListener('message', event => {
       if (event.data.type === 'create-repo-files') {
-        actions.git
+        actions
           .createRepoFiles(event.data.sandbox)
           .then(data => {
             window.parent.postMessage(
diff --git a/packages/app/src/app/components/Create/ImportRepository/components/AccountSelect.tsx b/packages/app/src/app/components/Create/ImportRepository/components/AccountSelect.tsx
index 6cd24db3cf7..8f9a4a785e4 100644
--- a/packages/app/src/app/components/Create/ImportRepository/components/AccountSelect.tsx
+++ b/packages/app/src/app/components/Create/ImportRepository/components/AccountSelect.tsx
@@ -26,7 +26,7 @@ export const AccountSelect = ({
     <>
       <StyledMenuButton
         {...menu}
-        css={{ background: variant === 'ghost' ? 'transparent' : '#252525' }}
+        style={{ background: variant === 'ghost' ? 'transparent' : '#252525' }}
       >
         <Stack gap={2} align="center">
           <Icon name="github" />
diff --git a/packages/app/src/app/components/Create/ImportRepository/steps/ConfigureRepo.tsx b/packages/app/src/app/components/Create/ImportRepository/steps/ConfigureRepo.tsx
index 06902b0bf47..400334d5405 100644
--- a/packages/app/src/app/components/Create/ImportRepository/steps/ConfigureRepo.tsx
+++ b/packages/app/src/app/components/Create/ImportRepository/steps/ConfigureRepo.tsx
@@ -186,7 +186,7 @@ export const ConfigureRepo: React.FC<ConfigureRepoProps> = ({
           </Text>
 
           <Select
-            css={{ height: '32px' }}
+            style={{ height: '32px' }}
             value={selectedTier}
             disabled={availableTiers.length === 0}
             onChange={e => setSelectedTier(parseInt(e.target.value, 10))}
diff --git a/packages/app/src/app/components/Create/ImportRepository/steps/ForkRepo.tsx b/packages/app/src/app/components/Create/ImportRepository/steps/ForkRepo.tsx
index 020f86b6b6a..e55a45a89c8 100644
--- a/packages/app/src/app/components/Create/ImportRepository/steps/ForkRepo.tsx
+++ b/packages/app/src/app/components/Create/ImportRepository/steps/ForkRepo.tsx
@@ -222,7 +222,7 @@ export const ForkRepo: React.FC<ForkRepoProps> = ({
           </Text>
 
           <Select
-            css={{ height: '32px' }}
+            style={{ height: '32px' }}
             value={selectedTier}
             disabled
             onChange={e => setSelectedTier(parseInt(e.target.value, 10))}
diff --git a/packages/app/src/app/components/Create/ImportRepository/steps/SearchInOrganizations.tsx b/packages/app/src/app/components/Create/ImportRepository/steps/SearchInOrganizations.tsx
index 3e7ee70881e..2009a09b4b3 100644
--- a/packages/app/src/app/components/Create/ImportRepository/steps/SearchInOrganizations.tsx
+++ b/packages/app/src/app/components/Create/ImportRepository/steps/SearchInOrganizations.tsx
@@ -187,7 +187,7 @@ export const SearchInOrganizations: React.FC<SearchInOrganizationsProps> = ({
           No repository matching the search. Please double check the repository
           name or try the{' '}
           <UnstyledButtonLink
-            css={{ color: 'inherit', textDecoration: 'underline' }}
+            style={{ color: 'inherit', textDecoration: 'underline' }}
             onClick={onFindByURLClicked}
           >
             Find by URL
diff --git a/packages/app/src/app/components/Create/TemplateCard.tsx b/packages/app/src/app/components/Create/TemplateCard.tsx
index 72629a88a4b..ef5453323a6 100644
--- a/packages/app/src/app/components/Create/TemplateCard.tsx
+++ b/packages/app/src/app/components/Create/TemplateCard.tsx
@@ -31,7 +31,7 @@ export const TemplateCard = ({
   return (
     <TemplateButton
       title={sandboxTitle}
-      css={{ padding }}
+      style={{ padding }}
       type="button"
       onClick={evt => {
         if (disabled) {
diff --git a/packages/app/src/app/components/Create/elements.tsx b/packages/app/src/app/components/Create/elements.tsx
index 29d37d1ec1e..6d58bffd132 100644
--- a/packages/app/src/app/components/Create/elements.tsx
+++ b/packages/app/src/app/components/Create/elements.tsx
@@ -1,8 +1,9 @@
 import styled, { keyframes } from 'styled-components';
 import React, { ReactNode } from 'react';
 import { Tab as BaseTab, TabList, TabPanel, TabStateReturn } from 'reakit/Tab';
+import { Element } from '@codesandbox/components';
 
-export const Container = styled.div`
+export const Container = styled(Element)`
   height: 600px;
   overflow: hidden;
   border-radius: 4px;
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons/elements.ts b/packages/app/src/app/components/EntryIcons/elements.ts
similarity index 100%
rename from packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons/elements.ts
rename to packages/app/src/app/components/EntryIcons/elements.ts
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons/getIconURL.ts b/packages/app/src/app/components/EntryIcons/getIconURL.ts
similarity index 100%
rename from packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons/getIconURL.ts
rename to packages/app/src/app/components/EntryIcons/getIconURL.ts
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons/index.tsx b/packages/app/src/app/components/EntryIcons/index.tsx
similarity index 100%
rename from packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons/index.tsx
rename to packages/app/src/app/components/EntryIcons/index.tsx
diff --git a/packages/app/src/app/components/GitProgress/elements.ts b/packages/app/src/app/components/GitProgress/elements.ts
deleted file mode 100644
index 03302724c04..00000000000
--- a/packages/app/src/app/components/GitProgress/elements.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import styled, { css, keyframes } from 'styled-components';
-import delayInEffect from '@codesandbox/common/lib/utils/animation/delay-effect';
-import { OpaqueLogo as BaseOpaqueLogo } from 'app/components/OpaqueLogo';
-import { GitHubLogo as BaseGitHubLogo } from 'app/components/GitHubLogo';
-import { Cube as BaseCube } from '../Cube';
-
-export const DeployAnimationContainer = styled.div<{ deploying: boolean }>`
-  ${({ deploying }) => css`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 3rem;
-    ${deploying && delayInEffect(0, false)};
-  `}
-`;
-
-export const GitHubLogo = styled(BaseGitHubLogo)`
-  position: absolute;
-  color: white;
-  font-size: 4rem;
-  transform: translateY(10px) translateX(80px);
-`;
-
-const cubeAnimation = keyframes`
-  0% {
-    transform: translateY(20px) translateX(-100px) scale(0, 0);
-  }
-
-  20% {
-    transform: translateY(20px) translateX(-100px) scale(1, 1);
-  }
-
-  80% {
-    transform: translateY(20px) translateX(80px) scale(1, 1);
-  }
-
-  100% {
-    transform: translateY(20px) translateX(80px) scale(1, 1);
-  }
-`;
-
-export const Cube = styled(BaseCube)<{ delay: number }>`
-  ${({ delay }) => css`
-    position: absolute;
-    animation: ${cubeAnimation} 2s ease-in infinite;
-    animation-delay: ${delay * 0.5}s;
-    transform: translateY(20px) translateX(-100px) scale(0, 0);
-  `}
-`;
-
-export const OpaqueLogo = styled(BaseOpaqueLogo)`
-  position: absolute;
-  z-index: 10;
-  transform: translateY(15px) translateX(-100px);
-`;
diff --git a/packages/app/src/app/components/GitProgress/index.tsx b/packages/app/src/app/components/GitProgress/index.tsx
deleted file mode 100644
index 192ee801eae..00000000000
--- a/packages/app/src/app/components/GitProgress/index.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import React, { FunctionComponent, ReactNode } from 'react';
-import { Element, Text } from '@codesandbox/components';
-import {
-  Cube,
-  DeployAnimationContainer,
-  GitHubLogo,
-  OpaqueLogo,
-} from './elements';
-
-type Props = {
-  message: string;
-  result: ReactNode;
-};
-export const GitProgress: FunctionComponent<Props> = ({ message, result }) => (
-  <Element padding={4} paddingTop={6}>
-    {result ? (
-      <Text marginBottom={4} size={3} block>
-        {result}
-      </Text>
-    ) : (
-      <>
-        <DeployAnimationContainer deploying>
-          <OpaqueLogo height={70} width={70} />
-
-          {[0, 1, 2, 3].map(i => (
-            <Cube delay={i} key={i} size={20} />
-          ))}
-
-          <GitHubLogo />
-        </DeployAnimationContainer>
-        <Text align="center" weight="bold" block size={4} marginTop={4}>
-          {message}
-        </Text>
-      </>
-    )}
-  </Element>
-);
diff --git a/packages/app/src/app/components/Markdown/Code.tsx b/packages/app/src/app/components/Markdown/Code.tsx
deleted file mode 100644
index 57540c5c7f6..00000000000
--- a/packages/app/src/app/components/Markdown/Code.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import React from 'react';
-import Highlight, { defaultProps } from 'prism-react-renderer';
-import { Element } from '@codesandbox/components';
-import css from '@styled-system/css';
-import { useAppState } from 'app/overmind';
-import { withTheme } from 'styled-components';
-import { makeTheme } from '@codesandbox/common/lib/utils/makeTheme';
-
-export const Code = withTheme(({ value, language, theme }) => {
-  const state = useAppState();
-
-  const defaultLanguage = () => {
-    const template = state.editor.currentSandbox.template;
-    if (template === 'create-react-app') {
-      return 'jsx';
-    }
-    return 'js';
-  };
-  return value ? (
-    <Highlight
-      {...defaultProps}
-      code={value}
-      language={language || defaultLanguage()}
-      // @ts-ignore
-      theme={makeTheme(theme.vscodeTheme)}
-    >
-      {({ className, style, tokens, getLineProps, getTokenProps }) => (
-        <Element
-          as="pre"
-          paddingX={4}
-          paddingY={2}
-          marginY={2}
-          className={className}
-          style={style}
-          css={css({
-            fontSize: 3,
-            whiteSpace: 'pre-wrap',
-            maxHeight: 400,
-            overflow: 'scroll',
-            fontFamily: "'MonoLisa', menlo, monospace",
-
-            '*': {
-              wordBreak: 'break-all',
-            },
-          })}
-        >
-          {tokens.map((line, i) => (
-            <Element {...getLineProps({ line, key: i })}>
-              {line.map((token, key) => (
-                <Element as="span" {...getTokenProps({ token, key })} />
-              ))}
-            </Element>
-          ))}
-        </Element>
-      )}
-    </Highlight>
-  ) : null;
-});
diff --git a/packages/app/src/app/components/Markdown/Image.tsx b/packages/app/src/app/components/Markdown/Image.tsx
deleted file mode 100644
index f0ca606cd92..00000000000
--- a/packages/app/src/app/components/Markdown/Image.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import React, { useState } from 'react';
-import { useAppState } from 'app/overmind';
-import Modal from 'react-modal';
-import { Text, Element, Button, IconButton } from '@codesandbox/components';
-import css from '@styled-system/css';
-
-export const Image: React.FC<{
-  src: string;
-  alt: string;
-  ignorePrivateSandboxRestriction?: boolean;
-}> = props => {
-  const state = useAppState();
-  const [modalOpen, setModalOpen] = useState(false);
-  const privateSandbox =
-    state.editor.currentSandbox.privacy === 1 ||
-    state.editor.currentSandbox.privacy === 2;
-  return props.ignorePrivateSandboxRestriction || privateSandbox ? (
-    <>
-      <Button
-        padding={0}
-        margin={0}
-        marginTop={2}
-        variant="link"
-        onClick={() => setModalOpen(true)}
-        css={css({
-          maxWidth: '100%',
-          maxHeight: '100%',
-          border: 'none',
-          height: 'auto',
-        })}
-      >
-        <img
-          src={props.src}
-          alt={props.alt}
-          css={css({
-            maxWidth: '100%',
-            borderRadius: 'medium',
-          })}
-        />
-      </Button>
-      <Modal
-        isOpen={modalOpen}
-        style={{
-          content: {
-            border: 'none',
-            padding: 0,
-            background: 'transparent',
-            top: '50%',
-            left: '50%',
-            right: 'auto',
-            bottom: 'auto',
-            marginRight: '-50%',
-            transform: 'translate(-50%, -50%)',
-          },
-          overlay: {
-            zIndex: 10,
-            backgroundColor: 'rgba(0, 0, 0, 0.4)',
-          },
-        }}
-        contentLabel={props.alt}
-        onRequestClose={() => setModalOpen(false)}
-      >
-        <IconButton
-          name="cross"
-          size={10}
-          title="Close Modal"
-          onClick={() => setModalOpen(false)}
-          css={{
-            position: 'absolute',
-            right: 8,
-            top: 8,
-            color: 'white',
-            backgroundColor: 'rgba(0, 0, 0, 0.4)',
-          }}
-        />
-        <img
-          {...props}
-          alt={props.alt}
-          css={css({
-            maxWidth: '100%',
-            borderRadius: 'large',
-            maxHeight: '80vh',
-            border: '1px solid #262626',
-          })}
-        />
-      </Modal>
-    </>
-  ) : (
-    <Element
-      paddingY={4}
-      marginY={2}
-      css={css({
-        backgroundColor: 'sideBar.border',
-        borderRadius: 'small',
-      })}
-    >
-      <Text size={3} variant="muted" block align="center">
-        Images are not shown in public sandboxes
-      </Text>
-    </Element>
-  );
-};
diff --git a/packages/app/src/app/components/Markdown/InlineCode.tsx b/packages/app/src/app/components/Markdown/InlineCode.tsx
deleted file mode 100644
index d6a376e4e09..00000000000
--- a/packages/app/src/app/components/Markdown/InlineCode.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react';
-import { Text, Element } from '@codesandbox/components';
-import css from '@styled-system/css';
-
-export const InlineCode = props => (
-  <Element
-    as="span"
-    css={css({
-      backgroundColor: 'grays.200',
-      paddingX: '2px',
-      borderRadius: 'small',
-    })}
-  >
-    <Text
-      css={css({
-        color: 'reds.500',
-      })}
-      size={3}
-      as="code"
-    >
-      {props.children}
-    </Text>
-  </Element>
-);
diff --git a/packages/app/src/app/components/Markdown/Link.tsx b/packages/app/src/app/components/Markdown/Link.tsx
deleted file mode 100644
index 03445cd39fe..00000000000
--- a/packages/app/src/app/components/Markdown/Link.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import { Button, Link, Text } from '@codesandbox/components';
-import css from '@styled-system/css';
-import { useAppState, useActions } from 'app/overmind';
-import React from 'react';
-
-export const LinkElement = ({ href, children, ...props }) => {
-  let commentId = null;
-  const state = useAppState();
-  const actions = useActions();
-  const { id, alias } = state.editor.currentSandbox;
-
-  try {
-    commentId = new URLSearchParams(new URL(href).search).get('comment');
-  } catch {
-    commentId = null;
-  }
-
-  if (!children.length) {
-    return <Text {...props}>{href}</Text>;
-  }
-
-  if (href.startsWith('user://')) {
-    return (
-      <Link
-        css={css({
-          display: 'inline',
-          width: 'auto',
-          padding: 0,
-          textAlign: 'left',
-          color: 'button.background',
-          fontSize: 3,
-        })}
-        href={`/u/${children[0].props.children.substr(1)}`}
-        target="_blank"
-        onClick={event => event.stopPropagation()}
-      >
-        {children[0].props.children}
-      </Link>
-    );
-  }
-
-  if (
-    href.includes(window.location.href) &&
-    (href.includes(id) || href.includes(alias)) &&
-    commentId
-  ) {
-    return (
-      <Button
-        variant="link"
-        css={css({
-          display: 'inline',
-          width: 'auto',
-          padding: 0,
-          textAlign: 'left',
-        })}
-        onClick={() => actions.comments.selectComment({ commentId })}
-      >
-        {children[0].props.children}
-      </Button>
-    );
-  }
-
-  if (!href.includes('codesandbox')) {
-    return (
-      <Link
-        href={href}
-        target="_blank"
-        rel="noopener noreferrer ugc"
-        {...props}
-      >
-        {children[0].props.children}
-      </Link>
-    );
-  }
-
-  return (
-    <Link href={href} {...props}>
-      {children[0].props.children}
-    </Link>
-  );
-};
diff --git a/packages/app/src/app/components/Markdown/index.tsx b/packages/app/src/app/components/Markdown/index.tsx
deleted file mode 100644
index fbd09894d73..00000000000
--- a/packages/app/src/app/components/Markdown/index.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import { Element, Link, Text } from '@codesandbox/components';
-import css from '@styled-system/css';
-import React from 'react';
-import ReactMarkdown from 'react-markdown';
-
-import { Code } from './Code';
-import { Image } from './Image';
-import { InlineCode } from './InlineCode';
-import { LinkElement } from './Link';
-
-export const Markdown = ({ source }) => (
-  <Element
-    css={css({
-      'ul, ol': {
-        paddingLeft: 0,
-        fontSize: 13,
-      },
-      'ol li': {
-        counterIncrement: 'counter',
-      },
-      'ol li::before': {
-        color: 'mutedForeground',
-        content: "counter(counter) '. '",
-      },
-      p: {
-        margin: 0,
-      },
-      li: {
-        listStyle: 'none',
-      },
-      'li:before': {
-        content: "'•'",
-        color: 'mutedForeground',
-        paddingRight: '0.5em',
-      },
-    })}
-  >
-    <ReactMarkdown
-      transformLinkUri={null}
-      renderers={{
-        text: ({ children }) => (
-          <Text
-            variant="muted"
-            size={3}
-            css={css({
-              wordBreak: 'break-word',
-            })}
-          >
-            {children}
-          </Text>
-        ),
-        heading: ({ children }) => (
-          <Text block variant="muted" size={3}>
-            {children}
-          </Text>
-        ),
-        blockquote: ({ children }) => (
-          <Text
-            block
-            variant="muted"
-            size={3}
-            css={css({
-              p: {
-                display: 'inline',
-              },
-              ':before': { content: 'open-quote' },
-              ':after': { content: 'close-quote' },
-            })}
-          >
-            {children}
-          </Text>
-        ),
-        code: Code,
-        link: LinkElement,
-        linkReference: props => <Link {...props}>{props.children}</Link>,
-        image: Image,
-        imageReference: Image,
-        thematicBreak: () => null,
-        inlineCode: InlineCode,
-      }}
-    >
-      {source ? source.replace(/\n/gi, '&nbsp;\n\n') : source}
-    </ReactMarkdown>
-  </Element>
-);
diff --git a/packages/app/src/app/components/Notifications/Skeleton.js b/packages/app/src/app/components/Notifications/Skeleton.js
index e92b16d7e47..7f5e36c55e5 100644
--- a/packages/app/src/app/components/Notifications/Skeleton.js
+++ b/packages/app/src/app/components/Notifications/Skeleton.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import css from '@styled-system/css';
 import { ListItem, Stack } from '@codesandbox/components';
-import { SkeletonTextBlock } from 'app/pages/Sandbox/Editor/Skeleton/elements';
+import { SkeletonTextBlock } from 'app/components/Skeleton/elements';
 
 const NotificationSkeleton = () => (
   <ListItem
diff --git a/packages/app/src/app/components/Preview/DevTools/TerminalUpgrade/elements.ts b/packages/app/src/app/components/Preview/DevTools/TerminalUpgrade/elements.ts
deleted file mode 100644
index f24445f3241..00000000000
--- a/packages/app/src/app/components/Preview/DevTools/TerminalUpgrade/elements.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import styled from 'styled-components';
-
-export const StyledTitle = styled.div`
-  display: flex;
-  align-items: center;
-  font-weight: 600;
-  font-size: 1rem;
-  color: ${props =>
-    props.theme.light ? 'rgba(0, 0, 0, 0.4)' : 'rgba(255, 255, 255, 0.4)'};
-  width: 100%;
-  padding: 1rem;
-  border-bottom: 2px solid;
-  border-color: ${props =>
-    props.theme.light ? 'rgba(0, 0, 0, 0.3)' : 'rgba(255, 255, 255, 0.3)'};
-`;
diff --git a/packages/app/src/app/components/Preview/DevTools/TerminalUpgrade/index.tsx b/packages/app/src/app/components/Preview/DevTools/TerminalUpgrade/index.tsx
deleted file mode 100644
index 08d68602f3c..00000000000
--- a/packages/app/src/app/components/Preview/DevTools/TerminalUpgrade/index.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import { Button, ThemeProvider, Text, Stack } from '@codesandbox/components';
-import React from 'react';
-import themeType from '@codesandbox/common/lib/theme';
-
-import { withTheme } from 'styled-components';
-import { useUpgradeFromV1ToV2 } from 'app/hooks/useUpgradeFromV1ToV2';
-import { DevToolProps } from '..';
-import { StyledTitle } from './elements';
-
-type StyledProps = DevToolProps & {
-  theme: typeof themeType & { light: boolean };
-};
-
-export const TerminalUpgradeComponent: React.FC<StyledProps> = ({
-  hidden,
-  theme,
-}) => {
-  const { perform, loading, canConvert } = useUpgradeFromV1ToV2('Terminal Tab');
-
-  if (hidden) {
-    return null;
-  }
-
-  return (
-    <ThemeProvider theme={theme.vscodeTheme}>
-      <Stack
-        direction="vertical"
-        css={{
-          width: '100%',
-        }}
-      >
-        <StyledTitle>Terminal</StyledTitle>
-        <Stack
-          direction="vertical"
-          css={{
-            padding: '1rem',
-          }}
-          gap={4}
-        >
-          <Text>
-            To use the terminal, you need to upgrade your Sandbox into a Devbox.
-          </Text>
-          <Text>
-            Devboxes are an improved coding experience that runs your code in
-            the cloud. They bring new languages, servers, databases, a built-in
-            AI assistant, and much more. See a preview below.
-          </Text>
-          <img alt="" src="/static/img/terminal_upgrade_screenshot.png" />
-          <Text>
-            {canConvert
-              ? `Do you want to convert it into a Devbox?`
-              : `Do you want to fork into a Devbox?`}
-          </Text>
-          <Stack
-            direction="horizontal"
-            gap={4}
-            css={{
-              justifyContent: 'start',
-            }}
-          >
-            <Button
-              onClick={perform}
-              loading={loading}
-              css={{
-                width: 'inherit',
-                paddingLeft: '1rem',
-                paddingRight: '1rem',
-              }}
-            >
-              Yes, {canConvert ? 'convert' : 'fork and convert'}
-            </Button>
-            <Button
-              as="a"
-              variant="link"
-              style={{
-                width: 'inherit',
-                display: 'flex',
-                alignItems: 'center',
-                backgroundColor: 'transparent',
-                color: 'mutedForeground',
-              }}
-              target="_blank"
-              rel="noreferrer noopener"
-              href="https://codesandbox.io/docs/learn/sandboxes/overview?tab=cloud"
-            >
-              Learn more
-            </Button>
-          </Stack>
-        </Stack>
-      </Stack>
-    </ThemeProvider>
-  );
-};
-
-export const terminalUpgrade = {
-  id: 'codesandbox.terminalUpgrade',
-  title: 'Terminal',
-  Content: withTheme(TerminalUpgradeComponent),
-  actions: [],
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Skeleton/elements.ts b/packages/app/src/app/components/Skeleton/elements.ts
similarity index 96%
rename from packages/app/src/app/pages/Sandbox/Editor/Skeleton/elements.ts
rename to packages/app/src/app/components/Skeleton/elements.ts
index eba1163d2dc..082d4bc068b 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Skeleton/elements.ts
+++ b/packages/app/src/app/components/Skeleton/elements.ts
@@ -1,12 +1,13 @@
 import styled, { css, keyframes } from 'styled-components';
 import Color from 'color';
+import { Element } from '@codesandbox/components';
 
 const pulse = keyframes`
   0% { background-position: 100% 50%; }
   100% { background-position: -100% 50%; }
 `;
 
-export const SkeletonTextBlock = styled.div(props => {
+export const SkeletonTextBlock = styled(Element)(props => {
   let color = props.theme.colors?.sideBar.border || '#242424';
   const themeType = props.theme.vscodeTheme.type;
 
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Skeleton/index.tsx b/packages/app/src/app/components/Skeleton/index.tsx
similarity index 100%
rename from packages/app/src/app/pages/Sandbox/Editor/Skeleton/index.tsx
rename to packages/app/src/app/components/Skeleton/index.tsx
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Content/Tabs/ModuleTab/elements.js b/packages/app/src/app/components/Tabs/ModuleTab/elements.js
similarity index 100%
rename from packages/app/src/app/pages/Sandbox/Editor/Content/Tabs/ModuleTab/elements.js
rename to packages/app/src/app/components/Tabs/ModuleTab/elements.js
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Content/Tabs/ModuleTab/index.js b/packages/app/src/app/components/Tabs/ModuleTab/index.js
similarity index 95%
rename from packages/app/src/app/pages/Sandbox/Editor/Content/Tabs/ModuleTab/index.js
rename to packages/app/src/app/components/Tabs/ModuleTab/index.js
index 44c0e1045a0..529003012c3 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Content/Tabs/ModuleTab/index.js
+++ b/packages/app/src/app/components/Tabs/ModuleTab/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import EntryIcons from 'app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons';
+import EntryIcons from 'app/components/EntryIcons';
 // eslint-disable-next-line import/extensions
 import { getType } from 'app/utils/get-type.ts';
 
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Content/Tabs/Tab/elements.ts b/packages/app/src/app/components/Tabs/Tab/elements.ts
similarity index 100%
rename from packages/app/src/app/pages/Sandbox/Editor/Content/Tabs/Tab/elements.ts
rename to packages/app/src/app/components/Tabs/Tab/elements.ts
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Content/Tabs/Tab/index.js b/packages/app/src/app/components/Tabs/Tab/index.js
similarity index 100%
rename from packages/app/src/app/pages/Sandbox/Editor/Content/Tabs/Tab/index.js
rename to packages/app/src/app/components/Tabs/Tab/index.js
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Content/Tabs/TabContainer/index.js b/packages/app/src/app/components/Tabs/TabContainer/index.js
similarity index 100%
rename from packages/app/src/app/pages/Sandbox/Editor/Content/Tabs/TabContainer/index.js
rename to packages/app/src/app/components/Tabs/TabContainer/index.js
diff --git a/packages/app/src/app/components/TeamAvatar/TeamAvatar.tsx b/packages/app/src/app/components/TeamAvatar/TeamAvatar.tsx
index 09073e20530..2d3b2344564 100644
--- a/packages/app/src/app/components/TeamAvatar/TeamAvatar.tsx
+++ b/packages/app/src/app/components/TeamAvatar/TeamAvatar.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Stack, Text } from '@codesandbox/components';
+import { Element, Stack, Text } from '@codesandbox/components';
 import css from '@styled-system/css';
 
 const backgrounds = [
@@ -42,7 +42,8 @@ export const TeamAvatar = ({
   const avatarSize = size === 'bigger' ? '55px' : '24px';
 
   return avatar ? (
-    <img
+    <Element
+      as="img"
       css={css({
         width: avatarSize,
         height: avatarSize,
diff --git a/packages/app/src/app/components/UploadProgress/UploadProgress.tsx b/packages/app/src/app/components/UploadProgress/UploadProgress.tsx
deleted file mode 100644
index a5a7e8a0be2..00000000000
--- a/packages/app/src/app/components/UploadProgress/UploadProgress.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import React from 'react';
-import { Element, Text } from '@codesandbox/components';
-import css from '@styled-system/css';
-import {
-  UploadAnimationContainer,
-  StyledLocalLogo,
-  StyledCube,
-  StyledLogo,
-} from './elements';
-
-interface IUploadProgressProps {
-  result?: string;
-  message: string;
-}
-
-export const UploadProgress: React.FC<IUploadProgressProps> = ({
-  message,
-  result,
-}) => (
-  <Element padding={4} paddingTop={6}>
-    {result ? (
-      <Text marginBottom={4} size={3} block>
-        {result}
-      </Text>
-    ) : (
-      <>
-        <UploadAnimationContainer>
-          <StyledLocalLogo
-            css={css({
-              backgroundColor: 'sideBar.background',
-              color: 'sideBar.foreground',
-            })}
-          />
-          {[0, 1, 2, 3].map(i => (
-            <StyledCube key={i} delay={i} size={20} />
-          ))}
-          <StyledLogo width={70} height={70} />
-        </UploadAnimationContainer>
-        <Text align="center" weight="bold" block size={4} marginTop={4}>
-          {message}
-        </Text>
-      </>
-    )}
-  </Element>
-);
diff --git a/packages/app/src/app/components/UploadProgress/elements.ts b/packages/app/src/app/components/UploadProgress/elements.ts
deleted file mode 100644
index b06f159d209..00000000000
--- a/packages/app/src/app/components/UploadProgress/elements.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import styled, { css, keyframes } from 'styled-components';
-import LocalLogo from 'react-icons/lib/md/laptop';
-import delayInEffect from '@codesandbox/common/lib/utils/animation/delay-effect';
-import { OpaqueLogo } from 'app/components/OpaqueLogo';
-import { Cube } from '../Cube';
-
-export const UploadAnimationContainer = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 3rem;
-  ${delayInEffect(0, false)}
-`;
-
-export const StyledLocalLogo = styled(LocalLogo)`
-  position: absolute;
-  z-index: 20;
-  font-size: 4rem;
-  transform: translateY(15px) translateX(-100px);
-`;
-
-const cubeAnimation = keyframes`
-0% {
-  transform: translateY(20px) translateX(-100px) scale(0, 0);
-}
-
-20% {
-  transform: translateY(20px) translateX(-100px) scale(1, 1);
-}
-
-80% {
-  transform: translateY(20px) translateX(80px) scale(1, 1);
-}
-
-100% {
-  transform: translateY(20px) translateX(80px) scale(1, 1);
-}
-`;
-
-export const StyledCube = styled(Cube)<{ delay: number }>`
-  ${({ delay }) => css`
-    position: absolute;
-    animation: ${cubeAnimation} 2s ease-in infinite;
-    animation-delay: ${delay * 0.5}s;
-    transform: translateY(20px) translateX(-100px) scale(0, 0);
-  `}
-`;
-
-export const StyledLogo = styled(OpaqueLogo)`
-  position: absolute;
-  z-index: 10;
-  transform: translateY(10px) translateX(80px);
-`;
diff --git a/packages/app/src/app/components/UploadProgress/index.ts b/packages/app/src/app/components/UploadProgress/index.ts
deleted file mode 100644
index 4881bdcf3c0..00000000000
--- a/packages/app/src/app/components/UploadProgress/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { UploadProgress } from './UploadProgress';
diff --git a/packages/app/src/app/components/UserSearchInput/UserSearchInput.tsx b/packages/app/src/app/components/UserSearchInput/UserSearchInput.tsx
deleted file mode 100644
index 020039234b8..00000000000
--- a/packages/app/src/app/components/UserSearchInput/UserSearchInput.tsx
+++ /dev/null
@@ -1,163 +0,0 @@
-import React, { useEffect } from 'react';
-import Downshift, { DownshiftProps } from 'downshift';
-import css from '@styled-system/css';
-import { Input, List, ListAction } from '@codesandbox/components';
-import { useAppState } from 'app/overmind';
-
-type User = {
-  id: string;
-  username: string;
-  avatar_url: string;
-};
-
-interface IUserAutoComplete {
-  inputValue: string;
-  allowSelf?: boolean;
-  children: (answer: {
-    users: User[];
-    loading: boolean;
-    error: Error | null;
-  }) => JSX.Element;
-}
-
-const UserAutoComplete = ({
-  inputValue,
-  children,
-  allowSelf = false,
-}: IUserAutoComplete) => {
-  const [users, setUsers] = React.useState<User[]>([]);
-  const [loading, setLoading] = React.useState<boolean>(true);
-  const [error, setError] = React.useState<Error | null>(null);
-  const { user } = useAppState();
-
-  useEffect(() => {
-    setLoading(true);
-    setError(null);
-
-    let timeoutId: number;
-
-    if (inputValue.length > 2 && !inputValue.includes('@')) {
-      // Small debounce
-      timeoutId = window.setTimeout(() => {
-        fetch(`/api/v1/users/search?username=${inputValue}`)
-          .then(x => x.json())
-          .then(x => {
-            const fetchedUsers = allowSelf
-              ? x
-              : x.filter(member => member.username !== user?.username);
-            setUsers(fetchedUsers);
-            setLoading(false);
-          })
-          .catch(e => {
-            setError(e);
-          });
-      }, 300);
-    } else {
-      setUsers([]);
-    }
-
-    return () => {
-      if (timeoutId) {
-        clearTimeout(timeoutId);
-      }
-    };
-  }, [allowSelf, inputValue, user]);
-
-  return children({ users, loading, error });
-};
-
-interface IUserSearchInputProps {
-  onInputValueChange: DownshiftProps<string>['onInputValueChange'];
-  inputValue: string;
-  allowSelf?: boolean;
-  [key: string]: any;
-}
-
-// There is a conflict with 'as' typing (string vs 'select' | 'option', etc...)
-const InputWithoutTypes = Input as any;
-
-export const UserSearchInput = ({
-  onInputValueChange,
-  inputValue,
-  allowSelf = false,
-  ...props
-}: IUserSearchInputProps) => (
-  <Downshift
-    inputValue={inputValue}
-    onInputValueChange={onInputValueChange}
-    selectedItem={inputValue}
-  >
-    {({
-      getInputProps,
-      getItemProps,
-      getRootProps,
-      getMenuProps,
-      isOpen,
-      selectedItem,
-      inputValue: currentInputValue,
-      highlightedIndex,
-    }) => (
-      <div style={{ width: '100%', position: 'relative' }}>
-        <div
-          {...getRootProps({ refKey: 'innerRef' }, { suppressRefError: true })}
-        >
-          <InputWithoutTypes
-            {...props}
-            {...getInputProps({
-              placeholder: 'Enter username or email',
-            })}
-            autoFocus
-            autoComplete="off"
-            spellcheck="false"
-          />
-        </div>
-
-        <UserAutoComplete allowSelf={allowSelf} inputValue={currentInputValue}>
-          {({ users, error }) =>
-            users.length > 0 && !error && isOpen ? (
-              <List
-                css={css({
-                  position: 'absolute',
-                  width: '100%',
-                  borderBottomLeftRadius: 'small',
-                  borderBottomRightRadius: 'small',
-                  boxShadow: 1,
-                  fontSize: 3,
-                  backgroundColor: 'dialog.background',
-                  border: '1px solid',
-                  borderColor: 'dialog.border',
-                  zIndex: 20,
-                })}
-                {...getMenuProps({})}
-              >
-                {users.map((item, index) => (
-                  <ListAction
-                    key={item.id}
-                    isActive={highlightedIndex === index}
-                    {...getItemProps({
-                      item: item.username,
-                      index,
-                      isSelected: selectedItem === item.username,
-                    })}
-                  >
-                    <img
-                      alt={item.username}
-                      css={css({
-                        borderRadius: 2,
-                        marginRight: 2,
-                      })}
-                      width={24}
-                      height={24}
-                      src={item.avatar_url}
-                    />{' '}
-                    {item.username}
-                  </ListAction>
-                ))}
-              </List>
-            ) : null
-          }
-        </UserAutoComplete>
-      </div>
-    )}
-  </Downshift>
-);
diff --git a/packages/app/src/app/components/UserSearchInput/index.ts b/packages/app/src/app/components/UserSearchInput/index.ts
deleted file mode 100644
index 299ad2b7a1a..00000000000
--- a/packages/app/src/app/components/UserSearchInput/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { UserSearchInput } from './UserSearchInput';
diff --git a/packages/app/src/app/components/VercelLogo.tsx b/packages/app/src/app/components/VercelLogo.tsx
deleted file mode 100644
index 28b294336c6..00000000000
--- a/packages/app/src/app/components/VercelLogo.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from 'react';
-import IconBase from 'react-icons/lib/IconBase';
-
-export const VercelLogo: React.FC<React.SVGAttributes<SVGElement>> = props => (
-  <IconBase viewBox="0 0 116 100" {...props}>
-    <path fillRule="evenodd" clipRule="evenodd" d="M57.5 0L115 100H0L57.5 0z" />
-  </IconBase>
-);
diff --git a/packages/app/src/app/components/WorkspaceSetup/elements.ts b/packages/app/src/app/components/WorkspaceSetup/elements.ts
index f0ade105a35..f70bd02c52d 100644
--- a/packages/app/src/app/components/WorkspaceSetup/elements.ts
+++ b/packages/app/src/app/components/WorkspaceSetup/elements.ts
@@ -1,3 +1,4 @@
+import { Element } from '@codesandbox/components';
 import styled, { keyframes, css } from 'styled-components';
 
 export const fadeIn = keyframes`
@@ -10,6 +11,6 @@ export const fadeAnimation = () =>
     ${fadeIn} 0.2s ease-out;
   `;
 
-export const AnimatedStep = styled.div`
+export const AnimatedStep = styled(Element)`
   animation: ${fadeAnimation};
 `;
diff --git a/packages/app/src/app/components/dashboard/LargeCTAButton.tsx b/packages/app/src/app/components/dashboard/LargeCTAButton.tsx
index aeb4b654c44..2b4bcd39a22 100644
--- a/packages/app/src/app/components/dashboard/LargeCTAButton.tsx
+++ b/packages/app/src/app/components/dashboard/LargeCTAButton.tsx
@@ -24,7 +24,7 @@ export const LargeCTAButton = ({
     <StyledButton
       onClick={onClick}
       disabled={disabled}
-      css={{
+      style={{
         height: 'auto',
         flexDirection: alignment === 'horizontal' ? 'row' : 'column',
       }}
diff --git a/packages/app/src/app/graphql/types.ts b/packages/app/src/app/graphql/types.ts
index fbb472816d8..a99ec934e61 100644
--- a/packages/app/src/app/graphql/types.ts
+++ b/packages/app/src/app/graphql/types.ts
@@ -3310,1218 +3310,6 @@ export type RepositoryTeamsQuery = {
   }>;
 };
 
-export type CollaboratorFragment = {
-  __typename?: 'Collaborator';
-  id: any;
-  authorization: Authorization;
-  lastSeenAt: any | null;
-  warning: string | null;
-  user: { __typename?: 'User'; id: any; username: string; avatarUrl: string };
-};
-
-export type InvitationFragment = {
-  __typename?: 'Invitation';
-  id: string | null;
-  authorization: Authorization;
-  email: string | null;
-};
-
-export type SandboxChangedFragment = {
-  __typename?: 'Sandbox';
-  id: string;
-  privacy: number;
-  title: string | null;
-  description: string | null;
-  authorization: Authorization;
-};
-
-export type AddCollaboratorMutationVariables = Exact<{
-  sandboxId: Scalars['ID'];
-  username: Scalars['String'];
-  authorization: Authorization;
-}>;
-
-export type AddCollaboratorMutation = {
-  __typename?: 'RootMutationType';
-  addCollaborator: {
-    __typename?: 'Collaborator';
-    id: any;
-    authorization: Authorization;
-    lastSeenAt: any | null;
-    warning: string | null;
-    user: { __typename?: 'User'; id: any; username: string; avatarUrl: string };
-  };
-};
-
-export type RemoveCollaboratorMutationVariables = Exact<{
-  sandboxId: Scalars['ID'];
-  username: Scalars['String'];
-}>;
-
-export type RemoveCollaboratorMutation = {
-  __typename?: 'RootMutationType';
-  removeCollaborator: {
-    __typename?: 'Collaborator';
-    id: any;
-    authorization: Authorization;
-    lastSeenAt: any | null;
-    warning: string | null;
-    user: { __typename?: 'User'; id: any; username: string; avatarUrl: string };
-  };
-};
-
-export type ChangeCollaboratorAuthorizationMutationVariables = Exact<{
-  sandboxId: Scalars['ID'];
-  username: Scalars['String'];
-  authorization: Authorization;
-}>;
-
-export type ChangeCollaboratorAuthorizationMutation = {
-  __typename?: 'RootMutationType';
-  changeCollaboratorAuthorization: {
-    __typename?: 'Collaborator';
-    id: any;
-    authorization: Authorization;
-    lastSeenAt: any | null;
-    warning: string | null;
-    user: { __typename?: 'User'; id: any; username: string; avatarUrl: string };
-  };
-};
-
-export type InviteCollaboratorMutationVariables = Exact<{
-  sandboxId: Scalars['ID'];
-  authorization: Authorization;
-  email: Scalars['String'];
-}>;
-
-export type InviteCollaboratorMutation = {
-  __typename?: 'RootMutationType';
-  createSandboxInvitation: {
-    __typename?: 'Invitation';
-    id: string | null;
-    authorization: Authorization;
-    email: string | null;
-  };
-};
-
-export type RevokeSandboxInvitationMutationVariables = Exact<{
-  sandboxId: Scalars['ID'];
-  invitationId: Scalars['UUID4'];
-}>;
-
-export type RevokeSandboxInvitationMutation = {
-  __typename?: 'RootMutationType';
-  revokeSandboxInvitation: {
-    __typename?: 'Invitation';
-    id: string | null;
-    authorization: Authorization;
-    email: string | null;
-  };
-};
-
-export type ChangeSandboxInvitationAuthorizationMutationVariables = Exact<{
-  sandboxId: Scalars['ID'];
-  invitationId: Scalars['UUID4'];
-  authorization: Authorization;
-}>;
-
-export type ChangeSandboxInvitationAuthorizationMutation = {
-  __typename?: 'RootMutationType';
-  changeSandboxInvitationAuthorization: {
-    __typename?: 'Invitation';
-    id: string | null;
-    authorization: Authorization;
-    email: string | null;
-  };
-};
-
-export type RedeemSandboxInvitationMutationVariables = Exact<{
-  sandboxId: Scalars['ID'];
-  invitationToken: Scalars['String'];
-}>;
-
-export type RedeemSandboxInvitationMutation = {
-  __typename?: 'RootMutationType';
-  redeemSandboxInvitation: {
-    __typename?: 'Invitation';
-    id: string | null;
-    authorization: Authorization;
-    email: string | null;
-  };
-};
-
-export type SandboxCollaboratorsQueryVariables = Exact<{
-  sandboxId: Scalars['ID'];
-}>;
-
-export type SandboxCollaboratorsQuery = {
-  __typename?: 'RootQueryType';
-  sandbox: {
-    __typename?: 'Sandbox';
-    collaborators: Array<{
-      __typename?: 'Collaborator';
-      id: any;
-      authorization: Authorization;
-      lastSeenAt: any | null;
-      warning: string | null;
-      user: {
-        __typename?: 'User';
-        id: any;
-        username: string;
-        avatarUrl: string;
-      };
-    }>;
-  } | null;
-};
-
-export type SandboxInvitationsQueryVariables = Exact<{
-  sandboxId: Scalars['ID'];
-}>;
-
-export type SandboxInvitationsQuery = {
-  __typename?: 'RootQueryType';
-  sandbox: {
-    __typename?: 'Sandbox';
-    invitations: Array<{
-      __typename?: 'Invitation';
-      id: string | null;
-      authorization: Authorization;
-      email: string | null;
-    }>;
-  } | null;
-};
-
-export type OnCollaboratorAddedSubscriptionVariables = Exact<{
-  sandboxId: Scalars['ID'];
-}>;
-
-export type OnCollaboratorAddedSubscription = {
-  __typename?: 'RootSubscriptionType';
-  collaboratorAdded: {
-    __typename?: 'Collaborator';
-    id: any;
-    authorization: Authorization;
-    lastSeenAt: any | null;
-    warning: string | null;
-    user: { __typename?: 'User'; id: any; username: string; avatarUrl: string };
-  };
-};
-
-export type OnCollaboratorChangedSubscriptionVariables = Exact<{
-  sandboxId: Scalars['ID'];
-}>;
-
-export type OnCollaboratorChangedSubscription = {
-  __typename?: 'RootSubscriptionType';
-  collaboratorChanged: {
-    __typename?: 'Collaborator';
-    id: any;
-    authorization: Authorization;
-    lastSeenAt: any | null;
-    warning: string | null;
-    user: { __typename?: 'User'; id: any; username: string; avatarUrl: string };
-  };
-};
-
-export type OnCollaboratorRemovedSubscriptionVariables = Exact<{
-  sandboxId: Scalars['ID'];
-}>;
-
-export type OnCollaboratorRemovedSubscription = {
-  __typename?: 'RootSubscriptionType';
-  collaboratorRemoved: {
-    __typename?: 'Collaborator';
-    id: any;
-    authorization: Authorization;
-    lastSeenAt: any | null;
-    warning: string | null;
-    user: { __typename?: 'User'; id: any; username: string; avatarUrl: string };
-  };
-};
-
-export type OnInvitationCreatedSubscriptionVariables = Exact<{
-  sandboxId: Scalars['ID'];
-}>;
-
-export type OnInvitationCreatedSubscription = {
-  __typename?: 'RootSubscriptionType';
-  invitationCreated: {
-    __typename?: 'Invitation';
-    id: string | null;
-    authorization: Authorization;
-    email: string | null;
-  };
-};
-
-export type OnInvitationRemovedSubscriptionVariables = Exact<{
-  sandboxId: Scalars['ID'];
-}>;
-
-export type OnInvitationRemovedSubscription = {
-  __typename?: 'RootSubscriptionType';
-  invitationRemoved: {
-    __typename?: 'Invitation';
-    id: string | null;
-    authorization: Authorization;
-    email: string | null;
-  };
-};
-
-export type OnInvitationChangedSubscriptionVariables = Exact<{
-  sandboxId: Scalars['ID'];
-}>;
-
-export type OnInvitationChangedSubscription = {
-  __typename?: 'RootSubscriptionType';
-  invitationChanged: {
-    __typename?: 'Invitation';
-    id: string | null;
-    authorization: Authorization;
-    email: string | null;
-  };
-};
-
-export type OnSandboxChangedSubscriptionVariables = Exact<{
-  sandboxId: Scalars['ID'];
-}>;
-
-export type OnSandboxChangedSubscription = {
-  __typename?: 'RootSubscriptionType';
-  sandboxChanged: {
-    __typename?: 'Sandbox';
-    id: string;
-    privacy: number;
-    title: string | null;
-    description: string | null;
-    authorization: Authorization;
-  };
-};
-
-export type CodeReferenceMetadataFragment = {
-  __typename?: 'CodeReferenceMetadata';
-  anchor: number;
-  code: string;
-  head: number;
-  path: string;
-};
-
-export type UserReferenceMetadataFragment = {
-  __typename?: 'UserReferenceMetadata';
-  username: string;
-  userId: string;
-};
-
-export type ImageReferenceMetadataFragment = {
-  __typename?: 'ImageReferenceMetadata';
-  fileName: string;
-};
-
-export type PreviewReferenceMetadataFragment = {
-  __typename?: 'PreviewReferenceMetadata';
-  width: number;
-  height: number;
-  x: number;
-  y: number;
-  screenshotUrl: string | null;
-  userAgent: string;
-};
-
-export type CommentFragment = {
-  __typename?: 'Comment';
-  id: any;
-  content: string | null;
-  insertedAt: any;
-  updatedAt: any;
-  isResolved: boolean;
-  replyCount: number;
-  anchorReference: {
-    __typename?: 'Reference';
-    id: any;
-    resource: string;
-    type: string;
-    metadata:
-      | {
-          __typename?: 'CodeReferenceMetadata';
-          anchor: number;
-          code: string;
-          head: number;
-          path: string;
-        }
-      | { __typename?: 'ImageReferenceMetadata' }
-      | {
-          __typename?: 'PreviewReferenceMetadata';
-          width: number;
-          height: number;
-          x: number;
-          y: number;
-          screenshotUrl: string | null;
-          userAgent: string;
-        }
-      | { __typename?: 'UserReferenceMetadata' };
-  } | null;
-  references: Array<{
-    __typename?: 'Reference';
-    id: any;
-    resource: string;
-    type: string;
-    metadata:
-      | {
-          __typename?: 'CodeReferenceMetadata';
-          anchor: number;
-          code: string;
-          head: number;
-          path: string;
-        }
-      | { __typename?: 'ImageReferenceMetadata'; fileName: string }
-      | { __typename?: 'PreviewReferenceMetadata' }
-      | {
-          __typename?: 'UserReferenceMetadata';
-          username: string;
-          userId: string;
-        };
-  }>;
-  user: {
-    __typename?: 'User';
-    id: any;
-    name: string | null;
-    username: string;
-    avatarUrl: string;
-  };
-  parentComment: { __typename?: 'Comment'; id: any } | null;
-};
-
-export type CommentWithRepliesFragment = {
-  __typename?: 'Comment';
-  id: any;
-  content: string | null;
-  insertedAt: any;
-  updatedAt: any;
-  isResolved: boolean;
-  replyCount: number;
-  anchorReference: {
-    __typename?: 'Reference';
-    id: any;
-    resource: string;
-    type: string;
-    metadata:
-      | {
-          __typename?: 'CodeReferenceMetadata';
-          anchor: number;
-          code: string;
-          head: number;
-          path: string;
-        }
-      | { __typename?: 'ImageReferenceMetadata' }
-      | {
-          __typename?: 'PreviewReferenceMetadata';
-          width: number;
-          height: number;
-          x: number;
-          y: number;
-          screenshotUrl: string | null;
-          userAgent: string;
-        }
-      | { __typename?: 'UserReferenceMetadata' };
-  } | null;
-  references: Array<{
-    __typename?: 'Reference';
-    id: any;
-    resource: string;
-    type: string;
-    metadata:
-      | {
-          __typename?: 'CodeReferenceMetadata';
-          anchor: number;
-          code: string;
-          head: number;
-          path: string;
-        }
-      | { __typename?: 'ImageReferenceMetadata'; fileName: string }
-      | { __typename?: 'PreviewReferenceMetadata' }
-      | {
-          __typename?: 'UserReferenceMetadata';
-          username: string;
-          userId: string;
-        };
-  }>;
-  user: {
-    __typename?: 'User';
-    id: any;
-    name: string | null;
-    username: string;
-    avatarUrl: string;
-  };
-  parentComment: { __typename?: 'Comment'; id: any } | null;
-  comments: Array<{
-    __typename?: 'Comment';
-    id: any;
-    content: string | null;
-    insertedAt: any;
-    updatedAt: any;
-    isResolved: boolean;
-    replyCount: number;
-    anchorReference: {
-      __typename?: 'Reference';
-      id: any;
-      resource: string;
-      type: string;
-      metadata:
-        | {
-            __typename?: 'CodeReferenceMetadata';
-            anchor: number;
-            code: string;
-            head: number;
-            path: string;
-          }
-        | { __typename?: 'ImageReferenceMetadata' }
-        | {
-            __typename?: 'PreviewReferenceMetadata';
-            width: number;
-            height: number;
-            x: number;
-            y: number;
-            screenshotUrl: string | null;
-            userAgent: string;
-          }
-        | { __typename?: 'UserReferenceMetadata' };
-    } | null;
-    references: Array<{
-      __typename?: 'Reference';
-      id: any;
-      resource: string;
-      type: string;
-      metadata:
-        | {
-            __typename?: 'CodeReferenceMetadata';
-            anchor: number;
-            code: string;
-            head: number;
-            path: string;
-          }
-        | { __typename?: 'ImageReferenceMetadata'; fileName: string }
-        | { __typename?: 'PreviewReferenceMetadata' }
-        | {
-            __typename?: 'UserReferenceMetadata';
-            username: string;
-            userId: string;
-          };
-    }>;
-    user: {
-      __typename?: 'User';
-      id: any;
-      name: string | null;
-      username: string;
-      avatarUrl: string;
-    };
-    parentComment: { __typename?: 'Comment'; id: any } | null;
-  }>;
-};
-
-export type CreateCommentMutationVariables = Exact<{
-  id: InputMaybe<Scalars['ID']>;
-  content: Scalars['String'];
-  sandboxId: Scalars['ID'];
-  parentCommentId: InputMaybe<Scalars['ID']>;
-  userReferences: InputMaybe<Array<UserReference> | UserReference>;
-  codeReferences: InputMaybe<Array<CodeReference> | CodeReference>;
-  imageReferences: InputMaybe<Array<ImageReference> | ImageReference>;
-}>;
-
-export type CreateCommentMutation = {
-  __typename?: 'RootMutationType';
-  createComment: {
-    __typename?: 'Comment';
-    id: any;
-    content: string | null;
-    insertedAt: any;
-    updatedAt: any;
-    isResolved: boolean;
-    replyCount: number;
-    anchorReference: {
-      __typename?: 'Reference';
-      id: any;
-      resource: string;
-      type: string;
-      metadata:
-        | {
-            __typename?: 'CodeReferenceMetadata';
-            anchor: number;
-            code: string;
-            head: number;
-            path: string;
-          }
-        | { __typename?: 'ImageReferenceMetadata' }
-        | {
-            __typename?: 'PreviewReferenceMetadata';
-            width: number;
-            height: number;
-            x: number;
-            y: number;
-            screenshotUrl: string | null;
-            userAgent: string;
-          }
-        | { __typename?: 'UserReferenceMetadata' };
-    } | null;
-    references: Array<{
-      __typename?: 'Reference';
-      id: any;
-      resource: string;
-      type: string;
-      metadata:
-        | {
-            __typename?: 'CodeReferenceMetadata';
-            anchor: number;
-            code: string;
-            head: number;
-            path: string;
-          }
-        | { __typename?: 'ImageReferenceMetadata'; fileName: string }
-        | { __typename?: 'PreviewReferenceMetadata' }
-        | {
-            __typename?: 'UserReferenceMetadata';
-            username: string;
-            userId: string;
-          };
-    }>;
-    user: {
-      __typename?: 'User';
-      id: any;
-      name: string | null;
-      username: string;
-      avatarUrl: string;
-    };
-    parentComment: { __typename?: 'Comment'; id: any } | null;
-  };
-};
-
-export type CreateCodeCommentMutationVariables = Exact<{
-  id: InputMaybe<Scalars['ID']>;
-  content: Scalars['String'];
-  sandboxId: Scalars['ID'];
-  parentCommentId: InputMaybe<Scalars['ID']>;
-  anchorReference: CodeReference;
-  userReferences: InputMaybe<Array<UserReference> | UserReference>;
-  codeReferences: InputMaybe<Array<CodeReference> | CodeReference>;
-  imageReferences: InputMaybe<Array<ImageReference> | ImageReference>;
-}>;
-
-export type CreateCodeCommentMutation = {
-  __typename?: 'RootMutationType';
-  createCodeComment: {
-    __typename?: 'Comment';
-    id: any;
-    content: string | null;
-    insertedAt: any;
-    updatedAt: any;
-    isResolved: boolean;
-    replyCount: number;
-    anchorReference: {
-      __typename?: 'Reference';
-      id: any;
-      resource: string;
-      type: string;
-      metadata:
-        | {
-            __typename?: 'CodeReferenceMetadata';
-            anchor: number;
-            code: string;
-            head: number;
-            path: string;
-          }
-        | { __typename?: 'ImageReferenceMetadata' }
-        | {
-            __typename?: 'PreviewReferenceMetadata';
-            width: number;
-            height: number;
-            x: number;
-            y: number;
-            screenshotUrl: string | null;
-            userAgent: string;
-          }
-        | { __typename?: 'UserReferenceMetadata' };
-    } | null;
-    references: Array<{
-      __typename?: 'Reference';
-      id: any;
-      resource: string;
-      type: string;
-      metadata:
-        | {
-            __typename?: 'CodeReferenceMetadata';
-            anchor: number;
-            code: string;
-            head: number;
-            path: string;
-          }
-        | { __typename?: 'ImageReferenceMetadata'; fileName: string }
-        | { __typename?: 'PreviewReferenceMetadata' }
-        | {
-            __typename?: 'UserReferenceMetadata';
-            username: string;
-            userId: string;
-          };
-    }>;
-    user: {
-      __typename?: 'User';
-      id: any;
-      name: string | null;
-      username: string;
-      avatarUrl: string;
-    };
-    parentComment: { __typename?: 'Comment'; id: any } | null;
-  };
-};
-
-export type CreatePreviewCommentMutationVariables = Exact<{
-  id: InputMaybe<Scalars['ID']>;
-  content: Scalars['String'];
-  sandboxId: Scalars['ID'];
-  parentCommentId: InputMaybe<Scalars['ID']>;
-  anchorReference: PreviewReference;
-  userReferences: InputMaybe<Array<UserReference> | UserReference>;
-  codeReferences: InputMaybe<Array<CodeReference> | CodeReference>;
-  imageReferences: InputMaybe<Array<ImageReference> | ImageReference>;
-}>;
-
-export type CreatePreviewCommentMutation = {
-  __typename?: 'RootMutationType';
-  createPreviewComment: {
-    __typename?: 'Comment';
-    id: any;
-    content: string | null;
-    insertedAt: any;
-    updatedAt: any;
-    isResolved: boolean;
-    replyCount: number;
-    anchorReference: {
-      __typename?: 'Reference';
-      id: any;
-      resource: string;
-      type: string;
-      metadata:
-        | {
-            __typename?: 'CodeReferenceMetadata';
-            anchor: number;
-            code: string;
-            head: number;
-            path: string;
-          }
-        | { __typename?: 'ImageReferenceMetadata' }
-        | {
-            __typename?: 'PreviewReferenceMetadata';
-            width: number;
-            height: number;
-            x: number;
-            y: number;
-            screenshotUrl: string | null;
-            userAgent: string;
-          }
-        | { __typename?: 'UserReferenceMetadata' };
-    } | null;
-    references: Array<{
-      __typename?: 'Reference';
-      id: any;
-      resource: string;
-      type: string;
-      metadata:
-        | {
-            __typename?: 'CodeReferenceMetadata';
-            anchor: number;
-            code: string;
-            head: number;
-            path: string;
-          }
-        | { __typename?: 'ImageReferenceMetadata'; fileName: string }
-        | { __typename?: 'PreviewReferenceMetadata' }
-        | {
-            __typename?: 'UserReferenceMetadata';
-            username: string;
-            userId: string;
-          };
-    }>;
-    user: {
-      __typename?: 'User';
-      id: any;
-      name: string | null;
-      username: string;
-      avatarUrl: string;
-    };
-    parentComment: { __typename?: 'Comment'; id: any } | null;
-  };
-};
-
-export type DeleteCommentMutationVariables = Exact<{
-  commentId: Scalars['UUID4'];
-  sandboxId: Scalars['ID'];
-}>;
-
-export type DeleteCommentMutation = {
-  __typename?: 'RootMutationType';
-  deleteComment: { __typename?: 'Comment'; id: any };
-};
-
-export type UpdateCommentMutationVariables = Exact<{
-  commentId: Scalars['UUID4'];
-  sandboxId: Scalars['ID'];
-  content: InputMaybe<Scalars['String']>;
-  userReferences: InputMaybe<Array<UserReference> | UserReference>;
-  codeReferences: InputMaybe<Array<CodeReference> | CodeReference>;
-  imageReferences: InputMaybe<Array<ImageReference> | ImageReference>;
-}>;
-
-export type UpdateCommentMutation = {
-  __typename?: 'RootMutationType';
-  updateComment: { __typename?: 'Comment'; id: any };
-};
-
-export type ResolveCommentMutationVariables = Exact<{
-  commentId: Scalars['UUID4'];
-  sandboxId: Scalars['ID'];
-}>;
-
-export type ResolveCommentMutation = {
-  __typename?: 'RootMutationType';
-  resolveComment: { __typename?: 'Comment'; id: any };
-};
-
-export type UnresolveCommentMutationVariables = Exact<{
-  commentId: Scalars['UUID4'];
-  sandboxId: Scalars['ID'];
-}>;
-
-export type UnresolveCommentMutation = {
-  __typename?: 'RootMutationType';
-  unresolveComment: { __typename?: 'Comment'; id: any };
-};
-
-export type SandboxCommentQueryVariables = Exact<{
-  sandboxId: Scalars['ID'];
-  commentId: Scalars['UUID4'];
-}>;
-
-export type SandboxCommentQuery = {
-  __typename?: 'RootQueryType';
-  sandbox: {
-    __typename?: 'Sandbox';
-    comment: {
-      __typename?: 'Comment';
-      id: any;
-      content: string | null;
-      insertedAt: any;
-      updatedAt: any;
-      isResolved: boolean;
-      replyCount: number;
-      anchorReference: {
-        __typename?: 'Reference';
-        id: any;
-        resource: string;
-        type: string;
-        metadata:
-          | {
-              __typename?: 'CodeReferenceMetadata';
-              anchor: number;
-              code: string;
-              head: number;
-              path: string;
-            }
-          | { __typename?: 'ImageReferenceMetadata' }
-          | {
-              __typename?: 'PreviewReferenceMetadata';
-              width: number;
-              height: number;
-              x: number;
-              y: number;
-              screenshotUrl: string | null;
-              userAgent: string;
-            }
-          | { __typename?: 'UserReferenceMetadata' };
-      } | null;
-      references: Array<{
-        __typename?: 'Reference';
-        id: any;
-        resource: string;
-        type: string;
-        metadata:
-          | {
-              __typename?: 'CodeReferenceMetadata';
-              anchor: number;
-              code: string;
-              head: number;
-              path: string;
-            }
-          | { __typename?: 'ImageReferenceMetadata'; fileName: string }
-          | { __typename?: 'PreviewReferenceMetadata' }
-          | {
-              __typename?: 'UserReferenceMetadata';
-              username: string;
-              userId: string;
-            };
-      }>;
-      user: {
-        __typename?: 'User';
-        id: any;
-        name: string | null;
-        username: string;
-        avatarUrl: string;
-      };
-      parentComment: { __typename?: 'Comment'; id: any } | null;
-      comments: Array<{
-        __typename?: 'Comment';
-        id: any;
-        content: string | null;
-        insertedAt: any;
-        updatedAt: any;
-        isResolved: boolean;
-        replyCount: number;
-        anchorReference: {
-          __typename?: 'Reference';
-          id: any;
-          resource: string;
-          type: string;
-          metadata:
-            | {
-                __typename?: 'CodeReferenceMetadata';
-                anchor: number;
-                code: string;
-                head: number;
-                path: string;
-              }
-            | { __typename?: 'ImageReferenceMetadata' }
-            | {
-                __typename?: 'PreviewReferenceMetadata';
-                width: number;
-                height: number;
-                x: number;
-                y: number;
-                screenshotUrl: string | null;
-                userAgent: string;
-              }
-            | { __typename?: 'UserReferenceMetadata' };
-        } | null;
-        references: Array<{
-          __typename?: 'Reference';
-          id: any;
-          resource: string;
-          type: string;
-          metadata:
-            | {
-                __typename?: 'CodeReferenceMetadata';
-                anchor: number;
-                code: string;
-                head: number;
-                path: string;
-              }
-            | { __typename?: 'ImageReferenceMetadata'; fileName: string }
-            | { __typename?: 'PreviewReferenceMetadata' }
-            | {
-                __typename?: 'UserReferenceMetadata';
-                username: string;
-                userId: string;
-              };
-        }>;
-        user: {
-          __typename?: 'User';
-          id: any;
-          name: string | null;
-          username: string;
-          avatarUrl: string;
-        };
-        parentComment: { __typename?: 'Comment'; id: any } | null;
-      }>;
-    } | null;
-  } | null;
-};
-
-export type SandboxCommentsQueryVariables = Exact<{
-  sandboxId: Scalars['ID'];
-}>;
-
-export type SandboxCommentsQuery = {
-  __typename?: 'RootQueryType';
-  sandbox: {
-    __typename?: 'Sandbox';
-    comments: Array<{
-      __typename?: 'Comment';
-      id: any;
-      content: string | null;
-      insertedAt: any;
-      updatedAt: any;
-      isResolved: boolean;
-      replyCount: number;
-      anchorReference: {
-        __typename?: 'Reference';
-        id: any;
-        resource: string;
-        type: string;
-        metadata:
-          | {
-              __typename?: 'CodeReferenceMetadata';
-              anchor: number;
-              code: string;
-              head: number;
-              path: string;
-            }
-          | { __typename?: 'ImageReferenceMetadata' }
-          | {
-              __typename?: 'PreviewReferenceMetadata';
-              width: number;
-              height: number;
-              x: number;
-              y: number;
-              screenshotUrl: string | null;
-              userAgent: string;
-            }
-          | { __typename?: 'UserReferenceMetadata' };
-      } | null;
-      references: Array<{
-        __typename?: 'Reference';
-        id: any;
-        resource: string;
-        type: string;
-        metadata:
-          | {
-              __typename?: 'CodeReferenceMetadata';
-              anchor: number;
-              code: string;
-              head: number;
-              path: string;
-            }
-          | { __typename?: 'ImageReferenceMetadata'; fileName: string }
-          | { __typename?: 'PreviewReferenceMetadata' }
-          | {
-              __typename?: 'UserReferenceMetadata';
-              username: string;
-              userId: string;
-            };
-      }>;
-      user: {
-        __typename?: 'User';
-        id: any;
-        name: string | null;
-        username: string;
-        avatarUrl: string;
-      };
-      parentComment: { __typename?: 'Comment'; id: any } | null;
-    }>;
-  } | null;
-};
-
-export type CommentAddedSubscriptionVariables = Exact<{
-  sandboxId: Scalars['ID'];
-}>;
-
-export type CommentAddedSubscription = {
-  __typename?: 'RootSubscriptionType';
-  commentAdded: {
-    __typename?: 'Comment';
-    id: any;
-    content: string | null;
-    insertedAt: any;
-    updatedAt: any;
-    isResolved: boolean;
-    replyCount: number;
-    sandbox: { __typename?: 'Sandbox'; id: string };
-    anchorReference: {
-      __typename?: 'Reference';
-      id: any;
-      resource: string;
-      type: string;
-      metadata:
-        | {
-            __typename?: 'CodeReferenceMetadata';
-            anchor: number;
-            code: string;
-            head: number;
-            path: string;
-          }
-        | { __typename?: 'ImageReferenceMetadata' }
-        | {
-            __typename?: 'PreviewReferenceMetadata';
-            width: number;
-            height: number;
-            x: number;
-            y: number;
-            screenshotUrl: string | null;
-            userAgent: string;
-          }
-        | { __typename?: 'UserReferenceMetadata' };
-    } | null;
-    references: Array<{
-      __typename?: 'Reference';
-      id: any;
-      resource: string;
-      type: string;
-      metadata:
-        | {
-            __typename?: 'CodeReferenceMetadata';
-            anchor: number;
-            code: string;
-            head: number;
-            path: string;
-          }
-        | { __typename?: 'ImageReferenceMetadata'; fileName: string }
-        | { __typename?: 'PreviewReferenceMetadata' }
-        | {
-            __typename?: 'UserReferenceMetadata';
-            username: string;
-            userId: string;
-          };
-    }>;
-    user: {
-      __typename?: 'User';
-      id: any;
-      name: string | null;
-      username: string;
-      avatarUrl: string;
-    };
-    parentComment: { __typename?: 'Comment'; id: any } | null;
-  };
-};
-
-export type CommentChangedSubscriptionVariables = Exact<{
-  sandboxId: Scalars['ID'];
-}>;
-
-export type CommentChangedSubscription = {
-  __typename?: 'RootSubscriptionType';
-  commentChanged: {
-    __typename?: 'Comment';
-    id: any;
-    content: string | null;
-    insertedAt: any;
-    updatedAt: any;
-    isResolved: boolean;
-    replyCount: number;
-    sandbox: { __typename?: 'Sandbox'; id: string };
-    anchorReference: {
-      __typename?: 'Reference';
-      id: any;
-      resource: string;
-      type: string;
-      metadata:
-        | {
-            __typename?: 'CodeReferenceMetadata';
-            anchor: number;
-            code: string;
-            head: number;
-            path: string;
-          }
-        | { __typename?: 'ImageReferenceMetadata' }
-        | {
-            __typename?: 'PreviewReferenceMetadata';
-            width: number;
-            height: number;
-            x: number;
-            y: number;
-            screenshotUrl: string | null;
-            userAgent: string;
-          }
-        | { __typename?: 'UserReferenceMetadata' };
-    } | null;
-    references: Array<{
-      __typename?: 'Reference';
-      id: any;
-      resource: string;
-      type: string;
-      metadata:
-        | {
-            __typename?: 'CodeReferenceMetadata';
-            anchor: number;
-            code: string;
-            head: number;
-            path: string;
-          }
-        | { __typename?: 'ImageReferenceMetadata'; fileName: string }
-        | { __typename?: 'PreviewReferenceMetadata' }
-        | {
-            __typename?: 'UserReferenceMetadata';
-            username: string;
-            userId: string;
-          };
-    }>;
-    user: {
-      __typename?: 'User';
-      id: any;
-      name: string | null;
-      username: string;
-      avatarUrl: string;
-    };
-    parentComment: { __typename?: 'Comment'; id: any } | null;
-  };
-};
-
-export type CommentRemovedSubscriptionVariables = Exact<{
-  sandboxId: Scalars['ID'];
-}>;
-
-export type CommentRemovedSubscription = {
-  __typename?: 'RootSubscriptionType';
-  commentRemoved: {
-    __typename?: 'Comment';
-    id: any;
-    content: string | null;
-    insertedAt: any;
-    updatedAt: any;
-    isResolved: boolean;
-    replyCount: number;
-    sandbox: { __typename?: 'Sandbox'; id: string };
-    anchorReference: {
-      __typename?: 'Reference';
-      id: any;
-      resource: string;
-      type: string;
-      metadata:
-        | {
-            __typename?: 'CodeReferenceMetadata';
-            anchor: number;
-            code: string;
-            head: number;
-            path: string;
-          }
-        | { __typename?: 'ImageReferenceMetadata' }
-        | {
-            __typename?: 'PreviewReferenceMetadata';
-            width: number;
-            height: number;
-            x: number;
-            y: number;
-            screenshotUrl: string | null;
-            userAgent: string;
-          }
-        | { __typename?: 'UserReferenceMetadata' };
-    } | null;
-    references: Array<{
-      __typename?: 'Reference';
-      id: any;
-      resource: string;
-      type: string;
-      metadata:
-        | {
-            __typename?: 'CodeReferenceMetadata';
-            anchor: number;
-            code: string;
-            head: number;
-            path: string;
-          }
-        | { __typename?: 'ImageReferenceMetadata'; fileName: string }
-        | { __typename?: 'PreviewReferenceMetadata' }
-        | {
-            __typename?: 'UserReferenceMetadata';
-            username: string;
-            userId: string;
-          };
-    }>;
-    user: {
-      __typename?: 'User';
-      id: any;
-      name: string | null;
-      username: string;
-      avatarUrl: string;
-    };
-    parentComment: { __typename?: 'Comment'; id: any } | null;
-  };
-};
-
 export type SandboxFragmentDashboardFragment = {
   __typename?: 'Sandbox';
   id: string;
@@ -7569,86 +6357,6 @@ export type RejectTeamInvitationMutation = {
   rejectTeamInvitation: string;
 };
 
-export type BookmarkTemplateMutationVariables = Exact<{
-  template: Scalars['UUID4'];
-  team: InputMaybe<Scalars['UUID4']>;
-}>;
-
-export type BookmarkTemplateMutation = {
-  __typename?: 'RootMutationType';
-  template: {
-    __typename?: 'Template';
-    id: any | null;
-    bookmarked: Array<{
-      __typename?: 'Bookmarked';
-      isBookmarked: boolean | null;
-      entity:
-        | { __typename: 'Team'; id: any; name: string }
-        | { __typename: 'User'; id: any; name: string }
-        | null;
-    } | null> | null;
-  } | null;
-};
-
-export type UnbookmarkTemplateMutationVariables = Exact<{
-  template: Scalars['UUID4'];
-  team: InputMaybe<Scalars['UUID4']>;
-}>;
-
-export type UnbookmarkTemplateMutation = {
-  __typename?: 'RootMutationType';
-  template: {
-    __typename?: 'Template';
-    id: any | null;
-    bookmarked: Array<{
-      __typename?: 'Bookmarked';
-      isBookmarked: boolean | null;
-      entity:
-        | { __typename: 'Team'; id: any; name: string }
-        | { __typename: 'User'; id: any; name: string }
-        | null;
-    } | null> | null;
-  } | null;
-};
-
-export type BookmarkTemplateFieldsFragment = {
-  __typename?: 'Template';
-  id: any | null;
-  bookmarked: Array<{
-    __typename?: 'Bookmarked';
-    isBookmarked: boolean | null;
-    entity:
-      | { __typename: 'Team'; id: any; name: string }
-      | { __typename: 'User'; id: any; name: string }
-      | null;
-  } | null> | null;
-};
-
-export type BookmarkedSandboxInfoQueryVariables = Exact<{
-  sandboxId: Scalars['ID'];
-}>;
-
-export type BookmarkedSandboxInfoQuery = {
-  __typename?: 'RootQueryType';
-  sandbox: {
-    __typename?: 'Sandbox';
-    id: string;
-    author: { __typename?: 'User'; id: any; name: string } | null;
-    customTemplate: {
-      __typename?: 'Template';
-      id: any | null;
-      bookmarked: Array<{
-        __typename?: 'Bookmarked';
-        isBookmarked: boolean | null;
-        entity:
-          | { __typename: 'Team'; id: any; name: string }
-          | { __typename: 'User'; id: any; name: string }
-          | null;
-      } | null> | null;
-    } | null;
-  } | null;
-};
-
 export type TeamByTokenQueryVariables = Exact<{
   inviteToken: Scalars['String'];
 }>;
diff --git a/packages/app/src/app/hooks/useBetaSandboxEditor.ts b/packages/app/src/app/hooks/useBetaSandboxEditor.ts
deleted file mode 100644
index 1b4d7e3f094..00000000000
--- a/packages/app/src/app/hooks/useBetaSandboxEditor.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-// This will be removed in the first cleanup post release, but for now
-// it is the simplesy way to ensure everyone is on the v2 editor
-export const useBetaSandboxEditor = (): [boolean] => {
-  return [true];
-};
diff --git a/packages/app/src/app/hooks/useCurrencyFromTimeZone.ts b/packages/app/src/app/hooks/useCurrencyFromTimeZone.ts
deleted file mode 100644
index ed2fb795c0e..00000000000
--- a/packages/app/src/app/hooks/useCurrencyFromTimeZone.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export const useCurrencyFromTimeZone = () => {
-  const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-
-  if (timeZone === 'Asia/Kolkata' || timeZone === 'Asia/Calcutta') {
-    return 'INR';
-  }
-
-  return 'USD';
-};
diff --git a/packages/app/src/app/hooks/useIsEditorPage.ts b/packages/app/src/app/hooks/useIsEditorPage.ts
deleted file mode 100644
index 2eb876c279b..00000000000
--- a/packages/app/src/app/hooks/useIsEditorPage.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { editorUrl } from '@codesandbox/common/lib/utils/url-generator';
-import { matchPath, useLocation } from 'react-router-dom';
-
-export const useIsEditorPage = (): boolean => {
-  const { pathname } = useLocation();
-  const match = matchPath(pathname, editorUrl());
-  return match !== null;
-};
diff --git a/packages/app/src/app/hooks/useUpgradeFromV1ToV2.ts b/packages/app/src/app/hooks/useUpgradeFromV1ToV2.ts
deleted file mode 100644
index 8e17b39aa39..00000000000
--- a/packages/app/src/app/hooks/useUpgradeFromV1ToV2.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-import { useState } from 'react';
-import { useEffects, useAppState } from 'app/overmind';
-import { sandboxUrl } from '@codesandbox/common/lib/utils/url-generator';
-import { hasPermission } from '@codesandbox/common/lib/utils/permission';
-import track from '@codesandbox/common/lib/utils/analytics';
-
-export const useUpgradeFromV1ToV2 = (
-  trackingLocation: string,
-  alwaysFork?: boolean
-) => {
-  const state = useAppState();
-  const effects = useEffects();
-  const [isLoading, setIsLoading] = useState(false);
-  const updateSandbox = useEffects().api.updateSandbox;
-  const canConvert = state.editor.currentSandbox
-    ? hasPermission(state.editor.currentSandbox.authorization, 'write_code')
-    : false;
-
-  return {
-    loading: isLoading,
-    canConvert,
-    perform: async () => {
-      if (!state.editor.currentSandbox) {
-        return;
-      }
-
-      setIsLoading(true);
-
-      track(`Editor - ${trackingLocation} Convert to Devbox`, {
-        owned: canConvert,
-      });
-
-      try {
-        const sandboxId = state.editor.currentSandbox.id;
-
-        if (canConvert && !alwaysFork) {
-          const alias = state.editor.currentSandbox.alias;
-
-          await updateSandbox(sandboxId, {
-            v2: true,
-          });
-
-          const sandboxV2Url = sandboxUrl({
-            id: sandboxId,
-            alias,
-            isV2: true,
-            query: {
-              welcome: 'true',
-            },
-          });
-
-          window.location.href = sandboxV2Url;
-        } else {
-          const forkedSandbox = await effects.api.forkSandbox(sandboxId, {
-            v2: true,
-            teamId: state.activeTeam,
-          });
-
-          const sandboxV2Url = sandboxUrl({
-            id: forkedSandbox.id,
-            alias: forkedSandbox.alias,
-            isV2: true,
-            query: {
-              welcome: 'true',
-            },
-          });
-
-          window.location.href = sandboxV2Url;
-        }
-      } catch (err) {
-        setIsLoading(false);
-        effects.notificationToast.error(
-          'Failed to convert. Please try again.'
-        );
-      }
-    },
-  };
-};
diff --git a/packages/app/src/app/overmind/actions.ts b/packages/app/src/app/overmind/actions.ts
index 5e3efcdd6f8..ceb65ab0e5e 100755
--- a/packages/app/src/app/overmind/actions.ts
+++ b/packages/app/src/app/overmind/actions.ts
@@ -5,6 +5,7 @@ import {
   convertTypeToStatus,
 } from '@codesandbox/common/lib/utils/notifications';
 import { protocolAndHost } from '@codesandbox/common/lib/utils/url-generator';
+import { Sandbox } from '@codesandbox/common/lib/types';
 
 import { withLoadApp } from './factories';
 import * as internalActions from './internalActions';
@@ -13,7 +14,6 @@ import { Context } from '.';
 import { DEFAULT_DASHBOARD_SANDBOXES } from './namespaces/dashboard/state';
 import { FinalizeSignUpOptions } from './effects/api/types';
 import { AuthOptions, GHScopeOption } from './utils/auth';
-import { renameZeitToVercel } from './utils/vercel';
 
 export const internal = internalActions;
 
@@ -30,23 +30,11 @@ export const onInitializeOvermind = async (
 
   effects.live.initialize({
     provideJwtToken,
-    onApplyOperation: actions.live.applyTransformation,
-    onOperationError: actions.live.onOperationError,
   });
 
   effects.flows.initialize(overmindInstance.reaction);
 
-  // We consider recover mode something to be done when browser actually crashes, meaning there is no unmount
-  effects.browser.onUnload(() => {
-    if (state.editor.currentSandbox && state.connected) {
-      effects.moduleRecover.clearSandbox(state.editor.currentSandbox.id);
-    }
-  });
-
   effects.api.initialize({
-    getParsedConfigurations() {
-      return state.editor.parsedConfigurations;
-    },
     provideJwtToken() {
       if (process.env.LOCAL_SERVER || process.env.STAGING) {
         return localStorage.getItem('devJwt');
@@ -84,87 +72,8 @@ export const onInitializeOvermind = async (
     },
   });
 
-  effects.vercel.initialize({
-    getToken() {
-      return state.user?.integrations.vercel?.token ?? null;
-    },
-  });
-
-  effects.netlify.initialize({
-    getUserId() {
-      return state.user?.id ?? null;
-    },
-    provideJwtToken() {
-      if (process.env.LOCAL_SERVER || process.env.STAGING) {
-        return Promise.resolve(localStorage.getItem('devJwt'));
-      }
-
-      return provideJwtToken();
-    },
-  });
-
-  effects.githubPages.initialize({
-    provideJwtToken() {
-      if (process.env.LOCAL_SERVER || process.env.STAGING) {
-        return Promise.resolve(localStorage.getItem('devJwt'));
-      }
-      return provideJwtToken();
-    },
-  });
-
-  effects.prettyfier.initialize({
-    getCurrentModule() {
-      return state.editor.currentModule;
-    },
-    getPrettierConfig() {
-      let config = state.preferences.settings.prettierConfig;
-      const configFromSandbox = state.editor.currentSandbox?.modules.find(
-        module =>
-          module.directoryShortid == null && module.title === '.prettierrc'
-      );
-
-      if (configFromSandbox) {
-        config = JSON.parse(configFromSandbox.code);
-      }
-
-      return config;
-    },
-  });
-
-  effects.vscode.initialize({
-    getCurrentSandbox: () => state.editor.currentSandbox,
-    getCurrentModule: () => state.editor.currentModule,
-    getSandboxFs: () => state.editor.modulesByPath,
-    getCurrentUser: () => state.user,
-    onOperationApplied: actions.editor.onOperationApplied,
-    onCodeChange: actions.editor.codeChanged,
-    onSelectionChanged: selection => {
-      actions.editor.onSelectionChanged(selection);
-      actions.live.onSelectionChanged(selection);
-    },
-    onViewRangeChanged: actions.live.onViewRangeChanged,
-    onCommentClick: actions.comments.onCommentClick,
-    reaction: overmindInstance.reaction,
-    getState: (path: string) =>
-      path ? path.split('.').reduce((aggr, key) => aggr[key], state) : state,
-    getSignal: (path: string) =>
-      path.split('.').reduce((aggr, key) => aggr[key], actions),
-  });
-
-  effects.preview.initialize();
-
   actions.internal.setViewModeForDashboard();
 
-  effects.browser.onWindowMessage(event => {
-    if (event.data.type === 'screenshot-requested-from-preview') {
-      actions.preview.createPreviewComment();
-    }
-  });
-
-  effects.browserExtension.hasExtension().then(hasExtension => {
-    actions.preview.setExtension(hasExtension);
-  });
-
   try {
     state.features = await effects.api.getFeatures();
   } catch {
@@ -244,23 +153,11 @@ export const connectionChanged = ({ state }: Context, connected: boolean) => {
 };
 
 type ModalName =
-  | 'githubPagesLogs'
-  | 'deleteDeployment'
-  | 'deleteSandbox'
   | 'feedback'
-  | 'forkServerModal'
-  | 'liveSessionEnded'
-  | 'netlifyLogs'
   | 'preferences'
-  | 'searchDependencies'
-  | 'share'
-  | 'signInForTemplates'
   | 'userSurvey'
-  | 'liveSessionRestricted'
   | 'sandboxPicker'
   | 'minimumPrivacy'
-  | 'addMemberToWorkspace'
-  | 'legacyPayment'
   | 'import'
   | 'create';
 
@@ -349,61 +246,6 @@ export const removeNotification = ({ state }: Context, id: number) => {
   state.notifications.splice(notificationToRemoveIndex, 1);
 };
 
-export const signInVercelClicked = async ({
-  state,
-  effects: { browser, api, notificationToast },
-  actions,
-}: Context) => {
-  state.isLoadingVercel = true;
-
-  /**
-   * We're opening a browser popup here with the /auth/zeit page but then do a server
-   * side redirect to the Vercel sign in page. This only works on production, not locally.
-   * We also can't rename the zeit route to vercel (yet) because the server will throw an
-   * invalid redirect_uri error.
-   */
-  const popup = browser.openPopup('/auth/zeit', 'sign in');
-  const data: { code: string } = await browser.waitForMessage('signin');
-
-  popup.close();
-
-  if (data && data.code) {
-    try {
-      const currentUser = await api.createVercelIntegration(data.code);
-      state.user = renameZeitToVercel(currentUser);
-    } catch (error) {
-      actions.internal.handleError({
-        message: 'Not able to add a Vercel integration. Please try again.',
-        error,
-      });
-    }
-
-    try {
-      await actions.deployment.internal.getVercelUserDetails();
-
-      // Not sure if we ever reach the catch clause below because the error has already
-      // been caught in getVercelUserDetails.
-    } catch (error) {
-      actions.internal.handleError({
-        message:
-          'We were not able to fetch your Vercel user details. You should still be able to deploy to Vercel, please try again if needed.',
-        error,
-      });
-    }
-  } else {
-    notificationToast.error('Could not authorize with Vercel');
-  }
-
-  state.isLoadingVercel = false;
-};
-
-export const signOutVercelClicked = async ({ state, effects }: Context) => {
-  if (state.user?.integrations?.vercel) {
-    await effects.api.signoutVercel();
-    state.user.integrations.vercel = null;
-  }
-};
-
 export const authTokenRequested = async ({ actions }: Context) => {
   await actions.internal.authorize();
 };
@@ -423,17 +265,10 @@ export const signInGithubClicked = async (
   state.isLoadingGithub = true;
   await actions.internal.signIn({ includedScopes, provider: 'github' });
   state.isLoadingGithub = false;
-  if (state.editor.currentSandbox?.originalGit) {
-    actions.git.loadGitSource();
-  }
 };
 
 export const signOutClicked = async ({ state, effects, actions }: Context) => {
   effects.analytics.track('Sign Out', {});
-  state.workspace.openedWorkspaceItem = 'files';
-  if (state.live.isLive) {
-    actions.live.internal.disconnect();
-  }
   await effects.api.signout();
   effects.browser.storage.remove(TEAM_ID_LOCAL_STORAGE);
   effects.router.clearWorkspaceId();
@@ -469,34 +304,6 @@ export const track = (
   effects.analytics.track(name, data);
 };
 
-export const refetchSandboxInfo = async ({
-  actions,
-  effects,
-  state,
-}: Context) => {
-  const sandbox = state.editor.currentSandbox;
-
-  if (!sandbox?.id) {
-    return;
-  }
-
-  const updatedSandbox = await effects.api.getSandbox(sandbox.id);
-
-  sandbox.collection = updatedSandbox.collection;
-  sandbox.owned = updatedSandbox.owned;
-  sandbox.userLiked = updatedSandbox.userLiked;
-  sandbox.title = updatedSandbox.title;
-  sandbox.description = updatedSandbox.description;
-  sandbox.team = updatedSandbox.team;
-  sandbox.roomId = updatedSandbox.roomId;
-  sandbox.authorization = updatedSandbox.authorization;
-  sandbox.privacy = updatedSandbox.privacy;
-  sandbox.featureFlags = updatedSandbox.featureFlags;
-  sandbox.npmRegistries = updatedSandbox.npmRegistries;
-
-  await actions.editor.internal.initializeSandbox(sandbox);
-};
-
 export const acceptTeamInvitation = (
   { effects, actions }: Context,
   {
@@ -634,3 +441,51 @@ export const getSandboxesLimits = async ({ effects, state }: Context) => {
 export const clearNewUserFirstWorkspaceId = ({ state }: Context) => {
   state.newUserFirstWorkspaceId = null;
 };
+
+export const gotUploadedFiles = async (
+  { state, actions, effects }: Context,
+  message: string
+) => {
+  const modal = 'storageManagement';
+  effects.analytics.track('Open Modal', { modal });
+  state.currentModalMessage = message;
+  state.currentModal = modal;
+
+  try {
+    const uploadedFilesInfo = await effects.api.getUploads();
+
+    state.uploadedFiles = uploadedFilesInfo.uploads;
+    state.maxStorage = uploadedFilesInfo.maxSize;
+    state.usedStorage = uploadedFilesInfo.currentSize;
+  } catch (error) {
+    actions.internal.handleError({
+      message: 'Unable to get uploaded files information',
+      error,
+    });
+  }
+};
+
+export const createRepoFiles = ({ effects }: Context, sandbox: Sandbox) => {
+  return effects.git.export(sandbox);
+};
+
+export const deleteUploadedFile = async (
+  { actions, effects, state }: Context,
+  id: string
+) => {
+  if (!state.uploadedFiles) {
+    return;
+  }
+  const index = state.uploadedFiles.findIndex(file => file.id === id);
+  const removedFiles = state.uploadedFiles.splice(index, 1);
+
+  try {
+    await effects.api.deleteUploadedFile(id);
+  } catch (error) {
+    state.uploadedFiles.splice(index, 0, ...removedFiles);
+    actions.internal.handleError({
+      message: 'Unable to delete uploaded file',
+      error,
+    });
+  }
+};
diff --git a/packages/app/src/app/overmind/effects/algoliaSearch.ts b/packages/app/src/app/overmind/effects/algoliaSearch.ts
deleted file mode 100755
index 15cae021486..00000000000
--- a/packages/app/src/app/overmind/effects/algoliaSearch.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import search from 'algoliasearch';
-import { Dependency } from '@codesandbox/common/lib/types/algolia';
-import { getGreensockAlias, GREENSOCK_ALIASES } from './utils/greensock';
-
-const client = search('OFCNCOG2CU', '00383ecd8441ead30b1b0ff981c426f5');
-const NPMSearchIndex = client.initIndex('npm-search');
-
-async function searchAlgolia(value: string | void, hits?: number) {
-  // @ts-ignore
-  const all: {
-    hits: Dependency[];
-  } = await NPMSearchIndex.search(value || '', {
-    // @ts-ignore
-    hitsPerPage: hits || 10,
-  });
-
-  return all?.hits || [];
-}
-
-export default {
-  async searchDependencies(value: string | void, hits?: number) {
-    if (!value) {
-      return searchAlgolia(value, hits);
-    }
-
-    const greensockAlias = getGreensockAlias(value);
-    let searchResults: Dependency[];
-    if (greensockAlias) {
-      const [depResults, gsap] = await Promise.all([
-        searchAlgolia(value, 3 + GREENSOCK_ALIASES.length),
-        searchAlgolia(greensockAlias, 1),
-      ]);
-      // Alias any greensock result out, so that we don't have duplicate results and we don't show
-      // gsap for a plugin where only gsap-trial is applicable.
-      const filteredDepResults = depResults.filter(
-        d => !GREENSOCK_ALIASES.includes(d.name)
-      );
-      // Then finally truncate the results back to 3
-      filteredDepResults.length = 3;
-      searchResults = [gsap[0], ...filteredDepResults];
-    } else {
-      searchResults = await searchAlgolia(value, 4);
-    }
-
-    return searchResults;
-  },
-};
diff --git a/packages/app/src/app/overmind/effects/api/apiFactory.ts b/packages/app/src/app/overmind/effects/api/apiFactory.ts
index ac9be3f963d..2d2b1d96896 100755
--- a/packages/app/src/app/overmind/effects/api/apiFactory.ts
+++ b/packages/app/src/app/overmind/effects/api/apiFactory.ts
@@ -43,7 +43,6 @@ export type Api = {
 
 export type ApiConfig = {
   provideJwtToken: () => string | null;
-  getParsedConfigurations: () => any;
 };
 
 export default (config: ApiConfig) => {
diff --git a/packages/app/src/app/overmind/effects/api/index.ts b/packages/app/src/app/overmind/effects/api/index.ts
index a3ee19b1fdb..87c1d3b27c9 100755
--- a/packages/app/src/app/overmind/effects/api/index.ts
+++ b/packages/app/src/app/overmind/effects/api/index.ts
@@ -1,39 +1,20 @@
-import { TemplateType } from '@codesandbox/common/lib/templates';
 import {
   CurrentUserFromAPI,
   CustomTemplate,
-  Dependency,
-  Directory,
-  EnvironmentVariable,
-  GitChanges,
-  GitCommit,
-  GitFileCompare,
-  GitInfo,
-  GitPathChanges,
-  GitPr,
-  Module,
-  NpmManifest,
   Profile,
   Sandbox,
   UploadedFilesInfo,
   UserQuery,
   UserSandbox,
-  SettingsSync,
   ForkSandboxBody,
 } from '@codesandbox/common/lib/types';
 import { FETCH_TEAM_TEMPLATES } from 'app/components/Create/utils/queries';
 import { client } from 'app/graphql/client';
 import { PendingUserType } from 'app/overmind/state';
 
-import {
-  transformDirectory,
-  transformModule,
-  transformSandbox,
-} from '../utils/sandbox';
+import { transformSandbox } from '../utils/sandbox';
 import apiFactory, { Api, ApiConfig, Params } from './apiFactory';
 import {
-  IDirectoryAPIResponse,
-  IModuleAPIResponse,
   SandboxAPIResponse,
   FinalizeSignUpOptions,
   MetaFeatures,
@@ -77,14 +58,6 @@ export default {
   revokeToken(token: string): Promise<void> {
     return api.delete(`/auth/revoke/${token}`);
   },
-  getDependency(name: string, tag: string): Promise<Dependency> {
-    return api.get(`/dependencies/${name}@${tag}`);
-  },
-  getDependencyManifest(sandboxId: string, name: string): Promise<NpmManifest> {
-    return api.get(
-      `/sandboxes/${sandboxId}/npm_registry/${name.replace('/', '%2f')}`
-    );
-  },
   async getSandbox(id: string, params?: Params): Promise<Sandbox> {
     const sandbox = await api.get<SandboxAPIResponse>(
       `/sandboxes/${id}`,
@@ -103,310 +76,12 @@ export default {
 
     return transformSandbox(sandbox);
   },
-  createModule(sandboxId: string, module: Module): Promise<Module> {
-    return api
-      .post<IModuleAPIResponse>(`/sandboxes/${sandboxId}/modules`, {
-        module: {
-          title: module.title,
-          directoryShortid: module.directoryShortid,
-          code: module.code,
-          isBinary: module.isBinary === undefined ? false : module.isBinary,
-        },
-      })
-      .then(transformModule);
-  },
-  async deleteModule(sandboxId: string, moduleShortid: string): Promise<void> {
-    await api.delete<IModuleAPIResponse>(
-      `/sandboxes/${sandboxId}/modules/${moduleShortid}`
-    );
-  },
-  saveModuleCode(
-    sandboxId: string,
-    moduleShortid: string,
-    code: string
-  ): Promise<Module> {
-    return api
-      .put<IModuleAPIResponse>(
-        `/sandboxes/${sandboxId}/modules/${moduleShortid}`,
-        {
-          module: { code },
-        }
-      )
-      .then(transformModule);
-  },
-  saveModulePrivateUpload(
-    sandboxId: string,
-    moduleShortid: string,
-    data: {
-      code: string;
-      uploadId: string;
-      sha: string;
-    }
-  ): Promise<Module> {
-    return api
-      .put<IModuleAPIResponse>(
-        `/sandboxes/${sandboxId}/modules/${moduleShortid}`,
-        {
-          module: data,
-        }
-      )
-      .then(transformModule);
-  },
-  saveModules(sandboxId: string, modules: Module[]): Promise<Module[]> {
-    return api
-      .put<IModuleAPIResponse[]>(`/sandboxes/${sandboxId}/modules/mupdate`, {
-        modules,
-      })
-      .then(modulesResult => modulesResult.map(transformModule));
-  },
-  getGitChanges(sandboxId: string): Promise<GitPathChanges> {
-    return api.get(`/sandboxes/${sandboxId}/git/diff`);
-  },
-  saveGitOriginalCommitSha(
-    sandboxId: string,
-    commitSha: string
-  ): Promise<void> {
-    return api.patch(`/sandboxes/${sandboxId}/original_git_commit_sha`, {
-      original_git_commit_sha: commitSha,
-    });
-  },
-  saveTemplate(sandboxId: string, template: TemplateType): Promise<void> {
-    return api.put(`/sandboxes/${sandboxId}/`, {
-      sandbox: { template },
-    });
-  },
-  unlikeSandbox(sandboxId: string) {
-    return api.request({
-      method: 'DELETE',
-      url: `/sandboxes/${sandboxId}/likes`,
-      data: {
-        id: sandboxId,
-      },
-    });
-  },
-  likeSandbox(sandboxId: string) {
-    return api.post(`/sandboxes/${sandboxId}/likes`, {
-      id: sandboxId,
-    });
-  },
-  savePrivacy(sandboxId: string, privacy: 0 | 1 | 2) {
-    return api.patch<SandboxAPIResponse>(`/sandboxes/${sandboxId}/privacy`, {
-      sandbox: {
-        privacy,
-      },
-    });
-  },
-  saveFrozen(sandboxId: string, isFrozen: boolean) {
-    return api.put<SandboxAPIResponse>(`/sandboxes/${sandboxId}`, {
-      sandbox: {
-        is_frozen: isFrozen,
-      },
-    });
-  },
-  getEnvironmentVariables(
-    sandboxId: string
-  ): Promise<{ [key: string]: string }> {
-    return api.get(
-      `/sandboxes/${sandboxId}/env`,
-      {},
-      { shouldCamelize: false }
-    );
-  },
-  saveEnvironmentVariable(
-    sandboxId: string,
-    environmentVariable: EnvironmentVariable
-  ): Promise<{ [key: string]: string }> {
-    return api.post(
-      `/sandboxes/${sandboxId}/env`,
-      {
-        environment_variable: environmentVariable,
-      },
-      {
-        shouldCamelize: false,
-      }
-    );
-  },
-  deleteEnvironmentVariable(
-    sandboxId: string,
-    name: string
-  ): Promise<{ [key: string]: string }> {
-    return api.delete(
-      `/sandboxes/${sandboxId}/env/${name}`,
-      {},
-      { shouldCamelize: false }
-    );
-  },
-  saveModuleTitle(sandboxId: string, moduleShortid: string, title: string) {
-    return api.put<IModuleAPIResponse>(
-      `/sandboxes/${sandboxId}/modules/${moduleShortid}`,
-      {
-        module: { title },
-      }
-    );
-  },
-  createDirectory(
-    sandboxId: string,
-    directoryShortid: string,
-    title: string
-  ): Promise<Directory> {
-    return api
-      .post<IDirectoryAPIResponse>(`/sandboxes/${sandboxId}/directories`, {
-        directory: {
-          title,
-          directoryShortid,
-        },
-      })
-      .then(transformDirectory);
-  },
-  saveModuleDirectory(
-    sandboxId: string,
-    moduleShortid: string,
-    directoryShortid: string
-  ) {
-    return api.put<IDirectoryAPIResponse>(
-      `/sandboxes/${sandboxId}/modules/${moduleShortid}`,
-      {
-        module: { directoryShortid },
-      }
-    );
-  },
-  saveDirectoryDirectory(
-    sandboxId: string,
-    sourceDirectoryShortid: string,
-    targetDirectoryShortId: string
-  ) {
-    return api.put<IDirectoryAPIResponse>(
-      `/sandboxes/${sandboxId}/directories/${sourceDirectoryShortid}`,
-      {
-        directory: { directoryShortid: targetDirectoryShortId },
-      }
-    );
-  },
-  deleteDirectory(sandboxId: string, directoryShortid: string) {
-    return api.delete(
-      `/sandboxes/${sandboxId}/directories/${directoryShortid}`
-    );
-  },
-  saveDirectoryTitle(
-    sandboxId: string,
-    directoryShortid: string,
-    title: string
-  ) {
-    return api.put<IDirectoryAPIResponse>(
-      `/sandboxes/${sandboxId}/directories/${directoryShortid}`,
-      {
-        directory: { title },
-      }
-    );
-  },
   getUploads(): Promise<UploadedFilesInfo> {
     return api.get('/users/current_user/uploads');
   },
   deleteUploadedFile(uploadId: string): Promise<void> {
     return api.delete(`/users/current_user/uploads/${uploadId}`);
   },
-  createUpload(name: string, content: string): Promise<{ url: string }> {
-    return api.post('/users/current_user/uploads', {
-      content,
-      name,
-    });
-  },
-  async massCreateModules(
-    sandboxId: string,
-    directoryShortid: string | null,
-    modules: Module[],
-    directories: Directory[]
-  ): Promise<{
-    modules: Module[];
-    directories: Directory[];
-  }> {
-    const data = (await api.post(`/sandboxes/${sandboxId}/modules/mcreate`, {
-      directoryShortid,
-      modules,
-      directories,
-    })) as {
-      modules: IModuleAPIResponse[];
-      directories: IDirectoryAPIResponse[];
-    };
-
-    return {
-      modules: data.modules.map(transformModule),
-      directories: data.directories.map(transformDirectory),
-    };
-  },
-  createGit(
-    sandboxId: string,
-    repoTitle: string,
-    data: object
-  ): Promise<GitInfo> {
-    return api.post(`/sandboxes/${sandboxId}/git/repo/${repoTitle}`, data);
-  },
-  createGitCommit(
-    sandboxId: string,
-    message: string,
-    changes: GitChanges,
-    parentCommitShas: string[]
-  ): Promise<GitCommit> {
-    return api.post(`/sandboxes/${sandboxId}/git/commit`, {
-      id: sandboxId,
-      message,
-      changes,
-      parentCommitShas,
-    });
-  },
-  async compareGit(
-    sandboxId: string,
-    baseRef: string,
-    headRef: string,
-    includeContents = false
-  ): Promise<{
-    baseCommitSha: string;
-    headCommitSha: string;
-    files: GitFileCompare[];
-  }> {
-    const response: any = await api.post(
-      `/sandboxes/${sandboxId}/git/compare`,
-      {
-        baseRef,
-        headRef,
-        includeContents,
-      }
-    );
-
-    return response;
-  },
-  getGitPr(sandboxId: string, prNumber: number): Promise<GitPr> {
-    return api.get(`/sandboxes/${sandboxId}/git/prs/${prNumber}`);
-  },
-  async getGitRights(sandboxId: string) {
-    const response = await api.get<{ permission: 'admin' | 'write' | 'read' }>(
-      `/sandboxes/${sandboxId}/git/rights`
-    );
-
-    return response.permission;
-  },
-  createGitPr(
-    sandboxId: string,
-    title: string,
-    description: string,
-    changes: GitChanges
-  ): Promise<GitPr> {
-    return api.post(`/sandboxes/${sandboxId}/git/pr`, {
-      sandboxId,
-      title,
-      description,
-      changes,
-    });
-  },
-  async createLiveRoom(sandboxId: string): Promise<string> {
-    const data = await api.post<{
-      id: string;
-    }>(`/sandboxes/${sandboxId}/live`, {
-      id: sandboxId,
-    });
-
-    return data.id;
-  },
   getProfile(username: string): Promise<Profile> {
     return api.get(`/users/${username}`);
   },
@@ -461,14 +136,6 @@ export default {
       },
     });
   },
-  createTag(sandboxId: string, tagName: string): Promise<string[]> {
-    return api.post(`/sandboxes/${sandboxId}/tags`, {
-      tag: tagName,
-    });
-  },
-  deleteTag(sandboxId: string, tagName: string): Promise<string[]> {
-    return api.delete(`/sandboxes/${sandboxId}/tags/${tagName}`);
-  },
   /**
    * Updates a sandbox. Used to update sandbox metadata but also to convert
    * a sandbox to a devbox.
@@ -478,20 +145,6 @@ export default {
       sandbox: data,
     });
   },
-  createResource(sandboxId: string, resource: string): Promise<void> {
-    return api.post(`/sandboxes/${sandboxId}/resources`, {
-      externalResource: resource,
-    });
-  },
-  deleteResource(sandboxId: string, resource: string): Promise<void> {
-    return api.request({
-      method: 'DELETE',
-      url: `/sandboxes/${sandboxId}/resources/`,
-      data: {
-        id: resource,
-      },
-    });
-  },
   updatePrivacy(
     sandboxId: string,
     privacy: 0 | 1 | 2
@@ -502,64 +155,24 @@ export default {
       },
     });
   },
-  createVercelIntegration(code: string): Promise<CurrentUserFromAPI> {
-    return api.post(`/users/current_user/integrations/vercel`, {
-      code,
-    });
-  },
   signout(): Promise<void> {
     return api.delete(`/users/signout`);
   },
   signoutGithubIntegration(): Promise<void> {
     return api.delete(`/users/current_user/integrations/github`);
   },
-  signoutVercel(): Promise<void> {
-    return api.delete(`/users/current_user/integrations/vercel`);
-  },
   preloadTeamTemplates(teamId: string) {
     client.query({ query: FETCH_TEAM_TEMPLATES, variables: { teamId } });
   },
-  fetchTemplate(
-    sandboxId: string,
-    templateId: string
-  ): Promise<CustomTemplate> {
-    return api.get(`/sandboxes/${sandboxId}/templates/`);
-  },
   deleteTemplate(
     sandboxId: string,
     templateId: string
   ): Promise<CustomTemplate> {
     return api.delete(`/sandboxes/${sandboxId}/templates/${templateId}`);
   },
-  updateTemplate(
-    sandboxId: string,
-    template: CustomTemplate
-  ): Promise<CustomTemplate> {
-    return api
-      .put<{ template: CustomTemplate }>(
-        `/sandboxes/${sandboxId}/templates/${template.id}`,
-        {
-          template,
-        }
-      )
-      .then(data => data.template);
-  },
-  createTemplate(
-    sandboxId: string,
-    template: { color: string; description: string; title: string }
-  ): Promise<CustomTemplate> {
-    return api
-      .post<{ template: CustomTemplate }>(`/sandboxes/${sandboxId}/templates`, {
-        template,
-      })
-      .then(data => data.template);
-  },
   queryUsers(query: string): Promise<UserQuery[]> {
     return api.get(`/users/search?username=${query}`);
   },
-  makeGitSandbox(sandboxId: string): Promise<Sandbox> {
-    return api.post<Sandbox>(`/sandboxes/${sandboxId}/make_git_sandbox`, null);
-  },
   updateUserFeaturedSandboxes(
     username: string,
     featuredSandboxIds: string[]
@@ -570,27 +183,6 @@ export default {
       },
     });
   },
-  createUserSettings({
-    name,
-    settings,
-  }: {
-    name: string;
-    settings: string;
-  }): Promise<SettingsSync> {
-    return api.post(`/users/current_user/editor_settings`, {
-      name,
-      settings,
-    });
-  },
-  getUserSettings(): Promise<SettingsSync[]> {
-    return api.get(`/users/current_user/editor_settings`);
-  },
-  editUserSettings(body: any, id: string): Promise<SettingsSync> {
-    return api.patch(`/users/current_user/editor_settings/${id}`, body);
-  },
-  removeUserSetting(id: string): Promise<SettingsSync> {
-    return api.delete(`/users/current_user/editor_settings`);
-  },
   sandboxesLimits() {
     return api.get<{
       sandboxCount: number;
diff --git a/packages/app/src/app/overmind/effects/browserExtension.ts b/packages/app/src/app/overmind/effects/browserExtension.ts
deleted file mode 100644
index 009943fe3c6..00000000000
--- a/packages/app/src/app/overmind/effects/browserExtension.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-export default {
-  install() {
-    return new Promise<void>(resolve => {
-      const win = window.open(
-        'https://chrome.google.com/webstore/detail/hdidglkcgdolpoijdckmafdnddjoglia',
-        'CodeSandbox Extension',
-        'directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,width=1100,height=300'
-      );
-      const interval = setInterval(() => {
-        if (win && win.closed) {
-          clearInterval(interval);
-          resolve();
-        }
-      }, 500);
-    });
-  },
-  setNotifiedImprovedScreenshots() {
-    localStorage.setItem('HAS_NOTIFIED_IMPROVED_SCREENSHOTS', 'true');
-  },
-  hasNotifiedImprovedScreenshots() {
-    return Boolean(localStorage.getItem('HAS_NOTIFIED_IMPROVED_SCREENSHOTS'));
-  },
-  hasExtension(): Promise<boolean> {
-    return new Promise(resolve => {
-      setTimeout(() => {
-        let extensionTimeout;
-        const listener = event => {
-          if (event.data.type === 'extension-pong') {
-            clearTimeout(extensionTimeout);
-            window.removeEventListener('message', listener);
-            resolve(true);
-          }
-        };
-        extensionTimeout = setTimeout(() => {
-          window.removeEventListener('message', listener);
-          resolve(false);
-        }, 1000);
-        window.addEventListener('message', listener);
-        window.postMessage({ type: 'extension-ping' }, '*');
-      }, 3000);
-    });
-  },
-};
diff --git a/packages/app/src/app/overmind/effects/codesandboxApi.ts b/packages/app/src/app/overmind/effects/codesandboxApi.ts
deleted file mode 100755
index 1c4cfb8dca0..00000000000
--- a/packages/app/src/app/overmind/effects/codesandboxApi.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import { dispatch, listen } from 'codesandbox-api';
-
-const listeners = new Map();
-
-export default {
-  listen(action: ({ data }) => void): () => void {
-    if (listeners.get(action)) {
-      listeners.get(action)();
-    }
-
-    const disposer = listen(data => {
-      action({ data: data || {} });
-    });
-    listeners.set(action, disposer);
-
-    return disposer;
-  },
-  restartSandbox() {
-    dispatch({ type: 'socket:message', channel: 'sandbox:restart' });
-  },
-  disconnectSSE() {
-    dispatch({ type: 'codesandbox:sse:disconnect' });
-  },
-  logTerminalMessage(data: any) {
-    dispatch({
-      type: 'terminal:message',
-      data,
-    });
-  },
-  exitShell(data: any) {
-    const { id, code, signal } = data;
-
-    dispatch({
-      type: 'shell:exit',
-      code,
-      signal,
-      id,
-    });
-  },
-  outShell(dataArg: any) {
-    const { id, data } = dataArg;
-
-    dispatch({
-      type: 'shell:out',
-      data,
-      id,
-    });
-  },
-};
diff --git a/packages/app/src/app/overmind/effects/deployment/githubPages.ts b/packages/app/src/app/overmind/effects/deployment/githubPages.ts
deleted file mode 100755
index 69c18149bc8..00000000000
--- a/packages/app/src/app/overmind/effects/deployment/githubPages.ts
+++ /dev/null
@@ -1,113 +0,0 @@
-import getTemplate from "@codesandbox/common/lib/templates";
-import { Sandbox } from "@codesandbox/common/lib/types";
-import axios from "axios";
-
-const GHPagesBaseUrl = "https://builder.micro.codesandbox.io/gh-pages";
-
-type Options = {
-  provideJwtToken: () => Promise<string | null>;
-};
-
-export default (() => {
-  let _options: Options;
-  let _jwtToken: string | undefined;
-  const createHeaders = (jwt: string) =>
-    jwt
-      ? {
-          Authorization: `Bearer ${jwt}`,
-        }
-      : {};
-
-  return {
-    initialize(options: Options) {
-      _options = options;
-    },
-    async provideJwtCached() {
-      if (!_jwtToken) {
-        try {
-          const token = await _options.provideJwtToken();
-          // Token expires after 10 minutes, we cache the token for 8 minutes.
-          const timeout = 1000 * 60 * 8;
-          setTimeout(() => {
-            _jwtToken = undefined;
-          }, timeout);
-          return token;
-        } catch (e) {
-          _jwtToken = undefined;
-          return Promise.reject(e);
-        }
-      }
-
-      return _jwtToken;
-    },
-
-    async getSite(id: string) {
-      const url = `${GHPagesBaseUrl}/${id}`;
-      const token = await this.provideJwtCached();
-
-      const { data } = await axios.get(url, {
-        headers: createHeaders(token),
-      });
-      return data;
-    },
-
-    async getLogs(id: string) {
-      const url = `${GHPagesBaseUrl}/${id}/status`;
-      const token = await this.provideJwtCached();
-
-      const { data } = await axios.get(url, {
-        headers: createHeaders(token),
-      });
-
-      return data;
-    },
-
-    async deploy(sandbox: Sandbox, username: string): Promise<any> {
-      const token = await this.provideJwtCached();
-      const template = getTemplate(sandbox.template);
-      const buildCommand = (name: string) => {
-        if (name === "styleguidist") {
-          return "styleguide:build";
-        }
-        if (name === "nuxt") {
-          return "generate";
-        }
-
-        if (name === "parcel") {
-          return `build --public-url /csb-${sandbox.id}/`;
-        }
-
-        if (name === "preact-cli") {
-          return "build --no-prerender";
-        }
-
-        if (name === "gatsby") {
-          return "build --prefix-paths";
-        }
-
-        return "build";
-      };
-
-      const env = (name: string) => {
-        if (name === "create-react-app") {
-          return `PUBLIC_URL=https://${username.toLowerCase()}.github.io/csb-${
-            sandbox.id
-          }/`;
-        }
-        return "";
-      };
-
-      const website = await axios.post(
-        `${GHPagesBaseUrl}/${sandbox.id}`,
-        {
-          dist: template.distDir,
-          env: env(template.name),
-          buildCommand: buildCommand(template.name),
-        },
-        { headers: createHeaders(token) }
-      );
-
-      return website;
-    },
-  };
-})();
diff --git a/packages/app/src/app/overmind/effects/deployment/netlify.ts b/packages/app/src/app/overmind/effects/deployment/netlify.ts
deleted file mode 100755
index 3e7aa927f86..00000000000
--- a/packages/app/src/app/overmind/effects/deployment/netlify.ts
+++ /dev/null
@@ -1,133 +0,0 @@
-import getTemplate from "@codesandbox/common/lib/templates";
-import { NetlifySite, Sandbox } from "@codesandbox/common/lib/types";
-import getNetlifyConfig from "app/utils/getNetlifyConfig";
-import axios from "axios";
-
-const NetlifyBaseURL = "https://builder.micro.codesandbox.io/netlify/site";
-
-type Options = {
-  getUserId(): string | null;
-  provideJwtToken: () => Promise<string | null>;
-};
-
-export default (() => {
-  let _options: Options;
-  let _jwtToken: string | undefined;
-  const createHeaders = (jwt: string) =>
-    jwt
-      ? {
-          Authorization: `Bearer ${jwt}`,
-        }
-      : {};
-
-  return {
-    initialize(options: Options) {
-      _options = options;
-    },
-    async provideJwtCached() {
-      if (!_jwtToken) {
-        try {
-          const token = await _options.provideJwtToken();
-          // Token expires after 10 minutes, we cache the token for 8 minutes.
-          const timeout = 1000 * 60 * 8;
-          setTimeout(() => {
-            _jwtToken = undefined;
-          }, timeout);
-          return token;
-        } catch (e) {
-          _jwtToken = undefined;
-          return Promise.reject(e);
-        }
-      }
-
-      return _jwtToken;
-    },
-
-    async getLogs(id: string) {
-      const url = `${NetlifyBaseURL}/${id}/status`;
-      const token = await this.provideJwtCached();
-
-      const { data } = await axios.get(url, {
-        headers: createHeaders(token),
-      });
-
-      return data;
-    },
-    async claimSite(sandboxId: string) {
-      const userId = _options.getUserId();
-      const token = await this.provideJwtCached();
-      const sessionId = `${userId}-${sandboxId}`;
-
-      const { data } = await axios.post(
-        `${NetlifyBaseURL}/${sandboxId}/claim`,
-        { sessionId },
-        { headers: createHeaders(token) }
-      );
-
-      return data.claim;
-    },
-    async getDeployments(sandboxId: string): Promise<NetlifySite> {
-      const token = await this.provideJwtCached();
-      const response = await axios.get(`${NetlifyBaseURL}/${sandboxId}`, {
-        headers: createHeaders(token),
-      });
-
-      return response.data;
-    },
-    async deploy(sandbox: Sandbox): Promise<string> {
-      const token = await this.provideJwtCached();
-      const userId = _options.getUserId();
-      const template = getTemplate(sandbox.template);
-      const buildCommand = (name: string) => {
-        if (name === "styleguidist") {
-          return "styleguide:build";
-        }
-
-        if (name === "preact-cli") {
-          return "build --no-prerender";
-        }
-
-        if (name === "nuxt") {
-          return "generate";
-        }
-
-        return "build";
-      };
-      const buildConfig = getNetlifyConfig(sandbox);
-      // command needs to be passed without the package manager name
-      const buildCommandFromConfig = (buildConfig.command || "")
-        .replace("npm run", "")
-        .replace("yarn ", "");
-      let id = "";
-      try {
-        const { data } = await axios.request({
-          url: `${NetlifyBaseURL}/${sandbox.id}`,
-          headers: createHeaders(token),
-        });
-
-        id = data.site_id;
-      } catch (e) {
-        const { data } = await axios.post(
-          NetlifyBaseURL,
-          {
-            name: `csb-${sandbox.id}`,
-            sessionId: `${userId}-${sandbox.id}`,
-          },
-          { headers: createHeaders(token) }
-        );
-        id = data.site_id;
-      }
-      await axios.post(
-        `${NetlifyBaseURL}/${sandbox.id}/deploy`,
-        {
-          siteId: id,
-          dist: buildConfig.publish || template.distDir,
-          buildCommand: buildCommandFromConfig || buildCommand(template.name),
-        },
-        { headers: createHeaders(token) }
-      );
-
-      return id;
-    },
-  };
-})();
diff --git a/packages/app/src/app/overmind/effects/deployment/vercel.ts b/packages/app/src/app/overmind/effects/deployment/vercel.ts
deleted file mode 100755
index 2321016a109..00000000000
--- a/packages/app/src/app/overmind/effects/deployment/vercel.ts
+++ /dev/null
@@ -1,256 +0,0 @@
-import getTemplate from '@codesandbox/common/lib/templates';
-import {
-  Sandbox,
-  VercelConfig,
-  VercelDeployment,
-  VercelUser,
-} from '@codesandbox/common/lib/types';
-import axios from 'axios';
-import { omit } from 'lodash-es';
-
-type Options = {
-  getToken(): string | null;
-};
-
-interface Object {
-  [key: string]: string;
-}
-
-interface ApiData {
-  builds: Object[];
-  config?: Object;
-  deploymentType?: string;
-  env?: Object;
-  files: File[];
-  forceNew?: boolean;
-  name: string;
-  public?: boolean;
-  regions: string[];
-  routes: Object[];
-  scope?: string;
-  version: number;
-  target: string | null;
-}
-
-interface File {
-  data: string;
-  encoding?: string;
-  file: string;
-}
-
-export default (() => {
-  let _options: Options;
-
-  function getDefaultHeaders() {
-    const token = _options.getToken();
-
-    if (!token) {
-      throw new Error('You have no Vercel token');
-    }
-
-    return {
-      Authorization: `bearer ${token}`,
-    };
-  }
-
-  return {
-    initialize(options: Options) {
-      _options = options;
-    },
-    async checkEnvironmentVariables(
-      sandbox: Sandbox,
-      envVars: {
-        [key: string]: string;
-      }
-    ) {
-      const vercelConfig = this.getConfig(sandbox);
-      if (!vercelConfig || !vercelConfig.env) return null;
-      const all = Object.keys(vercelConfig.env).map(async envVar => {
-        const name = vercelConfig.env[envVar].split('@')[1];
-
-        if (envVars[envVar]) {
-          try {
-            await axios.post(
-              `https://api.vercel.com/v3/now/secrets/`,
-              {
-                name,
-                value: envVars[envVar],
-              },
-              { headers: getDefaultHeaders() }
-            );
-            // We don't do anything with the error for two main reasons
-            // 1 - Vercel already shows an error if a ENV variable is missing and you try to deploy
-            // 2 - This will also fail if the user already has the secret in their account
-            // eslint-disable-next-line no-empty
-          } catch {}
-        }
-      });
-
-      await Promise.all(all);
-
-      return null;
-    },
-    getConfig(sandbox: Sandbox): VercelConfig {
-      const vercelConfigFiles = sandbox.modules
-        .filter(
-          m =>
-            m.title === 'vercel.json' ||
-            m.title === 'now.json' ||
-            (m.title === 'package.json' && JSON.parse(m.code).now)
-        )
-        .map(c => JSON.parse(c.code));
-      const vercelConfig = vercelConfigFiles[0] || {};
-
-      if (!vercelConfig.name) {
-        vercelConfig.name = `csb-${sandbox.id}`;
-      }
-
-      return vercelConfig;
-    },
-    async getDeployments(name: string): Promise<VercelDeployment[]> {
-      const response = await axios.get<{ deployments: VercelDeployment[] }>(
-        'https://api.vercel.com/v6/deployments',
-        {
-          headers: getDefaultHeaders(),
-        }
-      );
-
-      const deploys = response.data.deployments
-        .filter(d => d.name === name)
-        .sort((a, b) => (a.created < b.created ? 1 : -1));
-
-      return Promise.all(deploys);
-    },
-    async getUser(): Promise<VercelUser> {
-      const response = await axios.get('https://api.vercel.com/v2/user', {
-        headers: getDefaultHeaders(),
-      });
-
-      return response.data.user;
-    },
-    async deleteDeployment(id: string): Promise<VercelDeployment[]> {
-      const response = await axios.delete(
-        `https://api.vercel.com/v9/now/deployments/${id}`,
-        {
-          headers: getDefaultHeaders(),
-        }
-      );
-      return response.data.deployments;
-    },
-    async deploy(contents: any, sandbox: Sandbox, type?: any): Promise<string> {
-      const apiData = await getApiData(contents, sandbox, type);
-      const deploymentVersion = apiData.version === 2 ? 'v9' : 'v3';
-
-      const response = await axios.post(
-        `https://api.vercel.com/${deploymentVersion}/now/deployments?forceNew=1`,
-        apiData,
-        {
-          headers: getDefaultHeaders(),
-        }
-      );
-
-      return `https://${response.data.url}`;
-    },
-  };
-})();
-
-async function getApiData(contents: any, sandbox: Sandbox, type?: any) {
-  const template = getTemplate(sandbox.template);
-
-  let apiData: Partial<ApiData> = {
-    files: [],
-  };
-  let packageJSON: any = {};
-  let nowJSON: any = {};
-
-  const projectPackage = contents.files['package.json'];
-  const nowFile = contents.files['vercel.json'] || contents.files['now.json'];
-
-  if (projectPackage) {
-    const data = await projectPackage.async('text'); // eslint-disable-line no-await-in-loop
-
-    const parsed = JSON.parse(data);
-    packageJSON = parsed;
-  }
-
-  if (nowFile) {
-    const data = await nowFile.async('text'); // eslint-disable-line no-await-in-loop
-
-    const parsed = JSON.parse(data);
-    nowJSON = parsed;
-  } else if (packageJSON.now) {
-    // Also support package.json if imported like that
-    nowJSON = packageJSON.now;
-  }
-
-  const nowDefaults: Pick<ApiData, 'name'> = {
-    name: `csb-${sandbox.id}`,
-  };
-
-  const filePaths = nowJSON.files || Object.keys(contents.files);
-
-  // We'll omit the homepage-value from package.json as it creates wrong assumptions over the now deployment environment.
-  packageJSON = omit(packageJSON, 'homepage');
-
-  // if the template is static we should not have a build command
-  if (template.name === 'static') {
-    packageJSON = omit(packageJSON, 'scripts.build');
-  }
-  // We force the sandbox id, so Vercel will always group the deployments to a
-  // single sandbox
-  packageJSON.name = nowJSON.name || nowDefaults.name;
-
-  apiData.name = nowJSON.name || nowDefaults.name;
-  apiData.deploymentType = nowJSON.type;
-  if (nowJSON.public) {
-    apiData.public = nowJSON.public;
-  }
-
-  // We need to tell now the version, builds and routes
-  apiData.version = 2;
-  apiData.builds = nowJSON.builds;
-  apiData.routes = nowJSON.routes;
-  apiData.env = nowJSON.env;
-  apiData.scope = nowJSON.scope;
-  apiData['build.env'] = nowJSON['build.env'];
-  apiData.regions = nowJSON.regions;
-  apiData.target = type || 'staging';
-
-  if (!nowJSON.files && apiData?.files) {
-    apiData.files.push({
-      file: 'package.json',
-      data: JSON.stringify(packageJSON, null, 2),
-    });
-  }
-
-  for (let i = 0; i < filePaths.length; i += 1) {
-    const filePath = filePaths[i];
-    const file = contents.files[filePath];
-
-    if (!file.dir && filePath !== 'package.json' && apiData?.files) {
-      const data = await file.async('base64'); // eslint-disable-line no-await-in-loop
-
-      apiData.files.push({ file: filePath, data, encoding: 'base64' });
-    }
-
-    // if person added some files but no package.json
-    if (
-      filePath === 'package.json' &&
-      apiData?.files &&
-      !apiData.files.find(f => f.file === 'package.json')
-    ) {
-      apiData.files.push({
-        file: 'package.json',
-        data: JSON.stringify(packageJSON, null, 2),
-      });
-    }
-  }
-
-  // this adds unnecessary code for version 2
-  // packages/common/templates/template.js
-  if (template.alterDeploymentData && nowJSON.version !== 2) {
-    apiData = template.alterDeploymentData(apiData);
-  }
-
-  return apiData;
-}
diff --git a/packages/app/src/app/overmind/effects/git/export-to-github.ts b/packages/app/src/app/overmind/effects/git/export-to-github.ts
old mode 100755
new mode 100644
diff --git a/packages/app/src/app/overmind/effects/git/index.ts b/packages/app/src/app/overmind/effects/git/index.ts
old mode 100755
new mode 100644
diff --git a/packages/app/src/app/overmind/effects/gql/collaborators/fragments.ts b/packages/app/src/app/overmind/effects/gql/collaborators/fragments.ts
deleted file mode 100644
index 93c28c07f67..00000000000
--- a/packages/app/src/app/overmind/effects/gql/collaborators/fragments.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { gql } from 'overmind-graphql';
-
-export const collaboratorFragment = gql`
-  fragment Collaborator on Collaborator {
-    id
-    authorization
-    lastSeenAt
-    warning
-    user {
-      id
-      username
-      avatarUrl
-    }
-  }
-`;
-
-export const sandboxInvitationFragment = gql`
-  fragment Invitation on Invitation {
-    id
-    authorization
-    email
-  }
-`;
-
-export const sandboxChangedFragment = gql`
-  fragment SandboxChanged on Sandbox {
-    id
-    privacy
-    title
-    description
-    authorization
-  }
-`;
diff --git a/packages/app/src/app/overmind/effects/gql/collaborators/mutations.ts b/packages/app/src/app/overmind/effects/gql/collaborators/mutations.ts
deleted file mode 100644
index 3e5069fb658..00000000000
--- a/packages/app/src/app/overmind/effects/gql/collaborators/mutations.ts
+++ /dev/null
@@ -1,141 +0,0 @@
-import {
-  AddCollaboratorMutation,
-  AddCollaboratorMutationVariables,
-  ChangeCollaboratorAuthorizationMutation,
-  ChangeCollaboratorAuthorizationMutationVariables,
-  ChangeSandboxInvitationAuthorizationMutation,
-  ChangeSandboxInvitationAuthorizationMutationVariables,
-  InviteCollaboratorMutation,
-  InviteCollaboratorMutationVariables,
-  RedeemSandboxInvitationMutation,
-  RedeemSandboxInvitationMutationVariables,
-  RemoveCollaboratorMutation,
-  RemoveCollaboratorMutationVariables,
-  RevokeSandboxInvitationMutation,
-  RevokeSandboxInvitationMutationVariables,
-} from 'app/graphql/types';
-import { gql, Query } from 'overmind-graphql';
-
-import { collaboratorFragment, sandboxInvitationFragment } from './fragments';
-
-export const addCollaborator: Query<
-  AddCollaboratorMutation,
-  AddCollaboratorMutationVariables
-> = gql`
-  mutation AddCollaborator(
-    $sandboxId: ID!
-    $username: String!
-    $authorization: Authorization!
-  ) {
-    addCollaborator(
-      sandboxId: $sandboxId
-      username: $username
-      authorization: $authorization
-    ) {
-      ...Collaborator
-    }
-  }
-  ${collaboratorFragment}
-`;
-
-export const removeCollaborator: Query<
-  RemoveCollaboratorMutation,
-  RemoveCollaboratorMutationVariables
-> = gql`
-  mutation RemoveCollaborator($sandboxId: ID!, $username: String!) {
-    removeCollaborator(sandboxId: $sandboxId, username: $username) {
-      ...Collaborator
-    }
-  }
-  ${collaboratorFragment}
-`;
-
-export const changeCollaboratorAuthorization: Query<
-  ChangeCollaboratorAuthorizationMutation,
-  ChangeCollaboratorAuthorizationMutationVariables
-> = gql`
-  mutation ChangeCollaboratorAuthorization(
-    $sandboxId: ID!
-    $username: String!
-    $authorization: Authorization!
-  ) {
-    changeCollaboratorAuthorization(
-      sandboxId: $sandboxId
-      username: $username
-      authorization: $authorization
-    ) {
-      ...Collaborator
-    }
-  }
-  ${collaboratorFragment}
-`;
-
-export const inviteCollaborator: Query<
-  InviteCollaboratorMutation,
-  InviteCollaboratorMutationVariables
-> = gql`
-  mutation InviteCollaborator(
-    $sandboxId: ID!
-    $authorization: Authorization!
-    $email: String!
-  ) {
-    createSandboxInvitation(
-      sandboxId: $sandboxId
-      authorization: $authorization
-      email: $email
-    ) {
-      ...Invitation
-    }
-  }
-  ${sandboxInvitationFragment}
-`;
-
-export const revokeInvitation: Query<
-  RevokeSandboxInvitationMutation,
-  RevokeSandboxInvitationMutationVariables
-> = gql`
-  mutation RevokeSandboxInvitation($sandboxId: ID!, $invitationId: UUID4!) {
-    revokeSandboxInvitation(
-      sandboxId: $sandboxId
-      invitationId: $invitationId
-    ) {
-      ...Invitation
-    }
-  }
-  ${sandboxInvitationFragment}
-`;
-
-export const changeSandboxInvitationAuthorization: Query<
-  ChangeSandboxInvitationAuthorizationMutation,
-  ChangeSandboxInvitationAuthorizationMutationVariables
-> = gql`
-  mutation ChangeSandboxInvitationAuthorization(
-    $sandboxId: ID!
-    $invitationId: UUID4!
-    $authorization: Authorization!
-  ) {
-    changeSandboxInvitationAuthorization(
-      sandboxId: $sandboxId
-      invitationId: $invitationId
-      authorization: $authorization
-    ) {
-      ...Invitation
-    }
-  }
-  ${sandboxInvitationFragment}
-`;
-
-export const redeemSandboxInvitation: Query<
-  RedeemSandboxInvitationMutation,
-  RedeemSandboxInvitationMutationVariables
-> = gql`
-  mutation RedeemSandboxInvitation($sandboxId: ID!, $invitationToken: String!) {
-    redeemSandboxInvitation(
-      sandboxId: $sandboxId
-      invitationToken: $invitationToken
-    ) {
-      ...Invitation
-    }
-  }
-  ${sandboxInvitationFragment}
-`;
diff --git a/packages/app/src/app/overmind/effects/gql/collaborators/queries.ts b/packages/app/src/app/overmind/effects/gql/collaborators/queries.ts
deleted file mode 100644
index cbb0eca07e2..00000000000
--- a/packages/app/src/app/overmind/effects/gql/collaborators/queries.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import {
-  SandboxCollaboratorsQuery,
-  SandboxCollaboratorsQueryVariables,
-  SandboxInvitationsQuery,
-  SandboxInvitationsQueryVariables,
-} from 'app/graphql/types';
-import { gql, Query } from 'overmind-graphql';
-
-import { collaboratorFragment, sandboxInvitationFragment } from './fragments';
-
-export const collaborators: Query<
-  SandboxCollaboratorsQuery,
-  SandboxCollaboratorsQueryVariables
-> = gql`
-  query SandboxCollaborators($sandboxId: ID!) {
-    sandbox(sandboxId: $sandboxId) {
-      collaborators {
-        ...Collaborator
-      }
-    }
-  }
-  ${collaboratorFragment}
-`;
-
-export const invitations: Query<
-  SandboxInvitationsQuery,
-  SandboxInvitationsQueryVariables
-> = gql`
-  query SandboxInvitations($sandboxId: ID!) {
-    sandbox(sandboxId: $sandboxId) {
-      invitations {
-        ...Invitation
-      }
-    }
-  }
-  ${sandboxInvitationFragment}
-`;
diff --git a/packages/app/src/app/overmind/effects/gql/collaborators/subscriptions.ts b/packages/app/src/app/overmind/effects/gql/collaborators/subscriptions.ts
deleted file mode 100644
index 51d7b201733..00000000000
--- a/packages/app/src/app/overmind/effects/gql/collaborators/subscriptions.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-import * as t from 'app/graphql/types';
-import { gql, Query } from 'overmind-graphql';
-
-import {
-  collaboratorFragment,
-  sandboxChangedFragment,
-  sandboxInvitationFragment,
-} from './fragments';
-
-export const onCollaboratorAdded: Query<
-  t.OnCollaboratorAddedSubscription,
-  t.OnCollaboratorAddedSubscriptionVariables
-> = gql`
-  subscription OnCollaboratorAdded($sandboxId: ID!) {
-    collaboratorAdded(sandboxId: $sandboxId) {
-      ...Collaborator
-    }
-  }
-  ${collaboratorFragment}
-`;
-
-export const onCollaboratorChanged: Query<
-  t.OnCollaboratorChangedSubscription,
-  t.OnCollaboratorChangedSubscriptionVariables
-> = gql`
-  subscription OnCollaboratorChanged($sandboxId: ID!) {
-    collaboratorChanged(sandboxId: $sandboxId) {
-      ...Collaborator
-    }
-  }
-  ${collaboratorFragment}
-`;
-
-export const onCollaboratorRemoved: Query<
-  t.OnCollaboratorRemovedSubscription,
-  t.OnCollaboratorRemovedSubscriptionVariables
-> = gql`
-  subscription OnCollaboratorRemoved($sandboxId: ID!) {
-    collaboratorRemoved(sandboxId: $sandboxId) {
-      ...Collaborator
-    }
-  }
-  ${collaboratorFragment}
-`;
-
-export const onInvitationCreated: Query<
-  t.OnInvitationCreatedSubscription,
-  t.OnInvitationCreatedSubscriptionVariables
-> = gql`
-  subscription OnInvitationCreated($sandboxId: ID!) {
-    invitationCreated(sandboxId: $sandboxId) {
-      ...Invitation
-    }
-  }
-  ${sandboxInvitationFragment}
-`;
-
-export const onInvitationRemoved: Query<
-  t.OnInvitationRemovedSubscription,
-  t.OnInvitationRemovedSubscriptionVariables
-> = gql`
-  subscription OnInvitationRemoved($sandboxId: ID!) {
-    invitationRemoved(sandboxId: $sandboxId) {
-      ...Invitation
-    }
-  }
-  ${sandboxInvitationFragment}
-`;
-
-export const onInvitationChanged: Query<
-  t.OnInvitationChangedSubscription,
-  t.OnInvitationChangedSubscriptionVariables
-> = gql`
-  subscription OnInvitationChanged($sandboxId: ID!) {
-    invitationChanged(sandboxId: $sandboxId) {
-      ...Invitation
-    }
-  }
-  ${sandboxInvitationFragment}
-`;
-
-export const onSandboxChangged: Query<
-  t.OnSandboxChangedSubscription,
-  t.OnSandboxChangedSubscriptionVariables
-> = gql`
-  subscription OnSandboxChanged($sandboxId: ID!) {
-    sandboxChanged(sandboxId: $sandboxId) {
-      ...SandboxChanged
-    }
-  }
-  ${sandboxChangedFragment}
-`;
diff --git a/packages/app/src/app/overmind/effects/gql/comments/fragments.ts b/packages/app/src/app/overmind/effects/gql/comments/fragments.ts
deleted file mode 100644
index cf1519b68cf..00000000000
--- a/packages/app/src/app/overmind/effects/gql/comments/fragments.ts
+++ /dev/null
@@ -1,144 +0,0 @@
-import { gql } from 'overmind-graphql';
-
-export const codeReferenceMetadataFragment = gql`
-  fragment CodeReferenceMetadata on CodeReferenceMetadata {
-    anchor
-    code
-    head
-    path
-  }
-`;
-
-export const userReferenceMetadataFragment = gql`
-  fragment UserReferenceMetadata on UserReferenceMetadata {
-    username
-    userId
-  }
-`;
-
-export const imageReferenceMetadataFragment = gql`
-  fragment ImageReferenceMetadata on ImageReferenceMetadata {
-    fileName
-  }
-`;
-
-export const previewReferenceMetadataFragment = gql`
-  fragment PreviewReferenceMetadata on PreviewReferenceMetadata {
-    width
-    height
-    x
-    y
-    screenshotUrl
-    userAgent
-  }
-`;
-
-export const commentFragment = gql`
-  fragment Comment on Comment {
-    id
-    content
-    insertedAt
-    updatedAt
-    isResolved
-    anchorReference {
-      id
-      metadata {
-        ... on CodeReferenceMetadata {
-          ...CodeReferenceMetadata
-        }
-        ... on PreviewReferenceMetadata {
-          ...PreviewReferenceMetadata
-        }
-      }
-      resource
-      type
-    }
-    references {
-      id
-      metadata {
-        ... on UserReferenceMetadata {
-          ...UserReferenceMetadata
-        }
-        ... on CodeReferenceMetadata {
-          ...CodeReferenceMetadata
-        }
-        ... on ImageReferenceMetadata {
-          ...ImageReferenceMetadata
-        }
-      }
-      resource
-      type
-    }
-    user {
-      id
-      name
-      username
-      avatarUrl
-    }
-    parentComment {
-      id
-    }
-    replyCount
-  }
-  ${codeReferenceMetadataFragment}
-  ${userReferenceMetadataFragment}
-  ${imageReferenceMetadataFragment}
-  ${previewReferenceMetadataFragment}
-`;
-
-export const commentWithRepliesFragment = gql`
-  fragment CommentWithReplies on Comment {
-    id
-    content
-    insertedAt
-    updatedAt
-    isResolved
-    anchorReference {
-      id
-      metadata {
-        ... on CodeReferenceMetadata {
-          ...CodeReferenceMetadata
-        }
-        ... on PreviewReferenceMetadata {
-          ...PreviewReferenceMetadata
-        }
-      }
-      resource
-      type
-    }
-    references {
-      id
-      metadata {
-        ... on UserReferenceMetadata {
-          ...UserReferenceMetadata
-        }
-        ... on CodeReferenceMetadata {
-          ...CodeReferenceMetadata
-        }
-        ... on ImageReferenceMetadata {
-          ...ImageReferenceMetadata
-        }
-      }
-      resource
-      type
-    }
-    user {
-      id
-      name
-      username
-      avatarUrl
-    }
-    parentComment {
-      id
-    }
-    replyCount
-    comments {
-      ...Comment
-    }
-  }
-  ${commentFragment}
-  ${codeReferenceMetadataFragment}
-  ${userReferenceMetadataFragment}
-  ${imageReferenceMetadataFragment}
-  ${previewReferenceMetadataFragment}
-`;
diff --git a/packages/app/src/app/overmind/effects/gql/comments/mutations.ts b/packages/app/src/app/overmind/effects/gql/comments/mutations.ts
deleted file mode 100644
index 02d24d5a527..00000000000
--- a/packages/app/src/app/overmind/effects/gql/comments/mutations.ts
+++ /dev/null
@@ -1,165 +0,0 @@
-import {
-  CreateCodeCommentMutation,
-  CreateCodeCommentMutationVariables,
-  CreateCommentMutation,
-  CreateCommentMutationVariables,
-  DeleteCommentMutation,
-  DeleteCommentMutationVariables,
-  ResolveCommentMutation,
-  ResolveCommentMutationVariables,
-  UnresolveCommentMutation,
-  UnresolveCommentMutationVariables,
-  UpdateCommentMutation,
-  UpdateCommentMutationVariables,
-  CreatePreviewCommentMutation,
-  CreatePreviewCommentMutationVariables,
-} from 'app/graphql/types';
-import { Query, gql } from 'overmind-graphql';
-
-import { commentFragment } from './fragments';
-
-export const createComment: Query<
-  CreateCommentMutation,
-  CreateCommentMutationVariables
-> = gql`
-  mutation CreateComment(
-    $id: ID
-    $content: String!
-    $sandboxId: ID!
-    $parentCommentId: ID
-    $userReferences: [UserReference!]
-    $codeReferences: [CodeReference!]
-    $imageReferences: [ImageReference!]
-  ) {
-    createComment(
-      id: $id
-      content: $content
-      sandboxId: $sandboxId
-      parentCommentId: $parentCommentId
-      userReferences: $userReferences
-      codeReferences: $codeReferences
-      imageReferences: $imageReferences
-    ) {
-      ...Comment
-    }
-  }
-  ${commentFragment}
-`;
-
-export const createCodeComment: Query<
-  CreateCodeCommentMutation,
-  CreateCodeCommentMutationVariables
-> = gql`
-  mutation CreateCodeComment(
-    $id: ID
-    $content: String!
-    $sandboxId: ID!
-    $parentCommentId: ID
-    $anchorReference: CodeReference!
-    $userReferences: [UserReference!]
-    $codeReferences: [CodeReference!]
-    $imageReferences: [ImageReference!]
-  ) {
-    createCodeComment(
-      id: $id
-      content: $content
-      sandboxId: $sandboxId
-      parentCommentId: $parentCommentId
-      anchorReference: $anchorReference
-      userReferences: $userReferences
-      codeReferences: $codeReferences
-      imageReferences: $imageReferences
-    ) {
-      ...Comment
-    }
-  }
-  ${commentFragment}
-`;
-
-export const createPreviewComment: Query<
-  CreatePreviewCommentMutation,
-  CreatePreviewCommentMutationVariables
-> = gql`
-  mutation CreatePreviewComment(
-    $id: ID
-    $content: String!
-    $sandboxId: ID!
-    $parentCommentId: ID
-    $anchorReference: PreviewReference!
-    $userReferences: [UserReference!]
-    $codeReferences: [CodeReference!]
-    $imageReferences: [ImageReference!]
-  ) {
-    createPreviewComment(
-      id: $id
-      content: $content
-      sandboxId: $sandboxId
-      parentCommentId: $parentCommentId
-      anchorReference: $anchorReference
-      userReferences: $userReferences
-      codeReferences: $codeReferences
-      imageReferences: $imageReferences
-    ) {
-      ...Comment
-    }
-  }
-  ${commentFragment}
-`;
-
-export const deleteComment: Query<
-  DeleteCommentMutation,
-  DeleteCommentMutationVariables
-> = gql`
-  mutation DeleteComment($commentId: UUID4!, $sandboxId: ID!) {
-    deleteComment(commentId: $commentId, sandboxId: $sandboxId) {
-      id
-    }
-  }
-`;
-
-export const updateComment: Query<
-  UpdateCommentMutation,
-  UpdateCommentMutationVariables
-> = gql`
-  mutation UpdateComment(
-    $commentId: UUID4!
-    $sandboxId: ID!
-    $content: String
-    $userReferences: [UserReference!]
-    $codeReferences: [CodeReference!]
-    $imageReferences: [ImageReference!]
-  ) {
-    updateComment(
-      commentId: $commentId
-      sandboxId: $sandboxId
-      content: $content
-      userReferences: $userReferences
-      codeReferences: $codeReferences
-      imageReferences: $imageReferences
-    ) {
-      id
-    }
-  }
-`;
-
-export const resolveComment: Query<
-  ResolveCommentMutation,
-  ResolveCommentMutationVariables
-> = gql`
-  mutation ResolveComment($commentId: UUID4!, $sandboxId: ID!) {
-    resolveComment(commentId: $commentId, sandboxId: $sandboxId) {
-      id
-    }
-  }
-`;
-
-export const unresolveComment: Query<
-  UnresolveCommentMutation,
-  UnresolveCommentMutationVariables
-> = gql`
-  mutation UnresolveComment($commentId: UUID4!, $sandboxId: ID!) {
-    unresolveComment(commentId: $commentId, sandboxId: $sandboxId) {
-      id
-    }
-  }
-`;
diff --git a/packages/app/src/app/overmind/effects/gql/comments/queries.ts b/packages/app/src/app/overmind/effects/gql/comments/queries.ts
deleted file mode 100644
index 95c387560ad..00000000000
--- a/packages/app/src/app/overmind/effects/gql/comments/queries.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import {
-  SandboxCommentQuery,
-  SandboxCommentQueryVariables,
-  SandboxCommentsQuery,
-  SandboxCommentsQueryVariables,
-} from 'app/graphql/types';
-import { gql, Query } from 'overmind-graphql';
-
-import { commentFragment, commentWithRepliesFragment } from './fragments';
-
-export const comment: Query<
-  SandboxCommentQuery,
-  SandboxCommentQueryVariables
-> = gql`
-  query SandboxComment($sandboxId: ID!, $commentId: UUID4!) {
-    sandbox(sandboxId: $sandboxId) {
-      comment(commentId: $commentId) {
-        ...CommentWithReplies
-      }
-    }
-  }
-  ${commentWithRepliesFragment}
-`;
-
-export const comments: Query<
-  SandboxCommentsQuery,
-  SandboxCommentsQueryVariables
-> = gql`
-  query SandboxComments($sandboxId: ID!) {
-    sandbox(sandboxId: $sandboxId) {
-      comments {
-        ...Comment
-      }
-    }
-  }
-  ${commentFragment}
-`;
diff --git a/packages/app/src/app/overmind/effects/gql/comments/subscriptions.ts b/packages/app/src/app/overmind/effects/gql/comments/subscriptions.ts
deleted file mode 100644
index aad22506580..00000000000
--- a/packages/app/src/app/overmind/effects/gql/comments/subscriptions.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import {
-  CommentAddedSubscription,
-  CommentAddedSubscriptionVariables,
-  CommentChangedSubscription,
-  CommentChangedSubscriptionVariables,
-  CommentRemovedSubscription,
-  CommentRemovedSubscriptionVariables,
-} from 'app/graphql/types';
-import { gql, Query } from 'overmind-graphql';
-
-import { commentFragment } from './fragments';
-
-export const commentAdded: Query<
-  CommentAddedSubscription,
-  CommentAddedSubscriptionVariables
-> = gql`
-  subscription CommentAdded($sandboxId: ID!) {
-    commentAdded(sandboxId: $sandboxId) {
-      ...Comment
-      sandbox {
-        id
-      }
-    }
-  }
-  ${commentFragment}
-`;
-
-export const commentChanged: Query<
-  CommentChangedSubscription,
-  CommentChangedSubscriptionVariables
-> = gql`
-  subscription CommentChanged($sandboxId: ID!) {
-    commentChanged(sandboxId: $sandboxId) {
-      ...Comment
-      sandbox {
-        id
-      }
-    }
-  }
-  ${commentFragment}
-`;
-
-export const commentRemoved: Query<
-  CommentRemovedSubscription,
-  CommentRemovedSubscriptionVariables
-> = gql`
-  subscription CommentRemoved($sandboxId: ID!) {
-    commentRemoved(sandboxId: $sandboxId) {
-      ...Comment
-      sandbox {
-        id
-      }
-    }
-  }
-  ${commentFragment}
-`;
diff --git a/packages/app/src/app/overmind/effects/gql/index.ts b/packages/app/src/app/overmind/effects/gql/index.ts
index a73f8d5f75c..a2bdea913c8 100644
--- a/packages/app/src/app/overmind/effects/gql/index.ts
+++ b/packages/app/src/app/overmind/effects/gql/index.ts
@@ -1,11 +1,5 @@
 import { graphql } from 'overmind-graphql';
 
-import * as collaboratorsMutations from './collaborators/mutations';
-import * as collaboratorsQueries from './collaborators/queries';
-import * as collaboratorsSubscriptions from './collaborators/subscriptions';
-import * as commentsMutations from './comments/mutations';
-import * as commentsQueries from './comments/queries';
-import * as commentSubscriptions from './comments/subscriptions';
 import * as teamsQueries from './teams/queries';
 
 import * as dashboardQueries from './dashboard/queries';
@@ -17,21 +11,13 @@ import * as notificationsQueries from './notifications/queries';
 import * as notificationsMutations from './notifications/mutations';
 
 export default graphql({
-  subscriptions: {
-    ...collaboratorsSubscriptions,
-    ...commentSubscriptions,
-  },
   queries: {
-    ...collaboratorsQueries,
-    ...commentsQueries,
     ...teamsQueries,
     ...dashboardQueries,
     ...sidebarQueries,
     ...notificationsQueries,
   },
   mutations: {
-    ...collaboratorsMutations,
-    ...commentsMutations,
     ...dashboardMutations,
     ...notificationsMutations,
   },
diff --git a/packages/app/src/app/overmind/effects/index.ts b/packages/app/src/app/overmind/effects/index.ts
index ce415ee5621..72a017f0430 100755
--- a/packages/app/src/app/overmind/effects/index.ts
+++ b/packages/app/src/app/overmind/effects/index.ts
@@ -1,30 +1,16 @@
 export { default as utils } from './utils';
-export { default as git } from './git';
 export { default as api } from './api';
 export { default as browser } from './browser';
 export { default as connection } from './connection';
-export { default as jsZip } from './jsZip';
-export { default as live } from './live';
-export { default as moduleRecover } from './moduleRecover';
 export { default as notifications } from './notifications';
 export { default as router } from './router';
 export { default as settingsStore } from './settingsStore';
-export { default as sse } from './sse';
 export { default as http } from './http';
 export { default as analytics } from './analytics';
 export { default as notificationToast } from './notificationToast';
-export { default as vscode } from './vscode';
-export { default as vercel } from './deployment/vercel';
-export { default as githubPages } from './deployment/githubPages';
-export { default as netlify } from './deployment/netlify';
-export { default as prettyfier } from './prettyfier';
 export { default as zip } from './zip';
-export { default as codesandboxApi } from './codesandboxApi';
-export { default as themes } from './themes';
 export { default as executor } from './executor';
-export { default as stripe } from './stripe';
-export { default as preview } from './preview';
 export { default as flows } from './flows';
 export { default as gql } from './gql';
-export { default as algoliaSearch } from './algoliaSearch';
-export { default as browserExtension } from './browserExtension';
+export { default as live } from './live';
+export { default as git } from './git';
diff --git a/packages/app/src/app/overmind/effects/jsZip.ts b/packages/app/src/app/overmind/effects/jsZip.ts
deleted file mode 100755
index a7aca238454..00000000000
--- a/packages/app/src/app/overmind/effects/jsZip.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import JSZip from 'jszip';
-
-export default {
-  loadAsync(file) {
-    return JSZip.loadAsync(file);
-  },
-};
diff --git a/packages/app/src/app/overmind/effects/live/clients.test.ts b/packages/app/src/app/overmind/effects/live/clients.test.ts
deleted file mode 100644
index 7edede25164..00000000000
--- a/packages/app/src/app/overmind/effects/live/clients.test.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { getTextOperation } from '@codesandbox/common/lib/utils/diff';
-import { CodeSandboxOTClient } from './clients';
-
-describe('OTClient', () => {
-  it("it doesn't acknowledge the same revision twice", async () => {
-    const client = new CodeSandboxOTClient(
-      0,
-      'test',
-      (revision, operation) => Promise.resolve({}),
-      operation => {}
-    );
-
-    const op = getTextOperation('ab', 'a');
-
-    // The case we're trying to solve here:
-    // (1) applyClient -> (no ack received)
-    // -----
-    // serverReconnect
-    // (2) applyClient. Sent by serverReconnect
-    // (1) resolves. Resolved because of Phoenix
-    // (2) resolves. Resolved because of server reconnect
-
-    client.applyClient(op);
-    await client.sendOperation(0, op);
-
-    expect(client.revision).toBe(1);
-  });
-});
diff --git a/packages/app/src/app/overmind/effects/live/clients.ts b/packages/app/src/app/overmind/effects/live/clients.ts
deleted file mode 100755
index d20de33a655..00000000000
--- a/packages/app/src/app/overmind/effects/live/clients.ts
+++ /dev/null
@@ -1,228 +0,0 @@
-import {
-  captureException,
-  logBreadcrumb,
-} from '@codesandbox/common/lib/utils/analytics/sentry';
-import { Blocker, blocker } from 'app/utils/blocker';
-import { TextOperation, SerializedTextOperation } from 'ot';
-
-import { OTClient, synchronized_ } from './ot/client';
-
-export type SendOperationResponse =
-  | {
-      composed_operation: SerializedTextOperation;
-      revision: number;
-    }
-  | {};
-
-export type SendOperation = (
-  moduleShortid: string,
-  revision: number,
-  operation: TextOperation
-) => Promise<SendOperationResponse>;
-
-export type ApplyOperation = (
-  moduleShortid: string,
-  operation: TextOperation
-) => void;
-
-export class CodeSandboxOTClient extends OTClient {
-  /*
-    We need to be able to wait for a client to go intro synchronized
-    state. The reason is that we want to send a "save" event when the
-    client is synchronized
-  */
-  public awaitSynchronized: Blocker<void> | null;
-  moduleShortid: string;
-  onSendOperation: (
-    revision: number,
-    operation: TextOperation
-  ) => Promise<SendOperationResponse>;
-
-  onApplyOperation: (operation: TextOperation) => void;
-
-  constructor(
-    revision: number,
-    moduleShortid: string,
-    onSendOperation: (
-      revision: number,
-      operation: TextOperation
-    ) => Promise<SendOperationResponse>,
-    onApplyOperation: (operation: TextOperation) => void
-  ) {
-    super(revision);
-    this.moduleShortid = moduleShortid;
-    this.lastAcknowledgedRevision = revision - 1;
-    this.onSendOperation = onSendOperation;
-    this.onApplyOperation = onApplyOperation;
-  }
-
-  lastAcknowledgedRevision: number = -1;
-  sendOperation(revision: number, operation: TextOperation) {
-    // Whenever we send an operation we enable the blocker
-    // that lets us wait for its resolvment when moving back
-    // to synchronized state
-    if (!this.awaitSynchronized) {
-      this.awaitSynchronized = blocker();
-    }
-
-    return this.onSendOperation(revision, operation)
-      .then(result => {
-        logBreadcrumb({
-          category: 'ot',
-          message: `Acknowledging ${JSON.stringify({
-            moduleShortid: this.moduleShortid,
-            revision,
-            operation,
-          })}`,
-        });
-
-        if (
-          'revision' in result &&
-          this.revision !== result.revision &&
-          result.composed_operation.length
-        ) {
-          this.resync(
-            TextOperation.fromJSON(result.composed_operation),
-            result.revision
-          );
-        }
-
-        try {
-          this.safeServerAck(revision);
-        } catch (err) {
-          captureException(
-            new Error(
-              `Server Ack ERROR ${JSON.stringify({
-                moduleShortid: this.moduleShortid,
-                currentRevision: this.revision,
-                currentState: this.state.name,
-                operation,
-              })}`
-            )
-          );
-        }
-      })
-      .catch(error => {
-        // If an operation errors on the server we will reject
-        // the blocker, as an action might be waiting for it to resolve,
-        // creating a user friendly error related to trying to save
-        if (this.awaitSynchronized) {
-          this.awaitSynchronized.reject(error);
-        }
-
-        throw error;
-      });
-  }
-
-  applyOperation(operation: TextOperation) {
-    this.onApplyOperation(operation);
-  }
-
-  resetAwaitSynchronized() {
-    // If we are back in synchronized state we resolve the blocker
-    if (this.state === synchronized_ && this.awaitSynchronized) {
-      const awaitSynchronized = this.awaitSynchronized;
-      this.awaitSynchronized = null;
-      awaitSynchronized.resolve();
-    }
-  }
-
-  safeServerAck(revision: number) {
-    // We make sure to not acknowledge the same revision twice
-    if (this.lastAcknowledgedRevision < revision) {
-      this.lastAcknowledgedRevision = revision;
-      super.serverAck();
-    }
-
-    this.resetAwaitSynchronized();
-  }
-
-  applyClient(operation: TextOperation) {
-    logBreadcrumb({
-      category: 'ot',
-      message: `Apply Client ${JSON.stringify({
-        moduleShortid: this.moduleShortid,
-        currentRevision: this.revision,
-        currentState: this.state.name,
-        operation,
-      })}`,
-    });
-
-    super.applyClient(operation);
-  }
-
-  applyServer(operation: TextOperation) {
-    logBreadcrumb({
-      category: 'ot',
-      message: `Apply Server ${JSON.stringify({
-        moduleShortid: this.moduleShortid,
-        currentRevision: this.revision,
-        currentState: this.state.name,
-        operation,
-      })}`,
-    });
-
-    super.applyServer(operation);
-  }
-
-  serverReconnect() {
-    super.serverReconnect();
-  }
-
-  resync(operation: TextOperation, newRevision: number) {
-    this.applyServer(operation);
-    this.revision = newRevision;
-  }
-}
-
-export class CodesandboxOTClientsManager {
-  private modules = new Map<string, CodeSandboxOTClient>();
-  private sendOperation: SendOperation;
-  private applyOperation: ApplyOperation;
-  constructor(sendOperation: SendOperation, applyOperation: ApplyOperation) {
-    this.sendOperation = sendOperation;
-    this.applyOperation = applyOperation;
-  }
-
-  getAll() {
-    return Array.from(this.modules.values());
-  }
-
-  has(moduleShortid: string) {
-    return this.modules.has(moduleShortid);
-  }
-
-  get(moduleShortid, revision = 0, force = false) {
-    let client = this.modules.get(moduleShortid);
-
-    if (!client || force) {
-      client = this.create(moduleShortid, revision);
-    }
-
-    return client!;
-  }
-
-  create(moduleShortid, initialRevision) {
-    const client = new CodeSandboxOTClient(
-      initialRevision || 0,
-      moduleShortid,
-      (revision, operation) =>
-        this.sendOperation(moduleShortid, revision, operation),
-      operation => {
-        this.applyOperation(moduleShortid, operation);
-      }
-    );
-    this.modules.set(moduleShortid, client);
-
-    return client;
-  }
-
-  reset(moduleShortid, revision) {
-    this.modules.delete(moduleShortid);
-    this.create(moduleShortid, revision);
-  }
-
-  clear() {
-    this.modules.clear();
-  }
-}
diff --git a/packages/app/src/app/overmind/effects/live/index.ts b/packages/app/src/app/overmind/effects/live/index.ts
index f6cf5f2ed42..f4ecb40b79e 100755
--- a/packages/app/src/app/overmind/effects/live/index.ts
+++ b/packages/app/src/app/overmind/effects/live/index.ts
@@ -1,38 +1,17 @@
 import {
-  Directory,
   IModuleStateModule,
   LiveMessageEvent,
-  Module,
   RoomInfo,
-  UserSelection,
-  UserViewRange,
 } from '@codesandbox/common/lib/types';
-import { blocker } from 'app/utils/blocker';
-import {
-  captureException,
-  logBreadcrumb,
-} from '@codesandbox/common/lib/utils/analytics/sentry';
 import _debug from '@codesandbox/common/lib/utils/debug';
 import VERSION from '@codesandbox/common/lib/version';
 import { camelizeKeys } from 'humps';
-import { SerializedTextOperation, TextOperation } from 'ot';
-import { Channel, Presence, Socket } from 'phoenix';
-import * as uuid from 'uuid';
+import { Channel, Socket } from 'phoenix';
 
 import { AxiosError } from 'axios';
-import { OPTIMISTIC_ID_PREFIX } from '../utils';
-import { CodesandboxOTClientsManager, SendOperationResponse } from './clients';
 
 type Options = {
-  onApplyOperation(args: {
-    moduleShortid: string;
-    operation: TextOperation;
-  }): void;
   provideJwtToken(): Promise<string>;
-  onOperationError(payload: {
-    moduleShortid: string;
-    moduleInfo: IModuleStateModule;
-  }): void;
 };
 
 type JoinChannelResponse = {
@@ -57,82 +36,13 @@ declare global {
 class Live {
   public socket: Socket;
 
-  private identifier = uuid.v4();
   private pendingMessages = new Map();
   private debug = _debug('cs:socket');
   private channel: Channel | null;
-  private messageIndex = 0;
-  private clientsManager: CodesandboxOTClientsManager;
-  private presence: Presence;
   private provideJwtToken: () => Promise<string>;
-  private onApplyOperation: (moduleShortid: string, operation: any) => void;
-  private onOperationError: (payload: {
-    moduleShortid: string;
-    moduleInfo: IModuleStateModule;
-  }) => void;
-
-  private liveInitialized = blocker();
-
-  private connectionsCount = 0;
-
-  private onSendOperation = async (
-    moduleShortid: string,
-    revision: number,
-    operation: TextOperation
-  ) => {
-    logBreadcrumb({
-      category: 'ot',
-      message: `Sending ${JSON.stringify({
-        moduleShortid,
-        revision,
-        operation,
-      })}`,
-    });
-
-    return this.send<SendOperationResponse>(
-      'operation',
-      {
-        moduleShortid,
-        operation: operation.toJSON(),
-        revision,
-      },
-      45000
-    ).catch(error => {
-      logBreadcrumb({
-        category: 'ot',
-        message: `ERROR ${JSON.stringify({
-          moduleShortid,
-          revision,
-          operation,
-          message: error.message,
-        })}`,
-      });
-
-      captureException(error);
-      if (error.module_state) {
-        this.onOperationError({
-          moduleInfo: error.module_state[moduleShortid],
-          moduleShortid,
-        });
-      }
-      throw new Error(
-        'The code was out of sync with the server, we had to reset the file'
-      );
-    });
-  };
 
   initialize(options: Options) {
     this.provideJwtToken = options.provideJwtToken;
-    this.onOperationError = options.onOperationError;
-    this.onApplyOperation = (moduleShortid, operation) =>
-      options.onApplyOperation({
-        moduleShortid,
-        operation,
-      });
-    this.clientsManager = new CodesandboxOTClientsManager(
-      this.onSendOperation,
-      this.onApplyOperation
-    );
   }
 
   getSocket() {
@@ -254,7 +164,6 @@ class Live {
           this.channel.onMessage = d => d;
           this.channel = null;
           this.pendingMessages.clear();
-          this.messageIndex = 0;
 
           return resolve(resp);
         })
@@ -286,11 +195,6 @@ class Live {
             reconnect_token: result.reconnectToken,
           });
 
-          this.presence = new Presence(this.channel!);
-          this.presence.onSync(() => {
-            this.connectionsCount = this.presence.list().length;
-          });
-
           resolve(result);
         })
         .receive('error', (resp: JoinChannelErrorResponse) => {
@@ -341,273 +245,6 @@ class Live {
       return data;
     };
   }
-
-  private send<T>(event, payload: any = {}, timeout = 10000): Promise<T> {
-    const _messageId = this.identifier + this.messageIndex++;
-    // eslint-disable-next-line
-    payload._messageId = _messageId;
-    this.pendingMessages.set(_messageId, payload);
-
-    return new Promise((resolve, reject) => {
-      if (this.channel) {
-        this.channel
-          .push(event, payload, timeout)
-          .receive('ok', resolve)
-          .receive('error', reject)
-          .receive('timeout', () => {
-            const error = new Error();
-            error.name = 'live-timeout';
-            error.message = `Live timeout on '${event}'`;
-            reject(error);
-          });
-      } else {
-        // we might try to send messages even when not on live, just
-        // ignore it
-        // @ts-ignore this is probably not safe but whatever
-        resolve(undefined);
-      }
-    });
-  }
-
-  awaitModuleSynced(moduleShortid: string) {
-    return Promise.resolve(
-      this.clientsManager.get(moduleShortid).awaitSynchronized?.promise
-    );
-  }
-
-  sendModuleUpdate(module: Module) {
-    return this.send('module:updated', {
-      type: 'module',
-      moduleShortid: module.shortid,
-      module,
-    });
-  }
-
-  sendDirectoryUpdate(directory: Directory) {
-    return this.send('directory:updated', {
-      type: 'directory',
-      directoryShortid: directory.shortid,
-      module: directory,
-    });
-  }
-
-  sendCodeUpdate(moduleShortid: string, operation: TextOperation) {
-    if (!operation) {
-      return;
-    }
-
-    if (operation.ops.length === 1) {
-      const [op] = operation.ops;
-      if (typeof op === 'number' && op >= 0) {
-        // Useless to send a single retain operation, ignore
-        return;
-      }
-    }
-
-    if (moduleShortid.startsWith(OPTIMISTIC_ID_PREFIX)) {
-      // Module is an optimistic module, we will send a full code update
-      // once the module has been created, until then, send nothing!
-      return;
-    }
-
-    try {
-      this.clientsManager.get(moduleShortid).applyClient(operation);
-    } catch (e) {
-      e.name = 'OperationFailure';
-      captureException(e);
-      // Something went wrong, probably a sync mismatch. Request new version
-      this.send('live:module_state', {});
-    }
-  }
-
-  sendExternalResourcesChanged(externalResources: string[]) {
-    return this.send('sandbox:external-resources', {
-      externalResources,
-    });
-  }
-
-  sendUserCurrentModule(moduleShortid: string) {
-    return this.send('user:current-module', {
-      moduleShortid,
-    });
-  }
-
-  sendDirectoryCreated(directory: Directory) {
-    return this.send('directory:created', {
-      type: 'directory',
-      module: directory,
-    });
-  }
-
-  sendDirectoryDeleted(directoryShortid: string) {
-    this.send('directory:deleted', {
-      type: 'directory',
-      directoryShortid,
-    });
-  }
-
-  sendModuleCreated(module: Module) {
-    return this.send('module:created', {
-      type: 'module',
-      moduleShortid: module.shortid,
-      module,
-    });
-  }
-
-  sendModuleDeleted(moduleShortid: string) {
-    return this.send('module:deleted', {
-      type: 'module',
-      moduleShortid,
-    });
-  }
-
-  sendMassCreatedModules(modules: Module[], directories: Directory[]) {
-    return this.send('module:mass-created', {
-      directories,
-      modules,
-    });
-  }
-
-  sendLiveMode(mode: RoomInfo['mode']) {
-    return this.send('live:mode', {
-      mode,
-    });
-  }
-
-  sendEditorAdded(liveUserId: string) {
-    return this.send('live:add-editor', {
-      editor_user_id: liveUserId,
-    });
-  }
-
-  sendEditorRemoved(liveUserId: string) {
-    return this.send('live:remove-editor', {
-      editor_user_id: liveUserId,
-    });
-  }
-
-  sendModuleSaved(module: Module) {
-    return this.send('module:saved', {
-      type: 'module',
-      module,
-      moduleShortid: module.shortid,
-    });
-  }
-
-  sendClosed() {
-    return this.send('live:close', {});
-  }
-
-  sendChat(message: string) {
-    return this.send('chat', {
-      message,
-    });
-  }
-
-  sendChatEnabled(enabled: boolean) {
-    return this.send('live:chat_enabled', { enabled });
-  }
-
-  sendModuleStateSyncRequest() {
-    return this.send('live:module_state', {});
-  }
-
-  sendUserViewRange(
-    moduleShortid: string | null,
-    liveUserId: string,
-    viewRange: UserViewRange
-  ) {
-    if (this.connectionsCount === 1) {
-      return Promise.resolve();
-    }
-
-    return this.send('user:view-range', {
-      liveUserId,
-      moduleShortid,
-      viewRange,
-    });
-  }
-
-  sendUserSelection(
-    moduleShortid: string | null,
-    liveUserId: string,
-    selection: UserSelection
-  ) {
-    if (this.connectionsCount === 1) {
-      return Promise.resolve();
-    }
-
-    return this.send('user:selection', {
-      liveUserId,
-      moduleShortid,
-      selection,
-    });
-  }
-
-  async saveModule(module: Module) {
-    const client = this.clientsManager.get(module.shortid);
-    await client.awaitSynchronized?.promise;
-
-    return this.send<{
-      saved_code: string;
-      updated_at: string;
-      inserted_at: string;
-      version: number;
-    }>('save', {
-      path: module.path,
-      revision: client.revision - 1,
-    });
-  }
-
-  waitForLiveReady() {
-    return this.liveInitialized.promise;
-  }
-
-  markLiveReady() {
-    this.liveInitialized.resolve(undefined);
-  }
-
-  reset() {
-    this.clientsManager.clear();
-    this.liveInitialized.reject(undefined);
-    this.liveInitialized = blocker();
-  }
-
-  resetClient(moduleShortid: string, revision: number) {
-    this.clientsManager.reset(moduleShortid, revision);
-  }
-
-  hasClient(moduleShortid: string) {
-    return this.clientsManager.has(moduleShortid);
-  }
-
-  getClient(moduleShortid: string) {
-    return this.clientsManager.get(moduleShortid);
-  }
-
-  getAllClients() {
-    return this.clientsManager.getAll();
-  }
-
-  applyClient(moduleShortid: string, operation: SerializedTextOperation) {
-    return this.clientsManager
-      .get(moduleShortid)
-      .applyClient(TextOperation.fromJSON(operation));
-  }
-
-  applyServer(moduleShortid: string, operation: SerializedTextOperation) {
-    return this.clientsManager
-      .get(moduleShortid)
-      .applyServer(TextOperation.fromJSON(operation));
-  }
-
-  serverAck(moduleShortid: string) {
-    return this.clientsManager.get(moduleShortid).serverAck();
-  }
-
-  createClient(moduleShortid: string, revision: number) {
-    return this.clientsManager.create(moduleShortid, revision);
-  }
 }
 
 export default new Live();
diff --git a/packages/app/src/app/overmind/effects/live/ot/client.ts b/packages/app/src/app/overmind/effects/live/ot/client.ts
deleted file mode 100644
index 3f9b6c0a8dd..00000000000
--- a/packages/app/src/app/overmind/effects/live/ot/client.ts
+++ /dev/null
@@ -1,208 +0,0 @@
-// translation of https://github.com/djspiewak/cccp/blob/master/agent/src/main/scala/com/codecommit/cccp/agent/state.scala
-/* eslint-disable react/no-access-state-in-setstate */
-
-import { TextOperation } from 'ot';
-
-interface IState {
-  name: string;
-  applyClient(client: OTClient, operation: TextOperation): IState;
-  applyServer(client: OTClient, operation: TextOperation): IState;
-  serverAck(client: OTClient): IState;
-  transformSelection<T>(selection: T): T;
-  resend?(client: OTClient): void;
-}
-
-// In the 'Synchronized' state, there is no pending operation that the client
-// has sent to the server.
-class Synchronized implements IState {
-  name = 'Synchronized';
-
-  applyClient(client: OTClient, operation: TextOperation) {
-    // When the user makes an edit, send the operation to the server and
-    // switch to the 'AwaitingConfirm' state
-    client.sendOperation(client.revision, operation);
-    return new AwaitingConfirm(operation);
-  }
-
-  applyServer(client: OTClient, operation: TextOperation) {
-    // When we receive a new operation from the server, the operation can be
-    // simply applied to the current document
-    client.applyOperation(operation);
-    return this;
-  }
-
-  serverAck(client: OTClient): IState {
-    throw new Error('There is no pending operation.');
-  }
-
-  // Nothing to do because the latest server state and client state are the same.
-  transformSelection(x) {
-    return x;
-  }
-}
-
-// Singleton
-export const synchronized_ = new Synchronized();
-
-// In the 'AwaitingConfirm' state, there's one operation the client has sent
-// to the server and is still waiting for an acknowledgement.
-class AwaitingConfirm implements IState {
-  outstanding: TextOperation;
-  name = 'AwaitingConfirm';
-
-  constructor(outstanding: TextOperation) {
-    // Save the pending operation
-    this.outstanding = outstanding;
-  }
-
-  applyClient(client: OTClient, operation: TextOperation) {
-    // When the user makes an edit, don't send the operation immediately,
-    // instead switch to 'AwaitingWithBuffer' state
-    return new AwaitingWithBuffer(this.outstanding, operation);
-  }
-
-  applyServer(client: OTClient, operation: TextOperation) {
-    // This is another client's operation. Visualization:
-    //
-    //                   /\
-    // this.outstanding /  \ operation
-    //                 /    \
-    //                 \    /
-    //  pair[1]         \  / pair[0] (new outstanding)
-    //  (can be applied  \/
-    //  to the client's
-    //  current document)
-    const pair = TextOperation.transform(this.outstanding, operation);
-    client.applyOperation(pair[1]);
-    return new AwaitingConfirm(pair[0]);
-  }
-
-  serverAck(client: OTClient) {
-    // The client's operation has been acknowledged
-    // => switch to synchronized state
-    return synchronized_;
-  }
-
-  transformSelection(selection: any) {
-    return selection.transform(this.outstanding);
-  }
-
-  resend(client: OTClient) {
-    // The confirm didn't come because the client was disconnected.
-    // Now that it has reconnected, we resend the outstanding operation.
-    client.sendOperation(client.revision, this.outstanding);
-  }
-}
-
-// In the 'AwaitingWithBuffer' state, the client is waiting for an operation
-// to be acknowledged by the server while buffering the edits the user makes
-class AwaitingWithBuffer implements IState {
-  outstanding: TextOperation;
-  buffer: TextOperation;
-
-  name = 'AwaitingWithBuffer';
-
-  constructor(outstanding: TextOperation, buffer: TextOperation) {
-    // Save the pending operation and the user's edits since then
-    this.outstanding = outstanding;
-    this.buffer = buffer;
-  }
-
-  applyClient(client: OTClient, operation: TextOperation) {
-    // Compose the user's changes onto the buffer
-    const newBuffer = this.buffer.compose(operation);
-    return new AwaitingWithBuffer(this.outstanding, newBuffer);
-  }
-
-  applyServer(client: OTClient, operation: TextOperation) {
-    // Operation comes from another client
-    //
-    //                       /\
-    //     this.outstanding /  \ operation
-    //                     /    \
-    //                    /\    /
-    //       this.buffer /  \* / pair1[0] (new outstanding)
-    //                  /    \/
-    //                  \    /
-    //          pair2[1] \  / pair2[0] (new buffer)
-    // the transformed    \/
-    // operation -- can
-    // be applied to the
-    // client's current
-    // document
-    //
-    // * pair1[1]
-    const transform = TextOperation.transform;
-    const pair1 = transform(this.outstanding, operation);
-    const pair2 = transform(this.buffer, pair1[1]);
-    client.applyOperation(pair2[1]);
-    return new AwaitingWithBuffer(pair1[0], pair2[0]);
-  }
-
-  serverAck(client: OTClient) {
-    // The pending operation has been acknowledged
-    // => send buffer
-    client.sendOperation(client.revision, this.buffer);
-    return new AwaitingConfirm(this.buffer);
-  }
-
-  transformSelection(selection: any) {
-    return selection.transform(this.outstanding).transform(this.buffer);
-  }
-
-  resend(client: OTClient) {
-    // The confirm didn't come because the client was disconnected.
-    // Now that it has reconnected, we resend the outstanding operation.
-    client.sendOperation(client.revision, this.outstanding);
-  }
-}
-
-export abstract class OTClient {
-  revision: number;
-  state: IState;
-
-  constructor(revision: number) {
-    this.revision = revision;
-    this.state = synchronized_;
-  }
-
-  setState(state: IState) {
-    this.state = state;
-  }
-
-  // Call this method when the user changes the document.
-  applyClient(operation: TextOperation) {
-    this.setState(this.state.applyClient(this, operation));
-  }
-
-  // Call this method with a new operation from the server
-  applyServer(operation: TextOperation) {
-    this.revision++;
-    this.setState(this.state.applyServer(this, operation));
-  }
-
-  serverAck() {
-    this.revision++;
-    this.setState(this.state.serverAck(this));
-  }
-
-  serverReconnect() {
-    if (typeof this.state.resend === 'function') {
-      this.state.resend(this);
-    }
-  }
-
-  // Transforms a selection from the latest known server state to the current
-  // client state. For example, if we get from the server the information that
-  // another user's cursor is at position 3, but the server hasn't yet received
-  // our newest operation, an insertion of 5 characters at the beginning of the
-  // document, the correct position of the other user's cursor in our current
-  // document is 8.
-  transformSelection(selection) {
-    return this.state.transformSelection(selection);
-  }
-
-  abstract sendOperation(revision: number, operation: TextOperation): void;
-
-  abstract applyOperation(operation: TextOperation): void;
-}
diff --git a/packages/app/src/app/overmind/effects/moduleRecover.ts b/packages/app/src/app/overmind/effects/moduleRecover.ts
deleted file mode 100644
index b26aad0a1de..00000000000
--- a/packages/app/src/app/overmind/effects/moduleRecover.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-import { Module } from '@codesandbox/common/lib/types';
-
-const getKey = (id: string, moduleShortid: string) =>
-  `recover:${id}:${moduleShortid}:code`;
-
-export type RecoverData = {
-  code: string;
-  version: number;
-  timestamp: number;
-  sandboxId: string;
-};
-
-export default {
-  save(sandboxId: string, version: number, module: Module) {
-    try {
-      localStorage.setItem(
-        getKey(sandboxId, module.shortid),
-        JSON.stringify({
-          code: module.code,
-          version,
-          timestamp: new Date().getTime(),
-          sandboxId,
-        })
-      );
-    } catch (e) {
-      // Too bad
-    }
-  },
-
-  get(sandboxId: string, moduleShortid: string): RecoverData | null {
-    return JSON.parse(
-      localStorage.getItem(getKey(sandboxId, moduleShortid)) || 'null'
-    );
-  },
-
-  remove(sandboxId: string, module: Module) {
-    try {
-      const recoverData = this.get(sandboxId, module.shortid);
-      if (recoverData && recoverData.code === module.code) {
-        localStorage.removeItem(getKey(sandboxId, module.shortid));
-      }
-    } catch (e) {
-      // Too bad
-    }
-  },
-
-  clearSandbox(sandboxId: string) {
-    try {
-      Object.keys(localStorage)
-        .filter(key => key.startsWith(`recover:${sandboxId}`))
-        .forEach(key => {
-          localStorage.removeItem(key);
-        });
-    } catch (e) {
-      // Too bad
-    }
-  },
-
-  getRecoverList(sandboxId: string, modules: Module[]) {
-    const localKeys = Object.keys(localStorage).filter(key =>
-      key.startsWith(`recover:${sandboxId}`)
-    );
-
-    return modules
-      .filter(m => localKeys.includes(getKey(sandboxId, m.shortid)))
-      .map(module => {
-        const key = getKey(sandboxId, module.shortid);
-
-        try {
-          const recoverData: RecoverData = JSON.parse(
-            localStorage.getItem(key) || 'null'
-          );
-
-          if (recoverData) {
-            return { recoverData, module };
-          }
-        } catch (e) {
-          // Too bad
-        }
-
-        return null;
-      })
-      .filter(Boolean) as Array<{ recoverData: RecoverData; module: Module }>;
-  },
-};
diff --git a/packages/app/src/app/overmind/effects/prettyfier.ts b/packages/app/src/app/overmind/effects/prettyfier.ts
deleted file mode 100755
index 41a1f18a311..00000000000
--- a/packages/app/src/app/overmind/effects/prettyfier.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import prettify from 'app/utils/prettify';
-import { PrettierConfig, Module } from '@codesandbox/common/lib/types';
-
-type Options = {
-  getPrettierConfig(): PrettierConfig;
-  getCurrentModule(): Module;
-};
-
-let _options: Options;
-
-export default {
-  initialize(options: Options) {
-    _options = options;
-  },
-  prettify(moduleId: string, title: string, code: string): Promise<string> {
-    return prettify(
-      title,
-      () => code,
-      _options.getPrettierConfig(),
-      () => _options.getCurrentModule().id === moduleId
-    );
-  },
-};
diff --git a/packages/app/src/app/overmind/effects/preview.ts b/packages/app/src/app/overmind/effects/preview.ts
deleted file mode 100644
index cfc908bd383..00000000000
--- a/packages/app/src/app/overmind/effects/preview.ts
+++ /dev/null
@@ -1,206 +0,0 @@
-import { dispatch, listen } from 'codesandbox-api';
-import BasePreview from '@codesandbox/common/lib/components/Preview';
-import { blocker } from 'app/utils/blocker';
-import { hasPermission } from '@codesandbox/common/lib/utils/permission';
-import { Sandbox } from '@codesandbox/common/lib/types';
-
-let _preview = blocker<BasePreview>();
-
-export default {
-  initialize() {},
-  initializePreview(preview: any) {
-    _preview.resolve(preview);
-    return () => {
-      _preview = blocker<any>();
-    };
-  },
-  async executeCodeImmediately({
-    initialRender = false,
-    showFullScreen = false,
-  } = {}) {
-    const preview = await _preview.promise;
-    preview.executeCodeImmediately(initialRender, showFullScreen);
-  },
-  async executeCode() {
-    const preview = await _preview.promise;
-    preview.executeCode();
-  },
-  async refresh() {
-    const preview = await _preview.promise;
-    preview.handleRefresh();
-  },
-  async updateAddressbarUrl() {
-    const preview = await _preview.promise;
-    preview.updateAddressbarUrl();
-  },
-  async getIframeBoundingRect() {
-    const preview = await _preview.promise;
-
-    return preview.element.getBoundingClientRect();
-  },
-  async getPreviewPath() {
-    const preview = await _preview.promise;
-
-    let path = preview.state.urlInAddressBar;
-
-    path = path.replace('http://', '').replace('https://', '');
-
-    return path.substr(path.indexOf('/'));
-  },
-  takeExtensionScreenshot(): Promise<string> {
-    return new Promise((resolve, reject) => {
-      let waitForExtension;
-      const extensionListener = event => {
-        if (event.data.type === 'extension-screenshot-taken') {
-          clearTimeout(waitForExtension);
-          window.removeEventListener('message', extensionListener);
-          resolve(event.data.url);
-        }
-      };
-      waitForExtension = setTimeout(() => {
-        reject(
-          new Error(
-            'Extension did not create screenshot, please try to refresh browser'
-          )
-        );
-      }, 3000);
-      window.addEventListener('message', extensionListener);
-      window.postMessage(
-        {
-          type: 'extension-screenshot',
-        },
-        '*'
-      );
-    });
-  },
-  takeScreenshot(isPrivateSandbox: boolean): Promise<string> {
-    return new Promise((resolve, reject) => {
-      let timeout;
-      const start = Date.now();
-
-      const disposeListener = listen((data: any) => {
-        if (data.type === 'screenshot-generated') {
-          clearTimeout(timeout);
-          const waitAtLeastMs = 250;
-          const waitedMs = Date.now() - start;
-
-          setTimeout(
-            () => resolve(data.screenshot),
-            waitedMs > waitAtLeastMs ? 0 : waitAtLeastMs - waitedMs
-          );
-        }
-      });
-
-      timeout = setTimeout(() => {
-        disposeListener();
-        reject(new Error('Creating screenshot timed out'));
-      }, 3000);
-
-      dispatch({
-        type: 'take-screenshot',
-        data: {
-          isPrivateSandbox,
-        },
-      });
-    });
-  },
-  showCommentCursor() {
-    dispatch({
-      type: 'show-screenshot-cursor',
-    });
-  },
-  hideCommentCursor() {
-    dispatch({
-      type: 'hide-screenshot-cursor',
-    });
-  },
-  createScreenshot({
-    screenshotSource,
-    bubbleSource,
-    cropWidth,
-    cropHeight,
-    x,
-    y,
-    scale,
-  }: {
-    screenshotSource: string;
-    bubbleSource: string;
-    cropWidth: number;
-    cropHeight: number;
-    x: number;
-    y: number;
-    scale: number;
-  }): Promise<string> {
-    const screenshotResolver = new Promise<HTMLImageElement>(resolve => {
-      const image = new Image();
-      image.onload = () => {
-        resolve(image);
-      };
-      image.src = screenshotSource;
-    });
-
-    const bubbleResolver = new Promise<HTMLImageElement>(resolve => {
-      const image = new Image();
-      image.onload = () => {
-        resolve(image);
-      };
-      image.src = bubbleSource;
-    });
-
-    return Promise.all([screenshotResolver, bubbleResolver]).then(
-      ([screenshot, bubble]) => {
-        const canvas = document.createElement('canvas');
-        const ctx = canvas.getContext('2d')!;
-        const dpr = window.devicePixelRatio || 1;
-        const scaledX = (x / scale) * dpr;
-        const scaledY = (y / scale) * dpr;
-        const scaledHalfCropWidth = (cropWidth / 2) * dpr;
-        const scaledHalfCropHeight = (cropHeight / 2) * dpr;
-
-        const rightSideSpace = Math.min(
-          screenshot.width - scaledX,
-          scaledHalfCropWidth
-        );
-        const bottomSideSpace = Math.min(
-          screenshot.height - scaledY,
-          scaledHalfCropHeight
-        );
-        const leftSideSpace = Math.min(scaledX, scaledHalfCropWidth);
-        const topSideSpace = Math.min(scaledY, scaledHalfCropHeight);
-
-        // Make sure we don't make our canvas bigger than our screenshot can fill
-        const width = Math.min(
-          leftSideSpace + rightSideSpace,
-          screenshot.width
-        );
-        const height = Math.min(
-          bottomSideSpace + topSideSpace,
-          screenshot.height
-        );
-
-        // Offset the screenshot enough to show the comment bubble, but not more
-        // than possible before we end up with transparent pixels
-        const sx = Math.min(scaledX - leftSideSpace, screenshot.width - width);
-        const sy = Math.min(scaledY - topSideSpace, screenshot.height - height);
-
-        const bubbleX = scaledX - sx;
-        const bubbleY = scaledY - sy;
-
-        canvas.width = width;
-        canvas.height = height;
-
-        ctx.drawImage(screenshot, sx, sy, width, height, 0, 0, width, height);
-        ctx.restore();
-        ctx.drawImage(bubble, bubbleX, bubbleY);
-
-        return canvas.toDataURL();
-      }
-    );
-  },
-  canAddComments(currentSandbox: Sandbox) {
-    return Boolean(
-      currentSandbox.featureFlags.comments &&
-        hasPermission(currentSandbox.authorization, 'comment')
-    );
-  },
-};
diff --git a/packages/app/src/app/overmind/effects/router.ts b/packages/app/src/app/overmind/effects/router.ts
index b13fa31e766..91b7223d356 100755
--- a/packages/app/src/app/overmind/effects/router.ts
+++ b/packages/app/src/app/overmind/effects/router.ts
@@ -1,90 +1,10 @@
-import { GitInfo } from '@codesandbox/common/lib/types';
-import { getSandboxOptions } from '@codesandbox/common/lib/url';
-import { sandboxUrl } from '@codesandbox/common/lib/utils/url-generator';
 import history from '../../utils/history';
 
 export default new (class RouterEffect {
-  replaceSandboxUrl({
-    id,
-    alias,
-    git,
-    isV2,
-  }: {
-    id?: string | null;
-    alias?: string | null;
-    git?: GitInfo | null;
-    isV2?: boolean;
-  }) {
-    window.history.replaceState({}, '', sandboxUrl({ id, alias, git, isV2 }));
-  }
-
-  updateSandboxUrl(
-    {
-      id,
-      alias,
-      git,
-      v2,
-      isSse,
-    }: {
-      id?: string | null;
-      alias?: string | null;
-      git?: GitInfo | null;
-      v2?: boolean;
-      isSse?: boolean;
-    },
-    {
-      openInNewWindow = false,
-      hasBetaEditorExperiment = false,
-    }: { openInNewWindow?: boolean; hasBetaEditorExperiment?: boolean } = {}
-  ) {
-    const url = sandboxUrl(
-      { id, alias, isV2: v2, isSse },
-      hasBetaEditorExperiment
-    );
-
-    if (openInNewWindow) {
-      window.open(url, '_blank');
-    } else if (v2 || (!isSse && hasBetaEditorExperiment)) {
-      window.location.href = url;
-    } else {
-      history.push(url);
-    }
-  }
-
-  redirectToNewSandbox() {
-    history.push('/s/new');
-  }
-
-  redirectToSandboxWizard() {
-    history.replace('/s/');
-  }
-
   redirectToDashboard() {
     history.replace('/dashboard/home');
   }
 
-  getSandboxOptions() {
-    return getSandboxOptions(decodeURIComponent(document.location.href));
-  }
-
-  getCommentId() {
-    return this.getParameter('comment');
-  }
-
-  createCommentUrl(id: string) {
-    return `${window.location.origin}${window.location.pathname}?comment=${id}`;
-  }
-
-  replace(url: string) {
-    const origin = new URL(url).origin;
-    history.replace(url.replace(origin, ''));
-  }
-
-  getParameter(key: string): string | null {
-    const currentUrl = new URL(location.href);
-    return currentUrl.searchParams.get(key);
-  }
-
   clearWorkspaceId(): void {
     const searchParams = new URLSearchParams(location.search);
     searchParams.delete('workspace');
diff --git a/packages/app/src/app/overmind/effects/sse.ts b/packages/app/src/app/overmind/effects/sse.ts
deleted file mode 100755
index 77d34c521a9..00000000000
--- a/packages/app/src/app/overmind/effects/sse.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import store from 'store/dist/store.modern';
-
-export default {
-  get() {
-    return store.get('sse');
-  },
-  set(sse) {
-    return store.set('sse', sse);
-  },
-  reset() {
-    return store.set('sse', null);
-  },
-};
diff --git a/packages/app/src/app/overmind/effects/stripe.ts b/packages/app/src/app/overmind/effects/stripe.ts
deleted file mode 100644
index 5122a2946ec..00000000000
--- a/packages/app/src/app/overmind/effects/stripe.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { STRIPE_API_KEY } from '@codesandbox/common/lib/utils/config';
-
-declare let Stripe: any;
-
-function loadScript(path: string) {
-  return new Promise(resolve => {
-    if (typeof document !== 'undefined') {
-      const script = document.createElement('script');
-      script.onload = resolve;
-      script.async = true;
-      script.type = 'text/javascript';
-      script.src = path;
-      document.head.appendChild(script);
-    }
-  });
-}
-
-let localStripeVar;
-const getStripe = async (): Promise<any> => {
-  if (typeof Stripe === 'undefined') {
-    await loadScript('https://js.stripe.com/v3/');
-  }
-
-  if (!localStripeVar) {
-    localStripeVar = Stripe(STRIPE_API_KEY);
-  }
-
-  return localStripeVar;
-};
-
-export default {
-  handleCardPayment: async (paymentIntent: string) => {
-    const stripe = await getStripe();
-
-    return stripe.handleCardPayment(paymentIntent);
-  },
-};
diff --git a/packages/app/src/app/overmind/effects/themes.ts b/packages/app/src/app/overmind/effects/themes.ts
deleted file mode 100755
index 3c18334ef80..00000000000
--- a/packages/app/src/app/overmind/effects/themes.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import themes from '@codesandbox/common/lib/themes';
-
-export default themes;
diff --git a/packages/app/src/app/overmind/effects/utils/greensock.ts b/packages/app/src/app/overmind/effects/utils/greensock.ts
deleted file mode 100644
index 2cb5c97c1f3..00000000000
--- a/packages/app/src/app/overmind/effects/utils/greensock.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-const GREENSOCK_KEYWORDS = [
-  'animate',
-  'animation',
-  'cssrule',
-  'cssruleplugin',
-  'customease',
-  'draggable',
-  'easelplugin',
-  'flip',
-  'flipplugin',
-  'gasp',
-  'greensock',
-  'gsap',
-  'modifiersplugin',
-  'motionpathplugin',
-  'pixiplugin',
-  'scrollintent',
-  'scrollsmoother',
-  'scrollto',
-  'scrolltoplugin',
-  'scrolltrigger',
-  'textplugin',
-  'timeline',
-  'tween',
-];
-
-const GREENSOCK_MEMBER_KEYWORDS = [
-  'custombounce',
-  'customwiggle',
-  'drawsvg',
-  'drawsvgplugin',
-  'gsdevtools',
-  'inertia',
-  'inertiaplugin',
-  'morph',
-  'morphsvg',
-  'morphsvgplugin',
-  'motionpathhelper',
-  'physics2d',
-  'physics2dplugin',
-  'physicsprops',
-  'physicspropsplugin',
-  'scrambletext',
-  'scrambletextplugin',
-  'splittext',
-];
-
-export const GREENSOCK_ALIASES = ['gsap', 'gsap-trial'];
-
-export function getGreensockAlias(name: string): string | undefined {
-  const lowercaseName = name.toLocaleLowerCase();
-  if (GREENSOCK_KEYWORDS.includes(lowercaseName)) {
-    return 'gsap';
-  }
-  if (GREENSOCK_MEMBER_KEYWORDS.includes(lowercaseName)) {
-    return 'gsap-trial';
-  }
-
-  return undefined;
-}
diff --git a/packages/app/src/app/overmind/effects/vscode/Linter.ts b/packages/app/src/app/overmind/effects/vscode/Linter.ts
deleted file mode 100644
index 2b4fdfd8205..00000000000
--- a/packages/app/src/app/overmind/effects/vscode/Linter.ts
+++ /dev/null
@@ -1,123 +0,0 @@
-import { actions, dispatch } from 'codesandbox-api';
-import debounce from 'lodash-es/debounce';
-// @ts-ignore
-// eslint-disable-next-line
-import LinterWorker from 'worker-loader?publicPath=/&name=monaco-linter.[hash:8].worker.js!./LinterWorker';
-
-import { getCurrentModelPath } from './utils';
-
-const requireAMDModule = paths =>
-  new Promise<void>(resolve => (window as any).require(paths, () => resolve()));
-
-export class Linter {
-  private worker: LinterWorker;
-  private editor;
-  private monaco;
-  private isDisposed: boolean = false;
-  constructor(editor, monaco) {
-    this.editor = editor;
-    this.monaco = monaco;
-    this.worker = new LinterWorker();
-
-    // This should be disposed?
-    this.worker.addEventListener('message', this.onMessage);
-  }
-
-  dispose(): null {
-    this.clearErrors();
-    this.worker.removeEventListener('message', this.onMessage);
-    this.worker.terminate();
-    this.isDisposed = true;
-
-    return null;
-  }
-
-  private clearErrors = () => {
-    dispatch(
-      actions.correction.clear(getCurrentModelPath(this.editor), 'eslint')
-    );
-  };
-
-  private onMessage = event => {
-    const { markers, version } = event.data;
-    const activeEditor = this.editor.getActiveCodeEditor();
-
-    if (activeEditor && activeEditor.getModel()) {
-      this.clearErrors();
-
-      if (version === activeEditor.getModel().getVersionId()) {
-        markers.forEach(marker => {
-          dispatch(
-            actions.correction.show(marker.message, {
-              line: marker.startLineNumber,
-              column: marker.startColumn,
-              lineEnd: marker.endLineNumber,
-              columnEnd: marker.endColumn,
-              source: 'eslint',
-              severity: marker.severity === 2 ? 'warning' : 'notice',
-              path: getCurrentModelPath(this.editor),
-            })
-          );
-        });
-      }
-    }
-  };
-
-  lint = debounce(
-    async (
-      code: string,
-      title: string,
-      version: number,
-      template: string,
-      dependencies: { [dep: string]: string }
-    ) => {
-      if (!title || this.isDisposed) {
-        return;
-      }
-
-      const mode = (await this.getMonacoMode(title)) || '';
-
-      if (
-        ['javascript', 'typescript', 'typescriptreact', 'vue'].includes(mode)
-      ) {
-        this.worker.postMessage({
-          code,
-          title,
-          version,
-          template,
-          dependencies,
-        });
-      }
-    },
-    100
-  );
-
-  private async getMonacoMode(title: string) {
-    if (title == null) return 'javascript';
-
-    const kind = title.match(/\.([^.]*)$/);
-
-    if (kind) {
-      if (kind[1] === 'css') return 'css';
-      if (kind[1] === 'scss') return 'scss';
-      if (kind[1] === 'json') return 'json';
-      if (kind[1] === 'html') return 'html';
-      if (kind[1] === 'svelte') return 'html';
-      if (kind[1] === 'vue') {
-        if (
-          this.monaco.languages.getLanguages &&
-          !this.monaco.languages.getLanguages().find(l => l.id === 'vue')
-        ) {
-          await requireAMDModule(['vs/language/vue/monaco.contribution']);
-        }
-        return 'vue';
-      }
-      if (kind[1] === 'less') return 'less';
-      if (kind[1] === 'md') return 'markdown';
-      if (/jsx?$/.test(kind[1])) return 'javascript';
-      if (/tsx?$/.test(kind[1])) return 'typescript';
-    }
-
-    return undefined;
-  }
-}
diff --git a/packages/app/src/app/overmind/effects/vscode/ModelsHandler.ts b/packages/app/src/app/overmind/effects/vscode/ModelsHandler.ts
deleted file mode 100644
index 8a85867eb21..00000000000
--- a/packages/app/src/app/overmind/effects/vscode/ModelsHandler.ts
+++ /dev/null
@@ -1,905 +0,0 @@
-import { resolveModule } from '@codesandbox/common/lib/sandbox/modules';
-import {
-  EditorSelection,
-  Module,
-  Sandbox,
-  UserSelection,
-} from '@codesandbox/common/lib/types';
-import { getTextOperation } from '@codesandbox/common/lib/utils/diff';
-import { hasPermission } from '@codesandbox/common/lib/utils/permission';
-import { indexToLineAndColumn } from 'app/overmind/utils/common';
-import { actions, dispatch } from 'codesandbox-api';
-import { css } from 'glamor';
-import { TextOperation } from 'ot';
-
-import { getCurrentModelPath } from './utils';
-
-// @ts-ignore
-const fadeIn = css.keyframes('fadeIn', {
-  // optional name
-  '0%': { opacity: 0 },
-  '100%': { opacity: 1 },
-});
-
-// @ts-ignore
-const fadeOut = css.keyframes('fadeOut', {
-  // optional name
-  '0%': { opacity: 1 },
-  '100%': { opacity: 0 },
-});
-
-export type OnFileChangeData = {
-  moduleShortid: string;
-  title: string;
-  code: string;
-  event: any;
-  model: any;
-};
-
-export type onSelectionChangeData = UserSelection;
-
-export type OnOperationAppliedData = {
-  moduleShortid: string;
-  operation: TextOperation;
-  title: string;
-  code: string;
-  model: any;
-};
-
-export type OnFileChangeCallback = (data: OnFileChangeData) => void;
-
-export type OnOperationAppliedCallback = (data: OnOperationAppliedData) => void;
-
-export type ModuleModel = {
-  changeListener: { dispose: Function } | null;
-  currentLine: number;
-  path: string;
-  model: null | any;
-  comments: Array<{ commentId: string; range: [number, number] }>;
-  currentCommentDecorations: string[];
-};
-
-export class ModelsHandler {
-  public isApplyingOperation: boolean = false;
-  private moduleModels: { [path: string]: ModuleModel } = {};
-  private modelAddedListener: { dispose: Function };
-  private modelRemovedListener: { dispose: Function };
-  private onChangeCallback: OnFileChangeCallback;
-  private onOperationAppliedCallback: OnOperationAppliedCallback;
-  private sandbox: Sandbox;
-  private editorApi;
-  private monaco;
-  private userClassesGenerated = {};
-  private userSelectionDecorations = {};
-  private currentCommentThreadId: string | null = null;
-  constructor(
-    editorApi,
-    monaco,
-    sandbox: Sandbox,
-    onChangeCallback: OnFileChangeCallback,
-    onOperationAppliedCallback: OnOperationAppliedCallback
-  ) {
-    this.editorApi = editorApi;
-    this.monaco = monaco;
-    this.sandbox = sandbox;
-    this.onChangeCallback = onChangeCallback;
-    this.onOperationAppliedCallback = onOperationAppliedCallback;
-    this.listenForChanges();
-  }
-
-  public dispose(): null {
-    this.modelAddedListener.dispose();
-    this.modelRemovedListener.dispose();
-    Object.keys(this.moduleModels).forEach(path => {
-      const changeListener = this.moduleModels[path].changeListener;
-      if (changeListener) {
-        changeListener.dispose();
-      }
-    });
-    this.moduleModels = {};
-
-    return null;
-  }
-
-  public async syncModule(module: Module) {
-    const fileModel = this.editorApi.textFileService
-      .getFileModels()
-      .find(
-        fileModelItem =>
-          fileModelItem.resource.path === '/sandbox' + module.path
-      );
-
-    if (fileModel) {
-      this.isApplyingOperation = true;
-      fileModel.revert();
-      this.isApplyingOperation = false;
-    }
-  }
-
-  private getModuleModelByPath(path: string): ModuleModel | undefined {
-    const fullPath = '/sandbox' + path;
-
-    return this.moduleModels[fullPath];
-  }
-
-  private getOrCreateModuleModelByPath(path: string): ModuleModel {
-    const fullPath = '/sandbox' + path;
-    this.moduleModels[fullPath] = this.getModuleModelByPath(path) || {
-      changeListener: null,
-      model: null,
-      currentLine: 0,
-      path: fullPath,
-      comments: [],
-      currentCommentDecorations: [],
-    };
-
-    return this.moduleModels[fullPath];
-  }
-
-  public updateLineCommentIndication(model: any, lineNumber: number) {
-    const moduleModel = this.moduleModels[model.uri.path];
-
-    moduleModel.currentLine = lineNumber;
-
-    const newDecorationComments = this.createCommentDecorations(
-      moduleModel.comments,
-      model,
-      this.currentCommentThreadId,
-      moduleModel.currentLine
-    );
-    moduleModel.currentCommentDecorations = model.deltaDecorations(
-      moduleModel.currentCommentDecorations,
-      newDecorationComments
-    );
-  }
-
-  public clearComments() {
-    Object.values(this.moduleModels).forEach(moduleModel => {
-      if (!moduleModel.model) {
-        return;
-      }
-      moduleModel.comments = [];
-      moduleModel.currentCommentDecorations = moduleModel.model.deltaDecorations(
-        moduleModel.currentCommentDecorations,
-        []
-      );
-    });
-  }
-
-  public isModuleOpened(module: Module) {
-    const moduleModel = this.getModuleModelByPath(module.path);
-    return Boolean(moduleModel?.model);
-  }
-
-  public changeModule = async (module: Module) => {
-    const moduleModel = this.getOrCreateModuleModelByPath(module.path);
-
-    if (getCurrentModelPath(this.editorApi) !== module.path) {
-      await this.editorApi.openFile(module.path);
-    }
-
-    moduleModel.model = await this.editorApi.textFileService.models
-      .loadOrCreate(this.monaco.Uri.file('/sandbox' + module.path))
-      .then(textFileEditorModel => textFileEditorModel.load())
-      .then(textFileEditorModel => textFileEditorModel.textEditorModel);
-
-    const model = moduleModel.model;
-
-    if (this.sandbox.featureFlags.comments) {
-      const newDecorationComments = this.createCommentDecorations(
-        moduleModel.comments,
-        model,
-        this.currentCommentThreadId,
-        moduleModel.currentLine
-      );
-      moduleModel.currentCommentDecorations = model.deltaDecorations(
-        moduleModel.currentCommentDecorations,
-        newDecorationComments
-      );
-    }
-
-    return moduleModel.model;
-  };
-
-  public async applyComments(
-    commentThreadsByPath: {
-      [path: string]: Array<{
-        commentId: string;
-        range: [number, number];
-      }>;
-    },
-    currentCommentThreadId: string | null
-  ) {
-    // We keep a local reference to the current commentThread id,
-    // because when opening modules we want to highlight any currently
-    // selected comment
-    this.currentCommentThreadId = currentCommentThreadId;
-
-    // Ensure we have the moduleModels
-    Object.keys(commentThreadsByPath).forEach(path => {
-      this.getOrCreateModuleModelByPath(path).comments =
-        commentThreadsByPath[path];
-    });
-
-    // Apply the decorations
-    Object.keys(this.moduleModels).forEach(path => {
-      const moduleModel = this.moduleModels[path];
-      const model = moduleModel.model;
-
-      if (!model) {
-        return;
-      }
-
-      // Clean out any removed comments
-      const currentCommentIds = (
-        commentThreadsByPath[path.replace('/sandbox', '')] || []
-      ).map(comment => comment.commentId);
-      moduleModel.comments = moduleModel.comments.filter(comment =>
-        currentCommentIds.includes(comment.commentId)
-      );
-
-      const existingDecorationComments = moduleModel.currentCommentDecorations;
-      const newDecorationComments = this.createCommentDecorations(
-        moduleModel.comments,
-        model,
-        currentCommentThreadId,
-        moduleModel.currentLine
-      );
-
-      moduleModel.currentCommentDecorations = model.deltaDecorations(
-        existingDecorationComments,
-        newDecorationComments
-      );
-    });
-  }
-
-  public async updateTabsPath(oldPath: string, newPath: string) {
-    const oldModelPath = '/sandbox' + oldPath;
-    const newModelPath = '/sandbox' + newPath;
-
-    return Promise.all(
-      Object.keys(this.moduleModels).map(path => {
-        if (oldModelPath === path && this.moduleModels[path].model) {
-          const model = this.moduleModels[path].model;
-
-          // This runs remove/add automatically
-          return this.editorApi.textFileService.move(
-            model.uri,
-            this.monaco.Uri.file(newModelPath)
-          );
-        }
-
-        return Promise.resolve();
-      })
-    );
-  }
-
-  public async applyOperation(moduleShortid: string, operation: TextOperation) {
-    const module = this.sandbox.modules.find(m => m.shortid === moduleShortid);
-
-    if (!module) {
-      return;
-    }
-
-    const moduleModel = this.getOrCreateModuleModelByPath(module.path);
-
-    const modelEditor = this.editorApi.editorService.editors.find(
-      editor => editor.resource && editor.resource.path === moduleModel.path
-    );
-
-    // We keep a reference to the model on our own. We keep it as a
-    // promise, because there might be multiple operations fired before
-    // the model is actually resolved. This creates a "natural" queue
-    if (!moduleModel.model) {
-      if (modelEditor) {
-        moduleModel.model = await modelEditor.textModelReference.then(
-          ref => ref.object.textEditorModel
-        );
-      } else {
-        moduleModel.model = await this.editorApi.textFileService.models
-          .loadOrCreate(this.monaco.Uri.file(moduleModel.path))
-          .then(model => model.textEditorModel);
-      }
-    }
-
-    const model = moduleModel.model;
-
-    this.isApplyingOperation = true;
-    this.applyOperationToModel(operation, false, model);
-    this.isApplyingOperation = false;
-    this.onOperationAppliedCallback({
-      code: model.getValue(),
-      operation,
-      moduleShortid: module.shortid,
-      title: module.title,
-      model,
-    });
-  }
-
-  /**
-   * Sets the code of a model in VSCode. This means that we directly change the in-memory
-   * model and the user will immediately see the code.
-   * @param module The module to apply the changes of
-   * @param triggerChangeEvent Whether we should trigger this event to listeners listening to the model (for eg. live)
-   */
-  public setModuleCode(module: Module, triggerChangeEvent = false) {
-    const moduleModel = this.getModuleModelByPath(module.path);
-    const model = moduleModel?.model;
-
-    if (!model) {
-      return;
-    }
-
-    const oldCode = model.getValue();
-    const changeOperation = getTextOperation(oldCode, module.code);
-    if (!triggerChangeEvent) {
-      this.isApplyingOperation = true;
-    }
-    this.applyOperationToModel(changeOperation, false, model);
-    if (!triggerChangeEvent) {
-      this.isApplyingOperation = false;
-    }
-  }
-
-  public clearUserSelections(userId: string) {
-    const decorations = Object.keys(this.userSelectionDecorations).filter(d =>
-      d.startsWith(userId)
-    );
-    Object.keys(this.moduleModels).forEach(key => {
-      const moduleModel = this.moduleModels[key];
-
-      if (!moduleModel?.model) {
-        return;
-      }
-
-      const model = moduleModel.model;
-
-      decorations.forEach(decorationId => {
-        const userDecorationIdPrefix = this.getSelectionDecorationId(
-          userId,
-          model.id
-        );
-        if (decorationId.startsWith(userDecorationIdPrefix)) {
-          this.userSelectionDecorations[decorationId] = model.deltaDecorations(
-            this.userSelectionDecorations[decorationId] || [],
-            []
-          );
-        }
-      });
-    });
-  }
-
-  private getSelectionDecorationId = (
-    userId: string,
-    modelId: string = '',
-    shortid: string = ''
-  ) => [userId, modelId, shortid].join('|').replace(/\|\|$/, '|');
-
-  private cleanUserSelections = (
-    model: any,
-    moduleShortid: string,
-    userSelectionsToKeep: EditorSelection[]
-  ) => {
-    const existingSelectionDecorations = Object.keys(
-      this.userSelectionDecorations
-    ).filter(s => s.endsWith([model.id, moduleShortid].join('|')));
-
-    const newUserSelections = {};
-    for (let i = 0; i < userSelectionsToKeep.length; i++) {
-      newUserSelections[userSelectionsToKeep[i].userId] =
-        userSelectionsToKeep[i];
-    }
-
-    existingSelectionDecorations.forEach(existingDecorationId => {
-      const userId = existingDecorationId.split('|')[0];
-      if (!newUserSelections[userId]) {
-        const decorationId = this.getSelectionDecorationId(
-          userId,
-          model.id,
-          moduleShortid
-        );
-        this.userSelectionDecorations[decorationId] = model.deltaDecorations(
-          this.userSelectionDecorations[decorationId] || [],
-          []
-        );
-      }
-    });
-  };
-
-  nameTagTimeouts: { [name: string]: number } = {};
-
-  public updateUserSelections(
-    module: Module,
-    userSelections: EditorSelection[],
-    showNameTag = true
-  ) {
-    const moduleModel = this.getModuleModelByPath(module.path);
-
-    if (!moduleModel?.model) {
-      return;
-    }
-
-    const model = moduleModel.model;
-    const lines = model.getLinesContent() || [];
-
-    this.cleanUserSelections(model, module.shortid, userSelections);
-
-    userSelections.forEach((data: EditorSelection) => {
-      const { userId } = data;
-
-      const decorationId = this.getSelectionDecorationId(
-        userId,
-        model.id,
-        module.shortid
-      );
-      if (data.selection === null) {
-        this.userSelectionDecorations[decorationId] = model.deltaDecorations(
-          this.userSelectionDecorations[decorationId] || [],
-          []
-        );
-
-        return;
-      }
-
-      const decorations: Array<{
-        range: any;
-        options: {
-          className: string;
-        };
-      }> = [];
-      const { selection, color, name } = data;
-
-      const getCursorDecoration = (position, className) => {
-        const cursorPos = indexToLineAndColumn(lines, position);
-
-        return {
-          range: new this.monaco.Range(
-            cursorPos.lineNumber,
-            cursorPos.column,
-            cursorPos.lineNumber,
-            cursorPos.column
-          ),
-          options: {
-            className: `${this.userClassesGenerated[className]}`,
-          },
-        };
-      };
-
-      const getSelectionDecoration = (start, end, className) => {
-        const from = indexToLineAndColumn(lines, start);
-        const to = indexToLineAndColumn(lines, end);
-
-        return {
-          range: new this.monaco.Range(
-            from.lineNumber,
-            from.column,
-            to.lineNumber,
-            to.column
-          ),
-          options: {
-            className: this.userClassesGenerated[className],
-            stickiness: 3, // GrowsOnlyWhenTypingAfter
-          },
-        };
-      };
-      const prefix = color.join('-') + userId;
-      const cursorClassName = prefix + '-cursor';
-      const nameTagClassName = prefix + '-nametag';
-      const secondaryCursorClassName = prefix + '-secondary-cursor';
-      const selectionClassName = prefix + '-selection';
-      const secondarySelectionClassName = prefix + '-secondary-selection';
-
-      if (selection && color) {
-        const nameStyles = {
-          content: name,
-          position: 'absolute',
-          bottom: '100%',
-          backgroundColor: `rgb(${color[0]}, ${color[1]}, ${color[2]})`,
-          zIndex: 200,
-          color:
-            (color[0] * 299 + color[1] * 587 + color[2] * 114) / 1000 > 128
-              ? 'rgba(0, 0, 0, 0.8)'
-              : 'white',
-          padding: '0 4px',
-          borderRadius: 2,
-          borderBottomLeftRadius: 0,
-          fontSize: '.75rem',
-          fontWeight: 600,
-          userSelect: 'none',
-          pointerEvents: 'none',
-          width: 'max-content',
-          fontFamily: 'MonoLisa, Menlo, monospace',
-        };
-        if (!this.userClassesGenerated[cursorClassName]) {
-          this.userClassesGenerated[cursorClassName] = `${css({
-            display: 'inherit',
-            position: 'absolute',
-            backgroundColor: `rgba(${color[0]}, ${color[1]}, ${color[2]}, 0.8)`,
-            width: '2px !important',
-            height: '100%',
-            cursor: 'text',
-            zIndex: 200,
-            ':hover': {
-              ':before': {
-                animation: `${fadeIn} 0.3s`,
-                animationFillMode: 'forwards',
-                opacity: 0,
-                ...nameStyles,
-              },
-            },
-          })}`;
-        }
-
-        if (!this.userClassesGenerated[nameTagClassName]) {
-          this.userClassesGenerated[nameTagClassName] = `${css({
-            ':before': {
-              animation: `${fadeOut} 0.3s`,
-              animationDelay: '1s',
-              animationFillMode: 'forwards',
-              opacity: 1,
-              ...nameStyles,
-            },
-          })}`;
-        }
-
-        if (!this.userClassesGenerated[secondaryCursorClassName]) {
-          this.userClassesGenerated[secondaryCursorClassName] = `${css({
-            backgroundColor: `rgba(${color[0]}, ${color[1]}, ${color[2]}, 0.6)`,
-            width: '2px !important',
-          })}`;
-        }
-
-        if (!this.userClassesGenerated[selectionClassName]) {
-          this.userClassesGenerated[selectionClassName] = `${css({
-            backgroundColor: `rgba(${color[0]}, ${color[1]}, ${color[2]}, 0.3)`,
-            borderRadius: '3px',
-            minWidth: 7.6,
-          })}`;
-        }
-
-        if (!this.userClassesGenerated[secondarySelectionClassName]) {
-          this.userClassesGenerated[secondarySelectionClassName] = `${css({
-            backgroundColor: `rgba(${color[0]}, ${color[1]}, ${color[2]}, 0.2)`,
-            borderRadius: '3px',
-            minWidth: 7.6,
-          })}`;
-        }
-
-        decorations.push(
-          getCursorDecoration(selection.primary.cursorPosition, cursorClassName)
-        );
-
-        if (selection.primary.selection.length) {
-          decorations.push(
-            getSelectionDecoration(
-              // @ts-ignore
-              selection.primary.selection[0],
-              // @ts-ignore
-              selection.primary.selection[1],
-              selectionClassName
-            )
-          );
-        }
-
-        if (selection.secondary.length) {
-          selection.secondary.forEach(s => {
-            decorations.push(
-              getCursorDecoration(s.cursorPosition, secondaryCursorClassName)
-            );
-
-            if (s.selection.length) {
-              decorations.push(
-                getSelectionDecoration(
-                  s.selection[0],
-                  s.selection[1],
-                  secondarySelectionClassName
-                )
-              );
-            }
-          });
-        }
-      }
-
-      this.userSelectionDecorations[decorationId] = model.deltaDecorations(
-        this.userSelectionDecorations[decorationId] || [],
-        decorations
-      );
-
-      if (this.nameTagTimeouts[decorationId]) {
-        clearTimeout(this.nameTagTimeouts[decorationId]);
-      }
-      // We don't want to show the nametag when the cursor changed, because
-      // another user changed the code on top of it. Otherwise it would get
-      // messy very fast.
-      if (showNameTag && selection.source !== 'modelChange') {
-        const decoration = model.deltaDecorations(
-          [],
-          [
-            getCursorDecoration(
-              selection.primary.cursorPosition,
-              nameTagClassName
-            ),
-          ]
-        );
-        this.userSelectionDecorations[decorationId].push(decoration);
-        this.nameTagTimeouts[decorationId] = window.setTimeout(() => {
-          if (!model.isDisposed()) {
-            // And now hide the nametag after 1.5s
-            model.deltaDecorations([decoration], []);
-          }
-        }, 1500);
-      }
-    });
-  }
-
-  private applyOperationToModel(
-    operation: TextOperation,
-    pushStack = false,
-    model = this.editorApi.getActiveCodeEditor().getModel()
-  ) {
-    const results: Array<{
-      range: unknown;
-      text: string;
-      forceMoveMarkers?: boolean;
-    }> = [];
-    let index = 0;
-    const currentEOLLength = model.getEOL().length;
-    let eolChanged = false;
-    const modelCode = model.getValue();
-
-    if (operation.baseLength !== modelCode.length) {
-      throw new Error(
-        "The base length of the operation doesn't match the length of the code"
-      );
-    }
-
-    for (let i = 0; i < operation.ops.length; i++) {
-      const op = operation.ops[i];
-      if (TextOperation.isRetain(op)) {
-        index += op as number;
-      } else if (TextOperation.isInsert(op)) {
-        const textOp = op as string;
-        const { lineNumber, column } = indexToLineAndColumn(
-          model.getValue().split(/\n/) || [],
-          index
-        );
-        const range = new this.monaco.Range(
-          lineNumber,
-          column,
-          lineNumber,
-          column
-        );
-
-        // if there's a new line
-        if (/\n/.test(textOp)) {
-          const eol = /\r\n/.test(textOp) ? 2 : 1;
-          if (eol !== currentEOLLength) {
-            // With this insert the EOL of the document changed on the other side. We need
-            // to accomodate our EOL to it.
-            eolChanged = true;
-          }
-        }
-
-        results.push({
-          range,
-          text: textOp,
-          forceMoveMarkers: true,
-        });
-      } else if (TextOperation.isDelete(op)) {
-        const delOp = op as number;
-        const lines = model.getValue().split(/\n/) || [];
-        const from = indexToLineAndColumn(lines, index);
-        const to = indexToLineAndColumn(lines, index - delOp);
-        results.push({
-          range: new this.monaco.Range(
-            from.lineNumber,
-            from.column,
-            to.lineNumber,
-            to.column
-          ),
-          text: '',
-        });
-        index -= delOp;
-      }
-    }
-
-    if (eolChanged) {
-      const newEolMode = currentEOLLength === 2 ? 0 : 1;
-      model.setEOL(newEolMode);
-    }
-
-    if (pushStack) {
-      model.pushEditOperations([], results);
-    } else {
-      model.applyEdits(results);
-    }
-  }
-
-  private listenForChanges() {
-    this.modelAddedListener = this.editorApi.textFileService.modelService.onModelAdded(
-      model => {
-        try {
-          const module = resolveModule(
-            model.uri.path.replace(/^\/sandbox/, ''),
-            this.sandbox.modules,
-            this.sandbox.directories
-          );
-
-          const moduleModel = this.getOrCreateModuleModelByPath(module.path);
-
-          moduleModel.model = model;
-          moduleModel.changeListener = this.getModelContentChangeListener(
-            this.sandbox,
-            model
-          );
-        } catch (e) {
-          // File does not exist anymore for some reason
-        }
-      }
-    );
-
-    this.modelRemovedListener = this.editorApi.textFileService.modelService.onModelRemoved(
-      model => {
-        if (this.moduleModels[model.uri.path]) {
-          const changeListener = this.moduleModels[model.uri.path]
-            .changeListener;
-          if (changeListener) {
-            changeListener.dispose();
-          }
-
-          const csbPath = model.uri.path.replace('/sandbox', '');
-          dispatch(actions.correction.clear(csbPath, 'eslint'));
-
-          // We only delete the model, because the state contains things
-          // like comments, which we want to keep
-          delete this.moduleModels[model.uri.path].model;
-        }
-      }
-    );
-  }
-
-  private getModelContentChangeListener(sandbox: Sandbox, model) {
-    return model.onDidChangeContent(e => {
-      if (this.isApplyingOperation) {
-        return;
-      }
-
-      const { path } = model.uri;
-      try {
-        const module = resolveModule(
-          path.replace(/^\/sandbox/, ''),
-          sandbox.modules,
-          sandbox.directories
-        );
-
-        this.onChangeCallback({
-          moduleShortid: module.shortid,
-          title: module.title,
-          code: model.getValue(),
-          event: e,
-          model,
-        });
-      } catch (err) {
-        // This can throw when a file is deleted and you add new code to it. When
-        // saving it a new file is created
-      }
-    });
-  }
-
-  private createCommentDecorations(
-    commentThreadDecorations: Array<{
-      commentId: string;
-      range: [number, number];
-    }>,
-    model: any,
-    currentCommentThreadId: string | null,
-    currentLineNumber: number
-  ) {
-    if (
-      !hasPermission(this.sandbox.authorization, 'comment') ||
-      !this.sandbox.featureFlags.comments
-    ) {
-      return [];
-    }
-    const commentDecorationsByLineNumber = commentThreadDecorations.reduce<{
-      [lineNumber: string]: Array<{
-        commentId: string;
-        range: [number, number];
-      }>;
-    }>((aggr, commentDecoration) => {
-      const { lineNumber } = indexToLineAndColumn(
-        model.getLinesContent() || [],
-        commentDecoration.range[0]
-      );
-
-      if (!aggr[lineNumber]) {
-        aggr[lineNumber] = [];
-      }
-
-      aggr[lineNumber].push(commentDecoration);
-
-      return aggr;
-    }, {});
-
-    const initialDecorations: any[] =
-      currentLineNumber === -1 ||
-      currentLineNumber in commentDecorationsByLineNumber
-        ? []
-        : [
-            {
-              range: new this.monaco.Range(
-                currentLineNumber,
-                1,
-                currentLineNumber,
-                1
-              ),
-              options: {
-                isWholeLine: true,
-                glyphMarginClassName: `editor-comments-glyph editor-comments-multi editor-comments-add`,
-              },
-            },
-          ];
-
-    return Object.keys(commentDecorationsByLineNumber).reduce(
-      (aggr, lineNumberKey) => {
-        const lineCommentDecorations =
-          commentDecorationsByLineNumber[lineNumberKey];
-        const lineNumber = Number(lineNumberKey);
-        const activeCommentDecoration = lineCommentDecorations.find(
-          commentDecoration =>
-            commentDecoration.commentId === currentCommentThreadId
-        );
-        const ids = lineCommentDecorations.map(
-          commentDecoration => commentDecoration.commentId
-        );
-        const commentRange = activeCommentDecoration
-          ? [
-              indexToLineAndColumn(
-                model.getLinesContent() || [],
-                activeCommentDecoration.range[0]
-              ),
-              indexToLineAndColumn(
-                model.getLinesContent() || [],
-                activeCommentDecoration.range[1]
-              ),
-            ]
-          : null;
-
-        return aggr.concat(
-          {
-            range: new this.monaco.Range(lineNumber, 1, lineNumber, 1),
-            options: {
-              // comment-id- class needs to be the LAST class!
-              glyphMarginClassName: `editor-comments-glyph ${
-                activeCommentDecoration ? 'editor-comments-active ' : ''
-              }${
-                ids.length > 1
-                  ? `editor-comments-multi editor-comments-multi-${ids.length} `
-                  : ''
-              }editor-comments-ids-${ids.join('_')}`,
-            },
-          },
-          commentRange
-            ? {
-                range: new this.monaco.Range(
-                  commentRange[0].lineNumber,
-                  commentRange[0].column,
-                  commentRange[1].lineNumber,
-                  commentRange[1].column
-                ),
-                options: {
-                  isWholeLine:
-                    commentRange[0].lineNumber === commentRange[1].lineNumber &&
-                    commentRange[0].column === commentRange[1].column,
-                  className: activeCommentDecoration
-                    ? 'editor-comments-highlight'
-                    : undefined,
-                },
-              }
-            : []
-        );
-      },
-      initialDecorations
-    );
-  }
-}
diff --git a/packages/app/src/app/overmind/effects/vscode/SandboxFsSync/index.ts b/packages/app/src/app/overmind/effects/vscode/SandboxFsSync/index.ts
deleted file mode 100644
index c2595cfd337..00000000000
--- a/packages/app/src/app/overmind/effects/vscode/SandboxFsSync/index.ts
+++ /dev/null
@@ -1,595 +0,0 @@
-import browserFs from 'fs';
-import { dirname, join } from 'path';
-
-import {
-  getDirectoryPath,
-  getModulePath,
-} from '@codesandbox/common/lib/sandbox/modules';
-import {
-  Directory,
-  Module,
-  Sandbox,
-  SandboxFs,
-} from '@codesandbox/common/lib/types';
-import delay from '@codesandbox/common/lib/utils/delay';
-import { getAbsoluteDependency } from '@codesandbox/common/lib/utils/dependencies';
-import { getGlobal } from '@codesandbox/common/lib/utils/global';
-import { protocolAndHost } from '@codesandbox/common/lib/utils/url-generator';
-import { getSavedCode } from 'app/overmind/utils/sandbox';
-import { isPrivateScope } from 'app/utils/private-registry';
-import { json } from 'overmind';
-
-import { WAIT_INITIAL_TYPINGS_MS } from '../constants';
-import { appendFile, mkdir, rename, rmdir, unlink, writeFile } from './utils';
-import { fetchPrivateDependency } from './private-type-fetch';
-
-const global = getGlobal() as Window & { BrowserFS: any };
-
-const SERVICE_URL = 'https://ata.codesandbox.io/api/v8';
-const FALLBACK_SERVICE_URL = 'https://typings.csb.dev/api/v8';
-const BUCKET_URL = 'https://prod-packager-packages.codesandbox.io/v1/typings';
-
-async function callApi(url: string, method = 'GET') {
-  const response = await fetch(url, {
-    method,
-  });
-
-  if (!response.ok) {
-    const error = new Error(response.statusText || '' + response.status);
-    const message = await response.json();
-    // @ts-ignore
-    error.response = message;
-    // @ts-ignore
-    error.statusCode = response.status;
-    throw error;
-  }
-
-  return response.json();
-}
-
-async function requestPackager(url: string, retryCount = 0, method = 'GET') {
-  let retries = 0;
-
-  // eslint-disable-next-line no-constant-condition
-  while (true) {
-    try {
-      const manifest = await callApi(url, method); // eslint-disable-line no-await-in-loop
-
-      return manifest;
-    } catch (e) {
-      if (e.response && e.statusCode !== 504) {
-        throw new Error(e.response.error);
-      }
-      // 403 status code means the bundler is still bundling
-      if (retries < retryCount) {
-        retries += 1;
-        await delay(1000 * 2); // eslint-disable-line no-await-in-loop
-      } else {
-        throw e;
-      }
-    }
-  }
-}
-
-type SandboxFsSyncOptions = {
-  getSandboxFs: () => SandboxFs;
-  getCurrentSandbox: () => Sandbox | null;
-};
-
-class SandboxFsSync {
-  private options: SandboxFsSyncOptions;
-  private types: {
-    [packageName: string]: {
-      [typeName: string]: string;
-    };
-  } = {};
-
-  private deps: { [path: string]: string } = {};
-
-  private workerIds: string[] = [];
-
-  private isDisposed = false;
-  private typesInfo: Promise<any>;
-  constructor(options: SandboxFsSyncOptions) {
-    this.options = options;
-    self.addEventListener('message', this.onWorkerMessage);
-  }
-
-  public sync(cb: () => void) {
-    this.send('reset', {});
-    this.syncDependencyTypings();
-    setTimeout(() => {
-      if (!this.isDisposed) {
-        cb();
-      }
-    }, WAIT_INITIAL_TYPINGS_MS);
-  }
-
-  public getTypes() {
-    return Object.keys(this.types).reduce(
-      (aggr, key) => Object.assign(aggr, this.types[key]),
-      {}
-    );
-  }
-
-  public dispose() {
-    this.isDisposed = true;
-    self.removeEventListener('message', this.onWorkerMessage);
-    this.clearSandboxFiles();
-  }
-
-  public create(sandbox: Sandbox): SandboxFs {
-    const sandboxFs = {};
-
-    sandbox.directories.forEach(d => {
-      const path = getDirectoryPath(sandbox.modules, sandbox.directories, d.id);
-
-      d.path = path;
-      // If this is a single directory with no children
-      if (!Object.keys(sandboxFs).some(p => dirname(p) === path)) {
-        sandboxFs[path] = { ...d, type: 'directory' };
-      }
-
-      browserFs.mkdir(join('/sandbox', path), () => {});
-    });
-
-    sandbox.modules.forEach(m => {
-      const path = getModulePath(sandbox.modules, sandbox.directories, m.id);
-      if (path) {
-        m.path = path;
-        sandboxFs[path] = {
-          ...m,
-          type: 'file',
-        };
-
-        browserFs.writeFile(join('/sandbox', path), m.code, () => {});
-      }
-    });
-
-    return sandboxFs;
-  }
-
-  public appendFile(fs: SandboxFs, module: Module) {
-    const copy = json(module);
-
-    appendFile(fs, copy);
-    this.send('append-file', copy);
-
-    const savedCode = getSavedCode(module.code, module.savedCode);
-    browserFs.appendFile(join('/sandbox', module.path!), savedCode, () => {});
-  }
-
-  public writeFile(fs: SandboxFs, module: Module) {
-    const copy = json(module);
-
-    writeFile(fs, copy);
-    this.send('write-file', copy);
-
-    const savedCode = getSavedCode(module.code, module.savedCode);
-    browserFs.writeFile(join('/sandbox', module.path!), savedCode, () => {});
-
-    if (module.title === 'package.json') {
-      this.syncDependencyTypings();
-    }
-  }
-
-  public rename(fs: SandboxFs, fromPath: string, toPath: string) {
-    rename(fs, fromPath, toPath);
-    this.send('rename', {
-      fromPath,
-      toPath,
-    });
-    browserFs.rename(
-      join('/sandbox', fromPath),
-      join('/sandbox', toPath),
-      () => {}
-    );
-  }
-
-  public rmdir(fs: SandboxFs, directory: Directory) {
-    const copy = json(directory);
-
-    rmdir(fs, copy);
-    this.send('rmdir', copy);
-    browserFs.rmdir(join('/sandbox', directory.path!), () => {});
-  }
-
-  public unlink(fs: SandboxFs, module: Module) {
-    const copy = json(module);
-
-    unlink(fs, copy);
-    this.send('unlink', copy);
-    browserFs.unlink(join('/sandbox', module.path!), () => {});
-  }
-
-  public mkdir(fs: SandboxFs, directory: Directory) {
-    const copy = json(directory);
-
-    mkdir(fs, copy);
-    this.send('mkdir', copy);
-    browserFs.mkdir(join('/sandbox', directory.path!), () => {});
-  }
-
-  private onWorkerMessage = evt => {
-    if (evt.data.$fs_id && !this.workerIds.includes(evt.data.$fs_id)) {
-      this.workerIds.push(evt.data.$fs_id);
-    }
-
-    if (evt.data.$type === 'sync-sandbox') {
-      this.syncSandbox(this.options.getSandboxFs(), evt.data.$fs_id);
-    }
-
-    if (evt.data.$type === 'sync-types') {
-      this.send('types-sync', this.getTypes(), evt.data.$fs_id);
-    }
-  };
-
-  // We sync the FS whenever we create a new one, which happens in different
-  // scenarios. If a worker is requesting a sync we grab the existing FS from
-  // the state
-  private syncSandbox(sandboxFs, id?) {
-    this.send('sandbox-fs', json(sandboxFs), id);
-  }
-
-  private send(type: string, data: any, id?: string) {
-    global.postMessage(
-      {
-        $broadcast: true,
-        $fs_ids: typeof id === 'undefined' ? this.workerIds : [id],
-        $type: type,
-        $data: data,
-      },
-      protocolAndHost()
-    );
-  }
-
-  // We pass in either existing or new syncId. This allows us to evaluate
-  // if we are just going to pass existing types or start up a new round
-  // to fetch types
-  private async syncDependencyTypings(fsId?: string) {
-    try {
-      this.typesInfo = await this.getTypesInfo();
-      const syncDetails = await this.getDependencyTypingsSyncDetails();
-
-      if (syncDetails) {
-        const newDeps = syncDetails.dependencies;
-        const { added, removed } = this.getDepsChanges(newDeps);
-
-        this.deps = newDeps;
-
-        added.forEach(dep => {
-          this.fetchDependencyTyping(dep, syncDetails.autoInstall);
-        });
-
-        if (removed.length) {
-          const removedTypings = {};
-
-          // We go through removed deps to figure out what typings packages
-          // has been removed, then delete the from our types as well
-          removed.forEach(removedDep => {
-            const typings = this.types[removedDep.name] || {};
-
-            Object.assign(removedTypings, typings);
-
-            this.fetchedPrivateDependencies.delete(removedDep.name);
-
-            delete this.types[removedDep.name];
-          });
-
-          this.send('types-remove', removedTypings, fsId);
-        }
-      }
-    } catch (error) {
-      // eslint-disable-next-line
-      console.error(error);
-    }
-  }
-
-  private getDepsChanges(newDeps) {
-    const added: Array<{ name: string; version: string }> = [];
-    const removed: Array<{ name: string; version: string }> = [];
-    const newDepsKeys = Object.keys(newDeps);
-    const currentDepsKeys = Object.keys(this.deps);
-
-    if (currentDepsKeys.length === 0) {
-      added.push({
-        name: '@types/jest',
-        version: 'latest',
-      });
-    }
-
-    newDepsKeys.forEach(newDepKey => {
-      if (
-        !this.deps[newDepKey] ||
-        this.deps[newDepKey] !== newDeps[newDepKey]
-      ) {
-        added.push({
-          name: newDepKey,
-          version: newDeps[newDepKey],
-        });
-      }
-    });
-
-    currentDepsKeys.forEach(currentDepKey => {
-      if (currentDepKey !== '@types/jest' && !newDeps[currentDepKey]) {
-        removed.push({
-          name: currentDepKey,
-          version: this.deps[currentDepKey],
-        });
-      }
-    });
-
-    return { added, removed };
-  }
-
-  private async getDependencyTypingsSyncDetails(): Promise<{
-    dependencies: { [name: string]: string };
-    autoInstall: boolean;
-  } | null> {
-    return new Promise((resolve, reject) => {
-      try {
-        browserFs.stat('/sandbox/package.json', (packageJsonError, stat) => {
-          if (packageJsonError) {
-            resolve(null);
-            return;
-          }
-
-          browserFs.readFile(
-            '/sandbox/package.json',
-            async (packageJsonReadError, rv) => {
-              if (packageJsonReadError) {
-                resolve(null);
-                return;
-              }
-
-              browserFs.stat(
-                '/sandbox/tsconfig.json',
-                (tsConfigError, result) => {
-                  // If tsconfig exists we want to sync the typesp
-                  try {
-                    const packageJson = JSON.parse(rv.toString());
-                    resolve({
-                      dependencies: {
-                        ...packageJson.dependencies,
-                        ...packageJson.devDependencies,
-                      },
-                      autoInstall: Boolean(tsConfigError) || !result,
-                    });
-                  } catch (error) {
-                    reject(new Error('TYPINGS: Could not parse package.json'));
-                  }
-                }
-              );
-            }
-          );
-        });
-      } catch (e) {
-        resolve(null);
-        // Do nothing
-      }
-    });
-  }
-
-  /**
-   * Gets all entries of dependencies -> @types/ version
-   */
-  private getTypesInfo() {
-    if (this.typesInfo) {
-      return this.typesInfo;
-    }
-
-    this.typesInfo = fetch(
-      'https://unpkg.com/types-registry@latest/index.json',
-      // This falls back to etag caching, ensuring we always have latest version
-      // https://hacks.mozilla.org/2016/03/referrer-and-cache-control-apis-for-fetch/
-      { cache: 'no-cache' }
-    )
-      .then(x => x.json())
-      .then(x => x.entries);
-
-    return this.typesInfo;
-  }
-
-  // We send new packages to all registered workers
-  private setAndSendPackageTypes(
-    name: string,
-    types: { [name: string]: { module: { code: string } } }
-  ) {
-    if (!this.isDisposed) {
-      if (!this.types[name]) {
-        this.types[name] = {};
-      }
-
-      const existingDeps = Object.keys(this.types);
-      /*
-        We have to ensure that a dependency does not override the types of the main
-        package if it is installed (their versions might differ)
-      */
-      const filteredTypes = Object.keys(types).reduce((aggr, newTypePath) => {
-        const alreadyExists = existingDeps.reduce((subAggr, depName) => {
-          // If we have already installed the typing from the main package
-          if (
-            subAggr ||
-            (depName !== name &&
-              this.types[depName][newTypePath] &&
-              newTypePath.startsWith('/' + depName + '/'))
-          ) {
-            return true;
-          }
-
-          return subAggr;
-        }, false);
-
-        if (!alreadyExists) {
-          aggr[newTypePath] = types[newTypePath];
-        }
-
-        return aggr;
-      }, {});
-
-      Object.assign(this.types[name], filteredTypes);
-      this.send('package-types-sync', filteredTypes);
-    }
-  }
-
-  private async fetchDependencyTyping(
-    dep: { name: string; version: string },
-    autoInstallTypes: boolean
-  ) {
-    try {
-      try {
-        const files = await this.fetchDependencyTypingFiles(
-          dep.name,
-          dep.version
-        );
-        const hasTypes = Boolean(
-          Object.keys(files).some(
-            key => key.startsWith('/' + dep.name) && key.endsWith('.d.ts')
-          )
-        );
-
-        if (
-          !hasTypes &&
-          autoInstallTypes &&
-          this.typesInfo[dep.name] &&
-          !dep.name.startsWith('@types/')
-        ) {
-          const name = `@types/${dep.name}`;
-          this.fetchDependencyTypingFiles(name, this.typesInfo[dep.name].latest)
-            .then(typesFiles => {
-              this.setAndSendPackageTypes(dep.name, typesFiles);
-            })
-            .catch(e => {
-              if (process.env.NODE_ENV === 'development') {
-                console.warn('Trouble fetching types for ' + name);
-              }
-            });
-        } else {
-          this.setAndSendPackageTypes(dep.name, files);
-        }
-      } catch (e) {
-        if (process.env.NODE_ENV === 'development') {
-          console.warn('Trouble fetching types for ' + dep.name);
-        }
-      }
-    } catch (e) {
-      /* ignore */
-    }
-  }
-
-  private fetchedPrivateDependencies = new Set<string>();
-  /**
-   * Fetch the dependency typings of a private package. We have different behaviour here,
-   * instead of fetching directly from the type fetcher we fetch the tar directly, and
-   * extract the `.d.ts` & `.ts` files from it. This doesn't account for all transient dependencies
-   * of this dependency though, that's why we also download the "subdependencies" using the normal
-   * fetching strategy (`fetchDependencyTypingFiles`).
-   *
-   * There's a risk we'll run in a deadlock in this approach; if `a` needs `b` and `b` needs `a`, we'll
-   * recursively keep calling the same functions. To prevent this we keep track of which dependencies have
-   * been processed and skip if those have been added already.
-   */
-  private async fetchPrivateDependencyTypingsFiles(
-    name: string,
-    version: string
-  ): Promise<{ [f: string]: { module: { code: string } } }> {
-    if (this.fetchedPrivateDependencies.has(name)) {
-      return {};
-    }
-
-    const { dtsFiles, dependencies } = await fetchPrivateDependency(
-      this.options.getCurrentSandbox()!,
-      name,
-      version
-    );
-
-    this.fetchedPrivateDependencies.add(name);
-
-    const totalFiles: { [f: string]: { module: { code: string } } } = dtsFiles;
-    dependencies.map(async dep => {
-      const files = await this.fetchDependencyTypingFiles(
-        dep.name,
-        dep.version
-      );
-      Object.keys(files).forEach(f => {
-        totalFiles[f] = files[f];
-      });
-    });
-
-    return totalFiles;
-  }
-
-  private async fetchDependencyTypingFiles(
-    originalName: string,
-    originalVersion: string
-  ): Promise<{ [path: string]: { module: { code: string } } }> {
-    const sandbox = this.options.getCurrentSandbox();
-    const isPrivatePackage = sandbox && isPrivateScope(sandbox, originalName);
-
-    if (isPrivatePackage) {
-      return this.fetchPrivateDependencyTypingsFiles(
-        originalName,
-        originalVersion
-      );
-    }
-
-    const { name, version } = await getAbsoluteDependency(
-      originalName,
-      originalVersion
-    );
-    const dependencyQuery = encodeURIComponent(`${name}@${version}`);
-
-    try {
-      const url = `${BUCKET_URL}/${name}/${version}.json`;
-      return await requestPackager(url, 0).then(x => x.files);
-    } catch (e) {
-      // Hasn't been generated
-    }
-
-    try {
-      const { files } = await requestPackager(
-        `${SERVICE_URL}/${dependencyQuery}.json`,
-        3
-      );
-
-      return files;
-    } catch {
-      const { files } = await requestPackager(
-        `${FALLBACK_SERVICE_URL}/${dependencyQuery}.json`,
-        3
-      );
-
-      return files;
-    }
-  }
-
-  private clearSandboxFiles(dir = '/sandbox') {
-    if (dir === '/sandbox/node_modules') {
-      return;
-    }
-
-    const kids = browserFs.readdirSync(dir);
-
-    kids.forEach(kid => {
-      const path = join(dir, kid);
-
-      try {
-        const lstat = browserFs.lstatSync(path);
-
-        if (lstat.isDirectory()) {
-          this.clearSandboxFiles(path);
-        } else {
-          browserFs.unlinkSync(path);
-        }
-      } catch {
-        // Do nothing
-      }
-    });
-
-    if (dir !== '/sandbox') {
-      browserFs.rmdirSync(dir);
-    }
-  }
-}
-
-export default SandboxFsSync;
diff --git a/packages/app/src/app/overmind/effects/vscode/SandboxFsSync/private-type-fetch.ts b/packages/app/src/app/overmind/effects/vscode/SandboxFsSync/private-type-fetch.ts
deleted file mode 100644
index 89c254e608f..00000000000
--- a/packages/app/src/app/overmind/effects/vscode/SandboxFsSync/private-type-fetch.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import { Sandbox } from '@codesandbox/common/lib/types';
-import { NpmRegistryFetcher } from 'sandpack-core/lib/npm/dynamic/fetch-protocols/npm-registry';
-
-type Output = {
-  dtsFiles: { [p: string]: { module: { code: string } } };
-  dependencies: Array<{ name: string; version: string }>;
-};
-
-/**
- * Fetches the tar of the private dependency from the server, extracts it in memory and filters out the type
- * files.
- */
-export async function fetchPrivateDependency(
-  sandbox: Sandbox,
-  name: string,
-  version: string
-): Promise<Output> {
-  // TODO: add support for multiple registries
-  const cleanUrl = sandbox.npmRegistries[0].registryUrl.replace(/\/$/, '');
-
-  const fetcher = new NpmRegistryFetcher(cleanUrl, {
-    // With our custom proxy on the server we want to handle downloading
-    // the tarball. So we proxy it.
-    provideTarballUrl: (n: string, v: string) =>
-      `${cleanUrl}/${n.replace('/', '%2f')}/${v}`,
-  });
-
-  const meta = await fetcher.meta(name, version);
-  const validFilePaths = Object.keys(meta).filter(
-    file => file.endsWith('.ts') || file.endsWith('/package.json')
-  );
-  const validFiles = {};
-
-  await Promise.all(
-    validFilePaths.map(async filePath => {
-      const file = await fetcher.file(name, version, filePath);
-      validFiles[`/${name}${filePath}`] = { module: { code: file } };
-    })
-  );
-
-  const packageJSONPath = `/package.json`;
-  const packageJSONCode = await fetcher.file(name, version, packageJSONPath);
-  const deps: { [dep: string]: string } = JSON.parse(packageJSONCode)
-    .dependencies;
-  const depArray = Object.keys(deps).map(depName => ({
-    name: depName,
-    version: deps[depName],
-  }));
-
-  return { dtsFiles: validFiles, dependencies: depArray };
-}
diff --git a/packages/app/src/app/overmind/effects/vscode/SandboxFsSync/utils.ts b/packages/app/src/app/overmind/effects/vscode/SandboxFsSync/utils.ts
deleted file mode 100644
index 730668d8635..00000000000
--- a/packages/app/src/app/overmind/effects/vscode/SandboxFsSync/utils.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { Directory, Module, SandboxFs } from '@codesandbox/common/lib/types';
-import { json } from 'overmind';
-
-export const appendFile = (fs: SandboxFs, module: Module) => {
-  fs[module.path!] = module;
-};
-
-export const writeFile = (fs: SandboxFs, module: Module) => {
-  fs[module.path!] = module;
-};
-
-export const rename = (fs: SandboxFs, fromPath: string, toPath: string) => {
-  Object.keys(fs).forEach(path => {
-    if (path.startsWith(fromPath + '/') || path === fromPath) {
-      const newPath = path.replace(fromPath, toPath);
-      const module = fs[path];
-
-      delete fs[path];
-      fs[newPath] = json(module);
-    }
-  });
-};
-
-export const rmdir = (fs: SandboxFs, directory: Directory) => {
-  Object.keys(fs).forEach(path => {
-    if (path.startsWith(directory.path!)) {
-      delete fs[path];
-    }
-  });
-};
-
-export const unlink = (fs: SandboxFs, module: Module) => {
-  delete fs[module.path!];
-};
-
-export const mkdir = (fs: SandboxFs, directory: Directory) => {
-  fs[directory.path!] = directory;
-};
diff --git a/packages/app/src/app/overmind/effects/vscode/Workbench.ts b/packages/app/src/app/overmind/effects/vscode/Workbench.ts
deleted file mode 100644
index 201068eb9b2..00000000000
--- a/packages/app/src/app/overmind/effects/vscode/Workbench.ts
+++ /dev/null
@@ -1,512 +0,0 @@
-import { notificationState } from '@codesandbox/common/lib/utils/notifications';
-import {
-  NotificationMessage,
-  NotificationStatus,
-} from '@codesandbox/notifications/lib/state';
-
-import { KeyCode, KeyMod } from './keyCodes';
-
-// Copied from 'common/actions' in vscode
-export enum MenuId {
-  CommandPalette,
-  DebugBreakpointsContext,
-  DebugCallStackContext,
-  DebugConsoleContext,
-  DebugVariablesContext,
-  DebugWatchContext,
-  DebugToolbar,
-  EditorContext,
-  EditorTitle,
-  EditorTitleContext,
-  EmptyEditorGroupContext,
-  ExplorerContext,
-  MenubarAppearanceMenu,
-  MenubarDebugMenu,
-  MenubarEditMenu,
-  MenubarFileMenu,
-  MenubarGoMenu,
-  MenubarHelpMenu,
-  MenubarLayoutMenu,
-  MenubarNewBreakpointMenu,
-  MenubarPreferencesMenu,
-  MenubarRecentMenu,
-  MenubarSelectionMenu,
-  MenubarSwitchEditorMenu,
-  MenubarSwitchGroupMenu,
-  MenubarTerminalMenu,
-  MenubarViewMenu,
-  OpenEditorsContext,
-  ProblemsPanelContext,
-  SCMChangeContext,
-  SCMResourceContext,
-  SCMResourceGroupContext,
-  SCMSourceControl,
-  SCMTitle,
-  SearchContext,
-  TouchBarContext,
-  ViewItemContext,
-  ViewTitle,
-  Root,
-}
-
-export class Workbench {
-  monaco: any;
-  controller: { getState: any; getSignal: any };
-  runCommand: (id: string) => Promise<void>;
-  constructor(
-    monaco: any,
-    controller: { getState: any; getSignal: any },
-    runCommand: (id: string) => Promise<void>
-  ) {
-    this.monaco = monaco;
-    this.controller = controller;
-    this.runCommand = runCommand;
-  }
-
-  public addWorkbenchActions() {
-    this.addWorkbenchAction({
-      id: 'workbench.action.toggleStatusbarVisibility',
-      label: 'Toggle Status Bar Visibility',
-      commandLabel: 'Toggle Status Bar Visibility',
-      category: 'View',
-      run: () => {
-        this.controller.getSignal('editor.toggleStatusBar')();
-      },
-    });
-
-    this.addWorkbenchAction({
-      id: 'view.preview.flip',
-      label: 'Flip Preview Layout',
-      commandLabel: 'Toggle Vertical/Horizontal Preview Layout',
-      category: 'View',
-      run: () => {
-        this.runCommand('workbench.action.toggleEditorGroupLayout');
-        this.controller.getSignal('editor.toggleEditorPreviewLayout')();
-      },
-      keybindings: {
-        primary: KeyMod.Shift | KeyMod.Alt | KeyCode.KEY_9,
-        mac: {
-          primary: KeyMod.CtrlCmd | KeyMod.Alt | KeyCode.KEY_9,
-        },
-      },
-    });
-
-    this.addWorkbenchAction({
-      id: 'codesandbox.sandbox.new',
-      label: 'New Sandbox...',
-      category: 'Sandbox',
-      run: () => {
-        this.controller.getSignal('openCreateSandboxModal')({});
-      },
-    });
-
-    this.addWorkbenchAction({
-      id: 'codesandbox.sandbox.fork',
-      label: 'Fork Sandbox',
-      category: 'Sandbox',
-      run: () => {
-        this.controller.getSignal('editor.forkSandboxClicked')({});
-      },
-    });
-
-    this.addWorkbenchAction({
-      id: 'codesandbox.sandbox.exportzip',
-      label: 'Export To ZIP',
-      category: 'Sandbox',
-      run: () => {
-        this.controller.getSignal('editor.createZipClicked')();
-      },
-    });
-
-    this.addWorkbenchAction({
-      id: 'codesandbox.preferences',
-      label: 'Open CodeSandbox Settings',
-      category: 'Preferences',
-      run: () => {
-        this.controller.getSignal('modalOpened')({ modal: 'preferences' });
-      },
-    });
-
-    this.addWorkbenchAction({
-      id: 'codesandbox.preview.refresh',
-      label: 'Refresh Preview',
-      category: 'View',
-      run: () => {
-        this.controller.getSignal('editor.refreshPreview')();
-      },
-      keybindings: {
-        primary: KeyMod.CtrlCmd | KeyMod.Shift | KeyCode.KEY_R,
-      },
-    });
-
-    this.addWorkbenchAction({
-      id: 'codesandbox.dashboard',
-      label: 'Dashboard',
-      category: 'Root',
-      run: () => {
-        // hard link
-        window.location.pathname = '/dashboard/home';
-      },
-      keybindings: {
-        primary: KeyMod.CtrlCmd | KeyCode.Escape,
-        mac: { primary: KeyMod.CtrlCmd | KeyCode.Escape },
-      },
-    });
-
-    this.addWorkbenchAction({
-      id: 'codesandbox.homepage',
-      label: 'Homepage',
-      category: 'Root',
-      run: () => {
-        /**
-         * It creates a fake link, once the history object
-         * is used by the react router and it doesn't route to the proper place
-         */
-        const fakeLink = document.createElement('a');
-        fakeLink.href = `${window.location.origin}/?from-app=1`;
-        document.body.appendChild(fakeLink);
-        fakeLink.click();
-      },
-    });
-
-    this.addWorkbenchAction({
-      id: 'view.fullscreen',
-      label: 'Toggle Fullscreen',
-      category: 'View',
-      run: () => {
-        if (document.fullscreenElement) {
-          document.exitFullscreen();
-        } else {
-          if (document.documentElement.requestFullscreen) {
-            document.documentElement.requestFullscreen();
-            // @ts-ignore - safari has this under a webkit flag
-          } else if (document.documentElement.webkitRequestFullscreen) {
-            // @ts-ignore - safari has this under a webkit flag
-            document.documentElement.webkitRequestFullscreen();
-          }
-
-          this.addNotification({
-            title: 'Fullscreen',
-            message:
-              'You are now in fullscreen mode. Press and hold ESC to exit',
-            status: NotificationStatus.NOTICE,
-            timeAlive: 5000,
-          });
-
-          if ('keyboard' in navigator) {
-            // @ts-ignore - keyboard locking is experimental api
-            navigator.keyboard.lock([
-              'Escape',
-              'KeyW',
-              'KeyN',
-              'KeyT',
-              'ArrowLeft',
-              'ArrowRight',
-            ]);
-          }
-        }
-      },
-      keybindings: {
-        primary: KeyMod.WinCtrl | KeyMod.Alt | KeyCode.KEY_F,
-      },
-    });
-
-    if (
-      this.controller.getState().editor.currentSandbox?.featureFlags.comments
-    ) {
-      this.addWorkbenchAction({
-        id: 'comments.add',
-        label: 'Comment on code',
-        category: 'Comments',
-        run: () => {
-          this.controller.getSignal('comments.createCodeComment')();
-        },
-      });
-    }
-
-    this.appendMenuItem(MenuId.Root, {
-      group: '1_workspace',
-      order: 1,
-      command: {
-        id: 'codesandbox.dashboard',
-        title: 'Dashboard',
-      },
-    });
-
-    this.appendMenuItem(MenuId.Root, {
-      group: '3_open',
-      order: 1,
-      command: {
-        id: 'workbench.action.showCommands',
-        title: '&&Command Palette',
-      },
-    });
-
-    this.appendMenuItem(MenuId.MenubarFileMenu, {
-      group: '1_new',
-      order: 1,
-      command: {
-        id: 'codesandbox.sandbox.new',
-        title: 'New Sandbox...',
-      },
-    });
-
-    this.appendMenuItem(MenuId.Root, {
-      group: '3_support',
-      order: 1,
-      command: {
-        id: 'codesandbox.homepage',
-        title: 'Go to Homepage',
-      },
-    });
-
-    this.appendMenuItem(MenuId.MenubarFileMenu, {
-      // Z to be the last item after vscode group 4
-      group: '4_zsandbox',
-      order: 1,
-      command: {
-        id: 'codesandbox.sandbox.fork',
-        title: '&&Fork Sandbox',
-      },
-    });
-
-    if (
-      this.controller.getState().editor?.currentSandbox?.permissions
-        .preventSandboxExport
-    ) {
-      // don't add the option to add export
-    } else {
-      this.appendMenuItem(MenuId.MenubarFileMenu, {
-        group: '4_zsandbox',
-        order: 2,
-        command: {
-          id: 'codesandbox.sandbox.exportzip',
-          title: 'Export to ZIP',
-        },
-      });
-    }
-
-    this.appendMenuItem(MenuId.MenubarPreferencesMenu, {
-      group: '1_settings',
-      order: 1,
-      command: {
-        id: 'codesandbox.preferences',
-        title: 'CodeSandbox Settings',
-      },
-    });
-
-    this.appendMenuItem(MenuId.MenubarLayoutMenu, {
-      group: 'z_flip',
-      command: {
-        id: 'view.preview.flip',
-        title: 'Flip Full Layout',
-      },
-      order: 2,
-    });
-
-    this.appendMenuItem(MenuId.MenubarViewMenu, {
-      group: '1_toggle_view',
-      order: 0,
-      command: {
-        id: 'view.fullscreen',
-        title: 'Toggle Fullscreen',
-      },
-    });
-
-    const addBrowserNavigationCommand = (
-      id: string,
-      label: string,
-      url: string
-    ) => {
-      this.addWorkbenchAction({
-        id,
-        label,
-        category: 'Help',
-        run: () => {
-          window.open(url, '_blank');
-        },
-      });
-    };
-
-    addBrowserNavigationCommand(
-      'codesandbox.help.documentation',
-      'Documentation',
-      'https://codesandbox.io/docs'
-    );
-    addBrowserNavigationCommand(
-      'codesandbox.explore',
-      'Explore Sandboxes',
-      'https://codesandbox.io/explore'
-    );
-    addBrowserNavigationCommand(
-      'codesandbox.search',
-      'Search',
-      'https://codesandbox.io/search'
-    );
-    addBrowserNavigationCommand(
-      'codesandbox.help.open-issue',
-      'Open Issue on GitHub',
-      'https://github.com/codesandbox/codesandbox-client/issues'
-    );
-    addBrowserNavigationCommand(
-      'codesandbox.help.github',
-      'Open Our GitHub Repository',
-      'https://github.com/codesandbox/codesandbox-client'
-    );
-    addBrowserNavigationCommand(
-      'codesandbox.help.twitter',
-      'Follow Us on Twitter',
-      'https://twitter.com/codesandbox'
-    );
-    addBrowserNavigationCommand(
-      'codesandbox.help.discord',
-      'Join our discord server',
-      'https://discord.gg/C6vfhW3H6e'
-    );
-
-    this.addWorkbenchAction({
-      id: 'codesandbox.help.feedback',
-      label: 'Submit Feedback...',
-      category: 'Help',
-      run: () => {
-        this.controller.getSignal('modalOpened')({ modal: 'feedback' });
-      },
-    });
-
-    this.appendMenuItem(MenuId.MenubarHelpMenu, {
-      group: '1_resources',
-      order: 1,
-      command: {
-        id: 'codesandbox.help.documentation',
-        title: '&&Documentation',
-      },
-    });
-
-    this.appendMenuItem(MenuId.MenubarHelpMenu, {
-      group: '1_resources',
-      order: 2,
-      command: {
-        id: 'codesandbox.explore',
-        title: '&&Explore Sandboxes',
-      },
-    });
-    this.appendMenuItem(MenuId.MenubarHelpMenu, {
-      group: '1_resources',
-      order: 3,
-      command: {
-        id: 'codesandbox.search',
-        title: '&&Search',
-      },
-    });
-    this.appendMenuItem(MenuId.MenubarHelpMenu, {
-      group: '1_resources',
-      order: 4,
-      command: {
-        id: 'codesandbox.dashboard',
-        title: 'D&&ashboard',
-      },
-    });
-
-    this.appendMenuItem(MenuId.MenubarHelpMenu, {
-      group: '2_help',
-      order: 1,
-      command: {
-        id: 'codesandbox.help.open-issue',
-        title: '&&Open Issue on GitHub',
-      },
-    });
-
-    this.appendMenuItem(MenuId.MenubarHelpMenu, {
-      group: '2_help',
-      order: 2,
-      command: {
-        id: 'codesandbox.help.feedback',
-        title: 'Submit &&Feedback...',
-      },
-    });
-
-    this.appendMenuItem(MenuId.MenubarHelpMenu, {
-      group: '3_social',
-      order: 1,
-      command: {
-        id: 'codesandbox.help.github',
-        title: '&&GitHub Repository',
-      },
-    });
-
-    this.appendMenuItem(MenuId.MenubarHelpMenu, {
-      group: '3_social',
-      order: 2,
-      command: {
-        id: 'codesandbox.help.twitter',
-        title: 'Follow Us on &&Twitter',
-      },
-    });
-
-    this.appendMenuItem(MenuId.MenubarHelpMenu, {
-      group: '3_social',
-      order: 3,
-      command: {
-        id: 'codesandbox.help.discord',
-        title: 'Get Help on &&Discord',
-      },
-    });
-
-    if (
-      this.controller.getState().editor.currentSandbox?.featureFlags.comments
-    ) {
-      this.appendMenuItem(MenuId.EditorContext, {
-        group: '0_comments',
-        order: 0,
-        command: {
-          id: 'comments.add',
-          title: 'Comment on code',
-        },
-      });
-    }
-  }
-
-  private addWorkbenchAction({
-    id,
-    label,
-    commandLabel = label,
-    category = 'CodeSandbox',
-    run,
-    keybindings = { primary: 0 },
-  }: {
-    id: string;
-    label: string;
-    commandLabel?: string; // Name of the command
-    category?: string;
-    run: () => any | Promise<any>;
-    keybindings?: { primary: number; mac?: { primary: number } };
-  }) {
-    this.monaco.editor.addWorkbenchActions({
-      id,
-      label,
-      commandLabel,
-      run,
-      category,
-      keybindings,
-    });
-  }
-
-  private appendMenuItem(
-    menubarId: number,
-    item: {
-      group: string;
-      command: {
-        id: string;
-        title: string;
-        toggled?: boolean;
-      };
-      order: number;
-    }
-  ) {
-    this.monaco.editor.appendMenuItem(menubarId, item);
-  }
-
-  private addNotification(notification: NotificationMessage) {
-    notificationState.addNotification(notification);
-  }
-}
diff --git a/packages/app/src/app/overmind/effects/vscode/composeMenuAppTree.ts b/packages/app/src/app/overmind/effects/vscode/composeMenuAppTree.ts
deleted file mode 100644
index ac0567aa1cc..00000000000
--- a/packages/app/src/app/overmind/effects/vscode/composeMenuAppTree.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import { MenuId } from './Workbench';
-
-export type MenuAppItems = Array<{
-  group: string;
-  order: number;
-  command?: {
-    id: string;
-    title: string;
-    when?: { key: string };
-    precondition?: { key: string };
-    toggled?: { key: string };
-  };
-  title?: string;
-  when?: { key: string };
-  submenu?: MenuAppItems;
-  submenuId?: number;
-}>;
-
-const DEFAULT_ITEMS = [
-  {
-    title: '&&File',
-    submenu: MenuId.MenubarFileMenu,
-    group: '2_root',
-    order: 1,
-  },
-  {
-    title: '&&Edit',
-    submenu: MenuId.MenubarEditMenu,
-    group: '2_root',
-    order: 2,
-  },
-  {
-    title: '&&Selection',
-    submenu: MenuId.MenubarSelectionMenu,
-    group: '2_root',
-    order: 3,
-  },
-  {
-    title: '&&View',
-    submenu: MenuId.MenubarViewMenu,
-    group: '2_root',
-    order: 4,
-  },
-  {
-    title: '&&Go',
-    submenu: MenuId.MenubarGoMenu,
-    group: '2_root',
-    order: 5,
-  },
-  {
-    title: '&&Help',
-    submenu: MenuId.MenubarHelpMenu,
-    group: '3_support',
-    order: 2,
-  },
-];
-
-type InternalMenuType = Array<{ submenu?: string }>;
-export const composeMenuAppTree = (
-  getVsCodeMenuItems: (id: string | MenuId) => InternalMenuType
-): MenuAppItems => {
-  const rootMenu = [...getVsCodeMenuItems(MenuId.Root), ...DEFAULT_ITEMS];
-
-  const getSubmenu = (menu: InternalMenuType) =>
-    menu.map(item => {
-      const submenuId = item.submenu;
-
-      if (submenuId) {
-        const submenu = getVsCodeMenuItems(submenuId);
-        return { ...item, submenuId, submenu: getSubmenu(submenu) };
-      }
-
-      return item;
-    });
-
-  return getSubmenu((rootMenu as unknown) as InternalMenuType);
-};
diff --git a/packages/app/src/app/overmind/effects/vscode/constants.ts b/packages/app/src/app/overmind/effects/vscode/constants.ts
deleted file mode 100644
index d4db2d4c8ce..00000000000
--- a/packages/app/src/app/overmind/effects/vscode/constants.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export const EXTENSIONS_LOCATION = process.env.VSCODE
-  ? '/vscode/extensions-bundle'
-  : '/public/vscode-extensions/v21';
-
-export const VIM_EXTENSION_ID = 'vscodevim.vim';
-
-export const WAIT_INITIAL_TYPINGS_MS = 1000;
diff --git a/packages/app/src/app/overmind/effects/vscode/extensionHostWorker/bootstrappers/client-ext-host.ts b/packages/app/src/app/overmind/effects/vscode/extensionHostWorker/bootstrappers/client-ext-host.ts
deleted file mode 100644
index 771f6c49342..00000000000
--- a/packages/app/src/app/overmind/effects/vscode/extensionHostWorker/bootstrappers/client-ext-host.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import * as childProcess from 'node-services/lib/child_process';
-// @ts-ignore
-import DefaultWorkLoader from 'worker-loader?publicPath=/&name=dynamic-worker.[hash:8].worker.js!./generic-1';
-// @ts-ignore
-import SvelteWorker from 'worker-loader?publicPath=/&name=svelte-worker.[hash:8].worker.js!./svelte-worker';
-// @ts-ignore
-import TSWorker from 'worker-loader?publicPath=/&name=typescript-worker.[hash:8].worker.js!./ts-extension';
-// @ts-ignore
-import VueWorker from 'worker-loader?publicPath=/&name=vue-worker.[hash:8].worker.js!./vue-worker';
-
-import { initializeAll } from '../common/global';
-
-childProcess.addDefaultForkHandler(DefaultWorkLoader);
-
-childProcess.addForkHandler(
-  '/extensions/node_modules/typescript/lib/tsserver.js',
-  TSWorker
-);
-childProcess.addForkHandler(
-  '/extensions/octref.vetur-0.28.0/server/dist/vueServerMain.js',
-  VueWorker
-);
-childProcess.addForkHandler(
-  '/extensions/jamesbirtles.svelte-vscode-0.7.1/node_modules/svelte-language-server/bin/server.js',
-  SvelteWorker
-);
-
-initializeAll().then(() => {
-  // Preload the TS worker for fast init
-  childProcess.preloadForkHandler(
-    '/extensions/node_modules/typescript/lib/tsserver.js'
-  );
-
-  // eslint-disable-next-line
-  import('../workers/ext-host-worker');
-});
diff --git a/packages/app/src/app/overmind/effects/vscode/extensionHostWorker/bootstrappers/container-ext-host.ts b/packages/app/src/app/overmind/effects/vscode/extensionHostWorker/bootstrappers/container-ext-host.ts
deleted file mode 100644
index 2325406d2a6..00000000000
--- a/packages/app/src/app/overmind/effects/vscode/extensionHostWorker/bootstrappers/container-ext-host.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import * as childProcess from 'node-services/lib/child_process';
-// @ts-ignore
-import DefaultWorkLoader from 'worker-loader?publicPath=/&name=dynamic-worker.[hash:8].worker.js!./generic-1';
-// @ts-ignore
-import SvelteWorker from 'worker-loader?publicPath=/&name=svelte-worker.[hash:8].worker.js!./svelte-worker';
-// @ts-ignore
-import VueWorker from 'worker-loader?publicPath=/&name=vue-worker.[hash:8].worker.js!./vue-worker';
-
-import { initializeAll } from '../common/global';
-import { WebsocketLSP } from '../services/WebsocketLSP';
-
-childProcess.addDefaultForkHandler(DefaultWorkLoader);
-
-childProcess.addForkHandler(
-  '/extensions/node_modules/typescript/lib/tsserver.js',
-  () => new WebsocketLSP()
-);
-childProcess.addForkHandler(
-  '/extensions/octref.vetur-0.28.0/server/dist/vueServerMain.js',
-  VueWorker
-);
-childProcess.addForkHandler(
-  '/extensions/jamesbirtles.svelte-vscode-0.7.1/node_modules/svelte-language-server/bin/server.js',
-  SvelteWorker
-);
-
-initializeAll().then(() => {
-  // Preload the TS worker for fast init
-  childProcess.preloadForkHandler(
-    '/extensions/node_modules/typescript/lib/tsserver.js'
-  );
-
-  // eslint-disable-next-line
-  import('../workers/ext-host-worker');
-});
diff --git a/packages/app/src/app/overmind/effects/vscode/extensionHostWorker/bootstrappers/generic-1.ts b/packages/app/src/app/overmind/effects/vscode/extensionHostWorker/bootstrappers/generic-1.ts
deleted file mode 100644
index 5ae0c21cea6..00000000000
--- a/packages/app/src/app/overmind/effects/vscode/extensionHostWorker/bootstrappers/generic-1.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as childProcess from 'node-services/lib/child_process';
-// @ts-ignore
-import SubWorkLoader from 'worker-loader?publicPath=/&name=sub-dynamic-worker.[hash:8].worker.js!./generic-2';
-
-import { initializeAll } from '../common/global';
-
-childProcess.addDefaultForkHandler(SubWorkLoader);
-
-initializeAll().then(() => {
-  // Use require so that it only starts executing the chunk with all globals specified.
-  // eslint-disable-next-line
-  require('../workers/generic-worker').start({
-    syncSandbox: true,
-    syncTypes: true,
-  });
-});
diff --git a/packages/app/src/app/overmind/effects/vscode/extensionHostWorker/bootstrappers/generic-2.ts b/packages/app/src/app/overmind/effects/vscode/extensionHostWorker/bootstrappers/generic-2.ts
deleted file mode 100644
index 9552df2d6a9..00000000000
--- a/packages/app/src/app/overmind/effects/vscode/extensionHostWorker/bootstrappers/generic-2.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import * as childProcess from 'node-services/lib/child_process';
-
-import { initializeAll } from '../common/global';
-
-childProcess.addDefaultForkHandler(false);
-
-initializeAll().then(() => {
-  // Use require so that it only starts executing the chunk with all globals specified.
-  // eslint-disable-next-line
-  require('../workers/generic-worker').start({
-    syncSandbox: true,
-    syncTypes: false,
-  });
-});
diff --git a/packages/app/src/app/overmind/effects/vscode/extensionHostWorker/bootstrappers/svelte-worker.ts b/packages/app/src/app/overmind/effects/vscode/extensionHostWorker/bootstrappers/svelte-worker.ts
deleted file mode 100644
index 226f4f06aff..00000000000
--- a/packages/app/src/app/overmind/effects/vscode/extensionHostWorker/bootstrappers/svelte-worker.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import * as childProcess from 'node-services/lib/child_process';
-
-// @ts-ignore
-import SubWorkLoader from 'worker-loader?publicPath=/&name=sub-dynamic-worker.[hash:8].worker.js!./generic-2';
-
-import { EXTENSIONS_LOCATION } from '../../constants';
-
-import { initializeAll } from '../common/global';
-
-declare const __DEV__: boolean;
-
-childProcess.addDefaultForkHandler(SubWorkLoader);
-
-initializeAll().then(async () => {
-  // Use require so that it only starts executing the chunk with all globals specified.
-  // eslint-disable-next-line
-  require('../workers/generic-worker').start({
-    syncSandbox: true,
-    syncTypes: true,
-    extraMounts: {
-      '/extensions': {
-        fs: 'BundledHTTPRequest',
-        options: {
-          index: EXTENSIONS_LOCATION + '/extensions/index.json',
-          baseUrl: EXTENSIONS_LOCATION + '/extensions',
-          bundle: EXTENSIONS_LOCATION + '/bundles/svelte.0.7.1.min.json',
-          logReads: __DEV__,
-        },
-      },
-    },
-  });
-});
diff --git a/packages/app/src/app/overmind/effects/vscode/extensionHostWorker/bootstrappers/ts-extension.ts b/packages/app/src/app/overmind/effects/vscode/extensionHostWorker/bootstrappers/ts-extension.ts
deleted file mode 100644
index 10575155d4f..00000000000
--- a/packages/app/src/app/overmind/effects/vscode/extensionHostWorker/bootstrappers/ts-extension.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import * as childProcess from 'node-services/lib/child_process';
-// @ts-ignore
-import SubWorkLoader from 'worker-loader?publicPath=/&name=sub-dynamic-worker.[hash:8].worker.js!./generic-2';
-import { initializeAll } from '../common/global';
-import { EXTENSIONS_LOCATION } from '../../constants';
-
-declare const __DEV__: boolean;
-childProcess.addDefaultForkHandler(SubWorkLoader);
-
-initializeAll().then(() => {
-  // Use require so that it only starts executing the chunk with all globals specified.
-  // eslint-disable-next-line
-  require('../workers/generic-worker').start({
-    syncSandbox: true,
-    syncTypes: true,
-    extraMounts: {
-      '/extensions': {
-        fs: 'BundledHTTPRequest',
-        options: {
-          index: EXTENSIONS_LOCATION + '/extensions/index.json',
-          baseUrl: EXTENSIONS_LOCATION + '/extensions',
-          bundle: EXTENSIONS_LOCATION + '/bundles/ts.min.json',
-          logReads: __DEV__,
-        },
-      },
-    },
-  });
-});
diff --git a/packages/app/src/app/overmind/effects/vscode/extensionHostWorker/bootstrappers/vue-worker.ts b/packages/app/src/app/overmind/effects/vscode/extensionHostWorker/bootstrappers/vue-worker.ts
deleted file mode 100644
index a753cf32253..00000000000
--- a/packages/app/src/app/overmind/effects/vscode/extensionHostWorker/bootstrappers/vue-worker.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import * as childProcess from 'node-services/lib/child_process';
-
-// @ts-ignore
-import SubWorkLoader from 'worker-loader?publicPath=/&name=sub-dynamic-worker.[hash:8].worker.js!./generic-2';
-
-import { EXTENSIONS_LOCATION } from '../../constants';
-
-import { initializeAll } from '../common/global';
-
-declare const __DEV__: boolean;
-
-childProcess.addDefaultForkHandler(SubWorkLoader);
-
-initializeAll().then(async () => {
-  // Use require so that it only starts executing the chunk with all globals specified.
-  // eslint-disable-next-line
-  require('../workers/generic-worker').start({
-    syncSandbox: true,
-    syncTypes: true,
-    extraMounts: {
-      '/extensions': {
-        fs: 'BundledHTTPRequest',
-        options: {
-          index: EXTENSIONS_LOCATION + '/extensions/index.json',
-          baseUrl: EXTENSIONS_LOCATION + '/extensions',
-          bundle: EXTENSIONS_LOCATION + '/bundles/vetur.0.28.0.min.json',
-          logReads: __DEV__,
-        },
-      },
-    },
-  });
-});
diff --git a/packages/app/src/app/overmind/effects/vscode/extensionHostWorker/common/fs.ts b/packages/app/src/app/overmind/effects/vscode/extensionHostWorker/common/fs.ts
deleted file mode 100644
index 7aca22cf93a..00000000000
--- a/packages/app/src/app/overmind/effects/vscode/extensionHostWorker/common/fs.ts
+++ /dev/null
@@ -1,241 +0,0 @@
-import {
-  commonPostMessage,
-  getGlobal,
-} from '@codesandbox/common/lib/utils/global';
-import * as uuid from 'uuid';
-
-import { FileSystemConfiguration } from '../../../../../../../../../standalone-packages/codesandbox-browserfs';
-import { IModule } from '../../../../../../../../../standalone-packages/codesandbox-browserfs/dist/node/backend/CodeSandboxFS';
-import { EXTENSIONS_LOCATION } from '../../constants';
-import {
-  appendFile,
-  mkdir,
-  rename,
-  rmdir,
-  unlink,
-  writeFile,
-} from '../../SandboxFsSync/utils';
-
-const global = getGlobal();
-
-export const BROWSER_FS_CONFIG: FileSystemConfiguration = {
-  fs: 'MountableFileSystem',
-  options: {
-    '/': { fs: 'InMemory', options: {} },
-    '/tmp': { fs: 'InMemory', options: {} },
-    '/sandbox': {
-      fs: 'InMemory',
-    },
-    '/vscode': {
-      fs: 'InMemory',
-      options: {},
-    },
-    '/extensions': {
-      fs: 'BundledHTTPRequest',
-      options: {
-        index: EXTENSIONS_LOCATION + '/extensions/index.json',
-        baseUrl: EXTENSIONS_LOCATION + '/extensions',
-        logReads: process.env.NODE_ENV === 'development',
-      },
-    },
-    // '/vscode': {
-    //   fs: 'AsyncMirror',
-    //   options: {
-    //     sync: {
-    //       fs: 'InMemory',
-    //     },
-    //     async: {
-    //       fs: 'IndexedDB',
-    //       options: {
-    //         storeName: 'VSCode',
-    //       },
-    //     },
-    //   },
-    // },
-  },
-};
-
-export async function initializeBrowserFS({
-  syncSandbox = false,
-  syncTypes = false,
-  extraMounts = {},
-} = {}) {
-  let isInitialSync = true;
-  let types: {
-    [path: string]: {
-      module: IModule;
-    };
-  } = {};
-
-  return new Promise<void>(resolve => {
-    const config = { ...BROWSER_FS_CONFIG };
-    let currentSandboxFs = {};
-
-    let fsId = uuid.v4();
-
-    if (syncSandbox) {
-      if (syncTypes) {
-        config.options['/sandbox/node_modules'] = {
-          fs: 'CodeSandboxFS',
-          options: {
-            manager: {
-              getTranspiledModules: () => types,
-              addModule(module: IModule) {},
-              removeModule(module: IModule) {},
-              moveModule(module: IModule, newPath) {},
-              updateModule(module: IModule) {},
-            },
-          },
-        };
-
-        config.options['/extensions/node_modules/typescript'] = {
-          fs: 'JSDelivrRequest',
-          options: {
-            dependency: 'typescript',
-            version: '5.2.2',
-          },
-        };
-      }
-
-      config.options['/sandbox'] = {
-        fs: 'CodeSandboxEditorFS',
-        options: {
-          api: {
-            getSandboxFs: () => currentSandboxFs,
-            getJwt: () => '',
-          },
-        },
-      };
-    }
-
-    config.options = { ...config.options, ...extraMounts };
-
-    function touchFileSystem() {
-      // This forces the file watchers to emit, which causes typescript to reload
-      global.BrowserFS.BFSRequire('fs').rename(
-        '/sandbox/node_modules',
-        '/sandbox/node_modules',
-        () => {}
-      );
-    }
-
-    global.BrowserFS.configure(config, e => {
-      if (e) {
-        console.error(e);
-        return;
-      }
-
-      if (syncSandbox) {
-        // Resolve after 3s, if it doesn't resolve, vscode won't be able to resolve the ext host
-        // and it won't try to reconnect.
-        const timeout = setTimeout(() => {
-          resolve();
-        }, 3000);
-
-        const callResolve = () => {
-          clearTimeout(timeout);
-          resolve();
-        };
-
-        self.addEventListener('message', evt => {
-          // Some messages are specific to this worker
-          if (!evt.data.$fs_ids || !evt.data.$fs_ids.includes(fsId)) {
-            return;
-          }
-
-          switch (evt.data.$type) {
-            case 'reset': {
-              isInitialSync = true;
-              fsId = uuid.v4();
-              types = {};
-              currentSandboxFs = {};
-              commonPostMessage({
-                $broadcast: true,
-                $type: 'sync-sandbox',
-                $fs_id: fsId,
-                $data: {},
-              });
-              break;
-            }
-            case 'types-sync': {
-              types = evt.data.$data;
-              touchFileSystem();
-              if (isInitialSync) {
-                isInitialSync = false;
-                callResolve();
-              }
-              break;
-            }
-            case 'package-types-sync': {
-              Object.assign(types, evt.data.$data);
-              touchFileSystem();
-              break;
-            }
-            case 'types-remove': {
-              const deps = evt.data.$data;
-
-              Object.keys(deps).forEach(depKey => {
-                delete types[depKey];
-              });
-              touchFileSystem();
-              break;
-            }
-            case 'sandbox-fs': {
-              currentSandboxFs = evt.data.$data;
-              if (isInitialSync) {
-                commonPostMessage({
-                  $broadcast: true,
-                  $type: 'sync-types',
-                  $fs_id: fsId,
-                  $data: {},
-                });
-              } else {
-                callResolve();
-              }
-              break;
-            }
-            case 'append-file': {
-              const module = evt.data.$data;
-              appendFile(currentSandboxFs, module);
-              break;
-            }
-            case 'write-file': {
-              const module = evt.data.$data;
-              writeFile(currentSandboxFs, module);
-              break;
-            }
-            case 'rename': {
-              const { fromPath, toPath } = evt.data.$data;
-              rename(currentSandboxFs, fromPath, toPath);
-              break;
-            }
-            case 'rmdir': {
-              const directory = evt.data.$data;
-              rmdir(currentSandboxFs, directory);
-              break;
-            }
-            case 'unlink': {
-              const module = evt.data.$data;
-              unlink(currentSandboxFs, module);
-              break;
-            }
-            case 'mkdir': {
-              const directory = evt.data.$data;
-              mkdir(currentSandboxFs, directory);
-              break;
-            }
-          }
-        });
-
-        commonPostMessage({
-          $broadcast: true,
-          $type: 'sync-sandbox',
-          $fs_id: fsId,
-          $data: {},
-        });
-      } else {
-        resolve();
-      }
-    });
-  });
-}
diff --git a/packages/app/src/app/overmind/effects/vscode/extensionHostWorker/common/global.ts b/packages/app/src/app/overmind/effects/vscode/extensionHostWorker/common/global.ts
deleted file mode 100644
index a5e7019bd09..00000000000
--- a/packages/app/src/app/overmind/effects/vscode/extensionHostWorker/common/global.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-/* eslint-disable global-require */
-import { EventEmitter } from 'events';
-
-import requirePolyfills from '@codesandbox/common/lib/load-dynamic-polyfills';
-
-const ctx: any = self as any;
-declare const __DEV__: boolean;
-
-if (typeof Worker === 'undefined') {
-  ctx.importScripts('https://unpkg.com/subworkers@1.0.1/subworkers.js');
-}
-
-export const initializePolyfills = () => {
-  return requirePolyfills();
-};
-
-export const loadBrowserFS = () => {
-  ctx.importScripts(
-    `${process.env.CODESANDBOX_HOST}/static/browserfs12/browserfs.min.js`
-  );
-};
-
-export const initializeGlobals = () => {
-  // We need to initialize some node environment stubs
-  ctx.process = ctx.BrowserFS.BFSRequire('process');
-  ctx.process.platform = 'linux';
-  ctx.process.stdin = new EventEmitter();
-  ctx.process.env.NODE_ENV = __DEV__ ? 'development' : 'production';
-  ctx.Buffer = ctx.BrowserFS.BFSRequire('buffer').Buffer;
-  ctx.setTimeout = setTimeout.bind(ctx);
-  ctx.clearTimeout = clearTimeout.bind(ctx);
-  ctx.setImmediate = (func, delay) => setTimeout(func, delay);
-  ctx.clearImmediate = id => ctx.clearTimeout(id);
-};
-
-export function initializeAll() {
-  // eslint-disable-next-line no-async-promise-executor
-  return new Promise<void>(async resolve => {
-    await initializePolyfills();
-    loadBrowserFS();
-    initializeGlobals();
-
-    resolve();
-  });
-}
diff --git a/packages/app/src/app/overmind/effects/vscode/extensionHostWorker/services/WebsocketLSP.ts b/packages/app/src/app/overmind/effects/vscode/extensionHostWorker/services/WebsocketLSP.ts
deleted file mode 100644
index 7bf7d5e066a..00000000000
--- a/packages/app/src/app/overmind/effects/vscode/extensionHostWorker/services/WebsocketLSP.ts
+++ /dev/null
@@ -1,105 +0,0 @@
-import { commonPostMessage } from '@codesandbox/common/lib/utils/global';
-import {
-  IForkHandler,
-  IForkHandlerCallback,
-} from 'node-services/lib/child_process';
-import io from 'socket.io-client';
-
-// We want to make sure that our pids are consistent.
-// By counting pids based on endpoint we should consistently
-// pass the correct pid number related to the language server,
-// though it does require VSCode to always fire up the language
-// servers in the same order. The pid count decreases as
-// the WebsocketLSP is disposed
-const pidCountByEndpoint: {
-  [endpoint: string]: number;
-} = {};
-
-export class WebsocketLSP implements IForkHandler {
-  io: typeof io.Socket;
-  listeners = new Set<IForkHandlerCallback>();
-
-  messagesQueue: any[] = [];
-  endpoint: string;
-
-  constructor() {
-    const instance = this;
-    self.addEventListener('message', function listener(message) {
-      if (message.data.$type === 'respond_lsp_endpoint') {
-        self.removeEventListener('message', listener);
-        instance.connect(message.data.$data);
-      }
-    });
-    commonPostMessage({
-      $type: 'request_lsp_endpoint',
-    });
-  }
-
-  private connect(endpoint: string) {
-    if (!(endpoint in pidCountByEndpoint)) {
-      pidCountByEndpoint[endpoint] = 0;
-    }
-
-    this.endpoint = endpoint;
-    this.io = io(
-      endpoint + `?type=language-server&pid=${pidCountByEndpoint[endpoint]++}`
-    );
-    this.io.on('connect', () => {
-      this.messagesQueue.forEach(message => {
-        this.postMessage(message);
-      });
-    });
-    this.io.on('connect_error', error => {
-      // eslint-disable-next-line
-      console.log('WEBSOCKET_LSP - ERROR', error);
-    });
-    this.io.on('disconnect', reason => {
-      console.error('WEBSOCKET_LSP - CLOSE', reason);
-    });
-
-    this.io.on('language-server', data => {
-      /*
-        const json = event.data.split('\n').find(line => line[0] === '{');
-        console.log('OUT', JSON.stringify(JSON.parse(json), null, 2));
-        */
-      this.listeners.forEach(listener => {
-        listener({
-          data: {
-            $data: `Content-Length: ${data.length + 1}\r\n\r\n${data}\n`,
-            $type: 'stdout',
-          },
-        });
-      });
-    });
-  }
-
-  postMessage(message) {
-    if (message.$type === 'input-write') {
-      if (this.io.connected && message.$data) {
-        /*
-        console.log('IN', JSON.stringify(JSON.parse(message.$data), null, 2));
-        */
-        this.io.emit('language-server', message.$data);
-      } else if (message.$data) {
-        this.messagesQueue.push(message);
-      }
-    }
-  }
-
-  // Since setting up the connection is ASYNC, we rather create a list
-  // of listeners. They all use "message" event anyways
-  addEventListener(_: string, callback: IForkHandlerCallback) {
-    this.listeners.add(callback);
-  }
-
-  removeEventListener(_: string, callback: IForkHandlerCallback) {
-    this.listeners.delete(callback);
-  }
-
-  terminate() {
-    // eslint-disable-next-line
-    console.log('WEBSOCKET_LSP - TERMINATE');
-    pidCountByEndpoint[this.endpoint]--;
-    this.io.close();
-  }
-}
diff --git a/packages/app/src/app/overmind/effects/vscode/extensionHostWorker/services/searchService.ts b/packages/app/src/app/overmind/effects/vscode/extensionHostWorker/services/searchService.ts
deleted file mode 100644
index c854ae412e3..00000000000
--- a/packages/app/src/app/overmind/effects/vscode/extensionHostWorker/services/searchService.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import {
-  initializeGlobals,
-  initializePolyfills,
-  loadBrowserFS,
-} from '../common/global';
-import { initializeBrowserFS } from '../common/fs';
-
-initializePolyfills();
-loadBrowserFS();
-initializeGlobals();
-
-async function initialize() {
-  await initializeBrowserFS({ syncSandbox: true, syncTypes: true });
-
-  self.addEventListener('message', e => {
-    if (e.data.$type === 'input-write') {
-      const { $type, $data } = e.data.$data;
-      if ($type === 'file-search') {
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const { query } = $data;
-      }
-    }
-  });
-}
-
-initialize();
diff --git a/packages/app/src/app/overmind/effects/vscode/extensionHostWorker/workers/ext-host-worker.ts b/packages/app/src/app/overmind/effects/vscode/extensionHostWorker/workers/ext-host-worker.ts
deleted file mode 100644
index bee971bec9a..00000000000
--- a/packages/app/src/app/overmind/effects/vscode/extensionHostWorker/workers/ext-host-worker.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-// This is the base worker that launches the extension host
-
-import _debug from '@codesandbox/common/lib/utils/debug';
-import { commonPostMessage } from '@codesandbox/common/lib/utils/global';
-
-import { EXTENSIONS_LOCATION } from '../../constants';
-import loader from '../../vscode-script-loader';
-import { initializeBrowserFS } from '../common/fs';
-
-const debug = _debug('cs:cp-worker');
-
-debug('Starting Extension Host Worker');
-
-declare const __DEV__: boolean;
-
-const ctx: any = self;
-
-self.addEventListener('message', async e => {
-  const { data } = e;
-
-  if (data.$type === 'worker-manager') {
-    if (data.$event === 'init') {
-      debug('Initializing BrowserFS');
-      await initializeBrowserFS({
-        syncSandbox: true,
-        syncTypes: true,
-        extraMounts: {
-          '/extensions': {
-            fs: 'BundledHTTPRequest',
-            options: {
-              index: EXTENSIONS_LOCATION + '/extensions/index.json',
-              baseUrl: EXTENSIONS_LOCATION + '/extensions',
-              bundle: EXTENSIONS_LOCATION + '/bundles/ext-host.min.json',
-              logReads: __DEV__,
-            },
-          },
-        },
-      });
-      debug('Initialized BrowserFS', data.data.env);
-
-      const process = ctx.BrowserFS.BFSRequire('process');
-      process.cwd = () => data.data.cwd || '/sandbox';
-      process.env = data.data.env || {};
-      process.env.HOME = '/home';
-
-      loader(true)(() => {
-        ctx.require(
-          ['vs/workbench/services/extensions/node/extensionHostProcess'],
-          () => {
-            commonPostMessage({
-              $type: 'worker-client',
-              $event: 'initialized',
-            });
-          }
-        );
-      });
-    }
-  }
-});
-
-commonPostMessage({ $type: 'ready' });
diff --git a/packages/app/src/app/overmind/effects/vscode/extensionHostWorker/workers/generic-worker.ts b/packages/app/src/app/overmind/effects/vscode/extensionHostWorker/workers/generic-worker.ts
deleted file mode 100644
index ba7bfc0526d..00000000000
--- a/packages/app/src/app/overmind/effects/vscode/extensionHostWorker/workers/generic-worker.ts
+++ /dev/null
@@ -1,139 +0,0 @@
-// This is the default worker that will be called if no worker is specified.
-// It's function is to execute the code of the path that's given to it.
-
-import { basename } from 'path';
-
-import _debug from '@codesandbox/common/lib/utils/debug';
-import { commonPostMessage } from '@codesandbox/common/lib/utils/global';
-import { default as Module } from 'node-services/lib/module';
-import resolve from 'resolve';
-
-import { initializeBrowserFS } from '../common/fs';
-
-export function start({
-  syncSandbox = true,
-  syncTypes = true,
-  extraMounts = {},
-} = {}) {
-  const DEBUG_NAME = `cs:cp-bootstrap-worker`;
-  let debug = _debug(DEBUG_NAME);
-
-  debug('Starting Worker');
-
-  const ctx = self as any;
-
-  const pendingMessages: any[] = [];
-  let initialized = false;
-
-  const { log } = console;
-
-  function processMessage(data) {
-    const process = ctx.BrowserFS.BFSRequire('process');
-    const { $data, $type } = data;
-
-    if (!data.$broadcast) {
-      debug('message', data);
-    }
-
-    if ($type === 'message') {
-      process.emit('message', JSON.parse($data), undefined);
-    } else if ($data && $data.$type) {
-      process.stdin.emit('data', $data.$data);
-    } else if ($type === 'input-write') {
-      process.stdin.emit('data', $data);
-    }
-  }
-
-  const initializeProcess = (process, data) => {
-    process.send = (message, _a, _b, callback) => {
-      const m = {
-        $type: 'message',
-        $data: JSON.stringify(message),
-      };
-
-      debug('process.send', m);
-
-      commonPostMessage(m);
-
-      if (typeof _a === 'function') {
-        _a(null);
-      } else if (typeof _b === 'function') {
-        _b(null);
-      } else if (typeof callback === 'function') {
-        callback(null);
-      }
-    };
-
-    process.stdout = {
-      write: (message, callback) => {
-        const m = {
-          $type: 'stdout',
-          $data: message,
-        };
-
-        debug('process.stdout.write', m);
-
-        commonPostMessage(m);
-
-        if (callback) {
-          callback(null, null);
-        }
-      },
-    };
-
-    process.env = data.data.env || {};
-    process.env.HOME = '/home';
-    process.cwd = () => data.data.cwd || '/sandbox';
-    process.argv = ['node', data.data.entry, ...data.data.argv] || [];
-  };
-
-  self.addEventListener('message', async e => {
-    const { data } = e;
-
-    if (data.$type === 'worker-manager') {
-      if (data.$event === 'init') {
-        debug = _debug(`${DEBUG_NAME}:${basename(data.data.entry)}`);
-        debug('Initializing BrowserFS');
-        await initializeBrowserFS({ syncSandbox, syncTypes, extraMounts });
-        debug('Initialized BrowserFS', data);
-
-        const process = ctx.BrowserFS.BFSRequire('process');
-        initializeProcess(process, data);
-
-        if (data.data.entry) {
-          const resolvedPath = resolve.sync(data.data.entry, {
-            basedir: '/',
-          });
-
-          try {
-            debug('Loading module...', resolvedPath);
-            const module = new Module(resolvedPath);
-            module.load(resolvedPath);
-
-            initialized = true;
-
-            // Sometimes the module overwrites console.log for the VSCode output channel, we don't want this with
-            // debugging
-            // eslint-disable-next-line
-            console.log = log;
-
-            debug(
-              'Loaded module, now evaluating remaining messages',
-              pendingMessages
-            );
-
-            pendingMessages.forEach(processMessage);
-          } catch (error) {
-            console.error(error);
-          }
-        }
-      }
-    } else if (!initialized) {
-      pendingMessages.push(data);
-    } else {
-      processMessage(data);
-    }
-  });
-}
-
-commonPostMessage({ $type: 'ready' });
diff --git a/packages/app/src/app/overmind/effects/vscode/index.ts b/packages/app/src/app/overmind/effects/vscode/index.ts
deleted file mode 100644
index 02fc4db57a6..00000000000
--- a/packages/app/src/app/overmind/effects/vscode/index.ts
+++ /dev/null
@@ -1,1443 +0,0 @@
-import DEFAULT_PRETTIER_CONFIG from '@codesandbox/common/lib/prettify-default-config';
-import { resolveModule } from '@codesandbox/common/lib/sandbox/modules';
-import { IReaction, json } from 'overmind';
-import getTemplate from '@codesandbox/common/lib/templates';
-import {
-  CurrentUser,
-  EditorSelection,
-  Module,
-  ModuleCorrection,
-  ModuleError,
-  Sandbox,
-  SandboxFs,
-  Settings,
-  UserViewRange,
-} from '@codesandbox/common/lib/types';
-import { notificationState } from '@codesandbox/common/lib/utils/notifications';
-import { hasPermission } from '@codesandbox/common/lib/utils/permission';
-import {
-  NotificationMessage,
-  NotificationStatus,
-} from '@codesandbox/notifications/lib/state';
-import { CodeReferenceMetadata } from 'app/graphql/types';
-import { Context } from 'app/overmind';
-import { indexToLineAndColumn } from 'app/overmind/utils/common';
-import prettify from 'app/src/app/utils/prettify';
-import { blocker } from 'app/utils/blocker';
-import { listen } from 'codesandbox-api';
-import { debounce } from 'lodash-es';
-import * as childProcess from 'node-services/lib/child_process';
-import { TextOperation } from 'ot';
-
-import FontFaceObserver from 'fontfaceobserver';
-import io from 'socket.io-client';
-
-import { EXTENSIONS_LOCATION, VIM_EXTENSION_ID } from './constants';
-import {
-  initializeCodeSandboxTheme,
-  initializeCustomTheme,
-  initializeExtensionsFolder,
-  initializeSettings,
-  initializeSnippetDirectory,
-  initializeThemeCache,
-} from './initializers';
-import { Linter } from './Linter';
-import {
-  ModelsHandler,
-  OnFileChangeData,
-  OnOperationAppliedData,
-  onSelectionChangeData,
-} from './ModelsHandler';
-import SandboxFsSync from './SandboxFsSync';
-import { getSelection } from './utils';
-import loadScript from './vscode-script-loader';
-import { Workbench } from './Workbench';
-import { composeMenuAppTree, MenuAppItems } from './composeMenuAppTree';
-
-export type VsCodeOptions = {
-  getCurrentSandbox: () => Sandbox | null;
-  getCurrentModule: () => Module | null;
-  getSandboxFs: () => SandboxFs;
-  getCurrentUser: () => CurrentUser | null;
-  onCodeChange: (data: OnFileChangeData) => void;
-  onOperationApplied: (data: OnOperationAppliedData) => void;
-  onSelectionChanged: (selection: onSelectionChangeData) => void;
-  onViewRangeChanged: (viewRange: UserViewRange) => void;
-  onCommentClick: (payload: {
-    commentIds: string[];
-    bounds: {
-      left: number;
-      top: number;
-      bottom: number;
-      right: number;
-    };
-  }) => void;
-  reaction: IReaction<Context>;
-  // These two should be removed
-  getSignal: any;
-  getState: any;
-};
-
-declare global {
-  interface Window {
-    CSEditor: any;
-    monaco: any;
-  }
-}
-
-/**
- * Responsible for rendering React components for files that are supported
- */
-export interface ICustomEditorApi {
-  getCustomEditor(
-    modulePath: string
-  ): false | ((container: HTMLElement, extraProps: object) => void) | null;
-}
-
-const context: any = window;
-
-/**
- * Handles the VSCode instance for the whole app. The goal is to deprecate/remove this service at one point
- * and let the VSCode codebase handle the initialization of all elements. We are going for a gradual approach though,
- * that's why in the first phase we let the CodeSandbox application handle all the initialization of the VSCode
- * parts.
- */
-export class VSCodeEffect {
-  public initialized: Promise<unknown>;
-  public sandboxFsSync: SandboxFsSync;
-  private mountableFilesystem: any;
-
-  private monaco: any;
-  private editorApi: any;
-  private clientExtensionHost: any;
-  private containerExtensionHost: any;
-  private options: VsCodeOptions;
-  private controller: any;
-  private commandService = blocker<any>();
-  private extensionService = blocker<any>();
-  private extensionEnablementService = blocker<any>();
-  private workbench: Workbench;
-  private settings: Settings;
-  private linter: Linter | null;
-  private modelsHandler: ModelsHandler;
-  private modelSelectionListener: { dispose: Function };
-  private modelCursorPositionListener: { dispose: Function };
-  private modelViewRangeListener: { dispose: Function };
-  private readOnly: boolean;
-  private elements = {
-    editor: document.createElement('div'),
-    editorPart: document.createElement('div'),
-    statusbar: document.createElement('div'),
-  };
-
-  private menuAppItems: MenuAppItems = [];
-
-  private customEditorApi: ICustomEditorApi = {
-    getCustomEditor: () => null,
-  };
-
-  onSelectionChangeDebounced: VsCodeOptions['onSelectionChanged'] & {
-    cancel(): void;
-  };
-
-  /**
-   * Look up the preferred (last defined) keybinding for a command.
-   * @returns {ResolvedKeybinding} The preferred keybinding or null if the command is not bound.
-   */
-  public lookupKeybinding: (
-    commandId: string
-  ) => { getLabel(): string | null } | null;
-
-  /**
-   * Extract `contextMatchesRules` method from ContextKeyService
-   * to match rules and conditionals in the editor
-   */
-  public contextMatchesRules: (rules: any | undefined) => boolean;
-
-  public initialize(options: VsCodeOptions) {
-    this.options = options;
-    this.controller = {
-      getState: options.getState,
-      getSignal: options.getSignal,
-    };
-    this.onSelectionChangeDebounced = debounce(options.onSelectionChanged, 200);
-
-    this.prepareElements();
-
-    this.options.reaction(
-      state => ({
-        fileComments: json(state.comments.fileComments),
-        currentCommentId: state.comments.currentCommentId,
-      }),
-      ({ fileComments, currentCommentId }) => {
-        if (this.modelsHandler) {
-          this.modelsHandler.applyComments(fileComments, currentCommentId);
-        }
-      }
-    );
-    this.listenToCommentClick();
-
-    // We instantly create a sandbox sync, as we want our
-    // extension host to get its messages handled to initialize
-    // correctly
-    this.sandboxFsSync = new SandboxFsSync({
-      getSandboxFs: () => ({}),
-      getCurrentSandbox: () => null,
-    });
-
-    import(
-      // @ts-ignore
-      'worker-loader?publicPath=/&name=client-ext-host-worker.[hash:8].worker.js!./extensionHostWorker/bootstrappers/client-ext-host'
-    ).then(ExtHostWorkerLoader => {
-      this.clientExtensionHost = ExtHostWorkerLoader.default;
-    });
-
-    import(
-      // @ts-ignore
-      'worker-loader?publicPath=/&name=container-ext-host-worker.[hash:8].worker.js!./extensionHostWorker/bootstrappers/container-ext-host'
-    ).then(ExtHostWorkerLoader => {
-      this.containerExtensionHost = ExtHostWorkerLoader.default;
-    });
-
-    this.initialized = this.initializeFileSystem().then(mfs => {
-      this.mountableFilesystem = mfs;
-      // We want to initialize before VSCode, but after browserFS is configured
-      // For first-timers initialize a theme in the cache so it doesn't jump colors
-      initializeExtensionsFolder();
-      initializeCodeSandboxTheme();
-      initializeCustomTheme();
-      initializeThemeCache();
-      initializeSettings();
-      initializeSnippetDirectory();
-
-      this.setVimExtensionEnabled(
-        localStorage.getItem('settings.vimmode') === 'true'
-      );
-
-      return new FontFaceObserver('MonoLisa').load();
-    });
-
-    // Only set the read only state when the editor is initialized.
-    this.initialized.then(() => {
-      // ReadOnly mode is derivative, it's based on a couple conditions. The most important
-      // one is the `restricted` flag. The second most important one is live.
-      // If you're in a classroom live session as spectator, you should not be allowed to edit.
-
-      options.reaction(
-        state => {
-          const restricted = state.editor.currentSandbox?.restricted;
-
-          if (restricted) {
-            // Returns canEdit, false always
-            return false;
-          }
-
-          const hasGitInfo = Boolean(state.editor.currentSandbox?.git);
-          const isNotLive = !state.live.isLive;
-          const isOpenRoom = state.live.roomInfo?.mode === 'open';
-          const isClassroomAndCurrentEditor =
-            state.live.roomInfo?.mode === 'classroom' &&
-            state.live.isCurrentEditor;
-
-          const canEdit =
-            hasGitInfo ||
-            isNotLive ||
-            isOpenRoom ||
-            isClassroomAndCurrentEditor;
-
-          return canEdit;
-        },
-        canEdit => {
-          this.setReadOnly(!canEdit);
-        }
-      );
-    });
-
-    return this.initialized;
-  }
-
-  public isModuleOpened(module: Module) {
-    return this.modelsHandler.isModuleOpened(module);
-  }
-
-  public async getCodeReferenceBoundary(
-    commentId: string,
-    reference: CodeReferenceMetadata
-  ) {
-    this.revealPositionInCenterIfOutsideViewport(reference.anchor, 1);
-
-    return new Promise<DOMRect>((resolve, reject) => {
-      let checkCount = 0;
-      function findActiveComment() {
-        checkCount++;
-
-        if (checkCount === 20) {
-          reject(new Error('Could not find the comment glyph'));
-          return;
-        }
-
-        setTimeout(() => {
-          const commentGlyphs = document.querySelectorAll(
-            '.editor-comments-glyph'
-          );
-          const el = Array.from(commentGlyphs).find(glyphEl =>
-            glyphEl.className.includes(commentId)
-          );
-
-          if (el) {
-            resolve(el.getBoundingClientRect());
-          } else {
-            findActiveComment();
-          }
-        }, 10);
-      }
-      findActiveComment();
-    });
-  }
-
-  public getEditorElement(
-    getCustomEditor: ICustomEditorApi['getCustomEditor']
-  ) {
-    this.customEditorApi.getCustomEditor = getCustomEditor;
-    return this.elements.editor;
-  }
-
-  public getMenuAppItems(): MenuAppItems {
-    return this.menuAppItems;
-  }
-
-  public getStatusbarElement() {
-    return this.elements.statusbar;
-  }
-
-  public runCommand = async (id: string, ...args: any[]) => {
-    const commandService = await this.commandService.promise;
-
-    return commandService.executeCommand(id, ...args);
-  };
-
-  public callCallbackError(id: string, message?: string) {
-    // @ts-ignore
-    if (window.cbs && window.cbs[id]) {
-      const errorMessage =
-        message || 'Something went wrong while saving the file.';
-      // @ts-ignore
-      window.cbs[id](new Error(errorMessage), undefined);
-      // @ts-ignore
-      delete window.cbs[id];
-    }
-  }
-
-  public callCallback(id: string) {
-    // @ts-ignore
-    if (window.cbs && window.cbs[id]) {
-      // @ts-ignore
-      window.cbs[id](undefined, undefined);
-      // @ts-ignore
-      delete window.cbs[id];
-    }
-  }
-
-  public setVimExtensionEnabled(enabled: boolean) {
-    if (enabled) {
-      this.enableExtension(VIM_EXTENSION_ID);
-    } else {
-      // Auto disable vim extension
-      if (
-        ([null, undefined] as Array<null | undefined | string>).includes(
-          localStorage.getItem('vs-global://extensionsIdentifiers/disabled')
-        )
-      ) {
-        localStorage.setItem(
-          'vs-global://extensionsIdentifiers/disabled',
-          '[{"id":"vscodevim.vim"}]'
-        );
-      }
-
-      this.disableExtension(VIM_EXTENSION_ID);
-    }
-  }
-
-  public syncModule(module: Module) {
-    this.modelsHandler.syncModule(module);
-  }
-
-  public async applyOperation(moduleShortid: string, operation: TextOperation) {
-    if (!this.modelsHandler) {
-      return;
-    }
-
-    await this.modelsHandler.applyOperation(moduleShortid, operation);
-  }
-
-  public updateOptions(options: { readOnly: boolean }) {
-    if (this.editorApi) {
-      const editor = this.editorApi.getActiveCodeEditor();
-
-      if (editor) {
-        editor.updateOptions(options);
-      }
-    }
-  }
-
-  public clearUserSelections(userId: string) {
-    if (!this.modelsHandler) {
-      return;
-    }
-
-    this.modelsHandler.clearUserSelections(userId);
-  }
-
-  public updateUserSelections(
-    module: Module,
-    userSelections: EditorSelection[]
-  ) {
-    if (!this.modelsHandler) {
-      return;
-    }
-
-    this.modelsHandler.updateUserSelections(module, userSelections);
-  }
-
-  public setReadOnly(enabled: boolean) {
-    this.readOnly = enabled;
-    this.updateOptions({ readOnly: enabled });
-  }
-
-  public updateLayout = (width: number, height: number) => {
-    if (this.editorApi) {
-      this.editorApi.editorPart.layout(width, height);
-    }
-  };
-
-  public resetLayout() {
-    if (this.editorApi) {
-      // We have to wait for the layout to actually update in the DOM
-      requestAnimationFrame(() => {
-        const rootEl = document.querySelector('#vscode-container');
-        if (rootEl) {
-          const boundingRect = rootEl.getBoundingClientRect();
-
-          this.editorApi.editorPart.layout(
-            boundingRect.width,
-            boundingRect.height
-          );
-        }
-      });
-    }
-  }
-
-  /*
-    We need to use a callback to set the sandbox-fs into the state of Overmind. The reason
-    is that we internally read from this state to get information about the files. It is really
-    messy, but we will move to a completely internal filesystem soon
-  */
-  public async changeSandbox(sandbox: Sandbox, setFs: (fs: SandboxFs) => void) {
-    await this.initialized;
-
-    const isFirstLoad = !this.modelsHandler;
-
-    const { isServer } = getTemplate(sandbox.template);
-
-    try {
-      this.mountableFilesystem.umount('/root/.cache');
-    } catch {
-      //
-    }
-    try {
-      this.mountableFilesystem.umount('/sandbox/node_modules');
-    } catch {
-      //
-    }
-    try {
-      // After navigation, this mount is already mounted and throws error,
-      // which cause that Phonenix is not reconnected, so the file's content cannot be seen
-      // https://github.com/codesandbox/codesandbox-client/issues/4143
-      this.mountableFilesystem.umount('/home/sandbox/.cache');
-    } catch {
-      //
-    }
-
-    if (isServer && this.options.getCurrentUser()?.experiments.containerLsp) {
-      childProcess.addDefaultForkHandler(this.createContainerForkHandler());
-      const socket = this.createWebsocketFSRequest();
-      const cache = await this.createFileSystem('WebsocketFS', {
-        socket,
-      });
-      const nodeModules = await this.createFileSystem('WebsocketFS', {
-        socket,
-      });
-
-      this.mountableFilesystem.mount('/home/sandbox/.cache', cache);
-      this.mountableFilesystem.mount('/sandbox/node_modules', nodeModules);
-    } else {
-      childProcess.addDefaultForkHandler(this.clientExtensionHost);
-      const nodeModules = await this.createFileSystem('CodeSandboxFS', {
-        manager: {
-          getTranspiledModules: () => this.sandboxFsSync.getTypes(),
-          addModule() {},
-          removeModule() {},
-          moveModule() {},
-          updateModule() {},
-        },
-      });
-      this.mountableFilesystem.mount('/sandbox/node_modules', nodeModules);
-    }
-
-    if (isFirstLoad) {
-      const container = this.elements.editor;
-
-      await new Promise<void>(resolve => {
-        loadScript(true, ['vs/editor/codesandbox.editor.main'])(resolve);
-      }).then(() => this.loadEditor(window.monaco, container));
-    }
-
-    if (!isFirstLoad) {
-      this.modelsHandler.dispose();
-      this.sandboxFsSync.dispose();
-    }
-
-    this.modelsHandler = new ModelsHandler(
-      this.editorApi,
-      this.monaco,
-      sandbox,
-      this.onFileChange,
-      this.onOperationApplied
-    );
-    this.sandboxFsSync = new SandboxFsSync(this.options);
-
-    setFs(this.sandboxFsSync.create(sandbox));
-
-    if (isFirstLoad) {
-      this.sandboxFsSync.sync(() => {
-        // Once we have synced the fs, reload the TS project, as some new dependencies might have been added
-        this.runCommand('typescript.reloadProjects');
-      });
-    } else {
-      this.editorApi.extensionService.stopExtensionHost();
-      this.sandboxFsSync.sync(() => {
-        this.editorApi.extensionService.startExtensionHost();
-      });
-    }
-  }
-
-  public setModuleCode(module: Module, triggerChangeEvent = false) {
-    if (!this.modelsHandler) {
-      return;
-    }
-
-    this.modelsHandler.setModuleCode(module, triggerChangeEvent);
-  }
-
-  public async closeAllTabs() {
-    if (this.editorApi) {
-      const groupsToClose = this.editorApi.editorService.editorGroupService.getGroups();
-
-      await Promise.all(
-        groupsToClose.map(group =>
-          Promise.all([
-            group.closeAllEditors(),
-            this.editorApi.editorService.editorGroupService.removeGroup(group),
-          ])
-        )
-      );
-    }
-  }
-
-  public async updateTabsPath(oldPath: string, newPath: string) {
-    return this.modelsHandler.updateTabsPath(oldPath, newPath);
-  }
-
-  public async openModule(module: Module) {
-    await this.initialized;
-
-    // We use an animation frame here, because we want the rest of the logic to finish running,
-    // allowing for a paint, like selections in explorer. For this to work we have to ensure
-    // that we are actually indeed still trying to open this file, as we might have changed
-    // the file
-    return new Promise<void>(resolve => {
-      requestAnimationFrame(async () => {
-        const currentModule = this.options.getCurrentModule();
-        if (currentModule && module.id === currentModule.id) {
-          try {
-            const model = await this.modelsHandler.changeModule(module);
-            this.lint(module.title, model);
-            resolve();
-          } catch (error) {
-            // We might try to open a module that is not actually opened in the editor,
-            // but the configuration wizard.. currently this throws an error as there
-            // is really no good way to identify when it happen. This needs to be
-            // improved in next version
-          }
-        }
-      });
-    });
-  }
-
-  public setErrors = (errors: ModuleError[]) => {
-    const activeEditor = this.editorApi.getActiveCodeEditor();
-
-    if (activeEditor) {
-      if (errors.length > 0) {
-        const currentPath = this.getCurrentModelPath();
-        const thisModuleErrors = errors.filter(
-          error => error.path === currentPath
-        );
-        const errorMarkers = thisModuleErrors
-          .map(error => {
-            if (error) {
-              return {
-                severity: this.monaco.MarkerSeverity.Error,
-                startColumn: 1,
-                startLineNumber: error.line,
-                endColumn: error.column,
-                endLineNumber: error.line + 1,
-                message: error.message,
-              };
-            }
-
-            return null;
-          })
-          .filter(x => x);
-
-        // use raf to make sure that when we spam the editor, we don't clog the ui thread
-        requestAnimationFrame(() => {
-          this.monaco.editor.setModelMarkers(
-            activeEditor.getModel(),
-            'error',
-            errorMarkers
-          );
-        });
-      } else {
-        // use raf to make sure that when we spam the editor, we don't clog the ui thread
-        requestAnimationFrame(() => {
-          this.monaco.editor.setModelMarkers(
-            activeEditor.getModel(),
-            'error',
-            []
-          );
-        });
-      }
-    }
-  };
-
-  public async openDiff(sandboxId: string, module: Module, oldCode: string) {
-    if (!module.path) {
-      return;
-    }
-
-    const recoverPath = `/recover/${sandboxId}/recover-${module.path.replace(
-      /\//g,
-      ' '
-    )}`;
-    const filePath = `/sandbox${module.path}`;
-    const fileSystem = window.BrowserFS.BFSRequire('fs');
-
-    // We have to write a recover file to the filesystem, we save it behind
-    // the sandboxId
-    if (!fileSystem.existsSync(`/recover/${sandboxId}`)) {
-      fileSystem.mkdirSync(`/recover/${sandboxId}`);
-    }
-    // We write the recover file with the old code, as the new code is already applied
-    fileSystem.writeFileSync(recoverPath, oldCode);
-
-    // We open a conflict resolution editor for the files
-    this.editorApi.editorService.openEditor({
-      leftResource: this.monaco.Uri.from({
-        scheme: 'conflictResolution',
-        path: recoverPath,
-      }),
-      rightResource: this.monaco.Uri.file(filePath),
-      label: `Recover - ${module.path}`,
-      options: {
-        pinned: true,
-      },
-    });
-  }
-
-  public clearComments() {
-    this.modelsHandler.clearComments();
-  }
-
-  public setCorrections = (corrections: ModuleCorrection[]) => {
-    const activeEditor = this.editorApi.getActiveCodeEditor();
-    if (activeEditor) {
-      if (corrections.length > 0) {
-        const currentPath = this.getCurrentModelPath();
-        const correctionMarkers = corrections
-          .filter(correction => correction.path === currentPath)
-          .map(correction => {
-            if (correction) {
-              return {
-                severity:
-                  correction.severity === 'warning'
-                    ? this.monaco.MarkerSeverity.Warning
-                    : this.monaco.MarkerSeverity.Notice,
-                startColumn: correction.column,
-                startLineNumber: correction.line,
-                endColumn: correction.columnEnd || 1,
-                endLineNumber: correction.lineEnd || correction.line + 1,
-                message: correction.message,
-                source: correction.source,
-              };
-            }
-
-            return null;
-          })
-          .filter(x => x);
-
-        this.monaco.editor.setModelMarkers(
-          activeEditor.getModel(),
-          'correction',
-          correctionMarkers
-        );
-      } else {
-        this.monaco.editor.setModelMarkers(
-          activeEditor.getModel(),
-          'correction',
-          []
-        );
-      }
-    }
-  };
-
-  /**
-   * Reveal position in editor
-   * @param scrollType 0 = smooth, 1 = immediate
-   */
-  revealPositionInCenterIfOutsideViewport(pos: number, scrollType: 0 | 1 = 0) {
-    const activeEditor = this.editorApi.getActiveCodeEditor();
-
-    if (activeEditor) {
-      const model = activeEditor.getModel();
-
-      if (model) {
-        const lineColumnPos = indexToLineAndColumn(
-          model.getLinesContent() || [],
-          pos
-        );
-
-        activeEditor.revealPositionInCenterIfOutsideViewport(
-          lineColumnPos,
-          scrollType
-        );
-      }
-    }
-  }
-
-  /**
-   * Reveal line in editor
-   * @param scrollType 0 = smooth, 1 = immediate
-   */
-  revealLine(lineNumber: number, scrollType: 0 | 1 = 0) {
-    const activeEditor = this.editorApi.getActiveCodeEditor();
-
-    if (activeEditor) {
-      activeEditor.revealLine(lineNumber, scrollType);
-    }
-  }
-
-  /**
-   * Reveal revealLine in editor
-   * @param scrollType 0 = smooth, 1 = immediate
-   */
-  revealRange(range: UserViewRange, scrollType: 0 | 1 = 0) {
-    const activeEditor = this.editorApi.getActiveCodeEditor();
-
-    if (activeEditor) {
-      activeEditor.revealRange(range, scrollType);
-    }
-  }
-
-  /**
-   * Set the selection inside the editor
-   * @param head Start of the selection
-   * @param anchor End of the selection
-   */
-  setSelection(head: number, anchor: number) {
-    const activeEditor = this.editorApi.getActiveCodeEditor();
-    if (!activeEditor) {
-      return;
-    }
-
-    const model = activeEditor.getModel();
-    if (!model) {
-      return;
-    }
-
-    const headPos = indexToLineAndColumn(model.getLinesContent() || [], head);
-    const anchorPos = indexToLineAndColumn(
-      model.getLinesContent() || [],
-      anchor
-    );
-    const range = new this.monaco.Range(
-      headPos.lineNumber,
-      headPos.column,
-      anchorPos.lineNumber,
-      anchorPos.column
-    );
-
-    this.revealRange(range);
-    activeEditor.setSelection(range);
-  }
-
-  // Communicates the endpoint for the WebsocketLSP
-  private createContainerForkHandler() {
-    return () => {
-      const host = this.containerExtensionHost();
-      host.addEventListener('message', event => {
-        if (event.data.$type === 'request_lsp_endpoint') {
-          event.target.postMessage({
-            $type: 'respond_lsp_endpoint',
-            $data: this.getLspEndpoint(),
-          });
-        }
-      });
-      return host;
-    };
-  }
-
-  private getLspEndpoint() {
-    // return 'ws://localhost:1023';
-    // TODO: merge host logic with executor-manager
-    const sseHost = process.env.ENDPOINT || 'https://codesandbox.io';
-    return sseHost.replace(
-      'https://',
-      `wss://${this.options.getCurrentSandbox()?.id}-lsp.sse.`
-    );
-  }
-
-  private createFileSystem(type: string, options: any) {
-    return new Promise((resolve, reject) => {
-      window.BrowserFS.FileSystem[type].Create(options, (error, fs) => {
-        if (error) {
-          reject(error);
-        } else {
-          resolve(fs);
-        }
-      });
-    });
-  }
-
-  private createWebsocketFSRequest() {
-    const socket = io(`${this.getLspEndpoint()}?type=go-to-definition`);
-    return {
-      emit: (data, cb) => {
-        socket.emit('go-to-definition', data, cb);
-      },
-      dispose: () => {
-        socket.close();
-      },
-    };
-  }
-
-  private async disableExtension(id: string) {
-    const extensionService = await this.extensionService.promise;
-    const extensionEnablementService = await this.extensionEnablementService
-      .promise;
-
-    const extensionDescription = await extensionService.getExtension(id);
-
-    if (extensionDescription) {
-      const { toExtension } = context.require(
-        'vs/workbench/services/extensions/common/extensions'
-      );
-      const extension = toExtension(extensionDescription);
-      extensionEnablementService.setEnablement([extension], 0);
-    }
-  }
-
-  private async initializeFileSystem() {
-    const fileSystems = await Promise.all([
-      this.createFileSystem('InMemory', {}),
-      this.createFileSystem('CodeSandboxEditorFS', {
-        api: {
-          getSandboxFs: this.options.getSandboxFs,
-          getJwt: () => this.options.getState().jwt,
-        },
-      }),
-      this.createFileSystem('LocalStorage', {}),
-      this.createFileSystem('LocalStorage', {}),
-      Promise.resolve().then(() =>
-        Promise.all([
-          this.createFileSystem('InMemory', {}),
-          this.createFileSystem('BundledHTTPRequest', {
-            index: EXTENSIONS_LOCATION + '/extensions/index.json',
-            baseUrl: EXTENSIONS_LOCATION + '/extensions',
-            bundle: EXTENSIONS_LOCATION + '/bundles/main.min.json',
-            logReads: process.env.NODE_ENV === 'development',
-          }),
-        ]).then(([writableExtensions, readableExtensions]) =>
-          this.createFileSystem('OverlayFS', {
-            writable: writableExtensions,
-            readable: readableExtensions,
-          })
-        )
-      ),
-      this.createFileSystem('InMemory', {}),
-      this.createFileSystem('InMemory', {}),
-    ]);
-
-    const [
-      root,
-      sandbox,
-      vscode,
-      home,
-      extensions,
-      customTheme,
-      recover,
-    ] = fileSystems;
-
-    const mfs = (await this.createFileSystem('MountableFileSystem', {
-      '/': root,
-      '/sandbox': sandbox,
-      '/vscode': vscode,
-      '/home': home,
-      '/extensions': extensions,
-      '/extensions/custom-theme': customTheme,
-      '/recover': recover,
-    })) as any;
-
-    window.BrowserFS.initialize(mfs);
-
-    return mfs;
-  }
-
-  private initializeReactions() {
-    const { reaction } = this.options;
-
-    reaction(state => state.preferences.settings, this.changeSettings, {
-      nested: true,
-      immediate: true,
-    });
-  }
-
-  private async enableExtension(id: string) {
-    const extensionEnablementService = await this.extensionEnablementService
-      .promise;
-    const extensionIdentifier = (
-      await extensionEnablementService.getDisabledExtensions()
-    ).find(ext => ext.id === id);
-
-    if (extensionIdentifier) {
-      // Sadly we have to call a private api for this. Might change this once we have extension management
-      // built in.
-      extensionEnablementService._enableExtension(extensionIdentifier);
-    }
-  }
-
-  private async loadEditor(monaco: any, container: HTMLElement) {
-    this.monaco = monaco;
-    this.workbench = new Workbench(monaco, this.controller, this.runCommand);
-
-    if (localStorage.getItem('settings.vimmode') === 'true') {
-      this.enableExtension(VIM_EXTENSION_ID);
-    }
-
-    this.workbench.addWorkbenchActions();
-
-    const r = window.require;
-    const [
-      { IEditorService },
-      { ICodeEditorService },
-      { ITextFileService },
-      { ILifecycleService },
-      { IEditorGroupsService },
-      { IStatusbarService },
-      { IExtensionService },
-      { CodeSandboxService },
-      { CodeSandboxConfigurationUIService },
-      { ICodeSandboxEditorConnectorService },
-      { ICommandService },
-      { SyncDescriptor },
-      { IInstantiationService },
-      { IExtensionEnablementService },
-      { IContextViewService },
-      { MenuRegistry },
-      { IKeybindingService },
-      { IContextKeyService },
-    ] = [
-      r('vs/workbench/services/editor/common/editorService'),
-      r('vs/editor/browser/services/codeEditorService'),
-      r('vs/workbench/services/textfile/common/textfiles'),
-      r('vs/platform/lifecycle/common/lifecycle'),
-      r('vs/workbench/services/editor/common/editorGroupsService'),
-      r('vs/platform/statusbar/common/statusbar'),
-      r('vs/workbench/services/extensions/common/extensions'),
-      r('vs/codesandbox/services/codesandbox/browser/codesandboxService'),
-      r('vs/codesandbox/services/codesandbox/configurationUIService'),
-      r(
-        'vs/codesandbox/services/codesandbox/common/codesandboxEditorConnector'
-      ),
-      r('vs/platform/commands/common/commands'),
-      r('vs/platform/instantiation/common/descriptors'),
-      r('vs/platform/instantiation/common/instantiation'),
-      r('vs/platform/extensionManagement/common/extensionManagement'),
-      r('vs/platform/contextview/browser/contextView'),
-      r('vs/platform/actions/common/actions'),
-      r('vs/platform/keybinding/common/keybinding'),
-      r('vs/platform/contextkey/common/contextkey'),
-    ];
-
-    const { serviceCollection } = await new Promise<any>(resolve => {
-      monaco.editor.create(
-        container,
-        {
-          codesandboxService: i =>
-            new SyncDescriptor(CodeSandboxService, [this.controller, this]),
-          codesandboxConfigurationUIService: i =>
-            new SyncDescriptor(CodeSandboxConfigurationUIService, [
-              this.customEditorApi,
-            ]),
-        },
-        resolve
-      );
-    });
-
-    return new Promise<void>(resolve => {
-      // It has to run the accessor within the callback
-      serviceCollection.get(IInstantiationService).invokeFunction(accessor => {
-        // Initialize these services
-        accessor.get(CodeSandboxConfigurationUIService);
-        accessor.get(ICodeSandboxEditorConnectorService);
-
-        const statusbarPart = accessor.get(IStatusbarService);
-        const commandService = accessor.get(ICommandService);
-        const extensionService = accessor.get(IExtensionService);
-        const extensionEnablementService = accessor.get(
-          IExtensionEnablementService
-        );
-        const keybindingService = accessor.get(IKeybindingService);
-        const contextKeyService = accessor.get(IContextKeyService);
-
-        this.lookupKeybinding = id => keybindingService.lookupKeybinding(id);
-        this.contextMatchesRules = rules =>
-          contextKeyService.contextMatchesRules(rules);
-        this.commandService.resolve(commandService);
-        this.extensionService.resolve(extensionService);
-        this.extensionEnablementService.resolve(extensionEnablementService);
-
-        const editorPart = accessor.get(IEditorGroupsService);
-        const codeEditorService = accessor.get(ICodeEditorService);
-        const textFileService = accessor.get(ITextFileService);
-        const editorService = accessor.get(IEditorService);
-        const contextViewService = accessor.get(IContextViewService);
-
-        contextViewService.setContainer(container);
-
-        this.editorApi = {
-          openFile(path) {
-            return codeEditorService.openCodeEditor({
-              resource: monaco.Uri.file('/sandbox' + path),
-            });
-          },
-          getActiveCodeEditor() {
-            return codeEditorService.getActiveCodeEditor();
-          },
-          textFileService,
-          editorPart,
-          editorService,
-          codeEditorService,
-          extensionService,
-        };
-
-        window.CSEditor = {
-          editor: this.editorApi,
-          monaco,
-        };
-
-        statusbarPart.create(this.elements.statusbar);
-        editorPart.create(this.elements.editorPart);
-        editorPart.layout(container.offsetWidth, container.offsetHeight);
-
-        this.menuAppItems = composeMenuAppTree(id =>
-          MenuRegistry.getMenuItems(id)
-        );
-
-        editorPart.parent = container;
-
-        container.appendChild(this.elements.editorPart);
-
-        this.initializeReactions();
-
-        this.configureMonacoLanguages(monaco);
-
-        editorService.onDidActiveEditorChange(this.onActiveEditorChange);
-        this.initializeCodeSandboxAPIListener();
-
-        if (!this.linter && this.settings.lintEnabled) {
-          this.createLinter();
-        }
-
-        const lifecycleService = accessor.get(ILifecycleService);
-
-        // Trigger all VSCode lifecycle listeners
-        lifecycleService.phase = 2; // Restoring
-        requestAnimationFrame(() => {
-          lifecycleService.phase = 3; // Running
-        });
-
-        resolve();
-      });
-    });
-  }
-
-  private _cachedDependencies = {};
-  private _cachedDependenciesCode: string | undefined = undefined;
-  private getDependencies(sandbox: Sandbox): { [depName: string]: string } {
-    try {
-      const module = resolveModule(
-        '/package.json',
-        sandbox.modules,
-        sandbox.directories
-      );
-      if (this._cachedDependenciesCode !== module.code) {
-        this._cachedDependenciesCode = module.code;
-        const parsedPkg = JSON.parse(module.code);
-        this._cachedDependencies = {
-          ...(parsedPkg.dependencies || {}),
-          ...(parsedPkg.devDependencies || {}),
-        };
-      }
-    } catch (e) {
-      /* ignore */
-    }
-
-    return this._cachedDependencies;
-  }
-
-  private prepareElements() {
-    this.elements.editor.className = 'monaco-workbench';
-    this.elements.editor.style.width = '100%';
-    this.elements.editor.style.height = '100%';
-
-    this.elements.statusbar.className = 'part statusbar';
-    this.elements.statusbar.id = 'workbench.parts.statusbar';
-
-    this.elements.editorPart.id = 'vscode-editor';
-    this.elements.editorPart.className = 'part editor has-watermark';
-    this.elements.editorPart.style.width = '100%';
-    this.elements.editorPart.style.height = '100%';
-  }
-
-  private configureMonacoLanguages(monaco) {
-    [
-      'typescript',
-      'typescriptreact',
-      'javascript',
-      'javascriptreact',
-      'css',
-      'less',
-      'sass',
-      'graphql',
-      'html',
-      'markdown',
-      'json',
-    ].forEach(language => {
-      monaco.languages.registerDocumentFormattingEditProvider(language, {
-        provideDocumentFormattingEdits: this.provideDocumentFormattingEdits,
-      });
-    });
-  }
-
-  private provideDocumentFormattingEdits = (model, _, token) =>
-    prettify(
-      model.uri.fsPath,
-      () => model.getValue(),
-      this.getPrettierConfig(),
-      () => false,
-      token
-    ).then(newCode => [
-      {
-        range: model.getFullModelRange(),
-        text: newCode,
-      },
-    ]);
-
-  private changeSettings = (settings: Settings) => {
-    this.settings = settings;
-
-    if (!this.linter && this.settings.lintEnabled) {
-      this.createLinter();
-    } else if (this.linter && !this.settings.lintEnabled) {
-      this.linter = this.linter.dispose();
-    }
-  };
-
-  private createLinter() {
-    this.linter = new Linter(this.editorApi, this.monaco);
-  }
-
-  private getPrettierConfig = () => {
-    try {
-      const sandbox = this.options.getCurrentSandbox();
-      if (!sandbox) {
-        return null;
-      }
-      const module = resolveModule(
-        '/.prettierrc',
-        sandbox.modules,
-        sandbox.directories
-      );
-
-      return JSON.parse(module.code || '');
-    } catch (e) {
-      return this.settings.prettierConfig || DEFAULT_PRETTIER_CONFIG;
-    }
-  };
-
-  private onOperationApplied = (data: OnOperationAppliedData) => {
-    const currentModule = this.options.getCurrentModule();
-    if (currentModule && data.moduleShortid === currentModule.shortid) {
-      this.lint(data.title, data.model);
-    }
-
-    this.options.onOperationApplied(data);
-  };
-
-  private onFileChange = (data: OnFileChangeData) => {
-    this.lint(data.title, data.model);
-    this.options.onCodeChange(data);
-  };
-
-  private onActiveEditorChange = () => {
-    if (this.modelSelectionListener) {
-      this.modelSelectionListener.dispose();
-    }
-
-    if (this.modelCursorPositionListener) {
-      this.modelCursorPositionListener.dispose();
-    }
-
-    if (this.modelViewRangeListener) {
-      this.modelViewRangeListener.dispose();
-    }
-
-    const activeEditor = this.editorApi.getActiveCodeEditor();
-
-    if (activeEditor && activeEditor.getModel()) {
-      const modulePath = activeEditor.getModel().uri.path;
-      const currentModule = this.options.getCurrentModule();
-
-      activeEditor.updateOptions({
-        readOnly: this.readOnly || currentModule?.isBinary,
-      });
-
-      if (!modulePath.startsWith('/sandbox')) {
-        return;
-      }
-
-      const sandbox = this.options.getCurrentSandbox();
-      if (this.linter && sandbox) {
-        this.linter.lint(
-          activeEditor.getModel().getValue(),
-          modulePath,
-          activeEditor.getModel().getVersionId(),
-          sandbox.template,
-          this.getDependencies(sandbox)
-        );
-      }
-
-      if (
-        currentModule &&
-        modulePath === `/sandbox${currentModule.path}` &&
-        currentModule.code !== undefined &&
-        activeEditor.getValue() !== currentModule.code &&
-        !currentModule.isBinary
-      ) {
-        // This means that the file in Cerebral is dirty and has changed,
-        // VSCode only gets saved contents. In this case we manually set the value correctly.
-
-        this.modelsHandler.isApplyingOperation = true;
-        const model = activeEditor.getModel();
-        model.applyEdits([
-          {
-            text: currentModule.code,
-            range: model.getFullModelRange(),
-          },
-        ]);
-        this.modelsHandler.isApplyingOperation = false;
-      }
-
-      let lastViewRange = null;
-      const isDifferentViewRange = (r1: UserViewRange, r2: UserViewRange) =>
-        r1.startLineNumber !== r2.startLineNumber ||
-        r1.startColumn !== r2.startColumn ||
-        r1.endLineNumber !== r2.endLineNumber ||
-        r1.endColumn !== r2.endColumn;
-
-      this.modelViewRangeListener = activeEditor.onDidScrollChange(e => {
-        const [range] = activeEditor.getVisibleRanges();
-
-        if (
-          lastViewRange == null ||
-          (range && isDifferentViewRange(lastViewRange!, range))
-        ) {
-          lastViewRange = range;
-          this.options.onViewRangeChanged(range);
-        }
-      });
-
-      this.modelCursorPositionListener = activeEditor.onDidChangeCursorPosition(
-        cursor => {
-          if (
-            sandbox &&
-            sandbox.featureFlags.comments &&
-            hasPermission(sandbox.authorization, 'comment')
-          ) {
-            const model = activeEditor.getModel();
-
-            this.modelsHandler.updateLineCommentIndication(
-              model,
-              cursor.position.lineNumber
-            );
-          }
-        }
-      );
-
-      this.modelSelectionListener = activeEditor.onDidChangeCursorSelection(
-        selectionChange => {
-          const model = activeEditor.getModel();
-          const lines = model.getLinesContent() || [];
-          const data: onSelectionChangeData = {
-            primary: getSelection(lines, selectionChange.selection),
-            secondary: selectionChange.secondarySelections.map(s =>
-              getSelection(lines, s)
-            ),
-            source: selectionChange.source,
-          };
-
-          if (
-            selectionChange.reason === 3 ||
-            /* alt + shift + arrow keys */ selectionChange.source ===
-              'moveWordCommand' ||
-            /* click inside a selection */ selectionChange.source === 'api'
-          ) {
-            this.onSelectionChangeDebounced.cancel();
-            this.options.onSelectionChanged(data);
-          } else {
-            // This is just on typing, we send a debounced selection update as a
-            // safeguard to make sure we are in sync
-            this.onSelectionChangeDebounced(data);
-          }
-        }
-      );
-    }
-  };
-
-  private initializeCodeSandboxAPIListener() {
-    return listen(({ action, type, code, path, lineNumber, column }: any) => {
-      if (type === 'add-extra-lib') {
-        // TODO: bring this func back
-        // const dtsPath = `${path}.d.ts`;
-        // this.monaco.languages.typescript.typescriptDefaults._extraLibs[
-        //   `file:///${dtsPath}`
-        // ] = code;
-        // this.commitLibChanges();
-      } else if (action === 'editor.open-module') {
-        const options: {
-          selection?: { startLineNumber: number; startColumn: number };
-        } = {};
-
-        if (lineNumber || column) {
-          options.selection = {
-            startLineNumber: +lineNumber,
-            startColumn: +(column || 0),
-          };
-        }
-
-        this.editorApi.codeEditorService.openCodeEditor({
-          resource: this.monaco.Uri.file('/sandbox' + path),
-          options,
-        });
-      }
-    });
-  }
-
-  private lint(title: string, model: any) {
-    const sandbox = this.options.getCurrentSandbox();
-    if (!sandbox || !this.linter) {
-      return;
-    }
-
-    this.linter.lint(
-      model.getValue(),
-      title,
-      model.getVersionId(),
-      sandbox.template,
-      this.getDependencies(sandbox)
-    );
-  }
-
-  private getCurrentModelPath = () => {
-    const activeEditor = this.editorApi.getActiveCodeEditor();
-
-    if (!activeEditor) {
-      return undefined;
-    }
-    const model = activeEditor.getModel();
-    if (!model) {
-      return undefined;
-    }
-
-    return model.uri.path.replace(/^\/sandbox/, '');
-  };
-
-  // This is used by the CodesandboxService internally
-  private addNotification(
-    message: string,
-    type: 'error' | 'info' | 'warning' | 'success',
-    options: { actions: NotificationMessage['actions']; sticky?: boolean }
-  ) {
-    const getStatus = () => {
-      switch (type) {
-        case 'error':
-          return NotificationStatus.ERROR;
-        case 'warning':
-          return NotificationStatus.WARNING;
-        case 'success':
-          return NotificationStatus.SUCCESS;
-        default:
-          return NotificationStatus.NOTICE;
-      }
-    };
-
-    notificationState.addNotification({
-      message,
-      status: getStatus(),
-      sticky: options.sticky,
-      actions: options.actions,
-    });
-  }
-
-  private listenToCommentClick() {
-    window.addEventListener('click', event => {
-      const target = event.target as HTMLElement;
-      if (target.classList.contains('editor-comments-glyph')) {
-        /*
-          We grab the id of the commenthread by getting the last classname.
-          The last part of the classname is the id.
-        */
-        const lastClass = Array.from(target.classList).pop();
-
-        if (lastClass) {
-          const commentIds = lastClass.startsWith('editor-comments-ids-')
-            ? (lastClass.split('editor-comments-ids-').pop() || '').split('_')
-            : [];
-          const boundingRect = target.getBoundingClientRect();
-          this.options.onCommentClick({
-            commentIds,
-            bounds: {
-              left: boundingRect.left,
-              top: boundingRect.top,
-              right: boundingRect.right,
-              bottom: boundingRect.bottom,
-            },
-          });
-        }
-      }
-    });
-  }
-}
-
-export default new VSCodeEffect();
diff --git a/packages/app/src/app/overmind/effects/vscode/initializers.ts b/packages/app/src/app/overmind/effects/vscode/initializers.ts
deleted file mode 100644
index 0196d41ca5a..00000000000
--- a/packages/app/src/app/overmind/effects/vscode/initializers.ts
+++ /dev/null
@@ -1,229 +0,0 @@
-import JSON5 from 'json5';
-import codeSandboxTheme from '@codesandbox/common/lib/themes/codesandbox.json';
-import codeSandboxBlackTheme from '@codesandbox/common/lib/themes/codesandbox-black';
-import { notificationState } from '@codesandbox/common/lib/utils/notifications';
-import { NotificationStatus } from '@codesandbox/notifications';
-
-export function initializeThemeCache() {
-  try {
-    if (!localStorage.getItem('vs-global://colorThemeData')) {
-      import('./theme-cache').then(rawTheme => {
-        localStorage.setItem('vs-global://colorThemeData', rawTheme.default);
-      });
-    }
-  } catch (e) {
-    console.error(e);
-  }
-}
-
-export function initializeExtensionsFolder() {
-  // @ts-ignore
-  const fs = window.BrowserFS.BFSRequire('fs');
-
-  if (!fs.existsSync('/vscode/extensions')) {
-    fs.mkdirSync('/vscode/extensions');
-  }
-}
-
-export function initializeSettings() {
-  // @ts-ignore
-  const fs = window.BrowserFS.BFSRequire('fs');
-  if (!fs.existsSync('/vscode/settings.json')) {
-    fs.writeFileSync(
-      '/vscode/settings.json',
-      JSON.stringify(
-        {
-          'editor.formatOnSave': true,
-          'editor.fontSize': 15,
-          'editor.fontFamily':
-            "MonoLisa, Menlo, Monaco, 'Courier New', monospace",
-          'editor.tabSize': 2,
-          'editor.minimap.enabled': false,
-          'workbench.editor.openSideBySideDirection': 'down',
-          'svelte.plugin.typescript.diagnostics.enable': false,
-          'typescript.locale': 'en',
-          'relativeLineHeight.value': 1.6,
-        },
-        null,
-        2
-      )
-    );
-  }
-
-  try {
-    // We need to do this to prevent duplicate closing tags in live sessions.
-    // https://github.com/codesandbox/codesandbox-client/issues/3398
-    // I haven't found another way to fix this, as the TS extension literally listens
-    // for edits and checks whether an edit ends with '>'. Then it asks the LSP for the changes
-    // and applies them 100ms later. There is no check for cursor or anything else.
-    // This doesn't happen in VSCode Live Share itself, because there they share the LSP between
-    // multiple users. This way the request is not duplicated among multiple users.
-    const settings = JSON5.parse(
-      fs.readFileSync('/vscode/settings.json').toString()
-    );
-
-    let settingsChanged = false;
-    const changeIfNeeded = (field: string, value: unknown) => {
-      if (settings[field] !== value) {
-        settings[field] = value;
-        return true;
-      }
-      return settingsChanged || false;
-    };
-
-    if (
-      settings['editor.fontFamily'].startsWith('dm') ||
-      settings['editor.fontFamily'].startsWith("'dm'")
-    ) {
-      settingsChanged = changeIfNeeded(
-        'editor.fontFamily',
-        "MonoLisa, Menlo, Monaco, 'Courier New', monospace"
-      );
-    }
-
-    settingsChanged = changeIfNeeded('files.autoSave', 'off');
-    settingsChanged = changeIfNeeded('javascript.autoClosingTags', false);
-    settingsChanged = changeIfNeeded('typescript.autoClosingTags', false);
-    settingsChanged = changeIfNeeded('html.autoClosingTags', false);
-    settingsChanged = changeIfNeeded('typescript.locale', 'en');
-    settingsChanged = changeIfNeeded(
-      'typescript.tsserver.useSeparateSyntaxServer',
-      false
-    );
-
-    if (!settings['workbench.colorTheme']) {
-      // if you have not changed the theme ever,
-      // we set codesandbox black as the theme for you
-
-      settingsChanged = changeIfNeeded(
-        'workbench.colorTheme',
-        'CodeSandbox Black 2021'
-      );
-    }
-
-    if (settingsChanged) {
-      fs.writeFileSync(
-        '/vscode/settings.json',
-        JSON5.stringify(settings, { quote: '"', space: 2, replacer: null })
-      );
-    }
-  } catch (e) {
-    console.warn(e);
-  }
-}
-
-export function initializeCodeSandboxTheme() {
-  // @ts-ignore
-  const fs = window.BrowserFS.BFSRequire('fs');
-
-  fs.writeFileSync(
-    '/extensions/ngryman.codesandbox-theme-0.0.1/themes/CodeSandbox-color-theme.json',
-    JSON.stringify(codeSandboxTheme)
-  );
-
-  fs.writeFileSync(
-    '/extensions/codesandbox-black-0.0.1/themes/codesandbox-black.json',
-    JSON.stringify(codeSandboxBlackTheme)
-  );
-}
-
-export function installCustomTheme(id: string, name: string, theme: string) {
-  let uiTheme: string;
-  try {
-    uiTheme = JSON5.parse(theme).type;
-  } catch {
-    uiTheme = 'dark';
-  }
-
-  const packageJSON = {
-    name: id,
-    displayName: name,
-    description: 'The Custom VSCode Theme',
-    version: '0.4.1',
-    publisher: 'CodeSandbox',
-    license: 'SEE LICENSE IN LICENSE.md',
-    repository: {
-      type: 'git',
-      url: 'https://github.com/codesandbox/codesandbox-client',
-    },
-    keywords: [],
-    scripts: {
-      publish: 'vsce publish',
-    },
-    galleryBanner: {
-      color: '#061526',
-      theme: uiTheme,
-    },
-    engines: {
-      vscode: '^1.17.0',
-    },
-    categories: ['Themes'],
-    contributes: {
-      themes: [
-        {
-          label: name,
-          uiTheme: uiTheme === 'dark' ? 'vs-dark' : 'vs',
-          path: './themes/custom-color-theme.json',
-        },
-      ],
-    },
-  };
-
-  // @ts-ignore
-  const fs = window.BrowserFS.BFSRequire('fs');
-  const extName = `${id}-theme`;
-
-  const folder = `/extensions/${extName}`;
-  const folderExists = fs.existsSync(folder);
-  if (!folderExists) {
-    fs.mkdirSync(folder);
-  }
-  fs.writeFileSync(
-    `/extensions/${extName}/package.json`,
-    JSON.stringify(packageJSON)
-  );
-
-  fs.mkdirSync(`/extensions/${extName}/themes`);
-  fs.writeFileSync(
-    `/extensions/${extName}/themes/custom-color-theme.json`,
-    theme
-  );
-}
-
-/**
- * This auto installs an extension with a custom theme specified in preferences. People can select
- * it as "Custom Theme".
- */
-export function initializeCustomTheme() {
-  const customTheme = localStorage.getItem('settings.manualCustomVSCodeTheme');
-
-  if (customTheme) {
-    try {
-      installCustomTheme('custom', 'Custom Theme', JSON.parse(customTheme));
-    } catch (e) {
-      notificationState.addNotification({
-        title: 'Something went wrong while installing the custom extension',
-        message: e.message,
-        status: NotificationStatus.ERROR,
-        actions: {
-          primary: {
-            label: 'Clear Custom Theme',
-            run: () => {
-              localStorage.removeItem('settings.manualCustomVSCodeTheme');
-            },
-          },
-        },
-      });
-    }
-  }
-}
-
-export function initializeSnippetDirectory() {
-  const fs = window.BrowserFS.BFSRequire('fs');
-
-  const folder = `/vscode/snippets`;
-  const folderExists = fs.existsSync(folder);
-  if (!folderExists) {
-    fs.mkdirSync(folder);
-  }
-}
diff --git a/packages/app/src/app/overmind/effects/vscode/keyCodes.ts b/packages/app/src/app/overmind/effects/vscode/keyCodes.ts
deleted file mode 100644
index 8ee9a700c3e..00000000000
--- a/packages/app/src/app/overmind/effects/vscode/keyCodes.ts
+++ /dev/null
@@ -1,201 +0,0 @@
-// Copied from keyCodes.ts from vscode
-
-/**
- * Virtual Key Codes, the value does not hold any inherent meaning.
- * Inspired somewhat from https://msdn.microsoft.com/en-us/library/windows/desktop/dd375731(v=vs.85).aspx
- * But these are "more general", as they should work across browsers & OS`s.
- */
-export enum KeyCode {
-  /**
-   * Placed first to cover the 0 value of the enum.
-   */
-  Unknown = 0,
-
-  Backspace = 1,
-  Tab = 2,
-  Enter = 3,
-  Shift = 4,
-  Ctrl = 5,
-  Alt = 6,
-  PauseBreak = 7,
-  CapsLock = 8,
-  Escape = 9,
-  Space = 10,
-  PageUp = 11,
-  PageDown = 12,
-  End = 13,
-  Home = 14,
-  LeftArrow = 15,
-  UpArrow = 16,
-  RightArrow = 17,
-  DownArrow = 18,
-  Insert = 19,
-  Delete = 20,
-
-  KEY_0 = 21,
-  KEY_1 = 22,
-  KEY_2 = 23,
-  KEY_3 = 24,
-  KEY_4 = 25,
-  KEY_5 = 26,
-  KEY_6 = 27,
-  KEY_7 = 28,
-  KEY_8 = 29,
-  KEY_9 = 30,
-
-  KEY_A = 31,
-  KEY_B = 32,
-  KEY_C = 33,
-  KEY_D = 34,
-  KEY_E = 35,
-  KEY_F = 36,
-  KEY_G = 37,
-  KEY_H = 38,
-  KEY_I = 39,
-  KEY_J = 40,
-  KEY_K = 41,
-  KEY_L = 42,
-  KEY_M = 43,
-  KEY_N = 44,
-  KEY_O = 45,
-  KEY_P = 46,
-  KEY_Q = 47,
-  KEY_R = 48,
-  KEY_S = 49,
-  KEY_T = 50,
-  KEY_U = 51,
-  KEY_V = 52,
-  KEY_W = 53,
-  KEY_X = 54,
-  KEY_Y = 55,
-  KEY_Z = 56,
-
-  Meta = 57,
-  ContextMenu = 58,
-
-  F1 = 59,
-  F2 = 60,
-  F3 = 61,
-  F4 = 62,
-  F5 = 63,
-  F6 = 64,
-  F7 = 65,
-  F8 = 66,
-  F9 = 67,
-  F10 = 68,
-  F11 = 69,
-  F12 = 70,
-  F13 = 71,
-  F14 = 72,
-  F15 = 73,
-  F16 = 74,
-  F17 = 75,
-  F18 = 76,
-  F19 = 77,
-
-  NumLock = 78,
-  ScrollLock = 79,
-
-  /**
-   * Used for miscellaneous characters; it can vary by keyboard.
-   * For the US standard keyboard, the ';:' key
-   */
-  US_SEMICOLON = 80,
-  /**
-   * For any country/region, the '+' key
-   * For the US standard keyboard, the '=+' key
-   */
-  US_EQUAL = 81,
-  /**
-   * For any country/region, the ',' key
-   * For the US standard keyboard, the ',<' key
-   */
-  US_COMMA = 82,
-  /**
-   * For any country/region, the '-' key
-   * For the US standard keyboard, the '-_' key
-   */
-  US_MINUS = 83,
-  /**
-   * For any country/region, the '.' key
-   * For the US standard keyboard, the '.>' key
-   */
-  US_DOT = 84,
-  /**
-   * Used for miscellaneous characters; it can vary by keyboard.
-   * For the US standard keyboard, the '/?' key
-   */
-  US_SLASH = 85,
-  /**
-   * Used for miscellaneous characters; it can vary by keyboard.
-   * For the US standard keyboard, the '`~' key
-   */
-  US_BACKTICK = 86,
-  /**
-   * Used for miscellaneous characters; it can vary by keyboard.
-   * For the US standard keyboard, the '[{' key
-   */
-  US_OPEN_SQUARE_BRACKET = 87,
-  /**
-   * Used for miscellaneous characters; it can vary by keyboard.
-   * For the US standard keyboard, the '\|' key
-   */
-  US_BACKSLASH = 88,
-  /**
-   * Used for miscellaneous characters; it can vary by keyboard.
-   * For the US standard keyboard, the ']}' key
-   */
-  US_CLOSE_SQUARE_BRACKET = 89,
-  /**
-   * Used for miscellaneous characters; it can vary by keyboard.
-   * For the US standard keyboard, the ''"' key
-   */
-  US_QUOTE = 90,
-  /**
-   * Used for miscellaneous characters; it can vary by keyboard.
-   */
-  OEM_8 = 91,
-  /**
-   * Either the angle bracket key or the backslash key on the RT 102-key keyboard.
-   */
-  OEM_102 = 92,
-
-  NUMPAD_0 = 93, // VK_NUMPAD0, 0x60, Numeric keypad 0 key
-  NUMPAD_1 = 94, // VK_NUMPAD1, 0x61, Numeric keypad 1 key
-  NUMPAD_2 = 95, // VK_NUMPAD2, 0x62, Numeric keypad 2 key
-  NUMPAD_3 = 96, // VK_NUMPAD3, 0x63, Numeric keypad 3 key
-  NUMPAD_4 = 97, // VK_NUMPAD4, 0x64, Numeric keypad 4 key
-  NUMPAD_5 = 98, // VK_NUMPAD5, 0x65, Numeric keypad 5 key
-  NUMPAD_6 = 99, // VK_NUMPAD6, 0x66, Numeric keypad 6 key
-  NUMPAD_7 = 100, // VK_NUMPAD7, 0x67, Numeric keypad 7 key
-  NUMPAD_8 = 101, // VK_NUMPAD8, 0x68, Numeric keypad 8 key
-  NUMPAD_9 = 102, // VK_NUMPAD9, 0x69, Numeric keypad 9 key
-
-  NUMPAD_MULTIPLY = 103, // VK_MULTIPLY, 0x6A, Multiply key
-  NUMPAD_ADD = 104, // VK_ADD, 0x6B, Add key
-  NUMPAD_SEPARATOR = 105, // VK_SEPARATOR, 0x6C, Separator key
-  NUMPAD_SUBTRACT = 106, // VK_SUBTRACT, 0x6D, Subtract key
-  NUMPAD_DECIMAL = 107, // VK_DECIMAL, 0x6E, Decimal key
-  NUMPAD_DIVIDE = 108, // VK_DIVIDE, 0x6F,
-
-  /**
-   * Cover all key codes when IME is processing input.
-   */
-  KEY_IN_COMPOSITION = 109,
-
-  ABNT_C1 = 110, // Brazilian (ABNT) Keyboard
-  ABNT_C2 = 111, // Brazilian (ABNT) Keyboard
-
-  /**
-   * Placed last to cover the length of the enum.
-   * Please do not depend on this value!
-   */
-  MAX_VALUE,
-}
-
-export enum KeyMod {
-  CtrlCmd = (1 << 11) >>> 0,
-  Shift = (1 << 10) >>> 0,
-  Alt = (1 << 9) >>> 0,
-  WinCtrl = (1 << 8) >>> 0,
-}
diff --git a/packages/app/src/app/overmind/effects/vscode/theme-cache.ts b/packages/app/src/app/overmind/effects/vscode/theme-cache.ts
deleted file mode 100644
index 36c987c349a..00000000000
--- a/packages/app/src/app/overmind/effects/vscode/theme-cache.ts
+++ /dev/null
@@ -1 +0,0 @@
-export default `{"id":"vs-dark codesandbox-codesandbox-black-themes-codesandbox-black-json","label":"CodeSandbox Black","settingsId":"CodeSandbox Black","selector":"vs-dark.codesandbox-codesandbox-black-themes-codesandbox-black-json","themeTokenColors":[{"settings":{"foreground":"#ffffffff","background":"#151515ff"}},{"name":"Comment","scope":["comment"],"settings":{"foreground":"#5C6370","fontStyle":"italic"}},{"name":"Comment Markup Link","scope":["comment markup.link"],"settings":{"foreground":"#5C6370"}},{"name":"Entity Name Type","scope":["entity.name.type"],"settings":{"foreground":"#E5C07B"}},{"name":"Entity Other Inherited Class","scope":["entity.other.inherited-class"],"settings":{"foreground":"#98C379"}},{"name":"Keyword","scope":["keyword"],"settings":{"foreground":"#C678DD"}},{"name":"Keyword Control","scope":["keyword.control"],"settings":{"foreground":"#C678DD"}},{"name":"Keyword Operator","scope":["keyword.operator"],"settings":{"foreground":"#ABB2BF"}},{"name":"Keyword Other Special Method","scope":["keyword.other.special-method"],"settings":{"foreground":"#61AFEF"}},{"name":"Keyword Other Unit","scope":["keyword.other.unit"],"settings":{"foreground":"#D19A66"}},{"name":"Storage","scope":["storage"],"settings":{"foreground":"#C678DD"}},{"name":"Storage Type Annotation,storage Type Primitive","scope":["storage.type.annotation","storage.type.primitive"],"settings":{"foreground":"#C678DD"}},{"name":"Storage Modifier Package,storage Modifier Import","scope":["storage.modifier.package","storage.modifier.import"],"settings":{"foreground":"#ABB2BF"}},{"name":"Constant","scope":["constant"],"settings":{"foreground":"#D19A66"}},{"name":"Constant Variable","scope":["constant.variable"],"settings":{"foreground":"#D19A66"}},{"name":"Constant Character Escape","scope":["constant.character.escape"],"settings":{"foreground":"#56B6C2"}},{"name":"Constant Numeric","scope":["constant.numeric"],"settings":{"foreground":"#D19A66"}},{"name":"Constant Other Color","scope":["constant.other.color"],"settings":{"foreground":"#56B6C2"}},{"name":"Constant Other Symbol","scope":["constant.other.symbol"],"settings":{"foreground":"#56B6C2"}},{"name":"Variable","scope":["variable"],"settings":{"foreground":"#E06C75"}},{"name":"Variable Interpolation","scope":["variable.interpolation"],"settings":{"foreground":"#BE5046"}},{"name":"Variable Parameter","scope":["variable.parameter"],"settings":{"foreground":"#ABB2BF"}},{"name":"String","scope":["string"],"settings":{"foreground":"#98C379"}},{"name":"String Regexp","scope":["string.regexp"],"settings":{"foreground":"#56B6C2"}},{"name":"String Regexp Source Ruby Embedded","scope":["string.regexp source.ruby.embedded"],"settings":{"foreground":"#E5C07B"}},{"name":"String Other Link","scope":["string.other.link"],"settings":{"foreground":"#E06C75"}},{"name":"Punctuation Definition Comment","scope":["punctuation.definition.comment"],"settings":{"foreground":"#5C6370"}},{"name":"Punctuation Definition Method Parameters,punctuation Definition Function Parameters,punctuation Definition Parameters,punctuation Definition Separator,punctuation Definition Seperator,punctuation Definition Array","scope":["punctuation.definition.method-parameters","punctuation.definition.function-parameters","punctuation.definition.parameters","punctuation.definition.separator","punctuation.definition.seperator","punctuation.definition.array"],"settings":{"foreground":"#ABB2BF"}},{"name":"Punctuation Definition Heading,punctuation Definition Identity","scope":["punctuation.definition.heading","punctuation.definition.identity"],"settings":{"foreground":"#61AFEF"}},{"name":"Punctuation Definition Bold","scope":["punctuation.definition.bold"],"settings":{"foreground":"#E5C07B","fontStyle":"bold"}},{"name":"Punctuation Definition Italic","scope":["punctuation.definition.italic"],"settings":{"foreground":"#C678DD","fontStyle":"italic"}},{"name":"Punctuation Section Embedded","scope":["punctuation.section.embedded"],"settings":{"foreground":"#BE5046"}},{"name":"Punctuation Section Method,punctuation Section Class,punctuation Section Inner Class","scope":["punctuation.section.method","punctuation.section.class","punctuation.section.inner-class"],"settings":{"foreground":"#ABB2BF"}},{"name":"Support Class","scope":["support.class"],"settings":{"foreground":"#E5C07B"}},{"name":"Support Type","scope":["support.type"],"settings":{"foreground":"#56B6C2"}},{"name":"Support Function","scope":["support.function"],"settings":{"foreground":"#56B6C2"}},{"name":"Support Function Any Method","scope":["support.function.any-method"],"settings":{"foreground":"#61AFEF"}},{"name":"Entity Name Function","scope":["entity.name.function"],"settings":{"foreground":"#61AFEF"}},{"name":"Entity Name Class,entity Name Type Class","scope":["entity.name.class","entity.name.type.class"],"settings":{"foreground":"#E5C07B"}},{"name":"Entity Name Section","scope":["entity.name.section"],"settings":{"foreground":"#61AFEF"}},{"name":"Entity Name Tag","scope":["entity.name.tag"],"settings":{"foreground":"#E06C75"}},{"name":"Entity Other Attribute Name","scope":["entity.other.attribute-name"],"settings":{"foreground":"#D19A66"}},{"name":"Entity Other Attribute Name Id","scope":["entity.other.attribute-name.id"],"settings":{"foreground":"#61AFEF"}},{"name":"Meta Class","scope":["meta.class"],"settings":{"foreground":"#E5C07B"}},{"name":"Meta Class Body","scope":["meta.class.body"],"settings":{"foreground":"#ABB2BF"}},{"name":"Meta Method Call,meta Method","scope":["meta.method-call","meta.method"],"settings":{"foreground":"#ABB2BF"}},{"name":"Meta Definition Variable","scope":["meta.definition.variable"],"settings":{"foreground":"#E06C75"}},{"name":"Meta Link","scope":["meta.link"],"settings":{"foreground":"#D19A66"}},{"name":"Meta Require","scope":["meta.require"],"settings":{"foreground":"#61AFEF"}},{"name":"Meta Selector","scope":["meta.selector"],"settings":{"foreground":"#C678DD"}},{"name":"Meta Separator","scope":["meta.separator"],"settings":{"background":"#373B41","foreground":"#ABB2BF"}},{"name":"Meta Tag","scope":["meta.tag"],"settings":{"foreground":"#ABB2BF"}},{"name":"Underline","scope":["underline"],"settings":{"text-decoration":"underline"}},{"name":"None","scope":["none"],"settings":{"foreground":"#ABB2BF"}},{"name":"Invalid Deprecated","scope":["invalid.deprecated"],"settings":{"foreground":"#523D14","background":"#E0C285"}},{"name":"Invalid Illegal","scope":["invalid.illegal"],"settings":{"foreground":"white","background":"#E05252"}},{"name":"Markup Bold","scope":["markup.bold"],"settings":{"foreground":"#D19A66","fontStyle":"bold"}},{"name":"Markup Changed","scope":["markup.changed"],"settings":{"foreground":"#C678DD"}},{"name":"Markup Deleted","scope":["markup.deleted"],"settings":{"foreground":"#E06C75"}},{"name":"Markup Italic","scope":["markup.italic"],"settings":{"foreground":"#C678DD","fontStyle":"italic"}},{"name":"Markup Heading","scope":["markup.heading"],"settings":{"foreground":"#E06C75"}},{"name":"Markup Heading Punctuation Definition Heading","scope":["markup.heading punctuation.definition.heading"],"settings":{"foreground":"#61AFEF"}},{"name":"Markup Link","scope":["markup.link"],"settings":{"foreground":"#C678DD"}},{"name":"Markup Inserted","scope":["markup.inserted"],"settings":{"foreground":"#98C379"}},{"name":"Markup Quote","scope":["markup.quote"],"settings":{"foreground":"#D19A66"}},{"name":"Markup Raw","scope":["markup.raw"],"settings":{"foreground":"#98C379"}},{"name":"Source C Keyword Operator","scope":["source.c keyword.operator"],"settings":{"foreground":"#C678DD"}},{"name":"Source Cpp Keyword Operator","scope":["source.cpp keyword.operator"],"settings":{"foreground":"#C678DD"}},{"name":"Source Cs Keyword Operator","scope":["source.cs keyword.operator"],"settings":{"foreground":"#C678DD"}},{"name":"Source Css Property Name,source Css Property Value","scope":["source.css property-name","source.css property-value"],"settings":{"foreground":"#828997"}},{"name":"Source Css Property Name Support,source Css Property Value Support","scope":["source.css property-name.support","source.css property-value.support"],"settings":{"foreground":"#ABB2BF"}},{"name":"Source Gfm Markup","scope":["source.gfm markup"],"settings":{"-webkit-font-smoothing":"auto"}},{"name":"Source Gfm Link Entity","scope":["source.gfm link entity"],"settings":{"foreground":"#61AFEF"}},{"name":"Source Go Storage Type String","scope":["source.go storage.type.string"],"settings":{"foreground":"#C678DD"}},{"name":"Source Ini Keyword Other Definition Ini","scope":["source.ini keyword.other.definition.ini"],"settings":{"foreground":"#E06C75"}},{"name":"Source Java Storage Modifier Import","scope":["source.java storage.modifier.import"],"settings":{"foreground":"#E5C07B"}},{"name":"Source Java Storage Type","scope":["source.java storage.type"],"settings":{"foreground":"#E5C07B"}},{"name":"Source Java Keyword Operator Instanceof","scope":["source.java keyword.operator.instanceof"],"settings":{"foreground":"#C678DD"}},{"name":"Source Java Properties Meta Key Pair","scope":["source.java-properties meta.key-pair"],"settings":{"foreground":"#E06C75"}},{"name":"Source Java Properties Meta Key Pair > Punctuation","scope":["source.java-properties meta.key-pair > punctuation"],"settings":{"foreground":"#ABB2BF"}},{"name":"Source Js Keyword Operator","scope":["source.js keyword.operator"],"settings":{"foreground":"#56B6C2"}},{"name":"Source Js Keyword Operator Delete,source Js Keyword Operator In,source Js Keyword Operator Of,source Js Keyword Operator Instanceof,source Js Keyword Operator New,source Js Keyword Operator Typeof,source Js Keyword Operator Void","scope":["source.js keyword.operator.delete","source.js keyword.operator.in","source.js keyword.operator.of","source.js keyword.operator.instanceof","source.js keyword.operator.new","source.js keyword.operator.typeof","source.js keyword.operator.void"],"settings":{"foreground":"#C678DD"}},{"name":"Source Json Meta Structure Dictionary Json > String Quoted Json","scope":["source.json meta.structure.dictionary.json > string.quoted.json"],"settings":{"foreground":"#E06C75"}},{"name":"Source Json Meta Structure Dictionary Json > String Quoted Json > Punctuation String","scope":["source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string"],"settings":{"foreground":"#E06C75"}},{"name":"Source Json Meta Structure Dictionary Json > Value Json > String Quoted Json,source Json Meta Structure Array Json > Value Json > String Quoted Json,source Json Meta Structure Dictionary Json > Value Json > String Quoted Json > Punctuation,source Json Meta Structure Array Json > Value Json > String Quoted Json > Punctuation","scope":["source.json meta.structure.dictionary.json > value.json > string.quoted.json","source.json meta.structure.array.json > value.json > string.quoted.json","source.json meta.structure.dictionary.json > value.json > string.quoted.json > punctuation","source.json meta.structure.array.json > value.json > string.quoted.json > punctuation"],"settings":{"foreground":"#98C379"}},{"name":"Source Json Meta Structure Dictionary Json > Constant Language Json,source Json Meta Structure Array Json > Constant Language Json","scope":["source.json meta.structure.dictionary.json > constant.language.json","source.json meta.structure.array.json > constant.language.json"],"settings":{"foreground":"#56B6C2"}},{"name":"Source Ruby Constant Other Symbol > Punctuation","scope":["source.ruby constant.other.symbol > punctuation"],"settings":{"foreground":"inherit"}},{"name":"Source Python Keyword Operator Logical Python","scope":["source.python keyword.operator.logical.python"],"settings":{"foreground":"#C678DD"}},{"name":"Source Python Variable Parameter","scope":["source.python variable.parameter"],"settings":{"foreground":"#D19A66"}},{"name":"Meta Attribute Rust","scope":["meta.attribute.rust"],"settings":{"foreground":"#BCC199"}},{"name":"Storage Modifier Lifetime Rust,entity Name Lifetime Rust","scope":["storage.modifier.lifetime.rust","entity.name.lifetime.rust"],"settings":{"foreground":"#33E8EC"}},{"name":"Keyword Unsafe Rust","scope":["keyword.unsafe.rust"],"settings":{"foreground":"#CC6B73"}},{"name":"customrule","scope":"customrule","settings":{"foreground":"#ABB2BF"}},{"name":"[VSCODE-CUSTOM] Support Type Property Name","scope":"support.type.property-name","settings":{"foreground":"#ABB2BF"}},{"name":"[VSCODE-CUSTOM] Punctuation for Quoted String","scope":"string.quoted.double punctuation","settings":{"foreground":"#98C379"}},{"name":"[VSCODE-CUSTOM] Support Constant","scope":"support.constant","settings":{"foreground":"#D19A66"}},{"name":"[VSCODE-CUSTOM] JSON Property Name","scope":"support.type.property-name.json","settings":{"foreground":"#E06C75"}},{"name":"[VSCODE-CUSTOM] JSON Punctuation for Property Name","scope":"support.type.property-name.json punctuation","settings":{"foreground":"#E06C75"}},{"name":"[VSCODE-CUSTOM] JS/TS Punctuation for key-value","scope":["punctuation.separator.key-value.ts","punctuation.separator.key-value.js","punctuation.separator.key-value.tsx"],"settings":{"foreground":"#56B6C2"}},{"name":"[VSCODE-CUSTOM] JS/TS Embedded Operator","scope":["source.js.embedded.html keyword.operator","source.ts.embedded.html keyword.operator"],"settings":{"foreground":"#56B6C2"}},{"name":"[VSCODE-CUSTOM] JS/TS Variable Other Readwrite","scope":["variable.other.readwrite.js","variable.other.readwrite.ts","variable.other.readwrite.tsx"],"settings":{"foreground":"#ABB2BF"}},{"name":"[VSCODE-CUSTOM] JS/TS Support Variable Dom","scope":["support.variable.dom.js","support.variable.dom.ts"],"settings":{"foreground":"#E06C75"}},{"name":"[VSCODE-CUSTOM] JS/TS Support Variable Property Dom","scope":["support.variable.property.dom.js","support.variable.property.dom.ts"],"settings":{"foreground":"#E06C75"}},{"name":"[VSCODE-CUSTOM] JS/TS Interpolation String Punctuation","scope":["meta.template.expression.js punctuation.definition","meta.template.expression.ts punctuation.definition"],"settings":{"foreground":"#BE5046"}},{"name":"[VSCODE-CUSTOM] JS/TS Punctuation Type Parameters","scope":["source.ts punctuation.definition.typeparameters","source.js punctuation.definition.typeparameters","source.tsx punctuation.definition.typeparameters"],"settings":{"foreground":"#ABB2BF"}},{"name":"[VSCODE-CUSTOM] JS/TS Definition Block","scope":["source.ts punctuation.definition.block","source.js punctuation.definition.block","source.tsx punctuation.definition.block"],"settings":{"foreground":"#ABB2BF"}},{"name":"[VSCODE-CUSTOM] JS/TS Punctuation Separator Comma","scope":["source.ts punctuation.separator.comma","source.js punctuation.separator.comma","source.tsx punctuation.separator.comma"],"settings":{"foreground":"#ABB2BF"}},{"name":"[VSCODE-CUSTOM] JS/TS Variable Property","scope":["support.variable.property.js","support.variable.property.ts","support.variable.property.tsx"],"settings":{"foreground":"#E06C75"}},{"name":"[VSCODE-CUSTOM] JS/TS Default Keyword","scope":["keyword.control.default.js","keyword.control.default.ts","keyword.control.default.tsx"],"settings":{"foreground":"#E06C75"}},{"name":"[VSCODE-CUSTOM] JS/TS Instanceof Keyword","scope":["keyword.operator.expression.instanceof.js","keyword.operator.expression.instanceof.ts","keyword.operator.expression.instanceof.tsx"],"settings":{"foreground":"#C678DD"}},{"name":"[VSCODE-CUSTOM] JS/TS Of Keyword","scope":["keyword.operator.expression.of.js","keyword.operator.expression.of.ts","keyword.operator.expression.of.tsx"],"settings":{"foreground":"#C678DD"}},{"name":"[VSCODE-CUSTOM] JS/TS Braces/Brackets","scope":["meta.brace.round.js","meta.array-binding-pattern-variable.js","meta.brace.square.js","meta.brace.round.ts","meta.array-binding-pattern-variable.ts","meta.brace.square.ts","meta.brace.round.tsx","meta.array-binding-pattern-variable.tsx","meta.brace.square.tsx"],"settings":{"foreground":"#ABB2BF"}},{"name":"[VSCODE-CUSTOM] JS/TS Punctuation Accessor","scope":["source.js punctuation.accessor","source.ts punctuation.accessor","source.tsx punctuation.accessor"],"settings":{"foreground":"#ABB2BF"}},{"name":"[VSCODE-CUSTOM] JS/TS Punctuation Terminator Statement","scope":["punctuation.terminator.statement.js","punctuation.terminator.statement.ts","punctuation.terminator.statement.tsx"],"settings":{"foreground":"#ABB2BF"}},{"name":"[VSCODE-CUSTOM] JS/TS Array variables","scope":["meta.array-binding-pattern-variable.js variable.other.readwrite.js","meta.array-binding-pattern-variable.ts variable.other.readwrite.ts","meta.array-binding-pattern-variable.tsx variable.other.readwrite.tsx"],"settings":{"foreground":"#D19A66"}},{"name":"[VSCODE-CUSTOM] JS/TS Support Variables","scope":["source.js support.variable","source.ts support.variable","source.tsx support.variable"],"settings":{"foreground":"#E06C75"}},{"name":"[VSCODE-CUSTOM] JS/TS Support Variables","scope":["variable.other.constant.property.js","variable.other.constant.property.ts","variable.other.constant.property.tsx"],"settings":{"foreground":"#D19A66"}},{"name":"[VSCODE-CUSTOM] JS/TS Keyword New","scope":["keyword.operator.new.ts","keyword.operator.new.j","keyword.operator.new.tsx"],"settings":{"foreground":"#C678DD"}},{"name":"[VSCODE-CUSTOM] TS Keyword Operator","scope":["source.ts keyword.operator","source.tsx keyword.operator"],"settings":{"foreground":"#56B6C2"}},{"name":"[VSCODE-CUSTOM] JS/TS Punctuation Parameter Separator","scope":["punctuation.separator.parameter.js","punctuation.separator.parameter.ts","punctuation.separator.parameter.tsx "],"settings":{"foreground":"#ABB2BF"}},{"name":"[VSCODE-CUSTOM] JS/TS Import","scope":["constant.language.import-export-all.js","constant.language.import-export-all.ts"],"settings":{"foreground":"#E06C75"}},{"name":"[VSCODE-CUSTOM] JSX/TSX Import","scope":["constant.language.import-export-all.jsx","constant.language.import-export-all.tsx"],"settings":{"foreground":"#56B6C2"}},{"name":"[VSCODE-CUSTOM] JS/TS Keyword Control As","scope":["keyword.control.as.js","keyword.control.as.ts","keyword.control.as.jsx","keyword.control.as.tsx"],"settings":{"foreground":"#ABB2BF"}},{"name":"[VSCODE-CUSTOM] JS/TS Variable Alias","scope":["variable.other.readwrite.alias.js","variable.other.readwrite.alias.ts","variable.other.readwrite.alias.jsx","variable.other.readwrite.alias.tsx"],"settings":{"foreground":"#E06C75"}},{"name":"[VSCODE-CUSTOM] JS/TS Constants","scope":["variable.other.constant.js","variable.other.constant.ts","variable.other.constant.jsx","variable.other.constant.tsx"],"settings":{"foreground":"#D19A66"}},{"name":"[VSCODE-CUSTOM] JS/TS Export Variable","scope":["meta.export.default.js variable.other.readwrite.js","meta.export.default.ts variable.other.readwrite.ts"],"settings":{"foreground":"#E06C75"}},{"name":"[VSCODE-CUSTOM] JS/TS Template Strings Punctuation Accessor","scope":["source.js meta.template.expression.js punctuation.accessor","source.ts meta.template.expression.ts punctuation.accessor","source.tsx meta.template.expression.tsx punctuation.accessor"],"settings":{"foreground":"#98C379"}},{"name":"[VSCODE-CUSTOM] JS/TS Import equals","scope":["source.js meta.import-equals.external.js keyword.operator","source.jsx meta.import-equals.external.jsx keyword.operator","source.ts meta.import-equals.external.ts keyword.operator","source.tsx meta.import-equals.external.tsx keyword.operator"],"settings":{"foreground":"#ABB2BF"}},{"name":"[VSCODE-CUSTOM] JS/TS Type Module","scope":"entity.name.type.module.js,entity.name.type.module.ts,entity.name.type.module.jsx,entity.name.type.module.tsx","settings":{"foreground":"#98C379"}},{"name":"[VSCODE-CUSTOM] JS/TS Meta Class","scope":"meta.class.js,meta.class.ts,meta.class.jsx,meta.class.tsx","settings":{"foreground":"#ABB2BF"}},{"name":"[VSCODE-CUSTOM] JS/TS Property Definition Variable","scope":["meta.definition.property.js variable","meta.definition.property.ts variable","meta.definition.property.jsx variable","meta.definition.property.tsx variable"],"settings":{"foreground":"#ABB2BF"}},{"name":"[VSCODE-CUSTOM] JS/TS Meta Type Parameters Type","scope":["meta.type.parameters.js support.type","meta.type.parameters.jsx support.type","meta.type.parameters.ts support.type","meta.type.parameters.tsx support.type"],"settings":{"foreground":"#ABB2BF"}},{"name":"[VSCODE-CUSTOM] JS/TS Meta Tag Keyword Operator","scope":["source.js meta.tag.js keyword.operator","source.jsx meta.tag.jsx keyword.operator","source.ts meta.tag.ts keyword.operator","source.tsx meta.tag.tsx keyword.operator"],"settings":{"foreground":"#ABB2BF"}},{"name":"[VSCODE-CUSTOM] JS/TS Meta Tag Punctuation","scope":["meta.tag.js punctuation.section.embedded","meta.tag.jsx punctuation.section.embedded","meta.tag.ts punctuation.section.embedded","meta.tag.tsx punctuation.section.embedded"],"settings":{"foreground":"#ABB2BF"}},{"name":"[VSCODE-CUSTOM] JS/TS Meta Array Literal Variable","scope":["meta.array.literal.js variable","meta.array.literal.jsx variable","meta.array.literal.ts variable","meta.array.literal.tsx variable"],"settings":{"foreground":"#E5C07B"}},{"name":"[VSCODE-CUSTOM] JS/TS Module Exports","scope":["support.type.object.module.js","support.type.object.module.jsx","support.type.object.module.ts","support.type.object.module.tsx"],"settings":{"foreground":"#E06C75"}},{"name":"[VSCODE-CUSTOM] JSON Constants","scope":["constant.language.json"],"settings":{"foreground":"#56B6C2"}},{"name":"[VSCODE-CUSTOM] JS/TS Object Constants","scope":["variable.other.constant.object.js","variable.other.constant.object.jsx","variable.other.constant.object.ts","variable.other.constant.object.tsx"],"settings":{"foreground":"#D19A66"}},{"name":"[VSCODE-CUSTOM] JS/TS Properties Keyword","scope":["storage.type.property.js","storage.type.property.jsx","storage.type.property.ts","storage.type.property.tsx"],"settings":{"foreground":"#56B6C2"}},{"name":"[VSCODE-CUSTOM] JS/TS Single Quote Inside Templated String","scope":["meta.template.expression.js string.quoted punctuation.definition","meta.template.expression.jsx string.quoted punctuation.definition","meta.template.expression.ts string.quoted punctuation.definition","meta.template.expression.tsx string.quoted punctuation.definition"],"settings":{"foreground":"#98C379"}},{"name":"[VSCODE-CUSTOM] JS/TS Backtick inside Templated String","scope":["meta.template.expression.js string.template punctuation.definition.string.template","meta.template.expression.jsx string.template punctuation.definition.string.template","meta.template.expression.ts string.template punctuation.definition.string.template","meta.template.expression.tsx string.template punctuation.definition.string.template"],"settings":{"foreground":"#98C379"}},{"name":"[VSCODE-CUSTOM] JS/TS In Keyword for Loops","scope":["keyword.operator.expression.in.js","keyword.operator.expression.in.jsx","keyword.operator.expression.in.ts","keyword.operator.expression.in.tsx"],"settings":{"foreground":"#C678DD"}},{"name":"[VSCODE-CUSTOM] Python Constants Other","scope":"source.python constant.other","settings":{"foreground":"#ABB2BF"}},{"name":"[VSCODE-CUSTOM] Python Constants","scope":"source.python constant","settings":{"foreground":"#D19A66"}},{"name":"[VSCODE-CUSTOM] Python Placeholder Character","scope":"constant.character.format.placeholder.other.python storage","settings":{"foreground":"#D19A66"}},{"name":"[VSCODE-CUSTOM] Python Magic","scope":"support.variable.magic.python","settings":{"foreground":"#E06C75"}},{"name":"[VSCODE-CUSTOM] Python Meta Function Parameters","scope":"meta.function.parameters.python","settings":{"foreground":"#D19A66"}},{"name":"[VSCODE-CUSTOM] Python Function Separator Annotation","scope":"punctuation.separator.annotation.python","settings":{"foreground":"#ABB2BF"}},{"name":"[VSCODE-CUSTOM] Python Function Separator Punctuation","scope":"punctuation.separator.parameters.python","settings":{"foreground":"#ABB2BF"}},{"name":"[VSCODE-CUSTOM] CSharp Fields","scope":"entity.name.variable.field.cs","settings":{"foreground":"#E06C75"}},{"name":"[VSCODE-CUSTOM] CSharp Keyword Operators","scope":"source.cs keyword.operator","settings":{"foreground":"#ABB2BF"}},{"name":"[VSCODE-CUSTOM] CSharp Variables","scope":"variable.other.readwrite.cs","settings":{"foreground":"#ABB2BF"}},{"name":"[VSCODE-CUSTOM] CSharp Variables Other","scope":"variable.other.object.cs","settings":{"foreground":"#ABB2BF"}},{"name":"[VSCODE-CUSTOM] CSharp Property Other","scope":"variable.other.object.property.cs","settings":{"foreground":"#ABB2BF"}},{"name":"[VSCODE-CUSTOM] CSharp Property","scope":"entity.name.variable.property.cs","settings":{"foreground":"#61AFEF"}},{"name":"[VSCODE-CUSTOM] CSharp Storage Type","scope":"storage.type.cs","settings":{"foreground":"#E5C07B"}},{"name":"[VSCODE-CUSTOM] Rust Unsafe Keyword","scope":"keyword.other.unsafe.rust","settings":{"foreground":"#E06C75"}},{"name":"[VSCODE-CUSTOM] Markdown Raw Block","scope":"markup.raw.block.markdown","settings":{"foreground":"#ABB2BF"}},{"name":"[VSCODE-CUSTOM] Shell Variables Punctuation Definition","scope":"punctuation.definition.variable.shell","settings":{"foreground":"#E06C75"}},{"name":"[VSCODE-CUSTOM] Css Support Constant Value","scope":"support.constant.property-value.css","settings":{"foreground":"#ABB2BF"}},{"name":"[VSCODE-CUSTOM] Css Punctuation Definition Constant","scope":"punctuation.definition.constant.css","settings":{"foreground":"#D19A66"}},{"name":"[VSCODE-CUSTOM] Sass Punctuation for key-value","scope":"punctuation.separator.key-value.scss","settings":{"foreground":"#E06C75"}},{"name":"[VSCODE-CUSTOM] Sass Punctuation for constants","scope":"punctuation.definition.constant.scss","settings":{"foreground":"#D19A66"}},{"name":"[VSCODE-CUSTOM] Sass Punctuation for key-value","scope":"meta.property-list.scss punctuation.separator.key-value.scss","settings":{"foreground":"#ABB2BF"}},{"name":"[VSCODE-CUSTOM] Java Storage Type Primitive Array","scope":"storage.type.primitive.array.java","settings":{"foreground":"#E5C07B"}},{"name":"[VSCODE-CUSTOM] Markdown headings","scope":"entity.name.section.markdown","settings":{"foreground":"#E06C75"}},{"name":"[VSCODE-CUSTOM] Markdown heading Punctuation Definition","scope":"punctuation.definition.heading.markdown","settings":{"foreground":"#E06C75"}},{"name":"[VSCODE-CUSTOM] Markdown heading setext","scope":"markup.heading.setext","settings":{"foreground":"#ABB2BF"}},{"name":"[VSCODE-CUSTOM] Markdown Punctuation Definition Bold","scope":"punctuation.definition.bold.markdown","settings":{"foreground":"#D19A66"}},{"name":"[VSCODE-CUSTOM] Markdown Inline Raw","scope":"markup.inline.raw.markdown","settings":{"foreground":"#98C379"}},{"name":"[VSCODE-CUSTOM] Markdown List Punctuation Definition","scope":"beginning.punctuation.definition.list.markdown","settings":{"foreground":"#E06C75"}},{"name":"[VSCODE-CUSTOM] Markdown Quote","scope":"markup.quote.markdown","settings":{"foreground":"#5C6370","fontStyle":"italic"}},{"name":"[VSCODE-CUSTOM] Markdown Punctuation Definition String","scope":["punctuation.definition.string.begin.markdown","punctuation.definition.string.end.markdown","punctuation.definition.metadata.markdown"],"settings":{"foreground":"#ABB2BF"}},{"name":"[VSCODE-CUSTOM] Markdown Punctuation Definition Link","scope":"punctuation.definition.metadata.markdown","settings":{"foreground":"#C678DD"}},{"name":"[VSCODE-CUSTOM] Markdown Underline Link/Image","scope":["markup.underline.link.markdown","markup.underline.link.image.markdown"],"settings":{"foreground":"#C678DD"}},{"name":"[VSCODE-CUSTOM] Markdown Link Title/Description","scope":["string.other.link.title.markdown","string.other.link.description.markdown"],"settings":{"foreground":"#61AFEF"}},{"name":"[VSCODE-CUSTOM] Ruby Punctuation Separator Variable","scope":"punctuation.separator.variable.ruby","settings":{"foreground":"#E06C75"}},{"name":"[VSCODE-CUSTOM] Ruby Other Constant Variable","scope":"variable.other.constant.ruby","settings":{"foreground":"#D19A66"}},{"name":"[VSCODE-CUSTOM] Ruby Keyword Operator Other","scope":"keyword.operator.other.ruby","settings":{"foreground":"#98C379"}},{"name":"[VSCODE-CUSTOM] PHP Punctuation Variable Definition","scope":"punctuation.definition.variable.php","settings":{"foreground":"#E06C75"}},{"name":"[VSCODE-CUSTOM] PHP Meta Class","scope":"meta.class.php","settings":{"foreground":"#ABB2BF"}},{"scope":"token.info-token","settings":{"foreground":"#6796e6"}},{"scope":"token.warn-token","settings":{"foreground":"#cd9731"}},{"scope":"token.error-token","settings":{"foreground":"#f44747"}},{"scope":"token.debug-token","settings":{"foreground":"#b267e6"}}],"extensionData":{"extensionId":"codesandbox.codesandbox-black","extensionPublisher":"codesandbox","extensionName":"codesandbox-black","extensionIsBuiltin":true},"colorMap":{"activityBar.background":"#151515","activityBar.border":"#242424","button.background":"EAFF96","button.foreground":"#ffffff","button.border":"EAFF96","button.hoverBackground":"EAFF96","dropdown.background":"#151515","dropdown.border":"#242424","dropdown.foreground":"#ffffff","terminal.background":"#040404","terminal.foreground":"#ffffff","terminal.ansiBrightBlack":"#535bcf","terminal.ansiBrightRed":"#e1270e","terminal.ansiBrightGreen":"#5bc266","terminal.ansiBrightYellow":"#fbcc43","terminal.ansiBlack":"#21222c","terminal.ansiRed":"#e1270e","terminal.ansiGreen":"#5bc266","terminal.ansiYellow":"#fbcc43","terminal.ansiBlue":"#535bcf","terminal.ansiMagenta":"#bf5af2","terminal.ansiCyan":"#6cc7f6","terminal.ansiWhite":"#ffffff","contrastBorder":"#242424","selection.background":"#535bcf","errorForeground":"#e27e8d","input.background":"#242424","input.foreground":"#ffffff","input.border":"#040404","input.placeholderForeground":"#999999","inputOption.activeBorder":"#6cc7f6","inputValidation.infoBorder":"#bf5af2","inputValidation.warningBorder":"#fbcc43","inputValidation.errorBorder":"#e1270e","tab.activeBackground":"#151515","tab.activeForeground":"#ffffff","editor.background":"#151515","editor.foreground":"#ffffff","editor.hoverHighlightBackground":"#333333","editor.inactiveSelectionBackground":"#333333","editorLineNumber.foreground":"#242424","editorGroup.background":"#151515","editorGroup.border":"#242424","editorGroup.dropBackground":"#151515","editorGroupHeader.tabsBackground":"#151515","editorGroupHeader.tabsBorder":"#242424","editor.lineHighlightBackground":"#242424","editor.lineHighlightBorder":"#242424","editor.rangeHighlightBackground":"#222222","editor.selectionBackground":"#242424","editor.selectionHighlightBackground":"#242424","editor.wordHighlightStrongBackground":"#242424","editor.wordHighlightBackground":"#242424","editorBracketMatch.background":"#242424","editorBracketMatch.border":"#242424","editorCodeLens.foreground":"#242424","editorCursor.background":"#151515","editorCursor.foreground":"#ffffff","editorError.border":"#242424","editorError.foreground":"#e1270e","editorGutter.background":"#151515","editorGutter.deletedBackground":"#e1270e","editorGutter.modifiedBackground":"#151515","editorHoverWidget.background":"#151515","editorHoverWidget.border":"#242424","editorIndentGuide.background":"#151515","editorLineNumber.activeForeground":"#757575","editorLink.activeForeground":"#999999","editorMarkerNavigation.background":"#151515","editorMarkerNavigationError.background":"#151515","editorMarkerNavigationWarning.background":"#242424","editorOverviewRuler.border":"#242424","editorOverviewRuler.commonContentForeground":"#242424","editorOverviewRuler.currentContentForeground":"#e1270e","editorOverviewRuler.incomingContentForeground":"#5bc266","editorRuler.foreground":"#ffffff","editorSuggestWidget.background":"#151515","editorSuggestWidget.border":"#242424","editorSuggestWidget.foreground":"#999999","editorSuggestWidget.selectedBackground":"#242424","editorWarning.border":"#242424","editorWarning.foreground":"#f35644","editorWhitespace.foreground":"#444444","editorWidget.background":"#111111","editorWidget.border":"#2d2d2d","extensionButton.prominentBackground":"#242424","extensionButton.prominentForeground":"#ffffff","extensionButton.prominentHoverBackground":"#242424","focusBorder":"#242424","foreground":"#999999","peekView.border":"#353535","peekViewEditor.background":"#242424","peekViewEditor.matchHighlightBackground":"#76d0fb","peekViewResult.background":"#242424","peekViewResult.fileForeground":"#ffffff","peekViewResult.lineForeground":"#ffffff","peekViewResult.matchHighlightBackground":"#76d0fb","peekViewResult.selectionBackground":"#242424","peekViewResult.selectionForeground":"#ffffff","peekViewTitle.background":"#242424","peekViewTitleDescription.foreground":"#535bcf","peekViewTitleLabel.foreground":"#ffffff","tab.border":"#242424","tab.activeBorder":"#6cc7f6","tab.inactiveBackground":"#151515","tab.inactiveForeground":"#757575","tab.unfocusedActiveForeground":"#ffffff","tab.unfocusedInactiveForeground":"#757575","activityBarBadge.background":"#e1270e","sideBarTitle.foreground":"#ffffff","scrollbarSlider.activeBackground":"#ffffff","scrollbarSlider.border":"#242424","sideBar.background":"#151515","sideBar.border":"#242424","sideBar.foreground":"#ffffff","sideBarSectionHeader.background":"#151515","sideBarSectionHeader.foreground":"#ffffff","sideBarSectionHeader.border":"#242424","sideBar.hoverBackground":"#00ff00","statusBar.background":"#242424","statusBar.foreground":"#ffffff","statusBar.debuggingBackground":"#e1270e","statusBar.debuggingForeground":"#242424","statusBar.noFolderBackground":"#242424","statusBar.noFolderForeground":"#f8f8f2","statusBarItem.prominentBackground":"#e1270e","statusBarItem.prominentHoverBackground":"#ffb86c","statusBarItem.remoteForeground":"#e6e6e6","statusBarItem.remoteBackground":"#bf5af2","statusBar.border":"#242424","titleBar.background":"#151515","titleBar.activeBackground":"#151515","titleBar.activeForeground":"#ffffff","titleBar.border":"#242424","titleBar.inactiveBackground":"#151515","titleBar.inactiveForeground":"#999999","menu.background":"#151515","menu.selectionBackground":"#242424","list.activeSelectionBackground":"#151515","list.activeSelectionForeground":"#ffffff","list.dropBackground":"#151515","list.focusBackground":"#151515","list.highlightForeground":"#6cc7f6","list.hoverBackground":"#242424","list.warningForeground":"#fbcc43","list.errorForeground":"#e1270e"},"watch":false}`;
diff --git a/packages/app/src/app/overmind/effects/vscode/utils.ts b/packages/app/src/app/overmind/effects/vscode/utils.ts
deleted file mode 100644
index 41a12fbf12f..00000000000
--- a/packages/app/src/app/overmind/effects/vscode/utils.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import { getModulePath } from '@codesandbox/common/lib/sandbox/modules';
-import { Sandbox } from '@codesandbox/common/lib/types';
-import { lineAndColumnToIndex } from 'app/overmind/utils/common';
-
-export function getVSCodePath(sandbox: Sandbox, moduleId: string) {
-  return `/sandbox${getModulePath(
-    sandbox.modules,
-    sandbox.directories,
-    moduleId
-  )}`;
-}
-
-export function getCurrentModelPath(editor) {
-  const activeEditor = editor.getActiveCodeEditor();
-
-  if (!activeEditor) {
-    return undefined;
-  }
-
-  const model = activeEditor.getModel();
-
-  if (!model) {
-    return undefined;
-  }
-
-  return model.uri.path.replace(/^\/sandbox/, '');
-}
-
-export function getCurrentModel(editor) {
-  const activeEditor = editor.getActiveCodeEditor();
-
-  return activeEditor && activeEditor.getModel();
-}
-
-export function getSelection(lines, selection) {
-  const startSelection = lineAndColumnToIndex(
-    lines,
-    selection.startLineNumber,
-    selection.startColumn
-  );
-  const endSelection = lineAndColumnToIndex(
-    lines,
-    selection.endLineNumber,
-    selection.endColumn
-  );
-
-  return {
-    selection:
-      startSelection === endSelection ? [] : [startSelection, endSelection],
-    cursorPosition: lineAndColumnToIndex(
-      lines,
-      selection.positionLineNumber,
-      selection.positionColumn
-    ),
-  };
-}
diff --git a/packages/app/src/app/overmind/effects/vscode/vscode-script-loader.ts b/packages/app/src/app/overmind/effects/vscode/vscode-script-loader.ts
index 98d58f42cc8..84738660fd9 100644
--- a/packages/app/src/app/overmind/effects/vscode/vscode-script-loader.ts
+++ b/packages/app/src/app/overmind/effects/vscode/vscode-script-loader.ts
@@ -368,7 +368,7 @@ function initializeRequires() {
   });
 }
 
-export default function(isVSCode: boolean, requiredModule?: string[]) {
+export default function (isVSCode: boolean, requiredModule?: string[]) {
   var METADATA = isVSCode ? VSCODE_METADATA : MONACO_METADATA;
   var IS_FILE_PROTOCOL = global.location.protocol === 'file:';
   var DIRNAME: string | null = null;
@@ -393,13 +393,13 @@ export default function(isVSCode: boolean, requiredModule?: string[]) {
     }
   }
 
-  var LOADER_OPTS = (function() {
+  var LOADER_OPTS = (function () {
     function parseQueryString() {
       var str = global.location.search;
       str = str.replace(/^\?/, '');
       var pieces = str.split(/&/);
       var result = {};
-      pieces.forEach(function(piece) {
+      pieces.forEach(function (piece) {
         var config = piece.split(/=/);
         result[config[0]] = config[1];
       });
@@ -408,7 +408,7 @@ export default function(isVSCode: boolean, requiredModule?: string[]) {
     var overwrites = parseQueryString();
     var result = {};
     result['editor'] = overwrites['editor'] || 'src';
-    METADATA.PLUGINS.map(function(plugin) {
+    METADATA.PLUGINS.map(function (plugin) {
       result[plugin.name] =
         overwrites[plugin.name] || (process.env.VSCODE ? 'src' : 'npm/min');
     });
@@ -437,10 +437,10 @@ export default function(isVSCode: boolean, requiredModule?: string[]) {
     this.contrib = contrib;
     this.selectedPath = LOADER_OPTS[name];
   }
-  Component.prototype.isRelease = function() {
+  Component.prototype.isRelease = function () {
     return /release/.test(this.selectedPath);
   };
-  Component.prototype.getResolvedPath = function() {
+  Component.prototype.getResolvedPath = function () {
     var resolvedPath = this.paths[this.selectedPath];
     if (
       this.selectedPath === 'npm/dev' ||
@@ -461,27 +461,27 @@ export default function(isVSCode: boolean, requiredModule?: string[]) {
     }
     return resolvedPath;
   };
-  Component.prototype.generateLoaderConfig = function(dest) {
+  Component.prototype.generateLoaderConfig = function (dest) {
     dest[this.modulePrefix] =
       process.env.CODESANDBOX_HOST + this.getResolvedPath();
   };
-  Component.prototype.generateUrlForPath = function(pathName) {
+  Component.prototype.generateUrlForPath = function (pathName) {
     var NEW_LOADER_OPTS = {};
-    Object.keys(LOADER_OPTS).forEach(function(key) {
+    Object.keys(LOADER_OPTS).forEach(function (key) {
       NEW_LOADER_OPTS[key] =
         LOADER_OPTS[key] === 'npm/dev' ? undefined : LOADER_OPTS[key];
     });
     NEW_LOADER_OPTS[this.name] = pathName === 'npm/dev' ? undefined : pathName;
 
     var search = Object.keys(NEW_LOADER_OPTS)
-      .map(function(key) {
+      .map(function (key) {
         var value = NEW_LOADER_OPTS[key];
         if (value) {
           return key + '=' + value;
         }
         return '';
       })
-      .filter(function(assignment) {
+      .filter(function (assignment) {
         return Boolean(assignment);
       })
       .join('&');
@@ -490,14 +490,14 @@ export default function(isVSCode: boolean, requiredModule?: string[]) {
     }
     return toHREF(search);
   };
-  Component.prototype.renderLoadingOptions = function() {
+  Component.prototype.renderLoadingOptions = function () {
     return (
       '<strong style="width:130px;display:inline-block;">' +
       this.name +
       '</strong>:&nbsp;&nbsp;&nbsp;' +
       Object.keys(this.paths)
         .map(
-          function(pathName) {
+          function (pathName) {
             if (pathName === this.selectedPath) {
               return '<strong>' + pathName + '</strong>';
             }
@@ -516,7 +516,7 @@ export default function(isVSCode: boolean, requiredModule?: string[]) {
 
   var RESOLVED_CORE = new Component('editor', 'vs', METADATA.CORE.paths);
   global.RESOLVED_CORE_PATH = RESOLVED_CORE.getResolvedPath();
-  var RESOLVED_PLUGINS = METADATA.PLUGINS.map(function(plugin) {
+  var RESOLVED_PLUGINS = METADATA.PLUGINS.map(function (plugin) {
     return new Component(
       plugin.name,
       plugin.modulePrefix,
@@ -539,7 +539,7 @@ export default function(isVSCode: boolean, requiredModule?: string[]) {
     }
   }
 
-  (function() {
+  (function () {
     if (process.env.DEBUG_VERSION) {
       var allComponents = [RESOLVED_CORE];
       if (!RESOLVED_CORE.isRelease()) {
@@ -557,7 +557,7 @@ export default function(isVSCode: boolean, requiredModule?: string[]) {
       div.innerHTML =
         '<ul><li>' +
         allComponents
-          .map(function(component) {
+          .map(function (component) {
             return component.renderLoadingOptions();
           })
           .join('</li><li>') +
@@ -575,7 +575,7 @@ export default function(isVSCode: boolean, requiredModule?: string[]) {
     }
   })();
 
-  return function(callback: () => void, PATH_PREFIX?: string) {
+  return function (callback: () => void, PATH_PREFIX?: string) {
     PATH_PREFIX = PATH_PREFIX || '';
 
     global.nodeRequire = path => {
@@ -604,7 +604,7 @@ export default function(isVSCode: boolean, requiredModule?: string[]) {
         'vs/language/vue': '/public/14/vs/language/vue',
       };
       if (!RESOLVED_CORE.isRelease()) {
-        RESOLVED_PLUGINS.forEach(function(plugin) {
+        RESOLVED_PLUGINS.forEach(function (plugin) {
           plugin.generateLoaderConfig(loaderPathsConfig);
         });
       }
@@ -635,14 +635,14 @@ export default function(isVSCode: boolean, requiredModule?: string[]) {
       global.deps = new Set();
 
       if (requiredModule) {
-        global.require(requiredModule, function(a) {
+        global.require(requiredModule, function (a) {
           if (!isVSCode && !RESOLVED_CORE.isRelease()) {
             // At this point we've loaded the monaco-editor-core
             global.require(
-              RESOLVED_PLUGINS.map(function(plugin) {
+              RESOLVED_PLUGINS.map(function (plugin) {
                 return plugin.contrib;
               }),
-              function() {
+              function () {
                 // At this point we've loaded all the plugins
                 callback();
               }
diff --git a/packages/app/src/app/overmind/factories.ts b/packages/app/src/app/overmind/factories.ts
index 5ae507f9805..0b72d8ad8ef 100755
--- a/packages/app/src/app/overmind/factories.ts
+++ b/packages/app/src/app/overmind/factories.ts
@@ -1,7 +1,6 @@
-import { Contributor, PermissionType } from '@codesandbox/common/lib/types';
+import { Contributor } from '@codesandbox/common/lib/types';
 import { identify } from '@codesandbox/common/lib/utils/analytics';
 import { notificationState } from '@codesandbox/common/lib/utils/notifications';
-import { hasPermission } from '@codesandbox/common/lib/utils/permission';
 import { NotificationStatus } from '@codesandbox/notifications';
 import { IState, derived, ContextFunction } from 'overmind';
 import { Context } from '.';
@@ -29,7 +28,6 @@ export const withLoadApp = <I>(
   effects.connection.addListener(actions.connectionChanged);
   actions.internal.setStoredSettings();
   actions.internal.prefetchOfficialTemplates();
-  effects.codesandboxApi.listen(actions.server.onCodeSandboxAPIMessage);
 
   if (localStorage.jwt) {
     // We've introduced a new way of signing in to CodeSandbox, and we should let the user know to
@@ -106,61 +104,6 @@ export const withLoadApp = <I>(
   }
 };
 
-export const withOwnedSandbox = <I>(
-  continueAction: ContextFunction<I, void>,
-  cancelAction: ContextFunction<I, void> = () => Promise.resolve(),
-  requiredPermission?: PermissionType
-): ContextFunction<I, void> => async (context: Context, payload: I) => {
-  const { state, actions } = context;
-
-  const sandbox = state.editor.currentSandbox;
-
-  if (sandbox) {
-    if (
-      typeof requiredPermission === 'undefined'
-        ? !sandbox.owned
-        : !hasPermission(sandbox.authorization, requiredPermission)
-    ) {
-      if (state.editor.isForkingSandbox) {
-        return cancelAction(context, payload);
-      }
-
-      try {
-        await actions.editor.internal.forkSandbox({
-          sandboxId: sandbox.id,
-        });
-      } catch (e) {
-        // If we know the error is caused by an anonymous user trying to save a
-        // file and fork a server sandbox, we don't want to show the vscode error
-        // with the cancelAction and we don't want to continue either.
-        if (e.message === 'ERR_ANON_SSE_FORK') {
-          return () => {};
-        }
-
-        return cancelAction(context, payload);
-      }
-    } else if (sandbox.isFrozen && state.editor.sessionFrozen) {
-      const modalResponse = await actions.modals.forkFrozenModal.open();
-
-      if (modalResponse === 'fork') {
-        try {
-          await actions.editor.internal.forkSandbox({
-            sandboxId: sandbox.id,
-          });
-        } catch (e) {
-          return cancelAction(context, payload);
-        }
-      } else if (modalResponse === 'unfreeze') {
-        state.editor.sessionFrozen = false;
-      } else if (modalResponse === 'cancel') {
-        return cancelAction(context, payload);
-      }
-    }
-  }
-
-  return continueAction(context, payload);
-};
-
 export const createModals = <
   T extends {
     [name: string]: {
diff --git a/packages/app/src/app/overmind/index.ts b/packages/app/src/app/overmind/index.ts
index c979961d99e..54ecc61fa77 100755
--- a/packages/app/src/app/overmind/index.ts
+++ b/packages/app/src/app/overmind/index.ts
@@ -12,20 +12,11 @@ import * as effects from './effects';
 import { createModals } from './factories';
 import * as modals from './modals';
 import * as checkout from './namespaces/checkout';
-import * as comments from './namespaces/comments';
 import * as dashboard from './namespaces/dashboard';
 import * as sidebar from './namespaces/sidebar';
-import * as deployment from './namespaces/deployment';
-import * as editor from './namespaces/editor';
-import * as files from './namespaces/files';
-import * as git from './namespaces/git';
-import * as live from './namespaces/live';
 import * as preferences from './namespaces/preferences';
 import * as profile from './namespaces/profile';
-import * as server from './namespaces/server';
 import * as userNotifications from './namespaces/userNotifications';
-import * as workspace from './namespaces/workspace';
-import * as preview from './namespaces/preview';
 import { state } from './state';
 
 export const config = merge(
@@ -37,18 +28,9 @@ export const config = merge(
   namespaced({
     preferences,
     userNotifications,
-    editor,
-    live,
-    workspace,
     dashboard,
     sidebar,
-    deployment,
-    files,
-    git,
     profile,
-    server,
-    comments,
-    preview,
     checkout,
     modals: createModals(modals),
   })
diff --git a/packages/app/src/app/overmind/internalActions.ts b/packages/app/src/app/overmind/internalActions.ts
index ef196db6a85..0fb9729b67b 100755
--- a/packages/app/src/app/overmind/internalActions.ts
+++ b/packages/app/src/app/overmind/internalActions.ts
@@ -1,11 +1,4 @@
-import {
-  ModuleTab,
-  NotificationButton,
-  Sandbox,
-  ServerContainerStatus,
-  ServerStatus,
-  TabType,
-} from '@codesandbox/common/lib/types';
+import { NotificationButton, Sandbox } from '@codesandbox/common/lib/types';
 import history from 'app/utils/history';
 import { NotificationMessage } from '@codesandbox/notifications/lib/state';
 import { NotificationStatus } from '@codesandbox/notifications';
@@ -19,8 +12,6 @@ import {
   SandboxToFork,
 } from 'app/components/Create/utils/types';
 import { ApiError } from './effects/api/apiFactory';
-import { defaultOpenedModule, mainModule } from './utils/main-module';
-import { parseConfigurations } from './utils/parse-configurations';
 import { Context } from '.';
 import { TEAM_ID_LOCAL_STORAGE } from './utils/team';
 import { AuthOptions, GH_BASE_SCOPE, MAP_GH_SCOPE_OPTIONS } from './utils/auth';
@@ -47,7 +38,6 @@ export const initializeNewUser = async ({
 
   actions.internal.showUserSurveyIfNeeded();
   actions.internal.showUpdatedToSIfNeeded();
-  await effects.live.getSocket();
   actions.userNotifications.internal.initialize();
   actions.internal.setStoredSettings();
 
@@ -80,7 +70,6 @@ export const signIn = async (
     state.user = renameZeitToVercel(currentUser);
 
     await actions.internal.initializeNewUser();
-    actions.refetchSandboxInfo();
     state.hasLogIn = true;
     state.isAuthenticating = false;
     actions.getActiveTeamInfo();
@@ -296,8 +285,6 @@ export const authorize = async ({ state, effects }: Context) => {
   try {
     state.isLoadingAuthToken = true;
     state.authToken = await effects.api.getAuthToken();
-  } catch (error) {
-    state.editor.error = error.message;
   } finally {
     state.isLoadingAuthToken = false;
   }
@@ -410,134 +397,6 @@ export const switchCurrentWorkspaceBySandbox = (
   }
 };
 
-export const currentSandboxChanged = ({ state, actions }: Context) => {
-  const sandbox = state.editor.currentSandbox!;
-  actions.internal.switchCurrentWorkspaceBySandbox({
-    sandbox,
-  });
-};
-
-export const setCurrentSandbox = async (
-  { state, effects, actions }: Context,
-  sandbox: Sandbox
-) => {
-  state.editor.sandboxes[sandbox.id] = sandbox;
-  state.editor.currentId = sandbox.id;
-
-  let { currentModuleShortid } = state.editor;
-  const parsedConfigs = parseConfigurations(sandbox);
-  const main = mainModule(sandbox, parsedConfigs);
-
-  state.editor.mainModuleShortid = main?.shortid;
-
-  // Only change the module shortid if it doesn't exist in the new sandbox
-  // This can happen when a sandbox is opened that's different from the current
-  // sandbox, with completely different files
-  if (
-    !sandbox.modules.find(module => module.shortid === currentModuleShortid)
-  ) {
-    const defaultModule = defaultOpenedModule(sandbox, parsedConfigs);
-
-    if (defaultModule) {
-      currentModuleShortid = defaultModule.shortid;
-    }
-  }
-
-  const sandboxOptions = effects.router.getSandboxOptions();
-
-  if (sandboxOptions.currentModule) {
-    try {
-      const resolvedModule = effects.utils.resolveModule(
-        sandboxOptions.currentModule,
-        sandbox.modules,
-        sandbox.directories
-      );
-      currentModuleShortid = resolvedModule
-        ? resolvedModule.shortid
-        : currentModuleShortid;
-    } catch (error) {
-      actions.internal.handleError({
-        message: `Could not find module ${sandboxOptions.currentModule}`,
-        error,
-      });
-    }
-  }
-
-  state.editor.currentModuleShortid = currentModuleShortid;
-  state.editor.workspaceConfigCode = '';
-
-  state.server.status = ServerStatus.INITIALIZING;
-  state.server.containerStatus = ServerContainerStatus.INITIALIZING;
-  state.server.error = null;
-  state.server.hasUnrecoverableError = false;
-  state.server.ports = [];
-
-  const newTab: ModuleTab = {
-    type: TabType.MODULE,
-    moduleShortid: currentModuleShortid,
-    dirty: true,
-  };
-
-  state.editor.tabs = [newTab];
-
-  state.preferences.showPreview = Boolean(
-    sandboxOptions.isPreviewScreen || sandboxOptions.isSplitScreen
-  );
-
-  state.preferences.showEditor = Boolean(
-    sandboxOptions.isEditorScreen || sandboxOptions.isSplitScreen
-  );
-
-  if (sandboxOptions.initialPath)
-    state.editor.initialPath = sandboxOptions.initialPath;
-  if (sandboxOptions.fontSize)
-    state.preferences.settings.fontSize = sandboxOptions.fontSize;
-  if (sandboxOptions.highlightedLines)
-    state.editor.highlightedLines = sandboxOptions.highlightedLines;
-  if (sandboxOptions.hideNavigation)
-    state.preferences.hideNavigation = sandboxOptions.hideNavigation;
-  if (sandboxOptions.isInProjectView)
-    state.editor.isInProjectView = sandboxOptions.isInProjectView;
-  if (sandboxOptions.autoResize)
-    state.preferences.settings.autoResize = sandboxOptions.autoResize;
-  if (sandboxOptions.enableEslint)
-    state.preferences.settings.enableEslint = sandboxOptions.enableEslint;
-  if (sandboxOptions.forceRefresh)
-    state.preferences.settings.forceRefresh = sandboxOptions.forceRefresh;
-  if (sandboxOptions.expandDevTools)
-    state.preferences.showDevtools = sandboxOptions.expandDevTools;
-  if (sandboxOptions.runOnClick)
-    state.preferences.runOnClick = sandboxOptions.runOnClick;
-
-  state.workspace.project.title = sandbox.title || '';
-  state.workspace.project.description = sandbox.description || '';
-  state.workspace.project.alias = sandbox.alias || '';
-
-  // Do this before startContainer, because startContainer flushes in overmind and causes
-  // the components to rerender. Because of this sometimes the GitHub component will get a
-  // sandbox without a git
-  actions.workspace.openDefaultItem();
-  actions.server.startContainer(sandbox);
-
-  actions.internal.currentSandboxChanged();
-};
-
-export const closeTabByIndex = ({ state }: Context, tabIndex: number) => {
-  const { currentModule } = state.editor;
-  const tabs = state.editor.tabs as ModuleTab[];
-  const isActiveTab = currentModule.shortid === tabs[tabIndex].moduleShortid;
-
-  if (isActiveTab) {
-    const newTab = tabIndex > 0 ? tabs[tabIndex - 1] : tabs[tabIndex + 1];
-
-    if (newTab) {
-      state.editor.currentModuleShortid = newTab.moduleShortid;
-    }
-  }
-
-  state.editor.tabs.splice(tabIndex, 1);
-};
-
 export const getErrorMessage = (
   context: Context,
   { error }: { error: ApiError | Error }
diff --git a/packages/app/src/app/overmind/namespaces/comments/actions.ts b/packages/app/src/app/overmind/namespaces/comments/actions.ts
deleted file mode 100644
index 0acde6cf7a5..00000000000
--- a/packages/app/src/app/overmind/namespaces/comments/actions.ts
+++ /dev/null
@@ -1,1016 +0,0 @@
-import {
-  CommentsFilterOption,
-  Module,
-  UserQuery,
-} from '@codesandbox/common/lib/types';
-import { captureException } from '@codesandbox/common/lib/utils/analytics/sentry';
-import { getTextOperation } from '@codesandbox/common/lib/utils/diff';
-import {
-  DIALOG_TRANSITION_DURATION,
-  REPLY_TRANSITION_DELAY,
-} from 'app/constants';
-import {
-  CodeReference,
-  CodeReferenceMetadata,
-  CodeReferenceMetadataFragment,
-  CommentAddedSubscription,
-  CommentChangedSubscription,
-  CommentFragment,
-  CommentRemovedSubscription,
-  ImageReference,
-  UserReference,
-  UserReferenceMetadata,
-  ImageReferenceMetadata,
-  PreviewReferenceMetadata,
-} from 'app/graphql/types';
-import { Context } from 'app/overmind';
-import {
-  convertImagesToImageReferences,
-  convertMentionsToMentionLinks,
-  convertMentionsToUserReferences,
-} from 'app/overmind/utils/comments';
-import {
-  indexToLineAndColumn,
-  lineAndColumnToIndex,
-} from 'app/overmind/utils/common';
-import { utcToZonedTime } from 'date-fns-tz';
-import { Selection, TextOperation } from 'ot';
-import { debounce, filter, pipe } from 'overmind';
-import * as uuid from 'uuid';
-
-import { OPTIMISTIC_COMMENT_ID } from './state';
-
-const PREVIEW_COMMENT_OFFSET = -500;
-const CODE_COMMENT_OFFSET = 500;
-const BUBBLE_IMAGE =
-  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAC8SURBVHgBxZO9EYJAEIW/PTG3BEogNIQKoBQ7QDvQTrQCCQwMrwMpwdxR3ANkGAIHjoA3czd7P+/b25lbYaBqG8WsSKnIEMJ229bjzUHutuzfl84YRxte5Bru+K8jawUV9tkBWvNVw4hxsgpJHMTUyybzWDP13caDaM2h1vzAR0Ji1Jzjqw+ZYdrThy9I5wEgNMzUXIBdGKBf2x8gnFxf+AIsAXsXTAdo5l8fuGUwylRR6nzRdGe52aJ/9AWAvjArPZuVDgAAAABJRU5ErkJggg==';
-
-const BUBBLE_IMAGE_2X =
-  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFsSURBVHgBxZfBUcMwEEW/5ISzS1AqQNwYLoQOoAJaCBUAHUAHoQOoIOaQGW64A9QBPsMEs5IdBA6ZKImsfTM7icce79f3yt4VCKQe6xwfOIfAKR1qCkWRt6crCkNRUhQY4kkUZRVyX7HpgvpYK0hM6MrLXwlDmGKBW/FSGuwiwK34E9f0d4L9uBPz8grbCGhXPaOzCnEw5MbZf27IleQnWkdOblHIMHP37vDHgR5W3mXFiR8BbZW/9pjcixjiaLlL/COwBdd/cotqi9vhHHDWZ3hDShYY2UfROJDhBqmRzfYW7X5/R3oqqoWRdK9XHtyrXVIVjMEFfVdsDRyCD20FKPChrIBtvnCxySWY4RZQcQsw3AJKbgEFrwBqXjkFTG1PwCeAOmb7wyNA4H7ZlnEIMBj4/mOAtDRN6dxPTSkdMKhx0Z0NUjkQPphEhwrOteFrZsS+HKjI7gd80Vy4YTiNJcCP5zWecYDH0PH8G30scDsRZ7W6AAAAAElFTkSuQmCC';
-
-export const selectCommentsFilter = (
-  { state }: Context,
-  option: CommentsFilterOption
-) => {
-  state.comments.selectedCommentsFilter = option;
-};
-
-export const updateComment = async (
-  { actions, effects, state }: Context,
-  {
-    commentId,
-    content,
-    mentions,
-    images,
-  }: {
-    commentId: string;
-    mentions: { [username: string]: UserQuery };
-    images: {
-      [fileName: string]: { src: string; resolution: [number, number] };
-    };
-    content: string;
-  }
-) => {
-  if (!state.editor.currentSandbox) {
-    return;
-  }
-
-  if (commentId === OPTIMISTIC_COMMENT_ID) {
-    await actions.comments.saveOptimisticComment({
-      content,
-      mentions,
-    });
-    return;
-  }
-  const id = commentId;
-  const sandboxId = state.editor.currentSandbox.id;
-  const comment = state.comments.comments[sandboxId][id];
-
-  effects.analytics.track('Comments - Update Comment');
-
-  comment.content = convertMentionsToMentionLinks(content, mentions);
-
-  try {
-    await effects.gql.mutations.updateComment({
-      commentId,
-      content: comment.content,
-      sandboxId,
-      codeReferences: [],
-      imageReferences: Object.keys(images).map(fileName => ({
-        fileName,
-        resolution: images[fileName].resolution,
-        src: images[fileName].src,
-        url: '', // Typing issue on backend, need the url here
-      })),
-      userReferences: Object.keys(mentions).map(username => ({
-        username,
-        userId: mentions[username].id,
-      })),
-    });
-  } catch (error) {
-    effects.notificationToast.error(
-      'Unable to update your comment, please try again'
-    );
-  }
-};
-
-export const queryUsers = pipe(
-  ({ state }: Context, query: string | null) => {
-    state.comments.isQueryingUsers = true;
-    // We reset the users when we detect a new query being written
-    if (query && query.length === 3) {
-      state.comments.usersQueryResult = [];
-    }
-
-    return query;
-  },
-  debounce(200),
-  filter((_, query) => Boolean(query && query.length >= 3)),
-  ({ effects }: Context, query) => effects.api.queryUsers(query!),
-  ({ state }: Context, result) => {
-    state.comments.usersQueryResult = result;
-    state.comments.isQueryingUsers = false;
-  }
-);
-
-export const getCommentReplies = async (
-  { state, effects }: Context,
-  commentId: string
-) => {
-  const sandbox = state.editor.currentSandbox;
-  if (!sandbox) {
-    return;
-  }
-
-  try {
-    const {
-      // No idea why TS complains about this
-      // @ts-ignore
-      sandbox: { comment },
-    } = await effects.browser.waitAtLeast(
-      (DIALOG_TRANSITION_DURATION + REPLY_TRANSITION_DELAY) * 1000,
-      () =>
-        effects.gql.queries.comment({
-          sandboxId: sandbox.id,
-          commentId,
-        })
-    );
-
-    comment.comments.forEach(childComment => {
-      state.comments.comments[sandbox.id][childComment.id] = childComment;
-    });
-  } catch (e) {
-    effects.notificationToast.error(
-      'Unable to get your comment, please try again'
-    );
-  }
-};
-
-export const onCommentClick = (
-  { state, effects, actions }: Context,
-  {
-    commentIds,
-    bounds,
-  }: {
-    commentIds: string[];
-    bounds: {
-      left: number;
-      top: number;
-      right: number;
-      bottom: number;
-    };
-  }
-) => {
-  if (
-    state.comments.currentCommentId &&
-    commentIds.includes(state.comments.currentCommentId)
-  ) {
-    actions.comments.closeComment();
-    return;
-  }
-
-  if (!commentIds.length) {
-    actions.comments.createCodeLineComment();
-  } else if (commentIds.length === 1) {
-    effects.analytics.track('Comments - Open Comment');
-    actions.comments.selectComment({
-      commentId: commentIds[0],
-      bounds,
-    });
-  } else {
-    state.comments.multiCommentsSelector = {
-      ids: commentIds,
-      x: bounds.left,
-      y: bounds.top,
-    };
-  }
-};
-
-export const closeComment = ({ state, effects }: Context) => {
-  if (!state.editor.currentSandbox) {
-    return;
-  }
-
-  if (state.comments.currentCommentId === OPTIMISTIC_COMMENT_ID) {
-    delete state.comments.comments[state.editor.currentSandbox.id][
-      OPTIMISTIC_COMMENT_ID
-    ];
-  }
-
-  effects.analytics.track('Comments - Close Comments');
-
-  state.comments.currentCommentId = null;
-  state.comments.currentCommentPositions = null;
-
-  if (state.preview.mode === 'add-comment') {
-    state.preview.mode = null;
-    effects.preview.hideCommentCursor();
-  } else if (state.preview.mode === 'responsive-add-comment') {
-    state.preview.mode = 'responsive';
-    effects.preview.hideCommentCursor();
-  }
-};
-
-export const closeMultiCommentsSelector = ({ state }: Context) => {
-  state.comments.multiCommentsSelector = null;
-};
-
-export const selectComment = async (
-  { state, effects, actions }: Context,
-  {
-    commentId,
-    bounds,
-  }: {
-    commentId: string;
-    bounds?: {
-      left: number;
-      top: number;
-      right: number;
-      bottom: number;
-    };
-  }
-) => {
-  actions.comments.closeMultiCommentsSelector();
-
-  const sandbox = state.editor.currentSandbox;
-
-  if (!sandbox) {
-    return;
-  }
-
-  const comment = state.comments.comments[sandbox.id][commentId];
-
-  actions.comments.getCommentReplies(commentId);
-
-  if (!bounds) {
-    state.comments.currentCommentId = commentId;
-    return;
-  }
-
-  if (comment.anchorReference && comment.anchorReference.type === 'code') {
-    if (module) {
-      await actions.editor.moduleSelected({
-        path: (comment.anchorReference
-          .metadata as CodeReferenceMetadataFragment).path,
-      });
-
-      // update comment position with precise info
-      const referenceBounds = await effects.vscode.getCodeReferenceBoundary(
-        commentId,
-        comment.anchorReference.metadata as CodeReferenceMetadata
-      );
-
-      if (state.comments.currentCommentId === OPTIMISTIC_COMMENT_ID) {
-        delete state.comments.comments[sandbox.id][OPTIMISTIC_COMMENT_ID];
-      }
-
-      state.comments.currentCommentId = commentId;
-      state.comments.currentCommentPositions = {
-        trigger: bounds,
-        dialog: {
-          left: referenceBounds.left,
-          top: referenceBounds.top,
-          bottom: referenceBounds.bottom,
-          right: referenceBounds.right,
-        },
-      };
-    }
-  } else if (
-    comment.anchorReference &&
-    comment.anchorReference.type === 'preview'
-  ) {
-    const metadata = comment.anchorReference
-      .metadata as PreviewReferenceMetadata;
-
-    const previewBounds = await effects.preview.getIframeBoundingRect();
-
-    state.preview.responsive.resolution = [metadata.width, metadata.height];
-    state.preview.mode = 'responsive';
-    state.comments.currentCommentId = commentId;
-
-    // We have to wait for the bubble to appear
-    await Promise.resolve();
-
-    const left = previewBounds.left + PREVIEW_COMMENT_OFFSET;
-    const top = previewBounds.top;
-    state.comments.currentCommentPositions = {
-      trigger: bounds,
-      dialog: {
-        // never go over the left of the screen
-        left: left >= 20 ? left : 20,
-        top,
-        bottom: top,
-        right: left,
-      },
-    };
-  } else {
-    state.comments.currentCommentId = commentId;
-    state.comments.currentCommentPositions = {
-      trigger: bounds,
-      dialog: null,
-    };
-  }
-};
-
-export const createCodeLineComment = async ({
-  state,
-  effects,
-  actions,
-}: Context) => {
-  const selection = state.live.currentSelection!;
-  const codeLines = state.editor.currentModule.code.split('\n');
-  const { lineNumber } = indexToLineAndColumn(
-    codeLines,
-    selection.primary.selection[0] || selection.primary.cursorPosition
-  );
-  const anchor = lineAndColumnToIndex(codeLines, lineNumber, 1);
-
-  effects.analytics.track('Comments - Compose Comment', {
-    type: 'code',
-    isLineComment: true,
-  });
-
-  actions.comments.addOptimisticCodeComment({
-    __typename: 'CodeReferenceMetadata',
-    sandboxId: state.editor.currentSandbox!.id,
-    anchor,
-    head: anchor,
-    code: state.editor.currentModule.code.substr(
-      anchor,
-      lineAndColumnToIndex(codeLines, lineNumber + 1, 1)
-    ),
-    path: state.editor.currentModule.path,
-  });
-};
-
-export const createCodeComment = async ({
-  state,
-  effects,
-  actions,
-}: Context) => {
-  const selection = state.live.currentSelection!;
-
-  effects.analytics.track('Comments - Compose Comment', {
-    type: 'code',
-    isLineComment: false,
-  });
-
-  actions.comments.addOptimisticCodeComment({
-    __typename: 'CodeReferenceMetadata',
-    sandboxId: state.editor.currentSandbox!.id,
-    anchor: selection.primary.selection[0] || selection.primary.cursorPosition,
-    head: selection.primary.selection[1] || selection.primary.cursorPosition,
-    code: selection.primary.selection.length
-      ? state.editor.currentModule.code.substr(
-          selection.primary.selection[0],
-          selection.primary.selection[1] - selection.primary.selection[0]
-        )
-      : '',
-    path: state.editor.currentModule.path,
-  });
-};
-
-export const addOptimisticCodeComment = async (
-  { state, effects }: Context,
-  codeReference: CodeReferenceMetadata
-) => {
-  const sandbox = state.editor.currentSandbox!;
-  const user = state.user!;
-  const id = OPTIMISTIC_COMMENT_ID;
-  const now = utcToZonedTime(new Date().toISOString(), 'Etc/UTC');
-  const comments = state.comments.comments;
-  const optimisticComment: CommentFragment = {
-    parentComment: null,
-    id,
-    anchorReference: {
-      id: uuid.v4(),
-      type: 'code',
-      metadata: codeReference,
-      resource: state.editor.currentModule.path,
-    },
-    insertedAt: now,
-    updatedAt: now,
-    content: '',
-    isResolved: false,
-    user: {
-      id: user.id,
-      name: user.name,
-      username: user.username,
-      avatarUrl: user.avatarUrl,
-    },
-    references: [],
-    replyCount: 0,
-  };
-
-  if (!comments[sandbox.id]) {
-    comments[sandbox.id] = {};
-  }
-
-  comments[sandbox.id][id] = optimisticComment;
-  // placeholder value until we know the correct values
-  const {
-    left,
-    right,
-    top,
-    bottom,
-  } = await effects.vscode.getCodeReferenceBoundary(id, codeReference);
-
-  state.comments.currentCommentId = id;
-  state.comments.currentCommentPositions = {
-    trigger: {
-      left,
-      top,
-      bottom,
-      right: right + CODE_COMMENT_OFFSET,
-    },
-    dialog: {
-      left: left + CODE_COMMENT_OFFSET,
-      top,
-      bottom,
-      right,
-    },
-  };
-};
-
-export const addOptimisticPreviewComment = async (
-  { state, effects }: Context,
-  {
-    x,
-    y,
-    scale,
-    screenshot,
-  }: {
-    x: number;
-    y: number;
-    scale: number;
-    screenshot: string;
-  }
-) => {
-  effects.analytics.track('Comments - Create Optimistic Preview Comment');
-
-  const sandbox = state.editor.currentSandbox!;
-  const user = state.user!;
-  const id = OPTIMISTIC_COMMENT_ID;
-  const now = utcToZonedTime(new Date().toISOString(), 'Etc/UTC');
-  const comments = state.comments.comments;
-  const previewIframeBounds = await effects.preview.getIframeBoundingRect();
-  const previewPath = await effects.preview.getPreviewPath();
-  const screenshotUrl = await effects.preview.createScreenshot({
-    screenshotSource: screenshot,
-    bubbleSource: window.devicePixelRatio > 1 ? BUBBLE_IMAGE_2X : BUBBLE_IMAGE,
-    cropWidth: 1000,
-    cropHeight: 400,
-    x: Math.round(x),
-    y: Math.round(y),
-    scale: state.preview.hasExtension ? 1 : scale,
-  });
-  const isResponsive = state.preview.mode === 'responsive-add-comment';
-  const metadata: PreviewReferenceMetadata = {
-    userAgent: effects.browser.getUserAgent(),
-    screenshotUrl,
-    width: isResponsive
-      ? state.preview.responsive.resolution[0]
-      : previewIframeBounds.width,
-    height: isResponsive
-      ? state.preview.responsive.resolution[1]
-      : previewIframeBounds.height,
-    x: isResponsive ? Math.round(x * (1 / scale)) : x,
-    y: isResponsive ? Math.round(y * (1 / scale)) : y,
-    previewPath,
-  };
-  const optimisticComment: CommentFragment = {
-    parentComment: null,
-    id,
-    anchorReference: {
-      id: uuid.v4(),
-      type: 'preview',
-      metadata,
-      resource: previewPath,
-    },
-    insertedAt: now,
-    updatedAt: now,
-    content: '',
-    isResolved: false,
-    user: {
-      id: user.id,
-      name: user.name,
-      username: user.username,
-      avatarUrl: user.avatarUrl,
-    },
-    references: [],
-    replyCount: 0,
-  };
-
-  if (!comments[sandbox.id]) {
-    comments[sandbox.id] = {};
-  }
-
-  comments[sandbox.id][id] = optimisticComment;
-  state.comments.currentCommentId = id;
-
-  const left = x + previewIframeBounds.left;
-  const top = y + previewIframeBounds.top;
-  const bottom = top;
-  const right = left;
-
-  state.comments.currentCommentPositions = {
-    trigger: {
-      left,
-      top,
-      bottom,
-      right: right + PREVIEW_COMMENT_OFFSET,
-    },
-    dialog: {
-      left: left + PREVIEW_COMMENT_OFFSET,
-      top,
-      bottom,
-      right,
-    },
-  };
-};
-
-export const saveOptimisticComment = async (
-  { state, actions, effects }: Context,
-  {
-    content: rawContent,
-    mentions,
-  }: {
-    content: string;
-    mentions: { [username: string]: UserQuery };
-  }
-) => {
-  const sandbox = state.editor.currentSandbox!;
-  const sandboxId = sandbox.id;
-  const id = uuid.v4();
-  const content = convertMentionsToMentionLinks(rawContent, mentions);
-  const comment = {
-    ...state.comments.comments[sandboxId][OPTIMISTIC_COMMENT_ID],
-    content,
-    id,
-  };
-  state.comments.comments[sandbox.id][id] = comment;
-  state.comments.currentCommentId = state.comments.currentCommentId ? id : null;
-  delete state.comments.comments[sandbox.id][OPTIMISTIC_COMMENT_ID];
-
-  effects.preview.hideCommentCursor();
-
-  if (state.preview.mode === 'responsive-add-comment') {
-    state.preview.mode = 'responsive';
-  } else {
-    state.preview.mode = null;
-  }
-
-  return actions.comments.saveComment(comment);
-};
-
-export const saveNewComment = async (
-  { state, actions }: Context,
-  {
-    content: rawContent,
-    mentions,
-    images,
-    parentCommentId,
-  }: {
-    content: string;
-    mentions: { [username: string]: UserQuery };
-    images: {
-      [fileName: string]: {
-        src: string;
-        resolution: [number, number];
-      };
-    };
-    parentCommentId?: string;
-  }
-) => {
-  const user = state.user!;
-  const sandbox = state.editor.currentSandbox!;
-  const now = utcToZonedTime(new Date().toISOString(), 'Etc/UTC');
-  const comments = state.comments.comments;
-
-  if (!comments[sandbox.id]) {
-    comments[sandbox.id] = {};
-  }
-
-  const id = uuid.v4();
-  const content = convertMentionsToMentionLinks(rawContent, mentions);
-  const comment: CommentFragment = {
-    parentComment: parentCommentId ? { id: parentCommentId } : null,
-    anchorReference: null,
-    id,
-    insertedAt: now,
-    updatedAt: now,
-    content,
-    isResolved: false,
-    user: {
-      id: user.id,
-      name: user.name,
-      username: user.username,
-      avatarUrl: user.avatarUrl,
-    },
-    references: [
-      ...convertMentionsToUserReferences(mentions),
-      ...convertImagesToImageReferences(images),
-    ],
-    replyCount: 0,
-  };
-
-  return actions.comments.saveComment(comment);
-};
-
-export const saveComment = async (
-  { state, effects }: Context,
-  comment: CommentFragment
-) => {
-  const comments = state.comments.comments;
-  const sandbox = state.editor.currentSandbox!;
-
-  state.comments.selectedCommentsFilter = CommentsFilterOption.OPEN;
-  comments[sandbox.id][comment.id] = comment;
-
-  if (comment.parentComment) {
-    comments[sandbox.id][comment.parentComment.id].replyCount++;
-  }
-
-  effects.analytics.track('Comments - Create Comment', {
-    type: (comment.anchorReference && comment.anchorReference.type) || 'global',
-  });
-
-  // The server might be ahead on sandbox version, so we need to try to save
-  // several times
-  let tryCount = 0;
-
-  async function trySaveComment() {
-    tryCount++;
-
-    const {
-      userReferences,
-      codeReferences,
-      imageReferences,
-    } = comment.references.reduce<{
-      userReferences: UserReference[];
-      codeReferences: CodeReference[];
-      imageReferences: ImageReference[];
-    }>(
-      (aggr, reference) => {
-        if (reference.type === 'user') {
-          aggr.userReferences.push({
-            userId: (reference.metadata as UserReferenceMetadata).userId,
-            username: (reference.metadata as UserReferenceMetadata).username,
-          });
-        } else if (reference.type === 'code') {
-          aggr.codeReferences.push({
-            anchor: (reference.metadata as CodeReferenceMetadata).anchor,
-            code: (reference.metadata as CodeReferenceMetadata).code,
-            head: (reference.metadata as CodeReferenceMetadata).head,
-            path: (reference.metadata as CodeReferenceMetadata).path,
-            lastUpdatedAt: state.editor.currentSandbox!.modules.find(
-              module =>
-                module.path ===
-                (reference.metadata as CodeReferenceMetadata).path
-            )!.updatedAt,
-          });
-        } else if (reference.type === 'image') {
-          aggr.imageReferences.push({
-            fileName: (reference.metadata as ImageReferenceMetadata).fileName,
-            resolution: (reference.metadata as ImageReferenceMetadata)
-              .resolution,
-            src: (reference.metadata as ImageReferenceMetadata).url,
-            url: '', // Backend typing issue, need the url here
-          });
-        }
-        return aggr;
-      },
-      {
-        userReferences: [],
-        codeReferences: [],
-        imageReferences: [],
-      }
-    );
-    const baseCommentPayload = {
-      id: comment.id,
-      parentCommentId: comment.parentComment ? comment.parentComment.id : null,
-      sandboxId: sandbox.id,
-      content: comment.content || '',
-      userReferences,
-      codeReferences,
-      imageReferences,
-    };
-
-    if (comment.anchorReference) {
-      const reference = comment.anchorReference;
-
-      if (reference.type === 'code') {
-        const metadata = reference.metadata as CodeReferenceMetadata;
-        await effects.gql.mutations.createCodeComment({
-          ...baseCommentPayload,
-          anchorReference: {
-            anchor: metadata.anchor,
-            head: metadata.head,
-            code: metadata.code,
-            path: metadata.path,
-            lastUpdatedAt: state.editor.currentSandbox!.modules.find(
-              module => module.path === metadata.path
-            )!.updatedAt,
-          },
-        });
-      } else if (reference.type === 'preview') {
-        const metadata = reference.metadata as PreviewReferenceMetadata;
-        await effects.gql.mutations.createPreviewComment({
-          ...baseCommentPayload,
-          anchorReference: {
-            height: Math.round(metadata.height),
-            previewPath: metadata.previewPath,
-            userAgent: metadata.userAgent,
-            screenshotSrc: metadata.screenshotUrl || null,
-            width: Math.round(metadata.width),
-            x: Math.round(metadata.x),
-            y: Math.round(metadata.y),
-          },
-        });
-      }
-    } else {
-      await effects.gql.mutations.createComment(baseCommentPayload);
-    }
-  }
-
-  try {
-    await trySaveComment();
-  } catch (error) {
-    if (error.response?.data?.error === 'old_version' && tryCount < 3) {
-      await trySaveComment();
-    } else {
-      captureException(error);
-      effects.notificationToast.error(
-        'Unable to create your comment, please try again'
-      );
-
-      if (comment.parentComment) {
-        comments[sandbox.id][comment.parentComment.id].replyCount--;
-      }
-
-      delete comments[sandbox.id][comment.id];
-    }
-  }
-};
-
-export const deleteComment = async (
-  { state, effects }: Context,
-  {
-    commentId,
-  }: {
-    commentId: string;
-  }
-) => {
-  if (!state.editor.currentSandbox) {
-    return;
-  }
-  const sandboxId = state.editor.currentSandbox.id;
-  const comments = state.comments.comments;
-  const deletedComment = comments[sandboxId][commentId];
-  delete comments[sandboxId][commentId];
-
-  effects.analytics.track('Comments - Delete Comment');
-
-  try {
-    await effects.gql.mutations.deleteComment({
-      commentId,
-      sandboxId,
-    });
-  } catch (error) {
-    effects.notificationToast.error(
-      'Unable to delete your comment, please try again'
-    );
-    comments[sandboxId][commentId] = deletedComment;
-  }
-};
-
-export const resolveComment = async (
-  { effects, state }: Context,
-  {
-    commentId,
-    isResolved,
-  }: {
-    commentId: string;
-    isResolved: boolean;
-  }
-) => {
-  if (!state.editor.currentSandbox) {
-    return;
-  }
-
-  const comments = state.comments.comments;
-  const sandboxId = state.editor.currentSandbox.id;
-  const oldIsResolved = comments[sandboxId][commentId].isResolved;
-
-  comments[sandboxId][commentId].isResolved = isResolved;
-
-  effects.analytics.track('Comments - Resolve Comment');
-
-  try {
-    await (isResolved
-      ? effects.gql.mutations.resolveComment({
-          commentId,
-          sandboxId,
-        })
-      : effects.gql.mutations.unresolveComment({
-          commentId,
-          sandboxId,
-        }));
-  } catch (error) {
-    effects.notificationToast.error(
-      'Unable to update your comment, please try again'
-    );
-    comments[sandboxId][commentId].isResolved = oldIsResolved;
-  }
-};
-
-export const copyPermalinkToClipboard = (
-  { effects }: Context,
-  commentId: string
-) => {
-  effects.analytics.track('Comments - Copy Permalink');
-  effects.browser.copyToClipboard(effects.router.createCommentUrl(commentId));
-  effects.notificationToast.success('Comment permalink copied to clipboard');
-};
-
-export const getSandboxComments = async (
-  { state, effects, actions }: Context,
-  sandboxId: string
-) => {
-  try {
-    const { sandbox: sandboxComments } = await effects.gql.queries.comments({
-      sandboxId,
-    });
-
-    if (!sandboxComments || !sandboxComments.comments) {
-      return;
-    }
-
-    state.comments.comments[sandboxId] = sandboxComments.comments.reduce<{
-      [id: string]: CommentFragment;
-    }>((aggr, commentThread) => {
-      aggr[commentThread.id] = commentThread;
-
-      return aggr;
-    }, {});
-
-    const urlCommentId = effects.router.getCommentId();
-    if (urlCommentId) {
-      actions.workspace.setWorkspaceItem({ item: 'comments' });
-      actions.comments.selectComment({
-        commentId: urlCommentId,
-        bounds: {
-          left: effects.browser.getWidth() / 2,
-          top: 80,
-          right: effects.browser.getWidth() / 3,
-          bottom: 0,
-        },
-      });
-    }
-
-    effects.gql.subscriptions.commentAdded.dispose();
-    effects.gql.subscriptions.commentChanged.dispose();
-    effects.gql.subscriptions.commentRemoved.dispose();
-
-    effects.gql.subscriptions.commentAdded(
-      {
-        sandboxId,
-      },
-      actions.comments.onCommentAdded
-    );
-    effects.gql.subscriptions.commentChanged(
-      {
-        sandboxId,
-      },
-      actions.comments.onCommentChanged
-    );
-    effects.gql.subscriptions.commentRemoved(
-      {
-        sandboxId,
-      },
-      actions.comments.onCommentRemoved
-    );
-  } catch (e) {
-    state.comments.comments[sandboxId] = {};
-    effects.notificationToast.notice(
-      `There was a problem getting the sandbox comments`
-    );
-  }
-
-  // When we load the comments there might be changes already, lets make sure we transpose
-  // any comments on these changes. This does not fix it if you already managed to save, but
-  // that is considered an extreme edge case
-  state.editor.changedModuleShortids.forEach(moduleShortid => {
-    const module = state.editor.currentSandbox!.modules.find(
-      moduleItem => moduleItem.shortid === moduleShortid
-    );
-
-    if (!module) {
-      return;
-    }
-
-    const operation = getTextOperation(module.savedCode || '', module.code);
-    actions.comments.transposeComments({ module, operation });
-  });
-};
-
-export const onCommentAdded = (
-  { state }: Context,
-  { commentAdded: comment }: CommentAddedSubscription
-) => {
-  if (comment.anchorReference && comment.anchorReference.type === 'code') {
-    const metadata = comment.anchorReference
-      .metadata as CodeReferenceMetadataFragment;
-    const sandbox = state.editor.currentSandbox;
-    if (!sandbox) {
-      return;
-    }
-
-    const module = sandbox.modules.find(
-      moduleItem => moduleItem.path === metadata.path
-    );
-
-    if (!module) {
-      return;
-    }
-
-    // We create a diff operation which is applied to the comment to ensure
-    // any operations received in the meantime is applied
-    const diffOperation = getTextOperation(
-      module.savedCode || module.code,
-      module.code
-    );
-    const range = new Selection.Range(metadata.anchor, metadata.head);
-    const newRange = range.transform(diffOperation);
-
-    metadata.anchor = newRange.anchor;
-    metadata.head = newRange.head;
-  }
-
-  state.comments.comments[comment.sandbox.id][comment.id] = comment;
-};
-
-export const onCommentChanged = (
-  { state }: Context,
-  { commentChanged: comment }: CommentChangedSubscription
-) => {
-  Object.assign(
-    state.comments.comments[comment.sandbox.id][comment.id],
-    comment
-  );
-};
-
-export const onCommentRemoved = (
-  { state }: Context,
-  { commentRemoved: comment }: CommentRemovedSubscription
-) => {
-  delete state.comments.comments[comment.sandbox.id][comment.id];
-};
-
-export const transposeComments = (
-  { state }: Context,
-  {
-    module,
-    operation,
-  }: {
-    module: Module;
-    operation: TextOperation;
-  }
-) => {
-  const sandbox = state.editor.currentSandbox;
-  if (!sandbox) {
-    return;
-  }
-  const comments = state.comments.fileComments[module.path] || [];
-  comments.forEach(fileComment => {
-    const range = new Selection.Range(...fileComment.range);
-    const newRange = range.transform(operation);
-    const comment = state.comments.comments[sandbox.id][fileComment.commentId];
-    if (comment.anchorReference && comment.anchorReference.type === 'code') {
-      const metadata = comment.anchorReference
-        .metadata as CodeReferenceMetadataFragment;
-      metadata.anchor = newRange.anchor;
-      metadata.head = newRange.head;
-    }
-  });
-};
diff --git a/packages/app/src/app/overmind/namespaces/comments/constants.ts b/packages/app/src/app/overmind/namespaces/comments/constants.ts
deleted file mode 100644
index e69de29bb2d..00000000000
diff --git a/packages/app/src/app/overmind/namespaces/comments/index.ts b/packages/app/src/app/overmind/namespaces/comments/index.ts
deleted file mode 100644
index dd0715cd945..00000000000
--- a/packages/app/src/app/overmind/namespaces/comments/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import * as actions from './actions';
-import { state } from './state';
-
-export { state, actions };
diff --git a/packages/app/src/app/overmind/namespaces/comments/state.ts b/packages/app/src/app/overmind/namespaces/comments/state.ts
deleted file mode 100644
index fb016cd41ef..00000000000
--- a/packages/app/src/app/overmind/namespaces/comments/state.ts
+++ /dev/null
@@ -1,216 +0,0 @@
-import { CommentsFilterOption, UserQuery } from '@codesandbox/common/lib/types';
-import {
-  CodeReferenceMetadata,
-  CommentFragment,
-  CommentWithRepliesFragment,
-} from 'app/graphql/types';
-import { Context } from 'app/overmind';
-import isToday from 'date-fns/isToday';
-import { derived } from 'overmind';
-
-export const OPTIMISTIC_COMMENT_ID = 'OPTIMISTIC_COMMENT_ID';
-
-type FileComments = {
-  [path: string]: Array<{
-    commentId: string;
-    range: [number, number];
-  }>;
-};
-
-type State = {
-  comments: {
-    [sandboxId: string]: {
-      [commentId: string]: CommentFragment;
-    };
-  };
-  currentComments: CommentFragment[];
-  isQueryingUsers: boolean;
-  selectedCommentsFilter: CommentsFilterOption;
-  currentCommentId: string | null;
-  currentCommentPositions: {
-    trigger: { left: number; top: number; right: number; bottom: number };
-    dialog: { left: number; top: number; right: number; bottom: number } | null;
-  } | null;
-  currentComment: CommentWithRepliesFragment | null;
-  fileComments: FileComments;
-  usersQueryResult: UserQuery[];
-  currentCommentsByDate: {
-    today: CommentFragment[];
-    prev: CommentFragment[];
-  };
-  multiCommentsSelector: {
-    ids: string[];
-    x: number;
-    y: number;
-  } | null;
-};
-
-export const state: State = {
-  multiCommentsSelector: null,
-  isQueryingUsers: false,
-  currentCommentPositions: null,
-  usersQueryResult: [],
-  comments: {},
-  currentCommentId: null,
-  fileComments: derived(
-    ({ comments }: State, { editor: { currentSandbox } }: Context['state']) => {
-      if (!currentSandbox || !comments[currentSandbox.id]) {
-        return {};
-      }
-      const rootComments = Object.values(comments[currentSandbox.id]).filter(
-        comment => comment.parentComment == null && !comment.isResolved
-      );
-
-      return rootComments.reduce<{
-        [path: string]: Array<{
-          commentId: string;
-          range: [number, number];
-        }>;
-      }>((aggr, comment) => {
-        if (
-          comment.anchorReference &&
-          comment.anchorReference.type === 'code'
-        ) {
-          const metadata = comment.anchorReference
-            .metadata as CodeReferenceMetadata;
-          if (!aggr[metadata.path]) {
-            aggr[metadata.path] = [];
-          }
-          aggr[metadata.path].push({
-            commentId: comment.id,
-            range: [metadata.anchor, metadata.head],
-          });
-        }
-
-        return aggr;
-      }, {});
-    }
-  ),
-  currentComment: derived(
-    (
-      { comments, currentCommentId }: State,
-      { editor: { currentSandbox } }: Context['state']
-    ) => {
-      if (
-        !currentSandbox ||
-        !comments[currentSandbox.id] ||
-        !currentCommentId
-      ) {
-        return null;
-      }
-
-      function sortByInsertedAt(
-        commentA: CommentFragment | null,
-        commentB: CommentFragment | null
-      ) {
-        if (!commentA || !commentB) {
-          return 0;
-        }
-
-        const aDate = new Date(commentA.insertedAt);
-        const bDate = new Date(commentB.insertedAt);
-
-        if (aDate > bDate) {
-          return 1;
-        }
-
-        if (bDate < aDate) {
-          return -1;
-        }
-
-        return 0;
-      }
-
-      if (!comments[currentSandbox.id][currentCommentId]) {
-        return null;
-      }
-
-      return {
-        ...comments[currentSandbox.id][currentCommentId],
-        comments: Object.keys(comments[currentSandbox.id])
-          .reduce<CommentFragment[]>((aggr, commentId) => {
-            if (
-              comments[currentSandbox.id][commentId].parentComment?.id ===
-              currentCommentId
-            ) {
-              return aggr.concat(comments[currentSandbox.id][commentId]);
-            }
-
-            return aggr;
-          }, [])
-          .sort(sortByInsertedAt),
-      };
-    }
-  ),
-  selectedCommentsFilter: CommentsFilterOption.OPEN,
-  currentComments: derived(
-    (
-      { comments, selectedCommentsFilter }: State,
-      { editor: { currentSandbox } }: Context['state']
-    ) => {
-      if (!currentSandbox || !comments[currentSandbox.id]) {
-        return [];
-      }
-
-      function sortByInsertedAt(
-        commentA: CommentFragment,
-        commentB: CommentFragment
-      ) {
-        const aDate = new Date(commentA.insertedAt);
-        const bDate = new Date(commentB.insertedAt);
-
-        if (aDate > bDate) {
-          return -1;
-        }
-
-        if (bDate < aDate) {
-          return 1;
-        }
-
-        return 0;
-      }
-
-      const rootComments = Object.values(comments[currentSandbox.id]).filter(
-        comment =>
-          comment.parentComment == null && comment.id !== OPTIMISTIC_COMMENT_ID
-      );
-      switch (selectedCommentsFilter) {
-        case CommentsFilterOption.ALL:
-          return rootComments.sort(sortByInsertedAt);
-        case CommentsFilterOption.RESOLVED:
-          return rootComments
-            .filter(comment => comment.isResolved)
-            .sort(sortByInsertedAt);
-        case CommentsFilterOption.OPEN:
-          return rootComments
-            .filter(comment => !comment.isResolved)
-            .sort(sortByInsertedAt);
-        default:
-          return [];
-      }
-    }
-  ),
-  currentCommentsByDate: derived(({ currentComments }: State) =>
-    currentComments.reduce<{
-      today: CommentFragment[];
-      prev: CommentFragment[];
-    }>(
-      (acc, comment) => {
-        if (
-          isToday(new Date(comment.insertedAt)) ||
-          isToday(new Date(comment.updatedAt))
-        ) {
-          acc.today.push(comment);
-        } else {
-          acc.prev.push(comment);
-        }
-
-        return acc;
-      },
-      {
-        today: [],
-        prev: [],
-      }
-    )
-  ),
-};
diff --git a/packages/app/src/app/overmind/namespaces/dashboard/actions.ts b/packages/app/src/app/overmind/namespaces/dashboard/actions.ts
index 0412ea6e748..83013d19dd5 100755
--- a/packages/app/src/app/overmind/namespaces/dashboard/actions.ts
+++ b/packages/app/src/app/overmind/namespaces/dashboard/actions.ts
@@ -9,7 +9,13 @@ import {
   RepoFragmentDashboardFragment,
   ProjectFragment,
 } from 'app/graphql/types';
-import { v2BranchUrl } from '@codesandbox/common/lib/utils/url-generator';
+import {
+  sandboxUrl,
+  v2BranchUrl,
+  vsCodeLauncherUrl,
+  vsCodeUrl,
+} from '@codesandbox/common/lib/utils/url-generator';
+import { ForkSandboxBody } from '@codesandbox/common/lib/types';
 import { notificationState } from '@codesandbox/common/lib/utils/notifications';
 import { NotificationStatus } from '@codesandbox/notifications';
 import { PrivacyLevel } from 'app/components/Create/utils/types';
@@ -1719,3 +1725,84 @@ export const convertToDevbox = async (
   // Re-fetch team to get updated usage data
   actions.getActiveTeamInfo();
 };
+
+export const forkSandbox = async (
+  { effects, state, actions }: Context,
+  {
+    sandboxId,
+    openInNewWindow,
+    openInVSCode,
+    autoLaunchVSCode,
+    customVMTier,
+    body,
+    redirectAfterFork,
+  }: {
+    sandboxId: string;
+    openInNewWindow?: boolean;
+    openInVSCode?: boolean;
+    autoLaunchVSCode?: boolean;
+    customVMTier?: number;
+    redirectAfterFork?: boolean;
+    body?: {
+      collectionId?: string;
+      alias?: string;
+      v2?: boolean;
+      title?: string;
+      privacy?: 0 | 1 | 2;
+    };
+  }
+) => {
+  effects.analytics.track('Fork Sandbox', { type: 'external', sandboxId });
+
+  const usedBody: ForkSandboxBody = body || {};
+
+  if (state.activeTeam) {
+    usedBody.teamId = state.activeTeam;
+  }
+
+  try {
+    const forkedSandbox = await effects.api.forkSandbox(sandboxId, usedBody);
+
+    if (customVMTier) {
+      await effects.api.setVMSpecs(forkedSandbox.id, customVMTier);
+    }
+
+    if (openInVSCode) {
+      if (autoLaunchVSCode) {
+        window.open(vsCodeUrl(forkedSandbox.id));
+      } else {
+        window.open(vsCodeLauncherUrl(forkedSandbox.id));
+      }
+    }
+
+    if (redirectAfterFork) {
+      const url = sandboxUrl({ id: forkedSandbox.id, isV2: forkedSandbox.v2 });
+
+      if (openInNewWindow) {
+        window.open(url, '_blank');
+      } else {
+        window.location.href = url;
+      }
+    }
+
+    return forkedSandbox;
+  } catch (error) {
+    const errorMessage = actions.internal.getErrorMessage({ error });
+
+    if (errorMessage.includes('DRAFT_LIMIT')) {
+      effects.notificationToast.add({
+        title: 'Cannot create draft',
+        message:
+          'Your drafts folder is full. Delete unneeded drafts, or upgrade to Pro for unlimited drafts.',
+        status: NotificationStatus.ERROR,
+      });
+    } else {
+      actions.internal.handleError({
+        message: 'We were unable to fork the sandbox',
+        error,
+      });
+    }
+  }
+
+  return undefined;
+};
diff --git a/packages/app/src/app/overmind/namespaces/deployment/actions.ts b/packages/app/src/app/overmind/namespaces/deployment/actions.ts
deleted file mode 100755
index ed03a0753b2..00000000000
--- a/packages/app/src/app/overmind/namespaces/deployment/actions.ts
+++ /dev/null
@@ -1,296 +0,0 @@
-import { Context } from 'app/overmind';
-import { AxiosError } from 'axios';
-import { get } from 'lodash-es';
-
-import * as internalActions from './internalActions';
-
-export const internal = internalActions;
-
-const getVercelErrorMessage = (error: AxiosError) =>
-  get(
-    error,
-    'response.data.error.message',
-    'An unknown error occurred when connecting to Vercel'
-  );
-
-export const deployWithNetlify = async ({
-  effects,
-  actions,
-  state,
-}: Context) => {
-  const sandbox = state.editor.currentSandbox;
-
-  if (!sandbox) {
-    return;
-  }
-
-  state.deployment.deploying = true;
-
-  try {
-    const id = await effects.netlify.deploy(sandbox);
-    state.deployment.deploying = false;
-
-    await actions.deployment.getNetlifyDeploys();
-
-    state.deployment.building = true;
-    await effects.netlify.getLogs(id);
-    effects.notificationToast.success('Sandbox Deploying');
-  } catch (error) {
-    actions.internal.handleError({
-      message: 'An error occurred when deploying your Netlify site',
-      error,
-    });
-  }
-  state.deployment.deploying = false;
-  state.deployment.building = false;
-};
-
-export const getNetlifyDeploys = async ({ state, effects }: Context) => {
-  const sandbox = state.editor.currentSandbox;
-  if (!sandbox) {
-    return;
-  }
-
-  try {
-    state.deployment.netlify.claimUrl = await effects.netlify.claimSite(
-      sandbox.id
-    );
-    state.deployment.netlify.site = await effects.netlify.getDeployments(
-      sandbox.id
-    );
-  } catch (error) {
-    state.deployment.netlify.site = null;
-  }
-};
-
-export const getDeploys = async ({ state, actions, effects }: Context) => {
-  if (
-    !state.user ||
-    !state.user.integrations.vercel ||
-    !state.editor.currentSandbox
-  ) {
-    return;
-  }
-
-  state.deployment.vercel.gettingDeploys = true;
-
-  try {
-    const vercelConfig = effects.vercel.getConfig(state.editor.currentSandbox);
-
-    if (vercelConfig.name) {
-      state.deployment.vercel.deploys = await effects.vercel.getDeployments(
-        vercelConfig.name
-      );
-    }
-  } catch (error) {
-    actions.internal.handleError({
-      message: getVercelErrorMessage(error),
-      error,
-    });
-  }
-
-  state.deployment.vercel.gettingDeploys = false;
-};
-
-export const deployPreviewClicked = async ({
-  state,
-  effects,
-  actions,
-}: Context) => {
-  const sandbox = state.editor.currentSandbox;
-
-  if (!sandbox) {
-    return;
-  }
-
-  try {
-    state.deployment.deploying = true;
-    const zip = await effects.zip.create(sandbox);
-    const contents = await effects.jsZip.loadAsync(zip.file);
-
-    if (sandbox.isSse && state.editor.currentSandbox) {
-      const envs = await effects.api.getEnvironmentVariables(
-        state.editor.currentSandbox.id
-      );
-      if (envs) {
-        await effects.vercel.checkEnvironmentVariables(sandbox, envs);
-      }
-    }
-
-    state.deployment.vercel.url = await effects.vercel.deploy(
-      contents,
-      sandbox
-    );
-  } catch (error) {
-    actions.internal.handleError({
-      message: getVercelErrorMessage(error),
-      error,
-    });
-  }
-
-  state.deployment.deploying = false;
-
-  actions.deployment.getDeploys();
-};
-export const deployProductionClicked = async ({
-  state,
-  effects,
-  actions,
-}: Context) => {
-  const sandbox = state.editor.currentSandbox;
-
-  if (!sandbox) {
-    return;
-  }
-
-  try {
-    state.deployment.deploying = true;
-    const zip = await effects.zip.create(sandbox);
-    const contents = await effects.jsZip.loadAsync(zip.file);
-
-    if (sandbox.isSse && state.editor.currentSandbox) {
-      const envs = await effects.api.getEnvironmentVariables(
-        state.editor.currentSandbox.id
-      );
-      if (envs) {
-        await effects.vercel.checkEnvironmentVariables(sandbox, envs);
-      }
-    }
-
-    state.deployment.vercel.url = await effects.vercel.deploy(
-      contents,
-      sandbox,
-      'production'
-    );
-  } catch (error) {
-    actions.internal.handleError({
-      message: getVercelErrorMessage(error),
-      error,
-    });
-  }
-
-  state.deployment.deploying = false;
-
-  actions.deployment.getDeploys();
-};
-
-export const deploySandboxClicked = async ({
-  actions,
-  effects,
-  state,
-}: Context) => {
-  state.currentModal = 'deployment';
-
-  const vercelIntegration = state.user && state.user.integrations.vercel;
-
-  if (!vercelIntegration || !vercelIntegration.token) {
-    effects.notificationToast.error(
-      'You are not authorized with Vercel, please refresh and log in again'
-    );
-    return;
-  }
-
-  if (!vercelIntegration.email) {
-    try {
-      const user = await effects.vercel.getUser();
-
-      if (state.user && state.user.integrations.vercel) {
-        state.user.integrations.vercel.email = user.email;
-      }
-    } catch (error) {
-      actions.internal.handleError({
-        message:
-          'We were not able to fetch your Vercel user details. You should still be able to deploy to Vercel, please try again if needed.',
-        error,
-      });
-    }
-  }
-
-  state.deployment.vercel.url = null;
-};
-
-export const setDeploymentToDelete = ({ state }: Context, id: string) => {
-  state.deployment.vercel.deployToDelete = id;
-};
-
-export const deleteDeployment = async ({
-  state,
-  effects,
-  actions,
-}: Context) => {
-  const id = state.deployment.vercel.deployToDelete;
-
-  if (!id) {
-    return;
-  }
-
-  state.currentModal = null;
-  state.deployment.vercel.deploysBeingDeleted.push(id);
-
-  try {
-    await effects.vercel.deleteDeployment(id);
-
-    effects.notificationToast.success('Deployment deleted');
-    actions.deployment.getDeploys();
-  } catch (error) {
-    actions.internal.handleError({
-      message: 'An unknown error occurred when deleting your deployment',
-      error,
-    });
-  }
-
-  state.deployment.vercel.deploysBeingDeleted.splice(
-    state.deployment.vercel.deploysBeingDeleted.indexOf(id),
-    1
-  );
-};
-
-export const deployWithGitHubPages = async ({
-  effects,
-  actions,
-  state,
-}: Context) => {
-  const sandbox = state.editor.currentSandbox;
-
-  if (!sandbox) {
-    return;
-  }
-
-  state.deployment.deploying = true;
-
-  try {
-    await effects.githubPages.deploy(
-      sandbox,
-      state.deployment.githubSite.ghLogin
-    );
-    state.deployment.deploying = false;
-
-    state.deployment.building = true;
-    await effects.githubPages.getLogs(sandbox.id);
-    state.deployment.githubSite.ghPages = true;
-    effects.notificationToast.success('Sandbox Deploying');
-  } catch (error) {
-    actions.internal.handleError({
-      message: 'An error occurred when deploying your sandbox to GitHub Pages',
-      error,
-    });
-  }
-  state.deployment.deploying = false;
-  state.deployment.building = false;
-};
-
-export const fetchGithubSite = async ({ effects, state }: Context) => {
-  const sandbox = state.editor.currentSandbox;
-  if (!sandbox) {
-    return;
-  }
-  try {
-    const site = await effects.githubPages.getSite(sandbox.id);
-    state.deployment.githubSite = {
-      ...site,
-      name: `csb-${sandbox.id}`,
-    };
-  } catch {
-    state.deployment.githubSite.name = `csb-${sandbox.id}`;
-  }
-};
diff --git a/packages/app/src/app/overmind/namespaces/deployment/index.ts b/packages/app/src/app/overmind/namespaces/deployment/index.ts
deleted file mode 100755
index 0d573be52de..00000000000
--- a/packages/app/src/app/overmind/namespaces/deployment/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { state } from './state';
-import * as actions from './actions';
-
-export { state, actions };
diff --git a/packages/app/src/app/overmind/namespaces/deployment/internalActions.ts b/packages/app/src/app/overmind/namespaces/deployment/internalActions.ts
deleted file mode 100755
index db2d2107cd4..00000000000
--- a/packages/app/src/app/overmind/namespaces/deployment/internalActions.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { Context } from 'app/overmind';
-
-export const getVercelUserDetails = async ({
-  state,
-  actions,
-  effects,
-}: Context) => {
-  if (
-    state.user &&
-    state.user.integrations.vercel &&
-    state.user.integrations.vercel.token &&
-    !state.user.integrations.vercel.email
-  ) {
-    state.isLoadingVercel = true;
-    try {
-      const vercelDetails = await effects.vercel.getUser();
-      state.user.integrations.vercel.email = vercelDetails.email;
-    } catch (error) {
-      actions.internal.handleError({
-        message:
-          'We were not able to fetch your Vercel user details. You should still be able to deploy to Vercel, please try again if needed.',
-        error,
-      });
-    }
-    state.isLoadingVercel = false;
-  }
-};
diff --git a/packages/app/src/app/overmind/namespaces/deployment/state.ts b/packages/app/src/app/overmind/namespaces/deployment/state.ts
deleted file mode 100755
index 10b88c9a486..00000000000
--- a/packages/app/src/app/overmind/namespaces/deployment/state.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { NetlifySite, VercelDeployment } from '@codesandbox/common/lib/types';
-
-type State = {
-  deploying: boolean;
-  building: boolean;
-  vercel: {
-    gettingDeploys: boolean;
-    deploys: VercelDeployment[];
-    deploysBeingDeleted: string[];
-    deployToDelete: string | null;
-    url: string | null;
-  };
-  netlify: {
-    claimUrl: string | null;
-    site: NetlifySite | null;
-  };
-  githubSite: {
-    ghLogin: string;
-    ghPages: boolean;
-    name: string;
-  };
-};
-
-export const state: State = {
-  deploying: false,
-  building: false,
-  vercel: {
-    deploys: [],
-    deploysBeingDeleted: [],
-    deployToDelete: null,
-    url: null,
-    gettingDeploys: true,
-  },
-  netlify: {
-    claimUrl: null,
-    site: null,
-  },
-  githubSite: {
-    name: '',
-    ghLogin: '',
-    ghPages: false,
-  },
-};
diff --git a/packages/app/src/app/overmind/namespaces/editor/actions.ts b/packages/app/src/app/overmind/namespaces/editor/actions.ts
deleted file mode 100755
index 990bf3a3336..00000000000
--- a/packages/app/src/app/overmind/namespaces/editor/actions.ts
+++ /dev/null
@@ -1,1957 +0,0 @@
-import { resolveModule } from '@codesandbox/common/lib/sandbox/modules';
-import getTemplate from '@codesandbox/common/lib/templates';
-import {
-  EnvironmentVariable,
-  Module,
-  ModuleCorrection,
-  ModuleError,
-  ModuleTab,
-  UserSelection,
-  WindowOrientation,
-  ForkSandboxBody,
-} from '@codesandbox/common/lib/types';
-import {
-  captureException,
-  logBreadcrumb,
-} from '@codesandbox/common/lib/utils/analytics/sentry';
-import { isAbsoluteVersion } from '@codesandbox/common/lib/utils/dependencies';
-import { getTextOperation } from '@codesandbox/common/lib/utils/diff';
-import { convertTypeToStatus } from '@codesandbox/common/lib/utils/notifications';
-import { hasPermission } from '@codesandbox/common/lib/utils/permission';
-import {
-  sandboxUrl,
-  signInPageUrl,
-  docsUrl,
-  vsCodeUrl,
-  vsCodeLauncherUrl,
-} from '@codesandbox/common/lib/utils/url-generator';
-import { NotificationStatus } from '@codesandbox/notifications';
-import {
-  Authorization,
-  CollaboratorFragment,
-  InvitationFragment,
-} from 'app/graphql/types';
-import { Context } from 'app/overmind';
-import { withLoadApp, withOwnedSandbox } from 'app/overmind/factories';
-import { getSavedCode } from 'app/overmind/utils/sandbox';
-import {
-  addDevToolsTab as addDevToolsTabUtil,
-  closeDevToolsTab as closeDevToolsTabUtil,
-  moveDevToolsTab as moveDevToolsTabUtil,
-} from 'app/pages/Sandbox/Editor/Content/utils';
-import { convertAuthorizationToPermissionType } from 'app/utils/authorization';
-import { clearCorrectionsFromAction } from 'app/utils/corrections';
-import history from 'app/utils/history';
-import { isPrivateScope } from 'app/utils/private-registry';
-import { debounce } from 'lodash-es';
-import { TextOperation } from 'ot';
-import { json } from 'overmind';
-
-import eventToTransform from '../../utils/event-to-transform';
-import { SERVER } from '../../utils/items';
-import * as internalActions from './internalActions';
-
-export const internal = internalActions;
-
-export const onNavigateAway = () => {};
-
-export const persistCursorToUrl = debounce(
-  (
-    { effects }: Context,
-    {
-      module,
-      selection,
-    }: {
-      module: Module;
-      selection?: UserSelection;
-    }
-  ) => {
-    let parameter = module.path;
-
-    if (!parameter) {
-      return;
-    }
-
-    if (selection?.primary?.selection?.length) {
-      const [head, anchor] = selection.primary.selection;
-      const serializedSelection = head + '-' + anchor;
-      parameter += `:${serializedSelection}`;
-    }
-
-    const newUrl = new URL(document.location.href);
-    newUrl.searchParams.set('file', parameter);
-
-    // Restore the URI encoded parts to their original values. Our server handles this well
-    // and all the browsers do too.
-    if (newUrl) {
-      effects.router.replace(
-        newUrl.toString().replace(/%2F/g, '/').replace('%3A', ':')
-      );
-    }
-  },
-  500
-);
-
-export const loadCursorFromUrl = async ({
-  effects,
-  actions,
-  state,
-}: Context) => {
-  if (!state.editor.currentSandbox) {
-    return;
-  }
-
-  const parameter = effects.router.getParameter('file');
-  if (!parameter) {
-    return;
-  }
-  const [path, selection] = parameter.split(':');
-
-  const module = state.editor.currentSandbox.modules.find(m => m.path === path);
-  if (!module) {
-    return;
-  }
-
-  await actions.editor.moduleSelected({ id: module.id });
-
-  if (!selection) {
-    return;
-  }
-
-  const [parsedHead, parsedAnchor] = selection.split('-').map(Number);
-  if (!isNaN(parsedHead) && !isNaN(parsedAnchor)) {
-    effects.vscode.setSelection(parsedHead, parsedAnchor);
-  }
-};
-
-export const refreshPreview = ({ effects }: Context) => {
-  effects.preview.refresh();
-};
-
-export const addNpmDependency = withOwnedSandbox(
-  async (
-    { actions, effects, state }: Context,
-    {
-      name,
-      version,
-      isDev,
-    }: {
-      name: string;
-      version?: string;
-      isDev?: boolean;
-    }
-  ) => {
-    const currentSandbox = state.editor.currentSandbox;
-    const isPrivatePackage =
-      currentSandbox && isPrivateScope(currentSandbox, name);
-
-    effects.analytics.track('Add NPM Dependency', {
-      private: isPrivatePackage,
-    });
-    state.currentModal = null;
-    let newVersion = version || 'latest';
-
-    if (!isAbsoluteVersion(newVersion)) {
-      if (isPrivatePackage && currentSandbox) {
-        try {
-          const manifest = await effects.api.getDependencyManifest(
-            currentSandbox.id,
-            name
-          );
-          const distTags = manifest['dist-tags'];
-          const absoluteVersion = distTags ? distTags[newVersion] : null;
-
-          if (absoluteVersion) {
-            newVersion = absoluteVersion;
-          }
-        } catch (e) {
-          if (currentSandbox.privacy !== 2) {
-            effects.notificationToast.add({
-              status: NotificationStatus.ERROR,
-              title: 'There was a problem adding the private package',
-              message:
-                'Private packages can only be added to private sandboxes',
-              actions: {
-                primary: {
-                  label: 'Make Sandbox Private',
-                  run: async () => {
-                    await actions.workspace.sandboxPrivacyChanged({
-                      privacy: 2,
-                      source: 'Private Package Notification',
-                    });
-                    actions.editor.addNpmDependency({ name, version });
-                  },
-                },
-                secondary: {
-                  label: 'Learn More',
-                  run: () => {
-                    effects.browser.openWindow(
-                      docsUrl('/learn/sandboxes/custom-npm-registry')
-                    );
-                  },
-                },
-              },
-            });
-          } else {
-            captureException(e);
-            actions.internal.handleError({
-              error: e,
-              message: 'There was a problem adding the private package',
-            });
-          }
-          return;
-        }
-      } else {
-        const dependency = await effects.api.getDependency(name, newVersion);
-        newVersion = dependency.version;
-      }
-    }
-
-    await actions.editor.internal.addNpmDependencyToPackageJson({
-      name,
-      version: newVersion,
-      isDev: Boolean(isDev),
-    });
-
-    actions.workspace.changeDependencySearch('');
-    actions.workspace.clearExplorerDependencies();
-
-    effects.preview.executeCodeImmediately();
-  }
-);
-
-export const npmDependencyRemoved = withOwnedSandbox(
-  async ({ actions, effects }: Context, name: string) => {
-    effects.analytics.track('Remove NPM Dependency');
-
-    await actions.editor.internal.removeNpmDependencyFromPackageJson(name);
-
-    effects.preview.executeCodeImmediately();
-  }
-);
-
-export const sandboxChanged = withLoadApp<{
-  id: string;
-  hasBetaEditorExperiment: boolean;
-}>(
-  async (
-    { state, actions, effects }: Context,
-    { id, hasBetaEditorExperiment }
-  ) => {
-    // This happens when we fork. This can be avoided with state first routing
-    if (state.editor.isForkingSandbox && state.editor.currentSandbox) {
-      if (state.editor.currentModule.id) {
-        effects.vscode.openModule(state.editor.currentModule);
-      }
-
-      await actions.editor.internal.initializeSandbox(
-        state.editor.currentSandbox
-      );
-
-      actions.git.loadGitSource();
-
-      state.editor.isForkingSandbox = false;
-      return;
-    }
-
-    await effects.vscode.closeAllTabs();
-
-    state.editor.error = null;
-    state.git.sourceSandboxId = null;
-
-    let newId = id;
-
-    newId = actions.editor.internal.ensureSandboxId(newId);
-
-    effects.browser.storage.set('currentSandboxId', newId);
-
-    const hasExistingSandbox = Boolean(state.editor.currentId);
-
-    if (state.live.isLive) {
-      actions.live.internal.disconnect();
-    }
-
-    state.editor.isLoading = !hasExistingSandbox;
-
-    const url = new URL(document.location.href);
-    const invitationToken = url.searchParams.get('ts');
-
-    if (invitationToken) {
-      // This user came here with an invitation token, which can be sent to the email to make
-      // the user a collaborator
-      if (!state.hasLogIn) {
-        // Redirect to sign in URL, which then redirects back to this after
-        history.push(signInPageUrl(document.location.href));
-        return;
-      }
-
-      try {
-        await effects.gql.mutations.redeemSandboxInvitation({
-          sandboxId: newId,
-          invitationToken,
-        });
-
-        // Timeout to prevent that we load the whole sandbox twice at the same time
-        setTimeout(() => {
-          // Remove the invite from the url
-          url.searchParams.delete('ts');
-          history.replace(url.pathname);
-        }, 3000);
-      } catch (error) {
-        if (
-          !error.message.includes('Cannot redeem token, invitation not found')
-        ) {
-          actions.internal.handleError({
-            error,
-            message: 'Something went wrong with redeeming invitation token',
-          });
-        }
-      }
-    }
-
-    try {
-      const params = state.activeTeam
-        ? { teamId: state.activeTeam }
-        : undefined;
-      const sandbox = await effects.api.getSandbox(newId, params);
-
-      // Failsafe, in case someone types in the URL to load a v2 sandbox in v1
-      // or if they have the experimental v2 editor enabled
-      if (sandbox.v2 || (!sandbox.isSse && hasBetaEditorExperiment)) {
-        // Only pass githubInfo for the URL if the URL in v1 is based on GH
-        const githubInfoForURL =
-          sandbox.git && url.pathname.startsWith('/s/github')
-            ? sandbox.git
-            : undefined;
-
-        const sandboxV2Url = sandboxUrl(
-          {
-            id: sandbox.id,
-            alias: sandbox.alias,
-            git: githubInfoForURL,
-            isV2: sandbox.v2,
-            isSse: sandbox.isSse,
-            query: url.searchParams,
-          },
-          hasBetaEditorExperiment
-        );
-
-        window.location.href = sandboxV2Url;
-      }
-
-      actions.internal.setCurrentSandbox(sandbox);
-    } catch (error) {
-      const data = error.response?.data;
-      const errors = data?.errors;
-      let detail = errors?.detail;
-
-      if (Array.isArray(detail)) {
-        detail = detail[0];
-      } else if (typeof errors === 'object') {
-        detail = errors[Object.keys(errors)[0]];
-      } else if (data?.error) {
-        detail = data?.error;
-      }
-
-      state.editor.error = {
-        message: detail || error.message,
-        status: error.response.status,
-      };
-
-      state.editor.isLoading = false;
-
-      return;
-    }
-
-    const sandbox = state.editor.currentSandbox!;
-
-    await effects.vscode.changeSandbox(sandbox, fs => {
-      state.editor.modulesByPath = fs;
-    });
-
-    if (sandbox.featureFlags?.containerLsp && !sandbox.owned) {
-      effects.vscode.setReadOnly(true);
-      effects.notificationToast.add({
-        message:
-          'This Sandbox is running an experiment. You have to fork it before you can make any changes',
-        title: 'Experimental Sandbox',
-        status: convertTypeToStatus('notice'),
-        sticky: true,
-        actions: {
-          primary: {
-            label: 'Fork',
-            run: () => {
-              actions.editor.forkSandboxClicked({});
-            },
-          },
-        },
-      });
-    }
-
-    await actions.editor.internal.initializeSandbox(sandbox);
-
-    // We only recover files at this point if we are not live. When live we recover them
-    // when the module_state is received
-    if (
-      !state.live.isLive &&
-      hasPermission(sandbox.authorization, 'write_code')
-    ) {
-      actions.files.internal.recoverFiles();
-    }
-
-    if (state.editor.currentModule.id) {
-      effects.vscode.openModule(state.editor.currentModule);
-    } else {
-      // This means that there is no current module. Normally we tell that the editor has loaded
-      // when the module has loaded (for the skeleton), but in this case we will never load a module.
-      // So we need to explicitly mark that the module has been loaded instead.
-      state.editor.hasLoadedInitialModule = true;
-    }
-    try {
-      await actions.editor.loadCursorFromUrl();
-    } catch (e) {
-      /**
-       * This is not extremely important logic, if it breaks (which is possible because of user input)
-       * we don't want to crash the whole editor. That's why we try...catch this.
-       */
-    }
-
-    if (
-      sandbox.featureFlags.comments &&
-      hasPermission(sandbox.authorization, 'comment')
-    ) {
-      actions.comments.getSandboxComments(sandbox.id);
-    }
-
-    actions.git.loadGitSource();
-
-    state.editor.isLoading = false;
-  }
-);
-
-export const contentMounted = ({ state, effects }: Context) => {
-  effects.browser.onUnload(event => {
-    if (!state.editor.isAllModulesSynced && !state.editor.isForkingSandbox) {
-      const returnMessage =
-        'You have not saved all your modules, are you sure you want to close this tab?';
-
-      event.returnValue = returnMessage; // eslint-disable-line
-
-      return returnMessage;
-    }
-
-    return null;
-  });
-};
-
-export const resizingStarted = ({ state }: Context) => {
-  state.editor.isResizing = true;
-};
-
-export const resizingStopped = ({ state }: Context) => {
-  state.editor.isResizing = false;
-};
-
-export const codeSaved = withOwnedSandbox(
-  async (
-    { state, actions }: Context,
-    {
-      code,
-      moduleShortid,
-      cbID,
-    }: {
-      code: string;
-      moduleShortid: string;
-      cbID: string | null;
-    }
-  ) => {
-    actions.editor.internal.saveCode({
-      code,
-      moduleShortid,
-      cbID,
-    });
-  },
-  async ({ effects }, { cbID }) => {
-    if (cbID) {
-      effects.vscode.callCallbackError(cbID);
-    }
-  },
-  'write_code'
-);
-
-export const onOperationApplied = (
-  { state, effects, actions }: Context,
-  {
-    code,
-    moduleShortid,
-    operation,
-  }: {
-    moduleShortid: string;
-    operation: TextOperation;
-    code: string;
-  }
-) => {
-  if (!state.editor.currentSandbox) {
-    return;
-  }
-
-  const module = state.editor.currentSandbox.modules.find(
-    m => m.shortid === moduleShortid
-  );
-
-  if (!module) {
-    return;
-  }
-
-  actions.comments.transposeComments({ module, operation });
-
-  actions.editor.internal.updateModuleCode({
-    module,
-    code,
-  });
-
-  if (state.preferences.settings.livePreviewEnabled) {
-    actions.editor.internal.updatePreviewCode();
-  }
-
-  // If we are in a state of sync, we set "revertModule" to set it as saved
-  if (module.savedCode !== null && module.code === module.savedCode) {
-    effects.vscode.syncModule(module);
-  }
-
-  if (state.editor.currentSandbox.originalGit) {
-    actions.git.updateGitChanges();
-  }
-};
-
-/**
- * Set the code of the module and send it if live is turned on. Keep in mind that this overwrites the editor state,
- * which means that if the user was typing something else in the file, it will get overwritten(!).
- *
- * There is some extra logic to handle files that are opened and not opened. If the file is opened we will set the code
- * within VSCode and let the event that VSCode generates handle the rest, however, if the file is not opened in VSCode,
- * we'll just update it in the state and send a live message based on the diff.
- *
- * The difference between `setCode` and `codeChanged` is small but important to keep in mind. Calling this method will *always*
- * cause `codeChanged` to be called. But from different sources based on whether the file is currently open. I'd recommend to always
- * call this function if you're aiming to manually set code (like updating package.json), while editors shouild call codeChanged.
- *
- * The two cases:
- *
- * ### Already opened in VSCode
- *  1. set code in VSCode
- *  2. which generates an event
- *  3. which triggers codeChanged
- *
- * ### Not opened in VSCode
- *  1. codeChanged called directly
- */
-export const setCode = (
-  { effects, state, actions }: Context,
-  {
-    code,
-    moduleShortid,
-  }: {
-    moduleShortid: string;
-    code: string;
-  }
-) => {
-  if (!state.editor.currentSandbox) {
-    return;
-  }
-
-  const module = state.editor.currentSandbox.modules.find(
-    m => m.shortid === moduleShortid
-  );
-
-  if (!module) {
-    return;
-  }
-
-  // If the code is opened in VSCode, change the code in VSCode and let
-  // other clients know via the event triggered by VSCode. Otherwise
-  // send a manual event and just change the state.
-  if (effects.vscode.isModuleOpened(module)) {
-    effects.vscode.setModuleCode({ ...module, code }, true);
-  } else {
-    actions.editor.codeChanged({ moduleShortid, code });
-  }
-};
-
-export const codeChanged = (
-  { effects, state, actions }: Context,
-  {
-    code,
-    event,
-    moduleShortid,
-  }: {
-    moduleShortid: string;
-    code: string;
-    event?: any;
-  }
-) => {
-  effects.analytics.trackWithCooldown('Change Code', 30 * 1000);
-
-  if (!state.editor.currentSandbox) {
-    return;
-  }
-
-  const module = state.editor.currentSandbox.modules.find(
-    m => m.shortid === moduleShortid
-  );
-
-  if (!module) {
-    return;
-  }
-
-  const savedCode = getSavedCode(module.code, module.savedCode);
-  const isSavedCode = savedCode === code;
-  const isFirstChange =
-    !effects.live.hasClient(module.shortid) ||
-    (effects.live.getClient(moduleShortid).revision === 0 &&
-      effects.live.getClient(moduleShortid).state.name === 'Synchronized');
-
-  // Don't send saved code of a moduke that has not been registered with yet, since the server
-  // will take the saved code as base. Which means that the change that would generate the saved code
-  // would be applied on the saved code by the server.
-  if (state.live.isLive && !(isSavedCode && isFirstChange)) {
-    let operation: TextOperation;
-    if (event) {
-      logBreadcrumb({
-        category: 'ot',
-        message: `Change Event ${JSON.stringify({
-          moduleShortid: module.shortid,
-          event,
-        })}`,
-      });
-      operation = eventToTransform(event, module.code).operation;
-    } else {
-      operation = getTextOperation(module.code, code);
-    }
-
-    effects.live.sendCodeUpdate(moduleShortid, operation);
-
-    actions.comments.transposeComments({ module, operation });
-  }
-
-  actions.editor.internal.updateModuleCode({
-    module,
-    code,
-  });
-
-  if (module.savedCode !== null && module.code === module.savedCode) {
-    effects.vscode.syncModule(module);
-  }
-
-  const { isServer } = getTemplate(state.editor.currentSandbox.template);
-
-  if (!isServer && state.preferences.settings.livePreviewEnabled) {
-    actions.editor.internal.updatePreviewCode();
-  }
-
-  if (state.editor.currentSandbox.originalGit) {
-    actions.git.updateGitChanges();
-    actions.git.resolveConflicts(module);
-  }
-};
-
-export const saveClicked = withOwnedSandbox(
-  async ({ state, effects, actions }: Context) => {
-    const sandbox = state.editor.currentSandbox;
-
-    if (!sandbox) {
-      return;
-    }
-
-    try {
-      const changedModules = sandbox.modules.filter(module =>
-        state.editor.changedModuleShortids.includes(module.shortid)
-      );
-
-      if (sandbox.featureFlags.comments) {
-        const versions = await Promise.all(
-          changedModules.map(module =>
-            effects.live
-              .saveModule(module)
-              .then(({ saved_code, updated_at, inserted_at, version }) => {
-                module.savedCode = saved_code;
-                module.updatedAt = updated_at;
-                module.insertedAt = inserted_at;
-
-                return version;
-              })
-          )
-        );
-        sandbox.version = Math.max(...versions);
-      } else {
-        const updatedModules = await effects.api.saveModules(
-          sandbox.id,
-          changedModules
-        );
-
-        updatedModules.forEach(updatedModule => {
-          const module = sandbox.modules.find(
-            moduleItem => moduleItem.shortid === updatedModule.shortid
-          );
-
-          if (module) {
-            module.insertedAt = updatedModule.insertedAt;
-            module.updatedAt = updatedModule.updatedAt;
-
-            module.savedCode =
-              updatedModule.code === module.code ? null : updatedModule.code;
-
-            effects.vscode.sandboxFsSync.writeFile(
-              state.editor.modulesByPath,
-              module
-            );
-            effects.moduleRecover.remove(sandbox.id, module);
-          } else {
-            // We might not have the module, as it was created by the server. In
-            // this case we put it in. There is an edge case here where the user
-            // might delete the module while it is being updated, but it will very
-            // likely not happen
-            sandbox.modules.push(updatedModule);
-          }
-        });
-      }
-
-      effects.preview.executeCodeImmediately();
-    } catch (error) {
-      actions.internal.handleError({
-        message: 'There was a problem with saving the files, please try again',
-        error,
-      });
-    }
-  }
-);
-
-export const createZipClicked = ({ state, effects }: Context) => {
-  if (!state.editor.currentSandbox) {
-    return;
-  }
-
-  if (state.editor.currentSandbox.permissions.preventSandboxExport) {
-    effects.notificationToast.error(
-      'You do not permission to export this sandbox'
-    );
-    return;
-  }
-
-  effects.zip.download(state.editor.currentSandbox);
-
-  effects.analytics.track('Editor - Click Menu Item - Export as ZIP');
-};
-
-// The forkExternalSandbox only seems to be used inside of the dashboard pages and
-// that seems to be the reason why it's called external.
-// TODO: Move the fork function to the dashboard namespace.
-export const forkExternalSandbox = async (
-  { effects, state, actions }: Context,
-  {
-    sandboxId,
-    openInNewWindow,
-    openInVSCode,
-    autoLaunchVSCode,
-    hasBetaEditorExperiment,
-    customVMTier,
-    body,
-    redirectAfterFork,
-  }: {
-    sandboxId: string;
-    openInNewWindow?: boolean;
-    openInVSCode?: boolean;
-    autoLaunchVSCode?: boolean;
-    hasBetaEditorExperiment?: boolean;
-    customVMTier?: number;
-    redirectAfterFork?: boolean;
-    body?: {
-      collectionId?: string;
-      alias?: string;
-      v2?: boolean;
-      title?: string;
-      privacy?: 0 | 1 | 2;
-    };
-  }
-) => {
-  effects.analytics.track('Fork Sandbox', { type: 'external', sandboxId });
-
-  const usedBody: ForkSandboxBody = body || {};
-
-  if (state.activeTeam) {
-    usedBody.teamId = state.activeTeam;
-  }
-
-  try {
-    const forkedSandbox = await effects.api.forkSandbox(sandboxId, usedBody);
-
-    if (customVMTier) {
-      await effects.api.setVMSpecs(forkedSandbox.id, customVMTier);
-    }
-
-    if (openInVSCode) {
-      if (autoLaunchVSCode) {
-        window.open(vsCodeUrl(forkedSandbox.id));
-      } else {
-        window.open(vsCodeLauncherUrl(forkedSandbox.id));
-      }
-    } else {
-      state.editor.sandboxes[forkedSandbox.id] = forkedSandbox;
-
-      if (redirectAfterFork) {
-        effects.router.updateSandboxUrl(forkedSandbox, {
-          openInNewWindow,
-          hasBetaEditorExperiment,
-        });
-      }
-    }
-
-    return forkedSandbox;
-  } catch (error) {
-    const errorMessage = actions.internal.getErrorMessage({ error });
-
-    if (errorMessage.includes('DRAFT_LIMIT')) {
-      effects.notificationToast.add({
-        title: 'Cannot create draft',
-        message:
-          'Your drafts folder is full. Delete unneeded drafts, or upgrade to Pro for unlimited drafts.',
-        status: NotificationStatus.ERROR,
-      });
-    } else {
-      actions.internal.handleError({
-        message: 'We were unable to fork the sandbox',
-        error,
-      });
-    }
-  }
-
-  return undefined;
-};
-
-// TODO: Look into
-export const forkSandboxClicked = async (
-  { state, actions }: Context,
-  {
-    teamId,
-  }: {
-    teamId?: string | null;
-  }
-) => {
-  if (!state.editor.currentSandbox) {
-    return;
-  }
-
-  await actions.editor.internal.forkSandbox({
-    sandboxId: state.editor.currentSandbox.id,
-    teamId,
-  });
-};
-
-export const likeSandboxToggled = async (
-  { state, effects }: Context,
-  id: string
-) => {
-  if (state.editor.sandboxes[id].userLiked) {
-    state.editor.sandboxes[id].userLiked = false;
-    state.editor.sandboxes[id].likeCount--;
-    await effects.api.unlikeSandbox(id);
-    effects.analytics.track('Sandbox - Like', { place: 'EDITOR' });
-  } else {
-    state.editor.sandboxes[id].userLiked = true;
-    state.editor.sandboxes[id].likeCount++;
-    await effects.api.likeSandbox(id);
-    effects.analytics.track('Sandbox - Undo Like', { place: 'EDITOR' });
-  }
-};
-
-export const moduleSelected = async (
-  { actions, effects, state }: Context,
-  {
-    id,
-    path,
-  }:
-    | {
-        // Id means it is coming from Explorer
-        id: string;
-        path?: undefined;
-      }
-    | {
-        // Path means it is coming from VSCode
-        id?: undefined;
-        path: string;
-      }
-) => {
-  effects.analytics.track('Open File');
-
-  state.editor.hasLoadedInitialModule = true;
-
-  const sandbox = state.editor.currentSandbox;
-
-  if (!sandbox) {
-    return;
-  }
-
-  try {
-    const module = path
-      ? effects.utils.resolveModule(
-          path.replace(/^\/sandbox\//, ''),
-          sandbox.modules,
-          sandbox.directories
-        )
-      : sandbox.modules.filter(moduleItem => moduleItem.id === id)[0];
-
-    if (module.shortid === state.editor.currentModuleShortid && path) {
-      // If this comes from VSCode we can return, but if this call comes from CodeSandbox
-      // we shouldn't return, since the promise would resolve sooner than VSCode loaded
-      // the file
-      return;
-    }
-
-    await actions.editor.internal.setCurrentModule(module);
-
-    actions.editor.persistCursorToUrl({ module });
-
-    if (state.live.isLive && state.live.liveUser && state.live.roomInfo) {
-      actions.editor.internal.updateSelectionsOfModule({ module });
-      state.live.liveUser.currentModuleShortid = module.shortid;
-
-      if (state.live.followingUserId) {
-        const followingUser = state.live.roomInfo.users.find(
-          u => u.id === state.live.followingUserId
-        );
-
-        if (
-          followingUser &&
-          followingUser.currentModuleShortid !== module.shortid
-        ) {
-          // Reset following as this is a user change module action
-          actions.live.onStopFollow();
-        }
-      }
-
-      effects.live.sendUserCurrentModule(module.shortid);
-
-      if (!state.editor.isInProjectView) {
-        actions.editor.internal.updatePreviewCode();
-      }
-    }
-  } catch (error) {
-    // You jumped to a file not in the Sandbox, for example typings
-    state.editor.currentModuleShortid = null;
-  }
-};
-
-export const clearModuleSelected = ({ state }: Context) => {
-  state.editor.currentModuleShortid = null;
-};
-
-export const moduleDoubleClicked = ({ state, effects }: Context) => {
-  effects.vscode.runCommand('workbench.action.keepEditor');
-
-  const { currentModule } = state.editor;
-  const tabs = state.editor.tabs as ModuleTab[];
-  const tab = tabs.find(
-    tabItem => tabItem.moduleShortid === currentModule.shortid
-  );
-
-  if (tab) {
-    tab.dirty = false;
-  }
-};
-
-export const tabClosed = ({ state, actions }: Context, tabIndex: number) => {
-  if (state.editor.tabs.length > 1) {
-    actions.internal.closeTabByIndex(tabIndex);
-  }
-};
-
-export const tabMoved = (
-  { state }: Context,
-  {
-    prevIndex,
-    nextIndex,
-  }: {
-    prevIndex: number;
-    nextIndex: number;
-  }
-) => {
-  const { tabs } = state.editor;
-  const tab = json(tabs[prevIndex]);
-
-  state.editor.tabs.splice(prevIndex, 1);
-  state.editor.tabs.splice(nextIndex, 0, tab);
-};
-
-// TODO(@CompuIves): Look into whether we even want to call this function.
-// We can probably call the dispatch from the bundler itself instead.
-export const errorsCleared = ({ state, effects }: Context) => {
-  const sandbox = state.editor.currentSandbox;
-  if (!sandbox) {
-    return;
-  }
-
-  if (state.editor.errors.length) {
-    state.editor.errors.forEach(error => {
-      try {
-        const module = resolveModule(
-          error.path,
-          sandbox.modules,
-          sandbox.directories
-        );
-        module.errors = [];
-      } catch (e) {
-        // Module is probably somewhere in eg. /node_modules which is not
-        // in the store
-      }
-    });
-    state.editor.errors = [];
-    effects.vscode.setErrors(state.editor.errors);
-  }
-};
-
-export const toggleStatusBar = ({ state }: Context) => {
-  state.editor.statusBar = !state.editor.statusBar;
-};
-
-export const projectViewToggled = ({ state, actions }: Context) => {
-  state.editor.isInProjectView = !state.editor.isInProjectView;
-  actions.editor.internal.updatePreviewCode();
-};
-
-export const frozenUpdated = async (
-  { effects, state }: Context,
-  frozen: boolean
-) => {
-  if (!state.editor.currentSandbox) {
-    return;
-  }
-
-  state.editor.currentSandbox.isFrozen = frozen;
-
-  await effects.api.saveFrozen(state.editor.currentSandbox.id, frozen);
-};
-
-export const quickActionsOpened = ({ state }: Context) => {
-  state.editor.quickActionsOpen = true;
-};
-
-export const quickActionsClosed = ({ state }: Context) => {
-  state.editor.quickActionsOpen = false;
-};
-
-export const setPreviewContent = () => {};
-
-export const togglePreviewContent = ({ state, effects }: Context) => {
-  state.editor.previewWindowVisible = !state.editor.previewWindowVisible;
-  effects.vscode.resetLayout();
-};
-
-export const currentTabChanged = (
-  { state }: Context,
-  {
-    tabId,
-  }: {
-    tabId: string;
-  }
-) => {
-  state.editor.currentTabId = tabId;
-};
-
-export const discardModuleChanges = (
-  { state, effects, actions }: Context,
-  {
-    moduleShortid,
-  }: {
-    moduleShortid: string;
-  }
-) => {
-  effects.analytics.track('Code Discarded');
-
-  const sandbox = state.editor.currentSandbox;
-  if (!sandbox) {
-    return;
-  }
-
-  const module = sandbox.modules.find(
-    moduleItem => moduleItem.shortid === moduleShortid
-  );
-
-  if (!module) {
-    return;
-  }
-
-  module.updatedAt = new Date().toString();
-  effects.vscode.syncModule(module);
-};
-
-export const fetchEnvironmentVariables = async ({
-  state,
-  effects,
-}: Context) => {
-  if (!state.editor.currentSandbox) {
-    return;
-  }
-
-  state.editor.currentSandbox.environmentVariables = await effects.api.getEnvironmentVariables(
-    state.editor.currentSandbox.id
-  );
-};
-
-export const updateEnvironmentVariables = async (
-  { effects, state }: Context,
-  environmentVariable: EnvironmentVariable
-) => {
-  if (!state.editor.currentSandbox) {
-    return;
-  }
-
-  state.editor.currentSandbox.environmentVariables = await effects.api.saveEnvironmentVariable(
-    state.editor.currentSandbox.id,
-    environmentVariable
-  );
-
-  effects.codesandboxApi.restartSandbox();
-};
-
-export const deleteEnvironmentVariable = async (
-  { effects, state }: Context,
-  name: string
-) => {
-  if (!state.editor.currentSandbox) {
-    return;
-  }
-
-  const { id } = state.editor.currentSandbox;
-
-  state.editor.currentSandbox.environmentVariables = await effects.api.deleteEnvironmentVariable(
-    id,
-    name
-  );
-  effects.codesandboxApi.restartSandbox();
-};
-
-/**
- * This will let the user know on fork that some secrets need to be set if there are any empty ones
- */
-export const showEnvironmentVariablesNotification = async ({
-  state,
-  actions,
-  effects,
-}: Context) => {
-  const sandbox = state.editor.currentSandbox;
-
-  if (!sandbox) {
-    return;
-  }
-
-  await actions.editor.fetchEnvironmentVariables();
-
-  const environmentVariables = sandbox.environmentVariables!;
-  const emptyVarCount = Object.keys(environmentVariables).filter(
-    key => !environmentVariables[key]
-  ).length;
-  if (emptyVarCount > 0) {
-    effects.notificationToast.add({
-      status: NotificationStatus.NOTICE,
-      title: 'Unset Secrets',
-      message: `This sandbox has ${emptyVarCount} secrets that need to be set. You can set them in the server tab.`,
-      actions: {
-        primary: {
-          label: 'Open Server Tab',
-          run: () => {
-            actions.workspace.setWorkspaceItem({ item: SERVER.id });
-          },
-        },
-      },
-    });
-  }
-};
-
-export const onSelectionChanged = (
-  { actions, state }: Context,
-  selection: UserSelection
-) => {
-  if (!state.editor.currentModule) {
-    return;
-  }
-
-  actions.editor.persistCursorToUrl({
-    module: state.editor.currentModule,
-    selection,
-  });
-};
-
-export const toggleEditorPreviewLayout = ({ state, effects }: Context) => {
-  const currentOrientation = state.editor.previewWindowOrientation;
-
-  state.editor.previewWindowOrientation =
-    currentOrientation === WindowOrientation.VERTICAL
-      ? WindowOrientation.HORIZONTAL
-      : WindowOrientation.VERTICAL;
-
-  effects.vscode.resetLayout();
-};
-
-export const previewActionReceived = (
-  { actions, effects, state }: Context,
-  action: any
-) => {
-  switch (action.action) {
-    case 'notification':
-      effects.notificationToast.add({
-        message: action.title,
-        status: action.notificationType,
-        timeAlive: action.timeAlive,
-      });
-      break;
-    case 'show-error': {
-      if (!state.editor.currentSandbox) {
-        return;
-      }
-      const error: ModuleError = {
-        column: action.column,
-        line: action.line,
-        columnEnd: action.columnEnd,
-        lineEnd: action.lineEnd,
-        message: action.message,
-        title: action.title,
-        path: action.path,
-        source: action.source,
-        severity: action.severity,
-        type: action.type,
-      };
-      try {
-        const module = resolveModule(
-          error.path,
-          state.editor.currentSandbox.modules,
-          state.editor.currentSandbox.directories
-        );
-
-        module.errors.push(json(error));
-        state.editor.errors.push(error);
-        effects.vscode.setErrors(state.editor.errors);
-      } catch (e) {
-        /* ignore, this module can be in a node_modules for example */
-      }
-      break;
-    }
-    case 'show-correction': {
-      if (!state.editor.currentSandbox) {
-        return;
-      }
-      const correction: ModuleCorrection = {
-        path: action.path,
-        column: action.column,
-        line: action.line,
-        columnEnd: action.columnEnd,
-        lineEnd: action.lineEnd,
-        message: action.message,
-        source: action.source,
-        severity: action.severity,
-      };
-      try {
-        const module = resolveModule(
-          correction.path as string,
-          state.editor.currentSandbox.modules,
-          state.editor.currentSandbox.directories
-        );
-
-        state.editor.corrections.push(correction);
-        module.corrections.push(json(correction));
-        effects.vscode.setCorrections(state.editor.corrections);
-      } catch (e) {
-        /* ignore, this module can be in a node_modules for example */
-      }
-      break;
-    }
-    case 'clear-errors': {
-      const sandbox = state.editor.currentSandbox;
-      if (!sandbox) {
-        return;
-      }
-      const currentErrors = state.editor.errors;
-
-      const newErrors = clearCorrectionsFromAction(currentErrors, action);
-
-      if (newErrors.length !== currentErrors.length) {
-        state.editor.errors.forEach(error => {
-          try {
-            const module = resolveModule(
-              error.path,
-              sandbox.modules,
-              sandbox.directories
-            );
-
-            module.errors = [];
-          } catch (e) {
-            // Module doesn't exist anymore
-          }
-        });
-        newErrors.forEach(error => {
-          const module = resolveModule(
-            error.path,
-            sandbox.modules,
-            sandbox.directories
-          );
-
-          module.errors.push(error);
-        });
-        state.editor.errors = newErrors;
-        effects.vscode.setErrors(state.editor.errors);
-      }
-      break;
-    }
-    case 'clear-corrections': {
-      const sandbox = state.editor.currentSandbox;
-
-      if (!sandbox) {
-        return;
-      }
-
-      const currentCorrections = state.editor.corrections;
-
-      const newCorrections = clearCorrectionsFromAction(
-        currentCorrections,
-        action
-      );
-
-      if (newCorrections.length !== currentCorrections.length) {
-        state.editor.corrections.forEach(correction => {
-          try {
-            const module = resolveModule(
-              correction.path!,
-              sandbox.modules,
-              sandbox.directories
-            );
-
-            module.corrections = [];
-          } catch (e) {
-            // Module is probably in node_modules or something, which is not in
-            // our store
-          }
-        });
-        newCorrections.forEach(correction => {
-          const module = resolveModule(
-            correction.path!,
-            sandbox.modules,
-            sandbox.directories
-          );
-
-          module.corrections.push(correction);
-        });
-        state.editor.corrections = newCorrections;
-        effects.vscode.setCorrections(state.editor.corrections);
-      }
-      break;
-    }
-    case 'source.module.rename': {
-      const sandbox = state.editor.currentSandbox;
-      if (!sandbox) {
-        return;
-      }
-      const module = effects.utils.resolveModule(
-        action.path.replace(/^\//, ''),
-        sandbox.modules,
-        sandbox.directories
-      );
-
-      if (module) {
-        const sandboxModule = sandbox.modules.find(
-          moduleEntry => moduleEntry.shortid === module.shortid
-        );
-
-        if (sandboxModule) {
-          sandboxModule.title = action.title;
-        }
-      }
-      break;
-    }
-    case 'source.dependencies.add': {
-      const name = action.dependency;
-      actions.editor.addNpmDependency({
-        name,
-      });
-      break;
-    }
-  }
-};
-
-export const renameModule = withOwnedSandbox(
-  async (
-    { state, actions, effects }: Context,
-    {
-      title,
-      moduleShortid,
-    }: {
-      title: string;
-      moduleShortid: string;
-    }
-  ) => {
-    const sandbox = state.editor.currentSandbox;
-    if (!sandbox) {
-      return;
-    }
-    const module = sandbox.modules.find(
-      moduleItem => moduleItem.shortid === moduleShortid
-    );
-
-    if (!module) {
-      return;
-    }
-
-    const oldTitle = module.title;
-
-    module.title = title;
-
-    try {
-      await effects.api.saveModuleTitle(sandbox.id, moduleShortid, title);
-
-      if (state.live.isCurrentEditor) {
-        effects.live.sendModuleUpdate(module);
-      }
-    } catch (error) {
-      module.title = oldTitle;
-
-      actions.internal.handleError({ message: 'Could not rename file', error });
-    }
-  }
-);
-
-export const onDevToolsTabAdded = (
-  { state, actions }: Context,
-  {
-    tab,
-  }: {
-    tab: any;
-  }
-) => {
-  const { devToolTabs } = state.editor;
-  const { devTools: newDevToolTabs, position } = addDevToolsTabUtil(
-    json(devToolTabs),
-    tab
-  );
-  const nextPos = position;
-
-  actions.editor.internal.updateDevtools(newDevToolTabs);
-
-  state.editor.currentDevToolsPosition = nextPos;
-};
-
-export const onDevToolsTabMoved = (
-  { state, actions }: Context,
-  {
-    prevPos,
-    nextPos,
-  }: {
-    prevPos: any;
-    nextPos: any;
-  }
-) => {
-  const { devToolTabs } = state.editor;
-  const newDevToolTabs = moveDevToolsTabUtil(
-    json(devToolTabs),
-    prevPos,
-    nextPos
-  );
-
-  actions.editor.internal.updateDevtools(newDevToolTabs);
-
-  state.editor.currentDevToolsPosition = nextPos;
-};
-
-export const onDevToolsTabClosed = (
-  { state, actions }: Context,
-  {
-    pos,
-  }: {
-    pos: any;
-  }
-) => {
-  const { devToolTabs } = state.editor;
-  const closePos = pos;
-  const newDevToolTabs = closeDevToolsTabUtil(json(devToolTabs), closePos);
-
-  actions.editor.internal.updateDevtools(newDevToolTabs);
-};
-
-export const onDevToolsPositionChanged = (
-  { state }: Context,
-  {
-    position,
-  }: {
-    position: any;
-  }
-) => {
-  state.editor.currentDevToolsPosition = position;
-};
-
-export const openDevtoolsTab = (
-  { state, actions }: Context,
-  {
-    tab: tabToFind,
-  }: {
-    tab: any;
-  }
-) => {
-  const serializedTab = JSON.stringify(tabToFind);
-  const { devToolTabs } = state.editor;
-  let nextPos;
-
-  for (let i = 0; i < devToolTabs.length; i++) {
-    const view = devToolTabs[i];
-
-    for (let j = 0; j < view.views.length; j++) {
-      const tab = view.views[j];
-      if (JSON.stringify(tab) === serializedTab) {
-        nextPos = {
-          devToolIndex: i,
-          tabPosition: j,
-        };
-      }
-    }
-  }
-
-  if (nextPos) {
-    state.editor.currentDevToolsPosition = nextPos;
-  } else {
-    actions.editor.onDevToolsTabAdded({
-      tab: tabToFind,
-    });
-  }
-};
-
-export const sessionFreezeOverride = ({ state }: Context, frozen: boolean) => {
-  state.editor.sessionFrozen = frozen;
-};
-
-export const listenToSandboxChanges = async (
-  { state, actions, effects }: Context,
-  {
-    sandboxId,
-  }: {
-    sandboxId: string;
-  }
-) => {
-  effects.gql.subscriptions.onSandboxChangged.dispose();
-
-  if (!state.isLoggedIn) {
-    return;
-  }
-
-  effects.gql.subscriptions.onSandboxChangged({ sandboxId }, result => {
-    const sandbox = state.editor.sandboxes[sandboxId];
-
-    if (sandbox) {
-      const newInfo = result.sandboxChanged;
-      sandbox.privacy = newInfo.privacy as 0 | 1 | 2;
-
-      const authorization = convertAuthorizationToPermissionType(
-        newInfo.authorization
-      );
-
-      if (authorization !== sandbox.authorization) {
-        sandbox.authorization = authorization;
-
-        actions.refetchSandboxInfo();
-      }
-    }
-  });
-};
-
-export const loadCollaborators = async (
-  { state, effects }: Context,
-  { sandboxId }: { sandboxId: string }
-) => {
-  if (!state.editor.currentSandbox || !state.isLoggedIn) {
-    return;
-  }
-
-  effects.gql.subscriptions.onCollaboratorAdded.dispose();
-  effects.gql.subscriptions.onCollaboratorRemoved.dispose();
-  effects.gql.subscriptions.onCollaboratorChanged.dispose();
-  effects.gql.subscriptions.onInvitationCreated.dispose();
-  effects.gql.subscriptions.onInvitationRemoved.dispose();
-  effects.gql.subscriptions.onInvitationChanged.dispose();
-
-  try {
-    const collaboratorResponse = await effects.gql.queries.collaborators({
-      sandboxId,
-    });
-    if (!collaboratorResponse.sandbox) {
-      return;
-    }
-
-    state.editor.collaborators = collaboratorResponse.sandbox.collaborators;
-
-    effects.gql.subscriptions.onCollaboratorAdded({ sandboxId }, event => {
-      const newCollaborator = event.collaboratorAdded;
-      state.editor.collaborators = [
-        ...state.editor.collaborators.filter(
-          c => c.user.username !== event.collaboratorAdded.user.username
-        ),
-        newCollaborator,
-      ];
-    });
-
-    effects.gql.subscriptions.onCollaboratorChanged({ sandboxId }, event => {
-      const existingCollaborator = state.editor.collaborators.find(
-        c => c.user.username === event.collaboratorChanged.user.username
-      );
-      if (existingCollaborator) {
-        existingCollaborator.authorization =
-          event.collaboratorChanged.authorization;
-
-        existingCollaborator.warning = event.collaboratorChanged.warning;
-        existingCollaborator.lastSeenAt = event.collaboratorChanged.lastSeenAt;
-      }
-    });
-
-    effects.gql.subscriptions.onCollaboratorRemoved({ sandboxId }, event => {
-      state.editor.collaborators = state.editor.collaborators.filter(
-        c => c.user.username !== event.collaboratorRemoved.user.username
-      );
-    });
-
-    if (hasPermission(state.editor.currentSandbox.authorization, 'owner')) {
-      const invitationResponse = await effects.gql.queries.invitations({
-        sandboxId,
-      });
-      const sandbox = invitationResponse.sandbox;
-      if (!sandbox) {
-        return;
-      }
-
-      state.editor.invitations = sandbox.invitations;
-
-      effects.gql.subscriptions.onInvitationCreated({ sandboxId }, event => {
-        if (event.invitationCreated.id === null) {
-          // Ignore this
-          return;
-        }
-
-        const newInvitation = event.invitationCreated;
-        state.editor.invitations = [
-          ...state.editor.invitations.filter(
-            i => i.id !== event.invitationCreated.id
-          ),
-          newInvitation,
-        ];
-      });
-
-      effects.gql.subscriptions.onInvitationChanged({ sandboxId }, event => {
-        const existingInvitation = state.editor.invitations.find(
-          i => i.id === event.invitationChanged.id
-        );
-        if (existingInvitation) {
-          existingInvitation.authorization =
-            event.invitationChanged.authorization;
-        }
-      });
-
-      effects.gql.subscriptions.onInvitationRemoved({ sandboxId }, event => {
-        state.editor.invitations = state.editor.invitations.filter(
-          i => i.id !== event.invitationRemoved.id
-        );
-      });
-    }
-  } catch {
-    // Unable to connect, not sure what to do here
-  }
-};
-
-export const changeCollaboratorAuthorization = async (
-  { state, effects }: Context,
-  {
-    username,
-    authorization,
-    sandboxId,
-  }: {
-    username: string;
-    authorization: Authorization;
-    sandboxId: string;
-  }
-) => {
-  effects.analytics.track('Update Collaborator Authorization', {
-    authorization,
-  });
-
-  const existingCollaborator = state.editor.collaborators.find(
-    c => c.user.username === username
-  );
-
-  let oldAuthorization: Authorization | null = null;
-  if (existingCollaborator) {
-    oldAuthorization = existingCollaborator.authorization;
-
-    existingCollaborator.authorization = authorization;
-  }
-
-  try {
-    await effects.gql.mutations.changeCollaboratorAuthorization({
-      sandboxId,
-      authorization,
-      username,
-    });
-  } catch (e) {
-    if (existingCollaborator && oldAuthorization) {
-      existingCollaborator.authorization = oldAuthorization;
-    }
-  }
-};
-
-export const addCollaborator = async (
-  { state, effects }: Context,
-  {
-    username,
-    sandboxId,
-    authorization,
-  }: {
-    username: string;
-    sandboxId: string;
-    authorization: Authorization;
-  }
-) => {
-  effects.analytics.track('Add Collaborator', { authorization });
-  const newCollaborator: CollaboratorFragment = {
-    lastSeenAt: null,
-    id: 'OPTIMISTIC_ID',
-    authorization,
-    user: {
-      id: 'OPTIMISTIC_USER_ID',
-      username,
-      avatarUrl: '',
-    },
-    warning: null,
-  };
-
-  state.editor.collaborators = [...state.editor.collaborators, newCollaborator];
-
-  try {
-    const result = await effects.gql.mutations.addCollaborator({
-      sandboxId,
-      username,
-      authorization,
-    });
-    state.editor.collaborators = [
-      ...state.editor.collaborators.filter(c => c.user.username !== username),
-      result.addCollaborator,
-    ];
-  } catch (e) {
-    state.editor.collaborators = state.editor.collaborators.filter(
-      c => c.id !== 'OPTIMISTIC_ID'
-    );
-  }
-};
-
-export const removeCollaborator = async (
-  { state, effects }: Context,
-  {
-    username,
-    sandboxId,
-  }: {
-    username: string;
-    sandboxId: string;
-  }
-) => {
-  effects.analytics.track('Remove Collaborator');
-  const existingCollaborator = state.editor.collaborators.find(
-    c => c.user.username === username
-  );
-
-  state.editor.collaborators = state.editor.collaborators.filter(
-    c => c.user.username !== username
-  );
-
-  try {
-    await effects.gql.mutations.removeCollaborator({
-      sandboxId,
-      username,
-    });
-  } catch (e) {
-    if (existingCollaborator) {
-      state.editor.collaborators = [
-        ...state.editor.collaborators,
-        existingCollaborator,
-      ];
-    }
-  }
-};
-
-export const inviteCollaborator = async (
-  { state, effects }: Context,
-  {
-    email,
-    sandboxId,
-    authorization,
-  }: {
-    email: string;
-    sandboxId: string;
-    authorization: Authorization;
-  }
-) => {
-  effects.analytics.track('Invite Collaborator (Email)', { authorization });
-
-  const newInvitation: InvitationFragment = {
-    id: 'OPTIMISTIC_ID',
-    authorization,
-    email,
-  };
-
-  state.editor.invitations = [...state.editor.invitations, newInvitation];
-
-  try {
-    const result = await effects.gql.mutations.inviteCollaborator({
-      sandboxId,
-      email,
-      authorization,
-    });
-
-    if (result.createSandboxInvitation.id === null) {
-      // When it's null it has already tied the email to a collaborator, and the collaborator
-      // has been added via websockets
-      state.editor.invitations = state.editor.invitations.filter(
-        c => c.id !== 'OPTIMISTIC_ID'
-      );
-    } else {
-      state.editor.invitations = [
-        ...state.editor.invitations.filter(
-          c =>
-            c.id !== 'OPTIMISTIC_ID' &&
-            c.id !== result.createSandboxInvitation.id
-        ),
-
-        result.createSandboxInvitation,
-      ];
-    }
-  } catch (e) {
-    state.editor.invitations = state.editor.invitations.filter(
-      c => c.id !== 'OPTIMISTIC_ID'
-    );
-  }
-};
-
-export const revokeSandboxInvitation = async (
-  { state, effects }: Context,
-  {
-    invitationId,
-    sandboxId,
-  }: {
-    invitationId: string;
-    sandboxId: string;
-  }
-) => {
-  effects.analytics.track('Cancel Invite Collaborator (Email)');
-
-  const existingInvitation = state.editor.invitations.find(
-    c => c.id === invitationId
-  );
-
-  state.editor.invitations = state.editor.invitations.filter(
-    c => c.id !== invitationId
-  );
-
-  try {
-    await effects.gql.mutations.revokeInvitation({
-      sandboxId,
-      invitationId,
-    });
-  } catch (e) {
-    if (existingInvitation) {
-      state.editor.invitations = [
-        ...state.editor.invitations,
-        existingInvitation,
-      ];
-    }
-  }
-};
-
-export const changeInvitationAuthorization = async (
-  { state, effects }: Context,
-  {
-    invitationId,
-    sandboxId,
-    authorization,
-  }: {
-    invitationId: string;
-    authorization: Authorization;
-    sandboxId: string;
-  }
-) => {
-  const existingInvitation = state.editor.invitations.find(
-    c => c.id === invitationId
-  );
-
-  let oldAuthorization: Authorization | null = null;
-  if (existingInvitation) {
-    oldAuthorization = existingInvitation.authorization;
-
-    existingInvitation.authorization = authorization;
-  }
-
-  try {
-    await effects.gql.mutations.changeSandboxInvitationAuthorization({
-      sandboxId,
-      authorization,
-      invitationId,
-    });
-  } catch (e) {
-    if (existingInvitation && oldAuthorization) {
-      existingInvitation.authorization = oldAuthorization;
-    }
-  }
-};
-
-export const setPreventSandboxLeaving = async (
-  { effects, state }: Context,
-  preventSandboxLeaving: boolean
-) => {
-  if (!state.editor.currentSandbox) return;
-
-  // optimistic update
-  const oldValue =
-    state.editor.currentSandbox.permissions.preventSandboxLeaving;
-  state.editor.currentSandbox.permissions.preventSandboxLeaving = preventSandboxLeaving;
-
-  effects.analytics.track(`Editor - Change sandbox permissions`, {
-    preventSandboxLeaving,
-  });
-
-  try {
-    await effects.gql.mutations.setPreventSandboxesLeavingWorkspace({
-      sandboxIds: [state.editor.currentSandbox.id],
-      preventSandboxLeaving,
-    });
-  } catch (error) {
-    state.editor.currentSandbox.permissions.preventSandboxLeaving = oldValue;
-    effects.notificationToast.error(
-      'There was a problem updating your sandbox permissions'
-    );
-  }
-};
-
-export const setPreventSandboxExport = async (
-  { effects, state }: Context,
-  preventSandboxExport: boolean
-) => {
-  if (!state.editor.currentSandbox) return;
-
-  // optimistic update
-  const oldValue = state.editor.currentSandbox.permissions.preventSandboxExport;
-  state.editor.currentSandbox.permissions.preventSandboxExport = preventSandboxExport;
-
-  effects.analytics.track(`Editor - Change sandbox permissions`, {
-    preventSandboxExport,
-  });
-
-  try {
-    await effects.gql.mutations.setPreventSandboxesExport({
-      sandboxIds: [state.editor.currentSandbox.id],
-      preventSandboxExport,
-    });
-  } catch (error) {
-    state.editor.currentSandbox.permissions.preventSandboxExport = oldValue;
-    effects.notificationToast.error(
-      'There was a problem updating your sandbox permissions'
-    );
-  }
-};
diff --git a/packages/app/src/app/overmind/namespaces/editor/index.ts b/packages/app/src/app/overmind/namespaces/editor/index.ts
deleted file mode 100755
index dd0715cd945..00000000000
--- a/packages/app/src/app/overmind/namespaces/editor/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import * as actions from './actions';
-import { state } from './state';
-
-export { state, actions };
diff --git a/packages/app/src/app/overmind/namespaces/editor/internalActions.ts b/packages/app/src/app/overmind/namespaces/editor/internalActions.ts
deleted file mode 100755
index c112fbb71a6..00000000000
--- a/packages/app/src/app/overmind/namespaces/editor/internalActions.ts
+++ /dev/null
@@ -1,640 +0,0 @@
-import getTemplateDefinition, {
-  TemplateType,
-} from '@codesandbox/common/lib/templates';
-import { ViewConfig } from '@codesandbox/common/lib/templates/template';
-import {
-  Module,
-  ModuleTab,
-  Sandbox,
-  ServerContainerStatus,
-  TabType,
-} from '@codesandbox/common/lib/types';
-import { captureException } from '@codesandbox/common/lib/utils/analytics/sentry';
-import { hasPermission } from '@codesandbox/common/lib/utils/permission';
-import slugify from '@codesandbox/common/lib/utils/slugify';
-import {
-  editorUrl,
-  sandboxUrl,
-} from '@codesandbox/common/lib/utils/url-generator';
-import { NotificationStatus } from '@codesandbox/notifications';
-import { Context } from 'app/overmind';
-import { sortObjectByKeys } from 'app/overmind/utils/common';
-import { getTemplate as computeTemplate } from 'codesandbox-import-utils/lib/create-sandbox/templates';
-import { mapValues } from 'lodash-es';
-
-export const ensureSandboxId = ({ state }: Context, id: string) => {
-  if (state.editor.sandboxes[id]) {
-    return id;
-  }
-
-  const { sandboxes } = state.editor;
-  const matchingSandboxId = Object.keys(sandboxes).find(
-    // @ts-ignore
-    idItem => sandboxUrl(sandboxes[idItem]) === `${editorUrl()}${id}`
-  );
-
-  return matchingSandboxId || id;
-};
-
-export const initializeSandbox = async (
-  { actions }: Context,
-  sandbox: Sandbox
-) => {
-  await Promise.all([
-    actions.editor.internal.initializeLiveSandbox(sandbox),
-    actions.editor.loadCollaborators({ sandboxId: sandbox.id }),
-    actions.editor.listenToSandboxChanges({ sandboxId: sandbox.id }),
-    actions.internal.switchCurrentWorkspaceBySandbox({ sandbox }),
-    actions.getSandboxesLimits(),
-  ]);
-};
-
-export const initializeLiveSandbox = async (
-  { state, actions }: Context,
-  sandbox: Sandbox
-) => {
-  state.live.isTeam = Boolean(sandbox.team);
-
-  if (state.live.isLive && state.live.roomInfo) {
-    const roomChanged = state.live.roomInfo.roomId !== sandbox.roomId;
-
-    if (!roomChanged) {
-      // In this case we don't need to initialize new live session, we reuse the existing one
-      return;
-    }
-
-    if (
-      // If the joinSource is /live/ and the user is only a viewer,
-      // we won't get the roomId and the user will disconnect automatically,
-      // we want to prevent this by only re-initializing the live session on joinSource === 'sandbox'. Because
-      // for joinSource === 'sandbox' we know for sure that the user will get a roomId if they have permissions
-      // to join
-      state.live.joinSource === 'sandbox'
-    ) {
-      actions.live.internal.disconnect();
-    }
-  }
-
-  if (sandbox.roomId) {
-    await actions.live.internal.initialize(sandbox.roomId);
-  }
-};
-
-export const updateSelectionsOfModule = async (
-  { actions, effects }: Context,
-  { module }: { module: Module }
-) => {
-  effects.vscode.updateUserSelections(
-    module,
-    actions.live.internal.getSelectionsForModule(module)
-  );
-};
-
-export const setModuleSavedCode = (
-  { state }: Context,
-  {
-    moduleShortid,
-    savedCode,
-  }: {
-    moduleShortid: string;
-    savedCode: string | null;
-  }
-) => {
-  const sandbox = state.editor.currentSandbox;
-
-  if (!sandbox) {
-    return;
-  }
-
-  const moduleIndex = sandbox.modules.findIndex(
-    m => m.shortid === moduleShortid
-  );
-
-  if (moduleIndex > -1) {
-    const module = sandbox.modules[moduleIndex];
-
-    module.savedCode = module.code === savedCode ? null : savedCode;
-  }
-};
-
-export const saveCode = async (
-  { state, effects, actions }: Context,
-  {
-    code,
-    moduleShortid,
-    cbID,
-  }: {
-    code: string;
-    moduleShortid: string;
-    cbID?: string | null;
-  }
-) => {
-  effects.analytics.track('Save Code');
-
-  const sandbox = state.editor.currentSandbox;
-
-  if (!sandbox) {
-    return;
-  }
-
-  const module = sandbox.modules.find(m => m.shortid === moduleShortid);
-
-  if (!module) {
-    return;
-  }
-
-  effects.preview.executeCodeImmediately();
-
-  try {
-    let updatedModule: {
-      updatedAt: string;
-      insertedAt: string;
-      code: string;
-      isBinary: boolean;
-    };
-    if (sandbox.featureFlags.comments) {
-      await effects.live.waitForLiveReady();
-      const {
-        saved_code,
-        updated_at,
-        inserted_at,
-      } = await effects.live.saveModule(module);
-
-      updatedModule = {
-        code: saved_code,
-        updatedAt: updated_at,
-        insertedAt: inserted_at,
-        isBinary: false,
-      };
-    } else {
-      updatedModule = await effects.api.saveModuleCode(
-        sandbox.id,
-        module.shortid,
-        code
-      );
-    }
-
-    module.insertedAt = updatedModule.insertedAt;
-    module.updatedAt = updatedModule.updatedAt;
-    module.isBinary = updatedModule.isBinary;
-
-    if (!effects.vscode.isModuleOpened(module)) {
-      module.code = updatedModule.code;
-    }
-    const savedCode =
-      updatedModule.code === module.code ? null : updatedModule.code;
-
-    module.savedCode = savedCode;
-
-    if (savedCode === null) {
-      // If the savedCode is also module.code
-      effects.moduleRecover.remove(sandbox.id, module);
-      effects.vscode.syncModule(module);
-    }
-
-    if (
-      state.live.isLive &&
-      state.live.isCurrentEditor &&
-      !sandbox.featureFlags.comments
-    ) {
-      setTimeout(() => {
-        // Send the save event 50ms later so the operation can be sent first (the operation that says the
-        // file difference created by VSCode due to the file watch event). If the other client gets the save before the operation,
-        // the other client will also send an operation with the same difference resulting in a duplicate event.
-        effects.live.sendModuleSaved(module);
-      }, 50);
-    }
-
-    effects.vscode.sandboxFsSync.writeFile(state.editor.modulesByPath, module);
-
-    if (cbID) {
-      effects.vscode.callCallback(cbID);
-    }
-
-    // If the executor is a server we only should send updates if the sandbox has been
-    // started already
-    if (
-      !effects.executor.isServer() ||
-      state.server.containerStatus === ServerContainerStatus.SANDBOX_STARTED
-    ) {
-      effects.executor.updateFiles(sandbox);
-    }
-
-    if (sandbox.template === 'static') {
-      effects.preview.refresh();
-    }
-
-    await actions.editor.internal.updateCurrentTemplate();
-
-    effects.vscode.runCommand('workbench.action.keepEditor');
-  } catch (error) {
-    actions.internal.handleError({
-      message: 'There was a problem with saving the code, please try again',
-      error,
-    });
-    captureException(error);
-
-    if (cbID) {
-      effects.vscode.callCallbackError(cbID, error.message);
-    }
-  }
-};
-
-export const updateCurrentTemplate = async ({ effects, state }: Context) => {
-  if (!state.editor.currentSandbox) {
-    return;
-  }
-
-  try {
-    const currentTemplate = state.editor.currentSandbox.template;
-    const templateDefinition = getTemplateDefinition(currentTemplate);
-
-    // We always want to be able to update server template based on its detection.
-    // We only want to update the client template when it's explicitly specified
-    // in the sandbox configuration.
-    if (
-      templateDefinition.isServer ||
-      state.editor.parsedConfigurations?.sandbox?.parsed?.template
-    ) {
-      const { parsed = {} } = state.editor.parsedConfigurations?.package || {};
-
-      const modulesByPath = mapValues(state.editor.modulesByPath, module => ({
-        // No idea why this typing fails!
-        // @ts-ignore
-        content: module.code || '',
-        // @ts-ignore
-        isBinary: module.isBinary,
-      }));
-
-      // TODO: What is a template really? Two different kinds of templates here, need to fix the types
-      // Talk to Ives and Bogdan
-      const newTemplate = (computeTemplate(parsed, modulesByPath) ||
-        'node') as TemplateType;
-
-      if (
-        newTemplate !== currentTemplate &&
-        templateDefinition.isServer ===
-          getTemplateDefinition(newTemplate).isServer
-      ) {
-        state.editor.currentSandbox.template = newTemplate;
-        await effects.api.saveTemplate(
-          state.editor.currentSandbox.id,
-          newTemplate
-        );
-      }
-    }
-  } catch (e) {
-    // We don't want this to be blocking at all, it's low prio
-    if (process.env.NODE_ENV === 'development') {
-      console.error(e);
-    }
-  }
-};
-
-export const removeNpmDependencyFromPackageJson = async (
-  { state, actions }: Context,
-  name: string
-) => {
-  if (
-    !state.editor.currentSandbox ||
-    !state.editor.currentPackageJSONCode ||
-    !state.editor.currentPackageJSON
-  ) {
-    return;
-  }
-
-  const packageJson = JSON.parse(state.editor.currentPackageJSONCode);
-
-  delete packageJson.dependencies[name];
-
-  const code = JSON.stringify(packageJson, null, 2);
-  const moduleShortid = state.editor.currentPackageJSON.shortid;
-  const module = state.editor.currentSandbox.modules.find(
-    m => m.shortid === moduleShortid
-  );
-
-  if (!module) {
-    return;
-  }
-
-  actions.editor.setCode({ moduleShortid, code });
-
-  await actions.editor.codeSaved({
-    code,
-    moduleShortid,
-    cbID: null,
-  });
-};
-
-export const addNpmDependencyToPackageJson = async (
-  { state, actions }: Context,
-  {
-    name,
-    isDev,
-    version,
-  }: {
-    name: string;
-    version?: string;
-    isDev: boolean;
-  }
-) => {
-  if (
-    !state.editor.currentSandbox ||
-    !state.editor.currentPackageJSONCode ||
-    !state.editor.currentPackageJSON
-  ) {
-    return;
-  }
-
-  const packageJson = JSON.parse(state.editor.currentPackageJSONCode);
-
-  const type = isDev ? 'devDependencies' : 'dependencies';
-
-  packageJson[type] = packageJson[type] || {};
-  packageJson[type][name] = version || 'latest';
-  packageJson[type] = sortObjectByKeys(packageJson[type]);
-
-  const code = JSON.stringify(packageJson, null, 2);
-  const moduleShortid = state.editor.currentPackageJSON.shortid;
-
-  const module = state.editor.currentSandbox.modules.find(
-    m => m.shortid === moduleShortid
-  );
-
-  if (!module) {
-    return;
-  }
-
-  actions.editor.setCode({ moduleShortid, code });
-
-  await actions.editor.codeSaved({
-    code,
-    moduleShortid,
-    cbID: null,
-  });
-};
-
-export const updateModuleCode = (
-  { state, effects }: Context,
-  {
-    module,
-    code,
-  }: {
-    module: Module;
-    code: string;
-  }
-) => {
-  const { currentSandbox } = state.editor;
-
-  if (!currentSandbox) {
-    return;
-  }
-
-  if (module.savedCode === null) {
-    module.savedCode = module.code;
-  }
-
-  effects.vscode.runCommand('workbench.action.keepEditor');
-
-  const tabs = state.editor.tabs as ModuleTab[];
-  const tab = tabs.find(tabItem => tabItem.moduleShortid === module.shortid);
-
-  if (tab) {
-    tab.dirty = false;
-  }
-
-  module.code = code;
-  // Save the code to localStorage so we can recover in case of a crash
-  effects.moduleRecover.save(currentSandbox.id, currentSandbox.version, module);
-};
-
-// TODO: We can make this function simpler or we can also make a different convertSandbox
-// action for when we don't fork it, but change it to a v2 sandbox.
-export const forkSandbox = async (
-  { state, effects, actions }: Context,
-  {
-    sandboxId: id,
-    teamId,
-    body,
-    openInNewWindow = false,
-  }: {
-    sandboxId: string;
-    teamId?: string | null;
-    body?: { collectionId: string | undefined };
-    openInNewWindow?: boolean;
-  }
-) => {
-  const sandbox = state.editor.currentSandbox;
-  const currentSandboxId = state.editor.currentId;
-
-  if (!sandbox || !currentSandboxId) {
-    return;
-  }
-
-  const templateDefinition = getTemplateDefinition(
-    sandbox ? sandbox.template : null
-  );
-
-  // If the user is not signed in and the sandbox is exectued in a server container
-  // we can't fork.
-  if (!state.isLoggedIn && templateDefinition.isServer) {
-    // So we track this happens
-    effects.analytics.track('Show Server Fork Sign In Modal');
-    // And open a modal (alert) to show a sign in button
-    actions.modalOpened({ modal: 'forkServerModal' });
-
-    // Throwing an error here ensures that it get's caught in the "withOwnedSandbox" function
-    // when it tries to execute forkSandbox. When we just return instead of throwing the error
-    // is not caught and "withOwnedSandbox" will run its "continueAction" which, in case of the
-    // "codeSaved" function will continue to save code, with all kinds of actions and api calls.
-    throw new Error('ERR_ANON_SSE_FORK');
-  }
-
-  effects.analytics.track('Fork Sandbox', {
-    template: sandbox.customTemplate?.title,
-    sandboxId: sandbox.id,
-  });
-
-  try {
-    state.editor.isForkingSandbox = true;
-
-    const usedBody: {
-      collectionId?: string;
-      teamId?: string;
-    } = body || {};
-
-    if (state.user) {
-      if (teamId === undefined && state.activeTeam) {
-        usedBody.teamId = state.activeTeam;
-      } else if (teamId !== null) {
-        usedBody.teamId = teamId;
-      }
-    }
-
-    const forkedSandbox = await effects.api.forkSandbox(id, usedBody);
-
-    // Copy over any unsaved code
-    Object.assign(forkedSandbox, {
-      modules: forkedSandbox.modules.map(module => {
-        const foundEquivalentModule = sandbox.modules.find(
-          currentSandboxModule =>
-            currentSandboxModule.shortid === module.shortid
-        );
-
-        if (!foundEquivalentModule) {
-          return module;
-        }
-
-        return {
-          ...module,
-          savedCode: foundEquivalentModule.savedCode,
-          code: foundEquivalentModule.code,
-        };
-      }),
-    });
-
-    state.workspace.project.title = forkedSandbox.title || '';
-    state.workspace.project.description = forkedSandbox.description || '';
-    state.workspace.project.alias = forkedSandbox.alias || '';
-
-    effects.vscode.clearComments();
-    Object.assign(state.editor.sandboxes[currentSandboxId]!, forkedSandbox);
-    state.editor.modulesByPath = effects.vscode.sandboxFsSync.create(
-      forkedSandbox
-    );
-    effects.preview.updateAddressbarUrl();
-
-    if (templateDefinition.isServer) {
-      effects.preview.refresh();
-      actions.server.startContainer(forkedSandbox);
-    }
-
-    if (state.workspace.openedWorkspaceItem === 'project-summary') {
-      actions.workspace.openDefaultItem();
-    }
-
-    effects.notificationToast.success('Forked sandbox!');
-
-    if (templateDefinition.isServer) {
-      actions.editor.showEnvironmentVariablesNotification();
-    }
-
-    effects.router.updateSandboxUrl(forkedSandbox, { openInNewWindow });
-
-    if (sandbox.originalGit) {
-      actions.git.loadGitSource();
-    }
-
-    actions.internal.currentSandboxChanged();
-    await actions.getSandboxesLimits();
-  } catch (error) {
-    const errorMessage = actions.internal.getErrorMessage({ error });
-
-    if (errorMessage.includes('DRAFT_LIMIT')) {
-      effects.notificationToast.add({
-        title: 'Cannot create draft',
-        message:
-          'Your drafts folder is full. Delete unneeded drafts, or upgrade to Pro for unlimited drafts.',
-        status: NotificationStatus.ERROR,
-      });
-    } else {
-      actions.internal.handleError({
-        message: 'We were unable to fork the sandbox',
-        error,
-      });
-    }
-
-    state.editor.isForkingSandbox = false;
-    throw error;
-  }
-};
-
-export const setCurrentModule = async (
-  { state, effects }: Context,
-  module: Module
-) => {
-  state.editor.currentTabId = null;
-
-  const tabs = state.editor.tabs as ModuleTab[];
-  const tab = tabs.find(tabItem => tabItem.moduleShortid === module.shortid);
-
-  if (!tab) {
-    const dirtyTabIndex = tabs.findIndex(tabItem => tabItem.dirty);
-    const newTab: ModuleTab = {
-      type: TabType.MODULE,
-      moduleShortid: module.shortid,
-      dirty: true,
-    };
-
-    if (dirtyTabIndex >= 0) {
-      state.editor.tabs.splice(dirtyTabIndex, 1, newTab);
-    } else {
-      state.editor.tabs.splice(0, 0, newTab);
-    }
-  }
-
-  state.editor.currentModuleShortid = module.shortid;
-  await effects.vscode.openModule(module);
-  effects.vscode.setErrors(state.editor.errors);
-  effects.vscode.setCorrections(state.editor.corrections);
-};
-
-export const updateSandboxPackageJson = async ({ state, actions }: Context) => {
-  const sandbox = state.editor.currentSandbox;
-
-  if (
-    !sandbox ||
-    !state.editor.parsedConfigurations?.package?.parsed ||
-    !state.editor.currentPackageJSON
-  ) {
-    return;
-  }
-
-  if (!hasPermission(sandbox.authorization, 'write_code')) {
-    return;
-  }
-
-  const { parsed } = state.editor.parsedConfigurations.package;
-
-  parsed.keywords = sandbox.tags;
-  parsed.name = slugify(sandbox.title || sandbox.id);
-  parsed.description = sandbox.description;
-
-  const code = JSON.stringify(parsed, null, 2);
-  const moduleShortid = state.editor.currentPackageJSON.shortid;
-
-  const module = sandbox.modules.find(m => m.shortid === moduleShortid);
-
-  if (!module) {
-    return;
-  }
-
-  actions.editor.setCode({ moduleShortid, code });
-
-  await actions.editor.codeSaved({
-    code,
-    moduleShortid,
-    cbID: null,
-  });
-};
-
-export const updateDevtools = async (
-  { state, actions }: Context,
-  viewConfig: ViewConfig[]
-) => {
-  if (!state.editor.currentSandbox) {
-    return;
-  }
-
-  await actions.files.updateWorkspaceConfig({
-    preview: viewConfig,
-  });
-};
-
-export const updatePreviewCode = ({ state, effects }: Context) => {
-  if (state.preferences.settings.instantPreviewEnabled) {
-    effects.preview.executeCodeImmediately();
-  } else {
-    effects.preview.executeCode();
-  }
-};
diff --git a/packages/app/src/app/overmind/namespaces/editor/state.ts b/packages/app/src/app/overmind/namespaces/editor/state.ts
deleted file mode 100755
index 135e60dd5c5..00000000000
--- a/packages/app/src/app/overmind/namespaces/editor/state.ts
+++ /dev/null
@@ -1,354 +0,0 @@
-import getTemplate from '@codesandbox/common/lib/templates';
-import { generateFileFromSandbox } from '@codesandbox/common/lib/templates/configuration/package-json';
-import { getPreviewTabs } from '@codesandbox/common/lib/templates/devtools';
-import {
-  ParsedConfigurationFiles,
-  ViewConfig,
-} from '@codesandbox/common/lib/templates/template';
-import {
-  DevToolsTabPosition,
-  DiffTab,
-  Directory,
-  Module,
-  ModuleCorrection,
-  ModuleError,
-  ModuleTab,
-  Sandbox,
-  SandboxFs,
-  Tabs,
-  WindowOrientation,
-} from '@codesandbox/common/lib/types';
-import { getSandboxOptions } from '@codesandbox/common/lib/url';
-import { CollaboratorFragment, InvitationFragment } from 'app/graphql/types';
-import { RecoverData } from 'app/overmind/effects/moduleRecover';
-import immer from 'immer';
-import { derived } from 'overmind';
-
-import { mainModule as getMainModule } from '../../utils/main-module';
-import { parseConfigurations } from '../../utils/parse-configurations';
-
-type State = {
-  /**
-   * Never use this! It doesn't reflect the id of the current sandbox. Use editor.currentSandbox.id instead.
-   */
-  currentId: string | null;
-  currentModuleShortid: string | null;
-  isForkingSandbox: boolean;
-  mainModuleShortid: string | null;
-  sandboxes: {
-    [id: string]: Sandbox;
-  };
-  collaborators: CollaboratorFragment[];
-  invitations: InvitationFragment[];
-  // TODO: What is this really? Could not find it in Cerebral, but
-  // EditorPreview is using it... weird stuff
-  devToolTabs: ViewConfig[];
-  isLoading: boolean;
-  error: {
-    status: number;
-    message: string;
-  } | null;
-  isResizing: boolean;
-  changedModuleShortids: string[];
-  currentTabId: string | null;
-  tabs: Tabs;
-  errors: ModuleError[];
-  corrections: ModuleCorrection[];
-  isInProjectView: boolean;
-  initialPath: string;
-  highlightedLines: number[];
-  isUpdatingPrivacy: boolean;
-  quickActionsOpen: boolean;
-  previewWindowVisible: boolean;
-  workspaceConfigCode: string;
-  workspaceConfig: {
-    'responsive-preview'?: {
-      [preset: string]: [number, number];
-    };
-  } | null;
-  statusBar: boolean;
-  previewWindowOrientation: WindowOrientation;
-  canWriteCode: boolean;
-  isAllModulesSynced: boolean;
-  currentSandbox: Sandbox | null;
-  currentModule: Module;
-  mainModule: Module | null;
-  currentPackageJSON: Module | null;
-  currentPackageJSONCode: string | null;
-  parsedConfigurations: ParsedConfigurationFiles | null;
-  currentTab: ModuleTab | DiffTab | undefined;
-  modulesByPath: SandboxFs;
-  isAdvancedEditor: boolean;
-  shouldDirectoryBeOpen: (params: {
-    directoryId: string;
-    module?: Module;
-  }) => boolean;
-  currentDevToolsPosition: DevToolsTabPosition;
-  sessionFrozen: boolean;
-  hasLoadedInitialModule: boolean;
-  recoveredFiles: Array<{ recoverData: RecoverData; module: Module }>;
-};
-
-export const state: State = {
-  hasLoadedInitialModule: false,
-  sandboxes: {},
-  currentId: null,
-  isForkingSandbox: false,
-  currentModuleShortid: null,
-  mainModuleShortid: null,
-  isLoading: true,
-  error: null,
-  isResizing: false,
-  modulesByPath: {},
-  collaborators: [],
-  invitations: [],
-  changedModuleShortids: derived(({ currentSandbox }: State) => {
-    if (!currentSandbox) {
-      return [];
-    }
-
-    return currentSandbox.modules.reduce((aggr, module) => {
-      if (module.savedCode !== null && module.savedCode !== module.code) {
-        return aggr.concat(module.shortid);
-      }
-
-      return aggr;
-    }, [] as string[]);
-  }),
-  currentTabId: null,
-  tabs: [],
-  errors: [],
-  sessionFrozen: true,
-  corrections: [],
-  isInProjectView: false,
-  initialPath: '/',
-  highlightedLines: [],
-  isUpdatingPrivacy: false,
-  quickActionsOpen: false,
-  previewWindowVisible: true,
-  statusBar: true,
-  recoveredFiles: [],
-  previewWindowOrientation:
-    window.innerHeight / window.innerWidth > 0.9
-      ? WindowOrientation.HORIZONTAL
-      : WindowOrientation.VERTICAL,
-
-  /**
-   * Normally we save this code in a file (.codesandbox/workspace.json), however, when someone
-   * doesn't own a sandbox and changes the UI we don't want to fork the sandbox (yet). That's
-   * why we introduce this field until we have datasources. When we have datasources we can store
-   * the actual content in the localStorage.
-   */
-  workspaceConfigCode: '',
-  workspaceConfig: derived(
-    ({ currentSandbox, modulesByPath, workspaceConfigCode }: State) => {
-      if (!currentSandbox) {
-        return null;
-      }
-      let workspaceConfig;
-
-      try {
-        workspaceConfig = JSON.parse(
-          (modulesByPath['/.codesandbox/workspace.json'] as Module).code
-        );
-      } catch {
-        // nothing
-      }
-
-      if (currentSandbox.owned) {
-        return modulesByPath['/.codesandbox/workspace.json']
-          ? workspaceConfig
-          : null;
-      }
-
-      return workspaceConfigCode ? JSON.parse(workspaceConfigCode) : null;
-    }
-  ),
-  currentDevToolsPosition: {
-    devToolIndex: 0,
-    tabPosition: 0,
-  },
-  canWriteCode: derived(
-    ({ currentSandbox }: State) =>
-      currentSandbox?.authorization === 'write_code'
-  ),
-  currentSandbox: derived(({ sandboxes, currentId }: State) => {
-    if (currentId && sandboxes[currentId]) {
-      return sandboxes[currentId];
-    }
-
-    return null;
-  }),
-
-  isAllModulesSynced: derived(
-    ({ changedModuleShortids }: State) => !changedModuleShortids.length
-  ),
-  currentModule: derived(
-    ({ currentSandbox, currentModuleShortid }: State) =>
-      (currentSandbox &&
-        currentSandbox.modules.find(
-          module => module.shortid === currentModuleShortid
-        )) ||
-      ({} as Module)
-  ),
-  currentTab: derived(({ currentTabId, currentModuleShortid, tabs }: State) => {
-    if (currentTabId) {
-      const foundTab = tabs.find(tab => 'id' in tab && tab.id === currentTabId);
-
-      if (foundTab) {
-        return foundTab;
-      }
-    }
-
-    return tabs.find(
-      tab =>
-        'moduleShortid' in tab && tab.moduleShortid === currentModuleShortid
-    );
-  }),
-  /**
-   * We have two types of editors in CodeSandbox: an editor focused on smaller projects and
-   * an editor that works with bigger projects that run on a container. The advanced editor
-   * only has added features, so it's a subset on top of the existing editor.
-   */
-  isAdvancedEditor: derived(({ currentSandbox }: State) => {
-    if (!currentSandbox) {
-      return false;
-    }
-
-    const { isServer } = getTemplate(currentSandbox.template);
-
-    return isServer && currentSandbox.owned;
-  }),
-  parsedConfigurations: derived(({ currentSandbox }: State) =>
-    currentSandbox ? parseConfigurations(currentSandbox) : null
-  ),
-  mainModule: derived(({ currentSandbox, parsedConfigurations }: State) =>
-    currentSandbox ? getMainModule(currentSandbox, parsedConfigurations) : null
-  ),
-  currentPackageJSON: derived(({ currentSandbox }: State) => {
-    if (!currentSandbox) {
-      return null;
-    }
-
-    const module = currentSandbox.modules.find(
-      m => m.directoryShortid == null && m.title === 'package.json'
-    );
-
-    return module || null;
-  }),
-  currentPackageJSONCode: derived(
-    ({ currentSandbox, currentPackageJSON }: State) => {
-      if (!currentPackageJSON || !currentSandbox) {
-        return null;
-      }
-
-      return currentPackageJSON.code
-        ? currentPackageJSON.code
-        : generateFileFromSandbox(currentSandbox);
-    }
-  ),
-  shouldDirectoryBeOpen: derived(
-    ({ currentSandbox, currentModule }: State) => ({
-      directoryId,
-      module = currentModule,
-    }) => {
-      if (!currentSandbox) {
-        return false;
-      }
-
-      const { modules, directories } = currentSandbox;
-      const currentModuleId = module.id;
-      const currentModuleParents = getModuleParents(
-        modules,
-        directories,
-        currentModuleId
-      );
-
-      const isParentOfModule = currentModuleParents.includes(directoryId);
-
-      return isParentOfModule;
-    }
-  ),
-  devToolTabs: derived(
-    ({
-      currentSandbox: sandbox,
-      parsedConfigurations,
-      workspaceConfigCode: intermediatePreviewCode,
-    }: State) => {
-      if (!sandbox || !parsedConfigurations) {
-        return [];
-      }
-
-      const views = getPreviewTabs(
-        sandbox,
-        parsedConfigurations,
-        intermediatePreviewCode
-      );
-
-      // Do it in an immutable manner, prevents changing the original object
-      return immer(views, draft => {
-        const sandboxConfig = sandbox.modules.find(
-          x => x.directoryShortid == null && x.title === 'sandbox.config.json'
-        );
-        let view = 'browser';
-        if (sandboxConfig) {
-          try {
-            view = JSON.parse(sandboxConfig.code || '').view || 'browser';
-          } catch (e) {
-            /* swallow */
-          }
-        }
-
-        const sandboxOptions = getSandboxOptions(location.href);
-        if (
-          sandboxOptions.previewWindow &&
-          (sandboxOptions.previewWindow === 'tests' ||
-            sandboxOptions.previewWindow === 'console')
-        ) {
-          // Backwards compatibility for ?previewwindow=
-
-          view = sandboxOptions.previewWindow;
-        }
-
-        if (view !== 'browser') {
-          // Backwards compatibility for sandbox.config.json
-          if (view === 'console') {
-            draft[0].views = draft[0].views.filter(
-              t => t.id !== 'codesandbox.console'
-            );
-            draft[0].views.unshift({ id: 'codesandbox.console' });
-          } else if (view === 'tests') {
-            draft[0].views = draft[0].views.filter(
-              t => t.id !== 'codesandbox.tests'
-            );
-            draft[0].views.unshift({ id: 'codesandbox.tests' });
-          }
-        }
-      });
-    }
-  ),
-};
-
-// This should be moved somewhere else
-function getModuleParents(
-  modules: Module[],
-  directories: Directory[],
-  id: string
-): string[] {
-  const module = modules.find(moduleEntry => moduleEntry.id === id);
-
-  if (!module) return [];
-
-  let directory = directories.find(
-    directoryEntry => directoryEntry.shortid === module.directoryShortid
-  );
-  let directoryIds: string[] = [];
-  while (directory != null) {
-    directoryIds = [...directoryIds, directory!.id];
-    directory = directories.find(
-      directoryEntry => directoryEntry.shortid === directory!.directoryShortid // eslint-disable-line
-    );
-  }
-
-  return directoryIds;
-}
diff --git a/packages/app/src/app/overmind/namespaces/files/actions.ts b/packages/app/src/app/overmind/namespaces/files/actions.ts
deleted file mode 100755
index 643f9d563d1..00000000000
--- a/packages/app/src/app/overmind/namespaces/files/actions.ts
+++ /dev/null
@@ -1,1078 +0,0 @@
-import {
-  getDirectoryPath,
-  getModulePath,
-  getModulesAndDirectoriesInDirectory,
-} from '@codesandbox/common/lib/sandbox/modules';
-import getDefinition from '@codesandbox/common/lib/templates';
-import { Directory, Module, UploadFile } from '@codesandbox/common/lib/types';
-import { getTextOperation } from '@codesandbox/common/lib/utils/diff';
-import { hasPermission } from '@codesandbox/common/lib/utils/permission';
-import { Context } from 'app/overmind';
-import { RecoverData } from 'app/overmind/effects/moduleRecover';
-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,
-  resolveModuleWrapped,
-} from '../../utils/resolve-module-wrapped';
-import * as internalActions from './internalActions';
-
-export const internal = internalActions;
-
-export const applyRecover = (
-  { state, effects, actions }: Context,
-  recoveredList: Array<{
-    module: Module;
-    recoverData: RecoverData;
-  }>
-) => {
-  if (!state.editor.currentSandbox) {
-    return;
-  }
-
-  effects.moduleRecover.clearSandbox(state.editor.currentSandbox.id);
-  recoveredList.forEach(({ recoverData, module }) => {
-    actions.editor.codeChanged({
-      moduleShortid: module.shortid,
-      code: recoverData.code,
-    });
-    effects.vscode.setModuleCode(module);
-  });
-
-  effects.analytics.track('Files Recovered', {
-    fileCount: recoveredList.length,
-  });
-};
-
-export const createRecoverDiffs = (
-  { state, effects, actions }: Context,
-  recoveredList: Array<{
-    module: Module;
-    recoverData: RecoverData;
-  }>
-) => {
-  const sandbox = state.editor.currentSandbox;
-  if (!sandbox) {
-    return;
-  }
-  effects.moduleRecover.clearSandbox(sandbox.id);
-  recoveredList.forEach(({ recoverData, module }) => {
-    const oldCode = module.code;
-    actions.editor.codeChanged({
-      moduleShortid: module.shortid,
-      code: recoverData.code,
-    });
-    effects.vscode.openDiff(sandbox.id, module, oldCode);
-  });
-
-  effects.analytics.track('Files Recovered', {
-    fileCount: recoveredList.length,
-  });
-};
-
-export const discardRecover = ({ effects, state }: Context) => {
-  if (!state.editor.currentSandbox) {
-    return;
-  }
-  effects.moduleRecover.clearSandbox(state.editor.currentSandbox.id);
-};
-
-export const moduleRenamed = withOwnedSandbox(
-  async (
-    { state, actions, effects }: Context,
-    {
-      title,
-      moduleShortid,
-    }: {
-      title: string;
-      moduleShortid: string;
-    }
-  ) => {
-    const sandbox = state.editor.currentSandbox;
-    if (!sandbox) {
-      return;
-    }
-    const module = sandbox.modules.find(
-      moduleItem => moduleItem.shortid === moduleShortid
-    );
-
-    if (!module || !module.id) {
-      return;
-    }
-
-    const oldTitle = module.title;
-    const oldPath = module.path;
-
-    module.title = title;
-    module.path = getModulePath(
-      sandbox.modules,
-      sandbox.directories,
-      module.id
-    );
-
-    effects.vscode.sandboxFsSync.rename(
-      state.editor.modulesByPath,
-      oldPath!,
-      module.path
-    );
-
-    await effects.vscode.updateTabsPath(oldPath!, module.path);
-
-    if (state.editor.currentModuleShortid === module.shortid) {
-      effects.vscode.openModule(module);
-    }
-
-    actions.editor.internal.updatePreviewCode();
-    try {
-      await effects.api.saveModuleTitle(sandbox.id, moduleShortid, title);
-
-      if (state.live.isCurrentEditor) {
-        effects.live.sendModuleUpdate(module);
-      }
-      effects.executor.updateFiles(sandbox);
-    } catch (error) {
-      module.title = oldTitle;
-      state.editor.modulesByPath = effects.vscode.sandboxFsSync.create(sandbox);
-
-      if (state.editor.currentModuleShortid === module.shortid) {
-        effects.vscode.openModule(module);
-      }
-
-      actions.editor.internal.updatePreviewCode();
-
-      actions.internal.handleError({ message: 'Could not rename file', error });
-    }
-  },
-  async () => {},
-  'write_code'
-);
-
-export const directoryCreated = withOwnedSandbox(
-  async (
-    { state, effects, actions }: Context,
-    {
-      title,
-      directoryShortid,
-    }: {
-      title: string;
-      directoryShortid: string;
-    }
-  ) => {
-    const sandbox = state.editor.currentSandbox;
-    if (!sandbox) {
-      return;
-    }
-    const optimisticId = effects.utils.createOptimisticId();
-    const optimisticDirectory = {
-      id: optimisticId,
-      title,
-      directoryShortid,
-      shortid: effects.utils.createOptimisticId(),
-      sourceId: sandbox.sourceId,
-      insertedAt: new Date().toString(),
-      updatedAt: new Date().toString(),
-      type: 'directory' as 'directory',
-      path: (null as unknown) as string,
-    };
-
-    sandbox.directories.push(optimisticDirectory as Directory);
-    optimisticDirectory.path = getDirectoryPath(
-      sandbox.modules,
-      sandbox.directories,
-      optimisticId
-    );
-    effects.vscode.sandboxFsSync.mkdir(
-      state.editor.modulesByPath,
-      optimisticDirectory
-    );
-
-    try {
-      const newDirectory = await effects.api.createDirectory(
-        sandbox.id,
-        directoryShortid,
-        title
-      );
-      const directory = sandbox.directories.find(
-        directoryItem => directoryItem.shortid === optimisticDirectory.shortid
-      );
-
-      if (!directory) {
-        effects.notificationToast.error(
-          'Could not find saved directory, please refresh and try again'
-        );
-        return;
-      }
-
-      Object.assign(directory, {
-        id: newDirectory.id,
-        shortid: newDirectory.shortid,
-      });
-
-      effects.live.sendDirectoryCreated(directory);
-      effects.executor.updateFiles(sandbox);
-    } catch (error) {
-      const directoryIndex = sandbox.directories.findIndex(
-        directoryItem => directoryItem.shortid === optimisticDirectory.shortid
-      );
-
-      sandbox.directories.splice(directoryIndex, 1);
-      state.editor.modulesByPath = effects.vscode.sandboxFsSync.create(sandbox);
-      actions.internal.handleError({
-        message: 'Unable to save new directory',
-        error,
-      });
-    }
-  },
-  async () => {},
-  'write_code'
-);
-
-export const moduleMovedToDirectory = withOwnedSandbox(
-  async (
-    { state, actions, effects }: Context,
-    {
-      moduleShortid,
-      directoryShortid,
-    }: {
-      moduleShortid: string;
-      directoryShortid: string;
-    }
-  ) => {
-    const sandbox = state.editor.currentSandbox;
-    if (!sandbox) {
-      return;
-    }
-    const module = sandbox.modules.find(
-      moduleItem => moduleItem.shortid === moduleShortid
-    );
-
-    if (!module || !module.id) {
-      return;
-    }
-
-    const currentDirectoryShortid = module.directoryShortid;
-    const oldPath = module.path;
-
-    module.directoryShortid = directoryShortid;
-    module.path = getModulePath(
-      sandbox.modules,
-      sandbox.directories,
-      module.id
-    );
-
-    effects.vscode.sandboxFsSync.rename(
-      state.editor.modulesByPath,
-      oldPath!,
-      module.path
-    );
-    effects.vscode.openModule(module);
-    actions.editor.internal.updatePreviewCode();
-    try {
-      await effects.api.saveModuleDirectory(
-        sandbox.id,
-        moduleShortid,
-        directoryShortid
-      );
-      effects.live.sendModuleUpdate(module);
-      effects.executor.updateFiles(sandbox);
-    } catch (error) {
-      module.directoryShortid = currentDirectoryShortid;
-      module.path = oldPath;
-      state.editor.modulesByPath = effects.vscode.sandboxFsSync.create(sandbox);
-      actions.internal.handleError({
-        message: 'Could not save new module location',
-        error,
-      });
-    }
-
-    if (sandbox.originalGit) {
-      actions.git.updateGitChanges();
-    }
-  },
-  async () => {},
-  'write_code'
-);
-
-export const directoryMovedToDirectory = withOwnedSandbox(
-  async (
-    { state, actions, effects }: Context,
-    {
-      shortid,
-      directoryShortid,
-    }: {
-      shortid: string;
-      directoryShortid: string;
-    }
-  ) => {
-    const sandbox = state.editor.currentSandbox;
-    if (!sandbox) {
-      return;
-    }
-    const directoryToMove = sandbox.directories.find(
-      directoryItem => directoryItem.shortid === shortid
-    );
-
-    if (!directoryToMove) {
-      return;
-    }
-
-    const oldPath = directoryToMove.path;
-
-    directoryToMove.directoryShortid = directoryShortid;
-    directoryToMove.path = getDirectoryPath(
-      sandbox.modules,
-      sandbox.directories,
-      directoryToMove.id
-    );
-
-    // We have to recreate the whole thing as many files and folders
-    // might have changed their path
-    state.editor.modulesByPath = effects.vscode.sandboxFsSync.create(sandbox);
-    actions.editor.internal.updatePreviewCode();
-    try {
-      await effects.api.saveDirectoryDirectory(
-        sandbox.id,
-        shortid,
-        directoryShortid
-      );
-      effects.live.sendDirectoryUpdate(directoryToMove);
-      effects.executor.updateFiles(sandbox);
-    } catch (error) {
-      directoryToMove.directoryShortid = shortid;
-      directoryToMove.path = oldPath;
-      state.editor.modulesByPath = effects.vscode.sandboxFsSync.create(sandbox);
-      actions.internal.handleError({
-        message: 'Could not save new directory location',
-        error,
-      });
-    }
-
-    if (sandbox.originalGit) {
-      actions.git.updateGitChanges();
-    }
-  },
-  async () => {},
-  'write_code'
-);
-
-export const directoryDeleted = withOwnedSandbox(
-  async (
-    { state, actions, effects }: Context,
-    {
-      directoryShortid,
-    }: {
-      directoryShortid: string;
-    }
-  ) => {
-    const sandbox = state.editor.currentSandbox;
-    if (!sandbox) {
-      return;
-    }
-    const directory = sandbox.directories.find(
-      directoryItem => directoryItem.shortid === directoryShortid
-    );
-
-    if (!directory) {
-      return;
-    }
-
-    const removedDirectory = sandbox.directories.splice(
-      sandbox.directories.indexOf(directory),
-      1
-    )[0];
-    const {
-      removedModules,
-      removedDirectories,
-    } = getModulesAndDirectoriesInDirectory(
-      removedDirectory,
-      sandbox.modules,
-      sandbox.directories
-    );
-
-    removedModules.forEach(removedModule => {
-      effects.vscode.sandboxFsSync.unlink(
-        state.editor.modulesByPath,
-        removedModule
-      );
-      sandbox.modules.splice(sandbox.modules.indexOf(removedModule), 1);
-    });
-
-    removedDirectories.forEach(removedDirectoryItem => {
-      sandbox.directories.splice(
-        sandbox.directories.indexOf(removedDirectoryItem),
-        1
-      );
-    });
-
-    // We open the main module as we do not really know if you had opened
-    // any nested file of this directory. It would require complex logic
-    // to figure that out. This concept is soon removed anyways
-    if (state.editor.mainModule)
-      effects.vscode.openModule(state.editor.mainModule);
-    actions.editor.internal.updatePreviewCode();
-    try {
-      await effects.api.deleteDirectory(sandbox.id, directoryShortid);
-      effects.live.sendDirectoryDeleted(directoryShortid);
-      effects.executor.updateFiles(sandbox);
-    } catch (error) {
-      sandbox.directories.push(removedDirectory);
-
-      removedModules.forEach(removedModule => {
-        sandbox.modules.push(removedModule);
-      });
-      removedDirectories.forEach(removedDirectoryItem => {
-        sandbox.directories.push(removedDirectoryItem);
-      });
-      state.editor.modulesByPath = effects.vscode.sandboxFsSync.create(sandbox);
-      actions.internal.handleError({
-        message: 'Could not delete directory',
-        error,
-      });
-    }
-
-    if (sandbox.originalGit) {
-      actions.git.updateGitChanges();
-    }
-  },
-  async () => {},
-  'write_code'
-);
-
-export const directoryRenamed = withOwnedSandbox(
-  async (
-    { effects, actions, state }: Context,
-    {
-      title,
-      directoryShortid,
-    }: {
-      title: string;
-      directoryShortid: string;
-    }
-  ) => {
-    const sandbox = state.editor.currentSandbox;
-    if (!sandbox) {
-      return;
-    }
-    const directory = sandbox.directories.find(
-      directoryEntry => directoryEntry.shortid === directoryShortid
-    );
-
-    if (!directory) {
-      return;
-    }
-
-    const oldTitle = directory.title;
-
-    actions.files.internal.renameDirectoryInState({
-      directory,
-      sandbox,
-      title,
-    });
-
-    actions.editor.internal.updatePreviewCode();
-    try {
-      await effects.api.saveDirectoryTitle(sandbox.id, directoryShortid, title);
-
-      if (state.live.isCurrentEditor) {
-        effects.live.sendDirectoryUpdate(directory);
-      }
-
-      effects.executor.updateFiles(sandbox);
-    } catch (error) {
-      actions.files.internal.renameDirectoryInState({
-        directory,
-        sandbox,
-        title: oldTitle,
-      });
-      actions.internal.handleError({
-        message: 'Could not rename directory',
-        error,
-      });
-    }
-  },
-  async () => {},
-  'write_code'
-);
-
-export const gotUploadedFiles = async (
-  { state, actions, effects }: Context,
-  message: string
-) => {
-  const modal = 'storageManagement';
-  effects.analytics.track('Open Modal', { modal });
-  state.currentModalMessage = message;
-  state.currentModal = modal;
-
-  try {
-    const uploadedFilesInfo = await effects.api.getUploads();
-
-    state.uploadedFiles = uploadedFilesInfo.uploads;
-    state.maxStorage = uploadedFilesInfo.maxSize;
-    state.usedStorage = uploadedFilesInfo.currentSize;
-  } catch (error) {
-    actions.internal.handleError({
-      message: 'Unable to get uploaded files information',
-      error,
-    });
-  }
-};
-
-export const addedFileToSandbox = withOwnedSandbox(
-  async (
-    { actions, effects, state }: Context,
-    { name, url }: Pick<UploadFile, 'name' | 'url'>
-  ) => {
-    if (!state.editor.currentSandbox) {
-      return;
-    }
-    actions.internal.closeModals(false);
-    await actions.files.moduleCreated({
-      title: name,
-      directoryShortid: null,
-      code: url,
-      isBinary: true,
-    });
-
-    effects.executor.updateFiles(state.editor.currentSandbox);
-
-    if (state.editor.currentSandbox.originalGit) {
-      actions.git.updateGitChanges();
-    }
-  },
-  async () => {},
-  'write_code'
-);
-
-export const deletedUploadedFile = async (
-  { actions, effects, state }: Context,
-  id: string
-) => {
-  if (!state.uploadedFiles) {
-    return;
-  }
-  const index = state.uploadedFiles.findIndex(file => file.id === id);
-  const removedFiles = state.uploadedFiles.splice(index, 1);
-
-  try {
-    await effects.api.deleteUploadedFile(id);
-  } catch (error) {
-    state.uploadedFiles.splice(index, 0, ...removedFiles);
-    actions.internal.handleError({
-      message: 'Unable to delete uploaded file',
-      error,
-    });
-  }
-};
-
-export const filesUploaded = withOwnedSandbox(
-  async (
-    { state, effects, actions }: Context,
-    {
-      files,
-      directoryShortid,
-    }: {
-      files: { [k: string]: { dataURI: string; type: string } };
-      directoryShortid: string;
-    }
-  ) => {
-    const sandbox = state.editor.currentSandbox;
-    if (!sandbox) {
-      return;
-    }
-
-    const modal = 'uploading';
-    effects.analytics.track('Open Modal', { modal });
-    // What message?
-    // state.currentModalMessage = message;
-    state.currentModal = modal;
-
-    try {
-      const { modules, directories } = await actions.files.internal.uploadFiles(
-        {
-          files,
-          directoryShortid,
-        }
-      );
-
-      actions.files.massCreateModules({
-        modules,
-        directories,
-        directoryShortid,
-      });
-
-      effects.executor.updateFiles(sandbox);
-      actions.git.updateGitChanges();
-    } catch (error) {
-      if (error.message.indexOf('413') !== -1) {
-        actions.internal.handleError({
-          message: `The uploaded file is bigger than 7MB, please upgrade to PRO for 30MB limits.`,
-          error,
-          hideErrorMessage: true,
-        });
-      } else {
-        actions.internal.handleError({
-          message: 'Unable to upload files',
-          error,
-        });
-      }
-    }
-
-    actions.internal.closeModals(false);
-  },
-  async () => {},
-  'write_code'
-);
-
-type File = { [k: string]: { dataURI: string; type: string } };
-export const thumbnailToBeCropped = withOwnedSandbox(
-  async ({ state, actions }: Context, { file }: { file: File }) => {
-    const sandbox = state.editor.currentSandbox;
-    if (!sandbox) {
-      return;
-    }
-
-    const fileName = Object.keys(file)[0];
-
-    // if it's a gif we can't crop it, just upload it
-    if (fileName.split('.').pop() === 'gif') {
-      await actions.files.thumbnailUploaded({ file });
-
-      return;
-    }
-    state.workspace.activeThumb = file;
-    state.currentModal = 'cropThumbnail';
-  },
-  async () => {},
-  'write_code'
-);
-
-export const thumbnailUploaded = async (
-  { state, effects, actions }: Context,
-  { file }: { file: File }
-) => {
-  const sandbox = state.editor.currentSandbox;
-  if (!sandbox) {
-    return;
-  }
-  const thumb = sandbox.modules.find(m => m.path.includes('/thumbnail.'));
-  state.workspace.uploadingThumb = true;
-  if (thumb) {
-    await actions.files.moduleDeleted({ moduleShortid: thumb.shortid });
-  }
-  state.currentModal = 'uploading';
-  try {
-    const { modules, directories } = await actions.files.internal.uploadFiles({
-      files: file,
-      directoryShortid: '',
-    });
-
-    actions.files.massCreateModules({
-      modules,
-      directories,
-      directoryShortid: null,
-    });
-
-    effects.executor.updateFiles(sandbox);
-    actions.git.updateGitChanges();
-    effects.notificationToast.success('Thumbnail image updated');
-  } catch (error) {
-    if (error.message.indexOf('413') !== -1) {
-      actions.internal.handleError({
-        message: `The uploaded file is bigger than 7MB, please upgrade to PRO for 30MB limits.`,
-        error,
-        hideErrorMessage: true,
-      });
-    } else {
-      actions.internal.handleError({
-        message: 'Unable to upload files',
-        error,
-      });
-    }
-  }
-  state.workspace.uploadingThumb = false;
-  actions.internal.closeModals(false);
-};
-
-export const massCreateModules = withOwnedSandbox(
-  async (
-    { state, actions, effects }: Context,
-    {
-      modules,
-      directories,
-      directoryShortid,
-      cbID,
-    }: {
-      modules: any;
-      directories: any;
-      directoryShortid: string | null;
-      cbID?: string;
-    }
-  ) => {
-    const sandbox = state.editor.currentSandbox;
-    if (!sandbox) {
-      return;
-    }
-    const sandboxId = sandbox.id;
-
-    try {
-      const data = await effects.api.massCreateModules(
-        sandboxId,
-        directoryShortid,
-        modules,
-        directories
-      );
-
-      sandbox.modules = sandbox.modules.concat(data.modules);
-      sandbox.directories = sandbox.directories.concat(data.directories);
-
-      state.editor.modulesByPath = effects.vscode.sandboxFsSync.create(sandbox);
-
-      actions.editor.internal.updatePreviewCode();
-
-      // This can happen if you have selected a deleted file in VSCode and try to save it,
-      // we want to select it again
-      if (!state.editor.currentModuleShortid) {
-        const lastAddedModule = sandbox.modules[sandbox.modules.length - 1];
-
-        actions.editor.internal.setCurrentModule(lastAddedModule);
-      }
-
-      if (state.live.isCurrentEditor) {
-        effects.live.sendMassCreatedModules(data.modules, data.directories);
-      }
-
-      if (cbID) {
-        effects.vscode.callCallback(cbID);
-      }
-
-      effects.executor.updateFiles(sandbox);
-    } catch (error) {
-      if (cbID) {
-        effects.vscode.callCallbackError(cbID, error.message);
-      }
-
-      actions.internal.handleError({
-        message: 'Unable to create new files',
-        error,
-      });
-    }
-  },
-  async () => {},
-  'write_code'
-);
-
-export const moduleCreated = withOwnedSandbox(
-  async (
-    { state, actions, effects }: Context,
-    {
-      title,
-      directoryShortid,
-      code,
-      isBinary,
-    }: {
-      title: string;
-      directoryShortid: string | null;
-      code?: string;
-      isBinary?: boolean;
-    }
-  ) => {
-    const sandbox = state.editor.currentSandbox;
-    if (!sandbox) {
-      return;
-    }
-    const optimisticId = effects.utils.createOptimisticId();
-    const optimisticModule = createOptimisticModule({
-      id: optimisticId,
-      title,
-      directoryShortid: directoryShortid || null,
-      shortid: effects.utils.createOptimisticId(),
-      sourceId: sandbox.sourceId,
-      isNotSynced: true,
-      ...(code ? { code } : {}),
-      ...(typeof isBinary === 'boolean' ? { isBinary } : {}),
-    });
-
-    // We have to push the module to the array before we can figure out its path,
-    // this is all changing soon
-    sandbox.modules.push(optimisticModule as Module);
-    optimisticModule.path = getModulePath(
-      sandbox.modules,
-      sandbox.directories,
-      optimisticId
-    );
-
-    // We grab the module from the state to continue working with it (proxy)
-    const module = sandbox.modules[sandbox.modules.length - 1];
-
-    const template = getDefinition(sandbox.template);
-    const config = template.configurationFiles[module.path!];
-
-    if (
-      config &&
-      (config.generateFileFromSandbox ||
-        config.getDefaultCode ||
-        config.generateFileFromState)
-    ) {
-      if (config.generateFileFromState) {
-        module.code = config.generateFileFromState(
-          state.preferences.settings.prettierConfig
-        );
-      } else if (config.generateFileFromSandbox) {
-        module.code = config.generateFileFromSandbox(sandbox);
-      } else if (config.getDefaultCode) {
-        const resolveModule = resolveModuleWrapped(sandbox);
-
-        module.code = config.getDefaultCode(sandbox.template, resolveModule);
-      }
-    }
-
-    effects.vscode.sandboxFsSync.appendFile(state.editor.modulesByPath, module);
-    actions.editor.internal.setCurrentModule(module);
-
-    try {
-      const updatedModule = await effects.api.createModule(sandbox.id, module);
-
-      module.id = updatedModule.id;
-      module.shortid = updatedModule.shortid;
-
-      effects.vscode.sandboxFsSync.writeFile(
-        state.editor.modulesByPath,
-        module
-      );
-      state.editor.currentModuleShortid = module.shortid;
-
-      effects.executor.updateFiles(sandbox);
-
-      if (state.live.isCurrentEditor) {
-        effects.live.sendModuleCreated(module);
-        // Update server with latest data
-        effects.live.sendCodeUpdate(
-          module.shortid,
-          getTextOperation(updatedModule.code || '', module.code)
-        );
-      }
-    } catch (error) {
-      sandbox.modules.splice(sandbox.modules.indexOf(module), 1);
-      if (state.editor.mainModule)
-        actions.editor.internal.setCurrentModule(state.editor.mainModule);
-
-      state.editor.modulesByPath = effects.vscode.sandboxFsSync.create(sandbox);
-
-      actions.internal.handleError({
-        message: 'Unable to save new file',
-        error,
-      });
-    }
-
-    if (sandbox.originalGit) {
-      actions.git.updateGitChanges();
-    }
-  },
-  async () => {},
-  'write_code'
-);
-
-export const moduleDeleted = withOwnedSandbox(
-  async (
-    { state, effects, actions }: Context,
-    {
-      moduleShortid,
-    }: {
-      moduleShortid: string;
-    }
-  ) => {
-    const sandbox = state.editor.currentSandbox;
-    if (!sandbox) {
-      return;
-    }
-    const moduleToDeleteIndex = sandbox.modules.findIndex(
-      module => module.shortid === moduleShortid
-    );
-    const removedModule = sandbox.modules.splice(moduleToDeleteIndex, 1)[0];
-    const wasCurrentModule =
-      state.editor.currentModuleShortid === moduleShortid;
-
-    effects.vscode.sandboxFsSync.unlink(
-      state.editor.modulesByPath,
-      removedModule
-    );
-
-    if (wasCurrentModule && state.editor.mainModule) {
-      actions.editor.internal.setCurrentModule(state.editor.mainModule);
-    }
-
-    actions.editor.internal.updatePreviewCode();
-
-    try {
-      await effects.api.deleteModule(sandbox.id, moduleShortid);
-
-      if (state.live.isCurrentEditor) {
-        effects.live.sendModuleDeleted(moduleShortid);
-      }
-      effects.executor.updateFiles(sandbox);
-    } catch (error) {
-      sandbox.modules.push(removedModule);
-      state.editor.modulesByPath = effects.vscode.sandboxFsSync.create(sandbox);
-      actions.internal.handleError({ message: 'Could not delete file', error });
-    }
-
-    if (sandbox.originalGit) {
-      actions.git.updateGitChanges();
-    }
-  },
-  async () => {},
-  'write_code'
-);
-
-export const createModulesByPath = async (
-  { state, effects, actions }: Context,
-  {
-    files,
-    cbID,
-  }: {
-    cbID?: string;
-    files: INormalizedModules;
-  }
-) => {
-  const sandbox = state.editor.currentSandbox;
-  if (!sandbox) {
-    return;
-  }
-  const { modules, directories } = denormalize(files, sandbox.directories);
-
-  await actions.files.massCreateModules({
-    modules,
-    directories,
-    directoryShortid: null,
-    cbID,
-  });
-
-  effects.executor.updateFiles(sandbox);
-};
-
-export const syncSandbox = async (
-  { state, actions, effects }: Context,
-  updates: any[]
-) => {
-  const oldSandbox = state.editor.currentSandbox;
-  if (!oldSandbox) {
-    return;
-  }
-  const { id } = oldSandbox;
-
-  try {
-    const newSandbox = await effects.api.getSandbox(id);
-
-    updates.forEach(update => {
-      const { op, path, type } = update;
-
-      if (type === 'file') {
-        const resolveModuleOld = resolveModuleWrapped(oldSandbox);
-        const resolveModuleNew = resolveModuleWrapped(newSandbox);
-        const oldModule = resolveModuleOld(path);
-        if (op === 'update') {
-          const newModule = resolveModuleNew(path);
-
-          if (newModule) {
-            if (oldModule) {
-              const modulePos = oldSandbox.modules.indexOf(oldModule);
-              Object.assign(oldSandbox.modules[modulePos], newModule);
-            } else {
-              oldSandbox.modules.push(newModule);
-            }
-          }
-        } else if (op === 'delete' && oldModule) {
-          oldSandbox.modules.splice(oldSandbox.modules.indexOf(oldModule), 1);
-        }
-      } else {
-        const resolveDirectoryOld = resolveDirectoryWrapped(oldSandbox);
-        const resolveDirectoryNew = resolveDirectoryWrapped(newSandbox);
-
-        if (op === 'update') {
-          // Create
-          const newDirectory = resolveDirectoryNew(path);
-          if (newDirectory) {
-            oldSandbox.directories.push(newDirectory);
-          }
-        } else {
-          const oldDirectory = resolveDirectoryOld(path);
-          if (oldDirectory) {
-            const directory = oldSandbox.directories.find(
-              directoryItem => directoryItem.shortid === oldDirectory.shortid
-            );
-            if (directory) {
-              oldSandbox.directories.splice(
-                oldSandbox.directories.indexOf(directory),
-                1
-              );
-            }
-          }
-        }
-      }
-    });
-  } catch (error) {
-    if (error.response?.status === 404) {
-      return;
-    }
-
-    actions.internal.handleError({
-      message:
-        "We weren't able to retrieve the latest files of the sandbox, please refresh",
-      error,
-    });
-  }
-
-  // No matter if error or not we resync the whole shabang!
-  if (state.editor.currentSandbox)
-    state.editor.modulesByPath = effects.vscode.sandboxFsSync.create(
-      state.editor.currentSandbox
-    );
-};
-
-export const updateWorkspaceConfig = async (
-  { state, actions }: Context,
-  update: {}
-) => {
-  if (hasPermission(state.editor.currentSandbox!.authorization, 'write_code')) {
-    const devtoolsModule = state.editor.modulesByPath[
-      '/.codesandbox/workspace.json'
-    ] as Module;
-
-    if (devtoolsModule) {
-      const updatedCode = JSON.stringify(
-        Object.assign(JSON.parse(devtoolsModule.code), update),
-        null,
-        2
-      );
-      actions.editor.codeChanged({
-        moduleShortid: devtoolsModule.shortid,
-        code: updatedCode,
-      });
-      await actions.editor.codeSaved({
-        code: updatedCode,
-        moduleShortid: devtoolsModule.shortid,
-        cbID: null,
-      });
-    } else {
-      await actions.files.createModulesByPath({
-        files: {
-          '/.codesandbox/workspace.json': {
-            content: JSON.stringify(update, null, 2),
-            isBinary: false,
-          },
-        },
-      });
-    }
-  } else {
-    state.editor.workspaceConfigCode = JSON.stringify(
-      state.editor.workspaceConfigCode
-        ? Object.assign(JSON.parse(state.editor.workspaceConfigCode), update)
-        : update,
-      null,
-      2
-    );
-  }
-};
diff --git a/packages/app/src/app/overmind/namespaces/files/index.ts b/packages/app/src/app/overmind/namespaces/files/index.ts
deleted file mode 100755
index 41d69f6f09e..00000000000
--- a/packages/app/src/app/overmind/namespaces/files/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import * as actions from './actions';
-
-export { actions };
diff --git a/packages/app/src/app/overmind/namespaces/files/internalActions.ts b/packages/app/src/app/overmind/namespaces/files/internalActions.ts
deleted file mode 100755
index ecd1e7316cd..00000000000
--- a/packages/app/src/app/overmind/namespaces/files/internalActions.ts
+++ /dev/null
@@ -1,187 +0,0 @@
-import { Context } from 'app/overmind';
-import { MAX_FILE_SIZE } from 'codesandbox-import-utils/lib/is-text';
-import denormalize from 'codesandbox-import-utils/lib/utils/files/denormalize';
-import { chunk } from 'lodash-es';
-import { Directory, Sandbox } from '@codesandbox/common/lib/types';
-import { getDirectoryPath } from '@codesandbox/common/lib/sandbox/modules';
-
-function b64DecodeUnicode(file: string) {
-  // Adding this fixes uploading JSON files with non UTF8-characters
-  // https://stackoverflow.com/a/30106551
-  return decodeURIComponent(
-    atob(file)
-      .split('')
-      .map(char => '%' + ('00' + char.charCodeAt(0).toString(16)).slice(-2))
-      .join('')
-  );
-}
-
-export const recoverFiles = ({ effects, state }: Context) => {
-  const sandbox = state.editor.currentSandbox;
-
-  if (!sandbox) {
-    return;
-  }
-
-  const recoverList = effects.moduleRecover.getRecoverList(
-    sandbox.id,
-    sandbox.modules
-  );
-
-  const recoveredList = recoverList.reduce((aggr, item) => {
-    if (!item) {
-      return aggr;
-    }
-    const { recoverData, module } = item;
-
-    if (module.code !== recoverData.code) {
-      return aggr.concat(item);
-    }
-
-    return aggr;
-  }, [] as typeof recoverList);
-
-  if (recoveredList.length > 0) {
-    state.editor.recoveredFiles = recoveredList;
-    state.currentModal = 'recoveredFiles';
-  }
-};
-
-export const uploadFiles = async (
-  { effects }: Context,
-  {
-    files,
-    directoryShortid,
-  }: {
-    files: { [k: string]: { dataURI: string; type: string } };
-    directoryShortid: string;
-  }
-) => {
-  const parsedFiles: {
-    [key: string]: { isBinary: boolean; content: string };
-  } = {};
-  // We first create chunks so we don't overload the server with 100 multiple
-  // upload requests
-  const filePaths = Object.keys(files);
-  const chunkedFilePaths = chunk(filePaths, 5);
-
-  const textExtensions = (await import('textextensions/source/index.json'))
-    .default;
-
-  // We traverse all files and upload them when necessary, then add them to the
-  // parsedFiles object
-  /* eslint-disable no-restricted-syntax, no-await-in-loop */
-  for (const filePathsChunk of chunkedFilePaths) {
-    await Promise.all(
-      filePathsChunk.map(async filePath => {
-        const file = files[filePath];
-        const { dataURI } = file;
-
-        const extension = filePath.split('.').pop();
-
-        if (
-          ((extension && textExtensions.includes(extension)) ||
-            file.type.startsWith('text/') ||
-            file.type === 'application/json') &&
-          dataURI.length < MAX_FILE_SIZE
-        ) {
-          const text =
-            dataURI !== 'data:'
-              ? b64DecodeUnicode(dataURI.replace(/^.*base64,/, ''))
-              : '';
-          parsedFiles[filePath] = {
-            content: text,
-            isBinary: false,
-          };
-        } else {
-          try {
-            const data = await effects.api.createUpload(filePath, dataURI);
-            parsedFiles[filePath] = {
-              content: data.url,
-              isBinary: true,
-            };
-          } catch (error) {
-            error.message = `Error uploading ${filePath}: ${error.message}`;
-
-            throw error;
-          }
-        }
-      })
-    );
-  }
-  /* eslint-enable */
-
-  // We create a module format that CodeSandbox understands
-  const { modules, directories } = denormalize(parsedFiles);
-
-  // If the directory was dropped in a subdirectory we need to shift all
-  // the root directories to that directory
-  const relativeDirectories = directories.map(dir => {
-    if (dir.directoryShortid == null) {
-      return {
-        ...dir,
-        directoryShortid,
-      };
-    }
-
-    return dir;
-  });
-
-  const relativeModules = modules.map(m => {
-    if (m.directoryShortid == null) {
-      return {
-        ...m,
-        directoryShortid,
-      };
-    }
-
-    return m;
-  });
-
-  // Proceed to give the data for `massCreateModules`
-  return {
-    modules: relativeModules,
-    directories: relativeDirectories,
-  };
-};
-
-export const renameDirectoryInState = (
-  { state, effects }: Context,
-  {
-    title,
-    directory,
-    sandbox,
-  }: {
-    title: string;
-    directory: Directory;
-    sandbox: Sandbox;
-  }
-) => {
-  const oldPath = directory.path;
-  directory.title = title;
-  const newPath = getDirectoryPath(
-    sandbox.modules,
-    sandbox.directories,
-    directory.id
-  );
-  directory.path = newPath;
-
-  effects.vscode.sandboxFsSync.rename(
-    state.editor.modulesByPath,
-    oldPath!,
-    directory.path
-  );
-
-  if (oldPath) {
-    sandbox.modules.forEach(m => {
-      if (m.path && m.path.startsWith(oldPath + '/')) {
-        m.path = m.path.replace(oldPath, newPath);
-      }
-    });
-    sandbox.directories.forEach(d => {
-      if (d.path && d.path.startsWith(oldPath + '/')) {
-        d.path = d.path.replace(oldPath, newPath);
-      }
-    });
-  }
-};
diff --git a/packages/app/src/app/overmind/namespaces/git/actions.ts b/packages/app/src/app/overmind/namespaces/git/actions.ts
deleted file mode 100755
index 776aba1b11f..00000000000
--- a/packages/app/src/app/overmind/namespaces/git/actions.ts
+++ /dev/null
@@ -1,1029 +0,0 @@
-import { getModulePath } from '@codesandbox/common/lib/sandbox/modules';
-import {
-  GitChanges,
-  GitFileCompare,
-  GitInfo,
-  Module,
-  SandboxGitState,
-  Sandbox,
-} from '@codesandbox/common/lib/types';
-import {
-  captureException,
-  logBreadcrumb,
-} from '@codesandbox/common/lib/utils/analytics/sentry';
-import { convertTypeToStatus } from '@codesandbox/common/lib/utils/notifications';
-import { hasPermission } from '@codesandbox/common/lib/utils/permission';
-import { NotificationStatus } from '@codesandbox/notifications/lib/state';
-import { Context } from 'app/overmind';
-import { debounce, pipe } from 'overmind';
-import { CSBProjectGitHubRepository } from '@codesandbox/common/lib/utils/url-generator';
-
-import * as internalActions from './internalActions';
-import { createDiff } from './utils';
-
-export const internal = internalActions;
-
-export const repoTitleChanged = (
-  { state }: Context,
-  {
-    title,
-  }: {
-    title: string;
-  }
-) => {
-  state.git.repoTitle = title;
-  state.git.error = null;
-};
-
-/**
- * There are two states the Sandbox can be in:
- * 1. It has been forked and the SOURCE is the GIT details of the Sandbox it forked from
- * 2. It has been forked and the SOURCE is the PR created
- *
- * To give indication of what file changes has been made, we do the following:
- * 1. First we load the SOURCE sandbox. We need this to indicate what you have changed in your sandbox
- * 2. Every time you make a change to the files we go through modules/directories of the source sandbox and your sandbox to produce a diff
- *
- * The steps that is taken to find "out of sync" and "conflict", is the following:
- * 1. We first want to compare your sandbox with the SOURCE (This being the GIT info on the sandbox you forked from or the PR)
- * 2. We pass the "originalGitCommitSha" and the branch of the SOURCE
- * 3. Now we evaluate the comparison against your files to see if anything is "out of sync" or in "conflict" and if so we break out and tell user
- * 4. If you sandbox has a PR we want to compare your sandbox with the BASE (This being the GIT info your sanbox forked from)
- * 5. We pass the "originalGitCommitSha" and the branch of the BASE
- * 6. Now we evaluate the comparison against your files to see if anything is "out of sync" or in "conflict" and if so we break out and tell user
- */
-export const loadGitSource = async ({ state, actions, effects }: Context) => {
-  const sandbox = state.editor.currentSandbox!;
-  state.git.isExported = false;
-  state.git.pr = null;
-  state.git.repoTitle = '';
-
-  if (
-    !state.user ||
-    !state.user.integrations.github ||
-    !sandbox.originalGit ||
-    !hasPermission(sandbox.authorization, 'write_code')
-  ) {
-    return;
-  }
-
-  state.git.isFetching = true;
-
-  // We go grab the current version of the source
-  try {
-    await actions.git._loadSourceSandbox();
-  } catch (error) {
-    actions.internal.handleError({
-      error,
-      message:
-        'Could not load the source sandbox for this GitHub sandbox, please refresh or report the issue.',
-    });
-    return;
-  }
-
-  try {
-    state.git.permission = await effects.api.getGitRights(sandbox.id);
-  } catch (error) {
-    actions.internal.handleError({
-      error,
-      message:
-        'Could not get information about your permissions, please refresh or report the issue.',
-    });
-    return;
-  }
-
-  // Now let us compare whatever has changed between our current
-  // state and the source
-  try {
-    await actions.git._compareWithSource();
-  } catch (error) {
-    actions.internal.handleError({
-      error,
-      message:
-        'We were not able to compare the content with the source, please refresh or report the issue.',
-    });
-    return;
-  }
-
-  if (state.git.gitState === SandboxGitState.SYNCED && sandbox.prNumber) {
-    try {
-      await actions.git._compareWithBase();
-    } catch (error) {
-      actions.internal.handleError({
-        error,
-        message:
-          'We were not able to compare the content with the PR, please refresh or report the issue.',
-      });
-      return;
-    }
-  }
-
-  actions.git._setGitChanges();
-  state.git.isFetching = false;
-};
-
-export const createRepoFiles = ({ effects }: Context, sandbox: Sandbox) => {
-  return effects.git.export(sandbox);
-};
-
-export const createRepoClicked = async ({
-  state,
-  effects,
-  actions,
-}: Context) => {
-  effects.analytics.track('GitHub - Create Repo');
-  const { repoTitle } = state.git;
-  const modulesNotSaved = !state.editor.isAllModulesSynced;
-
-  if (!repoTitle) {
-    state.git.error = 'Repo name cannot be empty';
-    return;
-  }
-
-  if (/\s/.test(repoTitle.trim())) {
-    state.git.error = 'Repo name cannot contain spaces';
-    return;
-  }
-
-  if (modulesNotSaved) {
-    state.git.error = 'All files need to be saved';
-    return;
-  }
-
-  state.git.isExported = false;
-  state.currentModal = 'exportGithub';
-
-  const sandbox = state.editor.currentSandbox;
-  if (!sandbox) {
-    return;
-  }
-
-  try {
-    const githubData = await effects.git.export(sandbox);
-    if (!githubData) {
-      return;
-    }
-    const git = await effects.api.createGit(sandbox.id, repoTitle, githubData);
-
-    if (!git) {
-      effects.notificationToast.error(
-        'Unable to create git repo, please try again'
-      );
-      return;
-    }
-
-    git.commitSha = null;
-    state.git.isExported = true;
-    state.currentModal = null;
-
-    // Redirect to CodeSandbox Projects
-    window.location.href = CSBProjectGitHubRepository({
-      owner: git.username,
-      repo: git.repo,
-      welcome: true,
-    });
-  } catch (error) {
-    actions.internal.handleError({
-      error,
-      message:
-        'Unable to create the repo. Please refresh and try again or report issue.',
-    });
-  }
-};
-
-export const openSourceSandbox = ({ state, effects }: Context) => {
-  effects.analytics.track('GitHub - Open Source Sandbox');
-  const git = state.editor.currentSandbox!.baseGit
-    ? state.editor.currentSandbox!.baseGit
-    : state.editor.currentSandbox!.originalGit;
-
-  effects.router.updateSandboxUrl({ git });
-};
-
-/*
-  Due to us creating new urls when syncing source, we have to move these updates
-  from the source back to the sandbox
-*/
-export const _updateBinaryUploads = async (
-  { state, actions }: Context,
-  changes: GitChanges
-) => {
-  const binariesToUpdate = changes.added
-    .filter(change => change.encoding === 'base64')
-    .concat(changes.modified.filter(change => change.encoding === 'base64'));
-
-  await Promise.all(
-    binariesToUpdate.map(change => {
-      const module = state.editor.modulesByPath[change.path] as Module;
-      const sourceModule = state.git.sourceModulesByPath[change.path];
-
-      actions.editor.codeChanged({
-        moduleShortid: module.shortid,
-        code: sourceModule.code,
-      });
-      return actions.editor.codeSaved({
-        moduleShortid: module.shortid,
-        code: sourceModule.code,
-        cbID: null,
-      });
-    })
-  );
-};
-
-export const createCommitClicked = async ({
-  state,
-  effects,
-  actions,
-}: Context) => {
-  effects.analytics.track('GitHub - Create Commit');
-  const sandbox = state.editor.currentSandbox!;
-  const git = state.git;
-
-  git.isCommitting = true;
-
-  try {
-    if (git.gitState === SandboxGitState.SYNCED) {
-      await actions.git._compareWithSource();
-
-      if (sandbox.prNumber && git.gitState === SandboxGitState.SYNCED) {
-        await actions.git._compareWithBase();
-      }
-
-      if (state.git.gitState !== SandboxGitState.SYNCED) {
-        git.isCommitting = false;
-        return;
-      }
-    }
-
-    const changes = await actions.git._getGitChanges();
-    const commit = await effects.api.createGitCommit(
-      sandbox.id,
-      `${git.title}\n${git.description}`,
-      changes,
-      // If we have resolved a conflict and it is a PR source conflict, we need to commit
-      // it with a reference to the conflicting sha as well
-      git.gitState === SandboxGitState.RESOLVED_PR_BASE && git.baseCommitSha
-        ? [git.sourceCommitSha!, git.baseCommitSha]
-        : [git.sourceCommitSha!]
-    );
-
-    // We need to load the source again as it has now changed. We can not optimistically deal with
-    // this, cause you might have added a binary
-    sandbox.originalGit!.commitSha = commit.sha;
-    sandbox.originalGitCommitSha = commit.sha;
-    await actions.git._loadSourceSandbox();
-    await actions.git._updateBinaryUploads(changes);
-    actions.git._setGitChanges();
-    state.git.isCommitting = false;
-    state.git.title = '';
-    state.git.description = '';
-    state.git.conflicts = [];
-    state.git.gitState = SandboxGitState.SYNCED;
-
-    effects.notificationToast.success('Successfully created your commit');
-  } catch (error) {
-    state.git.isCommitting = false;
-
-    if (error.message.includes('code 422')) {
-      if (!sandbox.originalGit) return;
-      effects.notificationToast.add({
-        message: `You do not seem to have access to commit to ${sandbox.originalGit.username}/${sandbox.originalGit.repo}. Please read the documentation to grant access.`,
-        title: 'Error creating commit',
-        status: NotificationStatus.ERROR,
-        actions: {
-          primary: {
-            label: 'Open documentation',
-            run: () => {
-              effects.browser.openWindow(
-                'docs/git#committing-to-organizations'
-              );
-            },
-          },
-        },
-      });
-    } else {
-      actions.internal.handleError({
-        error,
-        message:
-          'We were unable to create your commit. Please try again or report the issue.',
-      });
-    }
-  }
-};
-
-export const titleChanged = ({ state }: Context, title: string) => {
-  state.git.title = title;
-};
-
-export const descriptionChanged = ({ state }: Context, description: string) => {
-  state.git.description = description;
-};
-
-export const createPrClicked = async ({ state, effects, actions }: Context) => {
-  effects.analytics.track('GitHub - Open PR');
-  const git = state.git;
-  git.isCreatingPr = true;
-  git.pr = null;
-  const sandbox = state.editor.currentSandbox!;
-  const { id } = sandbox;
-
-  try {
-    if (git.gitState === SandboxGitState.SYNCED) {
-      await actions.git._compareWithSource();
-
-      if (state.git.gitState !== SandboxGitState.SYNCED) {
-        git.isCreatingPr = false;
-        return;
-      }
-    }
-
-    const changes = await actions.git._getGitChanges();
-    const pr = await effects.api.createGitPr(
-      id,
-      state.git.title,
-      state.git.description,
-      changes
-    );
-
-    sandbox.baseGit = {
-      ...sandbox.originalGit,
-    } as GitInfo;
-    sandbox.baseGitCommitSha = sandbox.originalGit!.commitSha;
-    sandbox.originalGit = {
-      branch: pr.branch,
-      commitSha: pr.commitSha,
-      repo: pr.repo,
-      username: pr.username,
-      path: '',
-    };
-    sandbox.originalGitCommitSha = pr.commitSha;
-    sandbox.prNumber = pr.number;
-    git.pr = pr;
-
-    await actions.git._loadSourceSandbox();
-    await actions.git._updateBinaryUploads(changes);
-    actions.git._setGitChanges();
-
-    git.title = '';
-    git.description = '';
-    state.git.conflicts = [];
-    state.git.gitState = SandboxGitState.SYNCED;
-
-    git.isCreatingPr = false;
-
-    effects.notificationToast.add({
-      title: 'Successfully created your PR',
-      message: '',
-      status: convertTypeToStatus('success'),
-      actions: {
-        primary: {
-          label: 'Open PR',
-          run: () => {
-            effects.browser.openWindow(
-              `https://github.com/${sandbox.baseGit!.username}/${
-                sandbox.baseGit!.repo
-              }/pull/${sandbox.prNumber!}`
-            );
-          },
-        },
-      },
-    });
-  } catch (error) {
-    git.isCreatingPr = false;
-    actions.internal.handleError({
-      error,
-      message:
-        'We were unable to create your PR. Please try again or report the issue.',
-    });
-  }
-};
-
-export const updateGitChanges = pipe(debounce(500), ({ actions }: Context) => {
-  actions.git._setGitChanges();
-});
-
-export const resolveConflicts = async (
-  { state, actions, effects }: Context,
-  module: Module
-) => {
-  const conflict = state.git.conflicts.find(
-    conflictItem => module.path === '/' + conflictItem.filename
-  );
-
-  if (conflict && module.code.indexOf('<<<<<<< CodeSandbox') === -1) {
-    state.git.conflicts.splice(state.git.conflicts.indexOf(conflict), 1);
-
-    await actions.editor.codeSaved({
-      moduleShortid: module.shortid,
-      code: module.code,
-      cbID: null,
-    });
-
-    effects.analytics.track('GitHub - Resolve Conflicts');
-    actions.git._tryResolveConflict();
-  }
-};
-
-export const addConflictedFile = async (
-  { state, actions }: Context,
-  conflict: GitFileCompare
-) => {
-  state.git.conflictsResolving.push(conflict.filename);
-  await actions.files.createModulesByPath({
-    files: {
-      [conflict.filename]: { content: conflict.content!, isBinary: false },
-    },
-  });
-  state.git.sourceModulesByPath[
-    '/' + conflict.filename
-  ].code = conflict.content!;
-
-  state.git.conflictsResolving.splice(
-    state.git.conflictsResolving.indexOf(conflict.filename),
-    1
-  );
-  state.git.conflicts.splice(state.git.conflicts.indexOf(conflict), 1);
-
-  actions.git._tryResolveConflict();
-};
-
-export const ignoreConflict = (
-  { state, actions }: Context,
-  conflict: GitFileCompare
-) => {
-  state.git.conflicts.splice(state.git.conflicts.indexOf(conflict), 1);
-
-  actions.git._tryResolveConflict();
-};
-
-export const deleteConflictedFile = async (
-  { state, actions }: Context,
-  conflict: GitFileCompare
-) => {
-  state.git.conflictsResolving.push(conflict.filename);
-  const module = state.editor.modulesByPath['/' + conflict.filename];
-
-  await actions.files.moduleDeleted({ moduleShortid: module.shortid });
-  delete state.git.sourceModulesByPath['/' + conflict.filename];
-
-  state.git.conflictsResolving.splice(
-    state.git.conflictsResolving.indexOf(conflict.filename),
-    1
-  );
-  state.git.conflicts.splice(state.git.conflicts.indexOf(conflict), 1);
-
-  actions.git._tryResolveConflict();
-};
-
-export const diffConflictedFile = async (
-  { state, actions }: Context,
-  conflict: GitFileCompare
-) => {
-  const module = state.editor.modulesByPath['/' + conflict.filename] as Module;
-
-  await actions.editor.moduleSelected({ id: module.id });
-
-  actions.editor.setCode({
-    moduleShortid: module.shortid,
-    code: createDiff(module.code, conflict.content),
-  });
-};
-
-export const resolveOutOfSync = async ({
-  state,
-  actions,
-  effects,
-}: Context) => {
-  effects.analytics.track('GitHub - Resolve out of sync');
-  const git = state.git;
-  const { added, deleted, modified } = git.outOfSyncUpdates;
-
-  git.isResolving = true;
-
-  const sandbox = state.editor.currentSandbox!;
-
-  // When we have a PR and the source is out of sync with base, we need to create a commit to update it. We do this
-  // first, because we need the new source to deal with binary files
-  if (git.gitState === SandboxGitState.OUT_OF_SYNC_PR_BASE) {
-    const changes: GitChanges = {
-      added: added.map(change => ({
-        path: '/' + change.filename,
-        content: change.content!,
-        encoding: change.isBinary ? 'base64' : 'utf-8',
-      })),
-      deleted: deleted.map(change => '/' + change.filename),
-      modified: modified.map(change => ({
-        path: '/' + change.filename,
-        content: change.content!,
-        encoding: change.isBinary ? 'base64' : 'utf-8',
-      })),
-    };
-    const commit = await effects.api.createGitCommit(
-      sandbox.id,
-      `Update from ${sandbox.baseGit!.branch}`,
-      changes,
-      [git.sourceCommitSha!]
-    );
-    sandbox.originalGit!.commitSha = commit.sha;
-    sandbox.originalGitCommitSha = commit.sha;
-
-    // If working directly we just need to update the commitSha, as
-    // we are already in sync now
-  } else {
-    await effects.api.saveGitOriginalCommitSha(
-      sandbox.id,
-      git.sourceCommitSha!
-    );
-    sandbox.originalGit!.commitSha = git.sourceCommitSha;
-    sandbox.originalGitCommitSha = git.sourceCommitSha;
-  }
-
-  await actions.git._loadSourceSandbox();
-
-  if (added.length) {
-    await actions.files.createModulesByPath({
-      files: added.reduce((aggr, change) => {
-        aggr[change.filename] = change.isBinary
-          ? {
-              content: git.sourceModulesByPath['/' + change.filename].code,
-              isBinary: true,
-              uploadId: git.sourceModulesByPath['/' + change.filename].uploadId,
-              sha: git.sourceModulesByPath['/' + change.filename].sha,
-            }
-          : { content: change.content };
-
-        return aggr;
-      }, {}),
-    });
-  }
-
-  if (deleted.length) {
-    await Promise.all(
-      deleted.map(change => {
-        const module = state.editor.modulesByPath['/' + change.filename];
-
-        return actions.files.moduleDeleted({ moduleShortid: module.shortid });
-      })
-    );
-  }
-  if (modified.length) {
-    await Promise.all(
-      modified.map(change => {
-        const module = state.editor.modulesByPath['/' + change.filename];
-
-        // If we are dealing with a private binary change, we need to bluntly update
-        // the module
-        if (git.sourceModulesByPath['/' + change.filename].sha) {
-          const code = git.sourceModulesByPath['/' + change.filename].code;
-          const uploadId = git.sourceModulesByPath['/' + change.filename]
-            .uploadId!;
-          const sha = git.sourceModulesByPath['/' + change.filename].sha!;
-
-          const sandboxModule = sandbox.modules.find(
-            moduleItem => moduleItem.shortid === module.shortid
-          )!;
-          sandboxModule.code = code;
-          sandboxModule.uploadId = uploadId;
-          sandboxModule.sha = sha;
-
-          return effects.api
-            .saveModulePrivateUpload(sandbox.id, module.shortid, {
-              code,
-              uploadId,
-              sha,
-            })
-            .then(() => {});
-        }
-        actions.editor.setCode({
-          moduleShortid: module.shortid,
-          code: change.isBinary
-            ? git.sourceModulesByPath['/' + change.filename].code
-            : change.content!,
-        });
-        return actions.editor.codeSaved({
-          moduleShortid: module.shortid,
-          code: change.isBinary
-            ? git.sourceModulesByPath['/' + change.filename].code
-            : change.content!,
-          cbID: null,
-        });
-      })
-    );
-  }
-
-  actions.git._setGitChanges();
-  git.outOfSyncUpdates.added = [];
-  git.outOfSyncUpdates.deleted = [];
-  git.outOfSyncUpdates.modified = [];
-  git.gitState = SandboxGitState.SYNCED;
-  git.isResolving = false;
-};
-
-export const _setGitChanges = ({ state }: Context) => {
-  const changes: {
-    added: string[];
-    deleted: string[];
-    modified: string[];
-  } = {
-    added: [],
-    deleted: [],
-    modified: [],
-  };
-
-  state.editor.currentSandbox!.modules.forEach(module => {
-    if (!(module.path in state.git.sourceModulesByPath)) {
-      changes.added.push(module.path);
-    } else if (
-      (module.sha &&
-        state.git.sourceModulesByPath[module.path].sha !== module.sha) ||
-      (!module.sha &&
-        state.git.sourceModulesByPath[module.path].code !== module.code)
-    ) {
-      changes.modified.push(module.path);
-    }
-  });
-  Object.keys(state.git.sourceModulesByPath).forEach(path => {
-    if (!state.editor.modulesByPath[path]) {
-      changes.deleted.push(path);
-    }
-  });
-  state.git.gitChanges = changes;
-};
-
-export const _evaluateGitChanges = async (
-  { state }: Context,
-  changes: GitFileCompare[]
-) => {
-  const conflicts = changes.reduce<GitFileCompare[]>((aggr, change) => {
-    const path = '/' + change.filename;
-
-    // We are in conflict if a file has been removed in the source and the
-    // sandbox has made changes to it
-    if (
-      change.status === 'removed' &&
-      state.editor.modulesByPath[path] &&
-      !(state.editor.modulesByPath[path] as Module).isBinary &&
-      (state.editor.modulesByPath[path] as Module).code !== change.content
-    ) {
-      return aggr.concat(change);
-    }
-
-    // We are in conflict if a file has been modified in the source, but removed
-    // from the sandbox
-    if (change.status === 'modified' && !state.editor.modulesByPath[path]) {
-      return aggr.concat(change);
-    }
-
-    // We are in conflict if the source changed the file and sandbox also changed the file
-    if (
-      change.status === 'modified' &&
-      !(state.editor.modulesByPath[path] as Module).isBinary &&
-      (state.editor.modulesByPath[path] as Module).code !== change.content &&
-      (state.editor.modulesByPath[path] as Module).code !==
-        state.git.sourceModulesByPath[path].code
-    ) {
-      return aggr.concat(change);
-    }
-
-    return aggr;
-  }, []);
-  const toUpdate: {
-    added: GitFileCompare[];
-    deleted: GitFileCompare[];
-    modified: GitFileCompare[];
-  } = { added: [], deleted: [], modified: [] };
-
-  if (changes.length) {
-    state.git.outOfSyncUpdates = changes.reduce((aggr, change) => {
-      // If the change is a conflict, we do not set it up for a Sandbox update, we need
-      // to handle the conflict explicitly
-      if (conflicts.includes(change)) {
-        return aggr;
-      }
-
-      // When not a conflict we check if the changes differs from the Sandbox. Any changes
-      // will update the Sandbox
-      if (
-        (change.status === 'added' &&
-          !state.editor.modulesByPath['/' + change.filename]) ||
-        (change.status === 'removed' &&
-          state.editor.modulesByPath['/' + change.filename]) ||
-        (change.status === 'modified' &&
-          (state.editor.modulesByPath['/' + change.filename] as Module).code !==
-            change.content)
-      ) {
-        aggr[change.status === 'removed' ? 'deleted' : change.status].push(
-          change
-        );
-      }
-
-      return aggr;
-    }, toUpdate);
-  }
-
-  return {
-    changesCount:
-      toUpdate.added.length +
-      toUpdate.modified.length +
-      toUpdate.deleted.length,
-    conflicts,
-  };
-};
-
-export const _loadSourceSandbox = async ({ state, effects }: Context) => {
-  const sandbox = state.editor.currentSandbox!;
-  const { originalGit } = sandbox;
-
-  if (!originalGit) {
-    return;
-  }
-
-  const sourceSandbox = await effects.api.getSandbox(
-    `github/${originalGit.username}/${
-      originalGit.repo
-    }/tree/${sandbox.originalGitCommitSha!}/${originalGit.path}`
-  );
-
-  state.editor.sandboxes[sourceSandbox.id] = sourceSandbox;
-  state.git.sourceSandboxId = sourceSandbox.id;
-
-  state.git.sourceModulesByPath = sourceSandbox.modules.reduce(
-    (aggr, module) => {
-      const path = getModulePath(
-        sourceSandbox.modules,
-        sourceSandbox.directories,
-        module.id
-      );
-      module.path = path;
-      if (path) {
-        aggr[path] = {
-          code: module.code,
-          isBinary: module.isBinary,
-          uploadId: module.uploadId,
-          sha: module.sha,
-        };
-      }
-
-      return aggr;
-    },
-    {}
-  );
-};
-
-export const _compareWithSource = async ({
-  state,
-  effects,
-  actions,
-}: Context) => {
-  const sandbox = state.editor.currentSandbox!;
-  const originalGitCommitSha = sandbox.originalGitCommitSha;
-
-  try {
-    const originalChanges = await effects.api.compareGit(
-      sandbox.id,
-      sandbox.originalGitCommitSha!,
-      sandbox.originalGit!.branch,
-      true
-    );
-    const updates = await actions.git._evaluateGitChanges(
-      originalChanges.files
-    );
-
-    state.git.sourceCommitSha = originalChanges.headCommitSha;
-    state.git.conflicts = updates.conflicts;
-
-    if (updates.changesCount || updates.conflicts.length) {
-      effects.notificationToast.add({
-        message: `The sandbox is out of sync with "${
-          sandbox.originalGit!.branch
-        }" ${updates.conflicts.length ? 'and there are conflicts' : ''}`,
-        title: 'Out of sync',
-        status: convertTypeToStatus('notice'),
-        sticky: false,
-        actions: {
-          primary: {
-            label: 'Resolve',
-            run: () => {
-              actions.workspace.setWorkspaceItem({ item: 'github' });
-            },
-          },
-          secondary: {
-            label: 'See changes',
-            run: () => {
-              effects.browser.openWindow(
-                `https://github.com/${sandbox.originalGit!.username}/${
-                  sandbox.originalGit!.repo
-                }/compare/${originalGitCommitSha}...${
-                  sandbox.originalGit!.branch
-                }`
-              );
-            },
-          },
-        },
-      });
-      effects.preview.refresh();
-      state.git.gitState = updates.conflicts.length
-        ? SandboxGitState.CONFLICT_SOURCE
-        : SandboxGitState.OUT_OF_SYNC_SOURCE;
-    } else {
-      state.git.gitState = SandboxGitState.SYNCED;
-    }
-  } catch (e) {
-    // if there is a base git the issue is that the new branch does not exist, if not carry on
-    if (sandbox.baseGit) {
-      state.currentModal = 'notFoundBranchModal';
-    } else {
-      throw new Error();
-    }
-  }
-};
-
-export const _compareWithBase = async ({
-  state,
-  effects,
-  actions,
-}: Context) => {
-  const sandbox = state.editor.currentSandbox!;
-
-  state.git.pr = await effects.api.getGitPr(sandbox.id, sandbox.prNumber!);
-  state.git.sourceCommitSha = state.git.pr.commitSha;
-  state.git.baseCommitSha = state.git.pr.baseCommitSha;
-
-  const baseChanges = await effects.api.compareGit(
-    sandbox.id,
-    sandbox.originalGitCommitSha!,
-    sandbox.baseGit!.branch,
-    true
-  );
-
-  const updates = await actions.git._evaluateGitChanges(baseChanges.files);
-
-  state.git.baseCommitSha = baseChanges?.headCommitSha;
-  state.git.conflicts = updates.conflicts;
-
-  if (updates.changesCount || updates.conflicts.length) {
-    effects.notificationToast.add({
-      message: `The sandbox is out of sync with "${sandbox.baseGit!.branch}" ${
-        updates.conflicts.length ? 'and there are conflicts' : ''
-      }`,
-      title: 'Out of sync',
-      status: convertTypeToStatus('notice'),
-      sticky: false,
-      actions: {
-        primary: {
-          label: 'Resolve',
-          run: () => {
-            actions.workspace.setWorkspaceItem({ item: 'github' });
-          },
-        },
-        secondary: {
-          label: 'See changes',
-          run: () => {
-            effects.browser.openWindow(
-              `https://github.com/${sandbox.originalGit!.username}/${
-                sandbox.originalGit!.repo
-              }/compare/${sandbox.baseGit!.branch}...${
-                sandbox.originalGit!.branch
-              }`
-            );
-          },
-        },
-      },
-    });
-    effects.preview.refresh();
-    state.git.gitState = updates.conflicts.length
-      ? SandboxGitState.CONFLICT_PR_BASE
-      : SandboxGitState.OUT_OF_SYNC_PR_BASE;
-  } else {
-    state.git.gitState = SandboxGitState.SYNCED;
-  }
-};
-
-export const _getGitChanges = async ({ state, effects }: Context) => {
-  const git = state.git;
-  const sandbox = state.editor.currentSandbox!;
-
-  return {
-    added: await Promise.all(
-      git.gitChanges.added
-        .map(async path => {
-          const module = sandbox.modules.find(
-            moduleItem => moduleItem.path === path
-          );
-
-          if (!module) {
-            logBreadcrumb({
-              message: `Tried adding Git change, but paths don't match. Expected: ${path}, paths available: ${JSON.stringify(
-                sandbox.modules.map(m => ({
-                  shortid: m.shortid,
-                  path: m.path,
-                  isBinary: m.isBinary,
-                }))
-              )}`,
-            });
-            const err = new Error('Unable to add module to git changes');
-            captureException(err);
-
-            return false;
-          }
-
-          if (module!.isBinary) {
-            return {
-              path,
-              content: await effects.http.blobToBase64(module!.code),
-              encoding: 'base64' as 'base64',
-            };
-          }
-
-          return {
-            path,
-            content: module!.code,
-            encoding: 'utf-8' as 'utf-8',
-          };
-        })
-        .filter(Boolean)
-    ),
-    deleted: git.gitChanges.deleted,
-    modified: git.gitChanges.modified.map(path => {
-      const module = sandbox.modules.find(
-        moduleItem => moduleItem.path === path
-      );
-
-      // A binary can not be modified, because we have no mechanism for comparing
-      // private binary files, as their urls are based on moduleId (which is different across sandboxes)
-      return {
-        path,
-        content: module!.code,
-        encoding: 'utf-8',
-      };
-    }),
-  } as GitChanges;
-};
-
-export const _tryResolveConflict = async ({
-  state,
-  effects,
-  actions,
-}: Context) => {
-  const git = state.git;
-  actions.git._setGitChanges();
-
-  if (git.conflicts.length === 0) {
-    git.gitState =
-      git.gitState === SandboxGitState.CONFLICT_PR_BASE
-        ? SandboxGitState.RESOLVED_PR_BASE
-        : SandboxGitState.RESOLVED_SOURCE;
-  }
-
-  // When the conflict is from a PR base and we just override it, we still have to create a commit to update the PR
-  if (
-    git.gitState === SandboxGitState.RESOLVED_PR_BASE &&
-    !git.gitChanges.added.length &&
-    !git.gitChanges.deleted.length &&
-    !git.gitChanges.modified.length
-  ) {
-    state.git.isCommitting = true;
-    const sandbox = state.editor.currentSandbox!;
-    const changes = await actions.git._getGitChanges();
-    state.git.title = 'Resolve conflict';
-    const commit = await effects.api.createGitCommit(
-      sandbox.id,
-      'Resolved conflict',
-      changes,
-      git.baseCommitSha
-        ? [git.sourceCommitSha!, git.baseCommitSha]
-        : [git.sourceCommitSha!]
-    );
-    sandbox.originalGit!.commitSha = commit.sha;
-    sandbox.originalGitCommitSha = commit.sha;
-    git.isCommitting = false;
-    git.title = '';
-    git.description = '';
-    git.gitState = SandboxGitState.SYNCED;
-  }
-};
-
-export const linkToGitSandbox = async (
-  { state, effects, actions }: Context,
-  sandboxId: string
-) => {
-  if (!state.editor.currentSandbox) return;
-  try {
-    state.git.isLinkingToGitSandbox = true;
-    const newGitData = await effects.api.makeGitSandbox(sandboxId);
-    state.editor.currentSandbox = {
-      ...state.editor.currentSandbox,
-      originalGitCommitSha: newGitData.originalGitCommitSha,
-      originalGit: newGitData.originalGit,
-    };
-    await actions.git.loadGitSource();
-  } catch (error) {
-    actions.internal.handleError({
-      error,
-      message:
-        'There has been a problem connecting your sandbox to the GitHub repo. Please try again.',
-    });
-  } finally {
-    state.git.isLinkingToGitSandbox = false;
-  }
-};
diff --git a/packages/app/src/app/overmind/namespaces/git/index.ts b/packages/app/src/app/overmind/namespaces/git/index.ts
deleted file mode 100755
index 0d573be52de..00000000000
--- a/packages/app/src/app/overmind/namespaces/git/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { state } from './state';
-import * as actions from './actions';
-
-export { state, actions };
diff --git a/packages/app/src/app/overmind/namespaces/git/internalActions.ts b/packages/app/src/app/overmind/namespaces/git/internalActions.ts
deleted file mode 100644
index 38538198ae2..00000000000
--- a/packages/app/src/app/overmind/namespaces/git/internalActions.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Context } from 'app/overmind';
-
-export const fetchGitChanges = async ({ state, effects }: Context) => {
-  if (!state.editor.currentSandbox) {
-    return;
-  }
-
-  const { id } = state.editor.currentSandbox;
-
-  state.git.isFetching = true;
-  state.git.gitChanges = await effects.api.getGitChanges(id);
-  state.git.isFetching = false;
-};
diff --git a/packages/app/src/app/overmind/namespaces/git/state.ts b/packages/app/src/app/overmind/namespaces/git/state.ts
deleted file mode 100755
index afc3160d79f..00000000000
--- a/packages/app/src/app/overmind/namespaces/git/state.ts
+++ /dev/null
@@ -1,80 +0,0 @@
-import {
-  GitFileCompare,
-  GitPathChanges,
-  GitPr,
-  SandboxGitState,
-} from '@codesandbox/common/lib/types';
-
-type State = {
-  gitState: SandboxGitState;
-  repoTitle: string;
-  sourceSandboxId: string | null;
-  error: string | null;
-  isExported: boolean;
-  showExportedModal: boolean;
-  isFetching: boolean;
-  title: string;
-  description: string;
-  pr: GitPr | null;
-  isCommitting: boolean;
-  isCreatingPr: boolean;
-  conflicts: GitFileCompare[];
-  gitChanges: GitPathChanges;
-  sourceGitChanges: {
-    [path: string]: GitFileCompare;
-  };
-  sourceModulesByPath: {
-    [path: string]: {
-      code: string;
-      isBinary: boolean;
-      uploadId?: string;
-      sha?: string;
-    };
-  };
-  permission: 'admin' | 'write' | 'read';
-  conflictsResolving: string[];
-  outOfSyncUpdates: {
-    added: GitFileCompare[];
-    deleted: GitFileCompare[];
-    modified: GitFileCompare[];
-  };
-  // Rename source to original
-  sourceCommitSha: string | null;
-  baseCommitSha: string | null;
-  isResolving: boolean;
-  isLinkingToGitSandbox: boolean;
-};
-
-export const state: State = {
-  gitState: SandboxGitState.SYNCING,
-  sourceCommitSha: null,
-  baseCommitSha: null,
-  repoTitle: '',
-  sourceSandboxId: null,
-  error: null,
-  isExported: false,
-  showExportedModal: false,
-  isFetching: false,
-  title: '',
-  description: '',
-  pr: null,
-  isCommitting: false,
-  isCreatingPr: false,
-  isResolving: false,
-  permission: 'read',
-  sourceModulesByPath: {},
-  conflicts: [],
-  gitChanges: {
-    added: [],
-    deleted: [],
-    modified: [],
-  },
-  sourceGitChanges: {},
-  conflictsResolving: [],
-  outOfSyncUpdates: {
-    added: [],
-    deleted: [],
-    modified: [],
-  },
-  isLinkingToGitSandbox: false,
-};
diff --git a/packages/app/src/app/overmind/namespaces/git/utils.ts b/packages/app/src/app/overmind/namespaces/git/utils.ts
deleted file mode 100644
index d7b998d962c..00000000000
--- a/packages/app/src/app/overmind/namespaces/git/utils.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-export function createDiff(textA, textB) {
-  const linesA = textA.split('\n');
-  const linesB = textB.split('\n');
-  const lineCount = Math.max(linesA.length, linesB.length);
-
-  let result: string[] = [];
-  let currentConflict: { a: string[]; b: string[] } | null = null;
-
-  function closeConflict(line) {
-    result = result.concat(
-      '<<<<<<< CodeSandbox',
-      currentConflict!.a,
-      '=======',
-      currentConflict!.b,
-      '>>>>>>> GitHub',
-      line
-    );
-    currentConflict = null;
-  }
-
-  for (let x = 0; x < lineCount; x++) {
-    if (x in linesA && x in linesB && linesA[x] !== linesB[x]) {
-      if (currentConflict && linesA[x + 1] === linesB[x]) {
-        closeConflict(linesA[x]);
-        linesB.splice(x, 0, linesA[x]);
-      } else if (currentConflict && linesA[x] === linesB[x + 1]) {
-        closeConflict(linesB[x]);
-        currentConflict = null;
-        linesA.splice(x, 0, linesB[x]);
-      } else if (currentConflict) {
-        currentConflict.a.push(linesA[x]);
-        currentConflict.b.push(linesB[x]);
-      } else {
-        currentConflict = {
-          a: [linesA[x]],
-          b: [linesB[x]],
-        };
-      }
-    } else if (x in linesA && !(x in linesB)) {
-      if (currentConflict) {
-        closeConflict(linesA[x]);
-      } else {
-        result.push(linesA[x]);
-      }
-    } else if (!(x in linesA) && x in linesB) {
-      if (currentConflict) {
-        closeConflict(linesB[x]);
-      } else {
-        result.push(linesB[x]);
-      }
-    } else if (currentConflict) {
-      closeConflict(linesA[x]);
-    } else {
-      result.push(linesA[x]);
-    }
-  }
-
-  return result.join('\n');
-}
diff --git a/packages/app/src/app/overmind/namespaces/live/actions.ts b/packages/app/src/app/overmind/namespaces/live/actions.ts
deleted file mode 100755
index 2a8b21c8d0b..00000000000
--- a/packages/app/src/app/overmind/namespaces/live/actions.ts
+++ /dev/null
@@ -1,465 +0,0 @@
-import {
-  IModuleStateModule,
-  LiveMessage,
-  LiveMessageEvent,
-  RoomInfo,
-  UserSelection,
-  UserViewRange,
-} from '@codesandbox/common/lib/types';
-import { logBreadcrumb } from '@codesandbox/common/lib/utils/analytics/sentry';
-import { hasPermission } from '@codesandbox/common/lib/utils/permission';
-import { Context } from 'app/overmind';
-import { withLoadApp } from 'app/overmind/factories';
-import getItems from 'app/overmind/utils/items';
-import { filter, fork, pipe } from 'overmind';
-
-import * as internalActions from './internalActions';
-import * as liveMessage from './liveMessageOperators';
-
-export const internal = internalActions;
-
-export const signInToRoom = withLoadApp(
-  async ({ actions, state }: Context, roomId: string) => {
-    state.signInModalOpen = true;
-
-    if (state.isLoggedIn) {
-      await actions.live.roomJoined(roomId);
-    }
-  }
-);
-
-export const onOperationError = (
-  { actions }: Context,
-  {
-    moduleShortid,
-    moduleInfo,
-  }: {
-    moduleShortid: string;
-    moduleInfo: IModuleStateModule;
-  }
-) => {
-  actions.live.internal.initializeModuleFromState({
-    moduleShortid,
-    moduleInfo,
-  });
-};
-
-export const roomJoined = withLoadApp(
-  async ({ actions, effects, state }: Context, roomId: string) => {
-    if (!state.isLoggedIn) {
-      return;
-    }
-
-    await effects.vscode.initialized;
-    await effects.vscode.closeAllTabs();
-
-    state.live.joinSource = 'live';
-
-    if (state.live.isLive) {
-      actions.live.internal.disconnect();
-    }
-
-    const sandbox = await actions.live.internal.initialize(roomId);
-
-    if (!sandbox) {
-      return;
-    }
-
-    if (state.updateStatus === 'available') {
-      const modal = 'liveVersionMismatch';
-      effects.analytics.track('Open Modal', { modal });
-      state.currentModal = modal;
-    }
-
-    await actions.internal.setCurrentSandbox(sandbox);
-
-    actions.editor.listenToSandboxChanges({ sandboxId: sandbox.id });
-    const items = getItems(state);
-    const defaultItem = items.find(i => i.defaultOpen) || items[0];
-
-    state.workspace.openedWorkspaceItem = defaultItem.id;
-
-    await effects.vscode.changeSandbox(sandbox, fs => {
-      state.editor.modulesByPath = fs;
-    });
-
-    effects.vscode.openModule(state.editor.currentModule);
-
-    if (
-      sandbox.featureFlags.comments &&
-      hasPermission(sandbox.authorization, 'comment')
-    ) {
-      actions.comments.getSandboxComments(sandbox.id);
-    }
-
-    state.editor.isLoading = false;
-  }
-);
-
-export const createLiveClicked = async (
-  { actions, effects, state }: Context,
-  sandboxId: string
-) => {
-  effects.analytics.track('Create Live Session');
-
-  const roomId = await effects.api.createLiveRoom(sandboxId);
-  const sandbox = await actions.live.internal.initialize(roomId);
-  const currentSandbox = state.editor.currentSandbox;
-
-  if (!sandbox || !currentSandbox) {
-    effects.notificationToast.error('Unable to create live room');
-    return;
-  }
-
-  Object.assign(sandbox, {
-    modules: sandbox.modules.map(module => {
-      const currentModule = currentSandbox.modules.find(
-        currentSandboxModule => currentSandboxModule.shortid === module.shortid
-      );
-      return {
-        ...module,
-        code: currentModule ? currentModule.code : '',
-      };
-    }),
-  });
-  state.editor.modulesByPath = effects.vscode.sandboxFsSync.create(sandbox);
-};
-
-export const liveMessageReceived = pipe(
-  filter((_, payload: LiveMessage) =>
-    Object.values(LiveMessageEvent).includes(payload.event)
-  ),
-  filter(({ state }: Context) =>
-    Boolean(state.live.isLive && state.live.roomInfo)
-  ),
-  fork('event', {
-    [LiveMessageEvent.JOIN]: liveMessage.onJoin,
-    [LiveMessageEvent.SAVE]: liveMessage.onSave,
-    [LiveMessageEvent.MODULE_STATE]: liveMessage.onModuleState,
-    [LiveMessageEvent.USER_ENTERED]: liveMessage.onUserEntered,
-    [LiveMessageEvent.USERS_CHANGED]: liveMessage.onUsersChanged,
-    [LiveMessageEvent.USER_LEFT]: liveMessage.onUserLeft,
-    [LiveMessageEvent.EXTERNAL_RESOURCES]: liveMessage.onExternalResources,
-    [LiveMessageEvent.MODULE_SAVED]: liveMessage.onModuleSaved,
-    [LiveMessageEvent.MODULE_CREATED]: liveMessage.onModuleCreated,
-    [LiveMessageEvent.MODULE_MASS_CREATED]: liveMessage.onModuleMassCreated,
-    [LiveMessageEvent.MODULE_UPDATED]: liveMessage.onModuleUpdated,
-    [LiveMessageEvent.MODULE_DELETED]: liveMessage.onModuleDeleted,
-    [LiveMessageEvent.DIRECTORY_CREATED]: liveMessage.onDirectoryCreated,
-    [LiveMessageEvent.DIRECTORY_UPDATED]: liveMessage.onDirectoryUpdated,
-    [LiveMessageEvent.DIRECTORY_DELETED]: liveMessage.onDirectoryDeleted,
-    [LiveMessageEvent.USER_SELECTION]: liveMessage.onUserSelection,
-    [LiveMessageEvent.USER_CURRENT_MODULE]: liveMessage.onUserCurrentModule,
-    [LiveMessageEvent.USER_VIEW_RANGE]: liveMessage.onUserViewRange,
-    [LiveMessageEvent.LIVE_MODE]: liveMessage.onLiveMode,
-    [LiveMessageEvent.LIVE_CHAT_ENABLED]: liveMessage.onLiveChatEnabled,
-    [LiveMessageEvent.LIVE_ADD_EDITOR]: liveMessage.onLiveAddEditor,
-    [LiveMessageEvent.LIVE_REMOVE_EDITOR]: liveMessage.onLiveRemoveEditor,
-    [LiveMessageEvent.OPERATION]: liveMessage.onOperation,
-    [LiveMessageEvent.CONNECTION_LOSS]: liveMessage.onConnectionLoss,
-    [LiveMessageEvent.DISCONNECT]: liveMessage.onDisconnect,
-    [LiveMessageEvent.OWNER_LEFT]: liveMessage.onOwnerLeft,
-    [LiveMessageEvent.CHAT]: liveMessage.onChat,
-    [LiveMessageEvent.NOTIFICATION]: liveMessage.onNotification,
-  })
-);
-
-export const applyTransformation = async (
-  { effects }: Context,
-  {
-    operation,
-    moduleShortid,
-  }: {
-    operation: any;
-    moduleShortid: string;
-  }
-) => {
-  try {
-    await effects.vscode.applyOperation(moduleShortid, operation);
-  } catch (error) {
-    // Do not care about the error, but something went wrong and we
-    // need a full sync
-    logBreadcrumb({
-      category: 'ot',
-      message: `Apply transformation to VSCode failed ${JSON.stringify({
-        moduleShortid,
-        operation,
-      })}`,
-    });
-    effects.live.sendModuleStateSyncRequest();
-  }
-};
-
-export const sendCurrentSelection = ({ state, effects }: Context) => {
-  if (!state.live.roomInfo) {
-    return;
-  }
-
-  const { liveUserId } = state.live;
-  if (liveUserId && state.live.currentSelection) {
-    effects.live.sendUserSelection(
-      state.editor.currentModuleShortid,
-      liveUserId,
-      state.live.currentSelection
-    );
-  }
-};
-
-export const sendCurrentViewRange = ({ state, effects }: Context) => {
-  if (!state.live.roomInfo) {
-    return;
-  }
-
-  if (!state.live.isCurrentEditor) {
-    return;
-  }
-
-  const { liveUserId, currentViewRange } = state.live;
-  if (liveUserId && currentViewRange) {
-    effects.live.sendUserViewRange(
-      state.editor.currentModuleShortid,
-      liveUserId,
-      currentViewRange
-    );
-  }
-};
-
-export const onViewRangeChanged = (
-  { state, effects }: Context,
-  viewRange: UserViewRange
-) => {
-  if (!state.live.roomInfo) {
-    return;
-  }
-
-  if (state.live.isCurrentEditor) {
-    const { liveUserId } = state.live;
-    const moduleShortid = state.editor.currentModuleShortid;
-    if (!liveUserId) {
-      return;
-    }
-
-    state.live.currentViewRange = viewRange;
-    const userIndex = state.live.roomInfo.users.findIndex(
-      u => u.id === liveUserId
-    );
-
-    if (userIndex !== -1) {
-      if (state.live.roomInfo.users[userIndex]) {
-        state.live.roomInfo.users[
-          userIndex
-        ].currentModuleShortid = moduleShortid;
-
-        state.live.roomInfo.users[userIndex].viewRange = viewRange;
-
-        effects.live.sendUserViewRange(moduleShortid, liveUserId, viewRange);
-      }
-    }
-  }
-};
-
-export const onSelectionChanged = (
-  { state, effects }: Context,
-  selection: UserSelection
-) => {
-  if (!state.live.roomInfo) {
-    return;
-  }
-
-  const { liveUserId } = state.live;
-  const moduleShortid = state.editor.currentModuleShortid;
-  if (!moduleShortid || !liveUserId) {
-    return;
-  }
-
-  state.live.currentSelection = selection;
-  const userIndex = state.live.roomInfo.users.findIndex(
-    u => u.id === liveUserId
-  );
-
-  if (userIndex > -1) {
-    const user = state.live.roomInfo.users[userIndex];
-    if (user) {
-      user.currentModuleShortid = moduleShortid;
-      user.selection = selection;
-
-      effects.live.sendUserSelection(moduleShortid, liveUserId, selection);
-    }
-  }
-};
-
-export const onModeChanged = (
-  { effects, state }: Context,
-  mode: RoomInfo['mode']
-) => {
-  if (state.live.isOwner && state.live.roomInfo) {
-    state.live.roomInfo.mode = mode;
-    effects.live.sendLiveMode(mode);
-  }
-};
-
-export const onAddEditorClicked = (
-  { effects, state }: Context,
-  liveUserId: string
-) => {
-  if (!state.live.roomInfo) {
-    return;
-  }
-
-  state.live.roomInfo.editorIds.push(liveUserId);
-
-  effects.live.sendEditorAdded(liveUserId);
-};
-
-export const onRemoveEditorClicked = (
-  { effects, state }: Context,
-  liveUserId: string
-) => {
-  if (!state.live.roomInfo) {
-    return;
-  }
-
-  state.live.roomInfo.editorIds = state.live.roomInfo.editorIds.filter(
-    id => id !== liveUserId
-  );
-
-  effects.live.sendEditorRemoved(liveUserId);
-};
-
-export const onSessionCloseClicked = ({ actions, effects }: Context) => {
-  effects.live.sendClosed();
-  actions.live.internal.disconnect();
-};
-
-export const onNavigateAway = ({ actions, state }: Context) => {
-  if (state.live.isLive) {
-    actions.live.internal.disconnect();
-  }
-};
-
-export const onToggleNotificationsHidden = ({ state }: Context) => {
-  state.live.notificationsHidden = !state.live.notificationsHidden;
-};
-
-export const onSendChat = (
-  { effects }: Context,
-  { message }: { message: string }
-) => {
-  effects.live.sendChat(message);
-};
-
-export const onChatEnabledToggle = ({ effects, state }: Context) => {
-  effects.analytics.track('Enable Live Chat');
-
-  if (state.live.isOwner && state.live.roomInfo) {
-    const chatEnabled = state.live.roomInfo.chatEnabled;
-    state.live.roomInfo.chatEnabled = !chatEnabled;
-    effects.live.sendChatEnabled(!chatEnabled);
-  }
-};
-
-export const onFollow = (
-  { actions, effects, state }: Context,
-  { liveUserId }: { liveUserId: string }
-) => {
-  if (!state.live.roomInfo) {
-    return;
-  }
-
-  effects.analytics.track('Follow Along in Live');
-  state.live.followingUserId = liveUserId;
-  actions.live.revealViewRange(liveUserId);
-
-  if (state.editor.currentModule) {
-    // In case the selections were hidden first
-    actions.editor.internal.updateSelectionsOfModule({
-      module: state.editor.currentModule,
-    });
-  }
-};
-
-export const onUserLeft = (
-  { state, actions }: Context,
-  {
-    liveUserId,
-  }: {
-    liveUserId: string;
-  }
-) => {
-  if (!state.live.roomInfo) {
-    return;
-  }
-
-  if (state.live.followingUserId && state.live.followingUserId === liveUserId) {
-    // Unfollow user if they are the one who left
-    actions.live.onStopFollow();
-  }
-
-  actions.live.internal.clearUserSelections(liveUserId);
-};
-
-export const onStopFollow = ({ state, actions }: Context) => {
-  if (!state.live.roomInfo) {
-    return;
-  }
-
-  state.live.followingUserId = null;
-
-  if (state.editor.currentModule) {
-    // In case the selections were hidden first
-    actions.editor.internal.updateSelectionsOfModule({
-      module: state.editor.currentModule,
-    });
-  }
-};
-
-export const revealViewRange = (
-  { actions, effects, state }: Context,
-  liveUserId: string
-) => {
-  if (!state.live.roomInfo) {
-    return;
-  }
-
-  const user = state.live.roomInfo.users.find(({ id }) => id === liveUserId);
-
-  if (user && user.currentModuleShortid && state.editor.currentSandbox) {
-    const { modules } = state.editor.currentSandbox;
-    const module = modules.filter(
-      ({ shortid }) => shortid === user.currentModuleShortid
-    )[0];
-
-    actions.editor.moduleSelected({ id: module.id });
-
-    if (user.viewRange) {
-      effects.vscode.revealRange(user.viewRange);
-    }
-  }
-};
-
-export const revealCursorPosition = async (
-  { state, effects, actions }: Context,
-  { liveUserId }: { liveUserId: string }
-) => {
-  if (!state.live.roomInfo) {
-    return;
-  }
-
-  const user = state.live.roomInfo.users.find(u => u.id === liveUserId);
-
-  if (user && user.currentModuleShortid && state.editor.currentSandbox) {
-    const { modules } = state.editor.currentSandbox;
-    const module = modules.filter(
-      ({ shortid }) => shortid === user.currentModuleShortid
-    )[0];
-
-    await actions.editor.moduleSelected({ id: module.id });
-
-    if (user.selection?.primary?.cursorPosition) {
-      effects.vscode.revealPositionInCenterIfOutsideViewport(
-        user.selection.primary.cursorPosition,
-        0
-      );
-    }
-  }
-};
diff --git a/packages/app/src/app/overmind/namespaces/live/index.ts b/packages/app/src/app/overmind/namespaces/live/index.ts
deleted file mode 100755
index 0d573be52de..00000000000
--- a/packages/app/src/app/overmind/namespaces/live/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { state } from './state';
-import * as actions from './actions';
-
-export { state, actions };
diff --git a/packages/app/src/app/overmind/namespaces/live/internalActions.ts b/packages/app/src/app/overmind/namespaces/live/internalActions.ts
deleted file mode 100755
index 5dfc5b0551a..00000000000
--- a/packages/app/src/app/overmind/namespaces/live/internalActions.ts
+++ /dev/null
@@ -1,260 +0,0 @@
-import {
-  EditorSelection,
-  IModuleState,
-  IModuleStateModule,
-  Module,
-  Sandbox,
-} from '@codesandbox/common/lib/types';
-import { logBreadcrumb } from '@codesandbox/common/lib/utils/analytics/sentry';
-import { getTextOperation } from '@codesandbox/common/lib/utils/diff';
-import { Context } from 'app/overmind';
-import { json } from 'overmind';
-
-import { getSavedCode } from '../../utils/sandbox';
-
-export const clearUserSelections = (
-  { state, effects }: Context,
-  live_user_id: string | null
-) => {
-  if (!state.live.roomInfo) {
-    return;
-  }
-
-  const clearSelections = (userId: string) => {
-    const roomInfo = state.live.roomInfo!;
-    const userIndex = roomInfo.users.findIndex(u => u.id === userId);
-
-    effects.vscode.clearUserSelections(userId);
-    if (userIndex > -1) {
-      const user = roomInfo.users[userIndex];
-      if (user) {
-        user.selection = null;
-      }
-    }
-  };
-
-  if (!live_user_id) {
-    // All users
-    state.live.roomInfo.users.forEach(u => clearSelections(u.id));
-  } else {
-    clearSelections(live_user_id);
-  }
-};
-
-export const reset = ({ state, actions, effects }: Context) => {
-  actions.live.internal.clearUserSelections(null);
-  state.live.isLive = false;
-  state.live.error = null;
-  state.live.isLoading = false;
-  state.live.roomInfo = null;
-  state.live.joinSource = 'sandbox';
-  effects.live.reset();
-};
-
-export const disconnect = ({ effects, actions }: Context) => {
-  effects.live.disconnect();
-  actions.live.internal.reset();
-};
-
-export const initialize = async (
-  { state, effects, actions }: Context,
-  id: string
-) => {
-  state.live.isLoading = true;
-
-  try {
-    const {
-      roomInfo,
-      liveUserId,
-      moduleState,
-    } = await effects.live.joinChannel(id, reason => {
-      if (reason === 'room not found') {
-        if (state.live.roomInfo) {
-          // Reset the live room id so that the logic that checks if the room id changed
-          // doesn't get confused. We changed that a sandbox will always have a consistent
-          // room id, so we need to manually change the id so the "change" logic actually
-          // makes sure that we reconnect.
-          state.live.roomInfo.roomId = 'INVALID_ROOM';
-        }
-        actions.refetchSandboxInfo();
-      }
-    });
-
-    state.live.roomInfo = roomInfo;
-    state.live.liveUserId = liveUserId;
-
-    const sandboxId = roomInfo.sandboxId;
-    let sandbox = state.editor.currentSandbox;
-    if (!sandbox || sandbox.id !== sandboxId) {
-      sandbox = await effects.api.getSandbox(sandboxId);
-      state.editor.sandboxes[sandboxId] = sandbox;
-      state.editor.currentId = sandboxId;
-    }
-
-    actions.live.internal.initializeModuleState(moduleState);
-    effects.live.listen(actions.live.liveMessageReceived);
-    actions.live.internal.sendUnsavedChanges({ sandbox, moduleState });
-
-    (state.editor.changedModuleShortids || []).forEach(moduleShortId => {
-      effects.vscode.openModule(
-        sandbox!.modules.find(
-          moduleItem => moduleItem.shortid === moduleShortId
-        )!
-      );
-    });
-
-    state.live.isLive = true;
-    state.live.error = null;
-    effects.live.markLiveReady();
-
-    return sandbox;
-  } catch (error) {
-    state.live.error = error.reason;
-  } finally {
-    state.live.isLoading = false;
-  }
-
-  return null;
-};
-
-export const initializeModuleFromState = (
-  { state, effects }: Context,
-  {
-    moduleShortid,
-    moduleInfo,
-  }: {
-    moduleShortid: string;
-    moduleInfo: IModuleStateModule;
-  }
-) => {
-  const sandbox = state.editor.currentSandbox;
-  if (!sandbox) {
-    return;
-  }
-
-  // Module has not been saved, so is different
-  const module = sandbox.modules.find(m => m.shortid === moduleShortid);
-
-  if (module) {
-    effects.live.createClient(moduleShortid, moduleInfo.revision || 0);
-    if (!('code' in moduleInfo)) {
-      return;
-    }
-
-    const savedCodeChanged =
-      getSavedCode(moduleInfo.code, moduleInfo.saved_code) !==
-      getSavedCode(module.code, module.savedCode);
-    const moduleChanged =
-      moduleInfo.code !== module.code ||
-      moduleInfo.saved_code !== module.savedCode;
-
-    if (moduleChanged) {
-      if (moduleInfo.saved_code !== undefined) {
-        module.savedCode = moduleInfo.saved_code;
-      }
-      if (moduleInfo.code !== undefined) {
-        module.code = moduleInfo.code;
-      }
-
-      if (savedCodeChanged) {
-        effects.vscode.sandboxFsSync.writeFile(
-          state.editor.modulesByPath,
-          module
-        );
-      }
-      if (moduleInfo.synced) {
-        effects.vscode.syncModule(module);
-      } else {
-        effects.vscode.setModuleCode(module);
-      }
-    }
-  }
-};
-
-export const initializeModuleState = (
-  { state, actions }: Context,
-  moduleState: IModuleState
-) => {
-  const sandbox = state.editor.currentSandbox;
-  if (!sandbox) {
-    return;
-  }
-  logBreadcrumb({
-    category: 'ot',
-    message: 'Applying new module state',
-  });
-  Object.keys(moduleState).forEach(moduleShortid => {
-    const moduleInfo = moduleState[moduleShortid];
-
-    actions.live.internal.initializeModuleFromState({
-      moduleShortid,
-      moduleInfo,
-    });
-  });
-  // TODO: enable once we know exactly when we want to recover
-  // actions.files.internal.recoverFiles();
-  actions.editor.internal.updatePreviewCode();
-};
-
-export const getSelectionsForModule = ({ state }: Context, module: Module) => {
-  const selections: EditorSelection[] = [];
-  const moduleShortid = module.shortid;
-
-  if (!state.live.roomInfo) {
-    return selections;
-  }
-
-  state.live.roomInfo.users.forEach(user => {
-    const userId = user.id;
-    if (
-      userId === state.live.liveUserId ||
-      user.currentModuleShortid !== moduleShortid ||
-      (!state.live.isEditor(userId) && state.live.followingUserId !== userId)
-    ) {
-      return;
-    }
-
-    if (user.selection) {
-      selections.push({
-        userId,
-        color: user.color,
-        name: user.username,
-        selection: json(user.selection),
-      });
-    }
-  });
-
-  return selections;
-};
-
-/**
- * This sends over all modules that are not synced with OT, and of which we have local changes.
- * If there's a module that has OT changes from the module_state, we ignore them.
- */
-export const sendUnsavedChanges = (
-  { effects }: Context,
-  {
-    sandbox,
-    moduleState,
-  }: {
-    sandbox: Sandbox;
-    moduleState: IModuleState;
-  }
-) => {
-  // We now need to send all dirty files that came over from the last sandbox.
-  // There is the scenario where you edit a file and press fork. Then the server
-  // doesn't know about how you got to that dirty state.
-  const changedModules = sandbox.modules.filter(
-    m => getSavedCode(m.code, m.savedCode) !== m.code
-  );
-  changedModules.forEach(m => {
-    if (!moduleState[m.shortid]) {
-      const savedCode = getSavedCode(m.code, m.savedCode);
-      // Update server with latest data
-      effects.live.sendCodeUpdate(
-        m.shortid,
-        getTextOperation(savedCode, m.code || '')
-      );
-    }
-  });
-};
diff --git a/packages/app/src/app/overmind/namespaces/live/liveMessageOperators.ts b/packages/app/src/app/overmind/namespaces/live/liveMessageOperators.ts
deleted file mode 100644
index 27f81726351..00000000000
--- a/packages/app/src/app/overmind/namespaces/live/liveMessageOperators.ts
+++ /dev/null
@@ -1,878 +0,0 @@
-import { getModulesAndDirectoriesInDirectory } from '@codesandbox/common/lib/sandbox/modules';
-import {
-  Directory,
-  LiveDisconnectReason,
-  LiveMessage,
-  LiveUser,
-  Module,
-  RoomInfo,
-  UserSelection,
-  UserViewRange,
-} from '@codesandbox/common/lib/types';
-import { logBreadcrumb } from '@codesandbox/common/lib/utils/analytics/sentry';
-import { NotificationStatus } from '@codesandbox/notifications/lib/state';
-import { camelizeKeys } from 'humps';
-
-import { Context } from 'app/overmind';
-import { getSavedCode } from 'app/overmind/utils/sandbox';
-
-export const onSave = (
-  { state, effects }: Context,
-  {
-    data,
-  }: LiveMessage<{
-    saved_code: string;
-    updated_at: string;
-    inserted_at: string;
-    version: number;
-    path: string;
-  }>
-) => {
-  const sandbox = state.editor.currentSandbox;
-
-  if (!sandbox) {
-    return;
-  }
-  const module = sandbox.modules.find(
-    moduleItem => moduleItem.path === data.path
-  );
-
-  if (!module) {
-    return;
-  }
-
-  module.savedCode = module.code === data.saved_code ? null : data.saved_code;
-  module.updatedAt = data.updated_at;
-  module.insertedAt = data.inserted_at;
-  sandbox.version = data.version;
-  effects.vscode.sandboxFsSync.writeFile(state.editor.modulesByPath, module);
-
-  if (module.savedCode === null) {
-    effects.vscode.syncModule(module);
-  }
-};
-
-export const onJoin = (
-  { effects, actions, state }: Context,
-  {
-    data,
-  }: LiveMessage<{
-    status: 'connected';
-    live_user_id: string;
-  }>
-) => {
-  state.live.liveUserId = data.live_user_id;
-
-  if (state.live.reconnecting) {
-    // We reconnected!
-    effects.live.getAllClients().forEach(client => {
-      client.serverReconnect();
-    });
-
-    if (state.live.roomInfo) {
-      // Clear all user selections
-      actions.live.internal.clearUserSelections(null);
-    }
-  }
-
-  state.live.reconnecting = false;
-};
-
-export const onModuleState = (
-  { actions }: Context,
-  {
-    data,
-  }: LiveMessage<{
-    module_state: any;
-  }>
-) => {
-  actions.live.internal.initializeModuleState(data.module_state);
-};
-
-export const onExternalResources = (
-  { state, actions }: Context,
-  {
-    data,
-  }: LiveMessage<{
-    externalResources: string[];
-  }>
-) => {
-  if (!state.editor.currentSandbox) {
-    return;
-  }
-  state.editor.currentSandbox.externalResources = data.externalResources;
-  actions.editor.internal.updatePreviewCode();
-};
-
-export const onUsersChanged = (
-  { state, actions }: Context,
-  {
-    data,
-  }: LiveMessage<{
-    users: LiveUser[];
-    editor_ids: string[];
-    owner_ids: string[];
-  }>
-) => {
-  if (state.live.isLoading || !state.live.roomInfo || !state.live.isLive) {
-    return;
-  }
-
-  const users = camelizeKeys(data.users);
-
-  state.live.roomInfo.users = users as LiveUser[];
-  state.live.roomInfo.editorIds = data.editor_ids;
-  state.live.roomInfo.ownerIds = data.owner_ids;
-
-  if (state.editor.currentModule) {
-    actions.editor.internal.updateSelectionsOfModule({
-      module: state.editor.currentModule,
-    });
-  }
-};
-
-export const onUserEntered = (
-  { state, effects, actions }: Context,
-  {
-    data,
-  }: LiveMessage<{
-    users: LiveUser[];
-    editor_ids: string[];
-    owner_ids: string[];
-    joined_user_id: string;
-  }>
-) => {
-  if (state.live.isLoading || !state.live.roomInfo || !state.live.isLive) {
-    return;
-  }
-
-  effects.analytics.track('Editor - Someone joined the live session');
-
-  const users = camelizeKeys(data.users);
-
-  state.live.roomInfo.users = users as LiveUser[];
-  state.live.roomInfo.editorIds = data.editor_ids;
-  state.live.roomInfo.ownerIds = data.owner_ids;
-
-  if (state.editor.currentModule) {
-    actions.editor.internal.updateSelectionsOfModule({
-      module: state.editor.currentModule,
-    });
-  }
-
-  // Send our own selections and viewranges to everyone, just to let the others know where
-  // we are
-  actions.live.sendCurrentSelection();
-  actions.live.sendCurrentViewRange();
-
-  if (data.joined_user_id === state.live.liveUserId) {
-    return;
-  }
-
-  const user = data.users.find(u => u.id === data.joined_user_id);
-
-  if (
-    !state.live.notificationsHidden &&
-    user &&
-    !state.user?.experiments.collaborator
-  ) {
-    effects.notificationToast.add({
-      message: `${user.username} joined the live session.`,
-      status: NotificationStatus.NOTICE,
-    });
-  }
-};
-
-export const onUserLeft = (
-  { state, actions, effects }: Context,
-  {
-    data,
-  }: LiveMessage<{
-    users: LiveUser[];
-    left_user_id: string;
-    editor_ids: string[];
-    owner_ids: string[];
-  }>
-) => {
-  if (!state.live.roomInfo) {
-    return;
-  }
-
-  effects.analytics.track('Editor - Someone left the live session');
-
-  if (!state.live.notificationsHidden) {
-    const { users } = state.live.roomInfo;
-    const user = users ? users.find(u => u.id === data.left_user_id) : null;
-
-    if (
-      user &&
-      user.id !== state.live.liveUserId &&
-      !state.user?.experiments.collaborator
-    ) {
-      effects.notificationToast.add({
-        message: `${user.username} left the live session.`,
-        status: NotificationStatus.NOTICE,
-      });
-    }
-  }
-
-  actions.live.onUserLeft({ liveUserId: data.left_user_id });
-
-  const users = camelizeKeys(data.users) as LiveUser[];
-
-  state.live.roomInfo.users = users;
-  state.live.roomInfo.ownerIds = data.owner_ids;
-  state.live.roomInfo.editorIds = data.editor_ids;
-};
-
-export const onModuleSaved = (
-  { state, effects, actions }: Context,
-  {
-    _isOwnMessage,
-    data,
-  }: LiveMessage<{
-    moduleShortid: string;
-    module: Module;
-  }>
-) => {
-  if (_isOwnMessage || !state.editor.currentSandbox) {
-    return;
-  }
-  const module = state.editor.currentSandbox.modules.find(
-    moduleItem => moduleItem.shortid === data.moduleShortid
-  );
-
-  if (module) {
-    actions.editor.internal.setModuleSavedCode({
-      moduleShortid: data.moduleShortid,
-      savedCode: data.module.savedCode,
-    });
-
-    effects.vscode.sandboxFsSync.writeFile(state.editor.modulesByPath, module);
-    const savedCode = getSavedCode(module.code, module.savedCode);
-    if (!effects.vscode.isModuleOpened(module)) {
-      module.code = savedCode;
-    }
-    if (module.code === savedCode) {
-      // We revert the module so that VSCode will flag saved indication correctly
-      effects.vscode.syncModule(module);
-    }
-    actions.editor.internal.updatePreviewCode();
-  }
-};
-
-export const onModuleCreated = (
-  { state, actions, effects }: Context,
-  {
-    _isOwnMessage,
-    data,
-  }: LiveMessage<{
-    module: Module;
-  }>
-) => {
-  if (_isOwnMessage || !state.editor.currentSandbox) {
-    return;
-  }
-  state.editor.currentSandbox.modules.push(data.module);
-  effects.vscode.sandboxFsSync.writeFile(
-    state.editor.modulesByPath,
-    data.module
-  );
-  if (state.editor.currentSandbox.originalGit) {
-    actions.git.updateGitChanges();
-  }
-};
-
-export const onModuleMassCreated = (
-  { state, actions, effects }: Context,
-  {
-    _isOwnMessage,
-    data,
-  }: LiveMessage<{
-    modules: Module[];
-    directories: Directory[];
-  }>
-) => {
-  if (_isOwnMessage || !state.editor.currentSandbox) {
-    return;
-  }
-  state.editor.currentSandbox.modules = state.editor.currentSandbox.modules.concat(
-    data.modules
-  );
-  state.editor.currentSandbox.directories = state.editor.currentSandbox.directories.concat(
-    data.directories
-  );
-
-  state.editor.modulesByPath = effects.vscode.sandboxFsSync.create(
-    state.editor.currentSandbox
-  );
-
-  actions.editor.internal.updatePreviewCode();
-  if (state.editor.currentSandbox.originalGit) {
-    actions.git.updateGitChanges();
-  }
-};
-
-export const onModuleUpdated = (
-  { state, actions, effects }: Context,
-  {
-    _isOwnMessage,
-    data,
-  }: LiveMessage<{
-    moduleShortid: string;
-    module: Module;
-  }>
-) => {
-  const sandbox = state.editor.currentSandbox;
-
-  if (_isOwnMessage || !sandbox) {
-    return;
-  }
-
-  const moduleIndex = sandbox.modules.findIndex(
-    moduleEntry => moduleEntry.shortid === data.moduleShortid
-  );
-  const existingModule =
-    state.editor.sandboxes[sandbox.id].modules[moduleIndex];
-
-  if (existingModule.path !== data.module.path) {
-    effects.vscode.sandboxFsSync.rename(
-      state.editor.modulesByPath,
-      existingModule.path!,
-      data.module.path!
-    );
-  }
-
-  Object.assign(existingModule, data.module);
-
-  effects.vscode.sandboxFsSync.writeFile(
-    state.editor.modulesByPath,
-    existingModule
-  );
-
-  if (state.editor.currentModuleShortid === data.moduleShortid) {
-    effects.vscode.openModule(existingModule);
-  }
-
-  actions.editor.internal.updatePreviewCode();
-  if (state.editor.currentSandbox!.originalGit) {
-    actions.git.updateGitChanges();
-  }
-};
-
-export const onModuleDeleted = (
-  { state, effects, actions }: Context,
-  {
-    _isOwnMessage,
-    data,
-  }: LiveMessage<{
-    moduleShortid: string;
-  }>
-) => {
-  if (_isOwnMessage || !state.editor.currentSandbox) {
-    return;
-  }
-  const removedModule = state.editor.currentSandbox.modules.find(
-    directory => directory.shortid === data.moduleShortid
-  );
-  if (!removedModule) {
-    return;
-  }
-  const moduleIndex = state.editor.currentSandbox.modules.indexOf(
-    removedModule
-  );
-  const wasCurrentModule =
-    state.editor.currentModuleShortid === data.moduleShortid;
-
-  state.editor.currentSandbox.modules.splice(moduleIndex, 1);
-  effects.vscode.sandboxFsSync.unlink(
-    state.editor.modulesByPath,
-    removedModule
-  );
-
-  if (wasCurrentModule && state.editor.mainModule) {
-    actions.editor.internal.setCurrentModule(state.editor.mainModule);
-  }
-
-  actions.editor.internal.updatePreviewCode();
-  if (state.editor.currentSandbox.originalGit) {
-    actions.git.updateGitChanges();
-  }
-};
-
-export const onDirectoryCreated = (
-  { state, effects }: Context,
-  {
-    _isOwnMessage,
-    data,
-  }: LiveMessage<{
-    module: Directory; // This is very weird?
-  }>
-) => {
-  if (_isOwnMessage || !state.editor.currentSandbox) {
-    return;
-  }
-  // Should this not be a directory?
-  state.editor.currentSandbox.directories.push(data.module);
-  effects.vscode.sandboxFsSync.mkdir(state.editor.modulesByPath, data.module);
-};
-
-export const onDirectoryUpdated = (
-  { state, actions }: Context,
-  {
-    _isOwnMessage,
-    data,
-  }: LiveMessage<{
-    directoryShortid: string;
-    module: Directory; // Still very weird
-  }>
-) => {
-  const sandbox = state.editor.currentSandbox;
-  if (_isOwnMessage || !sandbox) {
-    return;
-  }
-
-  const directoryIndex = sandbox.directories.findIndex(
-    directoryEntry => directoryEntry.shortid === data.directoryShortid
-  );
-  const existingDirectory =
-    state.editor.sandboxes[sandbox.id].directories[directoryIndex];
-  const hasChangedPath = existingDirectory.path !== data.module.path;
-
-  Object.assign(existingDirectory, data.module);
-
-  if (hasChangedPath) {
-    const prevCurrentModulePath = state.editor.currentModule.path;
-
-    actions.files.internal.renameDirectoryInState({
-      directory: existingDirectory,
-      sandbox,
-      title: data.module.title,
-    });
-
-    actions.editor.internal.updatePreviewCode();
-
-    if (prevCurrentModulePath !== state.editor.currentModule.path) {
-      actions.editor.internal.setCurrentModule(state.editor.currentModule);
-    }
-  }
-};
-
-export const onDirectoryDeleted = (
-  { state, effects, actions }: Context,
-  {
-    _isOwnMessage,
-    data,
-  }: LiveMessage<{
-    directoryShortid: string;
-  }>
-) => {
-  const sandbox = state.editor.currentSandbox;
-  if (_isOwnMessage || !sandbox) {
-    return;
-  }
-
-  const directory = sandbox.directories.find(
-    directoryItem => directoryItem.shortid === data.directoryShortid
-  );
-
-  if (!directory) {
-    return;
-  }
-
-  const removedDirectory = sandbox.directories.splice(
-    sandbox.directories.indexOf(directory),
-    1
-  )[0];
-  const {
-    removedModules,
-    removedDirectories,
-  } = getModulesAndDirectoriesInDirectory(
-    removedDirectory,
-    sandbox.modules,
-    sandbox.directories
-  );
-
-  removedModules.forEach(removedModule => {
-    effects.vscode.sandboxFsSync.unlink(
-      state.editor.modulesByPath,
-      removedModule
-    );
-    sandbox.modules.splice(sandbox.modules.indexOf(removedModule), 1);
-  });
-
-  removedDirectories.forEach(removedDirectoryItem => {
-    sandbox.directories.splice(
-      sandbox.directories.indexOf(removedDirectoryItem),
-      1
-    );
-  });
-
-  // We open the main module as we do not really know if you had opened
-  // any nested file of this directory. It would require complex logic
-  // to figure that out. This concept is soon removed anyways
-  if (state.editor.mainModule)
-    effects.vscode.openModule(state.editor.mainModule);
-  actions.editor.internal.updatePreviewCode();
-
-  if (state.editor.currentSandbox!.originalGit) {
-    actions.git.updateGitChanges();
-  }
-};
-
-export const onUserSelection = (
-  { state, effects, actions }: Context,
-  {
-    _isOwnMessage,
-    data,
-  }: LiveMessage<{
-    liveUserId: string;
-    moduleShortid: string;
-    selection: UserSelection;
-  }>
-) => {
-  if (_isOwnMessage || !state.live.roomInfo || !state.editor.currentSandbox) {
-    return;
-  }
-
-  const userSelectionLiveUserId = data.liveUserId;
-  const { moduleShortid } = data;
-  const { selection } = data;
-  const userIndex = state.live.roomInfo.users.findIndex(
-    u => u.id === userSelectionLiveUserId
-  );
-
-  if (userIndex > -1) {
-    state.live.roomInfo.users[userIndex].currentModuleShortid = moduleShortid;
-    state.live.roomInfo.users[userIndex].selection = selection;
-  }
-
-  const module = state.editor.currentSandbox.modules.find(
-    m => m.shortid === moduleShortid
-  );
-
-  const isFollowingUser =
-    state.live.followingUserId === userSelectionLiveUserId;
-  if (
-    module &&
-    (state.live.isEditor(userSelectionLiveUserId) || isFollowingUser)
-  ) {
-    const user = state.live.roomInfo.users.find(
-      u => u.id === userSelectionLiveUserId
-    );
-
-    if (user) {
-      effects.vscode.updateUserSelections(
-        module,
-        actions.live.internal.getSelectionsForModule(module)
-      );
-
-      if (isFollowingUser) {
-        actions.live.revealCursorPosition({
-          liveUserId: userSelectionLiveUserId,
-        });
-      }
-    }
-  }
-};
-
-export const onUserCurrentModule = (
-  { state, actions }: Context,
-  {
-    _isOwnMessage,
-    data,
-  }: LiveMessage<{
-    live_user_id: string;
-    moduleShortid: string;
-  }>
-) => {
-  if (_isOwnMessage || !state.live.roomInfo || !state.editor.currentSandbox) {
-    return;
-  }
-  const userIndex = state.live.roomInfo.users.findIndex(
-    u => u.id === data.live_user_id
-  );
-
-  if (userIndex > -1) {
-    state.live.roomInfo.users[userIndex].currentModuleShortid =
-      data.moduleShortid;
-  }
-
-  actions.live.internal.clearUserSelections(data.live_user_id);
-
-  if (
-    state.live.followingUserId === data.live_user_id &&
-    data.moduleShortid !== state.editor.currentModuleShortid
-  ) {
-    const { moduleShortid } = data;
-    const { modules } = state.editor.currentSandbox;
-    const module = modules.find(m => m.shortid === moduleShortid);
-
-    if (!module) {
-      return;
-    }
-
-    actions.editor.moduleSelected({
-      id: module.id,
-    });
-  }
-};
-
-export const onUserViewRange = (
-  { state, effects }: Context,
-  {
-    _isOwnMessage,
-    data,
-  }: LiveMessage<{
-    liveUserId: string;
-    moduleShortid: string;
-    viewRange: UserViewRange;
-  }>
-) => {
-  if (_isOwnMessage || !state.live.roomInfo || !state.editor.currentSandbox) {
-    return;
-  }
-
-  const userSelectionLiveUserId = data.liveUserId;
-  const { moduleShortid } = data;
-  const { viewRange } = data;
-  const userIndex = state.live.roomInfo.users.findIndex(
-    u => u.id === userSelectionLiveUserId
-  );
-
-  if (userIndex !== -1) {
-    state.live.roomInfo.users[userIndex].currentModuleShortid = moduleShortid;
-    state.live.roomInfo.users[userIndex].viewRange = viewRange;
-  }
-
-  const module = state.editor.currentSandbox.modules.find(
-    m => m.shortid === moduleShortid
-  );
-  if (module) {
-    const user = state.live.roomInfo.users.find(
-      u => u.id === userSelectionLiveUserId
-    );
-
-    if (user && state.live.followingUserId === userSelectionLiveUserId) {
-      effects.vscode.revealRange(viewRange);
-    }
-  }
-};
-
-export const onLiveMode = (
-  { actions, state }: Context,
-  {
-    _isOwnMessage,
-    data,
-  }: LiveMessage<{
-    mode: RoomInfo['mode'];
-  }>
-) => {
-  if (!state.live.roomInfo) {
-    return;
-  }
-
-  if (!_isOwnMessage) {
-    state.live.roomInfo.mode = data.mode;
-  }
-  actions.live.internal.clearUserSelections(null);
-};
-
-export const onLiveChatEnabled = (
-  { state }: Context,
-  {
-    _isOwnMessage,
-    data,
-  }: LiveMessage<{
-    enabled: boolean;
-  }>
-) => {
-  if (!state.live.roomInfo) {
-    return;
-  }
-
-  if (_isOwnMessage) {
-    return;
-  }
-  state.live.roomInfo.chatEnabled = data.enabled;
-};
-
-export const onLiveAddEditor = (
-  { state }: Context,
-  {
-    _isOwnMessage,
-    data,
-  }: LiveMessage<{
-    editor_user_id: string;
-  }>
-) => {
-  if (!state.live.roomInfo) {
-    return;
-  }
-
-  if (!_isOwnMessage) {
-    state.live.roomInfo.editorIds.push(data.editor_user_id);
-  }
-};
-
-export const onLiveRemoveEditor = (
-  { state, actions }: Context,
-  {
-    _isOwnMessage,
-    data,
-  }: LiveMessage<{
-    editor_user_id: string;
-  }>
-) => {
-  if (!state.live.roomInfo) {
-    return;
-  }
-
-  const userId = data.editor_user_id;
-  actions.live.internal.clearUserSelections(userId);
-
-  if (!_isOwnMessage) {
-    const editors = state.live.roomInfo.editorIds;
-    const newEditors = editors.filter(id => id !== userId);
-
-    state.live.roomInfo.editorIds = newEditors;
-  }
-};
-
-export const onOperation = (
-  { state, effects }: Context,
-  {
-    _isOwnMessage,
-    data,
-  }: LiveMessage<{
-    module_shortid: string;
-    operation: any;
-  }>
-) => {
-  if (state.live.isLoading) {
-    return;
-  }
-  if (_isOwnMessage) {
-    // Do nothing since we already sent this operation
-  } else {
-    try {
-      effects.live.applyServer(data.module_shortid, data.operation);
-    } catch (e) {
-      // Something went wrong, probably a sync mismatch. Request new version
-      console.error('Something went wrong with applying OT operation');
-
-      logBreadcrumb({
-        category: 'ot',
-        message: `Apply operation from server to OT client failed ${JSON.stringify(
-          data
-        )}`,
-      });
-
-      effects.live.sendModuleStateSyncRequest();
-    }
-  }
-};
-
-export const onConnectionLoss = async ({ state, effects }: Context) => {
-  if (!state.live.reconnecting) {
-    let notificationId: string | null = null;
-    const timeout = setTimeout(() => {
-      notificationId = effects.notificationToast.add({
-        message: 'We lost connection with the live server, reconnecting...',
-        status: NotificationStatus.ERROR,
-      });
-    }, 30000);
-
-    state.live.reconnecting = true;
-
-    await effects.flows.waitUntil(s => s.live.reconnecting === false);
-    if (notificationId) {
-      effects.notificationToast.remove(notificationId);
-    }
-    if (timeout) {
-      clearTimeout(timeout);
-    }
-  }
-};
-
-export const onDisconnect = (
-  { state, actions }: Context,
-  {
-    data,
-  }: LiveMessage<{
-    reason: LiveDisconnectReason;
-  }>
-) => {
-  actions.live.internal.disconnect();
-
-  if (state.editor.currentSandbox)
-    state.editor.currentSandbox.owned = state.live.isOwner;
-
-  actions.modalOpened({
-    modal: 'liveSessionEnded',
-    message:
-      data.reason === 'close'
-        ? 'The owner ended the session'
-        : 'The session has ended due to inactivity',
-  });
-
-  actions.live.internal.reset();
-};
-
-export const onOwnerLeft = ({ actions }: Context) => {
-  actions.modalOpened({
-    modal: 'liveSessionEnded',
-    message: 'The owner left the session',
-  });
-};
-
-export const onChat = (
-  { state }: Context,
-  {
-    data,
-  }: LiveMessage<{
-    live_user_id: string;
-    message: string;
-    date: number;
-  }>
-) => {
-  if (!state.live.roomInfo) {
-    return;
-  }
-
-  let name = state.live.roomInfo.chat.users[data.live_user_id];
-
-  if (!name) {
-    const user = state.live.roomInfo.users.find(
-      u => u.id === data.live_user_id
-    );
-
-    if (user) {
-      state.live.roomInfo.chat.users[data.live_user_id] = user.username;
-      name = user.username;
-    } else {
-      name = 'Unknown User';
-    }
-  }
-
-  state.live.roomInfo.chat.messages.push({
-    userId: data.live_user_id,
-    message: data.message,
-    date: data.date,
-  });
-};
-
-export const onNotification = (
-  { effects }: Context,
-  {
-    data,
-  }: LiveMessage<{
-    message: string;
-    type: NotificationStatus;
-  }>
-) => {
-  effects.notificationToast.add({
-    message: data.message,
-    status: data.type,
-  });
-};
diff --git a/packages/app/src/app/overmind/namespaces/live/state.ts b/packages/app/src/app/overmind/namespaces/live/state.ts
deleted file mode 100755
index 7755b05b05f..00000000000
--- a/packages/app/src/app/overmind/namespaces/live/state.ts
+++ /dev/null
@@ -1,101 +0,0 @@
-import {
-  LiveUser,
-  RoomInfo,
-  UserSelection,
-  UserViewRange,
-} from '@codesandbox/common/lib/types';
-import { derived } from 'overmind';
-
-type State = {
-  isLive: boolean;
-  isTeam: boolean;
-  isLoading: boolean;
-  error: string | null;
-  reconnecting: boolean;
-  notificationsHidden: boolean;
-  followingUserId: string | null;
-  liveUserId: string | null;
-  roomInfo: RoomInfo | null;
-  /**
-   * Whether we joined from /s/ or from /live/
-   */
-  joinSource: 'sandbox' | 'live';
-  currentSelection: UserSelection | null;
-  currentViewRange: UserViewRange | null;
-  liveUser: LiveUser | null;
-  isEditor: (liveUserId: string) => boolean;
-  isCurrentEditor: boolean;
-  isOwner: boolean;
-  liveUsersByModule: {
-    [id: string]: number[][];
-  };
-};
-
-export const state: State = {
-  isLive: false,
-  isTeam: false,
-  isLoading: false,
-  reconnecting: false,
-  notificationsHidden: false,
-  followingUserId: null,
-  error: null,
-  liveUserId: null,
-  roomInfo: null,
-  currentSelection: {
-    primary: {
-      cursorPosition: 0,
-      selection: [],
-    },
-    secondary: [],
-    source: 'overmind',
-  },
-  currentViewRange: null,
-  joinSource: 'sandbox',
-  liveUser: derived(
-    (currentState: State) =>
-      currentState.roomInfo?.users.find(
-        u => u.id === currentState.liveUserId
-      ) || null
-  ),
-  isEditor: derived((currentState: State) => liveUserId =>
-    Boolean(
-      currentState.isLive &&
-        currentState.roomInfo &&
-        (currentState.roomInfo.mode === 'open' ||
-          currentState.roomInfo.ownerIds.includes(liveUserId) ||
-          currentState.roomInfo.editorIds.includes(liveUserId))
-    )
-  ),
-  isCurrentEditor: derived((currentState: State) =>
-    Boolean(
-      currentState.liveUserId && currentState.isEditor(currentState.liveUserId)
-    )
-  ),
-  isOwner: derived((currentState: State) =>
-    Boolean(
-      currentState.isLive &&
-        currentState.liveUserId &&
-        currentState.roomInfo?.ownerIds.includes(currentState.liveUserId)
-    )
-  ),
-  liveUsersByModule: derived((currentState: State) => {
-    const usersByModule: { [id: string]: number[][] } = {};
-
-    if (!currentState.isLive || !currentState.roomInfo) {
-      return {};
-    }
-
-    const { liveUserId } = currentState;
-
-    currentState.roomInfo.users.forEach(user => {
-      const userId = user.id;
-      if (user && userId !== liveUserId && user.currentModuleShortid) {
-        usersByModule[user.currentModuleShortid] =
-          usersByModule[user.currentModuleShortid] || [];
-        usersByModule[user.currentModuleShortid].push(user.color);
-      }
-    });
-
-    return usersByModule;
-  }),
-};
diff --git a/packages/app/src/app/overmind/namespaces/preferences/actions.ts b/packages/app/src/app/overmind/namespaces/preferences/actions.ts
index d1c6217e411..ef142521dd7 100755
--- a/packages/app/src/app/overmind/namespaces/preferences/actions.ts
+++ b/packages/app/src/app/overmind/namespaces/preferences/actions.ts
@@ -1,8 +1,4 @@
-import { convertTypeToStatus } from '@codesandbox/common/lib/utils/notifications';
-import { isEqual } from 'lodash-es';
-import { saveAs } from 'file-saver';
 import { Context } from 'app/overmind';
-import { SettingSync } from './state';
 
 export const viewModeChanged = (
   { state }: Context,
@@ -39,10 +35,6 @@ export const itemIdChanged = async (
   itemId: string
 ) => {
   state.preferences.itemId = itemId;
-
-  if (itemId === 'integrations') {
-    await actions.deployment.internal.getVercelUserDetails();
-  }
 };
 
 export const settingChanged = (
@@ -64,10 +56,6 @@ export const settingChanged = (
   );
   settingsTarget[lastKey] = value;
 
-  if (name === 'vimMode') {
-    effects.vscode.setVimExtensionEnabled(Boolean(value));
-  }
-
   effects.settingsStore.set(firstKey, state.preferences.settings[firstKey]);
 
   effects.analytics.track('Change Settings', {
@@ -76,245 +64,6 @@ export const settingChanged = (
   });
 };
 
-export const zenModeToggled = ({ state }: Context) => {
-  state.preferences.settings.zenMode = !state.preferences.settings.zenMode;
-};
-
-export const codeMirrorForced = ({ state }: Context) => {
-  state.preferences.settings.codeMirror = true;
-};
-
-export const getUserLocalSettings = () => {
-  const fs = window.BrowserFS.BFSRequire('fs');
-  const all = fs.readdirSync('/vscode');
-  const files = {};
-
-  const readFromDirectory = (path: string) => {
-    const filesInDirectory = fs.readdirSync(path);
-    if (path === '/vscode/userdata/CachedExtensions') {
-      return;
-    }
-
-    filesInDirectory.forEach(p => {
-      const newPath = path + '/' + p;
-      if (fs.statSync(newPath).isDirectory()) {
-        readFromDirectory(newPath);
-      } else {
-        files[newPath] = fs.readFileSync(newPath).toString();
-      }
-    });
-  };
-
-  all.forEach(dir => {
-    const a = `/vscode/` + dir;
-
-    if (fs.statSync(a).isDirectory()) {
-      readFromDirectory(a);
-    } else {
-      files[a] = fs.readFileSync(a).toString();
-    }
-  });
-
-  const LOCAL_STORAGE_KEYS = [
-    'vs-global://colorThemeData',
-    'VIEW_MODE_DASHBOARD',
-    'vs-global://iconThemeData',
-    ...Object.keys(localStorage).filter(key => key.includes('settings.')),
-  ];
-  const themeData = {};
-
-  LOCAL_STORAGE_KEYS.forEach(key => {
-    themeData[key] = localStorage.getItem(key);
-  });
-
-  return {
-    themeData,
-    vscode: files,
-  };
-};
-
-export const renameUserSettings = async (
-  { state, effects }: Context,
-  {
-    name,
-    id,
-  }: {
-    name: string;
-    id: string;
-  }
-) => {
-  const { settingsSync } = state.preferences;
-  if (!name || !settingsSync.settings) return;
-
-  try {
-    const response = await effects.api.editUserSettings(
-      {
-        ...settingsSync.settings.find(s => s.id === id),
-        name,
-      },
-      id
-    );
-
-    settingsSync.settings = settingsSync.settings.map(setting => {
-      if (setting.id === response.id) {
-        return {
-          ...setting,
-          name,
-        };
-      }
-
-      return setting;
-    });
-  } catch (e) {
-    effects.notificationToast.error(
-      'There has been a problem renaming your profile'
-    );
-  }
-};
-
-export const getUserSettings = async ({ state, effects }: Context) => {
-  const { settingsSync } = state.preferences;
-  settingsSync.fetching = true;
-
-  const response = await effects.api.getUserSettings();
-
-  settingsSync.settings = response;
-  settingsSync.fetching = false;
-};
-
-export const createPreferencesProfile = async ({
-  state,
-  effects,
-  actions,
-}: Context) => {
-  state.preferences.settingsSync.syncing = true;
-  try {
-    const { vscode, themeData } = actions.preferences.getUserLocalSettings();
-
-    actions.preferences.updateServerSettings(
-      JSON.stringify({
-        themeData,
-        vscode,
-      })
-    );
-  } catch (e) {
-    effects.notificationToast.error(
-      'There has been a problem uploading your preferences'
-    );
-  }
-};
-
-export const updateServerSettings = async (
-  { state, effects }: Context,
-  settingsStringified: string
-) => {
-  if (!state.user) return;
-  const {
-    id,
-    insertedAt,
-    name,
-    settings,
-    updatedAt,
-  } = await effects.api.createUserSettings({
-    name: 'My Profile',
-    settings: settingsStringified,
-  });
-
-  state.preferences.settingsSync.syncing = false;
-  state.preferences.settingsSync.settings = [
-    {
-      id,
-      insertedAt,
-      name,
-      settings,
-      updatedAt,
-    },
-  ];
-  localStorage.setItem(`profile-${id}`, updatedAt);
-  effects.notificationToast.success(
-    'Your preferences have been successfully synced'
-  );
-};
-
-export const checkifSynced = ({ actions }: Context, savedSetting: string) => {
-  const currentSettings = actions.preferences.getUserLocalSettings();
-  return isEqual(currentSettings, JSON.parse(savedSetting));
-};
-
-export const deleteUserSetting = async (
-  { state, effects, actions }: Context,
-  id: string
-) => {
-  if (!state.preferences.settingsSync.settings) return;
-  try {
-    await effects.api.removeUserSetting(id);
-    const removed = state.preferences.settingsSync.settings.find(
-      setting => setting.id === id
-    );
-
-    state.preferences.settingsSync.settings = state.preferences.settingsSync.settings.filter(
-      setting => setting.id !== id
-    );
-    effects.notificationToast.add({
-      title: 'Your profile has been removed',
-      message: '',
-      status: convertTypeToStatus('success'),
-      sticky: false,
-      actions: {
-        primary: {
-          label: 'Undo',
-          run: () => {
-            if (removed?.settings) {
-              actions.preferences.updateServerSettings(removed?.settings);
-            }
-          },
-        },
-      },
-    });
-  } catch (e) {
-    effects.notificationToast.error(
-      'There has been a problem removing your profile'
-    );
-  }
-};
-
-export const downloadPreferences = async (
-  _: Context,
-  settings: SettingSync
-) => {
-  const blob = new Blob([settings.settings], { type: 'application/json' });
-  saveAs(blob, `CodeSandboxSettings-${settings.name}.json`);
-};
-
-export const applyPreferences = async (
-  { state, effects }: Context,
-  settings: string
-) => {
-  if (!state.preferences.settingsSync.settings) return;
-  const fs = window.BrowserFS.BFSRequire('fs');
-
-  try {
-    const parsedSyncedSettings = JSON.parse(settings);
-
-    Object.keys(parsedSyncedSettings.themeData).forEach(key => {
-      localStorage.setItem(key, parsedSyncedSettings.themeData[key]);
-    });
-
-    Object.keys(parsedSyncedSettings.vscode).forEach(key => {
-      fs.writeFileSync(key, parsedSyncedSettings.vscode[key]);
-    });
-    effects.notificationToast.success(
-      'Your preferences have been applied. The page will now reload'
-    );
-
-    window.setTimeout(() => location.reload(), 1000);
-  } catch (e) {
-    effects.notificationToast.error(
-      'There has been a problem applying your preferences'
-    );
-  }
-};
-
 export const updateAccountDetails = async (
   { state, effects }: Context,
   {
diff --git a/packages/app/src/app/overmind/namespaces/preview/actions.ts b/packages/app/src/app/overmind/namespaces/preview/actions.ts
deleted file mode 100644
index 80b6a817fed..00000000000
--- a/packages/app/src/app/overmind/namespaces/preview/actions.ts
+++ /dev/null
@@ -1,271 +0,0 @@
-import { hasPermission } from '@codesandbox/common/lib/utils/permission';
-import { Context } from 'app/overmind';
-import { isEqual } from 'lodash-es';
-import { json } from 'overmind';
-import { Presets, defaultPresets } from './state';
-
-export const toggleResponsiveMode = async ({
-  state,
-  actions,
-  effects,
-}: Context) => {
-  const existingMode = state.preview.mode;
-  const newUrl = new URL(document.location.href);
-
-  switch (existingMode) {
-    case 'responsive':
-      state.preview.mode = null;
-      break;
-    case 'add-comment':
-      state.preview.mode = 'responsive-add-comment';
-      break;
-    case 'responsive-add-comment':
-      state.preview.mode = 'add-comment';
-      break;
-    default: {
-      state.preview.mode = 'responsive';
-      effects.analytics.track('Responsive Preview - Toggled On');
-    }
-  }
-
-  if (state.preview.mode) {
-    newUrl.searchParams.set(
-      'resolutionWidth',
-      state.preview.responsive.resolution[0].toString()
-    );
-    newUrl.searchParams.set(
-      'resolutionHeight',
-      state.preview.responsive.resolution[1].toString()
-    );
-
-    if (!state.editor.workspaceConfig) {
-      actions.files.updateWorkspaceConfig({
-        'responsive-preview': defaultPresets,
-      });
-    }
-  } else {
-    newUrl.searchParams.delete('resolutionWidth');
-    newUrl.searchParams.delete('resolutionHeight');
-  }
-
-  if (newUrl) {
-    effects.router.replace(
-      newUrl.toString().replace(/%2F/g, '/').replace('%3A', ':')
-    );
-  }
-};
-
-export const setResolution = (
-  { state, effects }: Context,
-  newResolution: [number, number]
-) => {
-  if (!newResolution) return;
-  const width = Math.round(newResolution[0]);
-  const height = Math.round(newResolution[1]);
-
-  state.preview.responsive.resolution = [width, height];
-
-  const newUrl = new URL(document.location.href);
-  newUrl.searchParams.set('resolutionWidth', width.toString());
-  newUrl.searchParams.set('resolutionHeight', height.toString());
-
-  if (newUrl) {
-    effects.router.replace(
-      newUrl.toString().replace(/%2F/g, '/').replace('%3A', ':')
-    );
-  }
-};
-
-export const openDeletePresetModal = ({ state }: Context) => {
-  state.currentModal = 'deletePreset';
-};
-
-export const openAddPresetModal = ({ state }: Context) => {
-  state.currentModal = 'addPreset';
-};
-
-export const toggleEditPresets = ({ state }: Context) => {
-  state.currentModal = 'editPresets';
-};
-
-export const deletePreset = async ({ state, actions }: Context) => {
-  const { presets, resolution } = state.preview.responsive;
-
-  const canChangePresets = hasPermission(
-    state.editor.currentSandbox!.authorization,
-    'write_code'
-  );
-
-  if (!canChangePresets) {
-    await actions.editor.forkSandboxClicked({});
-  }
-
-  const activePresetName = Object.keys(presets).find(preset =>
-    isEqual(presets[preset], resolution)
-  );
-
-  if (activePresetName) {
-    state.preview.responsive.resolution = json(Object.values(presets)[0]);
-
-    const responsivePreviewConfig = state.editor.workspaceConfig
-      ? state.editor.workspaceConfig['responsive-preview']
-      : defaultPresets;
-    const presetsCopy = json(responsivePreviewConfig || {});
-    delete presetsCopy[activePresetName.toString()];
-
-    await actions.files.updateWorkspaceConfig({
-      'responsive-preview': presetsCopy,
-    });
-  }
-};
-
-export const addPreset = async (
-  { state, actions, effects }: Context,
-  {
-    name,
-    width,
-    height,
-  }: {
-    name: string;
-    width: number;
-    height: number;
-  }
-) => {
-  if (!name || !width || !height) return;
-  effects.analytics.track('Responsive Preview - Preset Created', {
-    width,
-    height,
-  });
-  state.preview.responsive.resolution = [width, height];
-
-  const canChangePresets = hasPermission(
-    state.editor.currentSandbox!.authorization,
-    'write_code'
-  );
-
-  if (!canChangePresets) {
-    await actions.editor.forkSandboxClicked({});
-  }
-
-  const responsivePreviewConfig = state.editor.workspaceConfig
-    ? state.editor.workspaceConfig['responsive-preview']
-    : defaultPresets;
-  const presetsCopy = json(responsivePreviewConfig || {});
-  presetsCopy[name] = [width, height];
-
-  await actions.files.updateWorkspaceConfig({
-    'responsive-preview': presetsCopy,
-  });
-};
-
-export const editPresets = async (
-  { actions }: Context,
-  newPresets: Presets
-) => {
-  await actions.files.updateWorkspaceConfig({
-    'responsive-preview': newPresets,
-  });
-};
-
-export const setExtension = ({ state }: Context, hasExtension: boolean) => {
-  state.preview.hasExtension = hasExtension;
-};
-
-export const closeExtensionBanner = ({ state }: Context) => {
-  state.preview.showExtensionBanner = false;
-};
-
-export const installExtension = async ({
-  actions,
-  state,
-  effects,
-}: Context) => {
-  await effects.browserExtension.install();
-
-  const doReload = await actions.modals.extensionInstalledModal.open();
-
-  if (doReload) {
-    effects.browser.reload();
-  }
-
-  state.preview.showExtensionBanner = false;
-};
-
-export const createPreviewComment = async ({ state, effects }: Context) => {
-  const currentSandbox = state.editor.currentSandbox;
-
-  if (!currentSandbox || !effects.preview.canAddComments(currentSandbox)) {
-    return;
-  }
-
-  const existingMode = state.preview.mode;
-
-  state.preview.screenshot.source = null;
-
-  const takeScreenshot = async () => {
-    try {
-      if (state.preview.hasExtension) {
-        effects.preview.showCommentCursor();
-        const screenshot = await effects.preview.takeExtensionScreenshot();
-        state.preview.screenshot.source = screenshot;
-      } else {
-        state.preview.screenshot.isLoading = true;
-
-        const screenshot = await effects.preview.takeScreenshot(
-          state.editor.currentSandbox!.privacy === 2
-        );
-
-        if (!effects.browserExtension.hasNotifiedImprovedScreenshots()) {
-          state.preview.showExtensionBanner = true;
-          effects.browserExtension.setNotifiedImprovedScreenshots();
-        }
-        effects.preview.showCommentCursor();
-        state.preview.screenshot.isLoading = false;
-        state.preview.screenshot.source = screenshot;
-      }
-    } catch (error) {
-      effects.notificationToast.error(error.message);
-    }
-  };
-
-  switch (existingMode) {
-    case 'responsive':
-      state.preview.mode = 'responsive-add-comment';
-      await takeScreenshot();
-      break;
-    case 'add-comment':
-      effects.preview.hideCommentCursor();
-      state.preview.mode = null;
-      break;
-    case 'responsive-add-comment':
-      effects.preview.hideCommentCursor();
-      state.preview.mode = 'responsive';
-      break;
-    default:
-      state.preview.mode = 'add-comment';
-      await takeScreenshot();
-  }
-
-  if (state.preview.mode && state.preview.mode.includes('comment')) {
-    effects.analytics.track('Preview Comment - Toggle', {
-      mode: state.preview.mode,
-    });
-  }
-};
-
-export const checkURLParameters = ({ state, effects }: Context) => {
-  const ULRResolutionWidth = effects.router.getParameter('resolutionWidth');
-  const URLResolutionHeight = effects.router.getParameter('resolutionHeight');
-
-  if (URLResolutionHeight && ULRResolutionWidth) {
-    state.preview.mode = 'responsive';
-    state.preview.responsive.resolution = [
-      parseInt(ULRResolutionWidth, 10),
-      parseInt(URLResolutionHeight, 10),
-    ];
-  }
-};
-
-export const setIsResizing = ({ state }: Context, newIsResizing: boolean) => {
-  state.preview.responsive.isResizing = newIsResizing;
-}
\ No newline at end of file
diff --git a/packages/app/src/app/overmind/namespaces/preview/index.ts b/packages/app/src/app/overmind/namespaces/preview/index.ts
deleted file mode 100644
index 54c2413d3dd..00000000000
--- a/packages/app/src/app/overmind/namespaces/preview/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { state } from './state'
-import * as actions from './actions'
-
-export { state, actions }
\ No newline at end of file
diff --git a/packages/app/src/app/overmind/namespaces/preview/state.ts b/packages/app/src/app/overmind/namespaces/preview/state.ts
deleted file mode 100644
index b5937495135..00000000000
--- a/packages/app/src/app/overmind/namespaces/preview/state.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import { Context } from 'app/overmind';
-import { derived } from 'overmind';
-
-export type Presets = { [name: string]: [number, number] };
-
-type Mode = 'responsive' | 'add-comment' | 'responsive-add-comment' | null;
-
-type State = {
-  responsive: {
-    presets: Presets;
-    scale: number;
-    resolution: [number, number];
-    isResizing: boolean;
-  };
-  screenshot: {
-    source: string | null;
-    isLoading: boolean;
-  };
-  mode: Mode;
-  hasExtension: boolean;
-  showExtensionBanner: boolean;
-};
-
-export const defaultPresets: Presets = {
-  Mobile: [320, 675],
-  Tablet: [1024, 765],
-  Desktop: [1400, 800],
-  'Desktop HD': [1920, 1080],
-};
-
-export const state: State = {
-  responsive: {
-    presets: derived((_, rootState: Context['state']) =>
-      rootState.editor.workspaceConfig &&
-      rootState.editor.workspaceConfig['responsive-preview']
-        ? rootState.editor.workspaceConfig['responsive-preview']
-        : defaultPresets
-    ),
-    scale: 100,
-    resolution: [320, 675],
-    isResizing: false
-  },
-  screenshot: {
-    source: null,
-    isLoading: false,
-  },
-  mode: null,
-  hasExtension: false,
-  showExtensionBanner: false,
-};
diff --git a/packages/app/src/app/overmind/namespaces/profile/actions.ts b/packages/app/src/app/overmind/namespaces/profile/actions.ts
index f2a071d5f23..d04909060b1 100755
--- a/packages/app/src/app/overmind/namespaces/profile/actions.ts
+++ b/packages/app/src/app/overmind/namespaces/profile/actions.ts
@@ -20,20 +20,6 @@ export const profileMounted = withLoadApp(
 
     state.profile.profiles[profile.id] = profile;
     state.profile.currentProfileId = profile.id;
-
-    if (
-      profile.showcasedSandboxShortid &&
-      !state.editor.sandboxes[profile.showcasedSandboxShortid]
-    ) {
-      try {
-        state.editor.sandboxes[
-          profile.showcasedSandboxShortid
-        ] = await effects.api.getSandbox(profile.showcasedSandboxShortid);
-      } catch (e) {
-        // Ignore it
-      }
-    }
-
     state.profile.isLoadingProfile = false;
   }
 );
@@ -150,14 +136,7 @@ export const newSandboxShowcaseSelected = async (
     return;
   }
 
-  const [sandbox] = await Promise.all([
-    state.editor.sandboxes[id] ? null : effects.api.getSandbox(id),
-    effects.api.updateShowcasedSandbox(state.user.username, id),
-  ]);
-
-  if (sandbox) {
-    state.editor.sandboxes[id] = sandbox as Sandbox;
-  }
+  await effects.api.updateShowcasedSandbox(state.user.username, id);
 
   state.profile.isLoadingProfile = false;
 
diff --git a/packages/app/src/app/overmind/namespaces/profile/state.ts b/packages/app/src/app/overmind/namespaces/profile/state.ts
index 5b8f72abfe9..c526c67e5b4 100755
--- a/packages/app/src/app/overmind/namespaces/profile/state.ts
+++ b/packages/app/src/app/overmind/namespaces/profile/state.ts
@@ -83,13 +83,10 @@ export const state: State = {
       ? currentState.profiles[currentState.currentProfileId]
       : null
   ),
-  showcasedSandbox: derived(
-    (currentState: State, rootState: Context['state']) =>
-      currentState.current && currentState.current.showcasedSandboxShortid
-        ? rootState.editor.sandboxes[
-            currentState.current.showcasedSandboxShortid
-          ]
-        : null
+  showcasedSandbox: derived((currentState: State) =>
+    currentState.current && currentState.current.showcasedSandboxShortid
+      ? currentState.sandboxes.all[currentState.current.showcasedSandboxShortid]
+      : null
   ),
   currentLikedSandboxes: derived((currentState: State) =>
     currentState.current
diff --git a/packages/app/src/app/overmind/namespaces/server/actions.ts b/packages/app/src/app/overmind/namespaces/server/actions.ts
deleted file mode 100755
index f96a0dc3e51..00000000000
--- a/packages/app/src/app/overmind/namespaces/server/actions.ts
+++ /dev/null
@@ -1,261 +0,0 @@
-import { ViewTab } from '@codesandbox/common/lib/templates/template';
-import {
-  Sandbox,
-  ServerContainerStatus,
-  ServerPort,
-  ServerStatus,
-} from '@codesandbox/common/lib/types';
-import { NotificationStatus } from '@codesandbox/notifications/lib/state';
-import { Context } from 'app/overmind';
-import { getDevToolsTabPosition } from 'app/overmind/utils/server';
-
-export const restartSandbox = ({ effects }: Context) => {
-  effects.executor.emit('sandbox:restart');
-};
-
-export const restartContainer = ({ effects, state }: Context) => {
-  state.server.containerStatus = ServerContainerStatus.INITIALIZING;
-  effects.executor.emit('sandbox:restart-container');
-};
-
-export const statusChanged = ({ state }: Context, status: ServerStatus) => {
-  state.server.status = status;
-};
-
-export const containerStatusChanged = (
-  { state }: Context,
-  status: ServerContainerStatus
-) => {
-  state.server.containerStatus = status;
-};
-
-export const onSSEMessage = (
-  { state: { server, editor }, effects, actions }: Context,
-  {
-    event,
-    data,
-  }: {
-    event: string;
-    data: any;
-  }
-) => {
-  switch (event) {
-    case 'connect':
-      server.error = null;
-      server.status = ServerStatus.CONNECTED;
-      break;
-    case 'disconnect':
-      if (
-        server.containerStatus !== ServerContainerStatus.HIBERNATED &&
-        server.status === ServerStatus.CONNECTED
-      ) {
-        server.status = ServerStatus.DISCONNECTED;
-        effects.codesandboxApi.disconnectSSE();
-      }
-      break;
-    case 'sandbox:start':
-      server.containerStatus = ServerContainerStatus.SANDBOX_STARTED;
-      break;
-    case 'sandbox:stop':
-      if (server.containerStatus !== ServerContainerStatus.HIBERNATED) {
-        server.containerStatus = ServerContainerStatus.STOPPED;
-      }
-      break;
-    case 'sandbox:update':
-      actions.files.syncSandbox(data.updates);
-      break;
-    case 'sandbox:hibernate':
-      server.containerStatus = ServerContainerStatus.HIBERNATED;
-      effects.executor.closeExecutor();
-      break;
-    case 'sandbox:status':
-      if (data.status === 'starting-container') {
-        server.containerStatus = ServerContainerStatus.INITIALIZING;
-      } else if (data.status === 'installing-packages') {
-        server.containerStatus = ServerContainerStatus.CONTAINER_STARTED;
-      }
-      break;
-    case 'sandbox:log':
-      effects.codesandboxApi.logTerminalMessage(data.data);
-      break;
-    case 'sandbox:port': {
-      const newPorts = data as ServerPort[];
-      const currentPorts = server.ports;
-      const removedPorts = currentPorts.filter(
-        port => !newPorts.find(p => p.port === port.port)
-      );
-      const addedPorts = newPorts.filter(
-        port => !currentPorts.find(p => p.port === port.port)
-      );
-      const openedPorts: number[] = [];
-
-      if (removedPorts.length > 0) {
-        effects.notificationToast.add({
-          title: `Server Ports Closed`,
-          message:
-            removedPorts.length === 1
-              ? `Port ${removedPorts[0].port} closed`
-              : `The following ports closed: ${removedPorts
-                  .map(p => p.port)
-                  .join(', ')}`,
-          status: NotificationStatus.NOTICE,
-        });
-      }
-
-      editor.devToolTabs.forEach(view => {
-        view.views.forEach(tab => {
-          if (
-            tab.id === 'codesandbox.browser' &&
-            tab.options &&
-            tab.options.port
-          ) {
-            openedPorts.push(tab.options.port);
-          }
-        });
-      });
-
-      addedPorts.forEach(port => {
-        if (!port.main && openedPorts.indexOf(port.port) === -1) {
-          effects.notificationToast.add({
-            title: `Port ${port.port} Opened`,
-            message: `The server is listening on port ${port.port}, do you want to open it?`,
-            status: NotificationStatus.NOTICE,
-            actions: {
-              primary: {
-                label: 'Open Browser Pane',
-                run: () => actions.server.onBrowserFromPortOpened(port),
-              },
-            },
-          });
-        }
-      });
-
-      server.ports = newPorts;
-
-      break;
-    }
-    case 'sandbox:error': {
-      const { message: error, unrecoverable } = data;
-
-      server.hasUnrecoverableError = unrecoverable;
-      server.error = error;
-
-      if (unrecoverable) {
-        effects.notificationToast.add({
-          title: `Container Error`,
-          message: error,
-          status: NotificationStatus.ERROR,
-        });
-        effects.executor.closeExecutor();
-      } else if (!error.includes('is larger than maximum size')) {
-        effects.notificationToast.add({
-          title: `Container Warning`,
-          message: error,
-          status: NotificationStatus.WARNING,
-        });
-      }
-
-      break;
-    }
-    case 'shell:exit':
-      effects.codesandboxApi.exitShell(data);
-      break;
-    case 'shell:out':
-      effects.codesandboxApi.outShell(data);
-      break;
-  }
-};
-
-export const onCodeSandboxAPIMessage = (
-  { effects }: Context,
-  {
-    data,
-  }: {
-    data: any;
-  }
-) => {
-  if (data.type === 'socket:message') {
-    const { channel, type: _t, codesandbox: _c, ...message } = data;
-    effects.executor.emit(channel, message);
-  }
-};
-
-type BrowserOptions = { title?: string; url?: string } & (
-  | { port: number }
-  | { url: string }
-);
-export const onBrowserTabOpened = (
-  { actions, state }: Context,
-  {
-    closeable,
-    options,
-  }: {
-    closeable?: boolean;
-    options?: BrowserOptions;
-  }
-) => {
-  const tab: ViewTab = {
-    id: 'codesandbox.browser',
-  };
-
-  if (typeof options !== 'undefined') {
-    tab.options = options;
-  }
-
-  if (typeof closeable !== 'undefined') {
-    tab.closeable = closeable;
-  }
-
-  const position = getDevToolsTabPosition({
-    tabs: state.editor.devToolTabs,
-    tab,
-  });
-
-  if (position) {
-    actions.editor.onDevToolsPositionChanged({ position });
-  } else {
-    actions.editor.onDevToolsTabAdded({ tab });
-  }
-};
-
-export const onBrowserFromPortOpened = (
-  { actions }: Context,
-  { main, port }: ServerPort
-) => {
-  if (main) {
-    actions.server.onBrowserTabOpened({});
-  } else {
-    actions.server.onBrowserTabOpened({
-      closeable: true,
-      options: {
-        port,
-      },
-    });
-  }
-};
-
-export const startContainer = async (
-  { effects, actions }: Context,
-  sandbox: Sandbox
-) => {
-  await effects.executor.initializeExecutor(sandbox);
-
-  [
-    'connect',
-    'disconnect',
-    'sandbox:status',
-    'sandbox:start',
-    'sandbox:stop',
-    'sandbox:error',
-    'sandbox:log',
-    'sandbox:hibernate',
-    'sandbox:update',
-    'sandbox:port',
-    'shell:out',
-    'shell:exit',
-  ].forEach(message => {
-    effects.executor.listen(message, actions.server.onSSEMessage);
-  });
-
-  await effects.executor.setupExecutor();
-};
diff --git a/packages/app/src/app/overmind/namespaces/server/index.ts b/packages/app/src/app/overmind/namespaces/server/index.ts
deleted file mode 100755
index 0d573be52de..00000000000
--- a/packages/app/src/app/overmind/namespaces/server/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { state } from './state';
-import * as actions from './actions';
-
-export { state, actions };
diff --git a/packages/app/src/app/overmind/namespaces/server/state.ts b/packages/app/src/app/overmind/namespaces/server/state.ts
deleted file mode 100755
index fcab24e2de4..00000000000
--- a/packages/app/src/app/overmind/namespaces/server/state.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import {
-  ServerContainerStatus,
-  ServerPort,
-  ServerStatus,
-} from '@codesandbox/common/lib/types';
-
-type State = {
-  status: ServerStatus;
-  containerStatus: ServerContainerStatus;
-  error: string | null;
-  hasUnrecoverableError: false;
-  ports: ServerPort[];
-};
-
-export const state: State = {
-  status: ServerStatus.INITIALIZING,
-  containerStatus: ServerContainerStatus.INITIALIZING,
-  error: null,
-  hasUnrecoverableError: false,
-  ports: [],
-};
diff --git a/packages/app/src/app/overmind/namespaces/workspace/actions.ts b/packages/app/src/app/overmind/namespaces/workspace/actions.ts
deleted file mode 100755
index 771bcf503c2..00000000000
--- a/packages/app/src/app/overmind/namespaces/workspace/actions.ts
+++ /dev/null
@@ -1,635 +0,0 @@
-import getTemplate from '@codesandbox/common/lib/templates';
-import { Dependency } from '@codesandbox/common/lib/types/algolia';
-import { CustomTemplate } from '@codesandbox/common/lib/types';
-import track from '@codesandbox/common/lib/utils/analytics';
-import slugify from '@codesandbox/common/lib/utils/slugify';
-import { Context } from 'app/overmind';
-import { withOwnedSandbox } from 'app/overmind/factories';
-import getItems from 'app/overmind/utils/items';
-import { json } from 'overmind';
-import { SearchResults } from './state';
-
-export const valueChanged = (
-  { state }: Context,
-  {
-    field,
-    value,
-  }: {
-    field: string;
-    value: string;
-  }
-) => {
-  state.workspace.project[field] = value;
-};
-
-export const tagChanged = ({ state }: Context, tagName: string) => {
-  state.workspace.tags.tagName = tagName;
-};
-
-export const tagAdded = withOwnedSandbox(
-  async ({ state, effects, actions }: Context) => {
-    const { tagName } = state.workspace.tags;
-    const sandbox = state.editor.currentSandbox;
-
-    if (!sandbox) {
-      return;
-    }
-
-    const cleanTag = tagName.replace(/#/g, '');
-
-    sandbox.tags.push(cleanTag);
-
-    try {
-      sandbox.tags = await effects.api.createTag(sandbox.id, cleanTag);
-
-      await actions.editor.internal.updateSandboxPackageJson();
-    } catch (error) {
-      const index = sandbox.tags.indexOf(cleanTag);
-      sandbox.tags.splice(index, 1);
-      actions.internal.handleError({ message: 'Unable to add tag', error });
-    }
-  }
-);
-
-export const tagRemoved = withOwnedSandbox(
-  async ({ state, effects, actions }: Context, tag: string) => {
-    const sandbox = state.editor.currentSandbox;
-
-    if (!sandbox) {
-      return;
-    }
-
-    const tagIndex = sandbox.tags.indexOf(tag);
-
-    sandbox.tags.splice(tagIndex, 1);
-
-    try {
-      sandbox.tags = await effects.api.deleteTag(sandbox.id, tag);
-
-      if (
-        !state.editor.parsedConfigurations ||
-        !state.editor.currentPackageJSON
-      ) {
-        return;
-      }
-      // Create a "joint action" on this
-      if (!state.editor.parsedConfigurations.package) {
-        return;
-      }
-      const { parsed } = state.editor.parsedConfigurations.package;
-
-      if (!parsed) {
-        return;
-      }
-
-      parsed.keywords = sandbox.tags;
-      parsed.name = slugify(sandbox.title || sandbox.id);
-      parsed.description = sandbox.description;
-
-      const code = JSON.stringify(parsed, null, 2);
-      const moduleShortid = state.editor.currentPackageJSON.shortid;
-
-      await actions.editor.codeSaved({
-        code,
-        moduleShortid,
-        cbID: null,
-      });
-    } catch (error) {
-      sandbox.tags.splice(tagIndex, 0, tag);
-      actions.internal.handleError({ message: 'Unable to remove tag', error });
-    }
-  }
-);
-
-export const tagsChanged = async (
-  { actions, effects, state }: Context,
-  {
-    newTags,
-    removedTags,
-  }: {
-    newTags: string[];
-    removedTags: string[];
-  }
-) => {
-  if (!state.editor.currentSandbox) {
-    return;
-  }
-
-  const { tags } = state.editor.currentSandbox;
-  if (tags.length > 5) {
-    effects.notificationToast.error('You can have a maximum of 5 tags');
-    return;
-  }
-
-  const tagWasRemoved =
-    newTags.length < tags.length && removedTags.length === 1;
-  if (tagWasRemoved) {
-    removedTags.forEach(actions.workspace.tagRemoved);
-    return;
-  }
-
-  await actions.workspace.tagAdded();
-};
-
-/** tagsChanged2 takes new tags and does the diffing on its own
- * This is v2 of tagsChanged. It's used in the redesign
- */
-export const tagsChanged2 = withOwnedSandbox(
-  async ({ state, effects, actions }: Context, newTags: string[]) => {
-    const sandbox = state.editor.currentSandbox;
-    if (!sandbox) return;
-
-    const { tags: oldTags } = sandbox;
-
-    const removedTags = oldTags.filter(tag => !newTags.includes(tag));
-    const addedTags = newTags.filter(tag => !oldTags.includes(tag));
-
-    removedTags.forEach(actions.workspace.tagRemoved);
-
-    addedTags.forEach(async tag => {
-      const cleanTag = tag.replace(/#/g, '');
-
-      // use old methods to update tags
-      actions.workspace.tagChanged(cleanTag);
-      await actions.workspace.tagAdded();
-    });
-  }
-);
-
-export const sandboxInfoUpdated = withOwnedSandbox(
-  async ({ state, effects, actions }: Context) => {
-    const sandbox = state.editor.currentSandbox;
-    if (!sandbox) {
-      return;
-    }
-    const { project } = state.workspace;
-    const hasChangedTitle =
-      project.title.trim() && sandbox.title !== project.title;
-    const hasChangedDescription =
-      project.description.trim() && sandbox.description !== project.description;
-    const hasChangedAlias = project.alias && sandbox.alias !== project.alias;
-    const hasChanged =
-      hasChangedTitle || hasChangedDescription || hasChangedAlias;
-
-    if (hasChanged) {
-      try {
-        let event = 'Alias';
-
-        if (hasChangedTitle) {
-          event = 'Title';
-        } else if (hasChangedDescription) {
-          event = 'Description';
-        }
-
-        effects.analytics.track(`Sandbox - Update ${event}`);
-
-        sandbox.title = project.title;
-        sandbox.description = project.description;
-        sandbox.alias = project.alias;
-
-        const updatedSandbox = await effects.api.updateSandbox(sandbox.id, {
-          title: project.title,
-          description: project.description,
-          alias: project.alias,
-        });
-
-        if (!updatedSandbox) {
-          effects.notificationToast.error('Could not update Sandbox');
-          return;
-        }
-
-        effects.router.replaceSandboxUrl(updatedSandbox);
-
-        await actions.editor.internal.updateSandboxPackageJson();
-      } catch (error) {
-        actions.internal.handleError({
-          message:
-            'We were not able to save your sandbox updates, please try again',
-          error,
-        });
-      }
-    }
-  }
-);
-
-export const externalResourceAdded = withOwnedSandbox(
-  async ({ effects, state, actions }: Context, resource: string) => {
-    if (!state.editor.currentSandbox) {
-      return;
-    }
-    const { externalResources } = state.editor.currentSandbox;
-
-    externalResources.push(resource);
-    actions.editor.internal.updatePreviewCode();
-
-    try {
-      await effects.api.createResource(
-        state.editor.currentSandbox.id,
-        resource
-      );
-      if (state.live.isLive) {
-        effects.live.sendExternalResourcesChanged(
-          state.editor.currentSandbox.externalResources
-        );
-      }
-    } catch (error) {
-      externalResources.splice(externalResources.indexOf(resource), 1);
-      actions.internal.handleError({
-        message: 'Could not save external resource',
-        error,
-      });
-      actions.editor.internal.updatePreviewCode();
-    }
-  }
-);
-
-export const externalResourceRemoved = withOwnedSandbox(
-  async ({ effects, state, actions }: Context, resource: string) => {
-    if (!state.editor.currentSandbox) {
-      return;
-    }
-
-    const { externalResources } = state.editor.currentSandbox;
-    const resourceIndex = externalResources.indexOf(resource);
-
-    externalResources.splice(resourceIndex, 1);
-    actions.editor.internal.updatePreviewCode();
-
-    try {
-      await effects.api.deleteResource(
-        state.editor.currentSandbox.id,
-        resource
-      );
-      if (state.live.isLive) {
-        effects.live.sendExternalResourcesChanged(
-          state.editor.currentSandbox.externalResources
-        );
-      }
-    } catch (error) {
-      externalResources.splice(resourceIndex, 0, resource);
-
-      actions.internal.handleError({
-        message: 'Could not save removal of external resource',
-        error,
-      });
-      actions.editor.internal.updatePreviewCode();
-    }
-  }
-);
-
-export const integrationsOpened = ({ state }: Context) => {
-  state.preferences.itemId = 'integrations';
-  // I do not think this showModal is used?
-  state.preferences.showModal = true;
-};
-
-export const sandboxDeleted = async ({ state, effects, actions }: Context) => {
-  actions.modalClosed();
-
-  if (!state.editor.currentSandbox) {
-    return;
-  }
-
-  await effects.api.deleteSandbox(state.editor.currentSandbox.id);
-
-  // Not sure if this is in use?
-  state.workspace.showDeleteSandboxModal = false;
-  effects.notificationToast.success('Sandbox deleted!');
-
-  effects.router.redirectToSandboxWizard();
-};
-
-export const sandboxPrivacyChanged = async (
-  { actions, effects, state }: Context,
-  {
-    privacy,
-    source = 'generic',
-  }: {
-    privacy: /* public */ 0 | /* unlisted */ 1 | /* private */ 2;
-    source?: string;
-  }
-) => {
-  if (!state.editor.currentSandbox) {
-    return;
-  }
-
-  track('Sandbox - Update Privacy', { privacy, source });
-
-  // Save oldPrivacy in case we need to reset
-  const oldPrivacy = state.editor.currentSandbox.privacy;
-  // Optimistically update privacy
-  state.editor.currentSandbox.privacy = privacy;
-
-  // The rest endpoint doesn't allow free users and teams to change their privacy
-  // at all, so we have to use the gql mutation to update the privacy from private
-  // or unlisted to public.
-  if (privacy === 0) {
-    try {
-      await effects.gql.mutations.changePrivacy({
-        sandboxIds: [state.editor.currentSandbox.id],
-        privacy: 0,
-      });
-
-      const { isServer } = getTemplate(state.editor.currentSandbox.template);
-      const isChangeFromPrivate = oldPrivacy === 2;
-
-      if (isServer && isChangeFromPrivate) {
-        actions.server.restartContainer();
-      }
-    } catch (error) {
-      // Reset previous state
-      state.editor.currentSandbox.privacy = oldPrivacy;
-
-      actions.internal.handleError({
-        message: "We weren't able to update the sandbox privacy",
-        error,
-      });
-    }
-  } else {
-    try {
-      const sandbox = await effects.api.updatePrivacy(
-        state.editor.currentSandbox.id,
-        privacy
-      );
-
-      state.editor.currentSandbox.previewSecret = sandbox.previewSecret;
-
-      const { isServer } = getTemplate(state.editor.currentSandbox.template);
-      const isChangeToPrivate = oldPrivacy !== 2 && privacy === 2;
-      const isChangeFromPrivate = oldPrivacy === 2 && privacy !== 2;
-
-      if (isServer && (isChangeToPrivate || isChangeFromPrivate)) {
-        // Privacy changed from private to unlisted/public or other way around, restart
-        // the sandbox to notify containers
-        actions.server.restartContainer();
-      }
-
-      if (state.editor.currentSandbox.draft && privacy === 2) {
-        // Optimistically update editing restriction when draft is set to private
-        state.editor.currentSandbox.restricted = false;
-      }
-    } catch (error) {
-      // Reset previous state
-      state.editor.currentSandbox.privacy = oldPrivacy;
-
-      actions.internal.handleError({
-        message: "We weren't able to update the sandbox privacy",
-        error,
-      });
-    }
-  }
-};
-
-export const setWorkspaceItem = (
-  { state, effects }: Context,
-  {
-    item,
-  }: {
-    item: string;
-  }
-) => {
-  effects.analytics.track('Sidebar - Changed Workspace Item', { item });
-  state.workspace.openedWorkspaceItem = item;
-};
-
-export const toggleCurrentWorkspaceItem = ({ state }: Context) => {
-  state.workspace.workspaceHidden = !state.workspace.workspaceHidden;
-};
-
-export const setWorkspaceHidden = (
-  { state, effects }: Context,
-  { hidden }: { hidden: boolean }
-) => {
-  effects.analytics.track('Sidebar - Set Visibility', { hidden });
-
-  state.workspace.workspaceHidden = hidden;
-  effects.vscode.resetLayout();
-};
-
-export const deleteTemplate = async ({ state, actions, effects }: Context) => {
-  effects.analytics.track('Template - Removed', { source: 'editor' });
-  if (
-    !state.editor.currentSandbox ||
-    !state.editor.currentSandbox.customTemplate
-  ) {
-    return;
-  }
-  const sandbox = state.editor.currentSandbox;
-  const templateId = state.editor.currentSandbox.customTemplate.id;
-
-  try {
-    await effects.api.deleteTemplate(sandbox.id, templateId);
-
-    sandbox.isFrozen = false;
-    sandbox.customTemplate = null;
-    actions.modalClosed();
-    effects.notificationToast.success('Template Deleted');
-  } catch (error) {
-    actions.internal.handleError({
-      message: 'Could not delete custom template',
-      error,
-    });
-  }
-};
-
-export const editTemplate = async (
-  { state, actions, effects }: Context,
-  template: CustomTemplate
-) => {
-  if (!state.editor.currentSandbox) {
-    return;
-  }
-
-  effects.analytics.track('Template - Edited', { source: 'editor' });
-
-  const sandboxId = state.editor.currentSandbox.id;
-
-  try {
-    const updatedTemplate = await effects.api.updateTemplate(
-      sandboxId,
-      template
-    );
-
-    actions.modalClosed();
-    state.editor.currentSandbox.customTemplate = updatedTemplate;
-    effects.notificationToast.success('Template Edited');
-  } catch (error) {
-    actions.internal.handleError({
-      message: 'Could not edit custom template',
-      error,
-    });
-  }
-};
-
-export const addedTemplate = async (
-  { state, actions, effects }: Context,
-  template: {
-    color: string;
-    description: string;
-    title: string;
-  }
-) => {
-  if (!state.editor.currentSandbox) {
-    return;
-  }
-
-  effects.analytics.track('Template - Created', { source: 'editor' });
-
-  const sandboxId = state.editor.currentSandbox.id;
-
-  try {
-    const newTemplate = await effects.api.createTemplate(sandboxId, template);
-    const sandbox = state.editor.currentSandbox;
-    sandbox.isFrozen = true;
-    sandbox.customTemplate = newTemplate;
-    actions.modalClosed();
-    effects.notificationToast.success('Successfully created the template');
-  } catch (error) {
-    actions.internal.handleError({
-      message: 'Could not create template, please try again later',
-      error,
-    });
-    if (process.env.NODE_ENV === 'development') {
-      console.error(error);
-    }
-  }
-};
-
-export const openDefaultItem = ({ state }: Context) => {
-  const items = getItems(state);
-  const defaultItem = items.find(i => i.defaultOpen) || items[0];
-
-  state.workspace.openedWorkspaceItem = defaultItem.id;
-};
-
-export const changeDependencySearch = ({ state }: Context, value: string) => {
-  state.workspace.dependencySearch = value;
-};
-
-export const getExplorerDependencies = async (
-  { state, effects }: Context,
-  value: string
-) => {
-  state.workspace.explorerDependenciesEmpty = false;
-  if (!value) {
-    state.workspace.explorerDependencies = [];
-    return;
-  }
-  state.workspace.loadingDependencySearch = true;
-  const searchResults = await effects.algoliaSearch.searchDependencies(
-    value,
-    4
-  );
-
-  state.workspace.loadingDependencySearch = false;
-  if (searchResults.length) {
-    state.workspace.explorerDependencies = searchResults;
-  } else {
-    state.workspace.explorerDependenciesEmpty = true;
-  }
-};
-
-export const clearExplorerDependencies = ({ state }: Context) => {
-  state.workspace.explorerDependencies = [];
-};
-
-export const getDependencies = async (
-  { state, effects }: Context,
-  value: string
-) => {
-  state.workspace.loadingDependencySearch = true;
-  const searchResults = await effects.algoliaSearch.searchDependencies(value);
-
-  state.workspace.loadingDependencySearch = false;
-  state.workspace.dependencies = searchResults;
-};
-
-export const setSelectedDependencies = (
-  { state }: Context,
-  dependency: Dependency
-) => {
-  const selectedDependencies = state.workspace.selectedDependencies;
-  const versionMap = state.workspace.hitToVersionMap;
-  const dep = json(dependency);
-
-  if (selectedDependencies[dep.objectID]) {
-    delete selectedDependencies[dep.objectID];
-    delete versionMap[dep.objectID];
-  } else {
-    selectedDependencies[dep.objectID] = dep;
-  }
-};
-
-export const handleVersionChange = (
-  { state }: Context,
-  {
-    dependency,
-    version,
-  }: {
-    dependency: Dependency;
-    version: string;
-  }
-) => {
-  if (state.editor.parsedConfigurations?.package?.parsed?.dependencies) {
-    const installedVersion =
-      state.editor.parsedConfigurations.package.parsed.dependencies[
-        dependency.objectID
-      ];
-
-    /* Remove the dependency as the same version is already installed */
-    if (installedVersion === version) {
-      const selectedDependencies = state.workspace.selectedDependencies;
-      const versionMap = state.workspace.hitToVersionMap;
-      delete selectedDependencies[dependency.objectID];
-      delete versionMap[dependency.objectID];
-      return;
-    }
-  }
-  state.workspace.hitToVersionMap[dependency.objectID] = version;
-};
-
-export const clearSelectedDependencies = ({ state }: Context) => {
-  state.workspace.selectedDependencies = {};
-};
-
-export const toggleShowingSelectedDependencies = ({ state }: Context) => {
-  state.workspace.showingSelectedDependencies = !state.workspace
-    .showingSelectedDependencies;
-};
-
-export const searchValueChanged = ({ state }: Context, value: string) => {
-  state.workspace.searchValue = value;
-};
-
-export const filesToIncludeChanged = ({ state }: Context, value: string) => {
-  state.workspace.searchOptions.filesToInclude = value;
-};
-
-export const filesToExcludeChanged = ({ state }: Context, value: string) => {
-  state.workspace.searchOptions.filesToExclude = value;
-};
-
-export const openResult = ({ state }: Context, id: number) => {
-  state.workspace.searchResults[id].open = !state.workspace.searchResults[id]
-    .open;
-};
-
-export const searchResultsChanged = (
-  { state }: Context,
-  results: SearchResults
-) => {
-  state.workspace.searchResults = results;
-};
-
-export const searchOptionsToggled = ({ state }: Context, option: string) => {
-  state.workspace.searchOptions[option] = !state.workspace.searchOptions[
-    option
-  ];
-};
-
-export const toggleEditingSandboxInfo = (
-  { state }: Context,
-  value: boolean
-) => {
-  state.workspace.editingSandboxInfo = value;
-};
diff --git a/packages/app/src/app/overmind/namespaces/workspace/index.ts b/packages/app/src/app/overmind/namespaces/workspace/index.ts
deleted file mode 100755
index 0d573be52de..00000000000
--- a/packages/app/src/app/overmind/namespaces/workspace/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { state } from './state';
-import * as actions from './actions';
-
-export { state, actions };
diff --git a/packages/app/src/app/overmind/namespaces/workspace/state.ts b/packages/app/src/app/overmind/namespaces/workspace/state.ts
deleted file mode 100755
index 808fa190935..00000000000
--- a/packages/app/src/app/overmind/namespaces/workspace/state.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-import { Module } from '@codesandbox/common/lib/types';
-import { Dependency } from '@codesandbox/common/lib/types/algolia';
-
-export enum OptionTypes {
-  CaseSensitive = 'caseSensitive',
-  Regex = 'regex',
-  MatchFullWord = 'matchFullWord',
-}
-
-export type SearchResults = (Module & {
-  open: boolean;
-  matches: [number, number][];
-})[];
-
-type State = {
-  project: {
-    title: string;
-    description: string;
-    alias: string;
-  };
-  tags: {
-    tagName: string;
-  };
-  openedWorkspaceItem: string | null;
-  workspaceHidden: boolean;
-  showDeleteSandboxModal: boolean;
-  dependencies: Dependency[];
-  explorerDependencies: Dependency[];
-  explorerDependenciesEmpty: boolean;
-  selectedDependencies:
-    | {
-        [a: string]: Dependency;
-      }
-    | {};
-  loadingDependencySearch: boolean;
-  hitToVersionMap: {
-    [name: string]: string;
-  };
-  showingSelectedDependencies: boolean;
-  dependencySearch: string;
-  searchValue: string;
-  searchResults: SearchResults | [];
-  searchOptions: {
-    [OptionTypes.CaseSensitive]: boolean;
-    [OptionTypes.Regex]: boolean;
-    [OptionTypes.MatchFullWord]: boolean;
-    showFileFilters: boolean;
-    openFilesSearch: boolean;
-    filesToInclude: string;
-    filesToExclude: string;
-  };
-  activeThumb: { [k: string]: { dataURI: string; type: string } } | null;
-  uploadingThumb: boolean;
-  editingSandboxInfo: boolean;
-};
-
-export const state: State = {
-  project: {
-    title: '',
-    description: '',
-    alias: '',
-  },
-  tags: {
-    tagName: '',
-  },
-  openedWorkspaceItem: null,
-  workspaceHidden: false,
-  showDeleteSandboxModal: false,
-  dependencies: [],
-  explorerDependencies: [],
-  explorerDependenciesEmpty: false,
-  selectedDependencies: {},
-  loadingDependencySearch: false,
-  hitToVersionMap: {},
-  showingSelectedDependencies: false,
-  dependencySearch: '',
-  searchValue: '',
-  searchResults: [],
-
-  searchOptions: {
-    [OptionTypes.CaseSensitive]: false,
-    [OptionTypes.Regex]: false,
-    [OptionTypes.MatchFullWord]: false,
-    showFileFilters: false,
-    openFilesSearch: false,
-    filesToInclude: '',
-    filesToExclude: '',
-  },
-  activeThumb: null,
-  uploadingThumb: false,
-  editingSandboxInfo: false,
-};
diff --git a/packages/app/src/app/overmind/state.ts b/packages/app/src/app/overmind/state.ts
index 60bd9f66d26..ac7aa152f1d 100755
--- a/packages/app/src/app/overmind/state.ts
+++ b/packages/app/src/app/overmind/state.ts
@@ -40,7 +40,6 @@ type State = {
   notifications: Notification[];
   isLoadingCLI: boolean;
   isLoadingGithub: boolean;
-  isLoadingVercel: boolean;
   pendingUserId: string | null;
   pendingUser: PendingUserType;
   // Persists the primaryWorkspaceId for a fresh user until redirect
@@ -138,7 +137,6 @@ export const state: State = {
   connected: true,
   notifications: [],
   contributors: [],
-  isLoadingVercel: false,
   isLoadingCLI: false,
   isLoadingGithub: false,
   contextMenu: {
diff --git a/packages/app/src/app/overmind/utils/comments.ts b/packages/app/src/app/overmind/utils/comments.ts
deleted file mode 100644
index 20f92be4cb8..00000000000
--- a/packages/app/src/app/overmind/utils/comments.ts
+++ /dev/null
@@ -1,116 +0,0 @@
-import { UserQuery } from '@codesandbox/common/lib/types';
-import {
-  CommentFragment,
-  Reference,
-  UserReferenceMetadata,
-  ImageReferenceMetadata,
-} from 'app/graphql/types';
-
-export function convertMentionsToMentionLinks(
-  value: string,
-  mentions: { [mentionName: string]: UserQuery }
-) {
-  return Object.keys(mentions).reduce(
-    (aggr, username) =>
-      aggr.replace(
-        new RegExp('@' + username, 'ig'),
-        `[@${username}](user://${mentions[username].id})`
-      ),
-    value
-  );
-}
-
-export function convertMentionLinksToMentions(value = '') {
-  const words = value.split(' ');
-
-  return words
-    .reduce<string[]>((aggr, word) => {
-      const match = word.match(/\[(.*)\]\(user:\/\/.*\)/);
-
-      if (match) {
-        return aggr.concat(match[1]);
-      }
-
-      return aggr.concat(word);
-    }, [])
-    .join(' ');
-}
-
-export function convertMentionsToUserReferences(mentions: {
-  [username: string]: UserQuery;
-}) {
-  return Object.keys(mentions).reduce<
-    (Reference & { metadata: UserReferenceMetadata })[]
-  >((aggr, key) => {
-    const userQuery = mentions[key];
-    return aggr.concat({
-      id: '',
-      type: 'user',
-      resource: `user://${userQuery.id}`,
-      metadata: {
-        userId: userQuery.id,
-        username: userQuery.username,
-      },
-    });
-  }, []);
-}
-
-export function convertUserReferencesToMentions(
-  userReferences: CommentFragment['references']
-) {
-  return userReferences.reduce<{
-    [username: string]: UserQuery;
-  }>((aggr, reference) => {
-    if (reference.type === 'user') {
-      const metadata = reference.metadata as UserReferenceMetadata;
-      aggr[metadata.username] = {
-        id: metadata.userId,
-        username: metadata.username,
-        avatarUrl: '',
-      };
-    }
-
-    return aggr;
-  }, {});
-}
-
-export function convertImagesToImageReferences(images: {
-  [fileName: string]: { src: string; resolution: [number, number] };
-}) {
-  return Object.keys(images).reduce<
-    (Reference & { metadata: ImageReferenceMetadata })[]
-  >((aggr, key) => {
-    const image = images[key];
-    return aggr.concat({
-      id: '',
-      type: 'image',
-      resource: '',
-      metadata: {
-        fileName: key,
-        resolution: image.resolution,
-        uploadId: 0,
-        url: image.src,
-      },
-    });
-  }, []);
-}
-
-export function convertImageReferencesToMarkdownImages(
-  value: string,
-  imageReferences: CommentFragment['references']
-) {
-  return imageReferences.reduce<string>((aggr, reference) => {
-    if (reference.type === 'image') {
-      const metadata = reference.metadata as ImageReferenceMetadata;
-
-      return aggr.replace(
-        // We do not check the full ![](FILE_NAME) signature, only (FILE_NAME)
-        // as this is more than enough
-        new RegExp('\\(' + metadata.fileName + '\\)', 'ig'),
-        `(${reference.resource})`
-      );
-    }
-
-    return aggr;
-  }, value);
-}
diff --git a/packages/app/src/app/overmind/utils/common.ts b/packages/app/src/app/overmind/utils/common.ts
index 5fa9ebe9781..44719a54523 100755
--- a/packages/app/src/app/overmind/utils/common.ts
+++ b/packages/app/src/app/overmind/utils/common.ts
@@ -1,30 +1,9 @@
-import { Module } from '@codesandbox/common/lib/types';
 import { fromPairs, sortBy, toPairs } from 'lodash-es';
 
 export function sortObjectByKeys(object: object) {
   return fromPairs(sortBy(toPairs(object)));
 }
 
-export function createOptimisticModule(overrides: Partial<Module>) {
-  return {
-    id: null,
-    title: '',
-    directoryShortid: null,
-    code: '',
-    savedCode: null,
-    shortid: null,
-    isBinary: false,
-    sourceId: null,
-    insertedAt: new Date().toString(),
-    updatedAt: new Date().toString(),
-    isNotSynced: true,
-    errors: [],
-    corrections: [],
-    type: 'file' as 'file',
-    ...overrides,
-  };
-}
-
 export function lineAndColumnToIndex(
   lines: string[],
   lineNumber: number,
diff --git a/packages/app/src/app/overmind/utils/files.ts b/packages/app/src/app/overmind/utils/files.ts
deleted file mode 100644
index 3c689392fcb..00000000000
--- a/packages/app/src/app/overmind/utils/files.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { getModulePath } from '@codesandbox/common/lib/sandbox/modules';
-import getDefinition from '@codesandbox/common/lib/templates';
-import { Sandbox } from '@codesandbox/common/lib/types';
-
-import { resolveModuleWrapped } from './resolve-module-wrapped';
-
-export const getModuleCode = (sandbox: Sandbox, prettierConfig: unknown) => {
-  const path = getModulePath(sandbox.modules, sandbox.directories, module.id);
-  const template = getDefinition(sandbox.template);
-  const config = template.configurationFiles[path];
-
-  if (
-    config &&
-    (config.generateFileFromSandbox ||
-      config.getDefaultCode ||
-      config.generateFileFromState)
-  ) {
-    if (config.generateFileFromState) {
-      return config.generateFileFromState(prettierConfig);
-    }
-    if (config.generateFileFromSandbox) {
-      return config.generateFileFromSandbox(sandbox);
-    }
-    if (config.getDefaultCode) {
-      const resolveModule = resolveModuleWrapped(sandbox);
-
-      return config.getDefaultCode(sandbox.template, resolveModule);
-    }
-  }
-
-  return '';
-};
diff --git a/packages/app/src/app/overmind/utils/items.ts b/packages/app/src/app/overmind/utils/items.ts
deleted file mode 100755
index 28278f25f37..00000000000
--- a/packages/app/src/app/overmind/utils/items.ts
+++ /dev/null
@@ -1,216 +0,0 @@
-import getTemplate from '@codesandbox/common/lib/templates';
-import { hasPermission } from '@codesandbox/common/lib/utils/permission';
-import { config } from 'app/overmind';
-import { Overmind } from 'overmind';
-
-export interface INavigationItem {
-  id: string;
-  name: string;
-  hasCustomHeader?: boolean;
-  defaultOpen?: boolean;
-  /**
-   * If the item is not applicable in the current situation we sometimes still
-   * want to show it because of visibility. This boolean decides that.
-   */
-  showAsDisabledIfHidden?: boolean;
-}
-
-export const PROJECT: INavigationItem = {
-  id: 'project',
-  name: 'Sandbox Info',
-};
-
-export const PROJECT_TEMPLATE: INavigationItem = {
-  ...PROJECT,
-  name: 'Template Info',
-};
-
-export const PROJECT_SUMMARY: INavigationItem = {
-  id: 'project-summary',
-  name: 'Sandbox Info',
-  hasCustomHeader: true,
-};
-
-export const SEARCH: INavigationItem = {
-  id: 'search',
-  name: 'Search',
-};
-
-export const FILES: INavigationItem = {
-  id: 'files',
-  name: 'Explorer',
-  hasCustomHeader: true,
-  defaultOpen: true,
-};
-
-export const GITHUB: INavigationItem = {
-  id: 'github',
-  name: 'GitHub',
-  showAsDisabledIfHidden: true,
-};
-
-export const DEPLOYMENT: INavigationItem = {
-  id: 'deploy',
-  name: 'Deployment',
-  showAsDisabledIfHidden: true,
-};
-
-export const CONFIGURATION: INavigationItem = {
-  id: 'config',
-  name: 'Configuration Files',
-};
-
-export const LIVE: INavigationItem = {
-  id: 'live',
-  name: 'Live',
-  showAsDisabledIfHidden: true,
-};
-
-export const SERVER: INavigationItem = {
-  id: 'server',
-  name: 'Server Control Panel',
-};
-
-export const COMMENTS: INavigationItem = {
-  id: 'comments',
-  name: 'Comments',
-};
-
-export const DOCKER: INavigationItem = {
-  id: 'docker',
-  name: 'Docker',
-};
-
-export const VSCODE: INavigationItem = {
-  id: 'vscode',
-  name: 'VS Code',
-};
-
-export const AITOOLS: INavigationItem = {
-  id: 'ai',
-  name: 'AI Tools',
-};
-
-export function getDisabledItems(store: any): INavigationItem[] {
-  const { currentSandbox } = store.editor;
-
-  if (!currentSandbox) {
-    return [
-      PROJECT_SUMMARY,
-      FILES,
-      SEARCH,
-      CONFIGURATION,
-      GITHUB,
-      COMMENTS,
-      DEPLOYMENT,
-      LIVE,
-    ];
-  }
-
-  if (currentSandbox.git) {
-    return [CONFIGURATION, DEPLOYMENT, LIVE];
-  }
-
-  if (!currentSandbox.owned || !store.isLoggedIn) {
-    const returnedItems = [GITHUB, DEPLOYMENT];
-    if (!store.live.isLive) {
-      returnedItems.push(LIVE);
-    }
-    return returnedItems;
-  }
-
-  return [];
-}
-
-export default function getItems(
-  store: Overmind<typeof config>['state']
-): INavigationItem[] {
-  if (!store.editor.currentSandbox) {
-    return [];
-  }
-
-  if (
-    store.live.isLive &&
-    !(
-      store.live.isOwner ||
-      (store.user &&
-        store.live &&
-        store.live.roomInfo &&
-        store.live.roomInfo.ownerIds.indexOf(store.user.id) > -1)
-    ) &&
-    !hasPermission(store.editor.currentSandbox.authorization, 'write_project')
-  ) {
-    return [FILES, LIVE];
-  }
-
-  const { currentSandbox } = store.editor;
-
-  const isServer =
-    store.isLoggedIn &&
-    currentSandbox &&
-    getTemplate(currentSandbox.template).isServer;
-
-  if (currentSandbox.git) {
-    const gitItems = [PROJECT_SUMMARY];
-
-    if (
-      isServer &&
-      hasPermission(currentSandbox.authorization, 'write_project')
-    ) {
-      gitItems.push(SERVER);
-    }
-
-    return gitItems;
-  }
-
-  if (!currentSandbox || !currentSandbox.owned) {
-    return [PROJECT_SUMMARY, SEARCH, CONFIGURATION];
-  }
-
-  const isCustomTemplate = !!currentSandbox.customTemplate;
-  const items = [
-    isCustomTemplate ? PROJECT_TEMPLATE : PROJECT,
-    FILES,
-    SEARCH,
-    CONFIGURATION,
-  ];
-
-  if (isServer) {
-    items.push(SERVER);
-  }
-
-  if (
-    store.isLoggedIn &&
-    !store.environment.isOnPrem &&
-    currentSandbox &&
-    !currentSandbox.git
-  ) {
-    if (
-      currentSandbox.featureFlags.comments &&
-      hasPermission(currentSandbox.authorization, 'comment')
-    ) {
-      items.push(GITHUB, COMMENTS);
-    } else {
-      items.push(GITHUB);
-    }
-  }
-
-  if (store.isLoggedIn && !store.environment.isOnPrem) {
-    items.push(DEPLOYMENT);
-  }
-
-  if (
-    store.isLoggedIn &&
-    currentSandbox &&
-    hasPermission(currentSandbox.authorization, 'write_code')
-  ) {
-    items.push(LIVE);
-  }
-
-  if (store.environment.isOnPrem) {
-    return items;
-  }
-
-  // Add docker, vs code and AI tools as conversion to v2 screens
-  return [...items, DOCKER, VSCODE, AITOOLS];
-}
diff --git a/packages/app/src/app/overmind/utils/main-module.ts b/packages/app/src/app/overmind/utils/main-module.ts
deleted file mode 100755
index 7b870057b4d..00000000000
--- a/packages/app/src/app/overmind/utils/main-module.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { Module, Sandbox } from '@codesandbox/common/lib/types';
-import getDefinition from '@codesandbox/common/lib/templates';
-import { resolveModuleWrapped } from './resolve-module-wrapped';
-
-export function mainModule(sandbox: Sandbox, parsedConfigurations: any) {
-  const templateDefinition = getDefinition(sandbox.template);
-
-  const resolve = resolveModuleWrapped(sandbox);
-
-  const module = templateDefinition
-    .getEntries(parsedConfigurations)
-    .map(p => resolve(p))
-    .find(m => Boolean(m));
-
-  return module || sandbox.modules[0];
-}
-
-export function defaultOpenedModule(
-  sandbox: Sandbox,
-  parsedConfigurations: any
-): Module | undefined {
-  const templateDefinition = getDefinition(sandbox.template);
-
-  const resolve = resolveModuleWrapped(sandbox);
-
-  const module = templateDefinition
-    .getDefaultOpenedFiles(parsedConfigurations)
-    .map(p => resolve(p))
-    .find(m => Boolean(m));
-
-  return module || sandbox.modules[0];
-}
diff --git a/packages/app/src/app/overmind/utils/server.ts b/packages/app/src/app/overmind/utils/server.ts
deleted file mode 100644
index 4476e4db2f6..00000000000
--- a/packages/app/src/app/overmind/utils/server.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import {
-  ViewConfig,
-  ViewTab,
-} from '@codesandbox/common/lib/templates/template';
-import { DevToolsTabPosition } from '@codesandbox/common/lib/types';
-
-// eslint-disable-next-line consistent-return
-export function getDevToolsTabPosition({
-  tabs,
-  tab,
-}: {
-  tabs: ViewConfig[];
-  tab: ViewTab;
-}): DevToolsTabPosition | undefined {
-  const serializedTab = JSON.stringify(tab);
-
-  for (let i = 0; i < tabs.length; i++) {
-    const view = tabs[i];
-
-    for (let j = 0; j < view.views.length; j++) {
-      const tabFounded = view.views[j];
-      if (JSON.stringify(tabFounded) === serializedTab) {
-        return {
-          devToolIndex: i,
-          tabPosition: j,
-        };
-      }
-    }
-  }
-}
diff --git a/packages/app/src/app/pages/Dashboard/Components/Repository/RepositoryCard.tsx b/packages/app/src/app/pages/Dashboard/Components/Repository/RepositoryCard.tsx
index 40f4f172648..018db6c389d 100644
--- a/packages/app/src/app/pages/Dashboard/Components/Repository/RepositoryCard.tsx
+++ b/packages/app/src/app/pages/Dashboard/Components/Repository/RepositoryCard.tsx
@@ -46,7 +46,7 @@ export const RepositoryCard: React.FC<RepositoryProps> = ({
             <Link
               to={isBeingRemoved ? undefined : repository.url}
               onContextMenu={onContextMenu}
-              css={{ textDecoration: 'none' }}
+              style={{ textDecoration: 'none' }}
               {...props}
             >
               <Text color="#e5e5e5" size={13} weight="500">
diff --git a/packages/app/src/app/pages/Dashboard/Components/Sandbox/index.tsx b/packages/app/src/app/pages/Dashboard/Components/Sandbox/index.tsx
index 404ba44f597..de6f6d5e06f 100644
--- a/packages/app/src/app/pages/Dashboard/Components/Sandbox/index.tsx
+++ b/packages/app/src/app/pages/Dashboard/Components/Sandbox/index.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { useHistory, Link } from 'react-router-dom';
 import { getEmptyImage } from 'react-dnd-html5-backend';
 import formatDistanceStrict from 'date-fns/formatDistanceStrict';
 import { zonedTimeToUtc } from 'date-fns-tz';
@@ -12,7 +11,6 @@ import track, {
 } from '@codesandbox/common/lib/utils/analytics';
 import { Icon } from '@codesandbox/components';
 import { formatNumber } from '@codesandbox/components/lib/components/Stats';
-import { useBetaSandboxEditor } from 'app/hooks/useBetaSandboxEditor';
 
 import { SandboxCard } from './SandboxCard';
 import { SandboxListItem } from './SandboxListItem';
@@ -69,7 +67,6 @@ function getFolderName(item: GenericSandboxProps['item']): string | undefined {
 
 const GenericSandbox = ({ isScrolling, item, page }: GenericSandboxProps) => {
   const { user, dashboard, activeWorkspaceAuthorization } = useAppState();
-  const [hasBetaEditorExperiment] = useBetaSandboxEditor();
   const actions = useActions();
 
   const { sandbox } = item;
@@ -90,8 +87,7 @@ const GenericSandbox = ({ isScrolling, item, page }: GenericSandboxProps) => {
 
   const viewCount = formatNumber(sandbox.viewCount);
 
-  const url = sandboxUrl(sandbox, hasBetaEditorExperiment);
-  const linksToV2 = sandbox.isV2 || (!sandbox.isSse && hasBetaEditorExperiment);
+  const url = sandboxUrl(sandbox);
 
   const TemplateIcon = getTemplateIcon(sandbox);
   const PrivacyIcon = PrivacyIcons[sandbox.privacy];
@@ -171,8 +167,6 @@ const GenericSandbox = ({ isScrolling, item, page }: GenericSandboxProps) => {
     [onRightClick, onMenuEvent, sandbox.id]
   );
 
-  const history = useHistory();
-
   const onDoubleClick = event => {
     if (page === 'deleted') {
       // Can't open deleted items, they don't exist anymore so we open
@@ -183,10 +177,8 @@ const GenericSandbox = ({ isScrolling, item, page }: GenericSandboxProps) => {
 
       if (event.ctrlKey || event.metaKey) {
         window.open(url, '_blank');
-      } else if (linksToV2) {
-        window.location.href = url;
       } else {
-        history.push(url);
+        window.location.href = url;
       }
     }
   };
@@ -241,9 +233,8 @@ const GenericSandbox = ({ isScrolling, item, page }: GenericSandboxProps) => {
       ? {
           ...baseInteractions,
           interaction: 'link' as const,
-          as: linksToV2 ? 'a' : Link,
-          to: linksToV2 ? undefined : url,
-          href: linksToV2 ? url : undefined,
+          as: 'a',
+          href: url,
           onClick: () => {
             // On the recent page the sandbox card is an anchor, so we only have
             // to track using onclick, the sandbox is opened through native anchor
@@ -302,7 +293,7 @@ const GenericSandbox = ({ isScrolling, item, page }: GenericSandboxProps) => {
   }, [preview]);
 
   return (
-    <div {...dragProps} css={{ height: '100%' }}>
+    <div {...dragProps} style={{ height: '100%' }}>
       <Component
         {...sandboxProps}
         {...interactionProps}
diff --git a/packages/app/src/app/pages/Dashboard/Components/Selection/ContextMenus/SandboxMenu.tsx b/packages/app/src/app/pages/Dashboard/Components/Selection/ContextMenus/SandboxMenu.tsx
index 9d9b7cd4d83..2503068503c 100644
--- a/packages/app/src/app/pages/Dashboard/Components/Selection/ContextMenus/SandboxMenu.tsx
+++ b/packages/app/src/app/pages/Dashboard/Components/Selection/ContextMenus/SandboxMenu.tsx
@@ -9,7 +9,6 @@ import {
 } from '@codesandbox/common/lib/utils/url-generator';
 import { useWorkspaceSubscription } from 'app/hooks/useWorkspaceSubscription';
 import { useWorkspaceAuthorization } from 'app/hooks/useWorkspaceAuthorization';
-import { useBetaSandboxEditor } from 'app/hooks/useBetaSandboxEditor';
 import { useWorkspaceLimits } from 'app/hooks/useWorkspaceLimits';
 import { Context, MenuItem } from '../ContextMenu';
 import { DashboardSandbox, DashboardTemplate } from '../../../types';
@@ -26,7 +25,6 @@ export const SandboxMenu: React.FC<SandboxMenuProps> = ({
   const { activeTeam } = useAppState();
 
   const { isPro } = useWorkspaceSubscription();
-  const [hasBetaEditorExperiment] = useBetaSandboxEditor();
 
   const {
     browser: { copyToClipboard },
@@ -40,8 +38,7 @@ export const SandboxMenu: React.FC<SandboxMenuProps> = ({
   const { userRole, isTeamAdmin, isTeamViewer } = useWorkspaceAuthorization();
   const { isFrozen } = useWorkspaceLimits();
 
-  const url = sandboxUrl(sandbox, hasBetaEditorExperiment);
-  const linksToV2 = sandbox.isV2 || (!sandbox.isSse && hasBetaEditorExperiment);
+  const url = sandboxUrl(sandbox);
   const folderUrl = getFolderUrl(item, activeTeam);
   const boxType = sandbox.isV2 ? 'devbox' : 'sandbox';
 
@@ -99,10 +96,9 @@ export const SandboxMenu: React.FC<SandboxMenuProps> = ({
       {isTemplate && hasWriteAccess ? (
         <MenuItem
           onSelect={() => {
-            actions.editor.forkExternalSandbox({
+            actions.dashboard.forkSandbox({
               sandboxId: sandbox.id,
               openInNewWindow: true,
-              hasBetaEditorExperiment,
               redirectAfterFork: true,
             });
           }}
@@ -112,11 +108,7 @@ export const SandboxMenu: React.FC<SandboxMenuProps> = ({
       ) : null}
       <MenuItem
         onSelect={() => {
-          if (linksToV2) {
-            window.location.href = url;
-          } else {
-            history.push(url);
-          }
+          window.location.href = url;
         }}
       >
         Open
@@ -150,13 +142,12 @@ export const SandboxMenu: React.FC<SandboxMenuProps> = ({
       {hasWriteAccess && !isTemplate ? (
         <MenuItem
           onSelect={() => {
-            actions.editor.forkExternalSandbox({
+            actions.dashboard.forkSandbox({
               sandboxId: sandbox.id,
               openInNewWindow: true,
-              hasBetaEditorExperiment,
               redirectAfterFork: true,
               body: {
-                privacy: sandbox.draft ? 2 : (sandbox.privacy as 2 | 1 | 0),
+                privacy: sandbox.privacy as 2 | 1 | 0,
                 collectionId: sandbox.draft ? undefined : sandbox.collection.id,
               },
             });
diff --git a/packages/app/src/app/pages/Dashboard/Components/Selection/DragPreview.tsx b/packages/app/src/app/pages/Dashboard/Components/Selection/DragPreview.tsx
index 549250a15a5..b9be2dc9796 100644
--- a/packages/app/src/app/pages/Dashboard/Components/Selection/DragPreview.tsx
+++ b/packages/app/src/app/pages/Dashboard/Components/Selection/DragPreview.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useDragLayer } from 'react-dnd';
 import { motion } from 'framer-motion';
-import { Stack, Text, Icon } from '@codesandbox/components';
+import { Stack, Text, Icon, Element } from '@codesandbox/components';
 import { getSandboxName } from '@codesandbox/common/lib/utils/get-sandbox-name';
 import css from '@styled-system/css';
 import { SIDEBAR_WIDTH } from '../../Sidebar/constants';
@@ -158,7 +158,7 @@ export const DragPreview: React.FC<DragPreviewProps> = React.memo(
             }}
           >
             {selectedIds.length > 1 ? (
-              <div
+              <Element
                 css={css({
                   position: 'fixed',
                   top: '-1rem',
@@ -175,7 +175,7 @@ export const DragPreview: React.FC<DragPreviewProps> = React.memo(
                 })}
               >
                 {selectedIds.length}
-              </div>
+              </Element>
             ) : null}
             {selectedItems.map((item, index) => (
               <Stack gap={2} align="center" key={item.id || item.path}>
diff --git a/packages/app/src/app/pages/Dashboard/Components/Selection/index.tsx b/packages/app/src/app/pages/Dashboard/Components/Selection/index.tsx
index cb4b84c7f76..b1f5a69f2dc 100644
--- a/packages/app/src/app/pages/Dashboard/Components/Selection/index.tsx
+++ b/packages/app/src/app/pages/Dashboard/Components/Selection/index.tsx
@@ -18,8 +18,6 @@ import {
   dashboard as dashboardUrls,
 } from '@codesandbox/common/lib/utils/url-generator';
 
-import { useBetaSandboxEditor } from 'app/hooks/useBetaSandboxEditor';
-
 import { DragPreview } from './DragPreview';
 import { ContextMenu } from './ContextMenu';
 import {
@@ -105,7 +103,6 @@ export const SelectionProvider: React.FC<SelectionProviderProps> = ({
   children,
   interactive = true,
 }) => {
-  const [hasBetaEditorExperiment] = useBetaSandboxEditor();
   const possibleItems = (items || []).filter(
     item =>
       item.type === 'sandbox' ||
@@ -325,7 +322,6 @@ export const SelectionProvider: React.FC<SelectionProviderProps> = ({
       const selectedId = selectedIds[0];
 
       let url: string;
-      let linksToV2 = false;
       if (selectedId.startsWith('/')) {
         // means its a folder
         url = dashboardUrls.sandboxes(selectedId, activeTeamId);
@@ -333,18 +329,13 @@ export const SelectionProvider: React.FC<SelectionProviderProps> = ({
         const selectedItem = sandboxes.find(
           item => item.sandbox.id === selectedId
         );
-        url = sandboxUrl(selectedItem.sandbox, hasBetaEditorExperiment);
-        linksToV2 =
-          selectedItem.sandbox.isV2 ||
-          (!selectedItem.sandbox.isSse && hasBetaEditorExperiment);
+        url = sandboxUrl(selectedItem.sandbox);
       }
 
       if (event.ctrlKey || event.metaKey) {
         window.open(url, '_blank');
-      } else if (linksToV2) {
-        window.location.href = url;
       } else {
-        history.push(url, { focus: 'FIRST_ITEM' });
+        window.location.href = url;
       }
     }
 
diff --git a/packages/app/src/app/pages/Dashboard/Components/SyncedSandbox/SyncedSandboxCard.tsx b/packages/app/src/app/pages/Dashboard/Components/SyncedSandbox/SyncedSandboxCard.tsx
index 4be447519a8..ffe633776a0 100644
--- a/packages/app/src/app/pages/Dashboard/Components/SyncedSandbox/SyncedSandboxCard.tsx
+++ b/packages/app/src/app/pages/Dashboard/Components/SyncedSandbox/SyncedSandboxCard.tsx
@@ -21,7 +21,7 @@ export const SyncedSandboxCard = ({ name, path, url, ...props }) => {
               <InteractiveOverlay.Item>
                 <Link
                   to={url}
-                  css={{
+                  style={{
                     display: 'flex',
                     overflow: 'hidden',
                     textDecoration: 'none',
diff --git a/packages/app/src/app/pages/Dashboard/Content/routes/Recent/Banners/LegacyProConvertBanner.tsx b/packages/app/src/app/pages/Dashboard/Content/routes/Recent/Banners/LegacyProConvertBanner.tsx
index a4fdfab7d03..84efeb077ac 100644
--- a/packages/app/src/app/pages/Dashboard/Content/routes/Recent/Banners/LegacyProConvertBanner.tsx
+++ b/packages/app/src/app/pages/Dashboard/Content/routes/Recent/Banners/LegacyProConvertBanner.tsx
@@ -60,7 +60,15 @@ export const LegacyProConvertBanner: React.FC<BannerProps> = ({
                 </Button>
               </RouterLink>
             )}
-
+            {isAdmin && (
+              <Button
+                as="a"
+                href="mailto:support@codesandbox.io?subject=Convert to usage based billing"
+                autoWidth
+              >
+                Contact us
+              </Button>
+            )}
             <Link
               href={docsUrl(
                 '/learn/plans/workspace#managing-teams-and-subscriptions'
diff --git a/packages/app/src/app/pages/Dashboard/Header/index.tsx b/packages/app/src/app/pages/Dashboard/Header/index.tsx
index b8c2c52ac76..801a83d21b4 100644
--- a/packages/app/src/app/pages/Dashboard/Header/index.tsx
+++ b/packages/app/src/app/pages/Dashboard/Header/index.tsx
@@ -14,7 +14,7 @@ import { dashboard as dashboardUrls } from '@codesandbox/common/lib/utils/url-ge
 import { useWorkspaceLimits } from 'app/hooks/useWorkspaceLimits';
 import { TeamAvatar } from 'app/components/TeamAvatar';
 import { WorkspaceSelect } from 'app/components/WorkspaceSelect';
-import { SkeletonTextBlock } from 'app/pages/Sandbox/Editor/Skeleton/elements';
+import { SkeletonTextBlock } from 'app/components/Skeleton/elements';
 
 interface HeaderProps {
   onSidebarToggle: () => void;
diff --git a/packages/app/src/app/pages/Dashboard/Sidebar/UsageProgress.tsx b/packages/app/src/app/pages/Dashboard/Sidebar/UsageProgress.tsx
index 3a1b5d8bf6f..7fc2e849987 100644
--- a/packages/app/src/app/pages/Dashboard/Sidebar/UsageProgress.tsx
+++ b/packages/app/src/app/pages/Dashboard/Sidebar/UsageProgress.tsx
@@ -1,4 +1,4 @@
-import { Link, Stack, Text, Tooltip } from '@codesandbox/components';
+import { Element, Link, Stack, Text, Tooltip } from '@codesandbox/components';
 import { dashboard as dashboardUrls } from '@codesandbox/common/lib/utils/url-generator';
 import css from '@styled-system/css';
 import React, { useEffect, useState } from 'react';
@@ -50,7 +50,7 @@ export const UsageProgress: React.FC<{
             </div>
           }
         >
-          <div
+          <Element
             css={css({
               position: 'relative',
               overflow: 'hidden',
@@ -60,7 +60,7 @@ export const UsageProgress: React.FC<{
               borderRadius: 4,
             })}
           >
-            <div
+            <Element
               style={{
                 position: 'absolute',
                 top: 0,
@@ -74,7 +74,7 @@ export const UsageProgress: React.FC<{
                 backgroundColor: '#E4FC82',
               })}
             />
-          </div>
+          </Element>
         </Tooltip>
 
         <Stack
diff --git a/packages/app/src/app/pages/Live/Error/RoomNotFoundError.tsx b/packages/app/src/app/pages/Live/Error/RoomNotFoundError.tsx
deleted file mode 100644
index 4f4ea896946..00000000000
--- a/packages/app/src/app/pages/Live/Error/RoomNotFoundError.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Button, Text } from '@codesandbox/components';
-import css from '@styled-system/css';
-import React, { FunctionComponent } from 'react';
-import { Link } from 'react-router-dom';
-
-export const RoomNotFoundError: FunctionComponent = () => (
-  <>
-    <Text size={6} weight="bold">
-      Something went wrong
-    </Text>
-
-    <Text block marginTop={4} size={4}>
-      {`It seems like this session doesn't exist or has been closed`}
-    </Text>
-
-    <Link css={css({ textDecoration: 'none' })} to="/s">
-      <Button marginTop={5}>Create Sandbox</Button>
-    </Link>
-  </>
-);
diff --git a/packages/app/src/app/pages/Live/Error/index.tsx b/packages/app/src/app/pages/Live/Error/index.tsx
deleted file mode 100644
index 63e7c052749..00000000000
--- a/packages/app/src/app/pages/Live/Error/index.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { Button, Text } from '@codesandbox/components';
-import css from '@styled-system/css';
-import React, { FunctionComponent } from 'react';
-import { Link } from 'react-router-dom';
-
-import { useAppState } from 'app/overmind';
-
-import { RoomNotFoundError } from './RoomNotFoundError';
-
-export const Error: FunctionComponent = () => {
-  const { error } = useAppState().live;
-
-  if (error === 'room not found') {
-    return <RoomNotFoundError />;
-  }
-
-  return (
-    <>
-      <Text size={6} weight="bold">
-        An error occurred while connecting to the live session:
-      </Text>
-
-      <Text block marginTop={4} size={4}>
-        {error}
-      </Text>
-
-      <Link css={css({ textDecoration: 'none' })} to="/s">
-        <Button marginTop={5}>Create Sandbox</Button>
-      </Link>
-    </>
-  );
-};
diff --git a/packages/app/src/app/pages/Live/NotAuthenticated.tsx b/packages/app/src/app/pages/Live/NotAuthenticated.tsx
deleted file mode 100644
index 9e627b8f217..00000000000
--- a/packages/app/src/app/pages/Live/NotAuthenticated.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { Button, Element, Stack, Text } from '@codesandbox/components';
-import React, { FunctionComponent } from 'react';
-import { useParams } from 'react-router-dom';
-
-import { useActions } from 'app/overmind';
-
-export const NotAuthenticated: FunctionComponent = () => {
-  const { signInToRoom } = useActions().live;
-  const { roomId } = useParams<{ roomId: string }>();
-
-  return (
-    <>
-      <Text weight="bold" size={6}>
-        Sign in required
-      </Text>
-
-      <Text block marginTop={4} size={4}>
-        You need to sign in to join this session
-      </Text>
-
-      <Element marginTop={4}>
-        <Button onClick={() => signInToRoom(roomId)} autoWidth>
-          <Stack align="center" gap={2}>
-            <Text style={{ lineHeight: 1 }}>Sign in</Text>
-          </Stack>
-        </Button>
-      </Element>
-    </>
-  );
-};
diff --git a/packages/app/src/app/pages/Live/index.tsx b/packages/app/src/app/pages/Live/index.tsx
deleted file mode 100644
index f6b894f50fc..00000000000
--- a/packages/app/src/app/pages/Live/index.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import CodeSandboxBlack from '@codesandbox/components/lib/themes/codesandbox-black';
-import { getSandboxName } from '@codesandbox/common/lib/utils/get-sandbox-name';
-import { Element, Stack, ThemeProvider } from '@codesandbox/components';
-import css from '@styled-system/css';
-import React, { FunctionComponent, useEffect } from 'react';
-import { Helmet } from 'react-helmet';
-import { useParams } from 'react-router-dom';
-
-import { useAppState, useActions } from 'app/overmind';
-import { Navigation } from 'app/pages/common/Navigation';
-
-import { Editor } from '../Sandbox/Editor';
-
-import { Error } from './Error';
-import { NotAuthenticated } from './NotAuthenticated';
-
-export const Live: FunctionComponent = () => {
-  const { onNavigateAway, roomJoined } = useActions().live;
-  const {
-    editor: { currentSandbox },
-    isAuthenticating,
-    live: { error },
-    user,
-  } = useAppState();
-  const { roomId } = useParams<{ roomId: string }>();
-
-  useEffect(() => {
-    roomJoined(roomId);
-  }, [roomJoined, roomId]);
-
-  useEffect(() => () => onNavigateAway(), [onNavigateAway]);
-
-  const getContent = () => {
-    if (!isAuthenticating && !user) {
-      return <NotAuthenticated />;
-    }
-
-    if (error) {
-      return <Error />;
-    }
-
-    return null;
-  };
-
-  const content = getContent();
-  if (content) {
-    return (
-      <ThemeProvider theme={CodeSandboxBlack}>
-        <Element
-          css={css({
-            display: 'flex',
-            flex: 'auto',
-            width: '100%',
-            height: '100%',
-            backgroundColor: 'sideBar.background',
-            fontFamily: 'Inter',
-          })}
-        >
-          <Element
-            css={css({ width: '100%', height: '100vh', overflow: 'hidden' })}
-          >
-            <Navigation title="Live Session" />
-
-            <Stack
-              align="center"
-              css={css({ width: '100%', height: '100%' })}
-              direction="vertical"
-              justify="center"
-            >
-              {content}
-            </Stack>
-          </Element>
-        </Element>
-      </ThemeProvider>
-    );
-  }
-
-  return (
-    <>
-      {currentSandbox ? (
-        <Helmet>
-          <title>{getSandboxName(currentSandbox)} - CodeSandbox</title>
-        </Helmet>
-      ) : null}
-
-      <Editor />
-    </>
-  );
-};
diff --git a/packages/app/src/app/pages/Profile/ContextMenu.tsx b/packages/app/src/app/pages/Profile/ContextMenu.tsx
index 3d6c6883f49..2ba4731afe1 100644
--- a/packages/app/src/app/pages/Profile/ContextMenu.tsx
+++ b/packages/app/src/app/pages/Profile/ContextMenu.tsx
@@ -15,7 +15,7 @@ export const ContextMenu = () => {
     },
   } = useAppState();
   const {
-    editor: { forkExternalSandbox },
+    dashboard: { forkSandbox },
     profile: {
       addFeaturedSandboxes,
       removeFeaturedSandboxes,
@@ -120,7 +120,7 @@ export const ContextMenu = () => {
       </Menu.Item>
       <Menu.Item
         onSelect={() => {
-          forkExternalSandbox({
+          forkSandbox({
             sandboxId,
             openInNewWindow: true,
             redirectAfterFork: true,
diff --git a/packages/app/src/app/pages/Profile/SandboxCard.tsx b/packages/app/src/app/pages/Profile/SandboxCard.tsx
index 33f15931a9e..a2e7c79e19e 100644
--- a/packages/app/src/app/pages/Profile/SandboxCard.tsx
+++ b/packages/app/src/app/pages/Profile/SandboxCard.tsx
@@ -8,6 +8,7 @@ import {
   IconButton,
   SkeletonText,
   isMenuClicked as isTargetInMenu,
+  Element,
 } from '@codesandbox/components';
 import designLanguage from '@codesandbox/components/lib/design-language/theme';
 import css from '@styled-system/css';
@@ -233,7 +234,7 @@ export const SandboxCard: React.FC<{
         })}
         {...props}
       >
-        <div
+        <Element
           css={css({
             display: 'flex',
             alignItems: 'center',
diff --git a/packages/app/src/app/pages/Profile/SandboxPicker/SandboxCard.tsx b/packages/app/src/app/pages/Profile/SandboxPicker/SandboxCard.tsx
index 2af1c8a031a..7d16f5ce384 100644
--- a/packages/app/src/app/pages/Profile/SandboxPicker/SandboxCard.tsx
+++ b/packages/app/src/app/pages/Profile/SandboxPicker/SandboxCard.tsx
@@ -8,6 +8,7 @@ import {
   IconButton,
   SkeletonText,
   isMenuClicked as isTargetInMenu,
+  Element,
 } from '@codesandbox/components';
 import designLanguage from '@codesandbox/components/lib/design-language/theme';
 import css from '@styled-system/css';
@@ -128,7 +129,7 @@ export const SandboxCard: React.FC<{
           </Stack>
         </Stack>
       )}
-      <div
+      <Element
         css={css({
           display: 'flex',
           alignItems: 'center',
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Content/EditorToast.tsx b/packages/app/src/app/pages/Sandbox/Editor/Content/EditorToast.tsx
deleted file mode 100644
index c314b04f5d9..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Content/EditorToast.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import Tooltip from '@codesandbox/common/lib/components/Tooltip';
-import getTemplateDefinition from '@codesandbox/common/lib/templates';
-import { LiveUser } from '@codesandbox/common/lib/types';
-import { Stack } from '@codesandbox/components';
-import css from '@styled-system/css';
-import { Icons } from 'app/components/CodeEditor/elements';
-import { useAppState } from 'app/overmind';
-import * as React from 'react';
-import QuestionIcon from 'react-icons/lib/go/question';
-
-export const EditorToast = () => {
-  const state = useAppState();
-
-  const sandbox = state.editor.currentSandbox;
-  const { currentModule } = state.editor;
-  const modulePath = currentModule.path;
-  const template = sandbox && getTemplateDefinition(sandbox.template);
-  const config = template && template.configurationFiles[modulePath];
-
-  const followingUserId = state.live.followingUserId;
-  let followingUser: LiveUser | undefined;
-
-  if (followingUserId && state.live.roomInfo && state.live.isLive) {
-    followingUser = state.live.roomInfo.users.find(
-      u => u.id === followingUserId
-    );
-  }
-
-  return (
-    <Stack
-      css={css({
-        position: 'absolute',
-        bottom: 0,
-        zIndex: 45,
-        right: 15,
-      })}
-      gap={1}
-      direction="vertical"
-      align="flex-end"
-    >
-      {followingUser && (
-        <div
-          css={{
-            transition: '0.3s ease opacity',
-            background: `rgb(${followingUser.color.join(',')})`,
-            padding: '2px 8px',
-            fontSize: '12px',
-            float: 'right',
-            width: 'max-content',
-            borderTopLeftRadius: 2,
-            color:
-              (followingUser.color[0] * 299 +
-                followingUser.color[1] * 587 +
-                followingUser.color[2] * 114) /
-                1000 >
-              128
-                ? 'rgba(0, 0, 0, 0.8)'
-                : 'white',
-
-            ':hover': {
-              opacity: 0.5,
-            },
-          }}
-        >
-          Following {followingUser.username}
-        </div>
-      )}
-
-      {config ? (
-        <Icons>
-          {config.partialSupportDisclaimer ? (
-            <Tooltip
-              placement="bottom"
-              content={config.partialSupportDisclaimer}
-              style={{
-                display: 'flex',
-                'align-items': 'center',
-              }}
-            >
-              Partially Supported Config{' '}
-              <QuestionIcon style={{ marginLeft: '.5rem' }} />
-            </Tooltip>
-          ) : (
-            <div>Supported Configuration</div>
-          )}
-        </Icons>
-      ) : null}
-    </Stack>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Content/Preview/ResponsiveWrapper/Icons.tsx b/packages/app/src/app/pages/Sandbox/Editor/Content/Preview/ResponsiveWrapper/Icons.tsx
deleted file mode 100644
index 4166e00e0b8..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Content/Preview/ResponsiveWrapper/Icons.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import React from 'react';
-
-export const SwitchIcon = (props: { color: string }) => (
-  <svg width={8} height={6} fill="none" viewBox="0 0 8 6" {...props}>
-    <path
-      fill={props.color}
-      d="M8 1.333V2c-.615 0-1.396.75-1.846 1.333h-.616c.14-.4.616-1.333.616-1.333H0v-.68h6.154L5.538 0h.616S7.384 1.333 8 1.333zM0 4.667V4c.615 0 1.396-.75 1.846-1.333h.616C2.322 3.067 1.846 4 1.846 4H8v.68H1.846L2.462 6h-.616S.616 4.667 0 4.667z"
-    />
-  </svg>
-);
-export const ArrowDown = (props: { color: string }) => (
-  <svg width={7} height={5} fill="none" viewBox="0 0 5 3" {...props}>
-    <path
-      fill={props.color}
-      d="M2.07 2.003L.327.318.07.567l2 1.933 2-1.933-.272-.249L2.07 2.003z"
-    />
-  </svg>
-);
-
-export const CloseIcon = (props: { color: string }) => (
-  <svg width={17} height={17} fill="none" viewBox="0 0 17 17" {...props}>
-    <path
-      fill={props.color}
-      d="M16.523 1.735L15.068.281 8.523 6.826 1.977.281.523 1.735l6.545 6.546-6.545 6.545 1.454 1.455 6.546-6.546 6.545 6.546 1.455-1.455-6.546-6.545 6.546-6.546z"
-    />
-  </svg>
-);
-
-export const ResizeIcon = props => (
-  <svg width={17} height={17} fill="none" viewBox="0 0 17 17" {...props}>
-    <g>
-      <path fill="#fff" fillOpacity={0.2} d="M8 8l8-8v13a3 3 0 01-3 3H0l8-8z" />
-    </g>
-    <g>
-      <rect
-        width={1}
-        height={10}
-        x={14.071}
-        y={7}
-        fill="#000"
-        fillOpacity={0.4}
-        rx={0.5}
-        transform="rotate(45 14.071 7)"
-      />
-    </g>
-    <g>
-      <rect
-        width={1}
-        height={6}
-        x={14.243}
-        y={10}
-        fill="#000"
-        fillOpacity={0.4}
-        rx={0.5}
-        transform="rotate(45 14.243 10)"
-      />
-    </g>
-  </svg>
-);
-
-export const DismissIcon = props => (
-  <svg width={24} height={24} fill="none" viewBox="0 0 24 24" {...props}>
-    <path
-      fill="currentColor"
-      d="M17.508 7.301l-1.083-1.09-4.872 4.909-4.871-4.91-1.083 1.091 4.872 4.91-4.872 4.909 1.083 1.09 4.871-4.909 4.872 4.91 1.082-1.091-4.871-4.91 4.872-4.909z"
-    />
-  </svg>
-);
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Content/Preview/ResponsiveWrapper/InstallExtensionBanner.tsx b/packages/app/src/app/pages/Sandbox/Editor/Content/Preview/ResponsiveWrapper/InstallExtensionBanner.tsx
deleted file mode 100644
index c14de477d75..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Content/Preview/ResponsiveWrapper/InstallExtensionBanner.tsx
+++ /dev/null
@@ -1,131 +0,0 @@
-import Modal from 'app/components/Modal';
-import css from '@styled-system/css';
-import { ThemeProvider, Stack, Text } from '@codesandbox/components';
-import { useAppState, useActions } from 'app/overmind';
-import { Alert } from 'app/pages/common/Modals/Common/Alert';
-import * as React from 'react';
-import { withTheme } from 'styled-components';
-import { DismissIcon } from './Icons';
-
-const ADDRESSBAR_HEIGHT = 35;
-const RESPONSIVE_BAR_HEIGHT = 40;
-
-const clearButtonStyles = {
-  background: 'transparent',
-  display: 'flex',
-  alignItems: 'center',
-  padding: 0,
-  border: 'none',
-};
-
-export const InstallExtensionBanner = withTheme(({ theme }: { theme: any }) => {
-  const [isShowing, setShowing] = React.useState(false);
-  const {
-    preview: { mode },
-    modals,
-  } = useAppState();
-  const actions = useActions();
-
-  React.useEffect(() => {
-    setShowing(true);
-  }, []);
-
-  const isResponsive =
-    mode === 'responsive' || mode === 'responsive-add-comment';
-
-  const getTop = () => {
-    if (isShowing) {
-      if (isResponsive) {
-        return ADDRESSBAR_HEIGHT + RESPONSIVE_BAR_HEIGHT;
-      }
-      return ADDRESSBAR_HEIGHT;
-    }
-
-    return 0;
-  };
-
-  return (
-    <ThemeProvider theme={theme.vscodeTheme}>
-      <Stack
-        align="center"
-        justify="space-between"
-        style={{
-          top: getTop(),
-        }}
-        padding={2}
-        css={css({
-          position: 'absolute',
-          height: 40,
-          left: 0,
-          top: 0,
-          transition: 'top 0.5s ease-in',
-          width: '100%',
-          backgroundColor: 'sideBar.background',
-          zIndex: 3,
-        })}
-      >
-        <Stack
-          gap={4}
-          align="center"
-          css={css({
-            flexGrow: 1,
-          })}
-        >
-          <button
-            type="button"
-            onClick={() => {
-              actions.preview.closeExtensionBanner();
-            }}
-            css={css({
-              ...clearButtonStyles,
-              color: 'mutedForeground',
-            })}
-          >
-            <DismissIcon />
-          </button>
-          <Text
-            style={{
-              maxWidth: '70%',
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-              whiteSpace: 'nowrap',
-            }}
-          >
-            Get a better experience creating comments
-          </Text>
-        </Stack>
-        <button
-          type="button"
-          onClick={() => {
-            actions.preview.installExtension();
-          }}
-          css={css({
-            ...clearButtonStyles,
-            color: 'blues.500',
-            flexShrink: 0,
-          })}
-        >
-          Install Extension
-        </button>
-        <Modal
-          isOpen={modals.extensionInstalledModal.isCurrent}
-          width={450}
-          onClose={() => actions.modals.extensionInstalledModal.close(false)}
-        >
-          <Alert
-            title="CodeSandbox Extension"
-            description="If you installed the extension, the browser needs to refresh to activate it"
-            onCancel={() => {
-              actions.modals.extensionInstalledModal.close(false);
-            }}
-            cancelMessage="Cancel"
-            onPrimaryAction={() => {
-              actions.modals.extensionInstalledModal.close(true);
-            }}
-            confirmMessage="Ok"
-          />
-        </Modal>
-      </Stack>
-    </ThemeProvider>
-  );
-});
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Content/Preview/ResponsiveWrapper/PresetMenu.tsx b/packages/app/src/app/pages/Sandbox/Editor/Content/Preview/ResponsiveWrapper/PresetMenu.tsx
deleted file mode 100644
index b343eedae1f..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Content/Preview/ResponsiveWrapper/PresetMenu.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import React from 'react';
-import css from '@styled-system/css';
-import { isEqual } from 'lodash-es';
-import { Element, Menu, Text } from '@codesandbox/components';
-import { ArrowDown } from './Icons';
-
-type PresetMenuProps = {
-  canChangePresets: boolean;
-  presets: { [name: string]: [number, number] };
-  theme: any;
-  resolution: [number, number];
-  onSelect: (preset: [number, number]) => void;
-  openEditPresets: () => void;
-};
-
-export const PresetMenu = ({
-  presets,
-  theme,
-  resolution,
-  onSelect,
-  openEditPresets,
-  canChangePresets,
-}: PresetMenuProps) => {
-  const activePresetName =
-    Object.keys(presets).find(preset => isEqual(presets[preset], resolution)) ||
-    'Custom';
-
-  const sortedPresetsByWidth = Object.keys(presets).sort((a, b) =>
-    presets[a][0] > presets[b][0] ? 1 : -1
-  );
-
-  return (
-    <Menu>
-      <Menu.Button
-        css={css({
-          color: 'sideBar.foreground',
-          display: 'flex',
-          alignItems: 'center',
-        })}
-      >
-        <Text>{activePresetName}</Text>
-        <Element marginLeft={1}>
-          <ArrowDown color={theme['sideBar.foreground']} />
-        </Element>
-      </Menu.Button>
-      <Menu.List>
-        {sortedPresetsByWidth.map(preset => (
-          <Menu.Item
-            key={preset}
-            field={preset}
-            onSelect={() => onSelect(presets[preset])}
-          >
-            {preset}
-          </Menu.Item>
-        ))}
-        {canChangePresets ? (
-          <Menu.Item
-            key="edit-presets"
-            field="edit-presets"
-            onSelect={openEditPresets}
-          >
-            Edit Presets
-          </Menu.Item>
-        ) : null}
-      </Menu.List>
-    </Menu>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Content/Preview/ResponsiveWrapper/PreviewCommentWrapper.tsx b/packages/app/src/app/pages/Sandbox/Editor/Content/Preview/ResponsiveWrapper/PreviewCommentWrapper.tsx
deleted file mode 100644
index 7e2d05cd052..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Content/Preview/ResponsiveWrapper/PreviewCommentWrapper.tsx
+++ /dev/null
@@ -1,188 +0,0 @@
-import {
-  CommentWithRepliesFragment,
-  PreviewReferenceMetadata,
-} from 'app/graphql/types';
-import { useActions, useAppState } from 'app/overmind';
-import * as React from 'react';
-import { Icon } from '@codesandbox/components';
-import styled, { createGlobalStyle } from 'styled-components';
-
-const BUBBLE_SIZE = 16;
-
-const Wrapper = styled.div({
-  height: '100%',
-  position: 'relative',
-  zIndex: 2,
-});
-
-const Screenshot = styled.div({
-  position: 'absolute',
-  left: 0,
-  top: 0,
-  zIndex: 1,
-  backgroundSize: 'cover',
-  width: '100%',
-  height: '100%',
-});
-
-const BorderOverlay = styled.div<{ showCommentCursor: boolean }>(props => ({
-  position: 'absolute',
-  left: 0,
-  top: 0,
-  width: '100%',
-  height: '100%',
-  boxSizing: 'border-box',
-  border: '4px solid #FFF',
-  color: '#FF3B30',
-  zIndex: 2,
-  cursor: props.showCommentCursor
-    ? `url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16H0V8Z" fill="%23FF3B30"/></svg>'), auto`
-    : 'inherit',
-}));
-
-const PreviewBubble = styled(Icon)<{ active: boolean }>({
-  position: 'absolute',
-  width: BUBBLE_SIZE,
-  height: BUBBLE_SIZE,
-  color: '#FF3B30',
-  zIndex: 2,
-  cursor: 'inherit',
-});
-
-function getPreviewReference(
-  comment: CommentWithRepliesFragment | null
-): PreviewReferenceMetadata | null {
-  if (
-    comment &&
-    comment.anchorReference &&
-    comment.anchorReference.type === 'preview'
-  ) {
-    return comment.anchorReference.metadata as PreviewReferenceMetadata;
-  }
-
-  return null;
-}
-
-type Props = {
-  children: any;
-  scale: number;
-};
-
-const FlashAnimationGlobalStyle = createGlobalStyle`
-  @keyframes screenshot-flash {
-    0% { opacity: 0 }
-    25% { opacity: 1 }
-    35% { opacity: 1 }
-    100% { opacity: 0 }
-  }
-  .screenshot-flash {
-    animation: screenshot-flash 0.5s linear;
-  }
-`;
-
-const useFlash = (
-  ref: React.MutableRefObject<HTMLElement>,
-  activate: boolean
-) => {
-  React.useEffect(() => {
-    if (ref.current && activate) {
-      const flashEl = document.createElement('div');
-      flashEl.style.position = 'absolute';
-      flashEl.style.left = '0';
-      flashEl.style.top = '0';
-      flashEl.style.width = '100%';
-      flashEl.style.height = '100%';
-      flashEl.style.opacity = '0';
-      flashEl.style.zIndex = '999999';
-      flashEl.style.backgroundColor = 'white';
-      flashEl.className = 'screenshot-flash';
-
-      const disposer = () => {
-        if (ref.current) {
-          flashEl.removeEventListener('animationend', onAnimationEnd);
-          if (flashEl.parentNode) {
-            flashEl.parentNode.removeChild(flashEl);
-          }
-        }
-      };
-      const onAnimationEnd = disposer;
-      flashEl.addEventListener('animationend', onAnimationEnd);
-      ref.current.appendChild(flashEl);
-
-      return disposer;
-    }
-
-    return () => {};
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ref.current, activate]);
-};
-
-export const PreviewCommentWrapper = ({ children, scale }: Props) => {
-  const state = useAppState();
-  const actions = useActions();
-  const wrapperRef = React.useRef(null);
-  const previewReference = getPreviewReference(state.comments.currentComment);
-  const isAddingPreviewComment =
-    state.preview.mode === 'add-comment' ||
-    state.preview.mode === 'responsive-add-comment';
-  const hasSource = Boolean(state.preview.screenshot.source);
-
-  useFlash(wrapperRef, isAddingPreviewComment && hasSource);
-
-  return (
-    <Wrapper ref={wrapperRef}>
-      <FlashAnimationGlobalStyle />
-      {children}
-      {isAddingPreviewComment ? (
-        <>
-          <Screenshot
-            style={
-              state.preview.screenshot.source
-                ? {
-                    backgroundImage: `url(${state.preview.screenshot.source})`,
-                  }
-                : {
-                    backgroundColor: state.preview.screenshot.isLoading
-                      ? 'rgba(0,0,0,0.5)'
-                      : 'rgba(0,0,0,0)',
-                  }
-            }
-          />
-          <BorderOverlay
-            style={{
-              transition: 'opacity 0.125s ease-in',
-              opacity: state.preview.screenshot.source ? 1 : 0,
-            }}
-            onClick={event => {
-              if (state.preview.screenshot.isLoading) {
-                return;
-              }
-
-              const parentBounds = (event.target as any).parentNode.getBoundingClientRect();
-
-              actions.comments.addOptimisticPreviewComment({
-                x: event.clientX - parentBounds.left,
-                y: event.clientY - parentBounds.top,
-                screenshot: state.preview.screenshot.source,
-                scale,
-              });
-            }}
-            showCommentCursor={hasSource}
-          >
-            {previewReference ? (
-              <PreviewBubble
-                id="preview-comment-bubble"
-                name="comment"
-                active
-                style={{
-                  top: Math.round(previewReference.y) + 'px',
-                  left: Math.round(previewReference.x) + 'px',
-                }}
-              />
-            ) : null}
-          </BorderOverlay>
-        </>
-      ) : null}
-    </Wrapper>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Content/Preview/ResponsiveWrapper/ResizeHandles.tsx b/packages/app/src/app/pages/Sandbox/Editor/Content/Preview/ResponsiveWrapper/ResizeHandles.tsx
deleted file mode 100644
index 494676ccfac..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Content/Preview/ResponsiveWrapper/ResizeHandles.tsx
+++ /dev/null
@@ -1,221 +0,0 @@
-import React from 'react';
-
-import {
-  CornerResize,
-  Cover,
-  HeightResize,
-  MIN_SIZE_X,
-  MIN_SIZE_Y,
-  PADDING_OFFSET_X,
-  PADDING_OFFSET_Y,
-  ResizeWrapper,
-  Styled,
-  WidthResize,
-} from './elements';
-
-type ResizeHandlesProps = {
-  on: boolean;
-  showResizeHandles: boolean;
-  width: number;
-  height: number;
-  wrapper: HTMLDivElement;
-  scale: number;
-  widthAndHeightResizer: [
-    { x: number; y: number } | null,
-    ({ x, y }: { x: number; y: number }) => void
-  ];
-  widthResizer: [{ x: number } | null, ({ x }: { x: number }) => void];
-  heightResizer: [{ y: number } | null, ({ y }: { y: number }) => void];
-  setResolution: (resolution: [number, number]) => void;
-  children: React.ReactNode;
-  setIsResizing: (isResizing: boolean) => void;
-};
-
-const HANDLE_OFFSET = 15;
-
-const resize = (
-  event: MouseEvent | React.MouseEvent,
-  {
-    resolution,
-    initialMousePosition,
-    wrapper,
-    scale,
-    offset,
-    resizer: [_, setSize],
-    setResolution,
-    setIsResizing,
-  }: {
-    resolution: [number, number];
-    // Holds the actual mouse position and its offset on the 4px handle to determine
-    // where it should stop resizing. [position, handleOffset]
-    initialMousePosition: { x?: number; y?: number };
-    // We need the wrapper, because we already introduce elements at the bottom of it,
-    // and we might introduce stuff on the right side. Meaning our constraint logic
-    // needs to know where the edges are
-    wrapper: HTMLDivElement;
-    // We need to know the offset of the handle, which is different from the explicit width
-    // and height handles and the both direction resizer
-    offset: number;
-    scale: number;
-    resizer: [{ x?: number; y?: number }, (payload: any) => void];
-    setResolution: (resolution: [number, number]) => void;
-    setIsResizing: (isResizing: boolean) => void;
-  }
-) => {
-  const [initialWidth, initialHeight] = resolution;
-  const newSize = {
-    x: resolution[0],
-    y: resolution[1],
-  };
-
-  function calculate(evt: MouseEvent | React.MouseEvent) {
-    const {
-      right: wrapperRight,
-      bottom: wrapperBottom,
-    } = wrapper.getBoundingClientRect();
-    const maxClientX = Math.min(
-      evt.clientX,
-      wrapperRight - PADDING_OFFSET_X + offset
-    );
-    const maxClientY = Math.min(
-      evt.clientY,
-      wrapperBottom - PADDING_OFFSET_Y + offset
-    );
-    const width =
-      'x' in initialMousePosition
-        ? initialWidth - (initialMousePosition.x - maxClientX) * (1 / scale) * 2
-        : resolution[0];
-    const height =
-      'y' in initialMousePosition
-        ? initialHeight - (initialMousePosition.y - maxClientY) * (1 / scale)
-        : resolution[1];
-    const positiveWidth = width > MIN_SIZE_X ? width : MIN_SIZE_X;
-    const positiveHeight = height > MIN_SIZE_Y ? height : MIN_SIZE_Y;
-
-    // The preview can only be resized on its right and bottom side, which always align
-    // with the far bottom/right of the browser
-    newSize.x = Math.round(
-      'x' in initialMousePosition ? positiveWidth : newSize.x
-    );
-    newSize.y = Math.round(
-      'y' in initialMousePosition ? positiveHeight : newSize.y
-    );
-  }
-
-  const mouseMoveListener: (event: MouseEvent) => void = evt => {
-    calculate(evt);
-    setSize({ ...newSize });
-  };
-  const mouseUpListener: (event: MouseEvent) => void = evt => {
-    window.removeEventListener('mousemove', mouseMoveListener);
-    window.removeEventListener('mouseup', mouseUpListener);
-    calculate(evt);
-    setResolution([newSize.x, newSize.y]);
-    setSize(null);
-    setIsResizing(false);
-  };
-
-  window.addEventListener('mousemove', mouseMoveListener);
-  window.addEventListener('mouseup', mouseUpListener);
-
-  calculate(event);
-  setSize({ ...newSize });
-  setIsResizing(true);
-};
-
-export const ResizeHandles = ({
-  showResizeHandles,
-  on,
-  width,
-  height,
-  wrapper,
-  scale,
-  setResolution,
-  widthAndHeightResizer,
-  widthResizer,
-  heightResizer,
-  children,
-  setIsResizing,
-}: ResizeHandlesProps) => (
-  <Styled on={on} id="styled-resize-wrapper">
-    <div>
-      {showResizeHandles ? (
-        <>
-          <CornerResize
-            onMouseDown={event => {
-              resize(event, {
-                resolution: [width, height],
-                scale,
-                wrapper,
-                offset: 0,
-                initialMousePosition: { x: event.clientX, y: event.clientY },
-                resizer: widthAndHeightResizer,
-                setResolution,
-                setIsResizing,
-              });
-            }}
-            style={{
-              right: `calc(50% - ${(width * scale) / 2}px)`,
-              top: `calc(${height * scale + HANDLE_OFFSET}px)`,
-            }}
-          />
-          <WidthResize
-            onMouseDown={event => {
-              resize(event, {
-                resolution: [width, height],
-                scale,
-                wrapper,
-                offset: HANDLE_OFFSET,
-                initialMousePosition: { x: event.clientX },
-                resizer: widthResizer,
-                setResolution,
-                setIsResizing,
-              });
-            }}
-            style={{
-              right: `calc(50% - ${HANDLE_OFFSET}px - ${
-                (width * scale) / 2
-              }px)`,
-              top: `calc(${(height / 2) * scale - 8}px)`,
-            }}
-          />
-          <HeightResize
-            onMouseDown={event => {
-              resize(event, {
-                resolution: [width, height],
-                wrapper,
-                scale,
-                offset: HANDLE_OFFSET,
-                initialMousePosition: { y: event.clientY },
-                resizer: heightResizer,
-                setResolution,
-                setIsResizing,
-              });
-            }}
-            style={{
-              top: `calc(${height * scale + HANDLE_OFFSET * 3}px)`,
-            }}
-          />
-        </>
-      ) : null}
-      <ResizeWrapper
-        style={
-          on
-            ? {
-                width,
-                height,
-                left: `calc(50% - ${width / 2}px)`,
-                top: HANDLE_OFFSET * 2,
-                transform: `scale(${scale})`,
-              }
-            : null
-        }
-      >
-        {widthAndHeightResizer[0] || widthResizer[0] || heightResizer[0] ? (
-          <Cover />
-        ) : null}
-        {children}
-      </ResizeWrapper>
-    </div>
-  </Styled>
-);
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Content/Preview/ResponsiveWrapper/elements.tsx b/packages/app/src/app/pages/Sandbox/Editor/Content/Preview/ResponsiveWrapper/elements.tsx
deleted file mode 100644
index bda0e9a1c52..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Content/Preview/ResponsiveWrapper/elements.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import React from 'react';
-import styled, { css } from 'styled-components';
-import { Element } from '@codesandbox/components';
-import { ResizeIcon } from './Icons';
-
-export const MIN_SIZE_X = 72;
-
-export const MIN_SIZE_Y = 130;
-
-export const PADDING_OFFSET_X = 30;
-
-export const PADDING_OFFSET_Y = 30;
-
-export const Styled = styled(({ on: _, ...props }) => <Element {...props} />)<{
-  on: boolean;
-  theme: any;
-}>`
-  height: 100%;
-
-  > div {
-    overflow: auto;
-    margin: auto;
-    background: ${props => props.theme['input.background']};
-    height: 100%;
-    position: relative;
-  }
-
-  ${props =>
-    props.on
-      ? css`
-          iframe {
-            border-radius: 2px;
-            box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.24),
-              0px 8px 4px rgba(0, 0, 0, 0.12);
-          }
-        `
-      : null}
-
-  > div > span {
-    min-width: 70px;
-    min-height: 130px;
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: block;
-  }
-`;
-
-export const Wrapper = styled(Element)`
-  background: ${props => props.theme['sideBar.background']};
-
-  input::-webkit-outer-spin-button,
-  input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-
-  input[type='number'] {
-    width: 50px;
-    -moz-appearance: textfield;
-  }
-`;
-
-export const ResizeWrapper = styled.span`
-  position: relative;
-  width: 100%;
-  height: 100%;
-  transform-origin: top;
-`;
-
-export const CornerResize = styled(ResizeIcon)`
-  position: absolute;
-  bottom: -0;
-  right: 0;
-  cursor: nwse-resize;
-  z-index: 2;
-`;
-
-const sizeResize = css`
-  position: absolute;
-  border-radius: 50px;
-  opacity: 0.6;
-  background-color: ${props => props.theme['sideBar.foreground']};
-
-  z-index: 2;
-  user-select: none;
-  transition: opacity 200ms ease;
-
-  :hover {
-    opacity: 1;
-  }
-`;
-
-export const WidthResize = styled(Element)`
-  width: 4px;
-  height: 41px;
-  cursor: ew-resize;
-  ${sizeResize}
-`;
-
-export const HeightResize = styled(Element)`
-  left: calc(50% - 20.5px);
-  width: 41px;
-  height: 4px;
-  cursor: ns-resize;
-  ${sizeResize}
-`;
-
-export const Cover = styled.div`
-  position: absolute;
-  z-index: 1;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  user-select: none;
-`;
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Content/Preview/ResponsiveWrapper/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Content/Preview/ResponsiveWrapper/index.tsx
deleted file mode 100644
index 3af43835117..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Content/Preview/ResponsiveWrapper/index.tsx
+++ /dev/null
@@ -1,254 +0,0 @@
-import {
-  Stack,
-  Text,
-  Button,
-  Input,
-  ThemeProvider,
-  IconButton,
-} from '@codesandbox/components';
-import ResizeObserver from 'resize-observer-polyfill';
-import track from '@codesandbox/common/lib/utils/analytics';
-import css from '@styled-system/css';
-import { json } from 'overmind';
-import React, { useEffect, useState } from 'react';
-import { isEqual } from 'lodash-es';
-
-import { useTheme } from 'styled-components';
-import { useAppState, useActions } from 'app/overmind';
-import { hasPermission } from '@codesandbox/common/lib/utils/permission';
-import { SwitchIcon } from './Icons';
-import { ResponsiveWrapperProps } from './types';
-import { PresetMenu } from './PresetMenu';
-import {
-  Wrapper,
-  PADDING_OFFSET_X,
-  PADDING_OFFSET_Y,
-  MIN_SIZE_X,
-  MIN_SIZE_Y,
-} from './elements';
-import { ResizeHandles } from './ResizeHandles';
-import { PreviewCommentWrapper } from './PreviewCommentWrapper';
-
-export const ResponsiveWrapper = ({ children }: ResponsiveWrapperProps) => {
-  const {
-    preview: {
-      responsive: { resolution, scale: stateScale, presets },
-      mode,
-    },
-    editor,
-  } = useAppState();
-  const {
-    checkURLParameters,
-    openDeletePresetModal,
-    openAddPresetModal,
-    setResolution,
-    toggleEditPresets,
-    setIsResizing
-  } = useActions().preview;
-
-  const theme = useTheme();
-  const canChangePresets = hasPermission(
-    editor.currentSandbox!.authorization,
-    'write_code'
-  );
-  const on = mode === 'responsive' || mode === 'responsive-add-comment';
-
-  const element = document.getElementById('styled-resize-wrapper');
-  const [wrapperWidth, setWrapperWidth] = useState(
-    element?.getBoundingClientRect().width
-  );
-  const [wrapperHeight, setWrapperHeight] = useState(
-    element?.getBoundingClientRect().height
-  );
-  const widthAndHeightResizer = useState<{ x: number; y: number } | null>(null);
-  const widthResizer = useState<{ x: number } | null>(null);
-  const heightResizer = useState<{ y: number } | null>(null);
-  const [resolutionWidth, resolutionHeight] = resolution;
-
-  const minScaleResolutionWidth = Math.max(
-    resolutionWidth || MIN_SIZE_X,
-    MIN_SIZE_X
-  );
-  const minScaleResolutionHeight = Math.max(
-    resolutionHeight || MIN_SIZE_Y,
-    MIN_SIZE_Y
-  );
-
-  const minResolutionWidth = Math.max(
-    widthResizer[0]?.x ||
-      widthAndHeightResizer[0]?.x ||
-      resolutionWidth ||
-      MIN_SIZE_X,
-    MIN_SIZE_X
-  );
-  const minResolutionHeight = Math.max(
-    heightResizer[0]?.y ||
-      widthAndHeightResizer[0]?.y ||
-      resolutionHeight ||
-      MIN_SIZE_Y,
-    MIN_SIZE_Y
-  );
-
-  let scale = stateScale / 100;
-
-  const hasHeightMostSpace =
-    wrapperWidth - resolutionWidth < wrapperHeight - resolutionHeight;
-
-  if (hasHeightMostSpace && minScaleResolutionWidth > wrapperWidth) {
-    scale = (wrapperWidth - PADDING_OFFSET_X) / minScaleResolutionWidth;
-  } else if (minScaleResolutionHeight > wrapperHeight) {
-    scale = (wrapperHeight - PADDING_OFFSET_Y) / minScaleResolutionHeight;
-  }
-
-  useEffect(() => {
-    let observer;
-    if (element) {
-      observer = new ResizeObserver(entries => {
-        entries.map(entry => {
-          if (entry.contentRect) {
-            const sizes = entry.contentRect;
-
-            setWrapperWidth(sizes.width - PADDING_OFFSET_X);
-            setWrapperHeight(sizes.height - PADDING_OFFSET_Y);
-          }
-
-          return null;
-        });
-      });
-      observer.observe(element);
-    }
-    return () => (observer ? observer.disconnect() : null);
-  }, [element]);
-
-  const exists = Boolean(
-    Object.keys(presets).find(preset => isEqual(resolution, presets[preset]))
-  );
-
-  useEffect(() => {
-    checkURLParameters();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return (
-    // @ts-ignore
-    <ThemeProvider theme={theme.vscodeTheme}>
-      <Wrapper paddingX={6} css={css({ display: on ? 'block' : 'none' })}>
-        <Stack justify="center" paddingY={2} align="center" gap={2}>
-          <Stack gap={2} align="center">
-            {exists ? (
-              <IconButton
-                title="Remove Preset"
-                name="close"
-                onClick={openDeletePresetModal}
-              />
-            ) : null}
-            {!exists ? (
-              <IconButton
-                disabled={
-                  isNaN(resolutionWidth) ||
-                  resolutionWidth < MIN_SIZE_X ||
-                  isNaN(resolutionHeight) ||
-                  resolutionHeight < MIN_SIZE_Y
-                }
-                title="Add Preset"
-                name="add"
-                onClick={openAddPresetModal}
-              />
-            ) : null}
-            <Stack align="center" gap={1}>
-              <Text style={{ userSelect: 'none' }} size={3}>
-                <Input
-                  type="number"
-                  css={css({
-                    height: 20,
-                    paddingRight: 0,
-                    '::-webkit-inner-spin-button': { padding: '12px 0' },
-                  })}
-                  value={
-                    isNaN(resolutionWidth)
-                      ? ''
-                      : widthResizer[0]?.x ||
-                        widthAndHeightResizer[0]?.x ||
-                        resolutionWidth
-                  }
-                  onChange={e =>
-                    setResolution([
-                      parseInt(e.target.value, 10),
-                      resolutionHeight,
-                    ])
-                  }
-                />{' '}
-              </Text>
-              <Button
-                css={css({ padding: 0 })}
-                variant="link"
-                autoWidth
-                onClick={() =>
-                  setResolution(json(resolution).reverse() as [number, number])
-                }
-              >
-                <SwitchIcon color={theme['sideBar.foreground']} />
-              </Button>{' '}
-              <Input
-                onChange={e =>
-                  setResolution([resolutionWidth, parseInt(e.target.value, 10)])
-                }
-                type="number"
-                css={css({
-                  height: 20,
-                  paddingRight: 0,
-                  '::-webkit-inner-spin-button': { padding: '12px 0' },
-                })}
-                value={
-                  isNaN(resolutionHeight)
-                    ? ''
-                    : heightResizer[0]?.y ||
-                      widthAndHeightResizer[0]?.y ||
-                      resolutionHeight
-                }
-              />
-            </Stack>
-            <Text size={3}>
-              (
-              {Math.ceil(scale * 100) === 100
-                ? '1x'
-                : `${(Math.ceil(scale * 100) / 100).toFixed(2)}x`}
-              )
-            </Text>
-          </Stack>
-          <PresetMenu
-            openEditPresets={toggleEditPresets}
-            onSelect={preset => {
-              track('Responsive Preview - Preset Changed', {
-                width: preset[0],
-                height: preset[1],
-              });
-              setResolution(preset);
-            }}
-            theme={theme}
-            resolution={resolution}
-            presets={presets}
-            canChangePresets={canChangePresets}
-          />
-        </Stack>
-      </Wrapper>
-      <ResizeHandles
-        on={on}
-        showResizeHandles={mode === 'responsive'}
-        width={minResolutionWidth}
-        height={minResolutionHeight}
-        wrapper={element as any}
-        scale={scale}
-        setResolution={setResolution}
-        widthAndHeightResizer={widthAndHeightResizer}
-        widthResizer={widthResizer}
-        heightResizer={heightResizer}
-        setIsResizing={setIsResizing}
-      >
-        <PreviewCommentWrapper scale={on ? scale : 1}>
-          {children}
-        </PreviewCommentWrapper>
-      </ResizeHandles>
-    </ThemeProvider>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Content/Preview/ResponsiveWrapper/types.ts b/packages/app/src/app/pages/Sandbox/Editor/Content/Preview/ResponsiveWrapper/types.ts
deleted file mode 100644
index 7762d72f7ae..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Content/Preview/ResponsiveWrapper/types.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export type ResponsiveWrapperProps = {
-  children?: any;
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Content/Preview/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Content/Preview/elements.ts
deleted file mode 100644
index 575c2107fc5..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Content/Preview/elements.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-import styled from 'styled-components';
-import fadeIn from '@codesandbox/common/lib/utils/animation/fade-in';
-
-const Resizer = styled.div`
-  position: absolute;
-  z-index: 20;
-`;
-
-const width = 8;
-
-export const TopResizer = styled(Resizer)`
-  top: -${width / 2}px;
-  height: ${width}px;
-  left: 0;
-  right: 0;
-  cursor: ns-resize;
-`;
-
-export const RightResizer = styled(Resizer)`
-  top: 0;
-  bottom: 0;
-  width: ${width}px;
-  right: -${width / 2}px;
-  cursor: ew-resize;
-`;
-
-export const BottomResizer = styled(Resizer)`
-  bottom: -${width / 2}px;
-  height: ${width}px;
-  left: 0;
-  right: 0;
-  cursor: ns-resize;
-`;
-
-export const LeftResizer = styled(Resizer)`
-  top: 0;
-  bottom: 0;
-  width: ${width}px;
-  left: -${width / 2}px;
-  cursor: ew-resize;
-`;
-
-export const NEResizer = styled(Resizer)`
-  top: -${width / 2}px;
-  right: -${width / 2}px;
-  width: ${width * 2}px;
-  height: ${width * 2}px;
-  cursor: nesw-resize;
-`;
-
-export const SEResizer = styled(Resizer)`
-  bottom: -${width / 2}px;
-  right: -${width / 2}px;
-  width: ${width * 2}px;
-  height: ${width * 2}px;
-  cursor: nwse-resize;
-`;
-
-export const SWResizer = styled(Resizer)`
-  bottom: -${width / 2}px;
-  left: -${width / 2}px;
-  width: ${width * 2}px;
-  height: ${width * 2}px;
-  cursor: nesw-resize;
-`;
-
-export const NWResizer = styled(Resizer)`
-  top: -${width / 2}px;
-  left: -${width / 2}px;
-  width: ${width * 2}px;
-  height: ${width * 2}px;
-  cursor: nwse-resize;
-`;
-
-export const ResizingNotice = styled.div`
-  position: absolute;
-  right: 1rem;
-  bottom: 1rem;
-
-  background-color: rgba(0, 0, 0, 0.7);
-  color: white;
-  font-size: 1.125rem;
-  padding: 0.5rem 1rem;
-
-  border-radius: 2px;
-  ${fadeIn(0)};
-`;
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Content/Preview/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Content/Preview/index.tsx
deleted file mode 100644
index ed09167523e..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Content/Preview/index.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-import { ServerContainerStatus } from '@codesandbox/common/lib/types';
-import BasePreview from '@codesandbox/common/lib/components/Preview';
-import { frameUrl } from '@codesandbox/common/lib/utils/url-generator';
-import RunOnClick from '@codesandbox/common/lib/components/RunOnClick';
-
-import React, { FunctionComponent, useState } from 'react';
-import { useAppState, useActions, useEffects } from 'app/overmind';
-
-import { ResponsiveWrapper } from './ResponsiveWrapper';
-import { InstallExtensionBanner } from './ResponsiveWrapper/InstallExtensionBanner';
-
-type Props = {
-  hidden?: boolean;
-  options: {
-    url?: string;
-    port?: number;
-  };
-  runOnClick?: boolean;
-};
-export const Preview: FunctionComponent<Props> = ({
-  hidden,
-  options,
-  runOnClick,
-}) => {
-  const {
-    preview: previewActions,
-    editor: { errorsCleared, previewActionReceived, projectViewToggled },
-  } = useActions();
-  const {
-    preview,
-    editor: {
-      currentModule,
-      currentSandbox,
-      initialPath,
-      isInProjectView,
-      isResizing,
-      previewWindowVisible,
-    },
-    preferences: { settings },
-    server: { containerStatus, error, hasUnrecoverableError },
-  } = useAppState();
-  const {
-    preview: { initializePreview, canAddComments },
-    browser,
-  } = useEffects();
-  const [running, setRunning] = useState(!runOnClick);
-
-  /**
-   * Responsible for showing a message when something is happening with SSE. Only used
-   * for server sandboxes right now, but we can extend it in the future. It would require
-   * a better design if we want to use it for more though.
-   */
-  const getOverlayMessage = () => {
-    if (containerStatus === ServerContainerStatus.HIBERNATED) {
-      return 'The container has been hibernated because of inactivity, you can start it by refreshing the browser.';
-    }
-
-    if (containerStatus === ServerContainerStatus.STOPPED) {
-      return 'Restarting the sandbox...';
-    }
-
-    if (error && hasUnrecoverableError) {
-      return 'A sandbox error occurred, you can refresh the page to restart the container.';
-    }
-
-    return undefined;
-  };
-
-  // Only show in chromium browsers
-  const showBanner =
-    preview.showExtensionBanner && browser.isChromium(navigator.userAgent);
-
-  const content = running ? (
-    <BasePreview
-      currentModule={currentModule}
-      hide={hidden}
-      initialPath={initialPath}
-      isInProjectView={isInProjectView}
-      isResizing={isResizing}
-      onAction={previewActionReceived}
-      onClearErrors={errorsCleared}
-      onMount={initializePreview}
-      noPreview={!previewWindowVisible}
-      onToggleProjectView={projectViewToggled}
-      Wrapper={ResponsiveWrapper}
-      isResponsivePreviewResizing={preview.responsive.isResizing}
-      isResponsiveModeActive={
-        preview.mode === 'responsive' ||
-        preview.mode === 'responsive-add-comment'
-      }
-      isPreviewCommentModeActive={
-        preview.mode === 'add-comment' ||
-        preview.mode === 'responsive-add-comment'
-      }
-      toggleResponsiveMode={previewActions.toggleResponsiveMode}
-      overlayMessage={getOverlayMessage()}
-      previewSecret={currentSandbox.previewSecret}
-      privacy={currentSandbox.privacy}
-      customNpmRegistries={currentSandbox.npmRegistries}
-      sandbox={currentSandbox}
-      settings={settings}
-      isScreenshotLoading={preview.screenshot.isLoading}
-      createPreviewComment={
-        canAddComments(currentSandbox) && previewActions.createPreviewComment
-      }
-      url={
-        options.url ||
-        (options.port
-          ? frameUrl(currentSandbox, undefined, { port: options.port })
-          : undefined)
-      }
-    />
-  ) : (
-    <RunOnClick onClick={() => setRunning(true)} />
-  );
-
-  return (
-    <>
-      {showBanner ? <InstallExtensionBanner /> : null}
-      {content}
-    </>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Content/Tabs/ConsoleIcon.js b/packages/app/src/app/pages/Sandbox/Editor/Content/Tabs/ConsoleIcon.js
deleted file mode 100644
index 1fa089a190a..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Content/Tabs/ConsoleIcon.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import Icon from 'react-icon-base';
-
-const Console = props => (
-  <Icon viewBox="0 0 200 200" {...props}>
-    <path
-      d="M83.912472,99.4035922 L55.308337,68.8127845 L45.8127845,77.691663 L67.3510442,100.725842 L45.8087366,121.604489 L54.8562061,130.939547 L85.5990628,101.143794 L83.912472,99.4035922 Z M27,33 L173,33 C178.522847,33 183,37.4771525 183,43 L183,157 C183,162.522847 178.522847,167 173,167 L27,167 C21.4771525,167 17,162.522847 17,157 L17,43 C17,37.4771525 21.4771525,33 27,33 Z M95,135.112698 L131,135.112698 L131,125.112698 L95,125.112698 L95,135.112698 Z"
-      id="Combined-Shape"
-      fill="inherit"
-    />
-  </Icon>
-);
-
-export default Console;
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Content/Tabs/PreviewIcon.js b/packages/app/src/app/pages/Sandbox/Editor/Content/Tabs/PreviewIcon.js
deleted file mode 100644
index d456c2de4ec..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Content/Tabs/PreviewIcon.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import Icon from 'react-icon-base';
-
-const Preview = props => (
-  <Icon viewBox="0 0 200 200" {...props}>
-    <path
-      d="M27,33 L173,33 C178.522847,33 183,37.4771525 183,43 L183,157 C183,162.522847 178.522847,167 173,167 L27,167 C21.4771525,167 17,162.522847 17,157 L17,43 C17,37.4771525 21.4771525,33 27,33 Z M29,64 L29,156 L171,156 L171,64 L29,64 Z M84.260356,82.6998802 L119.974518,107.161635 C121.797124,108.409995 122.262642,110.899505 121.014282,112.722111 C120.734924,113.129973 120.38238,113.482517 119.974518,113.761875 L84.260356,138.223629 C82.4377502,139.471989 79.9482404,139.006471 78.6998802,137.183866 C78.2439706,136.518238 78,135.730302 78,134.92351 L78,86 C78,83.790861 79.790861,82 82,82 C82.8067925,82 83.594728,82.2439706 84.260356,82.6998802 Z"
-      id="Combined-Shape"
-      fill="inherit"
-    />
-  </Icon>
-);
-
-export default Preview;
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Content/Tabs/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Content/Tabs/elements.ts
deleted file mode 100644
index ba42f955326..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Content/Tabs/elements.ts
+++ /dev/null
@@ -1,111 +0,0 @@
-import styled, { css } from 'styled-components';
-import PrettierIcon from 'react-icons/lib/md/brush';
-
-const HEIGHT = '35px';
-
-export const Container = styled.div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  display: flex;
-  height: ${HEIGHT};
-  flex: 0 0 ${HEIGHT};
-  color: ${props =>
-    props.theme.light ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.8)'};
-
-  background-color: ${({ theme }) =>
-    theme['editorGroupHeader.tabsBackground'] || theme.background4};
-`;
-
-export const TabsContainer = styled.div`
-  display: flex;
-  height: ${HEIGHT};
-  flex: 1 0 ${HEIGHT};
-
-  overflow-x: auto;
-  overflow-y: hidden;
-
-  -ms-overflow-style: none;
-
-  &::-webkit-scrollbar {
-    height: 2px;
-  }
-`;
-
-interface IStyledPrettierIconProps {
-  disabled?: boolean;
-}
-export const StyledPrettierIcon = styled(PrettierIcon)`
-  transition: 0.3s ease opacity;
-  width: 1.125rem;
-  height: 1.125rem;
-  cursor: pointer;
-
-  padding-right: 0.5rem;
-
-  opacity: 0.6;
-
-  &:hover {
-    opacity: 1;
-  }
-
-  ${(props: IStyledPrettierIconProps) =>
-    props.disabled &&
-    css`
-      opacity: 0;
-      pointer-events: none;
-    `};
-`;
-
-export const IconContainer = styled.div`
-  display: flex;
-  align-items: center;
-  float: right;
-  flex-shrink: 1;
-  padding: 0 0.75rem;
-`;
-
-export const Line = styled.div`
-  height: 12px;
-  width: 1px;
-
-  background-color: ${props =>
-    props.theme['editorGroupHeader.tabsBorder'] || 'rgba(255, 255, 255, 0.3)'};
-`;
-
-interface IIconWrapperProps {
-  active?: boolean;
-  disabled?: boolean;
-  theme: any;
-}
-export const IconWrapper = styled.div`
-  svg {
-    transition: 0.3s ease opacity;
-    width: 1.25rem;
-    height: 1.25rem;
-    cursor: pointer;
-
-    opacity: 0.6;
-
-    padding-left: 0.5rem;
-
-    &:hover {
-      opacity: 1;
-    }
-
-    ${(props: IIconWrapperProps) =>
-      props.active &&
-      css`
-        opacity: 1;
-        color: ${props.theme['editor.foreground'] || 'white'};
-      `};
-
-    ${props =>
-      props.disabled &&
-      css`
-        opacity: 0;
-        pointer-events: none;
-      `};
-  }
-`;
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Content/Tabs/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Content/Tabs/index.tsx
deleted file mode 100644
index a0a71287f29..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Content/Tabs/index.tsx
+++ /dev/null
@@ -1,227 +0,0 @@
-import React, { useEffect } from 'react';
-import { useAppState, useActions } from 'app/overmind';
-import Tooltip from '@codesandbox/common/lib/components/Tooltip';
-import TabContainer from './TabContainer';
-import PreviewIcon from './PreviewIcon';
-
-import {
-  Container,
-  TabsContainer,
-  IconContainer,
-  StyledPrettierIcon,
-  IconWrapper,
-  Line,
-} from './elements';
-
-import ModuleTab from './ModuleTab';
-
-interface IEditorTabsProps {
-  currentModuleId: string | number;
-}
-
-export const EditorTabs: React.FunctionComponent<IEditorTabsProps> = ({
-  currentModuleId,
-}) => {
-  const editorState = useAppState().editor;
-  const editorAction = useActions().editor;
-
-  let container = null;
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const tabEls = {};
-
-  useEffect(() => {
-    const currentTab = tabEls[currentModuleId] as ModuleTab;
-
-    // We need to scroll to the tab
-    if (currentTab && container) {
-      const { width } = container.getBoundingClientRect();
-      const scroll = container.scrollLeft;
-      const { left } = currentTab.getBoundingClientRect();
-
-      if (left > scroll && left < scroll + width) {
-        // if it's already in view
-        return;
-      }
-
-      currentTab.scrollIntoView(false);
-    }
-  }, [container, currentModuleId, tabEls]);
-
-  const closeTab = tabIndex => {
-    editorAction.tabClosed(tabIndex);
-  };
-
-  const moveTab = (prevIndex, nextIndex) => {
-    editorAction.tabMoved({ prevIndex, nextIndex });
-  };
-
-  /**
-   * Mark all tabs not dirty (not cursive)
-   */
-  const markNotDirty = () => {
-    editorAction.moduleDoubleClicked();
-  };
-
-  const setCurrentModule = moduleId => {
-    editorAction.moduleSelected({ id: moduleId });
-  };
-
-  const discardModuleChanges = moduleShortid => {
-    editorAction.discardModuleChanges({ moduleShortid });
-  };
-
-  const prettifyModule = () => {
-    /*
-      This no longer exists
-
-    editorAction.prettifyClicked({
-      moduleShortid: editorState.currentModuleShortid,
-    });
-    */
-  };
-
-  const canPrettify = module => {
-    if (!module) {
-      return false;
-    }
-
-    return canPrettify(module.title);
-  };
-
-  const sandbox = editorState.currentSandbox;
-  const moduleObject = {};
-  // We keep this object to keep track if there are duplicate titles.
-  // In that case we need to show which directory the module is in.
-  const tabNamesObject = {};
-
-  sandbox.modules.forEach(m => {
-    moduleObject[m.shortid] = m;
-  });
-
-  (editorState.tabs.filter(tab => tab.type === 'MODULE') as ModuleTab[])
-    .filter(tab => moduleObject[tab.moduleShortid])
-    .forEach(tab => {
-      const module = moduleObject[tab.moduleShortid];
-
-      tabNamesObject[module.title] = tabNamesObject[module.title] || [];
-      tabNamesObject[module.title].push(module.shortid);
-    });
-
-  const currentTab = editorState.currentTab as ModuleTab;
-  const { currentModule } = editorState;
-
-  const previewVisible = editorState.previewWindowVisible;
-
-  return (
-    <Container>
-      <TabsContainer
-        ref={el => {
-          container = el;
-        }}
-      >
-        {(editorState.tabs as ModuleTab[])
-          .map(tab => ({ ...tab, module: moduleObject[tab.moduleShortid] }))
-          .map((tab, i) => {
-            if (tab.type === 'MODULE') {
-              if (tab.module == null) {
-                return null;
-              }
-
-              const { module } = tab;
-              const modulesWithName = tabNamesObject[module.title];
-              const { id } = tab.module;
-              let dirName = null;
-
-              if (
-                modulesWithName.length > 1 &&
-                module.directoryShortid != null
-              ) {
-                const dir = sandbox.directories.find(
-                  d =>
-                    d.shortid === module.directoryShortid &&
-                    d.sourceId === module.sourceId
-                );
-
-                if (dir) {
-                  dirName = dir.title;
-                }
-              }
-
-              return (
-                <ModuleTab
-                  setCurrentModule={setCurrentModule}
-                  discardModuleChanges={discardModuleChanges}
-                  active={
-                    currentTab && currentTab.moduleShortid === tab.moduleShortid
-                  }
-                  key={id}
-                  module={tab.module}
-                  hasError={Boolean(
-                    editorState.errors.filter(
-                      error => (error as any).moduleId === id
-                    ).length
-                  )}
-                  closeTab={closeTab}
-                  moveTab={moveTab}
-                  markNotDirty={markNotDirty}
-                  dirName={dirName}
-                  tabCount={editorState.tabs.length}
-                  position={i}
-                  dirty={tab.dirty}
-                  isNotSynced={Boolean(
-                    editorState.changedModuleShortids.includes(
-                      tab.module.shortid
-                    )
-                  )}
-                  ref={el => {
-                    tabEls[id] = el;
-                  }}
-                />
-              );
-            }
-            if (tab.type === 'DIFF') {
-              return (
-                <TabContainer
-                  active={currentTab && currentTab.id === tab.id}
-                  key={tab.id}
-                  onClick={() =>
-                    editorAction.currentTabChanged({ tabId: tab.id })
-                  }
-                  closeTab={closeTab}
-                  moveTab={moveTab}
-                  tabCount={editorState.tabs.length}
-                  position={i}
-                  dirty={tab.dirty}
-                  ref={el => {
-                    tabEls[tab.id] = el;
-                  }}
-                  title={`Diff: ${tab.titleA} - ${tab.titleB}`}
-                />
-              );
-            }
-
-            return null;
-          })}
-      </TabsContainer>
-
-      <IconContainer>
-        <Tooltip
-          style={{ display: 'inline-flex', alignItems: 'center' }}
-          content="Prettify"
-        >
-          <StyledPrettierIcon
-            disabled={!canPrettify(currentModule)}
-            onClick={prettifyModule}
-          />
-        </Tooltip>
-        <Line />
-
-        <Tooltip content={previewVisible ? 'Hide Browser' : 'Show Browser'}>
-          <IconWrapper active={previewVisible}>
-            <PreviewIcon onClick={() => editorAction.togglePreviewContent()} />
-          </IconWrapper>
-        </Tooltip>
-      </IconContainer>
-    </Container>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Content/Tabs/preview.svg b/packages/app/src/app/pages/Sandbox/Editor/Content/Tabs/preview.svg
deleted file mode 100644
index 57eabe77774..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Content/Tabs/preview.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<svg viewBox="0 0 200 200">
-  <path
-    d="M27,33 L173,33 C178.522847,33 183,37.4771525 183,43 L183,157 C183,162.522847 178.522847,167 173,167 L27,167 C21.4771525,167 17,162.522847 17,157 L17,43 C17,37.4771525 21.4771525,33 27,33 Z M29,64 L29,156 L171,156 L171,64 L29,64 Z M84.260356,82.6998802 L119.974518,107.161635 C121.797124,108.409995 122.262642,110.899505 121.014282,112.722111 C120.734924,113.129973 120.38238,113.482517 119.974518,113.761875 L84.260356,138.223629 C82.4377502,139.471989 79.9482404,139.006471 78.6998802,137.183866 C78.2439706,136.518238 78,135.730302 78,134.92351 L78,86 C78,83.790861 79.790861,82 82,82 C82.8067925,82 83.594728,82.2439706 84.260356,82.6998802 Z"
-    id="Combined-Shape"
-    fill="inherit"
-  />
-</svg>
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Content/__snapshots__/utils.test.ts.snap b/packages/app/src/app/pages/Sandbox/Editor/Content/__snapshots__/utils.test.ts.snap
deleted file mode 100644
index 17a5fd95fc4..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Content/__snapshots__/utils.test.ts.snap
+++ /dev/null
@@ -1,174 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`addDevToolsTab can add a tab 1`] = `
-{
-  "devTools": [
-    {
-      "views": [
-        {
-          "id": "codesandbox.browser",
-        },
-        {
-          "id": "codesandbox.tests",
-        },
-        {
-          "id": "codesandbox.browser",
-        },
-      ],
-    },
-  ],
-  "position": {
-    "devToolIndex": 0,
-    "tabPosition": 2,
-  },
-}
-`;
-
-exports[`addDevToolsTab can add a tab on specific position 1`] = `
-{
-  "devTools": [
-    {
-      "views": [
-        {
-          "id": "codesandbox.tests",
-        },
-        {
-          "id": "codesandbox.browser",
-        },
-        {
-          "id": "codesandbox.tests",
-        },
-      ],
-    },
-  ],
-  "position": {
-    "devToolIndex": 0,
-    "tabPosition": 0,
-  },
-}
-`;
-
-exports[`moveDevToolsTab can move a tab from one devtools to the other 1`] = `
-[
-  {
-    "views": [
-      {
-        "id": "codesandbox.tests",
-      },
-    ],
-  },
-  {
-    "views": [
-      {
-        "id": "codesandbox.console",
-      },
-      {
-        "id": "codesandbox.browser",
-      },
-      {
-        "id": "codesandbox.problems",
-      },
-    ],
-  },
-]
-`;
-
-exports[`moveDevToolsTab can move a tab from one devtools to the other and move it back 1`] = `
-[
-  {
-    "views": [
-      {
-        "id": "codesandbox.browser",
-      },
-      {
-        "id": "codesandbox.tests",
-      },
-    ],
-  },
-  {
-    "views": [
-      {
-        "id": "codesandbox.console",
-      },
-      {
-        "id": "codesandbox.problems",
-      },
-    ],
-  },
-]
-`;
-
-exports[`moveDevToolsTab can move a tab in same devtools 1`] = `
-[
-  {
-    "views": [
-      {
-        "id": "codesandbox.tests",
-      },
-      {
-        "id": "codesandbox.browser",
-      },
-    ],
-  },
-  {
-    "views": [
-      {
-        "id": "codesandbox.console",
-      },
-      {
-        "id": "codesandbox.problems",
-      },
-    ],
-  },
-]
-`;
-
-exports[`moveDevToolsTab can move a tab in same devtools and move the tab back 1`] = `
-[
-  {
-    "views": [
-      {
-        "id": "codesandbox.browser",
-      },
-      {
-        "id": "codesandbox.tests",
-      },
-    ],
-  },
-  {
-    "views": [
-      {
-        "id": "codesandbox.console",
-      },
-      {
-        "id": "codesandbox.problems",
-      },
-    ],
-  },
-]
-`;
-
-exports[`moveDevToolsTab can move the tab to the same position 1`] = `
-[
-  {
-    "views": [
-      {
-        "id": "codesandbox.browser",
-      },
-      {
-        "id": "codesandbox.tests",
-      },
-    ],
-  },
-  {
-    "views": [
-      {
-        "id": "codesandbox.console",
-      },
-      {
-        "id": "codesandbox.problems",
-      },
-    ],
-  },
-]
-`;
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Content/elements.js b/packages/app/src/app/pages/Sandbox/Editor/Content/elements.js
deleted file mode 100644
index 5dbdd8442f7..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Content/elements.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import styled from 'styled-components';
-import fadeIn from '@codesandbox/common/lib/utils/animation/fade-in';
-
-export const FullSize = styled.div`
-  height: 100%;
-  width: 100%;
-
-  ${fadeIn(0)};
-  display: flex;
-  flex-direction: column;
-
-  background-color: ${props =>
-    props.theme['editor.background'] || 'transparent'};
-`;
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Content/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Content/index.tsx
deleted file mode 100644
index ea6963dbd2b..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Content/index.tsx
+++ /dev/null
@@ -1,272 +0,0 @@
-import getTemplateDefinition from '@codesandbox/common/lib/templates';
-import { BACKTICK } from '@codesandbox/common/lib/utils/keycodes';
-import { VSCode as CodeEditor } from 'app/components/CodeEditor/VSCode';
-import { DevTools } from 'app/components/Preview/DevTools';
-import { terminalUpgrade } from 'app/components/Preview/DevTools/TerminalUpgrade';
-import { useActions, useReaction, useEffects, useAppState } from 'app/overmind';
-import useKey from 'react-use/lib/useKey';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import SplitPane from 'react-split-pane';
-import { ThemeProvider } from 'styled-components';
-
-import preventGestureScroll, { removeListener } from './prevent-gesture-scroll';
-import { Preview } from './Preview';
-import { EditorToast } from './EditorToast';
-
-export const MainWorkspace: React.FC<{ theme: any }> = ({ theme }) => {
-  const state = useAppState();
-  const actions = useActions();
-  const effects = useEffects();
-  const reaction = useReaction();
-  const editorEl = useRef(null);
-  const contentEl = useRef(null);
-  const [showConsoleDevtool, setShowConsoleDevtool] = useState(false);
-  const [consoleDevtoolIndex, setConsoleDevtoolIndex] = useState(-1);
-
-  const updateEditorSize = useCallback(
-    function updateEditorSize() {
-      if (editorEl.current) {
-        const { width, height } = editorEl.current.getBoundingClientRect();
-        effects.vscode.updateLayout(width, height);
-      }
-    },
-    [effects.vscode]
-  );
-
-  useEffect(() => {
-    const contentNode = contentEl.current;
-
-    const disposeResizeDetector = reaction(
-      ({ preferences, workspace, editor }) => [
-        preferences.settings.zenMode,
-        workspace.workspaceHidden,
-        editor.previewWindowOrientation,
-      ],
-      () => {
-        updateEditorSize();
-      },
-      {
-        immediate: true,
-      }
-    );
-
-    window.addEventListener('resize', updateEditorSize);
-
-    preventGestureScroll(contentEl.current);
-
-    actions.editor.contentMounted();
-
-    return () => {
-      window.removeEventListener('resize', updateEditorSize);
-      // clearInterval(this.interval);
-      disposeResizeDetector();
-      removeListener(contentNode);
-    };
-  }, [actions.editor, effects.vscode, reaction, updateEditorSize]);
-
-  const views = state.editor.devToolTabs;
-
-  useEffect(() => {
-    setConsoleDevtoolIndex(() =>
-      views.findIndex(
-        ({ views: panes }) =>
-          panes.findIndex(pane => pane.id === 'codesandbox.console') !== -1
-      )
-    );
-  }, [views]);
-
-  useKey(
-    e => e.ctrlKey && e.keyCode === BACKTICK,
-    e => {
-      e.preventDefault();
-      setShowConsoleDevtool(value => !value);
-    },
-    {},
-    []
-  );
-
-  const sandbox = state.editor.currentSandbox;
-  const { preferences } = state;
-  const windowVisible = state.editor.previewWindowVisible;
-  const template = sandbox && getTemplateDefinition(sandbox.template);
-  const currentPosition = state.editor.currentDevToolsPosition;
-
-  const browserConfig = {
-    id: 'codesandbox.browser',
-    title: options =>
-      options.port || options.title
-        ? `Browser (${options.title || `:${options.port}`})`
-        : `Browser`,
-    Content: ({ hidden, options }) => (
-      <Preview
-        options={options}
-        hidden={hidden}
-        runOnClick={state.preferences.runOnClick}
-      />
-    ),
-    actions: [],
-  };
-
-  return (
-    <ThemeProvider
-      theme={
-        template
-          ? {
-              templateColor: template.color,
-              templateBackgroundColor: template.backgroundColor,
-            }
-          : theme
-      }
-    >
-      <div
-        id="workbench.main.container"
-        className="monaco-workbench mac nopanel"
-        style={{
-          height: '100%',
-          width: '100%',
-          overflow: 'visible', // For VSCode Context Menu
-          display: 'flex',
-          flexDirection: 'column',
-          backgroundColor: 'transparent',
-        }}
-        ref={contentEl}
-      >
-        <SplitPane
-          maxSize={-100}
-          onDragFinished={props => {
-            actions.editor.resizingStopped();
-          }}
-          onDragStarted={() => {
-            actions.editor.resizingStarted();
-          }}
-          resizerStyle={state.editor.isLoading ? { display: 'none' } : null}
-          onChange={() => {
-            updateEditorSize();
-          }}
-          style={{
-            overflow: 'visible', // For VSCode Context Menu
-          }}
-          split={state.editor.previewWindowOrientation}
-          defaultSize="50%"
-          pane1Style={
-            windowVisible
-              ? {
-                  minWidth: 100,
-                }
-              : {
-                  width: '100%',
-                  minWidth: '100%',
-                  height: '100%',
-                  minHeight: '100%',
-                }
-          }
-          pane2Style={{
-            visibility: windowVisible ? 'visible' : 'hidden',
-            maxWidth: windowVisible ? '100%' : 0,
-            width: windowVisible ? '100%' : 0,
-            overflow: 'hidden',
-            zIndex: 0, // For VSCode hovers, beware this is also dynamically changed in PreviewTabs
-          }}
-        >
-          <div
-            ref={editorEl}
-            style={{
-              position: 'relative',
-              display: 'flex',
-              flex: 1,
-              height: '100%',
-              width: '100%',
-              marginTop: 0,
-            }}
-          >
-            <div
-              style={{
-                height: '100%',
-                width: '100%',
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                right: 0,
-                bottom: 0,
-              }}
-            >
-              <EditorToast />
-              {state.editor.isLoading ? null : <CodeEditor />}
-            </div>
-          </div>
-
-          <div
-            style={{
-              display: 'flex',
-              flexDirection: 'column',
-              height: '100%',
-            }}
-            id="csb-devtools" // used for tabs for highlighting
-          >
-            {sandbox &&
-              views.map((v, i) => {
-                // show console devtool if showConsoleDevtool is enabled and if it's in the current view(v)
-                const devToolsOpen =
-                  showConsoleDevtool && consoleDevtoolIndex === i;
-                const disableLogging =
-                  state.editor.parsedConfigurations?.sandbox?.parsed
-                    ?.disableLogging;
-
-                return (
-                  <DevTools
-                    // eslint-disable-next-line react/no-array-index-key
-                    key={i}
-                    devToolIndex={i}
-                    devToolsOpen={devToolsOpen}
-                    addedViews={{
-                      'codesandbox.browser': browserConfig,
-                      'codesandbox.terminalUpgrade': terminalUpgrade,
-                    }}
-                    setDragging={dragging => {
-                      if (dragging) {
-                        actions.editor.resizingStarted();
-                      } else {
-                        actions.editor.resizingStopped();
-                      }
-                    }}
-                    sandboxId={sandbox.id}
-                    template={sandbox.template}
-                    disableLogging={disableLogging}
-                    shouldExpandDevTools={state.preferences.showDevtools}
-                    zenMode={preferences.settings.zenMode}
-                    setDevToolsOpen={open => {
-                      actions.preferences.setDevtoolsOpen(open);
-
-                      if (
-                        consoleDevtoolIndex === i &&
-                        showConsoleDevtool !== open
-                      ) {
-                        setShowConsoleDevtool(open);
-                      }
-                    }}
-                    owned={sandbox.owned}
-                    primary={i === 0}
-                    viewConfig={v}
-                    moveTab={(prevPos, nextPos) => {
-                      actions.editor.onDevToolsTabMoved({ prevPos, nextPos });
-                    }}
-                    closeTab={pos => {
-                      actions.editor.onDevToolsTabClosed({ pos });
-                    }}
-                    currentDevToolIndex={currentPosition.devToolIndex}
-                    currentTabPosition={currentPosition.tabPosition}
-                    setPane={position =>
-                      actions.editor.onDevToolsPositionChanged({
-                        position,
-                      })
-                    }
-                    isOnEmbedPage={false}
-                  />
-                );
-              })}
-          </div>
-        </SplitPane>
-      </div>
-    </ThemeProvider>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Content/prevent-gesture-scroll.js b/packages/app/src/app/pages/Sandbox/Editor/Content/prevent-gesture-scroll.js
deleted file mode 100644
index 0ba47f77bd2..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Content/prevent-gesture-scroll.js
+++ /dev/null
@@ -1,31 +0,0 @@
-function preventScroll(event) {
-  // We don't want to scroll below zero or above the width and height
-  const maxX = this.scrollWidth - this.offsetWidth;
-  const maxY = this.scrollHeight - this.offsetHeight;
-
-  // If this event looks like it will scroll beyond the bounds of the element, prevent it and set the scroll to the boundary manually
-  if (
-    this.scrollLeft + event.deltaX < 0 ||
-    this.scrollLeft + event.deltaX > maxX ||
-    this.scrollTop + event.deltaY < 0 ||
-    this.scrollTop + event.deltaY > maxY
-  ) {
-    event.preventDefault();
-
-    // Manually set the scroll to the boundary
-    this.scrollLeft = Math.max(
-      0,
-      Math.min(maxX, this.scrollLeft + event.deltaX)
-    );
-    this.scrollTop = Math.max(0, Math.min(maxY, this.scrollTop + event.deltaY));
-  }
-}
-
-export function removeListener(element) {
-  element.removeEventListener('mousewheel', preventScroll);
-}
-
-export default function(element) {
-  // Add the event listener which gets triggered when using the trackpad
-  element.addEventListener('mousewheel', preventScroll, false);
-}
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Content/utils.test.ts b/packages/app/src/app/pages/Sandbox/Editor/Content/utils.test.ts
deleted file mode 100644
index 9bd1d668379..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Content/utils.test.ts
+++ /dev/null
@@ -1,98 +0,0 @@
-import { moveDevToolsTab, addDevToolsTab } from './utils';
-
-const BROWSER_FIXTURE = { id: 'codesandbox.browser' };
-const TESTS_FIXTURE = { id: 'codesandbox.tests' };
-const CONSOLE_FIXTURE = { id: 'codesandbox.console' };
-const PROBLEMS_FIXTURE = { id: 'codesandbox.problems' };
-
-describe('moveDevToolsTab', () => {
-  it('can move a tab in same devtools', () => {
-    const tabs = [
-      { views: [{ ...BROWSER_FIXTURE }, { ...TESTS_FIXTURE }] },
-      { views: [{ ...CONSOLE_FIXTURE }, { ...PROBLEMS_FIXTURE }] },
-    ];
-    const newTabs = moveDevToolsTab(
-      tabs,
-      { devToolIndex: 0, tabPosition: 0 },
-      { devToolIndex: 0, tabPosition: 1 }
-    );
-
-    expect(newTabs).toMatchSnapshot();
-  });
-
-  it('can move a tab in same devtools and move the tab back', () => {
-    const tabs = [
-      { views: [{ ...BROWSER_FIXTURE }, { ...TESTS_FIXTURE }] },
-      { views: [{ ...CONSOLE_FIXTURE }, { ...PROBLEMS_FIXTURE }] },
-    ];
-    const from = { devToolIndex: 0, tabPosition: 0 };
-    const to = { devToolIndex: 0, tabPosition: 1 };
-    const newTabs = moveDevToolsTab(tabs, from, to);
-
-    expect(moveDevToolsTab(newTabs, to, from)).toMatchSnapshot();
-  });
-
-  it('can move the tab to the same position', () => {
-    const tabs = [
-      { views: [{ ...BROWSER_FIXTURE }, { ...TESTS_FIXTURE }] },
-      { views: [{ ...CONSOLE_FIXTURE }, { ...PROBLEMS_FIXTURE }] },
-    ];
-    const from = { devToolIndex: 0, tabPosition: 0 };
-    const to = { devToolIndex: 0, tabPosition: 0 };
-    const newTabs = moveDevToolsTab(tabs, from, to);
-
-    expect(newTabs).toMatchSnapshot();
-  });
-
-  it('can move a tab from one devtools to the other', () => {
-    const tabs = [
-      { views: [{ ...BROWSER_FIXTURE }, { ...TESTS_FIXTURE }] },
-      { views: [{ ...CONSOLE_FIXTURE }, { ...PROBLEMS_FIXTURE }] },
-    ];
-    const from = { devToolIndex: 0, tabPosition: 0 };
-    const to = { devToolIndex: 1, tabPosition: 1 };
-    const newTabs = moveDevToolsTab(tabs, from, to);
-
-    expect(newTabs).toMatchSnapshot();
-  });
-
-  it('can move a tab from one devtools to the other and move it back', () => {
-    const tabs = [
-      { views: [{ ...BROWSER_FIXTURE }, { ...TESTS_FIXTURE }] },
-      { views: [{ ...CONSOLE_FIXTURE }, { ...PROBLEMS_FIXTURE }] },
-    ];
-    const from = { devToolIndex: 0, tabPosition: 0 };
-    const to = { devToolIndex: 1, tabPosition: 1 };
-    const newTabs = moveDevToolsTab(tabs, from, to);
-
-    expect(moveDevToolsTab(newTabs, to, from)).toMatchSnapshot();
-  });
-
-  it('is immutable', () => {
-    const tabs = [
-      { views: [{ ...BROWSER_FIXTURE }, { ...TESTS_FIXTURE }] },
-      { views: [{ ...CONSOLE_FIXTURE }, { ...PROBLEMS_FIXTURE }] },
-    ];
-    const from = { devToolIndex: 0, tabPosition: 0 };
-    const to = { devToolIndex: 1, tabPosition: 1 };
-    const newTabs = moveDevToolsTab(tabs, from, to);
-
-    expect(newTabs).not.toBe(tabs);
-  });
-});
-
-describe('addDevToolsTab', () => {
-  it('can add a tab', () => {
-    const tabs = [{ views: [{ ...BROWSER_FIXTURE }, { ...TESTS_FIXTURE }] }];
-
-    expect(addDevToolsTab(tabs, BROWSER_FIXTURE)).toMatchSnapshot();
-  });
-
-  it('can add a tab on specific position', () => {
-    const tabs = [{ views: [{ ...BROWSER_FIXTURE }, { ...TESTS_FIXTURE }] }];
-
-    expect(
-      addDevToolsTab(tabs, TESTS_FIXTURE, { devToolIndex: 0, tabPosition: 0 })
-    ).toMatchSnapshot();
-  });
-});
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Content/utils.ts b/packages/app/src/app/pages/Sandbox/Editor/Content/utils.ts
deleted file mode 100644
index 73288d02323..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Content/utils.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import immer from 'immer';
-import {
-  ViewConfig,
-  ViewTab,
-} from '@codesandbox/common/lib/templates/template';
-import { DevToolsTabPosition } from '@codesandbox/common/lib/types';
-
-const isEqual = (prevPos: DevToolsTabPosition, nextPos: DevToolsTabPosition) =>
-  prevPos.devToolIndex === nextPos.devToolIndex &&
-  prevPos.tabPosition === nextPos.tabPosition;
-
-export function addDevToolsTab(
-  tabs: ViewConfig[],
-  newTab: ViewTab,
-  position?: DevToolsTabPosition
-) {
-  const positionToAdd: DevToolsTabPosition = position || {
-    devToolIndex: 0,
-    tabPosition: tabs[0].views.length,
-  };
-
-  return {
-    devTools: immer(tabs, draft => {
-      const devTools = draft[positionToAdd.devToolIndex];
-
-      devTools.views.splice(positionToAdd.tabPosition, 0, newTab);
-    }),
-    position: { ...positionToAdd, tabPosition: positionToAdd.tabPosition },
-  };
-}
-
-export function moveDevToolsTab(
-  tabs: ViewConfig[],
-  prevPos: DevToolsTabPosition,
-  nextPos: DevToolsTabPosition
-) {
-  if (isEqual(prevPos, nextPos)) {
-    return tabs;
-  }
-
-  // We want to do this immutable, to prevent conflicts while the file is changing
-  return immer(tabs, draft => {
-    const prevDevTools = draft[prevPos.devToolIndex];
-    const nextDevTools = draft[nextPos.devToolIndex];
-    const prevTab = draft[prevPos.devToolIndex].views[prevPos.tabPosition];
-
-    prevDevTools.views = prevDevTools.views.filter(
-      (_, i) => i !== prevPos.tabPosition
-    );
-
-    nextDevTools.views.splice(nextPos.tabPosition, 0, prevTab);
-
-    draft.map((t, i) => {
-      if (i === prevPos.devToolIndex) {
-        return prevDevTools;
-      }
-
-      if (i === nextPos.devToolIndex) {
-        return nextDevTools;
-      }
-
-      return t;
-    });
-  });
-}
-
-export function closeDevToolsTab(
-  tabs: ViewConfig[],
-  closePos: DevToolsTabPosition
-) {
-  // We want to do this immutable, to prevent conflicts while the file is changing
-  return immer(tabs, draft => {
-    const devTools = draft[closePos.devToolIndex];
-
-    devTools.views.splice(closePos.tabPosition, 1);
-  });
-}
diff --git a/packages/app/src/app/pages/Sandbox/Editor/FixedSignInBanner.tsx b/packages/app/src/app/pages/Sandbox/Editor/FixedSignInBanner.tsx
deleted file mode 100644
index c648164b3f1..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/FixedSignInBanner.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import React from 'react';
-
-import styled from 'styled-components';
-import { useActions, useAppState } from 'app/overmind';
-import { Text } from '@codesandbox/components';
-import css from '@styled-system/css';
-
-const Wrapper = styled.button`
-  width: 100%;
-  height: 40px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  background: ${({ theme }) => theme.colorsV2.yellowish[500]};
-  color: ${({ theme }) => theme.colors.black};
-
-  cursor: pointer;
-  border: 0;
-  padding: 0;
-  margin: 0;
-
-  transition: background 0.3s ease;
-
-  &:hover {
-    background: linear-gradient(
-        0deg,
-        rgba(255, 255, 255, 0.05),
-        rgba(255, 255, 255, 0.05)
-      ),
-      ${({ theme }) => theme.colorsV2.yellowish[500]};
-  }
-
-  * {
-    flex: 1;
-  }
-`;
-
-export const FixedSignInBanner: React.FC = () => {
-  const { signInClicked } = useActions();
-  const { sandboxesLimits } = useAppState();
-
-  if (!sandboxesLimits) return null;
-
-  return (
-    <Wrapper onClick={() => signInClicked()}>
-      <span />
-      <Text size={3} css={{ textAlign: 'center' }}>
-        Sign up for free to create unlimited sandboxes
-      </Text>
-      <Text size={2} css={css({ textAlign: 'right', paddingRight: 4 })}>
-        {sandboxesLimits.sandboxCount}/{sandboxesLimits.sandboxLimit} Sandboxes
-        used - <strong>Anonymous</strong>
-      </Text>
-    </Wrapper>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/ForkFrozenSandboxModal/ForkFrozenSandboxModal.tsx b/packages/app/src/app/pages/Sandbox/Editor/ForkFrozenSandboxModal/ForkFrozenSandboxModal.tsx
deleted file mode 100644
index 6d9d3548f1d..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/ForkFrozenSandboxModal/ForkFrozenSandboxModal.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import Modal from 'app/components/Modal';
-import { withTheme } from 'styled-components';
-import { ThemeProvider, Stack, Text } from '@codesandbox/components';
-import { Alert } from 'app/pages/common/Modals/Common/Alert';
-import { useAppState, useActions } from 'app/overmind';
-import React, { FunctionComponent } from 'react';
-import useKeyPressEvent from 'react-use/lib/useKeyPressEvent';
-import ReturnIcon from 'react-icons/lib/md/keyboard-return';
-
-const ModalContent: React.FC = () => {
-  const {
-    currentSandbox: { customTemplate },
-  } = useAppState().editor;
-  const { modals: modalsActions } = useActions();
-  const type = customTemplate ? 'template' : 'sandbox';
-
-  const unlock = () => {
-    modalsActions.forkFrozenModal.close('unfreeze');
-  };
-
-  const fork = (event?: { defaultPrevented: boolean }) => {
-    if (event && !event.defaultPrevented) {
-      modalsActions.forkFrozenModal.close('fork');
-    }
-  };
-
-  useKeyPressEvent('Enter', fork);
-  return (
-    <Alert
-      title={`Protected ${type}`}
-      description={
-        <>
-          <p>
-            This {type} is protected, which means you can’t make edits unless
-            you fork it.
-          </p>
-          <p>
-            Do you want to remove the protection for the {type} for this session
-            or make a fork?
-          </p>
-        </>
-      }
-      onCancel={unlock}
-      cancelMessage="Remove protection"
-      onPrimaryAction={fork}
-      confirmMessage={
-        <Stack gap={2} align="center">
-          <Text size={3}>Fork</Text>
-          <ReturnIcon />
-        </Stack>
-      }
-    />
-  );
-};
-
-const ForkFrozenSandboxModalComponent: FunctionComponent<{ theme: any }> = ({
-  theme,
-}) => {
-  const { modals } = useAppState();
-  const { forkFrozenModal } = useActions().modals;
-
-  return (
-    <ThemeProvider theme={theme.vscodeTheme}>
-      <Modal
-        isOpen={modals.forkFrozenModal.isCurrent}
-        width={450}
-        onClose={() => forkFrozenModal.close('cancel')}
-      >
-        <ModalContent />
-      </Modal>
-    </ThemeProvider>
-  );
-};
-
-export const ForkFrozenSandboxModal = withTheme(
-  ForkFrozenSandboxModalComponent
-);
diff --git a/packages/app/src/app/pages/Sandbox/Editor/ForkFrozenSandboxModal/index.ts b/packages/app/src/app/pages/Sandbox/Editor/ForkFrozenSandboxModal/index.ts
deleted file mode 100644
index 69cf412e848..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/ForkFrozenSandboxModal/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { ForkFrozenSandboxModal } from './ForkFrozenSandboxModal';
-
-export default ForkFrozenSandboxModal;
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Header/Actions.tsx b/packages/app/src/app/pages/Sandbox/Editor/Header/Actions.tsx
deleted file mode 100644
index 261470b8230..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Header/Actions.tsx
+++ /dev/null
@@ -1,282 +0,0 @@
-import Tooltip from '@codesandbox/common/lib/components/Tooltip';
-import { Avatar, Button, Icon, Stack } from '@codesandbox/components';
-import css from '@styled-system/css';
-import { useAppState, useActions } from 'app/overmind';
-import { UserMenu } from 'app/pages/common/UserMenu';
-import React, { useEffect, useState } from 'react';
-import { Notifications } from 'app/components/Notifications';
-import { useWorkspaceSubscription } from 'app/hooks/useWorkspaceSubscription';
-import track from '@codesandbox/common/lib/utils/analytics';
-
-import {
-  EmbedIcon,
-  ForkIcon,
-  LikeIcon,
-  PreferenceIcon,
-  ReloadIcon,
-  MoreMenuIcon,
-} from './icons';
-import { Collaborators } from './Collaborators';
-import { CollaboratorHeads } from './CollaboratorHeads';
-import { ForkButton } from './ForkButton';
-
-const TooltipButton = ({ tooltip, ...props }) => {
-  if (!tooltip) return <Button {...props} />;
-
-  return (
-    <Tooltip content={tooltip}>
-      <Button {...props} />
-    </Tooltip>
-  );
-};
-
-type ForkActionProps = {
-  isPrimaryAction: boolean;
-  handleFork: (teamId: string) => void;
-  handleSignIn: () => void;
-};
-
-const ForkAction = ({
-  isPrimaryAction,
-  handleFork,
-  handleSignIn,
-}: ForkActionProps) => {
-  const {
-    user,
-    editor: { isForkingSandbox, currentSandbox },
-  } = useAppState();
-  const { isPro } = useWorkspaceSubscription();
-
-  const { privacy, permissions } = currentSandbox;
-  const isUnlistedOrPrivate = privacy === 1 || privacy === 2;
-  const preventSandboxLeaving = permissions?.preventSandboxLeaving;
-
-  const variant = isPrimaryAction ? 'primary' : 'secondary';
-
-  if (user) {
-    if (!isPro && isUnlistedOrPrivate) {
-      return (
-        <TooltipButton
-          tooltip="You do not have permission to fork this sandbox"
-          variant={variant}
-          disabled
-        >
-          <ForkIcon css={css({ height: 3, marginRight: 1 })} /> Fork
-        </TooltipButton>
-      );
-    }
-
-    return (
-      <ForkButton user={user} forkClicked={handleFork} variant={variant} />
-    );
-  }
-
-  return (
-    <TooltipButton
-      tooltip={
-        preventSandboxLeaving
-          ? 'You do not have permission to fork this sandbox'
-          : null
-      }
-      loading={isForkingSandbox}
-      variant={variant}
-      onClick={handleSignIn}
-      disabled={preventSandboxLeaving}
-    >
-      <ForkIcon css={css({ height: 3, marginRight: 1 })} /> Fork
-    </TooltipButton>
-  );
-};
-
-export const Actions = () => {
-  const {
-    signInClicked,
-    modalOpened,
-    editor: { likeSandboxToggled, forkSandboxClicked },
-  } = useActions();
-  const {
-    hasLogIn,
-    updateStatus,
-    user,
-    activeWorkspaceAuthorization,
-    live: { isLive },
-    editor: { currentSandbox },
-  } = useAppState();
-  const { id, author, owned, likeCount, userLiked } = currentSandbox;
-  const [fadeIn, setFadeIn] = useState(false);
-
-  useEffect(() => {
-    if (!fadeIn) {
-      const timeoutId = setTimeout(() => {
-        setFadeIn(true);
-      }, 500);
-      return () => clearTimeout(timeoutId);
-    }
-
-    return () => {};
-  }, [fadeIn]);
-
-  let primaryAction: 'Sign in' | 'Share' | 'Fork';
-  if (!hasLogIn) primaryAction = 'Sign in';
-  else primaryAction = owned ? 'Share' : 'Fork';
-
-  const NotLive = () =>
-    hasLogIn ? (
-      <TooltipButton
-        tooltip={userLiked ? 'Undo like sandbox' : 'Like sandbox'}
-        variant="link"
-        onClick={() => likeSandboxToggled(id)}
-      >
-        <LikeIcon
-          css={css({
-            height: 3,
-            marginRight: 1,
-            color: userLiked ? 'reds.500' : 'inherit',
-          })}
-        />{' '}
-        <span>{likeCount}</span>
-      </TooltipButton>
-    ) : (
-      <Stack gap={1} paddingX={2} align="center">
-        <LikeIcon css={css({ height: 3 })} />
-        <span>{likeCount}</span>
-      </Stack>
-    );
-
-  return (
-    <Stack
-      align="center"
-      gap={2}
-      css={{ '> button': { width: 'auto' } }}
-      style={{
-        opacity: fadeIn ? 1 : 0,
-        transition: 'opacity 0.25s ease-in-out',
-      }}
-    >
-      {updateStatus === 'available' && (
-        <TooltipButton
-          tooltip="Update Available! Click to Refresh."
-          variant="link"
-          onClick={() => document.location.reload()}
-        >
-          <ReloadIcon css={css({ height: 3 })} />
-        </TooltipButton>
-      )}
-
-      {!hasLogIn && (
-        <TooltipButton
-          tooltip="Open preferences"
-          variant="link"
-          onClick={() => modalOpened({ modal: 'preferences' })}
-        >
-          <PreferenceIcon css={css({ height: 3 })} />
-        </TooltipButton>
-      )}
-
-      {user?.experiments?.collaborator && isLive ? (
-        <CollaboratorHeads />
-      ) : (
-        <NotLive />
-      )}
-
-      {user?.experiments.collaborator &&
-        (author ? (
-          <Collaborators
-            renderButton={props => (
-              <Button
-                variant={primaryAction === 'Share' ? 'primary' : 'secondary'}
-                {...props}
-              >
-                <EmbedIcon css={css({ height: 3, marginRight: 1 })} /> Share
-              </Button>
-            )}
-          />
-        ) : (
-          <Button
-            variant={primaryAction === 'Share' ? 'primary' : 'secondary'}
-            onClick={() => modalOpened({ modal: 'share' })}
-          >
-            <EmbedIcon css={css({ height: 3, marginRight: 1 })} /> Embed
-          </Button>
-        ))}
-
-      {!user?.experiments.collaborator && (
-        <Button
-          variant={primaryAction === 'Share' ? 'primary' : 'secondary'}
-          onClick={() => modalOpened({ modal: 'share' })}
-        >
-          <EmbedIcon css={css({ height: 3, marginRight: 1 })} /> Embed
-        </Button>
-      )}
-
-      <ForkAction
-        isPrimaryAction={primaryAction === 'Fork'}
-        handleFork={teamId => forkSandboxClicked({ teamId })}
-        handleSignIn={() => {
-          signInClicked({ onCancel: () => forkSandboxClicked({}) });
-        }}
-      />
-
-      <Button
-        variant="secondary"
-        onClick={() => {
-          if (!user) {
-            signInClicked({
-              onCancel: () => modalOpened({ modal: 'create' }),
-            });
-          } else {
-            modalOpened({ modal: 'create' });
-          }
-        }}
-        disabled={activeWorkspaceAuthorization === 'READ'}
-      >
-        <Icon
-          name="plus"
-          size={16}
-          title="Create new"
-          css={{ marginRight: '8px' }}
-        />
-        Create
-      </Button>
-
-      {hasLogIn && <Notifications />}
-      {hasLogIn ? (
-        <UserMenu>
-          {user?.experiments.collaborator ? (
-            <Button
-              onClick={() => track('Editor - Click More Menu')}
-              as={UserMenu.Button}
-              variant="secondary"
-              css={css({
-                width: 28,
-                height: 28, // match button size next to it
-              })}
-            >
-              <MoreMenuIcon />
-            </Button>
-          ) : (
-            <Button
-              as={UserMenu.Button}
-              css={css({
-                display: 'flex',
-                width: 28,
-                height: 28, // match button size next to it
-              })}
-            >
-              <Avatar
-                user={{ ...user, subscriptionSince: null }}
-                css={css({
-                  size: '28px', // match button size next to it
-                })}
-              />
-            </Button>
-          )}
-        </UserMenu>
-      ) : (
-        <Button variant="primary" onClick={() => signInClicked()}>
-          Sign in
-        </Button>
-      )}
-    </Stack>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Header/AppMenu/SubMenu.tsx b/packages/app/src/app/pages/Sandbox/Editor/Header/AppMenu/SubMenu.tsx
deleted file mode 100644
index d2c94c353f8..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Header/AppMenu/SubMenu.tsx
+++ /dev/null
@@ -1,158 +0,0 @@
-import track from '@codesandbox/common/lib/utils/analytics';
-import React, { useEffect, useState } from 'react';
-import { Menu, Stack, Text, Icon } from '@codesandbox/components';
-import ChevronRight from 'react-icons/lib/md/chevron-right';
-
-import { MenuAppItems } from 'app/overmind/effects/vscode/composeMenuAppTree';
-import { useEffects } from 'app/overmind';
-
-import { renderTitle, ToggleBox } from './elements';
-
-const SubMenu: React.FC<{
-  payload: MenuAppItems[];
-  root?: boolean;
-}> = ({ payload, root }) => {
-  const { vscode } = useEffects();
-
-  const [activeItem, setActiveItem] = useState<number | undefined>();
-  const [debounceActiveItem, setDebounceActiveItem] = useState<
-    number | undefined
-  >();
-
-  useEffect(
-    function debounceOnLeaveState() {
-      let timer: NodeJS.Timeout;
-
-      if (activeItem === undefined) {
-        /**
-         * Avoid unexpected leave out move event
-         */
-        timer = setTimeout(() => {
-          setDebounceActiveItem(undefined);
-        }, 600);
-      } else {
-        /**
-         * Avoid unexpected enter in move
-         * event into another sub menu item
-         */
-        timer = setTimeout(() => {
-          setDebounceActiveItem(activeItem);
-        }, 50);
-      }
-
-      return () => {
-        clearTimeout(timer);
-      };
-    },
-    [activeItem]
-  );
-
-  return (
-    <>
-      {payload.map((group, groupIndex, innerArr) => (
-        // eslint-disable-next-line react/no-array-index-key
-        <React.Fragment key={groupIndex}>
-          {group.map(item => {
-            const title = item.title || item.command.title;
-            const { label, renderMnemonic } = renderTitle(title);
-
-            if (item.submenu) {
-              return (
-                <Menu.Item
-                  key={label}
-                  aria-label={label}
-                  onMouseEnter={() => setActiveItem(item.submenuId)}
-                  onMouseLeave={() => setActiveItem(undefined)}
-                >
-                  <Stack justify="space-between">
-                    <Text size={2}>
-                      {!root && <ToggleBox />}
-                      {renderMnemonic()}
-                    </Text>
-                    <ChevronRight size="15" />
-                  </Stack>
-
-                  {debounceActiveItem === item.submenuId && (
-                    <div
-                      data-reach-menu-list
-                      data-reach-submenu-list
-                      data-component="MenuList"
-                    >
-                      <SubMenu
-                        payload={(item.submenu as unknown) as MenuAppItems[]}
-                      />
-                    </div>
-                  )}
-                </Menu.Item>
-              );
-            }
-
-            const when = vscode.contextMatchesRules(item.command.when);
-            if (when === false) return null;
-
-            const renderToggle = () => {
-              if ('toggled' in item.command) {
-                const command = item.command.toggled;
-                const toggled = vscode.contextMatchesRules(command);
-
-                if (!toggled) return null;
-
-                return (
-                  <Icon style={{ width: 16, height: 12 }} name="simpleCheck" />
-                );
-              }
-
-              return null;
-            };
-
-            const keybinding = vscode
-              .lookupKeybinding(item.command.id)
-              ?.getLabel();
-            const content = (
-              <Stack gap={4} justify="space-between">
-                <Text size={2}>
-                  {!root && <ToggleBox>{renderToggle()}</ToggleBox>}
-                  {renderMnemonic()}
-                </Text>
-
-                {item.command && <Text size={2}>{keybinding}</Text>}
-              </Stack>
-            );
-
-            const disabled =
-              vscode.contextMatchesRules(item.command.precondition) === false;
-            if (disabled) {
-              return (
-                <Menu.Item key={label} aria-label={label} data-disabled>
-                  {content}
-                </Menu.Item>
-              );
-            }
-
-            return (
-              <Menu.Item
-                onClick={() => {
-                  track('Editor - Click Menu Item', {
-                    id: item.command.id,
-                    name: label,
-                    keybinding,
-                  });
-
-                  vscode.runCommand(item.command.id);
-                }}
-                key={label}
-                aria-label={label}
-              >
-                {content}
-              </Menu.Item>
-            );
-          })}
-
-          {groupIndex !== innerArr.length - 1 && <Menu.Divider />}
-        </React.Fragment>
-      ))}
-    </>
-  );
-};
-
-export { SubMenu };
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Header/AppMenu/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Header/AppMenu/elements.ts
deleted file mode 100644
index 51884c0a472..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Header/AppMenu/elements.ts
+++ /dev/null
@@ -1,128 +0,0 @@
-import { createElement } from 'react';
-import styled, { createGlobalStyle } from 'styled-components';
-
-export const APP_MENU_ID = 'AppMenu';
-
-const GlobalMenuStyle = createGlobalStyle`
-  [data-menu=${APP_MENU_ID}] {
-    &[data-component='MenuList'],
-    &[data-component='MenuList'] [data-reach-menu-list] {
-      overflow: visible !important;
-    }
-
-    [data-reach-menu-item] {
-      position: relative;
-    }
-
-    [data-reach-submenu-list] {
-      position: absolute;
-      top: -5px;
-      left: 100%;
-      min-width: 180px !important;
-
-      &:before {
-        content: "";
-        display: block;
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        width: 50px;
-        left: -50px;
-      }
-    }
-
-    @media (max-height: 800px) {
-      [data-reach-submenu-list] {
-        transform: translateY(calc(-15% + 1px)) !important;
-      }
-    }
-
-    [data-reach-menu-item][data-component='MenuItem']:hover,
-    [data-reach-menu-item][data-component='MenuItem'][data-selected] {
-      color: inherit !important;
-    }
-
-    [data-reach-menu-item][data-component='MenuItem']:hover >*:not([data-reach-menu-list]) {
-      /* TODO: extend the theme type */
-      color: ${({ theme }: any) => theme.colors.white} !important;
-    }
-  }
-`;
-
-const MenuHandler = styled.button`
-  background: none;
-  border: 0;
-  padding: 0;
-
-  width: ${({ theme }) => theme.sizes[7]}px;
-  height: ${({ theme }) => theme.sizes[7]}px;
-  display: flex;
-
-  color: ${({ theme }) => theme.colors.activityBar.inactiveForeground};
-  cursor: pointer;
-  border-radius: ${({ theme }) => theme.radii.small}px;
-  border: 1px solid transparent;
-  transition: 0.3s ease border;
-
-  margin-right: ${({ theme }) => theme.space[2]}px;
-  margin-left: 5px;
-
-  > * {
-    margin: auto;
-  }
-
-  &:active,
-  &:hover,
-  &[aria-expanded='true'] {
-    outline: none;
-    color: ${({ theme }) => theme.colors.menuList.foreground};
-    border-color: ${({ theme }) => theme.colors.menuList.foreground}20;
-  }
-`;
-
-const ToggleBox = styled.div`
-  display: inline-block;
-  width: 16px;
-  height: 12px;
-
-  position: relative;
-  top: 1px;
-  left: -2px;
-  margin-right: 2px;
-`;
-
-const HiddenElement = styled.div`
-  position: absolute;
-  top: -50px;
-  right: 0;
-  height: 50px;
-  width: calc(100% - ${({ theme }) => theme.sizes[7]}px);
-`;
-
-const renderTitle = (label: string) => {
-  const REGEX_ELEMENT = /&&/;
-  const REGEX_ELEMENT_SHORTCUT = /(&&\w)/g;
-
-  const clean = (payload: string) => payload.replace(REGEX_ELEMENT, '').trim();
-
-  const cleanLabel = clean(label);
-  const labelSplit = label.split(REGEX_ELEMENT_SHORTCUT);
-
-  return {
-    label: cleanLabel,
-    renderMnemonic: () =>
-      labelSplit.map(element => {
-        if (/(&&\w)/g.test(element)) {
-          return createElement(
-            'mnemonic',
-            { key: clean(element) },
-            clean(element)
-          );
-        }
-
-        return element;
-      }),
-  };
-};
-
-export { GlobalMenuStyle, MenuHandler, renderTitle, ToggleBox, HiddenElement };
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Header/AppMenu/formatMenuData.ts b/packages/app/src/app/pages/Sandbox/Editor/Header/AppMenu/formatMenuData.ts
deleted file mode 100644
index 23cb1dfe7a9..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Header/AppMenu/formatMenuData.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-import { MenuAppItems } from 'app/overmind/effects/vscode/composeMenuAppTree';
-
-// TODO: find out a proper place to TS helpers
-type Unpacked<T> = T extends (infer U)[]
-  ? U
-  : T extends (...args: any[]) => infer U
-  ? U
-  : T extends Promise<infer U>
-  ? U
-  : T;
-
-type MenuAppItemsSubmenuAsObject =
-  | Array<
-      Unpacked<MenuAppItems> & {
-        submenu: Record<string, MenuAppItemsSubmenuAsObject>;
-      }
-    >
-  | MenuAppItems;
-
-/**
- * Given an array of objects that has the same `group` value
- * Returns an object where the key is the `group` value with its items, recursively
- */
-const groupMenu = (
-  submenu: MenuAppItemsSubmenuAsObject
-): Record<string, MenuAppItemsSubmenuAsObject> =>
-  submenu
-    .sort((a, b) => (a.group > b.group ? 1 : -1))
-    .reduce((acc, curr) => {
-      let newGroupItem = curr;
-
-      if (curr.submenu) {
-        newGroupItem = {
-          ...newGroupItem,
-          submenu: groupMenu(curr.submenu) as any,
-        };
-      }
-
-      const mergedGroup =
-        curr.group in acc ? [...acc[curr.group], newGroupItem] : [newGroupItem];
-      const sortInnerGroup = mergedGroup.sort((a, b) =>
-        a.order > b.order ? 1 : -1
-      );
-
-      return { ...acc, [curr.group]: sortInnerGroup };
-    }, {});
-
-/**
- * Given an object of array,
- * Returns a array bi-dimensional, in other words it removes the key
- */
-const flattenObjectToArray = (
-  groups: Record<string, MenuAppItemsSubmenuAsObject>
-): MenuAppItems[] =>
-  Object.entries(groups).reduce((acc, [_, value]: any) => {
-    const flattenSubmenu = value.map(item => {
-      if (item.submenu) {
-        return { ...item, submenu: flattenObjectToArray(item.submenu) };
-      }
-
-      return item;
-    });
-
-    return [...acc, flattenSubmenu];
-  }, [] as MenuAppItems[]);
-
-/**
- * Get the menu data and group it by names
- * which returns an array bi-dimensional
- */
-const formatMenuData = (payload: MenuAppItems): MenuAppItems[] => {
-  const groups = groupMenu(payload);
-  const flatten = flattenObjectToArray(groups);
-
-  return flatten;
-};
-
-export { formatMenuData };
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Header/AppMenu/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Header/AppMenu/index.tsx
deleted file mode 100644
index dc78ee83cd8..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Header/AppMenu/index.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import track from '@codesandbox/common/lib/utils/analytics';
-import { useEffects } from 'app/overmind';
-import React, { useEffect, useMemo, useState } from 'react';
-
-import { MenuAppItems } from 'app/overmind/effects/vscode/composeMenuAppTree';
-import { Icon, Menu } from '@codesandbox/components';
-
-import {
-  GlobalMenuStyle,
-  MenuHandler,
-  HiddenElement,
-  APP_MENU_ID,
-} from './elements';
-import { formatMenuData } from './formatMenuData';
-import { SubMenu } from './SubMenu';
-
-export const AppMenu: React.FC = () => {
-  const [menu, setMenu] = useState<MenuAppItems>([]);
-  const menuByGroup = useMemo(() => formatMenuData(menu), [menu]);
-
-  const { vscode } = useEffects();
-  const vscodeMenuItems = vscode.getMenuAppItems();
-
-  useEffect(
-    function loadMenuItemsFromVscode() {
-      setMenu(vscodeMenuItems);
-    },
-    [vscodeMenuItems]
-  );
-
-  return (
-    <div>
-      <GlobalMenuStyle />
-
-      <Menu>
-        <MenuHandler
-          as={Menu.Button}
-          type="button"
-          onClick={() => track('Editor - Click Menubar')}
-        >
-          <Icon width={16} height={16} name="menu" />
-        </MenuHandler>
-
-        <Menu.List data-menu={APP_MENU_ID}>
-          {/* It avoids interact with elements that are behind of 
-          the menu, like the WorkspaceName/UpgradeToolTip.tsx */}
-          <HiddenElement />
-          {menuByGroup.length > 0 && <SubMenu root payload={menuByGroup} />}
-        </Menu.List>
-      </Menu>
-    </div>
-  );
-};
\ No newline at end of file
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Header/CollaboratorHeads/CollaboratorHeads.tsx b/packages/app/src/app/pages/Sandbox/Editor/Header/CollaboratorHeads/CollaboratorHeads.tsx
deleted file mode 100644
index 699d742c2d8..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Header/CollaboratorHeads/CollaboratorHeads.tsx
+++ /dev/null
@@ -1,238 +0,0 @@
-import React, { FunctionComponent, useEffect } from 'react';
-import css from '@styled-system/css';
-import { AnimatePresence, motion } from 'framer-motion';
-import { sortBy } from 'lodash-es';
-import Tooltip, {
-  SingletonTooltip,
-} from '@codesandbox/common/lib/components/Tooltip';
-import { TippyProps } from '@tippy.js/react';
-import { useAppState, useActions, useEffects } from 'app/overmind';
-import { Stack, Avatar, Text, Menu, Link } from '@codesandbox/components';
-import { LiveUser } from '@codesandbox/common/lib/types';
-
-interface ICollaboratorHeadProps {
-  avatarUrl: string;
-  username: string;
-  id: string;
-  color: number[];
-  isCurrentUser: boolean;
-  isDimmed: boolean;
-  showBorder?: boolean;
-  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-  singleton: TippyProps['singleton'];
-}
-
-const HEAD_SIZE = 26;
-const USER_OVERFLOW_LIMIT = 4;
-
-const CollaboratorHead = (props: ICollaboratorHeadProps) => (
-  <Tooltip
-    singleton={props.singleton}
-    style={{ display: 'flex' }}
-    content={
-      <Stack
-        css={css({ paddingX: 2, paddingY: 1 })}
-        justify="center"
-        align="center"
-        gap={1}
-        direction="vertical"
-      >
-        <Text size={3}>
-          {props.username}
-          {props.isCurrentUser && ' (you)'}
-        </Text>
-        <Link
-          href={`/u/${props.username}`}
-          target="_blank"
-          rel="noreferrer noopener"
-          size={2}
-          variant="muted"
-        >
-          View Profile
-        </Link>
-      </Stack>
-    }
-  >
-    <button
-      type="button"
-      css={{
-        transition: '0.3s ease opacity',
-        position: 'relative',
-        width: HEAD_SIZE,
-        height: HEAD_SIZE,
-        overflow: 'hidden',
-        cursor: 'pointer',
-        padding: 0,
-        backgroundColor: 'transparent',
-        outline: 'none',
-        border: 'none',
-        opacity: props.isDimmed ? 0.5 : 1,
-
-        ':hover': {
-          opacity: 1,
-        },
-
-        ':after': props.showBorder && {
-          content: " ' '",
-          position: 'absolute',
-          display: 'block',
-          borderRadius: '100%',
-          top: 0,
-          width: '100%',
-          height: '100%',
-          boxShadow: `inset 0px 0px 0px 1.5px rgb(${props.color.join(',')})`,
-        },
-      }}
-      onClick={props.onClick}
-    >
-      <Avatar
-        user={{
-          id: props.id,
-          username: props.username,
-          avatarUrl: props.avatarUrl,
-        }}
-        css={css({
-          width: HEAD_SIZE,
-          height: HEAD_SIZE,
-          img: {
-            border: 'none',
-          },
-        })}
-      />
-    </button>
-  </Tooltip>
-);
-
-export const CollaboratorHeads: FunctionComponent = () => {
-  const state = useAppState();
-  const actions = useActions();
-  const effects = useEffects();
-
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const liveUsers = state.live.roomInfo?.users || [];
-
-  const liveUserId = state.live.liveUserId;
-  const followingUserId = state.live.followingUserId;
-  const orderedLiveUsers = React.useMemo(() => {
-    const currentUser = liveUsers.find(u => u.id === liveUserId);
-    const followingUser = liveUsers.find(u => u.id === followingUserId);
-    const filteredLiveUsers = sortBy(
-      liveUsers.filter(u => u.id !== liveUserId),
-      'id'
-    );
-
-    if (followingUser) {
-      const followingUserIndex = filteredLiveUsers.findIndex(
-        u => u.id === followingUserId
-      );
-
-      const followingUserIsInFirst4 =
-        followingUserIndex < USER_OVERFLOW_LIMIT - 1;
-      if (!followingUserIsInFirst4) {
-        // Let's move the following user to the start of the list if it's not in the first 4
-        filteredLiveUsers.splice(followingUserIndex, 1);
-        filteredLiveUsers.unshift(followingUser);
-      }
-    }
-
-    return [currentUser, ...filteredLiveUsers].filter(Boolean);
-  }, [liveUserId, followingUserId, liveUsers]);
-
-  const followLiveUser = (user: LiveUser) => {
-    if (liveUserId === user.id || followingUserId === user.id) {
-      actions.live.onStopFollow();
-    } else {
-      actions.live.onFollow({ liveUserId: user.id });
-    }
-  };
-
-  const firstLiveUsers = orderedLiveUsers.slice(0, USER_OVERFLOW_LIMIT);
-  const restLiveUsers = orderedLiveUsers.slice(USER_OVERFLOW_LIMIT);
-
-  useEffect(() => {
-    effects.analytics.track('Editor - Amount of live users', {
-      amount: orderedLiveUsers.length,
-    });
-  }, [orderedLiveUsers.length, effects]);
-
-  // It doesn't make sense to show a "More" button for live users if there's
-  // only one in it.
-  if (restLiveUsers.length === 1) {
-    firstLiveUsers.push(restLiveUsers.pop());
-  }
-
-  return (
-    <Stack justify="center">
-      <SingletonTooltip interactive>
-        {singleton => (
-          <AnimatePresence>
-            {firstLiveUsers.map((user, i) => (
-              <motion.div
-                positionTransition
-                style={{
-                  zIndex: 10 + liveUsers.length - i,
-                  display: 'flex',
-                  alignItems: 'center',
-                }}
-                animate={{ width: 'auto', marginRight: 8, opacity: 1 }}
-                exit={{ width: 0, marginRight: 0, opacity: 0 }}
-                initial={{ width: 0, marginRight: 0, opacity: 0 }}
-                key={user.id}
-              >
-                <CollaboratorHead
-                  avatarUrl={user.avatarUrl}
-                  username={user.username}
-                  color={user.color}
-                  id={user.id}
-                  singleton={singleton}
-                  isCurrentUser={user.id === liveUserId}
-                  onClick={() => followLiveUser(user)}
-                  isDimmed={
-                    followingUserId !== null && user.id !== followingUserId
-                  }
-                  showBorder={orderedLiveUsers.length > 1}
-                />
-              </motion.div>
-            ))}
-          </AnimatePresence>
-        )}
-      </SingletonTooltip>
-
-      {restLiveUsers.length > 0 && (
-        <Menu>
-          <Menu.Button
-            variant="secondary"
-            css={css({
-              position: 'relative',
-              width: HEAD_SIZE,
-              height: HEAD_SIZE,
-              marginRight: 8,
-              ':after': {
-                content: " ' '",
-                position: 'absolute',
-                display: 'block',
-                borderRadius: 2,
-                top: 0,
-                width: '100%',
-                height: '100%',
-                boxShadow: `inset 0px 0px 0px 1.5px rgba(255, 255, 255, 0.5)`,
-              },
-            })}
-          >
-            {restLiveUsers.length}
-          </Menu.Button>
-          <Menu.List>
-            {restLiveUsers.map(restUser => (
-              <Menu.Item
-                key={restUser.id}
-                onSelect={() => followLiveUser(restUser)}
-              >
-                {restUser.username}
-              </Menu.Item>
-            ))}
-          </Menu.List>
-        </Menu>
-      )}
-    </Stack>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Header/CollaboratorHeads/index.ts b/packages/app/src/app/pages/Sandbox/Editor/Header/CollaboratorHeads/index.ts
deleted file mode 100644
index cab08ab649e..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Header/CollaboratorHeads/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { CollaboratorHeads } from './CollaboratorHeads';
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Header/Collaborators/AddCollaboratorForm.tsx b/packages/app/src/app/pages/Sandbox/Editor/Header/Collaborators/AddCollaboratorForm.tsx
deleted file mode 100644
index a65ff6b5cb1..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Header/Collaborators/AddCollaboratorForm.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import React from 'react';
-import { motion, useAnimation } from 'framer-motion';
-import { Stack, Button } from '@codesandbox/components';
-import css from '@styled-system/css';
-
-import { Authorization } from 'app/graphql/types';
-import { useAppState, useActions } from 'app/overmind';
-import { UserSearchInput } from 'app/components/UserSearchInput';
-
-import { PermissionSelect, MENU_WIDTH } from './PermissionSelect';
-
-export const AddCollaboratorForm = () => {
-  const state = useAppState();
-  const actions = useActions();
-
-  const controls = useAnimation();
-  const [inputValue, setInputValue] = React.useState<string>('');
-  const [authorization, setAuthorization] = React.useState<Authorization>(
-    Authorization.WriteCode
-  );
-
-  const onAuthorizationChanged = (value: string) => {
-    setAuthorization(value as Authorization);
-  };
-
-  const onSubmit = async (evt: React.FormEvent<HTMLFormElement>) => {
-    evt.preventDefault();
-
-    if (!inputValue || inputValue.trim().length === 0) {
-      controls.start({
-        translateX: [-4, 4, 0],
-        transition: {
-          duration: 0.15,
-          loop: 3,
-        },
-      });
-
-      return;
-    }
-
-    try {
-      setInputValue('');
-
-      if (inputValue.includes('@')) {
-        await actions.editor.inviteCollaborator({
-          email: inputValue,
-          authorization,
-          sandboxId: state.editor.currentSandbox!.id,
-        });
-      } else {
-        await actions.editor.addCollaborator({
-          username: inputValue,
-          authorization,
-          sandboxId: state.editor.currentSandbox!.id,
-        });
-      }
-    } catch (e) {
-      setInputValue(inputValue);
-    }
-  };
-
-  return (
-    <Stack align="center" onSubmit={onSubmit} as="form" gap={2}>
-      <motion.div
-        animate={controls}
-        css={css({
-          position: 'relative',
-          width: '100%',
-        })}
-      >
-        <UserSearchInput
-          inputValue={inputValue}
-          onInputValueChange={val => {
-            setInputValue(val);
-          }}
-          css={css({ paddingRight: MENU_WIDTH })}
-        />
-
-        <PermissionSelect
-          value={authorization}
-          onChange={onAuthorizationChanged}
-          css={{
-            position: 'absolute',
-            top: 0,
-            right: 8,
-          }}
-        />
-      </motion.div>
-
-      <Button type="submit" css={css({ width: 'initial' })} marginLeft={1}>
-        Send
-      </Button>
-    </Stack>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Header/Collaborators/ButtonActions.tsx b/packages/app/src/app/pages/Sandbox/Editor/Header/Collaborators/ButtonActions.tsx
deleted file mode 100644
index d0980b30e72..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Header/Collaborators/ButtonActions.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import React, { useEffect } from 'react';
-import css from '@styled-system/css';
-import { motion } from 'framer-motion';
-import { Stack, Button } from '@codesandbox/components';
-import CheckIcon from 'react-icons/lib/md/check';
-import { useEffects, useActions } from 'app/overmind';
-
-export const ButtonActions = () => {
-  const [linkCopied, setLinkCopied] = React.useState(false);
-  const [mounted, setMounted] = React.useState(false);
-  const { modalOpened, track } = useActions();
-  const { copyToClipboard } = useEffects().browser;
-  const timeout = React.useRef(null);
-  const copyLink = () => {
-    setLinkCopied(true);
-    track({ name: "Share - 'Copy Sandbox URL' Clicked", data: {} });
-
-    copyToClipboard(document.location.href);
-
-    if (timeout.current) {
-      clearTimeout(timeout.current);
-    }
-    timeout.current = setTimeout(() => {
-      setLinkCopied(false);
-    }, 2000);
-  };
-
-  useEffect(
-    () => () => {
-      if (timeout.current) {
-        clearTimeout(timeout.current);
-      }
-    },
-    []
-  );
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  return (
-    <Stack justify="flex-end" direction="horizontal" gap={2}>
-      <Button
-        css={css({ width: 'initial' })}
-        variant="secondary"
-        onClick={() => {
-          modalOpened({ modal: 'share' });
-        }}
-      >
-        Embed
-      </Button>
-      <Button
-        css={css({ width: 'initial' })}
-        variant="secondary"
-        onClick={copyLink}
-      >
-        {linkCopied ? (
-          <motion.div
-            key="copied"
-            initial={{ scale: 0.8 }}
-            animate={{ scale: 1 }}
-            style={{
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-            }}
-          >
-            <motion.div
-              initial={{ scale: 0.8, rotate: -60, opacity: 0.7 }}
-              animate={{ scale: 1, rotate: 0, opacity: 1 }}
-              css={css({ marginRight: 1 })}
-            >
-              <CheckIcon />
-            </motion.div>{' '}
-            Copied!
-          </motion.div>
-        ) : (
-          <motion.div
-            key="copy"
-            initial={mounted ? { scale: 0.8, opacity: 0.7 } : false}
-            animate={{ scale: 1, opacity: 1 }}
-          >
-            Copy link
-          </motion.div>
-        )}
-      </Button>
-    </Stack>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Header/Collaborators/Collaborator.tsx b/packages/app/src/app/pages/Sandbox/Editor/Header/Collaborators/Collaborator.tsx
deleted file mode 100644
index 53ee3193d68..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Header/Collaborators/Collaborator.tsx
+++ /dev/null
@@ -1,281 +0,0 @@
-import { GlobeIcon } from '@codesandbox/common/lib/components/icons/Globe';
-import { LinkIcon } from '@codesandbox/common/lib/components/icons/Link';
-import { LockIcon } from '@codesandbox/common/lib/components/icons/Lock';
-import Tooltip from '@codesandbox/common/lib/components/Tooltip';
-import { Stack, Text, Menu, Icon } from '@codesandbox/components';
-import css from '@styled-system/css';
-import { Authorization } from 'app/graphql/types';
-import { useAppState, useActions } from 'app/overmind';
-import { formatDistanceToNow } from 'date-fns';
-import React from 'react';
-
-import { Mail, WarningIcon } from './icons';
-import { PermissionSelect } from './PermissionSelect';
-
-interface ICollaboratorItemProps {
-  authorization: Authorization;
-  name: string | JSX.Element;
-
-  warning?: string;
-  permissions?: Authorization[];
-  subtext?: string;
-  avatarUrl?: string;
-  avatarComponent?: JSX.Element | null;
-  onChange?: (value: string) => void;
-  fillAvatar?: boolean;
-  permissionText?: string;
-  readOnly?: boolean;
-  style?: React.CSSProperties;
-}
-
-export const CollaboratorItem = ({
-  name,
-  subtext,
-  avatarUrl,
-  avatarComponent = null,
-  fillAvatar = true,
-  authorization,
-  onChange,
-  readOnly,
-  permissionText,
-  permissions = [Authorization.WriteCode, Authorization.Read],
-  warning,
-  ...props
-}: ICollaboratorItemProps) => (
-  <Stack {...props} align="center">
-    <Stack gap={2} css={css({ width: '100%', flex: 3 })}>
-      {avatarUrl ? (
-        <img
-          css={css({
-            borderRadius: 2,
-            border: '1px solid',
-            borderColor: 'dialog.border',
-          })}
-          alt={typeof name === 'string' ? name : ''}
-          src={avatarUrl}
-          width={32}
-          height={32}
-        />
-      ) : (
-        <div
-          css={css({
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            borderRadius: 2,
-            border: '1px solid',
-            borderColor: fillAvatar ? 'dialog.border' : 'transparent',
-            backgroundColor: fillAvatar ? 'dialog.border' : 'transparent',
-            width: 32,
-            height: 32,
-          })}
-        >
-          {avatarComponent}
-        </div>
-      )}
-      <Stack gap={1} justify="center" direction="vertical">
-        {typeof name === 'string' ? (
-          <Text size={3} color="white">
-            {name}
-          </Text>
-        ) : (
-          name
-        )}
-        {subtext && (
-          <Text size={2} variant="muted">
-            {subtext}
-          </Text>
-        )}
-      </Stack>
-    </Stack>
-
-    {warning && (
-      <Tooltip content={warning}>
-        <WarningIcon />
-      </Tooltip>
-    )}
-    {permissions.length > 0 ? (
-      <PermissionSelect
-        onChange={onChange}
-        value={authorization}
-        disabled={readOnly}
-        permissions={permissions}
-        additionalOptions={[{ label: 'Remove', value: 'remove' }]}
-      />
-    ) : (
-      <Text css={css({ flex: 3, textAlign: 'right' })} size={3} variant="muted">
-        {permissionText}
-      </Text>
-    )}
-  </Stack>
-);
-
-interface ICollaboratorProps {
-  authorization: Authorization;
-  username: string;
-  lastSeenAt: string | null;
-  avatarUrl: string;
-  isViewingNow: boolean;
-  readOnly?: boolean;
-  warning?: string;
-}
-
-export const Collaborator = ({
-  username,
-  avatarUrl,
-  authorization,
-  lastSeenAt,
-  readOnly,
-  isViewingNow,
-  warning,
-}: ICollaboratorProps) => {
-  const state = useAppState();
-  const actions = useActions();
-
-  const updateAuthorization = (value: string) => {
-    if (value === 'remove') {
-      actions.editor.removeCollaborator({
-        username,
-        sandboxId: state.editor.currentSandbox.id,
-      });
-    } else {
-      actions.editor.changeCollaboratorAuthorization({
-        username,
-        sandboxId: state.editor.currentSandbox.id,
-        authorization: value as Authorization,
-      });
-    }
-  };
-
-  let subtext: string;
-  if (isViewingNow) {
-    subtext = 'Viewing now';
-  } else if (lastSeenAt === null) {
-    subtext = 'Not viewed yet';
-  } else {
-    subtext = formatDistanceToNow(new Date(lastSeenAt), { addSuffix: true });
-  }
-
-  return (
-    <CollaboratorItem
-      name={username}
-      subtext={subtext}
-      avatarUrl={avatarUrl}
-      onChange={updateAuthorization}
-      authorization={authorization}
-      readOnly={readOnly}
-      warning={warning}
-    />
-  );
-};
-
-interface IInvitationProps {
-  id: string;
-  email: string;
-  authorization: Authorization;
-}
-
-export const Invitation = ({ id, email, authorization }: IInvitationProps) => {
-  const state = useAppState();
-  const actions = useActions();
-
-  const updateAuthorization = (value: string) => {
-    // We have to do something here
-    if (value === 'remove') {
-      actions.editor.revokeSandboxInvitation({
-        invitationId: id,
-        sandboxId: state.editor.currentSandbox.id,
-      });
-    } else {
-      actions.editor.changeInvitationAuthorization({
-        invitationId: id,
-        sandboxId: state.editor.currentSandbox.id,
-        authorization: value as Authorization,
-      });
-    }
-  };
-
-  return (
-    <CollaboratorItem
-      name={email}
-      subtext="Not viewed yet"
-      avatarComponent={<Mail width={24} height={24} />}
-      onChange={updateAuthorization}
-      authorization={authorization}
-    />
-  );
-};
-
-const privacyToName = {
-  0: 'Public',
-  1: 'Unlisted',
-  2: 'Private',
-};
-
-const privacyToIcon = {
-  0: GlobeIcon,
-  1: LinkIcon,
-  2: LockIcon,
-};
-
-const privacyToDescription = {
-  0: 'Everyone can view',
-  1: 'Everyone with link can view',
-  2: 'Only collaborators can access',
-};
-
-interface ILinkPermissionProps {
-  readOnly: boolean;
-}
-
-export const LinkPermissions = ({ readOnly }: ILinkPermissionProps) => {
-  const state = useAppState();
-  const actions = useActions();
-  const { privacy, draft } = state.editor.currentSandbox;
-
-  const PrivacyIcon = privacyToIcon[privacy];
-  const isPrivateDraft = draft && privacy === 2;
-
-  const isReadOnly = readOnly || isPrivateDraft;
-
-  const onChange = value => {
-    actions.workspace.sandboxPrivacyChanged({
-      privacy: Number(value) as 0 | 1 | 2,
-      source: 'collaboratorss',
-    });
-  };
-
-  return (
-    <Stack gap={2} align="flex-start" direction="vertical">
-      <CollaboratorItem
-        avatarComponent={<PrivacyIcon />}
-        name={
-          <Menu>
-            <Menu.Button disabled={isReadOnly}>
-              {privacyToName[privacy]}{' '}
-              <Icon name="caret" size={8} marginLeft={1} />
-            </Menu.Button>
-            <Menu.List>
-              {Object.keys(privacyToName).map(p => (
-                <Menu.Item key={p} onSelect={() => onChange(p)}>
-                  {privacyToName[p]}
-                </Menu.Item>
-              ))}
-            </Menu.List>
-          </Menu>
-        }
-        authorization={Authorization.Read}
-        permissions={[]}
-        permissionText={privacyToDescription[privacy]}
-        readOnly={isReadOnly}
-        style={{ width: '100%' }}
-      />
-
-      {isPrivateDraft && (
-        <Text size={3} variant="muted">
-          Drafts are private and non-shareable.
-        </Text>
-      )}
-    </Stack>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Header/Collaborators/CollaboratorList.tsx b/packages/app/src/app/pages/Sandbox/Editor/Header/Collaborators/CollaboratorList.tsx
deleted file mode 100644
index 85c75c8ba9f..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Header/Collaborators/CollaboratorList.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-import React from 'react';
-import css from '@styled-system/css';
-import { Element } from '@codesandbox/components';
-import { AnimatePresence, motion } from 'framer-motion';
-
-import { useAppState } from 'app/overmind';
-import { hasPermission } from '@codesandbox/common/lib/utils/permission';
-import { Authorization } from 'app/graphql/types';
-import { sortBy } from 'lodash-es';
-import { RoomInfo } from '@codesandbox/common/lib/types';
-import { TeamAvatar } from 'app/components/TeamAvatar';
-import { CollaboratorItem, Collaborator, Invitation } from './Collaborator';
-
-const Animated = ({ showMountAnimations, ...props }) => (
-  <motion.div
-    animate={{ opacity: 1, height: 'auto' }}
-    initial={showMountAnimations ? { opacity: 0, height: 0 } : null}
-    exit={{ opacity: 0, height: 0 }}
-    style={{ width: '100%', overflow: 'hidden' }}
-    positionTransition
-  >
-    <Element
-      css={css({
-        marginTop: 4,
-      })}
-      {...props}
-    />
-  </motion.div>
-);
-
-function getLiveUser(currentUserId: string, roomInfo: RoomInfo) {
-  return roomInfo?.users?.find(u => u.userId === currentUserId);
-}
-
-export const CollaboratorList = () => {
-  const { editor, live } = useAppState();
-
-  const [showMountAnimations, setShowMountAnimations] = React.useState(false);
-
-  React.useEffect(() => {
-    setShowMountAnimations(true);
-  }, [setShowMountAnimations]);
-
-  const isOwner = hasPermission(editor.currentSandbox.authorization, 'owner');
-  const { author, team } = editor.currentSandbox;
-
-  const collaboratorsConnectedWithLive = editor.collaborators.map(
-    collaborator => {
-      const currentLiveUser = getLiveUser(collaborator.user.id, live?.roomInfo);
-      if (currentLiveUser) {
-        return { ...collaborator, lastSeenAt: Infinity };
-      }
-
-      return collaborator;
-    }
-  );
-
-  const sortedCollaborators = sortBy(collaboratorsConnectedWithLive, c => [
-    -(c.lastSeenAt === Infinity
-      ? new Date().getTime()
-      : new Date(c.lastSeenAt || 0).getTime()),
-    c.user.username,
-  ]);
-
-  return (
-    <Element
-      paddingX={4}
-      css={css({
-        maxHeight: 250,
-        minHeight: 100,
-        overflowY: 'auto',
-        paddingBottom: 4,
-      })}
-    >
-      <Animated showMountAnimations={showMountAnimations}>
-        <CollaboratorItem
-          name={team.name}
-          avatarComponent={
-            <TeamAvatar
-              style={{ width: '100%', height: '100%', borderWidth: 0 }}
-              name={team.name}
-              avatar={team.avatarUrl}
-            />
-          }
-          authorization={Authorization.Owner}
-          permissions={[]}
-          permissionText="Can edit"
-          subtext="All workspace members"
-        />
-      </Animated>
-
-      <Animated showMountAnimations={showMountAnimations}>
-        <CollaboratorItem
-          name={author.username}
-          avatarUrl={author.avatarUrl}
-          authorization={Authorization.Owner}
-          permissions={[]}
-          permissionText="Owner"
-        />
-      </Animated>
-
-      <AnimatePresence>
-        {sortedCollaborators.map(collaborator => (
-          <Animated
-            showMountAnimations={showMountAnimations}
-            key={collaborator.user.username}
-          >
-            <Collaborator
-              username={collaborator.user.username}
-              avatarUrl={collaborator.user.avatarUrl}
-              authorization={collaborator.authorization}
-              lastSeenAt={collaborator.lastSeenAt}
-              isViewingNow={collaborator.lastSeenAt === Infinity}
-              warning={collaborator.warning}
-              readOnly={!isOwner}
-            />
-          </Animated>
-        ))}
-
-        {editor.invitations.map(invitation => (
-          <Animated
-            showMountAnimations={showMountAnimations}
-            key={invitation.email}
-          >
-            <Invitation
-              email={invitation.email}
-              id={invitation.id}
-              authorization={invitation.authorization}
-            />
-          </Animated>
-        ))}
-      </AnimatePresence>
-    </Element>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Header/Collaborators/Collaborators.tsx b/packages/app/src/app/pages/Sandbox/Editor/Header/Collaborators/Collaborators.tsx
deleted file mode 100644
index 6fdde7f3837..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Header/Collaborators/Collaborators.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import React, { FunctionComponent, useEffect, useState } from 'react';
-import { Element } from '@codesandbox/components';
-import { hasPermission } from '@codesandbox/common/lib/utils/permission';
-import { Overlay } from 'app/components/Overlay';
-import { useAppState } from 'app/overmind';
-import OutsideClickHandler from 'react-outside-click-handler';
-
-import { Container, HorizontalSeparator } from './elements';
-import { AddCollaboratorForm } from './AddCollaboratorForm';
-import { LinkPermissions } from './Collaborator';
-import { ButtonActions } from './ButtonActions';
-import { CollaboratorList } from './CollaboratorList';
-import { OnBoarding } from './OnBoarding';
-
-const CollaboratorContent = () => {
-  const { currentSandbox } = useAppState().editor;
-
-  const isOwner = hasPermission(currentSandbox.authorization, 'owner');
-
-  return (
-    <Container direction="vertical" style={{ borderRadius: 4 }}>
-      <Element padding={4}>
-        <LinkPermissions readOnly={!isOwner} />
-        {isOwner && (
-          <Element paddingTop={4}>
-            <AddCollaboratorForm />
-          </Element>
-        )}
-      </Element>
-
-      <HorizontalSeparator />
-
-      <CollaboratorList />
-
-      <HorizontalSeparator />
-
-      <Element padding={4}>
-        <ButtonActions />
-      </Element>
-    </Container>
-  );
-};
-
-const LOCAL_STORAGE_KEY = 'csb.onboarding-share';
-
-export const Collaborators: FunctionComponent<{
-  renderButton: (any) => JSX.Element;
-}> = ({ renderButton }) => {
-  const [onboardingVisibility, setOnboardingVisibility] = useState(false);
-
-  useEffect(() => {
-    let timer;
-
-    if (!localStorage.getItem(LOCAL_STORAGE_KEY)) {
-      /**
-       * There're some many things happening in the UI
-       * So, it waits 1s to show up the onboarding
-       */
-      timer = setTimeout(() => {
-        setOnboardingVisibility(true);
-      }, 1000);
-    }
-
-    return () => {
-      clearTimeout(timer);
-    };
-  }, []);
-
-  const onCloseOnboarding = () => {
-    setOnboardingVisibility(false);
-    localStorage.setItem(LOCAL_STORAGE_KEY, 'true');
-  };
-
-  return (
-    <OutsideClickHandler onOutsideClick={onCloseOnboarding}>
-      <Overlay event="Collaborators" content={CollaboratorContent}>
-        {open => (
-          <>
-            <OnBoarding
-              visibility={onboardingVisibility}
-              onClose={onCloseOnboarding}
-            />
-
-            {renderButton({
-              onClick: () => {
-                open();
-                onCloseOnboarding();
-              },
-            })}
-          </>
-        )}
-      </Overlay>
-    </OutsideClickHandler>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Header/Collaborators/OnBoarding.tsx b/packages/app/src/app/pages/Sandbox/Editor/Header/Collaborators/OnBoarding.tsx
deleted file mode 100644
index 14abe96a76e..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Header/Collaborators/OnBoarding.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import css from '@styled-system/css';
-import { AnimatePresence, motion } from 'framer-motion';
-import track from '@codesandbox/common/lib/utils/analytics';
-
-import { Text } from '@codesandbox/components';
-
-import { EmbedIcon } from '../icons';
-
-const OnBoarding = ({ visibility, onClose }) => (
-  <AnimatePresence>
-    {visibility && (
-      <Container
-        initial={{ opacity: 0, scale: 0.7 }}
-        animate={{ opacity: 1, scale: 1 }}
-        exit={{ opacity: 0, scale: 0.7 }}
-      >
-        <CloseButton
-          onClick={() => {
-            onClose();
-            track('Editor - Close - Share onboarding');
-          }}
-        >
-          <svg width={9} height={9} fill="none">
-            <path
-              d="M8.672.868L7.95.14 4.702 3.413 1.454.14.733.868 3.98 4.14.733 7.413l.721.727 3.248-3.272L7.95 8.14l.722-.727L5.424 4.14 8.672.868z"
-              fill="#fff"
-            />
-          </svg>
-        </CloseButton>
-
-        <Image src="/static/img/livesession-onboarding.jpeg" alt="Example" />
-        <Text as="h3" size={3} css={{ display: 'block', marginBottom: '.5em' }}>
-          <EmbedIcon
-            css={css({
-              height: 3,
-              marginRight: 1,
-              top: '1px',
-              position: 'relative',
-            })}
-          />
-          Share
-        </Text>
-        <Text css={{ opacity: 0.6, lineHeight: 1.6 }}>
-          A link is all you need to hop into a sandbox and keep development work
-          flowing.
-        </Text>
-      </Container>
-    )}
-  </AnimatePresence>
-);
-
-const CloseButton = styled.button`
-  background: none;
-  border: 0;
-  cursor: pointer;
-  opacity: 0;
-  transition: opacity 0.3s ease;
-
-  width: 44px;
-  height: 44px;
-  display: flex;
-
-  svg {
-    margin: auto;
-  }
-
-  position: absolute;
-  right: 0;
-  top: 0;
-  padding: 0;
-`;
-
-const Container = styled(motion.div)`
-  background-color: ${({ theme }) =>
-    theme['input.background'] || theme.background()};
-  color: ${({ theme }) => theme.colors.dialog.foreground};
-  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.12), 0px 16px 32px rgba(0, 0, 0, 0.24);
-
-  width: 245px;
-  padding: 1em;
-  border-radius: 4px;
-  overflow: hidden;
-
-  border: 1px solid ${({ theme }) => theme.colors.dialog.border};
-
-  position: absolute;
-  top: 30px;
-  left: calc(245px / -2 + 70px / 4);
-  z-index: 99999;
-
-  transform-origin: 50% 0%;
-
-  &:hover ${CloseButton} {
-    opacity: 1;
-  }
-`;
-
-const Image = styled.img`
-  width: calc(100% + 2em);
-  margin-left: -1em;
-  margin-top: -1em;
-`;
-
-export { OnBoarding };
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Header/Collaborators/PermissionSelect.tsx b/packages/app/src/app/pages/Sandbox/Editor/Header/Collaborators/PermissionSelect.tsx
deleted file mode 100644
index d1e8a425180..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Header/Collaborators/PermissionSelect.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import React from 'react';
-import { Menu, Icon } from '@codesandbox/components';
-import { Authorization } from 'app/graphql/types';
-
-const authToName = {
-  [Authorization.WriteCode]: 'Can edit',
-  [Authorization.Comment]: 'Can comment',
-  [Authorization.None]: 'No access',
-  [Authorization.Read]: 'Can view',
-  [Authorization.WriteProject]: 'Edit sandbox info',
-};
-
-// Based on the longest option in the mnu
-// which is "Can Comment"
-export const MENU_WIDTH = 110;
-
-interface IPermissionSelectProps {
-  additionalOptions?: { value: string; label: string }[];
-  permissions?: Authorization[];
-  pretext?: string;
-  value: Authorization;
-  onChange: (value: string) => void;
-  disabled?: boolean;
-}
-
-export const PermissionSelect = ({
-  additionalOptions = [],
-  permissions = [Authorization.WriteCode, Authorization.Read],
-  value: selectedValue,
-  onChange,
-  disabled,
-  ...props
-}: IPermissionSelectProps) => (
-  <Menu>
-    <Menu.Button css={{ paddingRight: 0 }} disabled={disabled} {...props}>
-      {authToName[selectedValue]} <Icon name="caret" size={8} marginLeft={1} />
-    </Menu.Button>
-    <Menu.List>
-      {permissions.map(auth => (
-        <Menu.Item key={auth} onSelect={() => onChange(auth)}>
-          {authToName[auth]}
-        </Menu.Item>
-      ))}
-
-      {additionalOptions.map(({ label, value }) => (
-        <Menu.Item key={label} onSelect={() => onChange(value)}>
-          {label}
-        </Menu.Item>
-      ))}
-    </Menu.List>
-  </Menu>
-);
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Header/Collaborators/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Header/Collaborators/elements.ts
deleted file mode 100644
index 34919256eac..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Header/Collaborators/elements.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import styled, { css } from 'styled-components';
-import { Stack } from '@codesandbox/components';
-
-export const Container = styled(Stack)`
-  background-color: ${({ theme }) => theme.colors.dialog.background};
-  color: ${({ theme }) => theme.colors.dialog.foreground};
-  width: 100%;
-
-  border: 1px solid ${({ theme }) => theme.colors.dialog.border};
-`;
-
-export const HorizontalSeparator = styled.hr<{ margin?: number }>`
-  width: 100%;
-  height: 1px;
-  border: none;
-  background-color: ${({ theme }) => theme.colors.dialog.border};
-  margin-block-start: 0;
-  margin-block-end: 0;
-
-  ${props =>
-    props.margin &&
-    css`
-      margin: ${props.theme.space[props.margin]}px 0;
-    `}
-`;
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Header/Collaborators/icons.tsx b/packages/app/src/app/pages/Sandbox/Editor/Header/Collaborators/icons.tsx
deleted file mode 100644
index 91e60f191d1..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Header/Collaborators/icons.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react';
-import IconBase from 'react-icons/IconBase';
-
-export const Mail = props => (
-  <IconBase
-    fill="none"
-    viewBox="0 0 32 32"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <g fill="currentColor">
-      <path d="m25.7987 8c.9804 0 1.3753 1.26415.5692 1.82219l-9.7987 6.78371c-.3424.2371-.796.2371-1.1384 0l-9.79874-6.78371c-.80606-.55803-.41116-1.82219.56921-1.82219z" />
-      <path d="m20.0833 16.0833 6.9167-4.9404v10.8571c0 .2935-.0632.5722-.1768.8232z" />
-      <path d="m18.8459 16.9672-2.2647 1.6176c-.3477.2484-.8147.2484-1.1624 0l-2.2647-1.6176-6.89218 6.8922c.22836.0907.4774.1406.73808.1406h18c.2607 0 .5097-.0499.7381-.1406z" />
-      <path d="m11.9167 16.0833-6.73995 6.7399c-.11354-.251-.17675-.5297-.17675-.8232v-10.8571z" />
-    </g>
-  </IconBase>
-);
-
-export const WarningIcon = props => (
-  <IconBase
-    viewBox="0 0 12 12"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <circle cx="6" cy="6" r="5.625" stroke="#F69935" strokeWidth="0.75" />
-    <path
-      d="M6.60354 3H5.29982L5.41701 7.20117H6.48928L6.60354 3ZM5.95315 9.07617C6.32815 9.07617 6.65334 8.7627 6.65627 8.37305C6.65334 7.98926 6.32815 7.67578 5.95315 7.67578C5.56643 7.67578 5.24709 7.98926 5.25002 8.37305C5.24709 8.7627 5.56643 9.07617 5.95315 9.07617Z"
-      fill="#F69935"
-    />
-  </IconBase>
-);
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Header/Collaborators/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Header/Collaborators/index.tsx
deleted file mode 100644
index 2da3fc11765..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Header/Collaborators/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { Collaborators } from './Collaborators';
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Header/ForkButton/ForkButton.tsx b/packages/app/src/app/pages/Sandbox/Editor/Header/ForkButton/ForkButton.tsx
deleted file mode 100644
index 70567c88feb..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Header/ForkButton/ForkButton.tsx
+++ /dev/null
@@ -1,241 +0,0 @@
-import * as React from 'react';
-import { css } from '@styled-system/css';
-import {
-  Button,
-  Menu,
-  Icon,
-  Stack,
-  Text,
-  Tooltip,
-} from '@codesandbox/components';
-import { useAppState } from 'app/overmind';
-import { TeamAvatar } from 'app/components/TeamAvatar';
-import { CurrentUser } from '@codesandbox/common/lib/types';
-import { MemberAuthorization } from 'app/graphql/types';
-import { ForkIcon } from '../icons';
-
-interface TeamItemProps {
-  name: string;
-  avatar: string | null;
-  onSelect: () => void;
-}
-
-const TeamItem = (props: TeamItemProps) => (
-  <Menu.Item
-    style={{
-      paddingTop: 8,
-      paddingBottom: 8,
-      fontWeight: 500,
-      opacity: 1,
-      cursor: 'pointer',
-    }}
-    onSelect={props.onSelect}
-  >
-    <Stack gap={2} align="center">
-      <TeamAvatar size="small" avatar={props.avatar} name={props.name} />{' '}
-      <Text>{props.name}</Text>
-    </Stack>
-  </Menu.Item>
-);
-
-const DisabledTeamItem = (props: TeamItemProps) => (
-  <Menu.Item
-    style={{
-      paddingTop: 8,
-      paddingBottom: 8,
-      fontWeight: 500,
-      opacity: 0.4,
-      cursor: 'not-allowed',
-    }}
-    onSelect={props.onSelect}
-  >
-    <Tooltip label="You don't have access to fork this sandbox">
-      <Stack gap={2} align="center">
-        <TeamAvatar size="small" avatar={props.avatar} name={props.name} />
-        <Text>{props.name}</Text>
-      </Stack>
-    </Tooltip>
-  </Menu.Item>
-);
-
-interface ITeamItem {
-  teamId: string;
-  teamName: string;
-  teamAvatar: string | null;
-  userAuthorizations: MemberAuthorization[];
-}
-
-interface TeamOrUserItemProps {
-  item: ITeamItem;
-  forkClicked: (teamId: string) => void;
-  disabled: boolean;
-}
-const TeamOrUserItem: React.FC<TeamOrUserItemProps> = props => {
-  if (props.disabled) {
-    return (
-      <DisabledTeamItem
-        name={props.item.teamName}
-        avatar={props.item.teamAvatar}
-        onSelect={() => {}}
-      />
-    );
-  }
-
-  return (
-    <TeamItem
-      onSelect={() => {
-        const item = props.item as ITeamItem;
-        props.forkClicked(item.teamId);
-      }}
-      name={props.item.teamName}
-      avatar={props.item.teamAvatar}
-    />
-  );
-};
-
-interface ForkButtonProps {
-  variant: 'primary' | 'secondary';
-  forkClicked: (teamId?: string | null) => void;
-  user: CurrentUser;
-}
-
-export const ForkButton: React.FC<ForkButtonProps> = props => {
-  const state = useAppState();
-  const { user } = props;
-  let teams: ITeamItem[] = [];
-  let currentSpace: ITeamItem | null = null;
-  let otherWorkspaces: ITeamItem[] = [];
-
-  const primarySpace = state.dashboard.teams.find(
-    t => t.id === state.primaryWorkspaceId
-  );
-
-  const allTeams: {
-    id: string;
-    name: string;
-    avatarUrl: string;
-    userAuthorizations: MemberAuthorization[];
-  }[] = [
-    ...(primarySpace ? [primarySpace] : []),
-    ...state.dashboard.teams.filter(t => state.primaryWorkspaceId),
-  ].filter(Boolean);
-
-  if (allTeams.length) {
-    teams = allTeams.map(team => ({
-      teamId: team.id,
-      teamName: team.name,
-      teamAvatar: team.avatarUrl,
-      userAuthorizations: team.userAuthorizations,
-    }));
-    currentSpace = teams.find(t => t.teamId === state.activeTeam)!;
-    otherWorkspaces = teams.filter(t => t !== currentSpace)!;
-  }
-
-  // if this user is not part of this workspace,
-  // they should not be able to fork inside the workspace
-  const inActiveWorkspace =
-    !state.activeTeam ||
-    state.editor.currentSandbox.team?.id === state.activeTeam;
-  const preventForkInsideWorkspace =
-    state.activeWorkspaceAuthorization === 'READ' || !inActiveWorkspace;
-
-  const preventForksOutsideWorkspace =
-    state.editor.currentSandbox.permissions?.preventSandboxLeaving;
-
-  // If you can't fork at all, hide the button completely
-  if (preventForkInsideWorkspace && preventForksOutsideWorkspace) return null;
-
-  return (
-    <Stack>
-      {preventForkInsideWorkspace && otherWorkspaces.length !== 0 ? null : (
-        <Button
-          onClick={() => props.forkClicked()}
-          loading={state.editor.isForkingSandbox}
-          variant={props.variant}
-          css={
-            otherWorkspaces.length
-              ? {
-                  width: 'calc(100% - 26px)',
-                  borderTopRightRadius: 0,
-                  borderBottomRightRadius: 0,
-                }
-              : {}
-          }
-        >
-          <ForkIcon css={css({ height: 3, marginRight: 1 })} /> Fork
-        </Button>
-      )}
-      {otherWorkspaces.length ? (
-        <Tooltip
-          label={
-            preventForksOutsideWorkspace
-              ? 'You don not have permission to fork this sandbox outside of the workspace'
-              : null
-          }
-        >
-          <div>
-            <Menu>
-              <Menu.Button
-                variant={props.variant}
-                disabled={preventForksOutsideWorkspace}
-                css={
-                  preventForkInsideWorkspace
-                    ? {}
-                    : {
-                        width: '26px',
-                        borderTopLeftRadius: 0,
-                        borderBottomLeftRadius: 0,
-                      }
-                }
-              >
-                {preventForkInsideWorkspace ? (
-                  <>
-                    <ForkIcon css={css({ height: 3, marginRight: 1 })} />{' '}
-                    <Text css={css({ marginRight: 2 })}>Fork</Text>
-                  </>
-                ) : null}
-
-                <Icon size={8} name="caret" />
-              </Menu.Button>
-
-              <Menu.List
-                css={css({
-                  fontSize: 2,
-                  lineHeight: 1,
-                })}
-                style={{
-                  paddingTop: 4,
-                  paddingBottom: 4,
-                  marginLeft: '-4rem',
-                  marginTop: -4,
-                }}
-              >
-                {currentSpace && (
-                  <TeamOrUserItem
-                    forkClicked={props.forkClicked}
-                    item={currentSpace}
-                    disabled={state.activeWorkspaceAuthorization === 'READ'}
-                  />
-                )}
-
-                <Menu.Divider />
-                {otherWorkspaces.map((space, i) => (
-                  <TeamOrUserItem
-                    key={space.teamId}
-                    forkClicked={props.forkClicked}
-                    item={space}
-                    disabled={
-                      space.userAuthorizations.find(
-                        authorization => authorization.userId === user.id
-                      )?.authorization === 'READ'
-                    }
-                  />
-                ))}
-              </Menu.List>
-            </Menu>
-          </div>
-        </Tooltip>
-      ) : null}
-    </Stack>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Header/ForkButton/index.ts b/packages/app/src/app/pages/Sandbox/Editor/Header/ForkButton/index.ts
deleted file mode 100644
index ab9ffdd1f10..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Header/ForkButton/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { ForkButton } from './ForkButton';
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Header/PrivacyTooltip/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Header/PrivacyTooltip/elements.ts
deleted file mode 100644
index eebf42078cf..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Header/PrivacyTooltip/elements.ts
+++ /dev/null
@@ -1,108 +0,0 @@
-import css from '@styled-system/css';
-import styled, {
-  StyledComponent,
-  StyledComponentInnerOtherProps,
-} from 'styled-components';
-
-export const Element = styled.div<{
-  margin?: number;
-  marginX?: number;
-  marginBottom?: number;
-}>(props =>
-  css({
-    margin: props.margin || null,
-    marginX: props.marginX || null,
-    marginBottom: props.marginBottom || null,
-  })
-);
-
-export const Container = styled(Element)(
-  css({
-    '.tippy-content': {
-      width: '200px',
-      backgroundColor: 'grays.600',
-      border: '1px solid',
-      borderColor: 'grays.500',
-      padding: 4,
-      borderRadius: 'medium',
-      whiteSpace: 'normal',
-    },
-  })
-);
-
-export const Text = styled(Element)<{
-  color?: string;
-  size?: string;
-  align?: string;
-}>(props =>
-  css({
-    color: props.color || 'white',
-    fontSize: props.size || 'inherit',
-    textAlign: props.align || 'left',
-  })
-);
-
-export const Link = styled.a(
-  css({
-    color: 'blues.300',
-    textDecoration: 'none',
-  })
-);
-
-const caret =
-  'data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMTAgMjQiIHdpZHRoPSIxMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjNzU3NTc1Ij48cGF0aCBkPSJtNS4wMDAwNiAxNy0zLjAwMDA2LTRoNnoiLz48cGF0aCBkPSJtNC45OTk5NCA3IDMuMDAwMDYgNGgtNnoiLz48L2c+PC9zdmc+';
-
-export const Select = (styled(Element).attrs({ as: 'select' })(({ theme }) =>
-  css({
-    appearance: 'none',
-    backgroundImage: `url(${caret})`,
-    backgroundRepeat: 'no-repeat',
-    backgroundPosition: '96% 50%',
-    width: '100%',
-    backgroundColor: 'grays.900',
-    color: 'white',
-    border: '1px solid',
-    borderColor: 'grays.500',
-    borderRadius: 'medium',
-    paddingX: 2,
-    height: 24,
-    boxSizing: 'border-box',
-    fontFamily: 'body',
-    transition: 'backgroundColor',
-    transitionDuration: theme.speeds[2],
-    ':hover': {
-      backgroundColor: 'grays.700',
-    },
-    ':disabled': {
-      opacity: 0.5,
-      cursor: 'not-allowed',
-      ':hover': {
-        backgroundColor: 'grays.900',
-      },
-    },
-  })
-) as unknown) as StyledComponent<
-  'select',
-  any,
-  StyledComponentInnerOtherProps<typeof Element>
->;
-
-// Wasn't able to use the Button from the components package due to missing
-// theme values.
-export const Button = styled.button`
-  box-sizing: border-box;
-  width: 100%;
-  border: none;
-  font-family: Inter, sans-serif;
-  background-color: #343434;
-  color: #c2c2c2;
-  padding: 4px 16px;
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 20px;
-  border-radius: 4px;
-
-  &:hover {
-    background-color: #191919;
-  }
-`;
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Header/PrivacyTooltip/icons.tsx b/packages/app/src/app/pages/Sandbox/Editor/Header/PrivacyTooltip/icons.tsx
deleted file mode 100644
index bc663f2c892..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Header/PrivacyTooltip/icons.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import React, { FunctionComponent } from 'react';
-
-export const Public: FunctionComponent = () => (
-  <svg
-    width="10"
-    height="10"
-    viewBox="0 0 10 10"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M9.3296 2.49018C8.88248 1.72418 8.27598 1.11768 7.50994 0.670575C6.74377 0.223495 5.90739 0 5.00016 0C4.09302 0 3.25648 0.223495 2.49035 0.670575C1.72428 1.11761 1.11777 1.72411 0.670647 2.49018C0.223496 3.2563 0 4.09293 0 5C0 5.90707 0.223564 6.74361 0.670578 7.50977C1.11768 8.27562 1.72418 8.88228 2.49026 9.32942C3.25639 9.77648 4.09295 10 5.00007 10C5.90719 10 6.74384 9.77648 7.50992 9.32942C8.27595 8.88244 8.88243 8.27578 9.32951 7.50977C9.77653 6.74361 10 5.907 10 5C10 4.09293 9.77653 3.25619 9.3296 2.49018ZM5.62552 7.63072C5.5819 7.57875 5.56682 7.53526 5.57994 7.5004C5.57558 7.52215 5.56037 7.54167 5.53437 7.55898C5.51269 7.53298 5.47349 7.5004 5.41714 7.46138C5.36064 7.42218 5.32164 7.38971 5.29993 7.36351C5.29118 7.35056 5.27934 7.33213 5.26411 7.30826C5.2489 7.28438 5.2294 7.25294 5.20553 7.21383C5.18179 7.17481 5.16446 7.14111 5.15356 7.11283C5.14277 7.0846 5.14177 7.06837 5.15027 7.06415C5.06786 7.09895 4.94846 7.07507 4.79224 6.9925C4.76189 6.97517 4.71624 6.92959 4.65551 6.85577C4.59478 6.78196 4.53182 6.74949 4.4667 6.75808C4.44503 6.76244 4.41571 6.77001 4.37879 6.78087C4.34196 6.79179 4.31047 6.7971 4.28441 6.7971C4.25834 6.7971 4.22361 6.78853 4.1802 6.77101C4.14554 6.75808 4.09888 6.73302 4.04028 6.6962C3.98172 6.65937 3.94151 6.63643 3.91987 6.62792C3.86346 6.59748 3.83525 6.58234 3.83525 6.58234L3.73108 6.53037C3.70502 6.51744 3.67786 6.49681 3.64965 6.46858C3.62145 6.44032 3.60307 6.411 3.59438 6.38062C3.58571 6.35465 3.57486 6.30252 3.56184 6.22433C3.54882 6.14611 3.53142 6.08979 3.50976 6.05513C3.48376 6.01176 3.44686 5.96834 3.39907 5.92497C3.35139 5.8816 3.30799 5.85973 3.26891 5.85973C3.30366 5.85973 3.30366 5.83063 3.26891 5.77187C3.23415 5.71317 3.20378 5.67087 3.17772 5.64499C3.16903 5.63623 3.14296 5.60807 3.09957 5.56023C3.05617 5.51246 3.01928 5.47134 2.9889 5.43645C2.95855 5.40175 2.9324 5.36164 2.91076 5.31598C2.88909 5.2704 2.88469 5.23248 2.89774 5.20204C2.90205 5.19775 2.89774 5.19118 2.88469 5.18254C2.87167 5.17397 2.85546 5.16514 2.83587 5.15648C2.81637 5.14788 2.7979 5.14024 2.7806 5.1337C2.76315 5.12729 2.75013 5.124 2.74149 5.124C2.75022 5.14149 2.75996 5.17287 2.77084 5.21843C2.78169 5.26408 2.79362 5.29774 2.80661 5.31943C2.81535 5.33676 2.8522 5.39979 2.9173 5.5081C3.03022 5.69039 3.08222 5.82509 3.0736 5.91186C3.04753 5.92045 3.03013 5.91621 3.02147 5.8989C3.01278 5.8816 3.00621 5.8577 3.00192 5.82728C2.99759 5.797 2.99331 5.77531 2.98888 5.7622C2.97586 5.73613 2.94223 5.70788 2.88793 5.67744C2.8337 5.64718 2.80002 5.61674 2.78703 5.58629C2.7914 5.58629 2.79674 5.58426 2.80331 5.57975C2.80985 5.57539 2.81532 5.57336 2.81961 5.57336C2.82401 5.53433 2.80123 5.48441 2.75129 5.42352C2.70135 5.36282 2.68083 5.31945 2.68945 5.29336C2.6547 5.2673 2.62432 5.21627 2.59826 5.14042C2.57222 5.06442 2.55049 5.01555 2.53313 4.99382C2.5158 4.96787 2.49416 4.94509 2.46808 4.9255C2.44201 4.90603 2.40952 4.88434 2.37041 4.86044C2.33135 4.83657 2.30528 4.82033 2.29226 4.81162C2.28355 4.80736 2.26624 4.78791 2.24018 4.75315C2.09697 4.57949 2.05358 4.48615 2.11002 4.47315C2.0536 4.48615 2.00692 4.44387 1.97003 4.34614C1.93311 4.24852 1.92121 4.17356 1.9342 4.1215L1.92121 4.11503C1.92558 4.09763 1.92773 4.04671 1.92773 3.962C1.92773 3.87733 1.9332 3.80028 1.94403 3.73086C1.95493 3.66143 1.97552 3.62665 2.00587 3.62665C1.97552 3.63098 1.95277 3.6038 1.93756 3.54531C1.92237 3.48666 1.9213 3.44648 1.93427 3.42482C1.9386 3.41178 1.95819 3.42056 1.99288 3.45088C2.02754 3.48117 2.0471 3.50082 2.05144 3.50944C2.10787 3.47898 2.12961 3.43998 2.11656 3.39219C2.10787 3.37486 2.06229 3.3293 1.97983 3.25546C1.79316 3.13399 1.69764 3.07536 1.69338 3.07965C1.71933 3.03197 1.71285 2.99074 1.67379 2.95596C1.63042 2.98203 1.60547 2.9885 1.59893 2.97555C1.59245 2.96251 1.58702 2.93872 1.58262 2.90395C1.57833 2.86926 1.56743 2.84974 1.55013 2.84539C1.52839 2.84106 1.50233 2.82373 1.47198 2.79333C1.85825 2.177 2.36822 1.69524 3.00192 1.34795C3.02794 1.34366 3.07567 1.34147 3.14511 1.34147C3.17979 1.3458 3.21238 1.35668 3.24273 1.37401C3.27312 1.39134 3.30462 1.41526 3.33711 1.44561C3.36972 1.47589 3.39467 1.49763 3.412 1.51067C3.42069 1.48461 3.40985 1.44554 3.37948 1.39346C3.3881 1.3674 3.43587 1.34133 3.52268 1.31531C3.62245 1.30229 3.68762 1.30441 3.71797 1.32186C3.69198 1.28277 3.64861 1.2285 3.58781 1.15909L3.55527 1.19158C3.52052 1.16123 3.42944 1.1764 3.28184 1.23717C3.27322 1.24145 3.25148 1.25347 3.21673 1.27295C3.18205 1.29244 3.15375 1.30658 3.13211 1.31525C3.10604 1.32393 3.08003 1.3261 3.05396 1.32177C3.26227 1.20896 3.46632 1.11984 3.666 1.05481C3.67891 1.06343 3.70066 1.0819 3.73106 1.11009C3.76141 1.13829 3.78529 1.15895 3.80266 1.17193C3.78964 1.16331 3.78093 1.16755 3.7766 1.18495C3.75927 1.23701 3.75927 1.2804 3.7766 1.31511C3.79826 1.34557 3.82759 1.36284 3.86451 1.36724C3.90143 1.37152 3.94587 1.36938 3.99795 1.36067C4.05003 1.35205 4.08481 1.34765 4.10216 1.34765L4.16729 1.35422C4.30614 1.36724 4.36043 1.35422 4.33006 1.31511C4.34306 1.33255 4.35825 1.36833 4.3756 1.4226C4.39293 1.47688 4.41252 1.51487 4.43416 1.53657C4.45589 1.51913 4.46022 1.48878 4.44718 1.44538C4.43416 1.40199 4.43416 1.37152 4.44718 1.35419C4.45147 1.34557 4.46451 1.33679 4.48624 1.32813C4.50797 1.31951 4.5329 1.30975 4.56113 1.2989C4.58933 1.288 4.60778 1.28043 4.61654 1.27612C4.64256 1.25872 4.62516 1.22832 4.56441 1.18493C4.55572 1.18057 4.53732 1.17407 4.50914 1.16538C4.48093 1.15683 4.45591 1.14803 4.43425 1.13939C4.41259 1.13077 4.38981 1.1188 4.36593 1.10361C4.34205 1.0884 4.33118 1.07107 4.3333 1.05148C4.33549 1.03189 4.34748 1.00699 4.36912 0.976595C4.39519 0.954954 4.43753 0.946244 4.49609 0.950576C4.55465 0.954863 4.59919 0.965695 4.62954 0.983071C4.74679 1.0482 4.7641 1.10689 4.68167 1.15888C4.72513 1.16317 4.77721 1.18055 4.83796 1.2109C4.89866 1.24132 4.92254 1.27388 4.90956 1.30863C4.94429 1.24353 4.97898 1.2109 5.01375 1.2109C5.03541 1.2153 5.05612 1.24462 5.07559 1.29887C5.09509 1.3531 5.10699 1.38238 5.1113 1.38678C5.1461 1.43446 5.1806 1.44534 5.21556 1.41927C5.25022 1.39326 5.28611 1.35529 5.32294 1.30535C5.35977 1.25548 5.38038 1.2327 5.38476 1.23703C5.34137 1.21975 5.33683 1.20235 5.37181 1.18497C5.43673 1.14591 5.49543 1.13503 5.54755 1.15248C5.56048 1.1611 5.57797 1.18068 5.5995 1.21097C5.63845 1.2892 5.63197 1.32603 5.58 1.3217C5.61902 1.35645 5.63519 1.39989 5.62887 1.45191C5.62233 1.50399 5.58851 1.52789 5.52781 1.52351C5.50619 1.52351 5.47458 1.51261 5.43329 1.49097C5.39208 1.4693 5.36064 1.4574 5.33886 1.45519C5.31717 1.45293 5.28673 1.4649 5.24771 1.49097C5.23038 1.5127 5.2076 1.54962 5.17935 1.60165C5.15112 1.65383 5.12613 1.69066 5.10444 1.71232C5.03938 1.77742 4.93077 1.80134 4.77888 1.78392C4.79192 1.78392 4.79078 1.79694 4.77559 1.82301C4.76034 1.84902 4.73981 1.87837 4.71375 1.91089C4.68769 1.94343 4.6725 1.96188 4.66821 1.96621C4.62913 2.0096 4.60311 2.05954 4.59006 2.11596C4.59006 2.12465 4.58788 2.15397 4.5835 2.20382C4.5791 2.25376 4.57048 2.29179 4.55743 2.31779C4.60952 2.30477 4.65077 2.3309 4.68112 2.39594C4.70718 2.45673 4.70718 2.48927 4.68112 2.49365C4.82439 2.47203 4.95027 2.48065 5.05886 2.51971C5.21508 2.57613 5.3042 2.63254 5.32588 2.68898C5.35181 2.64987 5.4147 2.64766 5.51458 2.68241C5.55367 2.70408 5.58824 2.76927 5.61881 2.8777C5.63615 2.94276 5.66549 2.99924 5.7067 3.04695C5.748 3.09467 5.79239 3.10767 5.84021 3.08601L5.85966 3.07299C5.87706 3.06437 5.89111 3.05673 5.90194 3.05023C5.91286 3.04375 5.92472 3.03504 5.93767 3.02417C5.95079 3.01331 5.95843 3.00355 5.96045 2.99493C5.96248 2.98627 5.95936 2.97749 5.95079 2.96887C5.92034 2.94281 5.89756 2.90703 5.88242 2.86151C5.86737 2.81593 5.87063 2.77575 5.89227 2.74097C5.9052 2.72364 5.93995 2.69758 5.99635 2.66283C6.05285 2.62805 6.08758 2.59337 6.10051 2.55864C6.11809 2.50222 6.09623 2.45555 6.0355 2.4186C5.97473 2.38178 5.94429 2.34814 5.94429 2.3177C5.94429 2.29597 5.9584 2.26997 5.98656 2.23955C6.01489 2.2092 6.02684 2.1809 6.02239 2.15493C6.02239 2.14182 6.01473 2.11475 5.99959 2.0735C5.98454 2.03218 5.97571 2.00183 5.97359 1.98231C5.9714 1.96277 5.98125 1.93999 6.00285 1.91399C6.03313 1.89659 6.10478 1.89769 6.21761 1.91718C6.33046 1.93677 6.4043 1.95739 6.4391 1.97903C6.45219 1.98765 6.48037 2.00069 6.52377 2.01811C6.56714 2.03535 6.60515 2.0538 6.63778 2.07341C6.67016 2.09291 6.68863 2.11128 6.69294 2.12868H6.66047C6.69082 2.15482 6.70934 2.1851 6.71572 2.21987C6.72229 2.25472 6.70606 2.28069 6.66704 2.29811C6.69294 2.29371 6.72781 2.30026 6.7712 2.31761C6.84066 2.34363 6.84285 2.36755 6.77775 2.38921C6.7907 2.38481 6.80913 2.38055 6.83293 2.37617C6.85681 2.37183 6.87516 2.36529 6.88825 2.35667C6.89685 2.35229 6.90775 2.34477 6.92073 2.33387C6.93384 2.32301 6.94351 2.31647 6.95007 2.31439C6.95662 2.31225 6.96629 2.30999 6.9794 2.30783C6.99235 2.30568 7.00533 2.30897 7.01826 2.31759C7.02279 2.31759 7.03246 2.30671 7.0476 2.28505C7.06265 2.2634 7.07914 2.24167 7.09638 2.22001C7.1138 2.19835 7.12885 2.18752 7.14196 2.18752C7.15483 2.18752 7.16687 2.19285 7.17761 2.20371C7.1886 2.21461 7.1971 2.22649 7.20369 2.23953C7.21024 2.25257 7.21662 2.26669 7.22319 2.28178C7.22973 2.29697 7.23505 2.30899 7.23943 2.31761C7.248 2.33927 7.26875 2.36214 7.30122 2.38593C7.3337 2.40973 7.35429 2.43258 7.36302 2.45425C7.3674 2.46729 7.3759 2.49985 7.38902 2.552C7.40197 2.60409 7.41946 2.63986 7.44108 2.65936C7.46276 2.67895 7.4953 2.69518 7.53867 2.70818C7.54736 2.71258 7.56702 2.71037 7.59728 2.70175C7.62756 2.69302 7.65262 2.69085 7.67212 2.69518C7.69178 2.69947 7.70145 2.7168 7.70145 2.74727C7.72744 2.7212 7.74039 2.7038 7.74039 2.69518C7.74484 2.75162 7.75882 2.79723 7.78285 2.83191C7.80673 2.86657 7.84465 2.88185 7.89678 2.87745L7.88367 3.02072C7.87071 3.04239 7.83817 3.05862 7.78598 3.06945C7.73385 3.08035 7.70138 3.09018 7.68826 3.0988C7.67531 3.10313 7.6438 3.12918 7.59384 3.17697C7.5439 3.22477 7.52344 3.25297 7.53204 3.26159C7.45838 3.17911 7.34754 3.15524 7.20004 3.18999C7.03518 3.21603 6.92223 3.24207 6.86153 3.26814C6.79214 3.30291 6.7443 3.33541 6.71826 3.36576C6.7139 3.37009 6.70647 3.38535 6.69554 3.41134C6.68469 3.43736 6.67386 3.46128 6.66307 3.48295C6.65208 3.50461 6.64248 3.51546 6.63381 3.51546C6.65995 3.51124 6.68916 3.49052 6.7217 3.45369C6.75433 3.41677 6.77492 3.39625 6.78352 3.39185C6.89626 3.3181 6.98959 3.29204 7.06382 3.31425C7.15927 3.34031 7.17448 3.37506 7.10931 3.41846C7.1008 3.42708 7.07786 3.43034 7.04104 3.42822C7.00421 3.42607 6.97922 3.42708 6.96613 3.4315C7.0053 3.44012 7.03775 3.45209 7.06398 3.46719C7.08988 3.48238 7.09645 3.50301 7.08341 3.52903C7.1528 3.56812 7.16589 3.61151 7.12251 3.65931C7.06601 3.71581 6.9989 3.7396 6.9207 3.73091C6.93382 3.73091 6.93382 3.73962 6.9207 3.75695L6.8099 3.82855C6.8013 3.83282 6.77307 3.84365 6.7253 3.86109C6.67755 3.87833 6.64494 3.89801 6.62761 3.91965C6.61466 3.93703 6.60812 3.96305 6.60812 3.99789C6.60812 4.03266 6.60593 4.05873 6.60157 4.07606C6.59728 4.0935 6.57986 4.0977 6.5496 4.08908C6.53649 4.1151 6.49638 4.13573 6.42911 4.15083C6.36184 4.16602 6.31737 4.1888 6.29566 4.21915C6.32157 4.25392 6.31954 4.28861 6.2891 4.32336C6.23697 4.36682 6.19141 4.36242 6.15239 4.31034C6.1307 4.31903 6.11438 4.34069 6.10352 4.37546C6.09276 4.41022 6.07639 4.43409 6.05481 4.44707C6.08526 4.49482 6.08074 4.52964 6.04188 4.55123C6.0461 4.55123 6.05593 4.55563 6.07105 4.56428C6.08619 4.57294 6.10243 4.58377 6.11992 4.59682C6.13725 4.60986 6.14799 4.6164 6.15239 4.6164C6.13506 4.65537 6.11109 4.67489 6.08074 4.67489C6.10681 4.74438 6.07433 4.82038 5.98321 4.90279C5.9657 4.92012 5.93856 4.93745 5.90174 4.95487C5.86466 4.9722 5.83111 4.98627 5.80067 4.99715C5.77023 5.00803 5.75299 5.0156 5.74863 5.01993C5.70524 5.05906 5.67261 5.09917 5.65101 5.14038C5.6294 5.18167 5.62611 5.22176 5.64116 5.26087C5.65639 5.30005 5.69651 5.32595 5.76172 5.33906L5.76804 5.3911V5.50824L5.77458 5.56037C5.77903 5.59072 5.78231 5.61788 5.78444 5.64182C5.78656 5.66572 5.78656 5.69598 5.78444 5.73296C5.78231 5.76979 5.77251 5.79047 5.75518 5.79469C5.73794 5.79914 5.71404 5.79469 5.6836 5.78167C5.64873 5.76434 5.6076 5.66884 5.55975 5.49526C5.55109 5.45189 5.52496 5.3999 5.48156 5.33904C5.45988 5.36072 5.44145 5.37477 5.42631 5.38127C5.41124 5.38781 5.40022 5.389 5.39391 5.38455C5.38736 5.38027 5.37541 5.37044 5.35804 5.3553C5.3407 5.34016 5.32563 5.32814 5.31254 5.31956C5.29083 5.30661 5.25291 5.29567 5.19853 5.28709C5.14437 5.27843 5.11055 5.2675 5.09769 5.25455C4.99341 5.33281 4.93043 5.31313 4.90876 5.19611C4.90014 5.21773 4.90119 5.24698 4.91205 5.28399C4.92295 5.32089 4.92835 5.34143 4.92835 5.34579C4.898 5.40229 4.85027 5.40649 4.78515 5.35874C4.75908 5.33281 4.69938 5.32955 4.60605 5.34905C4.51272 5.3685 4.45087 5.37176 4.42052 5.35874C4.42492 5.35874 4.43354 5.36522 4.44659 5.37831C4.45958 5.38681 4.46832 5.39338 4.47263 5.39776C4.46825 5.41518 4.46177 5.42811 4.45304 5.43677C4.44433 5.44537 4.43564 5.44865 4.427 5.44662C4.41831 5.44444 4.40855 5.44444 4.39765 5.44662C4.3868 5.44865 4.37706 5.45191 4.36835 5.45629C4.35099 5.46924 4.32933 5.49203 4.30327 5.52457C4.27725 5.55713 4.25773 5.57772 4.24471 5.58629C4.2707 5.65575 4.28267 5.70898 4.28053 5.7458C4.27827 5.78279 4.27184 5.83704 4.26094 5.9086C4.25004 5.98015 4.24464 6.03775 4.24464 6.08122C4.24464 6.15049 4.26528 6.23103 4.30648 6.32204C4.34773 6.41319 4.39653 6.47608 4.45297 6.51087C4.48344 6.5282 4.53554 6.53897 4.60926 6.54328C4.68303 6.5477 4.73514 6.54328 4.76549 6.53033C4.79155 6.51747 4.81103 6.50216 4.82405 6.48483C4.83707 6.4675 4.84797 6.44237 4.85659 6.40992C4.86528 6.37745 4.87185 6.35467 4.87618 6.34172C4.90653 6.25915 4.96294 6.21578 5.04531 6.2114C5.0976 6.20704 5.13536 6.21265 5.1594 6.22764C5.18327 6.24285 5.19296 6.26344 5.18858 6.28952C5.18421 6.3155 5.17556 6.34266 5.16266 6.37089C5.14957 6.39914 5.13333 6.43052 5.11377 6.46534C5.09436 6.5002 5.08234 6.5262 5.07815 6.54362C5.06946 6.57833 5.06175 6.6271 5.05537 6.69018C5.04882 6.75307 5.04333 6.79108 5.03897 6.80417C5.04773 6.80841 5.08022 6.81058 5.13659 6.81058C5.13659 6.80198 5.13988 6.78778 5.14642 6.76828C5.15283 6.74878 5.15611 6.73683 5.15611 6.73254C5.17789 6.76734 5.21262 6.7867 5.26037 6.79108C5.30812 6.79544 5.34292 6.77813 5.3646 6.73902C5.37336 6.75206 5.3994 6.78467 5.44282 6.8368C5.48619 6.88877 5.51007 6.93216 5.51447 6.96696C5.51882 6.98445 5.5274 7.01255 5.54037 7.05172C5.55348 7.09074 5.55786 7.1179 5.55348 7.13318C5.54913 7.14816 5.5274 7.15589 5.4884 7.15589C5.47107 7.15589 5.46017 7.16243 5.45593 7.17538C5.45142 7.1885 5.45142 7.20464 5.45593 7.22416C5.46031 7.24366 5.46578 7.26217 5.47217 7.2795C5.47864 7.29674 5.48731 7.31533 5.49809 7.33485C5.50915 7.35421 5.51449 7.3662 5.51449 7.37056C5.59252 7.51367 5.69897 7.55278 5.83349 7.48779C5.83349 7.61359 5.80307 7.68303 5.74218 7.69598C5.70786 7.7046 5.66891 7.68269 5.62552 7.63072ZM5.72275 9.10155C5.71418 9.05816 5.7098 9.0235 5.71028 8.99759C5.70574 8.96279 5.72104 8.91612 5.75568 8.85758C5.79039 8.79907 5.80772 8.75449 5.80772 8.72414C5.73828 8.70681 5.71226 8.65032 5.72946 8.55487C5.73819 8.48972 5.80108 8.40293 5.91829 8.29445C6.00084 8.22064 6.02677 8.11636 5.99648 7.98194C5.98337 7.9255 5.97245 7.84295 5.96385 7.73445C5.95528 7.62591 5.94652 7.54997 5.93779 7.5066C5.93779 7.51955 5.95838 7.5315 5.99974 7.54233C6.04097 7.5531 6.06592 7.5673 6.07459 7.58448C6.08325 7.57161 6.09404 7.54765 6.10713 7.51299C6.12008 7.47819 6.13321 7.45222 6.14598 7.43479C6.15474 7.42177 6.17314 7.40554 6.20142 7.38593C6.22965 7.36643 6.24807 7.35457 6.25674 7.35019C6.26524 7.34591 6.2849 7.33186 6.31518 7.30792C6.3456 7.28404 6.3706 7.26568 6.39016 7.25266C6.40982 7.23964 6.43565 7.22988 6.46829 7.22348C6.50092 7.21693 6.52363 7.22662 6.53656 7.25266C6.55834 7.27875 6.55405 7.31884 6.52363 7.37316C6.49319 7.42747 6.49319 7.46546 6.52363 7.48724C6.52805 7.47413 6.53229 7.44581 6.53656 7.40241C6.541 7.35902 6.55405 7.32648 6.57567 7.30463C6.60173 7.27873 6.62661 7.26343 6.65057 7.25921C6.67445 7.25469 6.69607 7.25796 6.71552 7.26897C6.73518 7.27982 6.75796 7.29481 6.78388 7.31446C6.80995 7.33396 6.8338 7.34593 6.85551 7.35019C6.92059 7.3719 6.99878 7.41965 7.08993 7.49347C7.08557 7.48904 7.08557 7.48364 7.08993 7.47707C7.09431 7.47069 7.10288 7.46414 7.11601 7.45757C7.12897 7.45119 7.14082 7.44464 7.15175 7.43808C7.16251 7.4316 7.17437 7.42638 7.18748 7.42193L7.20698 7.41539C7.23726 7.41539 7.25901 7.41327 7.27199 7.40882C7.28492 7.40453 7.30359 7.40882 7.32731 7.42193C7.35105 7.43489 7.36744 7.44465 7.37602 7.45119C7.38475 7.45757 7.39989 7.46952 7.4216 7.48692C7.44329 7.50425 7.45859 7.51736 7.467 7.52594C7.48012 7.53451 7.50399 7.54981 7.53865 7.57152C7.57345 7.59321 7.60061 7.61054 7.62013 7.62347C7.63978 7.63642 7.65709 7.6561 7.67207 7.68191C7.68722 7.70814 7.69285 7.73632 7.68847 7.76674C7.71456 7.77112 7.76653 7.78836 7.84472 7.81871C7.85783 7.82731 7.88483 7.83504 7.92617 7.84142C7.9674 7.84797 7.99454 7.85782 8.00756 7.87068C7.37869 8.53514 6.61683 8.9453 5.72275 9.10155Z"
-      fill="currentColor"
-    />
-  </svg>
-);
-
-export const Unlisted: FunctionComponent = () => (
-  <svg
-    width="12"
-    height="12"
-    viewBox="0 0 12 12"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M5.59849 8.36744L6.52962 7.43657C5.93459 7.37598 5.47177 7.16668 5.15221 6.84721C4.24312 5.93838 4.24312 4.66602 5.1467 3.7627L7.00345 1.90648C7.91255 1.00316 9.17976 1.00316 10.0889 1.90648C11.0034 2.82082 10.9979 4.09318 10.0944 4.9965L9.27343 5.81721C9.46627 6.26335 9.5434 6.82518 9.41667 7.31539L10.9594 5.77313C12.3478 4.40163 12.3478 2.43525 10.9539 1.04171C9.55993 -0.351824 7.60401 -0.340814 6.22659 1.03621L4.27618 2.98055C2.89877 4.36307 2.89325 6.32395 4.2872 7.71197C4.58472 8.01492 5.01998 8.25727 5.59849 8.36744ZM6.40291 3.6305L5.47177 4.56687C6.06681 4.62746 6.52962 4.83125 6.84918 5.15073C7.75828 6.05956 7.75828 7.33742 6.8547 8.23524L4.99794 10.0915C4.08884 10.9948 2.81611 11.0003 1.91253 10.0915C0.99794 9.17712 1.00345 7.91027 1.90703 7.00694L2.72797 6.18625C2.53513 5.74009 2.45799 5.17276 2.58472 4.68254L1.03651 6.22479C-0.346419 7.60182 -0.346419 9.56268 1.04201 10.9562C2.44146 12.3498 4.39739 12.3443 5.7748 10.9617L7.71971 9.01739C9.10263 7.63486 9.10814 5.6795 7.71419 4.28597C7.41667 3.98302 6.98141 3.74067 6.40291 3.6305Z"
-      fill="currentColor"
-    />
-  </svg>
-);
-
-export const Private: FunctionComponent = () => (
-  <svg
-    width="9"
-    height="14"
-    viewBox="0 0 9 14"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M1.12502 3.375C1.12502 1.51104 2.63606 0 4.50002 0C6.36398 0 7.87502 1.51104 7.87502 3.375V6H8C8.55229 6 9 6.44772 9 7V13C9 13.5523 8.55229 14 8 14H1C0.447715 14 0 13.5523 0 13V7C0 6.44772 0.447715 6 1 6H1.12502V3.375ZM7.00002 6H2.00002V3.5C2.00002 2.11929 3.11931 1 4.50002 1C5.88073 1 7.00002 2.11929 7.00002 3.5V6Z"
-      fill="currentColor"
-    />
-  </svg>
-);
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Header/PrivacyTooltip/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Header/PrivacyTooltip/index.tsx
deleted file mode 100644
index c7bc43b3c33..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Header/PrivacyTooltip/index.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import Tooltip from '@codesandbox/common/lib/components/Tooltip';
-import track from '@codesandbox/common/lib/utils/analytics';
-import theme from '@codesandbox/components/lib/design-language/theme';
-import { useWorkspaceSubscription } from 'app/hooks/useWorkspaceSubscription';
-import { useAppState, useActions } from 'app/overmind';
-import React, { ChangeEvent, FunctionComponent, useState } from 'react';
-import { ThemeProvider } from 'styled-components';
-
-import { Container, Select, Text, Button } from './elements';
-import { Private, Public, Unlisted } from './icons';
-
-export const PrivacyTooltip: FunctionComponent = () => {
-  const { sandboxPrivacyChanged } = useActions().workspace;
-  const {
-    editor: {
-      currentSandbox: { owned, privacy },
-    },
-  } = useAppState();
-  const { isPro, isFree } = useWorkspaceSubscription();
-  const [privacyValue, setPrivacyValue] = useState<0 | 1 | 2>(privacy);
-
-  const config = {
-    0: {
-      description: 'Everyone can see this Sandbox',
-      Icon: Public,
-    },
-    1: {
-      description:
-        'Only people with a private link are able to see this Sandbox',
-      Icon: Unlisted,
-    },
-    2: {
-      description: 'Only you can see this Sandbox.',
-      Icon: Private,
-    },
-  };
-
-  const onChange = (event: ChangeEvent<HTMLSelectElement>) => {
-    const value = Number(event.target.value) as 0 | 1 | 2;
-
-    if (isPro) {
-      sandboxPrivacyChanged({ privacy: value, source: 'tooltip' });
-    }
-
-    setPrivacyValue(value);
-  };
-
-  const setPrivacyToPublic = () => {
-    sandboxPrivacyChanged({ privacy: 0, source: 'tooltip' });
-  };
-
-  const { description, Icon } = config[privacy];
-
-  const Owned = () => {
-    return <Text color="grays.300">Adjust privacy settings.</Text>;
-  };
-
-  return (
-    <ThemeProvider theme={theme}>
-      <Container>
-        <Tooltip
-          content={
-            <>
-              <Text size="3" marginBottom={3}>
-                {owned ? <Owned /> : `The author has set privacy to ${privacy}`}
-              </Text>
-
-              {isFree && privacy !== 0 ? (
-                <Button type="button" onClick={setPrivacyToPublic}>
-                  Make sandbox public
-                </Button>
-              ) : null}
-
-              <Text
-                as="label"
-                htmlFor="privacy-select"
-                size="3"
-                color="grays.300"
-                css={{
-                  display: 'block',
-                  marginBottom: '4px',
-                  marginTop: '24px',
-                }}
-              >
-                Privacy
-              </Text>
-
-              <Select
-                id="privacy-select"
-                disabled={!owned || !isPro}
-                onChange={onChange}
-                value={privacyValue}
-              >
-                <option value={0}>Public</option>
-
-                <option value={1} disabled={isFree}>
-                  Unlisted
-                </option>
-
-                <option value={2} disabled={isFree}>
-                  Private
-                </option>
-              </Select>
-
-              <Text css={{ paddingTop: '8px' }} size="2" color="grays.300">
-                {description}
-              </Text>
-            </>
-          }
-          delay={0}
-          interactive
-          onShown={() => track('Sandbox - Open Privacy Tooltip', { owned })}
-        >
-          <Icon />
-        </Tooltip>
-      </Container>
-    </ThemeProvider>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Header/SandboxName/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Header/SandboxName/elements.ts
deleted file mode 100644
index d8c515425c4..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Header/SandboxName/elements.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import AutosizeInput from 'react-input-autosize';
-import styled, { css } from 'styled-components';
-
-export const Folder = styled.div`
-  display: none;
-
-  @media screen and (min-width: 950px) {
-    display: block;
-  }
-`;
-
-export const Form = styled.form`
-  position: relative;
-  top: -1px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-
-export const NameInput = styled(AutosizeInput)`
-  ${({ theme }) => css`
-    input {
-      display: inline-block;
-      background-color: transparent;
-      outline: 0;
-      border: 0;
-      margin: 0;
-      padding: 0;
-      text-align: center;
-      color: ${theme['input.foreground']};
-      font: inherit;
-    }
-  `};
-`;
-
-export const Main = styled.div`
-  display: none;
-  transition: opacity 0.25s ease-in-out;
-  opacity: 0;
-  z-index: 10;
-
-  @media screen and (min-width: 826px) {
-    display: block;
-  }
-`;
-
-export const TemplateBadge = styled.label`
-  ${({ theme }) => css`
-    background: ${theme['activityBarBadge.background']};
-    color: ${theme['activityBarBadge.foreground']};
-    font-family: 'Inter', sans-serif;
-    font-weight: 500;
-    font-size: 11px;
-    padding: 0 8px;
-    border-radius: 2px;
-    margin-left: 1rem;
-    height: 1.5rem;
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    cursor: default;
-  `};
-`;
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Header/SandboxName/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Header/SandboxName/index.tsx
deleted file mode 100644
index 95aaa78d4cd..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Header/SandboxName/index.tsx
+++ /dev/null
@@ -1,295 +0,0 @@
-import { basename } from 'path';
-
-import Tooltip from '@codesandbox/common/lib/components/Tooltip';
-import track from '@codesandbox/common/lib/utils/analytics';
-import { getSandboxName } from '@codesandbox/common/lib/utils/get-sandbox-name';
-import { ESC } from '@codesandbox/common/lib/utils/keycodes';
-import { Button, Element, Stack, Text } from '@codesandbox/components';
-import { github as GitHubIcon } from '@codesandbox/components/lib/components/Icon/icons';
-import css from '@styled-system/css';
-import { GitInfo, Sandbox } from '@codesandbox/common/lib/types';
-import { useAppState, useActions } from 'app/overmind';
-import React, {
-  ChangeEvent,
-  CSSProperties,
-  FunctionComponent,
-  KeyboardEvent,
-  useEffect,
-  useState,
-} from 'react';
-import { Link } from 'react-router-dom';
-
-import { hasPermission } from '@codesandbox/common/lib/utils/permission';
-import { PrivacyTooltip } from '../PrivacyTooltip';
-import { Folder, Form, Main, NameInput, TemplateBadge } from './elements';
-
-const SandboxNameElement: React.FC<{
-  git: GitInfo;
-  handleBlur: () => void;
-  handleInputUpdate: (e: ChangeEvent<HTMLInputElement>) => void;
-  handleKeyUp: (e: KeyboardEvent<HTMLInputElement>) => void;
-  handleNameClick: () => void;
-  owned: boolean;
-  sandboxName: string;
-  submitNameChange: (event: ChangeEvent<HTMLFormElement>) => void;
-  updatingName: boolean;
-  value: string;
-}> = ({
-  git,
-  handleBlur,
-  handleInputUpdate,
-  handleKeyUp,
-  sandboxName,
-  submitNameChange,
-  updatingName,
-  value,
-  owned,
-  handleNameClick,
-}) => {
-  if (updatingName && !git) {
-    return (
-      <Form onSubmit={submitNameChange}>
-        <NameInput
-          autoFocus
-          ref={(el: HTMLInputElement) => {
-            if (el) {
-              el.focus();
-            }
-          }}
-          onBlur={handleBlur}
-          onChange={handleInputUpdate}
-          onKeyUp={handleKeyUp}
-          placeholder={name}
-          value={value}
-          arial-label="sandbox name"
-        />
-      </Form>
-    );
-  }
-
-  if (!git) {
-    return owned ? (
-      <Button
-        variant="link"
-        css={css({ fontSize: 3, width: 'auto', color: 'foreground' })}
-        arial-label="Change sandbox name"
-        onClick={handleNameClick}
-      >
-        {sandboxName}
-      </Button>
-    ) : (
-      <Text>{sandboxName}</Text>
-    );
-  }
-
-  return null;
-};
-
-const getFolderName = (sandbox: Sandbox) => {
-  if (!sandbox) {
-    return 'Drafts';
-  }
-
-  if (sandbox.collection) {
-    const base = basename(sandbox.collection.path);
-
-    return base || 'Sandboxes';
-  }
-
-  return 'Drafts';
-};
-
-export const SandboxName: FunctionComponent = () => {
-  const {
-    modals,
-    workspace: { sandboxInfoUpdated, valueChanged },
-  } = useActions();
-  const {
-    editor: { currentSandbox },
-    isLoggedIn,
-  } = useAppState();
-  const [updatingName, setUpdatingName] = useState(false);
-  const [name, setName] = useState('');
-  const [fadeIn, setFadeIn] = useState(false);
-
-  useEffect(() => {
-    if (!fadeIn) {
-      const id = setTimeout(() => {
-        setFadeIn(true);
-      }, 500);
-      return () => clearTimeout(id);
-    }
-
-    return () => {};
-  }, [fadeIn]);
-
-  const sandboxName =
-    (currentSandbox && getSandboxName(currentSandbox)) || 'Untitled';
-
-  const updateSandboxInfo = () => {
-    sandboxInfoUpdated();
-
-    setUpdatingName(false);
-  };
-
-  const submitNameChange = (event: ChangeEvent<HTMLFormElement>) => {
-    event.preventDefault();
-
-    updateSandboxInfo();
-
-    track('Change Sandbox Name From Header');
-  };
-
-  const handleNameClick = () => {
-    setUpdatingName(true);
-
-    setName(sandboxName);
-  };
-
-  const handleKeyUp = (e: KeyboardEvent<HTMLInputElement>) => {
-    if (e.keyCode === ESC) {
-      updateSandboxInfo();
-    }
-  };
-
-  const handleBlur = () => {
-    updateSandboxInfo();
-  };
-
-  const handleInputUpdate = (e: ChangeEvent<HTMLInputElement>) => {
-    valueChanged({
-      field: 'title',
-      value: e.target.value,
-    });
-
-    setName(e.target.value);
-  };
-
-  const value = name !== 'Untitled' && updatingName ? name : '';
-
-  if (!currentSandbox) {
-    return null;
-  }
-
-  const folderName = getFolderName(currentSandbox);
-
-  const { customTemplate } = currentSandbox;
-
-  const git =
-    !updatingName && (currentSandbox.git || currentSandbox.originalGit);
-
-  const owned = hasPermission(currentSandbox.authorization, 'owner');
-
-  const disabledStyle: CSSProperties = {
-    opacity: updatingName ? 0 : 1,
-    pointerEvents: updatingName ? 'none' : 'auto',
-  };
-
-  return (
-    <Main style={fadeIn ? { opacity: 1 } : null}>
-      <Stack align="center">
-        {!customTemplate && owned && !git && (
-          <Folder style={disabledStyle}>
-            {isLoggedIn ? (
-              <Button
-                variant="link"
-                css={css({ fontSize: 3, width: 'auto' })}
-                onClick={() =>
-                  modals.moveSandboxModal.open({
-                    sandboxIds: [currentSandbox.id],
-                    preventSandboxLeaving:
-                      currentSandbox.permissions.preventSandboxLeaving,
-                  })
-                }
-                arial-label="Change sandbox folder"
-              >
-                {folderName}
-              </Button>
-            ) : (
-              'Anonymous '
-            )}
-            <Text role="presentation" variant="muted">
-              /
-            </Text>
-          </Folder>
-        )}
-
-        <SandboxNameElement
-          git={git}
-          handleBlur={handleBlur}
-          handleInputUpdate={handleInputUpdate}
-          handleKeyUp={handleKeyUp}
-          handleNameClick={handleNameClick}
-          owned={owned}
-          sandboxName={sandboxName}
-          submitNameChange={submitNameChange}
-          updatingName={updatingName}
-          value={value}
-        />
-
-        {!git ? (
-          <Element as="span" marginLeft={owned ? 0 : 2} style={disabledStyle}>
-            <PrivacyTooltip />
-          </Element>
-        ) : null}
-
-        {!updatingName &&
-        currentSandbox.customTemplate &&
-        !currentSandbox.git &&
-        !currentSandbox.baseGit ? (
-          <Tooltip
-            content={
-              <>
-                This sandbox is a template, you can learn about templates in the{' '}
-                <Link target="_blank" to="/docs/learn/sandboxes/templates">
-                  docs
-                </Link>
-                .
-              </>
-            }
-            delay={0}
-            interactive
-            placement="bottom"
-          >
-            <TemplateBadge color={customTemplate.color}>Template</TemplateBadge>
-          </Tooltip>
-        ) : null}
-        {git ? (
-          <Tooltip
-            content={
-              <>
-                This sandbox is a GitHub sandbox, you can learn more about
-                GitHub sandboxes in the{' '}
-                <Link target="_blank" to="/docs/git">
-                  docs
-                </Link>
-                .
-              </>
-            }
-            delay={0}
-            interactive
-            placement="bottom"
-          >
-            <TemplateBadge style={{ margin: 0, cursor: 'default' }}>
-              <GitHubIcon width={15} />
-              <Text paddingLeft={2}>
-                <Text css={css({ opacity: 0.8 })}>
-                  {git.username} / {git.repo} /{' '}
-                </Text>
-                <Text>{git.branch}</Text>
-                <Text css={css({ opacity: 0.8 })}>
-                  {git.path ? ' /' + git.path : null}
-                </Text>
-              </Text>
-            </TemplateBadge>
-          </Tooltip>
-        ) : null}
-        {currentSandbox.originalGit ? (
-          <Element marginLeft={2}>
-            <PrivacyTooltip />
-          </Element>
-        ) : null}
-      </Stack>
-    </Main>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Header/WorkspaceName/WorkspaceName.tsx b/packages/app/src/app/pages/Sandbox/Editor/Header/WorkspaceName/WorkspaceName.tsx
deleted file mode 100644
index 8ead7a15280..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Header/WorkspaceName/WorkspaceName.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import * as React from 'react';
-import { Link as RouterLink } from 'react-router-dom';
-import { dashboardUrl } from '@codesandbox/common/lib/utils/url-generator';
-
-import { Stack, Text } from '@codesandbox/components';
-
-export const WorkspaceName: React.FC<{
-  name: string;
-}> = ({ name }) => (
-  <Stack gap={2} align="center">
-    <RouterLink
-      to={dashboardUrl()}
-      css={{ lineHeight: 1, textDecoration: 'none', color: 'inherit' }}
-    >
-      <Text css={{ lineHeight: 1 }}>{name}</Text>
-    </RouterLink>
-  </Stack>
-);
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Header/WorkspaceName/index.ts b/packages/app/src/app/pages/Sandbox/Editor/Header/WorkspaceName/index.ts
deleted file mode 100644
index 19232a90f40..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Header/WorkspaceName/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { WorkspaceName } from './WorkspaceName';
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Header/icons.tsx b/packages/app/src/app/pages/Sandbox/Editor/Header/icons.tsx
deleted file mode 100644
index abb7715b063..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Header/icons.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import React from 'react';
-
-export const ReloadIcon = props => (
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M14.1064 9.14286C13.5833 12.3547 10.8928 14.75 7.72414 14.75C4.18955 14.75 1.25 11.7696 1.25 8C1.25 4.23037 4.18955 1.25 7.72414 1.25C10.3759 1.25 12.6927 2.92745 13.6846 5.35714L11.0345 5.35714V6.85714H14.1064H14.3448L14.3448 6.85714L15.3701 6.85714H15.8448V1.14286L14.3448 1.14286V3.87703C12.9932 1.5538 10.5339 0 7.72414 0C3.45821 0 0 3.58172 0 8C0 12.4183 3.45821 16 7.72414 16C11.6154 16 14.8346 13.0198 15.3701 9.14286H14.1064Z"
-      fill="currentColor"
-    />
-  </svg>
-);
-
-export const LikeIcon = props => (
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <path
-      d="M7.88809 15C21.8973 7.50193 14.9691 -2.70201 7.8881 2.35226C1.1128 -2.70201 -5.8154 7.50192 7.88809 15Z"
-      fill="currentColor"
-    />
-  </svg>
-);
-
-export const EmbedIcon = props => (
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M9.6 10.4125V13.6937L16 8.0875L9.6 2.5V5.6875C3.38 6.49375 0.9 10.4875 0 14.5C2.22 11.6875 5.16 10.4125 9.6 10.4125V10.4125Z"
-      fill="currentColor"
-    />
-  </svg>
-);
-
-export const ForkIcon = props => (
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <path
-      d="M14 2C14 0.88 13.12 0 12 0C10.88 0 10 0.88 10 2C10 2.72 10.4 3.4 11 3.72V5.4L8 8.72L5 5.4V3.72C5.6 3.4 6 2.76 6 2C6 0.88 5.12 0 4 0C2.88 0 2 0.88 2 2C2 2.72 2.4 3.4 3 3.72V6.16L7 10.56V12.28C6.4 12.64 6 13.28 6 14C6 15.12 6.88 16 8 16C9.12 16 10 15.12 10 14C10 13.28 9.6 12.64 9 12.28V10.56L13 6.16V3.72C13.6 3.4 14 2.76 14 2ZM4 1C4.52 1 4.96 1.44 4.96 2C4.96 2.56 4.52 2.96 4 2.96C3.48 2.96 3.04 2.52 3.04 2C3.04 1.48 3.48 1 4 1ZM8 14.92C7.48 14.92 7.04 14.52 7.04 13.96C7.04 13.4 7.48 13 8 13C8.52 13 8.96 13.44 8.96 13.96C8.96 14.48 8.52 14.92 8 14.92ZM12 1C12.52 1 12.96 1.44 12.96 2C12.96 2.56 12.52 2.96 12 2.96C11.48 2.96 11.04 2.52 11.04 2C11.04 1.48 11.48 1 12 1Z"
-      fill="currentColor"
-    />
-  </svg>
-);
-
-export const PreferenceIcon = props => (
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M9.00283 7.09842e-08L6.5413 0L6.17112 1.48071C5.56427 1.6506 4.99188 1.90294 4.46677 2.2249L3.21339 1.47287L1.47283 3.21344L2.22487 4.46684C1.86015 5.06173 1.58477 5.7173 1.41739 6.41489L0 6.76924L8.51808e-07 9.23078L1.41741 9.58513C1.58478 10.2827 1.86017 10.9383 2.22489 11.5332L1.47285 12.7866L3.21341 14.5272L4.46681 13.7751C5.0617 14.1398 5.71728 14.4152 6.41487 14.5826L6.76922 16H9.23075L9.58509 14.5826C10.2827 14.4152 10.9383 14.1398 11.5332 13.7751L12.7866 14.5271L14.5271 12.7866L13.7751 11.5332C14.1398 10.9383 14.4152 10.2827 14.5826 9.58511L16 9.23077L16 6.76923L14.5826 6.41488C14.4152 5.71728 14.1399 5.06169 13.7751 4.4668L14.5272 3.21342L12.7866 1.47285L11.5332 2.22487C10.8702 1.81838 10.1318 1.52285 9.34387 1.36415L9.00283 7.09842e-08ZM8.00001 11.4286C9.89355 11.4286 11.4286 9.89354 11.4286 7.99999C11.4286 6.10644 9.89355 4.57142 8.00001 4.57142C6.10646 4.57142 4.57144 6.10644 4.57144 7.99999C4.57144 9.89354 6.10646 11.4286 8.00001 11.4286Z"
-      fill="currentColor"
-    />
-  </svg>
-);
-
-export const MoreMenuIcon = props => (
-  <svg
-    width="4"
-    height="13"
-    viewBox="0 0 4 13"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M3.16681 1.83337C3.16681 2.56975 2.56985 3.1667 1.83348 3.1667C1.0971 3.1667 0.500153 2.56975 0.500153 1.83337C0.500153 1.097 1.0971 0.500046 1.83348 0.500046C2.56985 0.500046 3.16681 1.097 3.16681 1.83337ZM3.16681 6.16653C3.16681 6.9029 2.56985 7.49986 1.83348 7.49986C1.0971 7.49986 0.500153 6.9029 0.500153 6.16653C0.500153 5.43015 1.0971 4.8332 1.83348 4.8332C2.56985 4.8332 3.16681 5.43015 3.16681 6.16653ZM1.83348 12.1666C2.56985 12.1666 3.16681 11.5697 3.16681 10.8333C3.16681 10.0969 2.56985 9.49995 1.83348 9.49995C1.0971 9.49995 0.500153 10.0969 0.500153 10.8333C0.500153 11.5697 1.0971 12.1666 1.83348 12.1666Z"
-      fill="currentColor"
-    />
-  </svg>
-);
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Header/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Header/index.tsx
deleted file mode 100644
index 7ade9c0b84a..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Header/index.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { Stack } from '@codesandbox/components';
-import css from '@styled-system/css';
-import { useAppState } from 'app/overmind';
-import React from 'react';
-
-import { Actions } from './Actions';
-import { AppMenu } from './AppMenu';
-import { SandboxName } from './SandboxName';
-import { WorkspaceName } from './WorkspaceName';
-
-export const Header = () => {
-  const { editor, isAuthenticating, activeTeamInfo } = useAppState();
-
-  return (
-    <Stack
-      as="header"
-      justify="space-between"
-      align="center"
-      paddingX={2}
-      css={css({
-        boxSizing: 'border-box',
-        fontFamily: 'Inter, sans-serif',
-        height: 12,
-        backgroundColor: 'titleBar.activeBackground',
-        color: 'titleBar.activeForeground',
-        borderBottom: '1px solid',
-        borderColor: 'titleBar.border',
-      })}
-    >
-      <Stack align="center">
-        <AppMenu />
-        {activeTeamInfo && <WorkspaceName name={activeTeamInfo.name} />}
-      </Stack>
-
-      {editor.currentSandbox && !isAuthenticating ? <SandboxName /> : null}
-      {editor.currentSandbox && !isAuthenticating ? <Actions /> : null}
-    </Stack>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Navigation/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Navigation/elements.ts
deleted file mode 100644
index 2509e8d9e0c..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Navigation/elements.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import styled, { css } from 'styled-components';
-import { Stack } from '@codesandbox/components';
-
-export const Container = styled(Stack)`
-  ${({
-    topOffset,
-    bottomOffset,
-    theme,
-  }: {
-    topOffset: number;
-    bottomOffset: number;
-    theme: any;
-  }) => css`
-    position: fixed;
-    top: ${topOffset}px;
-    bottom: ${bottomOffset}px;
-    left: 0;
-    padding: ${theme.space[2]}px;
-    border-right: 1px solid
-      ${theme.colors.activityBar.border ||
-      theme.colors.titleBar.border ||
-      'transparent'};
-    height: 100%;
-    color: ${theme.colors.mutedForeground};
-    font-size: 1.4rem;
-    background-color: ${theme.colors.activityBar.background};
-  `}
-`;
-
-export const IconContainer = styled(Stack)<{
-  selected: boolean;
-  isDisabled: boolean;
-}>(
-  props => css`
-    transition: ${props.theme.speeds[1]}ms ease all;
-    height: ${props.theme.space[9]}px;
-    width: ${props.theme.space[10]}px;
-    color: ${props.theme.colors.activityBar.inactiveForeground};
-    cursor: pointer;
-    background: transparent;
-    border: 0;
-    border-radius: ${props.theme.radii.small}px;
-    box-sizing: border-box;
-    padding: 0;
-
-    &:hover {
-      background: ${props.theme.colors.activityBar.hoverBackground};
-    }
-
-    &:focus {
-      outline: none;
-      background: ${props.theme.colors.activityBar.hoverBackground};
-    }
-
-    ${props.selected &&
-    css`
-      color: ${props.theme.colors.activityBar.selectedForeground};
-    `};
-
-    ${props.isDisabled &&
-    !props.selected &&
-    css`
-      opacity: 0.4;
-    `}
-  `
-);
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Navigation/icons.tsx b/packages/app/src/app/pages/Sandbox/Editor/Navigation/icons.tsx
deleted file mode 100644
index 32c3a4d9a42..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Navigation/icons.tsx
+++ /dev/null
@@ -1,140 +0,0 @@
-import React from 'react';
-
-export const CommentsIcon = props => (
-  <svg width={40} height={32} fill="none" viewBox="0 0 40 32" {...props}>
-    <g fillRule="evenodd" clipRule="evenodd">
-      <path fill="currentColor" d="M10 14a6 6 0 116 6h-6z" />
-      <path
-        fill="currentColor"
-        d="M19.697 19.945a5.265 5.265 0 005.04 3.74H30V18.42a5.263 5.263 0 00-7.021-4.962 6.996 6.996 0 01-3.281 6.486z"
-      />
-    </g>
-  </svg>
-);
-
-export const SearchIcon = props => (
-  <svg width={40} height={32} fill="none" viewBox="0 0 40 32" {...props}>
-    <path
-      fill="currentColor"
-      fillRule="evenodd"
-      d="M20 26c5.523 0 10-4.477 10-10S25.523 6 20 6s-10 4.477-10 10 4.477 10 10 10zm-.46-15a4.54 4.54 0 102.404 8.393L24.8 22.45 26.25 21l-2.857-3.056A4.54 4.54 0 0019.54 11zm-2.49 4.54a2.49 2.49 0 114.98 0 2.49 2.49 0 01-4.98 0z"
-      clipRule="evenodd"
-    />
-  </svg>
-);
-
-export const DeployIcon = props => (
-  <svg width={40} height={32} fill="none" viewBox="0 0 40 32" {...props}>
-    <g fill="currentColor">
-      <path
-        fillRule="evenodd"
-        d="M19.86 12.19l4.057-4.057c1.586-1.586 5.289-2.896 6.568-1.617s-.058 4.955-1.644 6.54l-4.056 4.057c-.34.34-.318.895-.152 1.347.997 2.718-3.89 7.541-3.89 7.541l-1.95-1.948 1.83-2.779-1.83.83-3.896-3.897.803-1.857-2.751 1.857L11 16.26s4.8-4.91 7.514-3.917c.451.165 1.007.187 1.347-.153z"
-        clipRule="evenodd"
-      />
-      <path d="M13.608 25.29a2.178 2.178 0 10-2.643-2.635L10 26.259z" />
-    </g>
-  </svg>
-);
-
-export const ExplorerIcon = props => (
-  <svg width={40} height={32} fill="none" viewBox="0 0 40 32" {...props}>
-    <path
-      fill="currentColor"
-      fillRule="evenodd"
-      d="M13 7a1 1 0 011-1h7v6h6v13a1 1 0 01-1 1H14a1 1 0 01-1-1zm9-1l5 5h-5z"
-      clipRule="evenodd"
-    />
-  </svg>
-);
-
-export const ServerIcon = props => (
-  <svg width={40} height={32} fill="none" viewBox="0 0 40 32" {...props}>
-    <path
-      fill="currentColor"
-      fillRule="evenodd"
-      d="M10.922 7a.922.922 0 00-.922.922v3.156c0 .51.413.922.922.922h18.156c.51 0 .922-.413.922-.922V7.922A.922.922 0 0029.078 7zm.578 1a.5.5 0 000 1h7a.5.5 0 000-1zm-.578 5a.922.922 0 00-.922.922v3.156c0 .51.413.922.922.922h18.156c.51 0 .922-.413.922-.922v-3.156a.922.922 0 00-.922-.922zm.846.857a.5.5 0 100 1h7a.5.5 0 100-1zM10 19.922c0-.51.413-.922.922-.922h18.156c.51 0 .922.413.922.922v3.156c0 .51-.413.922-.922.922H10.922a.922.922 0 01-.922-.922zm1 .578a.5.5 0 01.5-.5h7a.5.5 0 010 1h-7a.5.5 0 01-.5-.5z"
-      clipRule="evenodd"
-    />
-  </svg>
-);
-
-export const GithubIcon = props => (
-  <svg width={40} height={32} fill="none" viewBox="0 0 40 32" {...props}>
-    <path
-      fill="currentColor"
-      d="M17.242 26.224c-.08 0-.169-.008-.267-.026l.04-.446h.396a.39.39 0 00.159-.086.426.426 0 00.125-.241.561.561 0 00.008-.1c0-.242-.003-.468-.006-.771l-.013-1.25c-3.617.668-4.466-1.893-4.5-2.003-.579-1.467-1.371-1.84-1.373-1.841l-.03-.017c-1.826-1.254.21-1.231.217-1.231h.014c1.426.099 2.188 1.424 2.23 1.498.434.749.968 1.117 1.499 1.269.77.22 1.544-.005 2.002-.197.063-.379.167-.706.297-.984.088-.187.188-.352.295-.495-1.382-.196-2.768-.597-3.85-1.514-1.203-1.017-2.019-2.652-2.023-5.314a5.683 5.683 0 01.359-2.036c.23-.607.564-1.152.98-1.634a4.422 4.422 0 01-.227-1.154c-.044-.645.025-1.487.402-2.453l.009-.018s.164-.141.396-.154c.153-.008.385 0 .697.063.608.123 1.54.462 2.826 1.325a12.308 12.308 0 011.563-.317 13.052 13.052 0 013.492-.005c.532.071 1.057.175 1.566.312 2.581-1.744 3.772-1.362 3.776-1.361l.104.031.04.102c.382.966.454 1.806.412 2.45a4.438 4.438 0 01-.223 1.155c.418.48.753 1.023.984 1.63.235.614.363 1.293.364 2.037.004 2.669-.808 4.306-2.009 5.323-1.081.916-2.467 1.317-3.852 1.513.163.213.309.476.423.789.153.42.25.934.251 1.54.002 1.082-.004 2.208-.009 2.953l-.002.748c0 .034.003.07.01.108.018.09.057.176.125.237.037.034.084.061.143.08l.42-.002.042.446c-.1.02-.194.029-.282.03-.086 0-.165-.01-.237-.025l-7.532.013c-.071.015-.148.023-.23.023z"
-    />
-  </svg>
-);
-
-export const InfoIcon = props => (
-  <svg width={40} height={32} fill="none" viewBox="0 0 40 32" {...props}>
-    <path
-      fill="currentColor"
-      d="M20.54 25a.681.681 0 00.158-.074l6.174-3.69c.734-.438 1.128-.885 1.128-2.084v-6.444c0-.248-.016-.447-.063-.629l-7.397 4.434zm-8.477-12.921l7.397 4.434V25a.514.514 0 01-.15-.074l-6.182-3.69c-.726-.438-1.128-.885-1.128-2.084v-6.444c0-.248.016-.447.063-.629zM20.004 7c.443 0 .9.143 1.359.406l.068.04 5.567 3.326c.155.088.284.177.394.282l.04.04-7.428 4.426-7.436-4.425c.11-.109.233-.198.378-.286l.063-.037 4.07-2.442h.002l1.488-.883c.434-.262.868-.415 1.296-.443l.071-.003z"
-    />
-  </svg>
-);
-
-export const LiveIcon = props => (
-  <svg width={40} height={32} fill="none" viewBox="0 0 40 32" {...props}>
-    <g fill="currentColor" fillRule="evenodd" clipRule="evenodd">
-      <path d="M15.222 19.113c2.193 0 3.976-2.108 4.023-4.533a.981.981 0 00.178-.48.92.92 0 00-.202-.698c-.114-2.225-.684-4.592-3.033-4.876l-.027-.003c-.681-.083-2.23-.27-2.548.665-2.144-.26-2.41 2.012-2.425 3.889-.248.153-.378.513-.297.886a.944.944 0 00.308.528c.005 2.463 1.804 4.622 4.023 4.622zm1.775 7.354c-.016-2.005-.032-4.022 2.003-5.304C17.645 18.895 5.439 19.5 8.487 27H17l-.003-.533z" />
-      <path d="M30.348 13.247c0 1.05-.374 2.087-.816 2.878-.1.179.08.482.262.786.199.333.398.667.226.839-.47.47-1.582.414-2.482.347-.59.517-1.303.819-2.07.819-.861 0-1.654-.382-2.284-1.022l-.514.24c-1.337-.177-2.162-2.377-1.844-4.914.319-2.537 1.66-4.45 2.997-4.272.307.065.584.15.835.251.575-.474 1.257-.75 1.988-.75 2.045 0 3.702 2.148 3.702 4.798zM18.602 26.85h13.36s.965-6.448-6.76-6.617c-7.726-.168-6.6 6.617-6.6 6.617z" />
-    </g>
-  </svg>
-);
-export const SettingsIcon = props => (
-  <svg width={40} height={32} fill="none" viewBox="0 0 40 32" {...props}>
-    <path
-      fill="currentColor"
-      fillRule="evenodd"
-      d="M21.253 6h-3.076l-.463 1.85a8.413 8.413 0 00-2.13.931l-1.567-.94-2.176 2.176.94 1.567a8.414 8.414 0 00-1.01 2.435L10 14.462v3.077l1.772.442c.209.872.553 1.692 1.01 2.435l-.94 1.567 2.175 2.176 1.566-.94c.744.456 1.564.8 2.436 1.01L18.46 26h3.077l.443-1.772a8.411 8.411 0 002.435-1.01l1.567.94 2.176-2.175-.94-1.567c.456-.743.8-1.563 1.01-2.435L30 17.538v-3.077l-1.772-.442a8.411 8.411 0 00-1.01-2.436l.94-1.566-2.175-2.176-1.567.94a8.408 8.408 0 00-2.736-1.076zM20 20.286a4.286 4.286 0 100-8.572 4.286 4.286 0 000 8.572z"
-      clipRule="evenodd"
-    />
-  </svg>
-);
-
-export const DockerIcon = props => (
-  <svg width={40} height={32} fill="none" viewBox="0 0 90 90" {...props}>
-    <path
-      fill="currentColor"
-      d="M88.326 37.69c-.232-.195-2.327-1.785-6.826-1.785a21.7 21.7 0 0 0-3.53.31c-.852-5.934-5.778-8.804-5.972-8.959l-1.202-.698-.776 1.125a16.582 16.582 0 0 0-2.133 4.964c-.815 3.374-.31 6.555 1.396 9.27-2.056 1.163-5.391 1.435-6.09 1.474H8.12a2.599 2.599 0 0 0-2.598 2.598 39.246 39.246 0 0 0 2.404 14.157c1.9 4.964 4.732 8.649 8.378 10.898C20.414 73.565 27.123 75 34.687 75c3.413 0 6.826-.31 10.2-.93A42.096 42.096 0 0 0 58.23 69.22a36.518 36.518 0 0 0 9.076-7.447c4.383-4.925 6.981-10.433 8.882-15.32h.775c4.77 0 7.718-1.9 9.347-3.529 1.087-1.008 1.9-2.25 2.483-3.646l.349-1.008-.815-.582Z"
-    />
-    <path
-      fill="currentColor"
-      d="M13.239 41.8h7.369c.349 0 .66-.271.66-.659v-6.593c0-.35-.272-.66-.66-.66h-7.37c-.348 0-.659.272-.659.66v6.593c.04.388.31.66.66.66Zm10.162 0h7.369c.349 0 .659-.271.659-.659v-6.593c0-.35-.271-.66-.66-.66h-7.368c-.35 0-.66.272-.66.66v6.593c.039.388.31.66.66.66Zm10.355 0h7.37c.348 0 .659-.271.659-.659v-6.593c0-.35-.272-.66-.66-.66h-7.369a.654.654 0 0 0-.66.66v6.593c0 .388.272.66.66.66Zm10.2 0h7.37c.349 0 .659-.271.659-.659v-6.593c0-.35-.272-.66-.66-.66h-7.369c-.349 0-.659.272-.659.66v6.593c0 .388.31.66.66.66ZM23.4 32.376h7.37c.349 0 .659-.31.659-.66v-6.593a.654.654 0 0 0-.66-.66h-7.368c-.35 0-.66.272-.66.66v6.593c.039.35.31.66.66.66Zm10.356 0h7.37a.68.68 0 0 0 .659-.66v-6.593a.654.654 0 0 0-.66-.66h-7.369a.654.654 0 0 0-.66.66v6.593c0 .35.272.66.66.66Zm10.2 0h7.37a.68.68 0 0 0 .659-.66v-6.593a.68.68 0 0 0-.66-.66h-7.369c-.349 0-.659.272-.659.66v6.593c0 .35.31.66.66.66Zm0-9.464h7.37c.349 0 .659-.271.659-.66V15.66a.68.68 0 0 0-.66-.659h-7.369c-.349 0-.659.271-.659.66v6.593c0 .349.31.66.66.66ZM54.234 41.8h7.37c.349 0 .659-.271.659-.659v-6.593c0-.35-.272-.66-.66-.66h-7.369a.654.654 0 0 0-.659.66v6.593c.039.388.31.66.66.66Z"
-    />
-  </svg>
-);
-
-export const VSCodeIcon = props => (
-  <svg width={40} height={32} fill="none" viewBox="0 0 90 90" {...props}>
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M63.275 91.6411C64.6137 92.1589 66.1404 92.1259 67.4914 91.4801L84.9915 83.1151C86.8306 82.2361 88 80.3874 88 78.3593V21.6409C88 19.6127 86.8306 17.764 84.9918 16.885L67.4914 8.52002C65.7184 7.67239 63.6429 7.88001 62.0863 9.004C61.8642 9.16456 61.6523 9.34383 61.4535 9.5414L27.9518 39.9027L13.3591 28.8992C12.0007 27.8749 10.1006 27.9589 8.83891 29.0989L4.15857 33.3281C2.61533 34.7226 2.61356 37.1343 4.15475 38.531L16.81 50L4.15475 61.469C2.61356 62.8658 2.61533 65.2775 4.15857 66.672L8.83891 70.901C10.1006 72.0412 12.0007 72.125 13.3591 71.1009L27.9518 60.0972L61.4535 90.4587C61.9834 90.9854 62.6059 91.3822 63.275 91.6411ZM66.763 30.8322L41.3427 50L66.763 69.1678V30.8322Z"
-      fill="currentColor"
-    />
-  </svg>
-);
-
-export const AIIcon = props => (
-  <svg
-    width="32"
-    height="32"
-    viewBox="0 0 32 32"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <path
-      d="M24.1168 7.87962C23.946 7.70871 23.8127 7.50396 23.7255 7.27853L23.725 7.27701L21.7654 2.18151L21.7643 2.17862C21.7443 2.12586 21.7085 2.08049 21.662 2.04858C21.6155 2.01667 21.5602 1.99972 21.5038 2H21.4942C21.4378 1.99972 21.3825 2.01666 21.336 2.04858C21.2894 2.08049 21.2537 2.12586 21.2337 2.17862L21.2325 2.18166L19.2715 7.27863L19.271 7.28C19.1839 7.50544 19.0506 7.71018 18.8796 7.88109M24.1168 7.87962L24.7847 7.21179M24.1168 7.87962C24.2878 8.05053 24.4925 8.18387 24.718 8.27099L24.7194 8.27147L29.8163 10.2325C29.8701 10.2531 29.9171 10.2899 29.9498 10.3374C29.9825 10.385 30 10.4413 30 10.4989C30 10.5567 29.9825 10.613 29.9498 10.6606C29.9171 10.708 29.8708 10.7445 29.817 10.7652L24.7209 12.7249L24.7195 12.7255C24.494 12.8127 24.2893 12.946 24.1184 13.1168C23.9474 13.2878 23.8141 13.4925 23.727 13.718L23.7264 13.7194L21.7655 18.8163C21.7447 18.8701 21.708 18.9171 21.6606 18.9498C21.613 18.9825 21.5567 19 21.4989 19C21.4413 19 21.385 18.9825 21.3374 18.9498C21.29 18.9171 21.2534 18.8708 21.2327 18.817L19.273 13.7209L19.2724 13.7194C19.1853 13.494 19.052 13.2892 18.8811 13.1184C18.7102 12.9474 18.5054 12.8141 18.28 12.727L18.2786 12.7264L13.2126 10.7773L13.2018 10.7732C13.1421 10.7511 13.0908 10.7112 13.0548 10.6588C13.0194 10.6075 13.0002 10.5468 13 10.4844C13.0015 10.4303 13.0189 10.3778 13.0499 10.3335C13.0817 10.2882 13.1263 10.2535 13.178 10.2339L13.1816 10.2325L18.2771 8.273L18.2785 8.27241C18.504 8.18529 18.7087 8.052 18.8796 7.88109M18.8796 7.88109L18.2118 7.21326"
-      fill="currentColor"
-    />
-    <path
-      d="M9.84717 21.1503C9.72658 21.0297 9.6325 20.8852 9.57092 20.726L9.57058 20.725L8.18733 17.1281L8.18658 17.1261C8.17242 17.0888 8.14717 17.0568 8.11433 17.0343C8.0815 17.0118 8.0425 16.9998 8.00267 17H7.99592C7.95608 16.9998 7.91708 17.0118 7.88425 17.0343C7.85133 17.0568 7.82617 17.0888 7.812 17.1261L7.81117 17.1282L6.42692 20.7261L6.42658 20.7271C6.36508 20.8862 6.271 21.0307 6.15033 21.1514M9.84717 21.1503L10.3186 20.6789M9.84717 21.1503C9.96783 21.271 10.1123 21.3651 10.2715 21.4266L10.2725 21.4269L13.8703 22.8112C13.9083 22.8258 13.9415 22.8517 13.9646 22.8853C13.9877 22.9188 14 22.9586 14 22.9993C14 23.04 13.9877 23.0798 13.9646 23.1133C13.9415 23.1468 13.9088 23.1726 13.8708 23.1872L10.2736 24.5705L10.2726 24.5709C10.1134 24.6325 9.96892 24.7266 9.84825 24.8472C9.72758 24.9678 9.6335 25.1123 9.572 25.2715L9.57158 25.2725L8.18742 28.8703C8.17275 28.9083 8.14683 28.9415 8.11333 28.9646C8.07975 28.9877 8.04 29 7.99925 29C7.95858 29 7.91883 28.9877 7.88525 28.9646C7.85175 28.9415 7.82592 28.9088 7.81133 28.8708L6.428 25.2736L6.42758 25.2725C6.36608 25.1134 6.272 24.9688 6.15133 24.8483C6.03075 24.7276 5.88617 24.6335 5.72708 24.572L5.72608 24.5716L2.15008 23.1958L2.14242 23.1928C2.10033 23.1773 2.06408 23.1491 2.03867 23.1121C2.01367 23.0759 2.00017 23.033 2 22.989C2.00108 22.9508 2.01333 22.9138 2.03525 22.8825C2.05767 22.8505 2.08917 22.826 2.12567 22.8122L2.12817 22.8112L5.725 21.428L5.726 21.4276C5.88517 21.3661 6.02967 21.272 6.15033 21.1514M6.15033 21.1514L5.67892 20.68"
-      fill="currentColor"
-    />
-  </svg>
-);
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Navigation/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Navigation/index.tsx
deleted file mode 100644
index c8cc0fd487b..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Navigation/index.tsx
+++ /dev/null
@@ -1,195 +0,0 @@
-import Tooltip, {
-  SingletonTooltip,
-} from '@codesandbox/common/lib/components/Tooltip';
-import { Element } from '@codesandbox/components';
-import css from '@styled-system/css';
-import { TippyProps } from '@tippy.js/react';
-import { useAppState, useActions } from 'app/overmind';
-import getWorkspaceItems, {
-  INavigationItem,
-  getDisabledItems,
-} from 'app/overmind/utils/items';
-import React, { FunctionComponent } from 'react';
-import PlusIcon from 'react-icons/lib/go/plus';
-
-import { Container, IconContainer } from './elements';
-import {
-  CommentsIcon,
-  DeployIcon,
-  ExplorerIcon,
-  GithubIcon,
-  InfoIcon,
-  LiveIcon,
-  ServerIcon,
-  SettingsIcon,
-  SearchIcon,
-  DockerIcon,
-  VSCodeIcon,
-  AIIcon,
-} from './icons';
-
-const IDS_TO_ICONS = {
-  project: InfoIcon,
-  'project-summary': InfoIcon,
-  files: ExplorerIcon,
-  search: SearchIcon,
-  github: GithubIcon,
-  deploy: DeployIcon,
-  config: SettingsIcon,
-  live: LiveIcon,
-  more: PlusIcon,
-  server: ServerIcon,
-  comments: CommentsIcon,
-  docker: DockerIcon,
-  vscode: VSCodeIcon,
-  ai: AIIcon,
-};
-
-type IconProps = {
-  item: INavigationItem;
-  isDisabled?: boolean;
-  singleton: TippyProps['singleton'];
-  selected: boolean;
-  hasChanges: boolean;
-  hasConflicts: boolean;
-  isFetching: boolean;
-};
-const IconComponent: FunctionComponent<IconProps> = ({
-  item: { id, name },
-  isDisabled,
-  singleton,
-  selected,
-  hasChanges,
-  hasConflicts,
-  isFetching,
-}) => {
-  const { setWorkspaceHidden, setWorkspaceItem } = useActions().workspace;
-
-  const Icon = IDS_TO_ICONS[id];
-
-  return (
-    <Tooltip content={name} singleton={singleton}>
-      <IconContainer
-        css={{
-          position: 'relative',
-        }}
-        justify="center"
-        align="center"
-        isDisabled={isDisabled}
-        selected={selected}
-        as="button"
-        aria-label={name}
-        onClick={() => {
-          if (selected) {
-            setWorkspaceHidden({ hidden: true });
-          } else {
-            setWorkspaceHidden({ hidden: false });
-            setWorkspaceItem({ item: id });
-          }
-        }}
-      >
-        <Icon aria-hidden />
-        {id === 'github' && (hasChanges || isFetching || hasConflicts) && (
-          <Element
-            css={css({
-              position: 'absolute',
-              left: 31,
-              top: 0,
-              // eslint-disable-next-line no-nested-ternary
-              backgroundColor: isFetching
-                ? 'yellow'
-                : hasConflicts
-                ? 'reds.500'
-                : 'blues.500',
-              borderRadius: '50%',
-              width: '6px',
-              height: '6px',
-              transform: 'translateY(50%)',
-            })}
-          />
-        )}
-      </IconContainer>
-    </Tooltip>
-  );
-};
-
-type Props = {
-  topOffset: number;
-  bottomOffset: number;
-};
-export const Navigation: FunctionComponent<Props> = ({
-  topOffset,
-  bottomOffset,
-}) => {
-  const state = useAppState();
-  const shownItems = getWorkspaceItems(state);
-  const disabledItems = getDisabledItems(state);
-
-  const {
-    workspace: { openedWorkspaceItem, workspaceHidden },
-    git: { gitChanges, isFetching, conflicts },
-  } = state;
-
-  const hasChanges =
-    gitChanges.added.length +
-      gitChanges.deleted.length +
-      gitChanges.modified.length >
-    0;
-  const hasConflicts = Boolean(conflicts.length);
-
-  return (
-    // @ts-ignore
-    <Container
-      align="center"
-      direction="vertical"
-      gap={4}
-      topOffset={topOffset}
-      bottomOffset={bottomOffset}
-      // @ts-ignore
-      as="nav"
-      aria-label="Sandbox Navigation"
-    >
-      <SingletonTooltip placement="right">
-        {singleton => (
-          <>
-            {!shownItems.length && !disabledItems.length ? <div /> : null}
-
-            {shownItems.map(item => {
-              const selected =
-                !workspaceHidden && item.id === openedWorkspaceItem;
-
-              return (
-                <IconComponent
-                  hasChanges={hasChanges}
-                  hasConflicts={hasConflicts}
-                  selected={selected}
-                  isFetching={isFetching}
-                  key={item.id}
-                  item={item}
-                  singleton={singleton}
-                />
-              );
-            })}
-
-            {disabledItems.map(item => {
-              const selected =
-                !workspaceHidden && item.id === openedWorkspaceItem;
-              return (
-                <IconComponent
-                  hasChanges={hasChanges}
-                  hasConflicts={hasConflicts}
-                  selected={selected}
-                  isFetching={isFetching}
-                  key={item.id}
-                  item={item}
-                  singleton={singleton}
-                  isDisabled
-                />
-              );
-            })}
-          </>
-        )}
-      </SingletonTooltip>
-    </Container>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Chat/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Chat/index.tsx
deleted file mode 100644
index 3dc715c7ef9..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Chat/index.tsx
+++ /dev/null
@@ -1,186 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import styled, { css as c } from 'styled-components';
-import { sortBy, takeRight } from 'lodash-es';
-
-import { ENTER } from '@codesandbox/common/lib/utils/keycodes';
-import { useAppState, useActions } from 'app/overmind';
-import css from '@styled-system/css';
-import {
-  Collapsible,
-  Text,
-  Stack,
-  Textarea,
-  Element,
-} from '@codesandbox/components';
-
-const Container = styled(Stack)`
-  min-height: 200px;
-  max-height: 300px;
-  padding: 0 ${props => props.theme.sizes[2]}px;
-  overflow-y: auto;
-`;
-
-const Messages = styled.div`
-  height: 100%;
-  flex: 1;
-`;
-
-const Avatar = styled.img`
-  ${({
-    theme,
-    color,
-    noUser,
-  }: {
-    theme: any;
-    color: string;
-    noUser?: boolean;
-  }) => c`
-    border-radius: ${theme.radii.medium}px;
-    border: 1px solid ${color};
-    width: ${theme.sizes[8]}px;
-    height: ${theme.sizes[8]}px;
-
-    ${
-      noUser &&
-      c`
-      background-position-x: -1px;
-    background-image: url('data:image/svg+xml,%3Csvg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cg opacity="0.2"%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M21.0015 11.452C21.0015 12.4269 20.6545 13.3895 20.2444 14.1227C20.1513 14.2892 20.319 14.5705 20.487 14.8523C20.6714 15.1617 20.8563 15.4717 20.6969 15.6311C20.2605 16.0674 19.2293 16.0154 18.3942 15.9532C17.846 16.433 17.1851 16.7132 16.4738 16.7132C15.6737 16.7132 14.9375 16.3588 14.3535 15.7645C14.1934 15.8387 14.0338 15.9128 13.876 15.9883C12.6355 15.8237 11.8695 13.7817 12.1652 11.4272C12.4609 9.07269 13.7063 7.29741 14.9468 7.46197C15.2309 7.52309 15.4882 7.60195 15.7211 7.69552C16.2541 7.25516 16.887 7 17.5658 7C19.4633 7 21.0015 8.99325 21.0015 11.452ZM10.0533 24.5705L22.4514 24.5705C22.4514 24.5705 23.3477 18.5865 16.1777 18.4297C9.00769 18.2729 10.0533 24.5705 10.0533 24.5705Z" fill="white"/%3E%3C/g%3E%3C/svg%3E%0A');
-    `
-    }
-
-  `}
-`;
-
-export const Chat: React.FC = () => {
-  const [value, setValue] = useState('');
-  const state = useAppState();
-  const actions = useActions();
-  const messagesRef = useRef(null);
-  const scrollDown = () => {
-    if (messagesRef.current) {
-      messagesRef.current.scrollTop = messagesRef.current.scrollHeight;
-    }
-  };
-  useEffect(scrollDown);
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.keyCode === ENTER && !e.shiftKey && value.trim() !== '') {
-      e.preventDefault();
-      e.stopPropagation();
-      // Enter
-      actions.live.onSendChat({
-        message: value,
-      });
-      setValue('');
-      scrollDown();
-    }
-  };
-
-  const handleChange = (
-    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
-  ) => {
-    setValue(e.target.value);
-  };
-
-  const { messages, users } = state.live.roomInfo.chat;
-  const roomInfoUsers = state.live.roomInfo.users;
-
-  const orderedMessages: (m: any) => any[] = m =>
-    sortBy(takeRight(m, 100), 'date');
-
-  const messageData = message => {
-    const metadata = roomInfoUsers.find(u => u.id === message.userId);
-    return {
-      metadata,
-      color: metadata
-        ? `rgb(${metadata.color[0]}, ${metadata.color[1]}, ${metadata.color[2]})`
-        : '#636363',
-      name: users[message.userId],
-    };
-  };
-
-  const isNotSameUser = (message, i) =>
-    i === 0 || messages[i - 1].userId !== message.userId;
-
-  const isLight = theme => theme.vscodeTheme.type === 'light';
-
-  return (
-    <Collapsible
-      css={css(theme => ({
-        borderTop: '1px solid',
-        borderColor: 'sideBar.border',
-        boxShadow: isLight(theme)
-          ? '0px -8px 8px rgba(255,255,255,0.24), 0px -4px 8px rgba(255,255,255,0.4)'
-          : '0px -8px 8px rgba(0,0,0,0.24), 0px -4px 8px rgba(0,0,0,0.4)',
-      }))}
-      defaultOpen
-      title="Chat"
-    >
-      <Container direction="vertical" ref={messagesRef}>
-        <Messages>
-          {messages.length > 0 ? (
-            orderedMessages(messages).map((message, i) => {
-              const { color, name, metadata } = messageData(message);
-              return (
-                <Element key={message.date}>
-                  {isNotSameUser(message, i) && (
-                    <Stack
-                      paddingTop={2}
-                      marginBottom={2}
-                      align="center"
-                      gap={2}
-                      css={css({
-                        opacity: metadata ? 1 : 0.2,
-                      })}
-                    >
-                      {metadata ? (
-                        <Avatar
-                          color={color}
-                          alt={metadata.username}
-                          src={metadata.avatarUrl}
-                        />
-                      ) : (
-                        <Avatar noUser as="div" color={color} />
-                      )}
-                      <Text block weight="bold">
-                        {name}
-                      </Text>
-                    </Stack>
-                  )}
-                  <Text
-                    block
-                    css={css({
-                      opacity: metadata ? 1 : 0.2,
-                      wordBreak: 'break-word',
-                    })}
-                    marginBottom={2}
-                  >
-                    {message.message.split('\n').map(m => (
-                      <span key={m}>
-                        {m}
-                        <br />
-                      </span>
-                    ))}
-                  </Text>
-                </Element>
-              );
-            })
-          ) : (
-            <Text variant="muted">No messages, start sending some!</Text>
-          )}
-        </Messages>
-        <Element marginTop={4}>
-          <Textarea
-            autosize
-            style={{ height: 'auto', minHeight: 'auto' }}
-            rows={1}
-            value={value}
-            onChange={handleChange}
-            placeholder="Send a message..."
-            onKeyDown={handleKeyDown}
-          />
-        </Element>
-      </Container>
-    </Collapsible>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/DirectoryChildren/ModuleEntry.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/DirectoryChildren/ModuleEntry.tsx
deleted file mode 100644
index 1645da63a3e..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/DirectoryChildren/ModuleEntry.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { Directory, Module } from '@codesandbox/common/lib/types';
-import { useAppState } from 'app/overmind';
-import { getType } from 'app/utils/get-type';
-import React from 'react';
-
-import { Entry } from '../Entry';
-
-interface IModuleEntryProps {
-  module: Module;
-  setCurrentModule?: (id: string) => void;
-  store?: any;
-  signals?: any;
-  markTabsNotDirty?: () => void;
-  depth?: number;
-  renameModule?: (title: string, moduleShortid: string) => void;
-  deleteEntry?: (shortid: string, title: string) => void;
-  discardModuleChanges?: (shortid: string, title: string) => void;
-  getModulePath?: (
-    modules: Module[],
-    directories: Directory[],
-    id: string
-  ) => string;
-  renameValidator?: (id: string, title: string) => string | false | null;
-}
-
-export const ModuleEntry: React.FC<IModuleEntryProps> = ({
-  module,
-  setCurrentModule,
-  markTabsNotDirty,
-  depth,
-  renameModule,
-  deleteEntry,
-  discardModuleChanges,
-  getModulePath,
-  renameValidator,
-}) => {
-  const {
-    editor: { mainModule, currentModuleShortid },
-    live,
-  } = useAppState();
-  const isActive = module.shortid === currentModuleShortid;
-  const isMainModule = module.id === mainModule.id;
-  const type = getType(module.title);
-  const hasError = module.errors.length > 0;
-  const liveUsers = live.liveUsersByModule[module.shortid] || [];
-
-  const isNotSynced = module.savedCode && module.code !== module.savedCode;
-
-  return (
-    // @ts-ignore
-    <Entry
-      id={module.id}
-      shortid={module.shortid}
-      title={module.title}
-      rightColors={liveUsers.map(([a, b, c]) => `rgb(${a}, ${b}, ${c})`)}
-      depth={depth + 1}
-      active={isActive}
-      type={type || 'function'}
-      rename={renameModule}
-      deleteEntry={deleteEntry}
-      isNotSynced={isNotSynced}
-      renameValidator={renameValidator}
-      setCurrentModule={setCurrentModule}
-      isMainModule={isMainModule}
-      moduleHasError={hasError}
-      markTabsNotDirty={markTabsNotDirty}
-      discardModuleChanges={discardModuleChanges}
-      getModulePath={getModulePath}
-    />
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/DirectoryChildren/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/DirectoryChildren/index.tsx
deleted file mode 100644
index a680e6db3ff..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/DirectoryChildren/index.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import { HIDDEN_DIRECTORIES } from '@codesandbox/common/lib/templates/constants/files';
-import { Directory, Module } from '@codesandbox/common/lib/types';
-import { useAppState, useActions } from 'app/overmind';
-import { sortBy } from 'lodash-es';
-import * as React from 'react';
-
-import { ModuleEntry } from './ModuleEntry';
-import { DirectoryEntry } from '..';
-
-interface IDirectoryChildrenProps {
-  depth?: number;
-  renameModule?: (title: string, moduleShortid: string) => void;
-  setCurrentModule?: (id: string) => void;
-  parentShortid?: string;
-  deleteEntry?: (shortid: string, title: string) => void;
-  isInProjectView?: boolean;
-  markTabsNotDirty?: () => void;
-  discardModuleChanges?: (shortid: string, title: string) => void;
-  getModulePath?: (
-    modules: Module[],
-    directories: Directory[],
-    id: string
-  ) => string;
-  renameValidator?: (id: string, title: string) => string | false | null;
-}
-
-export const DirectoryChildren: React.FC<IDirectoryChildrenProps> = ({
-  depth = 0,
-  renameModule,
-  setCurrentModule,
-  parentShortid,
-  deleteEntry,
-  isInProjectView,
-  markTabsNotDirty,
-  discardModuleChanges,
-  getModulePath,
-  renameValidator,
-}) => {
-  const { isLoggedIn, editor: editorState } = useAppState();
-
-  const { files, editor } = useActions();
-  const { currentSandbox, mainModule, currentModuleShortid } = editorState;
-
-  const {
-    id: sandboxId,
-    modules,
-    directories,
-    template: sandboxTemplate,
-  } = currentSandbox;
-
-  return (
-    <div>
-      {sortBy(directories, 'title')
-        .filter(x => x.directoryShortid === parentShortid)
-        .filter(
-          x =>
-            !(
-              x.directoryShortid == null && HIDDEN_DIRECTORIES.includes(x.title)
-            )
-        )
-        .map(dir => (
-          <DirectoryEntry
-            key={dir.id}
-            depth={depth + 1}
-            signals={{ files, editor }}
-            store={{ editor: editorState, isLoggedIn }}
-            id={dir.id}
-            shortid={dir.shortid}
-            title={dir.title}
-            sandboxId={sandboxId}
-            sandboxTemplate={sandboxTemplate}
-            mainModuleId={mainModule.id}
-            modules={modules}
-            directories={directories}
-            currentModuleShortid={currentModuleShortid}
-            isInProjectView={isInProjectView}
-            markTabsNotDirty={markTabsNotDirty}
-            getModulePath={getModulePath}
-          />
-        ))}
-      {sortBy(
-        modules.filter(x => x.directoryShortid === parentShortid),
-        'title'
-      ).map(m => (
-        <ModuleEntry
-          key={m.id}
-          module={m}
-          depth={depth}
-          setCurrentModule={setCurrentModule}
-          markTabsNotDirty={markTabsNotDirty}
-          renameModule={renameModule}
-          deleteEntry={deleteEntry}
-          discardModuleChanges={discardModuleChanges}
-          getModulePath={getModulePath}
-          renameValidator={renameValidator}
-        />
-      ))}
-    </div>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/DirectoryEntryModal/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/DirectoryEntryModal/index.tsx
deleted file mode 100644
index 21051b49734..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/DirectoryEntryModal/index.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react';
-import { Alert } from 'app/pages/common/Modals/Common/Alert';
-import Modal from 'app/components/Modal';
-
-interface DirectoryEntryModalProps {
-  body: React.ReactNode;
-  isOpen: boolean;
-  onClose: () => void;
-  onConfirm: () => void;
-  title: string;
-  primaryMessage?: string;
-}
-
-export const DirectoryEntryModal = ({
-  body,
-  isOpen,
-  onClose,
-  onConfirm,
-  primaryMessage,
-  title,
-}: DirectoryEntryModalProps) => (
-  <Modal isOpen={isOpen} onClose={onClose} width={400}>
-    <Alert
-      title={title}
-      description={body}
-      onCancel={onClose}
-      onPrimaryAction={onConfirm}
-      type="danger"
-      confirmMessage={primaryMessage || 'Delete'}
-    />
-  </Modal>
-);
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EditIcons/elements.js b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EditIcons/elements.js
deleted file mode 100644
index ca1a97d8e6e..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EditIcons/elements.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import styled from 'styled-components';
-import fadeIn from '@codesandbox/common/lib/utils/animation/fade-in';
-
-export const Container = styled.div`
-  display: flex;
-  ${fadeIn(0)};
-  vertical-align: middle;
-  line-height: 1;
-  align-items: center;
-`;
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EditIcons/index.js b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EditIcons/index.js
deleted file mode 100644
index a872ef31acf..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EditIcons/index.js
+++ /dev/null
@@ -1,106 +0,0 @@
-import React from 'react';
-
-import CrossIcon from 'react-icons/lib/md/clear';
-import EditIcon from 'react-icons/lib/go/pencil';
-import AddFileIcon from 'react-icons/lib/md/insert-drive-file';
-import AddDirectoryIcon from 'react-icons/lib/md/create-new-folder';
-import UploadFileIcon from 'react-icons/lib/md/file-upload';
-import DownloadIcon from 'react-icons/lib/md/file-download';
-import UndoIcon from 'react-icons/lib/md/undo';
-
-import Tooltip, {
-  SingletonTooltip,
-} from '@codesandbox/common/lib/components/Tooltip';
-
-import { Icon } from '../../../../elements';
-import { Container } from './elements';
-
-const handleClick = func => e => {
-  e.preventDefault();
-  e.stopPropagation();
-  func();
-};
-
-export function EditIcons({
-  className = undefined,
-  hovering,
-  onDelete,
-  onDiscardChanges,
-  onEdit,
-  onCreateFile,
-  onCreateDirectory,
-  active,
-  onUploadFile,
-  onDownload = undefined,
-  forceShow,
-}) {
-  // Phones need double click if we show elements on click, that's why we only want
-  // to show these edit icons when the user clicks and hasn't activated the module
-  if (window.__isTouch && !active && !forceShow) {
-    return null;
-  }
-
-  return (
-    <div className={className}>
-      {(hovering || (window.__isTouch && active) || forceShow) && (
-        <Container>
-          <SingletonTooltip>
-            {singleton => (
-              <>
-                {onDownload && (
-                  <Tooltip content="Export to ZIP" singleton={singleton}>
-                    <Icon onClick={handleClick(onDownload)}>
-                      <DownloadIcon />
-                    </Icon>
-                  </Tooltip>
-                )}
-                {onUploadFile && (
-                  <Tooltip content="Upload Files" singleton={singleton}>
-                    <Icon onClick={handleClick(onUploadFile)}>
-                      <UploadFileIcon />
-                    </Icon>
-                  </Tooltip>
-                )}
-                {onDiscardChanges && (
-                  <Tooltip content="Discard Changes">
-                    <Icon onClick={handleClick(onDiscardChanges)}>
-                      <UndoIcon />
-                    </Icon>
-                  </Tooltip>
-                )}
-                {onEdit && (
-                  <Tooltip content="Rename" singleton={singleton}>
-                    <Icon onClick={handleClick(onEdit)}>
-                      <EditIcon />
-                    </Icon>
-                  </Tooltip>
-                )}
-                {onCreateFile && (
-                  <Tooltip content="New File" singleton={singleton}>
-                    <Icon onClick={handleClick(onCreateFile)}>
-                      <AddFileIcon />
-                    </Icon>
-                  </Tooltip>
-                )}
-                {onCreateDirectory && (
-                  <Tooltip content="New Directory" singleton={singleton}>
-                    <Icon onClick={handleClick(onCreateDirectory)}>
-                      <AddDirectoryIcon />
-                    </Icon>
-                  </Tooltip>
-                )}
-                {onDelete && (
-                  <Tooltip content="Delete" singleton={singleton}>
-                    <Icon onClick={handleClick(onDelete)}>
-                      <CrossIcon />
-                    </Icon>
-                  </Tooltip>
-                )}
-              </>
-            )}
-          </SingletonTooltip>
-        </Container>
-      )}
-    </div>
-  );
-}
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryTitle/elements.js b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryTitle/elements.js
deleted file mode 100644
index d428645c628..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryTitle/elements.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import styled from 'styled-components';
-
-export const TitleContainer = styled.span`
-  display: inline-block;
-  margin-left: 0.5rem;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  vertical-align: middle;
-`;
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryTitle/index.js b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryTitle/index.js
deleted file mode 100644
index b5f5d74f360..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryTitle/index.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import * as React from 'react';
-
-import { TitleContainer } from './elements';
-
-export const EntryTitle = ({ title }) => (
-  <TitleContainer title={title}>{title}</TitleContainer>
-);
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryTitleInput/elements.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryTitleInput/elements.tsx
deleted file mode 100644
index 93d0fcdfed0..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryTitleInput/elements.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import styled from 'styled-components';
-
-export const InputContainer = styled.div<{ errorMessage?: boolean }>`
-  display: inline-block;
-
-  input {
-    transition: 0.3s ease all;
-    font-family: inherit;
-    border: 1px solid ${props => props.theme.primary};
-    outline: none;
-    background-color: ${props =>
-      props.errorMessage
-        ? props.theme.redBackground.clearer(0.5)
-        : 'rgba(0, 0, 0, 0.2)'};
-    padding-left: 0.25rem;
-    margin-left: 0.25rem;
-    color: ${props =>
-      props.errorMessage ? props.theme.red : props.theme.white};
-
-    &:focus {
-      border: none;
-      outline: none;
-    }
-  }
-`;
-
-export const InputError = styled.p`
-  font-size: 0.9em;
-  padding: 0.25rem;
-  margin: 0;
-`;
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryTitleInput/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryTitleInput/index.tsx
deleted file mode 100644
index 5ff2854b7e0..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryTitleInput/index.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import React, {
-  useState,
-  ChangeEvent,
-  KeyboardEvent,
-  FunctionComponent,
-} from 'react';
-import { VisuallyHidden } from 'reakit/VisuallyHidden';
-
-import { ESC, ENTER } from '@codesandbox/common/lib/utils/keycodes';
-
-import { InputContainer, InputError } from './elements';
-
-function select(el) {
-  if (el) {
-    el.select();
-  }
-}
-
-interface Props {
-  title: string;
-  onCommit: (value: string, force?: boolean) => void;
-  onChange: (value: string) => void;
-  onCancel: () => void;
-  error: string | false | null;
-  id: string;
-}
-
-export const EntryTitleInput: FunctionComponent<Props> = ({
-  title,
-  onCommit,
-  onCancel,
-  onChange,
-  error,
-  id,
-}) => {
-  const [currentValue, setCurretValue] = useState(title);
-
-  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-    if (e.target) {
-      const { value } = e.target;
-      onChange(value);
-      setCurretValue(value);
-    }
-  };
-
-  const handleKeyUp = (e: KeyboardEvent<HTMLInputElement>) => {
-    if (e.keyCode === ENTER) {
-      onCommit(currentValue.trim());
-    } else if (e.keyCode === ESC) {
-      onCancel();
-    }
-  };
-
-  return (
-    <InputContainer>
-      <VisuallyHidden>
-        <label id={`label-${id}`} htmlFor={`input-${id}`}>
-          {title ? `rename ${title}` : 'set name new file'}
-        </label>
-      </VisuallyHidden>
-      <input
-        onChange={handleChange}
-        onBlur={() => onCommit(currentValue, true)}
-        onKeyUp={handleKeyUp}
-        ref={select}
-        autoComplete="new-directory"
-        value={currentValue}
-        id={`input-${id}`}
-        aria-invalid={Boolean(error)}
-        aria-labelledby={`label-${id}`}
-        aria-describedby={`error-${id}`}
-      />
-      {error && typeof error === 'string' && (
-        <InputError role="alert" id={`error-${id}`}>
-          {error}
-        </InputError>
-      )}
-    </InputContainer>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/elements.ts
deleted file mode 100644
index e53b67200ca..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/elements.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import styled from 'styled-components';
-import NotSyncedIcon from 'react-icons/lib/go/primitive-dot';
-
-export const Right = styled.div`
-  display: flex;
-  align-items: center;
-  position: absolute;
-  right: 1rem;
-`;
-
-export const NotSyncedIconWithMargin = styled(NotSyncedIcon)`
-  margin-left: 2px;
-  color: ${props => props.theme.templateColor || props.theme.secondary};
-  vertical-align: middle;
-
-  margin-top: 1.5px;
-`;
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/index.tsx
deleted file mode 100644
index 854a63e3159..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/index.tsx
+++ /dev/null
@@ -1,261 +0,0 @@
-import theme from '@codesandbox/common/lib/theme';
-import { Directory, Module } from '@codesandbox/common/lib/types';
-import { ContextMenu, ContextMenuItemType } from 'app/components/ContextMenu';
-import React, { useState } from 'react';
-import { DragSource } from 'react-dnd';
-import EditIcon from 'react-icons/lib/go/pencil';
-import DeleteIcon from 'react-icons/lib/go/trashcan';
-import AddDirectoryIcon from 'react-icons/lib/md/create-new-folder';
-import UploadFileIcon from 'react-icons/lib/md/file-upload';
-import AddFileIcon from 'react-icons/lib/md/insert-drive-file';
-import UndoIcon from 'react-icons/lib/md/undo';
-
-import { EntryContainer } from '../../../elements';
-import { EditIcons } from './EditIcons';
-import { NotSyncedIconWithMargin, Right } from './elements';
-import { EntryIcons } from './EntryIcons';
-import { EntryTitle } from './EntryTitle';
-import { EntryTitleInput } from './EntryTitleInput';
-
-interface IEntryProps {
-  renameValidator?: (id: string, title: string) => string | false | null;
-  shortid?: string;
-  id: string;
-  title?: string;
-  root?: boolean;
-  isOpen?: boolean;
-  hasChildren?: boolean;
-  closeTree?: any;
-  rename?: (shortid: string, title: string) => void;
-  deleteEntry?: (shortid: string, title: string) => void;
-  depth?: number;
-  type?: string;
-  active?: boolean;
-  discardModuleChanges?: (shortid: string, title: string) => void;
-  setCurrentModule?: (id: string) => void;
-  connectDragSource?: (node: JSX.Element) => JSX.Element;
-  onCreateDirectoryClick?: () => boolean | void;
-  onCreateModuleClick?: () => boolean | void;
-  onUploadFileClick?: () => boolean | void;
-  onClick?: () => void;
-  markTabsNotDirty?: () => void;
-  onRenameCancel?: () => void;
-  getModulePath?: (
-    modules: Module[],
-    directories: Directory[],
-    id: string
-  ) => string;
-  isNotSynced?: boolean;
-  isMainModule?: boolean;
-  moduleHasError?: boolean;
-  rightColors?: string[];
-  state?: string;
-}
-
-const EntryElement: React.FC<IEntryProps> = ({
-  title,
-  id,
-  depth,
-  type,
-  active,
-  setCurrentModule,
-  connectDragSource,
-  discardModuleChanges,
-  onCreateModuleClick,
-  onCreateDirectoryClick,
-  onUploadFileClick,
-  deleteEntry,
-  onClick,
-  onRenameCancel,
-  markTabsNotDirty,
-  rename,
-  isNotSynced,
-  isMainModule,
-  moduleHasError,
-  shortid,
-  rightColors,
-  renameValidator,
-  state: incomingState = '',
-}) => {
-  const [state, setState] = useState(incomingState);
-  const [error, setError] = useState<string | false | null>(null);
-  const [hovering, setHovering] = useState(false);
-
-  const resetState = () => {
-    if (onRenameCancel) {
-      onRenameCancel();
-    }
-
-    setState('');
-    setError(null);
-  };
-
-  const handleValidateTitle = (titleToValidate: string) => {
-    const isInvalidTitle = renameValidator(id, titleToValidate);
-    setError(isInvalidTitle);
-
-    return isInvalidTitle;
-  };
-
-  const renameAction = () => {
-    setState('editing');
-    return true;
-  };
-
-  const deleteAction = () =>
-    deleteEntry ? deleteEntry(shortid, title) : false;
-
-  const discardModuleChangesAction = () =>
-    discardModuleChanges ? discardModuleChanges(shortid, title) : false;
-
-  const handleRename = (newTitle: string, force: boolean = false) => {
-    if (newTitle === title) {
-      resetState();
-      return;
-    }
-
-    const canRename = !handleValidateTitle(newTitle);
-
-    if (newTitle !== title && canRename && rename) {
-      rename(shortid, newTitle);
-      resetState();
-    } else if (force) {
-      resetState();
-    }
-  };
-
-  const setCurrentModuleAction = () => setCurrentModule(id);
-
-  const onMouseEnter = () => setHovering(true);
-  const onMouseLeave = () => setHovering(false);
-
-  const items = [
-    [
-      isNotSynced && {
-        title: 'Discard Changes',
-        action: discardModuleChangesAction,
-        icon: UndoIcon,
-      },
-    ].filter(Boolean),
-    [
-      onCreateModuleClick && {
-        title: 'Create File',
-        action: onCreateModuleClick,
-        icon: AddFileIcon,
-      },
-      onCreateDirectoryClick && {
-        title: 'Create Directory',
-        action: onCreateDirectoryClick,
-        icon: AddDirectoryIcon,
-      },
-      onUploadFileClick && {
-        title: 'Upload Files',
-        action: onUploadFileClick,
-        icon: UploadFileIcon,
-      },
-      rename && {
-        title: 'Rename',
-        action: renameAction,
-        icon: EditIcon,
-      },
-      deleteEntry && {
-        title: 'Delete',
-        action: deleteAction,
-        color: theme.red.darken(0.2)(),
-        icon: DeleteIcon,
-      },
-    ].filter(Boolean),
-  ].filter(Boolean) as ContextMenuItemType[];
-
-  return connectDragSource(
-    <div>
-      <ContextMenu items={items}>
-        <EntryContainer
-          onClick={setCurrentModule ? setCurrentModuleAction : onClick}
-          onDoubleClick={markTabsNotDirty}
-          //  The elements file is still in js
-          //  @ts-ignore
-          depth={depth}
-          nameValidationError={error}
-          active={active}
-          editing={state === 'editing'}
-          onMouseEnter={onMouseEnter}
-          onMouseLeave={onMouseLeave}
-          alternative={isMainModule}
-          rightColors={rightColors}
-          noTransition
-        >
-          <EntryIcons type={type} error={moduleHasError} />
-          {state === 'editing' ? (
-            <EntryTitleInput
-              id={id}
-              title={title}
-              onChange={handleValidateTitle}
-              onCancel={resetState}
-              onCommit={handleRename}
-              error={error}
-            />
-          ) : (
-            <EntryTitle title={title} />
-          )}
-          {isNotSynced && !state && <NotSyncedIconWithMargin />}
-          {state === '' && (
-            <Right>
-              {isMainModule && (
-                <span
-                  style={{
-                    fontSize: '.75rem',
-                    fontWeight: 600,
-                    opacity: hovering ? 0.6 : 0,
-                    marginTop: 3,
-                    marginRight: 3,
-                  }}
-                >
-                  entry
-                </span>
-              )}
-              <EditIcons
-                hovering={hovering}
-                onCreateFile={onCreateModuleClick}
-                onCreateDirectory={onCreateDirectoryClick}
-                onUploadFile={onUploadFileClick}
-                onDiscardChanges={isNotSynced && discardModuleChangesAction}
-                onDelete={deleteEntry && deleteAction}
-                onEdit={rename && renameAction}
-                active={active}
-                forceShow={window.__isTouch && type === 'directory-open'}
-              />
-            </Right>
-          )}
-        </EntryContainer>
-      </ContextMenu>
-    </div>
-  );
-};
-
-const entrySource = {
-  canDrag: props => !!props.id,
-  beginDrag: props => {
-    if (props.closeTree) props.closeTree();
-
-    const directory =
-      props.type === 'directory' || props.type === 'directory-open';
-    return {
-      id: props.id,
-      shortid: props.shortid,
-      directory,
-      path: !directory && props.getModulePath(props.id),
-    };
-  },
-};
-
-const collectSource = (connect, monitor) => ({
-  connectDragSource: connect.dragSource(),
-  isDragging: monitor.isDragging(),
-});
-
-export const Entry = DragSource(
-  'ENTRY',
-  entrySource,
-  collectSource
-)(EntryElement);
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/elements.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/elements.tsx
deleted file mode 100644
index 552bcc2964f..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/elements.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import styled from 'styled-components';
-
-export const EntryContainer = styled.div`
-  position: relative;
-`;
-
-export const Overlay = styled.div<{ isOver: boolean }>`
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background-color: rgba(0, 0, 0, 0.3);
-  display: ${props => (props.isOver ? 'block' : 'none')};
-`;
-
-export const Opener = styled.div`
-  height: 100%;
-  overflow: hidden;
-`;
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/index.tsx
deleted file mode 100644
index 01ec92035e4..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/index.tsx
+++ /dev/null
@@ -1,451 +0,0 @@
-import * as CSSProps from 'styled-components/cssprop'; // eslint-disable-line
-import {
-  getChildren as calculateChildren,
-  inDirectory,
-} from '@codesandbox/common/lib/sandbox/modules';
-import { Directory, Module } from '@codesandbox/common/lib/types';
-import { useAppState, useActions, useReaction } from 'app/overmind';
-import React from 'react';
-import { DropTarget, DropTargetMonitor } from 'react-dnd';
-import { NativeTypes } from 'react-dnd-html5-backend';
-
-import { DirectoryChildren } from './DirectoryChildren';
-import { DirectoryEntryModal } from './DirectoryEntryModal';
-import { EntryContainer, Opener, Overlay } from './elements';
-import { Entry } from './Entry';
-import { validateTitle } from './validateTitle';
-
-const readDataURL = (file: File): Promise<string | ArrayBuffer> =>
-  new Promise(resolve => {
-    const reader = new FileReader();
-    reader.onload = e => {
-      resolve(e.target.result);
-    };
-    reader.readAsDataURL(file);
-  });
-
-type parsedFiles = { [k: string]: { dataURI: string; type: string } };
-const getFiles = async (files: File[] | FileList): Promise<parsedFiles> => {
-  const returnedFiles = {};
-  await Promise.all(
-    Array.from(files)
-      .filter(Boolean)
-      .map(async file => {
-        const dataURI = await readDataURL(file);
-        // @ts-ignore
-        returnedFiles[file.path || file.name] = {
-          dataURI,
-          type: file.type,
-        };
-      })
-  );
-
-  return returnedFiles;
-};
-
-type ItemTypes = 'module' | 'directory';
-
-type Modal = {
-  title: string;
-  body: React.ReactNode;
-  onConfirm: () => void;
-  primaryMessage?: string;
-};
-
-interface Props {
-  id: string;
-  root?: boolean;
-  initializeProperties?: Function;
-  shortid?: string;
-  store?: any;
-  connectDropTarget?: Function;
-  isOver?: boolean;
-  canDrop?: boolean;
-  signals?: any;
-  title?: string;
-  sandboxId?: string;
-  sandboxTemplate?: any;
-  mainModuleId?: string;
-  modules?: any[];
-  directories?: any[];
-  currentModuleShortid?: string;
-  isInProjectView?: boolean;
-  markTabsNotDirty?: () => void;
-  depth?: number;
-  getModulePath?: (
-    modules: Module[],
-    directories: Directory[],
-    id: string
-  ) => string;
-}
-
-const DirectoryEntryElement: React.FunctionComponent<Props> = ({
-  id,
-  root,
-  initializeProperties,
-  shortid,
-  connectDropTarget,
-  isOver,
-  depth = 0,
-  getModulePath,
-  canDrop,
-}) => {
-  const {
-    isLoggedIn,
-    editor: {
-      currentSandbox: { modules, directories, privacy },
-      shouldDirectoryBeOpen,
-    },
-  } = useAppState();
-  const {
-    files: {
-      moduleCreated,
-      moduleRenamed,
-      directoryCreated,
-      directoryRenamed,
-      directoryDeleted,
-      moduleDeleted,
-      filesUploaded,
-    },
-    editor: { moduleSelected, moduleDoubleClicked, discardModuleChanges },
-  } = useActions();
-  const reaction = useReaction();
-
-  const [creating, setCreating] = React.useState<ItemTypes>(null);
-  const [open, setOpen] = React.useState(
-    root || shouldDirectoryBeOpen({ directoryId: id })
-  );
-  const [modalConfirm, setModalConfirm] = React.useState<Modal | null>(null);
-
-  React.useEffect(() => {
-    if (initializeProperties) {
-      initializeProperties({
-        onCreateModuleClick,
-        onCreateDirectoryClick,
-        onUploadFileClick,
-      });
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  React.useEffect(
-    () =>
-      reaction(
-        ({ editor }) => editor.currentModule,
-        currentModule => {
-          setOpen(
-            isOpen =>
-              isOpen ||
-              shouldDirectoryBeOpen({ directoryId: id, module: currentModule })
-          );
-        }
-      ),
-
-    // shouldDirectoryOpen causes this to unmount for some reason, which bugs out how directories open and close
-    // eslint-disable-next-line
-    [id, reaction]
-  );
-
-  React.useEffect(() => {
-    if (isOver) {
-      setOpen(true);
-    }
-  }, [isOver]);
-
-  const resetState = () => setCreating(null);
-
-  const onCreateModuleClick = () => {
-    setCreating('module');
-    setOpen(true);
-
-    return true;
-  };
-
-  const createModule = (_, title: string) => {
-    moduleCreated({
-      title,
-      directoryShortid: shortid,
-    });
-
-    resetState();
-  };
-
-  const renameModule = (moduleShortid: string, title: string) => {
-    moduleRenamed({ moduleShortid, title });
-  };
-
-  const confirmDeleteModule = (moduleShortid: string, moduleName: string) => {
-    setModalConfirm({
-      title: 'Delete File',
-      body: (
-        <span>
-          Are you sure you want to delete{' '}
-          <b
-            css={`
-              word-break: break-all;
-            `}
-          >
-            {moduleName}
-          </b>
-          ?
-          <br />
-          The file will be permanently removed.
-        </span>
-      ),
-      onConfirm: () => {
-        closeModals();
-        moduleDeleted({
-          moduleShortid,
-        });
-      },
-    });
-  };
-
-  const onCreateDirectoryClick = () => {
-    setCreating('directory');
-    setOpen(true);
-
-    return true;
-  };
-
-  const createDirectory = (_, title: string) => {
-    directoryCreated({
-      title,
-      directoryShortid: shortid,
-    });
-    resetState();
-  };
-
-  const onUploadFileClick = React.useCallback(() => {
-    const fileSelector = document.createElement('input');
-    fileSelector.setAttribute('type', 'file');
-    fileSelector.setAttribute('multiple', 'true');
-    fileSelector.onchange = async event => {
-      const target = event.target as HTMLInputElement;
-      const files = await getFiles(target.files);
-
-      filesUploaded({
-        files,
-        directoryShortid: shortid,
-      });
-    };
-
-    fileSelector.click();
-  }, [filesUploaded, shortid]);
-
-  const renameDirectory = (directoryShortid: string, title: string) => {
-    directoryRenamed({ title, directoryShortid });
-  };
-
-  const closeModals = () => {
-    setModalConfirm(null);
-  };
-
-  const confirmDeleteDirectory = (
-    directoryShortid: string,
-    directoryName: string
-  ) => {
-    setModalConfirm({
-      title: 'Delete Directory',
-      body: (
-        <span>
-          Are you sure you want to delete <b>{directoryName}</b>?
-          <br />
-          The directory will be permanently removed.
-        </span>
-      ),
-      onConfirm: () => {
-        closeModals();
-        directoryDeleted({
-          directoryShortid,
-        });
-      },
-    });
-  };
-
-  const confirmDiscardChanges = (moduleShortid: string, moduleName: string) => {
-    setModalConfirm({
-      title: 'Discard Changes',
-      primaryMessage: 'Discard',
-      body: (
-        <span>
-          Are you sure you want to discard changes on <b>{moduleName}</b>?
-        </span>
-      ),
-      onConfirm: () => {
-        closeModals();
-        discardModuleChanges({
-          moduleShortid,
-        });
-      },
-    });
-  };
-
-  const toggleOpen = () => setOpen(!open);
-
-  const closeTree = () => setOpen(false);
-
-  const validateModuleTitle = (moduleId: string, title: string) =>
-    validateTitle(moduleId, title, getChildren());
-
-  const validateDirectoryTitle = (directoryId: string, title: string) => {
-    if (root) return null;
-
-    return validateTitle(directoryId, title, getChildren());
-  };
-
-  const getChildren = () => calculateChildren(modules, directories, shortid);
-
-  const setCurrentModule = (moduleId: string) => {
-    moduleSelected({ id: moduleId });
-  };
-
-  const markTabsNotDirty = () => {
-    moduleDoubleClicked();
-  };
-
-  const title = root ? 'Project' : directories.find(m => m.id === id).title;
-
-  return connectDropTarget(
-    <div style={{ position: 'relative' }}>
-      <Overlay isOver={isOver && canDrop} />
-      {!root && (
-        <EntryContainer>
-          <Entry
-            id={id}
-            shortid={shortid}
-            title={title}
-            depth={depth}
-            type={open ? 'directory-open' : 'directory'}
-            root={root}
-            isOpen={open}
-            onClick={toggleOpen}
-            renameValidator={validateDirectoryTitle}
-            discardModuleChanges={confirmDiscardChanges}
-            rename={!root && renameDirectory}
-            onCreateModuleClick={onCreateModuleClick}
-            onCreateDirectoryClick={onCreateDirectoryClick}
-            onUploadFileClick={isLoggedIn && privacy === 0 && onUploadFileClick}
-            deleteEntry={!root && confirmDeleteDirectory}
-            hasChildren={getChildren().length > 0}
-            closeTree={closeTree}
-            getModulePath={getModulePath}
-          />
-        </EntryContainer>
-      )}
-
-      <DirectoryEntryModal
-        isOpen={Boolean(modalConfirm)}
-        onClose={closeModals}
-        {...modalConfirm}
-      />
-      {open && (
-        <Opener>
-          {creating === 'directory' && (
-            <Entry
-              id=""
-              title=""
-              state="editing"
-              type="directory"
-              depth={depth + 1}
-              renameValidator={validateModuleTitle}
-              rename={createDirectory}
-              onRenameCancel={resetState}
-            />
-          )}
-          <DirectoryChildren
-            depth={depth}
-            renameModule={renameModule}
-            parentShortid={shortid}
-            renameValidator={validateModuleTitle}
-            deleteEntry={confirmDeleteModule}
-            setCurrentModule={setCurrentModule}
-            markTabsNotDirty={markTabsNotDirty}
-            discardModuleChanges={confirmDiscardChanges}
-            getModulePath={getModulePath}
-          />
-          {creating === 'module' && (
-            <Entry
-              id=""
-              title=""
-              state="editing"
-              depth={depth + 1}
-              renameValidator={validateModuleTitle}
-              rename={createModule}
-              onRenameCancel={resetState}
-            />
-          )}
-        </Opener>
-      )}
-    </div>
-  );
-};
-
-const FILES_TO_IGNORE = [
-  '.DS_Store', // macOs
-  'Thumbs.db', // Windows
-];
-
-const entryTarget = {
-  drop: (props, monitor) => {
-    if (monitor == null) return;
-
-    // Check if only child is selected:
-    if (!monitor.isOver({ shallow: true })) return;
-
-    const sourceItem = monitor.getItem();
-
-    if (sourceItem.dirContent) {
-      sourceItem.dirContent.then(async (droppedFiles: File[]) => {
-        const files = await getFiles(
-          droppedFiles.filter(file => !FILES_TO_IGNORE.includes(file.name))
-        );
-
-        props.signals.files.filesUploaded({
-          files,
-          directoryShortid: props.shortid,
-        });
-      });
-    } else if (sourceItem.directory) {
-      props.signals.files.directoryMovedToDirectory({
-        shortid: sourceItem.shortid,
-        directoryShortid: props.shortid,
-      });
-    } else {
-      props.signals.files.moduleMovedToDirectory({
-        moduleShortid: sourceItem.shortid,
-        directoryShortid: props.shortid,
-      });
-    }
-  },
-
-  canDrop: (props, monitor) => {
-    if (monitor == null) return false;
-    const source = monitor.getItem();
-    if (source == null) return false;
-
-    if (source.id === props.id) return false;
-    if (props.root) return true;
-
-    return !inDirectory(props.directories, source.shortid, props.shortid);
-  },
-};
-
-function collectTarget(connectMonitor, monitor: DropTargetMonitor) {
-  return {
-    // Call this function inside render()
-    // to let React DnD handle the drag events:
-    connectDropTarget: connectMonitor.dropTarget(),
-    // You can ask the monitor about the current drag state:
-    isOver: monitor.isOver({ shallow: true }),
-    canDrop: monitor.canDrop(),
-    itemType: monitor.getItemType(),
-  };
-}
-
-// eslint-disable-next-line import/no-default-export
-export const DirectoryEntry = DropTarget(
-  ['ENTRY', NativeTypes.FILE],
-  entryTarget,
-  collectTarget
-)(React.memo(DirectoryEntryElement));
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/validateTitle.js b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/validateTitle.js
deleted file mode 100644
index f6249accfd0..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/validateTitle.js
+++ /dev/null
@@ -1,24 +0,0 @@
-export const validateTitle = (id, title, siblings = []) => {
-  if (title.length === 0) return 'Title cannot be empty';
-  if (title.includes(' ')) {
-    // It has whitespaces
-    return 'Title cannot have whitespaces';
-  }
-  if (/[<>^:;,?"*|]/g.test(title)) {
-    return 'Title cannot have special characters';
-  }
-
-  if (title.length > 192) {
-    return "The title can't be more than 192 characters long";
-  }
-
-  if (title.includes('/') || title.includes('\\')) {
-    return "The title can't include slash or backslash";
-  }
-
-  if (siblings.find(sibling => sibling.title === title && sibling.id !== id)) {
-    return `A file or folder ${title} already exists at this location`;
-  }
-
-  return null;
-};
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
deleted file mode 100644
index 08da15b0049..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/index.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { getModulePath } from '@codesandbox/common/lib/sandbox/modules';
-import { useAppState, useActions } 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 { editor: editorState, isLoggedIn } = useAppState();
-  const { editor, files } = useActions();
-
-  const { currentSandbox: sandbox } = editorState;
-
-  const _getModulePath = moduleId => {
-    try {
-      return getModulePath(sandbox.modules, sandbox.directories, moduleId);
-    } catch (e) {
-      return '';
-    }
-  };
-
-  return (
-    <DirectoryEntry
-      root
-      getModulePath={_getModulePath}
-      title={sandbox.title || 'Project'}
-      signals={{ files, editor }}
-      store={{ editor: editorState, isLoggedIn }}
-      initializeProperties={({
-        onCreateModuleClick,
-        onCreateDirectoryClick,
-        onUploadFileClick,
-      }) => {
-        if (setEditActions) {
-          setEditActions(
-            // @ts-ignore
-            <EditIcons
-              hovering
-              forceShow={window.__isTouch}
-              onCreateFile={onCreateModuleClick}
-              onCreateDirectory={onCreateDirectoryClick}
-              onDownload={editor.createZipClicked}
-              onUploadFile={isLoggedIn ? onUploadFileClick : undefined}
-            />
-          );
-        }
-      }}
-      depth={-1}
-      id={null}
-      shortid={null}
-    />
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/elements.ts
deleted file mode 100644
index 64d8bebfd58..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/elements.ts
+++ /dev/null
@@ -1,113 +0,0 @@
-import styled, { css } from 'styled-components';
-
-export const Container = styled.div`
-  ${({ theme }) => css`
-    position: absolute;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    background-color: ${theme['sideBar.background'] || theme.background};
-    color: ${theme['sideBar.foreground'] || 'inherit'};
-    height: 100%;
-    width: 100%;
-    overflow-x: auto;
-
-    * {
-      box-sizing: border-box;
-    }
-  `};
-`;
-
-// used in embed
-export const EntryContainer = styled.div<{
-  active?: boolean;
-  alternative?: boolean;
-  color?: string;
-  depth?: number;
-  editing?: boolean;
-  nameValidationError?: string | null | false;
-  noTransition?: boolean;
-  rightColors?: string[];
-}>`
-  ${({
-    active = false,
-    alternative = false,
-    color: colorProp,
-    depth,
-    editing = false,
-    nameValidationError,
-    noTransition = false,
-    rightColors,
-    theme,
-  }) => {
-    const getSelectedColor = (activeColor: string) => {
-      // some have active as full white and should never be
-      if (activeColor === '#FFFFFF') {
-        return theme.light ? '#6C6C6C' : activeColor;
-      }
-      return activeColor || theme.white();
-    };
-    const color =
-      colorProp ||
-      (alternative
-        ? theme.primary
-        : theme.templateBackgroundColor ||
-          theme.templateColor ||
-          theme.secondary);
-    return css`
-      ${noTransition ? '' : 'transition: 0.3s ease all;'}
-      position: relative;
-      display: flex;
-      font-size: 14px;
-      padding: 0.4rem;
-      padding-left: ${depth != null
-        ? `calc(${depth + 1}rem - 2px)`
-        : 'calc(1rem - 2px)'};
-      padding-right: 3rem;
-      color: ${theme['sideBar.foreground'] ||
-      (theme.light ? '#6c6c6c' : 'rgba(255, 255, 255, 0.5)')};
-      text-decoration: none;
-      font-weight: 400;
-      min-width: 100px;
-      border-left: 2px solid transparent;
-      cursor: pointer;
-      user-select: none;
-      &:hover {
-        ${!(active || editing) &&
-        css`
-          background-color: ${theme['list.hoverBackground'] ||
-          color.clearer(0.9)()};
-          color: ${theme['list.hoverForeground'] ||
-          (theme.light ? '#6c6c6c' : theme.background.lighten(5)())};
-          border-color: ${color.darken(0.4)()};
-        `}
-        > div {
-          opacity: 1 !important;
-        }
-      }
-      ${active &&
-      css`
-        color: ${getSelectedColor(
-          theme['list.activeSelectionForeground']
-        )} !important;
-        border-color: ${color()} !important;
-        background-color: ${color.lighten(0.1).clearer(0.8)()} !important;
-      `};
-      ${editing &&
-      css`
-        color: ${theme.white()};
-        background-color: ${color.clearer(0.9)()};
-        ${nameValidationError &&
-        css`
-          border-color: ${theme.red()} !important;
-          background-color: ${theme['list.invalidItemForeground'] ||
-          theme.redBackground.clearer(0.4)()} !important;
-        `};
-      `};
-      ${rightColors &&
-      css`
-        border-right: 2px solid ${rightColors[0]};
-      `};
-    `;
-  }};
-`;
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/index.tsx
deleted file mode 100644
index 30d1df15257..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/index.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import { ThemeProvider } from '@codesandbox/components';
-import { useAppState } from 'app/overmind';
-import React from 'react';
-import { withTheme } from 'styled-components';
-
-import { Chat } from './Chat';
-import { Container } from './elements';
-import { Help } from './socials';
-import { Comments } from './screens/Comments';
-import { ConfigurationFiles } from './screens/ConfigurationFiles';
-import { Deployment } from './screens/Deployment/index';
-import { Explorer } from './screens/Explorer';
-import { GitHub } from './screens/GitHub';
-import { Live } from './screens/Live';
-import { NotOwnedSandboxInfo } from './screens/NotOwnedSandboxInfo';
-import { ProjectInfo } from './screens/ProjectInfo';
-import { Server } from './screens/Server';
-import { Search } from './screens/Search';
-import { Docker } from './screens/Docker';
-import { VSCode } from './screens/VSCode';
-import { AITools } from './screens/AI';
-
-const workspaceTabs = {
-  project: ProjectInfo,
-  'project-summary': NotOwnedSandboxInfo,
-  github: GitHub,
-  files: Explorer,
-  search: Search,
-  deploy: Deployment,
-  config: ConfigurationFiles,
-  live: Live,
-  server: Server,
-  comments: Comments,
-  docker: Docker,
-  vscode: VSCode,
-  ai: AITools,
-};
-
-const WorkspaceComponent = ({ theme }) => {
-  const {
-    live: { isLive, roomInfo },
-    workspace: { openedWorkspaceItem: activeTab },
-    user,
-    editor,
-  } = useAppState();
-
-  if (!activeTab) {
-    return null;
-  }
-
-  const Component = workspaceTabs[activeTab];
-
-  return (
-    <Container
-      style={{
-        // this does exist in webkit
-        // @ts-ignore
-        overflowY: !user ? 'hidden' : 'overlay',
-      }}
-    >
-      <ThemeProvider theme={theme.vscodeTheme}>
-        <>
-          <div
-            style={{
-              flex: !user ? 1 : null,
-              overflowY: 'auto',
-              fontFamily: 'Inter, Roboto, sans-serif',
-              height: user ? '100%' : 'calc(100% - 170px)',
-            }}
-          >
-            {editor.currentSandbox && <Component />}
-          </div>
-          {isLive && roomInfo.chatEnabled && <Chat />}
-          <Help />
-        </>
-      </ThemeProvider>
-    </Container>
-  );
-};
-
-export const Workspace = withTheme(WorkspaceComponent);
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/AI/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/AI/index.tsx
deleted file mode 100644
index ad32db81ad3..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/AI/index.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import React from 'react';
-import {
-  Collapsible,
-  Text,
-  Button,
-  Stack,
-  Link,
-} from '@codesandbox/components';
-import { useUpgradeFromV1ToV2 } from 'app/hooks/useUpgradeFromV1ToV2';
-
-export const AITools = () => {
-  const { perform, loading } = useUpgradeFromV1ToV2('AI Tools', true);
-
-  return (
-    <Collapsible title="AI Tools" defaultOpen>
-      <Stack direction="vertical" gap={6} padding={2}>
-        <Text as="p" variant="muted" margin={0}>
-          To access AI tools, you need to upgrade your Sandbox into a Devbox.
-        </Text>
-        <Text as="p" variant="muted" margin={0}>
-          Devboxes are an improved coding experience that runs your code in the
-          cloud. They allow you to run a Chat Devtool you can use to ask
-          questions and generate code with AI
-        </Text>
-        <Text as="p" variant="muted" margin={0}>
-          Don&apos;t worry&mdash;this sandbox will not be deleted. After
-          converting, you will have both versions.
-        </Text>
-        <Text as="p" variant="muted" margin={0}>
-          Do you want to fork this sandbox?
-        </Text>
-        <Stack align="center" gap={4}>
-          <Button
-            onClick={perform}
-            loading={loading}
-            variant="primary"
-            autoWidth
-          >
-            Yes, fork
-          </Button>
-          <Link
-            href="https://codesandbox.io/docs/tutorial/convert-browser-sandbox-cloud"
-            target="_blank"
-            rel="noreferrer noopener"
-          >
-            Learn more
-          </Link>
-        </Stack>
-      </Stack>
-    </Collapsible>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/API.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/API.tsx
deleted file mode 100644
index 03b53052d69..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/API.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-// This file imports the necessary files that allow for the comments to be used in the outside world as a plug API
-import React from 'react';
-import { useAppState } from 'app/overmind';
-import { CommentsGlobalStyles } from './components/GlobalStyles';
-import { MultiComment } from './components/MultiComment';
-import { CommentDialog } from './Dialog';
-
-export const CommentsAPI = () => {
-  const {
-    currentComment,
-    currentCommentId,
-    multiCommentsSelector,
-  } = useAppState().comments;
-
-  return (
-    <>
-      <CommentsGlobalStyles />
-      {currentCommentId && currentComment ? (
-        <CommentDialog comment={currentComment} />
-      ) : null}
-      {multiCommentsSelector && <MultiComment {...multiCommentsSelector} />}
-    </>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/AddComment.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/AddComment.tsx
deleted file mode 100644
index f5e7ab5a33b..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/AddComment.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { UserQuery } from '@codesandbox/common/lib/types';
-import { Element } from '@codesandbox/components';
-import { css } from '@styled-system/css';
-import React from 'react';
-
-import { useCodesandboxCommentEditor } from './hooks/useCodesandboxCommentEditor';
-
-type Props = {
-  onSubmit: (
-    value: string,
-    mentions: { [username: string]: UserQuery },
-    images: {
-      [fileName: string]: { src: string; resolution: [number, number] };
-    }
-  ) => void;
-};
-
-export const AddComment: React.FC<Props> = ({ onSubmit }) => {
-  const [elements] = useCodesandboxCommentEditor({
-    initialValue: '',
-    initialMentions: {},
-    initialImages: {},
-    onSubmit,
-    fixed: true,
-    props: {
-      autosize: true,
-      style: { lineHeight: 1.2, minHeight: 32 },
-    },
-  });
-  return (
-    <Element
-      paddingX={2}
-      paddingY={4}
-      css={css({
-        zIndex: 2,
-        borderTop: '1px solid',
-        borderColor: 'sideBar.border',
-        boxShadow: theme => `0px -32px 32px ${theme.colors.dialog.background}`,
-      })}
-    >
-      <form css={{ position: 'relative' }}>{elements}</form>
-    </Element>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Comment.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Comment.tsx
deleted file mode 100644
index 94603ef3660..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Comment.tsx
+++ /dev/null
@@ -1,184 +0,0 @@
-import {
-  Element,
-  Icon,
-  Link,
-  ListAction,
-  Menu,
-  Stack,
-  Text,
-  isMenuClicked,
-} from '@codesandbox/components';
-import VisuallyHidden from '@reach/visually-hidden';
-import { css } from '@styled-system/css';
-import { Markdown } from 'app/components/Markdown';
-import { CodeReferenceMetadata, CommentFragment } from 'app/graphql/types';
-import { useAppState, useActions } from 'app/overmind';
-import { convertImageReferencesToMarkdownImages } from 'app/overmind/utils/comments';
-import React from 'react';
-
-import { AvatarBlock } from './components/AvatarBlock';
-
-export const Comment = React.memo<{
-  comment: CommentFragment;
-}>(({ comment }) => {
-  const state = useAppState();
-  const actions = useActions();
-
-  const truncateText = {
-    maxHeight: 52,
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    maxWidth: '100%',
-    display: 'block',
-    // @ts-ignore
-    // eslint-disable-next-line no-dupe-keys
-    display: '-webkit-box',
-    '-webkit-line-clamp': '3',
-    '-webkit-box-orient': 'vertical',
-  };
-
-  return (
-    <ListAction
-      key={comment.id}
-      paddingTop={4}
-      css={css({
-        display: 'block',
-        color: 'inherit',
-        transition: 'opacity',
-        transitionDuration: theme => theme.speeds[1],
-        opacity: comment.isResolved ? 0.2 : 1,
-        paddingRight: 0, // the actions menu should be at the edge
-      })}
-      id={comment.id}
-      onClick={event => {
-        // don't trigger comment if you click on the menu
-        // we have to handle this because of an upstream
-        // bug in reach/menu-button
-        if (isMenuClicked(event)) return;
-
-        const currentTarget = event.currentTarget as HTMLElement;
-        const boundingRect = currentTarget.getBoundingClientRect();
-        actions.comments.selectComment({
-          commentId: comment.id,
-          bounds: {
-            left: boundingRect.left,
-            right: boundingRect.right,
-            top: boundingRect.top,
-            bottom: boundingRect.bottom,
-          },
-        });
-      }}
-    >
-      <Element
-        as="article"
-        itemProp="comment"
-        itemScope
-        itemType="http://schema.org/Comment"
-      >
-        <Stack align="flex-start" justify="space-between" marginBottom={2}>
-          <AvatarBlock comment={comment} />
-          <Stack align="center">
-            {comment.isResolved && (
-              <Icon name="check" title="Resolved" color="green" />
-            )}
-            <Menu>
-              <Menu.IconButton name="more" title="Comment actions" size={12} />
-              <Menu.List>
-                <Menu.Item
-                  onSelect={() =>
-                    actions.comments.resolveComment({
-                      commentId: comment.id,
-                      isResolved: !comment.isResolved,
-                    })
-                  }
-                >
-                  Mark as {comment.isResolved ? 'unresolved' : 'resolved'}
-                </Menu.Item>
-                <Menu.Item
-                  onSelect={() =>
-                    actions.comments.copyPermalinkToClipboard(comment.id)
-                  }
-                >
-                  Share Comment
-                </Menu.Item>
-                {state.user.id === comment.user.id && (
-                  <Menu.Item
-                    onSelect={() =>
-                      actions.comments.deleteComment({
-                        commentId: comment.id,
-                      })
-                    }
-                  >
-                    Delete
-                  </Menu.Item>
-                )}
-              </Menu.List>
-            </Menu>
-          </Stack>
-        </Stack>
-        <Stack align="center" marginBottom={2} gap={2}>
-          {comment.anchorReference && comment.anchorReference.type === 'code' && (
-            <Link
-              variant="muted"
-              css={css({
-                opacity: 0.6,
-                marginRight: 2,
-                display: 'block',
-                transition: 'all ease',
-                transitionDuration: theme => theme.speeds[1],
-
-                ':hover': {
-                  opacity: 1,
-                  color: 'sidebar.foreground',
-                },
-              })}
-            >
-              {(comment.anchorReference.metadata as CodeReferenceMetadata).path}
-            </Link>
-          )}
-          {comment.anchorReference &&
-            comment.anchorReference.type === 'preview' && (
-              <Icon name="responsive" title="Preview Comment" size={12} />
-            )}
-          {comment.replyCount ? (
-            <Stack align="center" gap={1}>
-              <Icon
-                name="comment"
-                title="Reply Count"
-                size={12}
-                css={css({
-                  color: 'button.background',
-                })}
-              />
-              {comment.replyCount}
-              <VisuallyHidden itemProp="commentCount">
-                {comment.replyCount}
-              </VisuallyHidden>
-            </Stack>
-          ) : null}
-        </Stack>
-        <Element
-          as="p"
-          marginY={0}
-          marginRight={2 /** Adjust for the missing margin in ListAction */}
-          paddingBottom={
-            6 /** Use padding instead of margin for inset border */
-          }
-          css={css({
-            borderBottom: '1px solid',
-            borderColor: 'sideBar.border',
-          })}
-        >
-          <Text itemProp="text" block css={truncateText} marginBottom={2}>
-            <Markdown
-              source={convertImageReferencesToMarkdownImages(
-                comment.content,
-                comment.references
-              )}
-            />
-          </Text>
-        </Element>
-      </Element>
-    </ListAction>
-  );
-});
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Dialog/BrowserIcons.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Dialog/BrowserIcons.tsx
deleted file mode 100644
index 926376ce299..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Dialog/BrowserIcons.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import React from 'react';
-
-export const OperaIcon = props => (
-  <svg width={16} height={16} fill="none" viewBox="0 0 16 16" {...props}>
-    <path
-      fill="#fff"
-      d="M7.185 1.334C3.544 1.334 1 3.973 1 7.934c0 3.526 2.475 6.733 6.19 6.733 3.712 0 6.186-3.212 6.186-6.734 0-3.96-2.55-6.6-6.19-6.6zm0 12.256c-2.264 0-2.513-3.342-2.513-5.807v-.05c0-2.663.399-5.486 2.499-5.486S9.695 5.155 9.695 7.82c0 2.464-.245 5.771-2.51 5.771z"
-    />
-  </svg>
-);
-
-export const FirefoxIcon = props => (
-  <svg width={16} height={16} fill="none" viewBox="0 0 16 16" {...props}>
-    <path
-      fill="#fff"
-      d="M15.735 7.547c-.004-.049-.007-.098-.007-.146v-.004l-.012-.146v-.004a7.693 7.693 0 00-.228-1.286c0-.004 0-.004-.004-.008l-.034-.125c-.004-.007-.004-.015-.007-.018l-.034-.117c-.004-.007-.004-.018-.008-.026-.01-.037-.022-.075-.033-.109l-.012-.03a1.262 1.262 0 00-.037-.11l-.011-.033-.038-.105a.265.265 0 00-.011-.032c-.015-.033-.026-.07-.041-.105l-.012-.026-.045-.109-.003-.01A6.934 6.934 0 0015 4.64l-.01-.023c-.016-.03-.027-.056-.042-.082l-.023-.049c-.01-.026-.026-.049-.037-.075-.011-.019-.019-.037-.031-.056a.474.474 0 01-.038-.071c-.011-.019-.022-.042-.034-.06a1.041 1.041 0 01-.037-.068.58.58 0 00-.038-.062c-.01-.023-.026-.042-.037-.063-.011-.021-.026-.041-.038-.062-.01-.022-.026-.042-.037-.06l-.041-.068a.489.489 0 00-.038-.056l-.045-.067a.488.488 0 00-.037-.056l-.05-.071-.033-.049-.056-.079-.031-.04c-.032-.042-.057-.08-.087-.117a7.785 7.785 0 00-.734-.833 5.837 5.837 0 00-.572-.521 5.475 5.475 0 00-.39-.308 5.08 5.08 0 00-.769-.472A7.937 7.937 0 009.76.445C9.7.434 9.64.419 9.583.408h-.004C9.548.404 9.523.396 9.493.393A7.386 7.386 0 008.305.268h-.332a7.332 7.332 0 00-1.421.156c-1.05.221-1.976.664-2.591 1.219-.034.03-.06.052-.075.067l-.015.015h.004l-.004.004.004-.004.003-.001v-.003l-.003.004a.013.013 0 01.008-.004c.457-.273 1.09-.5 1.545-.611l.183-.045c.012-.004.027-.004.038-.007l.161-.034c.008 0 .019-.004.026-.004 2.006-.365 4.143.235 5.633 1.656.321.305.603.65.84 1.024.949 1.537.859 3.472.12 4.612-1.076 1.656-3.48 2.227-4.969.776a2.631 2.631 0 01-.799-1.844 2.314 2.314 0 01.195-.968c.053-.12.41-.803.57-.769-.408-.086-1.173.083-1.71.881-.48.716-.453 1.819-.156 2.603a4.151 4.151 0 01-.378-1.227c-.383-2.58 1.353-4.78 2.947-5.328-.859-.75-3.015-.697-4.616.48-.934.687-1.601 1.661-1.954 2.824.053-.653.3-1.628.807-2.622-.537.278-1.219 1.157-1.557 1.965-.487 1.17-.656 2.569-.502 3.9l.034.3a7.765 7.765 0 007.65 6.45 7.763 7.763 0 007.76-7.764 15.33 15.33 0 00-.016-.422z"
-    />
-  </svg>
-);
-
-export const ChromeIcon = props => (
-  <svg width={16} height={16} fill="none" viewBox="0 0 16 16" {...props}>
-    <path
-      fill="#fff"
-      d="M7.973 0A7.78 7.78 0 0112 1.072a7.832 7.832 0 013.143 3.321l-6.625-.348a4.382 4.382 0 00-2.625.665A3.851 3.851 0 004.24 6.76L1.777 2.972A7.804 7.804 0 014.554.782 8.005 8.005 0 017.974 0zm-6.67 3.616l3.01 5.92a4.361 4.361 0 001.883 1.938c.828.44 1.7.574 2.617.401l-2.054 4.027a7.877 7.877 0 01-3.438-1.406 7.93 7.93 0 01-2.433-2.822A7.853 7.853 0 010 8c0-1.589.435-3.05 1.304-4.384zm14.161 1.51c.345.892.523 1.816.531 2.772a8.11 8.11 0 01-.432 2.732 7.893 7.893 0 01-1.367 2.428A7.957 7.957 0 0112 14.928a7.878 7.878 0 01-4.446 1.063l3.616-5.562c.524-.78.769-1.645.736-2.594-.033-.95-.35-1.775-.95-2.478l4.508-.232zM8 5.303c.744 0 1.38.263 1.906.79.527.527.79 1.162.79 1.906s-.263 1.38-.79 1.907a2.598 2.598 0 01-1.906.79c-.744 0-1.38-.264-1.906-.79A2.598 2.598 0 015.304 8c0-.744.263-1.38.79-1.906A2.598 2.598 0 018 5.304z"
-    />
-  </svg>
-);
-
-export const EdgeIcon = props => (
-  <svg width={16} height={16} fill="none" viewBox="0 0 16 16" {...props}>
-    <path
-      fill="#fff"
-      d="M14.573 11.906c.063 0 .118.026.167.08a.277.277 0 01.067.166.523.523 0 01-.074.22l-.213.307-.287.354-.293.333a4.453 4.453 0 01-.253.28l-.147.153a7.608 7.608 0 01-.893.694 8.381 8.381 0 01-1.067.606c-.382.178-.769.32-1.16.427-.391.107-.762.16-1.113.16-.4 0-.776-.062-1.127-.187a3.743 3.743 0 01-.987-.52 4.354 4.354 0 01-.813-.78 5.343 5.343 0 01-.613-.96 5.107 5.107 0 01-.387-1.067 4.737 4.737 0 01-.133-1.113c0-.444.07-.88.213-1.307a5.35 5.35 0 01.58-1.2c.062.423.184.816.367 1.18.182.365.409.698.68 1 .266.303.573.572.92.807.346.24.71.44 1.093.6.382.16.776.285 1.18.373.409.09.809.134 1.2.134.498 0 .982-.054 1.453-.16a6.006 6.006 0 001.374-.48l.133-.067.133-.033zM4.24 11.059c0 .489.06.967.18 1.434.12.47.293.922.52 1.353.227.427.502.82.827 1.18.329.364.697.675 1.106.933a7.701 7.701 0 01-1.866-.493 8.306 8.306 0 01-1.654-.913 8.155 8.155 0 01-1.386-1.267 8.237 8.237 0 01-1.054-1.553A7.978 7.978 0 01.24 9.959 7.679 7.679 0 010 8.04c0-.36.071-.691.213-.993.138-.302.323-.576.554-.82.235-.245.502-.458.8-.64.293-.178.593-.325.9-.44.329-.12.662-.207 1-.26a6.787 6.787 0 011.98-.014 5.972 5.972 0 011.813.614c.28.155.538.34.773.553-.155 0-.31.016-.466.047a1.804 1.804 0 00-.434.153v-.013c-.28.124-.546.289-.8.493a4.912 4.912 0 00-.7.693 5.981 5.981 0 00-.58.84 6.505 6.505 0 00-.713 1.887c-.067.32-.1.627-.1.92zM7.973.04c.756 0 1.496.087 2.22.26a8.33 8.33 0 012.047.767 7.772 7.772 0 011.747 1.286 7.08 7.08 0 011.32 1.8c.217.418.386.854.506 1.307.125.445.187.907.187 1.387 0 .395-.051.773-.153 1.133a3.708 3.708 0 01-1.194 1.8 3.98 3.98 0 01-.966.587c-.24.107-.487.187-.74.24a3.525 3.525 0 01-.774.087c-.186 0-.402-.007-.646-.02a7.125 7.125 0 01-.734-.08 4.381 4.381 0 01-.7-.187 1.738 1.738 0 01-.56-.334.758.758 0 01-.153-.16.41.41 0 01-.067-.22c0-.066.036-.144.107-.233.071-.089.149-.2.233-.333.09-.125.17-.276.24-.454.071-.177.107-.388.107-.633a3.18 3.18 0 00-.267-1.307 4.048 4.048 0 00-.706-1.093 4.694 4.694 0 00-1.014-.853 6.095 6.095 0 00-1.193-.594A6.385 6.385 0 005.673 3.9 7.374 7.374 0 004.5 3.806c-.689 0-1.369.1-2.04.3-.671.2-1.282.509-1.833.926a8.538 8.538 0 011.206-2.086 7.682 7.682 0 011.68-1.567A7.528 7.528 0 015.58.386 8.115 8.115 0 017.967.039h.006z"
-    />
-  </svg>
-);
-
-export const SafariIcon = props => (
-  <svg width={16} height={16} fill="none" viewBox="0 0 16 16" {...props}>
-    <path
-      fill="#fff"
-      d="M8.584 8.584L7.416 7.416l-2.229 3.396 3.397-2.228zM8 .25A7.749 7.749 0 00.25 8 7.749 7.749 0 008 15.75 7.749 7.749 0 0015.75 8 7.749 7.749 0 008 .25zm4.87 5.462l.462-.191a.25.25 0 11.191.462l-.46.191a.25.25 0 01-.193-.462zM9.826 2.938l.191-.462a.25.25 0 01.462.192l-.191.462a.25.25 0 11-.462-.192zM8 1.875a.25.25 0 01.25.25v.5a.25.25 0 01-.5 0v-.5a.25.25 0 01.25-.25zm-2.344.466a.25.25 0 01.327.136l.191.46a.25.25 0 11-.462.192l-.191-.462a.25.25 0 01.135-.326zM3.67 3.67a.25.25 0 01.354 0l.352.353a.25.25 0 01-.353.353l-.354-.353a.25.25 0 01.001-.353zM1.875 8a.25.25 0 01.25-.25h.5a.25.25 0 010 .5h-.5a.25.25 0 01-.25-.25zm1.255 2.288l-.462.191a.25.25 0 01-.346-.231.25.25 0 01.155-.231l.46-.191a.25.25 0 01.193.462zm.135-4.25a.25.25 0 01-.328.136l-.461-.191a.25.25 0 01.192-.462l.462.192a.25.25 0 01.135.326v-.001zm2.91 7.024l-.192.462a.25.25 0 01-.462-.19l.191-.463a.25.25 0 11.462.191zm2.075.813a.25.25 0 01-.5 0v-.5a.25.25 0 01.5 0v.5zm2.094-.216a.252.252 0 01-.273-.054.249.249 0 01-.054-.082l-.191-.46a.25.25 0 01.462-.192l.191.462a.25.25 0 01-.135.326zm1.987-1.328a.25.25 0 01-.354 0l-.352-.354a.25.25 0 01.353-.352l.354.353a.25.25 0 01-.001.353zM8.945 8.945l-5.497 3.607 3.607-5.497 5.497-3.607-3.607 5.497zm4.714 1.399a.25.25 0 01-.327.135l-.462-.191a.25.25 0 11.193-.462l.461.191a.25.25 0 01.135.327zm.216-2.094h-.5a.25.25 0 010-.5h.5a.25.25 0 010 .5z"
-    />
-  </svg>
-);
-
-export const BraveIcon = props => (
-  <svg width={16} height={16} fill="none" viewBox="0 0 16 16" {...props}>
-    <path
-      fill="#fff"
-      d="M10.454 0l1.397 1.587s1.227-.342 1.806.238c.58.58 1.056 1.092 1.056 1.092l-.374.921.476 1.365s-1.402 5.32-1.566 5.97c-.324 1.279-.546 1.773-1.466 2.422-.944.66-1.899 1.309-2.861 1.944-.273.17-.614.461-.92.461-.307 0-.647-.29-.92-.461a124.02 124.02 0 01-2.862-1.944c-.92-.649-1.142-1.143-1.465-2.422-.165-.65-1.567-5.97-1.567-5.97l.476-1.365-.374-.92s.477-.513 1.056-1.093c.579-.58 1.806-.238 1.806-.238L5.548 0h4.907zM8.001 9.957c-.093 0-.691.212-1.171.46-.48.249-.829.425-.94.495-.111.07-.043.2.058.273a79.833 79.833 0 011.595 1.244c.133.116.327.309.458.309.133 0 .327-.193.46-.31a80.59 80.59 0 011.594-1.243c.101-.072.17-.204.058-.274-.111-.069-.46-.245-.94-.494-.48-.248-1.078-.46-1.171-.46zm0-7.518s-.272 0-.68.137c-.41.137-.853.307-1.057.307-.205 0-1.72-.29-1.72-.29s-1.797 2.175-1.797 2.64c0 .464.226.587.453.828l1.347 1.433c.128.135.393.34.237.71-.156.37-.386.84-.13 1.319.256.477.694.796.976.743.28-.053.94-.399 1.184-.556.242-.158 1.011-.793 1.011-1.036s-.795-.68-.942-.779c-.146-.1-.817-.483-.83-.633-.014-.151-.009-.195.189-.567.197-.373.553-.87.494-1.2-.06-.33-.633-.502-1.043-.658-.41-.154-1.2-.447-1.298-.493-.099-.045-.073-.089.226-.117.298-.028 1.146-.141 1.528-.034.382.106 1.035.268 1.088.354.053.087.1.09.045.386-.054.297-.334 1.721-.361 1.974-.027.253-.08.42.192.482.272.063.731.171.888.171.158 0 .617-.108.89-.17.271-.063.219-.23.191-.483-.027-.253-.307-1.677-.36-1.974-.055-.296-.008-.3.044-.386.053-.086.706-.248 1.088-.354.382-.107 1.23.006 1.528.034.3.028.325.072.226.117-.099.046-.888.339-1.298.493-.41.156-.984.327-1.043.658-.06.33.296.827.495 1.2.197.372.202.416.189.566-.014.151-.684.535-.832.634-.146.1-.941.536-.941.779s.769.878 1.011 1.036c.243.157.904.503 1.184.556.282.053.72-.267.977-.743.255-.478.026-.948-.13-1.318-.157-.37.108-.576.236-.711l1.347-1.433c.227-.241.453-.364.453-.828 0-.465-1.796-2.64-1.796-2.64s-1.517.29-1.72.29c-.205 0-.649-.17-1.057-.307-.409-.137-.681-.137-.681-.137z"
-    />
-  </svg>
-);
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Dialog/PreviewScreenshot.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Dialog/PreviewScreenshot.tsx
deleted file mode 100644
index 07f7893a09f..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Dialog/PreviewScreenshot.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import React from 'react';
-import css from '@styled-system/css';
-import { Element, Stack, Tooltip } from '@codesandbox/components';
-import { Image } from 'app/components/Markdown/Image';
-import { UserAgentDetails } from 'app/overmind/effects/browser';
-import {
-  OperaIcon,
-  FirefoxIcon,
-  ChromeIcon,
-  EdgeIcon,
-  SafariIcon,
-  BraveIcon,
-} from './BrowserIcons';
-
-const Icon = ({ name }) => {
-  const iconToName = {
-    Chrome: ChromeIcon,
-    Safari: SafariIcon,
-    'Mobile Safari': SafariIcon,
-    Opera: OperaIcon,
-    Firefox: FirefoxIcon,
-    Edge: EdgeIcon,
-    Brave: BraveIcon,
-  };
-
-  return iconToName[name] ? iconToName[name]() : null;
-};
-
-export const PreviewScreenshot: React.FC<{
-  width: number;
-  height: number;
-  url: string;
-  userAgentDetails: UserAgentDetails | null;
-}> = ({ url, userAgentDetails, width, height }) => (
-  <Element
-    css={css({
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      paddingBottom: 4,
-      position: 'relative',
-      img: {
-        maxWidth: '100%',
-      },
-    })}
-  >
-    <Image src={url} alt="Preview Screenshot" ignorePrivateSandboxRestriction />
-    {userAgentDetails ? (
-      <Tooltip
-        label={
-          <Element
-            css={css({
-              textAlign: 'left',
-              fontSize: 12,
-              lineHeight: '16px',
-            })}
-          >
-            {userAgentDetails.browser.name} {userAgentDetails.browser.version}{' '}
-            <br />
-            {userAgentDetails.os.name} {userAgentDetails.os.version}
-            <br />
-            {width}x{height}
-          </Element>
-        }
-      >
-        <Stack
-          align="center"
-          justify="center"
-          css={css({
-            width: 6,
-            height: 6,
-            top: 4,
-            right: 4,
-            borderRadius: 'medium',
-            position: 'absolute',
-            backgroundColor: 'sideBar.background',
-          })}
-        >
-          <Icon name={userAgentDetails.browser.name} />
-        </Stack>
-      </Tooltip>
-    ) : null}
-  </Element>
-);
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Dialog/Reply.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Dialog/Reply.tsx
deleted file mode 100644
index b3c7ce58638..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Dialog/Reply.tsx
+++ /dev/null
@@ -1,133 +0,0 @@
-import { Element, Menu, SkeletonText, Stack } from '@codesandbox/components';
-import css from '@styled-system/css';
-import { Markdown } from 'app/components/Markdown';
-import { DIALOG_TRANSITION_DURATION } from 'app/constants';
-import { CommentFragment } from 'app/graphql/types';
-import { useAppState, useActions } from 'app/overmind';
-import {
-  convertImageReferencesToMarkdownImages,
-  convertUserReferencesToMentions,
-} from 'app/overmind/utils/comments';
-import React, { useState } from 'react';
-
-import { AvatarBlock } from '../components/AvatarBlock';
-import { EditComment } from '../components/EditComment';
-
-type ReplyProps = {
-  reply: CommentFragment;
-};
-
-const animationDelay = DIALOG_TRANSITION_DURATION + 's';
-
-export const Reply = ({ reply }: ReplyProps) => {
-  const state = useAppState();
-  const actions = useActions();
-  const [editing, setEditing] = useState(false);
-  const { user, id, content } = reply;
-
-  return (
-    <Element
-      as="li"
-      css={{
-        '&:last-child > div': {
-          border: 'none',
-        },
-      }}
-    >
-      <Element
-        as="article"
-        itemProp="comment"
-        itemScope
-        itemType="http://schema.org/Comment"
-        key={id}
-        marginLeft={4}
-        marginRight={2}
-        paddingTop={6}
-      >
-        <Stack align="flex-start" justify="space-between" marginBottom={4}>
-          <AvatarBlock comment={reply} />
-          {state.user.id === user.id && (
-            <Stack align="center">
-              <Menu>
-                <Menu.IconButton name="more" title="Reply actions" size={12} />
-                <Menu.List>
-                  <Menu.Item
-                    onSelect={() => {
-                      actions.comments.deleteComment({
-                        commentId: id,
-                      });
-                    }}
-                  >
-                    Delete
-                  </Menu.Item>
-                  <Menu.Item onSelect={() => setEditing(true)}>
-                    Edit Reply
-                  </Menu.Item>
-                </Menu.List>
-              </Menu>
-            </Stack>
-          )}
-        </Stack>
-      </Element>
-      <Element
-        marginY={0}
-        marginX={4}
-        paddingBottom={6}
-        css={css({
-          borderBottom: '1px solid',
-          borderColor: 'sideBar.border',
-          position: 'relative',
-        })}
-      >
-        {!editing ? (
-          <Element itemProp="text">
-            <Markdown
-              source={convertImageReferencesToMarkdownImages(
-                content,
-                reply.references
-              )}
-            />
-          </Element>
-        ) : (
-          <EditComment
-            initialValue={reply.content}
-            initialMentions={convertUserReferencesToMentions(reply.references)}
-            onSave={async (newValue, mentions, images) => {
-              await actions.comments.updateComment({
-                commentId: reply.id,
-                content: newValue,
-                mentions,
-                images,
-              });
-              setEditing(false);
-            }}
-            onCancel={() => setEditing(false)}
-          />
-        )}
-      </Element>
-    </Element>
-  );
-};
-
-export const SkeletonReply = props => (
-  <Element marginX={4} paddingTop={6} {...props}>
-    <Stack align="center" gap={2} marginBottom={4}>
-      <SkeletonText style={{ width: '32px', height: '32px', animationDelay }} />
-
-      <Stack direction="vertical" gap={1}>
-        <SkeletonText
-          style={{ width: '120px', height: '14px', animationDelay }}
-        />
-        <SkeletonText
-          style={{ width: '120px', height: '14px', animationDelay }}
-        />
-      </Stack>
-    </Stack>
-
-    <Stack direction="vertical" gap={1} marginBottom={6}>
-      <SkeletonText style={{ width: '100%', height: '14px', animationDelay }} />
-      <SkeletonText style={{ width: '100%', height: '14px', animationDelay }} />
-      <SkeletonText style={{ width: '100%', height: '14px', animationDelay }} />
-    </Stack>
-  </Element>
-);
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Dialog/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Dialog/index.tsx
deleted file mode 100644
index 48997484a32..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Dialog/index.tsx
+++ /dev/null
@@ -1,815 +0,0 @@
-import { UserQuery } from '@codesandbox/common/lib/types';
-import { ESC } from '@codesandbox/common/lib/utils/keycodes';
-import { hasPermission } from '@codesandbox/common/lib/utils/permission';
-import {
-  Avatar,
-  Element,
-  IconButton,
-  Menu,
-  Stack,
-  Text,
-} from '@codesandbox/components';
-import css from '@styled-system/css';
-import { Markdown } from 'app/components/Markdown';
-import {
-  DIALOG_TRANSITION_DURATION,
-  DIALOG_WIDTH,
-  REPLY_TRANSITION_DELAY,
-} from 'app/constants';
-import { CommentWithRepliesFragment } from 'app/graphql/types';
-import { useAppState, useActions, useEffects } from 'app/overmind';
-import { OPTIMISTIC_COMMENT_ID } from 'app/overmind/namespaces/comments/state';
-
-import {
-  convertImageReferencesToMarkdownImages,
-  convertUserReferencesToMentions,
-} from 'app/overmind/utils/comments';
-import { motion, useAnimation } from 'framer-motion';
-import React, { useState } from 'react';
-import ReactDOM from 'react-dom';
-import { createGlobalStyle } from 'styled-components';
-
-import { AvatarBlock } from '../components/AvatarBlock';
-import { EditComment } from '../components/EditComment';
-import { useCodesandboxCommentEditor } from '../hooks/useCodesandboxCommentEditor';
-import { Reply, SkeletonReply } from './Reply';
-import { useScrollTop } from './use-scroll-top';
-import { PreviewScreenshot } from './PreviewScreenshot';
-
-interface CommentDialogProps {
-  comment: CommentWithRepliesFragment;
-}
-
-export const CommentDialog: React.FC<CommentDialogProps> = props =>
-  ReactDOM.createPortal(<Dialog {...props} />, document.body);
-
-export const Dialog: React.FC<CommentDialogProps> = props => {
-  const state = useAppState();
-  const actions = useActions();
-  const controller = useAnimation();
-
-  const { comment } = props;
-  const replies = comment.comments;
-
-  // This comment doesn't exist in the database, it's an optimistic comment
-  const isNewComment = comment.id === OPTIMISTIC_COMMENT_ID;
-
-  const [editing, setEditing] = useState(isNewComment);
-  const { ref: listRef, scrollTop } = useScrollTop();
-  const dialogRef = React.useRef();
-
-  const currentCommentPositions = state.comments.currentCommentPositions;
-  const isCodeComment =
-    comment.references[0] && comment.references[0].type === 'code';
-
-  // this could rather be `getInitialPosition`
-  const initialPosition = getInitialPosition(currentCommentPositions);
-
-  const [repliesRendered, setRepliesRendered] = React.useState(false);
-
-  // reset editing when comment changes
-  React.useEffect(() => {
-    setEditing(isNewComment);
-    // this could rather be `getAnimatedPosition`
-    const endPosition = getEndPosition(
-      currentCommentPositions,
-      isCodeComment,
-      dialogRef
-    );
-    controller.start({
-      ...endPosition,
-      scale: 1,
-      opacity: 1,
-    });
-  }, [
-    comment.id,
-    controller,
-    currentCommentPositions,
-    isCodeComment,
-    isNewComment,
-    repliesRendered,
-  ]);
-
-  React.useEffect(() => {
-    setRepliesRendered(false);
-  }, [comment.id]);
-
-  const [dragging, setDragging] = React.useState(false);
-
-  const onDragHandlerPan = (deltaX: number, deltaY: number) => {
-    controller.set((_, target) => ({
-      x: Math.round(Number(target.x) + deltaX),
-      y: Math.round(Number(target.y) + deltaY),
-    }));
-    setDragging(true);
-  };
-
-  const onDragHandlerPanEnd = () => {
-    setDragging(false);
-  };
-
-  React.useEffect(() => {
-    const listener = event => {
-      if (event.which === ESC) {
-        actions.comments.closeComment();
-      }
-    };
-
-    document.addEventListener('keydown', listener);
-    return () => document.removeEventListener('keydown', listener);
-  }, [actions.comments]);
-
-  if (!currentCommentPositions) {
-    return null;
-  }
-  return (
-    <>
-      {dragging && <Overlay />}
-      <motion.div
-        key={isCodeComment ? 'code' : 'global'}
-        initial={{ ...initialPosition, scale: 0.5, opacity: 0 }}
-        animate={controller}
-        transition={{ duration: DIALOG_TRANSITION_DURATION }}
-        style={{ position: 'absolute', zIndex: 2 }}
-      >
-        <Stack
-          ref={dialogRef}
-          direction="vertical"
-          css={css({
-            position: 'absolute',
-            zIndex: 2,
-            backgroundColor: 'dialog.background',
-            color: 'dialog.foreground',
-            border: '1px solid',
-            borderColor: 'dialog.border',
-            borderRadius: 4,
-            width: DIALOG_WIDTH,
-            paddingBottom: 4,
-            height: 'auto',
-            maxHeight: '80vh',
-            fontFamily: 'Inter, sans-serif',
-            boxShadow: 2,
-          })}
-        >
-          {isNewComment && editing ? (
-            <DialogAddComment
-              comment={comment}
-              onSave={(content, mentions) => {
-                actions.comments.saveOptimisticComment({
-                  content,
-                  mentions,
-                });
-                setEditing(false);
-              }}
-              onDragHandlerPan={onDragHandlerPan}
-              onDragHandlerPanEnd={onDragHandlerPanEnd}
-            />
-          ) : (
-            <>
-              <DragHandle
-                onPan={onDragHandlerPan}
-                onPanEnd={onDragHandlerPanEnd}
-              >
-                <DialogHeader comment={comment} hasShadow={scrollTop > 0} />
-              </DragHandle>
-              <Element
-                as="div"
-                css={
-                  editing
-                    ? null
-                    : {
-                        overflow: 'auto',
-                      }
-                }
-                ref={listRef}
-              >
-                <CommentBody
-                  comment={comment}
-                  editing={editing}
-                  setEditing={setEditing}
-                  hasReplies={replies.length}
-                />
-
-                <Replies
-                  key={comment.id}
-                  replies={replies}
-                  replyCount={comment.replyCount}
-                  repliesRenderedCallback={() => setRepliesRendered(true)}
-                  listRef={listRef}
-                />
-              </Element>
-              <AddReply
-                comment={comment}
-                onSubmit={() => {
-                  // scroll to bottom of the list,
-                  // have to wait for it to load though :)
-                  window.requestAnimationFrame(() => {
-                    listRef.current.scrollTop = listRef.current.scrollHeight;
-                  });
-                }}
-              />
-            </>
-          )}
-        </Stack>
-      </motion.div>
-    </>
-  );
-};
-
-const DialogAddComment: React.FC<{
-  comment: CommentWithRepliesFragment;
-  onSave: (value: string, mentions: { [username: string]: UserQuery }) => void;
-  onDragHandlerPan: (deltaX: number, deltaY: number) => void;
-  onDragHandlerPanEnd: () => void;
-}> = ({ comment, onSave, onDragHandlerPan, onDragHandlerPanEnd }) => {
-  const actions = useActions();
-  const effects = useEffects();
-
-  const [elements] = useCodesandboxCommentEditor({
-    initialValue: '',
-    initialMentions: {},
-    initialImages: {},
-    onSubmit: onSave,
-    fixed: false,
-    props: {
-      autosize: true,
-      autoFocus: true,
-      css: css({
-        backgroundColor: 'transparent',
-        border: 'none',
-        paddingLeft: 4,
-      }),
-      style: { lineHeight: 1.2, minHeight: 32 },
-    },
-  });
-
-  const closeDialog = () => actions.comments.closeComment();
-
-  return (
-    <Stack direction="vertical">
-      <DragHandle onPan={onDragHandlerPan} onPanEnd={onDragHandlerPanEnd}>
-        <Stack
-          justify="space-between"
-          marginY={4}
-          marginLeft={4}
-          marginRight={2}
-        >
-          <Stack gap={2} align="center">
-            <Element
-              itemProp="author"
-              itemScope
-              itemType="http://schema.org/Person"
-            >
-              <Avatar user={comment.user} />
-            </Element>
-            <Text size={3} weight="bold" variant="body" itemProp="name">
-              {comment.user.username}
-            </Text>
-          </Stack>
-          <IconButton
-            name="cross"
-            size={10}
-            title="Close comment dialog"
-            onClick={closeDialog}
-          />
-        </Stack>
-      </DragHandle>
-      {comment.anchorReference && comment.anchorReference.type === 'preview' ? (
-        <PreviewScreenshot
-          // @ts-ignore
-          width={comment.anchorReference.metadata.width}
-          // @ts-ignore
-          height={comment.anchorReference.metadata.height}
-          url={(comment.anchorReference.metadata as any).screenshotUrl}
-          userAgentDetails={effects.browser.parseUserAgent(
-            (comment.anchorReference.metadata as any).userAgent
-          )}
-        />
-      ) : null}
-      {elements}
-    </Stack>
-  );
-};
-
-/** When the dialog is dragged outside the window
- *  It creates a scrollbar. We want to disable overflow
- *  when the drag handle is DOM
- */
-
-const GlobalStyles = createGlobalStyle`
-  body { overflow: hidden; }
-`;
-
-const DragHandle: React.FC<{
-  onPan: (deltaX: number, deltaY: number) => void;
-  onPanEnd: () => void;
-}> = ({ onPan, onPanEnd, children }) => (
-  <motion.div
-    onPan={(_, info) => {
-      onPan(info.delta.x, info.delta.y);
-    }}
-    onPanEnd={onPanEnd}
-    style={{ cursor: 'move', zIndex: 2 }}
-  >
-    <GlobalStyles />
-    {children}
-  </motion.div>
-);
-
-const DialogHeader = ({ comment, hasShadow }) => {
-  const { editor, user } = useAppState();
-  const { comments } = useActions();
-
-  const closeDialog = () => comments.closeComment();
-
-  const canResolve =
-    hasPermission(editor.currentSandbox.authorization, 'write_project') ||
-    comment.user.id === user.id;
-
-  return (
-    <Stack
-      align="center"
-      justify="space-between"
-      padding={4}
-      paddingRight={2}
-      marginBottom={2}
-      css={css({
-        boxShadow: theme =>
-          hasShadow
-            ? `0px 32px 32px ${theme.colors.dialog.background}`
-            : 'none',
-        transition: 'box-shadow ease-in-out',
-        transitionDuration: theme => theme.speeds[1],
-      })}
-    >
-      <Text size={3} weight="bold">
-        Comment
-      </Text>
-      <Stack align="center">
-        {canResolve && (
-          <IconButton
-            onClick={() =>
-              comments.resolveComment({
-                commentId: comment.id,
-                isResolved: !comment.isResolved,
-              })
-            }
-            name="check"
-            size={14}
-            title={comment.isResolved ? 'Unresolve Comment' : 'Resolve Comment'}
-            css={css({
-              transition: 'color',
-              transitionDuration: theme => theme.speeds[1],
-              color: comment.isResolved ? 'green' : 'mutedForeground',
-              ':hover:not(:disabled), :focus:not(:disabled)': {
-                color: comment.isResolved ? 'green' : 'foreground',
-              },
-            })}
-          />
-        )}
-        <IconButton
-          name="cross"
-          size={10}
-          title="Close comment dialog"
-          onClick={closeDialog}
-        />
-      </Stack>
-    </Stack>
-  );
-};
-
-const CommentBody = ({ comment, editing, setEditing, hasReplies }) => {
-  const { comments } = useActions();
-  const state = useAppState();
-  const effects = useEffects();
-  const isCommenter = state.user.id === comment.user.id;
-
-  return (
-    <Stack direction="vertical" gap={4}>
-      <Stack
-        align="flex-start"
-        justify="space-between"
-        marginLeft={4}
-        marginRight={2}
-      >
-        <AvatarBlock comment={comment} />
-        <Stack align="center">
-          <Menu>
-            <Menu.IconButton name="more" title="Comment actions" size={12} />
-            <Menu.List>
-              {isCommenter && (
-                <Menu.Item onSelect={() => setEditing(true)}>
-                  Edit Comment
-                </Menu.Item>
-              )}
-              <Menu.Item
-                onSelect={() => comments.copyPermalinkToClipboard(comment.id)}
-              >
-                Share Comment
-              </Menu.Item>
-              {isCommenter && (
-                <Menu.Item
-                  onSelect={() => {
-                    comments.closeComment();
-                    comments.deleteComment({
-                      commentId: comment.id,
-                    });
-                  }}
-                >
-                  Delete
-                </Menu.Item>
-              )}
-            </Menu.List>
-          </Menu>
-        </Stack>
-      </Stack>
-      {comment.anchorReference && comment.anchorReference.type === 'preview' ? (
-        <PreviewScreenshot
-          url={comment.anchorReference.metadata.screenshotUrl}
-          userAgentDetails={effects.browser.parseUserAgent(
-            comment.anchorReference.metadata.userAgent
-          )}
-          width={comment.anchorReference.metadata.width}
-          height={comment.anchorReference.metadata.height}
-        />
-      ) : null}
-      <Element
-        marginY={0}
-        marginX={4}
-        paddingBottom={6}
-        css={css({
-          borderBottom: hasReplies ? '1px solid' : 'none',
-          borderColor: 'sideBar.border',
-        })}
-      >
-        {!editing ? (
-          <Element itemProp="text">
-            <Markdown
-              source={convertImageReferencesToMarkdownImages(
-                comment.content,
-                comment.references
-              )}
-            />
-          </Element>
-        ) : (
-          <EditComment
-            initialValue={comment.content}
-            initialMentions={convertUserReferencesToMentions(
-              comment.references
-            )}
-            onSave={async (newValue, mentions, images) => {
-              await comments.updateComment({
-                commentId: comment.id,
-                content: newValue,
-                mentions,
-                images,
-              });
-              setEditing(false);
-            }}
-            onCancel={() => setEditing(false)}
-          />
-        )}
-      </Element>
-    </Stack>
-  );
-};
-
-const Replies = ({ replies, replyCount, listRef, repliesRenderedCallback }) => {
-  /**
-   * Loading animations:
-   * 0. Wait for the dialog to have animated in view and scaled up.
-   * 1. If replies have not loaded yet - show skeleton with 146px height,
-   * when the comments load, replace skeleton with replies and
-   * transition to height auto
-   * 2. If replies are already there - show replies with 0px height,
-   * transition to height: auto
-   *
-   */
-
-  // initial status of replies -
-  // this is false when it's the first time this specific comment is opened
-  // after that it will be true because we cache replies in state
-  const repliesLoaded = replies.length === replyCount;
-  const repliesAlreadyLoadedOnFirstRender = React.useRef(repliesLoaded);
-
-  /** CONSTANTS:
-   * Wait another <delay> after the dialog has transitioned into view
-   * These are in s not ms
-   */
-  const delay = DIALOG_TRANSITION_DURATION + REPLY_TRANSITION_DELAY;
-  const SKELETON_FADE_DURATION = 0.25;
-  const SKELETON_HEIGHT = 146;
-  const REPLY_TRANSITION_DURATION = repliesLoaded
-    ? 0
-    : Math.max(replyCount * 0.15, 0.5);
-
-  // current status of replies-
-  /** Welcome to the imperative world of timeline animations
-   *
-   * -------------------------------------------------------
-   * |             |             |           |           |
-   * t=0         t=R1           t=1        t=R2         t=2
-   *
-   * Legend:
-   * t=0 DOM has rendered, animations can be started
-   * t=1 Dialog's enter animation has completed, replies animations can start
-   * t=2 Replies animation have started
-   * t=R1 Replies have loaded before t=1
-   * t=R2 Replies have loaded after t=1
-   *
-   */
-
-  const [T, setStepInTimeline] = React.useState(-1);
-  const skeletonController = useAnimation();
-  const repliesController = useAnimation();
-
-  /*
-   * T = 0 (DOM has rendered, animations can be started)
-   * If there are no replies, skip all of the animations
-   * If replies aren't loaded, show skeleton
-   * If replies are loaded, do nothing and wait for next animation
-   * */
-  React.useEffect(() => {
-    if (!replyCount) {
-      // If the dialog is already open without any replies,
-      // just skip all of the animations for opening transitions
-      repliesController.set({ opacity: 1, height: 'auto' });
-      setStepInTimeline(2);
-    } else if (!repliesAlreadyLoadedOnFirstRender.current && T === -1) {
-      skeletonController.set({ height: SKELETON_HEIGHT, opacity: 1 });
-      setStepInTimeline(0);
-    }
-  }, [
-    skeletonController,
-    repliesController,
-    replies.length,
-    T,
-    replyCount,
-    repliesRenderedCallback,
-  ]);
-
-  /**
-   * T = 1 (Dialog's enter animation has completed, hence the delay)
-   * If replies have loaded, remove skeleton, transition the replies
-   * If replies have not loaded, do nothing and wait for next animation
-   */
-  React.useEffect(() => {
-    const timeout = window.setTimeout(() => {
-      if (T >= 1) return; // can't go back in time
-
-      if (repliesLoaded) {
-        skeletonController.set({ position: 'absolute' });
-        skeletonController.start({
-          height: 0,
-          opacity: 0,
-          transition: { duration: SKELETON_FADE_DURATION },
-        });
-        repliesController.set({ opacity: 1 });
-        repliesController
-          .start({
-            height: 'auto',
-            transition: { duration: REPLY_TRANSITION_DURATION },
-          })
-          .then(() => {
-            repliesRenderedCallback();
-          });
-
-        setStepInTimeline(2);
-      } else {
-        setStepInTimeline(1);
-      }
-    }, delay * 1000);
-    return () => window.clearTimeout(timeout);
-  }, [
-    skeletonController,
-    repliesController,
-    repliesLoaded,
-    delay,
-    REPLY_TRANSITION_DURATION,
-    T,
-    repliesRenderedCallback,
-  ]);
-
-  /**
-   * T = R1 or R2 (Replies have now loaded)
-   * this is a parralel async process and can happen before or after t=1
-   * If it's before T=1, do nothing, wait for T=1
-   * If it's after T=1, start replies transition now!
-   */
-  React.useEffect(() => {
-    if (!repliesLoaded) {
-      // do nothing, wait for T=1
-    } else if (T === 1) {
-      skeletonController.start({
-        height: 0,
-        opacity: 0,
-        transition: { duration: REPLY_TRANSITION_DURATION },
-      });
-      repliesController.set({ opacity: 1 });
-      repliesController.start({
-        height: 'auto',
-        transition: { duration: REPLY_TRANSITION_DURATION },
-      });
-      setStepInTimeline(2);
-    }
-  }, [
-    T,
-    repliesLoaded,
-    REPLY_TRANSITION_DURATION,
-    skeletonController,
-    repliesController,
-  ]);
-
-  React.useEffect(() => {
-    // when the animations are done, scroll to last reply
-    let timeout;
-
-    if (T === 2) {
-      timeout = window.setTimeout(() => {
-        listRef.current.scrollTo({
-          top: listRef.current.scrollHeight,
-          behavior: 'smooth',
-        });
-      }, REPLY_TRANSITION_DURATION * 1000);
-    }
-
-    return () => window.clearTimeout(timeout);
-  }, [T, listRef, REPLY_TRANSITION_DURATION]);
-
-  return (
-    <>
-      <motion.div
-        initial={{ height: 0, opacity: 0, overflow: 'hidden' }}
-        animate={skeletonController}
-      >
-        <SkeletonReply />
-      </motion.div>
-
-      <motion.ul
-        initial={{ height: 0, opacity: 0 }}
-        animate={repliesController}
-        style={{
-          overflow: 'visible',
-          paddingLeft: 0,
-          margin: 0,
-          listStyle: 'none',
-        }}
-      >
-        {replies.map(reply => reply && <Reply reply={reply} key={reply.id} />)}
-      </motion.ul>
-    </>
-  );
-};
-
-const AddReply: React.FC<any> = ({ comment, ...props }) => {
-  const actions = useActions();
-  const [elements] = useCodesandboxCommentEditor({
-    initialValue: '',
-    initialMentions: {},
-    initialImages: {},
-    onSubmit: (value, mentions, images) => {
-      actions.comments.saveNewComment({
-        content: value,
-        mentions,
-        images,
-        parentCommentId: comment.id,
-      });
-      if (props.onSubmit) props.onSubmit();
-    },
-    fixed: false,
-    props: {
-      autosize: true,
-      css: css({
-        backgroundColor: 'transparent',
-        border: 'none',
-        borderTop: '1px solid',
-        borderColor: 'sideBar.border',
-        borderRadius: 0,
-        padding: 4,
-      }),
-      style: { lineHeight: 1.2, minHeight: 54 },
-    },
-  });
-
-  return elements;
-};
-
-/** We use an transparent overlay when dragging
- *  so that we can stop selection of the text
- *  in the background when your drag the dialog.
- */
-const Overlay = () => (
-  <Element
-    as="div"
-    css={{
-      position: 'absolute',
-      top: 0,
-      bottom: 0,
-      left: 0,
-      right: 0,
-      zIndex: 1,
-    }}
-  />
-);
-
-// trying to match the position for code comments
-const FALLBACK_POSITION = { x: 800, y: 120 };
-
-const getInitialPosition = currentCommentPositions => {
-  let animateFrom = { x: null, y: null };
-
-  if (currentCommentPositions?.trigger) {
-    animateFrom = {
-      x: currentCommentPositions.trigger.left,
-      y: currentCommentPositions.trigger.top,
-    };
-  } else {
-    // if we don't know the trigger, slide in from left
-    // probably comment from permalink
-    animateFrom = {
-      x: 0,
-      y: FALLBACK_POSITION.y,
-    };
-  }
-
-  return animateFrom;
-};
-
-const getEndPosition = (currentCommentPositions, isCodeComment, dialogRef) => {
-  const OVERLAP_WITH_SIDEBAR = -20;
-  const OFFSET_TOP_FOR_ALIGNMENT = -90;
-
-  let dialogPosition = { x: null, y: null };
-
-  if (currentCommentPositions?.dialog) {
-    // if we know the expected dialog position
-    // true for comments with code reference
-    dialogPosition = {
-      x: currentCommentPositions.dialog.left,
-      y: currentCommentPositions.dialog.top + OFFSET_TOP_FOR_ALIGNMENT,
-    };
-  } else if (currentCommentPositions?.trigger) {
-    // if don't know, we calculate based on the trigger
-    // true for comments opened from the sidebar (both global and code)
-
-    if (isCodeComment) {
-      dialogPosition = {
-        x: currentCommentPositions.trigger.right,
-        y: currentCommentPositions.trigger.top + OFFSET_TOP_FOR_ALIGNMENT,
-      };
-    } else {
-      dialogPosition = {
-        x: currentCommentPositions.trigger.right + OVERLAP_WITH_SIDEBAR,
-        y: currentCommentPositions.trigger.top + OFFSET_TOP_FOR_ALIGNMENT,
-      };
-    }
-  } else {
-    // if we know neither, we put it at  nice spot on the page
-    // probably comment from permalink
-    dialogPosition = { ...FALLBACK_POSITION };
-  }
-
-  // check for window colisions here and offset positions more
-  let finalHeight;
-
-  if (dialogRef.current) {
-    /** Even when we have the rect, we don't always know
-     * if it's in it's final height while it's animating
-     *
-     * We do know that it animates from 0.5 to 1, so those are the
-     * 2 values we might get, based on that we can double the initial
-     * height to get final height
-     *
-     */
-
-    const dialogRect = dialogRef.current.getBoundingClientRect();
-
-    const animatingElement = dialogRef.current.parentElement;
-    const scale = animatingElement.style.transform;
-
-    finalHeight = scale.includes('scale(0.5')
-      ? dialogRect.height * 2
-      : dialogRect.height;
-  } else {
-    /** Until the ref is set, we don't know enough,
-     * so we're guessing on the safe side
-     */
-    finalHeight = 420;
-  }
-
-  /** The parent of this dialog is starts at 48px
-   * This will change when we move the comment out!
-   */
-  const PARENT_Y_OFFSET = 48;
-
-  const BUFFER_FROM_EDGE = 32;
-
-  const maxLeft = window.innerWidth - DIALOG_WIDTH - BUFFER_FROM_EDGE;
-  const maxTop =
-    window.innerHeight - finalHeight - BUFFER_FROM_EDGE - PARENT_Y_OFFSET;
-
-  if (dialogPosition.x > maxLeft) dialogPosition.x = maxLeft;
-  if (dialogPosition.y > maxTop) dialogPosition.y = maxTop;
-
-  return dialogPosition;
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Dialog/use-scroll-top.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Dialog/use-scroll-top.tsx
deleted file mode 100644
index 962f1367656..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Dialog/use-scroll-top.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from 'react';
-
-const useScrollTop = () => {
-  const ref = React.useRef(null);
-  const [scrollTop, setScrollTop] = React.useState(0);
-
-  React.useEffect(() => {
-    const element = ref.current;
-
-    const handleScroll = (event: React.UIEvent<HTMLElement>) => {
-      setScrollTop(event.currentTarget.scrollTop);
-    };
-
-    if (element) {
-      element.addEventListener('scroll', handleScroll);
-    }
-
-    return () => {
-      if (element) {
-        element.removeEventListener('scroll', handleScroll);
-      }
-    };
-  }, []);
-
-  return { scrollTop, ref };
-};
-
-export { useScrollTop };
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/components/AvatarBlock.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/components/AvatarBlock.tsx
deleted file mode 100644
index 59285d1e411..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/components/AvatarBlock.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { Avatar, Stack, Text, Element } from '@codesandbox/components';
-import { CommentFragment } from 'app/graphql/types';
-import { formatDistance } from 'date-fns';
-import { zonedTimeToUtc } from 'date-fns-tz';
-import React from 'react';
-
-export const AvatarBlock: React.FC<{ comment: CommentFragment }> = ({
-  comment,
-}) => (
-  <Stack gap={2} align="center">
-    <Element itemProp="author" itemScope itemType="http://schema.org/Person">
-      <Avatar user={comment.user} />
-    </Element>
-    <Stack direction="vertical" justify="center" gap={1}>
-      <Text itemProp="name" size={3} weight="bold" variant="body">
-        {comment.user.username}
-      </Text>
-      <Text
-        size={2}
-        variant="muted"
-        itemProp="dateCreated"
-        dateTime={comment.insertedAt.toString()}
-      >
-        {formatDistance(
-          zonedTimeToUtc(comment.insertedAt, 'Etc/UTC'),
-          new Date(),
-          {
-            addSuffix: true,
-          }
-        )}
-      </Text>
-    </Stack>
-  </Stack>
-);
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/components/EditComment.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/components/EditComment.tsx
deleted file mode 100644
index 100e8e71209..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/components/EditComment.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import { UserQuery } from '@codesandbox/common/lib/types';
-import { Button, Stack } from '@codesandbox/components';
-import React from 'react';
-
-import { useCodesandboxCommentEditor } from '../hooks/useCodesandboxCommentEditor';
-
-export const EditComment: React.FC<{
-  initialValue?: string;
-  initialMentions?: { [mentionName: string]: UserQuery };
-  initialImages?: {
-    [fileName: string]: { src: string; resolution: [number, number] };
-  };
-  onSave: (
-    value: string,
-    mentions: { [mentionName: string]: UserQuery },
-    images: {
-      [fileName: string]: { src: string; resolution: [number, number] };
-    }
-  ) => void;
-  onCancel: () => void;
-}> = ({
-  initialValue = '',
-  initialMentions = {},
-  initialImages = {},
-  onSave,
-  onCancel,
-}) => {
-  const [elements, value, mentions, images] = useCodesandboxCommentEditor({
-    initialValue,
-    initialMentions,
-    initialImages,
-    onSubmit: onSave,
-    fixed: false,
-    props: {
-      autosize: true,
-      autoFocus: true,
-      style: { lineHeight: 1.2 },
-    },
-  });
-
-  return (
-    <Stack
-      as="form"
-      onSubmit={event => {
-        event.preventDefault();
-        onSave(value, mentions, images);
-      }}
-      css={{
-        position: 'relative',
-      }}
-      direction="vertical"
-      gap={2}
-    >
-      {elements}
-      <Stack justify="flex-end">
-        <Button
-          type="button"
-          variant="link"
-          css={{ width: 100 }}
-          onClick={onCancel}
-        >
-          Cancel
-        </Button>
-        <Button type="submit" variant="secondary" css={{ width: 100 }}>
-          Save
-        </Button>
-      </Stack>
-    </Stack>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/components/GlobalStyles.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/components/GlobalStyles.tsx
deleted file mode 100644
index 4d17fd9819b..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/components/GlobalStyles.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import { createGlobalStyle, css } from 'styled-components';
-
-const POSITION = css`
-  top: 0px;
-  left: ${props => props.theme.space[2] + 1}px;
-`;
-
-const primary = (theme: any) =>
-  '%23' + theme.colors.button.background.split('#')[1];
-
-const makeColor = (color: string) => '%23' + color.split('#')[1];
-
-export const CommentsGlobalStyles = createGlobalStyle`
-${({ theme }: any) => css`
-  .editor-comments-glyph {
-    position: relative;
-    background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 5C0 2.23858 2.23858 0 5 0C7.76142 0 10 2.23858 10 5C10 7.76142 7.76142 10 5 10H0V5Z' fill='black'/%3E%3C/svg%3E");
-    background-size: ${theme.space[3] + 1}px ${theme.space[3] + 1}px;
-    background-repeat: no-repeat;
-    background-position: center center;
-    opacity: 0.3;
-    transition: all ${theme.speeds[4]}ms ease;
-    position: relative;
-    cursor: pointer;
-
-    &:hover {
-      opacity: 1;
-    }
-  }
-
-  .vs-dark {
-    .editor-comments-glyph {
-      background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 5C0 2.23858 2.23858 0 5 0C7.76142 0 10 2.23858 10 5C10 7.76142 7.76142 10 5 10H0V5Z' fill='${makeColor(
-        theme.colors.white
-      )}'/%3E%3C/svg%3E");
-    }
-    .editor-comments-multi:before {
-      color: ${theme.colors.grays[600]};
-    }
-  }
-
-  .editor-comments-glyph.active-comment.editor-comments-multi:before {
-    color: ${theme.colors.white};
-  }
-
-  .editor-comments-multi:before {
-    content: '...';
-    color: ${theme.colors.white};
-    position: absolute;
-    top: -2px;
-    left: ${theme.space[2] - 1}px;
-    z-index: 10;
-    font-size: 8px;
-    font-weight: bold;
-    height: ${theme.space[3] + 1}px;
-    font-family: 'Inter', sans-serif;
-  }
-
-  .editor-comments-multi-2:before {
-    content: '2';
-    ${POSITION}
-  }
-
-  .editor-comments-multi-3:before {
-    content: '3';
-    ${POSITION}
-  }
-  .editor-comments-multi-4:before {
-    content: '4';
-    ${POSITION}
-  }
-  .editor-comments-multi-5:before {
-    content: '5';
-    ${POSITION}
-  }
-  .editor-comments-multi-6:before {
-    content: '6';
-    ${POSITION}
-  }
-  .editor-comments-multi-7:before {
-    content: '7';
-    ${POSITION}
-  }
-  .editor-comments-multi-8:before {
-    content: '8';
-    ${POSITION}
-  }
-  .editor-comments-multi-9:before {
-    content: '9';
-    ${POSITION}
-  }
-
-  .editor-comments-glyph.editor-comments-active {
-    opacity: 1;
-    background-image: url('${`data:image/svg+xml,%3Csvg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M0 5C0 7.76142 2.23858 10 5 10C7.76142 10 10 7.76142 10 5C10 2.23858 7.76142 0 5 0C2.23858 0 0 2.23858 0 5Z" fill="${primary(
-      theme
-    )}"/%3E%3Cpath d="M5 5H0V10H5V5Z" fill="${primary(
-      theme
-    )}"/%3E%3C/svg%3E%0A`}');
-
-      &::before {
-        content: '';
-      }
-  }
-
-  .editor-comments-add:before {
-    content: '+';
-    font-size: 10px;
-    font-weight: bold;
-    top: 0;
-    left: ${theme.space[2]}px;
-  }
-`}
-`;
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/components/MultiComment.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/components/MultiComment.tsx
deleted file mode 100644
index 56c7a60fc36..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/components/MultiComment.tsx
+++ /dev/null
@@ -1,152 +0,0 @@
-import { Element, Text } from '@codesandbox/components';
-import OutsideClickHandler from 'react-outside-click-handler';
-import { css } from '@styled-system/css';
-import { useAppState, useActions } from 'app/overmind';
-import { formatDistanceStrict } from 'date-fns';
-import { zonedTimeToUtc } from 'date-fns-tz';
-import React from 'react';
-
-type MultiCommentProps = {
-  x: number;
-  y: number;
-  ids: string[];
-};
-
-export const MultiComment = ({ x, y, ids }: MultiCommentProps) => {
-  const { editor, comments } = useAppState();
-  const { closeMultiCommentsSelector, selectComment } = useActions().comments;
-
-  const CARROT_LEFT_MARGIN = 25;
-  const BORDER_WIDTH = 10;
-
-  const list = css({
-    position: 'fixed',
-    left: x - CARROT_LEFT_MARGIN,
-    top: y + 20,
-    backgroundColor: 'sideBar.background',
-    border: '1px solid',
-    borderColor: 'sideBar.border',
-    paddingY: 2,
-    paddingX: 0,
-    zIndex: 999999999999999,
-    listStyle: 'none',
-    borderRadius: 4,
-
-    '&::before': {
-      content: "''",
-      display: 'block',
-      position: 'absolute',
-      left: CARROT_LEFT_MARGIN - 1,
-      width: 0,
-      height: 0,
-      borderStyle: 'solid',
-      top: `-${BORDER_WIDTH + 1}px`,
-      borderColor: 'transparent',
-      borderBottomColor: 'sideBar.border',
-
-      borderWidth: `${BORDER_WIDTH + 1}px`,
-      borderTopWidth: 0,
-    },
-
-    '&::after': {
-      content: "''",
-      display: 'block',
-      position: 'absolute',
-      left: CARROT_LEFT_MARGIN,
-      width: 0,
-      height: 0,
-      borderStyle: 'solid',
-      top: `-${BORDER_WIDTH}px`,
-      borderColor: 'transparent',
-      borderBottomColor: 'sideBar.background',
-      borderWidth: `${BORDER_WIDTH}px`,
-      borderTopWidth: 0,
-    },
-  });
-
-  const item = css({
-    border: 'none',
-    backgroundColor: 'transparent',
-    padding: 2,
-    width: 200,
-    cursor: 'pointer',
-    position: 'relative',
-    textAlign: 'left',
-    '&:hover': {
-      color: 'list.hoverForeground',
-      backgroundColor: 'list.hoverBackground',
-    },
-  });
-
-  const date = comment =>
-    formatDistanceStrict(
-      zonedTimeToUtc(comment.insertedAt, 'Etc/UTC'),
-      new Date(),
-      {
-        addSuffix: true,
-      }
-    );
-
-  const sortedComments = ids
-    .map((id: string) => comments.comments[editor.currentSandbox.id][id])
-    .sort((commentA, commentB) => {
-      const dateA = new Date(commentA.insertedAt);
-      const dateB = new Date(commentB.insertedAt);
-      if (dateA < dateB) {
-        return 1;
-      }
-
-      if (dateA > dateB) {
-        return -1;
-      }
-
-      return 0;
-    });
-
-  return (
-    <Element css={css({ position: 'absolute' })}>
-      <OutsideClickHandler onOutsideClick={() => closeMultiCommentsSelector()}>
-        <Element as="ul" css={list}>
-          {sortedComments.map(comment =>
-            comment ? (
-              <Element as="li" key={comment.id}>
-                <Element
-                  as="button"
-                  type="button"
-                  onClick={event => {
-                    const bounds = event.currentTarget.getBoundingClientRect();
-                    selectComment({
-                      commentId: comment.id,
-                      bounds: {
-                        left: bounds.left,
-                        right: bounds.right,
-                        top: bounds.top,
-                        bottom: bounds.bottom,
-                      },
-                    });
-                  }}
-                  css={item}
-                >
-                  <Text
-                    size={2}
-                    weight="bold"
-                    paddingRight={2}
-                    itemProp="name"
-                    css={css({
-                      color: 'sideBar.foreground',
-                    })}
-                  >
-                    {comment.user.username}
-                  </Text>
-                  <Text size={2} variant="muted">
-                    {date(comment)}
-                  </Text>
-                </Element>
-              </Element>
-            ) : null
-          )}
-        </Element>
-      </OutsideClickHandler>
-    </Element>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/hooks/useCodesandboxCommentEditor.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/hooks/useCodesandboxCommentEditor.tsx
deleted file mode 100644
index 2a6bfdcf394..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/hooks/useCodesandboxCommentEditor.tsx
+++ /dev/null
@@ -1,261 +0,0 @@
-import { UserQuery } from '@codesandbox/common/lib/types';
-import { ENTER, ESC } from '@codesandbox/common/lib/utils/keycodes';
-import { FormField, List, ListAction, Textarea } from '@codesandbox/components';
-import { css } from '@styled-system/css';
-import { useAppState, useActions } from 'app/overmind';
-import { convertMentionLinksToMentions } from 'app/overmind/utils/comments';
-import React, { Attributes } from 'react';
-
-import { useMention } from './useMention';
-import { useImageDrop } from './useImageDrop';
-
-const markdownImageRegExp = /!\[[^\]]*\]\((.*?)\)/gm;
-const imageFileNameRegExp = /\((.*)\)/;
-
-type Mentions = {
-  [mentionName: string]: UserQuery;
-};
-
-type Images = {
-  [fileName: string]: {
-    src: string;
-    resolution: [number, number];
-  };
-};
-
-export const useCodesandboxCommentEditor = ({
-  initialValue,
-  initialMentions,
-  initialImages,
-  onSubmit,
-  fixed,
-  props = {},
-}: {
-  initialValue: string;
-  initialMentions: Mentions;
-  initialImages: Images;
-  onSubmit: (value: string, mentions: Mentions, images: Images) => void;
-  fixed: boolean;
-  props: typeof Textarea extends React.FC<infer P>
-    ? P & { css?: Attributes['css'] }
-    : never;
-}): [React.ReactElement, string, Mentions, Images] => {
-  const ref = React.useRef(null);
-  const state = useAppState();
-  const actions = useActions();
-  const [images, setImages] = React.useState(initialImages);
-  const [value, setValue, mention, mentions] = useMention(
-    ref,
-    () => convertMentionLinksToMentions(initialValue),
-    initialMentions
-  );
-  const [menuIndex, setMenuIndex] = React.useState(0);
-  const textareaBoundingRect = React.useMemo(
-    () => ref.current && ref.current.getBoundingClientRect(),
-    // eslint-disable-next-line
-    [mention.query]
-  );
-  const users = state.comments.usersQueryResult;
-
-  useImageDrop({
-    onDrop: (name, src, resolution) => {
-      setImages(current => ({
-        ...current,
-        [name]: {
-          src,
-          resolution,
-        },
-      }));
-    },
-    ref,
-    setValue,
-    value,
-  });
-
-  React.useEffect(() => {
-    actions.comments.queryUsers(mention.query);
-  }, [mention.query, actions.comments]);
-
-  React.useEffect(() => {
-    if (menuIndex > users.length - 1) {
-      setMenuIndex(users.length ? users.length - 1 : 0);
-    }
-  }, [menuIndex, users.length]);
-
-  // We have to use an effect to properly stop
-  // propagation
-  React.useEffect(() => {
-    if (ref.current) {
-      const currentRef = ref.current;
-      const onKeyDown = event => {
-        if (event.keyCode === ESC && mention.query !== null) {
-          event.stopPropagation();
-        }
-      };
-      currentRef.addEventListener('keydown', onKeyDown);
-
-      return () => {
-        currentRef.removeEventListener('keydown', onKeyDown);
-      };
-    }
-
-    return () => {};
-    // eslint-disable-next-line
-  }, [ref.current, mention]);
-
-  const onKeyDown = event => {
-    if (mention.query !== null) {
-      if (event.keyCode === ENTER) {
-        event.preventDefault();
-        if (users.length) {
-          mention.add(users[menuIndex].username, users[menuIndex]);
-        }
-      } else if (event.keyCode === 38) {
-        event.preventDefault();
-        setMenuIndex(i => (i === 0 ? users.length - 1 : i - 1));
-      } else if (event.keyCode === 40) {
-        event.preventDefault();
-        setMenuIndex(i => (i === users.length - 1 ? 0 : i + 1));
-      }
-    } else if (event.keyCode === ENTER && !event.shiftKey) {
-      event.preventDefault();
-      const matchedImageReferences = value.match(markdownImageRegExp);
-      const imageReferences = matchedImageReferences
-        ? matchedImageReferences.map(
-            imageLink => imageLink.match(imageFileNameRegExp)[1]
-          )
-        : [];
-      const actuallyIncludedImages = imageReferences.reduce(
-        (aggr, fileName) => {
-          if (images[fileName]) {
-            aggr[fileName] = images[fileName];
-          }
-
-          return aggr;
-        },
-        {}
-      );
-
-      setValue('');
-      onSubmit(value, mentions, actuallyIncludedImages);
-    }
-  };
-
-  function renderResult() {
-    if (mention.query == null) {
-      return null;
-    }
-
-    if (mention.query.length < 3) {
-      return <ListAction>Please type more than 3 characters</ListAction>;
-    }
-
-    if (state.comments.isQueryingUsers && !users.length) {
-      return <ListAction>Searching...</ListAction>;
-    }
-
-    if (!state.comments.isQueryingUsers && !users.length) {
-      return <ListAction>No results</ListAction>;
-    }
-
-    return users.map((item, index) => (
-      <button
-        key={item.id}
-        type="button"
-        css={`
-          display: block;
-          width: 100%;
-          background: transparent;
-          border: none;
-          padding: 0;
-        `}
-      >
-        <ListAction
-          onClick={() => mention.add(users[index].username, users[index])}
-          css={
-            menuIndex === index
-              ? css({
-                  color: 'list.hoverForeground',
-                  backgroundColor: 'list.hoverBackground',
-                })
-              : null
-          }
-        >
-          <img
-            alt={item.username}
-            css={css({
-              borderRadius: 2,
-              marginRight: 2,
-            })}
-            width={24}
-            height={24}
-            src={item.avatarUrl}
-          />{' '}
-          {item.username}
-        </ListAction>
-      </button>
-    ));
-  }
-
-  const result = renderResult();
-  const resultHeight = result ? React.Children.count(result) : 0;
-
-  return [
-    <div style={{ position: 'relative' }}>
-      <FormField label="Add a comment" hideLabel>
-        <Textarea
-          {...props}
-          ref={ref}
-          value={value}
-          autoComplete="off"
-          placeholder="Add a comment..."
-          onChange={event => setValue(event.target.value)}
-          onKeyDown={onKeyDown}
-        />
-      </FormField>
-      {typeof mention.query === 'string' && !mentions[mention.query] ? (
-        <div
-          // This is a trick to make absolute (dialog) be the relative position for
-          // the fixed list underneath
-          css={css({
-            position: fixed ? 'fixed' : 'absolute',
-            width: '250px',
-          })}
-          style={{
-            bottom: fixed
-              ? window.innerHeight -
-                (textareaBoundingRect.top - mention.top) +
-                (resultHeight * 32 + 8)
-              : textareaBoundingRect.height -
-                mention.top +
-                (resultHeight * 32 + 8),
-            left: fixed
-              ? textareaBoundingRect.left + mention.left - 8 // 8 = padding
-              : mention.left,
-          }}
-        >
-          <List
-            onKeyDown={onKeyDown}
-            css={css({
-              position: 'fixed',
-              width: '250px',
-              borderBottomLeftRadius: 'small',
-              borderBottomRightRadius: 'small',
-              boxShadow: 1,
-              fontSize: 3,
-              zIndex: 3,
-              backgroundColor: 'dialog.background',
-              border: '1px solid',
-              borderColor: 'dialog.border',
-            })}
-          >
-            {result}
-          </List>
-        </div>
-      ) : null}
-    </div>,
-    value,
-    mentions,
-    images,
-  ];
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/hooks/useImageDrop.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/hooks/useImageDrop.ts
deleted file mode 100644
index dda35976155..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/hooks/useImageDrop.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-import * as React from 'react';
-
-const MAX_IMAGE_WIDTH = 1280;
-
-// Converts file to a maxium size of base64
-const toBase64 = (file: File) =>
-  new Promise<{ src: string; resolution: [number, number] }>(
-    (resolve, reject) => {
-      const reader = new FileReader();
-      reader.readAsDataURL(file);
-      reader.onload = () => {
-        const canvas = document.createElement('canvas');
-        const ctx = canvas.getContext('2d');
-
-        const image = new Image();
-        // eslint-disable-next-line func-names
-        image.onload = function () {
-          const minWidth = Math.min(image.width, MAX_IMAGE_WIDTH);
-          const resolution = [
-            minWidth,
-            (minWidth * image.height) / image.width,
-          ] as [number, number];
-          ctx.drawImage(image, 0, 0, resolution[0], resolution[1]);
-          resolve({ src: canvas.toDataURL(), resolution });
-        };
-        image.src = reader.result as string;
-      };
-      reader.onerror = reject;
-    }
-  );
-
-export const useImageDrop = ({
-  ref,
-  value,
-  setValue,
-  onDrop,
-}: {
-  ref: React.MutableRefObject<HTMLTextAreaElement>;
-  value: string;
-  setValue: (newValue: string) => void;
-  onDrop: (name: string, src: string, resolution: [number, number]) => void;
-}) => {
-  React.useEffect(() => {
-    if (ref.current) {
-      const currentRef = ref.current;
-      const onDropListener = (event: DragEvent) => {
-        const file = event.dataTransfer.files[0];
-
-        if (file && file.type.startsWith('image/')) {
-          const fileName = file.name.replace(/\s/g, '_');
-          toBase64(file)
-            .then(({ src, resolution }) => {
-              const currentCaretIndex = currentRef.selectionStart;
-              try {
-                const leadingValue = value.substr(0, currentCaretIndex);
-                const tailingValue = value.substr(currentCaretIndex);
-                const imageRef = `![${fileName}](${fileName})`;
-                const newValue = `${leadingValue}${imageRef}${tailingValue}`;
-
-                setValue(newValue);
-                onDrop(fileName, src, resolution);
-
-                // We can not update cursor position until React has actually
-                // updated the textarea
-                setTimeout(() => {
-                  currentRef.selectionEnd = currentCaretIndex + imageRef.length;
-                });
-              } catch {
-                // Unmounted
-              }
-            })
-            .catch(() => {
-              // ?
-            });
-        }
-      };
-      currentRef.addEventListener('drop', onDropListener);
-
-      return () => {
-        currentRef.removeEventListener('drop', onDropListener);
-      };
-    }
-
-    return () => {};
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ref.current, value]);
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/hooks/useMention.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/hooks/useMention.tsx
deleted file mode 100644
index 2ce8392506c..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/hooks/useMention.tsx
+++ /dev/null
@@ -1,171 +0,0 @@
-import React from 'react';
-import getCaretCoordinates from 'textarea-caret';
-
-function getMentionAtIndex(value, index, mentions) {
-  const words = value.split(' ');
-  // Based on current caret position, figure out if we have entered
-  // a mention
-  const { mention } = words.reduce(
-    (aggr, word) => {
-      if (aggr.mention) {
-        return aggr;
-      }
-
-      const currentIndex = aggr.index;
-      if (
-        // The mention can lead with linebreaks
-        word.match(/^\n+@|@/) &&
-        index >= currentIndex &&
-        index <= currentIndex + word.length &&
-        !(word.substr(word.indexOf('@') + 1) in mentions)
-      ) {
-        const atIndex = word.indexOf('@');
-
-        return {
-          mention: {
-            value: word,
-            startIndex: currentIndex + atIndex,
-            endIndex: currentIndex + word.length - 1,
-          },
-        };
-      }
-
-      return {
-        index: currentIndex + word.length + 1, // 1 is for the spacing
-      };
-    },
-    {
-      index: 0,
-      mention: null,
-    }
-  );
-
-  return mention;
-}
-
-export const useMention = (
-  { current },
-  initialValue: string | (() => string) = '',
-  initialMentions: {
-    [mentionName: string]: any;
-  } = {}
-): [
-  string,
-  (value: string) => void,
-  {
-    query: null | string;
-    top: number;
-    left: number;
-    add: (mentionName: string, meta: any) => void;
-  },
-  {
-    [mentionName: string]: any;
-  }
-] => {
-  const [value, setValue] = React.useState(initialValue);
-  const [, forceRerender] = React.useState(0);
-  const [mentions, setMentions] = React.useState(initialMentions);
-
-  React.useEffect(() => {
-    if (current) {
-      // This handles rerendering on moving the selection
-      // as well
-      const onKeyUp = () => {
-        forceRerender(i => i + 1);
-      };
-
-      current.addEventListener('keyup', onKeyUp);
-
-      return () => {
-        current.removeEventListener('keyup', onKeyUp);
-      };
-    }
-    return () => {};
-  }, [current]);
-
-  if (!current) {
-    return [
-      value,
-      setValue,
-      {
-        query: null,
-        top: 0,
-        left: 0,
-        add: () => {
-          throw new Error('You are trying to add a mention without a query');
-        },
-      },
-      mentions,
-    ];
-  }
-
-  const mention = getMentionAtIndex(value, current.selectionStart, mentions);
-
-  const query =
-    mention &&
-    current.value.substr(
-      mention.startIndex + 1,
-      mention.endIndex - mention.startIndex
-    );
-
-  if (
-    !mention ||
-    (query.length >= 3 && !/^[a-z0-9_-]+[a-z0-9_.-]+[a-z0-9_-]+$/i.test(query))
-  ) {
-    return [
-      value,
-      // TODO: Check on changes if mentions are still there
-      setValue,
-      {
-        query: null,
-        top: 0,
-        left: 0,
-        add: () => {
-          throw new Error('You are trying to add a mention without a query');
-        },
-      },
-      mentions,
-    ];
-  }
-
-  const caret = getCaretCoordinates(current, mention.startIndex);
-
-  return [
-    value,
-    (newValue: string) => {
-      const currentMentions = Object.keys(mentions).reduce((aggr, name) => {
-        if (!newValue.includes(`@${name}`)) {
-          return aggr;
-        }
-
-        aggr[name] = mentions[name];
-
-        return aggr;
-      }, {});
-      setMentions(currentMentions);
-      setValue(newValue);
-    },
-    {
-      query,
-      top: caret.top,
-      left: caret.left,
-      add: (mentionName, meta) => {
-        setMentions(currentMentions => ({
-          ...currentMentions,
-          [mentionName]: meta,
-        }));
-        setValue(
-          value.substr(0, mention.startIndex + 1) +
-            mentionName +
-            value.substr(mention.endIndex + 1)
-        );
-        const selectionEnd = mention.startIndex + mentionName.length + 1;
-        setTimeout(() => {
-          current.focus();
-          current.selectionEnd = selectionEnd;
-        });
-      },
-    },
-    mentions,
-  ];
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/index.tsx
deleted file mode 100644
index 6575b331748..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/index.tsx
+++ /dev/null
@@ -1,190 +0,0 @@
-import { CommentsFilterOption, UserQuery } from '@codesandbox/common/lib/types';
-import {
-  Icon,
-  List,
-  Menu,
-  SidebarRow,
-  Stack,
-  Text,
-} from '@codesandbox/components';
-import { css } from '@styled-system/css';
-import { useAppState, useActions } from 'app/overmind';
-import React from 'react';
-
-import { AddComment } from './AddComment';
-import { Comment } from './Comment';
-
-export const Comments: React.FC = () => {
-  const {
-    selectedCommentsFilter,
-    currentComments,
-    currentCommentsByDate,
-  } = useAppState().comments;
-  const { comments: commentsActions } = useActions();
-  const scrollRef = React.useRef(null);
-  const options = Object.values(CommentsFilterOption);
-
-  const getSelectedFilter = () => {
-    switch (selectedCommentsFilter) {
-      case CommentsFilterOption.ALL || CommentsFilterOption.OPEN:
-        return 'new';
-      case CommentsFilterOption.RESOLVED:
-        return 'resolved';
-      default:
-        return 'new';
-    }
-  };
-
-  const getFilterName = () => {
-    switch (selectedCommentsFilter) {
-      case CommentsFilterOption.ALL:
-        return 'All';
-      case CommentsFilterOption.RESOLVED:
-        return 'Resolved';
-      case CommentsFilterOption.OPEN:
-        return 'Open';
-      default:
-        return 'new';
-    }
-  };
-
-  const onSubmit = (
-    value: string,
-    mentions: { [username: string]: UserQuery },
-    images: {
-      [fileName: string]: { src: string; resolution: [number, number] };
-    }
-  ) => {
-    commentsActions.saveNewComment({
-      content: value,
-      mentions,
-      images,
-    });
-    scrollRef.current.scrollTop = 0;
-  };
-
-  const iconColor =
-    selectedCommentsFilter !== CommentsFilterOption.ALL
-      ? 'button.background'
-      : 'inherit';
-
-  const Empty = () => (
-    <Stack
-      direction="vertical"
-      align="center"
-      justify="center"
-      gap={8}
-      marginX={2}
-    >
-      <Icon
-        name="comments"
-        size={80}
-        color="mutedForeground"
-        css={{ opacity: 0.2 }}
-      />
-      <div>
-        <Text block align="center" variant="muted">
-          There are no {getSelectedFilter()} comments.
-        </Text>
-        <Text block align="center" variant="muted">
-          Comment on code by clicking within a file, or add a comment below.
-        </Text>
-      </div>
-    </Stack>
-  );
-
-  return (
-    <Stack
-      direction="vertical"
-      justify="space-between"
-      css={{ height: '100%' }}
-    >
-      <div css={{ overflow: 'hidden' }}>
-        <SidebarRow
-          justify="space-between"
-          paddingX={2}
-          css={css({
-            borderBottom: '1px solid',
-            borderColor: 'sideBar.border',
-            minHeight: '35px',
-          })}
-        >
-          <Text>
-            Comments
-            <Text css={{ textTransform: 'capitalize' }}>
-              {' '}
-              ({getFilterName()})
-            </Text>
-          </Text>
-          <Menu>
-            <Menu.IconButton
-              className="icon-button"
-              name="filter"
-              title="Filter comments"
-              size={12}
-              css={css({
-                color: iconColor,
-                ':hover:not(:disabled)': {
-                  color: iconColor,
-                },
-                ':focus:not(:disabled)': {
-                  color: iconColor,
-                  backgroundColor: 'transparent',
-                },
-              })}
-            />
-            <Menu.List>
-              {options.map(option => (
-                <Menu.Item
-                  key={option}
-                  onSelect={() => commentsActions.selectCommentsFilter(option)}
-                >
-                  {option}
-                </Menu.Item>
-              ))}
-            </Menu.List>
-          </Menu>
-        </SidebarRow>
-
-        {currentComments.length ? (
-          <List
-            itemProp="mainEntity"
-            itemScope
-            itemType="http://schema.org/Conversation"
-            ref={scrollRef}
-            marginTop={4}
-            css={{
-              // stretch within container, leaving space for comment box
-              height: 'calc(100% - 32px)',
-              overflow: 'auto',
-              scrollBehavior: 'smooth',
-            }}
-          >
-            {currentCommentsByDate.today.length ? (
-              <>
-                <Text size={3} weight="bold" block margin={2}>
-                  Today
-                </Text>
-                {currentCommentsByDate.today.map(comment => (
-                  <Comment key={comment.id} comment={comment} />
-                ))}
-              </>
-            ) : null}
-            {currentCommentsByDate.prev.length ? (
-              <>
-                <Text size={3} weight="bold" block margin={2} marginTop={4}>
-                  Earlier
-                </Text>
-                {currentCommentsByDate.prev.map(comment => (
-                  <Comment key={comment.id} comment={comment} />
-                ))}
-              </>
-            ) : null}
-          </List>
-        ) : null}
-      </div>
-      {currentComments.length ? null : <Empty />}
-      <AddComment onSubmit={onSubmit} />
-    </Stack>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ConfigurationFiles/Icons.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ConfigurationFiles/Icons.tsx
deleted file mode 100644
index f806a0a7441..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ConfigurationFiles/Icons.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-import React from 'react';
-
-export const NetlifyIcon = props => (
-  <svg width={12} height={12} fill="none" viewBox="0 0 12 12" {...props}>
-    <path
-      fill="#4CAA9F"
-      d="M.474 7.144a1.619 1.619 0 010-2.288L4.856.474a1.619 1.619 0 012.288 0l4.382 4.382a1.619 1.619 0 010 2.288l-4.382 4.382a1.619 1.619 0 01-2.288 0L.474 7.144z"
-    />
-  </svg>
-);
-
-export const PrettierIcon = props => (
-  <svg width={10} height={11} fill="none" viewBox="0 0 10 11" {...props}>
-    <path
-      fill="#56B3B4"
-      d="M8.486 2.057H7.97a.257.257 0 100 .514h.515a.257.257 0 100-.514z"
-    />
-    <path
-      fill="#EA5E5E"
-      d="M2.829 10.286H.257a.257.257 0 000 .514H2.83a.257.257 0 100-.514z"
-    />
-    <path
-      fill="#BF85BF"
-      d="M7.971 6.171H6.43a.257.257 0 100 .515H7.97a.257.257 0 000-.515z"
-    />
-    <path
-      fill="#EA5E5E"
-      d="M5.4 6.171H3.343a.257.257 0 100 .515H5.4a.257.257 0 100-.515z"
-    />
-    <path
-      fill="#56B3B4"
-      d="M2.314 6.171H.257a.257.257 0 100 .515h2.057a.257.257 0 100-.515z"
-    />
-    <path
-      fill="#BF85BF"
-      d="M2.829 8.229H.257a.257.257 0 100 .514H2.83a.257.257 0 100-.514zM2.829 4.114H.257a.257.257 0 100 .515H2.83a.257.257 0 100-.515z"
-    />
-    <path
-      fill="#F7BA3E"
-      d="M7.971 1.028H2.828a.257.257 0 000 .515h5.143a.257.257 0 000-.515z"
-    />
-    <path
-      fill="#EA5E5E"
-      d="M1.8 1.028H.257a.257.257 0 000 .515H1.8a.257.257 0 000-.515z"
-    />
-    <path
-      fill="#F7BA3E"
-      d="M2.829 9.257h-.515a.257.257 0 000 .515h.515a.257.257 0 100-.515z"
-    />
-    <path
-      fill="#56B3B4"
-      d="M2.829 3.086h-.515a.257.257 0 100 .514h.515a.257.257 0 100-.514zM1.286 9.257H.257a.257.257 0 000 .515h1.029a.257.257 0 100-.515z"
-    />
-    <path
-      fill="#F7BA3E"
-      d="M1.286 3.086H.257a.257.257 0 100 .514h1.029a.257.257 0 100-.514z"
-    />
-    <path
-      fill="#56B3B4"
-      d="M8.486 5.143H4.37a.257.257 0 100 .514h4.115a.257.257 0 100-.514z"
-    />
-    <path
-      fill="#F7BA3E"
-      d="M3.343 5.143H1.8a.257.257 0 100 .514h1.543a.257.257 0 100-.514z"
-    />
-    <path
-      fill="#EA5E5E"
-      d="M.771 5.143H.257a.257.257 0 100 .514h.514a.257.257 0 100-.514z"
-    />
-    <path
-      fill="#BF85BF"
-      d="M6.943 2.057H4.886a.257.257 0 100 .514h2.057a.257.257 0 100-.514z"
-    />
-    <path
-      fill="#56B3B4"
-      d="M3.857 2.057h-3.6a.257.257 0 000 .514h3.6a.257.257 0 100-.514z"
-    />
-    <path
-      fill="#BF85BF"
-      d="M.771 7.2H.257a.257.257 0 100 .514h.514a.257.257 0 000-.514z"
-    />
-    <path
-      fill="#EA5E5E"
-      d="M9 3.086H6.429a.257.257 0 100 .514H9a.257.257 0 100-.514z"
-    />
-    <path
-      fill="#F7BA3E"
-      d="M9 4.114H6.429a.257.257 0 100 .515H9a.257.257 0 100-.515z"
-    />
-    <path
-      fill="#56B3B4"
-      d="M6.429 0H.257a.257.257 0 000 .514H6.43a.257.257 0 100-.514z"
-    />
-  </svg>
-);
-
-export const NPMIcon = props => (
-  <svg width={17} height={16} fill="none" viewBox="0 0 17 16" {...props}>
-    <path
-      fill="#FF453A"
-      d="M.667 16V0h16.172v16H.668zM3.708 2.998v9.98h5.097V5.079h2.97v7.9h2.022V3H3.708z"
-    />
-  </svg>
-);
-
-export const VercelIcon = props => (
-  <svg width={12} height={10} fill="none" viewBox="0 0 12 10" {...props}>
-    <path fill="#fff" d="M6 0l6 10H0L6 0z" />
-  </svg>
-);
-
-export const JSIcon = props => (
-  <svg width={16} height={16} viewBox="0 0 16 16" {...props}>
-    <g id="Page-1" fill="none" fillRule="evenodd" stroke="none" strokeWidth={1}>
-      <g id="configJS" fillRule="nonzero">
-        <path id="Path" fill="#F7DF1E" d="M0 0L16 0 16 16 0 16z" />
-        <g id="Group" fill="#000" transform="translate(4 7)">
-          <path
-            id="Path"
-            d="M.207 6.37l1.224-.74c.237.418.452.773.967.773.494 0 .806-.194.806-.945V.345h1.503V5.48c0 1.557-.913 2.266-2.244 2.266C1.26 7.745.56 7.122.207 6.37M5.524 6.21l1.224-.71c.322.527.741.913 1.482.913.623 0 1.02-.311 1.02-.74 0-.516-.407-.699-1.095-1l-.376-.16C6.695 4.05 5.975 3.47 5.975 2.245c0-1.127.86-1.987 2.202-1.987.956 0 1.643.333 2.137 1.203l-1.17.752c-.258-.462-.538-.644-.967-.644-.44 0-.72.279-.72.644 0 .451.28.634.924.913l.376.161c1.278.548 1.997 1.106 1.997 2.363 0 1.353-1.063 2.094-2.491 2.094-1.397 0-2.299-.666-2.739-1.536"
-          />
-        </g>
-      </g>
-    </g>
-  </svg>
-);
-
-export const CodeSandboxIcon = props => (
-  <svg width={16} height={16} viewBox="0 0 16 16" {...props}>
-    <g id="Page-1" fill="none" fillRule="evenodd" stroke="none" strokeWidth={1}>
-      <g id="configCodesandbox">
-        <path
-          id="Path"
-          fill="#000"
-          fillRule="nonzero"
-          d="M0 1a1 1 0 011-1h14a1 1 0 011 1v14a1 1 0 01-1 1H1a1 1 0 01-1-1V1z"
-        />
-        <path
-          id="Shape"
-          fill="#999"
-          d="M7.82 8.532v5.418c.095 0 .157-.02.241-.069l4.339-2.48c.171-.097.241-.25.241-.447V5.927c0-.099-.02-.158-.069-.241L7.959 8.293a.275.275 0 00-.139.239zm2.41 3.11c0 .139-.051.208-.172.276l-1.446.827c-.103.069-.24.034-.24-.104V8.957c0-.098.086-.226.171-.275l3.306-1.894c.092-.053.172.032.172.138v1.962a.265.265 0 01-.138.241l-1.48.792c-.09.048-.172.14-.172.241v1.48z"
-        />
-        <path
-          id="Shape"
-          fill="#F2F2F2"
-          d="M3 10.954V5.927c0-.198.104-.384.276-.482l4.2-2.376A.839.839 0 017.821 3c.103 0 .262.026.344.069l4.166 2.376c.083.048.195.16.241.24L7.958 8.304a.278.278 0 00-.137.24v5.407a.555.555 0 01-.276-.07L3.31 11.437c-.172-.098-.31-.284-.31-.482zm.62-4.029v1.963c0 .138.034.207.172.276l1.446.826a.283.283 0 01.172.275v1.378c0 .137.035.206.172.275l1.447.827c.137.068.24.034.24-.104V8.957a.284.284 0 00-.171-.276L3.86 6.822c-.104-.069-.241-.034-.241.103zm5.647-2.341l-1.274.723a.313.313 0 01-.345 0l-1.274-.723a.285.285 0 00-.275 0l-1.584.895c-.138.069-.138.207 0 .276L7.683 7.58c.085.048.19.048.275 0l3.168-1.825c.103-.07.138-.207 0-.276l-1.584-.895a.285.285 0 00-.275 0z"
-        />
-      </g>
-    </g>
-  </svg>
-);
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ConfigurationFiles/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ConfigurationFiles/index.tsx
deleted file mode 100644
index fde958c224d..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ConfigurationFiles/index.tsx
+++ /dev/null
@@ -1,164 +0,0 @@
-import React from 'react';
-import {
-  Element,
-  Collapsible,
-  Text,
-  Button,
-  Stack,
-  Grid as BaseGrid,
-} from '@codesandbox/components';
-import css from '@styled-system/css';
-import getDefinition from '@codesandbox/common/lib/templates';
-import { resolveModule } from '@codesandbox/common/lib/sandbox/modules';
-
-import { useAppState, useActions } from 'app/overmind';
-import styled, { withTheme } from 'styled-components';
-import { TypescriptIcon } from 'app/components/TypescriptIcon';
-import {
-  NetlifyIcon,
-  PrettierIcon,
-  NPMIcon,
-  VercelIcon,
-  JSIcon,
-  CodeSandboxIcon,
-} from './Icons';
-
-const getIcon = name => {
-  const icons = {
-    'netlify.toml': NetlifyIcon,
-    'package.json': NPMIcon,
-    'vercel.json': VercelIcon,
-    '.prettierrc': PrettierIcon,
-    'jsconfig.json': JSIcon,
-    'tsconfig.json': TypescriptIcon,
-    'sandbox.config.json': CodeSandboxIcon,
-  };
-
-  return icons[name] || JSIcon;
-};
-
-const Grid = styled(BaseGrid)`
-  grid-template-columns: 1fr 56px;
-  grid-gap: ${({ theme }) => theme.space[4]}px;
-  align-items: flex-end;
-`;
-
-export const ConfigurationFilesComponent = ({ theme }) => {
-  const { currentSandbox } = useAppState().editor;
-  const { files, editor } = useActions();
-  const { configurationFiles } = getDefinition(currentSandbox.template);
-
-  const createdPaths = {};
-  const restPaths = {};
-
-  Object.keys(configurationFiles)
-    .sort()
-    .forEach(p => {
-      const config = configurationFiles[p];
-
-      try {
-        const module = resolveModule(
-          p,
-          currentSandbox.modules,
-          currentSandbox.directories
-        );
-        createdPaths[p] = {
-          config,
-          module,
-        };
-      } catch (e) {
-        restPaths[p] = {
-          config,
-        };
-      }
-    });
-
-  return (
-    <>
-      <Collapsible title="Configuration Files" defaultOpen>
-        <Stack direction="vertical" gap={6} padding={2}>
-          <Element>
-            <Text block marginBottom={2}>
-              Configuration for your Sandbox
-            </Text>
-            <Text variant="muted">
-              CodeSandbox supports several configuration files per template, you
-              can see and edit all supported files for the current sandbox here.
-            </Text>
-          </Element>
-          <Stack direction="vertical" gap={4}>
-            {Object.keys(createdPaths).map(path => {
-              const { config, module } = createdPaths[path];
-              const Icon = getIcon(config.title);
-              return (
-                <Element key={config.title}>
-                  <Stack gap={2} marginBottom={2}>
-                    <Icon />
-                    <Text size={2}>{config.title}</Text>
-                  </Stack>
-                  <Grid>
-                    <Text size={2} variant="muted">
-                      {config.description}
-                    </Text>
-                    <Button
-                      css={css({
-                        width: 'auto',
-                        height: 4,
-                      })}
-                      variant="secondary"
-                      onClick={() => editor.moduleSelected({ id: module.id })}
-                    >
-                      Edit
-                    </Button>
-                  </Grid>
-                </Element>
-              );
-            })}
-          </Stack>
-        </Stack>
-      </Collapsible>
-      <Collapsible title="Other Configuration" defaultOpen>
-        <Stack
-          direction="vertical"
-          gap={4}
-          style={{ padding: `0 ${theme.space[3]}px` }}
-        >
-          {Object.keys(restPaths).map(path => {
-            const { config } = restPaths[path];
-            const Icon = getIcon(config.title);
-            return (
-              <Element key={config.title}>
-                <Stack gap={2} marginBottom={2}>
-                  <Icon />
-                  <Text size={2}>{config.title}</Text>
-                </Stack>
-                <Grid>
-                  <Text size={2} variant="muted">
-                    {config.description}
-                  </Text>
-                  <Button
-                    css={css({
-                      width: 'auto',
-                      height: 4,
-                    })}
-                    variant="secondary"
-                    onClick={() =>
-                      files.moduleCreated({
-                        title: config.title,
-                        directoryShortid: null,
-                      })
-                    }
-                  >
-                    Create
-                  </Button>
-                </Grid>
-              </Element>
-            );
-          })}
-        </Stack>
-      </Collapsible>
-    </>
-  );
-};
-
-export const ConfigurationFiles = withTheme(ConfigurationFilesComponent);
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Deployment/GithubPages/Info.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Deployment/GithubPages/Info.tsx
deleted file mode 100644
index 825f56defd2..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Deployment/GithubPages/Info.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import React from 'react';
-import { Text, Element } from '@codesandbox/components';
-import css from '@styled-system/css';
-
-const info = [
-  {
-    name: 'publicPath',
-    template: 'vue-cli',
-    link: 'https://cli.vuejs.org/guide/deployment.html#github-pages',
-  },
-  {
-    name: 'pathPrefix',
-    template: 'gatsby',
-    link:
-      'https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/how-gatsby-works-with-github-pages/#deploying-to-a-path-on-github-pages',
-  },
-  {
-    name: 'base',
-    template: 'vuepress',
-    link: 'https://vuepress.vuejs.org/guide/deploy.html#github-pages',
-  },
-  {
-    name: 'base',
-    link: 'https://nuxtjs.org/docs/2.x/deployment/github-pages/',
-    template: 'nuxt',
-  },
-  {
-    template: 'gridsome',
-    link: 'https://gridsome.org/docs/deploy-to-github/',
-    name: 'pathPrefix',
-  },
-];
-
-export const Info = ({
-  template,
-  path,
-}: {
-  template: string;
-  path: string;
-}) => {
-  const templateInfo = info.find(link => template === link.template);
-  if (!templateInfo) return null;
-
-  return (
-    <Element marginTop={2}>
-      <Text variant="muted">
-        Make sure you have{' '}
-        <a
-          css={css({
-            color: 'sideBar.foreground',
-            // monaco overrides it
-            textDecoration: 'underline !important',
-          })}
-          href={templateInfo.link}
-          target="_blank"
-          rel="noreferrer"
-        >
-          config
-        </a>{' '}
-        is setup. Your{' '}
-        <Text
-          css={css({
-            fontFamily: 'MonoLisa',
-          })}
-        >
-          {templateInfo.name}
-        </Text>{' '}
-        is:{' '}
-        <Text
-          css={css({
-            fontFamily: 'MonoLisa',
-            color: 'sideBar.foreground',
-          })}
-        >
-          {path}
-        </Text>
-      </Text>
-    </Element>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Deployment/GithubPages/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Deployment/GithubPages/index.tsx
deleted file mode 100644
index 5f4ac640e1e..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Deployment/GithubPages/index.tsx
+++ /dev/null
@@ -1,144 +0,0 @@
-import {
-  Button,
-  List,
-  ListAction,
-  Element,
-  ListItem,
-  Integration,
-  Link,
-  Stack,
-  Text,
-} from '@codesandbox/components';
-import track from '@codesandbox/common/lib/utils/analytics';
-import getTemplate from '@codesandbox/common/lib/templates';
-import React, { FunctionComponent, useEffect } from 'react';
-
-import { useAppState, useActions } from 'app/overmind';
-import { useGitHubPermissions } from 'app/hooks/useGitHubPermissions';
-import { Info } from './Info';
-import { GitHubIcon, FileIcon, VisitIcon } from '../icons';
-
-export const GithubPages: FunctionComponent = () => {
-  const {
-    isLoadingGithub,
-    deployment: { deploying, githubSite },
-    editor: { currentSandbox },
-  } = useAppState();
-  const {
-    modalOpened,
-    signInGithubClicked,
-    deployment: { deployWithGitHubPages, fetchGithubSite },
-  } = useActions();
-  const {
-    restrictsPublicRepos,
-    restrictsPrivateRepos,
-  } = useGitHubPermissions();
-
-  useEffect(() => {
-    fetchGithubSite();
-  }, [fetchGithubSite, currentSandbox.id]);
-
-  const template = getTemplate(currentSandbox.template);
-
-  if (
-    template.staticDeployment === false ||
-    template.githubPagesDeploy === false
-  ) {
-    return null;
-  }
-
-  const deploy = () => {
-    track('Deploy Clicked', { provider: 'github' });
-    deployWithGitHubPages();
-    modalOpened({ modal: 'githubPagesLogs' });
-  };
-
-  const needsPermissions =
-    (currentSandbox.privacy === 0 && restrictsPublicRepos) ||
-    (currentSandbox.privacy !== 0 && restrictsPrivateRepos);
-
-  return (
-    <Integration icon={GitHubIcon} title="GitHub Pages">
-      {needsPermissions ? (
-        <Stack justify="space-between" marginX={2}>
-          <Stack direction="vertical">
-            <Text variant="muted">Enables</Text>
-
-            <Text>Deployments</Text>
-          </Stack>
-
-          <Button
-            autoWidth
-            disabled={isLoadingGithub}
-            onClick={() =>
-              signInGithubClicked(
-                currentSandbox.privacy === 0 ? 'public_repos' : 'private_repos'
-              )
-            }
-          >
-            Sign in
-          </Button>
-        </Stack>
-      ) : (
-        <>
-          <Element marginX={2} marginBottom={githubSite.ghPages ? 6 : 0}>
-            <Text variant="muted" block marginBottom={4}>
-              Deploy your sandbox to{' '}
-              <Link href="https://pages.github.com/" target="_blank">
-                GitHub
-              </Link>
-            </Text>
-
-            <Button disabled={deploying} onClick={deploy}>
-              Deploy to GitHub
-            </Button>
-            <Info template={template.name} path={`csb-${currentSandbox.id}`} />
-          </Element>
-          {githubSite.ghPages && (
-            <List>
-              <ListItem>
-                <Text weight="bold">{githubSite.name}</Text>
-              </ListItem>
-
-              <ListAction
-                onClick={() =>
-                  window.open(
-                    `https://${githubSite.ghLogin}.github.io/${githubSite.name}/`,
-                    '_blank'
-                  )
-                }
-              >
-                <Element marginRight={2}>
-                  <VisitIcon />
-                </Element>{' '}
-                Visit Site
-              </ListAction>
-
-              <ListAction
-                onClick={() => modalOpened({ modal: 'githubPagesLogs' })}
-              >
-                <Element marginRight={2}>
-                  <FileIcon />
-                </Element>{' '}
-                View Logs
-              </ListAction>
-              <ListAction
-                onClick={() =>
-                  window.open(
-                    `https://github.com/${githubSite.ghLogin}/${githubSite.name}/`,
-                    '_blank'
-                  )
-                }
-              >
-                <Element marginRight={2}>
-                  <GitHubIcon />
-                </Element>{' '}
-                Visit Github Repository
-              </ListAction>
-            </List>
-          )}
-        </>
-      )}
-    </Integration>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Deployment/Netlify.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Deployment/Netlify.tsx
deleted file mode 100644
index cb495943d00..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Deployment/Netlify.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import getTemplate from '@codesandbox/common/lib/templates';
-import track from '@codesandbox/common/lib/utils/analytics';
-import {
-  Button,
-  Element,
-  Integration,
-  Link,
-  List,
-  ListAction,
-  ListItem,
-  Text,
-} from '@codesandbox/components';
-import React, { FunctionComponent, useEffect } from 'react';
-
-import { useAppState, useActions } from 'app/overmind';
-
-import { FileIcon, FlagIcon, NetlifyIcon, VisitIcon } from './icons';
-
-export const Netlify: FunctionComponent = () => {
-  const {
-    deployment: { deployWithNetlify, getNetlifyDeploys },
-    modalOpened,
-  } = useActions();
-  const {
-    deployment: {
-      building,
-      deploying,
-      netlify: { claimUrl, site },
-    },
-    editor: { currentSandbox },
-  } = useAppState();
-
-  useEffect(() => {
-    getNetlifyDeploys();
-  }, [getNetlifyDeploys, currentSandbox.id]);
-
-  const template = getTemplate(currentSandbox.template);
-  if (template.staticDeployment === false) {
-    return null;
-  }
-
-  const deploy = () => {
-    track('Deploy Clicked', { provider: 'netlify' });
-    deployWithNetlify();
-    modalOpened({ modal: 'netlifyLogs' });
-  };
-  return (
-    <Integration icon={NetlifyIcon} title="Netlify">
-      <Element marginBottom={site ? 6 : 0} marginX={2}>
-        <Text block marginBottom={4} variant="muted">
-          Deploy your sandbox site to{' '}
-          <Link href="https://www.netlify.com/" target="_blank">
-            Netlify
-          </Link>
-        </Text>
-
-        <Button disabled={deploying || building} onClick={deploy}>
-          Deploy to Netlify
-        </Button>
-      </Element>
-
-      {site && (
-        <List>
-          <ListItem>
-            <Text weight="bold">{site.name}</Text>
-          </ListItem>
-
-          {site.url ? (
-            <ListAction onClick={() => window.open(site.url, '_blank')}>
-              <Element marginRight={2}>
-                <VisitIcon />
-              </Element>{' '}
-              Visit Site
-            </ListAction>
-          ) : null}
-
-          {site.url ? (
-            <ListAction onClick={() => window.open(claimUrl, '_blank')}>
-              <Element marginRight={2}>
-                <FlagIcon />
-              </Element>{' '}
-              Claim Site
-            </ListAction>
-          ) : null}
-
-          <ListAction onClick={() => modalOpened({ modal: 'netlifyLogs' })}>
-            <Element marginRight={2}>
-              <FileIcon />
-            </Element>{' '}
-            View Logs
-          </ListAction>
-        </List>
-      )}
-    </Integration>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Deployment/NotLoggedIn.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Deployment/NotLoggedIn.tsx
deleted file mode 100644
index d54d0407f98..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Deployment/NotLoggedIn.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import {
-  Button,
-  Collapsible,
-  Element,
-  Stack,
-  Text,
-} from '@codesandbox/components';
-import React, { FunctionComponent } from 'react';
-
-import { useActions } from 'app/overmind';
-
-export const NotLoggedIn: FunctionComponent = () => {
-  const { toggleSignInModal } = useActions();
-
-  return (
-    <Collapsible defaultOpen title="Deployment">
-      <Element paddingX={2}>
-        <Stack direction="vertical" gap={2} marginBottom={6}>
-          <Text block size={2} variant="muted">
-            You can deploy a production version of your sandbox using one of our
-            supported providers - Netlify or Vercel.
-          </Text>
-
-          <Text block size={2} variant="muted">
-            You need to be signed in to deploy this sandbox.
-          </Text>
-        </Stack>
-
-        <Button onClick={() => toggleSignInModal()} variant="primary">
-          Sign in
-        </Button>
-      </Element>
-    </Collapsible>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Deployment/NotOwner.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Deployment/NotOwner.tsx
deleted file mode 100644
index 1a753a77e92..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Deployment/NotOwner.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import {
-  Button,
-  Collapsible,
-  Element,
-  Stack,
-  Text,
-} from '@codesandbox/components';
-import React, { FunctionComponent } from 'react';
-import { useAppState, useActions } from 'app/overmind';
-
-export const NotOwner: FunctionComponent = () => {
-  const { forkSandboxClicked } = useActions().editor;
-  const { isForkingSandbox } = useAppState().editor;
-
-  return (
-    <Collapsible defaultOpen title="Deployment">
-      <Element paddingX={2}>
-        <Stack direction="vertical" gap={2} marginBottom={6}>
-          <Text block size={2} variant="muted">
-            You can deploy a production version of your sandbox using one of our
-            supported providers - Netlify or Vercel.
-          </Text>
-
-          <Text block size={2} variant="muted">
-            You need to own this sandbox to deploy.
-          </Text>
-        </Stack>
-
-        <Button
-          disabled={isForkingSandbox}
-          onClick={() => forkSandboxClicked({})}
-          variant="primary"
-        >
-          {isForkingSandbox ? 'Forking Sandbox...' : 'Fork Sandbox'}
-        </Button>
-      </Element>
-    </Collapsible>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Deployment/Vercel/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Deployment/Vercel/elements.ts
deleted file mode 100644
index 3d79f103fbe..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Deployment/Vercel/elements.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import { VercelDeploymentState } from '@codesandbox/common/lib/types';
-import { Text } from '@codesandbox/components';
-import styled, { css } from 'styled-components';
-
-const mapColorToState = (state: VercelDeploymentState, theme: any) => {
-  const STARTING = [
-    VercelDeploymentState.BUILDING,
-    VercelDeploymentState.DEPLOYING,
-    VercelDeploymentState.INITIALIZING,
-  ];
-  const ERROR = [
-    VercelDeploymentState.BUILD_ERROR,
-    VercelDeploymentState.DEPLOYMENT_ERROR,
-    VercelDeploymentState.ERROR,
-  ];
-  const STARTED = [VercelDeploymentState.BOOTED, VercelDeploymentState.READY];
-
-  if (STARTING.includes(state)) {
-    return '#FCCB7E';
-  }
-  if (ERROR.includes(state)) {
-    return theme.red;
-  }
-  if (STARTED.includes(state)) {
-    return theme.green;
-  }
-  if (state === VercelDeploymentState.FROZEN) {
-    return theme.blue;
-  }
-
-  return theme.gray;
-};
-
-export const State = styled(Text)<{ state: VercelDeploymentState }>`
-  ${({ state, theme }) => css`
-    display: flex;
-    align-items: center;
-    text-transform: capitalize;
-
-    &:before {
-      content: '';
-      display: block;
-      width: 10px;
-      height: 10px;
-      border-radius: 50%;
-      margin-right: 0.5rem;
-      background: ${mapColorToState(state, theme)};
-    }
-  `};
-`;
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Deployment/Vercel/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Deployment/Vercel/index.tsx
deleted file mode 100644
index 1bd5bf73c22..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Deployment/Vercel/index.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import {
-  Button,
-  Element,
-  Integration,
-  Link,
-  List,
-  ListAction,
-  ListItem,
-  Stack,
-  Text,
-} from '@codesandbox/components';
-import formatDistanceToNow from 'date-fns/formatDistanceToNow';
-import React, { FunctionComponent } from 'react';
-
-import { useAppState, useActions } from 'app/overmind';
-
-import { VercelIcon, VisitIcon, TrashIcon } from '../icons';
-
-import { State } from './elements';
-
-export const Vercel: FunctionComponent = () => {
-  const {
-    deployment,
-    deployment: { deploySandboxClicked, setDeploymentToDelete },
-    modalOpened,
-    signInVercelClicked,
-  } = useActions();
-  const {
-    deployment: {
-      deploying,
-      vercel: { deploysBeingDeleted, deploys },
-    },
-    user: {
-      integrations: { vercel },
-    },
-  } = useAppState();
-
-  return (
-    <Integration icon={VercelIcon} title="Vercel">
-      {vercel ? (
-        <>
-          <Element marginX={2} marginBottom={deploys.length ? 6 : 0}>
-            <Text variant="muted" block marginBottom={4}>
-              Deploy your sandbox to{' '}
-              <Link href="https://vercel.com/home" target="_blank">
-                Vercel
-              </Link>
-            </Text>
-
-            <Button disabled={deploying} onClick={deploySandboxClicked}>
-              Deploy with Vercel
-            </Button>
-          </Element>
-
-          <Element>
-            {deploys.map(({ created, name, state, uid, url }) => {
-              const disabled = deploysBeingDeleted
-                ? deploysBeingDeleted.includes(uid)
-                : deployment[`${uid}Deleting`];
-
-              return (
-                <List key={uid}>
-                  <ListItem>
-                    <Text weight="bold">{name}</Text>
-                  </ListItem>
-
-                  <ListItem>
-                    <State state={state}>
-                      {state.toString().toLowerCase()}
-                    </State>
-
-                    <Text
-                      marginLeft={2}
-                      variant="muted"
-                    >{`(${formatDistanceToNow(created)} ago)`}</Text>
-                  </ListItem>
-
-                  <ListAction
-                    onClick={() => window.open(`https://${url}`, '_blank')}
-                  >
-                    <Element marginRight={2}>
-                      <VisitIcon />
-                    </Element>{' '}
-                    Visit Site
-                  </ListAction>
-
-                  <ListAction
-                    disabled={disabled}
-                    onClick={() => {
-                      setDeploymentToDelete(uid);
-                      modalOpened({ modal: 'deleteDeployment' });
-                    }}
-                  >
-                    <Element marginRight={2}>
-                      <TrashIcon />
-                    </Element>{' '}
-                    Delete
-                  </ListAction>
-                </List>
-              );
-            })}
-          </Element>
-        </>
-      ) : (
-        <Stack justify="space-between" marginX={2}>
-          <Stack direction="vertical">
-            <Text variant="muted">Enables</Text>
-
-            <Text>Deployments</Text>
-          </Stack>
-
-          <Button autoWidth disabled={deploying} onClick={signInVercelClicked}>
-            Sign in
-          </Button>
-        </Stack>
-      )}
-    </Integration>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Deployment/icons.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Deployment/icons.tsx
deleted file mode 100644
index d7ecedddcec..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Deployment/icons.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import React, { FunctionComponent, SVGProps } from 'react';
-
-type IconProps = SVGProps<SVGSVGElement>;
-
-export const NetlifyIcon: FunctionComponent<IconProps> = props => (
-  <svg width={11} height={11} fill="none" viewBox="0 0 40 40" {...props}>
-    <path
-      fill="url(#paint0_radial)"
-      fillRule="evenodd"
-      d="M11.909 8.091c.6.254 4.8 2.03 5.34 2.265.035.015.075.03.102.004a2.098 2.098 0 011.92-.37c.03.008.065.016.09 0a.155.155 0 00.041-.049l4.135-6.404-1.26-1.26c-.805-.805-1.208-1.208-1.674-1.355a2 2 0 00-1.206 0c-.466.147-.868.55-1.674 1.355L11.91 8.09zm-.59 12.411l-4.808-7.013 4.491-4.491c.42.183 1.938.825 3.304 1.403h.001l.027.011c1.04.44 1.988.84 2.286.97.03.012.057.024.07.054.008.018.004.041 0 .06a2.003 2.003 0 00.523 1.828c.03.03 0 .072-.026.11l-.014.021-4.56 7.063c-.012.02-.023.037-.042.05-.025.015-.059.008-.086.001a2.274 2.274 0 00-.544-.074c-.163 0-.342.03-.522.063h-.001c-.02.003-.037.007-.054-.005a.21.21 0 01-.045-.051zm17.766-5.986a1.716 1.716 0 00-.496-.381l-.014-.006c-.008-.003-.016-.006-.023-.013a.11.11 0 01-.027-.093l.772-4.726 3.626 3.625-3.77 1.605a.083.083 0 01-.034.006h-.015c-.005-.003-.009-.007-.018-.016h-.001zm.782 1.015l3.98-1.684 3.876 3.876c.806.806 1.208 1.208 1.356 1.674.021.069.04.138.053.209l-9.263-3.923-.014-.006c-.038-.015-.08-.032-.08-.07 0-.038.043-.056.08-.071l.012-.005zm9.107 5.319l-9.65-4.082c-.033-.013-.072-.029-.104-.014a.066.066 0 00-.023.023l-.004.004a1.73 1.73 0 01-1.159.665c-.046 0-.054.059-.061.108l-.003.022-1.064 6.526-.003.014c-.006.033-.012.07.011.092.38.29.603.716.655 1.193 0 .045.054.054.103.062l.005.001.025.005 5.652 1.177 4.37-4.37c.66-.66 1.05-1.05 1.25-1.426zm-11.686 5.762l5.06 1.04-7.185 7.185 1.23-7.56.002-.01c.002-.01.003-.02.006-.029.01-.024.036-.034.061-.044l.012-.005a1.85 1.85 0 00.695-.517c.024-.028.053-.055.09-.06a.09.09 0 01.03 0zm-3.646 9.746c.288-1.765 1.36-8.302 1.485-9.063a.238.238 0 01.015-.045c.013-.033.025-.064-.003-.078a1.757 1.757 0 01-1.028-1.175c-.003-.016-.006-.03-.018-.043a.164.164 0 00-.076-.033l-9.922-2.046c-.023-.005-.052-.01-.073.001-.024.013-.037.036-.051.06l-.002.003-.02.035a1.709 1.709 0 01-.077.123l-.009.012c-.01.014-.02.027-.022.043-.002.022.012.041.026.06l.01.014 8.955 12.942.81-.81zm-10.69-11.367L21.95 38.05c-.597.591-.949.904-1.347 1.03a2 2 0 01-1.206 0c-.466-.148-.868-.55-1.674-1.356L8.731 28.73l2.348-3.643c.012-.018.022-.034.04-.047.025-.018.062-.01.091 0a2.434 2.434 0 001.638-.083c.027-.01.054-.017.075.002a.19.19 0 01.029.032zm-5.089 2.872l2.252-3.492c.01-.017.02-.034.008-.05a.159.159 0 00-.008-.01l-.005-.007a2.9 2.9 0 01-.13-.184c-.019-.031-.039-.065-.072-.065a.084.084 0 00-.033.007L5.8 25.799l2.063 2.064zm1.361-4.813l-4.337 1.837-2.61-2.61c-.444-.444-.766-.766-.99-1.043l7.936 1.646a.84.84 0 00.03.005c.05.008.103.017.103.063 0 .05-.059.073-.109.092l-.007.003-.016.007zM.832 19.892l8.948 1.875h.002c.016.004.03.007.042-.001a.16.16 0 00.05-.062c.103-.191.25-.367.396-.528.03-.03 0-.07-.027-.106l-.007-.01-.007-.009c-.424-.608-4.06-5.86-4.61-6.669l-3.342 3.341c-.805.806-1.208 1.208-1.355 1.674a2 2 0 00-.09.495zm19.517-9.174l4.066-6.303 3.819 3.818-.92 5.698-.002.015a.135.135 0 01-.007.038c-.01.02-.029.024-.05.03a1.83 1.83 0 00-.548.273.154.154 0 00-.02.017c-.011.012-.022.023-.04.024a.114.114 0 01-.042-.006l-5.819-2.472-.011-.005c-.037-.015-.081-.033-.081-.071a2.198 2.198 0 00-.297-.894l-.012-.02v-.001c-.03-.046-.06-.094-.036-.141zm.134 2.303c-.031-.014-.07-.024-.098-.003a.16.16 0 00-.034.04c-.38.565-1.01.896-1.69.896-.09 0-.18-.013-.283-.027l-.045-.007c-.048 0-.077.047-.104.089l-.008.012-4.482 6.94a.76.76 0 01-.014.02c-.027.038-.056.08-.027.11.018.017.035.017.052.017.017 0 11.283-4.804 12.147-5.173l.012-.005c.035-.014.075-.03.075-.068v-.153c0-.092.013-.184.029-.263a.106.106 0 000-.057c-.013-.031-.045-.044-.076-.058l-5.454-2.31zm-6.16 9.456c-.04-.133-.08-.27-.085-.271l12.28-5.237s.017 0 .034.017c.067.067.124.112.179.154l.026.016c.026.015.052.03.053.057 0 .01 0 .016-.002.025L25.756 23.7l-.003.02v.006c-.008.05-.015.107-.062.107a1.729 1.729 0 00-1.373.847l-.005.008c-.013.023-.027.045-.05.057-.021.01-.048.006-.07.001l-9.793-2.02c-.004 0-.04-.123-.077-.249z"
-      clipRule="evenodd"
-    />
-    <defs>
-      <radialGradient
-        id="paint0_radial"
-        cx={0}
-        cy={0}
-        r={1}
-        gradientTransform="matrix(0 38.3432 -44.1226 0 19.982 .828)"
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop stopColor="#20C6B7" />
-        <stop offset={1} stopColor="#4D9ABF" />
-      </radialGradient>
-    </defs>
-  </svg>
-);
-
-export const VercelIcon: FunctionComponent<IconProps> = props => (
-  <svg width={12} height={10} fill="none" viewBox="0 0 12 10" {...props}>
-    <path fill="currentColor" d="M6 0l6 10H0L6 0z" />
-  </svg>
-);
-
-export const GitHubIcon = () => (
-  <svg
-    role="img"
-    viewBox="0 0 24 24"
-    width="12"
-    height="12"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      fill="currentColor"
-      d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
-    />
-  </svg>
-);
-
-export const FileIcon: FunctionComponent<IconProps> = props => (
-  <svg width={8} height={11} fill="none" viewBox="0 0 8 11" {...props}>
-    <mask id="path-1-inside-1" fill="#fff">
-      <path
-        fillRule="evenodd"
-        d="M4.284 0H.563A.563.563 0 000 .563v9.874c0 .311.252.563.563.563h6.875c.31 0 .562-.252.562-.563V3.58L4.284 0zM3.111.5l3.5 3.5h-3.5V.5z"
-        clipRule="evenodd"
-      />
-    </mask>
-    <path
-      fill="#999"
-      fillRule="evenodd"
-      d="M4.284 0H.563A.563.563 0 000 .563v9.874c0 .311.252.563.563.563h6.875c.31 0 .562-.252.562-.563V3.58L4.284 0zM3.111.5l3.5 3.5h-3.5V.5z"
-      clipRule="evenodd"
-    />
-    <path
-      fill="#999"
-      d="M4.003 0v1.673h.563V0h-.563zM6.19 3.86H8v-.562H6.19v.563zM4.284 0l.39-.405-.163-.157h-.227V0zM8 3.58h.563v-.24l-.173-.166L8 3.58zM6.611 4v.563H7.97l-.96-.96L6.61 4zM3.111.5L3.51.102l-.96-.96V.5h.562zm0 3.5H2.55v.563h.562V4zM.562.562h3.722V-.563H.563V.563zm0 0V-.563c-.62 0-1.125.504-1.125 1.125H.563zm0 9.876V.562H-.563v9.876H.563zm0 0H-.563c0 .62.504 1.124 1.125 1.124v-1.124zm6.875 0H.563v1.124h6.875v-1.124zm0 0v1.124c.622 0 1.125-.503 1.125-1.124H7.438zm0-6.859v6.858h1.125V3.58H7.438zM3.894.405l3.716 3.58.78-.81-3.715-3.58-.78.81zM7.01 3.602l-3.5-3.5-.796.796 3.5 3.5.796-.796zm-3.898.96h3.5V3.438h-3.5v1.126zM2.55.5V4h1.125V.5H2.549z"
-      mask="url(#path-1-inside-1)"
-    />
-  </svg>
-);
-
-export const VisitIcon: FunctionComponent<IconProps> = props => (
-  <svg width={12} height={12} fill="none" viewBox="0 0 12 12" {...props}>
-    <path
-      fill="#999"
-      d="M11.195 2.988A5.974 5.974 0 009.012.805 5.87 5.87 0 006 0a5.87 5.87 0 00-3.012.805A5.973 5.973 0 00.805 2.988 5.869 5.869 0 000 6a5.87 5.87 0 00.805 3.012 5.976 5.976 0 002.183 2.183A5.87 5.87 0 006 12a5.87 5.87 0 003.012-.805 5.973 5.973 0 002.183-2.183A5.87 5.87 0 0012 6a5.871 5.871 0 00-.805-3.012zM6.751 9.157c-.053-.063-.07-.115-.055-.157-.005.027-.024.05-.055.07a.745.745 0 00-.14-.116.737.737 0 01-.141-.118 3.324 3.324 0 01-.176-.3c-.013-.034-.014-.054-.004-.059-.099.042-.242.013-.43-.086a.768.768 0 01-.163-.164c-.073-.089-.149-.128-.227-.117a1.314 1.314 0 00-.105.027.408.408 0 01-.114.02.357.357 0 01-.125-.032 1.008 1.008 0 01-.168-.09 1.12 1.12 0 00-.144-.081l-.102-.055-.125-.063a.384.384 0 01-.097-.074.248.248 0 01-.067-.105 1.505 1.505 0 01-.039-.188.584.584 0 00-.062-.203.704.704 0 00-.133-.156c-.057-.052-.11-.078-.156-.078.041 0 .041-.035 0-.106a.792.792 0 00-.11-.152 9.858 9.858 0 01-.227-.25.625.625 0 01-.093-.145c-.026-.055-.031-.1-.016-.137.005-.005 0-.013-.015-.023a.404.404 0 00-.059-.031 1.343 1.343 0 00-.066-.028.154.154 0 00-.047-.011c.01.02.022.058.035.113a.45.45 0 00.043.121c.01.021.055.097.133.227.135.218.198.38.187.484-.031.01-.052.005-.062-.015a.284.284 0 01-.024-.086.491.491 0 00-.015-.078c-.016-.032-.056-.066-.121-.102-.066-.036-.106-.073-.122-.11a.036.036 0 00.02-.007.038.038 0 01.02-.008c.005-.047-.023-.107-.082-.18-.06-.073-.085-.125-.075-.156-.041-.031-.078-.092-.11-.183a.69.69 0 00-.077-.176.334.334 0 00-.078-.082 1.542 1.542 0 00-.118-.078 3.437 3.437 0 01-.093-.06.301.301 0 01-.063-.07c-.172-.208-.224-.32-.156-.335-.068.015-.124-.035-.168-.153-.044-.117-.059-.207-.043-.27l-.016-.007a1.16 1.16 0 00.008-.184c0-.101.007-.194.02-.277.013-.083.038-.125.074-.125-.036.005-.064-.027-.082-.098-.018-.07-.02-.118-.004-.144.005-.016.029-.005.07.031a.4.4 0 01.07.07c.068-.036.095-.083.079-.14a1.072 1.072 0 00-.164-.164c-.224-.146-.339-.217-.344-.211.031-.058.023-.107-.023-.149-.052.031-.082.04-.09.024a.303.303 0 01-.02-.086c-.005-.042-.018-.065-.039-.07-.026-.006-.057-.027-.094-.063a4.93 4.93 0 011.836-1.734c.032-.006.089-.008.172-.008.042.005.08.018.117.039.037.02.075.05.114.086.039.036.069.062.09.078.01-.031-.003-.078-.04-.14.01-.032.068-.063.172-.095.12-.015.198-.013.235.008a2.055 2.055 0 00-.157-.195l-.039.039c-.041-.037-.15-.018-.328.055l-.078.043a.911.911 0 01-.101.05.192.192 0 01-.094.008c.25-.135.495-.242.734-.32.016.01.042.032.078.066.037.034.065.059.086.074-.015-.01-.026-.005-.031.016-.02.062-.02.114 0 .156a.145.145 0 00.105.063.581.581 0 00.16-.008.973.973 0 01.126-.016L5 1.625c.166.016.232 0 .195-.047.016.021.034.064.055.13.02.064.044.11.07.136.026-.021.031-.057.016-.11-.016-.052-.016-.088 0-.109.005-.01.02-.02.046-.031a9.163 9.163 0 01.157-.063c.031-.02.01-.057-.063-.11a.533.533 0 00-.066-.023 1.117 1.117 0 01-.09-.03.496.496 0 01-.082-.044c-.029-.018-.042-.039-.039-.062a.211.211 0 01.043-.09c.031-.026.082-.037.152-.031.07.005.124.018.16.039.141.078.162.148.063.21a.56.56 0 01.188.063c.072.037.101.076.085.117.042-.078.084-.117.125-.117.027.005.051.04.075.106.023.065.037.1.043.105.041.057.083.07.125.04a.659.659 0 00.129-.138c.044-.06.068-.087.074-.082-.052-.02-.058-.041-.016-.062.078-.047.149-.06.211-.039.016.01.037.034.062.07.047.094.04.138-.023.133a.17.17 0 01.059.156c-.008.063-.049.091-.122.086a.277.277 0 01-.113-.039.351.351 0 00-.113-.043c-.026-.002-.063.012-.11.043a.988.988 0 00-.082.133.598.598 0 01-.09.133c-.078.078-.208.107-.39.086.015 0 .014.015-.004.047a1.581 1.581 0 01-.129.172.399.399 0 00-.094.18 2.1 2.1 0 01-.008.105.393.393 0 01-.031.136c.062-.015.112.016.148.094.032.073.032.112 0 .117a.922.922 0 01.454.032c.187.067.294.135.32.203.031-.047.107-.05.226-.008.047.026.089.104.126.234.02.078.056.146.105.203.05.058.103.073.16.047l.024-.015c.02-.01.037-.02.05-.028a.33.33 0 00.043-.031c.016-.013.025-.025.028-.035.002-.01-.002-.021-.012-.031a.282.282 0 01-.082-.13.164.164 0 01.012-.144.522.522 0 01.125-.094c.067-.041.11-.083.125-.125.02-.067-.006-.123-.078-.168-.073-.044-.11-.084-.11-.12 0-.027.017-.058.05-.095.035-.036.05-.07.044-.101a.38.38 0 00-.028-.098.537.537 0 01-.03-.11c-.003-.023.009-.05.034-.081.037-.021.123-.02.258.004a.872.872 0 01.266.074c.016.01.05.026.102.047.052.02.097.043.136.066.04.023.061.046.067.066h-.04a.187.187 0 01.067.11c.008.042-.012.073-.059.094a.246.246 0 01.125.023c.084.031.086.06.008.086a.5.5 0 01.067-.016.22.22 0 00.105-.05.129.129 0 01.035-.024.25.25 0 01.035-.008.064.064 0 01.047.012c.005 0 .017-.013.035-.039.018-.026.038-.052.059-.078.02-.026.039-.039.054-.039a.06.06 0 01.043.02.164.164 0 01.031.042 1.026 1.026 0 01.043.094c.01.026.036.054.074.082a.21.21 0 01.075.082l.03.117a.257.257 0 00.063.13.305.305 0 00.117.058c.01.005.034.002.07-.008a.187.187 0 01.09-.008c.024.005.036.026.036.063.03-.032.046-.052.046-.063a.33.33 0 00.051.164c.03.042.075.06.137.055l-.016.172c-.015.026-.054.045-.117.058a.427.427 0 00-.117.036.54.54 0 00-.113.093c-.06.058-.085.092-.075.102-.088-.1-.221-.128-.398-.086a1.966 1.966 0 00-.406.094.568.568 0 00-.172.117.246.246 0 00-.027.055 1.42 1.42 0 01-.04.086c-.013.026-.024.039-.034.039.03-.006.066-.03.105-.075a.452.452 0 01.074-.074c.136-.088.248-.12.337-.093.114.031.132.073.054.125-.01.01-.038.014-.082.012a.282.282 0 00-.09.004c.047.01.086.025.118.043.03.018.039.043.023.074.083.047.1.099.047.156a.282.282 0 01-.242.086c.016 0 .016.01 0 .031l-.133.086a1.64 1.64 0 01-.102.04.265.265 0 00-.117.07.156.156 0 00-.023.093.415.415 0 01-.008.094c-.005.021-.026.026-.062.016-.016.031-.064.056-.145.074-.08.018-.134.046-.16.082.03.042.028.083-.008.125-.063.052-.117.047-.164-.016-.026.01-.046.037-.059.079-.013.041-.032.07-.058.085.036.058.03.1-.016.125.005 0 .017.006.035.016.018.01.038.024.059.04.02.015.034.023.039.023-.02.046-.05.07-.086.07.031.083-.008.174-.117.273a.359.359 0 01-.098.063c-.044.02-.085.038-.121.05a.255.255 0 00-.063.028.53.53 0 00-.117.144.169.169 0 00-.012.145c.019.047.067.078.145.094l.008.062v.14l.008.063a.774.774 0 01.012.207c-.003.045-.015.07-.036.075-.02.005-.05 0-.086-.016-.042-.02-.09-.135-.148-.344a.521.521 0 00-.094-.187.235.235 0 01-.066.05c-.019.008-.032.01-.04.004a.511.511 0 01-.042-.035.52.52 0 00-.055-.043.415.415 0 00-.137-.038c-.065-.01-.105-.024-.12-.04-.126.094-.201.07-.227-.07-.01.026-.01.061.003.106.014.044.02.069.02.074-.036.068-.094.073-.172.015-.031-.03-.103-.035-.215-.011-.112.023-.186.027-.222.011.005 0 .015.008.03.024.016.01.027.018.032.023a.098.098 0 01-.023.047c-.01.01-.021.014-.032.012a.08.08 0 00-.035 0 .132.132 0 00-.035.012.482.482 0 00-.078.081.389.389 0 01-.07.075.516.516 0 01.043.191c-.003.044-.01.11-.024.195-.013.086-.02.155-.02.207 0 .084.025.18.075.29.05.109.108.184.176.226.036.02.099.034.187.039.089.005.151 0 .188-.016a.192.192 0 00.07-.054.264.264 0 00.039-.09c.01-.04.018-.066.023-.082.037-.099.105-.151.203-.156.063-.006.108.001.137.02.029.017.04.042.035.073a.393.393 0 01-.03.098 1.648 1.648 0 01-.06.113.432.432 0 00-.042.094c-.01.042-.02.1-.028.176a.967.967 0 01-.02.137c.011.005.05.008.118.008 0-.01.004-.028.012-.051a.222.222 0 00.011-.043c.026.042.068.065.125.07.058.006.1-.015.126-.062.01.015.041.055.093.117.052.063.081.115.086.156l.031.102c.016.047.021.08.016.098-.005.018-.031.027-.078.027-.02 0-.034.008-.039.023a.106.106 0 000 .059.524.524 0 00.05.133c.014.023.02.037.02.043.094.171.222.218.383.14 0 .151-.036.235-.11.25-.04.01-.087-.016-.14-.078zm.116 1.765a.626.626 0 01-.015-.125c-.005-.042.013-.098.055-.168a.361.361 0 00.062-.16c-.083-.02-.114-.089-.094-.203.01-.078.086-.182.227-.313.099-.088.13-.213.094-.375a2.161 2.161 0 01-.04-.297 2.66 2.66 0 00-.03-.273c0 .015.024.03.074.043.05.013.08.03.09.05a.473.473 0 00.039-.085.397.397 0 01.046-.094.266.266 0 01.067-.059.77.77 0 01.066-.043.599.599 0 00.07-.05c.037-.03.067-.051.09-.067a.26.26 0 01.094-.035c.04-.008.066.004.082.035.026.032.02.08-.016.145-.036.065-.036.11 0 .137a.582.582 0 00.016-.102.189.189 0 01.047-.117.178.178 0 01.09-.055.111.111 0 01.078.012c.023.013.05.03.082.054a.22.22 0 00.086.043.967.967 0 01.28.172c-.004-.005-.004-.012 0-.02a.082.082 0 01.032-.023.586.586 0 00.043-.023.219.219 0 01.043-.02l.023-.008a.269.269 0 00.078-.007c.016-.006.038 0 .067.015a.53.53 0 01.113.078c.026.021.044.037.054.047a5.687 5.687 0 00.184.117c.024.016.045.04.062.07a.154.154 0 01.02.102c.031.005.094.026.188.062a.28.28 0 00.097.028c.05.008.082.02.098.035a4.829 4.829 0 01-2.742 1.477z"
-    />
-  </svg>
-);
-
-export const FlagIcon: FunctionComponent<IconProps> = props => (
-  <svg width={9} height={11} fill="none" viewBox="0 0 9 11" {...props}>
-    <path
-      fill="#999"
-      fillRule="evenodd"
-      d="M.917 0H0v11h.917V0zm4.291 1.053C4.406-.41 2 .078 2 .078v5.848s2.807 0 3.208.974c.401.975 3.209 0 3.209 0V1.053s-2.407 1.461-3.209 0z"
-      clipRule="evenodd"
-    />
-  </svg>
-);
-
-export const TrashIcon: FunctionComponent<IconProps> = props => (
-  <svg width={10} height={12} fill="none" viewBox="0 0 10 12" {...props}>
-    <path
-      fill="#999"
-      fillRule="evenodd"
-      d="M5 0C3 0 2 .895 2 2H.312C.14 2 0 2.15 0 2.333v.334C0 2.85.14 3 .313 3h9.374C9.86 3 10 2.85 10 2.667v-.334C10 2.15 9.86 2 9.687 2H8C8 .895 7 0 5 0zM3 2c0-.736.5-1 2-1s2 .264 2 1H3zM.91 4c-.185 0-.329.168-.312.364l.626 7.333c.015.171.15.303.311.303h6.93a.321.321 0 00.31-.303l.51-7.333C9.304 4.168 9.159 4 8.976 4H.909zM3 5.5a.5.5 0 011 0v5a.5.5 0 01-1 0v-5zM6.5 5a.5.5 0 00-.5.5v5a.5.5 0 001 0v-5a.5.5 0 00-.5-.5z"
-      clipRule="evenodd"
-    />
-  </svg>
-);
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Deployment/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Deployment/index.tsx
deleted file mode 100644
index bd130954b97..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Deployment/index.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { Element, Collapsible, Stack, Text } from '@codesandbox/components';
-import React, { FunctionComponent, useEffect } from 'react';
-
-import { useAppState, useActions } from 'app/overmind';
-
-import { Netlify } from './Netlify';
-import { NotLoggedIn } from './NotLoggedIn';
-import { NotOwner } from './NotOwner';
-import { Vercel } from './Vercel';
-import { GithubPages } from './GithubPages';
-
-const MINIMUM_USER_AGE_FOR_NETLIFY = 14 * 24 * 60 * 60 * 1000;
-
-export const Deployment: FunctionComponent = () => {
-  const {
-    editor: {
-      currentSandbox: { owned },
-    },
-    isLoggedIn,
-    user,
-  } = useAppState();
-  const { getDeploys } = useActions().deployment;
-
-  useEffect(() => {
-    if (owned && isLoggedIn) {
-      getDeploys();
-    }
-  }, [getDeploys, owned, isLoggedIn]);
-
-  if (!isLoggedIn) {
-    return <NotLoggedIn />;
-  }
-
-  if (!owned) {
-    return <NotOwner />;
-  }
-
-  const userAge =
-    Date.now() - new Date(user.insertedAt || Date.now()).getTime();
-
-  return (
-    <Collapsible defaultOpen title="Deployment">
-      <Element paddingX={2}>
-        <Text block marginBottom={6} variant="muted">
-          You can deploy a production version of your sandbox using one of our
-          supported providers.
-        </Text>
-
-        <Stack direction="vertical" gap={5}>
-          <Vercel />
-
-          {userAge >= MINIMUM_USER_AGE_FOR_NETLIFY ? <Netlify /> : null}
-          <GithubPages />
-        </Stack>
-      </Element>
-    </Collapsible>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Docker/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Docker/index.tsx
deleted file mode 100644
index 19c57b092cc..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Docker/index.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import React from 'react';
-import {
-  Collapsible,
-  Text,
-  Button,
-  Stack,
-  Link,
-} from '@codesandbox/components';
-import { useUpgradeFromV1ToV2 } from 'app/hooks/useUpgradeFromV1ToV2';
-
-export const Docker = () => {
-  const { perform, loading, canConvert } = useUpgradeFromV1ToV2('Docker menu');
-
-  return (
-    <Collapsible title="Docker" defaultOpen>
-      <Stack direction="vertical" gap={6} padding={2}>
-        <Text as="p" variant="muted" margin={0}>
-          To run Docker, you need to upgrade your Sandbox into a Devbox.
-        </Text>
-        <Text as="p" variant="muted" margin={0}>
-          Devboxes are an improved coding experience that runs your code in the
-          cloud. They allow you to run Docker, code in new languages, add
-          servers, databases, and much more.
-        </Text>
-        <Text as="p" variant="muted" margin={0}>
-          Do you want to convert this sandbox?
-        </Text>
-        <Stack align="center" gap={4}>
-          <Button
-            onClick={perform}
-            loading={loading}
-            variant="primary"
-            autoWidth
-          >
-            Yes, {canConvert ? 'convert' : 'fork and convert'}
-          </Button>
-          <Link
-            href="https://codesandbox.io/docs/tutorial/convert-browser-sandbox-cloud"
-            target="_blank"
-            rel="noreferrer noopener"
-          >
-            Learn more
-          </Link>
-        </Stack>
-      </Stack>
-    </Collapsible>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Dependencies/AddDependency.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Dependencies/AddDependency.tsx
deleted file mode 100644
index 0540e4e79cc..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Dependencies/AddDependency.tsx
+++ /dev/null
@@ -1,370 +0,0 @@
-import React, { FunctionComponent, useRef } from 'react';
-import {
-  SidebarRow,
-  Button,
-  Text,
-  SearchInput,
-  ListAction,
-  Element,
-} from '@codesandbox/components';
-import css from '@styled-system/css';
-import Downshift, { PropGetters } from 'downshift';
-import { Dependency } from '@codesandbox/common/lib/types/algolia';
-import { isPrivateScope } from 'app/utils/private-registry';
-
-import { useAppState, useActions, useEffects } from 'app/overmind';
-import { useKeyboard } from './useKeys';
-
-const buttonStyles = css({
-  color: 'inherit',
-  justifyContent: 'space-between',
-});
-
-type AddDependencyResultListProps = {
-  inputValue: string;
-  explorerDependenciesEmpty: boolean;
-  usedExplorerDependencies: ('OPEN_MODAL' | Dependency)[];
-  highlightedIndex: number;
-  getItemProps: PropGetters<unknown>['getItemProps'];
-  addNpmDependency: (dep: { name: string; version: string }) => void;
-};
-
-const AddDependencyResultList = ({
-  inputValue,
-  explorerDependenciesEmpty,
-  usedExplorerDependencies,
-  highlightedIndex,
-  getItemProps,
-  addNpmDependency,
-}: AddDependencyResultListProps) => {
-  const state = useAppState();
-
-  const isPrivateNpmScope =
-    state.editor.currentSandbox &&
-    isPrivateScope(state.editor.currentSandbox, inputValue);
-
-  if (isPrivateNpmScope) {
-    return (
-      <ListAction
-        css={css({
-          color: 'sideBar.foreground',
-          borderWidth: 0,
-          borderTopWidth: '1px',
-          borderStyle: 'solid',
-          borderColor: 'sideBar.border',
-          padding: 3,
-        })}
-      >
-        <Text
-          css={css({
-            maxWidth: '80%',
-            margin: 'auto',
-            lineHeight: 1.5,
-          })}
-          size={2}
-          align="center"
-          variant="muted"
-        >
-          This is a package from your npm registry, you can type the full name
-          and press {'"'}Enter{'"'} to add it.
-        </Text>
-      </ListAction>
-    );
-  }
-
-  if (explorerDependenciesEmpty) {
-    return (
-      <ListAction
-        css={css({
-          color: 'sideBar.foreground',
-          borderWidth: 0,
-          borderTopWidth: '1px',
-          borderStyle: 'solid',
-          borderColor: 'sideBar.border',
-          padding: 3,
-        })}
-      >
-        <Text
-          css={css({
-            maxWidth: '80%',
-            margin: 'auto',
-            lineHeight: 1.5,
-          })}
-          size={2}
-          align="center"
-          variant="muted"
-        >
-          It looks like there aren’t any matches for your query
-        </Text>
-      </ListAction>
-    );
-  }
-
-  return (
-    <>
-      {usedExplorerDependencies.map((dependency, i) =>
-        dependency === 'OPEN_MODAL' ? (
-          <ListAction
-            key="show-all"
-            justify="space-between"
-            isActive={highlightedIndex === i}
-            css={css({
-              color: 'sideBar.foreground',
-              borderWidth: 0,
-              borderTopWidth: '1px',
-              borderStyle: 'solid',
-              borderColor: 'sideBar.border',
-            })}
-            {...getItemProps({
-              key: 'OPEN_MODAL',
-              index: i,
-              item: 'OPEN_MODAL',
-            })}
-          >
-            <Button
-              css={buttonStyles}
-              tabIndex={0}
-              variant="link"
-              type="button"
-            >
-              <Text weight="400">Show All</Text>
-              <Text variant="muted">Ctrl + D</Text>
-            </Button>
-          </ListAction>
-        ) : (
-          <ListAction
-            key={dependency.objectID}
-            justify="space-between"
-            isActive={highlightedIndex === i}
-            css={css({ color: 'sideBar.foreground' })}
-            {...getItemProps({
-              key: dependency.objectID,
-              index: i,
-              item: dependency,
-            })}
-          >
-            <Button
-              css={buttonStyles}
-              variant="link"
-              type="button"
-              onClick={() => {
-                addNpmDependency({
-                  name: dependency.name,
-                  version: dependency.tags?.latest,
-                });
-              }}
-            >
-              <Text maxWidth="80%" weight="400">
-                {dependency._highlightResult ? (
-                  <Text
-                    css={css({
-                      em: {
-                        fontWeight: 'bold',
-                        fontStyle: 'initial',
-                      },
-                    })}
-                    dangerouslySetInnerHTML={{
-                      __html: dependency._highlightResult.name?.value,
-                    }}
-                  />
-                ) : (
-                  dependency.name
-                )}
-              </Text>
-              <Text variant="muted">Ctrl + {i + 1}</Text>
-            </Button>
-          </ListAction>
-        )
-      )}
-    </>
-  );
-};
-
-export const AddDependency: FunctionComponent<{ readonly?: boolean }> = () => {
-  const {
-    modalOpened,
-    editor: { addNpmDependency },
-    workspace: {
-      getExplorerDependencies,
-      clearExplorerDependencies,
-      changeDependencySearch,
-    },
-  } = useActions();
-  const effects = useEffects();
-  const {
-    currentModal,
-    workspace: {
-      explorerDependencies,
-      explorerDependenciesEmpty,
-      dependencySearch,
-    },
-  } = useAppState();
-  const modalOpen = currentModal === 'searchDependencies';
-  const searchInput = useRef();
-  useKeyboard(searchInput);
-
-  const searchDependencies = (inputValue: string) => {
-    let value = inputValue;
-    if (value.includes('@') && !value.startsWith('@')) {
-      value = value.split('@')[0];
-    }
-
-    if (value.startsWith('@')) {
-      // if it starts with one and has a version
-      if (value.split('@').length === 3) {
-        const part = value.split('@');
-        value = `@${part[0]}${part[1]}`;
-      }
-    }
-
-    changeDependencySearch(inputValue);
-    getExplorerDependencies(value);
-  };
-
-  const onDependencySelect = dependency => {
-    if (dependency === 'OPEN_MODAL') {
-      modalOpened({ modal: 'searchDependencies' });
-      clearExplorerDependencies();
-    } else if (dependency?.name) {
-      if (dependency.tags) {
-        addNpmDependency({
-          name: dependency.name,
-          version: dependency.tags?.latest,
-        });
-      } else {
-        effects.notificationToast.error(
-          `There has been a problem installing ${dependency.name}. No installable version found`
-        );
-      }
-      clearExplorerDependencies();
-      changeDependencySearch('');
-    }
-  };
-
-  const usedExplorerDependencies = [
-    ...explorerDependencies,
-    'OPEN_MODAL' as const,
-  ];
-
-  return (
-    <Downshift
-      onSelect={onDependencySelect}
-      itemToString={dependency => {
-        if (dependency === 'OPEN_MODAL') {
-          return 'OPEN_MODAL';
-        }
-        return dependency ? dependency.objectID : '';
-      }}
-      inputValue={dependencySearch}
-      onInputValueChange={inputValue => {
-        if (inputValue !== 'OPEN_MODAL') {
-          searchDependencies(inputValue);
-        }
-      }}
-    >
-      {({
-        getInputProps,
-        getItemProps,
-        getMenuProps,
-        isOpen,
-        inputValue,
-        highlightedIndex,
-        getRootProps,
-      }) => {
-        const open =
-          !modalOpen &&
-          (explorerDependencies.length || explorerDependenciesEmpty) &&
-          isOpen &&
-          inputValue &&
-          !inputValue.startsWith('https://') &&
-          !inputValue.startsWith('http://');
-        return (
-          <>
-            <SidebarRow
-              css={css({ position: 'relative' })}
-              gap={1}
-              marginX={2}
-              marginBottom={2}
-            >
-              <Element
-                css={css({
-                  width: '100%',
-                  flexGrow: 1,
-                })}
-                {...getRootProps(
-                  { refKey: 'innerRef' },
-                  { suppressRefError: true }
-                )}
-              >
-                <SearchInput
-                  ref={searchInput}
-                  value={modalOpen ? '' : inputValue}
-                  placeholder="Add Dependency"
-                  onFocus={() => {
-                    if (inputValue) {
-                      getExplorerDependencies(inputValue);
-                    }
-                  }}
-                  {...getInputProps()}
-                />
-              </Element>
-              <Button
-                variant="secondary"
-                css={css({
-                  width: 26,
-                  height: 26,
-                  padding: 0,
-                  border: '1px solid',
-                  borderColor: 'input.border',
-                })}
-                onClick={() => modalOpened({ modal: 'searchDependencies' })}
-              >
-                <svg width={24} height={24} fill="none" viewBox="0 0 24 24">
-                  <path
-                    css={css({ fill: 'tab.inactiveForeground' })}
-                    fillRule="evenodd"
-                    d="M18 7.5a.5.5 0 00-.5-.5h-11a.5.5 0 00-.5.5v1a.5.5 0 00.5.5h11a.5.5 0 00.5-.5v-1zm-12 4a.5.5 0 01.5-.5h11a.5.5 0 01.5.5v1a.5.5 0 01-.5.5h-11a.5.5 0 01-.5-.5v-1zm0 4a.5.5 0 01.5-.5h11a.5.5 0 01.5.5v1a.5.5 0 01-.5.5h-11a.5.5 0 01-.5-.5v-1z"
-                    clipRule="evenodd"
-                  />
-                </svg>
-              </Button>
-            </SidebarRow>
-
-            {open ? (
-              <Element css={css({ position: 'relative' })}>
-                <Element
-                  as="ul"
-                  padding={0}
-                  marginX={2}
-                  css={css({
-                    backgroundColor: 'sideBar.background',
-                    position: 'absolute',
-                    zIndex: 10,
-                    width: 'calc(100% - 16px)',
-                    borderRadius: 'medium',
-                    borderWidth: '1px',
-                    borderStyle: 'solid',
-                    borderColor: 'sideBar.border',
-                    marginTop: '-6px',
-                    fontWeight: 500,
-                  })}
-                  {...getMenuProps()}
-                  id="list"
-                >
-                  <AddDependencyResultList
-                    inputValue={inputValue}
-                    explorerDependenciesEmpty={explorerDependenciesEmpty}
-                    usedExplorerDependencies={usedExplorerDependencies}
-                    highlightedIndex={highlightedIndex}
-                    getItemProps={getItemProps}
-                    addNpmDependency={addNpmDependency}
-                  />
-                </Element>
-              </Element>
-            ) : null}
-          </>
-        );
-      }}
-    </Downshift>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Dependencies/Dependency/BundleSizes.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Dependencies/Dependency/BundleSizes.tsx
deleted file mode 100644
index e0a4fc17fa2..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Dependencies/Dependency/BundleSizes.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { Stack, Text } from '@codesandbox/components';
-import React, { FunctionComponent, useEffect, useState } from 'react';
-
-const formatSize = (value: number) => {
-  let unit: string;
-  let size: number;
-
-  if (Math.log10(value) < 3) {
-    unit = 'B';
-    size = value;
-  } else if (Math.log10(value) < 6) {
-    unit = 'kB';
-    size = value / 1024;
-  } else {
-    unit = 'mB';
-    size = value / 1024 / 1024;
-  }
-
-  return `${size.toFixed(1)}${unit}`;
-};
-
-type Bundle = {
-  gzip: number;
-  size: number;
-};
-type Props = {
-  dependency: string;
-  version: string;
-};
-export const BundleSizes: FunctionComponent<Props> = ({
-  dependency,
-  version,
-}) => {
-  const [bundle, setBundle] = useState<Bundle | null>(null);
-  const [error, setError] = useState(null);
-
-  const getSizeForPKG = (pkg: string) => {
-    fetch(`https://bundlephobia.com/api/size?package=${pkg}`)
-      .then(response => response.json())
-      .then(setBundle)
-      .catch(setError);
-  };
-  useEffect(() => {
-    const cleanVersion = version.split('^');
-    getSizeForPKG(`${dependency}@${cleanVersion[cleanVersion.length - 1]}`);
-  }, [dependency, version]);
-
-  if (error) {
-    return (
-      <Text marginBottom={2} variant="muted">
-        There was a problem getting the size for {dependency}
-      </Text>
-    );
-  }
-
-  return bundle ? (
-    <Stack justify="space-between" css={{ width: '100%' }}>
-      <Text>
-        <Text variant="muted">Gzip: </Text>
-
-        {formatSize(bundle.gzip)}
-      </Text>
-
-      <Text>
-        <Text variant="muted">Size: </Text>
-
-        {formatSize(bundle.size)}
-      </Text>
-    </Stack>
-  ) : null;
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Dependencies/Dependency/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Dependencies/Dependency/index.tsx
deleted file mode 100644
index 376dc1ceb95..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Dependencies/Dependency/index.tsx
+++ /dev/null
@@ -1,282 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import CrossIcon from 'react-icons/lib/md/clear';
-import RefreshIcon from 'react-icons/lib/md/refresh';
-import ArrowDropDown from 'react-icons/lib/md/keyboard-arrow-down';
-import ArrowDropUp from 'react-icons/lib/md/keyboard-arrow-up';
-import algoliasearch from 'algoliasearch/lite';
-import compareVersions from 'compare-versions';
-import Tooltip, {
-  SingletonTooltip,
-} from '@codesandbox/common/lib/components/Tooltip';
-import { packageExamplesUrl } from '@codesandbox/common/lib/utils/url-generator';
-import { formatVersion } from '@codesandbox/common/lib/utils/ci';
-import css from '@styled-system/css';
-import {
-  ListAction,
-  Stack,
-  SidebarRow,
-  Select,
-  Text,
-  Link,
-  Button,
-  Icon,
-} from '@codesandbox/components';
-import { useAppState } from 'app/overmind';
-import { isPrivateScope } from 'app/utils/private-registry';
-
-import { BundleSizes } from './BundleSizes';
-
-interface Props {
-  dependencies: { [dep: string]: string };
-  dependency: string;
-  onRemove: (dep: string) => void;
-  onRefresh: (dep: string, version?: string) => void;
-}
-
-const client = algoliasearch('OFCNCOG2CU', '00383ecd8441ead30b1b0ff981c426f5');
-const index = client.initIndex('npm-search');
-
-export const Dependency = ({
-  dependencies,
-  dependency,
-  onRemove,
-  onRefresh,
-}: Props) => {
-  const state = useAppState();
-
-  const [version, setVersion] = useState(null);
-  const [open, setOpen] = useState(false);
-  const [versions, setVersions] = useState([]);
-
-  const isPrivatePackage =
-    state.editor.currentSandbox &&
-    isPrivateScope(state.editor.currentSandbox, dependency);
-
-  const isPrivatePackageInPublicSandbox =
-    isPrivatePackage && state.editor.currentSandbox?.privacy !== 2;
-
-  const setVersionsForLatestPkg = (pkg: string) => {
-    if (isPrivatePackage) {
-      return;
-    }
-
-    fetch(`/api/v1/dependencies/${pkg}`)
-      .then(response => response.json())
-      .then(data => setVersion(data.data.version))
-      .catch(err => {
-        if (process.env.NODE_ENV === 'development') {
-          console.error(err); // eslint-disable-line no-console
-        }
-      });
-  };
-
-  useEffect(() => {
-    if (isPrivatePackage) {
-      return;
-    }
-
-    // @ts-ignore
-    index.getObject(dependency, ['versions']).then(({ versions: results }) => {
-      const orderedVersions = Object.keys(results).sort((a, b) => {
-        try {
-          return compareVersions(b, a);
-        } catch (e) {
-          return 0;
-        }
-      });
-      setVersions(orderedVersions);
-    });
-
-    try {
-      const versionRegex = /^\d{1,3}\.\d{1,3}.\d{1,3}$/;
-      const propVersion = dependencies[dependency];
-      if (!versionRegex.test(propVersion)) {
-        setVersionsForLatestPkg(`${dependency}@${propVersion}`);
-      }
-    } catch (e) {
-      console.error(e);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isPrivatePackage]);
-
-  const handleRemove = e => {
-    if (e) {
-      e.preventDefault();
-      e.stopPropagation();
-    }
-    onRemove(dependency);
-  };
-
-  const handleRefresh = e => {
-    if (e) {
-      e.preventDefault();
-      e.stopPropagation();
-    }
-    onRefresh(dependency);
-  };
-
-  if (typeof dependencies[dependency] !== 'string') {
-    return null;
-  }
-
-  const versionFromDropdown = versions.find(
-    v => v === dependencies[dependency]
-  );
-
-  return (
-    <>
-      <ListAction
-        justify="space-between"
-        align="center"
-        css={css({
-          position: 'relative',
-          '.actions': {
-            backgroundColor: 'sideBar.background',
-            display: 'none',
-          },
-          ':hover .actions': {
-            backgroundColor: 'list.hoverBackground',
-            display: 'flex',
-          },
-        })}
-      >
-        <Link
-          href={packageExamplesUrl(dependency)}
-          target="_blank"
-          title={dependency}
-          maxWidth="60%"
-          css={{
-            position: 'absolute',
-            zIndex: 2,
-            maxWidth: '60%',
-          }}
-        >
-          {dependency}
-        </Link>
-
-        <Stack
-          align="center"
-          justify="flex-end"
-          css={css({
-            position: 'absolute',
-            right: 2,
-            flexGrow: 0,
-            flexShrink: 1,
-            width: '100%',
-          })}
-        >
-          {isPrivatePackageInPublicSandbox ? (
-            <Icon width={18} height={18} color="orange" name="warning" />
-          ) : (
-            <Text variant="muted" maxWidth="30%">
-              {formatVersion(dependencies[dependency])}{' '}
-              {version && <span>({formatVersion(version)})</span>}
-            </Text>
-          )}
-        </Stack>
-
-        <Stack
-          className="actions"
-          align="center"
-          justify="flex-end"
-          css={css({
-            position: 'absolute',
-            right: 0,
-            width: 'auto',
-            zIndex: 2, // overlay on dependency name
-            paddingLeft: 1,
-          })}
-        >
-          {versions.length === 0 ? null : (
-            <Select
-              css={{ width: '80px' }}
-              value={versionFromDropdown || dependencies[dependency]}
-              onChange={e => onRefresh(dependency, e.target.value)}
-            >
-              {versionFromDropdown === undefined && (
-                <option key={dependencies[dependency]}>
-                  {dependencies[dependency]}
-                </option>
-              )}
-              {versions.map(a => (
-                <option key={a}>{a}</option>
-              ))}
-            </Select>
-          )}
-
-          <SingletonTooltip>
-            {singleton => (
-              <>
-                {!isPrivatePackage && (
-                  <Tooltip
-                    content={open ? 'Hide sizes' : 'Show sizes'}
-                    style={{ outline: 'none' }}
-                    singleton={singleton}
-                  >
-                    <Button
-                      variant="link"
-                      onClick={() => setOpen(!open)}
-                      css={css({ minWidth: 5 })}
-                    >
-                      {open ? <ArrowDropUp /> : <ArrowDropDown />}
-                    </Button>
-                  </Tooltip>
-                )}
-
-                {isPrivatePackageInPublicSandbox ? (
-                  <Tooltip
-                    content="Private packages only work in private sandboxes"
-                    style={{ outline: 'none', display: 'flex' }}
-                    singleton={singleton}
-                  >
-                    <Icon
-                      width={18}
-                      height={18}
-                      color="orange"
-                      name="warning"
-                    />
-                  </Tooltip>
-                ) : (
-                  <Tooltip
-                    content="Update to latest"
-                    style={{ outline: 'none' }}
-                    singleton={singleton}
-                  >
-                    <Button
-                      variant="link"
-                      onClick={handleRefresh}
-                      css={css({ minWidth: 5 })}
-                    >
-                      <RefreshIcon />
-                    </Button>
-                  </Tooltip>
-                )}
-                <Tooltip
-                  content="Remove"
-                  style={{ outline: 'none' }}
-                  singleton={singleton}
-                >
-                  <Button
-                    variant="link"
-                    onClick={handleRemove}
-                    css={css({ minWidth: 5 })}
-                  >
-                    <CrossIcon />
-                  </Button>
-                </Tooltip>
-              </>
-            )}
-          </SingletonTooltip>
-        </Stack>
-      </ListAction>
-      {open ? (
-        <SidebarRow marginX={2}>
-          <BundleSizes
-            dependency={dependency}
-            version={dependencies[dependency]}
-          />
-        </SidebarRow>
-      ) : null}
-    </>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Dependencies/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Dependencies/index.tsx
deleted file mode 100644
index 1be9e25da13..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Dependencies/index.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import { Collapsible, List, SidebarRow, Text } from '@codesandbox/components';
-import css from '@styled-system/css';
-import { useAppState, useActions } from 'app/overmind';
-import { motion } from 'framer-motion';
-import React, { FunctionComponent, useState } from 'react';
-
-import { Dependency } from './Dependency';
-import { AddDependency } from './AddDependency';
-
-const Animated = ({ children, showMountAnimations }) => (
-  <motion.div
-    animate={{ opacity: 1, height: 'auto' }}
-    initial={showMountAnimations ? { opacity: 0, height: 0 } : null}
-    exit={{ opacity: 0, height: 0 }}
-    style={{ width: '100%', overflow: 'hidden' }}
-  >
-    {children}
-  </motion.div>
-);
-
-export const Dependencies: FunctionComponent<{ readonly?: boolean }> = ({
-  readonly = false,
-}) => {
-  const { addNpmDependency, npmDependencyRemoved } = useActions().editor;
-  const { parsedConfigurations } = useAppState().editor;
-  const [showMountAnimations, setShowMountAnimations] = useState(false);
-
-  React.useEffect(() => {
-    setShowMountAnimations(true);
-  }, [setShowMountAnimations]);
-
-  if (!parsedConfigurations?.package) {
-    return (
-      <SidebarRow marginX={2}>
-        <Text variant="danger">Unable to find package.json</Text>
-      </SidebarRow>
-    );
-  }
-
-  const { error, parsed } = parsedConfigurations.package;
-
-  if (error) {
-    return (
-      <SidebarRow marginX={2}>
-        <Text variant="danger">We were not able to parse the package.json</Text>
-      </SidebarRow>
-    );
-  }
-
-  const { dependencies = {} } = parsed;
-
-  return (
-    <Collapsible
-      title="Dependencies"
-      defaultOpen
-      css={css({
-        'div[open]': {
-          overflow: 'visible',
-        },
-      })}
-    >
-      {!readonly && <AddDependency />}
-      <List>
-        {Object.keys(dependencies)
-          .sort()
-          .map(dependency => (
-            <Animated
-              key={dependency}
-              showMountAnimations={showMountAnimations}
-            >
-              <Dependency
-                dependencies={dependencies}
-                dependency={dependency}
-                key={dependency}
-                onRefresh={(name, version) =>
-                  addNpmDependency({ name, version })
-                }
-                onRemove={npmDependencyRemoved}
-              />
-            </Animated>
-          ))}
-      </List>
-    </Collapsible>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Dependencies/useKeys.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Dependencies/useKeys.ts
deleted file mode 100644
index d18fb58ab61..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Dependencies/useKeys.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-import { useEffect } from 'react';
-import useKeys from 'react-use/lib/useKeyboardJs';
-import { useAppState, useActions, useEffects } from 'app/overmind';
-import { Dependency } from '@codesandbox/common/lib/types/algolia';
-
-export const useKeyboard = (searchInput: { current: HTMLFormElement }) => {
-  const {
-    modalOpened,
-    editor: { addNpmDependency },
-  } = useActions();
-  const { explorerDependencies } = useAppState().workspace;
-  const effects = useEffects();
-  const [one] = useKeys('ctrl + one');
-  const [two] = useKeys('ctrl + two');
-  const [three] = useKeys('ctrl + three');
-  const [four] = useKeys('ctrl + four');
-  const [all] = useKeys('ctrl + d');
-  const [enter] = useKeys('enter');
-
-  const addDependency = (dependency: Dependency) => {
-    if (dependency.tags) {
-      addNpmDependency({
-        name: dependency.name,
-        version: dependency.tags?.latest,
-      });
-    } else {
-      effects.notificationToast.error(
-        `There has been a problem installing ${dependency.name}. No installable version found`
-      );
-    }
-  };
-
-  useEffect(() => {
-    const list = document.getElementById('list');
-    const activeElement = document.activeElement;
-    const input = searchInput.current;
-    if (enter && activeElement === input) {
-      if (input.value.includes('@')) {
-        const isScoped = input.value.startsWith('@');
-        let version = 'latest';
-
-        const dependencyAndVersion = input.value.split('@');
-
-        if (dependencyAndVersion.length > (isScoped ? 2 : 1)) {
-          version = dependencyAndVersion.pop();
-        }
-
-        addNpmDependency({
-          name: dependencyAndVersion.join('@'),
-          version,
-        });
-      } else if (list && explorerDependencies.length) {
-        addDependency(explorerDependencies[0]);
-      } else if (
-        input.value.startsWith('https://') ||
-        input.value.startsWith('http://')
-      ) {
-        const value = input.value.split('/');
-        addNpmDependency({
-          name: value[value.length - 1],
-          version: input.value,
-        });
-      }
-    }
-
-    if (list && explorerDependencies.length) {
-      if (one) {
-        addDependency(explorerDependencies[0]);
-      }
-      if (two && explorerDependencies[1]) {
-        addDependency(explorerDependencies[1]);
-      }
-      if (three && explorerDependencies[2]) {
-        addDependency(explorerDependencies[2]);
-      }
-      if (four && explorerDependencies[3]) {
-        addDependency(explorerDependencies[3]);
-      }
-      if (all) {
-        modalOpened({ modal: 'searchDependencies' });
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [one, two, three, four, all, enter]);
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/ExternalResources/google-fonts.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/ExternalResources/google-fonts.ts
deleted file mode 100644
index f40066e0f77..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/ExternalResources/google-fonts.ts
+++ /dev/null
@@ -1,976 +0,0 @@
-export const fonts = [
-  'Roboto',
-  'Open Sans',
-  'Lato',
-  'Montserrat',
-  'Roboto Condensed',
-  'Source Sans Pro',
-  'Oswald',
-  'Raleway',
-  'Roboto Mono',
-  'Poppins',
-  'Roboto Slab',
-  'Merriweather',
-  'Noto Sans',
-  'PT Sans',
-  'Ubuntu',
-  'Playfair Display',
-  'Open Sans Condensed',
-  'Muli',
-  'PT Serif',
-  'Lora',
-  'Nunito',
-  'Slabo 27px',
-  'Titillium Web',
-  'Fira Sans',
-  'Rubik',
-  'Noto Sans JP',
-  'Work Sans',
-  'Noto Serif',
-  'Nanum Gothic',
-  'Quicksand',
-  'PT Sans Narrow',
-  'Arimo',
-  'Noto Sans KR',
-  'Inconsolata',
-  'Nunito Sans',
-  'Dosis',
-  'Oxygen',
-  'Heebo',
-  'Cabin',
-  'Karla',
-  'Libre Baskerville',
-  'Bitter',
-  'Josefin Sans',
-  'Crimson Text',
-  'Libre Franklin',
-  'Varela Round',
-  'Noto Sans TC',
-  'Source Code Pro',
-  'Hind',
-  'Anton',
-  'Indie Flower',
-  'Lobster',
-  'Fjalla One',
-  'Barlow',
-  'Abel',
-  'Mukta',
-  'Arvo',
-  'Source Serif Pro',
-  'Dancing Script',
-  'Pacifico',
-  'Exo 2',
-  'Shadows Into Light',
-  'Merriweather Sans',
-  'Yanone Kaffeesatz',
-  'Asap',
-  'Overpass',
-  'Questrial',
-  'Abril Fatface',
-  'Bree Serif',
-  'EB Garamond',
-  'Archivo Narrow',
-  'Acme',
-  'Barlow Condensed',
-  'Comfortaa',
-  'IBM Plex Sans',
-  'Kanit',
-  'Cairo',
-  'Amatic SC',
-  'Teko',
-  'Signika',
-  'Maven Pro',
-  'Exo',
-  'Play',
-  'Noto Sans SC',
-  'Fira Sans Condensed',
-  'Catamaran',
-  'Hind Siliguri',
-  'Righteous',
-  'Ubuntu Condensed',
-  'PT Sans Caption',
-  'Patua One',
-  'Domine',
-  'Assistant',
-  'Crete Round',
-  'Ropa Sans',
-  'Cinzel',
-  'Vollkorn',
-  'Cormorant Garamond',
-  'Prompt',
-  'Monda',
-  'Permanent Marker',
-  'ABeeZee',
-  'Hind Madurai',
-  'Rajdhani',
-  'Francois One',
-  'Cuprum',
-  'Rokkitt',
-  'Caveat',
-  'Courgette',
-  'Satisfy',
-  'Zilla Slab',
-  'Amiri',
-  'Pathway Gothic One',
-  'Barlow Semi Condensed',
-  'News Cycle',
-  'Alegreya Sans',
-  'Alegreya',
-  'Fredoka One',
-  'Fira Sans Extra Condensed',
-  'Noticia Text',
-  'Alfa Slab One',
-  'Martel',
-  'Istok Web',
-  'Kalam',
-  'Cardo',
-  'Old Standard TT',
-  'Kaushan Script',
-  'Nanum Myeongjo',
-  'Bowlby One SC',
-  'Great Vibes',
-  'Tinos',
-  'Tajawal',
-  'Staatliches',
-  'Archivo Black',
-  'Lobster Two',
-  'Baloo Bhai',
-  'Quattrocento Sans',
-  'Gloria Hallelujah',
-  'Cantarell',
-  'Sacramento',
-  'Orbitron',
-  'Vidaloka',
-  'Advent Pro',
-  'IBM Plex Serif',
-  'Patrick Hand',
-  'M PLUS 1p',
-  'Cookie',
-  'Volkhov',
-  'Didact Gothic',
-  'Luckiest Guy',
-  'Frank Ruhl Libre',
-  'Quattrocento',
-  'Concert One',
-  'Noto Serif JP',
-  'Gothic A1',
-  'Neuton',
-  'Economica',
-  'Poiret One',
-  'Sanchez',
-  'Passion One',
-  'Josefin Slab',
-  'BenchNine',
-  'Prata',
-  'Hind Vadodara',
-  'Russo One',
-  'Spectral',
-  'Playfair Display SC',
-  'Special Elite',
-  'Neucha',
-  'Yrsa',
-  'Handlee',
-  'Hind Guntur',
-  'Parisienne',
-  'Changa',
-  'Gudea',
-  'Philosopher',
-  'Ruda',
-  'Bangers',
-  'Archivo',
-  'Sawarabi Mincho',
-  'Ultra',
-  'Chivo',
-  'Quantico',
-  'Cabin Condensed',
-  'Asap Condensed',
-  'Montserrat Alternates',
-  'Yantramanav',
-  'Nanum Gothic Coding',
-  'Paytone One',
-  'Armata',
-  'Saira Extra Condensed',
-  'M PLUS Rounded 1c',
-  'Arapey',
-  'Monoton',
-  'Khand',
-  'Viga',
-  'Pontano Sans',
-  'Alice',
-  'Lalezar',
-  'Unica One',
-  'Marck Script',
-  'Hammersmith One',
-  'Taviraj',
-  'Amaranth',
-  'Yellowtail',
-  'Bad Script',
-  'Gentium Basic',
-  'Enriqueta',
-  'Tangerine',
-  'PT Mono',
-  'Architects Daughter',
-  'Saira Condensed',
-  'Glegoo',
-  'Sigmar One',
-  'Gochi Hand',
-  'Audiowide',
-  'Gentium Book Basic',
-  'Merienda',
-  'Varela',
-  'Karma',
-  'Actor',
-  'Adamina',
-  'Saira',
-  'Julius Sans One',
-  'Homemade Apple',
-  'Pridi',
-  'Sorts Mill Goudy',
-  'Fugaz One',
-  'Nanum Pen Script',
-  'Mitr',
-  'Signika Negative',
-  'Baloo',
-  'Ubuntu Mono',
-  'Press Start 2P',
-  'Shadows Into Light Two',
-  'Unna',
-  'Kreon',
-  'Cantata One',
-  'Allura',
-  'Sarala',
-  'Sintony',
-  'Pragati Narrow',
-  'Encode Sans Condensed',
-  'Cormorant',
-  'Rock Salt',
-  'Rasa',
-  'Lusitana',
-  'Yeseva One',
-  'Covered By Your Grace',
-  'Oleo Script',
-  'Alegreya Sans SC',
-  'Sarabun',
-  'El Messiri',
-  'Scada',
-  'Jaldi',
-  'Boogaloo',
-  'Marvel',
-  'Playball',
-  'Tenor Sans',
-  'IBM Plex Mono',
-  'Reenie Beanie',
-  'Khula',
-  'Damion',
-  'Carter One',
-  'PT Serif Caption',
-  'Abhaya Libre',
-  'Arbutus Slab',
-  'Jura',
-  'Palanquin',
-  'Pinyon Script',
-  'Antic Slab',
-  'Alex Brush',
-  'Marcellus',
-  'Forum',
-  'Chewy',
-  'Coda',
-  'Markazi Text',
-  'Nothing You Could Do',
-  'Mr Dafoe',
-  'Squada One',
-  'Basic',
-  'Fauna One',
-  'Bevan',
-  'Michroma',
-  'Spinnaker',
-  'Marmelad',
-  'Lustria',
-  'Electrolize',
-  'Rubik Mono One',
-  'Sawarabi Gothic',
-  'Candal',
-  'Alef',
-  'Aclonica',
-  'Rancho',
-  'Cousine',
-  'Aldrich',
-  'Reem Kufi',
-  'VT323',
-  'Molengo',
-  'Encode Sans',
-  'Average',
-  'Niramit',
-  'Caveat Brush',
-  'Sunflower',
-  'Black Ops One',
-  'Lilita One',
-  'Rambla',
-  'Nobile',
-  'Allerta',
-  'Fredericka the Great',
-  'Encode Sans Semi Condensed',
-  'Days One',
-  'Rufina',
-  'Scheherazade',
-  'Cabin Sketch',
-  'Antic',
-  'Fira Mono',
-  'Coming Soon',
-  'Italianno',
-  'Niconne',
-  'Overlock',
-  'Share Tech Mono',
-  'Just Another Hand',
-  'Space Mono',
-  'Biryani',
-  'Allerta Stencil',
-  'Knewave',
-  'Leckerli One',
-  'Mukta Malar',
-  'Lateef',
-  'Saira Semi Condensed',
-  'Radley',
-  'Arima Madurai',
-  'Hanuman',
-  'Oranienbaum',
-  'Copse',
-  'Norican',
-  'Telex',
-  'Grand Hotel',
-  'Rochester',
-  'Syncopate',
-  'Aladin',
-  'DM Sans',
-  'Arsenal',
-  'Itim',
-  'Noto Serif SC',
-  'Mountains of Christmas',
-  'Cinzel Decorative',
-  'Lekton',
-  'Share',
-  'Martel Sans',
-  'Baloo Bhaina',
-  'Shrikhand',
-  'Berkshire Swash',
-  'DM Serif Text',
-  'Miriam Libre',
-  'Gruppo',
-  'Londrina Solid',
-  'Marcellus SC',
-  'Palanquin Dark',
-  'Allan',
-  'Halant',
-  'Lemonada',
-  'Overpass Mono',
-  'Anonymous Pro',
-  'Magra',
-  'Kameron',
-  'Annie Use Your Telescope',
-  'Nanum Brush Script',
-  'Coda Caption',
-  'Ramabhadra',
-  'Racing Sans One',
-  'Krub',
-  'Bai Jamjuree',
-  'Kosugi Maru',
-  'Changa One',
-  'Alegreya SC',
-  'Graduate',
-  'Judson',
-  'Suranna',
-  'Yesteryear',
-  'Nixie One',
-  'Bentham',
-  'Coustard',
-  'Pattaya',
-  'Caudex',
-  'Petit Formal Script',
-  'Mada',
-  'Belleza',
-  'Slabo 13px',
-  'Contrail One',
-  'Poly',
-  'Carrois Gothic',
-  'Mali',
-  'Carme',
-  'Buenard',
-  'Do Hyeon',
-  'Cambo',
-  'Aleo',
-  'Capriola',
-  'Sriracha',
-  'Jockey One',
-  'Arizonia',
-  'Rosario',
-  'Encode Sans Semi Expanded',
-  'Noto Serif TC',
-  'Trirong',
-  'Eczar',
-  'Voltaire',
-  'Herr Von Muellerhoff',
-  'Titan One',
-  'Bungee Inline',
-  'Sue Ellen Francisco',
-  'Bungee',
-  'GFS Didot',
-  'Cambay',
-  'Red Hat Text',
-  'Calligraffitti',
-  'Kelly Slab',
-  'Merienda One',
-  'Bubblegum Sans',
-  'Maitree',
-  'Gilda Display',
-  'Kristi',
-  'Faustina',
-  'Delius',
-  'DM Serif Display',
-  'Oxygen Mono',
-  'Love Ya Like A Sister',
-  'Average Sans',
-  'Goudy Bookletter 1911',
-  'Anaheim',
-  'Baloo Bhaijaan',
-  'Trocchi',
-  'ZCOOL XiaoWei',
-  'Cutive',
-  'Cutive Mono',
-  'Chakra Petch',
-  'Metrophobic',
-  'Ceviche One',
-  'Red Hat Display',
-  'Schoolbell',
-  'Encode Sans Expanded',
-  'Duru Sans',
-  'Shojumaru',
-  'Freckle Face',
-  'Mukta Vaani',
-  'Rye',
-  'Ovo',
-  'Mr De Haviland',
-  'Six Caps',
-  'Andada',
-  'Lexend Deca',
-  'IBM Plex Sans Condensed',
-  'Big Shoulders Text',
-  'Amethysta',
-  'Pompiere',
-  'Vesper Libre',
-  'Cormorant Infant',
-  'Homenaje',
-  'Federo',
-  'McLaren',
-  'Kadwa',
-  'Laila',
-  'Suez One',
-  'Cedarville Cursive',
-  'Fanwood Text',
-  'Montez',
-  'Black Han Sans',
-  'IM Fell English',
-  'IM Fell Double Pica',
-  'Inder',
-  'Unkempt',
-  'Averia Serif Libre',
-  'Emilys Candy',
-  'Secular One',
-  'Brawler',
-  'Sansita',
-  'Happy Monkey',
-  'Balthazar',
-  'Doppio One',
-  'Rozha One',
-  'Aref Ruqaa',
-  'Mate',
-  'Gabriela',
-  'Chonburi',
-  'Baumans',
-  'Pangolin',
-  'BioRhyme',
-  'Noto Serif KR',
-  'IM Fell DW Pica',
-  'Amiko',
-  'Megrim',
-  'Corben',
-  'Chelsea Market',
-  'Oregano',
-  'Athiti',
-  'Convergence',
-  'Geo',
-  'Gravitas One',
-  'Gurajada',
-  'Short Stack',
-  'Raleway Dots',
-  'Battambang',
-  'Kosugi',
-  'Vast Shadow',
-  'La Belle Aurore',
-  'Lemon',
-  'Fondamento',
-  'Skranji',
-  'Limelight',
-  'Baloo Chettan',
-  'UnifrakturMaguntia',
-  'Proza Libre',
-  'Seaweed Script',
-  'Jua',
-  'Denk One',
-  'Qwigley',
-  'Prociono',
-  'Belgrano',
-  'Alike',
-  'Crafty Girls',
-  'Wallpoet',
-  'Sofia',
-  'Waiting for the Sunrise',
-  'Mallanna',
-  'Carrois Gothic SC',
-  'Spicy Rice',
-  'Give You Glory',
-  'Share Tech',
-  'Rouge Script',
-  'Cormorant SC',
-  'Scope One',
-  'Sniglet',
-  'Kurale',
-  'Patrick Hand SC',
-  'Bowlby One',
-  'Fjord One',
-  'Cantora One',
-  'Strait',
-  'Quando',
-  'Fresca',
-  'Stardos Stencil',
-  'Expletus Sans',
-  'Finger Paint',
-  'Zeyada',
-  'Gafata',
-  'Spectral SC',
-  'Andika',
-  'Podkova',
-  'Amarante',
-  'Oleo Script Swash Caps',
-  'Crushed',
-  'Cherry Swash',
-  'Mirza',
-  'Meddon',
-  'Harmattan',
-  'Faster One',
-  'Aguafina Script',
-  'Katibeh',
-  'Loved by the King',
-  'Amita',
-  'Mouse Memoirs',
-  'Nova Square',
-  'Voces',
-  'IM Fell English SC',
-  'Tienne',
-  'Esteban',
-  'Delius Swash Caps',
-  'Galada',
-  'Libre Barcode 39',
-  'Orienta',
-  'Bilbo Swash Caps',
-  'Clicker Script',
-  'Literata',
-  'Puritan',
-  'Cormorant Upright',
-  'Averia Sans Libre',
-  'Wendy One',
-  'Sedgwick Ave',
-  'Baloo Da',
-  'Mako',
-  'Krona One',
-  'Euphoria Script',
-  'Bungee Shade',
-  'Walter Turncoat',
-  'Just Me Again Down Here',
-  'Dawning of a New Day',
-  'Baloo Thambi',
-  'Averia Libre',
-  'The Girl Next Door',
-  'Alike Angular',
-  'Tauri',
-  'Charm',
-  'Rationale',
-  'Montserrat Subrayada',
-  'Spirax',
-  'Rammetto One',
-  'Poller One',
-  'Wire One',
-  'Overlock SC',
-  'Over the Rainbow',
-  'Mrs Saint Delafield',
-  'NTR',
-  'Bellefair',
-  'Fontdiner Swanky',
-  'Imprima',
-  'K2D',
-  'Atma',
-  'Ledger',
-  'Rum Raisin',
-  'Codystar',
-  'Holtwood One SC',
-  'Iceland',
-  'Baloo Paaji',
-  'Creepster',
-  'Rakkas',
-  'Life Savers',
-  'Salsa',
-  'Numans',
-  'Princess Sofia',
-  'Ruslan Display',
-  'Pavanam',
-  'Habibi',
-  'Bubbler One',
-  'Engagement',
-  'Hanalei Fill',
-  'Port Lligat Sans',
-  'Dokdo',
-  'Sarpanch',
-  'Lily Script One',
-  'Artifika',
-  'Slackey',
-  'Shanti',
-  'Nova Mono',
-  'Headland One',
-  'Mandali',
-  'Prosto One',
-  'Song Myung',
-  'Mogra',
-  'Vampiro One',
-  'Modak',
-  'Asul',
-  'Vibur',
-  'Saira Stencil One',
-  'David Libre',
-  'Elsie',
-  'Noto Sans HK',
-  'Englebert',
-  'Koulen',
-  'Kranky',
-  'B612 Mono',
-  'Antic Didone',
-  'Port Lligat Slab',
-  'Vollkorn SC',
-  'Cherry Cream Soda',
-  'Frijole',
-  'Manjari',
-  'Sirin Stencil',
-  'Zilla Slab Highlight',
-  'Farsan',
-  'Medula One',
-  'Ranchers',
-  'Eater',
-  'Ruluko',
-  'Livvic',
-  'Padauk',
-  'Kotta One',
-  'Mukta Mahee',
-  'Peralta',
-  'Blinker',
-  'Dynalight',
-  'Kumar One',
-  'Underdog',
-  'IM Fell French Canon',
-  'Metamorphous',
-  'Arya',
-  'Gugi',
-  'Dekko',
-  'Sail',
-  'Buda',
-  'Bilbo',
-  'Coiny',
-  'Nova Round',
-  'Baloo Tamma',
-  'Yatra One',
-  'Mate SC',
-  'Macondo Swash Caps',
-  'Almendra',
-  'Meera Inimai',
-  'Sonsie One',
-  'Pirata One',
-  'Mystery Quest',
-  'Khmer',
-  'Germania One',
-  'Donegal One',
-  'Dorsa',
-  'Sarina',
-  'Inknut Antiqua',
-  'Timmana',
-  'Stint Ultra Condensed',
-  'Flamenco',
-  'Chau Philomene One',
-  'Condiment',
-  'Tulpen One',
-  'Simonetta',
-  'Milonga',
-  'Chicle',
-  'Manuale',
-  'Thasadith',
-  'Ramaraja',
-  'Libre Caslon Text',
-  'Fascinate Inline',
-  'Rosarivo',
-  'ZCOOL QingKe HuangYou',
-  'Darker Grotesque',
-  'Ranga',
-  'Delius Unicase',
-  'Junge',
-  'Nova Slim',
-  'Moul',
-  'Kite One',
-  'Gaegu',
-  'Plaster',
-  'Trade Winds',
-  'Chathura',
-  'Stalemate',
-  'Paprika',
-  'Fenix',
-  'Ewert',
-  'Italiana',
-  'Miniver',
-  'Almarai',
-  'Ribeye Marrow',
-  'Cagliostro',
-  'Londrina Outline',
-  'Jacques Francois Shadow',
-  'Quintessential',
-  'Mina',
-  'Angkor',
-  'Ribeye',
-  'Nokora',
-  'Henny Penny',
-  'Galdeano',
-  'Lovers Quarrel',
-  'IM Fell Great Primer',
-  'League Script',
-  'Stoke',
-  'Swanky and Moo Moo',
-  'Cormorant Unicase',
-  'Sura',
-  'Srisakdi',
-  'Diplomata',
-  'IM Fell DW Pica SC',
-  'Sancreek',
-  'Averia Gruesa Libre',
-  'Della Respira',
-  'Text Me One',
-  'Maiden Orange',
-  'Glass Antiqua',
-  'Julee',
-  'Sumana',
-  'Uncial Antiqua',
-  'Petrona',
-  'New Rocker',
-  'Griffy',
-  'Barriecito',
-  'Linden Hill',
-  'Farro',
-  'Be Vietnam',
-  'Nosifer',
-  'Joti One',
-  'Redressed',
-  'Marko One',
-  'Hepta Slab',
-  'Vibes',
-  'IM Fell French Canon SC',
-  'Sree Krushnadevaraya',
-  'Trochut',
-  'Tillana',
-  'Kavoon',
-  'Big Shoulders Display',
-  'Bokor',
-  'Wellfleet',
-  'Croissant One',
-  'Chela One',
-  'Grenze',
-  'Eagle Lake',
-  'Akronim',
-  'Barrio',
-  'Offside',
-  'Stint Ultra Expanded',
-  'Liu Jian Mao Cao',
-  'Monsieur La Doulaise',
-  'Margarine',
-  'B612',
-  'UnifrakturCook',
-  'Revalia',
-  'Chango',
-  'Elsie Swash Caps',
-  'Nova Flat',
-  'Unlock',
-  'Autour One',
-  'Charmonman',
-  'Bebas Neue',
-  'Content',
-  'Trykker',
-  'Ruthie',
-  'Inika',
-  'Chilanka',
-  'Monofett',
-  'Notable',
-  'Baloo Tammudu',
-  'Kodchasan',
-  'Oldenburg',
-  'Irish Grover',
-  'Rhodium Libre',
-  'Mrs Sheppards',
-  'Asar',
-  'Smythe',
-  'Metal Mania',
-  'Montaga',
-  'Hi Melody',
-  'Iceberg',
-  'KoHo',
-  'Modern Antiqua',
-  'Lakki Reddy',
-  'Mansalva',
-  'Bigshot One',
-  'Crimson Pro',
-  'Felipa',
-  'Original Surfer',
-  'Bahiana',
-  'Smokum',
-  'Fira Code',
-  'Stylish',
-  'Dr Sugiyama',
-  'MedievalSharp',
-  'Asset',
-  'Meie Script',
-  'Purple Purse',
-  'IM Fell Great Primer SC',
-  'Sahitya',
-  'Libre Barcode 128',
-  'Keania One',
-  'Miltonian Tattoo',
-  'Fahkwang',
-  'Molle',
-  'Devonshire',
-  'Libre Barcode 39 Text',
-  'Ruge Boogie',
-  'Snowburst One',
-  'Caesar Dressing',
-  'Arbutus',
-  'Poor Story',
-  'Snippet',
-  'Jim Nightshade',
-  'Libre Barcode 39 Extended Text',
-  'Bayon',
-  'Ravi Prakash',
-  'Odor Mean Chey',
-  'Lancelot',
-  'Risque',
-  'Atomic Age',
-  'Dangrek',
-  'Londrina Shadow',
-  'ZCOOL KuaiLe',
-  'Freehand',
-  'Libre Barcode 39 Extended',
-  'IM Fell Double Pica SC',
-  'Goblin One',
-  'Major Mono Display',
-  'Diplomata SC',
-  'Kantumruy',
-  'Yeon Sung',
-  'Cute Font',
-  'Seymour One',
-  'Gorditas',
-  'Gamja Flower',
-  'Kavivanar',
-  'Jacques Francois',
-  'Kumar One Outline',
-  'Jolly Lodger',
-  'Kenia',
-  'Sunshiney',
-  'Flavors',
-  'Astloch',
-  'GFS Neohellenic',
-  'Black And White Picture',
-  'Nova Cut',
-  'Butterfly Kids',
-  'Almendra SC',
-  'Piedra',
-  'Almendra Display',
-  'Romanesco',
-  'Suwannaphum',
-  'Miltonian',
-  'Siemreap',
-  'Tenali Ramakrishna',
-  'Kirang Haerang',
-  'Alata',
-  'Bungee Outline',
-  'Macondo',
-  'East Sea Dokdo',
-  'Fruktur',
-  'Supermercado One',
-  'Jomhuria',
-  'Nova Script',
-  'Nova Oval',
-  'Galindo',
-  'Bigelow Rules',
-  'Metal',
-  'Combo',
-  'Sedgwick Ave Display',
-  'Jomolhari',
-  'Miss Fajardose',
-  'Erica One',
-  'Passero One',
-  'Geostar Fill',
-  'Aubrey',
-  'Bonbon',
-  'Emblema One',
-  'Londrina Sketch',
-  'Sevillana',
-  'Butcherman',
-  'Libre Barcode 128 Text',
-  'Taprom',
-  'Mr Bedfort',
-  'Sofadi One',
-  'Geostar',
-  'Preahvihear',
-  'Gidugu',
-  'Kdam Thmor',
-  'Hanalei',
-  'Bungee Hairline',
-  'Peddana',
-  'Suravaram',
-  'Calistoga',
-  'Fascinate',
-  'Public Sans',
-  'Federant',
-  'Libre Caslon Display',
-  'Lexend Exa',
-  'Chenla',
-  'Stalinist One',
-  'Moulpali',
-  'Beth Ellen',
-  'Dhurjati',
-  'Alatsi',
-  'Lexend Tera',
-  'Fasthand',
-  'Gayathri',
-  'BioRhyme Expanded',
-  'Tomorrow',
-  'Ma Shan Zheng',
-  'Warnes',
-  'Turret Road',
-  'Lacquer',
-  'Single Day',
-  'Lexend Mega',
-  'Lexend Zetta',
-  'Odibee Sans',
-  'Zhi Mang Xing',
-  'Lexend Peta',
-  'Lexend Giga',
-  'Kulim Park',
-  'Bahianita',
-  'Long Cang',
-  'Ibarra Real Nova',
-  'Baskervville',
-  'Sulphur Point',
-  'Solway',
-  'Gupter',
-  'Inter',
-];
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/ExternalResources/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/ExternalResources/index.tsx
deleted file mode 100644
index 341f07cc5bc..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/ExternalResources/index.tsx
+++ /dev/null
@@ -1,185 +0,0 @@
-import getTemplateDefinition from '@codesandbox/common/lib/templates';
-import {
-  Button,
-  Collapsible,
-  FormField,
-  Input,
-  Link,
-  List,
-  ListAction,
-  Select,
-  SidebarRow,
-  Stack,
-} from '@codesandbox/components';
-import css from '@styled-system/css';
-import React, { FunctionComponent } from 'react';
-import CrossIcon from 'react-icons/lib/md/clear';
-
-import { useAppState, useActions } from 'app/overmind';
-
-import { fonts as listOfFonts } from './google-fonts';
-
-const isGoogleFont = url => url.includes('fonts.googleapis.com/css');
-
-type Props = {
-  readonly: boolean;
-};
-export const ExternalResources: FunctionComponent<Props> = ({ readonly }) => {
-  const {
-    externalResourceAdded,
-    externalResourceRemoved,
-  } = useActions().workspace;
-  const {
-    currentSandbox: { externalResources, template },
-  } = useAppState().editor;
-
-  const fonts = externalResources.filter(isGoogleFont);
-  const otherResources = externalResources.filter(
-    resource => !isGoogleFont(resource)
-  );
-
-  const { externalResourcesEnabled } = getTemplateDefinition(template);
-  if (!externalResourcesEnabled) {
-    return null;
-  }
-
-  return (
-    <Collapsible title="External resources">
-      <Stack direction="vertical" gap={6}>
-        {otherResources.length || fonts.length ? (
-          <List>
-            {otherResources.map(resource => (
-              <ListAction
-                css={{
-                  button: { opacity: 0 },
-                  ':hover, :focus-within': { button: { opacity: 1 } },
-                }}
-                justify="space-between"
-                key={resource}
-              >
-                <Link block maxWidth="100%" href={resource} target="_blank">
-                  {getName(resource)}
-                </Link>
-
-                {readonly ? null : (
-                  <Button
-                    css={css({ width: 'auto' })}
-                    onClick={() => externalResourceRemoved(resource)}
-                    variant="link"
-                  >
-                    <CrossIcon />
-                  </Button>
-                )}
-              </ListAction>
-            ))}
-
-            {fonts.map(resource => (
-              <ListAction
-                css={{
-                  button: { opacity: 0 },
-                  ':hover, :focus-within': { button: { opacity: 1 } },
-                }}
-                justify="space-between"
-                key={resource}
-              >
-                <Link href={resource} target="_blank">
-                  {getFontFamily(resource).name}
-                </Link>
-
-                {readonly ? null : (
-                  <Button
-                    css={css({ width: 'auto' })}
-                    onClick={() => externalResourceRemoved(resource)}
-                    variant="link"
-                  >
-                    <CrossIcon />
-                  </Button>
-                )}
-              </ListAction>
-            ))}
-          </List>
-        ) : null}
-
-        {readonly ? null : (
-          <form
-            onSubmit={event => {
-              event.preventDefault();
-              const url = event.target[0].value.trim();
-              externalResourceAdded(url);
-            }}
-          >
-            <FormField label="External URL" direction="vertical">
-              <Input
-                key={otherResources.length}
-                placeholder="https://cdn.com/bootstrap.css"
-                required
-                type="text"
-              />
-            </FormField>
-
-            <SidebarRow marginX={2}>
-              <Button type="submit" variant="secondary">
-                Add resource
-              </Button>
-            </SidebarRow>
-          </form>
-        )}
-
-        {readonly ? null : (
-          <form
-            onSubmit={event => {
-              event.preventDefault();
-              const fontName = event.target[0].value.trim().replace(/ /g, '+');
-              const url = `https://fonts.googleapis.com/css?family=${fontName}&display=swap`;
-              externalResourceAdded(url);
-            }}
-          >
-            <FormField direction="vertical" label="Google Fonts">
-              <Select
-                key={fonts.length}
-                placeholder="Select a font family"
-                required
-              >
-                {listOfFonts.sort().map(name => (
-                  <option key={name}>{name}</option>
-                ))}
-              </Select>
-            </FormField>
-
-            <SidebarRow marginX={2}>
-              <Button type="submit" variant="secondary">
-                Add font
-              </Button>
-            </SidebarRow>
-          </form>
-        )}
-      </Stack>
-    </Collapsible>
-  );
-};
-
-const getNormalizedUrl = (url: string) => `${url.replace(/\/$/g, '')}/`;
-const getName = (resource: string) => {
-  if (resource.endsWith('.css') || resource.endsWith('.js')) {
-    const match = resource.match(/.*\/(.*)/);
-
-    if (match && match[1]) {
-      return match[1];
-    }
-  }
-
-  // Add trailing / but no double one
-  return getNormalizedUrl(resource);
-};
-
-const getFontFamily = (search: string) => {
-  const hashes = search.slice(search.indexOf('?') + 1).split('&');
-  const family = hashes
-    .find(hash => hash && hash.split('=')[0] === 'family')
-    .split('=')[1];
-
-  return {
-    name: family.split('+').join(' '),
-    id: family.split('+').join('-').toLowerCase(),
-  };
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Files/DirectoryEntry/DirectoryChildren/ModuleEntry.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Files/DirectoryEntry/DirectoryChildren/ModuleEntry.tsx
deleted file mode 100644
index f8d19158b32..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Files/DirectoryEntry/DirectoryChildren/ModuleEntry.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import { Directory, Module } from '@codesandbox/common/lib/types';
-import { notificationState } from '@codesandbox/common/lib/utils/notifications';
-import { NotificationStatus } from '@codesandbox/notifications';
-import { useAppState, useEffects } from 'app/overmind';
-import { getType } from 'app/utils/get-type';
-import React, { useCallback, useMemo } from 'react';
-
-import { Entry } from '../Entry';
-
-const ESM_EXTENSIONS = ['ts', 'tsx', 'js', 'jsx'];
-
-interface IModuleEntryProps {
-  module: Module;
-  readonly?: boolean;
-  setCurrentModule?: (id: string) => void;
-  store?: any;
-  signals?: any;
-  markTabsNotDirty?: () => void;
-  depth?: number;
-  renameModule?: (title: string, moduleShortid: string) => void;
-  deleteEntry?: (shortid: string, title: string) => void;
-  discardModuleChanges?: (shortid: string, title: string) => void;
-  getModulePath?: (
-    modules: Module[],
-    directories: Directory[],
-    id: string
-  ) => string;
-  renameValidator?: (id: string, title: string) => string | false | null;
-  isActive: boolean;
-}
-
-export const ModuleEntry: React.FC<IModuleEntryProps> = React.memo(
-  ({
-    module,
-    setCurrentModule,
-    markTabsNotDirty,
-    depth,
-    readonly,
-    renameModule,
-    deleteEntry,
-    discardModuleChanges,
-    getModulePath,
-    renameValidator,
-    isActive,
-  }) => {
-    const {
-      browser: { copyToClipboard },
-    } = useEffects();
-    const {
-      editor: { mainModule, currentSandbox },
-      live,
-    } = useAppState();
-    const isMainModule = module.id === mainModule.id;
-    const type = getType(module.title);
-    const hasError = module.errors.length > 0;
-    const liveUsers = live.liveUsersByModule[module.shortid] || [];
-
-    const isNotSynced = module.savedCode && module.code !== module.savedCode;
-
-    const showESModuleItem: boolean = useMemo(() => {
-      if (!module.path || currentSandbox.template !== 'esm-react') {
-        return false;
-      }
-
-      const modulePathParts = module.path.split('.');
-      const extname = modulePathParts[modulePathParts.length - 1];
-      return ESM_EXTENSIONS.includes(extname);
-    }, [module.path, currentSandbox.template]);
-
-    const handleCopyESModuleUrl = useCallback(() => {
-      const esmoduleUrl = new URL(
-        module.path.substr(1),
-        `https://esm-cdn-preview.codesandbox.io/${currentSandbox.id}/fs/`
-      );
-      esmoduleUrl.searchParams.set(
-        'mtime',
-        `${new Date(module.updatedAt).getTime()}`
-      );
-      copyToClipboard(esmoduleUrl.href);
-      notificationState.addNotification({
-        message: 'Copied ESModule URL',
-        status: NotificationStatus.SUCCESS,
-      });
-    }, [currentSandbox.id, module.updatedAt, module.path, copyToClipboard]);
-
-    return (
-      // @ts-ignore
-      <Entry
-        id={module.id}
-        readonly={readonly}
-        shortid={module.shortid}
-        title={module.title}
-        rightColors={liveUsers.map(([a, b, c]) => `rgb(${a}, ${b}, ${c})`)}
-        depth={depth + 1}
-        active={isActive}
-        type={type || 'function'}
-        rename={renameModule}
-        deleteEntry={deleteEntry}
-        isNotSynced={isNotSynced}
-        renameValidator={renameValidator}
-        setCurrentModule={setCurrentModule}
-        isMainModule={isMainModule}
-        moduleHasError={hasError}
-        markTabsNotDirty={markTabsNotDirty}
-        discardModuleChanges={discardModuleChanges}
-        getModulePath={getModulePath}
-        copyESModuleURL={showESModuleItem ? handleCopyESModuleUrl : null}
-      />
-    );
-  }
-);
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Files/DirectoryEntry/DirectoryChildren/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Files/DirectoryEntry/DirectoryChildren/index.tsx
deleted file mode 100644
index 8e3106fe1f3..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Files/DirectoryEntry/DirectoryChildren/index.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-import {
-  HIDDEN_DIRECTORIES,
-  HIDDEN_FILES,
-} from '@codesandbox/common/lib/templates/constants/files';
-import { Directory, Module } from '@codesandbox/common/lib/types';
-import { useActions, useAppState } from 'app/overmind';
-import { sortBy } from 'lodash-es';
-import * as React from 'react';
-
-import { ModuleEntry } from './ModuleEntry';
-import { DirectoryEntry } from '..';
-
-interface IDirectoryChildrenProps {
-  depth?: number;
-  readonly?: boolean;
-  renameModule?: (title: string, moduleShortid: string) => void;
-  setCurrentModule?: (id: string) => void;
-  parentShortid?: string;
-  deleteEntry?: (shortid: string, title: string) => void;
-  isInProjectView?: boolean;
-  markTabsNotDirty?: () => void;
-  discardModuleChanges?: (shortid: string, title: string) => void;
-  getModulePath?: (
-    modules: Module[],
-    directories: Directory[],
-    id: string
-  ) => string;
-  renameValidator?: (id: string, title: string) => string | false | null;
-}
-
-export const DirectoryChildren: React.FC<IDirectoryChildrenProps> = ({
-  depth = 0,
-  readonly,
-  renameModule,
-  setCurrentModule,
-  parentShortid,
-  deleteEntry,
-  isInProjectView,
-  markTabsNotDirty,
-  discardModuleChanges,
-  getModulePath,
-  renameValidator,
-}) => {
-  const { isLoggedIn, editor: editorState } = useAppState();
-  const { files, editor } = useActions();
-  const { currentSandbox, mainModule, currentModuleShortid } = editorState;
-
-  const {
-    id: sandboxId,
-    modules,
-    directories,
-    template: sandboxTemplate,
-  } = currentSandbox;
-
-  return (
-    <div>
-      {sortBy(directories, 'title')
-        .filter(x => x.directoryShortid === parentShortid)
-        .filter(
-          x =>
-            !(
-              x.directoryShortid == null && HIDDEN_DIRECTORIES.includes(x.title)
-            )
-        )
-        .map(dir => (
-          <DirectoryEntry
-            key={dir.id}
-            depth={depth + 1}
-            signals={{ files, editor }}
-            store={{ editor: editorState, isLoggedIn }}
-            id={dir.id}
-            shortid={dir.shortid}
-            title={dir.title}
-            sandboxId={sandboxId}
-            sandboxTemplate={sandboxTemplate}
-            mainModuleId={mainModule?.id}
-            modules={modules}
-            directories={directories}
-            isInProjectView={isInProjectView}
-            markTabsNotDirty={markTabsNotDirty}
-            getModulePath={getModulePath}
-          />
-        ))}
-      {sortBy(
-        modules
-          .filter(x => x.directoryShortid === parentShortid)
-          .filter(
-            x => !(x.directoryShortid == null && HIDDEN_FILES.includes(x.title))
-          ),
-        'title'
-      ).map(m => (
-        <ModuleEntry
-          key={m.id}
-          readonly={readonly}
-          module={m}
-          depth={depth}
-          setCurrentModule={setCurrentModule}
-          markTabsNotDirty={markTabsNotDirty}
-          renameModule={renameModule}
-          deleteEntry={deleteEntry}
-          discardModuleChanges={discardModuleChanges}
-          getModulePath={getModulePath}
-          renameValidator={renameValidator}
-          isActive={m.shortid === currentModuleShortid}
-        />
-      ))}
-    </div>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Files/DirectoryEntry/DirectoryEntryModal/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Files/DirectoryEntry/DirectoryEntryModal/index.tsx
deleted file mode 100644
index 21051b49734..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Files/DirectoryEntry/DirectoryEntryModal/index.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react';
-import { Alert } from 'app/pages/common/Modals/Common/Alert';
-import Modal from 'app/components/Modal';
-
-interface DirectoryEntryModalProps {
-  body: React.ReactNode;
-  isOpen: boolean;
-  onClose: () => void;
-  onConfirm: () => void;
-  title: string;
-  primaryMessage?: string;
-}
-
-export const DirectoryEntryModal = ({
-  body,
-  isOpen,
-  onClose,
-  onConfirm,
-  primaryMessage,
-  title,
-}: DirectoryEntryModalProps) => (
-  <Modal isOpen={isOpen} onClose={onClose} width={400}>
-    <Alert
-      title={title}
-      description={body}
-      onCancel={onClose}
-      onPrimaryAction={onConfirm}
-      type="danger"
-      confirmMessage={primaryMessage || 'Delete'}
-    />
-  </Modal>
-);
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Files/DirectoryEntry/Entry/EditIcons/ErrorBoundary.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Files/DirectoryEntry/Entry/EditIcons/ErrorBoundary.tsx
deleted file mode 100644
index cdbade71ca6..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Files/DirectoryEntry/Entry/EditIcons/ErrorBoundary.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-
-export class ErrorBoundary extends React.Component<{}, { hasError: boolean }> {
-  state = { hasError: false };
-
-  static getDerivedStateFromError() {
-    return { hasError: true };
-  }
-
-  componentDidCatch() {
-    // do nothing
-  }
-
-  render() {
-    if (this.state.hasError) {
-      return null;
-    }
-
-    return this.props.children;
-  }
-}
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Files/DirectoryEntry/Entry/EditIcons/elements.js b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Files/DirectoryEntry/Entry/EditIcons/elements.js
deleted file mode 100644
index 6375e9e6cfc..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Files/DirectoryEntry/Entry/EditIcons/elements.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import styled, { css } from 'styled-components';
-import fadeIn from '@codesandbox/common/lib/utils/animation/fade-in';
-
-export const Container = styled.div`
-  display: flex;
-  ${fadeIn(0)};
-  vertical-align: middle;
-  line-height: 1;
-  align-items: center;
-`;
-
-export const Icon = styled.div`
-  ${({ theme }) => css`
-    position: relative;
-    display: inline-block;
-    transition: 0.3s ease color;
-    cursor: pointer;
-    color: ${theme.light ? '#6C6C6C' : 'rgba(255, 255, 255, 0.5)'};
-    padding-left: 0.5rem;
-
-    &:hover {
-      color: ${theme.light ? 'black' : 'rgba(255, 255, 255, 1)'};
-    }
-  `};
-`;
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Files/DirectoryEntry/Entry/EditIcons/index.js b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Files/DirectoryEntry/Entry/EditIcons/index.js
deleted file mode 100644
index fee7c85eac9..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Files/DirectoryEntry/Entry/EditIcons/index.js
+++ /dev/null
@@ -1,110 +0,0 @@
-import React from 'react';
-
-import Tooltip, {
-  SingletonTooltip,
-} from '@codesandbox/common/lib/components/Tooltip';
-import {
-  CrossIcon,
-  EditIcon,
-  AddFileIcon,
-  AddDirectoryIcon,
-  UploadFileIcon,
-  DownloadIcon,
-  UndoIcon,
-  // eslint-disable-next-line import/extensions
-} from '../../../icons.tsx';
-import { ErrorBoundary } from './ErrorBoundary';
-
-import { Container, Icon } from './elements';
-
-const handleClick = func => e => {
-  e.preventDefault();
-  e.stopPropagation();
-  func();
-};
-
-function EditIcons({
-  className = undefined,
-  hovering,
-  onDelete,
-  onDiscardChanges,
-  onEdit,
-  onCreateFile,
-  onCreateDirectory,
-  active,
-  onUploadFile,
-  onDownload = undefined,
-  forceShow,
-}) {
-  // Phones need double click if we show elements on click, that's why we only want
-  // to show these edit icons when the user clicks and hasn't activated the module
-  if (window.__isTouch && !active && !forceShow) {
-    return null;
-  }
-
-  return (
-    <div className={className}>
-      <ErrorBoundary>
-        {hovering || (window.__isTouch && active) || forceShow ? (
-          <SingletonTooltip>
-            {singleton => (
-              <Container>
-                {onDownload && (
-                  <Tooltip content="Export to ZIP" singleton={singleton}>
-                    <Icon onClick={handleClick(onDownload)}>
-                      <DownloadIcon />
-                    </Icon>
-                  </Tooltip>
-                )}
-                {onUploadFile && (
-                  <Tooltip content="Upload Files" singleton={singleton}>
-                    <Icon onClick={handleClick(onUploadFile)}>
-                      <UploadFileIcon />
-                    </Icon>
-                  </Tooltip>
-                )}
-                {onDiscardChanges && (
-                  <Tooltip content="Discard Changes">
-                    <Icon onClick={handleClick(onDiscardChanges)}>
-                      <UndoIcon />
-                    </Icon>
-                  </Tooltip>
-                )}
-                {onEdit && (
-                  <Tooltip content="Rename" singleton={singleton}>
-                    <Icon onClick={handleClick(onEdit)}>
-                      <EditIcon />
-                    </Icon>
-                  </Tooltip>
-                )}
-                {onCreateFile && (
-                  <Tooltip content="New File" singleton={singleton}>
-                    <Icon onClick={handleClick(onCreateFile)}>
-                      <AddFileIcon />
-                    </Icon>
-                  </Tooltip>
-                )}
-                {onCreateDirectory && (
-                  <Tooltip content="New Directory" singleton={singleton}>
-                    <Icon onClick={handleClick(onCreateDirectory)}>
-                      <AddDirectoryIcon />
-                    </Icon>
-                  </Tooltip>
-                )}
-                {onDelete && (
-                  <Tooltip content="Delete" singleton={singleton}>
-                    <Icon onClick={handleClick(onDelete)}>
-                      <CrossIcon />
-                    </Icon>
-                  </Tooltip>
-                )}
-              </Container>
-            )}
-          </SingletonTooltip>
-        ) : null}
-      </ErrorBoundary>
-    </div>
-  );
-}
-
-export default EditIcons;
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Files/DirectoryEntry/Entry/EntryIcons/GetIconURL.js b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Files/DirectoryEntry/Entry/EntryIcons/GetIconURL.js
deleted file mode 100644
index 19266e47624..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Files/DirectoryEntry/Entry/EntryIcons/GetIconURL.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import fileSvg from '@codesandbox/common/lib/icons/file.svg';
-import imageSvg from '@codesandbox/common/lib/icons/image.svg';
-import codesandboxSvg from '@codesandbox/common/lib/icons/codesandbox.svg';
-import nowSvg from '@codesandbox/common/lib/icons/now.svg';
-import folderSvg from './folder.svg';
-import folderOpenSvg from './folderOpen.svg';
-
-function imageExists(url) {
-  return new Promise((resolve, reject) => {
-    const img = new Image();
-    img.onload = resolve;
-    img.onerror = reject;
-    img.src = url;
-  });
-}
-
-async function getIconURL(type) {
-  const base =
-    'https://cdn.jsdelivr.net/gh/PKief/vscode-material-icon-theme@master/icons';
-
-  let url;
-
-  switch (type) {
-    case 'codesandbox':
-      url = codesandboxSvg;
-      break;
-
-    case 'image':
-      url = imageSvg;
-      break;
-
-    case 'now':
-      url = nowSvg;
-      break;
-
-    case 'directory':
-      url = folderSvg;
-      break;
-
-    case 'directory-open':
-      url = folderOpenSvg;
-      break;
-
-    default:
-      url = `${base}/${type}.svg`;
-  }
-
-  try {
-    await imageExists(url);
-
-    return url;
-  } catch (_) {
-    return fileSvg;
-  }
-}
-
-export default getIconURL;
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Files/DirectoryEntry/Entry/EntryIcons/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Files/DirectoryEntry/Entry/EntryIcons/elements.ts
deleted file mode 100644
index 946f71d3674..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Files/DirectoryEntry/Entry/EntryIcons/elements.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import styled from 'styled-components';
-
-export const RedIcon = styled.span<{
-  width: number;
-  height: number;
-}>`
-  color: ${props => props.theme.red};
-  width: ${props => props.width}px;
-  height: ${props => props.height}px;
-`;
-
-export const SVGIcon = styled.span<{
-  url: string;
-  width: number;
-  height: number;
-}>`
-  background-image: url(${props => props.url});
-  background-size: ${props => props.width}px;
-  background-position: 0;
-  background-repeat: no-repeat;
-  width: ${props => props.width}px;
-  height: ${props => props.height}px;
-  display: inline-block;
-  -webkit-font-smoothing: antialiased;
-  vertical-align: top;
-  flex-shrink: 0;
-`;
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Files/DirectoryEntry/Entry/EntryIcons/folder.svg b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Files/DirectoryEntry/Entry/EntryIcons/folder.svg
deleted file mode 100644
index 74a73900835..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Files/DirectoryEntry/Entry/EntryIcons/folder.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6.86667 2L8.33333 3.46667H14.2C15 3.46667 15.6667 4.13333 15.6667 4.93333V12.4C15.6667 13.2 15 13.8667 14.2 13.8667H2.46667C1.66667 14 1 13.3333 1 12.5333V3.46667C1 2.66667 1.66667 2 2.46667 2H6.86667Z" fill="#64D2FF"/>
-</svg>
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Files/DirectoryEntry/Entry/EntryIcons/folderOpen.svg b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Files/DirectoryEntry/Entry/EntryIcons/folderOpen.svg
deleted file mode 100644
index fb1c89ee2fc..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Files/DirectoryEntry/Entry/EntryIcons/folderOpen.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0.705882 2H5.91357C6.08159 2 6.2441 2.05993 6.37188 2.16902L8.10324 3.64706H14.0273C14.4171 3.64706 14.7332 3.96309 14.7332 4.35294V4.82353H2.05786C1.71875 4.82353 1.42756 5.06466 1.36435 5.39782L0 12.5882V2.70588C0 2.31603 0.316034 2 0.705882 2ZM2.75532 5.5293C2.4341 5.5293 2.15339 5.74617 2.0723 6.05698L0.230657 13.1158C0.113972 13.563 0.451465 13.9999 0.913676 13.9999H13.4512C13.7724 13.9999 14.0531 13.783 14.1342 13.4722L15.9758 6.41338C16.0925 5.96614 15.755 5.5293 15.2928 5.5293H2.75532Z" fill="#6CC7F6"/>
-</svg>
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Files/DirectoryEntry/Entry/EntryIcons/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Files/DirectoryEntry/Entry/EntryIcons/index.tsx
deleted file mode 100644
index 0d8afb8dfdd..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Files/DirectoryEntry/Entry/EntryIcons/index.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import React, { Component } from 'react';
-import ErrorIcon from 'react-icons/lib/md/error';
-
-import { RedIcon, SVGIcon } from './elements';
-import getIconURL from './GetIconURL';
-
-type Props = {
-  type: string;
-  width?: number;
-  height?: number;
-  error?: boolean;
-};
-
-class GetIcon extends Component<Props> {
-  state = { icon: null };
-
-  mounted = true;
-
-  getIcon = async type => {
-    const icon = await getIconURL(type);
-    if (this.mounted) {
-      this.setState({
-        icon,
-      });
-    }
-  };
-
-  async componentDidMount() {
-    this.mounted = true;
-
-    this.getIcon(this.props.type);
-  }
-
-  componentWillUnmount() {
-    this.mounted = false;
-  }
-
-  async componentDidUpdate(prevProps) {
-    if (this.props.type !== prevProps.type) {
-      this.getIcon(this.props.type);
-    }
-  }
-
-  render() {
-    const { error, width, height } = this.props;
-    const { icon } = this.state;
-
-    if (error) {
-      return (
-        <RedIcon width={width} height={height}>
-          <ErrorIcon width={width} height={height} />
-        </RedIcon>
-      );
-    }
-    return <SVGIcon url={icon} width={width} height={height} />;
-  }
-}
-
-export const EntryIcons: React.FC<Props> = ({
-  type,
-  width = 16,
-  height = 16,
-  error,
-}) => (
-  <div style={{ display: 'inline-block', verticalAlign: 'middle' }}>
-    <GetIcon type={type} error={error} width={width} height={height} />
-  </div>
-);
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Files/DirectoryEntry/Entry/FileInput.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Files/DirectoryEntry/Entry/FileInput.tsx
deleted file mode 100644
index 470a38f42a3..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Files/DirectoryEntry/Entry/FileInput.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import React, {
-  useState,
-  ChangeEvent,
-  KeyboardEvent,
-  FunctionComponent,
-} from 'react';
-
-import { ESC, ENTER } from '@codesandbox/common/lib/utils/keycodes';
-import { FormField, Input } from '@codesandbox/components';
-
-function select(el) {
-  if (el) {
-    el.select();
-  }
-}
-
-interface Props {
-  title: string;
-  onCommit: (value: string, force?: boolean) => void;
-  onChange: (value: string) => void;
-  onCancel: () => void;
-  error: string | false | null;
-  id: string;
-}
-
-export const FileInput: FunctionComponent<Props> = ({
-  title,
-  onCommit,
-  onCancel,
-  onChange,
-  error,
-  id,
-  ...props
-}) => {
-  const [currentValue, setCurrentValue] = useState(title);
-
-  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-    if (e.target) {
-      const { value } = e.target;
-      onChange(value);
-      setCurrentValue(value);
-    }
-  };
-
-  const handleKeyUp = (e: KeyboardEvent<HTMLInputElement>) => {
-    if (e.keyCode === ENTER) {
-      onCommit(currentValue.trim());
-    } else if (e.keyCode === ESC) {
-      onCancel();
-    }
-  };
-
-  return (
-    <FormField
-      label={title ? `rename ${title}` : 'set name new file'}
-      hideLabel
-      css={{ height: '100%', padding: 0 }}
-      id={`input-${id}`}
-    >
-      <Input
-        onChange={handleChange}
-        onBlur={() => onCommit(currentValue, true)}
-        onKeyUp={handleKeyUp}
-        ref={select}
-        value={currentValue}
-        autoComplete="off"
-        spellCheck="false"
-        aria-invalid={Boolean(error)}
-        aria-errormessage={`error-${id}`}
-        {...props}
-      />
-    </FormField>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Files/DirectoryEntry/Entry/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Files/DirectoryEntry/Entry/index.tsx
deleted file mode 100644
index 4bbe951ddeb..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Files/DirectoryEntry/Entry/index.tsx
+++ /dev/null
@@ -1,317 +0,0 @@
-import theme from '@codesandbox/common/lib/theme';
-import { Directory, Module } from '@codesandbox/common/lib/types';
-import { ListAction, Stack, Text } from '@codesandbox/components';
-import css from '@styled-system/css';
-import { ContextMenu, ContextMenuItemType } from 'app/components/ContextMenu';
-import React, { useState } from 'react';
-import { DragSource } from 'react-dnd';
-
-import {
-  AddDirectoryIcon,
-  AddFileIcon,
-  DeleteIcon,
-  EditIcon,
-  NotSyncedIcon,
-  UndoIcon,
-  UploadFileIcon,
-} from '../../icons';
-import EditIcons from './EditIcons';
-import { EntryIcons } from './EntryIcons';
-import { FileInput } from './FileInput';
-
-interface IEntryProps {
-  renameValidator?: (id: string, title: string) => string | false | null;
-  shortid?: string;
-  readonly?: boolean;
-  id: string;
-  title?: string;
-  root?: boolean;
-  isOpen?: boolean;
-  hasChildren?: boolean;
-  closeTree?: any;
-  rename?: (shortid: string, title: string) => void;
-  deleteEntry?: (shortid: string, title: string) => void;
-  depth?: number;
-  type?: string;
-  active?: boolean;
-  discardModuleChanges?: (shortid: string, title: string) => void;
-  setCurrentModule?: (id: string) => void;
-  connectDragSource?: (node: JSX.Element) => JSX.Element;
-  onCreateDirectoryClick?: () => boolean | void;
-  onCreateModuleClick?: () => boolean | void;
-  onUploadFileClick?: () => boolean | void;
-  onClick?: () => void;
-  markTabsNotDirty?: () => void;
-  onRenameCancel?: () => void;
-  copyESModuleURL?: () => void;
-  getModulePath?: (
-    modules: Module[],
-    directories: Directory[],
-    id: string
-  ) => string;
-  isNotSynced?: boolean;
-  isMainModule?: boolean;
-  moduleHasError?: boolean;
-  rightColors?: string[];
-  state?: string;
-}
-
-const EntryComponent: React.FC<IEntryProps> = ({
-  title,
-  id,
-  readonly,
-  depth,
-  type,
-  active,
-  setCurrentModule,
-  connectDragSource,
-  discardModuleChanges,
-  onCreateModuleClick,
-  onCreateDirectoryClick,
-  onUploadFileClick,
-  deleteEntry,
-  onClick,
-  onRenameCancel,
-  copyESModuleURL,
-  markTabsNotDirty,
-  rename,
-  isNotSynced,
-  isMainModule,
-  moduleHasError,
-  shortid,
-  rightColors = [],
-  renameValidator,
-  state: incomingState = '',
-}) => {
-  const [state, setState] = useState(incomingState);
-  const [error, setError] = useState<string | false | null>(null);
-  const [hovering, setHovering] = useState(false);
-
-  const resetState = () => {
-    if (onRenameCancel) {
-      onRenameCancel();
-    }
-
-    setState('');
-    setError(null);
-  };
-
-  const handleValidateTitle = (titleToValidate: string) => {
-    const isInvalidTitle = renameValidator(id, titleToValidate);
-    setError(isInvalidTitle);
-
-    return isInvalidTitle;
-  };
-
-  const renameAction = () => {
-    setState('editing');
-    return true;
-  };
-
-  const deleteAction = () =>
-    deleteEntry ? deleteEntry(shortid, title) : false;
-
-  const discardModuleChangesAction = () =>
-    discardModuleChanges ? discardModuleChanges(shortid, title) : false;
-
-  const handleRename = (newTitle: string, force: boolean = false) => {
-    if (newTitle === title) {
-      resetState();
-      return;
-    }
-
-    const canRename = !handleValidateTitle(newTitle);
-
-    if (newTitle !== title && canRename && rename) {
-      rename(shortid, newTitle);
-      resetState();
-    } else if (force) {
-      resetState();
-    }
-  };
-
-  const setCurrentModuleAction = () => setCurrentModule(id);
-
-  const onMouseEnter = () => setHovering(true);
-  const onMouseLeave = () => setHovering(false);
-
-  const onKeyPress = e => {
-    if (e.key === 'Enter') {
-      if (setCurrentModule) {
-        setCurrentModuleAction();
-      } else if (typeof onClick === 'function') {
-        onClick();
-      }
-    }
-  };
-
-  const items = [
-    [
-      isNotSynced && {
-        title: 'Discard Changes',
-        action: discardModuleChangesAction,
-        icon: UndoIcon,
-      },
-    ].filter(Boolean),
-    [
-      onCreateModuleClick && {
-        title: 'Create File',
-        action: onCreateModuleClick,
-        icon: AddFileIcon,
-      },
-      onCreateDirectoryClick && {
-        title: 'Create Directory',
-        action: onCreateDirectoryClick,
-        icon: AddDirectoryIcon,
-      },
-      onUploadFileClick && {
-        title: 'Upload Files',
-        action: onUploadFileClick,
-        icon: UploadFileIcon,
-      },
-      rename && {
-        title: 'Rename',
-        action: renameAction,
-        icon: EditIcon,
-      },
-      !!copyESModuleURL && {
-        title: 'Copy as ESModule URL',
-        action: copyESModuleURL,
-        icon: AddFileIcon, // TODO: Figure out what the actual icon is
-        isNewFeature: true,
-      },
-      deleteEntry && {
-        title: 'Delete',
-        action: deleteAction,
-        color: theme.red.darken(0.2)(),
-        icon: DeleteIcon,
-      },
-    ].filter(Boolean),
-  ].filter(Boolean) as ContextMenuItemType[];
-
-  return connectDragSource(
-    <div>
-      <ContextMenu items={readonly ? [] : items}>
-        <ListAction
-          justify="space-between"
-          onClick={setCurrentModule ? setCurrentModuleAction : onClick}
-          onKeyPress={onKeyPress}
-          // @ts-ignore
-          tabIndex="0"
-          onDoubleClick={markTabsNotDirty}
-          aria-selected={active}
-          aria-expanded={active}
-          onMouseEnter={onMouseEnter}
-          onMouseLeave={onMouseLeave}
-          css={{
-            paddingLeft: depth
-              ? `calc(${depth + 1}rem - 2px)`
-              : 'calc(1rem - 2px)',
-            // live user
-            borderRight: '2px solid',
-            minHeight: 28,
-            borderColor: rightColors[0] || 'transparent',
-            ':hover:not([aria-selected="true"])': {
-              // override ListAction to keep background same as before
-              // we do this to diffrentiate between hover and selected
-              backgroundColor: 'inherit',
-            },
-          }}
-        >
-          <Stack gap={2} align="center" css={{ width: '100%' }}>
-            <EntryIcons type={type} error={moduleHasError} />
-            {state === 'editing' ? (
-              <FileInput
-                id={id}
-                title={title}
-                onChange={handleValidateTitle}
-                onCancel={resetState}
-                onCommit={handleRename}
-                error={error}
-                css={css({
-                  // i know how this looks, but to make the input feel like
-                  // it's editing in place, we move it back half the space
-                  // 0.5 * gap of 2 = 1 and then another 1px for the border
-                  // :upside-down:smile:
-                  marginLeft: '-5px',
-                  paddingLeft: 1,
-                })}
-              />
-            ) : (
-              <Text maxWidth="100%">{title}</Text>
-            )}
-            {isNotSynced && !state && (
-              <NotSyncedIcon css={css({ color: 'blues.300' })} />
-            )}
-          </Stack>
-          {state === '' && (
-            <Stack align="top">
-              {isMainModule && hovering && (
-                <Text variant="muted" size={2}>
-                  entry
-                </Text>
-              )}
-              {!readonly && (
-                <EditIcons
-                  hovering={hovering}
-                  onCreateFile={onCreateModuleClick}
-                  onCreateDirectory={onCreateDirectoryClick}
-                  onUploadFile={onUploadFileClick}
-                  onDiscardChanges={isNotSynced && discardModuleChangesAction}
-                  onDelete={deleteEntry && deleteAction}
-                  onEdit={rename && renameAction}
-                  active={active}
-                  forceShow={window.__isTouch && type === 'directory-open'}
-                />
-              )}
-            </Stack>
-          )}
-        </ListAction>
-        {error && typeof error === 'string' && (
-          <Text
-            size={3}
-            variant="danger"
-            block
-            role="alert"
-            id={`error-${id}`}
-            css={{
-              // align with file name
-              marginLeft: depth
-                ? `calc(${depth + 1}rem + 24px)`
-                : 'calc(1rem + 24px)',
-            }}
-          >
-            {error}
-          </Text>
-        )}
-      </ContextMenu>
-    </div>
-  );
-};
-
-const entrySource = {
-  canDrag: props => !props.readonly && !!props.id,
-  beginDrag: props => {
-    if (props.closeTree) props.closeTree();
-
-    const directory =
-      props.type === 'directory' || props.type === 'directory-open';
-    return {
-      id: props.id,
-      shortid: props.shortid,
-      directory,
-      path: !directory && props.getModulePath(props.id),
-    };
-  },
-};
-
-const collectSource = (connect, monitor) => ({
-  connectDragSource: connect.dragSource(),
-  isDragging: monitor.isDragging(),
-});
-
-export const Entry = DragSource(
-  'ENTRY',
-  entrySource,
-  collectSource
-)(EntryComponent);
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Files/DirectoryEntry/elements.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Files/DirectoryEntry/elements.tsx
deleted file mode 100644
index 0bcf54b33fb..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Files/DirectoryEntry/elements.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import styled from 'styled-components';
-
-export const EntryContainer = styled.div`
-  position: relative;
-`;
-
-export const Overlay = styled.div<{ isOver: boolean }>`
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background-color: rgba(0, 0, 0, 0.3);
-  display: ${props => (props.isOver ? 'block' : 'none')};
-`;
-
-export const Opener = styled.div<{ open: boolean }>`
-  height: ${props => (props.open ? '100%' : '0px')};
-  overflow: hidden;
-`;
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Files/DirectoryEntry/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Files/DirectoryEntry/index.tsx
deleted file mode 100644
index 6d11cdd31ab..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Files/DirectoryEntry/index.tsx
+++ /dev/null
@@ -1,484 +0,0 @@
-import {
-  getChildren as calculateChildren,
-  inDirectory,
-} from '@codesandbox/common/lib/sandbox/modules';
-import { Directory, Module } from '@codesandbox/common/lib/types';
-import { useAppState, useActions, useReaction } from 'app/overmind';
-import React from 'react';
-import { DropTarget, DropTargetMonitor } from 'react-dnd';
-import { NativeTypes } from 'react-dnd-html5-backend';
-import * as CSSProps from 'styled-components/cssprop'; // eslint-disable-line
-
-import { DirectoryChildren } from './DirectoryChildren';
-import { DirectoryEntryModal } from './DirectoryEntryModal';
-import { EntryContainer, Opener, Overlay } from './elements';
-import { Entry } from './Entry';
-import { validateTitle } from './validateTitle';
-
-const readDataURL = (file: File): Promise<string | ArrayBuffer> =>
-  new Promise(resolve => {
-    const reader = new FileReader();
-    reader.onload = e => {
-      resolve(e.target.result);
-    };
-    reader.readAsDataURL(file);
-  });
-
-type parsedFiles = { [k: string]: { dataURI: string; type: string } };
-const getFiles = async (files: File[] | FileList): Promise<parsedFiles> => {
-  const returnedFiles = {};
-  await Promise.all(
-    Array.from(files)
-      .filter(Boolean)
-      .map(async file => {
-        const dataURI = await readDataURL(file);
-        // @ts-ignore
-        returnedFiles[file.path || file.name] = {
-          dataURI,
-          type: file.type,
-        };
-      })
-  );
-
-  return returnedFiles;
-};
-
-type ItemTypes = 'module' | 'directory';
-
-type Modal = {
-  title: string;
-  body: React.ReactNode;
-  onConfirm: () => void;
-  primaryMessage?: string;
-};
-
-interface Props {
-  id: string;
-  root?: boolean;
-  readonly?: boolean;
-  initializeProperties?: Function;
-  shortid?: string;
-  store?: any;
-  connectDropTarget?: Function;
-  isOver?: boolean;
-  canDrop?: boolean;
-  signals?: any;
-  title: string;
-  sandboxId?: string;
-  sandboxTemplate?: any;
-  mainModuleId?: string;
-  modules?: any[];
-  directories?: any[];
-  currentModuleShortid?: string;
-  isInProjectView?: boolean;
-  markTabsNotDirty?: () => void;
-  depth?: number;
-  getModulePath?: (
-    modules: Module[],
-    directories: Directory[],
-    id: string
-  ) => string;
-}
-
-const DirectoryEntryComponent: React.FunctionComponent<Props> = ({
-  id,
-  readonly,
-  root,
-  initializeProperties,
-  shortid,
-  connectDropTarget,
-  isOver,
-  depth = 0,
-  getModulePath,
-  canDrop,
-  title: directoryTitle,
-}) => {
-  const {
-    isLoggedIn,
-    editor: {
-      currentSandbox: { modules, directories, privacy },
-      shouldDirectoryBeOpen,
-    },
-  } = useAppState();
-  const {
-    files: {
-      moduleCreated,
-      moduleRenamed,
-      directoryCreated,
-      directoryRenamed,
-      directoryDeleted,
-      moduleDeleted,
-      filesUploaded,
-    },
-    editor: { moduleSelected, moduleDoubleClicked, discardModuleChanges },
-  } = useActions();
-  const reaction = useReaction();
-
-  const [creating, setCreating] = React.useState<ItemTypes>(null);
-  const [open, setOpen] = React.useState(
-    root || shouldDirectoryBeOpen({ directoryId: id })
-  );
-  const [modalConfirm, setModalConfirm] = React.useState<Modal | null>(null);
-
-  React.useEffect(() => {
-    if (initializeProperties) {
-      initializeProperties({
-        onCreateModuleClick,
-        onCreateDirectoryClick,
-        onUploadFileClick,
-      });
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  React.useEffect(
-    () =>
-      reaction(
-        ({ editor }) => editor.currentModule,
-        currentModule => {
-          setOpen(
-            isOpen =>
-              isOpen ||
-              shouldDirectoryBeOpen({ directoryId: id, module: currentModule })
-          );
-        }
-      ),
-
-    // shouldDirectoryOpen causes this to unmount for some reason, which bugs out how directories open and close
-    // eslint-disable-next-line
-    [id, reaction]
-  );
-
-  React.useEffect(() => {
-    if (isOver) {
-      setOpen(true);
-    }
-  }, [isOver]);
-
-  const resetState = React.useCallback(() => setCreating(null), []);
-
-  const onCreateModuleClick = React.useCallback(() => {
-    setCreating('module');
-    setOpen(true);
-
-    return true;
-  }, []);
-
-  const createModule = React.useCallback(
-    (_, title: string) => {
-      moduleCreated({
-        title,
-        directoryShortid: shortid,
-      });
-
-      resetState();
-    },
-    [moduleCreated, resetState, shortid]
-  );
-
-  const renameModule = React.useCallback(
-    (moduleShortid: string, title: string) => {
-      moduleRenamed({ moduleShortid, title });
-    },
-    [moduleRenamed]
-  );
-
-  const closeModals = React.useCallback(() => {
-    setModalConfirm(null);
-  }, []);
-
-  const confirmDeleteModule = React.useCallback(
-    (moduleShortid: string, moduleName: string) => {
-      setModalConfirm({
-        title: 'Delete File',
-        body: (
-          <span>
-            Are you sure you want to delete{' '}
-            <b
-              css={`
-                word-break: break-all;
-              `}
-            >
-              {moduleName}
-            </b>
-            ?
-            <br />
-            The file will be permanently removed.
-          </span>
-        ),
-        onConfirm: () => {
-          closeModals();
-          moduleDeleted({
-            moduleShortid,
-          });
-        },
-      });
-    },
-    [closeModals, moduleDeleted]
-  );
-
-  const onCreateDirectoryClick = React.useCallback(() => {
-    setCreating('directory');
-    setOpen(true);
-
-    return true;
-  }, []);
-
-  const createDirectory = React.useCallback(
-    (_, title: string) => {
-      directoryCreated({
-        title,
-        directoryShortid: shortid,
-      });
-      resetState();
-    },
-    [directoryCreated, resetState, shortid]
-  );
-
-  const onUploadFileClick = React.useCallback(() => {
-    const fileSelector = document.createElement('input');
-    fileSelector.setAttribute('type', 'file');
-    fileSelector.setAttribute('multiple', 'true');
-    fileSelector.onchange = async event => {
-      const target = event.target as HTMLInputElement;
-      const files = await getFiles(target.files);
-
-      filesUploaded({
-        files,
-        directoryShortid: shortid,
-      });
-    };
-
-    fileSelector.click();
-  }, [filesUploaded, shortid]);
-
-  const renameDirectory = React.useCallback(
-    (directoryShortid: string, title: string) => {
-      directoryRenamed({ title, directoryShortid });
-    },
-    [directoryRenamed]
-  );
-
-  const confirmDeleteDirectory = React.useCallback(
-    (directoryShortid: string, directoryName: string) => {
-      setModalConfirm({
-        title: 'Delete Directory',
-        body: (
-          <span>
-            Are you sure you want to delete <b>{directoryName}</b>?
-            <br />
-            The directory will be permanently removed.
-          </span>
-        ),
-        onConfirm: () => {
-          closeModals();
-          directoryDeleted({
-            directoryShortid,
-          });
-        },
-      });
-    },
-    [closeModals, directoryDeleted]
-  );
-
-  const confirmDiscardChanges = React.useCallback(
-    (moduleShortid: string, moduleName: string) => {
-      setModalConfirm({
-        title: 'Discard Changes',
-        primaryMessage: 'Discard',
-        body: (
-          <span>
-            Are you sure you want to discard changes on <b>{moduleName}</b>?
-          </span>
-        ),
-        onConfirm: () => {
-          closeModals();
-          discardModuleChanges({
-            moduleShortid,
-          });
-        },
-      });
-    },
-    [closeModals, discardModuleChanges]
-  );
-
-  const toggleOpen = React.useCallback(() => setOpen(!open), [open]);
-
-  const closeTree = React.useCallback(() => setOpen(false), []);
-
-  const getChildren = React.useCallback(
-    () => calculateChildren(modules, directories, shortid),
-    [directories, modules, shortid]
-  );
-
-  const validateModuleTitle = React.useCallback(
-    (moduleId: string, title: string) =>
-      validateTitle(moduleId, title, getChildren()),
-    [getChildren]
-  );
-
-  const validateDirectoryTitle = React.useCallback(
-    (directoryId: string, title: string) => {
-      if (root) return null;
-
-      return validateTitle(directoryId, title, getChildren());
-    },
-    [getChildren, root]
-  );
-
-  const setCurrentModule = React.useCallback(
-    (moduleId: string) => {
-      moduleSelected({ id: moduleId });
-    },
-    [moduleSelected]
-  );
-
-  const markTabsNotDirty = React.useCallback(() => {
-    moduleDoubleClicked();
-  }, [moduleDoubleClicked]);
-
-  return connectDropTarget(
-    <div style={{ position: 'relative' }}>
-      <Overlay isOver={isOver && canDrop} />
-      {!root && (
-        <EntryContainer>
-          <Entry
-            id={id}
-            shortid={shortid}
-            readonly={readonly}
-            title={directoryTitle}
-            depth={depth}
-            type={open ? 'directory-open' : 'directory'}
-            root={root}
-            isOpen={open}
-            onClick={toggleOpen}
-            renameValidator={validateDirectoryTitle}
-            discardModuleChanges={confirmDiscardChanges}
-            rename={!readonly && !root && renameDirectory}
-            onCreateModuleClick={onCreateModuleClick}
-            onCreateDirectoryClick={onCreateDirectoryClick}
-            onUploadFileClick={isLoggedIn && privacy === 0 && onUploadFileClick}
-            deleteEntry={!root && confirmDeleteDirectory}
-            hasChildren={getChildren().length > 0}
-            closeTree={closeTree}
-            getModulePath={getModulePath}
-          />
-        </EntryContainer>
-      )}
-      <DirectoryEntryModal
-        isOpen={Boolean(modalConfirm)}
-        onClose={closeModals}
-        {...modalConfirm}
-      />
-      {open && (
-        <Opener aria-hidden={!open} open={open}>
-          {creating === 'directory' && (
-            <Entry
-              id=""
-              title=""
-              state="editing"
-              type="directory"
-              depth={depth + 1}
-              renameValidator={validateModuleTitle}
-              rename={createDirectory}
-              onRenameCancel={resetState}
-            />
-          )}
-          <DirectoryChildren
-            depth={depth}
-            readonly={readonly}
-            renameModule={renameModule}
-            parentShortid={shortid}
-            renameValidator={validateModuleTitle}
-            deleteEntry={confirmDeleteModule}
-            setCurrentModule={setCurrentModule}
-            markTabsNotDirty={markTabsNotDirty}
-            discardModuleChanges={confirmDiscardChanges}
-            getModulePath={getModulePath}
-          />
-          {creating === 'module' && (
-            <Entry
-              id=""
-              title=""
-              state="editing"
-              depth={depth + 1}
-              renameValidator={validateModuleTitle}
-              rename={createModule}
-              onRenameCancel={resetState}
-            />
-          )}
-        </Opener>
-      )}
-    </div>
-  );
-};
-
-const FILES_TO_IGNORE = [
-  '.DS_Store', // macOs
-  'Thumbs.db', // Windows
-];
-
-const entryTarget = {
-  drop: (props, monitor) => {
-    if (monitor == null) return;
-
-    // Check if only child is selected:
-    if (!monitor.isOver({ shallow: true })) return;
-
-    const sourceItem = monitor.getItem();
-
-    if (sourceItem.dirContent) {
-      sourceItem.dirContent.then(async (droppedFiles: File[]) => {
-        const files = await getFiles(
-          droppedFiles.filter(file => !FILES_TO_IGNORE.includes(file.name))
-        );
-
-        props.signals.files.filesUploaded({
-          files,
-          directoryShortid: props.shortid,
-        });
-      });
-    } else if (sourceItem.directory) {
-      props.signals.files.directoryMovedToDirectory({
-        shortid: sourceItem.shortid,
-        directoryShortid: props.shortid,
-      });
-    } else {
-      props.signals.files.moduleMovedToDirectory({
-        moduleShortid: sourceItem.shortid,
-        directoryShortid: props.shortid,
-      });
-    }
-  },
-
-  canDrop: (props, monitor) => {
-    if (props.readonly) return false;
-    if (monitor == null) return false;
-    const source = monitor.getItem();
-    if (source == null) return false;
-
-    if (source.id === props.id) return false;
-    if (props.root) return true;
-
-    return !inDirectory(props.directories, source.shortid, props.shortid);
-  },
-};
-
-function collectTarget(connectMonitor, monitor: DropTargetMonitor) {
-  return {
-    // Call this function inside render()
-    // to let React DnD handle the drag events:
-    connectDropTarget: connectMonitor.dropTarget(),
-    // You can ask the monitor about the current drag state:
-    isOver: monitor.isOver({ shallow: true }),
-    canDrop: monitor.canDrop(),
-    itemType: monitor.getItemType(),
-  };
-}
-
-// eslint-disable-next-line import/no-default-export
-export const DirectoryEntry = DropTarget(
-  ['ENTRY', NativeTypes.FILE],
-  entryTarget,
-  collectTarget
-)(React.memo(DirectoryEntryComponent));
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Files/DirectoryEntry/validateTitle.js b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Files/DirectoryEntry/validateTitle.js
deleted file mode 100644
index f6249accfd0..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Files/DirectoryEntry/validateTitle.js
+++ /dev/null
@@ -1,24 +0,0 @@
-export const validateTitle = (id, title, siblings = []) => {
-  if (title.length === 0) return 'Title cannot be empty';
-  if (title.includes(' ')) {
-    // It has whitespaces
-    return 'Title cannot have whitespaces';
-  }
-  if (/[<>^:;,?"*|]/g.test(title)) {
-    return 'Title cannot have special characters';
-  }
-
-  if (title.length > 192) {
-    return "The title can't be more than 192 characters long";
-  }
-
-  if (title.includes('/') || title.includes('\\')) {
-    return "The title can't include slash or backslash";
-  }
-
-  if (siblings.find(sibling => sibling.title === title && sibling.id !== id)) {
-    return `A file or folder ${title} already exists at this location`;
-  }
-
-  return null;
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Files/icons.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Files/icons.tsx
deleted file mode 100644
index 69383c519a7..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Files/icons.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import React, { FunctionComponent, SVGProps } from 'react';
-
-export { default as NotSyncedIcon } from 'react-icons/lib/go/primitive-dot';
-export { default as DeleteIcon } from 'react-icons/lib/go/trashcan';
-export { default as UndoIcon } from 'react-icons/lib/md/undo';
-
-type IconProps = SVGProps<SVGSVGElement>;
-
-export const CrossIcon: FunctionComponent<IconProps> = props => (
-  <svg width={16} height={16} fill="none" viewBox="0 0 16 16" {...props}>
-    <path
-      fill="currentColor"
-      d="M13 3.903l-.91-.97L8 7.297 3.91 2.933l-.91.97 4.09 4.363L3 12.63l.91.97L8 9.236l4.09 4.364.91-.97-4.09-4.364L13 3.903z"
-    />
-  </svg>
-);
-
-export const EditIcon: FunctionComponent<IconProps> = props => (
-  <svg width={16} height={16} fill="none" viewBox="0 0 16 16" {...props}>
-    <path
-      fill="currentColor"
-      d="M1.97 14l3.034-.787 7.64-7.64-2.247-2.247-7.64 7.64L1.97 14zM11.52 2.203l-.561.562 2.247 2.247.561-.562a.794.794 0 000-1.124l-1.123-1.123a.794.794 0 00-1.124 0z"
-    />
-  </svg>
-);
-
-export const AddDirectoryIcon: FunctionComponent<IconProps> = props => (
-  <svg width={16} height={16} fill="none" viewBox="0 0 16 16" {...props}>
-    <path
-      fill="currentColor"
-      d="M6.5 3.5H3a.5.5 0 00-.5.5v8.5a.5.5 0 00.5.5h10a.5.5 0 00.5-.5V5.167a.5.5 0 00-.5-.5H8l-1.167-1.04A.5.5 0 006.5 3.5z"
-    />
-  </svg>
-);
-
-export const AddFileIcon: FunctionComponent<IconProps> = props => (
-  <svg width={16} height={16} fill="none" viewBox="0 0 16 16" {...props}>
-    <path
-      fill="currentColor"
-      fillRule="evenodd"
-      d="M8.284 2.5H4.5A.5.5 0 004 3v10a.5.5 0 00.5.5h7a.5.5 0 00.5-.5V6.08L8.284 2.5zM8 3l3.5 3.5H8V3z"
-      clipRule="evenodd"
-    />
-  </svg>
-);
-
-export const DownloadIcon: FunctionComponent<IconProps> = props => (
-  <svg width={16} height={16} fill="none" viewBox="0 0 16 16" {...props}>
-    <g clipPath="url(#clip0)">
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M7.604 12.293V3h1v9.293L11.5 9.396l.707.708-4.103 4.103L4 10.104l.707-.708 2.897 2.897z"
-        clipRule="evenodd"
-      />
-    </g>
-    <defs>
-      <clipPath id="clip0">
-        <path fill="#fff" d="M0 0h16v16H0V0z" />
-      </clipPath>
-    </defs>
-  </svg>
-);
-
-export const UploadFileIcon: FunctionComponent<IconProps> = props => (
-  <svg width={16} height={16} fill="none" viewBox="0 0 16 16" {...props}>
-    <g clipPath="url(#clip0)">
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M8.104 3l4.103 4.104-.707.707-2.896-2.897v9.293h-1V4.914L4.707 7.811 4 7.104 8.104 3z"
-        clipRule="evenodd"
-      />
-    </g>
-    <defs>
-      <clipPath id="clip0">
-        <path fill="currentColor" d="M0 0h16v16H0V0z" />
-      </clipPath>
-    </defs>
-  </svg>
-);
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Files/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Files/index.tsx
deleted file mode 100644
index 4e0d5e41eca..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Files/index.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import { getModulePath } from '@codesandbox/common/lib/sandbox/modules';
-import { Collapsible, SidebarRow } from '@codesandbox/components';
-import css from '@styled-system/css';
-import React, { FunctionComponent, useCallback, useState } from 'react';
-
-import { useAppState, useActions } from 'app/overmind';
-
-import EditIcons from './DirectoryEntry/Entry/EditIcons';
-import { DirectoryEntry } from './DirectoryEntry/index';
-
-const noop = () => undefined;
-
-type Props = {
-  readonly: boolean;
-};
-export const Files: FunctionComponent<Props> = ({ readonly }) => {
-  const { editor, files } = useActions();
-  const {
-    editor: editorState,
-    editor: {
-      currentSandbox: { directories, modules, privacy, title },
-    },
-    isLoggedIn,
-  } = useAppState();
-  const [editActions, setEditActions] = useState(null);
-
-  const _getModulePath = useCallback(
-    moduleId => {
-      try {
-        return getModulePath(modules, directories, moduleId);
-      } catch {
-        return '';
-      }
-    },
-    [directories, modules]
-  );
-
-  return (
-    <Collapsible css={{ position: 'relative' }} defaultOpen title="Files">
-      <SidebarRow
-        css={css({
-          // these could have been inside the collapsible as "actions"
-          // but this is the only exception where we have actions in the
-          // collapsible header. Keeping them in the body, also lets us
-          // get the animation effect of open/close state on it's own
-          // If this UI pattern catches on, it would be a good refactor
-          // to add actions API to collapsible
-          position: 'absolute',
-          top: 0,
-          right: 2,
-        })}
-        justify="flex-end"
-      >
-        {editActions}
-      </SidebarRow>
-
-      <DirectoryEntry
-        depth={-1}
-        getModulePath={_getModulePath}
-        id={null}
-        initializeProperties={({
-          onCreateDirectoryClick,
-          onUploadFileClick,
-          onCreateModuleClick,
-        }) => {
-          setEditActions(
-            // @ts-ignore
-            <EditIcons
-              forceShow={window.__isTouch}
-              hovering
-              onCreateDirectory={onCreateDirectoryClick}
-              onCreateFile={onCreateModuleClick}
-              onDownload={editor.createZipClicked}
-              onUploadFile={
-                isLoggedIn && privacy === 0 ? onUploadFileClick : noop
-              }
-            />
-          );
-        }}
-        readonly={readonly}
-        root
-        shortid={null}
-        signals={{ files, editor }}
-        store={{ editor: editorState, isLoggedIn }}
-        title={title || 'Project'}
-      />
-    </Collapsible>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/index.tsx
deleted file mode 100644
index 1aa4ff102c8..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/index.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React, { FunctionComponent } from 'react';
-
-import { useAppState } from 'app/overmind';
-
-import { Dependencies } from './Dependencies';
-import { ExternalResources } from './ExternalResources';
-import { Files } from './Files';
-
-type Props = {
-  readonly?: boolean;
-};
-
-export const Explorer: FunctionComponent<Props> = ({ readonly = false }) => {
-  const {
-    currentSandbox: { template },
-  } = useAppState().editor;
-
-  return (
-    <>
-      <Files readonly={readonly} />
-
-      {template !== 'static' ? (
-        <>
-          <Dependencies readonly={readonly} />
-          <ExternalResources readonly={readonly} />
-        </>
-      ) : null}
-    </>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/Changes.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/Changes.tsx
deleted file mode 100644
index 8c869c5a550..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/Changes.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { List, ListItem, Text } from '@codesandbox/components';
-import React from 'react';
-
-import { AddedIcon, ChangedIcon, ConflictIcon, DeletedIcon } from './Icons';
-
-const getChanges = changes => changes.slice().sort();
-
-export const Changes: React.FC<{
-  added: string[];
-  deleted: string[];
-  modified: string[];
-  conflicts: string[];
-}> = ({ added, modified, deleted, conflicts }) => (
-  <List paddingBottom={6}>
-    {getChanges(added).map(change => (
-      <ListItem gap={2}>
-        {conflicts.includes(change) ? <ConflictIcon /> : <AddedIcon />}{' '}
-        <Text variant="muted">{change}</Text>
-      </ListItem>
-    ))}
-    {getChanges(modified).map(change => (
-      <ListItem gap={2}>
-        {conflicts.includes(change) ? <ConflictIcon /> : <ChangedIcon />}{' '}
-        <Text variant="muted">{change}</Text>
-      </ListItem>
-    ))}
-    {getChanges(deleted).map(change => (
-      <ListItem gap={2}>
-        {conflicts.includes(change) ? <ConflictIcon /> : <DeletedIcon />}{' '}
-        <Text variant="muted">{change}</Text>
-      </ListItem>
-    ))}
-  </List>
-);
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/CommitForm.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/CommitForm.tsx
deleted file mode 100644
index b1198d38f23..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/CommitForm.tsx
+++ /dev/null
@@ -1,202 +0,0 @@
-import {
-  Button,
-  FormField,
-  Input,
-  Radio,
-  Stack,
-  Text,
-  Textarea,
-} from '@codesandbox/components';
-import { useAppState, useActions } from 'app/overmind';
-import React, { ChangeEvent, useState } from 'react';
-
-export const CommitForm = () => {
-  const [currentAction, setCurrentAction] = useState('branch');
-  const {
-    createPrClicked,
-    createCommitClicked,
-    titleChanged,
-    descriptionChanged,
-  } = useActions().git;
-  const {
-    editor: { currentSandbox, isAllModulesSynced },
-    git: {
-      description,
-      title,
-      permission,
-      gitChanges,
-      isCommitting,
-      isCreatingPr,
-    },
-  } = useAppState();
-
-  const changeDescription = ({
-    target: { value },
-  }: ChangeEvent<HTMLTextAreaElement>) => descriptionChanged(value);
-
-  const changeTitle = ({ target: { value } }: ChangeEvent<HTMLInputElement>) =>
-    titleChanged(value);
-
-  const hasChanges = Boolean(
-    gitChanges.added.length ||
-      gitChanges.deleted.length ||
-      gitChanges.modified.length
-  );
-  const canUpdate =
-    hasChanges && isAllModulesSynced && !isCommitting && !isCreatingPr;
-
-  const evaluatedAction = permission === 'read' ? 'pr' : currentAction;
-
-  if (currentSandbox.prNumber) {
-    return (
-      <Stack
-        as="form"
-        direction="vertical"
-        gap={1}
-        onSubmit={event => event.preventDefault()}
-      >
-        <FormField direction="vertical" label="Title" hideLabel>
-          <Input
-            placeholder="Summary (required)"
-            onChange={changeTitle}
-            value={title}
-            disabled={!hasChanges || isCommitting || isCreatingPr}
-          />
-        </FormField>
-        <FormField direction="vertical" label="Description" hideLabel>
-          <Textarea
-            maxLength={280}
-            placeholder="Optional description..."
-            onChange={changeDescription}
-            value={description}
-            disabled={!hasChanges || isCommitting || isCreatingPr}
-          />
-        </FormField>
-        <Stack marginX={2}>
-          <Button
-            loading={isCommitting}
-            variant="primary"
-            disabled={!title || !canUpdate}
-            onClick={() => createCommitClicked()}
-          >
-            Commit changes
-          </Button>
-          {isAllModulesSynced ? null : <Text>- Save all files first</Text>}
-        </Stack>
-      </Stack>
-    );
-  }
-
-  const actions = {
-    branch: {
-      action: createCommitClicked,
-    },
-    pr: {
-      action: createPrClicked,
-    },
-  };
-
-  const canCommit = !isCommitting && !isCreatingPr;
-  const canCommitDirectly =
-    permission === 'write' || (permission === 'admin' && canCommit);
-
-  return (
-    <Stack
-      as="form"
-      direction="vertical"
-      gap={1}
-      onSubmit={event => event.preventDefault()}
-    >
-      <FormField direction="vertical" label="Title" hideLabel>
-        <Input
-          placeholder="Summary (required)"
-          onChange={changeTitle}
-          value={title}
-          disabled={!hasChanges || !canCommit}
-        />
-      </FormField>
-      <FormField direction="vertical" label="Description" hideLabel>
-        <Textarea
-          maxLength={280}
-          placeholder="Optional description..."
-          onChange={changeDescription}
-          value={description}
-          disabled={!hasChanges || !canCommit}
-        />
-      </FormField>
-      <Stack direction="vertical" marginX={2} gap={4}>
-        <Stack
-          align="flex-start"
-          onClick={() => canCommit && setCurrentAction('branch')}
-          css={
-            canCommitDirectly
-              ? {
-                  cursor: 'pointer',
-                  opacity: 1,
-                }
-              : {
-                  opacity: 0.5,
-                }
-          }
-        >
-          <Radio
-            checked={evaluatedAction === 'branch'}
-            disabled={!canCommitDirectly}
-            aria-label="Commit directly to the master branch"
-          />{' '}
-          <Text>
-            <Text variant="muted">Commit directly to the</Text>{' '}
-            {currentSandbox.originalGit.branch}
-            <Text variant="muted"> branch</Text>
-          </Text>
-        </Stack>
-        <Stack
-          align="flex-start"
-          onClick={() => canCommit && setCurrentAction('pr')}
-          css={
-            canCommit
-              ? {
-                  cursor: 'pointer',
-                  opacity: 1,
-                }
-              : {
-                  opacity: 0.5,
-                }
-          }
-        >
-          <Radio
-            checked={evaluatedAction === 'pr'}
-            disabled={!canCommit}
-            aria-label={`Create branch csb-${currentSandbox.id} for the commit and start a PR`}
-          />{' '}
-          <Text>
-            <Text variant="muted">Create branch</Text> csb-{currentSandbox.id}
-            <Text variant="muted"> for the commit and start a</Text> PR
-          </Text>
-        </Stack>
-        <Stack css={{ width: '100%' }} direction="vertical">
-          <Button
-            loading={isCommitting || isCreatingPr}
-            css={{
-              width: '100%',
-            }}
-            disabled={!title || !canUpdate}
-            onClick={() => actions[evaluatedAction].action()}
-          >
-            Commit changes
-          </Button>
-          {isAllModulesSynced && !title && (
-            <Text variant="danger" margin={2} align="center">
-              Please insert a summary
-            </Text>
-          )}
-          {!isAllModulesSynced && (
-            <Text variant="danger" margin={2} align="center">
-              You have unsaved files
-            </Text>
-          )}
-        </Stack>
-      </Stack>
-    </Stack>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/CreateRepo.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/CreateRepo.tsx
deleted file mode 100644
index 8715f1cd659..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/CreateRepo.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-import track from '@codesandbox/common/lib/utils/analytics';
-import {
-  Button,
-  Collapsible,
-  Element,
-  FormField,
-  Input,
-  Link,
-  Stack,
-  Text,
-} from '@codesandbox/components';
-import { useAppState, useActions } from 'app/overmind';
-import React, { ChangeEvent } from 'react';
-
-type CreateRepoProps = {
-  /**
-   * The prop overrides internals and disabled the whole section.
-   * Useful when there are no GitHub permissions but we still
-   * want to show the UI.
-   */
-  disabled?: boolean;
-};
-export const CreateRepo: React.FC<CreateRepoProps> = ({ disabled }) => {
-  const {
-    git: { createRepoClicked, repoTitleChanged },
-    modalOpened,
-  } = useActions();
-  const {
-    editor: { isAllModulesSynced, currentSandbox },
-    git: { error, repoTitle },
-  } = useAppState();
-
-  const updateRepoTitle = ({
-    target: { value: title },
-  }: ChangeEvent<HTMLInputElement>) => repoTitleChanged({ title });
-
-  const createRepo = e => {
-    e.preventDefault();
-
-    if (disabled) {
-      return;
-    }
-
-    track('Export to GitHub Clicked');
-    createRepoClicked();
-  };
-
-  const disableImport =
-    Boolean(error) || !repoTitle || !isAllModulesSynced || disabled;
-
-  return (
-    <Collapsible
-      title="Copy Sandbox as a Repository"
-      defaultOpen={!currentSandbox.originalGit && !disabled}
-    >
-      <Element
-        css={{
-          opacity: disabled ? 0.6 : 1,
-        }}
-        paddingX={2}
-      >
-        <Text variant="muted" marginBottom={2} block>
-          Export the content of this sandbox to a new GitHub repository,
-          allowing you to commit changes made on CodeSandbox to GitHub. If you
-          want to rather import an existing repository,{' '}
-          <Link
-            css={{ color: 'white' }}
-            onClick={() => modalOpened({ modal: 'import' })}
-          >
-            open the GitHub import
-          </Link>
-          .
-        </Text>
-        <Text variant="muted" marginBottom={4} block>
-          This will open the GitHub repo in the new{' '}
-          <a
-            href="https://projects.codesandbox.io?utm_source=editor"
-            rel="noreferrer"
-            target="_blank"
-          >
-            CodeSandbox (Projects) editor
-          </a>{' '}
-          which is built for GitHub repos.
-        </Text>
-        {!isAllModulesSynced && (
-          <Text marginBottom={2} block variant="danger">
-            Save your files first before exporting.
-          </Text>
-        )}
-
-        {error && (
-          <Text marginBottom={2} block variant="danger">
-            {error}
-          </Text>
-        )}
-
-        <Stack
-          marginX={0}
-          as="form"
-          direction="vertical"
-          gap={2}
-          onSubmit={createRepo}
-        >
-          <FormField label="Repository name" hideLabel>
-            <Input
-              type="text"
-              onChange={updateRepoTitle}
-              value={repoTitle}
-              placeholder="Repository name..."
-            />
-          </FormField>
-          <Element paddingX={2}>
-            <Button type="submit" disabled={disableImport} variant="secondary">
-              Create repository
-            </Button>
-          </Element>
-        </Stack>
-      </Element>
-    </Collapsible>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/GithubLogin.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/GithubLogin.tsx
deleted file mode 100644
index e0223cdc474..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/GithubLogin.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { useAppState, useActions } from 'app/overmind';
-import React from 'react';
-import {
-  Text,
-  Element,
-  Stack,
-  Button,
-  Collapsible,
-  Icon,
-} from '@codesandbox/components';
-
-export const GithubLogin = () => {
-  const { signInGithubClicked } = useActions();
-  const {
-    isLoadingGithub,
-    editor: {
-      currentSandbox: { privacy },
-    },
-  } = useAppState();
-
-  const privacyLabel = {
-    0: 'public',
-    1: 'unlisted',
-    2: 'private',
-  }[privacy];
-
-  return (
-    <Collapsible title="Adjust GitHub permissions" defaultOpen>
-      <Stack css={{ padding: '0 12px' }} direction="vertical" gap={4}>
-        <Stack
-          css={{
-            color: '#F9D685',
-          }}
-          gap={2}
-        >
-          <Element
-            css={{
-              marginTop: '2px', // Visually align with the Text
-            }}
-          >
-            <Icon name="info" size={12} />
-          </Element>
-          <Text lineHeight="16px" size={12}>
-            CodeSandbox needs access to your{' '}
-            {privacy === 0 ? 'public' : 'private'} repositories in order to link
-            and/or export {privacyLabel === 'unlisted' ? 'an' : 'a'}{' '}
-            {privacyLabel} sandbox.
-          </Text>
-        </Stack>
-        <Button
-          loading={isLoadingGithub}
-          onClick={() =>
-            signInGithubClicked(
-              privacy === 0 ? 'public_repos' : 'private_repos'
-            )
-          }
-        >
-          Review GitHub permissions
-        </Button>
-      </Stack>
-    </Collapsible>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/Icons.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/Icons.tsx
deleted file mode 100644
index 991a4abe3d1..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/Icons.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import React from 'react';
-
-export const GitHubIcon = props => (
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <path
-      d="M14.9269 4.08427C14.2115 2.82782 13.2411 1.83308 12.0155 1.09983C10.7897 0.366548 9.45149 0 7.99993 0C6.54855 0 5.20991 0.36666 3.98437 1.09983C2.75864 1.83304 1.78831 2.82782 1.07293 4.08427C0.357655 5.34069 0 6.71272 0 8.2003C0 9.98723 0.50859 11.5941 1.52602 13.0213C2.54335 14.4486 3.85758 15.4362 5.46862 15.9843C5.65615 16.02 5.79497 15.9949 5.88523 15.9096C5.97553 15.8243 6.02062 15.7174 6.02062 15.5894C6.02062 15.5681 6.01884 15.3759 6.01537 15.0128C6.01179 14.6497 6.01012 14.333 6.01012 14.0627L5.77052 14.1052C5.61776 14.1338 5.42505 14.146 5.19239 14.1426C4.95984 14.1392 4.71843 14.1142 4.46848 14.0678C4.21841 14.0218 3.98583 13.915 3.77053 13.7477C3.55535 13.5804 3.40259 13.3614 3.31229 13.0911L3.20813 12.8454C3.1387 12.6818 3.02939 12.5001 2.88006 12.3009C2.73073 12.1015 2.57973 11.9664 2.42697 11.8952L2.35403 11.8417C2.30544 11.8061 2.26034 11.7632 2.21864 11.7135C2.17698 11.6637 2.14578 11.6139 2.12495 11.564C2.10408 11.514 2.12137 11.4731 2.17701 11.441C2.23265 11.4088 2.3332 11.3932 2.4791 11.3932L2.68735 11.4251C2.82625 11.4537 2.99805 11.5389 3.20298 11.6814C3.40781 11.8237 3.57618 12.0088 3.70814 12.2364C3.86795 12.5284 4.06047 12.7508 4.28627 12.9039C4.51189 13.057 4.73937 13.1334 4.96849 13.1334C5.19761 13.1334 5.3955 13.1156 5.56223 13.0802C5.72879 13.0446 5.88505 12.991 6.03095 12.9199C6.09344 12.4428 6.26361 12.0762 6.54129 11.82C6.14551 11.7774 5.78968 11.7132 5.47361 11.6278C5.15773 11.5423 4.83131 11.4035 4.49456 11.2111C4.15763 11.019 3.87812 10.7805 3.65597 10.4959C3.43378 10.2111 3.25144 9.83726 3.10918 9.37467C2.96686 8.91189 2.89568 8.37806 2.89568 7.77302C2.89568 6.91153 3.17004 6.17843 3.71865 5.57332C3.46166 4.92564 3.48592 4.19958 3.79151 3.3952C3.9929 3.33106 4.29156 3.37919 4.68734 3.5393C5.0832 3.69948 5.37303 3.83669 5.55713 3.95046C5.74123 4.06419 5.88873 4.16057 5.99986 4.23873C6.64582 4.05372 7.31242 3.96119 7.99985 3.96119C8.68729 3.96119 9.35404 4.05372 10 4.23873L10.3958 3.98259C10.6665 3.81167 10.9862 3.65505 11.354 3.51267C11.722 3.37036 12.0035 3.33117 12.198 3.39531C12.5104 4.19973 12.5382 4.92575 12.2812 5.57343C12.8297 6.17855 13.1042 6.91183 13.1042 7.77313C13.1042 8.37817 13.0328 8.91369 12.8907 9.38002C12.7484 9.84642 12.5645 10.2199 12.3388 10.5012C12.113 10.7825 11.8317 11.0192 11.4949 11.2113C11.1581 11.4035 10.8316 11.5422 10.5157 11.6277C10.1997 11.7132 9.84384 11.7775 9.44806 11.8202C9.80903 12.1404 9.98956 12.6458 9.98956 13.3363V15.5891C9.98956 15.7171 10.033 15.8239 10.1199 15.9093C10.2067 15.9946 10.3437 16.0197 10.5313 15.9839C12.1425 15.4359 13.4568 14.4483 14.474 13.021C15.4912 11.5938 16 9.98693 16 8.2C15.9996 6.7126 15.6418 5.34069 14.9269 4.08427Z"
-      fill="currentColor"
-    />
-  </svg>
-);
-
-export const AddedIcon = () => (
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M2 1H14C14.5523 1 15 1.44772 15 2V14C15 14.5523 14.5523 15 14 15H2C1.44772 15 1 14.5523 1 14V2C1 1.44772 1.44772 1 2 1ZM0 2C0 0.895431 0.895431 0 2 0H14C15.1046 0 16 0.895431 16 2V14C16 15.1046 15.1046 16 14 16H2C0.895431 16 0 15.1046 0 14V2ZM9 12H7V9H4V7H7V4H9V7H12V9H9V12Z"
-      fill="#30D158"
-    />
-  </svg>
-);
-
-export const DeletedIcon = () => (
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M2 1H14C14.5523 1 15 1.44772 15 2V14C15 14.5523 14.5523 15 14 15H2C1.44772 15 1 14.5523 1 14V2C1 1.44772 1.44772 1 2 1ZM0 2C0 0.895431 0.895431 0 2 0H14C15.1046 0 16 0.895431 16 2V14C16 15.1046 15.1046 16 14 16H2C0.895431 16 0 15.1046 0 14V2ZM12 7H4V9H12V7Z"
-      fill="#FF453A"
-    />
-  </svg>
-);
-
-export const ChangedIcon = () => (
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M2 1H14C14.5523 1 15 1.44772 15 2V14C15 14.5523 14.5523 15 14 15H2C1.44772 15 1 14.5523 1 14V2C1 1.44772 1.44772 1 2 1ZM0 2C0 0.895431 0.895431 0 2 0H14C15.1046 0 16 0.895431 16 2V14C16 15.1046 15.1046 16 14 16H2C0.895431 16 0 15.1046 0 14V2ZM8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10Z"
-      fill="#F69935"
-    />
-  </svg>
-);
-
-export const ConflictIcon = () => (
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M2 1H14C14.5523 1 15 1.44772 15 2V14C15 14.5523 14.5523 15 14 15H2C1.44772 15 1 14.5523 1 14V2C1 1.44772 1.44772 1 2 1ZM0 2C0 0.895431 0.895431 0 2 0H14C15.1046 0 16 0.895431 16 2V14C16 15.1046 15.1046 16 14 16H2C0.895431 16 0 15.1046 0 14V2ZM8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10Z"
-      fill="purple"
-    />
-  </svg>
-);
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/LinkSandbox.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/LinkSandbox.tsx
deleted file mode 100644
index 9b59bcd161a..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/LinkSandbox.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import React from 'react';
-import { ForkedSandbox } from '@codesandbox/common/lib/types';
-import { Button, Collapsible, Element, Text } from '@codesandbox/components';
-import { useActions, useAppState } from 'app/overmind';
-
-type LinkSandboxProps = {
-  disabled?: boolean;
-  upstreamSandbox: ForkedSandbox;
-};
-export const LinkSandbox: React.FC<LinkSandboxProps> = ({
-  disabled,
-  upstreamSandbox,
-}) => {
-  const {
-    git: { linkToGitSandbox },
-  } = useActions();
-  const {
-    git: { isLinkingToGitSandbox },
-    editor: { currentSandbox },
-  } = useAppState();
-
-  return (
-    <Collapsible title="Link to GitHub repository" defaultOpen={!disabled}>
-      <Element
-        css={{
-          opacity: disabled ? 0.6 : 1,
-        }}
-        paddingX={2}
-      >
-        <Text variant="muted">If you wish to contribute back to</Text>{' '}
-        {upstreamSandbox.git.username}/{upstreamSandbox.git.repo}
-        <Text variant="muted">
-          , you can link this sandbox to the GitHub repository. This will allow
-          you to create commits and open pull requests with this sandbox.
-        </Text>
-        <Button
-          disabled={disabled}
-          marginTop={4}
-          onClick={() => {
-            if (disabled) {
-              return;
-            }
-
-            linkToGitSandbox(currentSandbox.id);
-          }}
-          loading={isLinkingToGitSandbox}
-        >
-          Link Sandbox
-        </Button>
-      </Element>
-    </Collapsible>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/NotLoggedIn.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/NotLoggedIn.tsx
deleted file mode 100644
index 6302862c13d..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/NotLoggedIn.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react';
-
-import {
-  Element,
-  Collapsible,
-  Stack,
-  Text,
-  Button,
-} from '@codesandbox/components';
-import { useActions } from 'app/overmind';
-
-export const NotLoggedIn = () => {
-  const { toggleSignInModal } = useActions();
-
-  return (
-    <Collapsible title="GitHub" defaultOpen>
-      <Element paddingX={2}>
-        <Stack direction="vertical" gap={2} marginBottom={6}>
-          <Text size={2} variant="muted" block>
-            You need to be signed in to export this sandbox to GitHub and make
-            commits and pull requests to it.
-          </Text>
-        </Stack>
-        <Button variant="primary" onClick={() => toggleSignInModal()}>
-          Sign in
-        </Button>
-      </Element>
-    </Collapsible>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/NotOwner.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/NotOwner.tsx
deleted file mode 100644
index 84a868d846e..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/NotOwner.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import {
-  Button,
-  Collapsible,
-  Element,
-  Stack,
-  Text,
-} from '@codesandbox/components';
-import { useAppState, useActions } from 'app/overmind';
-import React from 'react';
-
-export const NotOwner = () => {
-  const { isForkingSandbox } = useAppState().editor;
-  const { forkSandboxClicked } = useActions().editor;
-
-  return (
-    <Collapsible title="GitHub" defaultOpen>
-      <Element paddingX={2}>
-        <Stack direction="vertical" gap={2} marginBottom={6}>
-          <Text size={2} variant="muted" block>
-            You need to own this sandbox to export this sandbox to GitHub and
-            make commits and pull requests to it.
-          </Text>
-          <Text size={2} variant="muted" block>
-            Make a fork to own the sandbox.
-          </Text>
-        </Stack>
-        <Button
-          variant="primary"
-          disabled={isForkingSandbox}
-          onClick={() => forkSandboxClicked({})}
-        >
-          {isForkingSandbox ? 'Forking Sandbox...' : 'Fork Sandbox'}
-        </Button>
-      </Element>
-    </Collapsible>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/components/ClosedPr.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/components/ClosedPr.tsx
deleted file mode 100644
index 2a7b63c2988..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/components/ClosedPr.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import {
-  Button,
-  Collapsible,
-  Element,
-  Stack,
-  Text,
-} from '@codesandbox/components';
-import { useActions } from 'app/overmind';
-import React from 'react';
-
-export const ClosedPr: React.FC = () => {
-  const { openSourceSandbox } = useActions().git;
-  return (
-    <Collapsible title="GitHub" defaultOpen>
-      <Element paddingX={2}>
-        <Stack direction="vertical">
-          <Text size={3} paddingBottom={4}>
-            <Text variant="muted">This </Text> PR
-            <Text variant="muted">
-              {' '}
-              has been closed. To create new changes, go back to the GitHub
-              sandbox and create a new fork.{' '}
-            </Text>
-          </Text>
-          <Button onClick={openSourceSandbox}>Open GitHub Sandbox</Button>
-        </Stack>
-      </Element>
-    </Collapsible>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/components/CommitText.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/components/CommitText.tsx
deleted file mode 100644
index 2adc08cb092..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/components/CommitText.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { Button, Stack, Text } from '@codesandbox/components';
-import { useAppState, useEffects } from 'app/overmind';
-import React from 'react';
-
-export const NoPermissions = () => {
-  const { originalGit } = useAppState().editor.currentSandbox;
-
-  return (
-    <Text size={3} paddingBottom={4}>
-      <Text variant="muted">You do not have access to commit directly to </Text>
-      {originalGit.branch}
-      <Text variant="muted">, please create a </Text>PR{' '}
-      <Text variant="muted">after you have made your changes</Text>
-    </Text>
-  );
-};
-
-export const CommitToMaster = () => {
-  const { originalGit } = useAppState().editor.currentSandbox;
-
-  return (
-    <Text size={3} paddingBottom={4}>
-      <Text variant="muted">
-        You have access to commit changes directly to{' '}
-      </Text>
-      {originalGit.branch}
-      <Text variant="muted">, but you can also choose to create a </Text>PR
-    </Text>
-  );
-};
-
-export const CommitToPr = () => {
-  const { openWindow } = useEffects().browser;
-  const {
-    originalGit,
-    baseGit,
-    prNumber,
-  } = useAppState().editor.currentSandbox;
-
-  return (
-    <Stack direction="vertical">
-      <Text size={3} paddingBottom={4}>
-        <Text variant="muted">This</Text> PR{' '}
-        <Text variant="muted">is pointing to the branch </Text>
-        {originalGit.branch}
-        <Text variant="muted">, any updates will be committed there.</Text>
-      </Text>
-      <Button
-        variant="secondary"
-        onClick={() => {
-          openWindow(
-            `https://github.com/${baseGit.username}/${baseGit.repo}/pull/${prNumber}`
-          );
-        }}
-      >
-        Open PR
-      </Button>
-    </Stack>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/components/ConflictButtons.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/components/ConflictButtons.tsx
deleted file mode 100644
index 8349fd1c0c5..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/components/ConflictButtons.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import React from 'react';
-import { Button } from '@codesandbox/components';
-import css from '@styled-system/css';
-import { useAppState, useActions } from 'app/overmind';
-
-export const SandboxDeletedConflict = ({ conflict }) => {
-  const { addConflictedFile, deleteConflictedFile } = useActions().git;
-  const { conflictsResolving } = useAppState().git;
-  return (
-    <>
-      <Button
-        css={css({ width: 'auto' })}
-        type="button"
-        variant="secondary"
-        disabled={conflictsResolving.includes(conflict.filename)}
-        onClick={() => {
-          addConflictedFile(conflict);
-        }}
-      >
-        Add file
-      </Button>
-      <Button
-        css={css({ width: 'auto' })}
-        variant="secondary"
-        type="button"
-        disabled={conflictsResolving.includes(conflict.filename)}
-        onClick={() => deleteConflictedFile(conflict)}
-      >
-        Delete file
-      </Button>
-    </>
-  );
-};
-
-export const SandboxModifiedConflict = ({ conflict }) => {
-  const { diffConflictedFile } = useActions().git;
-  return (
-    <Button
-      css={css({ width: 'auto' })}
-      type="button"
-      variant="secondary"
-      onClick={() => diffConflictedFile(conflict)}
-    >
-      Resolve by diff
-    </Button>
-  );
-};
-
-export const SandboxDeletedSourceModifiedConflict = ({ conflict }) => {
-  const { ignoreConflict, addConflictedFile } = useActions().git;
-  const { conflictsResolving } = useAppState().git;
-
-  return (
-    <>
-      <Button
-        css={css({ width: 'auto' })}
-        type="button"
-        variant="secondary"
-        disabled={conflictsResolving.includes(conflict.filename)}
-        onClick={() => addConflictedFile(conflict)}
-      >
-        Add file
-      </Button>
-      <Button
-        css={css({ width: 'auto' })}
-        variant="secondary"
-        type="button"
-        disabled={conflictsResolving.includes(conflict.filename)}
-        onClick={() => ignoreConflict(conflict)}
-      >
-        Delete file
-      </Button>
-    </>
-  );
-};
-
-export const BothModifiedConflict = ({ conflict }) => {
-  const { diffConflictedFile } = useActions().git;
-  return (
-    <Button
-      css={css({ width: 'auto' })}
-      type="button"
-      variant="secondary"
-      onClick={() => diffConflictedFile(conflict)}
-    >
-      Resolve by diff
-    </Button>
-  );
-};
-
-export const SourceDeletedConflict = ({ conflict }) => {
-  const { conflictsResolving } = useAppState().git;
-  const { ignoreConflict, deleteConflictedFile } = useActions().git;
-  return (
-    <>
-      <Button
-        css={css({ width: 'auto' })}
-        type="button"
-        variant="secondary"
-        disabled={conflictsResolving.includes(conflict.filename)}
-        onClick={() => {
-          ignoreConflict(conflict);
-        }}
-      >
-        Keep file
-      </Button>
-      <Button
-        css={css({ width: 'auto' })}
-        variant="secondary"
-        type="button"
-        disabled={conflictsResolving.includes(conflict.filename)}
-        onClick={() => deleteConflictedFile(conflict)}
-      >
-        Delete file
-      </Button>
-    </>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/components/ConflictPRBase.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/components/ConflictPRBase.tsx
deleted file mode 100644
index 78e5cee0fa6..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/components/ConflictPRBase.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { Button, Stack, Text } from '@codesandbox/components';
-import { useEffects } from 'app/overmind';
-import React from 'react';
-
-export const ConflictsPRBase = ({
-  originalGit,
-  baseGit,
-  originalGitCommitSha,
-}) => {
-  const { openWindow } = useEffects().browser;
-  return (
-    <Stack direction="vertical" style={{ lineHeight: '19px' }}>
-      <Text size={3} paddingBottom={4}>
-        <Text variant="muted">You are in conflict with changes made on </Text>
-        {baseGit.branch}
-        <Text variant="muted">
-          , please resolve the conflicts and update the{' '}
-        </Text>{' '}
-        PR
-      </Text>
-      <Button
-        variant="secondary"
-        onClick={() => {
-          openWindow(
-            `https://github.com/${originalGit.username}/${originalGit.repo}/compare/${originalGitCommitSha}...${baseGit.branch}`
-          );
-        }}
-      >
-        View Changes on GitHub
-      </Button>
-    </Stack>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/components/ConflictText.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/components/ConflictText.tsx
deleted file mode 100644
index 5ea2e272dbe..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/components/ConflictText.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import { Button, Stack, Text } from '@codesandbox/components';
-import { useAppState, useActions, useEffects } from 'app/overmind';
-import React from 'react';
-
-export const OutOfSync: React.FC = () => {
-  const {
-    git: { isResolving },
-    editor: {
-      currentSandbox: { originalGit, originalGitCommitSha, prNumber },
-    },
-  } = useAppState();
-  const { resolveOutOfSync } = useActions().git;
-  const effects = useEffects();
-
-  return (
-    <Stack direction="vertical">
-      <Text size={3} paddingBottom={4} style={{ lineHeight: '19px' }}>
-        <Text variant="muted">You are out of sync with changes in </Text>
-        {prNumber ? 'PR' : originalGit.branch}
-        <Text variant="muted">
-          , though you can safely just update the sandbox
-        </Text>
-      </Text>
-      <Button
-        loading={isResolving}
-        onClick={() => {
-          resolveOutOfSync();
-        }}
-      >
-        Update sandbox from {prNumber ? 'PR' : originalGit.branch}
-      </Button>
-      <Button
-        marginTop={4}
-        variant="secondary"
-        onClick={() => {
-          effects.browser.openWindow(
-            `https://github.com/${originalGit.username}/${originalGit.repo}/compare/${originalGitCommitSha}...${originalGit.branch}`
-          );
-        }}
-      >
-        View Changes on GitHub
-      </Button>
-    </Stack>
-  );
-};
-
-export const OutOfSyncPR: React.FC = () => {
-  const {
-    git: { isResolving },
-    editor: {
-      currentSandbox: { originalGit, baseGit, originalGitCommitSha },
-    },
-  } = useAppState();
-  const { resolveOutOfSync } = useActions().git;
-  const effects = useEffects();
-
-  return (
-    <Stack direction="vertical">
-      <Text size={3} paddingBottom={4} style={{ lineHeight: '19px' }}>
-        <Text variant="muted">You are out of sync with changes on </Text>
-        {baseGit.branch}
-        <Text variant="muted">
-          , though you can safely just update the sandbox
-        </Text>
-      </Text>
-      <Button
-        loading={isResolving}
-        onClick={() => {
-          resolveOutOfSync();
-        }}
-      >
-        Update sandbox from {baseGit.branch}
-      </Button>
-      <Button
-        marginTop={4}
-        variant="secondary"
-        onClick={() => {
-          effects.browser.openWindow(
-            `https://github.com/${originalGit.username}/${originalGit.repo}/compare/${originalGitCommitSha}...${baseGit.branch}`
-          );
-        }}
-      >
-        View Changes on GitHub
-      </Button>
-    </Stack>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/components/ConflictsSource.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/components/ConflictsSource.tsx
deleted file mode 100644
index 5c42c8d7170..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/components/ConflictsSource.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { Button, Stack, Text } from '@codesandbox/components';
-import { useEffects } from 'app/overmind';
-import React from 'react';
-
-export const ConflictsSource = ({
-  originalGit,
-  baseGit,
-  prNumber,
-  originalGitCommitSha,
-}) => {
-  const { openWindow } = useEffects().browser;
-  return (
-    <Stack direction="vertical">
-      <Text size={3} paddingBottom={4} style={{ lineHeight: '19px' }}>
-        <Text variant="muted">You are in conflict with changes on </Text>
-        {prNumber ? 'PR' : originalGit.branch}
-        <Text variant="muted">
-          , please resolve the conflicts and commit your changes
-        </Text>
-      </Text>
-      <Button
-        variant="secondary"
-        onClick={() => {
-          openWindow(
-            `https://github.com/${originalGit.username}/${originalGit.repo}/compare/${originalGitCommitSha}...${originalGit.branch}`
-          );
-        }}
-      >
-        View Changes on GitHub
-      </Button>
-    </Stack>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/components/Loading.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/components/Loading.tsx
deleted file mode 100644
index 33087476889..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/components/Loading.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Collapsible, List, ListItem } from '@codesandbox/components';
-import React from 'react';
-
-import { SkeletonTextBlock } from '../../../../Skeleton/elements';
-
-export const Loading = () => (
-  <Collapsible title="GitHub Repository" defaultOpen>
-    <List css={{ marginBottom: '32px' }}>
-      <ListItem justify="space-between">
-        <SkeletonTextBlock />
-      </ListItem>
-      <ListItem justify="space-between">
-        <SkeletonTextBlock />
-      </ListItem>
-      <ListItem justify="space-between">
-        <SkeletonTextBlock />
-      </ListItem>
-    </List>
-  </Collapsible>
-);
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/components/MergedPr.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/components/MergedPr.tsx
deleted file mode 100644
index 9486ba237d4..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/components/MergedPr.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import {
-  Button,
-  Collapsible,
-  Element,
-  Stack,
-  Text,
-} from '@codesandbox/components';
-import { useActions } from 'app/overmind';
-import React from 'react';
-
-export const MergedPr: React.FC = () => {
-  const { openSourceSandbox } = useActions().git;
-  return (
-    <Collapsible title="GitHub" defaultOpen>
-      <Element paddingX={2}>
-        <Stack direction="vertical">
-          <Text size={3} paddingBottom={4}>
-            <Text variant="muted">This </Text> PR
-            <Text variant="muted">
-              {' '}
-              has been successfully merged. To create new changes, go back to
-              the GitHub sandbox and create a new fork.{' '}
-            </Text>
-          </Text>
-          <Button onClick={() => openSourceSandbox()}>
-            Open GitHub Sandbox
-          </Button>
-        </Stack>
-      </Element>
-    </Collapsible>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/index.tsx
deleted file mode 100644
index bd3e2e0f6db..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/index.tsx
+++ /dev/null
@@ -1,260 +0,0 @@
-import { GitFileCompare, SandboxGitState } from '@codesandbox/common/lib/types';
-import { githubRepoUrl } from '@codesandbox/common/lib/utils/url-generator';
-import {
-  Collapsible,
-  Element,
-  Link,
-  List,
-  ListItem,
-  Stack,
-  Text,
-} from '@codesandbox/components';
-import { useGitHubPermissions } from 'app/hooks/useGitHubPermissions';
-import { useAppState } from 'app/overmind';
-import React from 'react';
-
-import { Changes } from './Changes';
-import { CommitForm } from './CommitForm';
-import { ClosedPr } from './components/ClosedPr';
-import {
-  CommitToMaster,
-  CommitToPr,
-  NoPermissions,
-} from './components/CommitText';
-import {
-  BothModifiedConflict,
-  SandboxDeletedConflict,
-  SandboxDeletedSourceModifiedConflict,
-  SandboxModifiedConflict,
-  SourceDeletedConflict,
-} from './components/ConflictButtons';
-import { ConflictsPRBase } from './components/ConflictPRBase';
-import { ConflictsSource } from './components/ConflictsSource';
-import { OutOfSync, OutOfSyncPR } from './components/ConflictText';
-import { Loading } from './components/Loading';
-import { MergedPr } from './components/MergedPr';
-import { CreateRepo } from './CreateRepo';
-import { GithubLogin } from './GithubLogin';
-import { GitHubIcon } from './Icons';
-import { NotLoggedIn } from './NotLoggedIn';
-import { NotOwner } from './NotOwner';
-import { ConflictType } from './types';
-import { getConflictIcon } from './utils/getConflictIcon';
-import { getConflictText } from './utils/getConflictsText';
-import { getConflictType } from './utils/getConflictType';
-import { LinkSandbox } from './LinkSandbox';
-
-export const GitHub = () => {
-  const {
-    git: {
-      gitChanges,
-      gitState,
-      conflicts,
-      permission,
-      isFetching,
-      isExported,
-      pr,
-    },
-    editor: {
-      currentSandbox: {
-        originalGit,
-        baseGit,
-        owned,
-        originalGitCommitSha,
-        prNumber,
-        forkedTemplateSandbox,
-        forkedFromSandbox,
-        privacy,
-      },
-      modulesByPath,
-    },
-    isLoggedIn,
-  } = useAppState();
-  const {
-    restrictsPublicRepos,
-    restrictsPrivateRepos,
-  } = useGitHubPermissions();
-
-  const changeCount = gitChanges
-    ? gitChanges.added.length +
-      gitChanges.modified.length +
-      gitChanges.deleted.length
-    : 0;
-
-  const conflictPaths = conflicts.map(conflict => '/' + conflict.filename);
-
-  if (!isLoggedIn) return <NotLoggedIn />;
-  if (!owned) return <NotOwner />;
-  if (isFetching || isExported) return <Loading />;
-  if (pr && pr.merged) return <MergedPr />;
-  if (pr && pr.state === 'closed') return <ClosedPr />;
-
-  function getConflictButtons(conflict: GitFileCompare) {
-    const conflictType = getConflictType(conflict, modulesByPath);
-
-    if (conflictType === ConflictType.SOURCE_ADDED_SANDBOX_DELETED) {
-      return <SandboxDeletedConflict conflict={conflict} />;
-    }
-    if (conflictType === ConflictType.SOURCE_ADDED_SANDBOX_MODIFIED) {
-      return <SandboxModifiedConflict conflict={conflict} />;
-    }
-    if (conflictType === ConflictType.SOURCE_DELETED_SANDBOX_MODIFIED) {
-      return <SourceDeletedConflict conflict={conflict} />;
-    }
-    if (conflictType === ConflictType.SOURCE_MODIFIED_SANDBOX_MODIFIED) {
-      return <BothModifiedConflict conflict={conflict} />;
-    }
-    if (conflictType === ConflictType.SOURCE_MODIFIED_SANDBOX_DELETED) {
-      return <SandboxDeletedSourceModifiedConflict conflict={conflict} />;
-    }
-
-    return null;
-  }
-
-  function getText() {
-    if (gitState === SandboxGitState.OUT_OF_SYNC_SOURCE) {
-      return <OutOfSync />;
-    }
-
-    if (gitState === SandboxGitState.OUT_OF_SYNC_PR_BASE) {
-      return <OutOfSyncPR />;
-    }
-
-    if (conflicts.length && gitState === SandboxGitState.CONFLICT_SOURCE) {
-      return (
-        <ConflictsSource
-          prNumber={prNumber}
-          baseGit={baseGit}
-          originalGit={originalGit}
-          originalGitCommitSha={originalGitCommitSha}
-        />
-      );
-    }
-    if (conflicts.length && gitState === SandboxGitState.CONFLICT_PR_BASE) {
-      return (
-        <ConflictsPRBase
-          baseGit={baseGit}
-          originalGit={originalGit}
-          originalGitCommitSha={originalGitCommitSha}
-        />
-      );
-    }
-    if (!prNumber && (permission === 'admin' || permission === 'write')) {
-      return <CommitToMaster />;
-    }
-
-    if (prNumber) {
-      return <CommitToPr />;
-    }
-
-    return <NoPermissions />;
-  }
-
-  function getContent() {
-    if (conflicts.length) {
-      return (
-        <Collapsible title={`Conflicts (${conflictPaths.length})`} defaultOpen>
-          <Element>
-            <Stack direction="vertical">
-              <List paddingBottom={6}>
-                {conflicts.map(conflict => (
-                  <ListItem
-                    gap={2}
-                    key={conflict.filename}
-                    marginBottom={4}
-                    css={{ display: 'block' }}
-                  >
-                    <Stack gap={3} align="center" marginBottom={4}>
-                      {getConflictIcon(conflict, modulesByPath)}
-                      <Text variant="muted">{conflict.filename}</Text>
-                    </Stack>
-                    <Text paddingBottom={4} size={3} block>
-                      {getConflictText(
-                        gitState === SandboxGitState.CONFLICT_PR_BASE
-                          ? baseGit.branch
-                          : originalGit.branch,
-                        conflict,
-                        modulesByPath
-                      )}
-                    </Text>
-                    {getConflictButtons(conflict)}
-                  </ListItem>
-                ))}
-              </List>
-            </Stack>
-          </Element>
-        </Collapsible>
-      );
-    }
-
-    if (
-      conflictPaths.length ||
-      gitChanges.added.length ||
-      gitChanges.deleted.length ||
-      gitChanges.modified.length
-    ) {
-      return (
-        <Collapsible title={`Changes (${changeCount})`} defaultOpen>
-          <Element>
-            <Changes conflicts={conflictPaths} {...gitChanges} />
-            <CommitForm />
-          </Element>
-        </Collapsible>
-      );
-    }
-
-    return (
-      <Collapsible title={`Changes (${changeCount})`} defaultOpen>
-        <Stack align="center" justify="center" padding={3}>
-          <Text size={4}>No changes</Text>
-        </Stack>
-      </Collapsible>
-    );
-  }
-
-  // If there's a forkedFromSandbox we use that, otherwise we use the forkedTemplateSandbox
-  const upstreamSandbox = forkedFromSandbox || forkedTemplateSandbox;
-
-  const showGitHubLogin =
-    (privacy === 0 && restrictsPublicRepos) ||
-    (privacy !== 0 && restrictsPrivateRepos);
-
-  return (
-    <>
-      {showGitHubLogin && <GithubLogin />}
-
-      {originalGit ? (
-        <>
-          <Collapsible title="GitHub repository" defaultOpen={!showGitHubLogin}>
-            <Element paddingX={2}>
-              <Link
-                target="_blank"
-                rel="noopener noreferrer"
-                href={githubRepoUrl(originalGit)}
-              >
-                <Stack gap={2} marginBottom={6} align="center">
-                  <GitHubIcon width={20} />
-                  <Text size={2}>
-                    {originalGit.username}/{originalGit.repo}
-                  </Text>
-                </Stack>
-              </Link>
-              {getText()}
-            </Element>
-          </Collapsible>
-          {getContent()}
-        </>
-      ) : null}
-
-      {!originalGit && upstreamSandbox?.git ? (
-        <LinkSandbox
-          disabled={showGitHubLogin}
-          upstreamSandbox={upstreamSandbox}
-        />
-      ) : null}
-
-      {/* Always show create repo */}
-      <CreateRepo disabled={showGitHubLogin} />
-    </>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/types.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/types.ts
deleted file mode 100644
index 124fd1ddcfc..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/types.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export enum ConflictType {
-  SOURCE_ADDED_SANDBOX_DELETED,
-  SOURCE_ADDED_SANDBOX_MODIFIED,
-  SOURCE_DELETED_SANDBOX_MODIFIED,
-  SOURCE_MODIFIED_SANDBOX_MODIFIED,
-  SOURCE_MODIFIED_SANDBOX_DELETED,
-  UNKNOWN,
-}
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/utils/getConflictIcon.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/utils/getConflictIcon.tsx
deleted file mode 100644
index 237f945dfe9..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/utils/getConflictIcon.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { GitFileCompare } from '@codesandbox/common/lib/types';
-import React from 'react';
-
-import { AddedIcon, ChangedIcon, DeletedIcon } from '../Icons';
-import { ConflictType } from '../types';
-import { getConflictType } from './getConflictType';
-
-export function getConflictIcon(conflict: GitFileCompare, modulesByPath: any) {
-  const conflictType = getConflictType(conflict, modulesByPath);
-
-  if (
-    conflictType === ConflictType.SOURCE_ADDED_SANDBOX_MODIFIED ||
-    conflictType === ConflictType.SOURCE_ADDED_SANDBOX_DELETED
-  ) {
-    return <AddedIcon />;
-  }
-
-  if (
-    conflictType === ConflictType.SOURCE_MODIFIED_SANDBOX_DELETED ||
-    conflictType === ConflictType.SOURCE_MODIFIED_SANDBOX_MODIFIED
-  ) {
-    return <ChangedIcon />;
-  }
-
-  if (conflictType === ConflictType.SOURCE_DELETED_SANDBOX_MODIFIED) {
-    return <DeletedIcon />;
-  }
-
-  return 'No idea what happened here?';
-}
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/utils/getConflictType.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/utils/getConflictType.ts
deleted file mode 100644
index ff015014c43..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/utils/getConflictType.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { GitFileCompare } from '@codesandbox/common/lib/types';
-
-import { ConflictType } from '../types';
-
-export function getConflictType(
-  conflict: GitFileCompare,
-  modulesByPath: { [path: string]: any }
-) {
-  if (conflict.status === 'added' && !modulesByPath['/' + conflict.filename]) {
-    return ConflictType.SOURCE_ADDED_SANDBOX_DELETED;
-  }
-  if (conflict.status === 'added' && modulesByPath['/' + conflict.filename]) {
-    return ConflictType.SOURCE_ADDED_SANDBOX_MODIFIED;
-  }
-  if (conflict.status === 'removed' && modulesByPath['/' + conflict.filename]) {
-    return ConflictType.SOURCE_DELETED_SANDBOX_MODIFIED;
-  }
-  if (
-    conflict.status === 'modified' &&
-    modulesByPath['/' + conflict.filename]
-  ) {
-    return ConflictType.SOURCE_MODIFIED_SANDBOX_MODIFIED;
-  }
-  if (
-    conflict.status === 'modified' &&
-    !modulesByPath['/' + conflict.filename]
-  ) {
-    return ConflictType.SOURCE_MODIFIED_SANDBOX_DELETED;
-  }
-
-  return ConflictType.UNKNOWN;
-}
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/utils/getConflictsText.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/utils/getConflictsText.tsx
deleted file mode 100644
index fa681f726cf..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/utils/getConflictsText.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { GitFileCompare } from '@codesandbox/common/lib/types';
-import { Text } from '@codesandbox/components';
-import React from 'react';
-
-import { ConflictType } from '../types';
-import { getConflictType } from './getConflictType';
-
-export function getConflictText(
-  branch: string,
-  conflict: GitFileCompare,
-  modulesByPath: any
-) {
-  const conflictType = getConflictType(conflict, modulesByPath);
-
-  if (conflictType === ConflictType.SOURCE_ADDED_SANDBOX_DELETED) {
-    return (
-      <Text>
-        <Text weight="bold">{branch}</Text> added this file, but it does not
-        exist in this sandbox
-      </Text>
-    );
-  }
-  if (conflictType === ConflictType.SOURCE_ADDED_SANDBOX_MODIFIED) {
-    return (
-      <Text>
-        <Text weight="bold">{branch}</Text> added this file, but you modified it
-      </Text>
-    );
-  }
-  if (conflictType === ConflictType.SOURCE_DELETED_SANDBOX_MODIFIED) {
-    return (
-      <Text>
-        <Text weight="bold">{branch}</Text> deleted this file, but you modified
-        it
-      </Text>
-    );
-  }
-  if (conflictType === ConflictType.SOURCE_MODIFIED_SANDBOX_MODIFIED) {
-    return (
-      <Text>
-        <Text weight="bold">{branch}</Text> modified this file and you did as
-        well
-      </Text>
-    );
-  }
-  if (conflictType === ConflictType.SOURCE_MODIFIED_SANDBOX_DELETED) {
-    return (
-      <Text>
-        <Text weight="bold">{branch}</Text> modified this file, but you deleted
-        it
-      </Text>
-    );
-  }
-
-  return 'No idea what happened here?';
-}
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Live/LiveNow/Timer.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Live/LiveNow/Timer.tsx
deleted file mode 100644
index ec8f01837aa..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Live/LiveNow/Timer.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { Text } from '@codesandbox/components';
-import React, { FunctionComponent, useState } from 'react';
-import useInterval from 'use-interval';
-import { useAppState } from 'app/overmind';
-
-const pad = (number: number) => {
-  if (`${number}`.length === 1) {
-    return `0${number}`;
-  }
-
-  return `${number}`;
-};
-
-export const Timer: FunctionComponent = () => {
-  const {
-    roomInfo: { startTime },
-  } = useAppState().live;
-  const [since, setSince] = useState(Date.now() - startTime);
-
-  useInterval(() => {
-    setSince(Date.now() - startTime);
-  }, 1000);
-
-  const hours = Math.floor(since / 1000 / 60 / 60);
-  const minutes = Math.floor((since - hours * 1000 * 60 * 60) / 1000 / 60);
-  const seconds = Math.floor(
-    (since - hours * 1000 * 60 * 60 - minutes * 1000 * 60) / 1000
-  );
-
-  const text = `${hours > 0 ? pad(hours) + ':' : ''}${pad(minutes)}:${pad(
-    seconds
-  )}`;
-
-  return <Text variant="danger">{text}</Text>;
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Live/LiveNow/User.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Live/LiveNow/User.tsx
deleted file mode 100644
index 400d3bc06e8..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Live/LiveNow/User.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import Tooltip from '@codesandbox/common/lib/components/Tooltip';
-import { LiveUser } from '@codesandbox/common/lib/types';
-import { Avatar, Stack, Text } from '@codesandbox/components';
-import React, { FunctionComponent } from 'react';
-
-import { useAppState, useActions } from 'app/overmind';
-
-import { AddIcon, FollowIcon, RemoveIcon, UnfollowIcon } from '../icons';
-
-type Props = {
-  liveRole: 'editor' | 'owner' | 'spectator';
-  user: LiveUser;
-};
-export const User: FunctionComponent<Props> = ({ liveRole, user }) => {
-  const {
-    onAddEditorClicked,
-    onFollow,
-    onStopFollow,
-    onRemoveEditorClicked,
-  } = useActions().live;
-  const {
-    followingUserId,
-    isOwner,
-    liveUserId,
-    roomInfo: { mode },
-  } = useAppState().live;
-
-  const loggedInUser = user.id === liveUserId;
-
-  // only owners can change editors
-  // and only in classroom mode, in open mode, everyone is an editor
-  const canChangeEditors = isOwner && mode === 'classroom';
-
-  // you can't follow spectators (nothing to follow)
-  // and you can't follow yourself
-  const canFollowUser = !(liveRole === 'spectator' || loggedInUser);
-
-  const Tooltips = () => {
-    if (liveRole === 'spectator') {
-      return (
-        <Tooltip content="Make editor">
-          <AddIcon
-            css={{ cursor: 'pointer' }}
-            onClick={() => onAddEditorClicked(user.id)}
-          />
-        </Tooltip>
-      );
-    }
-
-    if (liveRole === 'editor') {
-      return (
-        <Tooltip content="Make spectator">
-          <RemoveIcon
-            css={{ cursor: 'pointer' }}
-            onClick={() => onRemoveEditorClicked(user.id)}
-          />
-        </Tooltip>
-      );
-    }
-
-    return null;
-  };
-
-  return (
-    <Stack
-      align="center"
-      css={{
-        '.live-actions': { opacity: 0 },
-        ':hover': { '.live-actions': { opacity: 1 } },
-      }}
-      justify="space-between"
-    >
-      <Stack align="center" gap={2}>
-        <Avatar
-          css={{ img: { borderColor: `rgb(${user.color.join(',')})` } }}
-          user={user}
-        />
-
-        <span>
-          <Text block size={2}>
-            {user.username}
-          </Text>
-
-          <Text block size={2} variant="muted">
-            {liveRole === 'owner' ? 'Owner ' : null}
-
-            {loggedInUser ? '(you)' : null}
-          </Text>
-        </span>
-      </Stack>
-
-      <Stack align="center" className="live-actions" gap={2}>
-        {canChangeEditors ? <Tooltips /> : null}
-
-        {canFollowUser &&
-          (followingUserId === user.id ? (
-            <Tooltip content="Stop following">
-              <UnfollowIcon
-                css={{ cursor: 'pointer' }}
-                onClick={() => onStopFollow()}
-              />
-            </Tooltip>
-          ) : (
-            <Tooltip content="Follow along">
-              <FollowIcon
-                css={{ cursor: 'pointer' }}
-                onClick={() => onFollow({ liveUserId: user.id })}
-              />
-            </Tooltip>
-          ))}
-      </Stack>
-    </Stack>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Live/LiveNow/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Live/LiveNow/index.tsx
deleted file mode 100644
index 1664323cc86..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Live/LiveNow/index.tsx
+++ /dev/null
@@ -1,175 +0,0 @@
-import {
-  Button,
-  Collapsible,
-  Element,
-  Input,
-  Label,
-  List,
-  ListAction,
-  Select,
-  Stack,
-  Switch,
-  Text,
-} from '@codesandbox/components';
-import css from '@styled-system/css';
-import { sortBy } from 'lodash-es';
-import React, { FunctionComponent } from 'react';
-
-import { useAppState, useActions } from 'app/overmind';
-
-import { ClassroomIcon, LiveIcon, OpenIcon, StopIcon } from '../icons';
-
-import { Timer } from './Timer';
-import { User } from './User';
-
-export const LiveNow: FunctionComponent = () => {
-  const {
-    onChatEnabledToggle,
-    onModeChanged,
-    onSessionCloseClicked,
-    onToggleNotificationsHidden,
-  } = useActions().live;
-  const {
-    isOwner,
-    notificationsHidden,
-    reconnecting,
-    roomInfo: { chatEnabled, editorIds, mode, ownerIds, roomId, users },
-  } = useAppState().live;
-
-  const owners = users.filter(({ id }) => ownerIds.includes(id));
-  const editors = sortBy(
-    users.filter(({ id }) => editorIds.includes(id) && !ownerIds.includes(id)),
-    'username'
-  );
-  const spectators = sortBy(
-    users.filter(({ id }) => !ownerIds.includes(id) && !editorIds.includes(id)),
-    'username'
-  );
-
-  return (
-    <>
-      <Collapsible defaultOpen title="Live">
-        <Element paddingX={2}>
-          <Stack align="center" justify="space-between" marginBottom={2}>
-            <Text variant="danger">
-              <Stack align="center" gap={2}>
-                {reconnecting ? (
-                  'Reconnecting...'
-                ) : (
-                  <>
-                    <LiveIcon />
-
-                    <span>You&apos;re live!</span>
-                  </>
-                )}
-              </Stack>
-            </Text>
-
-            <Timer />
-          </Stack>
-
-          <Text block marginBottom={4} variant="muted">
-            Share this link with others to invite them to the session
-          </Text>
-
-          <Input
-            defaultValue={`https://codesandbox.io/live/${roomId}`}
-            onFocus={({ target }) => target.select()}
-            marginBottom={2}
-            readOnly
-          />
-
-          {isOwner && (
-            <Button onClick={onSessionCloseClicked} variant="danger">
-              <StopIcon css={css({ marginRight: 2 })} />
-
-              <span>Stop Session</span>
-            </Button>
-          )}
-        </Element>
-      </Collapsible>
-
-      <Collapsible title="Preferences" defaultOpen>
-        <List>
-          {isOwner && (
-            <ListAction
-              justify="space-between"
-              onClick={() => onChatEnabledToggle()}
-            >
-              <Label htmlFor="chat_enabled">Chat enabled</Label>
-              <Switch
-                id="chat_enabled"
-                on={chatEnabled}
-                onChange={() => onChatEnabledToggle()}
-              />
-            </ListAction>
-          )}
-          <ListAction
-            justify="space-between"
-            onClick={() => onToggleNotificationsHidden()}
-          >
-            <Label htmlFor="show_notifications">Show notifications</Label>
-
-            <Switch
-              id="show_notifications"
-              on={!notificationsHidden}
-              onChange={() => onToggleNotificationsHidden()}
-            />
-          </ListAction>
-        </List>
-      </Collapsible>
-
-      <Collapsible title="Live Mode" defaultOpen>
-        <Stack direction="vertical" gap={2} paddingX={2}>
-          <Select
-            disabled={!isOwner}
-            icon={mode === 'open' ? OpenIcon : ClassroomIcon}
-            value={mode}
-            onChange={({ target: { value } }) => onModeChanged(value)}
-          >
-            <option value="open">Everyone can edit</option>
-
-            <option value="classroom">Classroom mode</option>
-          </Select>
-
-          <Text size={2} variant="muted">
-            {mode === 'open'
-              ? ''
-              : 'In Classroom Mode, you have control over who can edit'}
-          </Text>
-        </Stack>
-      </Collapsible>
-
-      <Collapsible defaultOpen title="Editors">
-        <Stack direction="vertical" gap={2} paddingX={2}>
-          {owners.map(user => (
-            <User key={user.id} liveRole="owner" user={user} />
-          ))}
-
-          {editors.map(user => (
-            <User key={user.id} liveRole="editor" user={user} />
-          ))}
-
-          {mode === 'open' &&
-            spectators.map(user => (
-              <User key={user.id} liveRole="editor" user={user} />
-            ))}
-        </Stack>
-      </Collapsible>
-
-      {mode === 'classroom' && (
-        <Collapsible defaultOpen title="Viewers">
-          <Stack direction="vertical" gap={2} paddingX={2}>
-            {spectators.map(user => (
-              <User key={user.id} liveRole="spectator" user={user} />
-            ))}
-
-            {spectators.length > 0
-              ? null
-              : 'No other users in session, invite them! '}
-          </Stack>
-        </Collapsible>
-      )}
-    </>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Live/NotLive/NotOwner.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Live/NotLive/NotOwner.tsx
deleted file mode 100644
index 6534707b04c..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Live/NotLive/NotOwner.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { Button, Stack, Text } from '@codesandbox/components';
-import React, { FunctionComponent } from 'react';
-import { useAppState, useActions } from 'app/overmind';
-
-export const NotOwner: FunctionComponent = () => {
-  const { forkSandboxClicked } = useActions().editor;
-  const { isForkingSandbox } = useAppState().editor;
-
-  return (
-    <>
-      <Stack direction="vertical" gap={2} marginBottom={6}>
-        <Text block size={2} variant="muted">
-          You need to own this sandbox to open a live session to collaborate
-          with others in real time.
-        </Text>
-
-        <Text block size={2} variant="muted">
-          Fork this sandbox to share it with others!
-        </Text>
-      </Stack>
-
-      <Button
-        disabled={isForkingSandbox}
-        onClick={() => forkSandboxClicked({})}
-        variant="primary"
-      >
-        Fork Sandbox
-      </Button>
-    </>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Live/NotLive/Owner.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Live/NotLive/Owner.tsx
deleted file mode 100644
index 18801a0b664..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Live/NotLive/Owner.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { Button, Stack, Text } from '@codesandbox/components';
-import css from '@styled-system/css';
-import React, { FunctionComponent } from 'react';
-
-import { useAppState, useActions } from 'app/overmind';
-
-import { LiveIcon } from '../icons';
-
-export const Owner: FunctionComponent = () => {
-  const { live, modalOpened } = useActions();
-  const {
-    editor: { currentSandbox, isAllModulesSynced },
-    live: { isLoading },
-  } = useAppState();
-
-  const id = currentSandbox.id;
-  const restrictions = currentSandbox?.restrictions;
-
-  const handleGoLive = () => {
-    if (restrictions.liveSessionsRestricted) {
-      // Show modal that its restricted
-      modalOpened({ modal: 'liveSessionRestricted' });
-    } else {
-      live.createLiveClicked(id);
-    }
-  };
-
-  return (
-    <>
-      <Stack direction="vertical" gap={2} marginBottom={6}>
-        <Text block size={2} variant="muted">
-          Invite others to edit this sandbox with you in real time.
-        </Text>
-
-        <Text block size={2} variant="muted">
-          To invite others you need to generate a URL that others can join.
-        </Text>
-      </Stack>
-
-      <Button
-        disabled={!isAllModulesSynced}
-        onClick={handleGoLive}
-        variant="danger"
-      >
-        {isLoading ? (
-          'Creating session'
-        ) : (
-          <>
-            <LiveIcon css={css({ marginRight: 2 })} /> <span>Go Live</span>
-          </>
-        )}
-      </Button>
-    </>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Live/NotLive/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Live/NotLive/index.tsx
deleted file mode 100644
index 38aee9c6af0..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Live/NotLive/index.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Collapsible, Element, Text } from '@codesandbox/components';
-import React, { FunctionComponent } from 'react';
-
-import { useAppState } from 'app/overmind';
-
-import { NotOwner } from './NotOwner';
-import { Owner } from './Owner';
-
-export const NotLive: FunctionComponent = () => {
-  const {
-    currentSandbox: { owned },
-  } = useAppState().editor;
-
-  return (
-    <Collapsible defaultOpen title="Live">
-      <Element paddingX={2}>
-        <Text block marginBottom={2} weight="medium">
-          Collaborate in real-time
-        </Text>
-
-        {owned ? <Owner /> : <NotOwner />}
-      </Element>
-    </Collapsible>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Live/NotLoggedIn.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Live/NotLoggedIn.tsx
deleted file mode 100644
index 8b61deff918..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Live/NotLoggedIn.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import {
-  Button,
-  Collapsible,
-  Element,
-  Stack,
-  Text,
-} from '@codesandbox/components';
-import React, { FunctionComponent } from 'react';
-
-import { useActions } from 'app/overmind';
-
-export const NotLoggedIn: FunctionComponent = () => {
-  const { toggleSignInModal } = useActions();
-
-  return (
-    <Collapsible title="Live" defaultOpen>
-      <Element paddingX={2}>
-        <Text block marginBottom={2} weight="medium">
-          Collaborate in real-time
-        </Text>
-
-        <Stack direction="vertical" gap={2} marginBottom={6}>
-          <Text block size={2} variant="muted">
-            You need to be signed in to open a live session to collaborate with
-            others in real time.
-          </Text>
-
-          <Text block size={2} variant="muted">
-            Sign in to live share this sandbox!
-          </Text>
-        </Stack>
-
-        <Button onClick={() => toggleSignInModal()} variant="primary">
-          Sign in
-        </Button>
-      </Element>
-    </Collapsible>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Live/icons.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Live/icons.tsx
deleted file mode 100644
index 5d202666c9f..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Live/icons.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import React, { FunctionComponent, SVGProps } from 'react';
-
-export { default as AddIcon } from 'react-icons/lib/md/add';
-export { default as RemoveIcon } from 'react-icons/lib/md/remove';
-export { default as FollowIcon } from 'react-icons/lib/io/eye';
-export { default as UnfollowIcon } from 'react-icons/lib/io/eye-disabled';
-
-type IconProps = SVGProps<SVGSVGElement>;
-
-export const LiveIcon: FunctionComponent<IconProps> = props => (
-  <svg
-    width="8"
-    height="8"
-    viewBox="0 0 8 8"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <circle cx="4" cy="4" r="4" fill="currentcolor" />
-  </svg>
-);
-
-export const StopIcon: FunctionComponent<IconProps> = props => (
-  <svg
-    width="8"
-    height="8"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <rect width="8" height="8" rx="1" fill="currentcolor" />
-  </svg>
-);
-
-export const OpenIcon: FunctionComponent<IconProps> = props => (
-  <svg width={10} height={10} fill="none" viewBox="0 0 10 10" {...props}>
-    <path
-      fill="currentcolor"
-      d="M9.33 2.643A4.781 4.781 0 007.51.986 5.264 5.264 0 005 .375c-.907 0-1.744.204-2.51.61A4.78 4.78 0 00.67 2.644 4.153 4.153 0 000 4.929c0 .826.224 1.587.67 2.285a4.783 4.783 0 001.82 1.657c.766.408 1.603.611 2.51.611.907 0 1.744-.203 2.51-.61a4.78 4.78 0 001.82-1.658c.447-.698.67-1.46.67-2.285 0-.827-.223-1.589-.67-2.286zM5.626 7.324c-.044-.047-.06-.087-.046-.118-.004.02-.02.037-.046.053a.61.61 0 00-.117-.089.604.604 0 01-.117-.089 2.53 2.53 0 01-.146-.228c-.011-.026-.012-.04-.004-.045-.082.032-.202.01-.358-.065a.617.617 0 01-.136-.124c-.061-.068-.124-.097-.19-.09l-.087.021a.37.37 0 01-.095.015.321.321 0 01-.104-.024.87.87 0 01-.14-.068 47.905 47.905 0 00-.205-.104l-.104-.047a.319.319 0 01-.081-.056.186.186 0 01-.056-.08 1.053 1.053 0 01-.032-.142.416.416 0 00-.052-.155.551.551 0 00-.11-.118c-.049-.04-.092-.06-.131-.06.035 0 .035-.026 0-.08a.607.607 0 00-.091-.115 7.751 7.751 0 01-.189-.19.472.472 0 01-.078-.11c-.022-.041-.026-.076-.013-.103.004-.004 0-.01-.013-.018a1.187 1.187 0 00-.104-.044.139.139 0 00-.04-.01.425.425 0 01.03.087c.01.041.023.072.036.091.008.016.045.074.11.172.113.166.165.289.157.368-.026.008-.044.004-.053-.012a.201.201 0 01-.02-.065.343.343 0 00-.012-.06c-.013-.023-.047-.049-.101-.076-.054-.028-.088-.056-.101-.083.004 0 .01-.002.016-.006a.033.033 0 01.017-.006c.004-.036-.019-.081-.069-.137-.05-.055-.07-.095-.062-.118-.034-.024-.065-.07-.09-.14a.502.502 0 00-.066-.133.266.266 0 00-.065-.062 1.302 1.302 0 00-.098-.06 2.892 2.892 0 01-.078-.044.238.238 0 01-.052-.053c-.143-.158-.186-.243-.13-.255-.056.012-.103-.027-.14-.116-.037-.089-.049-.157-.036-.204l-.013-.006a.803.803 0 00.007-.14c0-.077.005-.147.016-.21.01-.063.032-.095.062-.095-.03.004-.053-.021-.068-.074-.016-.054-.017-.09-.004-.11.005-.012.024-.004.059.024a.32.32 0 01.058.053c.057-.028.079-.063.066-.107a.856.856 0 00-.137-.124 2.484 2.484 0 00-.287-.16c.026-.044.02-.081-.02-.113-.043.024-.068.03-.074.018a.213.213 0 01-.016-.065c-.005-.032-.016-.05-.033-.054a.175.175 0 01-.078-.047c.386-.561.896-1 1.53-1.316.026-.004.074-.006.143-.006a.278.278 0 01.098.03c.03.015.062.037.094.065.033.027.058.047.075.059.009-.024-.002-.06-.033-.107.01-.024.057-.047.144-.071.1-.012.165-.01.195.006a1.59 1.59 0 00-.13-.148l-.033.03c-.034-.028-.126-.015-.273.04l-.065.033a.792.792 0 01-.085.039.175.175 0 01-.078.006c.208-.103.412-.184.612-.243a.632.632 0 01.065.05.94.94 0 00.072.056c-.013-.008-.022-.004-.026.012-.018.048-.018.087 0 .119a.124.124 0 00.088.047.531.531 0 00.133-.006.887.887 0 01.104-.012l.065.006c.14.012.193 0 .163-.035a.364.364 0 01.046.098c.017.049.037.084.058.103.022-.016.026-.043.013-.083-.013-.04-.013-.067 0-.083.004-.008.018-.016.04-.023a8.204 8.204 0 01.13-.048c.026-.016.008-.043-.053-.083a.473.473 0 00-.055-.018 1 1 0 01-.075-.023.43.43 0 01-.068-.033c-.024-.014-.035-.03-.033-.047a.154.154 0 01.036-.069c.026-.02.069-.027.127-.023a.348.348 0 01.134.03c.117.059.134.112.052.16a.5.5 0 01.156.047c.06.027.085.057.072.089.034-.06.069-.09.104-.09.021.005.042.031.062.08.02.05.031.077.035.081.035.043.07.053.105.03a.524.524 0 00.107-.104c.037-.046.057-.066.062-.062-.044-.016-.048-.032-.013-.048.065-.035.123-.045.176-.03.012.008.03.026.051.054.04.071.033.105-.019.1a.123.123 0 01.049.12c-.007.047-.04.068-.101.064a.247.247 0 01-.095-.03.311.311 0 00-.094-.032c-.022-.002-.052.01-.091.033a.743.743 0 00-.069.1.455.455 0 01-.075.101c-.065.06-.173.082-.325.066.013 0 .012.011-.003.035a1.234 1.234 0 01-.107.13.294.294 0 00-.079.137l-.006.08a.276.276 0 01-.027.104c.053-.012.094.012.124.071.026.055.026.085 0 .089a.84.84 0 01.378.024c.156.051.245.103.267.154.026-.036.089-.038.189-.006.039.02.073.079.104.178.017.059.046.11.088.154.041.043.085.055.133.035l.02-.011a.63.63 0 00.042-.021.276.276 0 00.036-.024c.013-.01.02-.019.022-.026.002-.008 0-.016-.01-.024a.213.213 0 01-.068-.098c-.015-.041-.011-.078.01-.11a.433.433 0 01.104-.07c.057-.033.092-.064.105-.096.017-.051-.005-.094-.066-.127-.06-.034-.09-.065-.09-.092 0-.02.013-.044.042-.071.028-.028.04-.054.035-.077A.268.268 0 006 2.263a.38.38 0 01-.026-.083c-.003-.017.007-.038.029-.062.03-.016.102-.015.215.003a.781.781 0 01.221.056c.013.008.041.02.085.036a.819.819 0 01.114.05c.032.018.05.035.055.05H6.66a.14.14 0 01.056.084c.006.031-.01.055-.049.07a.223.223 0 01.104.019c.07.023.072.045.007.065a.452.452 0 01.055-.012.184.184 0 00.088-.039.109.109 0 01.03-.017.226.226 0 01.028-.006.057.057 0 01.04.009c.004 0 .013-.01.029-.03l.048-.06c.018-.019.033-.029.046-.029.013 0 .025.005.036.015.01.01.02.02.026.033a.753.753 0 01.035.07c.009.02.03.041.062.063a.165.165 0 01.062.062l.026.09c.013.047.03.08.052.097a.264.264 0 00.098.044c.008.004.028.002.058-.005a.17.17 0 01.075-.006c.02.003.03.02.03.047.025-.024.038-.04.038-.047a.235.235 0 00.043.124c.024.032.062.046.114.042l-.013.13c-.013.02-.046.035-.098.044a.381.381 0 00-.098.027.445.445 0 00-.094.071c-.05.044-.07.07-.062.077-.074-.075-.184-.096-.332-.065a1.773 1.773 0 00-.338.071.477.477 0 00-.144.09.18.18 0 00-.022.04l-.033.066c-.01.02-.02.03-.03.03.027-.004.056-.023.089-.057a.363.363 0 01.062-.056c.112-.067.206-.09.28-.07.095.023.11.055.045.094-.008.008-.031.011-.068.01a.257.257 0 00-.075.002c.04.008.072.019.098.033.026.013.032.032.02.056.069.036.082.075.039.119a.25.25 0 01-.202.065c.013 0 .013.008 0 .024l-.111.065a1.466 1.466 0 01-.085.03.225.225 0 00-.097.053c-.013.016-.02.04-.02.07a.287.287 0 01-.006.072c-.005.016-.022.02-.052.012-.014.024-.054.042-.12.056-.068.014-.113.035-.134.062.026.032.024.064-.007.095-.052.04-.098.036-.137-.012-.021.008-.038.028-.048.06a.11.11 0 01-.05.065c.031.043.027.075-.012.095a.496.496 0 01.078.042c.017.011.028.017.032.017-.017.036-.04.053-.071.053.026.064-.007.133-.098.208a.304.304 0 01-.081.047c-.037.016-.07.03-.101.039a.223.223 0 00-.052.02.412.412 0 00-.098.11.118.118 0 00-.01.11c.015.036.056.06.12.071l.007.048v.106l.007.048.01.074a.536.536 0 010 .083c-.003.034-.012.052-.03.056-.017.004-.041 0-.071-.012-.035-.015-.076-.102-.124-.26a.383.383 0 00-.078-.143.196.196 0 01-.056.039c-.015.006-.026.007-.032.003a.42.42 0 01-.036-.027.433.433 0 00-.045-.032.371.371 0 00-.114-.03c-.055-.008-.088-.018-.101-.03-.105.072-.168.054-.19-.053-.008.02-.007.046.004.08s.016.053.016.056c-.03.052-.078.056-.143.012-.026-.023-.086-.026-.179-.009-.093.018-.155.021-.185.01.004 0 .013.005.026.017a.179.179 0 01.026.018.073.073 0 01-.02.035c-.009.008-.017.011-.026.01a.072.072 0 00-.03 0 .118.118 0 00-.029.008.384.384 0 00-.065.062.31.31 0 01-.058.057.362.362 0 01.036.145 1.635 1.635 0 01-.02.148 1 1 0 00-.016.157c0 .063.02.137.061.22.042.083.09.14.147.172.03.015.083.025.156.03.074.003.126 0 .156-.013a.159.159 0 00.06-.041.192.192 0 00.032-.068c.008-.03.015-.05.02-.063a.178.178 0 01.168-.118c.053-.004.09 0 .114.015.024.013.034.032.03.056a.28.28 0 01-.026.074c-.013.026-.03.054-.05.086a.314.314 0 00-.035.071.906.906 0 00-.023.134.672.672 0 01-.016.104.414.414 0 00.098.005.13.13 0 01.01-.038.156.156 0 00.01-.033c.02.032.056.05.103.054.048.004.083-.012.105-.048.008.012.034.042.078.09.043.047.067.086.071.118l.026.077c.013.036.018.06.013.074-.004.014-.026.021-.065.021-.017 0-.028.006-.032.018a.074.074 0 000 .044.372.372 0 00.042.101.105.105 0 01.016.032c.079.13.185.166.32.107 0 .115-.03.178-.092.19-.034.008-.073-.012-.116-.06zm.097 1.34a.434.434 0 01-.013-.095c-.004-.031.011-.074.046-.127.034-.054.052-.094.052-.122-.07-.016-.096-.067-.079-.154.01-.06.072-.138.19-.237.082-.067.108-.162.077-.285a1.502 1.502 0 01-.032-.225 1.845 1.845 0 00-.026-.208c0 .012.02.023.062.033.041.01.066.023.075.038a.345.345 0 00.032-.065.292.292 0 01.039-.071.216.216 0 01.055-.045.646.646 0 01.056-.032.502.502 0 00.058-.039l.075-.05a.23.23 0 01.078-.026c.033-.006.056.002.069.026.021.024.017.06-.013.11s-.03.084 0 .104a.407.407 0 00.013-.078.137.137 0 01.039-.089.152.152 0 01.075-.04.1.1 0 01.065.008c.02.01.042.023.068.041.026.018.05.029.072.033.065.02.143.063.234.13-.004-.004-.004-.009 0-.015a.068.068 0 01.026-.017.507.507 0 00.036-.018.192.192 0 01.035-.015l.02-.006c.03 0 .052-.002.065-.006.013-.004.032 0 .055.012a.456.456 0 01.095.06.558.558 0 01.045.035 4.836 4.836 0 00.153.089c.02.012.037.03.052.053.015.024.02.05.016.077.027.004.079.02.157.048.013.007.04.014.081.02s.069.015.082.027a4.155 4.155 0 01-2.285 1.12z"
-    />
-  </svg>
-);
-
-export const ClassroomIcon: FunctionComponent<IconProps> = props => (
-  <svg
-    width="15"
-    height="8"
-    viewBox="0 0 15 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M0.168599 2.11226L7.20065 0.0195967C7.28845 -0.00653224 7.38196 -0.00653225 7.46977 0.0195967L14.5018 2.11226C14.7266 2.17915 14.7266 2.49752 14.5018 2.56441L7.40249 4.67709C7.35859 4.69016 7.31183 4.69016 7.26793 4.67709L0.168599 2.56441C-0.0561998 2.49752 -0.0561998 2.17915 0.168599 2.11226ZM13.3967 3.346L12.9304 3.48627V4.95136C12.7431 4.99198 12.6977 5.11056 12.6977 5.40485C12.6977 5.79566 12.7777 6.11248 13.164 6.11248C13.5502 6.11248 13.6302 5.79566 13.6302 5.40485C13.6302 5.11011 13.5847 4.99162 13.3967 4.95117V3.346ZM7.25282 5.14475L2.67271 3.77699V6.4922C2.67271 6.68955 2.79533 6.86578 2.9816 6.93097C3.81928 7.22416 6.15774 7.99993 7.44897 7.99993C8.73467 7.99993 10.9103 7.23079 11.7001 6.93476C11.8809 6.867 11.9978 6.69388 11.9978 6.50081V3.76683L7.41798 5.14459C7.36413 5.16079 7.3067 5.16085 7.25282 5.14475Z"
-      fill="currentcolor"
-    />
-  </svg>
-);
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Live/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Live/index.tsx
deleted file mode 100644
index 7c11197b8cf..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Live/index.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React, { FunctionComponent } from 'react';
-
-import { useAppState } from 'app/overmind';
-
-import { LiveNow } from './LiveNow';
-import { NotLive } from './NotLive';
-import { NotLoggedIn } from './NotLoggedIn';
-
-export const Live: FunctionComponent = () => {
-  const {
-    isLoggedIn,
-    live: { isLive },
-  } = useAppState();
-
-  if (!isLoggedIn) {
-    return <NotLoggedIn />;
-  }
-
-  return isLive ? <LiveNow /> : <NotLive />;
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/NotOwnedSandboxInfo/BookmarkTemplateButton/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/NotOwnedSandboxInfo/BookmarkTemplateButton/index.tsx
deleted file mode 100644
index 4482408e304..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/NotOwnedSandboxInfo/BookmarkTemplateButton/index.tsx
+++ /dev/null
@@ -1,133 +0,0 @@
-import React, { useEffect } from 'react';
-import {
-  useLazyQuery,
-  useMutation,
-  MutationHookOptions,
-} from '@apollo/react-hooks';
-import { useAppState } from 'app/overmind';
-import {
-  BookmarkedSandboxInfoQuery,
-  BookmarkTemplateMutation,
-  BookmarkTemplateMutationVariables,
-  UnbookmarkTemplateMutation,
-  UnbookmarkTemplateMutationVariables,
-  BookmarkedSandboxInfoQueryVariables,
-} from 'app/graphql/types';
-import { Stack, Button, Icon, Menu } from '@codesandbox/components';
-import { BOOKMARK_TEMPLATE, UNBOOKMARK_TEMPLATE } from './mutations';
-import { BOOKMARKED_SANDBOX_INFO } from './queries';
-
-export const BookmarkTemplateButton = () => {
-  const {
-    isLoggedIn,
-    editor: {
-      currentId: sandboxId,
-      currentSandbox: { customTemplate },
-    },
-  } = useAppState();
-
-  const [runQuery, { loading, data }] = useLazyQuery<
-    BookmarkedSandboxInfoQuery,
-    BookmarkedSandboxInfoQueryVariables
-  >(BOOKMARKED_SANDBOX_INFO);
-
-  useEffect(() => {
-    if (isLoggedIn) {
-      runQuery({
-        variables: { sandboxId },
-      });
-    }
-  }, [isLoggedIn, runQuery, sandboxId]);
-
-  const bookmarkInfos = data?.sandbox?.customTemplate?.bookmarked || [];
-
-  const config = (
-    entityIndex: number = 0
-  ): MutationHookOptions<
-    BookmarkTemplateMutation | UnbookmarkTemplateMutation,
-    BookmarkTemplateMutationVariables | UnbookmarkTemplateMutationVariables
-  > => {
-    const bookmarkInfo = bookmarkInfos[entityIndex];
-
-    if (!bookmarkInfo || !customTemplate) {
-      return {};
-    }
-
-    return {
-      variables: {
-        template: customTemplate.id,
-        team:
-          bookmarkInfo.entity.__typename === 'Team'
-            ? bookmarkInfo.entity.id
-            : undefined,
-      },
-      optimisticResponse: {
-        __typename: 'RootMutationType',
-        template: {
-          __typename: 'Template',
-          id: customTemplate.id,
-          bookmarked: bookmarkInfos.map(b => {
-            if (b.entity.id !== bookmarkInfo.entity.id) {
-              return b;
-            }
-
-            return {
-              ...b,
-              isBookmarked: !b.isBookmarked,
-            };
-          }),
-        },
-      },
-    };
-  };
-
-  const [bookmark] = useMutation<
-    BookmarkTemplateMutation,
-    BookmarkTemplateMutationVariables
-  >(BOOKMARK_TEMPLATE, config());
-  const [unbookmark] = useMutation<
-    UnbookmarkTemplateMutation,
-    UnbookmarkTemplateMutationVariables
-  >(UNBOOKMARK_TEMPLATE, config());
-
-  const handleToggleFollow = (i: number = 0) =>
-    bookmarkInfos[i].isBookmarked ? unbookmark(config(i)) : bookmark(config(i));
-
-  return (
-    <Stack>
-      <Button
-        disabled={loading}
-        onClick={() => handleToggleFollow(0)}
-        css={{
-          width: 'calc(100% - 26px)',
-          borderTopRightRadius: 0,
-          borderBottomRightRadius: 0,
-        }}
-      >
-        {bookmarkInfos[0]?.isBookmarked
-          ? `Remove Bookmark`
-          : `Bookmark Template`}
-      </Button>
-      <Menu>
-        <Menu.Button
-          variant="primary"
-          css={{
-            width: '26px',
-            borderTopLeftRadius: 0,
-            borderBottomLeftRadius: 0,
-          }}
-        >
-          <Icon size={8} name="caret" />
-        </Menu.Button>
-        <Menu.List>
-          {bookmarkInfos.map(({ entity: { name } }, index: number) => (
-            <Menu.Item key={name} onSelect={() => handleToggleFollow(index)}>
-              {bookmarkInfos[index].isBookmarked ? 'Remove from ' : 'Add to '}
-              {index === 0 ? 'My Bookmarks' : name}
-            </Menu.Item>
-          ))}
-        </Menu.List>
-      </Menu>
-    </Stack>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/NotOwnedSandboxInfo/BookmarkTemplateButton/mutations.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/NotOwnedSandboxInfo/BookmarkTemplateButton/mutations.ts
deleted file mode 100644
index e751d486777..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/NotOwnedSandboxInfo/BookmarkTemplateButton/mutations.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import gql from 'graphql-tag';
-import { BOOKMARK_TEMPLATE_FRAGMENT } from './queries';
-
-export const BOOKMARK_TEMPLATE = gql`
-  mutation BookmarkTemplate($template: UUID4!, $team: UUID4) {
-    template: bookmarkTemplate(templateId: $template, teamId: $team) {
-      ...BookmarkTemplateFields
-    }
-  }
-
-  ${BOOKMARK_TEMPLATE_FRAGMENT}
-`;
-
-export const UNBOOKMARK_TEMPLATE = gql`
-  mutation UnbookmarkTemplate($template: UUID4!, $team: UUID4) {
-    template: unbookmarkTemplate(templateId: $template, teamId: $team) {
-      ...BookmarkTemplateFields
-    }
-  }
-
-  ${BOOKMARK_TEMPLATE_FRAGMENT}
-`;
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/NotOwnedSandboxInfo/BookmarkTemplateButton/queries.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/NotOwnedSandboxInfo/BookmarkTemplateButton/queries.ts
deleted file mode 100644
index cc5d1362234..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/NotOwnedSandboxInfo/BookmarkTemplateButton/queries.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import gql from 'graphql-tag';
-
-export const BOOKMARK_TEMPLATE_FRAGMENT = gql`
-  fragment BookmarkTemplateFields on Template {
-    id
-    bookmarked {
-      isBookmarked
-      entity {
-        __typename
-        ... on User {
-          id
-          name: username
-        }
-        ... on Team {
-          id
-          name
-        }
-      }
-    }
-  }
-`;
-
-export const BOOKMARKED_SANDBOX_INFO = gql`
-  query BookmarkedSandboxInfo($sandboxId: ID!) {
-    sandbox(sandboxId: $sandboxId) {
-      id
-      author {
-        id
-        name: username
-      }
-      customTemplate {
-        ...BookmarkTemplateFields
-      }
-    }
-  }
-
-  ${BOOKMARK_TEMPLATE_FRAGMENT}
-`;
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/NotOwnedSandboxInfo/Summary.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/NotOwnedSandboxInfo/Summary.tsx
deleted file mode 100644
index 1860446f3fc..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/NotOwnedSandboxInfo/Summary.tsx
+++ /dev/null
@@ -1,209 +0,0 @@
-import React from 'react';
-import { useActions, useAppState } from 'app/overmind';
-
-import { getSandboxName } from '@codesandbox/common/lib/utils/get-sandbox-name';
-import {
-  sandboxUrl,
-  profileUrl,
-  githubRepoUrl,
-} from '@codesandbox/common/lib/utils/url-generator';
-import getTemplateDefinition from '@codesandbox/common/lib/templates';
-import { getTemplateIcon } from '@codesandbox/common/lib/utils/getTemplateIcon';
-import { TeamAvatar } from 'app/components/TeamAvatar';
-import { useWorkspaceSubscription } from 'app/hooks/useWorkspaceSubscription';
-
-import {
-  Element,
-  Collapsible,
-  Text,
-  Link,
-  Stack,
-  List,
-  ListItem,
-  Stats,
-  Tags,
-  Button,
-} from '@codesandbox/components';
-import css from '@styled-system/css';
-
-import { BookmarkTemplateButton } from './BookmarkTemplateButton';
-import { GitHubIcon } from '../GitHub/Icons';
-
-const LinkOrSpan = ({ href, ...props }) => {
-  const component = href ? Link : 'span';
-  return React.createElement(component, { href, ...props });
-};
-
-export const Summary = () => {
-  const {
-    editor: { currentSandbox, isForkingSandbox },
-    isLoggedIn,
-  } = useAppState();
-  const {
-    author,
-    description,
-    customTemplate,
-    template,
-    forkedFromSandbox,
-    forkedTemplateSandbox,
-    tags,
-    team,
-    privacy,
-  } = currentSandbox;
-  const {
-    editor: { forkSandboxClicked },
-  } = useActions();
-  const { isPro } = useWorkspaceSubscription();
-
-  const isForked = forkedFromSandbox || forkedTemplateSandbox;
-  const { url: templateUrl } = getTemplateDefinition(template);
-  const isUnlistedOrPrivate = privacy === 1 || privacy === 2;
-
-  return (
-    <Collapsible
-      title={customTemplate ? 'Template Info' : 'Sandbox Info'}
-      defaultOpen
-    >
-      <Element marginBottom={6}>
-        <Stack as="section" direction="vertical" gap={2} paddingX={2}>
-          <Stack justify="space-between" align="center">
-            {customTemplate ? (
-              <Stack gap={2} align="center">
-                <TemplateIcon
-                  templateName={customTemplate.title}
-                  iconUrl={customTemplate.iconUrl}
-                  environment={template}
-                />
-                <Text maxWidth="100%">{getSandboxName(currentSandbox)}</Text>
-              </Stack>
-            ) : (
-              <Text maxWidth="100%">{getSandboxName(currentSandbox)}</Text>
-            )}
-          </Stack>
-
-          <Text variant="muted">{description}</Text>
-
-          {tags.length ? (
-            <Element marginTop={4}>
-              <Tags tags={tags} />
-            </Element>
-          ) : null}
-        </Stack>
-      </Element>
-
-      <Stack as="section" direction="vertical" gap={6} paddingX={2}>
-        <Stats sandbox={currentSandbox} />
-        {customTemplate && isLoggedIn && <BookmarkTemplateButton />}
-      </Stack>
-
-      <Divider marginTop={8} marginBottom={4} />
-
-      <Stack as="section" direction="vertical" gap={4}>
-        {team && !currentSandbox.git ? (
-          <LinkOrSpan href={author && profileUrl(author.username)}>
-            <Stack gap={2} align="center" paddingX={2}>
-              <TeamAvatar name={team.name} avatar={team.avatarUrl} />
-              <Stack direction="vertical">
-                <Text variant={author ? 'body' : 'muted'} block>
-                  {team.name}
-                </Text>
-                {author && (
-                  <Text size={2} variant="muted">
-                    {author.name || author.username}
-                  </Text>
-                )}
-              </Stack>
-            </Stack>
-          </LinkOrSpan>
-        ) : null}
-
-        {!author && currentSandbox.git ? (
-          <Link href={githubRepoUrl(currentSandbox.git)} target="_blank">
-            <Stack gap={2} align="center" paddingX={2}>
-              <Stack
-                justify="center"
-                align="center"
-                css={css({
-                  size: 8,
-                  minWidth: 8,
-                  borderRadius: 'small',
-                  border: '1px solid',
-                  borderColor: 'avatar.border',
-                })}
-              >
-                <GitHubIcon title="GitHub repository" width={20} height={20} />
-              </Stack>
-              <Link variant="muted" maxWidth="100%">
-                {currentSandbox.git.username}/{currentSandbox.git.repo}
-              </Link>
-            </Stack>
-          </Link>
-        ) : null}
-
-        <List>
-          {isForked ? (
-            <ListItem justify="space-between">
-              <Text>{forkedTemplateSandbox ? 'Template' : 'Forked From'}</Text>
-              <Link
-                variant="muted"
-                href={sandboxUrl(forkedFromSandbox || forkedTemplateSandbox)}
-                target="_blank"
-              >
-                {getSandboxName(forkedFromSandbox || forkedTemplateSandbox)}
-              </Link>
-            </ListItem>
-          ) : null}
-          <ListItem justify="space-between" gap={2}>
-            <Text>Environment</Text>
-            <Link
-              variant="muted"
-              href={templateUrl}
-              target="_blank"
-              maxWidth="100%"
-            >
-              {template}
-            </Link>
-          </ListItem>
-        </List>
-
-        {!author && currentSandbox.git ? (
-          <Stack as="section" direction="vertical" gap={4} paddingX={2}>
-            <Text variant="muted" size={3}>
-              This sandbox is in sync with{' '}
-              <Text weight="bold">{currentSandbox.git.branch}</Text> on GitHub.
-              You have to fork to make changes.
-            </Text>
-
-            <Button
-              variant="primary"
-              disabled={!isPro && isUnlistedOrPrivate}
-              loading={isForkingSandbox}
-              onClick={() => forkSandboxClicked({})}
-            >
-              {isForkingSandbox ? 'Forking...' : 'Fork'}
-            </Button>
-          </Stack>
-        ) : null}
-      </Stack>
-    </Collapsible>
-  );
-};
-
-const TemplateIcon = ({ iconUrl, templateName, environment }) => {
-  const { UserIcon } = getTemplateIcon(templateName, iconUrl, environment);
-
-  return <UserIcon />;
-};
-
-const Divider = props => (
-  <Element
-    as="hr"
-    css={css({
-      width: '100%',
-      border: 'none',
-      borderBottom: '1px solid',
-      borderColor: 'sideBar.border',
-    })}
-    {...props}
-  />
-);
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/NotOwnedSandboxInfo/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/NotOwnedSandboxInfo/index.tsx
deleted file mode 100644
index 770a8255a0d..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/NotOwnedSandboxInfo/index.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-
-import { Explorer } from '../Explorer';
-import { Summary } from './Summary';
-
-export const NotOwnedSandboxInfo = () => (
-  <>
-    <Summary />
-    <Explorer />
-  </>
-);
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/Config.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/Config.tsx
deleted file mode 100644
index ec97c8e368b..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/Config.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import getTemplateDefinition from '@codesandbox/common/lib/templates';
-import { Button, Element } from '@codesandbox/components';
-import React, { FunctionComponent, MouseEvent } from 'react';
-
-import { useAppState, useActions } from 'app/overmind';
-
-export const Config: FunctionComponent = () => {
-  const {
-    modalOpened,
-    workspace: { addedTemplate },
-  } = useActions();
-  const {
-    editor: {
-      currentSandbox: { customTemplate, template },
-    },
-    user,
-    workspace: {
-      project: { description, title },
-    },
-  } = useAppState();
-
-  const onCreateTemplate = (event: MouseEvent<HTMLButtonElement>) => {
-    event.preventDefault();
-
-    if (!user) {
-      modalOpened({ modal: 'signInForTemplates' });
-    }
-
-    addedTemplate({
-      color:
-        (customTemplate && customTemplate.color) ||
-        getTemplateDefinition(template).color(),
-      description,
-      title,
-    });
-  };
-
-  return !customTemplate ? (
-    <Element marginX={2} marginY={4}>
-      <Button
-        // @ts-ignore
-        onClick={onCreateTemplate}
-        variant="secondary"
-      >
-        Save as template
-      </Button>
-    </Element>
-  ) : null;
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/Delete.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/Delete.tsx
deleted file mode 100644
index d29c924f9c1..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/Delete.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { Button, Stack } from '@codesandbox/components';
-import css from '@styled-system/css';
-import React, { FunctionComponent, MouseEvent } from 'react';
-
-import { useAppState, useActions } from 'app/overmind';
-
-export const Delete: FunctionComponent = () => {
-  const {
-    modalOpened,
-    workspace: { deleteTemplate },
-  } = useActions();
-  const {
-    currentSandbox: { customTemplate },
-  } = useAppState().editor;
-
-  const onDelete = (event: MouseEvent<HTMLButtonElement>) => {
-    event.preventDefault();
-
-    if (customTemplate) {
-      deleteTemplate();
-    } else {
-      modalOpened({ modal: 'deleteSandbox' });
-    }
-  };
-
-  return (
-    <Stack justify="center" marginBottom={6}>
-      <Button
-        css={css({
-          ':hover:not(:disabled),:focus:not(:disabled)': {
-            color: 'errorForeground',
-          },
-        })}
-        // @ts-ignore
-        onClick={onDelete}
-        variant="link"
-      >
-        {`Delete ${customTemplate ? `Template` : `Sandbox`}`}
-      </Button>
-    </Stack>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/Permissions.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/Permissions.tsx
deleted file mode 100644
index b0850b9a223..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/Permissions.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import React, { FunctionComponent } from 'react';
-import { useAppState, useActions } from 'app/overmind';
-import {
-  Collapsible,
-  Select,
-  Stack,
-  Label,
-  Switch,
-  ListAction,
-  Icon,
-} from '@codesandbox/components';
-import css from '@styled-system/css';
-
-const icons = {
-  0: () => <Icon size={10} name="globe" />,
-  1: () => <Icon size={10} name="link" />,
-  2: () => <Icon size={10} name="lock" />,
-};
-
-export const Permissions: FunctionComponent = () => {
-  const {
-    workspace: { sandboxPrivacyChanged },
-    editor: { setPreventSandboxLeaving, setPreventSandboxExport },
-  } = useActions();
-  const {
-    editor: { currentSandbox },
-    activeTeam,
-    activeTeamInfo,
-    activeWorkspaceAuthorization,
-  } = useAppState();
-
-  const isPaidUser = activeTeamInfo?.subscription;
-
-  // if this user is not part of this workspace,
-  // they should not see permissions at all
-  const isActiveTeam = currentSandbox.team?.id === activeTeam;
-  const sandoxPermissionsVisible = isActiveTeam && activeTeamInfo?.subscription;
-
-  const togglePreventSandboxLeaving = () => {
-    setPreventSandboxLeaving(!currentSandbox.permissions.preventSandboxLeaving);
-  };
-  const togglePreventSandboxExport = () => {
-    setPreventSandboxExport(!currentSandbox.permissions.preventSandboxExport);
-  };
-
-  return (
-    <Collapsible defaultOpen title="Permissions">
-      <Stack direction="vertical" gap={3}>
-        <Stack css={css({ paddingX: 2 })} direction="vertical" gap={4}>
-          <Select
-            disabled={!isPaidUser}
-            icon={icons[currentSandbox.privacy]}
-            onChange={({ target: { value } }) =>
-              sandboxPrivacyChanged({
-                privacy: Number(value) as 0 | 1 | 2,
-                source: 'sidebar',
-              })
-            }
-            value={currentSandbox.privacy}
-          >
-            <option value={0}>Public</option>
-            <option value={1}>Unlisted (only available by url)</option>
-            <option value={2}>Private</option>
-          </Select>
-        </Stack>
-        {sandoxPermissionsVisible ? (
-          <Stack direction="vertical">
-            <ListAction
-              justify="space-between"
-              disabled={activeWorkspaceAuthorization !== 'ADMIN'}
-            >
-              <Label
-                htmlFor="preventLeaving"
-                css={css({ flexGrow: 1, height: 8, lineHeight: '32px' })}
-              >
-                Prevent Leaving Workspace
-              </Label>
-              <Switch
-                id="preventLeaving"
-                on={currentSandbox.permissions.preventSandboxLeaving}
-                onChange={togglePreventSandboxLeaving}
-                disabled={activeWorkspaceAuthorization !== 'ADMIN'}
-              />
-            </ListAction>
-            <ListAction
-              justify="space-between"
-              disabled={activeWorkspaceAuthorization !== 'ADMIN'}
-            >
-              <Label
-                htmlFor="preventExport"
-                css={css({ flexGrow: 1, height: 8, lineHeight: '32px' })}
-              >
-                Disable export
-              </Label>
-              <Switch
-                id="preventExport"
-                on={currentSandbox.permissions.preventSandboxExport}
-                onChange={togglePreventSandboxExport}
-                disabled={activeWorkspaceAuthorization !== 'ADMIN'}
-              />
-            </ListAction>
-          </Stack>
-        ) : null}
-      </Stack>
-    </Collapsible>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/Summary/EditSummary.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/Summary/EditSummary.tsx
deleted file mode 100644
index 36f17b782a3..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/Summary/EditSummary.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import { ENTER } from '@codesandbox/common/lib/utils/keycodes';
-import {
-  Button,
-  FormField,
-  Input,
-  Stack,
-  TagInput,
-  Textarea,
-} from '@codesandbox/components';
-import css from '@styled-system/css';
-import React, {
-  ChangeEvent,
-  FormEvent,
-  FunctionComponent,
-  KeyboardEvent,
-  useState,
-} from 'react';
-
-import { useAppState, useActions } from 'app/overmind';
-import { ThumbnailEdit } from './ThumbnailEdit';
-
-type Props = {
-  setEditing: (editing: boolean) => void;
-};
-
-export const EditSummary: FunctionComponent<Props> = ({ setEditing }) => {
-  const {
-    editor: {
-      currentSandbox: { tags },
-    },
-    workspace: {
-      project: { title, description },
-    },
-  } = useAppState();
-  const {
-    sandboxInfoUpdated,
-    valueChanged,
-    tagsChanged2,
-  } = useActions().workspace;
-  const [newTags, setNewTags] = useState(tags || []);
-
-  const onTitleChange = ({ target }: ChangeEvent<HTMLInputElement>) =>
-    valueChanged({ field: 'title', value: target.value });
-  const onDescriptionChange = ({ target }: ChangeEvent<HTMLTextAreaElement>) =>
-    valueChanged({ field: 'description', value: target.value });
-
-  // Text input elements treat Enter as submit
-  // but textarea doesn't, so we need to hijack it.
-  const submitOnEnter = (event: KeyboardEvent<HTMLTextAreaElement>) => {
-    if (event.keyCode === ENTER && !event.shiftKey) {
-      onSubmit(event);
-    }
-  };
-
-  const onSubmit = (event: FormEvent) => {
-    event.preventDefault();
-
-    sandboxInfoUpdated();
-    tagsChanged2(newTags);
-    setEditing(false);
-  };
-
-  return (
-    <form onSubmit={onSubmit}>
-      <Stack
-        as="section"
-        direction="vertical"
-        gap={2}
-        marginBottom={6}
-        paddingX={2}
-      >
-        <FormField
-          css={css({ paddingX: 0, width: '100%' })}
-          hideLabel
-          label="Sandbox Name"
-        >
-          <Input
-            autoFocus
-            onChange={onTitleChange}
-            placeholder="Title"
-            type="text"
-            value={title}
-          />
-        </FormField>
-
-        <FormField
-          css={css({ paddingX: 0 })}
-          direction="vertical"
-          hideLabel
-          label="Sandbox Description"
-        >
-          <Textarea
-            maxLength={280}
-            onChange={onDescriptionChange}
-            onKeyDown={submitOnEnter}
-            placeholder="Description"
-            rows={2}
-            value={description}
-          />
-        </FormField>
-
-        <TagInput onChange={setNewTags} value={newTags} />
-        <ThumbnailEdit />
-      </Stack>
-      <Stack justify="space-between" paddingX={2}>
-        <Button
-          css={{ flex: 1 }}
-          onClick={() => setEditing(false)}
-          variant="link"
-        >
-          Cancel
-        </Button>
-
-        <Button css={{ flex: 1 }} type="submit" variant="secondary">
-          Save
-        </Button>
-      </Stack>
-    </form>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/Summary/TemplateConfig/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/Summary/TemplateConfig/elements.ts
deleted file mode 100644
index 9d095910048..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/Summary/TemplateConfig/elements.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { Popover, PopoverDisclosure } from 'reakit/Popover';
-import styled, { css } from 'styled-components';
-
-const buttonStyles = css`
-  padding: 0;
-  border: 0;
-  background: transparent;
-  cursor: pointer;
-`;
-
-export const IconButton = styled.button`
-  ${buttonStyles}
-`;
-
-export const IconWrapper = styled(Popover)`
-  ${({ theme }) => css`
-    z-index: 12;
-    padding: ${theme.space[3]}px;
-    background: ${theme.colors.sideBar.background};
-  `};
-`;
-
-export const IconList = styled.ul`
-  ${({ theme }) => css`
-    list-style: none;
-    display: grid;
-    padding: ${theme.space[2]}px;
-    margin: 0;
-    grid-template-columns: repeat(7, 24px);
-    grid-gap: 10px;
-    border: 1px solid ${theme.colors.sideBar.border};
-
-    li {
-      cursor: pointer;
-    }
-  `};
-`;
-
-export const OpenPopover = styled(PopoverDisclosure)`
-  ${buttonStyles};
-
-  color: inherit;
-  width: 100%;
-`;
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/Summary/TemplateConfig/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/Summary/TemplateConfig/index.tsx
deleted file mode 100644
index e403fccd79e..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/Summary/TemplateConfig/index.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import getIcon from '@codesandbox/common/lib/templates/icons';
-import { ColorIcons as Icons } from '@codesandbox/common/lib/utils/getTemplateIcon';
-import { Element, ListAction, Text } from '@codesandbox/components';
-import React, { FunctionComponent, useState } from 'react';
-import { usePopoverState } from 'reakit/Popover';
-
-import { useAppState, useActions } from 'app/overmind';
-
-import { IconButton, IconList, IconWrapper, OpenPopover } from './elements';
-
-export const TemplateConfig: FunctionComponent = () => {
-  const { editTemplate } = useActions().workspace;
-  const {
-    currentSandbox: { customTemplate, template },
-  } = useAppState().editor;
-
-  const [popupVisible, setPopupVisible] = useState(false);
-  const iconPopover = usePopoverState({
-    placement: 'top',
-    visible: popupVisible,
-  });
-  const [selectedIcon, setSelectedIcon] = useState(
-    customTemplate.iconUrl || ''
-  );
-
-  const DefaultIcon = getIcon(template);
-  const TemplateIcon = Icons[selectedIcon];
-
-  const setIcon = (key: string) => {
-    setSelectedIcon(key);
-    setPopupVisible(false);
-    editTemplate({ ...customTemplate, iconUrl: key });
-  };
-
-  return (
-    <OpenPopover {...iconPopover}>
-      <ListAction justify="space-between" gap={2}>
-        <Text>Template Icon</Text>
-
-        <Element>
-          <Element>
-            {selectedIcon && TemplateIcon ? (
-              <TemplateIcon width={24} />
-            ) : (
-              <DefaultIcon width={24} />
-            )}
-          </Element>
-
-          <IconWrapper
-            aria-label="Choose an Icon"
-            hideOnClickOutside
-            hideOnEsc
-            {...iconPopover}
-          >
-            <IconList>
-              {Object.keys(Icons).map((name: string) => {
-                const TemplateIconMap = Icons[name];
-
-                return (
-                  <li key={name}>
-                    <IconButton onClick={() => setIcon(name)}>
-                      <TemplateIconMap width={24} />
-                    </IconButton>
-                  </li>
-                );
-              })}
-            </IconList>
-          </IconWrapper>
-        </Element>
-      </ListAction>
-    </OpenPopover>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/Summary/ThumbnailEdit.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/Summary/ThumbnailEdit.tsx
deleted file mode 100644
index 672443baa83..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/Summary/ThumbnailEdit.tsx
+++ /dev/null
@@ -1,172 +0,0 @@
-import React from 'react';
-import { useAppState, useActions } from 'app/overmind';
-import { Element, Tooltip } from '@codesandbox/components';
-import css from '@styled-system/css';
-
-const readDataURL = (file: File): Promise<string | ArrayBuffer> =>
-  new Promise(resolve => {
-    const reader = new FileReader();
-    reader.onload = e => {
-      resolve(e.target.result);
-    };
-    reader.readAsDataURL(file);
-  });
-
-type parsedFiles = { [k: string]: { dataURI: string; type: string } };
-const getFile = async (file: File): Promise<parsedFiles> => {
-  const returnedFiles = {};
-  const dataURI = await readDataURL(file);
-  // @ts-ignore
-  const fileName = file.path || file.name;
-
-  returnedFiles[`thumbnail.${fileName.split('.').pop()}`] = {
-    dataURI,
-    type: file.type,
-  };
-
-  return returnedFiles;
-};
-export const ThumbnailEdit = () => {
-  const {
-    files: { thumbnailToBeCropped },
-  } = useActions();
-  const {
-    editor: {
-      currentSandbox: { modules },
-    },
-    workspace: { uploadingThumb },
-  } = useAppState();
-  const thumbnailExists = modules.find(m => m.path.includes('/thumbnail.'));
-
-  const uploadThumbnail = () => {
-    const fileSelector = document.createElement('input');
-    fileSelector.setAttribute('type', 'file');
-    fileSelector.setAttribute('accept', 'image/png,image/gif,image/jpeg');
-    fileSelector.onchange = async event => {
-      const target = event.target as HTMLInputElement;
-      const file = await getFile(target.files[0]);
-
-      thumbnailToBeCropped({
-        file,
-      });
-    };
-
-    fileSelector.click();
-  };
-
-  const getText = () => {
-    if (uploadingThumb) {
-      return 'Uploading...';
-    }
-    if (thumbnailExists) {
-      return (
-        <Element
-          css={css({
-            position: 'relative',
-            maxHeight: '100%',
-          })}
-        >
-          <img
-            css={{
-              maxWidth: '100%',
-              maxHeight: '100%',
-              margin: 'auto',
-              display: 'block',
-            }}
-            src={thumbnailExists.code}
-            alt="Thumbnail"
-          />
-          <Element
-            css={{
-              position: 'absolute',
-              background: 'rgba(21,21,21, 0.8)',
-              top: 0,
-              left: 0,
-              width: '100%',
-              height: '100%',
-            }}
-          >
-            <Tooltip label="Replace Thumbnail">
-              <button
-                type="button"
-                onClick={uploadThumbnail}
-                css={css({
-                  cursor: 'pointer',
-                  position: 'absolute',
-                  border: 'none',
-                  padding: 0,
-                  transform: 'translateX(-50%) translateY(-50%)',
-                  top: '50%',
-                  left: '50%',
-                  background: 'transparent',
-                  transition: '200ms ease all',
-                  ':hover': {
-                    borderRadius: '50%',
-                    backgroundColor: 'sideBar.background',
-                  },
-                })}
-              >
-                <svg
-                  width="32"
-                  height="32"
-                  viewBox="0 0 32 32"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <mask
-                    id="mask0"
-                    mask-type="alpha"
-                    maskUnits="userSpaceOnUse"
-                    x="7"
-                    y="8"
-                    width="17"
-                    height="17"
-                  >
-                    <rect
-                      x="7.70972"
-                      y="8.28076"
-                      width="15.8779"
-                      height="16"
-                      fill="#C4C4C4"
-                    />
-                  </mask>
-                  <g mask="url(#mask0)">
-                    <path
-                      fillRule="evenodd"
-                      clipRule="evenodd"
-                      d="M21.7164 8.89948C21.3773 8.55777 20.8341 8.55118 20.503 8.88475L19.9037 9.48874L22.3596 11.9636L22.959 11.3596C23.29 11.026 23.2835 10.4786 22.9444 10.1369L21.7164 8.89948ZM21.7603 12.5676L19.3043 10.0927L9.11489 20.3605L7.94537 24.0139L11.5709 22.8354L21.7603 12.5676Z"
-                      fill="white"
-                    />
-                  </g>
-                </svg>
-              </button>
-            </Tooltip>
-          </Element>
-        </Element>
-      );
-    }
-    return '+ Add thumbnail';
-  };
-  return (
-    <button
-      onClick={() => (thumbnailExists ? null : uploadThumbnail())}
-      type="button"
-      css={css({
-        marginTop: 6,
-        background: 'transparent',
-        borderWidth: '1px',
-        borderStyle: 'dashed',
-        borderColor: 'sideBar.border',
-        color: 'mutedForeground',
-        height: 103,
-        padding: 0,
-        outline: 'none',
-        cursor: thumbnailExists ? 'auto' : 'pointer',
-        overflow: 'hidden',
-      })}
-      disabled={uploadingThumb}
-    >
-      {getText()}
-    </button>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/Summary/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/Summary/index.tsx
deleted file mode 100644
index 448db51b056..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/Summary/index.tsx
+++ /dev/null
@@ -1,258 +0,0 @@
-import getTemplateDefinition from '@codesandbox/common/lib/templates';
-import { getSandboxName } from '@codesandbox/common/lib/utils/get-sandbox-name';
-import { getTemplateIcon } from '@codesandbox/common/lib/utils/getTemplateIcon';
-import {
-  githubRepoUrl,
-  profileUrl,
-  sandboxUrl,
-} from '@codesandbox/common/lib/utils/url-generator';
-import {
-  Collapsible,
-  Element,
-  Label,
-  Link,
-  List,
-  ListAction,
-  ListItem,
-  Stack,
-  Stats,
-  Switch,
-  Tags,
-  Text,
-  IconButton,
-  Button,
-  Tooltip,
-} from '@codesandbox/components';
-import css from '@styled-system/css';
-import { Markdown } from 'app/components/Markdown';
-import { TeamAvatar } from 'app/components/TeamAvatar';
-import { useAppState, useActions } from 'app/overmind';
-import React, { useEffect } from 'react';
-
-import { GitHubIcon } from '../../GitHub/Icons';
-import { EditSummary } from './EditSummary';
-import { TemplateConfig } from './TemplateConfig';
-
-const LinkOrSpan = ({ href, ...props }) => {
-  const component = href ? Link : 'span';
-  return React.createElement(component, { href, ...props });
-};
-
-export const Summary = () => {
-  const {
-    currentSandbox,
-    isForkingSandbox,
-    sessionFrozen,
-  } = useAppState().editor;
-  const { editingSandboxInfo } = useAppState().workspace;
-  const {
-    frozenUpdated,
-    sessionFreezeOverride,
-    forkSandboxClicked,
-  } = useActions().editor;
-  const { toggleEditingSandboxInfo } = useActions().workspace;
-  const {
-    author,
-    description,
-    isFrozen,
-    customTemplate,
-    template,
-    forkedFromSandbox,
-    forkedTemplateSandbox,
-    tags,
-    team,
-  } = currentSandbox;
-
-  useEffect(() => {
-    // always freeze it on start
-    if (customTemplate) {
-      frozenUpdated(true);
-    }
-  }, [customTemplate, frozenUpdated]);
-
-  const updateFrozenState = e => {
-    e.preventDefault();
-    if (customTemplate) {
-      return sessionFreezeOverride(!sessionFrozen);
-    }
-
-    return frozenUpdated(!isFrozen);
-  };
-
-  const isForked = forkedFromSandbox || forkedTemplateSandbox;
-  const { url: templateUrl } = getTemplateDefinition(template);
-
-  return (
-    <Collapsible
-      title={customTemplate ? 'Template Info' : 'Sandbox Info'}
-      defaultOpen
-    >
-      <Element marginBottom={editingSandboxInfo ? 10 : 6}>
-        {editingSandboxInfo ? (
-          <EditSummary setEditing={toggleEditingSandboxInfo} />
-        ) : (
-          <Stack as="section" direction="vertical" gap={2} paddingX={2}>
-            <Stack justify="space-between" align="center">
-              {customTemplate ? (
-                <Stack gap={2} align="center">
-                  <TemplateIcon
-                    templateName={customTemplate.title}
-                    iconUrl={customTemplate.iconUrl}
-                    environment={template}
-                  />
-                  <Text maxWidth="100%">{getSandboxName(currentSandbox)}</Text>
-                </Stack>
-              ) : (
-                <Text maxWidth="100%">{getSandboxName(currentSandbox)}</Text>
-              )}
-              <IconButton
-                name="edit"
-                title="Edit description"
-                size={12}
-                onClick={() => toggleEditingSandboxInfo(true)}
-              />
-            </Stack>
-
-            <Element itemProp="text">
-              <Markdown
-                source={
-                  description || 'Add a short description for this sandbox'
-                }
-              />
-            </Element>
-
-            {tags.length ? (
-              <Element marginTop={4}>
-                <Tags tags={tags} />
-              </Element>
-            ) : null}
-          </Stack>
-        )}
-      </Element>
-
-      <Stack as="section" direction="vertical" gap={4} paddingX={2}>
-        {team && !currentSandbox.git ? (
-          <LinkOrSpan href={author && profileUrl(author.username)}>
-            <Stack gap={2} align="center" css={{ display: 'inline-flex' }}>
-              <TeamAvatar name={team.name} avatar={team.avatarUrl} />
-              <Element>
-                <Text variant={author ? 'body' : 'muted'} block>
-                  {team.name}
-                </Text>
-                {author && (
-                  <Text size={2} marginTop={1} variant="muted" maxWidth="100%">
-                    {author.name || author.username}
-                  </Text>
-                )}
-              </Element>
-            </Stack>
-          </LinkOrSpan>
-        ) : null}
-
-        {!author && currentSandbox.git ? (
-          <Link href={githubRepoUrl(currentSandbox.git)} target="_blank">
-            <Stack gap={2} align="center">
-              <Stack
-                justify="center"
-                align="center"
-                css={css({
-                  size: 8,
-                  minWidth: 8,
-                  borderRadius: 'small',
-                  border: '1px solid',
-                  borderColor: 'avatar.border',
-                })}
-              >
-                <GitHubIcon title="GitHub repository" width={20} height={20} />
-              </Stack>
-              <Link variant="muted" maxWidth="100%">
-                {currentSandbox.git.username}/{currentSandbox.git.repo}
-              </Link>
-            </Stack>
-          </Link>
-        ) : null}
-
-        <Stats sandbox={currentSandbox} />
-      </Stack>
-
-      {!author && currentSandbox.git ? (
-        <Stack as="section" direction="vertical" gap={4} paddingX={2}>
-          <Text variant="muted" size={3}>
-            This sandbox is in sync with{' '}
-            <Text weight="bold">{currentSandbox.git.branch}</Text> on GitHub.
-            You have to fork to make changes
-          </Text>
-          <Button
-            marginTop={8}
-            variant="primary"
-            loading={isForkingSandbox}
-            onClick={() => forkSandboxClicked({})}
-          >
-            {isForkingSandbox ? 'Forking...' : 'Fork'}
-          </Button>
-        </Stack>
-      ) : null}
-
-      <Divider marginTop={8} marginBottom={4} />
-
-      <List>
-        {customTemplate && <TemplateConfig />}
-
-        <Tooltip label="Protected sandboxes cannot be edited unless they are forked.">
-          <ListAction justify="space-between" onClick={updateFrozenState}>
-            <Label htmlFor="frozen">Protected</Label>
-
-            <Switch
-              id="frozen"
-              onChange={updateFrozenState}
-              on={customTemplate ? sessionFrozen : isFrozen}
-            />
-          </ListAction>
-        </Tooltip>
-
-        {isForked ? (
-          <ListItem justify="space-between">
-            <Text>{forkedTemplateSandbox ? 'Template' : 'Forked From'}</Text>
-            <Link
-              variant="muted"
-              href={sandboxUrl(forkedFromSandbox || forkedTemplateSandbox)}
-              target="_blank"
-            >
-              {getSandboxName(forkedFromSandbox || forkedTemplateSandbox)}
-            </Link>
-          </ListItem>
-        ) : null}
-        <ListItem justify="space-between" gap={2}>
-          <Text>Environment</Text>
-          <Link
-            variant="muted"
-            href={templateUrl}
-            target="_blank"
-            maxWidth="100%"
-          >
-            {template}
-          </Link>
-        </ListItem>
-      </List>
-    </Collapsible>
-  );
-};
-
-const TemplateIcon = ({ iconUrl, templateName, environment }) => {
-  const { UserIcon } = getTemplateIcon(templateName, iconUrl, environment);
-
-  return <UserIcon />;
-};
-
-const Divider = props => (
-  <Element
-    as="hr"
-    css={css({
-      width: '100%',
-      border: 'none',
-      borderBottom: '1px solid',
-      borderColor: 'sideBar.border',
-    })}
-    {...props}
-  />
-);
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/index.tsx
deleted file mode 100644
index 77237aa5dc8..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/index.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Stack } from '@codesandbox/components';
-import React, { FunctionComponent } from 'react';
-
-import { Config } from './Config';
-import { Delete } from './Delete';
-import { Permissions } from './Permissions';
-import { Summary } from './Summary';
-
-export const ProjectInfo: FunctionComponent = () => (
-  <Stack css={{ height: '100%' }} direction="vertical" justify="space-between">
-    <div>
-      <Summary />
-      <Permissions />
-      <Config />
-    </div>
-
-    <Delete />
-  </Stack>
-);
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Search/components/FileFilters.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Search/components/FileFilters.tsx
deleted file mode 100644
index 37e47a70567..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Search/components/FileFilters.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from 'react';
-import css from '@styled-system/css';
-import { Element, Input } from '@codesandbox/components';
-import { useAppState, useActions } from 'app/overmind';
-
-export const FileFilters = () => {
-  const state = useAppState();
-  const { workspace } = useActions();
-
-  return (
-    <>
-      <Element
-        css={css({
-          borderBottomWidth: '1px',
-          borderBottomStyle: 'solid',
-          borderBottomColor: 'sideBar.border',
-          marginBottom: 4,
-        })}
-      />
-
-      <Element paddingX={2} marginBottom={4}>
-        <Input
-          placeholder="Files to Include"
-          value={state.workspace.searchOptions.filesToInclude}
-          onChange={e => workspace.filesToIncludeChanged(e.target.value)}
-        />
-      </Element>
-
-      <Element paddingX={2} marginBottom={4}>
-        <Input
-          placeholder="Files to Exclude"
-          value={state.workspace.searchOptions.filesToExclude}
-          onChange={e => workspace.filesToExcludeChanged(e.target.value)}
-        />
-      </Element>
-    </>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Search/components/Result.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Search/components/Result.tsx
deleted file mode 100644
index 7a0d50744ea..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Search/components/Result.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-import React from 'react';
-import { getType } from 'app/utils/get-type';
-import { Text, Element, ListAction, Stack } from '@codesandbox/components';
-import css from '@styled-system/css';
-import { useActions, useAppState, useEffects } from 'app/overmind';
-import { EntryIcons } from '../../../Files/DirectoryEntry/Entry/EntryIcons';
-import { ToggleIcon } from '../icons';
-
-export const Result = ({ i, updateRender }) => {
-  const {
-    workspace: { searchResults },
-  } = useAppState();
-  const { editor, workspace } = useActions();
-  const { vscode } = useEffects();
-  const { id, title, matches, code, open } = searchResults[i];
-
-  const openFile = async (selectedFileId: string, match: [number, number]) => {
-    await editor.moduleSelected({ id: selectedFileId });
-    const [parsedHead, parsedAnchor] = match;
-    if (!isNaN(parsedHead) && !isNaN(parsedAnchor)) {
-      vscode.setSelection(parsedHead, parsedAnchor);
-    }
-  };
-
-  return (
-    <Element key={id} paddingY={2} css={css({ display: 'block' })}>
-      <button
-        type="button"
-        css={css({
-          color: 'mutedForeground',
-          background: 'transparent',
-          padding: 0,
-          border: 'none',
-          cursor: 'pointer',
-          width: '100%',
-          paddingLeft: 2,
-          ':hover': {
-            color: 'sideBar.foreground',
-          },
-        })}
-        onClick={() => {
-          workspace.openResult(i);
-          updateRender(i);
-        }}
-      >
-        <Stack gap={2} paddingY={1} align="center">
-          <Element
-            css={css({
-              color: 'inputOption.activeBorder',
-              transition: 'transform 100ms ease',
-              transform: !open ? 'rotate(-90deg)' : 'rotate(0deg)',
-            })}
-          >
-            <ToggleIcon />
-          </Element>
-
-          <EntryIcons type={getType(title)} />
-
-          <Text block size={3}>
-            {title}
-          </Text>
-        </Stack>
-      </button>
-
-      {open ? (
-        <Element>
-          {matches.map(match => {
-            const firstPart = code
-              .substring(match[0] - 40, match[0])
-              .split('\n');
-            const secondPart = code
-              .substring(match[1], match[1] + 100)
-              .split('\n');
-            return (
-              <ListAction css={css({ minHeight: '28px' })}>
-                <button
-                  type="button"
-                  css={css({
-                    paddingLeft: 4,
-                    '-webkit-appearance': 'none',
-                    border: 'none',
-                    background: 'transparent',
-                    display: 'block',
-                    width: '100%',
-                    cursor: 'pointer',
-                    color: 'mutedForeground',
-
-                    ':hover': {
-                      color: 'sideBar.foreground',
-                    },
-                  })}
-                  key={`${match[0]}-${match[1]}`}
-                  onClick={() => openFile(id, match)}
-                >
-                  <Stack gap={2} align="center">
-                    <Text
-                      block
-                      size={3}
-                      css={css({
-                        whiteSpace: 'nowrap',
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                      })}
-                    >
-                      {firstPart[firstPart.length - 1]}
-                      <span
-                        css={css({
-                          background: 'rgba(251, 204, 67, 0.2)',
-                        })}
-                      >
-                        {code.substring(match[0], match[1])}
-                      </span>
-                      {secondPart[0]}
-                    </Text>
-                  </Stack>
-                </button>
-              </ListAction>
-            );
-          })}
-        </Element>
-      ) : null}
-    </Element>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Search/components/SearchOptions.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Search/components/SearchOptions.tsx
deleted file mode 100644
index dc79a6a4033..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Search/components/SearchOptions.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import React from 'react';
-import { Button, Stack, Tooltip } from '@codesandbox/components';
-import css from '@styled-system/css';
-import { useAppState, useActions } from 'app/overmind';
-import { OptionTypes } from 'app/overmind/namespaces/workspace/state';
-import { CaseSensitiveIcon, RegexIcon } from '../icons';
-
-const OptionButton = ({ title, active, onClick, children }) => (
-  <Tooltip label={title}>
-    <Button
-      variant="link"
-      css={css({
-        paddingLeft: 0,
-        paddingRight: 0,
-        width: '16px',
-        color: active ? 'sideBar.foreground' : 'tab.inactiveForeground',
-        borderRadius: '1px',
-        '.frame': {
-          display: active ? 'block' : 'none',
-        },
-        '.overlay': {
-          display: 'none',
-        },
-        ':hover .inner': {
-          color: 'black',
-        },
-        ':hover .overlay': {
-          display: 'block',
-        },
-        ':focus:not(:disabled)': {
-          outline: 'none',
-        },
-      })}
-      onClick={onClick}
-    >
-      {children}
-    </Button>
-  </Tooltip>
-);
-
-export const SearchOptions = () => {
-  const {
-    workspace: { searchOptions },
-  } = useAppState();
-  const {
-    workspace: { searchOptionsToggled },
-  } = useActions();
-
-  return (
-    <Stack
-      css={css({
-        position: 'absolute',
-        right: 2,
-        top: 0,
-      })}
-      gap={1}
-    >
-      <OptionButton
-        onClick={() => searchOptionsToggled(OptionTypes.CaseSensitive)}
-        active={searchOptions[OptionTypes.CaseSensitive]}
-        title="Case Sensitive"
-      >
-        <CaseSensitiveIcon />
-      </OptionButton>
-      <OptionButton
-        onClick={() => searchOptionsToggled(OptionTypes.Regex)}
-        active={searchOptions[OptionTypes.Regex]}
-        title="Allow Regex"
-      >
-        <RegexIcon />
-      </OptionButton>
-    </Stack>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Search/components/TabButton.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Search/components/TabButton.tsx
deleted file mode 100644
index 398b27864f8..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Search/components/TabButton.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react';
-import { Text } from '@codesandbox/components';
-import css from '@styled-system/css';
-
-export const TabButton = ({ children, onClick, active }) => (
-  <Text
-    variant="muted"
-    align="center"
-    paddingY={1}
-    block
-    css={css({
-      cursor: 'pointer',
-      backgroundColor: active ? 'input.background' : 'transparent',
-      border: 'none',
-      color: active ? 'sideBar.foreground' : 'mutedForeground',
-      borderRadius: 'small',
-      width: '100%',
-
-      ':hover': {
-        color: 'sideBar.foreground',
-        backgroundColor: 'input.background',
-      },
-    })}
-    as="button"
-    onClick={onClick}
-  >
-    {children}
-  </Text>
-);
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Search/icons.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Search/icons.tsx
deleted file mode 100644
index 97510ad6799..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Search/icons.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import React from 'react';
-import css from '@styled-system/css';
-
-export const SearchIcon = props => (
-  <svg
-    width={12}
-    css={css({
-      position: 'absolute',
-      left: '6px',
-      color: 'secondaryButton.foreground',
-      top: '7px',
-    })}
-    height={13}
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M6.966 7.932a4.15 4.15 0 01-2.69.993C1.916 8.925 0 6.927 0 4.463 0 1.998 1.915 0 4.277 0s4.276 1.998 4.276 4.463c0 1.063-.356 2.04-.951 2.806L12 11.86l-.635.663-4.399-4.59zm.689-3.47c0 1.947-1.513 3.525-3.378 3.525C2.41 7.987.899 6.41.899 4.463.899 2.516 2.41.938 4.277.938c1.865 0 3.378 1.578 3.378 3.525z"
-      css={css({ fill: 'tab.inactiveForeground' })}
-    />
-  </svg>
-);
-
-export const CaseSensitiveIcon = props => (
-  <svg
-    width="14"
-    height="14"
-    viewBox="0 0 14 14"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <path
-      className="frame"
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M12 0H2C0.895431 0 0 0.89543 0 2V12C0 13.1046 0.89543 14 2 14H12C13.1046 14 14 13.1046 14 12V2C14 0.895431 13.1046 0 12 0ZM1 2C1 1.44772 1.44772 1 2 1H12C12.5523 1 13 1.44772 13 2V12C13 12.5523 12.5523 13 12 13H2C1.44772 13 1 12.5523 1 12V2Z"
-      fill="currentColor"
-    />
-    <path
-      className="overlay"
-      fillOpacity={0.4}
-      d="M12 0H2C0.895431 0 0 0.89543 0 2V12C0 13.1046 0.89543 14 2 14H12C13.1046 14 14 13.1046 14 12V2C14 0.895431 13.1046 0 12 0Z"
-      fill="currentColor"
-    />
-    <path
-      className="inner"
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M3.89149 8.35228L3.30626 10H2.56763L4.70399 4.18182H5.43126L7.56763 10H6.82899L6.24376 8.35228H3.89149ZM5.0449 5.10228L4.11308 7.72728H6.02217L5.09035 5.10228H5.0449ZM10.3225 9.4091C10.1861 9.69319 9.78842 10.1023 9.02706 10.1023C8.19751 10.1023 7.53842 9.61364 7.53842 8.76137C7.53842 7.76137 8.42195 7.58239 9.2316 7.47728C9.36504 7.46012 9.48537 7.44664 9.59323 7.43456L9.59335 7.43455L9.5934 7.43454C10.1284 7.37462 10.3566 7.34906 10.3566 7.07955V7.05682C10.3566 6.49716 10.0526 6.17046 9.43615 6.17046C8.79695 6.17046 8.44751 6.51137 8.29979 6.82955L7.66342 6.60228C8.00433 5.80682 8.75433 5.57955 9.41342 5.57955C9.97024 5.57955 11.0271 5.73864 11.0271 7.12501V10H10.3566V9.4091H10.3225ZM8.20888 8.79546C8.20888 9.26137 8.59524 9.50001 9.12933 9.50001C9.92479 9.50001 10.3566 8.96591 10.3566 8.42046V7.80682C10.2513 7.93317 9.58994 8.01074 9.26738 8.04857L9.26736 8.04858L9.19751 8.05682C8.67479 8.12501 8.20888 8.2841 8.20888 8.79546Z"
-      fill="currentColor"
-    />
-  </svg>
-);
-
-export const RegexIcon = props => (
-  <svg
-    width="14"
-    height="14"
-    viewBox="0 0 14 14"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <path
-      className="overlay"
-      fillOpacity={0.4}
-      d="M12 0H2C0.895431 0 0 0.89543 0 2V12C0 13.1046 0.89543 14 2 14H12C13.1046 14 14 13.1046 14 12V2C14 0.895431 13.1046 0 12 0Z"
-      fill="currentColor"
-    />
-    <path
-      className="frame"
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M2 0H12C13.1046 0 14 0.895431 14 2V12C14 13.1046 13.1046 14 12 14H2C0.89543 14 0 13.1046 0 12V2C0 0.89543 0.895431 0 2 0ZM2 1C1.44772 1 1 1.44772 1 2V12C1 12.5523 1.44772 13 2 13H12C12.5523 13 13 12.5523 13 12V2C13 1.44772 12.5523 1 12 1H2Z"
-      fill="currentColor"
-    />
-    <path
-      className="inner"
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M2 8H5V11H2V8ZM9.52555 8H8.47445L8.56204 5.70833L6.52555 6.9375L6 6.0625L8.14599 5L6 3.9375L6.52555 3.0625L8.56204 4.29167L8.47445 2H9.52555L9.43796 4.29167L11.4745 3.0625L12 3.9375L9.85401 5L12 6.0625L11.4745 6.9375L9.43796 5.70833L9.52555 8Z"
-      fill="currentColor"
-    />
-  </svg>
-);
-
-export const MoreIcon = () => (
-  <svg
-    width="12"
-    height="3"
-    viewBox="0 0 12 3"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M10.6667 2.66667C9.93029 2.66667 9.33333 2.06971 9.33333 1.33333C9.33333 0.596954 9.93029 -9.047e-08 10.6667 -5.82818e-08C11.403 -2.60936e-08 12 0.596954 12 1.33333C12 2.06971 11.403 2.66667 10.6667 2.66667ZM6 2.66667C5.26362 2.66667 4.66667 2.06971 4.66667 1.33333C4.66667 0.596954 5.26362 -2.94456e-07 6 -2.62268e-07C6.73638 -2.3008e-07 7.33333 0.596954 7.33333 1.33333C7.33333 2.06971 6.73638 2.66667 6 2.66667ZM-5.44177e-05 1.33333C-5.44499e-05 2.06971 0.5969 2.66667 1.33328 2.66667C2.06966 2.66667 2.66661 2.06971 2.66661 1.33333C2.66661 0.596954 2.06966 -4.34069e-07 1.33328 -4.66257e-07C0.5969 -4.98445e-07 -5.43855e-05 0.596954 -5.44177e-05 1.33333Z"
-      fill="currentColor"
-    />
-  </svg>
-);
-
-export const ToggleIcon = () => (
-  <svg
-    width="8"
-    height="6"
-    viewBox="0 0 8 6"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path d="M4.00008 6L0 0L8 0L4.00008 6Z" fill="currentColor" />
-  </svg>
-);
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Search/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Search/index.tsx
deleted file mode 100644
index 5f713605102..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Search/index.tsx
+++ /dev/null
@@ -1,262 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { VariableSizeList as List } from 'react-window';
-import AutoSizer from 'react-virtualized-auto-sizer';
-import {
-  Collapsible,
-  Text,
-  Element,
-  Input,
-  Button,
-  Stack,
-} from '@codesandbox/components';
-import { useAppState, useActions } from 'app/overmind';
-
-import css from '@styled-system/css';
-import { Module } from '@codesandbox/common/lib/types';
-import { Result } from './components/Result';
-import SearchWorker from './search.worker';
-import { TabButton } from './components/TabButton';
-import { SearchOptions } from './components/SearchOptions';
-import { MoreIcon, SearchIcon } from './icons';
-
-import { FileFilters } from './components/FileFilters';
-
-export const Search = () => {
-  const {
-    user,
-    editor: { currentSandbox },
-    workspace: { searchValue, searchResults, searchOptions },
-  } = useAppState();
-  const {
-    workspace: {
-      searchValueChanged,
-      searchResultsChanged,
-      searchOptionsToggled,
-    },
-  } = useActions();
-  const list = useRef<any>();
-  const allModules = JSON.parse(JSON.stringify(currentSandbox.modules));
-  const [modules, setModules] = useState<Module[]>(allModules);
-  const [loading, setLoading] = useState(false);
-
-  const toggleSearch = () => {
-    searchOptionsToggled('openFilesSearch');
-
-    if (searchOptions.openFilesSearch) {
-      const openFiles = (
-        window.CSEditor?.editor?.editorService?.editors || []
-      ).map(file => file.name);
-      setModules(
-        allModules.filter((file: Module) => openFiles.includes(file.title))
-      );
-    } else {
-      setModules(allModules);
-    }
-  };
-
-  const searchWorker = useRef<any>();
-
-  const createWorker = async () => {
-    searchWorker.current = await new SearchWorker();
-  };
-
-  useEffect(() => {
-    createWorker();
-  }, []);
-
-  const searchFiles = async (value: string) => {
-    if (value.length > 1) {
-      if (searchWorker.current) {
-        setLoading(true);
-        const currentResults = await searchWorker.current.search(
-          value,
-          modules,
-          {
-            ...searchOptions,
-          }
-        );
-        setLoading(false);
-        searchResultsChanged(
-          currentResults.map((res, i) => {
-            if (i < 2) {
-              return {
-                ...res,
-                open: true,
-              };
-            }
-
-            return res;
-          })
-        );
-
-        if (list.current) {
-          list.current.resetAfterIndex(0);
-        }
-      }
-    } else {
-      searchResultsChanged([]);
-    }
-  };
-
-  useEffect(() => {
-    searchFiles(searchValue);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [...Object.values(searchOptions), searchValue]);
-  const getItemSize = i => {
-    if (searchResults[i].open) {
-      return 32 + searchResults[i].matches.length * 28;
-    }
-
-    return 32;
-  };
-  const Row = ({ index, style }) => (
-    <Element style={style}>
-      <Result
-        i={index}
-        updateRender={(i: number) => list.current.resetAfterIndex(i)}
-      />
-    </Element>
-  );
-
-  return (
-    <Collapsible
-      defaultOpen
-      title="Search"
-      css={css({
-        height: '100%',
-        'div[open]': {
-          height: 'calc(100% - 36px)',
-          overflow: 'hidden',
-          paddingBottom: 0,
-          borderBottom: 'none',
-        },
-      })}
-    >
-      <Element
-        paddingY={2}
-        marginBottom={5}
-        css={{
-          height: 'calc(100% - 16px)',
-          overflow: 'hidden',
-          position: 'relative',
-        }}
-      >
-        <Element
-          paddingX={2}
-          css={{
-            position: 'relative',
-            display: 'grid',
-            gridTemplateColumns: '1fr 26px',
-            gridGap: 2,
-          }}
-        >
-          <Element
-            css={css({
-              position: 'relative',
-            })}
-          >
-            <SearchIcon />
-            <Input
-              marginBottom={4}
-              css={css({
-                paddingRight: '50px',
-                paddingLeft: '30px',
-              })}
-              value={searchValue}
-              placeholder="Search"
-              onChange={e => searchValueChanged(e.target.value)}
-            />
-            <SearchOptions />
-          </Element>
-          <Button
-            variant="secondary"
-            autoWidth
-            onClick={() => searchOptionsToggled('showFileFilters')}
-            css={css({
-              color: searchOptions.showFileFilters
-                ? 'sideBar.foreground'
-                : 'tab.inactiveForeground',
-
-              ':hover:not(:disabled)': {
-                color: 'sideBar.foreground',
-              },
-
-              ':focus:not(:disabled)': {
-                outline: 'none',
-              },
-            })}
-          >
-            <MoreIcon />
-          </Button>
-        </Element>
-        {searchOptions.showFileFilters ? <FileFilters /> : null}
-        <Stack
-          gap={2}
-          padding={2}
-          css={css({
-            borderWidth: 1,
-            borderStyle: 'solid',
-            borderColor: 'sideBar.border',
-            borderLeftWidth: 0,
-            borderRightWidth: 0,
-          })}
-        >
-          <TabButton
-            active={!searchOptions.openFilesSearch}
-            onClick={toggleSearch}
-          >
-            Sandbox
-          </TabButton>
-          <TabButton
-            active={searchOptions.openFilesSearch}
-            onClick={toggleSearch}
-          >
-            Open Files
-          </TabButton>
-        </Stack>
-        {searchResults.length ? (
-          <Element
-            padding={2}
-            css={css({
-              borderWidth: 0,
-              borderBottomWidth: 1,
-              borderStyle: 'solid',
-              borderColor: 'sideBar.border',
-            })}
-          >
-            <Text block align="center">
-              {searchResults.reduce(
-                // @ts-ignore
-                (acc, curr) => acc + curr.matches.length,
-                0
-              )}{' '}
-              results in {searchResults.length} files
-            </Text>
-          </Element>
-        ) : null}
-        <Element marginTop={4} css={{ height: 'calc(100% - 16px)' }}>
-          {searchResults.length && searchValue ? (
-            <AutoSizer>
-              {({ height, width }) => (
-                <List
-                  height={user ? height : height - 140}
-                  width={width}
-                  itemCount={searchResults.length}
-                  itemSize={getItemSize}
-                  ref={list}
-                >
-                  {Row}
-                </List>
-              )}
-            </AutoSizer>
-          ) : null}
-          {!searchResults.length && searchValue.length > 1 && !loading && (
-            <Stack justify="center" marginTop={10}>
-              <Text variant="muted">No results found</Text>
-            </Stack>
-          )}
-        </Element>
-      </Element>
-    </Collapsible>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Search/search.worker.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Search/search.worker.ts
deleted file mode 100644
index e03ba7d9c9c..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Search/search.worker.ts
+++ /dev/null
@@ -1,128 +0,0 @@
-import { Module } from '@codesandbox/common/lib/types';
-import minimatch from 'minimatch';
-import { OptionTypes } from 'app/overmind/namespaces/workspace/state';
-
-type Options = {
-  [OptionTypes.CaseSensitive]: boolean;
-  [OptionTypes.Regex]: boolean;
-  [OptionTypes.MatchFullWord]: boolean;
-  filesToExclude: string;
-  filesToInclude: string;
-};
-
-export default class SearchWorker {
-  async search(term: string, modules: Module[], options: Options) {
-    const { filesToExclude, filesToInclude, regex, caseSensitive } = options;
-
-    let searchable: Module[] = modules
-      .map(m => ({
-        ...m,
-        matches: [],
-        open: false,
-      }))
-      // do not search binary files
-      .filter(module => !module.isBinary);
-
-    if (filesToInclude) {
-      const matchesFiles = createIncludedFiles(filesToInclude, {
-        nonegate: true,
-      });
-
-      searchable = searchable.filter(file => matchesFiles.includes(file.path));
-    }
-
-    if (filesToExclude) {
-      const negateVersion = filesToExclude.startsWith('!')
-        ? filesToExclude
-        : '!' + filesToExclude;
-
-      const matchesFiles = createIncludedFiles(negateVersion);
-
-      searchable = searchable.filter(file => matchesFiles.includes(file.path));
-    }
-
-    function createIncludedFiles(glob: string, miniMatchOptions?: Object) {
-      return searchable
-        .map(file =>
-          file.path.startsWith('/') ? file.path.substring(1) : file.path
-        )
-        .filter(
-          minimatch.filter(glob, {
-            matchBase: true,
-            nocase: true,
-            ...miniMatchOptions,
-          })
-        )
-        .map(path => `/${path}`);
-    }
-
-    function searchString(s: string, termString: string) {
-      if (regex) {
-        try {
-          return s.search(termString);
-        } catch (e) {
-          console.error(e);
-          return s.indexOf(termString);
-        }
-      }
-      return s.indexOf(termString);
-    }
-
-    function getAllMatches(text: string, searchTerm: string) {
-      const searchStrLen = term.length;
-      if (searchStrLen === 0) {
-        return [];
-      }
-      let pointer = 0;
-      let index = searchString(text.substring(pointer), searchTerm);
-      const indices = [];
-
-      while (index > -1) {
-        indices.push([pointer + index, pointer + index + searchStrLen]);
-        pointer += index + searchStrLen;
-        index = searchString(text.substring(pointer), searchTerm);
-      }
-      return indices;
-    }
-
-    if (term && modules) {
-      return searchable
-        .map(file => {
-          let s: number;
-          if (caseSensitive) {
-            s = searchString(file.code, term);
-          } else {
-            s = searchString(
-              file.code.toLocaleLowerCase(),
-              term.toLocaleLowerCase()
-            );
-          }
-
-          if (s !== -1) {
-            let str: string;
-            let searchTerm: string;
-            if (caseSensitive) {
-              str = file.code;
-              searchTerm = term;
-            } else {
-              str = file.code.toLocaleLowerCase();
-              searchTerm = term.toLowerCase();
-            }
-            const matches = getAllMatches(str, searchTerm);
-            return {
-              code: file.code,
-              id: file.id,
-              path: file.path,
-              title: file.title,
-              matches,
-            };
-          }
-
-          return false;
-        })
-        .filter(exists => exists);
-    }
-
-    return [];
-  }
-}
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Server/Control.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Server/Control.tsx
deleted file mode 100644
index 3e7d12f7974..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Server/Control.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import {
-  Button,
-  Collapsible,
-  Element,
-  Stack,
-  Text,
-} from '@codesandbox/components';
-import React, { FunctionComponent } from 'react';
-
-import { useAppState, useActions } from 'app/overmind';
-
-import { RestartServerIcon } from './Icons';
-
-export const Control: FunctionComponent = () => {
-  const { restartContainer, restartSandbox } = useActions().server;
-  const { containerStatus, status } = useAppState().server;
-
-  const disconnected = status !== 'connected';
-
-  return (
-    <Collapsible defaultOpen title="Control Container">
-      <Element paddingX={2}>
-        <Button
-          disabled={disconnected || containerStatus !== 'sandbox-started'}
-          onClick={restartSandbox}
-          variant="secondary"
-        >
-          <Stack align="center" gap={2}>
-            <RestartServerIcon /> <Text>Restart Sandbox</Text>
-          </Stack>
-        </Button>
-
-        <Button
-          disabled={disconnected || containerStatus === 'initializing'}
-          marginTop={2}
-          onClick={restartContainer}
-          variant="secondary"
-        >
-          <Stack align="center" gap={2}>
-            <RestartServerIcon /> <Text>Restart Server</Text>
-          </Stack>
-        </Button>
-      </Element>
-    </Collapsible>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Server/EnvVars/VarForm.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Server/EnvVars/VarForm.tsx
deleted file mode 100644
index d49145556ea..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Server/EnvVars/VarForm.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import {
-  Button,
-  Element,
-  FormField,
-  Input,
-  Stack,
-} from '@codesandbox/components';
-import React, {
-  FormEvent,
-  FunctionComponent,
-  KeyboardEvent,
-  useState,
-} from 'react';
-
-const noop = () => undefined;
-
-type Props = {
-  name?: string;
-  onCancel?: () => void;
-  onSubmit: (args: { name: string; value: string }) => void;
-  value?: string;
-};
-export const VarForm: FunctionComponent<Props> = ({
-  name: nameProp = '',
-  onCancel: onCancelProp = noop,
-  onSubmit: onSubmitProp,
-  value: valueProp = '',
-}) => {
-  const [name, setName] = useState(nameProp);
-  const [value, setValue] = useState(valueProp);
-
-  const onSubmit = (event: FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-
-    if (name && value) {
-      onSubmitProp({ name, value });
-      setName('');
-      setValue('');
-    }
-  };
-
-  const onCancel = ({ key }: KeyboardEvent<HTMLInputElement>) => {
-    if (key === 'Escape') {
-      onCancelProp();
-    }
-  };
-
-  return (
-    <form onSubmit={onSubmit}>
-      <Element marginTop={4}>
-        <FormField
-          direction="vertical"
-          hideLabel
-          label="Environment Variable Name"
-        >
-          <Input
-            onChange={({ target }) => setName(target.value)}
-            onKeyDown={onCancel}
-            placeholder="Name"
-            required
-            value={name}
-          />
-        </FormField>
-      </Element>
-
-      <FormField
-        direction="vertical"
-        hideLabel
-        label="Environment Variable Value"
-      >
-        <Input
-          onChange={({ target }) => setValue(target.value)}
-          onKeyDown={onCancel}
-          placeholder="Value"
-          required
-          value={value}
-        />
-      </FormField>
-
-      <Stack paddingX={2} marginTop={2}>
-        {nameProp && valueProp ? (
-          <Button css={{ flex: 1 }} onClick={onCancelProp} variant="link">
-            Cancel
-          </Button>
-        ) : null}
-
-        <Button
-          css={{ flex: 1 }}
-          disabled={!name || !value}
-          type="submit"
-          variant="secondary"
-        >
-          {nameProp && valueProp ? 'Save' : 'Add Secret'}
-        </Button>
-      </Stack>
-    </form>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Server/EnvVars/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Server/EnvVars/index.tsx
deleted file mode 100644
index df270a10f89..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Server/EnvVars/index.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import {
-  Collapsible,
-  Text,
-  Element,
-  List,
-  ListItem,
-  Stack,
-} from '@codesandbox/components';
-import React, { FunctionComponent, useEffect, useState } from 'react';
-
-import { useAppState, useActions } from 'app/overmind';
-
-import { DeleteIcon, EditIcon } from '../Icons';
-
-import { VarForm } from './VarForm';
-
-export const EnvVars: FunctionComponent = () => {
-  const {
-    deleteEnvironmentVariable,
-    fetchEnvironmentVariables,
-    updateEnvironmentVariables,
-  } = useActions().editor;
-  const { currentSandbox } = useAppState().editor;
-  const [editMode, setEditMode] = useState(null);
-
-  useEffect(() => {
-    fetchEnvironmentVariables();
-  }, [fetchEnvironmentVariables]);
-  const envVars = currentSandbox.environmentVariables;
-
-  return (
-    <Collapsible defaultOpen title="Secret Keys">
-      <Element paddingX={2}>
-        <Text block variant="muted">
-          Secrets are available as environment variables. They are kept private
-          and will not be transferred between forks.
-        </Text>
-      </Element>
-
-      {envVars ? (
-        <List paddingTop={4}>
-          {Object.keys(envVars).map(keyName =>
-            editMode === keyName || !envVars[keyName] ? (
-              <VarForm
-                name={keyName}
-                onCancel={() => setEditMode(null)}
-                onSubmit={({ name, value }) => {
-                  updateEnvironmentVariables({ name, value });
-                  setEditMode(null);
-                }}
-                value={envVars[keyName]}
-              />
-            ) : (
-              <ListItem justify="space-between" marginTop={editMode ? 4 : 0}>
-                <Text>{keyName}</Text>
-
-                <Stack gap={2}>
-                  <EditIcon
-                    onClick={() => setEditMode(keyName)}
-                    style={{ cursor: 'pointer' }}
-                  />
-
-                  <DeleteIcon
-                    onClick={() => deleteEnvironmentVariable(keyName)}
-                    style={{ cursor: 'pointer' }}
-                  />
-                </Stack>
-              </ListItem>
-            )
-          )}
-        </List>
-      ) : null}
-
-      <VarForm onSubmit={updateEnvironmentVariables} />
-    </Collapsible>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Server/Icons.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Server/Icons.tsx
deleted file mode 100644
index af9c0e44970..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Server/Icons.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React, { FunctionComponent, SVGProps } from 'react';
-
-type IconProps = SVGProps<SVGSVGElement>;
-
-export const EditIcon: FunctionComponent<IconProps> = props => (
-  <svg width={16} height={16} fill="none" viewBox="0 0 16 16" {...props}>
-    <path
-      fill="#757575"
-      d="M1.97 14l3.034-.787 7.64-7.64-2.247-2.247-7.64 7.64L1.971 14zM11.52 2.203l-.561.562 2.247 2.247.562-.562a.795.795 0 000-1.124l-1.124-1.123a.794.794 0 00-1.123 0z"
-    />
-  </svg>
-);
-
-export const DeleteIcon: FunctionComponent<IconProps> = props => (
-  <svg width={16} height={16} fill="none" viewBox="0 0 16 16" {...props}>
-    <path
-      fill="#757575"
-      d="M13 3.97L12.09 3 8 7.364 3.91 3 3 3.97l4.09 4.363L3 12.697l.91.97L8 9.303l4.09 4.364.91-.97-4.09-4.364L13 3.97z"
-    />
-  </svg>
-);
-
-export const RestartServerIcon: FunctionComponent<IconProps> = props => (
-  <svg width={12} height={11} fill="none" viewBox="0 0 12 11" {...props}>
-    <path
-      fill="#fff"
-      fillRule="evenodd"
-      d="M6.458 9.041a3.875 3.875 0 10-3.832-4.448h1.249L1.937 7.176l-.44-.588-.005.006a4.659 4.659 0 01-.006-.02L0 4.593h1.323a5.167 5.167 0 111.85 4.562l.92-.92a3.858 3.858 0 002.365.806z"
-      clipRule="evenodd"
-    />
-    <path
-      fill="#fff"
-      d="M8.22 4.934a.23.23 0 01-.012.381L5.85 6.782a.23.23 0 01-.35-.194V3.444a.23.23 0 01.362-.187l2.357 1.677z"
-    />
-  </svg>
-);
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Server/Ports.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Server/Ports.tsx
deleted file mode 100644
index c08fa42ef45..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Server/Ports.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import {
-  Collapsible,
-  List,
-  ListAction,
-  Stack,
-  Text,
-} from '@codesandbox/components';
-import React, { FunctionComponent } from 'react';
-import BrowserIcon from 'react-icons/lib/go/browser';
-import css from '@styled-system/css';
-
-import { useAppState, useActions } from 'app/overmind';
-
-export const Ports: FunctionComponent = () => {
-  const { onBrowserTabOpened, onBrowserFromPortOpened } = useActions().server;
-  const {
-    editor: {
-      currentSandbox: { template },
-    },
-    server: { ports },
-  } = useAppState();
-
-  const openGraphiQLPort = () =>
-    onBrowserTabOpened({
-      closeable: true,
-      options: {
-        url: template === 'gridsome' ? '/___explore' : '/___graphql',
-        title: 'GraphiQL',
-      },
-    });
-
-  return (
-    <Collapsible title="Open Ports" defaultOpen>
-      <List>
-        {ports.length > 0 ? (
-          ports.map(port => (
-            <ListAction onClick={() => onBrowserFromPortOpened(port)}>
-              <Stack css={css({ width: '100%' })} justify="space-between">
-                <Stack align="center">
-                  <BrowserIcon />
-
-                  <Text marginLeft={2}>{port.name || port.port}</Text>
-                </Stack>
-
-                {port.main ? <Text weight="medium">main</Text> : null}
-              </Stack>
-            </ListAction>
-          ))
-        ) : (
-          <Text block variant="muted" paddingX={2}>
-            {`No ports are open. Maybe the server is still starting or it doesn't open any ports.`}
-          </Text>
-        )}
-
-        {['gatsby', 'gridsome'].includes(template) && ports.length > 0 ? (
-          <ListAction onClick={openGraphiQLPort}>
-            <Stack align="center">
-              <BrowserIcon />
-
-              <Text marginLeft={2}>GraphiQL</Text>
-            </Stack>
-          </ListAction>
-        ) : null}
-      </List>
-    </Collapsible>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Server/Status.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Server/Status.tsx
deleted file mode 100644
index 1c5e55f8a5f..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Server/Status.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import {
-  SSEContainerStatus,
-  SSEManagerStatus,
-} from '@codesandbox/common/lib/types';
-import { Element, Stack, Text } from '@codesandbox/components';
-import React, { FunctionComponent } from 'react';
-import styled, { css } from 'styled-components';
-
-import { useAppState } from 'app/overmind';
-
-const StatusCircle = styled.div<{ color: string }>`
-  ${({ color, theme }) => css`
-    border-radius: 50%;
-    background-color: ${color};
-    width: ${theme.space[2]}px;
-    height: ${theme.space[2]}px;
-  `};
-`;
-
-const STATUS_MESSAGES = {
-  error: 'A sandbox error occurred',
-  hibernated: 'Sandbox hibernated',
-  initializing: 'Container is starting...',
-  started: 'Connected to sandbox',
-  starting: 'Sandbox is starting...',
-};
-const STATUS_COLORS = {
-  connected: '#4CFF00',
-  disconnected: '#FD2439',
-  error: '#FD2439',
-  hibernated: '#FF662E',
-  initializing: '#FFD399',
-};
-
-const getContainerStatusInfo = (status: SSEContainerStatus) => {
-  const containerStatuses = {
-    'container-started': {
-      color: STATUS_COLORS.initializing,
-      message: STATUS_MESSAGES.starting,
-    },
-    error: { color: STATUS_COLORS.error, message: STATUS_MESSAGES.error },
-    hibernated: {
-      color: STATUS_COLORS.hibernated,
-      message: STATUS_MESSAGES.hibernated,
-    },
-    initializing: {
-      color: STATUS_COLORS.initializing,
-      message: STATUS_MESSAGES.initializing,
-    },
-    'sandbox-started': {
-      color: STATUS_COLORS.connected,
-      message: STATUS_MESSAGES.started,
-    },
-    stopped: {
-      color: STATUS_COLORS.initializing,
-      message: STATUS_MESSAGES.starting,
-    },
-  };
-
-  return containerStatuses[status];
-};
-
-const getManagerStatusInfo = (status: SSEManagerStatus) => {
-  const managerStatuses = {
-    connected: undefined,
-    disconnected: undefined,
-    initializing: {
-      color: STATUS_COLORS.initializing,
-      message: STATUS_MESSAGES.initializing,
-    },
-  };
-
-  return managerStatuses[status];
-};
-
-export const Status: FunctionComponent = () => {
-  const { containerStatus, status: managerStatus } = useAppState().server;
-  const { color, message } =
-    getManagerStatusInfo(managerStatus) ||
-    getContainerStatusInfo(containerStatus);
-
-  return (
-    <Stack align="center">
-      <Element marginX={2}>
-        <StatusCircle color={color} />
-      </Element>
-
-      <Text marginLeft={2}>{message}</Text>
-    </Stack>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Server/Tasks.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Server/Tasks.tsx
deleted file mode 100644
index cfb09f57e94..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Server/Tasks.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import { List, ListAction, Text, Collapsible } from '@codesandbox/components';
-import { dispatch } from 'codesandbox-api';
-import React, { FunctionComponent } from 'react';
-import DownloadIcon from 'react-icons/lib/fa/download';
-import FlaskIcon from 'react-icons/lib/fa/flask';
-import BuildIcon from 'react-icons/lib/fa/wrench';
-import NodeIcon from 'react-icons/lib/io/social-nodejs';
-
-import { useAppState } from 'app/overmind';
-
-// These scripts are only supposed to run on the main thread.
-const blacklistedScripts = ['dev', 'develop', 'serve', 'start'];
-
-const getIcon = (script: string) => {
-  const iconsByScript = {
-    install: DownloadIcon,
-    lint: FlaskIcon,
-    node: NodeIcon,
-    test: FlaskIcon,
-  };
-
-  return iconsByScript[script] || BuildIcon;
-};
-
-export const Tasks: FunctionComponent = () => {
-  const { parsedConfigurations: pkg } = useAppState().editor;
-
-  if (!pkg?.scripts) {
-    return null;
-  }
-
-  const runTask = (script: string) =>
-    dispatch({ script, type: 'codesandbox:create-shell' });
-  return (
-    <Collapsible defaultOpen title="Run Script">
-      <List>
-        {Object.keys(pkg.scripts)
-          .filter(script => !blacklistedScripts.includes(script))
-          .map(script => {
-            const Icon = getIcon(script);
-
-            return (
-              <ListAction key={script} onClick={() => runTask(script)}>
-                <Icon />
-
-                <Text marginLeft={2}>yarn {script}</Text>
-              </ListAction>
-            );
-          })}
-
-        <ListAction onClick={() => runTask('install')}>
-          <DownloadIcon />
-
-          <Text marginLeft={2}>yarn install</Text>
-        </ListAction>
-
-        <ListAction onClick={() => runTask('node')}>
-          <NodeIcon />
-
-          <Text marginLeft={2}>node</Text>
-        </ListAction>
-      </List>
-    </Collapsible>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Server/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Server/index.tsx
deleted file mode 100644
index 9651ec91706..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Server/index.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React, { FunctionComponent } from 'react';
-import { Collapsible, Element } from '@codesandbox/components';
-import { Control } from './Control';
-import { EnvVars } from './EnvVars';
-import { Ports } from './Ports';
-import { Status } from './Status';
-import { Tasks } from './Tasks';
-
-export const Server: FunctionComponent = () => (
-  <>
-    <Collapsible defaultOpen title="Server Control Panel">
-      <Element marginBottom={5} paddingY={2} paddingX={1}>
-        <Status />
-      </Element>
-    </Collapsible>
-    <Tasks />
-    <Ports />
-    <Control />
-    <EnvVars />
-  </>
-);
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/VSCode/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/VSCode/index.tsx
deleted file mode 100644
index d5ac88bd00d..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/VSCode/index.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import React from 'react';
-import {
-  Collapsible,
-  Text,
-  Button,
-  Stack,
-  Link,
-} from '@codesandbox/components';
-import { useUpgradeFromV1ToV2 } from 'app/hooks/useUpgradeFromV1ToV2';
-
-export const VSCode = () => {
-  const { perform, loading } = useUpgradeFromV1ToV2('VSCode menu', true);
-
-  return (
-    <Collapsible title="VS Code" defaultOpen>
-      <Stack direction="vertical" gap={6} padding={2}>
-        <Text as="p" variant="muted" margin={0}>
-          To use VS Code together with CodeSandbox, you need to convert your
-          Sandbox into a Devbox.
-        </Text>
-        <Text as="p" variant="muted" margin={0}>
-          Devboxes are an improved coding experience that runs your code in the
-          cloud. They allow you to run Docker, code in new languages, add
-          servers, databases, and much more.
-        </Text>
-        <Text as="p" variant="muted" margin={0}>
-          Don&apos;t worry&mdash;this sandbox will not be deleted. After
-          converting, you will have both versions.
-        </Text>
-        <Text as="p" variant="muted" margin={0}>
-          Do you want to fork this sandbox?
-        </Text>
-        <Stack align="center" gap={4}>
-          <Button
-            onClick={perform}
-            loading={loading}
-            variant="primary"
-            autoWidth
-          >
-            Yes, fork
-          </Button>
-          <Link
-            href="https://codesandbox.io/docs/tutorial/convert-browser-sandbox-cloud"
-            target="_blank"
-            rel="noreferrer noopener"
-          >
-            Learn more
-          </Link>
-        </Stack>
-      </Stack>
-    </Collapsible>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/social-icons.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/social-icons.tsx
deleted file mode 100644
index ea554c05232..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/social-icons.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import React, { FunctionComponent, SVGProps } from 'react';
-
-type IconProps = SVGProps<SVGSVGElement>;
-
-export const DiscordIcon: FunctionComponent<IconProps> = props => (
-  <svg width={32} height={32} fill="none" viewBox="0 0 32 32" {...props}>
-    <g clipPath="">
-      <path
-        fill="currentColor"
-        d="M22.099 9c1.05 0 1.898.805 1.948 1.753V26l-2-1.61-1.1-.948-1.199-.99.501 1.562H9.756c-1.048 0-1.9-.755-1.9-1.754V10.757c0-.948.853-1.755 1.903-1.755h12.334L22.1 9zm-4.574 4.025h-.022l-.151.142c1.55.425 2.3 1.089 2.3 1.089a8.468 8.468 0 00-2.8-.806c-.65-.095-1.3-.045-1.85 0h-.15c-.35 0-1.098.142-2.1.521-.349.144-.549.238-.549.238s.749-.71 2.4-1.089l-.101-.095s-1.25-.046-2.6.9c0 0-1.349 2.226-1.349 4.972 0 0 .748 1.232 2.798 1.28 0 0 .3-.378.602-.71-1.151-.332-1.6-.995-1.6-.995s.1.047.25.141h.046c.022 0 .032.011.044.022v.004c.012.011.023.021.045.021.247.097.494.192.695.284a6.37 6.37 0 001.346.38 8.094 8.094 0 002.4 0c.448-.096.897-.19 1.345-.38.291-.141.65-.283 1.044-.522 0 0-.448.663-1.648.995.247.33.594.708.594.708 2.052-.042 2.848-1.275 2.893-1.223 0-2.74-1.357-4.972-1.357-4.972-1.222-.86-2.366-.893-2.567-.893l.042-.014v.002zm.126 3.126a.948.948 0 110 1.895.949.949 0 01-.95-.945.951.951 0 01.95-.947v-.003zm-3.396 0a.947.947 0 11-.003 1.895.95.95 0 01-.95-.945c0-.524.427-.947.95-.947l.003-.003z"
-      />
-    </g>
-    <defs>
-      <clipPath id="clip0">
-        <path fill="currentColor" d="M0 0H32V32H0z" />
-      </clipPath>
-    </defs>
-  </svg>
-);
-
-export const TwitterIcon: FunctionComponent<IconProps> = props => (
-  <svg width={32} height={32} fill="none" viewBox="0 0 32 32" {...props}>
-    <g clipPath="">
-      <path
-        fill="currentColor"
-        d="M24 10.82a6.557 6.557 0 01-1.885.517 3.288 3.288 0 001.443-1.816 6.575 6.575 0 01-2.085.796 3.286 3.286 0 00-5.594 2.993 9.319 9.319 0 01-6.765-3.429 3.287 3.287 0 001.015 4.383 3.268 3.268 0 01-1.486-.41c-.036 1.52 1.054 2.943 2.633 3.26a3.289 3.289 0 01-1.483.055 3.285 3.285 0 003.067 2.28A6.6 6.6 0 018 20.809a9.293 9.293 0 005.032 1.474c6.095 0 9.538-5.147 9.33-9.764A6.683 6.683 0 0024 10.82z"
-      />
-    </g>
-    <defs>
-      <clipPath id="clip0">
-        <path fill="currentColor" d="M0 0H32V32H0z" />
-      </clipPath>
-    </defs>
-  </svg>
-);
-
-export const GithubIcon: FunctionComponent<IconProps> = props => (
-  <svg width={32} height={32} fill="none" viewBox="0 0 32 32" {...props}>
-    <g clipPath="">
-      <path
-        fill="currentColor"
-        d="M22.927 12.365a8.068 8.068 0 00-2.912-2.984A7.678 7.678 0 0016 8.28c-1.451 0-2.79.366-4.016 1.1a8.067 8.067 0 00-2.911 2.984A8.177 8.177 0 008 16.481c0 1.787.509 3.394 1.526 4.821 1.017 1.427 2.332 2.415 3.943 2.963.187.036.326.01.416-.075a.423.423 0 00.136-.32l-.006-.576a97.12 97.12 0 01-.005-.95l-.24.042c-.152.029-.345.04-.578.037a4.301 4.301 0 01-.723-.074 1.6 1.6 0 01-.698-.32 1.354 1.354 0 01-.459-.657l-.104-.246a2.68 2.68 0 00-.328-.544c-.15-.2-.3-.335-.453-.406l-.073-.053a.773.773 0 01-.135-.129.592.592 0 01-.094-.15c-.02-.05-.004-.09.052-.122.056-.032.156-.048.302-.048l.208.032c.14.028.311.114.516.256.205.143.373.328.505.555.16.292.352.515.578.668.226.153.453.23.683.23.229 0 .427-.019.593-.054.167-.036.323-.09.469-.16.062-.477.233-.844.51-1.1a6.98 6.98 0 01-1.067-.192 4.192 4.192 0 01-.98-.417 2.82 2.82 0 01-.838-.715c-.222-.285-.405-.659-.547-1.122-.142-.462-.213-.996-.213-1.601 0-.862.274-1.595.823-2.2-.257-.648-.233-1.374.072-2.178.202-.064.5-.016.896.144.396.16.686.297.87.411.184.114.332.21.443.289a7.227 7.227 0 012-.278c.687 0 1.354.092 2 .277l.396-.256c.27-.17.59-.327.958-.47.368-.142.65-.181.844-.117.312.804.34 1.53.083 2.178.549.605.823 1.339.823 2.2 0 .605-.071 1.14-.213 1.607-.143.466-.326.84-.552 1.121a2.929 2.929 0 01-.844.71 4.198 4.198 0 01-.98.416c-.315.086-.671.15-1.067.193.361.32.542.826.542 1.516v2.253a.43.43 0 00.13.32c.087.085.224.11.411.075 1.611-.548 2.926-1.536 3.943-2.963S24 18.268 24 16.48c0-1.488-.358-2.86-1.073-4.116z"
-      />
-    </g>
-    <defs>
-      <clipPath id="clip0">
-        <path fill="currentColor" d="M0 0H32V32H0z" />
-      </clipPath>
-    </defs>
-  </svg>
-);
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/socials.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/socials.tsx
deleted file mode 100644
index 13cf238d3e6..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/socials.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { Stack, Element, Link } from '@codesandbox/components';
-import css from '@styled-system/css';
-import React, { FunctionComponent } from 'react';
-
-import { DiscordIcon, GithubIcon, TwitterIcon } from './social-icons';
-
-const links = [
-  { href: 'https://twitter.com/codesandbox', Icon: TwitterIcon },
-  {
-    href: 'https://github.com/codesandbox/codesandbox-client',
-    Icon: GithubIcon,
-  },
-  { href: 'https://discord.gg/C6vfhW3H6e', Icon: DiscordIcon },
-];
-
-export const Help: FunctionComponent = () => (
-  <Element marginBottom={3} paddingX={2}>
-    <Stack justify="center">
-      {links.map(({ href, Icon }) => (
-        <Link
-          css={css({ color: 'sideBar.border' })}
-          href={href}
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          <Icon />
-        </Link>
-      ))}
-    </Stack>
-  </Element>
-);
diff --git a/packages/app/src/app/pages/Sandbox/Editor/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/elements.ts
deleted file mode 100644
index c421035e8a6..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/elements.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import styled from 'styled-components';
-
-export const Container = styled.div`
-  width: 100%;
-  height: 100%;
-  position: fixed;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-
-  .Resizer {
-    background: ${props => props.theme['sideBar.border'] || 'black'};
-    background-clip: padding-box;
-  }
-`;
diff --git a/packages/app/src/app/pages/Sandbox/Editor/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/index.tsx
deleted file mode 100644
index 3b269ac3c66..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/index.tsx
+++ /dev/null
@@ -1,341 +0,0 @@
-import Fullscreen from '@codesandbox/common/lib/components/flex/Fullscreen';
-import getTemplateDefinition from '@codesandbox/common/lib/templates';
-import codesandbox from '@codesandbox/common/lib/themes/codesandbox.json';
-import VERSION from '@codesandbox/common/lib/version';
-import {
-  ThemeProvider as ComponentsThemeProvider,
-  Element,
-  Stack,
-} from '@codesandbox/components';
-
-import VisuallyHidden from '@reach/visually-hidden';
-import css from '@styled-system/css';
-import { useActions, useReaction, useEffects, useAppState } from 'app/overmind';
-import { templateColor } from 'app/utils/template-color';
-import React, { useEffect, useRef, useState } from 'react';
-import SplitPane from 'react-split-pane';
-import styled, { ThemeProvider } from 'styled-components';
-
-import { CreateBox } from 'app/components/Create/CreateBox';
-import { MainWorkspace as Content } from './Content';
-import { Container } from './elements';
-import ForkFrozenSandboxModal from './ForkFrozenSandboxModal';
-import { Header } from './Header';
-import { Navigation } from './Navigation';
-import { ContentSkeleton } from './Skeleton';
-import getVSCodeTheme from './utils/get-vscode-theme';
-import { Workspace } from './Workspace';
-import { CommentsAPI } from './Workspace/screens/Comments/API';
-import { FixedSignInBanner } from './FixedSignInBanner';
-
-type EditorTypes = {
-  showModalOnTop?: 'newSandbox' | 'newDevbox' | 'new';
-};
-
-const STATUS_BAR_SIZE = 22;
-
-const StatusBar = styled.div`
-  a {
-    color: inherit;
-  }
-`;
-
-export const Editor = ({ showModalOnTop }: EditorTypes) => {
-  const state = useAppState();
-  const actions = useActions();
-  const effects = useEffects();
-  const reaction = useReaction();
-  const statusbarEl = useRef(null);
-  const [showSkeleton, setShowSkeleton] = useState(
-    !state.editor.hasLoadedInitialModule
-  );
-  const [localState, setLocalState] = useState({
-    theme: {
-      colors: {},
-      vscodeTheme: codesandbox,
-    },
-    customVSCodeTheme: null,
-  });
-
-  useEffect(() => {
-    let timeout;
-    const dispose = reaction(
-      reactionState => reactionState.editor.hasLoadedInitialModule,
-      () => {
-        timeout = setTimeout(() => setShowSkeleton(false), 500);
-      }
-    );
-    return () => {
-      dispose();
-      clearTimeout(timeout);
-    };
-  }, [reaction]);
-
-  useEffect(() => {
-    async function loadTheme() {
-      const vsCodeTheme = state.preferences.settings.customVSCodeTheme;
-
-      try {
-        const t = await getVSCodeTheme('', vsCodeTheme);
-        setLocalState({ theme: t, customVSCodeTheme: vsCodeTheme });
-      } catch (e) {
-        console.error(e);
-      }
-    }
-    if (
-      localState.customVSCodeTheme !==
-      state.preferences.settings.customVSCodeTheme
-    ) {
-      loadTheme();
-    }
-  }, [
-    localState.customVSCodeTheme,
-    state.preferences.settings.customVSCodeTheme,
-  ]);
-
-  useEffect(() => {
-    statusbarEl.current.appendChild(effects.vscode.getStatusbarElement());
-  }, [effects.vscode]);
-
-  const sandbox = state.editor.currentSandbox;
-
-  const hideNavigation =
-    state.preferences.settings.zenMode && state.workspace.workspaceHidden;
-  const { statusBar } = state.editor;
-
-  const templateDef = sandbox && getTemplateDefinition(sandbox.template);
-
-  const getTopOffset = () => {
-    if (state.preferences.settings.zenMode) {
-      return 0;
-    }
-
-    if (!state.hasLogIn && state.sandboxesLimits) {
-      // Header + Signin banner + border
-      return 5.5 * 16 + 2;
-    }
-
-    // Header height
-    return 3 * 16;
-  };
-
-  const bottomOffset = STATUS_BAR_SIZE;
-
-  return (
-    <ThemeProvider
-      theme={{
-        templateColor: templateColor(sandbox, templateDef as any),
-        templateBackgroundColor: templateDef && templateDef.backgroundColor,
-        ...localState.theme,
-      }}
-    >
-      <Container
-        style={{ lineHeight: 'initial', backgroundColor: 'transparent' }}
-        className="monaco-workbench"
-      >
-        {state.preferences.settings.zenMode ? null : (
-          <ComponentsThemeProvider theme={localState.theme.vscodeTheme}>
-            {!state.hasLogIn && <FixedSignInBanner />}
-
-            <Header />
-          </ComponentsThemeProvider>
-        )}
-
-        <Fullscreen style={{ width: 'initial' }}>
-          {!hideNavigation && (
-            <ComponentsThemeProvider theme={localState.theme.vscodeTheme}>
-              <Navigation
-                topOffset={getTopOffset()}
-                bottomOffset={bottomOffset}
-              />
-            </ComponentsThemeProvider>
-          )}
-
-          <div
-            key={getTopOffset()} // Force re-render when topOffset changes to avoid weird positioning.
-            style={{
-              position: 'fixed',
-              left: hideNavigation ? 0 : 'calc(3.5rem + 1px)',
-              top: getTopOffset(),
-              right: 0,
-              bottom: bottomOffset,
-              height: statusBar ? 'auto' : 'calc(100% - 3.5rem)',
-              zIndex: 9,
-            }}
-          >
-            <SplitPane
-              split="vertical"
-              defaultSize={17 * 16}
-              minSize={0}
-              resizerStyle={state.editor.isLoading ? { display: 'none' } : null}
-              onDragStarted={() => actions.editor.resizingStarted()}
-              onDragFinished={() => actions.editor.resizingStopped()}
-              onChange={size => {
-                if (size > 0 && state.workspace.workspaceHidden) {
-                  actions.workspace.setWorkspaceHidden({ hidden: false });
-                } else if (size === 0 && !state.workspace.workspaceHidden) {
-                  actions.workspace.setWorkspaceHidden({ hidden: true });
-                }
-              }}
-              pane1Style={{
-                minWidth: state.workspace.workspaceHidden ? 0 : 190,
-                visibility: state.workspace.workspaceHidden
-                  ? 'hidden'
-                  : 'visible',
-                maxWidth: state.workspace.workspaceHidden ? 0 : 400,
-              }}
-              pane2Style={{
-                height: '100%',
-              }}
-              style={{
-                overflow: 'visible', // For VSCode Context Menu
-              }}
-            >
-              {state.workspace.workspaceHidden ? <div /> : <Workspace />}
-              <Content theme={localState.theme} />
-            </SplitPane>
-            {showSkeleton || showModalOnTop ? (
-              <ComponentsThemeProvider theme={localState.theme.vscodeTheme}>
-                <ContentSkeleton
-                  style={
-                    state.editor.hasLoadedInitialModule && !showModalOnTop
-                      ? {
-                          opacity: 0,
-                        }
-                      : {
-                          opacity: 1,
-                        }
-                  }
-                />
-                {showModalOnTop ? (
-                  <Element
-                    css={css({
-                      width: '100vw',
-                      height: '100vh',
-                      overflow: 'hidden',
-                      position: 'fixed',
-                      zIndex: 10,
-                      top: 0,
-                      left: 0,
-                    })}
-                  >
-                    <Element
-                      css={css({
-                        background: 'rgba(0,0,0,0.4)',
-                        width: '100vw',
-                        height: '100vh',
-                        position: 'fixed',
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                      })}
-                    >
-                      <Element
-                        css={css({
-                          backgroundColor: 'sideBar.background',
-                          maxWidth: '100%',
-                          width: 950,
-                          position: 'relative',
-                          marginTop: '-200px',
-                          borderRadius: '8px',
-
-                          '@media screen and (max-width: 950)': {
-                            width: 'auto',
-                            margin: 0,
-                          },
-                        })}
-                      >
-                        {(showModalOnTop === 'new' ||
-                          showModalOnTop === 'newSandbox' ||
-                          showModalOnTop === 'newDevbox') && (
-                          <CreateBox isModal={false} />
-                        )}
-                      </Element>
-                    </Element>
-                  </Element>
-                ) : null}
-              </ComponentsThemeProvider>
-            ) : null}
-          </div>
-
-          <ComponentsThemeProvider theme={localState.theme.vscodeTheme}>
-            <Stack
-              justify="space-between"
-              align="center"
-              className=".monaco-workbench"
-              css={css({
-                backgroundColor: 'statusBar.background',
-                color: 'statusBar.foreground',
-                position: 'fixed',
-                display: statusBar ? 'flex' : 'none',
-                bottom: 0,
-                right: 0,
-                left: 0,
-                width: '100%',
-                height: STATUS_BAR_SIZE,
-              })}
-            >
-              <FakeStatusBarText>{VERSION.split('-').pop()}</FakeStatusBarText>
-              <StatusBar
-                className="monaco-workbench mac nopanel"
-                ref={statusbarEl}
-                style={{ width: 'calc(100% - 126px)' }}
-              />
-            </Stack>
-          </ComponentsThemeProvider>
-        </Fullscreen>
-
-        <ForkFrozenSandboxModal />
-      </Container>
-      <ComponentsThemeProvider theme={localState.theme.vscodeTheme}>
-        <CommentsAPI />
-      </ComponentsThemeProvider>
-    </ThemeProvider>
-  );
-};
-
-/** To use the same styles + behavior of the vscode status bar,
- *  we recreate the html structure outside of the status bar
- *  the code is garbage
- */
-/* eslint-disable */
-const FakeStatusBarText = props => {
-  const [copied, setCopied] = React.useState(false);
-
-  const copyText = () => {
-    const inputElement = document.querySelector('#status-bar-version');
-    // @ts-ignore it's not even a button!
-    inputElement.select();
-    document.execCommand('copy');
-    setCopied(true);
-    window.setTimeout(() => setCopied(false), 2000);
-  };
-
-  return (
-    <Element
-      as="span"
-      className="part statusbar"
-      css={css({
-        width: 'auto !important',
-        minWidth: '120px',
-        color: 'statusBar.foreground',
-      })}
-      {...props}
-    >
-      <span className="statusbar-item" style={{ paddingLeft: '10px' }}>
-        <a
-          title="Copy version"
-          style={{ color: 'inherit', padding: '0 5px' }}
-          onClick={copyText}
-        >
-          {copied ? 'Copied!' : props.children}
-        </a>
-
-        <VisuallyHidden>
-          <input id="status-bar-version" defaultValue={props.children} />
-        </VisuallyHidden>
-      </span>
-    </Element>
-  );
-};
-/* eslint-enable */
diff --git a/packages/app/src/app/pages/Sandbox/Editor/utils/get-vscode-theme.js b/packages/app/src/app/pages/Sandbox/Editor/utils/get-vscode-theme.js
deleted file mode 100644
index 81e1bb3565c..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/utils/get-vscode-theme.js
+++ /dev/null
@@ -1,132 +0,0 @@
-import JSON from 'json5';
-
-import codesandbox from '@codesandbox/common/lib/themes/codesandbox-black';
-
-import themes from '@codesandbox/common/lib/themes';
-import { notificationState } from '@codesandbox/common/lib/utils/notifications';
-import { NotificationStatus } from '@codesandbox/notifications';
-
-const editorBackground = 'editor.background';
-const editorForeground = 'editor.foreground';
-const editorInactiveSelection = 'editor.inactiveSelectionBackground';
-const editorIndentGuides = 'editorIndentGuide.background';
-const editorActiveIndentGuides = 'editorIndentGuide.activeBackground';
-const editorSelectionHighlight = 'editor.selectionHighlightBackground';
-
-const vs = {
-  [editorBackground]: '#FFFFFE',
-  [editorForeground]: '#000000',
-  [editorInactiveSelection]: '#E5EBF1',
-  [editorIndentGuides]: '#D3D3D3',
-  [editorActiveIndentGuides]: '#939393',
-  [editorSelectionHighlight]: '#ADD6FF4D',
-  'titleBar.activeBackground': '#eee',
-  'titleBar.activeForeground': '#939393',
-};
-const vsDark = {
-  [editorBackground]: '#1E1E1E',
-  [editorForeground]: '#D4D4D4',
-  [editorInactiveSelection]: '#3A3D41',
-  [editorIndentGuides]: '#404040',
-  [editorActiveIndentGuides]: '#707070',
-  [editorSelectionHighlight]: '#ADD6FF26',
-};
-
-// parses theme, uncommenting commented colors
-// and using json5 to strip comments
-function parseTheme(theme) {
-  return JSON.parse(theme.replace(/^\s*\/\/"/gm, '"'));
-}
-
-function fetchTheme(foundTheme) {
-  if (!foundTheme) {
-    return codesandbox;
-  }
-
-  if (foundTheme.content) {
-    return foundTheme.content;
-  }
-
-  if (foundTheme.get) {
-    return foundTheme.get();
-  }
-
-  return window
-    .fetch(foundTheme.url)
-    .then(x => x.text())
-    .then(text => {
-      let theme;
-      try {
-        theme = parseTheme(text);
-      } catch (e) {
-        console.error(e);
-
-        notificationState.addNotification({
-          message: 'We had trouble loading the theme, error: \n' + e.message,
-          status: NotificationStatus.ERROR,
-        });
-      }
-      return theme;
-    });
-}
-
-const findTheme = async (themeName, customTheme) => {
-  if (customTheme) {
-    try {
-      return parseTheme(customTheme);
-    } catch (e) {
-      console.error(e);
-
-      notificationState.addNotification({
-        message:
-          'We had trouble parsing your custom VSCode Theme, error: \n' +
-          e.message,
-        status: NotificationStatus.ERROR,
-      });
-    }
-  }
-
-  const foundTheme = themes.find(t => t.name === themeName);
-
-  const fetchedTheme = await fetchTheme(foundTheme);
-
-  return {
-    ...fetchedTheme,
-    type: (foundTheme && foundTheme.type) || fetchedTheme.type,
-  };
-};
-
-const classnames = {
-  dark: 'vs-dark',
-  light: 'vs',
-  hc: 'hc-black',
-};
-
-export default async function getTheme(themeName, customTheme) {
-  const foundTheme = await findTheme(themeName, customTheme);
-  // Explicitly check for dark as that is the default
-  const isLight = foundTheme.type !== 'dark' && foundTheme.type !== 'hc';
-  // We need to set this so VSCode knows that the last known theme is the right one. This prevents
-  // flickering for light themes.
-  document.body.classList.remove('vs');
-  document.body.classList.remove('vs-dark');
-  document.body.classList.remove('hc-black');
-  document.body.classList.add(classnames[foundTheme.type] || 'vs');
-
-  const colors = {
-    ...(isLight ? vs : vsDark),
-    ...foundTheme.colors,
-  };
-
-  const theme = {
-    ...foundTheme,
-    colors,
-  };
-
-  document.body.style.background = theme.colors['editor.background'];
-  return {
-    ...theme.colors,
-    light: isLight,
-    vscodeTheme: theme,
-  };
-}
diff --git a/packages/app/src/app/pages/Sandbox/OnBoarding/Card.tsx b/packages/app/src/app/pages/Sandbox/OnBoarding/Card.tsx
deleted file mode 100644
index 5966dfab02e..00000000000
--- a/packages/app/src/app/pages/Sandbox/OnBoarding/Card.tsx
+++ /dev/null
@@ -1,158 +0,0 @@
-import React, { forwardRef } from 'react';
-import styled from 'styled-components';
-import track from '@codesandbox/common/lib/utils/analytics';
-
-import { Text, Button } from '@codesandbox/components';
-
-export const Card = forwardRef<
-  HTMLDivElement,
-  {
-    title: string;
-    align: string;
-    tagline: string;
-    img: string;
-    bgColor: string;
-    active: boolean;
-    onClick: () => void;
-    onComplete: () => void;
-    cta?: string;
-    cover?: boolean;
-  }
->(
-  (
-    {
-      title,
-      tagline,
-      img,
-      bgColor,
-      active,
-      onClick,
-      onComplete,
-      align,
-      cta,
-      cover,
-      ...props
-    },
-    ref
-  ) => (
-    <Ratio>
-      <Container active={active} ref={ref} onClick={onClick} {...props}>
-        <ImageContainer
-          style={{
-            backgroundColor: bgColor,
-            backgroundImage: `url(${img})`,
-            backgroundSize: cover ? 'cover' : 'contain',
-            backgroundPosition: align === 'bottom' ? `center bottom` : 'center',
-            backgroundRepeat: 'no-repeat',
-          }}
-        />
-
-        {title && tagline && (
-          <Content>
-            <Text
-              weight="bold"
-              size={6}
-              block
-              as="h2"
-              css={{ margin: 0, marginBottom: '.75rem' }}
-            >
-              {title}
-            </Text>
-            <Text block as="p" size={4} css={{ lineHeight: '24px' }}>
-              {tagline}
-            </Text>
-          </Content>
-        )}
-
-        {cta && (
-          <Content css={{ display: 'flex', padding: '0 16%' }}>
-            <Button
-              onClick={() => {
-                track('OnBoarding - click on start cta');
-                track('OnBoarding - complete');
-                onComplete();
-              }}
-              css={{
-                fontSize: 17,
-                height: 35,
-                borderRadius: 3,
-                margin: 'auto',
-              }}
-            >
-              {cta}
-            </Button>
-          </Content>
-        )}
-      </Container>
-    </Ratio>
-  )
-);
-
-const Ratio = styled.div`
-  min-width: 80vw;
-  height: 100%;
-
-  @media screen and (min-width: 420px) {
-    min-width: 86vw;
-    height: 0;
-    padding-bottom: 30%;
-    max-height: 70vh;
-
-    position: relative;
-  }
-
-  @media screen and (min-width: 680px) {
-    min-width: 400px;
-  }
-
-  @media screen and (min-width: 1700px) {
-    min-width: calc(100vw / 5);
-  }
-`;
-
-const Container = styled.div<{ active: boolean }>`
-  border-radius: 8px;
-  overflow: hidden;
-  box-shadow: 0px 16px 32px rgba(0, 0, 0, 0.24), 0px 4px 4px rgba(0, 0, 0, 0.12);
-
-  display: flex;
-  flex-direction: column;
-
-  margin-right: 0.5rem;
-  margin-left: 0.5rem;
-  position: relative;
-
-  transition: opacity 0.3s ease;
-  opacity: ${({ active }) => (active ? 1 : 0.2)};
-
-  height: 100%;
-
-  @media screen and (min-width: 420px) {
-    height: auto;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-  }
-`;
-
-const ImageContainer = styled.div`
-  flex: 1;
-  display: flex;
-  align-items: center;
-
-  img {
-    width: 100%;
-  }
-`;
-
-const Content = styled.div`
-  background: #fff;
-
-  padding: 1.5rem 2.5rem;
-  color: #242424;
-  min-height: 230px;
-
-  box-sizing: border-box;
-`;
diff --git a/packages/app/src/app/pages/Sandbox/OnBoarding/Counter.tsx b/packages/app/src/app/pages/Sandbox/OnBoarding/Counter.tsx
deleted file mode 100644
index baf25216f76..00000000000
--- a/packages/app/src/app/pages/Sandbox/OnBoarding/Counter.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import React from 'react';
-import styled, { keyframes } from 'styled-components';
-import { AUTO_RUN_TIMER } from './config';
-
-export const Counter: React.FC<{ amount: number; currentIndex: number }> = ({
-  amount,
-  currentIndex,
-}) => (
-  <Wrapper>
-    {new Array(amount).fill(' ').map((item, index) => (
-      <Item
-        // eslint-disable-next-line react/no-array-index-key
-        key={index}
-        active={currentIndex > index}
-        style={{ width: `calc(100% / ${amount} - 1rem)` }}
-      >
-        {currentIndex === index && <AnimatedItem />}
-      </Item>
-    ))}
-  </Wrapper>
-);
-
-const Wrapper = styled.div`
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-
-  height: 2rem;
-  align-items: center;
-`;
-
-const Item = styled.div<{ active: boolean }>`
-  background: rgba(255, 255, 255, ${({ active }) => (active ? 1 : 0.2)});
-  height: 2px;
-  position: relative;
-
-  transition: opacity 0.3s ease;
-`;
-
-const loadAnimation = keyframes`
-  0% {
-    width: 0%;
-  }
-  100% {
-    width: 100%;
-  }
-`;
-
-const AnimatedItem = styled.div`
-  background: white;
-  height: 2px;
-
-  animation: ${loadAnimation} ${AUTO_RUN_TIMER}ms linear forwards;
-
-  position: absolute;
-  left: 0;
-  top: 0;
-`;
diff --git a/packages/app/src/app/pages/Sandbox/OnBoarding/Navigation.tsx b/packages/app/src/app/pages/Sandbox/OnBoarding/Navigation.tsx
deleted file mode 100644
index cfd4258aecc..00000000000
--- a/packages/app/src/app/pages/Sandbox/OnBoarding/Navigation.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import React from 'react';
-
-import styled from 'styled-components';
-import track from '@codesandbox/common/lib/utils/analytics';
-import { motion } from 'framer-motion';
-
-const Action = styled(motion.button)`
-  z-index: 9;
-  position: absolute;
-  top: calc(50% - 44px + 32px);
-
-  width: 44px;
-  height: 44px;
-  border-radius: 44px;
-  background: #fff;
-  border: 0;
-  padding: 0;
-  cursor: pointer;
-
-  transition: opacity 0.3s ease;
-
-  display: flex;
-
-  > * {
-    margin: auto;
-  }
-`;
-
-const PrevAction = styled(Action)`
-  left: calc(50% - 300px);
-
-  @media screen and (min-width: 1700px) {
-    left: calc(50% - 450px);
-  }
-`;
-
-const NextAction = styled(Action)`
-  right: calc(50% - 300px);
-
-  @media screen and (min-width: 1700px) {
-    right: calc(50% - 450px);
-  }
-`;
-
-export const Navigation: React.FC<{
-  onPrev: () => void;
-  onNext: () => void;
-  currentIndex: number;
-  maxIndex: number;
-}> = ({ onPrev, onNext, currentIndex, maxIndex }) => (
-  <>
-    <PrevAction
-      transition={{ delay: currentIndex === 0 ? 0.6 : 0 }}
-      initial={{ opacity: 0, x: 150 }}
-      animate={{ opacity: currentIndex === 0 ? 0.2 : 1, x: 0 }}
-      disabled={currentIndex === 0}
-      onClick={() => {
-        track('OnBoarding - click prev');
-        onPrev();
-      }}
-      type="button"
-    >
-      <svg
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M12 18L6.70711 12.7071C6.31659 12.3166 6.31659 11.6834 6.70711 11.2929L12 6"
-          stroke="black"
-          strokeWidth="2"
-          strokeLinecap="round"
-        />
-        <path
-          d="M20 12L7.1 12"
-          stroke="black"
-          strokeWidth="2"
-          strokeLinecap="round"
-        />
-      </svg>
-    </PrevAction>
-
-    <NextAction
-      transition={{ delay: currentIndex === 0 ? 0.6 : 0 }}
-      initial={{ opacity: 0, x: -150 }}
-      animate={{ opacity: currentIndex + 1 < maxIndex ? 1 : 0.2, x: 0 }}
-      disabled={currentIndex + 1 === maxIndex}
-      onClick={() => {
-        track('OnBoarding - click next');
-        onNext();
-      }}
-      type="button"
-    >
-      <svg
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M12 6L17.2929 11.2929C17.6834 11.6834 17.6834 12.3166 17.2929 12.7071L12 18"
-          stroke="black"
-          strokeWidth="2"
-          strokeLinecap="round"
-        />
-        <path
-          d="M4 12L16.9 12"
-          stroke="black"
-          strokeWidth="2"
-          strokeLinecap="round"
-        />
-      </svg>
-    </NextAction>
-  </>
-);
diff --git a/packages/app/src/app/pages/Sandbox/OnBoarding/config.ts b/packages/app/src/app/pages/Sandbox/OnBoarding/config.ts
deleted file mode 100644
index d994ed7e1a8..00000000000
--- a/packages/app/src/app/pages/Sandbox/OnBoarding/config.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const AUTO_RUN_TIMER = 10000;
diff --git a/packages/app/src/app/pages/Sandbox/OnBoarding/data.ts b/packages/app/src/app/pages/Sandbox/OnBoarding/data.ts
deleted file mode 100644
index 34ac3d23327..00000000000
--- a/packages/app/src/app/pages/Sandbox/OnBoarding/data.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-export default [
-  {
-    title: 'Import Github',
-    tagline:
-      'Import and run repos direct from GitHub. Or export your sandbox to a repo.',
-    img: '/static/img/onboarding/import.jpg',
-    bgColor: '#1f1f1f',
-    align: 'bottom',
-  },
-  {
-    title: 'Invite your team members',
-    tagline:
-      'A sandbox is collaborative. Like a Google Doc but for code, you can get feedback and create together, in real-time or asynchronously.',
-    img: '/static/img/onboarding/invite.jpg',
-    bgColor: '#1f1f1f',
-  },
-  {
-    title: 'Add npm dependencies',
-    tagline:
-      'Use private packages, or any of the 1M+ public ones, to build powerful apps quickly.',
-    img: '/static/img/onboarding/deps.jpg',
-    bgColor: '#151515',
-  },
-  {
-    title: 'Multiplayer',
-    tagline:
-      'A sandbox can be shared with a click. Your friends, team, or colleagues can join in, or view your creation with just a URL.',
-    img: '/static/img/onboarding/multiplayer.jpg',
-    bgColor: '#151515',
-  },
-  {
-    title: 'Deploy',
-    tagline:
-      "It's possible to deploy your app directly from CodeSandbox through one of our integrated services.",
-    img: '/static/img/onboarding/deploy.jpg',
-    bgColor: '#151515',
-  },
-  {
-    img: '/static/img/onboarding/ending.jpg',
-    cover: true,
-    bgColor: '#151515',
-    cta: "Let's start",
-  },
-];
diff --git a/packages/app/src/app/pages/Sandbox/OnBoarding/index.tsx b/packages/app/src/app/pages/Sandbox/OnBoarding/index.tsx
deleted file mode 100644
index 304e1a952a5..00000000000
--- a/packages/app/src/app/pages/Sandbox/OnBoarding/index.tsx
+++ /dev/null
@@ -1,258 +0,0 @@
-import React, {
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from 'react';
-import styled from 'styled-components';
-import { motion, AnimatePresence } from 'framer-motion';
-import track from '@codesandbox/common/lib/utils/analytics';
-import { ThemeProvider, Stack } from '@codesandbox/components';
-import { useEffects } from 'app/overmind';
-
-import data from './data';
-import { Card } from './Card';
-import { Counter } from './Counter';
-import { Navigation } from './Navigation';
-import { AUTO_RUN_TIMER } from './config';
-
-const MARGIN = 16;
-
-const OnBoarding = () => {
-  const [visibility, setVisibility] = useState(false);
-  const [currentIndex, setCurrentIndex] = useState(0);
-  const [sliderPosition, setSliderPosition] = useState(0);
-  const { browser } = useEffects();
-
-  useEffect(() => {
-    const shouldOnboard = browser.storage.get('should-onboard-user');
-
-    if (shouldOnboard) {
-      setVisibility(true);
-    }
-  }, []);
-
-  const completeOnboarding = () => {
-    setVisibility(false);
-    browser.storage.set('should-onboard-user', false);
-    track('OnBoarding - complete', { slideIndex: currentIndex });
-  };
-
-  const nodeItems = useRef<HTMLDivElement[]>([]);
-  const scrollViewRef = useRef<HTMLDivElement>();
-
-  const listLength = data.length;
-
-  const handlePrev = useCallback(() => {
-    if (currentIndex === 0) return;
-
-    const element = nodeItems.current?.[currentIndex - 1];
-
-    if (!element) return;
-
-    setSliderPosition(prev => prev + (element.offsetWidth ?? 0) + MARGIN);
-    setCurrentIndex(prev => prev - 1);
-  }, [currentIndex]);
-
-  const handleNext = useCallback(() => {
-    if (currentIndex + 1 >= listLength) return;
-
-    const element = nodeItems.current?.[currentIndex + 1];
-
-    if (!element) return;
-
-    setSliderPosition(prev => prev - (element.offsetWidth ?? 0) - MARGIN);
-    setCurrentIndex(prev => prev + 1);
-  }, [currentIndex, listLength]);
-
-  useEffect(
-    function keyboardNavigation() {
-      const navigate = event => {
-        if (event.key === 'ArrowRight') {
-          handleNext();
-        } else if (event.key === 'ArrowLeft') {
-          handlePrev();
-        }
-      };
-
-      document.addEventListener('keydown', navigate, false);
-      return () => document.removeEventListener('keydown', navigate, false);
-    },
-    [handleNext, handlePrev]
-  );
-
-  useEffect(
-    function autoRun() {
-      const timer = setTimeout(() => {
-        handleNext();
-
-        // Auto-close after animation
-        if (currentIndex + 1 === listLength) {
-          completeOnboarding();
-        }
-      }, AUTO_RUN_TIMER);
-
-      return () => {
-        clearTimeout(timer);
-      };
-    },
-    [currentIndex, listLength, handleNext]
-  );
-
-  const centerElement = useCallback(() => {
-    if (!nodeItems.current) return;
-
-    const elementWidth = nodeItems.current[0]?.offsetWidth ?? 0;
-
-    setCurrentIndex(0);
-    setSliderPosition(-elementWidth / 2);
-  }, []);
-
-  useEffect(
-    function onResizeCenter() {
-      window.addEventListener('resize', centerElement);
-
-      return () => {
-        window.removeEventListener('resize', centerElement);
-      };
-    },
-    [centerElement]
-  );
-
-  useLayoutEffect(
-    function init() {
-      if (visibility) {
-        centerElement();
-      }
-    },
-    [visibility]
-  );
-
-  return (
-    <ThemeProvider>
-      <AnimatePresence>
-        {visibility && (
-          <Background exit={{ opacity: 0 }}>
-            <Stack css={{ padding: '1rem 2rem' }}>
-              <Counter amount={listLength} currentIndex={currentIndex} />
-              <CloseButton
-                type="button"
-                onClick={() => {
-                  completeOnboarding();
-                  track('OnBoarding - click close');
-                }}
-              >
-                <svg width={16} height={16} viewBox="0 0 16 16" fill="none">
-                  <path
-                    d="M16.5229 1.73532L15.0684 0.280772L8.52295 6.82622L1.97749 0.280762L0.522949 1.73531L7.06841 8.28076L0.522949 14.8262L1.97749 16.2808L8.52295 9.73531L15.0684 16.2808L16.5229 14.8262L9.9775 8.28076L16.5229 1.73532Z"
-                    fill="white"
-                  />
-                </svg>
-              </CloseButton>
-            </Stack>
-
-            <Navigation
-              onNext={handleNext}
-              onPrev={handlePrev}
-              currentIndex={currentIndex}
-              maxIndex={listLength}
-            />
-
-            <ScrollView
-              transition={{ delay: 0.3 }}
-              initial={{ opacity: 0, x: 50 }}
-              animate={{ opacity: 1, x: 0 }}
-              ref={scrollViewRef}
-            >
-              <StackHolder
-                style={{ transform: `translate3D(${sliderPosition}px, 0, 0)` }}
-              >
-                {data.map((item, index) => {
-                  const onClick = () => {
-                    if (currentIndex === index || currentIndex < index) {
-                      handleNext();
-                    }
-                    if (currentIndex > index) handlePrev();
-                  };
-
-                  return (
-                    <Card
-                      ref={node => {
-                        nodeItems.current[index] = node;
-                      }}
-                      active={currentIndex === index}
-                      align={item.align}
-                      cover={item.cover}
-                      bgColor={item.bgColor}
-                      cta={item.cta}
-                      img={item.img}
-                      key={item.title}
-                      onClick={onClick}
-                      onComplete={completeOnboarding}
-                      tagline={item.tagline}
-                      title={item.title}
-                    />
-                  );
-                })}
-              </StackHolder>
-            </ScrollView>
-          </Background>
-        )}
-      </AnimatePresence>
-    </ThemeProvider>
-  );
-};
-
-const Background = styled(motion.div)`
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  background: #000;
-  z-index: 9;
-`;
-
-const ScrollView = styled(motion.div)`
-  display: flex;
-  align-items: center;
-
-  box-sizing: border-box;
-  height: 100%;
-  overflow: hidden;
-
-  padding-top: 3.75rem;
-  padding-bottom: 10rem;
-  padding-left: 50vw;
-`;
-
-const StackHolder = styled.div`
-  display: flex;
-  transition: all 0.3s ease;
-  height: 100%;
-
-  @media screen and (min-width: 420px) {
-    height: auto;
-  }
-`;
-
-const CloseButton = styled.button`
-  background: none;
-  border: 0;
-  width: 2rem;
-  height: 2rem;
-  cursor: pointer;
-  z-index: 999;
-
-  padding: 0;
-  margin-left: 2rem;
-
-  display: flex;
-
-  > * {
-    margin: auto;
-  }
-`;
-
-export { OnBoarding };
diff --git a/packages/app/src/app/pages/Sandbox/SearchDependencies/Dependency.tsx b/packages/app/src/app/pages/Sandbox/SearchDependencies/Dependency.tsx
deleted file mode 100644
index 27cf0dc20f9..00000000000
--- a/packages/app/src/app/pages/Sandbox/SearchDependencies/Dependency.tsx
+++ /dev/null
@@ -1,305 +0,0 @@
-/* eslint-disable jsx-a11y/control-has-associated-label */
-/* eslint-disable jsx-a11y/label-has-associated-control */
-import React from 'react';
-import { json } from 'overmind';
-import Tooltip from '@codesandbox/common/lib/components/Tooltip';
-import css from '@styled-system/css';
-import { useAppState, useActions } from 'app/overmind';
-import compareVersions from 'compare-versions';
-import { Dependency as DependencyType } from '@codesandbox/common/lib/types/algolia';
-import {
-  Text,
-  Element,
-  Stack,
-  Select,
-  Link,
-  Button,
-} from '@codesandbox/components';
-import { notificationState } from '@codesandbox/common/lib/utils/notifications';
-import { packageExamplesUrl } from '@codesandbox/common/lib/utils/url-generator';
-import { NotificationStatus } from '@codesandbox/notifications';
-import { HomeIcon, GitHubIcon, CSBIcon } from './icons';
-
-const checkboxStyles = ({ areSameVersion }) =>
-  css({
-    position: 'relative',
-    display: 'flex',
-    alignItems: 'center',
-
-    "input[type='checkbox']": {
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      height: 32,
-      width: 32,
-      appearance: 'none',
-      cursor: 'pointer',
-      border: 'none',
-      background: 'transparent',
-    },
-    'input[type="checkbox"]:checked + label:after': {
-      transform: 'scale(1)',
-    },
-    'input[type="checkbox"]:checked + label:before': {
-      borderColor: 'transparent',
-    },
-    label: {
-      display: 'flex',
-      cursor: 'pointer',
-      position: 'relative',
-
-      ':after, :before': {
-        pointerEvents: 'none',
-        cursor: 'pointer',
-      },
-      ':before': {
-        display: 'flex',
-        content: "' '",
-        height: 21,
-        width: 21,
-        borderWidth: '1px',
-        borderStyle: 'solid',
-        borderColor: 'grays.400',
-        borderRadius: '50%',
-        marginRight: 2,
-        boxSizing: 'border-box',
-      },
-      ':after': {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        display: 'flex',
-        content: "' '",
-        height: 21,
-        width: 21,
-        /* Show a gray background if the version is already installed, else show a green color background for a new version */
-        backgroundImage: `url('data:image/svg+xml,%3Csvg width="22" height="23" viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M11 22.2808C17.0751 22.2808 22 17.3559 22 11.2808C22 5.20563 17.0751 0.280762 11 0.280762C4.92487 0.280762 0 5.20563 0 11.2808C0 17.3559 4.92487 22.2808 11 22.2808ZM17 7.28076L10.4971 13.603L6.39416 9.6141L5 11.0481L10.4971 16.3925L18.3942 8.71475L17 7.28076Z" fill="%23${
-          areSameVersion ? 'fff3' : '5BC266'
-        }"/%3E%3C/svg%3E%0A')`,
-        transform: 'scale(0)',
-        borderRadius: '50%',
-        transition: 'transform .3s ease',
-      },
-    },
-  });
-
-export const Dependency = ({ dependency }: { dependency: DependencyType }) => {
-  const {
-    workspace: { selectedDependencies, hitToVersionMap },
-    editor: {
-      parsedConfigurations: {
-        package: {
-          parsed: { dependencies: installedDependencies },
-        },
-      },
-    },
-  } = useAppState();
-  const actions = useActions();
-  const selectedVersion =
-    hitToVersionMap[dependency.objectID] || dependency.tags?.latest;
-
-  const versionInstalled = (installedDependencies || {})[dependency.name];
-
-  const isDependencySelected = Boolean(
-    json(selectedDependencies)[dependency.objectID]
-  );
-
-  const versions = Object.keys(dependency.versions).sort((a, b) => {
-    try {
-      return compareVersions(b, a);
-    } catch (e) {
-      return 0;
-    }
-  });
-
-  const getTagName = (tags: DependencyType['tags'], version: string) =>
-    Object.keys(tags).find(key => tags[key] === version);
-
-  const onVersionSelect = e => {
-    const {
-      target: { value },
-    } = e;
-
-    /*
-      Since the installed version is not added in selected dependency,
-      we add it and than change the version.
-    */
-    if (versionInstalled && !isDependencySelected) {
-      actions.workspace.setSelectedDependencies(dependency);
-    }
-
-    actions.workspace.handleVersionChange({
-      dependency,
-      version: value,
-    });
-  };
-
-  const onDependencySelect = () => {
-    /* Ignore the dependency if the same version is already installed */
-    if (versionInstalled === selectedVersion) {
-      notificationState.addNotification({
-        message: `${dependency.name} v${versionInstalled} is already installed`,
-        status: NotificationStatus.WARNING,
-      });
-      return;
-    }
-
-    actions.workspace.setSelectedDependencies(dependency);
-  };
-
-  return (
-    <Button
-      variant="link"
-      onClick={onDependencySelect}
-      css={css({
-        height: 'auto',
-        ':hover, :focus': {
-          backgroundColor: 'sideBar.border',
-        },
-        ':active:not(:disabled)': {
-          transform: 'scale(1)',
-        },
-      })}
-    >
-      <Stack
-        padding={4}
-        paddingLeft={1}
-        gap={4}
-        css={css({
-          color: 'sideBar.foreground',
-          border: 'none',
-          cursor: 'pointer',
-          background: 'transparent',
-          width: '100%',
-          outline: 'none',
-          borderBottomWidth: '1px',
-          borderBottomStyle: 'solid',
-          borderBottomColor: 'sideBar.border',
-        })}
-      >
-        <Element
-          css={checkboxStyles({
-            areSameVersion: selectedVersion === versionInstalled,
-          })}
-        >
-          <input
-            type="checkbox"
-            id={dependency.name}
-            checked={Boolean(isDependencySelected || versionInstalled)}
-            onChange={onDependencySelect}
-          />
-          <label htmlFor={dependency.name} />
-        </Element>
-        <Stack
-          justify="space-between"
-          css={css({
-            flexGrow: 1,
-          })}
-        >
-          <Element paddingRight={4}>
-            <Text block size={4} weight="400">
-              {dependency._highlightResult ? (
-                <Text
-                  css={css({
-                    em: {
-                      fontWeight: 'bold',
-                      fontStyle: 'initial',
-                    },
-                  })}
-                  dangerouslySetInnerHTML={{
-                    __html: dependency._highlightResult.name?.value,
-                  }}
-                />
-              ) : (
-                dependency.name
-              )}
-            </Text>
-            <Text
-              block
-              size={3}
-              variant="muted"
-              marginTop={1}
-              css={css({ wordBreak: 'break-all' })}
-            >
-              {dependency.description}
-            </Text>
-
-            {dependency.owner && (
-              <Stack align="center" gap={2} marginTop={2}>
-                <img
-                  css={css({
-                    borderRadius: 'small',
-                    width: '6',
-                    height: '6',
-                  })}
-                  src={dependency.owner.avatar}
-                  alt={dependency.owner.name}
-                />
-                <Text size={3}>{dependency.owner.name}</Text>
-              </Stack>
-            )}
-          </Element>
-          <Element css={{ flexShrink: 0, width: 208 }}>
-            <Select
-              onClick={e => e.stopPropagation()}
-              value={selectedVersion || versionInstalled}
-              onChange={onVersionSelect}
-            >
-              {versions.map(v => {
-                const tagName = getTagName(dependency.tags, v);
-                return (
-                  <option value={v} key={v}>
-                    {v} {tagName && `- ${tagName}`}
-                  </option>
-                );
-              })}
-            </Select>
-            <Stack justify="flex-end" marginTop={2} gap={4} align="center">
-              <Element>
-                {dependency.homepage ? (
-                  <Tooltip content="Homepage">
-                    <a href={dependency.homepage}>
-                      <HomeIcon />
-                    </a>
-                  </Tooltip>
-                ) : null}
-                <Tooltip content="Examples">
-                  <Link href={packageExamplesUrl(dependency.name)}>
-                    <CSBIcon />
-                  </Link>
-                </Tooltip>
-                {dependency.githubRepo ? (
-                  <Tooltip content="GitHub Repo">
-                    <a
-                      href={`https://github.com/${dependency.githubRepo.user}/${dependency.githubRepo.project}`}
-                    >
-                      <GitHubIcon />
-                    </a>
-                  </Tooltip>
-                ) : null}
-              </Element>
-              <Stack gap={2}>
-                <Text size={3} variant="muted">
-                  {dependency.humanDownloadsLast30Days.toUpperCase()}
-                </Text>
-                <Text
-                  title={dependency.license}
-                  size={3}
-                  variant="muted"
-                  css={css({
-                    maxWidth: 40,
-                    whiteSpace: 'nowrap',
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis',
-                  })}
-                >
-                  {dependency.license}
-                </Text>
-              </Stack>
-            </Stack>
-          </Element>
-        </Stack>
-      </Stack>
-    </Button>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/SearchDependencies/Footer.tsx b/packages/app/src/app/pages/Sandbox/SearchDependencies/Footer.tsx
deleted file mode 100644
index 2cc94f556ea..00000000000
--- a/packages/app/src/app/pages/Sandbox/SearchDependencies/Footer.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import React from 'react';
-import { Stack, Element, Text, Button } from '@codesandbox/components';
-import css from '@styled-system/css';
-import { useAppState, useActions } from 'app/overmind';
-import { CloseIcon } from './icons';
-
-export const AddDependencyModalFooter = ({ onClick }) => {
-  const actions = useActions();
-  const workspace = useAppState().workspace;
-
-  const numberOfDependencies = Object.keys(workspace.selectedDependencies)
-    .length;
-
-  return (
-    <Stack
-      paddingY={4}
-      paddingRight={3}
-      as="footer"
-      justify="flex-end"
-      align="center"
-      css={css({
-        boxShadow: '0px -4px 8px rgba(0,0,0,0.25)',
-        backgroundColor: 'sideBar.background',
-        borderWidth: 0,
-        borderTopWidth: '1px',
-        borderStyle: 'solid',
-        borderColor: 'sideBar.border',
-        position: 'absolute',
-        bottom: 0,
-        width: '100%',
-        left: 0,
-      })}
-      gap={2}
-    >
-      {numberOfDependencies ? (
-        <Element
-          onClick={() => actions.workspace.toggleShowingSelectedDependencies()}
-          as="button"
-          css={css({
-            borderRadius: 'small',
-            width: 26,
-            height: 26,
-            backgroundColor: workspace.showingSelectedDependencies
-              ? 'sideBar.foreground'
-              : 'green',
-            color: 'sideBar.background',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            border: 'none',
-            cursor: 'pointer',
-            outline: 'none',
-          })}
-        >
-          {workspace.showingSelectedDependencies ? (
-            <CloseIcon />
-          ) : (
-            <Text size={2}>{numberOfDependencies} </Text>
-          )}
-        </Element>
-      ) : null}
-      <Button
-        disabled={!numberOfDependencies}
-        autoWidth
-        onClick={onClick}
-        css={css({
-          width: 'auto !important',
-          flexBasis: 124,
-        })}
-      >
-        Add dependenc
-        {numberOfDependencies > 1 ? 'ies' : 'y'}
-      </Button>
-    </Stack>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/SearchDependencies/SearchBox.tsx b/packages/app/src/app/pages/Sandbox/SearchDependencies/SearchBox.tsx
deleted file mode 100644
index aa2983faeb7..00000000000
--- a/packages/app/src/app/pages/Sandbox/SearchDependencies/SearchBox.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-import React, { useState, useCallback, useEffect, useRef } from 'react';
-import { Input, Element } from '@codesandbox/components';
-import { useAppState, useActions } from 'app/overmind';
-import css from '@styled-system/css';
-import useKeys from 'react-use/lib/useKeyboardJs';
-import { debounce } from 'lodash';
-import { AlgoliaIcon } from './icons';
-
-const getBackgroundColor = ({ focus, theme }) =>
-  `url('data:image/svg+xml,%3Csvg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M7.75208 8.73995C6.9345 9.40212 5.89308 9.79879 4.75902 9.79879C2.13068 9.79879 0 7.66811 0 5.03978C0 2.41145 2.13068 0.280762 4.75902 0.280762C7.38735 0.280762 9.51803 2.41145 9.51803 5.03978C9.51803 6.17384 9.12136 7.21526 8.45919 8.03285L13.3536 12.9272L12.6464 13.6343L7.75208 8.73995ZM8.51803 5.03978C8.51803 7.11583 6.83506 8.79879 4.75902 8.79879C2.68297 8.79879 1 7.11583 1 5.03978C1 2.96373 2.68297 1.28076 4.75902 1.28076C6.83506 1.28076 8.51803 2.96373 8.51803 5.03978Z" fill="%23${
-    focus
-      ? theme?.colors?.input?.foreground?.replace('#', '')
-      : theme?.colors?.mutedForeground?.replace('#', '')
-  }"/%3E%3C/svg%3E%0A')`;
-
-export const SearchBox = ({ handleManualSelect, onChange, listRef }) => {
-  const { workspace } = useAppState();
-  const {
-    changeDependencySearch,
-    toggleShowingSelectedDependencies,
-  } = useActions().workspace;
-  const [focus, setFocus] = useState(false);
-  const form = useRef<HTMLFormElement>();
-  const [up] = useKeys('up');
-  const [down] = useKeys('down');
-
-  useEffect(() => {
-    const list = listRef.current as HTMLUListElement;
-    const first = list.firstChild as HTMLButtonElement;
-    const last = list.lastChild as HTMLButtonElement;
-    const formRef: HTMLFormElement = form.current;
-    const activeElement = document.activeElement as
-      | HTMLButtonElement
-      | HTMLInputElement;
-
-    if (formRef) {
-      const input = formRef.getElementsByTagName('input')[0];
-      if (up) {
-        if (
-          activeElement === (input || first) ||
-          !activeElement.previousSibling
-        ) {
-          if (activeElement === first) {
-            input.focus();
-          }
-          // do nothing
-        } else {
-          const prev = activeElement.previousSibling as HTMLButtonElement;
-          if (prev?.focus) {
-            prev.focus();
-          }
-        }
-      }
-      if (down) {
-        if (activeElement === last) {
-          // do nothing
-        } else if (activeElement === input && first) {
-          first.focus();
-        } else {
-          const next = activeElement.nextSibling as HTMLButtonElement;
-          if (next?.focus) {
-            next.focus();
-          }
-        }
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [up, down]);
-
-  useEffect(() => {
-    onChange(workspace.dependencySearch);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [workspace.dependencySearch]);
-
-  const handleChange = (value: string) => {
-    changeDependencySearch(value);
-    if (workspace.showingSelectedDependencies) {
-      toggleShowingSelectedDependencies();
-    }
-  };
-
-  const debouncedChange = useCallback(debounce(handleChange, 500), []);
-
-  return (
-    <form
-      ref={form}
-      onSubmit={() => handleManualSelect(workspace.dependencySearch)}
-    >
-      <Element
-        paddingLeft={4}
-        css={css({
-          position: 'relative',
-          borderBottomWidth: '1px',
-          borderBottomStyle: 'solid',
-          borderBottomColor: 'sideBar.border',
-
-          '&:before': {
-            left: 4,
-            width: 32,
-            height: '100%',
-            content: '""',
-            position: 'absolute',
-            top: 0,
-            backgroundImage: theme => getBackgroundColor({ focus, theme }),
-            backgroundRepeat: 'no-repeat',
-            backgroundPosition: 'center center',
-            opacity: focus ? 1 : 0.8,
-          },
-        })}
-      >
-        <Input
-          autoFocus
-          onFocus={() => setFocus(true)}
-          onBlur={() => setFocus(false)}
-          placeholder="Add npm dependency"
-          css={css({
-            paddingRight: 140,
-            paddingLeft: 10,
-            height: 65,
-            fontSize: 4,
-            color: 'input.foreground',
-            backgroundColor: 'sideBar.background',
-            border: 'none',
-            ':focus, :hover': {
-              border: 'none',
-            },
-            '::-webkit-input-placeholder': {
-              fontSize: 4,
-            },
-            '::-moz-placeholder': {
-              fontSize: 4,
-            },
-            ':-ms-input-placeholder': {
-              fontSize: 4,
-            },
-            ':-moz-placeholder': {
-              fontSize: 4,
-            },
-          })}
-          onChange={e => debouncedChange(e.target.value)}
-          defaultValue={workspace.dependencySearch}
-        />
-        <AlgoliaIcon
-          css={css({
-            top: 4,
-            right: 4,
-            position: 'absolute',
-          })}
-        />
-      </Element>
-    </form>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/SearchDependencies/icons.tsx b/packages/app/src/app/pages/Sandbox/SearchDependencies/icons.tsx
deleted file mode 100644
index d9e1a26bf42..00000000000
--- a/packages/app/src/app/pages/Sandbox/SearchDependencies/icons.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import React from 'react';
-
-export const HomeIcon = props => (
-  <svg width={33} height={32} fill="none" viewBox="0 0 33 32" {...props}>
-    <path
-      fill="#fff"
-      fillRule="evenodd"
-      d="M16.266 8.778a.703.703 0 00-.994 0L7.97 16.081a.703.703 0 00.497 1.2h1.302v4a1 1 0 001 1h10a1 1 0 001-1v-4h1.303c.626 0 .94-.758.497-1.2l-7.303-7.303z"
-      clipRule="evenodd"
-    />
-  </svg>
-);
-
-export const CSBIcon = props => (
-  <svg width={33} height={32} fill="none" viewBox="0 0 33 32" {...props}>
-    <path
-      fill="#B8B9BA"
-      fillRule="evenodd"
-      d="M16.205 15.85v8.095a.65.65 0 00.36-.103l6.482-3.703c.256-.147.36-.374.36-.67v-7.51a.63.63 0 00-.103-.36l-6.891 3.894a.412.412 0 00-.208.357zm3.601 4.649c0 .205-.077.308-.257.411l-2.16 1.235c-.155.102-.36.051-.36-.155v-5.504c0-.147.129-.338.257-.411l4.938-2.83c.137-.079.257.048.257.206v2.932a.396.396 0 01-.206.36l-2.212 1.184c-.134.071-.257.208-.257.36v2.212z"
-      clipRule="evenodd"
-    />
-    <path
-      fill="#F2F2F2"
-      fillRule="evenodd"
-      d="M9.003 19.47v-7.51c0-.296.155-.574.412-.72l6.276-3.55c.135-.072.36-.103.514-.103.154 0 .393.038.515.103l6.224 3.55c.123.072.29.24.36.36l-6.893 3.909a.415.415 0 00-.206.36v8.076a.829.829 0 01-.411-.103L9.465 20.19c-.256-.147-.463-.425-.463-.72zm.926-6.019v2.932c0 .206.052.309.258.412l2.16 1.234a.424.424 0 01.257.412v2.058c0 .205.052.308.257.411l2.16 1.235c.207.102.361.051.361-.155v-5.504a.424.424 0 00-.257-.411l-4.836-2.778c-.154-.103-.36-.052-.36.154zm8.437-3.498l-1.904 1.08a.467.467 0 01-.514 0l-1.903-1.08a.426.426 0 00-.412 0l-2.366 1.338c-.206.103-.206.308 0 .411l4.732 2.727a.416.416 0 00.412 0l4.732-2.727c.155-.103.206-.308 0-.411l-2.366-1.338a.426.426 0 00-.411 0z"
-      clipRule="evenodd"
-    />
-  </svg>
-);
-
-export const GitHubIcon = props => (
-  <svg width={32} height={32} fill="none" viewBox="0 0 32 32" {...props}>
-    <g>
-      <path
-        fill="#fff"
-        d="M22.927 12.365a8.069 8.069 0 00-2.912-2.984A7.678 7.678 0 0016 8.28c-1.451 0-2.79.366-4.016 1.1a8.067 8.067 0 00-2.911 2.984A8.177 8.177 0 008 16.481c0 1.787.509 3.394 1.526 4.821 1.017 1.427 2.332 2.415 3.943 2.963.187.036.326.01.416-.075a.423.423 0 00.136-.32l-.006-.576a97.12 97.12 0 01-.005-.95l-.24.042c-.152.029-.345.04-.578.037a4.291 4.291 0 01-.723-.074 1.598 1.598 0 01-.698-.32 1.354 1.354 0 01-.459-.657l-.104-.246a2.677 2.677 0 00-.328-.544c-.15-.2-.3-.335-.453-.406l-.073-.054a.769.769 0 01-.135-.128.592.592 0 01-.094-.15c-.02-.05-.004-.09.052-.122.056-.032.156-.048.302-.048l.208.032c.14.028.311.114.516.256.205.142.373.328.505.555.16.292.352.515.578.668.226.153.453.23.683.23.229 0 .427-.019.593-.054.167-.036.323-.09.469-.16.062-.477.233-.844.51-1.1a6.97 6.97 0 01-1.067-.192 4.192 4.192 0 01-.98-.417 2.82 2.82 0 01-.838-.715c-.222-.285-.405-.659-.547-1.122-.142-.462-.213-.996-.213-1.601 0-.862.274-1.595.823-2.2-.257-.648-.233-1.374.072-2.178.202-.064.5-.016.896.144.396.16.686.297.87.411.184.114.332.21.443.289a7.227 7.227 0 012-.278c.687 0 1.354.092 2 .277l.396-.256c.27-.17.59-.327.958-.47.368-.142.65-.181.844-.117.312.804.34 1.53.083 2.178.549.605.823 1.339.823 2.2 0 .605-.071 1.14-.213 1.607-.143.466-.326.84-.552 1.12a2.927 2.927 0 01-.844.711 4.203 4.203 0 01-.98.416c-.315.086-.671.15-1.067.193.361.32.542.826.542 1.516v2.253a.43.43 0 00.13.32c.087.085.224.11.411.075 1.611-.548 2.926-1.536 3.943-2.963S24 18.268 24 16.48c0-1.488-.358-2.86-1.073-4.116z"
-      />
-    </g>
-  </svg>
-);
-
-export const AlgoliaIcon = props => (
-  <svg width={118} height={33} fill="none" viewBox="0 0 572 64" {...props}>
-    <title>Search by Algolia</title>
-    <path
-      fill="#fff"
-      d="M16 48.3c-3.4 0-6.3-.6-8.7-1.7A12.4 12.4 0 0 1 1.9 42C.6 40 0 38 0 35.4h6.5a6.7 6.7 0 0 0 3.9 6c1.4.7 3.3 1.1 5.6 1.1 2.2 0 4-.3 5.4-1a7 7 0 0 0 3-2.4 6 6 0 0 0 1-3.4c0-1.5-.6-2.8-1.9-3.7-1.3-1-3.3-1.6-5.9-1.8l-4-.4c-3.7-.3-6.6-1.4-8.8-3.4a10 10 0 0 1-3.3-7.9c0-2.4.6-4.6 1.8-6.4a12 12 0 0 1 5-4.3c2.2-1 4.7-1.6 7.5-1.6s5.5.5 7.6 1.6a12 12 0 0 1 5 4.4c1.2 1.8 1.8 4 1.8 6.7h-6.5a6.4 6.4 0 0 0-3.5-5.9c-1-.6-2.6-1-4.4-1s-3.2.3-4.4 1c-1.1.6-2 1.4-2.6 2.4-.5 1-.8 2-.8 3.1a5 5 0 0 0 1.5 3.6c1 1 2.6 1.7 4.7 1.9l4 .3c2.8.2 5.2.8 7.2 1.8 2.1 1 3.7 2.2 4.9 3.8a9.7 9.7 0 0 1 1.7 5.8c0 2.5-.7 4.7-2 6.6a13 13 0 0 1-5.6 4.4c-2.4 1-5.2 1.6-8.4 1.6Zm35.6 0c-2.6 0-4.8-.4-6.7-1.3a13 13 0 0 1-4.7-3.5 17.1 17.1 0 0 1-3.6-10.4v-1c0-2 .3-3.8 1-5.6a13 13 0 0 1 7.3-8.3 15 15 0 0 1 6.3-1.4A13.2 13.2 0 0 1 64 24.3c1 2.2 1.6 4.6 1.6 7.2V34H39.4v-4.3h21.8l-1.8 2.2c0-2-.3-3.7-.9-5.1a7.3 7.3 0 0 0-2.7-3.4c-1.2-.7-2.7-1.1-4.6-1.1s-3.4.4-4.7 1.3a8 8 0 0 0-2.9 3.6c-.6 1.5-.9 3.3-.9 5.4 0 2 .3 3.7 1 5.3a7.9 7.9 0 0 0 2.8 3.7c1.3.8 3 1.3 5 1.3s3.8-.5 5.1-1.3c1.3-1 2.1-2 2.4-3.2h6a11.8 11.8 0 0 1-7 8.7 16 16 0 0 1-6.4 1.2ZM80 48c-2.2 0-4-.3-5.7-1a8.4 8.4 0 0 1-3.7-3.3 9.7 9.7 0 0 1-1.3-5.2c0-2 .5-3.8 1.5-5.2a9 9 0 0 1 4.3-3.1c1.8-.7 4-1 6.7-1H89v4.1h-7.5c-2 0-3.4.5-4.4 1.4-1 1-1.6 2.1-1.6 3.6s.5 2.7 1.6 3.6c1 1 2.5 1.4 4.4 1.4 1.1 0 2.2-.2 3.2-.7 1-.4 1.9-1 2.6-2 .6-1 1-2.4 1-4.2l1.7 2.1c-.2 2-.7 3.8-1.5 5.2a9 9 0 0 1-3.4 3.3 12 12 0 0 1-5.3 1Zm9.5-.7v-8.8h-1v-10c0-1.8-.5-3.2-1.4-4.1-1-1-2.4-1.4-4.2-1.4a142.9 142.9 0 0 0-10.2.4v-5.6a74.8 74.8 0 0 1 8.6-.4c3 0 5.5.4 7.5 1.2s3.4 2 4.4 3.6c1 1.7 1.4 4 1.4 6.7v18.4h-5Zm12.9 0V17.8h5v12.3h-.2c0-4.2 1-7.4 2.8-9.5a11 11 0 0 1 8.3-3.1h1v5.6h-2a9 9 0 0 0-6.3 2.2c-1.5 1.5-2.2 3.6-2.2 6.4v15.6h-6.4Zm34.4 1a15 15 0 0 1-6.6-1.3c-1.9-.9-3.4-2-4.7-3.5a15.5 15.5 0 0 1-2.7-5c-.6-1.7-1-3.6-1-5.4v-1c0-2 .4-3.8 1-5.6a15 15 0 0 1 2.8-4.9c1.3-1.5 2.8-2.6 4.6-3.5a16.4 16.4 0 0 1 13.3.2c2 1 3.5 2.3 4.8 4a12 12 0 0 1 2 6H144c-.2-1.6-1-3-2.2-4.1a7.5 7.5 0 0 0-5.2-1.7 8 8 0 0 0-4.7 1.3 8 8 0 0 0-2.8 3.6 13.8 13.8 0 0 0 0 10.3c.6 1.5 1.5 2.7 2.8 3.6s2.8 1.3 4.8 1.3c1.5 0 2.7-.2 3.8-.8a7 7 0 0 0 2.6-2c.7-1 1-2 1.2-3.2h6.2a11 11 0 0 1-2 6.2 15.1 15.1 0 0 1-11.8 5.5Zm19.7-1v-40h6.4V31h-1.3c0-3 .4-5.5 1.1-7.6a9.7 9.7 0 0 1 3.5-4.8A9.9 9.9 0 0 1 172 17h.3c3.5 0 6 1.1 7.9 3.5 1.7 2.3 2.6 5.7 2.6 10v16.8h-6.4V29.6c0-2.1-.6-3.8-1.8-5a6.4 6.4 0 0 0-4.8-1.8c-2 0-3.7.7-5 2a7.8 7.8 0 0 0-1.9 5.5v17h-6.4Zm63.8 1a12.2 12.2 0 0 1-10.9-6.2 19 19 0 0 1-1.8-7.3h1.4v12.5h-5.1v-40h6.4v19.8l-2 3.5c.2-3.1.8-5.7 1.9-7.7a11 11 0 0 1 4.4-4.5c1.8-1 3.9-1.5 6.1-1.5a13.4 13.4 0 0 1 12.8 9.1c.7 1.9 1 3.8 1 6v1c0 2.2-.3 4.1-1 6a13.6 13.6 0 0 1-13.2 9.4Zm-1.2-5.5a8.4 8.4 0 0 0 7.9-5c.7-1.5 1.1-3.3 1.1-5.3s-.4-3.8-1.1-5.3a8.7 8.7 0 0 0-3.2-3.6 9.6 9.6 0 0 0-9.2-.2 8.5 8.5 0 0 0-3.3 3.2c-.8 1.4-1.3 3-1.3 5v2.3a9 9 0 0 0 1.3 4.8 9 9 0 0 0 3.4 3c1.4.7 2.8 1 4.4 1Zm27.3 3.9-10-28.9h6.5l9.5 28.9h-6Zm-7.5 12.2v-5.7h4.9c1 0 2-.1 2.9-.4a4 4 0 0 0 2-1.4c.4-.7.9-1.6 1.2-2.7l8.6-30.9h6.2l-9.3 32.4a14 14 0 0 1-2.5 5 8.9 8.9 0 0 1-4 2.8c-1.5.6-3.4.9-5.6.9h-4.4Zm9-12.2v-5.2h6.4v5.2H248Z"
-    />
-    <path
-      fill="#fff"
-      d="M534.4 9.1H528a.8.8 0 0 1-.7-.7V1.8c0-.4.2-.7.6-.8l6.5-1c.4 0 .8.2.9.6v7.8c0 .4-.4.7-.8.7zM428 35.2V.8c0-.5-.3-.8-.7-.8h-.2l-6.4 1c-.4 0-.7.4-.7.8v35c0 1.6 0 11.8 12.3 12.2.5 0 .8-.4.8-.8V43c0-.4-.3-.7-.6-.8-4.5-.5-4.5-6-4.5-7zm106.5-21.8H528c-.4 0-.7.4-.7.8v34c0 .4.3.8.7.8h6.5c.4 0 .8-.4.8-.8v-34c0-.5-.4-.8-.8-.8zm-17.7 21.8V.8c0-.5-.3-.8-.8-.8l-6.5 1c-.4 0-.7.4-.7.8v35c0 1.6 0 11.8 12.3 12.2.4 0 .8-.4.8-.8V43c0-.4-.3-.7-.7-.8-4.4-.5-4.4-6-4.4-7zm-22.2-20.6a16.5 16.5 0 0 1 8.6 9.3c.8 2.2 1.3 4.8 1.3 7.5a19.4 19.4 0 0 1-4.6 12.6 14.8 14.8 0 0 1-5.2 3.6c-2 .9-5.2 1.4-6.8 1.4a21 21 0 0 1-6.7-1.4 15.4 15.4 0 0 1-8.6-9.3 21.3 21.3 0 0 1 0-14.4 15.2 15.2 0 0 1 8.6-9.3c2-.8 4.3-1.2 6.7-1.2s4.6.4 6.7 1.2zm-6.7 27.6c2.7 0 4.7-1 6.2-3s2.2-4.3 2.2-7.8-.7-6.3-2.2-8.3-3.5-3-6.2-3-4.7 1-6.1 3c-1.5 2-2.2 4.8-2.2 8.3s.7 5.8 2.2 7.8 3.5 3 6.2 3zm-88.8-28.8c-6.2 0-11.7 3.3-14.8 8.2a18.6 18.6 0 0 0 4.8 25.2c1.8 1.2 4 1.8 6.2 1.7s.1 0 .1 0h.9c4.2-.7 8-4 9.1-8.1v7.4c0 .4.3.7.8.7h6.4a.7.7 0 0 0 .7-.7V14.2c0-.5-.3-.8-.7-.8h-13.5zm6.3 26.5a9.8 9.8 0 0 1-5.7 2h-.5a10 10 0 0 1-9.2-14c1.4-3.7 5-6.3 9-6.3h6.4v18.3zm152.3-26.5h13.5c.5 0 .8.3.8.7v33.7c0 .4-.3.7-.8.7h-6.4a.7.7 0 0 1-.8-.7v-7.4c-1.2 4-4.8 7.4-9 8h-.1a4.2 4.2 0 0 1-.5.1h-.9a10.3 10.3 0 0 1-7-2.6c-4-3.3-6.5-8.4-6.5-14.2 0-3.7 1-7.2 3-10 3-5 8.5-8.3 14.7-8.3zm.6 28.4c2.2-.1 4.2-.6 5.7-2V21.7h-6.3a9.8 9.8 0 0 0-9 6.4 10.2 10.2 0 0 0 9.1 13.9h.5zM452.8 13.4c-6.2 0-11.7 3.3-14.8 8.2a18.5 18.5 0 0 0 3.6 24.3 10.4 10.4 0 0 0 13 .6c2.2-1.5 3.8-3.7 4.5-6.1v7.8c0 2.8-.8 5-2.2 6.3-1.5 1.5-4 2.2-7.5 2.2l-6-.3c-.3 0-.7.2-.8.5l-1.6 5.5c-.1.4.1.8.5 1h.1c2.8.4 5.5.6 7 .6 6.3 0 11-1.4 14-4.1 2.7-2.5 4.2-6.3 4.5-11.4V14.2c0-.5-.4-.8-.8-.8h-13.5zm6.3 8.2v18.3a9.6 9.6 0 0 1-5.6 2h-1a10.3 10.3 0 0 1-8.8-14c1.4-3.7 5-6.3 9-6.3h6.4zM291 31.5A32 32 0 0 1 322.8 0h30.8c.6 0 1.2.5 1.2 1.2v61.5c0 1.1-1.3 1.7-2.2 1l-19.2-17a18 18 0 0 1-11 3.4 18.1 18.1 0 1 1 18.2-14.8c-.1.4-.5.7-.9.6-.1 0-.3 0-.4-.2l-3.8-3.4c-.4-.3-.6-.8-.7-1.4a12 12 0 1 0-2.4 8.3c.4-.4 1-.5 1.6-.2l14.7 13.1v-46H323a26 26 0 1 0 10 49.7c.8-.4 1.6-.2 2.3.3l3 2.7c.3.2.3.7 0 1l-.2.2a32 32 0 0 1-47.2-28.6z"
-    />
-  </svg>
-);
-
-export const CloseIcon = props => (
-  <svg width={12} height={12} fill="none" viewBox="0 0 12 12" {...props}>
-    <path
-      fill="#343434"
-      d="M12 1.09L10.91 0 6 4.91 1.09 0 0 1.09 4.91 6 0 10.91 1.09 12 6 7.09 10.91 12 12 10.91 7.09 6 12 1.09z"
-    />
-  </svg>
-);
diff --git a/packages/app/src/app/pages/Sandbox/SearchDependencies/index.tsx b/packages/app/src/app/pages/Sandbox/SearchDependencies/index.tsx
deleted file mode 100644
index 939d688a2ec..00000000000
--- a/packages/app/src/app/pages/Sandbox/SearchDependencies/index.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import { Dependency as DependencyType } from '@codesandbox/common/lib/types/algolia';
-import { useAppState, useActions } from 'app/overmind';
-import { Element, Text, Stack } from '@codesandbox/components';
-import css from '@styled-system/css';
-import { isPrivateScope } from 'app/utils/private-registry';
-import { SearchBox } from './SearchBox';
-import { Dependency } from './Dependency';
-import { AddDependencyModalFooter } from './Footer';
-
-type DependencyListProps = {
-  isPrivateDependency: boolean;
-  list: React.MutableRefObject<HTMLDivElement>;
-};
-
-const DependencyList = ({ isPrivateDependency, list }: DependencyListProps) => {
-  const { workspace } = useAppState();
-
-  let message: string | undefined;
-
-  if (!workspace.dependencies.length && !workspace.loadingDependencySearch) {
-    message = 'It looks like there aren’t any matches for your query';
-  } else if (isPrivateDependency) {
-    message =
-      "This is a private package, please fill in the full package name and press 'Enter'";
-  }
-
-  const dependencyList = workspace.showingSelectedDependencies
-    ? Object.values(workspace.selectedDependencies).map(dependency => (
-        <Dependency key={dependency.objectID} dependency={dependency} />
-      ))
-    : workspace.dependencies.map(dependency => (
-        <Dependency key={dependency.objectID} dependency={dependency} />
-      ));
-
-  return (
-    <Element
-      ref={list}
-      paddingBottom={10}
-      css={css({
-        height: '60vh',
-        overflow: 'auto',
-      })}
-    >
-      {message ? (
-        <Stack align="center" justify="center" css={css({ height: '100%' })}>
-          <Text variant="muted">{message}</Text>
-        </Stack>
-      ) : (
-        dependencyList
-      )}
-    </Element>
-  );
-};
-
-export const SearchDependencies = ({ onConfirm }) => {
-  const actions = useActions();
-  const { workspace, editor } = useAppState();
-  const list = useRef();
-
-  const [isPrivateDependency, setIsPrivateDependency] = React.useState<boolean>(
-    false
-  );
-
-  const handleSelect = async (hit: DependencyType) => {
-    let version = workspace.hitToVersionMap[hit.objectID];
-
-    if (!version && hit.tags) {
-      version = hit.tags.latest;
-    }
-
-    await onConfirm(hit.name, version);
-  };
-
-  const handleManualSelect = (hitName: string) => {
-    if (!hitName) {
-      return;
-    }
-
-    const isScoped = hitName.startsWith('@');
-    let version = 'latest';
-
-    const splittedName = hitName.split('@');
-
-    if (splittedName.length > (isScoped ? 2 : 1)) {
-      version = splittedName.pop();
-    }
-
-    const depName = splittedName.join('@');
-
-    onConfirm(depName, version);
-  };
-
-  const onSelectDependencies = () => {
-    Object.values(workspace.selectedDependencies)
-      .filter(a => a)
-      .map(handleSelect);
-  };
-
-  const onChange = (value?: string) => {
-    let searchValue = value;
-    if (searchValue.includes('@') && !searchValue.startsWith('@')) {
-      searchValue = value.split('@')[0];
-    }
-
-    if (searchValue.startsWith('@')) {
-      // if it starts with one and has a version
-      if (searchValue.split('@').length === 3) {
-        const part = searchValue.split('@');
-        searchValue = `@${part[0]}${part[1]}`;
-      }
-    }
-
-    actions.workspace.getDependencies(searchValue);
-
-    setIsPrivateDependency(
-      editor.currentSandbox &&
-        isPrivateScope(editor.currentSandbox, searchValue)
-    );
-  };
-
-  useEffect(() => {
-    actions.workspace.clearSelectedDependencies();
-    // Why did we call this? The action just returns when undefined
-    // actions.workspace.getDependencies();
-
-    return () => {
-      actions.workspace.changeDependencySearch('');
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return (
-    <div
-      className="search-dependencies"
-      css={css({
-        backgroundColor: 'sideBar.background',
-        height: '70vh',
-        position: 'relative',
-      })}
-    >
-      <SearchBox
-        onChange={onChange}
-        handleManualSelect={handleManualSelect}
-        listRef={list}
-      />
-      <DependencyList isPrivateDependency={isPrivateDependency} list={list} />
-      <AddDependencyModalFooter onClick={onSelectDependencies} />
-    </div>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/index.tsx b/packages/app/src/app/pages/Sandbox/index.tsx
index 65a22d45f25..f1eef762a98 100644
--- a/packages/app/src/app/pages/Sandbox/index.tsx
+++ b/packages/app/src/app/pages/Sandbox/index.tsx
@@ -1,12 +1,8 @@
-import { getSandboxName } from '@codesandbox/common/lib/utils/get-sandbox-name';
-import { useAppState, useActions } from 'app/overmind';
-import React, { useEffect } from 'react';
-import { Helmet } from 'react-helmet';
+import { sandboxUrl } from '@codesandbox/common/lib/utils/url-generator';
+import { useAppState } from 'app/overmind';
+import React from 'react';
 
-import { useBetaSandboxEditor } from 'app/hooks/useBetaSandboxEditor';
 import { Redirect } from 'react-router-dom';
-import { Editor } from './Editor';
-import { OnBoarding } from './OnBoarding';
 
 interface Props {
   showModalOnTop?: 'newSandbox' | 'newDevbox' | 'new';
@@ -17,112 +13,30 @@ interface Props {
   };
 }
 
-export const Sandbox = React.memo<Props>(
-  ({ match, showModalOnTop }) => {
-    const state = useAppState();
-    const actions = useActions();
-    const [hasBetaEditorExperiment] = useBetaSandboxEditor();
-    const { sandboxPageMounted } = actions;
+export const Sandbox: React.FC<Props> = ({ showModalOnTop, match }) => {
+  const state = useAppState();
 
-    /**
-     * !important Hard bug fix
-     *
-     * This address temporarily many unexpected
-     * behaviors that occurs when  navigating away
-     * from the editor and go back to it
-     * Eg: Editor -> Dashboard -> Editor
-     *
-     * @link https://www.notion.so/Unexpected-behaviors-when-navigating-away-from-the-editor-and-go-back-to-it-b5fcc670c3fb46afa8a57dd05f701bcb
-     */
-    useEffect(() => {
-      if (window.CSEditor) {
-        window.location.reload();
-      }
-    }, []);
+  if (match.params.id) {
+    window.location.href = sandboxUrl({ id: match.params.id });
+    return null;
+  }
 
-    useEffect(() => {
-      sandboxPageMounted();
-    }, [sandboxPageMounted]);
-
-    useEffect(() => {
-      if (!showModalOnTop) {
-        if (window.screen.availWidth < 800) {
-          if (!document.location.search.includes('from-embed')) {
-            const addedSign = document.location.search ? '&' : '?';
-            document.location.href =
-              document.location.href.replace('/s/', '/embed/') +
-              addedSign +
-              'codemirror=1';
-          } else {
-            actions.preferences.codeMirrorForced();
-          }
-        }
-      }
-
-      actions.live.onNavigateAway();
-      if (match?.params) {
-        actions.editor.sandboxChanged({
-          id: match.params.id,
-          hasBetaEditorExperiment,
-        });
-      }
-
-      // eslint-disable-next-line
-    }, [
-      actions.live,
-      actions.editor,
-      actions.preferences,
-      showModalOnTop,
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      match?.params,
-    ]);
-
-    useEffect(
-      () => () => {
-        actions.live.onNavigateAway();
-      },
-      [actions.live]
-    );
-
-    const sandbox = state.editor.currentSandbox;
-
-    const getTitle = () => {
-      if (showModalOnTop) {
-        return 'Create ' + showModalOnTop === 'newSandbox'
-          ? 'Sandbox'
-          : 'Devbox';
-      }
-
-      if (sandbox) {
-        return getSandboxName(sandbox);
-      }
-
-      return 'Loading...';
-    };
-
-    if (state.hasLogIn) {
-      if (showModalOnTop === 'newSandbox') {
-        return <Redirect to="/dashboard/recent?create_sandbox=true" />;
-      }
+  if (state.hasLogIn) {
+    if (showModalOnTop === 'newSandbox') {
+      return <Redirect to="/dashboard/recent?create_sandbox=true" />;
+    }
 
-      if (showModalOnTop === 'newDevbox') {
-        return <Redirect to="/dashboard/recent?create_devbox=true" />;
-      }
+    if (showModalOnTop === 'newDevbox') {
+      return <Redirect to="/dashboard/recent?create_devbox=true" />;
+    }
 
-      if (showModalOnTop === 'new') {
-        return <Redirect to="/dashboard/recent?create=true" />;
-      }
+    if (showModalOnTop === 'new') {
+      return <Redirect to="/dashboard/recent?create=true" />;
     }
+  }
 
-    return (
-      <>
-        <Helmet>
-          <title>{getTitle()} - CodeSandbox</title>
-        </Helmet>
-        <OnBoarding />
-        <Editor showModalOnTop={showModalOnTop} />
-      </>
-    );
-  },
-  (prev, next) => prev.match.params.id === next.match.params.id
-);
+  // For unauthenticated users we redirect to the templates universe
+  // this pages only shows for /s, /d and /new URLS, which are shortcuts
+  window.location.href = 'https://codesandbox.io/templates';
+  return null;
+};
diff --git a/packages/app/src/app/pages/VercelAuth/index.js b/packages/app/src/app/pages/VercelAuth/index.js
deleted file mode 100644
index f546cdbe06c..00000000000
--- a/packages/app/src/app/pages/VercelAuth/index.js
+++ /dev/null
@@ -1,73 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import Centered from '@codesandbox/common/lib/components/flex/Centered';
-import {
-  protocolAndHost,
-  signInUrl,
-  newSandboxUrl,
-} from '@codesandbox/common/lib/utils/url-generator';
-import { Title } from 'app/components/Title';
-
-/**
- * This component is insteresting. We're probably redirecting this page
- * to the Vercel signin on the server. It doesn't do anything locally but
- * does redirect on production.
- */
-const VercelSignIn = () => {
-  const [redirect, setRedirect] = useState(null);
-  const [jwt] = useState(null);
-  const [error, setError] = useState(null);
-
-  useEffect(() => {
-    const queryParams = new URLSearchParams(document.location.search);
-    const code = queryParams.get('code');
-
-    if (code) {
-      if (window.opener) {
-        if (window.opener.location.origin === window.location.origin) {
-          window.opener.postMessage(
-            {
-              type: 'signin',
-              data: {
-                code,
-              },
-            },
-            protocolAndHost()
-          );
-        }
-        return;
-      }
-      setRedirect('/');
-
-      return;
-    }
-
-    setError('no message received');
-  }, []);
-
-  const getMessage = () => {
-    if (redirect) {
-      document.location.href = newSandboxUrl();
-      return 'Redirecting to sandbox page';
-    }
-    if (error) {
-      return `Something went wrong while signing in: ${error}`;
-    }
-    if (jwt) return 'Signing in...';
-    if (jwt == null) {
-      setTimeout(() => {
-        document.location.href = signInUrl();
-      }, 2000);
-      return 'Redirecting to sign in page...';
-    }
-
-    return 'Hey';
-  };
-
-  return (
-    <Centered horizontal vertical>
-      <Title>{getMessage()}</Title>
-    </Centered>
-  );
-};
-
-export default VercelSignIn;
diff --git a/packages/app/src/app/pages/WorkspaceFlows/UpgradeWorkspace.tsx b/packages/app/src/app/pages/WorkspaceFlows/UpgradeWorkspace.tsx
index f8b3410afb6..90ac2114a04 100644
--- a/packages/app/src/app/pages/WorkspaceFlows/UpgradeWorkspace.tsx
+++ b/packages/app/src/app/pages/WorkspaceFlows/UpgradeWorkspace.tsx
@@ -29,6 +29,7 @@ export const UpgradeWorkspace = () => {
     (interval === 'month' || interval === 'year') &&
     workspaceId;
 
+  // Cannot upgrade if already on ubb
   const cannotUpgradeToUbb = ubbBeta && isPro;
 
   if (proPlanPreSelected && !checkout.newSubscription) {
diff --git a/packages/app/src/app/pages/common/Modals/AddPreset/index.tsx b/packages/app/src/app/pages/common/Modals/AddPreset/index.tsx
deleted file mode 100644
index f7ce8b4f7bf..00000000000
--- a/packages/app/src/app/pages/common/Modals/AddPreset/index.tsx
+++ /dev/null
@@ -1,131 +0,0 @@
-import css from '@styled-system/css';
-import { CurrentUser } from '@codesandbox/common/lib/types';
-import { ESC } from '@codesandbox/common/lib/utils/keycodes';
-import { useAppState, useActions } from 'app/overmind';
-import { Element, Input, Stack, Button } from '@codesandbox/components';
-import React, {
-  FormEvent,
-  FunctionComponent,
-  useState,
-  useEffect,
-} from 'react';
-import { Alert } from '../Common/Alert';
-
-type Props = {
-  id?: string;
-  user?: CurrentUser;
-};
-
-export const AddPreset: FunctionComponent<Props> = ({ id, user }) => {
-  const { responsive } = useAppState().preview;
-  const { preview, modalClosed } = useActions();
-  const [name, setName] = useState('');
-  const [width, setWidth] = useState(responsive.resolution[0]);
-  const [height, setHeight] = useState(responsive.resolution[1]);
-
-  const listenForEsc = e => {
-    if (e.keyCode === ESC) {
-      modalClosed();
-    }
-  };
-
-  useEffect(() => {
-    window.addEventListener('keydown', listenForEsc);
-
-    return () => window.removeEventListener('keydown', listenForEsc);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const onSubmit = async (evt: FormEvent<HTMLFormElement>) => {
-    evt.preventDefault();
-    preview.addPreset({
-      name,
-      height,
-      width,
-    });
-    modalClosed();
-  };
-
-  const reverseValues = () => {
-    const tempWidth = width;
-    const tempHeight = height;
-
-    setWidth(tempHeight);
-    setHeight(tempWidth);
-  };
-
-  return (
-    <Alert title="Add custom preset">
-      <Element marginTop={4}>
-        <form onSubmit={onSubmit} autoComplete="off">
-          <Element marginBottom={4}>
-            <Input
-              autoFocus
-              aria-label="Presets Name"
-              name="name"
-              onChange={e => setName(e.target.value)}
-              placeholder="Presets Name"
-              required
-              value={name}
-            />
-          </Element>
-          <Stack gap={3}>
-            <Input
-              aria-label="Preset Width"
-              type="number"
-              name="width"
-              onChange={e => setWidth(parseInt(e.target.value, 10))}
-              required
-              value={width}
-            />
-            <Button
-              variant="link"
-              autoWidth
-              type="button"
-              onClick={reverseValues}
-            >
-              <svg
-                width={12}
-                height={10}
-                fill="none"
-                viewBox="0 0 12 10"
-                css={css({
-                  path: {
-                    fill: 'sideBar.foreground',
-                  },
-                })}
-              >
-                <path d="M12 2.222v1.111c-.923 0-2.094 1.25-2.77 2.223h-.922c.21-.667.923-2.223.923-2.223H0V2.2h9.23L8.309 0h.923S11.077 2.222 12 2.222zM0 7.778V6.667c.923 0 2.094-1.25 2.77-2.223h.922c-.21.667-.923 2.223-.923 2.223H12V7.8H2.77l.922 2.2H2.77S.923 7.778 0 7.778z" />
-              </svg>
-            </Button>
-            <Input
-              aria-label="Preset Height"
-              type="number"
-              name="height"
-              onChange={e => setHeight(parseInt(e.target.value, 10))}
-              required
-              value={height}
-            />
-          </Stack>
-          <Stack justify="flex-end" marginTop={11} gap={2}>
-            <Button
-              onClick={modalClosed}
-              variant="link"
-              autoWidth
-              type="button"
-            >
-              Cancel
-            </Button>
-            <Button
-              autoWidth
-              type="submit"
-              disabled={!name || !name.trim() || !width || !height}
-            >
-              Add Preset
-            </Button>
-          </Stack>
-        </form>
-      </Element>
-    </Alert>
-  );
-};
diff --git a/packages/app/src/app/pages/common/Modals/CropThumbnail/index.tsx b/packages/app/src/app/pages/common/Modals/CropThumbnail/index.tsx
deleted file mode 100644
index 031e6cf8b28..00000000000
--- a/packages/app/src/app/pages/common/Modals/CropThumbnail/index.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import React, { FunctionComponent, useEffect, useRef, useState } from 'react';
-import { createGlobalStyle } from 'styled-components';
-import { Element, Button, Stack } from '@codesandbox/components';
-import { useActions, useAppState } from 'app/overmind';
-import Cropper from 'cropperjs';
-// @ts-ignore
-import CropperCSS from 'cropperjs/dist/cropper.min.css';
-import { Alert } from '../Common/Alert';
-
-const GlobalStyle = createGlobalStyle`
-  ${CropperCSS}
-`;
-
-export const CropThumbnail: FunctionComponent = () => {
-  const {
-    modalClosed,
-    files: { thumbnailUploaded },
-  } = useActions();
-  const {
-    workspace: { activeThumb },
-  } = useAppState();
-  const [newImage, setNewImage] = useState('');
-  const [loading, setLoading] = useState(false);
-  const image = useRef();
-  const base64 = Object.values(activeThumb)[0].dataURI;
-
-  useEffect(() => {
-    if (image.current) {
-      const cropper = new Cropper(image.current, {
-        aspectRatio: 40 / 21,
-        background: false,
-        crop() {
-          const croppedImage = cropper.getCroppedCanvas();
-          const canvasURI = croppedImage.toDataURL();
-          setNewImage(canvasURI);
-        },
-      });
-    }
-  }, []);
-
-  const setNewThumb = async () => {
-    const name = Object.keys(activeThumb)[0];
-    const thumb = {
-      [name]: {
-        ...Object.values(activeThumb)[0],
-        dataURI: newImage,
-      },
-    };
-    setLoading(true);
-    await thumbnailUploaded({
-      file: thumb,
-    });
-    setLoading(false);
-    modalClosed();
-  };
-
-  return (
-    <Alert title="Crop your sandbox thumbnail">
-      <GlobalStyle />
-      <Element marginY={6}>
-        <img
-          src={base64}
-          ref={image}
-          alt=""
-          style={{ maxWidth: '80%', maxHeight: 410, display: 'block' }}
-        />
-      </Element>
-      <Stack justify="flex-end" marginTop={11} gap={2}>
-        <Button
-          loading={loading}
-          disabled={loading}
-          autoWidth
-          type="submit"
-          onClick={setNewThumb}
-        >
-          Save
-        </Button>
-      </Stack>
-    </Alert>
-  );
-};
diff --git a/packages/app/src/app/pages/common/Modals/DeleteDeploymentModal/index.tsx b/packages/app/src/app/pages/common/Modals/DeleteDeploymentModal/index.tsx
deleted file mode 100644
index 48631279a0e..00000000000
--- a/packages/app/src/app/pages/common/Modals/DeleteDeploymentModal/index.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React, { FunctionComponent } from 'react';
-import { useActions } from 'app/overmind';
-import { Alert } from '../Common/Alert';
-
-export const DeleteDeploymentModal: FunctionComponent = () => {
-  const {
-    deployment: { deleteDeployment },
-    modalClosed,
-  } = useActions();
-
-  return (
-    <Alert
-      title="Delete Deployment"
-      description="Are you sure you want to delete this deployment?"
-      onCancel={modalClosed}
-      onPrimaryAction={deleteDeployment}
-      confirmMessage="Delete"
-      type="danger"
-    />
-  );
-};
diff --git a/packages/app/src/app/pages/common/Modals/DeletePreset/index.tsx b/packages/app/src/app/pages/common/Modals/DeletePreset/index.tsx
deleted file mode 100644
index 6589f23472f..00000000000
--- a/packages/app/src/app/pages/common/Modals/DeletePreset/index.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React, { FunctionComponent } from 'react';
-import { useActions } from 'app/overmind';
-import { Alert } from '../Common/Alert';
-
-export const DeletePreset: FunctionComponent = () => {
-  const { modalClosed, preview } = useActions();
-
-  return (
-    <Alert
-      title="Delete Preset"
-      description="Are you sure you want to to delete this preset?"
-      onCancel={modalClosed}
-      onPrimaryAction={() => {
-        modalClosed();
-        preview.deletePreset();
-      }}
-      confirmMessage="Delete"
-      type="danger"
-    />
-  );
-};
diff --git a/packages/app/src/app/pages/common/Modals/DeleteSandboxModal/index.tsx b/packages/app/src/app/pages/common/Modals/DeleteSandboxModal/index.tsx
deleted file mode 100644
index 79b9c544513..00000000000
--- a/packages/app/src/app/pages/common/Modals/DeleteSandboxModal/index.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React, { FunctionComponent } from 'react';
-import { useActions } from 'app/overmind';
-import { Alert } from '../Common/Alert';
-
-export const DeleteSandboxModal: FunctionComponent = () => {
-  const {
-    modalClosed,
-    workspace: { sandboxDeleted },
-  } = useActions();
-
-  return (
-    <Alert
-      title="Delete sandbox"
-      description="Are you sure you want to delete this sandbox?"
-      onCancel={modalClosed}
-      onPrimaryAction={sandboxDeleted}
-      confirmMessage="Delete"
-      type="danger"
-    />
-  );
-};
diff --git a/packages/app/src/app/pages/common/Modals/DeploymentModal/index.tsx b/packages/app/src/app/pages/common/Modals/DeploymentModal/index.tsx
deleted file mode 100644
index 14ebfb99aa9..00000000000
--- a/packages/app/src/app/pages/common/Modals/DeploymentModal/index.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import React, { FunctionComponent } from 'react';
-import { Element, Button, Text, Stack, Link } from '@codesandbox/components';
-import { useAppState, useActions } from 'app/overmind';
-import css from '@styled-system/css';
-import track from '@codesandbox/common/lib/utils/analytics';
-import { VercelIntegration } from 'app/pages/common/VercelIntegration';
-import { Alert } from '../Common/Alert';
-
-export const DeploymentModal: FunctionComponent = () => {
-  const {
-    user,
-    deployment: {
-      deploying,
-      vercel: { url },
-    },
-  } = useAppState();
-  const {
-    deployPreviewClicked,
-    deployProductionClicked,
-  } = useActions().deployment;
-
-  if (!user) {
-    return null;
-  }
-
-  const {
-    integrations: { vercel },
-  } = user;
-  const vercelSignedIn = Boolean(vercel);
-
-  return (
-    <Alert
-      title="Deployment"
-      description="Deploy a production version of your Sandbox to Vercel"
-    >
-      {url ? (
-        <Element marginBottom={4}>
-          <Text
-            weight="regular"
-            block
-            size={4}
-            align="center"
-            paddingBottom={4}
-          >
-            Deployed!
-          </Text>
-          <Link
-            variant="muted"
-            block
-            size={3}
-            align="center"
-            href={url}
-            target="_blank"
-            rel="noreferrer noopener"
-          >
-            {url}
-          </Link>
-          <Text paddingTop={4} block size={3} align="center">
-            You can{' '}
-            <Link
-              variant="muted"
-              href="https://vercel.com/dashboard"
-              target="_blank"
-              rel="noreferrer noopener"
-            >
-              manage your deployments here
-            </Link>
-            .
-          </Text>
-        </Element>
-      ) : (
-        <Stack
-          align="center"
-          marginBottom={4}
-          css={css({
-            border: '1px solid',
-            borderColor: 'sideBar.border',
-            borderRadius: 'medium',
-          })}
-        >
-          <VercelIntegration />
-        </Stack>
-      )}
-      {!vercelSignedIn || deploying ? (
-        <Stack justify="flex-end">
-          <Button css={css({ width: 'auto' })} disabled>
-            Deploying
-          </Button>
-        </Stack>
-      ) : (
-        <Stack gap={4} justify="flex-end">
-          <Button
-            css={css({ width: 'auto' })}
-            onClick={() => {
-              track('Production Deploy Clicked', { provider: 'vercel' });
-              deployProductionClicked();
-            }}
-          >
-            Deploy Sandbox to Production
-          </Button>
-          <Button
-            css={css({ width: 'auto' })}
-            onClick={() => {
-              track('Preview Deploy Clicked', { provider: 'vercel' });
-              deployPreviewClicked();
-            }}
-          >
-            Deploy Sandbox to Preview
-          </Button>
-        </Stack>
-      )}
-    </Alert>
-  );
-};
diff --git a/packages/app/src/app/pages/common/Modals/EditPresets/CodeMirrorWrapper.ts b/packages/app/src/app/pages/common/Modals/EditPresets/CodeMirrorWrapper.ts
deleted file mode 100644
index c3823949222..00000000000
--- a/packages/app/src/app/pages/common/Modals/EditPresets/CodeMirrorWrapper.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-import { Element } from '@codesandbox/components';
-import styled, { css } from 'styled-components';
-
-export const CodeMirrorWrapper = styled(Element)<{ error?: boolean }>`
-  ${({ theme, error }) => {
-    const { vscodeTheme, colors } = theme;
-
-    const getTokenColor = (name: string) => {
-      const obj = vscodeTheme.tokenColors.find(
-        token => token.name.toLowerCase() === name.toLowerCase()
-      );
-      if (obj) {
-        return obj.settings.foreground;
-      }
-
-      return null;
-    };
-
-    return css`
-      .CodeMirror {
-        font-family: 'MonoLisa', monospace;
-        font-weight: normal;
-        font-size: 15px;
-        line-height: 23px;
-        letter-spacing: 0px;
-        background: ${colors.editor.background};
-        color: ${colors.sideBar.foreground};
-        transition: all 200ms ease;
-
-        border: 1px solid ${
-          error ? colors.errorForeground : colors.sideBar.border
-        };
-        border-radius: 2px;
-
-      .CodeMirror-lines {
-        padding: 8px 0;
-      }
-      .CodeMirror-gutters {
-        background-color: ${colors.editor.background};
-        padding-right: 10px;
-        z-index: 3;
-        border: none;
-      }
-
-      .CodeMirror-linenumber {
-        color: ${colors.sideBar.border};
-      }
-      div.CodeMirror-cursor {
-        border-left: 2px solid ${colors.sideBar.foreground};
-      }
-      .CodeMirror-activeline-background {
-        background: ${colors.editor.background};
-      }
-      .CodeMirror-selected {
-        background: ${colors.sideBar.border};
-      }
-      .cm-keyword {
-        color: ${getTokenColor('keyword')};
-      }
-      .cm-string,
-      .cm-atom {
-        color: ${getTokenColor('string')};
-      }
-      .cm-comment {
-        font-style: italic;
-        color: ${getTokenColor('comment')};
-      }
-      .cm-property {
-        color: ${getTokenColor('[VSCODE-CUSTOM] JSON Property Name')};
-      }
-      .cm-number {
-        color: ${getTokenColor('Keyword Other Unit')};
-      }
-      .cm-operator {
-        color: ${getTokenColor(
-          '[VSCODE-CUSTOM] JS/TS Meta Tag Keyword Operator'
-        )};
-      }
-      .CodeMirror-linenumber,
-      .CodeMirror .CodeMirror-gutters {
-        background: ${colors.editor.background};
-      }
-    `;
-  }}
-`;
diff --git a/packages/app/src/app/pages/common/Modals/EditPresets/index.tsx b/packages/app/src/app/pages/common/Modals/EditPresets/index.tsx
deleted file mode 100644
index 30e51084a4c..00000000000
--- a/packages/app/src/app/pages/common/Modals/EditPresets/index.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-import { ESC } from '@codesandbox/common/lib/utils/keycodes';
-import { useAppState, useActions } from 'app/overmind';
-import { Element, Button, Stack, Text } from '@codesandbox/components';
-import React, { FunctionComponent, useEffect } from 'react';
-import CodeMirror from 'codemirror';
-import { getCodeMirror } from 'app/utils/codemirror';
-import { Alert } from '../Common/Alert';
-import { CodeMirrorWrapper } from './CodeMirrorWrapper';
-
-const validateValue = (value: string) => {
-  try {
-    const parsedValue = JSON.parse(value);
-
-    if (
-      typeof parsedValue === 'object' &&
-      !Array.isArray(parsedValue) &&
-      parsedValue !== null
-    ) {
-      return Object.keys(parsedValue).reduce((aggr, key) => {
-        if (aggr) return aggr;
-
-        if (
-          !Array.isArray(parsedValue[key]) ||
-          typeof parsedValue[key][0] !== 'number' ||
-          typeof parsedValue[key][1] !== 'number'
-        ) {
-          return 'Error: Invalid preset definition';
-        }
-
-        return aggr;
-      }, undefined);
-    }
-
-    return 'Error: Invalid preset definition';
-  } catch {
-    return 'Error: Invalid JSON';
-  }
-};
-
-export const EditPresets: FunctionComponent = () => {
-  const { preview: previewActions, modalClosed } = useActions();
-  const { responsive } = useAppState().preview;
-  const [value, setValue] = React.useState(
-    JSON.stringify(responsive.presets, null, 2)
-  );
-  const codemirrorContainer = React.useRef(null);
-
-  const validationError = validateValue(value);
-
-  const savePresets = () => {
-    try {
-      const data = JSON.parse(value);
-      previewActions.toggleEditPresets();
-      previewActions.editPresets(data);
-      modalClosed();
-    } catch (e) {
-      console.error('Error parsing JSON');
-    }
-  };
-
-  const listenForEsc = (e: KeyboardEvent) => {
-    if (e.keyCode === ESC) {
-      modalClosed();
-    }
-  };
-
-  useEffect(() => {
-    if (codemirrorContainer.current) {
-      const codemirror = getCodeMirror(
-        codemirrorContainer.current,
-        new CodeMirror.Doc(value, 'javascript'),
-        {
-          foldGutter: false,
-          styleActiveLine: false,
-        }
-      );
-      // This fixes a positioning bug with Codemirror. If not here,
-      // the cursor will not point correctly to the line and characters
-      setTimeout(() => {
-        codemirror.getDoc().setValue(value);
-      }, 500);
-
-      codemirror.on('change', () => {
-        setValue(codemirror.getDoc().getValue());
-      });
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [codemirrorContainer]);
-
-  useEffect(() => {
-    window.addEventListener('keydown', listenForEsc);
-
-    return () => window.removeEventListener('keydown', listenForEsc);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return (
-    <Alert title="Edit Presets">
-      <Element marginTop={4}>
-        <CodeMirrorWrapper
-          error={Boolean(validationError)}
-          ref={codemirrorContainer}
-        />
-        <Text
-          variant="danger"
-          paddingTop={4}
-          size={3}
-          block
-          style={{ minHeight: 32 }}
-        >
-          {validationError}
-        </Text>
-        <Stack justify="flex-end" marginTop={4} gap={2}>
-          <Button onClick={modalClosed} variant="link" autoWidth type="button">
-            Cancel
-          </Button>
-          <Button
-            autoWidth
-            type="submit"
-            onClick={savePresets}
-            disabled={Boolean(validationError)}
-          >
-            Save Presets
-          </Button>
-        </Stack>
-      </Element>
-    </Alert>
-  );
-};
diff --git a/packages/app/src/app/pages/common/Modals/ExportGitHubModal/index.tsx b/packages/app/src/app/pages/common/Modals/ExportGitHubModal/index.tsx
deleted file mode 100644
index 1f3cf949652..00000000000
--- a/packages/app/src/app/pages/common/Modals/ExportGitHubModal/index.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { FunctionComponent } from 'react';
-import { GitProgress } from 'app/components/GitProgress';
-
-type Props = {
-  isExported?: boolean;
-};
-export const ExportGitHubModal: FunctionComponent<Props> = ({
-  isExported = false,
-}) => (
-  <GitProgress
-    result={isExported ? <div>Exported to GitHub!</div> : null}
-    message="Creating Repository..."
-  />
-);
diff --git a/packages/app/src/app/pages/common/Modals/FeedbackModal/Feedback.tsx b/packages/app/src/app/pages/common/Modals/FeedbackModal/Feedback.tsx
index b00b68869d0..60be1ade24b 100644
--- a/packages/app/src/app/pages/common/Modals/FeedbackModal/Feedback.tsx
+++ b/packages/app/src/app/pages/common/Modals/FeedbackModal/Feedback.tsx
@@ -24,11 +24,10 @@ import { browser } from './getBrowser';
 import { Alert } from '../Common/Alert';
 
 type Props = {
-  id?: string;
   user?: CurrentUser;
 };
 
-export const Feedback: FunctionComponent<Props> = ({ id, user }) => {
+export const Feedback: FunctionComponent<Props> = ({ user }) => {
   const { notificationAdded, modalClosed } = useActions();
   const { currentModalMessage } = useAppState();
   const [email, setEmail] = useState((user || {}).email);
@@ -62,7 +61,6 @@ export const Feedback: FunctionComponent<Props> = ({ id, user }) => {
   const onSubmit = async (evt: FormEvent<HTMLFormElement>) => {
     evt.preventDefault();
     const data = {
-      sandboxId: id || '',
       feedback,
       emoji,
       username: (user || {}).username,
diff --git a/packages/app/src/app/pages/common/Modals/FeedbackModal/index.tsx b/packages/app/src/app/pages/common/Modals/FeedbackModal/index.tsx
index e322847fc65..ec81836f686 100644
--- a/packages/app/src/app/pages/common/Modals/FeedbackModal/index.tsx
+++ b/packages/app/src/app/pages/common/Modals/FeedbackModal/index.tsx
@@ -9,10 +9,7 @@ const Feedback = Loadable(() =>
 );
 
 export const FeedbackModal: FunctionComponent = () => {
-  const {
-    editor: { currentSandbox },
-    user,
-  } = useAppState();
+  const { user } = useAppState();
 
-  return <Feedback user={user} id={currentSandbox?.id} />;
+  return <Feedback user={user} />;
 };
diff --git a/packages/app/src/app/pages/common/Modals/ForkServerModal/index.tsx b/packages/app/src/app/pages/common/Modals/ForkServerModal/index.tsx
deleted file mode 100644
index 0d42223a40c..00000000000
--- a/packages/app/src/app/pages/common/Modals/ForkServerModal/index.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import getTemplateDefinition from '@codesandbox/common/lib/templates';
-import React, { FunctionComponent, useEffect } from 'react';
-
-import { useAppState, useActions } from 'app/overmind';
-import { Alert } from '../Common/Alert';
-
-export const ForkServerModal: FunctionComponent = () => {
-  const {
-    editor: { forkSandboxClicked },
-    modalClosed,
-    toggleSignInModal,
-  } = useActions();
-  const {
-    editor: {
-      currentSandbox: { template },
-    },
-    isLoggedIn,
-  } = useAppState();
-
-  useEffect(() => {
-    // Which means that the user signed in in the meantime with the intention to fork
-    if (isLoggedIn) {
-      forkSandboxClicked({});
-
-      modalClosed();
-    }
-  }, [forkSandboxClicked, isLoggedIn, modalClosed]);
-
-  const { niceName } = getTemplateDefinition(template);
-
-  return (
-    <Alert
-      title={`Fork ${niceName} Sandbox`}
-      description={`We execute ${niceName} sandboxes in a server container. This is still in beta, so we require you to sign in before you can fork a ${niceName}${' '} sandbox.`}
-      onPrimaryAction={() => toggleSignInModal()}
-      confirmMessage="Sign in"
-    />
-  );
-};
diff --git a/packages/app/src/app/pages/common/Modals/GithubPagesLogs/elements.ts b/packages/app/src/app/pages/common/Modals/GithubPagesLogs/elements.ts
deleted file mode 100644
index bd9535328c1..00000000000
--- a/packages/app/src/app/pages/common/Modals/GithubPagesLogs/elements.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import styled, { keyframes } from 'styled-components';
-import { Element } from '@codesandbox/components';
-
-const loading = keyframes`
-  0%   { content: ''; }
-  25%  { content: '.'; }
-  50%  { content: '..'; }
-  75%  { content: '...'; }
-  100% { content: ''; }
-`;
-
-export const Item = styled(Element)`
-  &:first-child:after {
-    display: inline-block;
-    animation: ${loading} steps(1, end) 1s infinite;
-    content: '';
-  }
-`;
diff --git a/packages/app/src/app/pages/common/Modals/GithubPagesLogs/index.tsx b/packages/app/src/app/pages/common/Modals/GithubPagesLogs/index.tsx
deleted file mode 100644
index efbe4381df6..00000000000
--- a/packages/app/src/app/pages/common/Modals/GithubPagesLogs/index.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import React, { FunctionComponent, useEffect, useState } from 'react';
-
-import { Element, Button, Stack } from '@codesandbox/components';
-import { useAppState, useEffects, useActions } from 'app/overmind';
-import css from '@styled-system/css';
-import { Item } from './elements';
-import { Alert } from '../Common/Alert';
-
-export const GithubPagesLogs: FunctionComponent = () => {
-  const effects = useEffects();
-  const { modalClosed } = useActions();
-  const { currentSandbox } = useAppState().editor;
-  const { githubSite } = useAppState().deployment;
-  const [logs, setLogs] = useState(['Waiting for build to start']);
-
-  useEffect(() => {
-    const interval = setInterval(async () => {
-      const { logs: fetchedLogs, status } = await effects.githubPages.getLogs(
-        currentSandbox.id
-      );
-
-      if (fetchedLogs.length > 0) {
-        setLogs(fetchedLogs);
-      }
-
-      if (status === 'DONE') {
-        clearInterval(interval);
-      }
-    }, 2000);
-
-    return () => clearInterval(interval);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return (
-    <Alert
-      title="Sandbox Site Logs"
-      description="Deploys to GitHub may take up to 15 minutes before being visible"
-    >
-      <Element
-        marginY={6}
-        padding={4}
-        css={css({
-          fontFamily: "'MonoLisa'",
-          maxHeight: 400,
-          overflow: 'auto',
-          wordBreak: 'break-word',
-          borderRadius: 'medium',
-          border: '1px solid',
-          borderColor: 'sideBar.border',
-        })}
-      >
-        {logs.map(log => (
-          <Item marginBottom={2} key={log}>
-            {log}
-          </Item>
-        ))}
-      </Element>
-      <Stack gap={2} align="center" justify="flex-end">
-        <Button
-          css={css({
-            width: 'auto',
-          })}
-          variant="link"
-          onClick={modalClosed}
-        >
-          Close
-        </Button>
-        <Button
-          css={css({
-            width: 'auto',
-          })}
-          onClick={() => {
-            window.open(
-              `https://${githubSite.ghLogin}.github.io/${githubSite.name}/`,
-              '_blank'
-            );
-          }}
-        >
-          Open Github Site
-        </Button>
-      </Stack>
-    </Alert>
-  );
-};
diff --git a/packages/app/src/app/pages/common/Modals/LiveSessionEnded/index.tsx b/packages/app/src/app/pages/common/Modals/LiveSessionEnded/index.tsx
deleted file mode 100644
index 93e84c21606..00000000000
--- a/packages/app/src/app/pages/common/Modals/LiveSessionEnded/index.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import React, { FunctionComponent } from 'react';
-
-import { Button, Link, Stack } from '@codesandbox/components';
-import { useAppState, useActions } from 'app/overmind';
-import css from '@styled-system/css';
-import { Alert } from '../Common/Alert';
-
-export const LiveSessionEnded: FunctionComponent = () => {
-  const {
-    currentModalMessage,
-    editor: { currentSandbox },
-  } = useAppState();
-  const {
-    editor: { forkSandboxClicked },
-    modalClosed,
-  } = useActions();
-  if (!currentSandbox) {
-    return null;
-  }
-  const { owned } = currentSandbox;
-
-  const suggestion = owned
-    ? 'you can continue working on the current sandbox.'
-    : 'you can continue working by forking the sandbox or by creating a new sandbox.';
-
-  return (
-    <Alert
-      title="The live session has ended"
-      description={`${
-        currentModalMessage || 'The session has ended due to inactivity'
-      }, ${suggestion}`}
-    >
-      <Stack gap={2} align="center" justify="flex-end">
-        {owned ? (
-          <Button
-            css={css({
-              width: 'auto',
-            })}
-            variant="link"
-            onClick={modalClosed}
-          >
-            Close Modal
-          </Button>
-        ) : (
-          <Button
-            css={css({
-              width: 'auto',
-            })}
-            onClick={() => {
-              forkSandboxClicked({});
-              modalClosed();
-            }}
-            variant="link"
-          >
-            Fork Sandbox
-          </Button>
-        )}
-        <Link
-          href="/s"
-          css={css({
-            width: 'auto',
-            textDecoration: 'none',
-          })}
-          onClick={modalClosed}
-        >
-          Create Sandbox
-        </Link>
-      </Stack>
-    </Alert>
-  );
-};
diff --git a/packages/app/src/app/pages/common/Modals/LiveSessionRestricted/index.tsx b/packages/app/src/app/pages/common/Modals/LiveSessionRestricted/index.tsx
deleted file mode 100644
index 8b98744ce4e..00000000000
--- a/packages/app/src/app/pages/common/Modals/LiveSessionRestricted/index.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from 'react';
-import { Button, Stack, Text } from '@codesandbox/components';
-
-import { useWorkspaceAuthorization } from 'app/hooks/useWorkspaceAuthorization';
-import { useAppState } from 'app/overmind';
-import { upgradeUrl } from '@codesandbox/common/lib/utils/url-generator/dashboard';
-import { Alert } from '../Common/Alert';
-
-export const LiveSessionRestricted: React.FC = () => {
-  const { activeTeam } = useAppState();
-  const { isAdmin } = useWorkspaceAuthorization();
-
-  return (
-    <Alert title="Upgrade to Pro to start a Live Session">
-      {isAdmin ? (
-        <Stack gap={2} align="center">
-          <Button
-            variant="primary"
-            as="a"
-            href={upgradeUrl({
-              workspaceId: activeTeam,
-              source: 'v1_editor_live_session_restricted',
-            })}
-            autoWidth
-          >
-            <Text>Upgrade to Pro</Text>
-          </Button>
-        </Stack>
-      ) : (
-        <Stack direction="vertical" gap={6}>
-          <Text as="p" variant="muted" css={{ marginTop: 0 }}>
-            Live sessions are only available for Pro workspaces. Contact your
-            team admin to upgrade.
-          </Text>
-        </Stack>
-      )}
-    </Alert>
-  );
-};
diff --git a/packages/app/src/app/pages/common/Modals/LiveSessionVersionMismatch/index.tsx b/packages/app/src/app/pages/common/Modals/LiveSessionVersionMismatch/index.tsx
deleted file mode 100644
index 65f48c1f4f3..00000000000
--- a/packages/app/src/app/pages/common/Modals/LiveSessionVersionMismatch/index.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React, { FunctionComponent } from 'react';
-import { Alert } from '../Common/Alert';
-
-export const LiveVersionMismatch: FunctionComponent = () => (
-  <Alert
-    title="Version Mismatch"
-    description={
-      "You are running an older version of CodeSandbox. Refresh to get the latest version. If refreshing doesn't work, you can try to clear your storage and unregister the service worker."
-    }
-  />
-);
diff --git a/packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/index.tsx b/packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/index.tsx
index dfe623fb6a4..59ed5177178 100644
--- a/packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/index.tsx
+++ b/packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/index.tsx
@@ -19,7 +19,7 @@ import { PrivacyLevel } from 'app/components/Create/utils/types';
 import { DirectoryPicker } from './DirectoryPicker';
 
 export const MoveSandboxFolderModal: FunctionComponent = () => {
-  const { dashboard, refetchSandboxInfo, modals: modalsActions } = useActions();
+  const { dashboard, modals: modalsActions } = useActions();
   const { activeTeam, modals, activeTeamInfo } = useAppState();
   const [error, setError] = useState(undefined);
   const [loading, setLoading] = useState(false);
@@ -54,7 +54,6 @@ export const MoveSandboxFolderModal: FunctionComponent = () => {
         privacy,
       })
       .then(() => {
-        refetchSandboxInfo();
         dashboard.getTeams(); // refetch teams' limits and usage
 
         setLoading(false);
diff --git a/packages/app/src/app/pages/common/Modals/NetlifyLogs/elements.ts b/packages/app/src/app/pages/common/Modals/NetlifyLogs/elements.ts
deleted file mode 100644
index bd9535328c1..00000000000
--- a/packages/app/src/app/pages/common/Modals/NetlifyLogs/elements.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import styled, { keyframes } from 'styled-components';
-import { Element } from '@codesandbox/components';
-
-const loading = keyframes`
-  0%   { content: ''; }
-  25%  { content: '.'; }
-  50%  { content: '..'; }
-  75%  { content: '...'; }
-  100% { content: ''; }
-`;
-
-export const Item = styled(Element)`
-  &:first-child:after {
-    display: inline-block;
-    animation: ${loading} steps(1, end) 1s infinite;
-    content: '';
-  }
-`;
diff --git a/packages/app/src/app/pages/common/Modals/NetlifyLogs/index.tsx b/packages/app/src/app/pages/common/Modals/NetlifyLogs/index.tsx
deleted file mode 100644
index 377422baa2d..00000000000
--- a/packages/app/src/app/pages/common/Modals/NetlifyLogs/index.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import React, { FunctionComponent, useEffect, useState } from 'react';
-
-import { Element, Button, Stack } from '@codesandbox/components';
-import { useAppState, useActions, useEffects } from 'app/overmind';
-import css from '@styled-system/css';
-import track from '@codesandbox/common/lib/utils/analytics';
-
-import { Item } from './elements';
-import { Alert } from '../Common/Alert';
-
-export const NetlifyLogs: FunctionComponent = () => {
-  const effects = useEffects();
-  const { modalClosed } = useActions();
-  const {
-    editor: { currentSandbox },
-    deployment: {
-      netlify: { site },
-    },
-  } = useAppState();
-  const [logs, setLogs] = useState(['Waiting for build to start']);
-
-  useEffect(() => {
-    const interval = setInterval(async () => {
-      const { logs: fetchedLogs, status } = await effects.netlify.getLogs(
-        currentSandbox.id
-      );
-
-      if (fetchedLogs.length > 0) {
-        setLogs(fetchedLogs);
-      }
-
-      if (status === 'DONE') {
-        clearInterval(interval);
-      }
-    }, 2000);
-
-    return () => clearInterval(interval);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return (
-    <Alert
-      title="Sandbox Site Logs"
-      description="Builds typically take a minute or two to complete"
-    >
-      <Element
-        marginY={6}
-        padding={4}
-        css={css({
-          fontFamily: "'MonoLisa'",
-          maxHeight: 400,
-          overflow: 'auto',
-          wordBreak: 'break-word',
-          borderRadius: 'medium',
-          border: '1px solid',
-          borderColor: 'sideBar.border',
-        })}
-      >
-        {logs.map(log => (
-          <Item marginBottom={2} key={log}>
-            {log}
-          </Item>
-        ))}
-      </Element>
-      <Stack gap={2} align="center" justify="flex-end">
-        <Button
-          css={css({
-            width: 'auto',
-          })}
-          variant="link"
-          onClick={modalClosed}
-        >
-          Close
-        </Button>
-        <Button
-          css={css({
-            width: 'auto',
-          })}
-          onClick={() => {
-            window.open(site.url, '_blank');
-            track('Editor - Open Netlify Site');
-          }}
-        >
-          Open Netlify Site
-        </Button>
-      </Stack>
-    </Alert>
-  );
-};
diff --git a/packages/app/src/app/pages/common/Modals/NotFoundBranchModal/index.tsx b/packages/app/src/app/pages/common/Modals/NotFoundBranchModal/index.tsx
deleted file mode 100644
index 09a34a2e50a..00000000000
--- a/packages/app/src/app/pages/common/Modals/NotFoundBranchModal/index.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import React, { FunctionComponent, useEffect } from 'react';
-
-import { useAppState } from 'app/overmind';
-import { Alert } from '../Common/Alert';
-
-export const NotFoundBranchModal: FunctionComponent = () => {
-  const { currentSandbox } = useAppState().editor;
-
-  useEffect(() => {
-    window.setTimeout(() => {
-      redirectUser();
-    }, 5000);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const redirectUser = () => {
-    const pathname = window.location.pathname;
-    const { branch, repo, username } = currentSandbox.baseGit;
-
-    location.replace(
-      pathname.replace(pathname, `/s/github/${username}/${repo}/tree/${branch}`)
-    );
-  };
-
-  return (
-    <Alert
-      title={`We couldn't find your branch`}
-      description={
-        <>
-          Seems the branch this sandbox was connected to does not exist anymore.
-          You will be redirected in 5 seconds to the{' '}
-          <b>{currentSandbox.baseGit.branch}</b> branch.
-        </>
-      }
-      onPrimaryAction={redirectUser}
-      confirmMessage={`Send me to the ${currentSandbox.baseGit.branch} branch`}
-    />
-  );
-};
diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/EditorTheme/elements.ts b/packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/EditorTheme/elements.ts
deleted file mode 100644
index 008743eed80..00000000000
--- a/packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/EditorTheme/elements.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { PreferenceText as PreferenceTextBase } from '@codesandbox/common/lib/components/Preference/PreferenceText';
-import styled from 'styled-components';
-
-export const PreferenceText = styled(PreferenceTextBase)`
-  font-family: 'Source Code Pro';
-  font-size: 0.8rem;
-  width: 100%;
-`;
diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/EditorTheme/index.tsx b/packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/EditorTheme/index.tsx
deleted file mode 100644
index c1be9de90f9..00000000000
--- a/packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/EditorTheme/index.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { Text } from '@codesandbox/components';
-import React, { FunctionComponent } from 'react';
-import { useAppState, useActions } from 'app/overmind';
-
-import { Rule } from '../../elements';
-
-import { PreferenceText } from './elements';
-
-export const EditorTheme: FunctionComponent = () => {
-  const { settings } = useAppState().preferences;
-  const { settingChanged } = useActions().preferences;
-
-  const bindValue = (name: string, setUndefined?: boolean) => ({
-    setValue: value => settingChanged({ name, value }),
-    value: setUndefined ? settings[name] || undefined : settings[name],
-  });
-
-  return (
-    <div>
-      <Text block marginBottom={2} marginTop={8} size={3}>
-        Editor Theme
-      </Text>
-
-      <Text block size={3} variant="muted">
-        You can select your editor theme by selecting File {'->'} Preferences{' '}
-        {'->'} Color Theme in the menu bar.
-      </Text>
-
-      <Rule />
-
-      <Text block marginBottom={2} size={3}>
-        Custom VSCode Theme
-      </Text>
-
-      <Text block marginBottom={4} size={3} variant="muted">
-        {`After changing this setting you'll have to reload the browser and select 'Custom' as your color theme.`}
-      </Text>
-
-      <PreferenceText
-        block
-        isTextArea
-        placeholder={`You can use your own theme from VSCode directly:
-1. Open VSCode
-2. Press (CMD or CTRL) + SHIFT + P
-3. Enter: '> Developer: Generate Color Scheme From Current Settings'
-4. Copy the contents and paste them here!`}
-        rows={7}
-        style={{ minHeight: 130 }}
-        {...bindValue('manualCustomVSCodeTheme', true)}
-      />
-    </div>
-  );
-};
diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/index.tsx b/packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/index.tsx
deleted file mode 100644
index 2a1ce31279f..00000000000
--- a/packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/index.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Text } from '@codesandbox/components';
-import React, { FunctionComponent } from 'react';
-
-import { PreferenceContainer, SubContainer } from '../elements';
-import { VSCodePlaceholder } from '../VSCodePlaceholder';
-
-import { EditorTheme } from './EditorTheme';
-
-export const Appearance: FunctionComponent = () => (
-  <div>
-    <Text block marginBottom={6} size={4} weight="regular">
-      Appearance
-    </Text>
-
-    <SubContainer>
-      <PreferenceContainer>
-        <VSCodePlaceholder />
-
-        <EditorTheme />
-      </PreferenceContainer>
-    </SubContainer>
-  </div>
-);
diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/CodeFormatting/Prettier.tsx b/packages/app/src/app/pages/common/Modals/PreferencesModal/CodeFormatting/Prettier.tsx
deleted file mode 100644
index 9228a95df3c..00000000000
--- a/packages/app/src/app/pages/common/Modals/PreferencesModal/CodeFormatting/Prettier.tsx
+++ /dev/null
@@ -1,171 +0,0 @@
-import React, { FunctionComponent } from 'react';
-import { Text, Element } from '@codesandbox/components';
-import css from '@styled-system/css';
-import { useAppState, useActions } from 'app/overmind';
-
-import {
-  SubContainer,
-  PreferenceContainer,
-  PaddedPreference,
-  Rule,
-} from '../elements';
-
-export const Prettier: FunctionComponent = () => {
-  const {
-    settings: {
-      prettierConfig,
-      prettierConfig: { fluid },
-    },
-  } = useAppState().preferences;
-
-  const { settingChanged } = useActions().preferences;
-
-  const bindValue = (name: string) => ({
-    setValue: value =>
-      settingChanged({ name: `prettierConfig.${name}`, value }),
-    value: prettierConfig[name],
-  });
-
-  return (
-    <SubContainer>
-      <PreferenceContainer>
-        <Text size={3} variant="muted">
-          This configuration can be overridden by a{' '}
-          <a
-            href="https://prettier.io/docs/en/configuration.html"
-            rel="noopener noreferrer"
-            target="_blank"
-          >
-            .prettierrc
-          </a>{' '}
-          JSON file at the root of the sandbox.
-        </Text>
-
-        <Rule />
-
-        <PaddedPreference
-          title="Fluid print width"
-          type="boolean"
-          {...bindValue('fluid')}
-        />
-
-        <Text size={2} variant="muted">
-          Wrap the code based on the editor width.
-        </Text>
-
-        <Rule />
-
-        <Element css={css({ pointerEvents: fluid ? 'none' : 'all' })}>
-          <PaddedPreference
-            style={{ opacity: fluid ? 0.5 : 1 }}
-            title="Print width"
-            type="number"
-            {...bindValue('printWidth')}
-          />
-
-          <Text size={2} variant="muted" style={{ opacity: fluid ? 0.5 : 1 }}>
-            Specify the line length that the printer will wrap on.
-          </Text>
-        </Element>
-        <Rule />
-
-        <PaddedPreference
-          title="Tab width"
-          type="number"
-          {...bindValue('tabWidth')}
-        />
-
-        <Text size={2} variant="muted">
-          Specify the number of spaces per indentation-level.
-        </Text>
-
-        <Rule />
-
-        <PaddedPreference
-          title="Use tabs"
-          type="boolean"
-          {...bindValue('useTabs')}
-        />
-
-        <Text size={2} variant="muted">
-          Indent lines with tabs instead of spaces.
-        </Text>
-
-        <Rule />
-
-        <PaddedPreference
-          title="Semicolons"
-          type="boolean"
-          {...bindValue('semi')}
-        />
-
-        <Text size={2} variant="muted">
-          Print semicolons at the ends of statements.
-        </Text>
-
-        <Rule />
-
-        <PaddedPreference
-          title="Use single quotes"
-          type="boolean"
-          {...bindValue('singleQuote')}
-        />
-
-        <Text size={2} variant="muted">
-          Use {"'"}single{"'"} quotes instead of {'"'}double{'"'} quotes.
-        </Text>
-
-        <Rule />
-
-        <PaddedPreference
-          title="Trailing commas"
-          type="dropdown"
-          options={['none', 'es5', 'all']}
-          {...bindValue('trailingComma')}
-        />
-
-        <Text size={2} variant="muted">
-          Print trailing commas wherever possible.
-        </Text>
-
-        <Rule />
-
-        <PaddedPreference
-          title="Bracket spacing"
-          type="boolean"
-          {...bindValue('bracketSpacing')}
-        />
-
-        <Text size={2} variant="muted">
-          Print spaces between brackets in object literals.
-        </Text>
-
-        <Rule />
-
-        <PaddedPreference
-          title="JSX Brackets"
-          type="boolean"
-          {...bindValue('jsxBracketSameLine')}
-        />
-
-        <Text size={2} variant="muted">
-          Put the `{'>'}` of a multi-line JSX element at the end of the last
-          line instead of being alone on the next line.
-        </Text>
-
-        <Rule />
-
-        <PaddedPreference
-          options={['avoid', 'always']}
-          title="Arrow Function Parentheses"
-          type="dropdown"
-          {...bindValue('arrowParens')}
-        />
-
-        <Text size={2} variant="muted">
-          Include parentheses around a sole arrow function parameter.
-        </Text>
-      </PreferenceContainer>
-    </SubContainer>
-  );
-};
diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/CodeFormatting/elements.ts b/packages/app/src/app/pages/common/Modals/PreferencesModal/CodeFormatting/elements.ts
deleted file mode 100644
index 5e48e9ca683..00000000000
--- a/packages/app/src/app/pages/common/Modals/PreferencesModal/CodeFormatting/elements.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import QuestionBase from 'react-icons/lib/go/question';
-import styled from 'styled-components';
-
-export const Question = styled(QuestionBase)`
-  margin-bottom: 3px;
-`;
diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/CodeFormatting/index.tsx b/packages/app/src/app/pages/common/Modals/PreferencesModal/CodeFormatting/index.tsx
deleted file mode 100644
index a0d62626c2e..00000000000
--- a/packages/app/src/app/pages/common/Modals/PreferencesModal/CodeFormatting/index.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Text } from '@codesandbox/components';
-import React, { FunctionComponent } from 'react';
-
-import { Question } from './elements';
-import { Prettier } from './Prettier';
-
-export const CodeFormatting: FunctionComponent = () => (
-  <>
-    <Text block marginBottom={4} size={4} variant="muted" weight="regular">
-      Prettier Settings{' '}
-      <a
-        href="https://prettier.io/docs/en/options.html"
-        rel="noopener noreferrer"
-        target="_blank"
-      >
-        <Question />
-      </a>
-    </Text>
-
-    <Prettier />
-  </>
-);
diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/Editor/Editor.tsx b/packages/app/src/app/pages/common/Modals/PreferencesModal/Editor/Editor.tsx
deleted file mode 100644
index a8c62b795ac..00000000000
--- a/packages/app/src/app/pages/common/Modals/PreferencesModal/Editor/Editor.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Text, Element } from '@codesandbox/components';
-import React from 'react';
-
-import { Rule } from '../elements';
-import { VSCodePlaceholder } from '../VSCodePlaceholder';
-import { LinterSettings } from './LinterSettings';
-import { VimModeSettings } from './VimModeSettings';
-
-export const Editor: React.FC = () => (
-  <>
-    <Text block marginBottom={6} size={4} weight="regular">
-      Editor
-    </Text>
-
-    <Element>
-      <VSCodePlaceholder />
-
-      <Element marginTop={8}>
-        <VimModeSettings />
-        <Rule />
-        <LinterSettings />
-      </Element>
-    </Element>
-  </>
-);
diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/Editor/LinterSettings.tsx b/packages/app/src/app/pages/common/Modals/PreferencesModal/Editor/LinterSettings.tsx
deleted file mode 100644
index 35d5bae0637..00000000000
--- a/packages/app/src/app/pages/common/Modals/PreferencesModal/Editor/LinterSettings.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { Preference } from '@codesandbox/common/lib/components/Preference';
-import { Settings } from '@codesandbox/common/lib/components/Preview/types';
-import { Text } from '@codesandbox/components';
-import React from 'react';
-import { useAppState, useActions } from 'app/overmind';
-
-import { PreferenceContainer } from '../elements';
-
-const SETTING_KEY: keyof Settings = 'lintEnabled';
-
-export const LinterSettings: React.FC = () => {
-  const { settingChanged } = useActions().preferences;
-  const { settings } = useAppState().preferences;
-
-  return (
-    <PreferenceContainer>
-      <Preference
-        title="Enable linting"
-        type="boolean"
-        setValue={(value: boolean) => {
-          settingChanged({ name: SETTING_KEY, value });
-        }}
-        value={settings[SETTING_KEY]}
-      />
-
-      <Text
-        block
-        marginTop={2}
-        size={2}
-        style={{ maxWidth: '60%', lineHeight: 1.5 }}
-        variant="muted"
-      >
-        Show eslint warnings and errors in the editor
-      </Text>
-    </PreferenceContainer>
-  );
-};
diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/Editor/VimModeSettings.tsx b/packages/app/src/app/pages/common/Modals/PreferencesModal/Editor/VimModeSettings.tsx
deleted file mode 100644
index 9f94c496843..00000000000
--- a/packages/app/src/app/pages/common/Modals/PreferencesModal/Editor/VimModeSettings.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import { isSafari } from '@codesandbox/common/lib/utils/platform';
-import { Preference } from '@codesandbox/common/lib/components/Preference';
-import { Settings } from '@codesandbox/common/lib/components/Preview/types';
-import { Text } from '@codesandbox/components';
-import React, { useState } from 'react';
-
-import Modal from 'app/components/Modal';
-import { useAppState, useActions } from 'app/overmind';
-
-import { Alert } from '../../Common/Alert';
-
-import { PreferenceContainer } from '../elements';
-
-const SETTING_NAME: keyof Settings = 'vimMode';
-
-export const VimModeSettings: React.FC = () => {
-  const { settingChanged } = useActions().preferences;
-  const { settings } = useAppState().preferences;
-  const [showConfirmationModal, setShowConfirmationModal] = useState(false);
-
-  return (
-    <>
-      <PreferenceContainer disabled={isSafari}>
-        <Preference
-          title="Enable VIM extension"
-          type="boolean"
-          setValue={(value: boolean) => {
-            settingChanged({ name: SETTING_NAME, value });
-            setShowConfirmationModal(true);
-          }}
-          value={settings[SETTING_NAME]}
-        />
-
-        <Text
-          block
-          marginTop={2}
-          size={2}
-          style={{ maxWidth: '60%', lineHeight: 1.5 }}
-          variant="muted"
-        >
-          Use the command palette to control VIM
-        </Text>
-        {/* Vim mode does not work on Safari */}
-        {isSafari ? (
-          <Text block marginTop={2} size={2} variant="muted">
-            The VIM extension currently does not work on Safari
-          </Text>
-        ) : null}
-      </PreferenceContainer>
-
-      <Modal
-        isOpen={showConfirmationModal}
-        onClose={() => setShowConfirmationModal(false)}
-        width={400}
-      >
-        <Alert
-          description="You need to refresh the browser for this to take effect, do you want to do that now?"
-          onCancel={() => setShowConfirmationModal(false)}
-          onPrimaryAction={() => location.reload()}
-          title="Toggle VIM extension"
-        />
-      </Modal>
-    </>
-  );
-};
diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/Editor/index.tsx b/packages/app/src/app/pages/common/Modals/PreferencesModal/Editor/index.tsx
deleted file mode 100644
index 5ccde0efcb3..00000000000
--- a/packages/app/src/app/pages/common/Modals/PreferencesModal/Editor/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { Editor } from './Editor';
diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/Integrations/index.tsx b/packages/app/src/app/pages/common/Modals/PreferencesModal/Integrations/index.tsx
index 03fc24a804e..c8e7e4b6e19 100644
--- a/packages/app/src/app/pages/common/Modals/PreferencesModal/Integrations/index.tsx
+++ b/packages/app/src/app/pages/common/Modals/PreferencesModal/Integrations/index.tsx
@@ -1,8 +1,6 @@
 import { Text } from '@codesandbox/components';
 import React, { FunctionComponent } from 'react';
 
-import { VercelIntegration } from 'app/pages/common/VercelIntegration';
-
 import { GitHubPermissions } from './GitHubPermissions';
 import { Container } from './elements';
 
@@ -14,7 +12,6 @@ export const Integrations: FunctionComponent = () => (
 
     <Container>
       <GitHubPermissions />
-      <VercelIntegration />
     </Container>
   </div>
 );
diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/PreferencesSync/CreateProfile.tsx b/packages/app/src/app/pages/common/Modals/PreferencesModal/PreferencesSync/CreateProfile.tsx
deleted file mode 100644
index 3a8f2ae0dee..00000000000
--- a/packages/app/src/app/pages/common/Modals/PreferencesModal/PreferencesSync/CreateProfile.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import React from 'react';
-import { Text, Element, Button, Link, Stack } from '@codesandbox/components';
-import css from '@styled-system/css';
-import { useAppState, useActions } from 'app/overmind';
-import track from '@codesandbox/common/lib/utils/analytics';
-
-const NewButton = ({ children, ...props }) => (
-  <Button
-    variant="secondary"
-    css={css({ color: 'sideBar.foreground' })}
-    autoWidth
-    {...props}
-  >
-    <Stack gap={2} align="center">
-      <svg width={16} height={16} fill="none" viewBox="0 0 16 16">
-        <g clipPath="url(#clip0)">
-          <path
-            fill="currentColor"
-            d="M8.4 4.14h-.8v3.6H4v.8h3.6v3.6h.8v-3.6H12v-.8H8.4v-3.6z"
-          />
-        </g>
-        <defs>
-          <clipPath id="clip0">
-            <path fill="#fff" d="M0 0H16V16H0z" />
-          </clipPath>
-        </defs>
-      </svg>
-      <span>{children}</span>
-    </Stack>
-  </Button>
-);
-
-export const CreateProfile = ({ importFile }) => {
-  const { createPreferencesProfile } = useActions().preferences;
-  const { settingsSync } = useAppState().preferences;
-
-  return (
-    <>
-      <Element marginBottom={5}>
-        <Text variant="muted" size={3}>
-          Share your CodeSandbox and editor preferences across multiple devices.
-          Save a snapshot of your current preferences as a profile, which you
-          can then apply to re-use them when you’re on another device. More info
-          can be found in our{' '}
-          <Link href="/docs/preferences" css={css({ color: 'blues.500' })}>
-            docs
-          </Link>
-        </Text>
-      </Element>
-      <Stack gap={5}>
-        <NewButton
-          disabled={settingsSync.syncing}
-          onClick={() => {
-            track('Preferences Profiles - Create New Profile');
-            createPreferencesProfile();
-          }}
-        >
-          Create new profile
-        </NewButton>
-        <NewButton onClick={importFile}>Import existing profile</NewButton>
-      </Stack>
-    </>
-  );
-};
diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/PreferencesSync/Icons.tsx b/packages/app/src/app/pages/common/Modals/PreferencesModal/PreferencesSync/Icons.tsx
deleted file mode 100644
index 005ec55671f..00000000000
--- a/packages/app/src/app/pages/common/Modals/PreferencesModal/PreferencesSync/Icons.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import React from 'react';
-
-export const SyncedIcon = () => (
-  <svg
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M9.97695 14.3264L18.2305 6L20 7.88855L9.97695 18L3 10.9615L4.76948 9.07297L9.97695 14.3264Z"
-      fill="currentColor"
-    />
-  </svg>
-);
-export const ProfileIcon = () => (
-  <svg width={13} height={13} fill="none" viewBox="0 0 10 10">
-    <path
-      fill="currentColor"
-      fillRule="evenodd"
-      d="M0 .41A.41.41 0 01.41 0h3.68a.41.41 0 01.41.41v9.18a.41.41 0 01-.41.41H.41A.41.41 0 010 9.59V.41zm5.5 0A.41.41 0 015.91 0h3.68a.41.41 0 01.41.41v2.68a.41.41 0 01-.41.41H5.91a.41.41 0 01-.41-.41V.41zm.41 4.09a.41.41 0 00-.41.41v4.68c0 .227.183.41.41.41h3.68a.41.41 0 00.41-.41V4.91a.41.41 0 00-.41-.41H5.91z"
-      clipRule="evenodd"
-    />
-  </svg>
-);
-
-export const OutOfSyncIcon = () => (
-  <svg
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M11.9918 6.2483C9.33676 6.2483 7.13149 8.30632 6.69656 11.0111H5.51434C5.96 7.61402 8.69026 5 11.9918 5C14.3712 5 16.4539 6.35773 17.5985 8.3878V5.99864L19.0002 5.99864V10.9918H18.4667H17.5985H17.2839H14.7952V9.49388L16.8318 9.49388C15.9627 7.57313 14.122 6.2483 11.9918 6.2483ZM12.0084 19.0003C15.3037 19.0003 18.0298 16.3962 18.4833 13.0085H17.3005C16.8582 15.7038 14.6571 17.752 12.0084 17.752C9.87814 17.752 8.03744 16.4271 7.16835 14.5064H9.20503V13.0085H5.16966V13.0084H5L5 18.0016H6.40168L6.40168 15.6125C7.54628 17.6425 9.62897 19.0003 12.0084 19.0003Z"
-      fill="currentColor"
-    />
-  </svg>
-);
diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/PreferencesSync/Profile.tsx b/packages/app/src/app/pages/common/Modals/PreferencesModal/PreferencesSync/Profile.tsx
deleted file mode 100644
index c840be452fc..00000000000
--- a/packages/app/src/app/pages/common/Modals/PreferencesModal/PreferencesSync/Profile.tsx
+++ /dev/null
@@ -1,152 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { SettingSync } from 'app/overmind/namespaces/preferences/state';
-import {
-  Text,
-  Element,
-  ListItem,
-  Stack,
-  Icon,
-  Menu,
-  Input,
-} from '@codesandbox/components';
-import Tooltip from '@codesandbox/common/lib/components/Tooltip';
-import css from '@styled-system/css';
-import { format } from 'date-fns';
-import track from '@codesandbox/common/lib/utils/analytics';
-import { useActions } from 'app/overmind';
-import { SyncedIcon, OutOfSyncIcon } from './Icons';
-
-export const Profile = ({ setting }: { setting: SettingSync }) => {
-  const preferences = useActions().preferences;
-  const [rename, setRename] = useState<boolean>(false);
-  const [isSynced, setIsSynced] = useState<boolean | null>(null);
-  const [name, setName] = useState<string>(setting.name);
-
-  const renameProfile = async (e: React.FormEvent) => {
-    e.preventDefault();
-    try {
-      await preferences.renameUserSettings({ name, id: setting.id });
-
-      setRename(false);
-    } catch {
-      setRename(false);
-    }
-  };
-
-  const checkIfSyncedPrefs = () => {
-    const settingFromComputer = localStorage.getItem(`profile-${setting.id}`);
-    if (settingFromComputer) {
-      const synced = preferences.checkifSynced(setting.settings);
-      setIsSynced(synced);
-    }
-  };
-
-  useEffect(() => {
-    checkIfSyncedPrefs();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return (
-    <ListItem
-      justify="space-between"
-      align="center"
-      css={css({
-        color: 'sideBar.foreground',
-        paddingX: 0,
-        paddingY: 2,
-        borderBottomWidth: 1,
-        borderBottomColor: 'sideBar.border',
-        borderBottomStyle: 'solid',
-      })}
-    >
-      {rename ? (
-        <Element
-          as="form"
-          paddingRight={4}
-          onSubmit={renameProfile}
-          css={css({ width: '100%' })}
-        >
-          <Input
-            required
-            value={name}
-            autoFocus
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-              setName(e.target.value)
-            }
-          />
-        </Element>
-      ) : (
-        <Text>{setting.name}</Text>
-      )}
-
-      <Stack gap={2} align="center">
-        <span>{format(new Date(setting.updatedAt), 'dd/MM/yyyy')}</span>
-
-        <Element
-          css={css({
-            width: 6,
-            height: 6,
-            color: 'button.background',
-          })}
-        >
-          {isSynced ? (
-            <Tooltip content="Your local preferences are in sync with the server">
-              <SyncedIcon />
-            </Tooltip>
-          ) : (
-            <Tooltip content="Your local preferences are not in sync with the server">
-              <OutOfSyncIcon />
-            </Tooltip>
-          )}
-        </Element>
-        <Menu>
-          <Menu.Button css={{ color: 'white', padding: 0 }}>
-            <Icon css={css({ color: 'mutedForeground' })} name="more" />
-          </Menu.Button>
-          <Menu.List>
-            {!isSynced ? (
-              <>
-                <Menu.Item
-                  onSelect={() => {
-                    track('Preferences Profiles - Apply Profile');
-                    preferences.applyPreferences(setting.settings);
-                  }}
-                >
-                  Apply
-                </Menu.Item>
-                <Menu.Item
-                  onSelect={() => {
-                    track('Preferences Profiles - Update Profile');
-                    preferences.createPreferencesProfile();
-                    setIsSynced(true);
-                  }}
-                >
-                  Update Profile
-                </Menu.Item>
-                <Menu.Divider />
-              </>
-            ) : null}
-            <Menu.Item onSelect={() => setRename(true)}>Rename</Menu.Item>
-            <Menu.Item
-              onSelect={() => {
-                track('Preferences Profiles - Download Profile');
-                preferences.downloadPreferences(setting);
-              }}
-            >
-              Export Profile
-            </Menu.Item>
-            <Menu.Item
-              css={css({ color: 'dangerButton.background' })}
-              onSelect={() => {
-                track('Preferences Profiles - Delete Profile');
-                preferences.deleteUserSetting(setting.id);
-              }}
-            >
-              Delete
-            </Menu.Item>
-          </Menu.List>
-        </Menu>
-      </Stack>
-    </ListItem>
-  );
-};
diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/PreferencesSync/Profiles.tsx b/packages/app/src/app/pages/common/Modals/PreferencesModal/PreferencesSync/Profiles.tsx
deleted file mode 100644
index 51afaecbf0c..00000000000
--- a/packages/app/src/app/pages/common/Modals/PreferencesModal/PreferencesSync/Profiles.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-import { Element, List } from '@codesandbox/components';
-import { useAppState } from 'app/overmind';
-import { Profile } from './Profile';
-
-export const Profiles = () => {
-  const { settingsSync } = useAppState().preferences;
-
-  return (
-    <Element paddingTop={4}>
-      <List>
-        {settingsSync.settings.map(setting => (
-          <Profile setting={setting} />
-        ))}
-      </List>
-    </Element>
-  );
-};
diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/PreferencesSync/index.tsx b/packages/app/src/app/pages/common/Modals/PreferencesModal/PreferencesSync/index.tsx
deleted file mode 100644
index 992b0b567a6..00000000000
--- a/packages/app/src/app/pages/common/Modals/PreferencesModal/PreferencesSync/index.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-import React, { FunctionComponent, useEffect } from 'react';
-import css from '@styled-system/css';
-import { Text, Stack, Icon, Element } from '@codesandbox/components';
-import { useAppState, useActions, useEffects } from 'app/overmind';
-import track from '@codesandbox/common/lib/utils/analytics';
-import Tooltip from '@codesandbox/common/lib/components/Tooltip';
-
-import { SubContainer } from '../elements';
-import { CreateProfile } from './CreateProfile';
-import { Profiles } from './Profiles';
-
-export const PreferencesSync: FunctionComponent = () => {
-  const { settingsSync } = useAppState().preferences;
-  const { getUserSettings, updateServerSettings } = useActions().preferences;
-  const { notificationToast } = useEffects();
-
-  useEffect(() => {
-    if (!settingsSync.settings) {
-      getUserSettings();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const readAsText = (file: File): Promise<string | ArrayBuffer> =>
-    new Promise(resolve => {
-      const reader = new FileReader();
-      reader.onload = e => {
-        resolve(e.target.result);
-      };
-      reader.readAsText(file);
-    });
-
-  const importFile = React.useCallback(() => {
-    track('Preferences Profiles - Create Import');
-    const fileSelector = document.createElement('input');
-    fileSelector.setAttribute('type', 'file');
-    fileSelector.setAttribute('accept', 'application/json');
-    fileSelector.onchange = async event => {
-      const target = event.target as HTMLInputElement;
-      const file = (await readAsText(target.files[0])) as string;
-      let contents;
-
-      try {
-        contents = JSON.parse(file);
-      } catch {
-        notificationToast.error('JSON file not formatted correctly');
-      }
-
-      if (!contents || !contents.themeData || !contents.vscode) {
-        notificationToast.error('JSON file not formatted correctly');
-
-        return;
-      }
-
-      updateServerSettings(file);
-    };
-
-    fileSelector.click();
-  }, [notificationToast, updateServerSettings]);
-
-  return (
-    <>
-      <Stack justify="space-between" align="baseline">
-        <Text block marginBottom={6} size={4} weight="regular">
-          Preferences Profiles
-        </Text>
-        {settingsSync.settings?.length ? (
-          <Tooltip content="Import preferences as a JSON">
-            <Element
-              as="button"
-              type="button"
-              css={css({
-                padding: 0,
-                background: 'transparent',
-                border: 'none',
-                cursor: 'pointer',
-                color: 'sideBar.foreground',
-              })}
-              onClick={importFile}
-            >
-              <svg width={16} height={14} fill="none" viewBox="0 0 16 14">
-                <path
-                  fill="currentColor"
-                  d="M12.432 2.811a2.334 2.334 0 012.094 2.137A2.667 2.667 0 0113.333 10H9.667V7.204l1.602 1.716 1.462-1.364L8.667 3.2 4.602 7.556 6.064 8.92l1.603-1.716V10H2v-.024a2.334 2.334 0 01-.506-4.487 2.333 2.333 0 012.979-2.59 4.202 4.202 0 017.959-.088zM8 10h1.333v4H8v-4z"
-                />
-              </svg>
-            </Element>
-          </Tooltip>
-        ) : null}
-      </Stack>
-      {!settingsSync.settings || settingsSync.fetching ? (
-        <Stack
-          align="center"
-          justify="center"
-          css={css({
-            width: '100%',
-            height: 382,
-          })}
-        >
-          <Icon name="spinner" />
-        </Stack>
-      ) : (
-        <SubContainer>
-          {!settingsSync.settings?.length ? (
-            <CreateProfile importFile={importFile} />
-          ) : (
-            <Profiles />
-          )}
-        </SubContainer>
-      )}
-    </>
-  );
-};
diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/Preview/Preview.tsx b/packages/app/src/app/pages/common/Modals/PreferencesModal/Preview/Preview.tsx
deleted file mode 100644
index 78085cec3b7..00000000000
--- a/packages/app/src/app/pages/common/Modals/PreferencesModal/Preview/Preview.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import { Text } from '@codesandbox/components';
-import React from 'react';
-
-import { useAppState, useActions } from 'app/overmind';
-
-import {
-  PaddedPreference,
-  PreferenceContainer,
-  SubContainer,
-  Rule,
-} from '../elements';
-
-export const Preview: React.FC = () => {
-  const { settingChanged } = useActions().preferences;
-  const { settings } = useAppState().preferences;
-
-  const bindValue = (name: string) => ({
-    setValue: value => settingChanged({ name, value }),
-    value: settings[name],
-  });
-
-  return (
-    <div>
-      <Text block marginBottom={6} size={4} weight="regular">
-        Preview
-      </Text>
-
-      <SubContainer>
-        <PreferenceContainer>
-          <PaddedPreference
-            title="Preview on edit"
-            tooltip="Only update on save"
-            type="boolean"
-            {...bindValue('livePreviewEnabled')}
-          />
-
-          <Text size={2} variant="muted">
-            Preview the latest code without saving.
-          </Text>
-
-          <Rule />
-
-          <PaddedPreference
-            title="Clear console"
-            tooltip="Clear console when executing"
-            type="boolean"
-            {...bindValue('clearConsoleEnabled')}
-          />
-
-          <Text size={2} variant="muted">
-            Clear your developer console between every execution.
-          </Text>
-
-          <Rule />
-
-          <PaddedPreference
-            title="Instant preview"
-            type="boolean"
-            {...bindValue('instantPreviewEnabled')}
-          />
-
-          <Text size={2} variant="muted">
-            Show preview on every keypress.
-          </Text>
-        </PreferenceContainer>
-      </SubContainer>
-    </div>
-  );
-};
diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/Preview/index.tsx b/packages/app/src/app/pages/common/Modals/PreferencesModal/Preview/index.tsx
deleted file mode 100644
index 8cd2ced646c..00000000000
--- a/packages/app/src/app/pages/common/Modals/PreferencesModal/Preview/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { Preview } from './Preview';
diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/SideNavigation.tsx b/packages/app/src/app/pages/common/Modals/PreferencesModal/SideNavigation.tsx
index c08dd4730ab..0178eef503c 100644
--- a/packages/app/src/app/pages/common/Modals/PreferencesModal/SideNavigation.tsx
+++ b/packages/app/src/app/pages/common/Modals/PreferencesModal/SideNavigation.tsx
@@ -4,8 +4,6 @@ import React, { ComponentType, FunctionComponent } from 'react';
 
 import { useActions } from 'app/overmind';
 
-import { useIsEditorPage } from 'app/hooks/useIsEditorPage';
-
 type MenuItem = {
   Icon: ComponentType;
   id: string;
@@ -20,7 +18,6 @@ export const SideNavigation: FunctionComponent<Props> = ({
   selectedTab,
 }) => {
   const { itemIdChanged } = useActions().preferences;
-  const isEditorPage = useIsEditorPage();
 
   return (
     <Element css={css({ width: 200 })} paddingBottom={8}>
@@ -32,7 +29,7 @@ export const SideNavigation: FunctionComponent<Props> = ({
         size={4}
         weight="regular"
       >
-        {isEditorPage ? 'Preferences' : 'User settings'}
+        User settings
       </Text>
 
       <Element style={{ position: 'relative' }}>
diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/VSCodePlaceholder/OpenVSCodeSettingsButton.tsx b/packages/app/src/app/pages/common/Modals/PreferencesModal/VSCodePlaceholder/OpenVSCodeSettingsButton.tsx
deleted file mode 100644
index 7ef67106445..00000000000
--- a/packages/app/src/app/pages/common/Modals/PreferencesModal/VSCodePlaceholder/OpenVSCodeSettingsButton.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Button } from '@codesandbox/components';
-import React, { FunctionComponent } from 'react';
-
-import { useActions, useEffects } from 'app/overmind';
-
-export const OpenVSCodeSettingsButton: FunctionComponent = () => {
-  const { vscode } = useEffects();
-  const { modalClosed } = useActions();
-
-  const openCommand = () => {
-    vscode
-      .runCommand('workbench.action.openSettings2')
-      .then(() => modalClosed());
-  };
-
-  return (
-    <Button marginTop={4} onClick={openCommand} autoWidth>
-      Open VSCode Settings
-    </Button>
-  );
-};
diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/VSCodePlaceholder/index.tsx b/packages/app/src/app/pages/common/Modals/PreferencesModal/VSCodePlaceholder/index.tsx
deleted file mode 100644
index 666f37a8fdc..00000000000
--- a/packages/app/src/app/pages/common/Modals/PreferencesModal/VSCodePlaceholder/index.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { editorUrl } from '@codesandbox/common/lib/utils/url-generator';
-import { Text } from '@codesandbox/components';
-import React, { FunctionComponent } from 'react';
-import { Route } from 'react-router-dom';
-
-import { OpenVSCodeSettingsButton } from './OpenVSCodeSettingsButton';
-
-export const VSCodePlaceholder: FunctionComponent = () => (
-  <>
-    <Text block fontStyle="italic" size={3} style={{ lineHeight: 1.5 }}>
-      Some options are disabled because they are handled by VSCode. You can open
-      the settings of VSCode by pressing <kbd>CTRL/CMD</kbd> + <kbd>,</kbd>.
-    </Text>
-
-    <Route
-      path={editorUrl()}
-      render={({ match }) => (match ? <OpenVSCodeSettingsButton /> : null)}
-    />
-  </>
-);
diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/index.tsx b/packages/app/src/app/pages/common/Modals/PreferencesModal/index.tsx
index 70f8b19bc17..182f1f1f16b 100644
--- a/packages/app/src/app/pages/common/Modals/PreferencesModal/index.tsx
+++ b/packages/app/src/app/pages/common/Modals/PreferencesModal/index.tsx
@@ -2,30 +2,19 @@ import { Stack, Element } from '@codesandbox/components';
 import React, { ComponentProps, ComponentType } from 'react';
 
 import AccountIcon from 'react-icons/lib/fa/user';
-import CodeIcon from 'react-icons/lib/fa/code';
-import CodeFormatIcon from 'react-icons/lib/fa/dedent';
 import FlaskIcon from 'react-icons/lib/fa/flask';
 import MailIcon from 'react-icons/lib/go/mail';
-import BrowserIcon from 'react-icons/lib/go/browser';
-import AppearanceIcon from 'react-icons/lib/md/color-lens';
 import IntegrationIcon from 'react-icons/lib/md/device-hub';
 
 import { useAppState } from 'app/overmind';
-import { useIsEditorPage } from 'app/hooks/useIsEditorPage';
 import { CurrentUser } from '@codesandbox/common/lib/types';
 
 import { Account } from './Account';
-import { Appearance } from './Appearance';
-import { CodeFormatting } from './CodeFormatting';
-import { Editor } from './Editor';
-import { Preview } from './Preview';
 import { Experiments } from './Experiments';
-import { PreferencesSync } from './PreferencesSync';
 import { Integrations } from './Integrations';
 import { MailPreferences } from './MailPreferences';
 
 import { SideNavigation } from './SideNavigation';
-import { ProfileIcon } from './PreferencesSync/Icons';
 
 type MenuItem = ComponentProps<typeof SideNavigation>['menuItems'][0] & {
   Content: ComponentType;
@@ -34,8 +23,7 @@ type MenuItem = ComponentProps<typeof SideNavigation>['menuItems'][0] & {
 const getItems = (
   isLoggedIn: boolean,
   user: CurrentUser,
-  isOnPrem: boolean,
-  isEditorPage: boolean
+  isOnPrem: boolean
 ): MenuItem[] =>
   [
     user && {
@@ -63,37 +51,6 @@ const getItems = (
       id: 'experiments',
       title: 'Experiments',
     },
-    isEditorPage && {
-      Content: Appearance,
-      Icon: AppearanceIcon,
-      id: 'appearance',
-      title: 'Appearance',
-    },
-    isEditorPage && {
-      Content: Editor,
-      Icon: CodeIcon,
-      id: 'editor',
-      title: 'Editor',
-    },
-    isEditorPage && {
-      Content: CodeFormatting,
-      Icon: CodeFormatIcon,
-      id: 'prettierSettings',
-      title: 'Prettier Settings',
-    },
-    isEditorPage && {
-      Content: Preview,
-      Icon: BrowserIcon,
-      id: 'preview',
-      title: 'Preview',
-    },
-    isEditorPage &&
-      user && {
-        Content: PreferencesSync,
-        Icon: ProfileIcon,
-        id: 'preferencesSync',
-        title: 'Profiles',
-      },
   ].filter(Boolean);
 
 export const Preferences: React.FC<{
@@ -107,8 +64,7 @@ export const Preferences: React.FC<{
     environment,
   } = useAppState();
 
-  const isEditorPage = useIsEditorPage();
-  const items = getItems(isLoggedIn, user, environment.isOnPrem, isEditorPage);
+  const items = getItems(isLoggedIn, user, environment.isOnPrem);
 
   const tabId = itemId || tab || 'account';
 
diff --git a/packages/app/src/app/pages/common/Modals/RecoverFilesModal/index.tsx b/packages/app/src/app/pages/common/Modals/RecoverFilesModal/index.tsx
deleted file mode 100644
index 9fde0ac81c6..00000000000
--- a/packages/app/src/app/pages/common/Modals/RecoverFilesModal/index.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import React, { FunctionComponent } from 'react';
-
-import { Button, Stack } from '@codesandbox/components';
-import { useAppState, useActions } from 'app/overmind';
-import css from '@styled-system/css';
-import { Alert } from '../Common/Alert';
-
-export const RecoverFilesModal: FunctionComponent = () => {
-  const { files, modalClosed } = useActions();
-  const { recoveredFiles } = useAppState().editor;
-
-  return (
-    <Alert
-      title="Recovered Files"
-      description={`We recovered ${recoveredFiles.length} unsaved ${
-        recoveredFiles.length > 1 ? 'files' : 'file'
-      } from a previous session, what do you want to do?`}
-    >
-      <Stack justify="flex-end" gap={2}>
-        <Button
-          variant="secondary"
-          css={css({
-            width: 'auto',
-          })}
-          onClick={() => {
-            files.applyRecover(recoveredFiles);
-            modalClosed();
-          }}
-        >
-          Apply Changes
-        </Button>
-        <Button
-          variant="secondary"
-          onClick={() => {
-            files.createRecoverDiffs(recoveredFiles);
-            modalClosed();
-          }}
-          type="submit"
-          css={css({
-            width: 'auto',
-          })}
-        >
-          Compare
-        </Button>
-        <Button
-          onClick={() => {
-            files.discardRecover();
-            modalClosed();
-          }}
-          type="submit"
-          css={css({
-            width: 'auto',
-          })}
-        >
-          Discard
-        </Button>
-      </Stack>
-    </Alert>
-  );
-};
diff --git a/packages/app/src/app/pages/common/Modals/SearchDependenciesModal.tsx b/packages/app/src/app/pages/common/Modals/SearchDependenciesModal.tsx
deleted file mode 100644
index 536ecfcb336..00000000000
--- a/packages/app/src/app/pages/common/Modals/SearchDependenciesModal.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React, { FunctionComponent } from 'react';
-
-import { useActions } from 'app/overmind';
-import { SearchDependencies } from 'app/pages/Sandbox/SearchDependencies';
-
-export const SearchDependenciesModal: FunctionComponent = () => {
-  const { addNpmDependency } = useActions().editor;
-
-  return (
-    <SearchDependencies
-      onConfirm={(name: string, version: string) =>
-        addNpmDependency({ name, version })
-      }
-    />
-  );
-};
diff --git a/packages/app/src/app/pages/common/Modals/ShareModal/SocialShare.tsx b/packages/app/src/app/pages/common/Modals/ShareModal/SocialShare.tsx
deleted file mode 100644
index e37e2431615..00000000000
--- a/packages/app/src/app/pages/common/Modals/ShareModal/SocialShare.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import {
-  Button,
-  Text,
-  Stack,
-  Element,
-  Collapsible,
-  Textarea,
-} from '@codesandbox/components';
-import { getSandboxName } from '@codesandbox/common/lib/utils/get-sandbox-name';
-import { sandboxUrl } from '@codesandbox/common/lib/utils/url-generator';
-
-import QRCode from 'qrcode.react';
-import React from 'react';
-
-import {
-  BUTTON_URL,
-  getButtonHTML,
-  getButtonMarkdown,
-  getEmbedUrl,
-  getDevToLink,
-  getTwitterLink,
-} from './getCode';
-import { Field } from '.';
-
-export const SocialShare = ({ sandbox, mainModule, state, select }) => (
-  <Collapsible title="Other Sharing Options">
-    <Element paddingX={4}>
-      <Text size={3} weight="bold" block marginBottom={2}>
-        Share CodeSandbox Button
-      </Text>
-      <a href={sandboxUrl(sandbox)}>
-        <img alt={getSandboxName(sandbox)} src={BUTTON_URL} />
-      </a>
-      <Field label="Markdown">
-        <Textarea
-          onFocus={select}
-          value={getButtonMarkdown(sandbox, mainModule, state)}
-          readOnly
-        />
-      </Field>
-      <Field label="HTML">
-        <Textarea
-          onFocus={select}
-          value={getButtonHTML(sandbox, mainModule, state)}
-          readOnly
-        />
-      </Field>
-
-      <Text size={3} marginTop={4} weight="bold" block marginBottom={2}>
-        Share QR Code
-      </Text>
-      <QRCode
-        value={getEmbedUrl(sandbox, mainModule, state)}
-        size="100%"
-        renderAs="svg"
-      />
-      <Text size={3} marginTop={4} weight="bold" block marginBottom={2}>
-        Share on Social Media
-      </Text>
-      <Stack gap={2}>
-        <Button as="a" autoWidth target="_blank" href={getDevToLink(sandbox)}>
-          Share on DEV
-        </Button>
-        <Button
-          as="a"
-          autoWidth
-          target="_blank"
-          href={getTwitterLink(sandbox, mainModule, state)}
-        >
-          Share on Twitter
-        </Button>
-      </Stack>
-    </Element>
-  </Collapsible>
-);
diff --git a/packages/app/src/app/pages/common/Modals/ShareModal/elements.ts b/packages/app/src/app/pages/common/Modals/ShareModal/elements.ts
deleted file mode 100644
index 3ea2b243418..00000000000
--- a/packages/app/src/app/pages/common/Modals/ShareModal/elements.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Preference } from '@codesandbox/common/lib/components/Preference';
-import styled from 'styled-components';
-
-export const PaddedPreference = styled(Preference)`
-  color: #e5e5e5;
-  padding-bottom: 1rem;
-
-  &:last-child {
-    padding-bottom: 0;
-  }
-`;
diff --git a/packages/app/src/app/pages/common/Modals/ShareModal/getCode.ts b/packages/app/src/app/pages/common/Modals/ShareModal/getCode.ts
deleted file mode 100644
index 4982e673f7a..00000000000
--- a/packages/app/src/app/pages/common/Modals/ShareModal/getCode.ts
+++ /dev/null
@@ -1,109 +0,0 @@
-import { getModulePath } from '@codesandbox/common/lib/sandbox/modules';
-import { getSandboxName } from '@codesandbox/common/lib/utils/get-sandbox-name';
-import {
-  embedUrl,
-  optionsToParameterizedUrl,
-  protocolAndHost,
-  sandboxUrl,
-} from '@codesandbox/common/lib/utils/url-generator';
-import { escapeHtml } from 'app/utils/escape';
-
-export const BUTTON_URL = `${process.env.CODESANDBOX_HOST}/static/img/play-codesandbox.svg`;
-
-export const VIEW_OPTIONS = ['Editor + Preview', 'Preview', 'Editor'];
-const THEME_OPTIONS = ['Dark', 'Light'];
-
-const getOptionsUrl = (sandbox, mainModule, state) => {
-  const {
-    defaultModule,
-    view,
-    theme,
-    testsView,
-    autoResize,
-    hideNavigation,
-    isCurrentModuleView,
-    fontSize,
-    initialPath,
-    enableEslint,
-    useCodeMirror,
-    expandDevTools,
-  } = state;
-
-  const options = {
-    view: view !== VIEW_OPTIONS[0] ? view.toLowerCase() : null,
-    theme: theme !== THEME_OPTIONS[0] ? theme.toLowerCase() : null,
-    previewwindow: testsView ? 'tests' : null,
-    autoresize: autoResize ? 1 : null,
-    hidenavigation: hideNavigation ? 1 : null,
-    moduleview: isCurrentModuleView ? 1 : null,
-    eslint: enableEslint ? 1 : null,
-    codemirror: useCodeMirror ? 1 : null,
-    expanddevtools: expandDevTools ? 1 : null,
-    fontsize: fontSize !== 14 ? fontSize : 14,
-    initialpath: initialPath || null,
-  };
-
-  const mainModuleId = mainModule.id;
-  if (defaultModule && defaultModule !== mainModuleId) {
-    const modulePath = getModulePath(
-      sandbox.modules,
-      sandbox.directories,
-      defaultModule
-    );
-    // @ts-ignore
-    options.module = modulePath;
-  }
-
-  return optionsToParameterizedUrl(options);
-};
-
-const getEditorUrl = (sandbox, mainModule, state) =>
-  protocolAndHost() +
-  sandboxUrl(sandbox) +
-  getOptionsUrl(sandbox, mainModule, state);
-
-export const getEmbedUrl = (sandbox, mainModule, state) =>
-  protocolAndHost() +
-  embedUrl(sandbox) +
-  getOptionsUrl(sandbox, mainModule, state);
-
-export const getIframeScript = (sandbox, mainModule, state, height) =>
-  `<iframe src="${getEmbedUrl(sandbox, mainModule, state)}"
-     style="width:100%; height:${height}px; border:0; border-radius: 4px; overflow:hidden;"
-     title="${escapeHtml(getSandboxName(sandbox))}"
-     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-   ></iframe>`;
-
-// eslint-disable-next-line
-export const getButtonMarkdown = (sandbox, mainModule, state) => {
-  return `[![Edit ${getSandboxName(sandbox)}](${BUTTON_URL})](${getEditorUrl(
-    sandbox,
-    mainModule,
-    state
-  )})`;
-};
-
-// eslint-disable-next-line
-export const getButtonHTML = (sandbox, mainModule, state) => {
-  return `<a href="${getEditorUrl(sandbox, mainModule, state)}">
-  <img alt="Edit ${sandbox.title || sandbox.id}" src="${BUTTON_URL}">
-</a>
-`;
-};
-
-export const getDevToLink = sandbox =>
-  `https://dev.to/new?prefill=---%5Cn%20title:${encodeURIComponent(
-    sandbox.title || sandbox.id
-  )}%5Cn%20published:%20false%5Cn%20tags:%20codesandbox%5Cn%20---%5Cn%20%5Cn%20%5Cn%20%5Cn%20%7B%25%20codesandbox%20${encodeURIComponent(
-    sandbox.id
-  )}%20%25%7D`;
-
-export const getTwitterLink = (sandbox, mainModule, state) =>
-  `https://twitter.com/intent/tweet?text=${encodeURIComponent(
-    `${sandbox.title || sandbox.id}. ${getEditorUrl(
-      sandbox,
-      mainModule,
-      state
-    )}`
-  )}`;
diff --git a/packages/app/src/app/pages/common/Modals/ShareModal/index.tsx b/packages/app/src/app/pages/common/Modals/ShareModal/index.tsx
deleted file mode 100644
index c53294b08a1..00000000000
--- a/packages/app/src/app/pages/common/Modals/ShareModal/index.tsx
+++ /dev/null
@@ -1,321 +0,0 @@
-import {
-  Button,
-  Text,
-  Stack,
-  Element,
-  Collapsible,
-  Textarea,
-  Input,
-  FormField,
-} from '@codesandbox/components';
-import css from '@styled-system/css';
-import track from '@codesandbox/common/lib/utils/analytics';
-import { useAppState, useEffects } from 'app/overmind';
-// eslint-disable-next-line
-import Files from 'embed/components/Sidebar/FileTree';
-import React, { useEffect, useState } from 'react';
-
-import { PaddedPreference } from './elements';
-import { VIEW_OPTIONS, getEmbedUrl, getIframeScript } from './getCode';
-import { SocialShare } from './SocialShare';
-
-interface Props {}
-
-export const Field = ({ children, label }) => (
-  <FormField
-    css={css({
-      padding: 0,
-      marginTop: 4,
-      label: {
-        marginBottom: 1,
-      },
-    })}
-    direction="vertical"
-    label={label}
-  >
-    {children}
-  </FormField>
-);
-
-export const ShareModal: React.FC<Props> = () => {
-  const { copyToClipboard } = useEffects().browser;
-  const { editor } = useAppState();
-  const [copied, setCopied] = useState(false);
-  const [state, updateState] = useState({
-    view: VIEW_OPTIONS[0],
-    theme: 'dark',
-    testsView: false,
-    defaultModule: null,
-    autoResize: false,
-    hideNavigation: true,
-    isCurrentModuleView: false,
-    fontSize: 14,
-    initialPath: '',
-    useCodeMirror: false,
-    enableEslint: false,
-    expandDevTools: false,
-  });
-
-  useEffect(() => {
-    track('Share Modal Opened', {});
-  }, []);
-
-  function setDefaultModule(id: string) {
-    updateState({ ...state, defaultModule: id });
-  }
-
-  function setAutoResize(autoResize: boolean) {
-    updateState({ ...state, autoResize });
-  }
-
-  function setHideNavigation(hideNavigation: boolean) {
-    updateState({ ...state, hideNavigation });
-  }
-
-  function setUseCodeMirror(useCodeMirror: boolean) {
-    updateState({ ...state, useCodeMirror });
-  }
-
-  function setEnableEslint(enableEslint: boolean) {
-    updateState({ ...state, enableEslint });
-  }
-
-  function setIsCurrentModuleView(isCurrentModuleView: boolean) {
-    updateState({ ...state, isCurrentModuleView });
-  }
-
-  function setExpandDevTools(expandDevTools: boolean) {
-    updateState({ ...state, expandDevTools });
-  }
-
-  function setFontSize(fontSize: number) {
-    updateState({ ...state, fontSize });
-  }
-
-  function setTestsView(testsView: boolean) {
-    updateState({ ...state, testsView });
-  }
-
-  function setInitialPath({ target }) {
-    const initialPath = target.value;
-    updateState({ ...state, initialPath });
-  }
-
-  function setView(view: string) {
-    updateState({ ...state, view });
-  }
-
-  function setTheme() {
-    const newTheme = state.theme === 'dark' ? 'light' : 'dark';
-    updateState({ ...state, theme: newTheme });
-  }
-
-  function select(event) {
-    event.target.select();
-  }
-
-  const {
-    mainModule,
-    currentSandbox: sandbox,
-  }: { mainModule: any; currentSandbox: any } = editor;
-  const {
-    view,
-    theme,
-    testsView,
-    autoResize,
-    hideNavigation,
-    isCurrentModuleView,
-    fontSize,
-    initialPath,
-    useCodeMirror,
-    enableEslint,
-    expandDevTools,
-  } = state;
-
-  const defaultModule = state.defaultModule || mainModule.id;
-
-  return (
-    <Stack>
-      <Element
-        css={css({
-          overflow: 'auto',
-          width: 320,
-          maxHeight: 600,
-          backgroundColor: 'sideBar.background',
-          borderRight: '1px solid',
-          borderColor: 'sideBar.border',
-        })}
-      >
-        <Collapsible title="Embed" defaultOpen>
-          <Element paddingX={4}>
-            <Text block variant="muted">
-              Customize the embed to better integrate with your website, blog or
-              documentation{' '}
-            </Text>
-            <Element
-              marginTop={4}
-              css={css({
-                'div > div': {
-                  width: '100%',
-                },
-              })}
-            >
-              <PaddedPreference
-                type="dropdown"
-                options={VIEW_OPTIONS}
-                value={view}
-                setValue={setView}
-              />
-            </Element>
-            <Element marginTop={4}>
-              <PaddedPreference
-                title="Light Theme"
-                type="boolean"
-                value={theme === 'light'}
-                setValue={setTheme}
-              />
-            </Element>
-          </Element>
-        </Collapsible>
-        <Collapsible title="Share" defaultOpen>
-          <Element paddingX={4}>
-            <Textarea
-              onFocus={select}
-              value={getIframeScript(sandbox, mainModule, state, 500)}
-              readOnly
-            />
-            <Button
-              marginTop={4}
-              onClick={() => {
-                setCopied(true);
-                window.setTimeout(() => {
-                  setCopied(false);
-                }, 2000);
-                copyToClipboard(
-                  getIframeScript(sandbox, mainModule, state, 500)
-                );
-              }}
-            >
-              {copied ? 'Copied' : 'Copy Embed Code'}
-            </Button>
-            <Field label="Embed url">
-              <Input
-                onFocus={select}
-                value={getEmbedUrl(sandbox, mainModule, state)}
-                readOnly
-              />
-            </Field>
-          </Element>
-        </Collapsible>
-        <Collapsible title="Preview">
-          <Element paddingX={4}>
-            <PaddedPreference
-              title="Auto resize"
-              type="boolean"
-              tooltip="Works only on Medium"
-              value={autoResize}
-              setValue={setAutoResize}
-            />
-            <PaddedPreference
-              title="Hide navigation bar"
-              type="boolean"
-              value={hideNavigation}
-              setValue={setHideNavigation}
-            />
-            <PaddedPreference
-              title="Expand console"
-              type="boolean"
-              value={expandDevTools}
-              setValue={setExpandDevTools}
-            />
-            <PaddedPreference
-              title="Show current module view"
-              type="boolean"
-              tooltip="Only show the module that's currently open"
-              value={isCurrentModuleView}
-              setValue={setIsCurrentModuleView}
-            />
-            <PaddedPreference
-              title="Show Tests (instead of browser preview)"
-              type="boolean"
-              value={testsView}
-              setValue={setTestsView}
-            />
-            <PaddedPreference
-              title="Font size"
-              type="number"
-              value={fontSize}
-              setValue={setFontSize}
-            />
-          </Element>
-        </Collapsible>
-        <Collapsible title="Advanced Options">
-          <Element paddingX={4}>
-            <PaddedPreference
-              title="Use CodeMirror instead of Monaco editor"
-              type="boolean"
-              value={useCodeMirror}
-              setValue={setUseCodeMirror}
-            />
-            <PaddedPreference
-              title="Enable eslint (significantly higher bundle size)"
-              type="boolean"
-              value={enableEslint}
-              setValue={setEnableEslint}
-            />
-            <div>
-              <Text size={3} block paddingBottom={2}>
-                Default module to show
-              </Text>
-              <Element
-                css={css({
-                  maxHeight: 300,
-                  overflow: 'auto',
-                  '> div > div[class*="FileContainer"]': {
-                    paddingLeft: '12px',
-                  },
-                })}
-              >
-                {/* @ts-ignore */}
-                <Files
-                  sandbox={sandbox}
-                  currentModuleId={defaultModule}
-                  setCurrentModuleId={setDefaultModule}
-                />
-              </Element>
-            </div>
-            <Field label="Project Initial Path">
-              <Input
-                onFocus={select}
-                placeholder="e.g: /home"
-                value={initialPath}
-                onChange={setInitialPath}
-              />
-            </Field>
-          </Element>
-        </Collapsible>
-        <SocialShare
-          sandbox={sandbox}
-          mainModule={mainModule}
-          state={state}
-          select={select}
-        />
-      </Element>
-      <Element
-        css={css({
-          width: '100%',
-          height: '100%',
-          position: 'relative',
-          iframe: {
-            display: 'block',
-            borderRadius: '0 !important',
-          },
-        })}
-        // eslint-disable-next-line
-        dangerouslySetInnerHTML={{
-          __html: getIframeScript(sandbox, mainModule, state, 600),
-        }}
-      />
-    </Stack>
-  );
-};
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
deleted file mode 100644
index f716b29dae3..00000000000
--- a/packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/AddFileToSandboxButton.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { UploadFile } from '@codesandbox/common/lib/types';
-import React, { FunctionComponent } from 'react';
-
-import { useAppState, useActions } from 'app/overmind';
-import { Button, Icon } from '@codesandbox/components';
-
-type Props = Pick<UploadFile, 'name' | 'url'>;
-export const AddFileToSandboxButton: FunctionComponent<Props> = ({
-  name,
-  url,
-}) => {
-  const { addedFileToSandbox } = useActions().files;
-  const { currentSandbox } = useAppState().editor;
-
-  if (!currentSandbox) {
-    return null;
-  }
-
-  return (
-    <Button
-      autoWidth
-      variant="secondary"
-      disabled={!currentSandbox}
-      title="Add file to sandbox"
-      onClick={() => addedFileToSandbox({ name, url })}
-    >
-      <Icon name="plus" />
-    </Button>
-  );
-};
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
index 4f185d37c47..87a7eedff9e 100644
--- a/packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/DeleteFileButton.tsx
+++ b/packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/DeleteFileButton.tsx
@@ -7,9 +7,7 @@ import { Button, Icon } from '@codesandbox/components';
 
 type Props = Pick<UploadFile, 'id'>;
 export const DeleteFileButton: FunctionComponent<Props> = ({ id }) => {
-  const {
-    files: { deletedUploadedFile },
-  } = useActions();
+  const { deleteUploadedFile } = useActions();
 
   return (
     <Button
@@ -22,7 +20,7 @@ export const DeleteFileButton: FunctionComponent<Props> = ({ id }) => {
         },
       })}
       variant="secondary"
-      onClick={() => deletedUploadedFile(id)}
+      onClick={() => deleteUploadedFile(id)}
       title="Delete File"
     >
       <Icon name="trash" />
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
index fd0101e098f..1b7eb54293d 100644
--- a/packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/index.tsx
+++ b/packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/index.tsx
@@ -14,22 +14,13 @@ import {
 
 import { useAppState, useActions } from 'app/overmind';
 
-import { AddFileToSandboxButton } from './AddFileToSandboxButton';
 import { DeleteFileButton } from './DeleteFileButton';
 
 export const FilesList: FunctionComponent = () => {
-  const {
-    files: { deletedUploadedFile, addedFileToSandbox },
-  } = useActions();
-  const {
-    editor: { currentSandbox },
-    uploadedFiles,
-  } = useAppState();
+  const { deleteUploadedFile } = useActions();
+  const { uploadedFiles } = useAppState();
   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)
@@ -38,19 +29,11 @@ export const FilesList: FunctionComponent = () => {
   return (
     <Element marginTop={4}>
       <Stack gap={2} marginBottom={6} justify="space-between">
-        <Button
-          autoWidth
-          disabled={selectedItems.length === 0 || !currentSandbox}
-          onClick={() => getSelection().map(addedFileToSandbox)}
-        >
-          Add all selected to project
-        </Button>
-
         <Button
           variant="danger"
           autoWidth
           disabled={selectedItems.length === 0}
-          onClick={() => selectedItems.map(deletedUploadedFile)}
+          onClick={() => selectedItems.map(deleteUploadedFile)}
         >
           Delete all selected
         </Button>
@@ -93,7 +76,6 @@ export const FilesList: FunctionComponent = () => {
                 <Text size={3}>{filesize(objectSize)}</Text>
               </Element>
               <Stack gap={2}>
-                <AddFileToSandboxButton name={name} url={url} />
                 <DeleteFileButton id={id} />
               </Stack>
             </ListAction>
diff --git a/packages/app/src/app/pages/common/Modals/TeamInviteModal/index.tsx b/packages/app/src/app/pages/common/Modals/TeamInviteModal/index.tsx
index 831c0ff7d38..bcbfc54620d 100644
--- a/packages/app/src/app/pages/common/Modals/TeamInviteModal/index.tsx
+++ b/packages/app/src/app/pages/common/Modals/TeamInviteModal/index.tsx
@@ -49,20 +49,7 @@ export const TeamInviteModal = () => {
     <Element css={{ padding: '16px' }}>
       <Stack direction="vertical" gap={4}>
         <Stack gap={4}>
-          <TeamAvatar
-            name={teamName}
-            css={{
-              width: 80,
-              height: 80,
-              border: '2px solid #242424',
-              borderRadius: '4px',
-              flexShrink: 0,
-
-              '& span': {
-                fontSize: '32px',
-              },
-            }}
-          />
+          <TeamAvatar name={teamName} />
           <Stack direction="vertical" paddingTop={1} gap={2}>
             <Text weight="bold" block>
               Join {teamName}
diff --git a/packages/app/src/app/pages/common/Modals/UploadModal/index.tsx b/packages/app/src/app/pages/common/Modals/UploadModal/index.tsx
deleted file mode 100644
index 775c30cfa5c..00000000000
--- a/packages/app/src/app/pages/common/Modals/UploadModal/index.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import React from 'react';
-import { UploadProgress } from 'app/components/UploadProgress';
-
-export const UploadModal = () => (
-  <UploadProgress message="Uploading Files..." />
-);
diff --git a/packages/app/src/app/pages/common/Modals/index.tsx b/packages/app/src/app/pages/common/Modals/index.tsx
index b1caf864859..60d43eb233f 100644
--- a/packages/app/src/app/pages/common/Modals/index.tsx
+++ b/packages/app/src/app/pages/common/Modals/index.tsx
@@ -1,48 +1,26 @@
-import codesandbox from '@codesandbox/common/lib/themes/codesandbox.json';
 import { ThemeProvider } from '@codesandbox/components';
-import { useLocation } from 'react-router-dom';
 import Modal from 'app/components/Modal';
 import { useAppState, useActions } from 'app/overmind';
-import getVSCodeTheme from 'app/src/app/pages/Sandbox/Editor/utils/get-vscode-theme';
-import React, { FunctionComponent, useEffect, useState } from 'react';
+import React, { FunctionComponent, useState } from 'react';
 
 import { ImportRepository } from 'app/components/Create/ImportRepository';
 import { CreateBox } from 'app/components/Create/CreateBox';
-import { AddPreset } from './AddPreset';
-import { DeleteDeploymentModal } from './DeleteDeploymentModal';
-import { DeletePreset } from './DeletePreset';
 import { DeleteProfileSandboxModal } from './DeleteProfileSandboxModal';
-import { DeleteSandboxModal } from './DeleteSandboxModal';
-import { DeploymentModal } from './DeploymentModal';
-import { EditPresets } from './EditPresets';
 import { EmptyTrash } from './EmptyTrash';
-import { ExportGitHubModal } from './ExportGitHubModal';
 import { FeedbackModal } from './FeedbackModal';
-import { ForkServerModal } from './ForkServerModal';
-import { LiveSessionEnded } from './LiveSessionEnded';
-import { LiveSessionRestricted } from './LiveSessionRestricted';
-import { LiveVersionMismatch } from './LiveSessionVersionMismatch';
-import { NetlifyLogs } from './NetlifyLogs';
 import { Preferences } from './PreferencesModal';
-import { RecoverFilesModal } from './RecoverFilesModal';
 import { SandboxPickerModal } from './SandboxPickerModal';
-import { SearchDependenciesModal } from './SearchDependenciesModal';
 import { SelectSandboxModal } from './SelectSandboxModal';
-import { ShareModal } from './ShareModal';
 import { SignInForTemplates } from './SignInForTemplates';
 import { StorageManagementModal } from './StorageManagementModal';
 import { SurveyModal } from './SurveyModal';
 import { TeamInviteModal } from './TeamInviteModal';
-import { UploadModal } from './UploadModal';
 import { MinimumPrivacyModal } from './MinimumPrivacyModal';
 import { GenericAlertModal } from './GenericAlertModal';
 import { AccountDeletionModal } from './AccountDeletion';
 import { AccountDeletionConfirmationModal } from './AccountDeletion/DeletedConfirmation';
 import { UndoAccountDeletionModal } from './UndoAccountDeletion';
 import { UndoAccountDeletionConfirmationModal } from './UndoAccountDeletion/UndoDeletedConfirmation';
-import { NotFoundBranchModal } from './NotFoundBranchModal';
-import { GithubPagesLogs } from './GithubPagesLogs';
-import { CropThumbnail } from './CropThumbnail';
 
 const modals = {
   preferences: {
@@ -57,66 +35,18 @@ const modals = {
     Component: ImportRepository,
     width: 950,
   },
-  share: {
-    Component: ShareModal,
-    width: 1200,
-  },
-  deployment: {
-    Component: DeploymentModal,
-    width: 600,
-  },
-  recoveredFiles: {
-    Component: RecoverFilesModal,
-    width: 400,
-  },
   teamInvite: {
     Component: TeamInviteModal,
     width: 400,
   },
-  exportGithub: {
-    Component: ExportGitHubModal,
-    width: 400,
-  },
   signInForTemplates: {
     Component: SignInForTemplates,
     width: 400,
   },
-  netlifyLogs: {
-    Component: NetlifyLogs,
-    width: 750,
-  },
-  githubPagesLogs: {
-    Component: GithubPagesLogs,
-    width: 750,
-  },
-  cropThumbnail: {
-    Component: CropThumbnail,
-    width: 750,
-  },
-  deleteDeployment: {
-    Component: DeleteDeploymentModal,
-    width: 400,
-  },
-  deleteSandbox: {
-    Component: DeleteSandboxModal,
-    width: 400,
-  },
   deleteProfileSandbox: {
     Component: DeleteProfileSandboxModal,
     width: 400,
   },
-  deletePreset: {
-    Component: DeletePreset,
-    width: 400,
-  },
-  addPreset: {
-    Component: AddPreset,
-    width: 400,
-  },
-  editPresets: {
-    Component: EditPresets,
-    width: 600,
-  },
   emptyTrash: {
     Component: EmptyTrash,
     width: 400,
@@ -125,34 +55,10 @@ const modals = {
     Component: SelectSandboxModal,
     width: 600,
   },
-  searchDependencies: {
-    Component: SearchDependenciesModal,
-    width: 716,
-  },
-  liveSessionEnded: {
-    Component: LiveSessionEnded,
-    width: 400,
-  },
-  liveSessionRestricted: {
-    Component: LiveSessionRestricted,
-    width: 400,
-  },
-  liveVersionMismatch: {
-    Component: LiveVersionMismatch,
-    width: 400,
-  },
-  uploading: {
-    Component: UploadModal,
-    width: 400,
-  },
   storageManagement: {
     Component: StorageManagementModal,
     width: 800,
   },
-  forkServerModal: {
-    Component: ForkServerModal,
-    width: 400,
-  },
   feedback: {
     Component: FeedbackModal,
     width: 450,
@@ -186,59 +92,19 @@ const modals = {
     Component: UndoAccountDeletionConfirmationModal,
     width: 450,
   },
-  notFoundBranchModal: {
-    Component: NotFoundBranchModal,
-    width: 450,
-  },
 };
 
 const Modals: FunctionComponent = () => {
-  const [themeProps, setThemeProps] = useState({});
-  const { pathname } = useLocation();
+  const [themeProps] = useState({});
   const { modalClosed } = useActions();
   const {
     modals: stateModals,
-    preferences: {
-      settings: { customVSCodeTheme },
-    },
     currentModal,
     currentModalItemId,
     repoToImport,
     sandboxIdToFork,
   } = useAppState();
 
-  const [localState, setLocalState] = useState({
-    theme: {
-      colors: {},
-      vscodeTheme: codesandbox,
-    },
-    customVSCodeTheme: null,
-  });
-
-  useEffect(() => {
-    async function loadTheme() {
-      try {
-        const t = await getVSCodeTheme('', customVSCodeTheme);
-        setLocalState({ theme: t, customVSCodeTheme });
-      } catch (e) {
-        console.error(e);
-      }
-    }
-    if (localState.customVSCodeTheme !== customVSCodeTheme) {
-      loadTheme();
-    }
-  }, [localState.customVSCodeTheme, customVSCodeTheme]);
-
-  useEffect(() => {
-    setThemeProps(
-      pathname.includes('/s/')
-        ? {
-            theme: localState.theme.vscodeTheme,
-          }
-        : {}
-    );
-  }, [pathname, localState]);
-
   const modal = currentModal && modals[currentModal];
   if (currentModal === 'create') {
     modal.props = {
diff --git a/packages/app/src/app/pages/common/NotFound/index.tsx b/packages/app/src/app/pages/common/NotFound/index.tsx
index 4bd8d093275..77806629504 100644
--- a/packages/app/src/app/pages/common/NotFound/index.tsx
+++ b/packages/app/src/app/pages/common/NotFound/index.tsx
@@ -115,9 +115,9 @@ export const NotFound: FunctionComponent = () => {
         </Text>
         <a
           href="/"
-          css={css({
+          style={{
             textDecoration: 'none',
-          })}
+          }}
         >
           <Button
             css={css({
diff --git a/packages/app/src/app/pages/common/Phew/index.tsx b/packages/app/src/app/pages/common/Phew/index.tsx
index d5c10833608..f08cca96425 100644
--- a/packages/app/src/app/pages/common/Phew/index.tsx
+++ b/packages/app/src/app/pages/common/Phew/index.tsx
@@ -68,9 +68,9 @@ export const Phew: FunctionComponent = () => {
         </Text>
         <a
           href="/"
-          css={css({
+          style={{
             textDecoration: 'none',
-          })}
+          }}
         >
           <Button
             css={css({
diff --git a/packages/app/src/app/pages/common/UserMenu/index.tsx b/packages/app/src/app/pages/common/UserMenu/index.tsx
index 52590ef933b..daba7802772 100644
--- a/packages/app/src/app/pages/common/UserMenu/index.tsx
+++ b/packages/app/src/app/pages/common/UserMenu/index.tsx
@@ -7,19 +7,13 @@ import { Menu, Stack, Icon, Text } from '@codesandbox/components';
 import { useAppState, useActions } from 'app/overmind';
 import React, { FunctionComponent } from 'react';
 
-import { useIsEditorPage } from 'app/hooks/useIsEditorPage';
 import { ProfileImage } from './elements';
 
 export const UserMenu: FunctionComponent & {
   Button: (props: any) => JSX.Element;
 } = props => {
-  const {
-    modalOpened,
-    signOutClicked,
-    files: { gotUploadedFiles },
-  } = useActions();
+  const { modalOpened, signOutClicked, gotUploadedFiles } = useActions();
   const { user, environment } = useAppState();
-  const isEditorPage = useIsEditorPage();
 
   if (!user) {
     return (
@@ -27,19 +21,27 @@ export const UserMenu: FunctionComponent & {
         <Menu>
           {props.children}
           <Menu.List>
-            <Menu.Link href={docsUrl()}>
+            <Menu.Item
+              onClick={() => {
+                window.location.href = docsUrl();
+              }}
+            >
               <Stack align="center" gap={2}>
                 <Icon name="documentation" size={16} />
                 <Text>Documentation</Text>
               </Stack>
-            </Menu.Link>
+            </Menu.Item>
             <Menu.Divider />
-            <Menu.Link href={`${csbSite()}/?from-app=1`}>
+            <Menu.Item
+              onClick={() => {
+                window.open(`${csbSite()}/?from-app=1`);
+              }}
+            >
               <Stack align="center" gap={2}>
                 <Icon name="external" size={16} />
                 <Text>codesandbox.io</Text>
               </Stack>
-            </Menu.Link>
+            </Menu.Item>
           </Menu.List>
         </Menu>
       </Stack>
@@ -66,7 +68,7 @@ export const UserMenu: FunctionComponent & {
             onClick={() =>
               modalOpened({
                 modal: 'preferences',
-                itemId: isEditorPage ? 'appearance' : 'account',
+                itemId: 'account',
               })
             }
           >
@@ -76,12 +78,16 @@ export const UserMenu: FunctionComponent & {
             </Stack>
           </Menu.Item>
 
-          <Menu.Link href={profileUrl(user.username)}>
+          <Menu.Item
+            onClick={() => {
+              window.location.href = profileUrl(user.username);
+            }}
+          >
             <Stack align="center" gap={2}>
               <Icon name="profile" size={16} />
               <Text>Profile</Text>
             </Stack>
-          </Menu.Link>
+          </Menu.Item>
 
           {showStorage && (
             <Menu.Item onClick={() => gotUploadedFiles(null)}>
@@ -94,12 +100,16 @@ export const UserMenu: FunctionComponent & {
 
           <Menu.Divider />
 
-          <Menu.Link href={docsUrl()}>
+          <Menu.Item
+            onClick={() => {
+              window.location.href = docsUrl();
+            }}
+          >
             <Stack align="center" gap={2}>
               <Icon name="documentation" size={16} />
               <Text>Documentation</Text>
             </Stack>
-          </Menu.Link>
+          </Menu.Item>
 
           <Menu.Item onClick={() => modalOpened({ modal: 'feedback' })}>
             <Stack align="center" gap={2}>
@@ -108,12 +118,16 @@ export const UserMenu: FunctionComponent & {
             </Stack>
           </Menu.Item>
 
-          <Menu.Link href={`${csbSite()}/?from-app=1`}>
+          <Menu.Item
+            onClick={() => {
+              window.open(`${csbSite()}/?from-app=1`);
+            }}
+          >
             <Stack align="center" gap={2}>
               <Icon name="external" size={16} />
               <Text>codesandbox.io</Text>
             </Stack>
-          </Menu.Link>
+          </Menu.Item>
 
           <Menu.Divider />
 
diff --git a/packages/app/src/app/pages/common/VercelIntegration.tsx b/packages/app/src/app/pages/common/VercelIntegration.tsx
deleted file mode 100644
index ac8bd2743f8..00000000000
--- a/packages/app/src/app/pages/common/VercelIntegration.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React, { FunctionComponent } from 'react';
-
-import { Integration } from 'app/components/Integration';
-import { VercelLogo } from 'app/components/VercelLogo';
-import { useAppState, useActions } from 'app/overmind';
-
-type Props = {
-  small?: boolean;
-};
-export const VercelIntegration: FunctionComponent<Props> = ({
-  small = false,
-}) => {
-  const { user, isLoadingVercel } = useAppState();
-  const { signInVercelClicked, signOutVercelClicked } = useActions();
-
-  return (
-    <Integration
-      name="Vercel"
-      small={small}
-      description="Deployments"
-      Icon={VercelLogo}
-      userInfo={user.integrations.vercel}
-      onSignIn={signInVercelClicked}
-      onSignOut={signOutVercelClicked}
-      loading={isLoadingVercel}
-    />
-  );
-};
diff --git a/packages/app/src/app/pages/index.tsx b/packages/app/src/app/pages/index.tsx
index 5f27833e588..91cc2e95ebb 100644
--- a/packages/app/src/app/pages/index.tsx
+++ b/packages/app/src/app/pages/index.tsx
@@ -53,14 +53,6 @@ const SignOut = Loadable(() =>
     default: module.SignOut,
   }))
 );
-const Live = Loadable(() =>
-  import(/* webpackChunkName: 'page-sign-in' */ './Live').then(module => ({
-    default: module.Live,
-  }))
-);
-const VercelSignIn = Loadable(
-  () => import(/* webpackChunkName: 'page-vercel' */ './VercelAuth')
-);
 const PreviewAuth = Loadable(
   () => import(/* webpackChunkName: 'page-vercel' */ './PreviewAuth')
 );
@@ -188,12 +180,11 @@ const RoutesComponent: React.FC = () => {
               path="/new"
               component={() => <Sandbox showModalOnTop="new" />}
             />
+            <Route path="/s/:id*" component={Sandbox} />
             <Route path="/invite/:token" component={TeamInvitation} />
 
             <Route path="/phew" component={Phew} />
             <Route path="/dashboard" component={Dashboard} />
-            <Route path="/s/:id*" component={Sandbox} />
-            <Route path="/live/:roomId" component={Live} />
             <Route path="/signin" exact component={SignIn} />
             <Route path="/signout" exact component={SignOut} />
             <Route path="/signin/duplicate" component={DuplicateAccount} />
@@ -206,7 +197,6 @@ const RoutesComponent: React.FC = () => {
             <Route path="/cli/login" component={CLI} />
             <Route path="/client/login" component={MobileAuth} />
             <Route path="/vscode/login" component={VSCodeAuth} />
-            <Route path="/auth/zeit" component={VercelSignIn} />
             <Route path="/auth/sandbox/:id" component={PreviewAuth} />
             <Route path="/auth/sandpack/:teamId" component={SandpackSecret} />
             {(process.env.LOCAL_SERVER || process.env.STAGING) && (
diff --git a/packages/app/src/embed/components/Content/index.tsx b/packages/app/src/embed/components/Content/index.tsx
index d810b0bf4ef..66826794298 100644
--- a/packages/app/src/embed/components/Content/index.tsx
+++ b/packages/app/src/embed/components/Content/index.tsx
@@ -21,13 +21,13 @@ import {
   DevTools,
   IViewType,
 } from 'app/components/Preview/DevTools';
-import { StyledNotSyncedIcon } from 'app/pages/Sandbox/Editor/Content/Tabs/ModuleTab/elements';
-import Tab from 'app/pages/Sandbox/Editor/Content/Tabs/Tab';
+import { StyledNotSyncedIcon } from 'app/components/Tabs/ModuleTab/elements';
+import Tab from 'app/components/Tabs/Tab';
 import {
   StyledCloseIcon,
   TabDir,
   TabTitle,
-} from 'app/pages/Sandbox/Editor/Content/Tabs/Tab/elements';
+} from 'app/components/Tabs/Tab/elements';
 import { clearCorrectionsFromAction } from 'app/utils/corrections';
 import { CorrectionClearAction } from 'codesandbox-api/dist/types/actions/correction';
 // @flow
diff --git a/packages/app/src/embed/components/Sidebar/FileTree/icons.js b/packages/app/src/embed/components/Sidebar/FileTree/icons.js
index 7fe5fd6d212..69c1f1b9881 100644
--- a/packages/app/src/embed/components/Sidebar/FileTree/icons.js
+++ b/packages/app/src/embed/components/Sidebar/FileTree/icons.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { EntryIcons } from 'app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons';
+import { EntryIcons } from 'app/components/EntryIcons';
 // eslint-disable-next-line import/extensions
 import { getType } from 'app/utils/get-type.ts';
 
diff --git a/packages/app/src/index.d.ts b/packages/app/src/index.d.ts
new file mode 100644
index 00000000000..e86911b0f9d
--- /dev/null
+++ b/packages/app/src/index.d.ts
@@ -0,0 +1,3 @@
+// This ensures the global window object contains BrowserFS in its type
+// Previously it was handled as a side effect of importing a module from standalone-packages/codesandbox-browserfs
+import '../../../standalone-packages/codesandbox-browserfs/dist/browserfs';
diff --git a/packages/common/src/utils/keybindings.ts b/packages/common/src/utils/keybindings.ts
index 0650281de68..728e93d9467 100644
--- a/packages/common/src/utils/keybindings.ts
+++ b/packages/common/src/utils/keybindings.ts
@@ -115,16 +115,6 @@ export const KEYBINDINGS = {
     },
   },
 
-  'source.dependencies.open': {
-    title: 'Add Dependency',
-    type: 'Source',
-    bindings: [],
-    signal: 'modalOpened',
-    payload: {
-      modal: 'searchDependencies',
-    },
-  },
-
   'source.modules.prettify': {
     title: 'Prettify Current File',
     type: 'Source',
diff --git a/packages/common/src/utils/url-generator.test.ts b/packages/common/src/utils/url-generator.test.ts
index 3b837380e01..ed99f5bb306 100644
--- a/packages/common/src/utils/url-generator.test.ts
+++ b/packages/common/src/utils/url-generator.test.ts
@@ -53,14 +53,8 @@ describe('url-generator', () => {
       );
     });
 
-    test(`legacy sandbox link`, () => {
-      expect(sandboxUrl({ id: 'sandbox-id' }, true)).toBe(
-        '/p/sandbox/sandbox-id'
-      );
-    });
-
-    test(`legacy sandbox link`, () => {
-      expect(sandboxUrl({ id: 'sandbox-id' })).toBe('/s/sandbox-id');
+    test(`sandbox link`, () => {
+      expect(sandboxUrl({ id: 'sandbox-id' })).toBe('/p/sandbox/sandbox-id');
     });
 
     test(`handles query params`, () => {
diff --git a/packages/common/src/utils/url-generator.ts b/packages/common/src/utils/url-generator.ts
index a7a0312042e..d695145445f 100644
--- a/packages/common/src/utils/url-generator.ts
+++ b/packages/common/src/utils/url-generator.ts
@@ -110,17 +110,10 @@ export const editorUrl = () => `/s/`;
 
 export const newEditorUrlPrefix = () => `/p/`;
 
-export const sandboxUrl = (
-  sandboxDetails: SandboxUrlSourceData,
-  hasBetaEditorExperiment?: boolean
-) => {
-  let baseUrl = editorUrl();
-
-  if (sandboxDetails.isV2) {
-    baseUrl = `${newEditorUrlPrefix()}devbox/`;
-  } else if (!sandboxDetails.isSse && hasBetaEditorExperiment) {
-    baseUrl = `${newEditorUrlPrefix()}sandbox/`;
-  }
+export const sandboxUrl = (sandboxDetails: SandboxUrlSourceData) => {
+  const baseUrl = sandboxDetails.isV2
+    ? `${newEditorUrlPrefix()}devbox/`
+    : `${newEditorUrlPrefix()}sandbox/`;
 
   const queryParams = sandboxDetails.query
     ? `?${new URLSearchParams(sandboxDetails.query).toString()}`
diff --git a/packages/components/src/components/Avatar/index.tsx b/packages/components/src/components/Avatar/index.tsx
index e4d3f3e356c..a36fc750d21 100644
--- a/packages/components/src/components/Avatar/index.tsx
+++ b/packages/components/src/components/Avatar/index.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import css from '@styled-system/css';
 import styled from 'styled-components';
-import { Element } from '../Element';
+import { Element, IElementProps } from '../Element';
 import { Text } from '../Text';
 
-interface IAvatarProps {
+interface IAvatarProps extends IElementProps {
   file?: string;
   user: {
     id?: string;
diff --git a/packages/components/src/components/InteractiveOverlay/InteractiveOverlay.tsx b/packages/components/src/components/InteractiveOverlay/InteractiveOverlay.tsx
index a6c9dc87b0a..41d5d2aaf30 100644
--- a/packages/components/src/components/InteractiveOverlay/InteractiveOverlay.tsx
+++ b/packages/components/src/components/InteractiveOverlay/InteractiveOverlay.tsx
@@ -33,6 +33,7 @@ const overlayStyles = css<{ radius?: number }>`
 type AnchorProps = {
   href: string;
   radius?: number;
+  css?: Object;
 } & AnchorHTMLAttributes<HTMLAnchorElement>;
 
 const StyledAnchor = styled.a<
@@ -51,6 +52,7 @@ const StyledAnchor = styled.a<
 
 type ButtonProps = {
   radius?: number;
+  css?: Object;
 } & ButtonHTMLAttributes<HTMLButtonElement>;
 
 const StyledButton = styled.button<
diff --git a/packages/components/src/components/Link/index.tsx b/packages/components/src/components/Link/index.tsx
index 95cec7a8ee1..f956a079a9f 100644
--- a/packages/components/src/components/Link/index.tsx
+++ b/packages/components/src/components/Link/index.tsx
@@ -2,9 +2,11 @@ import React from 'react';
 import styled from 'styled-components';
 import css from '@styled-system/css';
 import { Text, ITextProps } from '../Text';
+import { IElementProps } from '../Element';
 
 type LinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> &
   React.AnchorHTMLAttributes<HTMLSpanElement> &
+  IElementProps &
   ITextProps & {
     as?: any;
     to?: string;
diff --git a/packages/components/src/components/Menu/index.tsx b/packages/components/src/components/Menu/index.tsx
index 7f90e9ff208..26092c603dc 100644
--- a/packages/components/src/components/Menu/index.tsx
+++ b/packages/components/src/components/Menu/index.tsx
@@ -35,7 +35,7 @@ export const MenuStyles = createGlobalStyle(
       fontWeight: 400,
     },
     '[data-reach-menu] > div': {
-      borderRadius: 4,
+      borderRadius: '4px',
     },
     '[data-reach-menu][hidden],[data-reach-menu-popover][hidden]': {
       display: 'none',
@@ -53,7 +53,7 @@ export const MenuStyles = createGlobalStyle(
       padding: '4px 0',
     },
     '[data-reach-menu-item][data-component=MenuItem], [data-reach-menu-item][data-component=MenuLink]': {
-      fontSize: 2,
+      fontSize: '13.6px',
       paddingY: 2,
       paddingX: 3,
       cursor: 'default',
@@ -71,10 +71,9 @@ export const MenuStyles = createGlobalStyle(
         opacity: 0.5,
         cursor: 'not-allowed',
       },
-      // override reach ui styles
-      font: 'inherit',
     },
     '[data-component="MenuItem"][disabled]': {
+      fontSize: '13.6px',
       paddingY: 2,
       paddingX: 3,
       cursor: 'not-allowed',
@@ -254,6 +253,7 @@ const MenuIconButton = props => (
 interface MenuListProps {
   children: any;
   style?: React.CSSProperties;
+  css?: Object;
 }
 
 const MenuList = React.forwardRef<HTMLDivElement, MenuListProps>(