diff --git a/client/components/Nav.jsx b/client/components/Nav.jsx
index 0a861e97..5b4aebcf 100644
--- a/client/components/Nav.jsx
+++ b/client/components/Nav.jsx
@@ -1,11 +1,105 @@
 import React, { PropTypes } from 'react';
 import { Link } from 'react-router';
+import InlineSVG from 'react-inlinesvg';
+
+const triangleUrl = require('../images/down-filled-triangle.svg');
+const logoUrl = require('../images/p5js-logo-small.svg');
 
 class Nav extends React.PureComponent {
   render() {
     return (
       <nav className="nav" role="navigation" title="main-navigation">
         <ul className="nav__items-left" title="project-menu">
+          <li>
+            <InlineSVG src={logoUrl} alt="p5.js logo" />
+          </li>
+          <li className="nav__item">
+            <button>
+              File
+              <InlineSVG src={triangleUrl} />
+            </button>
+            <ul className="nav__dropdown">
+              <li>
+                <button
+                  onClick={() => {
+                    if (!this.props.unsavedChanges) {
+                      this.props.newProject();
+                    } else if (this.props.warnIfUnsavedChanges()) {
+                      this.props.newProject();
+                    }
+                  }}
+                >
+                  New
+                </button>
+              </li>
+              <li>
+                <button>
+                  Save
+                </button>
+              </li>
+              <li>
+                <button>
+                  Duplicate
+                </button>
+              </li>
+              <li>
+                <button>
+                  Open
+                </button>
+              </li>
+              <li>
+                <button>
+                  Download
+                </button>
+              </li>
+            </ul>
+          </li>
+          <li className="nav__item">
+            <button>
+              Edit
+              <InlineSVG src={triangleUrl} />
+            </button>
+            <ul className="nav__dropdown">
+              <li>
+                Tidy Code
+              </li>
+              <li>
+                Find
+              </li>
+            </ul>
+          </li>
+          <li className="nav__item">
+            <button>
+              Sketch
+              <InlineSVG src={triangleUrl} />
+            </button>
+            <ul className="nav__dropdown">
+              <li>
+                Run
+              </li>
+              <li>
+                Stop
+              </li>
+            </ul>
+          </li>
+          <li className="nav__item">
+            <button>
+              Help
+              <InlineSVG src={triangleUrl} />
+            </button>
+            <ul className="nav__dropdown">
+              <li>
+                Keyboard Shortcuts
+              </li>
+              <li>
+                Reference
+              </li>
+              <li>
+                About
+              </li>
+            </ul>
+          </li>
+
           <li className="nav__item">
             <button
               className="nav__new"
diff --git a/client/images/down-filled-triangle.svg b/client/images/down-filled-triangle.svg
new file mode 100644
index 00000000..b673aafe
--- /dev/null
+++ b/client/images/down-filled-triangle.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="9px" height="6px" viewBox="0 0 9 6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
+    <title>Triangle</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <polygon id="Triangle" fill="#B5B5B5" transform="translate(4.500000, 3.000000) rotate(180.000000) translate(-4.500000, -3.000000) " points="4.5 0 9 6 0 6"></polygon>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/client/images/p5js-logo-small.svg b/client/images/p5js-logo-small.svg
new file mode 100644
index 00000000..164ef67f
--- /dev/null
+++ b/client/images/p5js-logo-small.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="56" height="42" viewBox="0 0 56 42">
+    <defs>
+        <path id="a" d="M0 0h36v36H0z"/>
+        <path id="b" d="M0 0h36v36H0z"/>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <path fill="#ED225D" d="M0 0h56v42H0z"/>
+        <g transform="translate(10)">
+            <use fill="#FFF" xlink:href="#a"/>
+            <path stroke="#979797" d="M.5.5h35v35H.5z"/>
+        </g>
+        <path fill="#ED225D" d="M21.025 20.617a2.826 2.826 0 0 0-.941-.795c-.38-.201-.824-.302-1.334-.302-.481 0-.912.104-1.29.314-.38.209-.704.478-.974.805-.27.329-.474.702-.612 1.12a3.85 3.85 0 0 0 0 2.496c.138.411.342.78.612 1.109.27.328.594.593.974.794.378.202.809.302 1.29.302.51 0 .955-.104 1.334-.313.38-.209.693-.477.94-.806.248-.328.434-.701.559-1.12a4.283 4.283 0 0 0 0-2.497c-.125-.409-.31-.778-.558-1.107"/>
+        <g transform="translate(10)">
+            <mask id="c" fill="#fff">
+                <use xlink:href="#b"/>
+            </mask>
+            <path fill="#ED225D" d="M32.75 16.44l-.989.717-1.026-1.361-1.001 1.326-.963-.734.975-1.337-1.582-.571.374-1.15 1.586.511v-1.644h1.273v1.647l1.574-.476.373 1.15-1.57.536.975 1.385zm-7.045 8.959a5.208 5.208 0 0 1-1.25 1.769c-.524.481-1.139.85-1.844 1.105a6.559 6.559 0 0 1-2.25.383c-1.334 0-2.46-.312-3.374-.936a5.238 5.238 0 0 1-1.533-1.614l1.953-1.835.03-.01a3.14 3.14 0 0 0 1.125 1.52c.525.384 1.147.576 1.867.576.405 0 .787-.068 1.147-.204.36-.134.675-.33.945-.585.27-.256.484-.575.641-.958.158-.383.237-.815.237-1.296 0-.616-.106-1.127-.315-1.533a2.775 2.775 0 0 0-.821-.98 3.075 3.075 0 0 0-1.136-.519 5.634 5.634 0 0 0-1.282-.146c-.3 0-.619.022-.957.067-.337.046-.667.11-.99.192-.322.083-.637.177-.944.281a6.717 6.717 0 0 0-.821.338l.27-8.722h9.065v2.434h-6.501l-.157 3.449c.254-.075.558-.128.91-.158.353-.03.672-.045.957-.045.78 0 1.503.112 2.17.338a5.15 5.15 0 0 1 1.744.98c.495.429.88.955 1.158 1.578.278.624.416 1.341.416 2.153 0 .887-.153 1.679-.46 2.378zm-11.601-.36a5.504 5.504 0 0 1-1.058 1.825 5.08 5.08 0 0 1-1.664 1.24c-.653.307-1.392.462-2.216.462a4.678 4.678 0 0 1-2.103-.474c-.638-.315-1.13-.743-1.474-1.285h-.045v6.853h-2.7V17.43h2.588v1.51h.067c.135-.21.311-.424.529-.642.217-.218.484-.413.799-.587a4.908 4.908 0 0 1 2.407-.597c.764 0 1.469.147 2.114.44.645.293 1.2.695 1.665 1.206a5.465 5.465 0 0 1 1.08 1.803c.254.691.382 1.435.382 2.231 0 .797-.124 1.544-.371 2.243zM0 36.07h36V0H0v36.071z" mask="url(#c)"/>
+        </g>
+    </g>
+</svg>
diff --git a/client/styles/components/_nav.scss b/client/styles/components/_nav.scss
index a8cd864d..02112a13 100644
--- a/client/styles/components/_nav.scss
+++ b/client/styles/components/_nav.scss
@@ -1,20 +1,20 @@
 .nav {
 	width: 100%;
-	padding: #{10 / $base-font-size}rem #{32 / $base-font-size}rem 0 #{32 / $base-font-size}rem;
+  height: #{42 / $base-font-size}rem;
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
-}
-
-.nav__items-left, .nav__items-right {
 	@include themify() {
 		border-bottom: 1px dashed map-get($theme-map, 'inactive-text-color');
 	}
+}
+
+.nav__items-left, .nav__items-right {
 	list-style: none;
 	display: flex;
 	flex-direction: row;
 	justify-content: flex-end;
-	padding: #{3 / $base-font-size}rem 0;
+  height: 100%;
 }
 
 .nav__items-left {
@@ -29,6 +29,9 @@
 	position: relative;
 	padding: 0 #{24 / $base-font-size}rem;
 	text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .nav__item:first-child {