diff --git a/index.html b/index.html
index b53b873..15bf848 100644
--- a/index.html
+++ b/index.html
@@ -8,6 +8,7 @@
         <script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.slide.js"></script>
         <link rel="shortcut icon" href="./res/img/favicon.png" type="image/x-icon" />
         <link rel="image_src" href="./res/img/favicon.png" />
+        <link href="http://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet" type="text/css">
 
         <script src="js/web/web.js"></script>
         <script src="js/engine/DecodeWrittenMorse.js"></script>
@@ -20,10 +21,10 @@
         </span>
         <div class="drawer">
             <img src="res/img/drawergraphic.png" class="drawerimg"/>
-            <div class="draweritem" onclick="writtenMorse()">writtenMorse</div>
-            <div class="draweritem" onclick="normalMorse()">Normal Morse</div>
-            <div class="drawerdivider"></div>
-            <div class="draweritem" onclick="about()">About</div>
+            <div class="draweritem" onclick="writtenMorse()" id="writtenMorse">writtenMorse</div>
+            <div class="draweritem" onclick="normalMorse()" id="normalMorse">Normal Morse</div>
+            <div class="drawerdividerbottom"></div>
+            <div class="draweritembottom" onclick="about()">About</div>
         </div>
         <div class="main">
             <div class="card">
diff --git a/js/web/web.js b/js/web/web.js
index 577a0b2..19b0438 100644
--- a/js/web/web.js
+++ b/js/web/web.js
@@ -1,6 +1,6 @@
 var dur = 150
 var drawerStatus = true
-var writtenMorse = true
+var wm = true
 function drawer(){
     if(window.innerWidth <= 1400){
         if(drawerStatus){
@@ -20,7 +20,7 @@ function drawer(){
 
 function encode(){
     var input = $('#textarea').val()
-    if(writtenMorse){
+    if(wm){
         $("#output").text("The normal morse engine is not ported jet.")
     } else {
         //TODO port the normal morse decode engine
@@ -31,7 +31,7 @@ function encode(){
 
 function decode(){
     var input = $('#textarea').val()
-    if(writtenMorse){
+    if(wm){
         $('#output').text(decodeWrittenMorseManager(input))
     } else {
         //TODO port the normal morse decode engine
@@ -41,12 +41,16 @@ function decode(){
 }
 
 function writtenMorse(){
-    writtenMorse = true
+    wm = true
+    $("#normalMorse").css({"color":"#000000"})
+    $("#writtenMorse").css({"color":"#03a9f4"})
     drawer()
 }
 
 function normalMorse(){
-    writtenMorse = false
+    wm = false
+    $("#normalMorse").css({"color":"#03a9f4"})
+    $("#writtenMorse").css({"color":"#000000"})
     drawer()
 }
 
diff --git a/res/css/main.css b/res/css/main.css
index e884fb3..290d3f9 100644
--- a/res/css/main.css
+++ b/res/css/main.css
@@ -37,26 +37,34 @@ body {
   border-right-width: 1px;
   border-right-color: #cecece;
   border-right-style: solid;
-  z-index: 50; }
+  z-index: 50;
+  font-weight: 500; }
 
 .drawerimg {
   width: 100%; }
 
-.draweritem {
-  height: 72px;
-  line-height: 72px;
+.draweritem, .draweritembottom {
+  height: 58px;
+  line-height: 58px;
   font-size: 18px;
   padding-left: 16px;
   cursor: pointer; }
 
-.draweritem:hover {
-  background: #e0e0e0; }
+.draweritembottom {
+  bottom: 0px;
+  position: absolute;
+  width: calc(100% - 16px); }
 
-.drawerdivider, .carddivider {
+.drawerdivider, .drawerdividerbottom, .carddivider {
   border-top-color: #cecece;
   border-top-width: 1px;
   border-top-style: solid; }
 
+.drawerdividerbottom {
+  bottom: 60px;
+  position: absolute;
+  width: 100%; }
+
 .main {
   width: calc(100% - 300px);
   height: calc(100%-60px);
@@ -104,9 +112,6 @@ body {
   color: #03a9f4;
   cursor: pointer; }
 
-.cardbutton:hover {
-  background: #e0e0e0; }
-
 .overlay {
   background: #000;
   opacity: 0;
@@ -127,6 +132,9 @@ body {
 #outputcard {
   display: none; }
 
+#writtenmorse {
+  color: #03a9f4; }
+
 @media screen and (max-width: 1400px) {
   .drawer {
     display: none;
diff --git a/res/css/main.sass b/res/css/main.sass
index de3a096..203651f 100644
--- a/res/css/main.sass
+++ b/res/css/main.sass
@@ -5,9 +5,8 @@ $drawer-width: 300px
 $actionbar-height: 60px
 $actionbar-shadow: #999
 $divider-color: #cecece
-$drawer-item-height: 72px
+$drawer-item-height: 58px
 $drawer-item-font-size: 18px
-$hovered-element-color: #e0e0e0
 $card-padding: 20px
 
 =border-radius($radius)
@@ -59,6 +58,7 @@ body
     border-right-color: $divider-color
     border-right-style: solid
     z-index: 50
+    font-weight: 500
 
 .drawerimg
     width: 100%
@@ -70,14 +70,23 @@ body
     padding-left: 16px
     cursor: pointer
 
-.draweritem:hover
-    background: $hovered-element-color
+.draweritembottom
+    @extend .draweritem
+    bottom: 0px
+    position: absolute
+    width: calc(100% - 16px)
 
 .drawerdivider
     border-top-color: $divider-color
     border-top-width: 1px
     border-top-style: solid
 
+.drawerdividerbottom
+    @extend .drawerdivider
+    bottom: 60px
+    position: absolute
+    width: 100%
+
 .main
     width: calc(100% - 300px)
     height: calc(100%-60px)
@@ -120,9 +129,6 @@ body
     color: $primary-color
     cursor: pointer
 
-.cardbutton:hover
-    background: $hovered-element-color
-
 .overlay
     background: #000
     opacity: 0
@@ -144,6 +150,9 @@ body
 #outputcard
     display: none
 
+#writtenmorse
+    color: $primary-color
+
 @media screen and (max-width: 1400px)
     .drawer
         display: none