diff --git a/src/scss/base.scss b/src/scss/base.scss
new file mode 100644
index 0000000000..66ae05b173
--- /dev/null
+++ b/src/scss/base.scss
@@ -0,0 +1,60 @@
+@import "variables.scss";
+
+* {
+    box-sizing: border-box;
+}
+
+html, body {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    background-color: $background-color;
+    overflow: hidden;
+    font-family: $font-family-sans-serif;
+    font-size: $font-size-base;
+    color: $text-color;
+    line-height: 1.42857143;
+}
+
+body {
+    border-top: 1px solid $border-color-dark;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-family: $font-family-sans-serif;
+    margin: 0;
+    padding: 0;
+}
+
+a {
+    color: $brand-primary;
+    text-decoration: none;
+}
+
+input, select, textarea, button {
+    font-size: $font-size-base;
+    font-family: $font-family-sans-serif;
+}
+
+textarea {
+    resize: vertical;
+}
+
+div::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+}
+
+div::-webkit-scrollbar-track {
+    background-color: transparent;
+}
+
+div::-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/list.scss b/src/scss/list.scss
new file mode 100644
index 0000000000..441e0f8d2e
--- /dev/null
+++ b/src/scss/list.scss
@@ -0,0 +1,71 @@
+@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;
+    }
+
+    &:not(:hover):focus {
+        border-left: 5px solid $brand-primary;
+        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
new file mode 100644
index 0000000000..7e738db284
--- /dev/null
+++ b/src/scss/misc.scss
@@ -0,0 +1,71 @@
+@import "variables.scss";
+
+.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;
+        float: right;
+
+        .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;
+        }
+    }
+}
diff --git a/src/scss/plugins.scss b/src/scss/plugins.scss
index ddc3821a94..00493bffb8 100644
--- a/src/scss/plugins.scss
+++ b/src/scss/plugins.scss
@@ -1,4 +1,8 @@
-@import "variables.scss";
+$fa-font-path: "~font-awesome/fonts";
+@import "~font-awesome/scss/font-awesome.scss";
+@import "~angular2-toaster/toaster";
+
+@import "variables.scss";
 
 #toast-container {
     .toast-close-button {
diff --git a/src/scss/styles.scss b/src/scss/styles.scss
index ef187b232d..ec6b0033ff 100644
--- a/src/scss/styles.scss
+++ b/src/scss/styles.scss
@@ -1,466 +1,7 @@
-$fa-font-path: "~font-awesome/fonts";
-@import "~font-awesome/scss/font-awesome.scss";
-@import "~angular2-toaster/toaster";
-
-@import "variables.scss";
+@import "variables.scss";
+@import "base.scss";
+@import "vault.scss";
+@import "list.scss";
 @import "box.scss";
+@import "misc.scss";
 @import "plugins.scss";
-
-* {
-    box-sizing: border-box;
-}
-
-div::-webkit-scrollbar {
-    width: 10px;
-    height: 10px;
-}
-
-div::-webkit-scrollbar-track {
-    background-color: transparent;
-}
-
-div::-webkit-scrollbar-thumb {
-    background-color: rgba(100,100,100,.2);
-    border-radius: 10px;
-    margin-right: 1px;
-
-    &:hover {
-        background-color: rgba(100,100,100,.4);
-    }
-}
-
-html, body {
-    margin: 0;
-    padding: 0;
-    height: 100%;
-    background-color: $background-color;
-    overflow: hidden;
-    font-family: $font-family-sans-serif;
-    font-size: $font-size-base;
-    color: $text-color;
-    line-height: 1.42857143;
-}
-
-body {
-    border-top: 1px solid $border-color-dark;
-}
-
-h1, h2, h3, h4, h5, h6 {
-    font-family: $font-family-sans-serif;
-    margin: 0;
-    padding: 0;
-}
-
-a {
-    color: $brand-primary;
-    text-decoration: none;
-}
-
-.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;
-}
-
-input, select, textarea, button {
-    font-size: $font-size-base;
-    font-family: $font-family-sans-serif;
-}
-
-textarea {
-    resize: vertical;
-}
-
-#vault {
-    height: 100vh;
-    display: flex;
-
-    #groupings {
-        background-color: $background-color-alt;
-        width: 15%;
-        min-width: 175px;
-        max-width: 250px;
-        border-right: 1px solid $border-color-dark;
-
-        h2 {
-            font-size: $font-size-base;
-            font-weight: bold;
-            margin-bottom: 5px;
-        }
-
-        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 {
-                    display: block;
-                    padding: 5px 0;
-                    color: $text-color;
-                }
-
-                &.active {
-                    background-color: darken($background-color-alt, 5%);
-                    margin-left: -15px;
-                    margin-right: -15px;
-                    padding-left: 15px;
-                    padding-right: 15px;
-                }
-            }
-        }
-    }
-
-    #items {
-        background-color: $background-color;
-        width: 25%;
-        min-width: 200px;
-        max-width: 350px;
-        border-right: 1px solid $border-color-dark;
-    }
-
-    #details {
-        background-color: $background-color-alt2;
-        flex: 1;
-        min-width: 400px;
-    }
-
-    #groupings, #items, #details {
-        display: flex;
-        flex-direction: column;
-
-        .inner-content {
-            padding: 10px 15px;
-        }
-    }
-
-    .header {
-        min-height: 44px;
-        max-height: 44px;
-        background-color: $brand-primary;
-        color: white;
-        text-align: center;
-        overflow: hidden;
-        flex: 0 0 auto;
-
-        a, button {
-            color: white !important;
-            text-decoration: none;
-            background: none;
-
-            &:hover, &:focus {
-                background-color: rgba(255, 255, 255, 0.1);
-            }
-
-            &:hover {
-                text-decoration: none;
-            }
-
-            &:focus {
-                text-decoration: underline;
-            }
-        }
-
-        .title {
-            font-weight: bold;
-            display: block;
-            padding: 12px 0;
-            text-align: center;
-        }
-
-        .left {
-            display: block;
-            position: absolute;
-            left: 0;
-            text-align: left;
-
-            a, button {
-                padding: 12px 10px;
-                display: block;
-                float: left;
-            }
-
-            .fa-spinner {
-                padding: 15px;
-                display: block;
-                float: left;
-            }
-        }
-
-        .right {
-            display: block;
-            right: 0;
-            position: absolute;
-            z-index: 99999;
-
-            a, button {
-                padding: 12px 10px;
-                display: block;
-                float: right;
-            }
-
-            .fa-spinner {
-                padding: 15px;
-                display: block;
-                float: right;
-            }
-        }
-
-        &.header-search {
-            .left, .right, .search {
-                display: table-cell;
-                position: relative;
-            }
-
-            .search {
-                padding: 0 7px;
-                width: 100%;
-                text-align: left;
-                position: relative;
-
-                .fa-search {
-                    position: absolute;
-                    top: 15px;
-                    left: 15px;
-                    color: lighten($brand-primary, 30%);
-                }
-
-                input {
-                    width: 100%;
-                    margin: 0;
-                    float: none;
-                    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%);
-                    }
-                }
-            }
-
-            a {
-                white-space: nowrap;
-                float: none;
-            }
-        }
-    }
-
-    .content {
-        flex: 1 1 auto;
-        position: relative;
-        overflow: auto;
-    }
-
-    .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 {
-            background-color: $button-backgound-color;
-            border-radius: $border-radius;
-            padding: 7px 15px;
-            border: 1px solid $button-border-color;
-            margin-right: 10px;
-            font-size: $font-size-base;
-            color: $button-color;
-
-            &:hover {
-                cursor: pointer;
-                background-color: darken($button-backgound-color, 1.5%);
-            }
-
-            &.primary {
-                color: $button-color-primary;
-            }
-
-            &.danger {
-                color: $button-color-danger;
-            }
-
-            &.block {
-                display: block;
-                width: 100%;
-            }
-
-            &.right {
-                margin-left: auto;
-            }
-
-            &:last-child {
-                margin-right: 0;
-            }
-        }
-    }
-}
-
-.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;
-    }
-
-    &:not(:hover):focus {
-        border-left: 5px solid $brand-primary;
-        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;
-        }
-    }
-}
-
-.totp {
-    .totp-code {
-        font-family: $font-family-monospace;
-        font-size: 1.1em;
-    }
-
-    .totp-countdown {
-        margin: 3px 3px 0 0;
-        display: block;
-        user-select: none;
-        float: right;
-
-        .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;
-        }
-    }
-}
diff --git a/src/scss/vault.scss b/src/scss/vault.scss
new file mode 100644
index 0000000000..5664f3a9bd
--- /dev/null
+++ b/src/scss/vault.scss
@@ -0,0 +1,261 @@
+@import "variables.scss";
+
+#vault {
+    height: 100vh;
+    display: flex;
+
+    #groupings {
+        background-color: $background-color-alt;
+        width: 15%;
+        min-width: 175px;
+        max-width: 250px;
+        border-right: 1px solid $border-color-dark;
+
+        h2 {
+            font-size: $font-size-base;
+            font-weight: bold;
+            margin-bottom: 5px;
+        }
+
+        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 {
+                    display: block;
+                    padding: 5px 0;
+                    color: $text-color;
+                }
+
+                &.active {
+                    background-color: darken($background-color-alt, 5%);
+                    margin-left: -15px;
+                    margin-right: -15px;
+                    padding-left: 15px;
+                    padding-right: 15px;
+                }
+            }
+        }
+    }
+
+    #items {
+        background-color: $background-color;
+        width: 25%;
+        min-width: 200px;
+        max-width: 350px;
+        border-right: 1px solid $border-color-dark;
+    }
+
+    #details {
+        background-color: $background-color-alt2;
+        flex: 1;
+        min-width: 400px;
+    }
+
+    #groupings, #items, #details {
+        display: flex;
+        flex-direction: column;
+
+        .inner-content {
+            padding: 10px 15px;
+        }
+    }
+
+    .header {
+        min-height: 44px;
+        max-height: 44px;
+        background-color: $brand-primary;
+        color: white;
+        text-align: center;
+        overflow: hidden;
+        flex: 0 0 auto;
+
+        a, button {
+            color: white !important;
+            text-decoration: none;
+            background: none;
+
+            &:hover, &:focus {
+                background-color: rgba(255, 255, 255, 0.1);
+            }
+
+            &:hover {
+                text-decoration: none;
+            }
+
+            &:focus {
+                text-decoration: underline;
+            }
+        }
+
+        .title {
+            font-weight: bold;
+            display: block;
+            padding: 12px 0;
+            text-align: center;
+        }
+
+        .left {
+            display: block;
+            position: absolute;
+            left: 0;
+            text-align: left;
+
+            a, button {
+                padding: 12px 10px;
+                display: block;
+                float: left;
+            }
+
+            .fa-spinner {
+                padding: 15px;
+                display: block;
+                float: left;
+            }
+        }
+
+        .right {
+            display: block;
+            right: 0;
+            position: absolute;
+            z-index: 99999;
+
+            a, button {
+                padding: 12px 10px;
+                display: block;
+                float: right;
+            }
+
+            .fa-spinner {
+                padding: 15px;
+                display: block;
+                float: right;
+            }
+        }
+
+        &.header-search {
+            .left, .right, .search {
+                display: table-cell;
+                position: relative;
+            }
+
+            .search {
+                padding: 0 7px;
+                width: 100%;
+                text-align: left;
+                position: relative;
+
+                .fa-search {
+                    position: absolute;
+                    top: 15px;
+                    left: 15px;
+                    color: lighten($brand-primary, 30%);
+                }
+
+                input {
+                    width: 100%;
+                    margin: 0;
+                    float: none;
+                    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%);
+                    }
+                }
+            }
+
+            a {
+                white-space: nowrap;
+                float: none;
+            }
+        }
+    }
+
+    .content {
+        flex: 1 1 auto;
+        position: relative;
+        overflow: auto;
+    }
+
+    .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 {
+            background-color: $button-backgound-color;
+            border-radius: $border-radius;
+            padding: 7px 15px;
+            border: 1px solid $button-border-color;
+            margin-right: 10px;
+            font-size: $font-size-base;
+            color: $button-color;
+
+            &:hover {
+                cursor: pointer;
+                background-color: darken($button-backgound-color, 1.5%);
+            }
+
+            &.primary {
+                color: $button-color-primary;
+            }
+
+            &.danger {
+                color: $button-color-danger;
+            }
+
+            &.block {
+                display: block;
+                width: 100%;
+            }
+
+            &.right {
+                margin-left: auto;
+            }
+
+            &:last-child {
+                margin-right: 0;
+            }
+        }
+    }
+}