diff --git a/pages/_data/menu.yml b/pages/_data/menu.yml
index 04b8ef708..f527075ed 100644
--- a/pages/_data/menu.yml
+++ b/pages/_data/menu.yml
@@ -8,16 +8,19 @@ forms:
   title: Form elements
   icon: check-square
 
-cards:
-  url: cards.html
-  title: Cards
-  icon: file
-
-theme:
-  title: Theme
-  icon: edit-3
-  pages:
-
+base:
+  title: Base
+  icon: package
+  children:
+    buttons:
+      url: buttons.html
+      title: Buttons
+    cards:
+      url: cards.html
+      title: Cards
+    c:
+      url: c.html
+      title: C
 
 charts:
   url: charts.html
diff --git a/pages/_includes/layout/menu.html b/pages/_includes/layout/menu.html
index 0db32531d..bf699d48f 100644
--- a/pages/_includes/layout/menu.html
+++ b/pages/_includes/layout/menu.html
@@ -1,14 +1,17 @@
 {% removeemptylines %}
-{% assign side = false %}
 <ul class="navbar-nav flex-wrap{% if include.class %} {{ include.class }}{% endif %}">
    {% assign current-page = page.menu | default: layout.menu | split: '.' %}
 
    {% for level-1 in site.data.menu %}
    {% assign icon = level-1[1].icon %}
-   <li
-      class="nav-item{% if level-1[0] == current-page[0] %} active{% endif %}{% if level-1[1].children or level-1[1].docs %} {% if side %}dropright{% else %}dropdown{% endif %}{% endif %}">
-      <a class="nav-link{% if level-1[1].children or level-1[1].docs %} dropdown-toggle{% endif %}" {% if
-         level-1[1].children or level-1[1].docs %}href="#sidebar-{{ level-1[0] }}" data-toggle="dropdown" role="button"
+
+   {% assign has-children = false %}
+   {% if level-1[1].children or level-1[1].docs %}
+      {% assign has-children = true %}
+   {% endif %}
+
+   <li class="nav-item{% if level-1[0] == current-page[0] %} active{% endif %}{% if has-children %} dropdown{% endif %}">
+      <a class="nav-link{% if has-children %} dropdown-toggle{% endif %}" {% if has-children %}href="#navbar-{{ level-1[0] }}" data-toggle="dropdown" role="button"
          aria-expanded="{% if level-1[0] == current-page[0] %}true{% else %}false{% endif %}" {% elsif level-1[1].toggle
          %}href="{{ level-1[1].url }}" data-toggle="{{ level-1[1].toggle }}" {% else
          %}href="{{ site.base }}/{{ level-1[1].url }}" {% endif %}>
@@ -25,9 +28,9 @@
             {% endunless %}
          </span>
       </a>
-      {% if level-1[1].children or level-1[1].docs %}
-      <div class="dropdown-menu">
 
+      {% if has-children %}
+      <div class="dropdown-menu">
          {% if level-1[1].docs %}
          {% for d in site.data.docs %}
          {% assign doc = site.docs | where: "slug", d.page | first %}
diff --git a/pages/_includes/layout/topmenu.html b/pages/_includes/layout/topmenu.html
index 8b85c7ec4..5e67008af 100644
--- a/pages/_includes/layout/topmenu.html
+++ b/pages/_includes/layout/topmenu.html
@@ -1,4 +1,4 @@
-<div class="layout-area-menu navbar {% if include.dark %}navbar-dark{% else %}navbar-light{% endif %}">
+<div class="layout-area-menu navbar navbar-expand-lg {% if include.dark %}navbar-dark{% else %}navbar-light{% endif %}">
    <div class="container">
       {% include layout/menu.html top=true %}
    </div>
diff --git a/scss/_bootstrap-components.scss b/scss/_bootstrap-components.scss
new file mode 100644
index 000000000..cd4dbeb72
--- /dev/null
+++ b/scss/_bootstrap-components.scss
@@ -0,0 +1,33 @@
+@import "~bootstrap/scss/root";
+@import "~bootstrap/scss/reboot";
+@import "~bootstrap/scss/type";
+@import "~bootstrap/scss/images";
+@import "~bootstrap/scss/grid";
+@import "~bootstrap/scss/tables";
+@import "~bootstrap/scss/forms";
+@import "~bootstrap/scss/buttons";
+@import "~bootstrap/scss/transitions";
+@import "~bootstrap/scss/dropdown";
+@import "~bootstrap/scss/button-group";
+@import "~bootstrap/scss/nav";
+@import "~bootstrap/scss/navbar";
+@import "~bootstrap/scss/card";
+@import "~bootstrap/scss/breadcrumb";
+@import "~bootstrap/scss/pagination";
+@import "~bootstrap/scss/badge";
+@import "~bootstrap/scss/alert";
+@import "~bootstrap/scss/progress";
+@import "~bootstrap/scss/list-group";
+@import "~bootstrap/scss/close";
+@import "~bootstrap/scss/toasts";
+@import "~bootstrap/scss/modal";
+@import "~bootstrap/scss/tooltip";
+@import "~bootstrap/scss/popover";
+@import "~bootstrap/scss/carousel";
+@import "~bootstrap/scss/spinners";
+
+// Helpers
+@import "~bootstrap/scss/helpers";
+
+// Utilities
+@import "~bootstrap/scss/utilities/api";
diff --git a/scss/_bootstrap-config.scss b/scss/_bootstrap-config.scss
new file mode 100644
index 000000000..ff297c21d
--- /dev/null
+++ b/scss/_bootstrap-config.scss
@@ -0,0 +1,4 @@
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/mixins";
+@import "~bootstrap/scss/utilities";
diff --git a/scss/_config.scss b/scss/_config.scss
index 506097399..e4d399fb5 100644
--- a/scss/_config.scss
+++ b/scss/_config.scss
@@ -1,4 +1,4 @@
-@import "../node_modules/bootstrap/scss/functions";
+@import "~bootstrap/scss/functions";
 
 @import "variables";
 @import "utilities";
diff --git a/scss/_mixins-override.scss b/scss/_mixins-override.scss
new file mode 100644
index 000000000..dfbe0f567
--- /dev/null
+++ b/scss/_mixins-override.scss
@@ -0,0 +1,39 @@
+@mixin caret($direction: down) {
+  $selector: 'after';
+
+  @if $direction == 'left' {
+    $selector: 'before'
+  }
+
+  &:#{$selector} {
+    content: "";
+    display: inline-block;
+    vertical-align: $caret-vertical-align;
+    width: $caret-width;
+    height: $caret-width;
+    border-bottom: 1px solid;
+    border-left: 1px solid;
+
+    @if $direction != 'left' {
+      margin-left: $caret-spacing;
+    } @else {
+      margin-right: $caret-spacing;
+    }
+
+    @if $direction == down {
+      transform: rotate(-45deg);
+    } @else if $direction == up {
+      transform: rotate(135deg);
+    } @else if $direction == right {
+      transform: rotate(-135deg);
+    } @else {
+      transform: rotate(45deg);
+    }
+  }
+
+  @if $direction == 'left' {
+    &:after {
+      content: none;
+    }
+  }
+}
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 645726b0a..5e5273472 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -3,7 +3,6 @@ $google-font: "Source Sans Pro" !default;
 
 $font-family-sans-serif: $google-font, -apple-system, blinkmacsystemfont, segoe ui, helvetica, arial, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol !default;
 $font-family-serif: "Georgia", "Times New Roman", times, serif !default;
-$font-icons: "tabler-webfont" !default;
 
 // EXTERNAL FONTS
 $icon-fonts: () !default;
@@ -146,6 +145,8 @@ $lead-font-weight: 400 !default;
 $hr-opacity: .1 !default;
 $hr-margin-y: 1rem !default;
 
+$caret-spacing: .4em !default;
+
 //Sizing
 $spacer: 1rem !default;
 $spacers: (
diff --git a/scss/tabler.scss b/scss/tabler.scss
index b2db286e4..57c3067a1 100644
--- a/scss/tabler.scss
+++ b/scss/tabler.scss
@@ -6,7 +6,10 @@
  */
 
 @import "config";
-@import "~bootstrap/scss/bootstrap";
+@import "bootstrap-config";
+@import "mixins-override";
+@import "bootstrap-components";
+
 
 @import "fonts/webfonts";