diff --git a/client/components/Nav.jsx b/client/components/Nav.jsx
index 987ba11d..253146b0 100644
--- a/client/components/Nav.jsx
+++ b/client/components/Nav.jsx
@@ -530,12 +530,16 @@ class Nav extends React.PureComponent {
         </ul>
         { __process.env.LOGIN_ENABLED && !this.props.user.authenticated &&
           <ul className="nav__items-right" title="user-menu">
-            <li className="nav__item">
-              <p>
-                <Link to="/login">Log in</Link>
-                <span className="nav__item-spacer">or</span>
-                <Link to="/signup">Sign up</Link>
-              </p>
+            <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 &&
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/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/modules/IDE/actions/project.js b/client/modules/IDE/actions/project.js
index 355faecf..0fa2d344 100644
--- a/client/modules/IDE/actions/project.js
+++ b/client/modules/IDE/actions/project.js
@@ -215,32 +215,6 @@ export function autosaveProject() {
   };
 }
 
-export function createProject() {
-  return (dispatch, getState) => {
-    const state = getState();
-    if (state.project.isSaving) {
-      Promise.resolve();
-      return;
-    }
-    dispatch(startSavingProject());
-    axios.post(`${ROOT_URL}/projects`, {}, { withCredentials: true })
-      .then((response) => {
-        dispatch(endSavingProject());
-        dispatch(setUnsavedChanges(false));
-        browserHistory.push(`/${response.data.user.username}/sketches/${response.data.id}`);
-        const { hasChanges, synchedProject } = getSynchedProject(getState(), response.data);
-        if (hasChanges) {
-          dispatch(setUnsavedChanges(true));
-        }
-        dispatch(setNewProject(synchedProject));
-      })
-      .catch((response) => {
-        dispatch(endSavingProject());
-        dispatch(projectSaveFail(response.data));
-      });
-  };
-}
-
 export function exportProjectAsZip(projectId) {
   const win = window.open(`${ROOT_URL}/projects/${projectId}/zip`, '_blank');
   win.focus();
diff --git a/client/modules/IDE/components/Preferences.jsx b/client/modules/IDE/components/Preferences.jsx
index 6723c038..c98067c4 100644
--- a/client/modules/IDE/components/Preferences.jsx
+++ b/client/modules/IDE/components/Preferences.jsx
@@ -59,9 +59,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/User/pages/AccountView.jsx b/client/modules/User/pages/AccountView.jsx
index 83f09ebc..7382656e 100644
--- a/client/modules/User/pages/AccountView.jsx
+++ b/client/modules/User/pages/AccountView.jsx
@@ -12,9 +12,9 @@ import AccountForm from '../components/AccountForm';
 import { validateSettings } from '../../../utils/reduxFormUtils';
 import GithubButton from '../components/GithubButton';
 import APIKeyForm from '../components/APIKeyForm';
+import NavBasic from '../../../components/NavBasic';
 
 const exitUrl = require('../../../images/exit.svg');
-const logoUrl = require('../../../images/p5js-logo.svg');
 
 class AccountView extends React.Component {
   constructor(props) {
@@ -24,7 +24,7 @@ class AccountView extends React.Component {
   }
 
   componentDidMount() {
-    document.body.className = 'light';
+    document.body.className = this.props.theme;
   }
 
   closeAccountPage() {
@@ -37,43 +37,40 @@ class AccountView extends React.Component {
 
   render() {
     return (
-      <section className="form-container form-container--align-top form-container--align-left account-container">
+      <div className="user">
         <Helmet>
           <title>p5.js Web Editor | Account</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>
-          <Tabs className="account__tabs">
-            <TabList>
-              <div className="preference__subheadings">
-                <Tab><h4 className="preference__subheading">Account</h4></Tab>
-                <Tab><h4 className="preference__subheading">Access Tokens</h4></Tab>
-              </div>
-            </TabList>
-            <TabPanel>
-              <AccountForm {...this.props} />
-              <div className="account__social">
+
+        <NavBasic onBack={this.closeAccountPage} />
+
+        <section className="modal">
+          <div className="modal-content">
+            <div className="modal__header">
+              <h2 className="modal__title">My Account</h2>
+            </div>
+            <Tabs className="account__tabs">
+              <TabList>
+                <div className="tabs__titles">
+                  <Tab><h4 className="tabs__title">Account</h4></Tab>
+                  <Tab><h4 className="tabs__title">Access Tokens</h4></Tab>
+                </div>
+              </TabList>
+              <TabPanel>
+                <AccountForm {...this.props} />
                 <h2 className="form-container__divider">Social Login</h2>
-                <p className="account__social__context">
+                <p className="account__social-text">
                   Link this account with your GitHub account to allow login from both.
                 </p>
                 <GithubButton buttonText="Login with GitHub" />
-              </div>
-            </TabPanel>
-            <TabPanel>
-              <APIKeyForm {...this.props} />
-            </TabPanel>
-          </Tabs>
-        </div>
-      </section>
+              </TabPanel>
+              <TabPanel>
+                <APIKeyForm {...this.props} />
+              </TabPanel>
+            </Tabs>
+          </div>
+        </section>
+      </div>
     );
   }
 }
diff --git a/client/modules/User/pages/EmailVerificationView.jsx b/client/modules/User/pages/EmailVerificationView.jsx
index b18c545e..55b5a1f3 100644
--- a/client/modules/User/pages/EmailVerificationView.jsx
+++ b/client/modules/User/pages/EmailVerificationView.jsx
@@ -65,21 +65,23 @@ 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="user">
+        <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>
         </div>
       </div>
     );
diff --git a/client/modules/User/pages/LoginView.jsx b/client/modules/User/pages/LoginView.jsx
index 696af234..4ce4ab8d 100644
--- a/client/modules/User/pages/LoginView.jsx
+++ b/client/modules/User/pages/LoginView.jsx
@@ -34,32 +34,34 @@ 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="user">
+        <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>
         </div>
       </div>
     );
diff --git a/client/modules/User/pages/NewPasswordView.jsx b/client/modules/User/pages/NewPasswordView.jsx
index 12d8d700..32b9ae91 100644
--- a/client/modules/User/pages/NewPasswordView.jsx
+++ b/client/modules/User/pages/NewPasswordView.jsx
@@ -31,27 +31,30 @@ class NewPasswordView extends React.Component {
     const newPasswordClass = classNames({
       'new-password': true,
       'new-password--invalid': this.props.user.resetPasswordInvalid,
-      'form-container': true
+      'form-container': true,
+      'user': true
     });
     return (
-      <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} />
-          <p className="new-password__invalid">
-            The password reset token is invalid or has expired.
-          </p>
+      <div className="user">
+        <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} />
+            <p className="new-password__invalid">
+              The password reset token is invalid or has expired.
+            </p>
+          </div>
         </div>
       </div>
     );
diff --git a/client/modules/User/pages/ResetPasswordView.jsx b/client/modules/User/pages/ResetPasswordView.jsx
index 523783b7..c6db189a 100644
--- a/client/modules/User/pages/ResetPasswordView.jsx
+++ b/client/modules/User/pages/ResetPasswordView.jsx
@@ -30,33 +30,36 @@ class ResetPasswordView extends React.Component {
     const resetPasswordClass = classNames({
       'reset-password': true,
       'reset-password--submitted': this.props.user.resetPasswordInitiate,
-      'form-container': true
+      'form-container': true,
+      'user': true
     });
     return (
-      <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} />
-          <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.
-          </p>
-          <p className="form__navigation-options">
-            <Link className="form__login-button" to="/login">Log In</Link>
-            &nbsp;or&nbsp;
-            <Link className="form__signup-button" to="/signup">Sign Up</Link>
-          </p>
+      <div className="user">
+        <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} />
+            <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.
+            </p>
+            <p className="form__navigation-options">
+              <Link className="form__login-button" to="/login">Log In</Link>
+              &nbsp;or&nbsp;
+              <Link className="form__signup-button" to="/signup">Sign Up</Link>
+            </p>
+          </div>
         </div>
       </div>
     );
diff --git a/client/modules/User/pages/SignupView.jsx b/client/modules/User/pages/SignupView.jsx
index 9fbbc930..bcd98a3a 100644
--- a/client/modules/User/pages/SignupView.jsx
+++ b/client/modules/User/pages/SignupView.jsx
@@ -34,25 +34,27 @@ 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="user">
+        <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>
         </div>
       </div>
     );
diff --git a/client/styles/abstracts/_placeholders.scss b/client/styles/abstracts/_placeholders.scss
index dd71f9d2..b7af3212 100644
--- a/client/styles/abstracts/_placeholders.scss
+++ b/client/styles/abstracts/_placeholders.scss
@@ -102,27 +102,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 50e43640..6f85f718 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,
@@ -62,8 +69,22 @@ $themes: (
     keyboard-shortcut-color: #757575,
     nav-hover-color: $p5js-pink,
     error-color: $p5js-pink,
+    table-row-stripe-color: #d6d6d6,
     codefold-icon-open: url(../images/down-arrow.svg),
-    codefold-icon-closed: url(../images/right-arrow.svg)
+    codefold-icon-closed: url(../images/right-arrow.svg),
+
+    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,
@@ -111,8 +132,20 @@ $themes: (
     keyboard-shortcut-color: #B5B5B5,
     nav-hover-color: $p5js-pink,
     error-color: $p5js-pink,
+    table-row-stripe-color: #3f3f3f,
     codefold-icon-open: url(../images/down-arrow-white.svg),
-    codefold-icon-closed: url(../images/right-arrow-white.svg)
+    codefold-icon-closed: url(../images/right-arrow-white.svg),
+
+    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,
@@ -159,8 +192,20 @@ $themes: (
     keyboard-shortcut-color: #e1e1e1,
     nav-hover-color: $yellow,
     error-color: $p5-contrast-pink,
+    table-row-stripe-color: #3f3f3f,
     codefold-icon-open: url(../images/down-arrow-white.svg),
-    codefold-icon-closed: url(../images/right-arrow-white.svg)
+    codefold-icon-closed: url(../images/right-arrow-white.svg),
+
+    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
   )
 );
 
@@ -170,15 +215,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..2e839f24 100644
--- a/client/styles/base/_base.scss
+++ b/client/styles/base/_base.scss
@@ -42,12 +42,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;
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
index a03b140f..8a6cb4fc 100644
--- a/client/styles/components/_account.scss
+++ b/client/styles/components/_account.scss
@@ -1,8 +1,7 @@
 .account__tabs {
-  width: 500px;
   padding-top: #{20 / $base-font-size}rem;
 }
 
-.account__social__context {
+.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
index 16d2bbfe..b3e6bfeb 100644
--- a/client/styles/components/_api-key.scss
+++ b/client/styles/components/_api-key.scss
@@ -50,7 +50,9 @@
   }
 
   tbody tr:nth-child(odd) {
-    background-color: #f2f2f2;
+    @include themify() {
+      background: getThemifyVariable('table-row-stripe-color');
+    }
   }
 }
 
diff --git a/client/styles/components/_asset-list.scss b/client/styles/components/_asset-list.scss
index 76013deb..a8e76c74 100644
--- a/client/styles/components/_asset-list.scss
+++ b/client/styles/components/_asset-list.scss
@@ -35,7 +35,7 @@
 
   &:nth-child(odd) {
     @include themify() {
-      background: getThemifyVariable('console-header-background-color');
+      background: getThemifyVariable('table-row-stripe-color');
     }
   }
 
diff --git a/client/styles/components/_form-container.scss b/client/styles/components/_form-container.scss
index 3514d4f6..a2e6726d 100644
--- a/client/styles/components/_form-container.scss
+++ b/client/styles/components/_form-container.scss
@@ -35,7 +35,9 @@
 
 .form-container__title {
 	font-weight: normal;
-	color: $form-title-color;
+	@include themify() {
+    color: getThemifyVariable('form-title-color')
+  }
 }
 
 .form-container__context {
@@ -49,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 94ba4501..50a584fa 100644
--- a/client/styles/components/_forms.scss
+++ b/client/styles/components/_forms.scss
@@ -5,7 +5,7 @@
   font-size: #{9 / $base-font-size}rem;
   text-align: left;
   @include themify() {
-    color: getThemifyVariable('error-color')
+    color: getThemifyVariable('error-color');
   }
 }
 
@@ -22,7 +22,9 @@
 .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{
@@ -31,11 +33,13 @@
 }
 
 .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 {
@@ -43,10 +47,19 @@
 }
 
 .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::placeholder {
+  @include themify() {
+    color: getThemifyVariable('form-input-placeholder-text-color');
+  }
 }
 
 .form__context {
@@ -55,13 +68,17 @@
 }
 
 .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 {
-  cursor: not-allowed;
+.form--inline [type="submit"] {
+  margin: 0 0 0 #{24 / $base-font-size}rem;
 }
diff --git a/client/styles/components/_modal.scss b/client/styles/components/_modal.scss
index 2d9393c8..b7b56f78 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: #{700 / $base-font-size}rem;
   padding: #{20 / $base-font-size}rem;
   .modal--reduced & {
     //min-height: #{150 / $base-font-size}rem;
diff --git a/client/styles/components/_nav.scss b/client/styles/components/_nav.scss
index 707636bd..30496400 100644
--- a/client/styles/components/_nav.scss
+++ b/client/styles/components/_nav.scss
@@ -51,10 +51,6 @@
   padding-right: #{15 / $base-font-size}rem;
 }
 
-.nav__item-header {
-  margin-right: #{5 / $base-font-size}rem;
-}
-
 .nav__item:hover {
   .nav__item-header {
     @include themify() {
@@ -69,6 +65,16 @@
   }
 }
 
+.nav__item-header:hover {
+  @include themify() {
+      color: getThemifyVariable('nav-hover-color');
+    }
+}
+
+.nav__item-header-triangle {
+	margin-left: #{5 / $base-font-size}rem;
+}
+
 .nav__dropdown {
   @include themify() {
     background-color: map-get($theme-map, 'modal-background-color');
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/_preferences.scss b/client/styles/components/_preferences.scss
index 3f77e40a..26d213fd 100644
--- a/client/styles/components/_preferences.scss
+++ b/client/styles/components/_preferences.scss
@@ -60,15 +60,6 @@
     text-align: left;
 }
 
-.preference__subheadings {
-  display: flex;
-  flex-wrap: wrap;
-  padding-bottom: #{0.1 / $base-font-size}rem;
-  @include themify() {
-    border-bottom: 1px solid getThemifyVariable('button-border-color');
-  }
-}
-
 .preference {
   display: flex;
   flex-wrap: wrap;
@@ -129,48 +120,6 @@
   width: #{44 / $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 .preference__subheading {
-  @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;
-  }
-}
-
-.preference__subheading {
-  @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;
-}
-
 .preference__vertical-list {
   display: flex;
   flex-direction: column;
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/_sketch-list.scss b/client/styles/components/_sketch-list.scss
index 496a2b1c..328b07b2 100644
--- a/client/styles/components/_sketch-list.scss
+++ b/client/styles/components/_sketch-list.scss
@@ -53,7 +53,7 @@
 
 .sketches-table__row:nth-child(odd) {
   @include themify() {
-    background: getThemifyVariable('console-header-background-color');
+    background: getThemifyVariable('table-row-stripe-color');
   }
 }
 
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/_user.scss b/client/styles/layout/_user.scss
new file mode 100644
index 00000000..5f07a771
--- /dev/null
+++ b/client/styles/layout/_user.scss
@@ -0,0 +1,10 @@
+.user {
+	display: flex;
+  flex-direction: column;
+  height: 100%;
+  flex-wrap: wrap;
+  @include themify() {
+    color: getThemifyVariable('primary-text-color');
+    background-color: getThemifyVariable('background-color');
+  }
+}
diff --git a/client/styles/main.scss b/client/styles/main.scss
index cff7ff67..62b8d4cc 100644
--- a/client/styles/main.scss
+++ b/client/styles/main.scss
@@ -45,6 +45,8 @@
 @import 'components/feedback';
 @import 'components/loader';
 @import 'components/uploader';
+@import 'components/tabs';
 
 @import 'layout/ide';
 @import 'layout/fullscreen';
+@import 'layout/user';