diff --git a/package-lock.json b/package-lock.json
index a9683e7a..dedb1036 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -784,6 +784,11 @@
         "hoek": "4.2.1"
       }
     },
+    "bootstrap": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.1.0.tgz",
+      "integrity": "sha512-kCo82nE8qYVfOa/Z3hL98CPgPIEkh6iPdiJrUJMQ9n9r0+6PEET7cmhLlV0XVYmEj5QtKIOaSGMLxy5jSFhKog=="
+    },
     "boxen": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/boxen/-/boxen-1.3.0.tgz",
@@ -3829,8 +3834,7 @@
         "jsbn": {
           "version": "0.1.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "json-schema": {
           "version": "0.2.3",
diff --git a/package.json b/package.json
index 05b1f239..6c362dfd 100644
--- a/package.json
+++ b/package.json
@@ -91,6 +91,7 @@
     "@microsoft/microsoft-graph-client": "1.0.0",
     "angular2-toaster": "4.0.2",
     "angulartics2": "5.0.1",
+    "bootstrap": "4.1.0",
     "core-js": "2.4.1",
     "electron-log": "2.2.14",
     "electron-store": "1.3.0",
diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html
index 6773143e..8cd5ca7b 100644
--- a/src/app/dashboard/dashboard.component.html
+++ b/src/app/dashboard/dashboard.component.html
@@ -1 +1,3 @@
+<i class="fa fa-rocket"></i>
+
 The dashboard!!
diff --git a/src/scss/base.scss b/src/scss/base.scss
deleted file mode 100644
index c6512be2..00000000
--- a/src/scss/base.scss
+++ /dev/null
@@ -1,75 +0,0 @@
-@import "variables.scss";
-
-* {
-    box-sizing: border-box;
-    padding: 0;
-    margin: 0;
-}
-
-html, body {
-    height: 100%;
-    background-color: $background-color-alt2;
-    font-family: $font-family-sans-serif;
-    font-size: $font-size-base;
-    color: $text-color;
-    line-height: $line-height-base;
-}
-
-h1, h2, h3, h4, h5, h6 {
-    font-family: $font-family-sans-serif;
-    color: $text-color;
-}
-
-p {
-    margin-bottom: 10px;
-}
-
-ul, ol {
-    margin-bottom: 10px;
-}
-
-img {
-    border: none;
-}
-
-a {
-    color: $brand-primary;
-    text-decoration: none;
-
-    &:hover, &:focus {
-        color: darken($brand-primary, 6%);
-    }
-}
-
-input, select, textarea, button {
-    font-size: $font-size-base;
-    font-family: $font-family-sans-serif;
-}
-
-button {
-    white-space: nowrap;
-    cursor: pointer;
-}
-
-textarea {
-    resize: vertical;
-}
-
-div:not(.modal)::-webkit-scrollbar {
-    width: 10px;
-    height: 10px;
-}
-
-div:not(.modal)::-webkit-scrollbar-track {
-    background-color: transparent;
-}
-
-div:not(.modal)::-webkit-scrollbar-thumb {
-    background-color: rgba(100,100,100,.2);
-    border-radius: 10px;
-    margin-right: 1px;
-
-    &:hover {
-        background-color: rgba(100,100,100,.4);
-    }
-}
diff --git a/src/scss/bootstrap.scss b/src/scss/bootstrap.scss
new file mode 100644
index 00000000..27f6055c
--- /dev/null
+++ b/src/scss/bootstrap.scss
@@ -0,0 +1,11 @@
+$theme-colors: ( "primary": #3c8dbc, "primary-accent": #286090, "danger": #dd4b39, "success": #00a65a, "info": #555555, "warning": #bf7e16);
+$font-family-sans-serif: 'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+
+$h1-font-size: 2rem;
+$h2-font-size: 1.3rem;
+$h3-font-size: 1rem;
+$h4-font-size: 1rem;
+$h5-font-size: 1rem;
+$h6-font-size: 1rem;
+
+@import "~bootstrap/scss/bootstrap.scss";
diff --git a/src/scss/box.scss b/src/scss/box.scss
deleted file mode 100644
index 0e04ad77..00000000
--- a/src/scss/box.scss
+++ /dev/null
@@ -1,260 +0,0 @@
-@import "variables.scss";
-
-.box {
-    width: 100%;
-
-    .box-header {
-        margin: 0 10px 5px 10px;
-        color: $gray-light;
-        text-transform: uppercase;
-
-        button {
-            background-color: transparent;
-            border: none;
-            color: $gray-light;
-            text-transform: uppercase;
-        }
-    }
-
-    .box-content {
-        background: $box-background-color;
-        border-radius: $border-radius;
-        box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
-
-        &.box-content-padded {
-            padding: 10px 15px;
-        }
-
-        .box-content-row {
-            display: block;
-            padding: 10px 15px;
-            position: relative;
-            z-index: 1;
-
-            &:before {
-                content: "";
-                position: absolute;
-                right: 0;
-                bottom: 0;
-                height: 1px;
-                width: calc(100% - 10px);
-                border-bottom: 1px solid $box-border-color;
-            }
-
-            &:first-child, &:last-child {
-                border-radius: $border-radius;
-            }
-
-            &:last-child {
-                &:before {
-                    border: none;
-                    height: 0;
-                }
-            }
-
-            &:after {
-                content: "";
-                display: table;
-                clear: both;
-            }
-
-            &:hover, &:focus, &.active {
-                background-color: $box-background-hover-color;
-            }
-
-            &.pre {
-                white-space: pre;
-                overflow-x: auto;
-            }
-
-            .row-label, label {
-                font-size: $font-size-small;
-                color: $text-muted;
-                display: block;
-                width: 100%;
-                margin-bottom: 5px;
-            }
-
-            .text, .detail {
-                display: block;
-                color: $text-color;
-            }
-
-            .detail {
-                font-size: $font-size-small;
-                color: $text-muted;
-            }
-
-            .img-right {
-                float: right;
-                margin-left: 10px;
-            }
-
-            .row-main {
-                flex-grow: 1;
-            }
-
-            &.box-content-row-flex, &.box-content-row-checkbox, &.box-content-row-input,
-            &.box-content-row-slider, &.box-content-row-multi {
-                display: flex;
-                align-items: center;
-                word-break: break-word;
-            }
-
-            &.box-content-row-multi {
-                width: 100%;
-
-                input:not([type="checkbox"]) {
-                    width: 100%;
-                }
-
-                input + label.sr-only + select {
-                    margin-top: 5px;
-                }
-
-                > a {
-                    padding: 8px 8px 8px 4px;
-                    color: $brand-danger;
-                    margin: 0;
-                }
-            }
-
-            &.box-content-row-checkbox, &.box-content-row-input, &.box-content-row-slider {
-                label, .row-label {
-                    font-size: $font-size-base;
-                    color: $text-color;
-                    display: inline;
-                    width: initial;
-                    margin-bottom: 0;
-                }
-
-                > span {
-                    color: $text-muted;
-                }
-
-                > input {
-                    margin: 0 0 0 auto;
-                    padding: 0;
-                }
-
-                > * {
-                    margin-right: 15px;
-
-                    &:last-child {
-                        margin-right: 0;
-                    }
-                }
-            }
-
-            &.box-content-row-input {
-                label {
-                    white-space: nowrap;
-                }
-
-                input {
-                    text-align: right;
-                }
-            }
-
-            &.box-content-row-slider {
-                input[type="range"] {
-                    height: 10px;
-                }
-
-                input[type="number"] {
-                    width: 45px;
-                }
-
-                label {
-                    white-space: nowrap;
-                }
-            }
-
-            input:not([type="checkbox"]), textarea {
-                border: none;
-                width: 100%;
-                background-color: transparent;
-
-                &::-webkit-input-placeholder {
-                    color: lighten($gray-light, 35%);
-                }
-
-                &:focus {
-                    outline: none;
-                }
-            }
-
-            select {
-                width: 100%;
-                border: 1px solid darken($border-color-dark, 7%);
-                border-radius: $border-radius;
-            }
-
-            .action-buttons {
-                display: flex;
-                margin-left: 5px;
-
-                .row-btn {
-                    cursor: pointer;
-                    padding: 10px 8px;
-                    background: none;
-                    border: none;
-                    color: $brand-primary;
-
-                    &:hover, &:focus {
-                        color: darken($brand-primary, 10%);
-                    }
-
-                    &.disabled {
-                        color: $list-icon-color;
-
-                        &:hover {
-                            color: $list-icon-color;
-                        }
-                    }
-
-                    &:last-child {
-                        padding-right: 2px !important;
-                    }
-                }
-
-                &.no-pad .row-btn {
-                    padding-top: 0;
-                    padding-bottom: 0;
-                }
-            }
-
-            select.field-type {
-                margin: 5px 0 0 25px;
-                width: calc(100% - 25px);
-            }
-
-            .row-sub-icon {
-                color: $list-icon-color;
-            }
-
-            .row-sub-label {
-                margin: 0 15px;
-                color: $gray-light;
-                white-space: nowrap;
-            }
-        }
-
-        &.condensed .box-content-row, .box-content-row.condensed {
-            padding-top: 5px;
-            padding-bottom: 5px;
-        }
-
-        &.no-hover .box-content-row, .box-content-row.no-hover {
-            &:hover, &:focus {
-                background-color: initial;
-            }
-        }
-    }
-
-    .box-footer {
-        margin: 5px 10px;
-        font-size: $font-size-small;
-        color: $text-muted;
-    }
-}
diff --git a/src/scss/buttons.scss b/src/scss/buttons.scss
deleted file mode 100644
index 1aadad7c..00000000
--- a/src/scss/buttons.scss
+++ /dev/null
@@ -1,70 +0,0 @@
-@import "variables.scss";
-
-.btn, #vault .footer button, .modal-footer button {
-    background-color: $button-backgound-color;
-    border-radius: $border-radius;
-    padding: 7px 15px;
-    border: 1px solid $button-border-color;
-    font-size: $font-size-base;
-    color: $button-color;
-    white-space: nowrap;
-    text-align: center;
-    cursor: pointer;
-
-    &.primary {
-        color: $button-color-primary;
-    }
-
-    &.danger {
-        color: $button-color-danger;
-    }
-
-    &:hover:not([disabled]) {
-        cursor: pointer;
-        background-color: darken($button-backgound-color, 1.5%);
-        border-color: darken($button-border-color, 17%);
-        color: darken($button-color, 10%);
-
-        &.primary {
-            color: darken($button-color-primary, 6%);
-        }
-
-        &.danger {
-            color: darken($button-color-danger, 6%);
-        }
-    }
-
-    &:focus:not([disabled]) {
-        cursor: pointer;
-        background-color: darken($button-backgound-color, 6%);
-        border-color: darken($button-border-color, 25%);
-        outline: 0;
-    }
-
-    &[disabled] {
-        opacity: 0.65;
-        cursor: default !important;
-    }
-
-    &.block {
-        display: block;
-        width: 100%;
-    }
-
-    &.link {
-        border: none !important;
-        background: none !important;
-
-        &:focus {
-            text-decoration: underline;
-        }
-    }
-}
-
-.action-buttons {
-    .btn {
-        &:focus {
-            outline: auto;
-        }
-    }
-}
diff --git a/src/scss/environment.scss b/src/scss/environment.scss
index 95ce9ffa..0809a564 100644
--- a/src/scss/environment.scss
+++ b/src/scss/environment.scss
@@ -1,7 +1,7 @@
-@import "variables.scss";
+@import "bootstrap.scss";
 
 html.os_windows {
     body {
-        border-top: 1px solid $border-color-dark;
+        border-top: 1px solid $gray-400;
     }
 }
diff --git a/src/scss/list.scss b/src/scss/list.scss
deleted file mode 100644
index a0e1becf..00000000
--- a/src/scss/list.scss
+++ /dev/null
@@ -1,76 +0,0 @@
-@import "variables.scss";
-
-.list > a {
-    display: block;
-    padding: 3px 10px;
-    background-color: white;
-    text-decoration: none;
-    color: $text-color;
-    position: relative;
-    z-index: 1;
-
-    &:after {
-        content: "";
-        display: table;
-        clear: both;
-    }
-
-    &:before {
-        content: "";
-        position: absolute;
-        right: 0;
-        bottom: 0;
-        height: 1px;
-        width: calc(100% - 10px);
-        border-bottom: 1px solid $border-color;
-    }
-
-    &:last-child:before {
-        border: none;
-        height: 0;
-    }
-
-    &:hover, &:focus, &.active {
-        background-color: $list-item-hover;
-    }
-
-    &.active {
-        border-left: 5px solid $brand-primary;
-        padding-left: 5px;
-    }
-
-    &:focus:not(.active) {
-        border-left: 5px solid $text-muted;
-        padding-left: 5px;
-    }
-
-    .text, .detail {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        display: block;
-        color: $text-color;
-    }
-
-    .detail {
-        font-size: $font-size-small;
-        color: $gray-light;
-    }
-
-    .icon {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        float: left;
-        height: 36px;
-        width: 34px;
-        margin-left: -5px;
-        color: $text-muted;
-
-        img {
-            border-radius: $border-radius;
-            max-height: 20px;
-            max-width: 20px;
-        }
-    }
-}
diff --git a/src/scss/misc.scss b/src/scss/misc.scss
index 57f9454a..a28eb73d 100644
--- a/src/scss/misc.scss
+++ b/src/scss/misc.scss
@@ -1,125 +1,22 @@
-@import "variables.scss";
+@import "bootstrap.scss";
 
-small {
-    font-size: $font-size-small;
-}
-
-.text-primary {
-    color: $brand-primary !important;
-}
-
-.text-success {
-    color: $brand-success !important;
-}
-
-.text-muted {
-    color: $text-muted !important;
-}
-
-.text-default {
-    color: $text-color !important;
-}
-
-.text-center {
-    text-align: center;
-}
-
-.no-margin {
-    margin: 0 !important;
-}
-
-p.lead {
-    font-size: $font-size-large;
+h1 {
+    border-bottom: 1px solid $border-color;
     margin-bottom: 20px;
-    font-weight: normal;
-}
 
-[hidden] {
-    display: none !important;
-}
-
-.monospaced {
-    font-family: $font-family-monospace;
-}
-
-.sr-only {
-    position: absolute !important;
-    width: 1px !important;
-    height: 1px !important;
-    padding: 0 !important;
-    margin: -1px !important;
-    overflow: hidden !important;
-    clip: rect(0, 0, 0, 0) !important;
-    border: 0 !important;
-}
-
-.totp {
-    .totp-code {
-        font-family: $font-family-monospace;
-        font-size: 1.1em;
-    }
-
-    .totp-countdown {
-        margin: 3px 3px 0 0;
-        display: block;
-        user-select: none;
-
-        .totp-sec {
-            font-size: 0.85em;
-            position: absolute;
-            line-height: 32px;
-            width: 32px;
-            text-align: center;
-        }
-
-        svg {
-            width: 32px;
-            height: 32px;
-            transform: rotate(-90deg);
-        }
-
-        .totp-circle {
-            stroke: $brand-primary;
-            fill: none;
-
-            &.inner {
-                stroke-width: 3;
-                stroke-dasharray: 78.6;
-                stroke-dashoffset: 0;
-            }
-
-            &.outer {
-                stroke-width: 2;
-                stroke-dasharray: 88;
-                stroke-dashoffset: 0;
-            }
-        }
-    }
-
-    &.low {
-        .totp-sec, .totp-code {
-            color: $brand-danger;
-        }
-
-        .totp-circle {
-            stroke: $brand-danger;
-        }
+    small {
+        color: $text-muted;
+        font-size: $h1-font-size * .5;
     }
 }
 
-.password-block {
-    font-size: $font-size-large;
-    word-break: break-all;
-    font-family: $font-family-monospace;
-    min-height: 60px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
+h2 {
+    text-transform: uppercase;
+    font-weight: bold;
+}
 
-    .modal-body & {
-        margin-top: 10px;
-    }
+h3 {
+    text-transform: uppercase;
 }
 
 #duo-frame {
@@ -134,49 +31,6 @@ p.lead {
     }
 }
 
-form, .form {
-    .form-group {
-        margin-bottom: 10px;
-
-        &:last-child {
-            margin-bottom: 0;
-        }
-
-        label {
-            display: inline-block;
-            margin-bottom: 2px;
-        }
-
-        input, select, textarea {
-            border: 1px solid darken($border-color-dark, 7%);
-            border-radius: $border-radius;
-            display: block;
-        }
-    }
-
-    .checkbox {
-        position: relative;
-        display: block;
-        padding-left: 18px;
-
-        label {
-            margin-bottom: 0;
-        }
-
-        input[type="checkbox"] {
-            position: absolute;
-            margin-top: 4px;
-            margin-left: -18px;
-        }
-    }
-
-    .help-block {
-        margin-top: 3px;
-        color: $text-muted;
-        display: block;
-    }
-}
-
 app-root > #loading {
     display: flex;
     text-align: center;
diff --git a/src/scss/modal.scss b/src/scss/modal.scss
deleted file mode 100644
index fe418945..00000000
--- a/src/scss/modal.scss
+++ /dev/null
@@ -1,338 +0,0 @@
-@import "variables.scss";
-
-$white: white;
-$black: black;
-$line-height-base: 14px;
-$border-radius-lg: $border-radius;
-
-// ref: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss
-
-$grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px ) !default;
-
-$zindex-modal-backdrop: 1040 !default;
-$zindex-modal: 1050 !default;
-
-// Padding applied to the modal body
-$modal-inner-padding: 10px !default;
-
-$modal-dialog-margin: .5rem !default;
-$modal-dialog-margin-y-sm-up: 1.75rem !default;
-
-$modal-title-line-height: $line-height-base !default;
-
-$modal-content-bg: $background-color-alt !default;
-$modal-content-border-color: rgba($black, .2) !default;
-$modal-content-border-width: 1px !default;
-$modal-content-box-shadow-xs: none;
-$modal-content-box-shadow-sm-up: none;
-
-$modal-backdrop-bg: $black !default;
-$modal-backdrop-opacity: .5 !default;
-$modal-header-border-color: $border-color-dark !default;
-$modal-footer-border-color: $modal-header-border-color !default;
-$modal-header-border-width: $modal-content-border-width !default;
-$modal-footer-border-width: $modal-header-border-width !default;
-$modal-header-padding: 12px !default;
-
-$modal-lg: 800px !default;
-$modal-md: 500px !default;
-$modal-sm: 300px !default;
-
-$modal-transition: transform .3s ease-out !default;
-
-$close-font-size: $font-size-base * 1.5 !default;
-$close-font-weight: bold !default;
-$close-color: $black !default;
-$close-text-shadow: 0 1px 0 $white !default;
-
-// ref: https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_breakpoints.scss
-
-@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
-    $min: breakpoint-min($name, $breakpoints);
-
-    @if $min {
-        @media (min-width: $min) {
-            @content;
-        }
-    }
-    @else {
-        @content;
-    }
-}
-
-@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
-    $min: map-get($breakpoints, $name);
-    @return if($min != 0, $min, null);
-}
-
-// Custom Added CSS animations
-
-@keyframes modalshow {
-    0% {
-        opacity: 0;
-        transform: translate(0, -25%);
-    }
-
-    100% {
-        opacity: 1;
-        transform: translate(0, 0);
-    }
-}
-
-@keyframes backdropshow {
-    0% {
-        opacity: 0;
-    }
-
-    100% {
-        opacity: $modal-backdrop-opacity;
-    }
-}
-
-// ref: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_modal.scss
-
-// .modal-open      - body class for killing the scroll
-// .modal           - container to scroll within
-// .modal-dialog    - positioning shell for the actual modal
-// .modal-content   - actual modal w/ bg and corners and stuff
-
-
-// Kill the scroll on the body
-.modal-open {
-    overflow: hidden;
-}
-
-// Container that the modal scrolls within
-.modal {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: $zindex-modal;
-    //display: none;
-    overflow: hidden;
-    // Prevent Chrome on Windows from adding a focus outline. For details, see
-    // https://github.com/twbs/bootstrap/pull/10951.
-    outline: 0;
-    // We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a
-    // gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342
-    // See also https://github.com/twbs/bootstrap/issues/17695
-    .modal-open & {
-        overflow-x: hidden;
-        overflow-y: auto;
-    }
-}
-
-// Shell div to position the modal with bottom padding
-.modal-dialog {
-    position: relative;
-    width: auto;
-    margin: $modal-dialog-margin;
-    // allow clicks to pass through for custom click handling to close modal
-    pointer-events: none;
-    // When fading in the modal, animate it to slide down
-    .modal.fade & {
-        //@include transition($modal-transition);
-        //transform: translate(0, -25%);
-        animation: modalshow 0.3s ease-in;
-    }
-    //.modal.show & {
-    //    transform: translate(0, 0);
-    //}
-    transform: translate(0, 0);
-}
-
-.modal-dialog-centered {
-    display: flex;
-    align-items: center;
-    min-height: calc(100% - (#{$modal-dialog-margin} * 2));
-}
-
-// Actual modal
-.modal-content {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`
-    // counteract the pointer-events: none; in the .modal-dialog
-    pointer-events: auto;
-    background-color: $modal-content-bg;
-    background-clip: padding-box;
-    border: $modal-content-border-width solid $modal-content-border-color;
-    //@include border-radius($border-radius-lg);
-    //@include box-shadow($modal-content-box-shadow-xs);
-    border-radius: $border-radius-lg;
-    box-shadow: $modal-content-box-shadow-xs;
-    // Remove focus outline from opened modal
-    outline: 0;
-}
-
-// Modal background
-.modal-backdrop {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: $zindex-modal-backdrop;
-    background-color: $modal-backdrop-bg;
-    // Fade for backdrop
-    &.fade {
-        //opacity: 0;
-        animation: backdropshow 0.1s ease-in;
-    }
-    //&.show {
-    //    opacity: $modal-backdrop-opacity;
-    //}
-    opacity: $modal-backdrop-opacity;
-}
-
-// Modal header
-// Top section of the modal w/ title and dismiss
-.modal-header {
-    display: flex;
-    align-items: flex-start; // so the close btn always stays on the upper right corner
-    justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
-    padding: $modal-header-padding $modal-inner-padding;
-    border-bottom: $modal-header-border-width solid $modal-header-border-color;
-    //@include border-top-radius($border-radius-lg);
-
-    .close {
-        padding: $modal-header-padding $modal-inner-padding;
-        // auto on the left force icon to the right even when there is no .modal-title
-        margin: (-$modal-header-padding) (-$modal-inner-padding) (-$modal-header-padding) auto;
-    }
-
-    h5 {
-        font-size: $font-size-base;
-        font-weight: bold;
-        display: flex;
-        align-items: center;
-
-        .fa {
-            margin-right: 5px;
-        }
-    }
-}
-
-// Title text within header
-.modal-title {
-    margin-bottom: 0;
-    line-height: $modal-title-line-height;
-}
-
-// Modal body
-// Where all modal content resides (sibling of .modal-header and .modal-footer)
-.modal-body {
-    position: relative;
-    // Enable `flex-grow: 1` so that the body take up as much space as possible
-    // when should there be a fixed height on `.modal-dialog`.
-    flex: 1 1 auto;
-    padding: $modal-inner-padding;
-}
-
-// Footer (for actions)
-.modal-footer {
-    display: flex;
-    align-items: center; // vertically center
-    //justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
-    padding: $modal-inner-padding;
-    border-top: $modal-footer-border-width solid $modal-footer-border-color;
-    // Easily place margin between footer elements
-    button {
-        margin-right: 10px;
-
-        &:last-child {
-            margin-right: 0;
-        }
-    }
-
-    .right {
-        margin-left: auto;
-        display: flex;
-    }
-}
-
-// Measure scrollbar width for padding body during modal show/hide
-.modal-scrollbar-measure {
-    position: absolute;
-    top: -9999px;
-    width: 50px;
-    height: 50px;
-    overflow: scroll;
-}
-
-// Scale up the modal
-@include media-breakpoint-up(sm) {
-    // Automatically set modal's width for larger viewports
-    .modal-dialog {
-        max-width: $modal-md;
-        margin: $modal-dialog-margin-y-sm-up auto;
-    }
-
-    .modal-dialog-centered {
-        min-height: calc(100% - (#{$modal-dialog-margin-y-sm-up} * 2));
-    }
-
-    .modal-content {
-        //@include box-shadow($modal-content-box-shadow-sm-up);
-        box-shadow: $modal-content-box-shadow-sm-up;
-    }
-
-    .modal-sm {
-        max-width: $modal-sm;
-    }
-}
-
-@include media-breakpoint-up(lg) {
-    .modal-lg {
-        max-width: $modal-lg;
-    }
-}
-
-// ref: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_close.scss
-
-.close {
-    float: right;
-    font-size: $close-font-size;
-    font-weight: $close-font-weight;
-    line-height: 1;
-    color: $close-color;
-    text-shadow: $close-text-shadow;
-    opacity: .5;
-
-    &:hover, &:focus {
-        color: $close-color;
-        text-decoration: none;
-        opacity: .75;
-    }
-    // Opinionated: add "hand" cursor to non-disabled .close elements
-    &:not(:disabled):not(.disabled) {
-        cursor: pointer;
-    }
-}
-
-// Additional properties for button version
-// iOS requires the button element instead of an anchor tag.
-// If you want the anchor version, it requires `href="#"`.
-// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
-
-// stylelint-disable property-no-vendor-prefix, selector-no-qualifying-type
-button.close {
-    padding: 0;
-    background-color: transparent;
-    border: 0;
-    -webkit-appearance: none;
-}
-// stylelint-enable
-
-// box
-
-.modal-content .box {
-    margin-top: 20px;
-
-    &:first-child {
-        margin-top: 0;
-    }
-}
diff --git a/src/scss/pages.scss b/src/scss/pages.scss
index aa0663e4..e69de29b 100644
--- a/src/scss/pages.scss
+++ b/src/scss/pages.scss
@@ -1,118 +0,0 @@
-@import "variables.scss";
-
-#login-page, #lock-page {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-
-    @media (min-height: 500px) {
-        height: calc(100% + 50px);
-        margin-top: -50px;
-    }
-
-    @media (min-height: 800px) {
-        height: calc(100% + 300px);
-        margin-top: -300px;
-    }
-
-    img {
-        margin: 0 auto 15px;
-        width: 282px;
-        display: block;
-    }
-}
-
-#register-page, #hint-page, #two-factor-page {
-    padding-top: 20px;
-
-    .content {
-        margin: 0 auto;
-    }
-
-    img {
-        margin-bottom: 10px;
-        max-width: 100%;
-        height: auto;
-        display: block;
-        border-radius: $border-radius;
-    }
-}
-
-#login-page, #register-page, #hint-page, #two-factor-page, #lock-page {
-    .content {
-        width: 300px;
-
-        p {
-            text-align: center
-        }
-
-        p.lead, h1 {
-            font-size: $font-size-large;
-            text-align: center;
-            margin-bottom: 20px;
-            font-weight: normal;
-        }
-
-        .box {
-            margin-bottom: 20px;
-
-            &.last {
-                margin-bottom: 15px;
-            }
-        }
-
-        .buttons {
-            display: flex;
-            margin-bottom: 20px;
-
-            button {
-                margin-right: 10px;
-
-                &:last-child {
-                    margin-right: 0;
-                }
-            }
-        }
-
-        .sub-options {
-            text-align: center;
-            margin-bottom: 20px;
-
-            a {
-                display: block;
-                margin-bottom: 10px;
-
-                &:last-child {
-                    margin-bottom: 0;
-                }
-            }
-        }
-
-        a.settings-icon {
-            color: #bbbbbb;
-            position: absolute;
-            top: 10px;
-            left: 10px;
-
-            span {
-                visibility: hidden;
-            }
-
-            &:hover, &:focus {
-                color: $brand-primary;
-                text-decoration: none;
-
-                span {
-                    visibility: visible;
-                }
-            }
-        }
-    }
-}
-
-#register-page {
-    .content {
-        width: 400px;
-    }
-}
diff --git a/src/scss/plugins.scss b/src/scss/plugins.scss
index 82044499..c8589627 100644
--- a/src/scss/plugins.scss
+++ b/src/scss/plugins.scss
@@ -2,7 +2,7 @@ $fa-font-path: "~font-awesome/fonts";
 @import "~font-awesome/scss/font-awesome.scss";
 @import "~angular2-toaster/toaster";
 
-@import "variables.scss";
+@import "bootstrap.scss";
 
 #toast-container {
     .toast-close-button {
@@ -37,7 +37,7 @@ $fa-font-path: "~font-awesome/fonts";
 
         &.toast-danger, &.toast-error {
             background-image: none !important;
-            background-color: $brand-danger;
+            background-color: $danger;
 
             &:before {
                 content: "\f0e7";
@@ -47,7 +47,7 @@ $fa-font-path: "~font-awesome/fonts";
 
         &.toast-warning {
             background-image: none !important;
-            background-color: $brand-warning;
+            background-color: $warning;
 
             &:before {
                 content: "\f071";
@@ -56,7 +56,7 @@ $fa-font-path: "~font-awesome/fonts";
 
         &.toast-info {
             background-image: none !important;
-            background-color: $brand-info;
+            background-color: $info;
 
             &:before {
                 content: "\f05a";
@@ -65,7 +65,7 @@ $fa-font-path: "~font-awesome/fonts";
 
         &.toast-success {
             background-image: none !important;
-            background-color: $brand-success;
+            background-color: $success;
 
             &:before {
                 content: "\f00C";
diff --git a/src/scss/styles.scss b/src/scss/styles.scss
index f876ed31..9c51a776 100644
--- a/src/scss/styles.scss
+++ b/src/scss/styles.scss
@@ -1,11 +1,5 @@
-@import "variables.scss";
-@import "base.scss";
+@import "bootstrap.scss";
 @import "pages.scss";
-@import "vault.scss";
-@import "list.scss";
-@import "box.scss";
-@import "buttons.scss";
 @import "misc.scss";
-@import "modal.scss";
 @import "plugins.scss";
 @import "environment.scss";
diff --git a/src/scss/variables.scss b/src/scss/variables.scss
deleted file mode 100644
index 15783351..00000000
--- a/src/scss/variables.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-$font-family-sans-serif: 'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
-$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
-$font-size-base: 14px;
-$font-size-large: 18px;
-$font-size-small: 12px;
-$text-color: #000000;
-$background-color: #efeff4;
-$border-color: #f0f0f0;
-$border-color-dark: #ddd;
-$list-item-hover: #fbfbfb;
-$list-icon-color: #c7c7cd;
-$border-radius: 3px;
-$line-height-base: 1.42857143;
-
-$gray: #555;
-$gray-light: #777;
-$text-muted: $gray-light;
-
-$brand-primary: #3c8dbc;
-$brand-danger: #dd4b39;
-$brand-success: #00a65a;
-$brand-info: #555555;
-$brand-warning: #bf7e16;
-$brand-primary-accent: #286090;
-
-$background-color: white;
-$background-color-alt: #f9fafc;
-$background-color-alt2: #ecf0f5;
-
-$box-background-color: $background-color;
-$box-background-hover-color: $list-item-hover;
-$box-border-color: $border-color;
-
-$button-border-color: darken($border-color-dark, 12%);
-$button-backgound-color: white;
-$button-color: lighten($text-color, 40%);
-$button-color-primary: darken($brand-primary, 8%);
-$button-color-danger: darken($brand-danger, 10%);
diff --git a/src/scss/vault.scss b/src/scss/vault.scss
deleted file mode 100644
index c5bfbc9f..00000000
--- a/src/scss/vault.scss
+++ /dev/null
@@ -1,269 +0,0 @@
-@import "variables.scss";
-
-#vault {
-    height: 100%;
-    display: flex;
-
-    > #groupings, > #items, > #details, > #logo {
-        display: flex;
-        flex-direction: column;
-
-        .inner-content {
-            padding: 10px 15px;
-        }
-    }
-
-    > #groupings {
-        background-color: $background-color-alt;
-        width: 22%;
-        min-width: 175px;
-        max-width: 250px;
-        border-right: 1px solid $border-color-dark;
-
-        .inner-content {
-            padding-bottom: 0;
-            padding-right: 5px;
-        }
-
-        h2 {
-            color: $gray-light;
-            text-transform: uppercase;
-            font-size: $font-size-base;
-            font-weight: normal;
-            margin-bottom: 5px;
-            display: flex;
-
-            button {
-                margin-left: auto;
-                background: none;
-                border: none;
-                color: lighten($gray-light, 30%);
-
-                &:hover, &:focus {
-                    color: $gray-light;
-                    cursor: pointer;
-                }
-            }
-        }
-
-        ul:not(.fa-ul) {
-            li {
-                margin: 0;
-                padding: 0;
-                list-style: none;
-            }
-        }
-
-        ul.fa-ul {
-            li {
-                .fa-li {
-                    left: -11px;
-                    top: 8px;
-                }
-
-                a {
-                    padding-left: 12px;
-                }
-
-                &.active .fa-li {
-                    left: 4px;
-                }
-            }
-        }
-
-        ul {
-            padding: 0;
-            margin: 0 0 15px 0;
-
-            li {
-                a {
-                    padding: 5px 0;
-                    color: $text-color;
-                    display: flex;
-                    align-items: center;
-
-                    span {
-                        visibility: hidden;
-                        margin-left: auto;
-                        color: lighten($gray-light, 30%);
-
-                        &:hover {
-                            color: $text-muted;
-                        }
-                    }
-
-                    &:hover, &:focus {
-                        span {
-                            visibility: visible;
-                        }
-                    }
-                }
-
-                &.active {
-                    background-color: darken($background-color-alt, 5%);
-                    margin-left: -15px;
-                    margin-right: -5px;
-                    padding-left: 15px;
-                    padding-right: 5px;
-                }
-            }
-        }
-    }
-
-    > #items {
-        background-color: $background-color;
-        width: 28%;
-        min-width: 200px;
-        max-width: 350px;
-        border-right: 1px solid $border-color-dark;
-
-        .no-items {
-            display: flex;
-            height: 100%;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            text-align: center;
-            padding: 0 10px;
-
-            .fa {
-                margin-bottom: 10px;
-                color: $list-icon-color;
-            }
-        }
-    }
-
-    > #details {
-        background-color: $background-color-alt2;
-        flex: 1;
-        min-width: 0;
-
-        .inner-content {
-            min-width: 400px;
-        }
-
-        .box {
-            max-width: 550px;
-            margin: 30px auto 0 auto;
-
-            &:first-child {
-                margin-top: 10px;
-            }
-
-            &:last-child {
-                margin-bottom: 30px;
-            }
-        }
-
-        > form {
-            display: flex;
-            flex-direction: column;
-            height: 100%;
-        }
-    }
-
-    > #logo {
-        flex: 1;
-        min-width: 0;
-
-        .content {
-            overflow-y: hidden;
-            overflow-x: auto;
-        }
-
-        .inner-content {
-            min-width: 320px;
-            height: 100%;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-        }
-
-        img {
-            width: 282px;
-            opacity: 0.3;
-            transition: all 1s ease-in-out;
-
-            &:hover {
-                opacity: 1;
-            }
-        }
-    }
-
-    .header {
-        min-height: 44px;
-        max-height: 44px;
-        background-color: $brand-primary;
-        flex: 0 0 auto;
-        border-bottom: 1px solid darken($brand-primary, 7%);
-        display: flex;
-        align-items: center;
-
-        &.header-search {
-            .search {
-                padding: 0 7px;
-                width: 100%;
-                text-align: left;
-                position: relative;
-
-                .fa {
-                    position: absolute;
-                    top: 7px;
-                    left: 15px;
-                    color: lighten($brand-primary, 30%);
-                }
-
-                input {
-                    width: 100%;
-                    margin: 0;
-                    background: darken($brand-primary, 8%);
-                    border: none;
-                    color: white;
-                    padding: 5px 10px 5px 30px;
-                    border-radius: $border-radius;
-
-                    &:focus {
-                        border-radius: $border-radius;
-                        outline: none;
-                        background: darken($brand-primary, 10%);
-                    }
-
-                    &::-webkit-input-placeholder {
-                        color: lighten($brand-primary, 35%);
-                    }
-                }
-            }
-        }
-    }
-
-    .content {
-        flex: 1 1 auto;
-        position: relative;
-        overflow: auto;
-        height: 100%;
-    }
-
-    .footer {
-        height: 50px;
-        background-color: $background-color-alt;
-        flex: 0 0 auto;
-        border-top: 1px solid $border-color-dark;
-        display: flex;
-        align-items: center;
-        padding: 0 15px;
-
-        button {
-            margin-right: 10px;
-
-            &:last-child {
-                margin-right: 0;
-            }
-        }
-
-        .right {
-            margin-left: auto;
-            display: flex;
-        }
-    }
-}
diff --git a/webpack.renderer.js b/webpack.renderer.js
index 4a8894fc..28f2584c 100644
--- a/webpack.renderer.js
+++ b/webpack.renderer.js
@@ -80,8 +80,7 @@ const renderer = {
                     loader: 'file-loader',
                     options: {
                         name: '[name].[ext]',
-                        outputPath: 'fonts/',
-                        publicPath: '../'
+                        outputPath: 'fonts/'
                     }
                 }]
             },