From 3e07267e10ee687c25ccc5dfe3a77fdd00088000 Mon Sep 17 00:00:00 2001
From: "Calum H." <calum@modrinth.com>
Date: Thu, 20 Aug 2026 08:23:01 +0100
Subject: [PATCH] feat: preferences syncing frontend (#7192)

* feat: prefs frontend

* fix: DI issue

* fix: lint

* feat: appearance settings cleanup + fix settings, remove pinia

* fix: sync btn when logged out

* fix: prepr

* fix: sidebar issue

* feat: language coverage + cleanup

* feat: cleanup lang settings

* fix: fmt

* fix: CI

* fix: ci

* fix: storybook

* feat: bring back loader/game version sort

---------

Co-authored-by: tdgao <mr.trumgao@gmail.com>
---
 .github/workflows/frontend-deploy.yml         |   3 +-
 .github/workflows/frontend-preview.yml        |   3 +-
 .gitignore                                    |   1 +
 apps/app-frontend/package.json                |   1 -
 apps/app-frontend/src/App.vue                 | 118 +++-
 .../src/components/ui/AccountsCard.vue        |   2 +-
 .../src/components/ui/ErrorModal.vue          |   2 +-
 .../src/components/ui/Instance.vue            |   2 +-
 .../src/components/ui/WindowControls.vue      |   6 +-
 .../src/components/ui/friends/FriendsList.vue |   8 +-
 .../install_flow/UnknownPackWarningModal.vue  |   9 +-
 .../library/instance-group/instance-card.vue  |   2 +-
 .../ui/library/library-toolbar/sort-menu.vue  |   5 +
 .../src/components/ui/library/use-library.ts  |  14 +
 .../MinecraftAuthErrorModal.vue               |   2 +-
 .../MinecraftRequiredModal.vue                |   2 +-
 .../components/ui/modal/AppSettingsModal.vue  |  31 +-
 .../ui/settings/account/SocialSettings.vue    |  20 +
 .../settings/display/AppearanceSettings.vue   | 228 ++++---
 .../ui/settings/display/BehaviorSettings.vue  | 239 ++++---
 .../settings/display/FeatureFlagSettings.vue  |  21 +-
 .../ui/settings/display/LanguageSettings.vue  |  91 +--
 .../instances/ResourceManagementSettings.vue  |  12 +-
 .../use-shared-instance-invite-handler.ts     |   6 +-
 .../src/components/ui/world/InstanceItem.vue  |   2 +-
 .../components/ui/world/RecentWorldsList.vue  |   8 +-
 .../browse/install-job-notifications.ts       |   6 +-
 .../src/composables/use-app-settings.ts       |  52 ++
 .../app-frontend/src/composables/use-error.js |  48 ++
 .../app-frontend/src/composables/use-theme.ts |  47 ++
 apps/app-frontend/src/helpers/settings.ts     |   5 +-
 apps/app-frontend/src/helpers/types.d.ts      |   2 +
 .../src/helpers/user-preferences.ts           |  19 +
 .../app-frontend/src/locales/ar-SA/index.json |  12 -
 .../app-frontend/src/locales/cs-CZ/index.json |  12 -
 .../app-frontend/src/locales/da-DK/index.json |   6 -
 .../app-frontend/src/locales/de-CH/index.json |  18 -
 .../app-frontend/src/locales/de-DE/index.json |  18 -
 .../app-frontend/src/locales/en-US/index.json |  33 +-
 .../src/locales/es-419/index.json             |  18 -
 .../app-frontend/src/locales/es-ES/index.json |  12 -
 .../app-frontend/src/locales/fi-FI/index.json |  12 -
 .../src/locales/fil-PH/index.json             |  12 -
 .../app-frontend/src/locales/fr-FR/index.json |  18 -
 .../app-frontend/src/locales/hu-HU/index.json |  18 -
 .../app-frontend/src/locales/id-ID/index.json |  12 -
 .../app-frontend/src/locales/it-IT/index.json |  18 -
 .../app-frontend/src/locales/ja-JP/index.json |  18 -
 .../app-frontend/src/locales/ko-KR/index.json |  18 -
 .../app-frontend/src/locales/ms-MY/index.json |  12 -
 .../app-frontend/src/locales/nl-NL/index.json |  18 -
 .../app-frontend/src/locales/no-NO/index.json |   6 -
 .../app-frontend/src/locales/pl-PL/index.json |  18 -
 .../app-frontend/src/locales/pt-BR/index.json |  18 -
 .../app-frontend/src/locales/pt-PT/index.json |  12 -
 .../app-frontend/src/locales/ru-RU/index.json |  18 -
 .../app-frontend/src/locales/sr-CS/index.json |  18 -
 .../app-frontend/src/locales/sv-SE/index.json |  15 -
 .../app-frontend/src/locales/th-TH/index.json |  12 -
 .../app-frontend/src/locales/tr-TR/index.json |  18 -
 .../app-frontend/src/locales/uk-UA/index.json |  18 -
 .../app-frontend/src/locales/vi-VN/index.json |  12 -
 .../app-frontend/src/locales/zh-CN/index.json |  18 -
 .../app-frontend/src/locales/zh-TW/index.json |  18 -
 apps/app-frontend/src/main.js                 |   4 -
 apps/app-frontend/src/pages/Browse.vue        |  18 +-
 apps/app-frontend/src/pages/Index.vue         |   6 +-
 apps/app-frontend/src/pages/Skins.vue         |   8 +-
 .../src/pages/hosting/manage/Index.vue        |   6 +-
 .../settings-modal/installation-settings.vue  |   6 +-
 .../src/pages/instance/content/index.vue      |  11 +-
 .../src/pages/instance/layout.vue             |   8 +-
 .../src/pages/instance/worlds/index.vue       |   2 +-
 apps/app-frontend/src/pages/project/Index.vue |   6 +-
 .../src/pages/project/Versions.vue            |   6 +-
 apps/app-frontend/src/plugins/i18n-debug.ts   |   8 +-
 .../src/providers/content-install.ts          |   6 +-
 .../src/providers/server-install.ts           |   2 +-
 apps/app-frontend/src/providers/setup/auth.ts |   1 +
 .../src/providers/setup/creation-modal.ts     |   6 +-
 .../src/providers/setup/loading-state.ts      |   2 +-
 .../src/providers/setup/user-preferences.ts   |  19 +
 apps/app-frontend/src/store/error.js          |  49 --
 apps/app-frontend/src/store/state.js          |   3 -
 apps/app-frontend/src/store/theme.ts          |  91 ---
 apps/app/build.rs                             |   4 +
 apps/app/src/api/users.rs                     |  15 +
 apps/app/tauri.conf.json                      |   2 +-
 apps/frontend/src/app.vue                     |  46 +-
 apps/frontend/src/components/ui/NavStack.vue  |  36 +-
 apps/frontend/src/layouts/default.vue         |  16 +-
 apps/frontend/src/locales/cs-CZ/index.json    |  72 ---
 apps/frontend/src/locales/da-DK/index.json    |  42 --
 apps/frontend/src/locales/de-CH/index.json    |  84 ---
 apps/frontend/src/locales/de-DE/index.json    |  84 ---
 apps/frontend/src/locales/en-US/index.json    |  84 ---
 apps/frontend/src/locales/es-419/index.json   |  84 ---
 apps/frontend/src/locales/es-ES/index.json    |  84 ---
 apps/frontend/src/locales/fi-FI/index.json    |  15 -
 apps/frontend/src/locales/fil-PH/index.json   |  84 ---
 apps/frontend/src/locales/fr-FR/index.json    |  84 ---
 apps/frontend/src/locales/hu-HU/index.json    |  84 ---
 apps/frontend/src/locales/id-ID/index.json    |  75 ---
 apps/frontend/src/locales/it-IT/index.json    |  84 ---
 apps/frontend/src/locales/ja-JP/index.json    |  84 ---
 apps/frontend/src/locales/ko-KR/index.json    |  84 ---
 apps/frontend/src/locales/ms-MY/index.json    |  84 ---
 apps/frontend/src/locales/nl-NL/index.json    |  84 ---
 apps/frontend/src/locales/no-NO/index.json    |  84 ---
 apps/frontend/src/locales/pl-PL/index.json    |  84 ---
 apps/frontend/src/locales/pt-BR/index.json    |  84 ---
 apps/frontend/src/locales/pt-PT/index.json    |  84 ---
 apps/frontend/src/locales/ro-RO/index.json    |  72 ---
 apps/frontend/src/locales/ru-RU/index.json    |  84 ---
 apps/frontend/src/locales/sr-CS/index.json    |  84 ---
 apps/frontend/src/locales/sv-SE/index.json    |  84 ---
 apps/frontend/src/locales/tr-TR/index.json    |  84 ---
 apps/frontend/src/locales/uk-UA/index.json    |  84 ---
 apps/frontend/src/locales/vi-VN/index.json    |  84 ---
 apps/frontend/src/locales/zh-CN/index.json    |  84 ---
 apps/frontend/src/locales/zh-TW/index.json    |  84 ---
 .../src/pages/discover/[type]/index.vue       |  26 +-
 apps/frontend/src/pages/settings/index.vue    | 603 +++++++-----------
 apps/frontend/src/pages/settings/language.vue |  93 +--
 apps/frontend/src/pages/settings/social.vue   |  15 +
 apps/frontend/src/plugins/cosmetics.ts        |   1 +
 apps/frontend/src/plugins/i18n.ts             |   9 +-
 apps/frontend/src/plugins/theme/index.ts      |  11 +-
 .../src/plugins/theme/theme-settings.ts       |   7 +
 apps/frontend/src/providers/setup.ts          |  18 +-
 apps/frontend/src/providers/setup/auth.ts     |   1 +
 apps/labrinth/src/models/v3/preferences.rs    |  27 +
 package.json                                  |   9 +-
 .../api-client/src/modules/labrinth/types.ts  |  63 ++
 .../src/modules/labrinth/users/v3.ts          |  37 ++
 ...6f5b6a3155788880369af940fcd268d3cb94.json} |  18 +-
 ...c723b356263ffc83aabb645c9fb5b6d5aa7c.json} |   6 +-
 ...260818120000_sync-preferences-settings.sql |   5 +
 packages/app-lib/src/api/users.rs             |  45 ++
 packages/app-lib/src/state/settings.rs        |  12 +-
 packages/ui/src/components/index.ts           |   1 -
 .../ui/src/components/modal/TabbedModal.vue   |  32 +-
 .../components/settings/LanguageSelector.vue  | 250 --------
 packages/ui/src/components/settings/index.ts  |   2 -
 packages/ui/src/layouts/index.ts              |   1 +
 .../components/AppearanceSettingRow.vue       |  37 ++
 .../components/ProjectLayoutSelector.vue      |  76 +++
 ...earance-settings-theme-selector.stories.ts |  31 +
 .../appearance-settings-theme-selector.vue}   |  59 +-
 .../shared/appearance-settings/index.ts       |   3 +
 .../shared/appearance-settings/layout.vue     | 181 ++++++
 .../shared/appearance-settings/messages.ts    | 108 ++++
 .../providers/appearance-settings.ts          | 229 +++++++
 .../appearance-settings/providers/index.ts    |   1 +
 .../shared/appearance-settings/types.ts       |  36 ++
 .../src/layouts/shared/content-tab/layout.vue |   5 +-
 .../content-tab/providers/content-manager.ts  |   2 +-
 packages/ui/src/layouts/wrapped/index.ts      |   3 +-
 .../{ => settings}/AccountProfileSettings.vue |   0
 .../{ => settings}/AccountSocialSettings.vue  | 188 +++++-
 .../ui/src/layouts/wrapped/settings/index.ts  |   3 +
 .../settings/language-settings/index.vue      | 121 ++++
 .../language-settings-coverage.generated.d.ts |   3 +
 .../language-settings-coverage.ts             |  15 +
 .../language-settings-selector.vue            | 335 ++++++++++
 packages/ui/src/locales/de-CH/index.json      |   3 -
 packages/ui/src/locales/de-DE/index.json      |   3 -
 packages/ui/src/locales/en-US/index.json      | 112 +++-
 packages/ui/src/locales/es-419/index.json     |   3 -
 packages/ui/src/locales/es-ES/index.json      |   3 -
 packages/ui/src/locales/fr-FR/index.json      |   3 -
 packages/ui/src/locales/hu-HU/index.json      |   3 -
 packages/ui/src/locales/it-IT/index.json      |   3 -
 packages/ui/src/locales/ja-JP/index.json      |   3 -
 packages/ui/src/locales/ko-KR/index.json      |   3 -
 packages/ui/src/locales/nl-NL/index.json      |   3 -
 packages/ui/src/locales/pl-PL/index.json      |   3 -
 packages/ui/src/locales/pt-BR/index.json      |   3 -
 packages/ui/src/locales/ru-RU/index.json      |   3 -
 packages/ui/src/locales/sv-SE/index.json      |   3 -
 packages/ui/src/locales/uk-UA/index.json      |   3 -
 packages/ui/src/locales/zh-CN/index.json      |   3 -
 packages/ui/src/locales/zh-TW/index.json      |   3 -
 packages/ui/src/providers/i18n.ts             |   2 +-
 packages/ui/src/providers/index.ts            |   1 +
 packages/ui/src/providers/user-preferences.ts | 116 ++++
 packages/ui/src/utils/savable.ts              |  12 +-
 pnpm-lock.yaml                                | 193 ++----
 scripts/coverage-i18n.ts                      | 215 ++++++-
 scripts/run.mjs                               |  11 +-
 turbo.jsonc                                   |  21 +-
 191 files changed, 3356 insertions(+), 4372 deletions(-)
 create mode 100644 apps/app-frontend/src/composables/use-app-settings.ts
 create mode 100644 apps/app-frontend/src/composables/use-error.js
 create mode 100644 apps/app-frontend/src/composables/use-theme.ts
 create mode 100644 apps/app-frontend/src/helpers/user-preferences.ts
 create mode 100644 apps/app-frontend/src/providers/setup/user-preferences.ts
 delete mode 100644 apps/app-frontend/src/store/error.js
 delete mode 100644 apps/app-frontend/src/store/state.js
 delete mode 100644 apps/app-frontend/src/store/theme.ts
 rename packages/app-lib/.sqlx/{query-6f8b76b839db48539a70664af549c12be71df20b8cf520019413f6ea751cd594.json => query-29df6a29d9221b9bbea45e024fb26f5b6a3155788880369af940fcd268d3cb94.json} (90%)
 rename packages/app-lib/.sqlx/{query-dfdc99cb5ec60bb08c566920628deec7e741eca9490811ebad6594abe8a6126d.json => query-88c6a22aa112f10dce9d42779f06c723b356263ffc83aabb645c9fb5b6d5aa7c.json} (85%)
 create mode 100644 packages/app-lib/migrations/20260818120000_sync-preferences-settings.sql
 delete mode 100644 packages/ui/src/components/settings/LanguageSelector.vue
 delete mode 100644 packages/ui/src/components/settings/index.ts
 create mode 100644 packages/ui/src/layouts/shared/appearance-settings/components/AppearanceSettingRow.vue
 create mode 100644 packages/ui/src/layouts/shared/appearance-settings/components/ProjectLayoutSelector.vue
 create mode 100644 packages/ui/src/layouts/shared/appearance-settings/components/appearance-settings-theme-selector.stories.ts
 rename packages/ui/src/{components/settings/ThemeSelector.vue => layouts/shared/appearance-settings/components/appearance-settings-theme-selector.vue} (67%)
 create mode 100644 packages/ui/src/layouts/shared/appearance-settings/index.ts
 create mode 100644 packages/ui/src/layouts/shared/appearance-settings/layout.vue
 create mode 100644 packages/ui/src/layouts/shared/appearance-settings/messages.ts
 create mode 100644 packages/ui/src/layouts/shared/appearance-settings/providers/appearance-settings.ts
 create mode 100644 packages/ui/src/layouts/shared/appearance-settings/providers/index.ts
 create mode 100644 packages/ui/src/layouts/shared/appearance-settings/types.ts
 rename packages/ui/src/layouts/wrapped/{ => settings}/AccountProfileSettings.vue (100%)
 rename packages/ui/src/layouts/wrapped/{ => settings}/AccountSocialSettings.vue (69%)
 create mode 100644 packages/ui/src/layouts/wrapped/settings/index.ts
 create mode 100644 packages/ui/src/layouts/wrapped/settings/language-settings/index.vue
 create mode 100644 packages/ui/src/layouts/wrapped/settings/language-settings/language-settings-coverage.generated.d.ts
 create mode 100644 packages/ui/src/layouts/wrapped/settings/language-settings/language-settings-coverage.ts
 create mode 100644 packages/ui/src/layouts/wrapped/settings/language-settings/language-settings-selector.vue
 create mode 100644 packages/ui/src/providers/user-preferences.ts

diff --git a/.github/workflows/frontend-deploy.yml b/.github/workflows/frontend-deploy.yml
index 703431d240..79b73c57ef 100644
--- a/.github/workflows/frontend-deploy.yml
+++ b/.github/workflows/frontend-deploy.yml
@@ -125,8 +125,7 @@ jobs:
         run: pnpm install
 
       - name: Build frontend
-        working-directory: ./apps/frontend
-        run: pnpm build
+        run: pnpm web:build
         env:
           CF_PAGES_BRANCH: ${{ inputs.head_ref || github.ref_name }}
           CF_PAGES_COMMIT_SHA: ${{ inputs.head_sha || github.sha }}
diff --git a/.github/workflows/frontend-preview.yml b/.github/workflows/frontend-preview.yml
index df17e1786c..16e76136fd 100644
--- a/.github/workflows/frontend-preview.yml
+++ b/.github/workflows/frontend-preview.yml
@@ -70,10 +70,9 @@ jobs:
         run: pnpm install
 
       - name: Build Storybook
-        working-directory: ./packages/ui
         env:
           NODE_OPTIONS: --max-old-space-size=6144
-        run: pnpm run build-storybook
+        run: pnpm build-storybook
 
       - name: Configure short SHA
         id: meta
diff --git a/.gitignore b/.gitignore
index 9d27dcaf5e..d442251099 100644
--- a/.gitignore
+++ b/.gitignore
@@ -55,6 +55,7 @@ Thumbs.db
 
 # frontend generated files
 apps/frontend/src/generated
+/packages/ui/src/layouts/wrapped/settings/language-settings/language-settings-coverage.generated.ts
 
 .turbo
 target
diff --git a/apps/app-frontend/package.json b/apps/app-frontend/package.json
index 5a88bd2d92..abe6e55c0f 100644
--- a/apps/app-frontend/package.json
+++ b/apps/app-frontend/package.json
@@ -38,7 +38,6 @@
 		"intl-messageformat": "^10.7.7",
 		"ofetch": "^1.3.4",
 		"overlayscrollbars": "^2.15.1",
-		"pinia": "^3.0.0",
 		"posthog-js": "^1.158.2",
 		"three": "^0.172.0",
 		"vite-svg-loader": "^5.1.0",
diff --git a/apps/app-frontend/src/App.vue b/apps/app-frontend/src/App.vue
index eeb37273f6..7456fa2dec 100644
--- a/apps/app-frontend/src/App.vue
+++ b/apps/app-frontend/src/App.vue
@@ -94,6 +94,9 @@ import SurveyPopup from '@/components/ui/SurveyPopup.vue'
 import WindowControls from '@/components/ui/WindowControls.vue'
 import { useCheckDisableMouseover } from '@/composables/macCssFix.js'
 import { useAppEvent } from '@/composables/use-app-event'
+import { useAppSettings } from '@/composables/use-app-settings.ts'
+import { useError } from '@/composables/use-error.js'
+import { useTheme } from '@/composables/use-theme.ts'
 import { config } from '@/config'
 import {
 	hide_ads_window,
@@ -147,8 +150,7 @@ import { setupProviders } from '@/providers/setup'
 import { setupAppEventsProvider } from '@/providers/setup/app-events'
 import { setupAuthProvider } from '@/providers/setup/auth'
 import { setupLoadingStateProvider } from '@/providers/setup/loading-state'
-import { useError } from '@/store/error.js'
-import { useTheming } from '@/store/state'
+import { setupAppUserPreferencesProvider } from '@/providers/setup/user-preferences.ts'
 import { appMessages } from '@/utils/app-messages'
 
 import { generateSkinPreviews } from './helpers/rendering/batch-skin-renderer'
@@ -157,7 +159,8 @@ import { AppNotificationManager } from './providers/app-notifications'
 import { AppPopupNotificationManager } from './providers/app-popup-notifications'
 import { appSettingsModalOpenProfileKey } from './providers/app-settings-modal'
 
-const themeStore = useTheming()
+const appSettings = useAppSettings()
+const appTheme = useTheme()
 const router = useRouter()
 const route = useRoute()
 const { channel: appEventChannel, events: appEvents } = setupAppEventsProvider()
@@ -201,7 +204,7 @@ const credentials = ref()
 let credentialsRefreshId = 0
 const sidebarToggled = ref(true)
 watch(
-	() => themeStore.toggleSidebar,
+	() => appSettings.toggleSidebar,
 	(toggleSidebar) => {
 		sidebarToggled.value = !toggleSidebar
 	},
@@ -221,7 +224,7 @@ const hostingUpdateRequired = computed(
 		appUpdateState.updatesEnabled.value,
 )
 const prideFundraiserEnabled = computed(
-	() => themeStore.getFeatureFlag('pride_fundraiser') && Date.now() < PRIDE_FUNDRAISER_END_DATE,
+	() => appSettings.getFeatureFlag('pride_fundraiser') && Date.now() < PRIDE_FUNDRAISER_END_DATE,
 )
 const hostingIntercomIdentityKey = computed(() => {
 	const rawServerId = route.params.id
@@ -324,13 +327,13 @@ providePageContext({
 	intercomBubble: hostingIntercom.intercomBubble,
 	featureFlags: {
 		serverRamAsBytesAlwaysOn: computed(() =>
-			themeStore.getFeatureFlag('server_ram_as_bytes_always_on'),
+			appSettings.getFeatureFlag('server_ram_as_bytes_always_on'),
 		),
 	},
 	openExternalUrl: (url) => void openUrl(url),
 })
 provideModalBehavior({
-	noblur: computed(() => !themeStore.advancedRendering),
+	noblur: computed(() => !appTheme.advancedRendering),
 	onShow: () => take_ads_window_hold(),
 	onHide: () => release_ads_window_hold(),
 })
@@ -634,10 +637,11 @@ async function setupApp() {
 		theme,
 		locale,
 		telemetry,
-		collapsed_navigation,
 		hide_nametag_skins_page,
 		advanced_rendering,
 		toggle_sidebar,
+		sync_theme_across_devices,
+		sync_behavior_across_devices,
 		developer_mode,
 		feature_flags,
 		pending_update_toast_for_version,
@@ -655,13 +659,14 @@ async function setupApp() {
 	nativeDecorations.value = native_decorations
 	if (os.value !== 'MacOS') await getCurrentWindow().setDecorations(native_decorations)
 
-	themeStore.setThemeState(theme)
-	themeStore.collapsedNavigation = collapsed_navigation
-	themeStore.advancedRendering = advanced_rendering
-	themeStore.hideNametagSkinsPage = hide_nametag_skins_page
-	themeStore.toggleSidebar = toggle_sidebar
-	themeStore.devMode = developer_mode
-	themeStore.featureFlags = feature_flags
+	appTheme.preferred = theme
+	appTheme.advancedRendering = advanced_rendering
+	appTheme.syncAcrossDevices = sync_theme_across_devices
+	appSettings.syncBehaviorAcrossDevices = sync_behavior_across_devices
+	appSettings.hideNametagSkinsPage = hide_nametag_skins_page
+	appSettings.toggleSidebar = toggle_sidebar
+	appSettings.devMode = developer_mode
+	Object.assign(appSettings.featureFlags, feature_flags)
 	stateInitialized.value = true
 
 	isMaximized.value = await getCurrentWindow().isMaximized()
@@ -959,7 +964,7 @@ watch(incompatibilityWarningModal, (modal) => {
 	}
 })
 
-setupAuthProvider(credentials, async (_redirectPath, flow, options) => {
+const authProvider = setupAuthProvider(credentials, async (_redirectPath, flow, options) => {
 	if (options?.showModal === false) {
 		await signIn(flow)
 	} else {
@@ -967,6 +972,79 @@ setupAuthProvider(credentials, async (_redirectPath, flow, options) => {
 	}
 })
 
+const userPreferences = setupAppUserPreferencesProvider(authProvider, notificationManager)
+let userPreferencesSync = Promise.resolve()
+
+watch(
+	[userPreferences.preferences, stateInitialized],
+	([preferences, initialized]) => {
+		if (!preferences || !initialized) return
+
+		userPreferencesSync = userPreferencesSync
+			.then(async () => {
+				const settings = await getSettings()
+				const selectedTheme = preferences.appearance.auto ? 'system' : preferences.appearance.theme
+				const locale = preferences.localization.locale
+				const behavior = preferences.behavior
+				let settingsChanged = false
+
+				if (appTheme.syncAcrossDevices && appTheme.preferred !== selectedTheme) {
+					appTheme.preferred = selectedTheme
+				}
+				if (i18n.global.locale.value !== locale) {
+					i18n.global.locale.value = locale
+				}
+
+				if (appTheme.syncAcrossDevices && settings.theme !== selectedTheme) {
+					settings.theme = selectedTheme
+					settingsChanged = true
+				}
+				if (settings.locale !== locale) {
+					settings.locale = locale
+					settingsChanged = true
+				}
+
+				if (behavior && appSettings.syncBehaviorAcrossDevices) {
+					const behaviorFeatureFlags = {
+						worlds_in_home: behavior.show_jump_in,
+						show_instance_play_time: behavior.show_play_time,
+						skip_unknown_pack_warning: !behavior.warn_on_unknown_modpacks,
+						skip_non_essential_warnings: behavior.skip_non_essential_warnings,
+					}
+
+					appSettings.toggleSidebar = behavior.hide_right_sidebar
+					appSettings.hideNametagSkinsPage = behavior.hide_nametag
+					Object.assign(appSettings.featureFlags, behaviorFeatureFlags)
+
+					if (settings.hide_on_process_start !== behavior.minimize_app) {
+						settings.hide_on_process_start = behavior.minimize_app
+						settingsChanged = true
+					}
+					if (settings.toggle_sidebar !== behavior.hide_right_sidebar) {
+						settings.toggle_sidebar = behavior.hide_right_sidebar
+						settingsChanged = true
+					}
+					if (settings.hide_nametag_skins_page !== behavior.hide_nametag) {
+						settings.hide_nametag_skins_page = behavior.hide_nametag
+						settingsChanged = true
+					}
+					for (const [flag, value] of Object.entries(behaviorFeatureFlags)) {
+						if (settings.feature_flags[flag] !== value) {
+							settings.feature_flags[flag] = value
+							settingsChanged = true
+						}
+					}
+				}
+
+				if (settingsChanged) {
+					await setSettings(settings)
+				}
+			})
+			.catch(handleError)
+	},
+	{ immediate: true },
+)
+
 async function validateSession(sessionToken) {
 	try {
 		const response = await tauriFetch(`${config.labrinthBaseUrl}/v2/user`, {
@@ -1642,7 +1720,7 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 	<div
 		v-if="stateInitialized"
 		class="app-grid-layout relative"
-		:class="{ 'disable-advanced-rendering': !themeStore.advancedRendering }"
+		:class="{ 'disable-advanced-rendering': !appTheme.advancedRendering }"
 	>
 		<Transition name="fade">
 			<div
@@ -1828,7 +1906,7 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 			</div>
 			<section data-tauri-drag-region class="flex shrink-0 ml-auto items-center">
 				<IconButton
-					v-if="!forceSidebar && themeStore.toggleSidebar"
+					v-if="!forceSidebar && appSettings.toggleSidebar"
 					:type="sidebarToggled ? 'base' : 'quiet'"
 					:label="formatMessage(messages.nextImage)"
 					class="mr-3 transition-transform"
@@ -1851,7 +1929,7 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 		class="app-contents"
 		:class="{
 			'sidebar-enabled': sidebarVisible,
-			'disable-advanced-rendering': !themeStore.advancedRendering,
+			'disable-advanced-rendering': !appTheme.advancedRendering,
 		}"
 	>
 		<div class="app-viewport flex-grow router-view">
@@ -1867,7 +1945,7 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 				<LoadingBar position="absolute" />
 			</div>
 			<div
-				v-if="themeStore.featureFlags.page_path"
+				v-if="appSettings.featureFlags.page_path"
 				class="absolute bottom-0 left-0 m-2 bg-tooltip-bg text-tooltip-text font-semibold rounded-full px-2 py-1 text-xs z-50"
 			>
 				{{ route.fullPath }}
diff --git a/apps/app-frontend/src/components/ui/AccountsCard.vue b/apps/app-frontend/src/components/ui/AccountsCard.vue
index ac9136f6c2..9e3631192d 100644
--- a/apps/app-frontend/src/components/ui/AccountsCard.vue
+++ b/apps/app-frontend/src/components/ui/AccountsCard.vue
@@ -107,6 +107,7 @@ import type { Ref } from 'vue'
 import { computed, ref } from 'vue'
 
 import { useAppEvent } from '@/composables/use-app-event'
+import { handleSevereError } from '@/composables/use-error.js'
 import { trackEvent } from '@/helpers/analytics'
 import {
 	get_default_user,
@@ -118,7 +119,6 @@ import {
 import { getPlayerHeadUrl } from '@/helpers/rendering/batch-skin-renderer.ts'
 import type { Skin } from '@/helpers/skins'
 import { get_available_skins } from '@/helpers/skins'
-import { handleSevereError } from '@/store/error.js'
 
 const { formatMessage } = useVIntl()
 const { handleError } = injectNotificationManager()
diff --git a/apps/app-frontend/src/components/ui/ErrorModal.vue b/apps/app-frontend/src/components/ui/ErrorModal.vue
index 475c1f3f76..efac61720c 100644
--- a/apps/app-frontend/src/components/ui/ErrorModal.vue
+++ b/apps/app-frontend/src/components/ui/ErrorModal.vue
@@ -20,11 +20,11 @@ import { computed, ref } from 'vue'
 
 import { ChatIcon } from '@/assets/icons'
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import { handleSevereError } from '@/composables/use-error.js'
 import { trackEvent } from '@/helpers/analytics'
 import { login as login_flow, set_default_user } from '@/helpers/auth.js'
 import { install_existing_instance } from '@/helpers/install'
 import { cancel_directory_change } from '@/helpers/settings.ts'
-import { handleSevereError } from '@/store/error.js'
 
 const { handleError } = injectNotificationManager()
 
diff --git a/apps/app-frontend/src/components/ui/Instance.vue b/apps/app-frontend/src/components/ui/Instance.vue
index 2bc32b67fc..9f8338df6d 100644
--- a/apps/app-frontend/src/components/ui/Instance.vue
+++ b/apps/app-frontend/src/components/ui/Instance.vue
@@ -20,12 +20,12 @@ import { computed, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
 import { useAppEvent } from '@/composables/use-app-event'
+import { handleSevereError } from '@/composables/use-error.js'
 import { trackEvent } from '@/helpers/analytics'
 import { install_existing_instance, install_pack_to_existing_instance } from '@/helpers/install'
 import { getInstanceIconUrl, kill, run } from '@/helpers/instance'
 import { get_by_instance_id } from '@/helpers/process'
 import { showInstanceInFolder } from '@/helpers/utils.js'
-import { handleSevereError } from '@/store/error.js'
 
 const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
diff --git a/apps/app-frontend/src/components/ui/WindowControls.vue b/apps/app-frontend/src/components/ui/WindowControls.vue
index 81797ba5fa..a10ccffff5 100644
--- a/apps/app-frontend/src/components/ui/WindowControls.vue
+++ b/apps/app-frontend/src/components/ui/WindowControls.vue
@@ -39,17 +39,17 @@ import { getCurrentWindow } from '@tauri-apps/api/window'
 import { saveWindowState, StateFlags } from '@tauri-apps/plugin-window-state'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 
+import { useAppSettings } from '@/composables/use-app-settings.ts'
 import { get as getSettings } from '@/helpers/settings.ts'
 import { getOS } from '@/helpers/utils.js'
-import { useTheming } from '@/store/state'
 
-const themeStore = useTheming()
+const appSettings = useAppSettings()
 
 const nativeDecorations = ref(true)
 const isMaximized = ref(false)
 const os = ref('')
 
-const alwaysShowAppControls = computed(() => themeStore.getFeatureFlag('always_show_app_controls'))
+const alwaysShowAppControls = computed(() => appSettings.getFeatureFlag('always_show_app_controls'))
 
 const showControls = computed(
 	() =>
diff --git a/apps/app-frontend/src/components/ui/friends/FriendsList.vue b/apps/app-frontend/src/components/ui/friends/FriendsList.vue
index 705b3c16a1..7294781e87 100644
--- a/apps/app-frontend/src/components/ui/friends/FriendsList.vue
+++ b/apps/app-frontend/src/components/ui/friends/FriendsList.vue
@@ -15,17 +15,17 @@ import { computed, ref } from 'vue'
 
 import FriendsSection from '@/components/ui/friends/FriendsSection.vue'
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import { useAppSettings } from '@/composables/use-app-settings.ts'
 import { useFriends } from '@/composables/use-friends'
 import type { FriendWithUserData } from '@/helpers/friends.ts'
 import type { ModrinthCredentials } from '@/helpers/mr_auth'
 import { get as getSettings, set as setSettings } from '@/helpers/settings.ts'
-import { useTheming } from '@/store/state'
 
 const { formatMessage } = useVIntl()
 
 const { handleError } = injectNotificationManager()
 const formatRelativeTime = useRelativeTime()
-const themeStore = useTheming()
+const appSettings = useAppSettings()
 
 const props = defineProps<{
 	credentials: ModrinthCredentials | null
@@ -39,11 +39,11 @@ type FriendsSectionCollapsedFlag =
 	| 'friends_pending_collapsed'
 
 function isFriendsSectionCollapsed(flag: FriendsSectionCollapsedFlag) {
-	return themeStore.getFeatureFlag(flag)
+	return appSettings.getFeatureFlag(flag)
 }
 
 function setFriendsSectionCollapsed(flag: FriendsSectionCollapsedFlag, collapsed: boolean) {
-	themeStore.featureFlags[flag] = collapsed
+	appSettings.featureFlags[flag] = collapsed
 	getSettings()
 		.then((settings) => {
 			settings.feature_flags[flag] = collapsed
diff --git a/apps/app-frontend/src/components/ui/install_flow/UnknownPackWarningModal.vue b/apps/app-frontend/src/components/ui/install_flow/UnknownPackWarningModal.vue
index f1b929e050..b1063c805d 100644
--- a/apps/app-frontend/src/components/ui/install_flow/UnknownPackWarningModal.vue
+++ b/apps/app-frontend/src/components/ui/install_flow/UnknownPackWarningModal.vue
@@ -13,11 +13,10 @@
 import { UnknownFileWarningModal } from '@modrinth/ui'
 import { ref, useTemplateRef } from 'vue'
 
+import { type FeatureFlag, useAppSettings } from '@/composables/use-app-settings.ts'
 import { get as getSettings, set as setSettings } from '@/helpers/settings'
-import { useTheming } from '@/store/state'
-import type { FeatureFlag } from '@/store/theme.ts'
 
-const themeStore = useTheming()
+const appSettings = useAppSettings()
 const skipUnknownPackWarningFeatureFlag = 'skip_unknown_pack_warning' as FeatureFlag
 
 const modal = useTemplateRef('modal')
@@ -34,7 +33,7 @@ function show(
 	fileName.value = selectedFileName
 	externalFilesInModpack.value = selectedExternalFiles
 
-	if (themeStore.getFeatureFlag(skipUnknownPackWarningFeatureFlag)) {
+	if (appSettings.getFeatureFlag(skipUnknownPackWarningFeatureFlag)) {
 		void createInstance()
 		return
 	}
@@ -50,7 +49,7 @@ function reset() {
 
 async function proceed(dontShowAgain: boolean) {
 	if (dontShowAgain) {
-		themeStore.featureFlags[skipUnknownPackWarningFeatureFlag] = true
+		appSettings.featureFlags[skipUnknownPackWarningFeatureFlag] = true
 		const settings = await getSettings()
 		settings.feature_flags[skipUnknownPackWarningFeatureFlag] = true
 		await setSettings(settings)
diff --git a/apps/app-frontend/src/components/ui/library/instance-group/instance-card.vue b/apps/app-frontend/src/components/ui/library/instance-group/instance-card.vue
index 814cab72b4..49e2a15b36 100644
--- a/apps/app-frontend/src/components/ui/library/instance-group/instance-card.vue
+++ b/apps/app-frontend/src/components/ui/library/instance-group/instance-card.vue
@@ -9,13 +9,13 @@ import { useRouter } from 'vue-router'
 import InstanceCardView from '@/components/ui/library/instance-group/instance-card-view.vue'
 import { getLibraryInstanceSelectionKey, useLibrary } from '@/components/ui/library/use-library'
 import { useAppEvent } from '@/composables/use-app-event'
+import { handleSevereError } from '@/composables/use-error.js'
 import { trackEvent } from '@/helpers/analytics'
 import { install_existing_instance, install_pack_to_existing_instance } from '@/helpers/install'
 import { kill, run } from '@/helpers/instance'
 import { get_by_instance_id } from '@/helpers/process'
 import type { GameInstance } from '@/helpers/types'
 import { showInstanceInFolder } from '@/helpers/utils.js'
-import { handleSevereError } from '@/store/error.js'
 
 type ProcessEvent = 'installing' | 'launched' | 'finished'
 
diff --git a/apps/app-frontend/src/components/ui/library/library-toolbar/sort-menu.vue b/apps/app-frontend/src/components/ui/library/library-toolbar/sort-menu.vue
index c24b5e26ba..457800e1ff 100644
--- a/apps/app-frontend/src/components/ui/library/library-toolbar/sort-menu.vue
+++ b/apps/app-frontend/src/components/ui/library/library-toolbar/sort-menu.vue
@@ -15,6 +15,8 @@ const { formatMessage } = useVIntl()
 
 const messages = defineMessages({
 	name: { id: 'app.library.sort.name', defaultMessage: 'Name' },
+	loaderSort: { id: 'app.library.sort.loader', defaultMessage: 'Loader' },
+	gameVersionSort: { id: 'app.library.sort.game-version', defaultMessage: 'Game version' },
 	lastPlayed: { id: 'app.library.sort.last-played', defaultMessage: 'Last played' },
 	hoursPlayed: { id: 'app.library.sort.hours-played', defaultMessage: 'Hours played' },
 	dateCreated: { id: 'app.library.sort.date-created', defaultMessage: 'Date created' },
@@ -34,6 +36,8 @@ const sortLabels = {
 	'Hours played': messages.hoursPlayed,
 	'Date created': messages.dateCreated,
 	'Date modified': messages.dateModified,
+	Loader: messages.loaderSort,
+	'Game version': messages.gameVersionSort,
 }
 
 const groupLabels = {
@@ -60,6 +64,7 @@ const groupOptions: ComboboxOption<LibraryGroupBy>[] = libraryGroupOptions.map((
 		class="w-max"
 		:options="sortOptions"
 		:show-icon-in-selected="false"
+		:max-height="320"
 		dropdown-min-width="160px"
 	>
 		<template #prefix>
diff --git a/apps/app-frontend/src/components/ui/library/use-library.ts b/apps/app-frontend/src/components/ui/library/use-library.ts
index 587c6a6c8a..af50ea32f7 100644
--- a/apps/app-frontend/src/components/ui/library/use-library.ts
+++ b/apps/app-frontend/src/components/ui/library/use-library.ts
@@ -36,6 +36,8 @@ export const librarySortOptions = [
 	'Hours played',
 	'Date created',
 	'Date modified',
+	'Loader',
+	'Game version',
 ] as const
 
 export const libraryGroupOptions = [
@@ -328,6 +330,18 @@ function createLibraryState(instances: Ref<GameInstance[]>) {
 			case 'Name':
 				visibleInstances.sort((a, b) => a.name.localeCompare(b.name))
 				break
+			case 'Loader':
+				visibleInstances.sort((a, b) =>
+					formatLoader(formatMessage, a.loader).localeCompare(
+						formatLoader(formatMessage, b.loader),
+					),
+				)
+				break
+			case 'Game version':
+				visibleInstances.sort((a, b) =>
+					a.game_version.localeCompare(b.game_version, undefined, { numeric: true }),
+				)
+				break
 			case 'Last played':
 				visibleInstances.sort((a, b) => dayjs(b.last_played ?? 0).diff(dayjs(a.last_played ?? 0)))
 				break
diff --git a/apps/app-frontend/src/components/ui/minecraft-auth-error-modal/MinecraftAuthErrorModal.vue b/apps/app-frontend/src/components/ui/minecraft-auth-error-modal/MinecraftAuthErrorModal.vue
index 9f29f9a945..8d34f9e1f8 100644
--- a/apps/app-frontend/src/components/ui/minecraft-auth-error-modal/MinecraftAuthErrorModal.vue
+++ b/apps/app-frontend/src/components/ui/minecraft-auth-error-modal/MinecraftAuthErrorModal.vue
@@ -10,8 +10,8 @@ import {
 import { Admonition, Button, ButtonLink, Collapsible, IconButton, NewModal } from '@modrinth/ui'
 import { computed, ref } from 'vue'
 
+import { handleSevereError } from '@/composables/use-error.js'
 import { login as login_flow, set_default_user } from '@/helpers/auth.js'
-import { handleSevereError } from '@/store/error.js'
 
 import { findMinecraftAuthError, type MinecraftAuthError } from './minecraft-auth-errors'
 
diff --git a/apps/app-frontend/src/components/ui/minecraft-required-modal/MinecraftRequiredModal.vue b/apps/app-frontend/src/components/ui/minecraft-required-modal/MinecraftRequiredModal.vue
index c22b268e2a..73293f5bed 100644
--- a/apps/app-frontend/src/components/ui/minecraft-required-modal/MinecraftRequiredModal.vue
+++ b/apps/app-frontend/src/components/ui/minecraft-required-modal/MinecraftRequiredModal.vue
@@ -63,9 +63,9 @@ import { inject, type Ref, ref } from 'vue'
 
 import steveImage from '@/assets/steve-look-up-left.webp'
 import type AccountsCard from '@/components/ui/AccountsCard.vue'
+import { handleSevereError } from '@/composables/use-error.js'
 import { trackEvent } from '@/helpers/analytics'
 import { login as loginFlow, set_default_user } from '@/helpers/auth.js'
-import { handleSevereError } from '@/store/error.js'
 
 const { formatMessage } = useVIntl()
 const accountsCard = inject('accountsCard') as Ref<InstanceType<typeof AccountsCard> | null>
diff --git a/apps/app-frontend/src/components/ui/modal/AppSettingsModal.vue b/apps/app-frontend/src/components/ui/modal/AppSettingsModal.vue
index 90f4b25499..97258665d3 100644
--- a/apps/app-frontend/src/components/ui/modal/AppSettingsModal.vue
+++ b/apps/app-frontend/src/components/ui/modal/AppSettingsModal.vue
@@ -36,16 +36,16 @@ import LanguageSettings from '@/components/ui/settings/display/LanguageSettings.
 import DefaultInstanceSettings from '@/components/ui/settings/instances/DefaultInstanceSettings.vue'
 import JavaSettings from '@/components/ui/settings/instances/JavaSettings.vue'
 import ResourceManagementSettings from '@/components/ui/settings/instances/ResourceManagementSettings.vue'
+import { useAppSettings } from '@/composables/use-app-settings.ts'
 import { get, set } from '@/helpers/settings.ts'
 import {
 	appSettingsModalContextKey,
 	type UnsavedChangesController,
 } from '@/providers/app-settings-modal'
 import { injectAppUpdateDownloadProgress } from '@/providers/download-progress.ts'
-import { useTheming } from '@/store/state'
 
 // TODO: Apply COMPONENT_STRUCTURE.md here and extract out common setting option components
-const themeStore = useTheming()
+const appSettings = useAppSettings()
 
 const { formatMessage } = useVIntl()
 
@@ -157,7 +157,9 @@ const tabs = [
 	},
 ]
 
-const availableTabs = computed(() => tabs.filter((tab) => !tab.developerOnly || themeStore.devMode))
+const availableTabs = computed(() =>
+	tabs.filter((tab) => !tab.developerOnly || appSettings.devMode),
+)
 
 const modal = ref<InstanceType<typeof TabbedModal> | null>(null)
 const unsavedChangesPopup = ref<{ nudge: () => void } | null>(null)
@@ -170,10 +172,19 @@ const modifiedUnsavedChangesState = computed(
 	() => unsavedChangesController.value?.getModified() ?? emptyUnsavedChangesState,
 )
 const savingUnsavedChanges = computed(() => unsavedChangesController.value?.isSaving() ?? false)
-const hasUnsavedChanges = computed(() => unsavedChangesController.value?.hasChanges() ?? false)
+const hasUnsavedChanges = computed(
+	() =>
+		(unsavedChangesController.value?.hasChanges() ?? false) ||
+		(unsavedChangesController.value?.isSaving() ?? false),
+)
 
 function canLeaveCurrentTab(): boolean {
-	if (!unsavedChangesController.value?.hasChanges()) return true
+	if (
+		!unsavedChangesController.value?.hasChanges() &&
+		!unsavedChangesController.value?.isSaving()
+	) {
+		return true
+	}
 	unsavedChangesPopup.value?.nudge()
 	return false
 }
@@ -233,8 +244,8 @@ function devModeCount() {
 	if (devModeCounter.value > 5) {
 		const selectedTab = modal.value ? availableTabs.value[modal.value.selectedTab] : undefined
 
-		themeStore.devMode = !themeStore.devMode
-		settings.value.developer_mode = !!themeStore.devMode
+		appSettings.devMode = !appSettings.devMode
+		settings.value.developer_mode = !!appSettings.devMode
 		devModeCounter.value = 0
 
 		if (modal.value) {
@@ -298,7 +309,7 @@ const messages = defineMessages({
 						<ProgressBar :progress="progress" />
 					</template>
 				</div>
-				<p v-if="themeStore.devMode" class="text-brand font-semibold m-0 mb-2">
+				<p v-if="appSettings.devMode" class="text-brand font-semibold m-0 mb-2">
 					{{ formatMessage(developerModeEnabled) }}
 				</p>
 				<div class="flex items-center gap-3">
@@ -306,8 +317,8 @@ const messages = defineMessages({
 						:aria-label="formatMessage(messages.developerModeButtonLabel)"
 						class="p-0 m-0 bg-transparent border-none cursor-pointer button-animation"
 						:class="{
-							'text-brand': themeStore.devMode,
-							'text-secondary': !themeStore.devMode,
+							'text-brand': appSettings.devMode,
+							'text-secondary': !appSettings.devMode,
 						}"
 						@click="devModeCount"
 					>
diff --git a/apps/app-frontend/src/components/ui/settings/account/SocialSettings.vue b/apps/app-frontend/src/components/ui/settings/account/SocialSettings.vue
index 15bb622c17..f74eae6598 100644
--- a/apps/app-frontend/src/components/ui/settings/account/SocialSettings.vue
+++ b/apps/app-frontend/src/components/ui/settings/account/SocialSettings.vue
@@ -1,5 +1,6 @@
 <template>
 	<AccountSocialSettings
+		ref="socialSettings"
 		:get-blocked-users="get_blocked_users"
 		:get-users="getUsers"
 		:unblock-user="unblock_user"
@@ -9,10 +10,29 @@
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
 import { AccountSocialSettings, injectModrinthClient } from '@modrinth/ui'
+import { inject, onBeforeUnmount, onMounted, ref } from 'vue'
 
 import { get_blocked_users, unblock_user } from '@/helpers/users'
+import { appSettingsModalContextKey } from '@/providers/app-settings-modal'
 
 const client = injectModrinthClient()
+const settingsModal = inject(appSettingsModalContextKey, null)
+const socialSettings = ref<InstanceType<typeof AccountSocialSettings> | null>(null)
+
+onMounted(() => {
+	settingsModal?.registerUnsavedChangesController({
+		hasChanges: () => socialSettings.value?.hasChanges ?? false,
+		getOriginal: () => socialSettings.value?.originalState ?? {},
+		getModified: () => socialSettings.value?.modifiedState ?? {},
+		isSaving: () => socialSettings.value?.saving ?? false,
+		reset: () => socialSettings.value?.reset(),
+		save: () => socialSettings.value?.save(),
+	})
+})
+
+onBeforeUnmount(() => {
+	settingsModal?.registerUnsavedChangesController(null)
+})
 
 function getUsers(userIds: string[]): Promise<Labrinth.Users.v2.User[]> {
 	return client.labrinth.users_v2.getMultiple(userIds)
diff --git a/apps/app-frontend/src/components/ui/settings/display/AppearanceSettings.vue b/apps/app-frontend/src/components/ui/settings/display/AppearanceSettings.vue
index 19acfad5ad..28fe08d0af 100644
--- a/apps/app-frontend/src/components/ui/settings/display/AppearanceSettings.vue
+++ b/apps/app-frontend/src/components/ui/settings/display/AppearanceSettings.vue
@@ -1,108 +1,154 @@
 <script setup lang="ts">
-import { defineMessages, ThemeSelector, Toggle, useVIntl } from '@modrinth/ui'
-import { computed, ref, watch } from 'vue'
+import {
+	AppearanceSettingsLayout,
+	injectAuth,
+	injectUserPreferences,
+	provideAppearanceSettings,
+	useSavable,
+} from '@modrinth/ui'
+import { computed, inject, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
-import { get, set } from '@/helpers/settings.ts'
+import { type ColorTheme, useTheme } from '@/composables/use-theme.ts'
+import { type AppSettings, get, set } from '@/helpers/settings.ts'
 import { getOS } from '@/helpers/utils'
-import { useTheming } from '@/store/state'
-import type { ColorTheme } from '@/store/theme.ts'
+import { appSettingsModalContextKey } from '@/providers/app-settings-modal'
 
-const themeStore = useTheming()
-const { formatMessage } = useVIntl()
-
-const messages = defineMessages({
-	colorThemeTitle: {
-		id: 'app.appearance-settings.color-theme.title',
-		defaultMessage: 'Color theme',
-	},
-	colorThemeDescription: {
-		id: 'app.appearance-settings.color-theme.description',
-		defaultMessage: 'Choose the color theme used by Modrinth App.',
-	},
-	advancedRenderingTitle: {
-		id: 'app.appearance-settings.advanced-rendering.title',
-		defaultMessage: 'Advanced rendering',
-	},
-	advancedRenderingDescription: {
-		id: 'app.appearance-settings.advanced-rendering.description',
-		defaultMessage:
-			'Enable visual effects such as background blur. This may reduce performance without hardware acceleration.',
-	},
-	nativeDecorationsTitle: {
-		id: 'app.appearance-settings.native-decorations.title',
-		defaultMessage: 'System window frame',
-	},
-	nativeDecorationsDescription: {
-		id: 'app.appearance-settings.native-decorations.description',
-		defaultMessage:
-			"Use your operating system's title bar and window controls. Requires an app restart.",
-	},
-})
-
-const os = ref(await getOS())
+const theme = useTheme()
+const auth = injectAuth()
+const { updatePreferences } = injectUserPreferences()
+const settingsModal = inject(appSettingsModalContextKey, null)
+const os = await getOS()
 const settings = ref(await get())
-const themeOptions = computed(() =>
-	themeStore
-		.getThemeOptions()
-		.filter((theme) => theme !== 'retro' || themeStore.devMode || settings.value.theme === 'retro'),
+
+type AppearanceSettingsState = {
+	theme: ColorTheme
+	syncAcrossDevices: boolean
+	advancedRendering: boolean
+	nativeDecorations: boolean
+}
+
+function getAppearanceSettingsState(settings: AppSettings): AppearanceSettingsState {
+	return {
+		theme: settings.theme,
+		syncAcrossDevices: settings.sync_theme_across_devices,
+		advancedRendering: settings.advanced_rendering,
+		nativeDecorations: settings.native_decorations,
+	}
+}
+
+const { saved, current, changes, saving, hasChanges, reset, save } = useSavable(
+	() => getAppearanceSettingsState(settings.value),
+	async (appearanceChanges) => {
+		const value = current.value
+		if (
+			value.syncAcrossDevices &&
+			auth.user.value &&
+			(appearanceChanges.theme !== undefined || appearanceChanges.syncAcrossDevices !== undefined)
+		) {
+			await updatePreferences({
+				appearance: value.theme === 'system' ? { auto: true } : { auto: false, theme: value.theme },
+			})
+		}
+
+		const nextSettings: AppSettings = {
+			...settings.value,
+			theme: value.theme,
+			sync_theme_across_devices: value.syncAcrossDevices,
+			advanced_rendering: value.advancedRendering,
+			native_decorations: value.nativeDecorations,
+		}
+
+		await set(nextSettings)
+		settings.value = nextSettings
+		theme.preferred = value.theme
+		theme.syncAcrossDevices = value.syncAcrossDevices
+		theme.advancedRendering = value.advancedRendering
+	},
 )
 
+const themeOptions = computed(() =>
+	theme.options.filter(
+		(option) =>
+			option !== 'retro' || settings.value.developer_mode || current.value.theme === 'retro',
+	),
+)
+
+function setTheme(value: ColorTheme): void {
+	current.value.theme = value
+}
+
+function setSyncAcrossDevices(enabled: boolean): void {
+	current.value.syncAcrossDevices = enabled
+}
+
+function setAdvancedRendering(enabled: boolean): void {
+	current.value.advancedRendering = enabled
+}
+
+function setNativeDecorations(enabled: boolean): void {
+	current.value.nativeDecorations = enabled
+}
+
 watch(
-	settings,
-	async () => {
-		await set(settings.value)
+	[() => current.value.theme, () => saved.value.theme],
+	([selectedTheme, savedTheme]) => {
+		theme.preview = selectedTheme === savedTheme ? null : selectedTheme
 	},
-	{ deep: true },
+	{ immediate: true },
 )
-</script>
-<template>
-	<h2 class="m-0 text-lg font-semibold text-contrast">
-		{{ formatMessage(messages.colorThemeTitle) }}
-	</h2>
 
-	<p class="m-0 mt-1">{{ formatMessage(messages.colorThemeDescription) }}</p>
+async function saveAppearanceSettings(): Promise<void> {
+	try {
+		await save()
+	} catch {
+		return
+	}
+}
 
-	<ThemeSelector
-		:update-color-theme="
-			(theme: ColorTheme) => {
-				themeStore.setThemeState(theme)
-				settings.theme = theme
-			}
-		"
-		:current-theme="settings.theme"
-		:theme-options="themeOptions"
-		system-theme-color="system"
-	/>
+onMounted(() => {
+	settingsModal?.registerUnsavedChangesController({
+		hasChanges: () => hasChanges.value,
+		getOriginal: () => saved.value,
+		getModified: () => changes.value,
+		isSaving: () => saving.value,
+		reset,
+		save: saveAppearanceSettings,
+	})
+})
 
-	<div class="mt-6 flex items-center justify-between">
-		<div>
-			<h2 class="m-0 text-lg font-semibold text-contrast">
-				{{ formatMessage(messages.advancedRenderingTitle) }}
-			</h2>
-			<p class="m-0 mt-1">
-				{{ formatMessage(messages.advancedRenderingDescription) }}
-			</p>
-		</div>
+onBeforeUnmount(() => {
+	theme.preview = null
+	settingsModal?.registerUnsavedChangesController(null)
+})
 
-		<Toggle
-			id="advanced-rendering"
-			:model-value="themeStore.advancedRendering"
-			@update:model-value="
-				(e) => {
-					themeStore.advancedRendering = !!e
-					settings.advanced_rendering = themeStore.advancedRendering
+provideAppearanceSettings({
+	deferPersistence: true,
+	theme: {
+		current: computed(() => current.value.theme),
+		options: themeOptions,
+		system: computed(() => theme.native),
+		set: setTheme,
+		syncAcrossDevices: {
+			value: computed(() => current.value.syncAcrossDevices),
+			set: setSyncAcrossDevices,
+		},
+		syncDisabled: computed(() => !auth.user.value),
+	},
+	advancedRendering: {
+		value: computed(() => current.value.advancedRendering),
+		set: setAdvancedRendering,
+	},
+	nativeDecorations:
+		os !== 'MacOS'
+			? {
+					value: computed(() => current.value.nativeDecorations),
+					set: setNativeDecorations,
 				}
-			"
-		/>
-	</div>
+			: undefined,
+	updatePreferences,
+})
+</script>
 
-	<div v-if="os !== 'MacOS'" class="mt-6 flex items-center justify-between gap-4">
-		<div>
-			<h2 class="m-0 text-lg font-semibold text-contrast">
-				{{ formatMessage(messages.nativeDecorationsTitle) }}
-			</h2>
-			<p class="m-0 mt-1">{{ formatMessage(messages.nativeDecorationsDescription) }}</p>
-		</div>
-		<Toggle id="native-decorations" v-model="settings.native_decorations" />
-	</div>
+<template>
+	<AppearanceSettingsLayout />
 </template>
diff --git a/apps/app-frontend/src/components/ui/settings/display/BehaviorSettings.vue b/apps/app-frontend/src/components/ui/settings/display/BehaviorSettings.vue
index 80de14a718..06a8b3901d 100644
--- a/apps/app-frontend/src/components/ui/settings/display/BehaviorSettings.vue
+++ b/apps/app-frontend/src/components/ui/settings/display/BehaviorSettings.vue
@@ -1,13 +1,27 @@
 <script setup lang="ts">
-import { defineMessages, Toggle, useVIntl } from '@modrinth/ui'
-import { ref, watch } from 'vue'
+import {
+	defineMessages,
+	injectAuth,
+	injectUserPreferences,
+	Toggle,
+	useSavable,
+	useVIntl,
+} from '@modrinth/ui'
+import { inject, onBeforeUnmount, onMounted, ref } from 'vue'
 
-import { get, set } from '@/helpers/settings.ts'
-import { useTheming } from '@/store/state'
-import type { FeatureFlag } from '@/store/theme.ts'
+import {
+	DEFAULT_FEATURE_FLAGS,
+	type FeatureFlag,
+	useAppSettings,
+} from '@/composables/use-app-settings.ts'
+import { type AppSettings, get, set } from '@/helpers/settings.ts'
+import { appSettingsModalContextKey } from '@/providers/app-settings-modal'
 
-const themeStore = useTheming()
+const appSettings = useAppSettings()
 const { formatMessage } = useVIntl()
+const auth = injectAuth()
+const { updatePreferences } = injectUserPreferences()
+const settingsModal = inject(appSettingsModalContextKey, null)
 
 const worldsInHomeFlag: FeatureFlag = 'worlds_in_home'
 const skipNonEssentialWarningsFlag: FeatureFlag = 'skip_non_essential_warnings'
@@ -15,6 +29,19 @@ const skipUnknownPackWarningFlag: FeatureFlag = 'skip_unknown_pack_warning'
 const showPlayTimeFlag: FeatureFlag = 'show_instance_play_time'
 
 const messages = defineMessages({
+	syncAcrossDevicesTitle: {
+		id: 'app.behavior-settings.sync-across-devices.title',
+		defaultMessage: 'Sync behavior across devices',
+	},
+	syncAcrossDevicesDescription: {
+		id: 'app.behavior-settings.sync-across-devices.description',
+		defaultMessage:
+			"Use these behavior settings everywhere you're signed in. Turn this off to keep separate settings on this device.",
+	},
+	syncAcrossDevicesSignedOutTooltip: {
+		id: 'app.behavior-settings.sync-across-devices.signed-out-tooltip',
+		defaultMessage: 'Sign into a Modrinth account to sync settings.',
+	},
 	startupAndNavigationTitle: {
 		id: 'app.behavior-settings.startup-and-navigation.title',
 		defaultMessage: 'Startup and navigation',
@@ -96,18 +123,136 @@ const messages = defineMessages({
 	},
 })
 
-const settings = ref(await get())
+type BehaviorSettingsState = {
+	syncBehaviorAcrossDevices: boolean
+	minimizeApp: boolean
+	hideRightSidebar: boolean
+	showJumpIn: boolean
+	showPlayTime: boolean
+	hideNametag: boolean
+	warnOnUnknownModpacks: boolean
+	skipNonEssentialWarnings: boolean
+}
 
-watch(
-	settings,
+const persistedSettings = ref(await get())
+
+function getBehaviorSettingsState(settings: AppSettings): BehaviorSettingsState {
+	return {
+		syncBehaviorAcrossDevices: settings.sync_behavior_across_devices,
+		minimizeApp: settings.hide_on_process_start,
+		hideRightSidebar: settings.toggle_sidebar,
+		showJumpIn: settings.feature_flags[worldsInHomeFlag] ?? DEFAULT_FEATURE_FLAGS[worldsInHomeFlag],
+		showPlayTime:
+			settings.feature_flags[showPlayTimeFlag] ?? DEFAULT_FEATURE_FLAGS[showPlayTimeFlag],
+		hideNametag: settings.hide_nametag_skins_page,
+		warnOnUnknownModpacks: !(
+			settings.feature_flags[skipUnknownPackWarningFlag] ??
+			DEFAULT_FEATURE_FLAGS[skipUnknownPackWarningFlag]
+		),
+		skipNonEssentialWarnings:
+			settings.feature_flags[skipNonEssentialWarningsFlag] ??
+			DEFAULT_FEATURE_FLAGS[skipNonEssentialWarningsFlag],
+	}
+}
+
+const { saved, current, changes, saving, hasChanges, reset, save } = useSavable(
+	() => getBehaviorSettingsState(persistedSettings.value),
 	async () => {
-		await set(settings.value)
+		const value = current.value
+
+		if (value.syncBehaviorAcrossDevices && auth.user.value) {
+			await updatePreferences({
+				behavior: {
+					minimize_app: value.minimizeApp,
+					hide_right_sidebar: value.hideRightSidebar,
+					show_jump_in: value.showJumpIn,
+					show_play_time: value.showPlayTime,
+					hide_nametag: value.hideNametag,
+					warn_on_unknown_modpacks: value.warnOnUnknownModpacks,
+					skip_non_essential_warnings: value.skipNonEssentialWarnings,
+				},
+			})
+		}
+
+		const nextSettings: AppSettings = {
+			...persistedSettings.value,
+			sync_behavior_across_devices: value.syncBehaviorAcrossDevices,
+			hide_on_process_start: value.minimizeApp,
+			toggle_sidebar: value.hideRightSidebar,
+			hide_nametag_skins_page: value.hideNametag,
+			feature_flags: {
+				...persistedSettings.value.feature_flags,
+				[worldsInHomeFlag]: value.showJumpIn,
+				[showPlayTimeFlag]: value.showPlayTime,
+				[skipUnknownPackWarningFlag]: !value.warnOnUnknownModpacks,
+				[skipNonEssentialWarningsFlag]: value.skipNonEssentialWarnings,
+			},
+		}
+
+		await set(nextSettings)
+		persistedSettings.value = nextSettings
+		appSettings.setBehaviorSyncAcrossDevices(value.syncBehaviorAcrossDevices)
+		appSettings.toggleSidebar = value.hideRightSidebar
+		appSettings.hideNametagSkinsPage = value.hideNametag
+		appSettings.featureFlags[worldsInHomeFlag] = value.showJumpIn
+		appSettings.featureFlags[showPlayTimeFlag] = value.showPlayTime
+		appSettings.featureFlags[skipUnknownPackWarningFlag] = !value.warnOnUnknownModpacks
+		appSettings.featureFlags[skipNonEssentialWarningsFlag] = value.skipNonEssentialWarnings
 	},
-	{ deep: true },
 )
+
+async function saveBehaviorSettings(): Promise<void> {
+	try {
+		await save()
+	} catch {
+		return
+	}
+}
+
+onMounted(() => {
+	settingsModal?.registerUnsavedChangesController({
+		hasChanges: () => hasChanges.value,
+		getOriginal: () => saved.value,
+		getModified: () => changes.value,
+		isSaving: () => saving.value,
+		reset,
+		save: saveBehaviorSettings,
+	})
+})
+
+onBeforeUnmount(() => {
+	settingsModal?.registerUnsavedChangesController(null)
+})
 </script>
 <template>
-	<section>
+	<section class="border-0 border-b border-solid border-divider pb-6">
+		<div class="flex items-center justify-between gap-4">
+			<div>
+				<h2 id="sync-behavior-across-devices-label" class="m-0 text-lg font-semibold text-contrast">
+					{{ formatMessage(messages.syncAcrossDevicesTitle) }}
+				</h2>
+				<p class="m-0 mt-1 text-secondary">
+					{{ formatMessage(messages.syncAcrossDevicesDescription) }}
+				</p>
+			</div>
+			<span
+				v-tooltip="
+					!auth.user.value ? formatMessage(messages.syncAcrossDevicesSignedOutTooltip) : undefined
+				"
+				class="inline-flex shrink-0"
+			>
+				<Toggle
+					id="sync-behavior-across-devices"
+					:model-value="Boolean(auth.user.value) && current.syncBehaviorAcrossDevices"
+					:disabled="!auth.user.value"
+					aria-labelledby="sync-behavior-across-devices-label"
+					@update:model-value="current.syncBehaviorAcrossDevices = $event"
+				/>
+			</span>
+		</div>
+	</section>
+
+	<section class="mt-6">
 		<h2 class="m-0 text-xl font-semibold text-contrast">
 			{{ formatMessage(messages.startupAndNavigationTitle) }}
 		</h2>
@@ -121,7 +266,7 @@ watch(
 						{{ formatMessage(messages.minimizeLauncherDescription) }}
 					</p>
 				</div>
-				<Toggle id="minimize-launcher" v-model="settings.hide_on_process_start" />
+				<Toggle id="minimize-launcher" v-model="current.minimizeApp" />
 			</div>
 
 			<div class="flex items-center justify-between gap-4">
@@ -131,16 +276,7 @@ watch(
 					</h3>
 					<p class="m-0 mt-1">{{ formatMessage(messages.toggleSidebarDescription) }}</p>
 				</div>
-				<Toggle
-					id="toggle-sidebar"
-					:model-value="settings.toggle_sidebar"
-					@update:model-value="
-						(e) => {
-							settings.toggle_sidebar = !!e
-							themeStore.toggleSidebar = settings.toggle_sidebar
-						}
-					"
-				/>
+				<Toggle id="toggle-sidebar" v-model="current.hideRightSidebar" />
 			</div>
 		</div>
 	</section>
@@ -159,17 +295,7 @@ watch(
 						{{ formatMessage(messages.jumpBackIntoWorldsDescription) }}
 					</p>
 				</div>
-				<Toggle
-					id="jump-back-into-worlds"
-					:model-value="themeStore.getFeatureFlag(worldsInHomeFlag)"
-					@update:model-value="
-						() => {
-							const newValue = !themeStore.getFeatureFlag(worldsInHomeFlag)
-							themeStore.featureFlags[worldsInHomeFlag] = newValue
-							settings.feature_flags[worldsInHomeFlag] = newValue
-						}
-					"
-				/>
+				<Toggle id="jump-back-into-worlds" v-model="current.showJumpIn" />
 			</div>
 
 			<div class="flex items-center justify-between gap-4">
@@ -179,17 +305,7 @@ watch(
 					</h3>
 					<p class="m-0 mt-1">{{ formatMessage(messages.showPlayTimeDescription) }}</p>
 				</div>
-				<Toggle
-					id="show-play-time"
-					:model-value="themeStore.getFeatureFlag(showPlayTimeFlag)"
-					@update:model-value="
-						() => {
-							const newValue = !themeStore.getFeatureFlag(showPlayTimeFlag)
-							themeStore.featureFlags[showPlayTimeFlag] = newValue
-							settings.feature_flags[showPlayTimeFlag] = newValue
-						}
-					"
-				/>
+				<Toggle id="show-play-time" v-model="current.showPlayTime" />
 			</div>
 
 			<div class="flex items-center justify-between gap-4">
@@ -199,16 +315,7 @@ watch(
 					</h3>
 					<p class="m-0 mt-1">{{ formatMessage(messages.hideNametagDescription) }}</p>
 				</div>
-				<Toggle
-					id="hide-nametag-skins-page"
-					:model-value="themeStore.hideNametagSkinsPage"
-					@update:model-value="
-						(e) => {
-							themeStore.hideNametagSkinsPage = !!e
-							settings.hide_nametag_skins_page = themeStore.hideNametagSkinsPage
-						}
-					"
-				/>
+				<Toggle id="hide-nametag-skins-page" v-model="current.hideNametag" />
 			</div>
 		</div>
 	</section>
@@ -229,15 +336,7 @@ watch(
 				</div>
 				<Toggle
 					id="warn-before-installing-unknown-modpacks"
-					:model-value="!themeStore.getFeatureFlag(skipUnknownPackWarningFlag)"
-					@update:model-value="
-						(e) => {
-							const warnBeforeUnknownPackInstall = !!e
-							const skipUnknownPackWarning = !warnBeforeUnknownPackInstall
-							themeStore.featureFlags[skipUnknownPackWarningFlag] = skipUnknownPackWarning
-							settings.feature_flags[skipUnknownPackWarningFlag] = skipUnknownPackWarning
-						}
-					"
+					v-model="current.warnOnUnknownModpacks"
 				/>
 			</div>
 
@@ -250,17 +349,7 @@ watch(
 						{{ formatMessage(messages.skipNonEssentialWarningsDescription) }}
 					</p>
 				</div>
-				<Toggle
-					id="skip-non-essential-warnings"
-					:model-value="themeStore.getFeatureFlag(skipNonEssentialWarningsFlag)"
-					@update:model-value="
-						() => {
-							const newValue = !themeStore.getFeatureFlag(skipNonEssentialWarningsFlag)
-							themeStore.featureFlags[skipNonEssentialWarningsFlag] = newValue
-							settings.feature_flags[skipNonEssentialWarningsFlag] = newValue
-						}
-					"
-				/>
+				<Toggle id="skip-non-essential-warnings" v-model="current.skipNonEssentialWarnings" />
 			</div>
 		</div>
 	</section>
diff --git a/apps/app-frontend/src/components/ui/settings/display/FeatureFlagSettings.vue b/apps/app-frontend/src/components/ui/settings/display/FeatureFlagSettings.vue
index 29f314f140..aa6f0448f8 100644
--- a/apps/app-frontend/src/components/ui/settings/display/FeatureFlagSettings.vue
+++ b/apps/app-frontend/src/components/ui/settings/display/FeatureFlagSettings.vue
@@ -2,17 +2,20 @@
 import { Button, Toggle } from '@modrinth/ui'
 import { ref, watch } from 'vue'
 
+import {
+	DEFAULT_FEATURE_FLAGS,
+	type FeatureFlag,
+	useAppSettings,
+} from '@/composables/use-app-settings.ts'
 import { get as getSettings, set as setSettings } from '@/helpers/settings.ts'
-import { useTheming } from '@/store/state'
-import { DEFAULT_FEATURE_FLAGS, type FeatureFlag } from '@/store/theme.ts'
 
-const themeStore = useTheming()
+const appSettings = useAppSettings()
 
 const settings = ref(await getSettings())
-const options = ref<FeatureFlag[]>(Object.keys(DEFAULT_FEATURE_FLAGS))
+const options = ref(Object.keys(DEFAULT_FEATURE_FLAGS) as FeatureFlag[])
 
-function setFeatureFlag(key: string, value: boolean) {
-	themeStore.featureFlags[key] = value
+function setFeatureFlag(key: FeatureFlag, value: boolean) {
+	appSettings.featureFlags[key] = value
 	settings.value.feature_flags[key] = value
 }
 
@@ -35,15 +38,15 @@ watch(
 			<div class="flex items-center gap-2">
 				<Button
 					type="quiet"
-					:disabled="themeStore.getFeatureFlag(option) === DEFAULT_FEATURE_FLAGS[option]"
+					:disabled="appSettings.getFeatureFlag(option) === DEFAULT_FEATURE_FLAGS[option]"
 					@click="setFeatureFlag(option, DEFAULT_FEATURE_FLAGS[option])"
 				>
 					Reset to default
 				</Button>
 				<Toggle
 					id="advanced-rendering"
-					:model-value="themeStore.getFeatureFlag(option)"
-					@update:model-value="() => setFeatureFlag(option, !themeStore.getFeatureFlag(option))"
+					:model-value="appSettings.getFeatureFlag(option)"
+					@update:model-value="() => setFeatureFlag(option, !appSettings.getFeatureFlag(option))"
 				/>
 			</div>
 		</div>
diff --git a/apps/app-frontend/src/components/ui/settings/display/LanguageSettings.vue b/apps/app-frontend/src/components/ui/settings/display/LanguageSettings.vue
index 01f4384bcc..0083a46e7a 100644
--- a/apps/app-frontend/src/components/ui/settings/display/LanguageSettings.vue
+++ b/apps/app-frontend/src/components/ui/settings/display/LanguageSettings.vue
@@ -1,74 +1,35 @@
+<template>
+	<SharedLanguageSettings ref="languageSettings" product="app" :persist-locale="persistLocale" />
+</template>
+
 <script setup lang="ts">
-import {
-	Admonition,
-	AutoLink,
-	commonSettingsMessages,
-	IntlFormatted,
-	LanguageSelector,
-	languageSelectorMessages,
-	LOCALES,
-	useVIntl,
-} from '@modrinth/ui'
-import { computed, ref, watch } from 'vue'
+import { LanguageSettings as SharedLanguageSettings } from '@modrinth/ui'
+import { inject, onBeforeUnmount, onMounted, ref } from 'vue'
 
 import { get, set } from '@/helpers/settings.ts'
-import i18n from '@/i18n.config'
+import { appSettingsModalContextKey } from '@/providers/app-settings-modal'
 
-const { formatMessage } = useVIntl()
+const settingsModal = inject(appSettingsModalContextKey, null)
+const languageSettings = ref<InstanceType<typeof SharedLanguageSettings> | null>(null)
 
-const platform = computed(() => formatMessage(languageSelectorMessages.platformApp))
+onMounted(() => {
+	settingsModal?.registerUnsavedChangesController({
+		hasChanges: () => languageSettings.value?.hasChanges ?? false,
+		getOriginal: () => languageSettings.value?.originalState ?? {},
+		getModified: () => languageSettings.value?.modifiedState ?? {},
+		isSaving: () => languageSettings.value?.saving ?? false,
+		reset: () => languageSettings.value?.reset(),
+		save: () => languageSettings.value?.save(),
+	})
+})
 
-const settings = ref(await get())
+onBeforeUnmount(() => {
+	settingsModal?.registerUnsavedChangesController(null)
+})
 
-watch(
-	settings,
-	async () => {
-		await set(settings.value)
-	},
-	{ deep: true },
-)
-
-const $isChanging = ref(false)
-
-async function onLocaleChange(newLocale: string) {
-	if (settings.value.locale === newLocale) return
-
-	$isChanging.value = true
-	try {
-		i18n.global.locale.value = newLocale
-		settings.value.locale = newLocale
-	} finally {
-		$isChanging.value = false
-	}
+async function persistLocale(locale: string): Promise<void> {
+	const settings = await get()
+	if (settings.locale === locale) return
+	await set({ ...settings, locale })
 }
 </script>
-
-<template>
-	<h2 class="m-0 text-lg font-semibold text-contrast">
-		{{ formatMessage(commonSettingsMessages.language) }}
-	</h2>
-
-	<Admonition type="warning" class="mt-2 mb-4">
-		{{ formatMessage(languageSelectorMessages.languageWarning, { platform }) }}
-	</Admonition>
-
-	<p class="m-0 mb-4">
-		<IntlFormatted
-			:message-id="languageSelectorMessages.languagesDescription"
-			:values="{ platform }"
-		>
-			<template #~crowdin-link="{ children }">
-				<AutoLink to="https://translate.modrinth.com">
-					<component :is="() => children" />
-				</AutoLink>
-			</template>
-		</IntlFormatted>
-	</p>
-
-	<LanguageSelector
-		:current-locale="settings.locale"
-		:locales="LOCALES"
-		:on-locale-change="onLocaleChange"
-		:is-changing="$isChanging"
-	/>
-</template>
diff --git a/apps/app-frontend/src/components/ui/settings/instances/ResourceManagementSettings.vue b/apps/app-frontend/src/components/ui/settings/instances/ResourceManagementSettings.vue
index 0fc1a131f6..55d6404005 100644
--- a/apps/app-frontend/src/components/ui/settings/instances/ResourceManagementSettings.vue
+++ b/apps/app-frontend/src/components/ui/settings/instances/ResourceManagementSettings.vue
@@ -14,14 +14,14 @@ import { open } from '@tauri-apps/plugin-dialog'
 import { ref, watch } from 'vue'
 
 import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
+import { useAppSettings } from '@/composables/use-app-settings.ts'
 import { purge_cache_types } from '@/helpers/cache.js'
 import { get, set } from '@/helpers/settings.ts'
 import { showAppDbBackupsFolder } from '@/helpers/utils.js'
-import { useTheming } from '@/store/state'
 
 const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
-const themeStore = useTheming()
+const appSettings = useAppSettings()
 const settings = ref(await get())
 const purgeCacheConfirmModal = ref(null)
 const alwaysShowCopyDetailsFlag = 'always_show_copy_details'
@@ -145,7 +145,7 @@ async function purgeCache() {
 }
 
 function handlePurgeCacheClick() {
-	if (themeStore.getFeatureFlag('skip_non_essential_warnings')) {
+	if (appSettings.getFeatureFlag('skip_non_essential_warnings')) {
 		void purgeCache()
 		return
 	}
@@ -210,11 +210,11 @@ async function findLauncherDir() {
 			</div>
 			<Toggle
 				id="always-show-copy-details"
-				:model-value="themeStore.getFeatureFlag(alwaysShowCopyDetailsFlag)"
+				:model-value="appSettings.getFeatureFlag(alwaysShowCopyDetailsFlag)"
 				@update:model-value="
 					() => {
-						const newValue = !themeStore.getFeatureFlag(alwaysShowCopyDetailsFlag)
-						themeStore.featureFlags[alwaysShowCopyDetailsFlag] = newValue
+						const newValue = !appSettings.getFeatureFlag(alwaysShowCopyDetailsFlag)
+						appSettings.featureFlags[alwaysShowCopyDetailsFlag] = newValue
 						settings.feature_flags[alwaysShowCopyDetailsFlag] = newValue
 					}
 				"
diff --git a/apps/app-frontend/src/components/ui/shared-instances/shared-instance-invite-handler/use-shared-instance-invite-handler.ts b/apps/app-frontend/src/components/ui/shared-instances/shared-instance-invite-handler/use-shared-instance-invite-handler.ts
index 7135fa99df..00bd70b9c0 100644
--- a/apps/app-frontend/src/components/ui/shared-instances/shared-instance-invite-handler/use-shared-instance-invite-handler.ts
+++ b/apps/app-frontend/src/components/ui/shared-instances/shared-instance-invite-handler/use-shared-instance-invite-handler.ts
@@ -9,6 +9,7 @@ import { useQueryClient } from '@tanstack/vue-query'
 import { type Ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 
+import { useAppSettings } from '@/composables/use-app-settings.ts'
 import { get_user } from '@/helpers/cache'
 import { toError } from '@/helpers/errors'
 import {
@@ -18,7 +19,6 @@ import {
 } from '@/helpers/install'
 import { list } from '@/helpers/instance'
 import { useSharedInstanceErrors } from '@/helpers/shared-instance-errors'
-import { useTheming } from '@/store/state'
 
 import { parseSharedInstanceInviteNotification } from './shared-instance-invite-parser'
 import type { AppNotification, SharedInstanceInvite } from './shared-instance-invite-types'
@@ -58,7 +58,7 @@ export function useSharedInstanceInviteHandler(
 	const popupNotificationManager = injectPopupNotificationManager()
 	const queryClient = useQueryClient()
 	const router = useRouter()
-	const themeStore = useTheming()
+	const appSettings = useAppSettings()
 	const displayedNotifications = new Set<string | number>()
 	const displayedNotificationKeys = new Set<string>()
 	const popupNotificationIds = new Set<string | number>()
@@ -121,7 +121,7 @@ export function useSharedInstanceInviteHandler(
 			(instance) => instance.shared_instance?.id === sharedInstanceId,
 		)
 
-		if (!existingInstance || themeStore.getFeatureFlag('skip_non_essential_warnings')) {
+		if (!existingInstance || appSettings.getFeatureFlag('skip_non_essential_warnings')) {
 			showInstall(preview, install, creator)
 			return
 		}
diff --git a/apps/app-frontend/src/components/ui/world/InstanceItem.vue b/apps/app-frontend/src/components/ui/world/InstanceItem.vue
index 4dc5bd4850..f922cc7809 100644
--- a/apps/app-frontend/src/components/ui/world/InstanceItem.vue
+++ b/apps/app-frontend/src/components/ui/world/InstanceItem.vue
@@ -28,12 +28,12 @@ import { computed, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
 import { useAppEvent } from '@/composables/use-app-event'
+import { handleSevereError } from '@/composables/use-error.js'
 import { trackEvent } from '@/helpers/analytics'
 import { getInstanceIconUrl, kill, run } from '@/helpers/instance'
 import { get_by_instance_id } from '@/helpers/process'
 import type { GameInstance } from '@/helpers/types'
 import { showInstanceInFolder } from '@/helpers/utils'
-import { handleSevereError } from '@/store/error'
 
 const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
diff --git a/apps/app-frontend/src/components/ui/world/RecentWorldsList.vue b/apps/app-frontend/src/components/ui/world/RecentWorldsList.vue
index bf6c0d84d8..6616db088c 100644
--- a/apps/app-frontend/src/components/ui/world/RecentWorldsList.vue
+++ b/apps/app-frontend/src/components/ui/world/RecentWorldsList.vue
@@ -10,6 +10,8 @@ import { computed, onMounted, ref, watch } from 'vue'
 import InstanceItem from '@/components/ui/world/InstanceItem.vue'
 import WorldItem from '@/components/ui/world/WorldItem.vue'
 import { useAppEvent } from '@/composables/use-app-event'
+import { useAppSettings } from '@/composables/use-app-settings.ts'
+import { handleSevereError } from '@/composables/use-error.js'
 import { trackEvent } from '@/helpers/analytics'
 import { kill, run } from '@/helpers/instance'
 import { get_all } from '@/helpers/process'
@@ -29,8 +31,6 @@ import {
 	start_join_singleplayer_world,
 	type WorldWithInstance,
 } from '@/helpers/worlds.ts'
-import { handleSevereError } from '@/store/error'
-import { useTheming } from '@/store/theme.ts'
 
 const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
@@ -42,7 +42,7 @@ const props = defineProps<{
 	recentInstances: GameInstance[]
 }>()
 
-const theme = useTheming()
+const appSettings = useAppSettings()
 
 const jumpBackInItems = ref<JumpBackInItem[]>([])
 const loading = ref(true)
@@ -76,7 +76,7 @@ type WorldJumpBackInItem = BaseJumpBackInItem & {
 
 type JumpBackInItem = InstanceJumpBackInItem | WorldJumpBackInItem
 
-const showWorlds = computed(() => theme.getFeatureFlag('worlds_in_home'))
+const showWorlds = computed(() => appSettings.getFeatureFlag('worlds_in_home'))
 
 watch([() => props.recentInstances, () => showWorlds.value], async () => {
 	await populateJumpBackIn().catch(() => {
diff --git a/apps/app-frontend/src/composables/browse/install-job-notifications.ts b/apps/app-frontend/src/composables/browse/install-job-notifications.ts
index 7572434d36..c45a61cfff 100644
--- a/apps/app-frontend/src/composables/browse/install-job-notifications.ts
+++ b/apps/app-frontend/src/composables/browse/install-job-notifications.ts
@@ -10,6 +10,7 @@ import { convertFileSrc } from '@tauri-apps/api/core'
 import { computed, ref } from 'vue'
 import type { Router } from 'vue-router'
 
+import { useAppSettings } from '@/composables/use-app-settings.ts'
 import {
 	install_job_dismiss,
 	install_job_list,
@@ -23,7 +24,6 @@ import {
 } from '@/helpers/install'
 import { get_many as getInstances } from '@/helpers/instance'
 import { injectAppEvents } from '@/providers/app-events'
-import { useTheming } from '@/store/state'
 
 const messages = defineMessages({
 	installs: {
@@ -236,7 +236,7 @@ export async function useInstallJobNotifications(opts: {
 }) {
 	const appEvents = injectAppEvents()
 	const { formatMessage } = useVIntl()
-	const themeStore = useTheming()
+	const appSettings = useAppSettings()
 	const jobs = ref<InstallJobSnapshot[]>([])
 	const iconUrls = ref<Record<string, string | null>>({})
 	const instanceNames = ref<Record<string, string>>({})
@@ -421,7 +421,7 @@ export async function useInstallJobNotifications(opts: {
 	}
 
 	function shouldShowCopyDetails(job: InstallJobSnapshot): boolean {
-		return isTerminalJob(job) || themeStore.getFeatureFlag('always_show_copy_details')
+		return isTerminalJob(job) || appSettings.getFeatureFlag('always_show_copy_details')
 	}
 
 	function isCopied(job: InstallJobSnapshot): boolean {
diff --git a/apps/app-frontend/src/composables/use-app-settings.ts b/apps/app-frontend/src/composables/use-app-settings.ts
new file mode 100644
index 0000000000..4ef0a51609
--- /dev/null
+++ b/apps/app-frontend/src/composables/use-app-settings.ts
@@ -0,0 +1,52 @@
+import { reactive, ref } from 'vue'
+
+export const DEFAULT_FEATURE_FLAGS = {
+	project_background: false,
+	page_path: false,
+	worlds_in_home: true,
+	server_project_qa: false,
+	show_version_environment_column: false,
+	server_ram_as_bytes_always_on: false,
+	always_show_app_controls: false,
+	skip_non_essential_warnings: false,
+	skip_unknown_pack_warning: false,
+	pride_fundraiser: true,
+	i18n_debug: false,
+	show_instance_play_time: true,
+	advanced_filters_collapsed: true,
+	always_show_copy_details: false,
+	hide_installed_modpacks: false,
+	friends_active_collapsed: false,
+	friends_online_collapsed: false,
+	friends_offline_collapsed: true,
+	friends_pending_collapsed: true,
+	dismissed_photosensitivity_filter_warning: false,
+}
+
+export type FeatureFlag = keyof typeof DEFAULT_FEATURE_FLAGS
+type FeatureFlags = Record<FeatureFlag, boolean>
+
+const syncBehaviorAcrossDevices = ref(false)
+const featureFlags = reactive<FeatureFlags>({ ...DEFAULT_FEATURE_FLAGS })
+
+function setBehaviorSyncAcrossDevices(enabled: boolean): void {
+	syncBehaviorAcrossDevices.value = enabled
+}
+
+function getFeatureFlag(key: FeatureFlag): boolean {
+	return featureFlags[key] ?? DEFAULT_FEATURE_FLAGS[key]
+}
+
+const appSettings = reactive({
+	syncBehaviorAcrossDevices,
+	hideNametagSkinsPage: false,
+	toggleSidebar: false,
+	devMode: false,
+	featureFlags,
+	setBehaviorSyncAcrossDevices,
+	getFeatureFlag,
+})
+
+export function useAppSettings() {
+	return appSettings
+}
diff --git a/apps/app-frontend/src/composables/use-error.js b/apps/app-frontend/src/composables/use-error.js
new file mode 100644
index 0000000000..8323630733
--- /dev/null
+++ b/apps/app-frontend/src/composables/use-error.js
@@ -0,0 +1,48 @@
+import { reactive } from 'vue'
+
+import { findMinecraftAuthError } from '@/components/ui/minecraft-auth-error-modal/minecraft-auth-errors'
+
+const errorState = reactive({
+	errorModal: null,
+	minecraftAuthErrorModal: null,
+	minecraftRequiredModal: null,
+	setErrorModal(ref) {
+		this.errorModal = ref
+	},
+	setMinecraftAuthErrorModal(ref) {
+		this.minecraftAuthErrorModal = ref
+	},
+	setMinecraftRequiredModal(ref) {
+		this.minecraftRequiredModal = ref
+	},
+	showError(error, context, closable = true, source = null) {
+		const errorMessage = error.message?.toLowerCase()
+		if (
+			(errorMessage?.includes('user is not logged in') ||
+				errorMessage?.includes('cannot play instance since minecraft is required')) &&
+			this.minecraftRequiredModal
+		) {
+			this.minecraftRequiredModal.show()
+			return
+		}
+		if (
+			error.message &&
+			(error.message.includes('Minecraft authentication error:') ||
+				findMinecraftAuthError(error.message)) &&
+			this.minecraftAuthErrorModal
+		) {
+			this.minecraftAuthErrorModal.show(error)
+			return
+		}
+		this.errorModal.show(error, context, closable, source)
+	},
+})
+
+export function useError() {
+	return errorState
+}
+
+export const handleSevereError = (error, context) => {
+	useError().showError(error, context)
+	console.error(error)
+}
diff --git a/apps/app-frontend/src/composables/use-theme.ts b/apps/app-frontend/src/composables/use-theme.ts
new file mode 100644
index 0000000000..8a5aff4263
--- /dev/null
+++ b/apps/app-frontend/src/composables/use-theme.ts
@@ -0,0 +1,47 @@
+import { computed, reactive, ref, watch } from 'vue'
+
+export const THEME_OPTIONS = ['dark', 'light', 'oled', 'retro', 'system'] as const
+
+export type ColorTheme = (typeof THEME_OPTIONS)[number]
+type Theme = Exclude<ColorTheme, 'system'>
+
+const preferred = ref<ColorTheme>('dark')
+const preview = ref<ColorTheme | null>(null)
+const advancedRendering = ref(true)
+const syncAcrossDevices = ref(false)
+const nativeThemeQuery = window.matchMedia('(prefers-color-scheme: dark)')
+const native = ref<Theme>(nativeThemeQuery.matches ? 'dark' : 'light')
+const active = computed<Theme>(() => {
+	const selectedTheme = preview.value ?? preferred.value
+	return selectedTheme === 'system' ? native.value : selectedTheme
+})
+
+nativeThemeQuery.addEventListener('change', (event) => {
+	native.value = event.matches ? 'dark' : 'light'
+})
+
+watch(
+	active,
+	(theme) => {
+		const html = document.documentElement
+		for (const option of THEME_OPTIONS) {
+			html.classList.remove(`${option}-mode`)
+		}
+		html.classList.add(`${theme}-mode`)
+	},
+	{ immediate: true },
+)
+
+const theme = reactive({
+	preferred,
+	preview,
+	active,
+	native,
+	syncAcrossDevices,
+	advancedRendering,
+	options: THEME_OPTIONS,
+})
+
+export function useTheme() {
+	return theme
+}
diff --git a/apps/app-frontend/src/helpers/settings.ts b/apps/app-frontend/src/helpers/settings.ts
index 238d4116e2..340ce8a498 100644
--- a/apps/app-frontend/src/helpers/settings.ts
+++ b/apps/app-frontend/src/helpers/settings.ts
@@ -5,8 +5,9 @@
  */
 import { invoke } from '@tauri-apps/api/core'
 
+import type { FeatureFlag } from '@/composables/use-app-settings.ts'
+import type { ColorTheme } from '@/composables/use-theme.ts'
 import type { Hooks, MemorySettings, WindowSize } from '@/helpers/types'
-import type { ColorTheme, FeatureFlag } from '@/store/theme.ts'
 
 // Settings object
 /*
@@ -43,6 +44,8 @@ export type AppSettings = {
 	advanced_rendering: boolean
 	native_decorations: boolean
 	toggle_sidebar: boolean
+	sync_theme_across_devices: boolean
+	sync_behavior_across_devices: boolean
 
 	telemetry: boolean
 	discord_rpc: boolean
diff --git a/apps/app-frontend/src/helpers/types.d.ts b/apps/app-frontend/src/helpers/types.d.ts
index becbda9208..5981a51f6e 100644
--- a/apps/app-frontend/src/helpers/types.d.ts
+++ b/apps/app-frontend/src/helpers/types.d.ts
@@ -213,6 +213,8 @@ type AppSettings = {
 	advanced_rendering: boolean
 	native_decorations: boolean
 	worlds_in_home: boolean
+	sync_theme_across_devices: boolean
+	sync_behavior_across_devices: boolean
 
 	telemetry: boolean
 	discord_rpc: boolean
diff --git a/apps/app-frontend/src/helpers/user-preferences.ts b/apps/app-frontend/src/helpers/user-preferences.ts
new file mode 100644
index 0000000000..32261626a8
--- /dev/null
+++ b/apps/app-frontend/src/helpers/user-preferences.ts
@@ -0,0 +1,19 @@
+import type { UserPreferencesContext } from '@modrinth/ui'
+import { invoke } from '@tauri-apps/api/core'
+
+type UserPreferences = NonNullable<UserPreferencesContext['preferences']['value']>
+type PartialUserPreferences = Parameters<UserPreferencesContext['updatePreferences']>[0]
+
+export async function get_user_preferences(userId: string): Promise<UserPreferences> {
+	return await invoke<UserPreferences>('plugin:users|get_user_preferences', { userId })
+}
+
+export async function patch_user_preferences(
+	userId: string,
+	preferences: PartialUserPreferences,
+): Promise<UserPreferences> {
+	return await invoke<UserPreferences>('plugin:users|patch_user_preferences', {
+		userId,
+		preferences,
+	})
+}
diff --git a/apps/app-frontend/src/locales/ar-SA/index.json b/apps/app-frontend/src/locales/ar-SA/index.json
index c85293fc36..c622a6f4a8 100644
--- a/apps/app-frontend/src/locales/ar-SA/index.json
+++ b/apps/app-frontend/src/locales/ar-SA/index.json
@@ -134,12 +134,6 @@
   "app.ads-consent.reject": {
     "message": "رفض الكل"
   },
-  "app.appearance-settings.advanced-rendering.title": {
-    "message": "العرض المتقدم"
-  },
-  "app.appearance-settings.color-theme.title": {
-    "message": "لون السمة"
-  },
   "app.appearance-settings.default-landing-page.home": {
     "message": "صفحة الرئيسية"
   },
@@ -161,12 +155,6 @@
   "app.appearance-settings.minimize-launcher.title": {
     "message": "تصغير نافذة المشغل"
   },
-  "app.appearance-settings.native-decorations.description": {
-    "message": "استخدام إطار نافذة النظام (يتطلب إعادة تشغيل التطبيق)."
-  },
-  "app.appearance-settings.native-decorations.title": {
-    "message": "الزخارف التقليدية"
-  },
   "app.appearance-settings.show-play-time.description": {
     "message": "يعرض مقدار الوقت الذي قضيته في لعب إحدى المهام."
   },
diff --git a/apps/app-frontend/src/locales/cs-CZ/index.json b/apps/app-frontend/src/locales/cs-CZ/index.json
index 58476dde1a..e0feddb4e9 100644
--- a/apps/app-frontend/src/locales/cs-CZ/index.json
+++ b/apps/app-frontend/src/locales/cs-CZ/index.json
@@ -74,12 +74,6 @@
   "app.ads-consent.title": {
     "message": "Vaše soukromí a způsob, jakým reklamy podporují Modrinth"
   },
-  "app.appearance-settings.advanced-rendering.title": {
-    "message": "Pokročilé vykreslování"
-  },
-  "app.appearance-settings.color-theme.title": {
-    "message": "Barevný motiv"
-  },
   "app.appearance-settings.default-landing-page.home": {
     "message": "Domů"
   },
@@ -101,12 +95,6 @@
   "app.appearance-settings.minimize-launcher.title": {
     "message": "Minimalizovat launcher"
   },
-  "app.appearance-settings.native-decorations.description": {
-    "message": "Použít systémový rámeček okna (vyžaduje restart aplikace)."
-  },
-  "app.appearance-settings.native-decorations.title": {
-    "message": "Systémové dekorace"
-  },
   "app.appearance-settings.show-play-time.description": {
     "message": "Zobrazuje, kolik času jsi strávil hraním instance."
   },
diff --git a/apps/app-frontend/src/locales/da-DK/index.json b/apps/app-frontend/src/locales/da-DK/index.json
index 548f236198..24f14fca71 100644
--- a/apps/app-frontend/src/locales/da-DK/index.json
+++ b/apps/app-frontend/src/locales/da-DK/index.json
@@ -137,12 +137,6 @@
   "app.ads-consent.title": {
     "message": "Dit privatliv og hvordan reklamer hjælper Modrinth"
   },
-  "app.appearance-settings.advanced-rendering.title": {
-    "message": "Avanceret rendering"
-  },
-  "app.appearance-settings.color-theme.title": {
-    "message": "Farvetema"
-  },
   "app.appearance-settings.default-landing-page.home": {
     "message": "Hjem"
   },
diff --git a/apps/app-frontend/src/locales/de-CH/index.json b/apps/app-frontend/src/locales/de-CH/index.json
index e55bad3b8d..a773966a46 100644
--- a/apps/app-frontend/src/locales/de-CH/index.json
+++ b/apps/app-frontend/src/locales/de-CH/index.json
@@ -143,18 +143,6 @@
   "app.ads-consent.title": {
     "message": "Deine Privatsphäre und wie Werbung Modrinth unterstützt"
   },
-  "app.appearance-settings.advanced-rendering.description": {
-    "message": "Visuelle Effekte wie Hintergrundunschärfe aktivieren. Ohne Hardwarebeschleunigung kann dies die Leistung beeinträchtigen."
-  },
-  "app.appearance-settings.advanced-rendering.title": {
-    "message": "Erweitertes Rendering"
-  },
-  "app.appearance-settings.color-theme.description": {
-    "message": "Wähle das Farbschema der Modrinth App aus."
-  },
-  "app.appearance-settings.color-theme.title": {
-    "message": "Farbschema"
-  },
   "app.appearance-settings.default-landing-page.home": {
     "message": "Start"
   },
@@ -179,12 +167,6 @@
   "app.appearance-settings.minimize-launcher.title": {
     "message": "App minimieren"
   },
-  "app.appearance-settings.native-decorations.description": {
-    "message": "Nutzt die Titelleiste und Fenstersteuerung deines Betriebssystems. Erfordert einen App-Neustart."
-  },
-  "app.appearance-settings.native-decorations.title": {
-    "message": "System-Fensterrahmen"
-  },
   "app.appearance-settings.show-play-time.description": {
     "message": "Zeigt, wie lange du jede einzelne Instanz gespielt hast."
   },
diff --git a/apps/app-frontend/src/locales/de-DE/index.json b/apps/app-frontend/src/locales/de-DE/index.json
index 043b4e6eb8..8f4d7d6f13 100644
--- a/apps/app-frontend/src/locales/de-DE/index.json
+++ b/apps/app-frontend/src/locales/de-DE/index.json
@@ -143,18 +143,6 @@
   "app.ads-consent.title": {
     "message": "Deine Privatsphäre und wie Werbung Modrinth unterstützt"
   },
-  "app.appearance-settings.advanced-rendering.description": {
-    "message": "Visuelle Effekte wie Hintergrundunschärfe aktivieren. Ohne Hardwarebeschleunigung kann dies die Leistung beeinträchtigen."
-  },
-  "app.appearance-settings.advanced-rendering.title": {
-    "message": "Erweitertes Rendering"
-  },
-  "app.appearance-settings.color-theme.description": {
-    "message": "Wähle das Farbschema der Modrinth App aus."
-  },
-  "app.appearance-settings.color-theme.title": {
-    "message": "Farbschema"
-  },
   "app.appearance-settings.default-landing-page.home": {
     "message": "Start"
   },
@@ -179,12 +167,6 @@
   "app.appearance-settings.minimize-launcher.title": {
     "message": "App minimieren"
   },
-  "app.appearance-settings.native-decorations.description": {
-    "message": "Nutzt die Titelleiste und Fenstersteuerung deines Betriebssystems. Erfordert einen App-Neustart."
-  },
-  "app.appearance-settings.native-decorations.title": {
-    "message": "System-Fensterrahmen"
-  },
   "app.appearance-settings.show-play-time.description": {
     "message": "Zeigt, wie lange du jede einzelne Instanz gespielt hast."
   },
diff --git a/apps/app-frontend/src/locales/en-US/index.json b/apps/app-frontend/src/locales/en-US/index.json
index e366aa6558..2753c00a8d 100644
--- a/apps/app-frontend/src/locales/en-US/index.json
+++ b/apps/app-frontend/src/locales/en-US/index.json
@@ -149,18 +149,6 @@
   "app.ads-consent.title": {
     "message": "Your privacy and how ads support Modrinth"
   },
-  "app.appearance-settings.advanced-rendering.description": {
-    "message": "Enable visual effects such as background blur. This may reduce performance without hardware acceleration."
-  },
-  "app.appearance-settings.advanced-rendering.title": {
-    "message": "Advanced rendering"
-  },
-  "app.appearance-settings.color-theme.description": {
-    "message": "Choose the color theme used by Modrinth App."
-  },
-  "app.appearance-settings.color-theme.title": {
-    "message": "Color theme"
-  },
   "app.appearance-settings.default-landing-page.home": {
     "message": "Home"
   },
@@ -185,12 +173,6 @@
   "app.appearance-settings.minimize-launcher.title": {
     "message": "Minimize app"
   },
-  "app.appearance-settings.native-decorations.description": {
-    "message": "Use your operating system's title bar and window controls. Requires an app restart."
-  },
-  "app.appearance-settings.native-decorations.title": {
-    "message": "System window frame"
-  },
   "app.appearance-settings.show-play-time.description": {
     "message": "Show how long you've played each instance."
   },
@@ -230,6 +212,15 @@
   "app.behavior-settings.startup-and-navigation.title": {
     "message": "Startup and navigation"
   },
+  "app.behavior-settings.sync-across-devices.description": {
+    "message": "Use these behavior settings everywhere you're signed in. Turn this off to keep separate settings on this device."
+  },
+  "app.behavior-settings.sync-across-devices.signed-out-tooltip": {
+    "message": "Sign into a Modrinth account to sync settings."
+  },
+  "app.behavior-settings.sync-across-devices.title": {
+    "message": "Sync behavior across devices"
+  },
   "app.browse.add-servers-to-instance": {
     "message": "Adding server to instance"
   },
@@ -1082,6 +1073,9 @@
   "app.library.sort.date-modified": {
     "message": "Date modified"
   },
+  "app.library.sort.game-version": {
+    "message": "Game version"
+  },
   "app.library.sort.hours-played": {
     "message": "Hours played"
   },
@@ -1091,6 +1085,9 @@
   "app.library.sort.last-played": {
     "message": "Last played"
   },
+  "app.library.sort.loader": {
+    "message": "Loader"
+  },
   "app.library.sort.name": {
     "message": "Name"
   },
diff --git a/apps/app-frontend/src/locales/es-419/index.json b/apps/app-frontend/src/locales/es-419/index.json
index 44c5f555c0..4ac1af9b6c 100644
--- a/apps/app-frontend/src/locales/es-419/index.json
+++ b/apps/app-frontend/src/locales/es-419/index.json
@@ -143,18 +143,6 @@
   "app.ads-consent.title": {
     "message": "Tu privacidad y como los anuncios apoyan a Modrinth"
   },
-  "app.appearance-settings.advanced-rendering.description": {
-    "message": "Activar efectos visuales como los efectos de desenfoque. Esto puede reducir el rendimiento si no tienes aceleración de hardware."
-  },
-  "app.appearance-settings.advanced-rendering.title": {
-    "message": "Renderizado avanzado"
-  },
-  "app.appearance-settings.color-theme.description": {
-    "message": "Escoge el esquema de colores usado por la aplicación de Modrinth."
-  },
-  "app.appearance-settings.color-theme.title": {
-    "message": "Color de la interfaz"
-  },
   "app.appearance-settings.default-landing-page.home": {
     "message": "Inicio"
   },
@@ -179,12 +167,6 @@
   "app.appearance-settings.minimize-launcher.title": {
     "message": "Minimizar app"
   },
-  "app.appearance-settings.native-decorations.description": {
-    "message": "Usa el borde de ventana de tu sistema. Necesita reiniciar la aplicación."
-  },
-  "app.appearance-settings.native-decorations.title": {
-    "message": "Decoraciones nativas"
-  },
   "app.appearance-settings.show-play-time.description": {
     "message": "Muestra cuanto tiempo has jugado en cada instancia."
   },
diff --git a/apps/app-frontend/src/locales/es-ES/index.json b/apps/app-frontend/src/locales/es-ES/index.json
index ea50c2a08c..909750303b 100644
--- a/apps/app-frontend/src/locales/es-ES/index.json
+++ b/apps/app-frontend/src/locales/es-ES/index.json
@@ -95,12 +95,6 @@
   "app.action-bar.view-logs": {
     "message": "Ver registros"
   },
-  "app.appearance-settings.advanced-rendering.title": {
-    "message": "Renderizado avanzado"
-  },
-  "app.appearance-settings.color-theme.title": {
-    "message": "Tema de color"
-  },
   "app.appearance-settings.default-landing-page.home": {
     "message": "Inicio"
   },
@@ -122,12 +116,6 @@
   "app.appearance-settings.minimize-launcher.title": {
     "message": "Minimizar lanzador"
   },
-  "app.appearance-settings.native-decorations.description": {
-    "message": "Usa el marco de ventana del sistema (requiere reiniciar la aplicación)."
-  },
-  "app.appearance-settings.native-decorations.title": {
-    "message": "Decoraciones nativas"
-  },
   "app.appearance-settings.show-play-time.description": {
     "message": "Muestra cuánto tiempo has estado jugando en una instancia."
   },
diff --git a/apps/app-frontend/src/locales/fi-FI/index.json b/apps/app-frontend/src/locales/fi-FI/index.json
index 5a614188ce..3193fa981f 100644
--- a/apps/app-frontend/src/locales/fi-FI/index.json
+++ b/apps/app-frontend/src/locales/fi-FI/index.json
@@ -71,12 +71,6 @@
   "app.action-bar.view-logs": {
     "message": "Katso lokeja"
   },
-  "app.appearance-settings.advanced-rendering.title": {
-    "message": "Edistynyt renderointi"
-  },
-  "app.appearance-settings.color-theme.title": {
-    "message": "Väriteema"
-  },
   "app.appearance-settings.default-landing-page.home": {
     "message": "Koti"
   },
@@ -98,12 +92,6 @@
   "app.appearance-settings.minimize-launcher.title": {
     "message": "Piilota käynnistysohjelma"
   },
-  "app.appearance-settings.native-decorations.description": {
-    "message": "Käytä järjestelmän ikkuna kehystä (Vaatii sovelluksen uudelleen käynnistämisen)."
-  },
-  "app.appearance-settings.native-decorations.title": {
-    "message": "Natiivit koristukset"
-  },
   "app.appearance-settings.show-play-time.description": {
     "message": "Näyttää, kuinka paljon aikaa olet käyttänyt instanssin pelaamiseen."
   },
diff --git a/apps/app-frontend/src/locales/fil-PH/index.json b/apps/app-frontend/src/locales/fil-PH/index.json
index a0181a28b1..16a0dc43ae 100644
--- a/apps/app-frontend/src/locales/fil-PH/index.json
+++ b/apps/app-frontend/src/locales/fil-PH/index.json
@@ -47,12 +47,6 @@
   "app.action-bar.view-logs": {
     "message": "Tignan ang logs"
   },
-  "app.appearance-settings.advanced-rendering.title": {
-    "message": "Masalimuot na pagrerender"
-  },
-  "app.appearance-settings.color-theme.title": {
-    "message": "Tema ng kulay"
-  },
   "app.appearance-settings.default-landing-page.home": {
     "message": "Tahanan"
   },
@@ -74,12 +68,6 @@
   "app.appearance-settings.minimize-launcher.title": {
     "message": "Liitin ang launcher"
   },
-  "app.appearance-settings.native-decorations.description": {
-    "message": "Gamitin ang system window frame (kailangan i-restart ang app)."
-  },
-  "app.appearance-settings.native-decorations.title": {
-    "message": "Native decorations"
-  },
   "app.appearance-settings.show-play-time.description": {
     "message": "Magpapakita ang katagal ng iyong paglalaro sa isang instansiya."
   },
diff --git a/apps/app-frontend/src/locales/fr-FR/index.json b/apps/app-frontend/src/locales/fr-FR/index.json
index 4ffb047de4..f9edddfab1 100644
--- a/apps/app-frontend/src/locales/fr-FR/index.json
+++ b/apps/app-frontend/src/locales/fr-FR/index.json
@@ -143,18 +143,6 @@
   "app.ads-consent.title": {
     "message": "Votre vie privée et comment les publicités soutiennent Modrinth"
   },
-  "app.appearance-settings.advanced-rendering.description": {
-    "message": "Activer les effets visuels tel que le flou d'arrière-plan. Ceci peut réduire les performances sans accélération matérielle."
-  },
-  "app.appearance-settings.advanced-rendering.title": {
-    "message": "Rendu avancé"
-  },
-  "app.appearance-settings.color-theme.description": {
-    "message": "Choisir la couleur de thème utilisée par Modrinth App."
-  },
-  "app.appearance-settings.color-theme.title": {
-    "message": "Couleur du thème"
-  },
   "app.appearance-settings.default-landing-page.home": {
     "message": "Accueil"
   },
@@ -179,12 +167,6 @@
   "app.appearance-settings.minimize-launcher.title": {
     "message": "Minimiser l'application"
   },
-  "app.appearance-settings.native-decorations.description": {
-    "message": "Utilise la barre de titre et les contrôles de fenêtre de votre système d'exploitation. Nécessite le redémarrage de l'application."
-  },
-  "app.appearance-settings.native-decorations.title": {
-    "message": "Cadre de fenêtre système"
-  },
   "app.appearance-settings.show-play-time.description": {
     "message": "Montre combien de temps vous avez joué à chaque instance."
   },
diff --git a/apps/app-frontend/src/locales/hu-HU/index.json b/apps/app-frontend/src/locales/hu-HU/index.json
index e947d24768..fdb6c98d59 100644
--- a/apps/app-frontend/src/locales/hu-HU/index.json
+++ b/apps/app-frontend/src/locales/hu-HU/index.json
@@ -143,18 +143,6 @@
   "app.ads-consent.title": {
     "message": "Adataid védelme és a hirdetések szerepe a Modrinth működésében"
   },
-  "app.appearance-settings.advanced-rendering.description": {
-    "message": "Engedélyezi a vizuális effektusokat, például a háttér elmosását. Hardveres gyorsítás nélkül ez ronthatja a rendszer teljesítményét."
-  },
-  "app.appearance-settings.advanced-rendering.title": {
-    "message": "Haladó megjelenítési beállítások"
-  },
-  "app.appearance-settings.color-theme.description": {
-    "message": "Válaszd ki a Modrinth App által használt színsémát."
-  },
-  "app.appearance-settings.color-theme.title": {
-    "message": "Téma"
-  },
   "app.appearance-settings.default-landing-page.home": {
     "message": "Kezdőlap"
   },
@@ -179,12 +167,6 @@
   "app.appearance-settings.minimize-launcher.title": {
     "message": "Alkalmazás bezárása"
   },
-  "app.appearance-settings.native-decorations.description": {
-    "message": "Az operációs rendszer címsorának és ablakvezérlőinek használata. A módosítás érvénybe lépéséhez újra kell indítani az alkalmazást."
-  },
-  "app.appearance-settings.native-decorations.title": {
-    "message": "Rendszerablakkeret"
-  },
   "app.appearance-settings.show-play-time.description": {
     "message": "Megjeleníti, hogy mennyi időt töltöttél egy példányban."
   },
diff --git a/apps/app-frontend/src/locales/id-ID/index.json b/apps/app-frontend/src/locales/id-ID/index.json
index 323d8aa684..cc176e5bdd 100644
--- a/apps/app-frontend/src/locales/id-ID/index.json
+++ b/apps/app-frontend/src/locales/id-ID/index.json
@@ -44,12 +44,6 @@
   "app.action-bar.view-logs": {
     "message": "Lihat catatan"
   },
-  "app.appearance-settings.advanced-rendering.title": {
-    "message": "Renderasi tingkat lanjut"
-  },
-  "app.appearance-settings.color-theme.title": {
-    "message": "Tema warna"
-  },
   "app.appearance-settings.default-landing-page.home": {
     "message": "Beranda"
   },
@@ -71,12 +65,6 @@
   "app.appearance-settings.minimize-launcher.title": {
     "message": "Kecilkan peluncur"
   },
-  "app.appearance-settings.native-decorations.description": {
-    "message": "Gunakan bingkai jendela sistem (wajib menjalankan ulang aplikasi)."
-  },
-  "app.appearance-settings.native-decorations.title": {
-    "message": "Hiasan asli"
-  },
   "app.appearance-settings.show-play-time.description": {
     "message": "Menampilkan seberapa lama Anda memainkan sebuah instans."
   },
diff --git a/apps/app-frontend/src/locales/it-IT/index.json b/apps/app-frontend/src/locales/it-IT/index.json
index 57d902ac9c..f53f590846 100644
--- a/apps/app-frontend/src/locales/it-IT/index.json
+++ b/apps/app-frontend/src/locales/it-IT/index.json
@@ -143,18 +143,6 @@
   "app.ads-consent.title": {
     "message": "La tua privacy e come le pubblicità supportano Modrinth"
   },
-  "app.appearance-settings.advanced-rendering.description": {
-    "message": "Abilita effetti come lo sfondo sfocato. Questo potrebbe ridurre le prestazioni senza accelerazione hardware."
-  },
-  "app.appearance-settings.advanced-rendering.title": {
-    "message": "Rendering avanzato"
-  },
-  "app.appearance-settings.color-theme.description": {
-    "message": "Scegli il tema usato da Modrinth App."
-  },
-  "app.appearance-settings.color-theme.title": {
-    "message": "Tema"
-  },
   "app.appearance-settings.default-landing-page.home": {
     "message": "Home"
   },
@@ -179,12 +167,6 @@
   "app.appearance-settings.minimize-launcher.title": {
     "message": "Minimizza app"
   },
-  "app.appearance-settings.native-decorations.description": {
-    "message": "Usa la barra e i controlli delle finestre di sistema. Richiede un riavvio."
-  },
-  "app.appearance-settings.native-decorations.title": {
-    "message": "Usa cornice di sistema"
-  },
   "app.appearance-settings.show-play-time.description": {
     "message": "Mostra quanto tempo hai giocato a un'istanza."
   },
diff --git a/apps/app-frontend/src/locales/ja-JP/index.json b/apps/app-frontend/src/locales/ja-JP/index.json
index b999c783bc..73211145f8 100644
--- a/apps/app-frontend/src/locales/ja-JP/index.json
+++ b/apps/app-frontend/src/locales/ja-JP/index.json
@@ -143,18 +143,6 @@
   "app.ads-consent.title": {
     "message": "プライバシーと広告がModrinthを支える仕組み"
   },
-  "app.appearance-settings.advanced-rendering.description": {
-    "message": "背景のぼかしなどの視覚効果を有効にします。ハードウェアアクセラレーションが無効の場合、パフォーマンスが低下する可能性があります。"
-  },
-  "app.appearance-settings.advanced-rendering.title": {
-    "message": "高度なレンダリング"
-  },
-  "app.appearance-settings.color-theme.description": {
-    "message": "Modrinth Appのテーマを選びましょう。"
-  },
-  "app.appearance-settings.color-theme.title": {
-    "message": "テーマ"
-  },
   "app.appearance-settings.default-landing-page.home": {
     "message": "ホーム"
   },
@@ -179,12 +167,6 @@
   "app.appearance-settings.minimize-launcher.title": {
     "message": "ランチャーを最小化"
   },
-  "app.appearance-settings.native-decorations.description": {
-    "message": "OS標準のタイトルバーとウィンドウ操作ボタンを使用します。反映にはアプリの再起動が必要です。"
-  },
-  "app.appearance-settings.native-decorations.title": {
-    "message": "システムウィンドウフレーム"
-  },
   "app.appearance-settings.show-play-time.description": {
     "message": "各インスタンスのプレイ時間を表示します。"
   },
diff --git a/apps/app-frontend/src/locales/ko-KR/index.json b/apps/app-frontend/src/locales/ko-KR/index.json
index 525248e3b2..77cefeb25b 100644
--- a/apps/app-frontend/src/locales/ko-KR/index.json
+++ b/apps/app-frontend/src/locales/ko-KR/index.json
@@ -143,18 +143,6 @@
   "app.ads-consent.title": {
     "message": "개인정보와 광고가 Modrinth를 지원하는 방식"
   },
-  "app.appearance-settings.advanced-rendering.description": {
-    "message": "배경 흐림 효과와 같은 시각 효과를 활성화합니다. 하드웨어 가속이 지원되지 않는 경우 성능이 저하될 수 있습니다."
-  },
-  "app.appearance-settings.advanced-rendering.title": {
-    "message": "고급 렌더링"
-  },
-  "app.appearance-settings.color-theme.description": {
-    "message": "Modrinth 앱에서 사용할 색상 테마를 선택하세요."
-  },
-  "app.appearance-settings.color-theme.title": {
-    "message": "색상 테마"
-  },
   "app.appearance-settings.default-landing-page.home": {
     "message": "홈"
   },
@@ -179,12 +167,6 @@
   "app.appearance-settings.minimize-launcher.title": {
     "message": "앱 최소화"
   },
-  "app.appearance-settings.native-decorations.description": {
-    "message": "운영 체제의 제목 표시줄 및 창 제어 기능을 사용합니다. 앱 재시작이 필요합니다."
-  },
-  "app.appearance-settings.native-decorations.title": {
-    "message": "시스템 창 프레임"
-  },
   "app.appearance-settings.show-play-time.description": {
     "message": "각 인스턴스를 얼마나 플레이했는지 표시합니다."
   },
diff --git a/apps/app-frontend/src/locales/ms-MY/index.json b/apps/app-frontend/src/locales/ms-MY/index.json
index ebda1cbf4a..63685a5d4d 100644
--- a/apps/app-frontend/src/locales/ms-MY/index.json
+++ b/apps/app-frontend/src/locales/ms-MY/index.json
@@ -53,12 +53,6 @@
   "app.action-bar.view-logs": {
     "message": "Lihat log"
   },
-  "app.appearance-settings.advanced-rendering.title": {
-    "message": "Pemaparan lanjutan"
-  },
-  "app.appearance-settings.color-theme.title": {
-    "message": "Tema warna"
-  },
   "app.appearance-settings.default-landing-page.home": {
     "message": "Laman utama"
   },
@@ -80,12 +74,6 @@
   "app.appearance-settings.minimize-launcher.title": {
     "message": "Minimumkan pelancar"
   },
-  "app.appearance-settings.native-decorations.description": {
-    "message": "Gunakan bingkai tetingkap sistem (aplikasi perlu dimulakan semula)."
-  },
-  "app.appearance-settings.native-decorations.title": {
-    "message": "Hiasan asli"
-  },
   "app.appearance-settings.skip-non-essential-warnings.description": {
     "message": "Melangkau pengesahan berisiko rendah secara automatik seperti pemasangan pek mod pendua, pemadaman kandungan biasa, kemas kini pukal, menyahpautkan pek mod dan gesaan pembaikan. Amaran berbahaya masih akan ditunjukkan."
   },
diff --git a/apps/app-frontend/src/locales/nl-NL/index.json b/apps/app-frontend/src/locales/nl-NL/index.json
index fc67b5ff57..d2e18911b0 100644
--- a/apps/app-frontend/src/locales/nl-NL/index.json
+++ b/apps/app-frontend/src/locales/nl-NL/index.json
@@ -143,18 +143,6 @@
   "app.ads-consent.title": {
     "message": "Je privacy en hoe advertenties Modrinth ondersteunen"
   },
-  "app.appearance-settings.advanced-rendering.description": {
-    "message": "Schakel visuele effecten zoals achtergrondvervaging in. Zonder hardwareversnelling kan dit ten koste gaan van de prestaties."
-  },
-  "app.appearance-settings.advanced-rendering.title": {
-    "message": "Geavanceerde weergave"
-  },
-  "app.appearance-settings.color-theme.description": {
-    "message": "Kies het kleurenthema dat door de Modrinth-app wordt gebruikt."
-  },
-  "app.appearance-settings.color-theme.title": {
-    "message": "Kleurenthema"
-  },
   "app.appearance-settings.default-landing-page.home": {
     "message": "Start"
   },
@@ -179,12 +167,6 @@
   "app.appearance-settings.minimize-launcher.title": {
     "message": "App minimaliseren"
   },
-  "app.appearance-settings.native-decorations.description": {
-    "message": "Gebruik de titelbalk en vensterbedieningselementen van je besturingssysteem. Hiervoor moet de app opnieuw worden opgestart."
-  },
-  "app.appearance-settings.native-decorations.title": {
-    "message": "Systeemvensterframe"
-  },
   "app.appearance-settings.show-play-time.description": {
     "message": "Laat zien hoe lang je elke instantie hebt gespeeld."
   },
diff --git a/apps/app-frontend/src/locales/no-NO/index.json b/apps/app-frontend/src/locales/no-NO/index.json
index a12e242ace..d4fbacb96c 100644
--- a/apps/app-frontend/src/locales/no-NO/index.json
+++ b/apps/app-frontend/src/locales/no-NO/index.json
@@ -56,12 +56,6 @@
   "app.action-bar.view-logs": {
     "message": "Vis logger"
   },
-  "app.appearance-settings.advanced-rendering.title": {
-    "message": "Avansert rendering"
-  },
-  "app.appearance-settings.color-theme.title": {
-    "message": "Fargetema"
-  },
   "app.appearance-settings.default-landing-page.home": {
     "message": "Hjem"
   },
diff --git a/apps/app-frontend/src/locales/pl-PL/index.json b/apps/app-frontend/src/locales/pl-PL/index.json
index 7e1bd4bae1..6071ed5c49 100644
--- a/apps/app-frontend/src/locales/pl-PL/index.json
+++ b/apps/app-frontend/src/locales/pl-PL/index.json
@@ -143,18 +143,6 @@
   "app.ads-consent.title": {
     "message": "Twoja prywatność i jak reklamy wspierają Modrinth"
   },
-  "app.appearance-settings.advanced-rendering.description": {
-    "message": "Włącz efekty wizualne, takie jak rozmycie tła. Może to negatywnie wpłynąć na wydajność, jeżeli akceleracja sprzętowa jest wyłączona."
-  },
-  "app.appearance-settings.advanced-rendering.title": {
-    "message": "Zaawansowane renderowanie"
-  },
-  "app.appearance-settings.color-theme.description": {
-    "message": "Wybierz motyw użyty przez Modrinth App."
-  },
-  "app.appearance-settings.color-theme.title": {
-    "message": "Motyw"
-  },
   "app.appearance-settings.default-landing-page.home": {
     "message": "Strona główna"
   },
@@ -179,12 +167,6 @@
   "app.appearance-settings.minimize-launcher.title": {
     "message": "Minimalizuj aplikację"
   },
-  "app.appearance-settings.native-decorations.description": {
-    "message": "Używaj pasek tytułu i kontrolki okna systemu operacyjnego. Wymaga ponownego uruchomienia aplikacji."
-  },
-  "app.appearance-settings.native-decorations.title": {
-    "message": "Systemowa ramka okna"
-  },
   "app.appearance-settings.show-play-time.description": {
     "message": "Pokazuje czas gry spędzony w danej instancji."
   },
diff --git a/apps/app-frontend/src/locales/pt-BR/index.json b/apps/app-frontend/src/locales/pt-BR/index.json
index 4d3959f58e..463096efc8 100644
--- a/apps/app-frontend/src/locales/pt-BR/index.json
+++ b/apps/app-frontend/src/locales/pt-BR/index.json
@@ -143,18 +143,6 @@
   "app.ads-consent.title": {
     "message": "Sua privacidade e como anúncios apoiam o Modrinth"
   },
-  "app.appearance-settings.advanced-rendering.description": {
-    "message": "Ativa os efeitos visuais como o desfoque de fundo. Isso talvez reduza o desempenho sem o aceleramento de hardware."
-  },
-  "app.appearance-settings.advanced-rendering.title": {
-    "message": "Renderização avançada"
-  },
-  "app.appearance-settings.color-theme.description": {
-    "message": "Escolha o tema usado pelo Modrinth App."
-  },
-  "app.appearance-settings.color-theme.title": {
-    "message": "Tema"
-  },
   "app.appearance-settings.default-landing-page.home": {
     "message": "Início"
   },
@@ -179,12 +167,6 @@
   "app.appearance-settings.minimize-launcher.title": {
     "message": "Minimizar aplicativo"
   },
-  "app.appearance-settings.native-decorations.description": {
-    "message": "Usa a barra de título e os controles de janela do seu sistema operacional. Exige a reinicialização do aplicativo."
-  },
-  "app.appearance-settings.native-decorations.title": {
-    "message": "Moldura de janela do sistema"
-  },
   "app.appearance-settings.show-play-time.description": {
     "message": "Exibe o tempo de jogo de cada instância."
   },
diff --git a/apps/app-frontend/src/locales/pt-PT/index.json b/apps/app-frontend/src/locales/pt-PT/index.json
index 4e2c6e6f78..daf5c7a0f4 100644
--- a/apps/app-frontend/src/locales/pt-PT/index.json
+++ b/apps/app-frontend/src/locales/pt-PT/index.json
@@ -140,12 +140,6 @@
   "app.ads-consent.title": {
     "message": "A sua privacidade e como os anúncios são financiados pela Modrinth"
   },
-  "app.appearance-settings.advanced-rendering.title": {
-    "message": "Renderização avançada"
-  },
-  "app.appearance-settings.color-theme.title": {
-    "message": "Cor de tema"
-  },
   "app.appearance-settings.default-landing-page.home": {
     "message": "Casa"
   },
@@ -167,12 +161,6 @@
   "app.appearance-settings.minimize-launcher.title": {
     "message": "Minimizar launcher"
   },
-  "app.appearance-settings.native-decorations.description": {
-    "message": "Utilizar a moldura da janela do sistema (é necessário reiniciar a aplicação)."
-  },
-  "app.appearance-settings.native-decorations.title": {
-    "message": "Decorações nativas"
-  },
   "app.appearance-settings.show-play-time.description": {
     "message": "Apresenta quanto tempo passou a jogar uma instância."
   },
diff --git a/apps/app-frontend/src/locales/ru-RU/index.json b/apps/app-frontend/src/locales/ru-RU/index.json
index 6fd2a36fbf..889ee932f0 100644
--- a/apps/app-frontend/src/locales/ru-RU/index.json
+++ b/apps/app-frontend/src/locales/ru-RU/index.json
@@ -143,18 +143,6 @@
   "app.ads-consent.title": {
     "message": "Конфиденциальность и реклама на Modrinth"
   },
-  "app.appearance-settings.advanced-rendering.description": {
-    "message": "Использовать эффекты вроде размытия фона. Без аппаратного ускорения возможна потеря производительности."
-  },
-  "app.appearance-settings.advanced-rendering.title": {
-    "message": "Расширенные эффекты"
-  },
-  "app.appearance-settings.color-theme.description": {
-    "message": "Выберите тему для Modrinth App."
-  },
-  "app.appearance-settings.color-theme.title": {
-    "message": "Тема"
-  },
   "app.appearance-settings.default-landing-page.home": {
     "message": "Главная"
   },
@@ -179,12 +167,6 @@
   "app.appearance-settings.minimize-launcher.title": {
     "message": "Сворачивание приложения"
   },
-  "app.appearance-settings.native-decorations.description": {
-    "message": "Использовать системное оформление заголовка и кнопок окна. Требуется перезапуск."
-  },
-  "app.appearance-settings.native-decorations.title": {
-    "message": "Системная рамка окна"
-  },
   "app.appearance-settings.show-play-time.description": {
     "message": "Показывать проведённое время в сборке."
   },
diff --git a/apps/app-frontend/src/locales/sr-CS/index.json b/apps/app-frontend/src/locales/sr-CS/index.json
index f5c67b16a5..b4ed7707da 100644
--- a/apps/app-frontend/src/locales/sr-CS/index.json
+++ b/apps/app-frontend/src/locales/sr-CS/index.json
@@ -143,18 +143,6 @@
   "app.ads-consent.title": {
     "message": "Tvoja bezbednost i kako reklame pomažu Modrinth-u"
   },
-  "app.appearance-settings.advanced-rendering.description": {
-    "message": "Uključi vizuelne efekte kao što je blur pozadine. Ovo može da pogorša performanse bez hardverskog ubrzanja."
-  },
-  "app.appearance-settings.advanced-rendering.title": {
-    "message": "Napredno renderovanje"
-  },
-  "app.appearance-settings.color-theme.description": {
-    "message": "Izaberi boju teme koju koristi Modrinth App."
-  },
-  "app.appearance-settings.color-theme.title": {
-    "message": "Tema boje"
-  },
   "app.appearance-settings.default-landing-page.home": {
     "message": "Početna stranica"
   },
@@ -179,12 +167,6 @@
   "app.appearance-settings.minimize-launcher.title": {
     "message": "Smanji aplikaciju"
   },
-  "app.appearance-settings.native-decorations.description": {
-    "message": "Koristi naslovnu traku i kontrole prozora tvog operativnog sistema. Restart aplikacije obavezan."
-  },
-  "app.appearance-settings.native-decorations.title": {
-    "message": "Sistemski okvir prozora"
-  },
   "app.appearance-settings.show-play-time.description": {
     "message": "Prikaži koliko dugo ste igrali svaku instancu."
   },
diff --git a/apps/app-frontend/src/locales/sv-SE/index.json b/apps/app-frontend/src/locales/sv-SE/index.json
index bddb1feab2..d5197c1c09 100644
--- a/apps/app-frontend/src/locales/sv-SE/index.json
+++ b/apps/app-frontend/src/locales/sv-SE/index.json
@@ -140,15 +140,6 @@
   "app.ads-consent.title": {
     "message": "Din integritet och hur reklam stödjer Modrinth"
   },
-  "app.appearance-settings.advanced-rendering.title": {
-    "message": "Avancerad rendering"
-  },
-  "app.appearance-settings.color-theme.description": {
-    "message": "Välj färgtemat som används av Modrinth App."
-  },
-  "app.appearance-settings.color-theme.title": {
-    "message": "Färgtema"
-  },
   "app.appearance-settings.default-landing-page.home": {
     "message": "Hem"
   },
@@ -170,12 +161,6 @@
   "app.appearance-settings.minimize-launcher.title": {
     "message": "Minimera app"
   },
-  "app.appearance-settings.native-decorations.description": {
-    "message": "Använd systemets fönsterram (omstart av app krävs)."
-  },
-  "app.appearance-settings.native-decorations.title": {
-    "message": "Inbyggda fönsterdekorationer"
-  },
   "app.appearance-settings.show-play-time.description": {
     "message": "Visa hur länge du spelat varje instans."
   },
diff --git a/apps/app-frontend/src/locales/th-TH/index.json b/apps/app-frontend/src/locales/th-TH/index.json
index e44beb4a8d..d93134d0c7 100644
--- a/apps/app-frontend/src/locales/th-TH/index.json
+++ b/apps/app-frontend/src/locales/th-TH/index.json
@@ -59,12 +59,6 @@
   "app.action-bar.view-logs": {
     "message": "ดู Log"
   },
-  "app.appearance-settings.advanced-rendering.title": {
-    "message": "การเรนเดอร์ขั้นสูง"
-  },
-  "app.appearance-settings.color-theme.title": {
-    "message": "ธีมสี"
-  },
   "app.appearance-settings.default-landing-page.home": {
     "message": "หน้าหลัก"
   },
@@ -86,12 +80,6 @@
   "app.appearance-settings.minimize-launcher.title": {
     "message": "ย่อลันเชอร์"
   },
-  "app.appearance-settings.native-decorations.description": {
-    "message": "ใช้กรอบหน้าต่างระบบ (ต้องรีสตาร์ทแอป)"
-  },
-  "app.appearance-settings.native-decorations.title": {
-    "message": "ของตกแต่งดั้งเดิม"
-  },
   "app.appearance-settings.show-play-time.description": {
     "message": "แสดงเวลาที่คุณใช้เล่นในแต่ละอินสแตนซ์"
   },
diff --git a/apps/app-frontend/src/locales/tr-TR/index.json b/apps/app-frontend/src/locales/tr-TR/index.json
index 05080edd1b..15f9078f48 100644
--- a/apps/app-frontend/src/locales/tr-TR/index.json
+++ b/apps/app-frontend/src/locales/tr-TR/index.json
@@ -143,18 +143,6 @@
   "app.ads-consent.title": {
     "message": "Sizin mahremiyetiniz ve reklamlar Modrinth'i nasıl destekler"
   },
-  "app.appearance-settings.advanced-rendering.description": {
-    "message": "Arka plan bulanıklığı gibi görsel efektleri etkinleştirin. Bu, donanım ivmelendirme yokken performansı etkileyebilir."
-  },
-  "app.appearance-settings.advanced-rendering.title": {
-    "message": "Gelişmiş işleme"
-  },
-  "app.appearance-settings.color-theme.description": {
-    "message": "Modrinth App tarafından kullanılacak renk şemasını seçin."
-  },
-  "app.appearance-settings.color-theme.title": {
-    "message": "Renk teması"
-  },
   "app.appearance-settings.default-landing-page.home": {
     "message": "Ana Sayfa"
   },
@@ -179,12 +167,6 @@
   "app.appearance-settings.minimize-launcher.title": {
     "message": "Uygulamayı küçült"
   },
-  "app.appearance-settings.native-decorations.description": {
-    "message": "İşletim sisteminizin başlık çubuğu ve pencere kontrollerini kullanın. Uygulamanın yeniden başlatılmasını gerektirir."
-  },
-  "app.appearance-settings.native-decorations.title": {
-    "message": "Sistem pencere çerçevesi"
-  },
   "app.appearance-settings.show-play-time.description": {
     "message": "Her bir örneği ne kadar süreyle oynadığını göster."
   },
diff --git a/apps/app-frontend/src/locales/uk-UA/index.json b/apps/app-frontend/src/locales/uk-UA/index.json
index f2f02758b7..5e16a46475 100644
--- a/apps/app-frontend/src/locales/uk-UA/index.json
+++ b/apps/app-frontend/src/locales/uk-UA/index.json
@@ -143,18 +143,6 @@
   "app.ads-consent.title": {
     "message": "Ваша приватність та як реклама підтримує Modrinth"
   },
-  "app.appearance-settings.advanced-rendering.description": {
-    "message": "Умикає візуальні ефекти, як-от розмиття фону. Це може знизити продуктивність без апаратного прискорення."
-  },
-  "app.appearance-settings.advanced-rendering.title": {
-    "message": "Розширене промальовування"
-  },
-  "app.appearance-settings.color-theme.description": {
-    "message": "Оберіть тему для Modrinth App."
-  },
-  "app.appearance-settings.color-theme.title": {
-    "message": "Колірна тема"
-  },
   "app.appearance-settings.default-landing-page.home": {
     "message": "Головна"
   },
@@ -179,12 +167,6 @@
   "app.appearance-settings.minimize-launcher.title": {
     "message": "Згортати застосунок"
   },
-  "app.appearance-settings.native-decorations.description": {
-    "message": "Використовувати заголовок вікна та елементи керування вашої операційної системи. Потребує перезапуску застосунку."
-  },
-  "app.appearance-settings.native-decorations.title": {
-    "message": "Системна рамка вікна"
-  },
   "app.appearance-settings.show-play-time.description": {
     "message": "Показувати награний час для кожної збірки."
   },
diff --git a/apps/app-frontend/src/locales/vi-VN/index.json b/apps/app-frontend/src/locales/vi-VN/index.json
index 488a8dbaa5..9114a99ea7 100644
--- a/apps/app-frontend/src/locales/vi-VN/index.json
+++ b/apps/app-frontend/src/locales/vi-VN/index.json
@@ -134,12 +134,6 @@
   "app.ads-consent.title": {
     "message": "Quyền riêng tư của bạn và cách quảng cáo hỗ trợ Modrinth"
   },
-  "app.appearance-settings.advanced-rendering.title": {
-    "message": "Dựng hình nâng cao"
-  },
-  "app.appearance-settings.color-theme.title": {
-    "message": "Màu chủ đề"
-  },
   "app.appearance-settings.default-landing-page.home": {
     "message": "Trang chủ"
   },
@@ -161,12 +155,6 @@
   "app.appearance-settings.minimize-launcher.title": {
     "message": "Thu nhỏ launcher"
   },
-  "app.appearance-settings.native-decorations.description": {
-    "message": "Sử dụng khung cửa sổ hệ thống (yêu cầu khởi động lại ứng dụng)."
-  },
-  "app.appearance-settings.native-decorations.title": {
-    "message": "Giao diện cửa sổ hệ thống"
-  },
   "app.appearance-settings.show-play-time.description": {
     "message": "Hiển thị thời gian bạn đã dành để chơi bằng một cấu hình."
   },
diff --git a/apps/app-frontend/src/locales/zh-CN/index.json b/apps/app-frontend/src/locales/zh-CN/index.json
index ac83dc137a..4d12f1cbee 100644
--- a/apps/app-frontend/src/locales/zh-CN/index.json
+++ b/apps/app-frontend/src/locales/zh-CN/index.json
@@ -143,18 +143,6 @@
   "app.ads-consent.title": {
     "message": "您的隐私以及广告如何支持 Modrinth"
   },
-  "app.appearance-settings.advanced-rendering.description": {
-    "message": "启用模糊效果等高级渲染。可能会在没有硬件加速渲染的情况下造成性能问题。"
-  },
-  "app.appearance-settings.advanced-rendering.title": {
-    "message": "高级渲染"
-  },
-  "app.appearance-settings.color-theme.description": {
-    "message": "为 Modrinth App 选择偏好的色彩主题。"
-  },
-  "app.appearance-settings.color-theme.title": {
-    "message": "色彩主题"
-  },
   "app.appearance-settings.default-landing-page.home": {
     "message": "首页"
   },
@@ -179,12 +167,6 @@
   "app.appearance-settings.minimize-launcher.title": {
     "message": "最小化 App"
   },
-  "app.appearance-settings.native-decorations.description": {
-    "message": "使用操作系统的标题栏和窗口控件。需要重启应用。"
-  },
-  "app.appearance-settings.native-decorations.title": {
-    "message": "系统窗口框架"
-  },
   "app.appearance-settings.show-play-time.description": {
     "message": "显示你在每个实例中游玩的时间。"
   },
diff --git a/apps/app-frontend/src/locales/zh-TW/index.json b/apps/app-frontend/src/locales/zh-TW/index.json
index bd4d82f1ca..d970cb8444 100644
--- a/apps/app-frontend/src/locales/zh-TW/index.json
+++ b/apps/app-frontend/src/locales/zh-TW/index.json
@@ -143,18 +143,6 @@
   "app.ads-consent.title": {
     "message": "關於你的隱私，以及廣告如何幫助 Modrinth"
   },
-  "app.appearance-settings.advanced-rendering.description": {
-    "message": "啟用視覺效果（如背景模糊），若無硬體加速可能會降低效能。"
-  },
-  "app.appearance-settings.advanced-rendering.title": {
-    "message": "進階繪製"
-  },
-  "app.appearance-settings.color-theme.description": {
-    "message": "選擇 Modrinth App 使用的色彩主題。"
-  },
-  "app.appearance-settings.color-theme.title": {
-    "message": "色彩主題"
-  },
   "app.appearance-settings.default-landing-page.home": {
     "message": "首頁"
   },
@@ -179,12 +167,6 @@
   "app.appearance-settings.minimize-launcher.title": {
     "message": "最小化應用程式"
   },
-  "app.appearance-settings.native-decorations.description": {
-    "message": "使用作業系統的標題列和視窗控制項。需要重新啟動應用程式。"
-  },
-  "app.appearance-settings.native-decorations.title": {
-    "message": "系統視窗外框"
-  },
   "app.appearance-settings.show-play-time.description": {
     "message": "顯示你在各個實例的遊玩時數。"
   },
diff --git a/apps/app-frontend/src/main.js b/apps/app-frontend/src/main.js
index c9dfd2b342..99f4c88ca4 100644
--- a/apps/app-frontend/src/main.js
+++ b/apps/app-frontend/src/main.js
@@ -5,7 +5,6 @@ import * as Sentry from '@sentry/vue'
 import { VueScanPlugin } from '@taijased/vue-render-tracker'
 import { VueQueryPlugin } from '@tanstack/vue-query'
 import FloatingVue from 'floating-vue'
-import { createPinia } from 'pinia'
 import { createApp } from 'vue'
 
 import App from '@/App.vue'
@@ -21,8 +20,6 @@ const vueScan = new VueScanPlugin({
 	playSound: false, // Play sound on each render
 })
 
-const pinia = createPinia()
-
 let app = createApp(App)
 
 Sentry.init({
@@ -35,7 +32,6 @@ Sentry.init({
 app.use(VueQueryPlugin)
 app.use(vueScan)
 app.use(router)
-app.use(pinia)
 app.use(FloatingVue, {
 	themes: {
 		'ribbit-popout': {
diff --git a/apps/app-frontend/src/pages/Browse.vue b/apps/app-frontend/src/pages/Browse.vue
index 0a7a18263d..83fab798f1 100644
--- a/apps/app-frontend/src/pages/Browse.vue
+++ b/apps/app-frontend/src/pages/Browse.vue
@@ -41,6 +41,7 @@ import { useRoute, useRouter } from 'vue-router'
 import ContextMenu from '@/components/ui/ContextMenu.vue'
 import { useAppServerBrowse } from '@/composables/browse/use-app-server-browse'
 import { useAppEvent } from '@/composables/use-app-event'
+import { useAppSettings } from '@/composables/use-app-settings.ts'
 import { get_project, get_search_results_v3, get_version_many } from '@/helpers/cache.js'
 import {
 	get_installed_project_ids as getInstalledProjectIds,
@@ -63,7 +64,6 @@ import {
 	createServerInstallContent,
 	provideServerInstallContent,
 } from '@/providers/setup/server-install-content'
-import { useTheming } from '@/store/state'
 
 const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
@@ -109,7 +109,7 @@ const breadcrumbLabel = computed(() => {
 		),
 	})
 })
-const themeStore = useTheming()
+const appSettings = useAppSettings()
 const browseRouteActive = computed(() => route.path.startsWith('/browse/'))
 const serverSetupModalRef = ref<InstanceType<typeof CreationFlowModal> | null>(null)
 const serverInstallContent = createServerInstallContent({ serverSetupModalRef })
@@ -384,7 +384,7 @@ async function initInstanceContext() {
 }
 
 function setBrowseHideInstalledFlag(flag: 'hide_installed_modpacks', value: boolean) {
-	themeStore.featureFlags[flag] = value
+	appSettings.featureFlags[flag] = value
 	getSettings()
 		.then((settings) => {
 			settings.feature_flags[flag] = value
@@ -394,7 +394,7 @@ function setBrowseHideInstalledFlag(flag: 'hide_installed_modpacks', value: bool
 }
 
 const hideInstalledModpacks = computed({
-	get: () => themeStore.getFeatureFlag('hide_installed_modpacks'),
+	get: () => appSettings.getFeatureFlag('hide_installed_modpacks'),
 	set: (value: boolean) => setBrowseHideInstalledFlag('hide_installed_modpacks', value),
 })
 
@@ -742,7 +742,7 @@ const installContext = computed(() => {
 			queuedCount: queuedServerInstallCount.value,
 			selectedProjects: selectedServerInstallProjects.value,
 			isInstallingSelected: isInstallingQueuedServerInstalls.value,
-			skipNonEssentialWarnings: themeStore.getFeatureFlag('skip_non_essential_warnings'),
+			skipNonEssentialWarnings: appSettings.getFeatureFlag('skip_non_essential_warnings'),
 			installProgress: queuedInstallProgress.value,
 			clearQueued: clearQueuedServerInstalls,
 			clearSelected: clearQueuedServerInstalls,
@@ -1222,9 +1222,9 @@ function getProjectBrowseQuery() {
 }
 
 const advancedFiltersCollapsed = computed({
-	get: () => themeStore.getFeatureFlag('advanced_filters_collapsed'),
+	get: () => appSettings.getFeatureFlag('advanced_filters_collapsed'),
 	set: (value) => {
-		themeStore.featureFlags['advanced_filters_collapsed'] = value
+		appSettings.featureFlags['advanced_filters_collapsed'] = value
 		getSettings()
 			.then((settings) => {
 				settings.feature_flags['advanced_filters_collapsed'] = value
@@ -1235,9 +1235,9 @@ const advancedFiltersCollapsed = computed({
 })
 
 const dismissedPhotosensitivityFilterWarning = computed({
-	get: () => themeStore.getFeatureFlag('dismissed_photosensitivity_filter_warning'),
+	get: () => appSettings.getFeatureFlag('dismissed_photosensitivity_filter_warning'),
 	set: (value) => {
-		themeStore.featureFlags['dismissed_photosensitivity_filter_warning'] = value
+		appSettings.featureFlags['dismissed_photosensitivity_filter_warning'] = value
 		getSettings()
 			.then((settings) => {
 				settings.feature_flags['dismissed_photosensitivity_filter_warning'] = value
diff --git a/apps/app-frontend/src/pages/Index.vue b/apps/app-frontend/src/pages/Index.vue
index 9e7c51fd1c..04a9b84833 100644
--- a/apps/app-frontend/src/pages/Index.vue
+++ b/apps/app-frontend/src/pages/Index.vue
@@ -9,12 +9,12 @@ import LibrarySection from '@/components/ui/library/index.vue'
 import WelcomeScreen from '@/components/ui/WelcomeScreen.vue'
 import RecentWorldsList from '@/components/ui/world/RecentWorldsList.vue'
 import { useAppEvent } from '@/composables/use-app-event'
+import { useAppSettings } from '@/composables/use-app-settings.ts'
 import { toError } from '@/helpers/errors'
 import { list } from '@/helpers/instance'
 import type { GameInstance } from '@/helpers/types'
 import { useRootBreadcrumb } from '@/providers/breadcrumbs'
 import { injectOnboardingChecklist } from '@/providers/onboarding-checklist'
-import { useTheming } from '@/store/theme.ts'
 
 defineOptions({
 	name: 'LibraryPage',
@@ -25,7 +25,7 @@ const { formatMessage } = useVIntl()
 const { hasCreatedInstance, isReady } = injectOnboardingChecklist()
 const showCreationModal = inject<() => void>('showCreationModal')
 const pageOptions = ref<InstanceType<typeof ContextMenu>>()
-const themeStore = useTheming()
+const appSettings = useAppSettings()
 
 const messages = defineMessages({
 	home: {
@@ -106,7 +106,7 @@ function handlePageOption({ option }: { option: string }) {
 		@contextmenu="openPageContextMenu"
 	>
 		<RecentWorldsList
-			v-if="recentInstances?.length > 0 && themeStore.getFeatureFlag('worlds_in_home')"
+			v-if="recentInstances?.length > 0 && appSettings.getFeatureFlag('worlds_in_home')"
 			:recent-instances="recentInstances"
 		/>
 		<LibrarySection :instances="instances" />
diff --git a/apps/app-frontend/src/pages/Skins.vue b/apps/app-frontend/src/pages/Skins.vue
index 40a4597fea..a265eed553 100644
--- a/apps/app-frontend/src/pages/Skins.vue
+++ b/apps/app-frontend/src/pages/Skins.vue
@@ -32,6 +32,8 @@ import EarsModIcon from '@/assets/skins/ears-mod.png'
 import type AccountsCard from '@/components/ui/AccountsCard.vue'
 import EditSkinModal from '@/components/ui/skin/EditSkinModal.vue'
 import VirtualSkinSectionList from '@/components/ui/skin/VirtualSkinSectionList.vue'
+import { useAppSettings } from '@/composables/use-app-settings.ts'
+import { handleSevereError } from '@/composables/use-error.js'
 import { trackEvent } from '@/helpers/analytics'
 import { check_reachable, get_default_user, login as login_flow, users } from '@/helpers/auth'
 import type { RenderResult } from '@/helpers/rendering/batch-skin-renderer.ts'
@@ -58,8 +60,6 @@ import {
 } from '@/helpers/skins.ts'
 import { hasPride26Badge } from '@/helpers/user-campaigns.ts'
 import { useRootBreadcrumb } from '@/providers/breadcrumbs'
-import { handleSevereError } from '@/store/error'
-import { useTheming } from '@/store/state'
 import { appMessages } from '@/utils/app-messages'
 
 useRootBreadcrumb({
@@ -217,7 +217,7 @@ const { addNotification, handleError } = notifications
 const auth = injectAuth()
 const client = injectModrinthClient()
 
-const themeStore = useTheming()
+const appSettings = useAppSettings()
 const skins = ref<Skin[]>([])
 const capes = ref<Cape[]>([])
 const offline = ref(!navigator.onLine)
@@ -339,7 +339,7 @@ const skinTexture = computedAsync(async () => {
 })
 const capeTexture = computed(() => currentCape.value?.texture)
 const skinVariant = computed(() => selectedSkin.value?.variant)
-const skinNametag = computed(() => (themeStore.hideNametagSkinsPage ? undefined : username.value))
+const skinNametag = computed(() => (appSettings.hideNametagSkinsPage ? undefined : username.value))
 const isSkinManagementReadOnly = computed(
 	() =>
 		!!currentUser.value &&
diff --git a/apps/app-frontend/src/pages/hosting/manage/Index.vue b/apps/app-frontend/src/pages/hosting/manage/Index.vue
index a90ee87076..e182d1386f 100644
--- a/apps/app-frontend/src/pages/hosting/manage/Index.vue
+++ b/apps/app-frontend/src/pages/hosting/manage/Index.vue
@@ -8,7 +8,7 @@
 			:layout-mode="isContainedServerRoute ? 'contained' : 'page'"
 			:reload-page="() => router.go(0)"
 			:resolve-viewer="resolveViewer"
-			:show-copy-id-action="themeStore.devMode"
+			:show-copy-id-action="appSettings.devMode"
 			:auth-user="authUser"
 			:navigate-to-billing="() => openUrl('https://modrinth.com/settings/billing')"
 			:navigate-to-servers="() => router.push('/hosting/manage')"
@@ -61,17 +61,17 @@ import { openUrl } from '@tauri-apps/plugin-opener'
 import { computed, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
+import { useAppSettings } from '@/composables/use-app-settings.ts'
 import { get_user } from '@/helpers/cache'
 import { get as getCreds } from '@/helpers/mr_auth'
 import { provideBreadcrumbParent, useBreadcrumb } from '@/providers/breadcrumbs'
-import { useTheming } from '@/store/theme'
 
 const route = useRoute()
 const router = useRouter()
 const auth = injectAuth()
 const client = injectModrinthClient()
 const queryClient = useQueryClient()
-const themeStore = useTheming()
+const appSettings = useAppSettings()
 const { formatMessage } = useVIntl()
 
 const isContainedServerRoute = computed(() => route.name === 'ServerManageOverview')
diff --git a/apps/app-frontend/src/pages/instance/components/settings-modal/installation-settings.vue b/apps/app-frontend/src/pages/instance/components/settings-modal/installation-settings.vue
index f2a6e9206e..2dc6d6b97f 100644
--- a/apps/app-frontend/src/pages/instance/components/settings-modal/installation-settings.vue
+++ b/apps/app-frontend/src/pages/instance/components/settings-modal/installation-settings.vue
@@ -16,6 +16,7 @@ import { useQuery, useQueryClient } from '@tanstack/vue-query'
 import { computed, ref } from 'vue'
 
 import { useManagedContentPolicy } from '@/composables/instances/use-managed-content-policy'
+import { useAppSettings } from '@/composables/use-app-settings.ts'
 import { trackEvent } from '@/helpers/analytics'
 import { get_project_versions, get_version } from '@/helpers/cache'
 import {
@@ -34,7 +35,6 @@ import { get_loader_versions } from '@/helpers/metadata'
 import { get_game_versions, get_loaders } from '@/helpers/tags'
 import { injectAppEvents } from '@/providers/app-events'
 import { provideInstanceBackup } from '@/providers/instance-backup'
-import { useTheming } from '@/store/state'
 
 import type { Manifest } from '../../../../helpers/types'
 import { instanceKeys } from '../../query-options.ts'
@@ -47,12 +47,12 @@ const filePicker = injectFilePicker()
 const { formatMessage } = useVIntl()
 const queryClient = useQueryClient()
 const debug = useDebugLogger('AppInstallationSettings')
-const themeStore = useTheming()
+const appSettings = useAppSettings()
 
 const { instance, offline, isMinecraftServer, onUnlinked, closeModal } = injectInstanceSettings()
 const managedContentPolicy = useManagedContentPolicy(instance)
 const skipNonEssentialWarnings = computed(() =>
-	themeStore.getFeatureFlag('skip_non_essential_warnings'),
+	appSettings.getFeatureFlag('skip_non_essential_warnings'),
 )
 
 debug('metadata load: start', {
diff --git a/apps/app-frontend/src/pages/instance/content/index.vue b/apps/app-frontend/src/pages/instance/content/index.vue
index fe22753605..490ae5ca0f 100644
--- a/apps/app-frontend/src/pages/instance/content/index.vue
+++ b/apps/app-frontend/src/pages/instance/content/index.vue
@@ -127,6 +127,7 @@ import ExportModal from '@/components/ui/ExportModal.vue'
 import ShareModalWrapper from '@/components/ui/modal/ShareModalWrapper.vue'
 import { useManagedContentPolicy } from '@/composables/instances/use-managed-content-policy'
 import { useAppEvent } from '@/composables/use-app-event'
+import { type FeatureFlag, useAppSettings } from '@/composables/use-app-settings.ts'
 import { trackEvent } from '@/helpers/analytics'
 import { get_project_versions, get_version, get_version_many } from '@/helpers/cache.js'
 import {
@@ -149,8 +150,6 @@ import type { CacheBehaviour } from '@/helpers/types'
 import { highlightModInInstance } from '@/helpers/utils.js'
 import { type AppEventPayload, injectAppEvents } from '@/providers/app-events'
 import { injectContentInstall } from '@/providers/content-install'
-import { useTheming } from '@/store/state'
-import type { FeatureFlag } from '@/store/theme'
 
 import { injectInstancePage } from '../instance-context'
 import { instanceContentQueryOptions, instanceKeys } from '../query-options'
@@ -234,10 +233,10 @@ const { installingItems, installRevisionByInstance, installFailureRevisionByInst
 const router = useRouter()
 const queryClient = useQueryClient()
 const debug = useDebugLogger('Mods:ContentUpdate')
-const themeStore = useTheming()
+const appSettings = useAppSettings()
 const skipUnknownFileWarningFeatureFlag = 'skip_unknown_pack_warning' as FeatureFlag
 const skipNonEssentialWarnings = computed(() =>
-	themeStore.getFeatureFlag('skip_non_essential_warnings'),
+	appSettings.getFeatureFlag('skip_non_essential_warnings'),
 )
 
 const instancePage = injectInstancePage()
@@ -759,7 +758,7 @@ async function handleUploadFiles() {
 }
 
 function confirmUnknownFileInstallation(fileName: string) {
-	if (themeStore.getFeatureFlag(skipUnknownFileWarningFeatureFlag)) {
+	if (appSettings.getFeatureFlag(skipUnknownFileWarningFeatureFlag)) {
 		return Promise.resolve(true)
 	}
 
@@ -779,7 +778,7 @@ function resolveUnknownFileWarning(confirmed: boolean) {
 
 async function handleUnknownFileContinue(dontShowAgain: boolean) {
 	if (dontShowAgain) {
-		themeStore.featureFlags[skipUnknownFileWarningFeatureFlag] = true
+		appSettings.featureFlags[skipUnknownFileWarningFeatureFlag] = true
 		try {
 			const settings = await getSettings()
 			settings.feature_flags[skipUnknownFileWarningFeatureFlag] = true
diff --git a/apps/app-frontend/src/pages/instance/layout.vue b/apps/app-frontend/src/pages/instance/layout.vue
index 6a9f27d4f1..ad9655fe45 100644
--- a/apps/app-frontend/src/pages/instance/layout.vue
+++ b/apps/app-frontend/src/pages/instance/layout.vue
@@ -133,6 +133,8 @@ import {
 	getFreshCachedServerStatus,
 } from '@/composables/instances/use-server-status-query'
 import { useAppEvent } from '@/composables/use-app-event'
+import { useAppSettings } from '@/composables/use-app-settings.ts'
+import { handleSevereError } from '@/composables/use-error.js'
 import { useInstanceConsole } from '@/composables/useInstanceConsole'
 import { trackEvent } from '@/helpers/analytics'
 import { toError } from '@/helpers/errors'
@@ -159,8 +161,6 @@ import type { ServerStatus } from '@/helpers/worlds'
 import { useRootBreadcrumb } from '@/providers/breadcrumbs'
 import { provideInstanceBackup } from '@/providers/instance-backup'
 import { injectServerInstall } from '@/providers/server-install'
-import { handleSevereError } from '@/store/error.js'
-import { useTheming } from '@/store/state'
 
 import InstanceAdmonitions from './components/admonitions/index.vue'
 import InstancePageHeader from './components/page-header/index.vue'
@@ -216,8 +216,8 @@ watch(
 	},
 	{ immediate: true },
 )
-const themeStore = useTheming()
-const showInstancePlayTime = computed(() => themeStore.getFeatureFlag('show_instance_play_time'))
+const appSettings = useAppSettings()
+const showInstancePlayTime = computed(() => appSettings.getFeatureFlag('show_instance_play_time'))
 
 const online = useOnline()
 const offline = computed(() => !online.value)
diff --git a/apps/app-frontend/src/pages/instance/worlds/index.vue b/apps/app-frontend/src/pages/instance/worlds/index.vue
index 3539b608ca..b4b9583f73 100644
--- a/apps/app-frontend/src/pages/instance/worlds/index.vue
+++ b/apps/app-frontend/src/pages/instance/worlds/index.vue
@@ -157,6 +157,7 @@ import EditServerModal from '@/components/ui/world/modal/EditServerModal.vue'
 import EditWorldModal from '@/components/ui/world/modal/EditSingleplayerWorldModal.vue'
 import WorldItem from '@/components/ui/world/WorldItem.vue'
 import { useAppEvent } from '@/composables/use-app-event'
+import { handleSevereError } from '@/composables/use-error.js'
 import { trackEvent } from '@/helpers/analytics'
 import { get_project, get_project_v3 } from '@/helpers/cache.js'
 import { get_game_versions } from '@/helpers/tags'
@@ -186,7 +187,6 @@ import {
 	type World,
 } from '@/helpers/worlds.ts'
 import { injectServerInstall } from '@/providers/server-install'
-import { handleSevereError } from '@/store/error.js'
 
 import { injectInstancePage } from '../instance-context'
 import { instanceKeys, instanceWorldsQueryOptions } from '../query-options'
diff --git a/apps/app-frontend/src/pages/project/Index.vue b/apps/app-frontend/src/pages/project/Index.vue
index 798a9e97e6..13f5416b6d 100644
--- a/apps/app-frontend/src/pages/project/Index.vue
+++ b/apps/app-frontend/src/pages/project/Index.vue
@@ -55,7 +55,7 @@
 			<InstanceIndicator v-if="instance && !projectInstallContext" :instance="instance" />
 			<template v-if="data">
 				<Teleport
-					v-if="themeStore.featureFlags.project_background"
+					v-if="appSettings.featureFlags.project_background"
 					to="#background-teleport-target"
 				>
 					<ProjectBackgroundGradient :project="data" />
@@ -294,6 +294,7 @@ import {
 	getFreshCachedServerStatus,
 } from '@/composables/instances/use-server-status-query'
 import { useAppEvent } from '@/composables/use-app-event'
+import { useAppSettings } from '@/composables/use-app-settings.ts'
 import {
 	get_organization,
 	get_project,
@@ -317,7 +318,6 @@ import { provideBreadcrumbParent, useBreadcrumb } from '@/providers/breadcrumbs'
 import { injectContentInstall } from '@/providers/content-install'
 import { injectServerInstall } from '@/providers/server-install'
 import { createServerInstallContent } from '@/providers/setup/server-install-content'
-import { useTheming } from '@/store/state.js'
 
 dayjs.extend(relativeTime)
 
@@ -348,7 +348,7 @@ const projectBreadcrumbTo = computed(() => {
 	return currentRoute.fullPath
 })
 const queryClient = useQueryClient()
-const themeStore = useTheming()
+const appSettings = useAppSettings()
 const { formatMessage } = useVIntl()
 
 const messages = defineMessages({
diff --git a/apps/app-frontend/src/pages/project/Versions.vue b/apps/app-frontend/src/pages/project/Versions.vue
index d723a634b8..2893452391 100644
--- a/apps/app-frontend/src/pages/project/Versions.vue
+++ b/apps/app-frontend/src/pages/project/Versions.vue
@@ -5,7 +5,7 @@
 			:game-versions="gameVersions"
 			:versions="versions"
 			:project="project"
-			:show-environment-column="themeStore.featureFlags.show_version_environment_column"
+			:show-environment-column="appSettings.featureFlags.show_version_environment_column"
 			:version-link="(version) => buildProjectHref(`/project/${project.id}/version/${version.id}`)"
 		>
 			<template #actions="{ version }">
@@ -63,11 +63,11 @@ import { ref } from 'vue'
 import { useRoute } from 'vue-router'
 
 import { SwapIcon } from '@/assets/icons/index.js'
+import { useAppSettings } from '@/composables/use-app-settings.ts'
 import { get_game_versions, get_loaders } from '@/helpers/tags.js'
-import { useTheming } from '@/store/theme.ts'
 
 const { formatMessage } = useVIntl()
-const themeStore = useTheming()
+const appSettings = useAppSettings()
 
 const messages = defineMessages({
 	alreadyInstalled: {
diff --git a/apps/app-frontend/src/plugins/i18n-debug.ts b/apps/app-frontend/src/plugins/i18n-debug.ts
index 76fac0851c..9a32684cb3 100644
--- a/apps/app-frontend/src/plugins/i18n-debug.ts
+++ b/apps/app-frontend/src/plugins/i18n-debug.ts
@@ -9,13 +9,13 @@ import {
 import type { App } from 'vue'
 import { reactive, ref, watch } from 'vue'
 
-import { useTheming } from '@/store/theme'
+import { useAppSettings } from '@/composables/use-app-settings.ts'
 
 export default {
 	install(app: App) {
-		const theming = useTheming()
+		const appSettings = useAppSettings()
 
-		const enabled = ref(theming.featureFlags.i18n_debug ?? false)
+		const enabled = ref(appSettings.featureFlags.i18n_debug ?? false)
 		const keyReveal = ref(false)
 		const registry = reactive(new Map()) as Map<
 			string,
@@ -29,7 +29,7 @@ export default {
 		initI18nDebugRuntime(context)
 
 		watch(
-			() => theming.featureFlags.i18n_debug,
+			() => appSettings.featureFlags.i18n_debug,
 			(active) => {
 				enabled.value = active
 				if (!active) {
diff --git a/apps/app-frontend/src/providers/content-install.ts b/apps/app-frontend/src/providers/content-install.ts
index f1ca9bbc69..72f34a1561 100644
--- a/apps/app-frontend/src/providers/content-install.ts
+++ b/apps/app-frontend/src/providers/content-install.ts
@@ -11,6 +11,7 @@ import dayjs from 'dayjs'
 import { nextTick, type Ref, ref } from 'vue'
 import type { Router } from 'vue-router'
 
+import { useAppSettings } from '@/composables/use-app-settings.ts'
 import { trackEvent } from '@/helpers/analytics'
 import {
 	get_organization,
@@ -38,7 +39,6 @@ import {
 import { get_game_versions } from '@/helpers/tags'
 import type { GameInstance, InstanceLoader } from '@/helpers/types'
 import type { AppEvents } from '@/providers/app-events'
-import { useTheming } from '@/store/state'
 interface ModalRef {
 	show: (initialVersionId?: string) => void
 	hide: () => void
@@ -188,7 +188,7 @@ export function createContentInstall(opts: {
 	appEvents: AppEvents
 }): ContentInstallContext {
 	const { formatMessage } = useVIntl()
-	const themeStore = useTheming()
+	const appSettings = useAppSettings()
 	const instances = ref<ContentInstallInstance[]>([])
 	const compatibleLoaders = ref<string[]>([])
 	const gameVersions = ref<string[]>([])
@@ -858,7 +858,7 @@ export function createContentInstall(opts: {
 			const packs = await list()
 			const existingPack = packs.find((pack) => pack.link?.project_id === project.id)
 
-			if (existingPack && !themeStore.getFeatureFlag('skip_non_essential_warnings')) {
+			if (existingPack && !appSettings.getFeatureFlag('skip_non_essential_warnings')) {
 				pendingModpackInstall = { project, version, source, callback, createInstanceCallback }
 				modpackAlreadyInstalledModalRef?.show(existingPack.name, existingPack.id)
 				return
diff --git a/apps/app-frontend/src/providers/server-install.ts b/apps/app-frontend/src/providers/server-install.ts
index 8cd201919f..ec8f2a56b6 100644
--- a/apps/app-frontend/src/providers/server-install.ts
+++ b/apps/app-frontend/src/providers/server-install.ts
@@ -4,6 +4,7 @@ import { createContext } from '@modrinth/ui'
 import { type Ref, ref } from 'vue'
 import type { Router } from 'vue-router'
 
+import { handleSevereError } from '@/composables/use-error.js'
 import { trackEvent } from '@/helpers/analytics'
 import { get_project, get_project_v3, get_version } from '@/helpers/cache.js'
 import {
@@ -18,7 +19,6 @@ import type { GameInstance } from '@/helpers/types'
 import { ensureManagedServerWorldExists, getServerAddress } from '@/helpers/worlds'
 import { start_join_server } from '@/helpers/worlds.ts'
 import type { AppEvents } from '@/providers/app-events'
-import { handleSevereError } from '@/store/error.js'
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 interface ModalRef<TShow extends (...args: any[]) => void = () => void> {
diff --git a/apps/app-frontend/src/providers/setup/auth.ts b/apps/app-frontend/src/providers/setup/auth.ts
index 57bde7d324..372364ad0d 100644
--- a/apps/app-frontend/src/providers/setup/auth.ts
+++ b/apps/app-frontend/src/providers/setup/auth.ts
@@ -46,4 +46,5 @@ export function setupAuthProvider(
 	})
 
 	provideAuth(authProvider)
+	return authProvider
 }
diff --git a/apps/app-frontend/src/providers/setup/creation-modal.ts b/apps/app-frontend/src/providers/setup/creation-modal.ts
index 1ada296ba4..4ede41c8d3 100644
--- a/apps/app-frontend/src/providers/setup/creation-modal.ts
+++ b/apps/app-frontend/src/providers/setup/creation-modal.ts
@@ -9,6 +9,7 @@ import { useRouter } from 'vue-router'
 
 import type UnknownPackWarningModal from '@/components/ui/install_flow/UnknownPackWarningModal.vue'
 import type ModpackAlreadyInstalledModal from '@/components/ui/modal/ModpackAlreadyInstalledModal.vue'
+import { useAppSettings } from '@/composables/use-app-settings.ts'
 import { trackEvent } from '@/helpers/analytics'
 import { get_search_results } from '@/helpers/cache.js'
 import { import_instance } from '@/helpers/import.js'
@@ -22,7 +23,6 @@ import {
 import { list } from '@/helpers/instance'
 import { get_loader_versions as getLoaderManifest } from '@/helpers/metadata.js'
 import type { InstanceIconConfig, InstanceLoader } from '@/helpers/types'
-import { useTheming } from '@/store/state'
 
 export function setupCreationModal(
 	notificationManager: AbstractWebNotificationManager,
@@ -30,7 +30,7 @@ export function setupCreationModal(
 ) {
 	const { handleError } = notificationManager
 	const router = useRouter()
-	const themeStore = useTheming()
+	const appSettings = useAppSettings()
 
 	const installationModal =
 		useTemplateRef<ComponentExposed<typeof CreationFlowModal>>('installationModal')
@@ -97,7 +97,7 @@ export function setupCreationModal(
 				const instances = await list().catch(handleError)
 				const existingInstance = instances?.find((i) => i.link?.project_id === projectId)
 
-				if (existingInstance && !themeStore.getFeatureFlag('skip_non_essential_warnings')) {
+				if (existingInstance && !appSettings.getFeatureFlag('skip_non_essential_warnings')) {
 					pendingModpackCreation.value = { projectId, versionId, name, iconUrl }
 					installationModal.value?.hide()
 					modpackAlreadyInstalledModal.value?.show(existingInstance.name, existingInstance.id)
diff --git a/apps/app-frontend/src/providers/setup/loading-state.ts b/apps/app-frontend/src/providers/setup/loading-state.ts
index 21d3ed1fe9..36a9e1e843 100644
--- a/apps/app-frontend/src/providers/setup/loading-state.ts
+++ b/apps/app-frontend/src/providers/setup/loading-state.ts
@@ -4,7 +4,7 @@ import { createLoadingStateCore, provideLoadingState } from '@modrinth/ui'
 /**
  * Source of truth for the desktop app's loading state.
  *
- * Owns the token-based ref-counter directly (no Pinia store). Consumers
+ * Owns the token-based ref-counter directly. Consumers
  * obtain the same reactive state via `injectLoadingState()` from `@modrinth/ui`.
  *
  * Returns the provider so the call site (App.vue) can also use it directly
diff --git a/apps/app-frontend/src/providers/setup/user-preferences.ts b/apps/app-frontend/src/providers/setup/user-preferences.ts
new file mode 100644
index 0000000000..d7bc88c15f
--- /dev/null
+++ b/apps/app-frontend/src/providers/setup/user-preferences.ts
@@ -0,0 +1,19 @@
+import {
+	type AbstractWebNotificationManager,
+	type AuthProvider,
+	setupUserPreferencesProvider,
+} from '@modrinth/ui'
+
+import { get_user_preferences, patch_user_preferences } from '@/helpers/user-preferences.ts'
+
+export function setupAppUserPreferencesProvider(
+	auth: AuthProvider,
+	notificationManager: AbstractWebNotificationManager,
+) {
+	return setupUserPreferencesProvider({
+		auth,
+		getPreferences: get_user_preferences,
+		patchPreferences: patch_user_preferences,
+		notificationManager,
+	})
+}
diff --git a/apps/app-frontend/src/store/error.js b/apps/app-frontend/src/store/error.js
deleted file mode 100644
index 56953f263e..0000000000
--- a/apps/app-frontend/src/store/error.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import { defineStore } from 'pinia'
-
-import { findMinecraftAuthError } from '@/components/ui/minecraft-auth-error-modal/minecraft-auth-errors'
-
-export const useError = defineStore('errorsStore', {
-	state: () => ({
-		errorModal: null,
-		minecraftAuthErrorModal: null,
-		minecraftRequiredModal: null,
-	}),
-	actions: {
-		setErrorModal(ref) {
-			this.errorModal = ref
-		},
-		setMinecraftAuthErrorModal(ref) {
-			this.minecraftAuthErrorModal = ref
-		},
-		setMinecraftRequiredModal(ref) {
-			this.minecraftRequiredModal = ref
-		},
-		showError(error, context, closable = true, source = null) {
-			const errorMessage = error.message?.toLowerCase()
-			if (
-				(errorMessage?.includes('user is not logged in') ||
-					errorMessage?.includes('cannot play instance since minecraft is required')) &&
-				this.minecraftRequiredModal
-			) {
-				this.minecraftRequiredModal.show()
-				return
-			}
-			if (
-				error.message &&
-				(error.message.includes('Minecraft authentication error:') ||
-					findMinecraftAuthError(error.message)) &&
-				this.minecraftAuthErrorModal
-			) {
-				this.minecraftAuthErrorModal.show(error)
-				return
-			}
-			this.errorModal.show(error, context, closable, source)
-		},
-	},
-})
-
-export const handleSevereError = (err, context) => {
-	const error = useError()
-	error.showError(err, context)
-	console.error(err)
-}
diff --git a/apps/app-frontend/src/store/state.js b/apps/app-frontend/src/store/state.js
deleted file mode 100644
index b5fa69692c..0000000000
--- a/apps/app-frontend/src/store/state.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { useTheming } from './theme.ts'
-
-export { useTheming }
diff --git a/apps/app-frontend/src/store/theme.ts b/apps/app-frontend/src/store/theme.ts
deleted file mode 100644
index 8e0fe8f2b7..0000000000
--- a/apps/app-frontend/src/store/theme.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-import { defineStore } from 'pinia'
-
-let systemThemeMq: MediaQueryList | null = null
-
-export const DEFAULT_FEATURE_FLAGS = {
-	project_background: false,
-	page_path: false,
-	worlds_in_home: true,
-	server_project_qa: false,
-	show_version_environment_column: false,
-	server_ram_as_bytes_always_on: false,
-	always_show_app_controls: false,
-	skip_non_essential_warnings: false,
-	skip_unknown_pack_warning: false,
-	pride_fundraiser: true,
-	i18n_debug: false,
-	show_instance_play_time: true,
-	advanced_filters_collapsed: true,
-	always_show_copy_details: false,
-	hide_installed_modpacks: false,
-	friends_active_collapsed: false,
-	friends_online_collapsed: false,
-	friends_offline_collapsed: true,
-	friends_pending_collapsed: true,
-	dismissed_photosensitivity_filter_warning: false,
-}
-
-export const THEME_OPTIONS = ['dark', 'light', 'oled', 'retro', 'system'] as const
-
-export type FeatureFlag = keyof typeof DEFAULT_FEATURE_FLAGS
-export type FeatureFlags = Record<FeatureFlag, boolean>
-export type ColorTheme = (typeof THEME_OPTIONS)[number]
-
-export type ThemeStore = {
-	selectedTheme: ColorTheme
-	advancedRendering: boolean
-	hideNametagSkinsPage: boolean
-	toggleSidebar: boolean
-
-	devMode: boolean
-	featureFlags: FeatureFlags
-}
-
-export const DEFAULT_THEME_STORE: ThemeStore = {
-	selectedTheme: 'dark',
-	advancedRendering: true,
-	hideNametagSkinsPage: false,
-	toggleSidebar: false,
-
-	devMode: false,
-	featureFlags: DEFAULT_FEATURE_FLAGS,
-}
-
-export const useTheming = defineStore('themeStore', {
-	state: () => DEFAULT_THEME_STORE,
-	actions: {
-		setThemeState(newTheme: ColorTheme) {
-			if (THEME_OPTIONS.includes(newTheme)) {
-				this.selectedTheme = newTheme
-			} else {
-				console.warn('Selected theme is not present. Check themeOptions.')
-			}
-
-			this.setThemeClass()
-		},
-		setThemeClass() {
-			const html = document.getElementsByTagName('html')[0]
-			for (const theme of THEME_OPTIONS) {
-				html.classList.remove(`${theme}-mode`)
-			}
-
-			systemThemeMq?.removeEventListener('change', this.setThemeClass)
-			systemThemeMq = null
-
-			let theme = this.selectedTheme
-			if (this.selectedTheme === 'system') {
-				systemThemeMq = window.matchMedia('(prefers-color-scheme: dark)')
-				systemThemeMq.addEventListener('change', this.setThemeClass)
-				theme = systemThemeMq.matches ? 'dark' : 'light'
-			}
-
-			html.classList.add(`${theme}-mode`)
-		},
-		getFeatureFlag(key: FeatureFlag) {
-			return this.featureFlags[key] ?? DEFAULT_FEATURE_FLAGS[key]
-		},
-		getThemeOptions() {
-			return THEME_OPTIONS
-		},
-	},
-})
diff --git a/apps/app/build.rs b/apps/app/build.rs
index 50798f5ca5..f1347fe3e6 100644
--- a/apps/app/build.rs
+++ b/apps/app/build.rs
@@ -303,7 +303,11 @@ fn main() {
                         "get_user_projects",
                         "get_user_organizations",
                         "get_user_collections",
+                        "get_user_preferences",
+                        "patch_user_preferences",
                         "patch_user",
+                        "change_user_avatar",
+                        "delete_user_avatar",
                         "block_user",
                         "unblock_user",
                         "get_blocked_users",
diff --git a/apps/app/src/api/users.rs b/apps/app/src/api/users.rs
index eae636a7d6..e49089f1c3 100644
--- a/apps/app/src/api/users.rs
+++ b/apps/app/src/api/users.rs
@@ -27,6 +27,19 @@ pub async fn get_user_collections(user_id: &str) -> Result<Value> {
     Ok(theseus::users::get_user_collections(user_id).await?)
 }
 
+#[tauri::command]
+pub async fn get_user_preferences(user_id: &str) -> Result<Value> {
+    Ok(theseus::users::get_user_preferences(user_id).await?)
+}
+
+#[tauri::command]
+pub async fn patch_user_preferences(
+    user_id: &str,
+    preferences: Value,
+) -> Result<Value> {
+    Ok(theseus::users::patch_user_preferences(user_id, preferences).await?)
+}
+
 #[tauri::command]
 pub async fn patch_user(user_id: &str, patch: Value) -> Result<()> {
     Ok(theseus::users::patch_user(user_id, patch).await?)
@@ -72,6 +85,8 @@ pub fn init<R: tauri::Runtime>() -> tauri::plugin::TauriPlugin<R> {
             get_user_projects,
             get_user_organizations,
             get_user_collections,
+            get_user_preferences,
+            patch_user_preferences,
             patch_user,
             change_user_avatar,
             delete_user_avatar,
diff --git a/apps/app/tauri.conf.json b/apps/app/tauri.conf.json
index c1b9d08003..9c2f3c031b 100644
--- a/apps/app/tauri.conf.json
+++ b/apps/app/tauri.conf.json
@@ -1,7 +1,7 @@
 {
 	"$schema": "https://schema.tauri.app/config/2",
 	"build": {
-		"beforeDevCommand": "pnpm turbo run dev --filter=@modrinth/app-frontend",
+		"beforeDevCommand": "pnpm -w i18n:coverage && pnpm turbo run dev --filter=@modrinth/app-frontend",
 		"beforeBuildCommand": "pnpm turbo run build --filter=@modrinth/app-frontend",
 		"frontendDist": "../app-frontend/dist",
 		"devUrl": "http://localhost:1420"
diff --git a/apps/frontend/src/app.vue b/apps/frontend/src/app.vue
index 18804d90cf..4208db0280 100644
--- a/apps/frontend/src/app.vue
+++ b/apps/frontend/src/app.vue
@@ -11,13 +11,55 @@
 	</NuxtLayout>
 </template>
 <script setup lang="ts">
-import { I18nDebugPanel, LoadingBar, NotificationPanel } from '@modrinth/ui'
+import { I18nDebugPanel, injectI18n, LoadingBar, NotificationPanel } from '@modrinth/ui'
 
 import AdsConsentNotification from '~/components/ui/AdsConsentNotification.vue'
+import { isDarkTheme } from '~/plugins/theme/index.ts'
 import { setupProviders } from '~/providers/setup.ts'
 
 import { useAuth } from './composables/auth'
 
 const auth = await useAuth()
-setupProviders(auth)
+const userPreferences = setupProviders(auth)
+const cosmetics = useCosmetics()
+const theme = useTheme()
+const { locale, setLocale } = injectI18n()
+
+watch(
+	userPreferences.preferences,
+	(preferences) => {
+		if (!preferences) return
+
+		if (theme.syncAcrossDevices) {
+			if (isDarkTheme(preferences.appearance.theme)) {
+				theme.preferences.dark = preferences.appearance.theme
+			} else {
+				theme.preferences.light = preferences.appearance.theme
+			}
+			theme.preferred = preferences.appearance.auto ? 'system' : preferences.appearance.theme
+		}
+
+		if (locale.value !== preferences.localization.locale) {
+			void setLocale(preferences.localization.locale)
+		}
+
+		cosmetics.value.searchDisplayMode.mod = preferences.layouts.mods === 'rows' ? 'list' : 'grid'
+		cosmetics.value.searchDisplayMode.plugin =
+			preferences.layouts.plugins === 'rows' ? 'list' : 'grid'
+		cosmetics.value.searchDisplayMode.datapack =
+			preferences.layouts.datapacks === 'rows' ? 'list' : 'grid'
+		cosmetics.value.searchDisplayMode.shader =
+			preferences.layouts.shaders === 'rows' ? 'list' : 'grid'
+		cosmetics.value.searchDisplayMode.resourcepack =
+			preferences.layouts.resourcepacks === 'rows' ? 'list' : 'grid'
+		cosmetics.value.searchDisplayMode.modpack =
+			preferences.layouts.modpacks === 'rows' ? 'list' : 'grid'
+		cosmetics.value.searchDisplayMode.server =
+			preferences.layouts.servers === 'rows' ? 'list' : 'grid'
+		cosmetics.value.searchDisplayMode.user = preferences.layouts.users === 'rows' ? 'list' : 'grid'
+		cosmetics.value.rightSearchLayout = preferences.sidebars.right_aligned_search
+		cosmetics.value.leftContentLayout = preferences.sidebars.left_aligned_content
+	},
+	{ immediate: true },
+)
 </script>
diff --git a/apps/frontend/src/components/ui/NavStack.vue b/apps/frontend/src/components/ui/NavStack.vue
index e71314a55a..ab86be9a04 100644
--- a/apps/frontend/src/components/ui/NavStack.vue
+++ b/apps/frontend/src/components/ui/NavStack.vue
@@ -20,7 +20,7 @@
 					<ButtonLink
 						v-else-if="item.link ?? item.to"
 						type="quiet"
-						interaction="surface"
+						:interaction="isActive(item as NavStackLinkItem) ? 'none' : 'surface'"
 						:to="(item.link ?? item.to) as string"
 						class="nav-item !h-auto !w-full !justify-start !rounded-xl !px-4 !py-2.5 text-left leading-tight"
 						:class="{ 'is-active': isActive(item as NavStackLinkItem) }"
@@ -31,10 +31,16 @@
 							aria-hidden="true"
 							class="h-5 w-5 shrink-0"
 						/>
-						<span class="text-contrast">{{ item.label }}</span>
+						<span
+							:ref="(element) => setItemLabelRef(getKey(item, idx), element)"
+							v-tooltip="itemLabelTooltip(getKey(item, idx), item.label)"
+							class="min-w-0 flex-1 truncate text-contrast"
+						>
+							{{ item.label }}
+						</span>
 						<span
 							v-if="item.badge != null"
-							class="rounded-full bg-brand-highlight px-2 text-sm font-bold text-brand"
+							class="shrink-0 rounded-full bg-brand-highlight px-2 text-sm font-bold text-brand"
 						>
 							{{ String(item.badge) }}
 						</span>
@@ -55,10 +61,16 @@
 							aria-hidden="true"
 							class="h-5 w-5 shrink-0"
 						/>
-						<span class="text-contrast">{{ item.label }}</span>
+						<span
+							:ref="(element) => setItemLabelRef(getKey(item, idx), element)"
+							v-tooltip="itemLabelTooltip(getKey(item, idx), item.label)"
+							class="min-w-0 flex-1 truncate text-contrast"
+						>
+							{{ item.label }}
+						</span>
 						<span
 							v-if="item.badge != null"
-							class="rounded-full bg-brand-highlight px-2 text-sm font-bold text-brand"
+							class="shrink-0 rounded-full bg-brand-highlight px-2 text-sm font-bold text-brand"
 						>
 							{{ String(item.badge) }}
 						</span>
@@ -73,8 +85,8 @@
 
 <script setup lang="ts">
 import { ChevronRightIcon } from '@modrinth/assets'
-import { Button, ButtonLink } from '@modrinth/ui'
-import { type Component, computed, useSlots } from 'vue'
+import { Button, ButtonLink, truncatedTooltip } from '@modrinth/ui'
+import { type Component, type ComponentPublicInstance, computed, ref, useSlots } from 'vue'
 
 type NavStackBaseItem = {
 	label: string
@@ -114,6 +126,16 @@ const hasSlotContent = computed(() => {
 	return !!(content && content.length)
 })
 
+const itemLabelRefs = ref<Record<string, HTMLElement | null>>({})
+
+function setItemLabelRef(key: string, element: Element | ComponentPublicInstance | null) {
+	itemLabelRefs.value[key] = element instanceof HTMLElement ? element : null
+}
+
+function itemLabelTooltip(key: string, label: string) {
+	return truncatedTooltip(itemLabelRefs.value[key], label)
+}
+
 function isSeparator(item: NavStackEntry): item is NavStackSeparator {
 	return (item as any).type === 'separator'
 }
diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index 11cb84c868..fbf55a146d 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -886,6 +886,7 @@ import {
 	injectModrinthClient,
 	injectNotificationManager,
 	injectPageContext,
+	injectUserPreferences,
 	providePageContext,
 	TeleportOverflowMenu,
 	useHostingIntercom,
@@ -920,6 +921,7 @@ const country = useUserCountry()
 
 const { formatMessage } = useVIntl()
 const { addNotification } = injectNotificationManager()
+const { updatePreferences } = injectUserPreferences()
 
 const auth = await useAuth()
 const user = await useUser()
@@ -1488,7 +1490,19 @@ function toggleBrowseMenu() {
 	}
 }
 
-const { cycle: changeTheme } = useTheme()
+const theme = useTheme()
+
+function changeTheme() {
+	const selectedTheme = theme.cycle()
+	if (!theme.syncAcrossDevices) return
+
+	void updatePreferences({
+		appearance: {
+			auto: false,
+			theme: selectedTheme,
+		},
+	}).catch(() => undefined)
+}
 </script>
 
 <style lang="scss">
diff --git a/apps/frontend/src/locales/cs-CZ/index.json b/apps/frontend/src/locales/cs-CZ/index.json
index 20a3fcdbc7..8d137fe166 100644
--- a/apps/frontend/src/locales/cs-CZ/index.json
+++ b/apps/frontend/src/locales/cs-CZ/index.json
@@ -2855,78 +2855,6 @@
   "settings.display.notification.developer-mode-deactivated.title": {
     "message": "Vývojářský režim deaktivován"
   },
-  "settings.display.project-list-layouts.datapack": {
-    "message": "Stránka datapacků"
-  },
-  "settings.display.project-list-layouts.description": {
-    "message": "Vyberte si preferované rozložení pro každou stránku, která zobrazuje seznamy projektů na tomto zařízení."
-  },
-  "settings.display.project-list-layouts.mod": {
-    "message": "Stránka módů"
-  },
-  "settings.display.project-list-layouts.mode.gallery": {
-    "message": "Galerie"
-  },
-  "settings.display.project-list-layouts.mode.grid": {
-    "message": "Mřížka"
-  },
-  "settings.display.project-list-layouts.mode.rows": {
-    "message": "Řádky"
-  },
-  "settings.display.project-list-layouts.modpack": {
-    "message": "Stránka modpacků"
-  },
-  "settings.display.project-list-layouts.plugin": {
-    "message": "Stránka pluginů"
-  },
-  "settings.display.project-list-layouts.resourcepack": {
-    "message": "Stránka resourcepacků"
-  },
-  "settings.display.project-list-layouts.server": {
-    "message": "Stránka serverů"
-  },
-  "settings.display.project-list-layouts.shader": {
-    "message": "Stránka shaderů"
-  },
-  "settings.display.project-list-layouts.title": {
-    "message": "Rozvržení seznamu projektů"
-  },
-  "settings.display.project-list-layouts.user": {
-    "message": "Stránka uživatelských profilů"
-  },
-  "settings.display.project-list.layouts.collection": {
-    "message": "Kolekce"
-  },
-  "settings.display.sidebar.advanced-rendering.description": {
-    "message": "Povolí pokročilé vykreslování, například efekty rozmazání, které mohou bez hardwarového zrychlení způsobovat problémy s výkonem."
-  },
-  "settings.display.sidebar.advanced-rendering.title": {
-    "message": "Pokročilé vykreslování"
-  },
-  "settings.display.sidebar.external-links-new-tab.description": {
-    "message": "Způsobí, že odkazy směřující mimo Modrinth budou otevřeny v nové kartě. Bez ohledu na toto nastavení se odkazy na stejné doméně a v Markdown popisech otevřou ve stávající kartě a odkazy na reklamy a úpravy stránek budou otevřeny v nové kartě."
-  },
-  "settings.display.sidebar.external-links-new-tab.title": {
-    "message": "Otevřít externí odkazy v nové kartě"
-  },
-  "settings.display.sidebar.hide-app-promos.description": {
-    "message": "Skryje tlačítka \"Získat Modrinth App\" z primární navigace. Stránka aplikace Modrinth bude stále přístupná ze vstupní stránky nebo ze zápatí."
-  },
-  "settings.display.sidebar.hide-app-promos.title": {
-    "message": "Skrýt Modrinth App promoce"
-  },
-  "settings.display.sidebar.right-aligned-content-sidebar.description": {
-    "message": "Zarovná postranní panel s detaily o projektu vlevo od obsahu stránky."
-  },
-  "settings.display.sidebar.right-aligned-filters-sidebar.description": {
-    "message": "Zarovná postranní panel s filtry vpravo od výsledků vyhledávání."
-  },
-  "settings.display.theme.description": {
-    "message": "Vyberte si preferovaný barevný motiv pro Modrinth na tomto zařízení."
-  },
-  "settings.display.theme.title": {
-    "message": "Barevný motiv"
-  },
   "settings.head-title": {
     "message": "Nastavení zobrazení"
   },
diff --git a/apps/frontend/src/locales/da-DK/index.json b/apps/frontend/src/locales/da-DK/index.json
index 860f97da95..764723bd3e 100644
--- a/apps/frontend/src/locales/da-DK/index.json
+++ b/apps/frontend/src/locales/da-DK/index.json
@@ -3101,48 +3101,6 @@
   "settings.billing.upgrade": {
     "message": "Opgrader"
   },
-  "settings.display.project-list-layouts.datapack": {
-    "message": "Side til datapakker"
-  },
-  "settings.display.project-list-layouts.mod": {
-    "message": "Mods side"
-  },
-  "settings.display.project-list-layouts.mode.gallery": {
-    "message": "Galleri"
-  },
-  "settings.display.project-list-layouts.mode.grid": {
-    "message": "Gitter"
-  },
-  "settings.display.project-list-layouts.mode.rows": {
-    "message": "Rækker"
-  },
-  "settings.display.project-list-layouts.modpack": {
-    "message": "Modpacks side"
-  },
-  "settings.display.project-list-layouts.plugin": {
-    "message": "Plugins side"
-  },
-  "settings.display.project-list-layouts.resourcepack": {
-    "message": "Side til ressourcepakker"
-  },
-  "settings.display.project-list-layouts.server": {
-    "message": "Servere side"
-  },
-  "settings.display.project-list-layouts.shader": {
-    "message": "Side til shaders"
-  },
-  "settings.display.project-list-layouts.title": {
-    "message": "Projektlistelayouts"
-  },
-  "settings.display.project-list.layouts.collection": {
-    "message": "Samling"
-  },
-  "settings.display.sidebar.right-aligned-content-sidebar.description": {
-    "message": "Flytter sidebjælken til venstre for sidens indhold."
-  },
-  "settings.display.theme.title": {
-    "message": "Farvetema"
-  },
   "settings.pats.action.create": {
     "message": "Opret en PAT"
   },
diff --git a/apps/frontend/src/locales/de-CH/index.json b/apps/frontend/src/locales/de-CH/index.json
index b72d14c383..2c55d1dd8e 100644
--- a/apps/frontend/src/locales/de-CH/index.json
+++ b/apps/frontend/src/locales/de-CH/index.json
@@ -5012,96 +5012,12 @@
   "settings.display.banner.developer-mode.description": {
     "message": "<strong>Entwicklermodus</strong> ist aktiviert. Dies erlaubt es dir, die internen IDs von verschiedensten Dingen in Modrinth anzusehen, welche eventuell von nutzen sein können, wenn du ein Entwickler bist, welcher die Modrinth API verwendet. Klicke 5 mal auf das Modrinth Logo am unteren Ender der Seite um den Entwicklermodus umzuschalten."
   },
-  "settings.display.flags.description": {
-    "message": "Aktiviere oder deaktiviere bestimmte Funktionen auf diesem Gerät."
-  },
-  "settings.display.flags.title": {
-    "message": "Funktionen umschalten"
-  },
   "settings.display.notification.developer-mode-deactivated.text": {
     "message": "Entwicklermodus wurde deaktiviert"
   },
   "settings.display.notification.developer-mode-deactivated.title": {
     "message": "Entwicklermodus deaktiviert"
   },
-  "settings.display.project-list-layouts.datapack": {
-    "message": "Datenpakete-Seite"
-  },
-  "settings.display.project-list-layouts.description": {
-    "message": "Wähle dein bevorzugtes Layout für jede Seite, welches Projektlisten auf diesem Gerät anzeigt."
-  },
-  "settings.display.project-list-layouts.mod": {
-    "message": "Mods-Seite"
-  },
-  "settings.display.project-list-layouts.mode.gallery": {
-    "message": "Galerie"
-  },
-  "settings.display.project-list-layouts.mode.grid": {
-    "message": "Raster"
-  },
-  "settings.display.project-list-layouts.mode.rows": {
-    "message": "Zeilen"
-  },
-  "settings.display.project-list-layouts.modpack": {
-    "message": "Modpakete-Seite"
-  },
-  "settings.display.project-list-layouts.plugin": {
-    "message": "Plugins-Seite"
-  },
-  "settings.display.project-list-layouts.resourcepack": {
-    "message": "Ressourcenpakete-Seite"
-  },
-  "settings.display.project-list-layouts.server": {
-    "message": "Server-Seite"
-  },
-  "settings.display.project-list-layouts.shader": {
-    "message": "Shader-Seite"
-  },
-  "settings.display.project-list-layouts.title": {
-    "message": "Projeklisten-Layouts"
-  },
-  "settings.display.project-list-layouts.user": {
-    "message": "Benutzerprofilseiten"
-  },
-  "settings.display.project-list.layouts.collection": {
-    "message": "Kollektionen"
-  },
-  "settings.display.sidebar.advanced-rendering.description": {
-    "message": "Aktiviert erweiterte Renderfunktionen wie Unschärfeeffekte, welche ohne hardwarebeschleunigtes Rendering zu Leistungsproblemen führen kann."
-  },
-  "settings.display.sidebar.advanced-rendering.title": {
-    "message": "Erweiterte Renderfunktionen"
-  },
-  "settings.display.sidebar.external-links-new-tab.description": {
-    "message": "Lasse Links, welche ausserhalb von Modrinth führen, in einem neuen Tab öffnen. Unabhängig von dieser Einstellung werden Links auf die gleiche Domain und in Markdown beschreibungen im selben Tab geöffnet, und Links in Werbung Bearbeitungsseiten öffnen in einem neuen Tab."
-  },
-  "settings.display.sidebar.external-links-new-tab.title": {
-    "message": "Öffne externe Links in neuem Tab"
-  },
-  "settings.display.sidebar.hide-app-promos.description": {
-    "message": "Versteckt die \"Modrinth App herunterladen\" Schaltfläche von der Hauptnavigation. Die Modrinth App Seite kann immer noch auf der Startseite oder in der Fusszeile gefunden werden."
-  },
-  "settings.display.sidebar.hide-app-promos.title": {
-    "message": "Verstecke Modrinth App Werbung"
-  },
-  "settings.display.sidebar.left-aligned-content-sidebar.title": {
-    "message": "Linksbündige Seitenleiste auf Inhaltsseiten"
-  },
-  "settings.display.sidebar.right-aligned-content-sidebar.description": {
-    "message": "Richtet die Seitenleiste links vom Seiteninhalt aus."
-  },
-  "settings.display.sidebar.right-aligned-filters-sidebar.description": {
-    "message": "Richtet die Filter-Seitenleiste rechts neben den Suchergebnissen aus."
-  },
-  "settings.display.sidebar.right-aligned-filters-sidebar.title": {
-    "message": "Rechtsbündige Filter-Suchleiste auf Suchseiten"
-  },
-  "settings.display.theme.description": {
-    "message": "Wähle dein bevorzugtes Farbschema für Modrinth auf diesem Gerät aus."
-  },
-  "settings.display.theme.title": {
-    "message": "Farbschema"
-  },
   "settings.head-title": {
     "message": "Anzeigeeinstellungen"
   },
diff --git a/apps/frontend/src/locales/de-DE/index.json b/apps/frontend/src/locales/de-DE/index.json
index 546e8fcb39..c5b18992a3 100644
--- a/apps/frontend/src/locales/de-DE/index.json
+++ b/apps/frontend/src/locales/de-DE/index.json
@@ -5012,96 +5012,12 @@
   "settings.display.banner.developer-mode.description": {
     "message": "Der <strong>Entwicklermodus</strong> ist aktiviert. Damit kannst du die internen IDs verschiedener Elemente in Modrinth anzeigen, was für Entwickler, welche die Modrinth-API verwenden, hilfreich sein kann. Klick fünfmal auf das Modrinth-Logo unten auf der Seite, um den Entwicklermodus umzuschalten."
   },
-  "settings.display.flags.description": {
-    "message": "Bestimmte Funktionen auf diesem Gerät aktivieren oder deaktivieren."
-  },
-  "settings.display.flags.title": {
-    "message": "Funktionen umschalten"
-  },
   "settings.display.notification.developer-mode-deactivated.text": {
     "message": "Entwicklermodus wurde deaktiviert"
   },
   "settings.display.notification.developer-mode-deactivated.title": {
     "message": "Entwicklermodus deaktiviert"
   },
-  "settings.display.project-list-layouts.datapack": {
-    "message": "Datenpakete-Seite"
-  },
-  "settings.display.project-list-layouts.description": {
-    "message": "Wähle auf diesem Gerät für jede Seite, auf der Projektlisten angezeigt werden, dein bevorzugtes Layout aus."
-  },
-  "settings.display.project-list-layouts.mod": {
-    "message": "Mods-Seite"
-  },
-  "settings.display.project-list-layouts.mode.gallery": {
-    "message": "Galerie"
-  },
-  "settings.display.project-list-layouts.mode.grid": {
-    "message": "Raster"
-  },
-  "settings.display.project-list-layouts.mode.rows": {
-    "message": "Zeilen"
-  },
-  "settings.display.project-list-layouts.modpack": {
-    "message": "Modpacks-Seite"
-  },
-  "settings.display.project-list-layouts.plugin": {
-    "message": "Plugins-Seite"
-  },
-  "settings.display.project-list-layouts.resourcepack": {
-    "message": "Ressourcenpakete-Seite"
-  },
-  "settings.display.project-list-layouts.server": {
-    "message": "Server-Seite"
-  },
-  "settings.display.project-list-layouts.shader": {
-    "message": "Shader-Seite"
-  },
-  "settings.display.project-list-layouts.title": {
-    "message": "Layouts für Projektlisten"
-  },
-  "settings.display.project-list-layouts.user": {
-    "message": "Benutzerprofilseiten"
-  },
-  "settings.display.project-list.layouts.collection": {
-    "message": "Kollektion"
-  },
-  "settings.display.sidebar.advanced-rendering.description": {
-    "message": "Aktiviert erweiterte Rendering-Funktionen wie Unschärfeeffekte, welche ohne hardwarebeschleunigtes Rendering zu Leistungsproblemen führen können."
-  },
-  "settings.display.sidebar.advanced-rendering.title": {
-    "message": "Erweiterte Renderfunktionen"
-  },
-  "settings.display.sidebar.external-links-new-tab.description": {
-    "message": "Links, die außerhalb von Modrinth führen, werden in einem neuen Tab geöffnet. Unabhängig von dieser Einstellung werden Links auf der gleichen Domain und in Markdown-Beschreibungen immer im selben Tab geöffnet, während Links auf Anzeigen- und Bearbeitungsseiten immer in einem neuen Tab geöffnet werden."
-  },
-  "settings.display.sidebar.external-links-new-tab.title": {
-    "message": "Externe Links in neuem Tab öffnen"
-  },
-  "settings.display.sidebar.hide-app-promos.description": {
-    "message": "Versteckt die \"Modrinth App herunterladen\"-Schaltflächen aus der Hauptnavigation. Die Seite der Modrinth App kann weiterhin auf der Startseite oder in der Fußzeile gefunden werden."
-  },
-  "settings.display.sidebar.hide-app-promos.title": {
-    "message": "Werbungen für die Modrinth App ausblenden"
-  },
-  "settings.display.sidebar.left-aligned-content-sidebar.title": {
-    "message": "Linksbündige Seitenleiste auf Inhaltsseiten"
-  },
-  "settings.display.sidebar.right-aligned-content-sidebar.description": {
-    "message": "Richtet die Seitenleiste links vom Seiteninhalt aus."
-  },
-  "settings.display.sidebar.right-aligned-filters-sidebar.description": {
-    "message": "Richtet die Filter-Seitenleiste rechts neben den Suchergebnissen aus."
-  },
-  "settings.display.sidebar.right-aligned-filters-sidebar.title": {
-    "message": "Rechtsbündige Filter-Seitenleiste auf Suchseiten"
-  },
-  "settings.display.theme.description": {
-    "message": "Wähle dein bevorzugtes Farbschema für Modrinth auf diesem Gerät."
-  },
-  "settings.display.theme.title": {
-    "message": "Farbschema"
-  },
   "settings.head-title": {
     "message": "Anzeigeeinstellungen"
   },
diff --git a/apps/frontend/src/locales/en-US/index.json b/apps/frontend/src/locales/en-US/index.json
index 04e1b05bbf..705bdcb470 100644
--- a/apps/frontend/src/locales/en-US/index.json
+++ b/apps/frontend/src/locales/en-US/index.json
@@ -5282,96 +5282,12 @@
   "settings.display.banner.developer-mode.description": {
     "message": "<strong>Developer mode</strong> is active. This will allow you to view the internal IDs of various things throughout Modrinth that may be helpful if you're a developer using the Modrinth API. Click on the Modrinth logo at the bottom of the page 5 times to toggle developer mode."
   },
-  "settings.display.flags.description": {
-    "message": "Enable or disable certain features on this device."
-  },
-  "settings.display.flags.title": {
-    "message": "Toggle features"
-  },
   "settings.display.notification.developer-mode-deactivated.text": {
     "message": "Developer mode has been disabled"
   },
   "settings.display.notification.developer-mode-deactivated.title": {
     "message": "Developer mode deactivated"
   },
-  "settings.display.project-list-layouts.datapack": {
-    "message": "Data Packs page"
-  },
-  "settings.display.project-list-layouts.description": {
-    "message": "Select your preferred layout for each page that displays project lists on this device."
-  },
-  "settings.display.project-list-layouts.mod": {
-    "message": "Mods page"
-  },
-  "settings.display.project-list-layouts.mode.gallery": {
-    "message": "Gallery"
-  },
-  "settings.display.project-list-layouts.mode.grid": {
-    "message": "Grid"
-  },
-  "settings.display.project-list-layouts.mode.rows": {
-    "message": "Rows"
-  },
-  "settings.display.project-list-layouts.modpack": {
-    "message": "Modpacks page"
-  },
-  "settings.display.project-list-layouts.plugin": {
-    "message": "Plugins page"
-  },
-  "settings.display.project-list-layouts.resourcepack": {
-    "message": "Resource Packs page"
-  },
-  "settings.display.project-list-layouts.server": {
-    "message": "Servers page"
-  },
-  "settings.display.project-list-layouts.shader": {
-    "message": "Shaders page"
-  },
-  "settings.display.project-list-layouts.title": {
-    "message": "Project list layouts"
-  },
-  "settings.display.project-list-layouts.user": {
-    "message": "User profile pages"
-  },
-  "settings.display.project-list.layouts.collection": {
-    "message": "Collection"
-  },
-  "settings.display.sidebar.advanced-rendering.description": {
-    "message": "Enables advanced rendering such as blur effects that may cause performance issues without hardware-accelerated rendering."
-  },
-  "settings.display.sidebar.advanced-rendering.title": {
-    "message": "Advanced rendering"
-  },
-  "settings.display.sidebar.external-links-new-tab.description": {
-    "message": "Make links which go outside of Modrinth open in a new tab. No matter this setting, links on the same domain and in Markdown descriptions will open in the same tab, and links on ads and edit pages will open in a new tab."
-  },
-  "settings.display.sidebar.external-links-new-tab.title": {
-    "message": "Open external links in new tab"
-  },
-  "settings.display.sidebar.hide-app-promos.description": {
-    "message": "Hides the \"Get Modrinth App\" buttons from primary navigation. The Modrinth App page can still be found on the landing page or in the footer."
-  },
-  "settings.display.sidebar.hide-app-promos.title": {
-    "message": "Hide Modrinth App promotions"
-  },
-  "settings.display.sidebar.left-aligned-content-sidebar.title": {
-    "message": "Left-aligned sidebar on content pages"
-  },
-  "settings.display.sidebar.right-aligned-content-sidebar.description": {
-    "message": "Aligns the sidebar to the left of the page's content."
-  },
-  "settings.display.sidebar.right-aligned-filters-sidebar.description": {
-    "message": "Aligns the filters sidebar to the right of the search results."
-  },
-  "settings.display.sidebar.right-aligned-filters-sidebar.title": {
-    "message": "Right-aligned filters sidebar on search pages"
-  },
-  "settings.display.theme.description": {
-    "message": "Select your preferred color theme for Modrinth on this device."
-  },
-  "settings.display.theme.title": {
-    "message": "Color theme"
-  },
   "settings.head-title": {
     "message": "Display settings"
   },
diff --git a/apps/frontend/src/locales/es-419/index.json b/apps/frontend/src/locales/es-419/index.json
index 3feb583f9d..491ebca358 100644
--- a/apps/frontend/src/locales/es-419/index.json
+++ b/apps/frontend/src/locales/es-419/index.json
@@ -5012,96 +5012,12 @@
   "settings.display.banner.developer-mode.description": {
     "message": "<strong>Modo desarrollador</strong> activo. Podrás ver los IDs internos de varios elementos de Modrinth, lo que resulta útil si usas la API de Modrinth. Haz clic en el logo de Modrinth en la parte inferior de la página 5 veces para alternar el modo desarrollador."
   },
-  "settings.display.flags.description": {
-    "message": "Activa o desactiva determinadas funciones en este dispositivo."
-  },
-  "settings.display.flags.title": {
-    "message": "Activar/desactivar funciones"
-  },
   "settings.display.notification.developer-mode-deactivated.text": {
     "message": "El modo desarrollador se ha desactivado"
   },
   "settings.display.notification.developer-mode-deactivated.title": {
     "message": "Modo desarrollador desactivado"
   },
-  "settings.display.project-list-layouts.datapack": {
-    "message": "Página de Data Packs"
-  },
-  "settings.display.project-list-layouts.description": {
-    "message": "Selecciona el diseño que prefieras para cada página que muestre listas de proyectos en este dispositivo."
-  },
-  "settings.display.project-list-layouts.mod": {
-    "message": "Página de Mods"
-  },
-  "settings.display.project-list-layouts.mode.gallery": {
-    "message": "Galería"
-  },
-  "settings.display.project-list-layouts.mode.grid": {
-    "message": "Cuadrícula"
-  },
-  "settings.display.project-list-layouts.mode.rows": {
-    "message": "Filas"
-  },
-  "settings.display.project-list-layouts.modpack": {
-    "message": "Página de Modpacks"
-  },
-  "settings.display.project-list-layouts.plugin": {
-    "message": "Página de Plugins"
-  },
-  "settings.display.project-list-layouts.resourcepack": {
-    "message": "Página de Resource Packs"
-  },
-  "settings.display.project-list-layouts.server": {
-    "message": "Página de Servidores"
-  },
-  "settings.display.project-list-layouts.shader": {
-    "message": "Página de Shaders"
-  },
-  "settings.display.project-list-layouts.title": {
-    "message": "Diseños de las listas de proyectos"
-  },
-  "settings.display.project-list-layouts.user": {
-    "message": "Páginas de perfil de usuario"
-  },
-  "settings.display.project-list.layouts.collection": {
-    "message": "Colección"
-  },
-  "settings.display.sidebar.advanced-rendering.description": {
-    "message": "Activa el renderizado avanzado, como los efectos de desenfoque, que pueden afectar el rendimiento sin aceleración por hardware."
-  },
-  "settings.display.sidebar.advanced-rendering.title": {
-    "message": "Renderizado avanzado"
-  },
-  "settings.display.sidebar.external-links-new-tab.description": {
-    "message": "Haz que los enlaces que llevan fuera de Modrinth se abran en una nueva pestaña. Sin importar esta configuración, los enlaces del mismo dominio y los de las descripciones en Markdown se abrirán en la misma pestaña, mientras que los enlaces en anuncios y páginas de edición se abrirán en una nueva pestaña."
-  },
-  "settings.display.sidebar.external-links-new-tab.title": {
-    "message": "Abrir enlaces externos en una nueva pestaña"
-  },
-  "settings.display.sidebar.hide-app-promos.description": {
-    "message": "Oculta los botones \"Obtener la Modrinth App\" de la navegación principal. La página de la aplicación Modrinth sigue estando disponible en la página de inicio o en el pie de página."
-  },
-  "settings.display.sidebar.hide-app-promos.title": {
-    "message": "Ocultar promociones de la Modrinth App"
-  },
-  "settings.display.sidebar.left-aligned-content-sidebar.title": {
-    "message": "Barra lateral alineada a la izquierda en las páginas de contenido"
-  },
-  "settings.display.sidebar.right-aligned-content-sidebar.description": {
-    "message": "Alinea la barra lateral a la izquierda en las páginas de contenido."
-  },
-  "settings.display.sidebar.right-aligned-filters-sidebar.description": {
-    "message": "Alinea la barra lateral de los filtros a la derecha de los resultados de búsqueda."
-  },
-  "settings.display.sidebar.right-aligned-filters-sidebar.title": {
-    "message": "Barra lateral de filtros alineada a la derecha en páginas de búsqueda"
-  },
-  "settings.display.theme.description": {
-    "message": "Selecciona el tema de color que prefieras para Modrinth en este dispositivo."
-  },
-  "settings.display.theme.title": {
-    "message": "Color de la interfaz"
-  },
   "settings.head-title": {
     "message": "Configuración de Visualización"
   },
diff --git a/apps/frontend/src/locales/es-ES/index.json b/apps/frontend/src/locales/es-ES/index.json
index 43de18f9f6..3459f67c79 100644
--- a/apps/frontend/src/locales/es-ES/index.json
+++ b/apps/frontend/src/locales/es-ES/index.json
@@ -4265,96 +4265,12 @@
   "settings.display.banner.developer-mode.description": {
     "message": "El <strong>modo desarrollador</strong> está activo. Esto te permitirá ver los ID internos de varios elementos de Modrinth, lo que puede resultarte útil si eres desarrollador y utilizas la API de Modrinth. Haz clic 5 veces en el logotipo de Modrinth situado en la parte inferior de la página para activar o desactivar el modo desarrollador."
   },
-  "settings.display.flags.description": {
-    "message": "Activar o desactivar determinadas funciones de este dispositivo."
-  },
-  "settings.display.flags.title": {
-    "message": "Alternar funciones"
-  },
   "settings.display.notification.developer-mode-deactivated.text": {
     "message": "El modo de desarrollador se ha desactivado"
   },
   "settings.display.notification.developer-mode-deactivated.title": {
     "message": "Modo de desarrollador desactivado"
   },
-  "settings.display.project-list-layouts.datapack": {
-    "message": "Página de Paquetes de Datos"
-  },
-  "settings.display.project-list-layouts.description": {
-    "message": "Selecciona tu diseño preferido para cada página que muestre listas de proyectos en este dispositivo."
-  },
-  "settings.display.project-list-layouts.mod": {
-    "message": "Página de Mods"
-  },
-  "settings.display.project-list-layouts.mode.gallery": {
-    "message": "Galería"
-  },
-  "settings.display.project-list-layouts.mode.grid": {
-    "message": "Cuadrícula"
-  },
-  "settings.display.project-list-layouts.mode.rows": {
-    "message": "Filas"
-  },
-  "settings.display.project-list-layouts.modpack": {
-    "message": "Página de Modpacks"
-  },
-  "settings.display.project-list-layouts.plugin": {
-    "message": "Página de Plugins"
-  },
-  "settings.display.project-list-layouts.resourcepack": {
-    "message": "Página de Paquetes de Recursos"
-  },
-  "settings.display.project-list-layouts.server": {
-    "message": "Página de servidores"
-  },
-  "settings.display.project-list-layouts.shader": {
-    "message": "Página de Sombreadores"
-  },
-  "settings.display.project-list-layouts.title": {
-    "message": "Diseños de la lista de proyectos"
-  },
-  "settings.display.project-list-layouts.user": {
-    "message": "Páginas de perfil de usuario"
-  },
-  "settings.display.project-list.layouts.collection": {
-    "message": "Colección"
-  },
-  "settings.display.sidebar.advanced-rendering.description": {
-    "message": "Habilita el renderizado avanzado, como los efectos de desenfoque, que pueden causar problemas de rendimiento sin renderizado acelerado por hardware."
-  },
-  "settings.display.sidebar.advanced-rendering.title": {
-    "message": "Renderizado avanzado"
-  },
-  "settings.display.sidebar.external-links-new-tab.description": {
-    "message": "Haz que los enlaces que salen de Modrinth se abran en una nueva pestaña. Independientemente de esta configuración, los enlaces del mismo dominio y de las descripciones Markdown se abrirán en la misma pestaña, y los enlaces de los anuncios y las páginas de edición se abrirán en una nueva pestaña."
-  },
-  "settings.display.sidebar.external-links-new-tab.title": {
-    "message": "Abrir enlaces externos en una nueva pestaña"
-  },
-  "settings.display.sidebar.hide-app-promos.description": {
-    "message": "Oculta los botones «Obtener la aplicación Modrinth» de la navegación principal. La página de la aplicación Modrinth sigue estando disponible en la página de inicio o en el pie de página."
-  },
-  "settings.display.sidebar.hide-app-promos.title": {
-    "message": "Ocultar promociones de la aplicación de Modrinth"
-  },
-  "settings.display.sidebar.left-aligned-content-sidebar.title": {
-    "message": "Barra lateral alineada a la izquierda en páginas de contenido"
-  },
-  "settings.display.sidebar.right-aligned-content-sidebar.description": {
-    "message": "Alinea la barra lateral a la izquierda del contenido de la página."
-  },
-  "settings.display.sidebar.right-aligned-filters-sidebar.description": {
-    "message": "Alinea la barra lateral de filtros a la derecha de los resultados de la búsqueda."
-  },
-  "settings.display.sidebar.right-aligned-filters-sidebar.title": {
-    "message": "Barra lateral de filtros alineada a la derecha en las páginas de búsqueda"
-  },
-  "settings.display.theme.description": {
-    "message": "Seleccione su tema de color preferido para Modrinth en este dispositivo."
-  },
-  "settings.display.theme.title": {
-    "message": "Tema de color"
-  },
   "settings.head-title": {
     "message": "Configuración de pantalla"
   },
diff --git a/apps/frontend/src/locales/fi-FI/index.json b/apps/frontend/src/locales/fi-FI/index.json
index ba945b4d2e..b8770d3b10 100644
--- a/apps/frontend/src/locales/fi-FI/index.json
+++ b/apps/frontend/src/locales/fi-FI/index.json
@@ -1025,21 +1025,6 @@
   "settings.billing.payment_method.primary": {
     "message": "Ensisijainen"
   },
-  "settings.display.project-list-layouts.mod": {
-    "message": "Mods -sivu"
-  },
-  "settings.display.project-list-layouts.plugin": {
-    "message": "Plugins -sivu"
-  },
-  "settings.display.project-list-layouts.shader": {
-    "message": "Shaders -sivu"
-  },
-  "settings.display.project-list.layouts.collection": {
-    "message": "Kokoelma"
-  },
-  "settings.display.theme.title": {
-    "message": "Väri teema"
-  },
   "settings.pats.modal.create.expires.label": {
     "message": "Vanhenee"
   },
diff --git a/apps/frontend/src/locales/fil-PH/index.json b/apps/frontend/src/locales/fil-PH/index.json
index 3cecbe30fc..30a2503c92 100644
--- a/apps/frontend/src/locales/fil-PH/index.json
+++ b/apps/frontend/src/locales/fil-PH/index.json
@@ -3005,93 +3005,9 @@
   "settings.display.banner.developer-mode.description": {
     "message": "Ang <strong>developer mode</strong> ay aktibo. Binibigyang-daan ka nitong malaman ang internal ID ng samut-saring bagay sa Modrinth na nakakatulong sa mga developer sa paggamit ng Modrinth API. Pindutin ang logo ng Modrinth sa ibaba ng pahina ng 5 beses upang ma-toggle ang developer mode."
   },
-  "settings.display.flags.description": {
-    "message": "Magpagana at magpatay ng mga piniling tampok sa iyong device."
-  },
-  "settings.display.flags.title": {
-    "message": "Pagtatakda ng tampok"
-  },
   "settings.display.notification.developer-mode-deactivated.text": {
     "message": "Pinatay ang moda ng nagde-develop"
   },
-  "settings.display.project-list-layouts.datapack": {
-    "message": "Pahina ng Mga Data Pack"
-  },
-  "settings.display.project-list-layouts.description": {
-    "message": "Pumili ng iyong gugustohing ayos ng bawat pahinang magpapakita sa mga listahan ng proyekto sa iyong device."
-  },
-  "settings.display.project-list-layouts.mod": {
-    "message": "Pahina ng mga mod"
-  },
-  "settings.display.project-list-layouts.mode.gallery": {
-    "message": "Galeriya"
-  },
-  "settings.display.project-list-layouts.mode.grid": {
-    "message": "Parilya"
-  },
-  "settings.display.project-list-layouts.mode.rows": {
-    "message": "Hilera"
-  },
-  "settings.display.project-list-layouts.modpack": {
-    "message": "Pahina ng mga modpack"
-  },
-  "settings.display.project-list-layouts.plugin": {
-    "message": "Pahina ng mga plugin"
-  },
-  "settings.display.project-list-layouts.resourcepack": {
-    "message": "Pahina ng mga resource pack"
-  },
-  "settings.display.project-list-layouts.server": {
-    "message": "Pahina ng mga server"
-  },
-  "settings.display.project-list-layouts.shader": {
-    "message": "Pahina ng mga shader"
-  },
-  "settings.display.project-list-layouts.title": {
-    "message": "Mga ayos ng listahan ng proyekto"
-  },
-  "settings.display.project-list-layouts.user": {
-    "message": "Mga profile page ng tagagamit"
-  },
-  "settings.display.project-list.layouts.collection": {
-    "message": "Koleksiyon"
-  },
-  "settings.display.sidebar.advanced-rendering.description": {
-    "message": "Patatakbuhin ang masalimuot na pagrerender o advanced rendering katulad ng paglalabo na maaaring sumanhi ng isyu sa performance sa mga walang hardware-accelerated rendering."
-  },
-  "settings.display.sidebar.advanced-rendering.title": {
-    "message": "Masalimuot na pagrerender"
-  },
-  "settings.display.sidebar.external-links-new-tab.description": {
-    "message": "Gawin na magbukas ng bagong tab ang mga link na papunta sa labas ng Modrinth. Kahit na sa setting na ito, ang mga link sa magkatulad na domain at nasa paglalarawang Markdown ay bubukas sa iisang tab, at ang mga link sa ads at edit page ay magbubukas sa bagong tab."
-  },
-  "settings.display.sidebar.external-links-new-tab.title": {
-    "message": "Buksan ang link palabas sa bagong tab"
-  },
-  "settings.display.sidebar.hide-app-promos.description": {
-    "message": "Itatago ang \"Kunin ang Modrinth App\" na mga pindutan sa pangunahing navigation. Ang pahina ng Modrinth App ay maaari pa ring mahanap sa landing page o kaya sa footer."
-  },
-  "settings.display.sidebar.hide-app-promos.title": {
-    "message": "Itago ang mga promosyong Modrinth App"
-  },
-  "settings.display.sidebar.left-aligned-content-sidebar.title": {
-    "message": "Pinakaliwang sidebar sa mga pahinang kontento"
-  },
-  "settings.display.sidebar.right-aligned-content-sidebar.description": {
-    "message": "Aayusin sa kaliwa ng sidebar sa kontento ng pahina."
-  },
-  "settings.display.sidebar.right-aligned-filters-sidebar.description": {
-    "message": "Isasaayos ang mga pansala sa kanan ng resulta ng paghanap."
-  },
-  "settings.display.sidebar.right-aligned-filters-sidebar.title": {
-    "message": "Pinakanang sidebar ng pansala sa pahina ng paghanap"
-  },
-  "settings.display.theme.description": {
-    "message": "Pumili ng iyong gugustohing paksang kulay para sa Modrinth ng nitong device."
-  },
-  "settings.display.theme.title": {
-    "message": "Paksang kulay"
-  },
   "settings.head-title": {
     "message": "Settings ng display"
   },
diff --git a/apps/frontend/src/locales/fr-FR/index.json b/apps/frontend/src/locales/fr-FR/index.json
index f899e09e60..8856a70832 100644
--- a/apps/frontend/src/locales/fr-FR/index.json
+++ b/apps/frontend/src/locales/fr-FR/index.json
@@ -5012,96 +5012,12 @@
   "settings.display.banner.developer-mode.description": {
     "message": "<strong>Le mode développeur</strong> est activé. Cela vous permettra de voir les ID internes de diverses choses dans Modrinth qui peuvent être utiles si vous êtes un développeur utilisant l'API de Modrinth. Cliquez 5 fois sur le logo Modrinth en bas de la page pour désactiver le mode développeur."
   },
-  "settings.display.flags.description": {
-    "message": "Activer ou désactiver certaines fonctionnalités sur cet appareil."
-  },
-  "settings.display.flags.title": {
-    "message": "Activer/désactiver les fonctionnalités"
-  },
   "settings.display.notification.developer-mode-deactivated.text": {
     "message": "Le mode développeur a été désactivé"
   },
   "settings.display.notification.developer-mode-deactivated.title": {
     "message": "Mode développeur désactivé"
   },
-  "settings.display.project-list-layouts.datapack": {
-    "message": "Page des data packs"
-  },
-  "settings.display.project-list-layouts.description": {
-    "message": "Sélectionnez votre mise en page préférée pour chaque page qui affiche les listes de projets sur cet appareil."
-  },
-  "settings.display.project-list-layouts.mod": {
-    "message": "Page des mods"
-  },
-  "settings.display.project-list-layouts.mode.gallery": {
-    "message": "Galerie"
-  },
-  "settings.display.project-list-layouts.mode.grid": {
-    "message": "Grille"
-  },
-  "settings.display.project-list-layouts.mode.rows": {
-    "message": "Lignes"
-  },
-  "settings.display.project-list-layouts.modpack": {
-    "message": "Page des modpacks"
-  },
-  "settings.display.project-list-layouts.plugin": {
-    "message": "Page des plugins"
-  },
-  "settings.display.project-list-layouts.resourcepack": {
-    "message": "Page des packs de ressources"
-  },
-  "settings.display.project-list-layouts.server": {
-    "message": "Page des serveurs"
-  },
-  "settings.display.project-list-layouts.shader": {
-    "message": "Page des shaders"
-  },
-  "settings.display.project-list-layouts.title": {
-    "message": "Mises en pages de la liste de projet"
-  },
-  "settings.display.project-list-layouts.user": {
-    "message": "Pages de profil utilisateur"
-  },
-  "settings.display.project-list.layouts.collection": {
-    "message": "Collection"
-  },
-  "settings.display.sidebar.advanced-rendering.description": {
-    "message": "Permet un rendu avancé tel que les effets de flou qui pourrait causer des problèmes de performance si le rendu n'est pas accéléré par le matériel."
-  },
-  "settings.display.sidebar.advanced-rendering.title": {
-    "message": "Rendu avancé"
-  },
-  "settings.display.sidebar.external-links-new-tab.description": {
-    "message": "Les liens qui vont en dehors de Modrinth s'ouvrent dans un nouvel onglet. Peu importe ce paramètre, les liens sur le même domaine et dans les descriptions Markdown s'ouvriront dans le même onglet, et les liens sur les publicités et les pages d'édition s'ouvriront dans un nouvel onglet."
-  },
-  "settings.display.sidebar.external-links-new-tab.title": {
-    "message": "Ouvre les liens externes dans un nouvel onglet"
-  },
-  "settings.display.sidebar.hide-app-promos.description": {
-    "message": "Cache les boutons « Obtenir Modrinth App » de la navigation principale. La page de Modrinth App peut toujours être trouvée sur la page d'accueil ou dans le pied de page."
-  },
-  "settings.display.sidebar.hide-app-promos.title": {
-    "message": "Cache les publicités de Modrinth App"
-  },
-  "settings.display.sidebar.left-aligned-content-sidebar.title": {
-    "message": "Barre latérale alignée à gauche sur les pages de contenus"
-  },
-  "settings.display.sidebar.right-aligned-content-sidebar.description": {
-    "message": "Aligne la barre latérale à gauche du contenu de la page."
-  },
-  "settings.display.sidebar.right-aligned-filters-sidebar.description": {
-    "message": "Aligne les filtres de la barre latérale à droite des résultats de recherche."
-  },
-  "settings.display.sidebar.right-aligned-filters-sidebar.title": {
-    "message": "Filtres de la barre latérale alignés à droite sur les pages de recherche"
-  },
-  "settings.display.theme.description": {
-    "message": "Sélectionnez votre thème de couleur préféré pour Modrinth sur cet appareil."
-  },
-  "settings.display.theme.title": {
-    "message": "Thème de couleur"
-  },
   "settings.head-title": {
     "message": "Paramètres d’affichage"
   },
diff --git a/apps/frontend/src/locales/hu-HU/index.json b/apps/frontend/src/locales/hu-HU/index.json
index 610b7b4281..49b6081b9f 100644
--- a/apps/frontend/src/locales/hu-HU/index.json
+++ b/apps/frontend/src/locales/hu-HU/index.json
@@ -4670,96 +4670,12 @@
   "settings.display.banner.developer-mode.description": {
     "message": "A <strong>fejlesztői mód</strong> aktív. Ez lehetővé teszi, hogy megtekintsd a Modrinth különböző elemeinek belső azonosítóit, ami hasznos lehet, ha a Modrinth API-t használó fejlesztő vagy. Kattints 5-ször a lap alján található Modrinth logóra a fejlesztői mód bekapcsolásához."
   },
-  "settings.display.flags.description": {
-    "message": "Bizonyos funkciók engedélyezése vagy letiltása ezen az eszközön."
-  },
-  "settings.display.flags.title": {
-    "message": "Funkciók be-/kikapcsolása"
-  },
   "settings.display.notification.developer-mode-deactivated.text": {
     "message": "A fejlesztői mód le lett tiltva"
   },
   "settings.display.notification.developer-mode-deactivated.title": {
     "message": "Fejlesztői mód letiltva"
   },
-  "settings.display.project-list-layouts.datapack": {
-    "message": "Adatcsomagok oldal"
-  },
-  "settings.display.project-list-layouts.description": {
-    "message": "Válaszd ki a kívánt elrendezést minden olyan oldalhoz, amelyen a projektlisták megjelennek ezen az eszközön."
-  },
-  "settings.display.project-list-layouts.mod": {
-    "message": "Modok oldal"
-  },
-  "settings.display.project-list-layouts.mode.gallery": {
-    "message": "Képek"
-  },
-  "settings.display.project-list-layouts.mode.grid": {
-    "message": "Rács"
-  },
-  "settings.display.project-list-layouts.mode.rows": {
-    "message": "Lista"
-  },
-  "settings.display.project-list-layouts.modpack": {
-    "message": "Modcsomagok oldal"
-  },
-  "settings.display.project-list-layouts.plugin": {
-    "message": "Bővítmények oldal"
-  },
-  "settings.display.project-list-layouts.resourcepack": {
-    "message": "Forráscsomagok oldal"
-  },
-  "settings.display.project-list-layouts.server": {
-    "message": "Szerverek oldal"
-  },
-  "settings.display.project-list-layouts.shader": {
-    "message": "Shaderek oldal"
-  },
-  "settings.display.project-list-layouts.title": {
-    "message": "Projektlista elrendezések"
-  },
-  "settings.display.project-list-layouts.user": {
-    "message": "Profil oldalak"
-  },
-  "settings.display.project-list.layouts.collection": {
-    "message": "Gyűjtemény"
-  },
-  "settings.display.sidebar.advanced-rendering.description": {
-    "message": "Lehetővé teszi a összetett megjelenítést, például az elmosódási effektusokat, amelyek teljesítményproblémákat okozhatnak hardveres gyorsítás nélkül."
-  },
-  "settings.display.sidebar.advanced-rendering.title": {
-    "message": "Összetett renderelés"
-  },
-  "settings.display.sidebar.external-links-new-tab.description": {
-    "message": "A Modrinthon kívüli linkeket új lapon nyílnak meg. Ettől a beállítástól függetlenül az azonos domainen található linkek és a Markdown leírásokban szereplő linkek ugyanazon a lapon nyílnak meg, míg a hirdetésekben és a szerkesztési oldalakon található linkek új lapon nyílnak meg."
-  },
-  "settings.display.sidebar.external-links-new-tab.title": {
-    "message": "Külső linkek megnyitása új lapon"
-  },
-  "settings.display.sidebar.hide-app-promos.description": {
-    "message": "Elrejti a „Szerezd meg a Modrinth Appot” gombokat az elsődleges navigációból. A Modrinth App oldal továbbra is megtalálható a nyitóoldalon vagy a láblécben."
-  },
-  "settings.display.sidebar.hide-app-promos.title": {
-    "message": "Modrinth App promóciók elrejtése"
-  },
-  "settings.display.sidebar.left-aligned-content-sidebar.title": {
-    "message": "Balra igazított oldalsáv oldalakon"
-  },
-  "settings.display.sidebar.right-aligned-content-sidebar.description": {
-    "message": "A tartalom bal oldalára igazítja az oldalsávot."
-  },
-  "settings.display.sidebar.right-aligned-filters-sidebar.description": {
-    "message": "A keresési eredmények jobb oldalára igazítja a szűrőket."
-  },
-  "settings.display.sidebar.right-aligned-filters-sidebar.title": {
-    "message": "Jobbra igazított szűrők oldalakon"
-  },
-  "settings.display.theme.description": {
-    "message": "Válaszd ki a Modrinth számára a kívánt színsémát ezen az eszközön."
-  },
-  "settings.display.theme.title": {
-    "message": "Téma"
-  },
   "settings.head-title": {
     "message": "Megjelenési beállítások"
   },
diff --git a/apps/frontend/src/locales/id-ID/index.json b/apps/frontend/src/locales/id-ID/index.json
index 713df7d993..45830bf334 100644
--- a/apps/frontend/src/locales/id-ID/index.json
+++ b/apps/frontend/src/locales/id-ID/index.json
@@ -3038,81 +3038,6 @@
   "settings.display.banner.developer-mode.description": {
     "message": "<strong>Mode pengembang</strong> aktif. Ini akan memungkinkan Anda untuk melihat pengenal internal dari berbagai hal di seluruh Modrinth yang dapat berguna bila Anda adalah seorang pengembang yang menggunakan API Modrinth. Klik logo Modrinth di bagian bawah halaman lima kali untuk menghidupkan mode pengembang."
   },
-  "settings.display.flags.description": {
-    "message": "Hidupkan atau matikan fitur tertentu di perangkat ini."
-  },
-  "settings.display.flags.title": {
-    "message": "Hidup/Matikan fitur"
-  },
-  "settings.display.project-list-layouts.datapack": {
-    "message": "Halaman Paket Data"
-  },
-  "settings.display.project-list-layouts.description": {
-    "message": "Pilih tata letak pilihan Anda untuk setiap halaman yang menampilkan daftar proyek di perangkat ini."
-  },
-  "settings.display.project-list-layouts.mod": {
-    "message": "Halaman Mod"
-  },
-  "settings.display.project-list-layouts.modpack": {
-    "message": "Halaman Paket Mod"
-  },
-  "settings.display.project-list-layouts.plugin": {
-    "message": "Halaman Pasang-masuk (Plug-in)"
-  },
-  "settings.display.project-list-layouts.resourcepack": {
-    "message": "Halaman Paket Sumber"
-  },
-  "settings.display.project-list-layouts.server": {
-    "message": "Halaman Server"
-  },
-  "settings.display.project-list-layouts.shader": {
-    "message": "Halaman Efek Gambar"
-  },
-  "settings.display.project-list-layouts.title": {
-    "message": "Tata letak daftar proyek"
-  },
-  "settings.display.project-list-layouts.user": {
-    "message": "Halaman profil pengguna"
-  },
-  "settings.display.project-list.layouts.collection": {
-    "message": "Koleksi"
-  },
-  "settings.display.sidebar.advanced-rendering.description": {
-    "message": "Menghidupkan renderasi tingkat lanjut seperti efek buram yang dapat menyebabkan masalah kinerja tanpa renderasi yang dipercepat perangkat keras."
-  },
-  "settings.display.sidebar.advanced-rendering.title": {
-    "message": "Renderasi tingkat lanjut"
-  },
-  "settings.display.sidebar.external-links-new-tab.description": {
-    "message": "Tautan yang mengarahkan Anda ke luar Modrinth akan dibuka di tab baru. Terlepas dari pengaturan ini, tautan pada domain yang sama dan di keterangan berformat Markdown akan dibuka di tab yang sama, dan tautan pada iklan dan halaman penyuntingan akan dibuka di tab baru."
-  },
-  "settings.display.sidebar.external-links-new-tab.title": {
-    "message": "Buka tautan eksternal di tab baru"
-  },
-  "settings.display.sidebar.hide-app-promos.description": {
-    "message": "Sembunyikan tombol \"Dapatkan Modrinth App\" dari navigasi utama. Halaman Modrinth App masih dapat ditemukan di halaman landas atau di bagian bawah halaman."
-  },
-  "settings.display.sidebar.hide-app-promos.title": {
-    "message": "Sembunyikan promosi Aplikasi Modrinth"
-  },
-  "settings.display.sidebar.left-aligned-content-sidebar.title": {
-    "message": "Bilah sisi rata kiri pada halaman konten"
-  },
-  "settings.display.sidebar.right-aligned-content-sidebar.description": {
-    "message": "Meratakan bilah sisi ke sebelah kiri konten halaman."
-  },
-  "settings.display.sidebar.right-aligned-filters-sidebar.description": {
-    "message": "Meratakan bilah sisi penyaringan ke sebelah kanan hasil pencarian."
-  },
-  "settings.display.sidebar.right-aligned-filters-sidebar.title": {
-    "message": "Bilah sisi rata kanan pada halaman pencarian"
-  },
-  "settings.display.theme.description": {
-    "message": "Pilih tema warna pilihan Anda untuk Modrinth di perangkat ini."
-  },
-  "settings.display.theme.title": {
-    "message": "Tema warna"
-  },
   "settings.pats.action.create": {
     "message": "Buat PAT"
   },
diff --git a/apps/frontend/src/locales/it-IT/index.json b/apps/frontend/src/locales/it-IT/index.json
index 4527c1d38f..7f83b72ee6 100644
--- a/apps/frontend/src/locales/it-IT/index.json
+++ b/apps/frontend/src/locales/it-IT/index.json
@@ -4973,96 +4973,12 @@
   "settings.display.banner.developer-mode.description": {
     "message": "La <strong>modalità sviluppatore</strong> è attiva: ciò ti permetterà di visualizzare gli ID interni usati da Modrinth, che possono essere utili se sei uno sviluppatore che utilizza le nostre API. Clicca 5 volte sul logo di Modrinth nel piè per disattivarla."
   },
-  "settings.display.flags.description": {
-    "message": "Attiva o disattiva determinate funzionalità su questo dispositivo."
-  },
-  "settings.display.flags.title": {
-    "message": "Altre funzionalità"
-  },
   "settings.display.notification.developer-mode-deactivated.text": {
     "message": "La modalità sviluppatore è stata disabilitata"
   },
   "settings.display.notification.developer-mode-deactivated.title": {
     "message": "Modalità sviluppatore disattivata"
   },
-  "settings.display.project-list-layouts.datapack": {
-    "message": "Pagina dei pacchetti di dati"
-  },
-  "settings.display.project-list-layouts.description": {
-    "message": "Scegli come disporre gli elenchi su questo dispositivo."
-  },
-  "settings.display.project-list-layouts.mod": {
-    "message": "Pagina delle mod"
-  },
-  "settings.display.project-list-layouts.mode.gallery": {
-    "message": "Galleria"
-  },
-  "settings.display.project-list-layouts.mode.grid": {
-    "message": "Griglia"
-  },
-  "settings.display.project-list-layouts.mode.rows": {
-    "message": "Righe"
-  },
-  "settings.display.project-list-layouts.modpack": {
-    "message": "Pagina dei pacchetti di mod"
-  },
-  "settings.display.project-list-layouts.plugin": {
-    "message": "Pagina dei plugin"
-  },
-  "settings.display.project-list-layouts.resourcepack": {
-    "message": "Pagina dei pacchetti di risorse"
-  },
-  "settings.display.project-list-layouts.server": {
-    "message": "Pagina dei server"
-  },
-  "settings.display.project-list-layouts.shader": {
-    "message": "Pagina delle shader"
-  },
-  "settings.display.project-list-layouts.title": {
-    "message": "Disposizione delle liste"
-  },
-  "settings.display.project-list-layouts.user": {
-    "message": "Pagine dei profili utente"
-  },
-  "settings.display.project-list.layouts.collection": {
-    "message": "Raccolta"
-  },
-  "settings.display.sidebar.advanced-rendering.description": {
-    "message": "Abilita alcuni effetti come la sfocatura, ma può causare problemi di prestazioni senza accelerazione hardware."
-  },
-  "settings.display.sidebar.advanced-rendering.title": {
-    "message": "Rendering avanzato"
-  },
-  "settings.display.sidebar.external-links-new-tab.description": {
-    "message": "I link esterni a Modrinth si apriranno in una nuova scheda. A prescindere da questa impostazione, i link nello stesso dominio e nelle descrizioni Markdown si apriranno nella stessa scheda, e le pubblicità e le pagine di modifica in una nuova."
-  },
-  "settings.display.sidebar.external-links-new-tab.title": {
-    "message": "Apri link esterni in una nuova scheda"
-  },
-  "settings.display.sidebar.hide-app-promos.description": {
-    "message": "I pulsanti \"Scarica Modrinth App\" saranno nascosti dalla navigazione primaria. La pagina di Modrinth App rimarrà comunque raggiungibile nella home o nel piè."
-  },
-  "settings.display.sidebar.hide-app-promos.title": {
-    "message": "Nascondi promozioni per Modrinth App"
-  },
-  "settings.display.sidebar.left-aligned-content-sidebar.title": {
-    "message": "Allineamento opposto della barra laterale"
-  },
-  "settings.display.sidebar.right-aligned-content-sidebar.description": {
-    "message": "Allinea la barra laterale a sinistra del contenuto della pagina."
-  },
-  "settings.display.sidebar.right-aligned-filters-sidebar.description": {
-    "message": "Allinea la barra dei filtri a destra dei risultati di ricerca."
-  },
-  "settings.display.sidebar.right-aligned-filters-sidebar.title": {
-    "message": "Allineamento opposto della barra dei filtri"
-  },
-  "settings.display.theme.description": {
-    "message": "Scegli il tema che Modrinth userà su questo dispositivo."
-  },
-  "settings.display.theme.title": {
-    "message": "Tema"
-  },
   "settings.head-title": {
     "message": "Impostazioni di visualizzazione"
   },
diff --git a/apps/frontend/src/locales/ja-JP/index.json b/apps/frontend/src/locales/ja-JP/index.json
index 77ae1bc677..636c63653a 100644
--- a/apps/frontend/src/locales/ja-JP/index.json
+++ b/apps/frontend/src/locales/ja-JP/index.json
@@ -3959,96 +3959,12 @@
   "settings.display.banner.developer-mode.description": {
     "message": "<strong>開発者モード</strong> が有効です。これにより、Modrinth全体の様々な内部IDを表示することができ、Modrinth APIを使用する開発に役立ちます。ページの下部にあるModrinthロゴを5回クリックすると、開発者モードが切り替わります。"
   },
-  "settings.display.flags.description": {
-    "message": "このデバイスで特定の機能を有効または無効にします。"
-  },
-  "settings.display.flags.title": {
-    "message": "機能の切り替え"
-  },
   "settings.display.notification.developer-mode-deactivated.text": {
     "message": "開発者モードが無効になりました"
   },
   "settings.display.notification.developer-mode-deactivated.title": {
     "message": "開発者モード無効"
   },
-  "settings.display.project-list-layouts.datapack": {
-    "message": "データパックページ"
-  },
-  "settings.display.project-list-layouts.description": {
-    "message": "このデバイスでプロジェクト一覧を表示する各ページのレイアウトをお選びください。"
-  },
-  "settings.display.project-list-layouts.mod": {
-    "message": "Modページ"
-  },
-  "settings.display.project-list-layouts.mode.gallery": {
-    "message": "ギャラリー"
-  },
-  "settings.display.project-list-layouts.mode.grid": {
-    "message": "グリッド表示"
-  },
-  "settings.display.project-list-layouts.mode.rows": {
-    "message": "行表示"
-  },
-  "settings.display.project-list-layouts.modpack": {
-    "message": "Modパックページ"
-  },
-  "settings.display.project-list-layouts.plugin": {
-    "message": "プラグインページ"
-  },
-  "settings.display.project-list-layouts.resourcepack": {
-    "message": "リソースパックページ"
-  },
-  "settings.display.project-list-layouts.server": {
-    "message": "サーバーページ"
-  },
-  "settings.display.project-list-layouts.shader": {
-    "message": "シェーダーページ"
-  },
-  "settings.display.project-list-layouts.title": {
-    "message": "プロジェクト一覧のレイアウト"
-  },
-  "settings.display.project-list-layouts.user": {
-    "message": "ユーザープロフィールページ"
-  },
-  "settings.display.project-list.layouts.collection": {
-    "message": "コレクション"
-  },
-  "settings.display.sidebar.advanced-rendering.description": {
-    "message": "ぼかし効果などの高度なレンダリングを有効にします。グラフィックアクセラレーションが使用できない場合は、パフォーマンスが低下する可能性があります。"
-  },
-  "settings.display.sidebar.advanced-rendering.title": {
-    "message": "高度なレンダリング"
-  },
-  "settings.display.sidebar.external-links-new-tab.description": {
-    "message": "Modrinth外のリンクを新しいタブで開くように設定します。この設定にかかわらず、同一ドメイン上のリンクとMarkdownの概要欄のリンクは同じタブで開かれ、広告ページと編集ページ上のリンクは新しいタブで開かれます。"
-  },
-  "settings.display.sidebar.external-links-new-tab.title": {
-    "message": "外部リンクを新しいタブで開く"
-  },
-  "settings.display.sidebar.hide-app-promos.description": {
-    "message": "「Modrinth Appを入手」ボタンをプライマリナビゲーションから非表示にします。Modrinth Appのページは、ランディングページまたはフッターに表示されます。"
-  },
-  "settings.display.sidebar.hide-app-promos.title": {
-    "message": "Modrinth Appのプロモーションを非表示"
-  },
-  "settings.display.sidebar.left-aligned-content-sidebar.title": {
-    "message": "コンテンツの左寄せサイドバー"
-  },
-  "settings.display.sidebar.right-aligned-content-sidebar.description": {
-    "message": "コンテンツのサイドバーをページの左側に揃えます。"
-  },
-  "settings.display.sidebar.right-aligned-filters-sidebar.description": {
-    "message": "検索フィルターのサイドバーを検索結果の右側に揃えます。"
-  },
-  "settings.display.sidebar.right-aligned-filters-sidebar.title": {
-    "message": "検索フィルターの右寄せサイドバー"
-  },
-  "settings.display.theme.description": {
-    "message": "このデバイスでのお好みのテーマを選択してください。"
-  },
-  "settings.display.theme.title": {
-    "message": "テーマ"
-  },
   "settings.head-title": {
     "message": "表示設定"
   },
diff --git a/apps/frontend/src/locales/ko-KR/index.json b/apps/frontend/src/locales/ko-KR/index.json
index 2003568626..31e286a09a 100644
--- a/apps/frontend/src/locales/ko-KR/index.json
+++ b/apps/frontend/src/locales/ko-KR/index.json
@@ -4991,96 +4991,12 @@
   "settings.display.banner.developer-mode.description": {
     "message": "<strong>개발자 모드</strong>가 활성화되어 있습니다. 이를 통해 Modrinth API를 사용하는 개발자인 경우 도움이 될 수 있는 Modrinth 전체의 여러 내부 ID를 확인할 수 있습니다. 페이지 하단의 Modrinth 로고를 5번 클릭하여 개발자 모드를 전환합니다."
   },
-  "settings.display.flags.description": {
-    "message": "이 장치에서 특정 기능을 사용하거나 사용하지 않도록 설정합니다."
-  },
-  "settings.display.flags.title": {
-    "message": "기능 전환"
-  },
   "settings.display.notification.developer-mode-deactivated.text": {
     "message": "개발자 모드가 비활성화 되었습니다"
   },
   "settings.display.notification.developer-mode-deactivated.title": {
     "message": "개발자 모드 비활성화됨"
   },
-  "settings.display.project-list-layouts.datapack": {
-    "message": "데이터 팩 페이지"
-  },
-  "settings.display.project-list-layouts.description": {
-    "message": "이 장치에서 프로젝트 목록을 표시하는 각 페이지에 대해 원하는 레이아웃을 선택합니다."
-  },
-  "settings.display.project-list-layouts.mod": {
-    "message": "모드 페이지"
-  },
-  "settings.display.project-list-layouts.mode.gallery": {
-    "message": "갤러리"
-  },
-  "settings.display.project-list-layouts.mode.grid": {
-    "message": "그리드"
-  },
-  "settings.display.project-list-layouts.mode.rows": {
-    "message": "행"
-  },
-  "settings.display.project-list-layouts.modpack": {
-    "message": "모드팩 페이지"
-  },
-  "settings.display.project-list-layouts.plugin": {
-    "message": "플러그인 페이지"
-  },
-  "settings.display.project-list-layouts.resourcepack": {
-    "message": "리소스 팩 페이지"
-  },
-  "settings.display.project-list-layouts.server": {
-    "message": "서버 페이지"
-  },
-  "settings.display.project-list-layouts.shader": {
-    "message": "셰이더 페이지"
-  },
-  "settings.display.project-list-layouts.title": {
-    "message": "프로젝트 목록 레이아웃"
-  },
-  "settings.display.project-list-layouts.user": {
-    "message": "사용자 프로필 페이지"
-  },
-  "settings.display.project-list.layouts.collection": {
-    "message": "컬렉션"
-  },
-  "settings.display.sidebar.advanced-rendering.description": {
-    "message": "하드웨어 가속 렌더링이 없으면 성능 문제를 일으킬 수 있는 고급 렌더링을 활성화합니다."
-  },
-  "settings.display.sidebar.advanced-rendering.title": {
-    "message": "고급 렌더링"
-  },
-  "settings.display.sidebar.external-links-new-tab.description": {
-    "message": "Modrinth 외부로 나가는 링크를 새 탭에서 엽니다. 이 설정에 상관없이 동일한 도메인과 마크다운 설명의 링크가 같은 탭에서 열리고 광고 및 편집 페이지의 링크가 새 탭에서 열립니다."
-  },
-  "settings.display.sidebar.external-links-new-tab.title": {
-    "message": "새 탭에서 외부 링크 열기"
-  },
-  "settings.display.sidebar.hide-app-promos.description": {
-    "message": "기본 네비게이선에서 \"Modrinth App 받기\" 버튼을 숨깁니다. Modrinth App 페이지는 여전히 시작 페이지 또는 하단에서 찾을 수 있습니다."
-  },
-  "settings.display.sidebar.hide-app-promos.title": {
-    "message": "Modrinth 앱 프로모션 숨기기"
-  },
-  "settings.display.sidebar.left-aligned-content-sidebar.title": {
-    "message": "콘텐츠 페이지에서 사이드바를 왼쪽으로 정렬"
-  },
-  "settings.display.sidebar.right-aligned-content-sidebar.description": {
-    "message": "사이드바를 페이지 콘텐츠의 왼쪽에 정렬합니다."
-  },
-  "settings.display.sidebar.right-aligned-filters-sidebar.description": {
-    "message": "필터 사이드바를 검색 결과 페이지의 오른쪽에 정렬합니다."
-  },
-  "settings.display.sidebar.right-aligned-filters-sidebar.title": {
-    "message": "검색 페이지에서 필터 사이드바를 오른쪽으로 정렬"
-  },
-  "settings.display.theme.description": {
-    "message": "이 디바이스에서 선호하는 Modrinth 의 색상 테마를 선택합니다."
-  },
-  "settings.display.theme.title": {
-    "message": "색상 테마"
-  },
   "settings.head-title": {
     "message": "디스플레이 설정"
   },
diff --git a/apps/frontend/src/locales/ms-MY/index.json b/apps/frontend/src/locales/ms-MY/index.json
index 039573236d..d04525a217 100644
--- a/apps/frontend/src/locales/ms-MY/index.json
+++ b/apps/frontend/src/locales/ms-MY/index.json
@@ -3965,96 +3965,12 @@
   "settings.display.banner.developer-mode.description": {
     "message": "<strong>Mod pembangun</strong> kini aktif. Ini akan membolehkan anda melihat ID dalaman pelbagai perkara di seluruh Modrinth yang mungkin berguna jika anda seorang pembangun yang menggunakan API Modrinth. Klik pada logo Modrinth di bahagian bawah laman sebanyak 5 kali untuk menogol mod pembangun."
   },
-  "settings.display.flags.description": {
-    "message": "Dayakan atau nyahdayakan ciri tertentu pada peranti ini."
-  },
-  "settings.display.flags.title": {
-    "message": "Togol ciri-ciri"
-  },
   "settings.display.notification.developer-mode-deactivated.text": {
     "message": "Mod pembangun telah dinyahdayakan"
   },
   "settings.display.notification.developer-mode-deactivated.title": {
     "message": "Mod pembangun dinyahaktifkan"
   },
-  "settings.display.project-list-layouts.datapack": {
-    "message": "Laman Pek Data"
-  },
-  "settings.display.project-list-layouts.description": {
-    "message": "Pilih susun atur pilihan anda untuk setiap laman yang memaparkan senarai projek pada peranti ini."
-  },
-  "settings.display.project-list-layouts.mod": {
-    "message": "Laman Mod"
-  },
-  "settings.display.project-list-layouts.mode.gallery": {
-    "message": "Galeri"
-  },
-  "settings.display.project-list-layouts.mode.grid": {
-    "message": "Grid"
-  },
-  "settings.display.project-list-layouts.mode.rows": {
-    "message": "Barisan"
-  },
-  "settings.display.project-list-layouts.modpack": {
-    "message": "Laman Pek Mod"
-  },
-  "settings.display.project-list-layouts.plugin": {
-    "message": "Laman Pemalam"
-  },
-  "settings.display.project-list-layouts.resourcepack": {
-    "message": "Laman Pek Sumber"
-  },
-  "settings.display.project-list-layouts.server": {
-    "message": "Laman Pelayan"
-  },
-  "settings.display.project-list-layouts.shader": {
-    "message": "Laman Pembayang"
-  },
-  "settings.display.project-list-layouts.title": {
-    "message": "Susun atur senarai projek"
-  },
-  "settings.display.project-list-layouts.user": {
-    "message": "Laman profil pengguna"
-  },
-  "settings.display.project-list.layouts.collection": {
-    "message": "Koleksi"
-  },
-  "settings.display.sidebar.advanced-rendering.description": {
-    "message": "Mendayakan pemaparan lanjutan seperti kesan kabur yang boleh menyebabkan masalah prestasi tanpa pemaparan dipercepatkan perkakasan."
-  },
-  "settings.display.sidebar.advanced-rendering.title": {
-    "message": "Pemaparan lanjutan"
-  },
-  "settings.display.sidebar.external-links-new-tab.description": {
-    "message": "Buka pautan yang membawa anda ke luar Modrinth dalam tab baharu. Tidak kira tetapan ini, pautan pada domain yang sama dan dalam keterangan berformat Markdown akan dibuka dalam tab yang sama dan pautan pada iklan dan laman sunting akan dibuka dalam tab baharu."
-  },
-  "settings.display.sidebar.external-links-new-tab.title": {
-    "message": "Buka pautan luaran dalam tab baharu"
-  },
-  "settings.display.sidebar.hide-app-promos.description": {
-    "message": "Menyembunyikan butang \"Dapatkan Modrinth App\" daripada navigasi utama. Laman Modrinth App masih boleh dijumpai pada halaman pendaratan atau dalam pengaki."
-  },
-  "settings.display.sidebar.hide-app-promos.title": {
-    "message": "Sembunyikan promosi Modrinth App"
-  },
-  "settings.display.sidebar.left-aligned-content-sidebar.title": {
-    "message": "Bar sisi carian dijajar kiri pada laman kandungan"
-  },
-  "settings.display.sidebar.right-aligned-content-sidebar.description": {
-    "message": "Menjajarkan bar sisi butiran projek ke sebelah kiri kandungan laman."
-  },
-  "settings.display.sidebar.right-aligned-filters-sidebar.description": {
-    "message": "Menjajarkan bar sisi penapis ke sebelah kanan hasil carian."
-  },
-  "settings.display.sidebar.right-aligned-filters-sidebar.title": {
-    "message": "Bar sisi penapis dijajar kanan pada laman carian"
-  },
-  "settings.display.theme.description": {
-    "message": "Pilih tema warna pilihan anda untuk Modrinth pada peranti ini."
-  },
-  "settings.display.theme.title": {
-    "message": "Tema warna"
-  },
   "settings.head-title": {
     "message": "Tetapan paparan"
   },
diff --git a/apps/frontend/src/locales/nl-NL/index.json b/apps/frontend/src/locales/nl-NL/index.json
index 809bc4dfae..241bd3ca00 100644
--- a/apps/frontend/src/locales/nl-NL/index.json
+++ b/apps/frontend/src/locales/nl-NL/index.json
@@ -4994,96 +4994,12 @@
   "settings.display.banner.developer-mode.description": {
     "message": "<strong>Ontwikkelaarsmodus</strong> is ingeschakeld. Hiermee kun je de interne ID's bekijken van verschillende elementen in Modrinth, wat handig kan zijn als je als ontwikkelaar gebruikmaakt van de Modrinth-API. Klik vijf keer op het Modrinth-logo onderaan de pagina om de ontwikkelaarsmodus in of uit te schakelen."
   },
-  "settings.display.flags.description": {
-    "message": "Schakel bepaalde functies op dit apparaat in of uit."
-  },
-  "settings.display.flags.title": {
-    "message": "Functies in en uitschakelen"
-  },
   "settings.display.notification.developer-mode-deactivated.text": {
     "message": "De ontwikkelaarsmodus is uitgeschakeld"
   },
   "settings.display.notification.developer-mode-deactivated.title": {
     "message": "Ontwikkelaarsmodus uitgeschakeld"
   },
-  "settings.display.project-list-layouts.datapack": {
-    "message": "Data Packs pagina"
-  },
-  "settings.display.project-list-layouts.description": {
-    "message": "Kies de gewenste lay-out voor elke pagina waarop projectlijsten op dit apparaat worden weergegeven."
-  },
-  "settings.display.project-list-layouts.mod": {
-    "message": "Mods pagina"
-  },
-  "settings.display.project-list-layouts.mode.gallery": {
-    "message": "Gallerij"
-  },
-  "settings.display.project-list-layouts.mode.grid": {
-    "message": "Raster"
-  },
-  "settings.display.project-list-layouts.mode.rows": {
-    "message": "Rijen"
-  },
-  "settings.display.project-list-layouts.modpack": {
-    "message": "Modpacks pagina"
-  },
-  "settings.display.project-list-layouts.plugin": {
-    "message": "Plugins pagina"
-  },
-  "settings.display.project-list-layouts.resourcepack": {
-    "message": "Resource Packs pagina"
-  },
-  "settings.display.project-list-layouts.server": {
-    "message": "Servers pagina"
-  },
-  "settings.display.project-list-layouts.shader": {
-    "message": "Shaders pagina"
-  },
-  "settings.display.project-list-layouts.title": {
-    "message": "Indelingen van projectlijsten"
-  },
-  "settings.display.project-list-layouts.user": {
-    "message": "Profielpagina's voor gebruikers"
-  },
-  "settings.display.project-list.layouts.collection": {
-    "message": "Collectie"
-  },
-  "settings.display.sidebar.advanced-rendering.description": {
-    "message": "Schakelt geavanceerde rendering in zoals vervaging effecten die prestatieproblemen kunnen veroorzaken zonder hardware-acceleratie."
-  },
-  "settings.display.sidebar.advanced-rendering.title": {
-    "message": "Geavanceerde weergave"
-  },
-  "settings.display.sidebar.external-links-new-tab.description": {
-    "message": "Maak links die buiten Modrinth gaan open in een nieuw tabblad. Ongeacht deze instelling, links op hetzelfde domein en in Markdown beschrijvingen zullen worden geopend in hetzelfde tabblad, en links naar advertenties en bewerken pagina's worden geopend in een nieuw tabblad."
-  },
-  "settings.display.sidebar.external-links-new-tab.title": {
-    "message": "Externe links openen in nieuw tabblad"
-  },
-  "settings.display.sidebar.hide-app-promos.description": {
-    "message": "Verbergt de \"Modrinth-app downloaden\" knoppen in de hoofdnavigatie. De Modrinth App-pagina is nog steeds te vinden op de startpagina of in de voettekst."
-  },
-  "settings.display.sidebar.hide-app-promos.title": {
-    "message": "Promoties voor de Modrinth-app verbergen"
-  },
-  "settings.display.sidebar.left-aligned-content-sidebar.title": {
-    "message": "Links uitgelijnde zijbalk voor inhoudspagina's"
-  },
-  "settings.display.sidebar.right-aligned-content-sidebar.description": {
-    "message": "Lijn de project-details zijbalk uit naar de rechterkant van de paginainhoud."
-  },
-  "settings.display.sidebar.right-aligned-filters-sidebar.description": {
-    "message": "Lijn de zoekfilters zijbalk uit aan de rechterkant van de zoekresultaten."
-  },
-  "settings.display.sidebar.right-aligned-filters-sidebar.title": {
-    "message": "Rechts uitgelijnde zijbalk voor zoek pagina's"
-  },
-  "settings.display.theme.description": {
-    "message": "Kies het kleurenthema dat je het mooist vindt voor Modrinth op dit apparaat."
-  },
-  "settings.display.theme.title": {
-    "message": "Kleurschema"
-  },
   "settings.head-title": {
     "message": "Weergave instellingen"
   },
diff --git a/apps/frontend/src/locales/no-NO/index.json b/apps/frontend/src/locales/no-NO/index.json
index 891482ea97..3758300d1d 100644
--- a/apps/frontend/src/locales/no-NO/index.json
+++ b/apps/frontend/src/locales/no-NO/index.json
@@ -3809,96 +3809,12 @@
   "settings.display.banner.developer-mode.description": {
     "message": "<strong>Utviklermodus</strong> er aktivert. Dette gjør at du kan se på de internet ID-ene av forskjellige ting inni Modrinth som kan være hjelpsomme hvis du er en utvikler som bruker Modrinth-API-en. Klikk på Modrinth-logoen i botnen av sida 5 ganger for å skru på utviklermodus."
   },
-  "settings.display.flags.description": {
-    "message": "Skru av eller på visse funksjoner på denne enheta."
-  },
-  "settings.display.flags.title": {
-    "message": "Skru av/på funksjoner"
-  },
   "settings.display.notification.developer-mode-deactivated.text": {
     "message": "Utviklermodus har blitt skrudd av"
   },
   "settings.display.notification.developer-mode-deactivated.title": {
     "message": "Utviklermodus skrudd av"
   },
-  "settings.display.project-list-layouts.datapack": {
-    "message": "Datapakkerside"
-  },
-  "settings.display.project-list-layouts.description": {
-    "message": "Velg det foretrukne oppsettet ditt for hver side som viser prosjektlister på denne enheta."
-  },
-  "settings.display.project-list-layouts.mod": {
-    "message": "Modssida"
-  },
-  "settings.display.project-list-layouts.mode.gallery": {
-    "message": "Galleri"
-  },
-  "settings.display.project-list-layouts.mode.grid": {
-    "message": "Rutenett"
-  },
-  "settings.display.project-list-layouts.mode.rows": {
-    "message": "Rader"
-  },
-  "settings.display.project-list-layouts.modpack": {
-    "message": "Modpakkesida"
-  },
-  "settings.display.project-list-layouts.plugin": {
-    "message": "Pluginssida"
-  },
-  "settings.display.project-list-layouts.resourcepack": {
-    "message": "Ressurspakkesida"
-  },
-  "settings.display.project-list-layouts.server": {
-    "message": "Serversider"
-  },
-  "settings.display.project-list-layouts.shader": {
-    "message": "Shadersida"
-  },
-  "settings.display.project-list-layouts.title": {
-    "message": "Prosjektlisteoppsett"
-  },
-  "settings.display.project-list-layouts.user": {
-    "message": "Brukerprofilsider"
-  },
-  "settings.display.project-list.layouts.collection": {
-    "message": "Samling"
-  },
-  "settings.display.sidebar.advanced-rendering.description": {
-    "message": "Skrur på avansert gjengivelse, sånn som uskarphetseffektet, som kan skape problem med ytelsen uten maskinvareakselerert gjengivelse."
-  },
-  "settings.display.sidebar.advanced-rendering.title": {
-    "message": "Avansert gjengivelse"
-  },
-  "settings.display.sidebar.external-links-new-tab.description": {
-    "message": "Lag lenker som åpner seg utafor Modrinth gå i ei ny fane. Uansett hva innstillinga er satt på, så kommer lenker som er på samme domene og i samme nedmarkeringsbeskrivelsen til å åpne seg i samme fana, og lenker om reklame og redigeringssider kommer til å åpne seg i ei ny fane."
-  },
-  "settings.display.sidebar.external-links-new-tab.title": {
-    "message": "Åpne eksterne lenker i ei ny fane"
-  },
-  "settings.display.sidebar.hide-app-promos.description": {
-    "message": "Gjømmer \"Skaff deg Modrinth App\"-knappene fra primærnavigatoren. Du kan fortsatt finne Modrinth App-sida i landingsside eller i footer-en."
-  },
-  "settings.display.sidebar.hide-app-promos.title": {
-    "message": "Gjøm Modrinth App-reklamekampanjer"
-  },
-  "settings.display.sidebar.left-aligned-content-sidebar.title": {
-    "message": "Venstre-stilt sidefelt på innholdssidene"
-  },
-  "settings.display.sidebar.right-aligned-content-sidebar.description": {
-    "message": "Stiller sidefeltet til venstre av sideinnholdet."
-  },
-  "settings.display.sidebar.right-aligned-filters-sidebar.description": {
-    "message": "Stiller sidebarsfilter til venstre av søkeresultata."
-  },
-  "settings.display.sidebar.right-aligned-filters-sidebar.title": {
-    "message": "Høgre-stilte sidebarfilter på søkesidene"
-  },
-  "settings.display.theme.description": {
-    "message": "Velg den spesifiserte fargetemaet ditt for Modrinth på denne enheta."
-  },
-  "settings.display.theme.title": {
-    "message": "Fargetema"
-  },
   "settings.head-title": {
     "message": "Skjerminnstillinger"
   },
diff --git a/apps/frontend/src/locales/pl-PL/index.json b/apps/frontend/src/locales/pl-PL/index.json
index 2de5f9d998..488e5d12fe 100644
--- a/apps/frontend/src/locales/pl-PL/index.json
+++ b/apps/frontend/src/locales/pl-PL/index.json
@@ -4922,96 +4922,12 @@
   "settings.display.banner.developer-mode.description": {
     "message": "<strong>Tryb dewelopera</strong> jest aktywny. To umożliwia wyświetlać wewnętrzne identyfikatory różnych rzeczy w Modrinth, które mogą być pomocne, jeśli jesteś deweloperem korzystającym z API Modrinth'a. Kliknij logo Modrinth na dole strony 5 razy, aby przełączać tryb dewelopera."
   },
-  "settings.display.flags.description": {
-    "message": "Włącz lub wyłącz określone funkcje na tym urządzeniu."
-  },
-  "settings.display.flags.title": {
-    "message": "Funkcje"
-  },
   "settings.display.notification.developer-mode-deactivated.text": {
     "message": "Tryb dewelopera został wyłączony"
   },
   "settings.display.notification.developer-mode-deactivated.title": {
     "message": "Wyłączono tryb dewelopera"
   },
-  "settings.display.project-list-layouts.datapack": {
-    "message": "Strona paczek danych"
-  },
-  "settings.display.project-list-layouts.description": {
-    "message": "Wybierz preferowany układ każdej strony, na której wyświetlane są listy projektów na tym urządzeniu."
-  },
-  "settings.display.project-list-layouts.mod": {
-    "message": "Strona modów"
-  },
-  "settings.display.project-list-layouts.mode.gallery": {
-    "message": "Galeria"
-  },
-  "settings.display.project-list-layouts.mode.grid": {
-    "message": "Siatka"
-  },
-  "settings.display.project-list-layouts.mode.rows": {
-    "message": "Rzędy"
-  },
-  "settings.display.project-list-layouts.modpack": {
-    "message": "Strona paczek modów"
-  },
-  "settings.display.project-list-layouts.plugin": {
-    "message": "Strona pluginów"
-  },
-  "settings.display.project-list-layouts.resourcepack": {
-    "message": "Strona paczek zasobów"
-  },
-  "settings.display.project-list-layouts.server": {
-    "message": "Strony serwerów"
-  },
-  "settings.display.project-list-layouts.shader": {
-    "message": "Strona shaderów"
-  },
-  "settings.display.project-list-layouts.title": {
-    "message": "Układy listy projektów"
-  },
-  "settings.display.project-list-layouts.user": {
-    "message": "Strony profilowe użytkowników"
-  },
-  "settings.display.project-list.layouts.collection": {
-    "message": "Kolekcja"
-  },
-  "settings.display.sidebar.advanced-rendering.description": {
-    "message": "Włącza zaawansowane renderowanie, takie jak efekty rozmycia, które może powodować problemy z wydajnością bez sprzętowej akceleracji renderowania."
-  },
-  "settings.display.sidebar.advanced-rendering.title": {
-    "message": "Zaawansowane renderowanie"
-  },
-  "settings.display.sidebar.external-links-new-tab.description": {
-    "message": "Spraw, aby linki prowadzące poza Modrinth otwierały się w nowej karcie. Niezależnie od tego ustawienia linki w tej samej domenie i w opisach Markdown będą otwierane w tej samej karcie, a linki w reklamach i edytowanych stronach będą otwierane w nowej karcie."
-  },
-  "settings.display.sidebar.external-links-new-tab.title": {
-    "message": "Otwieraj linki zewnętrzne w nowej karcie"
-  },
-  "settings.display.sidebar.hide-app-promos.description": {
-    "message": "Ukrywa przyciski \"Pobierz Modrinth App\" z głównych stron nawigacji. Strona aplikacji Modrinth nadal może być znaleziona na stronie lądowania lub w stopce."
-  },
-  "settings.display.sidebar.hide-app-promos.title": {
-    "message": "Ukryj reklamy Modrinth App"
-  },
-  "settings.display.sidebar.left-aligned-content-sidebar.title": {
-    "message": "Pasek boczny wyrównany do lewej strony na stronach z treścią"
-  },
-  "settings.display.sidebar.right-aligned-content-sidebar.description": {
-    "message": "Wyrównuje pasek boczny po lewej stronie treści strony."
-  },
-  "settings.display.sidebar.right-aligned-filters-sidebar.description": {
-    "message": "Przesuwa filtry na prawo od wyników wyszukiwania."
-  },
-  "settings.display.sidebar.right-aligned-filters-sidebar.title": {
-    "message": "Filtry po prawej na stronach wyszukiwania"
-  },
-  "settings.display.theme.description": {
-    "message": "Wybierz preferowany motyw dla Modrinth na tym urządzeniu."
-  },
-  "settings.display.theme.title": {
-    "message": "Motyw"
-  },
   "settings.head-title": {
     "message": "Ustawienia wyświetlania"
   },
diff --git a/apps/frontend/src/locales/pt-BR/index.json b/apps/frontend/src/locales/pt-BR/index.json
index 5b5aaf84e1..fede070ff5 100644
--- a/apps/frontend/src/locales/pt-BR/index.json
+++ b/apps/frontend/src/locales/pt-BR/index.json
@@ -5012,96 +5012,12 @@
   "settings.display.banner.developer-mode.description": {
     "message": "O <strong>modo desenvolvedor</strong> está ativado. Isto permite que você veja os IDs internos de várias coisas no Modrinth, que podem ser úteis se você for um desenvolvedor usando a API do Modrinth. Clique 5 vezes no logotipo do Modrinth na parte inferior da página para alternar o modo de desenvolvedor."
   },
-  "settings.display.flags.description": {
-    "message": "Ative ou desative certos recursos neste dispositivo."
-  },
-  "settings.display.flags.title": {
-    "message": "Alternar recursos"
-  },
   "settings.display.notification.developer-mode-deactivated.text": {
     "message": "O modo de desenvolvedor foi desativado"
   },
   "settings.display.notification.developer-mode-deactivated.title": {
     "message": "Modo de desenvolvedor desativado"
   },
-  "settings.display.project-list-layouts.datapack": {
-    "message": "Página dos pacotes de dados"
-  },
-  "settings.display.project-list-layouts.description": {
-    "message": "Selecione seu layout preferido para cada página que exibe listas de projetos neste dispositivo."
-  },
-  "settings.display.project-list-layouts.mod": {
-    "message": "Página dos mods"
-  },
-  "settings.display.project-list-layouts.mode.gallery": {
-    "message": "Galeria"
-  },
-  "settings.display.project-list-layouts.mode.grid": {
-    "message": "Grade"
-  },
-  "settings.display.project-list-layouts.mode.rows": {
-    "message": "Linhas"
-  },
-  "settings.display.project-list-layouts.modpack": {
-    "message": "Página dos pacotes de mods"
-  },
-  "settings.display.project-list-layouts.plugin": {
-    "message": "Página dos plugins"
-  },
-  "settings.display.project-list-layouts.resourcepack": {
-    "message": "Página dos pacotes de recursos"
-  },
-  "settings.display.project-list-layouts.server": {
-    "message": "Página dos servidores"
-  },
-  "settings.display.project-list-layouts.shader": {
-    "message": "Página dos sombreadores"
-  },
-  "settings.display.project-list-layouts.title": {
-    "message": "Exibição da lista de projetos"
-  },
-  "settings.display.project-list-layouts.user": {
-    "message": "Páginas de perfil do usuário"
-  },
-  "settings.display.project-list.layouts.collection": {
-    "message": "Coleção"
-  },
-  "settings.display.sidebar.advanced-rendering.description": {
-    "message": "Ativa a renderização avançada, como efeitos de desfoque que podem causar problemas de desempenho sem a renderização acelerada de hardware."
-  },
-  "settings.display.sidebar.advanced-rendering.title": {
-    "message": "Renderização avançada"
-  },
-  "settings.display.sidebar.external-links-new-tab.description": {
-    "message": "Faz com que os links que estão fora do Modrinth sejam abertos em uma nova aba. Independentemente dessa configuração, links no mesmo domínio e nas descrições do Markdown serão abertos na mesma aba, e links em anúncios e páginas de edição serão abertos em uma nova aba."
-  },
-  "settings.display.sidebar.external-links-new-tab.title": {
-    "message": "Abrir links externos em uma nova aba"
-  },
-  "settings.display.sidebar.hide-app-promos.description": {
-    "message": "Oculta os botões \"Baixe o Modrinth App\" da navegação principal. A página do Modrinth App ainda pode ser encontrada na página inicial ou no rodapé."
-  },
-  "settings.display.sidebar.hide-app-promos.title": {
-    "message": "Ocultar promoções do Modrinth App"
-  },
-  "settings.display.sidebar.left-aligned-content-sidebar.title": {
-    "message": "Barra lateral alinhada à esquerda nas páginas de conteúdo"
-  },
-  "settings.display.sidebar.right-aligned-content-sidebar.description": {
-    "message": "Alinha a barra lateral à esquerda do conteúdo da página."
-  },
-  "settings.display.sidebar.right-aligned-filters-sidebar.description": {
-    "message": "Alinha a barra lateral de filtros à direita dos resultados da pesquisa."
-  },
-  "settings.display.sidebar.right-aligned-filters-sidebar.title": {
-    "message": "Barra lateral de filtros alinhada à direita nas páginas de pesquisa"
-  },
-  "settings.display.theme.description": {
-    "message": "Selecione seu tema de cor preferido para o Modrinth neste dispositivo."
-  },
-  "settings.display.theme.title": {
-    "message": "Tema"
-  },
   "settings.head-title": {
     "message": "Configurações de exibição"
   },
diff --git a/apps/frontend/src/locales/pt-PT/index.json b/apps/frontend/src/locales/pt-PT/index.json
index 1dcdebe1dd..997a78f70b 100644
--- a/apps/frontend/src/locales/pt-PT/index.json
+++ b/apps/frontend/src/locales/pt-PT/index.json
@@ -3614,96 +3614,12 @@
   "settings.display.banner.developer-mode.description": {
     "message": "<strong>O Modo de desenvolvedor</strong> está ativo. Este permite que vejas os IDs internos de várias coisas no Modrinth que podem ser úteis para desenvolvimento que use a Modrinth API. Clica no logótipo do Modrinth do fim da página 5 vezes para alternar o modo de desenvolvedor."
   },
-  "settings.display.flags.description": {
-    "message": "Ativa ou desativa certas funcionalidades neste dispositivo."
-  },
-  "settings.display.flags.title": {
-    "message": "Funcionalidades"
-  },
   "settings.display.notification.developer-mode-deactivated.text": {
     "message": "O modo de desenvolvedor foi desativado"
   },
   "settings.display.notification.developer-mode-deactivated.title": {
     "message": "Modo de desenvolvedor desativado"
   },
-  "settings.display.project-list-layouts.datapack": {
-    "message": "Página de Pacotes de Dados"
-  },
-  "settings.display.project-list-layouts.description": {
-    "message": "Seleciona o teu layout preferido para cada página que exibe listas de projetos neste dispositivo."
-  },
-  "settings.display.project-list-layouts.mod": {
-    "message": "Página de Mods"
-  },
-  "settings.display.project-list-layouts.mode.gallery": {
-    "message": "Galeria"
-  },
-  "settings.display.project-list-layouts.mode.grid": {
-    "message": "Grelha"
-  },
-  "settings.display.project-list-layouts.mode.rows": {
-    "message": "Linhas"
-  },
-  "settings.display.project-list-layouts.modpack": {
-    "message": "Página de Modpacks"
-  },
-  "settings.display.project-list-layouts.plugin": {
-    "message": "Página de Plugins"
-  },
-  "settings.display.project-list-layouts.resourcepack": {
-    "message": "Página de Pacotes de Recursos"
-  },
-  "settings.display.project-list-layouts.server": {
-    "message": "Página de servidores"
-  },
-  "settings.display.project-list-layouts.shader": {
-    "message": "Página de Shaders"
-  },
-  "settings.display.project-list-layouts.title": {
-    "message": "Layouts da lista de projetos"
-  },
-  "settings.display.project-list-layouts.user": {
-    "message": "Páginas de perfil de utilizador"
-  },
-  "settings.display.project-list.layouts.collection": {
-    "message": "Coleção"
-  },
-  "settings.display.sidebar.advanced-rendering.description": {
-    "message": "Ativa a renderização avançada, como efeitos de desfoque, que podem causar problemas de desempenho sem o uso de renderização acelerada por hardware."
-  },
-  "settings.display.sidebar.advanced-rendering.title": {
-    "message": "Renderização Avançada"
-  },
-  "settings.display.sidebar.external-links-new-tab.description": {
-    "message": "Os links que redirecionam para fora do Modrinth serão abertos num novo separador. Esta definição não afeta links no mesmo domínio e em descrições Markdown, que serão abertos no mesmo separador, nem links em anúncios e páginas de edição, que serão abertos num novo separador."
-  },
-  "settings.display.sidebar.external-links-new-tab.title": {
-    "message": "Abrir links externos num novo separador"
-  },
-  "settings.display.sidebar.hide-app-promos.description": {
-    "message": "Oculta os botões \"Obter a Modrinth App\" da navegação primária. A página da Modrinth App ainda pode ser encontrada na página inicial ou no rodapé."
-  },
-  "settings.display.sidebar.hide-app-promos.title": {
-    "message": "Ocultar promoções da Modrinth App"
-  },
-  "settings.display.sidebar.left-aligned-content-sidebar.title": {
-    "message": "Barra lateral alinhada à esquerda em páginas de conteúdo"
-  },
-  "settings.display.sidebar.right-aligned-content-sidebar.description": {
-    "message": "Alinha a barra lateral à esquerda do conteúdo da página."
-  },
-  "settings.display.sidebar.right-aligned-filters-sidebar.description": {
-    "message": "Alinha a barra lateral de filtros à direita dos resultados da pesquisa."
-  },
-  "settings.display.sidebar.right-aligned-filters-sidebar.title": {
-    "message": "Barra lateral de filtros alinhada à direita em páginas de pesquisa"
-  },
-  "settings.display.theme.description": {
-    "message": "Seleciona o teu tema de cores preferido para o Modrinth neste dispositivo."
-  },
-  "settings.display.theme.title": {
-    "message": "Cor do tema"
-  },
   "settings.head-title": {
     "message": "Definições de visual"
   },
diff --git a/apps/frontend/src/locales/ro-RO/index.json b/apps/frontend/src/locales/ro-RO/index.json
index 75ffcb2024..687b682103 100644
--- a/apps/frontend/src/locales/ro-RO/index.json
+++ b/apps/frontend/src/locales/ro-RO/index.json
@@ -1898,78 +1898,6 @@
   "settings.display.banner.developer-mode.description": {
     "message": "<strong>Modul de dezvoltator</strong> este activ. Acest lucru vă va permite să vizualizați ID-urile interne ale diverselor lucruri din Modrinth, ceea ce poate fi util dacă sunteți un dezvoltator care folosește API-ul Modrinth. Faceți clic pe sigla Modrinth din partea de jos a paginii de 5 ori pentru a activa sau dezactiva modul de dezvoltator."
   },
-  "settings.display.flags.description": {
-    "message": "Activați sau dezactivați anumite caracteristici pe acest dispozitiv."
-  },
-  "settings.display.flags.title": {
-    "message": "Funcții avansate"
-  },
-  "settings.display.project-list-layouts.datapack": {
-    "message": "Pagina cu pachete de date"
-  },
-  "settings.display.project-list-layouts.description": {
-    "message": "Selectează aspectul preferat pentru fiecare pagină care afișează liste de proiecte pe acest dispozitiv."
-  },
-  "settings.display.project-list-layouts.mod": {
-    "message": "Pagina cu moduri"
-  },
-  "settings.display.project-list-layouts.modpack": {
-    "message": "Pagina cu pachete de moduri"
-  },
-  "settings.display.project-list-layouts.plugin": {
-    "message": "Pagina cu pluginuri"
-  },
-  "settings.display.project-list-layouts.resourcepack": {
-    "message": "Pagina cu pachete de resurse"
-  },
-  "settings.display.project-list-layouts.shader": {
-    "message": "Pagina cu shadere"
-  },
-  "settings.display.project-list-layouts.title": {
-    "message": "Aspectul listelor de proiecte"
-  },
-  "settings.display.project-list-layouts.user": {
-    "message": "Paginile de profil ale utilizatorului"
-  },
-  "settings.display.project-list.layouts.collection": {
-    "message": "Colecție"
-  },
-  "settings.display.sidebar.advanced-rendering.description": {
-    "message": "Activează redarea avansată, cum ar fi efectele de estompare (blur), care pot provoca probleme de performanță fără redare accelerată hardware."
-  },
-  "settings.display.sidebar.advanced-rendering.title": {
-    "message": "Redare avansată"
-  },
-  "settings.display.sidebar.external-links-new-tab.description": {
-    "message": "Deschide linkurile externe de pe Modrinth într-o pagină nouă. Indiferent de această setare, linkurile de pe același domeniu și din descrierile Markdown se vor deschide în aceeași pagină, iar linkurile din reclame și paginile de editare se vor deschide într-o pagină nouă."
-  },
-  "settings.display.sidebar.external-links-new-tab.title": {
-    "message": "Deschide linkurile externe într-o pagină nouă"
-  },
-  "settings.display.sidebar.hide-app-promos.description": {
-    "message": "Ascunde butoanele \"Descarcă Modrinth App\" din navigarea principală. Pagina aplicației Modrinth poate fi găsită în continuare pe pagina de destinație sau în subsol."
-  },
-  "settings.display.sidebar.hide-app-promos.title": {
-    "message": "Ascunde promoțiile Modrinth App"
-  },
-  "settings.display.sidebar.left-aligned-content-sidebar.title": {
-    "message": "Bară laterală aliniată la stânga pe paginile de conținut"
-  },
-  "settings.display.sidebar.right-aligned-content-sidebar.description": {
-    "message": "Aliniază bara laterală la stânga conținutului paginii."
-  },
-  "settings.display.sidebar.right-aligned-filters-sidebar.description": {
-    "message": "Aliniază bara laterală de filtre la dreapta rezultatelor căutării."
-  },
-  "settings.display.sidebar.right-aligned-filters-sidebar.title": {
-    "message": "Aliniază bara laterală de filtre la dreapta rezultatelor căutării"
-  },
-  "settings.display.theme.description": {
-    "message": "Selectează tema de culori preferată pentru Modrinth pe acest dispozitiv."
-  },
-  "settings.display.theme.title": {
-    "message": "Temă de culori"
-  },
   "settings.pats.action.create": {
     "message": "Creează un token PAT"
   },
diff --git a/apps/frontend/src/locales/ru-RU/index.json b/apps/frontend/src/locales/ru-RU/index.json
index 21138c0c04..d1a77d948c 100644
--- a/apps/frontend/src/locales/ru-RU/index.json
+++ b/apps/frontend/src/locales/ru-RU/index.json
@@ -4967,96 +4967,12 @@
   "settings.display.banner.developer-mode.description": {
     "message": "<strong>Режим разработчика</strong> включён. Отображаются внутренние идентификаторы различных элементов сайта, что удобно при работе с API. Чтобы отключить, снова нажмите на логотип Modrinth внизу страницы 5 раз."
   },
-  "settings.display.flags.description": {
-    "message": "Настройте отдельные функции на этом устройстве."
-  },
-  "settings.display.flags.title": {
-    "message": "Настройка функций"
-  },
   "settings.display.notification.developer-mode-deactivated.text": {
     "message": "Режим разработчика больше не активен"
   },
   "settings.display.notification.developer-mode-deactivated.title": {
     "message": "Режим разработчика отключён"
   },
-  "settings.display.project-list-layouts.datapack": {
-    "message": "Страница наборов данных"
-  },
-  "settings.display.project-list-layouts.description": {
-    "message": "Выберите вид для каждой страницы с проектами на этом устройстве."
-  },
-  "settings.display.project-list-layouts.mod": {
-    "message": "Страница модов"
-  },
-  "settings.display.project-list-layouts.mode.gallery": {
-    "message": "Галерея"
-  },
-  "settings.display.project-list-layouts.mode.grid": {
-    "message": "Сетка"
-  },
-  "settings.display.project-list-layouts.mode.rows": {
-    "message": "Список"
-  },
-  "settings.display.project-list-layouts.modpack": {
-    "message": "Страница сборок"
-  },
-  "settings.display.project-list-layouts.plugin": {
-    "message": "Страница плагинов"
-  },
-  "settings.display.project-list-layouts.resourcepack": {
-    "message": "Страница наборов ресурсов"
-  },
-  "settings.display.project-list-layouts.server": {
-    "message": "Страница серверов"
-  },
-  "settings.display.project-list-layouts.shader": {
-    "message": "Страница шейдеров"
-  },
-  "settings.display.project-list-layouts.title": {
-    "message": "Вид проектов"
-  },
-  "settings.display.project-list-layouts.user": {
-    "message": "Страницы пользователей"
-  },
-  "settings.display.project-list.layouts.collection": {
-    "message": "Коллекция"
-  },
-  "settings.display.sidebar.advanced-rendering.description": {
-    "message": "Включает продвинутые эффекты вроде размытия, но может снизить производительность на устройствах без аппаратного ускорения."
-  },
-  "settings.display.sidebar.advanced-rendering.title": {
-    "message": "Расширенные эффекты"
-  },
-  "settings.display.sidebar.external-links-new-tab.description": {
-    "message": "Ссылки за пределы Modrinth будут открываться в новой вкладке. Исключения: ссылки внутри домена и в Markdown — всегда в той же вкладке; реклама и страницы редактирования — всегда в новой."
-  },
-  "settings.display.sidebar.external-links-new-tab.title": {
-    "message": "Внешние ссылки в новой вкладке"
-  },
-  "settings.display.sidebar.hide-app-promos.description": {
-    "message": "Убирает кнопку «Скачать Modrinth App» с поисковых страниц. Ссылку на раздел с Modrinth App всё ещё можно найти на главной странице или в нижней части интерфейса."
-  },
-  "settings.display.sidebar.hide-app-promos.title": {
-    "message": "Скрывать кнопку скачивания Modrinth App"
-  },
-  "settings.display.sidebar.left-aligned-content-sidebar.title": {
-    "message": "Панель сведений слева"
-  },
-  "settings.display.sidebar.right-aligned-content-sidebar.description": {
-    "message": "Помещает панель сведений слева от содержимого страницы."
-  },
-  "settings.display.sidebar.right-aligned-filters-sidebar.description": {
-    "message": "Помещает панель фильтров справа от результатов поиска."
-  },
-  "settings.display.sidebar.right-aligned-filters-sidebar.title": {
-    "message": "Панель фильтров справа"
-  },
-  "settings.display.theme.description": {
-    "message": "Выберите тему для Modrinth на этом устройстве."
-  },
-  "settings.display.theme.title": {
-    "message": "Тема"
-  },
   "settings.head-title": {
     "message": "Настройки отображения"
   },
diff --git a/apps/frontend/src/locales/sr-CS/index.json b/apps/frontend/src/locales/sr-CS/index.json
index 5f933b6205..73767bd680 100644
--- a/apps/frontend/src/locales/sr-CS/index.json
+++ b/apps/frontend/src/locales/sr-CS/index.json
@@ -1835,90 +1835,6 @@
   "settings.display.banner.developer-mode.description": {
     "message": "<strong>Developerski režim</strong> je aktivan. Ovo će ti omogućiti da vidiš interne ID-je raznih stvari na Modrinthu, što može biti korisno ako si developer koji koristi Modrinth API. Klikni na Modrinth logo na dnu stranice 5 puta da bi uključio/isključio developerski režim."
   },
-  "settings.display.flags.description": {
-    "message": "Uključi ili isključi određene funkcije na ovom uređaju."
-  },
-  "settings.display.flags.title": {
-    "message": "Prebaci funkcije"
-  },
-  "settings.display.project-list-layouts.datapack": {
-    "message": "Stranica Data Packova"
-  },
-  "settings.display.project-list-layouts.description": {
-    "message": "Izaberi željeni raspored za svaku stranicu koja prikazuje liste projekata na ovom uređaju."
-  },
-  "settings.display.project-list-layouts.mod": {
-    "message": "Stranica Modova"
-  },
-  "settings.display.project-list-layouts.mode.gallery": {
-    "message": "Galerija"
-  },
-  "settings.display.project-list-layouts.mode.grid": {
-    "message": "Mreža"
-  },
-  "settings.display.project-list-layouts.mode.rows": {
-    "message": "Redovi"
-  },
-  "settings.display.project-list-layouts.modpack": {
-    "message": "Stranica Modpackova"
-  },
-  "settings.display.project-list-layouts.plugin": {
-    "message": "Stranica Plugina"
-  },
-  "settings.display.project-list-layouts.resourcepack": {
-    "message": "Stranica Resurs paketa"
-  },
-  "settings.display.project-list-layouts.server": {
-    "message": "Stranica servera"
-  },
-  "settings.display.project-list-layouts.shader": {
-    "message": "Stranica Shadera"
-  },
-  "settings.display.project-list-layouts.title": {
-    "message": "Rasporedi liste projekata"
-  },
-  "settings.display.project-list-layouts.user": {
-    "message": "Stranica profila korisnika"
-  },
-  "settings.display.project-list.layouts.collection": {
-    "message": "Kolekcija"
-  },
-  "settings.display.sidebar.advanced-rendering.description": {
-    "message": "Omogućava napredno renderovanje, poput efekata zamagljenja, koje bez hardverski ubrzanog renderovanja može izazvati probleme sa performansama."
-  },
-  "settings.display.sidebar.advanced-rendering.title": {
-    "message": "Napredno renderovanje"
-  },
-  "settings.display.sidebar.external-links-new-tab.description": {
-    "message": "Otvaraj linkove koji vode izvan Modrintha u novom tabu. Bez obzira na ovo podešavanje, linkovi na istoj domeni i u Markdown opisima otvaraju se u istom tabu, a linkovi u oglasima i na stranicama za uređivanje otvaraju se u novom tabu."
-  },
-  "settings.display.sidebar.external-links-new-tab.title": {
-    "message": "Otvaraj spoljne linkove u novom tabu"
-  },
-  "settings.display.sidebar.hide-app-promos.description": {
-    "message": "Sakriva dugmad \"Preuzmite Modrinth App\" iz primarne navigacije. Stranicu Modrinth App i dalje možete naći na početnoj strani ili u footeru."
-  },
-  "settings.display.sidebar.hide-app-promos.title": {
-    "message": "Sakrij promocije Modrinth App-a"
-  },
-  "settings.display.sidebar.left-aligned-content-sidebar.title": {
-    "message": "Levo poravnata bočna traka na stranicama sa sadržajem"
-  },
-  "settings.display.sidebar.right-aligned-content-sidebar.description": {
-    "message": "Poravnava bočnu traku levo od sadržaja stranice."
-  },
-  "settings.display.sidebar.right-aligned-filters-sidebar.description": {
-    "message": "Poravnava bočnu traku filtera na desnu stranu rezultata pretrage."
-  },
-  "settings.display.sidebar.right-aligned-filters-sidebar.title": {
-    "message": "Desno poravnata bočna traka filtera na stranicama za pretragu"
-  },
-  "settings.display.theme.description": {
-    "message": "Izaberi željenu temu boje za Modrinth na ovom uređaju."
-  },
-  "settings.display.theme.title": {
-    "message": "Tema boja"
-  },
   "settings.head-title": {
     "message": "Podešavanja prikaza"
   },
diff --git a/apps/frontend/src/locales/sv-SE/index.json b/apps/frontend/src/locales/sv-SE/index.json
index a79c350d4d..ec425d123e 100644
--- a/apps/frontend/src/locales/sv-SE/index.json
+++ b/apps/frontend/src/locales/sv-SE/index.json
@@ -4139,96 +4139,12 @@
   "settings.display.banner.developer-mode.description": {
     "message": "<strong>Utvecklarläge</strong> är aktiverat. Detta tillåter dig att visa interna ID:n för olika saker genom Modrinth vilket kan vara användbart om du är en utvecklare och använder Modrinths API. Klicka på Modrinth-loggan längst ned fem gånger för att aktivera utvecklarläge."
   },
-  "settings.display.flags.description": {
-    "message": "Aktivera eller inaktivera vissa funktioner på denna enhet."
-  },
-  "settings.display.flags.title": {
-    "message": "Växla funktioner"
-  },
   "settings.display.notification.developer-mode-deactivated.text": {
     "message": "Utvecklarläge har inaktiverats"
   },
   "settings.display.notification.developer-mode-deactivated.title": {
     "message": "Utvecklarläge inaktiverat"
   },
-  "settings.display.project-list-layouts.datapack": {
-    "message": "Sidan för datapaket"
-  },
-  "settings.display.project-list-layouts.description": {
-    "message": "Välj en önskad layout för varje sida som visar projektlistor på denna enhet."
-  },
-  "settings.display.project-list-layouts.mod": {
-    "message": "Sidan för moddar"
-  },
-  "settings.display.project-list-layouts.mode.gallery": {
-    "message": "Galleri"
-  },
-  "settings.display.project-list-layouts.mode.grid": {
-    "message": "Rutnät"
-  },
-  "settings.display.project-list-layouts.mode.rows": {
-    "message": "Rader"
-  },
-  "settings.display.project-list-layouts.modpack": {
-    "message": "Sidan för modpaket"
-  },
-  "settings.display.project-list-layouts.plugin": {
-    "message": "Sidan för plugins"
-  },
-  "settings.display.project-list-layouts.resourcepack": {
-    "message": "Sidan för resurspaket"
-  },
-  "settings.display.project-list-layouts.server": {
-    "message": "Sidan för servrar"
-  },
-  "settings.display.project-list-layouts.shader": {
-    "message": "Sidan för shaders"
-  },
-  "settings.display.project-list-layouts.title": {
-    "message": "Projektlistans layouter"
-  },
-  "settings.display.project-list-layouts.user": {
-    "message": "Användarprofil-sidor"
-  },
-  "settings.display.project-list.layouts.collection": {
-    "message": "Samling"
-  },
-  "settings.display.sidebar.advanced-rendering.description": {
-    "message": "Aktiverar avancerad rendering som t.ex. oskärpa vilket kan leda till prestandaproblem utan hårdvaruaccelerande rendering."
-  },
-  "settings.display.sidebar.advanced-rendering.title": {
-    "message": "Avancerad rendering"
-  },
-  "settings.display.sidebar.external-links-new-tab.description": {
-    "message": "Får länkar som leder utanför Modrinth att öppna en ny flik. Oavsett vad denna inställning har ställts in på kommer länkar med samma domän och i Markdown-beskrivningar att öppnas i samma flik, och länkar på annonser och redigeringssidor öppnas i en ny flik."
-  },
-  "settings.display.sidebar.external-links-new-tab.title": {
-    "message": "Öppna externa länkar i en ny flik"
-  },
-  "settings.display.sidebar.hide-app-promos.description": {
-    "message": "Döljer \"Installera Modrinth App\" knappen från primär navigering. Modrinth App-sidan kan fortfarande hittas på landningssidan eller i sidfoten."
-  },
-  "settings.display.sidebar.hide-app-promos.title": {
-    "message": "Dölj \"Installera Modrinth App\" knapp"
-  },
-  "settings.display.sidebar.left-aligned-content-sidebar.title": {
-    "message": "Vänsterjusterad sidofält på innehållssidor"
-  },
-  "settings.display.sidebar.right-aligned-content-sidebar.description": {
-    "message": "Justerar sidofältet till vänster om sidans innehåll."
-  },
-  "settings.display.sidebar.right-aligned-filters-sidebar.description": {
-    "message": "Justerar filtrets sidofält till höger om sökresultaten."
-  },
-  "settings.display.sidebar.right-aligned-filters-sidebar.title": {
-    "message": "Högerjusterad sidofält på innehållssidor"
-  },
-  "settings.display.theme.description": {
-    "message": "Välj färgtema för Modrinth på denna enhet."
-  },
-  "settings.display.theme.title": {
-    "message": "Färgtema"
-  },
   "settings.head-title": {
     "message": "Visningsinställningar"
   },
diff --git a/apps/frontend/src/locales/tr-TR/index.json b/apps/frontend/src/locales/tr-TR/index.json
index 26cee8f8ce..dc028d4e87 100644
--- a/apps/frontend/src/locales/tr-TR/index.json
+++ b/apps/frontend/src/locales/tr-TR/index.json
@@ -4520,96 +4520,12 @@
   "settings.display.banner.developer-mode.description": {
     "message": "<strong>Geliştirme modu</strong> aktif. Modrinth'te bulunan çeşitli şeylerin dahilî kimliklerini gösterir, Modrinth API kullanan bir geliştiriciyseniz kullanışlı olabilir. Sayfanın en altındaki Modrinth logosuna 5 kere tıklayarak açılır ve kapanır."
   },
-  "settings.display.flags.description": {
-    "message": "Bu cihazdaki belli özellikleri etkinlestir veya devre dışı bırak."
-  },
-  "settings.display.flags.title": {
-    "message": "Özellik aç/kapa"
-  },
   "settings.display.notification.developer-mode-deactivated.text": {
     "message": "Geliştirme modu kapatıldı"
   },
   "settings.display.notification.developer-mode-deactivated.title": {
     "message": "Geliştirme modu kapalı"
   },
-  "settings.display.project-list-layouts.datapack": {
-    "message": "Veri Paketleri sayfası"
-  },
-  "settings.display.project-list-layouts.description": {
-    "message": "Bu cihazda proje listelerini gösteren her sayfa için tercih ettiğiniz düzeni seçin."
-  },
-  "settings.display.project-list-layouts.mod": {
-    "message": "Modlar sayfası"
-  },
-  "settings.display.project-list-layouts.mode.gallery": {
-    "message": "Galeri"
-  },
-  "settings.display.project-list-layouts.mode.grid": {
-    "message": "Izgara"
-  },
-  "settings.display.project-list-layouts.mode.rows": {
-    "message": "Satırlar"
-  },
-  "settings.display.project-list-layouts.modpack": {
-    "message": "Mod paketleri sayfası"
-  },
-  "settings.display.project-list-layouts.plugin": {
-    "message": "Pluginler sayfası"
-  },
-  "settings.display.project-list-layouts.resourcepack": {
-    "message": "Kaynak Paketleri sayfası"
-  },
-  "settings.display.project-list-layouts.server": {
-    "message": "Sunucular sayfası"
-  },
-  "settings.display.project-list-layouts.shader": {
-    "message": "Shaderlar sayfası"
-  },
-  "settings.display.project-list-layouts.title": {
-    "message": "Proje liste düzenleri"
-  },
-  "settings.display.project-list-layouts.user": {
-    "message": "Kullanıcı profili sayfaları"
-  },
-  "settings.display.project-list.layouts.collection": {
-    "message": "Koleksiyon"
-  },
-  "settings.display.sidebar.advanced-rendering.description": {
-    "message": "Donanım hızlandırmalı işleme olmadan performans sorunlarına yol açabilecek bulanıklık efektleri gibi gelişmiş işlemeyi etkinleştirir."
-  },
-  "settings.display.sidebar.advanced-rendering.title": {
-    "message": "Gelişmiş işleme"
-  },
-  "settings.display.sidebar.external-links-new-tab.description": {
-    "message": "Modrinth'in dışına giden bağlantıların yeni bir sekmede açılmasını sağla. Bu ayara bakılmaksızın, aynı alan adındaki ve Markdown açıklamalarındaki bağlantılar aynı sekmede açılacak ve reklamlardaki, düzenleme sayfalarındaki bağlantılar yeni bir sekmede açılacak."
-  },
-  "settings.display.sidebar.external-links-new-tab.title": {
-    "message": "Dış bağlantıları yeni sekmede aç"
-  },
-  "settings.display.sidebar.hide-app-promos.description": {
-    "message": "\"Modrinth App Edin\" tuşlarını ana navigasyondan gizler. Modrinth App sayfası hala açılış sayfasında veya alt bilgide bulunabilir."
-  },
-  "settings.display.sidebar.hide-app-promos.title": {
-    "message": "Modrinth App tanıtımlarını gizle"
-  },
-  "settings.display.sidebar.left-aligned-content-sidebar.title": {
-    "message": "İçerik sayfalarında sola hizalı kenar çubuğu"
-  },
-  "settings.display.sidebar.right-aligned-content-sidebar.description": {
-    "message": "Kenar çubuğunu sayfa içeriğinin soluna hizalar."
-  },
-  "settings.display.sidebar.right-aligned-filters-sidebar.description": {
-    "message": "Filtre kenar çubuğunu, arama sonuçlarının sağına hizalar."
-  },
-  "settings.display.sidebar.right-aligned-filters-sidebar.title": {
-    "message": "Arama sayfalarında kenar çubuğunu sağa hizalar"
-  },
-  "settings.display.theme.description": {
-    "message": "Bu cihazda Modrinth için tercih ettiğiniz renk temasını seçin."
-  },
-  "settings.display.theme.title": {
-    "message": "Renk teması"
-  },
   "settings.head-title": {
     "message": "Görüntü Ayarları"
   },
diff --git a/apps/frontend/src/locales/uk-UA/index.json b/apps/frontend/src/locales/uk-UA/index.json
index cf48a63bcc..0c92502378 100644
--- a/apps/frontend/src/locales/uk-UA/index.json
+++ b/apps/frontend/src/locales/uk-UA/index.json
@@ -4991,96 +4991,12 @@
   "settings.display.banner.developer-mode.description": {
     "message": "<strong>Режим розробника</strong> ввімкнений. Це дозволить вам переглядати внутрішні ID різних елементів Modrinth що може допомогти, якщо ви розробник, який використовує Modrinth API. Натисніть на логотип Modrinth знизу сторінки 5 разів, щоб перемкнути режим розробника."
   },
-  "settings.display.flags.description": {
-    "message": "Увімкнути або вимкнути певні функції на цьому пристрої."
-  },
-  "settings.display.flags.title": {
-    "message": "Перемикання функцій"
-  },
   "settings.display.notification.developer-mode-deactivated.text": {
     "message": "Режим розробника було вимкнено"
   },
   "settings.display.notification.developer-mode-deactivated.title": {
     "message": "Режим розробника вимкнено"
   },
-  "settings.display.project-list-layouts.datapack": {
-    "message": "Сторінка пакетів даних"
-  },
-  "settings.display.project-list-layouts.description": {
-    "message": "Виберіть макет, якому ви надаєте перевагу для кожної сторінки, що показує список проєктів на цьому пристрої."
-  },
-  "settings.display.project-list-layouts.mod": {
-    "message": "Сторінка модів"
-  },
-  "settings.display.project-list-layouts.mode.gallery": {
-    "message": "Галерея"
-  },
-  "settings.display.project-list-layouts.mode.grid": {
-    "message": "Сітка"
-  },
-  "settings.display.project-list-layouts.mode.rows": {
-    "message": "Рядки"
-  },
-  "settings.display.project-list-layouts.modpack": {
-    "message": "Сторінка збірок"
-  },
-  "settings.display.project-list-layouts.plugin": {
-    "message": "Сторінка плаґінів"
-  },
-  "settings.display.project-list-layouts.resourcepack": {
-    "message": "Сторінка пакетів ресурсів"
-  },
-  "settings.display.project-list-layouts.server": {
-    "message": "Сторінка серверів"
-  },
-  "settings.display.project-list-layouts.shader": {
-    "message": "Сторінка шейдерів"
-  },
-  "settings.display.project-list-layouts.title": {
-    "message": "Макети списку проєктів"
-  },
-  "settings.display.project-list-layouts.user": {
-    "message": "Сторінки профілю користувача"
-  },
-  "settings.display.project-list.layouts.collection": {
-    "message": "Добірка"
-  },
-  "settings.display.sidebar.advanced-rendering.description": {
-    "message": "Умикає розширені можливості промальовування, як-от ефекти розмиття, які можуть призводити до проблем із продуктивністю без апаратного прискорення."
-  },
-  "settings.display.sidebar.advanced-rendering.title": {
-    "message": "Розширене промальовування"
-  },
-  "settings.display.sidebar.external-links-new-tab.description": {
-    "message": "Робить так, аби посилання за межі Modrinth, відкривалися в новій вкладці. Незалежно від цього налаштування, посилання в одному домені та в описах з Markdown відкриватимуться в тій же вкладці, а посилання в рекламах і на сторінках редагування — в новій вкладці."
-  },
-  "settings.display.sidebar.external-links-new-tab.title": {
-    "message": "Відкривати зовнішні посилання в новій вкладці"
-  },
-  "settings.display.sidebar.hide-app-promos.description": {
-    "message": "Ховає кнопки «Установити Modrinth App» з навігації. Сторінку Modrinth App все ще можна знайти на головній сторінці або внизу будь-якої сторінки."
-  },
-  "settings.display.sidebar.hide-app-promos.title": {
-    "message": "Приховати пропозицію установки Modrinth App"
-  },
-  "settings.display.sidebar.left-aligned-content-sidebar.title": {
-    "message": "Перемістити бокову панель ліворуч на сторінках вмісту"
-  },
-  "settings.display.sidebar.right-aligned-content-sidebar.description": {
-    "message": "Вирівнює бокову панель до лівого краю на сторінці вмісту."
-  },
-  "settings.display.sidebar.right-aligned-filters-sidebar.description": {
-    "message": "Вирівнює бокове меню фільтрів до правого краю результатів пошуку."
-  },
-  "settings.display.sidebar.right-aligned-filters-sidebar.title": {
-    "message": "Перемістити бокову панель фільтрів праворуч на сторінках пошуку"
-  },
-  "settings.display.theme.description": {
-    "message": "Виберіть колір теми, для Modrinth, якому ви надаєте перевагу для цього пристрою."
-  },
-  "settings.display.theme.title": {
-    "message": "Колірна тема"
-  },
   "settings.head-title": {
     "message": "Налаштування вигляду"
   },
diff --git a/apps/frontend/src/locales/vi-VN/index.json b/apps/frontend/src/locales/vi-VN/index.json
index d0477907d4..13b2c9d8b1 100644
--- a/apps/frontend/src/locales/vi-VN/index.json
+++ b/apps/frontend/src/locales/vi-VN/index.json
@@ -4103,96 +4103,12 @@
   "settings.display.banner.developer-mode.description": {
     "message": "<strong>Chế độ nhà phát triển</strong> đang được bật. Chế độ này cho phép bạn xem các ID nội bộ của nhiều thành phần trên Modrinth, hữu ích nếu bạn là nhà phát triển sử dụng API của Modrinth. Nhấp vào logo Modrinth ở cuối trang 5 lần để bật hoặc tắt chế độ nhà phát triển."
   },
-  "settings.display.flags.description": {
-    "message": "Bật hoặc tắt một số tính năng trên thiết bị này."
-  },
-  "settings.display.flags.title": {
-    "message": "Bật / Tắt tính năng"
-  },
   "settings.display.notification.developer-mode-deactivated.text": {
     "message": "Chế độ nhà phát triển đã bị tắt"
   },
   "settings.display.notification.developer-mode-deactivated.title": {
     "message": "Chế độ nhà phát triển đã tắt"
   },
-  "settings.display.project-list-layouts.datapack": {
-    "message": "Trang Gói dữ liệu"
-  },
-  "settings.display.project-list-layouts.description": {
-    "message": "Chọn bố cục hiển thị bạn ưa thích cho từng trang có danh sách dự án trên thiết bị này."
-  },
-  "settings.display.project-list-layouts.mod": {
-    "message": "Trang mod"
-  },
-  "settings.display.project-list-layouts.mode.gallery": {
-    "message": "Thư viện"
-  },
-  "settings.display.project-list-layouts.mode.grid": {
-    "message": "Lưới"
-  },
-  "settings.display.project-list-layouts.mode.rows": {
-    "message": "Hàng"
-  },
-  "settings.display.project-list-layouts.modpack": {
-    "message": "Trang modpack"
-  },
-  "settings.display.project-list-layouts.plugin": {
-    "message": "Trang plugin"
-  },
-  "settings.display.project-list-layouts.resourcepack": {
-    "message": "Trang gói tài nguyên"
-  },
-  "settings.display.project-list-layouts.server": {
-    "message": "Trang máy chủ"
-  },
-  "settings.display.project-list-layouts.shader": {
-    "message": "Trang shader"
-  },
-  "settings.display.project-list-layouts.title": {
-    "message": "Bố cục danh sách dự án"
-  },
-  "settings.display.project-list-layouts.user": {
-    "message": "Trang hồ sơ người dùng"
-  },
-  "settings.display.project-list.layouts.collection": {
-    "message": "Bộ sưu tập"
-  },
-  "settings.display.sidebar.advanced-rendering.description": {
-    "message": "Bật chế độ kết xuất nâng cao như hiệu ứng làm mờ, có thể gây vấn đề hiệu năng nếu không có tăng tốc phần cứng."
-  },
-  "settings.display.sidebar.advanced-rendering.title": {
-    "message": "Kết xuất nâng cao"
-  },
-  "settings.display.sidebar.external-links-new-tab.description": {
-    "message": "Mở các liên kết dẫn ra ngoài Modrinth trong tab mới. Bất kể cài đặt này, các liên kết cùng tên miền và trong mô tả Markdown sẽ mở trong cùng tab, còn các liên kết trong quảng cáo và trang chỉnh sửa sẽ mở trong tab mới."
-  },
-  "settings.display.sidebar.external-links-new-tab.title": {
-    "message": "Mở liên kết bên ngoài trong tab mới"
-  },
-  "settings.display.sidebar.hide-app-promos.description": {
-    "message": "Ẩn các nút “Tải ứng dụng Modrinth” khỏi thanh điều hướng chính. Trang ứng dụng Modrinth vẫn có thể được tìm thấy ở trang chủ hoặc phần chân trang."
-  },
-  "settings.display.sidebar.hide-app-promos.title": {
-    "message": "Ẩn quảng bá ứng dụng Modrinth"
-  },
-  "settings.display.sidebar.left-aligned-content-sidebar.title": {
-    "message": "Thanh bên căn trái trên các trang nội dung"
-  },
-  "settings.display.sidebar.right-aligned-content-sidebar.description": {
-    "message": "Căn thanh bên sang bên trái nội dung trang."
-  },
-  "settings.display.sidebar.right-aligned-filters-sidebar.description": {
-    "message": "Căn thanh bên bộ lọc sang bên phải kết quả tìm kiếm."
-  },
-  "settings.display.sidebar.right-aligned-filters-sidebar.title": {
-    "message": "Thanh bên bộ lọc căn phải trên các trang tìm kiếm"
-  },
-  "settings.display.theme.description": {
-    "message": "Chọn chủ đề màu bạn ưa thích cho Modrinth trên thiết bị này."
-  },
-  "settings.display.theme.title": {
-    "message": "Chủ đề màu"
-  },
   "settings.head-title": {
     "message": "Cài đặt hiển thị"
   },
diff --git a/apps/frontend/src/locales/zh-CN/index.json b/apps/frontend/src/locales/zh-CN/index.json
index b5fe62d96b..48a7b20a7e 100644
--- a/apps/frontend/src/locales/zh-CN/index.json
+++ b/apps/frontend/src/locales/zh-CN/index.json
@@ -5012,96 +5012,12 @@
   "settings.display.banner.developer-mode.description": {
     "message": "<strong>开发者模式</strong>已激活。该模式可让你查看 Modrinth 各种对象的内部 ID，对于使用 Modrinth API 的开发者会有所帮助。点击页面底部的 Modrinth 徽标 5 次可开关开发者模式。"
   },
-  "settings.display.flags.description": {
-    "message": "为当前设备开启或关闭特定功能。"
-  },
-  "settings.display.flags.title": {
-    "message": "功能开关"
-  },
   "settings.display.notification.developer-mode-deactivated.text": {
     "message": "开发者模式已被禁用"
   },
   "settings.display.notification.developer-mode-deactivated.title": {
     "message": "开发者模式已关闭"
   },
-  "settings.display.project-list-layouts.datapack": {
-    "message": "数据包页面"
-  },
-  "settings.display.project-list-layouts.description": {
-    "message": "为当前设备选择你喜欢的含项目列表页面的布局。"
-  },
-  "settings.display.project-list-layouts.mod": {
-    "message": "模组页面"
-  },
-  "settings.display.project-list-layouts.mode.gallery": {
-    "message": "图库"
-  },
-  "settings.display.project-list-layouts.mode.grid": {
-    "message": "网格"
-  },
-  "settings.display.project-list-layouts.mode.rows": {
-    "message": "列表"
-  },
-  "settings.display.project-list-layouts.modpack": {
-    "message": "整合包页面"
-  },
-  "settings.display.project-list-layouts.plugin": {
-    "message": "插件页面"
-  },
-  "settings.display.project-list-layouts.resourcepack": {
-    "message": "资源包页面"
-  },
-  "settings.display.project-list-layouts.server": {
-    "message": "服务器页面"
-  },
-  "settings.display.project-list-layouts.shader": {
-    "message": "光影包页面"
-  },
-  "settings.display.project-list-layouts.title": {
-    "message": "项目列表布局"
-  },
-  "settings.display.project-list-layouts.user": {
-    "message": "用户个人资料页面"
-  },
-  "settings.display.project-list.layouts.collection": {
-    "message": "收藏"
-  },
-  "settings.display.sidebar.advanced-rendering.description": {
-    "message": "启用模糊效果等高级渲染。可能会在没有硬件加速渲染的情况下造成性能问题。"
-  },
-  "settings.display.sidebar.advanced-rendering.title": {
-    "message": "高级渲染"
-  },
-  "settings.display.sidebar.external-links-new-tab.description": {
-    "message": "在新标签页中打开跳出 Modrinth 的站外链接。但同一域名下的链接、Markdown 描述中的链接始终在当前标签页打开，广告和编辑页面上的链接则始终在新标签页打开。"
-  },
-  "settings.display.sidebar.external-links-new-tab.title": {
-    "message": "在新标签页打开外部链接"
-  },
-  "settings.display.sidebar.hide-app-promos.description": {
-    "message": "隐藏主导航栏中的“获取 Modrinth App”按钮。Modrinth App 页面仍然可以通过登录页面或页脚访问。"
-  },
-  "settings.display.sidebar.hide-app-promos.title": {
-    "message": "隐藏 Modrinth App 推荐"
-  },
-  "settings.display.sidebar.left-aligned-content-sidebar.title": {
-    "message": "内容页面侧边栏左对齐"
-  },
-  "settings.display.sidebar.right-aligned-content-sidebar.description": {
-    "message": "将侧边栏显示在页面内容的左侧。"
-  },
-  "settings.display.sidebar.right-aligned-filters-sidebar.description": {
-    "message": "将侧边栏显示在搜索结果的右侧。"
-  },
-  "settings.display.sidebar.right-aligned-filters-sidebar.title": {
-    "message": "搜索页面筛选侧边栏右对齐"
-  },
-  "settings.display.theme.description": {
-    "message": "为当前设备选择你偏好的色彩主题。"
-  },
-  "settings.display.theme.title": {
-    "message": "色彩主题"
-  },
   "settings.head-title": {
     "message": "显示设置"
   },
diff --git a/apps/frontend/src/locales/zh-TW/index.json b/apps/frontend/src/locales/zh-TW/index.json
index 18b07d3888..dcbe10f63b 100644
--- a/apps/frontend/src/locales/zh-TW/index.json
+++ b/apps/frontend/src/locales/zh-TW/index.json
@@ -5012,96 +5012,12 @@
   "settings.display.banner.developer-mode.description": {
     "message": "開發人員模式<strong>已啟用</strong>。這個模式可以讓你查看 Modrinth 各項內容的內部 ID，如果你是使用 Modrinth API 的開發人員，這項功能可能會對你有所幫助。按 5 次頁面底部的 Modrinth 標誌即可切換開發人員模式。"
   },
-  "settings.display.flags.description": {
-    "message": "針對這部裝置，設定要啟用或停用的特定功能。"
-  },
-  "settings.display.flags.title": {
-    "message": "功能開關"
-  },
   "settings.display.notification.developer-mode-deactivated.text": {
     "message": "開發者模式已被停用"
   },
   "settings.display.notification.developer-mode-deactivated.title": {
     "message": "開發人員模式已停用"
   },
-  "settings.display.project-list-layouts.datapack": {
-    "message": "資料包頁面"
-  },
-  "settings.display.project-list-layouts.description": {
-    "message": "依你偏好，設定這部裝置的專案清單版面配置。"
-  },
-  "settings.display.project-list-layouts.mod": {
-    "message": "模組頁面"
-  },
-  "settings.display.project-list-layouts.mode.gallery": {
-    "message": "圖庫"
-  },
-  "settings.display.project-list-layouts.mode.grid": {
-    "message": "網格"
-  },
-  "settings.display.project-list-layouts.mode.rows": {
-    "message": "列"
-  },
-  "settings.display.project-list-layouts.modpack": {
-    "message": "模組包頁面"
-  },
-  "settings.display.project-list-layouts.plugin": {
-    "message": "插件頁面"
-  },
-  "settings.display.project-list-layouts.resourcepack": {
-    "message": "資源包頁面"
-  },
-  "settings.display.project-list-layouts.server": {
-    "message": "伺服器頁面"
-  },
-  "settings.display.project-list-layouts.shader": {
-    "message": "光影包頁面"
-  },
-  "settings.display.project-list-layouts.title": {
-    "message": "專案清單版面配置"
-  },
-  "settings.display.project-list-layouts.user": {
-    "message": "使用者個人檔案頁面"
-  },
-  "settings.display.project-list.layouts.collection": {
-    "message": "收藏"
-  },
-  "settings.display.sidebar.advanced-rendering.description": {
-    "message": "啟用進階繪製（如模糊效果）；若無硬體加速可能會導致效能問題。"
-  },
-  "settings.display.sidebar.advanced-rendering.title": {
-    "message": "進階繪製"
-  },
-  "settings.display.sidebar.external-links-new-tab.description": {
-    "message": "在新分頁中開啟 Modrinth 的外部連結。這項設定僅適用於外部連結，內部連結和 Markdown 說明中的連結仍會在同一個分頁中開啟，而廣告和編輯頁面的連結會在新分頁中開啟。"
-  },
-  "settings.display.sidebar.external-links-new-tab.title": {
-    "message": "在新分頁中開啟外部連結"
-  },
-  "settings.display.sidebar.hide-app-promos.description": {
-    "message": "在主導覽列中隱藏「下載 Modrinth App」按鈕。你仍可在登入頁面或頁尾找到 Modrinth 應用程式頁面。"
-  },
-  "settings.display.sidebar.hide-app-promos.title": {
-    "message": "隱藏 Modrinth App 廣告"
-  },
-  "settings.display.sidebar.left-aligned-content-sidebar.title": {
-    "message": "內容頁面左側邊欄"
-  },
-  "settings.display.sidebar.right-aligned-content-sidebar.description": {
-    "message": "使側邊欄靠頁面內容左側對齊。"
-  },
-  "settings.display.sidebar.right-aligned-filters-sidebar.description": {
-    "message": "使篩選側邊欄靠搜尋結果右側對齊。"
-  },
-  "settings.display.sidebar.right-aligned-filters-sidebar.title": {
-    "message": "搜尋頁面右側篩選側邊欄"
-  },
-  "settings.display.theme.description": {
-    "message": "請為這部裝置選擇你偏好的色彩主題。"
-  },
-  "settings.display.theme.title": {
-    "message": "色彩主題"
-  },
   "settings.head-title": {
     "message": "顯示設定"
   },
diff --git a/apps/frontend/src/pages/discover/[type]/index.vue b/apps/frontend/src/pages/discover/[type]/index.vue
index d484a89577..78cd909fec 100644
--- a/apps/frontend/src/pages/discover/[type]/index.vue
+++ b/apps/frontend/src/pages/discover/[type]/index.vue
@@ -21,6 +21,7 @@ import {
 	defineMessages,
 	formatProjectTypeSentence,
 	injectModrinthClient,
+	injectUserPreferences,
 	PROJECT_DEP_MARKER_QUERY,
 	provideBrowseManager,
 	SelectedProjectsFloatingBar,
@@ -53,6 +54,7 @@ const debug = useDebugLogger('Discover')
 const { updateDiscoverFilterContext } = useCdnDownloadContext()
 
 const client = injectModrinthClient()
+const { updatePreferences } = injectUserPreferences()
 const queryClient = useQueryClient()
 
 const filtersMenuOpen = ref(false)
@@ -131,6 +133,17 @@ const resultsDisplayMode = computed<DisplayMode>(() =>
 		: 'list',
 )
 
+const layoutPreferenceKeys = {
+	mod: 'mods',
+	plugin: 'plugins',
+	datapack: 'datapacks',
+	shader: 'shaders',
+	resourcepack: 'resourcepacks',
+	modpack: 'modpacks',
+	server: 'servers',
+	user: 'users',
+} as const satisfies Partial<Record<DisplayLocation, keyof Labrinth.Users.v3.LayoutPreferences>>
+
 const maxResultsForView = ref<Record<DisplayMode, number[]>>({
 	list: [5, 10, 15, 20, 50, 100],
 	grid: [6, 12, 18, 24, 48, 96],
@@ -143,10 +156,21 @@ const currentMaxResultsOptions = computed(
 
 function cycleSearchDisplayMode() {
 	if (!resultsDisplayLocation.value) return
-	cosmetics.value.searchDisplayMode[resultsDisplayLocation.value] = cycleValue(
+	const displayMode = cycleValue(
 		cosmetics.value.searchDisplayMode[resultsDisplayLocation.value],
 		tags.value.projectViewModes.filter((x) => x !== 'grid'),
 	)
+	cosmetics.value.searchDisplayMode[resultsDisplayLocation.value] = displayMode
+
+	const preferenceKey =
+		layoutPreferenceKeys[resultsDisplayLocation.value as keyof typeof layoutPreferenceKeys]
+	if (!preferenceKey) return
+
+	void updatePreferences({
+		layouts: {
+			[preferenceKey]: displayMode === 'list' ? 'rows' : 'grid',
+		} as Partial<Labrinth.Users.v3.LayoutPreferences>,
+	}).catch(() => undefined)
 }
 
 const onboardingModalRef = ref<ServerInstallModalHandle | null>(null)
diff --git a/apps/frontend/src/pages/settings/index.vue b/apps/frontend/src/pages/settings/index.vue
index b11e4edb96..e2e4b2a24c 100644
--- a/apps/frontend/src/pages/settings/index.vue
+++ b/apps/frontend/src/pages/settings/index.vue
@@ -18,197 +18,47 @@
 			</template>
 		</Admonition>
 		<section class="universal-card">
-			<h2 class="text-2xl">{{ formatMessage(colorTheme.title) }}</h2>
-			<p>{{ formatMessage(colorTheme.description) }}</p>
-			<ThemeSelector
-				:update-color-theme="updateColorTheme"
-				:current-theme="theme.preferred"
-				:theme-options="themeOptions"
-				:system-theme-color="systemTheme"
-			/>
-		</section>
-		<section class="universal-card">
-			<h2 class="text-2xl">{{ formatMessage(projectListLayouts.title) }}</h2>
-			<p class="mb-4">{{ formatMessage(projectListLayouts.description) }}</p>
-			<div class="project-lists">
-				<div v-for="projectType in listTypes" :key="projectType.id + '-project-list-layouts'">
-					<div class="label">
-						<div class="label__title">
-							{{
-								projectListLayouts[projectType.id]
-									? formatMessage(projectListLayouts[projectType.id])
-									: projectType.id
-							}}
-						</div>
-					</div>
-					<div class="project-list-layouts">
-						<button
-							type="button"
-							class="flex !w-full cursor-pointer flex-col overflow-hidden rounded-[var(--radius-md)] border border-solid border-divider bg-button-bg p-0 text-left text-primary outline-2 outline-transparent transition-[filter,transform] hover:brightness-[0.85] focus-visible:ring-4 focus-visible:ring-brand-shadow active:scale-[0.97] active:brightness-[0.8] [&_.example-card]:m-0 [&_.example-card]:min-h-0 [&_.example-card]:border-2 [&_.example-card]:border-solid [&_.example-card]:border-transparent [&_.example-card]:p-4 [&_.example-card]:outline-2 [&_.example-card]:outline-transparent"
-							:class="{
-								'!text-contrast [&_.example-card]:!border-brand [&_.example-card]:!bg-brand-highlight [&_.radio]:text-brand':
-									cosmetics.searchDisplayMode[projectType.id] === 'list',
-							}"
-							@click="() => (cosmetics.searchDisplayMode[projectType.id] = 'list')"
-						>
-							<div
-								class="preview flex w-full items-center justify-center bg-bg p-6 outline-2 outline-transparent"
-							>
-								<div class="layout-list-mode">
-									<div class="example-card card"></div>
-									<div class="example-card card"></div>
-									<div class="example-card card"></div>
-									<div class="example-card card"></div>
-								</div>
-							</div>
-							<div
-								class="label flex grow items-center px-[var(--gap-lg)] py-[var(--gap-md)] text-left"
-							>
-								<RadioButtonCheckedIcon
-									v-if="cosmetics.searchDisplayMode[projectType.id] === 'list'"
-									class="radio mr-2 shrink-0"
-								/>
-								<RadioButtonIcon v-else class="radio mr-2 shrink-0" />
-								{{ formatMessage(layoutMode.rows) }}
-							</div>
-						</button>
-						<button
-							type="button"
-							class="flex !w-full cursor-pointer flex-col overflow-hidden rounded-[var(--radius-md)] border border-solid border-divider bg-button-bg p-0 text-left text-primary outline-2 outline-transparent transition-[filter,transform] hover:brightness-[0.85] focus-visible:ring-4 focus-visible:ring-brand-shadow active:scale-[0.97] active:brightness-[0.8] [&_.example-card]:m-0 [&_.example-card]:min-h-0 [&_.example-card]:border-2 [&_.example-card]:border-solid [&_.example-card]:border-transparent [&_.example-card]:p-4 [&_.example-card]:outline-2 [&_.example-card]:outline-transparent"
-							:class="{
-								'!text-contrast [&_.example-card]:!border-brand [&_.example-card]:!bg-brand-highlight [&_.radio]:text-brand':
-									cosmetics.searchDisplayMode[projectType.id] === 'gallery' ||
-									cosmetics.searchDisplayMode[projectType.id] === 'grid',
-							}"
-							@click="() => (cosmetics.searchDisplayMode[projectType.id] = 'grid')"
-						>
-							<div
-								class="preview flex w-full items-center justify-center bg-bg p-6 outline-2 outline-transparent"
-							>
-								<div class="layout-gallery-mode">
-									<div class="example-card card"></div>
-									<div class="example-card card"></div>
-									<div class="example-card card"></div>
-									<div class="example-card card"></div>
-								</div>
-							</div>
-							<div
-								class="label flex grow items-center px-[var(--gap-lg)] py-[var(--gap-md)] text-left"
-							>
-								<RadioButtonCheckedIcon
-									v-if="
-										cosmetics.searchDisplayMode[projectType.id] === 'gallery' ||
-										cosmetics.searchDisplayMode[projectType.id] === 'grid'
-									"
-									class="radio mr-2 shrink-0"
-								/>
-								<RadioButtonIcon v-else class="radio mr-2 shrink-0" />
-								{{ formatMessage(layoutMode.grid) }}
-							</div>
-						</button>
-					</div>
-				</div>
-			</div>
-		</section>
-		<section class="universal-card">
-			<h2 class="text-2xl">{{ formatMessage(toggleFeatures.title) }}</h2>
-			<p class="mb-4">{{ formatMessage(toggleFeatures.description) }}</p>
-			<div class="flex flex-col gap-4">
-				<div class="flex flex-row flex-wrap items-center justify-between gap-2">
-					<label for="advanced-rendering" class="flex-1">
-						<span class="block font-semibold text-contrast">
-							{{ formatMessage(toggleFeatures.advancedRenderingTitle) }}
-						</span>
-						<span class="text-secondary">
-							{{ formatMessage(toggleFeatures.advancedRenderingDescription) }}
-						</span>
-					</label>
-					<Toggle id="advanced-rendering" v-model="cosmetics.advancedRendering" class="shrink-0" />
-				</div>
-				<div class="flex flex-row flex-wrap items-center justify-between gap-2">
-					<label for="external-links-new-tab" class="flex-1">
-						<span class="block font-semibold text-contrast">
-							{{ formatMessage(toggleFeatures.externalLinksNewTabTitle) }}
-						</span>
-						<span class="text-secondary">
-							{{ formatMessage(toggleFeatures.externalLinksNewTabDescription) }}
-						</span>
-					</label>
-					<Toggle
-						id="external-links-new-tab"
-						v-model="cosmetics.externalLinksNewTab"
-						class="shrink-0"
-					/>
-				</div>
-				<div v-if="false" class="flex flex-row flex-wrap items-center justify-between gap-2">
-					<label for="modrinth-app-promos" class="flex-1">
-						<span class="block font-semibold text-contrast">
-							{{ formatMessage(toggleFeatures.hideModrinthAppPromosTitle) }}
-						</span>
-						<span class="text-secondary">
-							{{ formatMessage(toggleFeatures.hideModrinthAppPromosDescription) }}
-						</span>
-					</label>
-					<Toggle
-						id="modrinth-app-promos"
-						v-model="cosmetics.hideModrinthAppPromos"
-						class="shrink-0"
-					/>
-				</div>
-				<div class="flex flex-row flex-wrap items-center justify-between gap-2">
-					<label for="search-layout-toggle" class="flex-1">
-						<span class="block font-semibold text-contrast">
-							{{ formatMessage(toggleFeatures.rightAlignedFiltersSidebarTitle) }}
-						</span>
-						<span class="text-secondary">
-							{{ formatMessage(toggleFeatures.rightAlignedFiltersSidebarDescription) }}
-						</span>
-					</label>
-					<Toggle
-						id="search-layout-toggle"
-						v-model="cosmetics.rightSearchLayout"
-						class="shrink-0"
-					/>
-				</div>
-				<div class="flex flex-row flex-wrap items-center justify-between gap-2">
-					<label for="project-layout-toggle" class="">
-						<span class="block font-semibold text-contrast">
-							{{ formatMessage(toggleFeatures.leftAlignedContentSidebarTitle) }}
-						</span>
-						<span class="text-secondary">
-							{{ formatMessage(toggleFeatures.leftAlignedContentSidebarDescription) }}
-						</span>
-					</label>
-					<Toggle
-						id="project-layout-toggle"
-						v-model="cosmetics.leftContentLayout"
-						class="shrink-0"
-					/>
-				</div>
-			</div>
+			<AppearanceSettingsLayout />
 		</section>
+		<UnsavedChangesPopup
+			:original="saved"
+			:modified="changes"
+			:saving="saving"
+			@reset="reset"
+			@save="saveAppearanceSettings"
+		/>
 	</div>
 </template>
 
 <script setup lang="ts">
-import { CodeIcon, RadioButtonCheckedIcon, RadioButtonIcon } from '@modrinth/assets'
+import type { Labrinth } from '@modrinth/api-client'
+import { CodeIcon } from '@modrinth/assets'
 import {
 	Admonition,
+	AppearanceSettingsLayout,
 	Button,
 	defineMessages,
+	injectAuth,
 	injectNotificationManager,
+	injectUserPreferences,
 	IntlFormatted,
+	isProjectDisplayLocation,
 	normalizeChildren,
-	ThemeSelector,
-	Toggle,
+	type ProjectDisplayLocation,
+	type ProjectLayout,
+	type ProjectLayoutSetting,
+	provideAppearanceSettings,
+	type SidebarPreferences,
+	UnsavedChangesPopup,
+	useSavable,
 	useVIntl,
 } from '@modrinth/ui'
-import { formatProjectType } from '@modrinth/utils'
 
-import type { DisplayLocation } from '~/plugins/cosmetics'
 import { isDarkTheme, type Theme } from '~/plugins/theme/index.ts'
 
 const { addNotification } = injectNotificationManager()
+const auth = injectAuth()
+const { updatePreferences } = injectUserPreferences()
 const { formatMessage } = useVIntl()
 
 const messages = defineMessages({
@@ -234,21 +84,6 @@ useHead({
 	title: () => `${formatMessage(messages.headTitle)} - Modrinth`,
 })
 
-const layoutMode = defineMessages({
-	rows: {
-		id: 'settings.display.project-list-layouts.mode.rows',
-		defaultMessage: 'Rows',
-	},
-	grid: {
-		id: 'settings.display.project-list-layouts.mode.grid',
-		defaultMessage: 'Grid',
-	},
-	gallery: {
-		id: 'settings.display.project-list-layouts.mode.gallery',
-		defaultMessage: 'Gallery',
-	},
-})
-
 const notifications = defineMessages({
 	developerModeDeactivatedTitle: {
 		id: 'settings.display.notification.developer-mode-deactivated.title',
@@ -260,123 +95,9 @@ const notifications = defineMessages({
 	},
 })
 
-const colorTheme = defineMessages({
-	title: {
-		id: 'settings.display.theme.title',
-		defaultMessage: 'Color theme',
-	},
-	description: {
-		id: 'settings.display.theme.description',
-		defaultMessage: 'Select your preferred color theme for Modrinth on this device.',
-	},
-})
-
-const projectListLayouts = defineMessages({
-	title: {
-		id: 'settings.display.project-list-layouts.title',
-		defaultMessage: 'Project list layouts',
-	},
-	description: {
-		id: 'settings.display.project-list-layouts.description',
-		defaultMessage:
-			'Select your preferred layout for each page that displays project lists on this device.',
-	},
-	mod: {
-		id: 'settings.display.project-list-layouts.mod',
-		defaultMessage: 'Mods page',
-	},
-	plugin: {
-		id: 'settings.display.project-list-layouts.plugin',
-		defaultMessage: 'Plugins page',
-	},
-	datapack: {
-		id: 'settings.display.project-list-layouts.datapack',
-		defaultMessage: 'Data Packs page',
-	},
-	shader: {
-		id: 'settings.display.project-list-layouts.shader',
-		defaultMessage: 'Shaders page',
-	},
-	resourcepack: {
-		id: 'settings.display.project-list-layouts.resourcepack',
-		defaultMessage: 'Resource Packs page',
-	},
-	modpack: {
-		id: 'settings.display.project-list-layouts.modpack',
-		defaultMessage: 'Modpacks page',
-	},
-	server: {
-		id: 'settings.display.project-list-layouts.server',
-		defaultMessage: 'Servers page',
-	},
-	user: {
-		id: 'settings.display.project-list-layouts.user',
-		defaultMessage: 'User profile pages',
-	},
-	collection: {
-		id: 'settings.display.project-list.layouts.collection',
-		defaultMessage: 'Collection',
-	},
-})
-
-const toggleFeatures = defineMessages({
-	title: {
-		id: 'settings.display.flags.title',
-		defaultMessage: 'Toggle features',
-	},
-	description: {
-		id: 'settings.display.flags.description',
-		defaultMessage: 'Enable or disable certain features on this device.',
-	},
-	advancedRenderingTitle: {
-		id: 'settings.display.sidebar.advanced-rendering.title',
-		defaultMessage: 'Advanced rendering',
-	},
-	advancedRenderingDescription: {
-		id: 'settings.display.sidebar.advanced-rendering.description',
-		defaultMessage:
-			'Enables advanced rendering such as blur effects that may cause performance issues without hardware-accelerated rendering.',
-	},
-	externalLinksNewTabTitle: {
-		id: 'settings.display.sidebar.external-links-new-tab.title',
-		defaultMessage: 'Open external links in new tab',
-	},
-	externalLinksNewTabDescription: {
-		id: 'settings.display.sidebar.external-links-new-tab.description',
-		defaultMessage:
-			'Make links which go outside of Modrinth open in a new tab. No matter this setting, links on the same domain and in Markdown descriptions will open in the same tab, and links on ads and edit pages will open in a new tab.',
-	},
-	hideModrinthAppPromosTitle: {
-		id: 'settings.display.sidebar.hide-app-promos.title',
-		defaultMessage: 'Hide Modrinth App promotions',
-	},
-	hideModrinthAppPromosDescription: {
-		id: 'settings.display.sidebar.hide-app-promos.description',
-		defaultMessage:
-			'Hides the "Get Modrinth App" buttons from primary navigation. The Modrinth App page can still be found on the landing page or in the footer.',
-	},
-	rightAlignedFiltersSidebarTitle: {
-		id: 'settings.display.sidebar.right-aligned-filters-sidebar.title',
-		defaultMessage: 'Right-aligned filters sidebar on search pages',
-	},
-	rightAlignedFiltersSidebarDescription: {
-		id: 'settings.display.sidebar.right-aligned-filters-sidebar.description',
-		defaultMessage: 'Aligns the filters sidebar to the right of the search results.',
-	},
-	leftAlignedContentSidebarTitle: {
-		id: 'settings.display.sidebar.left-aligned-content-sidebar.title',
-		defaultMessage: 'Left-aligned sidebar on content pages',
-	},
-	leftAlignedContentSidebarDescription: {
-		id: 'settings.display.sidebar.right-aligned-content-sidebar.description',
-		defaultMessage: "Aligns the sidebar to the left of the page's content.",
-	},
-})
-
 const cosmetics = useCosmetics()
 const flags = useFeatureFlags()
 const tags = useGeneratedState()
-
 const theme = useTheme()
 
 // On the server the value of native theme can be 'unknown'. To hydrate
@@ -394,27 +115,205 @@ const systemTheme = useMountedValue((mounted): Theme => {
 	return systemTheme_ === 'light' ? theme.preferences.light : theme.preferences.dark
 })
 
+const projectLayouts = computed<ProjectLayoutSetting[]>(() => {
+	const layouts = tags.value.projectTypes
+		.map(({ id }) => id)
+		.filter(isProjectDisplayLocation)
+		.map(
+			(type): ProjectLayoutSetting => ({
+				type,
+				layout: cosmetics.value.searchDisplayMode[type] === 'list' ? 'rows' : 'grid',
+			}),
+		)
+
+	layouts.push({
+		type: 'user',
+		layout: cosmetics.value.searchDisplayMode.user === 'list' ? 'rows' : 'grid',
+	})
+
+	return layouts
+})
+
+const sidebarPreferences = computed<SidebarPreferences>(() => ({
+	right_aligned_search: cosmetics.value.rightSearchLayout,
+	left_aligned_content: cosmetics.value.leftContentLayout,
+}))
+
+type AppearanceSettingsState = {
+	theme: Theme | 'system'
+	syncAcrossDevices: boolean
+	advancedRendering: boolean
+	projectLayouts: ProjectLayoutSetting[]
+	externalLinksNewTab: boolean
+	sidebarPreferences: SidebarPreferences
+}
+
+const layoutPreferenceKeys: Record<
+	ProjectDisplayLocation,
+	keyof Labrinth.Users.v3.LayoutPreferences
+> = {
+	mod: 'mods',
+	plugin: 'plugins',
+	datapack: 'datapacks',
+	shader: 'shaders',
+	resourcepack: 'resourcepacks',
+	modpack: 'modpacks',
+	server: 'servers',
+	user: 'users',
+}
+
+function getAppearanceSettingsState(): AppearanceSettingsState {
+	return {
+		theme: theme.preferred,
+		syncAcrossDevices: theme.syncAcrossDevices,
+		advancedRendering: cosmetics.value.advancedRendering,
+		projectLayouts: projectLayouts.value,
+		externalLinksNewTab: cosmetics.value.externalLinksNewTab,
+		sidebarPreferences: sidebarPreferences.value,
+	}
+}
+
+const { saved, current, changes, saving, reset, save } = useSavable(
+	getAppearanceSettingsState,
+	async (appearanceChanges) => {
+		const value = current.value
+		const preferencesPatch: Labrinth.Users.v3.PartialUserPreferences = {}
+
+		if (
+			value.syncAcrossDevices &&
+			auth.user.value &&
+			(appearanceChanges.theme !== undefined || appearanceChanges.syncAcrossDevices !== undefined)
+		) {
+			preferencesPatch.appearance =
+				value.theme === 'system' ? { auto: true } : { auto: false, theme: value.theme }
+		}
+
+		if (appearanceChanges.projectLayouts !== undefined) {
+			const layouts: Partial<Labrinth.Users.v3.LayoutPreferences> = {}
+			for (const setting of value.projectLayouts) {
+				layouts[layoutPreferenceKeys[setting.type]] = setting.layout
+			}
+			preferencesPatch.layouts = layouts
+		}
+
+		if (appearanceChanges.sidebarPreferences !== undefined) {
+			preferencesPatch.sidebars = value.sidebarPreferences
+		}
+
+		if (Object.keys(preferencesPatch).length > 0) {
+			await updatePreferences(preferencesPatch)
+		}
+
+		if (value.theme !== 'system') {
+			if (isDarkTheme(value.theme)) {
+				theme.preferences.dark = value.theme
+			} else {
+				theme.preferences.light = value.theme
+			}
+		}
+
+		theme.preferred = value.theme
+		theme.syncAcrossDevices = value.syncAcrossDevices
+		cosmetics.value.advancedRendering = value.advancedRendering
+		cosmetics.value.externalLinksNewTab = value.externalLinksNewTab
+		cosmetics.value.rightSearchLayout = value.sidebarPreferences.right_aligned_search
+		cosmetics.value.leftContentLayout = value.sidebarPreferences.left_aligned_content
+		for (const setting of value.projectLayouts) {
+			cosmetics.value.searchDisplayMode[setting.type] = setting.layout === 'rows' ? 'list' : 'grid'
+		}
+	},
+)
+
 const themeOptions = computed(() => {
 	const options: ('system' | Theme)[] = ['system', 'light', 'dark', 'oled']
-	if (flags.value.developerMode || theme.preferred === 'retro') {
+	if (flags.value.developerMode || current.value.theme === 'retro') {
 		options.push('retro')
 	}
 	return options
 })
 
-function updateColorTheme(value: Theme | 'system') {
-	if (value !== 'system') {
-		if (isDarkTheme(value)) {
-			theme.preferences.dark = value
-		} else {
-			theme.preferences.light = value
-		}
-	}
-
-	theme.preferred = value
+function setTheme(value: Theme | 'system'): void {
+	current.value.theme = value
 }
 
-function disableDeveloperMode() {
+function setSyncAcrossDevices(value: boolean): void {
+	current.value.syncAcrossDevices = value
+}
+
+function setAdvancedRendering(value: boolean): void {
+	current.value.advancedRendering = value
+}
+
+function setProjectLayout(type: ProjectDisplayLocation, layout: ProjectLayout): void {
+	current.value.projectLayouts = current.value.projectLayouts.map((setting) =>
+		setting.type === type ? { ...setting, layout } : setting,
+	)
+}
+
+function setExternalLinksNewTab(value: boolean): void {
+	current.value.externalLinksNewTab = value
+}
+
+function setSidebarPreference(key: keyof SidebarPreferences, value: boolean): void {
+	current.value.sidebarPreferences = {
+		...current.value.sidebarPreferences,
+		[key]: value,
+	}
+}
+
+watch(
+	[() => current.value.theme, () => saved.value.theme],
+	([selectedTheme, savedTheme]) => {
+		theme.preview = selectedTheme === savedTheme ? null : selectedTheme
+	},
+	{ immediate: true },
+)
+
+onBeforeUnmount(() => {
+	theme.preview = null
+})
+
+async function saveAppearanceSettings(): Promise<void> {
+	try {
+		await save()
+	} catch {
+		return
+	}
+}
+
+provideAppearanceSettings({
+	deferPersistence: true,
+	theme: {
+		current: computed(() => current.value.theme),
+		options: themeOptions,
+		system: systemTheme,
+		set: setTheme,
+		syncAcrossDevices: {
+			value: computed(() => current.value.syncAcrossDevices),
+			set: setSyncAcrossDevices,
+		},
+		syncDisabled: computed(() => !auth.user.value),
+	},
+	advancedRendering: {
+		value: computed(() => current.value.advancedRendering),
+		set: setAdvancedRendering,
+	},
+	projectLayouts: {
+		value: computed(() => current.value.projectLayouts),
+		set: setProjectLayout,
+	},
+	externalLinksNewTab: {
+		value: computed(() => current.value.externalLinksNewTab),
+		set: setExternalLinksNewTab,
+	},
+	sidebarPreferences: {
+		value: computed(() => current.value.sidebarPreferences),
+		set: setSidebarPreference,
+	},
+	updatePreferences,
+})
+
+function disableDeveloperMode(): void {
 	flags.value.developerMode = !flags.value.developerMode
 	saveFeatureFlags()
 	addNotification({
@@ -423,80 +322,4 @@ function disableDeveloperMode() {
 		type: 'success',
 	})
 }
-
-const listTypes = computed(() => {
-	const types = tags.value.projectTypes.map((type) => {
-		return {
-			id: type.id as DisplayLocation,
-			name: formatProjectType(type.id) + 's',
-			display: 'the ' + formatProjectType(type.id).toLowerCase() + 's search page',
-		}
-	})
-
-	types.push({
-		id: 'user' as DisplayLocation,
-		name: 'User profiles',
-		display: 'user pages',
-	})
-
-	return types
-})
 </script>
-<style scoped lang="scss">
-.project-lists {
-	display: flex;
-	flex-direction: column;
-	gap: var(--gap-md);
-
-	> :first-child .label__title {
-		margin-top: 0;
-	}
-
-	.preview {
-		--_layout-width: 7rem;
-		--_layout-height: 4.5rem;
-		--_layout-gap: 0.25rem;
-
-		.example-card {
-			border-radius: 0.5rem;
-			width: var(--_layout-width);
-			height: calc((var(--_layout-height) - 3 * var(--_layout-gap)) / 4);
-			padding: 0;
-		}
-
-		.layout-list-mode {
-			display: grid;
-			grid-template-columns: 1fr;
-			gap: var(--_layout-gap);
-		}
-
-		.layout-grid-mode {
-			display: grid;
-			grid-template-columns: 1fr 1fr 1fr;
-			gap: var(--_layout-gap);
-
-			.example-card {
-				width: calc((var(--_layout-width) - 2 * var(--_layout-gap)) / 3);
-				height: calc((var(--_layout-height) - var(--_layout-gap)) / 2);
-			}
-		}
-
-		.layout-gallery-mode {
-			display: grid;
-			grid-template-columns: 1fr 1fr;
-			gap: var(--_layout-gap);
-
-			.example-card {
-				width: calc((var(--_layout-width) - var(--_layout-gap)) / 2);
-				height: calc((var(--_layout-height) - var(--_layout-gap)) / 2);
-			}
-		}
-	}
-}
-
-.project-list-layouts {
-	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
-	gap: var(--gap-lg);
-}
-</style>
diff --git a/apps/frontend/src/pages/settings/language.vue b/apps/frontend/src/pages/settings/language.vue
index 612b76f86c..f2c353f31d 100644
--- a/apps/frontend/src/pages/settings/language.vue
+++ b/apps/frontend/src/pages/settings/language.vue
@@ -1,80 +1,31 @@
+<template>
+	<div>
+		<section class="universal-card">
+			<LanguageSettings ref="languageSettings" product="website" />
+		</section>
+		<UnsavedChangesPopup
+			:original="languageSettings?.originalState ?? emptyLanguageState"
+			:modified="languageSettings?.modifiedState ?? emptyLanguageState"
+			:saving="languageSettings?.saving ?? false"
+			@reset="languageSettings?.reset()"
+			@save="languageSettings?.save()"
+		/>
+	</div>
+</template>
+
 <script setup lang="ts">
 import {
-	Admonition,
 	commonSettingsMessages,
-	injectI18n,
-	IntlFormatted,
-	LanguageSelector,
-	languageSelectorMessages,
-	LOCALES,
+	LanguageSettings,
+	UnsavedChangesPopup,
 	useVIntl,
 } from '@modrinth/ui'
 
 const { formatMessage } = useVIntl()
-const { locale, setLocale } = injectI18n()
+const languageSettings = ref<InstanceType<typeof LanguageSettings> | null>(null)
+const emptyLanguageState = { locale: '' }
 
-const platform = computed(() => formatMessage(languageSelectorMessages.platformSite))
-
-const $isChanging = ref(false)
-
-async function onLocaleChange(newLocale: string) {
-	if (locale.value === newLocale) return
-
-	$isChanging.value = true
-	try {
-		await setLocale(newLocale)
-	} finally {
-		$isChanging.value = false
-	}
-}
+useHead({
+	title: () => `${formatMessage(commonSettingsMessages.language)} - Modrinth`,
+})
 </script>
-
-<template>
-	<div>
-		<section class="universal-card">
-			<h2 class="text-2xl">{{ formatMessage(commonSettingsMessages.language) }}</h2>
-
-			<Admonition type="warning">
-				{{ formatMessage(languageSelectorMessages.languageWarning, { platform }) }}
-			</Admonition>
-
-			<div class="card-description mt-4">
-				<IntlFormatted
-					:message-id="languageSelectorMessages.languagesDescription"
-					:values="{ platform }"
-				>
-					<template #~crowdin-link="{ children }">
-						<a href="https://translate.modrinth.com">
-							<component :is="() => children" />
-						</a>
-					</template>
-				</IntlFormatted>
-			</div>
-
-			<LanguageSelector
-				:current-locale="locale"
-				:locales="LOCALES"
-				:on-locale-change="onLocaleChange"
-				:is-changing="$isChanging"
-			/>
-		</section>
-	</div>
-</template>
-
-<style scoped lang="scss">
-.card-description {
-	margin-bottom: calc(var(--spacing-card-sm) + var(--spacing-card-md));
-
-	a {
-		color: var(--color-link);
-
-		&:hover {
-			color: var(--color-link-hover);
-		}
-
-		&:active {
-			color: var(--color-link-active);
-		}
-	}
-}
-</style>
diff --git a/apps/frontend/src/pages/settings/social.vue b/apps/frontend/src/pages/settings/social.vue
index ade20c47ac..256448d006 100644
--- a/apps/frontend/src/pages/settings/social.vue
+++ b/apps/frontend/src/pages/settings/social.vue
@@ -1,10 +1,18 @@
 <template>
 	<section v-if="auth.user" class="universal-card">
 		<AccountSocialSettings
+			ref="socialSettings"
 			:get-blocked-users="getBlockedUsers"
 			:get-users="getUsers"
 			:unblock-user="unblockUser"
 		/>
+		<UnsavedChangesPopup
+			:original="socialSettings?.originalState ?? emptySocialState"
+			:modified="socialSettings?.modifiedState ?? emptySocialState"
+			:saving="socialSettings?.saving ?? false"
+			@reset="socialSettings?.reset()"
+			@save="socialSettings?.save()"
+		/>
 	</section>
 </template>
 
@@ -14,6 +22,7 @@ import {
 	AccountSocialSettings,
 	commonSettingsMessages,
 	injectModrinthClient,
+	UnsavedChangesPopup,
 	useVIntl,
 } from '@modrinth/ui'
 
@@ -24,6 +33,12 @@ definePageMeta({
 const auth = await useAuth()
 const client = injectModrinthClient()
 const { formatMessage } = useVIntl()
+const socialSettings = ref<InstanceType<typeof AccountSocialSettings> | null>(null)
+const emptySocialState = {
+	friendPrivacy: 'everyone',
+	sharedInstancesPrivacy: 'everyone',
+	hostingAccessPrivacy: 'everyone',
+}
 
 function getBlockedUsers(): Promise<Labrinth.BlockedUsers.v3.BlockedUserId[]> {
 	return client.labrinth.blocked_users_v3.list()
diff --git a/apps/frontend/src/plugins/cosmetics.ts b/apps/frontend/src/plugins/cosmetics.ts
index 7d821eae7f..fded0aa3aa 100644
--- a/apps/frontend/src/plugins/cosmetics.ts
+++ b/apps/frontend/src/plugins/cosmetics.ts
@@ -9,6 +9,7 @@ export type DisplayLocation =
 	| 'modpack'
 	| 'shader'
 	| 'datapack'
+	| 'server'
 	| 'user'
 	| 'collection'
 
diff --git a/apps/frontend/src/plugins/i18n.ts b/apps/frontend/src/plugins/i18n.ts
index e1f3dc7d91..e6e8fa0b0e 100644
--- a/apps/frontend/src/plugins/i18n.ts
+++ b/apps/frontend/src/plugins/i18n.ts
@@ -178,7 +178,10 @@ export default defineNuxtPlugin({
 			return msg
 		}
 
-		async function setLocale(newLocale: string): Promise<void> {
+		async function setLocale(
+			newLocale: string,
+			{ persist = true }: { persist?: boolean } = {},
+		): Promise<void> {
 			debug('setLocale: called', { newLocale, currentLocale: locale.value })
 
 			if (!LOCALES.some((l) => l.code === newLocale)) {
@@ -197,7 +200,9 @@ export default defineNuxtPlugin({
 			})
 
 			locale.value = newLocale
-			useCookie('locale', { maxAge: 31536000, path: '/' }).value = newLocale
+			if (persist) {
+				useCookie('locale', { maxAge: 31536000, path: '/' }).value = newLocale
+			}
 		}
 
 		// Detect initial locale (cookie > Accept-Language > default)
diff --git a/apps/frontend/src/plugins/theme/index.ts b/apps/frontend/src/plugins/theme/index.ts
index 3fb8bf00e9..72c52b3b7f 100644
--- a/apps/frontend/src/plugins/theme/index.ts
+++ b/apps/frontend/src/plugins/theme/index.ts
@@ -3,7 +3,7 @@ import { ref } from 'vue'
 import { useNativeTheme } from './native-theme.ts'
 import { usePreferredThemes } from './preferred-theme.ts'
 import { useThemeSettings } from './theme-settings.ts'
-import { isDarkTheme } from './themes.ts'
+import { isDarkTheme, type Theme } from './themes.ts'
 
 export * from './themes.ts'
 
@@ -33,8 +33,13 @@ export default defineNuxtPlugin({
 		}
 
 		const $settings = useThemeSettings(() => getPreferredNativeTheme())
+		const $preview = ref<Theme | 'system' | null>(null)
+		const $active = computed(() => {
+			if ($preview.value === null) return $settings.active
+			return $preview.value === 'system' ? getPreferredNativeTheme() : $preview.value
+		})
 
-		useHead({ htmlAttrs: { class: () => [`${$settings.active}-mode`] } })
+		useHead({ htmlAttrs: { class: () => [`${$active.value}-mode`] } })
 
 		function syncTheme() {
 			$settings.active =
@@ -74,6 +79,8 @@ export default defineNuxtPlugin({
 			provide: {
 				theme: reactive({
 					...toRefs($settings),
+					active: $active,
+					preview: $preview,
 					/**
 					 * Preferred themes for each mode.
 					 */
diff --git a/apps/frontend/src/plugins/theme/theme-settings.ts b/apps/frontend/src/plugins/theme/theme-settings.ts
index b8a632288a..a9a5fb9d88 100644
--- a/apps/frontend/src/plugins/theme/theme-settings.ts
+++ b/apps/frontend/src/plugins/theme/theme-settings.ts
@@ -3,6 +3,7 @@ import type { Theme } from './themes.ts'
 interface ThemeSettings {
 	preference: Theme | 'system'
 	value: Theme
+	syncAcrossDevices?: boolean
 }
 
 export function useThemeSettings(getDefaultTheme?: () => Theme) {
@@ -22,6 +23,7 @@ export function useThemeSettings(getDefaultTheme?: () => Theme) {
 		$settings.value = {
 			preference: 'system',
 			value: getDefaultTheme(),
+			syncAcrossDevices: true,
 		}
 	}
 
@@ -35,5 +37,10 @@ export function useThemeSettings(getDefaultTheme?: () => Theme) {
 			get: () => $settings.value.value ?? getDefaultTheme(),
 			set: (value) => ($settings.value.value = value),
 		}),
+
+		syncAcrossDevices: computed({
+			get: () => $settings.value.syncAcrossDevices ?? true,
+			set: (value) => ($settings.value.syncAcrossDevices = value),
+		}),
 	})
 }
diff --git a/apps/frontend/src/providers/setup.ts b/apps/frontend/src/providers/setup.ts
index fe4ba192fd..eb969312dc 100644
--- a/apps/frontend/src/providers/setup.ts
+++ b/apps/frontend/src/providers/setup.ts
@@ -1,4 +1,4 @@
-import { provideNotificationManager } from '@modrinth/ui'
+import { provideNotificationManager, setupUserPreferencesProvider } from '@modrinth/ui'
 
 import { FrontendNotificationManager } from './frontend-notifications'
 import { setupAuthProvider } from './setup/auth'
@@ -10,13 +10,23 @@ import { setupTagsProvider } from './setup/tags'
 import { setupUserCountryProvider } from './setup/user-country'
 
 export function setupProviders(auth: Awaited<ReturnType<typeof useAuth>>) {
-	provideNotificationManager(new FrontendNotificationManager())
+	const notificationManager = new FrontendNotificationManager()
+	provideNotificationManager(notificationManager)
 
-	setupAuthProvider(auth)
-	setupModrinthClientProvider(auth)
+	const authProvider = setupAuthProvider(auth)
+	const client = setupModrinthClientProvider(auth)
+	const userPreferences = setupUserPreferencesProvider({
+		auth: authProvider,
+		getPreferences: (userId) => client.labrinth.users_v3.getPreferences(userId),
+		patchPreferences: (userId, preferences) =>
+			client.labrinth.users_v3.patchPreferences(userId, preferences),
+		notificationManager,
+	})
 	setupTagsProvider()
 	setupFilePickerProvider()
 	setupPageContextProvider()
 	setupLoadingStateProvider()
 	setupUserCountryProvider()
+
+	return userPreferences
 }
diff --git a/apps/frontend/src/providers/setup/auth.ts b/apps/frontend/src/providers/setup/auth.ts
index f31ddf5ba4..6842215de4 100644
--- a/apps/frontend/src/providers/setup/auth.ts
+++ b/apps/frontend/src/providers/setup/auth.ts
@@ -30,4 +30,5 @@ export function setupAuthProvider(auth: Awaited<ReturnType<typeof useAuth>>) {
 	})
 
 	provideAuth(authProvider)
+	return authProvider
 }
diff --git a/apps/labrinth/src/models/v3/preferences.rs b/apps/labrinth/src/models/v3/preferences.rs
index 1deedfffc2..8db8e69276 100644
--- a/apps/labrinth/src/models/v3/preferences.rs
+++ b/apps/labrinth/src/models/v3/preferences.rs
@@ -7,6 +7,8 @@ pub struct UserPreferences {
     #[component(nested)]
     pub appearance: AppearancePreferences,
     #[component(nested)]
+    pub behavior: BehaviorPreferences,
+    #[component(nested)]
     pub localization: LocalizationPreferences,
     #[component(nested)]
     pub layouts: LayoutPreferences,
@@ -34,6 +36,31 @@ pub struct AppearancePreferences {
     pub theme: Theme,
 }
 
+#[derive(Debug, Serialize, Deserialize, ToSchema, PartialEq, Component)]
+pub struct BehaviorPreferences {
+    pub minimize_app: bool,
+    pub hide_right_sidebar: bool,
+    pub show_jump_in: bool,
+    pub show_play_time: bool,
+    pub hide_nametag: bool,
+    pub warn_on_unknown_modpacks: bool,
+    pub skip_non_essential_warnings: bool,
+}
+
+impl Default for BehaviorPreferences {
+    fn default() -> Self {
+        Self {
+            minimize_app: false,
+            hide_right_sidebar: false,
+            show_jump_in: true,
+            show_play_time: true,
+            hide_nametag: false,
+            warn_on_unknown_modpacks: true,
+            skip_non_essential_warnings: false,
+        }
+    }
+}
+
 #[derive(
     Debug, Serialize, Deserialize, ToSchema, Default, Clone, PartialEq,
 )]
diff --git a/package.json b/package.json
index edebadb426..4e84fe7f1d 100644
--- a/package.json
+++ b/package.json
@@ -3,12 +3,12 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "web:dev": "turbo run dev --filter=@modrinth/frontend",
+    "web:dev": "pnpm i18n:coverage && turbo run dev --filter=@modrinth/frontend",
     "web:build": "turbo run build --filter=@modrinth/frontend",
     "app:dev": "turbo run dev --filter=@modrinth/app",
     "app:build": "turbo run build --filter=@modrinth/app",
     "docs:dev": "turbo run dev --filter=@modrinth/docs",
-    "pages:build": "NITRO_PRESET=cloudflare-pages pnpm --filter frontend run build",
+    "pages:build": "pnpm i18n:coverage && NITRO_PRESET=cloudflare-pages pnpm --filter frontend run build",
     "build": "turbo run build --continue",
     "lint": "turbo run lint lint:ancillary --continue",
     "lint:ancillary": "prettier --check .github *.*",
@@ -21,9 +21,10 @@
     "prepr:frontend:lib": "turbo run prepr --filter=@modrinth/ui --filter=@modrinth/moderation --filter=@modrinth/assets --filter=@modrinth/blog --filter=@modrinth/api-client --filter=@modrinth/utils --filter=@modrinth/tooling-config",
     "prepr:frontend:web": "turbo run prepr --filter=@modrinth/frontend",
     "prepr:frontend:app": "turbo run prepr --filter=@modrinth/app-frontend",
-    "storybook": "pnpm --filter @modrinth/ui storybook",
-    "build-storybook": "pnpm --filter @modrinth/ui build-storybook",
+    "storybook": "pnpm i18n:coverage && pnpm --filter @modrinth/ui storybook",
+    "build-storybook": "pnpm i18n:coverage && pnpm --filter @modrinth/ui build-storybook",
     "icons:add": "pnpm --filter @modrinth/assets icons:add",
+    "i18n:coverage": "node scripts/run.mjs coverage-i18n --write packages/ui/src/layouts/wrapped/settings/language-settings/language-settings-coverage.generated.ts --quiet",
     "changelog:collect": "node scripts/run.mjs collect-changelog",
     "changelog:combine-for-app": "node scripts/run.mjs build-theseus-release-notes",
     "scripts": "node scripts/run.mjs"
diff --git a/packages/api-client/src/modules/labrinth/types.ts b/packages/api-client/src/modules/labrinth/types.ts
index d127526687..285e44f4f4 100644
--- a/packages/api-client/src/modules/labrinth/types.ts
+++ b/packages/api-client/src/modules/labrinth/types.ts
@@ -1710,6 +1710,69 @@ export namespace Labrinth {
 			export type Role = Common.Role
 			export type AuthProvider = Common.AuthProvider
 			export type UserPayoutData = Common.UserPayoutData
+			export type Theme = 'light' | 'dark' | 'oled' | 'retro'
+			export type LayoutOption = 'grid' | 'rows'
+			export type FriendPrivacy = 'none' | 'mutual' | 'everyone'
+			export type InvitePrivacy = 'none' | 'friends' | 'everyone'
+
+			export type AppearancePreferences = {
+				auto: boolean
+				theme: Theme
+			}
+
+			export type BehaviorPreferences = {
+				minimize_app: boolean
+				hide_right_sidebar: boolean
+				show_jump_in: boolean
+				show_play_time: boolean
+				hide_nametag: boolean
+				warn_on_unknown_modpacks: boolean
+				skip_non_essential_warnings: boolean
+			}
+
+			export type LocalizationPreferences = {
+				locale: string
+			}
+
+			export type LayoutPreferences = {
+				mods: LayoutOption
+				plugins: LayoutOption
+				datapacks: LayoutOption
+				shaders: LayoutOption
+				resourcepacks: LayoutOption
+				modpacks: LayoutOption
+				servers: LayoutOption
+				users: LayoutOption
+			}
+
+			export type SidebarPreferences = {
+				right_aligned_search: boolean
+				left_aligned_content: boolean
+			}
+
+			export type SocialPreferences = {
+				friend_privacy: FriendPrivacy
+				shared_instances_privacy: InvitePrivacy
+				hosting_access_privacy: InvitePrivacy
+			}
+
+			export type UserPreferences = {
+				appearance: AppearancePreferences
+				behavior: BehaviorPreferences
+				localization: LocalizationPreferences
+				layouts: LayoutPreferences
+				sidebars: SidebarPreferences
+				social: SocialPreferences
+			}
+
+			export type PartialUserPreferences = {
+				appearance?: Partial<AppearancePreferences>
+				behavior?: Partial<BehaviorPreferences>
+				localization?: Partial<LocalizationPreferences>
+				layouts?: Partial<LayoutPreferences>
+				sidebars?: Partial<SidebarPreferences>
+				social?: Partial<SocialPreferences>
+			}
 
 			export type Pride26CampaignDonation = {
 				last_donated_at: string
diff --git a/packages/api-client/src/modules/labrinth/users/v3.ts b/packages/api-client/src/modules/labrinth/users/v3.ts
index 90dfced927..cc68ebc18f 100644
--- a/packages/api-client/src/modules/labrinth/users/v3.ts
+++ b/packages/api-client/src/modules/labrinth/users/v3.ts
@@ -37,6 +37,43 @@ export class LabrinthUsersV3Module extends AbstractModule {
 		)
 	}
 
+	/**
+	 * Get a user's account preferences. The authenticated user may access their
+	 * own preferences, while moderators may access another user's preferences.
+	 *
+	 * GET /v3/user/{id}/preferences
+	 */
+	public async getPreferences(idOrUsername: string): Promise<Labrinth.Users.v3.UserPreferences> {
+		return this.client.request<Labrinth.Users.v3.UserPreferences>(
+			`/user/${encodeURIComponent(idOrUsername)}/preferences`,
+			{
+				api: 'labrinth',
+				version: 3,
+				method: 'GET',
+			},
+		)
+	}
+
+	/**
+	 * Update a user's account preferences and return the fully resolved result.
+	 *
+	 * PATCH /v3/user/{id}/preferences
+	 */
+	public async patchPreferences(
+		idOrUsername: string,
+		preferences: Labrinth.Users.v3.PartialUserPreferences,
+	): Promise<Labrinth.Users.v3.UserPreferences> {
+		return this.client.request<Labrinth.Users.v3.UserPreferences>(
+			`/user/${encodeURIComponent(idOrUsername)}/preferences`,
+			{
+				api: 'labrinth',
+				version: 3,
+				method: 'PATCH',
+				body: preferences,
+			},
+		)
+	}
+
 	/**
 	 * Search users by username prefix.
 	 *
diff --git a/packages/app-lib/.sqlx/query-6f8b76b839db48539a70664af549c12be71df20b8cf520019413f6ea751cd594.json b/packages/app-lib/.sqlx/query-29df6a29d9221b9bbea45e024fb26f5b6a3155788880369af940fcd268d3cb94.json
similarity index 90%
rename from packages/app-lib/.sqlx/query-6f8b76b839db48539a70664af549c12be71df20b8cf520019413f6ea751cd594.json
rename to packages/app-lib/.sqlx/query-29df6a29d9221b9bbea45e024fb26f5b6a3155788880369af940fcd268d3cb94.json
index 21417b6d56..2b031b4401 100644
--- a/packages/app-lib/.sqlx/query-6f8b76b839db48539a70664af549c12be71df20b8cf520019413f6ea751cd594.json
+++ b/packages/app-lib/.sqlx/query-29df6a29d9221b9bbea45e024fb26f5b6a3155788880369af940fcd268d3cb94.json
@@ -1,6 +1,6 @@
 {
   "db_name": "SQLite",
-  "query": "\n            SELECT\n                max_concurrent_writes, max_concurrent_downloads,\n                theme, locale, default_page, collapsed_navigation, hide_nametag_skins_page, advanced_rendering, native_decorations,\n                discord_rpc, developer_mode, telemetry, personalized_ads,\n                json(extra_launch_args) extra_launch_args, json(custom_env_vars) custom_env_vars,\n                mc_memory_max, mc_force_fullscreen, mc_game_resolution_x, mc_game_resolution_y, hide_on_process_start,\n                hook_pre_launch, hook_wrapper, hook_post_exit,\n                custom_dir, prev_custom_dir, migrated, json(feature_flags) feature_flags, toggle_sidebar,\n                skipped_update, pending_update_toast_for_version, auto_download_updates,\n                version\n            FROM settings\n            ",
+  "query": "\n            SELECT\n                max_concurrent_writes, max_concurrent_downloads,\n                theme, locale, default_page, collapsed_navigation, hide_nametag_skins_page, advanced_rendering, native_decorations,\n                discord_rpc, developer_mode, telemetry, personalized_ads,\n                json(extra_launch_args) extra_launch_args, json(custom_env_vars) custom_env_vars,\n                mc_memory_max, mc_force_fullscreen, mc_game_resolution_x, mc_game_resolution_y, hide_on_process_start,\n                hook_pre_launch, hook_wrapper, hook_post_exit,\n                custom_dir, prev_custom_dir, migrated, json(feature_flags) feature_flags, toggle_sidebar,\n                skipped_update, pending_update_toast_for_version, auto_download_updates,\n                sync_theme_across_devices, sync_behavior_across_devices,\n                version\n            FROM settings\n            ",
   "describe": {
     "columns": [
       {
@@ -159,9 +159,19 @@
         "type_info": "Integer"
       },
       {
-        "name": "version",
+        "name": "sync_theme_across_devices",
         "ordinal": 31,
         "type_info": "Integer"
+      },
+      {
+        "name": "sync_behavior_across_devices",
+        "ordinal": 32,
+        "type_info": "Integer"
+      },
+      {
+        "name": "version",
+        "ordinal": 33,
+        "type_info": "Integer"
       }
     ],
     "parameters": {
@@ -199,8 +209,10 @@
       true,
       true,
       true,
+      false,
+      false,
       false
     ]
   },
-  "hash": "6f8b76b839db48539a70664af549c12be71df20b8cf520019413f6ea751cd594"
+  "hash": "29df6a29d9221b9bbea45e024fb26f5b6a3155788880369af940fcd268d3cb94"
 }
diff --git a/packages/app-lib/.sqlx/query-dfdc99cb5ec60bb08c566920628deec7e741eca9490811ebad6594abe8a6126d.json b/packages/app-lib/.sqlx/query-88c6a22aa112f10dce9d42779f06c723b356263ffc83aabb645c9fb5b6d5aa7c.json
similarity index 85%
rename from packages/app-lib/.sqlx/query-dfdc99cb5ec60bb08c566920628deec7e741eca9490811ebad6594abe8a6126d.json
rename to packages/app-lib/.sqlx/query-88c6a22aa112f10dce9d42779f06c723b356263ffc83aabb645c9fb5b6d5aa7c.json
index e4cd418a9e..fe54b8050f 100644
--- a/packages/app-lib/.sqlx/query-dfdc99cb5ec60bb08c566920628deec7e741eca9490811ebad6594abe8a6126d.json
+++ b/packages/app-lib/.sqlx/query-88c6a22aa112f10dce9d42779f06c723b356263ffc83aabb645c9fb5b6d5aa7c.json
@@ -1,12 +1,12 @@
 {
   "db_name": "SQLite",
-  "query": "\n            UPDATE settings\n            SET\n                max_concurrent_writes = $1,\n                max_concurrent_downloads = $2,\n\n                theme = $3,\n                locale = $4,\n                default_page = $5,\n                collapsed_navigation = $6,\n                advanced_rendering = $7,\n                native_decorations = $8,\n\n                discord_rpc = $9,\n                developer_mode = $10,\n                telemetry = $11,\n                personalized_ads = $12,\n\n                extra_launch_args = jsonb($13),\n                custom_env_vars = jsonb($14),\n                mc_memory_max = $15,\n                mc_force_fullscreen = $16,\n                mc_game_resolution_x = $17,\n                mc_game_resolution_y = $18,\n                hide_on_process_start = $19,\n\n                hook_pre_launch = $20,\n                hook_wrapper = $21,\n                hook_post_exit = $22,\n\n                custom_dir = $23,\n                prev_custom_dir = $24,\n                migrated = $25,\n\n                toggle_sidebar = $26,\n                feature_flags = $27,\n                hide_nametag_skins_page = $28,\n\n                skipped_update = $29,\n                pending_update_toast_for_version = $30,\n                auto_download_updates = $31,\n\n                version = $32\n            ",
+  "query": "\n            UPDATE settings\n            SET\n                max_concurrent_writes = $1,\n                max_concurrent_downloads = $2,\n\n                theme = $3,\n                locale = $4,\n                default_page = $5,\n                collapsed_navigation = $6,\n                advanced_rendering = $7,\n                native_decorations = $8,\n\n                discord_rpc = $9,\n                developer_mode = $10,\n                telemetry = $11,\n                personalized_ads = $12,\n\n                extra_launch_args = jsonb($13),\n                custom_env_vars = jsonb($14),\n                mc_memory_max = $15,\n                mc_force_fullscreen = $16,\n                mc_game_resolution_x = $17,\n                mc_game_resolution_y = $18,\n                hide_on_process_start = $19,\n\n                hook_pre_launch = $20,\n                hook_wrapper = $21,\n                hook_post_exit = $22,\n\n                custom_dir = $23,\n                prev_custom_dir = $24,\n                migrated = $25,\n\n                toggle_sidebar = $26,\n                feature_flags = $27,\n                hide_nametag_skins_page = $28,\n\n                skipped_update = $29,\n                pending_update_toast_for_version = $30,\n                auto_download_updates = $31,\n\n                sync_theme_across_devices = $32,\n                sync_behavior_across_devices = $33,\n\n                version = $34\n            ",
   "describe": {
     "columns": [],
     "parameters": {
-      "Right": 32
+      "Right": 34
     },
     "nullable": []
   },
-  "hash": "dfdc99cb5ec60bb08c566920628deec7e741eca9490811ebad6594abe8a6126d"
+  "hash": "88c6a22aa112f10dce9d42779f06c723b356263ffc83aabb645c9fb5b6d5aa7c"
 }
diff --git a/packages/app-lib/migrations/20260818120000_sync-preferences-settings.sql b/packages/app-lib/migrations/20260818120000_sync-preferences-settings.sql
new file mode 100644
index 0000000000..f97419c46b
--- /dev/null
+++ b/packages/app-lib/migrations/20260818120000_sync-preferences-settings.sql
@@ -0,0 +1,5 @@
+ALTER TABLE settings
+ADD COLUMN sync_theme_across_devices INTEGER NOT NULL DEFAULT TRUE;
+
+ALTER TABLE settings
+ADD COLUMN sync_behavior_across_devices INTEGER NOT NULL DEFAULT TRUE;
diff --git a/packages/app-lib/src/api/users.rs b/packages/app-lib/src/api/users.rs
index aa4f1d60ec..8f6f71d0d8 100644
--- a/packages/app-lib/src/api/users.rs
+++ b/packages/app-lib/src/api/users.rs
@@ -109,6 +109,51 @@ pub async fn get_user_collections(user_id: &str) -> crate::Result<Value> {
     .await
 }
 
+#[tracing::instrument]
+pub async fn get_user_preferences(user_id: &str) -> crate::Result<Value> {
+    let state = State::get().await?;
+    let user_id = urlencoding::encode(user_id);
+
+    fetch_json(
+        Method::GET,
+        &format!(
+            "{}user/{}/preferences",
+            env!("MODRINTH_API_URL_V3"),
+            user_id
+        ),
+        None,
+        None,
+        Some("/v3/user/:id/preferences"),
+        &state.api_semaphore,
+        &state.pool,
+    )
+    .await
+}
+
+#[tracing::instrument(skip(preferences))]
+pub async fn patch_user_preferences(
+    user_id: &str,
+    preferences: Value,
+) -> crate::Result<Value> {
+    let state = State::get().await?;
+    let user_id = urlencoding::encode(user_id);
+
+    fetch_json(
+        Method::PATCH,
+        &format!(
+            "{}user/{}/preferences",
+            env!("MODRINTH_API_URL_V3"),
+            user_id
+        ),
+        None,
+        Some(preferences),
+        Some("/v3/user/:id/preferences"),
+        &state.api_semaphore,
+        &state.pool,
+    )
+    .await
+}
+
 #[tracing::instrument(skip(patch))]
 pub async fn patch_user(user_id: &str, patch: Value) -> crate::Result<()> {
     let state = State::get().await?;
diff --git a/packages/app-lib/src/state/settings.rs b/packages/app-lib/src/state/settings.rs
index 6f64fc7108..a8bb8fe92e 100644
--- a/packages/app-lib/src/state/settings.rs
+++ b/packages/app-lib/src/state/settings.rs
@@ -19,6 +19,8 @@ pub struct Settings {
     pub advanced_rendering: bool,
     pub native_decorations: bool,
     pub toggle_sidebar: bool,
+    pub sync_theme_across_devices: bool,
+    pub sync_behavior_across_devices: bool,
 
     pub telemetry: bool,
     pub discord_rpc: bool,
@@ -88,6 +90,7 @@ impl Settings {
                 hook_pre_launch, hook_wrapper, hook_post_exit,
                 custom_dir, prev_custom_dir, migrated, json(feature_flags) feature_flags, toggle_sidebar,
                 skipped_update, pending_update_toast_for_version, auto_download_updates,
+                sync_theme_across_devices, sync_behavior_across_devices,
                 version
             FROM settings
             "
@@ -146,6 +149,8 @@ impl Settings {
             pending_update_toast_for_version: res
                 .pending_update_toast_for_version,
             auto_download_updates: res.auto_download_updates.map(|x| x == 1),
+            sync_theme_across_devices: res.sync_theme_across_devices == 1,
+            sync_behavior_across_devices: res.sync_behavior_across_devices == 1,
             version: res.version as usize,
         })
     }
@@ -206,7 +211,10 @@ impl Settings {
                 pending_update_toast_for_version = $30,
                 auto_download_updates = $31,
 
-                version = $32
+                sync_theme_across_devices = $32,
+                sync_behavior_across_devices = $33,
+
+                version = $34
             ",
             max_concurrent_writes,
             max_concurrent_downloads,
@@ -239,6 +247,8 @@ impl Settings {
             self.skipped_update,
             self.pending_update_toast_for_version,
             self.auto_download_updates,
+            self.sync_theme_across_devices,
+            self.sync_behavior_across_devices,
             version,
         )
         .execute(exec)
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index 6d99b45fcb..4b2ddfcd39 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -13,7 +13,6 @@ export * from './page'
 export * from './project'
 export * from './search'
 export * from './servers'
-export * from './settings'
 export * from './sharing'
 export * from './skin'
 export * from './user'
diff --git a/packages/ui/src/components/modal/TabbedModal.vue b/packages/ui/src/components/modal/TabbedModal.vue
index 7dfc1847a8..04f4291487 100644
--- a/packages/ui/src/components/modal/TabbedModal.vue
+++ b/packages/ui/src/components/modal/TabbedModal.vue
@@ -2,10 +2,11 @@
 
 <script setup lang="ts">
 import { RightArrowIcon } from '@modrinth/assets'
-import { type Component, computed, nextTick, ref } from 'vue'
+import { type Component, type ComponentPublicInstance, computed, nextTick, ref } from 'vue'
 
 import { type MessageDescriptor, useVIntl } from '../../composables/i18n'
 import { useScrollIndicator } from '../../composables/scroll-indicator'
+import { truncatedTooltip } from '../../utils/truncate'
 import NewModal from './NewModal.vue'
 export interface Tab {
 	name: MessageDescriptor
@@ -48,6 +49,15 @@ const props = withDefaults(
 const visibleTabs = computed(() => props.tabs.filter((tab) => tab.shown !== false))
 
 const selectedTab = ref(0)
+const tabLabelRefs = ref<Record<number, HTMLElement | null>>({})
+
+function setTabLabelRef(index: number, element: Element | ComponentPublicInstance | null) {
+	tabLabelRefs.value[index] = element instanceof HTMLElement ? element : null
+}
+
+function tabLabelTooltip(index: number, label: string) {
+	return truncatedTooltip(tabLabelRefs.value[index], label)
+}
 
 const scrollContainer = ref<HTMLElement | null>(null)
 const { showTopFade, showBottomFade, checkScrollState, forceCheck } =
@@ -99,9 +109,9 @@ defineExpose({ show, hide, selectedTab, setTab })
 		<template v-if="$slots.title" #title>
 			<slot name="title" />
 		</template>
-		<div class="grid grid-cols-[auto_1fr] p-6 pb-3 pr-0">
+		<div class="grid grid-cols-[minmax(12.5rem,18rem)_minmax(0,1fr)] p-6 pb-3 pr-0">
 			<div
-				class="flex min-w-[200px] max-h-[min(65vh,600px)] flex-col border-0 border-r-[1px] border-solid border-divider pr-4"
+				class="flex min-w-0 max-h-[min(65vh,600px)] flex-col border-0 border-r-[1px] border-solid border-divider pr-4"
 			>
 				<div class="relative min-h-0 flex-1">
 					<Transition
@@ -126,7 +136,7 @@ defineExpose({ show, hide, selectedTab, setTab })
 						<template v-for="(tab, index) in visibleTabs" :key="index">
 							<div
 								v-if="startsCategory(index) && tab.category"
-								class="px-4 pb-1 pt-2 text-xs font-bold uppercase tracking-wide text-secondary"
+								class="truncate px-4 pb-1 pt-2 text-xs font-bold uppercase tracking-wide text-secondary"
 							>
 								{{ formatMessage(tab.category) }}
 							</div>
@@ -135,18 +145,24 @@ defineExpose({ show, hide, selectedTab, setTab })
 								:href="tab.href ?? undefined"
 								:target="tab.href ? '_blank' : undefined"
 								:rel="tab.href ? 'noopener noreferrer' : undefined"
-								:class="`flex gap-2 items-center text-left rounded-xl px-4 py-2 border-none text-nowrap font-semibold cursor-pointer active:scale-[0.97] transition-all no-underline ${!tab.href && selectedTab === index ? 'bg-button-bgSelected text-button-textSelected' : 'bg-transparent text-button-text hover:bg-button-bg hover:text-contrast'}`"
+								:class="`flex min-w-0 gap-2 items-center text-left rounded-xl px-4 py-2 border-none font-semibold cursor-pointer active:scale-[0.97] transition-all no-underline ${!tab.href && selectedTab === index ? 'bg-button-bgSelected text-button-textSelected' : 'bg-transparent text-button-text hover:bg-button-bg hover:text-contrast'}`"
 								@click="!tab.href && setTab(index)"
 							>
 								<component :is="tab.icon" class="w-4 h-4 flex-shrink-0" />
-								<span>{{ formatMessage(tab.name) }}</span>
+								<span
+									:ref="(element) => setTabLabelRef(index, element)"
+									v-tooltip="tabLabelTooltip(index, formatMessage(tab.name))"
+									class="min-w-0 flex-1 truncate"
+								>
+									{{ formatMessage(tab.name) }}
+								</span>
 								<span
 									v-if="tab.badge"
-									class="rounded-full px-1.5 py-0.5 text-xs font-bold bg-brand-highlight text-brand-green"
+									class="shrink-0 rounded-full px-1.5 py-0.5 text-xs font-bold bg-brand-highlight text-brand-green"
 								>
 									{{ formatMessage(tab.badge) }}
 								</span>
-								<RightArrowIcon v-if="tab.href" class="size-4 ml-auto" />
+								<RightArrowIcon v-if="tab.href" class="ml-auto size-4 shrink-0" />
 							</component>
 						</template>
 					</div>
diff --git a/packages/ui/src/components/settings/LanguageSelector.vue b/packages/ui/src/components/settings/LanguageSelector.vue
deleted file mode 100644
index 18e41ff84d..0000000000
--- a/packages/ui/src/components/settings/LanguageSelector.vue
+++ /dev/null
@@ -1,250 +0,0 @@
-<script setup lang="ts">
-import { RadioButtonCheckedIcon, RadioButtonIcon, SearchIcon } from '@modrinth/assets'
-import Fuse from 'fuse.js/dist/fuse.basic'
-import { computed, ref, watchSyncEffect } from 'vue'
-
-import {
-	buildLocaleMessages,
-	defineMessages,
-	type LocaleDefinition,
-	useVIntl,
-} from '../../composables/i18n'
-import { metaLocaleModules } from '../../locales.ts'
-import { isModifierKeyDown } from '../../utils/events'
-import StyledInput from '../base/StyledInput.vue'
-
-const { formatMessage } = useVIntl()
-
-const props = defineProps<{
-	currentLocale: string
-	locales: LocaleDefinition[]
-	onLocaleChange: (locale: string) => Promise<void>
-	isChanging?: boolean
-}>()
-
-const messages = defineMessages({
-	noResults: {
-		id: 'settings.language.languages.search.no-results',
-		defaultMessage: 'No languages match your search.',
-	},
-	searchFieldPlaceholder: {
-		id: 'settings.language.languages.search-field.placeholder',
-		defaultMessage: 'Search for a language...',
-	},
-	searchResultsAnnouncement: {
-		id: 'settings.language.languages.search-results-announcement',
-		defaultMessage:
-			'{matches, plural, =0 {No languages match} one {# language matches} other {# languages match}} your search.',
-	},
-	standardLanguages: {
-		id: 'settings.language.categories.default',
-		defaultMessage: 'Standard languages',
-	},
-	searchResults: {
-		id: 'settings.language.categories.search-result',
-		defaultMessage: 'Search results',
-	},
-})
-
-const localeMetas = buildLocaleMessages(metaLocaleModules)
-
-type Category = 'default' | 'searchResult'
-
-type LocaleInfo = {
-	category: Category
-	tag: string
-	displayName: string
-	translatedName: string
-	searchTerms?: string[]
-}
-
-const $locales = computed(() => {
-	const result: LocaleInfo[] = []
-
-	for (const loc of props.locales) {
-		const tag = loc.code
-		const meta = localeMetas[tag] ?? null
-		const displayName = meta?.displayName ?? loc.name
-		const translatedName = formatMessage(loc.translatedName)
-		const searchTerms = meta?.searchTerms === '-' ? undefined : meta?.searchTerms?.split('\n')
-
-		result.push({
-			tag,
-			category: 'default',
-			displayName,
-			translatedName,
-			searchTerms,
-		})
-	}
-
-	return result
-})
-
-const $query = ref('')
-
-const isQueryEmpty = () => $query.value.trim().length === 0
-
-const fuse = new Fuse<LocaleInfo>([], {
-	keys: ['tag', 'displayName', 'nativeName', 'searchTerms'],
-	threshold: 0.4,
-	distance: 100,
-})
-
-watchSyncEffect(() => fuse.setCollection($locales.value))
-
-const $categories = computed(() => {
-	const categories = new Map<Category, LocaleInfo[]>()
-	categories.set('default', $locales.value)
-	return categories
-})
-
-const $searchResults = computed(() => {
-	return new Map<Category, LocaleInfo[]>([
-		['searchResult', isQueryEmpty() ? [] : fuse.search($query.value).map(({ item }) => item)],
-	])
-})
-
-const $displayCategories = computed(() =>
-	isQueryEmpty() ? $categories.value : $searchResults.value,
-)
-
-const $changingTo = ref<string | undefined>()
-
-const isChangingLocale = () => $changingTo.value != null || props.isChanging
-
-const $activeLocale = computed(() => {
-	if ($changingTo.value != null) return $changingTo.value
-	return props.currentLocale
-})
-
-async function changeLocale(value: string) {
-	if ($activeLocale.value === value) return
-
-	$changingTo.value = value
-
-	try {
-		await props.onLocaleChange(value)
-	} finally {
-		$changingTo.value = undefined
-	}
-}
-
-const $languagesList = ref<HTMLDivElement | undefined>()
-
-function onSearchKeydown(e: KeyboardEvent) {
-	if (e.key !== 'Enter' || isModifierKeyDown(e)) return
-
-	const focusableTarget = $languagesList.value?.querySelector(
-		'input, [tabindex]:not([tabindex="-1"])',
-	) as HTMLElement | undefined
-
-	focusableTarget?.focus()
-}
-
-function onItemKeydown(e: KeyboardEvent, loc: LocaleInfo) {
-	switch (e.key) {
-		case 'Enter':
-		case ' ':
-			break
-		default:
-			return
-	}
-
-	if (isModifierKeyDown(e) || isChangingLocale()) return
-
-	changeLocale(loc.tag)
-}
-
-function onItemClick(e: MouseEvent, loc: LocaleInfo) {
-	if (isModifierKeyDown(e) || isChangingLocale()) return
-
-	changeLocale(loc.tag)
-}
-
-function getItemLabel(loc: LocaleInfo) {
-	return `${loc.translatedName}. ${loc.displayName}`
-}
-
-function getCategoryName(category: Category): string {
-	if (category === 'searchResult') {
-		return formatMessage(messages.searchResults)
-	}
-	return formatMessage(messages.standardLanguages)
-}
-</script>
-
-<template>
-	<div class="flex flex-col gap-4">
-		<div v-if="$locales.length > 1" class="-mb-4">
-			<StyledInput
-				id="language-search"
-				v-model="$query"
-				:icon="SearchIcon"
-				name="language"
-				type="search"
-				:placeholder="formatMessage(messages.searchFieldPlaceholder)"
-				:disabled="isChangingLocale()"
-				wrapper-class="w-full"
-				@keydown="onSearchKeydown"
-			/>
-
-			<div id="language-search-results-announcements" class="visually-hidden" aria-live="polite">
-				{{
-					isQueryEmpty()
-						? ''
-						: formatMessage(messages.searchResultsAnnouncement, {
-								matches: $searchResults.get('searchResult')?.length ?? 0,
-							})
-				}}
-			</div>
-		</div>
-
-		<div ref="$languagesList" class="flex flex-col gap-2.5">
-			<template v-for="[category, categoryLocales] in $displayCategories" :key="category">
-				<strong class="mt-4 font-semibold text-contrast">
-					{{ getCategoryName(category) }}
-				</strong>
-
-				<div
-					v-if="category === 'searchResult' && categoryLocales.length === 0"
-					class="p-4 text-secondary"
-					tabindex="0"
-				>
-					{{ formatMessage(messages.noResults) }}
-				</div>
-
-				<template v-for="loc in categoryLocales" :key="loc.tag">
-					<div
-						role="button"
-						:aria-pressed="$activeLocale === loc.tag"
-						:class="[
-							'flex items-center gap-2 border-2 rounded-lg bg-surface-4 p-4 py-2 cursor-pointer relative overflow-hidden border-transparent transition-colors duration-100',
-							'focus-visible:outline focus-visible:outline-2 focus-visible:outline-brand hover:border-surface-5 border-solid',
-							isChangingLocale() && $changingTo !== loc.tag
-								? 'opacity-80 pointer-events-none cursor-default'
-								: '',
-						]"
-						:aria-disabled="isChangingLocale() && $changingTo !== loc.tag"
-						:tabindex="0"
-						:aria-label="getItemLabel(loc)"
-						@click="(e) => onItemClick(e, loc)"
-						@keydown="(e) => onItemKeydown(e, loc)"
-					>
-						<RadioButtonCheckedIcon v-if="$activeLocale === loc.tag" class="size-6" />
-						<RadioButtonIcon v-else class="size-6" />
-
-						<div class="flex flex-1 flex-wrap justify-between gap-x-6">
-							<div class="font-medium">
-								{{ loc.displayName }}
-							</div>
-
-							<div>
-								{{ loc.translatedName }}
-							</div>
-						</div>
-					</div>
-				</template>
-			</template>
-		</div>
-	</div>
-</template>
diff --git a/packages/ui/src/components/settings/index.ts b/packages/ui/src/components/settings/index.ts
deleted file mode 100644
index c7efceb5dc..0000000000
--- a/packages/ui/src/components/settings/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as LanguageSelector } from './LanguageSelector.vue'
-export { default as ThemeSelector } from './ThemeSelector.vue'
diff --git a/packages/ui/src/layouts/index.ts b/packages/ui/src/layouts/index.ts
index d027ea875e..e2cc22785e 100644
--- a/packages/ui/src/layouts/index.ts
+++ b/packages/ui/src/layouts/index.ts
@@ -1,3 +1,4 @@
+export * from './shared/appearance-settings'
 export * from './shared/browse-tab'
 export * from './shared/console'
 export * from './shared/content-tab'
diff --git a/packages/ui/src/layouts/shared/appearance-settings/components/AppearanceSettingRow.vue b/packages/ui/src/layouts/shared/appearance-settings/components/AppearanceSettingRow.vue
new file mode 100644
index 0000000000..1abded2318
--- /dev/null
+++ b/packages/ui/src/layouts/shared/appearance-settings/components/AppearanceSettingRow.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(
+	defineProps<{
+		controlId: string
+		title: string
+		description: string
+		headingLevel?: 2 | 3
+	}>(),
+	{
+		headingLevel: 2,
+	},
+)
+
+const headingTag = computed(() => `h${props.headingLevel}`)
+</script>
+
+<template>
+	<div class="flex items-center justify-between gap-4">
+		<div class="min-w-0">
+			<component
+				:is="headingTag"
+				:id="`${controlId}-label`"
+				class="m-0 text-lg font-semibold text-contrast"
+			>
+				{{ title }}
+			</component>
+			<p class="m-0 mt-1 text-secondary">
+				{{ description }}
+			</p>
+		</div>
+		<div class="shrink-0">
+			<slot :labelled-by="`${controlId}-label`" />
+		</div>
+	</div>
+</template>
diff --git a/packages/ui/src/layouts/shared/appearance-settings/components/ProjectLayoutSelector.vue b/packages/ui/src/layouts/shared/appearance-settings/components/ProjectLayoutSelector.vue
new file mode 100644
index 0000000000..59a6fa0b1b
--- /dev/null
+++ b/packages/ui/src/layouts/shared/appearance-settings/components/ProjectLayoutSelector.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { RadioButtonCheckedIcon, RadioButtonIcon } from '@modrinth/assets'
+
+import { defineMessages, useVIntl } from '#ui/composables'
+
+import type { ProjectLayout } from '../types'
+
+defineProps<{
+	title: string
+	modelValue: ProjectLayout
+}>()
+
+const emit = defineEmits<{
+	'update:modelValue': [layout: ProjectLayout]
+}>()
+
+const { formatMessage } = useVIntl()
+const layoutOptions = ['rows', 'grid'] as const
+const messages = defineMessages({
+	rows: {
+		id: 'settings.display.project-list-layouts.mode.rows',
+		defaultMessage: 'Rows',
+	},
+	grid: {
+		id: 'settings.display.project-list-layouts.mode.grid',
+		defaultMessage: 'Grid',
+	},
+})
+</script>
+
+<template>
+	<fieldset class="m-0 w-full min-w-0 border-0 p-0">
+		<legend class="mb-4 p-0 text-lg font-semibold text-contrast">
+			{{ title }}
+		</legend>
+		<div class="grid grid-cols-[repeat(auto-fit,minmax(9.5rem,1fr))] gap-4">
+			<button
+				v-for="layout in layoutOptions"
+				:key="layout"
+				type="button"
+				class="flex !w-full cursor-pointer flex-col overflow-hidden rounded-[var(--radius-md)] border border-solid border-divider bg-button-bg p-0 text-left text-primary outline-2 outline-transparent transition-[filter,transform] hover:brightness-[0.85] focus-visible:ring-4 focus-visible:ring-brand-shadow active:scale-[0.97] active:brightness-[0.8]"
+				:class="{ '!text-contrast': modelValue === layout }"
+				:aria-pressed="modelValue === layout"
+				@click="emit('update:modelValue', layout)"
+			>
+				<div class="flex w-full items-center justify-center bg-surface-2 p-6">
+					<div
+						class="grid h-[4.5rem] w-28 gap-1"
+						:class="layout === 'rows' ? 'grid-cols-1 grid-rows-4' : 'grid-cols-2 grid-rows-2'"
+						aria-hidden="true"
+					>
+						<div
+							v-for="previewCard in 4"
+							:key="previewCard"
+							class="rounded-lg border-2 border-solid"
+							:class="
+								modelValue === layout
+									? 'border-brand bg-brand-highlight'
+									: 'border-transparent bg-surface-4'
+							"
+						/>
+					</div>
+				</div>
+				<div class="flex grow items-center px-4 py-3 text-left">
+					<RadioButtonCheckedIcon
+						v-if="modelValue === layout"
+						class="mr-2 shrink-0 text-brand"
+						aria-hidden="true"
+					/>
+					<RadioButtonIcon v-else class="mr-2 shrink-0" aria-hidden="true" />
+					{{ formatMessage(messages[layout]) }}
+				</div>
+			</button>
+		</div>
+	</fieldset>
+</template>
diff --git a/packages/ui/src/layouts/shared/appearance-settings/components/appearance-settings-theme-selector.stories.ts b/packages/ui/src/layouts/shared/appearance-settings/components/appearance-settings-theme-selector.stories.ts
new file mode 100644
index 0000000000..69a404bb83
--- /dev/null
+++ b/packages/ui/src/layouts/shared/appearance-settings/components/appearance-settings-theme-selector.stories.ts
@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+
+import AppearanceSettingsThemeSelector from './appearance-settings-theme-selector.vue'
+
+const meta = {
+	title: 'Settings/ThemeSelector',
+	// @ts-ignore - error comes from generically typed component
+	component: AppearanceSettingsThemeSelector,
+} satisfies Meta<typeof AppearanceSettingsThemeSelector>
+
+export default meta
+
+export const Interactive: StoryObj = {
+	render: () => ({
+		components: { AppearanceSettingsThemeSelector },
+		setup() {
+			const currentTheme = ref('dark')
+			const themeOptions = ['system', 'light', 'dark', 'oled', 'retro']
+			return { currentTheme, themeOptions }
+		},
+		template: `
+			<AppearanceSettingsThemeSelector
+				aria-label="Color theme"
+				v-model="currentTheme"
+				:theme-options="themeOptions"
+				system-theme-color="dark"
+			/>
+		`,
+	}),
+}
diff --git a/packages/ui/src/components/settings/ThemeSelector.vue b/packages/ui/src/layouts/shared/appearance-settings/components/appearance-settings-theme-selector.vue
similarity index 67%
rename from packages/ui/src/components/settings/ThemeSelector.vue
rename to packages/ui/src/layouts/shared/appearance-settings/components/appearance-settings-theme-selector.vue
index 80ec1be2dc..639dc0df29 100644
--- a/packages/ui/src/components/settings/ThemeSelector.vue
+++ b/packages/ui/src/layouts/shared/appearance-settings/components/appearance-settings-theme-selector.vue
@@ -1,25 +1,22 @@
 <script setup lang="ts" generic="T extends string">
 import { MoonIcon, RadioButtonCheckedIcon, RadioButtonIcon, SunIcon } from '@modrinth/assets'
 
-import { defineMessages, useVIntl } from '../../composables/i18n'
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+
 const { formatMessage } = useVIntl()
 
-const { updateColorTheme, currentTheme, themeOptions, systemThemeColor } = defineProps<{
-	updateColorTheme: (theme: T) => void
-	currentTheme: T
+const { ariaLabel, modelValue, themeOptions, systemThemeColor } = defineProps<{
+	ariaLabel: string
+	modelValue: T
 	themeOptions: readonly T[]
 	systemThemeColor: T
 }>()
 
-const colorTheme = defineMessages({
-	title: {
-		id: 'settings.display.theme.title',
-		defaultMessage: 'Color theme',
-	},
-	description: {
-		id: 'settings.display.theme.description',
-		defaultMessage: 'Select your preferred color theme for Modrinth on this device.',
-	},
+const emit = defineEmits<{
+	'update:modelValue': [theme: T]
+}>()
+
+const themeLabels = defineMessages({
 	system: {
 		id: 'settings.display.theme.system',
 		defaultMessage: 'Sync with system',
@@ -40,6 +37,9 @@ const colorTheme = defineMessages({
 		id: 'settings.display.theme.retro',
 		defaultMessage: 'Retro',
 	},
+})
+
+const themeTooltips = defineMessages({
 	preferredLight: {
 		id: 'settings.display.theme.preferred-light-theme',
 		defaultMessage: 'Preferred light theme',
@@ -50,8 +50,9 @@ const colorTheme = defineMessages({
 	},
 })
 
-function asString(theme: T): string {
-	return theme
+function formatTheme(theme: T): string {
+	const message = themeLabels[theme as keyof typeof themeLabels]
+	return message ? formatMessage(message) : theme
 }
 
 function getPreviewClass(option: T): string {
@@ -61,34 +62,42 @@ function getPreviewClass(option: T): string {
 </script>
 
 <template>
-	<div class="theme-options mt-4">
+	<div class="theme-options" role="group" :aria-label="ariaLabel">
 		<button
 			v-for="option in themeOptions"
 			:key="option"
+			type="button"
 			class="preview-radio button-base"
-			:class="{ selected: currentTheme === option }"
-			@click="() => updateColorTheme(option)"
+			:class="{ selected: modelValue === option }"
+			:aria-pressed="modelValue === option"
+			@click="emit('update:modelValue', option)"
 		>
-			<div class="preview" :class="getPreviewClass(option)">
-				<div class="example-card card card">
+			<div class="preview" :class="getPreviewClass(option)" aria-hidden="true">
+				<div class="example-card rounded-lg border border-solid border-surface-4 bg-surface-3">
 					<div class="example-icon"></div>
 					<div class="example-text-1"></div>
 					<div class="example-text-2"></div>
 				</div>
 			</div>
 			<div class="label">
-				<RadioButtonCheckedIcon v-if="currentTheme === option" class="radio shrink-0" />
-				<RadioButtonIcon v-else class="radio shrink-0" />
-				{{ colorTheme[asString(option)] ? formatMessage(colorTheme[asString(option)]) : option }}
+				<RadioButtonCheckedIcon
+					v-if="modelValue === option"
+					class="radio shrink-0"
+					aria-hidden="true"
+				/>
+				<RadioButtonIcon v-else class="radio shrink-0" aria-hidden="true" />
+				{{ formatTheme(option) }}
 				<SunIcon
 					v-if="'light' === option"
-					v-tooltip="formatMessage(colorTheme.preferredLight)"
+					v-tooltip="formatMessage(themeTooltips.preferredLight)"
 					class="theme-icon shrink-0"
+					aria-hidden="true"
 				/>
 				<MoonIcon
 					v-else-if="'dark' === option"
-					v-tooltip="formatMessage(colorTheme.preferredDark)"
+					v-tooltip="formatMessage(themeTooltips.preferredDark)"
 					class="theme-icon shrink-0"
+					aria-hidden="true"
 				/>
 			</div>
 		</button>
diff --git a/packages/ui/src/layouts/shared/appearance-settings/index.ts b/packages/ui/src/layouts/shared/appearance-settings/index.ts
new file mode 100644
index 0000000000..fe563b8435
--- /dev/null
+++ b/packages/ui/src/layouts/shared/appearance-settings/index.ts
@@ -0,0 +1,3 @@
+export { default as AppearanceSettingsLayout } from './layout.vue'
+export * from './providers'
+export * from './types'
diff --git a/packages/ui/src/layouts/shared/appearance-settings/layout.vue b/packages/ui/src/layouts/shared/appearance-settings/layout.vue
new file mode 100644
index 0000000000..b3415b19c6
--- /dev/null
+++ b/packages/ui/src/layouts/shared/appearance-settings/layout.vue
@@ -0,0 +1,181 @@
+<script setup lang="ts">
+import Toggle from '#ui/components/base/Toggle.vue'
+import { useVIntl } from '#ui/composables'
+
+import AppearanceSettingsThemeSelector from './components/appearance-settings-theme-selector.vue'
+import AppearanceSettingRow from './components/AppearanceSettingRow.vue'
+import ProjectLayoutSelector from './components/ProjectLayoutSelector.vue'
+import { appearanceSettingsMessages as messages } from './messages'
+import { injectAppearanceSettings } from './providers'
+
+const appearance = injectAppearanceSettings()
+const { formatMessage } = useVIntl()
+
+const theme = appearance.theme
+const currentTheme = theme.current
+const themeOptions = theme.options
+const systemTheme = theme.system
+const syncAcrossDevices = theme.syncAcrossDevices.value
+const syncDisabled = theme.syncAcrossDevices.disabled
+const advancedRendering = appearance.advancedRendering.value
+const nativeDecorations = appearance.nativeDecorations
+const nativeDecorationsValue = nativeDecorations?.value
+const projectLayouts = appearance.projectLayouts
+const projectLayoutValues = projectLayouts?.value
+const externalLinksNewTab = appearance.externalLinksNewTab
+const externalLinksNewTabValue = externalLinksNewTab?.value
+const sidebarPreferences = appearance.sidebarPreferences
+const sidebarPreferenceValues = sidebarPreferences?.value
+</script>
+
+<template>
+	<div>
+		<section>
+			<div class="flex flex-col gap-1">
+				<h2 class="m-0 text-xl font-semibold text-contrast">
+					{{ formatMessage(messages.colorThemeTitle) }}
+				</h2>
+				<p class="m-0 text-secondary">
+					{{ formatMessage(messages.colorThemeDescription) }}
+				</p>
+			</div>
+
+			<AppearanceSettingsThemeSelector
+				class="mt-4"
+				:aria-label="formatMessage(messages.colorThemeTitle)"
+				:model-value="currentTheme"
+				:theme-options="themeOptions"
+				:system-theme-color="systemTheme"
+				@update:model-value="theme.update"
+			/>
+
+			<AppearanceSettingRow
+				class="mt-6"
+				control-id="sync-theme-across-devices"
+				:heading-level="3"
+				:title="formatMessage(messages.syncAcrossDevicesTitle)"
+				:description="formatMessage(messages.syncAcrossDevicesDescription)"
+			>
+				<template #default="{ labelledBy }">
+					<span
+						v-tooltip="
+							syncDisabled ? formatMessage(messages.syncAcrossDevicesSignedOutTooltip) : undefined
+						"
+						class="inline-flex"
+					>
+						<Toggle
+							id="sync-theme-across-devices"
+							:model-value="syncDisabled ? false : syncAcrossDevices"
+							:disabled="syncDisabled"
+							:aria-labelledby="labelledBy"
+							@update:model-value="theme.syncAcrossDevices.update"
+						/>
+					</span>
+				</template>
+			</AppearanceSettingRow>
+		</section>
+
+		<section v-if="projectLayouts" class="mt-8 border-0 border-t border-solid border-divider pt-6">
+			<div class="flex flex-col gap-1">
+				<h2 class="m-0 text-xl font-semibold text-contrast">
+					{{ formatMessage(messages.projectListLayoutsTitle) }}
+				</h2>
+				<p class="m-0 text-secondary">
+					{{ formatMessage(messages.projectListLayoutsDescription) }}
+				</p>
+			</div>
+			<div class="mt-4 flex flex-col gap-6">
+				<ProjectLayoutSelector
+					v-for="projectLayout in projectLayoutValues"
+					:key="projectLayout.type"
+					:title="formatMessage(messages[projectLayout.type])"
+					:model-value="projectLayout.layout"
+					@update:model-value="projectLayouts.update(projectLayout.type, $event)"
+				/>
+			</div>
+		</section>
+
+		<div class="mt-8 border-0 border-t border-solid border-divider pt-6">
+			<div class="flex flex-col gap-6">
+				<AppearanceSettingRow
+					control-id="advanced-rendering"
+					:title="formatMessage(messages.advancedRenderingTitle)"
+					:description="formatMessage(messages.advancedRenderingDescription)"
+				>
+					<template #default="{ labelledBy }">
+						<Toggle
+							id="advanced-rendering"
+							:model-value="advancedRendering"
+							:aria-labelledby="labelledBy"
+							@update:model-value="appearance.advancedRendering.update"
+						/>
+					</template>
+				</AppearanceSettingRow>
+
+				<AppearanceSettingRow
+					v-if="externalLinksNewTab"
+					control-id="external-links-new-tab"
+					:title="formatMessage(messages.externalLinksNewTabTitle)"
+					:description="formatMessage(messages.externalLinksNewTabDescription)"
+				>
+					<template #default="{ labelledBy }">
+						<Toggle
+							id="external-links-new-tab"
+							:model-value="externalLinksNewTabValue ?? false"
+							:aria-labelledby="labelledBy"
+							@update:model-value="externalLinksNewTab.update"
+						/>
+					</template>
+				</AppearanceSettingRow>
+
+				<template v-if="sidebarPreferences">
+					<AppearanceSettingRow
+						control-id="search-layout-toggle"
+						:title="formatMessage(messages.rightAlignedFiltersSidebarTitle)"
+						:description="formatMessage(messages.rightAlignedFiltersSidebarDescription)"
+					>
+						<template #default="{ labelledBy }">
+							<Toggle
+								id="search-layout-toggle"
+								:model-value="sidebarPreferenceValues?.right_aligned_search ?? false"
+								:aria-labelledby="labelledBy"
+								@update:model-value="sidebarPreferences.update('right_aligned_search', $event)"
+							/>
+						</template>
+					</AppearanceSettingRow>
+
+					<AppearanceSettingRow
+						control-id="project-layout-toggle"
+						:title="formatMessage(messages.leftAlignedContentSidebarTitle)"
+						:description="formatMessage(messages.leftAlignedContentSidebarDescription)"
+					>
+						<template #default="{ labelledBy }">
+							<Toggle
+								id="project-layout-toggle"
+								:model-value="sidebarPreferenceValues?.left_aligned_content ?? false"
+								:aria-labelledby="labelledBy"
+								@update:model-value="sidebarPreferences.update('left_aligned_content', $event)"
+							/>
+						</template>
+					</AppearanceSettingRow>
+				</template>
+
+				<AppearanceSettingRow
+					v-if="nativeDecorations"
+					control-id="native-decorations"
+					:title="formatMessage(messages.nativeDecorationsTitle)"
+					:description="formatMessage(messages.nativeDecorationsDescription)"
+				>
+					<template #default="{ labelledBy }">
+						<Toggle
+							id="native-decorations"
+							:model-value="nativeDecorationsValue ?? false"
+							:aria-labelledby="labelledBy"
+							@update:model-value="nativeDecorations.update"
+						/>
+					</template>
+				</AppearanceSettingRow>
+			</div>
+		</div>
+	</div>
+</template>
diff --git a/packages/ui/src/layouts/shared/appearance-settings/messages.ts b/packages/ui/src/layouts/shared/appearance-settings/messages.ts
new file mode 100644
index 0000000000..3ef3cd7e02
--- /dev/null
+++ b/packages/ui/src/layouts/shared/appearance-settings/messages.ts
@@ -0,0 +1,108 @@
+import { defineMessages } from '#ui/composables'
+
+export const appearanceSettingsMessages = defineMessages({
+	colorThemeTitle: {
+		id: 'settings.display.theme.title',
+		defaultMessage: 'Color theme',
+	},
+	colorThemeDescription: {
+		id: 'settings.display.theme.description',
+		defaultMessage: 'Select your preferred color theme across Modrinth.',
+	},
+	syncAcrossDevicesTitle: {
+		id: 'settings.display.theme.sync-across-devices',
+		defaultMessage: 'Sync theme across devices',
+	},
+	syncAcrossDevicesDescription: {
+		id: 'settings.display.theme.sync-across-devices.description',
+		defaultMessage:
+			"Use this theme everywhere you're signed in. Turn this off to keep a separate theme on this device.",
+	},
+	syncAcrossDevicesSignedOutTooltip: {
+		id: 'settings.display.theme.sync-across-devices.sign-in-tooltip',
+		defaultMessage: 'Sign into Modrinth to sync theme',
+	},
+	projectListLayoutsTitle: {
+		id: 'settings.display.project-list-layouts.title',
+		defaultMessage: 'Project list layouts',
+	},
+	projectListLayoutsDescription: {
+		id: 'settings.display.project-list-layouts.description',
+		defaultMessage: 'Select your preferred layout for each page that displays project lists.',
+	},
+	mod: {
+		id: 'settings.display.project-list-layouts.mod',
+		defaultMessage: 'Mods page',
+	},
+	plugin: {
+		id: 'settings.display.project-list-layouts.plugin',
+		defaultMessage: 'Plugins page',
+	},
+	datapack: {
+		id: 'settings.display.project-list-layouts.datapack',
+		defaultMessage: 'Data Packs page',
+	},
+	shader: {
+		id: 'settings.display.project-list-layouts.shader',
+		defaultMessage: 'Shaders page',
+	},
+	resourcepack: {
+		id: 'settings.display.project-list-layouts.resourcepack',
+		defaultMessage: 'Resource Packs page',
+	},
+	modpack: {
+		id: 'settings.display.project-list-layouts.modpack',
+		defaultMessage: 'Modpacks page',
+	},
+	server: {
+		id: 'settings.display.project-list-layouts.server',
+		defaultMessage: 'Servers page',
+	},
+	user: {
+		id: 'settings.display.project-list-layouts.user',
+		defaultMessage: 'User profile pages',
+	},
+	advancedRenderingTitle: {
+		id: 'settings.display.sidebar.advanced-rendering.title',
+		defaultMessage: 'Advanced rendering',
+	},
+	advancedRenderingDescription: {
+		id: 'settings.display.sidebar.advanced-rendering.description',
+		defaultMessage:
+			'Enables advanced rendering such as blur effects that may cause performance issues without hardware-accelerated rendering.',
+	},
+	externalLinksNewTabTitle: {
+		id: 'settings.display.sidebar.external-links-new-tab.title',
+		defaultMessage: 'Open external links in new tab',
+	},
+	externalLinksNewTabDescription: {
+		id: 'settings.display.sidebar.external-links-new-tab.description',
+		defaultMessage:
+			'Make links which go outside of Modrinth open in a new tab. No matter this setting, links on the same domain and in Markdown descriptions will open in the same tab, and links on ads and edit pages will open in a new tab.',
+	},
+	rightAlignedFiltersSidebarTitle: {
+		id: 'settings.display.sidebar.right-aligned-filters-sidebar.title',
+		defaultMessage: 'Right-aligned filters sidebar on search pages',
+	},
+	rightAlignedFiltersSidebarDescription: {
+		id: 'settings.display.sidebar.right-aligned-filters-sidebar.description',
+		defaultMessage: 'Aligns the filters sidebar to the right of the search results.',
+	},
+	leftAlignedContentSidebarTitle: {
+		id: 'settings.display.sidebar.left-aligned-content-sidebar.title',
+		defaultMessage: 'Left-aligned sidebar on content pages',
+	},
+	leftAlignedContentSidebarDescription: {
+		id: 'settings.display.sidebar.left-aligned-content-sidebar.description',
+		defaultMessage: "Aligns the sidebar to the left of the page's content.",
+	},
+	nativeDecorationsTitle: {
+		id: 'app.appearance-settings.native-decorations.title',
+		defaultMessage: 'System window frame',
+	},
+	nativeDecorationsDescription: {
+		id: 'app.appearance-settings.native-decorations.description',
+		defaultMessage:
+			"Use your operating system's title bar and window controls. Requires an app restart.",
+	},
+})
diff --git a/packages/ui/src/layouts/shared/appearance-settings/providers/appearance-settings.ts b/packages/ui/src/layouts/shared/appearance-settings/providers/appearance-settings.ts
new file mode 100644
index 0000000000..c0ddd9e9e7
--- /dev/null
+++ b/packages/ui/src/layouts/shared/appearance-settings/providers/appearance-settings.ts
@@ -0,0 +1,229 @@
+import type { Labrinth } from '@modrinth/api-client'
+import { toValue } from 'vue'
+
+import { createContext } from '#ui/providers/create-context'
+
+import type {
+	AppearanceRef,
+	AppearanceSetter,
+	AppearanceTheme,
+	AppearanceThemeSelection,
+	ProjectDisplayLocation,
+	ProjectLayout,
+	ProjectLayoutSetting,
+	SidebarPreferences,
+	WritableAppearanceSetting,
+} from '../types'
+
+interface AppearanceSetting<T> {
+	value: AppearanceRef<T>
+	update: AppearanceSetter<T>
+	disabled?: AppearanceRef<boolean>
+}
+
+interface ThemeSettings {
+	current: AppearanceRef<AppearanceThemeSelection>
+	options: AppearanceRef<readonly AppearanceThemeSelection[]>
+	system: AppearanceRef<AppearanceTheme>
+	update: AppearanceSetter<AppearanceThemeSelection>
+	syncAcrossDevices: AppearanceSetting<boolean>
+}
+
+interface ProjectLayoutSettings {
+	value: AppearanceRef<readonly ProjectLayoutSetting[]>
+	update: (type: ProjectDisplayLocation, layout: ProjectLayout) => Promise<void>
+}
+
+interface SidebarSettings {
+	value: AppearanceRef<SidebarPreferences>
+	update: (key: keyof SidebarPreferences, enabled: boolean) => Promise<void>
+}
+
+export interface AppearanceSettingsContext {
+	theme: ThemeSettings
+	advancedRendering: AppearanceSetting<boolean>
+	nativeDecorations?: AppearanceSetting<boolean>
+	projectLayouts?: ProjectLayoutSettings
+	externalLinksNewTab?: AppearanceSetting<boolean>
+	sidebarPreferences?: SidebarSettings
+}
+
+export interface AppearanceSettingsProviderOptions {
+	deferPersistence?: boolean
+	theme: {
+		current: AppearanceRef<AppearanceThemeSelection>
+		options: AppearanceRef<readonly AppearanceThemeSelection[]>
+		system: AppearanceRef<AppearanceTheme>
+		set: AppearanceSetter<AppearanceThemeSelection>
+		syncAcrossDevices: WritableAppearanceSetting<boolean>
+		syncDisabled: AppearanceRef<boolean>
+	}
+	advancedRendering: WritableAppearanceSetting<boolean>
+	nativeDecorations?: WritableAppearanceSetting<boolean>
+	projectLayouts?: {
+		value: AppearanceRef<readonly ProjectLayoutSetting[]>
+		set: (type: ProjectDisplayLocation, layout: ProjectLayout) => void | Promise<void>
+	}
+	externalLinksNewTab?: WritableAppearanceSetting<boolean>
+	sidebarPreferences?: {
+		value: AppearanceRef<SidebarPreferences>
+		set: (key: keyof SidebarPreferences, enabled: boolean) => void | Promise<void>
+	}
+	updatePreferences: (
+		preferences: Labrinth.Users.v3.PartialUserPreferences,
+	) => Promise<Labrinth.Users.v3.UserPreferences | undefined>
+}
+
+const layoutPreferenceKeys: Record<
+	ProjectDisplayLocation,
+	keyof Labrinth.Users.v3.LayoutPreferences
+> = {
+	mod: 'mods',
+	plugin: 'plugins',
+	datapack: 'datapacks',
+	shader: 'shaders',
+	resourcepack: 'resourcepacks',
+	modpack: 'modpacks',
+	server: 'servers',
+	user: 'users',
+}
+
+const [injectAppearanceSettings, provideAppearanceSettingsContext] =
+	createContext<AppearanceSettingsContext>('AppearanceSettingsLayout', 'appearanceSettings')
+
+export { injectAppearanceSettings }
+
+function createSetting<T>(setting: WritableAppearanceSetting<T>): AppearanceSetting<T> {
+	return {
+		value: setting.value,
+		update: setting.set,
+	}
+}
+
+export function provideAppearanceSettings(
+	options: AppearanceSettingsProviderOptions,
+): AppearanceSettingsContext {
+	const projectLayouts = options.projectLayouts
+	const sidebarPreferences = options.sidebarPreferences
+
+	async function syncThemePreference(theme: AppearanceThemeSelection): Promise<void> {
+		await options.updatePreferences({
+			appearance:
+				theme === 'system'
+					? { auto: true }
+					: {
+							auto: false,
+							theme,
+						},
+		})
+	}
+
+	async function syncThemeOrDisable(theme: AppearanceThemeSelection): Promise<void> {
+		try {
+			await syncThemePreference(theme)
+		} catch {
+			await options.theme.syncAcrossDevices.set(false)
+		}
+	}
+
+	async function updateTheme(theme: AppearanceThemeSelection): Promise<void> {
+		await options.theme.set(theme)
+		if (options.deferPersistence) return
+		if (!toValue(options.theme.syncAcrossDevices.value) || toValue(options.theme.syncDisabled)) {
+			return
+		}
+
+		await syncThemeOrDisable(theme)
+	}
+
+	async function updateThemeSync(enabled: boolean): Promise<void> {
+		if (toValue(options.theme.syncDisabled)) return
+
+		await options.theme.syncAcrossDevices.set(enabled)
+		if (options.deferPersistence) return
+		if (enabled) {
+			await syncThemeOrDisable(toValue(options.theme.current))
+		}
+	}
+
+	async function updateProjectLayout(
+		type: ProjectDisplayLocation,
+		layout: ProjectLayout,
+	): Promise<void> {
+		if (!projectLayouts) return
+
+		const previousLayout = toValue(projectLayouts.value).find(
+			(setting) => setting.type === type,
+		)?.layout
+
+		await projectLayouts.set(type, layout)
+		if (options.deferPersistence) return
+		try {
+			const layouts: Partial<Labrinth.Users.v3.LayoutPreferences> = {}
+			layouts[layoutPreferenceKeys[type]] = layout
+			await options.updatePreferences({ layouts })
+		} catch {
+			const currentLayout = toValue(projectLayouts.value).find(
+				(setting) => setting.type === type,
+			)?.layout
+			if (previousLayout && currentLayout === layout) {
+				await projectLayouts.set(type, previousLayout)
+			}
+		}
+	}
+
+	async function updateSidebarPreference(
+		key: keyof SidebarPreferences,
+		enabled: boolean,
+	): Promise<void> {
+		if (!sidebarPreferences) return
+
+		const previousValue = toValue(sidebarPreferences.value)[key]
+		await sidebarPreferences.set(key, enabled)
+		if (options.deferPersistence) return
+		try {
+			const sidebars: Partial<SidebarPreferences> = {}
+			sidebars[key] = enabled
+			await options.updatePreferences({ sidebars })
+		} catch {
+			if (toValue(sidebarPreferences.value)[key] === enabled) {
+				await sidebarPreferences.set(key, previousValue)
+			}
+		}
+	}
+
+	const context: AppearanceSettingsContext = {
+		theme: {
+			current: options.theme.current,
+			options: options.theme.options,
+			system: options.theme.system,
+			update: updateTheme,
+			syncAcrossDevices: {
+				value: options.theme.syncAcrossDevices.value,
+				disabled: options.theme.syncDisabled,
+				update: updateThemeSync,
+			},
+		},
+		advancedRendering: createSetting(options.advancedRendering),
+		nativeDecorations: options.nativeDecorations
+			? createSetting(options.nativeDecorations)
+			: undefined,
+		projectLayouts: projectLayouts
+			? {
+					value: projectLayouts.value,
+					update: updateProjectLayout,
+				}
+			: undefined,
+		externalLinksNewTab: options.externalLinksNewTab
+			? createSetting(options.externalLinksNewTab)
+			: undefined,
+		sidebarPreferences: sidebarPreferences
+			? {
+					value: sidebarPreferences.value,
+					update: updateSidebarPreference,
+				}
+			: undefined,
+	}
+
+	return provideAppearanceSettingsContext(context)
+}
diff --git a/packages/ui/src/layouts/shared/appearance-settings/providers/index.ts b/packages/ui/src/layouts/shared/appearance-settings/providers/index.ts
new file mode 100644
index 0000000000..d5589cbfd5
--- /dev/null
+++ b/packages/ui/src/layouts/shared/appearance-settings/providers/index.ts
@@ -0,0 +1 @@
+export * from './appearance-settings'
diff --git a/packages/ui/src/layouts/shared/appearance-settings/types.ts b/packages/ui/src/layouts/shared/appearance-settings/types.ts
new file mode 100644
index 0000000000..778e260415
--- /dev/null
+++ b/packages/ui/src/layouts/shared/appearance-settings/types.ts
@@ -0,0 +1,36 @@
+import type { Labrinth } from '@modrinth/api-client'
+import type { ComputedRef, Ref } from 'vue'
+
+export type AppearanceTheme = Labrinth.Users.v3.Theme
+export type AppearanceThemeSelection = AppearanceTheme | 'system'
+export type ProjectLayout = Labrinth.Users.v3.LayoutOption
+export type SidebarPreferences = Labrinth.Users.v3.SidebarPreferences
+export type AppearanceRef<T> = Ref<T> | ComputedRef<T>
+export type AppearanceSetter<T> = (value: T) => void | Promise<void>
+
+export const projectDisplayLocations = [
+	'mod',
+	'plugin',
+	'resourcepack',
+	'modpack',
+	'shader',
+	'datapack',
+	'server',
+	'user',
+] as const
+
+export type ProjectDisplayLocation = (typeof projectDisplayLocations)[number]
+
+export function isProjectDisplayLocation(value: string): value is ProjectDisplayLocation {
+	return projectDisplayLocations.some((location) => location === value)
+}
+
+export interface ProjectLayoutSetting {
+	type: ProjectDisplayLocation
+	layout: ProjectLayout
+}
+
+export interface WritableAppearanceSetting<T> {
+	value: AppearanceRef<T>
+	set: AppearanceSetter<T>
+}
diff --git a/packages/ui/src/layouts/shared/content-tab/layout.vue b/packages/ui/src/layouts/shared/content-tab/layout.vue
index 0eac52f168..cad1e4d367 100644
--- a/packages/ui/src/layouts/shared/content-tab/layout.vue
+++ b/packages/ui/src/layouts/shared/content-tab/layout.vue
@@ -19,6 +19,7 @@ import {
 	TrashIcon,
 	UserIcon,
 } from '@modrinth/assets'
+import { useSessionStorage } from '@vueuse/core'
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
 import Avatar from '#ui/components/base/Avatar.vue'
@@ -179,7 +180,9 @@ function getItemId(item: ContentItem) {
 }
 
 type SortMode = 'alphabetical-asc' | 'alphabetical-desc' | 'date-added-newest' | 'date-added-oldest'
-const sortMode = ref<SortMode>('alphabetical-asc')
+const sortMode = ctx.filterPersistKey
+	? useSessionStorage<SortMode>(`content-sort:${ctx.filterPersistKey}`, 'alphabetical-asc')
+	: ref<SortMode>('alphabetical-asc')
 
 const sortLabels: Record<SortMode, () => string> = {
 	'alphabetical-asc': () => formatMessage(messages.sortAlphabeticalAscending),
diff --git a/packages/ui/src/layouts/shared/content-tab/providers/content-manager.ts b/packages/ui/src/layouts/shared/content-tab/providers/content-manager.ts
index fad0eb1f0b..37fcd018cc 100644
--- a/packages/ui/src/layouts/shared/content-tab/providers/content-manager.ts
+++ b/packages/ui/src/layouts/shared/content-tab/providers/content-manager.ts
@@ -99,7 +99,7 @@ export interface ContentManagerContext {
 	// Table item mapping (link generation differs per platform)
 	mapToTableItem: (item: ContentItem) => ContentCardTableItem
 
-	// Filter persistence key — when set, selected filters are saved/restored via sessionStorage
+	// Filter persistence key — when set, filter and sort settings are saved/restored via sessionStorage
 	filterPersistKey?: string
 	showSharedContentFilter?: Ref<boolean> | ComputedRef<boolean>
 }
diff --git a/packages/ui/src/layouts/wrapped/index.ts b/packages/ui/src/layouts/wrapped/index.ts
index 79bec2d024..59ba8d7109 100644
--- a/packages/ui/src/layouts/wrapped/index.ts
+++ b/packages/ui/src/layouts/wrapped/index.ts
@@ -1,5 +1,3 @@
-export { default as AccountProfileSettings } from './AccountProfileSettings.vue'
-export { default as AccountSocialSettings } from './AccountSocialSettings.vue'
 export { default as ServersManageAccessPage } from './hosting/manage/[id]/access/access.vue'
 export { default as ServerOnboardingPanelPage } from './hosting/manage/[id]/onboarding.vue'
 export { default as ServersManageBackupsPage } from './hosting/manage/backups.vue'
@@ -8,3 +6,4 @@ export { default as ServersManageFilesPage } from './hosting/manage/files.vue'
 export { default as ServersManagePageIndex } from './hosting/manage/index.vue'
 export { default as ServersManageOverviewPage } from './hosting/manage/overview.vue'
 export { default as ServersManageRootLayout } from './hosting/manage/root.vue'
+export * from './settings'
diff --git a/packages/ui/src/layouts/wrapped/AccountProfileSettings.vue b/packages/ui/src/layouts/wrapped/settings/AccountProfileSettings.vue
similarity index 100%
rename from packages/ui/src/layouts/wrapped/AccountProfileSettings.vue
rename to packages/ui/src/layouts/wrapped/settings/AccountProfileSettings.vue
diff --git a/packages/ui/src/layouts/wrapped/AccountSocialSettings.vue b/packages/ui/src/layouts/wrapped/settings/AccountSocialSettings.vue
similarity index 69%
rename from packages/ui/src/layouts/wrapped/AccountSocialSettings.vue
rename to packages/ui/src/layouts/wrapped/settings/AccountSocialSettings.vue
index 240744fa31..93f36cd34c 100644
--- a/packages/ui/src/layouts/wrapped/AccountSocialSettings.vue
+++ b/packages/ui/src/layouts/wrapped/settings/AccountSocialSettings.vue
@@ -29,13 +29,14 @@
 					{{ formatMessage(messages.friendRequestsTitle) }}
 				</h2>
 				<Chips
-					v-model="friendRequestSource"
-					:items="friendRequestSourceOptions"
+					:model-value="friendPrivacy"
+					:items="friendPrivacyOptions"
 					:format-label="formatInteractionSource"
-					:disabled-items="friendRequestSourceOptions"
-					:disabled-tooltip="formatMessage(messages.comingSoon)"
+					:disabled-items="preferenceControlsDisabled ? friendPrivacyOptions : undefined"
+					:disabled-tooltip="preferenceControlsTooltip"
 					:capitalize="false"
 					:aria-label="formatMessage(messages.friendRequestsTitle)"
+					@update:model-value="setFriendPrivacy"
 				/>
 				<p class="m-0 text-secondary">
 					{{ formatMessage(messages.friendRequestsDescription) }}
@@ -47,18 +48,38 @@
 					{{ formatMessage(messages.sharedInstanceInvitesTitle) }}
 				</h2>
 				<Chips
-					v-model="sharedInstanceInviteSource"
-					:items="sharedInstanceInviteSourceOptions"
+					:model-value="sharedInstancesPrivacy"
+					:items="invitePrivacyOptions"
 					:format-label="formatInteractionSource"
-					:disabled-items="sharedInstanceInviteSourceOptions"
-					:disabled-tooltip="formatMessage(messages.comingSoon)"
+					:disabled-items="preferenceControlsDisabled ? invitePrivacyOptions : undefined"
+					:disabled-tooltip="preferenceControlsTooltip"
 					:capitalize="false"
 					:aria-label="formatMessage(messages.sharedInstanceInvitesTitle)"
+					@update:model-value="setSharedInstancesPrivacy"
 				/>
 				<p class="m-0 text-secondary">
 					{{ formatMessage(messages.sharedInstanceInvitesDescription) }}
 				</p>
 			</div>
+
+			<div class="flex flex-col gap-2.5">
+				<h2 class="m-0 text-lg font-semibold text-contrast">
+					{{ formatMessage(messages.hostingAccessTitle) }}
+				</h2>
+				<Chips
+					:model-value="hostingAccessPrivacy"
+					:items="invitePrivacyOptions"
+					:format-label="formatInteractionSource"
+					:disabled-items="preferenceControlsDisabled ? invitePrivacyOptions : undefined"
+					:disabled-tooltip="preferenceControlsTooltip"
+					:capitalize="false"
+					:aria-label="formatMessage(messages.hostingAccessTitle)"
+					@update:model-value="setHostingAccessPrivacy"
+				/>
+				<p class="m-0 text-secondary">
+					{{ formatMessage(messages.hostingAccessDescription) }}
+				</p>
+			</div>
 		</section>
 
 		<section class="flex flex-col gap-4">
@@ -187,7 +208,7 @@
 import type { Labrinth } from '@modrinth/api-client'
 import { LogInIcon, SpinnerIcon, ThinkingRinthbot } from '@modrinth/assets'
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 
 import Avatar from '#ui/components/base/Avatar.vue'
 import { Button } from '#ui/components/base/buttons'
@@ -195,15 +216,20 @@ import Chips from '#ui/components/base/Chips.vue'
 import EmptyState from '#ui/components/base/EmptyState.vue'
 import Table, { type TableColumn } from '#ui/components/base/Table.vue'
 import { defineMessages, useScrollIndicator, useVIntl } from '#ui/composables'
-import { injectAuth, injectNotificationManager } from '#ui/providers'
+import { injectAuth, injectNotificationManager, injectUserPreferences } from '#ui/providers'
 import { commonMessages } from '#ui/utils'
 
-import { blockedUsersQueryKey } from '../shared/user-profile/providers'
+import { blockedUsersQueryKey } from '../../shared/user-profile/providers'
 
 type BlockedUserTableColumn = 'user' | 'actions'
 type BlockedUser = Labrinth.Users.v2.User & Record<BlockedUserTableColumn, unknown>
-type FriendRequestSource = 'everyone' | 'mutuals' | 'no-one'
-type SharedInstanceInviteSource = 'everyone' | 'friends' | 'no-one'
+type FriendPrivacy = Labrinth.Users.v3.FriendPrivacy
+type InvitePrivacy = Labrinth.Users.v3.InvitePrivacy
+type SocialSettingsState = {
+	friendPrivacy: FriendPrivacy
+	sharedInstancesPrivacy: InvitePrivacy
+	hostingAccessPrivacy: InvitePrivacy
+}
 
 const props = defineProps<{
 	getBlockedUsers: () => Promise<Labrinth.BlockedUsers.v3.BlockedUserId[]>
@@ -213,33 +239,120 @@ const props = defineProps<{
 
 const auth = injectAuth()
 const notificationManager = injectNotificationManager()
+const {
+	preferences,
+	isLoading: preferencesLoading,
+	isUpdating: preferencesUpdating,
+	updatePreferences,
+} = injectUserPreferences()
 const queryClient = useQueryClient()
 const { formatMessage } = useVIntl()
 const blockedUsersTable = ref<HTMLElement | null>(null)
 const unblockingUserId = ref<string | null>(null)
-const friendRequestSource = ref<FriendRequestSource>('everyone')
-const sharedInstanceInviteSource = ref<SharedInstanceInviteSource>('everyone')
-const friendRequestSourceOptions: FriendRequestSource[] = ['everyone', 'mutuals', 'no-one']
-const sharedInstanceInviteSourceOptions: SharedInstanceInviteSource[] = [
-	'everyone',
-	'friends',
-	'no-one',
-]
+const saving = ref(false)
+const preferencesInitialized = ref(false)
+const friendPrivacy = ref<FriendPrivacy>('everyone')
+const sharedInstancesPrivacy = ref<InvitePrivacy>('everyone')
+const hostingAccessPrivacy = ref<InvitePrivacy>('everyone')
+const friendPrivacyOptions: FriendPrivacy[] = ['everyone', 'mutual', 'none']
+const invitePrivacyOptions: InvitePrivacy[] = ['everyone', 'friends', 'none']
+const preferenceControlsDisabled = computed(
+	() => preferencesLoading.value || preferencesUpdating.value || saving.value || !preferences.value,
+)
+const preferenceControlsTooltip = computed(() => {
+	if (preferencesLoading.value) return formatMessage(messages.loadingPreferences)
+	if (saving.value || preferencesUpdating.value) return formatMessage(messages.savingPreferences)
+	return formatMessage(messages.preferencesUnavailable)
+})
 const { showTopFade, showBottomFade, checkScrollState } = useScrollIndicator(blockedUsersTable)
 
-function formatInteractionSource(source: FriendRequestSource | SharedInstanceInviteSource): string {
+const originalState = computed<SocialSettingsState>(() => ({
+	friendPrivacy: preferences.value?.social.friend_privacy ?? 'everyone',
+	sharedInstancesPrivacy: preferences.value?.social.shared_instances_privacy ?? 'everyone',
+	hostingAccessPrivacy: preferences.value?.social.hosting_access_privacy ?? 'everyone',
+}))
+const modifiedState = computed<Partial<SocialSettingsState>>(() => ({
+	...(friendPrivacy.value !== originalState.value.friendPrivacy
+		? { friendPrivacy: friendPrivacy.value }
+		: {}),
+	...(sharedInstancesPrivacy.value !== originalState.value.sharedInstancesPrivacy
+		? { sharedInstancesPrivacy: sharedInstancesPrivacy.value }
+		: {}),
+	...(hostingAccessPrivacy.value !== originalState.value.hostingAccessPrivacy
+		? { hostingAccessPrivacy: hostingAccessPrivacy.value }
+		: {}),
+}))
+const hasChanges = computed(() => Object.keys(modifiedState.value).length > 0)
+
+function formatInteractionSource(source: FriendPrivacy | InvitePrivacy): string {
 	switch (source) {
 		case 'everyone':
 			return formatMessage(messages.everyone)
-		case 'mutuals':
+		case 'mutual':
 			return formatMessage(messages.friendsOfFriends)
 		case 'friends':
 			return formatMessage(messages.friends)
-		case 'no-one':
+		case 'none':
 			return formatMessage(messages.noOne)
 	}
 }
 
+watch(
+	preferences,
+	(value) => {
+		if (!value) return
+		if (preferencesInitialized.value && hasChanges.value && !saving.value) return
+
+		friendPrivacy.value = value.social.friend_privacy
+		sharedInstancesPrivacy.value = value.social.shared_instances_privacy
+		hostingAccessPrivacy.value = value.social.hosting_access_privacy
+		preferencesInitialized.value = true
+	},
+	{ immediate: true, flush: 'sync' },
+)
+
+function setFriendPrivacy(value: FriendPrivacy | null): void {
+	if (!value) return
+	friendPrivacy.value = value
+}
+
+function setSharedInstancesPrivacy(value: InvitePrivacy | null): void {
+	if (!value) return
+	sharedInstancesPrivacy.value = value
+}
+
+function setHostingAccessPrivacy(value: InvitePrivacy | null): void {
+	if (!value) return
+	hostingAccessPrivacy.value = value
+}
+
+function reset(): void {
+	friendPrivacy.value = originalState.value.friendPrivacy
+	sharedInstancesPrivacy.value = originalState.value.sharedInstancesPrivacy
+	hostingAccessPrivacy.value = originalState.value.hostingAccessPrivacy
+}
+
+async function save(): Promise<void> {
+	if (!hasChanges.value || saving.value) return
+
+	saving.value = true
+	try {
+		await updatePreferences({
+			social: {
+				friend_privacy: friendPrivacy.value,
+				shared_instances_privacy: sharedInstancesPrivacy.value,
+				hosting_access_privacy: hostingAccessPrivacy.value,
+			},
+		})
+	} catch {
+		return
+	} finally {
+		saving.value = false
+	}
+}
+
+defineExpose({ hasChanges, originalState, modifiedState, saving, reset, save })
+
 const columns = computed<TableColumn<BlockedUserTableColumn>[]>(() => [
 	{
 		key: 'user',
@@ -342,12 +455,19 @@ const messages = defineMessages({
 	},
 	sharedInstanceInvitesTitle: {
 		id: 'settings.social.shared-instance-invites.title',
-		defaultMessage: 'Invitations',
+		defaultMessage: 'Shared instance invites',
 	},
 	sharedInstanceInvitesDescription: {
 		id: 'settings.social.shared-instance-invites.description',
-		defaultMessage:
-			'Control who can send you invites to shared instances and Modrinth Hosting panels.',
+		defaultMessage: 'Control who can send you invites to shared instances.',
+	},
+	hostingAccessTitle: {
+		id: 'settings.social.hosting-access.title',
+		defaultMessage: 'Hosting access invites',
+	},
+	hostingAccessDescription: {
+		id: 'settings.social.hosting-access.description',
+		defaultMessage: 'Control who can invite you to manage a Modrinth Hosting server.',
 	},
 	everyone: {
 		id: 'settings.social.interaction-source.everyone',
@@ -365,9 +485,17 @@ const messages = defineMessages({
 		id: 'settings.social.interaction-source.no-one',
 		defaultMessage: 'No one',
 	},
-	comingSoon: {
-		id: 'settings.social.interaction-source.coming-soon',
-		defaultMessage: 'Coming soon!',
+	savingPreferences: {
+		id: 'settings.social.interaction-source.saving',
+		defaultMessage: 'Saving your preferences…',
+	},
+	loadingPreferences: {
+		id: 'settings.social.interaction-source.loading',
+		defaultMessage: 'Loading your preferences…',
+	},
+	preferencesUnavailable: {
+		id: 'settings.social.interaction-source.unavailable',
+		defaultMessage: 'Your preferences are currently unavailable.',
 	},
 	blockedUsersTitle: {
 		id: 'settings.social.blocked-users.title',
diff --git a/packages/ui/src/layouts/wrapped/settings/index.ts b/packages/ui/src/layouts/wrapped/settings/index.ts
new file mode 100644
index 0000000000..c33dd10630
--- /dev/null
+++ b/packages/ui/src/layouts/wrapped/settings/index.ts
@@ -0,0 +1,3 @@
+export { default as AccountProfileSettings } from './AccountProfileSettings.vue'
+export { default as AccountSocialSettings } from './AccountSocialSettings.vue'
+export { default as LanguageSettings } from './language-settings/index.vue'
diff --git a/packages/ui/src/layouts/wrapped/settings/language-settings/index.vue b/packages/ui/src/layouts/wrapped/settings/language-settings/index.vue
new file mode 100644
index 0000000000..75606ef3dd
--- /dev/null
+++ b/packages/ui/src/layouts/wrapped/settings/language-settings/index.vue
@@ -0,0 +1,121 @@
+<template>
+	<div>
+		<h2 class="m-0 text-xl font-semibold text-contrast">
+			{{ formatMessage(commonSettingsMessages.language) }}
+		</h2>
+
+		<Admonition type="warning" class="mb-4 mt-2">
+			{{ formatMessage(languageSelectorMessages.languageWarning, { platform }) }}
+		</Admonition>
+
+		<p class="m-0 mb-4 text-secondary">
+			<IntlFormatted
+				:message-id="languageSelectorMessages.languagesDescription"
+				:values="{ platform }"
+			>
+				<template #~crowdin-link="{ children }">
+					<AutoLink to="https://translate.modrinth.com" class="text-link">
+						<component :is="() => children" />
+					</AutoLink>
+				</template>
+			</IntlFormatted>
+		</p>
+
+		<LanguageSettingsSelector
+			:product="product"
+			:current-locale="current.locale"
+			:locales="LOCALES"
+			:on-locale-change="onLocaleChange"
+			:is-changing="saving"
+			:coverage-by-locale="languageCoverage[product]"
+		/>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref, watch } from 'vue'
+
+import { Admonition, AutoLink, IntlFormatted } from '#ui/components/base'
+import { LOCALES, useVIntl } from '#ui/composables'
+import { injectI18n, injectUserPreferences } from '#ui/providers'
+import { commonSettingsMessages, languageSelectorMessages, useSavable } from '#ui/utils'
+
+import { languageCoverage } from './language-settings-coverage.generated'
+import LanguageSettingsSelector from './language-settings-selector.vue'
+
+const props = defineProps<{
+	product: 'app' | 'website'
+	persistLocale?: (locale: string) => void | Promise<void>
+}>()
+
+const { formatMessage } = useVIntl()
+const { locale, setLocale } = injectI18n()
+const { preferences, updatePreferences } = injectUserPreferences()
+const platform = computed(() =>
+	formatMessage(
+		props.product === 'app'
+			? languageSelectorMessages.platformApp
+			: languageSelectorMessages.platformSite,
+	),
+)
+const persistedLocale = ref(locale.value)
+let localeChangeQueue = Promise.resolve()
+
+const { saved, current, changes, saving, hasChanges, reset, save } = useSavable(
+	() => ({ locale: persistedLocale.value }),
+	async () => {
+		await updatePreferences({ localization: { locale: current.value.locale } })
+		await queueLocaleChange(current.value.locale, true)
+		await props.persistLocale?.(current.value.locale)
+		persistedLocale.value = current.value.locale
+	},
+)
+
+function queueLocaleChange(newLocale: string, persist = false): Promise<void> {
+	const request = localeChangeQueue.then(() => Promise.resolve(setLocale(newLocale, { persist })))
+	localeChangeQueue = request.catch(() => undefined)
+	return request
+}
+
+function onLocaleChange(newLocale: string): void {
+	current.value.locale = newLocale
+	void queueLocaleChange(newLocale).catch(() => undefined)
+}
+
+function resetLanguageSettings(): void {
+	reset()
+	void queueLocaleChange(current.value.locale).catch(() => undefined)
+}
+
+async function saveLanguageSettings(): Promise<void> {
+	try {
+		await save()
+	} catch {
+		return
+	}
+}
+
+watch(
+	preferences,
+	(value) => {
+		if (!value || hasChanges.value) return
+		persistedLocale.value = value.localization.locale
+	},
+	{ immediate: true, flush: 'sync' },
+)
+
+onBeforeUnmount(() => {
+	if (hasChanges.value || locale.value !== persistedLocale.value) {
+		void queueLocaleChange(persistedLocale.value).catch(() => undefined)
+	}
+})
+
+defineExpose({
+	originalState: saved,
+	modifiedState: changes,
+	hasChanges,
+	saving,
+	reset: resetLanguageSettings,
+	save: saveLanguageSettings,
+})
+</script>
diff --git a/packages/ui/src/layouts/wrapped/settings/language-settings/language-settings-coverage.generated.d.ts b/packages/ui/src/layouts/wrapped/settings/language-settings/language-settings-coverage.generated.d.ts
new file mode 100644
index 0000000000..80da93bd96
--- /dev/null
+++ b/packages/ui/src/layouts/wrapped/settings/language-settings/language-settings-coverage.generated.d.ts
@@ -0,0 +1,3 @@
+import type { LanguageCoverageByProduct } from './language-settings-coverage'
+
+export declare const languageCoverage: LanguageCoverageByProduct
diff --git a/packages/ui/src/layouts/wrapped/settings/language-settings/language-settings-coverage.ts b/packages/ui/src/layouts/wrapped/settings/language-settings/language-settings-coverage.ts
new file mode 100644
index 0000000000..d0f77db601
--- /dev/null
+++ b/packages/ui/src/layouts/wrapped/settings/language-settings/language-settings-coverage.ts
@@ -0,0 +1,15 @@
+export type LanguageProduct = 'app' | 'website'
+
+export interface LanguageCoverageStats {
+	percentage: number
+	interfaceCoverage: number
+	translationCoverage: number
+	translatedMessages: number
+	totalMessages: number
+	unlocalizedStrings: number
+}
+
+export type LanguageCoverageByProduct = Record<
+	LanguageProduct,
+	Record<string, LanguageCoverageStats>
+>
diff --git a/packages/ui/src/layouts/wrapped/settings/language-settings/language-settings-selector.vue b/packages/ui/src/layouts/wrapped/settings/language-settings/language-settings-selector.vue
new file mode 100644
index 0000000000..e7e735be07
--- /dev/null
+++ b/packages/ui/src/layouts/wrapped/settings/language-settings/language-settings-selector.vue
@@ -0,0 +1,335 @@
+<script setup lang="ts">
+import { SearchIcon } from '@modrinth/assets'
+import Fuse from 'fuse.js/dist/fuse.basic'
+import { computed, onMounted, ref } from 'vue'
+
+import Button from '#ui/components/base/buttons/Button.vue'
+import StyledInput from '#ui/components/base/StyledInput.vue'
+import {
+	buildLocaleMessages,
+	defineMessages,
+	type LocaleDefinition,
+	useVIntl,
+} from '#ui/composables/i18n'
+import { metaLocaleModules } from '#ui/locales.ts'
+import { isModifierKeyDown } from '#ui/utils/events'
+
+import type { LanguageCoverageStats } from './language-settings-coverage'
+
+const { formatMessage } = useVIntl()
+
+const props = defineProps<{
+	product: 'app' | 'website'
+	currentLocale: string
+	locales: LocaleDefinition[]
+	onLocaleChange: (locale: string) => void | Promise<void>
+	isChanging?: boolean
+	coverageByLocale?: Record<string, LanguageCoverageStats>
+}>()
+
+const messages = defineMessages({
+	noResults: {
+		id: 'settings.language.languages.search.no-results',
+		defaultMessage: 'No languages match your search.',
+	},
+	searchFieldPlaceholder: {
+		id: 'settings.language.languages.search-field.placeholder',
+		defaultMessage: 'Search for a language...',
+	},
+	searchResultsAnnouncement: {
+		id: 'settings.language.languages.search-results-announcement',
+		defaultMessage:
+			'{matches, plural, =0 {No languages match} one {# language matches} other {# languages match}} your search.',
+	},
+	standardLanguages: {
+		id: 'settings.language.categories.default',
+		defaultMessage: 'Standard languages',
+	},
+	searchResults: {
+		id: 'settings.language.categories.search-result',
+		defaultMessage: 'Search results',
+	},
+	coverageLabel: {
+		id: 'settings.language.coverage.label',
+		defaultMessage: '{percentage}% supported',
+	},
+	appCoverageTooltip: {
+		id: 'settings.language.coverage.app-tooltip',
+		defaultMessage: 'About {percentage}% of the Modrinth App is available in this language.',
+	},
+	websiteCoverageTooltip: {
+		id: 'settings.language.coverage.website-tooltip',
+		defaultMessage: 'About {percentage}% of the website is available in this language.',
+	},
+})
+
+const localeMetas = buildLocaleMessages(metaLocaleModules)
+
+type Category = 'default' | 'searchResult'
+
+type LocaleInfo = {
+	category: Category
+	tag: string
+	displayName: string
+	browserDisplayName: string
+	flagUrl?: string
+	searchTerms?: string[]
+	coverage?: LanguageCoverageStats
+}
+
+const localeFlagRegions: Record<string, string> = {
+	'es-419': 'mx',
+	'sr-CS': 'rs',
+}
+
+const $browserLocales = ref([props.currentLocale])
+
+onMounted(() => {
+	$browserLocales.value = navigator.languages.length
+		? [...navigator.languages]
+		: [navigator.language]
+})
+
+const $browserDisplayNames = computed(() => {
+	try {
+		return new Intl.DisplayNames($browserLocales.value, { type: 'language' })
+	} catch {
+		return undefined
+	}
+})
+
+function getBrowserDisplayName(tag: string, fallback: string): string {
+	try {
+		return $browserDisplayNames.value?.of(tag) ?? fallback
+	} catch {
+		try {
+			return $browserDisplayNames.value?.of(tag.split('-')[0]) ?? fallback
+		} catch {
+			return fallback
+		}
+	}
+}
+
+function getFlagUrl(tag: string): string | undefined {
+	const region = localeFlagRegions[tag] ?? tag.split('-').at(-1)
+	if (!region || !/^[a-z]{2}$/i.test(region)) return undefined
+
+	return `https://flagcdn.com/${region.toLowerCase()}.svg`
+}
+
+const $locales = computed(() => {
+	const result: LocaleInfo[] = []
+
+	for (const loc of props.locales) {
+		const tag = loc.code
+		const meta = localeMetas[tag] ?? null
+		const displayName = meta?.displayName ?? loc.name
+		const translatedName = formatMessage(loc.translatedName)
+		const browserDisplayName = getBrowserDisplayName(tag, translatedName)
+		const searchTerms = meta?.searchTerms === '-' ? undefined : meta?.searchTerms?.split('\n')
+
+		result.push({
+			tag,
+			category: 'default',
+			displayName,
+			browserDisplayName,
+			flagUrl: getFlagUrl(tag),
+			searchTerms,
+			coverage: props.coverageByLocale?.[tag],
+		})
+	}
+
+	return result.sort((a, b) => (b.coverage?.percentage ?? -1) - (a.coverage?.percentage ?? -1))
+})
+
+const $query = ref('')
+
+const isQueryEmpty = () => $query.value.trim().length === 0
+
+const fuse = computed(
+	() =>
+		new Fuse<LocaleInfo>($locales.value, {
+			keys: ['tag', 'displayName', 'browserDisplayName', 'searchTerms'],
+			threshold: 0.4,
+			distance: 100,
+		}),
+)
+
+const $categories = computed(() => {
+	const categories = new Map<Category, LocaleInfo[]>()
+	categories.set('default', $locales.value)
+	return categories
+})
+
+const $searchResults = computed(() => {
+	return new Map<Category, LocaleInfo[]>([
+		['searchResult', isQueryEmpty() ? [] : fuse.value.search($query.value).map(({ item }) => item)],
+	])
+})
+
+const $displayCategories = computed(() =>
+	isQueryEmpty() ? $categories.value : $searchResults.value,
+)
+
+const $changingTo = ref<string | undefined>()
+
+const isChangingLocale = () => $changingTo.value != null || props.isChanging
+
+const $activeLocale = computed(() => {
+	if ($changingTo.value != null) return $changingTo.value
+	return props.currentLocale
+})
+
+function changeLocale(value: string) {
+	if ($activeLocale.value === value) return
+
+	const result = props.onLocaleChange(value)
+	if (!result) return
+
+	$changingTo.value = value
+	void result.then(
+		() => {
+			$changingTo.value = undefined
+		},
+		() => {
+			$changingTo.value = undefined
+		},
+	)
+}
+
+const $languagesList = ref<HTMLDivElement | undefined>()
+
+function onSearchKeydown(e: KeyboardEvent) {
+	if (e.key !== 'Enter' || isModifierKeyDown(e)) return
+
+	const focusableTarget = $languagesList.value?.querySelector(
+		'button:not(:disabled), [tabindex]:not([tabindex="-1"])',
+	) as HTMLElement | undefined
+
+	focusableTarget?.focus()
+}
+
+function onItemClick(e: MouseEvent, loc: LocaleInfo) {
+	if (isModifierKeyDown(e) || isChangingLocale()) return
+
+	changeLocale(loc.tag)
+}
+
+function showBrowserDisplayName(loc: LocaleInfo): boolean {
+	return (
+		loc.browserDisplayName.localeCompare(loc.displayName, undefined, { sensitivity: 'base' }) !== 0
+	)
+}
+
+function getItemLabel(loc: LocaleInfo) {
+	const coverageLabel = loc.coverage
+		? `. ${formatMessage(messages.coverageLabel, { percentage: loc.coverage.percentage })}`
+		: ''
+	const browserDisplayName = showBrowserDisplayName(loc) ? `. ${loc.browserDisplayName}` : ''
+	return `${loc.displayName}${browserDisplayName}${coverageLabel}`
+}
+
+function getCoverageTooltip(coverage: LanguageCoverageStats): string {
+	const message =
+		props.product === 'app' ? messages.appCoverageTooltip : messages.websiteCoverageTooltip
+
+	return formatMessage(message, {
+		percentage: coverage.percentage,
+	})
+}
+
+function getCategoryName(category: Category): string {
+	if (category === 'searchResult') {
+		return formatMessage(messages.searchResults)
+	}
+	return formatMessage(messages.standardLanguages)
+}
+</script>
+
+<template>
+	<div class="flex flex-col gap-4">
+		<div v-if="$locales.length > 1" class="-mb-4">
+			<StyledInput
+				id="language-search"
+				v-model="$query"
+				:icon="SearchIcon"
+				name="language"
+				type="search"
+				:placeholder="formatMessage(messages.searchFieldPlaceholder)"
+				:disabled="isChangingLocale()"
+				wrapper-class="w-full"
+				@keydown="onSearchKeydown"
+			/>
+
+			<div id="language-search-results-announcements" class="visually-hidden" aria-live="polite">
+				{{
+					isQueryEmpty()
+						? ''
+						: formatMessage(messages.searchResultsAnnouncement, {
+								matches: $searchResults.get('searchResult')?.length ?? 0,
+							})
+				}}
+			</div>
+		</div>
+
+		<div ref="$languagesList" class="flex flex-col gap-2.5">
+			<template v-for="[category, categoryLocales] in $displayCategories" :key="category">
+				<strong class="mt-4 font-semibold text-contrast">
+					{{ getCategoryName(category) }}
+				</strong>
+
+				<div
+					v-if="category === 'searchResult' && categoryLocales.length === 0"
+					class="p-4 text-secondary"
+					tabindex="0"
+				>
+					{{ formatMessage(messages.noResults) }}
+				</div>
+
+				<template v-for="loc in categoryLocales" :key="loc.tag">
+					<Button
+						:type="$activeLocale === loc.tag ? 'colored' : 'base'"
+						:color="$activeLocale === loc.tag ? 'green' : undefined"
+						:aria-pressed="$activeLocale === loc.tag"
+						:disabled="isChangingLocale() && $changingTo !== loc.tag"
+						:aria-label="getItemLabel(loc)"
+						class="w-full !justify-start !gap-2 !text-left sm:!h-10"
+						:class="
+							$activeLocale === loc.tag
+								? '!bg-[var(--color-button-bg-selected)] !text-[var(--color-button-text-selected)]'
+								: ''
+						"
+						@click="(e) => onItemClick(e, loc)"
+					>
+						<img
+							v-if="loc.flagUrl"
+							:src="loc.flagUrl"
+							alt=""
+							aria-hidden="true"
+							class="h-4 w-6 shrink-0 rounded-sm object-cover"
+							loading="lazy"
+						/>
+
+						<span class="flex min-w-0 flex-1 items-baseline gap-2 overflow-hidden">
+							<span class="truncate text-sm sm:text-base">{{ loc.displayName }}</span>
+							<span
+								v-if="showBrowserDisplayName(loc)"
+								class="truncate text-xs font-normal text-secondary sm:text-sm"
+							>
+								{{ loc.browserDisplayName }}
+							</span>
+						</span>
+
+						<span
+							v-if="loc.coverage"
+							v-tooltip="getCoverageTooltip(loc.coverage)"
+							class="ml-auto shrink-0 text-xs font-normal text-secondary sm:text-sm"
+						>
+							{{ loc.coverage.percentage }}%
+						</span>
+					</Button>
+				</template>
+			</template>
+		</div>
+	</div>
+</template>
diff --git a/packages/ui/src/locales/de-CH/index.json b/packages/ui/src/locales/de-CH/index.json
index d377455d6c..888d17ef52 100644
--- a/packages/ui/src/locales/de-CH/index.json
+++ b/packages/ui/src/locales/de-CH/index.json
@@ -5216,9 +5216,6 @@
   "settings.social.friend-requests.title": {
     "defaultMessage": "Freundschaftsanfragen"
   },
-  "settings.social.interaction-source.coming-soon": {
-    "defaultMessage": "Bald verfügbar!"
-  },
   "settings.social.interaction-source.everyone": {
     "defaultMessage": "Jeder"
   },
diff --git a/packages/ui/src/locales/de-DE/index.json b/packages/ui/src/locales/de-DE/index.json
index 89e7f688ec..d19d4a09e8 100644
--- a/packages/ui/src/locales/de-DE/index.json
+++ b/packages/ui/src/locales/de-DE/index.json
@@ -5216,9 +5216,6 @@
   "settings.social.friend-requests.title": {
     "defaultMessage": "Freundschaftsanfragen"
   },
-  "settings.social.interaction-source.coming-soon": {
-    "defaultMessage": "Bald verfügbar!"
-  },
   "settings.social.interaction-source.everyone": {
     "defaultMessage": "Jeder"
   },
diff --git a/packages/ui/src/locales/en-US/index.json b/packages/ui/src/locales/en-US/index.json
index db2dfba00f..70e6094b35 100644
--- a/packages/ui/src/locales/en-US/index.json
+++ b/packages/ui/src/locales/en-US/index.json
@@ -35,6 +35,12 @@
   "affiliate.viewAnalytics": {
     "defaultMessage": "View analytics"
   },
+  "app.appearance-settings.native-decorations.description": {
+    "defaultMessage": "Use your operating system's title bar and window controls. Requires an app restart."
+  },
+  "app.appearance-settings.native-decorations.title": {
+    "defaultMessage": "System window frame"
+  },
   "app.server-settings.failed-to-load-server": {
     "defaultMessage": "Failed to load server settings"
   },
@@ -5540,11 +5546,71 @@
   "settings.billing.title": {
     "defaultMessage": "Billing and subscriptions"
   },
+  "settings.display.project-list-layouts.datapack": {
+    "defaultMessage": "Data Packs page"
+  },
+  "settings.display.project-list-layouts.description": {
+    "defaultMessage": "Select your preferred layout for each page that displays project lists."
+  },
+  "settings.display.project-list-layouts.mod": {
+    "defaultMessage": "Mods page"
+  },
+  "settings.display.project-list-layouts.mode.grid": {
+    "defaultMessage": "Grid"
+  },
+  "settings.display.project-list-layouts.mode.rows": {
+    "defaultMessage": "Rows"
+  },
+  "settings.display.project-list-layouts.modpack": {
+    "defaultMessage": "Modpacks page"
+  },
+  "settings.display.project-list-layouts.plugin": {
+    "defaultMessage": "Plugins page"
+  },
+  "settings.display.project-list-layouts.resourcepack": {
+    "defaultMessage": "Resource Packs page"
+  },
+  "settings.display.project-list-layouts.server": {
+    "defaultMessage": "Servers page"
+  },
+  "settings.display.project-list-layouts.shader": {
+    "defaultMessage": "Shaders page"
+  },
+  "settings.display.project-list-layouts.title": {
+    "defaultMessage": "Project list layouts"
+  },
+  "settings.display.project-list-layouts.user": {
+    "defaultMessage": "User profile pages"
+  },
+  "settings.display.sidebar.advanced-rendering.description": {
+    "defaultMessage": "Enables advanced rendering such as blur effects that may cause performance issues without hardware-accelerated rendering."
+  },
+  "settings.display.sidebar.advanced-rendering.title": {
+    "defaultMessage": "Advanced rendering"
+  },
+  "settings.display.sidebar.external-links-new-tab.description": {
+    "defaultMessage": "Make links which go outside of Modrinth open in a new tab. No matter this setting, links on the same domain and in Markdown descriptions will open in the same tab, and links on ads and edit pages will open in a new tab."
+  },
+  "settings.display.sidebar.external-links-new-tab.title": {
+    "defaultMessage": "Open external links in new tab"
+  },
+  "settings.display.sidebar.left-aligned-content-sidebar.description": {
+    "defaultMessage": "Aligns the sidebar to the left of the page's content."
+  },
+  "settings.display.sidebar.left-aligned-content-sidebar.title": {
+    "defaultMessage": "Left-aligned sidebar on content pages"
+  },
+  "settings.display.sidebar.right-aligned-filters-sidebar.description": {
+    "defaultMessage": "Aligns the filters sidebar to the right of the search results."
+  },
+  "settings.display.sidebar.right-aligned-filters-sidebar.title": {
+    "defaultMessage": "Right-aligned filters sidebar on search pages"
+  },
   "settings.display.theme.dark": {
     "defaultMessage": "Dark"
   },
   "settings.display.theme.description": {
-    "defaultMessage": "Select your preferred color theme for Modrinth on this device."
+    "defaultMessage": "Select your preferred color theme across Modrinth."
   },
   "settings.display.theme.light": {
     "defaultMessage": "Light"
@@ -5561,6 +5627,15 @@
   "settings.display.theme.retro": {
     "defaultMessage": "Retro"
   },
+  "settings.display.theme.sync-across-devices": {
+    "defaultMessage": "Sync theme across devices"
+  },
+  "settings.display.theme.sync-across-devices.description": {
+    "defaultMessage": "Use this theme everywhere you're signed in. Turn this off to keep a separate theme on this device."
+  },
+  "settings.display.theme.sync-across-devices.sign-in-tooltip": {
+    "defaultMessage": "Sign into Modrinth to sync theme"
+  },
   "settings.display.theme.system": {
     "defaultMessage": "Sync with system"
   },
@@ -5579,6 +5654,15 @@
   "settings.language.categories.search-result": {
     "defaultMessage": "Search results"
   },
+  "settings.language.coverage.app-tooltip": {
+    "defaultMessage": "About {percentage}% of the Modrinth App is available in this language."
+  },
+  "settings.language.coverage.label": {
+    "defaultMessage": "{percentage}% supported"
+  },
+  "settings.language.coverage.website-tooltip": {
+    "defaultMessage": "About {percentage}% of the website is available in this language."
+  },
   "settings.language.description": {
     "defaultMessage": "Choose your preferred language for the {platform}. Translations are contributed by volunteers <crowdin-link>on Crowdin</crowdin-link>."
   },
@@ -5606,6 +5690,12 @@
   "settings.pats.title": {
     "defaultMessage": "Personal access tokens"
   },
+  "settings.preferences.update-failed.description": {
+    "defaultMessage": "Your settings could not be saved to your Modrinth account. Please try again."
+  },
+  "settings.preferences.update-failed.title": {
+    "defaultMessage": "Failed to sync settings"
+  },
   "settings.profile.bio.description": {
     "defaultMessage": "A short description to tell everyone a little bit about you."
   },
@@ -5690,8 +5780,11 @@
   "settings.social.friend-requests.title": {
     "defaultMessage": "Friend requests"
   },
-  "settings.social.interaction-source.coming-soon": {
-    "defaultMessage": "Coming soon!"
+  "settings.social.hosting-access.description": {
+    "defaultMessage": "Control who can invite you to manage a Modrinth Hosting server."
+  },
+  "settings.social.hosting-access.title": {
+    "defaultMessage": "Hosting access invites"
   },
   "settings.social.interaction-source.everyone": {
     "defaultMessage": "Everyone"
@@ -5702,14 +5795,23 @@
   "settings.social.interaction-source.friends-of-friends": {
     "defaultMessage": "Friends of friends"
   },
+  "settings.social.interaction-source.loading": {
+    "defaultMessage": "Loading your preferences…"
+  },
   "settings.social.interaction-source.no-one": {
     "defaultMessage": "No one"
   },
+  "settings.social.interaction-source.saving": {
+    "defaultMessage": "Saving your preferences…"
+  },
+  "settings.social.interaction-source.unavailable": {
+    "defaultMessage": "Your preferences are currently unavailable."
+  },
   "settings.social.shared-instance-invites.description": {
-    "defaultMessage": "Control who can send you invites to shared instances and Modrinth Hosting panels."
+    "defaultMessage": "Control who can send you invites to shared instances."
   },
   "settings.social.shared-instance-invites.title": {
-    "defaultMessage": "Invitations"
+    "defaultMessage": "Shared instance invites"
   },
   "settings.social.sign-in-required.description": {
     "defaultMessage": "You can control who can interact with you, and manage blocked users with a Modrinth Account"
diff --git a/packages/ui/src/locales/es-419/index.json b/packages/ui/src/locales/es-419/index.json
index 30d1f100a2..cbfbde0be3 100644
--- a/packages/ui/src/locales/es-419/index.json
+++ b/packages/ui/src/locales/es-419/index.json
@@ -5216,9 +5216,6 @@
   "settings.social.friend-requests.title": {
     "defaultMessage": "Solicitudes de amistad"
   },
-  "settings.social.interaction-source.coming-soon": {
-    "defaultMessage": "¡Próximamente!"
-  },
   "settings.social.interaction-source.everyone": {
     "defaultMessage": "Todos"
   },
diff --git a/packages/ui/src/locales/es-ES/index.json b/packages/ui/src/locales/es-ES/index.json
index 46edcb81d8..f7cc1394a8 100644
--- a/packages/ui/src/locales/es-ES/index.json
+++ b/packages/ui/src/locales/es-ES/index.json
@@ -5213,9 +5213,6 @@
   "settings.social.friend-requests.title": {
     "defaultMessage": "Solicitudes de amistad"
   },
-  "settings.social.interaction-source.coming-soon": {
-    "defaultMessage": "¡Próximamente!"
-  },
   "settings.social.interaction-source.everyone": {
     "defaultMessage": "Todos"
   },
diff --git a/packages/ui/src/locales/fr-FR/index.json b/packages/ui/src/locales/fr-FR/index.json
index 28ee8f68f6..ebdaa5f5c1 100644
--- a/packages/ui/src/locales/fr-FR/index.json
+++ b/packages/ui/src/locales/fr-FR/index.json
@@ -5207,9 +5207,6 @@
   "settings.social.friend-requests.title": {
     "defaultMessage": "Demandes d'ami"
   },
-  "settings.social.interaction-source.coming-soon": {
-    "defaultMessage": "À venir !"
-  },
   "settings.social.interaction-source.everyone": {
     "defaultMessage": "Tout le monde"
   },
diff --git a/packages/ui/src/locales/hu-HU/index.json b/packages/ui/src/locales/hu-HU/index.json
index 9dd5760791..3a6b60eedd 100644
--- a/packages/ui/src/locales/hu-HU/index.json
+++ b/packages/ui/src/locales/hu-HU/index.json
@@ -4394,9 +4394,6 @@
   "settings.social.friend-requests.title": {
     "defaultMessage": "Barátkérelmek"
   },
-  "settings.social.interaction-source.coming-soon": {
-    "defaultMessage": "Hamarosan érkezik!"
-  },
   "settings.social.interaction-source.everyone": {
     "defaultMessage": "Bárki"
   },
diff --git a/packages/ui/src/locales/it-IT/index.json b/packages/ui/src/locales/it-IT/index.json
index 04158c796b..49127a72d6 100644
--- a/packages/ui/src/locales/it-IT/index.json
+++ b/packages/ui/src/locales/it-IT/index.json
@@ -5174,9 +5174,6 @@
   "settings.social.friend-requests.title": {
     "defaultMessage": "Richieste di amicizia"
   },
-  "settings.social.interaction-source.coming-soon": {
-    "defaultMessage": "In arrivo!"
-  },
   "settings.social.interaction-source.everyone": {
     "defaultMessage": "Tutti"
   },
diff --git a/packages/ui/src/locales/ja-JP/index.json b/packages/ui/src/locales/ja-JP/index.json
index 03259595bc..9e8ad6f3e7 100644
--- a/packages/ui/src/locales/ja-JP/index.json
+++ b/packages/ui/src/locales/ja-JP/index.json
@@ -4889,9 +4889,6 @@
   "settings.social.blocked-users.unblock": {
     "defaultMessage": "ブロックを解除"
   },
-  "settings.social.interaction-source.coming-soon": {
-    "defaultMessage": "近日公開！"
-  },
   "settings.social.interaction-source.everyone": {
     "defaultMessage": "全員"
   },
diff --git a/packages/ui/src/locales/ko-KR/index.json b/packages/ui/src/locales/ko-KR/index.json
index 261c8d5dcc..cacc7abeeb 100644
--- a/packages/ui/src/locales/ko-KR/index.json
+++ b/packages/ui/src/locales/ko-KR/index.json
@@ -5198,9 +5198,6 @@
   "settings.social.friend-requests.title": {
     "defaultMessage": "친구 요청"
   },
-  "settings.social.interaction-source.coming-soon": {
-    "defaultMessage": "곧 제공할 예정입니다!"
-  },
   "settings.social.interaction-source.everyone": {
     "defaultMessage": "모든 사람"
   },
diff --git a/packages/ui/src/locales/nl-NL/index.json b/packages/ui/src/locales/nl-NL/index.json
index 8fc3ce2911..f4841d3336 100644
--- a/packages/ui/src/locales/nl-NL/index.json
+++ b/packages/ui/src/locales/nl-NL/index.json
@@ -5207,9 +5207,6 @@
   "settings.social.friend-requests.title": {
     "defaultMessage": "Vriendschapsverzoeken"
   },
-  "settings.social.interaction-source.coming-soon": {
-    "defaultMessage": "Binnenkort beschikbaar!"
-  },
   "settings.social.interaction-source.everyone": {
     "defaultMessage": "Iedereen"
   },
diff --git a/packages/ui/src/locales/pl-PL/index.json b/packages/ui/src/locales/pl-PL/index.json
index 668d7d3105..1f8e491947 100644
--- a/packages/ui/src/locales/pl-PL/index.json
+++ b/packages/ui/src/locales/pl-PL/index.json
@@ -5180,9 +5180,6 @@
   "settings.social.friend-requests.title": {
     "defaultMessage": "Zaproszenia do znajomych"
   },
-  "settings.social.interaction-source.coming-soon": {
-    "defaultMessage": "Już wkrótce!"
-  },
   "settings.social.interaction-source.everyone": {
     "defaultMessage": "Wszyscy"
   },
diff --git a/packages/ui/src/locales/pt-BR/index.json b/packages/ui/src/locales/pt-BR/index.json
index 9109fd09e1..e8488b4d55 100644
--- a/packages/ui/src/locales/pt-BR/index.json
+++ b/packages/ui/src/locales/pt-BR/index.json
@@ -5216,9 +5216,6 @@
   "settings.social.friend-requests.title": {
     "defaultMessage": "Solicitações de amizade"
   },
-  "settings.social.interaction-source.coming-soon": {
-    "defaultMessage": "Em breve!"
-  },
   "settings.social.interaction-source.everyone": {
     "defaultMessage": "Todos"
   },
diff --git a/packages/ui/src/locales/ru-RU/index.json b/packages/ui/src/locales/ru-RU/index.json
index 300ad6222b..49da8428ab 100644
--- a/packages/ui/src/locales/ru-RU/index.json
+++ b/packages/ui/src/locales/ru-RU/index.json
@@ -5129,9 +5129,6 @@
   "settings.social.friend-requests.title": {
     "defaultMessage": "Запросы в друзья"
   },
-  "settings.social.interaction-source.coming-soon": {
-    "defaultMessage": "Скоро будет!"
-  },
   "settings.social.interaction-source.everyone": {
     "defaultMessage": "Все"
   },
diff --git a/packages/ui/src/locales/sv-SE/index.json b/packages/ui/src/locales/sv-SE/index.json
index becee3c7db..d1bc4f0a27 100644
--- a/packages/ui/src/locales/sv-SE/index.json
+++ b/packages/ui/src/locales/sv-SE/index.json
@@ -4640,9 +4640,6 @@
   "settings.social.friend-requests.title": {
     "defaultMessage": "Vänförfrågningar"
   },
-  "settings.social.interaction-source.coming-soon": {
-    "defaultMessage": "Kommer snart!"
-  },
   "settings.social.interaction-source.everyone": {
     "defaultMessage": "Alla"
   },
diff --git a/packages/ui/src/locales/uk-UA/index.json b/packages/ui/src/locales/uk-UA/index.json
index aaee4d6c6f..e6f8fd25fe 100644
--- a/packages/ui/src/locales/uk-UA/index.json
+++ b/packages/ui/src/locales/uk-UA/index.json
@@ -5195,9 +5195,6 @@
   "settings.social.friend-requests.title": {
     "defaultMessage": "Запити в друзі"
   },
-  "settings.social.interaction-source.coming-soon": {
-    "defaultMessage": "Незабаром!"
-  },
   "settings.social.interaction-source.everyone": {
     "defaultMessage": "Усі"
   },
diff --git a/packages/ui/src/locales/zh-CN/index.json b/packages/ui/src/locales/zh-CN/index.json
index 2b931124d4..80bb47584f 100644
--- a/packages/ui/src/locales/zh-CN/index.json
+++ b/packages/ui/src/locales/zh-CN/index.json
@@ -5216,9 +5216,6 @@
   "settings.social.friend-requests.title": {
     "defaultMessage": "好友邀请"
   },
-  "settings.social.interaction-source.coming-soon": {
-    "defaultMessage": "即将到来！"
-  },
   "settings.social.interaction-source.everyone": {
     "defaultMessage": "所有人"
   },
diff --git a/packages/ui/src/locales/zh-TW/index.json b/packages/ui/src/locales/zh-TW/index.json
index ec929c546b..b56c925dba 100644
--- a/packages/ui/src/locales/zh-TW/index.json
+++ b/packages/ui/src/locales/zh-TW/index.json
@@ -5216,9 +5216,6 @@
   "settings.social.friend-requests.title": {
     "defaultMessage": "好友邀請"
   },
-  "settings.social.interaction-source.coming-soon": {
-    "defaultMessage": "即將推出！"
-  },
   "settings.social.interaction-source.everyone": {
     "defaultMessage": "所有人"
   },
diff --git a/packages/ui/src/providers/i18n.ts b/packages/ui/src/providers/i18n.ts
index 99b5d70e92..10b737b1fa 100644
--- a/packages/ui/src/providers/i18n.ts
+++ b/packages/ui/src/providers/i18n.ts
@@ -5,7 +5,7 @@ import { inject, provide } from 'vue'
 export interface I18nContext {
 	locale: Ref<string>
 	t: (key: string, values?: Record<string, unknown>) => string
-	setLocale: (locale: string) => Promise<void> | void
+	setLocale: (locale: string, options?: { persist?: boolean }) => Promise<void> | void
 }
 
 export const I18N_INJECTION_KEY: InjectionKey<I18nContext> = Symbol('i18n')
diff --git a/packages/ui/src/providers/index.ts b/packages/ui/src/providers/index.ts
index d86d8310ff..058648865c 100644
--- a/packages/ui/src/providers/index.ts
+++ b/packages/ui/src/providers/index.ts
@@ -19,4 +19,5 @@ export * from './server-context'
 export * from './server-settings-modal'
 export * from './tags'
 export * from './user-country'
+export * from './user-preferences'
 export * from './web-notifications'
diff --git a/packages/ui/src/providers/user-preferences.ts b/packages/ui/src/providers/user-preferences.ts
new file mode 100644
index 0000000000..da5bd8ec16
--- /dev/null
+++ b/packages/ui/src/providers/user-preferences.ts
@@ -0,0 +1,116 @@
+import type { Labrinth } from '@modrinth/api-client'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
+import { computed, type ComputedRef } from 'vue'
+
+import { defineMessages, useVIntl } from '../composables/i18n'
+import type { AuthProvider } from './auth'
+import { createContext } from './create-context'
+import type { AbstractWebNotificationManager } from './web-notifications'
+
+export const userPreferencesQueryKey = (userId: string | null | undefined) =>
+	['user', userId ?? null, 'preferences', 'v3'] as const
+
+export interface UserPreferencesContext {
+	preferences: ComputedRef<Labrinth.Users.v3.UserPreferences | undefined>
+	isLoading: ComputedRef<boolean>
+	isUpdating: ComputedRef<boolean>
+	updatePreferences: (
+		preferences: Labrinth.Users.v3.PartialUserPreferences,
+	) => Promise<Labrinth.Users.v3.UserPreferences | undefined>
+}
+
+const [injectUserPreferencesContext, provideUserPreferencesContext] =
+	createContext<UserPreferencesContext>('root', 'userPreferences')
+
+export const injectUserPreferences = injectUserPreferencesContext
+
+const messages = defineMessages({
+	updateFailedTitle: {
+		id: 'settings.preferences.update-failed.title',
+		defaultMessage: 'Failed to sync settings',
+	},
+	updateFailedDescription: {
+		id: 'settings.preferences.update-failed.description',
+		defaultMessage: 'Your settings could not be saved to your Modrinth account. Please try again.',
+	},
+})
+
+export function setupUserPreferencesProvider({
+	auth,
+	getPreferences,
+	patchPreferences,
+	notificationManager,
+}: {
+	auth: AuthProvider
+	getPreferences: (userId: string) => Promise<Labrinth.Users.v3.UserPreferences>
+	patchPreferences: (
+		userId: string,
+		preferences: Labrinth.Users.v3.PartialUserPreferences,
+	) => Promise<Labrinth.Users.v3.UserPreferences>
+	notificationManager: AbstractWebNotificationManager
+}): UserPreferencesContext {
+	const queryClient = useQueryClient()
+	const { formatMessage } = useVIntl()
+	const userId = computed(() => auth.user.value?.id ?? null)
+
+	const preferencesQuery = useQuery({
+		queryKey: computed(() => userPreferencesQueryKey(userId.value)),
+		queryFn: () => {
+			if (!userId.value) {
+				throw new Error('A signed-in user is required to fetch preferences')
+			}
+
+			return getPreferences(userId.value)
+		},
+		enabled: computed(() => Boolean(userId.value)),
+		staleTime: 30_000,
+	})
+
+	let updateQueue = Promise.resolve()
+	const preferencesMutation = useMutation({
+		mutationFn: ({
+			userId,
+			preferences,
+		}: {
+			userId: string
+			preferences: Labrinth.Users.v3.PartialUserPreferences
+		}) => {
+			const request = updateQueue.then(() => patchPreferences(userId, preferences))
+			updateQueue = request.then(
+				() => undefined,
+				() => undefined,
+			)
+			return request
+		},
+		onSuccess: (preferences, variables) => {
+			queryClient.setQueryData(userPreferencesQueryKey(variables.userId), preferences)
+		},
+		onError: (_error, variables) => {
+			void queryClient.invalidateQueries({
+				queryKey: userPreferencesQueryKey(variables.userId),
+			})
+			notificationManager.addNotification({
+				type: 'warning',
+				title: formatMessage(messages.updateFailedTitle),
+				text: formatMessage(messages.updateFailedDescription),
+			})
+		},
+	})
+
+	const context: UserPreferencesContext = {
+		preferences: computed(() => preferencesQuery.data.value),
+		isLoading: computed(() => preferencesQuery.isLoading.value),
+		isUpdating: computed(() => preferencesMutation.isPending.value),
+		updatePreferences: async (preferences) => {
+			if (!userId.value) return undefined
+
+			return preferencesMutation.mutateAsync({
+				userId: userId.value,
+				preferences,
+			})
+		},
+	}
+
+	provideUserPreferencesContext(context)
+	return context
+}
diff --git a/packages/ui/src/utils/savable.ts b/packages/ui/src/utils/savable.ts
index 32406637aa..5956d04090 100644
--- a/packages/ui/src/utils/savable.ts
+++ b/packages/ui/src/utils/savable.ts
@@ -1,6 +1,6 @@
 import { cloneDeep, isEqual } from 'es-toolkit'
 import type { ComputedRef, Ref } from 'vue'
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 
 export function useSavable<T extends Record<string, unknown>>(
 	data: () => T,
@@ -31,6 +31,16 @@ export function useSavable<T extends Record<string, unknown>>(
 
 	const hasChanges = computed(() => Object.keys(changes.value).length > 0)
 
+	watch(
+		savedValues,
+		(value, previousValue) => {
+			if (isEqual(currentValues.value, previousValue)) {
+				currentValues.value = cloneDeep(value)
+			}
+		},
+		{ deep: true },
+	)
+
 	const reset = () => {
 		currentValues.value = cloneDeep(data())
 	}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3375d44f6e..bbb9f3068b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -97,7 +97,7 @@ importers:
         version: link:../../packages/utils
       '@sentry/vue':
         specifier: ^8.27.0
-        version: 8.55.0(pinia@3.0.4(typescript@5.9.3)(vue@3.5.27(typescript@5.9.3)))(vue@3.5.27(typescript@5.9.3))
+        version: 8.55.0(vue@3.5.27(typescript@5.9.3))
       '@sfirew/minecraft-motd-parser':
         specifier: ^1.1.6
         version: 1.1.6
@@ -152,9 +152,6 @@ importers:
       overlayscrollbars:
         specifier: ^2.15.1
         version: 2.15.1
-      pinia:
-        specifier: ^3.0.0
-        version: 3.0.4(typescript@5.9.3)(vue@3.5.27(typescript@5.9.3))
       posthog-js:
         specifier: ^1.158.2
         version: 1.337.1
@@ -295,7 +292,7 @@ importers:
         version: link:../../packages/utils
       '@sentry/nuxt':
         specifier: ^10.33.0
-        version: 10.38.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@2.5.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.5.0(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.211.0(@opentelemetry/api@1.9.0))(@opentelemetry/resources@2.5.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.5.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.39.0)(magicast@0.5.1)(nuxt@3.20.2(@parcel/watcher@2.5.6)(@types/node@24.12.2)(@vue/compiler-sfc@3.5.27)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@2.6.1))(ioredis@5.9.2)(lightningcss@1.32.0)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-rc.12)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2))(pinia@3.0.4(typescript@5.9.3)(vue@3.5.27(typescript@5.9.3)))(rollup@4.57.1)(vue@3.5.27(typescript@5.9.3))
+        version: 10.38.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@2.5.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.5.0(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.211.0(@opentelemetry/api@1.9.0))(@opentelemetry/resources@2.5.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.5.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.39.0)(magicast@0.5.1)(nuxt@3.20.2(@parcel/watcher@2.5.6)(@types/node@24.12.2)(@vue/compiler-sfc@3.5.27)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@2.6.1))(ioredis@5.9.2)(lightningcss@1.32.0)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-rc.12)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2))(rollup@4.57.1)(vue@3.5.27(typescript@5.9.3))
       '@tanstack/vue-query':
         specifier: 5.90.7
         version: 5.90.7(vue@3.5.27(typescript@5.9.3))
@@ -672,7 +669,7 @@ importers:
         version: 5.90.7(vue@3.5.27(typescript@5.9.3))
       '@tresjs/cientos':
         specifier: ^4.3.0
-        version: 4.3.1(@tresjs/core@4.3.6(three@0.172.0)(typescript@5.9.3)(vue@3.5.27(typescript@5.9.3)))(@types/three@0.172.0)(react@19.2.4)(three@0.172.0)(typescript@5.9.3)(vue@3.5.27(typescript@5.9.3))
+        version: 4.3.1(@tresjs/core@4.3.6(three@0.172.0)(typescript@5.9.3)(vue@3.5.27(typescript@5.9.3)))(@types/three@0.172.0)(react@19.2.8)(three@0.172.0)(typescript@5.9.3)(vue@3.5.27(typescript@5.9.3))
       '@tresjs/core':
         specifier: ^4.3.4
         version: 4.3.6(three@0.172.0)(typescript@5.9.3)(vue@3.5.27(typescript@5.9.3))
@@ -744,7 +741,7 @@ importers:
         version: 13.0.2
       motion-v:
         specifier: ^2.2.1
-        version: 2.2.1(@vueuse/core@11.3.0(vue@3.5.27(typescript@5.9.3)))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(vue@3.5.27(typescript@5.9.3))
+        version: 2.2.1(@vueuse/core@11.3.0(vue@3.5.27(typescript@5.9.3)))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(vue@3.5.27(typescript@5.9.3))
       overlayscrollbars:
         specifier: ^2.15.1
         version: 2.15.1
@@ -784,16 +781,16 @@ importers:
         version: link:../tooling-config
       '@storybook/addon-a11y':
         specifier: ^10.1.10
-        version: 10.2.4(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))
+        version: 10.2.4(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))
       '@storybook/addon-themes':
         specifier: ^10.1.10
-        version: 10.2.4(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))
+        version: 10.2.4(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))
       '@storybook/builder-vite':
         specifier: ^10.1.10
-        version: 10.2.4(esbuild@0.28.1)(rollup@4.57.1)(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vite@5.4.21(@types/node@24.12.2)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0))
+        version: 10.2.4(esbuild@0.28.1)(rollup@4.57.1)(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(vite@5.4.21(@types/node@24.12.2)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0))
       '@storybook/vue3-vite':
         specifier: ^10.1.10
-        version: 10.2.4(esbuild@0.28.1)(rollup@4.57.1)(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vite@5.4.21(@types/node@24.12.2)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0))(vue@3.5.27(typescript@5.9.3))
+        version: 10.2.4(esbuild@0.28.1)(rollup@4.57.1)(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(vite@5.4.21(@types/node@24.12.2)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0))(vue@3.5.27(typescript@5.9.3))
       '@stripe/stripe-js':
         specifier: ^7.3.1
         version: 7.9.0
@@ -805,10 +802,10 @@ importers:
         version: 5.2.4(vite@5.4.21(@types/node@24.12.2)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0))(vue@3.5.27(typescript@5.9.3))
       eslint-plugin-storybook:
         specifier: ^10.1.10
-        version: 10.2.4(eslint@9.39.2(jiti@2.6.1))(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3)
+        version: 10.2.4(eslint@9.39.2(jiti@2.6.1))(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(typescript@5.9.3)
       storybook:
         specifier: ^10.1.10
-        version: 10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+        version: 10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       stripe:
         specifier: ^18.1.1
         version: 18.5.0(@types/node@24.12.2)
@@ -966,10 +963,6 @@ packages:
     resolution: {integrity: sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/code-frame@7.29.7':
-    resolution: {integrity: sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/compat-data@7.29.0':
     resolution: {integrity: sha512-T1NCJqT/j9+cn8fvkt7jtwbLBfLC/1y1c7NtCeXFRgzGTsafi68MRv8yzkYSapBnFA6L3U2VSc02ciDzoAJhJg==}
     engines: {node: '>=6.9.0'}
@@ -1040,10 +1033,6 @@ packages:
     resolution: {integrity: sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-validator-identifier@7.29.7':
-    resolution: {integrity: sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/helper-validator-option@7.27.1':
     resolution: {integrity: sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==}
     engines: {node: '>=6.9.0'}
@@ -1079,10 +1068,6 @@ packages:
     resolution: {integrity: sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/runtime@7.29.7':
-    resolution: {integrity: sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/template@7.28.6':
     resolution: {integrity: sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==}
     engines: {node: '>=6.9.0'}
@@ -5165,23 +5150,14 @@ packages:
   '@vue/devtools-api@6.6.4':
     resolution: {integrity: sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==}
 
-  '@vue/devtools-api@7.7.9':
-    resolution: {integrity: sha512-kIE8wvwlcZ6TJTbNeU2HQNtaxLx3a84aotTITUuL/4bzfPxzajGBOoqjMhwZJ8L9qFYDU/lAYMEEm11dnZOD6g==}
-
   '@vue/devtools-core@8.0.5':
     resolution: {integrity: sha512-dpCw8nl0GDBuiL9SaY0mtDxoGIEmU38w+TQiYEPOLhW03VDC0lfNMYXS/qhl4I0YlysGp04NLY4UNn6xgD0VIQ==}
     peerDependencies:
       vue: ^3.0.0
 
-  '@vue/devtools-kit@7.7.9':
-    resolution: {integrity: sha512-PyQ6odHSgiDVd4hnTP+aDk2X4gl2HmLDfiyEnn3/oV+ckFDuswRs4IbBT7vacMuGdwY/XemxBoh302ctbsptuA==}
-
   '@vue/devtools-kit@8.0.5':
     resolution: {integrity: sha512-q2VV6x1U3KJMTQPUlRMyWEKVbcHuxhqJdSr6Jtjz5uAThAIrfJ6WVZdGZm5cuO63ZnSUz0RCsVwiUUb0mDV0Yg==}
 
-  '@vue/devtools-shared@7.7.9':
-    resolution: {integrity: sha512-iWAb0v2WYf0QWmxCGy0seZNDPdO3Sp5+u78ORnyeonS6MT4PC7VPrryX2BpMJrwlDeaZ6BD4vP4XKjK0SZqaeA==}
-
   '@vue/devtools-shared@8.0.5':
     resolution: {integrity: sha512-bRLn6/spxpmgLk+iwOrR29KrYnJjG9DGpHGkDFG82UM21ZpJ39ztUT9OXX3g+usW7/b2z+h46I9ZiYyB07XMXg==}
 
@@ -8229,9 +8205,6 @@ packages:
   peberminta@0.9.0:
     resolution: {integrity: sha512-XIxfHpEuSJbITd1H3EeQwpcZbTLHc+VVr8ANI9t5sit565tsI4/xK3KWTUFE2e6QiangUkh3B0jihzmGnNrRsQ==}
 
-  perfect-debounce@1.0.0:
-    resolution: {integrity: sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==}
-
   perfect-debounce@2.1.0:
     resolution: {integrity: sha512-LjgdTytVFXeUgtHZr9WYViYSM/g8MkcTPYDlPa3cDqMirHjKiSZPYd6DoL7pK8AJQr+uWkQvCjHNdiMqsrJs+g==}
 
@@ -8268,15 +8241,6 @@ packages:
     resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
     engines: {node: '>=0.10.0'}
 
-  pinia@3.0.4:
-    resolution: {integrity: sha512-l7pqLUFTI/+ESXn6k3nu30ZIzW5E2WZF/LaHJEpoq6ElcLD+wduZoB2kBN19du6K/4FDpPMazY2wJr+IndBtQw==}
-    peerDependencies:
-      typescript: '>=4.5.0'
-      vue: ^3.5.11
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
   pirates@4.0.7:
     resolution: {integrity: sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==}
     engines: {node: '>= 6'}
@@ -8749,16 +8713,16 @@ packages:
   rc9@2.1.2:
     resolution: {integrity: sha512-btXCnMmRIBINM2LDZoEmOogIZU7Qe7zn4BpomSKZ/ykbLObuBdvG+mFq11DL6fjH1DRwHhrlgtYWG96bJiC7Cg==}
 
-  react-dom@19.2.4:
-    resolution: {integrity: sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==}
+  react-dom@19.2.8:
+    resolution: {integrity: sha512-rVprimfGBG3DR+Tq0IQG2DT5PxKth1WIGDmj5yPmlzr4YBe7uyE+Du4oVqTDXZSHGGGXRtTJEGSSePyQCMBglQ==}
     peerDependencies:
-      react: ^19.2.4
+      react: ^19.2.8
 
   react-is@17.0.2:
     resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
 
-  react@19.2.4:
-    resolution: {integrity: sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==}
+  react@19.2.8:
+    resolution: {integrity: sha512-PWaYA1L/q9u2u7xYQi+Y3L3Yfnie7XyLeaJICV1MGD6LprsBxcAqGjYyr0eY3p+QdsA+x/Irkt4Qif8D63+Sbw==}
     engines: {node: '>=0.10.0'}
 
   read-cache@1.0.0:
@@ -10758,12 +10722,6 @@ snapshots:
       js-tokens: 4.0.0
       picocolors: 1.1.1
 
-  '@babel/code-frame@7.29.7':
-    dependencies:
-      '@babel/helper-validator-identifier': 7.29.7
-      js-tokens: 4.0.0
-      picocolors: 1.1.1
-
   '@babel/compat-data@7.29.0': {}
 
   '@babel/core@7.29.0':
@@ -10870,8 +10828,6 @@ snapshots:
 
   '@babel/helper-validator-identifier@7.28.5': {}
 
-  '@babel/helper-validator-identifier@7.29.7': {}
-
   '@babel/helper-validator-option@7.27.1': {}
 
   '@babel/helpers@7.28.6':
@@ -10906,8 +10862,6 @@ snapshots:
 
   '@babel/runtime@7.28.6': {}
 
-  '@babel/runtime@7.29.7': {}
-
   '@babel/template@7.28.6':
     dependencies:
       '@babel/code-frame': 7.29.0
@@ -13725,7 +13679,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@sentry/nuxt@10.38.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@2.5.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.5.0(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.211.0(@opentelemetry/api@1.9.0))(@opentelemetry/resources@2.5.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.5.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.39.0)(magicast@0.5.1)(nuxt@3.20.2(@parcel/watcher@2.5.6)(@types/node@24.12.2)(@vue/compiler-sfc@3.5.27)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@2.6.1))(ioredis@5.9.2)(lightningcss@1.32.0)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-rc.12)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2))(pinia@3.0.4(typescript@5.9.3)(vue@3.5.27(typescript@5.9.3)))(rollup@4.57.1)(vue@3.5.27(typescript@5.9.3))':
+  '@sentry/nuxt@10.38.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@2.5.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.5.0(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.211.0(@opentelemetry/api@1.9.0))(@opentelemetry/resources@2.5.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.5.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.39.0)(magicast@0.5.1)(nuxt@3.20.2(@parcel/watcher@2.5.6)(@types/node@24.12.2)(@vue/compiler-sfc@3.5.27)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@2.6.1))(ioredis@5.9.2)(lightningcss@1.32.0)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-rc.12)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2))(rollup@4.57.1)(vue@3.5.27(typescript@5.9.3))':
     dependencies:
       '@nuxt/kit': 3.21.0(magicast@0.5.1)
       '@sentry/browser': 10.38.0
@@ -13735,7 +13689,7 @@ snapshots:
       '@sentry/node-core': 10.38.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@2.5.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.5.0(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.211.0(@opentelemetry/api@1.9.0))(@opentelemetry/resources@2.5.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.5.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.39.0)
       '@sentry/rollup-plugin': 4.9.0(rollup@4.57.1)
       '@sentry/vite-plugin': 4.9.0
-      '@sentry/vue': 10.38.0(pinia@3.0.4(typescript@5.9.3)(vue@3.5.27(typescript@5.9.3)))(vue@3.5.27(typescript@5.9.3))
+      '@sentry/vue': 10.38.0(vue@3.5.27(typescript@5.9.3))
       nuxt: 3.20.2(@parcel/watcher@2.5.6)(@types/node@24.12.2)(@vue/compiler-sfc@3.5.27)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@2.6.1))(ioredis@5.9.2)(lightningcss@1.32.0)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-rc.12)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2)
     transitivePeerDependencies:
       - '@cloudflare/workers-types'
@@ -13780,21 +13734,17 @@ snapshots:
       - encoding
       - supports-color
 
-  '@sentry/vue@10.38.0(pinia@3.0.4(typescript@5.9.3)(vue@3.5.27(typescript@5.9.3)))(vue@3.5.27(typescript@5.9.3))':
+  '@sentry/vue@10.38.0(vue@3.5.27(typescript@5.9.3))':
     dependencies:
       '@sentry/browser': 10.38.0
       '@sentry/core': 10.38.0
       vue: 3.5.27(typescript@5.9.3)
-    optionalDependencies:
-      pinia: 3.0.4(typescript@5.9.3)(vue@3.5.27(typescript@5.9.3))
 
-  '@sentry/vue@8.55.0(pinia@3.0.4(typescript@5.9.3)(vue@3.5.27(typescript@5.9.3)))(vue@3.5.27(typescript@5.9.3))':
+  '@sentry/vue@8.55.0(vue@3.5.27(typescript@5.9.3))':
     dependencies:
       '@sentry/browser': 8.55.0
       '@sentry/core': 8.55.0
       vue: 3.5.27(typescript@5.9.3)
-    optionalDependencies:
-      pinia: 3.0.4(typescript@5.9.3)(vue@3.5.27(typescript@5.9.3))
 
   '@sfirew/minecraft-motd-parser@1.1.6': {}
 
@@ -13870,21 +13820,21 @@ snapshots:
 
   '@speed-highlight/core@1.2.14': {}
 
-  '@storybook/addon-a11y@10.2.4(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))':
+  '@storybook/addon-a11y@10.2.4(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))':
     dependencies:
       '@storybook/global': 5.0.0
       axe-core: 4.11.1
-      storybook: 10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      storybook: 10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
 
-  '@storybook/addon-themes@10.2.4(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))':
+  '@storybook/addon-themes@10.2.4(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))':
     dependencies:
-      storybook: 10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      storybook: 10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       ts-dedent: 2.2.0
 
-  '@storybook/builder-vite@10.2.4(esbuild@0.28.1)(rollup@4.57.1)(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vite@5.4.21(@types/node@24.12.2)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0))':
+  '@storybook/builder-vite@10.2.4(esbuild@0.28.1)(rollup@4.57.1)(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(vite@5.4.21(@types/node@24.12.2)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0))':
     dependencies:
-      '@storybook/csf-plugin': 10.2.4(esbuild@0.28.1)(rollup@4.57.1)(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vite@5.4.21(@types/node@24.12.2)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0))
-      storybook: 10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@storybook/csf-plugin': 10.2.4(esbuild@0.28.1)(rollup@4.57.1)(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(vite@5.4.21(@types/node@24.12.2)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0))
+      storybook: 10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       ts-dedent: 2.2.0
       vite: 5.4.21(@types/node@24.12.2)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)
     transitivePeerDependencies:
@@ -13892,9 +13842,9 @@ snapshots:
       - rollup
       - webpack
 
-  '@storybook/csf-plugin@10.2.4(esbuild@0.28.1)(rollup@4.57.1)(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vite@5.4.21(@types/node@24.12.2)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0))':
+  '@storybook/csf-plugin@10.2.4(esbuild@0.28.1)(rollup@4.57.1)(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(vite@5.4.21(@types/node@24.12.2)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0))':
     dependencies:
-      storybook: 10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      storybook: 10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       unplugin: 2.3.11
     optionalDependencies:
       esbuild: 0.28.1
@@ -13903,17 +13853,17 @@ snapshots:
 
   '@storybook/global@5.0.0': {}
 
-  '@storybook/icons@2.0.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+  '@storybook/icons@2.0.1(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
-      react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
 
-  '@storybook/vue3-vite@10.2.4(esbuild@0.28.1)(rollup@4.57.1)(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vite@5.4.21(@types/node@24.12.2)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0))(vue@3.5.27(typescript@5.9.3))':
+  '@storybook/vue3-vite@10.2.4(esbuild@0.28.1)(rollup@4.57.1)(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(vite@5.4.21(@types/node@24.12.2)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0))(vue@3.5.27(typescript@5.9.3))':
     dependencies:
-      '@storybook/builder-vite': 10.2.4(esbuild@0.28.1)(rollup@4.57.1)(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vite@5.4.21(@types/node@24.12.2)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0))
-      '@storybook/vue3': 10.2.4(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vue@3.5.27(typescript@5.9.3))
+      '@storybook/builder-vite': 10.2.4(esbuild@0.28.1)(rollup@4.57.1)(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(vite@5.4.21(@types/node@24.12.2)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0))
+      '@storybook/vue3': 10.2.4(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(vue@3.5.27(typescript@5.9.3))
       magic-string: 0.30.21
-      storybook: 10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      storybook: 10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       typescript: 5.9.3
       vite: 5.4.21(@types/node@24.12.2)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)
       vue-component-meta: 2.2.12(typescript@5.9.3)
@@ -13924,10 +13874,10 @@ snapshots:
       - vue
       - webpack
 
-  '@storybook/vue3@10.2.4(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vue@3.5.27(typescript@5.9.3))':
+  '@storybook/vue3@10.2.4(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(vue@3.5.27(typescript@5.9.3))':
     dependencies:
       '@storybook/global': 5.0.0
-      storybook: 10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      storybook: 10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       type-fest: 2.19.0
       vue: 3.5.27(typescript@5.9.3)
       vue-component-type-helpers: 3.3.9
@@ -14152,8 +14102,8 @@ snapshots:
 
   '@testing-library/dom@10.4.1':
     dependencies:
-      '@babel/code-frame': 7.29.7
-      '@babel/runtime': 7.29.7
+      '@babel/code-frame': 7.29.0
+      '@babel/runtime': 7.28.6
       '@types/aria-query': 5.0.4
       aria-query: 5.3.0
       dom-accessibility-api: 0.5.16
@@ -14174,7 +14124,7 @@ snapshots:
     dependencies:
       '@testing-library/dom': 10.4.1
 
-  '@tresjs/cientos@4.3.1(@tresjs/core@4.3.6(three@0.172.0)(typescript@5.9.3)(vue@3.5.27(typescript@5.9.3)))(@types/three@0.172.0)(react@19.2.4)(three@0.172.0)(typescript@5.9.3)(vue@3.5.27(typescript@5.9.3))':
+  '@tresjs/cientos@4.3.1(@tresjs/core@4.3.6(three@0.172.0)(typescript@5.9.3)(vue@3.5.27(typescript@5.9.3)))(@types/three@0.172.0)(react@19.2.8)(three@0.172.0)(typescript@5.9.3)(vue@3.5.27(typescript@5.9.3))':
     dependencies:
       '@tresjs/core': 4.3.6(three@0.172.0)(typescript@5.9.3)(vue@3.5.27(typescript@5.9.3))
       '@vueuse/core': 12.8.2(typescript@5.9.3)
@@ -14182,7 +14132,7 @@ snapshots:
       stats-gl: 2.4.2(@types/three@0.172.0)(three@0.172.0)
       stats.js: 0.17.0
       three: 0.172.0
-      three-custom-shader-material: 5.4.0(react@19.2.4)(three@0.172.0)
+      three-custom-shader-material: 5.4.0(react@19.2.8)(three@0.172.0)
       three-stdlib: 2.36.1(three@0.172.0)
       vue: 3.5.27(typescript@5.9.3)
     transitivePeerDependencies:
@@ -14946,10 +14896,6 @@ snapshots:
 
   '@vue/devtools-api@6.6.4': {}
 
-  '@vue/devtools-api@7.7.9':
-    dependencies:
-      '@vue/devtools-kit': 7.7.9
-
   '@vue/devtools-core@8.0.5(vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.27(typescript@5.9.3))':
     dependencies:
       '@vue/devtools-kit': 8.0.5
@@ -14962,16 +14908,6 @@ snapshots:
     transitivePeerDependencies:
       - vite
 
-  '@vue/devtools-kit@7.7.9':
-    dependencies:
-      '@vue/devtools-shared': 7.7.9
-      birpc: 2.9.0
-      hookable: 5.5.3
-      mitt: 3.0.1
-      perfect-debounce: 1.0.0
-      speakingurl: 14.0.1
-      superjson: 2.2.6
-
   '@vue/devtools-kit@8.0.5':
     dependencies:
       '@vue/devtools-shared': 8.0.5
@@ -14982,10 +14918,6 @@ snapshots:
       speakingurl: 14.0.1
       superjson: 2.2.6
 
-  '@vue/devtools-shared@7.7.9':
-    dependencies:
-      rfdc: 1.4.1
-
   '@vue/devtools-shared@8.0.5':
     dependencies:
       rfdc: 1.4.1
@@ -16377,11 +16309,11 @@ snapshots:
     dependencies:
       eslint: 9.39.2(jiti@2.6.1)
 
-  eslint-plugin-storybook@10.2.4(eslint@9.39.2(jiti@2.6.1))(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3):
+  eslint-plugin-storybook@10.2.4(eslint@9.39.2(jiti@2.6.1))(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(typescript@5.9.3):
     dependencies:
       '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
       eslint: 9.39.2(jiti@2.6.1)
-      storybook: 10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      storybook: 10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -16807,14 +16739,14 @@ snapshots:
 
   fraction.js@5.3.4: {}
 
-  framer-motion@12.38.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
+  framer-motion@12.38.0(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
     dependencies:
       motion-dom: 12.38.0
       motion-utils: 12.36.0
       tslib: 2.8.1
     optionalDependencies:
-      react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
 
   fresh@2.0.0: {}
 
@@ -18395,10 +18327,10 @@ snapshots:
 
   motion-utils@12.36.0: {}
 
-  motion-v@2.2.1(@vueuse/core@11.3.0(vue@3.5.27(typescript@5.9.3)))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(vue@3.5.27(typescript@5.9.3)):
+  motion-v@2.2.1(@vueuse/core@11.3.0(vue@3.5.27(typescript@5.9.3)))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(vue@3.5.27(typescript@5.9.3)):
     dependencies:
       '@vueuse/core': 11.3.0(vue@3.5.27(typescript@5.9.3))
-      framer-motion: 12.38.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      framer-motion: 12.38.0(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       hey-listen: 1.0.8
       motion-dom: 12.38.0
       motion-utils: 12.36.0
@@ -19001,8 +18933,6 @@ snapshots:
 
   peberminta@0.9.0: {}
 
-  perfect-debounce@1.0.0: {}
-
   perfect-debounce@2.1.0: {}
 
   pg-int8@1.0.1: {}
@@ -19029,13 +18959,6 @@ snapshots:
 
   pify@2.3.0: {}
 
-  pinia@3.0.4(typescript@5.9.3)(vue@3.5.27(typescript@5.9.3)):
-    dependencies:
-      '@vue/devtools-api': 7.7.9
-      vue: 3.5.27(typescript@5.9.3)
-    optionalDependencies:
-      typescript: 5.9.3
-
   pirates@4.0.7: {}
 
   pkg-types@1.3.1:
@@ -19464,14 +19387,14 @@ snapshots:
       defu: 6.1.4
       destr: 2.0.5
 
-  react-dom@19.2.4(react@19.2.4):
+  react-dom@19.2.8(react@19.2.8):
     dependencies:
-      react: 19.2.4
+      react: 19.2.8
       scheduler: 0.27.0
 
   react-is@17.0.2: {}
 
-  react@19.2.4: {}
+  react@19.2.8: {}
 
   read-cache@1.0.0:
     dependencies:
@@ -20187,10 +20110,10 @@ snapshots:
 
   std-env@3.10.0: {}
 
-  storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
+  storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
     dependencies:
       '@storybook/global': 5.0.0
-      '@storybook/icons': 2.0.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@storybook/icons': 2.0.1(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@testing-library/jest-dom': 6.9.1
       '@testing-library/user-event': 14.6.1(@testing-library/dom@10.4.1)
       '@vitest/expect': 3.2.4
@@ -20199,7 +20122,7 @@ snapshots:
       open: 10.2.0
       recast: 0.23.11
       semver: 7.7.3
-      use-sync-external-store: 1.6.0(react@19.2.4)
+      use-sync-external-store: 1.6.0(react@19.2.8)
       ws: 8.19.0
     optionalDependencies:
       prettier: 3.8.1
@@ -20428,7 +20351,7 @@ snapshots:
     dependencies:
       any-promise: 1.3.0
 
-  three-custom-shader-material@5.4.0(react@19.2.4)(three@0.172.0):
+  three-custom-shader-material@5.4.0(react@19.2.8)(three@0.172.0):
     dependencies:
       glsl-token-functions: 1.0.1
       glsl-token-string: 1.0.1
@@ -20436,7 +20359,7 @@ snapshots:
       object-hash: 3.0.0
       three: 0.172.0
     optionalDependencies:
-      react: 19.2.4
+      react: 19.2.8
 
   three-stdlib@2.36.1(three@0.172.0):
     dependencies:
@@ -20834,9 +20757,9 @@ snapshots:
 
   url-template@3.1.1: {}
 
-  use-sync-external-store@1.6.0(react@19.2.4):
+  use-sync-external-store@1.6.0(react@19.2.8):
     dependencies:
-      react: 19.2.4
+      react: 19.2.8
 
   util-deprecate@1.0.2: {}
 
diff --git a/scripts/coverage-i18n.ts b/scripts/coverage-i18n.ts
index c28636ed99..c936540e05 100644
--- a/scripts/coverage-i18n.ts
+++ b/scripts/coverage-i18n.ts
@@ -13,6 +13,9 @@ import { parse as parseVue } from '@vue/compiler-sfc'
 import chalk from 'chalk'
 import * as fs from 'node:fs'
 import * as path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+import { contractFromMessage, translationCompatibleWithSource } from './i18n-icu-contract.ts'
 
 interface FileResult {
 	path: string
@@ -39,6 +42,38 @@ interface CoverageReport {
 	filesNeedingWork: FileResult[]
 }
 
+type MessageEntry = string | { message?: string; defaultMessage?: string }
+type MessageFile = Record<string, MessageEntry>
+type LanguageProduct = 'app' | 'website'
+
+interface LanguageCoverageStats {
+	percentage: number
+	interfaceCoverage: number
+	translationCoverage: number
+	translatedMessages: number
+	totalMessages: number
+	unlocalizedStrings: number
+}
+
+type LanguageCoverageByProduct = Record<
+	LanguageProduct,
+	Record<string, LanguageCoverageStats>
+>
+
+const PRODUCT_SCOPES: Record<
+	LanguageProduct,
+	{ sourceDirectories: string[]; catalogScopes: string[] }
+> = {
+	app: {
+		sourceDirectories: ['apps/app-frontend/src', 'packages/ui/src'],
+		catalogScopes: ['apps/app-frontend', 'packages/ui'],
+	},
+	website: {
+		sourceDirectories: ['apps/frontend/src', 'packages/moderation/src', 'packages/ui/src'],
+		catalogScopes: ['packages/ui', 'packages/moderation', 'apps/frontend'],
+	},
+}
+
 const theme = {
 	primary: chalk.cyan,
 	success: chalk.green,
@@ -456,6 +491,159 @@ function generateReport(results: FileResult[], rootDir: string): CoverageReport
 	return report
 }
 
+function messageText(entry: MessageEntry | undefined): string | undefined {
+	if (typeof entry === 'string') return entry
+	return entry?.message ?? entry?.defaultMessage
+}
+
+function readMessageFile(filePath: string): MessageFile {
+	if (!fs.existsSync(filePath)) return {}
+	return JSON.parse(fs.readFileSync(filePath, 'utf8')) as MessageFile
+}
+
+function mergeProductCatalog(
+	rootDir: string,
+	catalogScopes: string[],
+	locale: string,
+): MessageFile {
+	const merged: MessageFile = {}
+	for (const scope of catalogScopes) {
+		Object.assign(
+			merged,
+			readMessageFile(path.join(rootDir, scope, 'src/locales', locale, 'index.json')),
+		)
+	}
+	return merged
+}
+
+function getLocaleCodes(rootDir: string): string[] {
+	const localesDirectory = path.join(rootDir, 'packages/ui/src/locales')
+	return fs
+		.readdirSync(localesDirectory, { withFileTypes: true })
+		.filter(
+			(entry) =>
+				entry.isDirectory() &&
+				fs.existsSync(path.join(localesDirectory, entry.name, 'index.json')),
+		)
+		.map((entry) => entry.name)
+		.sort((left, right) => left.localeCompare(right))
+}
+
+function isValidTranslation(
+	key: string,
+	sourceEntry: MessageEntry,
+	translationEntry: MessageEntry | undefined,
+): boolean {
+	const source = messageText(sourceEntry)
+	const translation = messageText(translationEntry)
+	if (!source || !translation) return false
+
+	try {
+		return translationCompatibleWithSource(
+			contractFromMessage(source, `source:${key}`),
+			contractFromMessage(translation, `translation:${key}`),
+		)
+	} catch {
+		return false
+	}
+}
+
+function generateLanguageCoverage(
+	results: FileResult[],
+	rootDir: string,
+): LanguageCoverageByProduct {
+	const localeCodes = getLocaleCodes(rootDir)
+	const coverage: LanguageCoverageByProduct = { app: {}, website: {} }
+
+	for (const [product, definition] of Object.entries(PRODUCT_SCOPES) as [
+		LanguageProduct,
+		(typeof PRODUCT_SCOPES)[LanguageProduct],
+	][]) {
+		const sourceRoots = definition.sourceDirectories.map((directory) =>
+			`${path.join(rootDir, directory)}${path.sep}`,
+		)
+		const productResults = results.filter((result) =>
+			sourceRoots.some((sourceRoot) => result.path.startsWith(sourceRoot)),
+		)
+		const localizedUsages = productResults.reduce(
+			(total, result) => total + result.i18nUsages,
+			0,
+		)
+		const unlocalizedStrings = productResults.reduce(
+			(total, result) => total + result.plainStrings.length,
+			0,
+		)
+		const detectedStrings = localizedUsages + unlocalizedStrings
+		const interfaceCoverage =
+			detectedStrings > 0 ? Math.round((localizedUsages / detectedStrings) * 100) : 100
+		const sourceCatalog = mergeProductCatalog(rootDir, definition.catalogScopes, 'en-US')
+		const sourceEntries = Object.entries(sourceCatalog).filter(([, entry]) => messageText(entry))
+
+		for (const locale of localeCodes) {
+			const translationCatalog = mergeProductCatalog(rootDir, definition.catalogScopes, locale)
+			const translatedMessages =
+				locale === 'en-US'
+					? sourceEntries.length
+					: sourceEntries.filter(([key, source]) =>
+							isValidTranslation(key, source, translationCatalog[key]),
+						).length
+			const translationCoverage =
+				sourceEntries.length > 0
+					? Math.round((translatedMessages / sourceEntries.length) * 100)
+					: 100
+			const percentage =
+				locale === 'en-US'
+					? 100
+					: Math.round((interfaceCoverage * translationCoverage) / 100)
+
+			coverage[product][locale] = {
+				percentage,
+				interfaceCoverage,
+				translationCoverage,
+				translatedMessages,
+				totalMessages: sourceEntries.length,
+				unlocalizedStrings,
+			}
+		}
+	}
+
+	return coverage
+}
+
+function renderLanguageCoverageModule(coverage: LanguageCoverageByProduct): string {
+	const products = (
+		Object.entries(coverage) as [LanguageProduct, Record<string, LanguageCoverageStats>][]
+	).map(([product, locales]) => {
+			const localeEntries = Object.entries(locales)
+				.map(
+					([locale, stats]) =>
+						`\t\t'${locale}': {\n` +
+						`\t\t\tpercentage: ${stats.percentage},\n` +
+						`\t\t\tinterfaceCoverage: ${stats.interfaceCoverage},\n` +
+						`\t\t\ttranslationCoverage: ${stats.translationCoverage},\n` +
+						`\t\t\ttranslatedMessages: ${stats.translatedMessages},\n` +
+						`\t\t\ttotalMessages: ${stats.totalMessages},\n` +
+						`\t\t\tunlocalizedStrings: ${stats.unlocalizedStrings},\n` +
+						`\t\t},`,
+				)
+				.join('\n')
+			return `\t${product}: {\n${localeEntries}\n\t},`
+		})
+		.join('\n')
+
+	return `import type { LanguageCoverageByProduct } from './language-settings-coverage'\n\nexport const languageCoverage = {\n${products}\n} satisfies LanguageCoverageByProduct\n`
+}
+
+function writeLanguageCoverageModule(
+	rootDir: string,
+	outputPath: string,
+	coverage: LanguageCoverageByProduct,
+): void {
+	const resolvedOutput = path.resolve(rootDir, outputPath)
+	fs.mkdirSync(path.dirname(resolvedOutput), { recursive: true })
+	fs.writeFileSync(resolvedOutput, renderLanguageCoverageModule(coverage))
+}
+
 function progressBar(percent: number, width: number = 20): string {
 	const filled = Math.round((percent / 100) * width)
 	const empty = width - filled
@@ -564,13 +752,24 @@ function main() {
 	const args = process.argv.slice(2)
 	const verbose = args.includes('--verbose') || args.includes('-v')
 	const jsonOutput = args.includes('--json')
+	const quiet = args.includes('--quiet')
+	const writeIndex = args.indexOf('--write')
+	const writeOutput = writeIndex >= 0 ? args[writeIndex + 1] : undefined
+	if (writeIndex >= 0 && (!writeOutput || writeOutput.startsWith('--'))) {
+		throw new Error('--write requires an output path')
+	}
 
-	const rootDir = path.resolve(__dirname, '..')
+	const rootDir = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..')
 
 	// Directories to scan for Vue files
-	const scanDirs = ['apps/frontend/src', 'apps/app-frontend/src', 'packages/ui/src']
+	const scanDirs = [
+		'apps/frontend/src',
+		'apps/app-frontend/src',
+		'packages/ui/src',
+		'packages/moderation/src',
+	]
 
-	if (!jsonOutput) {
+	if (!jsonOutput && !quiet) {
 		console.log()
 		process.stdout.write(theme.muted('  Scanning Vue files... '))
 	}
@@ -584,7 +783,7 @@ function main() {
 		}
 	}
 
-	if (!jsonOutput) {
+	if (!jsonOutput && !quiet) {
 		console.log(`${icons.check} ${theme.highlight(allFiles.length)} files`)
 	}
 
@@ -598,10 +797,14 @@ function main() {
 	}
 
 	const report = generateReport(results, rootDir)
+	const languageCoverage = generateLanguageCoverage(results, rootDir)
+	if (writeOutput) {
+		writeLanguageCoverageModule(rootDir, writeOutput, languageCoverage)
+	}
 
 	if (jsonOutput) {
-		console.log(JSON.stringify(report, null, 2))
-	} else {
+		console.log(JSON.stringify({ ...report, languageCoverage }, null, 2))
+	} else if (!quiet) {
 		printReport(report, rootDir, verbose)
 	}
 }
diff --git a/scripts/run.mjs b/scripts/run.mjs
index 98c211306a..79a80754b5 100644
--- a/scripts/run.mjs
+++ b/scripts/run.mjs
@@ -14,10 +14,13 @@ if (!scriptName) {
 
 const scriptPath = join(__dirname, `${scriptName}.ts`)
 
-const child = spawn('pnpx', ['tsx', scriptPath, ...args], {
-	stdio: 'inherit',
-	shell: true,
-})
+const child = spawn(
+	process.execPath,
+	['--disable-warning=MODULE_TYPELESS_PACKAGE_JSON', scriptPath, ...args],
+	{
+		stdio: 'inherit',
+	},
+)
 
 child.on('exit', (code) => {
 	process.exit(code ?? 0)
diff --git a/turbo.jsonc b/turbo.jsonc
index 52c2727778..fae1c8dca6 100644
--- a/turbo.jsonc
+++ b/turbo.jsonc
@@ -16,7 +16,7 @@
 	],
 	"tasks": {
 		"build": {
-			"dependsOn": ["^build"],
+			"dependsOn": ["//#i18n:coverage", "^build"],
 			"inputs": ["$TURBO_DEFAULT$", ".env*"],
 			"outputs": [".nuxt/**", "dist/**", ".output/**", "$TURBO_ROOT$/target/**"],
 			"env": [
@@ -73,6 +73,25 @@
 			]
 		},
 		"lint:ancillary": {},
+		"//#i18n:coverage": {
+			"inputs": [
+				"package.json",
+				"scripts/run.mjs",
+				"scripts/coverage-i18n.ts",
+				"scripts/i18n-icu-contract.ts",
+				"apps/app-frontend/src/**/*.vue",
+				"apps/app-frontend/src/locales/**/*.json",
+				"apps/frontend/src/**/*.vue",
+				"apps/frontend/src/locales/**/*.json",
+				"packages/moderation/src/**/*.vue",
+				"packages/moderation/src/locales/**/*.json",
+				"packages/ui/src/**/*.vue",
+				"packages/ui/src/locales/**/*.json"
+			],
+			"outputs": [
+				"packages/ui/src/layouts/wrapped/settings/language-settings/language-settings-coverage.generated.ts"
+			]
+		},
 		"dev": {
 			"cache": false,
 			"persistent": true,