diff --git a/client/components/Dropdown.jsx b/client/components/Dropdown.jsx
index 48bed0cb..0cd29574 100644
--- a/client/components/Dropdown.jsx
+++ b/client/components/Dropdown.jsx
@@ -36,9 +36,7 @@ const DropdownWrapper = styled.ul`
     background-color: ${prop('Button.hover.background')};
     color: ${prop('Button.hover.foreground')};
 
-    & button, & a {
-      color: ${prop('Button.hover.foreground')};
-    }
+    * { color: ${prop('Button.hover.foreground')}; }
   }
 
   li {
@@ -48,12 +46,21 @@ const DropdownWrapper = styled.ul`
     align-items: center;
 
     & button,
+    & button span,
     & a {
-      color: ${prop('primaryTextColor')};
-      width: 100%;
-      text-align: left;
       padding: ${remSize(8)} ${remSize(16)};
     }
+
+    * {
+      text-align: left;
+      justify-content: left;
+
+      color: ${prop('primaryTextColor')};
+      width: 100%;
+      justify-content: flex-start;
+    }
+
+    & button span { padding: 0px }
   }
 `;
 
@@ -63,24 +70,29 @@ const DropdownWrapper = styled.ul`
 const Dropdown = ({ items, align }) => (
   <DropdownWrapper align={align} >
     {/* className="nav__items-left" */}
-    {items && items.map(({ title, icon, href }) => (
+    {items && items.map(({
+      title, icon, href, action
+    }) => (
       <li key={`nav-${title && title.toLowerCase()}`}>
-        <Link to={href}>
-          {/* {MaybeIcon(icon, `Navigate to ${title}`)} */}
-          {title}
-        </Link>
+        {/* {MaybeIcon(icon, `Navigate to ${title}`)} */}
+        {href
+          ? <IconButton to={href}>{title}</IconButton>
+          : <IconButton onClick={() => action()}>{title}</IconButton>}
+
       </li>
     ))
     }
   </DropdownWrapper>
 );
 
+
 Dropdown.propTypes = {
   align: PropTypes.oneOf(['left', 'right']),
   items: PropTypes.arrayOf(PropTypes.shape({
     action: PropTypes.func,
     icon: PropTypes.func,
-    href: PropTypes.string
+    href: PropTypes.string,
+    title: PropTypes.string
   })),
 };
 
diff --git a/client/components/mobile/IconButton.jsx b/client/components/mobile/IconButton.jsx
index 08f05311..7085f8a1 100644
--- a/client/components/mobile/IconButton.jsx
+++ b/client/components/mobile/IconButton.jsx
@@ -17,7 +17,7 @@ const IconButton = (props) => {
   const Icon = icon;
 
   return (<ButtonWrapper
-    iconBefore={<Icon />}
+    iconBefore={icon && <Icon />}
     kind={Button.kinds.inline}
     focusable="false"
     {...otherProps}
@@ -25,7 +25,11 @@ const IconButton = (props) => {
 };
 
 IconButton.propTypes = {
-  icon: PropTypes.func.isRequired
+  icon: PropTypes.func
+};
+
+IconButton.defaultProps = {
+  icon: null
 };
 
 export default IconButton;
diff --git a/client/constants.js b/client/constants.js
index a23badd8..0a5188a1 100644
--- a/client/constants.js
+++ b/client/constants.js
@@ -62,6 +62,7 @@ export const COLLAPSE_CONSOLE = 'COLLAPSE_CONSOLE';
 
 export const UPDATE_LINT_MESSAGE = 'UPDATE_LINT_MESSAGE';
 export const CLEAR_LINT_MESSAGE = 'CLEAR_LINT_MESSAGE';
+export const TOGGLE_FORCE_DESKTOP = 'TOGGLE_FORCE_DESKTOP';
 
 export const UPDATE_FILE_NAME = 'UPDATE_FILE_NAME';
 export const DELETE_FILE = 'DELETE_FILE';
diff --git a/client/jest.setup.js b/client/jest.setup.js
index 79652c74..233c76db 100644
--- a/client/jest.setup.js
+++ b/client/jest.setup.js
@@ -3,3 +3,21 @@ import '@babel/polyfill';
 // See: https://github.com/testing-library/jest-dom
 // eslint-disable-next-line import/no-extraneous-dependencies
 import '@testing-library/jest-dom';
+
+import lodash from 'lodash';
+
+// For testing, we use en-US and provide a mock implementation
+// of t() that finds the correct translation
+import translations from '../translations/locales/en-US/translations.json';
+
+// This function name needs to be prefixed with "mock" so that Jest doesn't
+// complain that it's out-of-scope in the mock below
+const mockTranslate = key => lodash.get(translations, key);
+
+jest.mock('react-i18next', () => ({
+  // this mock makes sure any components using the translate HoC receive the t function as a prop
+  withTranslation: () => (Component) => {
+    Component.defaultProps = { ...Component.defaultProps, t: mockTranslate };
+    return Component;
+  },
+}));
diff --git a/client/modules/App/components/Overlay.jsx b/client/modules/App/components/Overlay.jsx
index 4e54b615..3ebeca45 100644
--- a/client/modules/App/components/Overlay.jsx
+++ b/client/modules/App/components/Overlay.jsx
@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { browserHistory } from 'react-router';
+import { withTranslation } from 'react-i18next';
 
 import ExitIcon from '../../../images/exit.svg';
 
@@ -80,7 +81,7 @@ class Overlay extends React.Component {
               <h2 className="overlay__title">{title}</h2>
               <div className="overlay__actions">
                 {actions}
-                <button className="overlay__close-button" onClick={this.close} aria-label={`Close ${title} overlay`} >
+                <button className="overlay__close-button" onClick={this.close} aria-label={this.props.t('Overlay.AriaLabel', { title })}>
                   <ExitIcon focusable="false" aria-hidden="true" />
                 </button>
               </div>
@@ -101,6 +102,7 @@ Overlay.propTypes = {
   ariaLabel: PropTypes.string,
   previousPath: PropTypes.string,
   isFixedHeight: PropTypes.bool,
+  t: PropTypes.func.isRequired
 };
 
 Overlay.defaultProps = {
@@ -113,4 +115,4 @@ Overlay.defaultProps = {
   isFixedHeight: false,
 };
 
-export default Overlay;
+export default withTranslation()(Overlay);
diff --git a/client/modules/IDE/actions/editorAccessibility.js b/client/modules/IDE/actions/editorAccessibility.js
index ffb88db4..1014e6ad 100644
--- a/client/modules/IDE/actions/editorAccessibility.js
+++ b/client/modules/IDE/actions/editorAccessibility.js
@@ -14,3 +14,9 @@ export function clearLintMessage() {
     type: ActionTypes.CLEAR_LINT_MESSAGE
   };
 }
+
+export function toggleForceDesktop() {
+  return {
+    type: ActionTypes.TOGGLE_FORCE_DESKTOP
+  };
+}
diff --git a/client/modules/IDE/components/AddToCollectionList.jsx b/client/modules/IDE/components/AddToCollectionList.jsx
index e9417d3b..f4369124 100644
--- a/client/modules/IDE/components/AddToCollectionList.jsx
+++ b/client/modules/IDE/components/AddToCollectionList.jsx
@@ -3,6 +3,7 @@ import React from 'react';
 import { Helmet } from 'react-helmet';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
+import { withTranslation } from 'react-i18next';
 
 import * as ProjectActions from '../actions/project';
 import * as ProjectsActions from '../actions/projects';
@@ -14,7 +15,7 @@ import Loader from '../../App/components/loader';
 import QuickAddList from './QuickAddList';
 
 const projectInCollection = (project, collection) =>
-  collection.items.find(item => item.project.id === project.id) != null;
+  collection.items.find(item => item.projectId === project.id) != null;
 
 class CollectionList extends React.Component {
   constructor(props) {
@@ -42,9 +43,9 @@ class CollectionList extends React.Component {
 
   getTitle() {
     if (this.props.username === this.props.user.username) {
-      return 'p5.js Web Editor | My collections';
+      return this.props.t('AddToCollectionList.Title');
     }
-    return `p5.js Web Editor | ${this.props.username}'s collections`;
+    return this.props.t('AddToCollectionList.AnothersTitle', { anotheruser: this.props.username });
   }
 
   handleCollectionAdd = (collection) => {
@@ -74,19 +75,22 @@ class CollectionList extends React.Component {
           items={collectionWithSketchStatus}
           onAdd={this.handleCollectionAdd}
           onRemove={this.handleCollectionRemove}
+          t={this.props.t}
         />
       );
     } else {
-      content = 'No collections';
+      content = this.props.t('AddToCollectionList.Empty');
     }
 
     return (
-      <div className="quick-add-wrapper">
-        <Helmet>
-          <title>{this.getTitle()}</title>
-        </Helmet>
+      <div className="collection-add-sketch">
+        <div className="quick-add-wrapper">
+          <Helmet>
+            <title>{this.getTitle()}</title>
+          </Helmet>
 
-        {content}
+          {content}
+        </div>
       </div>
     );
   }
@@ -133,7 +137,8 @@ CollectionList.propTypes = {
     owner: PropTypes.shape({
       id: PropTypes.string
     })
-  })
+  }),
+  t: PropTypes.func.isRequired
 };
 
 CollectionList.defaultProps = {
@@ -162,4 +167,4 @@ function mapDispatchToProps(dispatch) {
   );
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(CollectionList);
+export default withTranslation()(connect(mapStateToProps, mapDispatchToProps)(CollectionList));
diff --git a/client/modules/IDE/components/AddToCollectionSketchList.jsx b/client/modules/IDE/components/AddToCollectionSketchList.jsx
index d4173b4b..339ead18 100644
--- a/client/modules/IDE/components/AddToCollectionSketchList.jsx
+++ b/client/modules/IDE/components/AddToCollectionSketchList.jsx
@@ -3,6 +3,7 @@ import React from 'react';
 import { Helmet } from 'react-helmet';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
+import { withTranslation } from 'react-i18next';
 // import find from 'lodash/find';
 import * as ProjectsActions from '../actions/projects';
 import * as CollectionsActions from '../actions/collections';
@@ -32,9 +33,9 @@ class SketchList extends React.Component {
 
   getSketchesTitle() {
     if (this.props.username === this.props.user.username) {
-      return 'p5.js Web Editor | My sketches';
+      return this.props.t('AddToCollectionSketchList.Title');
     }
-    return `p5.js Web Editor | ${this.props.username}'s sketches`;
+    return this.props.t('AddToCollectionSketchList.AnothersTitle', { anotheruser: this.props.username });
   }
 
   handleCollectionAdd = (sketch) => {
@@ -68,15 +69,17 @@ class SketchList extends React.Component {
         />
       );
     } else {
-      content = 'No collections';
+      content = this.props.t('AddToCollectionSketchList.NoCollections');
     }
 
     return (
-      <div className="quick-add-wrapper">
-        <Helmet>
-          <title>{this.getSketchesTitle()}</title>
-        </Helmet>
-        {content}
+      <div className="collection-add-sketch">
+        <div className="quick-add-wrapper">
+          <Helmet>
+            <title>{this.getSketchesTitle()}</title>
+          </Helmet>
+          {content}
+        </div>
       </div>
     );
   }
@@ -111,6 +114,7 @@ SketchList.propTypes = {
   }).isRequired,
   addToCollection: PropTypes.func.isRequired,
   removeFromCollection: PropTypes.func.isRequired,
+  t: PropTypes.func.isRequired
 };
 
 SketchList.defaultProps = {
@@ -134,4 +138,4 @@ function mapDispatchToProps(dispatch) {
   );
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(SketchList);
+export default withTranslation()(connect(mapStateToProps, mapDispatchToProps)(SketchList));
diff --git a/client/modules/IDE/components/CollectionList/CollectionList.jsx b/client/modules/IDE/components/CollectionList/CollectionList.jsx
index 1007ca97..2f556d36 100644
--- a/client/modules/IDE/components/CollectionList/CollectionList.jsx
+++ b/client/modules/IDE/components/CollectionList/CollectionList.jsx
@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Helmet } from 'react-helmet';
+import { withTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import classNames from 'classnames';
@@ -50,9 +51,9 @@ class CollectionList extends React.Component {
 
   getTitle() {
     if (this.props.username === this.props.user.username) {
-      return 'p5.js Web Editor | My collections';
+      return this.props.t('CollectionList.Title');
     }
-    return `p5.js Web Editor | ${this.props.username}'s collections`;
+    return this.props.t('CollectionList.AnothersTitle', { anotheruser: this.props.username });
   }
 
   showAddSketches = (collectionId) => {
@@ -78,7 +79,7 @@ class CollectionList extends React.Component {
 
   _renderEmptyTable() {
     if (!this.props.loading && this.props.collections.length === 0) {
-      return (<p className="sketches-table__empty">No collections.</p>);
+      return (<p className="sketches-table__empty">{this.props.t('CollectionList.NoCollections')}</p>);
     }
     return null;
   }
@@ -88,14 +89,14 @@ class CollectionList extends React.Component {
     let buttonLabel;
     if (field !== fieldName) {
       if (field === 'name') {
-        buttonLabel = `Sort by ${displayName} ascending.`;
+        buttonLabel = this.props.t('CollectionList.ButtonLabelAscendingARIA', { displayName });
       } else {
-        buttonLabel = `Sort by ${displayName} descending.`;
+        buttonLabel = this.props.t('CollectionList.ButtonLabelDescendingARIA', { displayName });
       }
     } else if (direction === SortingActions.DIRECTION.ASC) {
-      buttonLabel = `Sort by ${displayName} descending.`;
+      buttonLabel = this.props.t('CollectionList.ButtonLabelDescendingARIA', { displayName });
     } else {
-      buttonLabel = `Sort by ${displayName} ascending.`;
+      buttonLabel = this.props.t('CollectionList.ButtonLabelAscendingARIA', { displayName });
     }
     return buttonLabel;
   }
@@ -116,10 +117,10 @@ class CollectionList extends React.Component {
         >
           <span className={headerClass}>{displayName}</span>
           {field === fieldName && direction === SortingActions.DIRECTION.ASC &&
-            <ArrowUpIcon role="img" aria-label="Ascending" focusable="false" />
+            <ArrowUpIcon role="img" aria-label={this.props.t('CollectionList.DirectionAscendingARIA')} focusable="false" />
           }
           {field === fieldName && direction === SortingActions.DIRECTION.DESC &&
-            <ArrowDownIcon role="img" aria-label="Descending" focusable="false" />
+            <ArrowDownIcon role="img" aria-label={this.props.t('CollectionList.DirectionDescendingARIA')} focusable="false" />
           }
         </button>
       </th>
@@ -142,10 +143,10 @@ class CollectionList extends React.Component {
           <table className="sketches-table" summary="table containing all collections">
             <thead>
               <tr>
-                {this._renderFieldHeader('name', 'Name')}
-                {this._renderFieldHeader('createdAt', `${mobile ? '' : 'Date '}Created`)}
-                {this._renderFieldHeader('updatedAt', `${mobile ? '' : 'Date '}Updated`)}
-                {this._renderFieldHeader('numItems', mobile ? 'Sketches' : '# sketches')}
+                {this._renderFieldHeader('name', this.props.t('CollectionList.HeaderName'))}
+                {this._renderFieldHeader('createdAt', this.props.t('CollectionList.HeaderCreatedAt', { context: mobile ? 'mobile' : '' }))}
+                {this._renderFieldHeader('updatedAt', this.props.t('CollectionList.HeaderUpdatedAt', { context: mobile ? 'mobile' : '' }))}
+                {this._renderFieldHeader('numItems', this.props.t('CollectionList.HeaderNumItems', { context: mobile ? 'mobile' : '' }))}
                 <th scope="col"></th>
               </tr>
             </thead>
@@ -165,17 +166,15 @@ class CollectionList extends React.Component {
         {
           this.state.addingSketchesToCollectionId && (
             <Overlay
-              title="Add sketch"
+              title={this.props.t('CollectionList.AddSketch')}
               actions={<SketchSearchbar />}
               closeOverlay={this.hideAddSketches}
               isFixedHeight
             >
-              <div className="collection-add-sketch">
-                <AddToCollectionSketchList
-                  username={this.props.username}
-                  collection={find(this.props.collections, { id: this.state.addingSketchesToCollectionId })}
-                />
-              </div>
+              <AddToCollectionSketchList
+                username={this.props.username}
+                collection={find(this.props.collections, { id: this.state.addingSketchesToCollectionId })}
+              />
             </Overlay>
           )
         }
@@ -213,6 +212,7 @@ CollectionList.propTypes = {
       id: PropTypes.string
     })
   }),
+  t: PropTypes.func.isRequired,
   mobile: PropTypes.bool,
 };
 
@@ -244,4 +244,4 @@ function mapDispatchToProps(dispatch) {
   );
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(CollectionList);
+export default withTranslation()(connect(mapStateToProps, mapDispatchToProps)(CollectionList));
diff --git a/client/modules/IDE/components/CollectionList/CollectionListRow.jsx b/client/modules/IDE/components/CollectionList/CollectionListRow.jsx
index de20cea9..4775639c 100644
--- a/client/modules/IDE/components/CollectionList/CollectionListRow.jsx
+++ b/client/modules/IDE/components/CollectionList/CollectionListRow.jsx
@@ -4,6 +4,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { Link } from 'react-router';
 import { bindActionCreators } from 'redux';
+import { withTranslation } from 'react-i18next';
 import * as ProjectActions from '../../actions/project';
 import * as CollectionsActions from '../../actions/collections';
 import * as IdeActions from '../../actions/ide';
@@ -81,7 +82,7 @@ class CollectionListRowBase extends React.Component {
 
   handleCollectionDelete = () => {
     this.closeAll();
-    if (window.confirm(`Are you sure you want to delete "${this.props.collection.name}"?`)) {
+    if (window.confirm(this.props.t('Common.DeleteConfirmation', { name: this.props.collection.name }))) {
       this.props.deleteCollection(this.props.collection.id);
     }
   }
@@ -130,7 +131,7 @@ class CollectionListRowBase extends React.Component {
           onClick={this.toggleOptions}
           onBlur={this.onBlurComponent}
           onFocus={this.onFocusComponent}
-          aria-label="Toggle Open/Close collection options"
+          aria-label={this.props.t('CollectionListRow.ToggleCollectionOptionsARIA')}
         >
           <DownFilledTriangleIcon title="Menu" />
         </button>
@@ -145,7 +146,7 @@ class CollectionListRowBase extends React.Component {
                 onBlur={this.onBlurComponent}
                 onFocus={this.onFocusComponent}
               >
-                Add sketch
+                {this.props.t('CollectionListRow.AddSketch')}
               </button>
             </li>
             {userIsOwner &&
@@ -156,7 +157,7 @@ class CollectionListRowBase extends React.Component {
                   onBlur={this.onBlurComponent}
                   onFocus={this.onFocusComponent}
                 >
-                  Delete
+                  {this.props.t('CollectionListRow.Delete')}
                 </button>
               </li>}
             {userIsOwner &&
@@ -167,7 +168,7 @@ class CollectionListRowBase extends React.Component {
                   onBlur={this.onBlurComponent}
                   onFocus={this.onFocusComponent}
                 >
-                  Rename
+                  {this.props.t('CollectionListRow.Rename')}
                 </button>
               </li>}
           </ul>
@@ -248,6 +249,7 @@ CollectionListRowBase.propTypes = {
   editCollection: PropTypes.func.isRequired,
   onAddSketches: PropTypes.func.isRequired,
   mobile: PropTypes.bool,
+  t: PropTypes.func.isRequired
 };
 
 CollectionListRowBase.defaultProps = {
@@ -258,4 +260,4 @@ function mapDispatchToPropsSketchListRow(dispatch) {
   return bindActionCreators(Object.assign({}, CollectionsActions, ProjectActions, IdeActions, ToastActions), dispatch);
 }
 
-export default connect(null, mapDispatchToPropsSketchListRow)(CollectionListRowBase);
+export default withTranslation()(connect(null, mapDispatchToPropsSketchListRow)(CollectionListRowBase));
diff --git a/client/modules/IDE/components/Console.jsx b/client/modules/IDE/components/Console.jsx
index ddb6d55e..eaee9492 100644
--- a/client/modules/IDE/components/Console.jsx
+++ b/client/modules/IDE/components/Console.jsx
@@ -1,4 +1,6 @@
 import React, { useRef } from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
 
 import { bindActionCreators } from 'redux';
 
@@ -72,7 +74,7 @@ const getConsoleFeedStyle = (theme, times, fontSize) => {
   }
 };
 
-const Console = () => {
+const Console = ({ t }) => {
   const consoleEvents = useSelector(state => state.console);
   const isExpanded = useSelector(state => state.ide.consoleIsExpanded);
   const { theme, fontSize } = useSelector(state => state.preferences);
@@ -98,19 +100,19 @@ const Console = () => {
   return (
     <section className={consoleClass} >
       <header className="preview-console__header">
-        <h2 className="preview-console__header-title">Console</h2>
+        <h2 className="preview-console__header-title">{t('Console.Title')}</h2>
         <div className="preview-console__header-buttons">
-          <button className="preview-console__clear" onClick={clearConsole} aria-label="Clear console">
-            Clear
+          <button className="preview-console__clear" onClick={clearConsole} aria-label={t('Console.ClearARIA')}>
+            {t('Console.Clear')}
           </button>
           <button
             className="preview-console__collapse"
             onClick={collapseConsole}
-            aria-label="Close console"
+            aria-label={t('Console.CloseARIA')}
           >
             <DownArrowIcon focusable="false" aria-hidden="true" />
           </button>
-          <button className="preview-console__expand" onClick={expandConsole} aria-label="Open console" >
+          <button className="preview-console__expand" onClick={expandConsole} aria-label={t('Console.OpenARIA')} >
             <UpArrowIcon focusable="false" aria-hidden="true" />
           </button>
         </div>
@@ -140,5 +142,9 @@ const Console = () => {
   );
 };
 
+Console.propTypes = {
+  t: PropTypes.func.isRequired,
+};
 
-export default Console;
+
+export default withTranslation()(Console);
diff --git a/client/modules/IDE/components/ErrorModal.jsx b/client/modules/IDE/components/ErrorModal.jsx
index b1ff6b10..099065a5 100644
--- a/client/modules/IDE/components/ErrorModal.jsx
+++ b/client/modules/IDE/components/ErrorModal.jsx
@@ -1,15 +1,16 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Link } from 'react-router';
+import { withTranslation } from 'react-i18next';
 
 class ErrorModal extends React.Component {
   forceAuthentication() {
     return (
       <p>
-        In order to save sketches, you must be logged in. Please&nbsp;
-        <Link to="/login" onClick={this.props.closeModal}>Login</Link>
-        &nbsp;or&nbsp;
-        <Link to="/signup" onClick={this.props.closeModal}>Sign Up</Link>.
+        {this.props.t('ErrorModal.MessageLogin')}
+        <Link to="/login" onClick={this.props.closeModal}> {this.props.t('ErrorModal.Login')}</Link>
+        {this.props.t('ErrorModal.LoginOr')}
+        <Link to="/signup" onClick={this.props.closeModal}>{this.props.t('ErrorModal.SignUp')}</Link>.
       </p>
     );
   }
@@ -17,8 +18,8 @@ class ErrorModal extends React.Component {
   staleSession() {
     return (
       <p>
-        It looks like you&apos;ve been logged out. Please&nbsp;
-        <Link to="/login" onClick={this.props.closeModal}>log in</Link>.
+        {this.props.t('ErrorModal.MessageLoggedOut')}
+        <Link to="/login" onClick={this.props.closeModal}>{this.props.t('ErrorModal.LogIn')}</Link>.
       </p>
     );
   }
@@ -26,8 +27,7 @@ class ErrorModal extends React.Component {
   staleProject() {
     return (
       <p>
-        The project you have attempted to save has been saved from another window.
-        Please refresh the page to see the latest version.
+        {this.props.t('ErrorModal.SavedDifferentWindow')}
       </p>
     );
   }
@@ -51,7 +51,8 @@ class ErrorModal extends React.Component {
 
 ErrorModal.propTypes = {
   type: PropTypes.string.isRequired,
-  closeModal: PropTypes.func.isRequired
+  closeModal: PropTypes.func.isRequired,
+  t: PropTypes.func.isRequired
 };
 
-export default ErrorModal;
+export default withTranslation()(ErrorModal);
diff --git a/client/modules/IDE/components/FileNode.jsx b/client/modules/IDE/components/FileNode.jsx
index d0a10ef8..0533091a 100644
--- a/client/modules/IDE/components/FileNode.jsx
+++ b/client/modules/IDE/components/FileNode.jsx
@@ -3,6 +3,8 @@ import React from 'react';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import classNames from 'classnames';
+import { withTranslation } from 'react-i18next';
+
 import * as IDEActions from '../actions/ide';
 import * as FileActions from '../actions/files';
 import DownArrowIcon from '../../../images/down-filled-triangle.svg';
@@ -152,7 +154,9 @@ export class FileNode extends React.Component {
   }
 
   handleClickDelete = () => {
-    if (window.confirm(`Are you sure you want to delete ${this.props.name}?`)) {
+    const prompt = this.props.t('Common.DeleteConfirmation', { name: this.props.name });
+
+    if (window.confirm(prompt)) {
       this.setState({ isDeleting: true });
       this.props.resetSelectedFile(this.props.id);
       setTimeout(() => this.props.deleteFile(this.props.id, this.props.parentId), 100);
@@ -237,6 +241,8 @@ export class FileNode extends React.Component {
     const isFolder = this.props.fileType === 'folder';
     const isRoot = this.props.name === 'root';
 
+    const { t } = this.props;
+
     return (
       <div className={itemClass} >
         { !isRoot &&
@@ -252,14 +258,14 @@ export class FileNode extends React.Component {
                 <button
                   className="sidebar__file-item-closed"
                   onClick={this.showFolderChildren}
-                  aria-label="Open folder contents"
+                  aria-label={t('FileNode.OpenFolderARIA')}
                 >
                   <FolderRightIcon className="folder-right" focusable="false" aria-hidden="true" />
                 </button>
                 <button
                   className="sidebar__file-item-open"
                   onClick={this.hideFolderChildren}
-                  aria-label="Close file contents"
+                  aria-label={t('FileNode.CloseFolderARIA')}
                 >
                   <FolderDownIcon className="folder-down" focusable="false" aria-hidden="true" />
                 </button>
@@ -286,7 +292,7 @@ export class FileNode extends React.Component {
             />
             <button
               className="sidebar__file-item-show-options"
-              aria-label="Toggle open/close file options"
+              aria-label={t('FileNode.ToggleFileOptionsARIA')}
               ref={(element) => { this[`fileOptions-${this.props.id}`] = element; }}
               tabIndex="0"
               onClick={this.toggleFileOptions}
@@ -301,35 +307,35 @@ export class FileNode extends React.Component {
                   <React.Fragment>
                     <li>
                       <button
-                        aria-label="add folder"
+                        aria-label={t('FileNode.AddFolderARIA')}
                         onClick={this.handleClickAddFolder}
                         onBlur={this.onBlurComponent}
                         onFocus={this.onFocusComponent}
                         className="sidebar__file-item-option"
                       >
-                        Create folder
+                        {t('FileNode.AddFolder')}
                       </button>
                     </li>
                     <li>
                       <button
-                        aria-label="add file"
+                        aria-label={t('FileNode.AddFileARIA')}
                         onClick={this.handleClickAddFile}
                         onBlur={this.onBlurComponent}
                         onFocus={this.onFocusComponent}
                         className="sidebar__file-item-option"
                       >
-                        Create file
+                        {t('FileNode.AddFile')}
                       </button>
                     </li>
                     { this.props.authenticated &&
                       <li>
                         <button
-                          aria-label="upload file"
+                          aria-label={t('FileNode.UploadFileARIA')}
                           onClick={this.handleClickUploadFile}
                           onBlur={this.onBlurComponent}
                           onFocus={this.onFocusComponent}
                         >
-                          Upload file
+                          {t('FileNode.UploadFile')}
                         </button>
                       </li>
                     }
@@ -342,7 +348,7 @@ export class FileNode extends React.Component {
                     onFocus={this.onFocusComponent}
                     className="sidebar__file-item-option"
                   >
-                    Rename
+                    {t('FileNode.Rename')}
                   </button>
                 </li>
                 <li>
@@ -352,7 +358,7 @@ export class FileNode extends React.Component {
                     onFocus={this.onFocusComponent}
                     className="sidebar__file-item-option"
                   >
-                    Delete
+                    {t('FileNode.Delete')}
                   </button>
                 </li>
               </ul>
@@ -388,6 +394,7 @@ FileNode.propTypes = {
   canEdit: PropTypes.bool.isRequired,
   openUploadFileModal: PropTypes.func.isRequired,
   authenticated: PropTypes.bool.isRequired,
+  t: PropTypes.func.isRequired,
   onClickFile: PropTypes.func
 };
 
@@ -408,5 +415,8 @@ function mapDispatchToProps(dispatch) {
   return bindActionCreators(Object.assign(FileActions, IDEActions), dispatch);
 }
 
-const ConnectedFileNode = connect(mapStateToProps, mapDispatchToProps)(FileNode);
+const TranslatedFileNode = withTranslation()(FileNode);
+
+const ConnectedFileNode = connect(mapStateToProps, mapDispatchToProps)(TranslatedFileNode);
+
 export default ConnectedFileNode;
diff --git a/client/modules/IDE/components/FileUploader.jsx b/client/modules/IDE/components/FileUploader.jsx
index e2e6e509..f33b59ed 100644
--- a/client/modules/IDE/components/FileUploader.jsx
+++ b/client/modules/IDE/components/FileUploader.jsx
@@ -3,6 +3,7 @@ import React from 'react';
 import Dropzone from 'dropzone';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
+import { withTranslation } from 'react-i18next';
 import * as UploaderActions from '../actions/uploader';
 import getConfig from '../../../utils/getConfig';
 import { fileExtensionsAndMimeTypes } from '../../../../server/utils/fileUtils';
@@ -30,7 +31,7 @@ class FileUploader extends React.Component {
       thumbnailWidth: 200,
       thumbnailHeight: 200,
       acceptedFiles: fileExtensionsAndMimeTypes,
-      dictDefaultMessage: 'Drop files here or click to use the file browser',
+      dictDefaultMessage: this.props.t('FileUploader.DictDefaultMessage'),
       accept: this.props.dropzoneAcceptCallback.bind(this, userId),
       sending: this.props.dropzoneSendingCallback,
       complete: this.props.dropzoneCompleteCallback
@@ -59,7 +60,8 @@ FileUploader.propTypes = {
   }),
   user: PropTypes.shape({
     id: PropTypes.string
-  })
+  }),
+  t: PropTypes.func.isRequired
 };
 
 FileUploader.defaultProps = {
@@ -84,4 +86,4 @@ function mapDispatchToProps(dispatch) {
   return bindActionCreators(UploaderActions, dispatch);
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(FileUploader);
+export default withTranslation()(connect(mapStateToProps, mapDispatchToProps)(FileUploader));
diff --git a/client/modules/IDE/components/QuickAddList/QuickAddList.jsx b/client/modules/IDE/components/QuickAddList/QuickAddList.jsx
index be7a5ac3..32264230 100644
--- a/client/modules/IDE/components/QuickAddList/QuickAddList.jsx
+++ b/client/modules/IDE/components/QuickAddList/QuickAddList.jsx
@@ -1,11 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router';
+import { withTranslation } from 'react-i18next';
 
 import Icons from './Icons';
 
 const Item = ({
-  isAdded, onSelect, name, url
+  isAdded, onSelect, name, url, t
 }) => {
   const buttonLabel = isAdded ? 'Remove from collection' : 'Add to collection';
   return (
@@ -20,7 +21,7 @@ const Item = ({
         target="_blank"
         onClick={e => e.stopPropogation()}
       >
-        View
+        {t('QuickAddList.View')}
       </Link>
     </li>
   );
@@ -37,10 +38,11 @@ Item.propTypes = {
   url: PropTypes.string.isRequired,
   isAdded: PropTypes.bool.isRequired,
   onSelect: PropTypes.func.isRequired,
+  t: PropTypes.func.isRequired
 };
 
 const QuickAddList = ({
-  items, onAdd, onRemove
+  items, onAdd, onRemove, t
 }) => {
   const handleAction = (item) => {
     if (item.isAdded) {
@@ -53,6 +55,7 @@ const QuickAddList = ({
   return (
     <ul className="quick-add">{items.map(item => (<Item
       key={item.id}
+      t={t}
       {...item}
       onSelect={
         (event) => {
@@ -70,6 +73,7 @@ QuickAddList.propTypes = {
   items: PropTypes.arrayOf(ItemType).isRequired,
   onAdd: PropTypes.func.isRequired,
   onRemove: PropTypes.func.isRequired,
+  t: PropTypes.func.isRequired
 };
 
-export default QuickAddList;
+export default withTranslation()(QuickAddList);
diff --git a/client/modules/IDE/components/ShareModal.jsx b/client/modules/IDE/components/ShareModal.jsx
index e0962624..bea4c42a 100644
--- a/client/modules/IDE/components/ShareModal.jsx
+++ b/client/modules/IDE/components/ShareModal.jsx
@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import { withTranslation } from 'react-i18next';
 import CopyableInput from './CopyableInput';
 
 class ShareModal extends React.PureComponent {
@@ -16,21 +17,21 @@ class ShareModal extends React.PureComponent {
           {projectName}
         </h3>
         <CopyableInput
-          label="Embed"
+          label={this.props.t('ShareModal.Embed')}
           value={`<iframe src="${hostname}/${ownerUsername}/embed/${projectId}"></iframe>`}
         />
         <CopyableInput
-          label="Present"
+          label={this.props.t('ShareModal.Present')}
           hasPreviewLink
           value={`${hostname}/${ownerUsername}/present/${projectId}`}
         />
         <CopyableInput
-          label="Fullscreen"
+          label={this.props.t('ShareModal.Fullscreen')}
           hasPreviewLink
           value={`${hostname}/${ownerUsername}/full/${projectId}`}
         />
         <CopyableInput
-          label="Edit"
+          label={this.props.t('ShareModal.Edit')}
           hasPreviewLink
           value={`${hostname}/${ownerUsername}/sketches/${projectId}`}
         />
@@ -42,7 +43,8 @@ class ShareModal extends React.PureComponent {
 ShareModal.propTypes = {
   projectId: PropTypes.string.isRequired,
   ownerUsername: PropTypes.string.isRequired,
-  projectName: PropTypes.string.isRequired
+  projectName: PropTypes.string.isRequired,
+  t: PropTypes.func.isRequired
 };
 
-export default ShareModal;
+export default withTranslation()(ShareModal);
diff --git a/client/modules/IDE/components/Sidebar.jsx b/client/modules/IDE/components/Sidebar.jsx
index 97c8c0ec..5d480278 100644
--- a/client/modules/IDE/components/Sidebar.jsx
+++ b/client/modules/IDE/components/Sidebar.jsx
@@ -1,6 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
+import { withTranslation } from 'react-i18next';
+
 import ConnectedFileNode from './FileNode';
 
 import DownArrowIcon from '../../../images/down-filled-triangle.svg';
@@ -71,11 +73,11 @@ class Sidebar extends React.Component {
       <section className={sidebarClass}>
         <header className="sidebar__header" onContextMenu={this.toggleProjectOptions}>
           <h3 className="sidebar__title">
-            <span>Sketch Files</span>
+            <span>{this.props.t('Sidebar.Title')}</span>
           </h3>
           <div className="sidebar__icons">
             <button
-              aria-label="Toggle open/close sketch file options"
+              aria-label={this.props.t('Sidebar.ToggleARIA')}
               className="sidebar__add"
               tabIndex="0"
               ref={(element) => { this.sidebarOptions = element; }}
@@ -88,7 +90,7 @@ class Sidebar extends React.Component {
             <ul className="sidebar__project-options">
               <li>
                 <button
-                  aria-label="add folder"
+                  aria-label={this.props.t('Sidebar.AddFolderARIA')}
                   onClick={() => {
                     this.props.newFolder(rootFile.id);
                     setTimeout(this.props.closeProjectOptions, 0);
@@ -96,12 +98,12 @@ class Sidebar extends React.Component {
                   onBlur={this.onBlurComponent}
                   onFocus={this.onFocusComponent}
                 >
-                  Create folder
+                  {this.props.t('Sidebar.AddFolder')}
                 </button>
               </li>
               <li>
                 <button
-                  aria-label="add file"
+                  aria-label={this.props.t('Sidebar.AddFileARIA')}
                   onClick={() => {
                     this.props.newFile(rootFile.id);
                     setTimeout(this.props.closeProjectOptions, 0);
@@ -109,14 +111,14 @@ class Sidebar extends React.Component {
                   onBlur={this.onBlurComponent}
                   onFocus={this.onFocusComponent}
                 >
-                  Create file
+                  {this.props.t('Sidebar.AddFile')}
                 </button>
               </li>
               {
                 this.props.user.authenticated &&
                 <li>
                   <button
-                    aria-label="upload file"
+                    aria-label={this.props.t('Sidebar.UploadFileARIA')}
                     onClick={() => {
                       this.props.openUploadFileModal(rootFile.id);
                       setTimeout(this.props.closeProjectOptions, 0);
@@ -124,7 +126,7 @@ class Sidebar extends React.Component {
                     onBlur={this.onBlurComponent}
                     onFocus={this.onFocusComponent}
                   >
-                    Upload file
+                    {this.props.t('Sidebar.UploadFile')}
                   </button>
                 </li>
               }
@@ -159,11 +161,12 @@ Sidebar.propTypes = {
   user: PropTypes.shape({
     id: PropTypes.string,
     authenticated: PropTypes.bool.isRequired
-  }).isRequired
+  }).isRequired,
+  t: PropTypes.func.isRequired,
 };
 
 Sidebar.defaultProps = {
   owner: undefined
 };
 
-export default Sidebar;
+export default withTranslation()(Sidebar);
diff --git a/client/modules/IDE/components/SketchList.jsx b/client/modules/IDE/components/SketchList.jsx
index d5f9d71d..17aa1d41 100644
--- a/client/modules/IDE/components/SketchList.jsx
+++ b/client/modules/IDE/components/SketchList.jsx
@@ -2,6 +2,7 @@ import format from 'date-fns/format';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Helmet } from 'react-helmet';
+import { withTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { Link } from 'react-router';
 import { bindActionCreators } from 'redux';
@@ -148,14 +149,14 @@ class SketchListRowBase extends React.Component {
 
   handleSketchDelete = () => {
     this.closeAll();
-    if (window.confirm(`Are you sure you want to delete "${this.props.sketch.name}"?`)) {
+    if (window.confirm(this.props.t('Common.DeleteConfirmation', { name: this.props.sketch.name }))) {
       this.props.deleteProject(this.props.sketch.id);
     }
   }
 
   renderViewButton = sketchURL => (
     <td className="sketch-list__dropdown-column">
-      <Link to={sketchURL}>View</Link>
+      <Link to={sketchURL}>{this.props.t('SketchList.View')}</Link>
     </td>
   )
 
@@ -170,7 +171,7 @@ class SketchListRowBase extends React.Component {
           onClick={this.toggleOptions}
           onBlur={this.onBlurComponent}
           onFocus={this.onFocusComponent}
-          aria-label="Toggle Open/Close Sketch Options"
+          aria-label={this.props.t('SketchList.ToggleLabelARIA')}
         >
           <DownFilledTriangleIcon focusable="false" aria-hidden="true" />
         </button>
@@ -186,7 +187,7 @@ class SketchListRowBase extends React.Component {
                 onBlur={this.onBlurComponent}
                 onFocus={this.onFocusComponent}
               >
-                Rename
+                {this.props.t('SketchList.DropdownRename')}
               </button>
             </li>}
             <li>
@@ -196,7 +197,7 @@ class SketchListRowBase extends React.Component {
                 onBlur={this.onBlurComponent}
                 onFocus={this.onFocusComponent}
               >
-                Download
+                {this.props.t('SketchList.DropdownDownload')}
               </button>
             </li>
             {this.props.user.authenticated &&
@@ -207,7 +208,7 @@ class SketchListRowBase extends React.Component {
                 onBlur={this.onBlurComponent}
                 onFocus={this.onFocusComponent}
               >
-                Duplicate
+                {this.props.t('SketchList.DropdownDuplicate')}
               </button>
             </li>}
             {this.props.user.authenticated &&
@@ -221,7 +222,7 @@ class SketchListRowBase extends React.Component {
                   onBlur={this.onBlurComponent}
                   onFocus={this.onFocusComponent}
                 >
-                  Add to collection
+                  {this.props.t('SketchList.DropdownAddToCollection')}
                 </button>
               </li>}
             { /* <li>
@@ -242,7 +243,7 @@ class SketchListRowBase extends React.Component {
                 onBlur={this.onBlurComponent}
                 onFocus={this.onFocusComponent}
               >
-                Delete
+                {this.props.t('SketchList.DropdownDelete')}
               </button>
             </li>}
           </ul>}
@@ -262,8 +263,6 @@ class SketchListRowBase extends React.Component {
       url = `/${username}/sketches/${slugify(sketch.name, '_')}`;
     }
 
-    if (this.props.mobile) url = `/mobile${url}`;
-
     const name = (
       <React.Fragment>
         <Link to={url}>
@@ -319,7 +318,8 @@ SketchListRowBase.propTypes = {
   exportProjectAsZip: PropTypes.func.isRequired,
   changeProjectName: PropTypes.func.isRequired,
   onAddToCollection: PropTypes.func.isRequired,
-  mobile: PropTypes.bool
+  mobile: PropTypes.bool,
+  t: PropTypes.func.isRequired
 };
 
 SketchListRowBase.defaultProps = {
@@ -354,9 +354,9 @@ class SketchList extends React.Component {
 
   getSketchesTitle() {
     if (this.props.username === this.props.user.username) {
-      return 'p5.js Web Editor | My sketches';
+      return this.props.t('SketchList.Title');
     }
-    return `p5.js Web Editor | ${this.props.username}'s sketches`;
+    return this.props.t('SketchList.AnothersTitle', { anotheruser: this.props.username });
   }
 
   hasSketches() {
@@ -374,7 +374,7 @@ class SketchList extends React.Component {
 
   _renderEmptyTable() {
     if (!this.isLoading() && this.props.sketches.length === 0) {
-      return (<p className="sketches-table__empty">No sketches.</p>);
+      return (<p className="sketches-table__empty">{this.props.t('SketchList.NoSketches')}</p>);
     }
     return null;
   }
@@ -384,14 +384,14 @@ class SketchList extends React.Component {
     let buttonLabel;
     if (field !== fieldName) {
       if (field === 'name') {
-        buttonLabel = `Sort by ${displayName} ascending.`;
+        buttonLabel = this.props.t('SketchList.ButtonLabelAscendingARIA', { displayName });
       } else {
-        buttonLabel = `Sort by ${displayName} descending.`;
+        buttonLabel = this.props.t('SketchList.ButtonLabelDescendingARIA', { displayName });
       }
     } else if (direction === SortingActions.DIRECTION.ASC) {
-      buttonLabel = `Sort by ${displayName} descending.`;
+      buttonLabel = this.props.t('SketchList.ButtonLabelDescendingARIA', { displayName });
     } else {
-      buttonLabel = `Sort by ${displayName} ascending.`;
+      buttonLabel = this.props.t('SketchList.ButtonLabelAscendingARIA', { displayName });
     }
     return buttonLabel;
   }
@@ -412,10 +412,10 @@ class SketchList extends React.Component {
         >
           <span className={headerClass}>{displayName}</span>
           {field === fieldName && direction === SortingActions.DIRECTION.ASC &&
-            <ArrowUpIcon role="img" aria-label="Ascending" focusable="false" />
+            <ArrowUpIcon role="img" aria-label={this.props.t('SketchList.DirectionAscendingARIA')} focusable="false" />
           }
           {field === fieldName && direction === SortingActions.DIRECTION.DESC &&
-            <ArrowDownIcon role="img" aria-label="Descending" focusable="false" />
+            <ArrowDownIcon role="img" aria-label={this.props.t('SketchList.DirectionDescendingARIA')} focusable="false" />
           }
         </button>
       </th>
@@ -436,9 +436,9 @@ class SketchList extends React.Component {
           <table className="sketches-table" summary="table containing all saved projects">
             <thead>
               <tr>
-                {this._renderFieldHeader('name', 'Sketch')}
-                {this._renderFieldHeader('createdAt', `${mobile ? '' : 'Date '}Created`)}
-                {this._renderFieldHeader('updatedAt', `${mobile ? '' : 'Date '}Updated`)}
+                {this._renderFieldHeader('name', this.props.t('SketchList.HeaderName'))}
+                {this._renderFieldHeader('createdAt', this.props.t('SketchList.HeaderCreatedAt', { context: mobile ? 'mobile' : '' }))}
+                {this._renderFieldHeader('updatedAt', this.props.t('SketchList.HeaderUpdatedAt', { context: mobile ? 'mobile' : '' }))}
                 <th scope="col"></th>
               </tr>
             </thead>
@@ -453,6 +453,7 @@ class SketchList extends React.Component {
                   onAddToCollection={() => {
                     this.setState({ sketchToAddToCollection: sketch });
                   }}
+                  t={this.props.t}
                 />))}
             </tbody>
           </table>}
@@ -460,7 +461,7 @@ class SketchList extends React.Component {
           this.state.sketchToAddToCollection &&
             <Overlay
               isFixedHeight
-              title="Add to collection"
+              title={this.props.t('SketchList.AddToCollectionOverlayTitle')}
               closeOverlay={() => this.setState({ sketchToAddToCollection: null })}
             >
               <AddToCollectionList
@@ -496,6 +497,7 @@ SketchList.propTypes = {
     direction: PropTypes.string.isRequired
   }).isRequired,
   mobile: PropTypes.bool,
+  t: PropTypes.func.isRequired
 };
 
 SketchList.defaultProps = {
@@ -520,4 +522,4 @@ function mapDispatchToProps(dispatch) {
   );
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(SketchList);
+export default withTranslation()(connect(mapStateToProps, mapDispatchToProps)(SketchList));
diff --git a/client/modules/IDE/components/UploadFileModal.jsx b/client/modules/IDE/components/UploadFileModal.jsx
index ff7e9c2d..793c4183 100644
--- a/client/modules/IDE/components/UploadFileModal.jsx
+++ b/client/modules/IDE/components/UploadFileModal.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { Link } from 'react-router';
+import { withTranslation } from 'react-i18next';
 import prettyBytes from 'pretty-bytes';
 import getConfig from '../../../utils/getConfig';
 import FileUploader from './FileUploader';
@@ -14,7 +15,8 @@ const limitText = prettyBytes(limit);
 class UploadFileModal extends React.Component {
   propTypes = {
     reachedTotalSizeLimit: PropTypes.bool.isRequired,
-    closeModal: PropTypes.func.isRequired
+    closeModal: PropTypes.func.isRequired,
+    t: PropTypes.func.isRequired
   }
 
   componentDidMount() {
@@ -31,22 +33,18 @@ class UploadFileModal extends React.Component {
       <section className="modal" ref={(element) => { this.modal = element; }}>
         <div className="modal-content">
           <div className="modal__header">
-            <h2 className="modal__title">Upload File</h2>
+            <h2 className="modal__title">{this.props.t('UploadFileModal.Title')}</h2>
             <button
               className="modal__exit-button"
               onClick={this.props.closeModal}
-              aria-label="Close upload file modal"
+              aria-label={this.props.t('UploadFileModal.CloseButtonARIA')}
             >
               <ExitIcon focusable="false" aria-hidden="true" />
             </button>
           </div>
           { this.props.reachedTotalSizeLimit &&
             <p>
-              {
-                `Error: You cannot upload any more files. You have reached the total size limit of ${limitText}.
-                If you would like to upload more, please remove the ones you aren't using anymore by
-                in your `
-              }
+              {this.props.t('UploadFileModal.SizeLimitError', { sizeLimit: limitText })}
               <Link to="/assets" onClick={this.props.closeModal}>assets</Link>
               .
             </p>
@@ -68,4 +66,4 @@ function mapStateToProps(state) {
   };
 }
 
-export default connect(mapStateToProps)(UploadFileModal);
+export default withTranslation()(connect(mapStateToProps)(UploadFileModal));
diff --git a/client/modules/IDE/pages/IDEView.jsx b/client/modules/IDE/pages/IDEView.jsx
index 1dcae539..c5b358f1 100644
--- a/client/modules/IDE/pages/IDEView.jsx
+++ b/client/modules/IDE/pages/IDEView.jsx
@@ -418,15 +418,15 @@ class IDEView extends React.Component {
           <Overlay
             title={this.props.t('IDEView.SubmitFeedback')}
             previousPath={this.props.ide.previousPath}
-            ariaLabel="submit-feedback"
+            ariaLabel={this.props.t('IDEView.SubmitFeedbackARIA')}
           >
             <Feedback previousPath={this.props.ide.previousPath} />
           </Overlay>
         )}
         {this.props.location.pathname.match(/add-to-collection$/) && (
           <Overlay
-            ariaLabel="add to collection"
-            title="Add to collection"
+            ariaLabel={this.props.t('IDEView.AddCollectionARIA')}
+            title={this.props.t('IDEView.AddCollectionTitle')}
             previousPath={this.props.ide.previousPath}
             actions={<CollectionSearchbar />}
             isFixedHeight
@@ -440,8 +440,8 @@ class IDEView extends React.Component {
         )}
         {this.props.ide.shareModalVisible && (
           <Overlay
-            title="Share"
-            ariaLabel="share"
+            title={this.props.t('IDEView.ShareTitle')}
+            ariaLabel={this.props.t('IDEView.ShareARIA')}
             closeOverlay={this.props.closeShareModal}
           >
             <ShareModal
@@ -462,8 +462,8 @@ class IDEView extends React.Component {
         )}
         {this.props.ide.errorType && (
           <Overlay
-            title="Error"
-            ariaLabel={this.props.t('Common.Error')}
+            title={this.props.t('Common.Error')}
+            ariaLabel={this.props.t('Common.ErrorARIA')}
             closeOverlay={this.props.hideErrorModal}
           >
             <ErrorModal
diff --git a/client/modules/IDE/pages/MobileIDEView.jsx b/client/modules/IDE/pages/MobileIDEView.jsx
index 6067807c..504cac89 100644
--- a/client/modules/IDE/pages/MobileIDEView.jsx
+++ b/client/modules/IDE/pages/MobileIDEView.jsx
@@ -12,7 +12,7 @@ import * as IDEActions from '../actions/ide';
 import * as ProjectActions from '../actions/project';
 import * as ConsoleActions from '../actions/console';
 import * as PreferencesActions from '../actions/preferences';
-
+import * as EditorAccessibilityActions from '../actions/editorAccessibility';
 
 // Local Imports
 import Editor from '../components/Editor';
@@ -58,18 +58,20 @@ const NavItem = styled.li`
   position: relative;
 `;
 
-const getNavOptions = (username = undefined) =>
+const getNavOptions = (username = undefined, logoutUser = () => {}, toggleForceDesktop = () => {}) =>
   (username
     ? [
-      { icon: PreferencesIcon, title: 'Preferences', href: '/mobile/preferences', },
-      { icon: PreferencesIcon, title: 'My Stuff', href: `/mobile/${username}/sketches` },
-      { icon: PreferencesIcon, title: 'Examples', href: '/mobile/p5/sketches' },
-      { icon: PreferencesIcon, title: 'Original Editor', href: '/', },
+      { icon: PreferencesIcon, title: 'Preferences', href: '/preferences', },
+      { icon: PreferencesIcon, title: 'My Stuff', href: `/${username}/sketches` },
+      { icon: PreferencesIcon, title: 'Examples', href: '/p5/sketches' },
+      { icon: PreferencesIcon, title: 'Original Editor', action: toggleForceDesktop, },
+      { icon: PreferencesIcon, title: 'Logout', action: logoutUser, },
     ]
     : [
-      { icon: PreferencesIcon, title: 'Preferences', href: '/mobile/preferences', },
-      { icon: PreferencesIcon, title: 'Examples', href: '/mobile/p5/sketches' },
-      { icon: PreferencesIcon, title: 'Original Editor', href: '/', },
+      { icon: PreferencesIcon, title: 'Preferences', href: '/preferences', },
+      { icon: PreferencesIcon, title: 'Examples', href: '/p5/sketches' },
+      { icon: PreferencesIcon, title: 'Original Editor', action: toggleForceDesktop, },
+      { icon: PreferencesIcon, title: 'Login', href: '/login', },
     ]
   );
 
@@ -144,7 +146,7 @@ const handleGlobalKeydown = (props, cmController) => (e) => {
 
 const autosave = (autosaveInterval, setAutosaveInterval) => (props, prevProps) => {
   const {
-    autosaveProject, preferences, ide, selectedFile: file, project, user
+    autosaveProject, preferences, ide, selectedFile: file, project
   } = props;
 
   const { selectedFile: oldFile } = prevProps;
@@ -170,10 +172,23 @@ const autosave = (autosaveInterval, setAutosaveInterval) => (props, prevProps) =
   }
 };
 
+// ide, preferences, project, selectedFile, user, params, unsavedChanges, expandConsole, collapseConsole,
+// stopSketch, startSketch, getProject, clearPersistedState, autosaveProject, saveProject, files
+
 const MobileIDEView = (props) => {
+  // const {
+  //   preferences, ide, editorAccessibility, project, updateLintMessage, clearLintMessage,
+  //   selectedFile, updateFileContent, files, user, params,
+  //   closeEditorOptions, showEditorOptions, logoutUser,
+  //   startRefreshSketch, stopSketch, expandSidebar, collapseSidebar, clearConsole, console,
+  //   showRuntimeErrorWarning, hideRuntimeErrorWarning, startSketch, getProject, clearPersistedState, setUnsavedChanges,
+  //   toggleForceDesktop
+  // } = props;
+
   const {
     ide, preferences, project, selectedFile, user, params, unsavedChanges, expandConsole, collapseConsole,
-    stopSketch, startSketch, getProject, clearPersistedState, autosaveProject, saveProject, files
+    stopSketch, startSketch, getProject, clearPersistedState, autosaveProject, saveProject, files,
+    toggleForceDesktop, logoutUser
   } = props;
 
 
@@ -204,7 +219,7 @@ const MobileIDEView = (props) => {
 
   // Screen Modals
   const [toggleNavDropdown, NavDropDown] = useAsModal(<Dropdown
-    items={getNavOptions(username)}
+    items={getNavOptions(username, logoutUser, toggleForceDesktop)}
     align="right"
   />);
 
@@ -239,6 +254,7 @@ const MobileIDEView = (props) => {
         subtitle={filename}
       >
         <NavItem>
+
           <IconButton
             onClick={toggleNavDropdown}
             icon={MoreIcon}
@@ -247,7 +263,7 @@ const MobileIDEView = (props) => {
           <NavDropDown />
         </NavItem>
         <li>
-          <IconButton to="/mobile/preview" onClick={() => { startSketch(); }} icon={PlayIcon} aria-label="Run sketch" />
+          <IconButton to="/preview" onClick={() => { startSketch(); }} icon={PlayIcon} aria-label="Run sketch" />
         </li>
       </Header>
 
@@ -307,12 +323,22 @@ MobileIDEView.propTypes = {
     name: PropTypes.string.isRequired,
   }).isRequired,
 
+  files: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+    content: PropTypes.string.isRequired,
+  })).isRequired,
+
+  toggleForceDesktop: PropTypes.func.isRequired,
+
   user: PropTypes.shape({
     authenticated: PropTypes.bool.isRequired,
     id: PropTypes.string,
     username: PropTypes.string,
   }).isRequired,
 
+  logoutUser: PropTypes.func.isRequired,
+
   getProject: PropTypes.func.isRequired,
   clearPersistedState: PropTypes.func.isRequired,
   params: PropTypes.shape({
@@ -320,10 +346,9 @@ MobileIDEView.propTypes = {
     username: PropTypes.string
   }).isRequired,
 
-  unsavedChanges: PropTypes.bool.isRequired,
-
   startSketch: PropTypes.func.isRequired,
-  stopSketch: PropTypes.func.isRequired,
+
+  unsavedChanges: PropTypes.bool.isRequired,
   autosaveProject: PropTypes.func.isRequired,
 
 
@@ -351,7 +376,8 @@ const mapDispatchToProps = dispatch => bindActionCreators({
   ...ProjectActions,
   ...IDEActions,
   ...ConsoleActions,
-  ...PreferencesActions
+  ...PreferencesActions,
+  ...EditorAccessibilityActions
 }, dispatch);
 
 export default withRouter(connect(mapStateToProps, mapDispatchToProps)(MobileIDEView));
diff --git a/client/modules/IDE/reducers/editorAccessibility.js b/client/modules/IDE/reducers/editorAccessibility.js
index d86dbede..73d6cd75 100644
--- a/client/modules/IDE/reducers/editorAccessibility.js
+++ b/client/modules/IDE/reducers/editorAccessibility.js
@@ -1,7 +1,8 @@
 import * as ActionTypes from '../../../constants';
 
 const initialState = {
-  lintMessages: []
+  lintMessages: [],
+  forceDesktop: false
 };
 let messageId = 0;
 
@@ -16,6 +17,8 @@ const editorAccessibility = (state = initialState, action) => {
       });
     case ActionTypes.CLEAR_LINT_MESSAGE:
       return Object.assign({}, state, { lintMessages: [] });
+    case ActionTypes.TOGGLE_FORCE_DESKTOP:
+      return Object.assign({}, state, { forceDesktop: !(state.forceDesktop) });
     default:
       return state;
   }
diff --git a/client/modules/Mobile/MobileDashboardView.jsx b/client/modules/Mobile/MobileDashboardView.jsx
index 270faee7..0fd7cfe4 100644
--- a/client/modules/Mobile/MobileDashboardView.jsx
+++ b/client/modules/Mobile/MobileDashboardView.jsx
@@ -138,8 +138,8 @@ const Panels = {
 
 
 const navOptions = username => [
-  { title: 'Create Sketch', href: '/mobile' },
-  { title: 'Create Collection', href: `/mobile/${username}/collections/create` }
+  { title: 'Create Sketch', href: '/' },
+  { title: 'Create Collection', href: `/${username}/collections/create` }
 ];
 
 
@@ -185,7 +185,7 @@ const MobileDashboard = ({ params, location }) => {
           <NavDropdown />
 
         </NavItem>
-        <IconButton to="/mobile" icon={ExitIcon} aria-label="Return to ide view" />
+        <IconButton to="/" icon={ExitIcon} aria-label="Return to ide view" />
       </Header>
 
 
diff --git a/client/modules/Mobile/MobilePreferences.jsx b/client/modules/Mobile/MobilePreferences.jsx
index c7991c2f..69ad737b 100644
--- a/client/modules/Mobile/MobilePreferences.jsx
+++ b/client/modules/Mobile/MobilePreferences.jsx
@@ -69,7 +69,7 @@ const MobilePreferences = () => {
     <Screen fullscreen>
       <section>
         <Header transparent title="Preferences">
-          <IconButton to="/mobile" icon={ExitIcon} aria-label="Return to ide view" />
+          <IconButton to="/" icon={ExitIcon} aria-label="Return to ide view" />
         </Header>
         <section className="preferences">
           <Content>
diff --git a/client/modules/Mobile/MobileSketchView.jsx b/client/modules/Mobile/MobileSketchView.jsx
index 4d31c172..a4238fec 100644
--- a/client/modules/Mobile/MobileSketchView.jsx
+++ b/client/modules/Mobile/MobileSketchView.jsx
@@ -39,7 +39,7 @@ const MobileSketchView = () => {
   return (
     <Screen fullscreen>
       <Header
-        leftButton={<IconButton to="/mobile" icon={ExitIcon} aria-label="Return to original editor" />}
+        leftButton={<IconButton to="/" icon={ExitIcon} aria-label="Return to original editor" />}
         title={projectName}
       />
       <Content>
diff --git a/client/modules/User/actions.js b/client/modules/User/actions.js
index d0648be3..a5b22edb 100644
--- a/client/modules/User/actions.js
+++ b/client/modules/User/actions.js
@@ -229,7 +229,7 @@ export function updateSettings(formValues) {
         dispatch(updateSettingsSuccess(response.data));
         browserHistory.push('/');
         dispatch(showToast(5500));
-        dispatch(setToastText('Settings saved.'));
+        dispatch(setToastText('Toast.SettingsSaved'));
       })
       .catch((error) => {
         const { response } = error;
diff --git a/client/modules/User/components/Collection.jsx b/client/modules/User/components/Collection.jsx
index 54e87518..7e9a8e38 100644
--- a/client/modules/User/components/Collection.jsx
+++ b/client/modules/User/components/Collection.jsx
@@ -5,6 +5,7 @@ import { Helmet } from 'react-helmet';
 import { connect } from 'react-redux';
 import { Link } from 'react-router';
 import { bindActionCreators } from 'redux';
+import { withTranslation } from 'react-i18next';
 import classNames from 'classnames';
 
 import Button from '../../../common/Button';
@@ -27,7 +28,7 @@ import ArrowUpIcon from '../../../images/sort-arrow-up.svg';
 import ArrowDownIcon from '../../../images/sort-arrow-down.svg';
 import RemoveIcon from '../../../images/close.svg';
 
-const ShareURL = ({ value }) => {
+const ShareURL = ({ value, t }) => {
   const [showURL, setShowURL] = useState(false);
   const node = useRef();
 
@@ -56,11 +57,11 @@ const ShareURL = ({ value }) => {
         onClick={() => setShowURL(!showURL)}
         iconAfter={<DropdownArrowIcon />}
       >
-        Share
+        {t('Collection.Share')}
       </Button>
       { showURL &&
         <div className="collection__share-dropdown">
-          <CopyableInput value={value} label="Link to Collection" />
+          <CopyableInput value={value} label={t('Collection.URLLink')} />
         </div>
       }
     </div>
@@ -69,22 +70,23 @@ const ShareURL = ({ value }) => {
 
 ShareURL.propTypes = {
   value: PropTypes.string.isRequired,
+  t: PropTypes.func.isRequired
 };
 
 const CollectionItemRowBase = ({
-  collection, item, isOwner, removeFromCollection
+  collection, item, isOwner, removeFromCollection, t
 }) => {
   const projectIsDeleted = item.isDeleted;
 
   const handleSketchRemove = () => {
     const name = projectIsDeleted ? 'deleted sketch' : item.project.name;
 
-    if (window.confirm(`Are you sure you want to remove "${name}" from this collection?`)) {
+    if (window.confirm(t('Collection.DeleteFromCollection', { name_sketch: name }))) {
       removeFromCollection(collection.id, item.projectId);
     }
   };
 
-  const name = projectIsDeleted ? <span>Sketch was deleted</span> : (
+  const name = projectIsDeleted ? <span>{t('Collection.SketchDeleted')}</span> : (
     <Link to={`/${item.project.user.username}/sketches/${item.projectId}`}>
       {item.project.name}
     </Link>
@@ -106,7 +108,7 @@ const CollectionItemRowBase = ({
           <button
             className="collection-row__remove-button"
             onClick={handleSketchRemove}
-            aria-label="Remove sketch from collection"
+            aria-label={t('Collection.SketchRemoveARIA')}
           >
             <RemoveIcon focusable="false" aria-hidden="true" />
           </button>
@@ -138,7 +140,8 @@ CollectionItemRowBase.propTypes = {
     username: PropTypes.string,
     authenticated: PropTypes.bool.isRequired
   }).isRequired,
-  removeFromCollection: PropTypes.func.isRequired
+  removeFromCollection: PropTypes.func.isRequired,
+  t: PropTypes.func.isRequired
 };
 
 function mapDispatchToPropsSketchListRow(dispatch) {
@@ -163,9 +166,9 @@ class Collection extends React.Component {
 
   getTitle() {
     if (this.props.username === this.props.user.username) {
-      return 'p5.js Web Editor | My collections';
+      return this.props.t('Collection.Title');
     }
-    return `p5.js Web Editor | ${this.props.username}'s collections`;
+    return this.props.t('Collection.AnothersTitle', { anotheruser: this.props.username });
   }
 
   getUsername() {
@@ -257,27 +260,27 @@ class Collection extends React.Component {
                     InputComponent="textarea"
                     value={description}
                     onChange={handleEditCollectionDescription}
-                    emptyPlaceholder="Add description"
+                    emptyPlaceholder={this.props.t('Collection.DescriptionPlaceholder')}
                   /> :
                   description
               }
             </p>
 
-            <p className="collection-metadata__user">Collection by{' '}
+            <p className="collection-metadata__user">{this.props.t('Collection.By')}
               <Link to={`${hostname}/${username}/sketches`}>{owner.username}</Link>
             </p>
 
-            <p className="collection-metadata__user">{items.length} sketch{items.length === 1 ? '' : 'es'}</p>
+            <p className="collection-metadata__user">{this.props.t('Collection.NumSketches', { count: items.length }) }</p>
           </div>
 
           <div className="collection-metadata__column--right">
             <p className="collection-metadata__share">
-              <ShareURL value={`${baseURL}${id}`} />
+              <ShareURL value={`${baseURL}${id}`} t={this.props.t} />
             </p>
             {
               this.isOwner() &&
               <Button onClick={this.showAddSketches}>
-                Add Sketch
+                {this.props.t('Collection.AddSketch')}
               </Button>
             }
           </div>
@@ -304,7 +307,7 @@ class Collection extends React.Component {
       this.props.collection.items.length > 0;
 
     if (!isLoading && !hasCollectionItems) {
-      return (<p className="collection-empty-message">No sketches in collection</p>);
+      return (<p className="collection-empty-message">{this.props.t('Collection.NoSketches')}</p>);
     }
     return null;
   }
@@ -314,14 +317,14 @@ class Collection extends React.Component {
     let buttonLabel;
     if (field !== fieldName) {
       if (field === 'name') {
-        buttonLabel = `Sort by ${displayName} ascending.`;
+        buttonLabel = this.props.t('Collection.ButtonLabelAscendingARIA', { displayName });
       } else {
-        buttonLabel = `Sort by ${displayName} descending.`;
+        buttonLabel = this.props.t('Collection.ButtonLabelDescendingARIA', { displayName });
       }
     } else if (direction === SortingActions.DIRECTION.ASC) {
-      buttonLabel = `Sort by ${displayName} descending.`;
+      buttonLabel = this.props.t('Collection.ButtonLabelDescendingARIA', { displayName });
     } else {
-      buttonLabel = `Sort by ${displayName} ascending.`;
+      buttonLabel = this.props.t('Collection.ButtonLabelAscendingARIA', { displayName });
     }
     return buttonLabel;
   }
@@ -342,10 +345,10 @@ class Collection extends React.Component {
         >
           <span className={headerClass}>{displayName}</span>
           {field === fieldName && direction === SortingActions.DIRECTION.ASC &&
-            <ArrowUpIcon role="img" aria-label="Ascending" focusable="false" />
+            <ArrowUpIcon role="img" aria-label={this.props.t('Collection.DirectionAscendingARIA')} focusable="false" />
           }
           {field === fieldName && direction === SortingActions.DIRECTION.DESC &&
-            <ArrowDownIcon role="img" aria-label="Descending" focusable="false" />
+            <ArrowDownIcon role="img" aria-label={this.props.t('Collection.DirectionDescendingARIA')} focusable="false" />
           }
         </button>
       </th>
@@ -371,9 +374,9 @@ class Collection extends React.Component {
                 <table className="sketches-table" summary="table containing all collections">
                   <thead>
                     <tr>
-                      {this._renderFieldHeader('name', 'Name')}
-                      {this._renderFieldHeader('createdAt', 'Date Added')}
-                      {this._renderFieldHeader('user', 'Owner')}
+                      {this._renderFieldHeader('name', this.props.t('Collection.HeaderName'))}
+                      {this._renderFieldHeader('createdAt', this.props.t('Collection.HeaderCreatedAt'))}
+                      {this._renderFieldHeader('user', this.props.t('Collection.HeaderUser'))}
                       <th scope="col"></th>
                     </tr>
                   </thead>
@@ -386,6 +389,7 @@ class Collection extends React.Component {
                         username={this.getUsername()}
                         collection={this.props.collection}
                         isOwner={isOwner}
+                        t={this.props.t}
                       />))}
                   </tbody>
                 </table>
@@ -393,14 +397,15 @@ class Collection extends React.Component {
               {
                 this.state.isAddingSketches && (
                   <Overlay
-                    title="Add sketch"
+                    title={this.props.t('Collection.AddSketch')}
                     actions={<SketchSearchbar />}
                     closeOverlay={this.hideAddSketches}
                     isFixedHeight
                   >
-                    <div className="collection-add-sketch">
-                      <AddToCollectionSketchList username={this.props.username} collection={this.props.collection} />
-                    </div>
+                    <AddToCollectionSketchList
+                      username={this.props.username}
+                      collection={this.props.collection}
+                    />
                   </Overlay>
                 )
               }
@@ -436,7 +441,8 @@ Collection.propTypes = {
   sorting: PropTypes.shape({
     field: PropTypes.string.isRequired,
     direction: PropTypes.string.isRequired
-  }).isRequired
+  }).isRequired,
+  t: PropTypes.func.isRequired
 };
 
 Collection.defaultProps = {
@@ -467,4 +473,4 @@ function mapDispatchToProps(dispatch) {
   );
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(Collection);
+export default withTranslation()(connect(mapStateToProps, mapDispatchToProps)(Collection));
diff --git a/client/modules/User/components/CollectionCreate.jsx b/client/modules/User/components/CollectionCreate.jsx
index cf679ccc..9a7b6315 100644
--- a/client/modules/User/components/CollectionCreate.jsx
+++ b/client/modules/User/components/CollectionCreate.jsx
@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Helmet } from 'react-helmet';
+import { withTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import * as CollectionsActions from '../../IDE/actions/collections';
@@ -24,7 +25,7 @@ class CollectionCreate extends React.Component {
   }
 
   getTitle() {
-    return 'p5.js Web Editor | Create collection';
+    return this.props.t('CollectionCreate.Title');
   }
 
   handleTextChange = field => (evt) => {
@@ -55,34 +56,34 @@ class CollectionCreate extends React.Component {
         </Helmet>
         <div className="sketches-table-container">
           <form className="form" onSubmit={this.handleCreateCollection}>
-            {creationError && <span className="form-error">Couldn&apos;t create collection</span>}
+            {creationError && <span className="form-error">{this.props.t('CollectionCreate.FormError')}</span>}
             <p className="form__field">
-              <label htmlFor="name" className="form__label">Collection name</label>
+              <label htmlFor="name" className="form__label">{this.props.t('CollectionCreate.FormLabel')}</label>
               <input
                 className="form__input"
-                aria-label="name"
+                aria-label={this.props.t('CollectionCreate.FormLabelARIA')}
                 type="text"
                 id="name"
                 value={name}
                 placeholder={generatedCollectionName}
                 onChange={this.handleTextChange('name')}
               />
-              {invalid && <span className="form-error">Collection name is required</span>}
+              {invalid && <span className="form-error">{this.props.t('CollectionCreate.NameRequired')}</span>}
             </p>
             <p className="form__field">
-              <label htmlFor="description" className="form__label">Description (optional)</label>
+              <label htmlFor="description" className="form__label">{this.props.t('CollectionCreate.Description')}</label>
               <textarea
                 className="form__input form__input-flexible-height"
-                aria-label="description"
+                aria-label={this.props.t('CollectionCreate.DescriptionARIA')}
                 type="text"
                 id="description"
                 value={description}
                 onChange={this.handleTextChange('description')}
-                placeholder="My fave sketches"
+                placeholder={this.props.t('CollectionCreate.DescriptionPlaceholder')}
                 rows="4"
               />
             </p>
-            <Button type="submit" disabled={invalid}>Create collection</Button>
+            <Button type="submit" disabled={invalid}>{this.props.t('CollectionCreate.SubmitCollectionCreate')}</Button>
           </form>
         </div>
       </div>
@@ -95,7 +96,8 @@ CollectionCreate.propTypes = {
     username: PropTypes.string,
     authenticated: PropTypes.bool.isRequired
   }).isRequired,
-  createCollection: PropTypes.func.isRequired
+  createCollection: PropTypes.func.isRequired,
+  t: PropTypes.func.isRequired
 };
 
 function mapStateToProps(state, ownProps) {
@@ -108,4 +110,4 @@ function mapDispatchToProps(dispatch) {
   return bindActionCreators(Object.assign({}, CollectionsActions), dispatch);
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(CollectionCreate);
+export default withTranslation()(connect(mapStateToProps, mapDispatchToProps)(CollectionCreate));
diff --git a/client/modules/User/components/DashboardTabSwitcher.jsx b/client/modules/User/components/DashboardTabSwitcher.jsx
index b3b03c44..51b0c5e7 100644
--- a/client/modules/User/components/DashboardTabSwitcher.jsx
+++ b/client/modules/User/components/DashboardTabSwitcher.jsx
@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import { withTranslation } from 'react-i18next';
 import { Link } from 'react-router';
 
 const TabKey = {
@@ -28,12 +29,14 @@ Tab.propTypes = {
   to: PropTypes.string.isRequired,
 };
 
-const DashboardTabSwitcher = ({ currentTab, isOwner, username }) => (
+const DashboardTabSwitcher = ({
+  currentTab, isOwner, username, t
+}) => (
   <ul className="dashboard-header__switcher">
     <div className="dashboard-header__tabs">
-      <Tab to={`/${username}/sketches`} isSelected={currentTab === TabKey.sketches}>Sketches</Tab>
-      <Tab to={`/${username}/collections`} isSelected={currentTab === TabKey.collections}>Collections</Tab>
-      {isOwner && <Tab to={`/${username}/assets`} isSelected={currentTab === TabKey.assets}>Assets</Tab>}
+      <Tab to={`/${username}/sketches`} isSelected={currentTab === TabKey.sketches}>{t('DashboardTabSwitcher.Sketches')}</Tab>
+      <Tab to={`/${username}/collections`} isSelected={currentTab === TabKey.collections}>{t('DashboardTabSwitcher.Collections')}</Tab>
+      {isOwner && <Tab to={`/${username}/assets`} isSelected={currentTab === TabKey.assets}>{t('DashboardTabSwitcher.Assets')}</Tab>}
     </div>
   </ul>
 );
@@ -42,6 +45,9 @@ DashboardTabSwitcher.propTypes = {
   currentTab: PropTypes.string.isRequired,
   isOwner: PropTypes.bool.isRequired,
   username: PropTypes.string.isRequired,
+  t: PropTypes.func.isRequired
 };
 
-export { DashboardTabSwitcher as default, TabKey };
+
+const DashboardTabSwitcherPublic = withTranslation()(DashboardTabSwitcher);
+export { DashboardTabSwitcherPublic as default, TabKey };
diff --git a/client/modules/User/components/ResponsiveForm.jsx b/client/modules/User/components/ResponsiveForm.jsx
new file mode 100644
index 00000000..45717269
--- /dev/null
+++ b/client/modules/User/components/ResponsiveForm.jsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { remSize } from '../../../theme';
+
+
+const ResponsiveForm = styled.div`
+  .form-container__content {
+    width: unset !important;
+    padding-top: ${remSize(16)};
+    padding-bottom: ${remSize(64)};
+  }
+  
+  .form__input {
+    min-width: unset;
+    padding: 0px ${remSize(12)};
+    height: ${remSize(28)};
+  }
+  .form-container__title { margin-bottom: ${remSize(14)}}
+  p.form__field { margin-top: 0px !important; }
+  label.form__label { margin-top: ${remSize(8)} !important; }
+
+  .form-error { width: 100% }
+
+  .nav__items-right:last-child { display: none }
+
+  .form-container {
+    height: 100%
+  }
+
+  .nav__dropdown {
+    right: 0 !important;
+    left: unset !important;
+  }
+
+  .form-container__stack {
+    svg {
+      width: ${remSize(12)};
+      height: ${remSize(12)}
+    }
+    a { padding: 0px }
+  }
+`;
+
+export default ResponsiveForm;
diff --git a/client/modules/User/pages/CollectionView.jsx b/client/modules/User/pages/CollectionView.jsx
index 9e512774..98189dc6 100644
--- a/client/modules/User/pages/CollectionView.jsx
+++ b/client/modules/User/pages/CollectionView.jsx
@@ -1,6 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
+import { withTranslation } from 'react-i18next';
+
 import Nav from '../../../components/Nav';
 
 import CollectionCreate from '../components/CollectionCreate';
@@ -25,10 +27,10 @@ class CollectionView extends React.Component {
 
   pageTitle() {
     if (this.isCreatePage()) {
-      return 'Create collection';
+      return this.props.t('CollectionView.TitleCreate');
     }
 
-    return 'collection';
+    return this.props.t('CollectionView.TitleDefault');
   }
 
   isOwner() {
@@ -87,6 +89,7 @@ CollectionView.propTypes = {
   user: PropTypes.shape({
     username: PropTypes.string,
   }),
+  t: PropTypes.func.isRequired
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(CollectionView);
+export default withTranslation()(connect(mapStateToProps, mapDispatchToProps)(CollectionView));
diff --git a/client/modules/User/pages/DashboardView.jsx b/client/modules/User/pages/DashboardView.jsx
index f192f8ed..4d3476e3 100644
--- a/client/modules/User/pages/DashboardView.jsx
+++ b/client/modules/User/pages/DashboardView.jsx
@@ -3,6 +3,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { browserHistory } from 'react-router';
+import { withTranslation } from 'react-i18next';
 import { updateSettings, initiateVerification, createApiKey, removeApiKey } from '../actions';
 
 import Button from '../../../common/Button';
@@ -17,7 +18,7 @@ import SketchList from '../../IDE/components/SketchList';
 import { CollectionSearchbar, SketchSearchbar } from '../../IDE/components/Searchbar';
 
 import CollectionCreate from '../components/CollectionCreate';
-import DashboardTabSwitcher, { TabKey } from '../components/DashboardTabSwitcher';
+import DashboardTabSwitcherPublic, { TabKey } from '../components/DashboardTabSwitcher';
 
 class DashboardView extends React.Component {
   static defaultProps = {
@@ -75,7 +76,7 @@ class DashboardView extends React.Component {
     browserHistory.push(`/${this.ownerName()}/collections`);
   }
 
-  renderActionButton(tabKey, username) {
+  renderActionButton(tabKey, username, t) {
     switch (tabKey) {
       case TabKey.assets:
         return this.isOwner() && <AssetSize />;
@@ -83,7 +84,7 @@ class DashboardView extends React.Component {
         return this.isOwner() && (
           <React.Fragment>
             <Button to={`/${username}/collections/create`}>
-              Create collection
+              {t('DashboardView.CreateCollection')}
             </Button>
             <CollectionSearchbar />
           </React.Fragment>);
@@ -91,7 +92,7 @@ class DashboardView extends React.Component {
       default:
         return (
           <React.Fragment>
-            {this.isOwner() && <Button to="/">New sketch</Button>}
+            {this.isOwner() && <Button to="/">{t('DashboardView.NewSketch')}</Button>}
             <SketchSearchbar />
           </React.Fragment>
         );
@@ -114,7 +115,7 @@ class DashboardView extends React.Component {
     const currentTab = this.selectedTabKey();
     const isOwner = this.isOwner();
     const { username } = this.props.params;
-    const actions = this.renderActionButton(currentTab, username);
+    const actions = this.renderActionButton(currentTab, username, this.props.t);
 
     return (
       <div className="dashboard">
@@ -124,7 +125,7 @@ class DashboardView extends React.Component {
           <div className="dashboard-header__header">
             <h2 className="dashboard-header__header__title">{this.ownerName()}</h2>
             <div className="dashboard-header__nav">
-              <DashboardTabSwitcher currentTab={currentTab} isOwner={isOwner} username={username} />
+              <DashboardTabSwitcherPublic currentTab={currentTab} isOwner={isOwner} username={username} />
               {actions &&
                 <div className="dashboard-header__actions">
                   {actions}
@@ -139,7 +140,7 @@ class DashboardView extends React.Component {
         </main>
         {this.isCollectionCreate() &&
           <Overlay
-            title="Create collection"
+            title={this.props.t('DashboardView.CreateCollectionOverlay')}
             closeOverlay={this.returnToDashboard}
           >
             <CollectionCreate />
@@ -176,6 +177,7 @@ DashboardView.propTypes = {
   user: PropTypes.shape({
     username: PropTypes.string,
   }),
+  t: PropTypes.func.isRequired
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(DashboardView);
+export default withTranslation()(connect(mapStateToProps, mapDispatchToProps)(DashboardView));
diff --git a/client/modules/User/pages/LoginView.jsx b/client/modules/User/pages/LoginView.jsx
index 20b48b17..f490f5f6 100644
--- a/client/modules/User/pages/LoginView.jsx
+++ b/client/modules/User/pages/LoginView.jsx
@@ -10,6 +10,7 @@ import LoginForm from '../components/LoginForm';
 import { validateLogin } from '../../../utils/reduxFormUtils';
 import SocialAuthButton from '../components/SocialAuthButton';
 import Nav from '../../../components/Nav';
+import ResponsiveForm from '../components/ResponsiveForm';
 
 class LoginView extends React.Component {
   constructor(props) {
@@ -79,13 +80,13 @@ LoginView.propTypes = {
   user: PropTypes.shape({
     authenticated: PropTypes.bool
   }),
-  t: PropTypes.func.isRequired
+  t: PropTypes.func.isRequired,
 };
 
 LoginView.defaultProps = {
   user: {
     authenticated: false
-  }
+  },
 };
 
 export default withTranslation()(reduxForm({
diff --git a/client/modules/User/pages/SignupView.jsx b/client/modules/User/pages/SignupView.jsx
index b646a405..55ef1ae1 100644
--- a/client/modules/User/pages/SignupView.jsx
+++ b/client/modules/User/pages/SignupView.jsx
@@ -11,6 +11,8 @@ import apiClient from '../../../utils/apiClient';
 import { validateSignup } from '../../../utils/reduxFormUtils';
 import SocialAuthButton from '../components/SocialAuthButton';
 import Nav from '../../../components/Nav';
+import ResponsiveForm from '../components/ResponsiveForm';
+
 
 class SignupView extends React.Component {
   gotoHomePage = () => {
@@ -110,13 +112,13 @@ SignupView.propTypes = {
   user: PropTypes.shape({
     authenticated: PropTypes.bool
   }),
-  t: PropTypes.func.isRequired
+  t: PropTypes.func.isRequired,
 };
 
 SignupView.defaultProps = {
   user: {
     authenticated: false
-  }
+  },
 };
 
 export default withTranslation()(reduxForm({
diff --git a/client/routes.jsx b/client/routes.jsx
index a9d5632c..15f631e4 100644
--- a/client/routes.jsx
+++ b/client/routes.jsx
@@ -1,5 +1,6 @@
 import { Route, IndexRoute } from 'react-router';
 import React from 'react';
+
 import App from './modules/App/App';
 import IDEView from './modules/IDE/pages/IDEView';
 import MobileIDEView from './modules/IDE/pages/MobileIDEView';
@@ -19,6 +20,7 @@ import MobileDashboardView from './modules/Mobile/MobileDashboardView';
 import { getUser } from './modules/User/actions';
 import { stopSketch } from './modules/IDE/actions/ide';
 import { userIsAuthenticated, userIsNotAuthenticated, userIsAuthorized } from './utils/auth';
+import { mobileFirst, responsiveForm } from './utils/responsive';
 
 const checkAuth = (store) => {
   store.dispatch(getUser());
@@ -27,16 +29,17 @@ const checkAuth = (store) => {
 // TODO: This short-circuit seems unnecessary - using the mobile <Switch /> navigator (future) should prevent this from being called
 const onRouteChange = (store) => {
   const path = window.location.pathname;
-  if (path.includes('/mobile/preview')) return;
+  if (path.includes('preview')) return;
 
   store.dispatch(stopSketch());
 };
 
 const routes = store => (
   <Route path="/" component={App} onChange={() => { onRouteChange(store); }}>
-    <IndexRoute component={IDEView} onEnter={checkAuth(store)} />
-    <Route path="/login" component={userIsNotAuthenticated(LoginView)} />
-    <Route path="/signup" component={userIsNotAuthenticated(SignupView)} />
+    <IndexRoute onEnter={checkAuth(store)} component={mobileFirst(MobileIDEView, IDEView)} />
+
+    <Route path="/login" component={userIsNotAuthenticated(mobileFirst(responsiveForm(LoginView), LoginView))} />
+    <Route path="/signup" component={userIsNotAuthenticated(mobileFirst(responsiveForm(SignupView), SignupView))} />
     <Route path="/reset-password" component={userIsNotAuthenticated(ResetPasswordView)} />
     <Route path="/verify" component={EmailVerificationView} />
     <Route
@@ -46,28 +49,24 @@ const routes = store => (
     <Route path="/projects/:project_id" component={IDEView} />
     <Route path="/:username/full/:project_id" component={FullView} />
     <Route path="/full/:project_id" component={FullView} />
-    <Route path="/sketches" component={createRedirectWithUsername('/:username/sketches')} />
-    <Route path="/:username/assets" component={userIsAuthenticated(userIsAuthorized(DashboardView))} />
-    <Route path="/assets" component={createRedirectWithUsername('/:username/assets')} />
-    <Route path="/account" component={userIsAuthenticated(AccountView)} />
-    <Route path="/:username/sketches/:project_id" component={IDEView} />
-    <Route path="/:username/sketches/:project_id/add-to-collection" component={IDEView} />
-    <Route path="/:username/sketches" component={DashboardView} />
-    <Route path="/:username/collections" component={DashboardView} />
+
+    <Route path="/:username/assets" component={userIsAuthenticated(userIsAuthorized(mobileFirst(MobileDashboardView, DashboardView)))} />
+    <Route path="/:username/sketches" component={mobileFirst(MobileDashboardView, DashboardView)} />
+    <Route path="/:username/sketches/:project_id" component={mobileFirst(MobileIDEView, IDEView)} />
+    <Route path="/:username/sketches/:project_id/add-to-collection" component={mobileFirst(MobileIDEView, IDEView)} />
+    <Route path="/:username/collections" component={mobileFirst(MobileDashboardView, DashboardView)} />
+
     <Route path="/:username/collections/create" component={DashboardView} />
     <Route path="/:username/collections/:collection_id" component={CollectionView} />
+
+    <Route path="/sketches" component={createRedirectWithUsername('/:username/sketches')} />
+    <Route path="/assets" component={createRedirectWithUsername('/:username/assets')} />
+    <Route path="/account" component={userIsAuthenticated(AccountView)} />
     <Route path="/about" component={IDEView} />
 
-
-    <Route path="/mobile/preview" component={MobileSketchView} />
-    <Route path="/mobile/preferences" component={MobilePreferences} />
-    <Route path="/mobile" component={MobileIDEView} />
-
-    <Route path="/mobile/:username/sketches/:project_id" component={MobileIDEView} />
-    <Route path="/mobile/:username/assets" component={userIsAuthenticated(userIsAuthorized(MobileDashboardView))} />
-    <Route path="/mobile/:username/sketches" component={MobileDashboardView} />
-    <Route path="/mobile/:username/collections" component={MobileDashboardView} />
-    <Route path="/mobile/:username/collections/create" component={MobileDashboardView} />
+    {/* Mobile-only Routes */}
+    <Route path="/preview" component={MobileSketchView} />
+    <Route path="/preferences" component={MobilePreferences} />
 
   </Route>
 );
diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss
index 80c924b1..d0f62b27 100644
--- a/client/styles/abstracts/_variables.scss
+++ b/client/styles/abstracts/_variables.scss
@@ -88,6 +88,7 @@ $themes: (
     nav-border-color: $middle-light,
     error-color: $p5js-pink,
     table-row-stripe-color: $medium-light,
+    table-row-stripe-color-alternate: $medium-light,
     codefold-icon-open: url(../images/triangle-arrow-down.svg?byUrl),
     codefold-icon-closed: url(../images/triangle-arrow-right.svg?byUrl),
 
@@ -163,6 +164,7 @@ $themes: (
     nav-border-color: $middle-dark,
     error-color: $p5js-pink,
     table-row-stripe-color: $dark,
+    table-row-stripe-color-alternate: $darker,
     codefold-icon-open: url(../images/triangle-arrow-down-white.svg?byUrl),
     codefold-icon-closed: url(../images/triangle-arrow-right-white.svg?byUrl),
 
@@ -236,6 +238,7 @@ $themes: (
     nav-border-color: $middle-dark,
     error-color: $p5-contrast-pink,
     table-row-stripe-color: $dark,
+    table-row-stripe-color-alternate: $darker,
     codefold-icon-open: url(../images/triangle-arrow-down-white.svg?byUrl),
     codefold-icon-closed: url(../images/triangle-arrow-right-white.svg?byUrl),
 
diff --git a/client/styles/components/_quick-add.scss b/client/styles/components/_quick-add.scss
index 838a1d65..75f93773 100644
--- a/client/styles/components/_quick-add.scss
+++ b/client/styles/components/_quick-add.scss
@@ -1,11 +1,16 @@
 .quick-add-wrapper {
   min-width: #{600 / $base-font-size}rem;
-  overflow-y: scroll;
+  padding: #{24 / $base-font-size}rem;
+  height: 100%;
 }
 
 .quick-add {
   width: auto;
-  padding: #{24 / $base-font-size}rem;
+  overflow-y: scroll;
+  height: 100%;
+  @include themify() {
+    border: 1px solid getThemifyVariable('modal-border-color');
+  }
 }
 
 .quick-add__item {
@@ -23,7 +28,7 @@
 
 .quick-add__item:nth-child(odd) {
   @include themify() {
-    background: getThemifyVariable('table-row-stripe-color');
+    background: getThemifyVariable('table-row-stripe-color-alternate');
   }
 }
 
diff --git a/client/utils/responsive.jsx b/client/utils/responsive.jsx
new file mode 100644
index 00000000..05b0d84e
--- /dev/null
+++ b/client/utils/responsive.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import MediaQuery from 'react-responsive';
+import ResponsiveForm from '../modules/User/components/ResponsiveForm';
+
+export const mobileEnabled = () => (window.process.env.MOBILE_ENABLED === true);
+
+export const mobileFirst = (MobileComponent, Fallback) => (props) => {
+  const { forceDesktop } = useSelector(state => state.editorAccessibility);
+  return (
+    <MediaQuery minWidth={770}>
+      {matches => ((matches || forceDesktop || (!mobileEnabled()))
+        ? <Fallback {...props} />
+        : <MobileComponent {...props} />)}
+    </MediaQuery>
+  );
+};
+
+export const responsiveForm = DesktopComponent => props => (
+  <ResponsiveForm>
+    <DesktopComponent {...props} />
+  </ResponsiveForm>
+);
diff --git a/package-lock.json b/package-lock.json
index 8abec584..cf191511 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13124,6 +13124,11 @@
         }
       }
     },
+    "css-mediaquery": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/css-mediaquery/-/css-mediaquery-0.1.2.tgz",
+      "integrity": "sha1-aiw3NEkoYYYxxUvTPO3TAdoYvqA="
+    },
     "css-select": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz",
@@ -19020,6 +19025,11 @@
         }
       }
     },
+    "hyphenate-style-name": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
+      "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
+    },
     "i18next": {
       "version": "19.5.4",
       "resolved": "https://registry.npmjs.org/i18next/-/i18next-19.5.4.tgz",
@@ -25866,6 +25876,14 @@
         "unquote": "^1.1.0"
       }
     },
+    "matchmediaquery": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.3.1.tgz",
+      "integrity": "sha512-Hlk20WQHRIm9EE9luN1kjRjYXAQToHOIAHPJn9buxBwuhfTHoKUcX+lXBbxc85DVQfXYbEQ4HcwQdd128E3qHQ==",
+      "requires": {
+        "css-mediaquery": "^0.1.2"
+      }
+    },
     "material-colors": {
       "version": "1.2.6",
       "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz",
@@ -32233,6 +32251,17 @@
         }
       }
     },
+    "react-responsive": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-8.1.0.tgz",
+      "integrity": "sha512-U8Nv2/ZWACIw/fAE9XNPbc2Xo33X5q1bcCASc2SufvJ9ifB+o/rokfogfznSVcvS22hN1rafGi0uZD6GiVFEHw==",
+      "requires": {
+        "hyphenate-style-name": "^1.0.0",
+        "matchmediaquery": "^0.3.0",
+        "prop-types": "^15.6.1",
+        "shallow-equal": "^1.1.0"
+      }
+    },
     "react-router": {
       "version": "3.2.5",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-3.2.5.tgz",
@@ -34519,8 +34548,7 @@
     "shallow-equal": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz",
-      "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==",
-      "dev": true
+      "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA=="
     },
     "shallowequal": {
       "version": "1.1.0",
diff --git a/package.json b/package.json
index 01f558f9..3d1d85af 100644
--- a/package.json
+++ b/package.json
@@ -201,6 +201,7 @@
     "react-hot-loader": "^4.12.19",
     "react-i18next": "^11.5.0",
     "react-redux": "^7.2.0",
+    "react-responsive": "^8.1.0",
     "react-router": "^3.2.5",
     "react-split-pane": "^0.1.89",
     "react-tabs": "^2.3.1",
diff --git a/server/server.js b/server/server.js
index c9794925..d82aa6d8 100644
--- a/server/server.js
+++ b/server/server.js
@@ -132,10 +132,6 @@ app.get(
 // isomorphic rendering
 app.use('/', serverRoutes);
 
-if (process.env.MOBILE_ENABLED) {
-  app.use('/mobile', serverRoutes);
-}
-
 app.use(assetRoutes);
 
 app.use('/', embedRoutes);
diff --git a/server/views/index.js b/server/views/index.js
index 6aca8975..ecc269c0 100644
--- a/server/views/index.js
+++ b/server/views/index.js
@@ -33,7 +33,7 @@ export function renderIndex() {
         window.process.env.UI_COLLECTIONS_ENABLED = ${process.env.UI_COLLECTIONS_ENABLED === 'false' ? false : true};
         window.process.env.UPLOAD_LIMIT = ${process.env.UPLOAD_LIMIT ? `${process.env.UPLOAD_LIMIT}` : undefined};
         window.process.env.MOBILE_ENABLED = ${process.env.MOBILE_ENABLED ? `${process.env.MOBILE_ENABLED}` : undefined};
-        window.process.env.TRANSLATIONS_ENABLED = ${process.env.TRANSLATIONS_ENABLED === 'true' ? true :false}; 
+        window.process.env.TRANSLATIONS_ENABLED = ${process.env.TRANSLATIONS_ENABLED === 'true' ? true : false}; 
 
       </script>
     </head>
diff --git a/translations/locales/en-US/translations.json b/translations/locales/en-US/translations.json
index 9ff6b536..8c548068 100644
--- a/translations/locales/en-US/translations.json
+++ b/translations/locales/en-US/translations.json
@@ -88,7 +88,8 @@
     "SketchSaved": "Sketch saved.",
     "SketchFailedSave": "Failed to save sketch.",
     "AutosaveEnabled": "Autosave enabled.",
-    "LangChange": "Language changed"
+    "LangChange": "Language changed",
+    "SettingsSaved": "Settings saved."
   },
   "Toolbar": {
     "Preview": "Preview",
@@ -174,18 +175,42 @@
     }
   },
   "Sidebar": {
-    "Create": "Create",
-    "EnterName": "enter a name",
-    "Add": "Add",
-    "Folder": "Folder"
+    "Title": "Sketch Files",
+    "ToggleARIA": "Toggle open/close sketch file options",
+    "AddFolder": "Create folder",
+    "AddFolderARIA": "add folder",
+    "AddFile": "Create file",
+    "AddFileARIA": "add file",
+    "UploadFile": "Upload file",
+    "UploadFileARIA": "upload file"
+  },
+  "FileNode": {
+    "OpenFolderARIA": "Open folder contents",
+    "CloseFolderARIA": "Close folder contents",
+    "ToggleFileOptionsARIA": "Toggle open/close file options",
+    "AddFolder": "Create folder",
+    "AddFolderARIA": "add folder",
+    "AddFile": "Create file",
+    "AddFileARIA": "add file",
+    "UploadFile": "Upload file",
+    "UploadFileARIA": "upload file",
+    "Rename": "Rename",
+    "Delete": "Delete"
   },
   "Common": {
     "Error": "Error",
+    "ErrorARIA": "Error",
     "Save": "Save",
-    "p5logoARIA": "p5.js Logo"
+    "p5logoARIA": "p5.js Logo",
+    "DeleteConfirmation": "Are you sure you want to delete {{name}}?"
   },
   "IDEView": {
-    "SubmitFeedback": "Submit Feedback"
+    "SubmitFeedback": "Submit Feedback",
+    "SubmitFeedbackARIA": "submit-feedback",
+    "AddCollectionTitle": "Add to collection",
+    "AddCollectionARIA":"add to collection",
+    "ShareTitle": "Share",
+    "ShareARIA":"share"
   },
   "NewFileModal": {
     "Title": "Create File",
@@ -308,7 +333,6 @@
     "AlreadyHave": "Already have an account?",
     "Login": "Log In"
   },
-
   "EmailVerificationView": {
     "Title": "p5.js Web Editor | Email Verification",
     "Verify": "Verify your email",
@@ -316,5 +340,139 @@
     "Checking": "Validating token, please wait...",
     "Verified": "All done, your email address has been verified.",
     "InvalidState": "Something went wrong."
+  },
+  "UploadFileModal": {
+    "Title": "Upload File",
+    "CloseButtonARIA": "Close upload file modal",
+    "SizeLimitError": "Error: You cannot upload any more files. You have reached the total size limit of {{sizeLimit}}.\n                If you would like to upload more, please remove the ones you aren't using anymore by\n                in your "
+  },
+  "FileUploader": {
+    "DictDefaultMessage": "Drop files here or click to use the file browser"
+  },
+  "ErrorModal": {
+    "MessageLogin": "In order to save sketches, you must be logged in. Please ",
+    "Login": "Login",
+    "LoginOr": " or ",
+    "SignUp": "Sign Up",
+    "MessageLoggedOut": "It looks like you've been logged out. Please ",
+    "LogIn": "log in",
+    "SavedDifferentWindow": "The project you have attempted to save has been saved from another window.\n        Please refresh the page to see the latest version."
+  },
+  "ShareModal": {
+    "Embed": "Embed",
+    "Present": "Present",
+    "Fullscreen": "Fullscreen",
+    "Edit": "Edit"
+  },
+  "CollectionView": {
+    "TitleCreate": "Create collection",
+    "TitleDefault": "collection"
+  },
+  "Collection": {
+    "Title": "p5.js Web Editor | My collections",
+    "AnothersTitle": "p5.js Web Editor | {{anotheruser}}'s collections",
+    "Share": "Share",
+    "URLLink": "Link to Collection",
+    "AddSketch": "Add Sketch",
+    "DeleteFromCollection": "Are you sure you want to remove {{name_sketch}} from this collection?",
+    "SketchDeleted": "Sketch deleted",
+    "SketchRemoveARIA": "Remove sketch from collection",
+    "DescriptionPlaceholder": "Add description",
+    "Description": "description",
+    "NumSketches": "{{count}} sketch",
+    "NumSketches_plural": "{{count}} sketches",
+    "By":"Collection by ",
+    "NoSketches": "No sketches in collection",
+    "HeaderName": "Name",
+    "HeaderCreatedAt": "Date Added",
+    "HeaderUser": "Owner",
+    "DirectionAscendingARIA": "Ascending",
+    "DirectionDescendingARIA": "Descending",
+    "ButtonLabelAscendingARIA": "Sort by {{displayName}} ascending.",
+    "ButtonLabelDescendingARIA": "Sort by {{displayName}} descending."
+  },
+  "AddToCollectionList": {
+    "Title": "p5.js Web Editor | My collections",
+    "AnothersTitle": "p5.js Web Editor | {{anotheruser}}'s collections",
+    "Empty": "No collections"
+  },
+  "CollectionCreate": {
+    "Title": "p5.js Web Editor | Create collection",
+    "FormError": "Couldn't create collection",
+    "FormLabel": "Collection name",
+    "FormLabelARIA": "name",
+    "NameRequired": "Collection name is required",
+    "Description": "Description (optional)",
+    "DescriptionARIA": "description",
+    "DescriptionPlaceholder": "My fave sketches",
+    "SubmitCollectionCreate": "Create collection"
+  },
+  "DashboardView": {
+    "CreateCollection": "Create collection",
+    "NewSketch": "New sketch",
+    "CreateCollectionOverlay": "Create collection"
+  },
+  "DashboardTabSwitcher": {
+    "Sketches": "Sketches",
+    "Collections": "Collections",
+    "Assets": "Assets"
+  },
+  "CollectionList": {
+    "Title": "p5.js Web Editor | My collections",
+    "AnothersTitle": "p5.js Web Editor | {{anotheruser}}'s collections",
+    "NoCollections": "No collections.",
+    "HeaderName": "Name",
+    "HeaderCreatedAt": "Date Created",
+    "HeaderCreatedAt_mobile": "Created",
+    "HeaderUpdatedAt": "Date Updated",
+    "HeaderUpdatedAt_mobile": "Updated",
+    "HeaderNumItems": "# sketches",
+    "HeaderNumItems_mobile": "# sketches",
+    "DirectionAscendingARIA": "Ascending",
+    "DirectionDescendingARIA": "Descending",
+    "ButtonLabelAscendingARIA": "Sort by {{displayName}} ascending.",
+    "ButtonLabelDescendingARIA": "Sort by {{displayName}} descending.",
+    "AddSketch": "Add Sketch"
+  },
+  "CollectionListRow": {
+    "ToggleCollectionOptionsARIA": "Toggle Open/Close collection options",
+    "AddSketch": "Add sketch",
+    "Delete": "Delete",
+    "Rename": "Rename"
+  },
+  "Overlay": {
+    "AriaLabel": "Close {{title}} overlay"
+  },
+  "QuickAddList":{
+    "ButtonLabelRemove": "Remove from collection",
+    "ButtonLabelAddToCollection": "Add to collection",
+    "View": "View"
+  },
+  "SketchList": {
+    "View": "View",
+    "Title": "p5.js Web Editor | My sketches",
+    "AnothersTitle": "p5.js Web Editor | {{anotheruser}}'s sketches",
+    "ToggleLabelARIA": "Toggle Open/Close Sketch Options",
+    "DropdownRename": "Rename",
+    "DropdownDownload": "Download",
+    "DropdownDuplicate": "Duplicate",
+    "DropdownAddToCollection": "Add to collection",
+    "DropdownDelete": "Delete",
+    "DirectionAscendingARIA": "Ascending",
+    "DirectionDescendingARIA": "Descending",
+    "ButtonLabelAscendingARIA": "Sort by {{displayName}} ascending.",
+    "ButtonLabelDescendingARIA": "Sort by {{displayName}} descending.",
+    "AddToCollectionOverlayTitle": "Add to collection",
+    "HeaderName": "Sketch",
+    "HeaderCreatedAt": "Date Created",
+    "HeaderCreatedAt_mobile": "Created",
+    "HeaderUpdatedAt": "Date Updated",
+    "HeaderUpdatedAt_mobile": "Updated",
+    "NoSketches": "No sketches."
+  },
+  "AddToCollectionSketchList": {
+    "Title": "p5.js Web Editor | My sketches",
+    "AnothersTitle": "p5.js Web Editor | {{anotheruser}}'s sketches",
+    "NoCollections": "No collections."
   }
 }
diff --git a/translations/locales/es-419/translations.json b/translations/locales/es-419/translations.json
index 0217d46c..089c6768 100644
--- a/translations/locales/es-419/translations.json
+++ b/translations/locales/es-419/translations.json
@@ -88,7 +88,8 @@
     "SketchSaved": "Bosquejo guardado.",
     "SketchFailedSave": "Fallo al guardar el bosquejo.",
     "AutosaveEnabled": "Grabado automático activado.",
-    "LangChange": "Lenguaje cambiado"
+    "LangChange": "Lenguaje cambiado",
+    "SettingsSaved": "Configuración guardada."
   },
   "Toolbar": {
     "Preview": "Vista previa",
@@ -174,18 +175,42 @@
     }
   },
   "Sidebar": {
-    "Create": "Crear",
-    "EnterName": "Introduce un nombre",
-    "Add": "Agregar",
-    "Folder": "Directorio"
+    "Title": "Archivos de Bosquejo",
+    "ToggleARIA": "Alternar abrir/cerrar opciones de archivo de bosquejo",
+    "AddFolder": "Crear directorio",
+    "AddFolderARIA": "Agregar directorio",
+    "AddFile": "Crear archivo",
+    "AddFileARIA": "agregar archivo",
+    "UploadFile": "Subir archivo",
+    "UploadFileARIA": "Subir archivo"
+  },
+  "FileNode": {
+    "OpenFolderARIA": "Abrir contenidos del directorio",
+    "CloseFolderARIA": "Cerrar contenidos del directorio",
+    "ToggleFileOptionsARIA": "Alternar abrir/cerrar opciones de archivo",
+    "AddFolder": "Crear directorio",
+    "AddFolderARIA": "Agregar directorio",
+    "AddFile": "Crear archivo",
+    "AddFileARIA": "agregar archivo",
+    "UploadFile": "Subir archivo",
+    "UploadFileARIA": "Subir archivo",
+    "Rename": "Renombrar",
+    "Delete": "Borrar"
   },
   "Common": {
     "Error": "Error",
+    "ErrorARIA": "Error",
     "Save": "Guardar",
-    "p5logoARIA": "Logo p5.js "
+    "p5logoARIA": "Logo p5.js ",
+    "DeleteConfirmation": "¿Estás seguro que quieres borrar {{name}}?"
   },
   "IDEView": {
-    "SubmitFeedback": "Enviar retroalimentación"
+    "SubmitFeedback": "Enviar retroalimentación",
+    "SubmitFeedbackARIA": "Enviar retroalimentación",
+    "AddCollectionTitle": "Agregar a colección",
+    "AddCollectionARIA":"Agregar a colección",
+    "ShareTitle": "Compartir",
+    "ShareARIA":"compartir"
   },
   "NewFileModal": {
     "Title": "Crear Archivo",
@@ -216,7 +241,7 @@
   "ResetPasswordView": {
     "Title": "Editor Web p5.js | Regenerar Contraseña",
     "Reset": "Regenerar Contraseña",
-    "Submitted": "Your password reset email should arrive shortly. If you don't see it, check\n            in your spam folder as sometimes it can end up there.",
+    "Submitted": "Tu correo para regenerar la contraseña debe llegar pronto. Si no lo ves, revisa\n tu carpeta de spam puesto que algunas veces puede terminar ahí.",
     "Login": "Ingresa",
     "LoginOr": "o",
     "SignUp": "Registráte"
@@ -264,7 +289,7 @@
     "AccessTokensTab": "Tokens de acceso"
   },
   "APIKeyForm": {
-    "ConfirmDelete": "¿Estas seguro que quieres borrar {{key_label}}?",
+    "ConfirmDelete": "¿Estás seguro que quieres borrar {{key_label}}?",
     "Summary": " Los Tokens de acceso personal actuan como tu contraseña para permitir\n  a scripts automáticos acceder al  API del Editor. Crea un token por cada script \n que necesite acceso.",
     "CreateToken": "Crear nuevo token",
     "TokenLabel": "¿Para que es este token?",
@@ -315,5 +340,139 @@
     "Checking": "Validando token, por favor espera...",
     "Verified": "Concluido, tu correo electrónico ha sido verificado.",
     "InvalidState": "Algo salió mal."
+  },
+  "UploadFileModal": {
+    "Title": "Subir Archivo",
+    "CloseButtonARIA": "Cerrar diálogo para subir archivo",
+    "SizeLimitError": "Error: No puedes subir archivos. Has alcanzado el limite de tamaño total de {{sizeLimit}}.\n         Si quieres agregar más,por favor remueve alugnos que no estes usando en tus "
+  },
+  "FileUploader": {
+    "DictDefaultMessage": "Deposita los archivos aquí o haz click para usar el navegador de archivos"
+  },
+  "ErrorModal": {
+    "MessageLogin": "Para poder guardar bosquejos, debes ingresar a tu cuenta. Por favor ",
+    "Login": "Ingresa",
+    "LoginOr": " o ",
+    "SignUp": "Registráte",
+    "MessageLoggedOut": "Parece que has salido de tu cuenta. Por favor ",
+    "LogIn": "ingresa",
+    "SavedDifferentWindow": " El proyecto que has intentado guardar ha sido guardado desde otra ventana.\n  Por favor refresca la página para ver la versión más actual."
+  },
+  "ShareModal": {
+    "Embed": "Incrustar",
+    "Present": "Presentar",
+    "Fullscreen": "Pantalla Completa",
+    "Edit": "Editar"
+  },
+  "CollectionView": {
+    "TitleCreate": "Crear colección",
+    "TitleDefault": "colección"
+  },
+  "Collection": {
+    "Title": "p5.js Web Editor | Mis colecciones",
+    "AnothersTitle": "Editor Web p5.js | Colecciones de {{anotheruser}}",
+    "Share": "Compartir",
+    "URLLink": "Liga a la Colección",
+    "AddSketch": "Agregar Bosquejo",
+    "DeleteFromCollection": "¿Estás seguro que quieres remover {{name_sketch}} de esta colección?",
+    "SketchDeleted": "El bosquejo fue eliminado",
+    "SketchRemoveARIA": "Remover bosquejo de la colección",
+    "DescriptionPlaceholder": "Agregar descripción",
+    "Description": "descripción",
+    "NumSketches": "{{count}} bosquejo",
+    "NumSketches_plural": "{{count}} bosquejos",
+    "By":"Colección por ",
+    "NoSketches": "No hay bosquejos en la colección",
+    "HeaderName": "Nombre",
+    "HeaderCreatedAt": "Fecha de agregación",
+    "HeaderUser": "Propietario",
+    "DirectionAscendingARIA": "Ascendente",
+    "DirectionDescendingARIA": "Descendente",
+    "ButtonLabelAscendingARIA": "Ordenar por {{displayName}} ascendente.",
+    "ButtonLabelDescendingARIA": "Ordenar por {{displayName}} descendente."
+  },
+  "AddToCollectionList": {
+    "Title": "p5.js Web Editor | Mis colecciones",
+    "AnothersTitle": "Editor Web p5.js | Colecciones de {{anotheruser}}",
+    "Empty": "No hay colecciones"
+  },
+  "CollectionCreate": {
+    "Title": "Editor Web p5.js | Crear colección",
+    "FormError": "No se pudo crear colección",
+    "FormLabel": "Nombre colección ",
+    "FormLabelARIA": "nombre de la colección",
+    "NameRequired": "Se requiere nombre de colección",
+    "Description": "Descripción (opcional)",
+    "DescriptionARIA": "descripción",
+    "DescriptionPlaceholder": "Mis bosquejos favoritos",
+    "SubmitCollectionCreate": "Crear colección"
+  },
+  "DashboardView": {
+    "CreateCollection": "Crear colección",
+    "NewSketch": "Nuevo bosquejo",
+    "CreateCollectionOverlay": "Crear colección"
+  },
+  "DashboardTabSwitcher": {
+    "Sketches": "Bosquejos",
+    "Collections": "Colecciones ",
+    "Assets": "Assets"
+  },
+  "CollectionList": {
+    "Title": "p5.js Web Editor | Mis colecciones",
+    "AnothersTitle": "Editor Web p5.js | Colecciones de {{anotheruser}}",
+    "NoCollections": "No hay colecciones.",
+    "HeaderName": "Nombre",
+    "HeaderCreatedAt": "Fecha Creación",
+    "HeaderCreatedAt_mobile": "Creación",
+    "HeaderUpdatedAt": "Fecha Actualización",
+    "HeaderUpdatedAt_mobile": "Actualización",
+    "HeaderNumItems": "# bosquejos",
+    "HeaderNumItems_mobile": "Bosquejos",
+    "DirectionAscendingARIA": "Ascendente",
+    "DirectionDescendingARIA": "Descendente",
+    "ButtonLabelAscendingARIA": "Ordenar por {{displayName}} ascendente.",
+    "ButtonLabelDescendingARIA": "Ordenar por {{displayName}} descendente.",
+    "AddSketch": "Agregar Bosquejo"
+  },
+  "CollectionListRow": {
+    "ToggleCollectionOptionsARIA": "Alternar Abrir/Cerrar opciones de colección",
+    "AddSketch": "Agregar bosquejo",
+    "Delete": "Borrar",
+    "Rename": "Renombrar"
+  },
+  "Overlay": {
+    "AriaLabel": "Cerrar la capa {{title}}"
+  },
+  "QuickAddList":{
+    "ButtonLabelRemove": "Remove from collection",
+    "ButtonLabelAddToCollection": "Add to collection",
+    "View": "Ver"
+  },
+  "SketchList": {
+    "View": "Ver",
+    "Title": "p5.js Web Editor | Mis bosquejos",
+    "AnothersTitle": "Editor Web p5.js | Bosquejos de {{anotheruser}}",
+    "ToggleLabelARIA": "Alternar Abrir/Cerrar Opciones de Bosquejo",
+    "DropdownRename": "Renombrar",
+    "DropdownDownload": "Descargar",
+    "DropdownDuplicate": "Duplicar",
+    "DropdownAddToCollection": "Agregar a Colección",
+    "DropdownDelete": "Borrar",
+    "DirectionAscendingARIA": "Ascendente",
+    "DirectionDescendingARIA": "Descendente",
+    "ButtonLabelAscendingARIA": "Ordenar por {{displayName}} ascendente.",
+    "ButtonLabelDescendingARIA": "Ordenar por {{displayName}} descendente.",
+    "AddToCollectionOverlayTitle": "Agregar a colección",
+    "HeaderName": "Bosquejo",
+    "HeaderCreatedAt": "Fecha Creación",
+    "HeaderCreatedAt_mobile": "Creación",
+    "HeaderUpdatedAt": "Fecha Actualización",
+    "HeaderUpdatedAt_mobile": "Actualización",
+    "NoSketches": "No hay bosquejos."
+  },
+  "AddToCollectionSketchList": {
+    "Title": "p5.js Web Editor | Mis bosquejos",
+    "AnothersTitle": "Editor Web p5.js | Bosquejos de {{anotheruser}}",
+    "NoCollections": "No hay colecciones."
   }
 }