refactor components

31 files changed, 228 insertions, 228 deletions

diff --git a/src/client/pages/instance/abuses.vue b/src/client/pages/instance/abuses.vue
index ac20ebabe5..a66847938d 100644
--- a/src/client/pages/instance/abuses.vue
+++ b/src/client/pages/instance/abuses.vue
@@ -24,10 +24,10 @@
 			</div>
 			<!-- TODO
 			<div class="inputs" style="display: flex; padding-top: 1.2em;">
-				<MkInput v-model:value="searchUsername" style="margin: 0; flex: 1;" type="text" spellcheck="false" @update:value="$refs.reports.reload()">
+				<MkInput v-model="searchUsername" style="margin: 0; flex: 1;" type="text" spellcheck="false" @update:modelValue="$refs.reports.reload()">
 					<span>{{ $ts.username }}</span>
 				</MkInput>
-				<MkInput v-model:value="searchHost" style="margin: 0; flex: 1;" type="text" spellcheck="false" @update:value="$refs.reports.reload()" :disabled="pagination.params().origin === 'local'">
+				<MkInput v-model="searchHost" style="margin: 0; flex: 1;" type="text" spellcheck="false" @update:modelValue="$refs.reports.reload()" :disabled="pagination.params().origin === 'local'">
 					<span>{{ $ts.host }}</span>
 				</MkInput>
 			</div>
@@ -65,8 +65,8 @@
 import { defineComponent } from 'vue';
 import { parseAcct } from '@/misc/acct';
 import MkButton from '@client/components/ui/button.vue';
-import MkInput from '@client/components/ui/input.vue';
-import MkSelect from '@client/components/ui/select.vue';
+import MkInput from '@client/components/form/input.vue';
+import MkSelect from '@client/components/form/select.vue';
 import MkPagination from '@client/components/ui/pagination.vue';
 import { acct } from '@client/filters/user';
 import * as os from '@client/os';
diff --git a/src/client/pages/instance/ads.vue b/src/client/pages/instance/ads.vue
index 50c8c29cbf..8742d0bda1 100644
--- a/src/client/pages/instance/ads.vue
+++ b/src/client/pages/instance/ads.vue
@@ -44,9 +44,9 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import MkButton from '@client/components/ui/button.vue';
-import MkInput from '@client/components/ui/input.vue';
-import MkTextarea from '@client/components/ui/textarea.vue';
-import MkRadio from '@client/components/ui/radio.vue';
+import MkInput from '@client/components/form/input.vue';
+import MkTextarea from '@client/components/form/textarea.vue';
+import MkRadio from '@client/components/form/radio.vue';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';
 
diff --git a/src/client/pages/instance/announcements.vue b/src/client/pages/instance/announcements.vue
index d48e3737ad..35d676cf28 100644
--- a/src/client/pages/instance/announcements.vue
+++ b/src/client/pages/instance/announcements.vue
@@ -25,8 +25,8 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import MkButton from '@client/components/ui/button.vue';
-import MkInput from '@client/components/ui/input.vue';
-import MkTextarea from '@client/components/ui/textarea.vue';
+import MkInput from '@client/components/form/input.vue';
+import MkTextarea from '@client/components/form/textarea.vue';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';
 
diff --git a/src/client/pages/instance/bot-protection.vue b/src/client/pages/instance/bot-protection.vue
index 449b8a233d..731f114cc2 100644
--- a/src/client/pages/instance/bot-protection.vue
+++ b/src/client/pages/instance/bot-protection.vue
@@ -9,43 +9,43 @@
 		</FormRadios>
 
 		<template v-if="provider === 'hcaptcha'">
-			<div class="_formItem _formNoConcat" v-sticky-container>
-				<div class="_formLabel">hCaptcha</div>
+			<div class="_debobigegoItem _debobigegoNoConcat" v-sticky-container>
+				<div class="_debobigegoLabel">hCaptcha</div>
 				<div class="main">
-					<FormInput v-model:value="hcaptchaSiteKey">
+					<FormInput v-model="hcaptchaSiteKey">
 						<template #prefix><i class="fas fa-key"></i></template>
 						<span>{{ $ts.hcaptchaSiteKey }}</span>
 					</FormInput>
-					<FormInput v-model:value="hcaptchaSecretKey">
+					<FormInput v-model="hcaptchaSecretKey">
 						<template #prefix><i class="fas fa-key"></i></template>
 						<span>{{ $ts.hcaptchaSecretKey }}</span>
 					</FormInput>
 				</div>
 			</div>
-			<div class="_formItem _formNoConcat" v-sticky-container>
-				<div class="_formLabel">{{ $ts.preview }}</div>
-				<div class="_formPanel" style="padding: var(--formContentHMargin);">
+			<div class="_debobigegoItem _debobigegoNoConcat" v-sticky-container>
+				<div class="_debobigegoLabel">{{ $ts.preview }}</div>
+				<div class="_debobigegoPanel" style="padding: var(--debobigegoContentHMargin);">
 					<MkCaptcha provider="hcaptcha" :sitekey="hcaptchaSiteKey || '10000000-ffff-ffff-ffff-000000000001'"/>
 				</div>
 			</div>
 		</template>
 		<template v-else-if="provider === 'recaptcha'">
-			<div class="_formItem _formNoConcat" v-sticky-container>
-				<div class="_formLabel">reCAPTCHA</div>
+			<div class="_debobigegoItem _debobigegoNoConcat" v-sticky-container>
+				<div class="_debobigegoLabel">reCAPTCHA</div>
 				<div class="main">
-					<FormInput v-model:value="recaptchaSiteKey">
+					<FormInput v-model="recaptchaSiteKey">
 						<template #prefix><i class="fas fa-key"></i></template>
 						<span>{{ $ts.recaptchaSiteKey }}</span>
 					</FormInput>
-					<FormInput v-model:value="recaptchaSecretKey">
+					<FormInput v-model="recaptchaSecretKey">
 						<template #prefix><i class="fas fa-key"></i></template>
 						<span>{{ $ts.recaptchaSecretKey }}</span>
 					</FormInput>
 				</div>
 			</div>
-			<div v-if="recaptchaSiteKey" class="_formItem _formNoConcat" v-sticky-container>
-				<div class="_formLabel">{{ $ts.preview }}</div>
-				<div class="_formPanel" style="padding: var(--formContentHMargin);">
+			<div v-if="recaptchaSiteKey" class="_debobigegoItem _debobigegoNoConcat" v-sticky-container>
+				<div class="_debobigegoLabel">{{ $ts.preview }}</div>
+				<div class="_debobigegoPanel" style="padding: var(--debobigegoContentHMargin);">
 					<MkCaptcha provider="recaptcha" :sitekey="recaptchaSiteKey"/>
 				</div>
 			</div>
@@ -58,13 +58,13 @@
 
 <script lang="ts">
 import { defineAsyncComponent, defineComponent } from 'vue';
-import FormRadios from '@client/components/form/radios.vue';
-import FormInput from '@client/components/form/input.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 FormInfo from '@client/components/form/info.vue';
-import FormSuspense from '@client/components/form/suspense.vue';
+import FormRadios from '@client/components/debobigego/radios.vue';
+import FormInput from '@client/components/debobigego/input.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 FormInfo from '@client/components/debobigego/info.vue';
+import FormSuspense from '@client/components/debobigego/suspense.vue';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';
 import { fetchInstance } from '@client/instance';
diff --git a/src/client/pages/instance/database.vue b/src/client/pages/instance/database.vue
index a41d61ce2b..a8a1e9a54a 100644
--- a/src/client/pages/instance/database.vue
+++ b/src/client/pages/instance/database.vue
@@ -18,11 +18,11 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import FormSuspense from '@client/components/form/suspense.vue';
-import FormKeyValueView from '@client/components/form/key-value-view.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 FormSuspense from '@client/components/debobigego/suspense.vue';
+import FormKeyValueView from '@client/components/debobigego/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 * as os from '@client/os';
 import * as symbols from '@client/symbols';
 import bytes from '@client/filters/bytes';
diff --git a/src/client/pages/instance/email-settings.vue b/src/client/pages/instance/email-settings.vue
index 9965a1420f..251354a43a 100644
--- a/src/client/pages/instance/email-settings.vue
+++ b/src/client/pages/instance/email-settings.vue
@@ -1,30 +1,30 @@
 <template>
 <FormBase>
 	<FormSuspense :p="init">
-		<FormSwitch v-model:value="enableEmail">{{ $ts.enableEmail }}<template #desc>{{ $ts.emailConfigInfo }}</template></FormSwitch>
+		<FormSwitch v-model="enableEmail">{{ $ts.enableEmail }}<template #desc>{{ $ts.emailConfigInfo }}</template></FormSwitch>
 
 		<template v-if="enableEmail">
-			<FormInput v-model:value="email" type="email">
+			<FormInput v-model="email" type="email">
 				<span>{{ $ts.emailAddress }}</span>
 			</FormInput>
 
-			<div class="_formItem _formNoConcat" v-sticky-container>
-				<div class="_formLabel">{{ $ts.smtpConfig }}</div>
+			<div class="_debobigegoItem _debobigegoNoConcat" v-sticky-container>
+				<div class="_debobigegoLabel">{{ $ts.smtpConfig }}</div>
 				<div class="main">
-					<FormInput v-model:value="smtpHost">
+					<FormInput v-model="smtpHost">
 						<span>{{ $ts.smtpHost }}</span>
 					</FormInput>
-					<FormInput v-model:value="smtpPort" type="number">
+					<FormInput v-model="smtpPort" type="number">
 						<span>{{ $ts.smtpPort }}</span>
 					</FormInput>
-					<FormInput v-model:value="smtpUser">
+					<FormInput v-model="smtpUser">
 						<span>{{ $ts.smtpUser }}</span>
 					</FormInput>
-					<FormInput v-model:value="smtpPass" type="password">
+					<FormInput v-model="smtpPass" type="password">
 						<span>{{ $ts.smtpPass }}</span>
 					</FormInput>
 					<FormInfo>{{ $ts.emptyToDisableSmtpAuth }}</FormInfo>
-					<FormSwitch v-model:value="smtpSecure">{{ $ts.smtpSecure }}<template #desc>{{ $ts.smtpSecureInfo }}</template></FormSwitch>
+					<FormSwitch v-model="smtpSecure">{{ $ts.smtpSecure }}<template #desc>{{ $ts.smtpSecureInfo }}</template></FormSwitch>
 				</div>
 			</div>
 
@@ -38,13 +38,13 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import FormSwitch from '@client/components/form/switch.vue';
-import FormInput from '@client/components/form/input.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 FormInfo from '@client/components/form/info.vue';
-import FormSuspense from '@client/components/form/suspense.vue';
+import FormSwitch from '@client/components/debobigego/switch.vue';
+import FormInput from '@client/components/debobigego/input.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 FormInfo from '@client/components/debobigego/info.vue';
+import FormSuspense from '@client/components/debobigego/suspense.vue';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';
 import { fetchInstance } from '@client/instance';
diff --git a/src/client/pages/instance/emoji-edit-dialog.vue b/src/client/pages/instance/emoji-edit-dialog.vue
index 7e9bdc80dd..bd8b2061ae 100644
--- a/src/client/pages/instance/emoji-edit-dialog.vue
+++ b/src/client/pages/instance/emoji-edit-dialog.vue
@@ -31,7 +31,7 @@
 import { defineComponent } from 'vue';
 import XModalWindow from '@client/components/ui/modal-window.vue';
 import MkButton from '@client/components/ui/button.vue';
-import MkInput from '@client/components/ui/input.vue';
+import MkInput from '@client/components/form/input.vue';
 import * as os from '@client/os';
 import { unique } from '../../../prelude/array';
 
diff --git a/src/client/pages/instance/emojis.vue b/src/client/pages/instance/emojis.vue
index 7badc9da02..6118d869e9 100644
--- a/src/client/pages/instance/emojis.vue
+++ b/src/client/pages/instance/emojis.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="ogwlenmc">
-	<MkTab v-model:value="tab">
+	<MkTab v-model="tab">
 		<option value="local">{{ $ts.local }}</option>
 		<option value="remote">{{ $ts.remote }}</option>
 	</MkTab>
@@ -56,7 +56,7 @@
 <script lang="ts">
 import { computed, defineComponent } from 'vue';
 import MkButton from '@client/components/ui/button.vue';
-import MkInput from '@client/components/ui/input.vue';
+import MkInput from '@client/components/form/input.vue';
 import MkPagination from '@client/components/ui/pagination.vue';
 import MkTab from '@client/components/tab.vue';
 import { selectFile } from '@client/scripts/select-file';
diff --git a/src/client/pages/instance/file-dialog.vue b/src/client/pages/instance/file-dialog.vue
index 8a03a11de7..02d83e5022 100644
--- a/src/client/pages/instance/file-dialog.vue
+++ b/src/client/pages/instance/file-dialog.vue
@@ -37,7 +37,7 @@
 <script lang="ts">
 import { computed, defineComponent } from 'vue';
 import MkButton from '@client/components/ui/button.vue';
-import MkSwitch from '@client/components/ui/switch.vue';
+import MkSwitch from '@client/components/form/switch.vue';
 import XModalWindow from '@client/components/ui/modal-window.vue';
 import MkDriveFileThumbnail from '@client/components/drive-file-thumbnail.vue';
 import Progress from '@client/scripts/loading';
diff --git a/src/client/pages/instance/files-settings.vue b/src/client/pages/instance/files-settings.vue
index 614c7d4dbb..8bf4613a76 100644
--- a/src/client/pages/instance/files-settings.vue
+++ b/src/client/pages/instance/files-settings.vue
@@ -1,23 +1,23 @@
 <template>
 <FormBase>
 	<FormSuspense :p="init">
-		<FormSwitch v-model:value="cacheRemoteFiles">
+		<FormSwitch v-model="cacheRemoteFiles">
 			{{ $ts.cacheRemoteFiles }}
 			<template #desc>{{ $ts.cacheRemoteFilesDescription }}</template>
 		</FormSwitch>
 
-		<FormSwitch v-model:value="proxyRemoteFiles">
+		<FormSwitch v-model="proxyRemoteFiles">
 			{{ $ts.proxyRemoteFiles }}
 			<template #desc>{{ $ts.proxyRemoteFilesDescription }}</template>
 		</FormSwitch>
 
-		<FormInput v-model:value="localDriveCapacityMb" type="number">
+		<FormInput v-model="localDriveCapacityMb" type="number">
 			<span>{{ $ts.driveCapacityPerLocalAccount }}</span>
 			<template #suffix>MB</template>
 			<template #desc>{{ $ts.inMb }}</template>
 		</FormInput>
 
-		<FormInput v-model:value="remoteDriveCapacityMb" type="number" :disabled="!cacheRemoteFiles">
+		<FormInput v-model="remoteDriveCapacityMb" type="number" :disabled="!cacheRemoteFiles">
 			<span>{{ $ts.driveCapacityPerRemoteAccount }}</span>
 			<template #suffix>MB</template>
 			<template #desc>{{ $ts.inMb }}</template>
@@ -30,12 +30,12 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import FormSwitch from '@client/components/form/switch.vue';
-import FormInput from '@client/components/form/input.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 FormSuspense from '@client/components/form/suspense.vue';
+import FormSwitch from '@client/components/debobigego/switch.vue';
+import FormInput from '@client/components/debobigego/input.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 FormSuspense from '@client/components/debobigego/suspense.vue';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';
 import { fetchInstance } from '@client/instance';
diff --git a/src/client/pages/instance/files.vue b/src/client/pages/instance/files.vue
index b7f472b7c8..df2431ad02 100644
--- a/src/client/pages/instance/files.vue
+++ b/src/client/pages/instance/files.vue
@@ -63,8 +63,8 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import MkButton from '@client/components/ui/button.vue';
-import MkInput from '@client/components/ui/input.vue';
-import MkSelect from '@client/components/ui/select.vue';
+import MkInput from '@client/components/form/input.vue';
+import MkSelect from '@client/components/form/select.vue';
 import MkPagination from '@client/components/ui/pagination.vue';
 import MkDriveFileThumbnail from '@client/components/drive-file-thumbnail.vue';
 import bytes from '@client/filters/bytes';
diff --git a/src/client/pages/instance/index.vue b/src/client/pages/instance/index.vue
index 612bfa762a..657a654e51 100644
--- a/src/client/pages/instance/index.vue
+++ b/src/client/pages/instance/index.vue
@@ -3,8 +3,8 @@
 	<div class="nav" v-if="!narrow || page == null">
 		<FormBase>
 			<FormGroup>
-				<div class="_formItem">
-					<div class="_formPanel lxpfedzu">
+				<div class="_debobigegoItem">
+					<div class="_debobigegoPanel lxpfedzu">
 						<img :src="$instance.iconUrl || '/favicon.ico'" alt="" class="icon"/>
 					</div>
 				</div>
@@ -56,10 +56,10 @@
 <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 FormLink from '@client/components/debobigego/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 { scroll } from '@client/scripts/scroll';
 import * as symbols from '@client/symbols';
 import * as os from '@client/os';
diff --git a/src/client/pages/instance/instance-block.vue b/src/client/pages/instance/instance-block.vue
index ed5740f339..a00970d85b 100644
--- a/src/client/pages/instance/instance-block.vue
+++ b/src/client/pages/instance/instance-block.vue
@@ -1,7 +1,7 @@
 <template>
 <FormBase>
 	<FormSuspense :p="init">
-		<FormTextarea v-model:value="blockedHosts">
+		<FormTextarea v-model="blockedHosts">
 			<span>{{ $ts.blockedInstances }}</span>
 			<template #desc>{{ $ts.blockedInstancesDescription }}</template>
 		</FormTextarea>
@@ -13,14 +13,14 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import FormSwitch from '@client/components/form/switch.vue';
-import FormInput from '@client/components/form/input.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 FormTextarea from '@client/components/form/textarea.vue';
-import FormInfo from '@client/components/form/info.vue';
-import FormSuspense from '@client/components/form/suspense.vue';
+import FormSwitch from '@client/components/debobigego/switch.vue';
+import FormInput from '@client/components/debobigego/input.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 FormTextarea from '@client/components/debobigego/textarea.vue';
+import FormInfo from '@client/components/debobigego/info.vue';
+import FormSuspense from '@client/components/debobigego/suspense.vue';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';
 import { fetchInstance } from '@client/instance';
diff --git a/src/client/pages/instance/instance.vue b/src/client/pages/instance/instance.vue
index c39f0d1ecb..6117f090de 100644
--- a/src/client/pages/instance/instance.vue
+++ b/src/client/pages/instance/instance.vue
@@ -127,9 +127,9 @@ import { defineComponent, markRaw } from 'vue';
 import Chart from 'chart.js';
 import XModalWindow from '@client/components/ui/modal-window.vue';
 import MkUsersDialog from '@client/components/users-dialog.vue';
-import MkSelect from '@client/components/ui/select.vue';
+import MkSelect from '@client/components/form/select.vue';
 import MkButton from '@client/components/ui/button.vue';
-import MkSwitch from '@client/components/ui/switch.vue';
+import MkSwitch from '@client/components/form/switch.vue';
 import MkInfo from '@client/components/ui/info.vue';
 import bytes from '@client/filters/bytes';
 import number from '@client/filters/number';
diff --git a/src/client/pages/instance/integrations-discord.vue b/src/client/pages/instance/integrations-discord.vue
index c7508918f8..c33b24f17f 100644
--- a/src/client/pages/instance/integrations-discord.vue
+++ b/src/client/pages/instance/integrations-discord.vue
@@ -1,19 +1,19 @@
 <template>
 <FormBase>
 	<FormSuspense :p="init">
-		<FormSwitch v-model:value="enableDiscordIntegration">
+		<FormSwitch v-model="enableDiscordIntegration">
 			{{ $ts.enable }}
 		</FormSwitch>
 
 		<template v-if="enableDiscordIntegration">
 			<FormInfo>Callback URL: {{ `${url}/api/dc/cb` }}</FormInfo>
 		
-			<FormInput v-model:value="discordClientId">
+			<FormInput v-model="discordClientId">
 				<template #prefix><i class="fas fa-key"></i></template>
 				Client ID
 			</FormInput>
 
-			<FormInput v-model:value="discordClientSecret">
+			<FormInput v-model="discordClientSecret">
 				<template #prefix><i class="fas fa-key"></i></template>
 				Client Secret
 			</FormInput>
@@ -26,12 +26,12 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import FormSwitch from '@client/components/form/switch.vue';
-import FormInput from '@client/components/form/input.vue';
-import FormButton from '@client/components/form/button.vue';
-import FormBase from '@client/components/form/base.vue';
-import FormInfo from '@client/components/form/info.vue';
-import FormSuspense from '@client/components/form/suspense.vue';
+import FormSwitch from '@client/components/debobigego/switch.vue';
+import FormInput from '@client/components/debobigego/input.vue';
+import FormButton from '@client/components/debobigego/button.vue';
+import FormBase from '@client/components/debobigego/base.vue';
+import FormInfo from '@client/components/debobigego/info.vue';
+import FormSuspense from '@client/components/debobigego/suspense.vue';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';
 import { fetchInstance } from '@client/instance';
diff --git a/src/client/pages/instance/integrations-github.vue b/src/client/pages/instance/integrations-github.vue
index 16586b15b4..cdf85868ff 100644
--- a/src/client/pages/instance/integrations-github.vue
+++ b/src/client/pages/instance/integrations-github.vue
@@ -1,19 +1,19 @@
 <template>
 <FormBase>
 	<FormSuspense :p="init">
-		<FormSwitch v-model:value="enableGithubIntegration">
+		<FormSwitch v-model="enableGithubIntegration">
 			{{ $ts.enable }}
 		</FormSwitch>
 
 		<template v-if="enableGithubIntegration">
 			<FormInfo>Callback URL: {{ `${url}/api/gh/cb` }}</FormInfo>
 		
-			<FormInput v-model:value="githubClientId">
+			<FormInput v-model="githubClientId">
 				<template #prefix><i class="fas fa-key"></i></template>
 				Client ID
 			</FormInput>
 
-			<FormInput v-model:value="githubClientSecret">
+			<FormInput v-model="githubClientSecret">
 				<template #prefix><i class="fas fa-key"></i></template>
 				Client Secret
 			</FormInput>
@@ -26,12 +26,12 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import FormSwitch from '@client/components/form/switch.vue';
-import FormInput from '@client/components/form/input.vue';
-import FormButton from '@client/components/form/button.vue';
-import FormBase from '@client/components/form/base.vue';
-import FormInfo from '@client/components/form/info.vue';
-import FormSuspense from '@client/components/form/suspense.vue';
+import FormSwitch from '@client/components/debobigego/switch.vue';
+import FormInput from '@client/components/debobigego/input.vue';
+import FormButton from '@client/components/debobigego/button.vue';
+import FormBase from '@client/components/debobigego/base.vue';
+import FormInfo from '@client/components/debobigego/info.vue';
+import FormSuspense from '@client/components/debobigego/suspense.vue';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';
 import { fetchInstance } from '@client/instance';
diff --git a/src/client/pages/instance/integrations-twitter.vue b/src/client/pages/instance/integrations-twitter.vue
index b08b7f40a5..ed7d097d0a 100644
--- a/src/client/pages/instance/integrations-twitter.vue
+++ b/src/client/pages/instance/integrations-twitter.vue
@@ -1,19 +1,19 @@
 <template>
 <FormBase>
 	<FormSuspense :p="init">
-		<FormSwitch v-model:value="enableTwitterIntegration">
+		<FormSwitch v-model="enableTwitterIntegration">
 			{{ $ts.enable }}
 		</FormSwitch>
 
 		<template v-if="enableTwitterIntegration">
 			<FormInfo>Callback URL: {{ `${url}/api/tw/cb` }}</FormInfo>
 		
-			<FormInput v-model:value="twitterConsumerKey">
+			<FormInput v-model="twitterConsumerKey">
 				<template #prefix><i class="fas fa-key"></i></template>
 				Consumer Key
 			</FormInput>
 
-			<FormInput v-model:value="twitterConsumerSecret">
+			<FormInput v-model="twitterConsumerSecret">
 				<template #prefix><i class="fas fa-key"></i></template>
 				Consumer Secret
 			</FormInput>
@@ -26,12 +26,12 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import FormSwitch from '@client/components/form/switch.vue';
-import FormInput from '@client/components/form/input.vue';
-import FormButton from '@client/components/form/button.vue';
-import FormBase from '@client/components/form/base.vue';
-import FormInfo from '@client/components/form/info.vue';
-import FormSuspense from '@client/components/form/suspense.vue';
+import FormSwitch from '@client/components/debobigego/switch.vue';
+import FormInput from '@client/components/debobigego/input.vue';
+import FormButton from '@client/components/debobigego/button.vue';
+import FormBase from '@client/components/debobigego/base.vue';
+import FormInfo from '@client/components/debobigego/info.vue';
+import FormSuspense from '@client/components/debobigego/suspense.vue';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';
 import { fetchInstance } from '@client/instance';
diff --git a/src/client/pages/instance/integrations.vue b/src/client/pages/instance/integrations.vue
index 7debedc367..bfd9e2f349 100644
--- a/src/client/pages/instance/integrations.vue
+++ b/src/client/pages/instance/integrations.vue
@@ -19,14 +19,14 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import FormLink from '@client/components/form/link.vue';
-import FormInput from '@client/components/form/input.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 FormTextarea from '@client/components/form/textarea.vue';
-import FormInfo from '@client/components/form/info.vue';
-import FormSuspense from '@client/components/form/suspense.vue';
+import FormLink from '@client/components/debobigego/link.vue';
+import FormInput from '@client/components/debobigego/input.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 FormTextarea from '@client/components/debobigego/textarea.vue';
+import FormInfo from '@client/components/debobigego/info.vue';
+import FormSuspense from '@client/components/debobigego/suspense.vue';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';
 import { fetchInstance } from '@client/instance';
diff --git a/src/client/pages/instance/logs.vue b/src/client/pages/instance/logs.vue
index 4eee816f96..74aea0fc45 100644
--- a/src/client/pages/instance/logs.vue
+++ b/src/client/pages/instance/logs.vue
@@ -31,9 +31,9 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import MkButton from '@client/components/ui/button.vue';
-import MkInput from '@client/components/ui/input.vue';
-import MkSelect from '@client/components/ui/select.vue';
-import MkTextarea from '@client/components/ui/textarea.vue';
+import MkInput from '@client/components/form/input.vue';
+import MkSelect from '@client/components/form/select.vue';
+import MkTextarea from '@client/components/form/textarea.vue';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';
 
diff --git a/src/client/pages/instance/metrics.vue b/src/client/pages/instance/metrics.vue
index 283b5939f0..1606063aee 100644
--- a/src/client/pages/instance/metrics.vue
+++ b/src/client/pages/instance/metrics.vue
@@ -1,7 +1,7 @@
 <template>
-<div class="_formItem">
-	<div class="_formLabel"><i class="fas fa-microchip"></i> {{ $ts.cpuAndMemory }}</div>
-	<div class="_formPanel xhexznfu">
+<div class="_debobigegoItem">
+	<div class="_debobigegoLabel"><i class="fas fa-microchip"></i> {{ $ts.cpuAndMemory }}</div>
+	<div class="_debobigegoPanel xhexznfu">
 		<div>
 			<canvas :ref="cpumem"></canvas>
 		</div>
@@ -16,9 +16,9 @@
 		</div>
 	</div>
 </div>
-<div class="_formItem">
-	<div class="_formLabel"><i class="fas fa-hdd"></i> {{ $ts.disk }}</div>
-	<div class="_formPanel xhexznfu">
+<div class="_debobigegoItem">
+	<div class="_debobigegoLabel"><i class="fas fa-hdd"></i> {{ $ts.disk }}</div>
+	<div class="_debobigegoPanel xhexznfu">
 		<div>
 			<canvas :ref="disk"></canvas>
 		</div>
@@ -33,9 +33,9 @@
 		</div>
 	</div>
 </div>
-<div class="_formItem">
-	<div class="_formLabel"><i class="fas fa-exchange-alt"></i> {{ $ts.network }}</div>
-	<div class="_formPanel xhexznfu">
+<div class="_debobigegoItem">
+	<div class="_debobigegoLabel"><i class="fas fa-exchange-alt"></i> {{ $ts.network }}</div>
+	<div class="_debobigegoPanel xhexznfu">
 		<div>
 			<canvas :ref="net"></canvas>
 		</div>
@@ -54,8 +54,8 @@
 import { defineComponent, markRaw } from 'vue';
 import Chart from 'chart.js';
 import MkButton from '@client/components/ui/button.vue';
-import MkSelect from '@client/components/ui/select.vue';
-import MkInput from '@client/components/ui/input.vue';
+import MkSelect from '@client/components/form/select.vue';
+import MkInput from '@client/components/form/input.vue';
 import MkContainer from '@client/components/ui/container.vue';
 import MkFolder from '@client/components/ui/folder.vue';
 import MkwFederation from '../../widgets/federation.vue';
diff --git a/src/client/pages/instance/object-storage.vue b/src/client/pages/instance/object-storage.vue
index 814aeb6e48..ba6a249685 100644
--- a/src/client/pages/instance/object-storage.vue
+++ b/src/client/pages/instance/object-storage.vue
@@ -1,59 +1,59 @@
 <template>
 <FormBase>
 	<FormSuspense :p="init">
-		<FormSwitch v-model:value="useObjectStorage">{{ $ts.useObjectStorage }}</FormSwitch>
+		<FormSwitch v-model="useObjectStorage">{{ $ts.useObjectStorage }}</FormSwitch>
 
 		<template v-if="useObjectStorage">
-			<FormInput v-model:value="objectStorageBaseUrl">
+			<FormInput v-model="objectStorageBaseUrl">
 				<span>{{ $ts.objectStorageBaseUrl }}</span>
 				<template #desc>{{ $ts.objectStorageBaseUrlDesc }}</template>
 			</FormInput>
 
-			<FormInput v-model:value="objectStorageBucket">
+			<FormInput v-model="objectStorageBucket">
 				<span>{{ $ts.objectStorageBucket }}</span>
 				<template #desc>{{ $ts.objectStorageBucketDesc }}</template>
 			</FormInput>
 
-			<FormInput v-model:value="objectStoragePrefix">
+			<FormInput v-model="objectStoragePrefix">
 				<span>{{ $ts.objectStoragePrefix }}</span>
 				<template #desc>{{ $ts.objectStoragePrefixDesc }}</template>
 			</FormInput>
 
-			<FormInput v-model:value="objectStorageEndpoint">
+			<FormInput v-model="objectStorageEndpoint">
 				<span>{{ $ts.objectStorageEndpoint }}</span>
 				<template #desc>{{ $ts.objectStorageEndpointDesc }}</template>
 			</FormInput>
 
-			<FormInput v-model:value="objectStorageRegion">
+			<FormInput v-model="objectStorageRegion">
 				<span>{{ $ts.objectStorageRegion }}</span>
 				<template #desc>{{ $ts.objectStorageRegionDesc }}</template>
 			</FormInput>
 
-			<FormInput v-model:value="objectStorageAccessKey">
+			<FormInput v-model="objectStorageAccessKey">
 				<template #prefix><i class="fas fa-key"></i></template>
 				<span>Access key</span>
 			</FormInput>
 
-			<FormInput v-model:value="objectStorageSecretKey">
+			<FormInput v-model="objectStorageSecretKey">
 				<template #prefix><i class="fas fa-key"></i></template>
 				<span>Secret key</span>
 			</FormInput>
 
-			<FormSwitch v-model:value="objectStorageUseSSL">
+			<FormSwitch v-model="objectStorageUseSSL">
 				{{ $ts.objectStorageUseSSL }}
 				<template #desc>{{ $ts.objectStorageUseSSLDesc }}</template>
 			</FormSwitch>
 
-			<FormSwitch v-model:value="objectStorageUseProxy">
+			<FormSwitch v-model="objectStorageUseProxy">
 				{{ $ts.objectStorageUseProxy }}
 				<template #desc>{{ $ts.objectStorageUseProxyDesc }}</template>
 			</FormSwitch>
 
-			<FormSwitch v-model:value="objectStorageSetPublicRead">
+			<FormSwitch v-model="objectStorageSetPublicRead">
 				{{ $ts.objectStorageSetPublicRead }}
 			</FormSwitch>
 
-			<FormSwitch v-model:value="objectStorageS3ForcePathStyle">
+			<FormSwitch v-model="objectStorageS3ForcePathStyle">
 				s3ForcePathStyle
 			</FormSwitch>
 		</template>
@@ -65,12 +65,12 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import FormSwitch from '@client/components/form/switch.vue';
-import FormInput from '@client/components/form/input.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 FormSuspense from '@client/components/form/suspense.vue';
+import FormSwitch from '@client/components/debobigego/switch.vue';
+import FormInput from '@client/components/debobigego/input.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 FormSuspense from '@client/components/debobigego/suspense.vue';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';
 import { fetchInstance } from '@client/instance';
diff --git a/src/client/pages/instance/other-settings.vue b/src/client/pages/instance/other-settings.vue
index 4fa80b2b2c..b9f9ce30f7 100644
--- a/src/client/pages/instance/other-settings.vue
+++ b/src/client/pages/instance/other-settings.vue
@@ -2,17 +2,17 @@
 <FormBase>
 	<FormSuspense :p="init">
 		<FormGroup>
-			<FormInput v-model:value="summalyProxy">
+			<FormInput v-model="summalyProxy">
 				<template #prefix><i class="fas fa-link"></i></template>
 				Summaly Proxy URL
 			</FormInput>
 		</FormGroup>
 		<FormGroup>
-			<FormInput v-model:value="deeplAuthKey">
+			<FormInput v-model="deeplAuthKey">
 				<template #prefix><i class="fas fa-key"></i></template>
 				DeepL Auth Key
 			</FormInput>
-			<FormSwitch v-model:value="deeplIsPro">
+			<FormSwitch v-model="deeplIsPro">
 				Pro account
 			</FormSwitch>
 		</FormGroup>
@@ -23,12 +23,12 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import FormSwitch from '@client/components/form/switch.vue';
-import FormInput from '@client/components/form/input.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 FormSuspense from '@client/components/form/suspense.vue';
+import FormSwitch from '@client/components/debobigego/switch.vue';
+import FormInput from '@client/components/debobigego/input.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 FormSuspense from '@client/components/debobigego/suspense.vue';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';
 import { fetchInstance } from '@client/instance';
diff --git a/src/client/pages/instance/overview.vue b/src/client/pages/instance/overview.vue
index 0d7a5d1501..28dcfc03bf 100644
--- a/src/client/pages/instance/overview.vue
+++ b/src/client/pages/instance/overview.vue
@@ -17,8 +17,8 @@
 			</FormGroup>
 		</FormSuspense>
 	
-		<div class="_formItem">
-			<div class="_formPanel">
+		<div class="_debobigegoItem">
+			<div class="_debobigegoPanel">
 				<MkInstanceStats :chart-limit="300" :detailed="true"/>
 			</div>
 		</div>
@@ -47,18 +47,18 @@
 
 <script lang="ts">
 import { computed, defineComponent, markRaw } from 'vue';
-import FormKeyValueView from '@client/components/form/key-value-view.vue';
-import FormInput from '@client/components/form/input.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 FormTextarea from '@client/components/form/textarea.vue';
-import FormInfo from '@client/components/form/info.vue';
-import FormSuspense from '@client/components/form/suspense.vue';
+import FormKeyValueView from '@client/components/debobigego/key-value-view.vue';
+import FormInput from '@client/components/debobigego/input.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 FormTextarea from '@client/components/debobigego/textarea.vue';
+import FormInfo from '@client/components/debobigego/info.vue';
+import FormSuspense from '@client/components/debobigego/suspense.vue';
 import MkInstanceStats from '@client/components/instance-stats.vue';
 import MkButton from '@client/components/ui/button.vue';
-import MkSelect from '@client/components/ui/select.vue';
-import MkInput from '@client/components/ui/input.vue';
+import MkSelect from '@client/components/form/select.vue';
+import MkInput from '@client/components/form/input.vue';
 import MkContainer from '@client/components/ui/container.vue';
 import MkFolder from '@client/components/ui/folder.vue';
 import { version, url } from '@client/config';
diff --git a/src/client/pages/instance/proxy-account.vue b/src/client/pages/instance/proxy-account.vue
index 3e2df8dcb4..a80ecccb05 100644
--- a/src/client/pages/instance/proxy-account.vue
+++ b/src/client/pages/instance/proxy-account.vue
@@ -16,14 +16,14 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import FormKeyValueView from '@client/components/form/key-value-view.vue';
-import FormInput from '@client/components/form/input.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 FormTextarea from '@client/components/form/textarea.vue';
-import FormInfo from '@client/components/form/info.vue';
-import FormSuspense from '@client/components/form/suspense.vue';
+import FormKeyValueView from '@client/components/debobigego/key-value-view.vue';
+import FormInput from '@client/components/debobigego/input.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 FormTextarea from '@client/components/debobigego/textarea.vue';
+import FormInfo from '@client/components/debobigego/info.vue';
+import FormSuspense from '@client/components/debobigego/suspense.vue';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';
 import { fetchInstance } from '@client/instance';
diff --git a/src/client/pages/instance/queue.chart.vue b/src/client/pages/instance/queue.chart.vue
index 53d790598a..887fe9a574 100644
--- a/src/client/pages/instance/queue.chart.vue
+++ b/src/client/pages/instance/queue.chart.vue
@@ -1,7 +1,7 @@
 <template>
-<div class="_formItem">
-	<div class="_formLabel"><slot name="title"></slot></div>
-	<div class="_formPanel pumxzjhg">
+<div class="_debobigegoItem">
+	<div class="_debobigegoLabel"><slot name="title"></slot></div>
+	<div class="_debobigegoPanel pumxzjhg">
 		<div class="_table status">
 			<div class="_row">
 				<div class="_cell"><div class="_label">Process</div>{{ number(activeSincePrevTick) }}</div>
diff --git a/src/client/pages/instance/queue.vue b/src/client/pages/instance/queue.vue
index e8ec0bc97d..031bda2bed 100644
--- a/src/client/pages/instance/queue.vue
+++ b/src/client/pages/instance/queue.vue
@@ -14,8 +14,8 @@
 import { defineComponent, markRaw } from 'vue';
 import MkButton from '@client/components/ui/button.vue';
 import XQueue from './queue.chart.vue';
-import FormBase from '@client/components/form/base.vue';
-import FormButton from '@client/components/form/button.vue';
+import FormBase from '@client/components/debobigego/base.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/instance/relays.vue b/src/client/pages/instance/relays.vue
index a3e4e7d1da..cb9b27a625 100644
--- a/src/client/pages/instance/relays.vue
+++ b/src/client/pages/instance/relays.vue
@@ -2,8 +2,8 @@
 <FormBase class="relaycxt">
 	<FormButton @click="addRelay" primary><i class="fas fa-plus"></i> {{ $ts.addRelay }}</FormButton>
 
-	<div class="_formItem" v-for="relay in relays" :key="relay.inbox">
-		<div class="_formPanel" style="padding: 16px;">
+	<div class="_debobigegoItem" v-for="relay in relays" :key="relay.inbox">
+		<div class="_debobigegoPanel" style="padding: 16px;">
 			<div>{{ relay.inbox }}</div>
 			<div>{{ $t(`_relayStatus.${relay.status}`) }}</div>
 			<MkButton class="button" inline danger @click="remove(relay.inbox)"><i class="fas fa-trash-alt"></i> {{ $ts.remove }}</MkButton>
@@ -15,9 +15,9 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import MkButton from '@client/components/ui/button.vue';
-import MkInput from '@client/components/ui/input.vue';
-import FormBase from '@client/components/form/base.vue';
-import FormButton from '@client/components/form/button.vue';
+import MkInput from '@client/components/form/input.vue';
+import FormBase from '@client/components/debobigego/base.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/instance/security.vue b/src/client/pages/instance/security.vue
index e3397a113b..53f923643a 100644
--- a/src/client/pages/instance/security.vue
+++ b/src/client/pages/instance/security.vue
@@ -8,7 +8,7 @@
 			<template #suffix v-else>{{ $ts.none }} ({{ $ts.notRecommended }})</template>
 		</FormLink>
 
-		<FormSwitch v-model:value="enableRegistration">{{ $ts.enableRegistration }}</FormSwitch>
+		<FormSwitch v-model="enableRegistration">{{ $ts.enableRegistration }}</FormSwitch>
 
 		<FormButton @click="save" primary><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
 	</FormSuspense>
@@ -17,13 +17,13 @@
 
 <script lang="ts">
 import { defineAsyncComponent, defineComponent } from 'vue';
-import FormLink from '@client/components/form/link.vue';
-import FormSwitch from '@client/components/form/switch.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 FormInfo from '@client/components/form/info.vue';
-import FormSuspense from '@client/components/form/suspense.vue';
+import FormLink from '@client/components/debobigego/link.vue';
+import FormSwitch from '@client/components/debobigego/switch.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 FormInfo from '@client/components/debobigego/info.vue';
+import FormSuspense from '@client/components/debobigego/suspense.vue';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';
 import { fetchInstance } from '@client/instance';
diff --git a/src/client/pages/instance/service-worker.vue b/src/client/pages/instance/service-worker.vue
index a52932bb75..9fa10def07 100644
--- a/src/client/pages/instance/service-worker.vue
+++ b/src/client/pages/instance/service-worker.vue
@@ -1,18 +1,18 @@
 <template>
 <FormBase>
 	<FormSuspense :p="init">
-		<FormSwitch v-model:value="enableServiceWorker">
+		<FormSwitch v-model="enableServiceWorker">
 			{{ $ts.enableServiceworker }}
 			<template #desc>{{ $ts.serviceworkerInfo }}</template>
 		</FormSwitch>
 
 		<template v-if="enableServiceWorker">
-			<FormInput v-model:value="swPublicKey">
+			<FormInput v-model="swPublicKey">
 				<template #prefix><i class="fas fa-key"></i></template>
 				Public key
 			</FormInput>
 
-			<FormInput v-model:value="swPrivateKey">
+			<FormInput v-model="swPrivateKey">
 				<template #prefix><i class="fas fa-key"></i></template>
 				Private key
 			</FormInput>
@@ -25,12 +25,12 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import FormSwitch from '@client/components/form/switch.vue';
-import FormInput from '@client/components/form/input.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 FormSuspense from '@client/components/form/suspense.vue';
+import FormSwitch from '@client/components/debobigego/switch.vue';
+import FormInput from '@client/components/debobigego/input.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 FormSuspense from '@client/components/debobigego/suspense.vue';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';
 import { fetchInstance } from '@client/instance';
diff --git a/src/client/pages/instance/settings.vue b/src/client/pages/instance/settings.vue
index b68d784897..2ce9361d08 100644
--- a/src/client/pages/instance/settings.vue
+++ b/src/client/pages/instance/settings.vue
@@ -1,50 +1,50 @@
 <template>
 <FormBase>
 	<FormSuspense :p="init">
-		<FormInput v-model:value="name">
+		<FormInput v-model="name">
 			<span>{{ $ts.instanceName }}</span>
 		</FormInput>
 
-		<FormTextarea v-model:value="description">
+		<FormTextarea v-model="description">
 			<span>{{ $ts.instanceDescription }}</span>
 		</FormTextarea>
 
-		<FormInput v-model:value="iconUrl">
+		<FormInput v-model="iconUrl">
 			<template #prefix><i class="fas fa-link"></i></template>
 			<span>{{ $ts.iconUrl }}</span>
 		</FormInput>
 
-		<FormInput v-model:value="bannerUrl">
+		<FormInput v-model="bannerUrl">
 			<template #prefix><i class="fas fa-link"></i></template>
 			<span>{{ $ts.bannerUrl }}</span>
 		</FormInput>
 
-		<FormInput v-model:value="backgroundImageUrl">
+		<FormInput v-model="backgroundImageUrl">
 			<template #prefix><i class="fas fa-link"></i></template>
 			<span>{{ $ts.backgroundImageUrl }}</span>
 		</FormInput>
 
-		<FormInput v-model:value="tosUrl">
+		<FormInput v-model="tosUrl">
 			<template #prefix><i class="fas fa-link"></i></template>
 			<span>{{ $ts.tosUrl }}</span>
 		</FormInput>
 
-		<FormInput v-model:value="maintainerName">
+		<FormInput v-model="maintainerName">
 			<span>{{ $ts.maintainerName }}</span>
 		</FormInput>
 
-		<FormInput v-model:value="maintainerEmail" type="email">
+		<FormInput v-model="maintainerEmail" type="email">
 			<template #prefix><i class="fas fa-envelope"></i></template>
 			<span>{{ $ts.maintainerEmail }}</span>
 		</FormInput>
 
-		<FormInput v-model:value="maxNoteTextLength" type="number">
+		<FormInput v-model="maxNoteTextLength" type="number">
 			<template #prefix><i class="fas fa-pencil-alt"></i></template>
 			<span>{{ $ts.maxNoteTextLength }}</span>
 		</FormInput>
 
-		<FormSwitch v-model:value="enableLocalTimeline">{{ $ts.enableLocalTimeline }}</FormSwitch>
-		<FormSwitch v-model:value="enableGlobalTimeline">{{ $ts.enableGlobalTimeline }}</FormSwitch>
+		<FormSwitch v-model="enableLocalTimeline">{{ $ts.enableLocalTimeline }}</FormSwitch>
+		<FormSwitch v-model="enableGlobalTimeline">{{ $ts.enableGlobalTimeline }}</FormSwitch>
 		<FormInfo>{{ $ts.disablingTimelinesInfo }}</FormInfo>
 
 		<FormButton @click="save" primary><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
@@ -54,14 +54,14 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import FormSwitch from '@client/components/form/switch.vue';
-import FormInput from '@client/components/form/input.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 FormTextarea from '@client/components/form/textarea.vue';
-import FormInfo from '@client/components/form/info.vue';
-import FormSuspense from '@client/components/form/suspense.vue';
+import FormSwitch from '@client/components/debobigego/switch.vue';
+import FormInput from '@client/components/debobigego/input.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 FormTextarea from '@client/components/debobigego/textarea.vue';
+import FormInfo from '@client/components/debobigego/info.vue';
+import FormSuspense from '@client/components/debobigego/suspense.vue';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';
 import { fetchInstance } from '@client/instance';
diff --git a/src/client/pages/instance/users.vue b/src/client/pages/instance/users.vue
index 8db62683ba..7671387f01 100644
--- a/src/client/pages/instance/users.vue
+++ b/src/client/pages/instance/users.vue
@@ -67,8 +67,8 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import MkButton from '@client/components/ui/button.vue';
-import MkInput from '@client/components/ui/input.vue';
-import MkSelect from '@client/components/ui/select.vue';
+import MkInput from '@client/components/form/input.vue';
+import MkSelect from '@client/components/form/select.vue';
 import MkPagination from '@client/components/ui/pagination.vue';
 import { acct } from '@client/filters/user';
 import * as os from '@client/os';