diff --git a/.env.sample b/.env.sample
index f37bb8833..b900f610e 100644
--- a/.env.sample
+++ b/.env.sample
@@ -11,6 +11,7 @@ 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
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/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/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/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/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"