diff --git a/app/assets/javascripts/preferences/panes/account/offlineSubscription.tsx b/app/assets/javascripts/preferences/panes/account/offlineSubscription.tsx
index cbd276c14..173bd60a1 100644
--- a/app/assets/javascripts/preferences/panes/account/offlineSubscription.tsx
+++ b/app/assets/javascripts/preferences/panes/account/offlineSubscription.tsx
@@ -17,112 +17,124 @@ interface IProps {
   appState: AppState;
 }
 
-export const OfflineSubscription: FunctionalComponent<IProps> = observer(({ application, appState }) => {
-  const [activationCode, setActivationCode] = useState('');
-  const [isSuccessfullyActivated, setIsSuccessfullyActivated] = useState(false);
-  const [isSuccessfullyRemoved, setIsSuccessfullyRemoved] = useState(false);
-  const [hasUserPreviouslyStoredCode, setHasUserPreviouslyStoredCode] = useState(false);
+export const OfflineSubscription: FunctionalComponent<IProps> = observer(
+  ({ application, appState }) => {
+    const [activationCode, setActivationCode] = useState('');
+    const [isSuccessfullyActivated, setIsSuccessfullyActivated] =
+      useState(false);
+    const [isSuccessfullyRemoved, setIsSuccessfullyRemoved] = useState(false);
+    const [hasUserPreviouslyStoredCode, setHasUserPreviouslyStoredCode] =
+      useState(false);
 
-  useEffect(() => {
-    if (application.hasOfflineRepo()) {
-      setHasUserPreviouslyStoredCode(true);
+    useEffect(() => {
+      if (application.hasOfflineRepo()) {
+        setHasUserPreviouslyStoredCode(true);
+      }
+    }, [application]);
+
+    const shouldShowOfflineSubscription = () => {
+      return !application.hasAccount() || application.isThirdPartyHostUsed();
+    };
+
+    const handleSubscriptionCodeSubmit = async (
+      event: TargetedEvent<HTMLFormElement, Event>
+    ) => {
+      event.preventDefault();
+
+      const result = await application.setOfflineFeaturesCode(activationCode);
+
+      if (result?.error) {
+        await application.alertService.alert(result.error);
+      } else {
+        setIsSuccessfullyActivated(true);
+        setHasUserPreviouslyStoredCode(true);
+        setIsSuccessfullyRemoved(false);
+      }
+    };
+
+    const handleRemoveOfflineKey = async () => {
+      await application.deleteOfflineFeatureRepo();
+
+      setIsSuccessfullyActivated(false);
+      setHasUserPreviouslyStoredCode(false);
+      setActivationCode('');
+      setIsSuccessfullyRemoved(true);
+    };
+
+    const handleRemoveClick = async () => {
+      application.alertService
+        .confirm(
+          STRING_REMOVE_OFFLINE_KEY_CONFIRMATION,
+          'Remove offline key?',
+          'Remove Offline Key',
+          ButtonType.Danger,
+          'Cancel'
+        )
+        .then(async (shouldRemove: boolean) => {
+          if (shouldRemove) {
+            await handleRemoveOfflineKey();
+          }
+        })
+        .catch((err: string) => {
+          application.alertService.alert(err);
+        });
+    };
+
+    if (!shouldShowOfflineSubscription()) {
+      return null;
     }
-  }, [application]);
 
-  const shouldShowOfflineSubscription = () => {
-    return !application.hasAccount() || application.isCustomServerHostUsed();
-  };
-
-  const handleSubscriptionCodeSubmit = async (event: TargetedEvent<HTMLFormElement, Event>) => {
-    event.preventDefault();
-
-    const result = await application.setOfflineFeaturesCode(activationCode);
-
-    if (result?.error) {
-      await application.alertService.alert(result.error);
-    } else {
-      setIsSuccessfullyActivated(true);
-      setHasUserPreviouslyStoredCode(true);
-      setIsSuccessfullyRemoved(false);
-    }
-  };
-
-  const handleRemoveOfflineKey = async () => {
-    await application.deleteOfflineFeatureRepo();
-
-    setIsSuccessfullyActivated(false);
-    setHasUserPreviouslyStoredCode(false);
-    setActivationCode('');
-    setIsSuccessfullyRemoved(true);
-  };
-
-  const handleRemoveClick = async () => {
-    application.alertService.confirm(
-      STRING_REMOVE_OFFLINE_KEY_CONFIRMATION,
-      'Remove offline key?',
-      'Remove Offline Key',
-      ButtonType.Danger,
-      'Cancel'
-    )
-      .then(async (shouldRemove: boolean) => {
-        if (shouldRemove) {
-          await handleRemoveOfflineKey();
-        }
-      })
-      .catch((err: string) => {
-        application.alertService.alert(err);
-      });
-  };
-
-  if (!shouldShowOfflineSubscription()) {
-    return null;
-  }
-
-  return (
-    <>
-      <div className='flex items-center justify-between'>
-        <div className='flex flex-col mt-3 w-full'>
-          <Subtitle>{!hasUserPreviouslyStoredCode && 'Activate'} Offline Subscription</Subtitle>
-          <form onSubmit={handleSubscriptionCodeSubmit}>
-            <div className={'mt-2'}>
-              {!hasUserPreviouslyStoredCode && (
-                <DecoratedInput
-                  onChange={(code) => setActivationCode(code)}
-                  placeholder={'Offline Subscription Code'}
-                  text={activationCode}
-                  disabled={isSuccessfullyActivated}
-                  className={'mb-3'}
+    return (
+      <>
+        <div className="flex items-center justify-between">
+          <div className="flex flex-col mt-3 w-full">
+            <Subtitle>
+              {!hasUserPreviouslyStoredCode && 'Activate'} Offline Subscription
+            </Subtitle>
+            <form onSubmit={handleSubscriptionCodeSubmit}>
+              <div className={'mt-2'}>
+                {!hasUserPreviouslyStoredCode && (
+                  <DecoratedInput
+                    onChange={(code) => setActivationCode(code)}
+                    placeholder={'Offline Subscription Code'}
+                    text={activationCode}
+                    disabled={isSuccessfullyActivated}
+                    className={'mb-3'}
+                  />
+                )}
+              </div>
+              {(isSuccessfullyActivated || isSuccessfullyRemoved) && (
+                <div className={'mt-3 mb-3 info'}>
+                  Your offline subscription code has been successfully{' '}
+                  {isSuccessfullyActivated ? 'activated' : 'removed'}.
+                </div>
+              )}
+              {hasUserPreviouslyStoredCode && (
+                <Button
+                  type="danger"
+                  label="Remove offline key"
+                  onClick={() => {
+                    handleRemoveClick();
+                  }}
                 />
               )}
-            </div>
-            {(isSuccessfullyActivated || isSuccessfullyRemoved) && (
-              <div className={'mt-3 mb-3 info'}>
-                Your offline subscription code has been successfully {isSuccessfullyActivated ? 'activated' : 'removed'}.
-              </div>
-            )}
-            {hasUserPreviouslyStoredCode && (
-              <Button
-                type='danger'
-                label='Remove offline key'
-                onClick={() => {
-                  handleRemoveClick();
-                }}
-              />
-            )}
-            {!hasUserPreviouslyStoredCode && !isSuccessfullyActivated && (
-              <Button
-                label={'Submit'}
-                type='primary'
-                disabled={activationCode === ''}
-                onClick={(event) =>
-                  handleSubscriptionCodeSubmit(event as TargetedEvent<HTMLFormElement>)
-                }
-              />
-            )}
-          </form>
+              {!hasUserPreviouslyStoredCode && !isSuccessfullyActivated && (
+                <Button
+                  label={'Submit'}
+                  type="primary"
+                  disabled={activationCode === ''}
+                  onClick={(event) =>
+                    handleSubscriptionCodeSubmit(
+                      event as TargetedEvent<HTMLFormElement>
+                    )
+                  }
+                />
+              )}
+            </form>
+          </div>
         </div>
-      </div>
-      <HorizontalSeparator classes='mt-8 mb-5' />
-    </>
-  );
-});
+        <HorizontalSeparator classes="mt-8 mb-5" />
+      </>
+    );
+  }
+);
diff --git a/package.json b/package.json
index 988b47cb0..24e14d0eb 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "standard-notes-web",
-  "version": "3.9.8",
+  "version": "3.9.10",
   "license": "AGPL-3.0-or-later",
   "repository": {
     "type": "git",
@@ -85,7 +85,7 @@
     "@reach/listbox": "^0.16.2",
     "@standardnotes/features": "1.10.2",
     "@standardnotes/sncrypto-web": "1.5.3",
-    "@standardnotes/snjs": "2.20.1",
+    "@standardnotes/snjs": "2.20.3",
     "mobx": "^6.3.5",
     "mobx-react-lite": "^3.2.2",
     "preact": "^10.5.15",
diff --git a/yarn.lock b/yarn.lock
index 4594c405f..497074ac1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2614,10 +2614,10 @@
     buffer "^6.0.3"
     libsodium-wrappers "^0.7.9"
 
-"@standardnotes/snjs@2.20.1":
-  version "2.20.1"
-  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.20.1.tgz#4813adbfd16a1c373357bd4c7ece3085abf142b4"
-  integrity sha512-wJILt7YerLFaZTKoIZaCkqSuvpVWoVKqCVjP0KNHrMknnbgMHZygHqrb9sr57JL1AcNCkAULEFS/kev2GYTG3Q==
+"@standardnotes/snjs@2.20.3":
+  version "2.20.3"
+  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.20.3.tgz#11fe962dfb017be459e856b9fbc6311c5046a0b0"
+  integrity sha512-FHog3p3SuMvTXsEl76UenbjY8PS6VL/b6MjaC9whJR5ZwsvmLwE0G16dWZ+z+izm+CsRaHMWU8R2cy7RG7HjZg==
   dependencies:
     "@standardnotes/auth" "^3.8.1"
     "@standardnotes/common" "^1.2.1"