diff --git a/.env.sample b/.env.sample
index f37bb8833..100b7cc5d 100644
--- a/.env.sample
+++ b/.env.sample
@@ -11,9 +11,11 @@ APP_HOST=http://localhost:3001
 EXTENSIONS_MANAGER_LOCATION=extensions/extensions-manager/dist/index.html
 BATCH_MANAGER_LOCATION=extensions/batch-manager/dist/index.min.html
 SF_DEFAULT_SERVER=http://localhost:3000
+SF_NEXT_VERSION_SERVER=http://localhost:3000
 
 # Development options
 DEV_DEFAULT_SYNC_SERVER=https://sync.standardnotes.org
+DEV_NEXT_VERSION_SYNC_SERVER=https://api.standardnotes.com
 DEV_EXTENSIONS_MANAGER_LOCATION=public/extensions/extensions-manager/dist/index.html
 DEV_BATCH_MANAGER_LOCATION=public/extensions/batch-manager/dist/index.min.html
 
diff --git a/README.md b/README.md
index f7a3ea668..44f760c09 100644
--- a/README.md
+++ b/README.md
@@ -108,10 +108,13 @@ The web app makes use of two optional native extensions, which, when running the
 	BATCH_MANAGER_LOCATION=extensions/batch-manager/dist/index.min.html
 	```
 
-You can also set the `SF_DEFAULT_SERVER` environment variable to set the default server for login and registration.
+You can also set the `SF_DEFAULT_SERVER` and `SF_NEXT_VERSION_SERVER` environment variables to set the default servers for login and registration.
+
+> **Note:** SF_NEXT_VERSION_SERVER can point to the same server. It is used for gradual upgrade of API versions.
 
 ```
 SF_DEFAULT_SERVER=https://sync.myserver
+SF_NEXT_VERSION_SERVER=https://sync.myserver
 ```
 
 ---
diff --git a/app/assets/javascripts/app.ts b/app/assets/javascripts/app.ts
index 8adffd559..16b54ebf4 100644
--- a/app/assets/javascripts/app.ts
+++ b/app/assets/javascripts/app.ts
@@ -88,7 +88,8 @@ function reloadHiddenFirefoxTab(): boolean {
 
 const startApplication: StartApplication = async function startApplication(
   defaultSyncServerHost: string,
-  bridge: Bridge
+  bridge: Bridge,
+  nextVersionSyncServerHost: string,
 ) {
   if (reloadHiddenFirefoxTab()) {
     return;
@@ -105,6 +106,7 @@ const startApplication: StartApplication = async function startApplication(
     .config(configRoutes)
     .constant('bridge', bridge)
     .constant('defaultSyncServerHost', defaultSyncServerHost)
+    .constant('nextVersionSyncServerHost', nextVersionSyncServerHost)
     .constant('appVersion', bridge.appVersion);
 
   // Controllers
@@ -186,7 +188,8 @@ const startApplication: StartApplication = async function startApplication(
 if (__WEB__) {
   startApplication(
     (window as any)._default_sync_server,
-    new BrowserBridge(__VERSION__)
+    new BrowserBridge(__VERSION__),
+    (window as any)._next_version_sync_server
   );
 } else {
   (window as any).startApplication = startApplication;
diff --git a/app/assets/javascripts/components/NotesOptions.tsx b/app/assets/javascripts/components/NotesOptions.tsx
index 8c80f5f54..b2a0ac3b4 100644
--- a/app/assets/javascripts/components/NotesOptions.tsx
+++ b/app/assets/javascripts/components/NotesOptions.tsx
@@ -72,11 +72,11 @@ export const NotesOptions = observer(
       const buttonRect = tagsButtonRef.current.getBoundingClientRect();
       const footerHeight = 32;
 
-      if ((buttonRect.top + maxTagsMenuSize) > (clientHeight - footerHeight)) {
+      if (buttonRect.top + maxTagsMenuSize > clientHeight - footerHeight) {
         setTagsMenuMaxHeight(clientHeight - buttonRect.top - footerHeight - 2);
       }
 
-      if ((buttonRect.right + maxTagsMenuSize) > clientWidth) {
+      if (buttonRect.right + maxTagsMenuSize > clientWidth) {
         setTagsMenuPosition({
           top: buttonRect.top,
           right: clientWidth - buttonRect.left,
@@ -88,7 +88,6 @@ export const NotesOptions = observer(
         });
       }
 
-
       setTagsMenuOpen(!tagsMenuOpen);
     };
 
@@ -169,7 +168,7 @@ export const NotesOptions = observer(
               {appState.tags.tags.map((tag) => (
                 <button
                   key={tag.title}
-                  className={`${buttonClass} py-2`}
+                  className={`${buttonClass} py-2 max-w-80`}
                   onBlur={closeOnBlur}
                   onClick={() => {
                     appState.notes.isTagInSelectedNotes(tag)
@@ -178,11 +177,12 @@ export const NotesOptions = observer(
                   }}
                 >
                   <span
-                    className={
-                      appState.notes.isTagInSelectedNotes(tag)
-                        ? 'font-bold'
-                        : ''
-                    }
+                    className={`whitespace-nowrap overflow-hidden overflow-ellipsis
+                      ${
+                        appState.notes.isTagInSelectedNotes(tag)
+                          ? 'font-bold'
+                          : ''
+                      }`}
                   >
                     {tag.title}
                   </span>
diff --git a/app/assets/javascripts/startApplication.ts b/app/assets/javascripts/startApplication.ts
index 1ee380a1c..96df7f53b 100644
--- a/app/assets/javascripts/startApplication.ts
+++ b/app/assets/javascripts/startApplication.ts
@@ -2,5 +2,6 @@ import { Bridge } from "./services/bridge";
 
 export type StartApplication = (
   defaultSyncServerHost: string,
-  bridge: Bridge
+  bridge: Bridge,
+  nextVersionSyncServerHost: string
 ) => Promise<void>;
diff --git a/app/assets/javascripts/ui_models/app_state/notes_state.ts b/app/assets/javascripts/ui_models/app_state/notes_state.ts
index 6688e4e97..3a4e79724 100644
--- a/app/assets/javascripts/ui_models/app_state/notes_state.ts
+++ b/app/assets/javascripts/ui_models/app_state/notes_state.ts
@@ -108,13 +108,14 @@ export class NotesState {
     }
   }
 
-  async selectNote(uuid: UuidString): Promise<void> {
+  async selectNote(uuid: UuidString, userTriggered?: boolean): Promise<void> {
     const note = this.application.findItem(uuid) as SNNote;
 
     if (note) {
       if (
-        this.io.activeModifiers.has(KeyboardModifier.Meta) ||
-        this.io.activeModifiers.has(KeyboardModifier.Ctrl)
+        userTriggered &&
+        (this.io.activeModifiers.has(KeyboardModifier.Meta) ||
+          this.io.activeModifiers.has(KeyboardModifier.Ctrl))
       ) {
         if (this.selectedNotes[uuid]) {
           delete this.selectedNotes[uuid];
@@ -124,7 +125,10 @@ export class NotesState {
             this.lastSelectedNote = note;
           });
         }
-      } else if (this.io.activeModifiers.has(KeyboardModifier.Shift)) {
+      } else if (
+        userTriggered &&
+        this.io.activeModifiers.has(KeyboardModifier.Shift)
+      ) {
         await this.selectNotesRange(note);
       } else {
         const shouldSelectNote =
diff --git a/app/assets/javascripts/ui_models/application.ts b/app/assets/javascripts/ui_models/application.ts
index 3a545963b..0803b531b 100644
--- a/app/assets/javascripts/ui_models/application.ts
+++ b/app/assets/javascripts/ui_models/application.ts
@@ -53,6 +53,7 @@ export class WebApplication extends SNApplication {
     scope: angular.IScope,
     defaultSyncServerHost: string,
     public bridge: Bridge,
+    nextVersionSyncServerHost: string,
   ) {
     super(
       bridge.environment,
@@ -62,7 +63,8 @@ export class WebApplication extends SNApplication {
       new AlertService(),
       identifier,
       [],
-      defaultSyncServerHost
+      defaultSyncServerHost,
+      nextVersionSyncServerHost,
     );
     this.$compile = $compile;
     this.scope = scope;
diff --git a/app/assets/javascripts/ui_models/application_group.ts b/app/assets/javascripts/ui_models/application_group.ts
index c2676bf92..05ede54a9 100644
--- a/app/assets/javascripts/ui_models/application_group.ts
+++ b/app/assets/javascripts/ui_models/application_group.ts
@@ -28,7 +28,8 @@ export class ApplicationGroup extends SNApplicationGroup {
     $rootScope: ng.IRootScopeService,
     $timeout: ng.ITimeoutService,
     private defaultSyncServerHost: string,
-    private bridge: Bridge
+    private bridge: Bridge,
+    private nextVersionSyncServerHost: string,
   ) {
     super(new WebDeviceInterface($timeout, bridge));
     this.$compile = $compile;
@@ -62,7 +63,8 @@ export class ApplicationGroup extends SNApplicationGroup {
       this.$compile,
       scope,
       this.defaultSyncServerHost,
-      this.bridge
+      this.bridge,
+      this.nextVersionSyncServerHost,
     );
     const appState = new AppState(
       this.$rootScope,
diff --git a/app/assets/javascripts/views/notes/notes-view.pug b/app/assets/javascripts/views/notes/notes-view.pug
index 7f97da3b8..26287723b 100644
--- a/app/assets/javascripts/views/notes/notes-view.pug
+++ b/app/assets/javascripts/views/notes/notes-view.pug
@@ -130,7 +130,7 @@
           ng-attr-id='note-{{note.uuid}}'
           ng-repeat='note in self.state.renderedNotes track by note.uuid'
           ng-class="{'selected' : self.isNoteSelected(note.uuid) }"
-          ng-click='self.selectNote(note)'
+          ng-click='self.selectNote(note, true)'
         )
           .note-flags(ng-show='self.noteFlags[note.uuid].length > 0')
             .flag(ng-class='flag.class', ng-repeat='flag in self.noteFlags[note.uuid]')
diff --git a/app/assets/javascripts/views/notes/notes_view.ts b/app/assets/javascripts/views/notes/notes_view.ts
index 1708d0db6..1db7ff1b6 100644
--- a/app/assets/javascripts/views/notes/notes_view.ts
+++ b/app/assets/javascripts/views/notes/notes_view.ts
@@ -305,7 +305,7 @@ class NotesViewCtrl extends PureViewCtrl<unknown, NotesCtrlState> {
   private async openNotesContextMenu(e: MouseEvent, note: SNNote) {
     e.preventDefault();
     if (!this.state.selectedNotes[note.uuid]) {
-      await this.selectNote(note);
+      await this.selectNote(note, true);
     }
     if (this.state.selectedNotes[note.uuid]) {
       const { clientHeight } = document.documentElement;
@@ -395,8 +395,8 @@ class NotesViewCtrl extends PureViewCtrl<unknown, NotesCtrlState> {
     }
   }
 
-  async selectNote(note: SNNote): Promise<void> {
-    await this.appState.notes.selectNote(note.uuid);
+  async selectNote(note: SNNote, userTriggered?: boolean): Promise<void> {
+    await this.appState.notes.selectNote(note.uuid, userTriggered);
   }
 
   async createNewNote() {
diff --git a/app/assets/stylesheets/_sn.scss b/app/assets/stylesheets/_sn.scss
index 1b3edcc12..3d3d6cb25 100644
--- a/app/assets/stylesheets/_sn.scss
+++ b/app/assets/stylesheets/_sn.scss
@@ -171,6 +171,18 @@
   align-items: flex-start;
 }
 
+.whitespace-nowrap {
+  white-space: nowrap;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.overflow-ellipsis {
+  text-overflow: ellipsis;
+}
+
 /**
  * A button that is just an icon. Separated from .sn-button because there
  * is almost no style overlap.
diff --git a/app/assets/templates/directives/permissions-modal.pug b/app/assets/templates/directives/permissions-modal.pug
index 52f452083..0ae709c0e 100644
--- a/app/assets/templates/directives/permissions-modal.pug
+++ b/app/assets/templates/directives/permissions-modal.pug
@@ -15,6 +15,7 @@
           .sk-panel-row
             p.sk-p
               | Extensions use an offline messaging system to communicate. Learn more at
+              | 
               a.sk-a.info(
                 href='https://standardnotes.org/permissions',
                 rel='noopener',
diff --git a/app/views/application/app.html.erb b/app/views/application/app.html.erb
index 39e70cf4c..e02cb3f0a 100644
--- a/app/views/application/app.html.erb
+++ b/app/views/application/app.html.erb
@@ -30,6 +30,7 @@
 
     <script>
       window._default_sync_server = "<%= ENV['SF_DEFAULT_SERVER'] %>";
+      window._next_version_sync_server = "<%= ENV['SF_NEXT_VERSION_SERVER'] %>";
       window._extensions_manager_location = "<%= ENV['EXTENSIONS_MANAGER_LOCATION'] %>";
       window._batch_manager_location = "<%= ENV['BATCH_MANAGER_LOCATION'] %>";
       window._bugsnag_api_key = "<%= ENV['BUGSNAG_API_KEY'] %>";
diff --git a/index.html b/index.html
index d08c83053..c91af2be3 100644
--- a/index.html
+++ b/index.html
@@ -30,12 +30,14 @@
 
 <body
   data-default-sync-server="<%= env.DEV_DEFAULT_SYNC_SERVER %>"
+  data-next-version-sync-server="<%= env.DEV_NEXT_VERSION_SYNC_SERVER %>"
   data-extensions-manager-location="<%= env.DEV_EXTENSIONS_MANAGER_LOCATION %>"
   data-batch-manager-location="<%= env.DEV_BATCH_MANAGER_LOCATION %>"
   data-bugsnag-api-key="<%= env.DEV_BUGSNAG_API_KEY %>"
 >
   <script>
     window._default_sync_server = document.body.dataset.defaultSyncServer || "https://sync.standardnotes.org";
+    window._next_version_sync_server = document.body.dataset.nextVersionSyncServer || "https://api.standardnotes.com";
     window._extensions_manager_location = document.body.dataset.extensionsManagerLocation || "public/extensions/extensions-manager/dist/index.html";
     window._batch_manager_location = document.body.dataset.batchManagerLocation || "public/extensions/batch-manager/dist/index.min.html";
     window._bugsnag_api_key = document.body.dataset.bugsnagApiKey;
diff --git a/package.json b/package.json
index 10df113dd..f362d4557 100644
--- a/package.json
+++ b/package.json
@@ -71,7 +71,7 @@
     "@reach/checkbox": "^0.13.2",
     "@reach/dialog": "^0.13.0",
     "@standardnotes/sncrypto-web": "1.2.10",
-    "@standardnotes/snjs": "2.4.2",
+    "@standardnotes/snjs": "2.5.0",
     "mobx": "^6.1.6",
     "mobx-react-lite": "^3.2.0",
     "preact": "^10.5.12"
diff --git a/yarn.lock b/yarn.lock
index 2c9d723f8..81c84c425 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1936,10 +1936,10 @@
     "@standardnotes/sncrypto-common" "^1.2.7"
     libsodium-wrappers "^0.7.8"
 
-"@standardnotes/snjs@2.4.2":
-  version "2.4.2"
-  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.4.2.tgz#5d3dfd6ae5f40984e0d28b776684561b5818eadf"
-  integrity sha512-/R8Lsbo9NqQ2FZKe4N4V4ZQxUbfmzU5jA6FtW0wE+g6c5MtHPO9fRoWK81PJXumc+t9VI8q2nswkthyqIGgEgA==
+"@standardnotes/snjs@2.5.0":
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.5.0.tgz#fcd45f8c6884fcc204633be33366b59ede71c5b1"
+  integrity sha512-VWThoZhymoCOqRkZjXj3vDhQGAPMt+KUrB/FyYZkl+9jVCMX6NIGziLb8fThFaZzoyC/qp5BuoceZlbyrggOnw==
   dependencies:
     "@standardnotes/auth" "^2.0.0"
     "@standardnotes/sncrypto-common" "^1.2.9"