diff --git a/src/popup/app/current/views/current.html b/src/popup/app/current/views/current.html
index 4bdf6c15..e45e5d94 100644
--- a/src/popup/app/current/views/current.html
+++ b/src/popup/app/current/views/current.html
@@ -1,6 +1,6 @@
 <div class="header">
     <div class="title">Current Sites</div>
 </div>
-<div class="content">
+<div class="content content-tabs">
     Some content for your current sites.
 </div>
diff --git a/src/popup/app/settings/views/settings.html b/src/popup/app/settings/views/settings.html
index 8a56ba80..49f01a36 100644
--- a/src/popup/app/settings/views/settings.html
+++ b/src/popup/app/settings/views/settings.html
@@ -1,25 +1,36 @@
 <div class="header">
     <div class="title">Settings</div>
 </div>
-<div class="content">
+<div class="content content-tabs">
     <div class="list">
-        <div class="list-divider">
-            Manage
+        <div class="list-section">
+            <div class="list-section-header">
+                Manage
+            </div>
+            <div class="list-section-items">
+                <a class="list-section-item" href="#">
+                    Folders
+                </a>
+                <a class="list-section-item" href="#" ng-click="sync()">
+                    Sync
+                </a>
+            </div>
         </div>
-        <a class="list-item" href="#">
-            Folders
-        </a>
-        <a class="list-item" href="#" ng-click="sync()">
-            Sync
-        </a>
-        <div class="list-divider">
-            Current Session
+        <div class="list-section">
+            <div class="list-section-header">
+                Current Session
+            </div>
+            <div class="list-section-items">
+                <a class="list-section-item" href="#">
+                    Lock
+                </a>
+                <a class="list-section-item" href="#" ng-click="logOut()">
+                    Log out
+                </a>
+            </div>
+            <div class="list-section-footer">
+                This is a footer note.
+            </div>
         </div>
-        <a class="list-item" href="#">
-            Lock
-        </a>
-        <a class="list-item" href="#" ng-click="logOut()">
-            Log out
-        </a>
     </div>
 </div>
diff --git a/src/popup/app/tools/views/tools.html b/src/popup/app/tools/views/tools.html
index a0cd9eae..057c98ca 100644
--- a/src/popup/app/tools/views/tools.html
+++ b/src/popup/app/tools/views/tools.html
@@ -1,6 +1,6 @@
 <div class="header">
     <div class="title">Tools</div>
 </div>
-<div class="content">
+<div class="content content-tabs">
     Some content for your tools.
 </div>
diff --git a/src/popup/app/vault/views/vault.html b/src/popup/app/vault/views/vault.html
index bd5a75d5..fb50773b 100644
--- a/src/popup/app/vault/views/vault.html
+++ b/src/popup/app/vault/views/vault.html
@@ -2,13 +2,13 @@
     <a class="right" ui-sref="addSite"><i class="fa fa-plus fa-lg"></i></a>
     <div class="title">My Vault</div>
 </div>
-<div class="content">
+<div class="content content-tabs">
     <div class="list">
         <ng-repeat ng-repeat="folder in folders | orderBy: folderSort" ng-show="folders.length">
-            <div class="list-divider">
+            <div class="list-item-header">
                 <i class="fa fa-folder-open"></i> {{folder.name}}
             </div>
-            <a ui-sref="viewSite({siteId: site.id})" class="list-item" ng-repeat="site in folderSites = (sites | filter: { folderId: folder.id } | orderBy: ['name', 'username'])">
+            <a ui-sref="viewSite({siteId: site.id})" class="list-item list-item-condensed" ng-repeat="site in folderSites = (sites | filter: { folderId: folder.id } | orderBy: ['name', 'username'])">
                 <span class="text">{{site.name}}</span>
                 <span class="detail">{{site.username}}</span>
                 <!--<span class="btn btn-link pull-right"><i class="fa fa-ellipsis-h"></i></span>-->
diff --git a/src/popup/app/vault/views/vaultAddSite.html b/src/popup/app/vault/views/vaultAddSite.html
index 3aad81e3..927ac0ce 100644
--- a/src/popup/app/vault/views/vaultAddSite.html
+++ b/src/popup/app/vault/views/vaultAddSite.html
@@ -5,49 +5,58 @@
 </div>
 <div class="content">
     <div class="list">
-        <div class="list-divider">
-            Site Information
+        <div class="list-section">
+            <div class="list-section-header">
+                Site Information
+            </div>
+            <div class="list-section-items">
+                <div class="list-section-item">
+                    <label for="name">Name</label>
+                    <input id="name" type="text" ng-model="site.name">
+                </div>
+                <div class="list-section-item">
+                    <label for="uri">URI</label>
+                    <input id="uri" type="text" ng-model="site.uri">
+                </div>
+                <div class="list-section-item">
+                    <label for="username">Username</label>
+                    <input id="username" type="text" ng-model="site.username">
+                </div>
+                <div class="list-section-item">
+                    <label for="password">Password</label>
+                    <input id="password" type="password" ng-model="site.password">
+                </div>
+                <a class="list-section-item" href="#">
+                    Generate Password
+                    <i class="fa fa-chevron-right pull-right"></i>
+                </a>
+            </div>
         </div>
-        <div class="list-item">
-            <label>Name</label>
-            <input type="text" ng-model="site.name">
+        <div class="list-section">
+            <div class="list-section-items">
+                <div class="list-section-item">
+                    <label for="folder">Folder</label>
+                    <select id="folder">
+                        <option>Blue</option>
+                        <option selected>Green</option>
+                        <option>Red</option>
+                    </select>
+                </div>
+                <div class="list-section-item list-section-item-checkbox">
+                    <label for="favorite">Favorite</label>
+                    <input id="favorite" type="checkbox" ng-model="site.favorite">
+                </div>
+            </div>
         </div>
-        <div class="list-item">
-            <label>URI</label>
-            <input type="text" ng-model="site.uri">
-        </div>
-        <div class="list-item">
-            <label>Username</label>
-            <input type="text" ng-model="site.username">
-        </div>
-        <div class="list-item">
-            <label>Password</label>
-            <input type="password" ng-model="site.password">
-        </div>
-        <a class="list-item" href="#">
-            Generate Password
-            <i class="fa fa-chevron-right"></i>
-        </a>
-        <div class="list-divider">
-            &nbsp;
-        </div>
-        <div class="list-item">
-            <label>Folder</label>
-            <select>
-                <option>Blue</option>
-                <option selected>Green</option>
-                <option>Red</option>
-            </select>
-        </div>
-        <div class="list-item">
-            <label>Favorite</label>
-            <input type="checkbox" ng-model="site.favorite">
-        </div>
-        <div class="list-divider">
-            Notes
-        </div>
-        <div class="list-item">
-            <textarea rows="5" ng-model="site.notes"></textarea>
+        <div class="list-section">
+            <div class="list-section-header">
+                <label for="notes">Notes</label>
+            </div>
+            <div class="list-section-items">
+                <div class="list-section-item">
+                    <textarea id="notes" rows="5" ng-model="site.notes"></textarea>
+                </div>
+            </div>
         </div>
     </div>
 </div>
diff --git a/src/popup/app/vault/views/vaultViewSite.html b/src/popup/app/vault/views/vaultViewSite.html
index 826f4ae4..ec514e44 100644
--- a/src/popup/app/vault/views/vaultViewSite.html
+++ b/src/popup/app/vault/views/vaultViewSite.html
@@ -4,31 +4,39 @@
     <div class="title">View Site</div>
 </div>
 <div class="content">
-    <div class="list">
-        <div class="list-divider">
-            Site Information
+    <div class="list list-no-selection">
+        <div class="list-section">
+            <div class="list-section-header">
+                Site Information
+            </div>
+            <div class="list-section-items">
+                <div class="list-section-item">
+                    <span class="item-label">Name</span>
+                    {{site.name}}
+                </div>
+                <div class="list-section-item">
+                    <span class="item-label">Website</span>
+                    {{site.uri}}
+                </div>
+                <div class="list-section-item">
+                    <span class="item-label">Username</span>
+                    {{site.username}}
+                </div>
+                <div class="list-section-item">
+                    <span class="item-label">Password</span>
+                    {{site.password}}
+                </div>
+            </div>
         </div>
-        <div class="list-item">
-            <div>Name</div>
-            {{site.name}}
-        </div>
-        <div class="list-item">
-            <div>Website</div>
-            {{site.uri}}
-        </div>
-        <div class="list-item">
-            <div>Username</div>
-            {{site.username}}
-        </div>
-        <div class="list-item">
-            <div>Password</div>
-            {{site.password}}
-        </div>
-        <div class="list-divider">
-            Notes
-        </div>
-        <div class="list-item">
-            {{site.notes}}
+        <div class="list-section">
+            <div class="list-section-header">
+                Notes
+            </div>
+            <div class="list-section-items">
+                <div class="list-section-item">
+                    {{site.notes}}
+                </div>
+            </div>
         </div>
     </div>
 </div>
diff --git a/src/popup/less/components.less b/src/popup/less/components.less
new file mode 100644
index 00000000..1df152d1
--- /dev/null
+++ b/src/popup/less/components.less
@@ -0,0 +1,228 @@
+@import (reference) "../../../node_modules/bootstrap/less/mixins.less";
+@import (reference) "../../../node_modules/bootstrap/less/variables.less";
+@import (reference) "variables.less";
+
+.header {
+    min-height: 44px;
+    max-height: 44px;
+    background-color: @brand-primary;
+    color: white;
+    text-align: center;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    overflow: hidden;
+
+    a {
+        color: white !important;
+        text-decoration: none;
+
+        &:hover {
+            background-color: rgba(255, 255, 255, 0.1);
+        }
+    }
+
+    .title {
+        font-weight: bold;
+        display: block;
+        padding: 12px 0;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .left {
+        float: left;
+        display: block;
+        padding: 12px 10px;
+    }
+
+    .right {
+        float: right;
+        display: block;
+        padding: 12px 10px;
+    }
+}
+
+.tabs {
+    width: 100%;
+    height: 55px;
+    background-color: white;
+    border-top: 1px solid @border-color-dark;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    overflow: hidden;
+
+    ul {
+        width: 100%;
+        list-style: none;
+        padding: 0;
+        margin: 0;
+
+        li {
+            width: 25%;
+            float: left;
+            display: inline-block;
+            padding: 0;
+            margin: 0;
+
+            a {
+                text-align: center;
+                display: block;
+                padding: 7px 0;
+                text-decoration: none;
+                color: @gray-light;
+                font-size: 12px;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+
+                &:hover {
+                    background-color: rgba(255, 255, 255, 0.8);
+                }
+
+                i {
+                    display: block;
+                    margin-bottom: 2px;
+                }
+            }
+
+            &.active {
+                a {
+                    color: @brand-primary;
+                }
+            }
+        }
+    }
+}
+
+.list {
+    .list-item {
+        border-top: 1px solid @border-color;
+
+        &:first-child {
+            border: none;
+        }
+    }
+
+    .list-item-header {
+        background-color: transparent;
+        padding: 10px 10px;
+        color: @gray-light;
+
+        + .list-item {
+            border: none;
+        }
+    }
+
+    .list-section {
+        padding-bottom: 10px;
+
+        &:first-child {
+            padding-top: 10px;
+        }
+
+        .list-section-header {
+            background-color: transparent;
+            padding: 5px 10px;
+            color: @gray-light;
+            text-transform: uppercase;
+
+            label {
+                font-weight: normal;
+            }
+        }
+
+        .list-section-items {
+            border-top: 1px solid @border-color-dark;
+            border-bottom: 1px solid @border-color-dark;
+
+            .list-section-item {
+                border-bottom: 1px solid @border-color;
+
+                &:last-child {
+                    border: none;
+                }
+            }
+        }
+
+        .list-section-footer {
+            padding: 5px 10px;
+            font-size: @font-size-small;
+            color: @gray-light;
+        }
+    }
+
+    .list-item, .list-section-item {
+        display: block;
+        padding: 10px 10px;
+        background-color: white;
+        text-decoration: none;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        color: @text-color;
+
+        &:hover {
+            background-color: @list-item-hover;
+        }
+
+        &.list-item-condensed {
+            padding: 3px 10px;
+        }
+
+        .text {
+            display: block;
+            color: @text-color;
+        }
+
+        .detail {
+            font-size: @font-size-small;
+            color: @gray-light;
+            display: block;
+        }
+
+        label, .item-label {
+            font-size: @font-size-small;
+            color: @gray-light;
+            display: block;
+            width: 100%;
+            font-weight: normal;
+        }
+
+        input:not([type="checkbox"]), select, textarea {
+            border: none;
+            width: 100%;
+            background-color: transparent;
+
+            &:focus {
+                outline: none;
+            }
+        }
+
+        &.list-section-item-checkbox {
+            label {
+                font-size: @font-size-base;
+                color: @text-color;
+                display: inline;
+                width: initial;
+                font-weight: normal;
+            }
+
+            input[type="checkbox"] {
+                float: right;
+            }
+        }
+    }
+
+    &.list-no-selection {
+        .list-item, .list-section-item {
+            &:hover {
+                background-color: white;
+            }
+        }
+    }
+}
diff --git a/src/popup/less/popup.less b/src/popup/less/popup.less
index af5af473..559fc295 100644
--- a/src/popup/less/popup.less
+++ b/src/popup/less/popup.less
@@ -1,151 +1,26 @@
 @import "../../../node_modules/bootstrap/less/bootstrap.less";
-
-@font-family: "Open Sans", sans-serif;
-@brand-primary: #3c8dbc;
+@import "variables.less";
+@import "components.less";
 
 body {
-    font-family: @font-family;
     width: 320px;
     height: 568px;
-}
-
-.header {
-    min-height: 44px;
-    max-height: 44px;
-    background-color: @brand-primary;
-    color: white;
-    font-family: @font-family;
-    text-align: center;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    overflow: hidden;
-
-    a {
-        color: white !important;
-        text-decoration: none;
-
-        &:hover {
-            background-color: rgba(255, 255, 255, 0.1);
-        }
-    }
-
-    .title {
-        font-weight: bold;
-        display: block;
-        padding: 12px 0;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
-    .left {
-        float: left;
-        display: block;
-        padding: 12px 10px;
-    }
-
-    .right {
-        float: right;
-        display: block;
-        padding: 12px 10px;
-    }
+    background-color: @background-color;
 }
 
 .content {
     position: absolute;
     top: 44px;
-    bottom: 55px;
-    left: 0;
-    right: 0;
-    overflow: auto;
-}
-
-.tabs {
-    width: 100%;
-    height: 55px;
-    background-color: #f5f5f5;
-    border-top: 1px solid #ddd;
-    position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
-    overflow: hidden;
+    overflow: auto;
 
-    ul {
-        width: 100%;
-        list-style: none;
-        padding: 0;
-        margin: 0;
+    &.content-tabs {
+        bottom: 55px;
+    }
 
-        li {
-            width: 25%;
-            float: left;
-            display: inline-block;
-            padding: 0;
-            margin: 0;
-
-            a {
-                text-align: center;
-                display: block;
-                padding: 7px 0;
-                text-decoration: none;
-                color: #777;
-                font-size: 12px;
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
-
-                &:hover {
-                    background-color: rgba(255, 255, 255, 0.8);
-                }
-
-                i {
-                    display: block;
-                    margin-bottom: 2px;
-                }
-            }
-
-            &.active {
-                a {
-                    color: @brand-primary;
-                }
-            }
-        }
-    }
-}
-
-.list {
-    .list-item {
-        display: block;
-        padding: 10px 10px;
-        background-color: white;
-        border-bottom: 1px solid #ddd;
-        color: #333;
-        text-decoration: none;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-
-        &:last-child {
-            border: none;
-        }
-
-        .text {
-            display: block;
-        }
-
-        .detail {
-            font-size: 12px;
-            color: #777;
-            display: block;
-        }
-    }
-
-    .list-divider {
-        background-color: #eeeeee;
-        padding: 10px 10px;
-        border-bottom: 1px solid #ddd;
+    &.content-no-header {
+        top: 0;
     }
 }
diff --git a/src/popup/less/variables.less b/src/popup/less/variables.less
new file mode 100644
index 00000000..168ae85a
--- /dev/null
+++ b/src/popup/less/variables.less
@@ -0,0 +1,10 @@
+@import (reference) "../../../node_modules/bootstrap/less/mixins.less";
+@import (reference) "../../../node_modules/bootstrap/less/variables.less";
+
+@font-family-sans-serif: "Open Sans", sans-serif;
+@text-color: #000000;
+@brand-primary: #3c8dbc;
+@background-color: #efeff4;
+@border-color: #f0f0f0;
+@border-color-dark: #ddd;
+@list-item-hover: #fbfbfb;