diff --git a/packages/frontend/src/pages/settings/preferences.vue b/packages/frontend/src/pages/settings/preferences.vue
index 3475767d28..9ea3f2739b 100644
--- a/packages/frontend/src/pages/settings/preferences.vue
+++ b/packages/frontend/src/pages/settings/preferences.vue
@@ -141,21 +141,27 @@ SPDX-License-Identifier: AGPL-3.0-only
 							</SearchMarker>
 
 							<SearchMarker :keywords="['collapse', 'repl']">
-								<MkSwitch v-model="collapseNotesRepliedTo">
-									<template #label><SearchLabel>{{ i18n.ts.collapseNotesRepliedTo }}</SearchLabel></template>
-								</MkSwitch>
+								<MkPreferenceContainer k="collapseNotesRepliedTo">
+									<MkSwitch v-model="collapseNotesRepliedTo">
+										<template #label><SearchLabel>{{ i18n.ts.collapseNotesRepliedTo }}</SearchLabel></template>
+									</MkSwitch>
+								</MkPreferenceContainer>
 							</SearchMarker>
 
 							<SearchMarker :keywords="['collapse', 'uncollapse', 'un-collapse', 'cw', 'content', 'warning']">
-								<MkSwitch v-model="uncollapseCW">
-									<template #label><SearchLabel>{{ i18n.ts.uncollapseCW }}</SearchLabel></template>
-								</MkSwitch>
+								<MkPreferenceContainer k="uncollapseCW">
+									<MkSwitch v-model="uncollapseCW">
+										<template #label><SearchLabel>{{ i18n.ts.uncollapseCW }}</SearchLabel></template>
+									</MkSwitch>
+								</MkPreferenceContainer>
 							</SearchMarker>
 
 							<SearchMarker :keywords="['expand', 'long']">
-								<MkSwitch v-model="expandLongNote">
-									<template #label><SearchLabel>{{ i18n.ts.expandLongNote }}</SearchLabel></template>
-								</MkSwitch>
+								<MkPreferenceContainer k="expandLongNote">
+									<MkSwitch v-model="expandLongNote">
+										<template #label><SearchLabel>{{ i18n.ts.expandLongNote }}</SearchLabel></template>
+									</MkSwitch>
+								</MkPreferenceContainer>
 							</SearchMarker>
 
 							<SearchMarker :keywords="['note', 'timeline', 'gap']">
@@ -184,40 +190,48 @@ SPDX-License-Identifier: AGPL-3.0-only
 							</SearchMarker>
 
 							<SearchMarker :keywords="['show', 'ticker', 'replies']">
-								<MkSwitch v-model="showTickerOnReplies">
-									<template #label>{{ i18n.ts.showTickerOnReplies }}</template>
-								</MkSwitch>
+								<MkPreferenceContainer k="showTickerOnReplies">
+									<MkSwitch v-model="showTickerOnReplies">
+										<template #label>{{ i18n.ts.showTickerOnReplies }}</template>
+									</MkSwitch>
+								</MkPreferenceContainer>
 							</SearchMarker>
 
 							<SearchMarker :keywords="['cat', 'speak']">
-								<MkSwitch v-model="disableCatSpeak">
-									<template #label><SearchLabel>{{ i18n.ts.disableCatSpeak }}</SearchLabel></template>
-								</MkSwitch>
+								<MkPreferenceContainer k="disableCatSpeak">
+									<MkSwitch v-model="disableCatSpeak">
+										<template #label><SearchLabel>{{ i18n.ts.disableCatSpeak }}</SearchLabel></template>
+									</MkSwitch>
+								</MkPreferenceContainer>
 							</SearchMarker>
 
 							<SearchMarker :keywords="['search', 'engine']">
-								<MkSelect v-model="searchEngine" placeholder="Other">
-									<template #label><SearchLabel>{{ i18n.ts.searchEngine }}</SearchLabel></template>
-									<option
-										v-for="[key, value] in Object.entries(searchEngineMap)" :key="key" :value="key"
-									>
-										{{ value }}
-									</option>
-									<!-- If the user is on Other and enters a domain add this one so that the dropdown doesnt go blank -->
-									<option v-if="useCustomSearchEngine" :value="searchEngine">
-										{{ i18n.ts.searchEngineOther }}
-									</option>
-									<!-- If one of the other options is selected show this as a blank other -->
-									<option v-if="!useCustomSearchEngine" value="">{{ i18n.ts.searchEngineOther }}</option>
-								</MkSelect>
+								<MkPreferenceContainer k="searchEngine">
+									<MkSelect v-model="searchEngine" placeholder="Other">
+										<template #label><SearchLabel>{{ i18n.ts.searchEngine }}</SearchLabel></template>
+										<option
+											v-for="[key, value] in Object.entries(searchEngineMap)" :key="key" :value="key"
+										>
+											{{ value }}
+										</option>
+										<!-- If the user is on Other and enters a domain add this one so that the dropdown doesnt go blank -->
+										<option v-if="useCustomSearchEngine" :value="searchEngine">
+											{{ i18n.ts.searchEngineOther }}
+										</option>
+										<!-- If one of the other options is selected show this as a blank other -->
+										<option v-if="!useCustomSearchEngine" value="">{{ i18n.ts.searchEngineOther }}</option>
+									</MkSelect>
+								</MkPreferenceContainer>
 							</SearchMarker>
 
 							<SearchMarker :keywords="['design', 'appear']">
-								<MkRadios v-model="noteDesign">
-									<template #label><SearchLabel>Note Design</SearchLabel></template>
-									<option value="sharkey"><i class="sk-icons sk-shark sk-icons-lg" style="top: 2px;position: relative;"></i> Sharkey</option>
-									<option value="misskey"><i class="sk-icons sk-misskey sk-icons-lg" style="top: 2px;position: relative;"></i> Misskey</option>
-								</MkRadios>
+								<MkPreferenceContainer k="noteDesign">
+									<MkRadios v-model="noteDesign">
+										<template #label><SearchLabel>Note Design</SearchLabel></template>
+										<option value="sharkey"><i class="sk-icons sk-shark sk-icons-lg" style="top: 2px;position: relative;"></i> Sharkey</option>
+										<option value="misskey"><i class="sk-icons sk-misskey sk-icons-lg" style="top: 2px;position: relative;"></i> Misskey</option>
+									</MkRadios>
+								</MkPreferenceContainer>
 							</SearchMarker>
 						</div>
 
@@ -328,10 +342,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 							</SearchMarker>
 
 							<SearchMarker :keywords="['number', 'replies']">
-								<MkRange v-model="numberOfReplies" :min="2" :max="20" :step="1" easing>
-									<template #label><SearchLabel>{{ i18n.ts.numberOfReplies }}</SearchLabel></template>
-									<template #caption>{{ i18n.ts.numberOfRepliesDescription }}</template>
-								</MkRange>
+								<MkPreferenceContainer k="numberOfReplies">
+									<MkRange v-model="numberOfReplies" :min="2" :max="20" :step="1" easing>
+										<template #label><SearchLabel>{{ i18n.ts.numberOfReplies }}</SearchLabel></template>
+										<template #caption>{{ i18n.ts.numberOfRepliesDescription }}</template>
+									</MkRange>
+								</MkPreferenceContainer>
 							</SearchMarker>
 						</div>
 					</div>
@@ -415,22 +431,26 @@ SPDX-License-Identifier: AGPL-3.0-only
 						</SearchMarker>
 
 						<SearchMarker :keywords="['click']">
-							<MkSwitch v-model="notificationClickable">
-								<template #label><SearchLabel>{{ i18n.ts.allowClickingNotifications }}</SearchLabel></template>
-							</MkSwitch>
+							<MkPreferenceContainer k="notificationClickable">
+								<MkSwitch v-model="notificationClickable">
+									<template #label><SearchLabel>{{ i18n.ts.allowClickingNotifications }}</SearchLabel></template>
+								</MkSwitch>
+							</MkPreferenceContainer>
 						</SearchMarker>
 
 						<SearchMarker :keywords="['favicon', 'dot']">
-							<MkSwitch v-model="enableFaviconNotificationDot">
-								<template #label><SearchLabel>{{ i18n.ts.enableFaviconNotificationDot }}</SearchLabel></template>
-								<template #caption>
-									<I18n :src="i18n.ts.notificationDotNotWorkingAdvice" tag="span">
-										<template #link>
+							<MkPreferenceContainer k="enableFaviconNotificationDot">
+								<MkSwitch v-model="enableFaviconNotificationDot">
+									<template #label><SearchLabel>{{ i18n.ts.enableFaviconNotificationDot }}</SearchLabel></template>
+									<template #caption>
+										<I18n :src="i18n.ts.notificationDotNotWorkingAdvice" tag="span">
+											<template #link>
 											<MkLink url="https://docs.joinsharkey.org/docs/install/faqs/#ive-enabled-the-notification-dot-but-it-doesnt-show">{{ i18n.ts._mfm.link }}</MkLink>
-										</template>
-									</I18n>
-								</template>
-							</MkSwitch>
+											</template>
+										</I18n>
+									</template>
+								</MkSwitch>
+							</MkPreferenceContainer>
 						</SearchMarker>
 
 						<MkButton @click="testNotificationDot">{{ i18n.ts.verifyNotificationDotWorkingButton }}</MkButton>
@@ -705,23 +725,29 @@ SPDX-License-Identifier: AGPL-3.0-only
 							</SearchMarker>
 
 							<SearchMarker :keywords="['corner', 'radius']">
-								<MkRadios v-model="cornerRadius">
-									<template #label><SearchLabel>{{ i18n.ts.cornerRadius }}</SearchLabel></template>
-									<option :value="null"><i class="sk-icons sk-shark sk-icons-lg" style="top: 2px;position: relative;"></i> Sharkey</option>
-									<option value="misskey"><i class="sk-icons sk-misskey sk-icons-lg" style="top: 2px;position: relative;"></i> Misskey</option>
-								</MkRadios>
+								<MkPreferenceContainer k="cornerRadius">
+									<MkRadios v-model="cornerRadius">
+										<template #label><SearchLabel>{{ i18n.ts.cornerRadius }}</SearchLabel></template>
+										<option :value="null"><i class="sk-icons sk-shark sk-icons-lg" style="top: 2px;position: relative;"></i> Sharkey</option>
+										<option value="misskey"><i class="sk-icons sk-misskey sk-icons-lg" style="top: 2px;position: relative;"></i> Misskey</option>
+									</MkRadios>
+								</MkPreferenceContainer>
 							</SearchMarker>
 
 							<SearchMarker :keywords="['warn', 'missing', 'alt', 'text']">
-								<MkSwitch v-model="warnMissingAltText">
-									<template #label><SearchLabel>{{ i18n.ts.warnForMissingAltText }}</SearchLabel></template>
-								</MkSwitch>
+								<MkPreferenceContainer k="warnMissingAltText">
+									<MkSwitch v-model="warnMissingAltText">
+										<template #label><SearchLabel>{{ i18n.ts.warnForMissingAltText }}</SearchLabel></template>
+									</MkSwitch>
+								</MkPreferenceContainer>
 							</SearchMarker>
 
 							<SearchMarker :keywords="['warn', 'external', 'url']">
-								<MkSwitch v-model="warnExternalUrl">
-									<template #label><SearchLabel>{{ i18n.ts.warnExternalUrl }}</SearchLabel></template>
-								</MkSwitch>
+								<MkPreferenceContainer k="warnExternalUrl">
+									<MkSwitch v-model="warnExternalUrl">
+										<template #label><SearchLabel>{{ i18n.ts.warnExternalUrl }}</SearchLabel></template>
+									</MkSwitch>
+								</MkPreferenceContainer>
 							</SearchMarker>
 
 							<SearchMarker :keywords="['image', 'photo', 'picture', 'media', 'thumbnail', 'new', 'tab']">
@@ -765,18 +791,22 @@ SPDX-License-Identifier: AGPL-3.0-only
 							<template #label>{{ i18n.ts.boostSettings }}</template>
 							<div class="_gaps_m">
 								<SearchMarker :keywords="['boost', 'show', 'visib', 'selector']">
-									<MkSwitch v-model="showVisibilitySelectorOnBoost">
-										<template #label><SearchLabel>{{ i18n.ts.showVisibilitySelectorOnBoost }}</SearchLabel></template>
-										<template #caption>{{ i18n.ts.showVisibilitySelectorOnBoostDescription }}</template>
-									</MkSwitch>
+									<MkPreferenceContainer k="showVisibilitySelectorOnBoost">
+										<MkSwitch v-model="showVisibilitySelectorOnBoost">
+											<template #label><SearchLabel>{{ i18n.ts.showVisibilitySelectorOnBoost }}</SearchLabel></template>
+											<template #caption>{{ i18n.ts.showVisibilitySelectorOnBoostDescription }}</template>
+										</MkSwitch>
+									</MkPreferenceContainer>
 								</SearchMarker>
 								<SearchMarker :keywords="['boost', 'visib']">
-									<MkSelect v-model="visibilityOnBoost">
-										<template #label><SearchLabel>{{ i18n.ts.visibilityOnBoost }}</SearchLabel></template>
-										<option value="public">{{ i18n.ts._visibility['public'] }}</option>
-										<option value="home">{{ i18n.ts._visibility['home'] }}</option>
-										<option value="followers">{{ i18n.ts._visibility['followers'] }}</option>
-									</MkSelect>
+									<MkPreferenceContainer k="visibilityOnBoost">
+										<MkSelect v-model="visibilityOnBoost">
+											<template #label><SearchLabel>{{ i18n.ts.visibilityOnBoost }}</SearchLabel></template>
+											<option value="public">{{ i18n.ts._visibility['public'] }}</option>
+											<option value="home">{{ i18n.ts._visibility['home'] }}</option>
+											<option value="followers">{{ i18n.ts._visibility['followers'] }}</option>
+										</MkSelect>
+									</MkPreferenceContainer>
 								</SearchMarker>
 							</div>
 						</MkFolder>
@@ -790,9 +820,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 						</SearchMarker>
 
 						<SearchMarker :keywords="['oneko', 'cat']">
-							<MkSwitch v-model="oneko">
-								<template #label>{{ i18n.ts.oneko }}</template>
-							</MkSwitch>
+							<MkPreferenceContainer k="oneko">
+								<MkSwitch v-model="oneko">
+									<template #label>{{ i18n.ts.oneko }}</template>
+								</MkSwitch>
+							</MkPreferenceContainer>
 						</SearchMarker>
 
 						<SearchMarker>