diff --git a/app/assets/javascripts/app/services/directives/views/editorMenu.js b/app/assets/javascripts/app/services/directives/views/editorMenu.js
index 57652641c..b800d7e98 100644
--- a/app/assets/javascripts/app/services/directives/views/editorMenu.js
+++ b/app/assets/javascripts/app/services/directives/views/editorMenu.js
@@ -29,6 +29,10 @@ class EditorMenu {
       $scope.callback()(editor);
     }
 
+    $scope.moreEditors = function() {
+
+    }
+
   }
 
 }
diff --git a/app/assets/javascripts/app/services/directives/views/menuRow.js b/app/assets/javascripts/app/services/directives/views/menuRow.js
new file mode 100644
index 000000000..40e3acbcd
--- /dev/null
+++ b/app/assets/javascripts/app/services/directives/views/menuRow.js
@@ -0,0 +1,20 @@
+class MenuRow {
+
+  constructor() {
+    this.restrict = "E";
+    this.transclude = true;
+    this.templateUrl = "frontend/directives/menu-row.html";
+    this.scope = {
+      circle: "=",
+      title: "=",
+      subtite: "="
+    };
+  }
+
+  controller($scope, componentManager) {
+    'ngInject';
+
+  }
+}
+
+angular.module('app.frontend').directive('menuRow', () => new MenuRow);
diff --git a/app/assets/stylesheets/app/_main.scss b/app/assets/stylesheets/app/_main.scss
index 24a1c2366..a6cd228f9 100644
--- a/app/assets/stylesheets/app/_main.scss
+++ b/app/assets/stylesheets/app/_main.scss
@@ -6,27 +6,35 @@ $selection-color: $bg-color;
 $selected-text-color: black;
 $blue-color: #086dd6;
 
-@mixin MQ-Small() {
-  @media (max-width: $screen-xs-max) {
-    @content;
-  }
-
-  @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
-    @content;
-  }
+html,
+body {
+  font-family: -apple-system, BlinkMacSystemFont,
+    "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans",
+    "Droid Sans", "Helvetica Neue", sans-serif;
+  color: $main-text-color;
+  -webkit-font-smoothing: antialiased;
+  min-height: 100%;
+  height: 100%;
+  font-size: 14px;
+  margin: 0;
+  background-color: $bg-color;
 }
 
-@mixin MQ-Medium() {
-  @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
-    @content;
-  }
+* {
+    box-sizing: border-box;
 }
 
+*:focus {outline:0;}
 
-@mixin MQ-Large() {
-  @media (min-width: $screen-lg-min) {
-    @content;
-  }
+button:focus {
+  outline:0;
+}
+
+input, button, select, textarea {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
 }
 
 .tinted {
@@ -56,21 +64,6 @@ $blue-color: #086dd6;
   }
 }
 
-html,
-body {
-  font-family: -apple-system, BlinkMacSystemFont,
-    "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans",
-    "Droid Sans", "Helvetica Neue", sans-serif;
-  color: $main-text-color;
-  -webkit-font-smoothing: antialiased;
-  min-height: 100%;
-  height: 100%;
-  font-size: 14px;
-  margin: 0;
-  background-color: $bg-color;
-}
-
 .dark-button {
   background-color: #2e2e2e;
   border: 0;
@@ -92,8 +85,17 @@ body {
 a {
   color: $blue-color;
   text-decoration: none;
+
+  &.no-decoration {
+    color: inherit;
+  }
+
   &:hover {
-    text-decoration: underline;;
+    text-decoration: underline;
+
+    &.no-decoration {
+      text-decoration: none;
+    }
   }
 }
 
diff --git a/app/assets/stylesheets/app/_menus.scss b/app/assets/stylesheets/app/_menus.scss
index 4bbfab8af..27d2df09b 100644
--- a/app/assets/stylesheets/app/_menus.scss
+++ b/app/assets/stylesheets/app/_menus.scss
@@ -39,7 +39,6 @@ ul.section-menu-bar {
 
     &.item-with-subtitle {
       label {
-        // float: left;
         margin-right: 8px;
       }
 
@@ -48,15 +47,6 @@ ul.section-menu-bar {
         opacity: 0.5;
         font-weight: normal;
         font-size: 12px;
-
-        // overflow: hidden;
-        // text-overflow: ellipsis;
-        // display: -webkit-box;
-        // -webkit-box-orient: vertical;
-        // -webkit-line-clamp: 1; /* number of lines to show */
-        // $line-height: 18px;
-        // line-height: $line-height;        /* fallback */
-        // max-height: calc(#{$line-height} * 1);       /* fallback */
       }
     }
 
@@ -85,176 +75,8 @@ ul.section-menu-bar {
     border: none;
     width: 280px;
 
-    &.full-width {
-      width: 100%;
-    }
-
-    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
-    box-shadow: 0 6px 50px rgba(0, 0, 0, 0.175);
-    background-clip: padding-box;
-    border-bottom-left-radius: 4px;
-    border-bottom-right-radius: 4px;
+    max-height: calc(85vh - 90px);
 
     background-color: white;
     color: $selected-text-color;
-
-    li:hover {
-      background-color: $blue-color;
-      color: white;
-    }
-
-    > li {
-      width: 100%;
-      height: 40px;
-      padding-top: 3px;
-      overflow: hidden;
-      cursor: pointer;
-
-      border-bottom: 1px solid rgba(black, 0.1);
-
-      color: $selected-text-color;
-      float: left;
-
-      label {
-        padding: 10px;
-        padding-top: 8px;
-        width: 100%;
-        height: 100%;
-        display: block;
-        cursor: pointer;
-      }
-
-      .shortcut {
-        float: right;
-        font-size: 12px;
-        font-weight: normal;
-        opacity: 0.5;
-        margin-top: 10px;
-        padding-right: 10px;
-      }
-    }
-
-    .sublabel {
-      font-size: 12px;
-      font-weight: normal;
-      margin-top: 5px;
-    }
-}
-
-
-
-
-
-
-
-
-
-.dropdown-menu.sectioned-menu {
-  overflow-y: scroll;
-  max-height: calc(85vh - 90px);
-
-  ul {
-    margin-top: 0px;
-    margin-bottom: 0px;
-    padding-left:0;
-    position: relative;
-
-    li {
-      cursor: pointer;
-      height: auto;
-
-      padding: 10px;
-      border-bottom: 1px solid rgba(black, 0.1);
-      background-color: rgba(white, 0.9);
-      height: auto;
-
-      .left-side {
-        left: 0;
-        width: 60%;
-        display: inline-block;
-        vertical-align: top;
-        user-select: text;
-      }
-
-      .right-side {
-        right: 12px;
-        width: 30%;
-        display: inline-block;
-        vertical-align: top;
-        text-align: right;
-        position: absolute;
-      }
-
-      &:hover {
-        background-color: $blue-color;
-
-
-        .tinted {
-          color: white;
-        }
-
-        &.nested-hover {
-          color: black;
-          background-color: $light-bg-color;
-        }
-      }
-
-      &.nested-hover {
-        color: black;
-        background-color: white;
-      }
-
-      .menu-item-title {
-        font-weight: bold;
-        font-size: 14px;
-        margin-bottom: 3px;
-      }
-
-      .menu-item-subtitle {
-        font-weight: normal;
-        opacity: 0.5;
-        margin-top: 1px;
-        font-size: 12px;
-      }
-    }
-  }
-
-  .header {
-    background-color: #ededed;
-    border-bottom: 1px solid #d3d3d3;
-    position: relative;
-    padding-top: 12px;
-    padding-left: 10px;
-    padding-bottom: 10px;
-    cursor: pointer;
-    user-select: none;
-
-
-    > .title {
-      font-size: 14px;
-      font-weight: bold;
-    }
-
-    > .subtitle {
-      font-size: 12px;
-      opacity: 0.5;
-      font-weight: normal;
-      margin-top: 2px;
-    }
-
-    > .loading {
-      position: absolute;
-      height: 15px;
-      width: 15px;
-      right: 10px;
-      top: 20px;
-    }
-  }
-
-  .footer {
-    background-color: #ededed;
-    border-top: 1px solid #d3d3d3;
-    position: relative;
-    padding: 10px;
-  }
 }
diff --git a/app/assets/stylesheets/app/_ui.scss b/app/assets/stylesheets/app/_ui.scss
index 5d6327b73..1a48b6ca2 100644
--- a/app/assets/stylesheets/app/_ui.scss
+++ b/app/assets/stylesheets/app/_ui.scss
@@ -56,105 +56,3 @@ $screen-md-max:              ($screen-lg-min - 1) !default;
     @content;
   }
 }
-
-* {
-    box-sizing: border-box;
-}
-
-*:focus {outline:0;}
-
-.float-group {
-  height: 15px;
-  &.h10 {
-    height: 10px;
-  }
-
-  &.h20 {
-    height: 20px;
-  }
-
-  &.h30 {
-    height: 30px;
-  }
-  clear: both;
-}
-
-button:focus {outline:0;}
-
-// 
-// .button-group {
-//   clear: both;
-//   height: 36px;
-// }
-//
-// .ui-button {
-//   background-color: $blue-color;
-//   border: 0;
-//   color: white;
-//   font-weight: bold;
-//   min-height: 36px;
-//   font-size: 14px;
-//
-//   &.block {
-//     width: 100%;
-//   }
-// }
-
-.panel {
-  position: absolute;
-  right: 0px;
-  min-width: 300px;
-  z-index: 1000;
-  // margin-top: 10px;
-  // box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
-  // border: none;
-  // background-color: white;
-}
-
-.panel-right {
-  left: 0px;
-}
-
-.panel-body {
-    padding: 15px;
-}
-
-.form-control {
-  display: block;
-  width: 100%;
-  height: 34px;
-  padding: 6px 12px;
-  font-size: 14px;
-  line-height: 1.42857;
-  color: #555555;
-  background-color: #fff;
-  background-image: none;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  box-shadow: 0;
-}
-
-input, button, select, textarea {
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-}
-
-button {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
-
-.checkbox {
-    font-size: 14px;
-    font-weight: bold;
-    margin-left: auto;
-    margin-right: auto;
-    margin-bottom: 10px;
-
-    input {
-      margin-left: 0px;
-    }
-}
diff --git a/app/assets/templates/frontend/directives/contextual-menu.html.haml b/app/assets/templates/frontend/directives/contextual-menu.html.haml
index 416bd3c24..3f3c35a7f 100644
--- a/app/assets/templates/frontend/directives/contextual-menu.html.haml
+++ b/app/assets/templates/frontend/directives/contextual-menu.html.haml
@@ -1,18 +1,17 @@
-%ul.dropdown-menu.sectioned-menu
-  .extension{"ng-repeat" => "extension in extensions"}
-    .header{"ng-click" => "extension.hide = !extension.hide"}
-      .title {{extension.name}}
-      .subtitle
-        Will submit your note
-        %strong {{accessTypeForExtension(extension)}}
-      .spinner.loading{"ng-if" => "extension.loading"}
-      %div{"ng-if" => "extension.hide"} …
-    %ul{"ng-if" => "!extension.hide"}
-      %li.menu-item{"ng-repeat" => "action in extension.actionsWithContextForItem(item)", "ng-click" => "executeAction(action, extension);",
-      "ng-class" => "{'faded' : !isActionEnabled(action, extension)}"}
-        %label.menu-item-title {{action.label}}
-        .menu-item-subtitle {{action.desc}}
+.sn-component
+  .menu-panel.dropdown-menu
+    .section{"ng-repeat" => "extension in extensions"}
+      .header{"ng-click" => "extension.hide = !extension.hide"}
+        .column
+          %h4.title {{extension.name}}
+          .subtitle
+            Will submit your note
+            %strong {{accessTypeForExtension(extension)}}
+          .spinner.loading{"ng-if" => "extension.loading"}
+          %div{"ng-if" => "extension.hide"} …
 
+      %menu-row{"ng-if" => "!extension.hide", "ng-repeat" => "action in extension.actionsWithContextForItem(item)", "ng-click" => "executeAction(action, extension);",
+      "ng-class" => "{'faded' : !isActionEnabled(action, extension)}", "title" => "action.label", "subtitle" => "action.desc"}
         .small.normal{"ng-if" => "!isActionEnabled(action, extension)"}
           Requires {{action.access_type}} access to this note.
 
@@ -27,7 +26,7 @@
         %span{"ng-if" => "action.running"}
           .spinner{"style" => "margin-top: 3px;"}
 
-.extension-render-modal{"ng-if" => "renderData.showRenderModal", "ng-click" => "renderData.showRenderModal = false"}
-  .content
-    %h2 {{renderData.title}}
-    %p.normal{"style" => "white-space: pre-wrap; font-family: monospace; font-size: 16px;"} {{renderData.text}}
+  .extension-render-modal{"ng-if" => "renderData.showRenderModal", "ng-click" => "renderData.showRenderModal = false"}
+    .content
+      %h2 {{renderData.title}}
+      %p.normal{"style" => "white-space: pre-wrap; font-family: monospace; font-size: 16px;"} {{renderData.text}}
diff --git a/app/assets/templates/frontend/directives/editor-menu.html.haml b/app/assets/templates/frontend/directives/editor-menu.html.haml
index 97e11de66..3dda51ef7 100644
--- a/app/assets/templates/frontend/directives/editor-menu.html.haml
+++ b/app/assets/templates/frontend/directives/editor-menu.html.haml
@@ -1,20 +1,13 @@
-%ul.dropdown-menu.sectioned-menu
-  .header
-    .title System Editor
-  %ul
-    %li.menu-item{"ng-click" => "selectEditor($event, null)"}
-      %span.pull-left.mr-10{"ng-if" => "selectedEditor == null"} ✓
-      %label.menu-item-title.pull-left Plain
-
-  %div{"ng-if" => "editors.length > 0"}
-    .header
-      .title External Editors
-    %ul
-      %li.menu-item{"ng-repeat" => "editor in editors", "ng-click" => "selectEditor($event, editor)"}
+.sn-component
+  .menu-panel.dropdown-menu
+    .section
+      .header
+        %h4.title Note Editor
+      %menu-row{"title" => "'Plain Editor'", "circle" => "selectedEditor == null && 'success'", "ng-click" => "selectEditor($event, null)"}
+      %menu-row{"ng-repeat" => "editor in editors", "ng-click" => "selectEditor($event, editor)", "title" => "editor.name", "circle" => "selectedEditor === editor && 'success'"}
         %strong.red.medium{"ng-if" => "editor.conflict_of"} Conflicted copy
-        %label.menu-item-title
-          %span.inline.tinted.mr-10{"ng-if" => "selectedEditor === editor"} ✓
-          {{editor.name}}
         .sublabel{"ng-if" => "editor.local"}
           Locally Installed
         .sublabel.faded{"ng-if" => "editor.local && !isDesktop"} Unavailable in Web Browser
+      %a.no-decoration{"ng-if" => "editors.length == 0", "href" => "https://standardnotes.org/extensions", "target" => "blank"}
+        %menu-row{"title" => "'Download More Editors'", "ng-click" => "moreEditors()"}
diff --git a/app/assets/templates/frontend/directives/menu-row.html.haml b/app/assets/templates/frontend/directives/menu-row.html.haml
new file mode 100644
index 000000000..1bbc934b6
--- /dev/null
+++ b/app/assets/templates/frontend/directives/menu-row.html.haml
@@ -0,0 +1,10 @@
+.row
+  .column{"ng-if" => "circle"}
+    .circle.small{"ng-class" => "circle"}
+  .column
+    .label
+      {{title}}
+    .sublabel{"ng-if" => "subtitle"}
+      {{subtitle}}
+
+    %ng-transclude
diff --git a/app/assets/templates/frontend/editor.html.haml b/app/assets/templates/frontend/editor.html.haml
index 447265d35..c89419dc6 100644
--- a/app/assets/templates/frontend/editor.html.haml
+++ b/app/assets/templates/frontend/editor.html.haml
@@ -16,31 +16,20 @@
     %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
 
-      .dropdown-menu.sectioned-menu{"ng-if" => "ctrl.showMenu"}
-        %ul
-          .header
-            .title Note
-          %li{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.togglePin()"}
-            %label
-              %i.icon.ion-ios-flag
-              {{ctrl.note.pinned ? "Unpin" : "Pin"}}
-          %li{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleArchiveNote()"}
-            %label
-              %i.icon.ion-ios-box
-              {{ctrl.note.archived ? "Unarchive" : "Archive"}}
-          %li{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.deleteNote()"}
-            %label
-              %i.icon.ion-trash-b
-              Delete
-          %li{"ng-if" => "ctrl.hasDisabledComponents()"}
-            %label{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.restoreDisabledComponents()"} Restore Disabled Components
-        %ul{"ng-if" => "!ctrl.editor"}
-          .header
-            .title Display
-          %li{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleKey('monospaceFont')"}
-            %label
-              %span.top.mt-5.mr-5{"ng-if" => "ctrl.monospaceFont == true"} ✓
-              Monospace Font
+      .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()"}
+
+          .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
diff --git a/app/assets/templates/frontend/notes.html.haml b/app/assets/templates/frontend/notes.html.haml
index 1baa45463..e5ae42b1a 100644
--- a/app/assets/templates/frontend/notes.html.haml
+++ b/app/assets/templates/frontend/notes.html.haml
@@ -14,45 +14,28 @@
             %label
               Options
               %span.subtitle {{ctrl.optionsSubtitle()}}
-          .sectioned-menu.dropdown-menu.full-width{"ng-if" => "ctrl.showMenu"}
-            %ul
-              .header
-                .title Sort By
-              %li{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.selectedSortByCreated()"}
-                %label
-                  %span.top.mt-5.mr-5{"ng-if" => "ctrl.sortBy == 'created_at'"} ✓
-                  By Date Added
-              %li{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.selectedSortByUpdated()"}
-                %label
-                  %span.top.mt-5.mr-5{"ng-if" => "ctrl.sortBy == 'updated_at'"} ✓
-                  By Date Modified
-              %li{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.selectedSortByTitle()"}
-                %label
-                  %span.top.mt-5.mr-5{"ng-if" => "ctrl.sortBy == 'title'"} ✓
-                  By Title
-            %ul{"ng-if" => "!ctrl.tag.archiveTag"}
-              .header
-                .title Display
-              %li{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleKey('showArchived')"}
-                %label
-                  %span.top.mt-5.mr-5{"ng-if" => "ctrl.showArchived == true"} ✓
-                  Show Archived Notes
-              %li{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleKey('hidePinned')"}
-                %label
-                  %span.top.mt-5.mr-5{"ng-if" => "ctrl.hidePinned == true"} ✓
-                  Hide Pinned Notes
-              %li{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleKey('hideNotePreview')"}
-                %label
-                  %span.top.mt-5.mr-5{"ng-if" => "ctrl.hideNotePreview == true"} ✓
-                  Hide Note Preview
-              %li{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleKey('hideDate')"}
-                %label
-                  %span.top.mt-5.mr-5{"ng-if" => "ctrl.hideDate == true"} ✓
-                  Hide Date
-              %li{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleKey('hideTags')"}
-                %label
-                  %span.top.mt-5.mr-5{"ng-if" => "ctrl.hideTags == true"} ✓
-                  Hide Tags
+
+          .sn-component
+            .menu-panel.dropdown-menu{"ng-if" => "ctrl.showMenu"}
+              .section
+                .header
+                  %h4.title Sort By
+
+                %menu-row{"title" => "'Date Added'", "circle" => "ctrl.sortBy == 'created_at' && 'success'", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.selectedSortByCreated()"}
+                %menu-row{"title" => "'Date Modified'", "circle" => "ctrl.sortBy == 'updated_at' && 'success'", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.selectedSortByUpdated()"}
+                %menu-row{"title" => "'Title'", "circle" => "ctrl.sortBy == 'title' && 'success'", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.selectedSortByTitle()"}
+
+              .section{"ng-if" => "!ctrl.tag.archiveTag"}
+                .header
+                  %h4.title Display
+
+                %menu-row{"title" => "'Archived Notes'", "circle" => "ctrl.showArchived ? 'success' : 'danger'", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleKey('showArchived')"}
+                %menu-row{"title" => "'Pinned Notes'", "circle" => "ctrl.hidePinned ? 'danger' : 'success'", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleKey('hidePinned')"}
+
+                %menu-row{"title" => "'Note Preview'", "circle" => "ctrl.hideNotePreview ? 'danger' : 'success'", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleKey('hideNotePreview')"}
+                %menu-row{"title" => "'Date'", "circle" => "ctrl.hideDate ? 'danger' : 'success'", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleKey('hideDate')"}
+                %menu-row{"title" => "'Tags'", "circle" => "ctrl.hideTags ? 'danger' : 'success'", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleKey('hideTags')"}
+
 
     .scrollable
       .infinite-scroll#notes-scrollable{"infinite-scroll" => "ctrl.paginate()", "can-load" => "true", "threshold" => "200"}
diff --git a/vendor/assets/stylesheets/stylekit.css b/vendor/assets/stylesheets/stylekit.css
index d169ed8f3..2fb57a16b 100644
--- a/vendor/assets/stylesheets/stylekit.css
+++ b/vendor/assets/stylesheets/stylekit.css
@@ -87,6 +87,56 @@
 .sn-component .panel .content .panel-form .form-submit {
   margin-top: 0.15rem;
 }
+.sn-component .menu-panel {
+  box-shadow: 0px 4px 4px #C8C8C8;
+  border-radius: 0.6rem;
+  overflow: scroll;
+}
+.sn-component .menu-panel .header {
+  padding: 0.8rem 1rem;
+  border-bottom: 1px solid #E1E1E1;
+  background-color: #F6F6F6;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.sn-component .menu-panel .header .subtitle {
+  font-size: 0.95rem;
+  margin-top: 0.2rem;
+  opacity: 0.6;
+}
+.sn-component .menu-panel .row {
+  padding: 1rem 1rem;
+  border-bottom: 1px solid #DDDDDD;
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+}
+.sn-component .menu-panel .row .column {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+}
+.sn-component .menu-panel .row .column:not(:first-child) {
+  padding-left: 1.0rem;
+  padding-right: 0.15rem;
+}
+.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 {
+  font-size: 0.8rem;
+  font-weight: normal;
+}
+.sn-component .menu-panel .row:hover {
+  background-color: #efefef;
+}
+.sn-component .menu-panel .row .label, .sn-component .menu-panel .row .panel .content .panel-section .subtitle, .sn-component .panel .content .panel-section .menu-panel .row .subtitle {
+  font-size: 1rem;
+  font-weight: bold;
+}
+.sn-component .menu-panel .row .sublabel {
+  font-size: 0.9rem;
+  margin-top: 0.2rem;
+  opacity: 0.6;
+}
 .sn-component .red {
   color: #F80324;
 }
@@ -109,13 +159,28 @@
   font-size: 1.2rem;
 }
 .sn-component h4 {
+  font-weight: bold;
+  font-size: 0.95rem;
+}
+.sn-component h5 {
   font-weight: bold;
   font-size: 0.85rem;
 }
 .sn-component a {
-  color: #086DD6;
   cursor: pointer;
 }
+.sn-component *.info {
+  color: #086DD6;
+}
+.sn-component *.warning {
+  color: #f6a200;
+}
+.sn-component *.danger {
+  color: #F80324;
+}
+.sn-component *.success {
+  color: #2B9612;
+}
 .sn-component p {
   margin: 0.5rem 0;
 }
@@ -162,19 +227,19 @@
 .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 .button, .sn-component .button-group.stretch .box, .sn-component .button-group.stretch .notification, .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 .button, .sn-component .button-group .box, .sn-component .button-group .notification, .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 .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) {
   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 .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 {
   margin-right: 8px;
 }
 .sn-component .box-group .box, .sn-component .box-group .notification {
@@ -184,7 +249,7 @@
 .sn-component .box-group .box:not(:last-child), .sn-component .box-group .notification:not(:last-child) {
   margin-right: 5px;
 }
-.sn-component .button, .sn-component .box, .sn-component .notification {
+.sn-component .button, .sn-component .box, .sn-component .notification, .sn-component .circle {
   display: table;
   border-radius: 3px;
   padding: 0.5rem 0.7rem;
@@ -193,7 +258,7 @@
   text-align: center;
   border: 1px solid;
 }
-.sn-component .button .label, .sn-component .box .label, .sn-component .notification .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 .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 {
   font-weight: bold;
   display: block;
   text-align: center;
@@ -201,63 +266,82 @@
 .sn-component .box, .sn-component .notification {
   padding: 2.5rem 1.5rem;
 }
-.sn-component .button.info, .sn-component .info.box, .sn-component .info.notification, .sn-component .box.info, .sn-component .info.notification, .sn-component .notification.info {
+.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 {
   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 .box.info:hover, .sn-component .info.notification:hover, .sn-component .notification.info:hover {
+.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 {
   background-color: #d5e9fd;
   color: #0975e5;
 }
-.sn-component .button.info.featured, .sn-component .info.featured.box, .sn-component .info.featured.notification, .sn-component .box.info.featured, .sn-component .info.featured.notification, .sn-component .notification.info.featured {
+.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 {
   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 .box.info.featured:hover, .sn-component .info.featured.notification:hover, .sn-component .notification.info.featured:hover {
+.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 {
   background-color: #1181f6;
 }
-.sn-component .button.warning, .sn-component .warning.box, .sn-component .warning.notification, .sn-component .box.warning, .sn-component .warning.notification, .sn-component .notification.warning {
+.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 {
   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 .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.notification:hover, .sn-component .warning.circle:hover, .sn-component .box.warning:hover, .sn-component .warning.notification:hover, .sn-component .notification.warning:hover {
   background-color: #fff8ec;
   color: #ffaa06;
 }
-.sn-component .button.warning.featured, .sn-component .warning.featured.box, .sn-component .warning.featured.notification, .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.notification, .sn-component .warning.featured.circle, .sn-component .box.warning.featured, .sn-component .warning.featured.notification, .sn-component .notification.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 .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.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 {
   background-color: #ffb320;
 }
-.sn-component .button.danger, .sn-component .danger.box, .sn-component .danger.notification, .sn-component .box.danger, .sn-component .danger.notification, .sn-component .notification.danger {
+.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 {
   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 .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.notification:hover, .sn-component .danger.circle:hover, .sn-component .box.danger:hover, .sn-component .danger.notification:hover, .sn-component .notification.danger:hover {
   background-color: #fff1f3;
   color: #fc0e2e;
 }
-.sn-component .button.danger.featured, .sn-component .danger.featured.box, .sn-component .danger.featured.notification, .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.notification, .sn-component .danger.featured.circle, .sn-component .box.danger.featured, .sn-component .danger.featured.notification, .sn-component .notification.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 .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.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 {
   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 {
+  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 {
+  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 {
+  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 {
+  background-color: #35ba16;
+}
 .sn-component .notification {
   padding: 1.1rem 1rem;
   margin: 1.4rem 0;
@@ -274,5 +358,49 @@
   text-align: left;
   font-weight: normal;
 }
+.sn-component .circle {
+  border-color: #DDDDDD;
+  background-color: #F6F6F6;
+  padding: 0;
+  border-radius: 50%;
+}
+.sn-component .circle.small {
+  width: 12px;
+  height: 12px;
+}
+.sn-component .spinner {
+  border: 1px solid #515263;
+  border-radius: 50%;
+  animation: rotate 0.8s infinite linear;
+  border-right-color: transparent;
+}
+.sn-component .spinner.small {
+  width: 12px;
+  height: 12px;
+}
+.sn-component .spinner.info {
+  border-color: #086DD6;
+  border-right-color: transparent;
+}
+.sn-component .spinner.warning {
+  border-color: #f6a200;
+  border-right-color: transparent;
+}
+.sn-component .spinner.danger {
+  border-color: #F80324;
+  border-right-color: transparent;
+}
+.sn-component .spinner.success {
+  border-color: #2B9612;
+  border-right-color: transparent;
+}
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
 
 /*# sourceMappingURL=stylekit.css.map */