diff --git a/pages/_components/input-colors.html b/pages/_components/input-colors.html
new file mode 100644
index 000000000..a1cf23c9b
--- /dev/null
+++ b/pages/_components/input-colors.html
@@ -0,0 +1,6 @@
+---
+title: Color input
+columns: false
+---
+
+{% include parts/input-color.html %}
diff --git a/pages/_components/simple-card.html b/pages/_components/simple-card.html
index 46d5aa4f4..0f21810e2 100644
--- a/pages/_components/simple-card.html
+++ b/pages/_components/simple-card.html
@@ -1,5 +1,6 @@
 ---
 name: Simple box
+columns: 1
 ---
 
 {% include cards/card.html %}
diff --git a/pages/_components/widget-revenue.html b/pages/_components/widget-revenue.html
new file mode 100644
index 000000000..b7644c126
--- /dev/null
+++ b/pages/_components/widget-revenue.html
@@ -0,0 +1,6 @@
+---
+title: Revenue chart
+columns: 1
+---
+
+{% include cards/charts/revenue.html %}
diff --git a/pages/_components/widget-sales.html b/pages/_components/widget-sales.html
index ca2a1f2e4..6b76222be 100644
--- a/pages/_components/widget-sales.html
+++ b/pages/_components/widget-sales.html
@@ -1,5 +1,6 @@
 ---
 title: Sales widget
+columns: 1
 ---
 
 {% include cards/charts/sales.html %}
diff --git a/pages/_data/menu.yml b/pages/_data/menu.yml
index 9e8790b71..4a4644e99 100644
--- a/pages/_data/menu.yml
+++ b/pages/_data/menu.yml
@@ -61,6 +61,11 @@ changelog:
   icon: file-plus
   label: v1.0
 
+components:
+  url: components.html
+  title: Components
+  icon: truck
+
 customize:
   url: '#customize'
   title: Customize
diff --git a/pages/_includes/cards/charts/revenue.html b/pages/_includes/cards/charts/revenue.html
new file mode 100644
index 000000000..cb2dfd296
--- /dev/null
+++ b/pages/_includes/cards/charts/revenue.html
@@ -0,0 +1,18 @@
+<div class="card">
+   <div class="card-body">
+      <div class="d-flex">
+         <div>Revenue</div>
+         <div class="ml-auto">
+            {% include parts/dropdown/days.html %}
+         </div>
+      </div>
+      <div class="d-flex align-items-baseline">
+         <div class="h1 mb-0 mr-2">$4,300</div>
+         <div class="mr-auto text-green">
+            24% {% include ui/icon.html icon="trending-up" class="icon-thin" %}
+         </div>
+      </div>
+   </div>
+   <div class="card-chart" id="card-chart-1"></div>
+   {% include js/charts.html id="card-chart-1" chart-id="revenue-bg" %}
+</div>
diff --git a/pages/_includes/layout/homepage.html b/pages/_includes/layout/homepage.html
index 5ba86153c..d74af3e22 100644
--- a/pages/_includes/layout/homepage.html
+++ b/pages/_includes/layout/homepage.html
@@ -3,24 +3,7 @@
       {% include cards/charts/sales.html %}
    </div>
    <div class="col-sm-6 col-lg-3">
-      <div class="card">
-         <div class="card-body">
-            <div class="d-flex">
-               <div>Revenue</div>
-               <div class="ml-auto">
-                  {% include parts/dropdown/days.html %}
-               </div>
-            </div>
-            <div class="d-flex align-items-baseline">
-               <div class="h1 mb-0 mr-2">$4,300</div>
-               <div class="mr-auto text-green">
-                  24% {% include ui/icon.html icon="trending-up" class="icon-thin" %}
-               </div>
-            </div>
-         </div>
-         <div class="card-chart" id="card-chart-1"></div>
-         {% include js/charts.html id="card-chart-1" chart-id="revenue-bg" %}
-      </div>
+      {% include cards/charts/revenue.html %}
    </div>
    <div class="col-sm-6 col-lg-3">
       <div class="card">
diff --git a/pages/_includes/parts/input-color.html b/pages/_includes/parts/input-color.html
index 60463a750..d6e5940cd 100644
--- a/pages/_includes/parts/input-color.html
+++ b/pages/_includes/parts/input-color.html
@@ -1,4 +1,4 @@
-<div class="mb-2">
+<div class="mb-3">
 	<label class="form-label">Color Input</label>
 	<div class="row row-xs">
 		{% for color in site.colors limit: 9 offset: 1 %}
diff --git a/pages/_includes/redirect.html b/pages/_includes/redirect.html
new file mode 100644
index 000000000..4e523f21b
--- /dev/null
+++ b/pages/_includes/redirect.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<meta charset="utf-8">
+<title>Redirecting&hellip;</title>
+<link rel="canonical" href="{{ site.base }}{{ include.url }}">
+<meta http-equiv="refresh" content="0; url={{ site.base }}{{ include.url }}">
+<meta name="robots" content="noindex">
+<noscript><a href="{{ site.base }}{{ include.url }}">Click here if you are not redirected.</a></noscript>
+<script>location="{{ site.base }}{{ include.url }}";</script>
+</html>
diff --git a/pages/_layouts/component.html b/pages/_layouts/component.html
index fc2142563..cb13fdbeb 100644
--- a/pages/_layouts/component.html
+++ b/pages/_layouts/component.html
@@ -1,18 +1,27 @@
 ---
-layout: base
+layout: default
+menu: components
 ---
 
 {% assign columns = page.columns | default: 0 %}
-{% assign columns = 1 %}
 
-<div class="container">
-   <div class="d-flex align-items-center justify-content-center p-5" style="min-height: 50vh">
-      <div class="flex-fill "{% if columns > 0 %} style="max-width: {{ columns | times: 298 | minus: 24 }}px"{% endif %}>
-         {{ content }}
+<div class="row">
+   <div class="col-3">
+      <div class="list-group list-group-transparent mb-0">
+         {% for component in site.components %}
+         <a href="{{ component.url }}" class="list-group-item list-group-item-action{% if component.url == page.url %} active{% endif %}">{{ component.title }}</a>
+         {% endfor %}
+      </div>
+   </div>
+   <div class="col-9">
+      <div class="d-flex align-items-center justify-content-center p-5" style="min-height: 50vh">
+         <div {% if columns > 0 %}class="flex-fill" style="max-width: {{ columns | times: 298 | minus: 24 }}px"{% endif %}>
+            {{ content }}
+         </div>
+      </div>
+
+      <div class="highlight highlight-dark m-0">
+         {{ content | highlight_tidy: 'html' }}
       </div>
    </div>
 </div>
-
-<div>
-   {{ content | highlight_tidy }}
-</div>
diff --git a/pages/_layouts/redirect.html b/pages/_layouts/redirect.html
index 8fffa70fa..873b90485 100644
--- a/pages/_layouts/redirect.html
+++ b/pages/_layouts/redirect.html
@@ -1,10 +1 @@
-<!DOCTYPE html>
-<html lang="en-US">
-<meta charset="utf-8">
-<title>Redirecting&hellip;</title>
-<link rel="canonical" href="{{ page.redirect_to }}">
-<meta http-equiv="refresh" content="0; url={{ page.redirect_to }}">
-<meta name="robots" content="noindex">
-<noscript><a href="{{ page.redirect_to }}">Click here if you are not redirected.</a></noscript>
-<script>location = "{{ page.redirect_to }}"{{ site.base }}/script>
-</html>
\ No newline at end of file
+{% include redirect.html url=page.redirect.to %}
diff --git a/pages/_plugins/jekyll-example.rb b/pages/_plugins/jekyll-example.rb
index a618f602c..e3a747e7e 100644
--- a/pages/_plugins/jekyll-example.rb
+++ b/pages/_plugins/jekyll-example.rb
@@ -1,8 +1,9 @@
 require 'htmlbeautifier'
 
-def render_rouge(code, lang, line_numbers = false)
+def render_rouge(code, lang, dark = false)
   require 'rouge'
-  formatter = Rouge::Formatters::HTML.new(line_numbers: line_numbers, wrap: false)
+
+  formatter = Rouge::Formatters::HTML.new()
   lexer = Rouge::Lexer.find_fancy(lang, code) || Rouge::Lexers::PlainText
 
   code = HtmlBeautifier.beautify(code, indent: "\t")
@@ -14,8 +15,7 @@ def render_rouge(code, lang, line_numbers = false)
   code = code.gsub "javascript:void(0)", "#"
   code = code.gsub "../", "./"
 
-
-  "<div class=\"highlight\"><pre>#{code}</pre></div>"
+  "<pre>#{code}</pre>"
 end
 
 def add_code_tag(code, lang)
@@ -81,14 +81,14 @@ Valid syntax: example <lang> [id=foo]
     def example(output)
       output = output.gsub(/<hide>/, "").gsub(/<\/hide>/, "")
 
-      "<div class=\"example" + (@options[:columns] ? " example-bg" : "") + "\"" + (@options[:id] ? " data-example-id=\"#{@options[:id]}\"" : "") + ">\n" + (@options[:columns] ? "<div class=\"example-column example-column-" + @options[:columns] + "\">\n" : "") + (@options[:wrapper] ? "<div class=\"" + @options[:wrapper] + "\">\n" : "") + (@options[:"max-width"] ? "<div style=\"max-width: " + @options[:"max-width"] + "px; margin: 0 auto;\">\n" : "") + "#{output}" + (@options[:wrapper] ? "\n</div>" : "") + (@options[:columns] ? "\n</div>" : "") + (@options[:"max-width"] ? "\n</div>" : "") + "\n</div>"
+      "<div class=\"example" + (@options[:columns] ? " example-bg" : "") + "\"" + (@options[:id] ? " data-example-id=\"#{@options[:id]}\"" : "") + ">\n" + (@options[:columns] ? "<div class=\"example-column example-column-" + @options[:columns] + "\">\n" : "") + (@options[:wrapper] ? "<div class=\"" + @options[:wrapper] + "\">\n" : "") + (@options[:"max-width"] ? "<div style=\"max-width: " + @options[:"max-width"] + "px; margin: 0 auto;\">\n" : "") + "<div class=\"highlight\">#{output}</div>" + (@options[:wrapper] ? "\n</div>" : "") + (@options[:columns] ? "\n</div>" : "") + (@options[:"max-width"] ? "\n</div>" : "") + "\n</div>"
     end
 
   end
 
   module HightlightFilter
-    def highlight_tidy(code, language = 'html')
-      code = render_rouge(code, language)
+    def highlight_tidy(code, language = 'html', dark = false)
+      code = render_rouge(code, language, dark)
       add_code_tag(code, language)
     end
   end
diff --git a/pages/charts.html b/pages/charts.html
index f31208094..84b3346c7 100644
--- a/pages/charts.html
+++ b/pages/charts.html
@@ -3,15 +3,15 @@ title: Charts
 menu: charts
 ---
 
-	<div class="row row-cards">
-		{% for chart in site.data.charts %}
-		{% if chart[1].display %}
-		{% assign chart-name = chart[0] %}
-		{% assign chart-data = chart[1] %}
-		<div class="col-lg-6 col-xl-4">
-			{% include cards/charts/card.html name=chart-name data=chart-data %}
-		</div>
-		{% endif %}
-		{% endfor %}
+<div class="row row-cards">
+   {% for chart in site.data.charts %}
+   {% if chart[1].display %}
+   {% assign chart-name = chart[0] %}
+   {% assign chart-data = chart[1] %}
+   <div class="col-lg-6 col-xl-4">
+      {% include cards/charts/card.html name=chart-name data=chart-data %}
+   </div>
+   {% endif %}
+   {% endfor %}
 
-	</div>
+</div>
diff --git a/pages/components.html b/pages/components.html
index 3f3e83e4b..31ec58229 100644
--- a/pages/components.html
+++ b/pages/components.html
@@ -1,11 +1,7 @@
 ---
+layout: none
 title: Table UI components
+redirect_from:
+- components/index.html
 ---
-
-<div class="container">
-   <ul>
-      {% for component in site.components %}
-      <li><a href="{{ component.url }}">{{ component.title }}</a></li>
-      {% endfor %}
-   </ul>
-</div>
+{% assign url = "." %}{% for component in site.components limit: 1 %}{% assign url = component.url %}{% endfor %}{% include redirect.html url=url %}
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 7fc7e0b35..3b7123857 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -43,7 +43,7 @@ $dark: #1c2c41 !default;
 $black: #000 !default;
 $white: #fff !default;
 
-$body-bg: #f8fafb !default;
+$body-bg: #f7fafc !default;
 
 $text-color: #495057 !default;
 $text-muted: #888e9a !default;
diff --git a/scss/ui/_highlight.scss b/scss/ui/_highlight.scss
index 4398dc16a..2fcdb1f43 100644
--- a/scss/ui/_highlight.scss
+++ b/scss/ui/_highlight.scss
@@ -10,6 +10,9 @@
   pre {
     margin-bottom: 0;
     background-color: transparent;
+    color: inherit;
+    height: 100%;
+    white-space: pre-wrap;
   }
 
   // stylelint-disable selector-class-pattern
@@ -96,9 +99,7 @@
   .nb {
     color: #366;
   }
-  .nc {
-    color: #0a8;
-  }
+  .nc { color: #0a8;}
   .no {
     color: #360;
   }
@@ -213,3 +214,73 @@
     user-select: none;
   }
 }
+
+.highlight-dark {
+  background: $dark;
+  color: $white;
+  border-color: transparent;
+
+  .c { color: #75715e } /* Comment */
+  .err { color: #960050; background-color: #1e0010 } /* Error */
+  .k { color: #66d9ef } /* Keyword */
+  .l { color: #ae81ff } /* Literal */
+  .n { color: #f8f8f2 } /* Name */
+  .o { color: #f92672 } /* Operator */
+  .p { color: #f8f8f2 } /* Punctuation */
+  .cm { color: #75715e } /* Comment.Multiline */
+  .cp { color: #75715e } /* Comment.Preproc */
+  .c1 { color: #75715e } /* Comment.Single */
+  .cs { color: #75715e } /* Comment.Special */
+  .ge { font-style: italic } /* Generic.Emph */
+  .gs { font-weight: bold } /* Generic.Strong */
+  .kc { color: #66d9ef } /* Keyword.Constant */
+  .kd { color: #66d9ef } /* Keyword.Declaration */
+  .kn { color: #f92672 } /* Keyword.Namespace */
+  .kp { color: #66d9ef } /* Keyword.Pseudo */
+  .kr { color: #66d9ef } /* Keyword.Reserved */
+  .kt { color: #66d9ef } /* Keyword.Type */
+  .ld { color: #e6db74 } /* Literal.Date */
+  .m { color: #ae81ff } /* Literal.Number */
+  .s { color: #e6db74 } /* Literal.String */
+  .na { color: #a6e22e } /* Name.Attribute */
+  .nb { color: #f8f8f2 } /* Name.Builtin */
+  .nc { color: #a6e22e } /* Name.Class */
+  .no { color: #66d9ef } /* Name.Constant */
+  .nd { color: #a6e22e } /* Name.Decorator */
+  .ni { color: #f8f8f2 } /* Name.Entity */
+  .ne { color: #a6e22e } /* Name.Exception */
+  .nf { color: #a6e22e } /* Name.Function */
+  .nl { color: #f8f8f2 } /* Name.Label */
+  .nn { color: #f8f8f2 } /* Name.Namespace */
+  .nx { color: #a6e22e } /* Name.Other */
+  .py { color: #f8f8f2 } /* Name.Property */
+  .nt { color: #f92672 } /* Name.Tag */
+  .nv { color: #f8f8f2 } /* Name.Variable */
+  .ow { color: #f92672 } /* Operator.Word */
+  .w { color: #f8f8f2 } /* Text.Whitespace */
+  .mf { color: #ae81ff } /* Literal.Number.Float */
+  .mh { color: #ae81ff } /* Literal.Number.Hex */
+  .mi { color: #ae81ff } /* Literal.Number.Integer */
+  .mo { color: #ae81ff } /* Literal.Number.Oct */
+  .sb { color: #e6db74 } /* Literal.String.Backtick */
+  .sc { color: #e6db74 } /* Literal.String.Char */
+  .sd { color: #e6db74 } /* Literal.String.Doc */
+  .s2 { color: #e6db74 } /* Literal.String.Double */
+  .se { color: #ae81ff } /* Literal.String.Escape */
+  .sh { color: #e6db74 } /* Literal.String.Heredoc */
+  .si { color: #e6db74 } /* Literal.String.Interpol */
+  .sx { color: #e6db74 } /* Literal.String.Other */
+  .sr { color: #e6db74 } /* Literal.String.Regex */
+  .s1 { color: #e6db74 } /* Literal.String.Single */
+  .ss { color: #e6db74 } /* Literal.String.Symbol */
+  .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */
+  .vc { color: #f8f8f2 } /* Name.Variable.Class */
+  .vg { color: #f8f8f2 } /* Name.Variable.Global */
+  .vi { color: #f8f8f2 } /* Name.Variable.Instance */
+  .il { color: #ae81ff } /* Literal.Number.Integer.Long */
+
+  .gh { } /* Generic Heading & Diff Header */
+  .gu { color: #75715e; } /* Generic.Subheading & Diff Unified/Comment? */
+  .gd { color: #f92672; } /* Generic.Deleted & Diff Deleted */
+  .gi { color: #a6e22e; } /* Generic.Inserted & Diff Inserted */
+}