diff --git a/app/assets/javascripts/preferences/panes/account/subscription/NoSubscription.tsx b/app/assets/javascripts/preferences/panes/account/subscription/NoSubscription.tsx
index 5042ea992..c0e901a7b 100644
--- a/app/assets/javascripts/preferences/panes/account/subscription/NoSubscription.tsx
+++ b/app/assets/javascripts/preferences/panes/account/subscription/NoSubscription.tsx
@@ -1,23 +1,63 @@
 import { FunctionalComponent } from "preact";
 import { Text } from '@/preferences/components';
 import { Button } from '@/components/Button';
+import { WebApplication } from "@/ui_models/application";
+import { useState } from "preact/hooks";
+import { isDesktopApplication } from "@/utils";
 
-export const NoSubscription: FunctionalComponent = () => (
-  <>
-    <Text>You don't have a Standard Notes subscription yet.</Text>
-    <div className="flex">
-      <Button
-        className="min-w-20 mt-3 mr-3"
-        type="normal"
-        label="Refresh"
-        onClick={() => null}
-      />
-      <Button
-        className="min-w-20 mt-3"
-        type="primary"
-        label="Purchase subscription"
-        onClick={() => null}
-      />
-    </div>
-  </>
-);
+export const NoSubscription: FunctionalComponent<{
+  application: WebApplication;
+}> = ({ application }) => {
+  const [isLoadingPurchaseFlow, setIsLoadingPurchaseFlow] = useState(false);
+  const [purchaseFlowError, setPurchaseFlowError] = useState<string | undefined>(undefined);
+
+  const onPurchaseClick = async () => {
+    const errorMessage = 'There was an error when attempting to redirect you to the subscription page.';
+    setIsLoadingPurchaseFlow(true);
+    try {
+      const url = await application.getPurchaseFlowUrl();
+      if (url) {
+        const currentUrl = window.location.href;
+        const successUrl = isDesktopApplication() ? `standardnotes://${currentUrl}` : currentUrl;
+        console.log(successUrl);
+        window.location.assign(`${url}&success_url=${successUrl}`);
+      } else {
+        setPurchaseFlowError(errorMessage);
+      }
+    } catch (e) {
+      setPurchaseFlowError(errorMessage);
+    } finally {
+      setIsLoadingPurchaseFlow(false);
+    }
+  };
+
+  return (
+    <>
+      <Text>You don't have a Standard Notes subscription yet.</Text>
+      {isLoadingPurchaseFlow && (
+        <Text>
+          Redirecting you to the subscription page...
+        </Text>
+      )}
+      {purchaseFlowError && (
+        <Text className="color-danger">
+          {purchaseFlowError}
+        </Text>
+      )}
+      <div className="flex">
+        <Button
+          className="min-w-20 mt-3 mr-3"
+          type="normal"
+          label="Refresh"
+          onClick={() => null}
+        />
+        <Button
+          className="min-w-20 mt-3"
+          type="primary"
+          label="Purchase subscription"
+          onClick={onPurchaseClick}
+        />
+      </div>
+    </>
+  );
+};
diff --git a/app/assets/javascripts/preferences/panes/account/subscription/Subscription.tsx b/app/assets/javascripts/preferences/panes/account/subscription/Subscription.tsx
index a063d1a06..0e9ce9126 100644
--- a/app/assets/javascripts/preferences/panes/account/subscription/Subscription.tsx
+++ b/app/assets/javascripts/preferences/panes/account/subscription/Subscription.tsx
@@ -77,7 +77,7 @@ export const Subscription: FunctionComponent<Props> = observer(({
             ) : userSubscription && userSubscription.endsAt > now ? (
               <SubscriptionInformation subscriptionState={subscriptionState} />
             ) : (
-              <NoSubscription />
+              <NoSubscription application={application} />
             )}
           </div>
         </div>
diff --git a/app/assets/javascripts/ui_models/application.ts b/app/assets/javascripts/ui_models/application.ts
index 99161903f..8e219e130 100644
--- a/app/assets/javascripts/ui_models/application.ts
+++ b/app/assets/javascripts/ui_models/application.ts
@@ -55,6 +55,7 @@ export class WebApplication extends SNApplication {
     scope: angular.IScope,
     defaultSyncServerHost: string,
     public bridge: Bridge,
+    webSocketUrl: string,
   ) {
     super(
       bridge.environment,
@@ -67,6 +68,7 @@ export class WebApplication extends SNApplication {
       defaultSyncServerHost,
       AppVersion,
       isDev,
+      webSocketUrl,
     );
     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 795e7530a..283c43397 100644
--- a/app/assets/javascripts/ui_models/application_group.ts
+++ b/app/assets/javascripts/ui_models/application_group.ts
@@ -64,6 +64,7 @@ export class ApplicationGroup extends SNApplicationGroup {
       scope,
       this.defaultSyncServerHost,
       this.bridge,
+      this.webSocketUrl,
     );
     const appState = new AppState(
       this.$rootScope,
diff --git a/app/assets/javascripts/views/footer/footer-view.pug b/app/assets/javascripts/views/footer/footer-view.pug
index 94bbb985f..a8d7183bf 100644
--- a/app/assets/javascripts/views/footer/footer-view.pug
+++ b/app/assets/javascripts/views/footer/footer-view.pug
@@ -6,7 +6,7 @@
         is-open='ctrl.showAccountMenu',
         ng-click='ctrl.accountMenuPressed()'
       )
-        .w-8.h-8.flex.items-center.justify-center.cursor-pointer.rounded-full(
+        .w-8.h-full.flex.items-center.justify-center.cursor-pointer.rounded-full(
             ng-class="ctrl.showAccountMenu ? 'bg-border' : '' "
           )
             .w-5.h-5(
@@ -26,7 +26,7 @@
         ng-click='ctrl.clickPreferences()'
         ng-if='ctrl.appState.enableUnfinishedFeatures'
       )
-        .w-8.h-8.flex.items-center.justify-center.cursor-pointer
+        .w-8.h-full.flex.items-center.justify-center.cursor-pointer
           .h-5
             icon(
               type="tune"
diff --git a/package.json b/package.json
index d0fe0b065..724336ae5 100644
--- a/package.json
+++ b/package.json
@@ -73,7 +73,7 @@
     "@reach/listbox": "^0.16.1",
     "@standardnotes/features": "1.6.1",
     "@standardnotes/sncrypto-web": "1.5.2",
-    "@standardnotes/snjs": "2.14.8",
+    "@standardnotes/snjs": "2.14.11",
     "mobx": "^6.3.2",
     "mobx-react-lite": "^3.2.0",
     "preact": "^10.5.12",
diff --git a/yarn.lock b/yarn.lock
index 62314ca67..4bf64aec4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2100,7 +2100,12 @@
   dependencies:
     "@standardnotes/common" "^1.1.0"
 
-"@standardnotes/common@1.1.0", "@standardnotes/common@^1.1.0":
+"@standardnotes/common@1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@standardnotes/common/-/common-1.2.0.tgz#949c9d384c54fbabeacca9ea3f6485cbc78da4bf"
+  integrity sha512-QiOAG858BcXUGSRjsmtk854/4OLyGkdcbvixia8Xcfv4d76iL/pQf7JFTDbanr9Ygodrc6B+h+NuzliO41COcg==
+
+"@standardnotes/common@^1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@standardnotes/common/-/common-1.1.0.tgz#5ffb0a50f9947471e236bb66d097f153ad9a148f"
   integrity sha512-Nm2IFWbMSfZDD7cnKtN+Gjic0f+PhPq/da/o4eOoUKg21VeOaQkTn+jlQKraKIs6Lmf+w9mmPNAgMc5o4hj7Lg==
@@ -2144,13 +2149,13 @@
     "@standardnotes/sncrypto-common" "^1.5.2"
     libsodium-wrappers "^0.7.8"
 
-"@standardnotes/snjs@2.14.8":
-  version "2.14.8"
-  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.14.8.tgz#ebd89734d7e846ade96b7d0d81a465418147337d"
-  integrity sha512-+nfo1civqJlHfrcDeKNJfp2t6o4gs1pkDbjPzT3vULhZUWbOwCeuF1jXHosCxpjnhd+5Wa/oG2KcbKKsqlrrfw==
+"@standardnotes/snjs@2.14.11":
+  version "2.14.11"
+  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.14.11.tgz#e80a23df763c44d463fe6b73ea0b12522afad9e7"
+  integrity sha512-L33rhU/NK2ev+o8QXWbVT7jZtVwIwvNwT46N/3Lv5RQXkY7wa1yxO08NHt4BfHqrmXI3mF5qnBH3mcYoOtBY7A==
   dependencies:
     "@standardnotes/auth" "3.7.2"
-    "@standardnotes/common" "1.1.0"
+    "@standardnotes/common" "1.2.0"
     "@standardnotes/domain-events" "2.1.0"
     "@standardnotes/features" "1.6.2"
     "@standardnotes/settings" "1.2.0"