diff --git a/src/client/mixins.less b/src/client/mixins.less
index 0818b331..2da2fc5e 100644
--- a/src/client/mixins.less
+++ b/src/client/mixins.less
@@ -3,13 +3,23 @@
         @rules();
     }
 }
+.tablet(@rules) {
+    @media (max-width: 1000px) {
+        @rules();
+    }
+}
 
 .mobile(@rules) {
-    @media (max-width: 580px) {
+    @media (max-width: 650px) {
         @rules();
     }
 }
 
+:root {
+    --sp-aquamarine: #50E3C2;
+    --sp-gray: #777777;
+    --sp-silver: #CCCCCC;
+}
 .editor-button {
     .mobile({
         font-size: 14 !important;
@@ -18,7 +28,7 @@
     padding: 5px 15px 5px 15px;
     border-radius: 50px;
     /* border: 1px solid lightgrey; */
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
+    box-shadow: 0.1px 1px 3px 0.1px rgba(0, 0, 0, 0.15);
     margin-bottom: 5px;
     transition: color 300ms ease-in-out, box-shadow 300ms ease-in-out ;
     color: #777;
@@ -26,7 +36,7 @@
     background-repeat: no-repeat, no-repeat;
     &:hover {
         color: #000;
-        box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
+        box-shadow: 0.1px 1px 4px 0.1px rgba(0, 0, 0, 0.2);
     }
 }
 
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 33db2dc5..8c750473 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -1,44 +1,40 @@
 <template>
     <div>
-        <div class="nav-spacer" v-if="!embedded" ></div>
+        <!------NAV BAR -------->
+        <div class="nav-spacer" v-if="!embedded" >
         <div v-if="!embedded" class="nav-bar" @click.stop="">
+        <!-----------CENTER ---------->
+            <h1 v-if="!isMobile" class="nav-text">{{title}}</h1>
+            <!----------NAVIGATION LEFT--------->
             <div class="nav-left">
-                <router-link to="/"><h2 v-if="!isMobile" class="logo-text">SP</h2></router-link>
-                <!-- <input v-if="isMobile" type="text" class="search w-input" maxlength="256" name="search" data-name="search" placeholder="Search..." id="search"> -->
-                <!-- <img v-if="!isMobile" class="logo" src="/images/sp_logo.png" /> -->
+                <router-link to="/" v-if="!isMobile" class="logo-text"  active-class="active"> SP</router-link> 
+                <!-- <input v-if="isMobile" type="text" class="search w-input" maxlength="256" name="search" data-name="search" placeholder="Search..." id="search"> --><!-- <img v-if="!isMobile" class="logo" src="/images/sp_logo.png" /> -->
+                <router-link to="/" class="link" v-bind:class="{ mobile: isMobile }"  active-class="active" exact>Home</router-link>
+                <router-link to="/about" class="link" active-class="active" v-bind:class="{ mobile: isMobile }">About</router-link>
+                <a class="link"  target="_blank" href="https://shader-park-docs.netlify.com/designers/" v-bind:class="{ mobile: isMobile }"  active-class="active">Designers</a>
             </div>
-            <h1 v-if="!isMobile" class="nav-text">{{title}}</h1>
+        
+            <!-------NAVIGATION RIGHT -------->
             <div class="nav-right" v-bind:class="{ mobile: isMobile }" >  
-                
-                <router-link to="/" class="link" v-bind:class="{ mobile: isMobile }"  active-class="active" exact>Home</router-link>
-                <!-- <router-link to="/examples" class="link" active-class="active">Examples</router-link> -->
-                <a class="link"  target="_blank" href="https://shader-park-docs.netlify.com/references-js/" v-bind:class="{ mobile: isMobile }"  active-class="active">References</a>
                 <router-link v-if="!isMobile" to="/new" class="link" active-class="active">New</router-link>
-                <router-link to="/about" class="link" active-class="active" v-bind:class="{ mobile: isMobile }">About</router-link>
-                <a class="link" v-on:click="signIn" v-if="!user" v-bind:class="{ active: displayLogin, mobile: isMobile }">Sign In</a>
-                
-                <!-- <router-link to="/sign-in" class="link" v-if="!user" active-class="active">Sign In</router-link> -->
-                <div class="dropDownContainer" v-on:mouseover="setProfileDropDown(true)" v-on:mouseleave="setProfileDropDown(false)"> 
-                    <router-link 
-                        ref="profile" 
-                        v-bind:data-badge="profileBadgeCount" to="/profile" 
-                        v-bind:class="{ dynamicBadge: profileBadgeCount > 0, mobile: isMobile }" 
-                        class="link" v-if="user" 
-                        active-class="active">
-                        My Sculptures
-                        <span class="arrow"></span>
-                    </router-link>
-                                            
-                    <div v-show="showProfileDropDown" class="dropDown">
-                        <a class="link" v-on:click="signOut" v-bind:class="{ mobile: isMobile }"  v-if="user" active-class="active">Sign Out</a>
-                    </div>
-                </div>
+                <a class="link"  target="_blank" href="https://shader-park-docs.netlify.com/references-js/" v-bind:class="{ mobile: isMobile }"  active-class="active">References</a>
+                <router-link to="/examples" class="link" active-class="active">Examples</router-link> 
+            <!-------DROP DOWN ------->
+                        <a class="link" v-on:click="signIn" style="width:92px" v-if="!user" v-bind:class="{ active: displayLogin, mobile: isMobile }">Sign In</a>
+                        <!-- <router-link to="/sign-in" class="link" v-if="!user" active-class="active">Sign In</router-link> -->
+                        <div class="dropDownContainer" v-on:mouseover="setProfileDropDown(true)" v-on:mouseleave="setProfileDropDown(false)"> 
+                                <router-link ref="profile" v-bind:data-badge="profileBadgeCount" to="/profile" v-bind:class="{ dynamicBadge: profileBadgeCount > 0, mobile: isMobile }" class="link" v-if="user" active-class="active">My Sculptures<span class="arrow"></span></router-link>                      
+                                <div v-show="showProfileDropDown" class="dropDown"><a class="link" v-on:click="signOut" v-bind:class="{ mobile: isMobile }"  v-if="user" active-class="active link">Sign Out</a> </div>
+                        </div>
                 
             </div>
+        
+        </div>
         </div>
     </div>
 </template>
 
+
 <script>
 import firebase from "firebase/app";
 import CardModal from './CardModal.vue';
@@ -105,34 +101,25 @@ export default {
 };
 
 .dynamicBadge {
-  position:relative;
+    position:relative;
 }
 
 .dynamicBadge[data-badge]:after {
-  content:attr(data-badge);
-
-  position:absolute;
-  top:-15px;
-  right:-18px;
-
-  font-size:11px;
-  font-family:"Roboto","Helvetica","Arial",sans-serif;
-  font-weight:600;
-
-  text-align:center;
-  line-height:23px;
-
-  background:#50e3c2;
-  color:white;
-
-  width:22px;
-  height:22px;           
-
-  border-radius:50%;
-  /* box-shadow:1px 2px 5px #888; */
+    content:attr(data-badge);
+    position:absolute;
+    top:-15px;
+    right:-18px;
+    font-size:11px;
+    font-family:"Roboto","Helvetica","Arial",sans-serif;
+    font-weight:600;
+    text-align:center;
+    line-height:23px;
+    background:var(--sp-aquamarine);
+    color:var(--sp-white);
+    width:22px;
+    height:22px;           
+    border-radius:50%;
 }
-
-
 .logo {
     width: 50px;
     opacity: 0.5;
@@ -141,81 +128,88 @@ export default {
 .logo-text {
     opacity: 0.5;
     margin: 0px;
-    font-size: 27px;
-    margin-bottom: 3px;
-    .smallDesktop({
-        display:none;
+    font-size: 32px;
+    margin-right: 40px;
+    .mobile({
+        display:flex;
+        margin-bottom: 10px;
     });
 }
 
 .nav-spacer {
-    height: 10vh;
+    height: 10vw;
     width: 100vw;
-    .mobile({
-        max-height: 50px;
-    });
+    min-height: 145px;
+    
 }
 
 .nav-bar {
+    display: flex;
     position: fixed;
-    // position: fixed;
-    left: 0px;
-    top: 0px;
-    right: 0px;
-    height: 10vh;
-    min-height: 45px;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    align-items: center;
+    width: 100%;  
+    min-height: 85px;
+    padding: 30px 30px 30px 30px ;
+    background-color: var(--sp-white);
+    box-shadow: 0.5px 1px 3px 0.5px rgba(0, 0, 0, 0.15);
+    z-index: 102;
+    .tablet({
+    height: 130px;
+    });
     .mobile({
-        max-height: 50px;
+    height: 150px;
     });
-    // max-height: 80px;
-    padding: 0px 60px 25px;
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .15);
-    background-color: white;
-    z-index: 102;
-    
-    .nav-text {
+    .nav-text {    
+        font-size: 40px;
+        left: 45%;
+        position: absolute;
+        font-size: 20px;
+        font-weight:bold;
+        line-height: 0px;
+        font-weight: 400;
         .smallDesktop({
             display: none;
         });
-
-        .centerY();
-        left: 0px;
-        right: 0px;
-        z-index: 0;
-        margin-top: 0px;
-        margin-bottom: 0px;
-        
-        font-size: 19px;
-        line-height: 0px;
-        font-weight: 400;
-        text-align: center;
     }
     .nav-left {
-        .centerY();
-        left: 0px;
+        font-size: 14px !important;
         z-index: 1;
-        margin-left: 40px;
+        width: 50%;
+        .smallDesktop({
+            margin-bottom: 20px;
+        });
+        .tablet({
+            margin-bottom: 20px;
+        });
+        .mobile({
+            margin-bottom: 8px
+        });
+
     }    
     .nav-right {
-        .centerY();
-        position: absolute;
-        right: 0px;
+        font-size: 14px !important;
         z-index: 1;
+        .smallDesktop({
+            margin-bottom: 20px;
+            margin-top: 10px;
+        });
+        .tablet({
+            margin-bottom: 20px;
+        });
         .mobile({
-            font-size: 14px !important;
-            // left: 50%;
-            text-align: center;
-            width: calc(100vw - 10px);
-            // transform: translate(-50%, 0);
+            margin-top:0px;
+            font-size: 18px !important;
         });
     }  
+
     .link.active {
-        color: #000;
-        border-bottom: 2px solid #50e3c2 !important;
+        color: var(--sp-black);
+        border-bottom: 2px solid var(--sp-aquamarine) !important;
         -webkit-transition: border-color 300ms ease-in-out;
         transition: border-color 300ms ease-in-out;
     }
-    
 
     .search {
         width: 330px;
@@ -227,14 +221,12 @@ export default {
     .arrow {
         display: inline-block;
         vertical-align: middle;
-        margin-top: -1px;
-        margin-left: 6px;
-        margin-right: -14px;
+        margin: -1px -14px 0px 6px;
         width: 0;
         height: 0;
         border-left: 4px solid transparent;
         border-right: 4px solid transparent;
-        border-top: 5px solid #ccc;        
+        border-top: 5px solid var(--sp-silver);        
     }
     .dropDownContainer {
         display: inline-block;
@@ -243,8 +235,8 @@ export default {
             position: absolute;
             width: 144px;
             padding: 15px;
-            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .15);
-            background-color: white;
+            box-shadow: 0.1px 1px 3px 0.1px rgba(0, 0, 0, 0.15);
+            background-color: var(--sp-white);
             z-index: 103;
             top: 20;
             right: 25px;
@@ -261,11 +253,17 @@ export default {
     cursor: pointer;
     text-decoration: none;
     transition: color 300ms ease-in-out;
-    color: #777;
+    color: var(--sp-gray);
     -webkit-transition: color 300ms ease-in-out ;
     &:hover {
-        color: #000;
+        color: var(--sp-black);
     }  
+    .smallDesktop({
+        margin-right: 30px;
+    });
+    .tablet({
+        margin-right: 30px;
+    });
     .mobile({
         margin-right: 25px;
         font-size: 14px !important;
@@ -274,11 +272,11 @@ export default {
 
 .button {
     opacity: 1.0;
-    color: white;
+    color: var(--sp-white);
     padding: 11px 35px;
     border: 1px solid #dedede;
     border-radius: 4px;
-    background-color: #50e3c2;
+    background-color: var(--sp-aquamarine);
     font-size: 18px;
     font-weight: 200;
     letter-spacing: 1.1px;
@@ -286,11 +284,11 @@ export default {
     transition: opacity 300ms ease-in-out, color 300ms ease-in-out;
     
     &:hover {
-        color: black;
+        color: var(--sp-black);
     }
 
     &:disabled {
-        color: white;
+        color:var(--sp-white);
         opacity: 0.5;
     }