diff --git a/app/views/layouts/darkswarm.html.haml b/app/views/layouts/darkswarm.html.haml
index e44c0600af..52d0b74601 100644
--- a/app/views/layouts/darkswarm.html.haml
+++ b/app/views/layouts/darkswarm.html.haml
@@ -14,16 +14,18 @@
     = csrf_meta_tags
 
   %body.off-canvas{"ng-app" => "Darkswarm"}
-    = render partial: "shared/current_hub"
-    = render partial: "shared/current_user"
-    = render partial: "shared/menu"
-    = display_flash_messages
-    %ofn-flash
+    .off-canvas-wrap
+      .inner-wrap
+        = render partial: "shared/current_hub"
+        = render partial: "shared/current_user"
+        = render partial: "shared/menu/menu"
+        = display_flash_messages
+        %ofn-flash
 
-    = render "shared/sidebar"
+        = render "shared/sidebar"
 
-    %section{ role: "main" }
-      = yield
-      
-      #footer
-    = yield :scripts
+        %section{ role: "main" }
+          = yield
+          
+          #footer
+        = yield :scripts
diff --git a/app/views/shared/_sidebar.html.haml b/app/views/shared/_sidebar.html.haml
index 158083d584..c7d69781ea 100644
--- a/app/views/shared/_sidebar.html.haml
+++ b/app/views/shared/_sidebar.html.haml
@@ -1,4 +1,4 @@
-%section#sidebar{ role: "complementary", "ng-controller" => "SidebarCtrl", 
+%aside#sidebar.right-off-canvas-menu{ role: "complementary", "ng-controller" => "SidebarCtrl", 
 "ng-class" => "{'active' : Sidebar.active()}"}
 
   - if spree_current_user.nil?
diff --git a/app/views/shared/_signed_in.html.haml b/app/views/shared/_signed_in.html.haml
index f3236cfa73..357391406b 100644
--- a/app/views/shared/_signed_in.html.haml
+++ b/app/views/shared/_signed_in.html.haml
@@ -1,5 +1,5 @@
 %li#login-name
-  %a.sidebar-button{"ng-click" => "toggle('/account')"}
+  %a{"ng-click" => "toggle('/account')"}
     = spree_current_user.email
 %li.divider
   %li#sign-out-link
diff --git a/app/views/shared/_signed_out.html.haml b/app/views/shared/_signed_out.html.haml
index 1ea02cc4ea..67031ceb8c 100644
--- a/app/views/shared/_signed_out.html.haml
+++ b/app/views/shared/_signed_out.html.haml
@@ -1,5 +1,6 @@
--#%li#login-link
-  -#%a.sidebar-button{"ng-click" => "toggle('/login')"} Login
--#%li.divider
--#%li#sign-up-link
-  -#%a.sidebar-button{"ng-click" => "toggle('/signup')"} Sign Up
+%li#login-link
+  %a{"ng-click" => "toggle('/login')"} Login
+%li.divider
+%li#sign-up-link
+  %a{"ng-click" => "toggle('/signup')"} Sign Up
+
diff --git a/app/views/shared/menu/_large_menu.html.haml b/app/views/shared/menu/_large_menu.html.haml
new file mode 100644
index 0000000000..a775a1e64d
--- /dev/null
+++ b/app/views/shared/menu/_large_menu.html.haml
@@ -0,0 +1,29 @@
+%nav.top-bar.hide-for-small
+  %section.top-bar-section
+    %ul.left
+      -#%li
+        -#%a.icon{"ng-click" => "Sidebar.toggle()"}
+          -#%i.fi-list
+      %li= link_to image_tag("ofn_logo_small.png"), root_path
+      %li.divider
+      %li
+        %a{href: producers_path} Producers
+
+  %section.top-bar-section
+    %ul.right{"ng-controller" => "AuthenticationActionsCtrl"}
+      %li.divider
+      - if spree_current_user.nil?
+        = render 'shared/signed_out'
+      - else
+        = render 'shared/signed_in'
+      %li.divider
+      %li.current_hub{"ng-controller" => "CurrentHubCtrl", "ng-show" => "CurrentHub.id"}
+        %a{href: main_app.shop_path}
+          {{ CurrentHub.name }}
+      %li.cart
+        %a.icon{href: cart_url}
+          %i.fi-shopping-cart 
+            %span
+              = cart_count
+              items
+
diff --git a/app/views/shared/menu/_menu.html.haml b/app/views/shared/menu/_menu.html.haml
index dcd3897195..115af32134 100644
--- a/app/views/shared/menu/_menu.html.haml
+++ b/app/views/shared/menu/_menu.html.haml
@@ -1,25 +1,2 @@
-%nav.top-bar
-  %section.top-bar-section
-    %ul.left{"ng-controller" => "AuthenticationActionsCtrl"}
-      %li
-        %a.icon{"ng-click" => "Sidebar.toggle()"}
-          %i.fi-list
-
-      %li= link_to image_tag("ofn_logo_small.png"), root_path
-      %li.divider
-      - if spree_current_user.nil?
-        = render 'shared/signed_out'
-      - else
-        = render 'shared/signed_in'
-
-  %section.top-bar-section
-    %ul.right
-      %li.current_hub{"ng-controller" => "CurrentHubCtrl", "ng-show" => "CurrentHub.id"}
-        %a{href: main_app.shop_path}
-          {{ CurrentHub.name }}
-      %li.cart
-        %a.icon{href: cart_url}
-          %i.fi-shopping-cart 
-            %span
-              = cart_count
-              items
+= render partial: "shared/menu/large_menu"
+= render partial: "shared/menu/mobile_menu"
diff --git a/app/views/shared/menu/_mobile_menu.html.haml b/app/views/shared/menu/_mobile_menu.html.haml
new file mode 100644
index 0000000000..8e581c6504
--- /dev/null
+++ b/app/views/shared/menu/_mobile_menu.html.haml
@@ -0,0 +1,23 @@
+%nav.tab-bar.show-for-small
+  %section.left-small
+    %a.left-off-canvas-toggle.menu-icon
+      %span
+  %section.right-small
+    %a.icon{href: cart_url}
+      %i.fi-shopping-cart 
+        %span
+          = cart_count
+          items
+    %a{href: main_app.shop_path}
+      {{ CurrentHub.name }}
+
+%aside.left-off-canvas-menu.show-for-small
+  %ul.off-canvas-list
+    %li= link_to image_tag("ofn_logo_small.png"), root_path
+    %li
+      %a{href: producers_path} Producers
+    %li
+    - if spree_current_user.nil?
+      = render 'shared/signed_out'
+    - else
+      = render 'shared/signed_in'