diff --git a/app/assets/javascripts/components/AccountMenu/GeneralAccountMenu.tsx b/app/assets/javascripts/components/AccountMenu/GeneralAccountMenu.tsx
index 526ddf8d9..5590741be 100644
--- a/app/assets/javascripts/components/AccountMenu/GeneralAccountMenu.tsx
+++ b/app/assets/javascripts/components/AccountMenu/GeneralAccountMenu.tsx
@@ -2,14 +2,14 @@ import { WebApplication } from '@/ui_models/application';
 import { AppState } from '@/ui_models/app_state';
 import { observer } from 'mobx-react-lite';
 import { Icon } from '../Icon';
-import { formatLastSyncDate } from '@/preferences/panes/account/Sync';
+import { formatLastSyncDate } from '@/components/Preferences/panes/account/Sync';
 import { SyncQueueStrategy } from '@standardnotes/snjs';
 import { STRING_GENERIC_SYNC_ERROR } from '@/strings';
 import { useState } from 'preact/hooks';
 import { AccountMenuPane } from '.';
 import { FunctionComponent } from 'preact';
-import { Menu } from '../menu/Menu';
-import { MenuItem, MenuItemSeparator, MenuItemType } from '../menu/MenuItem';
+import { Menu } from '../Menu/Menu';
+import { MenuItem, MenuItemSeparator, MenuItemType } from '../Menu/MenuItem';
 
 type Props = {
   appState: AppState;
diff --git a/app/assets/javascripts/components/ApplicationView.tsx b/app/assets/javascripts/components/ApplicationView.tsx
index 6210d8da1..4c7fc9108 100644
--- a/app/assets/javascripts/components/ApplicationView.tsx
+++ b/app/assets/javascripts/components/ApplicationView.tsx
@@ -16,10 +16,10 @@ import { NotesView } from '@/components/NotesView';
 import { NoteGroupView } from '@/components/NoteGroupView';
 import { Footer } from '@/components/Footer';
 import { SessionsModal } from '@/components/SessionsModal';
-import { PreferencesViewWrapper } from '@/preferences/PreferencesViewWrapper';
+import { PreferencesViewWrapper } from '@/components/Preferences/PreferencesViewWrapper';
 import { ChallengeModal } from '@/components/ChallengeModal';
 import { NotesContextMenu } from '@/components/NotesContextMenu';
-import { PurchaseFlowWrapper } from '@/purchaseFlow/PurchaseFlowWrapper';
+import { PurchaseFlowWrapper } from '@/components/PurchaseFlow/PurchaseFlowWrapper';
 import { render } from 'preact';
 import { PermissionsModal } from './PermissionsModal';
 import { RevisionHistoryModalWrapper } from './RevisionHistoryModal/RevisionHistoryModalWrapper';
diff --git a/app/assets/javascripts/components/menu/Menu.tsx b/app/assets/javascripts/components/Menu/Menu.tsx
similarity index 100%
rename from app/assets/javascripts/components/menu/Menu.tsx
rename to app/assets/javascripts/components/Menu/Menu.tsx
diff --git a/app/assets/javascripts/components/menu/MenuItem.tsx b/app/assets/javascripts/components/Menu/MenuItem.tsx
similarity index 100%
rename from app/assets/javascripts/components/menu/MenuItem.tsx
rename to app/assets/javascripts/components/Menu/MenuItem.tsx
diff --git a/app/assets/javascripts/components/NotesListOptionsMenu.tsx b/app/assets/javascripts/components/NotesListOptionsMenu.tsx
index 52f632356..05119e31b 100644
--- a/app/assets/javascripts/components/NotesListOptionsMenu.tsx
+++ b/app/assets/javascripts/components/NotesListOptionsMenu.tsx
@@ -4,8 +4,8 @@ import { observer } from 'mobx-react-lite';
 import { FunctionComponent } from 'preact';
 import { useRef, useState } from 'preact/hooks';
 import { Icon } from './Icon';
-import { Menu } from './menu/Menu';
-import { MenuItem, MenuItemSeparator, MenuItemType } from './menu/MenuItem';
+import { Menu } from './Menu/Menu';
+import { MenuItem, MenuItemSeparator, MenuItemType } from './Menu/MenuItem';
 
 type Props = {
   application: WebApplication;
diff --git a/app/assets/javascripts/components/NotesOptions/changeEditor/ChangeEditorMenu.tsx b/app/assets/javascripts/components/NotesOptions/changeEditor/ChangeEditorMenu.tsx
index fad58fbae..6da3aaf5a 100644
--- a/app/assets/javascripts/components/NotesOptions/changeEditor/ChangeEditorMenu.tsx
+++ b/app/assets/javascripts/components/NotesOptions/changeEditor/ChangeEditorMenu.tsx
@@ -1,6 +1,6 @@
 import { Icon } from '@/components/Icon';
-import { Menu } from '@/components/menu/Menu';
-import { MenuItem, MenuItemType } from '@/components/menu/MenuItem';
+import { Menu } from '@/components/Menu/Menu';
+import { MenuItem, MenuItemType } from '@/components/Menu/MenuItem';
 import {
   reloadFont,
   transactionForAssociateComponentWithCurrentNote,
diff --git a/app/assets/javascripts/preferences/PreferencesMenu.ts b/app/assets/javascripts/components/Preferences/PreferencesMenu.ts
similarity index 98%
rename from app/assets/javascripts/preferences/PreferencesMenu.ts
rename to app/assets/javascripts/components/Preferences/PreferencesMenu.ts
index da8470601..5ddace53f 100644
--- a/app/assets/javascripts/preferences/PreferencesMenu.ts
+++ b/app/assets/javascripts/components/Preferences/PreferencesMenu.ts
@@ -1,5 +1,5 @@
 import { action, makeAutoObservable, observable } from 'mobx';
-import { ExtensionsLatestVersions } from '@/preferences/panes/extensions-segments';
+import { ExtensionsLatestVersions } from '@/components/Preferences/panes/extensions-segments';
 import {
   ComponentArea,
   ContentType,
diff --git a/app/assets/javascripts/preferences/PreferencesMenuView.tsx b/app/assets/javascripts/components/Preferences/PreferencesMenuView.tsx
similarity index 100%
rename from app/assets/javascripts/preferences/PreferencesMenuView.tsx
rename to app/assets/javascripts/components/Preferences/PreferencesMenuView.tsx
diff --git a/app/assets/javascripts/preferences/PreferencesView.tsx b/app/assets/javascripts/components/Preferences/PreferencesView.tsx
similarity index 98%
rename from app/assets/javascripts/preferences/PreferencesView.tsx
rename to app/assets/javascripts/components/Preferences/PreferencesView.tsx
index b53bc975e..dd615570a 100644
--- a/app/assets/javascripts/preferences/PreferencesView.tsx
+++ b/app/assets/javascripts/components/Preferences/PreferencesView.tsx
@@ -17,7 +17,7 @@ import { MfaProps } from './panes/two-factor-auth/MfaProps';
 import { AppState } from '@/ui_models/app_state';
 import { useEffect, useMemo } from 'preact/hooks';
 import { ExtensionPane } from './panes/ExtensionPane';
-import { Backups } from '@/preferences/panes/Backups';
+import { Backups } from '@/components/Preferences/panes/Backups';
 import { Appearance } from './panes/Appearance';
 
 interface PreferencesProps extends MfaProps {
diff --git a/app/assets/javascripts/preferences/PreferencesViewWrapper.tsx b/app/assets/javascripts/components/Preferences/PreferencesViewWrapper.tsx
similarity index 100%
rename from app/assets/javascripts/preferences/PreferencesViewWrapper.tsx
rename to app/assets/javascripts/components/Preferences/PreferencesViewWrapper.tsx
diff --git a/app/assets/javascripts/preferences/components/Content.tsx b/app/assets/javascripts/components/Preferences/components/Content.tsx
similarity index 100%
rename from app/assets/javascripts/preferences/components/Content.tsx
rename to app/assets/javascripts/components/Preferences/components/Content.tsx
diff --git a/app/assets/javascripts/preferences/components/MenuItem.tsx b/app/assets/javascripts/components/Preferences/components/MenuItem.tsx
similarity index 100%
rename from app/assets/javascripts/preferences/components/MenuItem.tsx
rename to app/assets/javascripts/components/Preferences/components/MenuItem.tsx
diff --git a/app/assets/javascripts/preferences/components/PreferencesGroup.tsx b/app/assets/javascripts/components/Preferences/components/PreferencesGroup.tsx
similarity index 92%
rename from app/assets/javascripts/preferences/components/PreferencesGroup.tsx
rename to app/assets/javascripts/components/Preferences/components/PreferencesGroup.tsx
index a40d0e281..982b85904 100644
--- a/app/assets/javascripts/preferences/components/PreferencesGroup.tsx
+++ b/app/assets/javascripts/components/Preferences/components/PreferencesGroup.tsx
@@ -1,5 +1,5 @@
 import { FunctionComponent } from 'preact';
-import { HorizontalSeparator } from '@/components/shared/HorizontalSeparator';
+import { HorizontalSeparator } from '@/components/Shared/HorizontalSeparator';
 
 const HorizontalLine: FunctionComponent<{ index: number; length: number }> = ({
   index,
diff --git a/app/assets/javascripts/preferences/components/PreferencesPane.tsx b/app/assets/javascripts/components/Preferences/components/PreferencesPane.tsx
similarity index 87%
rename from app/assets/javascripts/preferences/components/PreferencesPane.tsx
rename to app/assets/javascripts/components/Preferences/components/PreferencesPane.tsx
index 3cea1daa1..ad2b898c4 100644
--- a/app/assets/javascripts/preferences/components/PreferencesPane.tsx
+++ b/app/assets/javascripts/components/Preferences/components/PreferencesPane.tsx
@@ -5,8 +5,7 @@ export const PreferencesPane: FunctionComponent = ({ children }) => (
     <div className="flex-grow flex flex-col py-6 items-center">
       <div className="w-125 max-w-125 flex flex-col">
         {children != undefined && Array.isArray(children)
-          ? children
-            .filter((child) => child != undefined)
+          ? children.filter((child) => child != undefined)
           : children}
       </div>
     </div>
diff --git a/app/assets/javascripts/components/Preferences/components/PreferencesSegment.tsx b/app/assets/javascripts/components/Preferences/components/PreferencesSegment.tsx
new file mode 100644
index 000000000..e5e5b18eb
--- /dev/null
+++ b/app/assets/javascripts/components/Preferences/components/PreferencesSegment.tsx
@@ -0,0 +1,9 @@
+import { FunctionComponent } from 'preact';
+
+type Props = {
+  classes?: string;
+};
+export const PreferencesSegment: FunctionComponent<Props> = ({
+  children,
+  classes = '',
+}) => <div className={`flex flex-col ${classes}`}>{children}</div>;
diff --git a/app/assets/javascripts/preferences/components/index.ts b/app/assets/javascripts/components/Preferences/components/index.ts
similarity index 100%
rename from app/assets/javascripts/preferences/components/index.ts
rename to app/assets/javascripts/components/Preferences/components/index.ts
diff --git a/app/assets/javascripts/preferences/panes/AccountPreferences.tsx b/app/assets/javascripts/components/Preferences/panes/AccountPreferences.tsx
similarity index 87%
rename from app/assets/javascripts/preferences/panes/AccountPreferences.tsx
rename to app/assets/javascripts/components/Preferences/panes/AccountPreferences.tsx
index 0cdaddfbd..41e752e34 100644
--- a/app/assets/javascripts/preferences/panes/AccountPreferences.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/AccountPreferences.tsx
@@ -4,8 +4,8 @@ import {
   Credentials,
   SignOutWrapper,
   Authentication,
-} from '@/preferences/panes/account';
-import { PreferencesPane } from '@/preferences/components';
+} from '@/components/Preferences/panes/account';
+import { PreferencesPane } from '@/components/Preferences/components';
 import { observer } from 'mobx-react-lite';
 import { WebApplication } from '@/ui_models/application';
 import { AppState } from '@/ui_models/app_state';
diff --git a/app/assets/javascripts/preferences/panes/Appearance.tsx b/app/assets/javascripts/components/Preferences/panes/Appearance.tsx
similarity index 98%
rename from app/assets/javascripts/preferences/panes/Appearance.tsx
rename to app/assets/javascripts/components/Preferences/panes/Appearance.tsx
index 854c66fdc..1e1a5c6f1 100644
--- a/app/assets/javascripts/preferences/panes/Appearance.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/Appearance.tsx
@@ -1,7 +1,7 @@
 import { Dropdown, DropdownItem } from '@/components/Dropdown';
 import { usePremiumModal } from '@/components/Premium';
 import { sortThemes } from '@/components/QuickSettingsMenu/QuickSettingsMenu';
-import { HorizontalSeparator } from '@/components/shared/HorizontalSeparator';
+import { HorizontalSeparator } from '@/components/Shared/HorizontalSeparator';
 import { Switch } from '@/components/Switch';
 import { WebApplication } from '@/ui_models/application';
 import { GetFeatures } from '@standardnotes/features';
diff --git a/app/assets/javascripts/preferences/panes/Backups.tsx b/app/assets/javascripts/components/Preferences/panes/Backups.tsx
similarity index 100%
rename from app/assets/javascripts/preferences/panes/Backups.tsx
rename to app/assets/javascripts/components/Preferences/panes/Backups.tsx
diff --git a/app/assets/javascripts/preferences/panes/CloudLink.tsx b/app/assets/javascripts/components/Preferences/panes/CloudLink.tsx
similarity index 100%
rename from app/assets/javascripts/preferences/panes/CloudLink.tsx
rename to app/assets/javascripts/components/Preferences/panes/CloudLink.tsx
diff --git a/app/assets/javascripts/preferences/panes/ExtensionPane.tsx b/app/assets/javascripts/components/Preferences/panes/ExtensionPane.tsx
similarity index 93%
rename from app/assets/javascripts/preferences/panes/ExtensionPane.tsx
rename to app/assets/javascripts/components/Preferences/panes/ExtensionPane.tsx
index 0f922d625..20ca5499e 100644
--- a/app/assets/javascripts/preferences/panes/ExtensionPane.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/ExtensionPane.tsx
@@ -1,4 +1,7 @@
-import { PreferencesGroup, PreferencesSegment } from '@/preferences/components';
+import {
+  PreferencesGroup,
+  PreferencesSegment,
+} from '@/components/Preferences/components';
 import { WebApplication } from '@/ui_models/application';
 import { ComponentViewer, SNComponent } from '@standardnotes/snjs';
 import { FeatureIdentifier } from '@standardnotes/features';
@@ -7,7 +10,7 @@ import { FunctionComponent } from 'preact';
 import { ExtensionItem } from './extensions-segments';
 import { ComponentView } from '@/components/ComponentView';
 import { AppState } from '@/ui_models/app_state';
-import { PreferencesMenu } from '@/preferences/PreferencesMenu';
+import { PreferencesMenu } from '@/components/Preferences/PreferencesMenu';
 import { useEffect, useState } from 'preact/hooks';
 
 interface IProps {
diff --git a/app/assets/javascripts/preferences/panes/Extensions.tsx b/app/assets/javascripts/components/Preferences/panes/Extensions.tsx
similarity index 100%
rename from app/assets/javascripts/preferences/panes/Extensions.tsx
rename to app/assets/javascripts/components/Preferences/panes/Extensions.tsx
diff --git a/app/assets/javascripts/preferences/panes/General.tsx b/app/assets/javascripts/components/Preferences/panes/General.tsx
similarity index 84%
rename from app/assets/javascripts/preferences/panes/General.tsx
rename to app/assets/javascripts/components/Preferences/panes/General.tsx
index e295764b9..1d8c902cf 100644
--- a/app/assets/javascripts/preferences/panes/General.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/General.tsx
@@ -3,8 +3,8 @@ import { AppState } from '@/ui_models/app_state';
 import { FunctionComponent } from 'preact';
 import { PreferencesPane } from '../components';
 import { Tools, Defaults, LabsPane } from './general-segments';
-import { ExtensionsLatestVersions } from '@/preferences/panes/extensions-segments';
-import { Advanced } from '@/preferences/panes/account';
+import { ExtensionsLatestVersions } from '@/components/Preferences/panes/extensions-segments';
+import { Advanced } from '@/components/Preferences/panes/account';
 import { observer } from 'mobx-react-lite';
 
 interface GeneralProps {
diff --git a/app/assets/javascripts/preferences/panes/HelpFeedback.tsx b/app/assets/javascripts/components/Preferences/panes/HelpFeedback.tsx
similarity index 96%
rename from app/assets/javascripts/preferences/panes/HelpFeedback.tsx
rename to app/assets/javascripts/components/Preferences/panes/HelpFeedback.tsx
index 4fe16cf73..01f15ba9b 100644
--- a/app/assets/javascripts/preferences/panes/HelpFeedback.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/HelpFeedback.tsx
@@ -104,7 +104,11 @@ export const HelpAndFeedback: FunctionComponent = () => (
         <Text>
           Send an email to help@standardnotes.com and we’ll sort it out.
         </Text>
-        <LinkButton className="mt-3" link="mailto: help@standardnotes.com" label="Email us" />
+        <LinkButton
+          className="mt-3"
+          link="mailto: help@standardnotes.com"
+          label="Email us"
+        />
       </PreferencesSegment>
     </PreferencesGroup>
   </PreferencesPane>
diff --git a/app/assets/javascripts/preferences/panes/Listed.tsx b/app/assets/javascripts/components/Preferences/panes/Listed.tsx
similarity index 100%
rename from app/assets/javascripts/preferences/panes/Listed.tsx
rename to app/assets/javascripts/components/Preferences/panes/Listed.tsx
diff --git a/app/assets/javascripts/preferences/panes/Security.tsx b/app/assets/javascripts/components/Preferences/panes/Security.tsx
similarity index 100%
rename from app/assets/javascripts/preferences/panes/Security.tsx
rename to app/assets/javascripts/components/Preferences/panes/Security.tsx
diff --git a/app/assets/javascripts/components/Preferences/panes/account/Advanced.tsx b/app/assets/javascripts/components/Preferences/panes/account/Advanced.tsx
new file mode 100644
index 000000000..dae8189b6
--- /dev/null
+++ b/app/assets/javascripts/components/Preferences/panes/account/Advanced.tsx
@@ -0,0 +1,44 @@
+import { FunctionalComponent } from 'preact';
+import {
+  PreferencesGroup,
+  PreferencesSegment,
+} from '@/components/Preferences/components';
+import { OfflineSubscription } from '@/components/Preferences/panes/account/offlineSubscription';
+import { WebApplication } from '@/ui_models/application';
+import { observer } from 'mobx-react-lite';
+import { AppState } from '@/ui_models/app_state';
+import { Extensions } from '@/components/Preferences/panes/Extensions';
+import { ExtensionsLatestVersions } from '@/components/Preferences/panes/extensions-segments';
+import { AccordionItem } from '@/components/Shared/AccordionItem';
+
+interface IProps {
+  application: WebApplication;
+  appState: AppState;
+  extensionsLatestVersions: ExtensionsLatestVersions;
+}
+
+export const Advanced: FunctionalComponent<IProps> = observer(
+  ({ application, appState, extensionsLatestVersions }) => {
+    return (
+      <PreferencesGroup>
+        <PreferencesSegment>
+          <AccordionItem title={'Advanced Settings'}>
+            <div className="flex flex-row items-center">
+              <div className="flex-grow flex flex-col">
+                <OfflineSubscription
+                  application={application}
+                  appState={appState}
+                />
+                <Extensions
+                  className={'mt-3'}
+                  application={application}
+                  extensionsLatestVersions={extensionsLatestVersions}
+                />
+              </div>
+            </div>
+          </AccordionItem>
+        </PreferencesSegment>
+      </PreferencesGroup>
+    );
+  }
+);
diff --git a/app/assets/javascripts/preferences/panes/account/Authentication.tsx b/app/assets/javascripts/components/Preferences/panes/account/Authentication.tsx
similarity index 97%
rename from app/assets/javascripts/preferences/panes/account/Authentication.tsx
rename to app/assets/javascripts/components/Preferences/panes/account/Authentication.tsx
index 826daab2c..cdb1068d8 100644
--- a/app/assets/javascripts/preferences/panes/account/Authentication.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/account/Authentication.tsx
@@ -5,7 +5,7 @@ import {
   PreferencesSegment,
   Text,
   Title,
-} from '@/preferences/components';
+} from '@/components/Preferences/components';
 import { WebApplication } from '@/ui_models/application';
 import { AppState } from '@/ui_models/app_state';
 import { observer } from 'mobx-react-lite';
diff --git a/app/assets/javascripts/preferences/panes/account/Credentials.tsx b/app/assets/javascripts/components/Preferences/panes/account/Credentials.tsx
similarity index 92%
rename from app/assets/javascripts/preferences/panes/account/Credentials.tsx
rename to app/assets/javascripts/components/Preferences/panes/account/Credentials.tsx
index f717d172d..1b0e8b790 100644
--- a/app/assets/javascripts/preferences/panes/account/Credentials.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/account/Credentials.tsx
@@ -4,14 +4,14 @@ import {
   Subtitle,
   Text,
   Title,
-} from '@/preferences/components';
+} from '@/components/Preferences/components';
 import { Button } from '@/components/Button';
 import { WebApplication } from '@/ui_models/application';
 import { observer } from '@node_modules/mobx-react-lite';
-import { HorizontalSeparator } from '@/components/shared/HorizontalSeparator';
+import { HorizontalSeparator } from '@/components/Shared/HorizontalSeparator';
 import { dateToLocalizedString } from '@standardnotes/snjs';
 import { useCallback, useState } from 'preact/hooks';
-import { ChangeEmail } from '@/preferences/panes/account/changeEmail';
+import { ChangeEmail } from '@/components/Preferences/panes/account/changeEmail';
 import { FunctionComponent, render } from 'preact';
 import { AppState } from '@/ui_models/app_state';
 import { PasswordWizard } from '@/components/PasswordWizard';
diff --git a/app/assets/javascripts/preferences/panes/account/SignOutView.tsx b/app/assets/javascripts/components/Preferences/panes/account/SignOutView.tsx
similarity index 98%
rename from app/assets/javascripts/preferences/panes/account/SignOutView.tsx
rename to app/assets/javascripts/components/Preferences/panes/account/SignOutView.tsx
index 30078bcb0..17c5ed0df 100644
--- a/app/assets/javascripts/preferences/panes/account/SignOutView.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/account/SignOutView.tsx
@@ -6,7 +6,7 @@ import {
   Subtitle,
   Text,
   Title,
-} from '@/preferences/components';
+} from '@/components/Preferences/components';
 import { WebApplication } from '@/ui_models/application';
 import { AppState } from '@/ui_models/app_state';
 import { observer } from 'mobx-react-lite';
diff --git a/app/assets/javascripts/preferences/panes/account/Sync.tsx b/app/assets/javascripts/components/Preferences/panes/account/Sync.tsx
similarity index 97%
rename from app/assets/javascripts/preferences/panes/account/Sync.tsx
rename to app/assets/javascripts/components/Preferences/panes/account/Sync.tsx
index 3e51f0383..bd2340de1 100644
--- a/app/assets/javascripts/preferences/panes/account/Sync.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/account/Sync.tsx
@@ -3,7 +3,7 @@ import {
   PreferencesSegment,
   Text,
   Title,
-} from '@/preferences/components';
+} from '@/components/Preferences/components';
 import { Button } from '@/components/Button';
 import { SyncQueueStrategy, dateToLocalizedString } from '@standardnotes/snjs';
 import { STRING_GENERIC_SYNC_ERROR } from '@/strings';
diff --git a/app/assets/javascripts/preferences/panes/account/changeEmail/ChangeEmailForm.tsx b/app/assets/javascripts/components/Preferences/panes/account/changeEmail/ChangeEmailForm.tsx
similarity index 100%
rename from app/assets/javascripts/preferences/panes/account/changeEmail/ChangeEmailForm.tsx
rename to app/assets/javascripts/components/Preferences/panes/account/changeEmail/ChangeEmailForm.tsx
diff --git a/app/assets/javascripts/preferences/panes/account/changeEmail/ChangeEmailSuccess.tsx b/app/assets/javascripts/components/Preferences/panes/account/changeEmail/ChangeEmailSuccess.tsx
similarity index 57%
rename from app/assets/javascripts/preferences/panes/account/changeEmail/ChangeEmailSuccess.tsx
rename to app/assets/javascripts/components/Preferences/panes/account/changeEmail/ChangeEmailSuccess.tsx
index ac96e53c7..49e45c9c2 100644
--- a/app/assets/javascripts/preferences/panes/account/changeEmail/ChangeEmailSuccess.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/account/changeEmail/ChangeEmailSuccess.tsx
@@ -3,9 +3,12 @@ import { FunctionalComponent } from 'preact';
 export const ChangeEmailSuccess: FunctionalComponent = () => {
   return (
     <div>
-      <div className={'sk-label sk-bold info mt-2'}>Your email has been successfully changed.</div>
+      <div className={'sk-label sk-bold info mt-2'}>
+        Your email has been successfully changed.
+      </div>
       <p className={'sk-p'}>
-        Please ensure you are running the latest version of Standard Notes on all platforms to ensure maximum compatibility.
+        Please ensure you are running the latest version of Standard Notes on
+        all platforms to ensure maximum compatibility.
       </p>
     </div>
   );
diff --git a/app/assets/javascripts/preferences/panes/account/changeEmail/index.tsx b/app/assets/javascripts/components/Preferences/panes/account/changeEmail/index.tsx
similarity index 99%
rename from app/assets/javascripts/preferences/panes/account/changeEmail/index.tsx
rename to app/assets/javascripts/components/Preferences/panes/account/changeEmail/index.tsx
index 18d28d29f..cc98e92e0 100644
--- a/app/assets/javascripts/preferences/panes/account/changeEmail/index.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/account/changeEmail/index.tsx
@@ -4,7 +4,7 @@ import {
   ModalDialogButtons,
   ModalDialogDescription,
   ModalDialogLabel,
-} from '@/components/shared/ModalDialog';
+} from '@/components/Shared/ModalDialog';
 import { Button } from '@/components/Button';
 import { FunctionalComponent } from 'preact';
 import { WebApplication } from '@/ui_models/application';
diff --git a/app/assets/javascripts/preferences/panes/account/index.ts b/app/assets/javascripts/components/Preferences/panes/account/index.ts
similarity index 100%
rename from app/assets/javascripts/preferences/panes/account/index.ts
rename to app/assets/javascripts/components/Preferences/panes/account/index.ts
diff --git a/app/assets/javascripts/preferences/panes/account/offlineSubscription.tsx b/app/assets/javascripts/components/Preferences/panes/account/offlineSubscription.tsx
similarity index 97%
rename from app/assets/javascripts/preferences/panes/account/offlineSubscription.tsx
rename to app/assets/javascripts/components/Preferences/panes/account/offlineSubscription.tsx
index d311b1ce4..2856be4e5 100644
--- a/app/assets/javascripts/preferences/panes/account/offlineSubscription.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/account/offlineSubscription.tsx
@@ -1,5 +1,5 @@
 import { FunctionalComponent } from 'preact';
-import { Subtitle } from '@/preferences/components';
+import { Subtitle } from '@/components/Preferences/components';
 import { DecoratedInput } from '@/components/DecoratedInput';
 import { Button } from '@/components/Button';
 import { JSXInternal } from '@node_modules/preact/src/jsx';
@@ -10,7 +10,7 @@ import { AppState } from '@/ui_models/app_state';
 import { observer } from 'mobx-react-lite';
 import { STRING_REMOVE_OFFLINE_KEY_CONFIRMATION } from '@/strings';
 import { ButtonType, ClientDisplayableError } from '@standardnotes/snjs';
-import { HorizontalSeparator } from '@/components/shared/HorizontalSeparator';
+import { HorizontalSeparator } from '@/components/Shared/HorizontalSeparator';
 
 interface IProps {
   application: WebApplication;
diff --git a/app/assets/javascripts/preferences/panes/account/subscription/NoSubscription.tsx b/app/assets/javascripts/components/Preferences/panes/account/subscription/NoSubscription.tsx
similarity index 91%
rename from app/assets/javascripts/preferences/panes/account/subscription/NoSubscription.tsx
rename to app/assets/javascripts/components/Preferences/panes/account/subscription/NoSubscription.tsx
index 9c2baa668..65aa4f41c 100644
--- a/app/assets/javascripts/preferences/panes/account/subscription/NoSubscription.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/account/subscription/NoSubscription.tsx
@@ -1,9 +1,9 @@
 import { FunctionalComponent } from 'preact';
-import { LinkButton, Text } from '@/preferences/components';
+import { LinkButton, Text } from '@/components/Preferences/components';
 import { Button } from '@/components/Button';
 import { WebApplication } from '@/ui_models/application';
 import { useState } from 'preact/hooks';
-import { loadPurchaseFlowUrl } from '@/purchaseFlow/PurchaseFlowWrapper';
+import { loadPurchaseFlowUrl } from '@/components/PurchaseFlow/PurchaseFlowWrapper';
 
 export const NoSubscription: FunctionalComponent<{
   application: WebApplication;
diff --git a/app/assets/javascripts/preferences/panes/account/subscription/Subscription.tsx b/app/assets/javascripts/components/Preferences/panes/account/subscription/Subscription.tsx
similarity index 96%
rename from app/assets/javascripts/preferences/panes/account/subscription/Subscription.tsx
rename to app/assets/javascripts/components/Preferences/panes/account/subscription/Subscription.tsx
index b86aa4c7f..21758701a 100644
--- a/app/assets/javascripts/preferences/panes/account/subscription/Subscription.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/account/subscription/Subscription.tsx
@@ -2,7 +2,7 @@ import {
   PreferencesGroup,
   PreferencesSegment,
   Title,
-} from '@/preferences/components';
+} from '@/components/Preferences/components';
 import { WebApplication } from '@/ui_models/application';
 import { SubscriptionInformation } from './SubscriptionInformation';
 import { NoSubscription } from './NoSubscription';
diff --git a/app/assets/javascripts/preferences/panes/account/subscription/SubscriptionInformation.tsx b/app/assets/javascripts/components/Preferences/panes/account/subscription/SubscriptionInformation.tsx
similarity index 94%
rename from app/assets/javascripts/preferences/panes/account/subscription/SubscriptionInformation.tsx
rename to app/assets/javascripts/components/Preferences/panes/account/subscription/SubscriptionInformation.tsx
index 2c36d2b06..8bce383bf 100644
--- a/app/assets/javascripts/preferences/panes/account/subscription/SubscriptionInformation.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/account/subscription/SubscriptionInformation.tsx
@@ -1,6 +1,6 @@
 import { observer } from 'mobx-react-lite';
-import { SubscriptionState } from '../../../../ui_models/app_state/subscription_state';
-import { Text } from '@/preferences/components';
+import { SubscriptionState } from '../../../../../ui_models/app_state/subscription_state';
+import { Text } from '@/components/Preferences/components';
 import { Button } from '@/components/Button';
 import { WebApplication } from '@/ui_models/application';
 import { openSubscriptionDashboard } from '@/hooks/manageSubscription';
diff --git a/app/assets/javascripts/preferences/panes/backups-segments/DataBackups.tsx b/app/assets/javascripts/components/Preferences/panes/backups-segments/DataBackups.tsx
similarity index 100%
rename from app/assets/javascripts/preferences/panes/backups-segments/DataBackups.tsx
rename to app/assets/javascripts/components/Preferences/panes/backups-segments/DataBackups.tsx
diff --git a/app/assets/javascripts/preferences/panes/backups-segments/EmailBackups.tsx b/app/assets/javascripts/components/Preferences/panes/backups-segments/EmailBackups.tsx
similarity index 98%
rename from app/assets/javascripts/preferences/panes/backups-segments/EmailBackups.tsx
rename to app/assets/javascripts/components/Preferences/panes/backups-segments/EmailBackups.tsx
index edc124389..99e664eb3 100644
--- a/app/assets/javascripts/preferences/panes/backups-segments/EmailBackups.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/backups-segments/EmailBackups.tsx
@@ -16,7 +16,7 @@ import {
 import { EmailBackupFrequency, SettingName } from '@standardnotes/settings';
 import { Dropdown, DropdownItem } from '@/components/Dropdown';
 import { Switch } from '@/components/Switch';
-import { HorizontalSeparator } from '@/components/shared/HorizontalSeparator';
+import { HorizontalSeparator } from '@/components/Shared/HorizontalSeparator';
 import { FeatureIdentifier } from '@standardnotes/features';
 import { FeatureStatus } from '@standardnotes/snjs';
 
diff --git a/app/assets/javascripts/preferences/panes/backups-segments/cloud-backups/CloudBackupProvider.tsx b/app/assets/javascripts/components/Preferences/panes/backups-segments/cloud-backups/CloudBackupProvider.tsx
similarity index 99%
rename from app/assets/javascripts/preferences/panes/backups-segments/cloud-backups/CloudBackupProvider.tsx
rename to app/assets/javascripts/components/Preferences/panes/backups-segments/cloud-backups/CloudBackupProvider.tsx
index 6480c1b54..09070c520 100644
--- a/app/assets/javascripts/preferences/panes/backups-segments/cloud-backups/CloudBackupProvider.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/backups-segments/cloud-backups/CloudBackupProvider.tsx
@@ -10,7 +10,7 @@ import {
 import { WebApplication } from '@/ui_models/application';
 import { Button } from '@/components/Button';
 import { isDev, openInNewTab } from '@/utils';
-import { Subtitle } from '@/preferences/components';
+import { Subtitle } from '@/components/Preferences/components';
 import { KeyboardKey } from '@Services/ioService';
 import { FunctionComponent } from 'preact';
 
diff --git a/app/assets/javascripts/preferences/panes/backups-segments/cloud-backups/index.tsx b/app/assets/javascripts/components/Preferences/panes/backups-segments/cloud-backups/index.tsx
similarity index 98%
rename from app/assets/javascripts/preferences/panes/backups-segments/cloud-backups/index.tsx
rename to app/assets/javascripts/components/Preferences/panes/backups-segments/cloud-backups/index.tsx
index 7ac3e6fd7..dbc6115d2 100644
--- a/app/assets/javascripts/preferences/panes/backups-segments/cloud-backups/index.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/backups-segments/cloud-backups/index.tsx
@@ -8,8 +8,8 @@ import {
   Subtitle,
   Text,
   Title,
-} from '@/preferences/components';
-import { HorizontalSeparator } from '@/components/shared/HorizontalSeparator';
+} from '@/components/Preferences/components';
+import { HorizontalSeparator } from '@/components/Shared/HorizontalSeparator';
 import { FeatureIdentifier } from '@standardnotes/features';
 import { FeatureStatus } from '@standardnotes/snjs';
 import { FunctionComponent } from 'preact';
diff --git a/app/assets/javascripts/preferences/panes/backups-segments/index.ts b/app/assets/javascripts/components/Preferences/panes/backups-segments/index.ts
similarity index 100%
rename from app/assets/javascripts/preferences/panes/backups-segments/index.ts
rename to app/assets/javascripts/components/Preferences/panes/backups-segments/index.ts
diff --git a/app/assets/javascripts/preferences/panes/extensions-segments/ConfirmCustomExtension.tsx b/app/assets/javascripts/components/Preferences/panes/extensions-segments/ConfirmCustomExtension.tsx
similarity index 75%
rename from app/assets/javascripts/preferences/panes/extensions-segments/ConfirmCustomExtension.tsx
rename to app/assets/javascripts/components/Preferences/panes/extensions-segments/ConfirmCustomExtension.tsx
index 9fa11293c..4191e6e39 100644
--- a/app/assets/javascripts/preferences/panes/extensions-segments/ConfirmCustomExtension.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/extensions-segments/ConfirmCustomExtension.tsx
@@ -1,42 +1,36 @@
 import { displayStringForContentType, SNComponent } from '@standardnotes/snjs';
 import { Button } from '@/components/Button';
 import { FunctionComponent } from 'preact';
-import {
-  Title,
-  Text,
-  Subtitle,
-  PreferencesSegment,
-} from '../../components';
+import { Title, Text, Subtitle, PreferencesSegment } from '../../components';
 
 export const ConfirmCustomExtension: FunctionComponent<{
-  component: SNComponent,
-  callback: (confirmed: boolean) => void
+  component: SNComponent;
+  callback: (confirmed: boolean) => void;
 }> = ({ component, callback }) => {
-
   const fields = [
     {
       label: 'Name',
-      value: component.package_info.name
+      value: component.package_info.name,
     },
     {
       label: 'Description',
-      value: component.package_info.description
+      value: component.package_info.description,
     },
     {
       label: 'Version',
-      value: component.package_info.version
+      value: component.package_info.version,
     },
     {
       label: 'Hosted URL',
-      value: component.thirdPartyPackageInfo.url
+      value: component.thirdPartyPackageInfo.url,
     },
     {
       label: 'Download URL',
-      value: component.package_info.download_url
+      value: component.package_info.download_url,
     },
     {
       label: 'Extension Type',
-      value: displayStringForContentType(component.content_type)
+      value: displayStringForContentType(component.content_type),
     },
   ];
 
@@ -45,7 +39,9 @@ export const ConfirmCustomExtension: FunctionComponent<{
       <Title>Confirm Extension</Title>
 
       {fields.map((field) => {
-        if (!field.value) { return undefined; }
+        if (!field.value) {
+          return undefined;
+        }
         return (
           <>
             <Subtitle>{field.label}</Subtitle>
@@ -74,7 +70,6 @@ export const ConfirmCustomExtension: FunctionComponent<{
           onClick={() => callback(true)}
         />
       </div>
-
     </PreferencesSegment>
   );
 };
diff --git a/app/assets/javascripts/preferences/panes/extensions-segments/ExtensionItem.tsx b/app/assets/javascripts/components/Preferences/panes/extensions-segments/ExtensionItem.tsx
similarity index 98%
rename from app/assets/javascripts/preferences/panes/extensions-segments/ExtensionItem.tsx
rename to app/assets/javascripts/components/Preferences/panes/extensions-segments/ExtensionItem.tsx
index 7e231b761..8ecfb676b 100644
--- a/app/assets/javascripts/preferences/panes/extensions-segments/ExtensionItem.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/extensions-segments/ExtensionItem.tsx
@@ -4,7 +4,7 @@ import {
   PreferencesSegment,
   SubtitleLight,
   Title,
-} from '@/preferences/components';
+} from '@/components/Preferences/components';
 import { Switch } from '@/components/Switch';
 import { WebApplication } from '@/ui_models/application';
 import { useState } from 'preact/hooks';
diff --git a/app/assets/javascripts/preferences/panes/extensions-segments/ExtensionsLatestVersions.ts b/app/assets/javascripts/components/Preferences/panes/extensions-segments/ExtensionsLatestVersions.ts
similarity index 100%
rename from app/assets/javascripts/preferences/panes/extensions-segments/ExtensionsLatestVersions.ts
rename to app/assets/javascripts/components/Preferences/panes/extensions-segments/ExtensionsLatestVersions.ts
diff --git a/app/assets/javascripts/preferences/panes/extensions-segments/RenameExtension.tsx b/app/assets/javascripts/components/Preferences/panes/extensions-segments/RenameExtension.tsx
similarity index 68%
rename from app/assets/javascripts/preferences/panes/extensions-segments/RenameExtension.tsx
rename to app/assets/javascripts/components/Preferences/panes/extensions-segments/RenameExtension.tsx
index 7356f7ad4..a631a7630 100644
--- a/app/assets/javascripts/preferences/panes/extensions-segments/RenameExtension.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/extensions-segments/RenameExtension.tsx
@@ -1,11 +1,13 @@
-import { FunctionComponent } from "preact";
-import { useState, useRef, useEffect } from "preact/hooks";
+import { FunctionComponent } from 'preact';
+import { useState, useRef, useEffect } from 'preact/hooks';
 
 export const RenameExtension: FunctionComponent<{
-  extensionName: string, changeName: (newName: string) => void
+  extensionName: string;
+  changeName: (newName: string) => void;
 }> = ({ extensionName, changeName }) => {
   const [isRenaming, setIsRenaming] = useState(false);
-  const [newExtensionName, setNewExtensionName] = useState<string>(extensionName);
+  const [newExtensionName, setNewExtensionName] =
+    useState<string>(extensionName);
 
   const inputRef = useRef<HTMLInputElement>(null);
 
@@ -38,21 +40,30 @@ export const RenameExtension: FunctionComponent<{
       <input
         ref={inputRef}
         disabled={!isRenaming}
-        autocomplete='off'
+        autocomplete="off"
         className="flex-grow text-base font-bold no-border bg-default px-0 color-text"
         type="text"
         value={newExtensionName}
-        onChange={({ target: input }) => setNewExtensionName((input as HTMLInputElement)?.value)}
+        onChange={({ target: input }) =>
+          setNewExtensionName((input as HTMLInputElement)?.value)
+        }
       />
       <div className="min-w-3" />
-      {isRenaming ?
+      {isRenaming ? (
         <>
-          <a className="pt-1 cursor-pointer" onClick={confirmRename}>Confirm</a>
+          <a className="pt-1 cursor-pointer" onClick={confirmRename}>
+            Confirm
+          </a>
           <div className="min-w-3" />
-          <a className="pt-1 cursor-pointer" onClick={cancelRename}>Cancel</a>
-        </> :
-        <a className="pt-1 cursor-pointer" onClick={startRenaming}>Rename</a>
-      }
+          <a className="pt-1 cursor-pointer" onClick={cancelRename}>
+            Cancel
+          </a>
+        </>
+      ) : (
+        <a className="pt-1 cursor-pointer" onClick={startRenaming}>
+          Rename
+        </a>
+      )}
     </div>
   );
 };
diff --git a/app/assets/javascripts/preferences/panes/extensions-segments/index.ts b/app/assets/javascripts/components/Preferences/panes/extensions-segments/index.ts
similarity index 100%
rename from app/assets/javascripts/preferences/panes/extensions-segments/index.ts
rename to app/assets/javascripts/components/Preferences/panes/extensions-segments/index.ts
diff --git a/app/assets/javascripts/preferences/panes/general-segments/Defaults.tsx b/app/assets/javascripts/components/Preferences/panes/general-segments/Defaults.tsx
similarity index 97%
rename from app/assets/javascripts/preferences/panes/general-segments/Defaults.tsx
rename to app/assets/javascripts/components/Preferences/panes/general-segments/Defaults.tsx
index 3b108879e..0cab2a48b 100644
--- a/app/assets/javascripts/preferences/panes/general-segments/Defaults.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/general-segments/Defaults.tsx
@@ -6,7 +6,7 @@ import {
   Subtitle,
   Text,
   Title,
-} from '@/preferences/components';
+} from '@/components/Preferences/components';
 import { WebApplication } from '@/ui_models/application';
 import {
   ComponentArea,
@@ -15,7 +15,7 @@ import {
 } from '@standardnotes/snjs';
 import { FunctionComponent } from 'preact';
 import { useEffect, useState } from 'preact/hooks';
-import { HorizontalSeparator } from '@/components/shared/HorizontalSeparator';
+import { HorizontalSeparator } from '@/components/Shared/HorizontalSeparator';
 import { Switch } from '@/components/Switch';
 
 type Props = {
diff --git a/app/assets/javascripts/preferences/panes/general-segments/Labs.tsx b/app/assets/javascripts/components/Preferences/panes/general-segments/Labs.tsx
similarity index 96%
rename from app/assets/javascripts/preferences/panes/general-segments/Labs.tsx
rename to app/assets/javascripts/components/Preferences/panes/general-segments/Labs.tsx
index 7c023168e..9c36f06ba 100644
--- a/app/assets/javascripts/preferences/panes/general-segments/Labs.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/general-segments/Labs.tsx
@@ -6,13 +6,13 @@ import {
   Subtitle,
   Text,
   Title,
-} from '@/preferences/components';
+} from '@/components/Preferences/components';
 import { WebApplication } from '@/ui_models/application';
 import { FeatureIdentifier, FeatureStatus } from '@standardnotes/snjs';
 import { FunctionComponent } from 'preact';
 import { useCallback, useEffect, useState } from 'preact/hooks';
 import { usePremiumModal } from '@/components/Premium';
-import { HorizontalSeparator } from '@/components/shared/HorizontalSeparator';
+import { HorizontalSeparator } from '@/components/Shared/HorizontalSeparator';
 
 type ExperimentalFeatureItem = {
   identifier: FeatureIdentifier;
diff --git a/app/assets/javascripts/preferences/panes/general-segments/Tools.tsx b/app/assets/javascripts/components/Preferences/panes/general-segments/Tools.tsx
similarity index 95%
rename from app/assets/javascripts/preferences/panes/general-segments/Tools.tsx
rename to app/assets/javascripts/components/Preferences/panes/general-segments/Tools.tsx
index 294a383ff..8260ce333 100644
--- a/app/assets/javascripts/preferences/panes/general-segments/Tools.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/general-segments/Tools.tsx
@@ -1,4 +1,4 @@
-import { HorizontalSeparator } from '@/components/shared/HorizontalSeparator';
+import { HorizontalSeparator } from '@/components/Shared/HorizontalSeparator';
 import { Switch } from '@/components/Switch';
 import {
   PreferencesGroup,
@@ -6,7 +6,7 @@ import {
   Subtitle,
   Text,
   Title,
-} from '@/preferences/components';
+} from '@/components/Preferences/components';
 import { WebApplication } from '@/ui_models/application';
 import { PrefKey } from '@standardnotes/snjs';
 import { observer } from 'mobx-react-lite';
diff --git a/app/assets/javascripts/preferences/panes/general-segments/index.ts b/app/assets/javascripts/components/Preferences/panes/general-segments/index.ts
similarity index 100%
rename from app/assets/javascripts/preferences/panes/general-segments/index.ts
rename to app/assets/javascripts/components/Preferences/panes/general-segments/index.ts
diff --git a/app/assets/javascripts/preferences/panes/index.ts b/app/assets/javascripts/components/Preferences/panes/index.ts
similarity index 100%
rename from app/assets/javascripts/preferences/panes/index.ts
rename to app/assets/javascripts/components/Preferences/panes/index.ts
diff --git a/app/assets/javascripts/preferences/panes/listed/BlogItem.tsx b/app/assets/javascripts/components/Preferences/panes/listed/BlogItem.tsx
similarity index 91%
rename from app/assets/javascripts/preferences/panes/listed/BlogItem.tsx
rename to app/assets/javascripts/components/Preferences/panes/listed/BlogItem.tsx
index ec0591201..32f6f5bb2 100644
--- a/app/assets/javascripts/preferences/panes/listed/BlogItem.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/listed/BlogItem.tsx
@@ -1,5 +1,5 @@
-import { HorizontalSeparator } from '@/components/shared/HorizontalSeparator';
-import { LinkButton, Subtitle } from '@/preferences/components';
+import { HorizontalSeparator } from '@/components/Shared/HorizontalSeparator';
+import { LinkButton, Subtitle } from '@/components/Preferences/components';
 import { WebApplication } from '@/ui_models/application';
 import { ListedAccount, ListedAccountInfo } from '@standardnotes/snjs';
 import { FunctionalComponent } from 'preact';
diff --git a/app/assets/javascripts/components/Preferences/panes/security-segments/Encryption.tsx b/app/assets/javascripts/components/Preferences/panes/security-segments/Encryption.tsx
new file mode 100644
index 000000000..aff3e5c8c
--- /dev/null
+++ b/app/assets/javascripts/components/Preferences/panes/security-segments/Encryption.tsx
@@ -0,0 +1,97 @@
+import { DecoratedInput } from '@/components/DecoratedInput';
+import { Icon } from '@/components/Icon';
+import {
+  STRING_E2E_ENABLED,
+  STRING_ENC_NOT_ENABLED,
+  STRING_LOCAL_ENC_ENABLED,
+} from '@/strings';
+import { AppState } from '@/ui_models/app_state';
+import { observer } from 'mobx-react-lite';
+import { FunctionComponent } from 'preact';
+import {
+  PreferencesGroup,
+  PreferencesSegment,
+  Text,
+  Title,
+} from '../../components';
+
+const formatCount = (count: number, itemType: string) =>
+  `${count} / ${count} ${itemType}`;
+
+const EncryptionEnabled: FunctionComponent<{ appState: AppState }> = observer(
+  ({ appState }) => {
+    const count = appState.accountMenu.structuredNotesAndTagsCount;
+    const notes = formatCount(count.notes, 'notes');
+    const tags = formatCount(count.tags, 'tags');
+    const archived = formatCount(count.archived, 'archived notes');
+    const deleted = formatCount(count.deleted, 'trashed notes');
+
+    const checkIcon = (
+      <Icon className="success min-w-4 min-h-4" type="check-bold" />
+    );
+    const noteIcon = <Icon type="rich-text" className="min-w-5 min-h-5" />;
+    const tagIcon = <Icon type="hashtag" className="min-w-5 min-h-5" />;
+    const archiveIcon = <Icon type="archive" className="min-w-5 min-h-5" />;
+    const trashIcon = <Icon type="trash" className="min-w-5 min-h-5" />;
+    return (
+      <>
+        <div className="flex flex-row pb-1 pt-1.5">
+          <DecoratedInput
+            disabled={true}
+            text={notes}
+            right={[checkIcon]}
+            left={[noteIcon]}
+          />
+          <div className="min-w-3" />
+          <DecoratedInput
+            disabled={true}
+            text={tags}
+            right={[checkIcon]}
+            left={[tagIcon]}
+          />
+        </div>
+        <div className="flex flex-row">
+          <DecoratedInput
+            disabled={true}
+            text={archived}
+            right={[checkIcon]}
+            left={[archiveIcon]}
+          />
+          <div className="min-w-3" />
+          <DecoratedInput
+            disabled={true}
+            text={deleted}
+            right={[checkIcon]}
+            left={[trashIcon]}
+          />
+        </div>
+      </>
+    );
+  }
+);
+
+export const Encryption: FunctionComponent<{ appState: AppState }> = observer(
+  ({ appState }) => {
+    const app = appState.application;
+    const hasUser = app.hasAccount();
+    const hasPasscode = app.hasPasscode();
+    const isEncryptionEnabled = app.isEncryptionAvailable();
+
+    const encryptionStatusString = hasUser
+      ? STRING_E2E_ENABLED
+      : hasPasscode
+      ? STRING_LOCAL_ENC_ENABLED
+      : STRING_ENC_NOT_ENABLED;
+
+    return (
+      <PreferencesGroup>
+        <PreferencesSegment>
+          <Title>Encryption</Title>
+          <Text>{encryptionStatusString}</Text>
+
+          {isEncryptionEnabled && <EncryptionEnabled appState={appState} />}
+        </PreferencesSegment>
+      </PreferencesGroup>
+    );
+  }
+);
diff --git a/app/assets/javascripts/preferences/panes/security-segments/PasscodeLock.tsx b/app/assets/javascripts/components/Preferences/panes/security-segments/PasscodeLock.tsx
similarity index 69%
rename from app/assets/javascripts/preferences/panes/security-segments/PasscodeLock.tsx
rename to app/assets/javascripts/components/Preferences/panes/security-segments/PasscodeLock.tsx
index fde974e4a..18a962138 100644
--- a/app/assets/javascripts/preferences/panes/security-segments/PasscodeLock.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/security-segments/PasscodeLock.tsx
@@ -1,9 +1,12 @@
 import {
   STRING_CONFIRM_APP_QUIT_DURING_PASSCODE_CHANGE,
-  STRING_CONFIRM_APP_QUIT_DURING_PASSCODE_REMOVAL, STRING_E2E_ENABLED, STRING_ENC_NOT_ENABLED, STRING_LOCAL_ENC_ENABLED,
+  STRING_CONFIRM_APP_QUIT_DURING_PASSCODE_REMOVAL,
+  STRING_E2E_ENABLED,
+  STRING_ENC_NOT_ENABLED,
+  STRING_LOCAL_ENC_ENABLED,
   STRING_NON_MATCHING_PASSCODES,
   StringUtils,
-  Strings
+  Strings,
 } from '@/strings';
 import { WebApplication } from '@/ui_models/application';
 import { preventRefreshing } from '@/utils';
@@ -15,7 +18,12 @@ import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
 import { ApplicationEvent } from '@standardnotes/snjs';
 import { observer } from 'mobx-react-lite';
 import { AppState } from '@/ui_models/app_state';
-import { PreferencesSegment, Title, Text, PreferencesGroup } from '@/preferences/components';
+import {
+  PreferencesSegment,
+  Title,
+  Text,
+  PreferencesGroup,
+} from '@/components/Preferences/components';
 import { Button } from '@/components/Button';
 
 type Props = {
@@ -23,23 +31,31 @@ type Props = {
   appState: AppState;
 };
 
-export const PasscodeLock = observer(({
-  application,
-  appState,
-}: Props) => {
+export const PasscodeLock = observer(({ application, appState }: Props) => {
   const keyStorageInfo = StringUtils.keyStorageInfo(application);
-  const passcodeAutoLockOptions = application.getAutolockService().getAutoLockIntervalOptions();
+  const passcodeAutoLockOptions = application
+    .getAutolockService()
+    .getAutoLockIntervalOptions();
 
-  const { setIsEncryptionEnabled, setIsBackupEncrypted, setEncryptionStatusString } = appState.accountMenu;
+  const {
+    setIsEncryptionEnabled,
+    setIsBackupEncrypted,
+    setEncryptionStatusString,
+  } = appState.accountMenu;
 
   const passcodeInputRef = useRef<HTMLInputElement>(null);
 
   const [passcode, setPasscode] = useState<string | undefined>(undefined);
-  const [passcodeConfirmation, setPasscodeConfirmation] = useState<string | undefined>(undefined);
-  const [selectedAutoLockInterval, setSelectedAutoLockInterval] = useState<unknown>(null);
+  const [passcodeConfirmation, setPasscodeConfirmation] = useState<
+    string | undefined
+  >(undefined);
+  const [selectedAutoLockInterval, setSelectedAutoLockInterval] =
+    useState<unknown>(null);
   const [isPasscodeFocused, setIsPasscodeFocused] = useState(false);
   const [showPasscodeForm, setShowPasscodeForm] = useState(false);
-  const [canAddPasscode, setCanAddPasscode] = useState(!application.isEphemeralSession());
+  const [canAddPasscode, setCanAddPasscode] = useState(
+    !application.isEphemeralSession()
+  );
   const [hasPasscode, setHasPasscode] = useState(application.hasPasscode());
 
   const handleAddPassCode = () => {
@@ -52,7 +68,9 @@ export const PasscodeLock = observer(({
   };
 
   const reloadAutoLockInterval = useCallback(async () => {
-    const interval = await application.getAutolockService().getAutoLockInterval();
+    const interval = await application
+      .getAutolockService()
+      .getAutoLockInterval();
     setSelectedAutoLockInterval(interval);
   }, [application]);
 
@@ -67,13 +85,18 @@ export const PasscodeLock = observer(({
     const encryptionStatusString = hasUser
       ? STRING_E2E_ENABLED
       : hasPasscode
-        ? STRING_LOCAL_ENC_ENABLED
-        : STRING_ENC_NOT_ENABLED;
+      ? STRING_LOCAL_ENC_ENABLED
+      : STRING_ENC_NOT_ENABLED;
 
     setEncryptionStatusString(encryptionStatusString);
     setIsEncryptionEnabled(encryptionEnabled);
     setIsBackupEncrypted(encryptionEnabled);
-  }, [application, setEncryptionStatusString, setIsBackupEncrypted, setIsEncryptionEnabled]);
+  }, [
+    application,
+    setEncryptionStatusString,
+    setIsBackupEncrypted,
+    setIsEncryptionEnabled,
+  ]);
 
   const selectAutoLockInterval = async (interval: number) => {
     if (!(await application.authorizeAutolockIntervalChange())) {
@@ -88,9 +111,7 @@ export const PasscodeLock = observer(({
       STRING_CONFIRM_APP_QUIT_DURING_PASSCODE_REMOVAL,
       async () => {
         if (await application.removePasscode()) {
-          await application
-            .getAutolockService()
-            .deleteAutolockPreference();
+          await application.getAutolockService().deleteAutolockPreference();
           await reloadAutoLockInterval();
           refreshEncryptionStatus();
         }
@@ -103,12 +124,18 @@ export const PasscodeLock = observer(({
     setPasscode(value);
   };
 
-  const handleConfirmPasscodeChange = (event: TargetedEvent<HTMLInputElement>) => {
+  const handleConfirmPasscodeChange = (
+    event: TargetedEvent<HTMLInputElement>
+  ) => {
     const { value } = event.target as HTMLInputElement;
     setPasscodeConfirmation(value);
   };
 
-  const submitPasscodeForm = async (event: TargetedEvent<HTMLFormElement> | TargetedMouseEvent<HTMLButtonElement>) => {
+  const submitPasscodeForm = async (
+    event:
+      | TargetedEvent<HTMLFormElement>
+      | TargetedMouseEvent<HTMLButtonElement>
+  ) => {
     event.preventDefault();
 
     if (!passcode || passcode.length === 0) {
@@ -119,7 +146,7 @@ export const PasscodeLock = observer(({
 
     if (passcode !== passcodeConfirmation) {
       await alertDialog({
-        text: STRING_NON_MATCHING_PASSCODES
+        text: STRING_NON_MATCHING_PASSCODES,
       });
       setIsPasscodeFocused(true);
       return;
@@ -186,27 +213,28 @@ export const PasscodeLock = observer(({
 
           {!hasPasscode && canAddPasscode && (
             <>
-
               <Text className="mb-3">
-                Add a passcode to lock the application and
-                encrypt on-device key storage.
+                Add a passcode to lock the application and encrypt on-device key
+                storage.
               </Text>
 
-              {keyStorageInfo && (
-                <Text className="mb-3">{keyStorageInfo}</Text>
-              )}
+              {keyStorageInfo && <Text className="mb-3">{keyStorageInfo}</Text>}
 
               {!showPasscodeForm && (
-                <Button label="Add Passcode" onClick={handleAddPassCode} type="primary" />
+                <Button
+                  label="Add Passcode"
+                  onClick={handleAddPassCode}
+                  type="primary"
+                />
               )}
-
             </>
           )}
 
           {!hasPasscode && !canAddPasscode && (
             <Text>
-              Adding a passcode is not supported in temporary sessions. Please sign
-              out, then sign back in with the "Stay signed in" option checked.
+              Adding a passcode is not supported in temporary sessions. Please
+              sign out, then sign back in with the "Stay signed in" option
+              checked.
             </Text>
           )}
 
@@ -229,8 +257,17 @@ export const PasscodeLock = observer(({
                 placeholder="Confirm Passcode"
               />
               <div className="min-h-2" />
-              <Button type="primary" onClick={submitPasscodeForm} label="Set Passcode" className="mr-3" />
-              <Button type="normal" onClick={() => setShowPasscodeForm(false)} label="Cancel" />
+              <Button
+                type="primary"
+                onClick={submitPasscodeForm}
+                label="Set Passcode"
+                className="mr-3"
+              />
+              <Button
+                type="normal"
+                onClick={() => setShowPasscodeForm(false)}
+                label="Cancel"
+              />
             </form>
           )}
 
@@ -238,11 +275,20 @@ export const PasscodeLock = observer(({
             <>
               <Text>Passcode lock is enabled.</Text>
               <div className="flex flex-row mt-3">
-                <Button type="normal" label="Change Passcode" onClick={changePasscodePressed} className="mr-3" />
-                <Button type="danger" label="Remove Passcode" onClick={removePasscodePressed} />
+                <Button
+                  type="normal"
+                  label="Change Passcode"
+                  onClick={changePasscodePressed}
+                  className="mr-3"
+                />
+                <Button
+                  type="danger"
+                  label="Remove Passcode"
+                  onClick={removePasscodePressed}
+                />
               </div>
-            </>)}
-
+            </>
+          )}
         </PreferencesSegment>
       </PreferencesGroup>
 
@@ -252,19 +298,23 @@ export const PasscodeLock = observer(({
           <PreferencesGroup>
             <PreferencesSegment>
               <Title>Autolock</Title>
-              <Text className="mb-3">The autolock timer begins when the window or tab loses focus.</Text>
+              <Text className="mb-3">
+                The autolock timer begins when the window or tab loses focus.
+              </Text>
               <div className="flex flex-row items-center">
-                {passcodeAutoLockOptions.map(option => {
+                {passcodeAutoLockOptions.map((option) => {
                   return (
                     <a
-                      className={`sk-a info mr-3 ${option.value === selectedAutoLockInterval ? 'boxed' : ''}`}
-                      onClick={() => selectAutoLockInterval(option.value)}>
+                      className={`sk-a info mr-3 ${
+                        option.value === selectedAutoLockInterval ? 'boxed' : ''
+                      }`}
+                      onClick={() => selectAutoLockInterval(option.value)}
+                    >
                       {option.label}
                     </a>
                   );
                 })}
               </div>
-
             </PreferencesSegment>
           </PreferencesGroup>
         </>
diff --git a/app/assets/javascripts/preferences/panes/security-segments/Protections.tsx b/app/assets/javascripts/components/Preferences/panes/security-segments/Protections.tsx
similarity index 98%
rename from app/assets/javascripts/preferences/panes/security-segments/Protections.tsx
rename to app/assets/javascripts/components/Preferences/panes/security-segments/Protections.tsx
index f0e564274..02358ca47 100644
--- a/app/assets/javascripts/preferences/panes/security-segments/Protections.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/security-segments/Protections.tsx
@@ -9,7 +9,7 @@ import {
   PreferencesSegment,
   Title,
   Text,
-} from '@/preferences/components';
+} from '@/components/Preferences/components';
 import { Button } from '@/components/Button';
 
 type Props = {
diff --git a/app/assets/javascripts/preferences/panes/security-segments/index.ts b/app/assets/javascripts/components/Preferences/panes/security-segments/index.ts
similarity index 100%
rename from app/assets/javascripts/preferences/panes/security-segments/index.ts
rename to app/assets/javascripts/components/Preferences/panes/security-segments/index.ts
diff --git a/app/assets/javascripts/preferences/panes/two-factor-auth/AuthAppInfoPopup.tsx b/app/assets/javascripts/components/Preferences/panes/two-factor-auth/AuthAppInfoPopup.tsx
similarity index 100%
rename from app/assets/javascripts/preferences/panes/two-factor-auth/AuthAppInfoPopup.tsx
rename to app/assets/javascripts/components/Preferences/panes/two-factor-auth/AuthAppInfoPopup.tsx
diff --git a/app/assets/javascripts/preferences/panes/two-factor-auth/Bullet.tsx b/app/assets/javascripts/components/Preferences/panes/two-factor-auth/Bullet.tsx
similarity index 59%
rename from app/assets/javascripts/preferences/panes/two-factor-auth/Bullet.tsx
rename to app/assets/javascripts/components/Preferences/panes/two-factor-auth/Bullet.tsx
index 311e80517..830d16887 100644
--- a/app/assets/javascripts/preferences/panes/two-factor-auth/Bullet.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/two-factor-auth/Bullet.tsx
@@ -3,5 +3,7 @@ import { FunctionComponent } from 'preact';
 export const Bullet: FunctionComponent<{ className?: string }> = ({
   className = '',
 }) => (
-  <div className={`min-w-1 min-h-1 rounded-full bg-inverted-default ${className} mr-2`} />
+  <div
+    className={`min-w-1 min-h-1 rounded-full bg-inverted-default ${className} mr-2`}
+  />
 );
diff --git a/app/assets/javascripts/preferences/panes/two-factor-auth/CopyButton.tsx b/app/assets/javascripts/components/Preferences/panes/two-factor-auth/CopyButton.tsx
similarity index 89%
rename from app/assets/javascripts/preferences/panes/two-factor-auth/CopyButton.tsx
rename to app/assets/javascripts/components/Preferences/panes/two-factor-auth/CopyButton.tsx
index b3d37d929..3f129e9c7 100644
--- a/app/assets/javascripts/preferences/panes/two-factor-auth/CopyButton.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/two-factor-auth/CopyButton.tsx
@@ -1,6 +1,6 @@
 import { FunctionComponent } from 'preact';
 
-import { IconButton } from '../../../components/IconButton';
+import { IconButton } from '../../../IconButton';
 
 import { useState } from 'preact/hooks';
 
diff --git a/app/assets/javascripts/preferences/panes/two-factor-auth/MfaProps.ts b/app/assets/javascripts/components/Preferences/panes/two-factor-auth/MfaProps.ts
similarity index 100%
rename from app/assets/javascripts/preferences/panes/two-factor-auth/MfaProps.ts
rename to app/assets/javascripts/components/Preferences/panes/two-factor-auth/MfaProps.ts
diff --git a/app/assets/javascripts/preferences/panes/two-factor-auth/SaveSecretKey.tsx b/app/assets/javascripts/components/Preferences/panes/two-factor-auth/SaveSecretKey.tsx
similarity index 98%
rename from app/assets/javascripts/preferences/panes/two-factor-auth/SaveSecretKey.tsx
rename to app/assets/javascripts/components/Preferences/panes/two-factor-auth/SaveSecretKey.tsx
index bfac17b1d..decf179b4 100644
--- a/app/assets/javascripts/preferences/panes/two-factor-auth/SaveSecretKey.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/two-factor-auth/SaveSecretKey.tsx
@@ -12,7 +12,7 @@ import {
   ModalDialogButtons,
   ModalDialogDescription,
   ModalDialogLabel,
-} from '@/components/shared/ModalDialog';
+} from '@/components/Shared/ModalDialog';
 
 export const SaveSecretKey: FunctionComponent<{
   activation: TwoFactorActivation;
diff --git a/app/assets/javascripts/preferences/panes/two-factor-auth/ScanQRCode.tsx b/app/assets/javascripts/components/Preferences/panes/two-factor-auth/ScanQRCode.tsx
similarity index 92%
rename from app/assets/javascripts/preferences/panes/two-factor-auth/ScanQRCode.tsx
rename to app/assets/javascripts/components/Preferences/panes/two-factor-auth/ScanQRCode.tsx
index f2ef66595..e9e953da9 100644
--- a/app/assets/javascripts/preferences/panes/two-factor-auth/ScanQRCode.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/two-factor-auth/ScanQRCode.tsx
@@ -12,7 +12,7 @@ import {
   ModalDialogButtons,
   ModalDialogDescription,
   ModalDialogLabel,
-} from '@/components/shared/ModalDialog';
+} from '@/components/Shared/ModalDialog';
 import { CopyButton } from './CopyButton';
 import { Bullet } from './Bullet';
 
@@ -26,7 +26,11 @@ export const ScanQRCode: FunctionComponent<{
       </ModalDialogLabel>
       <ModalDialogDescription className="h-33">
         <div className="w-25 h-25 flex items-center justify-center bg-info">
-          <QRCode className="border-neutral-contrast-bg border-solid border-2" value={act.qrCode} size={100} />
+          <QRCode
+            className="border-neutral-contrast-bg border-solid border-2"
+            value={act.qrCode}
+            size={100}
+          />
         </div>
         <div className="min-w-5" />
         <div className="flex-grow flex flex-col">
diff --git a/app/assets/javascripts/preferences/panes/two-factor-auth/TwoFactorActivation.ts b/app/assets/javascripts/components/Preferences/panes/two-factor-auth/TwoFactorActivation.ts
similarity index 100%
rename from app/assets/javascripts/preferences/panes/two-factor-auth/TwoFactorActivation.ts
rename to app/assets/javascripts/components/Preferences/panes/two-factor-auth/TwoFactorActivation.ts
diff --git a/app/assets/javascripts/preferences/panes/two-factor-auth/TwoFactorActivationView.tsx b/app/assets/javascripts/components/Preferences/panes/two-factor-auth/TwoFactorActivationView.tsx
similarity index 100%
rename from app/assets/javascripts/preferences/panes/two-factor-auth/TwoFactorActivationView.tsx
rename to app/assets/javascripts/components/Preferences/panes/two-factor-auth/TwoFactorActivationView.tsx
diff --git a/app/assets/javascripts/preferences/panes/two-factor-auth/TwoFactorAuth.ts b/app/assets/javascripts/components/Preferences/panes/two-factor-auth/TwoFactorAuth.ts
similarity index 97%
rename from app/assets/javascripts/preferences/panes/two-factor-auth/TwoFactorAuth.ts
rename to app/assets/javascripts/components/Preferences/panes/two-factor-auth/TwoFactorAuth.ts
index cd8c13084..854325e6b 100644
--- a/app/assets/javascripts/preferences/panes/two-factor-auth/TwoFactorAuth.ts
+++ b/app/assets/javascripts/components/Preferences/panes/two-factor-auth/TwoFactorAuth.ts
@@ -1,4 +1,4 @@
-import { MfaProvider, UserProvider } from '@/preferences/providers';
+import { MfaProvider, UserProvider } from '@/components/Preferences/providers';
 import { action, makeAutoObservable, observable } from 'mobx';
 import { TwoFactorActivation } from './TwoFactorActivation';
 
diff --git a/app/assets/javascripts/preferences/panes/two-factor-auth/TwoFactorAuthView.tsx b/app/assets/javascripts/components/Preferences/panes/two-factor-auth/TwoFactorAuthView.tsx
similarity index 94%
rename from app/assets/javascripts/preferences/panes/two-factor-auth/TwoFactorAuthView.tsx
rename to app/assets/javascripts/components/Preferences/panes/two-factor-auth/TwoFactorAuthView.tsx
index f0c53350a..46da3bc2e 100644
--- a/app/assets/javascripts/preferences/panes/two-factor-auth/TwoFactorAuthView.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/two-factor-auth/TwoFactorAuthView.tsx
@@ -5,7 +5,7 @@ import {
   PreferencesGroup,
   PreferencesSegment,
 } from '../../components';
-import { Switch } from '../../../components/Switch';
+import { Switch } from '../../../Switch';
 import { observer } from 'mobx-react-lite';
 import { is2FAActivation, is2FADisabled, TwoFactorAuth } from './TwoFactorAuth';
 import { TwoFactorActivationView } from './TwoFactorActivationView';
@@ -54,12 +54,8 @@ const TwoFactorSwitch: FunctionComponent<{ auth: TwoFactorAuth }> = observer(
     }
 
     return (
-      <Switch
-        checked={!is2FADisabled(auth.status)}
-        onChange={auth.toggle2FA}
-      />
+      <Switch checked={!is2FADisabled(auth.status)} onChange={auth.toggle2FA} />
     );
-
   }
 );
 
diff --git a/app/assets/javascripts/preferences/panes/two-factor-auth/TwoFactorSuccess.tsx b/app/assets/javascripts/components/Preferences/panes/two-factor-auth/TwoFactorSuccess.tsx
similarity index 90%
rename from app/assets/javascripts/preferences/panes/two-factor-auth/TwoFactorSuccess.tsx
rename to app/assets/javascripts/components/Preferences/panes/two-factor-auth/TwoFactorSuccess.tsx
index f2b5bd6e8..83eac38c3 100644
--- a/app/assets/javascripts/preferences/panes/two-factor-auth/TwoFactorSuccess.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/two-factor-auth/TwoFactorSuccess.tsx
@@ -3,8 +3,8 @@ import ModalDialog, {
   ModalDialogButtons,
   ModalDialogDescription,
   ModalDialogLabel,
-} from '@/components/shared/ModalDialog';
-import { Subtitle } from '@/preferences/components';
+} from '@/components/Shared/ModalDialog';
+import { Subtitle } from '@/components/Preferences/components';
 import { observer } from 'mobx-react-lite';
 import { FunctionComponent } from 'preact';
 import { TwoFactorActivation } from './TwoFactorActivation';
diff --git a/app/assets/javascripts/preferences/panes/two-factor-auth/Verification.tsx b/app/assets/javascripts/components/Preferences/panes/two-factor-auth/Verification.tsx
similarity index 98%
rename from app/assets/javascripts/preferences/panes/two-factor-auth/Verification.tsx
rename to app/assets/javascripts/components/Preferences/panes/two-factor-auth/Verification.tsx
index 7731bdbf8..0c48d12dc 100644
--- a/app/assets/javascripts/preferences/panes/two-factor-auth/Verification.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/two-factor-auth/Verification.tsx
@@ -9,7 +9,7 @@ import {
   ModalDialogButtons,
   ModalDialogDescription,
   ModalDialogLabel,
-} from '@/components/shared/ModalDialog';
+} from '@/components/Shared/ModalDialog';
 
 export const Verification: FunctionComponent<{
   activation: TwoFactorActivation;
diff --git a/app/assets/javascripts/preferences/panes/two-factor-auth/download-secret-key.tsx b/app/assets/javascripts/components/Preferences/panes/two-factor-auth/download-secret-key.tsx
similarity index 100%
rename from app/assets/javascripts/preferences/panes/two-factor-auth/download-secret-key.tsx
rename to app/assets/javascripts/components/Preferences/panes/two-factor-auth/download-secret-key.tsx
diff --git a/app/assets/javascripts/preferences/panes/two-factor-auth/index.tsx b/app/assets/javascripts/components/Preferences/panes/two-factor-auth/index.tsx
similarity index 100%
rename from app/assets/javascripts/preferences/panes/two-factor-auth/index.tsx
rename to app/assets/javascripts/components/Preferences/panes/two-factor-auth/index.tsx
diff --git a/app/assets/javascripts/preferences/providers/MfaProvider.ts b/app/assets/javascripts/components/Preferences/providers/MfaProvider.ts
similarity index 100%
rename from app/assets/javascripts/preferences/providers/MfaProvider.ts
rename to app/assets/javascripts/components/Preferences/providers/MfaProvider.ts
diff --git a/app/assets/javascripts/preferences/providers/UserProvider.ts b/app/assets/javascripts/components/Preferences/providers/UserProvider.ts
similarity index 100%
rename from app/assets/javascripts/preferences/providers/UserProvider.ts
rename to app/assets/javascripts/components/Preferences/providers/UserProvider.ts
diff --git a/app/assets/javascripts/preferences/providers/index.ts b/app/assets/javascripts/components/Preferences/providers/index.ts
similarity index 100%
rename from app/assets/javascripts/preferences/providers/index.ts
rename to app/assets/javascripts/components/Preferences/providers/index.ts
diff --git a/app/assets/javascripts/purchaseFlow/PurchaseFlowView.tsx b/app/assets/javascripts/components/PurchaseFlow/PurchaseFlowView.tsx
similarity index 100%
rename from app/assets/javascripts/purchaseFlow/PurchaseFlowView.tsx
rename to app/assets/javascripts/components/PurchaseFlow/PurchaseFlowView.tsx
diff --git a/app/assets/javascripts/purchaseFlow/PurchaseFlowWrapper.tsx b/app/assets/javascripts/components/PurchaseFlow/PurchaseFlowWrapper.tsx
similarity index 100%
rename from app/assets/javascripts/purchaseFlow/PurchaseFlowWrapper.tsx
rename to app/assets/javascripts/components/PurchaseFlow/PurchaseFlowWrapper.tsx
diff --git a/app/assets/javascripts/purchaseFlow/panes/CreateAccount.tsx b/app/assets/javascripts/components/PurchaseFlow/panes/CreateAccount.tsx
similarity index 100%
rename from app/assets/javascripts/purchaseFlow/panes/CreateAccount.tsx
rename to app/assets/javascripts/components/PurchaseFlow/panes/CreateAccount.tsx
diff --git a/app/assets/javascripts/purchaseFlow/panes/SignIn.tsx b/app/assets/javascripts/components/PurchaseFlow/panes/SignIn.tsx
similarity index 100%
rename from app/assets/javascripts/purchaseFlow/panes/SignIn.tsx
rename to app/assets/javascripts/components/PurchaseFlow/panes/SignIn.tsx
diff --git a/app/assets/javascripts/components/shared/AccordionItem.tsx b/app/assets/javascripts/components/Shared/AccordionItem.tsx
similarity index 94%
rename from app/assets/javascripts/components/shared/AccordionItem.tsx
rename to app/assets/javascripts/components/Shared/AccordionItem.tsx
index d714cd2f1..3e364ae6b 100644
--- a/app/assets/javascripts/components/shared/AccordionItem.tsx
+++ b/app/assets/javascripts/components/Shared/AccordionItem.tsx
@@ -1,7 +1,7 @@
 import { FunctionalComponent } from 'preact';
 import { useRef, useState } from 'preact/hooks';
 import { ArrowDownCheckmarkIcon } from '@standardnotes/stylekit';
-import { Title } from '@/preferences/components';
+import { Title } from '@/components/Preferences/components';
 
 type Props = {
   title: string | JSX.Element;
diff --git a/app/assets/javascripts/components/shared/HorizontalSeparator.tsx b/app/assets/javascripts/components/Shared/HorizontalSeparator.tsx
similarity index 100%
rename from app/assets/javascripts/components/shared/HorizontalSeparator.tsx
rename to app/assets/javascripts/components/Shared/HorizontalSeparator.tsx
diff --git a/app/assets/javascripts/components/shared/ModalDialog.tsx b/app/assets/javascripts/components/Shared/ModalDialog.tsx
similarity index 88%
rename from app/assets/javascripts/components/shared/ModalDialog.tsx
rename to app/assets/javascripts/components/Shared/ModalDialog.tsx
index f465bf88f..1e8649a68 100644
--- a/app/assets/javascripts/components/shared/ModalDialog.tsx
+++ b/app/assets/javascripts/components/Shared/ModalDialog.tsx
@@ -48,14 +48,15 @@ export const ModalDialogLabel: FunctionComponent<{
   </AlertDialogLabel>
 );
 
-export const ModalDialogDescription: FunctionComponent<{ className?: string }> =
-  ({ children, className = '' }) => (
-    <AlertDialogDescription
-      className={`px-4 py-4 flex flex-row items-center ${className}`}
-    >
-      {children}
-    </AlertDialogDescription>
-  );
+export const ModalDialogDescription: FunctionComponent<{
+  className?: string;
+}> = ({ children, className = '' }) => (
+  <AlertDialogDescription
+    className={`px-4 py-4 flex flex-row items-center ${className}`}
+  >
+    {children}
+  </AlertDialogDescription>
+);
 
 export const ModalDialogButtons: FunctionComponent<{ className?: string }> = ({
   children,
diff --git a/app/assets/javascripts/components/Tags/TagContextMenu.tsx b/app/assets/javascripts/components/Tags/TagContextMenu.tsx
index 04c2a5ca6..9a427e3bb 100644
--- a/app/assets/javascripts/components/Tags/TagContextMenu.tsx
+++ b/app/assets/javascripts/components/Tags/TagContextMenu.tsx
@@ -3,8 +3,8 @@ import { observer } from 'mobx-react-lite';
 import { FunctionComponent } from 'preact';
 import { useCallback, useEffect, useRef } from 'preact/hooks';
 import { Icon } from '../Icon';
-import { Menu } from '../menu/Menu';
-import { MenuItem, MenuItemType } from '../menu/MenuItem';
+import { Menu } from '../Menu/Menu';
+import { MenuItem, MenuItemType } from '../Menu/MenuItem';
 import { usePremiumModal } from '../Premium';
 import { useCloseOnBlur } from '../utils';
 import { SNTag } from '@standardnotes/snjs';
diff --git a/app/assets/javascripts/preferences/components/PreferencesSegment.tsx b/app/assets/javascripts/preferences/components/PreferencesSegment.tsx
deleted file mode 100644
index 4e12a79ce..000000000
--- a/app/assets/javascripts/preferences/components/PreferencesSegment.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { FunctionComponent } from 'preact';
-
-type Props = {
-  classes?: string;
-}
-export const PreferencesSegment: FunctionComponent<Props> = ({
-                                                               children,
-                                                               classes = ''
-                                                             }) => (
-  <div className={`flex flex-col ${classes}`}>{children}</div>
-);
diff --git a/app/assets/javascripts/preferences/panes/account/Advanced.tsx b/app/assets/javascripts/preferences/panes/account/Advanced.tsx
deleted file mode 100644
index 2141c78f3..000000000
--- a/app/assets/javascripts/preferences/panes/account/Advanced.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { FunctionalComponent } from 'preact';
-import { PreferencesGroup, PreferencesSegment } from '@/preferences/components';
-import { OfflineSubscription } from '@/preferences/panes/account/offlineSubscription';
-import { WebApplication } from '@/ui_models/application';
-import { observer } from 'mobx-react-lite';
-import { AppState } from '@/ui_models/app_state';
-import { Extensions } from '@/preferences/panes/Extensions';
-import { ExtensionsLatestVersions } from '@/preferences/panes/extensions-segments';
-import { AccordionItem } from '@/components/shared/AccordionItem';
-
-interface IProps {
-  application: WebApplication;
-  appState: AppState;
-  extensionsLatestVersions: ExtensionsLatestVersions;
-}
-
-export const Advanced: FunctionalComponent<IProps> = observer(
-  ({ application, appState, extensionsLatestVersions }) => {
-    return (
-      <PreferencesGroup>
-        <PreferencesSegment>
-          <AccordionItem title={'Advanced Settings'}>
-            <div className='flex flex-row items-center'>
-              <div className='flex-grow flex flex-col'>
-                <OfflineSubscription application={application} appState={appState} />
-                <Extensions className={'mt-3'} application={application} extensionsLatestVersions={extensionsLatestVersions} />
-              </div>
-            </div>
-          </AccordionItem>
-        </PreferencesSegment>
-      </PreferencesGroup>
-    );
-  }
-);
diff --git a/app/assets/javascripts/preferences/panes/security-segments/Encryption.tsx b/app/assets/javascripts/preferences/panes/security-segments/Encryption.tsx
deleted file mode 100644
index 102af157c..000000000
--- a/app/assets/javascripts/preferences/panes/security-segments/Encryption.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { DecoratedInput } from "@/components/DecoratedInput";
-import { Icon } from "@/components/Icon";
-import { STRING_E2E_ENABLED, STRING_ENC_NOT_ENABLED, STRING_LOCAL_ENC_ENABLED } from "@/strings";
-import { AppState } from "@/ui_models/app_state";
-import { observer } from "mobx-react-lite";
-import { FunctionComponent } from "preact";
-import { PreferencesGroup, PreferencesSegment, Text, Title } from "../../components";
-
-const formatCount = (count: number, itemType: string) => `${count} / ${count} ${itemType}`;
-
-const EncryptionEnabled: FunctionComponent<{ appState: AppState }> = observer(({ appState }) => {
-  const count = appState.accountMenu.structuredNotesAndTagsCount;
-  const notes = formatCount(count.notes, 'notes');
-  const tags = formatCount(count.tags, 'tags');
-  const archived = formatCount(count.archived, 'archived notes');
-  const deleted = formatCount(count.deleted, 'trashed notes');
-
-  const checkIcon = <Icon className="success min-w-4 min-h-4" type="check-bold" />;
-  const noteIcon = <Icon type="rich-text" className="min-w-5 min-h-5" />;
-  const tagIcon = <Icon type="hashtag" className="min-w-5 min-h-5" />;
-  const archiveIcon = <Icon type="archive" className="min-w-5 min-h-5" />;
-  const trashIcon = <Icon type="trash" className="min-w-5 min-h-5" />;
-  return (
-    <>
-      <div className="flex flex-row pb-1 pt-1.5" >
-        <DecoratedInput disabled={true} text={notes} right={[checkIcon]} left={[noteIcon]} />
-        <div className="min-w-3" />
-        <DecoratedInput disabled={true} text={tags} right={[checkIcon]} left={[tagIcon]} />
-      </div>
-      <div className="flex flex-row" >
-        <DecoratedInput disabled={true} text={archived} right={[checkIcon]} left={[archiveIcon]} />
-        <div className="min-w-3" />
-        <DecoratedInput disabled={true} text={deleted} right={[checkIcon]} left={[trashIcon]} />
-      </div>
-    </>
-  );
-});
-
-export const Encryption: FunctionComponent<{ appState: AppState }> = observer(({ appState }) => {
-  const app = appState.application;
-  const hasUser = app.hasAccount();
-  const hasPasscode = app.hasPasscode();
-  const isEncryptionEnabled = app.isEncryptionAvailable();
-
-  const encryptionStatusString = hasUser
-    ? STRING_E2E_ENABLED
-    : hasPasscode
-      ? STRING_LOCAL_ENC_ENABLED
-      : STRING_ENC_NOT_ENABLED;
-
-  return (
-    <PreferencesGroup>
-      <PreferencesSegment>
-        <Title>Encryption</Title>
-        <Text>{encryptionStatusString}</Text>
-
-        {isEncryptionEnabled &&
-          <EncryptionEnabled appState={appState} />}
-      </PreferencesSegment>
-    </PreferencesGroup>
-  );
-});
diff --git a/app/assets/javascripts/ui_models/app_state/preferences_state.ts b/app/assets/javascripts/ui_models/app_state/preferences_state.ts
index a749e1a25..8d77b23f8 100644
--- a/app/assets/javascripts/ui_models/app_state/preferences_state.ts
+++ b/app/assets/javascripts/ui_models/app_state/preferences_state.ts
@@ -1,4 +1,4 @@
-import { PreferenceId } from '@/preferences/PreferencesMenu';
+import { PreferenceId } from '@/components/Preferences/PreferencesMenu';
 import { action, computed, makeObservable, observable } from 'mobx';
 
 const DEFAULT_PANE = 'account';
diff --git a/app/assets/javascripts/ui_models/app_state/purchase_flow_state.ts b/app/assets/javascripts/ui_models/app_state/purchase_flow_state.ts
index fe0b9d2fe..e527077e1 100644
--- a/app/assets/javascripts/ui_models/app_state/purchase_flow_state.ts
+++ b/app/assets/javascripts/ui_models/app_state/purchase_flow_state.ts
@@ -1,4 +1,4 @@
-import { loadPurchaseFlowUrl } from '@/purchaseFlow/PurchaseFlowWrapper';
+import { loadPurchaseFlowUrl } from '@/components/PurchaseFlow/PurchaseFlowWrapper';
 import { action, makeObservable, observable } from 'mobx';
 import { WebApplication } from '../application';