diff --git a/app/assets/javascripts/mobile.js b/app/assets/javascripts/mobile.js
index c2f4697b4..2c1cc46cb 100644
--- a/app/assets/javascripts/mobile.js
+++ b/app/assets/javascripts/mobile.js
@@ -26,6 +26,23 @@ $(document).ready(function(){
          .toggleClass('inactive');
   };
 
+  /* Drawer menu */
+  $('#menu_badge').click(function(evt){
+    evt.preventDefault();
+    toggleDrawerMenu();
+  });
+
+  var toggleDrawerMenu = function(){
+    var app = $("#app");
+
+    if (app.hasClass('draw')){
+      app.removeClass('draw');
+    }
+    else {
+      app.addClass('draw');
+    }
+  };
+
   /* Heart toggle */
   $(".like_action", ".stream").bind("tap click", function(evt){
     evt.preventDefault();
@@ -270,7 +287,7 @@ $(document).ready(function(){
       );
     }
   });
-  
+
   $("#submit_new_message").bind("tap click", function(evt){
     evt.preventDefault();
     $("#new_status_message").submit();
diff --git a/app/assets/stylesheets/mobile.css.scss b/app/assets/stylesheets/mobile.css.scss
index a9b90c429..7083fccca 100644
--- a/app/assets/stylesheets/mobile.css.scss
+++ b/app/assets/stylesheets/mobile.css.scss
@@ -17,6 +17,11 @@ body {
     /* scale background image down for iOS retina display */
     size: 200px;
   }
+  padding-left: 0px;
+  padding-right: 0px;
+}
+
+#main.container {
   padding-top: 55px;
 }
 
@@ -28,6 +33,74 @@ h3 {
   clear: both;
 }
 
+#menu_badge {
+  float: right;
+  display: inline-block;
+  padding: 0px 10px 0px 12px;
+
+  img.menu {
+    height: 40px;
+  }
+}
+
+#app {
+  position: relative;
+  left: 0;
+  -moz-transition:left 0.35s;
+  -webkit-transition:left 0.35s;
+  -o-transition:left 0.35s;
+  transition:left 0.35s;
+}
+
+#main_nav {
+  -moz-transition:left 0.35s;
+  -webkit-transition:left 0.35s;
+  -o-transition:left 0.35s;
+  transition:left 0.35s;
+  height: 45px;
+}
+
+#drawer {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  width: 80%;
+  left: 100%;
+  background-color: #444;
+
+  -moz-transition:left 0.35s;
+  -webkit-transition:left 0.35s;
+  -o-transition:left 0.35s;
+  transition:left 0.35s;
+
+  .navbar {
+    .navbar-inner {
+      height: 45px;
+      border: none;
+      border-radius: 0;
+
+      @include box-shadow(0,1px,2px,#333);
+
+      background: {
+        image: image-url("header-bg-long.jpg");
+      }
+
+      width: 100%;
+    }
+  }
+}
+
+#app.draw {
+  left: -80%;
+
+  #main_nav {
+    left: -80%;
+  }
+  #drawer {
+    left: 20%;
+  }
+}
+
 .message {
   padding-left: 2px;
 }
@@ -78,7 +151,7 @@ h3 {
   .timeago {
     font: {
       weight: normal; }; }
-  padding: 0 !important; 
+  padding: 0 !important;
 }
 .shield{
   padding: 10px;
@@ -174,8 +247,8 @@ h3 {
 
 
 #main_stream {
-  margin-left: -10px;
-  margin-right: -10px;
+  margin-left: 10px;
+  margin-right: 10px;
   .from {
     white-space: nowrap;
     overflow: hidden;
@@ -241,9 +314,9 @@ h3 {
 
   .photo {
     text-align: center;
-    background-color: #FFFFFF; 
-    border-style: solid; 
-    border-width: 1px; 
+    background-color: #FFFFFF;
+    border-style: solid;
+    border-width: 1px;
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
     border-color: #DDDDDD #BBBBBB #AAAAAA;
     border-bottom-width: 0px;
@@ -273,7 +346,7 @@ h3 {
     shadow: 0 1px 2px #333;
     decoration: none; };
   padding: 0;
-  position: fixed; 
+  position: fixed;
   bottom: 10%;
   z-index: 1;
   height: 50px;
@@ -299,7 +372,7 @@ h3 {
     margin-right: 10px;
     float: left;
   }
-  
+
   .content {
     padding-left: 100px;
   }
@@ -327,18 +400,19 @@ header {
   top: 0px;
   left: 0px;
   right: 0px;
-  min-width: 250px;
+  width: 100%;
   z-index: 10;
   background: url("header-bg-long.jpg") rgb(40,35,35);
   @include box-shadow(0, 1px, 2px, #333);
-  border-bottom: 1px solid #222;  
+  border-bottom: 1px solid #222;
 
   #header_title { display: inline-block; }
-  
+
   #nav_badges {
     float: right;
     margin: 4px 12px;
-    
+    display: inline-block;
+
     .badge {
       display: inline;
       margin-left: 3px;
@@ -348,11 +422,11 @@ header {
       font-size: smaller;
       width: 28px;
     }
-    
+
     .badge:hover .badge_count {
         background-color: #bd0902;
     }
-    
+
     a {
       padding: 5px 0px;
     }
@@ -806,18 +880,18 @@ form#new_conversation.new_conversation {
   h4 {
     font-size: 14px;
     font-weight: normal;
-    line-height: 20px;  
+    line-height: 20px;
   }
   .span-10 {
     margin: 5px;
-  }   
+  }
 }
 
 .span-2 {
    margin: 5px 5px;
    text-transform: uppercase;
 }
-  
+
 .span-10 {
   width: 100%;
 }
@@ -906,7 +980,7 @@ textarea#conversation_text {
 .registrations_error,
 .registrations_notice {
   color: #DF0101;
-  text-shadow: 1px 1px 5px #666; 
+  text-shadow: 1px 1px 5px #666;
 }
 
 .registrations {
@@ -947,7 +1021,7 @@ form#new_user.new_user input.btn {
 input#user_password, #user_username, #user_password_confirmation, #user_email {
   height: 30px;
 }
-  
+
 #flash_notice,
 #flash_alert,
 #flash_error {
@@ -970,7 +1044,7 @@ input#user_password, #user_username, #user_password_confirmation, #user_email {
 }
 
 h1.session {
-  font-size: 40px; 
+  font-size: 40px;
   font-weight: 200;
 }
 
@@ -1006,7 +1080,7 @@ form p.checkbox_select {
   img {
     @include border-radius(5px);
     @include box-shadow(0,1px,2px,#666);
-  
+
     position: absolute;
     left: 0;
     height: 100px;
@@ -1113,7 +1187,7 @@ select#aspect_ids_ {
   float: left;
   padding: 3px 12px;
   cursor: pointer;
-  
+
   &:hover img {
       @include opacity(0.4);
   }
@@ -1169,11 +1243,11 @@ select#aspect_ids_ {
     li {
       display: table-cell;
       padding-right: 4px;
-      
+
       img {
         max-height: 55px;
       }
-      
+
       .circle {
         @include border-radius(20px);
         z-index: 1;
@@ -1187,7 +1261,7 @@ select#aspect_ids_ {
         max-height: 20px;
         border: 1px solid #fff;
       }
-      
+
       .x  {
         z-index: 2;
         position: absolute;
@@ -1264,7 +1338,7 @@ select#aspect_ids_ {
   h1 { font-size: 25px; }
   h2 { font-size: 20px; }
   h3 { font-size: 15px; }
-  
+
   h2, #awesome_button {
     margin-top: 30px;
   }
diff --git a/app/views/layouts/application.mobile.haml b/app/views/layouts/application.mobile.haml
index b66b1e500..e3e0ed0b8 100644
--- a/app/views/layouts/application.mobile.haml
+++ b/app/views/layouts/application.mobile.haml
@@ -46,35 +46,42 @@
     = yield(:head)
 
   %body
-    %header    
-      = link_to(image_tag('branding/header-logo2x.png', height: 40, width: 40), stream_path, id: 'header_title')
+    #app
+      %header#main_nav
+        = link_to(image_tag('branding/header-logo2x.png', height: 40, width: 40), stream_path, id: 'header_title')
+        = link_to(image_tag('icons/menu.png', :class => 'menu'),"#", id: "menu_badge")
+
+        - if user_signed_in?
+          #nav_badges
+            = link_to(image_tag('icons/my_activity.png', class: 'my_activity'), activity_stream_path, class: "badge badge-inverse", id: "my_activity_badge")
+            = link_to(image_tag('icons/notifications_grey.png', height: 16, width: 16, id: 'notification-flag'), notifications_path, class: "badge badge-inverse", id: "notification_badge")
+            - if current_user.unread_notifications.count > 0
+              .badge_count{id: "notification"}
+                = current_user.unread_notifications.count
+            = link_to(image_tag('icons/mail_grey.png', height: 11, width: 17), conversations_path, class: "badge badge-inverse", id: "conversations_badge")
+            - if current_user.unread_message_count > 0
+              .badge_count{id: "conversation"}
+                = current_user.unread_message_count
+            = link_to(image_tag('icons/search_grey.png', height: 14, width: 14), people_path, class: "badge badge-inverse", id: "people_badge")
+            = link_to(image_tag('icons/user_grey.png', height: 16, width: 16), contacts_path, class: "badge badge-inverse", id: "contacts_badge")
+            - if yield(:header_action).present?
+              = yield(:header_action)
+            - else
+              = link_to(image_tag('icons/compose_mobile2.png', class: 'compose_icon'), new_status_message_path)
+
+      #main.container{:role => "main"}
+        .row
+          - if current_page?(:activity_stream)
+            %h3
+              = t('streams.activity.title')
+          = yield
 
       - if user_signed_in?
-        #nav_badges
-          = link_to(image_tag('icons/my_activity.png', class: 'my_activity'), activity_stream_path, class: "badge badge-inverse", id: "my_activity_badge")
-          = link_to(image_tag('icons/notifications_grey.png', height: 16, width: 16, id: 'notification-flag'), notifications_path, class: "badge badge-inverse", id: "notification_badge")
-          - if current_user.unread_notifications.count > 0
-            .badge_count{id: "notification"}
-              = current_user.unread_notifications.count
-          = link_to(image_tag('icons/mail_grey.png', height: 11, width: 17), conversations_path, class: "badge badge-inverse", id: "conversations_badge")
-          - if current_user.unread_message_count > 0
-            .badge_count{id: "conversation"}
-              = current_user.unread_message_count
-          = link_to(image_tag('icons/search_grey.png', height: 14, width: 14), people_path, class: "badge badge-inverse", id: "people_badge")
-          = link_to(image_tag('icons/user_grey.png', height: 16, width: 16), contacts_path, class: "badge badge-inverse", id: "contacts_badge")
-          - if yield(:header_action).present?
-            = yield(:header_action)
-          - else
-            = link_to(image_tag('icons/compose_mobile2.png', class: 'compose_icon'), new_status_message_path)
+        = render :partial =>'shared/footer'
 
-    #main.container{:role => "main"}
-      - if current_page?(:activity_stream)
-        %h3
-          = t('streams.activity.title')
-      = yield
-
-    - if user_signed_in?
-      = render :partial =>'shared/footer'
+      #drawer
+        .navbar
+          .navbar-inner
 
     / javascripts at the bottom
     = jquery_include_tag