diff --git a/app/assets/stylesheets/app/_editor.scss b/app/assets/stylesheets/app/_editor.scss
index 98b896f70..7b4c08d2b 100644
--- a/app/assets/stylesheets/app/_editor.scss
+++ b/app/assets/stylesheets/app/_editor.scss
@@ -5,11 +5,6 @@ $heading-height: 75px;
   flex-direction: column;
   overflow-y: hidden;
   background-color: white;
-
-  .section-menu-bar {
-    flex: 1 0 28px;
-    max-height: 28px;
-  }
 }
 
 #editor-title-bar {
diff --git a/app/assets/stylesheets/app/_footer.scss b/app/assets/stylesheets/app/_footer.scss
index 9934f5355..c705c0a69 100644
--- a/app/assets/stylesheets/app/_footer.scss
+++ b/app/assets/stylesheets/app/_footer.scss
@@ -1,90 +1,34 @@
-.fake-link {
-  font-weight: bold;
-  cursor: pointer;
-
-  &:hover {
-    text-decoration: underline;
-  }
-}
-
-h2 {
-  margin-bottom: 0px;
-  margin-top: 0px;
-}
-
 #footer-bar {
   position: relative;
   width: 100%;
-  padding: 5px;
-  background-color: #F6F6F6;
-  border-top: 1px solid #D3D3D3;
   height: $footer-height;
   max-height: $footer-height;
   z-index: 100;
-
-  .pull-left, .pull-right {
-    height: 100%;
-    display: flex;
-  }
-
-  section {
-    padding: 5px;
-    padding-bottom: 2px;
-    margin-top: 5px;
-
-    &.inline-h {
-      padding-top: 5px;
-      padding-left: 0;
-      padding-right: 0;
-    }
-
-  }
 }
 
-#footer-bar .footer-bar-link {
-  margin-left: 10px;
-  &:not(:first-child) {
-    margin-left: 12px;
-  }
-
+#footer-bar .item {
   z-index: 1000;
   position: relative;
-  height: 100%;
   user-select: none;
 
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  .panel {
+    max-height: 85vh;
+    position: absolute;
+    right: 0px;
+    left: 10px;
+    bottom: 40px;
+    min-width: 300px;
+    z-index: 1000;
+    margin-top: 15px;
+    background-color: white;
 
-  > .label {
-    font-size: 12px;
-    font-weight: bold;
-    color: #515263;
-    cursor: pointer;
-
-    &:hover {
-      text-decoration: none;
-      color: $blue-color;
+    .close-button {
+      &:hover {
+        text-decoration: none;
+      }
     }
   }
-}
 
-.footer-bar-link .panel {
-  max-height: 85vh;
-  position: absolute;
-  right: 0px;
-  left: 10px;
-  bottom: 40px;
-  min-width: 300px;
-  z-index: 1000;
-  margin-top: 15px;
-  background-color: white;
-}
-
-.panel .close-button {
-  &:hover {
-    text-decoration: none;
-  }
 }
 
 #account-panel {
@@ -181,21 +125,21 @@ a.disabled {
 
 
 
-.spinner {
-  height: 10px;
-  width: 10px;
-  animation: rotate 0.8s infinite linear;
-  border: 1px solid #515263;
-  border-right-color: transparent;
-  border-radius: 50%;
-
-  &.tinted {
-    border: 1px solid $blue-color;
-    border-right-color: transparent;
-  }
-}
-
-@keyframes rotate {
-  0%    { transform: rotate(0deg); }
-  100%  { transform: rotate(360deg); }
-}
+// .spinner {
+//   height: 10px;
+//   width: 10px;
+//   animation: rotate 0.8s infinite linear;
+//   border: 1px solid #515263;
+//   border-right-color: transparent;
+//   border-radius: 50%;
+//
+//   &.tinted {
+//     border: 1px solid $blue-color;
+//     border-right-color: transparent;
+//   }
+// }
+//
+// @keyframes rotate {
+//   0%    { transform: rotate(0deg); }
+//   100%  { transform: rotate(360deg); }
+// }
diff --git a/app/assets/stylesheets/app/_menus.scss b/app/assets/stylesheets/app/_menus.scss
index 27d2df09b..3defb1d9e 100644
--- a/app/assets/stylesheets/app/_menus.scss
+++ b/app/assets/stylesheets/app/_menus.scss
@@ -1,61 +1,6 @@
-ul.section-menu-bar {
-  width: 100%;
-  padding-top: 0px;
-  padding-left: 6px;
-  padding-right: 21px;
-
-  &.no-h-padding {
-    padding-left: 0px;
-    padding-right: 0px;
-  }
-
-  user-select: none;
-
-  background-color: #f1f1f1;
-  color: $selected-text-color;
-  height: 28px;
-  cursor: default;
-
-  margin-top: 0px;
-  margin-bottom: 0;
-  list-style: none;
-  font-weight: bold;
-  font-size: 0; /* trick to remove gaps between li inline-block elements */
-
-  > li {
-    padding: 6px 8px;
-    text-align: left;
-    display: inline-block;
+.app-bar {
+  .item {
     position: relative;
-
-    font-size: 13px;
-    font-weight: bold;
-    user-select: none;
-
-    &.full-width {
-      width: 100%;
-      padding-left: 14px;
-    }
-
-    &.item-with-subtitle {
-      label {
-        margin-right: 8px;
-      }
-
-      .subtitle {
-        margin-top: 1px;
-        opacity: 0.5;
-        font-weight: normal;
-        font-size: 12px;
-      }
-    }
-
-
-    &.selected {
-      background-color: $blue-color;
-      border-radius: 1px;
-      color: white;
-    }
   }
 }
 
@@ -67,12 +12,8 @@ ul.section-menu-bar {
     min-width: 160px;
     z-index: 100;
 
-    list-style: none;
-    font-size: 14px;
-    text-align: left;
+    margin-top: 5px;
 
-    padding: 0 0;
-    border: none;
     width: 280px;
 
     max-height: calc(85vh - 90px);
diff --git a/app/assets/stylesheets/app/_notes.scss b/app/assets/stylesheets/app/_notes.scss
index 7075a8b87..468c999da 100644
--- a/app/assets/stylesheets/app/_notes.scss
+++ b/app/assets/stylesheets/app/_notes.scss
@@ -16,12 +16,12 @@
   }
 
   #notes-title-bar {
-    color: rgba(black, 0.40);
     padding-top: 16px;
     font-weight: normal;
     font-size: 18px;
 
     .title {
+      color: rgba(black, 0.40);
       width: calc(90% - 45px);
     }
   }
@@ -31,6 +31,7 @@
   }
 
   #notes-menu-bar {
+    color: default;
     position: relative;
     margin-top: 14px;
     height: auto;
diff --git a/app/assets/templates/frontend/directives/account-menu.html.haml b/app/assets/templates/frontend/directives/account-menu.html.haml
index bf99e0e65..19da283c1 100644
--- a/app/assets/templates/frontend/directives/account-menu.html.haml
+++ b/app/assets/templates/frontend/directives/account-menu.html.haml
@@ -65,13 +65,14 @@
 
 
 
-          %a.block.mt-5{"ng-click" => "newPasswordData.changePassword = !newPasswordData.changePassword"} Change Password
-          %section.gray-bg.mt-10.medium-padding{"ng-if" => "newPasswordData.changePassword"}
-            %p.bold Change Password (Beta)
-            %p.mt-10 Since your encryption key is based on your password, changing your password requires all your notes and tags to be re-encrypted using your new key.
-            %p.mt-5 If you have thousands of items, this can take several minutes — you must keep the application window open during this process.
-            %p.mt-5 After changing your password, you must log out of all other applications currently signed in to your account.
-            %p.bold.mt-5 It is highly recommended you download a backup of your data before proceeding.
+          %a.panel-row{"ng-click" => "newPasswordData.changePassword = !newPasswordData.changePassword"} Change Password
+          .notification.default{"ng-if" => "newPasswordData.changePassword"}
+            %h1.title Change Password (Beta)
+            .text
+              %p.mt-10 Since your encryption key is based on your password, changing your password requires all your notes and tags to be re-encrypted using your new key.
+              %p.mt-5 If you have thousands of items, this can take several minutes — you must keep the application window open during this process.
+              %p.mt-5 After changing your password, you must log out of all other applications currently signed in to your account.
+              %p.bold.mt-5 It is highly recommended you download a backup of your data before proceeding.
             %div.mt-10{"ng-if" => "!newPasswordData.status"}
               %a.red.mr-5{"ng-if" => "!newPasswordData.showForm", "ng-click" => "showPasswordChangeForm()"} Continue
               %a{"ng-click" => "newPasswordData.changePassword = false; newPasswordData.showForm = false"} Cancel
@@ -79,17 +80,18 @@
                 %form
                   %input.form-control{:type => 'password', "ng-model" => "newPasswordData.newPassword", "placeholder" => "Enter new password"}
                   %input.form-control{:type => 'password', "ng-model" => "newPasswordData.newPasswordConfirmation", "placeholder" => "Confirm new password"}
-                  %button.ui-button.block{"ng-click" => "submitPasswordChange()"} Submit
+                  .button-group.stretch.panel-row.form-submit
+                    .button.info{"type" => "submit", "ng-click" => "submitPasswordChange()"}
+                      .label Submit
             %p.italic.mt-10{"ng-if" => "newPasswordData.status"} {{newPasswordData.status}}
 
 
 
-
-          %a.block.mt-5{"ng-click" => "showAdvanced = !showAdvanced"} Advanced
+          %a.panel-row{"ng-click" => "showAdvanced = !showAdvanced"} Advanced
           %div{"ng-if" => "showAdvanced"}
-            %a.block.mt-15{"href" => "{{dashboardURL()}}", "target" => "_blank"} Data Dashboard
-            %a.block.mt-5{"ng-click" => "reencryptPressed()"} Re-encrypt All Items
-            %a.block.mt-5{"ng-click" => "showCredentials = !showCredentials"} Show Credentials
+            %a.panel-row{"href" => "{{dashboardURL()}}", "target" => "_blank"} Data Dashboard
+            %a.panel-row{"ng-click" => "reencryptPressed()"} Re-encrypt All Items
+            %a.panel-row{"ng-click" => "showCredentials = !showCredentials"} Show Credentials
             %section.gray-bg.mt-10.medium-padding{"ng-if" => "showCredentials"}
               %label.block
                 Encryption key:
@@ -118,10 +120,10 @@
 
         .panel-section
           %h3.title Encryption
+          %h5.subtitle{"ng-if" => "encryptionEnabled()"}
+            {{encryptionStatusForNotes()}}
           %p
             {{encryptionStatusString()}}
-          %div.mt-5{"ng-if" => "encryptionEnabled()"}
-            %i {{encryptionStatusForNotes()}}
 
         .panel-section
           %h3.title Passcode Lock
@@ -129,12 +131,14 @@
             .button.info{"ng-click" => "addPasscodeClicked()", "ng-if" => "!formData.showPasscodeForm"}
               .label Add Passcode
 
+            %p Add an app passcode to lock the app and encrypt on-device key storage.
+
             %form.mt-5{"ng-if" => "formData.showPasscodeForm", "ng-submit" => "submitPasscodeForm()"}
-              %p.bold Choose a passcode:
               %input.form-control.mt-10{:type => 'password', "ng-model" => "formData.passcode", "placeholder" => "Passcode", "autofocus" => "true"}
               %input.form-control.mt-10{:type => 'password', "ng-model" => "formData.confirmPasscode", "placeholder" => "Confirm Passcode"}
-              %button.standard.ui-button.block.tinted.mt-5{"type" => "submit"} Set Passcode
-            %p Add an app passcode to lock the app and encrypt on-device key storage.
+              .button-group.stretch.panel-row.form-submit
+                .button.info{"type" => "submit"}
+                  .label Set Passcode
           %div{"ng-if" => "hasPasscode()"}
             %p
               Passcode lock is enabled.
@@ -147,13 +151,14 @@
 
         .panel-section{"ng-if" => "!importData.loading"}
           %h3.title Data Backups
-          %div{"ng-if" => "encryptedBackupsAvailable()"}
-            %label.normal.inline
-              %input{"type" => "radio", "ng-model" => "archiveFormData.encrypted", "ng-value" => "true", "ng-change" => "archiveFormData.encrypted = true"}
-              Encrypted
-            %label.normal.inline
-              %input{"type" => "radio", "ng-model" => "archiveFormData.encrypted", "ng-value" => "false", "ng-change" => "archiveFormData.encrypted = false"}
-              Decrypted
+          %form.panel-form{"ng-if" => "encryptedBackupsAvailable()"}
+            .input-group
+              %label
+                %input{"type" => "radio", "ng-model" => "archiveFormData.encrypted", "ng-value" => "true", "ng-change" => "archiveFormData.encrypted = true"}
+                Encrypted
+              %label
+                %input{"type" => "radio", "ng-model" => "archiveFormData.encrypted", "ng-value" => "false", "ng-change" => "archiveFormData.encrypted = false"}
+                Decrypted
 
           .button-group
             .button.info{"ng-click" => "downloadDataArchive()", "ng-class" => "{'mt-5' : !user}"}
@@ -164,7 +169,7 @@
               .label Import From Backup
 
           %div{"ng-if" => "importData.requestPassword"}
-            %form{"ng-submit" => "submitImportPassword()"}
+            %form.panel-form{"ng-submit" => "submitImportPassword()"}
               %p Enter the account password associated with the import file.
               %input.form-control.mt-5{:type => 'password', "ng-model" => "importData.password", "autofocus" => "true"}
               %button.standard.ui-button.block.tinted.mt-5{"type" => "submit"} Decrypt & Import
diff --git a/app/assets/templates/frontend/editor.html.haml b/app/assets/templates/frontend/editor.html.haml
index c89419dc6..b63d1f280 100644
--- a/app/assets/templates/frontend/editor.html.haml
+++ b/app/assets/templates/frontend/editor.html.haml
@@ -12,32 +12,33 @@
         %iframe#note-tags-iframe{"ng-src" => "{{ctrl.componentManager.urlForComponent(ctrl.tagsComponent) | trusted}}", "frameBorder" => "0", "sandbox" => "allow-scripts", "data-component-id" => "{{ctrl.tagsComponent.uuid}}"}
       %input.tags-input{"ng-if" => "!(ctrl.tagsComponent && ctrl.tagsComponent.active)", "type" => "text", "ng-keyup" => "$event.keyCode == 13 && $event.target.blur();",
       "ng-model" => "ctrl.tagsString", "placeholder" => "#tags", "ng-blur" => "ctrl.updateTagsFromTagsString($event, ctrl.tagsString)"}
-  %ul.section-menu-bar{"ng-if" => "ctrl.note"}
-    %li{"ng-class" => "{'selected' : ctrl.showMenu}", "click-outside" => "ctrl.showMenu = false;", "is-open" => "ctrl.showMenu"}
-      %label{"ng-click" => "ctrl.showMenu = !ctrl.showMenu; ctrl.showExtensions = false; ctrl.showEditorMenu = false;"} Menu
 
-      .sn-component
-        .menu-panel.dropdown-menu{"ng-if" => "ctrl.showMenu"}
-          .section
-            .header
-              %h4.title Note
-            %menu-row{"title" => "ctrl.note.pinned ? 'Unpin' : 'Pin'", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.togglePin()"}
-            %menu-row{"title" => "ctrl.note.archived ? 'Unarchive' : 'Archive'", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleArchiveNote()"}
-            %menu-row{"title" => "'Delete'", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.deleteNote()"}
-            %menu-row{"ng-if" => "ctrl.hasDisabledComponents()", "title" => "'Restore Disabled Components'", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.restoreDisabledComponents()"}
+  .sn-component{"ng-if" => "ctrl.note"}
+    .app-bar.no-edges
+      .left
+        .item{"ng-click" => "ctrl.showMenu = !ctrl.showMenu; ctrl.showExtensions = false; ctrl.showEditorMenu = false;", "ng-class" => "{'selected' : ctrl.showMenu}", "click-outside" => "ctrl.showMenu = false;", "is-open" => "ctrl.showMenu"}
+          .label Menu
+          .menu-panel.dropdown-menu{"ng-if" => "ctrl.showMenu"}
+            .section
+              .header
+                %h4.title Note
+              %menu-row{"title" => "ctrl.note.pinned ? 'Unpin' : 'Pin'", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.togglePin()"}
+              %menu-row{"title" => "ctrl.note.archived ? 'Unarchive' : 'Archive'", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleArchiveNote()"}
+              %menu-row{"title" => "'Delete'", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.deleteNote()"}
+              %menu-row{"ng-if" => "ctrl.hasDisabledComponents()", "title" => "'Restore Disabled Components'", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.restoreDisabledComponents()"}
 
-          .section{"ng-if" => "!ctrl.editor"}
-            .header
-              %h4.title Display
-            %menu-row{"title" => "'Monospace Font'", "circle" => "ctrl.monospaceFont ? 'success' : 'default'", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleKey('monospaceFont')"}
+            .section{"ng-if" => "!ctrl.editor"}
+              .header
+                %h4.title Display
+              %menu-row{"title" => "'Monospace Font'", "circle" => "ctrl.monospaceFont ? 'success' : 'default'", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleKey('monospaceFont')"}
 
-    %li{"ng-class" => "{'selected' : ctrl.showEditorMenu}", "click-outside" => "ctrl.showEditorMenu = false;", "is-open" => "ctrl.showEditorMenu"}
-      %label{"ng-click" => "ctrl.showEditorMenu = !ctrl.showEditorMenu; ctrl.showMenu = false; ctrl.showExtensions = false;"} Editor
-      %editor-menu{"ng-if" => "ctrl.showEditorMenu", "callback" => "ctrl.selectedEditor", "selected-editor" => "ctrl.editorComponent"}
+        .item{"ng-click" => "ctrl.showEditorMenu = !ctrl.showEditorMenu; ctrl.showMenu = false; ctrl.showExtensions = false;", "ng-class" => "{'selected' : ctrl.showEditorMenu}", "click-outside" => "ctrl.showEditorMenu = false;", "is-open" => "ctrl.showEditorMenu"}
+          .label Editor
+          %editor-menu{"ng-if" => "ctrl.showEditorMenu", "callback" => "ctrl.selectedEditor", "selected-editor" => "ctrl.editorComponent"}
 
-    %li{"ng-class" => "{'selected' : ctrl.showExtensions}", "ng-if" => "ctrl.hasAvailableExtensions()", "click-outside" => "ctrl.showExtensions = false;", "is-open" => "ctrl.showExtensions"}
-      %label{"ng-click" => "ctrl.showExtensions = !ctrl.showExtensions; ctrl.showMenu = false; ctrl.showEditorMenu = false;"} Actions
-      %contextual-extensions-menu{"ng-if" => "ctrl.showExtensions", "item" => "ctrl.note"}
+        .item{"ng-click" => "ctrl.showExtensions = !ctrl.showExtensions; ctrl.showMenu = false; ctrl.showEditorMenu = false;", "ng-class" => "{'selected' : ctrl.showExtensions}", "ng-if" => "ctrl.hasAvailableExtensions()", "click-outside" => "ctrl.showExtensions = false;", "is-open" => "ctrl.showExtensions"}
+          .label Actions
+          %contextual-extensions-menu{"ng-if" => "ctrl.showExtensions", "item" => "ctrl.note"}
 
   .editor-content#editor-content{"ng-if" => "ctrl.noteReady && !ctrl.note.errorDecrypting"}
     %panel-resizer.left{"panel-id" => "'editor-content'", "on-resize-finish" => "ctrl.onPanelResizeFinish","control" => "ctrl.resizeControl", "min-width" => 300, "property" => "'left'", "hoverable" => "true"}
diff --git a/app/assets/templates/frontend/footer.html.haml b/app/assets/templates/frontend/footer.html.haml
index 5fb62a127..4b772f60e 100644
--- a/app/assets/templates/frontend/footer.html.haml
+++ b/app/assets/templates/frontend/footer.html.haml
@@ -1,33 +1,40 @@
-#footer-bar
-  .pull-left
-    .footer-bar-link{"click-outside" => "ctrl.showAccountMenu = false;", "is-open" => "ctrl.showAccountMenu"}
-      %a.label{"ng-click" => "ctrl.accountMenuPressed()", "ng-class" => "{red: ctrl.error}"} Account
-      %account-menu{"ng-if" => "ctrl.showAccountMenu", "on-successful-auth" => "ctrl.onAuthSuccess"}
+.sn-component
+  #footer-bar.app-bar.no-edges
+    .left
+      .item{"click-outside" => "ctrl.showAccountMenu = false;", "is-open" => "ctrl.showAccountMenu"}
+        .column
+          .circle.small.info
+        .column
+          .label.title{"ng-click" => "ctrl.accountMenuPressed()", "ng-class" => "{red: ctrl.error}"} Account
+        %account-menu{"ng-if" => "ctrl.showAccountMenu", "on-successful-auth" => "ctrl.onAuthSuccess"}
 
-    .footer-bar-link{"click-outside" => "ctrl.showExtensionsMenu = false;", "is-open" => "ctrl.showExtensionsMenu"}
-      %a.label{"ng-click" => "ctrl.toggleExtensions()"} Extensions
-      %global-extensions-menu{"ng-if" => "ctrl.showExtensionsMenu"}
+      .item{"click-outside" => "ctrl.showExtensionsMenu = false;", "is-open" => "ctrl.showExtensionsMenu"}
+        .label.title{"ng-click" => "ctrl.toggleExtensions()"} Extensions
+        %global-extensions-menu{"ng-if" => "ctrl.showExtensionsMenu"}
 
-    .footer-bar-link
-      %a.label{"href" => "https://standardnotes.org/help", "target" => "_blank"}
-        Help
+      .item
+        .label.title{"href" => "https://standardnotes.org/help", "target" => "_blank"}
+          Help
 
-    %room-bar#room-bar
+      %room-bar#room-bar
 
-  .pull-right
+    .right
 
-    .footer-bar-link{"ng-if" => "ctrl.newUpdateAvailable", "ng-click" => "ctrl.clickedNewUpdateAnnouncement()"}
-      %span.tinted.normal New update downloaded. Installs on app restart.
+      .item{"ng-if" => "ctrl.newUpdateAvailable", "ng-click" => "ctrl.clickedNewUpdateAnnouncement()"}
+        %span.tinted.normal New update downloaded. Installs on app restart.
 
-    .footer-bar-link{"style" => "margin-right: 5px;"}
-      %span{"ng-if" => "ctrl.lastSyncDate", "style" => "float: left; font-weight: normal; margin-right: 8px;"}
-        %span.label{"ng-if" => "!ctrl.isRefreshing"}
-          Last refreshed {{ctrl.lastSyncDate | appDateTime}}
-        %span{"ng-if" => "ctrl.isRefreshing"}
-          .spinner{"style" => "margin-top: 2px;"}
+      .item{"ng-if" => "ctrl.lastSyncDate"}
+        .label
+          %span{"ng-if" => "!ctrl.isRefreshing"}
+            Last refreshed {{ctrl.lastSyncDate | appDateTime}}
+          %span{"ng-if" => "ctrl.isRefreshing"}
+            .spinner
 
-      %strong.label{"ng-if" => "ctrl.offline"} Offline
-      %a.label{"ng-if" => "!ctrl.offline", "ng-click" => "ctrl.refreshData()"} Refresh
+      .item{"ng-if" => "ctrl.offline"}
+        .label Offline
+      .item{"ng-if" => "!ctrl.offline", "ng-click" => "ctrl.refreshData()"}
+        .label Refresh
 
-      %span.label{"ng-if" => "ctrl.hasPasscode()"}
-        %i.icon.ion-locked{"ng-if" => "ctrl.hasPasscode()", "ng-click" => "ctrl.lockApp()"}
+      .item{"ng-if" => "ctrl.hasPasscode()"}
+        .label
+          %i.icon.ion-locked{"ng-if" => "ctrl.hasPasscode()", "ng-click" => "ctrl.lockApp()"}
diff --git a/app/assets/templates/frontend/notes.html.haml b/app/assets/templates/frontend/notes.html.haml
index e5ae42b1a..5574d5a1c 100644
--- a/app/assets/templates/frontend/notes.html.haml
+++ b/app/assets/templates/frontend/notes.html.haml
@@ -8,15 +8,18 @@
         .filter-section
           %input.filter-bar#search-bar.mousetrap{"select-on-click" => "true", "ng-model" => "ctrl.noteFilter.text", "placeholder" => "Search", "ng-change" => "ctrl.filterTextChanged()", "lowercase" => "true"}
             #search-clear-button{"ng-if" => "ctrl.noteFilter.text", "ng-click" => "ctrl.noteFilter.text = ''; ctrl.filterTextChanged()"} ✕
-      %ul.section-menu-bar#notes-menu-bar.no-h-padding
-        %li.item-with-subtitle.full-width{"ng-class" => "{'selected' : ctrl.showMenu}"}
-          .wrapper{"ng-click" => "ctrl.showMenu = !ctrl.showMenu"}
-            %label
-              Options
-              %span.subtitle {{ctrl.optionsSubtitle()}}
+      .sn-component#notes-menu-bar
+        .app-bar.no-edges
+          .left
+            .item{"ng-click" => "ctrl.showMenu = !ctrl.showMenu", "ng-class" => "{'selected' : ctrl.showMenu}"}
+              .column
+                .label
+                  Options
+              .column
+                .sublabel {{ctrl.optionsSubtitle()}}
 
-          .sn-component
-            .menu-panel.dropdown-menu{"ng-if" => "ctrl.showMenu"}
+          .sn-component{"ng-if" => "ctrl.showMenu"}
+            .menu-panel.dropdown-menu
               .section
                 .header
                   %h4.title Sort By
diff --git a/vendor/assets/stylesheets/stylekit.css b/vendor/assets/stylesheets/stylekit.css
index c46bf1db7..2a06681db 100644
--- a/vendor/assets/stylesheets/stylekit.css
+++ b/vendor/assets/stylesheets/stylekit.css
@@ -130,7 +130,7 @@
 .sn-component .menu-panel .row .column .left {
   display: flex;
 }
-.sn-component .menu-panel .row .button .label, .sn-component .menu-panel .row .box .label, .sn-component .menu-panel .row .notification .label, .sn-component .menu-panel .row .circle .label, .sn-component .menu-panel .row .button .panel .content .panel-section .subtitle, .sn-component .panel .content .panel-section .menu-panel .row .button .subtitle, .sn-component .menu-panel .row .box .panel .content .panel-section .subtitle, .sn-component .panel .content .panel-section .menu-panel .row .box .subtitle, .sn-component .menu-panel .row .notification .panel .content .panel-section .subtitle, .sn-component .panel .content .panel-section .menu-panel .row .notification .subtitle, .sn-component .menu-panel .row .circle .panel .content .panel-section .subtitle, .sn-component .panel .content .panel-section .menu-panel .row .circle .subtitle {
+.sn-component .menu-panel .row .button .label, .sn-component .menu-panel .row .box .label, .sn-component .menu-panel .row .circle .label, .sn-component .menu-panel .row .button .panel .content .panel-section .subtitle, .sn-component .panel .content .panel-section .menu-panel .row .button .subtitle, .sn-component .menu-panel .row .box .panel .content .panel-section .subtitle, .sn-component .panel .content .panel-section .menu-panel .row .box .subtitle, .sn-component .menu-panel .row .circle .panel .content .panel-section .subtitle, .sn-component .panel .content .panel-section .menu-panel .row .circle .subtitle {
   font-size: 0.8rem;
   font-weight: normal;
 }
@@ -152,7 +152,7 @@
 .sn-component .tinted {
   color: #086DD6;
 }
-.sn-component h1, .sn-component h2, .sn-component h3, .sn-component h4 {
+.sn-component h1, .sn-component h2, .sn-component h3, .sn-component h4, .sn-component h5 {
   margin: 0;
   padding: 0;
 }
@@ -212,11 +212,17 @@
   display: block;
   font-size: 1.1rem;
 }
-.sn-component label input[type='checkbox'] {
+.sn-component label input[type='checkbox'], .sn-component input[type='radio'] {
   width: auto;
-  margin-right: 0.5rem;
+  margin-right: 0.45rem;
   /* Space after checkbox */
 }
+.sn-component .input-group > * {
+  display: inline-block;
+}
+.sn-component .input-group > *:not(:first-child) {
+  margin-left: 0.9rem;
+}
 .sn-component .checkbox-group {
   padding-top: 0.5rem;
   padding-bottom: 0.3rem;
@@ -236,29 +242,29 @@
 .sn-component .button-group.stretch {
   display: flex;
 }
-.sn-component .button-group.stretch .button, .sn-component .button-group.stretch .box, .sn-component .button-group.stretch .notification, .sn-component .button-group.stretch .circle {
+.sn-component .button-group.stretch .button, .sn-component .button-group.stretch .box, .sn-component .button-group.stretch .circle {
   display: block;
   flex-grow: 1;
   text-align: center;
 }
-.sn-component .button-group .button, .sn-component .button-group .box, .sn-component .button-group .notification, .sn-component .button-group .circle {
+.sn-component .button-group .button, .sn-component .button-group .box, .sn-component .button-group .circle {
   display: inline-block;
   margin-bottom: 5px;
 }
-.sn-component .button-group .button:not(:last-child), .sn-component .button-group .box:not(:last-child), .sn-component .button-group .notification:not(:last-child), .sn-component .button-group .circle:not(:last-child) {
+.sn-component .button-group .button:not(:last-child), .sn-component .button-group .box:not(:last-child), .sn-component .button-group .circle:not(:last-child) {
   margin-right: 5px;
 }
-.sn-component .button-group .button:not(:last-child).featured, .sn-component .button-group .box:not(:last-child).featured, .sn-component .button-group .notification:not(:last-child).featured, .sn-component .button-group .circle:not(:last-child).featured {
+.sn-component .button-group .button:not(:last-child).featured, .sn-component .button-group .box:not(:last-child).featured, .sn-component .button-group .circle:not(:last-child).featured {
   margin-right: 8px;
 }
-.sn-component .box-group .box, .sn-component .box-group .notification {
+.sn-component .box-group .box {
   display: inline-block;
   margin-bottom: 5px;
 }
-.sn-component .box-group .box:not(:last-child), .sn-component .box-group .notification:not(:last-child) {
+.sn-component .box-group .box:not(:last-child) {
   margin-right: 5px;
 }
-.sn-component .button, .sn-component .box, .sn-component .notification, .sn-component .circle {
+.sn-component .button, .sn-component .box, .sn-component .circle {
   display: table;
   border-radius: 3px;
   padding: 0.5rem 0.7rem;
@@ -267,91 +273,175 @@
   text-align: center;
   border: 1px solid;
 }
-.sn-component .button .label, .sn-component .box .label, .sn-component .notification .label, .sn-component .circle .label, .sn-component .button .panel .content .panel-section .subtitle, .sn-component .panel .content .panel-section .button .subtitle, .sn-component .box .panel .content .panel-section .subtitle, .sn-component .panel .content .panel-section .box .subtitle, .sn-component .notification .panel .content .panel-section .subtitle, .sn-component .panel .content .panel-section .notification .subtitle, .sn-component .circle .panel .content .panel-section .subtitle, .sn-component .panel .content .panel-section .circle .subtitle {
+.sn-component .button .label, .sn-component .box .label, .sn-component .circle .label, .sn-component .button .panel .content .panel-section .subtitle, .sn-component .panel .content .panel-section .button .subtitle, .sn-component .box .panel .content .panel-section .subtitle, .sn-component .panel .content .panel-section .box .subtitle, .sn-component .circle .panel .content .panel-section .subtitle, .sn-component .panel .content .panel-section .circle .subtitle {
   font-weight: bold;
   display: block;
   text-align: center;
 }
-.sn-component .box, .sn-component .notification {
+.sn-component .box {
   padding: 2.5rem 1.5rem;
 }
-.sn-component .button.info, .sn-component .info.box, .sn-component .info.notification, .sn-component .info.circle, .sn-component .box.info, .sn-component .info.notification, .sn-component .notification.info, .sn-component .circle.info {
+.sn-component .button.default, .sn-component .default.box, .sn-component .default.circle, .sn-component .box.default, .sn-component .circle.default {
+  background-color: rgba(139, 139, 139, 0.1);
+  border-color: #8b8b8b;
+  color: #8b8b8b;
+}
+.sn-component .button.default:hover, .sn-component .default.box:hover, .sn-component .default.circle:hover, .sn-component .box.default:hover, .sn-component .circle.default:hover {
+  background-color: white;
+  color: #939393;
+}
+.sn-component .button.default.featured, .sn-component .default.featured.box, .sn-component .default.featured.circle, .sn-component .box.default.featured, .sn-component .circle.default.featured {
+  background-color: #8b8b8b;
+  border: none;
+  color: white;
+  padding: 0.75rem 1.25rem;
+  font-size: 1.1rem;
+}
+.sn-component .button.default.featured:hover, .sn-component .default.featured.box:hover, .sn-component .default.featured.circle:hover, .sn-component .box.default.featured:hover, .sn-component .circle.default.featured:hover {
+  background-color: #9f9f9f;
+}
+.sn-component .button.info, .sn-component .info.box, .sn-component .info.circle, .sn-component .box.info, .sn-component .circle.info {
   background-color: rgba(8, 109, 214, 0.1);
   border-color: #086DD6;
   color: #086DD6;
 }
-.sn-component .button.info:hover, .sn-component .info.box:hover, .sn-component .info.notification:hover, .sn-component .info.circle:hover, .sn-component .box.info:hover, .sn-component .info.notification:hover, .sn-component .notification.info:hover, .sn-component .circle.info:hover {
+.sn-component .button.info:hover, .sn-component .info.box:hover, .sn-component .info.circle:hover, .sn-component .box.info:hover, .sn-component .circle.info:hover {
   background-color: #d5e9fd;
   color: #0975e5;
 }
-.sn-component .button.info.featured, .sn-component .info.featured.box, .sn-component .info.featured.notification, .sn-component .info.featured.circle, .sn-component .box.info.featured, .sn-component .info.featured.notification, .sn-component .notification.info.featured, .sn-component .circle.info.featured {
+.sn-component .button.info.featured, .sn-component .info.featured.box, .sn-component .info.featured.circle, .sn-component .box.info.featured, .sn-component .circle.info.featured {
   background-color: #086DD6;
   border: none;
   color: white;
   padding: 0.75rem 1.25rem;
   font-size: 1.1rem;
 }
-.sn-component .button.info.featured:hover, .sn-component .info.featured.box:hover, .sn-component .info.featured.notification:hover, .sn-component .info.featured.circle:hover, .sn-component .box.info.featured:hover, .sn-component .info.featured.notification:hover, .sn-component .notification.info.featured:hover, .sn-component .circle.info.featured:hover {
+.sn-component .button.info.featured:hover, .sn-component .info.featured.box:hover, .sn-component .info.featured.circle:hover, .sn-component .box.info.featured:hover, .sn-component .circle.info.featured:hover {
   background-color: #1181f6;
 }
-.sn-component .button.warning, .sn-component .warning.box, .sn-component .warning.notification, .sn-component .warning.circle, .sn-component .box.warning, .sn-component .warning.notification, .sn-component .notification.warning {
+.sn-component .button.warning, .sn-component .warning.box, .sn-component .warning.circle, .sn-component .box.warning, .sn-component .circle.warning {
   background-color: rgba(246, 162, 0, 0.1);
   border-color: #f6a200;
   color: #f6a200;
 }
-.sn-component .button.warning:hover, .sn-component .warning.box:hover, .sn-component .warning.notification:hover, .sn-component .warning.circle:hover, .sn-component .box.warning:hover, .sn-component .warning.notification:hover, .sn-component .notification.warning:hover {
+.sn-component .button.warning:hover, .sn-component .warning.box:hover, .sn-component .warning.circle:hover, .sn-component .box.warning:hover, .sn-component .circle.warning:hover {
   background-color: #fff8ec;
   color: #ffaa06;
 }
-.sn-component .button.warning.featured, .sn-component .warning.featured.box, .sn-component .warning.featured.notification, .sn-component .warning.featured.circle, .sn-component .box.warning.featured, .sn-component .warning.featured.notification, .sn-component .notification.warning.featured {
+.sn-component .button.warning.featured, .sn-component .warning.featured.box, .sn-component .warning.featured.circle, .sn-component .box.warning.featured, .sn-component .circle.warning.featured {
   background-color: #f6a200;
   border: none;
   color: white;
   padding: 0.75rem 1.25rem;
   font-size: 1.1rem;
 }
-.sn-component .button.warning.featured:hover, .sn-component .warning.featured.box:hover, .sn-component .warning.featured.notification:hover, .sn-component .warning.featured.circle:hover, .sn-component .box.warning.featured:hover, .sn-component .warning.featured.notification:hover, .sn-component .notification.warning.featured:hover {
+.sn-component .button.warning.featured:hover, .sn-component .warning.featured.box:hover, .sn-component .warning.featured.circle:hover, .sn-component .box.warning.featured:hover, .sn-component .circle.warning.featured:hover {
   background-color: #ffb320;
 }
-.sn-component .button.danger, .sn-component .danger.box, .sn-component .danger.notification, .sn-component .danger.circle, .sn-component .box.danger, .sn-component .danger.notification, .sn-component .notification.danger {
+.sn-component .button.danger, .sn-component .danger.box, .sn-component .danger.circle, .sn-component .box.danger, .sn-component .circle.danger {
   background-color: rgba(248, 3, 36, 0.1);
   border-color: #F80324;
   color: #F80324;
 }
-.sn-component .button.danger:hover, .sn-component .danger.box:hover, .sn-component .danger.notification:hover, .sn-component .danger.circle:hover, .sn-component .box.danger:hover, .sn-component .danger.notification:hover, .sn-component .notification.danger:hover {
+.sn-component .button.danger:hover, .sn-component .danger.box:hover, .sn-component .danger.circle:hover, .sn-component .box.danger:hover, .sn-component .circle.danger:hover {
   background-color: #fff1f3;
   color: #fc0e2e;
 }
-.sn-component .button.danger.featured, .sn-component .danger.featured.box, .sn-component .danger.featured.notification, .sn-component .danger.featured.circle, .sn-component .box.danger.featured, .sn-component .danger.featured.notification, .sn-component .notification.danger.featured {
+.sn-component .button.danger.featured, .sn-component .danger.featured.box, .sn-component .danger.featured.circle, .sn-component .box.danger.featured, .sn-component .circle.danger.featured {
   background-color: #F80324;
   border: none;
   color: white;
   padding: 0.75rem 1.25rem;
   font-size: 1.1rem;
 }
-.sn-component .button.danger.featured:hover, .sn-component .danger.featured.box:hover, .sn-component .danger.featured.notification:hover, .sn-component .danger.featured.circle:hover, .sn-component .box.danger.featured:hover, .sn-component .danger.featured.notification:hover, .sn-component .notification.danger.featured:hover {
+.sn-component .button.danger.featured:hover, .sn-component .danger.featured.box:hover, .sn-component .danger.featured.circle:hover, .sn-component .box.danger.featured:hover, .sn-component .circle.danger.featured:hover {
   background-color: #fc2744;
 }
-.sn-component .button.success, .sn-component .success.box, .sn-component .success.notification, .sn-component .success.circle, .sn-component .box.success, .sn-component .success.notification, .sn-component .notification.success {
+.sn-component .button.success, .sn-component .success.box, .sn-component .success.circle, .sn-component .box.success, .sn-component .circle.success {
   background-color: rgba(43, 150, 18, 0.1);
   border-color: #2B9612;
   color: #2B9612;
 }
-.sn-component .button.success:hover, .sn-component .success.box:hover, .sn-component .success.notification:hover, .sn-component .success.circle:hover, .sn-component .box.success:hover, .sn-component .success.notification:hover, .sn-component .notification.success:hover {
+.sn-component .button.success:hover, .sn-component .success.box:hover, .sn-component .success.circle:hover, .sn-component .box.success:hover, .sn-component .circle.success:hover {
   background-color: #b7f5a8;
   color: #2fa414;
 }
-.sn-component .button.success.featured, .sn-component .success.featured.box, .sn-component .success.featured.notification, .sn-component .success.featured.circle, .sn-component .box.success.featured, .sn-component .success.featured.notification, .sn-component .notification.success.featured {
+.sn-component .button.success.featured, .sn-component .success.featured.box, .sn-component .success.featured.circle, .sn-component .box.success.featured, .sn-component .circle.success.featured {
   background-color: #2B9612;
   border: none;
   color: white;
   padding: 0.75rem 1.25rem;
   font-size: 1.1rem;
 }
-.sn-component .button.success.featured:hover, .sn-component .success.featured.box:hover, .sn-component .success.featured.notification:hover, .sn-component .success.featured.circle:hover, .sn-component .box.success.featured:hover, .sn-component .success.featured.notification:hover, .sn-component .notification.success.featured:hover {
+.sn-component .button.success.featured:hover, .sn-component .success.featured.box:hover, .sn-component .success.featured.circle:hover, .sn-component .box.success.featured:hover, .sn-component .circle.success.featured:hover {
+  background-color: #35ba16;
+}
+.sn-component .notification.default {
+  background-color: #F6F6F6;
+  border-color: #c4c4c4;
+}
+.sn-component .notification.info {
+  background-color: rgba(8, 109, 214, 0.1);
+  border-color: #086DD6;
+  color: #086DD6;
+}
+.sn-component .notification.info.featured {
+  background-color: #086DD6;
+  border: none;
+  color: white;
+  padding: 0.75rem 1.25rem;
+  font-size: 1.1rem;
+}
+.sn-component .notification.info.featured:hover {
+  background-color: #1181f6;
+}
+.sn-component .notification.warning {
+  background-color: rgba(246, 162, 0, 0.1);
+  border-color: #f6a200;
+  color: #f6a200;
+}
+.sn-component .notification.warning.featured {
+  background-color: #f6a200;
+  border: none;
+  color: white;
+  padding: 0.75rem 1.25rem;
+  font-size: 1.1rem;
+}
+.sn-component .notification.warning.featured:hover {
+  background-color: #ffb320;
+}
+.sn-component .notification.danger {
+  background-color: rgba(248, 3, 36, 0.1);
+  border-color: #F80324;
+  color: #F80324;
+}
+.sn-component .notification.danger.featured {
+  background-color: #F80324;
+  border: none;
+  color: white;
+  padding: 0.75rem 1.25rem;
+  font-size: 1.1rem;
+}
+.sn-component .notification.danger.featured:hover {
+  background-color: #fc2744;
+}
+.sn-component .notification.success {
+  background-color: rgba(43, 150, 18, 0.1);
+  border-color: #2B9612;
+  color: #2B9612;
+}
+.sn-component .notification.success.featured {
+  background-color: #2B9612;
+  border: none;
+  color: white;
+  padding: 0.75rem 1.25rem;
+  font-size: 1.1rem;
+}
+.sn-component .notification.success.featured:hover {
   background-color: #35ba16;
 }
 .sn-component .notification {
+  border: 1px solid;
   padding: 1.1rem 1rem;
   margin: 1.4rem 0;
   text-align: left;
@@ -421,10 +511,16 @@
   align-items: center;
   border: 1px solid #DDDDDD;
 }
+.sn-component .app-bar.no-edges {
+  border-left: 0;
+  border-right: 0;
+}
 .sn-component .app-bar .left, .sn-component .app-bar .right {
   display: flex;
+  height: 100%;
 }
 .sn-component .app-bar .item {
+  flex-grow: 1;
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -433,12 +529,21 @@
 .sn-component .app-bar .item:not(:first-child) {
   margin-left: 1rem;
 }
-.sn-component .app-bar .item .label, .sn-component .app-bar .item .panel .content .panel-section .subtitle, .sn-component .panel .content .panel-section .app-bar .item .subtitle {
+.sn-component .app-bar .item > .column:not(:first-child) {
+  margin-left: 0.5rem;
+}
+.sn-component .app-bar .item:hover > .label, .sn-component .app-bar .panel .content .panel-section .item:hover > .subtitle, .sn-component .panel .content .panel-section .app-bar .item:hover > .subtitle, .sn-component .app-bar .item:hover > .sublabel, .sn-component .app-bar .item:hover > .column > .label, .sn-component .app-bar .panel .content .panel-section .item:hover > .column > .subtitle, .sn-component .panel .content .panel-section .app-bar .item:hover > .column > .subtitle, .sn-component .app-bar .item:hover > .column > .sublabel {
+  color: #086DD6;
+}
+.sn-component .app-bar .item > .label, .sn-component .app-bar .panel .content .panel-section .item > .subtitle, .sn-component .panel .content .panel-section .app-bar .item > .subtitle, .sn-component .app-bar .item > .column > .label, .sn-component .app-bar .panel .content .panel-section .item > .column > .subtitle, .sn-component .panel .content .panel-section .app-bar .item > .column > .subtitle {
   font-weight: bold;
   font-size: 0.9rem;
+  white-space: nowrap;
 }
-.sn-component .app-bar .item .label:hover, .sn-component .app-bar .item .panel .content .panel-section .subtitle:hover, .sn-component .panel .content .panel-section .app-bar .item .subtitle:hover {
-  color: #086DD6;
+.sn-component .app-bar .item > .sublabel, .sn-component .app-bar .item > .column > .sublabel {
+  font-size: 0.9rem;
+  font-weight: normal;
+  white-space: nowrap;
 }
 
 /*# sourceMappingURL=stylekit.css.map */