diff --git a/README.md b/README.md
index 1ecc623..8c25b42 100644
--- a/README.md
+++ b/README.md
@@ -2,33 +2,61 @@
 [![Build Status](https://semaphoreci.com/api/v1/tcrosse/gitter-clone/branches/master/badge.svg)](https://semaphoreci.com/tcrosse/gitter-clone)
 [![codecov](https://codecov.io/gh/tylercrosse/gitter-clone/branch/master/graph/badge.svg)](https://codecov.io/gh/tylercrosse/gitter-clone)
 
+<div align="center">
+</div>
+
 This is app was built as portfolio piece representing a subset of the features of Troupe Technology's wonderful chat app, [Gitter](https://gitter.im/). I'm currently looking for a new position - Hire me!
 
+---
 ### Demo
 
 You can test a fully working live demo at  http://138.68.24.248:3333/
 
+---
 ### Major features
 
-- Create Channels
-- Send Messages to all subscribed clients on channel
-- Load previous messages in channel
 - MD / syntax highlighting support for messages
 - Messages grouped into bursts
+- Create Channels
+- Load previous messages in channel
+- Send Messages to all subscribed clients on channel
 
+---
 ### Built with
 
-<div align="center">
-  <img height="80" src="https://cdn.rawgit.com/tylercrosse/gitter-clone/assets/src/client/assets/img/react.svg">
-  <img height="80" src="https://cdn.rawgit.com/tylercrosse/gitter-clone/assets/src/client/assets/img/redux.svg">
-  <img height="80" src="https://cdn.rawgit.com/tylercrosse/gitter-clone/assets/src/client/assets/img/webpack.svg">
-  <img height="80" src="https://cdn.rawgit.com/tylercrosse/gitter-clone/assets/src/client/assets/img/express.svg">
-  <img height="80" src="https://cdn.rawgit.com/tylercrosse/gitter-clone/assets/src/client/assets/img/mongodb.svg">
-  <img height="80" src="https://cdn.rawgit.com/tylercrosse/gitter-clone/assets/src/client/assets/img/jest.svg">
-  <img height="80" src="https://cdn.rawgit.com/tylercrosse/gitter-clone/assets/src/client/assets/img/semaphor.svg">
-  <img height="80" src="https://cdn.rawgit.com/tylercrosse/gitter-clone/assets/src/client/assets/img/digitalocean.svg">
-</div>
+##### <img height="20" src="https://cdn.rawgit.com/tylercrosse/gitter-clone/assets/src/client/assets/img/react.svg"> [React](https://facebook.github.io/react/)
+
+React makes it really easy to focus on the view in a declarative way. I like that it makes it easy to write composable, testable UI. Routing is handled by [react router](https://reacttraining.com/react-router/).
+
+##### <img height="20" src="https://cdn.rawgit.com/tylercrosse/gitter-clone/assets/src/client/assets/img/redux.svg"> [Redux](http://redux.js.org/)
+
+Redux is where the fun is at. Maintain a flat minimal state, with dictionary of normalized objects. I use [reselect](https://github.com/reactjs/reselect) to compute derived data. [Redux devtools](https://github.com/zalmoxisus/redux-devtools-extension) are also great, I kept it enabled on production for anyone wanting to easily take a look at the app's state.
 
+##### <img height="20" src="https://cdn.rawgit.com/tylercrosse/gitter-clone/assets/src/client/assets/img/webpack.svg"> [Webpack 2](https://webpack.js.org/)
+
+Fantastic code bundler once you get past the learning curve. I use it for a number of things including: transpile ES2015+ javascript to ES5 with [Babel](https://babeljs.io/), compile [Sass](http://sass-lang.com/) into css, optimize assets, hot reload code, build minimized split production code, + more.
+
+##### <img height="20" src="https://cdn.rawgit.com/tylercrosse/gitter-clone/assets/src/client/assets/img/express.svg"> [Express](https://expressjs.com/)
+
+It's nice to have JS everywhere. Express is fast and minimal. The backend is pretty simple with a router, a few controllers, and basic db interactions. Logging handled by [winston](https://github.com/winstonjs/winston).
+
+##### <img height="20" src="https://cdn.rawgit.com/tylercrosse/gitter-clone/assets/src/client/assets/img/mongodb.svg"> [MongoDB](https://www.mongodb.com/)
+
+This project doesn't currently require a ton of data persistence. MongoDB + [Mongoose](http://mongoosejs.com/) make it easy to quickly update the Schema. If the project continues to grow I will probably switch to a relational DB. Also Mongo is still trendy.
+
+##### <img height="20" src="https://cdn.rawgit.com/tylercrosse/gitter-clone/assets/src/client/assets/img/jest.svg"> [Jest](http://facebook.github.io/jest/)
+
+Unit tests run by Jest. If you haven't seen Jest recently, you should take another look. [Enzyme](https://github.com/airbnb/enzyme) is used for React support and [SuperTest](https://github.com/visionmedia/supertest) is used for HTTP assertions. [Enzyme-to-JSON](https://github.com/adriantoine/enzyme-to-json) is also great and worth checking out in conjunction with the other test utilities.
+
+##### <img height="20" src="https://cdn.rawgit.com/tylercrosse/gitter-clone/assets/src/client/assets/img/semaphor.svg"> [SemaphoreCI](https://semaphoreci.com/)
+
+Continuous integration handled by the super fast SemaphoreCI. Passing merges to master are auto deployed with help from [pm2](http://pm2.keymetrics.io/).
+
+##### <img height="20" src="https://cdn.rawgit.com/tylercrosse/gitter-clone/assets/src/client/assets/img/digitalocean.svg"> [Digital Ocean](https://www.digitalocean.com/)
+
+Application hosted on Ubuntu Digital Ocean droplet. SSH is fun!
+
+---
 ### Setup
 
 If you don't have [yarn](https://yarnpkg.com/en/) commands can be run with `npm`. First, clone and cd into the repo and install the dependencies.
@@ -41,16 +69,21 @@ $ yarn install
 
 Additional commands:
 ##### `yarn dev`
-- Start development server on 127.0.0.1:3333
+- Start development server on `127.0.0.1:3333`
 
 ##### `yarn build`
 - Build a production version of the app.
 
 ##### `yarn start`
-- Start production server on 127.0.0.1:3333 to serve built app. Requires the build command to have already been run.
+- Start production server on `127.0.0.1:3333` to serve built app. Requires the build command to have already been run.
 
 ##### `yarn test`
 - Run all of the projects tests using jest.
 
 ##### `yarn lint`
 - Lint all of the projects javascript files using eslint.
+
+---
+### Contributing
+
+Thank you for your interest! Unfortunately, I'm not currently taking contributions.
diff --git a/config/webpack.config.dev.js b/config/webpack.config.dev.js
index 3e83a12..449d17a 100644
--- a/config/webpack.config.dev.js
+++ b/config/webpack.config.dev.js
@@ -63,15 +63,24 @@ module.exports = merge(config, {
         },
         include: [path.resolve(__dirname, '../src')]
       }, {
-        test: /\.css?$/,
-        loaders: ['style-loader', 'raw-loader']
-      }, {
+      //   test: /\.css?$/,
+      //   loaders: ['style-loader', 'raw-loader']
+      // }, {
         test: /\.scss$/,
-        use : [
+        loaders : [
           {
             loader: 'style-loader'
           }, {
             loader: 'css-loader',
+          }, {
+            loader: 'postcss-loader',
+            options: {
+              plugins() {
+                return [
+                  require('autoprefixer')
+                ]
+              }
+            }
           }, {
             loader: 'resolve-url-loader'
           }, {
diff --git a/config/webpack.config.prod.js b/config/webpack.config.prod.js
index a3a4e2e..7ce7def 100644
--- a/config/webpack.config.prod.js
+++ b/config/webpack.config.prod.js
@@ -79,6 +79,15 @@ module.exports = merge(config, {
           use: [
             {
               loader: 'css-loader',
+            }, {
+              loader: 'postcss-loader',
+              options: {
+                plugins() {
+                  return [
+                    require('autoprefixer')
+                  ]
+                }
+              }
             }, {
               loader: 'resolve-url-loader'
             }, {
diff --git a/package.json b/package.json
index 3ed1647..215bc7b 100644
--- a/package.json
+++ b/package.json
@@ -54,7 +54,7 @@
     "winston": "^2.3.1"
   },
   "devDependencies": {
-    "autoprefixer": "^6.7.6",
+    "autoprefixer": "^6.7.7",
     "babel-cli": "^6.22.2",
     "babel-core": "^6.21.0",
     "babel-eslint": "^7.1.1",
diff --git a/src/client/components/chatmain/chatmain.scss b/src/client/components/chatmain/chatmain.scss
index 7ff9952..a435fdb 100644
--- a/src/client/components/chatmain/chatmain.scss
+++ b/src/client/components/chatmain/chatmain.scss
@@ -1,7 +1,7 @@
 @import '../../mixins/_variables.scss';
 
 .loading-container {
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: $trans-black5;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -14,8 +14,8 @@
     width: 80px;
     height: 80px;
     border-radius: 100%;
-    border: 10px solid rgba(255, 255, 255, 0.2);
-    border-top-color: #FFF;
+    border: 10px solid $trans-white2;
+    border-top-color: $white;
     animation: spin 1s infinite linear;
   }
 
@@ -66,7 +66,7 @@
   flex-shrink: 0;
   display: flex;
   width: 70px;
-  border-left: 1px solid #f1f1f1;
+  border-left: 1px solid $seashell;
 
   .roster {
     list-style: none;
@@ -87,8 +87,8 @@
   }
 
   .status {
-    background-color: #fff;
-    box-shadow: inset 0 0 0 2px #fcb316;
+    background-color: $white;
+    box-shadow: inset 0 0 0 2px $supernova;
     position: absolute;
     top: 5px;
     left: -6px;
@@ -98,7 +98,7 @@
     justify-content: center;
     width: 7px;
     height: 7px;
-    border: 2px solid white;
+    border: 2px solid $white;
     border-radius: 80px;
     box-sizing: content-box;
   }
@@ -121,7 +121,7 @@
     padding-right: 18px;
 
     img {
-      border: 3px solid white;
+      border: 3px solid $white;
       border-radius: 4px;
     }
   }
@@ -132,7 +132,7 @@
     overflow: hidden;
     display: inline-block;
     max-width: 100%;
-    color: white;
+    color: $white;
     font-size: 24px;
     line-height: 40px;
     font-weight: 300;
@@ -140,7 +140,7 @@
   }
 
   .chat-user-avatar {
-    border-left: 1px solid rgba(0, 0, 0, 0.1);
+    border-left: 1px solid $trans-black1;
     padding: 8px 0 8px 19px;
     margin-right: 19px;
   }
@@ -164,7 +164,7 @@
   overflow-y: auto;
   flex-grow: 1;
   flex-shrink: 1;
-  background-color: #fdfdfd;
+  background-color: $romance;
 
   .chat-item {
     transition: background-color 0.2s linear;
@@ -387,7 +387,7 @@
 
 .chat-input {
   align-self: flex-end;
-  background-color: #fdfdfd;
+  background-color: $romance;
   flex-shrink: 0;
   width: 100%;
   border-top: 1px solid rgba(0, 0, 0, 0.05);
@@ -414,11 +414,11 @@
     min-height: 44px;
     margin: 0;
     padding: 0;
-    background-color: #fff;
+    background-color: $white;
     box-shadow: none;
     border: 0;
     outline: none;
-    color: black;
+    color: $black;
     font-size: 1em;
     line-height: 1.38em;
     resize: none;
@@ -428,10 +428,11 @@
     position: absolute;
     right: 0;
     top: 0;
-    height: 50px;
+    height: 42px;
     background-color: $maroon;
-    color: white;
+    color: $white;
     border-radius: 4px;
+    margin-right: 4px;
     border: 0;
   }
 }
@@ -447,8 +448,8 @@
   text-decoration: none;
   border: none;
   border-radius: 6px;
-  background: #ea9448;
-  color: #fff;
+  background: $sea-buckthorn;
+  color: $white;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -462,11 +463,11 @@
   box-sizing: border-box;
   display: inline-block;
   padding: 9.6px 42px;
-  background-color: #46bc99;
+  background-color: $puerto-rico;
   border: none;
   border-radius: 6px;
   outline: none;
-  color: #ffffff;
+  color: $white;
   text-transform: uppercase;
   letter-spacing: 0.1em;
   text-align: center;
diff --git a/src/client/components/chatmenu/ChatMenu.jsx b/src/client/components/chatmenu/ChatMenu.jsx
index 6be1080..e6da959 100644
--- a/src/client/components/chatmenu/ChatMenu.jsx
+++ b/src/client/components/chatmenu/ChatMenu.jsx
@@ -1,5 +1,6 @@
 import React       from 'react';
 import { connect } from 'react-redux';
+import { Link }    from 'react-router';
 import {
   openCreateRoomModal,
   closeModal,
@@ -40,9 +41,14 @@ export class ChatMenu extends React.Component {
           <nav className="minibar">
             <div className="minibar-inner">
               <ul>
-                <li className="minibar-convos">G</li>
+                <li className="minibar-convos">
+                  <Link
+                  to={'/'}
+                  className="minibar-button"
+                  >G</Link>
+                </li>
                 <li className="minibar-search">
-                  <button className="minibar-button" onClick={this.handleMinibarButtonClick}>
+                  <button className="minibar-button minibar-button-search" onClick={this.handleMinibarButtonClick}>
                     Q
                   </button>
                 </li>
diff --git a/src/client/components/chatmenu/ChatMenu.spec.js b/src/client/components/chatmenu/ChatMenu.spec.js
index aeb440b..3802bb9 100644
--- a/src/client/components/chatmenu/ChatMenu.spec.js
+++ b/src/client/components/chatmenu/ChatMenu.spec.js
@@ -44,9 +44,9 @@ describe('<ChatMenu />', () => {
     const { component } = setup();
     const wrapper = mount(component);
     expect(wrapper.state().active).toBeFalsy();
-    wrapper.find('.minibar-button').simulate('click');
+    wrapper.find('.minibar-button-search').simulate('click');
     expect(wrapper.state().active).toBeTruthy();
-    wrapper.find('.minibar-button').simulate('click');
+    wrapper.find('.minibar-button-search').simulate('click');
     expect(wrapper.state().active).toBeFalsy();
   });
 
@@ -54,7 +54,7 @@ describe('<ChatMenu />', () => {
     const { component } = setup();
     const wrapper = mount(component);
     expect(wrapper.state().active).toBeFalsy();
-    wrapper.find('.minibar-button').simulate('click');
+    wrapper.find('.minibar-button-search').simulate('click');
     expect(wrapper.state().active).toBeTruthy();
     // trouble simulating clientX on synthetic mouseLeave event
     wrapper.instance().handleMouseLeave({clientX: 400});
@@ -67,7 +67,7 @@ describe('<ChatMenu />', () => {
     expect(wrapper.state().active).toBeFalsy();
     expect(wrapper.find('.chat-menu-panel').hasClass('active'))
       .toBeFalsy();
-    wrapper.find('.minibar-button').simulate('click');
+    wrapper.find('.minibar-button-search').simulate('click');
     expect(wrapper.state().active).toBeTruthy();
     expect(wrapper.find('.chat-menu-panel').hasClass('active'))
       .toBeTruthy();
diff --git a/src/client/components/chatmenu/chatmenu.scss b/src/client/components/chatmenu/chatmenu.scss
index b0b0810..3d5d978 100644
--- a/src/client/components/chatmenu/chatmenu.scss
+++ b/src/client/components/chatmenu/chatmenu.scss
@@ -4,8 +4,8 @@
   position: relative;
   height: 100vh;
   z-index: 101;
-  border-right: 1px solid #f7f6f6;
-  width: 75px;
+  border-right: 1px solid $black-haze;
+  min-width: 75px;
 
   .chat-menu-container {
     height: 100%;
@@ -18,7 +18,7 @@
     z-index: 2;
     height: 100%;
     overflow: hidden;
-    border-right: 1px solid #f1f1f1;
+    border-right: 1px solid $seashell;
 
     &::before {
       content: ' ';
@@ -62,7 +62,10 @@
     }
 
     .minibar-button {
-      display: block;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
       width: 100%;
       height: 100%;
       padding: 0;
@@ -126,8 +129,8 @@
   left: 0;
   height: 100%;
   padding-left: 100%;
-  border-right: 1px solid #f1f1f1;
-  background-color: #fdfdfd;
+  border-right: 1px solid $seashell;
+  background-color: $romance;
   transition: transform 0.1s linear 0.05s;
   transform: translateX(-100%);
   z-index: 1;
@@ -192,7 +195,7 @@
         text-transform: uppercase;
         padding: 0 0 0 2.6rem;
         line-height: 65px;
-        color: #a2a3a3;
+        color: $grey-chateau;
       }
     }
   }
@@ -226,7 +229,7 @@
 
     align-items: center;
     bottom: 0;
-    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), #fdfdfd 35%);
+    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), $romance 35%);
     display: flex;
     flex-direction: row-reverse;
     font-size: 16px;
@@ -248,12 +251,12 @@
     background-color: transparent;
     border-radius: 0.5em;
     outline: none;
-    color: #46bc99;
+    color: $puerto-rico;
     text-transform: uppercase;
     letter-spacing: 0.1em;
     text-align: center;
     transition: background-color 0.1s ease, border-color 0.1s ease;
-    border: 1px solid #46bc99;
+    border: 1px solid $puerto-rico;
   }
 
   .panel-content {
@@ -276,7 +279,7 @@
     height: 38px;
     max-height: 38px;
     // opacity: 0;
-    color: #fff;
+    color: $white;
     transition: height 0.2s ease-in, max-height 0.2s ease-in, opacity 0.2s ease-in;
   }
 
@@ -291,8 +294,8 @@
 
     &:hover {
       cursor: pointer;
-      background-color: #f1f2f2;
-      color: black;
+      background-color: $seashell;
+      color: $black;
       outline: none;
     }
   }
@@ -300,7 +303,7 @@
   .convo-item-avatar {
     height: 22px;
     width: 22px;
-    background-color: #fff;
+    background-color: $white;
     border-radius: 2px;
     margin-right: 10px;
     margin-left: 13px;
@@ -313,7 +316,7 @@
     height: 38px;
     max-height: 38px;
     overflow: hidden;
-    color: #646565;
+    color: $storm-burst;
     font-size: 14px;
     font-weight: 400;
     line-height: 38px;
@@ -324,7 +327,7 @@
     margin: 0;
 
     &:hover {
-      color: black;
+      color: $black;
       font-weight: 500;
     }
   }
diff --git a/src/client/components/explore/explore.scss b/src/client/components/explore/explore.scss
index 33fafed..43dec48 100644
--- a/src/client/components/explore/explore.scss
+++ b/src/client/components/explore/explore.scss
@@ -1,13 +1,15 @@
+@import '../../mixins/_variables.scss';
+
 .explore {
   width: 100%;
 
   .explore-header {
     background: url('../../assets/img/cloneBanner.jpg') no-repeat center center;
     background-size: cover;
-    background-color: #512e92;
+    background-color: $gigas;
     height: 16em;
     position: relative;
-    color: white;
+    color: $white;
 
     h1 {
       position: absolute;
@@ -30,7 +32,7 @@
   }
 
   .explore-header-nav {
-    background-color: rgba(255,255,255,.3);
+    background-color: $trans-white3;
     width: 100%;
     height: 32px;
     margin-top: 64px;
@@ -47,7 +49,7 @@
 
     h3 {
       font-weight: 400;
-      color: rgb(188, 188, 188);
+      color: $french-grey;
     }
   }
 
@@ -55,7 +57,7 @@
     flex: 1;
     padding-top: calc(15px);
     padding-bottom: calc(15px);
-    background-color: #f1f1f1;
+    background-color: $seashell;
     height: 100%;
   }
 
@@ -81,9 +83,9 @@
     display: flex;
     flex-direction: column;
     opacity: 0.7;
-    background-color: #fff;
+    background-color: $white;
     border-radius: 3px;
-    color: #333;
+    color: $mine-shaft;
     transition: transform 0.2s ease, max-width 0.2s ease, margin 0.2s ease, opacity 0.2s ease;
 
     &:hover {
@@ -126,7 +128,7 @@
     justify-content: space-between;
     align-items: center;
     padding: 7.5px 10px;
-    border-top: 1px dotted rgb(242, 240, 237);
+    border-top: 1px dotted $isabelline;
   }
 
   .convo-card-info {
@@ -153,11 +155,11 @@
       line-height: 19px;
       box-sizing: border-box;
       display: inline-block;
-      background-color: #f68d42;
+      background-color: $sea-buckthorn;
       border: none;
       border-radius: 6px;
       outline: none;
-      color: #fff;
+      color: $white;
       text-transform: uppercase;
       letter-spacing: 1.2px;
       text-align: center;
diff --git a/src/client/components/welcome/Welcome.jsx b/src/client/components/welcome/Welcome.jsx
index f00455b..1e85b6f 100644
--- a/src/client/components/welcome/Welcome.jsx
+++ b/src/client/components/welcome/Welcome.jsx
@@ -1,11 +1,11 @@
 import React       from 'react';
 import { connect } from 'react-redux';
+import { Link }    from 'react-router';
 import {
   signIn,
   openSignInModal,
   closeModal }     from '../../actions/';
 import SignInModal from '../SignInModal.jsx';
-import                  './welcome.scss';
 import reactLogoSrc        from '../../assets/img/react.svg';
 import reduxLogoSrc        from '../../assets/img/redux.svg';
 import jestLogoSrc         from '../../assets/img/jest.svg';
@@ -14,6 +14,7 @@ import expressLogoSrc      from '../../assets/img/express.svg';
 import mongodbLogoSrc      from '../../assets/img/mongodb.svg';
 import semaphorLogoSrc     from '../../assets/img/semaphor.svg';
 import digitaloceanLogoSrc from '../../assets/img/digitalocean.svg';
+import                          './welcome.scss';
 
 export const Welcome = (props) => (
   <div className="welcome">
@@ -37,9 +38,9 @@ export const Welcome = (props) => (
           href="https://gitter.im/"
           target="_blank"
           rel="noreferrer noopener">Go to real Gitter.im</a>
-          <a
+          <Link
           className="intro-panel-button button-subdued"
-          href="/explore">Explore the clone</a>
+          to="/explore">Explore the clone</Link>
         </div>
         <ul className="mini-features-list">
           <li>
@@ -58,13 +59,8 @@ export const Welcome = (props) => (
       </div>
     </header>
     <section className="tech-panel">
-      <h1>Check out the real Gitter.im</h1>
-      <p>This is just a fan application. For the real Gitter messaging applcation go to
-        <a
-        href="https://gitter.im/"
-        target="_blank"
-        rel="noreferrer noopener"> gitter.im</a>.</p>
       <div className="wrap">
+        <h1>Built with</h1>
         <ul className="tech-icons">
           <li>
             <img className="react-logo"src={reactLogoSrc} alt="react logo" />
@@ -92,7 +88,7 @@ export const Welcome = (props) => (
           </li>
           <li>
             <img className="semaphor-logo"src={semaphorLogoSrc} alt="semaphor logo" />
-            <figcaption>SemaphorCI</figcaption>
+            <figcaption>SemaphoreCI</figcaption>
           </li>
           <li>
             <img className="digitalocean-logo"src={digitaloceanLogoSrc} alt="digitalocean logo" />
@@ -101,6 +97,16 @@ export const Welcome = (props) => (
         </ul>
       </div>
     </section>
+    <section className="endoresment-panel">
+      <div className="wrap">
+        <h1>Check out the real Gitter.im</h1>
+        <p>This is just a fan application. For the real Gitter messaging applcation go to
+          <a
+          href="https://gitter.im/"
+          target="_blank"
+          rel="noreferrer noopener"> gitter.im</a></p>
+      </div>
+    </section>
     <footer className="bottom-panel">
       Built with <span className="heart">&lt;3</span> by
       <a
diff --git a/src/client/components/welcome/welcome.scss b/src/client/components/welcome/welcome.scss
index acc723c..c25d7ad 100644
--- a/src/client/components/welcome/welcome.scss
+++ b/src/client/components/welcome/welcome.scss
@@ -1,11 +1,13 @@
+@import '../../mixins/_variables.scss';
+
 .button-caribbean {
-  background-color: #46bc99;
+  background-color: $puerto-rico;
   border: none;
 }
 
 .button-subdued {
   background-color: transparent;
-  border: 1px solid #fffefe;
+  border: 1px solid $romance;
 }
 
 .welcome {
@@ -15,6 +17,22 @@
   margin: 0;
   text-align: center;
 
+  h1 {
+    position: relative;
+
+    &::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      bottom: -15px;
+      display: block;
+      width: 60px;
+      height: 3px;
+      background: currentColor;
+      opacity: 0.1;
+    }
+  }
+
   .wrap {
     margin: 0 auto;
     text-align: left;
@@ -24,21 +42,22 @@
   .intro-panel {
     background: url('../../assets/img/cloneBanner.jpg') no-repeat center center;
     background-size: cover;
-    background-color: #512e92;
+    background-color: $gigas;
     position: relative;
     overflow: hidden;
     padding: 50px 0;
-    color: rgba(255, 255, 255, 0.75);
-    text-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
+    color: $trans-white75;
+    text-shadow: 0 0 4px $trans-black2;
 
     h1 {
-      // text-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
+      // text-shadow: 0 0 8px $trans-black2;
       margin-top: 100px;
       margin-bottom: 60px;
       font-size: 60px;
       line-height: 72px;
       letter-spacing: -1px;
-      color: #fff;
+      color: $white;
+      position: relative;
     }
 
     h2 {
@@ -46,7 +65,7 @@
       font-size: 24px;
       line-height: 28px;
       letter-spacing: normal;
-      color: #fff;
+      color: $white;
       font-weight: 400;
     }
 
@@ -96,7 +115,7 @@
       border-radius: 8px;
       transition: background-color 0.1s ease, border-color 0.1s ease;
       text-align: center;
-      color: #fff;
+      color: $white;
     }
   }
 
@@ -119,7 +138,18 @@
     float: right;
     margin: -7px 0 0;
     line-height: 1;
-    background: rgba(0, 0, 0, 0.2);
+    background: $trans-black2;
+  }
+
+  .tech-panel {
+    color: $flint;
+    padding: 50px 0;
+
+    h1 {
+      margin: 32px 0 25px;
+      font-size: 36px;
+      font-weight: 400;
+    }
   }
 
   .tech-icons {
@@ -137,23 +167,41 @@
     img {
       max-width: 60px;
       height: 60px;
-      // #888888
     }
 
     .react-logo {
-      fill: #61dafb;
+      fill: $react;
     }
 
     .redux-logo {
-      fill: #764abc;
+      fill: $redux;
     }
 
     .mongodb-logo {
-      fill: #69b23f;
+      fill: $mongodb;
     }
 
     .jest-logo {
-      fill: #c53c14;
+      fill: $jest;
+    }
+  }
+
+  .endoresment-panel {
+    background: $sea-buckthorn;
+    color: $white;
+    padding: 50px 0;
+
+    h1 {
+      font-size: 36px;
+    }
+
+    a {
+      color: $white;
+    }
+
+    p {
+      font-size: 21px;
+      font-weight: 300;
     }
   }
 
@@ -162,8 +210,8 @@
     padding: 100px 0 40px;
     font-size: 16px;
     line-height: 26px;
-    color: #918b80;
-    background: #f1f0ed;
+    color: $heathered-grey;
+    background: $gallery;
     text-align: center;
 
     .heart {
@@ -181,7 +229,7 @@
       transition: color 0.2s ease-in;
 
       &:hover {
-        color: #ea9448;
+        color: $sea-buckthorn;
       }
     }
 
@@ -190,11 +238,11 @@
       float: none;
       margin: 0 15px;
       text-align: center;
-      color: #aeaca5;
+      color: $silver-chalice;
     }
   }
 
   a {
-    color: #aeaca5;
+    color: $silver-chalice;
   }
 }
diff --git a/src/client/global.scss b/src/client/global.scss
index 6ee6ee2..e582afb 100644
--- a/src/client/global.scss
+++ b/src/client/global.scss
@@ -10,7 +10,7 @@
 body {
   font-family: $primary-font;
   font-weight: 400;
-  color: #333;
+  color: $mine-shaft;
   line-height: 1.4;
   max-width: 100vw;
   overflow: auto;
@@ -21,24 +21,24 @@ body {
 }
 
 .scroller::-webkit-scrollbar-track {
-  // background-color: rgba(200, 200, 200, 0.1);
+  // background-color: $trans-lightgrey;
   background-color: transparent;
 }
 
 .scroller::-webkit-scrollbar-thumb {
   border-radius: 10px;
-  background-color: rgba(100, 100, 100, 0.2);
+  background-color: $trans-darkgrey2;
   margin-right: 1px;
   -webkit-transition: opacity 300ms ease-in-out;
   transition: opacity 300ms ease-in-out;
 }
 
 .scroller:hover::-webkit-scrollbar-thumb {
-  background-color: rgba(100, 100, 100, 0.4);
+  background-color: $trans-darkgrey4;
 }
 
 .scroller::-webkit-scrollbar-thumb:window-inactive {
-  background-color: rgba(0, 0, 0, 0.1);
+  background-color: $trans-white2;
 }
 
 .modal-overlay {
@@ -48,7 +48,7 @@ body {
   bottom: 0;
   left: 0;
   z-index: 1050;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: $trans-black5;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -63,10 +63,10 @@ body {
     position: relative;
     width: 620px;
     max-width: 95%;
-    background: white;
+    background: $white;
     border-radius: 5px;
     text-align: left;
-    box-shadow: 0 0 0.4em rgba(0, 0, 0, 0.3);
+    box-shadow: 0 0 0.4em $trans-black3;
     transition: box-shadow 0.2s linear;
   }
 
@@ -79,7 +79,7 @@ body {
     width: 100%;
     max-width: 100%;
     padding: 16px;
-    background: white;
+    background: $white;
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
   }
@@ -96,15 +96,20 @@ body {
   .modal-close {
     margin-left: auto;
     font-size: 1.2em;
-    color: white;
-    transition: color 0.2s linear;
-    background: #949494;
+    color: $white;
+    background: $mountain-mist;
     border-radius: 100%;
     height: 20px;
     width: 20px;
     text-align: center;
-    line-height: 22px;
-    vertical-align: middle;
+    line-height: 0;
+    border: 0;
+    transition: background 0.2s linear;
+
+    &:hover {
+      cursor: pointer;
+      background: $gondola;
+    }
   }
 
   .modal-body {
@@ -112,7 +117,7 @@ body {
     box-sizing: border-box;
     width: 100%;
     padding: 1em;
-    background: #f2f0ed;
+    background: $isabelline;
   }
 
   .modal-footer {
@@ -124,12 +129,12 @@ body {
     display: flex;
     width: 100%;
     padding: 1em;
-    background: white;
+    background: $white;
     border-bottom-left-radius: 0.5rem;
     border-bottom-right-radius: 0.5rem;
   }
 }
 
 .validation-error {
-  color: red;
+  color: $red;
 }
diff --git a/src/client/mixins/_variables.scss b/src/client/mixins/_variables.scss
index 63c9e1b..a582b44 100644
--- a/src/client/mixins/_variables.scss
+++ b/src/client/mixins/_variables.scss
@@ -1,7 +1,42 @@
+$black: #000;
+$gondola: #3a3133;
+$mine-shaft: #333;
+$trans-black5: rgba($black, 0.5);
+$trans-black3: rgba($black, 0.3);
+$trans-black2: rgba($black, 0.2);
+$trans-black1: rgba($black, 0.1);
+$trans-darkgrey4: rgba(100, 100, 100, 0.4);
+$trans-darkgrey2: rgba(100, 100, 100, 0.2);
+$trans-lightgrey: rgba(200, 200, 200, 0.1);
+$storm-burst: #646565;
+$flint: #726c61;
+$heathered-grey: #918b81;
+$mountain-mist: #949494;
+$grey-chateau: #a2a3a3;
+$silver-chalice: #aeaca5;
+$french-grey: #bcbcbc;
+$white: #fff;
+$trans-white2: rgba($white, 0.2);
+$trans-white3: rgba($white, 0.3);
+$trans-white75: rgba($white, 0.75);
+$gallery: #f1f0ed;
+$seashell: #f1f1f1;
+$romance: #fdfdfd;
+$black-haze: #f7f6f6;
+$isabelline: #f2f0ed;
+$puerto-rico: #46bc99;
 $london: #ba9cc3;
 $violet: #753a88;
+$gigas: #513290;
 $maroon: #cc2b5e;
 $razz: #ed1965;
+$supernova: #fcb316;
+$sea-buckthorn: #e89450;
+$red: #fc0d1b;
+$react: #61dafb;
+$redux: #764abc;
+$mongodb: #69b23f;
+$jest: #c53c14;
 
 @font-face {
   font-family: 'Source Sans Pro';
diff --git a/yarn.lock b/yarn.lock
index 2a70a1e..0ff1f69 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -263,7 +263,7 @@ atob@~1.1.0:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/atob/-/atob-1.1.3.tgz#95f13629b12c3a51a5d215abdce2aa9f32f80773"
 
-autoprefixer@^6.3.1, autoprefixer@^6.7.6:
+autoprefixer@^6.3.1:
   version "6.7.6"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.7.6.tgz#00f05656c7ef73de9d2fd9b4668f6ef6905a855a"
   dependencies:
@@ -274,6 +274,17 @@ autoprefixer@^6.3.1, autoprefixer@^6.7.6:
     postcss "^5.2.15"
     postcss-value-parser "^3.2.3"
 
+autoprefixer@^6.7.7:
+  version "6.7.7"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.7.7.tgz#1dbd1c835658e35ce3f9984099db00585c782014"
+  dependencies:
+    browserslist "^1.7.6"
+    caniuse-db "^1.0.30000634"
+    normalize-range "^0.1.2"
+    num2fraction "^1.2.2"
+    postcss "^5.2.16"
+    postcss-value-parser "^3.2.3"
+
 aws-sign2@~0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.6.0.tgz#14342dd38dbcc94d0e5b87d763cd63612c0e794f"
@@ -1375,7 +1386,7 @@ browserify-zlib@^0.1.4:
   dependencies:
     pako "~0.2.0"
 
-browserslist@^1.0.1, browserslist@^1.5.2, browserslist@^1.7.5:
+browserslist@^1.0.1, browserslist@^1.5.2, browserslist@^1.7.5, browserslist@^1.7.6:
   version "1.7.6"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-1.7.6.tgz#af98589ce6e7ab09618d29451faacb81220bd3ba"
   dependencies:
@@ -1492,6 +1503,10 @@ caniuse-db@^1.0.30000346, caniuse-db@^1.0.30000628, caniuse-db@^1.0.30000631:
   version "1.0.30000631"
   resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000631.tgz#8aa6f65cff452c4aba1c2aaa1e724102fbb9114f"
 
+caniuse-db@^1.0.30000634:
+  version "1.0.30000634"
+  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000634.tgz#439f4b95e715b1fd105196d40c681edd7122e622"
+
 capture-stack-trace@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/capture-stack-trace/-/capture-stack-trace-1.0.0.tgz#4a6fa07399c26bba47f0b2496b4d0fb408c5550d"
@@ -5453,6 +5468,15 @@ postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0
     source-map "^0.5.6"
     supports-color "^3.2.3"
 
+postcss@^5.2.16:
+  version "5.2.16"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.16.tgz#732b3100000f9ff8379a48a53839ed097376ad57"
+  dependencies:
+    chalk "^1.1.3"
+    js-base64 "^2.1.9"
+    source-map "^0.5.6"
+    supports-color "^3.2.3"
+
 pre-commit@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/pre-commit/-/pre-commit-1.2.2.tgz#dbcee0ee9de7235e57f79c56d7ce94641a69eec6"