diff --git a/client/components/RootPage.jsx b/client/components/RootPage.jsx
index ca6a4723cd..cece68f39e 100644
--- a/client/components/RootPage.jsx
+++ b/client/components/RootPage.jsx
@@ -4,10 +4,16 @@ import { prop } from '../theme';
 const RootPage = styled.div`
   min-height: 100%;
   display: flex;
+  justify-content: start;
   flex-direction: column;
   color: ${prop('primaryTextColor')};
   background-color: ${prop('backgroundColor')};
   height: ${({ fixedHeight }) => fixedHeight || 'initial'};
+
+  @media (max-width: 770px) {
+    height: 100%;
+    overflow: hidden;
+  }
 `;
 
 export default RootPage;
diff --git a/client/images/plus-icon.svg b/client/images/plus-icon.svg
index da91915a19..eb6cafb6c6 100644
--- a/client/images/plus-icon.svg
+++ b/client/images/plus-icon.svg
@@ -1,12 +1,3 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="IDEs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.539999962">
-        <g id="p5js-IDE-styles-foundation-pt-2" transform="translate(-558.000000, -1166.000000)" fill="#333333">
-            <g id="Icons" transform="translate(16.000000, 1063.000000)">
-                <g id="close-copy-3" transform="translate(499.500000, 110.000000) scale(1, -1) translate(-499.500000, -110.000000) translate(438.000000, 98.000000)">
-                    <polygon id="close-shape" transform="translate(113.000000, 10.000000) rotate(45.000000) translate(-113.000000, -10.000000) " points="120 15.6 118.6 17 113 11.4 107.4 17 106 15.6 111.6 10 106 4.4 107.4 3 113 8.6 118.6 3 120 4.4 114.4 10"></polygon>
-                </g>
-            </g>
-        </g>
-    </g>
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.3197 27.8794H14.6798L14.6798 17.3199L4.12036 17.3199L4.12036 14.6801L14.6798 14.6801L14.6798 4.12059H17.3197L17.3197 14.6801L27.8792 14.6801L27.8792 17.3199L17.3197 17.3199L17.3197 27.8794Z" fill="#666666"/>
 </svg>
diff --git a/client/index.integration.test.jsx b/client/index.integration.test.jsx
index d76345293d..7c237bcb56 100644
--- a/client/index.integration.test.jsx
+++ b/client/index.integration.test.jsx
@@ -59,6 +59,7 @@ describe('index.jsx integration', () => {
   // spy on this function and wait for it to be called before making assertions
   const spy = jest.spyOn(Actions, 'getUser');
 
+  window.process.env.PREVIEW_URL = 'http://localhost:8002';
   beforeEach(async () => {
     act(() => {
       subject();
diff --git a/client/modules/IDE/components/Editor.unit.test.jsx b/client/modules/IDE/components/Editor/Editor.unit.test.jsx
similarity index 75%
rename from client/modules/IDE/components/Editor.unit.test.jsx
rename to client/modules/IDE/components/Editor/Editor.unit.test.jsx
index 073a357fdb..1af90615b0 100644
--- a/client/modules/IDE/components/Editor.unit.test.jsx
+++ b/client/modules/IDE/components/Editor/Editor.unit.test.jsx
@@ -2,11 +2,11 @@ import React from 'react';
 import configureStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import { act } from 'react-dom/test-utils';
-import Editor from './Editor';
-import { reduxRender } from '../../../test-utils';
-import { initialTestState } from '../../../testData/testReduxStore';
+import Editor from '.';
+import { reduxRender } from '../../../../test-utils';
+import { initialTestState } from '../../../../testData/testReduxStore';
 
-jest.mock('../../../i18n');
+jest.mock('../../../../i18n');
 
 describe('<Editor />', () => {
   const mockStore = configureStore([thunk]);
diff --git a/client/modules/IDE/components/Editor/MobileEditor.jsx b/client/modules/IDE/components/Editor/MobileEditor.jsx
new file mode 100644
index 0000000000..c3e56afd79
--- /dev/null
+++ b/client/modules/IDE/components/Editor/MobileEditor.jsx
@@ -0,0 +1,79 @@
+import styled from 'styled-components';
+import { prop, remSize } from '../../../../theme';
+
+export const EditorContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding-bottom: 5rem;
+  transform: ${(props) =>
+    props.expanded ? 'translateX(50%)' : 'translateX(0)'};
+
+  > header {
+    display: flex;
+    ${prop('MobilePanel.secondary')}
+    > span {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: ${remSize(10)};
+      font-weight: bold;
+      ${prop('MobilePanel.default')}
+    }
+  }
+
+  > section {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100vw;
+    overflow-y: auto;
+  }
+`;
+
+export const EditorHolder = styled.div`
+  min-height: 100%;
+`;
+
+export const PreviewWrapper = styled.div`
+  display: ${(props) => (props.show ? 'block' : 'none')};
+  position: relative;
+  height: 100vh;
+  min-width: 100%;
+
+  .preview-console {
+    z-index: 1;
+  }
+`;
+
+export const EditorSidebarWrapper = styled.div`
+  display: ${(props) => (props.show ? 'block' : 'none')};
+  height: 100%;
+  position: relative;
+`;
+
+export const FileDrawer = styled.div`
+  height: 100%;
+  width: 50vw;
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  /* z-index: 10; */
+  background: ${prop('backgroundColor')};
+
+  > button[data-backdrop='filedrawer'] {
+    position: absolute;
+    background-color: #0005;
+    height: 100%;
+    width: 100%;
+    z-index: 2;
+    transform: translateX(100%);
+  }
+
+  @media (min-width: 770px) {
+    width: 100%;
+    > button[data-backdrop='filedrawer'] {
+      display: none;
+    }
+  }
+`;
diff --git a/client/modules/IDE/components/Editor.jsx b/client/modules/IDE/components/Editor/index.jsx
similarity index 80%
rename from client/modules/IDE/components/Editor.jsx
rename to client/modules/IDE/components/Editor/index.jsx
index d3658d5290..35e47248f8 100644
--- a/client/modules/IDE/components/Editor.jsx
+++ b/client/modules/IDE/components/Editor/index.jsx
@@ -1,3 +1,5 @@
+// TODO: convert to functional component
+
 import PropTypes from 'prop-types';
 import React from 'react';
 import CodeMirror from 'codemirror';
@@ -40,32 +42,35 @@ import classNames from 'classnames';
 import { debounce } from 'lodash';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import '../../../utils/htmlmixed';
-import '../../../utils/p5-javascript';
-import Timer from '../components/Timer';
-import EditorAccessibility from '../components/EditorAccessibility';
-import { selectActiveFile } from '../selectors/files';
-import AssetPreview from './AssetPreview';
-import { metaKey } from '../../../utils/metaKey';
-import './show-hint';
-import * as hinter from '../../../utils/p5-hinter';
-
-import '../../../utils/codemirror-search';
-
-import beepUrl from '../../../sounds/audioAlert.mp3';
-import UnsavedChangesDotIcon from '../../../images/unsaved-changes-dot.svg';
-import RightArrowIcon from '../../../images/right-arrow.svg';
-import LeftArrowIcon from '../../../images/left-arrow.svg';
-import { getHTMLFile } from '../reducers/files';
-
-import * as FileActions from '../actions/files';
-import * as IDEActions from '../actions/ide';
-import * as ProjectActions from '../actions/project';
-import * as EditorAccessibilityActions from '../actions/editorAccessibility';
-import * as PreferencesActions from '../actions/preferences';
-import * as UserActions from '../../User/actions';
-import * as ToastActions from '../actions/toast';
-import * as ConsoleActions from '../actions/console';
+import MediaQuery from 'react-responsive';
+import '../../../../utils/htmlmixed';
+import '../../../../utils/p5-javascript';
+import { metaKey } from '../../../../utils/metaKey';
+import '../show-hint';
+import * as hinter from '../../../../utils/p5-hinter';
+import '../../../../utils/codemirror-search';
+
+import beepUrl from '../../../../sounds/audioAlert.mp3';
+import RightArrowIcon from '../../../../images/right-arrow.svg';
+import LeftArrowIcon from '../../../../images/left-arrow.svg';
+import { getHTMLFile } from '../../reducers/files';
+import { selectActiveFile } from '../../selectors/files';
+
+import * as FileActions from '../../actions/files';
+import * as IDEActions from '../../actions/ide';
+import * as ProjectActions from '../../actions/project';
+import * as EditorAccessibilityActions from '../../actions/editorAccessibility';
+import * as PreferencesActions from '../../actions/preferences';
+import * as UserActions from '../../../User/actions';
+import * as ConsoleActions from '../../actions/console';
+
+import AssetPreview from '../AssetPreview';
+import Timer from '../Timer';
+import EditorAccessibility from '../EditorAccessibility';
+import UnsavedChangesIndicator from '../UnsavedChangesIndicator';
+import { EditorContainer, EditorHolder } from './MobileEditor';
+import { FolderIcon } from '../../../../common/icons';
+import IconButton from '../../../../components/mobile/IconButton';
 
 emmet(CodeMirror);
 
@@ -98,7 +103,7 @@ class Editor extends React.Component {
 
   componentDidMount() {
     this.beep = new Audio(beepUrl);
-    this.widgets = [];
+    // this.widgets = [];
     this._cm = CodeMirror(this.codemirrorContainer, {
       theme: `p5-${this.props.theme}`,
       lineNumbers: this.props.lineNumbers,
@@ -306,6 +311,13 @@ class Editor extends React.Component {
         this._cm.removeLineClass(i, 'background', 'line-runtime-error');
       }
     }
+
+    this.props.provideController({
+      tidyCode: this.tidyCode,
+      showFind: this.showFind,
+      showReplace: this.showReplace,
+      getContent: this.getContent
+    });
   }
 
   componentWillUnmount() {
@@ -496,52 +508,80 @@ class Editor extends React.Component {
     });
 
     return (
-      <section className={editorSectionClass}>
-        <header className="editor__header">
-          <button
-            aria-label={this.props.t('Editor.OpenSketchARIA')}
-            className="sidebar__contract"
-            onClick={() => {
-              this.props.collapseSidebar();
-              this.props.closeProjectOptions();
-            }}
-          >
-            <LeftArrowIcon focusable="false" aria-hidden="true" />
-          </button>
-          <button
-            aria-label={this.props.t('Editor.CloseSketchARIA')}
-            className="sidebar__expand"
-            onClick={this.props.expandSidebar}
-          >
-            <RightArrowIcon focusable="false" aria-hidden="true" />
-          </button>
-          <div className="editor__file-name">
-            <span>
-              {this.props.file.name}
-              <span className="editor__unsaved-changes">
-                {this.props.unsavedChanges ? (
-                  <UnsavedChangesDotIcon
-                    role="img"
-                    aria-label={this.props.t('Editor.UnsavedChangesARIA')}
-                    focusable="false"
+      <MediaQuery minWidth={770}>
+        {(matches) =>
+          matches ? (
+            <section className={editorSectionClass}>
+              <header className="editor__header">
+                <button
+                  aria-label={this.props.t('Editor.OpenSketchARIA')}
+                  className="sidebar__contract"
+                  onClick={() => {
+                    this.props.collapseSidebar();
+                    this.props.closeProjectOptions();
+                  }}
+                >
+                  <LeftArrowIcon focusable="false" aria-hidden="true" />
+                </button>
+                <button
+                  aria-label={this.props.t('Editor.CloseSketchARIA')}
+                  className="sidebar__expand"
+                  onClick={this.props.expandSidebar}
+                >
+                  <RightArrowIcon focusable="false" aria-hidden="true" />
+                </button>
+                <div className="editor__file-name">
+                  <span>
+                    {this.props.file.name}
+                    <UnsavedChangesIndicator />
+                  </span>
+                  <Timer />
+                </div>
+              </header>
+              <article
+                ref={(element) => {
+                  this.codemirrorContainer = element;
+                }}
+                className={editorHolderClass}
+              />
+              {this.props.file.url ? (
+                <AssetPreview
+                  url={this.props.file.url}
+                  name={this.props.file.name}
+                />
+              ) : null}
+              <EditorAccessibility lintMessages={this.props.lintMessages} />
+            </section>
+          ) : (
+            <EditorContainer expanded={this.props.isExpanded}>
+              <header>
+                <IconButton
+                  onClick={this.props.expandSidebar}
+                  icon={FolderIcon}
+                />
+                <span>
+                  {this.props.file.name}
+                  <UnsavedChangesIndicator />
+                </span>
+              </header>
+              <section>
+                <EditorHolder
+                  ref={(element) => {
+                    this.codemirrorContainer = element;
+                  }}
+                />
+                {this.props.file.url ? (
+                  <AssetPreview
+                    url={this.props.file.url}
+                    name={this.props.file.name}
                   />
                 ) : null}
-              </span>
-            </span>
-            <Timer />
-          </div>
-        </header>
-        <article
-          ref={(element) => {
-            this.codemirrorContainer = element;
-          }}
-          className={editorHolderClass}
-        />
-        {this.props.file.url ? (
-          <AssetPreview url={this.props.file.url} name={this.props.file.name} />
-        ) : null}
-        <EditorAccessibility lintMessages={this.props.lintMessages} />
-      </section>
+                <EditorAccessibility lintMessages={this.props.lintMessages} />
+              </section>
+            </EditorContainer>
+          )
+        }
+      </MediaQuery>
     );
   }
 }
@@ -613,7 +653,6 @@ function mapStateToProps(state) {
     editorAccessibility: state.editorAccessibility,
     user: state.user,
     project: state.project,
-    toast: state.toast,
     consoleEvents: state.console,
 
     ...state.preferences,
@@ -634,7 +673,6 @@ function mapDispatchToProps(dispatch) {
       IDEActions,
       PreferencesActions,
       UserActions,
-      ToastActions,
       ConsoleActions
     ),
     dispatch
diff --git a/client/modules/IDE/components/Header/MobileNav.jsx b/client/modules/IDE/components/Header/MobileNav.jsx
index 5de520a5ae..3c91f1e699 100644
--- a/client/modules/IDE/components/Header/MobileNav.jsx
+++ b/client/modules/IDE/components/Header/MobileNav.jsx
@@ -224,7 +224,7 @@ const MobileNav = () => {
     }
   }
 
-  const title = useMemo(resolveTitle, [pageName]);
+  const title = useMemo(resolveTitle, [pageName, project.name]);
 
   const Logo = AsteriskIcon;
   return (
@@ -261,7 +261,7 @@ const MobileNav = () => {
               </Link>
             </div>
           )}
-          {title === project.name ? (
+          {pageName === 'home' ? (
             <MoreMenu />
           ) : (
             <div>
diff --git a/client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap b/client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap
index 00aea970f4..3b55bfae67 100644
--- a/client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap
+++ b/client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap
@@ -320,7 +320,7 @@ exports[`Nav renders dashboard version for mobile 1`] = `
             >
               <test-file-stub
                 aria-hidden="true"
-                classname="sc-bkbkJK caOeqb"
+                classname="sc-fujyAs cSTVlM"
                 focusable="false"
               />
             </button>
@@ -336,7 +336,7 @@ exports[`Nav renders dashboard version for mobile 1`] = `
           >
             <test-file-stub
               aria-hidden="true"
-              classname="sc-dlMDgC dNinKf"
+              classname="sc-iqAclL iOZiVo"
               focusable="false"
             />
           </button>
@@ -947,7 +947,7 @@ exports[`Nav renders editor version for mobile 1`] = `
             >
               <test-file-stub
                 aria-hidden="true"
-                classname="sc-bkbkJK caOeqb"
+                classname="sc-fujyAs cSTVlM"
                 focusable="false"
               />
             </button>
@@ -963,7 +963,7 @@ exports[`Nav renders editor version for mobile 1`] = `
           >
             <test-file-stub
               aria-hidden="true"
-              classname="sc-dlMDgC dNinKf"
+              classname="sc-iqAclL iOZiVo"
               focusable="false"
             />
           </button>
diff --git a/client/modules/IDE/components/Sidebar.jsx b/client/modules/IDE/components/Sidebar.jsx
index b28a2fba4d..c01815d339 100644
--- a/client/modules/IDE/components/Sidebar.jsx
+++ b/client/modules/IDE/components/Sidebar.jsx
@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import {
   closeProjectOptions,
+  collapseSidebar,
   newFile,
   newFolder,
   openProjectOptions,
@@ -13,8 +14,8 @@ import { selectRootFile } from '../selectors/files';
 import { getAuthenticated, selectCanEditSketch } from '../selectors/users';
 
 import ConnectedFileNode from './FileNode';
-
-import DownArrowIcon from '../../../images/down-filled-triangle.svg';
+import { PlusIcon } from '../../../common/icons';
+import { FileDrawer } from './Editor/MobileEditor';
 
 // TODO: use a generic Dropdown UI component
 
@@ -22,18 +23,20 @@ export default function SideBar() {
   const { t } = useTranslation();
   const dispatch = useDispatch();
 
-  const [isFocused, setIsFocused] = useState(false);
-
   const rootFile = useSelector(selectRootFile);
+  const ide = useSelector((state) => state.ide);
   const projectOptionsVisible = useSelector(
     (state) => state.ide.projectOptionsVisible
   );
   const isExpanded = useSelector((state) => state.ide.sidebarIsExpanded);
   const canEditProject = useSelector(selectCanEditSketch);
-  const isAuthenticated = useSelector(getAuthenticated);
 
   const sidebarOptionsRef = useRef(null);
 
+  const [isFocused, setIsFocused] = useState(false);
+
+  const isAuthenticated = useSelector(getAuthenticated);
+
   const onBlurComponent = () => {
     setIsFocused(false);
     setTimeout(() => {
@@ -65,69 +68,85 @@ export default function SideBar() {
   });
 
   return (
-    <section className={sidebarClass}>
-      <header className="sidebar__header" onContextMenu={toggleProjectOptions}>
-        <h3 className="sidebar__title">
-          <span>{t('Sidebar.Title')}</span>
-        </h3>
-        <div className="sidebar__icons">
-          <button
-            aria-label={t('Sidebar.ToggleARIA')}
-            className="sidebar__add"
-            tabIndex="0"
-            ref={sidebarOptionsRef}
-            onClick={toggleProjectOptions}
-            onBlur={onBlurComponent}
-            onFocus={onFocusComponent}
-          >
-            <DownArrowIcon focusable="false" aria-hidden="true" />
-          </button>
-          <ul className="sidebar__project-options">
-            <li>
-              <button
-                aria-label={t('Sidebar.AddFolderARIA')}
-                onClick={() => {
-                  dispatch(newFolder(rootFile.id));
-                  setTimeout(() => dispatch(closeProjectOptions()), 0);
-                }}
-                onBlur={onBlurComponent}
-                onFocus={onFocusComponent}
-              >
-                {t('Sidebar.AddFolder')}
-              </button>
-            </li>
-            <li>
-              <button
-                aria-label={t('Sidebar.AddFileARIA')}
-                onClick={() => {
-                  dispatch(newFile(rootFile.id));
-                  setTimeout(() => dispatch(closeProjectOptions()), 0);
-                }}
-                onBlur={onBlurComponent}
-                onFocus={onFocusComponent}
-              >
-                {t('Sidebar.AddFile')}
-              </button>
-            </li>
-            {isAuthenticated && (
+    <FileDrawer>
+      {ide.sidebarIsExpanded && (
+        <button
+          data-backdrop="filedrawer"
+          onClick={() => {
+            dispatch(collapseSidebar());
+            dispatch(closeProjectOptions());
+          }}
+        >
+          {' '}
+        </button>
+      )}
+      <section className={sidebarClass}>
+        <header
+          className="sidebar__header"
+          onContextMenu={toggleProjectOptions}
+        >
+          <h3 className="sidebar__title">
+            <span>{t('Sidebar.Title')}</span>
+          </h3>
+          <div className="sidebar__icons">
+            <button
+              aria-label={t('Sidebar.ToggleARIA')}
+              className="sidebar__add"
+              tabIndex="0"
+              ref={sidebarOptionsRef}
+              onClick={toggleProjectOptions}
+              onBlur={onBlurComponent}
+              onFocus={onFocusComponent}
+            >
+              <PlusIcon focusable="false" aria-hidden="true" />
+            </button>
+            <ul className="sidebar__project-options">
+              <li>
+                <button
+                  aria-label={t('Sidebar.AddFolderARIA')}
+                  onClick={() => {
+                    dispatch(newFolder(rootFile.id));
+                    setTimeout(() => dispatch(closeProjectOptions()), 0);
+                  }}
+                  onBlur={onBlurComponent}
+                  onFocus={onFocusComponent}
+                >
+                  {t('Sidebar.AddFolder')}
+                </button>
+              </li>
               <li>
                 <button
-                  aria-label={t('Sidebar.UploadFileARIA')}
+                  aria-label={t('Sidebar.AddFileARIA')}
                   onClick={() => {
-                    dispatch(openUploadFileModal(rootFile.id));
+                    dispatch(newFile(rootFile.id));
                     setTimeout(() => dispatch(closeProjectOptions()), 0);
                   }}
                   onBlur={onBlurComponent}
                   onFocus={onFocusComponent}
                 >
-                  {t('Sidebar.UploadFile')}
+                  {t('Sidebar.AddFile')}
                 </button>
               </li>
-            )}
-          </ul>
-        </div>
-      </header>
-      <ConnectedFileNode id={rootFile.id} canEdit={canEditProject} />
-    </section>
+              {isAuthenticated && (
+                <li>
+                  <button
+                    aria-label={t('Sidebar.UploadFileARIA')}
+                    onClick={() => {
+                      dispatch(openUploadFileModal(rootFile.id));
+                      setTimeout(() => dispatch(closeProjectOptions()), 0);
+                    }}
+                    onBlur={onBlurComponent}
+                    onFocus={onFocusComponent}
+                  >
+                    {t('Sidebar.UploadFile')}
+                  </button>
+                </li>
+              )}
+            </ul>
+          </div>
+        </header>
+        <ConnectedFileNode id={rootFile.id} canEdit={canEditProject} />
+      </section>
+    </FileDrawer>
   );
 }
diff --git a/client/modules/IDE/components/UnsavedChangesIndicator.jsx b/client/modules/IDE/components/UnsavedChangesIndicator.jsx
new file mode 100644
index 0000000000..6bd0c11486
--- /dev/null
+++ b/client/modules/IDE/components/UnsavedChangesIndicator.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
+import UnsavedChangesDotIcon from '../../../images/unsaved-changes-dot.svg';
+
+export default function UnsavedChangesIndicator() {
+  const { t } = useTranslation();
+  const hasUnsavedChanges = useSelector((state) => state.ide.unsavedChanges);
+
+  if (!hasUnsavedChanges) {
+    return null;
+  }
+
+  return (
+    <span className="editor__unsaved-changes">
+      <UnsavedChangesDotIcon
+        role="img"
+        aria-label={t('Editor.UnsavedChangesARIA')}
+        focusable="false"
+      />
+    </span>
+  );
+}
diff --git a/client/modules/IDE/hooks/useKeyDownHandlers.js b/client/modules/IDE/hooks/useKeyDownHandlers.js
index 6d232202e8..3f5c1941ad 100644
--- a/client/modules/IDE/hooks/useKeyDownHandlers.js
+++ b/client/modules/IDE/hooks/useKeyDownHandlers.js
@@ -20,7 +20,7 @@ export default function useKeyDownHandlers(keyHandlers) {
   const handlers = useRef(keyHandlers);
 
   useEffect(() => {
-    handlers.current = mapKeys(keyHandlers, (value, key) => key.toLowerCase());
+    handlers.current = mapKeys(keyHandlers, (value, key) => key?.toLowerCase());
   }, [keyHandlers]);
 
   /**
@@ -37,7 +37,7 @@ export default function useKeyDownHandlers(keyHandlers) {
     } else if (isCtrl) {
       handlers.current[`ctrl-${e.key.toLowerCase()}`]?.(e);
     }
-    handlers.current[e.key.toLowerCase()]?.(e);
+    handlers.current[e.key?.toLowerCase()]?.(e);
   }, []);
 
   useEffect(() => {
diff --git a/client/modules/IDE/pages/IDEView.jsx b/client/modules/IDE/pages/IDEView.jsx
index 276cb52de0..8e37441633 100644
--- a/client/modules/IDE/pages/IDEView.jsx
+++ b/client/modules/IDE/pages/IDEView.jsx
@@ -1,34 +1,36 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { useLocation, Prompt } from 'react-router-dom';
-import { bindActionCreators } from 'redux';
-import { connect, useSelector } from 'react-redux';
-import { useTranslation, withTranslation } from 'react-i18next';
+import React, { useEffect, useRef, useState } from 'react';
+import { useLocation, Prompt, useParams } from 'react-router-dom';
+import { useDispatch, useSelector } from 'react-redux';
+import { useTranslation } from 'react-i18next';
 import { Helmet } from 'react-helmet';
 import SplitPane from 'react-split-pane';
-import Editor from '../components/Editor';
-import IDEOverlays from '../components/IDEOverlays';
+import MediaQuery from 'react-responsive';
 import IDEKeyHandlers from '../components/IDEKeyHandlers';
 import Sidebar from '../components/Sidebar';
 import PreviewFrame from '../components/PreviewFrame';
 import Console from '../components/Console';
 import Toast from '../components/Toast';
-import * as FileActions from '../actions/files';
-import * as IDEActions from '../actions/ide';
-import * as ProjectActions from '../actions/project';
-import * as EditorAccessibilityActions from '../actions/editorAccessibility';
-import * as PreferencesActions from '../actions/preferences';
-import * as UserActions from '../../User/actions';
-import * as ConsoleActions from '../actions/console';
-import { getHTMLFile } from '../reducers/files';
-import { selectActiveFile } from '../selectors/files';
+import { updateFileContent } from '../actions/files';
+import { stopSketch } from '../actions/ide';
+import {
+  autosaveProject,
+  clearPersistedState,
+  getProject
+} from '../actions/project';
 import { getIsUserOwner } from '../selectors/users';
 import RootPage from '../../../components/RootPage';
 import Header from '../components/Header';
+import FloatingActionButton from '../components/FloatingActionButton';
+import Editor from '../components/Editor';
+import {
+  EditorSidebarWrapper,
+  PreviewWrapper
+} from '../components/Editor/MobileEditor';
+import IDEOverlays from '../components/IDEOverlays';
 
-function getTitle(props) {
-  const { id } = props.project;
-  return id ? `p5.js Web Editor | ${props.project.name}` : 'p5.js Web Editor';
+function getTitle(project) {
+  const { id } = project;
+  return id ? `p5.js Web Editor | ${project.name}` : 'p5.js Web Editor';
 }
 
 function isAuth(pathname) {
@@ -66,296 +68,179 @@ function WarnIfUnsavedChanges() {
 
 export const CmControllerContext = React.createContext({});
 
-class IDEView extends React.Component {
-  constructor(props) {
-    super(props);
+const IDEView = () => {
+  const ide = useSelector((state) => state.ide);
+  const preferences = useSelector((state) => state.preferences);
+  const project = useSelector((state) => state.project);
+  const isUserOwner = useSelector(getIsUserOwner);
+  const dispatch = useDispatch();
+  const { t } = useTranslation();
 
-    this.state = {
-      consoleSize: props.ide.consoleIsExpanded ? 150 : 29,
-      sidebarSize: props.ide.sidebarIsExpanded ? 160 : 20
-    };
-  }
+  const params = useParams();
 
-  componentDidMount() {
-    // If page doesn't reload after Sign In then we need
-    // to force cleared state to be cleared
-    this.props.clearPersistedState();
+  const [consoleSize, setConsoleSize] = useState(150);
+  const [sidebarSize, setSidebarSize] = useState(160);
+  const [isOverlayVisible, setIsOverlayVisible] = useState(true);
 
-    this.props.stopSketch();
-    if (this.props.params.project_id) {
-      const { project_id: id, username } = this.props.params;
-      if (id !== this.props.project.id) {
-        this.props.getProject(id, username);
-      }
-    }
+  const cmRef = useRef({});
 
-    // window.onbeforeunload = this.handleUnsavedChanges;
-    window.addEventListener('beforeunload', this.handleBeforeUnload);
+  const autosaveIntervalRef = useRef(null);
 
-    this.autosaveInterval = null;
-  }
+  const syncFileContent = () => {
+    const file = cmRef.current.getContent();
+    dispatch(updateFileContent(file.id, file.content));
+  };
 
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.location !== this.props.location) {
-      this.props.setPreviousPath(this.props.location.pathname);
-    }
-    if (this.props.ide.sidebarIsExpanded !== nextProps.ide.sidebarIsExpanded) {
-      this.setState({
-        sidebarSize: nextProps.ide.sidebarIsExpanded ? 160 : 20
-      });
-    }
-  }
+  useEffect(() => {
+    dispatch(clearPersistedState());
 
-  componentWillUpdate(nextProps) {
-    if (nextProps.params.project_id && !this.props.params.project_id) {
-      if (nextProps.params.project_id !== nextProps.project.id) {
-        this.props.getProject(nextProps.params.project_id);
-      }
+    dispatch(stopSketch());
+  }, [dispatch]);
+
+  useEffect(() => {
+    const { project_id: id, username } = params;
+    if (id && project.id !== id) {
+      dispatch(getProject(id, username));
     }
-  }
+  }, [dispatch, params, project.id]);
 
-  componentDidUpdate(prevProps) {
-    if (this.props.isUserOwner && this.props.project.id) {
-      if (
-        this.props.preferences.autosave &&
-        this.props.ide.unsavedChanges &&
-        !this.props.ide.justOpenedProject
-      ) {
-        if (
-          this.props.selectedFile.name === prevProps.selectedFile.name &&
-          this.props.selectedFile.content !== prevProps.selectedFile.content
-        ) {
-          if (this.autosaveInterval) {
-            clearTimeout(this.autosaveInterval);
-          }
-          this.autosaveInterval = setTimeout(this.props.autosaveProject, 20000);
-        }
-      } else if (this.autosaveInterval && !this.props.preferences.autosave) {
-        clearTimeout(this.autosaveInterval);
-        this.autosaveInterval = null;
-      }
-    } else if (this.autosaveInterval) {
-      clearTimeout(this.autosaveInterval);
-      this.autosaveInterval = null;
+  const autosaveAllowed = isUserOwner && project.id && preferences.autosave;
+  const shouldAutosave = autosaveAllowed && ide.unsavedChanges;
+
+  // For autosave - send to API after 5 seconds without changes
+  useEffect(() => {
+    const handleAutosave = () => {
+      dispatch(autosaveProject());
+    };
+
+    if (autosaveIntervalRef.current) {
+      clearTimeout(autosaveIntervalRef.current);
     }
-  }
-  componentWillUnmount() {
-    clearTimeout(this.autosaveInterval);
-    this.autosaveInterval = null;
-  }
 
-  handleBeforeUnload = (e) => {
-    const confirmationMessage = this.props.t('Nav.WarningUnsavedChanges');
-    if (this.props.ide.unsavedChanges) {
-      (e || window.event).returnValue = confirmationMessage;
-      return confirmationMessage;
+    if (shouldAutosave) {
+      autosaveIntervalRef.current = setTimeout(handleAutosave, 5000);
     }
-    return null;
-  };
 
-  syncFileContent = () => {
-    const file = this.cmController.getContent();
-    this.props.updateFileContent(file.id, file.content);
-  };
+    return () => {
+      if (autosaveIntervalRef.current) {
+        clearTimeout(autosaveIntervalRef.current);
+      }
+    };
+  }, [shouldAutosave, dispatch]);
 
-  render() {
-    return (
-      <RootPage>
-        <Helmet>
-          <title>{getTitle(this.props)}</title>
-        </Helmet>
-        <IDEKeyHandlers getContent={() => this.cmController.getContent()} />
-        <WarnIfUnsavedChanges currentLocation={this.props.location} />
-        <Toast />
-        <CmControllerContext.Provider value={{ current: this.cmController }}>
-          <Header
-            syncFileContent={this.syncFileContent}
-            key={this.props.project.id}
-          />
-        </CmControllerContext.Provider>
-        <main className="editor-preview-container">
-          <SplitPane
-            split="vertical"
-            size={this.state.sidebarSize}
-            onChange={(size) => this.setState({ sidebarSize: size })}
-            onDragFinished={this._handleSidebarPaneOnDragFinished}
-            allowResize={this.props.ide.sidebarIsExpanded}
-            minSize={125}
-          >
-            <Sidebar />
-            <SplitPane
-              split="vertical"
-              defaultSize="50%"
-              onChange={() => {
-                this.overlay.style.display = 'block';
-              }}
-              onDragFinished={() => {
-                this.overlay.style.display = 'none';
-              }}
-              resizerStyle={{
-                borderLeftWidth: '2px',
-                borderRightWidth: '2px',
-                width: '2px',
-                margin: '0px 0px'
-              }}
-            >
+  return (
+    <RootPage>
+      <Helmet>
+        <title>{getTitle(project)}</title>
+      </Helmet>
+      <IDEKeyHandlers getContent={() => cmRef.current?.getContent()} />
+      <WarnIfUnsavedChanges />
+      <Toast />
+      <CmControllerContext.Provider value={cmRef}>
+        <Header syncFileContent={syncFileContent} />
+      </CmControllerContext.Provider>
+      <MediaQuery minWidth={770}>
+        {(matches) =>
+          matches ? (
+            <main className="editor-preview-container">
               <SplitPane
-                split="horizontal"
-                primary="second"
-                size={
-                  this.props.ide.consoleIsExpanded ? this.state.consoleSize : 29
-                }
-                minSize={29}
-                onChange={(size) => this.setState({ consoleSize: size })}
-                allowResize={this.props.ide.consoleIsExpanded}
-                className="editor-preview-subpanel"
+                split="vertical"
+                size={ide.sidebarIsExpanded ? sidebarSize : 20}
+                onChange={(size) => {
+                  setSidebarSize(size);
+                }}
+                allowResize={ide.sidebarIsExpanded}
+                minSize={125}
               >
+                <Sidebar />
+                <SplitPane
+                  split="vertical"
+                  defaultSize="50%"
+                  onChange={() => {
+                    setIsOverlayVisible(true);
+                  }}
+                  onDragFinished={() => {
+                    // overlayRef.current.style.display = 'none';
+                    setIsOverlayVisible(false);
+                  }}
+                  resizerStyle={{
+                    borderLeftWidth: '2px',
+                    borderRightWidth: '2px',
+                    width: '2px',
+                    margin: '0px 0px'
+                  }}
+                >
+                  <SplitPane
+                    split="horizontal"
+                    primary="second"
+                    size={ide.consoleIsExpanded ? consoleSize : 29}
+                    minSize={29}
+                    onChange={(size) => setConsoleSize(size)}
+                    allowResize={ide.consoleIsExpanded}
+                    className="editor-preview-subpanel"
+                  >
+                    <Editor
+                      provideController={(ctl) => {
+                        cmRef.current = ctl;
+                      }}
+                    />
+                    <Console />
+                  </SplitPane>
+                  <section className="preview-frame-holder">
+                    <header className="preview-frame__header">
+                      <h2 className="preview-frame__title">
+                        {t('Toolbar.Preview')}
+                      </h2>
+                    </header>
+                    <div className="preview-frame__content">
+                      <div
+                        className="preview-frame-overlay"
+                        style={{ display: isOverlayVisible ? 'block' : 'none' }}
+                      />
+                      <div>
+                        {((preferences.textOutput || preferences.gridOutput) &&
+                          ide.isPlaying) ||
+                          ide.isAccessibleOutputPlaying}
+                      </div>
+                      <PreviewFrame cmController={cmRef.current} />
+                    </div>
+                  </section>
+                </SplitPane>
+              </SplitPane>
+            </main>
+          ) : (
+            <>
+              <FloatingActionButton syncFileContent={syncFileContent} />
+              <PreviewWrapper show={ide.isPlaying}>
+                <SplitPane
+                  style={{ position: 'static' }}
+                  split="horizontal"
+                  primary="second"
+                  minSize={200}
+                >
+                  <PreviewFrame
+                    fullView
+                    hide={!ide.isPlaying}
+                    cmController={cmRef.current}
+                  />
+                  <Console />
+                </SplitPane>
+              </PreviewWrapper>
+              <EditorSidebarWrapper show={!ide.isPlaying}>
+                <Sidebar />
                 <Editor
                   provideController={(ctl) => {
-                    this.cmController = ctl;
+                    cmRef.current = ctl;
                   }}
                 />
-                <Console />
-              </SplitPane>
-              <section className="preview-frame-holder">
-                <header className="preview-frame__header">
-                  <h2 className="preview-frame__title">
-                    {this.props.t('Toolbar.Preview')}
-                  </h2>
-                </header>
-                <div className="preview-frame__content">
-                  <div
-                    className="preview-frame-overlay"
-                    ref={(element) => {
-                      this.overlay = element;
-                    }}
-                  />
-                  <div>
-                    {((this.props.preferences.textOutput ||
-                      this.props.preferences.gridOutput) &&
-                      this.props.ide.isPlaying) ||
-                      this.props.ide.isAccessibleOutputPlaying}
-                  </div>
-                  <PreviewFrame cmController={this.cmController} />
-                </div>
-              </section>
-            </SplitPane>
-          </SplitPane>
-        </main>
-        <IDEOverlays />
-      </RootPage>
-    );
-  }
-}
-
-IDEView.propTypes = {
-  params: PropTypes.shape({
-    project_id: PropTypes.string,
-    username: PropTypes.string,
-    reset_password_token: PropTypes.string
-  }).isRequired,
-  location: PropTypes.shape({
-    pathname: PropTypes.string
-  }).isRequired,
-  getProject: PropTypes.func.isRequired,
-  user: PropTypes.shape({
-    authenticated: PropTypes.bool.isRequired,
-    id: PropTypes.string,
-    username: PropTypes.string
-  }).isRequired,
-  ide: PropTypes.shape({
-    errorType: PropTypes.string,
-    keyboardShortcutVisible: PropTypes.bool.isRequired,
-    shareModalVisible: PropTypes.bool.isRequired,
-    shareModalProjectId: PropTypes.string.isRequired,
-    shareModalProjectName: PropTypes.string.isRequired,
-    shareModalProjectUsername: PropTypes.string.isRequired,
-    previousPath: PropTypes.string.isRequired,
-    previewIsRefreshing: PropTypes.bool.isRequired,
-    isPlaying: PropTypes.bool.isRequired,
-    isAccessibleOutputPlaying: PropTypes.bool.isRequired,
-    projectOptionsVisible: PropTypes.bool.isRequired,
-    preferencesIsVisible: PropTypes.bool.isRequired,
-    modalIsVisible: PropTypes.bool.isRequired,
-    uploadFileModalVisible: PropTypes.bool.isRequired,
-    newFolderModalVisible: PropTypes.bool.isRequired,
-    justOpenedProject: PropTypes.bool.isRequired,
-    sidebarIsExpanded: PropTypes.bool.isRequired,
-    consoleIsExpanded: PropTypes.bool.isRequired,
-    unsavedChanges: PropTypes.bool.isRequired
-  }).isRequired,
-  stopSketch: PropTypes.func.isRequired,
-  project: PropTypes.shape({
-    id: PropTypes.string,
-    name: PropTypes.string.isRequired,
-    owner: PropTypes.shape({
-      username: PropTypes.string,
-      id: PropTypes.string
-    }),
-    updatedAt: PropTypes.string
-  }).isRequired,
-  preferences: PropTypes.shape({
-    autosave: PropTypes.bool.isRequired,
-    fontSize: PropTypes.number.isRequired,
-    linewrap: PropTypes.bool.isRequired,
-    lineNumbers: PropTypes.bool.isRequired,
-    lintWarning: PropTypes.bool.isRequired,
-    textOutput: PropTypes.bool.isRequired,
-    gridOutput: PropTypes.bool.isRequired,
-    theme: PropTypes.string.isRequired,
-    autorefresh: PropTypes.bool.isRequired,
-    language: PropTypes.string.isRequired,
-    autocloseBracketsQuotes: PropTypes.bool.isRequired,
-    autocompleteHinter: PropTypes.bool.isRequired
-  }).isRequired,
-  selectedFile: PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    content: PropTypes.string.isRequired,
-    name: PropTypes.string.isRequired
-  }).isRequired,
-  htmlFile: PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    name: PropTypes.string.isRequired,
-    content: PropTypes.string.isRequired
-  }).isRequired,
-  updateFileContent: PropTypes.func.isRequired,
-  autosaveProject: PropTypes.func.isRequired,
-  setPreviousPath: PropTypes.func.isRequired,
-  clearPersistedState: PropTypes.func.isRequired,
-  t: PropTypes.func.isRequired,
-  isUserOwner: PropTypes.bool.isRequired
-};
-
-function mapStateToProps(state) {
-  return {
-    selectedFile: selectActiveFile(state),
-    htmlFile: getHTMLFile(state.files),
-    ide: state.ide,
-    preferences: state.preferences,
-    editorAccessibility: state.editorAccessibility,
-    user: state.user,
-    project: state.project,
-    console: state.console,
-    isUserOwner: getIsUserOwner(state)
-  };
-}
-
-function mapDispatchToProps(dispatch) {
-  return bindActionCreators(
-    Object.assign(
-      {},
-      EditorAccessibilityActions,
-      FileActions,
-      ProjectActions,
-      IDEActions,
-      PreferencesActions,
-      UserActions,
-      ConsoleActions
-    ),
-    dispatch
+              </EditorSidebarWrapper>
+            </>
+          )
+        }
+      </MediaQuery>
+      <IDEOverlays />
+    </RootPage>
   );
-}
+};
 
-export default withTranslation()(
-  connect(mapStateToProps, mapDispatchToProps)(IDEView)
-);
+export default IDEView;
diff --git a/client/styles/components/_sidebar.scss b/client/styles/components/_sidebar.scss
index e49d13a6aa..1e398fe875 100644
--- a/client/styles/components/_sidebar.scss
+++ b/client/styles/components/_sidebar.scss
@@ -4,18 +4,17 @@
 }
 
 .sidebar__header {
-  padding-right: #{6 / $base-font-size}rem;
-  padding-left: #{19 / $base-font-size}rem;
+  padding: #{8 / $base-font-size}rem #{12 / $base-font-size}rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  height: #{29 / $base-font-size}rem;
   min-height: #{29 / $base-font-size}rem;
   position: relative;
 }
 
 .sidebar__title {
-  font-size: #{12 / $base-font-size}rem;
+  font-size: #{16 / $base-font-size}rem;
+  font-weight: 500;
   display: inline-block;
   .sidebar--contracted & {
     display: none;
@@ -25,15 +24,21 @@
 }
 
 .sidebar__add {
-  width: #{20 / $base-font-size}rem;
-  height: #{20 / $base-font-size}rem;
-  @include icon();
+  padding: #{2 / $base-font-size}rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  & svg {
+    width: #{18 / $base-font-size}rem;
+    height: #{18 / $base-font-size}rem;
+  }
+  @include themify() {
+    background-color: getThemifyVariable('ide-border-color');
+  }
+
   .sidebar--contracted & {
     display: none;
   }
-  & svg {
-    width: #{10 / $base-font-size}rem;
-  }
 }
 
 .sidebar__file-list {
@@ -49,15 +54,24 @@
 .sidebar__root-item {
   position: relative;
   overflow-y: auto;
+  padding-top: #{6 / $base-font-size}rem;
   flex: 1 1 auto;
-  @include themify() {
-    border-top: 1px solid map-get($theme-map, 'ide-border-color');
+  @media (min-width: 770px) {
+    @include themify() {
+      border-top: 1px solid map-get($theme-map, 'ide-border-color');
+    }
   }
   .sidebar--contracted & {
     border: none;
   }
 }
 
+.file-item__children {
+  display: flex;
+  flex-direction: column;
+  gap: #{4 / $base-font-size}rem;
+}
+
 .sidebar__file-item {
   font-size: #{12 / $base-font-size}rem;
   cursor: pointer;
@@ -73,6 +87,11 @@
 
 .sidebar__file-item--folder {
   z-index: 1;
+  display: flex;
+  align-items: center;
+  > button {
+    padding-left: #{1 / $base-font-size}rem;
+  }
 }
 
 // to indent each row in the file tree
@@ -131,7 +150,7 @@
   padding: #{4 / $base-font-size}rem 0;
   padding-right: #{25 / $base-font-size}rem;
   font-family: Inconsolata, monospace;
-  font-size: #{14 / $base-font-size}rem;
+  font-size: #{15 / $base-font-size}rem;
   overflow: hidden;
   .sidebar__file-item--editing & {
     display: none;
@@ -270,8 +289,9 @@
 }
 
 .sidebar__file-item-icon {
-  padding: #{4 / $base-font-size}rem 0;
   margin-right: #{5 / $base-font-size}rem;
+  display: flex;
+  align-items: center;
   & path {
     @include themify() {
       fill: getThemifyVariable('secondary-text-color');