diff --git a/.env.example b/.env.example
index 7680fb90..5e696e25 100644
--- a/.env.example
+++ b/.env.example
@@ -1,4 +1,4 @@
-API_URL=/api
+API_URL=/editor
 AWS_ACCESS_KEY=<your-aws-access-key>
 AWS_REGION=<your-aws-region>
 AWS_SECRET_KEY=<your-aws-secret-key>
@@ -23,3 +23,5 @@ PORT=8000
 S3_BUCKET=<your-s3-bucket>
 S3_BUCKET_URL_BASE=<alt-for-s3-url>
 SESSION_SECRET=whatever_you_want_this_to_be_it_only_matters_for_production
+UI_ACCESS_TOKEN_ENABLED=false
+UPLOAD_LIMIT=250000000
diff --git a/.github/config.yml b/.github/config.yml
index b4ec5b1a..ab6fa5c5 100644
--- a/.github/config.yml
+++ b/.github/config.yml
@@ -10,7 +10,7 @@ newIssueWelcomeComment: >
 
 # Comment to be posted to on PRs from first time contributors in your repository
 newPRWelcomeComment: >
-  🎉 Thanks for opening this pull request! Please check out our [contributing guidelines](https://github.com/processing/p5.js-web-editor/blob/master/CONTRIBUTING.md) if you haven't already.
+  🎉 Thanks for opening this pull request! Please check out our [contributing guidelines](https://github.com/processing/p5.js-web-editor/blob/master/.github/CONTRIBUTING.md) if you haven't already.
 
 # Configuration for first-pr-merge - https://github.com/behaviorbot/first-pr-merge
 
diff --git a/.nvmrc b/.nvmrc
new file mode 100644
index 00000000..66df3b7a
--- /dev/null
+++ b/.nvmrc
@@ -0,0 +1 @@
+12.16.1
diff --git a/.travis.yml b/.travis.yml
index 299ff645..da57c24a 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,7 +1,7 @@
 sudo: required
 language: node_js
 node_js:
- - "11.15.0"
+ - "12.16.1"
 
 cache:
   directories:
diff --git a/Dockerfile b/Dockerfile
index abd61798..d2364735 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,4 +1,4 @@
-FROM node:10.15.0 as base
+FROM node:12.16.1 as base
 ENV APP_HOME=/usr/src/app \
   TERM=xterm
 RUN mkdir -p $APP_HOME
diff --git a/app.json b/app.json
index a588258e..3eff82c9 100644
--- a/app.json
+++ b/app.json
@@ -16,7 +16,7 @@
   ],
   "env": {
     "API_URL": {
-      "value": "/api"
+      "value": "/editor"
     },
     "AWS_ACCESS_KEY": {
       "description": "AWS Access Key",
diff --git a/client/components/AddRemoveButton.jsx b/client/components/AddRemoveButton.jsx
new file mode 100644
index 00000000..f0ec1272
--- /dev/null
+++ b/client/components/AddRemoveButton.jsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import InlineSVG from 'react-inlinesvg';
+
+const addIcon = require('../images/plus.svg');
+const removeIcon = require('../images/minus.svg');
+
+const AddRemoveButton = ({ type, onClick }) => {
+  const alt = type === 'add' ? 'add to collection' : 'remove from collection';
+  const icon = type === 'add' ? addIcon : removeIcon;
+
+  return (
+    <button className="overlay__close-button" onClick={onClick}>
+      <InlineSVG src={icon} alt={alt} />
+    </button>
+  );
+};
+
+AddRemoveButton.propTypes = {
+  type: PropTypes.oneOf(['add', 'remove']).isRequired,
+  onClick: PropTypes.func.isRequired,
+};
+
+export default AddRemoveButton;
diff --git a/client/components/Nav.jsx b/client/components/Nav.jsx
index 617f6883..3886ccc8 100644
--- a/client/components/Nav.jsx
+++ b/client/components/Nav.jsx
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router';
-import { Link } from 'react-router';
+import { Link, browserHistory } from 'react-router';
 import InlineSVG from 'react-inlinesvg';
 import classNames from 'classnames';
 import * as IDEActions from '../modules/IDE/actions/ide';
@@ -12,6 +12,7 @@ import { setAllAccessibleOutput } from '../modules/IDE/actions/preferences';
 import { logoutUser } from '../modules/User/actions';
 
 import { metaKeyName, } from '../utils/metaKey';
+import caretLeft from '../images/left-arrow.svg';
 
 const triangleUrl = require('../images/down-filled-triangle.svg');
 const logoUrl = require('../images/p5js-logo-small.svg');
@@ -92,11 +93,12 @@ class Nav extends React.PureComponent {
   }
 
   handleNew() {
-    if (!this.props.unsavedChanges) {
+    const { unsavedChanges, warnIfUnsavedChanges } = this.props;
+    if (!unsavedChanges) {
       this.props.showToast(1500);
       this.props.setToastText('Opened new sketch.');
       this.props.newProject();
-    } else if (this.props.warnIfUnsavedChanges()) {
+    } else if (warnIfUnsavedChanges && warnIfUnsavedChanges()) {
       this.props.showToast(1500);
       this.props.setToastText('Opened new sketch.');
       this.props.newProject();
@@ -165,6 +167,8 @@ class Nav extends React.PureComponent {
 
   handleLogout() {
     this.props.logoutUser();
+    // if you're on the settings page, probably.
+    browserHistory.push('/');
     this.setDropdown('none');
   }
 
@@ -222,6 +226,439 @@ class Nav extends React.PureComponent {
     this.timer = setTimeout(this.setDropdown.bind(this, 'none'), 10);
   }
 
+  renderDashboardMenu(navDropdownState) {
+    return (
+      <ul className="nav__items-left" title="project-menu">
+        <li className="nav__item-logo">
+          <InlineSVG src={logoUrl} alt="p5.js logo" className="svg__logo" />
+        </li>
+        <li className="nav__item nav__item--no-icon">
+          <Link to="/" className="nav__back-link">
+            <InlineSVG src={caretLeft} className="nav__back-icon" />
+            <span className="nav__item-header">
+              Back to Editor
+            </span>
+          </Link>
+        </li>
+      </ul>
+    );
+  }
+
+  renderProjectMenu(navDropdownState) {
+    return (
+      <ul className="nav__items-left" title="project-menu">
+        <li className="nav__item-logo">
+          <InlineSVG src={logoUrl} alt="p5.js logo" className="svg__logo" />
+        </li>
+        <li className={navDropdownState.file}>
+          <button
+            onClick={this.toggleDropdownForFile}
+            onBlur={this.handleBlur}
+            onFocus={this.clearHideTimeout}
+            onMouseOver={() => {
+              if (this.state.dropdownOpen !== 'none') {
+                this.setDropdown('file');
+              }
+            }}
+          >
+            <span className="nav__item-header">File</span>
+            <InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
+          </button>
+          <ul className="nav__dropdown">
+            <li className="nav__dropdown-item">
+              <button
+                onClick={this.handleNew}
+                onFocus={this.handleFocusForFile}
+                onBlur={this.handleBlur}
+              >
+                New
+              </button>
+            </li>
+            { __process.env.LOGIN_ENABLED && (!this.props.project.owner || this.isUserOwner()) &&
+            <li className="nav__dropdown-item">
+              <button
+                onClick={this.handleSave}
+                onFocus={this.handleFocusForFile}
+                onBlur={this.handleBlur}
+              >
+                Save
+                <span className="nav__keyboard-shortcut">{metaKeyName}+s</span>
+              </button>
+            </li> }
+            { this.props.project.id && this.props.user.authenticated &&
+            <li className="nav__dropdown-item">
+              <button
+                onClick={this.handleDuplicate}
+                onFocus={this.handleFocusForFile}
+                onBlur={this.handleBlur}
+              >
+                Duplicate
+              </button>
+            </li> }
+            { this.props.project.id &&
+            <li className="nav__dropdown-item">
+              <button
+                onClick={this.handleShare}
+                onFocus={this.handleFocusForFile}
+                onBlur={this.handleBlur}
+              >
+                Share
+              </button>
+            </li> }
+            { this.props.project.id &&
+            <li className="nav__dropdown-item">
+              <button
+                onClick={this.handleDownload}
+                onFocus={this.handleFocusForFile}
+                onBlur={this.handleBlur}
+              >
+                Download
+              </button>
+            </li> }
+            { this.props.user.authenticated &&
+            <li className="nav__dropdown-item">
+              <Link
+                to={`/${this.props.user.username}/sketches`}
+                onFocus={this.handleFocusForFile}
+                onBlur={this.handleBlur}
+                onClick={this.setDropdownForNone}
+              >
+                Open
+              </Link>
+            </li> }
+            {__process.env.UI_COLLECTIONS_ENABLED &&
+              this.props.user.authenticated &&
+              this.props.project.id &&
+              <li className="nav__dropdown-item">
+                <Link
+                  to={`/${this.props.user.username}/sketches/${this.props.project.id}/add-to-collection`}
+                  onFocus={this.handleFocusForFile}
+                  onBlur={this.handleBlur}
+                  onClick={this.setDropdownForNone}
+                >
+                  Add to Collection
+                </Link>
+              </li>}
+            { __process.env.EXAMPLES_ENABLED &&
+            <li className="nav__dropdown-item">
+              <Link
+                to="/p5/sketches"
+                onFocus={this.handleFocusForFile}
+                onBlur={this.handleBlur}
+                onClick={this.setDropdownForNone}
+              >
+                Examples
+              </Link>
+            </li> }
+          </ul>
+        </li>
+        <li className={navDropdownState.edit}>
+          <button
+            onClick={this.toggleDropdownForEdit}
+            onBlur={this.handleBlur}
+            onFocus={this.clearHideTimeout}
+            onMouseOver={() => {
+              if (this.state.dropdownOpen !== 'none') {
+                this.setDropdown('edit');
+              }
+            }}
+          >
+            <span className="nav__item-header">Edit</span>
+            <InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
+          </button>
+          <ul className="nav__dropdown" >
+            <li className="nav__dropdown-item">
+              <button
+                onClick={() => {
+                  this.props.cmController.tidyCode();
+                  this.setDropdown('none');
+                }}
+                onFocus={this.handleFocusForEdit}
+                onBlur={this.handleBlur}
+              >
+                Tidy Code
+                <span className="nav__keyboard-shortcut">{'\u21E7'}+Tab</span>
+              </button>
+            </li>
+            <li className="nav__dropdown-item">
+              <button
+                onClick={this.handleFind}
+                onFocus={this.handleFocusForEdit}
+                onBlur={this.handleBlur}
+              >
+                Find
+                <span className="nav__keyboard-shortcut">{metaKeyName}+F</span>
+              </button>
+            </li>
+            <li className="nav__dropdown-item">
+              <button
+                onClick={this.handleFindNext}
+                onFocus={this.handleFocusForEdit}
+                onBlur={this.handleBlur}
+              >
+                Find Next
+                <span className="nav__keyboard-shortcut">{metaKeyName}+G</span>
+              </button>
+            </li>
+            <li className="nav__dropdown-item">
+              <button
+                onClick={this.handleFindPrevious}
+                onFocus={this.handleFocusForEdit}
+                onBlur={this.handleBlur}
+              >
+                Find Previous
+                <span className="nav__keyboard-shortcut">{'\u21E7'}+{metaKeyName}+G</span>
+              </button>
+            </li>
+          </ul>
+        </li>
+        <li className={navDropdownState.sketch}>
+          <button
+            onClick={this.toggleDropdownForSketch}
+            onBlur={this.handleBlur}
+            onFocus={this.clearHideTimeout}
+            onMouseOver={() => {
+              if (this.state.dropdownOpen !== 'none') {
+                this.setDropdown('sketch');
+              }
+            }}
+          >
+            <span className="nav__item-header">Sketch</span>
+            <InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
+          </button>
+          <ul className="nav__dropdown">
+            <li className="nav__dropdown-item">
+              <button
+                onClick={this.handleAddFile}
+                onFocus={this.handleFocusForSketch}
+                onBlur={this.handleBlur}
+              >
+                Add File
+              </button>
+            </li>
+            <li className="nav__dropdown-item">
+              <button
+                onClick={this.handleAddFolder}
+                onFocus={this.handleFocusForSketch}
+                onBlur={this.handleBlur}
+              >
+                Add Folder
+              </button>
+            </li>
+            <li className="nav__dropdown-item">
+              <button
+                onClick={this.handleRun}
+                onFocus={this.handleFocusForSketch}
+                onBlur={this.handleBlur}
+              >
+                Run
+                <span className="nav__keyboard-shortcut">{metaKeyName}+Enter</span>
+              </button>
+            </li>
+            <li className="nav__dropdown-item">
+              <button
+                onClick={this.handleStop}
+                onFocus={this.handleFocusForSketch}
+                onBlur={this.handleBlur}
+              >
+                Stop
+                <span className="nav__keyboard-shortcut">{'\u21E7'}+{metaKeyName}+Enter</span>
+              </button>
+            </li>
+            {/* <li className="nav__dropdown-item">
+              <button
+                onClick={this.handleStartAccessible}
+                onFocus={this.handleFocusForSketch}
+                onBlur={this.handleBlur}
+              >
+                Start Accessible
+                <span className="nav__keyboard-shortcut">{'\u21E7'}+{metaKeyName}+1</span>
+              </button>
+            </li>
+            <li className="nav__dropdown-item">
+              <button
+                onClick={this.handleStopAccessible}
+                onFocus={this.handleFocusForSketch}
+                onBlur={this.handleBlur}
+              >
+                Stop Accessible
+                <span className="nav__keyboard-shortcut">{'\u21E7'}+{metaKeyName}+2</span>
+              </button>
+            </li> */}
+          </ul>
+        </li>
+        <li className={navDropdownState.help}>
+          <button
+            onClick={this.toggleDropdownForHelp}
+            onBlur={this.handleBlur}
+            onFocus={this.clearHideTimeout}
+            onMouseOver={() => {
+              if (this.state.dropdownOpen !== 'none') {
+                this.setDropdown('help');
+              }
+            }}
+          >
+            <span className="nav__item-header">Help</span>
+            <InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
+          </button>
+          <ul className="nav__dropdown">
+            <li className="nav__dropdown-item">
+              <button
+                onFocus={this.handleFocusForHelp}
+                onBlur={this.handleBlur}
+                onClick={this.handleKeyboardShortcuts}
+              >
+                Keyboard Shortcuts
+              </button>
+            </li>
+            <li className="nav__dropdown-item">
+              <a
+                href="https://p5js.org/reference/"
+                target="_blank"
+                rel="noopener noreferrer"
+                onFocus={this.handleFocusForHelp}
+                onBlur={this.handleBlur}
+                onClick={this.setDropdownForNone}
+              >Reference
+              </a>
+            </li>
+            <li className="nav__dropdown-item">
+              <Link
+                to="/about"
+                onFocus={this.handleFocusForHelp}
+                onBlur={this.handleBlur}
+                onClick={this.setDropdownForNone}
+              >
+                About
+              </Link>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    );
+  }
+
+  renderUnauthenticatedUserMenu(navDropdownState) {
+    return (
+      <ul className="nav__items-right" title="user-menu">
+        <li className="nav__item">
+          <Link to="/login">
+            <span className="nav__item-header">Log in</span>
+          </Link>
+        </li>
+        <span className="nav__item-spacer">or</span>
+        <li className="nav__item">
+          <Link to="/signup">
+            <span className="nav__item-header">Sign up</span>
+          </Link>
+        </li>
+      </ul>
+    );
+  }
+
+  renderAuthenticatedUserMenu(navDropdownState) {
+    return (
+      <ul className="nav__items-right" title="user-menu">
+        <li className="nav__item">
+          <span>Hello, {this.props.user.username}!</span>
+        </li>
+        <span className="nav__item-spacer">|</span>
+        <li className={navDropdownState.account}>
+          <button
+            className="nav__item-header"
+            onClick={this.toggleDropdownForAccount}
+            onBlur={this.handleBlur}
+            onFocus={this.clearHideTimeout}
+            onMouseOver={() => {
+              if (this.state.dropdownOpen !== 'none') {
+                this.setDropdown('account');
+              }
+            }}
+          >
+            My Account
+            <InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
+          </button>
+          <ul className="nav__dropdown">
+            <li className="nav__dropdown-item">
+              <Link
+                to={`/${this.props.user.username}/sketches`}
+                onFocus={this.handleFocusForAccount}
+                onBlur={this.handleBlur}
+                onClick={this.setDropdownForNone}
+              >
+                My sketches
+              </Link>
+            </li>
+            {__process.env.UI_COLLECTIONS_ENABLED &&
+              <li className="nav__dropdown-item">
+                <Link
+                  to={`/${this.props.user.username}/collections`}
+                  onFocus={this.handleFocusForAccount}
+                  onBlur={this.handleBlur}
+                  onClick={this.setDropdownForNone}
+                >
+                  My collections
+                </Link>
+              </li>
+            }
+            <li className="nav__dropdown-item">
+              <Link
+                to={`/${this.props.user.username}/assets`}
+                onFocus={this.handleFocusForAccount}
+                onBlur={this.handleBlur}
+                onClick={this.setDropdownForNone}
+              >
+                My assets
+              </Link>
+            </li>
+            <li className="nav__dropdown-item">
+              <Link
+                to="/account"
+                onFocus={this.handleFocusForAccount}
+                onBlur={this.handleBlur}
+                onClick={this.setDropdownForNone}
+              >
+                Settings
+              </Link>
+            </li>
+            <li className="nav__dropdown-item">
+              <button
+                onClick={this.handleLogout}
+                onFocus={this.handleFocusForAccount}
+                onBlur={this.handleBlur}
+              >
+                Log out
+              </button>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    );
+  }
+
+  renderUserMenu(navDropdownState) {
+    const isLoginEnabled = __process.env.LOGIN_ENABLED;
+    const isAuthenticated = this.props.user.authenticated;
+
+    if (isLoginEnabled && isAuthenticated) {
+      return this.renderAuthenticatedUserMenu(navDropdownState);
+    } else if (isLoginEnabled && !isAuthenticated) {
+      return this.renderUnauthenticatedUserMenu(navDropdownState);
+    }
+
+    return null;
+  }
+
+  renderLeftLayout(navDropdownState) {
+    switch (this.props.layout) {
+      case 'dashboard':
+        return this.renderDashboardMenu(navDropdownState);
+      case 'project':
+      default:
+        return this.renderProjectMenu(navDropdownState);
+    }
+  }
+
   render() {
     const navDropdownState = {
       file: classNames({
@@ -245,362 +682,11 @@ class Nav extends React.PureComponent {
         'nav__item--open': this.state.dropdownOpen === 'account'
       })
     };
+
     return (
       <nav className="nav" title="main-navigation" ref={(node) => { this.node = node; }}>
-        <ul className="nav__items-left" title="project-menu">
-          <li className="nav__item-logo">
-            <InlineSVG src={logoUrl} alt="p5.js logo" className="svg__logo" />
-          </li>
-          <li className={navDropdownState.file}>
-            <button
-              onClick={this.toggleDropdownForFile}
-              onBlur={this.handleBlur}
-              onFocus={this.clearHideTimeout}
-              onMouseOver={() => {
-                if (this.state.dropdownOpen !== 'none') {
-                  this.setDropdown('file');
-                }
-              }}
-            >
-              <span className="nav__item-header">File</span>
-              <InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
-            </button>
-            <ul className="nav__dropdown">
-              <li className="nav__dropdown-item">
-                <button
-                  onClick={this.handleNew}
-                  onFocus={this.handleFocusForFile}
-                  onBlur={this.handleBlur}
-                >
-                  New
-                </button>
-              </li>
-              { __process.env.LOGIN_ENABLED && (!this.props.project.owner || this.isUserOwner()) &&
-              <li className="nav__dropdown-item">
-                <button
-                  onClick={this.handleSave}
-                  onFocus={this.handleFocusForFile}
-                  onBlur={this.handleBlur}
-                >
-                  Save
-                  <span className="nav__keyboard-shortcut">{metaKeyName}+s</span>
-                </button>
-              </li> }
-              { this.props.project.id && this.props.user.authenticated &&
-              <li className="nav__dropdown-item">
-                <button
-                  onClick={this.handleDuplicate}
-                  onFocus={this.handleFocusForFile}
-                  onBlur={this.handleBlur}
-                >
-                  Duplicate
-                </button>
-              </li> }
-              { this.props.project.id &&
-              <li className="nav__dropdown-item">
-                <button
-                  onClick={this.handleShare}
-                  onFocus={this.handleFocusForFile}
-                  onBlur={this.handleBlur}
-                >
-                  Share
-                </button>
-              </li> }
-              { this.props.project.id &&
-              <li className="nav__dropdown-item">
-                <button
-                  onClick={this.handleDownload}
-                  onFocus={this.handleFocusForFile}
-                  onBlur={this.handleBlur}
-                >
-                  Download
-                </button>
-              </li> }
-              { this.props.user.authenticated &&
-              <li className="nav__dropdown-item">
-                <Link
-                  to={`/${this.props.user.username}/sketches`}
-                  onFocus={this.handleFocusForFile}
-                  onBlur={this.handleBlur}
-                  onClick={this.setDropdownForNone}
-                >
-                  Open
-                </Link>
-              </li> }
-              { __process.env.EXAMPLES_ENABLED &&
-              <li className="nav__dropdown-item">
-                <Link
-                  to="/p5/sketches"
-                  onFocus={this.handleFocusForFile}
-                  onBlur={this.handleBlur}
-                  onClick={this.setDropdownForNone}
-                >
-                  Examples
-                </Link>
-              </li> }
-            </ul>
-          </li>
-          <li className={navDropdownState.edit}>
-            <button
-              onClick={this.toggleDropdownForEdit}
-              onBlur={this.handleBlur}
-              onFocus={this.clearHideTimeout}
-              onMouseOver={() => {
-                if (this.state.dropdownOpen !== 'none') {
-                  this.setDropdown('edit');
-                }
-              }}
-            >
-              <span className="nav__item-header">Edit</span>
-              <InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
-            </button>
-            <ul className="nav__dropdown" >
-              <li className="nav__dropdown-item">
-                <button
-                  onClick={() => {
-                    this.props.cmController.tidyCode();
-                    this.setDropdown('none');
-                  }}
-                  onFocus={this.handleFocusForEdit}
-                  onBlur={this.handleBlur}
-                >
-                  Tidy Code
-                  <span className="nav__keyboard-shortcut">{'\u21E7'}+Tab</span>
-                </button>
-              </li>
-              <li className="nav__dropdown-item">
-                <button
-                  onClick={this.handleFind}
-                  onFocus={this.handleFocusForEdit}
-                  onBlur={this.handleBlur}
-                >
-                  Find
-                  <span className="nav__keyboard-shortcut">{metaKeyName}+F</span>
-                </button>
-              </li>
-              <li className="nav__dropdown-item">
-                <button
-                  onClick={this.handleFindNext}
-                  onFocus={this.handleFocusForEdit}
-                  onBlur={this.handleBlur}
-                >
-                  Find Next
-                  <span className="nav__keyboard-shortcut">{metaKeyName}+G</span>
-                </button>
-              </li>
-              <li className="nav__dropdown-item">
-                <button
-                  onClick={this.handleFindPrevious}
-                  onFocus={this.handleFocusForEdit}
-                  onBlur={this.handleBlur}
-                >
-                  Find Previous
-                  <span className="nav__keyboard-shortcut">{'\u21E7'}+{metaKeyName}+G</span>
-                </button>
-              </li>
-            </ul>
-          </li>
-          <li className={navDropdownState.sketch}>
-            <button
-              onClick={this.toggleDropdownForSketch}
-              onBlur={this.handleBlur}
-              onFocus={this.clearHideTimeout}
-              onMouseOver={() => {
-                if (this.state.dropdownOpen !== 'none') {
-                  this.setDropdown('sketch');
-                }
-              }}
-            >
-              <span className="nav__item-header">Sketch</span>
-              <InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
-            </button>
-            <ul className="nav__dropdown">
-              <li className="nav__dropdown-item">
-                <button
-                  onClick={this.handleAddFile}
-                  onFocus={this.handleFocusForSketch}
-                  onBlur={this.handleBlur}
-                >
-                  Add File
-                </button>
-              </li>
-              <li className="nav__dropdown-item">
-                <button
-                  onClick={this.handleAddFolder}
-                  onFocus={this.handleFocusForSketch}
-                  onBlur={this.handleBlur}
-                >
-                  Add Folder
-                </button>
-              </li>
-              <li className="nav__dropdown-item">
-                <button
-                  onClick={this.handleRun}
-                  onFocus={this.handleFocusForSketch}
-                  onBlur={this.handleBlur}
-                >
-                  Run
-                  <span className="nav__keyboard-shortcut">{metaKeyName}+Enter</span>
-                </button>
-              </li>
-              <li className="nav__dropdown-item">
-                <button
-                  onClick={this.handleStop}
-                  onFocus={this.handleFocusForSketch}
-                  onBlur={this.handleBlur}
-                >
-                  Stop
-                  <span className="nav__keyboard-shortcut">{'\u21E7'}+{metaKeyName}+Enter</span>
-                </button>
-              </li>
-              {/* <li className="nav__dropdown-item">
-                <button
-                  onClick={this.handleStartAccessible}
-                  onFocus={this.handleFocusForSketch}
-                  onBlur={this.handleBlur}
-                >
-                  Start Accessible
-                  <span className="nav__keyboard-shortcut">{'\u21E7'}+{metaKeyName}+1</span>
-                </button>
-              </li>
-              <li className="nav__dropdown-item">
-                <button
-                  onClick={this.handleStopAccessible}
-                  onFocus={this.handleFocusForSketch}
-                  onBlur={this.handleBlur}
-                >
-                  Stop Accessible
-                  <span className="nav__keyboard-shortcut">{'\u21E7'}+{metaKeyName}+2</span>
-                </button>
-              </li> */}
-            </ul>
-          </li>
-          <li className={navDropdownState.help}>
-            <button
-              onClick={this.toggleDropdownForHelp}
-              onBlur={this.handleBlur}
-              onFocus={this.clearHideTimeout}
-              onMouseOver={() => {
-                if (this.state.dropdownOpen !== 'none') {
-                  this.setDropdown('help');
-                }
-              }}
-            >
-              <span className="nav__item-header">Help</span>
-              <InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
-            </button>
-            <ul className="nav__dropdown">
-              <li className="nav__dropdown-item">
-                <button
-                  onFocus={this.handleFocusForHelp}
-                  onBlur={this.handleBlur}
-                  onClick={this.handleKeyboardShortcuts}
-                >
-                  Keyboard Shortcuts
-                </button>
-              </li>
-              <li className="nav__dropdown-item">
-                <a
-                  href="https://p5js.org/reference/"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  onFocus={this.handleFocusForHelp}
-                  onBlur={this.handleBlur}
-                  onClick={this.setDropdownForNone}
-                >Reference
-                </a>
-              </li>
-              <li className="nav__dropdown-item">
-                <Link
-                  to="/about"
-                  onFocus={this.handleFocusForHelp}
-                  onBlur={this.handleBlur}
-                  onClick={this.setDropdownForNone}
-                >
-                  About
-                </Link>
-              </li>
-            </ul>
-          </li>
-        </ul>
-        { __process.env.LOGIN_ENABLED && !this.props.user.authenticated &&
-          <ul className="nav__items-right" title="user-menu">
-            <li>
-              <Link to="/login">
-                <span className="nav__item-header">Log in</span>
-              </Link>
-            </li>
-            <span className="nav__item-spacer">or</span>
-            <li>
-              <Link to="/signup">
-                <span className="nav__item-header">Sign up</span>
-              </Link>
-            </li>
-          </ul>}
-        { __process.env.LOGIN_ENABLED && this.props.user.authenticated &&
-          <ul className="nav__items-right" title="user-menu">
-            <li className="nav__item">
-              <span>Hello, {this.props.user.username}!</span>
-            </li>
-            <span className="nav__item-spacer">|</span>
-            <li className={navDropdownState.account}>
-              <button
-                className="nav__item-header"
-                onClick={this.toggleDropdownForAccount}
-                onBlur={this.handleBlur}
-                onFocus={this.clearHideTimeout}
-                onMouseOver={() => {
-                  if (this.state.dropdownOpen !== 'none') {
-                    this.setDropdown('account');
-                  }
-                }}
-              >
-                My Account
-                <InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
-              </button>
-              <ul className="nav__dropdown">
-                <li className="nav__dropdown-item">
-                  <Link
-                    to={`/${this.props.user.username}/sketches`}
-                    onFocus={this.handleFocusForAccount}
-                    onBlur={this.handleBlur}
-                    onClick={this.setDropdownForNone}
-                  >
-                    My sketches
-                  </Link>
-                </li>
-                <li className="nav__dropdown-item">
-                  <Link
-                    to="/assets"
-                    onFocus={this.handleFocusForAccount}
-                    onBlur={this.handleBlur}
-                    onClick={this.setDropdownForNone}
-                  >
-                    My assets
-                  </Link>
-                </li>
-                <li className="nav__dropdown-item">
-                  <Link
-                    to="/account"
-                    onFocus={this.handleFocusForAccount}
-                    onBlur={this.handleBlur}
-                    onClick={this.setDropdownForNone}
-                  >
-                    Settings
-                  </Link>
-                </li>
-                <li className="nav__dropdown-item">
-                  <button
-                    onClick={this.handleLogout}
-                    onFocus={this.handleFocusForAccount}
-                    onBlur={this.handleBlur}
-                  >
-                    Log out
-                  </button>
-                </li>
-              </ul>
-            </li>
-          </ul> }
+        {this.renderLeftLayout(navDropdownState)}
+        {this.renderUserMenu(navDropdownState)}
         {/*
         <div className="nav__announce">
           This is a preview version of the editor, that has not yet been officially released.
@@ -639,7 +725,7 @@ Nav.propTypes = {
   showShareModal: PropTypes.func.isRequired,
   showErrorModal: PropTypes.func.isRequired,
   unsavedChanges: PropTypes.bool.isRequired,
-  warnIfUnsavedChanges: PropTypes.func.isRequired,
+  warnIfUnsavedChanges: PropTypes.func,
   showKeyboardShortcutModal: PropTypes.func.isRequired,
   cmController: PropTypes.shape({
     tidyCode: PropTypes.func,
@@ -653,6 +739,7 @@ Nav.propTypes = {
   setAllAccessibleOutput: PropTypes.func.isRequired,
   newFile: PropTypes.func.isRequired,
   newFolder: PropTypes.func.isRequired,
+  layout: PropTypes.oneOf(['dashboard', 'project']),
   rootFile: PropTypes.shape({
     id: PropTypes.string.isRequired
   }).isRequired
@@ -663,7 +750,9 @@ Nav.defaultProps = {
     id: undefined,
     owner: undefined
   },
-  cmController: {}
+  cmController: {},
+  layout: 'project',
+  warnIfUnsavedChanges: undefined
 };
 
 function mapStateToProps(state) {
diff --git a/client/components/NavBasic.jsx b/client/components/NavBasic.jsx
new file mode 100644
index 00000000..92913add
--- /dev/null
+++ b/client/components/NavBasic.jsx
@@ -0,0 +1,40 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import InlineSVG from 'react-inlinesvg';
+
+const logoUrl = require('../images/p5js-logo-small.svg');
+const arrowUrl = require('../images/triangle-arrow-left.svg');
+
+class NavBasic extends React.PureComponent {
+  static defaultProps = {
+    onBack: null
+  }
+
+  render() {
+    return (
+      <nav className="nav" title="main-navigation" ref={(node) => { this.node = node; }}>
+        <ul className="nav__items-left" title="project-menu">
+          <li className="nav__item-logo">
+            <InlineSVG src={logoUrl} alt="p5.js logo" className="svg__logo" />
+          </li>
+          { this.props.onBack && (
+            <li className="nav__item">
+              <button onClick={this.props.onBack}>
+                <span className="nav__item-header">
+                  <InlineSVG src={arrowUrl} alt="Left arrow" />
+                </span>
+                Back to the editor
+              </button>
+            </li>)
+          }
+        </ul>
+      </nav>
+    );
+  }
+}
+
+NavBasic.propTypes = {
+  onBack: PropTypes.func,
+};
+
+export default NavBasic;
diff --git a/client/components/createRedirectWithUsername.jsx b/client/components/createRedirectWithUsername.jsx
new file mode 100644
index 00000000..fe76b5cd
--- /dev/null
+++ b/client/components/createRedirectWithUsername.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { browserHistory } from 'react-router';
+
+const RedirectToUser = ({ username, url = '/:username/sketches' }) => {
+  React.useEffect(() => {
+    if (username == null) {
+      return;
+    }
+
+    browserHistory.replace(url.replace(':username', username));
+  }, [username]);
+
+  return null;
+};
+
+function mapStateToProps(state) {
+  return {
+    username: state.user ? state.user.username : null,
+  };
+}
+
+const ConnectedRedirectToUser = connect(mapStateToProps)(RedirectToUser);
+
+const createRedirectWithUsername = url => props => <ConnectedRedirectToUser {...props} url={url} />;
+
+export default createRedirectWithUsername;
diff --git a/client/constants.js b/client/constants.js
index d4a4504b..477409fc 100644
--- a/client/constants.js
+++ b/client/constants.js
@@ -20,6 +20,9 @@ export const AUTH_ERROR = 'AUTH_ERROR';
 
 export const SETTINGS_UPDATED = 'SETTINGS_UPDATED';
 
+export const API_KEY_CREATED = 'API_KEY_CREATED';
+export const API_KEY_REMOVED = 'API_KEY_REMOVED';
+
 export const SET_PROJECT_NAME = 'SET_PROJECT_NAME';
 export const RENAME_PROJECT = 'RENAME_PROJECT';
 
@@ -33,6 +36,14 @@ export const HIDE_EDIT_PROJECT_NAME = 'HIDE_EDIT_PROJECT_NAME';
 export const SET_PROJECT = 'SET_PROJECT';
 export const SET_PROJECTS = 'SET_PROJECTS';
 
+export const SET_COLLECTIONS = 'SET_COLLECTIONS';
+export const CREATE_COLLECTION = 'CREATED_COLLECTION';
+export const DELETE_COLLECTION = 'DELETE_COLLECTION';
+
+export const ADD_TO_COLLECTION = 'ADD_TO_COLLECTION';
+export const REMOVE_FROM_COLLECTION = 'REMOVE_FROM_COLLECTION';
+export const EDIT_COLLECTION = 'EDIT_COLLECTION';
+
 export const DELETE_PROJECT = 'DELETE_PROJECT';
 
 export const SET_SELECTED_FILE = 'SET_SELECTED_FILE';
@@ -69,6 +80,8 @@ export const SHOW_NEW_FOLDER_MODAL = 'SHOW_NEW_FOLDER_MODAL';
 export const CLOSE_NEW_FOLDER_MODAL = 'CLOSE_NEW_FOLDER_MODAL';
 export const SHOW_FOLDER_CHILDREN = 'SHOW_FOLDER_CHILDREN';
 export const HIDE_FOLDER_CHILDREN = 'HIDE_FOLDER_CHILDREN';
+export const OPEN_UPLOAD_FILE_MODAL = 'OPEN_UPLOAD_FILE_MODAL';
+export const CLOSE_UPLOAD_FILE_MODAL = 'CLOSE_UPLOAD_FILE_MODAL';
 
 export const SHOW_SHARE_MODAL = 'SHOW_SHARE_MODAL';
 export const CLOSE_SHARE_MODAL = 'CLOSE_SHARE_MODAL';
@@ -116,6 +129,7 @@ export const CLEAR_PERSISTED_STATE = 'CLEAR_PERSISTED_STATE';
 export const HIDE_RUNTIME_ERROR_WARNING = 'HIDE_RUNTIME_ERROR_WARNING';
 export const SHOW_RUNTIME_ERROR_WARNING = 'SHOW_RUNTIME_ERROR_WARNING';
 export const SET_ASSETS = 'SET_ASSETS';
+export const DELETE_ASSET = 'DELETE_ASSET';
 
 export const TOGGLE_DIRECTION = 'TOGGLE_DIRECTION';
 export const SET_SORTING = 'SET_SORTING';
diff --git a/client/images/check.svg b/client/images/check.svg
new file mode 100644
index 00000000..b8da10eb
--- /dev/null
+++ b/client/images/check.svg
@@ -0,0 +1,6 @@
+
+<svg width="81px" height="65px" viewBox="0 0 81 65" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M45.437888,42.4740871 L45.437888,-12.5259129 L62.437888,-12.5259129 L62.437888,42.4740871 L62.437888,59.4740871 L18.437888,59.4740871 L18.437888,42.4740871 L45.437888,42.4740871 Z" fill="#D8D8D8" fill-rule="nonzero" transform="translate(40.437888, 23.474087) rotate(42.000000) translate(-40.437888, -23.474087) "></path>
+    </g>
+</svg>
diff --git a/client/images/check_encircled.svg b/client/images/check_encircled.svg
new file mode 100644
index 00000000..63ddbf51
--- /dev/null
+++ b/client/images/check_encircled.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="check-encircled" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+	 y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<path id="circle" d="M50,26.5c-14.4,0-26,11.5-25.9,25.9c0,14.5,11.6,26,26,26c14.5,0,25.9-11.5,25.9-26C76,38,64.5,26.5,50,26.5z
+	 M47.6,66.6L34,53.4l5.6-5.5l7.1,6.8l14-15.4l6.1,5.5L47.6,66.6z"/>
+<polygon id="check" class="st0 counter-form" points="46.7,54.7 39.6,47.9 34,53.4 47.6,66.6 66.8,44.8 60.7,39.3 "/>
+</svg>
diff --git a/client/images/close.svg b/client/images/close.svg
new file mode 100644
index 00000000..b6516ed9
--- /dev/null
+++ b/client/images/close.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="close" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<path id="circle" d="M50,26.5c-14.4,0-26,11.5-25.9,25.9c0,14.5,11.6,26,26,26c14.5,0,25.9-11.5,25.9-26C76,38,64.5,26.5,50,26.5z
+	 M63.4,60.2L58,65.6l-7.9-8L42,65.7l-5.4-5.4l8.1-8l-8.1-8l5.4-5.4l8,8.1l8-8l5.4,5.4l-8,7.8L63.4,60.2z"/>
+<polygon id="x" class="st0 counter-form" points="58,39 50,47 42,38.9 36.6,44.3 44.7,52.3 36.6,60.3 42,65.7 50.1,57.6 58,65.6 63.4,60.2 
+	55.4,52.2 63.4,44.4 "/>
+</svg>
diff --git a/client/images/down-arrow.svg b/client/images/down-arrow.svg
index 8ea28980..f6eb1e87 100644
--- a/client/images/down-arrow.svg
+++ b/client/images/down-arrow.svg
@@ -1,7 +1,6 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg width="14px" height="9px" viewBox="0 0 14 9" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 39 (31667) - http://www.bohemiancoding.com/sketch -->
-    <title>arrow shape copy 2</title>
     <!-- <desc>Created with Sketch.</desc> -->
     <defs></defs>
     <g id="IDEs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.539999962">
diff --git a/client/images/left-arrow.svg b/client/images/left-arrow.svg
index ea692ff9..ab89e77b 100644
--- a/client/images/left-arrow.svg
+++ b/client/images/left-arrow.svg
@@ -1,7 +1,6 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg width="10px" height="15px" viewBox="0 0 10 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
-    <title>arrow shape copy</title>
     <!-- <desc>Created with Sketch.</desc> -->
     <defs></defs>
     <g id="IDEs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.539999962">
diff --git a/client/images/right-arrow.svg b/client/images/right-arrow.svg
index ba720dde..199db8ca 100644
--- a/client/images/right-arrow.svg
+++ b/client/images/right-arrow.svg
@@ -1,7 +1,6 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg width="10px" height="15px" viewBox="0 0 10 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
-    <title>arrow shape copy</title>
     <!-- <desc>Created with Sketch.</desc> -->
     <defs></defs>
     <g id="IDEs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.539999962">
diff --git a/client/images/triangle-arrow-left.svg b/client/images/triangle-arrow-left.svg
new file mode 100644
index 00000000..dcc159df
--- /dev/null
+++ b/client/images/triangle-arrow-left.svg
@@ -0,0 +1,14 @@
+<svg width="10px" height="10px" viewBox="0 0 5 5" version="1.1"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
+  <title>Left Arrow</title>
+  <desc>Created with Sketch.</desc>
+  <defs></defs>
+  <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="environment" transform="translate(-26.000000, -42.000000)" fill="#B5B5B5">
+      <g id="libraries" transform="translate(21.000000, 32.000000)">
+        <polygon id="Triangle-3" transform="translate(7.500000, 12.500000) rotate(270.000000) translate(-7.500000, -12.500000) " points="7.5 10 10 15 5 15"></polygon>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/client/images/up-arrow.svg b/client/images/up-arrow.svg
index 1545520a..a5a3fb18 100644
--- a/client/images/up-arrow.svg
+++ b/client/images/up-arrow.svg
@@ -1,7 +1,6 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg width="14px" height="9px" viewBox="0 0 14 9" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 39 (31667) - http://www.bohemiancoding.com/sketch -->
-    <title>arrow shape copy</title>
     <!-- <desc>Created with Sketch.</desc> -->
     <defs></defs>
     <g id="IDEs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.539999962">
diff --git a/client/modules/App/App.jsx b/client/modules/App/App.jsx
index 654610e4..c9d9b3a1 100644
--- a/client/modules/App/App.jsx
+++ b/client/modules/App/App.jsx
@@ -18,7 +18,10 @@ class App extends React.Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    if (nextProps.location !== this.props.location) {
+    const locationWillChange = nextProps.location !== this.props.location;
+    const shouldSkipRemembering = nextProps.location.state && nextProps.location.state.skipSavingPath === true;
+
+    if (locationWillChange && !shouldSkipRemembering) {
       this.props.setPreviousPath(this.props.location.pathname);
     }
   }
@@ -42,7 +45,10 @@ class App extends React.Component {
 App.propTypes = {
   children: PropTypes.element,
   location: PropTypes.shape({
-    pathname: PropTypes.string
+    pathname: PropTypes.string,
+    state: PropTypes.shape({
+      skipSavingPath: PropTypes.bool,
+    }),
   }).isRequired,
   setPreviousPath: PropTypes.func.isRequired,
   theme: PropTypes.string,
diff --git a/client/modules/App/components/Overlay.jsx b/client/modules/App/components/Overlay.jsx
index 3a70242d..415a9a0e 100644
--- a/client/modules/App/components/Overlay.jsx
+++ b/client/modules/App/components/Overlay.jsx
@@ -64,10 +64,12 @@ class Overlay extends React.Component {
     const {
       ariaLabel,
       title,
-      children
+      children,
+      actions,
+      isFixedHeight,
     } = this.props;
     return (
-      <div className="overlay">
+      <div className={`overlay ${isFixedHeight ? 'overlay--is-fixed-height' : ''}`}>
         <div className="overlay__content">
           <section
             role="main"
@@ -77,9 +79,12 @@ class Overlay extends React.Component {
           >
             <header className="overlay__header">
               <h2 className="overlay__title">{title}</h2>
-              <button className="overlay__close-button" onClick={this.close} >
-                <InlineSVG src={exitUrl} alt="close overlay" />
-              </button>
+              <div className="overlay__actions">
+                {actions}
+                <button className="overlay__close-button" onClick={this.close} >
+                  <InlineSVG src={exitUrl} alt="close overlay" />
+                </button>
+              </div>
             </header>
             {children}
           </section>
@@ -91,18 +96,22 @@ class Overlay extends React.Component {
 
 Overlay.propTypes = {
   children: PropTypes.element,
+  actions: PropTypes.element,
   closeOverlay: PropTypes.func,
   title: PropTypes.string,
   ariaLabel: PropTypes.string,
-  previousPath: PropTypes.string
+  previousPath: PropTypes.string,
+  isFixedHeight: PropTypes.bool,
 };
 
 Overlay.defaultProps = {
   children: null,
+  actions: null,
   title: 'Modal',
   closeOverlay: null,
   ariaLabel: 'modal',
-  previousPath: '/'
+  previousPath: '/',
+  isFixedHeight: false,
 };
 
 export default Overlay;
diff --git a/client/modules/App/components/loader.jsx b/client/modules/App/components/loader.jsx
index 1561387e..37306427 100644
--- a/client/modules/App/components/loader.jsx
+++ b/client/modules/App/components/loader.jsx
@@ -1,9 +1,11 @@
 import React from 'react';
 
 const Loader = () => (
-  <div className="loader">
-    <div className="loader__circle1" />
-    <div className="loader__circle2" />
+  <div className="loader-container">
+    <div className="loader">
+      <div className="loader__circle1" />
+      <div className="loader__circle2" />
+    </div>
   </div>
 );
 export default Loader;
diff --git a/client/modules/IDE/actions/assets.js b/client/modules/IDE/actions/assets.js
index e2b49cf6..483e6d4e 100644
--- a/client/modules/IDE/actions/assets.js
+++ b/client/modules/IDE/actions/assets.js
@@ -30,8 +30,23 @@ export function getAssets() {
   };
 }
 
-export function deleteAsset(assetKey, userId) {
+export function deleteAsset(assetKey) {
   return {
-    type: 'PLACEHOLDER'
+    type: ActionTypes.DELETE_ASSET,
+    key: assetKey
+  };
+}
+
+export function deleteAssetRequest(assetKey) {
+  return (dispatch) => {
+    axios.delete(`${ROOT_URL}/S3/${assetKey}`, { withCredentials: true })
+      .then((response) => {
+        dispatch(deleteAsset(assetKey));
+      })
+      .catch(() => {
+        dispatch({
+          type: ActionTypes.ERROR
+        });
+      });
   };
 }
diff --git a/client/modules/IDE/actions/collections.js b/client/modules/IDE/actions/collections.js
new file mode 100644
index 00000000..cb61dc23
--- /dev/null
+++ b/client/modules/IDE/actions/collections.js
@@ -0,0 +1,173 @@
+import axios from 'axios';
+import * as ActionTypes from '../../../constants';
+import { startLoader, stopLoader } from './loader';
+import { setToastText, showToast } from './toast';
+
+const __process = (typeof global !== 'undefined' ? global : window).process;
+const ROOT_URL = __process.env.API_URL;
+
+const TOAST_DISPLAY_TIME_MS = 1500;
+
+// eslint-disable-next-line
+export function getCollections(username) {
+  return (dispatch) => {
+    dispatch(startLoader());
+    let url;
+    if (username) {
+      url = `${ROOT_URL}/${username}/collections`;
+    } else {
+      url = `${ROOT_URL}/collections`;
+    }
+    axios.get(url, { withCredentials: true })
+      .then((response) => {
+        dispatch({
+          type: ActionTypes.SET_COLLECTIONS,
+          collections: response.data
+        });
+        dispatch(stopLoader());
+      })
+      .catch((response) => {
+        dispatch({
+          type: ActionTypes.ERROR,
+          error: response.data
+        });
+        dispatch(stopLoader());
+      });
+  };
+}
+
+export function createCollection(collection) {
+  return (dispatch) => {
+    dispatch(startLoader());
+    const url = `${ROOT_URL}/collections`;
+    return axios.post(url, collection, { withCredentials: true })
+      .then((response) => {
+        dispatch({
+          type: ActionTypes.CREATE_COLLECTION
+        });
+        dispatch(stopLoader());
+
+        const collectionName = response.data.name;
+        dispatch(setToastText(`Created "${collectionName}"`));
+        dispatch(showToast(TOAST_DISPLAY_TIME_MS));
+
+        return response.data;
+      })
+      .catch((response) => {
+        dispatch({
+          type: ActionTypes.ERROR,
+          error: response.data
+        });
+        dispatch(stopLoader());
+
+        return response.data;
+      });
+  };
+}
+
+export function addToCollection(collectionId, projectId) {
+  return (dispatch) => {
+    dispatch(startLoader());
+    const url = `${ROOT_URL}/collections/${collectionId}/${projectId}`;
+    return axios.post(url, { withCredentials: true })
+      .then((response) => {
+        dispatch({
+          type: ActionTypes.ADD_TO_COLLECTION,
+          payload: response.data
+        });
+        dispatch(stopLoader());
+
+        const collectionName = response.data.name;
+
+        dispatch(setToastText(`Added to "${collectionName}`));
+        dispatch(showToast(TOAST_DISPLAY_TIME_MS));
+
+        return response.data;
+      })
+      .catch((response) => {
+        dispatch({
+          type: ActionTypes.ERROR,
+          error: response.data
+        });
+        dispatch(stopLoader());
+
+        return response.data;
+      });
+  };
+}
+
+export function removeFromCollection(collectionId, projectId) {
+  return (dispatch) => {
+    dispatch(startLoader());
+    const url = `${ROOT_URL}/collections/${collectionId}/${projectId}`;
+    return axios.delete(url, { withCredentials: true })
+      .then((response) => {
+        dispatch({
+          type: ActionTypes.REMOVE_FROM_COLLECTION,
+          payload: response.data
+        });
+        dispatch(stopLoader());
+
+        const collectionName = response.data.name;
+
+        dispatch(setToastText(`Removed from "${collectionName}`));
+        dispatch(showToast(TOAST_DISPLAY_TIME_MS));
+
+        return response.data;
+      })
+      .catch((response) => {
+        dispatch({
+          type: ActionTypes.ERROR,
+          error: response.data
+        });
+        dispatch(stopLoader());
+
+        return response.data;
+      });
+  };
+}
+
+export function editCollection(collectionId, { name, description }) {
+  return (dispatch) => {
+    const url = `${ROOT_URL}/collections/${collectionId}`;
+    return axios.patch(url, { name, description }, { withCredentials: true })
+      .then((response) => {
+        dispatch({
+          type: ActionTypes.EDIT_COLLECTION,
+          payload: response.data
+        });
+        return response.data;
+      })
+      .catch((response) => {
+        dispatch({
+          type: ActionTypes.ERROR,
+          error: response.data
+        });
+
+        return response.data;
+      });
+  };
+}
+
+export function deleteCollection(collectionId) {
+  return (dispatch) => {
+    const url = `${ROOT_URL}/collections/${collectionId}`;
+    return axios.delete(url, { withCredentials: true })
+      .then((response) => {
+        dispatch({
+          type: ActionTypes.DELETE_COLLECTION,
+          payload: response.data,
+          collectionId,
+        });
+        return response.data;
+      })
+      .catch((response) => {
+        dispatch({
+          type: ActionTypes.ERROR,
+          error: response.data
+        });
+
+        return response.data;
+      });
+  };
+}
diff --git a/client/modules/IDE/actions/files.js b/client/modules/IDE/actions/files.js
index 0bbf292d..8fb230cc 100644
--- a/client/modules/IDE/actions/files.js
+++ b/client/modules/IDE/actions/files.js
@@ -3,7 +3,7 @@ import objectID from 'bson-objectid';
 import blobUtil from 'blob-util';
 import { reset } from 'redux-form';
 import * as ActionTypes from '../../../constants';
-import { setUnsavedChanges } from './ide';
+import { setUnsavedChanges, closeNewFolderModal, closeNewFileModal } from './ide';
 import { setProjectSavedTime } from './project';
 
 const __process = (typeof global !== 'undefined' ? global : window).process;
@@ -58,6 +58,7 @@ export function createFile(formProps) {
             parentId
           });
           dispatch(setProjectSavedTime(response.data.project.updatedAt));
+          dispatch(closeNewFileModal());
           dispatch(reset('new-file'));
           // dispatch({
           //   type: ActionTypes.HIDE_MODAL
@@ -85,6 +86,7 @@ export function createFile(formProps) {
       //   type: ActionTypes.HIDE_MODAL
       // });
       dispatch(setUnsavedChanges(true));
+      dispatch(closeNewFileModal());
     }
   };
 }
@@ -109,9 +111,7 @@ export function createFolder(formProps) {
             parentId
           });
           dispatch(setProjectSavedTime(response.data.project.updatedAt));
-          dispatch({
-            type: ActionTypes.CLOSE_NEW_FOLDER_MODAL
-          });
+          dispatch(closeNewFolderModal());
         })
         .catch(response => dispatch({
           type: ActionTypes.ERROR,
@@ -130,9 +130,7 @@ export function createFolder(formProps) {
         fileType: 'folder',
         children: []
       });
-      dispatch({
-        type: ActionTypes.CLOSE_NEW_FOLDER_MODAL
-      });
+      dispatch(closeNewFolderModal());
     }
   };
 }
diff --git a/client/modules/IDE/actions/ide.js b/client/modules/IDE/actions/ide.js
index cf573573..239dc6c7 100644
--- a/client/modules/IDE/actions/ide.js
+++ b/client/modules/IDE/actions/ide.js
@@ -75,6 +75,19 @@ export function closeNewFileModal() {
   };
 }
 
+export function openUploadFileModal(parentId) {
+  return {
+    type: ActionTypes.OPEN_UPLOAD_FILE_MODAL,
+    parentId
+  };
+}
+
+export function closeUploadFileModal() {
+  return {
+    type: ActionTypes.CLOSE_UPLOAD_FILE_MODAL
+  };
+}
+
 export function expandSidebar() {
   return {
     type: ActionTypes.EXPAND_SIDEBAR
diff --git a/client/modules/IDE/actions/sorting.js b/client/modules/IDE/actions/sorting.js
index 8feb9b12..f28cf325 100644
--- a/client/modules/IDE/actions/sorting.js
+++ b/client/modules/IDE/actions/sorting.js
@@ -26,13 +26,14 @@ export function toggleDirectionForField(field) {
   };
 }
 
-export function setSearchTerm(searchTerm) {
+export function setSearchTerm(scope, searchTerm) {
   return {
     type: ActionTypes.SET_SEARCH_TERM,
-    query: searchTerm
+    query: searchTerm,
+    scope,
   };
 }
 
-export function resetSearchTerm() {
-  return setSearchTerm('');
+export function resetSearchTerm(scope) {
+  return setSearchTerm(scope, '');
 }
diff --git a/client/modules/IDE/actions/uploader.js b/client/modules/IDE/actions/uploader.js
index f2f12585..602ac3e5 100644
--- a/client/modules/IDE/actions/uploader.js
+++ b/client/modules/IDE/actions/uploader.js
@@ -66,11 +66,11 @@ export function dropzoneAcceptCallback(userId, file, done) {
           done();
         })
         .catch((response) => {
-        file.custom_status = 'rejected'; // eslint-disable-line
-          if (response.data.responseText && response.data.responseText.message) {
+          file.custom_status = 'rejected'; // eslint-disable-line
+          if (response.data && response.data.responseText && response.data.responseText.message) {
             done(response.data.responseText.message);
           }
-          done('error preparing the upload');
+          done('Error: Reached upload limit.');
         });
     }
   };
diff --git a/client/modules/IDE/components/About.jsx b/client/modules/IDE/components/About.jsx
index 81847fd4..a8133e98 100644
--- a/client/modules/IDE/components/About.jsx
+++ b/client/modules/IDE/components/About.jsx
@@ -34,7 +34,7 @@ function About(props) {
             rel="noopener noreferrer"
           >
             <InlineSVG className="about__content-column-asterisk" src={asteriskUrl} alt="p5 asterisk" />
-          Examples
+            Examples
           </a>
         </p>
         <p className="about__content-column-list">
@@ -44,7 +44,7 @@ function About(props) {
             rel="noopener noreferrer"
           >
             <InlineSVG className="about__content-column-asterisk" src={asteriskUrl} alt="p5 asterisk" />
-          Learn
+            Learn
           </a>
         </p>
       </div>
@@ -57,7 +57,7 @@ function About(props) {
             rel="noopener noreferrer"
           >
             <InlineSVG className="about__content-column-asterisk" src={asteriskUrl} alt="p5 asterisk" />
-          Libraries
+            Libraries
           </a>
         </p>
         <p className="about__content-column-list">
@@ -67,7 +67,7 @@ function About(props) {
             rel="noopener noreferrer"
           >
             <InlineSVG className="about__content-column-asterisk" src={asteriskUrl} alt="p5 asterisk" />
-          Reference
+            Reference
           </a>
         </p>
         <p className="about__content-column-list">
@@ -77,7 +77,7 @@ function About(props) {
             rel="noopener noreferrer"
           >
             <InlineSVG className="about__content-column-asterisk" src={asteriskUrl} alt="p5 asterisk" />
-          Forum
+            Forum
           </a>
         </p>
       </div>
diff --git a/client/modules/IDE/components/AddToCollectionList.jsx b/client/modules/IDE/components/AddToCollectionList.jsx
new file mode 100644
index 00000000..e9417d3b
--- /dev/null
+++ b/client/modules/IDE/components/AddToCollectionList.jsx
@@ -0,0 +1,165 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
+import * as ProjectActions from '../actions/project';
+import * as ProjectsActions from '../actions/projects';
+import * as CollectionsActions from '../actions/collections';
+import * as ToastActions from '../actions/toast';
+import * as SortingActions from '../actions/sorting';
+import getSortedCollections from '../selectors/collections';
+import Loader from '../../App/components/loader';
+import QuickAddList from './QuickAddList';
+
+const projectInCollection = (project, collection) =>
+  collection.items.find(item => item.project.id === project.id) != null;
+
+class CollectionList extends React.Component {
+  constructor(props) {
+    super(props);
+
+    if (props.projectId) {
+      props.getProject(props.projectId);
+    }
+
+    this.props.getCollections(this.props.username);
+
+    this.state = {
+      hasLoadedData: false,
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.loading === true && this.props.loading === false) {
+      // eslint-disable-next-line react/no-did-update-set-state
+      this.setState({
+        hasLoadedData: true,
+      });
+    }
+  }
+
+  getTitle() {
+    if (this.props.username === this.props.user.username) {
+      return 'p5.js Web Editor | My collections';
+    }
+    return `p5.js Web Editor | ${this.props.username}'s collections`;
+  }
+
+  handleCollectionAdd = (collection) => {
+    this.props.addToCollection(collection.id, this.props.project.id);
+  }
+
+  handleCollectionRemove = (collection) => {
+    this.props.removeFromCollection(collection.id, this.props.project.id);
+  }
+
+  render() {
+    const { collections, project } = this.props;
+    const hasCollections = collections.length > 0;
+    const collectionWithSketchStatus = collections.map(collection => ({
+      ...collection,
+      url: `/${collection.owner.username}/collections/${collection.id}`,
+      isAdded: projectInCollection(project, collection),
+    }));
+
+    let content = null;
+
+    if (this.props.loading && !this.state.hasLoadedData) {
+      content = <Loader />;
+    } else if (hasCollections) {
+      content = (
+        <QuickAddList
+          items={collectionWithSketchStatus}
+          onAdd={this.handleCollectionAdd}
+          onRemove={this.handleCollectionRemove}
+        />
+      );
+    } else {
+      content = 'No collections';
+    }
+
+    return (
+      <div className="quick-add-wrapper">
+        <Helmet>
+          <title>{this.getTitle()}</title>
+        </Helmet>
+
+        {content}
+      </div>
+    );
+  }
+}
+
+const ProjectShape = PropTypes.shape({
+  id: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  createdAt: PropTypes.string.isRequired,
+  updatedAt: PropTypes.string.isRequired,
+  user: PropTypes.shape({
+    username: PropTypes.string.isRequired
+  }).isRequired,
+});
+
+const ItemsShape = PropTypes.shape({
+  createdAt: PropTypes.string.isRequired,
+  updatedAt: PropTypes.string.isRequired,
+  project: ProjectShape
+});
+
+CollectionList.propTypes = {
+  user: PropTypes.shape({
+    username: PropTypes.string,
+    authenticated: PropTypes.bool.isRequired
+  }).isRequired,
+  projectId: PropTypes.string.isRequired,
+  getCollections: PropTypes.func.isRequired,
+  getProject: PropTypes.func.isRequired,
+  addToCollection: PropTypes.func.isRequired,
+  removeFromCollection: PropTypes.func.isRequired,
+  collections: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+    description: PropTypes.string,
+    createdAt: PropTypes.string.isRequired,
+    updatedAt: PropTypes.string.isRequired,
+    items: PropTypes.arrayOf(ItemsShape),
+  })).isRequired,
+  username: PropTypes.string,
+  loading: PropTypes.bool.isRequired,
+  project: PropTypes.shape({
+    id: PropTypes.string,
+    owner: PropTypes.shape({
+      id: PropTypes.string
+    })
+  })
+};
+
+CollectionList.defaultProps = {
+  project: {
+    id: undefined,
+    owner: undefined
+  },
+  username: undefined
+};
+
+function mapStateToProps(state, ownProps) {
+  return {
+    user: state.user,
+    collections: getSortedCollections(state),
+    sorting: state.sorting,
+    loading: state.loading,
+    project: ownProps.project || state.project,
+    projectId: ownProps && ownProps.params ? ownProps.prams.project_id : null,
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return bindActionCreators(
+    Object.assign({}, CollectionsActions, ProjectsActions, ProjectActions, ToastActions, SortingActions),
+    dispatch
+  );
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(CollectionList);
diff --git a/client/modules/IDE/components/AddToCollectionSketchList.jsx b/client/modules/IDE/components/AddToCollectionSketchList.jsx
new file mode 100644
index 00000000..d4173b4b
--- /dev/null
+++ b/client/modules/IDE/components/AddToCollectionSketchList.jsx
@@ -0,0 +1,137 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+// import find from 'lodash/find';
+import * as ProjectsActions from '../actions/projects';
+import * as CollectionsActions from '../actions/collections';
+import * as ToastActions from '../actions/toast';
+import * as SortingActions from '../actions/sorting';
+import getSortedSketches from '../selectors/projects';
+import Loader from '../../App/components/loader';
+import QuickAddList from './QuickAddList';
+
+class SketchList extends React.Component {
+  constructor(props) {
+    super(props);
+    this.props.getProjects(this.props.username);
+
+    this.state = {
+      isInitialDataLoad: true,
+    };
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (this.props.sketches !== nextProps.sketches && Array.isArray(nextProps.sketches)) {
+      this.setState({
+        isInitialDataLoad: false,
+      });
+    }
+  }
+
+  getSketchesTitle() {
+    if (this.props.username === this.props.user.username) {
+      return 'p5.js Web Editor | My sketches';
+    }
+    return `p5.js Web Editor | ${this.props.username}'s sketches`;
+  }
+
+  handleCollectionAdd = (sketch) => {
+    this.props.addToCollection(this.props.collection.id, sketch.id);
+  }
+
+  handleCollectionRemove = (sketch) => {
+    this.props.removeFromCollection(this.props.collection.id, sketch.id);
+  }
+
+  inCollection = sketch => this.props.collection.items.find(item => item.project.id === sketch.id) != null
+
+  render() {
+    const hasSketches = this.props.sketches.length > 0;
+    const sketchesWithAddedStatus = this.props.sketches.map(sketch => ({
+      ...sketch,
+      isAdded: this.inCollection(sketch),
+      url: `/${this.props.username}/sketches/${sketch.id}`,
+    }));
+
+    let content = null;
+
+    if (this.props.loading && this.state.isInitialDataLoad) {
+      content = <Loader />;
+    } else if (hasSketches) {
+      content = (
+        <QuickAddList
+          items={sketchesWithAddedStatus}
+          onAdd={this.handleCollectionAdd}
+          onRemove={this.handleCollectionRemove}
+        />
+      );
+    } else {
+      content = 'No collections';
+    }
+
+    return (
+      <div className="quick-add-wrapper">
+        <Helmet>
+          <title>{this.getSketchesTitle()}</title>
+        </Helmet>
+        {content}
+      </div>
+    );
+  }
+}
+
+SketchList.propTypes = {
+  user: PropTypes.shape({
+    username: PropTypes.string,
+    authenticated: PropTypes.bool.isRequired
+  }).isRequired,
+  getProjects: PropTypes.func.isRequired,
+  sketches: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+    createdAt: PropTypes.string.isRequired,
+    updatedAt: PropTypes.string.isRequired
+  })).isRequired,
+  collection: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+    items: PropTypes.arrayOf(PropTypes.shape({
+      project: PropTypes.shape({
+        id: PropTypes.string.isRequired,
+      }),
+    })),
+  }).isRequired,
+  username: PropTypes.string,
+  loading: PropTypes.bool.isRequired,
+  sorting: PropTypes.shape({
+    field: PropTypes.string.isRequired,
+    direction: PropTypes.string.isRequired
+  }).isRequired,
+  addToCollection: PropTypes.func.isRequired,
+  removeFromCollection: PropTypes.func.isRequired,
+};
+
+SketchList.defaultProps = {
+  username: undefined
+};
+
+function mapStateToProps(state) {
+  return {
+    user: state.user,
+    sketches: getSortedSketches(state),
+    sorting: state.sorting,
+    loading: state.loading,
+    project: state.project
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return bindActionCreators(
+    Object.assign({}, ProjectsActions, CollectionsActions, ToastActions, SortingActions),
+    dispatch
+  );
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(SketchList);
diff --git a/client/modules/IDE/components/AssetList.jsx b/client/modules/IDE/components/AssetList.jsx
index a658fedf..da834dc2 100644
--- a/client/modules/IDE/components/AssetList.jsx
+++ b/client/modules/IDE/components/AssetList.jsx
@@ -5,9 +5,146 @@ import { bindActionCreators } from 'redux';
 import { Link } from 'react-router';
 import { Helmet } from 'react-helmet';
 import prettyBytes from 'pretty-bytes';
+import InlineSVG from 'react-inlinesvg';
 
 import Loader from '../../App/components/loader';
 import * as AssetActions from '../actions/assets';
+import downFilledTriangle from '../../../images/down-filled-triangle.svg';
+
+class AssetListRowBase extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isFocused: false,
+      optionsOpen: false
+    };
+  }
+
+  onFocusComponent = () => {
+    this.setState({ isFocused: true });
+  }
+
+  onBlurComponent = () => {
+    this.setState({ isFocused: false });
+    setTimeout(() => {
+      if (!this.state.isFocused) {
+        this.closeOptions();
+      }
+    }, 200);
+  }
+
+  openOptions = () => {
+    this.setState({
+      optionsOpen: true
+    });
+  }
+
+  closeOptions = () => {
+    this.setState({
+      optionsOpen: false
+    });
+  }
+
+  toggleOptions = () => {
+    if (this.state.optionsOpen) {
+      this.closeOptions();
+    } else {
+      this.openOptions();
+    }
+  }
+
+  handleDropdownOpen = () => {
+    this.closeOptions();
+    this.openOptions();
+  }
+
+  handleAssetDelete = () => {
+    const { key, name } = this.props.asset;
+    this.closeOptions();
+    if (window.confirm(`Are you sure you want to delete "${name}"?`)) {
+      this.props.deleteAssetRequest(key);
+    }
+  }
+
+  render() {
+    const { asset, username } = this.props;
+    const { optionsOpen } = this.state;
+    return (
+      <tr className="asset-table__row" key={asset.key}>
+        <th scope="row">
+          <Link to={asset.url} target="_blank">
+            {asset.name}
+          </Link>
+        </th>
+        <td>{prettyBytes(asset.size)}</td>
+        <td>
+          { asset.sketchId && <Link to={`/${username}/sketches/${asset.sketchId}`}>{asset.sketchName}</Link> }
+        </td>
+        <td className="asset-table__dropdown-column">
+          <button
+            className="asset-table__dropdown-button"
+            onClick={this.toggleOptions}
+            onBlur={this.onBlurComponent}
+            onFocus={this.onFocusComponent}
+          >
+            <InlineSVG src={downFilledTriangle} alt="Menu" />
+          </button>
+          {optionsOpen &&
+            <ul
+              className="asset-table__action-dialogue"
+            >
+              <li>
+                <button
+                  className="asset-table__action-option"
+                  onClick={this.handleAssetDelete}
+                  onBlur={this.onBlurComponent}
+                  onFocus={this.onFocusComponent}
+                >
+                  Delete
+                </button>
+              </li>
+              <li>
+                <Link
+                  to={asset.url}
+                  target="_blank"
+                  onBlur={this.onBlurComponent}
+                  onFocus={this.onFocusComponent}
+                  className="asset-table__action-option"
+                >
+                  Open in New Tab
+                </Link>
+              </li>
+            </ul>}
+        </td>
+      </tr>
+    );
+  }
+}
+
+AssetListRowBase.propTypes = {
+  asset: PropTypes.shape({
+    key: PropTypes.string.isRequired,
+    url: PropTypes.string.isRequired,
+    sketchId: PropTypes.string,
+    sketchName: PropTypes.string,
+    name: PropTypes.string.isRequired,
+    size: PropTypes.number.isRequired
+  }).isRequired,
+  deleteAssetRequest: PropTypes.func.isRequired,
+  username: PropTypes.string.isRequired
+};
+
+function mapStateToPropsAssetListRow(state) {
+  return {
+    username: state.user.username
+  };
+}
+
+function mapDispatchToPropsAssetListRow(dispatch) {
+  return bindActionCreators(AssetActions, dispatch);
+}
+
+const AssetListRow = connect(mapStateToPropsAssetListRow, mapDispatchToPropsAssetListRow)(AssetListRowBase);
 
 class AssetList extends React.Component {
   constructor(props) {
@@ -16,10 +153,7 @@ class AssetList extends React.Component {
   }
 
   getAssetsTitle() {
-    if (!this.props.username || this.props.username === this.props.user.username) {
-      return 'p5.js Web Editor | My assets';
-    }
-    return `p5.js Web Editor | ${this.props.username}'s assets`;
+    return 'p5.js Web Editor | My assets';
   }
 
   hasAssets() {
@@ -39,14 +173,9 @@ class AssetList extends React.Component {
   }
 
   render() {
-    const username = this.props.username !== undefined ? this.props.username : this.props.user.username;
-    const { assetList, totalSize } = this.props;
+    const { assetList } = this.props;
     return (
       <div className="asset-table-container">
-        {/* Eventually, this copy should be Total / 250 MB Used */}
-        {this.hasAssets() &&
-          <p className="asset-table__total">{`${prettyBytes(totalSize)} Total`}</p>
-        }
         <Helmet>
           <title>{this.getAssetsTitle()}</title>
         </Helmet>
@@ -58,20 +187,12 @@ class AssetList extends React.Component {
               <tr>
                 <th>Name</th>
                 <th>Size</th>
-                <th>View</th>
                 <th>Sketch</th>
+                <th scope="col"></th>
               </tr>
             </thead>
             <tbody>
-              {assetList.map(asset =>
-                (
-                  <tr className="asset-table__row" key={asset.key}>
-                    <td>{asset.name}</td>
-                    <td>{prettyBytes(asset.size)}</td>
-                    <td><Link to={asset.url} target="_blank">View</Link></td>
-                    <td><Link to={`/${username}/sketches/${asset.sketchId}`}>{asset.sketchName}</Link></td>
-                  </tr>
-                ))}
+              {assetList.map(asset => <AssetListRow asset={asset} key={asset.key} />)}
             </tbody>
           </table>}
       </div>
@@ -83,15 +204,13 @@ AssetList.propTypes = {
   user: PropTypes.shape({
     username: PropTypes.string
   }).isRequired,
-  username: PropTypes.string.isRequired,
   assetList: PropTypes.arrayOf(PropTypes.shape({
     key: PropTypes.string.isRequired,
     name: PropTypes.string.isRequired,
     url: PropTypes.string.isRequired,
-    sketchName: PropTypes.string.isRequired,
-    sketchId: PropTypes.string.isRequired
+    sketchName: PropTypes.string,
+    sketchId: PropTypes.string
   })).isRequired,
-  totalSize: PropTypes.number.isRequired,
   getAssets: PropTypes.func.isRequired,
   loading: PropTypes.bool.isRequired
 };
@@ -100,7 +219,6 @@ function mapStateToProps(state) {
   return {
     user: state.user,
     assetList: state.assets.list,
-    totalSize: state.assets.totalSize,
     loading: state.loading
   };
 }
diff --git a/client/modules/IDE/components/AssetSize.jsx b/client/modules/IDE/components/AssetSize.jsx
new file mode 100644
index 00000000..2e4c1282
--- /dev/null
+++ b/client/modules/IDE/components/AssetSize.jsx
@@ -0,0 +1,51 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { connect } from 'react-redux';
+import prettyBytes from 'pretty-bytes';
+
+const __process = (typeof global !== 'undefined' ? global : window).process;
+const limit = __process.env.UPLOAD_LIMIT || 250000000;
+const MAX_SIZE_B = limit;
+
+const formatPercent = (percent) => {
+  const percentUsed = percent * 100;
+  if (percentUsed < 1) {
+    return '0%';
+  }
+
+  return `${Math.round(percentUsed)}%`;
+};
+
+/* Eventually, this copy should be Total / 250 MB Used */
+const AssetSize = ({ totalSize }) => {
+  if (totalSize === undefined) {
+    return null;
+  }
+
+  const currentSize = prettyBytes(totalSize);
+  const sizeLimit = prettyBytes(MAX_SIZE_B);
+  const percentValue = totalSize / MAX_SIZE_B;
+  const percent = formatPercent(percentValue);
+  const percentSize = percentValue < 1 ? percentValue : 1;
+
+  return (
+    <div className="asset-size" style={{ '--percent': percentSize }}>
+      <div className="asset-size-bar" />
+      <p className="asset-current">{currentSize} ({percent})</p>
+      <p className="asset-max">Max: {sizeLimit}</p>
+    </div>
+  );
+};
+
+AssetSize.propTypes = {
+  totalSize: PropTypes.number.isRequired,
+};
+
+function mapStateToProps(state) {
+  return {
+    user: state.user,
+    totalSize: state.user.totalSize || state.assets.totalSize,
+  };
+}
+
+export default connect(mapStateToProps)(AssetSize);
diff --git a/client/modules/IDE/components/CollectionList/CollectionList.jsx b/client/modules/IDE/components/CollectionList/CollectionList.jsx
new file mode 100644
index 00000000..e39d3c86
--- /dev/null
+++ b/client/modules/IDE/components/CollectionList/CollectionList.jsx
@@ -0,0 +1,221 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import InlineSVG from 'react-inlinesvg';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import classNames from 'classnames';
+import find from 'lodash/find';
+import * as ProjectActions from '../../actions/project';
+import * as ProjectsActions from '../../actions/projects';
+import * as CollectionsActions from '../../actions/collections';
+import * as ToastActions from '../../actions/toast';
+import * as SortingActions from '../../actions/sorting';
+import getSortedCollections from '../../selectors/collections';
+import Loader from '../../../App/components/loader';
+import Overlay from '../../../App/components/Overlay';
+import AddToCollectionSketchList from '../AddToCollectionSketchList';
+import { SketchSearchbar } from '../Searchbar';
+
+import CollectionListRow from './CollectionListRow';
+
+const arrowUp = require('../../../../images/sort-arrow-up.svg');
+const arrowDown = require('../../../../images/sort-arrow-down.svg');
+
+class CollectionList extends React.Component {
+  constructor(props) {
+    super(props);
+
+    if (props.projectId) {
+      props.getProject(props.projectId);
+    }
+
+    this.props.getCollections(this.props.username);
+    this.props.resetSorting();
+
+    this.state = {
+      hasLoadedData: false,
+      addingSketchesToCollectionId: null,
+    };
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (prevProps.loading === true && this.props.loading === false) {
+      // eslint-disable-next-line react/no-did-update-set-state
+      this.setState({
+        hasLoadedData: true,
+      });
+    }
+  }
+
+  getTitle() {
+    if (this.props.username === this.props.user.username) {
+      return 'p5.js Web Editor | My collections';
+    }
+    return `p5.js Web Editor | ${this.props.username}'s collections`;
+  }
+
+  showAddSketches = (collectionId) => {
+    this.setState({
+      addingSketchesToCollectionId: collectionId,
+    });
+  }
+
+  hideAddSketches = () => {
+    this.setState({
+      addingSketchesToCollectionId: null,
+    });
+  }
+
+  hasCollections() {
+    return (!this.props.loading || this.state.hasLoadedData) && this.props.collections.length > 0;
+  }
+
+  _renderLoader() {
+    if (this.props.loading && !this.state.hasLoadedData) return <Loader />;
+    return null;
+  }
+
+  _renderEmptyTable() {
+    if (!this.props.loading && this.props.collections.length === 0) {
+      return (<p className="sketches-table__empty">No collections.</p>);
+    }
+    return null;
+  }
+
+  _renderFieldHeader = (fieldName, displayName) => {
+    const { field, direction } = this.props.sorting;
+    const headerClass = classNames({
+      'sketches-table__header': true,
+      'sketches-table__header--selected': field === fieldName
+    });
+    return (
+      <th scope="col">
+        <button className="sketch-list__sort-button" onClick={() => this.props.toggleDirectionForField(fieldName)}>
+          <span className={headerClass}>{displayName}</span>
+          {field === fieldName && direction === SortingActions.DIRECTION.ASC &&
+            <InlineSVG src={arrowUp} />
+          }
+          {field === fieldName && direction === SortingActions.DIRECTION.DESC &&
+            <InlineSVG src={arrowDown} />
+          }
+        </button>
+      </th>
+    );
+  }
+
+  render() {
+    const username = this.props.username !== undefined ? this.props.username : this.props.user.username;
+
+    return (
+      <div className="sketches-table-container">
+        <Helmet>
+          <title>{this.getTitle()}</title>
+        </Helmet>
+
+        {this._renderLoader()}
+        {this._renderEmptyTable()}
+        {this.hasCollections() &&
+          <table className="sketches-table" summary="table containing all collections">
+            <thead>
+              <tr>
+                {this._renderFieldHeader('name', 'Name')}
+                {this._renderFieldHeader('createdAt', 'Date Created')}
+                {this._renderFieldHeader('updatedAt', 'Date Updated')}
+                {this._renderFieldHeader('numItems', '# sketches')}
+                <th scope="col"></th>
+              </tr>
+            </thead>
+            <tbody>
+              {this.props.collections.map(collection =>
+                (<CollectionListRow
+                  key={collection.id}
+                  collection={collection}
+                  user={this.props.user}
+                  username={username}
+                  project={this.props.project}
+                  onAddSketches={() => this.showAddSketches(collection.id)}
+                />))}
+            </tbody>
+          </table>}
+        {
+          this.state.addingSketchesToCollectionId && (
+            <Overlay
+              title="Add sketch"
+              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>
+            </Overlay>
+          )
+        }
+      </div>
+    );
+  }
+}
+
+CollectionList.propTypes = {
+  user: PropTypes.shape({
+    username: PropTypes.string,
+    authenticated: PropTypes.bool.isRequired
+  }).isRequired,
+  projectId: PropTypes.string,
+  getCollections: PropTypes.func.isRequired,
+  getProject: PropTypes.func.isRequired,
+  collections: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+    description: PropTypes.string,
+    createdAt: PropTypes.string.isRequired,
+    updatedAt: PropTypes.string.isRequired,
+  })).isRequired,
+  username: PropTypes.string,
+  loading: PropTypes.bool.isRequired,
+  toggleDirectionForField: PropTypes.func.isRequired,
+  resetSorting: PropTypes.func.isRequired,
+  sorting: PropTypes.shape({
+    field: PropTypes.string.isRequired,
+    direction: PropTypes.string.isRequired
+  }).isRequired,
+  project: PropTypes.shape({
+    id: PropTypes.string,
+    owner: PropTypes.shape({
+      id: PropTypes.string
+    })
+  })
+};
+
+CollectionList.defaultProps = {
+  projectId: undefined,
+  project: {
+    id: undefined,
+    owner: undefined
+  },
+  username: undefined
+};
+
+function mapStateToProps(state, ownProps) {
+  return {
+    user: state.user,
+    collections: getSortedCollections(state),
+    sorting: state.sorting,
+    loading: state.loading,
+    project: state.project,
+    projectId: ownProps && ownProps.params ? ownProps.params.project_id : null,
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return bindActionCreators(
+    Object.assign({}, CollectionsActions, ProjectsActions, ProjectActions, ToastActions, SortingActions),
+    dispatch
+  );
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(CollectionList);
diff --git a/client/modules/IDE/components/CollectionList/CollectionListRow.jsx b/client/modules/IDE/components/CollectionList/CollectionListRow.jsx
new file mode 100644
index 00000000..93513511
--- /dev/null
+++ b/client/modules/IDE/components/CollectionList/CollectionListRow.jsx
@@ -0,0 +1,252 @@
+import format from 'date-fns/format';
+import PropTypes from 'prop-types';
+import React from 'react';
+import InlineSVG from 'react-inlinesvg';
+import { connect } from 'react-redux';
+import { Link } from 'react-router';
+import { bindActionCreators } from 'redux';
+import * as ProjectActions from '../../actions/project';
+import * as CollectionsActions from '../../actions/collections';
+import * as IdeActions from '../../actions/ide';
+import * as ToastActions from '../../actions/toast';
+
+const downFilledTriangle = require('../../../../images/down-filled-triangle.svg');
+
+class CollectionListRowBase extends React.Component {
+  static projectInCollection(project, collection) {
+    return collection.items.find(item => item.project.id === project.id) != null;
+  }
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      optionsOpen: false,
+      isFocused: false,
+      renameOpen: false,
+      renameValue: '',
+    };
+  }
+
+  onFocusComponent = () => {
+    this.setState({ isFocused: true });
+  }
+
+  onBlurComponent = () => {
+    this.setState({ isFocused: false });
+    setTimeout(() => {
+      if (!this.state.isFocused) {
+        this.closeAll();
+      }
+    }, 200);
+  }
+
+  openOptions = () => {
+    this.setState({
+      optionsOpen: true
+    });
+  }
+
+  closeOptions = () => {
+    this.setState({
+      optionsOpen: false
+    });
+  }
+
+  toggleOptions = () => {
+    if (this.state.optionsOpen) {
+      this.closeOptions();
+    } else {
+      this.openOptions();
+    }
+  }
+
+  closeAll = () => {
+    this.setState({
+      optionsOpen: false,
+      renameOpen: false,
+    });
+  }
+
+  handleAddSketches = () => {
+    this.closeAll();
+    this.props.onAddSketches();
+  }
+
+  handleDropdownOpen = () => {
+    this.closeAll();
+    this.openOptions();
+  }
+
+  handleCollectionDelete = () => {
+    this.closeAll();
+    if (window.confirm(`Are you sure you want to delete "${this.props.collection.name}"?`)) {
+      this.props.deleteCollection(this.props.collection.id);
+    }
+  }
+
+  handleRenameOpen = () => {
+    this.closeAll();
+    this.setState({
+      renameOpen: true,
+      renameValue: this.props.collection.name,
+    });
+  }
+
+  handleRenameChange = (e) => {
+    this.setState({
+      renameValue: e.target.value
+    });
+  }
+
+  handleRenameEnter = (e) => {
+    const isValid = this.state.renameValue !== '';
+
+    if (e.key === 'Enter') {
+      if (isValid) {
+        this.props.editCollection(this.props.collection.id, { name: this.state.renameValue });
+      }
+
+      // this.resetName();
+      this.closeAll();
+    }
+  }
+
+  // resetName = () => {
+  //   this.setState({
+  //     renameValue: this.props.collection.name
+  //   });
+  // }
+
+  renderActions = () => {
+    const { optionsOpen } = this.state;
+    const userIsOwner = this.props.user.username === this.props.username;
+
+    return (
+      <React.Fragment>
+        <button
+          className="sketch-list__dropdown-button"
+          onClick={this.toggleOptions}
+          onBlur={this.onBlurComponent}
+          onFocus={this.onFocusComponent}
+        >
+          <InlineSVG src={downFilledTriangle} alt="Menu" />
+        </button>
+        {optionsOpen &&
+          <ul
+            className="sketch-list__action-dialogue"
+          >
+            <li>
+              <button
+                className="sketch-list__action-option"
+                onClick={this.handleAddSketches}
+                onBlur={this.onBlurComponent}
+                onFocus={this.onFocusComponent}
+              >
+                Add sketch
+              </button>
+            </li>
+            {userIsOwner &&
+              <li>
+                <button
+                  className="sketch-list__action-option"
+                  onClick={this.handleCollectionDelete}
+                  onBlur={this.onBlurComponent}
+                  onFocus={this.onFocusComponent}
+                >
+                  Delete
+                </button>
+              </li>}
+            {userIsOwner &&
+              <li>
+                <button
+                  className="sketch-list__action-option"
+                  onClick={this.handleRenameOpen}
+                  onBlur={this.onBlurComponent}
+                  onFocus={this.onFocusComponent}
+                >
+                  Rename
+                </button>
+              </li>}
+          </ul>
+        }
+      </React.Fragment>
+    );
+  }
+
+  renderCollectionName = () => {
+    const { collection, username } = this.props;
+    const { renameOpen, renameValue } = this.state;
+
+    return (
+      <React.Fragment>
+        <Link to={{ pathname: `/${username}/collections/${collection.id}`, state: { skipSavingPath: true } }}>
+          {renameOpen ? '' : collection.name}
+        </Link>
+        {renameOpen
+          &&
+          <input
+            value={renameValue}
+            onChange={this.handleRenameChange}
+            onKeyUp={this.handleRenameEnter}
+            // onBlur={this.resetName}
+            onClick={e => e.stopPropagation()}
+          />
+        }
+      </React.Fragment>
+    );
+  }
+
+  render() {
+    const { collection } = this.props;
+
+    return (
+      <tr
+        className="sketches-table__row"
+        key={collection.id}
+      >
+        <th scope="row">
+          <span className="sketches-table__name">
+            {this.renderCollectionName()}
+          </span>
+        </th>
+        <td>{format(new Date(collection.createdAt), 'MMM D, YYYY')}</td>
+        <td>{format(new Date(collection.updatedAt), 'MMM D, YYYY')}</td>
+        <td>{(collection.items || []).length}</td>
+        <td className="sketch-list__dropdown-column">
+          {this.renderActions()}
+        </td>
+      </tr>
+    );
+  }
+}
+
+CollectionListRowBase.propTypes = {
+  collection: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+    owner: PropTypes.shape({
+      username: PropTypes.string.isRequired,
+    }).isRequired,
+    createdAt: PropTypes.string.isRequired,
+    updatedAt: PropTypes.string.isRequired,
+    items: PropTypes.arrayOf(PropTypes.shape({
+      project: PropTypes.shape({
+        id: PropTypes.string.isRequired
+      })
+    }))
+  }).isRequired,
+  username: PropTypes.string.isRequired,
+  user: PropTypes.shape({
+    username: PropTypes.string,
+    authenticated: PropTypes.bool.isRequired
+  }).isRequired,
+  deleteCollection: PropTypes.func.isRequired,
+  editCollection: PropTypes.func.isRequired,
+  onAddSketches: PropTypes.func.isRequired,
+};
+
+function mapDispatchToPropsSketchListRow(dispatch) {
+  return bindActionCreators(Object.assign({}, CollectionsActions, ProjectActions, IdeActions, ToastActions), dispatch);
+}
+
+export default connect(null, mapDispatchToPropsSketchListRow)(CollectionListRowBase);
diff --git a/client/modules/IDE/components/CollectionList/index.js b/client/modules/IDE/components/CollectionList/index.js
new file mode 100644
index 00000000..51d43417
--- /dev/null
+++ b/client/modules/IDE/components/CollectionList/index.js
@@ -0,0 +1 @@
+export { default } from './CollectionList';
diff --git a/client/modules/IDE/components/EditableInput.jsx b/client/modules/IDE/components/EditableInput.jsx
new file mode 100644
index 00000000..eef5e0b8
--- /dev/null
+++ b/client/modules/IDE/components/EditableInput.jsx
@@ -0,0 +1,93 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import InlineSVG from 'react-inlinesvg';
+
+const editIconUrl = require('../../../images/pencil.svg');
+
+function EditIcon() {
+  return <InlineSVG className="editable-input__icon" src={editIconUrl} alt="Edit" />;
+}
+
+function EditableInput({
+  validate, value, emptyPlaceholder, InputComponent, inputProps, onChange
+}) {
+  const [isEditing, setIsEditing] = React.useState(false);
+  const [currentValue, setCurrentValue] = React.useState(value || '');
+  const displayValue = currentValue || emptyPlaceholder;
+  const hasValue = currentValue !== '';
+  const classes = `editable-input editable-input--${isEditing ? 'is-editing' : 'is-not-editing'} editable-input--${hasValue ? 'has-value' : 'has-placeholder'}`;
+  const inputRef = React.createRef();
+
+  React.useEffect(() => {
+    if (isEditing) {
+      inputRef.current.focus();
+    }
+  }, [isEditing]);
+
+  function beginEditing() {
+    setIsEditing(true);
+  }
+
+  function doneEditing() {
+    setIsEditing(false);
+
+    const isValid = typeof validate === 'function' && validate(currentValue);
+
+    if (isValid) {
+      onChange(currentValue);
+    } else {
+      setCurrentValue(value);
+    }
+  }
+
+  function updateValue(event) {
+    setCurrentValue(event.target.value);
+  }
+
+  function checkForKeyAction(event) {
+    if (event.key === 'Enter') {
+      doneEditing();
+    }
+  }
+
+  return (
+    <span className={classes}>
+      <button className="editable-input__label" onClick={beginEditing}>
+        <span>{displayValue}</span>
+        <EditIcon />
+      </button>
+
+      <InputComponent
+        className="editable-input__input"
+        type="text"
+        {...inputProps}
+        disabled={!isEditing}
+        onBlur={doneEditing}
+        onChange={updateValue}
+        onKeyPress={checkForKeyAction}
+        ref={inputRef}
+        value={currentValue}
+      />
+    </span >
+  );
+}
+
+EditableInput.defaultProps = {
+  emptyPlaceholder: 'No value',
+  InputComponent: 'input',
+  inputProps: {},
+  validate: () => true,
+  value: '',
+};
+
+EditableInput.propTypes = {
+  emptyPlaceholder: PropTypes.string,
+  InputComponent: PropTypes.elementType,
+  // eslint-disable-next-line react/forbid-prop-types
+  inputProps: PropTypes.object,
+  onChange: PropTypes.func.isRequired,
+  validate: PropTypes.func,
+  value: PropTypes.string,
+};
+
+export default EditableInput;
diff --git a/client/modules/IDE/components/FileUploader.jsx b/client/modules/IDE/components/FileUploader.jsx
index 50fe6062..c9515f5c 100644
--- a/client/modules/IDE/components/FileUploader.jsx
+++ b/client/modules/IDE/components/FileUploader.jsx
@@ -30,7 +30,7 @@ class FileUploader extends React.Component {
       thumbnailWidth: 200,
       thumbnailHeight: 200,
       acceptedFiles: fileExtensionsAndMimeTypes,
-      dictDefaultMessage: 'Drop files here to upload or click to use the file browser',
+      dictDefaultMessage: 'Drop files here or click to use the file browser',
       accept: this.props.dropzoneAcceptCallback.bind(this, userId),
       sending: this.props.dropzoneSendingCallback,
       complete: this.props.dropzoneCompleteCallback
diff --git a/client/modules/IDE/components/NewFileForm.jsx b/client/modules/IDE/components/NewFileForm.jsx
index d0a6b8ab..926a9925 100644
--- a/client/modules/IDE/components/NewFileForm.jsx
+++ b/client/modules/IDE/components/NewFileForm.jsx
@@ -22,16 +22,18 @@ class NewFileForm extends React.Component {
           handleSubmit(this.createFile)(data);
         }}
       >
-        <label className="new-file-form__name-label" htmlFor="name">Name:</label>
-        <input
-          className="new-file-form__name-input"
-          id="name"
-          type="text"
-          placeholder="Name"
-          {...domOnlyProps(name)}
-          ref={(element) => { this.fileName = element; }}
-        />
-        <input type="submit" value="Add File" aria-label="add file" />
+        <div className="new-file-form__input-wrapper">
+          <label className="new-file-form__name-label" htmlFor="name">Name:</label>
+          <input
+            className="new-file-form__name-input"
+            id="name"
+            type="text"
+            placeholder="Name"
+            {...domOnlyProps(name)}
+            ref={(element) => { this.fileName = element; }}
+          />
+          <input type="submit" value="Add File" aria-label="add file" />
+        </div>
         {name.touched && name.error && <span className="form-error">{name.error}</span>}
       </form>
     );
diff --git a/client/modules/IDE/components/NewFileModal.jsx b/client/modules/IDE/components/NewFileModal.jsx
index 433c3daa..36c3cc4d 100644
--- a/client/modules/IDE/components/NewFileModal.jsx
+++ b/client/modules/IDE/components/NewFileModal.jsx
@@ -1,10 +1,12 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators, compose } from 'redux';
 import { reduxForm } from 'redux-form';
-import classNames from 'classnames';
 import InlineSVG from 'react-inlinesvg';
 import NewFileForm from './NewFileForm';
-import FileUploader from './FileUploader';
+import { closeNewFileModal } from '../actions/ide';
+import { createFile } from '../actions/files';
 import { CREATE_FILE_REGEX } from '../../../../server/utils/fileUtils';
 
 const exitUrl = require('../../../images/exit.svg');
@@ -28,16 +30,12 @@ class NewFileModal extends React.Component {
   }
 
   render() {
-    const modalClass = classNames({
-      'modal': true,
-      'modal--reduced': !this.props.canUploadMedia
-    });
     return (
-      <section className={modalClass} ref={(element) => { this.modal = element; }}>
+      <section className="modal" ref={(element) => { this.modal = element; }}>
         <div className="modal-content">
           <div className="modal__header">
-            <h2 className="modal__title">Add File</h2>
-            <button className="modal__exit-button" onClick={this.props.closeModal}>
+            <h2 className="modal__title">Create File</h2>
+            <button className="modal__exit-button" onClick={this.props.closeNewFileModal}>
               <InlineSVG src={exitUrl} alt="Close New File Modal" />
             </button>
           </div>
@@ -45,17 +43,6 @@ class NewFileModal extends React.Component {
             focusOnModal={this.focusOnModal}
             {...this.props}
           />
-          {(() => {
-            if (this.props.canUploadMedia) {
-              return (
-                <div>
-                  <p className="modal__divider">OR</p>
-                  <FileUploader />
-                </div>
-              );
-            }
-            return '';
-          })()}
         </div>
       </section>
     );
@@ -63,8 +50,8 @@ class NewFileModal extends React.Component {
 }
 
 NewFileModal.propTypes = {
-  closeModal: PropTypes.func.isRequired,
-  canUploadMedia: PropTypes.bool.isRequired
+  createFile: PropTypes.func.isRequired,
+  closeNewFileModal: PropTypes.func.isRequired
 };
 
 function validate(formProps) {
@@ -79,9 +66,19 @@ function validate(formProps) {
   return errors;
 }
 
+function mapStateToProps() {
+  return {};
+}
 
-export default reduxForm({
-  form: 'new-file',
-  fields: ['name'],
-  validate
-})(NewFileModal);
+function mapDispatchToProps(dispatch) {
+  return bindActionCreators({ createFile, closeNewFileModal }, dispatch);
+}
+
+export default compose(
+  connect(mapStateToProps, mapDispatchToProps),
+  reduxForm({
+    form: 'new-file',
+    fields: ['name'],
+    validate
+  })
+)(NewFileModal);
diff --git a/client/modules/IDE/components/NewFolderForm.jsx b/client/modules/IDE/components/NewFolderForm.jsx
index 3490de64..5fa48acd 100644
--- a/client/modules/IDE/components/NewFolderForm.jsx
+++ b/client/modules/IDE/components/NewFolderForm.jsx
@@ -20,21 +20,21 @@ class NewFolderForm extends React.Component {
       <form
         className="new-folder-form"
         onSubmit={(data) => {
-          if (handleSubmit(this.createFolder)(data)) {
-            this.props.closeModal();
-          }
+          handleSubmit(this.createFolder)(data);
         }}
       >
-        <label className="new-folder-form__name-label" htmlFor="name">Name:</label>
-        <input
-          className="new-folder-form__name-input"
-          id="name"
-          type="text"
-          placeholder="Name"
-          ref={(element) => { this.fileName = element; }}
-          {...domOnlyProps(name)}
-        />
-        <input type="submit" value="Add Folder" aria-label="add folder" />
+        <div className="new-folder-form__input-wrapper">
+          <label className="new-folder-form__name-label" htmlFor="name">Name:</label>
+          <input
+            className="new-folder-form__name-input"
+            id="name"
+            type="text"
+            placeholder="Name"
+            ref={(element) => { this.fileName = element; }}
+            {...domOnlyProps(name)}
+          />
+          <input type="submit" value="Add Folder" aria-label="add folder" />
+        </div>
         {name.touched && name.error && <span className="form-error">{name.error}</span>}
       </form>
     );
diff --git a/client/modules/IDE/components/NewFolderModal.jsx b/client/modules/IDE/components/NewFolderModal.jsx
index 60483ce8..4af43a89 100644
--- a/client/modules/IDE/components/NewFolderModal.jsx
+++ b/client/modules/IDE/components/NewFolderModal.jsx
@@ -16,7 +16,7 @@ class NewFolderModal extends React.Component {
       <section className="modal" ref={(element) => { this.newFolderModal = element; }} >
         <div className="modal-content-folder">
           <div className="modal__header">
-            <h2 className="modal__title">Add Folder</h2>
+            <h2 className="modal__title">Create Folder</h2>
             <button className="modal__exit-button" onClick={this.props.closeModal}>
               <InlineSVG src={exitUrl} alt="Close New Folder Modal" />
             </button>
diff --git a/client/modules/IDE/components/Preferences.jsx b/client/modules/IDE/components/Preferences.jsx
index 7ca5a216..5b2a2898 100644
--- a/client/modules/IDE/components/Preferences.jsx
+++ b/client/modules/IDE/components/Preferences.jsx
@@ -98,9 +98,9 @@ class Preferences extends React.Component {
         </Helmet>
         <Tabs>
           <TabList>
-            <div className="preference__subheadings">
-              <Tab><h4 className="preference__subheading">General Settings</h4></Tab>
-              <Tab><h4 className="preference__subheading">Accessibility</h4></Tab>
+            <div className="tabs__titles">
+              <Tab><h4 className="tabs__title">General Settings</h4></Tab>
+              <Tab><h4 className="tabs__title">Accessibility</h4></Tab>
             </div>
           </TabList>
           <TabPanel>
diff --git a/client/modules/IDE/components/QuickAddList/Icons.jsx b/client/modules/IDE/components/QuickAddList/Icons.jsx
new file mode 100644
index 00000000..41e0c52f
--- /dev/null
+++ b/client/modules/IDE/components/QuickAddList/Icons.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import InlineSVG from 'react-inlinesvg';
+
+const check = require('../../../../images/check_encircled.svg');
+const close = require('../../../../images/close.svg');
+
+const Icons = ({ isAdded }) => {
+  const classes = [
+    'quick-add__icon',
+    isAdded ? 'quick-add__icon--in-collection' : 'quick-add__icon--not-in-collection'
+  ].join(' ');
+
+  return (
+    <div className={classes}>
+      <InlineSVG className="quick-add__remove-icon" src={close} alt="Remove from collection" />
+      <InlineSVG className="quick-add__in-icon" src={check} alt="In collection" />
+      <InlineSVG className="quick-add__add-icon" src={close} alt="Add to collection" />
+    </div>
+  );
+};
+
+Icons.propTypes = {
+  isAdded: PropTypes.bool.isRequired,
+};
+
+export default Icons;
diff --git a/client/modules/IDE/components/QuickAddList/QuickAddList.jsx b/client/modules/IDE/components/QuickAddList/QuickAddList.jsx
new file mode 100644
index 00000000..fe32168d
--- /dev/null
+++ b/client/modules/IDE/components/QuickAddList/QuickAddList.jsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router';
+
+import Icons from './Icons';
+
+const Item = ({
+  isAdded, onSelect, name, url
+}) => (
+  <li className="quick-add__item" onClick={onSelect}> { /* eslint-disable-line */ }
+    <button className="quick-add__item-toggle" onClick={onSelect}>
+      <Icons isAdded={isAdded} />
+    </button>
+    <span className="quick-add__item-name">{name}</span>
+    <Link
+      className="quick-add__item-view"
+      to={url}
+      target="_blank"
+      onClick={e => e.stopPropogation()}
+    >
+      View
+    </Link>
+  </li>
+);
+
+const ItemType = PropTypes.shape({
+  name: PropTypes.string.isRequired,
+  url: PropTypes.string.isRequired,
+  isAdded: PropTypes.bool.isRequired,
+});
+
+Item.propTypes = {
+  name: PropTypes.string.isRequired,
+  url: PropTypes.string.isRequired,
+  isAdded: PropTypes.bool.isRequired,
+  onSelect: PropTypes.func.isRequired,
+};
+
+const QuickAddList = ({
+  items, onAdd, onRemove
+}) => {
+  const handleAction = (item) => {
+    if (item.isAdded) {
+      onRemove(item);
+    } else {
+      onAdd(item);
+    }
+  };
+
+  return (
+    <ul className="quick-add">{items.map(item => (<Item
+      key={item.id}
+      {...item}
+      onSelect={
+        (event) => {
+          event.target.blur();
+          handleAction(item);
+        }
+      }
+    />))}
+    </ul>
+  );
+};
+
+QuickAddList.propTypes = {
+  items: PropTypes.arrayOf(ItemType).isRequired,
+  onAdd: PropTypes.func.isRequired,
+  onRemove: PropTypes.func.isRequired,
+};
+
+export default QuickAddList;
diff --git a/client/modules/IDE/components/QuickAddList/index.js b/client/modules/IDE/components/QuickAddList/index.js
new file mode 100644
index 00000000..4503fca5
--- /dev/null
+++ b/client/modules/IDE/components/QuickAddList/index.js
@@ -0,0 +1 @@
+export { default } from './QuickAddList.jsx';
diff --git a/client/modules/IDE/components/Searchbar/Collection.jsx b/client/modules/IDE/components/Searchbar/Collection.jsx
new file mode 100644
index 00000000..c566ced2
--- /dev/null
+++ b/client/modules/IDE/components/Searchbar/Collection.jsx
@@ -0,0 +1,24 @@
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import * as SortingActions from '../../actions/sorting';
+
+import Searchbar from './Searchbar';
+
+const scope = 'collection';
+
+function mapStateToProps(state) {
+  return {
+    searchLabel: 'Search collections...',
+    searchTerm: state.search[`${scope}SearchTerm`],
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  const actions = {
+    setSearchTerm: term => SortingActions.setSearchTerm(scope, term),
+    resetSearchTerm: () => SortingActions.resetSearchTerm(scope),
+  };
+  return bindActionCreators(Object.assign({}, actions), dispatch);
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Searchbar);
diff --git a/client/modules/IDE/components/Searchbar.jsx b/client/modules/IDE/components/Searchbar/Searchbar.jsx
similarity index 72%
rename from client/modules/IDE/components/Searchbar.jsx
rename to client/modules/IDE/components/Searchbar/Searchbar.jsx
index db64fe65..1577ec5e 100644
--- a/client/modules/IDE/components/Searchbar.jsx
+++ b/client/modules/IDE/components/Searchbar/Searchbar.jsx
@@ -1,12 +1,9 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import InlineSVG from 'react-inlinesvg';
-import { bindActionCreators } from 'redux';
-import { connect } from 'react-redux';
 import { throttle } from 'lodash';
-import * as SortingActions from '../actions/sorting';
 
-const searchIcon = require('../../../images/magnifyingglass.svg');
+const searchIcon = require('../../../../images/magnifyingglass.svg');
 
 class Searchbar extends React.Component {
   constructor(props) {
@@ -46,7 +43,7 @@ class Searchbar extends React.Component {
   render() {
     const { searchValue } = this.state;
     return (
-      <div className="searchbar">
+      <div className={`searchbar ${searchValue === '' ? 'searchbar--is-empty' : ''}`}>
         <div className="searchbar__button">
           <InlineSVG className="searchbar__icon" src={searchIcon} />
         </div>
@@ -54,7 +51,7 @@ class Searchbar extends React.Component {
           className="searchbar__input"
           type="text"
           value={searchValue}
-          placeholder="Search files..."
+          placeholder={this.props.searchLabel}
           onChange={this.handleSearchChange}
           onKeyUp={this.handleSearchEnter}
         />
@@ -71,17 +68,12 @@ class Searchbar extends React.Component {
 Searchbar.propTypes = {
   searchTerm: PropTypes.string.isRequired,
   setSearchTerm: PropTypes.func.isRequired,
-  resetSearchTerm: PropTypes.func.isRequired
+  resetSearchTerm: PropTypes.func.isRequired,
+  searchLabel: PropTypes.string,
 };
 
-function mapStateToProps(state) {
-  return {
-    searchTerm: state.search.searchTerm
-  };
-}
+Searchbar.defaultProps = {
+  searchLabel: 'Search sketches...',
+};
 
-function mapDispatchToProps(dispatch) {
-  return bindActionCreators(Object.assign({}, SortingActions), dispatch);
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(Searchbar);
+export default Searchbar;
diff --git a/client/modules/IDE/components/Searchbar/Sketch.jsx b/client/modules/IDE/components/Searchbar/Sketch.jsx
new file mode 100644
index 00000000..bc12854e
--- /dev/null
+++ b/client/modules/IDE/components/Searchbar/Sketch.jsx
@@ -0,0 +1,23 @@
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import * as SortingActions from '../../actions/sorting';
+
+import Searchbar from './Searchbar';
+
+const scope = 'sketch';
+
+function mapStateToProps(state) {
+  return {
+    searchTerm: state.search[`${scope}SearchTerm`],
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  const actions = {
+    setSearchTerm: term => SortingActions.setSearchTerm(scope, term),
+    resetSearchTerm: () => SortingActions.resetSearchTerm(scope),
+  };
+  return bindActionCreators(Object.assign({}, actions), dispatch);
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Searchbar);
diff --git a/client/modules/IDE/components/Searchbar/index.js b/client/modules/IDE/components/Searchbar/index.js
new file mode 100644
index 00000000..3a063f68
--- /dev/null
+++ b/client/modules/IDE/components/Searchbar/index.js
@@ -0,0 +1,2 @@
+export { default as CollectionSearchbar } from './Collection.jsx';
+export { default as SketchSearchbar } from './Sketch.jsx';
diff --git a/client/modules/IDE/components/Sidebar.jsx b/client/modules/IDE/components/Sidebar.jsx
index 2ea492c2..9a57ff4a 100644
--- a/client/modules/IDE/components/Sidebar.jsx
+++ b/client/modules/IDE/components/Sidebar.jsx
@@ -97,7 +97,7 @@ class Sidebar extends React.Component {
                   onBlur={this.onBlurComponent}
                   onFocus={this.onFocusComponent}
                 >
-                  Add folder
+                  Create folder
                 </button>
               </li>
               <li>
@@ -110,7 +110,20 @@ class Sidebar extends React.Component {
                   onBlur={this.onBlurComponent}
                   onFocus={this.onFocusComponent}
                 >
-                  Add file
+                  Create file
+                </button>
+              </li>
+              <li>
+                <button
+                  aria-label="upload file"
+                  onClick={() => {
+                    this.props.openUploadFileModal(rootFile.id);
+                    setTimeout(this.props.closeProjectOptions, 0);
+                  }}
+                  onBlur={this.onBlurComponent}
+                  onFocus={this.onFocusComponent}
+                >
+                  Upload file
                 </button>
               </li>
             </ul>
@@ -137,6 +150,7 @@ Sidebar.propTypes = {
   openProjectOptions: PropTypes.func.isRequired,
   closeProjectOptions: PropTypes.func.isRequired,
   newFolder: PropTypes.func.isRequired,
+  openUploadFileModal: PropTypes.func.isRequired,
   owner: PropTypes.shape({
     id: PropTypes.string
   }),
diff --git a/client/modules/IDE/components/SketchList.jsx b/client/modules/IDE/components/SketchList.jsx
index 89d5cb10..26ad3d7c 100644
--- a/client/modules/IDE/components/SketchList.jsx
+++ b/client/modules/IDE/components/SketchList.jsx
@@ -10,11 +10,14 @@ import classNames from 'classnames';
 import slugify from 'slugify';
 import * as ProjectActions from '../actions/project';
 import * as ProjectsActions from '../actions/projects';
+import * as CollectionsActions from '../actions/collections';
 import * as ToastActions from '../actions/toast';
 import * as SortingActions from '../actions/sorting';
 import * as IdeActions from '../actions/ide';
 import getSortedSketches from '../selectors/projects';
 import Loader from '../../App/components/loader';
+import Overlay from '../../App/components/Overlay';
+import AddToCollectionList from './AddToCollectionList';
 
 const arrowUp = require('../../../images/sort-arrow-up.svg');
 const arrowDown = require('../../../images/sort-arrow-down.svg');
@@ -27,9 +30,10 @@ class SketchListRowBase extends React.Component {
       optionsOpen: false,
       renameOpen: false,
       renameValue: props.sketch.name,
-      isFocused: false
+      isFocused: false,
     };
   }
+
   onFocusComponent = () => {
     this.setState({ isFocused: true });
   }
@@ -133,105 +137,146 @@ class SketchListRowBase extends React.Component {
     }
   }
 
-  render() {
-    const { sketch, username } = this.props;
-    const { renameOpen, optionsOpen, renameValue } = this.state;
+  renderViewButton = sketchURL => (
+    <td className="sketch-list__dropdown-column">
+      <Link to={sketchURL}>View</Link>
+    </td>
+  )
+
+  renderDropdown = () => {
+    const { optionsOpen } = this.state;
     const userIsOwner = this.props.user.username === this.props.username;
+
+    return (
+      <td className="sketch-list__dropdown-column">
+        <button
+          className="sketch-list__dropdown-button"
+          onClick={this.toggleOptions}
+          onBlur={this.onBlurComponent}
+          onFocus={this.onFocusComponent}
+        >
+          <InlineSVG src={downFilledTriangle} alt="Menu" />
+        </button>
+        {optionsOpen &&
+          <ul
+            className="sketch-list__action-dialogue"
+          >
+            {userIsOwner &&
+            <li>
+              <button
+                className="sketch-list__action-option"
+                onClick={this.handleRenameOpen}
+                onBlur={this.onBlurComponent}
+                onFocus={this.onFocusComponent}
+              >
+                Rename
+              </button>
+            </li>}
+            <li>
+              <button
+                className="sketch-list__action-option"
+                onClick={this.handleSketchDownload}
+                onBlur={this.onBlurComponent}
+                onFocus={this.onFocusComponent}
+              >
+                Download
+              </button>
+            </li>
+            {this.props.user.authenticated &&
+            <li>
+              <button
+                className="sketch-list__action-option"
+                onClick={this.handleSketchDuplicate}
+                onBlur={this.onBlurComponent}
+                onFocus={this.onFocusComponent}
+              >
+                Duplicate
+              </button>
+            </li>}
+            {this.props.user.authenticated &&
+              <li>
+                <button
+                  className="sketch-list__action-option"
+                  onClick={() => {
+                    this.props.onAddToCollection();
+                    this.closeAll();
+                  }}
+                  onBlur={this.onBlurComponent}
+                  onFocus={this.onFocusComponent}
+                >
+                  Add to collection
+                </button>
+              </li>}
+            { /* <li>
+              <button
+                className="sketch-list__action-option"
+                onClick={this.handleSketchShare}
+                onBlur={this.onBlurComponent}
+                onFocus={this.onFocusComponent}
+              >
+                Share
+              </button>
+            </li> */ }
+            {userIsOwner &&
+            <li>
+              <button
+                className="sketch-list__action-option"
+                onClick={this.handleSketchDelete}
+                onBlur={this.onBlurComponent}
+                onFocus={this.onFocusComponent}
+              >
+                Delete
+              </button>
+            </li>}
+          </ul>}
+      </td>
+    );
+  }
+
+  render() {
+    const {
+      sketch,
+      username,
+    } = this.props;
+    const { renameOpen, renameValue } = this.state;
     let url = `/${username}/sketches/${sketch.id}`;
     if (username === 'p5') {
       url = `/${username}/sketches/${slugify(sketch.name, '_')}`;
     }
+
+    const name = (
+      <React.Fragment>
+        <Link to={url}>
+          {renameOpen ? '' : sketch.name}
+        </Link>
+        {renameOpen
+        &&
+        <input
+          value={renameValue}
+          onChange={this.handleRenameChange}
+          onKeyUp={this.handleRenameEnter}
+          onBlur={this.resetSketchName}
+          onClick={e => e.stopPropagation()}
+        />
+        }
+      </React.Fragment>
+    );
+
     return (
-      <tr
-        className="sketches-table__row"
-        key={sketch.id}
-      >
-        <th scope="row">
-          <Link to={url}>
-            {renameOpen ? '' : sketch.name}
-          </Link>
-          {renameOpen
-            &&
-            <input
-              value={renameValue}
-              onChange={this.handleRenameChange}
-              onKeyUp={this.handleRenameEnter}
-              onBlur={this.resetSketchName}
-              onClick={e => e.stopPropagation()}
-            />
-          }
-        </th>
-        <td>{format(new Date(sketch.createdAt), 'MMM D, YYYY h:mm A')}</td>
-        <td>{format(new Date(sketch.updatedAt), 'MMM D, YYYY h:mm A')}</td>
-        <td className="sketch-list__dropdown-column">
-          <button
-            className="sketch-list__dropdown-button"
-            onClick={this.toggleOptions}
-            onBlur={this.onBlurComponent}
-            onFocus={this.onFocusComponent}
-          >
-            <InlineSVG src={downFilledTriangle} alt="Menu" />
-          </button>
-          {optionsOpen &&
-            <ul
-              className="sketch-list__action-dialogue"
-            >
-              {userIsOwner &&
-              <li>
-                <button
-                  className="sketch-list__action-option"
-                  onClick={this.handleRenameOpen}
-                  onBlur={this.onBlurComponent}
-                  onFocus={this.onFocusComponent}
-                >
-                  Rename
-                </button>
-              </li>}
-              <li>
-                <button
-                  className="sketch-list__action-option"
-                  onClick={this.handleSketchDownload}
-                  onBlur={this.onBlurComponent}
-                  onFocus={this.onFocusComponent}
-                >
-                  Download
-                </button>
-              </li>
-              {this.props.user.authenticated &&
-              <li>
-                <button
-                  className="sketch-list__action-option"
-                  onClick={this.handleSketchDuplicate}
-                  onBlur={this.onBlurComponent}
-                  onFocus={this.onFocusComponent}
-                >
-                  Duplicate
-                </button>
-              </li>}
-              { /* <li>
-                <button
-                  className="sketch-list__action-option"
-                  onClick={this.handleSketchShare}
-                  onBlur={this.onBlurComponent}
-                  onFocus={this.onFocusComponent}
-                >
-                  Share
-                </button>
-              </li> */ }
-              {userIsOwner &&
-              <li>
-                <button
-                  className="sketch-list__action-option"
-                  onClick={this.handleSketchDelete}
-                  onBlur={this.onBlurComponent}
-                  onFocus={this.onFocusComponent}
-                >
-                  Delete
-                </button>
-              </li>}
-            </ul>}
-        </td>
-      </tr>);
+      <React.Fragment>
+        <tr
+          className="sketches-table__row"
+          key={sketch.id}
+          onClick={this.handleRowClick}
+        >
+          <th scope="row">
+            {name}
+          </th>
+          <td>{format(new Date(sketch.createdAt), 'MMM D, YYYY h:mm A')}</td>
+          <td>{format(new Date(sketch.updatedAt), 'MMM D, YYYY h:mm A')}</td>
+          {this.renderDropdown()}
+        </tr>
+      </React.Fragment>);
   }
 }
 
@@ -251,7 +296,8 @@ SketchListRowBase.propTypes = {
   showShareModal: PropTypes.func.isRequired,
   cloneProject: PropTypes.func.isRequired,
   exportProjectAsZip: PropTypes.func.isRequired,
-  changeProjectName: PropTypes.func.isRequired
+  changeProjectName: PropTypes.func.isRequired,
+  onAddToCollection: PropTypes.func.isRequired,
 };
 
 function mapDispatchToPropsSketchListRow(dispatch) {
@@ -266,6 +312,18 @@ class SketchList extends React.Component {
     this.props.getProjects(this.props.username);
     this.props.resetSorting();
     this._renderFieldHeader = this._renderFieldHeader.bind(this);
+
+    this.state = {
+      isInitialDataLoad: true,
+    };
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (this.props.sketches !== nextProps.sketches && Array.isArray(nextProps.sketches)) {
+      this.setState({
+        isInitialDataLoad: false,
+      });
+    }
   }
 
   getSketchesTitle() {
@@ -276,16 +334,20 @@ class SketchList extends React.Component {
   }
 
   hasSketches() {
-    return !this.props.loading && this.props.sketches.length > 0;
+    return !this.isLoading() && this.props.sketches.length > 0;
+  }
+
+  isLoading() {
+    return this.props.loading && this.state.isInitialDataLoad;
   }
 
   _renderLoader() {
-    if (this.props.loading) return <Loader />;
+    if (this.isLoading()) return <Loader />;
     return null;
   }
 
   _renderEmptyTable() {
-    if (!this.props.loading && this.props.sketches.length === 0) {
+    if (!this.isLoading() && this.props.sketches.length === 0) {
       return (<p className="sketches-table__empty">No sketches.</p>);
     }
     return null;
@@ -338,9 +400,26 @@ class SketchList extends React.Component {
                   sketch={sketch}
                   user={this.props.user}
                   username={username}
+                  onAddToCollection={() => {
+                    this.setState({ sketchToAddToCollection: sketch });
+                  }}
                 />))}
             </tbody>
           </table>}
+        {
+          this.state.sketchToAddToCollection &&
+            <Overlay
+              isFixedHeight
+              title="Add to collection"
+              closeOverlay={() => this.setState({ sketchToAddToCollection: null })}
+            >
+              <AddToCollectionList
+                project={this.state.sketchToAddToCollection}
+                username={this.props.username}
+                user={this.props.user}
+              />
+            </Overlay>
+        }
       </div>
     );
   }
@@ -366,19 +445,9 @@ SketchList.propTypes = {
     field: PropTypes.string.isRequired,
     direction: PropTypes.string.isRequired
   }).isRequired,
-  project: PropTypes.shape({
-    id: PropTypes.string,
-    owner: PropTypes.shape({
-      id: PropTypes.string
-    })
-  })
 };
 
 SketchList.defaultProps = {
-  project: {
-    id: undefined,
-    owner: undefined
-  },
   username: undefined
 };
 
@@ -393,7 +462,10 @@ function mapStateToProps(state) {
 }
 
 function mapDispatchToProps(dispatch) {
-  return bindActionCreators(Object.assign({}, ProjectsActions, ToastActions, SortingActions), dispatch);
+  return bindActionCreators(
+    Object.assign({}, ProjectsActions, CollectionsActions, ToastActions, SortingActions),
+    dispatch
+  );
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(SketchList);
diff --git a/client/modules/IDE/components/Toolbar.jsx b/client/modules/IDE/components/Toolbar.jsx
index b331e10e..35c29f7d 100644
--- a/client/modules/IDE/components/Toolbar.jsx
+++ b/client/modules/IDE/components/Toolbar.jsx
@@ -32,7 +32,7 @@ class Toolbar extends React.Component {
   }
 
   validateProjectName() {
-    if (this.props.project.name === '') {
+    if ((this.props.project.name.trim()).length === 0) {
       this.props.setProjectName(this.originalProjectName);
     }
   }
diff --git a/client/modules/IDE/components/UploadFileModal.jsx b/client/modules/IDE/components/UploadFileModal.jsx
new file mode 100644
index 00000000..491a9d10
--- /dev/null
+++ b/client/modules/IDE/components/UploadFileModal.jsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { Link } from 'react-router';
+import InlineSVG from 'react-inlinesvg';
+import prettyBytes from 'pretty-bytes';
+import FileUploader from './FileUploader';
+import { getreachedTotalSizeLimit } from '../selectors/users';
+import exitUrl from '../../../images/exit.svg';
+
+const __process = (typeof global !== 'undefined' ? global : window).process;
+const limit = __process.env.UPLOAD_LIMIT || 250000000;
+const limitText = prettyBytes(limit);
+
+class UploadFileModal extends React.Component {
+  propTypes = {
+    reachedTotalSizeLimit: PropTypes.bool.isRequired,
+    closeModal: PropTypes.func.isRequired
+  }
+
+  componentDidMount() {
+    this.focusOnModal();
+  }
+
+  focusOnModal = () => {
+    this.modal.focus();
+  }
+
+
+  render() {
+    return (
+      <section className="modal" ref={(element) => { this.modal = element; }}>
+        <div className="modal-content">
+          <div className="modal__header">
+            <h2 className="modal__title">Upload File</h2>
+            <button className="modal__exit-button" onClick={this.props.closeModal}>
+              <InlineSVG src={exitUrl} alt="Close New File Modal" />
+            </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 `
+              }
+              <Link to="/assets" onClick={this.props.closeModal}>assets</Link>
+              .
+            </p>
+          }
+          { !this.props.reachedTotalSizeLimit &&
+            <div>
+              <FileUploader />
+            </div>
+          }
+        </div>
+      </section>
+    );
+  }
+}
+
+function mapStateToProps(state) {
+  return {
+    reachedTotalSizeLimit: getreachedTotalSizeLimit(state)
+  };
+}
+
+export default connect(mapStateToProps)(UploadFileModal);
diff --git a/client/modules/IDE/pages/IDEView.jsx b/client/modules/IDE/pages/IDEView.jsx
index d9a906d9..f7179a14 100644
--- a/client/modules/IDE/pages/IDEView.jsx
+++ b/client/modules/IDE/pages/IDEView.jsx
@@ -12,6 +12,7 @@ import Toolbar from '../components/Toolbar';
 import Preferences from '../components/Preferences';
 import NewFileModal from '../components/NewFileModal';
 import NewFolderModal from '../components/NewFolderModal';
+import UploadFileModal from '../components/UploadFileModal';
 import ShareModal from '../components/ShareModal';
 import KeyboardShortcutModal from '../components/KeyboardShortcutModal';
 import ErrorModal from '../components/ErrorModal';
@@ -28,11 +29,10 @@ import * as ToastActions from '../actions/toast';
 import * as ConsoleActions from '../actions/console';
 import { getHTMLFile } from '../reducers/files';
 import Overlay from '../../App/components/Overlay';
-import SketchList from '../components/SketchList';
-import Searchbar from '../components/Searchbar';
-import AssetList from '../components/AssetList';
 import About from '../components/About';
+import AddToCollectionList from '../components/AddToCollectionList';
 import Feedback from '../components/Feedback';
+import { CollectionSearchbar } from '../components/Searchbar';
 
 class IDEView extends React.Component {
   constructor(props) {
@@ -239,6 +239,8 @@ class IDEView extends React.Component {
               newFolder={this.props.newFolder}
               user={this.props.user}
               owner={this.props.project.owner}
+              openUploadFileModal={this.props.openUploadFileModal}
+              closeUploadFileModal={this.props.closeUploadFileModal}
             />
             <SplitPane
               split="vertical"
@@ -314,12 +316,12 @@ class IDEView extends React.Component {
                     {(
                       (
                         (this.props.preferences.textOutput ||
-                            this.props.preferences.gridOutput ||
-                            this.props.preferences.soundOutput
+                          this.props.preferences.gridOutput ||
+                          this.props.preferences.soundOutput
                         ) &&
-                            this.props.ide.isPlaying
+                        this.props.ide.isPlaying
                       ) ||
-                        this.props.ide.isAccessibleOutputPlaying
+                      this.props.ide.isAccessibleOutputPlaying
                     )
                     }
                   </div>
@@ -351,42 +353,18 @@ class IDEView extends React.Component {
           </SplitPane>
         </div>
         { this.props.ide.modalIsVisible &&
-          <NewFileModal
-            canUploadMedia={this.props.user.authenticated}
-            closeModal={this.props.closeNewFileModal}
-            createFile={this.props.createFile}
-          />
+          <NewFileModal />
         }
-        { this.props.ide.newFolderModalVisible &&
+        {this.props.ide.newFolderModalVisible &&
           <NewFolderModal
             closeModal={this.props.closeNewFolderModal}
             createFolder={this.props.createFolder}
           />
         }
-        { this.props.location.pathname.match(/sketches$/) &&
-          <Overlay
-            ariaLabel="project list"
-            title="Open a Sketch"
-            previousPath={this.props.ide.previousPath}
-          >
-            <Searchbar />
-            <SketchList
-              username={this.props.params.username}
-              user={this.props.user}
-            />
-          </Overlay>
-        }
-        { this.props.location.pathname.match(/assets$/) &&
-          <Overlay
-            title="Assets"
-            ariaLabel="asset list"
-            previousPath={this.props.ide.previousPath}
-          >
-            <AssetList
-              username={this.props.params.username}
-              user={this.props.user}
-            />
-          </Overlay>
+        {this.props.ide.uploadFileModalVisible &&
+          <UploadFileModal
+            closeModal={this.props.closeUploadFileModal}
+          />
         }
         { this.props.location.pathname === '/about' &&
           <Overlay
@@ -397,7 +375,7 @@ class IDEView extends React.Component {
             <About previousPath={this.props.ide.previousPath} />
           </Overlay>
         }
-        { this.props.location.pathname === '/feedback' &&
+        {this.props.location.pathname === '/feedback' &&
           <Overlay
             title="Submit Feedback"
             previousPath={this.props.ide.previousPath}
@@ -406,7 +384,22 @@ class IDEView extends React.Component {
             <Feedback previousPath={this.props.ide.previousPath} />
           </Overlay>
         }
-        { this.props.ide.shareModalVisible &&
+        {this.props.location.pathname.match(/add-to-collection$/) &&
+          <Overlay
+            ariaLabel="add to collection"
+            title="Add to collection"
+            previousPath={this.props.ide.previousPath}
+            actions={<CollectionSearchbar />}
+            isFixedHeight
+          >
+            <AddToCollectionList
+              projectId={this.props.params.project_id}
+              username={this.props.params.username}
+              user={this.props.user}
+            />
+          </Overlay>
+        }
+        {this.props.ide.shareModalVisible &&
           <Overlay
             title="Share"
             ariaLabel="share"
@@ -419,7 +412,7 @@ class IDEView extends React.Component {
             />
           </Overlay>
         }
-        { this.props.ide.keyboardShortcutVisible &&
+        {this.props.ide.keyboardShortcutVisible &&
           <Overlay
             title="Keyboard Shortcuts"
             ariaLabel="keyboard shortcuts"
@@ -428,7 +421,7 @@ class IDEView extends React.Component {
             <KeyboardShortcutModal />
           </Overlay>
         }
-        { this.props.ide.errorType &&
+        {this.props.ide.errorType &&
           <Overlay
             title="Error"
             ariaLabel="error"
@@ -486,6 +479,7 @@ IDEView.propTypes = {
     justOpenedProject: PropTypes.bool.isRequired,
     errorType: PropTypes.string,
     runtimeErrorWarningVisible: PropTypes.bool.isRequired,
+    uploadFileModalVisible: PropTypes.bool.isRequired
   }).isRequired,
   stopSketch: PropTypes.func.isRequired,
   project: PropTypes.shape({
@@ -543,7 +537,6 @@ IDEView.propTypes = {
   }).isRequired,
   dispatchConsoleEvent: PropTypes.func.isRequired,
   newFile: PropTypes.func.isRequired,
-  closeNewFileModal: PropTypes.func.isRequired,
   expandSidebar: PropTypes.func.isRequired,
   collapseSidebar: PropTypes.func.isRequired,
   cloneProject: PropTypes.func.isRequired,
@@ -556,7 +549,6 @@ IDEView.propTypes = {
   newFolder: PropTypes.func.isRequired,
   closeNewFolderModal: PropTypes.func.isRequired,
   createFolder: PropTypes.func.isRequired,
-  createFile: PropTypes.func.isRequired,
   closeShareModal: PropTypes.func.isRequired,
   showEditorOptions: PropTypes.func.isRequired,
   closeEditorOptions: PropTypes.func.isRequired,
@@ -588,6 +580,8 @@ IDEView.propTypes = {
   showRuntimeErrorWarning: PropTypes.func.isRequired,
   hideRuntimeErrorWarning: PropTypes.func.isRequired,
   startSketch: PropTypes.func.isRequired,
+  openUploadFileModal: PropTypes.func.isRequired,
+  closeUploadFileModal: PropTypes.func.isRequired
 };
 
 function mapStateToProps(state) {
diff --git a/client/modules/IDE/reducers/assets.js b/client/modules/IDE/reducers/assets.js
index 9ddd1cbe..a251d8b2 100644
--- a/client/modules/IDE/reducers/assets.js
+++ b/client/modules/IDE/reducers/assets.js
@@ -10,6 +10,8 @@ const assets = (state = initialState, action) => {
   switch (action.type) {
     case ActionTypes.SET_ASSETS:
       return { list: action.assets, totalSize: action.totalSize };
+    case ActionTypes.DELETE_ASSET:
+      return { list: state.list.filter(asset => asset.key !== action.key) };
     default:
       return state;
   }
diff --git a/client/modules/IDE/reducers/collections.js b/client/modules/IDE/reducers/collections.js
new file mode 100644
index 00000000..c7017c29
--- /dev/null
+++ b/client/modules/IDE/reducers/collections.js
@@ -0,0 +1,28 @@
+import * as ActionTypes from '../../../constants';
+
+const sketches = (state = [], action) => {
+  switch (action.type) {
+    case ActionTypes.SET_COLLECTIONS:
+      return action.collections;
+
+    case ActionTypes.DELETE_COLLECTION:
+      return state.filter(({ id }) => action.collectionId !== id);
+
+    // The API returns the complete new edited collection
+    // with any items added or removed
+    case ActionTypes.EDIT_COLLECTION:
+    case ActionTypes.ADD_TO_COLLECTION:
+    case ActionTypes.REMOVE_FROM_COLLECTION:
+      return state.map((collection) => {
+        if (collection.id === action.payload.id) {
+          return action.payload;
+        }
+
+        return collection;
+      });
+    default:
+      return state;
+  }
+};
+
+export default sketches;
diff --git a/client/modules/IDE/reducers/ide.js b/client/modules/IDE/reducers/ide.js
index 070c2371..db2c31e6 100644
--- a/client/modules/IDE/reducers/ide.js
+++ b/client/modules/IDE/reducers/ide.js
@@ -9,11 +9,11 @@ const initialState = {
   preferencesIsVisible: false,
   projectOptionsVisible: false,
   newFolderModalVisible: false,
+  uploadFileModalVisible: false,
   shareModalVisible: false,
   shareModalProjectId: 'abcd',
   shareModalProjectName: 'My Cute Sketch',
   shareModalProjectUsername: 'p5_user',
-  sketchlistModalVisible: false,
   editorOptionsVisible: false,
   keyboardShortcutVisible: false,
   unsavedChanges: false,
@@ -106,6 +106,10 @@ const ide = (state = initialState, action) => {
       return Object.assign({}, state, { runtimeErrorWarningVisible: false });
     case ActionTypes.SHOW_RUNTIME_ERROR_WARNING:
       return Object.assign({}, state, { runtimeErrorWarningVisible: true });
+    case ActionTypes.OPEN_UPLOAD_FILE_MODAL:
+      return Object.assign({}, state, { uploadFileModalVisible: true, parentId: action.parentId });
+    case ActionTypes.CLOSE_UPLOAD_FILE_MODAL:
+      return Object.assign({}, state, { uploadFileModalVisible: false });
     default:
       return state;
   }
diff --git a/client/modules/IDE/reducers/project.js b/client/modules/IDE/reducers/project.js
index 0779c0f5..2eb19d4d 100644
--- a/client/modules/IDE/reducers/project.js
+++ b/client/modules/IDE/reducers/project.js
@@ -1,14 +1,8 @@
-import friendlyWords from 'friendly-words';
 import * as ActionTypes from '../../../constants';
-
-const generateRandomName = () => {
-  const adj = friendlyWords.predicates[Math.floor(Math.random() * friendlyWords.predicates.length)];
-  const obj = friendlyWords.objects[Math.floor(Math.random() * friendlyWords.objects.length)];
-  return `${adj} ${obj}`;
-};
+import { generateProjectName } from '../../../utils/generateRandomName';
 
 const initialState = () => {
-  const generatedString = generateRandomName();
+  const generatedString = generateProjectName();
   const generatedName = generatedString.charAt(0).toUpperCase() + generatedString.slice(1);
   return {
     name: generatedName,
diff --git a/client/modules/IDE/reducers/search.js b/client/modules/IDE/reducers/search.js
index 1e2ff8d4..67d35243 100644
--- a/client/modules/IDE/reducers/search.js
+++ b/client/modules/IDE/reducers/search.js
@@ -1,13 +1,14 @@
 import * as ActionTypes from '../../../constants';
 
 const initialState = {
-  searchTerm: ''
+  collectionSearchTerm: '',
+  sketchSearchTerm: ''
 };
 
 export default (state = initialState, action) => {
   switch (action.type) {
     case ActionTypes.SET_SEARCH_TERM:
-      return { ...state, searchTerm: action.query };
+      return { ...state, [`${action.scope}SearchTerm`]: action.query };
     default:
       return state;
   }
diff --git a/client/modules/IDE/selectors/collections.js b/client/modules/IDE/selectors/collections.js
new file mode 100644
index 00000000..f212103a
--- /dev/null
+++ b/client/modules/IDE/selectors/collections.js
@@ -0,0 +1,56 @@
+import { createSelector } from 'reselect';
+import differenceInMilliseconds from 'date-fns/difference_in_milliseconds';
+import find from 'lodash/find';
+import orderBy from 'lodash/orderBy';
+import { DIRECTION } from '../actions/sorting';
+
+const getCollections = state => state.collections;
+const getField = state => state.sorting.field;
+const getDirection = state => state.sorting.direction;
+const getSearchTerm = state => state.search.collectionSearchTerm;
+
+const getFilteredCollections = createSelector(
+  getCollections,
+  getSearchTerm,
+  (collections, search) => {
+    if (search) {
+      const searchStrings = collections.map((collection) => {
+        const smallCollection = {
+          name: collection.name
+        };
+        return { ...collection, searchString: Object.values(smallCollection).join(' ').toLowerCase() };
+      });
+      return searchStrings.filter(collection => collection.searchString.includes(search.toLowerCase()));
+    }
+    return collections;
+  }
+);
+
+
+const getSortedCollections = createSelector(
+  getFilteredCollections,
+  getField,
+  getDirection,
+  (collections, field, direction) => {
+    if (field === 'name') {
+      if (direction === DIRECTION.DESC) {
+        return orderBy(collections, 'name', 'desc');
+      }
+      return orderBy(collections, 'name', 'asc');
+    }
+    const sortedCollections = [...collections].sort((a, b) => {
+      const result =
+        direction === DIRECTION.ASC
+          ? differenceInMilliseconds(new Date(a[field]), new Date(b[field]))
+          : differenceInMilliseconds(new Date(b[field]), new Date(a[field]));
+      return result;
+    });
+    return sortedCollections;
+  }
+);
+
+export function getCollection(state, id) {
+  return find(getCollections(state), { id });
+}
+
+export default getSortedCollections;
diff --git a/client/modules/IDE/selectors/projects.js b/client/modules/IDE/selectors/projects.js
index b2230826..14d65ea0 100644
--- a/client/modules/IDE/selectors/projects.js
+++ b/client/modules/IDE/selectors/projects.js
@@ -6,7 +6,7 @@ import { DIRECTION } from '../actions/sorting';
 const getSketches = state => state.sketches;
 const getField = state => state.sorting.field;
 const getDirection = state => state.sorting.direction;
-const getSearchTerm = state => state.search.searchTerm;
+const getSearchTerm = state => state.search.sketchSearchTerm;
 
 const getFilteredSketches = createSelector(
   getSketches,
diff --git a/client/modules/IDE/selectors/users.js b/client/modules/IDE/selectors/users.js
new file mode 100644
index 00000000..556d99dd
--- /dev/null
+++ b/client/modules/IDE/selectors/users.js
@@ -0,0 +1,30 @@
+import { createSelector } from 'reselect';
+
+const __process = (typeof global !== 'undefined' ? global : window).process;
+const getAuthenticated = state => state.user.authenticated;
+const getTotalSize = state => state.user.totalSize;
+const getAssetsTotalSize = state => state.assets.totalSize;
+const limit = __process.env.UPLOAD_LIMIT || 250000000;
+
+export const getCanUploadMedia = createSelector(
+  getAuthenticated,
+  getTotalSize,
+  (authenticated, totalSize) => {
+    if (!authenticated) return false;
+    // eventually do the same thing for verified when
+    // email verification actually works
+    if (totalSize > limit) return false;
+    return true;
+  }
+);
+
+export const getreachedTotalSizeLimit = createSelector(
+  getTotalSize,
+  getAssetsTotalSize,
+  (totalSize, assetsTotalSize) => {
+    const currentSize = totalSize || assetsTotalSize;
+    if (currentSize && currentSize > limit) return true;
+    // if (totalSize > 1000) return true;
+    return false;
+  }
+);
diff --git a/client/modules/User/actions.js b/client/modules/User/actions.js
index 86c366c4..3793b2dc 100644
--- a/client/modules/User/actions.js
+++ b/client/modules/User/actions.js
@@ -218,3 +218,31 @@ export function updateSettings(formValues) {
       })
       .catch(response => Promise.reject(new Error(response.data.error)));
 }
+
+export function createApiKeySuccess(user) {
+  return {
+    type: ActionTypes.API_KEY_CREATED,
+    user
+  };
+}
+
+export function createApiKey(label) {
+  return dispatch =>
+    axios.post(`${ROOT_URL}/account/api-keys`, { label }, { withCredentials: true })
+      .then((response) => {
+        dispatch(createApiKeySuccess(response.data));
+      })
+      .catch(response => Promise.reject(new Error(response.data.error)));
+}
+
+export function removeApiKey(keyId) {
+  return dispatch =>
+    axios.delete(`${ROOT_URL}/account/api-keys/${keyId}`, { withCredentials: true })
+      .then((response) => {
+        dispatch({
+          type: ActionTypes.API_KEY_REMOVED,
+          user: response.data
+        });
+      })
+      .catch(response => Promise.reject(new Error(response.data.error)));
+}
diff --git a/client/modules/User/components/APIKeyForm.jsx b/client/modules/User/components/APIKeyForm.jsx
new file mode 100644
index 00000000..dc2f87fa
--- /dev/null
+++ b/client/modules/User/components/APIKeyForm.jsx
@@ -0,0 +1,123 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import InlineSVG from 'react-inlinesvg';
+
+import CopyableInput from '../../IDE/components/CopyableInput';
+
+import APIKeyList from './APIKeyList';
+
+const plusIcon = require('../../../images/plus-icon.svg');
+
+export const APIKeyPropType = PropTypes.shape({
+  id: PropTypes.object.isRequired,
+  token: PropTypes.object,
+  label: PropTypes.string.isRequired,
+  createdAt: PropTypes.string.isRequired,
+  lastUsedAt: PropTypes.string,
+});
+
+class APIKeyForm extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { keyLabel: '' };
+
+    this.addKey = this.addKey.bind(this);
+    this.removeKey = this.removeKey.bind(this);
+    this.renderApiKeys = this.renderApiKeys.bind(this);
+  }
+
+  addKey(event) {
+    event.preventDefault();
+    const { keyLabel } = this.state;
+
+    this.setState({
+      keyLabel: ''
+    });
+
+    this.props.createApiKey(keyLabel);
+
+    return false;
+  }
+
+  removeKey(key) {
+    const message = `Are you sure you want to delete "${key.label}"?`;
+
+    if (window.confirm(message)) {
+      this.props.removeApiKey(key.id);
+    }
+  }
+
+  renderApiKeys() {
+    const hasApiKeys = this.props.apiKeys && this.props.apiKeys.length > 0;
+
+    if (hasApiKeys) {
+      return (
+        <APIKeyList apiKeys={this.props.apiKeys} onRemove={this.removeKey} />
+      );
+    }
+    return <p>You have no exsiting tokens.</p>;
+  }
+
+  render() {
+    const keyWithToken = this.props.apiKeys.find(k => !!k.token);
+
+    return (
+      <div className="api-key-form">
+        <p className="api-key-form__summary">
+          Personal Access Tokens act like your password to allow automated
+          scripts to access the Editor API. Create a token for each script
+          that needs access.
+        </p>
+
+        <div className="api-key-form__section">
+          <h3 className="api-key-form__title">Create new token</h3>
+          <form className="form form--inline" onSubmit={this.addKey}>
+            <label htmlFor="keyLabel" className="form__label form__label--hidden ">What is this token for?</label>
+            <input
+              className="form__input"
+              id="keyLabel"
+              onChange={(event) => { this.setState({ keyLabel: event.target.value }); }}
+              placeholder="What is this token for? e.g. Example import script"
+              type="text"
+              value={this.state.keyLabel}
+            />
+            <button
+              className="api-key-form__create-button"
+              disabled={this.state.keyLabel === ''}
+              type="submit"
+            >
+              <InlineSVG src={plusIcon} className="api-key-form__create-icon" />
+              Create
+            </button>
+          </form>
+
+          {
+            keyWithToken && (
+              <div className="api-key-form__new-token">
+                <h4 className="api-key-form__new-token__title">Your new access token</h4>
+                <p className="api-key-form__new-token__info">
+                  Make sure to copy your new personal access token now.
+                  You won’t be able to see it again!
+                </p>
+                <CopyableInput label={keyWithToken.label} value={keyWithToken.token} />
+              </div>
+            )
+          }
+        </div>
+
+        <div className="api-key-form__section">
+          <h3 className="api-key-form__title">Existing tokens</h3>
+          {this.renderApiKeys()}
+        </div>
+      </div>
+    );
+  }
+}
+
+APIKeyForm.propTypes = {
+  apiKeys: PropTypes.arrayOf(PropTypes.shape(APIKeyPropType)).isRequired,
+  createApiKey: PropTypes.func.isRequired,
+  removeApiKey: PropTypes.func.isRequired,
+};
+
+export default APIKeyForm;
diff --git a/client/modules/User/components/APIKeyList.jsx b/client/modules/User/components/APIKeyList.jsx
new file mode 100644
index 00000000..a298196b
--- /dev/null
+++ b/client/modules/User/components/APIKeyList.jsx
@@ -0,0 +1,52 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import InlineSVG from 'react-inlinesvg';
+import format from 'date-fns/format';
+import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
+import orderBy from 'lodash/orderBy';
+
+import { APIKeyPropType } from './APIKeyForm';
+
+const trashCan = require('../../../images/trash-can.svg');
+
+function APIKeyList({ apiKeys, onRemove }) {
+  return (
+    <table className="api-key-list">
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Created on</th>
+          <th>Last used</th>
+          <th>Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        {orderBy(apiKeys, ['createdAt'], ['desc']).map((key) => {
+          const lastUsed = key.lastUsedAt ?
+            distanceInWordsToNow(new Date(key.lastUsedAt), { addSuffix: true }) :
+            'Never';
+
+          return (
+            <tr key={key.id}>
+              <td>{key.label}</td>
+              <td>{format(new Date(key.createdAt), 'MMM D, YYYY h:mm A')}</td>
+              <td>{lastUsed}</td>
+              <td className="api-key-list__action">
+                <button className="api-key-list__delete-button" onClick={() => onRemove(key)}>
+                  <InlineSVG src={trashCan} alt="Delete Key" />
+                </button>
+              </td>
+            </tr>
+          );
+        })}
+      </tbody>
+    </table>
+  );
+}
+
+APIKeyList.propTypes = {
+  apiKeys: PropTypes.arrayOf(PropTypes.shape(APIKeyPropType)).isRequired,
+  onRemove: PropTypes.func.isRequired,
+};
+
+export default APIKeyList;
diff --git a/client/modules/User/components/Collection.jsx b/client/modules/User/components/Collection.jsx
new file mode 100644
index 00000000..6dec5e8c
--- /dev/null
+++ b/client/modules/User/components/Collection.jsx
@@ -0,0 +1,422 @@
+import format from 'date-fns/format';
+import PropTypes from 'prop-types';
+import React, { useState, useRef, useEffect } from 'react';
+import { Helmet } from 'react-helmet';
+import InlineSVG from 'react-inlinesvg';
+import { connect } from 'react-redux';
+import { Link } from 'react-router';
+import { bindActionCreators } from 'redux';
+import classNames from 'classnames';
+import * as ProjectActions from '../../IDE/actions/project';
+import * as ProjectsActions from '../../IDE/actions/projects';
+import * as CollectionsActions from '../../IDE/actions/collections';
+import * as ToastActions from '../../IDE/actions/toast';
+import * as SortingActions from '../../IDE/actions/sorting';
+import * as IdeActions from '../../IDE/actions/ide';
+import { getCollection } from '../../IDE/selectors/collections';
+import Loader from '../../App/components/loader';
+import EditableInput from '../../IDE/components/EditableInput';
+import Overlay from '../../App/components/Overlay';
+import AddToCollectionSketchList from '../../IDE/components/AddToCollectionSketchList';
+import CopyableInput from '../../IDE/components/CopyableInput';
+import { SketchSearchbar } from '../../IDE/components/Searchbar';
+import dropdownArrow from '../../../images/down-arrow.svg';
+
+const arrowUp = require('../../../images/sort-arrow-up.svg');
+const arrowDown = require('../../../images/sort-arrow-down.svg');
+const removeIcon = require('../../../images/close.svg');
+
+const ShareURL = ({ value }) => {
+  const [showURL, setShowURL] = useState(false);
+  const node = useRef();
+
+  const handleClickOutside = (e) => {
+    if (node.current.contains(e.target)) {
+      return;
+    }
+    setShowURL(false);
+  };
+
+  useEffect(() => {
+    if (showURL) {
+      document.addEventListener('mousedown', handleClickOutside);
+    } else {
+      document.removeEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [showURL]);
+
+  return (
+    <div className="collection-share" ref={node}>
+      <button
+        className="collection-share__button"
+        onClick={() => setShowURL(!showURL)}
+      >
+        <span>Share</span>
+        <InlineSVG className="collection-share__arrow" src={dropdownArrow} />
+      </button>
+      { showURL &&
+        <div className="collection__share-dropdown">
+          <CopyableInput value={value} label="Link to Collection" />
+        </div>
+      }
+    </div>
+  );
+};
+
+ShareURL.propTypes = {
+  value: PropTypes.string.isRequired,
+};
+
+class CollectionItemRowBase extends React.Component {
+  handleSketchRemove = () => {
+    if (window.confirm(`Are you sure you want to remove "${this.props.item.project.name}" from this collection?`)) {
+      this.props.removeFromCollection(this.props.collection.id, this.props.item.project.id);
+    }
+  }
+
+  render() {
+    const { item } = this.props;
+    const sketchOwnerUsername = item.project.user.username;
+    const sketchUrl = `/${item.project.user.username}/sketches/${item.project.id}`;
+
+    return (
+      <tr
+        className="sketches-table__row"
+      >
+        <th scope="row">
+          <Link to={sketchUrl}>
+            {item.project.name}
+          </Link>
+        </th>
+        <td>{format(new Date(item.createdAt), 'MMM D, YYYY h:mm A')}</td>
+        <td>{sketchOwnerUsername}</td>
+        <td className="collection-row__action-column ">
+          <button
+            className="collection-row__remove-button"
+            onClick={this.handleSketchRemove}
+          >
+            <InlineSVG src={removeIcon} alt="Remove" />
+          </button>
+        </td>
+      </tr>);
+  }
+}
+
+CollectionItemRowBase.propTypes = {
+  collection: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired
+  }).isRequired,
+  item: PropTypes.shape({
+    createdAt: PropTypes.string.isRequired,
+    project: PropTypes.shape({
+      id: PropTypes.string.isRequired,
+      name: PropTypes.string.isRequired,
+      user: PropTypes.shape({
+        username: PropTypes.string.isRequired
+      })
+    }).isRequired,
+  }).isRequired,
+  user: PropTypes.shape({
+    username: PropTypes.string,
+    authenticated: PropTypes.bool.isRequired
+  }).isRequired,
+  removeFromCollection: PropTypes.func.isRequired
+};
+
+function mapDispatchToPropsSketchListRow(dispatch) {
+  return bindActionCreators(Object.assign({}, CollectionsActions, ProjectActions, IdeActions), dispatch);
+}
+
+const CollectionItemRow = connect(null, mapDispatchToPropsSketchListRow)(CollectionItemRowBase);
+
+class Collection extends React.Component {
+  constructor(props) {
+    super(props);
+    this.props.getCollections(this.props.username);
+    this.props.resetSorting();
+    this._renderFieldHeader = this._renderFieldHeader.bind(this);
+    this.showAddSketches = this.showAddSketches.bind(this);
+    this.hideAddSketches = this.hideAddSketches.bind(this);
+
+    this.state = {
+      isAddingSketches: false,
+    };
+  }
+
+  getTitle() {
+    if (this.props.username === this.props.user.username) {
+      return 'p5.js Web Editor | My collections';
+    }
+    return `p5.js Web Editor | ${this.props.username}'s collections`;
+  }
+
+  getUsername() {
+    return this.props.username !== undefined ? this.props.username : this.props.user.username;
+  }
+
+  getCollectionName() {
+    return this.props.collection.name;
+  }
+
+  isOwner() {
+    let isOwner = false;
+
+    if (this.props.user != null &&
+      this.props.user.username &&
+      this.props.collection.owner.username === this.props.user.username) {
+      isOwner = true;
+    }
+
+    return isOwner;
+  }
+
+  hasCollection() {
+    return !this.props.loading && this.props.collection != null;
+  }
+
+  hasCollectionItems() {
+    return this.hasCollection() && this.props.collection.items.length > 0;
+  }
+
+  _renderLoader() {
+    if (this.props.loading) return <Loader />;
+    return null;
+  }
+
+  _renderCollectionMetadata() {
+    const {
+      id, name, description, items, owner
+    } = this.props.collection;
+
+    const hostname = window.location.origin;
+    const { username } = this.props;
+
+    const baseURL = `${hostname}/${username}/collections/`;
+
+    const handleEditCollectionName = (value) => {
+      if (value === name) {
+        return;
+      }
+
+      this.props.editCollection(id, { name: value });
+    };
+
+    const handleEditCollectionDescription = (value) => {
+      if (value === description) {
+        return;
+      }
+
+      this.props.editCollection(id, { description: value });
+    };
+
+    //
+    // TODO: Implement UI for editing slug
+    //
+    // const handleEditCollectionSlug = (value) => {
+    //   if (value === slug) {
+    //     return;
+    //   }
+    //
+    //   this.props.editCollection(id, { slug: value });
+    // };
+
+    return (
+      <div className={`collection-metadata ${this.isOwner() ? 'collection-metadata--is-owner' : ''}`}>
+        <div className="collection-metadata__columns">
+          <div className="collection-metadata__column--left">
+            <h2 className="collection-metadata__name">
+              {
+                this.isOwner() ?
+                  <EditableInput value={name} onChange={handleEditCollectionName} validate={value => value !== ''} /> :
+                  name
+              }
+            </h2>
+
+            <p className="collection-metadata__description">
+              {
+                this.isOwner() ?
+                  <EditableInput
+                    InputComponent="textarea"
+                    value={description}
+                    onChange={handleEditCollectionDescription}
+                    emptyPlaceholder="Add description"
+                  /> :
+                  description
+              }
+            </p>
+
+            <p className="collection-metadata__user">Collection by{' '}
+              <Link to={`${hostname}/${username}/sketches`}>{owner.username}</Link>
+            </p>
+
+            <p className="collection-metadata__user">{items.length} sketch{items.length === 1 ? '' : 'es'}</p>
+          </div>
+
+          <div className="collection-metadata__column--right">
+            <p className="collection-metadata__share">
+              <ShareURL value={`${baseURL}${id}`} />
+            </p>
+            {
+              this.isOwner() &&
+              <button className="collection-metadata__add-button" onClick={this.showAddSketches}>
+                Add Sketch
+              </button>
+            }
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  showAddSketches() {
+    this.setState({
+      isAddingSketches: true,
+    });
+  }
+
+  hideAddSketches() {
+    this.setState({
+      isAddingSketches: false,
+    });
+  }
+
+  _renderEmptyTable() {
+    const isLoading = this.props.loading;
+    const hasCollectionItems = this.props.collection != null &&
+      this.props.collection.items.length > 0;
+
+    if (!isLoading && !hasCollectionItems) {
+      return (<p className="collection-empty-message">No sketches in collection</p>);
+    }
+    return null;
+  }
+
+  _renderFieldHeader(fieldName, displayName) {
+    const { field, direction } = this.props.sorting;
+    const headerClass = classNames({
+      'sketches-table__header': true,
+      'sketches-table__header--selected': field === fieldName
+    });
+    return (
+      <th scope="col">
+        <button className="sketch-list__sort-button" onClick={() => this.props.toggleDirectionForField(fieldName)}>
+          <span className={headerClass}>{displayName}</span>
+          {field === fieldName && direction === SortingActions.DIRECTION.ASC &&
+            <InlineSVG src={arrowUp} />
+          }
+          {field === fieldName && direction === SortingActions.DIRECTION.DESC &&
+            <InlineSVG src={arrowDown} />
+          }
+        </button>
+      </th>
+    );
+  }
+
+  render() {
+    const title = this.hasCollection() ? this.getCollectionName() : null;
+
+    return (
+      <section className="collection-container" data-has-items={this.hasCollectionItems() ? 'true' : 'false'}>
+        <Helmet>
+          <title>{this.getTitle()}</title>
+        </Helmet>
+        {this._renderLoader()}
+        {this.hasCollection() && this._renderCollectionMetadata()}
+        <div className="collection-table-wrapper">
+          {this._renderEmptyTable()}
+          {this.hasCollectionItems() &&
+            <table className="sketches-table" summary="table containing all collections">
+              <thead>
+                <tr>
+                  {this._renderFieldHeader('name', 'Name')}
+                  {this._renderFieldHeader('createdAt', 'Date Added')}
+                  {this._renderFieldHeader('user', 'Owner')}
+                  <th scope="col"></th>
+                </tr>
+              </thead>
+              <tbody>
+                {this.props.collection.items.map(item =>
+                  (<CollectionItemRow
+                    key={item.id}
+                    item={item}
+                    user={this.props.user}
+                    username={this.getUsername()}
+                    collection={this.props.collection}
+                  />))}
+              </tbody>
+            </table>
+          }
+          {
+            this.state.isAddingSketches && (
+              <Overlay
+                title="Add sketch"
+                actions={<SketchSearchbar />}
+                closeOverlay={this.hideAddSketches}
+                isFixedHeight
+              >
+                <div className="collection-add-sketch">
+                  <AddToCollectionSketchList username={this.props.username} collection={this.props.collection} />
+                </div>
+              </Overlay>
+            )
+          }
+        </div>
+      </section>
+    );
+  }
+}
+
+Collection.propTypes = {
+  user: PropTypes.shape({
+    username: PropTypes.string,
+    authenticated: PropTypes.bool.isRequired
+  }).isRequired,
+  getCollections: PropTypes.func.isRequired,
+  collection: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+    slug: PropTypes.string,
+    description: PropTypes.string,
+    owner: PropTypes.shape({
+      username: PropTypes.string.isRequired,
+    }).isRequired,
+    items: PropTypes.arrayOf(PropTypes.shape({})),
+  }).isRequired,
+  username: PropTypes.string,
+  loading: PropTypes.bool.isRequired,
+  toggleDirectionForField: PropTypes.func.isRequired,
+  editCollection: PropTypes.func.isRequired,
+  resetSorting: PropTypes.func.isRequired,
+  sorting: PropTypes.shape({
+    field: PropTypes.string.isRequired,
+    direction: PropTypes.string.isRequired
+  }).isRequired
+};
+
+Collection.defaultProps = {
+  username: undefined
+};
+
+function mapStateToProps(state, ownProps) {
+  return {
+    user: state.user,
+    collection: getCollection(state, ownProps.collectionId),
+    sorting: state.sorting,
+    loading: state.loading,
+    project: state.project
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return bindActionCreators(
+    Object.assign({}, CollectionsActions, ProjectsActions, ToastActions, SortingActions),
+    dispatch
+  );
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Collection);
diff --git a/client/modules/User/components/CollectionCreate.jsx b/client/modules/User/components/CollectionCreate.jsx
new file mode 100644
index 00000000..220dcfda
--- /dev/null
+++ b/client/modules/User/components/CollectionCreate.jsx
@@ -0,0 +1,128 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import { connect } from 'react-redux';
+import { browserHistory } from 'react-router';
+import { bindActionCreators } from 'redux';
+import * as CollectionsActions from '../../IDE/actions/collections';
+
+import { generateCollectionName } from '../../../utils/generateRandomName';
+
+class CollectionCreate extends React.Component {
+  constructor() {
+    super();
+
+    const name = generateCollectionName();
+
+    this.state = {
+      generatedCollectionName: name,
+      collection: {
+        name,
+        description: ''
+      }
+    };
+  }
+
+  getTitle() {
+    return 'p5.js Web Editor | Create collection';
+  }
+
+  handleTextChange = field => (evt) => {
+    this.setState({
+      collection: {
+        ...this.state.collection,
+        [field]: evt.target.value,
+      }
+    });
+  }
+
+  handleCreateCollection = (event) => {
+    event.preventDefault();
+
+    this.props.createCollection(this.state.collection)
+      .then(({ id, owner }) => {
+        const pathname = `/${owner.username}/collections/${id}`;
+        const location = { pathname, state: { skipSavingPath: true } };
+
+        browserHistory.replace(location);
+      })
+      .catch((error) => {
+        console.error('Error creating collection', error);
+        this.setState({
+          creationError: error,
+        });
+      });
+  }
+
+  render() {
+    const { generatedCollectionName, creationError } = this.state;
+    const { name, description } = this.state.collection;
+
+    const invalid = name === '' || name == null;
+
+    return (
+      <div className="collection-create">
+        <Helmet>
+          <title>{this.getTitle()}</title>
+        </Helmet>
+        <div className="sketches-table-container">
+          <form className="form" onSubmit={this.handleCreateCollection}>
+            {creationError && <span className="form-error">Couldn&apos;t create collection</span>}
+            <p className="form__field">
+              <label htmlFor="name" className="form__label">Collection name</label>
+              <input
+                className="form__input"
+                aria-label="name"
+                type="text"
+                id="name"
+                value={name}
+                placeholder={generatedCollectionName}
+                onChange={this.handleTextChange('name')}
+              />
+              {invalid && <span className="form-error">Collection name is required</span>}
+            </p>
+            <p className="form__field">
+              <label htmlFor="description" className="form__label">Description (optional)</label>
+              <textarea
+                className="form__input form__input-flexible-height"
+                aria-label="description"
+                type="text"
+                id="description"
+                value={description}
+                onChange={this.handleTextChange('description')}
+                placeholder="My fave sketches"
+                rows="4"
+              />
+            </p>
+            <input type="submit" disabled={invalid} value="Create collection" aria-label="create collection" />
+          </form>
+        </div>
+      </div>
+    );
+  }
+}
+
+CollectionCreate.propTypes = {
+  user: PropTypes.shape({
+    username: PropTypes.string,
+    authenticated: PropTypes.bool.isRequired
+  }).isRequired,
+  createCollection: PropTypes.func.isRequired,
+  collection: PropTypes.shape({}).isRequired, // TODO
+  sorting: PropTypes.shape({
+    field: PropTypes.string.isRequired,
+    direction: PropTypes.string.isRequired
+  }).isRequired
+};
+
+function mapStateToProps(state, ownProps) {
+  return {
+    user: state.user,
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return bindActionCreators(Object.assign({}, CollectionsActions), dispatch);
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(CollectionCreate);
diff --git a/client/modules/User/components/DashboardTabSwitcher.jsx b/client/modules/User/components/DashboardTabSwitcher.jsx
new file mode 100644
index 00000000..b3b03c44
--- /dev/null
+++ b/client/modules/User/components/DashboardTabSwitcher.jsx
@@ -0,0 +1,47 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Link } from 'react-router';
+
+const TabKey = {
+  assets: 'assets',
+  collections: 'collections',
+  sketches: 'sketches',
+};
+
+const Tab = ({ children, isSelected, to }) => {
+  const selectedClassName = 'dashboard-header__tab--selected';
+
+  const location = { pathname: to, state: { skipSavingPath: true } };
+  const content = isSelected ? <span>{children}</span> : <Link to={location}>{children}</Link>;
+  return (
+    <li className={`dashboard-header__tab ${isSelected && selectedClassName}`}>
+      <h4 className="dashboard-header__tab__title">
+        {content}
+      </h4>
+    </li>
+  );
+};
+
+Tab.propTypes = {
+  children: PropTypes.string.isRequired,
+  isSelected: PropTypes.bool.isRequired,
+  to: PropTypes.string.isRequired,
+};
+
+const DashboardTabSwitcher = ({ currentTab, isOwner, username }) => (
+  <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>}
+    </div>
+  </ul>
+);
+
+DashboardTabSwitcher.propTypes = {
+  currentTab: PropTypes.string.isRequired,
+  isOwner: PropTypes.bool.isRequired,
+  username: PropTypes.string.isRequired,
+};
+
+export { DashboardTabSwitcher as default, TabKey };
diff --git a/client/modules/User/pages/AccountView.jsx b/client/modules/User/pages/AccountView.jsx
index 2fb03b1f..54157061 100644
--- a/client/modules/User/pages/AccountView.jsx
+++ b/client/modules/User/pages/AccountView.jsx
@@ -2,54 +2,72 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { reduxForm } from 'redux-form';
 import { bindActionCreators } from 'redux';
-import { browserHistory } from 'react-router';
-import InlineSVG from 'react-inlinesvg';
+import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
 import axios from 'axios';
 import { Helmet } from 'react-helmet';
-import { updateSettings, initiateVerification } from '../actions';
+import { updateSettings, initiateVerification, createApiKey, removeApiKey } from '../actions';
 import AccountForm from '../components/AccountForm';
 import { validateSettings } from '../../../utils/reduxFormUtils';
 import GithubButton from '../components/GithubButton';
+import GoogleButton from '../components/GoogleButton';
+import APIKeyForm from '../components/APIKeyForm';
+import Nav from '../../../components/Nav';
 
-const exitUrl = require('../../../images/exit.svg');
-const logoUrl = require('../../../images/p5js-logo.svg');
+const __process = (typeof global !== 'undefined' ? global : window).process;
+const ROOT_URL = __process.env.API_URL;
 
+function SocialLoginPanel(props) {
+  return (
+    <React.Fragment>
+      <AccountForm {...props} />
+      <h2 className="form-container__divider">Social Login</h2>
+      <p className="account__social-text">
+        Use your GitHub or Google account to log into the p5.js Web Editor.
+      </p>
+      <GithubButton buttonText="Login with GitHub" />
+      <GoogleButton buttonText="Login with Google" />
+    </React.Fragment>
+  );
+}
 
 class AccountView extends React.Component {
-  constructor(props) {
-    super(props);
-    this.closeAccountPage = this.closeAccountPage.bind(this);
-    this.gotoHomePage = this.gotoHomePage.bind(this);
-  }
-
-  closeAccountPage() {
-    browserHistory.push(this.props.previousPath);
-  }
-
-  gotoHomePage() {
-    browserHistory.push('/');
+  componentDidMount() {
+    document.body.className = this.props.theme;
   }
 
   render() {
+    const accessTokensUIEnabled = window.process.env.UI_ACCESS_TOKEN_ENABLED;
+
     return (
-      <div className="form-container">
+      <div className="account-settings__container">
         <Helmet>
-          <title>p5.js Web Editor | Account</title>
+          <title>p5.js Web Editor | Account Settings</title>
         </Helmet>
-        <div className="form-container__header">
-          <button className="form-container__logo-button" onClick={this.gotoHomePage}>
-            <InlineSVG src={logoUrl} alt="p5js Logo" />
-          </button>
-          <button className="form-container__exit-button" onClick={this.closeAccountPage}>
-            <InlineSVG src={exitUrl} alt="Close Account Page" />
-          </button>
-        </div>
-        <div className="form-container__content">
-          <h2 className="form-container__title">My Account</h2>
-          <AccountForm {...this.props} />
-          <h2 className="form-container__divider">Or</h2>
-          <GithubButton buttonText="Login with Github" />
-        </div>
+
+        <Nav layout="dashboard" />
+
+        <section className="account-settings">
+          <header className="account-settings__header">
+            <h1 className="account-settings__title">Account Settings</h1>
+          </header>
+          {accessTokensUIEnabled &&
+            <Tabs className="account__tabs">
+              <TabList>
+                <div className="tabs__titles">
+                  <Tab><h4 className="tabs__title">Account</h4></Tab>
+                  {accessTokensUIEnabled && <Tab><h4 className="tabs__title">Access Tokens</h4></Tab>}
+                </div>
+              </TabList>
+              <TabPanel>
+                <SocialLoginPanel {...this.props} />
+              </TabPanel>
+              <TabPanel>
+                <APIKeyForm {...this.props} />
+              </TabPanel>
+            </Tabs>
+          }
+          { !accessTokensUIEnabled && <SocialLoginPanel {...this.props} /> }
+        </section>
       </div>
     );
   }
@@ -58,13 +76,17 @@ class AccountView extends React.Component {
 function mapStateToProps(state) {
   return {
     initialValues: state.user, // <- initialValues for reduxForm
+    previousPath: state.ide.previousPath,
     user: state.user,
-    previousPath: state.ide.previousPath
+    apiKeys: state.user.apiKeys,
+    theme: state.preferences.theme
   };
 }
 
 function mapDispatchToProps(dispatch) {
-  return bindActionCreators({ updateSettings, initiateVerification }, dispatch);
+  return bindActionCreators({
+    updateSettings, initiateVerification, createApiKey, removeApiKey
+  }, dispatch);
 }
 
 function asyncValidate(formProps, dispatch, props) {
@@ -73,7 +95,7 @@ function asyncValidate(formProps, dispatch, props) {
     const queryParams = {};
     queryParams[fieldToValidate] = formProps[fieldToValidate];
     queryParams.check_type = fieldToValidate;
-    return axios.get('/api/signup/duplicate_check', { params: queryParams })
+    return axios.get(`${ROOT_URL}/signup/duplicate_check`, { params: queryParams })
       .then((response) => {
         if (response.data.exists) {
           const error = {};
@@ -87,6 +109,7 @@ function asyncValidate(formProps, dispatch, props) {
 
 AccountView.propTypes = {
   previousPath: PropTypes.string.isRequired,
+  theme: PropTypes.string.isRequired
 };
 
 export default reduxForm({
diff --git a/client/modules/User/pages/CollectionView.jsx b/client/modules/User/pages/CollectionView.jsx
new file mode 100644
index 00000000..c402539c
--- /dev/null
+++ b/client/modules/User/pages/CollectionView.jsx
@@ -0,0 +1,91 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { connect } from 'react-redux';
+import Nav from '../../../components/Nav';
+
+import CollectionCreate from '../components/CollectionCreate';
+import Collection from '../components/Collection';
+
+class CollectionView extends React.Component {
+  static defaultProps = {
+    user: null,
+  };
+
+  componentDidMount() {
+    document.body.className = this.props.theme;
+  }
+
+  ownerName() {
+    if (this.props.params.username) {
+      return this.props.params.username;
+    }
+
+    return this.props.user.username;
+  }
+
+  pageTitle() {
+    if (this.isCreatePage()) {
+      return 'Create collection';
+    }
+
+    return 'collection';
+  }
+
+  isOwner() {
+    return this.props.user.username === this.props.params.username;
+  }
+
+  isCreatePage() {
+    const path = this.props.location.pathname;
+    return /create$/.test(path);
+  }
+
+  renderContent() {
+    if (this.isCreatePage() && this.isOwner()) {
+      return <CollectionCreate />;
+    }
+
+    return (
+      <Collection
+        collectionId={this.props.params.collection_id}
+        username={this.props.params.username}
+      />
+    );
+  }
+
+  render() {
+    return (
+      <div className="dashboard">
+        <Nav layout="dashboard" />
+
+        {this.renderContent()}
+      </div>
+    );
+  }
+}
+
+function mapStateToProps(state) {
+  return {
+    user: state.user,
+    theme: state.preferences.theme
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+}
+
+CollectionView.propTypes = {
+  location: PropTypes.shape({
+    pathname: PropTypes.string.isRequired,
+  }).isRequired,
+  params: PropTypes.shape({
+    collection_id: PropTypes.string.isRequired,
+    username: PropTypes.string.isRequired,
+  }).isRequired,
+  theme: PropTypes.string.isRequired,
+  user: PropTypes.shape({
+    username: PropTypes.string.isRequired,
+  }),
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(CollectionView);
diff --git a/client/modules/User/pages/DashboardView.jsx b/client/modules/User/pages/DashboardView.jsx
new file mode 100644
index 00000000..e51490de
--- /dev/null
+++ b/client/modules/User/pages/DashboardView.jsx
@@ -0,0 +1,178 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { browserHistory, Link } from 'react-router';
+import { updateSettings, initiateVerification, createApiKey, removeApiKey } from '../actions';
+import Nav from '../../../components/Nav';
+import Overlay from '../../App/components/Overlay';
+
+import AssetList from '../../IDE/components/AssetList';
+import AssetSize from '../../IDE/components/AssetSize';
+import CollectionList from '../../IDE/components/CollectionList';
+import SketchList from '../../IDE/components/SketchList';
+import { CollectionSearchbar, SketchSearchbar } from '../../IDE/components/Searchbar';
+
+import CollectionCreate from '../components/CollectionCreate';
+import DashboardTabSwitcher, { TabKey } from '../components/DashboardTabSwitcher';
+
+class DashboardView extends React.Component {
+  static defaultProps = {
+    user: null,
+  };
+
+  constructor(props) {
+    super(props);
+    this.closeAccountPage = this.closeAccountPage.bind(this);
+    this.gotoHomePage = this.gotoHomePage.bind(this);
+  }
+
+  componentDidMount() {
+    document.body.className = this.props.theme;
+  }
+
+  closeAccountPage() {
+    browserHistory.push(this.props.previousPath);
+  }
+
+  gotoHomePage() {
+    browserHistory.push('/');
+  }
+
+  selectedTabKey() {
+    const path = this.props.location.pathname;
+
+    if (/assets/.test(path)) {
+      return TabKey.assets;
+    } else if (/collections/.test(path)) {
+      return TabKey.collections;
+    }
+
+    return TabKey.sketches;
+  }
+
+  ownerName() {
+    if (this.props.params.username) {
+      return this.props.params.username;
+    }
+
+    return this.props.user.username;
+  }
+
+  isOwner() {
+    return this.props.user.username === this.props.params.username;
+  }
+
+  isCollectionCreate() {
+    const path = this.props.location.pathname;
+    return /collections\/create$/.test(path);
+  }
+
+  returnToDashboard = () => {
+    browserHistory.push(`/${this.ownerName()}/collections`);
+  }
+
+  renderActionButton(tabKey, username) {
+    switch (tabKey) {
+      case TabKey.assets:
+        return this.isOwner() && <AssetSize />;
+      case TabKey.collections:
+        return this.isOwner() && (
+          <React.Fragment>
+            <Link className="dashboard__action-button" to={`/${username}/collections/create`}>
+              Create collection
+            </Link>
+            <CollectionSearchbar />
+          </React.Fragment>);
+      case TabKey.sketches:
+      default:
+        return (
+          <React.Fragment>
+            {this.isOwner() && <Link className="dashboard__action-button" to="/">New sketch</Link>}
+            <SketchSearchbar />
+          </React.Fragment>
+        );
+    }
+  }
+
+  renderContent(tabKey, username) {
+    switch (tabKey) {
+      case TabKey.assets:
+        return <AssetList username={username} />;
+      case TabKey.collections:
+        return <CollectionList username={username} />;
+      case TabKey.sketches:
+      default:
+        return <SketchList username={username} />;
+    }
+  }
+
+  render() {
+    const currentTab = this.selectedTabKey();
+    const isOwner = this.isOwner();
+    const { username } = this.props.params;
+    const actions = this.renderActionButton(currentTab, username);
+
+    return (
+      <div className="dashboard">
+        <Nav layout="dashboard" />
+
+        <section className="dashboard-header">
+          <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} />
+              {actions &&
+                <div className="dashboard-header__actions">
+                  {actions}
+                </div>
+              }
+            </div>
+          </div>
+
+          <div className="dashboard-content">
+            {this.renderContent(currentTab, username)}
+          </div>
+        </section>
+        {this.isCollectionCreate() &&
+          <Overlay
+            title="Create collection"
+            closeOverlay={this.returnToDashboard}
+          >
+            <CollectionCreate />
+          </Overlay>
+        }
+      </div>
+    );
+  }
+}
+
+function mapStateToProps(state) {
+  return {
+    previousPath: state.ide.previousPath,
+    user: state.user,
+    theme: state.preferences.theme,
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return bindActionCreators({
+    updateSettings, initiateVerification, createApiKey, removeApiKey
+  }, dispatch);
+}
+
+DashboardView.propTypes = {
+  location: PropTypes.shape({
+    pathname: PropTypes.string.isRequired,
+  }).isRequired,
+  params: PropTypes.shape({
+    username: PropTypes.string.isRequired,
+  }).isRequired,
+  previousPath: PropTypes.string.isRequired,
+  theme: PropTypes.string.isRequired,
+  user: PropTypes.shape({
+    username: PropTypes.string,
+  }),
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(DashboardView);
diff --git a/client/modules/User/pages/EmailVerificationView.jsx b/client/modules/User/pages/EmailVerificationView.jsx
index b18c545e..0ce31192 100644
--- a/client/modules/User/pages/EmailVerificationView.jsx
+++ b/client/modules/User/pages/EmailVerificationView.jsx
@@ -3,13 +3,10 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { browserHistory } from 'react-router';
-import InlineSVG from 'react-inlinesvg';
 import get from 'lodash/get';
 import { Helmet } from 'react-helmet';
 import { verifyEmailConfirmation } from '../actions';
-
-const exitUrl = require('../../../images/exit.svg');
-const logoUrl = require('../../../images/p5js-logo.svg');
+import Nav from '../../../components/Nav';
 
 
 class EmailVerificationView extends React.Component {
@@ -17,12 +14,6 @@ class EmailVerificationView extends React.Component {
     emailVerificationTokenState: null,
   }
 
-  constructor(props) {
-    super(props);
-    this.closeLoginPage = this.closeLoginPage.bind(this);
-    this.gotoHomePage = this.gotoHomePage.bind(this);
-  }
-
   componentWillMount() {
     const verificationToken = this.verificationToken();
     if (verificationToken != null) {
@@ -32,14 +23,6 @@ class EmailVerificationView extends React.Component {
 
   verificationToken = () => get(this.props, 'location.query.t', null);
 
-  closeLoginPage() {
-    browserHistory.push(this.props.previousPath);
-  }
-
-  gotoHomePage() {
-    browserHistory.push('/');
-  }
-
   render() {
     let status = null;
     const {
@@ -48,7 +31,7 @@ class EmailVerificationView extends React.Component {
 
     if (this.verificationToken() == null) {
       status = (
-        <p>That link is invalid</p>
+        <p>That link is invalid.</p>
       );
     } else if (emailVerificationTokenState === 'checking') {
       status = (
@@ -58,6 +41,7 @@ class EmailVerificationView extends React.Component {
       status = (
         <p>All done, your email address has been verified.</p>
       );
+      setTimeout(() => browserHistory.push('/'), 1000);
     } else if (emailVerificationTokenState === 'invalid') {
       status = (
         <p>Something went wrong.</p>
@@ -65,21 +49,16 @@ class EmailVerificationView extends React.Component {
     }
 
     return (
-      <div className="form-container">
-        <Helmet>
-          <title>p5.js Web Editor | Email Verification</title>
-        </Helmet>
-        <div className="form-container__header">
-          <button className="form-container__logo-button" onClick={this.gotoHomePage}>
-            <InlineSVG src={logoUrl} alt="p5js Logo" />
-          </button>
-          <button className="form-container__exit-button" onClick={this.closeLoginPage}>
-            <InlineSVG src={exitUrl} alt="Close Login Page" />
-          </button>
-        </div>
-        <div className="form-container__content">
-          <h2 className="form-container__title">Verify your email</h2>
-          {status}
+      <div className="email-verification">
+        <Nav layout="dashboard" />
+        <div className="form-container">
+          <Helmet>
+            <title>p5.js Web Editor | Email Verification</title>
+          </Helmet>
+          <div className="form-container__content">
+            <h2 className="form-container__title">Verify your email</h2>
+            {status}
+          </div>
         </div>
       </div>
     );
@@ -89,7 +68,6 @@ class EmailVerificationView extends React.Component {
 function mapStateToProps(state) {
   return {
     emailVerificationTokenState: state.user.emailVerificationTokenState,
-    previousPath: state.ide.previousPath
   };
 }
 
@@ -101,7 +79,6 @@ function mapDispatchToProps(dispatch) {
 
 
 EmailVerificationView.propTypes = {
-  previousPath: PropTypes.string.isRequired,
   emailVerificationTokenState: PropTypes.oneOf([
     'checking', 'verified', 'invalid'
   ]),
diff --git a/client/modules/User/pages/LoginView.jsx b/client/modules/User/pages/LoginView.jsx
index 3919822c..d2e37f01 100644
--- a/client/modules/User/pages/LoginView.jsx
+++ b/client/modules/User/pages/LoginView.jsx
@@ -2,16 +2,13 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { reduxForm } from 'redux-form';
 import { Link, browserHistory } from 'react-router';
-import InlineSVG from 'react-inlinesvg';
 import { Helmet } from 'react-helmet';
 import { validateAndLoginUser } from '../actions';
 import LoginForm from '../components/LoginForm';
 import { validateLogin } from '../../../utils/reduxFormUtils';
 import GithubButton from '../components/GithubButton';
 import GoogleButton from '../components/GoogleButton';
-
-const exitUrl = require('../../../images/exit.svg');
-const logoUrl = require('../../../images/p5js-logo.svg');
+import Nav from '../../../components/Nav';
 
 class LoginView extends React.Component {
   constructor(props) {
@@ -34,32 +31,27 @@ class LoginView extends React.Component {
       return null;
     }
     return (
-      <div className="form-container">
-        <Helmet>
-          <title>p5.js Web Editor | Login</title>
-        </Helmet>
-        <div className="form-container__header">
-          <button className="form-container__logo-button" onClick={this.gotoHomePage}>
-            <InlineSVG src={logoUrl} alt="p5js Logo" />
-          </button>
-          <button className="form-container__exit-button" onClick={this.closeLoginPage}>
-            <InlineSVG src={exitUrl} alt="Close Login Page" />
-          </button>
-        </div>
-        <div className="form-container__content">
-          <h2 className="form-container__title">Log In</h2>
-          <LoginForm {...this.props} />
-          <h2 className="form-container__divider">Or</h2>
-          <GithubButton buttonText="Login with Github" />
-          <GoogleButton buttonText="Login with Google" />
-          <p className="form__navigation-options">
-            Don&apos;t have an account?&nbsp;
-            <Link className="form__signup-button" to="/signup">Sign Up</Link>
-          </p>
-          <p className="form__navigation-options">
-            Forgot your password?&nbsp;
-            <Link className="form__reset-password-button" to="/reset-password">Reset your password</Link>
-          </p>
+      <div className="login">
+        <Nav layout="dashboard" />
+        <div className="form-container">
+          <Helmet>
+            <title>p5.js Web Editor | Login</title>
+          </Helmet>
+          <div className="form-container__content">
+            <h2 className="form-container__title">Log In</h2>
+            <LoginForm {...this.props} />
+            <h2 className="form-container__divider">Or</h2>
+            <GithubButton buttonText="Login with Github" />
+            <GoogleButton buttonText="Login with Google" />
+            <p className="form__navigation-options">
+              Don&apos;t have an account?&nbsp;
+              <Link className="form__signup-button" to="/signup">Sign Up</Link>
+            </p>
+            <p className="form__navigation-options">
+              Forgot your password?&nbsp;
+              <Link className="form__reset-password-button" to="/reset-password">Reset your password</Link>
+            </p>
+          </div>
         </div>
       </div>
     );
diff --git a/client/modules/User/pages/NewPasswordView.jsx b/client/modules/User/pages/NewPasswordView.jsx
index 12d8d700..1760cc32 100644
--- a/client/modules/User/pages/NewPasswordView.jsx
+++ b/client/modules/User/pages/NewPasswordView.jsx
@@ -2,60 +2,36 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { reduxForm } from 'redux-form';
 import classNames from 'classnames';
-import { browserHistory } from 'react-router';
-import InlineSVG from 'react-inlinesvg';
 import { bindActionCreators } from 'redux';
 import { Helmet } from 'react-helmet';
 import NewPasswordForm from '../components/NewPasswordForm';
 import * as UserActions from '../actions';
+import Nav from '../../../components/Nav';
 
-const exitUrl = require('../../../images/exit.svg');
-const logoUrl = require('../../../images/p5js-logo.svg');
-
-class NewPasswordView extends React.Component {
-  constructor(props) {
-    super(props);
-    this.gotoHomePage = this.gotoHomePage.bind(this);
-  }
-
-  componentDidMount() {
-    // need to check if this is a valid token
-    this.props.validateResetPasswordToken(this.props.params.reset_password_token);
-  }
-
-  gotoHomePage() {
-    browserHistory.push('/');
-  }
-
-  render() {
-    const newPasswordClass = classNames({
-      'new-password': true,
-      'new-password--invalid': this.props.user.resetPasswordInvalid,
-      'form-container': true
-    });
-    return (
+function NewPasswordView(props) {
+  const newPasswordClass = classNames({
+    'new-password': true,
+    'new-password--invalid': props.user.resetPasswordInvalid,
+    'form-container': true,
+    'user': true
+  });
+  return (
+    <div className="new-password-container">
+      <Nav layout="dashboard" />
       <div className={newPasswordClass}>
         <Helmet>
           <title>p5.js Web Editor | New Password</title>
         </Helmet>
-        <div className="form-container__header">
-          <button className="form-container__logo-button" onClick={this.gotoHomePage}>
-            <InlineSVG src={logoUrl} alt="p5js Logo" />
-          </button>
-          <button className="form-container__exit-button" onClick={this.gotoHomePage}>
-            <InlineSVG src={exitUrl} alt="Close NewPassword Page" />
-          </button>
-        </div>
         <div className="form-container__content">
           <h2 className="form-container__title">Set a New Password</h2>
-          <NewPasswordForm {...this.props} />
+          <NewPasswordForm {...props} />
           <p className="new-password__invalid">
             The password reset token is invalid or has expired.
           </p>
         </div>
       </div>
-    );
-  }
+    </div>
+  );
 }
 
 NewPasswordView.propTypes = {
diff --git a/client/modules/User/pages/ResetPasswordView.jsx b/client/modules/User/pages/ResetPasswordView.jsx
index 1f49c2b3..8ff7dac1 100644
--- a/client/modules/User/pages/ResetPasswordView.jsx
+++ b/client/modules/User/pages/ResetPasswordView.jsx
@@ -1,55 +1,33 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import { Link, browserHistory } from 'react-router';
+import { Link } from 'react-router';
 import classNames from 'classnames';
-import InlineSVG from 'react-inlinesvg';
 import { bindActionCreators } from 'redux';
 import { reduxForm } from 'redux-form';
 import { Helmet } from 'react-helmet';
 import * as UserActions from '../actions';
 import ResetPasswordForm from '../components/ResetPasswordForm';
 import { validateResetPassword } from '../../../utils/reduxFormUtils';
+import Nav from '../../../components/Nav';
 
-const exitUrl = require('../../../images/exit.svg');
-const logoUrl = require('../../../images/p5js-logo.svg');
-
-class ResetPasswordView extends React.Component {
-  constructor(props) {
-    super(props);
-    this.gotoHomePage = this.gotoHomePage.bind(this);
-  }
-
-  componentWillMount() {
-    this.props.resetPasswordReset();
-  }
-
-  gotoHomePage() {
-    browserHistory.push('/');
-  }
-
-  render() {
-    const resetPasswordClass = classNames({
-      'reset-password': true,
-      'reset-password--submitted': this.props.user.resetPasswordInitiate,
-      'form-container': true
-    });
-    return (
+function ResetPasswordView(props) {
+  const resetPasswordClass = classNames({
+    'reset-password': true,
+    'reset-password--submitted': props.user.resetPasswordInitiate,
+    'form-container': true,
+    'user': true
+  });
+  return (
+    <div className="reset-password-container">
+      <Nav layout="dashboard" />
       <div className={resetPasswordClass}>
         <Helmet>
           <title>p5.js Web Editor | Reset Password</title>
         </Helmet>
-        <div className="form-container__header">
-          <button className="form-container__logo-button" onClick={this.gotoHomePage}>
-            <InlineSVG src={logoUrl} alt="p5js Logo" />
-          </button>
-          <button className="form-container__exit-button" onClick={this.gotoHomePage}>
-            <InlineSVG src={exitUrl} alt="Close ResetPassword Page" />
-          </button>
-        </div>
         <div className="form-container__content">
           <h2 className="form-container__title">Reset Your Password</h2>
-          <ResetPasswordForm {...this.props} />
+          <ResetPasswordForm {...props} />
           <p className="reset-password__submitted">
             Your password reset email should arrive shortly. If you don&apos;t see it, check
             in your spam folder as sometimes it can end up there.
@@ -61,8 +39,8 @@ class ResetPasswordView extends React.Component {
           </p>
         </div>
       </div>
-    );
-  }
+    </div>
+  );
 }
 
 ResetPasswordView.propTypes = {
diff --git a/client/modules/User/pages/SignupView.jsx b/client/modules/User/pages/SignupView.jsx
index 9fbbc930..eb18f0dc 100644
--- a/client/modules/User/pages/SignupView.jsx
+++ b/client/modules/User/pages/SignupView.jsx
@@ -4,27 +4,17 @@ import { bindActionCreators } from 'redux';
 import axios from 'axios';
 import { Link, browserHistory } from 'react-router';
 import { Helmet } from 'react-helmet';
-import InlineSVG from 'react-inlinesvg';
 import { reduxForm } from 'redux-form';
 import * as UserActions from '../actions';
 import SignupForm from '../components/SignupForm';
 import { validateSignup } from '../../../utils/reduxFormUtils';
+import Nav from '../../../components/Nav';
 
-const exitUrl = require('../../../images/exit.svg');
-const logoUrl = require('../../../images/p5js-logo.svg');
+const __process = (typeof global !== 'undefined' ? global : window).process;
+const ROOT_URL = __process.env.API_URL;
 
 class SignupView extends React.Component {
-  constructor(props) {
-    super(props);
-    this.closeSignupPage = this.closeSignupPage.bind(this);
-    this.gotoHomePage = this.gotoHomePage.bind(this);
-  }
-
-  closeSignupPage() {
-    browserHistory.push(this.props.previousPath);
-  }
-
-  gotoHomePage() {
+  gotoHomePage = () => {
     browserHistory.push('/');
   }
 
@@ -34,25 +24,20 @@ class SignupView extends React.Component {
       return null;
     }
     return (
-      <div className="form-container">
-        <Helmet>
-          <title>p5.js Web Editor | Signup</title>
-        </Helmet>
-        <div className="form-container__header">
-          <button className="form-container__logo-button" onClick={this.gotoHomePage}>
-            <InlineSVG src={logoUrl} alt="p5js Logo" />
-          </button>
-          <button className="form-container__exit-button" onClick={this.closeSignupPage}>
-            <InlineSVG src={exitUrl} alt="Close Signup Page" />
-          </button>
-        </div>
-        <div className="form-container__content">
-          <h2 className="form-container__title">Sign Up</h2>
-          <SignupForm {...this.props} />
-          <p className="form__navigation-options">
-            Already have an account?&nbsp;
-            <Link className="form__login-button" to="/login">Log In</Link>
-          </p>
+      <div className="signup">
+        <Nav layout="dashboard" />
+        <div className="form-container">
+          <Helmet>
+            <title>p5.js Web Editor | Signup</title>
+          </Helmet>
+          <div className="form-container__content">
+            <h2 className="form-container__title">Sign Up</h2>
+            <SignupForm {...this.props} />
+            <p className="form__navigation-options">
+              Already have an account?&nbsp;
+              <Link className="form__login-button" to="/login">Log In</Link>
+            </p>
+          </div>
         </div>
       </div>
     );
@@ -95,7 +80,7 @@ function asyncValidate(formProps, dispatch, props) {
         const queryParams = {};
         queryParams[fieldToValidate] = formProps[fieldToValidate];
         queryParams.check_type = fieldToValidate;
-        return axios.get('/api/signup/duplicate_check', { params: queryParams })
+        return axios.get(`${ROOT_URL}/signup/duplicate_check`, { params: queryParams })
           .then((response) => {
             if (response.data.exists) {
               errors[fieldToValidate] = response.data.message;
@@ -118,9 +103,9 @@ function onSubmitFail(errors) {
 
 SignupView.propTypes = {
   previousPath: PropTypes.string.isRequired,
-  user: {
+  user: PropTypes.shape({
     authenticated: PropTypes.bool
-  }
+  })
 };
 
 SignupView.defaultProps = {
diff --git a/client/modules/User/reducers.js b/client/modules/User/reducers.js
index 73636f2b..00454acd 100644
--- a/client/modules/User/reducers.js
+++ b/client/modules/User/reducers.js
@@ -31,6 +31,10 @@ const user = (state = { authenticated: false }, action) => {
       return Object.assign({}, state, { emailVerificationTokenState: 'invalid' });
     case ActionTypes.SETTINGS_UPDATED:
       return { ...state, ...action.user };
+    case ActionTypes.API_KEY_REMOVED:
+      return { ...state, ...action.user };
+    case ActionTypes.API_KEY_CREATED:
+      return { ...state, ...action.user };
     default:
       return state;
   }
diff --git a/client/reducers.js b/client/reducers.js
index 4a173a8f..121c6cd6 100644
--- a/client/reducers.js
+++ b/client/reducers.js
@@ -13,6 +13,7 @@ import assets from './modules/IDE/reducers/assets';
 import search from './modules/IDE/reducers/search';
 import sorting from './modules/IDE/reducers/sorting';
 import loading from './modules/IDE/reducers/loading';
+import collections from './modules/IDE/reducers/collections';
 
 const rootReducer = combineReducers({
   form,
@@ -28,7 +29,8 @@ const rootReducer = combineReducers({
   toast,
   console,
   assets,
-  loading
+  loading,
+  collections
 });
 
 export default rootReducer;
diff --git a/client/routes.jsx b/client/routes.jsx
index a4853ff9..18ff9b20 100644
--- a/client/routes.jsx
+++ b/client/routes.jsx
@@ -9,9 +9,12 @@ import ResetPasswordView from './modules/User/pages/ResetPasswordView';
 import EmailVerificationView from './modules/User/pages/EmailVerificationView';
 import NewPasswordView from './modules/User/pages/NewPasswordView';
 import AccountView from './modules/User/pages/AccountView';
-// import SketchListView from './modules/Sketch/pages/SketchListView';
+import CollectionView from './modules/User/pages/CollectionView';
+import DashboardView from './modules/User/pages/DashboardView';
+import createRedirectWithUsername from './components/createRedirectWithUsername';
 import { getUser } from './modules/User/actions';
 import { stopSketch } from './modules/IDE/actions/ide';
+import { userIsAuthenticated, userIsNotAuthenticated, userIsAuthorized } from './utils/auth';
 
 const checkAuth = (store) => {
   store.dispatch(getUser());
@@ -24,9 +27,9 @@ const onRouteChange = (store) => {
 const routes = store => (
   <Route path="/" component={App} onChange={() => { onRouteChange(store); }}>
     <IndexRoute component={IDEView} onEnter={checkAuth(store)} />
-    <Route path="/login" component={LoginView} />
-    <Route path="/signup" component={SignupView} />
-    <Route path="/reset-password" component={ResetPasswordView} />
+    <Route path="/login" component={userIsNotAuthenticated(LoginView)} />
+    <Route path="/signup" component={userIsNotAuthenticated(SignupView)} />
+    <Route path="/reset-password" component={userIsNotAuthenticated(ResetPasswordView)} />
     <Route path="/verify" component={EmailVerificationView} />
     <Route
       path="/reset-password/:reset_password_token"
@@ -35,11 +38,16 @@ 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={IDEView} />
-    <Route path="/assets" component={IDEView} />
-    <Route path="/account" component={AccountView} />
+    <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" 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/collections/create" component={DashboardView} />
+    <Route path="/:username/collections/:collection_id" component={CollectionView} />
     <Route path="/about" component={IDEView} />
   </Route>
 );
diff --git a/client/styles/abstracts/_placeholders.scss b/client/styles/abstracts/_placeholders.scss
index d252a08c..1b1eb377 100644
--- a/client/styles/abstracts/_placeholders.scss
+++ b/client/styles/abstracts/_placeholders.scss
@@ -83,6 +83,10 @@
 		border: 2px solid getThemifyVariable('button-border-color');
 		border-radius: 2px;
 		padding: #{10 / $base-font-size}rem #{30 / $base-font-size}rem;
+		& g {
+			fill: getThemifyVariable('button-color');
+			opacity: 1;
+		}
 		&:enabled:hover {
 			border-color: getThemifyVariable('button-background-hover-color');
 			background-color: getThemifyVariable('button-background-hover-color');
@@ -102,27 +106,6 @@
 	}
 }
 
-%forms-button {
-	background-color: $form-button-background-color;
-	color: $form-button-color;
-	cursor: pointer;
-	border: 2px solid $form-button-color;
-	border-radius: 2px;
-	padding: #{8 / $base-font-size}rem #{25 / $base-font-size}rem;
-	line-height: 1;
-  margin: #{39 / $base-font-size}rem 0 #{24 / $base-font-size}rem 0;
-	&:enabled:hover {
-		border-color: $form-button-background-hover-color;
-		background-color: $form-button-background-hover-color;
-		color: $form-button-hover-color;
-	}
-	&:enabled:active {
-		border-color: $form-button-background-active-color;
-		background-color: $form-button-background-active-color;
-		color: $form-button-active-color;
-	}
-}
-
 %preferences-button {
 	@extend %toolbar-button;
 	@include themify() {
diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss
index 820fb05a..26407719 100644
--- a/client/styles/abstracts/_variables.scss
+++ b/client/styles/abstracts/_variables.scss
@@ -9,15 +9,22 @@ $orange: #ffa500;
 $red: #ff0000;
 $lightsteelblue: #B0C4DE;
 $dodgerblue: #1E90FF;
-$primary-text-color: #333;
 $icon-color: #8b8b8b;
 $icon-hover-color: #333;
 $p5-contrast-pink: #FFA9D9;
 
+// Grays
+$dark: #333;
+$middleGray: #7d7d7d;
+$middleLight: #a6a6a6;
+
+// Abstracts
+$primary-text-color: $dark;
+
 $themes: (
   light: (
     logo-color: $p5js-pink,
-    primary-text-color: #333,
+    primary-text-color: $primary-text-color,
     dropzone-text-color: #333,
     modal-button-color: #333,
     heading-text-color: #333,
@@ -65,8 +72,35 @@ $themes: (
     keyboard-shortcut-color: #757575,
     nav-hover-color: $p5js-pink,
     error-color: $p5js-pink,
+    table-row-stripe-color: #d6d6d6,
     codefold-icon-open: url(../images/triangle-arrow-down.svg),
-    codefold-icon-closed: url(../images/triangle-arrow-right.svg)
+    codefold-icon-closed: url(../images/triangle-arrow-right.svg),
+
+    primary-button-color: #fff,
+    primary-button-background-color: $p5js-pink,
+
+    table-button-color: $white,
+    table-button-background-color: #979797,
+    table-button-active-color: $white,
+    table-button-background-active-color: #00A1D3,
+    table-button-hover-color: $white,
+    table-button-background-hover-color: $p5js-pink,
+
+    progress-bar-background-color: #979797,
+    progress-bar-active-color: #f10046,
+
+    form-title-color: rgba(51, 51, 51, 0.87),
+    form-secondary-title-color: $middleGray,
+    form-input-text-color: $dark,
+    form-input-placeholder-text-color: $middleLight,
+    form-border-color: #b5b5b5,
+    form-button-background-color: $white,
+    form-button-color: #f10046,
+    form-button-background-hover-color: $p5js-pink,
+    form-button-background-active-color: #f10046,
+    form-button-hover-color: $white,
+    form-button-active-color: $white,
+    form-navigation-options-color: #999999
   ),
   dark: (
     logo-color: $p5js-pink,
@@ -117,8 +151,33 @@ $themes: (
     keyboard-shortcut-color: #B5B5B5,
     nav-hover-color: $p5js-pink,
     error-color: $p5js-pink,
+    table-row-stripe-color: #3f3f3f,
     codefold-icon-open: url(../images/triangle-arrow-down-white.svg),
-    codefold-icon-closed: url(../images/triangle-arrow-right-white.svg)
+    codefold-icon-closed: url(../images/triangle-arrow-right-white.svg),
+
+    primary-button-color: #fff,
+    primary-button-background-color: $p5js-pink,
+
+    table-button-color: $white,
+    table-button-background-color: #979797,
+    table-button-active-color: $white,
+    table-button-background-active-color: #00A1D3,
+    table-button-hover-color: $white,
+    table-button-background-hover-color: $p5js-pink,
+
+    progress-bar-background-color: #979797,
+    progress-bar-active-color: #f10046,
+
+    form-title-color: $white,
+    form-secondary-title-color: #b5b5b5,
+    form-border-color: #b5b5b5,
+    form-button-background-color: $black,
+    form-button-color: #f10046,
+    form-button-background-hover-color: $p5js-pink,
+    form-button-background-active-color: #f10046,
+    form-button-hover-color: $white,
+    form-button-active-color: $white,
+    form-navigation-options-color: #999999
   ),
   contrast: (
     logo-color: $yellow,
@@ -168,8 +227,33 @@ $themes: (
     keyboard-shortcut-color: #e1e1e1,
     nav-hover-color: $yellow,
     error-color: $p5-contrast-pink,
+    table-row-stripe-color: #3f3f3f,
     codefold-icon-open: url(../images/triangle-arrow-down-white.svg),
-    codefold-icon-closed: url(../images/triangle-arrow-right-white.svg)
+    codefold-icon-closed: url(../images/triangle-arrow-right-white.svg),
+
+    primary-button-color: #fff,
+    primary-button-background-color: $p5js-pink,
+
+    table-button-color: #333,
+    table-button-background-color: #C1C1C1,
+    table-button-active-color: #333,
+    table-button-background-active-color: #00FFFF,
+    table-button-hover-color: #333,
+    table-button-background-hover-color: $yellow,
+
+    progress-bar-background-color: #979797,
+    progress-bar-active-color: #f10046,
+
+    form-title-color: $white,
+    form-secondary-title-color: #b5b5b5,
+    form-border-color: #b5b5b5,
+    form-button-background-color: $black,
+    form-button-color: #f10046,
+    form-button-background-hover-color: $p5-contrast-pink,
+    form-button-background-active-color: #f10046,
+    form-button-hover-color: $white,
+    form-button-active-color: $white,
+    form-navigation-options-color: #999999
   )
 );
 
@@ -179,15 +263,5 @@ $console-error-color: #ff5f52;
 $toast-background-color: #4A4A4A;
 $toast-text-color: $white;
 
-$form-title-color: rgba(51, 51, 51, 0.87);
-$secondary-form-title-color: #b5b5b5;
-$form-button-background-color: $white;
-$form-button-color: #f10046;
-$form-button-background-hover-color: $p5js-pink;
-$form-button-background-active-color: #f10046;
-$form-button-hover-color: $white;
-$form-button-active-color: $white;
-$form-navigation-options-color: #999999;
-
 $about-play-background-color: rgba(255, 255, 255, 0.7);
 $about-button-border-color: rgba(151, 151, 151, 0.7);
diff --git a/client/styles/base/_base.scss b/client/styles/base/_base.scss
index 75ae3c76..de49c804 100644
--- a/client/styles/base/_base.scss
+++ b/client/styles/base/_base.scss
@@ -6,13 +6,13 @@ html, body {
 	font-size: #{$base-font-size}px;
 }
 
-body, input {
+body, input, textarea {
 	@include themify() {
 		color: getThemifyVariable('primary-text-color');
 	}
 }
 
-body, input, button {
+body, input, textarea, button {
 	font-family: Montserrat, sans-serif;
 }
 
@@ -31,7 +31,8 @@ input, button {
 	font-size: 1rem;
 }
 
-input {
+input,
+textarea {
 	padding: #{5 / $base-font-size}rem;
 	border: 1px solid ;
 	border-radius: 2px;
@@ -42,12 +43,18 @@ input {
 	}
 }
 
+button[type="submit"],
 input[type="submit"] {
 	@include themify() {
 		@extend %button;
 	}
 }
 
+button[type="submit"]:disabled,
+input[type="submit"]:disabled {
+  cursor: not-allowed;
+}
+
 button {
 	@include themify() {
 		@extend %link;
@@ -56,6 +63,10 @@ button {
 	border: none;
 }
 
+h1 {
+	font-size: #{21 / $base-font-size}em;
+}
+
 h2 {
 	font-size: #{21 / $base-font-size}em;
 }
diff --git a/client/styles/components/_about.scss b/client/styles/components/_about.scss
index ef7265ed..54929f04 100644
--- a/client/styles/components/_about.scss
+++ b/client/styles/components/_about.scss
@@ -46,7 +46,9 @@
   padding-left: #{20 / $base-font-size}rem;
   width: #{720 / $base-font-size}rem;
   & a {
-    color: $form-navigation-options-color;
+    @include themify() {
+      color: getThemifyVariable('form-navigation-options-color');
+    }
   }
 }
 
diff --git a/client/styles/components/_account.scss b/client/styles/components/_account.scss
new file mode 100644
index 00000000..e4a0f837
--- /dev/null
+++ b/client/styles/components/_account.scss
@@ -0,0 +1,22 @@
+.account-settings__container {
+  @include themify() {
+    color: getThemifyVariable('primary-text-color');
+    background-color: getThemifyVariable('background-color');
+  }
+  height: 100%;
+}
+
+.account-settings {
+  max-width: #{700 / $base-font-size}rem;
+  align-self: center;
+  padding: 0 #{10 / $base-font-size}rem;
+  margin: 0 auto;
+}
+
+.account__tabs {
+  padding-top: #{20 / $base-font-size}rem;
+}
+
+.account__social-text {
+  padding-bottom: #{15 / $base-font-size}rem;
+}
diff --git a/client/styles/components/_api-key.scss b/client/styles/components/_api-key.scss
new file mode 100644
index 00000000..a0986d4e
--- /dev/null
+++ b/client/styles/components/_api-key.scss
@@ -0,0 +1,109 @@
+.api-key-form__summary {
+  padding-top: #{25 / $base-font-size}rem;
+  @include themify() {
+    color: getThemifyVariable('heading-text-color');
+  }
+}
+
+.api-key-form__section {
+  padding-bottom: #{15 / $base-font-size}rem;
+}
+
+.api-key-form__title {
+  padding: #{15 / $base-font-size}rem 0;
+  font-size: #{21 / $base-font-size}rem;
+  font-weight: bold;
+  @include themify() {
+    color: getThemifyVariable('heading-text-color');
+  }
+}
+
+.api-key-form__create-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.api-key-form__create-icon {
+  display: flex;
+}
+
+.api-key-form__create-button .isvg {
+  padding-right: 10px;
+}
+
+.api-key-list {
+  display: block;
+  max-width: 900px;
+  border-collapse: collapse;
+  table-layout: fixed;
+
+  thead tr th {
+    width: 30%;
+  }
+
+  thead tr th:last-child {
+    width: 10%;
+  }
+
+  th {
+    padding: #{5 / $base-font-size}rem;
+  }
+
+  td {
+    padding: #{15 / $base-font-size}rem #{5 / $base-font-size}rem;
+  }
+
+  tbody tr:nth-child(odd) {
+    @include themify() {
+      background: getThemifyVariable('table-row-stripe-color');
+    }
+  }
+}
+
+.api-key-list__action {
+  text-align: center;
+}
+
+.api-key-list__delete-button {
+    width:#{20 / $base-font-size}rem;
+    height:#{20 / $base-font-size}rem;
+
+    text-align: center;
+
+    @include themify() {
+      background-color: transparent;
+      border: none;
+      cursor: pointer;
+      padding: 0;
+      position: initial;
+      left: 0;
+      top: 0;
+        & g {
+          opacity: 1;
+          fill: getThemifyVariable('icon-color');
+        }
+    }
+}
+
+.api-key-list__delete-button:hover {
+  @include themify() {
+      & g {
+        opacity: 1;
+        fill: getThemifyVariable('icon-hover-color');
+      }
+  }
+}
+
+.api-key-form__new-token__title {
+  margin-bottom: #{10 / $base-font-size}rem;
+  font-size: #{18 / $base-font-size}rem;
+  font-weight: bold;
+  @include themify() {
+    color: getThemifyVariable('heading-text-color');
+  }
+}
+
+.api-key-form__new-token__info {
+  padding: #{10 / $base-font-size}rem 0;
+}
diff --git a/client/styles/components/_asset-list.scss b/client/styles/components/_asset-list.scss
index 77338505..335fc7bf 100644
--- a/client/styles/components/_asset-list.scss
+++ b/client/styles/components/_asset-list.scss
@@ -1,60 +1,99 @@
 .asset-table-container {
-  // flex: 1 1 0%;
   overflow-y: auto;
   max-width: 100%;
-  width: #{1000 / $base-font-size}rem;
-  min-height: #{400 / $base-font-size}rem;
+  min-height: 100%;
 }
 
 .asset-table {
   width: 100%;
-  padding: #{10 / $base-font-size}rem #{20 / $base-font-size}rem;
+  
   max-height: 100%;
   border-spacing: 0;
-  & .asset-list__delete-column {
-    width: #{23 / $base-font-size}rem;
+  position: relative;
+  & .asset-table__dropdown-column {
+    width: #{60 / $base-font-size}rem;
+    position: relative;
   }
+}
 
-  & thead {
-    font-size: #{12 / $base-font-size}rem;
-    @include themify() {
-      color: getThemifyVariable('inactive-text-color')
-    }
+.asset-table thead th {
+  height: #{32 / $base-font-size}rem;
+  position: sticky;
+  top: 0;
+  @include themify() {
+    background-color: getThemifyVariable('background-color');
   }
+}
 
-  & th {
-    height: #{32 / $base-font-size}rem;
-    font-weight: normal;
-  }
+.asset-table thead th:nth-child(1){
+  padding-left: #{12 / $base-font-size}rem;
 }
 
 .asset-table__row {
   margin: #{10 / $base-font-size}rem;
   height: #{72 / $base-font-size}rem;
   font-size: #{16 / $base-font-size}rem;
+}
 
-  &:nth-child(odd) {
-    @include themify() {
-      background: getThemifyVariable('console-header-background-color');
-    }
+.asset-table__row:nth-child(odd) {
+  @include themify() {
+    background: getThemifyVariable('table-row-stripe-color');
   }
+}
 
-  & a {
-    @include themify() {
-      color: getThemifyVariable('primary-text-color');
-    }
-  }
+.asset-table__row > th:nth-child(1) {
+  padding-left: #{12 / $base-font-size}rem;
+}
 
-  & td:first-child {
-    padding-left: #{10 / $base-font-size}rem;
+.asset-table__row a {
+  @include themify() {
+    color: getThemifyVariable('primary-text-color');
   }
 }
 
+.asset-table thead {
+  font-size: #{12 / $base-font-size}rem;
+  @include themify() {
+    color: getThemifyVariable('inactive-text-color')
+  }
+}
+
+.asset-table th {
+  font-weight: normal;
+}
+
 .asset-table__empty {
   text-align: center;
   font-size: #{16 / $base-font-size}rem;
+  padding: #{42 / $base-font-size}rem 0;
 }
 
 .asset-table__total {
   padding: 0 #{20 / $base-font-size}rem;
+  position: sticky;
+  top: 0; 
+  @include themify() {
+    background-color: getThemifyVariable('background-color');
+  }
+}
+
+.asset-table__dropdown-button {
+  width:#{25 / $base-font-size}rem;
+  height:#{25 / $base-font-size}rem;
+
+  @include themify() {
+    & polygon {
+      fill: getThemifyVariable('dropdown-color');
+    }
+  }
+}
+
+.asset-table__action-dialogue {
+  @extend %dropdown-open-right;
+  top: 63%;
+  right: calc(100% - 26px);
+}
+
+.asset-table__action-option {
+  font-size: #{12 / $base-font-size}rem;
 }
diff --git a/client/styles/components/_asset-size.scss b/client/styles/components/_asset-size.scss
new file mode 100644
index 00000000..56a6c9b9
--- /dev/null
+++ b/client/styles/components/_asset-size.scss
@@ -0,0 +1,48 @@
+.asset-size {
+  position: relative;
+  flex: 1;
+  margin-bottom: #{18 / $base-font-size}rem;
+  font-size: #{14 / $base-font-size}rem;
+}
+
+.asset-size-bar {
+  position: relative;
+  content: ' ';
+  display: block;
+  width: 200px;
+  height: 20px;
+
+  border-radius: #{3 / $base-font-size}rem;
+  border: 1px solid transparent;
+  overflow: hidden;
+
+  @include themify() {
+    background-color: getThemifyVariable('progress-bar-background-color');
+  }
+}
+
+.asset-size-bar::before {
+  content: ' ';
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: calc(var(--percent) * 100%);
+
+  @include themify() {
+    background-color: getThemifyVariable('progress-bar-active-color');
+  }
+}
+
+.asset-current {
+  position: absolute;
+  top: #{28 / $base-font-size}rem;
+  left: 0;
+}
+
+.asset-max {
+  position: absolute;
+  top: 0;
+  left: #{210 / $base-font-size}rem;
+}
diff --git a/client/styles/components/_collection-create.scss b/client/styles/components/_collection-create.scss
new file mode 100644
index 00000000..63cd4546
--- /dev/null
+++ b/client/styles/components/_collection-create.scss
@@ -0,0 +1,3 @@
+.collection-create {
+  padding: #{24 / $base-font-size}rem;
+}
diff --git a/client/styles/components/_collection-popover.scss b/client/styles/components/_collection-popover.scss
new file mode 100644
index 00000000..2d5db110
--- /dev/null
+++ b/client/styles/components/_collection-popover.scss
@@ -0,0 +1,95 @@
+.collection-popover {
+  position: absolute;
+	height: auto;
+  width: #{400 / $base-font-size}rem;
+  top: 63%;
+  right: calc(100% - 26px);
+
+  z-index: 9999;
+  
+  display: flex;
+  flex-direction: column;
+  
+	border-radius: #{6 / $base-font-size}rem;
+
+  @include themify() {
+    background-color: map-get($theme-map, 'modal-background-color');
+    border: 1px solid map-get($theme-map, 'modal-border-color');
+    box-shadow: 0 0 18px 0 getThemifyVariable('shadow-color');
+    color: getThemifyVariable('dropdown-color');
+  }
+  
+	text-align: left;
+}
+
+.collection-popover__header {
+  display: flex;
+  margin-left: #{17 / $base-font-size}rem;
+  margin-right: #{17 / $base-font-size}rem;
+}
+
+.collection-popover__filter {
+  display: flex;
+  margin-bottom: #{8 / $base-font-size}rem;
+}
+
+.collection-popover__exit-button {
+  @include icon();
+  margin-left: auto;
+}
+
+.collection-popover__items {
+  height: #{70 * 4 / $base-font-size}rem;
+  overflow: auto;
+}
+
+
+.collection-popover__item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  height: #{60 / $base-font-size}rem;
+  margin: 5px;
+  padding: 5px;
+}
+
+.collection-popover__item:nth-child(odd) {
+  @include themify() {
+    background: getThemifyVariable('table-row-stripe-color');
+  }
+}
+
+.collection-popover__item__info {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+
+  display: flex;
+  align-items: center;
+}
+
+.collection-popover__item__info button,
+.collection-popover__item__info button:hover {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+
+  text-align: left;
+  color: black;
+}
+
+.collection-popover__item__view {
+}
+
+
+.collection-popover__item__view-button {
+  @extend %button;
+}
+
+.collection-popover__empty {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
diff --git a/client/styles/components/_collection.scss b/client/styles/components/_collection.scss
new file mode 100644
index 00000000..3a98f78d
--- /dev/null
+++ b/client/styles/components/_collection.scss
@@ -0,0 +1,174 @@
+.collection-container {
+  padding: #{24 / $base-font-size}rem #{66 / $base-font-size}rem;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.collection-metadata {
+  width: #{1012 / $base-font-size}rem;
+  margin: 0 auto;
+  margin-bottom: #{24 / $base-font-size}rem;
+}
+
+.collection-metadata__columns {
+  display: flex;
+}
+
+.collection-metadata__column--left,
+.collection-metadata__column--right {
+  flex: 1;
+}
+
+.collection-metadata__column--right {
+  align-self: flex-end;
+
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+}
+
+.collection-metadata__column--right > * {
+  margin-left: #{10 / $base-font-size}rem;
+}
+
+.collection-metadata__name {
+  // padding: #{8 / $base-font-size}rem 0;
+}
+
+.collection-metadata__name .editable-input__label span {
+  padding: 0.83333rem 0;
+
+  @include themify() {
+    color: getThemifyVariable('primary-text-color');
+  }
+}
+
+.collection-metadata__name,
+.collection-metadata__name .editable-input__input {
+  font-size: 1.75rem;
+  font-weight: bold;
+}
+
+.collection-metadata__user {
+  padding-top: #{8 / $base-font-size}rem;
+  font-size: 14px;
+}
+
+.collection-metadata--is-owner .collection-metadata__user {
+  padding-left: #{8 / $base-font-size}rem;
+}
+
+.collection-metadata__description {
+  margin-top: #{8 / $base-font-size}rem;
+  text-align: left;
+  font-size: 14px;
+}
+
+.collection-metadata__description .editable-input__label {
+  text-align: left;
+}
+
+.collection-metadata__description .editable-input--has-value .editable-input__label  {
+  @include themify() {
+    color: getThemifyVariable('primary-text-color');
+  }
+}
+
+.collection-metadata__description .editable-input__input {
+  width: 100%;
+}
+
+.collection-add-sketch {
+  min-width: #{600 / $base-font-size}rem;
+  overflow: scroll;
+}
+
+.collection-share {
+  text-align: right;
+  position: relative;
+}
+
+.collection-share__button {
+  @extend %button;
+  display: flex;
+  align-items: center;
+}
+
+.collection-share__arrow {
+  margin-left: #{5 / $base-font-size}rem;
+}
+
+.collection-share .copyable-input {
+  padding-bottom: 0;
+}
+
+.collection__share-dropdown {
+  @extend %dropdown-open-right;
+  padding: #{20 / $base-font-size}rem;
+  width: #{350 / $base-font-size}rem;
+}
+
+.collection-metadata__add-button {
+  @extend %button;
+  flex-grow: 0;
+}
+
+.collection-table-wrapper {
+  width: #{1012 / $base-font-size}rem;
+  margin: 0 auto;
+  flex: 1;
+  @include themify() {
+    border: 1px solid getThemifyVariable('modal-border-color');
+  }
+}
+
+[data-has-items=false] .collection-table-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.collection-empty-message {
+  text-align: center;
+  font-size: #{16 / $base-font-size}rem;
+}
+
+.collection-row__action-column {
+  width: #{60 / $base-font-size}rem;
+  position: relative;
+}
+
+.collection-row__remove-button {
+  display: inline-block;
+  width:#{35 / $base-font-size}rem;
+  height:#{35 / $base-font-size}rem;
+  @include icon();
+  @include themify() {
+    // icon graphic
+    polygon {
+      fill: getThemifyVariable('table-button-color');
+    }
+
+    // icon background circle
+    path {
+      fill: getThemifyVariable('table-button-background-color');
+    }
+
+    & svg {
+      width:#{35 / $base-font-size}rem;
+      height:#{35 / $base-font-size}rem;
+    }
+
+    &:hover,
+    &:focus {
+      polygon {
+        fill: getThemifyVariable('table-button-hover-color');
+      }
+
+      path {
+        fill: getThemifyVariable('table-button-background-hover-color');
+      }
+    }
+  }
+}
diff --git a/client/styles/components/_dashboard-header.scss b/client/styles/components/_dashboard-header.scss
new file mode 100644
index 00000000..a42a510c
--- /dev/null
+++ b/client/styles/components/_dashboard-header.scss
@@ -0,0 +1,90 @@
+.dashboard-header {
+  padding: #{24 / $base-font-size}rem #{66 / $base-font-size}rem;
+  position: relative;
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction:column;
+}
+
+.dashboard-header__header {
+  max-width: #{1012 / $base-font-size}rem;
+  margin: 0 auto;
+  width: 100%;
+}
+
+.dashboard-header--no-vertical-padding {
+  padding: 0 66px;
+}
+
+.dashboard-header--no-vertical-padding {
+  padding: 0 66px;
+}
+
+.dashboard-header__switcher {
+  flex: 1;
+}
+
+.dashboard-header__tabs {
+  display: flex;
+  padding-top: #{24 / $base-font-size}rem;
+  
+  @include themify() {
+    border-bottom: 1px solid getThemifyVariable('inactive-text-color');
+  }
+}
+
+.dashboard-header__tab {
+  @include themify() {
+    color: getThemifyVariable('inactive-text-color');
+    border-bottom: #{4 / $base-font-size}rem solid transparent;
+
+    padding: 0;
+    margin-right: #{26 / $base-font-size}rem;
+
+    &:hover, &:focus, &.dashboard-header__tab--selected {
+      color: getThemifyVariable('primary-text-color');
+      border-bottom-color: getThemifyVariable('nav-hover-color');
+      cursor: pointer; 
+    }
+  }
+
+  font-size: #{12 / $base-font-size}rem;
+}
+
+.dashboard-header__tab--selected {
+  cursor: auto;
+}
+
+.dashboard-header__tab a {
+  color: inherit;
+}
+
+.dashboard-header__tab__title {
+  margin: 0;
+  padding: 0;
+}
+
+.dashboard-header__tab__title > * {
+  display: inline-block;
+  padding: 0 #{5 /$base-font-size}rem #{5 /$base-font-size}rem;
+}
+
+.dashboard-header__nav {
+}
+
+.dashboard-header__actions {
+  display: flex;
+  align-items: center;
+  padding: #{24 / $base-font-size}rem 0;
+  justify-content: space-between;
+}
+
+.dashboard-header__actions > *:not(:first-child) {
+  margin-left: #{15 / $base-font-size}rem;
+}
+
+.dashboard__action-button {
+  flex-grow: 0;
+  @extend %button;
+}
diff --git a/client/styles/components/_editable-input.scss b/client/styles/components/_editable-input.scss
new file mode 100644
index 00000000..b649c333
--- /dev/null
+++ b/client/styles/components/_editable-input.scss
@@ -0,0 +1,53 @@
+.editable-input {
+  height: 70%;
+  display: flex;
+  align-items: center;
+}
+
+.editable-input__label {
+  display: flex;
+
+  @include themify() {
+    color: getThemifyVariable('inactive-text-color');
+    &:hover {
+    color: getThemifyVariable('primary-text-color');
+      & .editable-input__icon path {
+        fill: getThemifyVariable('primary-text-color');
+      }
+    }
+  }
+  cursor: pointer;
+  line-height: #{18 / $base-font-size}rem;
+
+  font-size: unset;
+  font-weight: unset;
+}
+
+.editable-input__icon svg {
+  width: 1.5rem;
+  height: 1.5rem;
+
+  @include themify() {
+    path {
+      fill: getThemifyVariable('inactive-text-color');
+    }
+  }
+}
+
+.editable-input:hover {
+  @include themify() {
+    .editable-input__icon path {
+      fill: getThemifyVariable('primary-text-color');
+    }
+  }
+}
+
+.editable-input--is-not-editing .editable-input__input,
+.editable-input--is-editing .editable-input__label {
+  display: none;
+}
+
+.editable-input--is-editing .editable-input__input,
+.editable-input--is-not-editing .editable-input__label {
+  display: block;
+}
diff --git a/client/styles/components/_form-container.scss b/client/styles/components/_form-container.scss
index 225dc155..a2e6726d 100644
--- a/client/styles/components/_form-container.scss
+++ b/client/styles/components/_form-container.scss
@@ -6,6 +6,14 @@
   align-items: center;
 }
 
+.form-container--align-left {
+  text-align: left;
+}
+
+.form-container--align-top {
+  height: unset;
+}
+
 .form-container__header {
 	width: 100%;
 	padding: #{15 / $base-font-size}rem #{34 / $base-font-size}rem;
@@ -21,9 +29,21 @@
 	align-items: center;
 }
 
+.form-container--align-left .form-container__content {
+  align-items: left;
+}
+
 .form-container__title {
 	font-weight: normal;
-	color: $form-title-color;
+	@include themify() {
+    color: getThemifyVariable('form-title-color')
+  }
+}
+
+.form-container__context {
+  @include themify() {
+    color: getThemifyVariable('secondary-text-color')
+  }
 }
 
 .form-container__divider {
@@ -31,9 +51,9 @@
 }
 
 .form-container__logo-button {
-  @extend %none-themify-icon;
+  @include icon();
 }
 
 .form-container__exit-button {
-  @extend %none-themify-icon-with-hover;
+	@include icon();
 }
diff --git a/client/styles/components/_forms.scss b/client/styles/components/_forms.scss
index 342a8c80..8bd4f055 100644
--- a/client/styles/components/_forms.scss
+++ b/client/styles/components/_forms.scss
@@ -5,10 +5,15 @@
   font-size: #{9 / $base-font-size}rem;
   text-align: left;
   @include themify() {
-    color: getThemifyVariable('error-color')
+    color: getThemifyVariable('error-color');
   }
 }
 
+.form--inline {
+  display: flex;
+  align-items: center;
+}
+
 .form__cancel-button {
   margin-top: #{10 / $base-font-size}rem;
   font-size: #{12 / $base-font-size}rem;
@@ -17,22 +22,48 @@
 .form__navigation-options {
   margin-top: #{16 / $base-font-size}rem;
   font-size: #{12 / $base-font-size}rem;
-  color: $form-navigation-options-color;
+  @include themify() {
+    color: getThemifyVariable('form-navigation-options-color');
+  }
+}
+
+.form__legend{
+  font-size: #{21 / $base-font-size}rem;
+  font-weight: bold;
 }
 
 .form__label {
-  color: $secondary-form-title-color;
   font-size: #{12 / $base-font-size}rem;
   margin-top: #{25 / $base-font-size}rem;
   margin-bottom: #{7 / $base-font-size}rem;
   display: block;
+  @include themify() {
+    color: getThemifyVariable('form-secondary-title-color');
+  }
+}
+
+.form__label--hidden {
+  @extend %hidden-element;
 }
 
 .form__input {
-  width: #{360 / $base-font-size}rem;
+  width: 100%;
+  min-width: #{360 / $base-font-size}rem;
   height: #{40 / $base-font-size}rem;
-  color: $icon-hover-color;
-  border-color: $secondary-form-title-color;
+  font-size: #{16 / $base-font-size}rem;
+  @include themify() {
+    color: getThemifyVariable('form-input-text-color');
+  }
+}
+
+.form__input-flexible-height {
+  height: auto;
+}
+
+.form__input::placeholder {
+  @include themify() {
+    color: getThemifyVariable('form-input-placeholder-text-color');
+  }
 }
 
 .form__context {
@@ -41,13 +72,26 @@
 }
 
 .form__status {
-  color: $form-navigation-options-color;
+  @include themify() {
+    color: getThemifyVariable('form-navigation-options-color');
+  }
 }
 
-.form input[type="submit"] {
-  @extend %forms-button;
+.form [type="submit"] {
+  @extend %button;
+  padding: #{8 / $base-font-size}rem #{25 / $base-font-size}rem;
+  margin: #{39 / $base-font-size}rem 0 #{24 / $base-font-size}rem 0;
 }
 
-.form input[type="submit"]:disabled {
+.form [type="submit"][disabled] {
+  cursor: not-allowed;
+}
+
+.form--inline [type="submit"] {
+  margin: 0 0 0 #{24 / $base-font-size}rem;
+}
+
+.form [type="submit"][disabled],
+.form--inline [type="submit"][disabled] {
   cursor: not-allowed;
 }
diff --git a/client/styles/components/_github-button.scss b/client/styles/components/_github-button.scss
index 385afaa9..23fe0571 100644
--- a/client/styles/components/_github-button.scss
+++ b/client/styles/components/_github-button.scss
@@ -1,28 +1,4 @@
-.github-button {
-  @include themify() {
-    @extend %button;
-    & path {
-      color: getThemifyVariable('primary-text-color');
-    }
-    &:hover path, &:active path {
-      fill: $white;
-    }
-    &:hover, &:active {
-      background-color: getThemifyVariable('secondary-text-color');
-      border-color: getThemifyVariable('secondary-text-color');
-    }
-  }
-  width: #{300 / $base-font-size}rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.github-icon {
-  margin-right: #{10 / $base-font-size}rem;
-}
-
-
+.github-button,
 .google-button {
   @include themify() {
     @extend %button;
@@ -33,16 +9,23 @@
       fill: $white;
     }
     &:hover, &:active {
-      background-color: getThemifyVariable('secondary-text-color');
-      border-color: getThemifyVariable('secondary-text-color');
+      color: getThemifyVariable('button-hover-color');
+      background-color: getThemifyVariable('button-background-hover-color');
+      border-color: getThemifyVariable('button-background-hover-color');
     }
   }
-  margin-top: #{4 / $base-font-size}rem;
+  width: #{300 / $base-font-size}rem;
   display: flex;
-  flex-direction: row;
   justify-content: center;
   align-items: center;
-  width: #{300 / $base-font-size}rem;
+
+  & + & {
+    margin-top: #{10 / $base-font-size}rem;
+  }
+}
+
+.github-icon {
+  margin-right: #{10 / $base-font-size}rem;
 }
 
 .google-icon {
diff --git a/client/styles/components/_loader.scss b/client/styles/components/_loader.scss
index ec52410a..b9f2a05c 100644
--- a/client/styles/components/_loader.scss
+++ b/client/styles/components/_loader.scss
@@ -1,9 +1,17 @@
+.loader-container {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+
 .loader {
 	width: #{80 / $base-font-size }rem;
 	height: #{80 /  $base-font-size}rem;
 
 	position: relative;
-	margin: #{100 /  $base-font-size}rem auto;
 }
 
 .loader__circle1,
diff --git a/client/styles/components/_modal.scss b/client/styles/components/_modal.scss
index 2d9393c8..752b4434 100644
--- a/client/styles/components/_modal.scss
+++ b/client/styles/components/_modal.scss
@@ -10,7 +10,7 @@
 .modal-content {
   @extend %modal;
   min-height: #{150 / $base-font-size}rem;
-  width: #{400 / $base-font-size}rem;
+  width: #{500 / $base-font-size}rem;
   padding: #{20 / $base-font-size}rem;
   .modal--reduced & {
     //min-height: #{150 / $base-font-size}rem;
@@ -32,9 +32,8 @@
   margin-bottom: #{20 / $base-font-size}rem;
 }
 
-.new-file-form, .new-file-folder {
+.new-folder-form__input-wrapper, .new-file-form__input-wrapper {
   display: flex;
-  flex-wrap: wrap;
 }
 
 .new-file-form__name-label, .new-folder-form__name-label {
@@ -43,6 +42,7 @@
 
 .new-file-form__name-input, .new-folder-form__name-input {
   margin-right: #{10 / $base-font-size}rem;
+  flex: 1;
 }
 
 .modal__divider {
diff --git a/client/styles/components/_nav.scss b/client/styles/components/_nav.scss
index 205f817d..7f5a45ac 100644
--- a/client/styles/components/_nav.scss
+++ b/client/styles/components/_nav.scss
@@ -43,7 +43,8 @@
   }
 }
 
-.nav__item:first-child {
+.nav__item:first-child,
+.nav__item--no-icon {
   padding-left: #{15 / $base-font-size}rem;
 }
 
@@ -57,6 +58,12 @@
       color: getThemifyVariable('nav-hover-color');
     }
   }
+  
+  & g, & path {
+    @include themify() {
+      fill: getThemifyVariable('nav-hover-color');
+    }
+  }
 
   .nav__item-header-triangle polygon {
     @include themify() {
@@ -66,6 +73,21 @@
 }
 
 .nav__item-header:hover {
+  @include themify() {
+    color: getThemifyVariable('nav-hover-color');
+  }
+  & g, & path {
+    @include themify() {
+      fill: getThemifyVariable('nav-hover-color');
+    }
+  }
+}
+
+.nav__item-header-triangle {
+	margin-left: #{5 / $base-font-size}rem;
+}
+
+.nav__dropdown {
   @include themify() {
       color: getThemifyVariable('nav-hover-color');
     }
@@ -87,7 +109,7 @@
   padding-right: #{20 / $base-font-size}rem;
 
   & .nav__dropdown {
-    width: #{121 / $base-font-size}rem;
+    width: #{122 / $base-font-size}rem;
   }
 }
 
@@ -159,4 +181,18 @@
       color: getThemifyVariable('button-hover-color');
     }
   }
-}
\ No newline at end of file
+}
+
+.nav__back-icon {
+  & g, & path {
+    opacity: 1;
+    @include themify() {
+      fill: getThemifyVariable('inactive-text-color');
+    }
+  }
+  margin-right: #{5 / $base-font-size}rem;
+}
+
+.nav__back-link {
+  display: flex;
+}
diff --git a/client/styles/components/_new-password.scss b/client/styles/components/_new-password.scss
index 8f81d48b..fcd3a839 100644
--- a/client/styles/components/_new-password.scss
+++ b/client/styles/components/_new-password.scss
@@ -10,6 +10,8 @@
     display: block;
     margin-top: #{40 / $base-font-size}rem;
     margin-bottom: #{80 / $base-font-size}rem;
-    color: $form-navigation-options-color;
+    @include themify() {
+      color: getThemifyVariable('form-navigation-options-color');
+    }
   }
-}
\ No newline at end of file
+}
diff --git a/client/styles/components/_overlay.scss b/client/styles/components/_overlay.scss
index 58602f5b..3e0efbad 100644
--- a/client/styles/components/_overlay.scss
+++ b/client/styles/components/_overlay.scss
@@ -1,5 +1,5 @@
 .overlay {
-  position: absolute;
+  position: fixed;
   top: 0;
   left: 0;
   right: 0;
@@ -34,11 +34,25 @@
   flex: 1 0 auto;
 }
 
+.overlay__actions {
+  display: flex;
+}
+
 .overlay__title {
   font-size: #{21 / $base-font-size}rem;
 }
 
 .overlay__close-button {
   @include icon();
-  padding: #{3 / $base-font-size}rem 0;
+  padding: #{3 / $base-font-size}rem 0 #{3 / $base-font-size}rem #{10 / $base-font-size}rem;
 }
+
+/* Fixed height overlay */
+.overlay--is-fixed-height .overlay__body {
+  height: 80vh;
+}
+
+.overlay--is-fixed-height .overlay__header {
+  flex: 0;
+}
+
diff --git a/client/styles/components/_p5-dark-codemirror-theme.scss b/client/styles/components/_p5-dark-codemirror-theme.scss
index f10cbad9..bd073941 100644
--- a/client/styles/components/_p5-dark-codemirror-theme.scss
+++ b/client/styles/components/_p5-dark-codemirror-theme.scss
@@ -14,75 +14,77 @@ $p5-dark-lightbrown: #A67F59;
 $p5-light-green: #42F48F;
 $p5-dark-black: #333;
 $p5-dark-pink: #D9328F;
-$p5-dark-gray: #A0A0A0;
-$p5-dark-lightblue: #00A1D3;
-$p5-dark-darkblue: #2D7BB6;
+$p5-dark-gray: #999999;
+$p5-dark-lightblue: #0F9DD7;
+$p5-dark-darkblue: #318094;
 $p5-dark-white: #FDFDFD;
 $p5-dark-orange: #EE9900;
 $p5-dark-lightgray: #E0D7D1;
 $p5-dark-darkgray: #666666;
 $p5-dark-green: #58a10b;
-$p5-dark-goldbrown: #b58317;
+$p5-dark-goldbrown: #b58318;
 
 $p5-dark-gutter: #f4f4f4;
 $p5-dark-number: #b5b5b5;
 $p5-dark-selected: rgba(45, 123, 182, 25);
 $p5-dark-activeline: rgb(207, 207, 207);
 
+$p5-dark-error: #df3a3d;
+
 .cm-s-p5-dark {
   background-color: $p5-dark-black;
   color: $p5-dark-white;
 }
 
-.cm-s-p5-dark .cm-comment {
+.cm-s-p5-dark span.cm-comment {
   color: $p5-dark-gray;
 }
 
-.cm-s-p5-dark .cm-def {
-  color: $p5-dark-darkblue;
-}
-
-.cm-s-p5-dark .cm-string {
-  color: $p5-dark-green;
-}
-
-.cm-s-p5-dark .cm-string-2 {
-  color: $p5-dark-orange;
-}
-
-.cm-s-p5-dark .cm-number {
-  color: $p5-dark-white;
-}
-
-.cm-s-p5-dark .cm-keyword {
-  color: $p5-dark-goldbrown;
-}
-
-.cm-s-p5-dark .cm-variable {
+.cm-s-p5-dark span.cm-def {
   color: $p5-dark-lightblue;
 }
 
-.cm-s-p5-dark .cm-variable-2 {
+.cm-s-p5-dark span.cm-string {
+  color: $p5-dark-green;
+}
+
+.cm-s-p5-dark span.cm-string-2 {
+  color: $p5-dark-orange;
+}
+
+.cm-s-p5-dark span.cm-number {
   color: $p5-dark-white;
 }
 
-.cm-s-p5-dark .cm-property {
+.cm-s-p5-dark span.cm-keyword {
+  color: $p5-dark-goldbrown;
+}
+
+.cm-s-p5-dark span.cm-variable {
+  color: $p5-dark-lightblue;
+}
+
+.cm-s-p5-dark span.cm-variable-2 {
   color: $p5-dark-white;
 }
 
-.cm-s-p5-dark .cm-atom {
+.cm-s-p5-dark span.cm-property {
+  color: $p5-dark-white;
+}
+
+.cm-s-p5-dark span.cm-atom {
   color: $p5-dark-pink;
 }
 
-.cm-s-p5-dark .cm-operator {
-  color: $p5-dark-lightbrown;
+.cm-s-p5-dark span.cm-operator {
+  color: $p5-dark-white;
 }
 
 .cm-s-p5-dark .cm-linenumber {
   color: $p5-dark-number;
 }
 
-.cm-s-p5-dark .CodeMirror-selected {
+.cm-s-p5-dark div.CodeMirror-selected {
   background-color: $p5-dark-selected;
 }
 
@@ -95,34 +97,36 @@ $p5-dark-activeline: rgb(207, 207, 207);
   border-right: 1px solid #949494;
 }
 
-.cm-s-p5-dark .cm-error {
-  color: #f00;
-}
-
-.cm-s-p5-dark .CodeMirror-matchingbracket {
+.cm-s-p5-dark span.CodeMirror-matchingbracket {
   outline: 1px solid $p5-dark-gray;
   outline-offset: 1px;
   color: $p5-dark-white !important;
 }
 
-.cm-s-p5-dark .cm-qualifier {
+.cm-s-p5-dark span.cm-qualifier {
   color: $p5-dark-lightblue;
 }
 
-.cm-s-p5-dark .cm-tag {
+.cm-s-p5-dark span.cm-tag {
   color: $p5-dark-pink;
 }
 
-.cm-s-p5-dark .cm-builtin {
-  color: $p5-dark-lightblue;
+.cm-s-p5-dark span.cm-error {
+  color: $p5-dark-error;
 }
 
-.cm-s-p5-dark .cm-attribute {
+.cm-s-p5-dark span.cm-builtin {
+  color: $p5-dark-lightblue;
+  font-weight: bold;
+}
+
+.cm-s-p5-dark span.cm-attribute {
   color: $p5-dark-lightblue;
 }
 
 .cm-s-p5-dark .cm-p5-function {
-  color: $p5-dark-darkblue;
+  color: $p5-dark-lightblue;
+  font-weight: bold !important;
 }
 
 .cm-s-p5-dark .cm-p5-variable {
diff --git a/client/styles/components/_quick-add.scss b/client/styles/components/_quick-add.scss
new file mode 100644
index 00000000..8070e3c3
--- /dev/null
+++ b/client/styles/components/_quick-add.scss
@@ -0,0 +1,127 @@
+.quick-add-wrapper {
+  min-width: #{600 / $base-font-size}rem;
+}
+
+.quick-add {
+  width: auto;
+  padding: #{24 / $base-font-size}rem;
+}
+
+.quick-add__item {
+  display: flex;
+  align-items: center;
+  height: #{64 / $base-font-size}rem;
+  padding-right: #{24 / $base-font-size}rem;
+
+  button, a {
+    @include themify() {
+      color: getThemifyVariable('primary-text-color');
+    }
+  }
+}
+
+.quick-add__item:nth-child(odd) {
+  @include themify() {
+    background: getThemifyVariable('table-row-stripe-color');
+  }
+}
+
+.quick-add__item-toggle {
+  display: flex;
+  align-items: center;
+}
+
+.quick-add__item-name {
+  flex: 1;
+}
+
+.quick-add__icon {
+  display: inline-block;
+  margin-right:#{15 / $base-font-size}rem;
+  width:#{35 / $base-font-size}rem;
+  height:#{35 / $base-font-size}rem;
+  @include icon();
+  @include themify() {
+    // icon graphic
+    polygon {
+      fill: getThemifyVariable('table-button-color');
+    }
+
+    // icon background circle
+    path {
+      fill: getThemifyVariable('table-button-background-color');
+    }
+
+    & svg {
+      width:#{35 / $base-font-size}rem;
+      height:#{35 / $base-font-size}rem;
+    }
+  }
+}
+
+.quick-add__icon > * {
+  display: none;
+}
+
+.quick-add__in-icon {
+  display: inline-block;
+}
+
+.quick-add__icon--in-collection .quick-add__in-icon svg {
+  @include themify() {
+    // icon graphic
+    polygon {
+      fill: getThemifyVariable('table-button-active-color');
+    }
+
+    // icon background circle
+    path {
+      fill: getThemifyVariable('table-button-background-active-color');
+    }
+  }
+}
+
+.quick-add__add-icon {
+  transform: rotate(45deg);
+}
+
+.quick-add__item:hover,
+.quick-add__item-toggle:hover,
+.quick-add__item-toggle:focus {
+  cursor: pointer;
+  @include themify() {
+    .quick-add__icon {
+      polygon {
+        fill: getThemifyVariable('table-button-hover-color');
+      }
+
+      path {
+        fill: getThemifyVariable('table-button-background-hover-color');
+      }
+    }
+  }
+
+  & .quick-add__in-icon {
+    display: none;
+  }
+
+  & .quick-add__icon--in-collection {
+    .quick-add__remove-icon {
+      display: inline-block;
+    }
+
+    .quick-add__add-icon {
+      display: none;
+    }
+  }
+
+  & .quick-add__icon--not-in-collection {
+    .quick-add__add-icon {
+      display: inline-block;
+    }
+
+    .quick-add__remove-icon {
+      display: none;
+    }
+  }
+}
diff --git a/client/styles/components/_reset-password.scss b/client/styles/components/_reset-password.scss
index f0bb7608..47109a3a 100644
--- a/client/styles/components/_reset-password.scss
+++ b/client/styles/components/_reset-password.scss
@@ -4,7 +4,9 @@
   text-align: left;
   font-size: #{12 / $base-font-size}rem;
   margin-top: #{10 / $base-font-size}rem;
-  color: $form-navigation-options-color;
+  @include themify() {
+    color: getThemifyVariable('form-navigation-options-color');
+  }
   padding-right: #{30 / $base-font-size}rem;
   padding-left: #{39 / $base-font-size}rem;
   .reset-password--submitted & {
diff --git a/client/styles/components/_searchbar.scss b/client/styles/components/_searchbar.scss
index 398b1f99..042f3e7e 100644
--- a/client/styles/components/_searchbar.scss
+++ b/client/styles/components/_searchbar.scss
@@ -1,9 +1,6 @@
 .searchbar {
-  position: absolute;
+  position: relative;
   display: flex;
-  padding-left: #{17 / $base-font-size}rem;
-  right: #{50 / $base-font-size}rem;
-  top: #{14 / $base-font-size}rem;
 }
 
 .searchbar__input {
@@ -18,17 +15,29 @@
   }
 }
 
-.searchbar__button {
+button[type="submit"].searchbar__button {
+  background-color: unset;
   width: #{31 / $base-font-size}rem;
   height: #{36 / $base-font-size}rem;
   position: absolute;
   display: flex;
   justify-content: center;
   align-items: center;
+  padding: 0;
+  border: 0;
   border-right: solid 1px;
   @include themify() {
     border-right-color: getThemifyVariable('input-border-color');
   }
+  &:enabled:hover {
+    background-color: unset;
+    @include themify() {
+      border-right-color: getThemifyVariable('input-border-color');
+    }
+    & g {
+      fill: unset;
+    }
+  }
 }
 
 .searchbar__icon {
@@ -51,7 +60,7 @@
   align-self: center;
   position: absolute;
   padding: #{3 / $base-font-size}rem #{4 / $base-font-size}rem;
-  left: #{216 / $base-font-size}rem;;
+  right: #{7 / $base-font-size}rem;
   @include themify() {
     color: getThemifyVariable('primary-text-color');
     background-color: getThemifyVariable('search-clear-background-color');
@@ -61,3 +70,7 @@
     }
   }
 }
+
+.searchbar--is-empty .searchbar__clear-button {
+  display: none;
+}
diff --git a/client/styles/components/_sketch-list.scss b/client/styles/components/_sketch-list.scss
index 41fee261..87162305 100644
--- a/client/styles/components/_sketch-list.scss
+++ b/client/styles/components/_sketch-list.scss
@@ -1,14 +1,12 @@
 .sketches-table-container {
   overflow-y: auto;
   max-width: 100%;
-  width: #{1000 / $base-font-size}rem;
-  height: #{628 / $base-font-size}rem;
-  // min-height: #{400 / $base-font-size}rem;
+  min-height: 100%;
 }
 
 .sketches-table {
   width: 100%;
-  padding: #{10 / $base-font-size}rem #{20 / $base-font-size}rem;
+  
   max-height: 100%;
   border-spacing: 0;
   & .sketch-list__dropdown-column {
@@ -19,6 +17,11 @@
 
 .sketches-table thead th {
   height: #{32 / $base-font-size}rem;
+  position: sticky;
+  top: 0;
+  @include themify() {
+    background-color: getThemifyVariable('background-color');
+  }
 }
 
 .sketch-list__sort-button {
@@ -58,7 +61,7 @@
 
 .sketches-table__row:nth-child(odd) {
   @include themify() {
-    background: getThemifyVariable('console-header-background-color');
+    background: getThemifyVariable('table-row-stripe-color');
   }
 }
 
@@ -66,6 +69,10 @@
   padding-left: #{12 / $base-font-size}rem;
 }
 
+.sketches-table__row > td {
+  padding-left: #{8 / $base-font-size}rem;
+}
+
 .sketches-table__row a {
   @include themify() {
     color: getThemifyVariable('primary-text-color');
@@ -83,6 +90,7 @@
   font-weight: normal;
 }
 
+
 .sketch-list__dropdown-button {
   width:#{25 / $base-font-size}rem;
   height:#{25 / $base-font-size}rem;
@@ -93,17 +101,23 @@
   }
 }
 
+.sketches-table__name {
+  display: flex;
+  align-items: center;
+}
+
+.sketches-table__icon-cell {
+  width: #{35 / $base-font-size}rem;
+}
+
 .sketch-list__action-dialogue {
   @extend %dropdown-open-right;
   top: 63%;
   right: calc(100% - 26px);
 }
 
-.sketch-list__action-option {
-
-}
-
 .sketches-table__empty {
   text-align: center;
   font-size: #{16 / $base-font-size}rem;
+  padding: #{42 / $base-font-size}rem 0;
 }
diff --git a/client/styles/components/_tabs.scss b/client/styles/components/_tabs.scss
new file mode 100644
index 00000000..444b7186
--- /dev/null
+++ b/client/styles/components/_tabs.scss
@@ -0,0 +1,69 @@
+.tabs__titles {
+  display: flex;
+  flex-wrap: wrap;
+  padding-bottom: #{0.1 / $base-font-size}rem;
+  @include themify() {
+    border-bottom: 1px solid getThemifyVariable('button-border-color');
+  }
+}
+
+.tabs__title {
+  @include themify() {
+    color: getThemifyVariable('inactive-text-color');
+    &:hover, &:focus{
+      color: getThemifyVariable('primary-text-color');
+      cursor: pointer; 
+    }
+    &:focus  {
+      color: getThemifyVariable('primary-text-color');
+      cursor: pointer; 
+    }
+  }
+  font-size: #{12 / $base-font-size}rem;
+  height: #{20 / $base-font-size}rem;
+  width: 100%;
+  margin: 0;
+  padding: 0 #{5 /$base-font-size}rem;
+}
+
+.react-tabs__tab--selected {
+  @include themify() {
+    border-bottom: #{4 / $base-font-size}rem solid getThemifyVariable('button-background-hover-color');
+  }
+}
+
+.react-tabs__tab--selected .tabs__title {
+  @include themify() {
+    color: getThemifyVariable('primary-text-color');
+  }
+}
+
+.react-tabs__tab {
+  text-align: center;
+  color: black;
+  display: flex;
+  align-items: center;
+  border-bottom: #{4 / $base-font-size}rem solid transparent;
+  & + & {
+    margin-left: #{45 / $base-font-size}rem;
+  }
+}
+
+.tabs__title {
+  @include themify() {
+    color: getThemifyVariable('inactive-text-color');
+    &:hover, &:focus{
+      color: getThemifyVariable('primary-text-color');
+      cursor: pointer; 
+    }
+    &:focus  {
+      color: getThemifyVariable('primary-text-color');
+      cursor: pointer; 
+    }
+  }
+  font-size: #{12 / $base-font-size}rem;
+  height: #{20 / $base-font-size}rem;
+  width: 100%;
+  margin: 0;
+  padding: 0 #{5 /$base-font-size}rem;
+}
diff --git a/client/styles/layout/_dashboard.scss b/client/styles/layout/_dashboard.scss
new file mode 100644
index 00000000..97e86737
--- /dev/null
+++ b/client/styles/layout/_dashboard.scss
@@ -0,0 +1,24 @@
+.dashboard {
+	display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  @include themify() {
+    color: getThemifyVariable('primary-text-color');
+    background-color: getThemifyVariable('background-color');
+  }
+  height: 100%;
+}
+
+.dashboard-content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
+  max-width: #{1012 / $base-font-size}rem;
+  margin: 0 auto;
+  width: 100%;
+
+  @include themify() {
+    border: 1px solid getThemifyVariable('modal-border-color');
+  }
+}
diff --git a/client/styles/layout/_user.scss b/client/styles/layout/_user.scss
new file mode 100644
index 00000000..040b4cc0
--- /dev/null
+++ b/client/styles/layout/_user.scss
@@ -0,0 +1,22 @@
+.user {
+	display: flex;
+  flex-direction: column;
+  height: 100%;
+  flex-wrap: wrap;
+  @include themify() {
+    color: getThemifyVariable('primary-text-color');
+    background-color: getThemifyVariable('background-color');
+  }
+}
+
+.login,
+.signup,
+.reset-password-container,
+.new-password-container,
+.email-verification {
+  height: 100%;
+  @include themify() {
+    color: getThemifyVariable('primary-text-color');
+    background-color: getThemifyVariable('background-color');
+  }
+}
\ No newline at end of file
diff --git a/client/styles/main.scss b/client/styles/main.scss
index 7bcca6dd..00289b1a 100644
--- a/client/styles/main.scss
+++ b/client/styles/main.scss
@@ -14,6 +14,8 @@
 @import 'components/p5-light-codemirror-theme';
 @import 'components/p5-dark-codemirror-theme';
 @import 'components/p5-contrast-codemirror-theme';
+@import 'components/account';
+@import 'components/api-key';
 @import 'components/editor';
 @import 'components/nav';
 @import 'components/preview-nav';
@@ -39,11 +41,21 @@
 @import 'components/help-modal';
 @import 'components/share';
 @import 'components/asset-list';
+@import 'components/asset-size';
 @import 'components/keyboard-shortcuts';
 @import 'components/copyable-input';
 @import 'components/feedback';
 @import 'components/loader';
 @import 'components/uploader';
+@import 'components/tabs';
+@import 'components/dashboard-header';
+@import 'components/editable-input';
+@import 'components/collection';
+@import 'components/collection-create';
+@import 'components/collection-popover';
+@import 'components/quick-add';
 
+@import 'layout/dashboard';
 @import 'layout/ide';
 @import 'layout/fullscreen';
+@import 'layout/user';
diff --git a/client/utils/auth.js b/client/utils/auth.js
new file mode 100644
index 00000000..26ba9e07
--- /dev/null
+++ b/client/utils/auth.js
@@ -0,0 +1,29 @@
+import { connectedRouterRedirect } from 'redux-auth-wrapper/history3/redirect';
+import locationHelperBuilder from 'redux-auth-wrapper/history3/locationHelper';
+
+const locationHelper = locationHelperBuilder({});
+
+export const userIsAuthenticated = connectedRouterRedirect({
+  // The url to redirect user to if they fail
+  redirectPath: '/login',
+  // Determine if the user is authenticated or not
+  authenticatedSelector: state => state.user.authenticated === true,
+  // A nice display name for this check
+  wrapperDisplayName: 'UserIsAuthenticated'
+});
+
+export const userIsNotAuthenticated = connectedRouterRedirect({
+  redirectPath: (state, ownProps) => locationHelper.getRedirectQueryParam(ownProps) || '/',
+  allowRedirectBack: false,
+  authenticatedSelector: state => state.user.authenticated === false,
+  wrapperDisplayName: 'UserIsNotAuthenticated'
+});
+
+export const userIsAuthorized = connectedRouterRedirect({
+  redirectPath: '/',
+  allowRedirectBack: false,
+  authenticatedSelector: (state, ownProps) => {
+    const { username } = ownProps.params;
+    return state.user.username === username;
+  },
+});
diff --git a/client/utils/generateRandomName.js b/client/utils/generateRandomName.js
new file mode 100644
index 00000000..101128d7
--- /dev/null
+++ b/client/utils/generateRandomName.js
@@ -0,0 +1,12 @@
+import friendlyWords from 'friendly-words';
+
+export function generateProjectName() {
+  const adj = friendlyWords.predicates[Math.floor(Math.random() * friendlyWords.predicates.length)];
+  const obj = friendlyWords.objects[Math.floor(Math.random() * friendlyWords.objects.length)];
+  return `${adj} ${obj}`;
+}
+
+export function generateCollectionName() {
+  const adj = friendlyWords.predicates[Math.floor(Math.random() * friendlyWords.predicates.length)];
+  return `My ${adj} collection`;
+}
diff --git a/developer_docs/README.md b/developer_docs/README.md
index e4cf46d7..d4245b04 100644
--- a/developer_docs/README.md
+++ b/developer_docs/README.md
@@ -1,7 +1,7 @@
 This folder contains documents intended for developers of the p5.js Web Editor. 
 
 ## List of Documents
-* [Getting Started](getting_started.md) - A place to get started!
+* [Contribution Guide](https://github.com/processing/p5.js-web-editor/blob/master/.github/CONTRIBUTING.md) - A place to get started!
 * [Installation](installation.md) - A guide for setting up your development environment
 * [Development](development.md) - A guide for adding code to the web editor
 * [Preparing a pull-request](preparing_a_pull_request.md) - Instructions for how to make a pull-request
diff --git a/developer_docs/installation.md b/developer_docs/installation.md
index 88dd7c23..047f21d1 100644
--- a/developer_docs/installation.md
+++ b/developer_docs/installation.md
@@ -6,7 +6,7 @@ Follow these instructions to set up your development environment, which you need
 
 _Note_: The installation steps assume you are using a Unix-like shell. If you are using Windows, you will need to use `copy` instead of `cp`.
 
-1. Install [node.js](https://nodejs.org/download/release/v11.15.0/) version 11.15.0 which also automatically installs the [npm](https://www.npmjs.org) package manager.
+1. Install Node.js. The recommended way is to Node through [nvm](https://github.com/nvm-sh/nvm). You can also install [node.js](https://nodejs.org/download/release/v12.16.1/) version 12.16.1 directly from the Node.js website.
 2. [Fork](https://help.github.com/articles/fork-a-repo) the [p5.js Web Editor repository](https://github.com/processing/p5.js-web-editor) into your own GitHub account.
 3. [Clone](https://help.github.com/articles/cloning-a-repository/) your new fork of the repository from GitHub onto your local computer.
 
@@ -14,22 +14,23 @@ _Note_: The installation steps assume you are using a Unix-like shell. If you ar
    $ git clone https://github.com/YOUR_USERNAME/p5.js-web-editor.git
    ```
 
-4. Navigate into the project folder and install all its necessary dependencies with npm.
+4. If you are using nvm, run `$ nvm use` to set your Node version to 12.16.1
+5. Navigate into the project folder and install all its necessary dependencies with npm.
 
    ```
    $ cd p5.js-web-editor
    $ npm install
    ```
-5. Install MongoDB and make sure it is running
+6. Install MongoDB and make sure it is running
    * For Mac OSX with [homebrew](http://brew.sh/): `brew tap mongodb/brew` then `brew install mongodb-community` and finally start the server with `brew services start mongodb-community` or you can visit the installation guide here [Installation Guide For MacOS](https://docs.mongodb.com/manual/tutorial/install-mongodb-on-os-x/)
    * For Windows and Linux: [MongoDB Installation](https://docs.mongodb.com/manual/installation/)
-6. `$ cp .env.example .env`
-7. (Optional) Update `.env` with necessary keys to enable certain app behavoirs, i.e. add Github ID and Github Secret if you want to be able to log in with Github.
-8. `$ npm run fetch-examples` - this downloads the example sketches into a user called 'p5'
-9. `$ npm start`
-10. Navigate to [http://localhost:8000](http://localhost:8000) in your browser
-11. Install the [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)
-12. Open and close the Redux DevTools using `ctrl+h`, and move them with `ctrl+w`
+7. `$ cp .env.example .env`
+8. (Optional) Update `.env` with necessary keys to enable certain app behavoirs, i.e. add Github ID and Github Secret if you want to be able to log in with Github.
+9. `$ npm run fetch-examples` - this downloads the example sketches into a user called 'p5'
+10. `$ npm start`
+11. Navigate to [http://localhost:8000](http://localhost:8000) in your browser
+12. Install the [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)
+13. Open and close the Redux DevTools using `ctrl+h`, and move them with `ctrl+w`
 
 ## Docker Installation
 
diff --git a/developer_docs/public_api.md b/developer_docs/public_api.md
new file mode 100644
index 00000000..07a1fafa
--- /dev/null
+++ b/developer_docs/public_api.md
@@ -0,0 +1,219 @@
+# Public API
+
+This API provides a way to programmatically import data into the p5.js Web Editor.
+
+# Authentication
+
+Access to the API is available via a Personal Access Token, linked to an existing editor user account. Tokens can be created and deleted via logged-in user’s Settings page.
+
+When contacting the API, the username and token must be sent with every request using basic auth.
+
+This involved sending the base64 encoded `${username}:${personalAccessToken}` in the `Authorization` header. For example:
+  `Authorization: Basic cDU6YWJjMTIzYWJj`
+
+# API Access
+
+- All requests send and receive `Content-Type: application/json` unless otherwise stated
+
+# Versioning
+
+The API is versioned and this version is indicated in the root URL path e.g. version 1 of the API can be found at `http://editor.p5js.org/api/v1`.
+
+You must provide the version number when accessing the API.
+
+| Version | Release date |
+| ------- | ------------ |
+| v1      | Unreleased   |
+
+# Models
+
+The API accepts and returns the following model objects, as JSON.
+
+## Sketch
+
+| Name  |       Type        |                                     Description                                      |
+| ----- | ----------------- | ------------------------------------------------------------------------------------ |
+| name  | String            | The sketch’s title                                                                   |
+| files | DirectoryContents | The files and directories in this sketch. See `DirectoryContents` for the structure. |
+| slug  | String            | A path that can be used to access the sketch                                         |
+
+
+    {
+      "id": String, // opaque ID
+      "name: String,
+      "files": DirectoryContents,
+      "slug": String // optional
+    }
+
+### Validations
+
+- `files` must have exactly one top-level file with the `.html` extension. If none is provided, then a default `index.html` and associated `style.css` will be automatically created.
+- `slug` must be an URL-safe string
+- `slug` must be unique across all user's sketches
+
+## DirectoryContents
+
+A map of filenames to `File` or `Directory`. The key of each item is used as the filename. Using a map ensures that filenames are unique in the directory.
+
+
+    {
+      [String]:  File | Directory
+    }
+
+
+    {
+      "sketch.js": { "content": "var answer = 42;" },
+      "index.html" { "content": "..." }
+    }
+
+## DirectFile
+
+This file is editable in the Editor UI and stored in the Editor's database.
+
+| Name    | Type         | Description                                |
+| ------- | ------------ | ------------------------------------------ |
+| content | UTF-8 String | The contents of the file as a UTF-8 string |
+
+    {
+      "content": String
+    }
+
+## ReferencedFile
+
+This file is hosted elsewhere on the Internet. It appears in the Editor's listing and can be referenced using a proxy URL in the Editor.
+
+
+| Name | Type |                   Description                   |
+| ---- | ---- | ----------------------------------------------- |
+| url  | URL  | A valid URL pointing to a file hosted elsewhere |
+
+    {
+      "url": URL
+    }
+
+## File
+
+A `File` is either a `DirectFile` or `ReferencedFile`. The API supports both everywhere.
+
+## Directory
+
+| Name  | Type              | Description                     |
+| ----- | ----------------- | ------------------------------- |
+| files | DirectoryContents | A map of the directory contents |
+
+    {
+      "files": DirectoryContents
+    }
+
+# API endpoints
+
+## Sketches
+
+## `GET /:user/sketches`
+
+List a user’s sketches.
+
+This will not return the files within the sketch, just the sketch metadata.
+
+### Request format
+No body.
+
+### Response format
+    {
+      "sketches": Array<Sketch>
+    }
+
+### Example
+
+    GET /p5/sketches
+    
+    {
+      "sketches": [
+        { "id": "H1PLJg8_", "name": "My Lovely Sketch" },
+        { "id": "Bkhf0APpg", "name":  "My Lovely Sketch 2" }
+      ]
+    }
+
+
+## `POST /:user/sketches`
+
+Create a new sketch.
+
+A sketch must contain at least one file with the `.html` extension. If none if provided in the payload, a default `index.html` and linked `style.css` file will be created automatically.
+
+### Request format
+See `Sketch` in Models above.
+
+### Response format
+    {
+      "id": String
+    }
+
+### Example
+
+    POST /p5/sketches
+    
+    {
+      "name": "My Lovely Sketch",
+      "files": {
+        "index.html": { "content": "<DOCTYPE html!><body>Hello!</body></html>" },
+        "sketch.js": { "content": "var useless = true;" }
+      }
+    }
+
+`files` can be nested to represent a folder structure. For example, this will create an empty “data” directory in the sketch:
+
+
+    POST /p5/sketches
+    
+    {
+      "name": "My Lovely Sketch 2",
+      "files": [
+        {
+           "name": "assets",
+           "type": "",
+           "files": {
+            "index.html": { "content": "<DOCTYPE html!><body>Hello!</body></html>" },
+            "data": {
+              "files": {}
+            }
+          }
+       }
+    }
+
+### Responses
+
+|        HTTP code         |                               Body                                |
+| ------------------------ | ----------------------------------------------------------------- |
+| 201 Created              | id of sketch                                                      |
+| 422 Unprocessable Entity | file validation failed, unsupported filetype, slug already exists |
+
+
+### Examples
+
+    201 CREATED
+    
+    {
+      "id": "Ckhf0APpg"
+    }
+
+## `DELETE /:user/sketches/:id`
+
+Delete a sketch and all it’s associated files.
+
+### Request format
+No body
+
+### Response format
+No body
+
+### Example
+
+    DELETE /p5/sketches/Ckhf0APpg
+
+### Responses
+
+| HTTP code     | Description             |
+| ------------- | ----------------------- |
+| 200 OK        | Sketch has been deleted |
+| 404 Not Found | Sketch does not exist   |
diff --git a/developer_docs/public_api_proposed.md b/developer_docs/public_api_proposed.md
new file mode 100644
index 00000000..b5531364
--- /dev/null
+++ b/developer_docs/public_api_proposed.md
@@ -0,0 +1,238 @@
+# Proposed Public API extensions
+
+This describes proposed extensions to the Public API. None of these extensions are confirmed, but are recorded here for reference and discussion. 
+
+Refer to [Public API](./public_api.md) for the current version of the API.
+
+# Authentication
+
+- Support for sending tokens can via the `Authorization: Bearer {your_access_token}` HTTP header instead of just Basic Auth
+
+# API Access
+
+- API writes are rate-limited to X per second, per access token
+- Operations are transactional, e.g. if a file is somehow invalid, the sketch won’t be left partially uploaded
+
+# Proposed API endpoints
+
+## Sketches
+
+## `GET /:user/sketches/:id`
+
+Fetch a sketch.
+
+### Request format
+No body.
+
+### Response format
+Returns `Sketch`.
+
+### Example
+
+    GET /p5/sketches/Ckhf0APpg
+    
+    {
+      "name": "Another title",
+      "slug": "example-1",
+      "files": {
+        "index.html": { "<DOCTYPE html!><body>Hallo!</body></html>" },
+        "something.js": { "var uselessness = 12;" }
+      }
+    }
+
+### Responses
+
+| HTTP code     | Description                  |
+| ------------- | ---------------------------- |
+| 200 OK        | Returns ID of created sketch |
+| 404 Not Found | Sketch does not exist        |
+
+
+## `PUT /:user/sketches/:id`
+
+Replace the sketch with an entirely new one, maintaining the same ID. Any existing files will be deleted before the new ones are created.
+
+### Request format
+See `Sketch` in Models above.
+
+### Response format
+No body.
+
+### Example
+
+    PUT /p5/sketches/Ckhf0APpg
+    
+    {
+      "name": "Another title",
+      "files": {
+        "index.html": { "content": "<DOCTYPE html!><body>Hallo!</body></html>" },
+        "something.js": { "content": "var uselessness = 12;"
+      }
+    }
+
+### Responses
+
+| HTTP code                | Description                                  |
+| ------------------------ | -------------------------------------------- |
+| 200 OK                   |                                              |
+| 404 Not Found            | Sketch does not exist                        |
+| 422 Unprocessable Entity | file validation failed, unsupported filetype |
+
+
+## `PATCH /:user/sketches/:id`
+
+Update the sketch whilst maintaining existing data:
+
+- Change the name
+- Update file’s contents or add new files
+
+### Request format
+See `Sketch` in Models above.
+
+### Response format
+No body.
+
+### Example
+Change the name of the sketch
+
+    PATCH /p5/sketches/Ckhf0APpg
+    
+    {
+      "name": "My Very Lovely Sketch"
+    }
+
+### Example
+Add a file to a sketch, or replace an existing file.
+
+    PATCH /p5/sketches/Ckhf0APpg
+    
+    {
+      "files": {
+        "index.html": { "content": "My new content" }, // contents will be replaced
+        "new-file.js": { "content": "some new stuff" } // new file will be added
+      }
+    }
+
+### Responses
+
+| HTTP code                | Description               |
+| ------------------------ | ------------------------- |
+| 200 OK                   | Change were made          |
+| 404 Not Found            | Sketch does not exist     |
+| 422 Unprocessable Entity | Validation error of files |
+
+
+## Operating on files within a sketch
+
+Files within a sketch can be individually accessed via their `path` e.g. `data/something.json`.
+
+## `GET /:user/sketches/:id/files/:path`
+
+Fetch the contents of a file.
+
+### Request format
+No body.
+
+### Response format
+Returns file contents.
+
+### Example
+
+    GET /p5/sketches/Ckhf0APpg/files/assets/something.js
+    
+    Content-Type: application/javascript
+    
+    var uselessness = 12;
+
+### Responses
+
+| HTTP code     | Description                                                              |
+| ------------- | ------------------------------------------------------------------------ |
+| 200 OK        | Returns body of the file with the content-type set by the file extension |
+| 404 Not Found | File does not exist                                                      |
+
+
+## `PATCH /:user/sketches/:id/files/:path` 
+
+Update the name or contents a file or directory.
+
+### Request format
+See `File` and `Directory` above.
+
+### Response format
+No body.
+
+### Example: Change file name
+
+    PATCH /p5/sketches/Ckhf0APpg/files/assets/something.js
+    
+    {
+      "name": "new-name.js"
+    }
+
+File `assets/something.js` → `assets/new-name.js`.
+
+### Example: Change file contents
+
+    PATCH /p5/sketches/Ckhf0APpg/files/assets/something.js
+    
+    {
+      "content": "var answer = 24;"
+    }
+
+Content of `assets/something.js` will be replaced with `var answer = 24;`.
+
+### Example: Create directory
+
+    PATCH /p5/sketches/Ckhf0APpg/files/assets
+    {
+      "files": {
+        "info.csv": { "content": "some,good,data" }
+      }
+    }
+
+`assets/data/info.csv` will now exist with the content `some,good,data`
+
+Files are added to the directory, in addition to what is there.
+
+### Responses
+
+| HTTP code                | Description                |
+| ------------------------ | -------------------------- |
+| 200 OK                   | The changes have been made |
+| 404 Not Found            | Path does not exist        |
+| 422 Unprocessable Entity | Validation error of files  |
+
+
+## `DELETE /:user/:sketches/files/:path`
+
+Delete a file/directory, and it’s contents.
+
+### Request format
+No body.
+
+### Response format
+No body.
+
+### Example: Delete file
+
+    DELETE /p5/sketches/Ckhf0APpg/files/assets/something.js
+
+`assets/something.js` will be removed from the sketch.
+
+### Example: Delete directory
+
+
+    DELETE /p5/sketches/Ckhf0APpg/files/assets
+
+The `assets` directory and everything within it, will be removed.
+
+### Responses
+
+| HTTP code     | Description               |
+| ------------- | ------------------------- |
+| 200 OK        | The item has been deleted |
+| 404 Not Found | Path does not exist       |
+
+
+
diff --git a/docker-compose.yml b/docker-compose.yml
index fb7bd71d..0aa4c915 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -14,7 +14,7 @@ services:
     # uncomment the following lines if you don't want export all of the variables
     # defined in your .env file for testing
     # env_file:
-    #   - "$PWD/.env"
+    #   - "$PWD/.env.production"
     environment:
       - API_URL
       - MONGO_URL
@@ -38,7 +38,9 @@ services:
       - GOOGLE_SECRET
       - EXAMPLE_USER_EMAIL
       - EXAMPLE_USER_PASSWORD
-      - FORCE_TO_HTTPS
+      - ML5_EXAMPLES_USERNAME
+      - ML5_EXAMPLES_PASS
+      - ML5_EXAMPLES_EMAIL
       # you can either set this in your .env or as an environment variables
       # or here YOU CHOOSE
       # - MONGO_URL=mongodb://mongo:27017/p5js-web-editor
diff --git a/jest.setup.js b/jest.setup.js
index 3d6cd1d5..da036785 100644
--- a/jest.setup.js
+++ b/jest.setup.js
@@ -1,4 +1,8 @@
 import { configure } from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
+import '@babel/polyfill'
+import mongoose from 'mongoose'
+
+mongoose.Promise = global.Promise;
 
 configure({ adapter: new Adapter() })
diff --git a/package-lock.json b/package-lock.json
index d77fee72..ed721c0a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4,6 +4,108 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
+    "@auth0/s3": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@auth0/s3/-/s3-1.0.0.tgz",
+      "integrity": "sha512-O8PTXJnA7n8ONBSwqlWa+aZ/vlOdZYnSCGQt25h87ALWNItY/Yij79TOnzIkMTJZ8aCpGXQPuIRziLmBliV++Q==",
+      "requires": {
+        "aws-sdk": "^2.346.0",
+        "fd-slicer": "~1.0.0",
+        "findit2": "~2.2.3",
+        "graceful-fs": "~4.1.4",
+        "mime": "^2.3.1",
+        "mkdirp": "~0.5.0",
+        "pend": "~1.2.0",
+        "rimraf": "~2.2.8",
+        "streamsink": "~1.2.0"
+      },
+      "dependencies": {
+        "aws-sdk": {
+          "version": "2.626.0",
+          "resolved": "https://registry.npmjs.org/aws-sdk/-/aws-sdk-2.626.0.tgz",
+          "integrity": "sha512-1D5slT34OI1NseXLszpWwZ+N/Jla8BsY+XsGDH/4yNDDN8Cf+8zKb1AqqSw4T4onz9xhoTHWCTWqTLDL+8XAnw==",
+          "requires": {
+            "buffer": "4.9.1",
+            "events": "1.1.1",
+            "ieee754": "1.1.13",
+            "jmespath": "0.15.0",
+            "querystring": "0.2.0",
+            "sax": "1.2.1",
+            "url": "0.10.3",
+            "uuid": "3.3.2",
+            "xml2js": "0.4.19"
+          }
+        },
+        "buffer": {
+          "version": "4.9.1",
+          "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz",
+          "integrity": "sha1-bRu2AbB6TvztlwlBMgkwJ8lbwpg=",
+          "requires": {
+            "base64-js": "^1.0.2",
+            "ieee754": "^1.1.4",
+            "isarray": "^1.0.0"
+          }
+        },
+        "events": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/events/-/events-1.1.1.tgz",
+          "integrity": "sha1-nr23Y1rQmccNzEwqH1AEKI6L2SQ="
+        },
+        "graceful-fs": {
+          "version": "4.1.15",
+          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.15.tgz",
+          "integrity": "sha512-6uHUhOPEBgQ24HM+r6b/QwWfZq+yiFcipKFrOFiBEnWdy5sdzYoi+pJeQaPI5qOLRFqWmAXUPQNsielzdLoecA=="
+        },
+        "mime": {
+          "version": "2.4.4",
+          "resolved": "https://registry.npmjs.org/mime/-/mime-2.4.4.tgz",
+          "integrity": "sha512-LRxmNwziLPT828z+4YkNzloCFC2YM4wrB99k+AV5ZbEyfGNWfG8SO1FUXLmLDBSo89NrJZ4DIWeLjy1CHGhMGA=="
+        },
+        "punycode": {
+          "version": "1.3.2",
+          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz",
+          "integrity": "sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0="
+        },
+        "rimraf": {
+          "version": "2.2.8",
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.2.8.tgz",
+          "integrity": "sha1-5Dm+Kq7jJzIZUnMPmaiSnk/FBYI="
+        },
+        "sax": {
+          "version": "1.2.1",
+          "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.1.tgz",
+          "integrity": "sha1-e45lYZCyKOgaZq6nSEgNgozS03o="
+        },
+        "url": {
+          "version": "0.10.3",
+          "resolved": "https://registry.npmjs.org/url/-/url-0.10.3.tgz",
+          "integrity": "sha1-Ah5NnHcF8hu/N9A861h2dAJ3TGQ=",
+          "requires": {
+            "punycode": "1.3.2",
+            "querystring": "0.2.0"
+          }
+        },
+        "uuid": {
+          "version": "3.3.2",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.2.tgz",
+          "integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA=="
+        },
+        "xml2js": {
+          "version": "0.4.19",
+          "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.19.tgz",
+          "integrity": "sha512-esZnJZJOiJR9wWKMyuvSE1y6Dq5LCuJanqhxslH2bxM6duahNZ+HMpCLhBQGZkbX6xRf8x1Y2eJlgt2q3qo49Q==",
+          "requires": {
+            "sax": ">=0.6.0",
+            "xmlbuilder": "~9.0.1"
+          }
+        },
+        "xmlbuilder": {
+          "version": "9.0.7",
+          "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-9.0.7.tgz",
+          "integrity": "sha1-Ey7mPS7FVlxVfiD0wi35rKaGsQ0="
+        }
+      }
+    },
     "@babel/code-frame": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.0.0.tgz",
@@ -13,43 +115,43 @@
       }
     },
     "@babel/compat-data": {
-      "version": "7.8.1",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.8.1.tgz",
-      "integrity": "sha512-Z+6ZOXvyOWYxJ50BwxzdhRnRsGST8Y3jaZgxYig575lTjVSs3KtJnmESwZegg6e2Dn0td1eDhoWlp1wI4BTCPw==",
+      "version": "7.8.5",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.8.5.tgz",
+      "integrity": "sha512-jWYUqQX/ObOhG1UiEkbH5SANsE/8oKXiQWjj7p7xgj9Zmnt//aUvyz4dBkK0HNsS8/cbyC5NmmH87VekW+mXFg==",
       "dev": true,
       "requires": {
-        "browserslist": "^4.8.2",
+        "browserslist": "^4.8.5",
         "invariant": "^2.2.4",
         "semver": "^5.5.0"
       },
       "dependencies": {
         "browserslist": {
-          "version": "4.8.5",
-          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.8.5.tgz",
-          "integrity": "sha512-4LMHuicxkabIB+n9874jZX/az1IaZ5a+EUuvD7KFOu9x/Bd5YHyO0DIz2ls/Kl8g0ItS4X/ilEgf4T1Br0lgSg==",
+          "version": "4.8.7",
+          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.8.7.tgz",
+          "integrity": "sha512-gFOnZNYBHrEyUML0xr5NJ6edFaaKbTFX9S9kQHlYfCP0Rit/boRIz4G+Avq6/4haEKJXdGGUnoolx+5MWW2BoA==",
           "dev": true,
           "requires": {
-            "caniuse-lite": "^1.0.30001022",
-            "electron-to-chromium": "^1.3.338",
-            "node-releases": "^1.1.46"
+            "caniuse-lite": "^1.0.30001027",
+            "electron-to-chromium": "^1.3.349",
+            "node-releases": "^1.1.49"
           }
         },
         "caniuse-lite": {
-          "version": "1.0.30001023",
-          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001023.tgz",
-          "integrity": "sha512-C5TDMiYG11EOhVOA62W1p3UsJ2z4DsHtMBQtjzp3ZsUglcQn62WOUgW0y795c7A5uZ+GCEIvzkMatLIlAsbNTA==",
+          "version": "1.0.30001030",
+          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001030.tgz",
+          "integrity": "sha512-QGK0W4Ft/Ac+zTjEiRJfwDNATvS3fodDczBXrH42784kcfqcDKpEPfN08N0HQjrAp8He/Jw8QiSS9QRn7XAbUw==",
           "dev": true
         },
         "electron-to-chromium": {
-          "version": "1.3.341",
-          "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.341.tgz",
-          "integrity": "sha512-iezlV55/tan1rvdvt7yg7VHRSkt+sKfzQ16wTDqTbQqtl4+pSUkKPXpQHDvEt0c7gKcUHHwUbffOgXz6bn096g==",
+          "version": "1.3.360",
+          "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.360.tgz",
+          "integrity": "sha512-RE1pv2sjQiDRRN1nI0fJ0eQHZ9le4oobu16OArnwEUV5ycAU5SNjFyvzjZ1gPUAqBa2Ud1XagtW8j3ZXfHuQHA==",
           "dev": true
         },
         "node-releases": {
-          "version": "1.1.47",
-          "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.47.tgz",
-          "integrity": "sha512-k4xjVPx5FpwBUj0Gw7uvFOTF4Ep8Hok1I6qjwL3pLfwe7Y0REQSAqOwwv9TWBCUtMHxcXfY4PgRLRozcChvTcA==",
+          "version": "1.1.50",
+          "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.50.tgz",
+          "integrity": "sha512-lgAmPv9eYZ0bGwUYAKlr8MG6K4CvWliWqnkcT2P8mMAgVrH3lqfBPorFlxiG1pHQnqmavJZ9vbMXUTNyMLbrgQ==",
           "dev": true,
           "requires": {
             "semver": "^6.3.0"
@@ -66,16 +168,16 @@
       }
     },
     "@babel/core": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.8.3.tgz",
-      "integrity": "sha512-4XFkf8AwyrEG7Ziu3L2L0Cv+WyY47Tcsp70JFmpftbAA1K7YL/sgE9jh9HyNj08Y/U50ItUchpN0w6HxAoX1rA==",
+      "version": "7.8.4",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.8.4.tgz",
+      "integrity": "sha512-0LiLrB2PwrVI+a2/IEskBopDYSd8BCb3rOvH7D5tzoWd696TBEduBvuLVm4Nx6rltrLZqvI3MCalB2K2aVzQjA==",
       "requires": {
         "@babel/code-frame": "^7.8.3",
-        "@babel/generator": "^7.8.3",
-        "@babel/helpers": "^7.8.3",
-        "@babel/parser": "^7.8.3",
+        "@babel/generator": "^7.8.4",
+        "@babel/helpers": "^7.8.4",
+        "@babel/parser": "^7.8.4",
         "@babel/template": "^7.8.3",
-        "@babel/traverse": "^7.8.3",
+        "@babel/traverse": "^7.8.4",
         "@babel/types": "^7.8.3",
         "convert-source-map": "^1.7.0",
         "debug": "^4.1.0",
@@ -96,9 +198,9 @@
           }
         },
         "@babel/generator": {
-          "version": "7.8.3",
-          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.8.3.tgz",
-          "integrity": "sha512-WjoPk8hRpDRqqzRpvaR8/gDUPkrnOOeuT2m8cNICJtZH6mwaCo3v0OKMI7Y6SM1pBtyijnLtAL0HDi41pf41ug==",
+          "version": "7.8.4",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.8.4.tgz",
+          "integrity": "sha512-PwhclGdRpNAf3IxZb0YVuITPZmmrXz9zf6fH8lT4XbrmfQKr6ryBzhv593P5C6poJRciFCL/eHGW2NuGrgEyxA==",
           "requires": {
             "@babel/types": "^7.8.3",
             "jsesc": "^2.5.1",
@@ -143,9 +245,9 @@
           }
         },
         "@babel/parser": {
-          "version": "7.8.3",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.8.3.tgz",
-          "integrity": "sha512-/V72F4Yp/qmHaTALizEm9Gf2eQHV3QyTL3K0cNfijwnMnb1L+LDlAubb/ZnSdGAVzVSWakujHYs1I26x66sMeQ=="
+          "version": "7.8.4",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.8.4.tgz",
+          "integrity": "sha512-0fKu/QqildpXmPVaRBoXOlyBb3MC+J0A66x97qEfLOMkn3u6nfY5esWogQwi/K0BjASYy4DbnsEWnpNL6qT5Mw=="
         },
         "@babel/template": {
           "version": "7.8.3",
@@ -158,15 +260,15 @@
           }
         },
         "@babel/traverse": {
-          "version": "7.8.3",
-          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.8.3.tgz",
-          "integrity": "sha512-we+a2lti+eEImHmEXp7bM9cTxGzxPmBiVJlLVD+FuuQMeeO7RaDbutbgeheDkw+Xe3mCfJHnGOWLswT74m2IPg==",
+          "version": "7.8.4",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.8.4.tgz",
+          "integrity": "sha512-NGLJPZwnVEyBPLI+bl9y9aSnxMhsKz42so7ApAv9D+b4vAFPpY013FTS9LdKxcABoIYFU52HcYga1pPlx454mg==",
           "requires": {
             "@babel/code-frame": "^7.8.3",
-            "@babel/generator": "^7.8.3",
+            "@babel/generator": "^7.8.4",
             "@babel/helper-function-name": "^7.8.3",
             "@babel/helper-split-export-declaration": "^7.8.3",
-            "@babel/parser": "^7.8.3",
+            "@babel/parser": "^7.8.4",
             "@babel/types": "^7.8.3",
             "debug": "^4.1.0",
             "globals": "^11.1.0",
@@ -287,9 +389,9 @@
           }
         },
         "@babel/generator": {
-          "version": "7.8.3",
-          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.8.3.tgz",
-          "integrity": "sha512-WjoPk8hRpDRqqzRpvaR8/gDUPkrnOOeuT2m8cNICJtZH6mwaCo3v0OKMI7Y6SM1pBtyijnLtAL0HDi41pf41ug==",
+          "version": "7.8.4",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.8.4.tgz",
+          "integrity": "sha512-PwhclGdRpNAf3IxZb0YVuITPZmmrXz9zf6fH8lT4XbrmfQKr6ryBzhv593P5C6poJRciFCL/eHGW2NuGrgEyxA==",
           "dev": true,
           "requires": {
             "@babel/types": "^7.8.3",
@@ -339,9 +441,9 @@
           }
         },
         "@babel/parser": {
-          "version": "7.8.3",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.8.3.tgz",
-          "integrity": "sha512-/V72F4Yp/qmHaTALizEm9Gf2eQHV3QyTL3K0cNfijwnMnb1L+LDlAubb/ZnSdGAVzVSWakujHYs1I26x66sMeQ==",
+          "version": "7.8.4",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.8.4.tgz",
+          "integrity": "sha512-0fKu/QqildpXmPVaRBoXOlyBb3MC+J0A66x97qEfLOMkn3u6nfY5esWogQwi/K0BjASYy4DbnsEWnpNL6qT5Mw==",
           "dev": true
         },
         "@babel/template": {
@@ -356,16 +458,16 @@
           }
         },
         "@babel/traverse": {
-          "version": "7.8.3",
-          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.8.3.tgz",
-          "integrity": "sha512-we+a2lti+eEImHmEXp7bM9cTxGzxPmBiVJlLVD+FuuQMeeO7RaDbutbgeheDkw+Xe3mCfJHnGOWLswT74m2IPg==",
+          "version": "7.8.4",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.8.4.tgz",
+          "integrity": "sha512-NGLJPZwnVEyBPLI+bl9y9aSnxMhsKz42so7ApAv9D+b4vAFPpY013FTS9LdKxcABoIYFU52HcYga1pPlx454mg==",
           "dev": true,
           "requires": {
             "@babel/code-frame": "^7.8.3",
-            "@babel/generator": "^7.8.3",
+            "@babel/generator": "^7.8.4",
             "@babel/helper-function-name": "^7.8.3",
             "@babel/helper-split-export-declaration": "^7.8.3",
-            "@babel/parser": "^7.8.3",
+            "@babel/parser": "^7.8.4",
             "@babel/types": "^7.8.3",
             "debug": "^4.1.0",
             "globals": "^11.1.0",
@@ -386,45 +488,45 @@
       }
     },
     "@babel/helper-compilation-targets": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.8.3.tgz",
-      "integrity": "sha512-JLylPCsFjhLN+6uBSSh3iYdxKdeO9MNmoY96PE/99d8kyBFaXLORtAVhqN6iHa+wtPeqxKLghDOZry0+Aiw9Tw==",
+      "version": "7.8.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.8.4.tgz",
+      "integrity": "sha512-3k3BsKMvPp5bjxgMdrFyq0UaEO48HciVrOVF0+lon8pp95cyJ2ujAh0TrBHNMnJGT2rr0iKOJPFFbSqjDyf/Pg==",
       "dev": true,
       "requires": {
-        "@babel/compat-data": "^7.8.1",
-        "browserslist": "^4.8.2",
+        "@babel/compat-data": "^7.8.4",
+        "browserslist": "^4.8.5",
         "invariant": "^2.2.4",
-        "levenary": "^1.1.0",
+        "levenary": "^1.1.1",
         "semver": "^5.5.0"
       },
       "dependencies": {
         "browserslist": {
-          "version": "4.8.5",
-          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.8.5.tgz",
-          "integrity": "sha512-4LMHuicxkabIB+n9874jZX/az1IaZ5a+EUuvD7KFOu9x/Bd5YHyO0DIz2ls/Kl8g0ItS4X/ilEgf4T1Br0lgSg==",
+          "version": "4.8.7",
+          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.8.7.tgz",
+          "integrity": "sha512-gFOnZNYBHrEyUML0xr5NJ6edFaaKbTFX9S9kQHlYfCP0Rit/boRIz4G+Avq6/4haEKJXdGGUnoolx+5MWW2BoA==",
           "dev": true,
           "requires": {
-            "caniuse-lite": "^1.0.30001022",
-            "electron-to-chromium": "^1.3.338",
-            "node-releases": "^1.1.46"
+            "caniuse-lite": "^1.0.30001027",
+            "electron-to-chromium": "^1.3.349",
+            "node-releases": "^1.1.49"
           }
         },
         "caniuse-lite": {
-          "version": "1.0.30001023",
-          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001023.tgz",
-          "integrity": "sha512-C5TDMiYG11EOhVOA62W1p3UsJ2z4DsHtMBQtjzp3ZsUglcQn62WOUgW0y795c7A5uZ+GCEIvzkMatLIlAsbNTA==",
+          "version": "1.0.30001030",
+          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001030.tgz",
+          "integrity": "sha512-QGK0W4Ft/Ac+zTjEiRJfwDNATvS3fodDczBXrH42784kcfqcDKpEPfN08N0HQjrAp8He/Jw8QiSS9QRn7XAbUw==",
           "dev": true
         },
         "electron-to-chromium": {
-          "version": "1.3.341",
-          "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.341.tgz",
-          "integrity": "sha512-iezlV55/tan1rvdvt7yg7VHRSkt+sKfzQ16wTDqTbQqtl4+pSUkKPXpQHDvEt0c7gKcUHHwUbffOgXz6bn096g==",
+          "version": "1.3.360",
+          "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.360.tgz",
+          "integrity": "sha512-RE1pv2sjQiDRRN1nI0fJ0eQHZ9le4oobu16OArnwEUV5ycAU5SNjFyvzjZ1gPUAqBa2Ud1XagtW8j3ZXfHuQHA==",
           "dev": true
         },
         "node-releases": {
-          "version": "1.1.47",
-          "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.47.tgz",
-          "integrity": "sha512-k4xjVPx5FpwBUj0Gw7uvFOTF4Ep8Hok1I6qjwL3pLfwe7Y0REQSAqOwwv9TWBCUtMHxcXfY4PgRLRozcChvTcA==",
+          "version": "1.1.50",
+          "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.50.tgz",
+          "integrity": "sha512-lgAmPv9eYZ0bGwUYAKlr8MG6K4CvWliWqnkcT2P8mMAgVrH3lqfBPorFlxiG1pHQnqmavJZ9vbMXUTNyMLbrgQ==",
           "dev": true,
           "requires": {
             "semver": "^6.3.0"
@@ -595,9 +697,9 @@
           }
         },
         "@babel/parser": {
-          "version": "7.8.3",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.8.3.tgz",
-          "integrity": "sha512-/V72F4Yp/qmHaTALizEm9Gf2eQHV3QyTL3K0cNfijwnMnb1L+LDlAubb/ZnSdGAVzVSWakujHYs1I26x66sMeQ==",
+          "version": "7.8.4",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.8.4.tgz",
+          "integrity": "sha512-0fKu/QqildpXmPVaRBoXOlyBb3MC+J0A66x97qEfLOMkn3u6nfY5esWogQwi/K0BjASYy4DbnsEWnpNL6qT5Mw==",
           "dev": true
         },
         "@babel/template": {
@@ -644,9 +746,9 @@
           }
         },
         "@babel/generator": {
-          "version": "7.8.3",
-          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.8.3.tgz",
-          "integrity": "sha512-WjoPk8hRpDRqqzRpvaR8/gDUPkrnOOeuT2m8cNICJtZH6mwaCo3v0OKMI7Y6SM1pBtyijnLtAL0HDi41pf41ug==",
+          "version": "7.8.4",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.8.4.tgz",
+          "integrity": "sha512-PwhclGdRpNAf3IxZb0YVuITPZmmrXz9zf6fH8lT4XbrmfQKr6ryBzhv593P5C6poJRciFCL/eHGW2NuGrgEyxA==",
           "dev": true,
           "requires": {
             "@babel/types": "^7.8.3",
@@ -696,9 +798,9 @@
           }
         },
         "@babel/parser": {
-          "version": "7.8.3",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.8.3.tgz",
-          "integrity": "sha512-/V72F4Yp/qmHaTALizEm9Gf2eQHV3QyTL3K0cNfijwnMnb1L+LDlAubb/ZnSdGAVzVSWakujHYs1I26x66sMeQ==",
+          "version": "7.8.4",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.8.4.tgz",
+          "integrity": "sha512-0fKu/QqildpXmPVaRBoXOlyBb3MC+J0A66x97qEfLOMkn3u6nfY5esWogQwi/K0BjASYy4DbnsEWnpNL6qT5Mw==",
           "dev": true
         },
         "@babel/template": {
@@ -713,16 +815,16 @@
           }
         },
         "@babel/traverse": {
-          "version": "7.8.3",
-          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.8.3.tgz",
-          "integrity": "sha512-we+a2lti+eEImHmEXp7bM9cTxGzxPmBiVJlLVD+FuuQMeeO7RaDbutbgeheDkw+Xe3mCfJHnGOWLswT74m2IPg==",
+          "version": "7.8.4",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.8.4.tgz",
+          "integrity": "sha512-NGLJPZwnVEyBPLI+bl9y9aSnxMhsKz42so7ApAv9D+b4vAFPpY013FTS9LdKxcABoIYFU52HcYga1pPlx454mg==",
           "dev": true,
           "requires": {
             "@babel/code-frame": "^7.8.3",
-            "@babel/generator": "^7.8.3",
+            "@babel/generator": "^7.8.4",
             "@babel/helper-function-name": "^7.8.3",
             "@babel/helper-split-export-declaration": "^7.8.3",
-            "@babel/parser": "^7.8.3",
+            "@babel/parser": "^7.8.4",
             "@babel/types": "^7.8.3",
             "debug": "^4.1.0",
             "globals": "^11.1.0",
@@ -870,9 +972,9 @@
           }
         },
         "@babel/parser": {
-          "version": "7.8.3",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.8.3.tgz",
-          "integrity": "sha512-/V72F4Yp/qmHaTALizEm9Gf2eQHV3QyTL3K0cNfijwnMnb1L+LDlAubb/ZnSdGAVzVSWakujHYs1I26x66sMeQ==",
+          "version": "7.8.4",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.8.4.tgz",
+          "integrity": "sha512-0fKu/QqildpXmPVaRBoXOlyBb3MC+J0A66x97qEfLOMkn3u6nfY5esWogQwi/K0BjASYy4DbnsEWnpNL6qT5Mw==",
           "dev": true
         },
         "@babel/template": {
@@ -959,9 +1061,9 @@
           }
         },
         "@babel/generator": {
-          "version": "7.8.3",
-          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.8.3.tgz",
-          "integrity": "sha512-WjoPk8hRpDRqqzRpvaR8/gDUPkrnOOeuT2m8cNICJtZH6mwaCo3v0OKMI7Y6SM1pBtyijnLtAL0HDi41pf41ug==",
+          "version": "7.8.4",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.8.4.tgz",
+          "integrity": "sha512-PwhclGdRpNAf3IxZb0YVuITPZmmrXz9zf6fH8lT4XbrmfQKr6ryBzhv593P5C6poJRciFCL/eHGW2NuGrgEyxA==",
           "dev": true,
           "requires": {
             "@babel/types": "^7.8.3",
@@ -1011,9 +1113,9 @@
           }
         },
         "@babel/parser": {
-          "version": "7.8.3",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.8.3.tgz",
-          "integrity": "sha512-/V72F4Yp/qmHaTALizEm9Gf2eQHV3QyTL3K0cNfijwnMnb1L+LDlAubb/ZnSdGAVzVSWakujHYs1I26x66sMeQ==",
+          "version": "7.8.4",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.8.4.tgz",
+          "integrity": "sha512-0fKu/QqildpXmPVaRBoXOlyBb3MC+J0A66x97qEfLOMkn3u6nfY5esWogQwi/K0BjASYy4DbnsEWnpNL6qT5Mw==",
           "dev": true
         },
         "@babel/template": {
@@ -1028,16 +1130,16 @@
           }
         },
         "@babel/traverse": {
-          "version": "7.8.3",
-          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.8.3.tgz",
-          "integrity": "sha512-we+a2lti+eEImHmEXp7bM9cTxGzxPmBiVJlLVD+FuuQMeeO7RaDbutbgeheDkw+Xe3mCfJHnGOWLswT74m2IPg==",
+          "version": "7.8.4",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.8.4.tgz",
+          "integrity": "sha512-NGLJPZwnVEyBPLI+bl9y9aSnxMhsKz42so7ApAv9D+b4vAFPpY013FTS9LdKxcABoIYFU52HcYga1pPlx454mg==",
           "dev": true,
           "requires": {
             "@babel/code-frame": "^7.8.3",
-            "@babel/generator": "^7.8.3",
+            "@babel/generator": "^7.8.4",
             "@babel/helper-function-name": "^7.8.3",
             "@babel/helper-split-export-declaration": "^7.8.3",
-            "@babel/parser": "^7.8.3",
+            "@babel/parser": "^7.8.4",
             "@babel/types": "^7.8.3",
             "debug": "^4.1.0",
             "globals": "^11.1.0",
@@ -1208,9 +1310,9 @@
           }
         },
         "@babel/parser": {
-          "version": "7.8.3",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.8.3.tgz",
-          "integrity": "sha512-/V72F4Yp/qmHaTALizEm9Gf2eQHV3QyTL3K0cNfijwnMnb1L+LDlAubb/ZnSdGAVzVSWakujHYs1I26x66sMeQ==",
+          "version": "7.8.4",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.8.4.tgz",
+          "integrity": "sha512-0fKu/QqildpXmPVaRBoXOlyBb3MC+J0A66x97qEfLOMkn3u6nfY5esWogQwi/K0BjASYy4DbnsEWnpNL6qT5Mw==",
           "dev": true
         },
         "@babel/template": {
@@ -1367,12 +1469,12 @@
       }
     },
     "@babel/helpers": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.8.3.tgz",
-      "integrity": "sha512-LmU3q9Pah/XyZU89QvBgGt+BCsTPoQa+73RxAQh8fb8qkDyIfeQnmgs+hvzhTCKTzqOyk7JTkS3MS1S8Mq5yrQ==",
+      "version": "7.8.4",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.8.4.tgz",
+      "integrity": "sha512-VPbe7wcQ4chu4TDQjimHv/5tj73qz88o12EPkO2ValS2QiQS/1F2SsjyIGNnAD0vF/nZS6Cf9i+vW6HIlnaR8w==",
       "requires": {
         "@babel/template": "^7.8.3",
-        "@babel/traverse": "^7.8.3",
+        "@babel/traverse": "^7.8.4",
         "@babel/types": "^7.8.3"
       },
       "dependencies": {
@@ -1385,9 +1487,9 @@
           }
         },
         "@babel/generator": {
-          "version": "7.8.3",
-          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.8.3.tgz",
-          "integrity": "sha512-WjoPk8hRpDRqqzRpvaR8/gDUPkrnOOeuT2m8cNICJtZH6mwaCo3v0OKMI7Y6SM1pBtyijnLtAL0HDi41pf41ug==",
+          "version": "7.8.4",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.8.4.tgz",
+          "integrity": "sha512-PwhclGdRpNAf3IxZb0YVuITPZmmrXz9zf6fH8lT4XbrmfQKr6ryBzhv593P5C6poJRciFCL/eHGW2NuGrgEyxA==",
           "requires": {
             "@babel/types": "^7.8.3",
             "jsesc": "^2.5.1",
@@ -1432,9 +1534,9 @@
           }
         },
         "@babel/parser": {
-          "version": "7.8.3",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.8.3.tgz",
-          "integrity": "sha512-/V72F4Yp/qmHaTALizEm9Gf2eQHV3QyTL3K0cNfijwnMnb1L+LDlAubb/ZnSdGAVzVSWakujHYs1I26x66sMeQ=="
+          "version": "7.8.4",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.8.4.tgz",
+          "integrity": "sha512-0fKu/QqildpXmPVaRBoXOlyBb3MC+J0A66x97qEfLOMkn3u6nfY5esWogQwi/K0BjASYy4DbnsEWnpNL6qT5Mw=="
         },
         "@babel/template": {
           "version": "7.8.3",
@@ -1447,15 +1549,15 @@
           }
         },
         "@babel/traverse": {
-          "version": "7.8.3",
-          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.8.3.tgz",
-          "integrity": "sha512-we+a2lti+eEImHmEXp7bM9cTxGzxPmBiVJlLVD+FuuQMeeO7RaDbutbgeheDkw+Xe3mCfJHnGOWLswT74m2IPg==",
+          "version": "7.8.4",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.8.4.tgz",
+          "integrity": "sha512-NGLJPZwnVEyBPLI+bl9y9aSnxMhsKz42so7ApAv9D+b4vAFPpY013FTS9LdKxcABoIYFU52HcYga1pPlx454mg==",
           "requires": {
             "@babel/code-frame": "^7.8.3",
-            "@babel/generator": "^7.8.3",
+            "@babel/generator": "^7.8.4",
             "@babel/helper-function-name": "^7.8.3",
             "@babel/helper-split-export-declaration": "^7.8.3",
-            "@babel/parser": "^7.8.3",
+            "@babel/parser": "^7.8.4",
             "@babel/types": "^7.8.3",
             "debug": "^4.1.0",
             "globals": "^11.1.0",
@@ -1968,9 +2070,9 @@
           }
         },
         "@babel/parser": {
-          "version": "7.8.3",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.8.3.tgz",
-          "integrity": "sha512-/V72F4Yp/qmHaTALizEm9Gf2eQHV3QyTL3K0cNfijwnMnb1L+LDlAubb/ZnSdGAVzVSWakujHYs1I26x66sMeQ==",
+          "version": "7.8.4",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.8.4.tgz",
+          "integrity": "sha512-0fKu/QqildpXmPVaRBoXOlyBb3MC+J0A66x97qEfLOMkn3u6nfY5esWogQwi/K0BjASYy4DbnsEWnpNL6qT5Mw==",
           "dev": true
         },
         "@babel/template": {
@@ -2045,9 +2147,9 @@
       }
     },
     "@babel/plugin-transform-for-of": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.8.3.tgz",
-      "integrity": "sha512-ZjXznLNTxhpf4Q5q3x1NsngzGA38t9naWH8Gt+0qYZEJAcvPI9waSStSh56u19Ofjr7QmD0wUsQ8hw8s/p1VnA==",
+      "version": "7.8.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.8.4.tgz",
+      "integrity": "sha512-iAXNlOWvcYUYoV8YIxwS7TxGRJcxyl8eQCfT+A5j8sKUzRFvJdcyjp97jL2IghWSRDaL2PU2O2tX8Cu9dTBq5A==",
       "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.8.3"
@@ -2104,9 +2206,9 @@
           }
         },
         "@babel/parser": {
-          "version": "7.8.3",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.8.3.tgz",
-          "integrity": "sha512-/V72F4Yp/qmHaTALizEm9Gf2eQHV3QyTL3K0cNfijwnMnb1L+LDlAubb/ZnSdGAVzVSWakujHYs1I26x66sMeQ==",
+          "version": "7.8.4",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.8.4.tgz",
+          "integrity": "sha512-0fKu/QqildpXmPVaRBoXOlyBb3MC+J0A66x97qEfLOMkn3u6nfY5esWogQwi/K0BjASYy4DbnsEWnpNL6qT5Mw==",
           "dev": true
         },
         "@babel/template": {
@@ -2225,9 +2327,9 @@
       }
     },
     "@babel/plugin-transform-parameters": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.8.3.tgz",
-      "integrity": "sha512-/pqngtGb54JwMBZ6S/D3XYylQDFtGjWrnoCF4gXZOUpFV/ujbxnoNGNvDGu6doFWRPBveE72qTx/RRU44j5I/Q==",
+      "version": "7.8.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.8.4.tgz",
+      "integrity": "sha512-IsS3oTxeTsZlE5KqzTbcC2sV0P9pXdec53SU+Yxv7o/6dvGM5AkTotQKhoSffhNgZ/dftsSiOoxy7evCYJXzVA==",
       "dev": true,
       "requires": {
         "@babel/helper-call-delegate": "^7.8.3",
@@ -2383,9 +2485,9 @@
       }
     },
     "@babel/plugin-transform-typeof-symbol": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.8.3.tgz",
-      "integrity": "sha512-3TrkKd4LPqm4jHs6nPtSDI/SV9Cm5PRJkHLUgTcqRQQTMAZ44ZaAdDZJtvWFSaRcvT0a1rTmJ5ZA5tDKjleF3g==",
+      "version": "7.8.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.8.4.tgz",
+      "integrity": "sha512-2QKyfjGdvuNfHsb7qnBBlKclbD4CfshH2KvDabiijLMGXPHJXGxtDzwIF7bQP+T0ysw8fYTtxPafgfs/c1Lrqg==",
       "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.8.3"
@@ -2411,13 +2513,13 @@
       }
     },
     "@babel/preset-env": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.8.3.tgz",
-      "integrity": "sha512-Rs4RPL2KjSLSE2mWAx5/iCH+GC1ikKdxPrhnRS6PfFVaiZeom22VFKN4X8ZthyN61kAaR05tfXTbCvatl9WIQg==",
+      "version": "7.8.4",
+      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.8.4.tgz",
+      "integrity": "sha512-HihCgpr45AnSOHRbS5cWNTINs0TwaR8BS8xIIH+QwiW8cKL0llV91njQMpeMReEPVs+1Ao0x3RLEBLtt1hOq4w==",
       "dev": true,
       "requires": {
-        "@babel/compat-data": "^7.8.0",
-        "@babel/helper-compilation-targets": "^7.8.3",
+        "@babel/compat-data": "^7.8.4",
+        "@babel/helper-compilation-targets": "^7.8.4",
         "@babel/helper-module-imports": "^7.8.3",
         "@babel/helper-plugin-utils": "^7.8.3",
         "@babel/plugin-proposal-async-generator-functions": "^7.8.3",
@@ -2446,7 +2548,7 @@
         "@babel/plugin-transform-dotall-regex": "^7.8.3",
         "@babel/plugin-transform-duplicate-keys": "^7.8.3",
         "@babel/plugin-transform-exponentiation-operator": "^7.8.3",
-        "@babel/plugin-transform-for-of": "^7.8.3",
+        "@babel/plugin-transform-for-of": "^7.8.4",
         "@babel/plugin-transform-function-name": "^7.8.3",
         "@babel/plugin-transform-literals": "^7.8.3",
         "@babel/plugin-transform-member-expression-literals": "^7.8.3",
@@ -2457,7 +2559,7 @@
         "@babel/plugin-transform-named-capturing-groups-regex": "^7.8.3",
         "@babel/plugin-transform-new-target": "^7.8.3",
         "@babel/plugin-transform-object-super": "^7.8.3",
-        "@babel/plugin-transform-parameters": "^7.8.3",
+        "@babel/plugin-transform-parameters": "^7.8.4",
         "@babel/plugin-transform-property-literals": "^7.8.3",
         "@babel/plugin-transform-regenerator": "^7.8.3",
         "@babel/plugin-transform-reserved-words": "^7.8.3",
@@ -2465,13 +2567,13 @@
         "@babel/plugin-transform-spread": "^7.8.3",
         "@babel/plugin-transform-sticky-regex": "^7.8.3",
         "@babel/plugin-transform-template-literals": "^7.8.3",
-        "@babel/plugin-transform-typeof-symbol": "^7.8.3",
+        "@babel/plugin-transform-typeof-symbol": "^7.8.4",
         "@babel/plugin-transform-unicode-regex": "^7.8.3",
         "@babel/types": "^7.8.3",
-        "browserslist": "^4.8.2",
+        "browserslist": "^4.8.5",
         "core-js-compat": "^3.6.2",
         "invariant": "^2.2.2",
-        "levenary": "^1.1.0",
+        "levenary": "^1.1.1",
         "semver": "^5.5.0"
       },
       "dependencies": {
@@ -2487,32 +2589,32 @@
           }
         },
         "browserslist": {
-          "version": "4.8.5",
-          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.8.5.tgz",
-          "integrity": "sha512-4LMHuicxkabIB+n9874jZX/az1IaZ5a+EUuvD7KFOu9x/Bd5YHyO0DIz2ls/Kl8g0ItS4X/ilEgf4T1Br0lgSg==",
+          "version": "4.8.7",
+          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.8.7.tgz",
+          "integrity": "sha512-gFOnZNYBHrEyUML0xr5NJ6edFaaKbTFX9S9kQHlYfCP0Rit/boRIz4G+Avq6/4haEKJXdGGUnoolx+5MWW2BoA==",
           "dev": true,
           "requires": {
-            "caniuse-lite": "^1.0.30001022",
-            "electron-to-chromium": "^1.3.338",
-            "node-releases": "^1.1.46"
+            "caniuse-lite": "^1.0.30001027",
+            "electron-to-chromium": "^1.3.349",
+            "node-releases": "^1.1.49"
           }
         },
         "caniuse-lite": {
-          "version": "1.0.30001023",
-          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001023.tgz",
-          "integrity": "sha512-C5TDMiYG11EOhVOA62W1p3UsJ2z4DsHtMBQtjzp3ZsUglcQn62WOUgW0y795c7A5uZ+GCEIvzkMatLIlAsbNTA==",
+          "version": "1.0.30001030",
+          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001030.tgz",
+          "integrity": "sha512-QGK0W4Ft/Ac+zTjEiRJfwDNATvS3fodDczBXrH42784kcfqcDKpEPfN08N0HQjrAp8He/Jw8QiSS9QRn7XAbUw==",
           "dev": true
         },
         "electron-to-chromium": {
-          "version": "1.3.341",
-          "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.341.tgz",
-          "integrity": "sha512-iezlV55/tan1rvdvt7yg7VHRSkt+sKfzQ16wTDqTbQqtl4+pSUkKPXpQHDvEt0c7gKcUHHwUbffOgXz6bn096g==",
+          "version": "1.3.360",
+          "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.360.tgz",
+          "integrity": "sha512-RE1pv2sjQiDRRN1nI0fJ0eQHZ9le4oobu16OArnwEUV5ycAU5SNjFyvzjZ1gPUAqBa2Ud1XagtW8j3ZXfHuQHA==",
           "dev": true
         },
         "node-releases": {
-          "version": "1.1.47",
-          "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.47.tgz",
-          "integrity": "sha512-k4xjVPx5FpwBUj0Gw7uvFOTF4Ep8Hok1I6qjwL3pLfwe7Y0REQSAqOwwv9TWBCUtMHxcXfY4PgRLRozcChvTcA==",
+          "version": "1.1.50",
+          "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.50.tgz",
+          "integrity": "sha512-lgAmPv9eYZ0bGwUYAKlr8MG6K4CvWliWqnkcT2P8mMAgVrH3lqfBPorFlxiG1pHQnqmavJZ9vbMXUTNyMLbrgQ==",
           "dev": true,
           "requires": {
             "semver": "^6.3.0"
@@ -2938,6 +3040,12 @@
             }
           }
         },
+        "graceful-fs": {
+          "version": "4.2.3",
+          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.3.tgz",
+          "integrity": "sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ==",
+          "dev": true
+        },
         "is-accessor-descriptor": {
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
@@ -3114,6 +3222,12 @@
           "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
           "dev": true
         },
+        "graceful-fs": {
+          "version": "4.2.3",
+          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.3.tgz",
+          "integrity": "sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ==",
+          "dev": true
+        },
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -3370,6 +3484,12 @@
             }
           }
         },
+        "graceful-fs": {
+          "version": "4.2.3",
+          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.3.tgz",
+          "integrity": "sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ==",
+          "dev": true
+        },
         "is-accessor-descriptor": {
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
@@ -3986,6 +4106,13 @@
         "lodash": "^4.8.0",
         "normalize-path": "^2.0.0",
         "readable-stream": "^2.0.0"
+      },
+      "dependencies": {
+        "graceful-fs": {
+          "version": "4.2.3",
+          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.3.tgz",
+          "integrity": "sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ=="
+        }
       }
     },
     "are-we-there-yet": {
@@ -4360,24 +4487,15 @@
         }
       }
     },
-    "aws-sdk": {
-      "version": "2.0.31",
-      "resolved": "https://registry.npmjs.org/aws-sdk/-/aws-sdk-2.0.31.tgz",
-      "integrity": "sha1-5yzx/caQFb2f0r3z07iMFlB9Jo4=",
-      "requires": {
-        "xml2js": "0.2.6",
-        "xmlbuilder": "0.4.2"
-      }
-    },
     "aws-sign2": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
       "integrity": "sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg="
     },
     "aws4": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.8.0.tgz",
-      "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ=="
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.9.1.tgz",
+      "integrity": "sha512-wMHVg2EOHaMRxbzgFJ9gtjOOCrI80OHLG14rxi28XwOW8ux6IiEbRCGGGqCtdAIg4FQCbW20k9RsT4y3gJlFug=="
     },
     "axios": {
       "version": "0.18.1",
@@ -5097,6 +5215,11 @@
           "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
           "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg=="
         },
+        "graceful-fs": {
+          "version": "4.2.3",
+          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.3.tgz",
+          "integrity": "sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ=="
+        },
         "lru-cache": {
           "version": "5.1.1",
           "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -5509,9 +5632,9 @@
       "dev": true
     },
     "codemirror": {
-      "version": "5.51.0",
-      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.51.0.tgz",
-      "integrity": "sha512-vyuYYRv3eXL0SCuZA4spRFlKNzQAewHcipRQCOKgRy7VNAvZxTKzbItdbCl4S5AgPZ5g3WkHp+ibWQwv9TLG7Q=="
+      "version": "5.52.0",
+      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.52.0.tgz",
+      "integrity": "sha512-K2UB6zjscrfME03HeRe/IuOmCeqNpw7PLKGHThYpLbZEuKf+ZoujJPhxZN4hHJS1O7QyzEsV7JJZGxuQWVaFCg=="
     },
     "collection-visit": {
       "version": "1.0.0",
@@ -5641,6 +5764,12 @@
         "xdg-basedir": "^3.0.0"
       },
       "dependencies": {
+        "graceful-fs": {
+          "version": "4.2.3",
+          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.3.tgz",
+          "integrity": "sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ==",
+          "dev": true
+        },
         "make-dir": {
           "version": "1.3.0",
           "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz",
@@ -5791,32 +5920,32 @@
       },
       "dependencies": {
         "browserslist": {
-          "version": "4.8.5",
-          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.8.5.tgz",
-          "integrity": "sha512-4LMHuicxkabIB+n9874jZX/az1IaZ5a+EUuvD7KFOu9x/Bd5YHyO0DIz2ls/Kl8g0ItS4X/ilEgf4T1Br0lgSg==",
+          "version": "4.8.7",
+          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.8.7.tgz",
+          "integrity": "sha512-gFOnZNYBHrEyUML0xr5NJ6edFaaKbTFX9S9kQHlYfCP0Rit/boRIz4G+Avq6/4haEKJXdGGUnoolx+5MWW2BoA==",
           "dev": true,
           "requires": {
-            "caniuse-lite": "^1.0.30001022",
-            "electron-to-chromium": "^1.3.338",
-            "node-releases": "^1.1.46"
+            "caniuse-lite": "^1.0.30001027",
+            "electron-to-chromium": "^1.3.349",
+            "node-releases": "^1.1.49"
           }
         },
         "caniuse-lite": {
-          "version": "1.0.30001023",
-          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001023.tgz",
-          "integrity": "sha512-C5TDMiYG11EOhVOA62W1p3UsJ2z4DsHtMBQtjzp3ZsUglcQn62WOUgW0y795c7A5uZ+GCEIvzkMatLIlAsbNTA==",
+          "version": "1.0.30001030",
+          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001030.tgz",
+          "integrity": "sha512-QGK0W4Ft/Ac+zTjEiRJfwDNATvS3fodDczBXrH42784kcfqcDKpEPfN08N0HQjrAp8He/Jw8QiSS9QRn7XAbUw==",
           "dev": true
         },
         "electron-to-chromium": {
-          "version": "1.3.341",
-          "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.341.tgz",
-          "integrity": "sha512-iezlV55/tan1rvdvt7yg7VHRSkt+sKfzQ16wTDqTbQqtl4+pSUkKPXpQHDvEt0c7gKcUHHwUbffOgXz6bn096g==",
+          "version": "1.3.360",
+          "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.360.tgz",
+          "integrity": "sha512-RE1pv2sjQiDRRN1nI0fJ0eQHZ9le4oobu16OArnwEUV5ycAU5SNjFyvzjZ1gPUAqBa2Ud1XagtW8j3ZXfHuQHA==",
           "dev": true
         },
         "node-releases": {
-          "version": "1.1.47",
-          "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.47.tgz",
-          "integrity": "sha512-k4xjVPx5FpwBUj0Gw7uvFOTF4Ep8Hok1I6qjwL3pLfwe7Y0REQSAqOwwv9TWBCUtMHxcXfY4PgRLRozcChvTcA==",
+          "version": "1.1.50",
+          "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.50.tgz",
+          "integrity": "sha512-lgAmPv9eYZ0bGwUYAKlr8MG6K4CvWliWqnkcT2P8mMAgVrH3lqfBPorFlxiG1pHQnqmavJZ9vbMXUTNyMLbrgQ==",
           "dev": true,
           "requires": {
             "semver": "^6.3.0"
@@ -7008,6 +7137,11 @@
       "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
       "dev": true
     },
+    "denque": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/denque/-/denque-1.4.1.tgz",
+      "integrity": "sha512-OfzPuSZKGcgr96rf1oODnfjqBFmr1DVoc/TrItj3Ohe0Ah1C5WX5Baquw/9U9KovnQ88EqmJbD66rKYUQYN1tQ=="
+    },
     "depd": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
@@ -7912,9 +8046,9 @@
       }
     },
     "eslint-plugin-import": {
-      "version": "2.20.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.20.0.tgz",
-      "integrity": "sha512-NK42oA0mUc8Ngn4kONOPsPB1XhbUvNHqF+g307dPV28aknPoiNnKLFd9em4nkswwepdF5ouieqv5Th/63U7YJQ==",
+      "version": "2.20.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.20.1.tgz",
+      "integrity": "sha512-qQHgFOTjguR+LnYRoToeZWT62XM55MBVXObHM6SKFd1VzDcX/vqT1kAz8ssqigh5eMj8qXcRoXXGZpPP6RfdCw==",
       "dev": true,
       "requires": {
         "array-includes": "^3.0.3",
@@ -8076,9 +8210,9 @@
       }
     },
     "eslint-plugin-react": {
-      "version": "7.18.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.18.0.tgz",
-      "integrity": "sha512-p+PGoGeV4SaZRDsXqdj9OWcOrOpZn8gXoGPcIQTzo2IDMbAKhNDnME9myZWqO3Ic4R3YmwAZ1lDjWl2R2hMUVQ==",
+      "version": "7.18.3",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.18.3.tgz",
+      "integrity": "sha512-Bt56LNHAQCoou88s8ViKRjMB2+36XRejCQ1VoLj716KI1MoE99HpTVvIThJ0rvFmG4E4Gsq+UgToEjn+j044Bg==",
       "dev": true,
       "requires": {
         "array-includes": "^3.1.1",
@@ -8089,7 +8223,8 @@
         "object.fromentries": "^2.0.2",
         "object.values": "^1.1.1",
         "prop-types": "^15.7.2",
-        "resolve": "^1.14.2"
+        "resolve": "^1.14.2",
+        "string.prototype.matchall": "^4.0.2"
       },
       "dependencies": {
         "es-abstract": {
@@ -8985,6 +9120,12 @@
         "write": "^0.2.1"
       },
       "dependencies": {
+        "graceful-fs": {
+          "version": "4.2.3",
+          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.3.tgz",
+          "integrity": "sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ==",
+          "dev": true
+        },
         "rimraf": {
           "version": "2.6.3",
           "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz",
@@ -9116,6 +9257,14 @@
         "graceful-fs": "^4.1.2",
         "jsonfile": "^4.0.0",
         "universalify": "^0.1.0"
+      },
+      "dependencies": {
+        "graceful-fs": {
+          "version": "4.2.3",
+          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.3.tgz",
+          "integrity": "sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ==",
+          "dev": true
+        }
       }
     },
     "fs-write-stream-atomic": {
@@ -9127,6 +9276,13 @@
         "iferr": "^0.1.5",
         "imurmurhash": "^0.1.4",
         "readable-stream": "1 || 2"
+      },
+      "dependencies": {
+        "graceful-fs": {
+          "version": "4.2.3",
+          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.3.tgz",
+          "integrity": "sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ=="
+        }
       }
     },
     "fs.realpath": {
@@ -9146,22 +9302,26 @@
       "dependencies": {
         "abbrev": {
           "version": "1.1.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
+          "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
           "optional": true
         },
         "ansi-regex": {
           "version": "2.1.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
           "optional": true
         },
         "aproba": {
           "version": "1.2.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
+          "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==",
           "optional": true
         },
         "are-we-there-yet": {
           "version": "1.1.5",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz",
+          "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==",
           "optional": true,
           "requires": {
             "delegates": "^1.0.0",
@@ -9170,12 +9330,14 @@
         },
         "balanced-match": {
           "version": "1.0.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
+          "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
           "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+          "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
           "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
@@ -9184,32 +9346,38 @@
         },
         "chownr": {
           "version": "1.1.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.1.tgz",
+          "integrity": "sha512-j38EvO5+LHX84jlo6h4UzmOwi0UgW61WRyPtJz4qaadK5eY3BTS5TY/S1Stc3Uk2lIM6TPevAlULiEJwie860g==",
           "optional": true
         },
         "code-point-at": {
           "version": "1.1.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
+          "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
           "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+          "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
           "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
+          "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
           "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
+          "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
           "optional": true
         },
         "debug": {
           "version": "4.1.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
+          "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
           "optional": true,
           "requires": {
             "ms": "^2.1.1"
@@ -9217,22 +9385,26 @@
         },
         "deep-extend": {
           "version": "0.6.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
+          "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
           "optional": true
         },
         "delegates": {
           "version": "1.0.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
+          "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
           "optional": true
         },
         "detect-libc": {
           "version": "1.0.3",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
+          "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=",
           "optional": true
         },
         "fs-minipass": {
           "version": "1.2.5",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-1.2.5.tgz",
+          "integrity": "sha512-JhBl0skXjUPCFH7x6x61gQxrKyXsxB5gcgePLZCwfyCGGsTISMoIeObbrvVeP6Xmyaudw4TT43qV2Gz+iyd2oQ==",
           "optional": true,
           "requires": {
             "minipass": "^2.2.1"
@@ -9240,12 +9412,14 @@
         },
         "fs.realpath": {
           "version": "1.0.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+          "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
           "optional": true
         },
         "gauge": {
           "version": "2.7.4",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
+          "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
           "optional": true,
           "requires": {
             "aproba": "^1.0.3",
@@ -9260,7 +9434,8 @@
         },
         "glob": {
           "version": "7.1.3",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.3.tgz",
+          "integrity": "sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==",
           "optional": true,
           "requires": {
             "fs.realpath": "^1.0.0",
@@ -9273,12 +9448,14 @@
         },
         "has-unicode": {
           "version": "2.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
+          "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
           "optional": true
         },
         "iconv-lite": {
           "version": "0.4.24",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+          "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
           "optional": true,
           "requires": {
             "safer-buffer": ">= 2.1.2 < 3"
@@ -9286,7 +9463,8 @@
         },
         "ignore-walk": {
           "version": "3.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-3.0.1.tgz",
+          "integrity": "sha512-DTVlMx3IYPe0/JJcYP7Gxg7ttZZu3IInhuEhbchuqneY9wWe5Ojy2mXLBaQFUQmo0AW2r3qG7m1mg86js+gnlQ==",
           "optional": true,
           "requires": {
             "minimatch": "^3.0.4"
@@ -9294,7 +9472,8 @@
         },
         "inflight": {
           "version": "1.0.6",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+          "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
           "optional": true,
           "requires": {
             "once": "^1.3.0",
@@ -9303,17 +9482,20 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
           "optional": true
         },
         "ini": {
           "version": "1.3.5",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
+          "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==",
           "optional": true
         },
         "is-fullwidth-code-point": {
           "version": "1.0.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
+          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
           "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
@@ -9321,12 +9503,14 @@
         },
         "isarray": {
           "version": "1.0.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
           "optional": true
         },
         "minimatch": {
           "version": "3.0.4",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
+          "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
           "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
@@ -9334,12 +9518,14 @@
         },
         "minimist": {
           "version": "0.0.8",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
+          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
           "optional": true
         },
         "minipass": {
           "version": "2.3.5",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.3.5.tgz",
+          "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==",
           "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
@@ -9348,7 +9534,8 @@
         },
         "minizlib": {
           "version": "1.2.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-1.2.1.tgz",
+          "integrity": "sha512-7+4oTUOWKg7AuL3vloEWekXY2/D20cevzsrNT2kGWm+39J9hGTCBv8VI5Pm5lXZ/o3/mdR4f8rflAPhnQb8mPA==",
           "optional": true,
           "requires": {
             "minipass": "^2.2.1"
@@ -9356,7 +9543,8 @@
         },
         "mkdirp": {
           "version": "0.5.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
+          "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
           "optional": true,
           "requires": {
             "minimist": "0.0.8"
@@ -9364,12 +9552,14 @@
         },
         "ms": {
           "version": "2.1.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
+          "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==",
           "optional": true
         },
         "needle": {
           "version": "2.3.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/needle/-/needle-2.3.0.tgz",
+          "integrity": "sha512-QBZu7aAFR0522EyaXZM0FZ9GLpq6lvQ3uq8gteiDUp7wKdy0lSd2hPlgFwVuW1CBkfEs9PfDQsQzZghLs/psdg==",
           "optional": true,
           "requires": {
             "debug": "^4.1.0",
@@ -9379,7 +9569,8 @@
         },
         "node-pre-gyp": {
           "version": "0.12.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/node-pre-gyp/-/node-pre-gyp-0.12.0.tgz",
+          "integrity": "sha512-4KghwV8vH5k+g2ylT+sLTjy5wmUOb9vPhnM8NHvRf9dHmnW/CndrFXy2aRPaPST6dugXSdHXfeaHQm77PIz/1A==",
           "optional": true,
           "requires": {
             "detect-libc": "^1.0.2",
@@ -9396,7 +9587,8 @@
         },
         "nopt": {
           "version": "4.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.1.tgz",
+          "integrity": "sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=",
           "optional": true,
           "requires": {
             "abbrev": "1",
@@ -9405,12 +9597,14 @@
         },
         "npm-bundled": {
           "version": "1.0.6",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-1.0.6.tgz",
+          "integrity": "sha512-8/JCaftHwbd//k6y2rEWp6k1wxVfpFzB6t1p825+cUb7Ym2XQfhwIC5KwhrvzZRJu+LtDE585zVaS32+CGtf0g==",
           "optional": true
         },
         "npm-packlist": {
           "version": "1.4.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.4.1.tgz",
+          "integrity": "sha512-+TcdO7HJJ8peiiYhvPxsEDhF3PJFGUGRcFsGve3vxvxdcpO2Z4Z7rkosRM0kWj6LfbK/P0gu3dzk5RU1ffvFcw==",
           "optional": true,
           "requires": {
             "ignore-walk": "^3.0.1",
@@ -9419,7 +9613,8 @@
         },
         "npmlog": {
           "version": "4.1.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
+          "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
           "optional": true,
           "requires": {
             "are-we-there-yet": "~1.1.2",
@@ -9430,17 +9625,20 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
+          "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
           "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+          "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
           "optional": true
         },
         "once": {
           "version": "1.4.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+          "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
           "optional": true,
           "requires": {
             "wrappy": "1"
@@ -9448,17 +9646,20 @@
         },
         "os-homedir": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
+          "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
           "optional": true
         },
         "os-tmpdir": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
+          "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
           "optional": true
         },
         "osenv": {
           "version": "0.1.5",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz",
+          "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==",
           "optional": true,
           "requires": {
             "os-homedir": "^1.0.0",
@@ -9467,17 +9668,20 @@
         },
         "path-is-absolute": {
           "version": "1.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+          "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
           "optional": true
         },
         "process-nextick-args": {
           "version": "2.0.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz",
+          "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==",
           "optional": true
         },
         "rc": {
           "version": "1.2.8",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
+          "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
           "optional": true,
           "requires": {
             "deep-extend": "^0.6.0",
@@ -9488,14 +9692,16 @@
           "dependencies": {
             "minimist": {
               "version": "1.2.0",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+              "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
               "optional": true
             }
           }
         },
         "readable-stream": {
           "version": "2.3.6",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
+          "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
           "optional": true,
           "requires": {
             "core-util-is": "~1.0.0",
@@ -9509,7 +9715,8 @@
         },
         "rimraf": {
           "version": "2.6.3",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz",
+          "integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==",
           "optional": true,
           "requires": {
             "glob": "^7.1.3"
@@ -9517,37 +9724,44 @@
         },
         "safe-buffer": {
           "version": "5.1.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
           "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+          "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
           "optional": true
         },
         "sax": {
           "version": "1.2.4",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
+          "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
           "optional": true
         },
         "semver": {
           "version": "5.7.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.0.tgz",
+          "integrity": "sha512-Ya52jSX2u7QKghxeoFGpLwCtGlt7j0oY9DYb5apt9nPlJ42ID+ulTXESnt/qAQcoSERyZ5sl3LDIOw0nAn/5DA==",
           "optional": true
         },
         "set-blocking": {
           "version": "2.0.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+          "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
           "optional": true
         },
         "signal-exit": {
           "version": "3.0.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
+          "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
           "optional": true
         },
         "string-width": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
           "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
@@ -9557,7 +9771,8 @@
         },
         "string_decoder": {
           "version": "1.1.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
           "optional": true,
           "requires": {
             "safe-buffer": "~5.1.0"
@@ -9565,7 +9780,8 @@
         },
         "strip-ansi": {
           "version": "3.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+          "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
           "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
@@ -9573,12 +9789,14 @@
         },
         "strip-json-comments": {
           "version": "2.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+          "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
           "optional": true
         },
         "tar": {
           "version": "4.4.8",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/tar/-/tar-4.4.8.tgz",
+          "integrity": "sha512-LzHF64s5chPQQS0IYBn9IN5h3i98c12bo4NCO7e0sGM2llXQ3p2FGC5sdENN4cTW48O915Sh+x+EXx7XW96xYQ==",
           "optional": true,
           "requires": {
             "chownr": "^1.1.1",
@@ -9592,12 +9810,14 @@
         },
         "util-deprecate": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+          "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
           "optional": true
         },
         "wide-align": {
           "version": "1.1.3",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
+          "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==",
           "optional": true,
           "requires": {
             "string-width": "^1.0.2 || 2"
@@ -9605,12 +9825,14 @@
         },
         "wrappy": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+          "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
           "optional": true
         },
         "yallist": {
           "version": "3.0.3",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.3.tgz",
+          "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==",
           "optional": true
         }
       }
@@ -9625,6 +9847,14 @@
         "inherits": "~2.0.0",
         "mkdirp": ">=0.5 0",
         "rimraf": "2"
+      },
+      "dependencies": {
+        "graceful-fs": {
+          "version": "4.2.3",
+          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.3.tgz",
+          "integrity": "sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ==",
+          "dev": true
+        }
       }
     },
     "ftp": {
@@ -10007,9 +10237,9 @@
       }
     },
     "graceful-fs": {
-      "version": "4.1.15",
-      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.15.tgz",
-      "integrity": "sha512-6uHUhOPEBgQ24HM+r6b/QwWfZq+yiFcipKFrOFiBEnWdy5sdzYoi+pJeQaPI5qOLRFqWmAXUPQNsielzdLoecA=="
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.3.tgz",
+      "integrity": "sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ=="
     },
     "growly": {
       "version": "1.3.0",
@@ -10301,6 +10531,43 @@
           "resolved": "https://registry.npmjs.org/parserlib/-/parserlib-1.1.1.tgz",
           "integrity": "sha1-pkz6ckBiQ0/fw1HJpOwtkrlMBvQ=",
           "optional": true
+        },
+        "qs": {
+          "version": "6.5.2",
+          "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
+          "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA=="
+        },
+        "request": {
+          "version": "2.88.0",
+          "resolved": "https://registry.npmjs.org/request/-/request-2.88.0.tgz",
+          "integrity": "sha512-NAqBSrijGLZdM0WZNsInLJpkJokL72XYjUpnB0iwsRgxh7dB6COrHnTBNwN0E+lHDAJzu7kLAkDeY08z2/A0hg==",
+          "requires": {
+            "aws-sign2": "~0.7.0",
+            "aws4": "^1.8.0",
+            "caseless": "~0.12.0",
+            "combined-stream": "~1.0.6",
+            "extend": "~3.0.2",
+            "forever-agent": "~0.6.1",
+            "form-data": "~2.3.2",
+            "har-validator": "~5.1.0",
+            "http-signature": "~1.2.0",
+            "is-typedarray": "~1.0.0",
+            "isstream": "~0.1.2",
+            "json-stringify-safe": "~5.0.1",
+            "mime-types": "~2.1.19",
+            "oauth-sign": "~0.9.0",
+            "performance-now": "^2.1.0",
+            "qs": "~6.5.2",
+            "safe-buffer": "^5.1.2",
+            "tough-cookie": "~2.4.3",
+            "tunnel-agent": "^0.6.0",
+            "uuid": "^3.3.2"
+          }
+        },
+        "uuid": {
+          "version": "3.4.0",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+          "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A=="
         }
       }
     },
@@ -10648,6 +10915,70 @@
         }
       }
     },
+    "internal-slot": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.2.tgz",
+      "integrity": "sha512-2cQNfwhAfJIkU4KZPkDI+Gj5yNNnbqi40W9Gge6dfnk4TocEVm00B3bdiL+JINrbGJil2TeHvM4rETGzk/f/0g==",
+      "dev": true,
+      "requires": {
+        "es-abstract": "^1.17.0-next.1",
+        "has": "^1.0.3",
+        "side-channel": "^1.0.2"
+      },
+      "dependencies": {
+        "es-abstract": {
+          "version": "1.17.4",
+          "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.4.tgz",
+          "integrity": "sha512-Ae3um/gb8F0mui/jPL+QiqmglkUsaQf7FwBEHYIFkztkneosu9imhqHpBzQ3h1vit8t5iQ74t6PEVvphBZiuiQ==",
+          "dev": true,
+          "requires": {
+            "es-to-primitive": "^1.2.1",
+            "function-bind": "^1.1.1",
+            "has": "^1.0.3",
+            "has-symbols": "^1.0.1",
+            "is-callable": "^1.1.5",
+            "is-regex": "^1.0.5",
+            "object-inspect": "^1.7.0",
+            "object-keys": "^1.1.1",
+            "object.assign": "^4.1.0",
+            "string.prototype.trimleft": "^2.1.1",
+            "string.prototype.trimright": "^2.1.1"
+          }
+        },
+        "es-to-primitive": {
+          "version": "1.2.1",
+          "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
+          "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
+          "dev": true,
+          "requires": {
+            "is-callable": "^1.1.4",
+            "is-date-object": "^1.0.1",
+            "is-symbol": "^1.0.2"
+          }
+        },
+        "has-symbols": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.1.tgz",
+          "integrity": "sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg==",
+          "dev": true
+        },
+        "is-callable": {
+          "version": "1.1.5",
+          "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.1.5.tgz",
+          "integrity": "sha512-ESKv5sMCJB2jnHTWZ3O5itG+O128Hsus4K4Qh1h2/cgn2vbgnLSVqfV46AeJA9D5EeeLa9w81KUXMtn34zhX+Q==",
+          "dev": true
+        },
+        "is-regex": {
+          "version": "1.0.5",
+          "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.0.5.tgz",
+          "integrity": "sha512-vlKW17SNq44owv5AQR3Cq0bQPEb8+kF3UKZ2fiZNOWtztYE5i0CzCZxFDwO58qAOWtxdBRVO/V5Qin1wjCqFYQ==",
+          "dev": true,
+          "requires": {
+            "has": "^1.0.3"
+          }
+        }
+      }
+    },
     "interpret": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.2.0.tgz",
@@ -11906,6 +12237,12 @@
             }
           }
         },
+        "graceful-fs": {
+          "version": "4.2.3",
+          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.3.tgz",
+          "integrity": "sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ==",
+          "dev": true
+        },
         "is-accessor-descriptor": {
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
@@ -12424,6 +12761,14 @@
         "jest-worker": "^24.6.0",
         "source-map-support": "^0.5.6",
         "throat": "^4.0.0"
+      },
+      "dependencies": {
+        "graceful-fs": {
+          "version": "4.2.3",
+          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.3.tgz",
+          "integrity": "sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ==",
+          "dev": true
+        }
       }
     },
     "jest-runtime": {
@@ -12455,6 +12800,14 @@
         "slash": "^2.0.0",
         "strip-bom": "^3.0.0",
         "yargs": "^13.3.0"
+      },
+      "dependencies": {
+        "graceful-fs": {
+          "version": "4.2.3",
+          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.3.tgz",
+          "integrity": "sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ==",
+          "dev": true
+        }
       }
     },
     "jest-serializer": {
@@ -12518,6 +12871,12 @@
           "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
           "dev": true
         },
+        "graceful-fs": {
+          "version": "4.2.3",
+          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.3.tgz",
+          "integrity": "sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ==",
+          "dev": true
+        },
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -12576,6 +12935,11 @@
         }
       }
     },
+    "jmespath": {
+      "version": "0.15.0",
+      "resolved": "https://registry.npmjs.org/jmespath/-/jmespath-0.15.0.tgz",
+      "integrity": "sha1-o/Iiqarp+Wb10nx5ZRDigJF2Qhc="
+    },
     "jquery": {
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.4.1.tgz",
@@ -12762,6 +13126,15 @@
       "dev": true,
       "requires": {
         "graceful-fs": "^4.1.6"
+      },
+      "dependencies": {
+        "graceful-fs": {
+          "version": "4.2.3",
+          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.3.tgz",
+          "integrity": "sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ==",
+          "dev": true,
+          "optional": true
+        }
       }
     },
     "jsprim": {
@@ -12963,6 +13336,12 @@
         "strip-bom": "^3.0.0"
       },
       "dependencies": {
+        "graceful-fs": {
+          "version": "4.2.3",
+          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.3.tgz",
+          "integrity": "sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ==",
+          "dev": true
+        },
         "pify": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
@@ -13132,6 +13511,11 @@
       "resolved": "https://registry.npmjs.org/lodash.foreach/-/lodash.foreach-4.5.0.tgz",
       "integrity": "sha1-Gmo16s5AEoDH8G3d7DUWWrJ+PlM="
     },
+    "lodash.isempty": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.isempty/-/lodash.isempty-4.4.0.tgz",
+      "integrity": "sha1-b4bL7di+TsmHvpqvM8loTbGzHn4="
+    },
     "lodash.isequal": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
@@ -13490,6 +13874,14 @@
             "pify": "^2.0.0",
             "pinkie-promise": "^2.0.0",
             "strip-bom": "^2.0.0"
+          },
+          "dependencies": {
+            "graceful-fs": {
+              "version": "4.2.3",
+              "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.3.tgz",
+              "integrity": "sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ==",
+              "dev": true
+            }
           }
         },
         "parse-json": {
@@ -13519,6 +13911,14 @@
             "graceful-fs": "^4.1.2",
             "pify": "^2.0.0",
             "pinkie-promise": "^2.0.0"
+          },
+          "dependencies": {
+            "graceful-fs": {
+              "version": "4.2.3",
+              "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.3.tgz",
+              "integrity": "sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ==",
+              "dev": true
+            }
           }
         },
         "pify": {
@@ -13610,16 +14010,16 @@
       "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg=="
     },
     "mime-db": {
-      "version": "1.40.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.40.0.tgz",
-      "integrity": "sha512-jYdeOMPy9vnxEqFRRo6ZvTZ8d9oPb+k18PKoYNYUe2stVEBPPwsln/qWzdbmaIvnhZ9v2P+CuecK+fpUfsV2mA=="
+      "version": "1.43.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.43.0.tgz",
+      "integrity": "sha512-+5dsGEEovYbT8UY9yD7eE4XTc4UwJ1jBYlgaQQF38ENsKR3wj/8q8RFZrF9WIZpB2V1ArTVFUva8sAul1NzRzQ=="
     },
     "mime-types": {
-      "version": "2.1.24",
-      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.24.tgz",
-      "integrity": "sha512-WaFHS3MCl5fapm3oLxU4eYDw77IQM2ACcxQ9RIxfaC3ooc6PFuBMGZZsYpvoXS5D5QTWPieo1jjLdAm3TBP3cQ==",
+      "version": "2.1.26",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.26.tgz",
+      "integrity": "sha512-01paPWYgLrkqAyrlDorC1uDwl2p3qZT7yl806vW7DvDoxwXi46jsjFbg+WdwotBIk6/MbEhO/dh5aZ5sNj/dWQ==",
       "requires": {
-        "mime-db": "1.40.0"
+        "mime-db": "1.43.0"
       }
     },
     "mimer": {
@@ -14466,13 +14866,13 @@
       }
     },
     "mongoose": {
-      "version": "5.8.10",
-      "resolved": "https://registry.npmjs.org/mongoose/-/mongoose-5.8.10.tgz",
-      "integrity": "sha512-3sRiZhtMIB4egqxWbry23C+xX87kQ0aTvPtMXxWXCBGfCRkXMJl/CLiftYcle/JPy09Lv5u+ZCBpIJUgwDMtxw==",
+      "version": "5.9.2",
+      "resolved": "https://registry.npmjs.org/mongoose/-/mongoose-5.9.2.tgz",
+      "integrity": "sha512-Sa1qfqBvUfAgsrXpZjbBoIx8PEDUJSKF5Ous8gnBFI7TPiueSgJjg6GRA7A0teU8AB/vd0h8rl1rD5RQNfWhIw==",
       "requires": {
         "bson": "~1.1.1",
         "kareem": "2.3.1",
-        "mongodb": "3.4.1",
+        "mongodb": "3.5.3",
         "mongoose-legacy-pluralize": "1.0.2",
         "mpath": "0.6.0",
         "mquery": "3.2.2",
@@ -14483,17 +14883,28 @@
         "sliced": "1.0.1"
       },
       "dependencies": {
+        "bl": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/bl/-/bl-2.2.0.tgz",
+          "integrity": "sha512-wbgvOpqopSr7uq6fJrLH8EsvYMJf9gzfo2jCsL2eTy75qXPukA4pCgHamOQkZtY5vmfVtjB+P3LNlMHW5CEZXA==",
+          "requires": {
+            "readable-stream": "^2.3.5",
+            "safe-buffer": "^5.1.1"
+          }
+        },
         "bson": {
           "version": "1.1.3",
           "resolved": "https://registry.npmjs.org/bson/-/bson-1.1.3.tgz",
           "integrity": "sha512-TdiJxMVnodVS7r0BdL42y/pqC9cL2iKynVwA0Ho3qbsQYr428veL3l7BQyuqiw+Q5SqqoT0m4srSY/BlZ9AxXg=="
         },
         "mongodb": {
-          "version": "3.4.1",
-          "resolved": "https://registry.npmjs.org/mongodb/-/mongodb-3.4.1.tgz",
-          "integrity": "sha512-juqt5/Z42J4DcE7tG7UdVaTKmUC6zinF4yioPfpeOSNBieWSK6qCY+0tfGQcHLKrauWPDdMZVROHJOa8q2pWsA==",
+          "version": "3.5.3",
+          "resolved": "https://registry.npmjs.org/mongodb/-/mongodb-3.5.3.tgz",
+          "integrity": "sha512-II7P7A3XUdPiXRgcN96qIoRa1oesM6qLNZkzfPluNZjVkgQk3jnQwOT6/uDk4USRDTTLjNFw2vwfmbRGTA7msg==",
           "requires": {
+            "bl": "^2.2.0",
             "bson": "^1.1.1",
+            "denque": "^1.4.1",
             "require_optional": "^1.0.1",
             "safe-buffer": "^5.1.2",
             "saslprep": "^1.0.0"
@@ -14641,11 +15052,6 @@
         "lie": "*"
       }
     },
-    "natives": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/natives/-/natives-1.1.6.tgz",
-      "integrity": "sha512-6+TDFewD4yxY14ptjKaS63GVdtKiES1pTPyxn9Jb0rBqPMZ7VcCiooEhPNsr+mqHtMGxa/5c/HhcC4uPEUw/nA=="
-    },
     "natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
@@ -14770,6 +15176,12 @@
         "which": "1"
       },
       "dependencies": {
+        "graceful-fs": {
+          "version": "4.2.3",
+          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.3.tgz",
+          "integrity": "sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ==",
+          "dev": true
+        },
         "nopt": {
           "version": "3.0.6",
           "resolved": "https://registry.npmjs.org/nopt/-/nopt-3.0.6.tgz",
@@ -16034,9 +16446,9 @@
       }
     },
     "pako": {
-      "version": "1.0.10",
-      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.10.tgz",
-      "integrity": "sha512-0DTvPVU3ed8+HNXOu5Bs+o//Mbdj9VNQMUOe9oKCwh8l0GNwpTDMKCWbRjgtD291AWnkAgkqA/LOnQS8AmS1tw=="
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="
     },
     "parallel-transform": {
       "version": "1.2.0",
@@ -16185,6 +16597,14 @@
         "passport-oauth2": "1.x.x"
       }
     },
+    "passport-http": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/passport-http/-/passport-http-0.3.0.tgz",
+      "integrity": "sha1-juU9Q4C+nGDfIVGSUCmCb3cRVgM=",
+      "requires": {
+        "passport-strategy": "1.x.x"
+      }
+    },
     "passport-local": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/passport-local/-/passport-local-1.0.0.tgz",
@@ -18737,6 +19157,11 @@
             }
           }
         },
+        "graceful-fs": {
+          "version": "4.2.3",
+          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.3.tgz",
+          "integrity": "sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ=="
+        },
         "is-accessor-descriptor": {
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
@@ -18884,6 +19309,38 @@
         "symbol-observable": "^1.0.3"
       }
     },
+    "redux-auth-wrapper": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/redux-auth-wrapper/-/redux-auth-wrapper-2.1.0.tgz",
+      "integrity": "sha512-UtU64cJk2pWcMMfgWIVoyBVG0p8ZiGJ++vqrvQ5r5ghZZOLRq+M5aTS0RRNneiB+aCCZBzI+txFSaKYVRrv8qQ==",
+      "requires": {
+        "hoist-non-react-statics": "^3.3.0",
+        "invariant": "^2.2.4",
+        "lodash.isempty": "^4.4.0",
+        "prop-types": "^15.5.0",
+        "query-string": "^5.1.1"
+      },
+      "dependencies": {
+        "hoist-non-react-statics": {
+          "version": "3.3.2",
+          "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+          "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+          "requires": {
+            "react-is": "^16.7.0"
+          }
+        },
+        "query-string": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/query-string/-/query-string-5.1.1.tgz",
+          "integrity": "sha512-gjWOsm2SoGlgLEdAGt7a6slVOk9mGiXmPFMqrEhLQ68rhQuBnpfs3+EmlvqKyxnCo9/PPlF+9MtY02S1aFg+Jw==",
+          "requires": {
+            "decode-uri-component": "^0.2.0",
+            "object-assign": "^4.1.0",
+            "strict-uri-encode": "^1.0.0"
+          }
+        }
+      }
+    },
     "redux-devtools": {
       "version": "3.5.0",
       "resolved": "https://registry.npmjs.org/redux-devtools/-/redux-devtools-3.5.0.tgz",
@@ -19017,6 +19474,69 @@
       "resolved": "https://registry.npmjs.org/regexp-clone/-/regexp-clone-1.0.0.tgz",
       "integrity": "sha512-TuAasHQNamyyJ2hb97IuBEif4qBHGjPHBS64sZwytpLEqtBQ1gPJTnOaQ6qmpET16cK14kkjbazl6+p0RRv0yw=="
     },
+    "regexp.prototype.flags": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz",
+      "integrity": "sha512-2+Q0C5g951OlYlJz6yu5/M33IcsESLlLfsyIaLJaG4FA2r4yP8MvVMJUUP/fVBkSpbbbZlS5gynbEWLipiiXiQ==",
+      "dev": true,
+      "requires": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.17.0-next.1"
+      },
+      "dependencies": {
+        "es-abstract": {
+          "version": "1.17.4",
+          "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.4.tgz",
+          "integrity": "sha512-Ae3um/gb8F0mui/jPL+QiqmglkUsaQf7FwBEHYIFkztkneosu9imhqHpBzQ3h1vit8t5iQ74t6PEVvphBZiuiQ==",
+          "dev": true,
+          "requires": {
+            "es-to-primitive": "^1.2.1",
+            "function-bind": "^1.1.1",
+            "has": "^1.0.3",
+            "has-symbols": "^1.0.1",
+            "is-callable": "^1.1.5",
+            "is-regex": "^1.0.5",
+            "object-inspect": "^1.7.0",
+            "object-keys": "^1.1.1",
+            "object.assign": "^4.1.0",
+            "string.prototype.trimleft": "^2.1.1",
+            "string.prototype.trimright": "^2.1.1"
+          }
+        },
+        "es-to-primitive": {
+          "version": "1.2.1",
+          "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
+          "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
+          "dev": true,
+          "requires": {
+            "is-callable": "^1.1.4",
+            "is-date-object": "^1.0.1",
+            "is-symbol": "^1.0.2"
+          }
+        },
+        "has-symbols": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.1.tgz",
+          "integrity": "sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg==",
+          "dev": true
+        },
+        "is-callable": {
+          "version": "1.1.5",
+          "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.1.5.tgz",
+          "integrity": "sha512-ESKv5sMCJB2jnHTWZ3O5itG+O128Hsus4K4Qh1h2/cgn2vbgnLSVqfV46AeJA9D5EeeLa9w81KUXMtn34zhX+Q==",
+          "dev": true
+        },
+        "is-regex": {
+          "version": "1.0.5",
+          "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.0.5.tgz",
+          "integrity": "sha512-vlKW17SNq44owv5AQR3Cq0bQPEb8+kF3UKZ2fiZNOWtztYE5i0CzCZxFDwO58qAOWtxdBRVO/V5Qin1wjCqFYQ==",
+          "dev": true,
+          "requires": {
+            "has": "^1.0.3"
+          }
+        }
+      }
+    },
     "regexpp": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-1.1.0.tgz",
@@ -19063,9 +19583,9 @@
       "dev": true
     },
     "regjsparser": {
-      "version": "0.6.2",
-      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.6.2.tgz",
-      "integrity": "sha512-E9ghzUtoLwDekPT0DYCp+c4h+bvuUpe6rRHCTYn6eGoqj1LgKXxT6I0Il4WbjhQkOghzi/V+y03bPKvbllL93Q==",
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.6.3.tgz",
+      "integrity": "sha512-8uZvYbnfAtEm9Ab8NTb3hdLwL4g/LQzEYP7Xs27T96abJCCE2d6r3cPZPQEsLKy0vRSGVNG+/zVGtLr86HQduA==",
       "dev": true,
       "requires": {
         "jsesc": "~0.5.0"
@@ -19109,9 +19629,9 @@
       }
     },
     "request": {
-      "version": "2.88.0",
-      "resolved": "https://registry.npmjs.org/request/-/request-2.88.0.tgz",
-      "integrity": "sha512-NAqBSrijGLZdM0WZNsInLJpkJokL72XYjUpnB0iwsRgxh7dB6COrHnTBNwN0E+lHDAJzu7kLAkDeY08z2/A0hg==",
+      "version": "2.88.2",
+      "resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
+      "integrity": "sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==",
       "requires": {
         "aws-sign2": "~0.7.0",
         "aws4": "^1.8.0",
@@ -19120,7 +19640,7 @@
         "extend": "~3.0.2",
         "forever-agent": "~0.6.1",
         "form-data": "~2.3.2",
-        "har-validator": "~5.1.0",
+        "har-validator": "~5.1.3",
         "http-signature": "~1.2.0",
         "is-typedarray": "~1.0.0",
         "isstream": "~0.1.2",
@@ -19130,7 +19650,7 @@
         "performance-now": "^2.1.0",
         "qs": "~6.5.2",
         "safe-buffer": "^5.1.2",
-        "tough-cookie": "~2.4.3",
+        "tough-cookie": "~2.5.0",
         "tunnel-agent": "^0.6.0",
         "uuid": "^3.3.2"
       },
@@ -19140,10 +19660,19 @@
           "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
           "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA=="
         },
+        "tough-cookie": {
+          "version": "2.5.0",
+          "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
+          "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
+          "requires": {
+            "psl": "^1.1.28",
+            "punycode": "^2.1.1"
+          }
+        },
         "uuid": {
-          "version": "3.3.2",
-          "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.2.tgz",
-          "integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA=="
+          "version": "3.4.0",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+          "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A=="
         }
       }
     },
@@ -19398,42 +19927,6 @@
         "rx-lite": "*"
       }
     },
-    "s3": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/s3/-/s3-4.4.0.tgz",
-      "integrity": "sha1-VqT3dVFae2ucjlxrGrUfkDdmnx8=",
-      "requires": {
-        "aws-sdk": "~2.0.31",
-        "fd-slicer": "~1.0.0",
-        "findit2": "~2.2.3",
-        "graceful-fs": "~3.0.5",
-        "mime": "~1.2.11",
-        "mkdirp": "~0.5.0",
-        "pend": "~1.2.0",
-        "rimraf": "~2.2.8",
-        "streamsink": "~1.2.0"
-      },
-      "dependencies": {
-        "graceful-fs": {
-          "version": "3.0.11",
-          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-3.0.11.tgz",
-          "integrity": "sha1-dhPHeKGv6mLyXGMKCG1/Osu92Bg=",
-          "requires": {
-            "natives": "^1.1.0"
-          }
-        },
-        "mime": {
-          "version": "1.2.11",
-          "resolved": "https://registry.npmjs.org/mime/-/mime-1.2.11.tgz",
-          "integrity": "sha1-WCA+7Ybjpe8XrtK32evUfwpg3RA="
-        },
-        "rimraf": {
-          "version": "2.2.8",
-          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.2.8.tgz",
-          "integrity": "sha1-5Dm+Kq7jJzIZUnMPmaiSnk/FBYI="
-        }
-      }
-    },
     "s3-policy": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/s3-policy/-/s3-policy-0.2.0.tgz",
@@ -19876,6 +20369,14 @@
             "pify": "^2.0.0",
             "pinkie-promise": "^2.0.0",
             "strip-bom": "^2.0.0"
+          },
+          "dependencies": {
+            "graceful-fs": {
+              "version": "4.2.3",
+              "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.3.tgz",
+              "integrity": "sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ==",
+              "dev": true
+            }
           }
         },
         "parse-json": {
@@ -19905,6 +20406,14 @@
             "graceful-fs": "^4.1.2",
             "pify": "^2.0.0",
             "pinkie-promise": "^2.0.0"
+          },
+          "dependencies": {
+            "graceful-fs": {
+              "version": "4.2.3",
+              "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.3.tgz",
+              "integrity": "sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ==",
+              "dev": true
+            }
           }
         },
         "pify": {
@@ -20254,6 +20763,69 @@
         "nanoid": "^2.1.0"
       }
     },
+    "side-channel": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.2.tgz",
+      "integrity": "sha512-7rL9YlPHg7Ancea1S96Pa8/QWb4BtXL/TZvS6B8XFetGBeuhAsfmUspK6DokBeZ64+Kj9TCNRD/30pVz1BvQNA==",
+      "dev": true,
+      "requires": {
+        "es-abstract": "^1.17.0-next.1",
+        "object-inspect": "^1.7.0"
+      },
+      "dependencies": {
+        "es-abstract": {
+          "version": "1.17.4",
+          "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.4.tgz",
+          "integrity": "sha512-Ae3um/gb8F0mui/jPL+QiqmglkUsaQf7FwBEHYIFkztkneosu9imhqHpBzQ3h1vit8t5iQ74t6PEVvphBZiuiQ==",
+          "dev": true,
+          "requires": {
+            "es-to-primitive": "^1.2.1",
+            "function-bind": "^1.1.1",
+            "has": "^1.0.3",
+            "has-symbols": "^1.0.1",
+            "is-callable": "^1.1.5",
+            "is-regex": "^1.0.5",
+            "object-inspect": "^1.7.0",
+            "object-keys": "^1.1.1",
+            "object.assign": "^4.1.0",
+            "string.prototype.trimleft": "^2.1.1",
+            "string.prototype.trimright": "^2.1.1"
+          }
+        },
+        "es-to-primitive": {
+          "version": "1.2.1",
+          "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
+          "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
+          "dev": true,
+          "requires": {
+            "is-callable": "^1.1.4",
+            "is-date-object": "^1.0.1",
+            "is-symbol": "^1.0.2"
+          }
+        },
+        "has-symbols": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.1.tgz",
+          "integrity": "sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg==",
+          "dev": true
+        },
+        "is-callable": {
+          "version": "1.1.5",
+          "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.1.5.tgz",
+          "integrity": "sha512-ESKv5sMCJB2jnHTWZ3O5itG+O128Hsus4K4Qh1h2/cgn2vbgnLSVqfV46AeJA9D5EeeLa9w81KUXMtn34zhX+Q==",
+          "dev": true
+        },
+        "is-regex": {
+          "version": "1.0.5",
+          "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.0.5.tgz",
+          "integrity": "sha512-vlKW17SNq44owv5AQR3Cq0bQPEb8+kF3UKZ2fiZNOWtztYE5i0CzCZxFDwO58qAOWtxdBRVO/V5Qin1wjCqFYQ==",
+          "dev": true,
+          "requires": {
+            "has": "^1.0.3"
+          }
+        }
+      }
+    },
     "sift": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/sift/-/sift-7.0.1.tgz",
@@ -20798,6 +21370,73 @@
         }
       }
     },
+    "string.prototype.matchall": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.2.tgz",
+      "integrity": "sha512-N/jp6O5fMf9os0JU3E72Qhf590RSRZU/ungsL/qJUYVTNv7hTG0P/dbPjxINVN9jpscu3nzYwKESU3P3RY5tOg==",
+      "dev": true,
+      "requires": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.17.0",
+        "has-symbols": "^1.0.1",
+        "internal-slot": "^1.0.2",
+        "regexp.prototype.flags": "^1.3.0",
+        "side-channel": "^1.0.2"
+      },
+      "dependencies": {
+        "es-abstract": {
+          "version": "1.17.4",
+          "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.4.tgz",
+          "integrity": "sha512-Ae3um/gb8F0mui/jPL+QiqmglkUsaQf7FwBEHYIFkztkneosu9imhqHpBzQ3h1vit8t5iQ74t6PEVvphBZiuiQ==",
+          "dev": true,
+          "requires": {
+            "es-to-primitive": "^1.2.1",
+            "function-bind": "^1.1.1",
+            "has": "^1.0.3",
+            "has-symbols": "^1.0.1",
+            "is-callable": "^1.1.5",
+            "is-regex": "^1.0.5",
+            "object-inspect": "^1.7.0",
+            "object-keys": "^1.1.1",
+            "object.assign": "^4.1.0",
+            "string.prototype.trimleft": "^2.1.1",
+            "string.prototype.trimright": "^2.1.1"
+          }
+        },
+        "es-to-primitive": {
+          "version": "1.2.1",
+          "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
+          "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
+          "dev": true,
+          "requires": {
+            "is-callable": "^1.1.4",
+            "is-date-object": "^1.0.1",
+            "is-symbol": "^1.0.2"
+          }
+        },
+        "has-symbols": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.1.tgz",
+          "integrity": "sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg==",
+          "dev": true
+        },
+        "is-callable": {
+          "version": "1.1.5",
+          "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.1.5.tgz",
+          "integrity": "sha512-ESKv5sMCJB2jnHTWZ3O5itG+O128Hsus4K4Qh1h2/cgn2vbgnLSVqfV46AeJA9D5EeeLa9w81KUXMtn34zhX+Q==",
+          "dev": true
+        },
+        "is-regex": {
+          "version": "1.0.5",
+          "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.0.5.tgz",
+          "integrity": "sha512-vlKW17SNq44owv5AQR3Cq0bQPEb8+kF3UKZ2fiZNOWtztYE5i0CzCZxFDwO58qAOWtxdBRVO/V5Qin1wjCqFYQ==",
+          "dev": true,
+          "requires": {
+            "has": "^1.0.3"
+          }
+        }
+      }
+    },
     "string.prototype.trim": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.1.2.tgz",
@@ -21367,9 +22006,9 @@
       }
     },
     "tslib": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
-      "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ=="
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.11.0.tgz",
+      "integrity": "sha512-BmndXUtiTn/VDDrJzQE7Mm22Ix3PxgLltW9bSNLoeCY31gnG2OPx0QqJnuc9oMIKioYrz487i6K9o4Pdn0j+Kg=="
     },
     "tsscmp": {
       "version": "1.0.6",
@@ -22276,9 +22915,9 @@
       "integrity": "sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg=="
     },
     "webpack": {
-      "version": "4.41.5",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.41.5.tgz",
-      "integrity": "sha512-wp0Co4vpyumnp3KlkmpM5LWuzvZYayDwM2n17EHFr4qxBBbRokC7DJawPJC7TfSFZ9HZ6GsdH40EBj4UV0nmpw==",
+      "version": "4.41.6",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.41.6.tgz",
+      "integrity": "sha512-yxXfV0Zv9WMGRD+QexkZzmGIh54bsvEs+9aRWxnN8erLWEOehAKUTeNBoUbA6HPEZPlRo7KDi2ZcNveoZgK9MA==",
       "requires": {
         "@webassemblyjs/ast": "1.8.5",
         "@webassemblyjs/helper-module-context": "1.8.5",
@@ -22311,9 +22950,9 @@
           "integrity": "sha512-gac8OEcQ2Li1dxIEWGZzsp2BitJxwkwcOm0zHAJLcPJaVvm58FRnk6RkuLRpU1EujipU2ZFODv2P9DLMfnV8mw=="
         },
         "ajv": {
-          "version": "6.11.0",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.11.0.tgz",
-          "integrity": "sha512-nCprB/0syFYy9fVYU1ox1l2KN8S9I+tziH8D4zdZuLT3N6RMlGSGt5FSTpAiHB/Whv8Qs1cWHma1aMKZyaHRKA==",
+          "version": "6.12.0",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.0.tgz",
+          "integrity": "sha512-D6gFiFA0RRLyUbvijN74DWAjXSFxWKaWP7mldxkVhyhAV3+SWA9HEJPHQ2c9soIeTFJqcSdFDGFgdqs1iUU2Hw==",
           "requires": {
             "fast-deep-equal": "^3.1.1",
             "fast-json-stable-stringify": "^2.0.0",
@@ -22604,9 +23243,9 @@
       }
     },
     "webpack-cli": {
-      "version": "3.3.10",
-      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-3.3.10.tgz",
-      "integrity": "sha512-u1dgND9+MXaEt74sJR4PR7qkPxXUSQ0RXYq8x1L6Jg1MYVEmGPrH6Ah6C4arD4r0J1P5HKjRqpab36k0eIzPqg==",
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-3.3.11.tgz",
+      "integrity": "sha512-dXlfuml7xvAFwYUPsrtQAA9e4DOe58gnzSxhgrO/ZM/gyXTBowrsYeubyN4mqGhYdpXMFNyQ6emjJS9M7OBd4g==",
       "dev": true,
       "requires": {
         "chalk": "2.4.2",
@@ -22946,6 +23585,14 @@
         "graceful-fs": "^4.1.11",
         "imurmurhash": "^0.1.4",
         "signal-exit": "^3.0.2"
+      },
+      "dependencies": {
+        "graceful-fs": {
+          "version": "4.2.3",
+          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.3.tgz",
+          "integrity": "sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ==",
+          "dev": true
+        }
       }
     },
     "ws": {
@@ -22984,26 +23631,6 @@
       "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-2.0.1.tgz",
       "integrity": "sha1-TYuPHszTQZqjYgYb7O9RXh5VljU="
     },
-    "xml2js": {
-      "version": "0.2.6",
-      "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.2.6.tgz",
-      "integrity": "sha1-0gnE5N2h/JxFIUHvQcB39a399sQ=",
-      "requires": {
-        "sax": "0.4.2"
-      },
-      "dependencies": {
-        "sax": {
-          "version": "0.4.2",
-          "resolved": "https://registry.npmjs.org/sax/-/sax-0.4.2.tgz",
-          "integrity": "sha1-OfO2AXM9a+yXEFskKipA/Wl4rDw="
-        }
-      }
-    },
-    "xmlbuilder": {
-      "version": "0.4.2",
-      "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-0.4.2.tgz",
-      "integrity": "sha1-F3bWXz/brUcKCNhgTN6xxOVA/4M="
-    },
     "xmlhttprequest": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/xmlhttprequest/-/xmlhttprequest-1.8.0.tgz",
diff --git a/package.json b/package.json
index 20a2c64d..a8b71f7b 100644
--- a/package.json
+++ b/package.json
@@ -56,7 +56,7 @@
     "@babel/plugin-syntax-import-meta": "^7.8.3",
     "@babel/plugin-transform-react-constant-elements": "^7.8.3",
     "@babel/plugin-transform-react-inline-elements": "^7.8.3",
-    "@babel/preset-env": "^7.8.3",
+    "@babel/preset-env": "^7.8.4",
     "@babel/preset-react": "^7.8.3",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^9.0.0",
@@ -69,9 +69,9 @@
     "enzyme-adapter-react-16": "^1.15.2",
     "eslint": "^4.19.1",
     "eslint-config-airbnb": "^16.1.0",
-    "eslint-plugin-import": "^2.20.0",
+    "eslint-plugin-import": "^2.20.1",
     "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-react": "^7.18.0",
+    "eslint-plugin-react": "^7.18.3",
     "file-loader": "^2.0.0",
     "jest": "^24.9.0",
     "mini-css-extract-plugin": "^0.8.2",
@@ -87,16 +87,17 @@
     "sass-loader": "^6.0.7",
     "style-loader": "^1.1.3",
     "terser-webpack-plugin": "^1.4.3",
-    "webpack-cli": "^3.3.10",
+    "webpack-cli": "^3.3.11",
     "webpack-manifest-plugin": "^2.2.0",
     "webpack-node-externals": "^1.7.2"
   },
   "engines": {
-    "node": "11.15.0",
-    "npm": "6.7.0"
+    "node": "12.16.1",
+    "npm": "6.13.4"
   },
   "dependencies": {
-    "@babel/core": "^7.8.3",
+    "@auth0/s3": "^1.0.0",
+    "@babel/core": "^7.8.4",
     "@babel/polyfill": "^7.8.3",
     "@babel/register": "^7.8.3",
     "archiver": "^1.1.0",
@@ -108,7 +109,7 @@
     "bson-objectid": "^1.3.0",
     "classnames": "^2.2.6",
     "clipboard": "^1.7.1",
-    "codemirror": "^5.51.0",
+    "codemirror": "^5.52.0",
     "connect-mongo": "^1.3.2",
     "console-feed": "^2.8.11",
     "cookie-parser": "^1.4.3",
@@ -133,15 +134,17 @@
     "jshint": "^2.11.0",
     "lodash": "^4.17.15",
     "loop-protect": "github:catarak/loop-protect",
+    "mime-types": "^2.1.26",
     "mjml": "^3.3.2",
     "mockingoose": "^2.13.2",
-    "mongoose": "^5.8.10",
+    "mongoose": "^5.9.2",
     "node-uuid": "^1.4.7",
     "nodemailer": "^2.6.4",
     "nodemailer-mailgun-transport": "^1.4.0",
     "passport": "^0.3.2",
     "passport-github": "^1.1.0",
     "passport-google-oauth20": "^1.0.0",
+    "passport-http": "^0.3.0",
     "passport-local": "^1.0.0",
     "pretty-bytes": "^3.0.1",
     "primer-tooltips": "^1.5.11",
@@ -157,15 +160,15 @@
     "react-split-pane": "^0.1.89",
     "react-tabs": "^2.3.1",
     "redux": "^3.7.2",
+    "redux-auth-wrapper": "^2.1.0",
     "redux-devtools": "^3.4.2",
     "redux-devtools-dock-monitor": "^1.1.3",
     "redux-devtools-log-monitor": "^1.4.0",
     "redux-form": "^5.3.3",
     "redux-thunk": "^2.3.0",
-    "request": "^2.88.0",
+    "request": "^2.88.2",
     "request-promise": "^4.2.5",
     "reselect": "^4.0.0",
-    "s3": "^4.4.0",
     "s3-policy": "^0.2.0",
     "sass-extract": "^2.1.0",
     "sass-extract-js": "^0.4.0",
@@ -176,7 +179,7 @@
     "slugify": "^1.3.6",
     "srcdoc-polyfill": "^0.2.0",
     "url": "^0.11.0",
-    "webpack": "^4.41.5",
+    "webpack": "^4.41.6",
     "webpack-dev-middleware": "^2.0.6",
     "webpack-hot-middleware": "^2.24.3",
     "xhr": "^2.5.0"
diff --git a/server/config/passport.js b/server/config/passport.js
index 17975c02..4c739138 100644
--- a/server/config/passport.js
+++ b/server/config/passport.js
@@ -1,14 +1,15 @@
 import slugify from 'slugify';
 import friendlyWords from 'friendly-words';
+import lodash from 'lodash';
+
+import passport from 'passport';
+import GitHubStrategy from 'passport-github';
+import LocalStrategy from 'passport-local';
+import GoogleStrategy from 'passport-google-oauth20';
+import { BasicStrategy } from 'passport-http';
+
 import User from '../models/user';
 
-const lodash = require('lodash');
-const passport = require('passport');
-const GitHubStrategy = require('passport-github').Strategy;
-const LocalStrategy = require('passport-local').Strategy;
-const GoogleStrategy = require('passport-google-oauth20').Strategy;
-
-
 passport.serializeUser((user, done) => {
   done(null, user.id);
 });
@@ -38,6 +39,24 @@ passport.use(new LocalStrategy({ usernameField: 'email' }, (email, password, don
     .catch(err => done(null, false, { msg: err }));
 }));
 
+/**
+ * Authentificate using Basic Auth (Username + Api Key)
+ */
+passport.use(new BasicStrategy((userid, key, done) => {
+  User.findOne({ username: userid }, (err, user) => { // eslint-disable-line consistent-return
+    if (err) { return done(err); }
+    if (!user) { return done(null, false); }
+    user.findMatchingKey(key, (innerErr, isMatch, keyDocument) => {
+      if (isMatch) {
+        keyDocument.lastUsedAt = Date.now();
+        user.save();
+        return done(null, user);
+      }
+      return done(null, false, { msg: 'Invalid username or API key' });
+    });
+  });
+}));
+
 /*
   Input:
   [
diff --git a/server/controllers/__mocks__/aws.controller.js b/server/controllers/__mocks__/aws.controller.js
new file mode 100644
index 00000000..9e5709c4
--- /dev/null
+++ b/server/controllers/__mocks__/aws.controller.js
@@ -0,0 +1,5 @@
+export const getObjectKey = jest.mock();
+export const deleteObjectsFromS3 = jest.fn();
+export const signS3 = jest.fn();
+export const copyObjectInS3 = jest.fn();
+export const listObjectsInS3ForUser = jest.fn();
diff --git a/server/controllers/__test__/project.controller.test.js b/server/controllers/__test__/project.controller.test.js
deleted file mode 100644
index e0852e61..00000000
--- a/server/controllers/__test__/project.controller.test.js
+++ /dev/null
@@ -1,155 +0,0 @@
-/**
- * @jest-environment node
- */
-import { Response } from 'jest-express';
-
-import { createMock } from '../../models/project';
-import createProject from '../project.controller/createProject';
-
-jest.mock('../../models/project');
-
-describe('project.controller', () => {
-  describe('createProject()', () => {
-    let ProjectMock;
-
-    beforeEach(() => {
-      ProjectMock = createMock();
-    });
-
-    afterEach(() => {
-      ProjectMock.restore();
-    });
-
-    it('fails if create fails', (done) => {
-      const error = new Error('An error');
-
-      ProjectMock
-        .expects('create')
-        .rejects(error);
-
-      const request = { user: {} };
-      const response = new Response();
-
-      const promise = createProject(request, response);
-
-      function expectations() {
-        expect(response.json).toHaveBeenCalledWith({ success: false });
-
-        done();
-      }
-
-      promise.then(expectations, expectations).catch(expectations);
-    });
-
-    it('extracts parameters from request body', (done) => {
-      const request = {
-        user: { _id: 'abc123' },
-        body: {
-          name: 'Wriggly worm',
-          files: [{ name: 'file.js', content: 'var hello = true;' }]
-        }
-      };
-      const response = new Response();
-
-
-      ProjectMock
-        .expects('create')
-        .withArgs({
-          user: 'abc123',
-          name: 'Wriggly worm',
-          files: [{ name: 'file.js', content: 'var hello = true;' }]
-        })
-        .resolves();
-
-      const promise = createProject(request, response);
-
-      function expectations() {
-        expect(response.json).toHaveBeenCalled();
-
-        done();
-      }
-
-      promise.then(expectations, expectations).catch(expectations);
-    });
-
-    // TODO: This should be extracted to a new model object
-    //       so the controllers just have to call a single
-    //       method for this operation
-    it('populates referenced user on project creation', (done) => {
-      const request = { user: { _id: 'abc123' } };
-      const response = new Response();
-
-      const result = {
-        _id: 'abc123',
-        id: 'abc123',
-        name: 'Project name',
-        serveSecure: false,
-        files: []
-      };
-
-      const resultWithUser = {
-        ...result,
-        user: {}
-      };
-
-      ProjectMock
-        .expects('create')
-        .withArgs({ user: 'abc123' })
-        .resolves(result);
-
-      ProjectMock
-        .expects('populate')
-        .withArgs(result)
-        .yields(null, resultWithUser)
-        .resolves(resultWithUser);
-
-      const promise = createProject(request, response);
-
-      function expectations() {
-        const doc = response.json.mock.calls[0][0];
-
-        expect(response.json).toHaveBeenCalled();
-
-        expect(JSON.parse(JSON.stringify(doc))).toMatchObject(resultWithUser);
-
-        done();
-      }
-
-      promise.then(expectations, expectations).catch(expectations);
-    });
-
-    it('fails if referenced user population fails', (done) => {
-      const request = { user: { _id: 'abc123' } };
-      const response = new Response();
-
-      const result = {
-        _id: 'abc123',
-        id: 'abc123',
-        name: 'Project name',
-        serveSecure: false,
-        files: []
-      };
-
-      const error = new Error('An error');
-
-      ProjectMock
-        .expects('create')
-        .resolves(result);
-
-      ProjectMock
-        .expects('populate')
-        .yields(error)
-        .resolves(error);
-
-      const promise = createProject(request, response);
-
-      function expectations() {
-        expect(response.json).toHaveBeenCalledWith({ success: false });
-
-        done();
-      }
-
-      promise.then(expectations, expectations).catch(expectations);
-    });
-  });
-});
diff --git a/server/controllers/aws.controller.js b/server/controllers/aws.controller.js
index dd9122f6..0b7d5d85 100644
--- a/server/controllers/aws.controller.js
+++ b/server/controllers/aws.controller.js
@@ -1,6 +1,6 @@
 import uuid from 'node-uuid';
 import policy from 's3-policy';
-import s3 from 's3';
+import s3 from '@auth0/s3';
 import { getProjectsForUserId } from './project.controller';
 import { findUserByUsername } from './user.controller';
 
@@ -60,13 +60,24 @@ export function deleteObjectsFromS3(keyList, callback) {
 }
 
 export function deleteObjectFromS3(req, res) {
-  const objectKey = req.params.object_key;
-  deleteObjectsFromS3([objectKey], () => {
+  const { objectKey, userId } = req.params;
+  let fullObjectKey;
+  if (userId) {
+    fullObjectKey = `${userId}/${objectKey}`;
+  } else {
+    fullObjectKey = objectKey;
+  }
+  deleteObjectsFromS3([fullObjectKey], () => {
     res.json({ success: true });
   });
 }
 
 export function signS3(req, res) {
+  const limit = process.env.UPLOAD_LIMIT || 250000000;
+  if (req.user.totalSize > limit) {
+    res.status(403).send({ message: 'user has uploaded the maximum size of assets.' });
+    return;
+  }
   const fileExtension = getExtension(req.body.name);
   const filename = uuid.v4() + fileExtension;
   const acl = 'public-read';
@@ -84,7 +95,7 @@ export function signS3(req, res) {
     policy: p.policy,
     signature: p.signature
   };
-  return res.json(result);
+  res.json(result);
 }
 
 export function copyObjectInS3(req, res) {
@@ -108,54 +119,65 @@ export function copyObjectInS3(req, res) {
   });
 }
 
-export function listObjectsInS3ForUser(req, res) {
-  const { username } = req.user;
-  findUserByUsername(username, (user) => {
-    const userId = user.id;
+export function listObjectsInS3ForUser(userId) {
+  let assets = [];
+  return new Promise((resolve) => {
     const params = {
       s3Params: {
         Bucket: `${process.env.S3_BUCKET}`,
         Prefix: `${userId}/`
       }
     };
-    let assets = [];
     client.listObjects(params)
       .on('data', (data) => {
         assets = assets.concat(data.Contents.map(object => ({ key: object.Key, size: object.Size })));
       })
       .on('end', () => {
-        const projectAssets = [];
-        getProjectsForUserId(userId).then((projects) => {
-          let totalSize = 0;
-          assets.forEach((asset) => {
-            const name = asset.key.split('/').pop();
-            const foundAsset = {
-              key: asset.key,
-              name,
-              size: asset.size,
-              url: `${process.env.S3_BUCKET_URL_BASE}${asset.key}`
-            };
-            totalSize += asset.size;
-            projects.some((project) => {
-              let found = false;
-              project.files.some((file) => {
-                if (!file.url) return false;
-                if (file.url.includes(asset.key)) {
-                  found = true;
-                  foundAsset.name = file.name;
-                  foundAsset.sketchName = project.name;
-                  foundAsset.sketchId = project.id;
-                  foundAsset.url = file.url;
-                  return true;
-                }
-                return false;
-              });
-              return found;
-            });
-            projectAssets.push(foundAsset);
-          });
-          res.json({ assets: projectAssets, totalSize });
-        });
+        resolve();
       });
+  }).then(() => getProjectsForUserId(userId)).then((projects) => {
+    const projectAssets = [];
+    let totalSize = 0;
+    assets.forEach((asset) => {
+      const name = asset.key.split('/').pop();
+      const foundAsset = {
+        key: asset.key,
+        name,
+        size: asset.size,
+        url: `${process.env.S3_BUCKET_URL_BASE}${asset.key}`
+      };
+      totalSize += asset.size;
+      projects.some((project) => {
+        let found = false;
+        project.files.some((file) => {
+          if (!file.url) return false;
+          if (file.url.includes(asset.key)) {
+            found = true;
+            foundAsset.name = file.name;
+            foundAsset.sketchName = project.name;
+            foundAsset.sketchId = project.id;
+            foundAsset.url = file.url;
+            return true;
+          }
+          return false;
+        });
+        return found;
+      });
+      projectAssets.push(foundAsset);
+    });
+    return Promise.resolve({ assets: projectAssets, totalSize });
+  }).catch((err) => {
+    console.log('got an error');
+    console.log(err);
+  });
+}
+
+export function listObjectsInS3ForUserRequestHandler(req, res) {
+  const { username } = req.user;
+  findUserByUsername(username, (user) => {
+    const userId = user.id;
+    listObjectsInS3ForUser(userId).then((objects) => {
+      res.json(objects);
+    });
   });
 }
diff --git a/server/controllers/collection.controller/addProjectToCollection.js b/server/controllers/collection.controller/addProjectToCollection.js
new file mode 100644
index 00000000..6abf08bf
--- /dev/null
+++ b/server/controllers/collection.controller/addProjectToCollection.js
@@ -0,0 +1,74 @@
+import Collection from '../../models/collection';
+import Project from '../../models/project';
+
+export default function addProjectToCollection(req, res) {
+  const owner = req.user._id;
+  const { id: collectionId, projectId } = req.params;
+
+  const collectionPromise = Collection.findById(collectionId).populate('items.project', '_id');
+  const projectPromise = Project.findById(projectId);
+
+  function sendFailure(code, message) {
+    res.status(code).json({ success: false, message });
+  }
+
+  function sendSuccess(collection) {
+    res.status(200).json(collection);
+  }
+
+  function updateCollection([collection, project]) {
+    if (collection == null) {
+      sendFailure(404, 'Collection not found');
+      return null;
+    }
+
+    if (project == null) {
+      sendFailure(404, 'Project not found');
+      return null;
+    }
+
+    if (!collection.owner.equals(owner)) {
+      sendFailure(403, 'User does not own this collection');
+      return null;
+    }
+
+    const projectInCollection = collection.items.find(p => p.project._id === project._id);
+
+    if (projectInCollection) {
+      sendFailure(404, 'Project already in collection');
+      return null;
+    }
+
+    try {
+      collection.items.push({ project });
+
+      return collection.save();
+    } catch (error) {
+      console.error(error);
+      sendFailure(500, error.message);
+      return null;
+    }
+  }
+
+  function populateReferences(collection) {
+    return Collection.populate(
+      collection,
+      [
+        { path: 'owner', select: ['id', 'username'] },
+        {
+          path: 'items.project',
+          select: ['id', 'name', 'slug'],
+          populate: {
+            path: 'user', select: ['username']
+          }
+        }
+      ]
+    );
+  }
+
+  return Promise.all([collectionPromise, projectPromise])
+    .then(updateCollection)
+    .then(populateReferences)
+    .then(sendSuccess)
+    .catch(sendFailure);
+}
diff --git a/server/controllers/collection.controller/collectionForUserExists.js b/server/controllers/collection.controller/collectionForUserExists.js
new file mode 100644
index 00000000..e2881fd4
--- /dev/null
+++ b/server/controllers/collection.controller/collectionForUserExists.js
@@ -0,0 +1,29 @@
+import Collection from '../../models/collection';
+import User from '../../models/user';
+
+export default function collectionForUserExists(username, collectionId, callback) {
+  function sendFailure() {
+    callback(false);
+  }
+
+  function sendSuccess(collection) {
+    callback(collection != null);
+  }
+
+  function findUser() {
+    return User.findOne({ username });
+  }
+
+  function findCollection(owner) {
+    if (owner == null) {
+      throw new Error('User not found');
+    }
+
+    return Collection.findOne({ _id: collectionId, owner });
+  }
+
+  return findUser()
+    .then(findCollection)
+    .then(sendSuccess)
+    .catch(sendFailure);
+}
diff --git a/server/controllers/collection.controller/createCollection.js b/server/controllers/collection.controller/createCollection.js
new file mode 100644
index 00000000..9fd97be3
--- /dev/null
+++ b/server/controllers/collection.controller/createCollection.js
@@ -0,0 +1,47 @@
+import Collection from '../../models/collection';
+
+export default function createCollection(req, res) {
+  const owner = req.user._id;
+  const { name, description, slug } = req.body;
+
+  const values = {
+    owner,
+    name,
+    description,
+    slug
+  };
+
+  function sendFailure({ code = 500, message = 'Something went wrong' }) {
+    res.status(code).json({ success: false, message });
+  }
+
+  function sendSuccess(newCollection) {
+    res.json(newCollection);
+  }
+
+  function populateReferences(newCollection) {
+    return Collection.populate(
+      newCollection,
+      [
+        { path: 'owner', select: ['id', 'username'] },
+        {
+          path: 'items.project',
+          select: ['id', 'name', 'slug'],
+          populate: {
+            path: 'user', select: ['username']
+          }
+        }
+      ]
+    );
+  }
+
+  if (owner == null) {
+    sendFailure({ code: 404, message: 'No user specified' });
+    return null;
+  }
+
+  return Collection.create(values)
+    .then(populateReferences)
+    .then(sendSuccess)
+    .catch(sendFailure);
+}
diff --git a/server/controllers/collection.controller/index.js b/server/controllers/collection.controller/index.js
new file mode 100644
index 00000000..8cb9e368
--- /dev/null
+++ b/server/controllers/collection.controller/index.js
@@ -0,0 +1,7 @@
+export { default as addProjectToCollection } from './addProjectToCollection';
+export { default as collectionForUserExists } from './collectionForUserExists';
+export { default as createCollection } from './createCollection';
+export { default as listCollections } from './listCollections';
+export { default as removeCollection } from './removeCollection';
+export { default as removeProjectFromCollection } from './removeProjectFromCollection';
+export { default as updateCollection } from './updateCollection';
diff --git a/server/controllers/collection.controller/listCollections.js b/server/controllers/collection.controller/listCollections.js
new file mode 100644
index 00000000..c71041b3
--- /dev/null
+++ b/server/controllers/collection.controller/listCollections.js
@@ -0,0 +1,48 @@
+import Collection from '../../models/collection';
+import User from '../../models/user';
+
+async function getOwnerUserId(req) {
+  if (req.params.username) {
+    const user = await User.findOne({ username: req.params.username });
+    if (user && user._id) {
+      return user._id;
+    }
+  } else if (req.user._id) {
+    return req.user._id;
+  }
+
+  return null;
+}
+
+export default function listCollections(req, res) {
+  function sendFailure({ code = 500, message = 'Something went wrong' }) {
+    res.status(code).json({ success: false, message });
+  }
+
+  function sendSuccess(collections) {
+    res.status(200).json(collections);
+  }
+
+  function findCollections(owner) {
+    if (owner == null) {
+      sendFailure({ code: 404, message: 'User not found' });
+    }
+
+    return Collection.find({ owner })
+      .populate([
+        { path: 'owner', select: ['id', 'username'] },
+        {
+          path: 'items.project',
+          select: ['id', 'name', 'slug'],
+          populate: {
+            path: 'user', select: ['username']
+          }
+        }
+      ]);
+  }
+
+  return getOwnerUserId(req)
+    .then(findCollections)
+    .then(sendSuccess)
+    .catch(sendFailure);
+}
diff --git a/server/controllers/collection.controller/removeCollection.js b/server/controllers/collection.controller/removeCollection.js
new file mode 100644
index 00000000..dffff876
--- /dev/null
+++ b/server/controllers/collection.controller/removeCollection.js
@@ -0,0 +1,34 @@
+import Collection from '../../models/collection';
+
+
+export default function createCollection(req, res) {
+  const { id: collectionId } = req.params;
+  const owner = req.user._id;
+
+  function sendFailure({ code = 500, message = 'Something went wrong' }) {
+    res.status(code).json({ success: false, message });
+  }
+
+  function sendSuccess() {
+    res.status(200).json({ success: true });
+  }
+
+  function removeCollection(collection) {
+    if (collection == null) {
+      sendFailure({ code: 404, message: 'Not found, or you user does not own this collection' });
+      return null;
+    }
+
+    return collection.remove();
+  }
+
+  function findCollection() {
+    // Only returned if owner matches current user
+    return Collection.findOne({ _id: collectionId, owner });
+  }
+
+  return findCollection()
+    .then(removeCollection)
+    .then(sendSuccess)
+    .catch(sendFailure);
+}
diff --git a/server/controllers/collection.controller/removeProjectFromCollection.js b/server/controllers/collection.controller/removeProjectFromCollection.js
new file mode 100644
index 00000000..679d0cc0
--- /dev/null
+++ b/server/controllers/collection.controller/removeProjectFromCollection.js
@@ -0,0 +1,61 @@
+import Collection from '../../models/collection';
+
+export default function addProjectToCollection(req, res) {
+  const owner = req.user._id;
+  const { id: collectionId, projectId } = req.params;
+
+  function sendFailure({ code = 500, message = 'Something went wrong' }) {
+    res.status(code).json({ success: false, message });
+  }
+
+  function sendSuccess(collection) {
+    res.status(200).json(collection);
+  }
+
+  function updateCollection(collection) {
+    if (collection == null) {
+      sendFailure({ code: 404, message: 'Collection not found' });
+      return null;
+    }
+
+    if (!collection.owner.equals(owner)) {
+      sendFailure({ code: 403, message: 'User does not own this collection' });
+      return null;
+    }
+
+    const project = collection.items.find(p => p.project._id === projectId);
+
+    if (project != null) {
+      project.remove();
+      return collection.save();
+    }
+
+    const error = new Error('not found');
+    error.code = 404;
+
+    throw error;
+  }
+
+  function populateReferences(collection) {
+    return Collection.populate(
+      collection,
+      [
+        { path: 'owner', select: ['id', 'username'] },
+        {
+          path: 'items.project',
+          select: ['id', 'name', 'slug'],
+          populate: {
+            path: 'user', select: ['username']
+          }
+        }
+      ]
+    );
+  }
+
+  return Collection.findById(collectionId)
+    .populate('items.project', '_id')
+    .then(updateCollection)
+    .then(populateReferences)
+    .then(sendSuccess)
+    .catch(sendFailure);
+}
diff --git a/server/controllers/collection.controller/updateCollection.js b/server/controllers/collection.controller/updateCollection.js
new file mode 100644
index 00000000..365b8d24
--- /dev/null
+++ b/server/controllers/collection.controller/updateCollection.js
@@ -0,0 +1,54 @@
+import omitBy from 'lodash/omitBy';
+import isUndefined from 'lodash/isUndefined';
+import Collection from '../../models/collection';
+
+function removeUndefined(obj) {
+  return omitBy(obj, isUndefined);
+}
+
+export default function createCollection(req, res) {
+  const { id: collectionId } = req.params;
+  const owner = req.user._id;
+  const { name, description, slug } = req.body;
+
+  const values = removeUndefined({
+    name,
+    description,
+    slug
+  });
+
+  function sendFailure({ code = 500, message = 'Something went wrong' }) {
+    res.status(code).json({ success: false, message });
+  }
+
+  function sendSuccess(collection) {
+    if (collection == null) {
+      sendFailure({ code: 404, message: 'Not found, or you user does not own this collection' });
+      return;
+    }
+
+    res.json(collection);
+  }
+
+  async function findAndUpdateCollection() {
+    // Only update if owner matches current user
+    return Collection.findOneAndUpdate(
+      { _id: collectionId, owner },
+      values,
+      { new: true, runValidators: true, setDefaultsOnInsert: true }
+    ).populate([
+      { path: 'owner', select: ['id', 'username'] },
+      {
+        path: 'items.project',
+        select: ['id', 'name', 'slug'],
+        populate: {
+          path: 'user', select: ['username']
+        }
+      }
+    ]).exec();
+  }
+
+  return findAndUpdateCollection()
+    .then(sendSuccess)
+    .catch(sendFailure);
+}
diff --git a/server/controllers/file.controller.js b/server/controllers/file.controller.js
index 69625a18..4ccb6db2 100644
--- a/server/controllers/file.controller.js
+++ b/server/controllers/file.controller.js
@@ -1,4 +1,5 @@
 import each from 'async/each';
+import mime from 'mime-types';
 import isBefore from 'date-fns/is_before';
 import Project from '../models/project';
 import { resolvePathToFile } from '../utils/filePath';
@@ -110,7 +111,7 @@ export function deleteFile(req, res) {
 
 export function getFileContent(req, res) {
   Project.findById(req.params.project_id, (err, project) => {
-    if (err) {
+    if (err || project === null) {
       res.status(404).send({ success: false, message: 'Project with that id does not exist.' });
       return;
     }
@@ -120,6 +121,8 @@ export function getFileContent(req, res) {
       res.status(404).send({ success: false, message: 'File with that name and path does not exist.' });
       return;
     }
+    const contentType = mime.lookup(resolvedFile.name) || 'application/octet-stream';
+    res.set('Content-Type', contentType);
     res.send(resolvedFile.content);
   });
 }
diff --git a/server/controllers/project.controller.js b/server/controllers/project.controller.js
index ae029918..bf59a865 100644
--- a/server/controllers/project.controller.js
+++ b/server/controllers/project.controller.js
@@ -2,7 +2,6 @@ import archiver from 'archiver';
 import format from 'date-fns/format';
 import isUrl from 'is-url';
 import jsdom, { serializeDocument } from 'jsdom';
-import isBefore from 'date-fns/is_before';
 import isAfter from 'date-fns/is_after';
 import request from 'request';
 import slugify from 'slugify';
@@ -10,9 +9,10 @@ import Project from '../models/project';
 import User from '../models/user';
 import { resolvePathToFile } from '../utils/filePath';
 import generateFileSystemSafeName from '../utils/generateFileSystemSafeName';
-import { deleteObjectsFromS3, getObjectKey } from './aws.controller';
 
-export { default as createProject } from './project.controller/createProject';
+export { default as createProject, apiCreateProject } from './project.controller/createProject';
+export { default as deleteProject } from './project.controller/deleteProject';
+export { default as getProjectsForUser, apiGetProjectsForUser } from './project.controller/getProjectsForUser';
 
 export function updateProject(req, res) {
   Project.findById(req.params.project_id, (findProjectErr, project) => {
@@ -84,37 +84,6 @@ export function getProject(req, res) {
     });
 }
 
-function deleteFilesFromS3(files) {
-  deleteObjectsFromS3(files.filter((file) => {
-    if (file.url) {
-      if (!process.env.S3_DATE || (
-        process.env.S3_DATE &&
-        isBefore(new Date(process.env.S3_DATE), new Date(file.createdAt)))) {
-        return true;
-      }
-    }
-    return false;
-  })
-    .map(file => getObjectKey(file.url)));
-}
-
-export function deleteProject(req, res) {
-  Project.findById(req.params.project_id, (findProjectErr, project) => {
-    if (!project.user.equals(req.user._id)) {
-      res.status(403).json({ success: false, message: 'Session does not match owner of project.' });
-      return;
-    }
-    deleteFilesFromS3(project.files);
-    Project.remove({ _id: req.params.project_id }, (removeProjectError) => {
-      if (removeProjectError) {
-        res.status(404).send({ message: 'Project with that id does not exist' });
-        return;
-      }
-      res.json({ success: true });
-    });
-  });
-}
-
 export function getProjectsForUserId(userId) {
   return new Promise((resolve, reject) => {
     Project.find({ user: userId })
@@ -157,10 +126,6 @@ export function getProjectAsset(req, res) {
     });
 }
 
-export function getProjectsForUserName(username) {
-
-}
-
 export function getProjects(req, res) {
   if (req.user) {
     getProjectsForUserId(req.user._id)
@@ -173,24 +138,6 @@ export function getProjects(req, res) {
   }
 }
 
-export function getProjectsForUser(req, res) {
-  if (req.params.username) {
-    User.findOne({ username: req.params.username }, (err, user) => {
-      if (!user) {
-        res.status(404).json({ message: 'User with that username does not exist.' });
-        return;
-      }
-      Project.find({ user: user._id })
-        .sort('-createdAt')
-        .select('name files id createdAt updatedAt')
-        .exec((innerErr, projects) => res.json(projects));
-    });
-  } else {
-    // could just move this to client side
-    res.json([]);
-  }
-}
-
 export function projectExists(projectId, callback) {
   Project.findById(projectId, (err, project) => (
     project ? callback(true) : callback(false)
diff --git a/server/controllers/project.controller/__test__/createProject.test.js b/server/controllers/project.controller/__test__/createProject.test.js
new file mode 100644
index 00000000..68025a0c
--- /dev/null
+++ b/server/controllers/project.controller/__test__/createProject.test.js
@@ -0,0 +1,391 @@
+/**
+ * @jest-environment node
+ */
+import { Response } from 'jest-express';
+
+import Project, { createMock, createInstanceMock } from '../../../models/project';
+import createProject, { apiCreateProject } from '../createProject';
+
+jest.mock('../../../models/project');
+
+describe('project.controller', () => {
+  describe('createProject()', () => {
+    let ProjectMock;
+
+    beforeEach(() => {
+      ProjectMock = createMock();
+    });
+
+    afterEach(() => {
+      ProjectMock.restore();
+    });
+
+    it('fails if create fails', (done) => {
+      const error = new Error('An error');
+
+      ProjectMock
+        .expects('create')
+        .rejects(error);
+
+      const request = { user: {} };
+      const response = new Response();
+
+      const promise = createProject(request, response);
+
+      function expectations() {
+        expect(response.json).toHaveBeenCalledWith({ success: false });
+
+        done();
+      }
+
+      promise.then(expectations, expectations).catch(expectations);
+    });
+
+    it('extracts parameters from request body', (done) => {
+      const request = {
+        user: { _id: 'abc123' },
+        body: {
+          name: 'Wriggly worm',
+          files: [{ name: 'file.js', content: 'var hello = true;' }]
+        }
+      };
+      const response = new Response();
+
+
+      ProjectMock
+        .expects('create')
+        .withArgs({
+          user: 'abc123',
+          name: 'Wriggly worm',
+          files: [{ name: 'file.js', content: 'var hello = true;' }]
+        })
+        .resolves();
+
+      const promise = createProject(request, response);
+
+      function expectations() {
+        expect(response.json).toHaveBeenCalled();
+
+        done();
+      }
+
+      promise.then(expectations, expectations).catch(expectations);
+    });
+
+    // TODO: This should be extracted to a new model object
+    //       so the controllers just have to call a single
+    //       method for this operation
+    it('populates referenced user on project creation', (done) => {
+      const request = { user: { _id: 'abc123' } };
+      const response = new Response();
+
+      const result = {
+        _id: 'abc123',
+        id: 'abc123',
+        name: 'Project name',
+        serveSecure: false,
+        files: []
+      };
+
+      const resultWithUser = {
+        ...result,
+        user: {}
+      };
+
+      ProjectMock
+        .expects('create')
+        .withArgs({ user: 'abc123' })
+        .resolves(result);
+
+      ProjectMock
+        .expects('populate')
+        .withArgs(result)
+        .yields(null, resultWithUser)
+        .resolves(resultWithUser);
+
+      const promise = createProject(request, response);
+
+      function expectations() {
+        const doc = response.json.mock.calls[0][0];
+
+        expect(response.json).toHaveBeenCalled();
+
+        expect(JSON.parse(JSON.stringify(doc))).toMatchObject(resultWithUser);
+
+        done();
+      }
+
+      promise.then(expectations, expectations).catch(expectations);
+    });
+
+    it('fails if referenced user population fails', (done) => {
+      const request = { user: { _id: 'abc123' } };
+      const response = new Response();
+
+      const result = {
+        _id: 'abc123',
+        id: 'abc123',
+        name: 'Project name',
+        serveSecure: false,
+        files: []
+      };
+
+      const error = new Error('An error');
+
+      ProjectMock
+        .expects('create')
+        .resolves(result);
+
+      ProjectMock
+        .expects('populate')
+        .yields(error)
+        .resolves(error);
+
+      const promise = createProject(request, response);
+
+      function expectations() {
+        expect(response.json).toHaveBeenCalledWith({ success: false });
+
+        done();
+      }
+
+      promise.then(expectations, expectations).catch(expectations);
+    });
+  });
+
+  describe('apiCreateProject()', () => {
+    let ProjectMock;
+    let ProjectInstanceMock;
+
+    beforeEach(() => {
+      ProjectMock = createMock();
+      ProjectInstanceMock = createInstanceMock();
+    });
+
+    afterEach(() => {
+      ProjectMock.restore();
+      ProjectInstanceMock.restore();
+    });
+
+    it('returns 201 with id of created sketch', (done) => {
+      const request = {
+        user: { _id: 'abc123', username: 'alice' },
+        params: { username: 'alice' },
+        body: {
+          name: 'My sketch',
+          files: {}
+        }
+      };
+      const response = new Response();
+
+      const result = {
+        _id: 'abc123',
+        id: 'abc123',
+        name: 'Project name',
+        serveSecure: false,
+        files: []
+      };
+
+      ProjectInstanceMock.expects('isSlugUnique')
+        .resolves({ isUnique: true, conflictingIds: [] });
+
+      ProjectInstanceMock.expects('save')
+        .resolves(new Project(result));
+
+      const promise = apiCreateProject(request, response);
+
+      function expectations() {
+        const doc = response.json.mock.calls[0][0];
+
+        expect(response.status).toHaveBeenCalledWith(201);
+        expect(response.json).toHaveBeenCalled();
+
+        expect(JSON.parse(JSON.stringify(doc))).toMatchObject({
+          id: 'abc123'
+        });
+
+        done();
+      }
+
+      promise.then(expectations, expectations).catch(expectations);
+    });
+
+    it('fails if slug is not unique', (done) => {
+      const request = {
+        user: { _id: 'abc123', username: 'alice' },
+        params: { username: 'alice' },
+        body: {
+          name: 'My sketch',
+          slug: 'a-slug',
+          files: {}
+        }
+      };
+      const response = new Response();
+
+      const result = {
+        _id: 'abc123',
+        id: 'abc123',
+        name: 'Project name',
+        // slug: 'a-slug',
+        serveSecure: false,
+        files: []
+      };
+
+      ProjectInstanceMock.expects('isSlugUnique')
+        .resolves({ isUnique: false, conflictingIds: ['cde123'] });
+
+      ProjectInstanceMock.expects('save')
+        .resolves(new Project(result));
+
+      const promise = apiCreateProject(request, response);
+
+      function expectations() {
+        const doc = response.json.mock.calls[0][0];
+
+        expect(response.status).toHaveBeenCalledWith(409);
+        expect(response.json).toHaveBeenCalled();
+
+        expect(JSON.parse(JSON.stringify(doc))).toMatchObject({
+          message: 'Sketch Validation Failed',
+          detail: 'Slug "a-slug" is not unique. Check cde123'
+        });
+
+        done();
+      }
+
+      promise.then(expectations, expectations).catch(expectations);
+    });
+
+    it('fails if user does not have permission', (done) => {
+      const request = {
+        user: { _id: 'abc123', username: 'alice' },
+        params: {
+          username: 'dana',
+        },
+        body: {
+          name: 'My sketch',
+          slug: 'a-slug',
+          files: {}
+        }
+      };
+      const response = new Response();
+
+      const result = {
+        _id: 'abc123',
+        id: 'abc123',
+        name: 'Project name',
+        serveSecure: false,
+        files: []
+      };
+
+      ProjectInstanceMock.expects('isSlugUnique')
+        .resolves({ isUnique: true, conflictingIds: [] });
+
+      ProjectInstanceMock.expects('save')
+        .resolves(new Project(result));
+
+      const promise = apiCreateProject(request, response);
+
+      function expectations() {
+        expect(response.status).toHaveBeenCalledWith(401);
+        expect(response.json).toHaveBeenCalled();
+
+        done();
+      }
+
+      promise.then(expectations, expectations).catch(expectations);
+    });
+
+    it('returns validation errors on files input', (done) => {
+      const request = {
+        user: { username: 'alice' },
+        params: { username: 'alice' },
+        body: {
+          name: 'My sketch',
+          files: {
+            'index.html': {
+              // missing content or url
+            }
+          }
+        }
+      };
+      const response = new Response();
+
+      const promise = apiCreateProject(request, response);
+
+      function expectations() {
+        const doc = response.json.mock.calls[0][0];
+
+        const responseBody = JSON.parse(JSON.stringify(doc));
+
+        expect(response.status).toHaveBeenCalledWith(422);
+        expect(responseBody.message).toBe('File Validation Failed');
+        expect(responseBody.detail).not.toBeNull();
+        expect(responseBody.errors.length).toBe(1);
+        expect(responseBody.errors).toEqual([
+          { name: 'index.html', message: 'missing \'url\' or \'content\'' }
+        ]);
+
+        done();
+      }
+
+      promise.then(expectations, expectations).catch(expectations);
+    });
+
+    it('rejects file parameters not in object format', (done) => {
+      const request = {
+        user: { _id: 'abc123', username: 'alice' },
+        params: { username: 'alice' },
+        body: {
+          name: 'Wriggly worm',
+          files: [{ name: 'file.js', content: 'var hello = true;' }]
+        }
+      };
+      const response = new Response();
+
+      const promise = apiCreateProject(request, response);
+
+      function expectations() {
+        const doc = response.json.mock.calls[0][0];
+
+        const responseBody = JSON.parse(JSON.stringify(doc));
+
+        expect(response.status).toHaveBeenCalledWith(422);
+        expect(responseBody.message).toBe('File Validation Failed');
+        expect(responseBody.detail).toBe('\'files\' must be an object');
+
+        done();
+      }
+
+      promise.then(expectations, expectations).catch(expectations);
+    });
+
+    it('rejects if files object in not provided', (done) => {
+      const request = {
+        user: { _id: 'abc123', username: 'alice' },
+        params: { username: 'alice' },
+        body: {
+          name: 'Wriggly worm',
+          // files: {} is missing
+        }
+      };
+      const response = new Response();
+
+      const promise = apiCreateProject(request, response);
+
+      function expectations() {
+        const doc = response.json.mock.calls[0][0];
+
+        const responseBody = JSON.parse(JSON.stringify(doc));
+
+        expect(response.status).toHaveBeenCalledWith(422);
+        expect(responseBody.message).toBe('File Validation Failed');
+        expect(responseBody.detail).toBe('\'files\' must be an object');
+
+        done();
+      }
+
+      promise.then(expectations, expectations).catch(expectations);
+    });
+  });
+});
diff --git a/server/controllers/project.controller/__test__/deleteProject.test.js b/server/controllers/project.controller/__test__/deleteProject.test.js
new file mode 100644
index 00000000..84a6824f
--- /dev/null
+++ b/server/controllers/project.controller/__test__/deleteProject.test.js
@@ -0,0 +1,119 @@
+/**
+ * @jest-environment node
+ */
+import { Request, Response } from 'jest-express';
+
+import Project, { createMock, createInstanceMock } from '../../../models/project';
+import User from '../../../models/user';
+import deleteProject from '../../project.controller/deleteProject';
+import { deleteObjectsFromS3 } from '../../aws.controller';
+
+
+jest.mock('../../../models/project');
+jest.mock('../../aws.controller');
+
+describe('project.controller', () => {
+  describe('deleteProject()', () => {
+    let ProjectMock;
+    let ProjectInstanceMock;
+
+    beforeEach(() => {
+      ProjectMock = createMock();
+      ProjectInstanceMock = createInstanceMock();
+    });
+
+    afterEach(() => {
+      ProjectMock.restore();
+      ProjectInstanceMock.restore();
+    });
+
+    it('returns 403 if project is not owned by authenticated user', (done) => {
+      const user = new User();
+      const project = new Project();
+      project.user = user;
+
+      const request = new Request();
+      request.setParams({ project_id: project._id });
+      request.user = { _id: 'abc123' };
+
+      const response = new Response();
+
+      ProjectMock
+        .expects('findById')
+        .resolves(project);
+
+      const promise = deleteProject(request, response);
+
+      function expectations() {
+        expect(response.status).toHaveBeenCalledWith(403);
+        expect(response.json).toHaveBeenCalledWith({
+          message: 'Authenticated user does not match owner of project'
+        });
+
+        done();
+      }
+
+      promise.then(expectations, expectations).catch(expectations);
+    });
+
+    it('returns 404 if project does not exist', (done) => {
+      const user = new User();
+      const project = new Project();
+      project.user = user;
+
+      const request = new Request();
+      request.setParams({ project_id: project._id });
+      request.user = { _id: 'abc123' };
+
+      const response = new Response();
+
+      ProjectMock
+        .expects('findById')
+        .resolves(null);
+
+      const promise = deleteProject(request, response);
+
+      function expectations() {
+        expect(response.status).toHaveBeenCalledWith(404);
+        expect(response.json).toHaveBeenCalledWith({
+          message: 'Project with that id does not exist'
+        });
+
+        done();
+      }
+
+      promise.then(expectations, expectations).catch(expectations);
+    });
+
+    it('deletes project and dependent files from S3 ', (done) => {
+      const user = new User();
+      const project = new Project();
+      project.user = user;
+
+      const request = new Request();
+      request.setParams({ project_id: project._id });
+      request.user = { _id: user._id };
+
+      const response = new Response();
+
+      ProjectMock
+        .expects('findById')
+        .resolves(project);
+
+      ProjectInstanceMock.expects('remove')
+        .yields();
+
+      const promise = deleteProject(request, response);
+
+      function expectations() {
+        expect(response.status).toHaveBeenCalledWith(200);
+        expect(response.json).not.toHaveBeenCalled();
+        expect(deleteObjectsFromS3).toHaveBeenCalled();
+
+        done();
+      }
+
+      promise.then(expectations, expectations).catch(expectations);
+    });
+  });
+});
diff --git a/server/controllers/project.controller/__test__/getProjectsForUser.test.js b/server/controllers/project.controller/__test__/getProjectsForUser.test.js
new file mode 100644
index 00000000..05a0cf71
--- /dev/null
+++ b/server/controllers/project.controller/__test__/getProjectsForUser.test.js
@@ -0,0 +1,151 @@
+/**
+ * @jest-environment node
+ */
+import { Request, Response } from 'jest-express';
+
+import { createMock } from '../../../models/user';
+import getProjectsForUser, { apiGetProjectsForUser } from '../../project.controller/getProjectsForUser';
+
+jest.mock('../../../models/user');
+jest.mock('../../aws.controller');
+
+describe('project.controller', () => {
+  let UserMock;
+
+  beforeEach(() => {
+    UserMock = createMock();
+  });
+
+  afterEach(() => {
+    UserMock.restore();
+  });
+
+  describe('getProjectsForUser()', () => {
+    it('returns empty array user not supplied as parameter', (done) => {
+      const request = new Request();
+      request.setParams({});
+      const response = new Response();
+
+      const promise = getProjectsForUser(request, response);
+
+      function expectations() {
+        expect(response.status).toHaveBeenCalledWith(200);
+        expect(response.json).toHaveBeenCalledWith([]);
+
+        done();
+      }
+
+      promise.then(expectations, expectations).catch(expectations);
+    });
+
+    it('returns 404 if user does not exist', (done) => {
+      const request = new Request();
+      request.setParams({ username: 'abc123' });
+      const response = new Response();
+
+      UserMock
+        .expects('findOne')
+        .withArgs({ username: 'abc123' })
+        .yields(null, null);
+
+      const promise = getProjectsForUser(request, response);
+
+      function expectations() {
+        expect(response.status).toHaveBeenCalledWith(404);
+        expect(response.json).toHaveBeenCalledWith({ message: 'User with that username does not exist.' });
+
+        done();
+      }
+
+      promise.then(expectations, expectations).catch(expectations);
+    });
+
+    it('returns 500 on other errors', (done) => {
+      const request = new Request();
+      request.setParams({ username: 'abc123' });
+      const response = new Response();
+
+      UserMock
+        .expects('findOne')
+        .withArgs({ username: 'abc123' })
+        .yields(new Error(), null);
+
+      const promise = getProjectsForUser(request, response);
+
+      function expectations() {
+        expect(response.status).toHaveBeenCalledWith(500);
+        expect(response.json).toHaveBeenCalledWith({ message: 'Error fetching projects' });
+
+        done();
+      }
+
+      promise.then(expectations, expectations).catch(expectations);
+    });
+  });
+
+  describe('apiGetProjectsForUser()', () => {
+    it('returns validation error if user id not provided', (done) => {
+      const request = new Request();
+      request.setParams({});
+      const response = new Response();
+
+      const promise = apiGetProjectsForUser(request, response);
+
+      function expectations() {
+        expect(response.status).toHaveBeenCalledWith(422);
+        expect(response.json).toHaveBeenCalledWith({
+          message: 'Username not provided'
+        });
+
+        done();
+      }
+
+      promise.then(expectations, expectations).catch(expectations);
+    });
+
+
+    it('returns 404 if user does not exist', (done) => {
+      const request = new Request();
+      request.setParams({ username: 'abc123' });
+      const response = new Response();
+
+      UserMock
+        .expects('findOne')
+        .withArgs({ username: 'abc123' })
+        .yields(null, null);
+
+      const promise = apiGetProjectsForUser(request, response);
+
+      function expectations() {
+        expect(response.status).toHaveBeenCalledWith(404);
+        expect(response.json).toHaveBeenCalledWith({ message: 'User with that username does not exist.' });
+
+        done();
+      }
+
+      promise.then(expectations, expectations).catch(expectations);
+    });
+
+    it('returns 500 on other errors', (done) => {
+      const request = new Request();
+      request.setParams({ username: 'abc123' });
+      const response = new Response();
+
+      UserMock
+        .expects('findOne')
+        .withArgs({ username: 'abc123' })
+        .yields(new Error(), null);
+
+      const promise = apiGetProjectsForUser(request, response);
+
+      function expectations() {
+        expect(response.status).toHaveBeenCalledWith(500);
+        expect(response.json).toHaveBeenCalledWith({ message: 'Error fetching projects' });
+
+        done();
+      }
+
+      promise.then(expectations, expectations).catch(expectations);
+    });
+  });
+});
diff --git a/server/controllers/project.controller/createProject.js b/server/controllers/project.controller/createProject.js
index 2cf34e32..e4040268 100644
--- a/server/controllers/project.controller/createProject.js
+++ b/server/controllers/project.controller/createProject.js
@@ -1,4 +1,5 @@
 import Project from '../../models/project';
+import { toModel, FileValidationError, ProjectValidationError } from '../../domain-objects/Project';
 
 export default function createProject(req, res) {
   let projectValues = {
@@ -30,3 +31,67 @@ export default function createProject(req, res) {
     .then(populateUserData)
     .catch(sendFailure);
 }
+
+// TODO: What happens if you don't supply any files?
+export function apiCreateProject(req, res) {
+  const params = Object.assign({ user: req.user._id }, req.body);
+
+  function sendValidationErrors(err, type, code = 422) {
+    res.status(code).json({
+      message: `${type} Validation Failed`,
+      detail: err.message,
+      errors: err.files,
+    });
+  }
+
+  // TODO: Error handling to match spec
+  function sendFailure(err) {
+    res.status(500).end();
+  }
+
+  function handleErrors(err) {
+    if (err instanceof FileValidationError) {
+      sendValidationErrors(err, 'File', err.code);
+    } else if (err instanceof ProjectValidationError) {
+      sendValidationErrors(err, 'Sketch', err.code);
+    } else {
+      sendFailure();
+    }
+  }
+
+  function checkUserHasPermission() {
+    if (req.user.username !== req.params.username) {
+      console.log('no permission');
+      const error = new ProjectValidationError(`'${req.user.username}' does not have permission to create for '${req.params.username}'`);
+      error.code = 401;
+
+      throw error;
+    }
+  }
+
+  try {
+    checkUserHasPermission();
+
+    const model = toModel(params);
+
+    return model.isSlugUnique()
+      .then(({ isUnique, conflictingIds }) => {
+        if (isUnique) {
+          return model.save()
+            .then((newProject) => {
+              res.status(201).json({ id: newProject.id });
+            });
+        }
+
+        const error = new ProjectValidationError(`Slug "${model.slug}" is not unique. Check ${conflictingIds.join(', ')}`);
+        error.code = 409;
+
+        throw error;
+      })
+      .then(checkUserHasPermission)
+      .catch(handleErrors);
+  } catch (err) {
+    handleErrors(err);
+    return Promise.reject(err);
+  }
+}
diff --git a/server/controllers/project.controller/deleteProject.js b/server/controllers/project.controller/deleteProject.js
new file mode 100644
index 00000000..dd980b23
--- /dev/null
+++ b/server/controllers/project.controller/deleteProject.js
@@ -0,0 +1,57 @@
+import isBefore from 'date-fns/is_before';
+import Project from '../../models/project';
+import { deleteObjectsFromS3, getObjectKey } from '../aws.controller';
+import createApplicationErrorClass from '../../utils/createApplicationErrorClass';
+
+const ProjectDeletionError = createApplicationErrorClass('ProjectDeletionError');
+
+function deleteFilesFromS3(files) {
+  deleteObjectsFromS3(files.filter((file) => {
+    if (file.url) {
+      if (!process.env.S3_DATE || (
+        process.env.S3_DATE &&
+        isBefore(new Date(process.env.S3_DATE), new Date(file.createdAt)))) {
+        return true;
+      }
+    }
+    return false;
+  })
+    .map(file => getObjectKey(file.url)));
+}
+
+export default function deleteProject(req, res) {
+  function sendFailure(error) {
+    res.status(error.code).json({ message: error.message });
+  }
+
+  function sendProjectNotFound() {
+    sendFailure(new ProjectDeletionError('Project with that id does not exist', { code: 404 }));
+  }
+
+  function handleProjectDeletion(project) {
+    if (project == null) {
+      sendProjectNotFound();
+      return;
+    }
+
+    if (!project.user.equals(req.user._id)) {
+      sendFailure(new ProjectDeletionError('Authenticated user does not match owner of project', { code: 403 }));
+      return;
+    }
+
+    deleteFilesFromS3(project.files);
+
+    project.remove((removeProjectError) => {
+      if (removeProjectError) {
+        sendProjectNotFound();
+        return;
+      }
+
+      res.status(200).end();
+    });
+  }
+
+  return Project.findById(req.params.project_id)
+    .then(handleProjectDeletion)
+    .catch(sendFailure);
+}
diff --git a/server/controllers/project.controller/getProjectsForUser.js b/server/controllers/project.controller/getProjectsForUser.js
new file mode 100644
index 00000000..1d9a0e34
--- /dev/null
+++ b/server/controllers/project.controller/getProjectsForUser.js
@@ -0,0 +1,72 @@
+import Project from '../../models/project';
+import User from '../../models/user';
+import { toApi as toApiProjectObject } from '../../domain-objects/Project';
+import createApplicationErrorClass from '../../utils/createApplicationErrorClass';
+
+const UserNotFoundError = createApplicationErrorClass('UserNotFoundError');
+
+function getProjectsForUserName(username) {
+  return new Promise((resolve, reject) => {
+    User.findOne({ username }, (err, user) => {
+      if (err) {
+        reject(err);
+        return;
+      }
+
+      if (!user) {
+        reject(new UserNotFoundError());
+        return;
+      }
+
+      Project.find({ user: user._id })
+        .sort('-createdAt')
+        .select('name files id createdAt updatedAt')
+        .exec((innerErr, projects) => {
+          if (innerErr) {
+            reject(innerErr);
+            return;
+          }
+
+          resolve(projects);
+        });
+    });
+  });
+}
+
+export default function getProjectsForUser(req, res) {
+  if (req.params.username) {
+    return getProjectsForUserName(req.params.username)
+      .then(projects => res.json(projects))
+      .catch((err) => {
+        if (err instanceof UserNotFoundError) {
+          res.status(404).json({ message: 'User with that username does not exist.' });
+        } else {
+          res.status(500).json({ message: 'Error fetching projects' });
+        }
+      });
+  }
+
+  // could just move this to client side
+  res.status(200).json([]);
+  return Promise.resolve();
+}
+
+export function apiGetProjectsForUser(req, res) {
+  if (req.params.username) {
+    return getProjectsForUserName(req.params.username)
+      .then((projects) => {
+        const asApiObjects = projects.map(p => toApiProjectObject(p));
+        res.json({ sketches: asApiObjects });
+      })
+      .catch((err) => {
+        if (err instanceof UserNotFoundError) {
+          res.status(404).json({ message: 'User with that username does not exist.' });
+        } else {
+          res.status(500).json({ message: 'Error fetching projects' });
+        }
+      });
+  }
+
+  res.status(422).json({ message: 'Username not provided' });
+  return Promise.resolve();
+}
diff --git a/server/controllers/session.controller.js b/server/controllers/session.controller.js
index 9fd16e97..bd4a252a 100644
--- a/server/controllers/session.controller.js
+++ b/server/controllers/session.controller.js
@@ -1,5 +1,7 @@
 import passport from 'passport';
 
+import { userResponse } from './user.controller';
+
 export function createSession(req, res, next) {
   passport.authenticate('local', (err, user) => { // eslint-disable-line consistent-return
     if (err) { return next(err); }
@@ -9,26 +11,14 @@ export function createSession(req, res, next) {
 
     req.logIn(user, (innerErr) => {
       if (innerErr) { return next(innerErr); }
-      return res.json({
-        email: req.user.email,
-        username: req.user.username,
-        preferences: req.user.preferences,
-        verified: req.user.verified,
-        id: req.user._id
-      });
+      return res.json(userResponse(req.user));
     });
   })(req, res, next);
 }
 
 export function getSession(req, res) {
   if (req.user) {
-    return res.json({
-      email: req.user.email,
-      username: req.user.username,
-      preferences: req.user.preferences,
-      verified: req.user.verified,
-      id: req.user._id
-    });
+    return res.json(userResponse(req.user));
   }
   return res.status(404).send({ message: 'Session does not exist' });
 }
diff --git a/server/controllers/user.controller.js b/server/controllers/user.controller.js
index 00f3f022..d326e373 100644
--- a/server/controllers/user.controller.js
+++ b/server/controllers/user.controller.js
@@ -8,6 +8,20 @@ import {
   renderResetPassword,
 } from '../views/mail';
 
+export * from './user.controller/apiKey';
+
+export function userResponse(user) {
+  return {
+    email: user.email,
+    username: user.username,
+    preferences: user.preferences,
+    apiKeys: user.apiKeys,
+    verified: user.verified,
+    id: user._id,
+    totalSize: user.totalSize
+  };
+}
+
 const random = (done) => {
   crypto.randomBytes(20, (err, buf) => {
     const token = buf.toString('hex');
@@ -24,9 +38,8 @@ export function findUserByUsername(username, cb) {
   );
 }
 
-const EMAIL_VERIFY_TOKEN_EXPIRY_TIME = Date.now() + (3600000 * 24); // 24 hours
-
 export function createUser(req, res, next) {
+  const EMAIL_VERIFY_TOKEN_EXPIRY_TIME = Date.now() + (3600000 * 24); // 24 hours
   random((tokenError, token) => {
     const user = new User({
       username: req.body.username,
@@ -76,13 +89,7 @@ export function createUser(req, res, next) {
             });
 
             mail.send(mailOptions, (mailErr, result) => { // eslint-disable-line no-unused-vars
-              res.json({
-                email: req.user.email,
-                username: req.user.username,
-                preferences: req.user.preferences,
-                verified: req.user.verified,
-                id: req.user._id
-              });
+              res.json(userResponse(req.user));
             });
           });
         });
@@ -217,18 +224,13 @@ export function emailVerificationInitiate(req, res) {
           if (mailErr != null) {
             res.status(500).send({ error: 'Error sending mail' });
           } else {
+            const EMAIL_VERIFY_TOKEN_EXPIRY_TIME = Date.now() + (3600000 * 24); // 24 hours
             user.verified = User.EmailConfirmation.Resent;
             user.verifiedToken = token;
             user.verifiedTokenExpires = EMAIL_VERIFY_TOKEN_EXPIRY_TIME; // 24 hours
             user.save();
 
-            res.json({
-              email: req.user.email,
-              username: req.user.username,
-              preferences: req.user.preferences,
-              verified: user.verified,
-              id: req.user._id
-            });
+            res.json(userResponse(req.user));
           }
         });
       });
@@ -239,7 +241,7 @@ export function emailVerificationInitiate(req, res) {
 export function verifyEmail(req, res) {
   const token = req.query.t;
 
-  User.findOne({ verifiedToken: token, verifiedTokenExpires: { $gt: Date.now() } }, (err, user) => {
+  User.findOne({ verifiedToken: token, verifiedTokenExpires: { $gt: new Date() } }, (err, user) => {
     if (!user) {
       res.status(401).json({ success: false, message: 'Token is invalid or has expired.' });
       return;
@@ -267,12 +269,7 @@ export function updatePassword(req, res) {
     user.resetPasswordExpires = undefined;
 
     user.save((saveErr) => {
-      req.logIn(user, loginErr => res.json({
-        email: req.user.email,
-        username: req.user.username,
-        preferences: req.user.preferences,
-        id: req.user._id
-      }));
+      req.logIn(user, loginErr => res.json(userResponse(req.user)));
     });
   });
 
@@ -292,13 +289,7 @@ export function saveUser(res, user) {
       return;
     }
 
-    res.json({
-      email: user.email,
-      username: user.username,
-      preferences: user.preferences,
-      verified: user.verified,
-      id: user._id
-    });
+    res.json(userResponse(user));
   });
 }
 
@@ -326,6 +317,7 @@ export function updateSettings(req, res) {
         saveUser(res, user);
       });
     } else if (user.email !== req.body.email) {
+      const EMAIL_VERIFY_TOKEN_EXPIRY_TIME = Date.now() + (3600000 * 24); // 24 hours
       user.verified = User.EmailConfirmation.Sent;
 
       user.email = req.body.email;
@@ -352,3 +344,4 @@ export function updateSettings(req, res) {
     }
   });
 }
+
diff --git a/server/controllers/user.controller/__tests__/apiKey.test.js b/server/controllers/user.controller/__tests__/apiKey.test.js
new file mode 100644
index 00000000..7e396288
--- /dev/null
+++ b/server/controllers/user.controller/__tests__/apiKey.test.js
@@ -0,0 +1,180 @@
+/* @jest-environment node */
+
+import last from 'lodash/last';
+import { Request, Response } from 'jest-express';
+
+import User, { createMock, createInstanceMock } from '../../../models/user';
+import { createApiKey, removeApiKey } from '../../user.controller/apiKey';
+
+jest.mock('../../../models/user');
+
+describe('user.controller', () => {
+  let UserMock;
+  let UserInstanceMock;
+
+  beforeEach(() => {
+    UserMock = createMock();
+    UserInstanceMock = createInstanceMock();
+  });
+
+  afterEach(() => {
+    UserMock.restore();
+    UserInstanceMock.restore();
+  });
+
+
+  describe('createApiKey', () => {
+    it('returns an error if user doesn\'t exist', () => {
+      const request = { user: { id: '1234' } };
+      const response = new Response();
+
+      UserMock
+        .expects('findById')
+        .withArgs('1234')
+        .yields(null, null);
+
+      createApiKey(request, response);
+
+      expect(response.status).toHaveBeenCalledWith(404);
+      expect(response.json).toHaveBeenCalledWith({
+        error: 'User not found'
+      });
+    });
+
+    it('returns an error if label not provided', () => {
+      const request = { user: { id: '1234' }, body: {} };
+      const response = new Response();
+
+      UserMock
+        .expects('findById')
+        .withArgs('1234')
+        .yields(null, new User());
+
+      createApiKey(request, response);
+
+      expect(response.status).toHaveBeenCalledWith(400);
+      expect(response.json).toHaveBeenCalledWith({
+        error: 'Expected field \'label\' was not present in request body'
+      });
+    });
+
+    it('returns generated API key to the user', (done) => {
+      const request = new Request();
+      request.setBody({ label: 'my key' });
+      request.user = { id: '1234' };
+
+      const response = new Response();
+
+      const user = new User();
+
+      UserMock
+        .expects('findById')
+        .withArgs('1234')
+        .yields(null, user);
+
+      UserInstanceMock.expects('save')
+        .yields();
+
+      function expectations() {
+        const lastKey = last(user.apiKeys);
+
+        expect(lastKey.label).toBe('my key');
+        expect(typeof lastKey.hashedKey).toBe('string');
+
+        const responseData = response.json.mock.calls[0][0];
+
+        expect(responseData.apiKeys.length).toBe(1);
+        expect(responseData.apiKeys[0]).toMatchObject({
+          label: 'my key',
+          token: lastKey.hashedKey,
+          lastUsedAt: undefined,
+          createdAt: undefined
+        });
+
+        done();
+      }
+
+      const promise = createApiKey(request, response);
+
+      promise.then(expectations, expectations).catch(expectations);
+    });
+  });
+
+  describe('removeApiKey', () => {
+    it('returns an error if user doesn\'t exist', () => {
+      const request = { user: { id: '1234' } };
+      const response = new Response();
+
+      UserMock
+        .expects('findById')
+        .withArgs('1234')
+        .yields(null, null);
+
+      removeApiKey(request, response);
+
+      expect(response.status).toHaveBeenCalledWith(404);
+      expect(response.json).toHaveBeenCalledWith({
+        error: 'User not found'
+      });
+    });
+
+    it('returns an error if specified key doesn\'t exist', () => {
+      const request = {
+        user: { id: '1234' },
+        params: { keyId: 'not-a-real-key' }
+      };
+      const response = new Response();
+      const user = new User();
+
+      UserMock
+        .expects('findById')
+        .withArgs('1234')
+        .yields(null, user);
+
+      removeApiKey(request, response);
+
+      expect(response.status).toHaveBeenCalledWith(404);
+      expect(response.json).toHaveBeenCalledWith({
+        error: 'Key does not exist for user'
+      });
+    });
+
+    it('removes key if it exists', () => {
+      const user = new User();
+      user.apiKeys.push({ label: 'first key' }); // id 0
+      user.apiKeys.push({ label: 'second key' }); // id 1
+
+      const firstKeyId = user.apiKeys[0]._id.toString();
+      const secondKeyId = user.apiKeys[1]._id.toString();
+
+      const request = {
+        user: { id: '1234' },
+        params: { keyId: firstKeyId }
+      };
+      const response = new Response();
+
+      UserMock
+        .expects('findById')
+        .withArgs('1234')
+        .yields(null, user);
+
+      UserInstanceMock
+        .expects('save')
+        .yields();
+
+      removeApiKey(request, response);
+
+      expect(response.status).toHaveBeenCalledWith(200);
+
+      const responseData = response.json.mock.calls[0][0];
+
+      expect(responseData.apiKeys.length).toBe(1);
+      expect(responseData.apiKeys[0]).toMatchObject({
+        id: secondKeyId,
+        label: 'second key',
+        lastUsedAt: undefined,
+        createdAt: undefined
+      });
+    });
+  });
+});
diff --git a/server/controllers/user.controller/apiKey.js b/server/controllers/user.controller/apiKey.js
new file mode 100644
index 00000000..5d45b123
--- /dev/null
+++ b/server/controllers/user.controller/apiKey.js
@@ -0,0 +1,103 @@
+import crypto from 'crypto';
+
+import User from '../../models/user';
+
+/**
+ * Generates a unique token to be used as a Personal Access Token
+ * @returns Promise<String> A promise that resolves to the token, or an Error
+ */
+function generateApiKey() {
+  return new Promise((resolve, reject) => {
+    crypto.randomBytes(20, (err, buf) => {
+      if (err) {
+        reject(err);
+      }
+      const key = buf.toString('hex');
+      resolve(Buffer.from(key).toString('base64'));
+    });
+  });
+}
+
+export function createApiKey(req, res) {
+  return new Promise((resolve, reject) => {
+    function sendFailure(code, error) {
+      res.status(code).json({ error });
+      resolve();
+    }
+
+    User.findById(req.user.id, async (err, user) => {
+      if (!user) {
+        sendFailure(404, 'User not found');
+        return;
+      }
+
+      if (!req.body.label) {
+        sendFailure(400, 'Expected field \'label\' was not present in request body');
+        return;
+      }
+
+      const keyToBeHashed = await generateApiKey();
+
+      const addedApiKeyIndex = user.apiKeys.push({ label: req.body.label, hashedKey: keyToBeHashed });
+
+      user.save((saveErr) => {
+        if (saveErr) {
+          sendFailure(500, saveErr);
+          return;
+        }
+
+        const apiKeys = user.apiKeys
+          .map((apiKey, index) => {
+            const fields = apiKey.toObject();
+            const shouldIncludeToken = index === addedApiKeyIndex - 1;
+
+            return shouldIncludeToken ?
+              { ...fields, token: keyToBeHashed } :
+              fields;
+          });
+
+        res.json({ apiKeys });
+        resolve();
+      });
+    });
+  });
+}
+
+export function removeApiKey(req, res) {
+  return new Promise((resolve, reject) => {
+    function sendFailure(code, error) {
+      res.status(code).json({ error });
+      resolve();
+    }
+
+    User.findById(req.user.id, (err, user) => {
+      if (err) {
+        sendFailure(500, err);
+        return;
+      }
+
+      if (!user) {
+        sendFailure(404, 'User not found');
+        return;
+      }
+
+      const keyToDelete = user.apiKeys.find(key => key.id === req.params.keyId);
+      if (!keyToDelete) {
+        sendFailure(404, 'Key does not exist for user');
+        return;
+      }
+
+      user.apiKeys.pull({ _id: req.params.keyId });
+
+      user.save((saveErr) => {
+        if (saveErr) {
+          sendFailure(500, saveErr);
+          return;
+        }
+
+        res.status(200).json({ apiKeys: user.apiKeys });
+        resolve();
+      });
+    });
+  });
+}
diff --git a/server/domain-objects/Project.js b/server/domain-objects/Project.js
new file mode 100644
index 00000000..f0de023f
--- /dev/null
+++ b/server/domain-objects/Project.js
@@ -0,0 +1,133 @@
+import isPlainObject from 'lodash/isPlainObject';
+import pick from 'lodash/pick';
+import Project from '../models/project';
+import createId from '../utils/createId';
+import createApplicationErrorClass from '../utils/createApplicationErrorClass';
+import createDefaultFiles from './createDefaultFiles';
+
+export const FileValidationError = createApplicationErrorClass('FileValidationError');
+export const ProjectValidationError = createApplicationErrorClass('ProjectValidationError');
+
+/**
+ * This converts between a mongoose Project model
+ * and the public API Project object properties
+ *
+ */
+export function toApi(model) {
+  return {
+    id: model.id,
+    name: model.name,
+  };
+}
+
+/**
+ * Transforms a tree of files matching the APIs DirectoryContents
+ * format into the data structure stored in mongodb
+ *
+ * - flattens the tree into an array of file/folders
+ * - each file/folder gets a generated BSON-ID
+ * - each folder has a `children` array containing the IDs of it's children
+ */
+function transformFilesInner(tree = {}, parentNode) {
+  const files = [];
+  const errors = [];
+
+  Object.entries(tree).forEach(([name, params]) => {
+    const id = createId();
+    const isFolder = params.files != null;
+
+    if (isFolder) {
+      const folder = {
+        _id: id,
+        name,
+        fileType: 'folder',
+        children: [] // Initialise an empty folder
+      };
+
+      files.push(folder);
+
+      // The recursion will return a list of child files/folders
+      // It will also push the child's id into `folder.children`
+      const subFolder = transformFilesInner(params.files, folder);
+      files.push(...subFolder.files);
+      errors.push(...subFolder.errors);
+    } else {
+      const file = {
+        _id: id,
+        name,
+        fileType: 'file'
+      };
+
+      if (typeof params.url === 'string') {
+        file.url = params.url;
+      } else if (typeof params.content === 'string') {
+        file.content = params.content;
+      } else {
+        errors.push({ name, message: 'missing \'url\' or \'content\'' });
+      }
+
+      files.push(file);
+    }
+
+    // Push this child's ID onto it's parent's list
+    // of children
+    if (parentNode != null) {
+      parentNode.children.push(id);
+    }
+  });
+
+  return { files, errors };
+}
+
+export function transformFiles(tree = {}) {
+  const withRoot = {
+    root: {
+      files: tree
+    }
+  };
+
+  const { files, errors } = transformFilesInner(withRoot);
+
+  if (errors.length > 0) {
+    const message = `${errors.length} files failed validation. See error.files for individual errors.
+    
+    Errors:
+      ${errors.map(e => `* ${e.name}: ${e.message}`).join('\n')}
+`;
+    const error = new FileValidationError(message);
+    error.files = errors;
+
+    throw error;
+  }
+
+  return files;
+}
+
+export function containsRootHtmlFile(tree) {
+  return Object.keys(tree).find(name => /\.html$/.test(name)) != null;
+}
+
+/**
+ * This converts between the public API's Project object
+ * properties and a mongoose Project model
+ *
+ */
+export function toModel(object) {
+  let files = [];
+  let tree = object.files;
+
+  if (isPlainObject(tree)) {
+    if (!containsRootHtmlFile(tree)) {
+      tree = Object.assign(createDefaultFiles(), tree);
+    }
+
+    files = transformFiles(tree);
+  } else {
+    throw new FileValidationError('\'files\' must be an object');
+  }
+
+  const projectValues = pick(object, ['user', 'name', 'slug']);
+  projectValues.files = files;
+
+  return new Project(projectValues);
+}
diff --git a/server/domain-objects/__test__/Project.test.js b/server/domain-objects/__test__/Project.test.js
new file mode 100644
index 00000000..0f3c9dd9
--- /dev/null
+++ b/server/domain-objects/__test__/Project.test.js
@@ -0,0 +1,385 @@
+import find from 'lodash/find';
+
+import { containsRootHtmlFile, toModel, transformFiles, FileValidationError } from '../Project';
+
+jest.mock('../../utils/createId');
+
+// TODO: File name validation
+// TODO: File extension validation
+//
+describe('domain-objects/Project', () => {
+  describe('containsRootHtmlFile', () => {
+    it('returns true for at least one root .html', () => {
+      expect(containsRootHtmlFile({ 'index.html': {} })).toBe(true);
+      expect(containsRootHtmlFile({ 'another-one.html': {} })).toBe(true);
+      expect(containsRootHtmlFile({ 'one.html': {}, 'two.html': {} })).toBe(true);
+      expect(containsRootHtmlFile({ 'one.html': {}, 'sketch.js': {} })).toBe(true);
+    });
+
+    it('returns false anything else', () => {
+      expect(containsRootHtmlFile({ 'sketch.js': {} })).toBe(false);
+    });
+
+    it('ignores nested html', () => {
+      expect(containsRootHtmlFile({
+        examples: {
+          files: {
+            'index.html': {}
+          }
+        }
+      })).toBe(false);
+    });
+  });
+
+  describe('toModel', () => {
+    it('filters extra properties', () => {
+      const params = {
+        name: 'My sketch',
+        extraThing: 'oopsie',
+        files: {}
+      };
+
+      const model = toModel(params);
+
+      expect(model.name).toBe('My sketch');
+      expect(model.extraThing).toBeUndefined();
+    });
+
+    it('throws FileValidationError', () => {
+      const params = {
+        files: {
+          'index.html': {} // missing content or url
+        }
+      };
+
+      expect(() => toModel(params)).toThrowError(FileValidationError);
+    });
+
+    it('throws if files is not an object', () => {
+      const params = {
+        files: []
+      };
+
+      expect(() => toModel(params)).toThrowError(FileValidationError);
+    });
+
+    it('creates default index.html and dependent files if no root .html is provided', () => {
+      const params = {
+        files: {}
+      };
+
+      const { files } = toModel(params);
+
+      expect(files.length).toBe(4);
+      expect(find(files, { name: 'index.html' })).not.toBeUndefined();
+      expect(find(files, { name: 'sketch.js' })).not.toBeUndefined();
+      expect(find(files, { name: 'style.css' })).not.toBeUndefined();
+    });
+
+    it('does not create default files if any root .html is provided', () => {
+      const params = {
+        files: {
+          'example.html': {
+            content: '<html><body>Hello!</body></html>'
+          }
+        }
+      };
+
+      const { files } = toModel(params);
+
+      expect(files.length).toBe(2);
+      expect(find(files, { name: 'example.html' })).not.toBeUndefined();
+      expect(find(files, { name: 'index.html' })).toBeUndefined();
+      expect(find(files, { name: 'sketch.js' })).toBeUndefined();
+      expect(find(files, { name: 'style.css' })).toBeUndefined();
+    });
+
+    it('does not overwrite default CSS and JS of the same name if provided', () => {
+      const params = {
+        files: {
+          'sketch.js': {
+            content: 'const sketch = true;'
+          },
+          'style.css': {
+            content: 'body { outline: 10px solid red; }'
+          }
+        }
+      };
+
+      const { files } = toModel(params);
+
+      expect(files.length).toBe(4);
+      expect(find(files, { name: 'index.html' })).not.toBeUndefined();
+
+      const sketchFile = find(files, { name: 'sketch.js' });
+      expect(sketchFile.content).toBe('const sketch = true;');
+
+      const cssFile = find(files, { name: 'style.css' });
+      expect(cssFile.content).toBe('body { outline: 10px solid red; }');
+    });
+  });
+});
+
+describe('transformFiles', () => {
+  beforeEach(() => {
+    // eslint-disable-next-line global-require
+    const { resetMockCreateId } = require('../../utils/createId');
+
+    resetMockCreateId();
+  });
+
+  it('creates an empty root with no data', () => {
+    const tree = {};
+
+    expect(transformFiles(tree)).toEqual([{
+      _id: '0',
+      fileType: 'folder',
+      name: 'root',
+      children: []
+    }]);
+  });
+
+  it('converts tree-shaped files into list', () => {
+    const tree = {
+      'index.html': {
+        content: 'some contents',
+      }
+    };
+
+    expect(transformFiles(tree)).toEqual([
+      {
+        _id: '0',
+        fileType: 'folder',
+        name: 'root',
+        children: ['1']
+      },
+      {
+        _id: '1',
+        content: 'some contents',
+        fileType: 'file',
+        name: 'index.html'
+      }
+    ]);
+  });
+
+  it('uses file url over content', () => {
+    const tree = {
+      'script.js': {
+        url: 'http://example.net/something.js'
+      }
+    };
+
+    expect(transformFiles(tree)).toEqual([
+      {
+        _id: '0',
+        fileType: 'folder',
+        name: 'root',
+        children: ['1']
+      },
+      {
+        _id: '1',
+        url: 'http://example.net/something.js',
+        fileType: 'file',
+        name: 'script.js'
+      }
+    ]);
+  });
+
+  it('creates folders', () => {
+    const tree = {
+      'a-folder': {
+        files: {}
+      },
+    };
+
+    expect(transformFiles(tree)).toEqual([
+      {
+        _id: '0',
+        fileType: 'folder',
+        name: 'root',
+        children: ['1']
+      },
+      {
+        _id: '1',
+        children: [],
+        fileType: 'folder',
+        name: 'a-folder'
+      }
+    ]);
+  });
+
+  it('walks the tree processing files', () => {
+    const tree = {
+      'index.html': {
+        content: 'some contents',
+      },
+      'a-folder': {
+        files: {
+          'data.csv': {
+            content: 'this,is,data'
+          },
+          'another.txt': {
+            content: 'blah blah'
+          }
+        }
+      },
+    };
+
+    expect(transformFiles(tree)).toEqual([
+      {
+        _id: '0',
+        fileType: 'folder',
+        name: 'root',
+        children: ['1', '2']
+      },
+      {
+        _id: '1',
+        name: 'index.html',
+        fileType: 'file',
+        content: 'some contents'
+      },
+      {
+        _id: '2',
+        name: 'a-folder',
+        fileType: 'folder',
+        children: ['3', '4']
+      },
+      {
+        _id: '3',
+        name: 'data.csv',
+        fileType: 'file',
+        content: 'this,is,data'
+      },
+      {
+        _id: '4',
+        name: 'another.txt',
+        fileType: 'file',
+        content: 'blah blah'
+      }
+    ]);
+  });
+
+  it('handles deep nesting', () => {
+    const tree = {
+      first: {
+        files: {
+          second: {
+            files: {
+              third: {
+                files: {
+                  'hello.js': {
+                    content: 'world!'
+                  }
+                }
+              }
+            }
+          }
+        }
+      },
+    };
+
+    expect(transformFiles(tree)).toEqual([
+      {
+        _id: '0',
+        fileType: 'folder',
+        name: 'root',
+        children: ['1']
+      },
+      {
+        _id: '1',
+        name: 'first',
+        fileType: 'folder',
+        children: ['2']
+      },
+      {
+        _id: '2',
+        name: 'second',
+        fileType: 'folder',
+        children: ['3']
+      },
+      {
+        _id: '3',
+        name: 'third',
+        fileType: 'folder',
+        children: ['4']
+      },
+      {
+        _id: '4',
+        name: 'hello.js',
+        fileType: 'file',
+        content: 'world!'
+      }
+    ]);
+  });
+
+
+  it('allows duplicate names in different folder', () => {
+    const tree = {
+      'index.html': {
+        content: 'some contents',
+      },
+      'data': {
+        files: {
+          'index.html': {
+            content: 'different file'
+          }
+        }
+      },
+    };
+
+    expect(transformFiles(tree)).toEqual([
+      {
+        _id: '0',
+        fileType: 'folder',
+        name: 'root',
+        children: ['1', '2']
+      },
+      {
+        _id: '1',
+        name: 'index.html',
+        fileType: 'file',
+        content: 'some contents'
+      },
+      {
+        _id: '2',
+        name: 'data',
+        fileType: 'folder',
+        children: ['3']
+      },
+      {
+        _id: '3',
+        name: 'index.html',
+        fileType: 'file',
+        content: 'different file'
+      }
+    ]);
+  });
+
+  it('validates files', () => {
+    const tree = {
+      'index.html': {} // missing `content`
+    };
+
+    expect(() => transformFiles(tree)).toThrowError(FileValidationError);
+  });
+
+  it('collects all file validation errors', () => {
+    const tree = {
+      'index.html': {}, // missing `content`
+      'something.js': {} // also missing `content`
+    };
+
+    try {
+      transformFiles(tree);
+
+      // Should not get here
+      throw new Error('should have thrown before this point');
+    } catch (err) {
+      expect(err).toBeInstanceOf(FileValidationError);
+      expect(err.files).toEqual([
+        { name: 'index.html', message: 'missing \'url\' or \'content\'' },
+        { name: 'something.js', message: 'missing \'url\' or \'content\'' }
+      ]);
+    }
+  });
+});
diff --git a/server/domain-objects/createDefaultFiles.js b/server/domain-objects/createDefaultFiles.js
new file mode 100644
index 00000000..9164c12a
--- /dev/null
+++ b/server/domain-objects/createDefaultFiles.js
@@ -0,0 +1,48 @@
+const defaultSketch = `function setup() {
+  createCanvas(400, 400);
+}
+
+function draw() {
+  background(220);
+}`;
+
+const defaultHTML =
+  `<!DOCTYPE html>
+<html>
+  <head>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.sound.min.js"></script>
+    <link rel="stylesheet" type="text/css" href="style.css">
+    <meta charset="utf-8" />
+
+  </head>
+  <body>
+    <script src="sketch.js"></script>
+  </body>
+</html>
+`;
+
+const defaultCSS =
+  `html, body {
+  margin: 0;
+  padding: 0;
+}
+canvas {
+  display: block;
+}
+`;
+
+export default function createDefaultFiles() {
+  return {
+    'index.html': {
+      content: defaultHTML
+    },
+    'style.css': {
+      content: defaultCSS
+    },
+    'sketch.js': {
+      content: defaultSketch
+    }
+  };
+}
diff --git a/server/migrations/db_reformat.js b/server/migrations/db_reformat.js
index b6c85a30..50284c1f 100644
--- a/server/migrations/db_reformat.js
+++ b/server/migrations/db_reformat.js
@@ -13,7 +13,7 @@ mongoose.connection.on('error', () => {
 import Project from '../models/project';
 import User from '../models/user';
 
-import s3 from 's3';
+import s3 from '@auth0/s3';
 
 let client = s3.createClient({
   maxAsyncS3: 20,
diff --git a/server/migrations/moveBucket.js b/server/migrations/moveBucket.js
index e8e25d17..fa833e38 100644
--- a/server/migrations/moveBucket.js
+++ b/server/migrations/moveBucket.js
@@ -1,5 +1,5 @@
 /* eslint-disable */
-import s3 from 's3';
+import s3 from '@auth0/s3';
 import path from 'path';
 import mongoose from 'mongoose';
 import User from '../models/user';
diff --git a/server/migrations/populateTotalSize.js b/server/migrations/populateTotalSize.js
new file mode 100644
index 00000000..19e9f623
--- /dev/null
+++ b/server/migrations/populateTotalSize.js
@@ -0,0 +1,29 @@
+/* eslint-disable */
+import mongoose from 'mongoose';
+
+import User from '../models/user';
+import { listObjectsInS3ForUser } from '../controllers/aws.controller';
+
+// Connect to MongoDB
+mongoose.Promise = global.Promise;
+mongoose.connect(process.env.MONGO_URL, { useMongoClient: true });
+mongoose.connection.on('error', () => {
+  console.error('MongoDB Connection Error. Please make sure that MongoDB is running.');
+  process.exit(1);
+});
+
+User.find({}, {}, { timeout: true }).cursor().eachAsync((user) => {
+  console.log(user.id);
+  if (user.totalSize !== undefined) {
+    console.log('Already updated size for user: ' + user.username);
+    return Promise.resolve();
+  }
+  return listObjectsInS3ForUser(user.id).then((objects) => {
+    return User.findByIdAndUpdate(user.id, { $set: { totalSize: objects.totalSize } });
+  }).then(() => {
+    console.log('Updated new total size for user: ' + user.username);
+  });
+}).then(() => {
+  console.log('Done iterating over every user');
+  process.exit(0);
+});
\ No newline at end of file
diff --git a/server/migrations/s3UnderUser.js b/server/migrations/s3UnderUser.js
index 0b6d69b8..33500f75 100644
--- a/server/migrations/s3UnderUser.js
+++ b/server/migrations/s3UnderUser.js
@@ -1,5 +1,5 @@
 /* eslint-disable */
-import s3 from 's3';
+import s3 from '@auth0/s3';
 import path from 'path';
 import mongoose from 'mongoose';
 import User from '../models/user';
diff --git a/server/migrations/start.js b/server/migrations/start.js
index 0c68e0eb..a3127620 100644
--- a/server/migrations/start.js
+++ b/server/migrations/start.js
@@ -1,3 +1,7 @@
 require('@babel/register');
 require('@babel/polyfill');
-require('./truncate');
+const path = require('path');
+require('dotenv').config({ path: path.resolve('.env') });
+require('./populateTotalSize');
+// require('./moveBucket');
+// require('./truncate');
diff --git a/server/models/__mocks__/project.js b/server/models/__mocks__/project.js
index 7260fcfd..2590046f 100644
--- a/server/models/__mocks__/project.js
+++ b/server/models/__mocks__/project.js
@@ -11,6 +11,24 @@ export function createMock() {
   return sinon.mock(Project);
 }
 
+// Wraps the Project.prototype i.e. the
+// instance methods in a mock so
+// Project.save() can be mocked
+export function createInstanceMock() {
+  // See: https://stackoverflow.com/questions/40962960/sinon-mock-of-mongoose-save-method-for-all-future-instances-of-a-model-with-pro
+  Object.defineProperty(Project.prototype, 'save', {
+    value: Project.prototype.save,
+    configurable: true,
+  });
+
+  Object.defineProperty(Project.prototype, 'remove', {
+    value: Project.prototype.remove,
+    configurable: true,
+  });
+
+  return sinon.mock(Project.prototype);
+}
+
 // Re-export the model, it will be
 // altered by mockingoose whenever
 // we call methods on the MockConfig
diff --git a/server/models/__mocks__/user.js b/server/models/__mocks__/user.js
new file mode 100644
index 00000000..fcd73f32
--- /dev/null
+++ b/server/models/__mocks__/user.js
@@ -0,0 +1,31 @@
+import sinon from 'sinon';
+import 'sinon-mongoose';
+
+// Import the actual model to be mocked
+const User = jest.requireActual('../user').default;
+
+// Wrap User in a sinon mock
+// The returned object is used to configure
+// the mocked model's behaviour
+export function createMock() {
+  return sinon.mock(User);
+}
+
+// Wraps the User.prototype i.e. the
+// instance methods in a mock so
+// User.save() can be mocked
+export function createInstanceMock() {
+  // See: https://stackoverflow.com/questions/40962960/sinon-mock-of-mongoose-save-method-for-all-future-instances-of-a-model-with-pro
+  Object.defineProperty(User.prototype, 'save', {
+    value: User.prototype.save,
+    configurable: true,
+  });
+
+  return sinon.mock(User.prototype);
+}
+
+
+// Re-export the model, it will be
+// altered by mockingoose whenever
+// we call methods on the MockConfig
+export default User;
diff --git a/server/models/collection.js b/server/models/collection.js
new file mode 100644
index 00000000..2753496b
--- /dev/null
+++ b/server/models/collection.js
@@ -0,0 +1,48 @@
+import mongoose from 'mongoose';
+import shortid from 'shortid';
+import slugify from 'slugify';
+
+const { Schema } = mongoose;
+
+const collectedProjectSchema = new Schema(
+  {
+    project: { type: Schema.Types.ObjectId, ref: 'Project' },
+  },
+  { timestamps: true, _id: true, usePushEach: true }
+);
+
+collectedProjectSchema.virtual('id').get(function getId() {
+  return this._id.toHexString();
+});
+
+collectedProjectSchema.set('toJSON', {
+  virtuals: true
+});
+
+const collectionSchema = new Schema(
+  {
+    _id: { type: String, default: shortid.generate },
+    name: { type: String, default: 'My collection' },
+    description: { type: String },
+    slug: { type: String },
+    owner: { type: Schema.Types.ObjectId, ref: 'User' },
+    items: { type: [collectedProjectSchema] }
+  },
+  { timestamps: true, usePushEach: true }
+);
+
+collectionSchema.virtual('id').get(function getId() {
+  return this._id;
+});
+
+collectionSchema.set('toJSON', {
+  virtuals: true
+});
+
+collectionSchema.pre('save', function generateSlug(next) {
+  const collection = this;
+  collection.slug = slugify(collection.name, '_');
+  return next();
+});
+
+export default mongoose.model('Collection', collectionSchema);
diff --git a/server/models/project.js b/server/models/project.js
index 8642bc90..bf8c992e 100644
--- a/server/models/project.js
+++ b/server/models/project.js
@@ -49,8 +49,43 @@ projectSchema.set('toJSON', {
 
 projectSchema.pre('save', function generateSlug(next) {
   const project = this;
-  project.slug = slugify(project.name, '_');
+
+  if (!project.slug) {
+    project.slug = slugify(project.name, '_');
+  }
+
   return next();
 });
 
+/**
+ * Check if slug is unique for this user's projects
+ */
+projectSchema.methods.isSlugUnique = async function isSlugUnique(cb) {
+  const project = this;
+  const hasCallback = typeof cb === 'function';
+
+  try {
+    const docsWithSlug = await project.model('Project')
+      .find({ user: project.user, slug: project.slug }, '_id')
+      .exec();
+
+    const result = {
+      isUnique: docsWithSlug.length === 0,
+      conflictingIds: docsWithSlug.map(d => d._id) || []
+    };
+
+    if (hasCallback) {
+      cb(null, result);
+    }
+
+    return result;
+  } catch (err) {
+    if (hasCallback) {
+      cb(err, null);
+    }
+
+    throw err;
+  }
+};
+
 export default mongoose.model('Project', projectSchema);
diff --git a/server/models/user.js b/server/models/user.js
index fe456435..98c0e1fd 100644
--- a/server/models/user.js
+++ b/server/models/user.js
@@ -10,6 +10,36 @@ const EmailConfirmationStates = {
 
 const { Schema } = mongoose;
 
+const apiKeySchema = new Schema({
+  label: { type: String, default: 'API Key' },
+  lastUsedAt: { type: Date },
+  hashedKey: { type: String, required: true },
+}, { timestamps: true, _id: true });
+
+apiKeySchema.virtual('id').get(function getApiKeyId() {
+  return this._id.toHexString();
+});
+
+/**
+ * When serialising an APIKey instance, the `hashedKey` field
+ * should never be exposed to the client. So we only return
+ * a safe list of fields when toObject and toJSON are called.
+*/
+function apiKeyMetadata(doc, ret, options) {
+  return {
+    id: doc.id, label: doc.label, lastUsedAt: doc.lastUsedAt, createdAt: doc.createdAt
+  };
+}
+
+apiKeySchema.set('toObject', {
+  transform: apiKeyMetadata
+});
+
+apiKeySchema.set('toJSON', {
+  virtuals: true,
+  transform: apiKeyMetadata
+});
+
 const userSchema = new Schema({
   name: { type: String, default: '' },
   username: { type: String, required: true, unique: true },
@@ -22,6 +52,7 @@ const userSchema = new Schema({
   github: { type: String },
   email: { type: String, unique: true },
   tokens: Array,
+  apiKeys: { type: [apiKeySchema] },
   preferences: {
     fontSize: { type: Number, default: 18 },
     lineNumbers: { type: Boolean, default: true },
@@ -35,7 +66,8 @@ const userSchema = new Schema({
     soundOutput: { type: Boolean, default: false },
     theme: { type: String, default: 'light' },
     autorefresh: { type: Boolean, default: false }
-  }
+  },
+  totalSize: { type: Number, default: 0 }
 }, { timestamps: true, usePushEach: true });
 
 /**
@@ -54,6 +86,29 @@ userSchema.pre('save', function checkPassword(next) { // eslint-disable-line con
   });
 });
 
+/**
+ * API keys hash middleware
+ */
+userSchema.pre('save', function checkApiKey(next) { // eslint-disable-line consistent-return
+  const user = this;
+  if (!user.isModified('apiKeys')) { return next(); }
+  let hasNew = false;
+  user.apiKeys.forEach((k) => {
+    if (k.isNew) {
+      hasNew = true;
+      bcrypt.genSalt(10, (err, salt) => { // eslint-disable-line consistent-return
+        if (err) { return next(err); }
+        bcrypt.hash(k.hashedKey, salt, null, (innerErr, hash) => {
+          if (innerErr) { return next(innerErr); }
+          k.hashedKey = hash;
+          return next();
+        });
+      });
+    }
+  });
+  if (!hasNew) return next();
+});
+
 userSchema.virtual('id').get(function idToString() {
   return this._id.toHexString();
 });
@@ -62,7 +117,6 @@ userSchema.set('toJSON', {
   virtuals: true
 });
 
-
 /**
  * Helper method for validating user's password.
  */
@@ -73,6 +127,20 @@ userSchema.methods.comparePassword = function comparePassword(candidatePassword,
   });
 };
 
+/**
+ * Helper method for validating a user's api key
+ */
+userSchema.methods.findMatchingKey = function findMatchingKey(candidateKey, cb) {
+  let foundOne = false;
+  this.apiKeys.forEach((k) => {
+    if (bcrypt.compareSync(candidateKey, k.hashedKey)) {
+      foundOne = true;
+      cb(null, true, k);
+    }
+  });
+  if (!foundOne) cb('Matching API key not found !', false, null);
+};
+
 userSchema.statics.findByMailOrName = function findByMailOrName(email) {
   const query = {
     $or: [{
diff --git a/server/routes/api.routes.js b/server/routes/api.routes.js
new file mode 100644
index 00000000..60be3494
--- /dev/null
+++ b/server/routes/api.routes.js
@@ -0,0 +1,27 @@
+import { Router } from 'express';
+import passport from 'passport';
+import * as ProjectController from '../controllers/project.controller';
+
+const router = new Router();
+
+router.get(
+  '/:username/sketches',
+  passport.authenticate('basic', { session: false }),
+  ProjectController.apiGetProjectsForUser
+);
+
+router.post(
+  '/:username/sketches',
+  passport.authenticate('basic', { session: false }),
+  ProjectController.apiCreateProject
+);
+
+// NOTE: Currently :username will not be checked for ownership
+//       only the project's owner in the database.
+router.delete(
+  '/:username/sketches/:project_id',
+  passport.authenticate('basic', { session: false }),
+  ProjectController.deleteProject
+);
+
+export default router;
diff --git a/server/routes/aws.routes.js b/server/routes/aws.routes.js
index 0bda0f8b..850bb190 100644
--- a/server/routes/aws.routes.js
+++ b/server/routes/aws.routes.js
@@ -6,7 +6,7 @@ const router = new Router();
 
 router.post('/S3/sign', isAuthenticated, AWSController.signS3);
 router.post('/S3/copy', isAuthenticated, AWSController.copyObjectInS3);
-router.delete('/S3/:object_key', isAuthenticated, AWSController.deleteObjectFromS3);
-router.get('/S3/objects', AWSController.listObjectsInS3ForUser);
+router.delete('/S3/:userId?/:objectKey', isAuthenticated, AWSController.deleteObjectFromS3);
+router.get('/S3/objects', AWSController.listObjectsInS3ForUserRequestHandler);
 
 export default router;
diff --git a/server/routes/collection.routes.js b/server/routes/collection.routes.js
new file mode 100644
index 00000000..d4f7ff9a
--- /dev/null
+++ b/server/routes/collection.routes.js
@@ -0,0 +1,20 @@
+import { Router } from 'express';
+import * as CollectionController from '../controllers/collection.controller';
+import isAuthenticated from '../utils/isAuthenticated';
+
+const router = new Router();
+
+// List collections
+router.get('/collections', isAuthenticated, CollectionController.listCollections);
+router.get('/:username/collections', CollectionController.listCollections);
+
+// Create, modify, delete collection
+router.post('/collections', isAuthenticated, CollectionController.createCollection);
+router.patch('/collections/:id', isAuthenticated, CollectionController.updateCollection);
+router.delete('/collections/:id', isAuthenticated, CollectionController.removeCollection);
+
+// Add and remove projects to collection
+router.post('/collections/:id/:projectId', isAuthenticated, CollectionController.addProjectToCollection);
+router.delete('/collections/:id/:projectId', isAuthenticated, CollectionController.removeProjectFromCollection);
+
+export default router;
diff --git a/server/routes/server.routes.js b/server/routes/server.routes.js
index adade10d..ddec0c22 100644
--- a/server/routes/server.routes.js
+++ b/server/routes/server.routes.js
@@ -3,6 +3,7 @@ import { renderIndex } from '../views/index';
 import { get404Sketch } from '../views/404Page';
 import { userExists } from '../controllers/user.controller';
 import { projectExists, projectForUserExists } from '../controllers/project.controller';
+import { collectionForUserExists } from '../controllers/collection.controller';
 
 const router = new Router();
 
@@ -26,12 +27,24 @@ router.get('/projects/:project_id', (req, res) => {
   ));
 });
 
+router.get('/:username/sketches/:project_id/add-to-collection', (req, res) => {
+  projectForUserExists(req.params.username, req.params.project_id, exists => (
+    exists ? res.send(renderIndex()) : get404Sketch(html => res.send(html))
+  ));
+});
+
 router.get('/:username/sketches/:project_id', (req, res) => {
   projectForUserExists(req.params.username, req.params.project_id, exists => (
     exists ? res.send(renderIndex()) : get404Sketch(html => res.send(html))
   ));
 });
 
+router.get('/:username/sketches', (req, res) => {
+  userExists(req.params.username, exists => (
+    exists ? res.send(renderIndex()) : get404Sketch(html => res.send(html))
+  ));
+});
+
 router.get('/:username/full/:project_id', (req, res) => {
   projectForUserExists(req.params.username, req.params.project_id, exists => (
     exists ? res.send(renderIndex()) : get404Sketch(html => res.send(html))
@@ -79,6 +92,16 @@ router.get('/assets', (req, res) => {
   }
 });
 
+router.get('/:username/assets', (req, res) => {
+  userExists(req.params.username, (exists) => {
+    const isLoggedInUser = req.user && req.user.username === req.params.username;
+    const canAccess = exists && isLoggedInUser;
+    return canAccess ?
+      res.send(renderIndex()) :
+      get404Sketch(html => res.send(html));
+  });
+});
+
 router.get('/account', (req, res) => {
   if (req.user) {
     res.send(renderIndex());
@@ -95,7 +118,29 @@ router.get('/feedback', (req, res) => {
   res.send(renderIndex());
 });
 
-router.get('/:username/sketches', (req, res) => {
+router.get('/:username/collections/create', (req, res) => {
+  userExists(req.params.username, (exists) => {
+    const isLoggedInUser = req.user && req.user.username === req.params.username;
+    const canAccess = exists && isLoggedInUser;
+    return canAccess ?
+      res.send(renderIndex()) :
+      get404Sketch(html => res.send(html));
+  });
+});
+
+router.get('/:username/collections/create', (req, res) => {
+  userExists(req.params.username, exists => (
+    exists ? res.send(renderIndex()) : get404Sketch(html => res.send(html))
+  ));
+});
+
+router.get('/:username/collections/:id', (req, res) => {
+  collectionForUserExists(req.params.username, req.params.id, exists => (
+    exists ? res.send(renderIndex()) : get404Sketch(html => res.send(html))
+  ));
+});
+
+router.get('/:username/collections', (req, res) => {
   userExists(req.params.username, exists => (
     exists ? res.send(renderIndex()) : get404Sketch(html => res.send(html))
   ));
diff --git a/server/routes/user.routes.js b/server/routes/user.routes.js
index 427e0705..3273025d 100644
--- a/server/routes/user.routes.js
+++ b/server/routes/user.routes.js
@@ -18,6 +18,10 @@ router.post('/reset-password/:token', UserController.updatePassword);
 
 router.put('/account', isAuthenticated, UserController.updateSettings);
 
+router.post('/account/api-keys', isAuthenticated, UserController.createApiKey);
+
+router.delete('/account/api-keys/:keyId', isAuthenticated, UserController.removeApiKey);
+
 router.post('/verify/send', UserController.emailVerificationInitiate);
 
 router.get('/verify', UserController.verifyEmail);
diff --git a/server/scripts/examples-ml5.js b/server/scripts/examples-ml5.js
index 84e0a32a..51e1fe5d 100644
--- a/server/scripts/examples-ml5.js
+++ b/server/scripts/examples-ml5.js
@@ -1,11 +1,7 @@
 import fs from 'fs';
 import rp from 'request-promise';
 import Q from 'q';
-import mongoose from 'mongoose';
-import objectID from 'bson-objectid';
-import shortid from 'shortid';
-import User from '../models/user';
-import Project from '../models/project';
+import { ok } from 'assert';
 
 // TODO: Change branchName if necessary
 const branchName = 'release';
@@ -14,11 +10,20 @@ const baseUrl = 'https://api.github.com/repos/ml5js/ml5-examples/contents';
 const clientId = process.env.GITHUB_ID;
 const clientSecret = process.env.GITHUB_SECRET;
 const editorUsername = process.env.ML5_EXAMPLES_USERNAME;
+const personalAccessToken = process.env.EDITOR_API_ACCESS_TOKEN;
+const editorApiUrl = process.env.EDITOR_API_URL;
 const headers = {
   'User-Agent': 'p5js-web-editor/0.0.1'
 };
 
-const requestOptions = {
+ok(clientId, 'GITHUB_ID is required');
+ok(clientSecret, 'GITHUB_SECRET is required');
+ok(editorUsername, 'ML5_EXAMPLES_USERNAME is required');
+ok(personalAccessToken, 'EDITOR_API_ACCESS_TOKEN is required');
+ok(editorApiUrl, 'EDITOR_API_URL is required');
+
+//
+const githubRequestOptions = {
   url: baseUrl,
   qs: {
     client_id: clientId,
@@ -29,13 +34,15 @@ const requestOptions = {
   json: true
 };
 
-const mongoConnectionString = process.env.MONGO_URL;
-mongoose.connect(mongoConnectionString, { useNewUrlParser: true, useUnifiedTopology: true });
-mongoose.set('useCreateIndex', true);
-mongoose.connection.on('error', () => {
-  console.error('MongoDB Connection Error. Please make sure that MongoDB is running.');
-  process.exit(1);
-});
+const editorRequestOptions = {
+  url: `${editorApiUrl}/${editorUsername}`,
+  method: 'GET',
+  headers: {
+    ...headers,
+    Authorization: `Basic ${Buffer.from(`${editorUsername}:${personalAccessToken}`).toString('base64')}`
+  },
+  json: true
+};
 
 /**
  * ---------------------------------------------------------
@@ -50,12 +57,52 @@ function flatten(list) {
   return list.reduce((a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), []);
 }
 
+/**
+ * Fetch data for a single HTML/JS file, or return
+ * an url to the file's CDN location
+ */
+async function fetchFileContent(item) {
+  const { name } = item;
+  const file = { url: item.url };
+
+  // if it is an html or js file
+  if (
+    (file.url != null && name.endsWith('.html')) ||
+    name.endsWith('.js')
+  ) {
+    const options = Object.assign({}, githubRequestOptions);
+    options.url = `${file.url}`;
+
+    if (
+      options.url !== undefined ||
+      options.url !== null ||
+      options.url !== ''
+    ) {
+      file.content = await rp(options);
+      // NOTE: remove the URL property if there's content
+      // Otherwise the p5 editor will try to pull from that url
+      if (file.content !== null) delete file.url;
+    }
+
+    return file;
+    // if it is NOT an html or js file
+  }
+
+  if (file.url) {
+    const cdnRef = `https://cdn.jsdelivr.net/gh/ml5js/ml5-examples@${branchName}${file.url.split(branchName)[1]}`;
+    file.url = cdnRef;
+  }
+
+  return file;
+}
+
+
 /**
  * STEP 1: Get the top level cateogories
  */
 async function getCategories() {
   try {
-    const options = Object.assign({}, requestOptions);
+    const options = Object.assign({}, githubRequestOptions);
     options.url = `${options.url}/p5js${branchRef}`;
     const results = await rp(options);
 
@@ -75,13 +122,18 @@ async function getCategoryExamples(sketchRootList) {
   const output = [];
   const sketchRootCategories = sketchRootList.map(async (categories) => {
     // let options = Object.assign({url: `${requestOptions.url}/${categories.path}${branchRef}`}, requestOptions)
-    const options = Object.assign({}, requestOptions);
+    const options = Object.assign({}, githubRequestOptions);
     options.url = `${options.url}${categories.path}${branchRef}`;
     // console.log(options)
     const sketchDirs = await rp(options);
-    const result = flatten(sketchDirs);
 
-    return result;
+    try {
+      const result = flatten(sketchDirs);
+
+      return result;
+    } catch (err) {
+      return [];
+    }
   });
 
   const sketchList = await Q.all(sketchRootCategories);
@@ -106,7 +158,7 @@ async function traverseSketchTree(parentObject) {
     return output;
   }
   // let options = `https://api.github.com/repos/ml5js/ml5-examples/contents/${sketches.path}${branchRef}`
-  const options = Object.assign({}, requestOptions);
+  const options = Object.assign({}, githubRequestOptions);
   options.url = `${options.url}${parentObject.path}${branchRef}`;
 
   output.tree = await rp(options);
@@ -123,7 +175,6 @@ async function traverseSketchTree(parentObject) {
  * @param {*} categoryExamples - all of the categories in an array
  */
 async function traverseSketchTreeAll(categoryExamples) {
-  // const sketches = categoryExamples.map(async sketch => await traverseSketchTree(sketch));
   const sketches = categoryExamples.map(async sketch => traverseSketchTree(sketch));
 
   const result = await Q.all(sketches);
@@ -138,37 +189,24 @@ function traverseAndFormat(parentObject) {
   const parent = Object.assign({}, parentObject);
 
   if (!parentObject.tree) {
-    const newid = objectID().toHexString();
     // returns the files
     return {
       name: parent.name,
-      url: parent.download_url,
-      content: null,
-      id: newid,
-      _id: newid,
-      fileType: 'file'
+      url: parent.download_url
     };
   }
 
   const subdir = parentObject.tree.map((item) => {
-    const newid = objectID().toHexString();
     if (!item.tree) {
       // returns the files
       return {
         name: item.name,
-        url: item.download_url,
-        content: null,
-        id: newid,
-        _id: newid,
-        fileType: 'file'
+        url: item.download_url
       };
     }
 
     const feat = {
       name: item.name,
-      id: newid,
-      _id: newid,
-      fileType: 'folder',
       children: traverseAndFormat(item)
     };
     return feat;
@@ -177,69 +215,27 @@ function traverseAndFormat(parentObject) {
 }
 
 /**
- * Traverse the tree and flatten for project.files[]
+ * Traverse the tree and download all the content,
+ * transforming into an object keyed by file/directory name
  * @param {*} projectFileTree
  */
-function traverseAndFlatten(projectFileTree) {
-  const r = objectID().toHexString();
+async function traverseAndDownload(projectFileTree) {
+  return projectFileTree.reduce(
+    async (previousPromise, item, idx) => {
+      const result = await previousPromise;
 
-  const projectRoot = {
-    name: 'root',
-    id: r,
-    _id: r,
-    children: [],
-    fileType: 'folder'
-  };
-
-  let currentParent;
-
-  const output = projectFileTree.reduce(
-    (result, item, idx) => {
-      if (idx < projectFileTree.length) {
-        projectRoot.children.push(item.id);
-      }
-
-      if (item.fileType === 'file') {
-        if (item.name === 'sketch.js') {
-          item.isSelectedFile = true;
-        }
-        result.push(item);
-      }
-
-      // here's where the magic happens *twinkles*
-      if (item.fileType === 'folder') {
-        // recursively go down the tree of children
-        currentParent = traverseAndFlatten(item.children);
-        // the above will return an array of the children files
-        // concatenate that with the results
-        result = result.concat(currentParent); // eslint-disable-line no-param-reassign
-        // since we want to get the children ids,
-        // we can map the child ids to the current item
-        // then push that to our result array to get
-        // our flat files array.
-        item.children = item.children.map(child => child.id);
-        result.push(item);
+      if (Array.isArray(item.children)) {
+        result[item.name] = {
+          files: await traverseAndDownload(item.children)
+        };
+      } else {
+        result[item.name] = await fetchFileContent(item);
       }
 
       return result;
     },
-    [projectRoot]
+    {}
   );
-
-  // Kind of hacky way to remove all roots other than the starting one
-  let counter = 0;
-  output.forEach((item, idx) => {
-    if (item.name === 'root') {
-      if (counter === 0) {
-        counter += 1;
-      } else {
-        output.splice(idx, 1);
-        counter += 1;
-      }
-    }
-  });
-
-  return output;
 }
 
 /**
@@ -248,16 +244,14 @@ function traverseAndFlatten(projectFileTree) {
  * @param {*} sketch
  * @param {*} user
  */
-function formatSketchForStorage(sketch, user) {
-  const newProject = new Project({
-    _id: shortid.generate(),
+async function formatSketchForStorage(sketch, user) {
+  const newProject = {
     name: sketch.name,
-    user: user._id,
-    files: [] // <== add files to this array as file objects and add _id reference to children of root
-  });
+    files: {} // <== add files to this object
+  };
 
   let projectFiles = traverseAndFormat(sketch);
-  projectFiles = traverseAndFlatten(projectFiles);
+  projectFiles = await traverseAndDownload(projectFiles);
   newProject.files = projectFiles;
   return newProject;
 }
@@ -270,68 +264,50 @@ function formatSketchForStorageAll(sketchWithItems, user) {
 
   sketchList = sketchList.map(sketch => formatSketchForStorage(sketch, user));
 
-  return sketchList;
+  return Promise.all(sketchList);
 }
 
 /**
- * Get all the content for the relevant files in project.files[]
- * @param {*} projectObject
+ * Fetch a list of all projects from the API
  */
-async function fetchSketchContent(projectObject) {
-  const output = Object.assign({}, JSON.parse(JSON.stringify(projectObject)));
+async function getProjectsList() {
+  const options = Object.assign({}, editorRequestOptions);
+  options.url = `${options.url}/sketches`;
 
-  const newFiles = output.files.map(async (item, i) => {
-    // if it is an html or js file
-    if (
-      (item.fileType === 'file' && item.name.endsWith('.html')) ||
-      item.name.endsWith('.js')
-    ) {
-      const options = Object.assign({}, requestOptions);
-      options.url = `${item.url}`;
+  const results = await rp(options);
 
-      if (
-        options.url !== undefined ||
-        options.url !== null ||
-        options.url !== ''
-      ) {
-        item.content = await rp(options);
-        // NOTE: remove the URL property if there's content
-        // Otherwise the p5 editor will try to pull from that url
-        if (item.content !== null) delete item.url;
-      }
-
-      return item;
-      // if it is NOT an html or js file
-    }
-
-    if (item.url) {
-      const cdnRef = `https://cdn.jsdelivr.net/gh/ml5js/ml5-examples@${branchName}${
-        item.url.split(branchName)[1]
-      }`;
-      item.content = cdnRef;
-      item.url = cdnRef;
-    }
-
-    return item;
-  });
-
-  output.files = await Q.all(newFiles);
-  return output;
+  return results.sketches;
 }
 
 /**
- * STEP 5
- * Get all the content for the relevant files in project.files[] for all sketches
- * @param {*} formattedSketchList
+ * Delete a project
  */
-async function fetchSketchContentAll(formattedSketchList) {
-  let output = formattedSketchList.slice(0);
+async function deleteProject(project) {
+  const options = Object.assign({}, editorRequestOptions);
+  options.method = 'DELETE';
+  options.url = `${options.url}/sketches/${project.id}`;
 
-  output = output.map(async item => fetchSketchContent(item));
+  const results = await rp(options);
 
-  output = await Q.all(output);
+  return results;
+}
 
-  return output;
+/**
+ * Create a new project
+ */
+async function createProject(project) {
+  try {
+    const options = Object.assign({}, editorRequestOptions);
+    options.method = 'POST';
+    options.url = `${options.url}/sketches`;
+    options.body = project;
+
+    const results = await rp(options);
+
+    return results;
+  } catch (err) {
+    throw err;
+  }
 }
 
 /**
@@ -341,43 +317,34 @@ async function fetchSketchContentAll(formattedSketchList) {
  * @param {*} user
  */
 async function createProjectsInP5User(filledProjectList, user) {
-  const userProjects = await Project.find({ user: user._id });
-  const removeProjects = userProjects.map(async project => Project.remove({ _id: project._id }));
-  await Q.all(removeProjects);
-  console.log('deleted old projects!');
+  console.log('Finding existing projects...');
 
-  const newProjects = filledProjectList.map(async (project) => {
-    const item = new Project(project);
-    console.log(`saving ${project.name}`);
-    await item.save();
-  });
-  await Q.all(newProjects);
-  console.log(`Projects saved to User: ${editorUsername}!`);
-}
+  const existingProjects = await getProjectsList();
 
-/**
- * STEP 0
- * CHECK if user exists, ifnot create one
- *
- */
-async function checkP5User() {
-  const user = await User.findOne({ username: editorUsername });
+  console.log(`Will delete ${existingProjects.length} projects`);
 
-  if (!user) {
-    const ml5user = new User({
-      username: editorUsername,
-      email: process.env.ML5_EXAMPLES_EMAIL,
-      password: process.env.ML5_EXAMPLES_PASS
-    });
-
-    await ml5user.save((saveErr) => {
-      if (saveErr) throw saveErr;
-      console.log(`Created a user p5${ml5user}`);
+  try {
+    await Q.all(existingProjects.map(deleteProject));
+    console.log('deleted old projects!');
+  } catch (error) {
+    console.log('Problem deleting projects');
+    console.log(error);
+    process.exit(1);
+  }
+
+  try {
+    const newProjects = filledProjectList.map(async (project) => {
+      console.log(`saving ${project.name}`);
+      await createProject(project);
     });
+    await Q.all(newProjects);
+    console.log(`Projects saved to User: ${editorUsername}!`);
+  } catch (error) {
+    console.log('Error saving projects');
+    console.log(error);
   }
 }
 
-
 /**
  * ---------------------------------------------------------
  * --------------------- main ------------------------------
@@ -393,18 +360,14 @@ async function checkP5User() {
  * Delete existing and save
  */
 async function make() {
-  await checkP5User();
-  // Get the user
-  const user = await User.findOne({
-    username: editorUsername
-  });
   // Get the categories and their examples
   const categories = await getCategories();
   const categoryExamples = await getCategoryExamples(categories);
+
   const examplesWithResourceTree = await traverseSketchTreeAll(categoryExamples);
-  const formattedSketchList = formatSketchForStorageAll(examplesWithResourceTree, user);
-  const filledProjectList = await fetchSketchContentAll(formattedSketchList);
-  await createProjectsInP5User(filledProjectList, user);
+  const formattedSketchList = await formatSketchForStorageAll(examplesWithResourceTree);
+
+  await createProjectsInP5User(formattedSketchList);
   console.log('done!');
   process.exit();
 }
@@ -417,20 +380,14 @@ async function make() {
  * Format the sketch files to be save to the db
  * Delete existing and save
  */
+// eslint-disable-next-line no-unused-vars
 async function test() {
-  await checkP5User();
-  // Get the user
-  const user = await User.findOne({
-    username: editorUsername
-  });
-
   // read from file while testing
   const examplesWithResourceTree = JSON.parse(fs.readFileSync('./ml5-examplesWithResourceTree.json'));
 
-  const formattedSketchList = formatSketchForStorageAll(examplesWithResourceTree, user);
+  const formattedSketchList = await formatSketchForStorageAll(examplesWithResourceTree);
 
-  const filledProjectList = await fetchSketchContentAll(formattedSketchList);
-  await createProjectsInP5User(filledProjectList, user);
+  await createProjectsInP5User(formattedSketchList);
   console.log('done!');
   process.exit();
 }
diff --git a/server/server.js b/server/server.js
index ee0f21b2..1ced332f 100644
--- a/server/server.js
+++ b/server/server.js
@@ -16,10 +16,12 @@ import webpackHotMiddleware from 'webpack-hot-middleware';
 import config from '../webpack/config.dev';
 
 // Import all required modules
+import api from './routes/api.routes';
 import users from './routes/user.routes';
 import sessions from './routes/session.routes';
 import projects from './routes/project.routes';
 import files from './routes/file.routes';
+import collections from './routes/collection.routes';
 import aws from './routes/aws.routes';
 import serverRoutes from './routes/server.routes';
 import embedRoutes from './routes/embed.routes';
@@ -95,16 +97,28 @@ app.use(session({
 
 app.use(passport.initialize());
 app.use(passport.session());
-app.use('/api', requestsOfTypeJSON(), users);
-app.use('/api', requestsOfTypeJSON(), sessions);
-app.use('/api', requestsOfTypeJSON(), files);
-app.use('/api', requestsOfTypeJSON(), projects);
-app.use('/api', requestsOfTypeJSON(), aws);
-app.use(assetRoutes);
+app.use('/api/v1', requestsOfTypeJSON(), api);
+app.use('/editor', requestsOfTypeJSON(), users);
+app.use('/editor', requestsOfTypeJSON(), sessions);
+app.use('/editor', requestsOfTypeJSON(), files);
+app.use('/editor', requestsOfTypeJSON(), projects);
+app.use('/editor', requestsOfTypeJSON(), aws);
+app.use('/editor', requestsOfTypeJSON(), collections);
+
+// This is a temporary way to test access via Personal Access Tokens
+// Sending a valid username:<personal-access-token> combination will
+// return the user's information.
+app.get(
+  '/api/v1/auth/access-check',
+  passport.authenticate('basic', { session: false }), (req, res) => res.json(req.user)
+);
+
 // this is supposed to be TEMPORARY -- until i figure out
 // isomorphic rendering
 app.use('/', serverRoutes);
 
+app.use(assetRoutes);
+
 app.use('/', embedRoutes);
 app.get('/auth/github', passport.authenticate('github'));
 app.get('/auth/github/callback', passport.authenticate('github', { failureRedirect: '/login' }), (req, res) => {
diff --git a/server/utils/__mocks__/createId.js b/server/utils/__mocks__/createId.js
new file mode 100644
index 00000000..919ea252
--- /dev/null
+++ b/server/utils/__mocks__/createId.js
@@ -0,0 +1,16 @@
+/**
+ * Creates an increasing numeric ID
+ * for testing
+ */
+let nextId = 0;
+
+export default function mockCreateId() {
+  const id = nextId;
+  nextId += 1;
+
+  return String(id);
+}
+
+export function resetMockCreateId() {
+  nextId = 0;
+}
diff --git a/server/utils/createApplicationErrorClass.js b/server/utils/createApplicationErrorClass.js
new file mode 100644
index 00000000..f949866c
--- /dev/null
+++ b/server/utils/createApplicationErrorClass.js
@@ -0,0 +1,33 @@
+/**
+ * This is the base class for custom errors in
+ * the application.
+ */
+export class ApplicationError extends Error {
+  constructor(message, extra = {}) {
+    super();
+    if (Error.captureStackTrace) {
+      Error.captureStackTrace(this, this.constructor);
+    }
+    this.name = 'ApplicationError';
+    this.message = message;
+    this.code = extra.code;
+  }
+}
+
+/**
+ * Create a new custom error class e.g.
+ *   const UserNotFoundError = createApplicationErrorClass('UserNotFoundError');
+ *
+ * // Later
+ *  throw new UserNotFoundError(`user ${user.name} not found`);
+ *
+ */
+export default function createApplicationErrorClass(name) {
+  return class extends ApplicationError {
+    constructor(...params) {
+      super(...params);
+
+      this.name = name;
+    }
+  };
+}
diff --git a/server/utils/createId.js b/server/utils/createId.js
new file mode 100644
index 00000000..65b8290f
--- /dev/null
+++ b/server/utils/createId.js
@@ -0,0 +1,8 @@
+import objectID from 'bson-objectid';
+
+/**
+ * Creates a mongo ID
+ */
+export default function createId() {
+  return objectID().toHexString();
+}
diff --git a/server/utils/filePath.js b/server/utils/filePath.js
index 027b0e13..4e12a82c 100644
--- a/server/utils/filePath.js
+++ b/server/utils/filePath.js
@@ -1,4 +1,8 @@
 export function resolvePathToFile(filePath, files) {
+  if (filePath === undefined) {
+    return false;
+  }
+
   const filePathArray = filePath.split('/');
   let resolvedFile;
   let currentFile = files.find(file => file.name === 'root');
diff --git a/server/views/index.js b/server/views/index.js
index ced45615..52b98985 100644
--- a/server/views/index.js
+++ b/server/views/index.js
@@ -29,6 +29,9 @@ export function renderIndex() {
         window.process.env.CLIENT = true;
         window.process.env.LOGIN_ENABLED = ${process.env.LOGIN_ENABLED === 'false' ? false : true};
         window.process.env.EXAMPLES_ENABLED = ${process.env.EXAMPLES_ENABLED === 'false' ? false : true};
+        window.process.env.UI_ACCESS_TOKEN_ENABLED = ${process.env.UI_ACCESS_TOKEN_ENABLED === 'false' ? false : true};
+        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};
       </script>
     </head>
     <body>
diff --git a/webpack/config.server.js b/webpack/config.server.js
index 1fe31512..227de90b 100644
--- a/webpack/config.server.js
+++ b/webpack/config.server.js
@@ -4,7 +4,7 @@ const nodeExternals = require('webpack-node-externals');
 
 module.exports = {
 
-  entry: path.resolve(__dirname, '../server/server.js'),
+  entry: ['@babel/polyfill', path.resolve(__dirname, '../server/server.js')],
 
   output: {
     path: path.resolve(__dirname, '../dist/'),