diff --git a/source/css/bootstrap/bootstrap-responsive.css b/source/css/bootstrap/bootstrap-responsive.css
diff --git a/source/css/bootstrap/bootstrap-responsive.min.css b/source/css/bootstrap/bootstrap-responsive.min.css
diff --git a/source/css/bootstrap/bootstrap.css b/source/css/bootstrap/bootstrap.css
diff --git a/source/css/bootstrap/bootstrap.min.css b/source/css/bootstrap/bootstrap.min.css
diff --git a/source/css/breadcrumbs.scss b/source/css/breadcrumbs.scss
@@ -0,0 +1,7 @@
+.breadcrumbs {
+  padding-top: 30px;
+}
+
+.breadcrumbs .well {
+  padding: 10px !important;
+}
diff --git a/source/css/docs.css.scss b/source/css/docs.css.scss
diff --git a/source/css/documentation.scss b/source/css/documentation.scss
@@ -0,0 +1,18 @@
+@import "highlighting";
+
+.documentation h1, h2, h3, h4, h5, h6 {
+  margin-bottom: 10px;
+}
+
+.documentation li {
+  line-height: 20px;
+}
+
+.documentation ul p {
+  margin-top: 5px;
+  margin-bottom: 0px;
+}
+
+.documentation img {
+  width: 100%;
+}
diff --git a/source/css/highlighting.css.erb b/source/css/highlighting.css.erb
@@ -2,7 +2,37 @@
 /* NOTE: see here for details: https://github.com/middleman/middleman-syntax#css */
 
 /* Monokai style */
-<%= Rouge::Themes::Base16::Monokai.render(:scope => '.highlight') %> 
+<%= Rouge::Themes::Base16::Monokai.render(:scope => '.highlight') %>
 
 /* GitHub style */
 /* <%= Rouge::Themes::Github.render(:scope => '.highlight') %> */
+
+pre {
+  border: solid 1px #ddd;
+  background: #fff;
+  padding: 10;
+  line-height: 23px;
+  margin-bottom: 30px;
+  white-space: pre;
+  overflow-x: auto;
+  word-break: inherit;
+  word-wrap: inherit;
+}
+
+.highlight td {
+    padding: 8px 15px;
+}
+
+.gl {
+  background: #fafafa;
+  border-right: 1px solid #ddd;
+  color: #999;
+
+  /* Stop line numbers being visually selected */
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
diff --git a/source/css/index.css.scss → source/css/index.scss b/source/css/index.css.scss → source/css/index.scss
diff --git a/source/css/sensuapp.css.scss b/source/css/sensuapp.css.scss
diff --git a/source/css/sensuapp.scss b/source/css/sensuapp.scss
@@ -0,0 +1,3 @@
+// Twitter Bootstrap
+@import "bootstrap";
+@import "index";
diff --git a/source/css/suggestions.scss b/source/css/suggestions.scss
@@ -0,0 +1,8 @@
+.suggestions {
+  padding-top: 30px;
+  padding-bottom: 30px;
+}
+
+.suggestions .button {
+  width: 100%;
+}
diff --git a/source/css/toc.scss b/source/css/toc.scss
@@ -0,0 +1,14 @@
+@import "bootstrap";
+
+.toc > ul {
+  @extend .list-unstyled;
+  padding-left: 0px;
+}
+
+.toc li {
+  margin-bottom: 3px;
+}
+
+.toc ul > li > ul {
+  padding-left: 25px;
+}
diff --git a/source/layouts/_alerts.haml b/source/layouts/_alerts.haml
@@ -0,0 +1,8 @@
+- if current_resource.data.danger
+  %div.alert.alert-error= current_resource.data.danger
+
+- if current_resource.data.warning
+  %div.alert.alert= current_resource.data.warning
+
+- if current_resource.data.info
+  %div.alert.alert-info= current_resource.data.alert
diff --git a/source/layouts/_breadcrumbs.haml b/source/layouts/_breadcrumbs.haml
@@ -0,0 +1,18 @@
+%div.breadcrumbs
+  = stylesheet_link_tag "breadcrumbs"
+  %div.container
+    %div.row
+      %div.col-sm-12
+        %ul.breadcrumb.well
+          %li
+            %a{ href: "/docs" }= "Documentation"
+
+          - if current_resource.data.version
+            %li
+              - if current_resource.parent
+                %a{ href: current_resource.parent.url }= current_resource.data.version
+              - else
+                %a{ href: "#{}" }= current_resource.data.version
+
+          %li.active
+            #{current_resource.data.title}
diff --git a/source/layouts/_head.haml b/source/layouts/_head.haml
@@ -0,0 +1,12 @@
+%head
+  %meta{ charset: "utf-8" }
+  %meta{ "http-equiv" => "X-UA-Compatible", charset: "IE=edge,chrome=1" }
+  %meta{ name: "viewport", content: "width=device-width, initial-scale=1.0" }
+  %title= "Sensu Documentation"
+
+  = stylesheet_link_tag "sensuapp"
+  = favicon_tag "/img/ico/favicon.png"
+  = javascript_include_tag "//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"
+  = javascript_include_tag "bootstrap.js"
+
+  %link{ href: 'http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,300,400,600,700', rel: "stylesheet", type: "text/css" }
diff --git a/source/layouts/_sidebar.haml b/source/layouts/_sidebar.haml
diff --git a/source/layouts/_suggestions.haml b/source/layouts/_suggestions.haml
@@ -0,0 +1,7 @@
+%div.suggestions
+  = stylesheet_link_tag "suggestions"
+  %div.container
+    %div.row
+      %div.col-xs-12.col-md-4.col-md-offset-8
+        - if current_resource.data.next
+          %a.button.btn.btn-large.btn-success.pull-right{ href: current_resource.data.next.url }= "Next: #{current_resource.data.next.text}"
diff --git a/source/layouts/_toc.haml b/source/layouts/_toc.haml
@@ -0,0 +1,6 @@
+%div.tableofcontents
+  = stylesheet_link_tag "toc"
+  - if current_resource.data.version?
+    - unless current_resource.data.hide_toc
+      %div.toc.well
+        = partial "/docs/#{current_resource.data.version}/index"
diff --git a/source/layouts/document.haml b/source/layouts/document.haml
@@ -1,71 +1,20 @@
-%html{ lang: 'en' }
-  %head
-    %meta{ charset: "utf-8" }
-    %meta{ "http-equiv" => "X-UA-Compatible", charset: "IE=edge,chrome=1" }
-    %meta{ name: "viewport", content: "width=device-width, initial-scale=1.0" }
-    %title= "Sensu Documentation"
+- wrap_layout :layout do
 
-    = stylesheet_link_tag "sensuapp"
-    = favicon_tag "/img/ico/favicon.png"
+  = partial "layouts/breadcrumbs"
 
-    %link{ href: 'http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,300,400,600,700', rel: "stylesheet", type: "text/css" }
+  %div.documentation
+    = stylesheet_link_tag "documentation"
+    %div.container
+      %div.row
+        %div.col-md-3.col-sm-4
+          = partial "layouts/toc"
 
-  %body
+        %div.col-md-9.col-sm-8{ id: "documentation" }
 
-    %div
-      // Breadcrumbs
-      %div.container
-        %hr
-        %ul.breadcrumb
-          %li
-            %a{ href: "/docs" }= "Documentation"
-            %span.divider= "/"
+          = partial "layouts/alerts"
 
-          - if current_resource.data.version
-            %li
-              - if current_resource.parent
-                %a{ href: current_resource.parent.url }= current_resource.data.version
-                %span.divider= "/"
-              - else
-                %a{ href: "#{}" }= current_resource.data.version
-                %span.divider= "/"
+          :preserve
+            #{yield}
 
-          %li.active
-            #{current_resource.data.title}
-            %span.divider= "/"
+  = partial "layouts/suggestions"
 
-      // Content
-      %div.container
-        %div.row-fluid
-          - if current_resource.data.version?
-            - unless current_resource.data.hide_toc
-              %div.span3.well#toc
-                = partial "/docs/#{current_resource.data.version}/index"
-
-          %div.span9#documentation
-
-            - if current_resource.data.danger
-              %div.alert.alert-error= current_resource.data.danger
-
-            - if current_resource.data.warning
-              %div.alert.alert= current_resource.data.warning
-
-            - if current_resource.data.info
-              %div.alert.alert-info= current_resource.data.alert
-
-            :preserve
-              #{yield}
-
-      // Suggestions
-      %div.container#suggestions{ style: "margin-top: 30px;" }
-        %div.row-fluid
-          %div.span4{ style: "float: right;" }
-            - if current_resource.data.next
-              %a.button.btn.btn-large.btn-success.pull-right{ href: current_resource.data.next.url }= "Next: #{current_resource.data.next.text}"
-
-      %div.container
-        %hr
-
-  = javascript_include_tag "//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"
-  = javascript_include_tag "bootstrap.js"
-  = javascript_include_tag "header-rollover.js"
diff --git a/source/layouts/layout.haml b/source/layouts/layout.haml
@@ -1,19 +1,5 @@
 %html{ lang: 'en' }
-  %head
-    %meta{ charset: "utf-8" }
-    %meta{ "http-equiv" => "X-UA-Compatible", charset: "IE=edge,chrome=1" }
-    %meta{ name: "viewport", content: "width=device-width, initial-scale=1.0" }
-    %meta{ "http-equiv" => "refresh", "content" => "0; url=/docs/" }
-    %title= "Sensu Documentation | Preview"
+  = partial "layouts/head"
 
-    = stylesheet_link_tag "sensuapp"
-    = favicon_tag "/img/ico/favicon.png"
-
-    %link{ href: 'http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,300,400,600,700', rel: "stylesheet", type: "text/css" }
-
-    %div
-
-      = yield
-
-  = javascript_include_tag "//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"
-  = javascript_include_tag "bootstrap.js"
+  %body
+    = yield