diff --git a/css/app.css b/css/app.css
index 5757e715..8f3b608a 100644
--- a/css/app.css
+++ b/css/app.css
@@ -45,24 +45,13 @@ ul {
     .sidebar__level-2--item.active {
       background-color: #555;
       color: #fff; }
-      .sidebar__level-2--item.active .fa-star,
-      .sidebar__level-2--item.active .fa-star-o {
-        display: none; }
+      .sidebar__level-2--item.active .fa-star {
+        color: #fff; }
       .sidebar__level-2--item.active:hover {
         background-color: #555; }
-        .sidebar__level-2--item.active:hover .fa-star,
-        .sidebar__level-2--item.active:hover .fa-star-o {
-          display: block;
-          color: #fff; }
-    .sidebar__level-2--item:hover .fa-star-o {
-      color: #000; }
-      .sidebar__level-2--item:hover .fa-star-o:hover {
-        color: #000; }
     .sidebar__level-2--item .fa.pull-right {
       position: relative;
       top: 2px; }
-    .sidebar__level-2--item .fa-star-o {
-      color: #f5f5f5; }
     .sidebar__level-2--item .fa-star {
       color: #666; }
 
@@ -117,24 +106,6 @@ ul {
       max-width: 100%;
       width: 98%; }
 
-.grip {
-  position: relative; }
-  .grip:before {
-    content: '';
-    display: none;
-    width: 5px;
-    height: 20px;
-    background-image: url(../images/grips/vertical_dark.png);
-    background-repeat: no-repeat;
-    position: absolute;
-    top: 50%;
-    left: 7px;
-    margin-top: -10px; }
-  .grip.btn-primary:before {
-    background-image: url(../images/grips/vertical.png); }
-  .grip:hover:before {
-    display: block; }
-
 .key-editor__popup {
   border: none;
   width: 0px;
@@ -144,11 +115,5 @@ ul {
   left: 50%;
   margin-left: -310px; }
 
-svg.uhk.faded #left-case,
-svg.uhk.faded #right-case {
-  fill: #555; }
-
-svg.uhk.faded rect {
-  fill: #666; }
-  svg.uhk.faded rect.active {
-    fill: #000; }
+svg.uhk rect.active {
+  fill: #337ab7; }
diff --git a/style.css b/css/style.css
similarity index 53%
rename from style.css
rename to css/style.css
index a46aae4c..9cc9bf9a 100644
--- a/style.css
+++ b/css/style.css
@@ -1,32 +1,23 @@
-h1 {
-  margin-bottom: 3rem;
-}
-
 .popover {
-  padding: 0;
-}
+  padding: 0; }
+  .popover.bottom > .arrow {
+    border-bottom-color: #000; }
+    .popover.bottom > .arrow:after {
+      border-bottom-color: #f7f7f7; }
 
 .popover-content {
-  padding: 10px 24px;
-}
+  padding: 10px 24px; }
 
 .popover-title.menu-tabs {
   padding: .5rem .5rem 0;
-  display: block;
-}
+  display: block; }
 
 .popover-title.menu-button-group {
-  display: none;
-}
+  display: none; }
 
 .popover-title.menu-tabs .nav-tabs {
   position: relative;
-  top: 1px;
-}
-
-.popover.bottom > .arrow:after {
-  border-bottom-color: #f7f7f7;
-}
+  top: 1px; }
 
 .popover-actions {
   padding: 8px 14px;
@@ -35,17 +26,14 @@ h1 {
   background-color: #f7f7f7;
   border-top: 1px solid #ebebeb;
   border-radius: 0 0 5px 5px;
-  text-align: right;
-}
+  text-align: right; }
 
 .select2-container {
-  z-index: 100000;
-}
+  z-index: 100000; }
 
 .scancode--explanation {
   color: lightgray;
-  float: right;
-}
+  float: right; }
 
 .layout-abbreviation {
   font-weight: bold;
@@ -53,21 +41,18 @@ h1 {
   background: #333;
   padding: 4px 8px;
   font-family: monospace;
-  margin-right: .5em;
-}
+  margin-right: .5em; }
 
 .layout-preview img {
   max-width: 100%;
-  margin-top: 10px;
-}
+  margin-top: 10px; }
 
 .key-editor--none__description p {
   padding: 2rem 0;
   margin: 0;
   text-align: center;
   font-style: italic;
-  color: #999;
-}
+  color: #999; }
 
 .key-editor--none__description .icon {
   font-size: 5rem;
@@ -77,45 +62,34 @@ h1 {
   left: 50%;
   margin-left: -2.5rem;
   top: 50%;
-  margin-top: -2.5rem;
-}
+  margin-top: -2.5rem; }
 
 .select2-item {
   position: relative;
-  font-size: 1.5rem;
-}
-
-.select2-item.keymap-name--wrapper {
-  padding-left: 50px;
-}
-
-.select2-item .layout-segment-code {
-  height: 2rem;
-  position: absolute;
-  left: 0;
-  top: 50%;
-  margin-top: -1rem;
-}
+  font-size: 1.5rem; }
+  .select2-item.keymap-name--wrapper {
+    padding-left: 50px; }
+  .select2-item .layout-segment-code {
+    height: 2rem;
+    position: absolute;
+    left: 0;
+    top: 50%;
+    margin-top: -1rem; }
 
 .preview-wrapper img {
-  max-width: 100%;
-}
+  max-width: 100%; }
 
 .global-key-setup.disabled {
-  opacity: 0;
-}
+  opacity: 0; }
+  .global-key-setup.disabled .setting-label {
+    color: #999; }
 
-.global-key-setup.disabled .setting-label,
 .setting-label.disabled {
-  color: #999;
-}
+  color: #999; }
 
 .global-key-setup--wrapper {
-  position: relative;
-}
-
-.global-key-setup--wrapper .disabled-state--text {
-  position: absolute;
-  top: 50%;
-  margin-top: -4rem;
-}
+  position: relative; }
+  .global-key-setup--wrapper .disabled-state--text {
+    position: absolute;
+    top: 50%;
+    margin-top: -4rem; }
diff --git a/images/base-layer--blank.svg b/images/base-layer--blank.svg
index 610f2b84..86c2dd70 100644
--- a/images/base-layer--blank.svg
+++ b/images/base-layer--blank.svg
@@ -333,12 +333,6 @@
      height="41.667309"
      width="131.10236"
      id="f1" />
-  <path
-     style="overflow:visible;opacity:0.37109375;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ff0000;stroke-width:3.5309999;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3;stroke-dasharray:none;stroke-dashoffset:4.20029926;stroke-opacity:0.94117647"
-     d="m 496.16925,65.73301 -0.0154,87.47881 c -0.0282,2.83915 -2.3278,5.18818 -5.02766,5.24724 l -25.13,0 c -2.77655,0.0616 -5.07351,2.13273 -5.28022,5.00708 l 0,57.19878 c 0.0294,2.57204 2.14148,5.06074 5.11323,5.16514 l 7.4127,0 c 2.39778,0.0855 4.80676,2.26923 4.98173,4.73249 l 0.093,57.44617 c 0.076,2.80531 2.30514,5.04275 5.20558,5.13134 l 23.33781,0 c 2.53054,0.0347 4.93683,1.89336 5.22467,4.86728 l -0.0508,57.90266 c -0.42983,2.73003 -2.60342,4.37083 -4.77711,4.517 l -10.79541,0 c -2.40379,0.0627 -4.90328,2.14723 -4.96231,5.3178 l 0.0514,103.81727"
-     id="path4233"
-     inkscape:connector-curvature="0"
-     sodipodi:nodetypes="cccccccccccccccccc" />
   <path
      style="fill:#e6e6e6;stroke:none"
      d="m 995.46352,89.48813 c 2.791,0 5.32908,2.56086 5.32908,5.3769 l 0,329.45542 c 0,2.81604 -2.53808,5.3769 -5.32908,5.3769 l -370.67909,-0.001 c -1.77166,0 -3.54347,1.7733 -3.54347,3.545 0,12.89522 0,23.31503 0,34.58266 0,1.7716 1.77181,3.5432 3.54347,3.5432 l 390.67297,1.5e-4 c 0.928,0 1.8562,-0.14759 2.7394,-0.43636 0.8833,-0.28878 1.7213,-0.71869 2.4728,-1.26915 0.7516,-0.55047 1.4165,-1.2213 1.962,-1.97961 0.5456,-0.75831 0.9717,-1.60381 1.2579,-2.49497 0.2862,-0.89115 0.4325,-1.82765 0.4325,-2.76401 l 0,-389.43464 c 0,-0.83901 -0.1174,-1.67813 -0.3481,-2.4845 -0.2307,-0.80638 -0.5746,-1.57983 -1.0184,-2.28986 -0.4439,-0.71002 -0.9876,-1.35643 -1.6097,-1.91378 -0.6222,-0.55735 -1.3226,-1.0255 -2.0737,-1.38629 -0.751,-0.36078 -1.5525,-0.61412 -2.373,-0.75058 C 886.37479,42.45571 745.9631,19.10372 631.95768,0.14339 c -0.91165,-0.15162 -1.8469,-0.15828 -2.76061,-0.0195 -0.91372,0.13871 -1.8056,0.42276 -2.63265,0.83829 -0.82706,0.41551 -1.58903,0.96236 -2.24949,1.61394 -0.66047,0.65158 -1.21924,1.40768 -1.64996,2.2319 -0.43072,0.82422 -0.73327,1.71631 -0.8936,2.63375 -3.12168,17.84567 -6.23258,35.69325 -9.35634,53.53854 -0.058,0.33171 -0.16187,0.65478 -0.30744,0.95668 -0.14556,0.30189 -0.33275,0.58256 -0.5541,0.83133 -0.22136,0.24877 -0.47683,0.4656 -0.7565,0.64244 -0.27967,0.17685 -0.5835,0.31372 -0.89995,0.40551 -0.31645,0.0919 -0.64548,0.1386 -0.97471,0.1386 l -109.19782,-2e-5 c -0.93043,-1e-5 -1.77697,0.85413 -1.77697,1.79631 10e-6,7.4108 -1e-5,15.64271 0,21.94355 0,0.93909 0.84654,1.79353 1.77697,1.79353 l 495.73901,0"
diff --git a/images/base-layer--dvorak.svg b/images/base-layer--dvorak.svg
index 470f77d9..3fe8cbd0 100644
--- a/images/base-layer--dvorak.svg
+++ b/images/base-layer--dvorak.svg
@@ -958,12 +958,6 @@
          dy="30.4"
          x="424.23291">Space</tspan>
     </text>
-    <path
-       sodipodi:nodetypes="cccccccccccccccccc"
-       inkscape:connector-curvature="0"
-       id="path4233"
-       d="m 496.16925,646.72908 -0.0154,87.47881 c -0.0282,2.83915 -2.3278,5.18818 -5.02766,5.24724 l -25.13,0 c -2.77655,0.0616 -5.07351,2.13273 -5.28022,5.00708 l 0,57.19878 c 0.0294,2.57204 2.14148,5.06074 5.11323,5.16514 l 7.4127,0 c 2.39778,0.0855 4.80676,2.26923 4.98173,4.73249 l 0.093,57.44617 c 0.076,2.80531 2.30514,5.04275 5.20558,5.13134 l 23.33781,0 c 2.53054,0.0347 4.93683,1.89336 5.22467,4.86728 l -0.0508,57.90266 c -0.42983,2.73003 -2.60342,4.37083 -4.77711,4.517 l -10.79541,0 c -2.40379,0.0627 -4.90328,2.14723 -4.96231,5.3178 l 0.0514,103.81723"
-       style="overflow:visible;opacity:1;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ff0000;stroke-width:3.5309999;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3;stroke-dasharray:none;stroke-dashoffset:4.20029926;stroke-opacity:0.94117647" />
     <path
        inkscape:connector-curvature="0"
        id="right-case"
diff --git a/images/base-layer.svg b/images/base-layer.svg
index 56af1413..9b48ec7f 100644
--- a/images/base-layer.svg
+++ b/images/base-layer.svg
@@ -799,12 +799,6 @@
                     Space
                 </tspan>
       </text>
-      <path
-         style="overflow:visible;opacity:1;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ff0000;stroke-width:3.5309999;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3;stroke-dasharray:none;stroke-dashoffset:4.20029926;stroke-opacity:0.94117647"
-         d="m 274.59917,-455.03752 -0.0154,87.47881 c -0.0282,2.83915 -2.3278,5.18818 -5.02766,5.24724 l -25.13,0 c -2.77655,0.0616 -5.07351,2.13273 -5.28022,5.00708 l 0,57.19878 c 0.0294,2.57204 2.14148,5.06074 5.11323,5.16514 l 7.4127,0 c 2.39778,0.0855 4.80676,2.26923 4.98173,4.73249 l 0.093,57.44617 c 0.076,2.80531 2.30514,5.04275 5.20558,5.13134 l 23.33781,0 c 2.53054,0.0347 4.93683,1.89336 5.22467,4.86728 l -0.0508,57.90266 c -0.42983,2.73003 -2.60342,4.37083 -4.77711,4.517 l -10.79541,0 c -2.40379,0.0627 -4.90328,2.14723 -4.96231,5.3178 l 0.0514,103.817271"
-         id="path4233"
-         inkscape:connector-curvature="0"
-         sodipodi:nodetypes="cccccccccccccccccc" />
     </g>
     <g
        transform="translate(44.404903 1101.7674)"
diff --git a/images/grips/vertical.png b/images/grips/vertical.png
deleted file mode 100644
index 0ac8fa1e..00000000
Binary files a/images/grips/vertical.png and /dev/null differ
diff --git a/images/grips/vertical_dark.png b/images/grips/vertical_dark.png
deleted file mode 100644
index 1b5070d9..00000000
Binary files a/images/grips/vertical_dark.png and /dev/null differ
diff --git a/index.html b/index.html
index 35905e63..8f57fea4 100644
--- a/index.html
+++ b/index.html
@@ -45,9 +45,9 @@
           <div class="col-xs-12 text-center">
             <div class="" role="" style="margin-bottom: 2rem;">
               <button type="button" data-layer="base" class="uhk__layer-switcher btn btn-primary btn-lg current">Base</button>
-              <button type="button" data-layer="mod" class="uhk__layer-switcher btn btn-default btn-lg grip">Mod</button>
-              <button type="button" data-layer="fn" class="uhk__layer-switcher btn btn-default btn-lg grip">Fn</button>
-              <button type="button" data-layer="mouse" class="uhk__layer-switcher btn btn-default btn-lg grip">Mouse</button>
+              <button type="button" data-layer="mod" class="uhk__layer-switcher btn btn-default btn-lg">Mod</button>
+              <button type="button" data-layer="fn" class="uhk__layer-switcher btn btn-default btn-lg">Fn</button>
+              <button type="button" data-layer="mouse" class="uhk__layer-switcher btn btn-default btn-lg">Mouse</button>
             </div>
           </div>
           <div class="col-xs-12">
@@ -121,7 +121,7 @@
             </div>
             <div class="list-group-item action--item">
               <span class="glyphicon glyphicon-option-vertical move-handle" aria-hidden="true"></span>
-              <i class="fa fa-mouse-pointer"></i> Scroll by 150px downdward
+              <i class="fa fa-mouse-pointer"></i> Scroll by 150px downward
               <i class="glyphicon glyphicon-pencil action--edit"></i>
               <i class="glyphicon glyphicon-trash action--trash"></i>
             </div>
@@ -174,8 +174,6 @@
                         {{#if menuValue.hasDefaults}}
                           {{#if isDefault}}
                             <i class="fa fa-star pull-right"></i>
-                          {{else}}
-                            <i class="fa fa-star-o pull-right"></i>
                           {{/if}}
                         {{/if}}
                       </div>
@@ -199,4 +197,3 @@
     </script>
   </body>
 </html>
- 
\ No newline at end of file
diff --git a/popup__iframe.html b/popup__iframe.html
index 5c8feeee..66723f1c 100644
--- a/popup__iframe.html
+++ b/popup__iframe.html
@@ -4,7 +4,7 @@
   <link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
   <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
   <link href="node_modules/select2/dist/css/select2.min.css" rel="stylesheet">
-  <link href="style.css" rel="stylesheet">
+  <link href="css/style.css" rel="stylesheet">
   <meta charset="utf-8">
   <title>Ultimate Hacking Keyboard - Agent mockups</title>
 </head>
@@ -87,21 +87,6 @@
       <div class="global-key-setup--wrapper">
         <div class="global-key-setup">
           <!-- Primary action setup: scancode+modifiers. -->
-          <div class="scancode-options">
-            <b class="setting-label" style="position:relative; top:-9px; margin-right:4px;">Modifiers:</b>
-            <div class="btn-toolbar modifiers" style="display:inline-block">
-              <div class="btn-group btn-group-sm modifiers__left">
-                {{#each modifiers.left}}
-                  <button type="button" class="btn btn-default {{primary}}">{{name}}</button>
-                {{/each}}
-              </div>
-              <div class="btn-group btn-group-sm modifiers__right">
-                {{#each modifiers.right}}
-                  <button type="button" class="btn btn-default {{primary}}">{{name}}</button>
-                {{/each}}
-              </div>
-            </div>
-          </div>
           <div class="scancode-options" style="margin-bottom:10px; margin-top:2px">
             <b class="setting-label" style="position:relative; top:2px;">Scancode:</b>
             <select class="scancode" style="width: 200px">
@@ -124,6 +109,21 @@
               <i class="fa fa-square"></i> Stop capturing
             </button>
           </div>
+          <div class="scancode-options">
+            <b class="setting-label" style="position:relative; top:-9px; margin-right:4px;">Modifiers:</b>
+            <div class="btn-toolbar modifiers" style="display:inline-block">
+              <div class="btn-group btn-group-sm modifiers__left">
+                {{#each modifiers.left}}
+                  <button type="button" class="btn btn-default {{primary}}">{{name}}</button>
+                {{/each}}
+              </div>
+              <div class="btn-group btn-group-sm modifiers__right">
+                {{#each modifiers.right}}
+                  <button type="button" class="btn btn-default {{primary}}">{{name}}</button>
+                {{/each}}
+              </div>
+            </div>
+          </div>
           <!-- bof optional -->
             <!-- Keyboard layout preview to be shown in capturing mode. -->
             <!--
diff --git a/sass/app.scss b/sass/app.scss
index 48121274..e738f588 100644
--- a/sass/app.scss
+++ b/sass/app.scss
@@ -69,29 +69,12 @@ ul {
         background-color: #555;
         color: #fff;
 
-        .fa-star,
-        .fa-star-o {
-          display: none;
+        .fa-star {
+          color: #fff;
         }
 
         &:hover {
           background-color: #555;
-
-          .fa-star,
-          .fa-star-o {
-            display: block;
-            color: #fff;
-          }
-        }
-      }
-
-      &:hover {
-        .fa-star-o {
-          color: #000;
-
-          &:hover {
-            color: #000;
-          }
         }
       }
 
@@ -101,10 +84,6 @@ ul {
         top: 2px;
       }
 
-      .fa-star-o {
-        color: #f5f5f5;
-      }
-
       .fa-star {
         color: #666;
       }
@@ -191,35 +170,6 @@ ul {
   }
 }
 
-.grip {
-  position: relative;
-
-  &:before {
-    content: '';
-    display: none;
-    width: 5px;
-    height: 20px;
-    background-image: url(../images/grips/vertical_dark.png);
-    background-repeat: no-repeat;
-    position: absolute;
-    top: 50%;
-    left: 7px;
-    margin-top: -10px;
-  }
-
-  &.btn-primary {
-    &:before {
-      background-image: url(../images/grips/vertical.png);
-    }
-  }
-
-  &:hover {
-    &:before {
-      display: block;
-    }
-  }
-}
-
 .key-editor__popup {
   border: none;
   width: 0px;
@@ -233,18 +183,10 @@ ul {
 }
 
 svg.uhk {
-  &.faded {
-    #left-case,
-    #right-case {
-      fill: #555;
-    }
-
-    rect {
-      fill: #666;
-
-      &.active {
-        fill: #000;
-      }
+  rect {
+    &.active {
+      //TODO: use a color variable instead of the declaration below.
+      fill: #337ab7;
     }
   }
 }
diff --git a/sass/style.scss b/sass/style.scss
new file mode 100644
index 00000000..51b95cb9
--- /dev/null
+++ b/sass/style.scss
@@ -0,0 +1,138 @@
+.popover {
+  padding: 0;
+
+  &.bottom {
+    > .arrow {
+      border-bottom-color: #000;
+
+      &:after {
+        border-bottom-color: #f7f7f7;
+      }
+    }
+  }
+}
+
+.popover-content {
+  padding: 10px 24px;
+}
+
+.popover-title {
+  &.menu-tabs {
+    padding: .5rem .5rem 0;
+    display: block;
+  }
+
+  &.menu-button-group {
+    display: none;
+  }
+
+  &.menu-tabs {
+    .nav-tabs {
+      position: relative;
+      top: 1px;
+    }
+  }
+}
+
+.popover-actions {
+  padding: 8px 14px;
+  margin: 0;
+  font-size: 14px;
+  background-color: #f7f7f7;
+  border-top: 1px solid #ebebeb;
+  border-radius: 0 0 5px 5px;
+  text-align: right;
+}
+
+.select2-container {
+  z-index: 100000;
+}
+
+.scancode--explanation {
+  color: lightgray;
+  float: right;
+}
+
+.layout-abbreviation {
+  font-weight: bold;
+  color: #FFF;
+  background: #333;
+  padding: 4px 8px;
+  font-family: monospace;
+  margin-right: .5em;
+}
+
+.layout-preview img {
+  max-width: 100%;
+  margin-top: 10px;
+}
+
+.key-editor--none__description {
+  p {
+    padding: 2rem 0;
+    margin: 0;
+    text-align: center;
+    font-style: italic;
+    color: #999;
+  }
+
+  .icon {
+    font-size: 5rem;
+    color: #feefef;
+    position: absolute;
+    z-index: 0;
+    left: 50%;
+    margin-left: -2.5rem;
+    top: 50%;
+    margin-top: -2.5rem;
+  }
+}
+
+.select2-item {
+  position: relative;
+  font-size: 1.5rem;
+
+  &.keymap-name--wrapper {
+    padding-left: 50px;
+  }
+
+  .layout-segment-code {
+    height: 2rem;
+    position: absolute;
+    left: 0;
+    top: 50%;
+    margin-top: -1rem;
+  }
+}
+
+.preview-wrapper {
+  img {
+    max-width: 100%;
+  }
+}
+
+.global-key-setup {
+  &.disabled {
+    opacity: 0;
+
+    .setting-label {
+      color: #999;
+    }
+  }
+}
+
+.setting-label {
+  &.disabled {
+    color: #999;
+  }
+}
+
+.global-key-setup--wrapper {
+  position: relative;
+
+  .disabled-state--text {
+    position: absolute;
+    top: 50%;
+    margin-top: -4rem;
+  }
+}