diff --git a/pages/_includes/layout/sidebar.html b/pages/_includes/layout/sidebar.html
deleted file mode 100644
index ce88020b7..000000000
--- a/pages/_includes/layout/sidebar.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<div>
-	<div class="sidebar">
-		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum expedita hic mollitia nemo, quam vero. Ab alias
-		aliquid animi at corporis doloremque exercitationem, laborum mollitia non quisquam, reiciendis rerum, tempora.
-	</div>
-
-	<div class="sidebar-overlay" data-toggle="sidebar"></div>
-	<a href="#" class="sidebar-btn" data-toggle="sidebar">
-		{% include ui/icon.html icon="sidebar" %}
-	</a>
-</div>
diff --git a/pages/_includes/layout/sidenav-content.html b/pages/_includes/layout/sidenav-content.html
index 483f70c36..241e8fe8a 100644
--- a/pages/_includes/layout/sidenav-content.html
+++ b/pages/_includes/layout/sidenav-content.html
@@ -1,55 +1,57 @@
 {% assign id = 0 | random_id %}
-<a href="{{ site.base }}" class="navbar-brand text-inherit">
-   <img src="{{ site.base }}/img/logo{% if include.logo %}-{{ include.logo }}{% endif %}.svg" alt="" class="navbar-brand-logo">
-</a>
+<div class="p-3">
+   <a href="{{ site.base }}" class="navbar-brand text-inherit">
+      <img src="{{ site.base }}/img/logo{% if include.logo %}-{{ include.logo }}{% endif %}.svg" alt="" class="navbar-brand-logo">
+   </a>
+</div>
 
-<hr class="navbar-divider my-3" />
+<div class="container">
+   <h6 class="navbar-heading">
+      Docs
+   </h6>
 
-<h6 class="navbar-heading">
-   Docs
-</h6>
-
-<ul class="navbar-nav mb-md-4">
-   {% for item in site.data.menu %}
-   {% assign icon = item[1].icon %}
-   <li class="nav-item">
-      <a class="nav-link{% if item[1].active %} active{% endif %}" {% if item[1].children or item[1].docs %}href="#sidebar-{{ item[0] }}" data-toggle="collapse" role="button" aria-expanded="false"{% else %}href="{{ site.base }}/{{ item[1].url }}"{% endif %}>
-         {% include ui/icon.html icon=icon  %}
-         <span class="nav-link-text">{{ item[1].title }}</span>
-         {% if item[1].label %}
-         <span class="badge bg-primary text-white ml-auto">{{ item[1].label }}</span>
-         {% endif %}
-      </a>
-      {% if item[1].children or item[1].docs %}
-      <div class="collapse navbar-collapse" id="sidebar-{{ item[0] }}">
-         <ul class="nav nav-sm flex-column">
-
-            {% if item[1].docs %}
-            {% assign docs-key = item[1].docs %}
-            {% for p in site.docs-menu[docs-key].pages %}
-            {% assign doc = site.docs | where: "slug", p | first %}
-            <li class="nav-item">
-               <a href="{{ site.base }}/docs/{{ doc.slug }}.html" class="nav-link">
-                  {{ doc.title }}
-               </a>
-            </li>
-            {% endfor %}
+   <ul class="navbar-nav mb-md-4">
+      {% for item in site.data.menu %}
+      {% assign icon = item[1].icon %}
+      <li class="nav-item">
+         <a class="nav-link{% if item[1].active %} active{% endif %}" {% if item[1].children or item[1].docs %}href="#sidebar-{{ item[0] }}" data-toggle="collapse" role="button" aria-expanded="false"{% else %}href="{{ site.base }}/{{ item[1].url }}"{% endif %}>
+            {% include ui/icon.html icon=icon  %}
+            <span class="nav-link-text">{{ item[1].title }}</span>
+            {% if item[1].label %}
+            <span class="badge bg-primary text-white ml-auto">{{ item[1].label }}</span>
             {% endif %}
-         </ul>
-      </div>
-      {% endif %}
-   </li>
-   {% endfor %}
-   <li class="nav-item dropdown">
-      <a class="nav-link" href="#" >
-         {% include ui/icon.html icon="book-open" %}
-         <span class="nav-link-text">Components</span>
-      </a>
-   </li>
-   <li class="nav-item">
-      <a class="nav-link" href="#">
-         {% include ui/icon.html icon="git-branch" %}
-         <span class="nav-link-text">Changelog</span>
-      </a>
-   </li>
-</ul>
+         </a>
+         {% if item[1].children or item[1].docs %}
+         <div class="collapse navbar-collapse" id="sidebar-{{ item[0] }}">
+            <ul class="nav nav-sm flex-column">
+
+               {% if item[1].docs %}
+               {% assign docs-key = item[1].docs %}
+               {% for p in site.docs-menu[docs-key].pages %}
+               {% assign doc = site.docs | where: "slug", p | first %}
+               <li class="nav-item">
+                  <a href="{{ site.base }}/docs/{{ doc.slug }}.html" class="nav-link">
+                     {{ doc.title }}
+                  </a>
+               </li>
+               {% endfor %}
+               {% endif %}
+            </ul>
+         </div>
+         {% endif %}
+      </li>
+      {% endfor %}
+      <li class="nav-item dropdown">
+         <a class="nav-link" href="#" >
+            {% include ui/icon.html icon="book-open" %}
+            <span class="nav-link-text">Components</span>
+         </a>
+      </li>
+      <li class="nav-item">
+         <a class="nav-link" href="#">
+            {% include ui/icon.html icon="git-branch" %}
+            <span class="nav-link-text">Changelog</span>
+         </a>
+      </li>
+   </ul>
+</div>
diff --git a/pages/_includes/layout/sidenav.html b/pages/_includes/layout/sidenav.html
index b3c9f9eac..91dc9f5db 100644
--- a/pages/_includes/layout/sidenav.html
+++ b/pages/_includes/layout/sidenav.html
@@ -1,12 +1,3 @@
-<div class="sidenav sidenav-dark sidenav-expand-md">
-   <div class="container">
-      {% include layout/sidenav-content.html logo="white" %}
-   </div>
+<div class="sidenav sidenav-expand-md">
+   {% include layout/sidenav-content.html logo="white" %}
 </div>
-{% comment %}
-<div class="sidenav sidenav-expand-xl">
-   <div class="container">
-      {% include layout/sidenav-content.html%}
-   </div>
-</div>
-{% endcomment %}
diff --git a/pages/_layouts/base.html b/pages/_layouts/base.html
index 547f58d8d..fcbce86f3 100644
--- a/pages/_layouts/base.html
+++ b/pages/_layouts/base.html
@@ -23,7 +23,7 @@
 	{% include_cached layout/css.html %}
 	{% include_cached layout/js.html %}
 </head>
-<body class="antialiased{% if page.dark-theme %} theme-dark{% endif %}">
+<body class="antialiased{% if page.dark-theme %} theme-dark{% endif %}{% if layout.body-class %} {{ layout.body-class }}{% endif %}{% if page.body-class %} {{ page.body-class }}{% endif %}">
 
    {{ content}}
 
diff --git a/pages/_layouts/error.html b/pages/_layouts/error.html
index 581bef273..a8fd5aae5 100644
--- a/pages/_layouts/error.html
+++ b/pages/_layouts/error.html
@@ -1,5 +1,6 @@
 ---
 layout: base
+body-class: border-top-2 border-primary
 ---
 
 {% assign error = site.data.errors[page.error] %}
@@ -13,7 +14,7 @@ layout: base
 		{% else %}
 			<div class="display-3 text-muted mb-3">{{ page.error }}</div>
 
-			<h1 class="h2 mb-3">Oops&hellip; You just found an error page</h1>
+			<h1 class="h2 mb-3 font-weight-bolder">Oops&hellip; You just found an error page 😭</h1>
 			<p class="h4 text-muted font-weight-normal mb-5">{{ error }}</p>
 
 			<a class="btn btn-primary" href="javascript:history.back()">
diff --git a/scss/layout/_core.scss b/scss/layout/_core.scss
index 65ca1f723..1b81177c7 100644
--- a/scss/layout/_core.scss
+++ b/scss/layout/_core.scss
@@ -4,6 +4,7 @@ html {
 }
 
 body {
+  height: 100%;
   overflow-y: scroll;
   touch-action: manipulation;
   -webkit-tap-highlight-color: transparent;
diff --git a/scss/layout/_sidenav.scss b/scss/layout/_sidenav.scss
index 5770811b1..67ec4a320 100644
--- a/scss/layout/_sidenav.scss
+++ b/scss/layout/_sidenav.scss
@@ -4,7 +4,6 @@ Sidebar
 .sidenav {
   width: 16rem;
   min-width: 16rem;
-  padding: .75rem 1rem;
   background: $sidenav-bg;
   border-right: 1px solid $sidenav-border-color;
 
@@ -40,8 +39,6 @@ Sidebar
   }
 
   .navbar-brand {
-    padding-top: 1rem;
-    padding-bottom: 1rem;
     text-align: center;
   }
 
diff --git a/scss/utils/_border.scss b/scss/utils/_border.scss
index b3d06fb2f..0db3ff555 100644
--- a/scss/utils/_border.scss
+++ b/scss/utils/_border.scss
@@ -1,9 +1,41 @@
 // stylelint-disable declaration-no-important
+$border-sizing: () !default;
+$border-sizing: map-merge((
+  2: 2,
+  4: 4
+), $border-sizing);
 
-.b-dashed{
+@each $size, $value in $border-sizing {
+
+  .border-#{$size} {
+    border-width: $border-width * $value !important;
+  }
+
+  .border-top-#{$size} {
+    border-top-width: $border-width * $value !important;
+    border-top-style: solid;
+  }
+
+  .border-right-#{$size} {
+    border-right-width: $border-width * $value !important;
+    border-right-style: solid;
+  }
+
+  .border-bottom-#{$size} {
+    border-bottom-width: $border-width * $value !important;
+    border-bottom-style: solid;
+  }
+
+  .border-left-#{$size} {
+    border-left-width: $border-width * $value !important;
+    border-left-style: solid;
+  }
+}
+
+.border-dashed {
   border-style: dashed !important;
 }
 
-.b-transparent{
+.border-transparent {
   border-color: transparent !important;
 }