refactor components

38 files changed, 466 insertions, 341 deletions

diff --git a/src/client/pages/settings/2fa.vue b/src/client/pages/settings/2fa.vue
index 48b06eaa24..386e7c635a 100644
--- a/src/client/pages/settings/2fa.vue
+++ b/src/client/pages/settings/2fa.vue
@@ -72,11 +72,11 @@ import { hostname } from '@client/config';
 import { byteify, hexify, stringify } from '@client/scripts/2fa';
 import MkButton from '@client/components/ui/button.vue';
 import MkInfo from '@client/components/ui/info.vue';
-import MkInput from '@client/components/ui/input.vue';
-import MkSwitch from '@client/components/ui/switch.vue';
-import FormBase from '@client/components/form/base.vue';
-import FormGroup from '@client/components/form/group.vue';
-import FormButton from '@client/components/form/button.vue';
+import MkInput from '@client/components/form/input.vue';
+import MkSwitch from '@client/components/form/switch.vue';
+import FormBase from '@client/components/debobigego/base.vue';
+import FormGroup from '@client/components/debobigego/group.vue';
+import FormButton from '@client/components/debobigego/button.vue';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';
 
diff --git a/src/client/pages/settings/account-info.vue b/src/client/pages/settings/account-info.vue
index 4d851b7b12..16ce91b12f 100644
--- a/src/client/pages/settings/account-info.vue
+++ b/src/client/pages/settings/account-info.vue
@@ -134,11 +134,11 @@
 import { defineAsyncComponent, defineComponent } from 'vue';
 import FormSwitch from '@client/components/form/switch.vue';
 import FormSelect from '@client/components/form/select.vue';
-import FormLink from '@client/components/form/link.vue';
-import FormBase from '@client/components/form/base.vue';
-import FormGroup from '@client/components/form/group.vue';
-import FormButton from '@client/components/form/button.vue';
-import FormKeyValueView from '@client/components/form/key-value-view.vue';
+import FormLink from '@client/components/debobigego/link.vue';
+import FormBase from '@client/components/debobigego/base.vue';
+import FormGroup from '@client/components/debobigego/group.vue';
+import FormButton from '@client/components/debobigego/button.vue';
+import FormKeyValueView from '@client/components/debobigego/key-value-view.vue';
 import * as os from '@client/os';
 import number from '@client/filters/number';
 import bytes from '@client/filters/bytes';
diff --git a/src/client/pages/settings/accounts.vue b/src/client/pages/settings/accounts.vue
index ca6f53776a..d2966cc216 100644
--- a/src/client/pages/settings/accounts.vue
+++ b/src/client/pages/settings/accounts.vue
@@ -3,8 +3,8 @@
 	<FormSuspense :p="init">
 		<FormButton @click="addAccount" primary><i class="fas fa-plus"></i> {{ $ts.addAccount }}</FormButton>
 
-		<div class="_formItem _button" v-for="account in accounts" :key="account.id" @click="menu(account, $event)">
-			<div class="_formPanel lcjjdxlm">
+		<div class="_debobigegoItem _button" v-for="account in accounts" :key="account.id" @click="menu(account, $event)">
+			<div class="_debobigegoPanel lcjjdxlm">
 				<div class="avatar">
 					<MkAvatar :user="account" class="avatar"/>
 				</div>
@@ -24,11 +24,11 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import FormSuspense from '@client/components/form/suspense.vue';
-import FormLink from '@client/components/form/link.vue';
-import FormBase from '@client/components/form/base.vue';
-import FormGroup from '@client/components/form/group.vue';
-import FormButton from '@client/components/form/button.vue';
+import FormSuspense from '@client/components/debobigego/suspense.vue';
+import FormLink from '@client/components/debobigego/link.vue';
+import FormBase from '@client/components/debobigego/base.vue';
+import FormGroup from '@client/components/debobigego/group.vue';
+import FormButton from '@client/components/debobigego/button.vue';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';
 import { getAccounts, addAccount, login } from '@client/account';
@@ -47,6 +47,7 @@ export default defineComponent({
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.accounts,
 				icon: 'fas fa-users',
+				bg: 'var(--bg)',
 			},
 			storedAccounts: getAccounts().then(accounts => accounts.filter(x => x.id !== this.$i.id)),
 			accounts: null,
diff --git a/src/client/pages/settings/api.vue b/src/client/pages/settings/api.vue
index 396d4405c3..5c7496e2f9 100644
--- a/src/client/pages/settings/api.vue
+++ b/src/client/pages/settings/api.vue
@@ -10,10 +10,10 @@
 import { defineComponent } from 'vue';
 import FormSwitch from '@client/components/form/switch.vue';
 import FormSelect from '@client/components/form/select.vue';
-import FormLink from '@client/components/form/link.vue';
-import FormBase from '@client/components/form/base.vue';
-import FormGroup from '@client/components/form/group.vue';
-import FormButton from '@client/components/form/button.vue';
+import FormLink from '@client/components/debobigego/link.vue';
+import FormBase from '@client/components/debobigego/base.vue';
+import FormGroup from '@client/components/debobigego/group.vue';
+import FormButton from '@client/components/debobigego/button.vue';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';
 
@@ -30,7 +30,8 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: 'API',
-				icon: 'fas fa-key'
+				icon: 'fas fa-key',
+				bg: 'var(--bg)',
 			},
 			isDesktop: window.innerWidth >= 1100,
 		};
diff --git a/src/client/pages/settings/apps.vue b/src/client/pages/settings/apps.vue
index c864920ce1..da4f672adf 100644
--- a/src/client/pages/settings/apps.vue
+++ b/src/client/pages/settings/apps.vue
@@ -8,7 +8,7 @@
 			</div>
 		</template>
 		<template #default="{items}">
-			<div class="_formPanel bfomjevm" v-for="token in items" :key="token.id">
+			<div class="_debobigegoPanel bfomjevm" v-for="token in items" :key="token.id">
 				<img class="icon" :src="token.iconUrl" alt="" v-if="token.iconUrl"/>
 				<div class="body">
 					<div class="name">{{ token.name }}</div>
@@ -39,12 +39,12 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import FormPagination from '@client/components/form/pagination.vue';
+import FormPagination from '@client/components/debobigego/pagination.vue';
 import FormSelect from '@client/components/form/select.vue';
-import FormLink from '@client/components/form/link.vue';
-import FormBase from '@client/components/form/base.vue';
-import FormGroup from '@client/components/form/group.vue';
-import FormButton from '@client/components/form/button.vue';
+import FormLink from '@client/components/debobigego/link.vue';
+import FormBase from '@client/components/debobigego/base.vue';
+import FormGroup from '@client/components/debobigego/group.vue';
+import FormButton from '@client/components/debobigego/button.vue';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';
 
@@ -61,6 +61,7 @@ export default defineComponent({
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.installedApps,
 				icon: 'fas fa-plug',
+				bg: 'var(--bg)',
 			},
 			pagination: {
 				endpoint: 'i/apps',
diff --git a/src/client/pages/settings/custom-css.vue b/src/client/pages/settings/custom-css.vue
index 0781eeebd7..fd473a11fa 100644
--- a/src/client/pages/settings/custom-css.vue
+++ b/src/client/pages/settings/custom-css.vue
@@ -2,7 +2,7 @@
 <FormBase>
 	<FormInfo warn>{{ $ts.customCssWarn }}</FormInfo>
 
-	<FormTextarea v-model:value="localCustomCss" manual-save tall class="_monospace" style="tab-size: 2;">
+	<FormTextarea v-model="localCustomCss" manual-save tall class="_monospace" style="tab-size: 2;">
 		<span>{{ $ts.local }}</span>
 	</FormTextarea>
 </FormBase>
@@ -13,11 +13,11 @@ import { defineComponent } from 'vue';
 import FormTextarea from '@client/components/form/textarea.vue';
 import FormSelect from '@client/components/form/select.vue';
 import FormRadios from '@client/components/form/radios.vue';
-import FormBase from '@client/components/form/base.vue';
-import FormGroup from '@client/components/form/group.vue';
-import FormLink from '@client/components/form/link.vue';
-import FormButton from '@client/components/form/button.vue';
-import FormInfo from '@client/components/form/info.vue';
+import FormBase from '@client/components/debobigego/base.vue';
+import FormGroup from '@client/components/debobigego/group.vue';
+import FormLink from '@client/components/debobigego/link.vue';
+import FormButton from '@client/components/debobigego/button.vue';
+import FormInfo from '@client/components/debobigego/info.vue';
 import * as os from '@client/os';
 import { ColdDeviceStorage } from '@client/store';
 import { unisonReload } from '@client/scripts/unison-reload';
@@ -42,7 +42,8 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.customCss,
-				icon: 'fas fa-code'
+				icon: 'fas fa-code',
+				bg: 'var(--bg)',
 			},
 			localCustomCss: localStorage.getItem('customCss')
 		}
diff --git a/src/client/pages/settings/deck.vue b/src/client/pages/settings/deck.vue
index 05f3061ca1..2b49ef956c 100644
--- a/src/client/pages/settings/deck.vue
+++ b/src/client/pages/settings/deck.vue
@@ -2,10 +2,10 @@
 <FormBase>
 	<FormGroup>
 		<template #label>{{ $ts.defaultNavigationBehaviour }}</template>
-		<FormSwitch v-model:value="navWindow">{{ $ts.openInWindow }}</FormSwitch>
+		<FormSwitch v-model="navWindow">{{ $ts.openInWindow }}</FormSwitch>
 	</FormGroup>
 
-	<FormSwitch v-model:value="alwaysShowMainColumn">{{ $ts._deck.alwaysShowMainColumn }}</FormSwitch>
+	<FormSwitch v-model="alwaysShowMainColumn">{{ $ts._deck.alwaysShowMainColumn }}</FormSwitch>
 
 	<FormRadios v-model="columnAlign">
 		<template #desc>{{ $ts._deck.columnAlign }}</template>
@@ -20,7 +20,7 @@
 		<option :value="48">{{ $ts.wide }}</option>
 	</FormRadios>
 
-	<FormInput v-model:value="columnMargin" type="number">
+	<FormInput v-model="columnMargin" type="number">
 		<span>{{ $ts._deck.columnMargin }}</span>
 		<template #suffix>px</template>
 	</FormInput>
@@ -32,11 +32,11 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import FormSwitch from '@client/components/form/switch.vue';
-import FormLink from '@client/components/form/link.vue';
+import FormLink from '@client/components/debobigego/link.vue';
 import FormRadios from '@client/components/form/radios.vue';
 import FormInput from '@client/components/form/input.vue';
-import FormBase from '@client/components/form/base.vue';
-import FormGroup from '@client/components/form/group.vue';
+import FormBase from '@client/components/debobigego/base.vue';
+import FormGroup from '@client/components/debobigego/group.vue';
 import { deckStore } from '@client/ui/deck/deck-store';
 import * as os from '@client/os';
 import { unisonReload } from '@client/scripts/unison-reload';
@@ -58,7 +58,8 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.deck,
-				icon: 'fas fa-columns'
+				icon: 'fas fa-columns',
+				bg: 'var(--bg)',
 			},
 		}
 	},
diff --git a/src/client/pages/settings/delete-account.vue b/src/client/pages/settings/delete-account.vue
index 3af1879857..6bac214e04 100644
--- a/src/client/pages/settings/delete-account.vue
+++ b/src/client/pages/settings/delete-account.vue
@@ -9,10 +9,10 @@
 
 <script lang="ts">
 import { defineAsyncComponent, defineComponent } from 'vue';
-import FormInfo from '@client/components/form/info.vue';
-import FormBase from '@client/components/form/base.vue';
-import FormGroup from '@client/components/form/group.vue';
-import FormButton from '@client/components/form/button.vue';
+import FormInfo from '@client/components/debobigego/info.vue';
+import FormBase from '@client/components/debobigego/base.vue';
+import FormGroup from '@client/components/debobigego/group.vue';
+import FormButton from '@client/components/debobigego/button.vue';
 import * as os from '@client/os';
 import { debug } from '@client/config';
 import { signout } from '@client/account';
@@ -32,7 +32,8 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts._accountDelete.accountDelete,
-				icon: 'fas fa-exclamation-triangle'
+				icon: 'fas fa-exclamation-triangle',
+				bg: 'var(--bg)',
 			},
 			debug,
 		}
diff --git a/src/client/pages/settings/drive.vue b/src/client/pages/settings/drive.vue
index 83068a8335..177bf058f3 100644
--- a/src/client/pages/settings/drive.vue
+++ b/src/client/pages/settings/drive.vue
@@ -2,8 +2,8 @@
 <FormBase class="">
 	<FormGroup v-if="!fetching">
 		<template #label>{{ $ts.usageAmount }}</template>
-		<div class="_formItem uawsfosz">
-			<div class="_formPanel">
+		<div class="_debobigegoItem uawsfosz">
+			<div class="_debobigegoPanel">
 				<div class="meter"><div :style="meterStyle"></div></div>
 			</div>
 		</div>
@@ -17,9 +17,9 @@
 		</FormKeyValueView>
 	</FormGroup>
 
-	<div class="_formItem">
-		<div class="_formLabel">{{ $ts.statistics }}</div>
-		<div class="_formPanel">
+	<div class="_debobigegoItem">
+		<div class="_debobigegoLabel">{{ $ts.statistics }}</div>
+		<div class="_debobigegoPanel">
 			<div ref="chart"></div>
 		</div>
 	</div>
@@ -36,10 +36,10 @@
 import { defineComponent } from 'vue';
 import * as tinycolor from 'tinycolor2';
 import ApexCharts from 'apexcharts';
-import FormButton from '@client/components/form/button.vue';
-import FormGroup from '@client/components/form/group.vue';
-import FormKeyValueView from '@client/components/form/key-value-view.vue';
-import FormBase from '@client/components/form/base.vue';
+import FormButton from '@client/components/debobigego/button.vue';
+import FormGroup from '@client/components/debobigego/group.vue';
+import FormKeyValueView from '@client/components/debobigego/key-value-view.vue';
+import FormBase from '@client/components/debobigego/base.vue';
 import * as os from '@client/os';
 import bytes from '@client/filters/bytes';
 import * as symbols from '@client/symbols';
@@ -58,7 +58,8 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.drive,
-				icon: 'fas fa-cloud'
+				icon: 'fas fa-cloud',
+				bg: 'var(--bg)',
 			},
 			fetching: true,
 			usage: null,
diff --git a/src/client/pages/settings/email-address.vue b/src/client/pages/settings/email-address.vue
index 28eeeb6b73..f98b22ada7 100644
--- a/src/client/pages/settings/email-address.vue
+++ b/src/client/pages/settings/email-address.vue
@@ -1,7 +1,7 @@
 <template>
 <FormBase>
 	<FormGroup>
-		<FormInput v-model:value="emailAddress" type="email">
+		<FormInput v-model="emailAddress" type="email">
 			{{ $ts.emailAddress }}
 			<template #desc v-if="$i.email && !$i.emailVerified">{{ $ts.verificationEmailSent }}</template>
 			<template #desc v-else-if="emailAddress === $i.email && $i.emailVerified">{{ $ts.emailVerified }}</template>
@@ -13,10 +13,10 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import FormButton from '@client/components/form/button.vue';
+import FormButton from '@client/components/debobigego/button.vue';
 import FormInput from '@client/components/form/input.vue';
-import FormBase from '@client/components/form/base.vue';
-import FormGroup from '@client/components/form/group.vue';
+import FormBase from '@client/components/debobigego/base.vue';
+import FormGroup from '@client/components/debobigego/group.vue';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';
 
@@ -34,7 +34,8 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.emailAddress,
-				icon: 'fas fa-envelope'
+				icon: 'fas fa-envelope',
+				bg: 'var(--bg)',
 			},
 			emailAddress: null,
 			code: null,
diff --git a/src/client/pages/settings/email-notification.vue b/src/client/pages/settings/email-notification.vue
index ac3402568a..1b78621c3f 100644
--- a/src/client/pages/settings/email-notification.vue
+++ b/src/client/pages/settings/email-notification.vue
@@ -1,22 +1,22 @@
 <template>
 <FormBase>
 	<FormGroup>
-		<FormSwitch v-model:value="mention">
+		<FormSwitch v-model="mention">
 			{{ $ts._notification._types.mention }}
 		</FormSwitch>
-		<FormSwitch v-model:value="reply">
+		<FormSwitch v-model="reply">
 			{{ $ts._notification._types.reply }}
 		</FormSwitch>
-		<FormSwitch v-model:value="quote">
+		<FormSwitch v-model="quote">
 			{{ $ts._notification._types.quote }}
 		</FormSwitch>
-		<FormSwitch v-model:value="follow">
+		<FormSwitch v-model="follow">
 			{{ $ts._notification._types.follow }}
 		</FormSwitch>
-		<FormSwitch v-model:value="receiveFollowRequest">
+		<FormSwitch v-model="receiveFollowRequest">
 			{{ $ts._notification._types.receiveFollowRequest }}
 		</FormSwitch>
-		<FormSwitch v-model:value="groupInvited">
+		<FormSwitch v-model="groupInvited">
 			{{ $ts._notification._types.groupInvited }}
 		</FormSwitch>
 	</FormGroup>
@@ -25,10 +25,10 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import FormButton from '@client/components/form/button.vue';
+import FormButton from '@client/components/debobigego/button.vue';
 import FormSwitch from '@client/components/form/switch.vue';
-import FormBase from '@client/components/form/base.vue';
-import FormGroup from '@client/components/form/group.vue';
+import FormBase from '@client/components/debobigego/base.vue';
+import FormGroup from '@client/components/debobigego/group.vue';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';
 import * as symbols from '@client/symbols';
@@ -47,7 +47,8 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.emailNotification,
-				icon: 'fas fa-envelope'
+				icon: 'fas fa-envelope',
+				bg: 'var(--bg)',
 			},
 
 			mention: this.$i.emailNotificationTypes.includes('mention'),
diff --git a/src/client/pages/settings/email.vue b/src/client/pages/settings/email.vue
index aa20d9d94e..adc62133ac 100644
--- a/src/client/pages/settings/email.vue
+++ b/src/client/pages/settings/email.vue
@@ -14,7 +14,7 @@
 		{{ $ts.emailNotification }}
 	</FormLink>
 
-	<FormSwitch :value="$i.receiveAnnouncementEmail" @update:value="onChangeReceiveAnnouncementEmail">
+	<FormSwitch :value="$i.receiveAnnouncementEmail" @update:modelValue="onChangeReceiveAnnouncementEmail">
 		{{ $ts.receiveAnnouncementFromInstance }}
 	</FormSwitch>
 </FormBase>
@@ -22,11 +22,11 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import FormButton from '@client/components/form/button.vue';
-import FormLink from '@client/components/form/link.vue';
-import FormBase from '@client/components/form/base.vue';
-import FormGroup from '@client/components/form/group.vue';
-import FormSwitch from '@client/components/form/switch.vue';
+import FormButton from '@client/components/debobigego/button.vue';
+import FormLink from '@client/components/debobigego/link.vue';
+import FormBase from '@client/components/debobigego/base.vue';
+import FormGroup from '@client/components/debobigego/group.vue';
+import FormSwitch from '@client/components/debobigego/switch.vue';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';
 
@@ -45,7 +45,8 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.email,
-				icon: 'fas fa-envelope'
+				icon: 'fas fa-envelope',
+				bg: 'var(--bg)',
 			},
 		}
 	},
diff --git a/src/client/pages/settings/experimental-features.vue b/src/client/pages/settings/experimental-features.vue
index f8d5e419e9..971c45a628 100644
--- a/src/client/pages/settings/experimental-features.vue
+++ b/src/client/pages/settings/experimental-features.vue
@@ -8,11 +8,11 @@
 import { defineAsyncComponent, defineComponent } from 'vue';
 import FormSwitch from '@client/components/form/switch.vue';
 import FormSelect from '@client/components/form/select.vue';
-import FormLink from '@client/components/form/link.vue';
-import FormBase from '@client/components/form/base.vue';
-import FormGroup from '@client/components/form/group.vue';
-import FormButton from '@client/components/form/button.vue';
-import FormKeyValueView from '@client/components/form/key-value-view.vue';
+import FormLink from '@client/components/debobigego/link.vue';
+import FormBase from '@client/components/debobigego/base.vue';
+import FormGroup from '@client/components/debobigego/group.vue';
+import FormButton from '@client/components/debobigego/button.vue';
+import FormKeyValueView from '@client/components/debobigego/key-value-view.vue';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';
 
diff --git a/src/client/pages/settings/general.vue b/src/client/pages/settings/general.vue
index f8e8e6b24b..59dd251948 100644
--- a/src/client/pages/settings/general.vue
+++ b/src/client/pages/settings/general.vue
@@ -1,8 +1,8 @@
 <template>
 <FormBase>
-	<FormSwitch v-model:value="showFixedPostForm">{{ $ts.showFixedPostForm }}</FormSwitch>
+	<FormSwitch v-model="showFixedPostForm">{{ $ts.showFixedPostForm }}</FormSwitch>
 
-	<FormSelect v-model:value="lang">
+	<FormSelect v-model="lang">
 		<template #label>{{ $ts.uiLanguage }}</template>
 		<option v-for="x in langs" :value="x[0]" :key="x[0]">{{ x[1] }}</option>
 		<template #caption>
@@ -16,13 +16,13 @@
 
 	<FormGroup>
 		<template #label>{{ $ts.behavior }}</template>
-		<FormSwitch v-model:value="imageNewTab">{{ $ts.openImageInNewTab }}</FormSwitch>
-		<FormSwitch v-model:value="enableInfiniteScroll">{{ $ts.enableInfiniteScroll }}</FormSwitch>
-		<FormSwitch v-model:value="useReactionPickerForContextMenu">{{ $ts.useReactionPickerForContextMenu }}</FormSwitch>
-		<FormSwitch v-model:value="disablePagesScript">{{ $ts.disablePagesScript }}</FormSwitch>
+		<FormSwitch v-model="imageNewTab">{{ $ts.openImageInNewTab }}</FormSwitch>
+		<FormSwitch v-model="enableInfiniteScroll">{{ $ts.enableInfiniteScroll }}</FormSwitch>
+		<FormSwitch v-model="useReactionPickerForContextMenu">{{ $ts.useReactionPickerForContextMenu }}</FormSwitch>
+		<FormSwitch v-model="disablePagesScript">{{ $ts.disablePagesScript }}</FormSwitch>
 	</FormGroup>
 
-	<FormSelect v-model:value="serverDisconnectedBehavior">
+	<FormSelect v-model="serverDisconnectedBehavior">
 		<template #label>{{ $ts.whenServerDisconnected }}</template>
 		<option value="reload">{{ $ts._serverDisconnectedBehavior.reload }}</option>
 		<option value="dialog">{{ $ts._serverDisconnectedBehavior.dialog }}</option>
@@ -31,22 +31,22 @@
 
 	<FormGroup>
 		<template #label>{{ $ts.appearance }}</template>
-		<FormSwitch v-model:value="disableAnimatedMfm">{{ $ts.disableAnimatedMfm }}</FormSwitch>
-		<FormSwitch v-model:value="reduceAnimation">{{ $ts.reduceUiAnimation }}</FormSwitch>
-		<FormSwitch v-model:value="useBlurEffect">{{ $ts.useBlurEffect }}</FormSwitch>
-		<FormSwitch v-model:value="useBlurEffectForModal">{{ $ts.useBlurEffectForModal }}</FormSwitch>
-		<FormSwitch v-model:value="showGapBetweenNotesInTimeline">{{ $ts.showGapBetweenNotesInTimeline }}</FormSwitch>
-		<FormSwitch v-model:value="loadRawImages">{{ $ts.loadRawImages }}</FormSwitch>
-		<FormSwitch v-model:value="disableShowingAnimatedImages">{{ $ts.disableShowingAnimatedImages }}</FormSwitch>
-		<FormSwitch v-model:value="squareAvatars">{{ $ts.squareAvatars }}</FormSwitch>
-		<FormSwitch v-model:value="useSystemFont">{{ $ts.useSystemFont }}</FormSwitch>
-		<FormSwitch v-model:value="useOsNativeEmojis">{{ $ts.useOsNativeEmojis }}
+		<FormSwitch v-model="disableAnimatedMfm">{{ $ts.disableAnimatedMfm }}</FormSwitch>
+		<FormSwitch v-model="reduceAnimation">{{ $ts.reduceUiAnimation }}</FormSwitch>
+		<FormSwitch v-model="useBlurEffect">{{ $ts.useBlurEffect }}</FormSwitch>
+		<FormSwitch v-model="useBlurEffectForModal">{{ $ts.useBlurEffectForModal }}</FormSwitch>
+		<FormSwitch v-model="showGapBetweenNotesInTimeline">{{ $ts.showGapBetweenNotesInTimeline }}</FormSwitch>
+		<FormSwitch v-model="loadRawImages">{{ $ts.loadRawImages }}</FormSwitch>
+		<FormSwitch v-model="disableShowingAnimatedImages">{{ $ts.disableShowingAnimatedImages }}</FormSwitch>
+		<FormSwitch v-model="squareAvatars">{{ $ts.squareAvatars }}</FormSwitch>
+		<FormSwitch v-model="useSystemFont">{{ $ts.useSystemFont }}</FormSwitch>
+		<FormSwitch v-model="useOsNativeEmojis">{{ $ts.useOsNativeEmojis }}
 			<div><Mfm text="🍮🍦🍭🍩🍰🍫🍬🥞🍪" :key="useOsNativeEmojis"/></div>
 		</FormSwitch>
 	</FormGroup>
 
 	<FormGroup>
-		<FormSwitch v-model:value="aiChanMode">{{ $ts.aiChanMode }}</FormSwitch>
+		<FormSwitch v-model="aiChanMode">{{ $ts.aiChanMode }}</FormSwitch>
 	</FormGroup>
 
 	<FormRadios v-model="fontSize">
@@ -57,14 +57,14 @@
 		<option value="veryLarge"><span style="font-size: 20px;">Aa</span></option>
 	</FormRadios>
 
-	<FormSelect v-model:value="instanceTicker">
+	<FormSelect v-model="instanceTicker">
 		<template #label>{{ $ts.instanceTicker }}</template>
 		<option value="none">{{ $ts._instanceTicker.none }}</option>
 		<option value="remote">{{ $ts._instanceTicker.remote }}</option>
 		<option value="always">{{ $ts._instanceTicker.always }}</option>
 	</FormSelect>
 
-	<FormSelect v-model:value="nsfw">
+	<FormSelect v-model="nsfw">
 		<template #label>{{ $ts.nsfw }}</template>
 		<option value="respect">{{ $ts._nsfw.respect }}</option>
 		<option value="ignore">{{ $ts._nsfw.ignore }}</option>
@@ -73,10 +73,10 @@
 
 	<FormGroup>
 		<template #label>{{ $ts.defaultNavigationBehaviour }}</template>
-		<FormSwitch v-model:value="defaultSideView">{{ $ts.openInSideView }}</FormSwitch>
+		<FormSwitch v-model="defaultSideView">{{ $ts.openInSideView }}</FormSwitch>
 	</FormGroup>
 
-	<FormSelect v-model:value="chatOpenBehavior">
+	<FormSelect v-model="chatOpenBehavior">
 		<template #label>{{ $ts.chatOpenBehavior }}</template>
 		<option value="page">{{ $ts.showInPage }}</option>
 		<option value="window">{{ $ts.openInWindow }}</option>
@@ -91,13 +91,13 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import FormSwitch from '@client/components/form/switch.vue';
-import FormSelect from '@client/components/form/select.vue';
-import FormRadios from '@client/components/form/radios.vue';
-import FormBase from '@client/components/form/base.vue';
-import FormGroup from '@client/components/form/group.vue';
-import FormLink from '@client/components/form/link.vue';
-import FormButton from '@client/components/form/button.vue';
+import FormSwitch from '@client/components/debobigego/switch.vue';
+import FormSelect from '@client/components/debobigego/select.vue';
+import FormRadios from '@client/components/debobigego/radios.vue';
+import FormBase from '@client/components/debobigego/base.vue';
+import FormGroup from '@client/components/debobigego/group.vue';
+import FormLink from '@client/components/debobigego/link.vue';
+import FormButton from '@client/components/debobigego/button.vue';
 import MkLink from '@client/components/link.vue';
 import { langs } from '@client/config';
 import { defaultStore } from '@client/store';
@@ -124,7 +124,8 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.general,
-				icon: 'fas fa-cogs'
+				icon: 'fas fa-cogs',
+				bg: 'var(--bg)'
 			},
 			langs,
 			lang: localStorage.getItem('lang'),
diff --git a/src/client/pages/settings/import-export.vue b/src/client/pages/settings/import-export.vue
index e77efb4429..5f1ed43340 100644
--- a/src/client/pages/settings/import-export.vue
+++ b/src/client/pages/settings/import-export.vue
@@ -28,9 +28,9 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import FormSelect from '@client/components/form/select.vue';
-import FormButton from '@client/components/form/button.vue';
-import FormBase from '@client/components/form/base.vue';
-import FormGroup from '@client/components/form/group.vue';
+import FormButton from '@client/components/debobigego/button.vue';
+import FormBase from '@client/components/debobigego/base.vue';
+import FormGroup from '@client/components/debobigego/group.vue';
 import * as os from '@client/os';
 import { selectFile } from '@client/scripts/select-file';
 import * as symbols from '@client/symbols';
@@ -48,7 +48,8 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.importAndExport,
-				icon: 'fas fa-boxes'
+				icon: 'fas fa-boxes',
+				bg: 'var(--bg)',
 			},
 		}
 	},
diff --git a/src/client/pages/settings/index.link.vue b/src/client/pages/settings/index.link.vue
new file mode 100644
index 0000000000..37d06bc22e
--- /dev/null
+++ b/src/client/pages/settings/index.link.vue
@@ -0,0 +1,97 @@
+<template>
+<div class="qmfkfnzj">
+	<a class="main _button" :href="to" target="_blank" v-if="external">
+		<span class="icon"><slot name="icon"></slot></span>
+		<span class="text"><slot></slot></span>
+	</a>
+	<MkA class="main _button" :class="{ active }" :to="to" :behavior="behavior" v-else>
+		<span class="icon"><slot name="icon"></slot></span>
+		<span class="text"><slot></slot></span>
+	</MkA>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+	props: {
+		to: {
+			type: String,
+			required: true
+		},
+		active: {
+			type: Boolean,
+			required: false
+		},
+		external: {
+			type: Boolean,
+			required: false
+		},
+		behavior: {
+			type: String,
+			required: false,
+		},
+	},
+	data() {
+		return {
+		};
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.qmfkfnzj {
+	> .main {
+		display: flex;
+		align-items: center;
+		width: 100%;
+		box-sizing: border-box;
+		padding: 10px 16px 10px 14px;
+		border-radius: 999px;
+		font-size: 0.9em;
+
+		&:hover {
+			text-decoration: none;
+			background: var(--panelHighlight);
+		}
+
+		&.active {
+			color: var(--accent);
+			background: var(--accentedBg);
+		}
+
+		> .icon {
+			width: 32px;
+			margin-right: 2px;
+			flex-shrink: 0;
+			text-align: center;
+			opacity: 0.8;
+
+			&:empty {
+				display: none;
+
+				& + .text {
+					padding-left: 4px;
+				}
+			}
+		}
+
+		> .text {
+			white-space: nowrap;
+			text-overflow: ellipsis;
+			overflow: hidden;
+			padding-right: 12px;
+		}
+
+		> .right {
+			margin-left: auto;
+			opacity: 0.7;
+
+			> .text:not(:empty) {
+				margin-right: 0.75em;
+			}
+		}
+	}
+}
+</style>
diff --git a/src/client/pages/settings/index.vue b/src/client/pages/settings/index.vue
index 3fb5f5f1e6..f3d118e4f0 100644
--- a/src/client/pages/settings/index.vue
+++ b/src/client/pages/settings/index.vue
@@ -1,50 +1,48 @@
 <template>
 <div class="vvcocwet" :class="{ wide: !narrow }" ref="el">
 	<div class="nav" v-if="!narrow || page == null">
-		<FormBase>
-			<FormGroup>
-				<div class="_formItem">
-					<div class="_formPanel lwjxoukj">
-						<MkAvatar :user="$i" class="avatar"/>
-					</div>
+		<FormGroup>
+			<div class="_debobigegoItem">
+				<div class="_debobigegoPanel lwjxoukj">
+					<MkAvatar :user="$i" class="avatar"/>
 				</div>
-				<FormLink :active="page === 'accounts'" replace to="/settings/accounts"><template #icon><i class="fas fa-users"></i></template>{{ $ts.accounts }}</FormLink>
-			</FormGroup>
-			<FormInfo v-if="emailNotConfigured" warn>{{ $ts.emailNotConfiguredWarning }} <MkA to="/settings/email" class="_link">{{ $ts.configure }}</MkA></FormInfo>
-			<FormGroup>
-				<template #label>{{ $ts.basicSettings }}</template>
-				<FormLink :active="page === 'profile'" replace to="/settings/profile"><template #icon><i class="fas fa-user"></i></template>{{ $ts.profile }}</FormLink>
-				<FormLink :active="page === 'privacy'" replace to="/settings/privacy"><template #icon><i class="fas fa-lock-open"></i></template>{{ $ts.privacy }}</FormLink>
-				<FormLink :active="page === 'reaction'" replace to="/settings/reaction"><template #icon><i class="fas fa-laugh"></i></template>{{ $ts.reaction }}</FormLink>
-				<FormLink :active="page === 'drive'" replace to="/settings/drive"><template #icon><i class="fas fa-cloud"></i></template>{{ $ts.drive }}</FormLink>
-				<FormLink :active="page === 'notifications'" replace to="/settings/notifications"><template #icon><i class="fas fa-bell"></i></template>{{ $ts.notifications }}</FormLink>
-				<FormLink :active="page === 'email'" replace to="/settings/email"><template #icon><i class="fas fa-envelope"></i></template>{{ $ts.email }}</FormLink>
-				<FormLink :active="page === 'integration'" replace to="/settings/integration"><template #icon><i class="fas fa-share-alt"></i></template>{{ $ts.integration }}</FormLink>
-				<FormLink :active="page === 'security'" replace to="/settings/security"><template #icon><i class="fas fa-lock"></i></template>{{ $ts.security }}</FormLink>
-			</FormGroup>
-			<FormGroup>
-				<template #label>{{ $ts.clientSettings }}</template>
-				<FormLink :active="page === 'general'" replace to="/settings/general"><template #icon><i class="fas fa-cogs"></i></template>{{ $ts.general }}</FormLink>
-				<FormLink :active="page === 'theme'" replace to="/settings/theme"><template #icon><i class="fas fa-palette"></i></template>{{ $ts.theme }}</FormLink>
-				<FormLink :active="page === 'menu'" replace to="/settings/menu"><template #icon><i class="fas fa-list-ul"></i></template>{{ $ts.menu }}</FormLink>
-				<FormLink :active="page === 'sounds'" replace to="/settings/sounds"><template #icon><i class="fas fa-music"></i></template>{{ $ts.sounds }}</FormLink>
-				<FormLink :active="page === 'plugin'" replace to="/settings/plugin"><template #icon><i class="fas fa-plug"></i></template>{{ $ts.plugins }}</FormLink>
-			</FormGroup>
-			<FormGroup>
-				<template #label>{{ $ts.otherSettings }}</template>
-				<FormLink :active="page === 'import-export'" replace to="/settings/import-export"><template #icon><i class="fas fa-boxes"></i></template>{{ $ts.importAndExport }}</FormLink>
-				<FormLink :active="page === 'mute-block'" replace to="/settings/mute-block"><template #icon><i class="fas fa-ban"></i></template>{{ $ts.muteAndBlock }}</FormLink>
-				<FormLink :active="page === 'word-mute'" replace to="/settings/word-mute"><template #icon><i class="fas fa-comment-slash"></i></template>{{ $ts.wordMute }}</FormLink>
-				<FormLink :active="page === 'api'" replace to="/settings/api"><template #icon><i class="fas fa-key"></i></template>API</FormLink>
-				<FormLink :active="page === 'other'" replace to="/settings/other"><template #icon><i class="fas fa-ellipsis-h"></i></template>{{ $ts.other }}</FormLink>
-			</FormGroup>
-			<FormGroup>
-				<FormButton @click="clear">{{ $ts.clearCache }}</FormButton>
-			</FormGroup>
-			<FormGroup>
-				<FormButton @click="logout" danger>{{ $ts.logout }}</FormButton>
-			</FormGroup>
-		</FormBase>
+			</div>
+			<XLink :active="page === 'accounts'" replace to="/settings/accounts"><template #icon><i class="fas fa-users"></i></template>{{ $ts.accounts }}</XLink>
+		</FormGroup>
+		<FormInfo v-if="emailNotConfigured" warn>{{ $ts.emailNotConfiguredWarning }} <MkA to="/settings/email" class="_link">{{ $ts.configure }}</MkA></FormInfo>
+		<FormGroup>
+			<template #label>{{ $ts.basicSettings }}</template>
+			<XLink :active="page === 'profile'" replace to="/settings/profile"><template #icon><i class="fas fa-user"></i></template>{{ $ts.profile }}</XLink>
+			<XLink :active="page === 'privacy'" replace to="/settings/privacy"><template #icon><i class="fas fa-lock-open"></i></template>{{ $ts.privacy }}</XLink>
+			<XLink :active="page === 'reaction'" replace to="/settings/reaction"><template #icon><i class="fas fa-laugh"></i></template>{{ $ts.reaction }}</XLink>
+			<XLink :active="page === 'drive'" replace to="/settings/drive"><template #icon><i class="fas fa-cloud"></i></template>{{ $ts.drive }}</XLink>
+			<XLink :active="page === 'notifications'" replace to="/settings/notifications"><template #icon><i class="fas fa-bell"></i></template>{{ $ts.notifications }}</XLink>
+			<XLink :active="page === 'email'" replace to="/settings/email"><template #icon><i class="fas fa-envelope"></i></template>{{ $ts.email }}</XLink>
+			<XLink :active="page === 'integration'" replace to="/settings/integration"><template #icon><i class="fas fa-share-alt"></i></template>{{ $ts.integration }}</XLink>
+			<XLink :active="page === 'security'" replace to="/settings/security"><template #icon><i class="fas fa-lock"></i></template>{{ $ts.security }}</XLink>
+		</FormGroup>
+		<FormGroup>
+			<template #label>{{ $ts.clientSettings }}</template>
+			<XLink :active="page === 'general'" replace to="/settings/general"><template #icon><i class="fas fa-cogs"></i></template>{{ $ts.general }}</XLink>
+			<XLink :active="page === 'theme'" replace to="/settings/theme"><template #icon><i class="fas fa-palette"></i></template>{{ $ts.theme }}</XLink>
+			<XLink :active="page === 'menu'" replace to="/settings/menu"><template #icon><i class="fas fa-list-ul"></i></template>{{ $ts.menu }}</XLink>
+			<XLink :active="page === 'sounds'" replace to="/settings/sounds"><template #icon><i class="fas fa-music"></i></template>{{ $ts.sounds }}</XLink>
+			<XLink :active="page === 'plugin'" replace to="/settings/plugin"><template #icon><i class="fas fa-plug"></i></template>{{ $ts.plugins }}</XLink>
+		</FormGroup>
+		<FormGroup>
+			<template #label>{{ $ts.otherSettings }}</template>
+			<XLink :active="page === 'import-export'" replace to="/settings/import-export"><template #icon><i class="fas fa-boxes"></i></template>{{ $ts.importAndExport }}</XLink>
+			<XLink :active="page === 'mute-block'" replace to="/settings/mute-block"><template #icon><i class="fas fa-ban"></i></template>{{ $ts.muteAndBlock }}</XLink>
+			<XLink :active="page === 'word-mute'" replace to="/settings/word-mute"><template #icon><i class="fas fa-comment-slash"></i></template>{{ $ts.wordMute }}</XLink>
+			<XLink :active="page === 'api'" replace to="/settings/api"><template #icon><i class="fas fa-key"></i></template>API</XLink>
+			<XLink :active="page === 'other'" replace to="/settings/other"><template #icon><i class="fas fa-ellipsis-h"></i></template>{{ $ts.other }}</XLink>
+		</FormGroup>
+		<FormGroup>
+			<FormButton @click="clear">{{ $ts.clearCache }}</FormButton>
+		</FormGroup>
+		<FormGroup>
+			<FormButton @click="logout" danger>{{ $ts.logout }}</FormButton>
+		</FormGroup>
 	</div>
 	<div class="main">
 		<component :is="component" :key="page" @info="onInfo" v-bind="pageProps"/>
@@ -55,11 +53,11 @@
 <script lang="ts">
 import { computed, defineAsyncComponent, defineComponent, nextTick, onMounted, reactive, ref, watch } from 'vue';
 import { i18n } from '@client/i18n';
-import FormLink from '@client/components/form/link.vue';
-import FormGroup from '@client/components/form/group.vue';
-import FormBase from '@client/components/form/base.vue';
-import FormButton from '@client/components/form/button.vue';
-import FormInfo from '@client/components/form/info.vue';
+import XLink from './index.link.vue';
+import FormGroup from '@client/components/debobigego/group.vue';
+import FormBase from '@client/components/debobigego/base.vue';
+import FormButton from '@client/components/debobigego/button.vue';
+import FormInfo from '@client/components/debobigego/info.vue';
 import { scroll } from '@client/scripts/scroll';
 import { signout } from '@client/account';
 import { unisonReload } from '@client/scripts/unison-reload';
@@ -70,7 +68,7 @@ import { $i } from '@client/account';
 export default defineComponent({
 	components: {
 		FormBase,
-		FormLink,
+		XLink,
 		FormGroup,
 		FormButton,
 		FormInfo,
@@ -210,14 +208,13 @@ export default defineComponent({
 .vvcocwet {
 	&.wide {
 		display: flex;
-		max-width: 1100px;
+		max-width: 1000px;
 		margin: 0 auto;
 		height: 100%;
 
 		> .nav {
 			width: 32%;
 			box-sizing: border-box;
-			border-right: solid 0.5px var(--divider);
 			overflow: auto;
 		}
 
diff --git a/src/client/pages/settings/integration.vue b/src/client/pages/settings/integration.vue
index f1c0a88afc..7f398dde9d 100644
--- a/src/client/pages/settings/integration.vue
+++ b/src/client/pages/settings/integration.vue
@@ -1,26 +1,26 @@
 <template>
 <FormBase>
-	<div class="_formItem" v-if="enableTwitterIntegration">
-		<div class="_formLabel"><i class="fab fa-twitter"></i> Twitter</div>
-		<div class="_formPanel" style="padding: 16px;">
+	<div class="_debobigegoItem" v-if="enableTwitterIntegration">
+		<div class="_debobigegoLabel"><i class="fab fa-twitter"></i> Twitter</div>
+		<div class="_debobigegoPanel" style="padding: 16px;">
 			<p v-if="integrations.twitter">{{ $ts.connectedTo }}: <a :href="`https://twitter.com/${integrations.twitter.screenName}`" rel="nofollow noopener" target="_blank">@{{ integrations.twitter.screenName }}</a></p>
 			<MkButton v-if="integrations.twitter" @click="disconnectTwitter" danger>{{ $ts.disconnectService }}</MkButton>
 			<MkButton v-else @click="connectTwitter" primary>{{ $ts.connectService }}</MkButton>
 		</div>
 	</div>
 
-	<div class="_formItem" v-if="enableDiscordIntegration">
-		<div class="_formLabel"><i class="fab fa-discord"></i> Discord</div>
-		<div class="_formPanel" style="padding: 16px;">
+	<div class="_debobigegoItem" v-if="enableDiscordIntegration">
+		<div class="_debobigegoLabel"><i class="fab fa-discord"></i> Discord</div>
+		<div class="_debobigegoPanel" style="padding: 16px;">
 			<p v-if="integrations.discord">{{ $ts.connectedTo }}: <a :href="`https://discord.com/users/${integrations.discord.id}`" rel="nofollow noopener" target="_blank">@{{ integrations.discord.username }}#{{ integrations.discord.discriminator }}</a></p>
 			<MkButton v-if="integrations.discord" @click="disconnectDiscord" danger>{{ $ts.disconnectService }}</MkButton>
 			<MkButton v-else @click="connectDiscord" primary>{{ $ts.connectService }}</MkButton>
 		</div>
 	</div>
 
-	<div class="_formItem" v-if="enableGithubIntegration">
-		<div class="_formLabel"><i class="fab fa-github"></i> GitHub</div>
-		<div class="_formPanel" style="padding: 16px;">
+	<div class="_debobigegoItem" v-if="enableGithubIntegration">
+		<div class="_debobigegoLabel"><i class="fab fa-github"></i> GitHub</div>
+		<div class="_debobigegoPanel" style="padding: 16px;">
 			<p v-if="integrations.github">{{ $ts.connectedTo }}: <a :href="`https://github.com/${integrations.github.login}`" rel="nofollow noopener" target="_blank">@{{ integrations.github.login }}</a></p>
 			<MkButton v-if="integrations.github" @click="disconnectGithub" danger>{{ $ts.disconnectService }}</MkButton>
 			<MkButton v-else @click="connectGithub" primary>{{ $ts.connectService }}</MkButton>
@@ -32,7 +32,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { apiUrl } from '@client/config';
-import FormBase from '@client/components/form/base.vue';
+import FormBase from '@client/components/debobigego/base.vue';
 import MkButton from '@client/components/ui/button.vue';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';
@@ -49,7 +49,8 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.integration,
-				icon: 'fas fa-share-alt'
+				icon: 'fas fa-share-alt',
+				bg: 'var(--bg)',
 			},
 			apiUrl,
 			twitterForm: null,
diff --git a/src/client/pages/settings/menu.vue b/src/client/pages/settings/menu.vue
index 4b315145e1..31472eb0c1 100644
--- a/src/client/pages/settings/menu.vue
+++ b/src/client/pages/settings/menu.vue
@@ -1,6 +1,6 @@
 <template>
 <FormBase>
-	<FormTextarea v-model:value="items" tall manual-save>
+	<FormTextarea v-model="items" tall manual-save>
 		<span>{{ $ts.menu }}</span>
 		<template #desc><button class="_textButton" @click="addItem">{{ $ts.addItem }}</button></template>
 	</FormTextarea>
@@ -19,12 +19,10 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import FormSwitch from '@client/components/form/switch.vue';
-import FormTextarea from '@client/components/form/textarea.vue';
-import FormRadios from '@client/components/form/radios.vue';
-import FormBase from '@client/components/form/base.vue';
-import FormGroup from '@client/components/form/group.vue';
-import FormButton from '@client/components/form/button.vue';
+import FormTextarea from '@client/components/debobigego/textarea.vue';
+import FormRadios from '@client/components/debobigego/radios.vue';
+import FormBase from '@client/components/debobigego/base.vue';
+import FormButton from '@client/components/debobigego/button.vue';
 import * as os from '@client/os';
 import { menuDef } from '@client/menu';
 import { defaultStore } from '@client/store';
@@ -45,7 +43,8 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.menu,
-				icon: 'fas fa-list-ul'
+				icon: 'fas fa-list-ul',
+				bg: 'var(--bg)',
 			},
 			menuDef: menuDef,
 			items: defaultStore.state.menu.join('\n'),
diff --git a/src/client/pages/settings/mute-block.vue b/src/client/pages/settings/mute-block.vue
index dde0199e18..18b2fc0af4 100644
--- a/src/client/pages/settings/mute-block.vue
+++ b/src/client/pages/settings/mute-block.vue
@@ -1,6 +1,6 @@
 <template>
 <FormBase>
-	<MkTab v-model:value="tab" style="margin-bottom: var(--margin);">
+	<MkTab v-model="tab" style="margin-bottom: var(--margin);">
 		<option value="mute">{{ $ts.mutedUsers }}</option>
 		<option value="block">{{ $ts.blockedUsers }}</option>
 	</MkTab>
@@ -35,10 +35,10 @@
 import { defineComponent } from 'vue';
 import MkPagination from '@client/components/ui/pagination.vue';
 import MkTab from '@client/components/tab.vue';
-import FormInfo from '@client/components/form/info.vue';
-import FormLink from '@client/components/form/link.vue';
-import FormBase from '@client/components/form/base.vue';
-import FormGroup from '@client/components/form/group.vue';
+import FormInfo from '@client/components/debobigego/info.vue';
+import FormLink from '@client/components/debobigego/link.vue';
+import FormBase from '@client/components/debobigego/base.vue';
+import FormGroup from '@client/components/debobigego/group.vue';
 import { userPage } from '@client/filters/user';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';
@@ -59,7 +59,8 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.muteAndBlock,
-				icon: 'fas fa-ban'
+				icon: 'fas fa-ban',
+				bg: 'var(--bg)',
 			},
 			tab: 'mute',
 			mutingPagination: {
diff --git a/src/client/pages/settings/notifications.vue b/src/client/pages/settings/notifications.vue
index ec95452ba2..1ef350335c 100644
--- a/src/client/pages/settings/notifications.vue
+++ b/src/client/pages/settings/notifications.vue
@@ -11,10 +11,10 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import FormButton from '@client/components/form/button.vue';
-import FormLink from '@client/components/form/link.vue';
-import FormBase from '@client/components/form/base.vue';
-import FormGroup from '@client/components/form/group.vue';
+import FormButton from '@client/components/debobigego/button.vue';
+import FormLink from '@client/components/debobigego/link.vue';
+import FormBase from '@client/components/debobigego/base.vue';
+import FormGroup from '@client/components/debobigego/group.vue';
 import { notificationTypes } from '../../../types';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';
@@ -33,7 +33,8 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.notifications,
-				icon: 'fas fa-bell'
+				icon: 'fas fa-bell',
+				bg: 'var(--bg)',
 			},
 		}
 	},
diff --git a/src/client/pages/settings/other.vue b/src/client/pages/settings/other.vue
index 21b5439041..2eb922453f 100644
--- a/src/client/pages/settings/other.vue
+++ b/src/client/pages/settings/other.vue
@@ -2,18 +2,18 @@
 <FormBase>
 	<FormLink to="/settings/update">Misskey Update</FormLink>
 
-	<FormSwitch :value="$i.injectFeaturedNote" @update:value="onChangeInjectFeaturedNote">
+	<FormSwitch :value="$i.injectFeaturedNote" @update:modelValue="onChangeInjectFeaturedNote">
 		{{ $ts.showFeaturedNotesInTimeline }}
 	</FormSwitch>
 
-	<FormSwitch v-model:value="reportError">{{ $ts.sendErrorReports }}<template #desc>{{ $ts.sendErrorReportsDescription }}</template></FormSwitch>
+	<FormSwitch v-model="reportError">{{ $ts.sendErrorReports }}<template #desc>{{ $ts.sendErrorReportsDescription }}</template></FormSwitch>
 
 	<FormLink to="/settings/account-info">{{ $ts.accountInfo }}</FormLink>
 	<FormLink to="/settings/experimental-features">{{ $ts.experimentalFeatures }}</FormLink>
 
 	<FormGroup>
 		<template #label>{{ $ts.developer }}</template>
-		<FormSwitch v-model:value="debug" @update:value="changeDebug">
+		<FormSwitch v-model="debug" @update:modelValue="changeDebug">
 			DEBUG MODE
 		</FormSwitch>
 		<template v-if="debug">
@@ -34,10 +34,10 @@
 import { defineAsyncComponent, defineComponent } from 'vue';
 import FormSwitch from '@client/components/form/switch.vue';
 import FormSelect from '@client/components/form/select.vue';
-import FormLink from '@client/components/form/link.vue';
-import FormBase from '@client/components/form/base.vue';
-import FormGroup from '@client/components/form/group.vue';
-import FormButton from '@client/components/form/button.vue';
+import FormLink from '@client/components/debobigego/link.vue';
+import FormBase from '@client/components/debobigego/base.vue';
+import FormGroup from '@client/components/debobigego/group.vue';
+import FormButton from '@client/components/debobigego/button.vue';
 import * as os from '@client/os';
 import { debug } from '@client/config';
 import { defaultStore } from '@client/store';
@@ -60,7 +60,8 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.other,
-				icon: 'fas fa-ellipsis-h'
+				icon: 'fas fa-ellipsis-h',
+				bg: 'var(--bg)',
 			},
 			debug,
 		}
diff --git a/src/client/pages/settings/plugin.install.vue b/src/client/pages/settings/plugin.install.vue
index 30cbf58ad7..709ef11abb 100644
--- a/src/client/pages/settings/plugin.install.vue
+++ b/src/client/pages/settings/plugin.install.vue
@@ -3,7 +3,7 @@
 	<FormInfo warn>{{ $ts._plugin.installWarn }}</FormInfo>
 
 	<FormGroup>
-		<FormTextarea v-model:value="code" tall>
+		<FormTextarea v-model="code" tall>
 			<span>{{ $ts.code }}</span>
 		</FormTextarea>
 	</FormGroup>
@@ -20,11 +20,11 @@ import { v4 as uuid } from 'uuid';
 import FormTextarea from '@client/components/form/textarea.vue';
 import FormSelect from '@client/components/form/select.vue';
 import FormRadios from '@client/components/form/radios.vue';
-import FormBase from '@client/components/form/base.vue';
-import FormGroup from '@client/components/form/group.vue';
-import FormLink from '@client/components/form/link.vue';
-import FormButton from '@client/components/form/button.vue';
-import FormInfo from '@client/components/form/info.vue';
+import FormBase from '@client/components/debobigego/base.vue';
+import FormGroup from '@client/components/debobigego/group.vue';
+import FormLink from '@client/components/debobigego/link.vue';
+import FormButton from '@client/components/debobigego/button.vue';
+import FormInfo from '@client/components/debobigego/info.vue';
 import * as os from '@client/os';
 import { ColdDeviceStorage } from '@client/store';
 import { unisonReload } from '@client/scripts/unison-reload';
@@ -48,7 +48,8 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts._plugin.install,
-				icon: 'fas fa-download'
+				icon: 'fas fa-download',
+				bg: 'var(--bg)',
 			},
 			code: null,
 		}
diff --git a/src/client/pages/settings/plugin.manage.vue b/src/client/pages/settings/plugin.manage.vue
index 3df87ca084..f1c27f1e3c 100644
--- a/src/client/pages/settings/plugin.manage.vue
+++ b/src/client/pages/settings/plugin.manage.vue
@@ -3,9 +3,9 @@
 	<FormGroup v-for="plugin in plugins" :key="plugin.id">
 		<template #label><span style="display: flex;"><b>{{ plugin.name }}</b><span style="margin-left: auto;">v{{ plugin.version }}</span></span></template>
 
-		<FormSwitch :value="plugin.active" @update:value="changeActive(plugin, $event)">{{ $ts.makeActive }}</FormSwitch>
-		<div class="_formItem">
-			<div class="_formPanel" style="padding: 16px;">
+		<FormSwitch :value="plugin.active" @update:modelValue="changeActive(plugin, $event)">{{ $ts.makeActive }}</FormSwitch>
+		<div class="_debobigegoItem">
+			<div class="_debobigegoPanel" style="padding: 16px;">
 				<div class="_keyValue">
 					<div>{{ $ts.author }}:</div>
 					<div>{{ plugin.author }}</div>
@@ -20,8 +20,8 @@
 				</div>
 			</div>
 		</div>
-		<div class="_formItem">
-			<div class="_formPanel" style="padding: 16px;">
+		<div class="_debobigegoItem">
+			<div class="_debobigegoPanel" style="padding: 16px;">
 				<MkButton @click="config(plugin)" inline v-if="plugin.config"><i class="fas fa-cog"></i> {{ $ts.settings }}</MkButton>
 				<MkButton @click="uninstall(plugin)" inline danger><i class="fas fa-trash-alt"></i> {{ $ts.uninstall }}</MkButton>
 			</div>
@@ -33,11 +33,11 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import MkButton from '@client/components/ui/button.vue';
-import MkTextarea from '@client/components/ui/textarea.vue';
-import MkSelect from '@client/components/ui/select.vue';
+import MkTextarea from '@client/components/form/textarea.vue';
+import MkSelect from '@client/components/form/select.vue';
 import FormSwitch from '@client/components/form/switch.vue';
-import FormBase from '@client/components/form/base.vue';
-import FormGroup from '@client/components/form/group.vue';
+import FormBase from '@client/components/debobigego/base.vue';
+import FormGroup from '@client/components/debobigego/group.vue';
 import * as os from '@client/os';
 import { ColdDeviceStorage } from '@client/store';
 import * as symbols from '@client/symbols';
@@ -58,7 +58,8 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts._plugin.manage,
-				icon: 'fas fa-plug'
+				icon: 'fas fa-plug',
+				bg: 'var(--bg)',
 			},
 			plugins: ColdDeviceStorage.get('plugins'),
 		}
diff --git a/src/client/pages/settings/plugin.vue b/src/client/pages/settings/plugin.vue
index 13eaca07fd..23f263bbbd 100644
--- a/src/client/pages/settings/plugin.vue
+++ b/src/client/pages/settings/plugin.vue
@@ -7,9 +7,9 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import FormBase from '@client/components/form/base.vue';
-import FormGroup from '@client/components/form/group.vue';
-import FormLink from '@client/components/form/link.vue';
+import FormBase from '@client/components/debobigego/base.vue';
+import FormGroup from '@client/components/debobigego/group.vue';
+import FormLink from '@client/components/debobigego/link.vue';
 import * as os from '@client/os';
 import { ColdDeviceStorage } from '@client/store';
 import * as symbols from '@client/symbols';
@@ -26,7 +26,8 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.plugins,
-				icon: 'fas fa-plug'
+				icon: 'fas fa-plug',
+				bg: 'var(--bg)',
 			},
 			plugins: ColdDeviceStorage.get('plugins').length,
 		}
diff --git a/src/client/pages/settings/privacy.vue b/src/client/pages/settings/privacy.vue
index 46d8c17ca2..7756158578 100644
--- a/src/client/pages/settings/privacy.vue
+++ b/src/client/pages/settings/privacy.vue
@@ -1,43 +1,43 @@
 <template>
 <FormBase>
 	<FormGroup>
-		<FormSwitch v-model:value="isLocked" @update:value="save()">{{ $ts.makeFollowManuallyApprove }}</FormSwitch>
-		<FormSwitch v-model:value="autoAcceptFollowed" :disabled="!isLocked" @update:value="save()">{{ $ts.autoAcceptFollowed }}</FormSwitch>
+		<FormSwitch v-model="isLocked" @update:modelValue="save()">{{ $ts.makeFollowManuallyApprove }}</FormSwitch>
+		<FormSwitch v-model="autoAcceptFollowed" :disabled="!isLocked" @update:modelValue="save()">{{ $ts.autoAcceptFollowed }}</FormSwitch>
 		<template #caption>{{ $ts.lockedAccountInfo }}</template>
 	</FormGroup>
-	<FormSwitch v-model:value="hideOnlineStatus" @update:value="save()">
+	<FormSwitch v-model="hideOnlineStatus" @update:modelValue="save()">
 		{{ $ts.hideOnlineStatus }}
 		<template #desc>{{ $ts.hideOnlineStatusDescription }}</template>
 	</FormSwitch>
-	<FormSwitch v-model:value="noCrawle" @update:value="save()">
+	<FormSwitch v-model="noCrawle" @update:modelValue="save()">
 		{{ $ts.noCrawle }}
 		<template #desc>{{ $ts.noCrawleDescription }}</template>
 	</FormSwitch>
-	<FormSwitch v-model:value="isExplorable" @update:value="save()">
+	<FormSwitch v-model="isExplorable" @update:modelValue="save()">
 		{{ $ts.makeExplorable }}
 		<template #desc>{{ $ts.makeExplorableDescription }}</template>
 	</FormSwitch>
-	<FormSwitch v-model:value="rememberNoteVisibility" @update:value="save()">{{ $ts.rememberNoteVisibility }}</FormSwitch>
+	<FormSwitch v-model="rememberNoteVisibility" @update:modelValue="save()">{{ $ts.rememberNoteVisibility }}</FormSwitch>
 	<FormGroup v-if="!rememberNoteVisibility">
 		<template #label>{{ $ts.defaultNoteVisibility }}</template>
-		<FormSelect v-model:value="defaultNoteVisibility">
+		<FormSelect v-model="defaultNoteVisibility">
 			<option value="public">{{ $ts._visibility.public }}</option>
 			<option value="home">{{ $ts._visibility.home }}</option>
 			<option value="followers">{{ $ts._visibility.followers }}</option>
 			<option value="specified">{{ $ts._visibility.specified }}</option>
 		</FormSelect>
-		<FormSwitch v-model:value="defaultNoteLocalOnly">{{ $ts._visibility.localOnly }}</FormSwitch>
+		<FormSwitch v-model="defaultNoteLocalOnly">{{ $ts._visibility.localOnly }}</FormSwitch>
 	</FormGroup>
-	<FormSwitch v-model:value="keepCw" @update:value="save()">{{ $ts.keepCw }}</FormSwitch>
+	<FormSwitch v-model="keepCw" @update:modelValue="save()">{{ $ts.keepCw }}</FormSwitch>
 </FormBase>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import FormSwitch from '@client/components/form/switch.vue';
-import FormSelect from '@client/components/form/select.vue';
-import FormBase from '@client/components/form/base.vue';
-import FormGroup from '@client/components/form/group.vue';
+import FormSwitch from '@client/components/debobigego/switch.vue';
+import FormSelect from '@client/components/debobigego/select.vue';
+import FormBase from '@client/components/debobigego/base.vue';
+import FormGroup from '@client/components/debobigego/group.vue';
 import * as os from '@client/os';
 import { defaultStore } from '@client/store';
 import * as symbols from '@client/symbols';
@@ -56,7 +56,8 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.privacy,
-				icon: 'fas fa-lock-open'
+				icon: 'fas fa-lock-open',
+				bg: 'var(--bg)',
 			},
 			isLocked: false,
 			autoAcceptFollowed: false,
diff --git a/src/client/pages/settings/profile.vue b/src/client/pages/settings/profile.vue
index de7e86bd12..3c93e93480 100644
--- a/src/client/pages/settings/profile.vue
+++ b/src/client/pages/settings/profile.vue
@@ -1,33 +1,33 @@
 <template>
 <FormBase>
 	<FormGroup>
-		<div class="_formItem _formPanel llvierxe" :style="{ backgroundImage: $i.bannerUrl ? `url(${ $i.bannerUrl })` : null }">
+		<div class="_debobigegoItem _debobigegoPanel llvierxe" :style="{ backgroundImage: $i.bannerUrl ? `url(${ $i.bannerUrl })` : null }">
 			<MkAvatar class="avatar" :user="$i"/>
 		</div>
 		<FormButton @click="changeAvatar" primary>{{ $ts._profile.changeAvatar }}</FormButton>
 		<FormButton @click="changeBanner" primary>{{ $ts._profile.changeBanner }}</FormButton>
 	</FormGroup>
 
-	<FormInput v-model:value="name" :max="30" manual-save>
+	<FormInput v-model="name" :max="30" manual-save>
 		<span>{{ $ts._profile.name }}</span>
 	</FormInput>
 
-	<FormTextarea v-model:value="description" :max="500" tall manual-save>
+	<FormTextarea v-model="description" :max="500" tall manual-save>
 		<span>{{ $ts._profile.description }}</span>
 		<template #desc>{{ $ts._profile.youCanIncludeHashtags }}</template>
 	</FormTextarea>
 
-	<FormInput v-model:value="location" manual-save>
+	<FormInput v-model="location" manual-save>
 		<span>{{ $ts.location }}</span>
 		<template #prefix><i class="fas fa-map-marker-alt"></i></template>
 	</FormInput>
 
-	<FormInput v-model:value="birthday" type="date" manual-save>
+	<FormInput v-model="birthday" type="date" manual-save>
 		<span>{{ $ts.birthday }}</span>
 		<template #prefix><i class="fas fa-birthday-cake"></i></template>
 	</FormInput>
 
-	<FormSelect v-model:value="lang">
+	<FormSelect v-model="lang">
 		<template #label>{{ $ts.language }}</template>
 		<option v-for="x in langs" :value="x[0]" :key="x[0]">{{ x[1] }}</option>
 	</FormSelect>
@@ -37,23 +37,23 @@
 		<template #caption>{{ $ts._profile.metadataDescription }}</template>
 	</FormGroup>
 
-	<FormSwitch v-model:value="isCat">{{ $ts.flagAsCat }}<template #desc>{{ $ts.flagAsCatDescription }}</template></FormSwitch>
+	<FormSwitch v-model="isCat">{{ $ts.flagAsCat }}<template #desc>{{ $ts.flagAsCatDescription }}</template></FormSwitch>
 
-	<FormSwitch v-model:value="isBot">{{ $ts.flagAsBot }}<template #desc>{{ $ts.flagAsBotDescription }}</template></FormSwitch>
+	<FormSwitch v-model="isBot">{{ $ts.flagAsBot }}<template #desc>{{ $ts.flagAsBotDescription }}</template></FormSwitch>
 
-	<FormSwitch v-model:value="alwaysMarkNsfw">{{ $ts.alwaysMarkSensitive }}</FormSwitch>
+	<FormSwitch v-model="alwaysMarkNsfw">{{ $ts.alwaysMarkSensitive }}</FormSwitch>
 </FormBase>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import FormButton from '@client/components/form/button.vue';
-import FormInput from '@client/components/form/input.vue';
-import FormTextarea from '@client/components/form/textarea.vue';
-import FormSwitch from '@client/components/form/switch.vue';
-import FormSelect from '@client/components/form/select.vue';
-import FormBase from '@client/components/form/base.vue';
-import FormGroup from '@client/components/form/group.vue';
+import FormButton from '@client/components/debobigego/button.vue';
+import FormInput from '@client/components/debobigego/input.vue';
+import FormTextarea from '@client/components/debobigego/textarea.vue';
+import FormSwitch from '@client/components/debobigego/switch.vue';
+import FormSelect from '@client/components/debobigego/select.vue';
+import FormBase from '@client/components/debobigego/base.vue';
+import FormGroup from '@client/components/debobigego/group.vue';
 import { host, langs } from '@client/config';
 import { selectFile } from '@client/scripts/select-file';
 import * as os from '@client/os';
@@ -76,7 +76,8 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.profile,
-				icon: 'fas fa-user'
+				icon: 'fas fa-user',
+				bg: 'var(--bg)'
 			},
 			host,
 			langs,
diff --git a/src/client/pages/settings/reaction.vue b/src/client/pages/settings/reaction.vue
index a0024234e4..a5ff46097d 100644
--- a/src/client/pages/settings/reaction.vue
+++ b/src/client/pages/settings/reaction.vue
@@ -1,8 +1,8 @@
 <template>
 <FormBase>
-	<div class="_formItem">
-		<div class="_formLabel">{{ $ts.reactionSettingDescription }}</div>
-		<div class="_formPanel">
+	<div class="_debobigegoItem">
+		<div class="_debobigegoLabel">{{ $ts.reactionSettingDescription }}</div>
+		<div class="_debobigegoPanel">
 			<XDraggable class="zoaiodol" v-model="reactions" :item-key="item => item" animation="150" delay="100" delay-on-touch-only="true">
 				<template #item="{element}">
 					<button class="_button item" @click="remove(element, $event)">
@@ -14,7 +14,7 @@
 				</template>
 			</XDraggable>
 		</div>
-		<div class="_formCaption">{{ $ts.reactionSettingDescription2 }} <button class="_textButton" @click="preview">{{ $ts.preview }}</button></div>
+		<div class="_debobigegoCaption">{{ $ts.reactionSettingDescription2 }} <button class="_textButton" @click="preview">{{ $ts.preview }}</button></div>
 	</div>
 
 	<FormRadios v-model="reactionPickerWidth">
@@ -37,10 +37,10 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import XDraggable from 'vuedraggable';
-import FormInput from '@client/components/form/input.vue';
-import FormRadios from '@client/components/form/radios.vue';
-import FormBase from '@client/components/form/base.vue';
-import FormButton from '@client/components/form/button.vue';
+import FormInput from '@client/components/debobigego/input.vue';
+import FormRadios from '@client/components/debobigego/radios.vue';
+import FormBase from '@client/components/debobigego/base.vue';
+import FormButton from '@client/components/debobigego/button.vue';
 import * as os from '@client/os';
 import { defaultStore } from '@client/store';
 import * as symbols from '@client/symbols';
@@ -64,7 +64,8 @@ export default defineComponent({
 				action: {
 					icon: 'fas fa-eye',
 					handler: this.preview
-				}
+				},
+				bg: 'var(--bg)',
 			},
 			reactions: JSON.parse(JSON.stringify(this.$store.state.reactions)),
 		}
diff --git a/src/client/pages/settings/registry.keys.vue b/src/client/pages/settings/registry.keys.vue
index f71589ba4f..d99002e50f 100644
--- a/src/client/pages/settings/registry.keys.vue
+++ b/src/client/pages/settings/registry.keys.vue
@@ -25,11 +25,11 @@ import { defineAsyncComponent, defineComponent } from 'vue';
 import * as JSON5 from 'json5';
 import FormSwitch from '@client/components/form/switch.vue';
 import FormSelect from '@client/components/form/select.vue';
-import FormLink from '@client/components/form/link.vue';
-import FormBase from '@client/components/form/base.vue';
-import FormGroup from '@client/components/form/group.vue';
-import FormButton from '@client/components/form/button.vue';
-import FormKeyValueView from '@client/components/form/key-value-view.vue';
+import FormLink from '@client/components/debobigego/link.vue';
+import FormBase from '@client/components/debobigego/base.vue';
+import FormGroup from '@client/components/debobigego/group.vue';
+import FormButton from '@client/components/debobigego/button.vue';
+import FormKeyValueView from '@client/components/debobigego/key-value-view.vue';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';
 
@@ -56,7 +56,8 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.registry,
-				icon: 'fas fa-cogs'
+				icon: 'fas fa-cogs',
+				bg: 'var(--bg)',
 			},
 			keys: null,
 		}
diff --git a/src/client/pages/settings/registry.value.vue b/src/client/pages/settings/registry.value.vue
index 48245ae99f..06be5737e9 100644
--- a/src/client/pages/settings/registry.value.vue
+++ b/src/client/pages/settings/registry.value.vue
@@ -19,7 +19,7 @@
 		</FormGroup>
 
 		<FormGroup>
-			<FormTextarea tall v-model:value="valueForEditor" class="_monospace" style="tab-size: 2;">
+			<FormTextarea tall v-model="valueForEditor" class="_monospace" style="tab-size: 2;">
 				<span>{{ $ts.value }} (JSON)</span>
 			</FormTextarea>
 			<FormButton @click="save" primary><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
@@ -38,14 +38,14 @@
 <script lang="ts">
 import { defineAsyncComponent, defineComponent } from 'vue';
 import * as JSON5 from 'json5';
-import FormInfo from '@client/components/form/info.vue';
+import FormInfo from '@client/components/debobigego/info.vue';
 import FormSwitch from '@client/components/form/switch.vue';
 import FormSelect from '@client/components/form/select.vue';
 import FormTextarea from '@client/components/form/textarea.vue';
-import FormBase from '@client/components/form/base.vue';
-import FormGroup from '@client/components/form/group.vue';
-import FormButton from '@client/components/form/button.vue';
-import FormKeyValueView from '@client/components/form/key-value-view.vue';
+import FormBase from '@client/components/debobigego/base.vue';
+import FormGroup from '@client/components/debobigego/group.vue';
+import FormButton from '@client/components/debobigego/button.vue';
+import FormKeyValueView from '@client/components/debobigego/key-value-view.vue';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';
 
@@ -76,7 +76,8 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.registry,
-				icon: 'fas fa-cogs'
+				icon: 'fas fa-cogs',
+				bg: 'var(--bg)',
 			},
 			value: null,
 			valueForEditor: null,
diff --git a/src/client/pages/settings/registry.vue b/src/client/pages/settings/registry.vue
index 5ba1bc751b..e4fb230d5c 100644
--- a/src/client/pages/settings/registry.vue
+++ b/src/client/pages/settings/registry.vue
@@ -13,11 +13,11 @@ import { defineAsyncComponent, defineComponent } from 'vue';
 import * as JSON5 from 'json5';
 import FormSwitch from '@client/components/form/switch.vue';
 import FormSelect from '@client/components/form/select.vue';
-import FormLink from '@client/components/form/link.vue';
-import FormBase from '@client/components/form/base.vue';
-import FormGroup from '@client/components/form/group.vue';
-import FormButton from '@client/components/form/button.vue';
-import FormKeyValueView from '@client/components/form/key-value-view.vue';
+import FormLink from '@client/components/debobigego/link.vue';
+import FormBase from '@client/components/debobigego/base.vue';
+import FormGroup from '@client/components/debobigego/group.vue';
+import FormButton from '@client/components/debobigego/button.vue';
+import FormKeyValueView from '@client/components/debobigego/key-value-view.vue';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';
 
@@ -38,7 +38,8 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.registry,
-				icon: 'fas fa-cogs'
+				icon: 'fas fa-cogs',
+				bg: 'var(--bg)',
 			},
 			scopes: null,
 		}
diff --git a/src/client/pages/settings/security.vue b/src/client/pages/settings/security.vue
index b70fa5a9f3..e051685a82 100644
--- a/src/client/pages/settings/security.vue
+++ b/src/client/pages/settings/security.vue
@@ -6,7 +6,7 @@
 	<FormPagination :pagination="pagination">
 		<template #label>{{ $ts.signinHistory }}</template>
 		<template #default="{items}">
-			<div class="_formPanel timnmucd" v-for="item in items" :key="item.id">
+			<div class="_debobigegoPanel timnmucd" v-for="item in items" :key="item.id">
 				<header>
 					<i v-if="item.success" class="fas fa-check icon succ"></i>
 					<i v-else class="fas fa-times-circle icon fail"></i>
@@ -25,11 +25,11 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import FormBase from '@client/components/form/base.vue';
-import FormLink from '@client/components/form/link.vue';
-import FormGroup from '@client/components/form/group.vue';
-import FormButton from '@client/components/form/button.vue';
-import FormPagination from '@client/components/form/pagination.vue';
+import FormBase from '@client/components/debobigego/base.vue';
+import FormLink from '@client/components/debobigego/link.vue';
+import FormGroup from '@client/components/debobigego/group.vue';
+import FormButton from '@client/components/debobigego/button.vue';
+import FormPagination from '@client/components/debobigego/pagination.vue';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';
 
@@ -48,7 +48,8 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.security,
-				icon: 'fas fa-lock'
+				icon: 'fas fa-lock',
+				bg: 'var(--bg)',
 			},
 			pagination: {
 				endpoint: 'i/signin-history',
diff --git a/src/client/pages/settings/sounds.vue b/src/client/pages/settings/sounds.vue
index 1c51685ce8..07310619c8 100644
--- a/src/client/pages/settings/sounds.vue
+++ b/src/client/pages/settings/sounds.vue
@@ -1,6 +1,6 @@
 <template>
 <FormBase>
-	<FormRange v-model:value="masterVolume" :min="0" :max="1" :step="0.05">
+	<FormRange v-model="masterVolume" :min="0" :max="1" :step="0.05">
 		<template #label><i class="fas fa-volume-icon"></i> {{ $ts.masterVolume }}</template>
 	</FormRange>
 
@@ -19,11 +19,11 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import FormRange from '@client/components/form/range.vue';
-import FormSelect from '@client/components/form/select.vue';
-import FormBase from '@client/components/form/base.vue';
-import FormButton from '@client/components/form/button.vue';
-import FormGroup from '@client/components/form/group.vue';
+import FormRange from '@client/components/debobigego/range.vue';
+import FormSelect from '@client/components/debobigego/select.vue';
+import FormBase from '@client/components/debobigego/base.vue';
+import FormButton from '@client/components/debobigego/button.vue';
+import FormGroup from '@client/components/debobigego/group.vue';
 import * as os from '@client/os';
 import { ColdDeviceStorage } from '@client/store';
 import { playFile } from '@client/scripts/sound';
@@ -71,7 +71,8 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.sounds,
-				icon: 'fas fa-music'
+				icon: 'fas fa-music',
+				bg: 'var(--bg)',
 			},
 			sounds: {},
 		}
diff --git a/src/client/pages/settings/theme.install.vue b/src/client/pages/settings/theme.install.vue
index d719cc801f..9fbb28929d 100644
--- a/src/client/pages/settings/theme.install.vue
+++ b/src/client/pages/settings/theme.install.vue
@@ -1,7 +1,7 @@
 <template>
 <FormBase>
 	<FormGroup>
-		<FormTextarea v-model:value="installThemeCode">
+		<FormTextarea v-model="installThemeCode">
 			<span>{{ $ts._theme.code }}</span>
 		</FormTextarea>
 		<FormButton @click="() => preview(installThemeCode)" :disabled="installThemeCode == null" inline><i class="fas fa-eye"></i> {{ $ts.preview }}</FormButton>
@@ -17,10 +17,10 @@ import * as JSON5 from 'json5';
 import FormTextarea from '@client/components/form/textarea.vue';
 import FormSelect from '@client/components/form/select.vue';
 import FormRadios from '@client/components/form/radios.vue';
-import FormBase from '@client/components/form/base.vue';
-import FormGroup from '@client/components/form/group.vue';
-import FormLink from '@client/components/form/link.vue';
-import FormButton from '@client/components/form/button.vue';
+import FormBase from '@client/components/debobigego/base.vue';
+import FormGroup from '@client/components/debobigego/group.vue';
+import FormLink from '@client/components/debobigego/link.vue';
+import FormButton from '@client/components/debobigego/button.vue';
 import { applyTheme, validateTheme } from '@client/scripts/theme';
 import * as os from '@client/os';
 import { ColdDeviceStorage } from '@client/store';
@@ -44,7 +44,8 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts._theme.install,
-				icon: 'fas fa-download'
+				icon: 'fas fa-download',
+				bg: 'var(--bg)',
 			},
 			installThemeCode: null,
 		}
diff --git a/src/client/pages/settings/theme.manage.vue b/src/client/pages/settings/theme.manage.vue
index 7cc7a0169a..da21a47a50 100644
--- a/src/client/pages/settings/theme.manage.vue
+++ b/src/client/pages/settings/theme.manage.vue
@@ -1,6 +1,6 @@
 <template>
 <FormBase>
-	<FormSelect v-model:value="selectedThemeId">
+	<FormSelect v-model="selectedThemeId">
 		<template #label>{{ $ts.theme }}</template>
 		<optgroup :label="$ts._theme.installedThemes">
 			<option v-for="x in installedThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
@@ -31,10 +31,10 @@ import * as JSON5 from 'json5';
 import FormTextarea from '@client/components/form/textarea.vue';
 import FormSelect from '@client/components/form/select.vue';
 import FormRadios from '@client/components/form/radios.vue';
-import FormBase from '@client/components/form/base.vue';
-import FormGroup from '@client/components/form/group.vue';
+import FormBase from '@client/components/debobigego/base.vue';
+import FormGroup from '@client/components/debobigego/group.vue';
 import FormInput from '@client/components/form/input.vue';
-import FormButton from '@client/components/form/button.vue';
+import FormButton from '@client/components/debobigego/button.vue';
 import { Theme, builtinThemes } from '@client/scripts/theme';
 import copyToClipboard from '@client/scripts/copy-to-clipboard';
 import * as os from '@client/os';
@@ -59,7 +59,8 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts._theme.manage,
-				icon: 'fas fa-folder-open'
+				icon: 'fas fa-folder-open',
+				bg: 'var(--bg)',
 			},
 			installedThemes: getThemes(),
 			builtinThemes,
diff --git a/src/client/pages/settings/theme.vue b/src/client/pages/settings/theme.vue
index 94eddb1b6f..c6be42251c 100644
--- a/src/client/pages/settings/theme.vue
+++ b/src/client/pages/settings/theme.vue
@@ -1,7 +1,7 @@
 <template>
 <FormBase>
 	<FormGroup>
-		<div class="rfqxtzch _formItem _formPanel">
+		<div class="rfqxtzch _debobigegoItem _debobigegoPanel">
 			<div class="darkMode">
 				<div class="toggleWrapper">
 					<input type="checkbox" class="dn" id="dn" v-model="darkMode"/>
@@ -23,11 +23,11 @@
 				</div>
 			</div>
 		</div>
-		<FormSwitch v-model:value="syncDeviceDarkMode">{{ $ts.syncDeviceDarkMode }}</FormSwitch>
+		<FormSwitch v-model="syncDeviceDarkMode">{{ $ts.syncDeviceDarkMode }}</FormSwitch>
 	</FormGroup>
 
 	<template v-if="darkMode">
-		<FormSelect v-model:value="darkThemeId">
+		<FormSelect v-model="darkThemeId">
 			<template #label>{{ $ts.themeForDarkMode }}</template>
 			<optgroup :label="$ts.darkThemes">
 				<option v-for="x in darkThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
@@ -36,7 +36,7 @@
 				<option v-for="x in lightThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
 			</optgroup>
 		</FormSelect>
-		<FormSelect v-model:value="lightThemeId">
+		<FormSelect v-model="lightThemeId">
 			<template #label>{{ $ts.themeForLightMode }}</template>
 			<optgroup :label="$ts.lightThemes">
 				<option v-for="x in lightThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
@@ -47,7 +47,7 @@
 		</FormSelect>
 	</template>
 	<template v-else>
-		<FormSelect v-model:value="lightThemeId">
+		<FormSelect v-model="lightThemeId">
 			<template #label>{{ $ts.themeForLightMode }}</template>
 			<optgroup :label="$ts.lightThemes">
 				<option v-for="x in lightThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
@@ -56,7 +56,7 @@
 				<option v-for="x in darkThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
 			</optgroup>
 		</FormSelect>
-		<FormSelect v-model:value="darkThemeId">
+		<FormSelect v-model="darkThemeId">
 			<template #label>{{ $ts.themeForDarkMode }}</template>
 			<optgroup :label="$ts.darkThemes">
 				<option v-for="x in darkThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
@@ -86,12 +86,12 @@
 
 <script lang="ts">
 import { computed, defineComponent, onActivated, onMounted, ref, watch } from 'vue';
-import FormSwitch from '@client/components/form/switch.vue';
-import FormSelect from '@client/components/form/select.vue';
-import FormBase from '@client/components/form/base.vue';
-import FormGroup from '@client/components/form/group.vue';
-import FormLink from '@client/components/form/link.vue';
-import FormButton from '@client/components/form/button.vue';
+import FormSwitch from '@client/components/debobigego/switch.vue';
+import FormSelect from '@client/components/debobigego/select.vue';
+import FormBase from '@client/components/debobigego/base.vue';
+import FormGroup from '@client/components/debobigego/group.vue';
+import FormLink from '@client/components/debobigego/link.vue';
+import FormButton from '@client/components/debobigego/button.vue';
 import { builtinThemes } from '@client/scripts/theme';
 import { selectFile } from '@client/scripts/select-file';
 import { isDeviceDarkmode } from '@client/scripts/is-device-darkmode';
@@ -116,7 +116,8 @@ export default defineComponent({
 	setup(props, { emit }) {
 		const INFO = {
 			title: i18n.locale.theme,
-			icon: 'fas fa-palette'
+			icon: 'fas fa-palette',
+				bg: 'var(--bg)',
 		};
 
 		const installedThemes = ref(getThemes());
diff --git a/src/client/pages/settings/update.vue b/src/client/pages/settings/update.vue
index 8000327d0c..8bc459e936 100644
--- a/src/client/pages/settings/update.vue
+++ b/src/client/pages/settings/update.vue
@@ -32,12 +32,12 @@
 import { defineAsyncComponent, defineComponent } from 'vue';
 import FormSwitch from '@client/components/form/switch.vue';
 import FormSelect from '@client/components/form/select.vue';
-import FormLink from '@client/components/form/link.vue';
-import FormBase from '@client/components/form/base.vue';
-import FormGroup from '@client/components/form/group.vue';
-import FormButton from '@client/components/form/button.vue';
-import FormKeyValueView from '@client/components/form/key-value-view.vue';
-import FormInfo from '@client/components/form/info.vue';
+import FormLink from '@client/components/debobigego/link.vue';
+import FormBase from '@client/components/debobigego/base.vue';
+import FormGroup from '@client/components/debobigego/group.vue';
+import FormButton from '@client/components/debobigego/button.vue';
+import FormKeyValueView from '@client/components/debobigego/key-value-view.vue';
+import FormInfo from '@client/components/debobigego/info.vue';
 import * as os from '@client/os';
 import { version, instanceName } from '@client/config';
 import * as symbols from '@client/symbols';
@@ -60,7 +60,8 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: 'Misskey Update',
-				icon: 'fas fa-sync-alt'
+				icon: 'fas fa-sync-alt',
+				bg: 'var(--bg)',
 			},
 			version,
 			instanceName,
diff --git a/src/client/pages/settings/word-mute.vue b/src/client/pages/settings/word-mute.vue
index fe3fece844..53948b1b1e 100644
--- a/src/client/pages/settings/word-mute.vue
+++ b/src/client/pages/settings/word-mute.vue
@@ -1,21 +1,21 @@
 <template>
 <div>
-	<MkTab v-model:value="tab">
+	<MkTab v-model="tab">
 		<option value="soft">{{ $ts._wordMute.soft }}</option>
 		<option value="hard">{{ $ts._wordMute.hard }}</option>
 	</MkTab>
 	<FormBase>
-		<div class="_formItem">
+		<div class="_debobigegoItem">
 			<div v-show="tab === 'soft'">
 				<FormInfo>{{ $ts._wordMute.softDescription }}</FormInfo>
-				<FormTextarea v-model:value="softMutedWords">
+				<FormTextarea v-model="softMutedWords">
 					<span>{{ $ts._wordMute.muteWords }}</span>
 					<template #desc>{{ $ts._wordMute.muteWordsDescription }}<br>{{ $ts._wordMute.muteWordsDescription2 }}</template>
 				</FormTextarea>
 			</div>
 			<div v-show="tab === 'hard'">
 				<FormInfo>{{ $ts._wordMute.hardDescription }}</FormInfo>
-				<FormTextarea v-model:value="hardMutedWords">
+				<FormTextarea v-model="hardMutedWords">
 					<span>{{ $ts._wordMute.muteWords }}</span>
 					<template #desc>{{ $ts._wordMute.muteWordsDescription }}<br>{{ $ts._wordMute.muteWordsDescription2 }}</template>
 				</FormTextarea>
@@ -33,10 +33,10 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import FormTextarea from '@client/components/form/textarea.vue';
-import FormBase from '@client/components/form/base.vue';
-import FormKeyValueView from '@client/components/form/key-value-view.vue';
-import FormButton from '@client/components/form/button.vue';
-import FormInfo from '@client/components/form/info.vue';
+import FormBase from '@client/components/debobigego/base.vue';
+import FormKeyValueView from '@client/components/debobigego/key-value-view.vue';
+import FormButton from '@client/components/debobigego/button.vue';
+import FormInfo from '@client/components/debobigego/info.vue';
 import MkTab from '@client/components/tab.vue';
 import * as os from '@client/os';
 import number from '@client/filters/number';
@@ -58,7 +58,8 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.wordMute,
-				icon: 'fas fa-comment-slash'
+				icon: 'fas fa-comment-slash',
+				bg: 'var(--bg)',
 			},
 			tab: 'soft',
 			softMutedWords: '',