diff --git a/app/styles/docs/components.sass b/app/styles/docs/components.sass
index 63146250d..fc1dec4f5 100644
--- a/app/styles/docs/components.sass
+++ b/app/styles/docs/components.sass
@@ -1,30 +1,18 @@
 #docs-components-view
   color: saddlebrown
 
-.main
-  position : relative
+  .row
 
-  .left
-    bottom: 10em
-    left: 10em
-    overflow-y: scroll
-    overflow-x: hidden
-    position: fixed
-    top: 5em
-    white-space: nowrap
-    width: 20%
-    -webkit-overflow-scrolling: touch
+    .index-column, .documentation-column
+      overflow-y: scroll
+      overflow-x: hidden
+      min-height: 600px
 
-  .right
-    left: 28em
-    bottom: 10em
-    position: fixed
-    overflow-y: scroll
-    overflow-x: hidden
-    right: 10em
-    top: 5em
-    //width: 80%
-    -webkit-overflow-scrolling: touch
+      > ul
+        padding: 0px 20px 20px 20px
 
-    .specialList
-      list-style-type: none
\ No newline at end of file
+  
+    .documentation-column
+  
+      .specialList
+        list-style-type: none
diff --git a/app/templates/docs/components.jade b/app/templates/docs/components.jade
index ceb0b5d72..0e546da7e 100644
--- a/app/templates/docs/components.jade
+++ b/app/templates/docs/components.jade
@@ -2,22 +2,22 @@ extends /templates/base
 
 
 block content
-    div.main
-        div.left
-            ul
-                for component in components
-                    li= component.get('name')
-                    ul
-                        each doc in component.attributes.propertyDocumentation
-                            a(href="##{component.get('name')}#{doc.name}")
-                                li
-                                    | #{doc.name}
-
-        div.right
-            ul
-                for component in components
-                    each doc in component.attributes.propertyDocumentation
-                        li(id="#{component.get('name')}#{doc.name}")
-                            | #{doc.name}
-                            ul.specialList
-                                li=doc.description
+  .row
+    .col-xs-3.index-column.nano
+      ul.nav.nav-list.list-group.nano-content
+        for component in components
+          li= component.get('name')
+          ul
+            each doc in component.attributes.propertyDocumentation
+              a(href="##{component.get('name')}#{doc.name}")
+                li
+                  | #{doc.name}
+    .col-xs-9.documentation-column.nano
+      ul.nano-content
+        for component in components
+          each doc in component.attributes.propertyDocumentation
+            li(id="#{component.get('name')}#{doc.name}")
+              | #{doc.name}
+              ul.specialList
+                li=doc.description
+  
\ No newline at end of file