diff --git a/app/assets/javascripts/app/frontend/controllers/footer.js b/app/assets/javascripts/app/frontend/controllers/footer.js
index 519443f86..b1e38b60d 100644
--- a/app/assets/javascripts/app/frontend/controllers/footer.js
+++ b/app/assets/javascripts/app/frontend/controllers/footer.js
@@ -25,7 +25,9 @@ angular.module('app.frontend')
   .controller('FooterCtrl', function ($rootScope, authManager, modelManager, $timeout, dbManager,
     syncManager, storageManager, passcodeManager, componentManager, singletonManager, packageManager) {
 
-    this.user = authManager.user;
+    this.getUser = function() {
+      return authManager.user;
+    }
 
     this.updateOfflineStatus = function() {
       this.offline = authManager.offline();
@@ -110,14 +112,14 @@ angular.module('app.frontend')
       this.rooms = _.uniq(this.rooms.concat(incomingRooms)).filter((candidate) => {return !candidate.deleted});
     });
 
-    componentManager.registerHandler({identifier: "roomBar", areas: ["rooms"], activationHandler: (component) => {
+    componentManager.registerHandler({identifier: "roomBar", areas: ["rooms", "modal"], activationHandler: (component) => {
       if(component.active) {
         // Show room, if it was not activated manually (in the event of event from componentManager)
-        if(!component.showRoom) {
+        if(component.area == "rooms" && !component.showRoom) {
           this.selectRoom(component);
         }
         $timeout(() => {
-          var lastSize = component.getRoomLastSize();
+          var lastSize = component.getLastSize();
           if(lastSize) {
             componentManager.handleSetSizeEvent(component, lastSize);
           }
@@ -125,7 +127,7 @@ angular.module('app.frontend')
       }
     }, actionHandler: (component, action, data) => {
       if(action == "set-size") {
-        component.setRoomLastSize(data);
+        component.setLastSize(data);
       }
     }});
 
diff --git a/app/assets/javascripts/app/frontend/models/app/component.js b/app/assets/javascripts/app/frontend/models/app/component.js
index c9accbd03..844e88fcb 100644
--- a/app/assets/javascripts/app/frontend/models/app/component.js
+++ b/app/assets/javascripts/app/frontend/models/app/component.js
@@ -83,12 +83,12 @@ class Component extends Item {
     return this.getAppDataItem("defaultEditor") == true;
   }
 
-  setRoomLastSize(size) {
-    this.setAppDataItem("lastRoomSize", size);
+  setLastSize(size) {
+    this.setAppDataItem("lastSize", size);
   }
 
-  getRoomLastSize() {
-    return this.getAppDataItem("lastRoomSize");
+  getLastSize() {
+    return this.getAppDataItem("lastSize");
   }
 
 
diff --git a/app/assets/javascripts/app/services/componentManager.js b/app/assets/javascripts/app/services/componentManager.js
index b169ef766..a18670b10 100644
--- a/app/assets/javascripts/app/services/componentManager.js
+++ b/app/assets/javascripts/app/services/componentManager.js
@@ -738,7 +738,11 @@ class ComponentManager {
       setSize(iframe, data);
     } else {
       var container = document.getElementById("component-" + component.uuid);
-      setSize(container, data);
+      if(container) {
+        // in the case of Modals, sometimes they may be "active" because they were so in another session,
+        // but no longer actually visible. So check to make sure the container exists
+        setSize(container, data);
+      }
     }
   }
 
diff --git a/app/assets/javascripts/app/services/directives/functional/autofocus.js b/app/assets/javascripts/app/services/directives/functional/autofocus.js
index 49c733ecc..cbc093a5f 100644
--- a/app/assets/javascripts/app/services/directives/functional/autofocus.js
+++ b/app/assets/javascripts/app/services/directives/functional/autofocus.js
@@ -1,6 +1,6 @@
 angular
   .module('app.frontend')
-  .directive('mbAutofocus', ['$timeout', function($timeout) {
+  .directive('snAutofocus', ['$timeout', function($timeout) {
     return {
       restrict: 'A',
       scope: {
diff --git a/app/assets/javascripts/app/services/directives/views/accountMenu.js b/app/assets/javascripts/app/services/directives/views/accountMenu.js
index 5777a05da..39028041d 100644
--- a/app/assets/javascripts/app/services/directives/views/accountMenu.js
+++ b/app/assets/javascripts/app/services/directives/views/accountMenu.js
@@ -33,7 +33,13 @@ class AccountMenu {
 
     $scope.submitPasswordChange = function() {
 
-      if($scope.newPasswordData.newPassword != $scope.newPasswordData.newPasswordConfirmation) {
+      let newPass = $scope.newPasswordData.newPassword;
+
+      if(!newPass || newPass.length == 0) {
+        return;
+      }
+
+      if(newPass != $scope.newPasswordData.newPasswordConfirmation) {
         alert("Your new password does not match its confirmation.");
         $scope.newPasswordData.status = null;
         return;
@@ -51,7 +57,7 @@ class AccountMenu {
 
       // perform a sync beforehand to pull in any last minutes changes before we change the encryption key (and thus cant decrypt new changes)
       syncManager.sync(function(response){
-        authManager.changePassword(email, $scope.newPasswordData.newPassword, function(response){
+        authManager.changePassword(email, newPass, function(response){
           if(response.error) {
             alert("There was an error changing your password. Please try again.");
             $scope.newPasswordData.status = null;
@@ -84,6 +90,10 @@ class AccountMenu {
     }
 
     $scope.submitAuthForm = function() {
+      console.log("Submitting auth form");
+      if(!$scope.formData.email || !$scope.formData.user_password) {
+        return;
+      }
       if($scope.formData.showLogin) {
         $scope.login();
       } else {
@@ -92,6 +102,7 @@ class AccountMenu {
     }
 
     $scope.login = function(extraParams) {
+      console.log("Logging in");
       $scope.formData.status = "Generating Login Keys...";
       $timeout(function(){
         authManager.login($scope.formData.url, $scope.formData.email, $scope.formData.user_password, $scope.formData.ephemeral, extraParams,
@@ -99,7 +110,7 @@ class AccountMenu {
             if(!response || response.error) {
               $scope.formData.status = null;
               var error = response ? response.error : {message: "An unknown error occured."}
-              if(error.tag == "mfa-required") {
+              if(error.tag == "mfa-required" || error.tag == "mfa-invalid") {
                 $timeout(() => {
                   $scope.formData.showLogin = false;
                   $scope.formData.mfa = error;
@@ -539,13 +550,6 @@ class AccountMenu {
           $scope.formData.showPasscodeForm = false;
           var offline = authManager.offline();
 
-          // Allow UI to update before showing alert
-          setTimeout(function () {
-            var message = "You've succesfully set an app passcode.";
-            if(offline) { message += " Your items will now be encrypted using this passcode."; }
-            alert(message);
-          }, 10);
-
           if(offline) {
             // Allows desktop to make backup file
             $rootScope.$broadcast("major-data-change");
diff --git a/app/assets/javascripts/app/services/modelManager.js b/app/assets/javascripts/app/services/modelManager.js
index ef2b09abc..879ffede9 100644
--- a/app/assets/javascripts/app/services/modelManager.js
+++ b/app/assets/javascripts/app/services/modelManager.js
@@ -431,7 +431,7 @@ class ModelManager {
       "SN|Editor" : "editor",
       "SN|Theme" : "theme",
       "SF|Extension" : "server extension",
-      "SF|MFA" : "server multi-factor authentication setting"
+      "SF|MFA" : "two-factor authentication setting"
     }[contentType];
   }
 
diff --git a/app/assets/javascripts/app/services/syncManager.js b/app/assets/javascripts/app/services/syncManager.js
index e24dd23d7..a47cbbb27 100644
--- a/app/assets/javascripts/app/services/syncManager.js
+++ b/app/assets/javascripts/app/services/syncManager.js
@@ -80,8 +80,6 @@ class SyncManager {
     // use a copy, as alternating uuid will affect array
     var originalItems = this.modelManager.allItems.slice();
 
-    console.log("markAllItemsDirtyAndSaveOffline", originalItems);
-
     var block = () => {
       var allItems = this.modelManager.allItems;
       for(var item of allItems) {
diff --git a/app/assets/stylesheets/app/_lock-screen.scss b/app/assets/stylesheets/app/_lock-screen.scss
index 4fef13adb..7fffb7097 100644
--- a/app/assets/stylesheets/app/_lock-screen.scss
+++ b/app/assets/stylesheets/app/_lock-screen.scss
@@ -14,6 +14,7 @@
   font-size: 16px;
   display: flex;
   align-items: center;
+  justify-content: center;
 
   .background {
     position: absolute;
@@ -22,30 +23,11 @@
     height: 100%;
   }
 
-  .content {
-    // box-shadow: 0 3px 3px rgba(0, 0, 0, 0.175);
-    border: 1px solid rgba(black, 0.1);
-    background-color: white;
-    width: 300px;
-    // height: 500px;
-    margin: auto;
-    padding: 10px 30px;
-    padding-bottom: 30px;
-    // position: absolute;
-    // top: 0; left: 0; bottom: 0; right: 0;
-    overflow-y: scroll;
+  .panel {
+    width: 315px;
 
-    p {
-      margin-bottom: 8px;
-      margin-top: 0;
-    }
-
-    h3 {
-      margin-bottom: 0;
-    }
-
-    h4 {
-      margin-bottom: 6px;
+    .header {
+      justify-content: center;
     }
   }
 }
diff --git a/app/assets/stylesheets/app/_modals.scss b/app/assets/stylesheets/app/_modals.scss
index 79666daeb..fb0ab7435 100644
--- a/app/assets/stylesheets/app/_modals.scss
+++ b/app/assets/stylesheets/app/_modals.scss
@@ -49,6 +49,7 @@
     width: auto;
     padding: 0;
     padding-bottom: 0;
+    min-width: 300px;
   }
 }
 
diff --git a/app/assets/stylesheets/app/_standard.scss b/app/assets/stylesheets/app/_standard.scss
index c111f54d2..134609878 100644
--- a/app/assets/stylesheets/app/_standard.scss
+++ b/app/assets/stylesheets/app/_standard.scss
@@ -1,31 +1,3 @@
-.selectable {
-  user-select: text !important;
-}
-
-.clear {
-  clear: both;
-}
-
-.pull-left {
-  float: left !important;
-}
-
-.pull-right {
-  float: right !important;
-}
-
-.mt-1 {
-  margin-top: 1px !important;
-}
-
-.mt-2 {
-  margin-top: 2px !important;
-}
-
-.mt-3 {
-  margin-top: 3px !important;
-}
-
 .mt-5 {
   margin-top: 5px !important;
 }
@@ -34,66 +6,6 @@
   margin-top: 10px !important;
 }
 
-.mt-15 {
-  margin-top: 15px !important;
-}
-
-.mt-20 {
-  margin-top: 20px !important;
-}
-
-.mt-25 {
-  margin-top: 25px !important;
-}
-
-.mt-50 {
-  margin-top: 50px !important;
-}
-
-.mt-100 {
-  margin-top: 100px !important;
-}
-
-.mb-0 {
-  margin-bottom: 0px !important;
-}
-
-.mb-5 {
-  margin-bottom: 5px !important;
-}
-
-.mb-10 {
-  margin-bottom: 10px !important;
-}
-
-.mr-5 {
-  margin-right: 5px;
-}
-
-.mr-10 {
-  margin-right: 10px;
-}
-
-.mr-15 {
-  margin-right: 15px;
-}
-
-.mr-20 {
-  margin-right: 20px;
-}
-
-.ml-2 {
-  margin-left: 2px;
-}
-
-.pb-0 {
-  padding-bottom: 0px !important;
-}
-
-.pt-5 {
-  padding-top: 5px;
-}
-
 .faded {
   opacity: 0.5;
 }
@@ -102,11 +14,6 @@
   text-align: center !important;
 }
 
-.center {
-  margin-left: auto !important;
-  margin-right: auto !important;
-}
-
 .block {
   display: block !important;
 }
@@ -116,59 +23,14 @@
   word-break: break-all;
 }
 
-.one-line-overflow {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-
-.small-v-space {
-  height: 6px;
-  display: block;
-}
-
-.medium-v-space {
-  height: 12px;
-  display: block;
-}
-
-.large-v-space {
-  height: 24px;
-  display: block;
-}
-
-.small-padding {
-  padding: 5px !important;
-}
-
 .medium-padding {
   padding: 10px !important;
 }
 
-.pb-4 {
-  padding-bottom: 4px !important;
-}
-
-.pb-6 {
-  padding-bottom: 6px !important;
-}
-
-.pb-10 {
-  padding-bottom: 10px !important;
-}
-
-.large-padding {
-  padding: 22px !important;
-}
-
 .red {
   color: red !important;
 }
 
-.orange {
-  color: orange !important;
-}
-
 .bold {
   font-weight: bold !important;
 }
@@ -184,115 +46,3 @@
 .medium {
   font-size: 14px !important;
 }
-
-.inline {
-  display: inline-block !important;
-
-  &.top {
-    vertical-align: top;
-  }
-
-  &.middle {
-    vertical-align: middle;
-  }
-}
-
-button {
-  cursor: pointer;
-}
-
-input.form-control {
-  margin-bottom: 10px;
-  border-radius: 0px;
-  min-height: 39px;
-  font-size: 14px;
-  padding-left: 6px;
-}
-
-button {
-  border: none;
-
-  @mixin wide-button() {
-    font-weight: bold;
-    text-align: center;
-    padding: 10px;
-    font-size: 16px;
-    // min-width: 200px;
-
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-
-  &.black {
-    @include wide-button();
-    background-color: black;
-    color: white;
-  }
-
-  &.white {
-    @include wide-button();
-    background-color: white;
-    color: black;
-    border: 1px solid rgba(gray, 0.2);
-  }
-}
-
-
-.gray-bg {
-  background-color: #f6f6f6;
-  border: 1px solid #f2f2f2;
-}
-
-.white-bg {
-  background-color: white;
-  border: 1px solid rgba(gray, 0.2);
-}
-
-.col-container {
-  // white-space: nowrap;
-}
-
-@mixin col() {
-  display: inline-block;
-  vertical-align: top;
-  white-space: normal;
-}
-
-.col-10 {
-  width: 10%;
-  @include col();
-}
-
-.col-15 {
-  width: 15%;
-  @include col();
-}
-
-.col-20 {
-  width: 20%;
-  @include col();
-}
-
-.col-45 {
-  width: 45%;
-  @include col();
-}
-
-.col-50 {
-  width: 50%;
-  @include col();
-}
-
-.col-80 {
-  width: 80%;
-  @include col();
-}
-
-.relative {
-  position: relative !important;
-}
-
-.absolute {
-  position: absolute !important;
-}
diff --git a/app/assets/stylesheets/app/_stylekit-sub.scss b/app/assets/stylesheets/app/_stylekit-sub.scss
index 4b7bd0603..15fd3da56 100644
--- a/app/assets/stylesheets/app/_stylekit-sub.scss
+++ b/app/assets/stylesheets/app/_stylekit-sub.scss
@@ -1,6 +1,18 @@
 .panel {
   color: black;
 
+  input {
+    min-height: 39px;
+  }
+
+
+  .button-group.stretch {
+    .button:not(.featured) {
+      // Default buttons that are not featured and stretched should have larger vertical padding
+      padding: 9px;
+    }
+  }
+
   a {
     color: $blue-color;
   }
diff --git a/app/assets/templates/frontend/directives/account-menu.html.haml b/app/assets/templates/frontend/directives/account-menu.html.haml
index 90e08f5d1..de8ac2623 100644
--- a/app/assets/templates/frontend/directives/account-menu.html.haml
+++ b/app/assets/templates/frontend/directives/account-menu.html.haml
@@ -18,10 +18,10 @@
           Standard Notes is free on every platform, and comes standard with sync and encryption.
 
       .panel-section{"ng-if" => "formData.showLogin || formData.showRegister"}
-        %h3.title
+        %h3.title.panel-row
           {{formData.showLogin ? "Sign In" : "Register (free)"}}
 
-        %form.panel-form
+        %form.panel-form{"ng-submit" => "submitAuthForm()"}
           %input{:placeholder => 'Email', :autofocus => 'autofocus', :name => 'email', :required => true, :type => 'email', 'ng-model' => 'formData.email'}
           %input{:placeholder => 'Password', :name => 'password', :required => true, :type => 'password', 'ng-model' => 'formData.user_password'}
           %input{:placeholder => 'Confirm Password', "ng-if" => "formData.showRegister", :name => 'password', :required => true, :type => 'password', 'ng-model' => 'formData.password_conf'}
@@ -32,13 +32,13 @@
             %h2.title No Password Reset.
             .text Because your notes are encrypted using your password, Standard Notes does not have a password reset option. You cannot forget your password.
           .advanced-options.panel-row{"ng-if" => "formData.showAdvanced"}
-            .panel-column
-              %label.pull-left Sync Server Domain
+            .panel-column.stretch
+              %label Sync Server Domain
               %input.form-control.mt-5{:name => 'server', :placeholder => 'Server URL', :required => true, :type => 'text', 'ng-model' => 'formData.url'}
 
           .button-group.stretch.panel-row.form-submit
-            .button.info.featured{"ng-click" => "submitAuthForm()"}
-              {{formData.showLogin ? "Sign In" : "Register"}}
+            %button.button.info.featured{"type" => "submit"}
+              .label {{formData.showLogin ? "Sign In" : "Register"}}
 
           %label
             %input{"type" => "checkbox", "ng-model" => "formData.ephemeral", "ng-true-value" => "false", "ng-false-value" => "true"}
@@ -47,15 +47,18 @@
             %input{"type" => "checkbox", "ng-model" => "formData.mergeLocal", "ng-bind" => "true", "ng-change" => "mergeLocalChanged()"}
             Merge local data ({{notesAndTagsCount()}} notes and tags)
 
-        %form.mt-5{"ng-if" => "formData.mfa"}
-          %p {{formData.mfa.message}}
-          %input.form-control.mt-10{:autofocus => "true", :name => 'mfa', :required => true, 'ng-model' => 'formData.userMfaCode'}
-          %button.ui-button.block.mt-10{"ng-click" => "submitMfaForm()"} {{"Sign In"}}
-
         %em.block.center-align.mt-10{"ng-if" => "formData.status", "style" => "font-size: 14px;"}
         {{formData.status}}
 
-      %div{"ng-if" => "!formData.showLogin && !formData.showRegister"}
+      .panel-section{"ng-if" => "formData.mfa"}
+        %form{"ng-submit" => "submitMfaForm()"}
+          %p {{formData.mfa.message}}
+          %input.form-control.mt-10{:placeholder => "Enter Code", "sn-autofocus" => "true", "should-focus" => "true", :autofocus => "true", :name => 'mfa', :required => true, 'ng-model' => 'formData.userMfaCode'}
+          .button-group.stretch.panel-row.form-submit
+            %button.button.info.featured{"type" => "submit"}
+              .label Sign In
+
+      %div{"ng-if" => "!formData.showLogin && !formData.showRegister && !formData.mfa"}
         .panel-section{"ng-if" => "user"}
           .panel-row
             %h2.title.wrap {{user.email}}
@@ -72,23 +75,26 @@
           .panel-row
 
           %a.panel-row.condensed{"ng-click" => "newPasswordData.changePassword = !newPasswordData.changePassword"} Change Password
-          .notification.default{"ng-if" => "newPasswordData.changePassword"}
-            %h1.title Change Password (Beta)
+          .notification.warning{"ng-if" => "newPasswordData.changePassword"}
+            %h1.title Change Password
             .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
-              %div.mt-10{"ng-if" => "newPasswordData.showForm"}
-                %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"}
+              %p 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 If you have thousands of items, this can take several minutes — you must keep the application window open during this process.
+              %p After changing your password, you must log out of all other applications currently signed in to your account.
+              %p.bold It is highly recommended you download a backup of your data before proceeding.
+            .panel-row{"ng-if" => "!newPasswordData.status"}
+              .horizontal-group{"ng-if" => "!newPasswordData.showForm"}
+                %a.red{"ng-click" => "showPasswordChangeForm()"} Continue
+                %a{"ng-click" => "newPasswordData.changePassword = false; newPasswordData.showForm = false"} Cancel
+              .panel-row{"ng-if" => "newPasswordData.showForm"}
+                %form.panel-form.stretch
+                  %input{:type => 'password', "ng-model" => "newPasswordData.newPassword", "placeholder" => "Enter new password"}
+                  %input{:type => 'password', "ng-model" => "newPasswordData.newPasswordConfirmation", "placeholder" => "Confirm new password"}
                   .button-group.stretch.panel-row.form-submit
                     .button.info{"type" => "submit", "ng-click" => "submitPasswordChange()"}
                       .label Submit
+                  %a{"ng-click" => "newPasswordData.changePassword = false; newPasswordData.showForm = false"} Cancel
+
             %p.italic.mt-10{"ng-if" => "newPasswordData.status"} {{newPasswordData.status}}
 
 
@@ -98,18 +104,18 @@
             %a.panel-row{"ng-click" => "reencryptPressed()"} Resync All Items
 
 
-          %div{"ng-if" => "securityUpdateAvailable()"}
-            %a.block.mt-5{"ng-click" => "clickedSecurityUpdate()"} Security Update Available
-            %section.gray-bg.mt-10.medium-padding{"ng-if" => "securityUpdateData.showForm"}
-              %p
-                %a{"href" => "https://standardnotes.org/help/security-update", "target" => "_blank"} Learn more.
-              %div.mt-10{"ng-if" => "!securityUpdateData.processing"}
-                %p.bold Enter your password to update:
-                %form.mt-5
-                  %input.form-control{:type => 'password', "ng-model" => "securityUpdateData.password", "placeholder" => "Enter password"}
-                  %button.ui-button.block{"ng-click" => "submitSecurityUpdateForm()"} Update
-              %div.mt-5{"ng-if" => "securityUpdateData.processing"}
-                %p.tinted Processing...
+          %a.panel-row.condensed{"ng-if" => "securityUpdateAvailable()", "ng-click" => "clickedSecurityUpdate()"} Security Update Available
+          .notification.default{"ng-if" => "securityUpdateData.showForm"}
+            %p
+              %a{"href" => "https://standardnotes.org/help/security-update", "target" => "_blank"} Learn more.
+            %form.panel-form.stretch{"ng-if" => "!securityUpdateData.processing", "ng-submit" => "submitSecurityUpdateForm()"}
+              %p Enter your password to update:
+              %input.panel-row{:type => 'password', "ng-model" => "securityUpdateData.password", "placeholder" => "Enter password"}
+              .button-group.stretch.panel-row.form-submit
+                %button.button.info{"ng-type" => "submit"}
+                  .label Update
+            .panel-row{"ng-if" => "securityUpdateData.processing"}
+              %p.info Processing...
 
 
         .panel-section
@@ -122,25 +128,26 @@
         .panel-section
           %h3.title.panel-row Passcode Lock
           %div{"ng-if" => "!hasPasscode() && passcodeOptionAvailable()"}
-            .panel-row
-              .button.info{"ng-click" => "addPasscodeClicked(); $event.stopPropagation();", "ng-if" => "!formData.showPasscodeForm"}
+            .panel-row{"ng-if" => "!formData.showPasscodeForm"}
+              .button.info{"ng-click" => "addPasscodeClicked(); $event.stopPropagation();"}
                 .label Add Passcode
 
-            .panel-row
-              %p Add an app passcode to lock the app and encrypt on-device key storage.
+            %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()"}
-              %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"}
+            %form{"ng-if" => "formData.showPasscodeForm", "ng-submit" => "submitPasscodeForm()"}
+              %input.form-control{:type => 'password', "ng-model" => "formData.passcode", "placeholder" => "Passcode", "sn-autofocus" => "true", "should-focus" => "true"}
+              %input.form-control{:type => 'password', "ng-model" => "formData.confirmPasscode", "placeholder" => "Confirm Passcode"}
               .button-group.stretch.panel-row.form-submit
-                .button.info{"type" => "submit"}
+                %button.button.info{"type" => "submit"}
                   .label Set Passcode
               %a.panel-row{"ng-click" => "formData.showPasscodeForm = false"} Cancel
+
           .panel-row{"ng-if" => "hasPasscode()"}
             %p
               Passcode lock is enabled.
               %span{"ng-if" => "isDesktopApplication()"} Your passcode will be required on new sessions after app quit.
-            %a.block.mt-5{"ng-click" => "removePasscodePressed()"} Remove Passcode
+            %a.block.danger{"ng-click" => "removePasscodePressed()"} Remove Passcode
+
           .panel-row{"ng-if" => "!passcodeOptionAvailable()"}
             %p Passcode lock is only available to permanent sessions. (You chose not to stay signed in.)
 
@@ -166,12 +173,14 @@
               .label Import From Backup
 
           %div{"ng-if" => "importData.requestPassword"}
-            %form.panel-form{"ng-submit" => "submitImportPassword()"}
+            %form.panel-form.stretch{"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
-
-        .spinner.mt-10{"ng-if" => "importData.loading"}
+              %input.form-control.mt-5{:type => 'password', "placeholder" => "Enter File Account Password", "ng-model" => "importData.password", "autofocus" => "true"}
+              .button-group.stretch.panel-row.form-submit
+                %button.button.info{"type" => "submit"}
+                  .label Decrypt & Import
+          .panel-row
+            .spinner.small.info{"ng-if" => "importData.loading"}
     .footer
       %a.right{"ng-if" => "formData.showLogin || formData.showRegister", "ng-click" => "formData.showLogin = false; formData.showRegister = false;"}
         Cancel
diff --git a/app/assets/templates/frontend/directives/component-view.html.haml b/app/assets/templates/frontend/directives/component-view.html.haml
index 3e1b2b3d2..2f7c2bcc8 100644
--- a/app/assets/templates/frontend/directives/component-view.html.haml
+++ b/app/assets/templates/frontend/directives/component-view.html.haml
@@ -1,6 +1,6 @@
 %iframe{"ng-if" => "component",
 "ng-attr-id" => "component-{{component.uuid}}",
 "ng-src" => "{{getUrl() | trusted}}", "frameBorder" => "0",
-"sandbox" => "allow-scripts allow-top-navigation-by-user-activation allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-modals",
+"sandbox" => "allow-scripts allow-top-navigation-by-user-activation allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-modals allow-forms",
 "data-component-id" => "{{component.uuid}}"}
   Loading
diff --git a/app/assets/templates/frontend/directives/global-extensions-menu.html.haml b/app/assets/templates/frontend/directives/global-extensions-menu.html.haml
index 2a6b89a39..e663efc81 100644
--- a/app/assets/templates/frontend/directives/global-extensions-menu.html.haml
+++ b/app/assets/templates/frontend/directives/global-extensions-menu.html.haml
@@ -22,7 +22,7 @@
         %li{"ng-repeat" => "theme in themeManager.themes | orderBy: 'name'", "ng-click" => "clickedExtension(theme)"}
           .container
             %h3
-              %input.bold{"ng-if" => "theme.rename", "ng-model" => "theme.tempName", "ng-keyup" => "$event.keyCode == 13 && submitExtensionRename(theme);", "mb-autofocus" => "true", "should-focus" => "true"}
+              %input.bold{"ng-if" => "theme.rename", "ng-model" => "theme.tempName", "ng-keyup" => "$event.keyCode == 13 && submitExtensionRename(theme);", "sn-autofocus" => "true", "should-focus" => "true"}
               %span{"ng-if" => "!theme.rename"} {{theme.name}}
             -# %a{"ng-if" => "!themeManager.isThemeActive(theme)", "ng-click" => "themeManager.activateTheme(theme); $event.stopPropagation();"} Activate
             -# %a{"ng-if" => "themeManager.isThemeActive(theme)", "ng-click" => "themeManager.deactivateTheme(theme); $event.stopPropagation();"} Deactivate
@@ -44,7 +44,7 @@
         %li{"ng-repeat" => "extension in extensionManager.extensions | orderBy: 'name'", "ng-init" => "extension.formData = {}", "ng-click" => "clickedExtension(extension)"}
           .container
             %h3
-              %input.bold{"ng-if" => "extension.rename", "ng-model" => "extension.tempName", "ng-keyup" => "$event.keyCode == 13 && submitExtensionRename(extension);", "mb-autofocus" => "true", "should-focus" => "true"}
+              %input.bold{"ng-if" => "extension.rename", "ng-model" => "extension.tempName", "ng-keyup" => "$event.keyCode == 13 && submitExtensionRename(extension);", "sn-autofocus" => "true", "should-focus" => "true"}
               %span{"ng-if" => "!extension.rename"} {{extension.name}}
             %p.small{"ng-if" => "extension.description"} {{extension.description}}
             %div{"ng-if" => "extension.showDetails"}
@@ -97,7 +97,7 @@
         %li{"ng-repeat" => "component in componentManager.components | orderBy: 'name'", "ng-click" => "clickedExtension(component)"}
           .container
             %h3
-              %input.bold{"ng-if" => "component.rename", "ng-model" => "component.tempName", "ng-keyup" => "$event.keyCode == 13 && submitExtensionRename(component);", "mb-autofocus" => "true", "should-focus" => "true"}
+              %input.bold{"ng-if" => "component.rename", "ng-model" => "component.tempName", "ng-keyup" => "$event.keyCode == 13 && submitExtensionRename(component);", "sn-autofocus" => "true", "should-focus" => "true"}
               %span{"ng-if" => "!component.rename"} {{component.name}}
 
             %div{"ng-if" => "component.isEditor()"}
diff --git a/app/assets/templates/frontend/editor.html.haml b/app/assets/templates/frontend/editor.html.haml
index cb2ac39c1..b62442073 100644
--- a/app/assets/templates/frontend/editor.html.haml
+++ b/app/assets/templates/frontend/editor.html.haml
@@ -5,7 +5,7 @@
                 "ng-change" => "ctrl.nameChanged()", "ng-focus" => "ctrl.onNameFocus()", "ng-blur" => "ctrl.onNameBlur()",
                 "select-on-click" => "true"}
 
-    #save-status{"ng-class" => "{'red bold': ctrl.saveError, 'orange bold': ctrl.syncTakingTooLong}", "ng-bind-html" => "ctrl.noteStatus"}
+    #save-status{"ng-class" => "{'red bold': ctrl.saveError, 'warning bold': ctrl.syncTakingTooLong}", "ng-bind-html" => "ctrl.noteStatus"}
 
     .editor-tags
       #note-tags-component-container{"ng-if" => "ctrl.tagsComponent"}
diff --git a/app/assets/templates/frontend/footer.html.haml b/app/assets/templates/frontend/footer.html.haml
index b36357d6f..0cdeb3796 100644
--- a/app/assets/templates/frontend/footer.html.haml
+++ b/app/assets/templates/frontend/footer.html.haml
@@ -3,7 +3,7 @@
     .left
       .item{"click-outside" => "ctrl.showAccountMenu = false;", "is-open" => "ctrl.showAccountMenu"}
         .column
-          .circle.small{"ng-class" => "ctrl.error ? 'danger' : (ctrl.user ? 'info' : 'default')"}
+          .circle.small{"ng-class" => "ctrl.error ? 'danger' : (ctrl.getUser() ? 'info' : 'default')"}
         .column{"ng-click" => "ctrl.accountMenuPressed()"}
           .label.title{"ng-class" => "{red: ctrl.error}"} Account
         %account-menu{"ng-if" => "ctrl.showAccountMenu", "on-successful-auth" => "ctrl.onAuthSuccess", "close-function" => "ctrl.closeAccountMenu"}
diff --git a/app/assets/templates/frontend/lock-screen.html.haml b/app/assets/templates/frontend/lock-screen.html.haml
index e79c7cbef..08c2b4472 100644
--- a/app/assets/templates/frontend/lock-screen.html.haml
+++ b/app/assets/templates/frontend/lock-screen.html.haml
@@ -1,9 +1,14 @@
-#lock-screen
-  .content
-    %h3.center-align Passcode Required
-
-    %form.mt-20{"ng-submit" => "submitPasscodeForm()"}
-      %input.form-control.mt-10{:type => 'password',
-      "ng-model" => "formData.passcode", "autofocus" => "true",
-      "placeholder" => "Enter Passcode", "autocomplete" => "new-password"}
-      %button.standard.ui-button.block.tinted.mt-5{"type" => "submit"} Unlock
+#lock-screen.sn-component
+  .panel
+    .header
+      %h1.title Passcode Required
+    .content
+      .panel-section
+        %form.panel-form.panel-row{"ng-submit" => "submitPasscodeForm()"}
+          .panel-column.stretch
+            %input.panel-row{:type => 'password',
+            "ng-model" => "formData.passcode", "autofocus" => "true", "sn-autofocus" => "true", "should-focus" => "true",
+            "placeholder" => "Enter Passcode", "autocomplete" => "new-password"}
+            .button-group.stretch.panel-row.form-submit
+              %button.button.info{"type" => "submit"}
+                .label Unlock
diff --git a/app/assets/templates/frontend/tags.html.haml b/app/assets/templates/frontend/tags.html.haml
index e751732f8..cbbc9d214 100644
--- a/app/assets/templates/frontend/tags.html.haml
+++ b/app/assets/templates/frontend/tags.html.haml
@@ -15,7 +15,7 @@
       .tag{"ng-repeat" => "tag in ctrl.tags track by tag.uuid", "ng-click" => "ctrl.selectTag(tag)", "ng-class" => "{'selected' : ctrl.selectedTag == tag}"}
         .info
           %input.title{"ng-attr-id" => "tag-{{tag.uuid}}", "ng-click" => "ctrl.selectTag(tag)", "ng-model" => "tag.title",
-          "ng-keyup" => "$event.keyCode == 13 && ctrl.saveTag($event, tag)", "mb-autofocus" => "true", "should-focus" => "ctrl.newTag || ctrl.editingTag == tag",
+          "ng-keyup" => "$event.keyCode == 13 && ctrl.saveTag($event, tag)", "sn-autofocus" => "true", "should-focus" => "ctrl.newTag || ctrl.editingTag == tag",
           "ng-change" => "ctrl.tagTitleDidChange(tag)", "ng-blur" => "ctrl.saveTag($event, tag)", "spellcheck" => "false"}
           .count {{ctrl.noteCount(tag)}}
 
diff --git a/package-lock.json b/package-lock.json
index 949c34b89..8ba4e4043 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
 {
-  "name": "neeto",
+  "name": "standard-notes",
   "version": "1.0.0",
   "lockfileVersion": 1,
   "requires": true,
@@ -5781,9 +5781,9 @@
       "dev": true
     },
     "sn-stylekit": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/sn-stylekit/-/sn-stylekit-1.0.1.tgz",
-      "integrity": "sha512-tmtTUI5Vahsl6WjGL8rvCzi4BIqKz3F7e7y7MgLXM0zvxi3+IObgwDJXEUSHboXkC1RGSEM0mq+yJlyt2DY0+A=="
+      "version": "1.0.115",
+      "resolved": "https://registry.npmjs.org/sn-stylekit/-/sn-stylekit-1.0.115.tgz",
+      "integrity": "sha512-NsOS+sJoLBexantCSU/kwFWoRquAVDWs/+lxPQ1UHhEFh2Gj8G7q3omZmmbesTnHvL0vf+XK55Ne8sr50ZWJag=="
     },
     "snake-case": {
       "version": "https://registry.npmjs.org/snake-case/-/snake-case-2.1.0.tgz",
diff --git a/package.json b/package.json
index 4ece22493..67c79db5e 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,6 @@
   },
   "license": "GPL-3.0",
   "dependencies": {
-    "sn-stylekit": "^1.0.1"
+    "sn-stylekit": "^1.0.115"
   }
 }