diff --git a/client/components/Nav.js b/client/components/Nav.js
index ddccbc1a..a9b015df 100644
--- a/client/components/Nav.js
+++ b/client/components/Nav.js
@@ -6,20 +6,20 @@ function Nav(props) {
     <nav className="nav">
       <ul className="nav__items-left">
         <li className="nav__item">
-          <p
+          <a
             className="nav__new"
             onClick={props.createProject}
           >
             New
-          </p>
+          </a>
         </li>
         <li className="nav__item">
-          <p
+          <a
             className="nav__save"
             onClick={props.saveProject}
           >
             Save
-          </p>
+          </a>
         </li>
         <li className="nav__item">
           <p className="nav__open">
@@ -28,6 +28,16 @@ function Nav(props) {
             </Link>
           </p>
         </li>
+        <li className="nav__item">
+          <a className="nav__export" onClick={props.exportProjectAsZip}>
+            Export (zip)
+          </a>
+        </li>
+        <li className="nav__item" onClick={props.cloneProject}>
+          <a className="nav__clone">
+            Clone
+          </a>
+        </li>
       </ul>
       <ul className="nav__items-right">
         <li className="nav__item">
@@ -42,6 +52,8 @@ function Nav(props) {
 Nav.propTypes = {
   createProject: PropTypes.func.isRequired,
   saveProject: PropTypes.func.isRequired,
+  exportProjectAsZip: PropTypes.func.isRequired,
+  cloneProject: PropTypes.func.isRequired,
   user: PropTypes.shape({
     authenticated: PropTypes.bool.isRequired,
     username: PropTypes.string
diff --git a/client/constants.js b/client/constants.js
index f6256cad..5a5ec9f5 100644
--- a/client/constants.js
+++ b/client/constants.js
@@ -30,6 +30,12 @@ export const SET_PROJECT = 'SET_PROJECT';
 export const SET_PROJECTS = 'SET_PROJECTS';
 
 export const SET_SELECTED_FILE = 'SET_SELECTED_FILE';
+export const SHOW_MODAL = 'SHOW_MODAL';
+export const HIDE_MODAL = 'HIDE_MODAL';
+export const CREATE_FILE = 'CREATE_FILE';
+
+export const EXPAND_SIDEBAR = 'EXPAND_SIDEBAR';
+export const COLLAPSE_SIDEBAR = 'COLLAPSE_SIDEBAR';
 
 export const CONSOLE_EVENT = 'CONSOLE_EVENT';
 
diff --git a/client/images/left-arrow.svg b/client/images/left-arrow.svg
new file mode 100644
index 00000000..22f17dcb
--- /dev/null
+++ b/client/images/left-arrow.svg
@@ -0,0 +1,12 @@
+<?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">
+        <g id="p5js-IDE-styles-foundation-pt-2" transform="translate(-529.000000, -1165.000000)" fill="#333333">
+            <polygon id="arrow-shape-copy" transform="translate(534.000000, 1172.198314) rotate(-90.000000) translate(-534.000000, -1172.198314) " points="535.4 1169.39663 541 1174.99663 539.6 1176.39663 534 1170.79663 528.4 1176.39663 527 1174.99663 532.6 1169.39663 533.996628 1168"></polygon>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/client/images/plus-icon.svg b/client/images/plus-icon.svg
new file mode 100644
index 00000000..0b9347f2
--- /dev/null
+++ b/client/images/plus-icon.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
+    <title>close shape</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="IDEs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.539999962">
+        <g id="p5js-IDE-styles-foundation-pt-2" transform="translate(-558.000000, -1166.000000)" fill="#333333">
+            <g id="Icons" transform="translate(16.000000, 1063.000000)">
+                <g id="close-copy-3" transform="translate(499.500000, 110.000000) scale(1, -1) translate(-499.500000, -110.000000) translate(438.000000, 98.000000)">
+                    <polygon id="close-shape" transform="translate(113.000000, 10.000000) rotate(45.000000) translate(-113.000000, -10.000000) " points="120 15.6 118.6 17 113 11.4 107.4 17 106 15.6 111.6 10 106 4.4 107.4 3 113 8.6 118.6 3 120 4.4 114.4 10"></polygon>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/client/images/right-arrow.svg b/client/images/right-arrow.svg
new file mode 100644
index 00000000..6d62c369
--- /dev/null
+++ b/client/images/right-arrow.svg
@@ -0,0 +1,12 @@
+<?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">
+        <g id="p5js-IDE-styles-foundation-pt-2" transform="translate(-496.000000, -1165.000000)" fill="#333333">
+            <polygon id="arrow-shape-copy" transform="translate(501.000000, 1172.198314) rotate(90.000000) translate(-501.000000, -1172.198314) " points="502.4 1169.39663 508 1174.99663 506.6 1176.39663 501 1170.79663 495.4 1176.39663 494 1174.99663 499.6 1169.39663 500.996628 1168"></polygon>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/client/modules/IDE/actions/files.js b/client/modules/IDE/actions/files.js
index f7ebd8f3..1eead2ae 100644
--- a/client/modules/IDE/actions/files.js
+++ b/client/modules/IDE/actions/files.js
@@ -1,4 +1,7 @@
 import * as ActionTypes from '../../../constants';
+import axios from 'axios';
+
+const ROOT_URL = location.href.indexOf('localhost') > 0 ? 'http://localhost:8000/api' : '/api';
 
 export function updateFileContent(name, content) {
   return {
@@ -7,3 +10,41 @@ export function updateFileContent(name, content) {
     content
   };
 }
+
+// TODO make req to server
+export function createFile(formProps) {
+  return (dispatch, getState) => {
+    const state = getState();
+    if (state.project.id) {
+      const postParams = {
+        name: formProps.name
+      };
+      axios.post(`${ROOT_URL}/projects/${state.project.id}/files`, postParams, { withCredentials: true })
+        .then(response => {
+          dispatch({
+            type: ActionTypes.CREATE_FILE,
+            ...response.data
+          });
+        })
+        .catch(response => dispatch({
+          type: ActionTypes.ERROR,
+          error: response.data
+        }));
+    } else {
+      let maxFileId = 0;
+      state.files.forEach(file => {
+        if (parseInt(file.id, 10) > maxFileId) {
+          maxFileId = parseInt(file.id, 10);
+        }
+      });
+      dispatch({
+        type: ActionTypes.CREATE_FILE,
+        name: formProps.name,
+        id: `${maxFileId + 1}`
+      });
+      dispatch({
+        type: ActionTypes.HIDE_MODAL
+      });
+    }
+  };
+}
diff --git a/client/modules/IDE/actions/ide.js b/client/modules/IDE/actions/ide.js
index eec73884..4d01d50b 100644
--- a/client/modules/IDE/actions/ide.js
+++ b/client/modules/IDE/actions/ide.js
@@ -31,3 +31,27 @@ export function dispatchConsoleEvent(...args) {
     event: args[0].data
   };
 }
+
+export function newFile() {
+  return {
+    type: ActionTypes.SHOW_MODAL
+  };
+}
+
+export function closeNewFileModal() {
+  return {
+    type: ActionTypes.HIDE_MODAL
+  };
+}
+
+export function expandSidebar() {
+  return {
+    type: ActionTypes.EXPAND_SIDEBAR
+  };
+}
+
+export function collapseSidebar() {
+  return {
+    type: ActionTypes.COLLAPSE_SIDEBAR
+  };
+}
diff --git a/client/modules/IDE/actions/project.js b/client/modules/IDE/actions/project.js
index 8f820c30..804963b8 100644
--- a/client/modules/IDE/actions/project.js
+++ b/client/modules/IDE/actions/project.js
@@ -1,6 +1,8 @@
 import * as ActionTypes from '../../../constants';
 import { browserHistory } from 'react-router';
 import axios from 'axios';
+import JSZip from 'jszip';
+import { saveAs } from 'file-saver';
 
 const ROOT_URL = location.href.indexOf('localhost') > 0 ? 'http://localhost:8000/api' : '/api';
 
@@ -8,12 +10,14 @@ export function getProject(id) {
   return (dispatch) => {
     axios.get(`${ROOT_URL}/projects/${id}`, { withCredentials: true })
       .then(response => {
+        console.log(response.data);
         browserHistory.push(`/projects/${id}`);
         dispatch({
           type: ActionTypes.SET_PROJECT,
           project: response.data,
           files: response.data.files,
-          selectedFile: response.data.selectedFile
+          selectedFile: response.data.selectedFile,
+          owner: response.data.user
         });
       })
       .catch(response => dispatch({
@@ -61,6 +65,7 @@ export function saveProject() {
             type: ActionTypes.NEW_PROJECT,
             name: response.data.name,
             id: response.data.id,
+            owner: response.data.user,
             selectedFile: response.data.selectedFile,
             files: response.data.files
           });
@@ -83,6 +88,7 @@ export function createProject() {
           type: ActionTypes.NEW_PROJECT,
           name: response.data.name,
           id: response.data.id,
+          owner: response.data.user,
           selectedFile: response.data.selectedFile,
           files: response.data.files
         });
@@ -93,3 +99,42 @@ export function createProject() {
       }));
   };
 }
+
+export function exportProjectAsZip() {
+  return (dispatch, getState) => {
+    console.log('exporting project!');
+    const state = getState();
+    const zip = new JSZip();
+    state.files.forEach(file => {
+      zip.file(file.name, file.content);
+    });
+
+    zip.generateAsync({ type: 'blob' }).then((content) => {
+      saveAs(content, `${state.project.name}.zip`);
+    });
+  };
+}
+
+export function cloneProject() {
+  return (dispatch, getState) => {
+    const state = getState();
+    const formParams = Object.assign({}, { name: state.project.name }, { files: state.files });
+    axios.post(`${ROOT_URL}/projects`, formParams, { withCredentials: true })
+      .then(response => {
+        browserHistory.push(`/projects/${response.data.id}`);
+        dispatch({
+          type: ActionTypes.NEW_PROJECT,
+          name: response.data.name,
+          id: response.data.id,
+          owner: response.data.user,
+          selectedFile: response.data.selectedFile,
+          files: response.data.files
+        });
+      })
+      .catch(response => dispatch({
+        type: ActionTypes.PROJECT_SAVE_FAIL,
+        error: response.data
+      }));
+  };
+}
+
diff --git a/client/modules/IDE/components/Editor.js b/client/modules/IDE/components/Editor.js
index fa4fe305..1e79bd21 100644
--- a/client/modules/IDE/components/Editor.js
+++ b/client/modules/IDE/components/Editor.js
@@ -1,7 +1,21 @@
 import React, { PropTypes } from 'react';
 import CodeMirror from 'codemirror';
 import 'codemirror/mode/javascript/javascript';
+import 'codemirror/mode/css/css';
+import 'codemirror/mode/htmlmixed/htmlmixed';
 import 'codemirror/addon/selection/active-line';
+import 'codemirror/addon/lint/lint';
+import 'codemirror/addon/lint/javascript-lint';
+import 'codemirror/addon/lint/css-lint';
+import 'codemirror/addon/lint/html-lint';
+import { JSHINT } from 'jshint';
+window.JSHINT = JSHINT;
+import { CSSLint } from 'csslint';
+window.CSSLint = CSSLint;
+import { HTMLHint } from 'htmlhint';
+window.HTMLHint = HTMLHint;
+
+import { debounce } from 'throttle-debounce';
 
 class Editor extends React.Component {
 
@@ -11,12 +25,19 @@ class Editor extends React.Component {
       value: this.props.file.content,
       lineNumbers: true,
       styleActiveLine: true,
-      mode: 'javascript'
+      mode: 'javascript',
+      lineWrapping: true,
+      gutters: ['CodeMirror-lint-markers'],
+      lint: true
     });
-    this._cm.on('change', () => { // eslint-disable-line
-      // this.props.updateFileContent('sketch.js', this._cm.getValue());
+    this._cm.on('change', debounce(200, () => {
       this.props.updateFileContent(this.props.file.name, this._cm.getValue());
-    });
+    }));
+    // this._cm.on('change', () => { // eslint-disable-line
+    //   // this.props.updateFileContent('sketch.js', this._cm.getValue());
+    //   throttle(1000, () => console.log('debounce is working!'));
+    //   this.props.updateFileContent(this.props.file.name, this._cm.getValue());
+    // });
     this._cm.getWrapperElement().style['font-size'] = `${this.props.fontSize}px`;
     this._cm.setOption('indentWithTabs', this.props.isTabIndent);
     this._cm.setOption('tabSize', this.props.indentationAmount);
@@ -36,6 +57,15 @@ class Editor extends React.Component {
     if (this.props.isTabIndent !== prevProps.isTabIndent) {
       this._cm.setOption('indentWithTabs', this.props.isTabIndent);
     }
+    if (this.props.file.name !== prevProps.name) {
+      if (this.props.file.name.match(/.+\.js$/)) {
+        this._cm.setOption('mode', 'javascript');
+      } else if (this.props.file.name.match(/.+\.css$/)) {
+        this._cm.setOption('mode', 'css');
+      } else if (this.props.file.name.match(/.+\.html$/)) {
+        this._cm.setOption('mode', 'htmlmixed');
+      }
+    }
   }
 
   componentWillUnmount() {
diff --git a/client/modules/IDE/components/NewFileForm.js b/client/modules/IDE/components/NewFileForm.js
new file mode 100644
index 00000000..c46ca9e5
--- /dev/null
+++ b/client/modules/IDE/components/NewFileForm.js
@@ -0,0 +1,28 @@
+import React, { PropTypes } from 'react';
+
+function NewFileForm(props) {
+  const { fields: { name }, handleSubmit } = props;
+  return (
+    <form className="new-file-form" onSubmit={handleSubmit(props.createFile.bind(this))}>
+      <label className="new-file-form__name-label" htmlFor="name">Name:</label>
+      <input
+        className="new-file-form__name-input"
+        id="name"
+        type="text"
+        placeholder="Name"
+        {...name}
+      />
+      <input type="submit" value="Add File" />
+    </form>
+  );
+}
+
+NewFileForm.propTypes = {
+  fields: PropTypes.shape({
+    name: PropTypes.string.isRequired
+  }).isRequired,
+  handleSubmit: PropTypes.func.isRequired,
+  createFile: PropTypes.func.isRequired
+};
+
+export default NewFileForm;
diff --git a/client/modules/IDE/components/NewFileModal.js b/client/modules/IDE/components/NewFileModal.js
new file mode 100644
index 00000000..f24ae645
--- /dev/null
+++ b/client/modules/IDE/components/NewFileModal.js
@@ -0,0 +1,66 @@
+import React, { PropTypes } from 'react';
+import { bindActionCreators } from 'redux';
+import { reduxForm } from 'redux-form';
+import NewFileForm from './NewFileForm';
+import * as FileActions from '../actions/files';
+import classNames from 'classnames';
+import InlineSVG from 'react-inlinesvg';
+const exitUrl = require('../../../images/exit.svg');
+
+// At some point this will probably be generalized to a generic modal
+// in which you can insert different content
+// but for now, let's just make this work
+function NewFileModal(props) {
+  const modalClass = classNames({
+    modal: true,
+    'modal--hidden': !props.isVisible
+  });
+
+  return (
+    <section className={modalClass}>
+      <div className="modal-content">
+        <div className="modal__header">
+          <h2 className="modal__title">Add File</h2>
+          <button className="modal__exit-button" onClick={props.closeModal}>
+            <InlineSVG src={exitUrl} alt="Close New File Modal" />
+          </button>
+        </div>
+        <NewFileForm {...props} />
+      </div>
+    </section>
+  );
+}
+
+NewFileModal.propTypes = {
+  isVisible: PropTypes.bool.isRequired,
+  closeModal: PropTypes.func.isRequired
+};
+
+function mapStateToProps(state) {
+  return {
+    file: state.files
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return bindActionCreators(FileActions, dispatch);
+}
+
+function validate(formProps) {
+  const errors = {};
+
+  if (!formProps.name) {
+    errors.name = 'Please enter a name';
+  } else if (!formProps.name.match(/(.+\.js$|.+\.css$)/)) {
+    errors.name = 'File must be of type JavaScript or CSS.';
+  }
+
+  return errors;
+}
+
+
+export default reduxForm({
+  form: 'new-file',
+  fields: ['name'],
+  validate
+}, mapStateToProps, mapDispatchToProps)(NewFileModal);
diff --git a/client/modules/IDE/components/Sidebar.js b/client/modules/IDE/components/Sidebar.js
index cd75d0a7..f1ccf179 100644
--- a/client/modules/IDE/components/Sidebar.js
+++ b/client/modules/IDE/components/Sidebar.js
@@ -1,9 +1,40 @@
 import React, { PropTypes } from 'react';
 import classNames from 'classnames';
+import InlineSVG from 'react-inlinesvg';
+const rightArrowUrl = require('../../../images/right-arrow.svg');
+const leftArrowUrl = require('../../../images/left-arrow.svg');
 
 function Sidebar(props) {
+  const sidebarClass = classNames({
+    sidebar: true,
+    'sidebar--contracted': !props.isExpanded
+  });
+
   return (
-    <section className="sidebar">
+    <section className={sidebarClass}>
+      <div className="sidebar__header">
+        <h3 className="sidebar__title">Sketch Files</h3>
+        <div className="sidebar__icons">
+          <a
+            className="sidebar__add"
+            onClick={props.newFile}
+          >
+            +
+          </a>
+          <a
+            className="sidebar__contract"
+            onClick={props.collapseSidebar}
+          >
+            <InlineSVG src={leftArrowUrl} />
+          </a>
+          <a
+            className="sidebar__expand"
+            onClick={props.expandSidebar}
+          >
+            <InlineSVG src={rightArrowUrl} />
+          </a>
+        </div>
+      </div>
       <ul className="sidebar__file-list">
         {props.files.map(file => {
           let itemClass = classNames({
@@ -14,8 +45,11 @@ function Sidebar(props) {
             <li
               className={itemClass}
               key={file.id}
-              onClick={() => props.setSelectedFile(file.id)}
-            >{file.name}</li>
+            >
+              <a
+                onClick={() => props.setSelectedFile(file.id)}
+              >{file.name}</a>
+            </li>
           );
         })}
       </ul>
diff --git a/client/modules/IDE/components/Toolbar.js b/client/modules/IDE/components/Toolbar.js
index f1a233b6..4d3d00bd 100644
--- a/client/modules/IDE/components/Toolbar.js
+++ b/client/modules/IDE/components/Toolbar.js
@@ -34,12 +34,19 @@ function Toolbar(props) {
         <span
           className="toolbar__project-name"
           // TODO change this span into an input
-          onBlur={props.setProjectName.bind(this)} // eslint-disable-line 
+          onBlur={props.setProjectName.bind(this)} // eslint-disable-line
           contentEditable
           suppressContentEditableWarning
         >
           {props.projectName}
         </span>
+        {(() => { // eslint-disable-line
+          if (props.owner) {
+            return (
+              <p className="toolbar__project-owner">by <span>{props.owner.username}</span></p>
+            );
+          }
+        })()}
       </div>
       <button className={preferencesButtonClass} onClick={props.openPreferences}>
         <Isvg src={preferencesUrl} alt="Show Preferences" />
@@ -55,7 +62,10 @@ Toolbar.propTypes = {
   stopSketch: PropTypes.func.isRequired,
   setProjectName: PropTypes.func.isRequired,
   projectName: PropTypes.string.isRequired,
-  openPreferences: PropTypes.func.isRequired
+  openPreferences: PropTypes.func.isRequired,
+  owner: PropTypes.shape({
+    username: PropTypes.string
+  })
 };
 
 export default Toolbar;
diff --git a/client/modules/IDE/pages/IDEView.js b/client/modules/IDE/pages/IDEView.js
index 62f5956e..78785e6d 100644
--- a/client/modules/IDE/pages/IDEView.js
+++ b/client/modules/IDE/pages/IDEView.js
@@ -4,6 +4,7 @@ import Sidebar from '../components/Sidebar';
 import PreviewFrame from '../components/PreviewFrame';
 import Toolbar from '../components/Toolbar';
 import Preferences from '../components/Preferences';
+import NewFileModal from '../components/NewFileModal';
 import Nav from '../../../components/Nav';
 import Console from '../components/Console';
 import { bindActionCreators } from 'redux';
@@ -29,6 +30,8 @@ class IDEView extends React.Component {
           user={this.props.user}
           createProject={this.props.createProject}
           saveProject={this.props.saveProject}
+          exportProjectAsZip={this.props.exportProjectAsZip}
+          cloneProject={this.props.cloneProject}
         />
         <Toolbar
           className="Toolbar"
@@ -39,6 +42,7 @@ class IDEView extends React.Component {
           setProjectName={this.props.setProjectName}
           openPreferences={this.props.openPreferences}
           isPreferencesVisible={this.props.preferences.isVisible}
+          owner={this.props.project.owner}
         />
         <Preferences
           isVisible={this.props.preferences.isVisible}
@@ -59,6 +63,10 @@ class IDEView extends React.Component {
           files={this.props.files}
           selectedFile={this.props.selectedFile}
           setSelectedFile={this.props.setSelectedFile}
+          newFile={this.props.newFile}
+          isExpanded={this.props.ide.sidebarIsExpanded}
+          expandSidebar={this.props.expandSidebar}
+          collapseSidebar={this.props.collapseSidebar}
         />
         <Editor
           file={this.props.selectedFile}
@@ -84,6 +92,10 @@ class IDEView extends React.Component {
           consoleEvent={this.props.ide.consoleEvent}
           isPlaying={this.props.ide.isPlaying}
         />
+        <NewFileModal
+          isVisible={this.props.ide.modalIsVisible}
+          closeModal={this.props.closeNewFileModal}
+        />
       </div>
 
     );
@@ -100,12 +112,17 @@ IDEView.propTypes = {
   saveProject: PropTypes.func.isRequired,
   ide: PropTypes.shape({
     isPlaying: PropTypes.bool.isRequired,
-    consoleEvent: PropTypes.object
+    consoleEvent: PropTypes.object,
+    modalIsVisible: PropTypes.bool.isRequired,
+    sidebarIsExpanded: PropTypes.bool.isRequired
   }).isRequired,
   startSketch: PropTypes.func.isRequired,
   stopSketch: PropTypes.func.isRequired,
   project: PropTypes.shape({
-    name: PropTypes.string.isRequired
+    name: PropTypes.string.isRequired,
+    owner: PropTypes.shape({
+      username: PropTypes.string
+    })
   }).isRequired,
   setProjectName: PropTypes.func.isRequired,
   openPreferences: PropTypes.func.isRequired,
@@ -134,7 +151,13 @@ IDEView.propTypes = {
   htmlFile: PropTypes.object.isRequired,
   jsFiles: PropTypes.array.isRequired,
   cssFiles: PropTypes.array.isRequired,
-  dispatchConsoleEvent: PropTypes.func.isRequired
+  dispatchConsoleEvent: PropTypes.func.isRequired,
+  newFile: PropTypes.func.isRequired,
+  closeNewFileModal: PropTypes.func.isRequired,
+  expandSidebar: PropTypes.func.isRequired,
+  collapseSidebar: PropTypes.func.isRequired,
+  exportProjectAsZip: PropTypes.func.isRequired,
+  cloneProject: PropTypes.func.isRequired
 };
 
 function mapStateToProps(state) {
diff --git a/client/modules/IDE/reducers/files.js b/client/modules/IDE/reducers/files.js
index db53dbc3..2b32bc04 100644
--- a/client/modules/IDE/reducers/files.js
+++ b/client/modules/IDE/reducers/files.js
@@ -64,6 +64,8 @@ const files = (state = initialState, action) => {
       return [...action.files];
     case ActionTypes.SET_PROJECT:
       return [...action.files];
+    case ActionTypes.CREATE_FILE:
+      return [...state, { name: action.name, id: action.id, content: '' }];
     default:
       return state;
   }
diff --git a/client/modules/IDE/reducers/ide.js b/client/modules/IDE/reducers/ide.js
index 7fc1d033..de6ff414 100644
--- a/client/modules/IDE/reducers/ide.js
+++ b/client/modules/IDE/reducers/ide.js
@@ -6,7 +6,9 @@ const initialState = {
   consoleEvent: {
     method: undefined,
     arguments: []
-  }
+  },
+  modalIsVisible: false,
+  sidebarIsExpanded: true
 };
 
 const ide = (state = initialState, action) => {
@@ -23,6 +25,14 @@ const ide = (state = initialState, action) => {
       return Object.assign({}, state, { selectedFile: action.selectedFile });
     case ActionTypes.CONSOLE_EVENT:
       return Object.assign({}, state, { consoleEvent: action.event });
+    case ActionTypes.SHOW_MODAL:
+      return Object.assign({}, state, { modalIsVisible: true });
+    case ActionTypes.HIDE_MODAL:
+      return Object.assign({}, state, { modalIsVisible: false });
+    case ActionTypes.COLLAPSE_SIDEBAR:
+      return Object.assign({}, state, { sidebarIsExpanded: false });
+    case ActionTypes.EXPAND_SIDEBAR:
+      return Object.assign({}, state, { sidebarIsExpanded: true });
     default:
       return state;
   }
diff --git a/client/modules/IDE/reducers/project.js b/client/modules/IDE/reducers/project.js
index 70a1447c..5893863f 100644
--- a/client/modules/IDE/reducers/project.js
+++ b/client/modules/IDE/reducers/project.js
@@ -7,18 +7,18 @@ const initialState = {
 const project = (state = initialState, action) => {
   switch (action.type) {
     case ActionTypes.SET_PROJECT_NAME:
-      return {
-        name: action.name
-      };
+      return Object.assign({}, { ...state }, { name: action.name });
     case ActionTypes.NEW_PROJECT:
       return {
         id: action.id,
-        name: action.name
+        name: action.name,
+        owner: action.owner
       };
     case ActionTypes.SET_PROJECT:
       return {
         id: action.project.id,
-        name: action.project.name
+        name: action.project.name,
+        owner: action.owner
       };
     default:
       return state;
diff --git a/client/modules/Sketch/pages/SketchListView.js b/client/modules/Sketch/pages/SketchListView.js
index fec25baf..822a8e8d 100644
--- a/client/modules/Sketch/pages/SketchListView.js
+++ b/client/modules/Sketch/pages/SketchListView.js
@@ -20,16 +20,16 @@ class SketchListView extends React.Component {
           createProject={this.props.createProject}
           saveProject={this.props.saveProject}
         />
-        <table className="sketches-table">
+        <table className="sketches-table" summary="table containing all saved projects">
           <thead>
-            <th>Name</th>
-            <th>Created</th>
-            <th>Last Updated</th>
+            <th scope="col">Name</th>
+            <th scope="col">Created</th>
+            <th scope="col">Last Updated</th>
           </thead>
           <tbody>
             {this.props.sketches.map(sketch =>
               <tr className="sketches-table__row">
-                <td><Link to={`/projects/${sketch._id}`}>{sketch.name}</Link></td>
+                <td scope="row"><Link to={`/projects/${sketch._id}`}>{sketch.name}</Link></td>
                 <td>{moment(sketch.createdAt).format('MMM D, YYYY')}</td>
                 <td>{moment(sketch.updatedAt).format('MMM D, YYYY')}</td>
               </tr>
diff --git a/client/styles/abstracts/_placeholders.scss b/client/styles/abstracts/_placeholders.scss
index 4b89cf7c..f27caed9 100644
--- a/client/styles/abstracts/_placeholders.scss
+++ b/client/styles/abstracts/_placeholders.scss
@@ -41,6 +41,7 @@
 	&:hover {
 		color: $light-icon-hover-color;
 		& g {
+			opacity: 1;
 			fill: $light-icon-hover-color;
 		}
 	}
diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss
index a41a2097..aea3f2fb 100644
--- a/client/styles/abstracts/_variables.scss
+++ b/client/styles/abstracts/_variables.scss
@@ -19,6 +19,7 @@ $light-button-background-active-color: #f10046;
 $light-button-hover-color: $white;
 $light-button-active-color: $white;
 $light-modal-button-background-color: #e6e6e6;
+$light-modal-border-color: #B9D0E1;
 $light-icon-color: #8b8b8b;
 $light-icon-hover-color: $light-primary-text-color;
 
diff --git a/client/styles/base/_base.scss b/client/styles/base/_base.scss
index fda0b662..bb443366 100644
--- a/client/styles/base/_base.scss
+++ b/client/styles/base/_base.scss
@@ -19,6 +19,7 @@ body, input, button {
 a {
 	text-decoration: none;
 	color: $light-inactive-text-color;
+	cursor: pointer;
 	&:hover {
 		text-decoration: none;
 		color: $light-primary-text-color;
@@ -31,8 +32,9 @@ input, button {
 
 input {
 	padding: #{5 / $base-font-size}rem;
-	border-radius: 2px;
+	// border-radius: 2px;
 	border: 1px solid $input-border-color;
+	padding: #{10 / $base-font-size}rem;
 }
 
 input[type="submit"] {
diff --git a/client/styles/components/_editor.scss b/client/styles/components/_editor.scss
index 5209e517..c1efcc43 100644
--- a/client/styles/components/_editor.scss
+++ b/client/styles/components/_editor.scss
@@ -19,3 +19,44 @@
 .CodeMirror-line {
 	padding-left: #{5 / $base-font-size}rem;
 }
+
+.CodeMirror-gutter-wrapper {
+  right: 100%;
+  top: 0;
+  bottom: 0;
+}
+
+.CodeMirror-lint-marker-warning, .CodeMirror-lint-marker-error, .CodeMirror-lint-marker-multiple {
+  background-image: none;
+  width: 70px;
+  position: absolute;
+  height: 100%;
+}
+
+.CodeMirror-lint-message-error, .CodeMirror-lint-message-warning {
+  background-image: none;
+  padding-left: inherit;
+}
+
+.CodeMirror-lint-marker-warning {
+  background-color: rgb(255, 190, 5);
+}
+
+.CodeMirror-lint-marker-error {
+  background-color: rgb(255, 95, 82);
+}
+
+.CodeMirror-gutter-elt:not(.CodeMirror-linenumber) {
+  opacity: 0.3;
+  width: 70px !important;
+  height: 100%;
+  // background-color: rgb(255, 95, 82);
+}
+
+.CodeMirror-lint-tooltip {
+  font-family: Montserrat, sans-serif;
+  border-radius: 2px;
+  border: 1px solid $light-modal-border-color;
+  background-color: $light-button-background-color;
+
+}
diff --git a/client/styles/components/_modal.scss b/client/styles/components/_modal.scss
new file mode 100644
index 00000000..11f79db3
--- /dev/null
+++ b/client/styles/components/_modal.scss
@@ -0,0 +1,36 @@
+.modal {
+  position: absolute;
+  top: #{66 / $base-font-size}rem;
+  right: #{400 / $base-font-size}rem;
+  z-index: 100;
+}
+
+.modal--hidden {
+  display: none;
+}
+
+.modal-content {
+  border: 1px solid $light-modal-border-color;
+  background-color: $light-button-background-color;
+  height: #{150 / $base-font-size}rem;
+  width: #{400 / $base-font-size}rem;
+  padding: #{20 / $base-font-size}rem;
+}
+
+.modal__exit-button {
+  @extend %icon;
+}
+
+.modal__header {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: #{20 / $base-font-size}rem;
+}
+
+.new-file-form__name-label {
+  display: none;
+}
+
+.new-file-form__name-input {
+  margin-right: #{10 / $base-font-size}rem;
+}
\ No newline at end of file
diff --git a/client/styles/components/_p5-widget-codemirror-theme.scss b/client/styles/components/_p5-widget-codemirror-theme.scss
index 1c7fab3e..fe3be0b1 100644
--- a/client/styles/components/_p5-widget-codemirror-theme.scss
+++ b/client/styles/components/_p5-widget-codemirror-theme.scss
@@ -27,6 +27,7 @@
 .cm-s-p5-widget span.cm-error { color: #f00; }
 
 .cm-s-p5-widget .CodeMirror-activeline-background { background-color: #e8f2ff; }
+// .cm-s-p5-widget .CodeMirror-activeline-gutter { background-color: #e8f2ff; }
 .cm-s-p5-widget .CodeMirror-matchingbracket { outline:1px solid grey; color:black !important; }
 
 /* These styles don't seem to be set by CodeMirror's javascript mode. */
diff --git a/client/styles/components/_sidebar.scss b/client/styles/components/_sidebar.scss
index f7fb4ff8..7919678f 100644
--- a/client/styles/components/_sidebar.scss
+++ b/client/styles/components/_sidebar.scss
@@ -1,12 +1,71 @@
+.sidebar__header {
+  padding: #{10 / $base-font-size}rem #{6 / $base-font-size}rem;
+  display: flex;
+  justify-content: space-between;
+  border-top: 1px solid $ide-border-color;
+  align-items: center;
+  height: #{47 / $base-font-size}rem;
+}
+
+.sidebar__title {
+  font-size: #{16 / $base-font-size}rem;
+  display: inline-block;
+  .sidebar--contracted & {
+    display: none;
+  }
+}
+
+.sidebar__add {
+  cursor: pointer;
+  height: #{26 / $base-font-size}rem;
+  margin-right: #{16 / $base-font-size}rem;
+  font-size: #{24 / $base-font-size}rem;
+  .sidebar--contracted & {
+    display: none;
+  }
+}
+
 .sidebar__file-list {
-  border-top: 1px solid $ide-border-color; 
+  border-top: 1px solid $ide-border-color;
+  .sidebar--contracted & {
+    display: none;
+  }
 }
 
 .sidebar__file-item {
+  font-size: #{16 / $base-font-size}rem;
   padding: #{8 / $base-font-size}rem #{20 / $base-font-size}rem;
   color: $light-inactive-text-color;
+  cursor: pointer;
+  &--selected {
+    background-color: $ide-border-color;
+  }
 }
 
-.sidebar__file-item--selected {
-  background-color: $ide-border-color;
-}
\ No newline at end of file
+.sidebar__contract {
+  @extend %icon;
+  height: #{14 / $base-font-size}rem;
+  & svg {
+    height: #{14 / $base-font-size}rem;
+  }
+  .sidebar--contracted & {
+    display: none;
+  }
+}
+
+.sidebar__expand {
+  @extend %icon;
+  height: #{14 / $base-font-size}rem;
+  & svg {
+    height: #{14 / $base-font-size}rem;
+  }
+  display: none;
+  .sidebar--contracted & {
+    display: inline-block;
+  }
+}
+
+.sidebar__icons {
+  display: flex;
+  align-items: center;
+}
diff --git a/client/styles/components/_signup.scss b/client/styles/components/_signup.scss
index 44207481..203bc729 100644
--- a/client/styles/components/_signup.scss
+++ b/client/styles/components/_signup.scss
@@ -6,14 +6,14 @@
 	justify-content: center;
 }
 
-.signup-form__username-label, 
+.signup-form__username-label,
 .signup-form__email-label,
 .signup-form__password-label,
 .signup-form__confirm-password-label {
 	display: none;
 }
 
-.signup-form__username-input, 
+.signup-form__username-input,
 .signup-form__email-input,
 .signup-form__password-input,
 .signup-form__confirm-password-input {
@@ -22,4 +22,4 @@
 
 .signup-form__field {
 	margin: #{20 / $base-font-size}rem 0;
-}
\ No newline at end of file
+}
diff --git a/client/styles/components/_toolbar.scss b/client/styles/components/_toolbar.scss
index 1bad6fd1..3716c907 100644
--- a/client/styles/components/_toolbar.scss
+++ b/client/styles/components/_toolbar.scss
@@ -54,3 +54,7 @@
 		color: $light-inactive-text-color;
 	}
 }
+
+.toolbar__project-owner {
+	margin-left: #{5 / $base-font-size}rem;
+}
diff --git a/client/styles/layout/_ide.scss b/client/styles/layout/_ide.scss
index ffb6561e..a37c636d 100644
--- a/client/styles/layout/_ide.scss
+++ b/client/styles/layout/_ide.scss
@@ -6,12 +6,13 @@
 }
 
 .editor-holder {
-	flex-grow: 1;
+	flex: 1 0 0;
+  max-width: 45%;
 	height: 100%;
 }
 
 .preview-frame {
-	flex-grow: 1;
+	flex: 1 0 0;
 }
 
 .toolbar {
@@ -19,5 +20,8 @@
 }
 
 .sidebar {
-  width: #{140 / $base-font-size}rem;
+  width: #{180 / $base-font-size}rem;
+  &.sidebar--contracted {
+  	width: #{20 / $base-font-size}rem;
+  }
 }
diff --git a/client/styles/main.scss b/client/styles/main.scss
index c16cff9d..0bdb2bb8 100644
--- a/client/styles/main.scss
+++ b/client/styles/main.scss
@@ -5,6 +5,7 @@
 @import 'base/base';
 
 @import 'vendors/codemirror';
+@import 'vendors/lint';
 
 @import 'components/p5-widget-codemirror-theme';
 @import 'components/editor';
@@ -15,6 +16,8 @@
 @import 'components/login';
 @import 'components/sketch-list';
 @import 'components/sidebar';
+@import 'components/modal';
+@import 'components/console';
 
 @import 'layout/ide';
 @import 'layout/sketch-list';
diff --git a/client/styles/vendors/_lint.scss b/client/styles/vendors/_lint.scss
new file mode 100644
index 00000000..414a9a0e
--- /dev/null
+++ b/client/styles/vendors/_lint.scss
@@ -0,0 +1,73 @@
+/* The lint marker gutter */
+.CodeMirror-lint-markers {
+  width: 16px;
+}
+
+.CodeMirror-lint-tooltip {
+  background-color: infobackground;
+  border: 1px solid black;
+  border-radius: 4px 4px 4px 4px;
+  color: infotext;
+  font-family: monospace;
+  font-size: 10pt;
+  overflow: hidden;
+  padding: 2px 5px;
+  position: fixed;
+  white-space: pre;
+  white-space: pre-wrap;
+  z-index: 100;
+  max-width: 600px;
+  opacity: 0;
+  transition: opacity .4s;
+  -moz-transition: opacity .4s;
+  -webkit-transition: opacity .4s;
+  -o-transition: opacity .4s;
+  -ms-transition: opacity .4s;
+}
+
+.CodeMirror-lint-mark-error, .CodeMirror-lint-mark-warning {
+  background-position: left bottom;
+  background-repeat: repeat-x;
+}
+
+.CodeMirror-lint-mark-error {
+  background-image:
+  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJDw4cOCW1/KIAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAHElEQVQI12NggIL/DAz/GdA5/xkY/qPKMDAwAADLZwf5rvm+LQAAAABJRU5ErkJggg==")
+  ;
+}
+
+.CodeMirror-lint-mark-warning {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJFhQXEbhTg7YAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAMklEQVQI12NkgIIvJ3QXMjAwdDN+OaEbysDA4MPAwNDNwMCwiOHLCd1zX07o6kBVGQEAKBANtobskNMAAAAASUVORK5CYII=");
+}
+
+.CodeMirror-lint-marker-error, .CodeMirror-lint-marker-warning {
+  background-position: center center;
+  background-repeat: no-repeat;
+  cursor: pointer;
+  display: inline-block;
+  height: 16px;
+  width: 16px;
+  vertical-align: middle;
+  position: relative;
+}
+
+.CodeMirror-lint-message-error, .CodeMirror-lint-message-warning {
+  padding-left: 18px;
+  background-position: top left;
+  background-repeat: no-repeat;
+}
+
+.CodeMirror-lint-marker-error, .CodeMirror-lint-message-error {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAHlBMVEW7AAC7AACxAAC7AAC7AAAAAAC4AAC5AAD///+7AAAUdclpAAAABnRSTlMXnORSiwCK0ZKSAAAATUlEQVR42mWPOQ7AQAgDuQLx/z8csYRmPRIFIwRGnosRrpamvkKi0FTIiMASR3hhKW+hAN6/tIWhu9PDWiTGNEkTtIOucA5Oyr9ckPgAWm0GPBog6v4AAAAASUVORK5CYII=");
+}
+
+.CodeMirror-lint-marker-warning, .CodeMirror-lint-message-warning {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAANlBMVEX/uwDvrwD/uwD/uwD/uwD/uwD/uwD/uwD/uwD6twD/uwAAAADurwD2tQD7uAD+ugAAAAD/uwDhmeTRAAAADHRSTlMJ8mN1EYcbmiixgACm7WbuAAAAVklEQVR42n3PUQqAIBBFUU1LLc3u/jdbOJoW1P08DA9Gba8+YWJ6gNJoNYIBzAA2chBth5kLmG9YUoG0NHAUwFXwO9LuBQL1giCQb8gC9Oro2vp5rncCIY8L8uEx5ZkAAAAASUVORK5CYII=");
+}
+
+.CodeMirror-lint-marker-multiple {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAMAAADzjKfhAAAACVBMVEUAAAAAAAC/v7914kyHAAAAAXRSTlMAQObYZgAAACNJREFUeNo1ioEJAAAIwmz/H90iFFSGJgFMe3gaLZ0od+9/AQZ0ADosbYraAAAAAElFTkSuQmCC");
+  background-repeat: no-repeat;
+  background-position: right bottom;
+  width: 100%; height: 100%;
+}
diff --git a/package.json b/package.json
index dca229de..f92b3565 100644
--- a/package.json
+++ b/package.json
@@ -65,11 +65,16 @@
     "codemirror": "^5.14.2",
     "connect-mongo": "^1.2.0",
     "cookie-parser": "^1.4.1",
+    "csslint": "^0.10.0",
     "dotenv": "^2.0.0",
     "escape-string-regexp": "^1.0.5",
     "eslint-loader": "^1.3.0",
     "express": "^4.13.4",
     "express-session": "^1.13.0",
+    "file-saver": "^1.3.2",
+    "htmlhint": "^0.9.13",
+    "jshint": "^2.9.2",
+    "jszip": "^3.0.0",
     "moment": "^2.14.1",
     "mongoose": "^4.4.16",
     "passport": "^0.3.2",
@@ -84,6 +89,7 @@
     "redux-form": "^5.2.5",
     "redux-thunk": "^2.1.0",
     "shortid": "^2.2.6",
-    "srcdoc-polyfill": "^0.2.0"
+    "srcdoc-polyfill": "^0.2.0",
+    "throttle-debounce": "^1.0.1"
   }
 }
diff --git a/server/controllers/file.controller.js b/server/controllers/file.controller.js
new file mode 100644
index 00000000..a2071ba5
--- /dev/null
+++ b/server/controllers/file.controller.js
@@ -0,0 +1,19 @@
+import Project from '../models/project'
+
+// Bug -> timestamps don't get created, but it seems like this will
+// be fixed in mongoose soon
+// https://github.com/Automattic/mongoose/issues/4049
+export function createFile(req, res) {
+  Project.findByIdAndUpdate(req.params.project_id,
+    {
+      $push: {
+        'files': req.body
+      }
+    },
+    {
+      new: true
+    }, (err, updatedProject) => {
+      if (err) { return res.json({ success: false }); }
+      return res.json(updatedProject.files[updatedProject.files.length - 1]);
+    });
+}
\ No newline at end of file
diff --git a/server/controllers/project.controller.js b/server/controllers/project.controller.js
index 6c8f55c4..955b9b1b 100644
--- a/server/controllers/project.controller.js
+++ b/server/controllers/project.controller.js
@@ -1,15 +1,20 @@
 import Project from '../models/project';
 
 export function createProject(req, res) {
-  const projectValues = {
+  let projectValues = {
     user: req.user ? req.user._id : undefined // eslint-disable-line no-underscore-dangle
   };
 
-  Object.assign(projectValues, req.body);
+  projectValues = Object.assign(projectValues, req.body);
 
   Project.create(projectValues, (err, newProject) => {
     if (err) { return res.json({ success: false }); }
-    return res.json(newProject);
+    Project.populate(newProject,
+      {path: 'user', select: 'username'},
+      (innerErr, newProjectWithUser) => {
+        if (innerErr) { return res.json({ success: false }); }
+        return res.json(newProjectWithUser);
+    });
   });
 }
 
@@ -17,27 +22,31 @@ export function updateProject(req, res) {
   Project.findByIdAndUpdate(req.params.project_id,
     {
       $set: req.body
-    }, (err, updatedProject) => {
+    })
+    .populate('user', 'username')
+    .exec((err, updatedProject) => {
       if (err) { return res.json({ success: false }); }
       return res.json(updatedProject);
     });
 }
 
 export function getProject(req, res) {
-  Project.findById(req.params.project_id, (err, project) => {
-    if (err) {
-      return res.status(404).send({ message: 'Project with that id does not exist' });
-    }
+  Project.findById(req.params.project_id)
+    .populate('user', 'username')
+    .exec((err, project) => {
+      if (err) {
+        return res.status(404).send({ message: 'Project with that id does not exist' });
+      }
 
-    return res.json(project);
-  });
+      return res.json(project);
+    });
 }
 
 export function getProjects(req, res) {
   if (req.user) {
     Project.find({user: req.user._id}) // eslint-disable-line no-underscore-dangle
       .sort('-createdAt')
-      .select('name file _id createdAt updatedAt')
+      .select('name files _id createdAt updatedAt')
       .exec((err, projects) => {
         res.json(projects);
       });
diff --git a/server/routes/file.routes.js b/server/routes/file.routes.js
new file mode 100644
index 00000000..c7035ac6
--- /dev/null
+++ b/server/routes/file.routes.js
@@ -0,0 +1,8 @@
+import { Router } from 'express';
+import * as FileController from '../controllers/file.controller';
+
+const router = new Router();
+
+router.route('/projects/:project_id/files').post(FileController.createFile);
+
+export default router;
\ No newline at end of file
diff --git a/server/server.js b/server/server.js
index 99879244..3d59d285 100644
--- a/server/server.js
+++ b/server/server.js
@@ -27,6 +27,7 @@ import serverConfig from './config';
 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 serverRoutes from './routes/server.routes';
 
 // Body parser, cookie parser, sessions, serve public assets
@@ -55,6 +56,7 @@ app.use(passport.session());
 app.use('/api', users);
 app.use('/api', sessions);
 app.use('/api', projects);
+app.use('/api', files);
 // this is supposed to be TEMPORARY -- until i figure out
 // isomorphic rendering
 app.use('/', serverRoutes);