diff --git a/packages/client/src/account.ts b/packages/client/src/account.ts
index 83860bfed..8afb0d394 100644
--- a/packages/client/src/account.ts
+++ b/packages/client/src/account.ts
@@ -157,7 +157,7 @@ export async function openAccountMenu(
 ) {
 	function showSigninDialog() {
 		popup(
-			defineAsyncComponent(() => import("@/components/SigninDialog.vue")),
+			defineAsyncComponent(() => import("@/components/MkSigninDialog.vue")),
 			{},
 			{
 				done: (res) => {
@@ -171,7 +171,7 @@ export async function openAccountMenu(
 
 	function createAccount() {
 		popup(
-			defineAsyncComponent(() => import("@/components/SignupDialog.vue")),
+			defineAsyncComponent(() => import("@/components/MkSignupDialog.vue")),
 			{},
 			{
 				done: (res) => {
diff --git a/packages/client/src/components/AbuseReport.vue b/packages/client/src/components/MkAbuseReport.vue
similarity index 78%
rename from packages/client/src/components/AbuseReport.vue
rename to packages/client/src/components/MkAbuseReport.vue
index 267b84b26..f92d10ba7 100644
--- a/packages/client/src/components/AbuseReport.vue
+++ b/packages/client/src/components/MkAbuseReport.vue
@@ -1,35 +1,35 @@
 <template>
 	<div class="bcekxzvu _gap _panel">
 		<div class="target">
-			<A
+			<MkA
 				v-user-preview="report.targetUserId"
 				class="info"
 				:to="`/user-info/${report.targetUserId}`"
 			>
-				<Avatar
+				<MkAvatar
 					class="avatar"
 					:user="report.targetUser"
 					:show-indicator="true"
 					:disable-link="true"
 				/>
 				<div class="names">
-					<UserName class="name" :user="report.targetUser" />
-					<Acct
+					<MkUserName class="name" :user="report.targetUser" />
+					<MkAcct
 						class="acct"
 						:user="report.targetUser"
 						style="display: block"
 					/>
 				</div>
-			</A>
-			<KeyValue class="_formBlock">
+			</MkA>
+			<MkKeyValue class="_formBlock">
 				<template #key>{{ i18n.ts.registeredDate }}</template>
 				<template #value
 					>{{
 						new Date(report.targetUser.createdAt).toLocaleString()
 					}}
-					(<Time :time="report.targetUser.createdAt" />)</template
+					(<MkTime :time="report.targetUser.createdAt" />)</template
 				>
-			</KeyValue>
+			</MkKeyValue>
 		</div>
 		<div class="detail">
 			<div>
@@ -37,16 +37,15 @@
 			</div>
 			<hr />
 			<div>
-				{{ i18n.ts.reporter }}:
-				<Acct :user="report.reporter" />
+				{{ i18n.ts.reporter }}: <MkAcct :user="report.reporter" />
 			</div>
 			<div v-if="report.assignee">
 				{{ i18n.ts.moderator }}:
-				<Acct :user="report.assignee" />
+				<MkAcct :user="report.assignee" />
 			</div>
-			<div><Time :time="report.createdAt" /></div>
+			<div><MkTime :time="report.createdAt" /></div>
 			<div class="action">
-				<Switch
+				<MkSwitch
 					v-model="forward"
 					:disabled="
 						report.targetUser.host == null || report.resolved
@@ -56,19 +55,19 @@
 					<template #caption>{{
 						i18n.ts.forwardReportIsAnonymous
 					}}</template>
-				</Switch>
-				<Button v-if="!report.resolved" primary @click="resolve">{{
+				</MkSwitch>
+				<MkButton v-if="!report.resolved" primary @click="resolve">{{
 					i18n.ts.abuseMarkAsResolved
-				}}</Button>
+				}}</MkButton>
 			</div>
 		</div>
 	</div>
 </template>
 
 <script lang="ts" setup>
-import Button from "@/components/Button.vue";
-import Switch from "@/components/form/Switch.vue";
-import KeyValue from "@/components/KeyValue.vue";
+import MkButton from "@/components/MkButton.vue";
+import MkSwitch from "@/components/form/switch.vue";
+import MkKeyValue from "@/components/MkKeyValue.vue";
 import { acct, userPage } from "@/filters/user";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
diff --git a/packages/client/src/components/AbuseReportWindow.vue b/packages/client/src/components/MkAbuseReportWindow.vue
similarity index 83%
rename from packages/client/src/components/AbuseReportWindow.vue
rename to packages/client/src/components/MkAbuseReportWindow.vue
index cc80ec5dc..6e5171d57 100644
--- a/packages/client/src/components/AbuseReportWindow.vue
+++ b/packages/client/src/components/MkAbuseReportWindow.vue
@@ -13,28 +13,26 @@
 			></i>
 			<I18n :src="i18n.ts.reportAbuseOf" tag="span">
 				<template #name>
-					<b>
-						<Acct :user="user" />
-					</b>
+					<b><MkAcct :user="user" /></b>
 				</template>
 			</I18n>
 		</template>
 		<div class="dpvffvvy _monolithic_">
 			<div class="_section">
-				<Textarea v-model="comment">
+				<MkTextarea v-model="comment">
 					<template #label>{{ i18n.ts.details }}</template>
 					<template #caption>{{
 						i18n.ts.fillAbuseReportDescription
 					}}</template>
-				</Textarea>
+				</MkTextarea>
 			</div>
 			<div class="_section">
-				<Button
+				<MkButton
 					primary
 					full
 					:disabled="comment.length === 0"
 					@click="send"
-					>{{ i18n.ts.send }}</Button
+					>{{ i18n.ts.send }}</MkButton
 				>
 			</div>
 		</div>
@@ -44,9 +42,9 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import type * as Misskey from "iceshrimp-js";
-import XWindow from "@/components/Window.vue";
-import Textarea from "@/components/form/Textarea.vue";
-import Button from "@/components/Button.vue";
+import XWindow from "@/components/MkWindow.vue";
+import MkTextarea from "@/components/form/textarea.vue";
+import MkButton from "@/components/MkButton.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 
diff --git a/packages/client/src/components/AnalogClock.vue b/packages/client/src/components/MkAnalogClock.vue
similarity index 100%
rename from packages/client/src/components/AnalogClock.vue
rename to packages/client/src/components/MkAnalogClock.vue
diff --git a/packages/client/src/components/Announcement.vue b/packages/client/src/components/MkAnnouncement.vue
similarity index 69%
rename from packages/client/src/components/Announcement.vue
rename to packages/client/src/components/MkAnnouncement.vue
index 7b334da0d..bd1091b7f 100644
--- a/packages/client/src/components/Announcement.vue
+++ b/packages/client/src/components/MkAnnouncement.vue
@@ -1,15 +1,15 @@
 <template>
-	<Modal ref="modal" :z-priority="'middle'" @closed="$emit('closed')">
+	<MkModal ref="modal" :z-priority="'middle'" @closed="$emit('closed')">
 		<div :class="$style.root">
 			<div :class="$style.title">
-				<Sparkle v-if="isGoodNews">{{ title }}</Sparkle>
+				<MkSparkle v-if="isGoodNews">{{ title }}</MkSparkle>
 				<p v-else>{{ title }}</p>
 			</div>
 			<div :class="$style.time">
-				<Time :time="announcement.createdAt" />
+				<MkTime :time="announcement.createdAt" />
 				<div v-if="announcement.updatedAt">
 					{{ i18n.ts.updatedAt }}:
-					<Time :time="announcement.createdAt" />
+					<MkTime :time="announcement.createdAt" />
 				</div>
 			</div>
 			<Mfm :text="text" />
@@ -19,18 +19,18 @@
 				:src="imageUrl"
 				alt="attached image"
 			/>
-			<Button :class="$style.gotIt" primary full @click="gotIt()">{{
+			<MkButton :class="$style.gotIt" primary full @click="gotIt()">{{
 				i18n.ts.gotIt
-			}}</Button>
+			}}</MkButton>
 		</div>
-	</Modal>
+	</MkModal>
 </template>
 
 <script lang="ts" setup>
 import { shallowRef } from "vue";
-import Modal from "@/components/Modal.vue";
-import Sparkle from "@/components/Sparkle.vue";
-import Button from "@/components/Button.vue";
+import MkModal from "@/components/MkModal.vue";
+import MkSparkle from "@/components/MkSparkle.vue";
+import MkButton from "@/components/MkButton.vue";
 import { i18n } from "@/i18n";
 import * as os from "@/os";
 
@@ -40,7 +40,7 @@ const props = defineProps<{
 
 const { id, text, title, imageUrl, isGoodNews } = props.announcement;
 
-const modal = shallowRef<InstanceType<typeof Modal>>();
+const modal = shallowRef<InstanceType<typeof MkModal>>();
 
 const gotIt = () => {
 	modal.value.close();
diff --git a/packages/client/src/components/Autocomplete.vue b/packages/client/src/components/MkAutocomplete.vue
similarity index 98%
rename from packages/client/src/components/Autocomplete.vue
rename to packages/client/src/components/MkAutocomplete.vue
index 3f169f03b..dd7cd142d 100644
--- a/packages/client/src/components/Autocomplete.vue
+++ b/packages/client/src/components/MkAutocomplete.vue
@@ -15,7 +15,7 @@
 			>
 				<img class="avatar" :src="user.avatarUrl" />
 				<span class="name">
-					<UserName :key="user.id" :user="user" />
+					<MkUserName :key="user.id" :user="user" />
 				</span>
 				<span class="username">@{{ acct(user) }}</span>
 			</li>
@@ -255,10 +255,10 @@ function exec() {
 			users.value = JSON.parse(cache);
 			fetching.value = false;
 		} else {
-			const acct = Acct.parse(props.q);
+      const acct = Acct.parse(props.q);
 			os.api("users/search-by-username-and-host", {
 				username: acct.username,
-				host: acct.host ?? undefined,
+        host: acct.host ?? undefined,
 				limit: 10,
 				detail: false,
 			}).then((searchedUsers) => {
diff --git a/packages/client/src/components/Avatars.vue b/packages/client/src/components/MkAvatars.vue
similarity index 91%
rename from packages/client/src/components/Avatars.vue
rename to packages/client/src/components/MkAvatars.vue
index 3eeb280b7..d92eee22c 100644
--- a/packages/client/src/components/Avatars.vue
+++ b/packages/client/src/components/MkAvatars.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="defgtij">
 		<div v-for="user in users" :key="user.id" class="avatar-holder">
-			<Avatar :user="user" :show-indicator="true" class="avatar" />
+			<MkAvatar :user="user" :show-indicator="true" class="avatar" />
 		</div>
 	</div>
 </template>
diff --git a/packages/client/src/components/Button.vue b/packages/client/src/components/MkButton.vue
similarity index 99%
rename from packages/client/src/components/Button.vue
rename to packages/client/src/components/MkButton.vue
index 4c5149599..1494fcd54 100644
--- a/packages/client/src/components/Button.vue
+++ b/packages/client/src/components/MkButton.vue
@@ -12,7 +12,7 @@
 			<slot></slot>
 		</div>
 	</button>
-	<A
+	<MkA
 		v-else
 		class="bghgjjyj _button"
 		:class="{ inline, primary, gradate, danger, rounded, full, mini }"
@@ -23,7 +23,7 @@
 		<div class="content">
 			<slot></slot>
 		</div>
-	</A>
+	</MkA>
 </template>
 
 <script lang="ts" setup>
diff --git a/packages/client/src/components/Captcha.vue b/packages/client/src/components/MkCaptcha.vue
similarity index 97%
rename from packages/client/src/components/Captcha.vue
rename to packages/client/src/components/MkCaptcha.vue
index be3459e6c..146c512fb 100644
--- a/packages/client/src/components/Captcha.vue
+++ b/packages/client/src/components/MkCaptcha.vue
@@ -1,9 +1,6 @@
 <template>
 	<div>
-		<span v-if="!available"
-			>{{ i18n.ts.waiting }}
-			<Ellipsis />
-		</span>
+		<span v-if="!available">{{ i18n.ts.waiting }}<MkEllipsis /></span>
 		<div ref="captchaEl"></div>
 	</div>
 </template>
diff --git a/packages/client/src/components/ChannelFollowButton.vue b/packages/client/src/components/MkChannelFollowButton.vue
similarity index 100%
rename from packages/client/src/components/ChannelFollowButton.vue
rename to packages/client/src/components/MkChannelFollowButton.vue
diff --git a/packages/client/src/components/ChannelList.vue b/packages/client/src/components/MkChannelList.vue
similarity index 68%
rename from packages/client/src/components/ChannelList.vue
rename to packages/client/src/components/MkChannelList.vue
index cc4015616..ff61ec7c6 100644
--- a/packages/client/src/components/ChannelList.vue
+++ b/packages/client/src/components/MkChannelList.vue
@@ -1,5 +1,5 @@
 <template>
-	<Pagination :pagination="pagination">
+	<MkPagination :pagination="pagination">
 		<template #empty>
 			<div class="_fullinfo">
 				<img
@@ -12,22 +12,22 @@
 		</template>
 
 		<template #default="{ items }">
-			<ChannelPreview
+			<MkChannelPreview
 				v-for="item in items"
 				:key="item.id"
 				class="_margin"
 				:channel="extractor(item)"
 			/>
 		</template>
-	</Pagination>
+	</MkPagination>
 </template>
 
 <script lang="ts" setup>
-import ChannelPreview from "@/components/ChannelPreview.vue";
-import type { Paging } from "@/components/Pagination.vue";
-import Pagination from "@/components/Pagination.vue";
+import MkChannelPreview from "@/components/MkChannelPreview.vue";
+import type { Paging } from "@/components/MkPagination.vue";
+import MkPagination from "@/components/MkPagination.vue";
 import { i18n } from "@/i18n";
-import { instance } from "@/instance";
+import {instance} from "@/instance";
 
 const props = withDefaults(
 	defineProps<{
diff --git a/packages/client/src/components/ChannelPreview.vue b/packages/client/src/components/MkChannelPreview.vue
similarity index 95%
rename from packages/client/src/components/ChannelPreview.vue
rename to packages/client/src/components/MkChannelPreview.vue
index bb17783a9..55b411b50 100644
--- a/packages/client/src/components/ChannelPreview.vue
+++ b/packages/client/src/components/MkChannelPreview.vue
@@ -1,5 +1,5 @@
 <template>
-	<A :to="`/channels/${channel.id}`" class="eftoefju _panel" tabindex="-1">
+	<MkA :to="`/channels/${channel.id}`" class="eftoefju _panel" tabindex="-1">
 		<div class="banner" :style="bannerStyle">
 			<div class="fade"></div>
 			<div class="name">
@@ -43,10 +43,10 @@
 		</article>
 		<footer>
 			<span v-if="channel.lastNotedAt">
-				{{ i18n.ts.updatedAt }}: <Time :time="channel.lastNotedAt" />
+				{{ i18n.ts.updatedAt }}: <MkTime :time="channel.lastNotedAt" />
 			</span>
 		</footer>
-	</A>
+	</MkA>
 </template>
 
 <script lang="ts" setup>
diff --git a/packages/client/src/components/Chart.vue b/packages/client/src/components/MkChart.vue
similarity index 99%
rename from packages/client/src/components/Chart.vue
rename to packages/client/src/components/MkChart.vue
index fe1adfcae..fdb0245f5 100644
--- a/packages/client/src/components/Chart.vue
+++ b/packages/client/src/components/MkChart.vue
@@ -2,7 +2,7 @@
 	<div class="cbbedffa">
 		<canvas ref="chartEl"></canvas>
 		<div v-if="fetching" class="fetching">
-			<Loading />
+			<MkLoading />
 		</div>
 	</div>
 </template>
diff --git a/packages/client/src/components/ChartTooltip.vue b/packages/client/src/components/MkChartTooltip.vue
similarity index 94%
rename from packages/client/src/components/ChartTooltip.vue
rename to packages/client/src/components/MkChartTooltip.vue
index 32b6b23a9..659dc6d39 100644
--- a/packages/client/src/components/ChartTooltip.vue
+++ b/packages/client/src/components/MkChartTooltip.vue
@@ -1,5 +1,5 @@
 <template>
-	<Tooltip
+	<MkTooltip
 		ref="tooltip"
 		:showing="showing"
 		:x="x"
@@ -24,12 +24,12 @@
 				</div>
 			</template>
 		</div>
-	</Tooltip>
+	</MkTooltip>
 </template>
 
 <script lang="ts" setup>
 import {} from "vue";
-import Tooltip from "./Tooltip.vue";
+import MkTooltip from "./MkTooltip.vue";
 
 const props = defineProps<{
 	showing: boolean;
diff --git a/packages/client/src/components/ChatPreview.vue b/packages/client/src/components/MkChatPreview.vue
similarity index 91%
rename from packages/client/src/components/ChatPreview.vue
rename to packages/client/src/components/MkChatPreview.vue
index 327d51d46..5d5849c93 100644
--- a/packages/client/src/components/ChatPreview.vue
+++ b/packages/client/src/components/MkChatPreview.vue
@@ -1,5 +1,5 @@
 <template>
-	<A
+	<MkA
 		class="rivslvers"
 		:class="{
 			isMe: isMe(message),
@@ -16,7 +16,7 @@
 		"
 	>
 		<div class="message _block">
-			<Avatar
+			<MkAvatar
 				class="avatar"
 				:user="
 					message.groupId
@@ -30,20 +30,21 @@
 			/>
 			<header v-if="message.groupId">
 				<span class="name">{{ message.group.name }}</span>
-				<Time :time="message.createdAt" class="time" />
+				<MkTime :time="message.createdAt" class="time" />
 			</header>
 			<header v-else>
-				<span class="name">
-					<UserName
-						:user="isMe(message) ? message.recipient : message.user"
-					/>
-				</span>
+				<span class="name"
+					><MkUserName
+						:user="
+							isMe(message) ? message.recipient : message.user
+						"
+				/></span>
 				<span class="username"
 					>@{{
 						acct(isMe(message) ? message.recipient : message.user)
 					}}</span
 				>
-				<Time :time="message.createdAt" class="time" />
+				<MkTime :time="message.createdAt" class="time" />
 			</header>
 			<div class="body">
 				<p class="text">
@@ -58,7 +59,7 @@
 				</p>
 			</div>
 		</div>
-	</A>
+	</MkA>
 </template>
 
 <script lang="ts" setup>
diff --git a/packages/client/src/components/CheatSheetDialog.vue b/packages/client/src/components/MkCheatSheetDialog.vue
similarity index 85%
rename from packages/client/src/components/CheatSheetDialog.vue
rename to packages/client/src/components/MkCheatSheetDialog.vue
index c7f54b031..3b723cde5 100644
--- a/packages/client/src/components/CheatSheetDialog.vue
+++ b/packages/client/src/components/MkCheatSheetDialog.vue
@@ -11,8 +11,8 @@
 </template>
 
 <script lang="ts" setup>
-import XModalWindow from "@/components/ModalWindow.vue";
-import XCheatSheet from "@/pages/MfmCheatsheet.vue";
+import XModalWindow from "@/components/MkModalWindow.vue";
+import XCheatSheet from "@/pages/mfm-cheat-sheet.vue";
 import { i18n } from "@/i18n";
 
 const emit = defineEmits<{
@@ -32,7 +32,6 @@ function close(res) {
 .fade-leave-active {
 	transition: opacity 0.2s ease-in-out;
 }
-
 .fade-enter-from,
 .fade-leave-to {
 	opacity: 0;
diff --git a/packages/client/src/components/CodeCore.vue b/packages/client/src/components/MkCode.core.vue
similarity index 100%
rename from packages/client/src/components/CodeCore.vue
rename to packages/client/src/components/MkCode.core.vue
diff --git a/packages/client/src/components/Code.vue b/packages/client/src/components/MkCode.vue
similarity index 72%
rename from packages/client/src/components/Code.vue
rename to packages/client/src/components/MkCode.vue
index 07dfa2427..2e3fb3f0e 100644
--- a/packages/client/src/components/Code.vue
+++ b/packages/client/src/components/MkCode.vue
@@ -11,5 +11,7 @@ defineProps<{
 	inline?: boolean;
 }>();
 
-const XCode = defineAsyncComponent(() => import("@/components/CodeCore.vue"));
+const XCode = defineAsyncComponent(
+	() => import("@/components/MkCode.core.vue"),
+);
 </script>
diff --git a/packages/client/src/components/Container.vue b/packages/client/src/components/MkContainer.vue
similarity index 98%
rename from packages/client/src/components/Container.vue
rename to packages/client/src/components/MkContainer.vue
index 8fc98b526..be477a8f3 100644
--- a/packages/client/src/components/Container.vue
+++ b/packages/client/src/components/MkContainer.vue
@@ -259,11 +259,7 @@ export default defineComponent({
 				left: 0;
 				width: 100%;
 				height: 64px;
-				background: linear-gradient(
-					0deg,
-					var(--panel),
-					var(--panelFade)
-				);
+				background: linear-gradient(0deg, var(--panel), var(--panelFade));
 
 				> span {
 					display: inline-block;
diff --git a/packages/client/src/components/ContextMenu.vue b/packages/client/src/components/MkContextMenu.vue
similarity index 92%
rename from packages/client/src/components/ContextMenu.vue
rename to packages/client/src/components/MkContextMenu.vue
index 9b509a386..33506b96f 100644
--- a/packages/client/src/components/ContextMenu.vue
+++ b/packages/client/src/components/MkContextMenu.vue
@@ -6,15 +6,15 @@
 			:style="{ zIndex }"
 			@contextmenu.prevent.stop="() => {}"
 		>
-			<Menu :items="items" :align="'left'" @close="$emit('closed')" />
+			<MkMenu :items="items" :align="'left'" @close="$emit('closed')" />
 		</div>
 	</transition>
 </template>
 
 <script lang="ts" setup>
 import { onBeforeUnmount, onMounted } from "vue";
-import Menu from "./Menu.vue";
-import type { MenuItem } from "./types/Menu.vue";
+import MkMenu from "./MkMenu.vue";
+import type { MenuItem } from "./types/menu.vue";
 import contains from "@/scripts/contains";
 import * as os from "@/os";
 
diff --git a/packages/client/src/components/CropperDialog.vue b/packages/client/src/components/MkCropperDialog.vue
similarity index 98%
rename from packages/client/src/components/CropperDialog.vue
rename to packages/client/src/components/MkCropperDialog.vue
index ac0aa6000..835784594 100644
--- a/packages/client/src/components/CropperDialog.vue
+++ b/packages/client/src/components/MkCropperDialog.vue
@@ -19,7 +19,7 @@
 			>
 				<Transition name="fade">
 					<div v-if="loading" class="loading">
-						<Loading />
+						<MkLoading />
 					</div>
 				</Transition>
 				<div class="container">
@@ -40,7 +40,7 @@ import { nextTick, onMounted } from "vue";
 import type * as misskey from "iceshrimp-js";
 import Cropper from "cropperjs";
 import tinycolor from "tinycolor2";
-import XModalWindow from "@/components/ModalWindow.vue";
+import XModalWindow from "@/components/MkModalWindow.vue";
 import * as os from "@/os";
 import { $i } from "@/account";
 import { defaultStore } from "@/store";
@@ -144,7 +144,6 @@ onMounted(() => {
 .fade-leave-active {
 	transition: opacity 0.5s ease 0.5s;
 }
-
 .fade-enter-from,
 .fade-leave-to {
 	opacity: 0;
diff --git a/packages/client/src/components/CwButton.vue b/packages/client/src/components/MkCwButton.vue
similarity index 94%
rename from packages/client/src/components/CwButton.vue
rename to packages/client/src/components/MkCwButton.vue
index a9f0d64e3..18227897d 100644
--- a/packages/client/src/components/CwButton.vue
+++ b/packages/client/src/components/MkCwButton.vue
@@ -2,7 +2,7 @@
 	<button
 		ref="el"
 		class="_button"
-		:class="[cwButton, { showLess: modelValue, fade: !modelValue }]"
+		:class="[cwButton, { showLess: modelValue, fade: !modelValue, }]"
 		@click.stop="toggle"
 	>
 		<span class="cw-toggle-text"
@@ -18,7 +18,7 @@ import { length } from "stringz";
 import type * as misskey from "iceshrimp-js";
 import { concat } from "@/scripts/array";
 import { i18n } from "@/i18n";
-import { defaultStore } from "@/store";
+import {defaultStore} from "@/store";
 
 const props = defineProps<{
 	modelValue: boolean;
@@ -44,7 +44,7 @@ const label = computed(() => {
 	] as string[][]).join(", ");
 });
 
-const cwButton = computed(() => `_button_${defaultStore.state.cwStyle}`);
+const cwButton = computed (() => `_button_${defaultStore.state.cwStyle}`);
 
 const toggle = () => {
 	emit("update:modelValue", !props.modelValue);
@@ -203,11 +203,11 @@ defineExpose({
 			font-weight: normal;
 
 			&:before {
-				content: "(";
+				content: '(';
 			}
 
 			&:after {
-				content: ")";
+				content: ')';
 			}
 		}
 	}
diff --git a/packages/client/src/components/DateSeparatedList.vue b/packages/client/src/components/MkDateSeparatedList.vue
similarity index 100%
rename from packages/client/src/components/DateSeparatedList.vue
rename to packages/client/src/components/MkDateSeparatedList.vue
diff --git a/packages/client/src/components/Dialog.vue b/packages/client/src/components/MkDialog.vue
similarity index 93%
rename from packages/client/src/components/Dialog.vue
rename to packages/client/src/components/MkDialog.vue
index 83fff7c2c..6d1f12833 100644
--- a/packages/client/src/components/Dialog.vue
+++ b/packages/client/src/components/MkDialog.vue
@@ -1,5 +1,5 @@
 <template>
-	<Modal
+	<MkModal
 		ref="modal"
 		:prefer-type="'dialog'"
 		@click="done(true)"
@@ -38,7 +38,7 @@
 					:class="$style.iconInner"
 					class="ph-circle-question ph-bold ph-lg"
 				></i>
-				<Loading
+				<MkLoading
 					v-else-if="type === 'waiting'"
 					:class="$style.iconInner"
 					:em="true"
@@ -56,7 +56,7 @@
 			<div v-if="text" :class="$style.text">
 				<Mfm :text="text" />
 			</div>
-			<Input
+			<MkInput
 				v-if="input && input.type !== 'paragraph'"
 				ref="inputEl"
 				v-model="inputValue"
@@ -107,16 +107,16 @@
 						<i class="ph-funnel ph-bold"></i>
 					</button>
 				</template>
-			</Input>
-			<Textarea
+			</MkInput>
+			<MkTextarea
 				v-if="input && input.type === 'paragraph'"
 				v-model="inputValue"
 				autofocus
 				:type="paragraph"
 				:placeholder="input.placeholder || undefined"
 			>
-			</Textarea>
-			<Select v-if="select" v-model="selectedValue" autofocus>
+			</MkTextarea>
+			<MkSelect v-if="select" v-model="selectedValue" autofocus>
 				<template v-if="select.items">
 					<option v-for="item in select.items" :value="item.value">
 						{{ item.text }}
@@ -135,14 +135,14 @@
 						</option>
 					</optgroup>
 				</template>
-			</Select>
+			</MkSelect>
 
 			<div
 				v-if="(showOkButton || showCancelButton) && !actions"
 				:class="$style.buttons"
 			>
 				<div v-if="!isYesNo">
-					<Button
+					<MkButton
 						v-if="showOkButton"
 						inline
 						primary
@@ -153,34 +153,34 @@
 							showCancelButton || input || select
 								? i18n.ts.ok
 								: i18n.ts.gotIt
-						}}</Button
+						}}</MkButton
 					>
-					<Button
+					<MkButton
 						v-if="showCancelButton || input || select"
 						inline
 						@click="cancel"
-						>{{ i18n.ts.cancel }}</Button
+						>{{ i18n.ts.cancel }}</MkButton
 					>
 				</div>
 				<div v-else>
-					<Button
+					<MkButton
 						v-if="showOkButton"
 						inline
 						primary
 						:autofocus="!input && !select"
 						@click="ok"
 						>{{ i18n.ts.yes }}
-					</Button>
-					<Button
+					</MkButton>
+					<MkButton
 						v-if="showCancelButton || input || select"
 						inline
 						@click="cancel"
-						>{{ i18n.ts.no }}</Button
+						>{{ i18n.ts.no }}</MkButton
 					>
 				</div>
 			</div>
 			<div v-if="actions" :class="$style.buttons">
-				<Button
+				<MkButton
 					v-for="action in actions"
 					:key="action.text"
 					inline
@@ -191,21 +191,21 @@
 							modal?.close();
 						}
 					"
-					>{{ action.text }}</Button
+					>{{ action.text }}</MkButton
 				>
 			</div>
 		</div>
-	</Modal>
+	</MkModal>
 </template>
 
 <script lang="ts" setup>
 import { onBeforeUnmount, onMounted, ref, shallowRef } from "vue";
 import * as Acct from "iceshrimp-js/built/acct";
-import Modal from "@/components/Modal.vue";
-import Button from "@/components/Button.vue";
-import Input from "@/components/form/Input.vue";
-import Textarea from "@/components/form/Textarea.vue";
-import Select from "@/components/form/Select.vue";
+import MkModal from "@/components/MkModal.vue";
+import MkButton from "@/components/MkButton.vue";
+import MkInput from "@/components/form/input.vue";
+import MkTextarea from "@/components/form/textarea.vue";
+import MkSelect from "@/components/form/select.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 
@@ -276,7 +276,7 @@ const emit = defineEmits<{
 	(ev: "closed"): void;
 }>();
 
-const modal = shallowRef<InstanceType<typeof Modal>>();
+const modal = shallowRef<InstanceType<typeof MkModal>>();
 
 const inputValue = ref<string | number | null>(props.input?.default ?? null);
 const selectedValue = ref(props.select?.default ?? null);
@@ -308,7 +308,7 @@ const okButtonDisabled = $computed<boolean>(() => {
 	return false;
 });
 
-const inputEl = ref<typeof Input>();
+const inputEl = ref<typeof MkInput>();
 
 function done(canceled: boolean, result?) {
 	emit("done", { canceled, result });
diff --git a/packages/client/src/components/DigitalClock.vue b/packages/client/src/components/MkDigitalClock.vue
similarity index 100%
rename from packages/client/src/components/DigitalClock.vue
rename to packages/client/src/components/MkDigitalClock.vue
diff --git a/packages/client/src/components/DriveFile.vue b/packages/client/src/components/MkDrive.file.vue
similarity index 96%
rename from packages/client/src/components/DriveFile.vue
rename to packages/client/src/components/MkDrive.file.vue
index efc06ad59..8ed9be3eb 100644
--- a/packages/client/src/components/DriveFile.vue
+++ b/packages/client/src/components/MkDrive.file.vue
@@ -22,7 +22,7 @@
 			<p>{{ i18n.ts.nsfw }}</p>
 		</div>
 
-		<DriveFileThumbnail class="thumbnail" :file="file" fit="contain" />
+		<MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain" />
 
 		<p class="name">
 			<span>{{
@@ -41,7 +41,7 @@
 import { computed, defineAsyncComponent, ref } from "vue";
 import * as Misskey from "iceshrimp-js";
 import copyToClipboard from "@/scripts/copy-to-clipboard";
-import DriveFileThumbnail from "@/components/DriveFileThumbnail.vue";
+import MkDriveFileThumbnail from "@/components/MkDriveFileThumbnail.vue";
 import bytes from "@/filters/bytes";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
@@ -167,7 +167,7 @@ function rename() {
 
 function describe() {
 	os.popup(
-		defineAsyncComponent(() => import("@/components/MediaCaption.vue")),
+		defineAsyncComponent(() => import("@/components/MkMediaCaption.vue")),
 		{
 			title: i18n.ts.describeFile,
 			input: {
diff --git a/packages/client/src/components/DriveFolder.vue b/packages/client/src/components/MkDrive.folder.vue
similarity index 99%
rename from packages/client/src/components/DriveFolder.vue
rename to packages/client/src/components/MkDrive.folder.vue
index 03ee5fa56..1bcb9aa26 100644
--- a/packages/client/src/components/DriveFolder.vue
+++ b/packages/client/src/components/MkDrive.folder.vue
@@ -256,7 +256,7 @@ function onContextmenu(ev: MouseEvent) {
 				action: () => {
 					os.popup(
 						defineAsyncComponent(
-							() => import("@/components/DriveWindow.vue"),
+							() => import("@/components/MkDriveWindow.vue"),
 						),
 						{
 							initialFolder: props.folder,
diff --git a/packages/client/src/components/DriveNavFolder.vue b/packages/client/src/components/MkDrive.navFolder.vue
similarity index 100%
rename from packages/client/src/components/DriveNavFolder.vue
rename to packages/client/src/components/MkDrive.navFolder.vue
diff --git a/packages/client/src/components/Drive.vue b/packages/client/src/components/MkDrive.vue
similarity index 97%
rename from packages/client/src/components/Drive.vue
rename to packages/client/src/components/MkDrive.vue
index c662676b3..fdeafb2be 100644
--- a/packages/client/src/components/Drive.vue
+++ b/packages/client/src/components/MkDrive.vue
@@ -70,9 +70,9 @@
 					/>
 					<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
 					<div v-for="(n, i) in 16" :key="i" class="padding"></div>
-					<Button v-if="moreFolders" ref="moreFolders">{{
+					<MkButton v-if="moreFolders" ref="moreFolders">{{
 						i18n.ts.loadMore
-					}}</Button>
+					}}</MkButton>
 				</div>
 				<div
 					v-show="files.length > 0"
@@ -95,11 +95,11 @@
 					/>
 					<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
 					<div v-for="(n, i) in 16" :key="i" class="padding"></div>
-					<Button
+					<MkButton
 						v-show="moreFiles"
 						ref="loadMoreFiles"
 						@click="fetchMoreFiles"
-						>{{ i18n.ts.loadMore }}</Button
+						>{{ i18n.ts.loadMore }}</MkButton
 					>
 				</div>
 				<div
@@ -116,7 +116,7 @@
 					</p>
 				</div>
 			</div>
-			<Loading v-if="fetching" />
+			<MkLoading v-if="fetching" />
 		</div>
 		<div v-if="draghover" class="dropzone"></div>
 		<input
@@ -141,10 +141,10 @@ import {
 	watch,
 } from "vue";
 import * as Misskey from "iceshrimp-js";
-import Button from "./Button.vue";
-import XNavFolder from "@/components/DriveNavFolder.vue";
-import XFolder from "@/components/DriveFolder.vue";
-import XFile from "@/components/DriveFile.vue";
+import MkButton from "./MkButton.vue";
+import XNavFolder from "@/components/MkDrive.navFolder.vue";
+import XFolder from "@/components/MkDrive.folder.vue";
+import XFile from "@/components/MkDrive.file.vue";
 import * as os from "@/os";
 import { stream } from "@/stream";
 import { defaultStore } from "@/store";
@@ -178,7 +178,7 @@ const emit = defineEmits<{
 	(ev: "open-folder", v: Misskey.entities.DriveFolder): void;
 }>();
 
-const loadMoreFiles = ref<InstanceType<typeof Button>>();
+const loadMoreFiles = ref<InstanceType<typeof MkButton>>();
 const fileInput = ref<HTMLInputElement>();
 
 const folder = ref<Misskey.entities.DriveFolder | null>(null);
diff --git a/packages/client/src/components/DriveFileThumbnail.vue b/packages/client/src/components/MkDriveFileThumbnail.vue
similarity index 97%
rename from packages/client/src/components/DriveFileThumbnail.vue
rename to packages/client/src/components/MkDriveFileThumbnail.vue
index bb96cda54..d3925cdcc 100644
--- a/packages/client/src/components/DriveFileThumbnail.vue
+++ b/packages/client/src/components/MkDriveFileThumbnail.vue
@@ -42,7 +42,7 @@
 <script lang="ts" setup>
 import { computed } from "vue";
 import type * as Misskey from "iceshrimp-js";
-import ImgWithBlurhash from "@/components/ImgWithBlurhash.vue";
+import ImgWithBlurhash from "@/components/MkImgWithBlurhash.vue";
 
 const props = defineProps<{
 	file: Misskey.entities.DriveFile;
diff --git a/packages/client/src/components/DriveSelectDialog.vue b/packages/client/src/components/MkDriveSelectDialog.vue
similarity index 93%
rename from packages/client/src/components/DriveSelectDialog.vue
rename to packages/client/src/components/MkDriveSelectDialog.vue
index fc6e45c4e..7d25f14b3 100644
--- a/packages/client/src/components/DriveSelectDialog.vue
+++ b/packages/client/src/components/MkDriveSelectDialog.vue
@@ -38,8 +38,8 @@
 <script lang="ts" setup>
 import { ref } from "vue";
 import * as Misskey from "iceshrimp-js";
-import XDrive from "@/components/Drive.vue";
-import XModalWindow from "@/components/ModalWindow.vue";
+import XDrive from "@/components/MkDrive.vue";
+import XModalWindow from "@/components/MkModalWindow.vue";
 import number from "@/filters/number";
 import { i18n } from "@/i18n";
 
diff --git a/packages/client/src/components/DriveWindow.vue b/packages/client/src/components/MkDriveWindow.vue
similarity index 84%
rename from packages/client/src/components/DriveWindow.vue
rename to packages/client/src/components/MkDriveWindow.vue
index 1c7eb0962..12d271f3e 100644
--- a/packages/client/src/components/DriveWindow.vue
+++ b/packages/client/src/components/MkDriveWindow.vue
@@ -16,8 +16,8 @@
 <script lang="ts" setup>
 import {} from "vue";
 import * as Misskey from "iceshrimp-js";
-import XDrive from "@/components/Drive.vue";
-import XWindow from "@/components/Window.vue";
+import XDrive from "@/components/MkDrive.vue";
+import XWindow from "@/components/MkWindow.vue";
 import { i18n } from "@/i18n";
 
 defineProps<{
diff --git a/packages/client/src/components/EmojiPickerSection.vue b/packages/client/src/components/MkEmojiPicker.section.vue
similarity index 96%
rename from packages/client/src/components/EmojiPickerSection.vue
rename to packages/client/src/components/MkEmojiPicker.section.vue
index 26119fe98..d7d1ba8f0 100644
--- a/packages/client/src/components/EmojiPickerSection.vue
+++ b/packages/client/src/components/MkEmojiPicker.section.vue
@@ -41,7 +41,7 @@
 				class="_button item"
 				@click="emit('chosen', emoji, $event)"
 			>
-				<Emoji class="emoji" :emoji="emoji" :normal="true" />
+				<MkEmoji class="emoji" :emoji="emoji" :normal="true" />
 			</button>
 		</div>
 	</section>
diff --git a/packages/client/src/components/EmojiPicker.vue b/packages/client/src/components/MkEmojiPicker.vue
similarity index 98%
rename from packages/client/src/components/EmojiPicker.vue
rename to packages/client/src/components/MkEmojiPicker.vue
index 78eb8e4cb..447017154 100644
--- a/packages/client/src/components/EmojiPicker.vue
+++ b/packages/client/src/components/MkEmojiPicker.vue
@@ -28,7 +28,7 @@
 							tabindex="0"
 							@click="chosen(emoji, $event)"
 						>
-							<!--<Emoji v-if="emoji.char != null" :emoji="emoji.char"/>-->
+							<!--<MkEmoji v-if="emoji.char != null" :emoji="emoji.char"/>-->
 							<img
 								class="emoji"
 								:src="
@@ -48,7 +48,7 @@
 							tabindex="0"
 							@click="chosen(emoji, $event)"
 						>
-							<Emoji class="emoji" :emoji="emoji.emoji" />
+							<MkEmoji class="emoji" :emoji="emoji.emoji" />
 						</button>
 					</div>
 				</section>
@@ -63,7 +63,7 @@
 								tabindex="0"
 								@click="chosen(emoji, $event)"
 							>
-								<Emoji
+								<MkEmoji
 									class="emoji"
 									:emoji="emoji"
 									:normal="true"
@@ -84,7 +84,7 @@
 								class="_button item"
 								@click="chosen(emoji, $event)"
 							>
-								<Emoji
+								<MkEmoji
 									class="emoji"
 									:emoji="emoji"
 									:normal="true"
@@ -165,7 +165,7 @@
 <script lang="ts" setup>
 import { ref, computed, watch, onMounted } from "vue";
 import * as Misskey from "iceshrimp-js";
-import XSection from "@/components/EmojiPickerSection.vue";
+import XSection from "@/components/MkEmojiPicker.section.vue";
 import {
 	emojilist,
 	unicodeEmojiCategories,
@@ -173,7 +173,7 @@ import {
 	getNicelyLabeledCategory,
 } from "@/scripts/emojilist";
 import { getStaticImageUrl } from "@/scripts/get-static-image-url";
-import Ripple from "@/components/Ripple.vue";
+import Ripple from "@/components/MkRipple.vue";
 import * as os from "@/os";
 import { isTouchUsing } from "@/scripts/touch";
 import { deviceKind } from "@/scripts/device-kind";
diff --git a/packages/client/src/components/EmojiPickerDialog.vue b/packages/client/src/components/MkEmojiPickerDialog.vue
similarity index 86%
rename from packages/client/src/components/EmojiPickerDialog.vue
rename to packages/client/src/components/MkEmojiPickerDialog.vue
index 8b3c7deab..c3212cd40 100644
--- a/packages/client/src/components/EmojiPickerDialog.vue
+++ b/packages/client/src/components/MkEmojiPickerDialog.vue
@@ -1,5 +1,5 @@
 <template>
-	<Modal
+	<MkModal
 		ref="modal"
 		v-slot="{ type, maxHeight }"
 		:z-priority="'middle'"
@@ -17,7 +17,7 @@
 		@close="emit('close')"
 		@closed="emit('closed')"
 	>
-		<EmojiPicker
+		<MkEmojiPicker
 			ref="picker"
 			class="ryghynhb _popup _shadow"
 			:class="{ drawer: type === 'drawer' }"
@@ -27,13 +27,13 @@
 			:max-height="maxHeight"
 			@chosen="chosen"
 		/>
-	</Modal>
+	</MkModal>
 </template>
 
 <script lang="ts" setup>
 import { ref, onMounted, onBeforeUnmount } from "vue";
-import Modal from "@/components/Modal.vue";
-import EmojiPicker from "@/components/EmojiPicker.vue";
+import MkModal from "@/components/MkModal.vue";
+import MkEmojiPicker from "@/components/MkEmojiPicker.vue";
 import { defaultStore } from "@/store";
 
 withDefaults(
@@ -56,8 +56,8 @@ const emit = defineEmits<{
 	(ev: "closed"): void;
 }>();
 
-const modal = ref<InstanceType<typeof Modal>>();
-const picker = ref<InstanceType<typeof EmojiPicker>>();
+const modal = ref<InstanceType<typeof MkModal>>();
+const picker = ref<InstanceType<typeof MkEmojiPicker>>();
 
 function checkForShift(ev?: MouseEvent) {
 	if (ev?.shiftKey) return;
diff --git a/packages/client/src/components/FeaturedPhotos.vue b/packages/client/src/components/MkFeaturedPhotos.vue
similarity index 100%
rename from packages/client/src/components/FeaturedPhotos.vue
rename to packages/client/src/components/MkFeaturedPhotos.vue
diff --git a/packages/client/src/components/FileListForAdmin.vue b/packages/client/src/components/MkFileListForAdmin.vue
similarity index 86%
rename from packages/client/src/components/FileListForAdmin.vue
rename to packages/client/src/components/MkFileListForAdmin.vue
index 2827e91b4..e39272616 100644
--- a/packages/client/src/components/FileListForAdmin.vue
+++ b/packages/client/src/components/MkFileListForAdmin.vue
@@ -1,12 +1,12 @@
 <template>
 	<div>
-		<Pagination
+		<MkPagination
 			v-slot="{ items }"
 			:pagination="pagination"
 			class="urempief"
 			:class="{ grid: viewMode === 'grid' }"
 		>
-			<A
+			<MkA
 				v-for="file in items"
 				:key="file.id"
 				v-tooltip.mfm="
@@ -22,7 +22,7 @@
 				<div v-if="file.isSensitive" class="sensitive-label">
 					{{ i18n.ts.sensitive }}
 				</div>
-				<DriveFileThumbnail
+				<MkDriveFileThumbnail
 					class="thumbnail"
 					:file="file"
 					fit="contain"
@@ -32,7 +32,7 @@
 						<small style="opacity: 0.7">{{ file.name }}</small>
 					</div>
 					<div>
-						<Acct v-if="file.user" :user="file.user" />
+						<MkAcct v-if="file.user" :user="file.user" />
 						<div v-else>{{ i18n.ts.system }}</div>
 					</div>
 					<div>
@@ -42,21 +42,21 @@
 					<div>
 						<span
 							>{{ i18n.ts.registeredDate }}:
-							<Time :time="file.createdAt" mode="detail"
+							<MkTime :time="file.createdAt" mode="detail"
 						/></span>
 					</div>
 				</div>
-			</A>
-		</Pagination>
+			</MkA>
+		</MkPagination>
 	</div>
 </template>
 
 <script lang="ts" setup>
 import { computed } from "vue";
 import * as Acct from "iceshrimp-js/built/acct";
-import Switch from "@/components/ui/Switch.vue";
-import Pagination from "@/components/Pagination.vue";
-import DriveFileThumbnail from "@/components/DriveFileThumbnail.vue";
+import MkSwitch from "@/components/ui/switch.vue";
+import MkPagination from "@/components/MkPagination.vue";
+import MkDriveFileThumbnail from "@/components/MkDriveFileThumbnail.vue";
 import bytes from "@/filters/bytes";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
@@ -72,7 +72,6 @@ const props = defineProps<{
 	0% {
 		opacity: 1;
 	}
-
 	50% {
 		opacity: 0;
 	}
diff --git a/packages/client/src/components/FileTypeIcon.vue b/packages/client/src/components/MkFileTypeIcon.vue
similarity index 100%
rename from packages/client/src/components/FileTypeIcon.vue
rename to packages/client/src/components/MkFileTypeIcon.vue
diff --git a/packages/client/src/components/Folder.vue b/packages/client/src/components/MkFolder.vue
similarity index 100%
rename from packages/client/src/components/Folder.vue
rename to packages/client/src/components/MkFolder.vue
diff --git a/packages/client/src/components/FollowButton.vue b/packages/client/src/components/MkFollowButton.vue
similarity index 100%
rename from packages/client/src/components/FollowButton.vue
rename to packages/client/src/components/MkFollowButton.vue
diff --git a/packages/client/src/components/ForgotPassword.vue b/packages/client/src/components/MkForgotPassword.vue
similarity index 85%
rename from packages/client/src/components/ForgotPassword.vue
rename to packages/client/src/components/MkForgotPassword.vue
index 5272a0d09..07f086601 100644
--- a/packages/client/src/components/ForgotPassword.vue
+++ b/packages/client/src/components/MkForgotPassword.vue
@@ -14,7 +14,7 @@
 			@submit.prevent="onSubmit"
 		>
 			<div class="main _formRoot">
-				<Input
+				<MkInput
 					v-model="username"
 					class="_formBlock"
 					type="text"
@@ -25,9 +25,9 @@
 				>
 					<template #label>{{ i18n.ts.username }}</template>
 					<template #prefix>@</template>
-				</Input>
+				</MkInput>
 
-				<Input
+				<MkInput
 					v-model="email"
 					class="_formBlock"
 					type="email"
@@ -38,21 +38,21 @@
 					<template #caption>{{
 						i18n.ts._forgotPassword.enterEmail
 					}}</template>
-				</Input>
+				</MkInput>
 
-				<Button
+				<MkButton
 					class="_formBlock"
 					type="submit"
 					:disabled="processing"
 					primary
 					style="margin: 0 auto"
-					>{{ i18n.ts.send }}</Button
+					>{{ i18n.ts.send }}</MkButton
 				>
 			</div>
 			<div class="sub">
-				<A to="/about" class="_link">{{
+				<MkA to="/about" class="_link">{{
 					i18n.ts._forgotPassword.ifNoEmail
-				}}</A>
+				}}</MkA>
 			</div>
 		</form>
 		<div v-else class="bafecedb">
@@ -63,9 +63,9 @@
 
 <script lang="ts" setup>
 import {} from "vue";
-import XModalWindow from "@/components/ModalWindow.vue";
-import Button from "@/components/Button.vue";
-import Input from "@/components/form/Input.vue";
+import XModalWindow from "@/components/MkModalWindow.vue";
+import MkButton from "@/components/MkButton.vue";
+import MkInput from "@/components/form/input.vue";
 import * as os from "@/os";
 import { instance } from "@/instance";
 import { i18n } from "@/i18n";
diff --git a/packages/client/src/components/FormDialog.vue b/packages/client/src/components/MkFormDialog.vue
similarity index 91%
rename from packages/client/src/components/FormDialog.vue
rename to packages/client/src/components/MkFormDialog.vue
index e35837377..08d075280 100644
--- a/packages/client/src/components/FormDialog.vue
+++ b/packages/client/src/components/MkFormDialog.vue
@@ -14,7 +14,7 @@
 			{{ title }}
 		</template>
 
-		<Spacer :margin-min="20" :margin-max="32">
+		<MkSpacer :margin-min="20" :margin-max="32">
 			<div class="xkpnjxcv _formRoot">
 				<template
 					v-for="item in Object.keys(form).filter(
@@ -141,29 +141,29 @@
 							form[item].description
 						}}</template>
 					</FormRange>
-					<Button
+					<MkButton
 						v-else-if="form[item].type === 'button'"
 						class="_formBlock"
 						@click="form[item].action($event, values)"
 					>
 						<span v-text="form[item].content || item"></span>
-					</Button>
+					</MkButton>
 				</template>
 			</div>
-		</Spacer>
+		</MkSpacer>
 	</XModalWindow>
 </template>
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import FormInput from "./form/Input.vue";
-import FormTextarea from "./form/Textarea.vue";
-import FormSwitch from "./form/Switch.vue";
-import FormSelect from "./form/Select.vue";
-import FormRange from "./form/Range.vue";
-import Button from "./Button.vue";
-import FormRadios from "./form/Radios.vue";
-import XModalWindow from "@/components/ModalWindow.vue";
+import FormInput from "./form/input.vue";
+import FormTextarea from "./form/textarea.vue";
+import FormSwitch from "./form/switch.vue";
+import FormSelect from "./form/select.vue";
+import FormRange from "./form/range.vue";
+import MkButton from "./MkButton.vue";
+import FormRadios from "./form/radios.vue";
+import XModalWindow from "@/components/MkModalWindow.vue";
 import { i18n } from "@/i18n";
 
 export default defineComponent({
@@ -174,7 +174,7 @@ export default defineComponent({
 		FormSwitch,
 		FormSelect,
 		FormRange,
-		Button,
+		MkButton,
 		FormRadios,
 	},
 
diff --git a/packages/client/src/components/Formula.vue b/packages/client/src/components/MkFormula.vue
similarity index 88%
rename from packages/client/src/components/Formula.vue
rename to packages/client/src/components/MkFormula.vue
index eb532dca3..e488c7da7 100644
--- a/packages/client/src/components/Formula.vue
+++ b/packages/client/src/components/MkFormula.vue
@@ -9,7 +9,7 @@ import * as os from "@/os";
 export default defineComponent({
 	components: {
 		XFormula: defineAsyncComponent(
-			() => import("@/components/FormulaCore.vue"),
+			() => import("@/components/MkFormulaCore.vue"),
 		),
 	},
 	props: {
diff --git a/packages/client/src/components/FormulaCore.vue b/packages/client/src/components/MkFormulaCore.vue
similarity index 100%
rename from packages/client/src/components/FormulaCore.vue
rename to packages/client/src/components/MkFormulaCore.vue
diff --git a/packages/client/src/components/GalleryPostPreview.vue b/packages/client/src/components/MkGalleryPostPreview.vue
similarity index 90%
rename from packages/client/src/components/GalleryPostPreview.vue
rename to packages/client/src/components/MkGalleryPostPreview.vue
index d7cf489c2..2ef339a8f 100644
--- a/packages/client/src/components/GalleryPostPreview.vue
+++ b/packages/client/src/components/MkGalleryPostPreview.vue
@@ -1,5 +1,5 @@
 <template>
-	<A :to="`/gallery/${post.id}`" class="ttasepnz _panel">
+	<MkA :to="`/gallery/${post.id}`" class="ttasepnz _panel">
 		<div class="thumbnail">
 			<ImgWithBlurhash
 				class="img"
@@ -9,19 +9,19 @@
 		</div>
 		<article>
 			<header>
-				<Avatar :user="post.user" class="avatar" />
+				<MkAvatar :user="post.user" class="avatar" />
 			</header>
 			<footer>
 				<span class="title">{{ post.title }}</span>
 			</footer>
 		</article>
-	</A>
+	</MkA>
 </template>
 
 <script lang="ts" setup>
 import {} from "vue";
 import { userName } from "@/filters/user";
-import ImgWithBlurhash from "@/components/ImgWithBlurhash.vue";
+import ImgWithBlurhash from "@/components/MkImgWithBlurhash.vue";
 
 const props = defineProps<{
 	post: any;
diff --git a/packages/client/src/components/WebSearch.vue b/packages/client/src/components/MkGoogle.vue
similarity index 90%
rename from packages/client/src/components/WebSearch.vue
rename to packages/client/src/components/MkGoogle.vue
index 32ac5318a..8d7388e84 100644
--- a/packages/client/src/components/WebSearch.vue
+++ b/packages/client/src/components/MkGoogle.vue
@@ -11,7 +11,7 @@
 <script lang="ts" setup>
 import { ref } from "vue";
 import { i18n } from "@/i18n";
-import { searchEngine } from "@/config";
+import { searchEngine } from "@/config"
 
 const props = defineProps<{
 	q: string;
@@ -20,7 +20,10 @@ const props = defineProps<{
 const query = ref(props.q);
 
 const search = () => {
-	window.open(`${searchEngine}${query.value}`, "_blank");
+	window.open(
+		`${searchEngine}${query.value}`,
+		"_blank",
+	);
 };
 </script>
 
diff --git a/packages/client/src/components/Heatmap.vue b/packages/client/src/components/MkHeatmap.vue
similarity index 99%
rename from packages/client/src/components/Heatmap.vue
rename to packages/client/src/components/MkHeatmap.vue
index f697c62b0..f72286c43 100644
--- a/packages/client/src/components/Heatmap.vue
+++ b/packages/client/src/components/MkHeatmap.vue
@@ -1,6 +1,6 @@
 <template>
 	<div ref="rootEl">
-		<Loading v-if="fetching" />
+		<MkLoading v-if="fetching" />
 		<div v-else>
 			<canvas ref="chartEl"></canvas>
 		</div>
diff --git a/packages/client/src/components/ImageViewer.vue b/packages/client/src/components/MkImageViewer.vue
similarity index 92%
rename from packages/client/src/components/ImageViewer.vue
rename to packages/client/src/components/MkImageViewer.vue
index db3893236..f15092dc7 100644
--- a/packages/client/src/components/ImageViewer.vue
+++ b/packages/client/src/components/MkImageViewer.vue
@@ -1,5 +1,5 @@
 <template>
-	<Modal
+	<MkModal
 		ref="modal"
 		:z-priority="'middle'"
 		@click="modal.close()"
@@ -22,7 +22,7 @@
 				>
 			</footer>
 		</div>
-	</Modal>
+	</MkModal>
 </template>
 
 <script lang="ts" setup>
@@ -30,7 +30,7 @@ import {} from "vue";
 import type * as misskey from "iceshrimp-js";
 import bytes from "@/filters/bytes";
 import number from "@/filters/number";
-import Modal from "@/components/Modal.vue";
+import MkModal from "@/components/MkModal.vue";
 
 const props = withDefaults(
 	defineProps<{
@@ -43,7 +43,7 @@ const emit = defineEmits<{
 	(ev: "closed"): void;
 }>();
 
-const modal = $ref<InstanceType<typeof Modal>>();
+const modal = $ref<InstanceType<typeof MkModal>>();
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/components/ImgWithBlurhash.vue b/packages/client/src/components/MkImgWithBlurhash.vue
similarity index 100%
rename from packages/client/src/components/ImgWithBlurhash.vue
rename to packages/client/src/components/MkImgWithBlurhash.vue
diff --git a/packages/client/src/components/Info.vue b/packages/client/src/components/MkInfo.vue
similarity index 100%
rename from packages/client/src/components/Info.vue
rename to packages/client/src/components/MkInfo.vue
diff --git a/packages/client/src/components/InstanceCardMini.vue b/packages/client/src/components/MkInstanceCardMini.vue
similarity index 96%
rename from packages/client/src/components/InstanceCardMini.vue
rename to packages/client/src/components/MkInstanceCardMini.vue
index 77987bf3e..ff242f5a6 100644
--- a/packages/client/src/components/InstanceCardMini.vue
+++ b/packages/client/src/components/MkInstanceCardMini.vue
@@ -19,13 +19,13 @@
 				{{ instance.softwareVersion }}</span
 			>
 		</div>
-		<MiniChart v-if="chartValues" class="chart" :src="chartValues" />
+		<MkMiniChart v-if="chartValues" class="chart" :src="chartValues" />
 	</div>
 </template>
 
 <script lang="ts" setup>
 import * as iceshrimp from "iceshrimp-js";
-import MiniChart from "@/components/MiniChart.vue";
+import MkMiniChart from "@/components/MkMiniChart.vue";
 import * as os from "@/os";
 import { getProxiedImageUrlNullable } from "@/scripts/media-proxy";
 
diff --git a/packages/client/src/components/InstanceSelectDialog.vue b/packages/client/src/components/MkInstanceSelectDialog.vue
similarity index 95%
rename from packages/client/src/components/InstanceSelectDialog.vue
rename to packages/client/src/components/MkInstanceSelectDialog.vue
index aa1547d26..e9def98fa 100644
--- a/packages/client/src/components/InstanceSelectDialog.vue
+++ b/packages/client/src/components/MkInstanceSelectDialog.vue
@@ -11,13 +11,13 @@
 		<template #header>{{ i18n.ts.selectInstance }}</template>
 		<div class="mehkoush">
 			<div class="form">
-				<Input
+				<MkInput
 					v-model="hostname"
 					:autofocus="true"
 					@update:modelValue="search"
 				>
 					<template #label>{{ i18n.ts.instance }}</template>
-				</Input>
+				</MkInput>
 			</div>
 			<div
 				v-if="hostname != ''"
@@ -56,8 +56,8 @@
 </template>
 
 <script lang="ts" setup>
-import Input from "@/components/form/Input.vue";
-import XModalWindow from "@/components/ModalWindow.vue";
+import MkInput from "@/components/form/input.vue";
+import XModalWindow from "@/components/MkModalWindow.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { Instance } from "iceshrimp-js/built/entities";
diff --git a/packages/client/src/components/InstanceStats.vue b/packages/client/src/components/MkInstanceStats.vue
similarity index 90%
rename from packages/client/src/components/InstanceStats.vue
rename to packages/client/src/components/MkInstanceStats.vue
index 8cc782f4d..c2a507173 100644
--- a/packages/client/src/components/InstanceStats.vue
+++ b/packages/client/src/components/MkInstanceStats.vue
@@ -1,10 +1,10 @@
 <template>
 	<div :class="$style.root">
-		<Folder class="item">
+		<MkFolder class="item">
 			<template #header>Chart</template>
 			<div :class="$style.chart">
 				<div class="selects">
-					<Select v-model="chartSrc" style="margin: 0; flex: 1">
+					<MkSelect v-model="chartSrc" style="margin: 0; flex: 1">
 						<optgroup :label="i18n.ts.federation">
 							<option value="federation">
 								{{ i18n.ts._charts.federation }}
@@ -46,26 +46,26 @@
 								{{ i18n.ts._charts.storageUsageIncDec }}
 							</option>
 						</optgroup>
-					</Select>
-					<Select v-model="chartSpan" style="margin: 0 0 0 10px">
+					</MkSelect>
+					<MkSelect v-model="chartSpan" style="margin: 0 0 0 10px">
 						<option value="hour">{{ i18n.ts.perHour }}</option>
 						<option value="day">{{ i18n.ts.perDay }}</option>
-					</Select>
+					</MkSelect>
 				</div>
 				<div class="chart _panel">
-					<ChartComp
+					<MkChart
 						:src="chartSrc"
 						:span="chartSpan"
 						:limit="chartLimit"
 						:detailed="true"
-					></ChartComp>
+					></MkChart>
 				</div>
 			</div>
-		</Folder>
+		</MkFolder>
 
-		<Folder class="item">
+		<MkFolder class="item">
 			<template #header>Active users heatmap</template>
-			<Select v-model="heatmapSrc" style="margin: 0 0 12px 0">
+			<MkSelect v-model="heatmapSrc" style="margin: 0 0 12px 0">
 				<option value="active-users">Active users</option>
 				<option value="notes">Posts</option>
 				<option value="ap-requests-inbox-received">
@@ -77,13 +77,13 @@
 				<option value="ap-requests-deliver-failed">
 					Fediverse Requests: deliverFailed
 				</option>
-			</Select>
+			</MkSelect>
 			<div class="_panel" :class="$style.heatmap">
-				<Heatmap :src="heatmapSrc" />
+				<MkHeatmap :src="heatmapSrc" />
 			</div>
-		</Folder>
+		</MkFolder>
 
-		<Folder class="item">
+		<MkFolder class="item">
 			<template #header>Federation</template>
 			<div :class="$style.federation">
 				<div class="pies">
@@ -97,20 +97,20 @@
 					</div>
 				</div>
 			</div>
-		</Folder>
+		</MkFolder>
 	</div>
 </template>
 
 <script lang="ts" setup>
 import { onMounted } from "vue";
 import { Chart } from "chart.js";
-import Select from "@/components/form/Select.vue";
-import ChartComp from "@/components/Chart.vue";
+import MkSelect from "@/components/form/select.vue";
+import MkChart from "@/components/MkChart.vue";
 import { useChartTooltip } from "@/scripts/use-chart-tooltip";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
-import Heatmap from "@/components/Heatmap.vue";
-import Folder from "@/components/Folder.vue";
+import MkHeatmap from "@/components/MkHeatmap.vue";
+import MkFolder from "@/components/MkFolder.vue";
 import { initChart } from "@/scripts/init-chart";
 
 initChart();
diff --git a/packages/client/src/components/InstanceTicker.vue b/packages/client/src/components/MkInstanceTicker.vue
similarity index 100%
rename from packages/client/src/components/InstanceTicker.vue
rename to packages/client/src/components/MkInstanceTicker.vue
diff --git a/packages/client/src/components/KeyValue.vue b/packages/client/src/components/MkKeyValue.vue
similarity index 100%
rename from packages/client/src/components/KeyValue.vue
rename to packages/client/src/components/MkKeyValue.vue
diff --git a/packages/client/src/components/LaunchPad.vue b/packages/client/src/components/MkLaunchPad.vue
similarity index 96%
rename from packages/client/src/components/LaunchPad.vue
rename to packages/client/src/components/MkLaunchPad.vue
index 11cecfba1..e26105622 100644
--- a/packages/client/src/components/LaunchPad.vue
+++ b/packages/client/src/components/MkLaunchPad.vue
@@ -1,5 +1,5 @@
 <template>
-	<Modal
+	<MkModal
 		ref="modal"
 		v-slot="{ type, maxHeight }"
 		:prefer-type="preferedModalType"
@@ -38,7 +38,7 @@
 							><i class="ph-circle ph-fill"></i
 						></span>
 					</button>
-					<A
+					<MkA
 						v-else
 						v-click-anime
 						:to="item.to"
@@ -54,16 +54,16 @@
 							}"
 							><i class="ph-circle ph-fill"></i
 						></span>
-					</A>
+					</MkA>
 				</template>
 			</div>
 		</div>
-	</Modal>
+	</MkModal>
 </template>
 
 <script lang="ts" setup>
 import {} from "vue";
-import Modal from "@/components/Modal.vue";
+import MkModal from "@/components/MkModal.vue";
 import { navbarItemDef } from "@/navbar";
 import { instanceName } from "@/config";
 import { defaultStore } from "@/store";
@@ -92,7 +92,7 @@ const preferedModalType =
 		? "drawer"
 		: "dialog";
 
-const modal = $ref<InstanceType<typeof Modal>>();
+const modal = $ref<InstanceType<typeof MkModal>>();
 
 const menu = defaultStore.state.menu;
 
diff --git a/packages/client/src/components/Link.vue b/packages/client/src/components/MkLink.vue
similarity index 90%
rename from packages/client/src/components/Link.vue
rename to packages/client/src/components/MkLink.vue
index 0be521b9b..9e1e48215 100644
--- a/packages/client/src/components/Link.vue
+++ b/packages/client/src/components/MkLink.vue
@@ -1,6 +1,6 @@
 <template>
 	<component
-		:is="self ? 'A' : 'a'"
+		:is="self ? 'MkA' : 'a'"
 		ref="el"
 		class="xlcxczvw _link"
 		:[attr]="self ? url.substr(local.length) : url"
@@ -39,7 +39,9 @@ const el = $ref();
 
 useTooltip($$(el), (showing) => {
 	os.popup(
-		defineAsyncComponent(() => import("@/components/UrlPreviewPopup.vue")),
+		defineAsyncComponent(
+			() => import("@/components/MkUrlPreviewPopup.vue"),
+		),
 		{
 			showing,
 			url: props.url,
diff --git a/packages/client/src/components/ManyAnnouncements.vue b/packages/client/src/components/MkManyAnnouncements.vue
similarity index 72%
rename from packages/client/src/components/ManyAnnouncements.vue
rename to packages/client/src/components/MkManyAnnouncements.vue
index e718c1a18..5c8b225de 100644
--- a/packages/client/src/components/ManyAnnouncements.vue
+++ b/packages/client/src/components/MkManyAnnouncements.vue
@@ -1,28 +1,28 @@
 <template>
-	<Modal ref="modal" :z-priority="'middle'" @closed="$emit('closed')">
+	<MkModal ref="modal" :z-priority="'middle'" @closed="$emit('closed')">
 		<div :class="$style.root">
 			<p :class="$style.title">
 				{{ i18n.ts.youHaveUnreadAnnouncements }}
 			</p>
-			<Button
+			<MkButton
 				:class="$style.gotIt"
 				primary
 				full
 				@click="checkAnnouncements()"
-				>{{ i18n.ts.gotIt }}</Button
+				>{{ i18n.ts.gotIt }}</MkButton
 			>
 		</div>
-	</Modal>
+	</MkModal>
 </template>
 
 <script lang="ts" setup>
 import { shallowRef } from "vue";
-import Modal from "@/components/Modal.vue";
-import Button from "@/components/Button.vue";
+import MkModal from "@/components/MkModal.vue";
+import MkButton from "@/components/MkButton.vue";
 import { i18n } from "@/i18n";
 import * as os from "@/os";
 
-const modal = shallowRef<InstanceType<typeof Modal>>();
+const modal = shallowRef<InstanceType<typeof MkModal>>();
 const checkAnnouncements = () => {
 	modal.value.close();
 	location.href = "/announcements";
diff --git a/packages/client/src/components/Marquee.vue b/packages/client/src/components/MkMarquee.vue
similarity index 100%
rename from packages/client/src/components/Marquee.vue
rename to packages/client/src/components/MkMarquee.vue
diff --git a/packages/client/src/components/Media.vue b/packages/client/src/components/MkMedia.vue
similarity index 98%
rename from packages/client/src/components/Media.vue
rename to packages/client/src/components/MkMedia.vue
index d6af45f9a..315e3eec6 100644
--- a/packages/client/src/components/Media.vue
+++ b/packages/client/src/components/MkMedia.vue
@@ -92,7 +92,7 @@ import VuePlyr from "vue-plyr";
 import "vue-plyr/dist/vue-plyr.css";
 import type * as misskey from "iceshrimp-js";
 import { getStaticImageUrl } from "@/scripts/get-static-image-url";
-import ImgWithBlurhash from "@/components/ImgWithBlurhash.vue";
+import ImgWithBlurhash from "@/components/MkImgWithBlurhash.vue";
 import { defaultStore } from "@/store";
 import { i18n } from "@/i18n";
 import * as os from "@/os";
@@ -190,7 +190,6 @@ watch(
 		overflow: hidden;
 		top: 12px;
 		right: 12px;
-
 		> * {
 			background-color: var(--accentedBg);
 			-webkit-backdrop-filter: var(--blur, blur(15px));
@@ -212,7 +211,6 @@ watch(
 		background-size: contain;
 		background-repeat: no-repeat;
 		box-sizing: border-box;
-
 		&:focus-visible {
 			border: 2px solid var(--accent);
 		}
@@ -232,19 +230,16 @@ watch(
 			pointer-events: none;
 		}
 	}
-
 	:deep(.plyr__controls) {
 		contain: strict;
 		height: 24px;
 		box-sizing: content-box;
 	}
-
 	:deep(.plyr__volume) {
 		display: flex;
 		min-width: max-content;
 		width: 110px;
 		transition: width 0.2s cubic-bezier(0, 0, 0, 1);
-
 		[data-plyr="volume"] {
 			width: 0;
 			flex-grow: 1;
@@ -252,11 +247,9 @@ watch(
 				margin 0.3s,
 				opacity 0.2s 0.2s;
 		}
-
 		&:not(:hover):not(:focus-within) {
 			width: 0px;
 			transition: width 0.2s;
-
 			[data-plyr="volume"] {
 				margin-inline: 0px;
 				opacity: 0;
@@ -266,11 +259,9 @@ watch(
 			}
 		}
 	}
-
 	&.max-width_350px {
 		:deep(.plyr:not(:fullscreen)) {
 			min-width: unset !important;
-
 			.plyr__control--overlaid,
 			.plyr__progress__container,
 			.plyr__volume,
@@ -278,7 +269,6 @@ watch(
 				display: none;
 			}
 		}
-
 		:deep(.plyr__time) {
 			white-space: nowrap;
 			overflow: hidden;
diff --git a/packages/client/src/components/MediaBanner.vue b/packages/client/src/components/MkMediaBanner.vue
similarity index 100%
rename from packages/client/src/components/MediaBanner.vue
rename to packages/client/src/components/MkMediaBanner.vue
diff --git a/packages/client/src/components/MediaCaption.vue b/packages/client/src/components/MkMediaCaption.vue
similarity index 93%
rename from packages/client/src/components/MediaCaption.vue
rename to packages/client/src/components/MkMediaCaption.vue
index 5c4a73ede..b44fa0d52 100644
--- a/packages/client/src/components/MediaCaption.vue
+++ b/packages/client/src/components/MkMediaCaption.vue
@@ -1,5 +1,5 @@
 <template>
-	<Modal ref="modal" @click="done(true)" @closed="$emit('closed')">
+	<MkModal ref="modal" @click="done(true)" @closed="$emit('closed')">
 		<div class="container">
 			<div class="fullwidth top-caption">
 				<div class="mk-dialog">
@@ -27,19 +27,19 @@
 						"
 						class="buttons"
 					>
-						<Button
+						<MkButton
 							inline
 							primary
 							:disabled="remainingLength < 0"
 							@click="ok"
-							>{{ i18n.ts.ok }}</Button
+							>{{ i18n.ts.ok }}</MkButton
 						>
-						<Button inline @click="caption">{{
+						<MkButton inline @click="caption">{{
 							i18n.ts.caption
-						}}</Button>
-						<Button inline @click="cancel">{{
+						}}</MkButton>
+						<MkButton inline @click="cancel">{{
 							i18n.ts.cancel
-						}}</Button>
+						}}</MkButton>
 					</div>
 				</div>
 			</div>
@@ -62,7 +62,7 @@
 				</footer>
 			</div>
 		</div>
-	</Modal>
+	</MkModal>
 </template>
 
 <script lang="ts">
@@ -70,8 +70,8 @@ import { defineComponent } from "vue";
 import insertTextAtCursor from "insert-text-at-cursor";
 import { length } from "stringz";
 import * as os from "@/os";
-import Modal from "@/components/Modal.vue";
-import Button from "@/components/Button.vue";
+import MkModal from "@/components/MkModal.vue";
+import MkButton from "@/components/MkButton.vue";
 import bytes from "@/filters/bytes";
 import number from "@/filters/number";
 import { i18n } from "@/i18n";
@@ -79,8 +79,8 @@ import { instance } from "@/instance";
 
 export default defineComponent({
 	components: {
-		Modal,
-		Button,
+		MkModal,
+		MkButton,
 	},
 
 	props: {
@@ -210,22 +210,18 @@ export default defineComponent({
 	left: 0;
 	top: 0;
 }
-
 @media (max-width: 850px) {
 	.container {
 		flex-direction: column;
 	}
-
 	.top-caption {
 		padding-bottom: 8px;
 	}
 }
-
 .fullwidth {
 	width: 100%;
 	margin: auto;
 }
-
 .mk-dialog {
 	position: relative;
 	padding: 32px;
@@ -286,7 +282,6 @@ export default defineComponent({
 		}
 	}
 }
-
 .hdrwpsaf {
 	display: flex;
 	flex-direction: column;
diff --git a/packages/client/src/components/MediaList.vue b/packages/client/src/components/MkMediaList.vue
similarity index 98%
rename from packages/client/src/components/MediaList.vue
rename to packages/client/src/components/MkMediaList.vue
index 8143027f5..0c9a7a321 100644
--- a/packages/client/src/components/MediaList.vue
+++ b/packages/client/src/components/MkMediaList.vue
@@ -33,8 +33,8 @@ import * as misskey from "iceshrimp-js";
 import PhotoSwipeLightbox from "photoswipe/lightbox";
 import PhotoSwipe from "photoswipe";
 import "photoswipe/style.css";
-import XBanner from "@/components/MediaBanner.vue";
-import XMedia from "@/components/Media.vue";
+import XBanner from "@/components/MkMediaBanner.vue";
+import XMedia from "@/components/MkMedia.vue";
 import * as os from "@/os";
 import { FILE_TYPE_BROWSERSAFE } from "@/const";
 import { defaultStore } from "@/store";
@@ -198,7 +198,6 @@ const previewableCount = props.mediaList.filter((media) =>
 
 		&[data-count] {
 			padding-top: 56.25%; // 16:9;
-
 			> div {
 				position: absolute;
 				inset: 0;
@@ -279,7 +278,6 @@ const previewableCount = props.mediaList.filter((media) =>
 	//z-index: v-bind(pswpZIndex);
 	z-index: 2000000;
 }
-
 .pwsp__alt-text-container {
 	display: flex;
 	flex-direction: row;
diff --git a/packages/client/src/components/Mention.vue b/packages/client/src/components/MkMention.vue
similarity index 99%
rename from packages/client/src/components/Mention.vue
rename to packages/client/src/components/MkMention.vue
index 61944c068..59e0fb92e 100644
--- a/packages/client/src/components/Mention.vue
+++ b/packages/client/src/components/MkMention.vue
@@ -1,5 +1,5 @@
 <template>
-	<A
+	<MkA
 		v-if="url.startsWith('/')"
 		v-user-preview="canonical"
 		class="mention"
@@ -16,7 +16,7 @@
 				>@{{ toUnicode(host) }}</span
 			>
 		</span>
-	</A>
+	</MkA>
 	<a
 		v-else
 		class="mention"
diff --git a/packages/client/src/components/MenuChild.vue b/packages/client/src/components/MkMenu.child.vue
similarity index 96%
rename from packages/client/src/components/MenuChild.vue
rename to packages/client/src/components/MkMenu.child.vue
index 64c20ce1c..83ae6b5a1 100644
--- a/packages/client/src/components/MenuChild.vue
+++ b/packages/client/src/components/MkMenu.child.vue
@@ -1,6 +1,6 @@
 <template>
 	<div ref="el" class="sfhdhdhr" tabindex="-1">
-		<Menu
+		<MkMenu
 			ref="menu"
 			:items="items"
 			:align="align"
@@ -21,7 +21,7 @@ import {
 	ref,
 	watch,
 } from "vue";
-import Menu from "./Menu.vue";
+import MkMenu from "./MkMenu.vue";
 import { MenuItem } from "@/types/menu";
 
 const props = defineProps<{
diff --git a/packages/client/src/components/Menu.vue b/packages/client/src/components/MkMenu.vue
similarity index 95%
rename from packages/client/src/components/Menu.vue
rename to packages/client/src/components/MkMenu.vue
index 8b2f74fd2..a7a593114 100644
--- a/packages/client/src/components/Menu.vue
+++ b/packages/client/src/components/MkMenu.vue
@@ -28,11 +28,9 @@
 						v-else-if="item.type === 'pending'"
 						class="pending item"
 					>
-						<span>
-							<Ellipsis />
-						</span>
+						<span><MkEllipsis /></span>
 					</span>
-					<A
+					<MkA
 						v-else-if="item.type === 'link'"
 						:to="item.to"
 						class="_button item"
@@ -45,7 +43,7 @@
 							class="ph-fw ph-lg"
 							:class="item.icon"
 						></i>
-						<Avatar
+						<MkAvatar
 							v-if="item.avatar"
 							:user="item.avatar"
 							class="avatar"
@@ -62,7 +60,7 @@
 							}"
 							><i class="ph-circle ph-fill"></i
 						></span>
-					</A>
+					</MkA>
 					<a
 						v-else-if="item.type === 'a'"
 						:href="item.href"
@@ -99,8 +97,11 @@
 						@mouseenter.passive="onItemMouseEnter(item)"
 						@mouseleave.passive="onItemMouseLeave(item)"
 					>
-						<Avatar :user="item.user" class="avatar" disableLink />
-						<UserName :user="item.user" />
+						<MkAvatar
+							:user="item.user"
+							class="avatar"
+							disableLink
+						/><MkUserName :user="item.user" />
 						<span
 							v-if="item.indicate"
 							class="indicator"
@@ -140,9 +141,11 @@
 							item.text
 						}}</span>
 						<i
-							class="ph-caret-right ph-bold ph-lg ph-fw ph-lg"
-							style="margin-left: auto; margin-right: unset"
-						></i>
+								class="ph-caret-right ph-bold ph-lg ph-fw ph-lg"
+								style="margin-left: auto;
+											 margin-right: unset;"
+							></i
+						>
 					</button>
 					<button
 						v-else-if="!item.hidden"
@@ -162,7 +165,7 @@
 							class="ph-fw ph-lg"
 							:class="item.icon"
 						></i>
-						<Avatar
+						<MkAvatar
 							v-if="item.avatar"
 							:user="item.avatar"
 							class="avatar"
@@ -214,13 +217,13 @@ import {
 	watch,
 } from "vue";
 import { focusPrev, focusNext } from "@/scripts/focus";
-import FormSwitch from "@/components/form/Switch.vue";
+import FormSwitch from "@/components/form/switch.vue";
 import { MenuItem, InnerMenuItem, MenuPending, MenuAction } from "@/types/menu";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { FocusTrap } from "focus-trap-vue";
 
-const XChild = defineAsyncComponent(() => import("./MenuChild.vue"));
+const XChild = defineAsyncComponent(() => import("./MkMenu.child.vue"));
 const focusTrap = ref();
 
 const props = defineProps<{
@@ -389,7 +392,6 @@ onBeforeUnmount(() => {
 				background: var(--accentedBg);
 			}
 		}
-
 		&:focus-visible:before {
 			outline: auto;
 		}
@@ -532,7 +534,7 @@ onBeforeUnmount(() => {
 				margin-right: 14px;
 				width: 24px;
 			}
-
+			
 			> .avatar {
 				height: 24px;
 			}
diff --git a/packages/client/src/components/MiniChart.vue b/packages/client/src/components/MkMiniChart.vue
similarity index 100%
rename from packages/client/src/components/MiniChart.vue
rename to packages/client/src/components/MkMiniChart.vue
diff --git a/packages/client/src/components/Modal.vue b/packages/client/src/components/MkModal.vue
similarity index 100%
rename from packages/client/src/components/Modal.vue
rename to packages/client/src/components/MkModal.vue
diff --git a/packages/client/src/components/ModalPageWindow.vue b/packages/client/src/components/MkModalPageWindow.vue
similarity index 93%
rename from packages/client/src/components/ModalPageWindow.vue
rename to packages/client/src/components/MkModalPageWindow.vue
index 9aea86f77..a29571b4e 100644
--- a/packages/client/src/components/ModalPageWindow.vue
+++ b/packages/client/src/components/MkModalPageWindow.vue
@@ -1,5 +1,5 @@
 <template>
-	<Modal ref="modal" @click="$emit('click')" @closed="$emit('closed')">
+	<MkModal ref="modal" @click="$emit('click')" @closed="$emit('closed')">
 		<div
 			ref="rootEl"
 			class="hrmcaedk _narrow_"
@@ -35,26 +35,25 @@
 				</button>
 			</div>
 			<div class="body">
-				<StickyContainer>
-					<template #header>
-						<PageHeader
+				<MkStickyContainer>
+					<template #header
+						><MkPageHeader
 							v-if="
 								pageMetadata?.value &&
 								!pageMetadata?.value.hideHeader
 							"
 							:info="pageMetadata?.value"
-						/>
-					</template>
+					/></template>
 					<RouterView :router="router" />
-				</StickyContainer>
+				</MkStickyContainer>
 			</div>
 		</div>
-	</Modal>
+	</MkModal>
 </template>
 
 <script lang="ts" setup>
 import { ComputedRef, provide } from "vue";
-import Modal from "@/components/Modal.vue";
+import MkModal from "@/components/MkModal.vue";
 import { popout as _popout } from "@/scripts/popout";
 import copyToClipboard from "@/scripts/copy-to-clipboard";
 import { url } from "@/config";
@@ -83,7 +82,7 @@ router.addListener("push", (ctx) => {});
 
 let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
 let rootEl = $ref();
-let modal = $ref<InstanceType<typeof Modal>>();
+let modal = $ref<InstanceType<typeof MkModal>>();
 let path = $ref(props.initialPath);
 let width = $ref(860);
 let height = $ref(660);
diff --git a/packages/client/src/components/ModalWindow.vue b/packages/client/src/components/MkModalWindow.vue
similarity index 96%
rename from packages/client/src/components/ModalWindow.vue
rename to packages/client/src/components/MkModalWindow.vue
index 2a5d8a76e..734f6a17c 100644
--- a/packages/client/src/components/ModalWindow.vue
+++ b/packages/client/src/components/MkModalWindow.vue
@@ -1,5 +1,5 @@
 <template>
-	<Modal
+	<MkModal
 		ref="modal"
 		:prefer-type="'dialog'"
 		@click="onBgClick"
@@ -58,12 +58,12 @@
 				</div>
 			</div>
 		</FocusTrap>
-	</Modal>
+	</MkModal>
 </template>
 
 <script lang="ts" setup>
 import { FocusTrap } from "focus-trap-vue";
-import Modal from "./Modal.vue";
+import MkModal from "./MkModal.vue";
 import { i18n } from "@/i18n";
 
 const props = withDefaults(
@@ -90,7 +90,7 @@ const emit = defineEmits<{
 	(event: "ok"): void;
 }>();
 
-let modal = $shallowRef<InstanceType<typeof Modal>>();
+let modal = $shallowRef<InstanceType<typeof MkModal>>();
 let rootEl = $shallowRef<HTMLElement>();
 let headerEl = $shallowRef<HTMLElement>();
 
diff --git a/packages/client/src/components/Moved.vue b/packages/client/src/components/MkMoved.vue
similarity index 83%
rename from packages/client/src/components/Moved.vue
rename to packages/client/src/components/MkMoved.vue
index 1de7903f1..b2f8095a2 100644
--- a/packages/client/src/components/Moved.vue
+++ b/packages/client/src/components/MkMoved.vue
@@ -5,12 +5,12 @@
 			style="margin-right: 8px"
 		/>
 		{{ i18n.ts.accountMoved }}
-		<Mention class="link" :username="acct" :host="host" />
+		<MkMention class="link" :username="acct" :host="host" />
 	</div>
 </template>
 
 <script lang="ts" setup>
-import Mention from "./Mention.vue";
+import MkMention from "./MkMention.vue";
 import { i18n } from "@/i18n";
 
 defineProps<{
diff --git a/packages/client/src/components/Note.vue b/packages/client/src/components/MkNote.vue
similarity index 93%
rename from packages/client/src/components/Note.vue
rename to packages/client/src/components/MkNote.vue
index 2dc80a7df..d4d1a4a8b 100644
--- a/packages/client/src/components/Note.vue
+++ b/packages/client/src/components/MkNote.vue
@@ -11,7 +11,7 @@
 		:class="{ renote: isRenote }"
 		:id="appearNote.id"
 	>
-		<NoteSub
+		<MkNoteSub
 			v-if="appearNote.reply && !detailedView && !collapsedReply"
 			:note="appearNote.reply"
 			:forceExpandCw="props.forceExpandCw"
@@ -46,14 +46,14 @@
 				<i class="ph-repeat ph-bold ph-lg"></i>
 				<I18n :src="i18n.ts.renotedBy" tag="span">
 					<template #user>
-						<A
+						<MkA
 							v-user-preview="note.userId"
 							class="name"
 							:to="userPage(note.user)"
 							@click.stop
 						>
-							<UserName :user="note.user" />
-						</A>
+							<MkUserName :user="note.user" />
+						</MkA>
 					</template>
 				</I18n>
 				<div class="info">
@@ -66,17 +66,17 @@
 							v-if="isMyRenote"
 							class="ph-dots-three-outline ph-bold ph-lg dropdownIcon"
 						></i>
-						<Time :time="note.createdAt" />
+						<MkTime :time="note.createdAt" />
 					</button>
-					<Visibility :note="note" />
+					<MkVisibility :note="note" />
 				</div>
 			</div>
 			<div v-if="collapsedReply && appearNote.reply" class="info">
-				<Avatar class="avatar" :user="appearNote.reply.user" />
-				<UserName
+				<MkAvatar class="avatar" :user="appearNote.reply.user" />
+				<MkUserName
 					class="username"
 					:user="appearNote.reply.user"
-				></UserName>
+				></MkUserName>
 				<Mfm
 					class="summary"
 					:text="getNoteSummary(appearNote.reply)"
@@ -96,11 +96,11 @@
 		>
 			<div class="main">
 				<div class="header-container">
-					<Avatar class="avatar" :user="appearNote.user" />
+					<MkAvatar class="avatar" :user="appearNote.user" />
 					<XNoteHeader class="header" :note="appearNote" />
 				</div>
 				<div class="body">
-					<SubNoteContent
+					<MkSubNoteContent
 						class="text"
 						:note="appearNote"
 						:detailed="true"
@@ -110,9 +110,9 @@
 						@push="(e) => router.push(notePage(e))"
 						@focusfooter="footerEl.focus()"
 						@expanded="(e) => setPostExpanded(e)"
-					></SubNoteContent>
+					></MkSubNoteContent>
 					<div v-if="translating || translation" class="translation">
-						<Loading v-if="translating" mini />
+						<MkLoading v-if="translating" mini />
 						<div v-else class="translated">
 							<b
 								>{{
@@ -134,20 +134,20 @@
 					v-if="detailedView || (appearNote.channel && !inChannel)"
 					class="info"
 				>
-					<A
+					<MkA
 						v-if="detailedView"
 						class="created-at"
 						:to="notePage(appearNote)"
 					>
-						<Time :time="appearNote.createdAt" mode="absolute" />
-					</A>
-					<A
+						<MkTime :time="appearNote.createdAt" mode="absolute" />
+					</MkA>
+					<MkA
 						v-if="appearNote.channel && !inChannel"
 						class="channel"
 						:to="`/channels/${appearNote.channel.id}`"
 						@click.stop
 						><i class="ph-television ph-bold"></i>
-						{{ appearNote.channel.name }}</A
+						{{ appearNote.channel.name }}</MkA
 					>
 				</div>
 				<footer ref="footerEl" class="footer" tabindex="-1">
@@ -241,13 +241,13 @@
 	>
 		<I18n :src="softMuteReasonI18nSrc(muted.what)" tag="small">
 			<template #name>
-				<A
+				<MkA
 					v-user-preview="note.userId"
 					class="name"
 					:to="userPage(note.user)"
 				>
-					<UserName :user="note.user" />
-				</A>
+					<MkUserName :user="note.user" />
+				</MkA>
 			</template>
 			<template #reason>
 				<b class="_blur_text">{{ muted.matched.join(", ") }}</b>
@@ -261,20 +261,20 @@ import { computed, inject, onMounted, onUnmounted, reactive, ref } from "vue";
 import * as mfm from "mfm-js";
 import type { Ref } from "vue";
 import type * as misskey from "iceshrimp-js";
-import NoteSub from "@/components/NoteSub.vue";
-import SubNoteContent from "./SubNoteContent.vue";
-import XNoteHeader from "@/components/NoteHeader.vue";
-import XNoteSimple from "@/components/NoteSimple.vue";
-import XMediaList from "@/components/MediaList.vue";
-import XCwButton from "@/components/CwButton.vue";
-import XPoll from "@/components/Poll.vue";
-import XRenoteButton from "@/components/RenoteButton.vue";
-import XReactionsViewer from "@/components/ReactionsViewer.vue";
-import XStarButton from "@/components/StarButton.vue";
-import XStarButtonNoEmoji from "@/components/StarButtonNoEmoji.vue";
-import XQuoteButton from "@/components/QuoteButton.vue";
-import UrlPreview from "@/components/UrlPreview.vue";
-import Visibility from "@/components/Visibility.vue";
+import MkNoteSub from "@/components/MkNoteSub.vue";
+import MkSubNoteContent from "./MkSubNoteContent.vue";
+import XNoteHeader from "@/components/MkNoteHeader.vue";
+import XNoteSimple from "@/components/MkNoteSimple.vue";
+import XMediaList from "@/components/MkMediaList.vue";
+import XCwButton from "@/components/MkCwButton.vue";
+import XPoll from "@/components/MkPoll.vue";
+import XRenoteButton from "@/components/MkRenoteButton.vue";
+import XReactionsViewer from "@/components/MkReactionsViewer.vue";
+import XStarButton from "@/components/MkStarButton.vue";
+import XStarButtonNoEmoji from "@/components/MkStarButtonNoEmoji.vue";
+import XQuoteButton from "@/components/MkQuoteButton.vue";
+import MkUrlPreview from "@/components/MkUrlPreview.vue";
+import MkVisibility from "@/components/MkVisibility.vue";
 import copyToClipboard from "@/scripts/copy-to-clipboard";
 import { url } from "@/config";
 import { pleaseLogin } from "@/scripts/please-login";
@@ -668,18 +668,15 @@ defineExpose({
 		padding: 0 32px 0 32px;
 		display: flex;
 		z-index: 1;
-
 		&:first-child {
 			margin-top: 20px;
 		}
-
 		> :not(.line) {
 			width: 0;
 			flex-grow: 1;
 			position: relative;
 			line-height: 28px;
 		}
-
 		> .line {
 			position: relative;
 			z-index: 2;
@@ -694,7 +691,6 @@ defineExpose({
 		> div > i {
 			margin-left: -0.5px;
 		}
-
 		> .info {
 			display: flex;
 			align-items: center;
@@ -744,7 +740,6 @@ defineExpose({
 					color: inherit;
 					display: inline-flex;
 					align-items: center;
-
 					> .dropdownIcon {
 						margin-right: 4px;
 					}
@@ -755,7 +750,6 @@ defineExpose({
 		&.collapsedReply {
 			.line {
 				opacity: 0.25;
-
 				&::after {
 					content: "";
 					position: absolute;
@@ -768,12 +762,10 @@ defineExpose({
 					height: calc(50% + 5px);
 				}
 			}
-
 			.info {
 				color: var(--fgTransparentWeak);
 				transition: color 0.2s;
 			}
-
 			.avatar {
 				width: 1.2em;
 				height: 1.2em;
@@ -782,17 +774,14 @@ defineExpose({
 				margin-right: 0.4em;
 				background: var(--panelHighlight);
 			}
-
 			.username {
 				font-weight: 700;
 				flex-shrink: 0;
 				max-width: 30%;
-
 				&::after {
 					content: ": ";
 				}
 			}
-
 			&:hover,
 			&:focus-within {
 				.info {
@@ -822,7 +811,6 @@ defineExpose({
 			display: flex;
 			position: relative;
 			z-index: 2;
-
 			> .avatar {
 				flex-shrink: 0;
 				display: block;
@@ -833,36 +821,30 @@ defineExpose({
 				top: 0;
 				left: 0;
 			}
-
 			> .header {
 				width: 0;
 				flex-grow: 1;
 			}
 		}
-
 		> .main {
 			flex: 1;
 			min-width: 0;
 
 			> .body {
 				margin-top: 0.7em;
-
 				> .translation {
 					border: solid 0.5px var(--divider);
 					border-radius: var(--radius);
 					padding: 12px;
 					margin-top: 8px;
 				}
-
 				> .renote {
 					padding-top: 8px;
-
 					> * {
 						padding: 16px;
 						border: solid 1px var(--renote);
 						border-radius: 8px;
 						transition: background 0.2s;
-
 						&:hover,
 						&:focus-within {
 							background-color: var(--panelHighlight);
@@ -870,7 +852,6 @@ defineExpose({
 					}
 				}
 			}
-
 			> .info {
 				display: flex;
 				justify-content: space-between;
@@ -880,31 +861,26 @@ defineExpose({
 				opacity: 0.7;
 				font-size: 0.9em;
 			}
-
 			> .footer {
 				position: relative;
 				z-index: 2;
 				display: flex;
 				flex-wrap: wrap;
 				margin-top: 0.4em;
-
 				> :deep(.button) {
 					position: relative;
 					margin: 0;
 					padding: 8px;
 					opacity: 0.7;
-
 					&:disabled {
 						opacity: 0.5 !important;
 					}
-
 					flex-grow: 1;
 					max-width: 3.5em;
 					width: max-content;
 					min-width: max-content;
 					height: auto;
 					transition: opacity 0.2s;
-
 					&::before {
 						content: "";
 						position: absolute;
@@ -914,21 +890,17 @@ defineExpose({
 						z-index: -1;
 						transition: background 0.2s;
 					}
-
 					&:first-of-type {
 						margin-left: -0.5em;
-
 						&::before {
 							border-radius: 100px 0 0 100px;
 						}
 					}
-
 					&:last-of-type {
 						&::before {
 							border-radius: 0 100px 100px 0;
 						}
 					}
-
 					&:hover {
 						color: var(--fgHighlighted);
 					}
@@ -959,32 +931,25 @@ defineExpose({
 		font-size: 0.975em;
 		--avatarSize: 46px;
 		padding-top: 6px;
-
 		> .note-context {
 			padding-inline: 16px;
 			margin-top: 8px;
-
 			> :not(.line) {
 				margin-top: 0px;
 			}
-
 			> .line {
 				margin-right: 10px;
-
 				&::before {
 					margin-top: 8px;
 				}
 			}
 		}
-
 		> .article {
 			padding: 18px 16px 8px;
-
 			&:first-child,
 			&:nth-child(2) {
 				padding-top: 104px;
 			}
-
 			> .main > .header-container > .avatar {
 				margin-right: 10px;
 				// top: calc(14px + var(--stickyTop, 0px));
@@ -1006,7 +971,6 @@ defineExpose({
 	._blur_text {
 		pointer-events: auto;
 	}
-
 	&:active ._blur_text {
 		filter: blur(0px);
 	}
diff --git a/packages/client/src/components/NoteDetailed.vue b/packages/client/src/components/MkNoteDetailed.vue
similarity index 91%
rename from packages/client/src/components/NoteDetailed.vue
rename to packages/client/src/components/MkNoteDetailed.vue
index b600e66ca..d3cbf19a1 100644
--- a/packages/client/src/components/NoteDetailed.vue
+++ b/packages/client/src/components/MkNoteDetailed.vue
@@ -9,7 +9,7 @@
 		:tabindex="!isDeleted ? '-1' : null"
 		:class="{ renote: isRenote }"
 	>
-		<NoteSub
+		<MkNoteSub
 			v-if="conversation"
 			v-for="note in conversation"
 			:key="note.id"
@@ -18,8 +18,8 @@
 			:detailedView="true"
 			:forceExpandCw="props.expandAllCws"
 		/>
-		<Loading v-else-if="note.reply" mini />
-		<NoteSub
+		<MkLoading v-else-if="note.reply" mini />
+		<MkNoteSub
 			v-if="note.reply"
 			:note="note.reply"
 			class="reply-to"
@@ -27,16 +27,16 @@
 			:forceExpandCw="props.expandAllCws"
 		/>
 
-		<Note
+		<MkNote
 			ref="noteEl"
 			@contextmenu.stop="onContextmenu"
 			tabindex="-1"
 			:note="note"
 			detailedView
 			:forceExpandCw="props.expandAllCws"
-		></Note>
+		></MkNote>
 
-		<Tab v-model="tab" :style="'underline'" @update:modelValue="loadTab">
+		<MkTab v-model="tab" :style="'underline'" @update:modelValue="loadTab">
 			<option value="replies">
 				<!-- <i class="ph-arrow-u-up-left ph-bold ph-lg"></i> -->
 				<span v-if="note.repliesCount > 0" class="count">{{
@@ -64,9 +64,9 @@
 				<span class="count">{{ clips.length }}</span>
 				{{ i18n.ts.clips }}
 			</option>
-		</Tab>
+		</MkTab>
 
-		<NoteSub
+		<MkNoteSub
 			v-if="directReplies && tab === 'replies'"
 			v-for="note in directReplies"
 			:key="note.id"
@@ -77,9 +77,9 @@
 			:parentId="note.id"
 			:forceExpandCw="props.expandAllCws"
 		/>
-		<Loading v-else-if="tab === 'replies' && note.repliesCount > 0" />
+		<MkLoading v-else-if="tab === 'replies' && note.repliesCount > 0" />
 
-		<NoteSub
+		<MkNoteSub
 			v-if="directQuotes && tab === 'quotes'"
 			v-for="note in directQuotes"
 			:key="note.id"
@@ -90,26 +90,26 @@
 			:parentId="note.id"
 			:forceExpandCw="props.expandAllCws"
 		/>
-		<Loading v-else-if="tab === 'quotes' && directQuotes.length > 0" />
+		<MkLoading v-else-if="tab === 'quotes' && directQuotes.length > 0" />
 
-		<!-- <Pagination
+		<!-- <MkPagination
 			v-if="tab === 'renotes'"
 			v-slot="{ items }"
 			ref="pagingComponent"
 			:pagination="pagination"
 		> -->
-		<UserCardMini
+		<MkUserCardMini
 			v-if="tab === 'renotes' && renotes"
 			v-for="item in renotes"
 			:key="item.user.id"
 			:user="item.user"
 			:with-chart="false"
 		/>
-		<!-- </Pagination> -->
-		<Loading v-else-if="tab === 'renotes' && note.renoteCount > 0" />
+		<!-- </MkPagination> -->
+		<MkLoading v-else-if="tab === 'renotes' && note.renoteCount > 0" />
 
 		<div v-if="tab === 'clips' && clips.length > 0" class="_content clips">
-			<A
+			<MkA
 				v-for="item in clips"
 				:key="item.id"
 				:to="`/clips/${item.id}`"
@@ -120,32 +120,32 @@
 					{{ item.description }}
 				</div>
 				<div class="user">
-					<Avatar
+					<MkAvatar
 						:user="item.user"
 						class="avatar"
 						:show-indicator="true"
 					/>
-					<UserName :user="item.user" :nowrap="false" />
+					<MkUserName :user="item.user" :nowrap="false" />
 				</div>
-			</A>
+			</MkA>
 		</div>
-		<Loading v-else-if="tab === 'clips' && clips.length > 0" />
+		<MkLoading v-else-if="tab === 'clips' && clips.length > 0" />
 
-		<ReactedUsers
+		<MkReactedUsers
 			v-if="tab === 'reactions' && reactionsCount > 0"
 			:note-id="note.id"
-		></ReactedUsers>
+		></MkReactedUsers>
 	</div>
 	<div v-else class="_panel muted" @click="muted.muted = false">
 		<I18n :src="softMuteReasonI18nSrc(muted.what)" tag="small">
 			<template #name>
-				<A
+				<MkA
 					v-user-preview="note.userId"
 					class="name"
 					:to="userPage(note.user)"
 				>
-					<UserName :user="note.user" />
-				</A>
+					<MkUserName :user="note.user" />
+				</MkA>
 			</template>
 			<template #reason>
 				<b class="_blur_text">{{ muted.matched.join(", ") }}</b>
@@ -165,14 +165,14 @@ import {
 	ref,
 } from "vue";
 import * as misskey from "iceshrimp-js";
-import Tab from "@/components/Tab.vue";
-import Note from "@/components/Note.vue";
-import NoteSub from "@/components/NoteSub.vue";
-import XStarButton from "@/components/StarButton.vue";
-import XRenoteButton from "@/components/RenoteButton.vue";
-import Pagination from "@/components/Pagination.vue";
-import UserCardMini from "@/components/UserCardMini.vue";
-import ReactedUsers from "@/components/ReactedUsers.vue";
+import MkTab from "@/components/MkTab.vue";
+import MkNote from "@/components/MkNote.vue";
+import MkNoteSub from "@/components/MkNoteSub.vue";
+import XStarButton from "@/components/MkStarButton.vue";
+import XRenoteButton from "@/components/MkRenoteButton.vue";
+import MkPagination from "@/components/MkPagination.vue";
+import MkUserCardMini from "@/components/MkUserCardMini.vue";
+import MkReactedUsers from "@/components/MkReactedUsers.vue";
 import { pleaseLogin } from "@/scripts/please-login";
 import { getWordSoftMute } from "@/scripts/check-word-mute";
 import { userPage } from "@/filters/user";
@@ -386,7 +386,7 @@ os.api("notes/clips", {
 // 	limit: 10,
 // };
 
-// const pagingComponent = $ref<InstanceType<typeof Pagination>>();
+// const pagingComponent = $ref<InstanceType<typeof MkPagination>>();
 
 renotes = null;
 function loadTab() {
@@ -420,10 +420,7 @@ async function onNoteUpdated(noteData: NoteUpdatedEvent): Promise<void> {
 			if (id === note.id) {
 				isDeleted.value = true;
 			} else {
-				replies.value.splice(
-					replies.value.findIndex((p) => p.id == id),
-					1,
-				);
+				replies.value.splice(replies.value.findIndex(p => p.id == id), 1);
 			}
 			break;
 	}
@@ -494,17 +491,14 @@ onUnmounted(() => {
 		overflow: clip;
 		outline: none;
 		scroll-margin-top: calc(var(--stickyTop) + 20vh);
-
 		&:not(:last-child) {
 			border-bottom: 1px solid var(--divider);
 			margin-bottom: 4px;
 		}
-
 		.article {
 			cursor: unset;
 			padding-bottom: 0;
 		}
-
 		&:first-child {
 			padding-top: 28px;
 		}
@@ -513,19 +507,16 @@ onUnmounted(() => {
 	> :deep(.chips) {
 		padding-block: 6px 12px;
 		padding-left: 32px;
-
 		&:last-child {
 			margin-bottom: 12px;
 		}
 	}
-
 	> :deep(.user-card-mini),
 	> :deep(.reacted-users > *) {
 		padding-inline: 32px;
 		border-top: 1px solid var(--divider);
 		border-radius: 0;
 	}
-
 	> :deep(.reacted-users > div) {
 		padding-block: 12px;
 	}
@@ -541,7 +532,6 @@ onUnmounted(() => {
 	.reply-to,
 	:deep(.more) {
 		position: relative;
-
 		&::before {
 			content: "";
 			position: absolute;
@@ -555,25 +545,20 @@ onUnmounted(() => {
 				background 0.2s;
 			z-index: -1;
 		}
-
 		&.reply-to {
 			&::before {
 				inset: 0px 8px;
 			}
-
 			&:not(.max-width_500px)::before {
 				bottom: 16px;
 			}
-
 			&:first-of-type::before {
 				top: 12px;
 			}
-
 			&.reply.max-width_500px:first-of-type::before {
 				top: 4px;
 			}
 		}
-
 		// &::after {
 		// 	content: "";
 		// 	position: absolute;
@@ -587,17 +572,14 @@ onUnmounted(() => {
 		&.more::before {
 			inset: 0 !important;
 		}
-
 		&:hover,
 		&:focus-within {
 			--panel: var(--panelHighlight);
-
 			&::before {
 				opacity: 1;
 				background: var(--panelHighlight) !important;
 			}
 		}
-
 		// @media (pointer: coarse) {
 		// 	&:has(.button:focus-within) {
 		// 		z-index: 2;
@@ -609,29 +591,23 @@ onUnmounted(() => {
 		// 	}
 		// }
 	}
-
 	:deep(.reply:target > .main),
 	:deep(.reply-to:target) {
 		z-index: 2;
-
 		&::before {
 			outline: auto;
 			opacity: 1;
 			background: none;
 		}
 	}
-
 	&.max-width_500px {
 		font-size: 0.975em;
-
 		> .reply-to {
 			&::before {
 				inset-inline: -24px;
 			}
-
 			&:first-child {
 				padding-top: 14px;
-
 				&::before {
 					top: -24px;
 				}
@@ -641,18 +617,15 @@ onUnmounted(() => {
 		> :deep(.note-container) {
 			padding: 12px 0 0 0;
 			font-size: 1.05rem;
-
 			> .header > .body {
 				padding-left: 10px;
 			}
 		}
-
 		> .clips,
 		> :deep(.user-card-mini),
 		> :deep(.reacted-users > *) {
 			padding-inline: 16px !important;
 		}
-
 		> :deep(.underline) {
 			padding-left: 16px !important;
 		}
@@ -673,7 +646,6 @@ onUnmounted(() => {
 	// want to redesign at some point
 	padding: 24px 32px;
 	padding-top: 0;
-
 	> .item {
 		display: block;
 		padding: 16px;
@@ -681,7 +653,6 @@ onUnmounted(() => {
 		border: 1px solid var(--divider);
 		margin-bottom: var(--margin);
 		transition: background 0.2s;
-
 		&:hover,
 		&:focus-within {
 			background: var(--panelHighlight);
diff --git a/packages/client/src/components/NoteHeader.vue b/packages/client/src/components/MkNoteHeader.vue
similarity index 87%
rename from packages/client/src/components/NoteHeader.vue
rename to packages/client/src/components/MkNoteHeader.vue
index 118598082..0d320b92a 100644
--- a/packages/client/src/components/NoteHeader.vue
+++ b/packages/client/src/components/MkNoteHeader.vue
@@ -2,24 +2,22 @@
 	<header class="kkwtjztg">
 		<div class="user-info">
 			<div>
-				<A
+				<MkA
 					v-user-preview="note.user.id"
 					class="name"
 					:to="userPage(note.user)"
 					@click.stop
 				>
-					<UserName :user="note.user" class="mkusername">
+					<MkUserName :user="note.user" class="mkusername">
 						<span v-if="note.user.isBot" class="is-bot">bot</span>
-					</UserName>
-				</A>
-				<div class="username">
-					<Acct :user="note.user" />
-				</div>
+					</MkUserName>
+				</MkA>
+				<div class="username"><MkAcct :user="note.user" /></div>
 			</div>
 			<div>
 				<div class="info">
-					<A class="created-at" :to="notePage(note)">
-						<Time :time="note.createdAt" />
+					<MkA class="created-at" :to="notePage(note)">
+						<MkTime :time="note.createdAt" />
 						<i
 							v-if="note.updatedAt"
 							v-tooltip.noDelay="
@@ -35,10 +33,10 @@
 							class="ph-pencil ph-bold"
 							style="margin-left: 0.4rem"
 						></i>
-					</A>
-					<Visibility :note="note" />
+					</MkA>
+					<MkVisibility :note="note" />
 				</div>
-				<InstanceTicker
+				<MkInstanceTicker
 					v-if="showTicker"
 					class="ticker"
 					:instance="note.user.instance"
@@ -52,8 +50,8 @@
 import {} from "vue";
 import type * as misskey from "iceshrimp-js";
 import { defaultStore, noteViewInterruptors } from "@/store";
-import Visibility from "@/components/Visibility.vue";
-import InstanceTicker from "@/components/InstanceTicker.vue";
+import MkVisibility from "@/components/MkVisibility.vue";
+import MkInstanceTicker from "@/components/MkInstanceTicker.vue";
 import { notePage } from "@/filters/note";
 import { userPage } from "@/filters/user";
 import { i18n } from "@/i18n";
@@ -80,20 +78,17 @@ const showTicker =
 	justify-self: flex-end;
 	border-radius: 100px;
 	font-size: 0.8em;
-
 	> .avatar {
 		width: 3.7em;
 		height: 3.7em;
 		margin-right: 1em;
 	}
-
 	> .user-info {
 		width: 0;
 		flex-grow: 1;
 		line-height: 1.5;
 		display: flex;
 		font-size: 1.2em;
-
 		> div {
 			&:first-child {
 				flex-grow: 1;
@@ -102,27 +97,22 @@ const showTicker =
 				text-overflow: ellipsis;
 				gap: 0.1em 0;
 			}
-
 			&:last-child {
 				max-width: 50%;
 				gap: 0.3em 0.5em;
 			}
-
 			.article > .main & {
 				display: flex;
 				flex-direction: column;
 				align-items: flex-start;
-
 				&:last-child {
 					align-items: flex-end;
 				}
-
 				> * {
 					max-width: 100%;
 				}
 			}
 		}
-
 		.name {
 			// flex: 1 1 0px;
 			display: inline;
@@ -162,7 +152,6 @@ const showTicker =
 			flex-shrink: 0;
 			margin-left: 0.5em;
 			font-size: 0.9em;
-
 			.created-at {
 				max-width: 100%;
 				overflow: hidden;
@@ -174,7 +163,6 @@ const showTicker =
 			display: inline-flex;
 			margin-left: 0.5em;
 			vertical-align: middle;
-
 			> .name {
 				display: none;
 			}
diff --git a/packages/client/src/components/NotePreview.vue b/packages/client/src/components/MkNotePreview.vue
similarity index 94%
rename from packages/client/src/components/NotePreview.vue
rename to packages/client/src/components/MkNotePreview.vue
index c31cb6624..607df89eb 100644
--- a/packages/client/src/components/NotePreview.vue
+++ b/packages/client/src/components/MkNotePreview.vue
@@ -1,9 +1,9 @@
 <template>
 	<div v-size="{ min: [350, 500] }" class="fefdfafb">
-		<Avatar class="avatar" :user="$i" disableLink />
+		<MkAvatar class="avatar" :user="$i" disableLink />
 		<div class="main">
 			<div class="header">
-				<UserName :user="$i" />
+				<MkUserName :user="$i" />
 			</div>
 			<div class="body">
 				<div class="content">
diff --git a/packages/client/src/components/NoteSimple.vue b/packages/client/src/components/MkNoteSimple.vue
similarity index 80%
rename from packages/client/src/components/NoteSimple.vue
rename to packages/client/src/components/MkNoteSimple.vue
index 9045cd85a..41ae29881 100644
--- a/packages/client/src/components/NoteSimple.vue
+++ b/packages/client/src/components/MkNoteSimple.vue
@@ -1,10 +1,10 @@
 <template>
 	<div v-size="{ min: [350, 500] }" class="yohlumlk">
-		<Avatar class="avatar" :user="note.user" />
+		<MkAvatar class="avatar" :user="note.user" />
 		<div class="main">
 			<XNoteHeader class="header" :note="note" :mini="true" />
 			<div class="body">
-				<SubNoteContent class="text" :note="note" />
+				<MkSubNoteContent class="text" :note="note" />
 			</div>
 		</div>
 	</div>
@@ -13,8 +13,8 @@
 <script lang="ts" setup>
 import {} from "vue";
 import * as misskey from "iceshrimp-js";
-import XNoteHeader from "@/components/NoteHeader.vue";
-import SubNoteContent from "@/components/SubNoteContent.vue";
+import XNoteHeader from "@/components/MkNoteHeader.vue";
+import MkSubNoteContent from "@/components/MkSubNoteContent.vue";
 
 const props = defineProps<{
 	note: misskey.entities.Note;
diff --git a/packages/client/src/components/NoteSub.vue b/packages/client/src/components/MkNoteSub.vue
similarity index 94%
rename from packages/client/src/components/NoteSub.vue
rename to packages/client/src/components/MkNoteSub.vue
index 19838f5fd..5bc7f3e5f 100644
--- a/packages/client/src/components/NoteSub.vue
+++ b/packages/client/src/components/MkNoteSub.vue
@@ -20,7 +20,7 @@
 			:style="{ cursor: expandOnNoteClick ? 'pointer' : '' }"
 		>
 			<div class="avatar-container">
-				<Avatar class="avatar" :user="appearNote.user" />
+				<MkAvatar class="avatar" :user="appearNote.user" />
 				<div
 					v-if="!conversation || replies.length > 0"
 					class="line"
@@ -29,7 +29,7 @@
 			<div class="body">
 				<XNoteHeader class="header" :note="note" :mini="true" />
 				<div class="body">
-					<SubNoteContent
+					<MkSubNoteContent
 						class="text"
 						:note="note"
 						:parentId="parentId"
@@ -39,7 +39,7 @@
 						@focusfooter="footerEl.focus()"
 					/>
 					<div v-if="translating || translation" class="translation">
-						<Loading v-if="translating" mini />
+						<MkLoading v-if="translating" mini />
 						<div v-else class="translated">
 							<b
 								>{{
@@ -137,7 +137,7 @@
 			</div>
 		</div>
 		<template v-if="conversation">
-			<NoteSub
+			<MkNoteSub
 				v-if="replyLevel < 11 && depth < 5"
 				v-for="reply in replies"
 				:key="reply.id"
@@ -153,23 +153,23 @@
 			/>
 			<div v-else-if="replies.length > 0" class="more">
 				<div class="line"></div>
-				<A class="text _link" :to="notePage(note)"
+				<MkA class="text _link" :to="notePage(note)"
 					>{{ i18n.ts.continueThread }}
 					<i class="ph-caret-double-right ph-bold ph-lg"></i
-				></A>
+				></MkA>
 			</div>
 		</template>
 	</article>
 	<div v-else class="muted" @click="muted.muted = false">
 		<I18n :src="softMuteReasonI18nSrc(muted.what)" tag="small">
 			<template #name>
-				<A
+				<MkA
 					v-user-preview="note.userId"
 					class="name"
 					:to="userPage(note.user)"
 				>
-					<UserName :user="note.user" />
-				</A>
+					<MkUserName :user="note.user" />
+				</MkA>
 			</template>
 			<template #reason>
 				<b class="_blur_text">{{ muted.matched.join(", ") }}</b>
@@ -182,13 +182,13 @@
 import { inject, ref } from "vue";
 import type { Ref } from "vue";
 import * as misskey from "iceshrimp-js";
-import XNoteHeader from "@/components/NoteHeader.vue";
-import SubNoteContent from "@/components/SubNoteContent.vue";
-import XReactionsViewer from "@/components/ReactionsViewer.vue";
-import XStarButton from "@/components/StarButton.vue";
-import XStarButtonNoEmoji from "@/components/StarButtonNoEmoji.vue";
-import XRenoteButton from "@/components/RenoteButton.vue";
-import XQuoteButton from "@/components/QuoteButton.vue";
+import XNoteHeader from "@/components/MkNoteHeader.vue";
+import MkSubNoteContent from "@/components/MkSubNoteContent.vue";
+import XReactionsViewer from "@/components/MkReactionsViewer.vue";
+import XStarButton from "@/components/MkStarButton.vue";
+import XStarButtonNoEmoji from "@/components/MkStarButtonNoEmoji.vue";
+import XRenoteButton from "@/components/MkRenoteButton.vue";
+import XQuoteButton from "@/components/MkQuoteButton.vue";
 import copyToClipboard from "@/scripts/copy-to-clipboard";
 import { url } from "@/config";
 import { pleaseLogin } from "@/scripts/please-login";
@@ -257,16 +257,14 @@ const isDeleted = ref(false);
 const muted = ref(getWordSoftMute(note, $i, defaultStore.state.mutedWords));
 const translation = ref(null);
 const translating = ref(false);
-const replies: misskey.entities.Note[] = $computed(
-	() =>
-		props.conversation
-			?.filter(
-				(item) =>
-					item.replyId === props.note.id ||
-					item.renoteId === props.note.id,
-			)
-			.reverse() ?? [],
-);
+const replies: misskey.entities.Note[] =
+	$computed(() => props.conversation
+      ?.filter(
+          (item) =>
+              item.replyId === props.note.id ||
+              item.renoteId === props.note.id,
+      )
+      .reverse() ?? []);
 const enableEmojiReactions = defaultStore.state.enableEmojiReactions;
 const expandOnNoteClick = defaultStore.state.expandOnNoteClick;
 
@@ -420,7 +418,6 @@ function noteClick(e) {
 .wrpstxzv {
 	padding: 16px 32px;
 	outline: none;
-
 	&.children {
 		padding: 10px 0 0 var(--indent);
 		padding-left: var(--indent) !important;
@@ -438,7 +435,6 @@ function noteClick(e) {
 		> .avatar-container {
 			margin-right: 8px;
 			z-index: 2;
-
 			> .avatar {
 				flex-shrink: 0;
 				display: block;
@@ -455,7 +451,6 @@ function noteClick(e) {
 			margin: 0 -200px;
 			padding: 0 200px;
 			overflow: clip;
-
 			@media (pointer: coarse) {
 				cursor: default;
 			}
@@ -473,7 +468,6 @@ function noteClick(e) {
 					margin-top: 8px;
 				}
 			}
-
 			> .footer {
 				position: relative;
 				z-index: 2;
@@ -485,18 +479,15 @@ function noteClick(e) {
 					margin: 0;
 					padding: 8px;
 					opacity: 0.7;
-
 					&:disabled {
 						opacity: 0.5 !important;
 					}
-
 					flex-grow: 1;
 					max-width: 3.5em;
 					width: max-content;
 					min-width: max-content;
 					height: auto;
 					transition: opacity 0.2s;
-
 					&::before {
 						content: "";
 						position: absolute;
@@ -506,21 +497,17 @@ function noteClick(e) {
 						z-index: -1;
 						transition: background 0.2s;
 					}
-
 					&:first-of-type {
 						margin-left: -0.5em;
-
 						&::before {
 							border-radius: 100px 0 0 100px;
 						}
 					}
-
 					&:last-of-type {
 						&::before {
 							border-radius: 0 100px 100px 0;
 						}
 					}
-
 					&:hover {
 						color: var(--fgHighlighted);
 					}
@@ -546,12 +533,10 @@ function noteClick(e) {
 	&.reply > .main {
 		margin-inline: -200px;
 		padding-inline: 200px;
-
 		&::before {
 			inset-inline: 176px !important;
 		}
 	}
-
 	&.reply,
 	&.reply-to {
 		> .main > .body {
@@ -564,7 +549,6 @@ function noteClick(e) {
 			border-radius: var(--radius);
 		}
 	}
-
 	&.reply-to {
 		> .main > .body {
 			margin-left: calc(0px - var(--avatarSize) - 38px);
@@ -573,22 +557,17 @@ function noteClick(e) {
 			padding-top: 16px;
 		}
 	}
-
 	&.reply {
 		--avatarSize: 38px;
-
 		.avatar-container {
 			margin-right: 8px !important;
 		}
 	}
-
 	> .reply,
 	> .more {
 		margin-top: 10px;
-
 		&.single {
 			padding: 0 !important;
-
 			> .line {
 				display: none;
 			}
@@ -599,7 +578,6 @@ function noteClick(e) {
 		display: flex;
 		padding-block: 10px;
 		font-weight: 600;
-
 		> .line {
 			position: relative;
 			z-index: 2;
@@ -607,27 +585,22 @@ function noteClick(e) {
 			margin-top: -10px !important;
 			margin-bottom: 10px !important;
 			margin-right: 10px !important;
-
 			&::before {
 				border-left-style: dashed !important;
 				border-bottom-left-radius: 100px !important;
 			}
 		}
-
 		i {
 			font-size: 1em !important;
 			vertical-align: middle !important;
 		}
-
 		a {
 			position: static;
-
 			&::before {
 				content: "";
 				position: absolute;
 				inset: 0;
 			}
-
 			&::after {
 				content: unset;
 			}
@@ -648,11 +621,9 @@ function noteClick(e) {
 	&.reply-to,
 	&.reply-to-more {
 		padding-bottom: 0;
-
 		&:first-child {
 			padding-top: 24px;
 		}
-
 		.line::before {
 			margin-bottom: -16px;
 		}
@@ -663,7 +634,6 @@ function noteClick(e) {
 	&.reply-to,
 	&.reply-to-more {
 		--indent: calc(var(--avatarSize) - 5px);
-
 		> .main {
 			> .avatar-container {
 				display: flex;
@@ -671,7 +641,6 @@ function noteClick(e) {
 				align-items: center;
 				margin-right: 14px;
 				width: var(--avatarSize);
-
 				> .avatar {
 					width: var(--avatarSize);
 					height: var(--avatarSize);
@@ -679,7 +648,6 @@ function noteClick(e) {
 				}
 			}
 		}
-
 		.line {
 			position: relative;
 			z-index: 2;
@@ -689,7 +657,6 @@ function noteClick(e) {
 			margin-bottom: -10px;
 			pointer-events: none;
 			opacity: 0.25;
-
 			&::before {
 				content: "";
 				position: absolute;
@@ -701,25 +668,21 @@ function noteClick(e) {
 			}
 		}
 	}
-
 	&.reply-to,
 	&.reply-to-more {
 		> .main > .avatar-container > .line {
 			margin-bottom: 0px !important;
 		}
 	}
-
 	&.single,
 	&.singleStart {
 		> .main > .avatar-container > .line {
 			margin-bottom: -10px !important;
 		}
 	}
-
 	.reply.children:not(:last-child) {
 		// Line that goes through multiple replies
 		position: relative;
-
 		> .line {
 			position: absolute;
 			top: 0;
@@ -727,18 +690,15 @@ function noteClick(e) {
 			bottom: 0;
 		}
 	}
-
 	// Reply line connectors
 	.reply.children:not(.single) {
 		position: relative;
-
 		> .line {
 			position: absolute;
 			z-index: 2;
 			left: 0;
 			top: 0;
 			opacity: 0.25;
-
 			&::after {
 				content: "";
 				position: absolute;
@@ -751,21 +711,17 @@ function noteClick(e) {
 				top: 8px;
 			}
 		}
-
 		&:not(:last-child) > .line::after {
 			mask: linear-gradient(to right, transparent 2px, black 2px);
 			-webkit-mask: linear-gradient(to right, transparent 2px, black 2px);
 		}
 	}
-
 	// End Reply Divider
 	.children > .main:last-child {
 		padding-bottom: 1em;
-
 		&::before {
 			bottom: 1em;
 		}
-
 		// &::after {
 		// 	content: "";
 		// 	border-top: 1px solid var(--dividerHovered);
@@ -775,27 +731,22 @@ function noteClick(e) {
 		// 	inset-inline: 0;
 		// }
 	}
-
 	&.firstColumn > .children:last-child > .main {
 		padding-bottom: 0 !important;
-
 		&::before {
 			bottom: 0 !important;
 		}
-
 		// &::after { content: unset }
 	}
 
 	&.max-width_500px {
 		padding: 14px 16px;
-
 		:not(.reply) > & {
 			.reply {
 				--avatarSize: 24px;
 				--indent: calc(var(--avatarSize) - 4px);
 			}
 		}
-
 		&.firstColumn {
 			> .main,
 			> .line,
@@ -803,12 +754,10 @@ function noteClick(e) {
 				--avatarSize: 35px;
 				--indent: 35px;
 			}
-
 			> .children:not(.single) {
 				padding-left: 28px !important;
 			}
 		}
-
 		&.reply-to {
 			--avatarSize: 46px;
 			padding: 14px 16px;
@@ -816,11 +765,9 @@ function noteClick(e) {
 			padding-bottom: 0 !important;
 			margin-bottom: 0 !important;
 		}
-
 		> .main > .avatar-container {
 			margin-right: 10px;
 		}
-
 		&:first-child > .main > .body {
 			margin-top: -20px;
 			padding-top: 22px;
diff --git a/packages/client/src/components/Notes.vue b/packages/client/src/components/MkNotes.vue
similarity index 71%
rename from packages/client/src/components/Notes.vue
rename to packages/client/src/components/MkNotes.vue
index 5e6fd6671..d7be5066d 100644
--- a/packages/client/src/components/Notes.vue
+++ b/packages/client/src/components/MkNotes.vue
@@ -1,8 +1,12 @@
 <template>
-	<Pagination ref="pagingComponent" :pagination="pagination">
+	<MkPagination ref="pagingComponent" :pagination="pagination">
 		<template #empty>
 			<div class="_fullinfo">
-				<img :src="instance.images.info" class="_ghost" alt="Info" />
+				<img
+					:src="instance.images.info"
+					class="_ghost"
+					alt="Info"
+				/>
 				<div>{{ i18n.ts.noNotes }}</div>
 			</div>
 		</template>
@@ -26,18 +30,18 @@
 				</XList>
 			</div>
 		</template>
-	</Pagination>
+	</MkPagination>
 </template>
 
 <script lang="ts" setup>
 import { ref } from "vue";
-import type { Paging } from "@/components/Pagination.vue";
-import XNote from "@/components/Note.vue";
-import XList from "@/components/DateSeparatedList.vue";
-import Pagination from "@/components/Pagination.vue";
+import type { Paging } from "@/components/MkPagination.vue";
+import XNote from "@/components/MkNote.vue";
+import XList from "@/components/MkDateSeparatedList.vue";
+import MkPagination from "@/components/MkPagination.vue";
 import { i18n } from "@/i18n";
 import { scroll } from "@/scripts/scroll";
-import { instance } from "@/instance";
+import {instance} from "@/instance";
 
 const tlEl = ref<HTMLElement>();
 
@@ -46,7 +50,7 @@ const props = defineProps<{
 	noGap?: boolean;
 }>();
 
-const pagingComponent = ref<InstanceType<typeof Pagination>>();
+const pagingComponent = ref<InstanceType<typeof MkPagination>>();
 
 function scrollTop() {
 	scroll(tlEl.value, { top: 0, behavior: "smooth" });
@@ -66,7 +70,6 @@ defineExpose({
 			border-radius: var(--radius);
 		}
 	}
-
 	&:not(.noGap) {
 		> .notes {
 			.qtqtichx {
diff --git a/packages/client/src/components/Notification.vue b/packages/client/src/components/MkNotification.vue
similarity index 95%
rename from packages/client/src/components/Notification.vue
rename to packages/client/src/components/MkNotification.vue
index 24f4a6150..8dc76cac4 100644
--- a/packages/client/src/components/Notification.vue
+++ b/packages/client/src/components/MkNotification.vue
@@ -6,12 +6,12 @@
 		:class="notification.type"
 	>
 		<div class="head">
-			<Avatar
+			<MkAvatar
 				v-if="notification.type === 'pollEnded'"
 				class="icon"
 				:user="notification.note.user"
 			/>
-			<Avatar
+			<MkAvatar
 				v-else-if="notification.user"
 				class="icon"
 				:user="notification.user"
@@ -94,22 +94,21 @@
 				<span v-if="notification.type === 'pollEnded'">{{
 					i18n.ts._notification.pollEnded
 				}}</span>
-				<A
+				<MkA
 					v-else-if="notification.user"
 					v-user-preview="notification.user.id"
 					class="name"
 					:to="userPage(notification.user)"
-				>
-					<UserName :user="notification.user" />
-				</A>
+					><MkUserName :user="notification.user"
+				/></MkA>
 				<span v-else>{{ notification.header }}</span>
-				<Time
+				<MkTime
 					v-if="withTime"
 					:time="notification.createdAt"
 					class="time"
 				/>
 			</header>
-			<A
+			<MkA
 				v-if="notification.type === 'reaction'"
 				class="text"
 				:to="notePage(notification.note)"
@@ -124,8 +123,8 @@
 					:custom-emojis="notification.note.emojis"
 				/>
 				<i class="ph-quotes ph-fill ph-lg"></i>
-			</A>
-			<A
+			</MkA>
+			<MkA
 				v-if="notification.type === 'renote'"
 				class="text"
 				:to="notePage(notification.note)"
@@ -140,8 +139,8 @@
 					:custom-emojis="notification.note.renote.emojis"
 				/>
 				<i class="ph-quotes ph-fill ph-lg"></i>
-			</A>
-			<A
+			</MkA>
+			<MkA
 				v-if="notification.type === 'reply'"
 				class="text"
 				:to="notePage(notification.note)"
@@ -153,8 +152,8 @@
 					:nowrap="!full"
 					:custom-emojis="notification.note.emojis"
 				/>
-			</A>
-			<A
+			</MkA>
+			<MkA
 				v-if="notification.type === 'mention'"
 				class="text"
 				:to="notePage(notification.note)"
@@ -166,8 +165,8 @@
 					:nowrap="!full"
 					:custom-emojis="notification.note.emojis"
 				/>
-			</A>
-			<A
+			</MkA>
+			<MkA
 				v-if="notification.type === 'quote'"
 				class="text"
 				:to="notePage(notification.note)"
@@ -179,8 +178,8 @@
 					:nowrap="!full"
 					:custom-emojis="notification.note.emojis"
 				/>
-			</A>
-			<A
+			</MkA>
+			<MkA
 				v-if="notification.type === 'pollVote'"
 				class="text"
 				:to="notePage(notification.note)"
@@ -195,8 +194,8 @@
 					:custom-emojis="notification.note.emojis"
 				/>
 				<i class="ph-quotes ph-fill ph-lg"></i>
-			</A>
-			<A
+			</MkA>
+			<MkA
 				v-if="notification.type === 'pollEnded'"
 				class="text"
 				:to="notePage(notification.note)"
@@ -210,20 +209,19 @@
 					:custom-emojis="notification.note.emojis"
 				/>
 				<i class="ph-quotes ph-fill ph-lg"></i>
-			</A>
+			</MkA>
 			<span
 				v-if="notification.type === 'follow'"
 				class="text"
 				style="opacity: 0.7"
 				>{{ i18n.ts.youGotNewFollower }}
 				<div v-if="full">
-					<FollowButton
+					<MkFollowButton
 						:user="notification.user"
 						:full="true"
 						:hideMenu="true"
-					/>
-				</div>
-			</span>
+					/></div
+			></span>
 			<span
 				v-if="notification.type === 'followRequestAccepted'"
 				class="text"
@@ -243,8 +241,8 @@
 					<button class="_textButton" @click="rejectFollowRequest()">
 						{{ i18n.ts.reject }}
 					</button>
-				</div>
-			</span>
+				</div></span
+			>
 			<span
 				v-if="notification.type === 'groupInvited'"
 				class="text"
@@ -265,8 +263,8 @@
 					>
 						{{ i18n.ts.reject }}
 					</button>
-				</div>
-			</span>
+				</div></span
+			>
 			<span v-if="notification.type === 'app'" class="text">
 				<Mfm :text="notification.body" :nowrap="!full" />
 			</span>
@@ -277,9 +275,9 @@
 <script lang="ts" setup>
 import { ref, onMounted, onUnmounted, watch } from "vue";
 import * as misskey from "iceshrimp-js";
-import XReactionIcon from "@/components/ReactionIcon.vue";
-import FollowButton from "@/components/FollowButton.vue";
-import XReactionTooltip from "@/components/ReactionTooltip.vue";
+import XReactionIcon from "@/components/MkReactionIcon.vue";
+import MkFollowButton from "@/components/MkFollowButton.vue";
+import XReactionTooltip from "@/components/MkReactionTooltip.vue";
 import { getNoteSummary } from "@/scripts/get-note-summary";
 import { notePage } from "@/filters/note";
 import { userPage } from "@/filters/user";
@@ -399,7 +397,6 @@ useTooltip(reactionRef, (showing) => {
 		padding-block: 16px;
 		font-size: 0.9em;
 	}
-
 	&.max-width_450px {
 		padding: 12px 16px;
 	}
@@ -522,7 +519,6 @@ useTooltip(reactionRef, (showing) => {
 
 			> span:first-child {
 				opacity: 0.7;
-
 				&::after {
 					content: ": ";
 				}
diff --git a/packages/client/src/components/NotificationSettingWindow.vue b/packages/client/src/components/MkNotificationSettingWindow.vue
similarity index 80%
rename from packages/client/src/components/NotificationSettingWindow.vue
rename to packages/client/src/components/MkNotificationSettingWindow.vue
index 61547dcd9..39f6b9e09 100644
--- a/packages/client/src/components/NotificationSettingWindow.vue
+++ b/packages/client/src/components/MkNotificationSettingWindow.vue
@@ -12,29 +12,27 @@
 		<template #header>{{ i18n.ts.notificationSetting }}</template>
 		<div class="_monolithic_">
 			<div v-if="showGlobalToggle" class="_section">
-				<Switch v-model="useGlobalSetting">
+				<MkSwitch v-model="useGlobalSetting">
 					{{ i18n.ts.useGlobalSetting }}
 					<template #caption>{{
 						i18n.ts.useGlobalSettingDesc
 					}}</template>
-				</Switch>
+				</MkSwitch>
 			</div>
 			<div v-if="!useGlobalSetting" class="_section _formRoot">
-				<Info class="_formBlock">{{
-					i18n.ts.notificationSettingDesc
-				}}</Info>
-				<Button inline @click="disableAll">{{
+				<MkInfo class="_formBlock">{{ i18n.ts.notificationSettingDesc }}</MkInfo>
+				<MkButton inline @click="disableAll">{{
 					i18n.ts.disableAll
-				}}</Button>
-				<Button inline @click="enableAll">{{
+				}}</MkButton>
+				<MkButton inline @click="enableAll">{{
 					i18n.ts.enableAll
-				}}</Button>
-				<Switch
+				}}</MkButton>
+				<MkSwitch
 					v-for="ntype in notificationTypes"
 					class="_formBlock"
 					:key="ntype"
 					v-model="typesMap[ntype]"
-					>{{ i18n.t(`_notification._types.${ntype}`) }}</Switch
+					>{{ i18n.t(`_notification._types.${ntype}`) }}</MkSwitch
 				>
 			</div>
 		</div>
@@ -44,10 +42,10 @@
 <script lang="ts" setup>
 import {} from "vue";
 import { notificationTypes } from "iceshrimp-js";
-import Switch from "./form/Switch.vue";
-import Info from "./Info.vue";
-import Button from "./Button.vue";
-import XModalWindow from "@/components/ModalWindow.vue";
+import MkSwitch from "./form/switch.vue";
+import MkInfo from "./MkInfo.vue";
+import MkButton from "./MkButton.vue";
+import XModalWindow from "@/components/MkModalWindow.vue";
 import { i18n } from "@/i18n";
 
 const emit = defineEmits<{
diff --git a/packages/client/src/components/NotificationToast.vue b/packages/client/src/components/MkNotificationToast.vue
similarity index 95%
rename from packages/client/src/components/NotificationToast.vue
rename to packages/client/src/components/MkNotificationToast.vue
index 7798358ed..20b084855 100644
--- a/packages/client/src/components/NotificationToast.vue
+++ b/packages/client/src/components/MkNotificationToast.vue
@@ -16,7 +16,7 @@
 
 <script lang="ts" setup>
 import { onMounted } from "vue";
-import XNotification from "@/components/Notification.vue";
+import XNotification from "@/components/MkNotification.vue";
 import * as os from "@/os";
 
 defineProps<{
@@ -44,7 +44,6 @@ onMounted(() => {
 		opacity 0.3s,
 		transform 0.3s !important;
 }
-
 .notification-toast-enter-from,
 .notification-toast-leave-to {
 	opacity: 0;
diff --git a/packages/client/src/components/Notifications.vue b/packages/client/src/components/MkNotifications.vue
similarity index 86%
rename from packages/client/src/components/Notifications.vue
rename to packages/client/src/components/MkNotifications.vue
index 96db363c3..4ba2725b1 100644
--- a/packages/client/src/components/Notifications.vue
+++ b/packages/client/src/components/MkNotifications.vue
@@ -1,8 +1,12 @@
 <template>
-	<Pagination ref="pagingComponent" :pagination="pagination">
+	<MkPagination ref="pagingComponent" :pagination="pagination">
 		<template #empty>
 			<div class="_fullinfo">
-				<img :src="instance.images.info" class="_ghost" alt="Info" />
+				<img
+					:src="instance.images.info"
+					class="_ghost"
+					alt="Info"
+				/>
 				<div>{{ i18n.ts.noNotifications }}</div>
 			</div>
 		</template>
@@ -38,7 +42,7 @@
 				/>
 			</XList>
 		</template>
-	</Pagination>
+	</MkPagination>
 </template>
 
 <script lang="ts" setup>
@@ -51,22 +55,22 @@ import {
 	ref,
 } from "vue";
 import { notificationTypes } from "iceshrimp-js";
-import Pagination, { Paging } from "@/components/Pagination.vue";
-import XNotification from "@/components/Notification.vue";
-import XList from "@/components/DateSeparatedList.vue";
-import XNote from "@/components/Note.vue";
+import MkPagination, { Paging } from "@/components/MkPagination.vue";
+import XNotification from "@/components/MkNotification.vue";
+import XList from "@/components/MkDateSeparatedList.vue";
+import XNote from "@/components/MkNote.vue";
 import * as os from "@/os";
 import { stream } from "@/stream";
 import { $i } from "@/account";
 import { i18n } from "@/i18n";
-import { instance } from "@/instance";
+import {instance} from "@/instance";
 
 const props = defineProps<{
 	includeTypes?: (typeof notificationTypes)[number][];
 	unreadOnly?: boolean;
 }>();
 
-const pagingComponent = ref<InstanceType<typeof Pagination>>();
+const pagingComponent = ref<InstanceType<typeof MkPagination>>();
 
 const pagination: Paging = {
 	endpoint: "i/notifications" as const,
diff --git a/packages/client/src/components/Number.vue b/packages/client/src/components/MkNumber.vue
similarity index 100%
rename from packages/client/src/components/Number.vue
rename to packages/client/src/components/MkNumber.vue
diff --git a/packages/client/src/components/NumberDiff.vue b/packages/client/src/components/MkNumberDiff.vue
similarity index 100%
rename from packages/client/src/components/NumberDiff.vue
rename to packages/client/src/components/MkNumberDiff.vue
diff --git a/packages/client/src/components/ObjectViewValue.vue b/packages/client/src/components/MkObjectView.value.vue
similarity index 100%
rename from packages/client/src/components/ObjectViewValue.vue
rename to packages/client/src/components/MkObjectView.value.vue
diff --git a/packages/client/src/components/ObjectView.vue b/packages/client/src/components/MkObjectView.vue
similarity index 85%
rename from packages/client/src/components/ObjectView.vue
rename to packages/client/src/components/MkObjectView.vue
index 6b410e45a..b3fce680b 100644
--- a/packages/client/src/components/ObjectView.vue
+++ b/packages/client/src/components/MkObjectView.vue
@@ -6,7 +6,7 @@
 
 <script lang="ts" setup>
 import {} from "vue";
-import XValue from "./ObjectViewValue.vue";
+import XValue from "./MkObjectView.value.vue";
 
 const props = defineProps<{
 	value: Record<string, unknown>;
diff --git a/packages/client/src/components/PagePreview.vue b/packages/client/src/components/MkPagePreview.vue
similarity index 99%
rename from packages/client/src/components/PagePreview.vue
rename to packages/client/src/components/MkPagePreview.vue
index 4a7f00c04..034c6fed6 100644
--- a/packages/client/src/components/PagePreview.vue
+++ b/packages/client/src/components/MkPagePreview.vue
@@ -1,5 +1,5 @@
 <template>
-	<A
+	<MkA
 		:to="`/@${page.user.username}/pages/${page.name}`"
 		class="vhpxefrj _block"
 		tabindex="-1"
@@ -30,7 +30,7 @@
 				<p>{{ userName(page.user) }}</p>
 			</footer>
 		</article>
-	</A>
+	</MkA>
 </template>
 
 <script lang="ts" setup>
diff --git a/packages/client/src/components/PageWindow.vue b/packages/client/src/components/MkPageWindow.vue
similarity index 98%
rename from packages/client/src/components/PageWindow.vue
rename to packages/client/src/components/MkPageWindow.vue
index 04acf59cd..88da05ffa 100644
--- a/packages/client/src/components/PageWindow.vue
+++ b/packages/client/src/components/MkPageWindow.vue
@@ -32,7 +32,7 @@
 <script lang="ts" setup>
 import { ComputedRef, inject, provide } from "vue";
 import RouterView from "@/components/global/RouterView.vue";
-import XWindow from "@/components/Window.vue";
+import XWindow from "@/components/MkWindow.vue";
 import { popout as _popout } from "@/scripts/popout";
 import copyToClipboard from "@/scripts/copy-to-clipboard";
 import { url } from "@/config";
diff --git a/packages/client/src/components/Pagination.vue b/packages/client/src/components/MkPagination.vue
similarity index 94%
rename from packages/client/src/components/Pagination.vue
rename to packages/client/src/components/MkPagination.vue
index 0595544ee..a3a82e230 100644
--- a/packages/client/src/components/Pagination.vue
+++ b/packages/client/src/components/MkPagination.vue
@@ -1,8 +1,8 @@
 <template>
 	<transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
-		<Loading v-if="fetching" />
+		<MkLoading v-if="fetching" />
 
-		<Error v-else-if="error" @retry="init()" />
+		<MkError v-else-if="error" @retry="init()" />
 
 		<div v-else-if="empty" key="_empty_" class="empty">
 			<slot name="empty">
@@ -23,7 +23,7 @@
 				key="_more_"
 				class="cxiknjgy _gap"
 			>
-				<Button
+				<MkButton
 					v-if="!moreFetching"
 					class="button"
 					:disabled="moreFetching"
@@ -32,8 +32,8 @@
 					@click="fetchMoreAhead"
 				>
 					{{ i18n.ts.loadMore }}
-				</Button>
-				<Loading v-else class="loading" />
+				</MkButton>
+				<MkLoading v-else class="loading" />
 			</div>
 			<slot :items="items"></slot>
 			<div
@@ -41,7 +41,7 @@
 				key="_more_"
 				class="cxiknjgy _gap"
 			>
-				<Button
+				<MkButton
 					v-if="!moreFetching"
 					v-appear="
 						$store.state.enableInfiniteScroll && !disableAutoLoad
@@ -55,8 +55,8 @@
 					@click="fetchMore"
 				>
 					{{ i18n.ts.loadMore }}
-				</Button>
-				<Loading v-else class="loading" />
+				</MkButton>
+				<MkLoading v-else class="loading" />
 			</div>
 		</div>
 	</transition>
@@ -82,9 +82,9 @@ import {
 	getScrollPosition,
 	getScrollContainer,
 } from "@/scripts/scroll";
-import Button from "@/components/Button.vue";
+import MkButton from "@/components/MkButton.vue";
 import { i18n } from "@/i18n";
-import { instance } from "@/instance";
+import {instance} from "@/instance";
 
 export type Paging<
 	E extends keyof misskey.Endpoints = keyof misskey.Endpoints,
@@ -159,7 +159,7 @@ const init = async (): Promise<void> => {
 		})
 		.then(
 			(res) => {
-				if (props.pagination.endpoint == "antennas/notes") {
+				if (props.pagination.endpoint == 'antennas/notes') {
 					redisPaginationStr = res.pagination;
 					res = res.notes;
 				}
@@ -259,7 +259,7 @@ const fetchMore = async (): Promise<void> => {
 			: props.pagination.params
 		: {};
 
-	if (props.pagination.endpoint == "antennas/notes") {
+	if (props.pagination.endpoint == 'antennas/notes') {
 		params.pagination = redisPaginationStr;
 	}
 
@@ -281,7 +281,7 @@ const fetchMore = async (): Promise<void> => {
 		})
 		.then(
 			(res) => {
-				if (props.pagination.endpoint == "antennas/notes") {
+				if (props.pagination.endpoint == 'antennas/notes') {
 					redisPaginationStr = res.pagination;
 					res = res.notes;
 				}
@@ -330,7 +330,7 @@ const fetchMoreAhead = async (): Promise<void> => {
 			: props.pagination.params
 		: {};
 
-	if (props.pagination.endpoint == "antennas/notes") {
+	if (props.pagination.endpoint == 'antennas/notes') {
 		params.pagination = redisPaginationStr;
 	}
 
@@ -352,7 +352,7 @@ const fetchMoreAhead = async (): Promise<void> => {
 		})
 		.then(
 			(res) => {
-				if (props.pagination.endpoint == "antennas/notes") {
+				if (props.pagination.endpoint == 'antennas/notes') {
 					redisPaginationStr = res.pagination;
 					res = res.notes;
 				}
@@ -506,7 +506,6 @@ defineExpose({
 .fade-leave-active {
 	transition: opacity 0.125s ease;
 }
-
 .fade-enter-from,
 .fade-leave-to {
 	opacity: 0;
@@ -518,11 +517,9 @@ defineExpose({
 		margin-right: auto;
 	}
 }
-
 .list > :deep(._button) {
 	margin-inline: auto;
 	margin-bottom: 16px;
-
 	&:last-of-type:not(:first-child) {
 		margin-top: 16px;
 	}
diff --git a/packages/client/src/components/Poll.vue b/packages/client/src/components/MkPoll.vue
similarity index 100%
rename from packages/client/src/components/Poll.vue
rename to packages/client/src/components/MkPoll.vue
diff --git a/packages/client/src/components/PollEditor.vue b/packages/client/src/components/MkPollEditor.vue
similarity index 85%
rename from packages/client/src/components/PollEditor.vue
rename to packages/client/src/components/MkPollEditor.vue
index 3eab964fb..de691ba88 100644
--- a/packages/client/src/components/PollEditor.vue
+++ b/packages/client/src/components/MkPollEditor.vue
@@ -6,14 +6,14 @@
 		</p>
 		<ul>
 			<li v-for="(choice, i) in choices" :key="i">
-				<Input
+				<MkInput
 					class="input"
 					small
 					:model-value="choice"
 					:placeholder="i18n.t('_poll.choiceN', { n: i + 1 })"
 					@update:modelValue="onInput(i, $event)"
 				>
-				</Input>
+				</MkInput>
 				<button
 					class="_button"
 					@click="remove(i)"
@@ -23,38 +23,42 @@
 				</button>
 			</li>
 		</ul>
-		<Button v-if="choices.length < 10" class="add" @click="add">{{
+		<MkButton v-if="choices.length < 10" class="add" @click="add">{{
 			i18n.ts.add
-		}}</Button>
-		<Button v-else class="add" disabled>{{ i18n.ts._poll.noMore }}</Button>
-		<Switch v-model="multiple">{{ i18n.ts._poll.canMultipleVote }}</Switch>
+		}}</MkButton>
+		<MkButton v-else class="add" disabled>{{
+			i18n.ts._poll.noMore
+		}}</MkButton>
+		<MkSwitch v-model="multiple">{{
+			i18n.ts._poll.canMultipleVote
+		}}</MkSwitch>
 		<section>
 			<div>
-				<Select v-model="expiration" small>
+				<MkSelect v-model="expiration" small>
 					<template #label>{{ i18n.ts._poll.expiration }}</template>
 					<option value="infinite">
 						{{ i18n.ts._poll.infinite }}
 					</option>
 					<option value="at">{{ i18n.ts._poll.at }}</option>
 					<option value="after">{{ i18n.ts._poll.after }}</option>
-				</Select>
+				</MkSelect>
 				<section v-if="expiration === 'at'">
-					<Input v-model="atDate" small type="date" class="input">
+					<MkInput v-model="atDate" small type="date" class="input">
 						<template #label>{{
 							i18n.ts._poll.deadlineDate
 						}}</template>
-					</Input>
-					<Input v-model="atTime" small type="time" class="input">
+					</MkInput>
+					<MkInput v-model="atTime" small type="time" class="input">
 						<template #label>{{
 							i18n.ts._poll.deadlineTime
 						}}</template>
-					</Input>
+					</MkInput>
 				</section>
 				<section v-else-if="expiration === 'after'">
-					<Input v-model="after" small type="number" class="input">
+					<MkInput v-model="after" small type="number" class="input">
 						<template #label>{{ i18n.ts._poll.duration }}</template>
-					</Input>
-					<Select v-model="unit" small>
+					</MkInput>
+					<MkSelect v-model="unit" small>
 						<option value="second">
 							{{ i18n.ts._time.second }}
 						</option>
@@ -63,7 +67,7 @@
 						</option>
 						<option value="hour">{{ i18n.ts._time.hour }}</option>
 						<option value="day">{{ i18n.ts._time.day }}</option>
-					</Select>
+					</MkSelect>
 				</section>
 			</div>
 		</section>
@@ -72,10 +76,10 @@
 
 <script lang="ts" setup>
 import { ref, watch } from "vue";
-import Input from "./form/Input.vue";
-import Select from "./form/Select.vue";
-import Switch from "./form/Switch.vue";
-import Button from "./Button.vue";
+import MkInput from "./form/input.vue";
+import MkSelect from "./form/select.vue";
+import MkSwitch from "./form/switch.vue";
+import MkButton from "./MkButton.vue";
 import { formatDateTimeString } from "@/scripts/format-time-string";
 import { addTime } from "@/scripts/time";
 import { i18n } from "@/i18n";
diff --git a/packages/client/src/components/PopupMenu.vue b/packages/client/src/components/MkPopupMenu.vue
similarity index 85%
rename from packages/client/src/components/PopupMenu.vue
rename to packages/client/src/components/MkPopupMenu.vue
index 474052ef7..12a18221c 100644
--- a/packages/client/src/components/PopupMenu.vue
+++ b/packages/client/src/components/MkPopupMenu.vue
@@ -1,5 +1,5 @@
 <template>
-	<Modal
+	<MkModal
 		ref="modal"
 		v-slot="{ type, maxHeight }"
 		:z-priority="'high'"
@@ -9,7 +9,7 @@
 		@closed="emit('closed')"
 		tabindex="-1"
 	>
-		<Menu
+		<MkMenu
 			:items="items"
 			:align="align"
 			:width="width"
@@ -20,13 +20,13 @@
 			:no-return-focus="noReturnFocus"
 			@close="modal?.close()"
 		/>
-	</Modal>
+	</MkModal>
 </template>
 
 <script lang="ts" setup>
 import {} from "vue";
-import Modal from "./Modal.vue";
-import Menu from "./Menu.vue";
+import MkModal from "./MkModal.vue";
+import MkMenu from "./MkMenu.vue";
 import { MenuItem } from "@/types/menu";
 
 defineProps<{
@@ -42,7 +42,7 @@ const emit = defineEmits<{
 	(ev: "closed"): void;
 }>();
 
-let modal = $ref<InstanceType<typeof Modal>>();
+let modal = $ref<InstanceType<typeof MkModal>>();
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/components/PostForm.vue b/packages/client/src/components/MkPostForm.vue
similarity index 94%
rename from packages/client/src/components/PostForm.vue
rename to packages/client/src/components/MkPostForm.vue
index fb9e8b3a1..017f21ab1 100644
--- a/packages/client/src/components/PostForm.vue
+++ b/packages/client/src/components/MkPostForm.vue
@@ -20,7 +20,7 @@
 				class="account _button"
 				@click="openAccountMenu"
 			>
-				<Avatar :user="postAccount ?? $i" class="avatar" />
+				<MkAvatar :user="postAccount ?? $i" class="avatar" />
 			</button>
 			<div class="right">
 				<span
@@ -33,11 +33,7 @@
 				></span>
 				<button
 					ref="visibilityButton"
-					v-tooltip="
-						$props.editId != null
-							? i18n.ts.cannotChangeScopeWhenEditing
-							: i18n.ts.visibility
-					"
+					v-tooltip="$props.editId != null ? i18n.ts.cannotChangeScopeWhenEditing : i18n.ts.visibility"
 					class="_button visibility"
 					:disabled="channel != null || $props.editId != null"
 					@click="setVisibility"
@@ -100,7 +96,7 @@
 				<span style="margin-right: 8px">{{ i18n.ts.recipient }}</span>
 				<div class="visibleUsers">
 					<span v-for="u in visibleUsers" :key="u.id">
-						<Acct :user="u" />
+						<MkAcct :user="u" />
 						<button
 							class="_button"
 							@click="removeVisibleUser(u)"
@@ -114,15 +110,15 @@
 					</button>
 				</div>
 			</div>
-			<Info
+			<MkInfo
 				v-if="hasNotSpecifiedMentions"
 				warn
 				class="hasNotSpecifiedMentions"
 				>{{ i18n.ts.notSpecifiedMentionWarning }} -
 				<button class="_textButton" @click="addMissingMention()">
 					{{ i18n.ts.add }}
-				</button>
-			</Info>
+				</button></MkInfo
+			>
 			<input
 				v-show="useCw"
 				ref="cwInputEl"
@@ -245,10 +241,10 @@ import { length } from "stringz";
 import { toASCII } from "punycode/";
 import * as Acct from "iceshrimp-js/built/acct";
 import { throttle } from "throttle-debounce";
-import XNoteSimple from "@/components/NoteSimple.vue";
-import XNotePreview from "@/components/NotePreview.vue";
-import XPostFormAttaches from "@/components/PostFormAttaches.vue";
-import XPollEditor from "@/components/PollEditor.vue";
+import XNoteSimple from "@/components/MkNoteSimple.vue";
+import XNotePreview from "@/components/MkNotePreview.vue";
+import XPostFormAttaches from "@/components/MkPostFormAttaches.vue";
+import XPollEditor from "@/components/MkPollEditor.vue";
 import { host, url } from "@/config";
 import { erase, unique } from "@/scripts/array";
 import { extractMentions } from "@/scripts/extract-mentions";
@@ -258,7 +254,7 @@ import * as os from "@/os";
 import { stream } from "@/stream";
 import { selectFiles } from "@/scripts/select-file";
 import { defaultStore, notePostInterruptors, postFormActions } from "@/store";
-import Info from "@/components/Info.vue";
+import MkInfo from "@/components/MkInfo.vue";
 import { i18n } from "@/i18n";
 import { instance } from "@/instance";
 import {
@@ -268,7 +264,7 @@ import {
 } from "@/account";
 import { uploadFile } from "@/scripts/upload";
 import { deepClone } from "@/scripts/clone";
-import XCheatSheet from "@/components/CheatSheetDialog.vue";
+import XCheatSheet from "@/components/MkCheatSheetDialog.vue";
 import { preprocess } from "@/scripts/preprocess";
 
 const modal = inject("modal");
@@ -640,7 +636,9 @@ function setVisibility() {
 	}
 
 	os.popup(
-		defineAsyncComponent(() => import("@/components/VisibilityPicker.vue")),
+		defineAsyncComponent(
+			() => import("@/components/MkVisibilityPicker.vue"),
+		),
 		{
 			currentVisibility: visibility,
 			currentLocalOnly: localOnly,
@@ -729,12 +727,7 @@ async function onPaste(ev: ClipboardEvent) {
 
 	const paste = ev.clipboardData.getData("text");
 
-	if (
-		!props.renote &&
-		!quoteId &&
-		paste.startsWith(url + "/notes/") &&
-		!props.editId
-	) {
+	if (!props.renote && !quoteId && paste.startsWith(url + "/notes/") && !props.editId) {
 		ev.preventDefault();
 
 		os.yesno({
@@ -837,31 +830,31 @@ async function post() {
 
 	let postData = props.editId
 		? {
-				editId: props.editId,
-				text: processedText === "" ? undefined : processedText,
-				fileIds: files.length > 0 ? files.map((f) => f.id) : undefined,
-				poll: poll,
-				cw: useCw ? cw || "" : undefined,
-		  }
+			editId: props.editId,
+			text: processedText === "" ? undefined : processedText,
+			fileIds: files.length > 0 ? files.map((f) => f.id) : undefined,
+			poll: poll,
+			cw: useCw ? cw || "" : undefined,
+		}
 		: {
-				text: processedText === "" ? undefined : processedText,
-				fileIds: files.length > 0 ? files.map((f) => f.id) : undefined,
-				replyId: props.reply ? props.reply.id : undefined,
-				renoteId: props.renote
-					? props.renote.id
-					: quoteId
-					? quoteId
+			text: processedText === "" ? undefined : processedText,
+			fileIds: files.length > 0 ? files.map((f) => f.id) : undefined,
+			replyId: props.reply ? props.reply.id : undefined,
+			renoteId: props.renote
+				? props.renote.id
+				: quoteId
+				? quoteId
+				: undefined,
+			channelId: props.channel ? props.channel.id : undefined,
+			poll: poll,
+			cw: useCw ? cw || "" : undefined,
+			localOnly: localOnly,
+			visibility: visibility,
+			visibleUserIds:
+				visibility === "specified"
+					? visibleUsers.map((u) => u.id)
 					: undefined,
-				channelId: props.channel ? props.channel.id : undefined,
-				poll: poll,
-				cw: useCw ? cw || "" : undefined,
-				localOnly: localOnly,
-				visibility: visibility,
-				visibleUserIds:
-					visibility === "specified"
-						? visibleUsers.map((u) => u.id)
-						: undefined,
-		  };
+		};
 
 	if (withHashtags && hashtags && hashtags.trim() !== "") {
 		const hashtags_ = hashtags
@@ -1044,7 +1037,6 @@ onMounted(() => {
 .right {
 	float: right;
 }
-
 .gafaadew {
 	position: relative;
 
diff --git a/packages/client/src/components/PostFormAttaches.vue b/packages/client/src/components/MkPostFormAttaches.vue
similarity index 95%
rename from packages/client/src/components/PostFormAttaches.vue
rename to packages/client/src/components/MkPostFormAttaches.vue
index 3aee11fc9..a1cb191de 100644
--- a/packages/client/src/components/PostFormAttaches.vue
+++ b/packages/client/src/components/MkPostFormAttaches.vue
@@ -14,7 +14,7 @@
 				@click="showFileMenu(element, $event)"
 				@contextmenu.prevent="showFileMenu(element, $event)"
 			>
-				<DriveFileThumbnail
+				<MkDriveFileThumbnail
 					:data-id="element.id"
 					class="thumbnail"
 					:file="element"
@@ -32,7 +32,7 @@
 <script lang="ts" setup>
 import { defineAsyncComponent, ref, computed } from "vue";
 import { VueDraggable } from "vue-draggable-plus";
-import DriveFileThumbnail from "@/components/DriveFileThumbnail.vue";
+import MkDriveFileThumbnail from "@/components/MkDriveFileThumbnail.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 
@@ -93,7 +93,7 @@ async function rename(file) {
 
 async function describe(file) {
 	os.popup(
-		defineAsyncComponent(() => import("@/components/MediaCaption.vue")),
+		defineAsyncComponent(() => import("@/components/MkMediaCaption.vue")),
 		{
 			title: i18n.ts.describeFile,
 			input: {
diff --git a/packages/client/src/components/PostFormDialog.vue b/packages/client/src/components/MkPostFormDialog.vue
similarity index 81%
rename from packages/client/src/components/PostFormDialog.vue
rename to packages/client/src/components/MkPostFormDialog.vue
index ce26f787d..5124e9a9a 100644
--- a/packages/client/src/components/PostFormDialog.vue
+++ b/packages/client/src/components/MkPostFormDialog.vue
@@ -1,11 +1,11 @@
 <template>
-	<Modal
+	<MkModal
 		ref="modal"
 		:prefer-type="'dialog'"
 		@click="modal.close()"
 		@closed="onModalClosed()"
 	>
-		<PostForm
+		<MkPostForm
 			ref="form"
 			style="margin: 0 auto auto auto"
 			v-bind="props"
@@ -15,14 +15,14 @@
 			@cancel="modal.close()"
 			@esc="modal.close()"
 		/>
-	</Modal>
+	</MkModal>
 </template>
 
 <script lang="ts" setup>
 import {} from "vue";
 import * as misskey from "iceshrimp-js";
-import Modal from "@/components/Modal.vue";
-import PostForm from "@/components/PostForm.vue";
+import MkModal from "@/components/MkModal.vue";
+import MkPostForm from "@/components/MkPostForm.vue";
 
 const props = defineProps<{
 	reply?: misskey.entities.Note;
@@ -46,8 +46,8 @@ const emit = defineEmits<{
 	(ev: "closed"): void;
 }>();
 
-let modal = $shallowRef<InstanceType<typeof Modal>>();
-let form = $shallowRef<InstanceType<typeof PostForm>>();
+let modal = $shallowRef<InstanceType<typeof MkModal>>();
+let form = $shallowRef<InstanceType<typeof MkPostForm>>();
 
 function onPosted() {
 	modal.close({
diff --git a/packages/client/src/components/PushNotificationAllowButton.vue b/packages/client/src/components/MkPushNotificationAllowButton.vue
similarity index 97%
rename from packages/client/src/components/PushNotificationAllowButton.vue
rename to packages/client/src/components/MkPushNotificationAllowButton.vue
index a7ddd0405..166c803f0 100644
--- a/packages/client/src/components/PushNotificationAllowButton.vue
+++ b/packages/client/src/components/MkPushNotificationAllowButton.vue
@@ -1,5 +1,5 @@
 <template>
-	<Button
+	<MkButton
 		v-if="supported && !pushRegistrationInServer"
 		type="button"
 		primary
@@ -12,8 +12,8 @@
 		@click="subscribe"
 	>
 		{{ i18n.ts.subscribePushNotification }}
-	</Button>
-	<Button
+	</MkButton>
+	<MkButton
 		v-else-if="
 			!showOnlyToRegister &&
 			($i ? pushRegistrationInServer : pushSubscription)
@@ -29,8 +29,8 @@
 		@click="unsubscribe"
 	>
 		{{ i18n.ts.unsubscribePushNotification }}
-	</Button>
-	<Button
+	</MkButton>
+	<MkButton
 		v-else-if="$i && pushRegistrationInServer"
 		disabled
 		:rounded="rounded"
@@ -39,8 +39,8 @@
 		:full="full"
 	>
 		{{ i18n.ts.pushNotificationAlreadySubscribed }}
-	</Button>
-	<Button
+	</MkButton>
+	<MkButton
 		v-else-if="!supported"
 		disabled
 		:rounded="rounded"
@@ -49,12 +49,12 @@
 		:full="full"
 	>
 		{{ i18n.ts.pushNotificationNotSupported }}
-	</Button>
+	</MkButton>
 </template>
 
 <script setup lang="ts">
 import { $i, getAccounts } from "@/account";
-import Button from "@/components/Button.vue";
+import MkButton from "@/components/MkButton.vue";
 import { instance } from "@/instance";
 import { api, apiWithDialog, promiseDialog } from "@/os";
 import { i18n } from "@/i18n";
diff --git a/packages/client/src/components/QuoteButton.vue b/packages/client/src/components/MkQuoteButton.vue
similarity index 100%
rename from packages/client/src/components/QuoteButton.vue
rename to packages/client/src/components/MkQuoteButton.vue
diff --git a/packages/client/src/components/ReactedUsers.vue b/packages/client/src/components/MkReactedUsers.vue
similarity index 90%
rename from packages/client/src/components/ReactedUsers.vue
rename to packages/client/src/components/MkReactedUsers.vue
index 110fd2ddb..b483e81e6 100644
--- a/packages/client/src/components/ReactedUsers.vue
+++ b/packages/client/src/components/MkReactedUsers.vue
@@ -8,7 +8,7 @@
 				class="_button"
 				@click="tab = reaction"
 			>
-				<ReactionIcon
+				<MkReactionIcon
 					ref="reactionRef"
 					:reaction="
 						reaction
@@ -22,7 +22,7 @@
 				}}</span>
 			</button>
 		</div>
-		<UserCardMini
+		<MkUserCardMini
 			v-for="user in users"
 			:key="user.id"
 			:user="user"
@@ -30,15 +30,15 @@
 		/>
 	</div>
 	<div v-else>
-		<Loading />
+		<MkLoading />
 	</div>
 </template>
 
 <script lang="ts" setup>
 import { onMounted, watch } from "vue";
 import * as misskey from "iceshrimp-js";
-import ReactionIcon from "@/components/ReactionIcon.vue";
-import UserCardMini from "@/components/UserCardMini.vue";
+import MkReactionIcon from "@/components/MkReactionIcon.vue";
+import MkUserCardMini from "@/components/MkUserCardMini.vue";
 import { i18n } from "@/i18n";
 import * as os from "@/os";
 
diff --git a/packages/client/src/components/ReactionIcon.vue b/packages/client/src/components/MkReactionIcon.vue
similarity index 96%
rename from packages/client/src/components/ReactionIcon.vue
rename to packages/client/src/components/MkReactionIcon.vue
index 66bf0a138..eb19a5520 100644
--- a/packages/client/src/components/ReactionIcon.vue
+++ b/packages/client/src/components/MkReactionIcon.vue
@@ -1,5 +1,5 @@
 <template>
-	<Emoji
+	<MkEmoji
 		:emoji="reaction"
 		:custom-emojis="customEmojis || []"
 		:is-reaction="true"
diff --git a/packages/client/src/components/ReactionTooltip.vue b/packages/client/src/components/MkReactionTooltip.vue
similarity index 86%
rename from packages/client/src/components/ReactionTooltip.vue
rename to packages/client/src/components/MkReactionTooltip.vue
index 09cc290d2..e3db05c27 100644
--- a/packages/client/src/components/ReactionTooltip.vue
+++ b/packages/client/src/components/MkReactionTooltip.vue
@@ -1,5 +1,5 @@
 <template>
-	<Tooltip
+	<MkTooltip
 		ref="tooltip"
 		:target-element="targetElement"
 		:max-width="340"
@@ -14,13 +14,13 @@
 			/>
 			<div class="name">{{ reaction.replace("@.", "") }}</div>
 		</div>
-	</Tooltip>
+	</MkTooltip>
 </template>
 
 <script lang="ts" setup>
 import {} from "vue";
-import Tooltip from "./Tooltip.vue";
-import XReactionIcon from "@/components/ReactionIcon.vue";
+import MkTooltip from "./MkTooltip.vue";
+import XReactionIcon from "@/components/MkReactionIcon.vue";
 
 const props = defineProps<{
 	reaction: string;
diff --git a/packages/client/src/components/ReactionsViewerDetails.vue b/packages/client/src/components/MkReactionsViewer.details.vue
similarity index 87%
rename from packages/client/src/components/ReactionsViewerDetails.vue
rename to packages/client/src/components/MkReactionsViewer.details.vue
index 77494632e..96dd05162 100644
--- a/packages/client/src/components/ReactionsViewerDetails.vue
+++ b/packages/client/src/components/MkReactionsViewer.details.vue
@@ -1,5 +1,5 @@
 <template>
-	<Tooltip
+	<MkTooltip
 		ref="tooltip"
 		:target-element="targetElement"
 		:max-width="340"
@@ -17,21 +17,21 @@
 			</div>
 			<div class="users">
 				<div v-for="u in users" :key="u.id" class="user">
-					<Avatar class="avatar" :user="u" />
-					<UserName class="name" :user="u" :nowrap="true" />
+					<MkAvatar class="avatar" :user="u" />
+					<MkUserName class="name" :user="u" :nowrap="true" />
 				</div>
 				<div v-if="users.length > 10" class="omitted">
 					+{{ count - 10 }}
 				</div>
 			</div>
 		</div>
-	</Tooltip>
+	</MkTooltip>
 </template>
 
 <script lang="ts" setup>
 import {} from "vue";
-import Tooltip from "./Tooltip.vue";
-import XReactionIcon from "@/components/ReactionIcon.vue";
+import MkTooltip from "./MkTooltip.vue";
+import XReactionIcon from "@/components/MkReactionIcon.vue";
 
 const props = defineProps<{
 	reaction: string;
diff --git a/packages/client/src/components/ReactionsViewerReaction.vue b/packages/client/src/components/MkReactionsViewer.reaction.vue
similarity index 95%
rename from packages/client/src/components/ReactionsViewerReaction.vue
rename to packages/client/src/components/MkReactionsViewer.reaction.vue
index f933a42af..1c63aa8b6 100644
--- a/packages/client/src/components/ReactionsViewerReaction.vue
+++ b/packages/client/src/components/MkReactionsViewer.reaction.vue
@@ -23,8 +23,8 @@
 <script lang="ts" setup>
 import { computed, ref } from "vue";
 import * as misskey from "iceshrimp-js";
-import XDetails from "@/components/ReactionsViewerDetails.vue";
-import XReactionIcon from "@/components/ReactionIcon.vue";
+import XDetails from "@/components/MkReactionsViewer.details.vue";
+import XReactionIcon from "@/components/MkReactionIcon.vue";
 import * as os from "@/os";
 import { useTooltip } from "@/scripts/use-tooltip";
 import { $i } from "@/account";
@@ -107,7 +107,6 @@ useTooltip(
 	padding: 0 8px;
 	pointer-events: all;
 	min-width: max-content;
-
 	&::before {
 		content: "";
 		position: absolute;
@@ -115,35 +114,28 @@ useTooltip(
 		border-radius: 4px;
 		z-index: -1;
 	}
-
 	&.newlyAdded {
 		animation: scaleInSmall 0.3s cubic-bezier(0, 0, 0, 1.2);
-
 		:deep(.mk-emoji) {
 			animation: scaleIn 0.4s cubic-bezier(0.7, 0, 0, 1.5);
 		}
 	}
-
 	:deep(.mk-emoji) {
 		transition: transform 0.4s cubic-bezier(0, 0, 0, 6);
 	}
-
 	&.reacted :deep(.mk-emoji) {
 		transition: transform 0.4s cubic-bezier(0, 0, 0, 1);
 	}
-
 	&:active {
 		:deep(.mk-emoji) {
 			transition: transform 0.4s cubic-bezier(0, 0, 0, 1);
 			transform: scale(0.85);
 		}
 	}
-
 	&.canToggle {
 		&::before {
 			background: rgba(0, 0, 0, 0.05);
 		}
-
 		&:hover:not(.reacted)::before {
 			background: rgba(0, 0, 0, 0.1);
 		}
@@ -155,7 +147,6 @@ useTooltip(
 
 	&.reacted {
 		order: -1;
-
 		&::before {
 			background: var(--accent);
 		}
diff --git a/packages/client/src/components/ReactionsViewer.vue b/packages/client/src/components/MkReactionsViewer.vue
similarity index 95%
rename from packages/client/src/components/ReactionsViewer.vue
rename to packages/client/src/components/MkReactionsViewer.vue
index 8235c8a81..216daa75f 100644
--- a/packages/client/src/components/ReactionsViewer.vue
+++ b/packages/client/src/components/MkReactionsViewer.vue
@@ -20,7 +20,7 @@
 import { computed, ref } from "vue";
 import * as misskey from "iceshrimp-js";
 import { $i } from "@/account";
-import XReaction from "@/components/ReactionsViewerReaction.vue";
+import XReaction from "@/components/MkReactionsViewer.reaction.vue";
 
 const props = defineProps<{
 	note: misskey.entities.Note;
@@ -55,7 +55,6 @@ const isMe = computed(() => $i && $i.id === props.note.userId);
 	);
 	scrollbar-width: none;
 	pointer-events: none;
-
 	:deep(*) {
 		pointer-events: all;
 	}
diff --git a/packages/client/src/components/RemoteCaution.vue b/packages/client/src/components/MkRemoteCaution.vue
similarity index 100%
rename from packages/client/src/components/RemoteCaution.vue
rename to packages/client/src/components/MkRemoteCaution.vue
diff --git a/packages/client/src/components/RenoteButton.vue b/packages/client/src/components/MkRenoteButton.vue
similarity index 98%
rename from packages/client/src/components/RenoteButton.vue
rename to packages/client/src/components/MkRenoteButton.vue
index a23b89afe..f30041544 100644
--- a/packages/client/src/components/RenoteButton.vue
+++ b/packages/client/src/components/MkRenoteButton.vue
@@ -23,8 +23,8 @@
 <script lang="ts" setup>
 import { computed, ref } from "vue";
 import type * as misskey from "iceshrimp-js";
-import Ripple from "@/components/Ripple.vue";
-import XDetails from "@/components/UsersTooltip.vue";
+import Ripple from "@/components/MkRipple.vue";
+import XDetails from "@/components/MkUsersTooltip.vue";
 import { pleaseLogin } from "@/scripts/please-login";
 import * as os from "@/os";
 import { $i } from "@/account";
@@ -267,7 +267,6 @@ const renote = (viaKeyboard = false, ev?: MouseEvent) => {
 	&:not(.canRenote) {
 		cursor: default;
 	}
-
 	&.renoted {
 		color: var(--accent) !important;
 		opacity: 1 !important;
diff --git a/packages/client/src/components/Ripple.vue b/packages/client/src/components/MkRipple.vue
similarity index 100%
rename from packages/client/src/components/Ripple.vue
rename to packages/client/src/components/MkRipple.vue
diff --git a/packages/client/src/components/Sample.vue b/packages/client/src/components/MkSample.vue
similarity index 68%
rename from packages/client/src/components/Sample.vue
rename to packages/client/src/components/MkSample.vue
index f9dc73153..91bdcef5b 100644
--- a/packages/client/src/components/Sample.vue
+++ b/packages/client/src/components/MkSample.vue
@@ -1,49 +1,49 @@
 <template>
 	<div class="_card">
 		<div class="_content">
-			<Input v-model="text">
+			<MkInput v-model="text">
 				<template #label>Text</template>
-			</Input>
-			<Switch v-model="flag">
+			</MkInput>
+			<MkSwitch v-model="flag">
 				<span>Switch is now {{ flag ? "on" : "off" }}</span>
-			</Switch>
+			</MkSwitch>
 			<div style="margin: 32px 0">
-				<Radio v-model="radio" value="misskey">Iceshrimp</Radio>
-				<Radio v-model="radio" value="mastodon">Mastodon</Radio>
-				<Radio v-model="radio" value="pleroma">Pleroma</Radio>
+				<MkRadio v-model="radio" value="misskey">Iceshrimp</MkRadio>
+				<MkRadio v-model="radio" value="mastodon">Mastodon</MkRadio>
+				<MkRadio v-model="radio" value="pleroma">Pleroma</MkRadio>
 			</div>
-			<Button inline>This is</Button>
-			<Button inline primary>the button</Button>
+			<MkButton inline>This is</MkButton>
+			<MkButton inline primary>the button</MkButton>
 		</div>
 		<div class="_content" style="pointer-events: none">
 			<Mfm :text="mfm" />
 		</div>
 		<div class="_content">
-			<Button inline primary @click="openMenu">Open menu</Button>
-			<Button inline primary @click="openDialog">Open dialog</Button>
-			<Button inline primary @click="openForm">Open form</Button>
-			<Button inline primary @click="openDrive">Open drive</Button>
+			<MkButton inline primary @click="openMenu">Open menu</MkButton>
+			<MkButton inline primary @click="openDialog">Open dialog</MkButton>
+			<MkButton inline primary @click="openForm">Open form</MkButton>
+			<MkButton inline primary @click="openDrive">Open drive</MkButton>
 		</div>
 	</div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import Button from "@/components/Button.vue";
-import Input from "@/components/form/Input.vue";
-import Switch from "@/components/form/Switch.vue";
-import Textarea from "@/components/form/Textarea.vue";
-import Radio from "@/components/form/Radio.vue";
+import MkButton from "@/components/MkButton.vue";
+import MkInput from "@/components/form/input.vue";
+import MkSwitch from "@/components/form/switch.vue";
+import MkTextarea from "@/components/form/textarea.vue";
+import MkRadio from "@/components/form/radio.vue";
 import * as os from "@/os";
 import * as config from "@/config";
 
 export default defineComponent({
 	components: {
-		Button,
-		Input,
-		Switch,
-		Textarea,
-		Radio,
+		MkButton,
+		MkInput,
+		MkSwitch,
+		MkTextarea,
+		MkRadio,
 	},
 
 	data() {
diff --git a/packages/client/src/components/ShowMoreButton.vue b/packages/client/src/components/MkShowMoreButton.vue
similarity index 94%
rename from packages/client/src/components/ShowMoreButton.vue
rename to packages/client/src/components/MkShowMoreButton.vue
index d6186b2ca..872ddd5ec 100644
--- a/packages/client/src/components/ShowMoreButton.vue
+++ b/packages/client/src/components/MkShowMoreButton.vue
@@ -11,7 +11,7 @@
 <script lang="ts" setup>
 import { i18n } from "@/i18n";
 import { computed, ref } from "vue";
-import { defaultStore } from "@/store";
+import {defaultStore} from "@/store";
 
 const props = defineProps<{
 	modelValue: boolean;
@@ -23,7 +23,7 @@ const emit = defineEmits<{
 	(ev: "update:modelValue", v: boolean): void;
 }>();
 
-const cwButton = computed(() => `_button_${defaultStore.state.cwStyle}`);
+const cwButton = computed (() => `_button_${defaultStore.state.cwStyle}`);
 
 const toggle = () => {
 	emit("update:modelValue", !props.modelValue);
diff --git a/packages/client/src/components/Signin.vue b/packages/client/src/components/MkSignin.vue
similarity index 91%
rename from packages/client/src/components/Signin.vue
rename to packages/client/src/components/MkSignin.vue
index 83818a55e..dc49ca23d 100644
--- a/packages/client/src/components/Signin.vue
+++ b/packages/client/src/components/MkSignin.vue
@@ -13,11 +13,11 @@
 					marginBottom: message ? '1.5em' : null,
 				}"
 			></div>
-			<Info v-if="message">
+			<MkInfo v-if="message">
 				{{ message }}
-			</Info>
+			</MkInfo>
 			<div v-if="!totpLogin" class="normal-signin">
-				<Input
+				<MkInput
 					v-model="username"
 					class="_formBlock"
 					:placeholder="i18n.ts.username"
@@ -31,8 +31,8 @@
 				>
 					<template #prefix>@</template>
 					<template #suffix>@{{ host }}</template>
-				</Input>
-				<Input
+				</MkInput>
+				<MkInput
 					v-if="!user || (user && !user.usePasswordLessLogin)"
 					v-model="password"
 					class="_formBlock"
@@ -55,14 +55,14 @@
 							{{ i18n.ts.forgotPassword }}
 						</button></template
 					>
-				</Input>
-				<Button
+				</MkInput>
+				<MkButton
 					class="_formBlock"
 					type="submit"
 					primary
 					:disabled="signing"
 					style="margin: 1rem auto"
-					>{{ signing ? i18n.ts.loggingIn : i18n.ts.login }}</Button
+					>{{ signing ? i18n.ts.loggingIn : i18n.ts.login }}</MkButton
 				>
 			</div>
 			<div
@@ -75,9 +75,9 @@
 					class="twofa-group tap-group"
 				>
 					<p>{{ i18n.ts.tapSecurityKey }}</p>
-					<Button v-if="!queryingKey" @click="queryKey">
+					<MkButton v-if="!queryingKey" @click="queryKey">
 						{{ i18n.ts.retry }}
-					</Button>
+					</MkButton>
 				</div>
 				<div v-if="user && user.securityKeys" class="or-hr">
 					<p class="or-msg">{{ i18n.ts.or }}</p>
@@ -86,7 +86,7 @@
 					<p style="margin-bottom: 0">
 						{{ i18n.ts.twoStepAuthentication }}
 					</p>
-					<Input
+					<MkInput
 						v-if="user && user.usePasswordLessLogin"
 						v-model="password"
 						type="password"
@@ -98,8 +98,8 @@
 						<template #prefix
 							><i class="ph-lock ph-bold ph-lg"></i
 						></template>
-					</Input>
-					<Input
+					</MkInput>
+					<MkInput
 						v-model="token"
 						type="text"
 						autocomplete="one-time-code"
@@ -111,15 +111,15 @@
 						<template #prefix
 							><i class="ph-poker-chip ph-bold ph-lg"></i
 						></template>
-					</Input>
-					<Button
+					</MkInput>
+					<MkButton
 						type="submit"
 						:disabled="signing"
 						primary
 						style="margin: 1rem auto auto"
 						>{{
 							signing ? i18n.ts.loggingIn : i18n.ts.login
-						}}</Button
+						}}</MkButton
 					>
 				</div>
 			</div>
@@ -133,11 +133,7 @@
 					class="ph-twitter-logo ph-bold ph-lg"
 					style="margin-right: 4px"
 				></i
-				>{{
-					i18n.t("signinWith", {
-						x: "Twitter",
-					})
-				}}</a
+				>{{ i18n.t("signinWith", { x: "Twitter" }) }}</a
 			>
 			<a
 				v-if="meta && meta.enableGithubIntegration"
@@ -147,11 +143,7 @@
 					class="ph-github-logo ph-bold ph-lg"
 					style="margin-right: 4px"
 				></i
-				>{{
-					i18n.t("signinWith", {
-						x: "GitHub",
-					})
-				}}</a
+				>{{ i18n.t("signinWith", { x: "GitHub" }) }}</a
 			>
 			<a
 				v-if="meta && meta.enableDiscordIntegration"
@@ -161,11 +153,7 @@
 					class="ph-discord-logo ph-bold ph-lg"
 					style="margin-right: 4px"
 				></i
-				>{{
-					i18n.t("signinWith", {
-						x: "Discord",
-					})
-				}}</a
+				>{{ i18n.t("signinWith", { x: "Discord" }) }}</a
 			>
 		</div>
 	</form>
@@ -175,9 +163,9 @@
 import Vue3OtpInput from "vue3-otp-input";
 import { defineAsyncComponent } from "vue";
 import { toUnicode } from "punycode/";
-import Button from "@/components/Button.vue";
-import Input from "@/components/form/Input.vue";
-import Info from "@/components/Info.vue";
+import MkButton from "@/components/MkButton.vue";
+import MkInput from "@/components/form/input.vue";
+import MkInfo from "@/components/MkInfo.vue";
 import { apiUrl, host as configHost } from "@/config";
 import { byteify, hexify } from "@/scripts/2fa";
 import * as os from "@/os";
@@ -379,7 +367,7 @@ function loginFailed(err) {
 
 function resetPassword() {
 	os.popup(
-		defineAsyncComponent(() => import("@/components/ForgotPassword.vue")),
+		defineAsyncComponent(() => import("@/components/MkForgotPassword.vue")),
 		{},
 		{},
 		"closed",
diff --git a/packages/client/src/components/SigninDialog.vue b/packages/client/src/components/MkSigninDialog.vue
similarity index 79%
rename from packages/client/src/components/SigninDialog.vue
rename to packages/client/src/components/MkSigninDialog.vue
index d2754e8af..acb52ea7f 100644
--- a/packages/client/src/components/SigninDialog.vue
+++ b/packages/client/src/components/MkSigninDialog.vue
@@ -7,14 +7,14 @@
 	>
 		<template #header>{{ i18n.ts.login }}</template>
 
-		<Signin :auto-set="autoSet" :message="message" @login="onLogin" />
+		<MkSignin :auto-set="autoSet" :message="message" @login="onLogin" />
 	</XModalWindow>
 </template>
 
 <script lang="ts" setup>
 import {} from "vue";
-import Signin from "@/components/Signin.vue";
-import XModalWindow from "@/components/ModalWindow.vue";
+import MkSignin from "@/components/MkSignin.vue";
+import XModalWindow from "@/components/MkModalWindow.vue";
 import { i18n } from "@/i18n";
 
 const props = withDefaults(
diff --git a/packages/client/src/components/Signup.vue b/packages/client/src/components/MkSignup.vue
similarity index 95%
rename from packages/client/src/components/Signup.vue
rename to packages/client/src/components/MkSignup.vue
index 1ebdba9ca..ebe502aa2 100644
--- a/packages/client/src/components/Signup.vue
+++ b/packages/client/src/components/MkSignup.vue
@@ -2,7 +2,9 @@
 	<div v-if="instance.disableRegistration" style="margin-bottom: 1rem">
 		<p>{{ i18n.ts.signupsDisabled }}</p>
 		<a href="https://iceshrimp.dev/join">
-			<Button rounded gradate>{{ i18n.ts.findOtherInstance }} </Button>
+			<MkButton rounded gradate
+				>{{ i18n.ts.findOtherInstance }}
+			</MkButton>
 		</a>
 	</div>
 	<form
@@ -10,7 +12,7 @@
 		autocomplete="new-password"
 		@submit.prevent="onSubmit"
 	>
-		<Input
+		<MkInput
 			v-if="instance.disableRegistration"
 			v-model="invitationCode"
 			class="_formBlock"
@@ -22,14 +24,14 @@
 		>
 			<template #label>{{ i18n.ts.invitationCode }}</template>
 			<template #prefix><i class="ph-key ph-bold ph-lg"></i></template>
-		</Input>
+		</MkInput>
 		<div
 			v-if="
 				!instance.disableRegistration ||
 				(instance.disableRegistration && invitationState === 'entered')
 			"
 		>
-			<Input
+			<MkInput
 				v-model="username"
 				class="_formBlock"
 				type="text"
@@ -45,9 +47,8 @@
 						v-tooltip:dialog="i18n.ts.usernameInfo"
 						class="_button _help"
 					>
-						<i class="ph-question ph-bold"></i>
-					</div>
-				</template>
+						<i class="ph-question ph-bold"></i></div
+				></template>
 				<template #prefix>@</template>
 				<template #suffix>@{{ host }}</template>
 				<template #caption>
@@ -94,8 +95,8 @@
 						{{ i18n.ts.tooLong }}</span
 					>
 				</template>
-			</Input>
-			<Input
+			</MkInput>
+			<MkInput
 				v-if="instance.emailRequiredForSignup"
 				v-model="email"
 				class="_formBlock"
@@ -112,9 +113,8 @@
 						v-tooltip:dialog="i18n.ts._signup.emailAddressInfo"
 						class="_button _help"
 					>
-						<i class="ph-question ph-bold"></i>
-					</div>
-				</template>
+						<i class="ph-question ph-bold"></i></div
+				></template>
 				<template #prefix
 					><i class="ph-envelope-simple-open ph-bold ph-lg"></i
 				></template>
@@ -174,8 +174,8 @@
 						{{ i18n.ts.error }}</span
 					>
 				</template>
-			</Input>
-			<Input
+			</MkInput>
+			<MkInput
 				v-model="password"
 				class="_formBlock"
 				type="password"
@@ -208,8 +208,8 @@
 						{{ i18n.ts.strongPassword }}</span
 					>
 				</template>
-			</Input>
-			<Input
+			</MkInput>
+			<MkInput
 				v-model="retypedPassword"
 				class="_formBlock"
 				type="password"
@@ -238,8 +238,8 @@
 						{{ i18n.ts.passwordNotMatched }}</span
 					>
 				</template>
-			</Input>
-			<Switch
+			</MkInput>
+			<MkSwitch
 				v-if="instance.tosUrl"
 				v-model="ToSAgreement"
 				class="_formBlock tou"
@@ -254,8 +254,8 @@
 						>
 					</template>
 				</I18n>
-			</Switch>
-			<Captcha
+			</MkSwitch>
+			<MkCaptcha
 				v-if="instance.enableHcaptcha"
 				ref="hcaptcha"
 				v-model="hCaptchaResponse"
@@ -263,7 +263,7 @@
 				provider="hcaptcha"
 				:sitekey="instance.hcaptchaSiteKey"
 			/>
-			<Captcha
+			<MkCaptcha
 				v-if="instance.enableRecaptcha"
 				ref="recaptcha"
 				v-model="reCaptchaResponse"
@@ -271,13 +271,13 @@
 				provider="recaptcha"
 				:sitekey="instance.recaptchaSiteKey"
 			/>
-			<Button
+			<MkButton
 				class="_formBlock"
 				type="submit"
 				:disabled="shouldDisableSubmitting"
 				gradate
 				data-cy-signup-submit
-				>{{ i18n.ts.start }}</Button
+				>{{ i18n.ts.start }}</MkButton
 			>
 		</div>
 	</form>
@@ -287,10 +287,10 @@
 import {} from "vue";
 import getPasswordStrength from "syuilo-password-strength";
 import { toUnicode } from "punycode/";
-import Button from "./Button.vue";
-import Input from "./form/Input.vue";
-import Switch from "./form/Switch.vue";
-import Captcha from "@/components/Captcha.vue";
+import MkButton from "./MkButton.vue";
+import MkInput from "./form/input.vue";
+import MkSwitch from "./form/switch.vue";
+import MkCaptcha from "@/components/MkCaptcha.vue";
 import * as config from "@/config";
 import * as os from "@/os";
 import { login } from "@/account";
diff --git a/packages/client/src/components/SignupDialog.vue b/packages/client/src/components/MkSignupDialog.vue
similarity index 88%
rename from packages/client/src/components/SignupDialog.vue
rename to packages/client/src/components/MkSignupDialog.vue
index 187749a7b..d9a1492e4 100644
--- a/packages/client/src/components/SignupDialog.vue
+++ b/packages/client/src/components/MkSignupDialog.vue
@@ -21,8 +21,8 @@
 
 <script lang="ts" setup>
 import {} from "vue";
-import XSignup from "@/components/Signup.vue";
-import XModalWindow from "@/components/ModalWindow.vue";
+import XSignup from "@/components/MkSignup.vue";
+import XModalWindow from "@/components/MkModalWindow.vue";
 import { i18n } from "@/i18n";
 
 const props = withDefaults(
diff --git a/packages/client/src/components/Sparkle.vue b/packages/client/src/components/MkSparkle.vue
similarity index 100%
rename from packages/client/src/components/Sparkle.vue
rename to packages/client/src/components/MkSparkle.vue
diff --git a/packages/client/src/components/StarButton.vue b/packages/client/src/components/MkStarButton.vue
similarity index 98%
rename from packages/client/src/components/StarButton.vue
rename to packages/client/src/components/MkStarButton.vue
index 6cf792d2d..021cd72bc 100644
--- a/packages/client/src/components/StarButton.vue
+++ b/packages/client/src/components/MkStarButton.vue
@@ -39,7 +39,7 @@
 
 <script lang="ts" setup>
 import type { Note } from "iceshrimp-js/built/entities";
-import Ripple from "@/components/Ripple.vue";
+import Ripple from "@/components/MkRipple.vue";
 import { pleaseLogin } from "@/scripts/please-login";
 import * as os from "@/os";
 import { defaultStore } from "@/store";
diff --git a/packages/client/src/components/StarButtonNoEmoji.vue b/packages/client/src/components/MkStarButtonNoEmoji.vue
similarity index 92%
rename from packages/client/src/components/StarButtonNoEmoji.vue
rename to packages/client/src/components/MkStarButtonNoEmoji.vue
index fb3495be0..5667095cd 100644
--- a/packages/client/src/components/StarButtonNoEmoji.vue
+++ b/packages/client/src/components/MkStarButtonNoEmoji.vue
@@ -34,17 +34,17 @@
 				:class="$style.yellow"
 			></i>
 		</span>
-		<template v-if="count > 0">
-			<p class="count">{{ count }}</p>
-		</template>
+		<template v-if="count > 0"
+			><p class="count">{{ count }}</p></template
+		>
 	</button>
 </template>
 
 <script lang="ts" setup>
 import { ref } from "vue";
 import type { Note } from "iceshrimp-js/built/entities";
-import Ripple from "@/components/Ripple.vue";
-import XDetails from "@/components/UsersTooltip.vue";
+import Ripple from "@/components/MkRipple.vue";
+import XDetails from "@/components/MkUsersTooltip.vue";
 import { pleaseLogin } from "@/scripts/please-login";
 import * as os from "@/os";
 import { defaultStore } from "@/store";
diff --git a/packages/client/src/components/SubNoteContent.vue b/packages/client/src/components/MkSubNoteContent.vue
similarity index 87%
rename from packages/client/src/components/SubNoteContent.vue
rename to packages/client/src/components/MkSubNoteContent.vue
index fdac9848f..f32869979 100644
--- a/packages/client/src/components/SubNoteContent.vue
+++ b/packages/client/src/components/MkSubNoteContent.vue
@@ -1,6 +1,6 @@
 <template>
 	<p v-if="note.cw != null" class="cw" :class="cwStyle">
-		<A
+		<MkA
 			v-if="conversation && note.renoteId == parentId"
 			:to="
 				detailedView ? `#${parentId}` : `${notePage(note)}#${parentId}`
@@ -10,8 +10,8 @@
 			@click.stop
 		>
 			<i class="ph-quotes ph-bold ph-lg"></i>
-		</A>
-		<A
+		</MkA>
+		<MkA
 			v-else-if="!detailed && note.replyId"
 			:to="
 				detailedView
@@ -24,7 +24,7 @@
 			@click.stop
 		>
 			<i class="ph-arrow-bend-left-up ph-bold ph-lg"></i>
-		</A>
+		</MkA>
 		<span
 			v-else-if="note.replyId && !note.reply"
 			class="reply-icon"
@@ -34,10 +34,7 @@
 			<i class="ph-lock ph-bold"></i>
 		</span>
 		<Mfm
-			v-if="
-				note.cw != '' &&
-				(showContent || defaultStore.state.cwStyle !== 'modern')
-			"
+			v-if="note.cw != '' && (showContent || defaultStore.state.cwStyle !== 'modern')"
 			class="text"
 			:text="note.cw"
 			:author="note.user"
@@ -56,43 +53,24 @@
 	<div class="wrmlmaau">
 		<div
 			class="content"
-			:class="[
-				{
-					collapsed,
-					isLong,
-					manyImages: note.files.length > 4,
-					showContent: note.cw && !showContent,
-					animatedMfm: !disableMfm,
-				},
-				cwStyle,
-			]"
+			:class="[{
+				collapsed,
+				isLong,
+				manyImages: note.files.length > 4,
+				showContent: note.cw && !showContent,
+				animatedMfm: !disableMfm,
+			}, cwStyle]"
 		>
 			<XShowMoreButton
 				ref="showMoreButton"
 				v-if="isLong && collapsed"
 				v-model="collapsed"
 				v-on:keydown="focusFooter"
-			>
-			</XShowMoreButton>
-			<Mfm
-				v-if="
-					note.cw &&
-					!showContent &&
-					defaultStore.state.cwStyle === 'modern'
-				"
-				class="hiddenNote"
-				:text="note.cw"
-				:author="note.user"
-				:i="$i"
-				:custom-emojis="note.emojis"
-			/>
+			></XShowMoreButton>
+			<Mfm v-if="note.cw && ((!showContent && defaultStore.state.cwStyle === 'modern'))" class="hiddenNote" :text="note.cw" :author="note.user" :i="$i" :custom-emojis="note.emojis"/>
 			<XCwButton
 				ref="cwButton"
-				v-if="
-					note.cw &&
-					!showContent &&
-					defaultStore.state.cwStyle !== 'classic'
-				"
+				v-if="note.cw && !showContent && defaultStore.state.cwStyle !== 'classic'"
 				v-model="showContent"
 				:note="note"
 				v-on:keydown="focusFooter"
@@ -109,7 +87,7 @@
 					>({{ i18n.ts.deleted }})</span
 				>
 				<template v-if="!note.cw">
-					<A
+					<MkA
 						v-if="conversation && note.renoteId == parentId"
 						:to="
 							detailedView
@@ -121,8 +99,8 @@
 						@click.stop
 					>
 						<i class="ph-quotes ph-bold ph-lg"></i>
-					</A>
-					<A
+					</MkA>
+					<MkA
 						v-else-if="!detailed && note.replyId"
 						:to="
 							detailedView
@@ -135,7 +113,7 @@
 						@click.stop
 					>
 						<i class="ph-arrow-bend-left-up ph-bold ph-lg"></i>
-					</A>
+					</MkA>
 					<span
 						v-else-if="note.replyId && !note.reply"
 						class="reply-icon"
@@ -152,11 +130,11 @@
 					:i="$i"
 					:custom-emojis="note.emojis"
 				/>
-				<A
+				<MkA
 					v-if="!detailed && note.renoteId"
 					class="rp"
 					:to="`/notes/${note.renoteId}`"
-					>{{ i18n.ts.quoteAttached }}: ...</A
+					>{{ i18n.ts.quoteAttached }}: ...</MkA
 				>
 				<XMediaList
 					v-if="note.files.length > 0"
@@ -164,7 +142,7 @@
 				/>
 				<XPoll v-if="note.poll" :note="note" class="poll" />
 				<template v-if="detailed">
-					<UrlPreview
+					<MkUrlPreview
 						v-for="url in urls"
 						:key="url"
 						:url="url"
@@ -197,16 +175,12 @@
 				v-model="collapsed"
 			></XShowMoreButton>
 			<XCwButton
-				v-if="
-					note.cw &&
-					showContent &&
-					defaultStore.state.cwStyle !== 'classic'
-				"
+				v-if="note.cw && showContent && defaultStore.state.cwStyle !== 'classic'"
 				v-model="showContent"
 				:note="note"
 			/>
 		</div>
-		<Button
+		<MkButton
 			v-if="hasMfm && defaultStore.state.animatedMfm"
 			@click.stop="toggleMfm"
 			mini
@@ -218,7 +192,7 @@
 			<template v-else>
 				<i class="ph-stop ph-bold"></i> {{ i18n.ts._mfm.stop }}
 			</template>
-		</Button>
+		</MkButton>
 		<!-- <div
 			v-if="(isLong && !collapsed) || (props.note.cw && showContent)"
 			class="fade"
@@ -231,13 +205,13 @@ import { computed, ref } from "vue";
 import * as misskey from "iceshrimp-js";
 import * as mfm from "mfm-js";
 import * as os from "@/os";
-import XNoteSimple from "@/components/NoteSimple.vue";
-import XMediaList from "@/components/MediaList.vue";
-import XPoll from "@/components/Poll.vue";
-import UrlPreview from "@/components/UrlPreview.vue";
-import XShowMoreButton from "@/components/ShowMoreButton.vue";
-import XCwButton from "@/components/CwButton.vue";
-import Button from "@/components/Button.vue";
+import XNoteSimple from "@/components/MkNoteSimple.vue";
+import XMediaList from "@/components/MkMediaList.vue";
+import XPoll from "@/components/MkPoll.vue";
+import MkUrlPreview from "@/components/MkUrlPreview.vue";
+import XShowMoreButton from "@/components/MkShowMoreButton.vue";
+import XCwButton from "@/components/MkCwButton.vue";
+import MkButton from "@/components/MkButton.vue";
 import { notePage } from "@/filters/note";
 import { extractUrlFromMfm } from "@/scripts/extract-url-from-mfm";
 import { extractMfmWithAnimation } from "@/scripts/extract-mfm";
@@ -274,12 +248,10 @@ const urls = props.note.text
 	? extractUrlFromMfm(mfm.parse(props.note.text)).slice(0, 5)
 	: null;
 
-const cwStyle = computed(() => `_cw_style_${defaultStore.state.cwStyle}`);
+const cwStyle = computed (() => `_cw_style_${defaultStore.state.cwStyle}`);
 let _showContent = $ref(defaultStore.state.alwaysExpandCws);
 let showContent = $computed({
-	set(val) {
-		_showContent = val;
-	},
+	set(val) { _showContent = val },
 	get() {
 		if (props.forceExpandCw != null && props.detailedView) {
 			_showContent = props.forceExpandCw;
@@ -288,7 +260,7 @@ let showContent = $computed({
 
 		return _showContent;
 	},
-});
+})
 
 const mfms = props.note.text
 	? extractMfmWithAnimation(mfm.parse(props.note.text))
@@ -329,7 +301,6 @@ function focusFooter(ev) {
 	position: relative;
 	z-index: 2;
 }
-
 .reply-icon {
 	display: inline-block;
 	border-radius: 6px;
@@ -337,25 +308,20 @@ function focusFooter(ev) {
 	margin-right: 0.2em;
 	color: var(--accent);
 	transition: background 0.2s;
-
 	&:hover,
 	&:focus {
 		background: var(--buttonHoverBg);
 	}
 }
-
 .cw {
 	cursor: default;
 	display: block;
 	margin: 0;
 	padding: 0;
-
 	&:not(._cw_style_classic) {
 		margin-bottom: 10px;
 	}
-
 	overflow-wrap: break-word;
-
 	> .text {
 		margin-right: 8px;
 	}
@@ -364,7 +330,6 @@ function focusFooter(ev) {
 .wrmlmaau {
 	.content {
 		overflow-wrap: break-word;
-
 		&._cw_style_modern {
 			> .hiddenNote {
 				display: block;
@@ -374,7 +339,6 @@ function focusFooter(ev) {
 				text-align: center;
 			}
 		}
-
 		&._cw_style_classic {
 			overflow: clip;
 
@@ -384,16 +348,13 @@ function focusFooter(ev) {
 			padding: 0;
 			overflow-wrap: break-word;
 		}
-
 		> .body {
 			transition: filter 0.1s;
-
 			> .rp {
 				margin-left: 4px;
 				font-style: oblique;
 				color: var(--renote);
 			}
-
 			.reply-icon {
 				display: inline-block;
 				border-radius: 6px;
@@ -401,18 +362,15 @@ function focusFooter(ev) {
 				margin-right: 0.2em;
 				color: var(--accent);
 				transition: background 0.2s;
-
 				&:hover,
 				&:focus {
 					background: var(--buttonHoverBg);
 				}
 			}
-
 			> :deep(.files) {
 				margin-top: 0.4em;
 				margin-bottom: 0.4em;
 			}
-
 			> .url-preview {
 				margin-top: 8px;
 			}
@@ -423,13 +381,11 @@ function focusFooter(ev) {
 
 			> .renote {
 				padding-top: 8px;
-
 				> * {
 					padding: 16px;
 					border: solid 1px var(--renote);
 					border-radius: 8px;
 					transition: background 0.2s;
-
 					&:hover,
 					&:focus-within {
 						background-color: var(--panelHighlight);
@@ -441,13 +397,10 @@ function focusFooter(ev) {
 		&.collapsed,
 		&.showContent {
 			position: relative;
-
 			&._cw_style_modern {
 				min-height: calc(1em + 100px);
 			}
-
 			max-height: calc(15em + 100px);
-
 			> .body {
 				max-height: inherit;
 				mask: linear-gradient(black calc(100% - 64px), transparent);
@@ -465,53 +418,44 @@ function focusFooter(ev) {
 				-moz-user-select: none;
 			}
 		}
-
 		&.collapsed {
 			&.manyImages {
 				max-height: calc(15em + 250px);
 			}
-
 			> .body {
 				box-sizing: border-box;
 			}
 		}
-
 		&.showContent {
 			&._cw_style_alternative {
 				> .body {
 					min-height: 2em;
 					max-height: 5em;
 					filter: blur(4px);
-
 					:deep(span) {
 						animation: none !important;
 						transform: none !important;
 					}
-
 					:deep(img) {
 						filter: blur(12px);
 					}
 				}
-
 				:deep(.fade) {
 					inset: 0;
 					top: 90px;
 				}
 			}
-
 			&._cw_style_modern {
 				> .body {
 					min-height: 2em;
 					max-height: 5em;
 					visibility: hidden;
 				}
-
 				:deep(.fade) {
 					inset: 0;
 					top: 0;
 				}
 			}
-
 			&._cw_style_classic {
 				> .body {
 					display: none;
@@ -523,13 +467,11 @@ function focusFooter(ev) {
 			animation: none !important;
 		}
 	}
-
 	> :deep(button) {
 		margin-top: 10px;
 		margin-left: 0;
 		margin-right: 0.4rem;
 	}
-
 	> .fade {
 		position: absolute;
 		inset: 0;
@@ -538,7 +480,6 @@ function focusFooter(ev) {
 		align-items: flex-end;
 		z-index: 4;
 		pointer-events: none;
-
 		&::before {
 			content: "";
 			display: block;
diff --git a/packages/client/src/components/SuperMenu.vue b/packages/client/src/components/MkSuperMenu.vue
similarity index 99%
rename from packages/client/src/components/SuperMenu.vue
rename to packages/client/src/components/MkSuperMenu.vue
index d69c66a37..14974bbba 100644
--- a/packages/client/src/components/SuperMenu.vue
+++ b/packages/client/src/components/MkSuperMenu.vue
@@ -33,7 +33,7 @@
 						></i>
 						<span class="text">{{ item.text }}</span>
 					</button>
-					<A
+					<MkA
 						v-else
 						:to="item.to"
 						class="_button item"
@@ -45,7 +45,7 @@
 							:class="item.icon"
 						></i>
 						<span class="text">{{ item.text }}</span>
-					</A>
+					</MkA>
 				</template>
 			</div>
 		</section>
diff --git a/packages/client/src/components/Tab.vue b/packages/client/src/components/MkTab.vue
similarity index 100%
rename from packages/client/src/components/Tab.vue
rename to packages/client/src/components/MkTab.vue
diff --git a/packages/client/src/components/TagCloud.vue b/packages/client/src/components/MkTagCloud.vue
similarity index 100%
rename from packages/client/src/components/TagCloud.vue
rename to packages/client/src/components/MkTagCloud.vue
diff --git a/packages/client/src/components/Timeline.vue b/packages/client/src/components/MkTimeline.vue
similarity index 95%
rename from packages/client/src/components/Timeline.vue
rename to packages/client/src/components/MkTimeline.vue
index 51c7800a5..e4c415d53 100644
--- a/packages/client/src/components/Timeline.vue
+++ b/packages/client/src/components/MkTimeline.vue
@@ -1,5 +1,5 @@
 <template>
-	<Info
+	<MkInfo
 		v-if="tlHint && !tlHintClosed"
 		:closeable="true"
 		class="_gap"
@@ -8,7 +8,7 @@
 		<I18n :src="tlHint">
 			<template #icon></template>
 		</I18n>
-	</Info>
+	</MkInfo>
 	<div v-if="queue > 0" class="new">
 		<button
 			class="_buttonPrimary _shadow"
@@ -29,8 +29,8 @@
 
 <script lang="ts" setup>
 import { ref, watch, computed, provide, onUnmounted } from "vue";
-import XNotes from "@/components/Notes.vue";
-import Info from "@/components/Info.vue";
+import XNotes from "@/components/MkNotes.vue";
+import MkInfo from "@/components/MkInfo.vue";
 import * as os from "@/os";
 import { stream } from "@/stream";
 import * as sound from "@/scripts/sound";
@@ -102,8 +102,8 @@ if (props.src === "antenna") {
 	});
 	connection.on("note", prepend);
 
-	tlHint = i18n.ts.antennaTimelineHint;
-	tlHintClosed = defaultStore.state.tlAntennaHintClosed;
+  tlHint = i18n.ts.antennaTimelineHint;
+  tlHintClosed = defaultStore.state.tlAntennaHintClosed;
 } else if (props.src === "home") {
 	endpoint = "notes/timeline";
 	query = {
@@ -223,9 +223,9 @@ function closeHint() {
 		case "global":
 			defaultStore.set("tlGlobalHintClosed", true);
 			break;
-		case "antenna":
-			defaultStore.set("tlAntennaHintClosed", true);
-			break;
+    case "antenna":
+      defaultStore.set("tlAntennaHintClosed", true);
+      break;
 	}
 }
 
@@ -254,7 +254,6 @@ const timetravel = (date?: Date) => {
 		opacity: 0;
 	}
 }
-
 .new {
 	position: sticky;
 	display: flex;
@@ -268,7 +267,6 @@ const timetravel = (date?: Date) => {
 	margin-top: -60px;
 	z-index: 1001;
 	box-shadow: 0 24px 24px -20px var(--accentedBg);
-
 	&::after {
 		content: "";
 		position: absolute;
@@ -287,7 +285,6 @@ const timetravel = (date?: Date) => {
 			transparent
 		);
 	}
-
 	> button {
 		display: flex;
 		position: absolute;
@@ -305,7 +302,6 @@ const timetravel = (date?: Date) => {
 		animation:
 			reset 0.4s forwards cubic-bezier(0, 0.4, 0, 1.1),
 			slideUp 1s 5s forwards cubic-bezier(1, 0, 1, 1);
-
 		&::before {
 			content: "";
 			position: absolute;
@@ -313,7 +309,6 @@ const timetravel = (date?: Date) => {
 			background: var(--bg);
 			z-index: -1;
 		}
-
 		i {
 			margin-left: 0.7em;
 			border-left: 1px solid var(--accentedBg);
diff --git a/packages/client/src/components/Toast.vue b/packages/client/src/components/MkToast.vue
similarity index 100%
rename from packages/client/src/components/Toast.vue
rename to packages/client/src/components/MkToast.vue
diff --git a/packages/client/src/components/TokenGenerateWindow.vue b/packages/client/src/components/MkTokenGenerateWindow.vue
similarity index 78%
rename from packages/client/src/components/TokenGenerateWindow.vue
rename to packages/client/src/components/MkTokenGenerateWindow.vue
index fa5c73e33..b164114f0 100644
--- a/packages/client/src/components/TokenGenerateWindow.vue
+++ b/packages/client/src/components/MkTokenGenerateWindow.vue
@@ -13,28 +13,30 @@
 	>
 		<template #header>{{ title || i18n.ts.generateAccessToken }}</template>
 		<div v-if="information" class="_section">
-			<Info warn>{{ information }}</Info>
+			<MkInfo warn>{{ information }}</MkInfo>
 		</div>
 		<div class="_section">
 			<div style="margin-bottom: 16px">
 				<b>{{ i18n.ts.name }}</b>
 			</div>
-			<Input style="margin-bottom: 16px" v-model="name" />
+			<MkInput style="margin-bottom: 16px" v-model="name" />
 		</div>
 		<div class="_section">
 			<div style="margin-bottom: 16px">
 				<b>{{ i18n.ts.permission }}</b>
 			</div>
-			<Button inline @click="disableAll">{{ i18n.ts.disableAll }}</Button>
-			<Button style="margin-bottom: 12px" inline @click="enableAll">{{
+			<MkButton inline @click="disableAll">{{
+				i18n.ts.disableAll
+			}}</MkButton>
+			<MkButton style="margin-bottom: 12px" inline @click="enableAll">{{
 				i18n.ts.enableAll
-			}}</Button>
-			<Switch
+			}}</MkButton>
+			<MkSwitch
 				style="margin-bottom: 6px"
 				v-for="kind in initialPermissions || kinds"
 				:key="kind"
 				v-model="permissions[kind]"
-				>{{ i18n.t(`_permissions.${kind}`) }}</Switch
+				>{{ i18n.t(`_permissions.${kind}`) }}</MkSwitch
 			>
 		</div>
 	</XModalWindow>
@@ -43,11 +45,11 @@
 <script lang="ts" setup>
 import {} from "vue";
 import { permissions as kinds } from "iceshrimp-js";
-import Input from "./form/Input.vue";
-import Switch from "./form/Switch.vue";
-import Button from "./Button.vue";
-import Info from "./Info.vue";
-import XModalWindow from "@/components/ModalWindow.vue";
+import MkInput from "./form/input.vue";
+import MkSwitch from "./form/switch.vue";
+import MkButton from "./MkButton.vue";
+import MkInfo from "./MkInfo.vue";
+import XModalWindow from "@/components/MkModalWindow.vue";
 import { i18n } from "@/i18n";
 
 const props = withDefaults(
diff --git a/packages/client/src/components/Tooltip.vue b/packages/client/src/components/MkTooltip.vue
similarity index 100%
rename from packages/client/src/components/Tooltip.vue
rename to packages/client/src/components/MkTooltip.vue
diff --git a/packages/client/src/components/TutorialDialog.vue b/packages/client/src/components/MkTutorialDialog.vue
similarity index 88%
rename from packages/client/src/components/TutorialDialog.vue
rename to packages/client/src/components/MkTutorialDialog.vue
index df20369b8..dd5336d47 100644
--- a/packages/client/src/components/TutorialDialog.vue
+++ b/packages/client/src/components/MkTutorialDialog.vue
@@ -28,17 +28,17 @@
 								<i class="ph-caret-right ph-bold ph-lg"></i>
 							</button>
 						</div>
-						<Button
+						<MkButton
 							v-if="tutorial === 5"
 							class="ok"
 							primary
 							@click="close"
 							><i class="ph-check ph-bold ph-lg"></i>
-							{{ i18n.ts.gotIt }}</Button
+							{{ i18n.ts.gotIt }}</MkButton
 						>
-						<Button v-else class="ok" primary @click="tutorial++"
+						<MkButton v-else class="ok" primary @click="tutorial++"
 							><i class="ph-check ph-bold ph-lg"></i>
-							{{ i18n.ts.next }}</Button
+							{{ i18n.ts.next }}</MkButton
 						>
 					</div>
 					<Transition name="fade">
@@ -84,9 +84,9 @@
 							<div>{{ i18n.ts._tutorial.step3_2 }}</div>
 							<XFeaturedUsers />
 							<br />
-							<Button class="ok" primary @click="tutorial++"
+							<MkButton class="ok" primary @click="tutorial++"
 								><i class="ph-check ph-bold ph-lg"></i>
-								{{ i18n.ts.next }}</Button
+								{{ i18n.ts.next }}</MkButton
 							>
 						</section>
 						<section
@@ -97,8 +97,8 @@
 							<h3>{{ i18n.ts._tutorial.step4_1 }}</h3>
 							<I18n :src="i18n.ts._tutorial.step4_2" tag="div">
 								<template #introduction>
-									<A class="_link" to="/tags/introduction"
-										>#introduction</A
+									<MkA class="_link" to="/tags/introduction"
+										>#introduction</MkA
 									>
 								</template>
 							</I18n>
@@ -187,13 +187,13 @@
 							<div>{{ i18n.ts._tutorial.step6_2 }}</div>
 							<div>{{ i18n.ts._tutorial.step6_3 }}</div>
 							<br />
-							<Sparkle>
+							<MkSparkle>
 								<h3>
 									{{ i18n.ts._tutorial.step6_4 }}
 									<Mfm text="$[shake 🚀]"></Mfm>
 								</h3>
-							</Sparkle>
-							<PushNotificationAllowButton
+							</MkSparkle>
+							<MkPushNotificationAllowButton
 								primary
 								show-only-to-register
 							/>
@@ -207,14 +207,14 @@
 
 <script lang="ts" setup>
 import { reactive, computed } from "vue";
-import XSettings from "@/pages/settings/Profile.vue";
-import XModalWindow from "@/components/ModalWindow.vue";
-import Button from "@/components/Button.vue";
-import XFeaturedUsers from "@/pages/ExploreUsers.vue";
-import XPostForm from "@/components/PostForm.vue";
-import Sparkle from "@/components/Sparkle.vue";
-import PushNotificationAllowButton from "@/components/PushNotificationAllowButton.vue";
-import FormSwitch from "@/components/form/Switch.vue";
+import XSettings from "@/pages/settings/profile.vue";
+import XModalWindow from "@/components/MkModalWindow.vue";
+import MkButton from "@/components/MkButton.vue";
+import XFeaturedUsers from "@/pages/explore.users.vue";
+import XPostForm from "@/components/MkPostForm.vue";
+import MkSparkle from "@/components/MkSparkle.vue";
+import MkPushNotificationAllowButton from "@/components/MkPushNotificationAllowButton.vue";
+import FormSwitch from "@/components/form/switch.vue";
 import { defaultStore } from "@/store";
 import { i18n } from "@/i18n";
 import { $i } from "@/account";
@@ -287,7 +287,6 @@ function close(res) {
 .fade-leave-active {
 	transition: opacity 0.2s ease-in-out;
 }
-
 .fade-enter-from,
 .fade-leave-to {
 	opacity: 0;
diff --git a/packages/client/src/components/Updated.vue b/packages/client/src/components/MkUpdated.vue
similarity index 81%
rename from packages/client/src/components/Updated.vue
rename to packages/client/src/components/MkUpdated.vue
index 93f1a7af1..3ccb81978 100644
--- a/packages/client/src/components/Updated.vue
+++ b/packages/client/src/components/MkUpdated.vue
@@ -1,5 +1,5 @@
 <template>
-	<Modal
+	<MkModal
 		ref="modal"
 		:z-priority="'middle'"
 		@click="$refs.modal.close()"
@@ -7,7 +7,7 @@
 	>
 		<div :class="$style.root">
 			<div :class="$style.title">
-				<Sparkle>{{ i18n.ts.iceshrimpUpdated }}</Sparkle>
+				<MkSparkle>{{ i18n.ts.iceshrimpUpdated }}</MkSparkle>
 			</div>
 			<div :class="$style.version">✨ {{ version }} 🚀</div>
 			<div v-if="newRelease" :class="$style.releaseNotes">
@@ -21,27 +21,27 @@
 					/>
 				</div>
 			</div>
-			<Button
+			<MkButton
 				:class="$style.gotIt"
 				primary
 				full
 				@click="$refs.modal.close()"
-				>{{ i18n.ts.gotIt }}</Button
+				>{{ i18n.ts.gotIt }}</MkButton
 			>
 		</div>
-	</Modal>
+	</MkModal>
 </template>
 
 <script lang="ts" setup>
 import { shallowRef } from "vue";
-import Modal from "@/components/Modal.vue";
-import Sparkle from "@/components/Sparkle.vue";
-import Button from "@/components/Button.vue";
+import MkModal from "@/components/MkModal.vue";
+import MkSparkle from "@/components/MkSparkle.vue";
+import MkButton from "@/components/MkButton.vue";
 import { version } from "@/config";
 import { i18n } from "@/i18n";
 import * as os from "@/os";
 
-const modal = shallowRef<InstanceType<typeof Modal>>();
+const modal = shallowRef<InstanceType<typeof MkModal>>();
 
 let newRelease = $ref(false);
 let data = $ref(Object);
diff --git a/packages/client/src/components/UrlPreview.vue b/packages/client/src/components/MkUrlPreview.vue
similarity index 99%
rename from packages/client/src/components/UrlPreview.vue
rename to packages/client/src/components/MkUrlPreview.vue
index e4a088ea8..29d045ebf 100644
--- a/packages/client/src/components/UrlPreview.vue
+++ b/packages/client/src/components/MkUrlPreview.vue
@@ -7,7 +7,7 @@
 			 weird w/ some links stuck loading (?) -->
 		<article v-if="!fetching" class="url-preview" @click.stop>
 			<component
-				:is="self ? 'A' : 'a'"
+				:is="self ? 'MkA' : 'a'"
 				:[attr]="self ? url.substring(local.length) : url"
 				rel="nofollow noopener"
 				:target="target"
@@ -48,7 +48,7 @@
 					</button>
 				</div>
 				<div v-if="fetching">
-					<Loading mini />
+					<MkLoading mini />
 				</div>
 				<div v-else>
 					<h3 :title="title || undefined">{{ title || url }}</h3>
@@ -193,12 +193,10 @@ onUnmounted(() => {
 	border: 1px solid var(--divider);
 	border-radius: var(--radius);
 	overflow: hidden;
-
 	> a {
 		display: flex;
 		transition: background 0.2s;
 		text-decoration: none;
-
 		> div:first-child:not(:last-child) {
 			position: relative;
 			width: 90px;
@@ -206,7 +204,6 @@ onUnmounted(() => {
 			display: flex;
 			justify-content: center;
 			align-items: center;
-
 			img {
 				position: absolute;
 				inset: 0;
@@ -215,12 +212,10 @@ onUnmounted(() => {
 				object-fit: cover;
 				transition: opacity 0.2s;
 			}
-
 			button {
 				display: flex;
 				width: 100%;
 				height: 100%;
-
 				i {
 					background: var(--bg);
 					padding: 14px;
@@ -232,7 +227,6 @@ onUnmounted(() => {
 						opacity 0.2s,
 						background 0.2s;
 				}
-
 				&:hover,
 				&:focus {
 					i {
@@ -242,13 +236,11 @@ onUnmounted(() => {
 				}
 			}
 		}
-
 		> div:last-child {
 			padding: 14px 16px;
 			width: 0;
 			flex-grow: 1;
 		}
-
 		h3,
 		p {
 			display: block;
@@ -257,7 +249,6 @@ onUnmounted(() => {
 			text-overflow: ellipsis;
 			max-width: 100%;
 		}
-
 		h3 {
 			font-size: 1em;
 			white-space: nowrap;
@@ -266,42 +257,35 @@ onUnmounted(() => {
 			text-decoration-color: transparent;
 			transition: text-decoration-color 0.2s;
 		}
-
 		p {
 			margin-bottom: -0.5em;
-
 			> span {
 				display: -webkit-inline-box;
 				font-size: 0.8em;
 				-webkit-line-clamp: 2;
 				-webkit-box-orient: vertical;
 				overflow: hidden;
-
 				> span {
 					font-weight: 600;
 					margin-right: 0.4em;
 				}
 			}
 		}
-
 		.icon {
 			width: 1.2em;
 			height: 1.2em;
 			vertical-align: middle;
 			border-radius: 4px;
 		}
-
 		&:hover,
 		&:focus,
 		&:focus-within {
 			background: var(--panelHighlight);
-
 			h3 {
 				text-decoration-color: currentColor;
 			}
 		}
 	}
-
 	&:hover,
 	&:focus-within {
 		> .hasButton {
@@ -309,7 +293,6 @@ onUnmounted(() => {
 				img {
 					opacity: 0.2;
 				}
-
 				button i {
 					transform: none;
 					opacity: 1;
@@ -317,13 +300,11 @@ onUnmounted(() => {
 			}
 		}
 	}
-
 	iframe {
 		border-top: 1px solid var(--divider);
 		display: block;
 		width: 100%;
 		overflow-y: auto;
-
 		&:not([src^="https://platform.twitter"])
 		{
 			max-height: 70vh;
diff --git a/packages/client/src/components/UrlPreviewPopup.vue b/packages/client/src/components/MkUrlPreviewPopup.vue
similarity index 88%
rename from packages/client/src/components/UrlPreviewPopup.vue
rename to packages/client/src/components/MkUrlPreviewPopup.vue
index 2fefee82b..76d014313 100644
--- a/packages/client/src/components/UrlPreviewPopup.vue
+++ b/packages/client/src/components/MkUrlPreviewPopup.vue
@@ -7,14 +7,14 @@
 			:name="$store.state.animation ? 'zoom' : ''"
 			@after-leave="emit('closed')"
 		>
-			<UrlPreview v-if="showing" class="_popup _shadow" :url="url" />
+			<MkUrlPreview v-if="showing" class="_popup _shadow" :url="url" />
 		</transition>
 	</div>
 </template>
 
 <script lang="ts" setup>
 import { onMounted } from "vue";
-import UrlPreview from "@/components/UrlPreview.vue";
+import MkUrlPreview from "@/components/MkUrlPreview.vue";
 import * as os from "@/os";
 
 const props = defineProps<{
diff --git a/packages/client/src/components/UserCardMini.vue b/packages/client/src/components/MkUserCardMini.vue
similarity index 92%
rename from packages/client/src/components/UserCardMini.vue
rename to packages/client/src/components/MkUserCardMini.vue
index ac470271e..4a7036f71 100644
--- a/packages/client/src/components/UserCardMini.vue
+++ b/packages/client/src/components/MkUserCardMini.vue
@@ -1,5 +1,5 @@
 <template>
-	<A
+	<MkA
 		class="user-card-mini"
 		:class="[
 			$style.root,
@@ -7,27 +7,25 @@
 		]"
 		:to="userPage(user)"
 	>
-		<Avatar
+		<MkAvatar
 			class="avatar"
 			:user="user"
 			:disable-link="true"
 			:show-indicator="true"
 		/>
 		<div class="body">
-			<span class="name">
-				<UserName class="name" :user="user" />
-			</span>
+			<span class="name"><MkUserName class="name" :user="user" /></span>
 			<span class="sub"
 				><span class="acct _monospace">@{{ acct(user) }}</span></span
 			>
 		</div>
-		<MiniChart v-if="chartValues" class="chart" :src="chartValues" />
-	</A>
+		<MkMiniChart v-if="chartValues" class="chart" :src="chartValues" />
+	</MkA>
 </template>
 
 <script lang="ts" setup>
 import * as misskey from "iceshrimp-js";
-import MiniChart from "@/components/MiniChart.vue";
+import MkMiniChart from "@/components/MkMiniChart.vue";
 import * as os from "@/os";
 import { acct, userPage } from "@/filters/user";
 
diff --git a/packages/client/src/components/UserInfo.vue b/packages/client/src/components/MkUserInfo.vue
similarity index 91%
rename from packages/client/src/components/UserInfo.vue
rename to packages/client/src/components/MkUserInfo.vue
index 46fa5d78f..9d2ab0154 100644
--- a/packages/client/src/components/UserInfo.vue
+++ b/packages/client/src/components/MkUserInfo.vue
@@ -14,18 +14,16 @@
 			>
 		</div>
 		<h3 class="title">
-			<Avatar
+			<MkAvatar
 				class="avatar"
 				:user="user"
 				:disable-preview="true"
 				:show-indicator="true"
 			/>
-			<A class="name" :to="userPage(user)">
-				<UserName :user="user" :nowrap="true" />
-			</A>
-			<p class="username">
-				<Acct :user="user" />
-			</p>
+			<MkA class="name" :to="userPage(user)"
+				><MkUserName :user="user" :nowrap="true"
+			/></MkA>
+			<p class="username"><MkAcct :user="user" /></p>
 		</h3>
 		<div
 			class="description"
@@ -67,21 +65,21 @@
 		</div>
 		<div class="status">
 			<p>
-				<Number :value="user.notesCount" />
+				<MkNumber :value="user.notesCount" />
 				{{ i18n.ts.notes }}
 			</p>
 			<p>
-				<Number :value="user.followingCount" />
+				<MkNumber :value="user.followingCount" />
 				{{ i18n.ts.following }}
 			</p>
 			<p>
-				<Number :value="user.followersCount" />
+				<MkNumber :value="user.followersCount" />
 				{{ i18n.ts.followers }}
 			</p>
 		</div>
 		<div class="buttons">
 			<slot>
-				<FollowButton v-if="$i && user.id != $i.id" :user="user" />
+				<MkFollowButton v-if="$i && user.id != $i.id" :user="user" />
 			</slot>
 		</div>
 	</article>
@@ -89,9 +87,9 @@
 
 <script lang="ts" setup>
 import * as misskey from "iceshrimp-js";
-import FollowButton from "@/components/FollowButton.vue";
-import XShowMoreButton from "@/components/ShowMoreButton.vue";
-import Number from "@/components/Number.vue";
+import MkFollowButton from "@/components/MkFollowButton.vue";
+import XShowMoreButton from "@/components/MkShowMoreButton.vue";
+import MkNumber from "@/components/MkNumber.vue";
 import { userPage } from "@/filters/user";
 import { i18n } from "@/i18n";
 
@@ -121,7 +119,6 @@ let collapsed = $ref(isLong);
 		background-size: cover;
 		background-position: center;
 		margin-bottom: calc(0px - var(--radius));
-
 		&::before {
 			content: "";
 			position: absolute;
@@ -135,7 +132,6 @@ let collapsed = $ref(isLong);
 				transparent
 			);
 		}
-
 		> .followed {
 			position: absolute;
 			top: 12px;
@@ -146,7 +142,6 @@ let collapsed = $ref(isLong);
 			font-size: 0.7em;
 			border-radius: 6px;
 		}
-
 		&.detailed::after {
 			content: "";
 			background-image: var(--blur, inherit);
@@ -184,7 +179,6 @@ let collapsed = $ref(isLong);
 			background: var(--panel);
 			border: solid 4px var(--panel);
 		}
-
 		.name {
 			display: inline-block;
 			margin: 0;
@@ -215,20 +209,17 @@ let collapsed = $ref(isLong);
 		padding-inline: 16px;
 		margin-bottom: 10px;
 		font-size: 0.8em;
-
 		&.truncate {
 			display: -webkit-box;
 			-webkit-line-clamp: 6;
 			-webkit-box-orient: vertical;
 		}
-
 		&.collapsed {
 			position: relative;
 			max-height: calc(9em + 50px);
 			mask: linear-gradient(black calc(100% - 64px), transparent);
 			-webkit-mask: linear-gradient(black calc(100% - 64px), transparent);
 		}
-
 		&.collapsed,
 		&.truncate {
 			:deep(br) {
@@ -236,14 +227,12 @@ let collapsed = $ref(isLong);
 			}
 		}
 	}
-
 	:deep(.fade) {
 		position: relative;
 		display: block;
 		width: 100%;
 		margin-top: -4.5em;
 		z-index: 2;
-
 		> span {
 			display: inline-block;
 			background: var(--panel);
@@ -252,14 +241,12 @@ let collapsed = $ref(isLong);
 			border-radius: 999px;
 			box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
 		}
-
 		&:hover {
 			> span {
 				background: var(--panelHighlight);
 			}
 		}
 	}
-
 	:deep(.showLess) {
 		width: 100%;
 		position: sticky;
@@ -274,7 +261,6 @@ let collapsed = $ref(isLong);
 			box-shadow: 0 0 7px 7px var(--bg);
 		}
 	}
-
 	> .fields {
 		padding-inline: 16px;
 		font-size: 0.8em;
@@ -314,7 +300,6 @@ let collapsed = $ref(isLong);
 			}
 		}
 	}
-
 	.status {
 		display: flex;
 		gap: 1em;
@@ -322,7 +307,6 @@ let collapsed = $ref(isLong);
 		font-size: 0.8em;
 		margin-top: auto;
 		border-top: 1px solid var(--divider);
-
 		> p > :deep(span) {
 			font-weight: 700;
 			color: var(--accent);
diff --git a/packages/client/src/components/UserList.vue b/packages/client/src/components/MkUserList.vue
similarity index 62%
rename from packages/client/src/components/UserList.vue
rename to packages/client/src/components/MkUserList.vue
index a4280953a..0ea2739b5 100644
--- a/packages/client/src/components/UserList.vue
+++ b/packages/client/src/components/MkUserList.vue
@@ -1,15 +1,19 @@
 <template>
-	<Pagination ref="pagingComponent" :pagination="pagination">
+	<MkPagination ref="pagingComponent" :pagination="pagination">
 		<template #empty>
 			<div class="_fullinfo">
-				<img :src="instance.images.info" class="_ghost" alt="Info" />
+				<img
+					:src="instance.images.info"
+					class="_ghost"
+					alt="Info"
+				/>
 				<div>{{ i18n.ts.noUsers }}</div>
 			</div>
 		</template>
 
 		<template #default="{ items: users }">
 			<div class="efvhhmdq">
-				<UserInfo
+				<MkUserInfo
 					v-for="user in users"
 					:key="user.id"
 					class="user"
@@ -17,23 +21,23 @@
 				/>
 			</div>
 		</template>
-	</Pagination>
+	</MkPagination>
 </template>
 
 <script lang="ts" setup>
 import { ref } from "vue";
-import UserInfo from "@/components/UserInfo.vue";
-import Pagination, { Paging } from "@/components/Pagination.vue";
+import MkUserInfo from "@/components/MkUserInfo.vue";
+import MkPagination, { Paging } from "@/components/MkPagination.vue";
 import { userPage } from "@/filters/user";
 import { i18n } from "@/i18n";
-import { instance } from "@/instance";
+import {instance} from "@/instance";
 
 const props = defineProps<{
 	pagination: Paging;
 	noGap?: boolean;
 }>();
 
-const pagingComponent = ref<InstanceType<typeof Pagination>>();
+const pagingComponent = ref<InstanceType<typeof MkPagination>>();
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/components/UserOnlineIndicator.vue b/packages/client/src/components/MkUserOnlineIndicator.vue
similarity index 100%
rename from packages/client/src/components/UserOnlineIndicator.vue
rename to packages/client/src/components/MkUserOnlineIndicator.vue
diff --git a/packages/client/src/components/UserPreview.vue b/packages/client/src/components/MkUserPreview.vue
similarity index 92%
rename from packages/client/src/components/UserPreview.vue
rename to packages/client/src/components/MkUserPreview.vue
index 90b9a3572..d2e9ae56d 100644
--- a/packages/client/src/components/UserPreview.vue
+++ b/packages/client/src/components/MkUserPreview.vue
@@ -19,9 +19,9 @@
 				}
 			"
 		>
-			<UserInfo v-if="user != null" :user="user" :detailed="true" />
+			<MkUserInfo v-if="user != null" :user="user" :detailed="true" />
 			<div v-else>
-				<Loading />
+				<MkLoading />
 			</div>
 		</div>
 	</transition>
@@ -29,7 +29,7 @@
 
 <script lang="ts" setup>
 import { onMounted } from "vue";
-import UserInfo from "@/components/UserInfo.vue";
+import MkUserInfo from "@/components/MkUserInfo.vue";
 import * as Acct from "iceshrimp-js/built/acct";
 import type * as misskey from "iceshrimp-js";
 import * as os from "@/os";
@@ -82,7 +82,6 @@ onMounted(() => {
 		opacity 0.3s,
 		transform 0.3s !important;
 }
-
 .popup-enter-from,
 .popup-leave-to {
 	opacity: 0;
diff --git a/packages/client/src/components/UserSelectDialog.vue b/packages/client/src/components/MkUserSelectDialog.vue
similarity index 89%
rename from packages/client/src/components/UserSelectDialog.vue
rename to packages/client/src/components/MkUserSelectDialog.vue
index d430d1f12..4d5cff92f 100644
--- a/packages/client/src/components/UserSelectDialog.vue
+++ b/packages/client/src/components/MkUserSelectDialog.vue
@@ -12,18 +12,18 @@
 		<div class="tbhwbxda">
 			<div class="form">
 				<FormSplit :min-width="170">
-					<Input
+					<MkInput
 						v-model="username"
 						:autofocus="true"
 						@update:modelValue="search"
 					>
 						<template #label>{{ i18n.ts.username }}</template>
 						<template #prefix>@</template>
-					</Input>
-					<Input v-model="host" @update:modelValue="search">
+					</MkInput>
+					<MkInput v-model="host" @update:modelValue="search">
 						<template #label>{{ i18n.ts.host }}</template>
 						<template #prefix>@</template>
-					</Input>
+					</MkInput>
 				</FormSplit>
 			</div>
 			<div
@@ -42,15 +42,15 @@
 						@click="selected = user"
 						@dblclick="ok()"
 					>
-						<Avatar
+						<MkAvatar
 							:user="user"
 							class="avatar"
 							:show-indicator="true"
 							disableLink
 						/>
 						<div class="body">
-							<UserName :user="user" class="name" />
-							<Acct :user="user" class="acct" />
+							<MkUserName :user="user" class="name" />
+							<MkAcct :user="user" class="acct" />
 						</div>
 					</div>
 				</div>
@@ -70,15 +70,15 @@
 						@click="selected = user"
 						@dblclick="ok()"
 					>
-						<Avatar
+						<MkAvatar
 							:user="user"
 							class="avatar"
 							:show-indicator="true"
 							disableLink
 						/>
 						<div class="body">
-							<UserName :user="user" class="name" />
-							<Acct :user="user" class="acct" />
+							<MkUserName :user="user" class="name" />
+							<MkAcct :user="user" class="acct" />
 						</div>
 					</div>
 				</div>
@@ -90,9 +90,9 @@
 <script lang="ts" setup>
 import { nextTick, onMounted } from "vue";
 import * as misskey from "iceshrimp-js";
-import Input from "@/components/form/Input.vue";
-import FormSplit from "@/components/form/Split.vue";
-import XModalWindow from "@/components/ModalWindow.vue";
+import MkInput from "@/components/form/input.vue";
+import FormSplit from "@/components/form/split.vue";
+import XModalWindow from "@/components/MkModalWindow.vue";
 import * as os from "@/os";
 import { defaultStore } from "@/store";
 import { i18n } from "@/i18n";
diff --git a/packages/client/src/components/UserSelectLocalDialog.vue b/packages/client/src/components/MkUserSelectLocalDialog.vue
similarity index 90%
rename from packages/client/src/components/UserSelectLocalDialog.vue
rename to packages/client/src/components/MkUserSelectLocalDialog.vue
index 34f3ebc16..dd71a18e5 100644
--- a/packages/client/src/components/UserSelectLocalDialog.vue
+++ b/packages/client/src/components/MkUserSelectLocalDialog.vue
@@ -12,14 +12,14 @@
 		<div class="tbhwbxdg">
 			<div class="form">
 				<FormSplit :min-width="170">
-					<Input
+					<MkInput
 						v-model="username"
 						:autofocus="true"
 						@update:modelValue="search"
 					>
 						<template #label>{{ i18n.ts.username }}</template>
 						<template #prefix>@</template>
-					</Input>
+					</MkInput>
 				</FormSplit>
 			</div>
 			<div
@@ -38,15 +38,15 @@
 						@click="selected = user"
 						@dblclick="ok()"
 					>
-						<Avatar
+						<MkAvatar
 							:user="user"
 							class="avatar"
 							:show-indicator="true"
 							disableLink
 						/>
 						<div class="body">
-							<UserName :user="user" class="name" />
-							<Acct :user="user" class="acct" />
+							<MkUserName :user="user" class="name" />
+							<MkAcct :user="user" class="acct" />
 						</div>
 					</div>
 				</div>
@@ -66,15 +66,15 @@
 						@click="selected = user"
 						@dblclick="ok()"
 					>
-						<Avatar
+						<MkAvatar
 							:user="user"
 							class="avatar"
 							:show-indicator="true"
 							disableLink
 						/>
 						<div class="body">
-							<UserName :user="user" class="name" />
-							<Acct :user="user" class="acct" />
+							<MkUserName :user="user" class="name" />
+							<MkAcct :user="user" class="acct" />
 						</div>
 					</div>
 				</div>
@@ -86,9 +86,9 @@
 <script lang="ts" setup>
 import { nextTick, onMounted } from "vue";
 import * as misskey from "iceshrimp-js";
-import Input from "@/components/form/Input.vue";
-import FormSplit from "@/components/form/Split.vue";
-import XModalWindow from "@/components/ModalWindow.vue";
+import MkInput from "@/components/form/input.vue";
+import FormSplit from "@/components/form/split.vue";
+import XModalWindow from "@/components/MkModalWindow.vue";
 import * as os from "@/os";
 import { defaultStore } from "@/store";
 import { i18n } from "@/i18n";
diff --git a/packages/client/src/components/UsersTooltip.vue b/packages/client/src/components/MkUsersTooltip.vue
similarity index 82%
rename from packages/client/src/components/UsersTooltip.vue
rename to packages/client/src/components/MkUsersTooltip.vue
index b7389be15..78a4f90f2 100644
--- a/packages/client/src/components/UsersTooltip.vue
+++ b/packages/client/src/components/MkUsersTooltip.vue
@@ -1,5 +1,5 @@
 <template>
-	<Tooltip
+	<MkTooltip
 		ref="tooltip"
 		:target-element="targetElement"
 		:max-width="250"
@@ -7,19 +7,19 @@
 	>
 		<div class="beaffaef">
 			<div v-for="u in users" :key="u.id" class="user">
-				<Avatar class="avatar" :user="u" disableLink />
-				<UserName class="name" :user="u" :nowrap="true" />
+				<MkAvatar class="avatar" :user="u" disableLink />
+				<MkUserName class="name" :user="u" :nowrap="true" />
 			</div>
 			<div v-if="users.length < count" class="omitted">
 				+{{ count - users.length }}
 			</div>
 		</div>
-	</Tooltip>
+	</MkTooltip>
 </template>
 
 <script lang="ts" setup>
 import {} from "vue";
-import Tooltip from "./Tooltip.vue";
+import MkTooltip from "./MkTooltip.vue";
 
 const props = defineProps<{
 	users: any[]; // TODO
diff --git a/packages/client/src/components/Visibility.vue b/packages/client/src/components/MkVisibility.vue
similarity index 96%
rename from packages/client/src/components/Visibility.vue
rename to packages/client/src/components/MkVisibility.vue
index ad73fbe80..3b22d5d08 100644
--- a/packages/client/src/components/Visibility.vue
+++ b/packages/client/src/components/MkVisibility.vue
@@ -26,7 +26,7 @@
 
 <script lang="ts" setup>
 import { ref } from "vue";
-import XDetails from "@/components/UsersTooltip.vue";
+import XDetails from "@/components/MkUsersTooltip.vue";
 import * as os from "@/os";
 import { useTooltip } from "@/scripts/use-tooltip";
 import { i18n } from "@/i18n";
diff --git a/packages/client/src/components/VisibilityPicker.vue b/packages/client/src/components/MkVisibilityPicker.vue
similarity index 95%
rename from packages/client/src/components/VisibilityPicker.vue
rename to packages/client/src/components/MkVisibilityPicker.vue
index 5f0829a0a..502635849 100644
--- a/packages/client/src/components/VisibilityPicker.vue
+++ b/packages/client/src/components/MkVisibilityPicker.vue
@@ -1,5 +1,5 @@
 <template>
-	<Modal
+	<MkModal
 		ref="modal"
 		v-slot="{ type }"
 		:z-priority="'high'"
@@ -7,13 +7,9 @@
 		@click="modal.close()"
 		@closed="emit('closed')"
 	>
-		<div
-			class="_popup"
-			:class="{
-				[$style.root]: true,
-				[$style.asDrawer]: type === 'drawer',
-			}"
-		>
+		<div 
+			class="_popup" 
+			:class="{ [$style.root]: true, [$style.asDrawer]: type === 'drawer' }">
 			<button
 				key="public"
 				class="_button"
@@ -125,16 +121,16 @@
 				</div>
 			</button>
 		</div>
-	</Modal>
+	</MkModal>
 </template>
 
 <script lang="ts" setup>
 import { nextTick, watch } from "vue";
 import * as misskey from "iceshrimp-js";
-import Modal from "@/components/Modal.vue";
+import MkModal from "@/components/MkModal.vue";
 import { i18n } from "@/i18n";
 
-const modal = $shallowRef<InstanceType<typeof Modal>>();
+const modal = $shallowRef<InstanceType<typeof MkModal>>();
 
 const props = withDefaults(
 	defineProps<{
@@ -174,24 +170,20 @@ function choose(visibility: (typeof misskey.noteVisibilities)[number]): void {
 .root {
 	width: 240px;
 	padding: 8px 0;
-
 	&.asDrawer {
 		padding: 12px 0 calc(env(safe-area-inset-bottom, 0px) + 12px) 0;
 		width: 100%;
 		border-radius: 24px;
 		border-bottom-right-radius: 0;
 		border-bottom-left-radius: 0;
-
 		.icon {
 			width: 18px;
 			margin-right: 24px;
 		}
-
 		.item {
 			font-size: 14px;
 			padding: 10px 24px;
 		}
-
 		.toggle {
 			margin-left: 24px;
 			width: 18px;
diff --git a/packages/client/src/components/WaitingDialog.vue b/packages/client/src/components/MkWaitingDialog.vue
similarity index 83%
rename from packages/client/src/components/WaitingDialog.vue
rename to packages/client/src/components/MkWaitingDialog.vue
index 58f2c471d..cc9784d8d 100644
--- a/packages/client/src/components/WaitingDialog.vue
+++ b/packages/client/src/components/MkWaitingDialog.vue
@@ -1,5 +1,5 @@
 <template>
-	<Modal
+	<MkModal
 		ref="modal"
 		:prefer-type="'dialog'"
 		:z-priority="'high'"
@@ -17,20 +17,23 @@
 				:class="[$style.icon, $style.success]"
 				class="ph-check ph-bold ph-lg"
 			></i>
-			<Loading v-else :class="[$style.icon, $style.waiting]" :em="true" />
+			<MkLoading
+				v-else
+				:class="[$style.icon, $style.waiting]"
+				:em="true"
+			/>
 			<div v-if="text && !success" :class="$style.text">
-				{{ text }}
-				<Ellipsis />
+				{{ text }}<MkEllipsis />
 			</div>
 		</div>
-	</Modal>
+	</MkModal>
 </template>
 
 <script lang="ts" setup>
 import { watch, shallowRef } from "vue";
-import Modal from "@/components/Modal.vue";
+import MkModal from "@/components/MkModal.vue";
 
-const modal = shallowRef<InstanceType<typeof Modal>>();
+const modal = shallowRef<InstanceType<typeof MkModal>>();
 
 const props = defineProps<{
 	success: boolean;
diff --git a/packages/client/src/components/Widgets.vue b/packages/client/src/components/MkWidgets.vue
similarity index 92%
rename from packages/client/src/components/Widgets.vue
rename to packages/client/src/components/MkWidgets.vue
index ffa017ed2..f6241512f 100644
--- a/packages/client/src/components/Widgets.vue
+++ b/packages/client/src/components/MkWidgets.vue
@@ -2,7 +2,7 @@
 	<div class="vjoppmmu">
 		<template v-if="edit">
 			<header tabindex="-1" v-focus>
-				<Select
+				<MkSelect
 					v-model="widgetAdderSelected"
 					style="margin-bottom: var(--margin)"
 					class="mk-widget-select"
@@ -15,14 +15,18 @@
 					>
 						{{ i18n.t(`_widgets.${widget}`) }}
 					</option>
-				</Select>
-				<Button inline primary class="mk-widget-add" @click="addWidget"
+				</MkSelect>
+				<MkButton
+					inline
+					primary
+					class="mk-widget-add"
+					@click="addWidget"
 					><i class="ph-plus ph-bold ph-lg"></i>
-					{{ i18n.ts.add }}</Button
+					{{ i18n.ts.add }}</MkButton
 				>
-				<Button inline @click="$emit('exit')">{{
+				<MkButton inline @click="$emit('exit')">{{
 					i18n.ts.close
-				}}</Button>
+				}}</MkButton>
 			</header>
 			<VueDraggable v-model="widgets_" handle=".handle" animation="150">
 				<div v-for="element in widgets_" :key="element.id">
@@ -54,7 +58,7 @@
 			</VueDraggable>
 		</template>
 		<component
-			:is="`w-${widget.name}`"
+			:is="`mkw-${widget.name}`"
 			v-for="widget in widgets"
 			v-else
 			:key="widget.id"
@@ -71,8 +75,8 @@
 import { defineAsyncComponent, reactive, ref, computed } from "vue";
 import { v4 as uuid } from "uuid";
 import { VueDraggable } from "vue-draggable-plus";
-import Select from "@/components/form/Select.vue";
-import Button from "@/components/Button.vue";
+import MkSelect from "@/components/form/select.vue";
+import MkButton from "@/components/MkButton.vue";
 import { widgets as widgetDefs } from "@/widgets";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
@@ -166,7 +170,6 @@ function onContextmenu(widget: Widget, ev: MouseEvent) {
 	display: flex;
 	flex-direction: column;
 	flex-grow: 1;
-
 	> header {
 		margin: 16px 0;
 
diff --git a/packages/client/src/components/Window.vue b/packages/client/src/components/MkWindow.vue
similarity index 100%
rename from packages/client/src/components/Window.vue
rename to packages/client/src/components/MkWindow.vue
diff --git a/packages/client/src/components/form/CheckBox.vue b/packages/client/src/components/form/checkbox.vue
similarity index 92%
rename from packages/client/src/components/form/CheckBox.vue
rename to packages/client/src/components/form/checkbox.vue
index be7b62c6e..a4d9716bb 100644
--- a/packages/client/src/components/form/CheckBox.vue
+++ b/packages/client/src/components/form/checkbox.vue
@@ -17,13 +17,8 @@
 		</span>
 		<span class="label">
 			<!-- TODO: 無名slotの方は廃止 -->
-			<span @click="toggle">
-				<slot name="label"></slot>
-				<slot></slot>
-			</span>
-			<p class="caption">
-				<slot name="caption"></slot>
-			</p>
+			<span @click="toggle"><slot name="label"></slot><slot></slot></span>
+			<p class="caption"><slot name="caption"></slot></p>
 		</span>
 	</div>
 </template>
@@ -31,7 +26,7 @@
 <script lang="ts" setup>
 import { toRefs, Ref } from "vue";
 import * as os from "@/os";
-import Ripple from "@/components/Ripple.vue";
+import Ripple from "@/components/MkRipple.vue";
 import { i18n } from "@/i18n";
 
 const props = defineProps<{
diff --git a/packages/client/src/components/form/Folder.vue b/packages/client/src/components/form/folder.vue
similarity index 84%
rename from packages/client/src/components/form/Folder.vue
rename to packages/client/src/components/form/folder.vue
index c609b461f..fb0b081ad 100644
--- a/packages/client/src/components/form/Folder.vue
+++ b/packages/client/src/components/form/folder.vue
@@ -1,24 +1,18 @@
 <template>
 	<details class="dwzlatin" :open="defaultOpen">
 		<summary class="header _button">
-			<span class="icon">
-				<slot name="icon"></slot>
-			</span>
-			<span class="text">
-				<slot name="label"></slot>
-			</span>
+			<span class="icon"><slot name="icon"></slot></span>
+			<span class="text"><slot name="label"></slot></span>
 			<span class="right">
-				<span class="text">
-					<slot name="suffix"></slot>
-				</span>
+				<span class="text"><slot name="suffix"></slot></span>
 				<i v-if="opened" class="ph-caret-up ph-bold ph-lg icon"></i>
 				<i v-else class="ph-caret-down ph-bold ph-lg icon"></i>
 			</span>
 		</summary>
 		<div class="body">
-			<Spacer :margin-min="14" :margin-max="22">
+			<MkSpacer :margin-min="14" :margin-max="22">
 				<slot></slot>
-			</Spacer>
+			</MkSpacer>
 		</div>
 	</details>
 </template>
diff --git a/packages/client/src/components/form/Input.vue b/packages/client/src/components/form/input.vue
similarity index 95%
rename from packages/client/src/components/form/Input.vue
rename to packages/client/src/components/form/input.vue
index 585553847..f54e25fdc 100644
--- a/packages/client/src/components/form/Input.vue
+++ b/packages/client/src/components/form/input.vue
@@ -1,9 +1,7 @@
 <template>
 	<div class="matxzzsk">
 		<label>
-			<div class="label">
-				<slot name="label"></slot>
-			</div>
+			<div class="label"><slot name="label"></slot></div>
 			<div class="input" :class="{ inline, disabled, focused }">
 				<div ref="prefixEl" class="prefix">
 					<slot name="prefix"></slot>
@@ -34,17 +32,15 @@
 					<slot name="suffix"></slot>
 				</div>
 			</div>
-			<div class="caption">
-				<slot name="caption"></slot>
-			</div>
+			<div class="caption"><slot name="caption"></slot></div>
 		</label>
 
-		<Button
+		<MkButton
 			v-if="manualSave && changed"
 			primary
 			class="save"
 			@click="updated"
-			><i class="ph-check ph-bold ph-lg"></i> {{ i18n.ts.save }}</Button
+			><i class="ph-check ph-bold ph-lg"></i> {{ i18n.ts.save }}</MkButton
 		>
 	</div>
 </template>
@@ -60,7 +56,7 @@ import {
 	watch,
 } from "vue";
 import { debounce } from "throttle-debounce";
-import Button from "@/components/Button.vue";
+import MkButton from "@/components/MkButton.vue";
 import { useInterval } from "@/scripts/use-interval";
 import { i18n } from "@/i18n";
 
@@ -265,7 +261,6 @@ defineExpose({
 					white-space: nowrap;
 					text-overflow: ellipsis;
 				}
-
 				> :deep(button) {
 					pointer-events: all;
 				}
diff --git a/packages/client/src/components/form/Link.vue b/packages/client/src/components/form/link.vue
similarity index 80%
rename from packages/client/src/components/form/Link.vue
rename to packages/client/src/components/form/link.vue
index dd0e6e67f..01acb2951 100644
--- a/packages/client/src/components/form/Link.vue
+++ b/packages/client/src/components/form/link.vue
@@ -1,39 +1,27 @@
 <template>
 	<div class="ffcbddfc" :class="{ inline }">
 		<a v-if="external" class="main _button" :href="to" target="_blank">
-			<span class="icon">
-				<slot name="icon"></slot>
-			</span>
-			<span class="text">
-				<slot></slot>
-			</span>
+			<span class="icon"><slot name="icon"></slot></span>
+			<span class="text"><slot></slot></span>
 			<span class="right">
-				<span class="text">
-					<slot name="suffix"></slot>
-				</span>
+				<span class="text"><slot name="suffix"></slot></span>
 				<i class="ph-arrow-square-out ph-bold ph-lg icon"></i>
 			</span>
 		</a>
-		<A
+		<MkA
 			v-else
 			class="main _button"
 			:class="{ active }"
 			:to="to"
 			:behavior="behavior"
 		>
-			<span class="icon">
-				<slot name="icon"></slot>
-			</span>
-			<span class="text">
-				<slot></slot>
-			</span>
+			<span class="icon"><slot name="icon"></slot></span>
+			<span class="text"><slot></slot></span>
 			<span class="right">
-				<span class="text">
-					<slot name="suffix"></slot>
-				</span>
+				<span class="text"><slot name="suffix"></slot></span>
 				<i class="ph-caret-right ph-bold ph-lg icon"></i>
 			</span>
-		</A>
+		</MkA>
 	</div>
 </template>
 
diff --git a/packages/client/src/components/form/Radio.vue b/packages/client/src/components/form/radio.vue
similarity index 100%
rename from packages/client/src/components/form/Radio.vue
rename to packages/client/src/components/form/radio.vue
diff --git a/packages/client/src/components/form/Radios.vue b/packages/client/src/components/form/radios.vue
similarity index 96%
rename from packages/client/src/components/form/Radios.vue
rename to packages/client/src/components/form/radios.vue
index 04dfb9db6..849ad4c9f 100644
--- a/packages/client/src/components/form/Radios.vue
+++ b/packages/client/src/components/form/radios.vue
@@ -1,10 +1,10 @@
 <script lang="ts">
 import { defineComponent, h } from "vue";
-import Radio from "./Radio.vue";
+import MkRadio from "./radio.vue";
 
 export default defineComponent({
 	components: {
-		Radio,
+		MkRadio,
 	},
 	props: {
 		modelValue: {
@@ -54,7 +54,7 @@ export default defineComponent({
 					},
 					options.map((option) =>
 						h(
-							Radio,
+							MkRadio,
 							{
 								key: option.key,
 								value: option.props?.value,
@@ -88,7 +88,6 @@ export default defineComponent({
 .novjtcto {
 	border: 0;
 	padding: 0;
-
 	> .label {
 		font-size: 0.85em;
 		padding: 0 0 8px 0;
diff --git a/packages/client/src/components/form/Range.vue b/packages/client/src/components/form/range.vue
similarity index 94%
rename from packages/client/src/components/form/Range.vue
rename to packages/client/src/components/form/range.vue
index 3f56a02df..38ebe29e3 100644
--- a/packages/client/src/components/form/Range.vue
+++ b/packages/client/src/components/form/range.vue
@@ -1,8 +1,6 @@
 <template>
 	<label class="timctyfi" :class="{ disabled, easing }">
-		<div class="label">
-			<slot name="label"></slot>
-		</div>
+		<div class="label"><slot name="label"></slot></div>
 		<div v-adaptive-border class="body">
 			<div class="container">
 				<input
@@ -32,9 +30,7 @@
 				</datalist>
 			</div>
 		</div>
-		<div class="caption">
-			<slot name="caption"></slot>
-		</div>
+		<div class="caption"><slot name="caption"></slot></div>
 	</label>
 </template>
 
@@ -85,7 +81,7 @@ const tooltipShowing = ref(false);
 function tooltipShow() {
 	tooltipShowing.value = true;
 	os.popup(
-		defineAsyncComponent(() => import("@/components/Tooltip.vue")),
+		defineAsyncComponent(() => import("@/components/MkTooltip.vue")),
 		{
 			showing: tooltipShowing,
 			text: computed(() => {
@@ -161,7 +157,6 @@ function tooltipHide() {
 					background: var(--accentLighten);
 				}
 			}
-
 			> input {
 				width: 100%;
 				background: none;
@@ -169,11 +164,9 @@ function tooltipHide() {
 				&::-webkit-slider-runnable-track {
 					@include track;
 				}
-
 				&::-moz-range-track {
 					@include track;
 				}
-
 				&::-ms-track {
 					@include track;
 				}
@@ -181,7 +174,6 @@ function tooltipHide() {
 				&::-moz-range-progress {
 					@include fill;
 				}
-
 				&::-ms-fill-lower {
 					@include fill;
 				}
@@ -190,11 +182,9 @@ function tooltipHide() {
 					margin-top: -6.5px;
 					@include thumb;
 				}
-
 				&::-moz-range-thumb {
 					@include thumb;
 				}
-
 				&::-ms-thumb {
 					@include thumb;
 				}
diff --git a/packages/client/src/components/form/Section.vue b/packages/client/src/components/form/section.vue
similarity index 100%
rename from packages/client/src/components/form/Section.vue
rename to packages/client/src/components/form/section.vue
diff --git a/packages/client/src/components/form/Select.vue b/packages/client/src/components/form/select.vue
similarity index 94%
rename from packages/client/src/components/form/Select.vue
rename to packages/client/src/components/form/select.vue
index aa8ee03da..08f0e47df 100644
--- a/packages/client/src/components/form/Select.vue
+++ b/packages/client/src/components/form/select.vue
@@ -1,17 +1,13 @@
 <template>
 	<div class="vblkjoeq">
-		<div class="label" @click="focus">
-			<slot name="label"></slot>
-		</div>
+		<div class="label" @click="focus"><slot name="label"></slot></div>
 		<div
 			ref="container"
 			class="input"
 			:class="{ inline, disabled, focused }"
 			@mousedown.prevent="show"
 		>
-			<div ref="prefixEl" class="prefix">
-				<slot name="prefix"></slot>
-			</div>
+			<div ref="prefixEl" class="prefix"><slot name="prefix"></slot></div>
 			<select
 				ref="inputEl"
 				v-model="v"
@@ -37,13 +33,11 @@
 				></i>
 			</div>
 		</div>
-		<div class="caption">
-			<slot name="caption"></slot>
-		</div>
+		<div class="caption"><slot name="caption"></slot></div>
 
-		<Button v-if="manualSave && changed" primary @click="updated"
+		<MkButton v-if="manualSave && changed" primary @click="updated"
 			><i class="ph-floppy-disk-back ph-bold ph-lg"></i>
-			{{ i18n.ts.save }}</Button
+			{{ i18n.ts.save }}</MkButton
 		>
 	</div>
 </template>
@@ -59,7 +53,7 @@ import {
 	useSlots,
 	watch,
 } from "vue";
-import Button from "@/components/Button.vue";
+import MkButton from "@/components/MkButton.vue";
 import * as os from "@/os";
 import { useInterval } from "@/scripts/use-interval";
 import { i18n } from "@/i18n";
diff --git a/packages/client/src/components/form/Slot.vue b/packages/client/src/components/form/slot.vue
similarity index 100%
rename from packages/client/src/components/form/Slot.vue
rename to packages/client/src/components/form/slot.vue
diff --git a/packages/client/src/components/form/Split.vue b/packages/client/src/components/form/split.vue
similarity index 100%
rename from packages/client/src/components/form/Split.vue
rename to packages/client/src/components/form/split.vue
diff --git a/packages/client/src/components/form/Suspense.vue b/packages/client/src/components/form/suspense.vue
similarity index 91%
rename from packages/client/src/components/form/Suspense.vue
rename to packages/client/src/components/form/suspense.vue
index 626bfb1fd..2b06bcbbb 100644
--- a/packages/client/src/components/form/Suspense.vue
+++ b/packages/client/src/components/form/suspense.vue
@@ -1,7 +1,7 @@
 <template>
 	<transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
 		<div v-if="pending">
-			<Loading />
+			<MkLoading />
 		</div>
 		<div v-else-if="resolved">
 			<slot :result="result"></slot>
@@ -12,9 +12,9 @@
 					<i class="ph-warning ph-bold ph-lg"></i>
 					{{ i18n.ts.somethingHappened }}
 				</div>
-				<Button inline class="retry" @click="retry"
+				<MkButton inline class="retry" @click="retry"
 					><i class="ph-arrow-clockwise ph-bold ph-lg"></i>
-					{{ i18n.ts.retry }}</Button
+					{{ i18n.ts.retry }}</MkButton
 				>
 			</div>
 		</div>
@@ -24,12 +24,12 @@
 <script lang="ts">
 import type { PropType } from "vue";
 import { defineComponent, ref, watch } from "vue";
-import Button from "@/components/Button.vue";
+import MkButton from "@/components/MkButton.vue";
 import { i18n } from "@/i18n";
 
 export default defineComponent({
 	components: {
-		Button,
+		MkButton,
 	},
 
 	props: {
@@ -95,7 +95,6 @@ export default defineComponent({
 .fade-leave-active {
 	transition: opacity 0.125s ease;
 }
-
 .fade-enter-from,
 .fade-leave-to {
 	opacity: 0;
diff --git a/packages/client/src/components/form/Switch.vue b/packages/client/src/components/form/switch.vue
similarity index 100%
rename from packages/client/src/components/form/Switch.vue
rename to packages/client/src/components/form/switch.vue
diff --git a/packages/client/src/components/form/Textarea.vue b/packages/client/src/components/form/textarea.vue
similarity index 96%
rename from packages/client/src/components/form/Textarea.vue
rename to packages/client/src/components/form/textarea.vue
index c9d888005..9ea38670c 100644
--- a/packages/client/src/components/form/Textarea.vue
+++ b/packages/client/src/components/form/textarea.vue
@@ -23,18 +23,16 @@
 					@input="onInput"
 				></textarea>
 			</div>
-			<div class="caption">
-				<slot name="caption"></slot>
-			</div>
+			<div class="caption"><slot name="caption"></slot></div>
 		</label>
 
-		<Button
+		<MkButton
 			v-if="manualSave && changed"
 			primary
 			class="save"
 			@click="updated"
 			><i class="ph-floppy-disk-back ph-bold ph-lg"></i>
-			{{ i18n.ts.save }}</Button
+			{{ i18n.ts.save }}</MkButton
 		>
 	</div>
 </template>
@@ -51,12 +49,12 @@ import {
 	watch,
 } from "vue";
 import { debounce } from "throttle-debounce";
-import Button from "@/components/Button.vue";
+import MkButton from "@/components/MkButton.vue";
 import { i18n } from "@/i18n";
 
 export default defineComponent({
 	components: {
-		Button,
+		MkButton,
 	},
 
 	props: {
@@ -203,12 +201,10 @@ export default defineComponent({
 			font-size: 0.85em;
 			padding: 0 0 8px 0;
 			user-select: none;
-
 			&:empty {
 				display: none;
 			}
 		}
-
 		> .caption {
 			font-size: 0.85em;
 			padding: 8px 0 0 0;
@@ -218,7 +214,6 @@ export default defineComponent({
 				display: none;
 			}
 		}
-
 		> .input {
 			position: relative;
 
diff --git a/packages/client/src/components/global/Anchor.vue b/packages/client/src/components/global/MkA.vue
similarity index 100%
rename from packages/client/src/components/global/Anchor.vue
rename to packages/client/src/components/global/MkA.vue
diff --git a/packages/client/src/components/global/Acct.vue b/packages/client/src/components/global/MkAcct.vue
similarity index 100%
rename from packages/client/src/components/global/Acct.vue
rename to packages/client/src/components/global/MkAcct.vue
diff --git a/packages/client/src/components/global/Avatar.vue b/packages/client/src/components/global/MkAvatar.vue
similarity index 96%
rename from packages/client/src/components/global/Avatar.vue
rename to packages/client/src/components/global/MkAvatar.vue
index 094a690a3..8d6941670 100644
--- a/packages/client/src/components/global/Avatar.vue
+++ b/packages/client/src/components/global/MkAvatar.vue
@@ -9,13 +9,13 @@
 		@click="onClick"
 	>
 		<img class="inner" :src="url" decoding="async" />
-		<UserOnlineIndicator
+		<MkUserOnlineIndicator
 			v-if="showIndicator && user.instance == null"
 			class="indicator"
 			:user="user"
 		/>
 	</span>
-	<A
+	<MkA
 		v-else
 		v-user-preview="disablePreview ? undefined : user.id"
 		class="eiwwqkts _noSelect"
@@ -27,12 +27,12 @@
 		@click.stop
 	>
 		<img class="inner" :src="url" decoding="async" />
-		<UserOnlineIndicator
+		<MkUserOnlineIndicator
 			v-if="showIndicator && user.instance == null"
 			class="indicator"
 			:user="user"
 		/>
-	</A>
+	</MkA>
 </template>
 
 <script lang="ts" setup>
@@ -41,7 +41,7 @@ import type * as misskey from "iceshrimp-js";
 import { getStaticImageUrl } from "@/scripts/get-static-image-url";
 import { extractAvgColorFromBlurhash } from "@/scripts/extract-avg-color-from-blurhash";
 import { acct, userPage } from "@/filters/user";
-import UserOnlineIndicator from "@/components/UserOnlineIndicator.vue";
+import MkUserOnlineIndicator from "@/components/MkUserOnlineIndicator.vue";
 import { defaultStore } from "@/store";
 
 const props = withDefaults(
@@ -92,19 +92,15 @@ watch(
 	from {
 		transform: rotate(37.6deg) skew(30deg);
 	}
-
 	25% {
 		transform: rotate(10deg) skew(30deg);
 	}
-
 	50% {
 		transform: rotate(20deg) skew(30deg);
 	}
-
 	75% {
 		transform: rotate(0deg) skew(30deg);
 	}
-
 	to {
 		transform: rotate(37.6deg) skew(30deg);
 	}
@@ -114,19 +110,15 @@ watch(
 	from {
 		transform: rotate(-37.6deg) skew(-30deg);
 	}
-
 	30% {
 		transform: rotate(-10deg) skew(-30deg);
 	}
-
 	55% {
 		transform: rotate(-20deg) skew(-30deg);
 	}
-
 	75% {
 		transform: rotate(0deg) skew(-30deg);
 	}
-
 	to {
 		transform: rotate(-37.6deg) skew(-30deg);
 	}
diff --git a/packages/client/src/components/global/Ellipsis.vue b/packages/client/src/components/global/MkEllipsis.vue
similarity index 100%
rename from packages/client/src/components/global/Ellipsis.vue
rename to packages/client/src/components/global/MkEllipsis.vue
diff --git a/packages/client/src/components/global/Emoji.vue b/packages/client/src/components/global/MkEmoji.vue
similarity index 100%
rename from packages/client/src/components/global/Emoji.vue
rename to packages/client/src/components/global/MkEmoji.vue
diff --git a/packages/client/src/components/global/Error.vue b/packages/client/src/components/global/MkError.vue
similarity index 74%
rename from packages/client/src/components/global/Error.vue
rename to packages/client/src/components/global/MkError.vue
index f76564ccf..77745d017 100644
--- a/packages/client/src/components/global/Error.vue
+++ b/packages/client/src/components/global/MkError.vue
@@ -1,20 +1,24 @@
 <template>
 	<transition :name="$store.state.animation ? 'zoom' : ''" appear>
 		<div class="mjndxjcg">
-			<img :src="instance.images.error" class="_ghost" alt="Error" />
+			<img
+				:src="instance.images.error"
+				class="_ghost"
+				alt="Error"
+			/>
 			<p>
 				<i class="ph-warning ph-bold ph-lg"></i>
 				{{ i18n.ts.somethingHappened }}
 			</p>
-			<Button class="button" @click="() => $emit('retry')">{{
+			<MkButton class="button" @click="() => $emit('retry')">{{
 				i18n.ts.retry
-			}}</Button>
+			}}</MkButton>
 		</div>
 	</transition>
 </template>
 
 <script lang="ts" setup>
-import Button from "@/components/Button.vue";
+import MkButton from "@/components/MkButton.vue";
 import { i18n } from "@/i18n";
 import { instance } from "@/instance";
 </script>
diff --git a/packages/client/src/components/global/Loading.vue b/packages/client/src/components/global/MkLoading.vue
similarity index 100%
rename from packages/client/src/components/global/Loading.vue
rename to packages/client/src/components/global/MkLoading.vue
diff --git a/packages/client/src/components/global/MisskeyFlavoredMarkdown.vue b/packages/client/src/components/global/MkMisskeyFlavoredMarkdown.vue
similarity index 100%
rename from packages/client/src/components/global/MisskeyFlavoredMarkdown.vue
rename to packages/client/src/components/global/MkMisskeyFlavoredMarkdown.vue
diff --git a/packages/client/src/components/global/PageHeader.vue b/packages/client/src/components/global/MkPageHeader.vue
similarity index 98%
rename from packages/client/src/components/global/PageHeader.vue
rename to packages/client/src/components/global/MkPageHeader.vue
index 2b8261d7f..d1165d27a 100644
--- a/packages/client/src/components/global/PageHeader.vue
+++ b/packages/client/src/components/global/MkPageHeader.vue
@@ -18,7 +18,7 @@
 				>
 					<i class="ph-caret-left ph-bold ph-lg"></i>
 				</button>
-				<Avatar
+				<MkAvatar
 					v-if="narrow && props.displayMyAvatar && $i"
 					class="avatar button"
 					:user="$i"
@@ -32,7 +32,7 @@
 				class="titleContainer"
 				@click="showTabsPopup"
 			>
-				<Avatar
+				<MkAvatar
 					v-if="metadata && metadata.avatar"
 					class="avatar"
 					:user="metadata.avatar"
@@ -45,7 +45,7 @@
 				></i>
 
 				<div class="title">
-					<UserName
+					<MkUserName
 						v-if="metadata.userName"
 						:user="metadata.userName"
 						:nowrap="true"
@@ -103,18 +103,18 @@
 				</button>
 			</template>
 			<template v-if="metadata && metadata.avatar">
-				<FollowButton
+				<MkFollowButton
 					v-if="narrow"
 					:user="metadata.avatar"
 					:full="false"
 					class="fullButton"
-				></FollowButton>
-				<FollowButton
+				></MkFollowButton>
+				<MkFollowButton
 					v-else
 					:user="metadata.avatar"
 					:full="true"
 					class="fullButton"
-				></FollowButton>
+				></MkFollowButton>
 			</template>
 		</div>
 	</header>
@@ -132,7 +132,7 @@ import {
 	shallowReactive,
 	watch,
 } from "vue";
-import FollowButton from "@/components/FollowButton.vue";
+import MkFollowButton from "@/components/MkFollowButton.vue";
 import { popupMenu } from "@/os";
 import { scrollToTop } from "@/scripts/scroll";
 import { globalEvents } from "@/events";
@@ -309,26 +309,21 @@ onUnmounted(() => {
 	overflow: hidden;
 	-webkit-backdrop-filter: var(--blur, blur(15px));
 	backdrop-filter: var(--blur, blur(15px));
-
 	@media (max-width: 500px) {
 		padding-inline: 16px;
-
 		&.tabs > .buttons > :deep(.follow-button > span) {
 			display: none;
 		}
 	}
-
 	@media (max-width: 700px) {
 		> .left {
 			min-width: unset !important;
 			max-width: 40%;
 		}
-
 		> .left,
 		> .right {
 			flex: unset !important;
 		}
-
 		&:not(.tabs) {
 			> .left {
 				width: 0 !important;
@@ -336,7 +331,6 @@ onUnmounted(() => {
 				max-width: unset !important;
 			}
 		}
-
 		&.tabs {
 			> .left {
 				flex-shrink: 0 !important;
@@ -355,7 +349,6 @@ onUnmounted(() => {
 		border-bottom: solid 0.5px var(--divider);
 		z-index: -1;
 	}
-
 	&::after {
 		content: "";
 		position: absolute;
@@ -376,13 +369,11 @@ onUnmounted(() => {
 
 	> .left {
 		display: flex;
-
 		> .buttons {
 			&:not(:empty) {
 				margin-right: 8px;
 				margin-left: calc(0px - var(--margin));
 			}
-
 			> .avatar {
 				width: 32px;
 				height: 32px;
@@ -396,11 +387,9 @@ onUnmounted(() => {
 		display: flex;
 		align-items: center;
 		height: var(--height);
-
 		&.right {
 			justify-content: flex-end;
 			z-index: 2;
-
 			// margin-right: calc(0px - var(--margin));
 			// margin-left: var(--margin);
 			> .button:last-child {
@@ -421,7 +410,6 @@ onUnmounted(() => {
 			align-items: center;
 			justify-content: center;
 		}
-
 		> .titleContainer {
 			display: flex;
 			align-items: center;
@@ -431,7 +419,6 @@ onUnmounted(() => {
 			text-align: left;
 			font-weight: bold;
 			flex-shrink: 0;
-
 			> .avatar {
 				$size: 32px;
 				display: inline-block;
@@ -482,13 +469,11 @@ onUnmounted(() => {
 		flex-shrink: 9999;
 		overflow: hidden;
 	}
-
 	> .left {
 		min-width: 20%;
 		margin-left: -10px;
 		padding-left: 10px;
 	}
-
 	> .right {
 		// margin-left: auto;
 		min-width: max-content;
@@ -518,25 +503,21 @@ onUnmounted(() => {
 			transparent
 		);
 		scrollbar-width: none;
-
 		&::-webkit-scrollbar {
 			display: none;
 		}
 
 		&.collapse {
 			--width: 2.7em;
-
 			// --width: 1.33333em
 			> .tab {
 				width: 2.7em;
 				min-width: 2.7em !important;
-
 				&:not(.active) > .title {
 					opacity: 0;
 				}
 			}
 		}
-
 		&:not(.collapse) > .tab {
 			--width: max-content !important;
 		}
@@ -573,12 +554,10 @@ onUnmounted(() => {
 			> .icon + .title {
 				margin-left: 8px;
 			}
-
 			> .title {
 				transition: opacity 0.2s;
 			}
 		}
-
 		> .highlight {
 			position: absolute;
 			bottom: 0;
diff --git a/packages/client/src/components/global/Spacer.vue b/packages/client/src/components/global/MkSpacer.vue
similarity index 100%
rename from packages/client/src/components/global/Spacer.vue
rename to packages/client/src/components/global/MkSpacer.vue
diff --git a/packages/client/src/components/global/StickyContainer.vue b/packages/client/src/components/global/MkStickyContainer.vue
similarity index 100%
rename from packages/client/src/components/global/StickyContainer.vue
rename to packages/client/src/components/global/MkStickyContainer.vue
diff --git a/packages/client/src/components/global/Time.vue b/packages/client/src/components/global/MkTime.vue
similarity index 100%
rename from packages/client/src/components/global/Time.vue
rename to packages/client/src/components/global/MkTime.vue
diff --git a/packages/client/src/components/global/Url.vue b/packages/client/src/components/global/MkUrl.vue
similarity index 95%
rename from packages/client/src/components/global/Url.vue
rename to packages/client/src/components/global/MkUrl.vue
index bf7eb9aee..41bb05392 100644
--- a/packages/client/src/components/global/Url.vue
+++ b/packages/client/src/components/global/MkUrl.vue
@@ -1,6 +1,6 @@
 <template>
 	<component
-		:is="self ? 'A' : 'a'"
+		:is="self ? 'MkA' : 'a'"
 		ref="el"
 		class="ieqqeuvs url _link"
 		:[attr]="self ? props.url.substring(local.length) : props.url"
@@ -50,7 +50,9 @@ const el = ref();
 
 useTooltip(el, (showing) => {
 	os.popup(
-		defineAsyncComponent(() => import("@/components/UrlPreviewPopup.vue")),
+		defineAsyncComponent(
+			() => import("@/components/MkUrlPreviewPopup.vue"),
+		),
 		{
 			showing,
 			url: props.url,
@@ -74,7 +76,6 @@ const target = self ? null : "_blank";
 <style lang="scss" scoped>
 .url {
 	text-decoration: none !important;
-
 	> span {
 		text-decoration: underline var(--fgTransparent);
 		text-decoration-thickness: 1px;
diff --git a/packages/client/src/components/global/UserName.vue b/packages/client/src/components/global/MkUserName.vue
similarity index 100%
rename from packages/client/src/components/global/UserName.vue
rename to packages/client/src/components/global/MkUserName.vue
diff --git a/packages/client/src/components/global/RouterView.vue b/packages/client/src/components/global/RouterView.vue
index 7aeb9f080..2073c3a55 100644
--- a/packages/client/src/components/global/RouterView.vue
+++ b/packages/client/src/components/global/RouterView.vue
@@ -11,7 +11,7 @@
 			/>
 
 			<template #fallback>
-				<Loading />
+				<MkLoading />
 			</template>
 		</Suspense>
 	</KeepAlive>
diff --git a/packages/client/src/components/index.ts b/packages/client/src/components/index.ts
index 65e0d47e1..832426c6b 100644
--- a/packages/client/src/components/index.ts
+++ b/packages/client/src/components/index.ts
@@ -1,39 +1,39 @@
 import { App } from "vue";
 
-import Mfm from "./global/MisskeyFlavoredMarkdown.vue";
-import A from "./global/Anchor.vue";
-import Acct from "./global/Acct.vue";
-import Avatar from "./global/Avatar.vue";
-import Emoji from "./global/Emoji.vue";
-import UserName from "./global/UserName.vue";
-import Ellipsis from "./global/Ellipsis.vue";
-import Time from "./global/Time.vue";
-import Url from "./global/Url.vue";
+import Mfm from "./global/MkMisskeyFlavoredMarkdown.vue";
+import MkA from "./global/MkA.vue";
+import MkAcct from "./global/MkAcct.vue";
+import MkAvatar from "./global/MkAvatar.vue";
+import MkEmoji from "./global/MkEmoji.vue";
+import MkUserName from "./global/MkUserName.vue";
+import MkEllipsis from "./global/MkEllipsis.vue";
+import MkTime from "./global/MkTime.vue";
+import MkUrl from "./global/MkUrl.vue";
 import I18n from "./global/i18n";
 import RouterView from "./global/RouterView.vue";
-import Loading from "./global/Loading.vue";
-import Error_ from "./global/Error.vue";
-import PageHeader from "./global/PageHeader.vue";
-import Spacer from "./global/Spacer.vue";
-import StickyContainer from "./global/StickyContainer.vue";
+import MkLoading from "./global/MkLoading.vue";
+import MkError from "./global/MkError.vue";
+import MkPageHeader from "./global/MkPageHeader.vue";
+import MkSpacer from "./global/MkSpacer.vue";
+import MkStickyContainer from "./global/MkStickyContainer.vue";
 
 export default function (app: App) {
 	app.component("I18n", I18n);
 	app.component("RouterView", RouterView);
 	app.component("Mfm", Mfm);
-	app.component("A", A);
-	app.component("Acct", Acct);
-	app.component("Avatar", Avatar);
-	app.component("Emoji", Emoji);
-	app.component("UserName", UserName);
-	app.component("Ellipsis", Ellipsis);
-	app.component("Time", Time);
-	app.component("Url", Url);
-	app.component("Loading", Loading);
-	app.component("Error_", Error_);
-	app.component("PageHeader", PageHeader);
-	app.component("Spacer", Spacer);
-	app.component("StickyContainer", StickyContainer);
+	app.component("MkA", MkA);
+	app.component("MkAcct", MkAcct);
+	app.component("MkAvatar", MkAvatar);
+	app.component("MkEmoji", MkEmoji);
+	app.component("MkUserName", MkUserName);
+	app.component("MkEllipsis", MkEllipsis);
+	app.component("MkTime", MkTime);
+	app.component("MkUrl", MkUrl);
+	app.component("MkLoading", MkLoading);
+	app.component("MkError", MkError);
+	app.component("MkPageHeader", MkPageHeader);
+	app.component("MkSpacer", MkSpacer);
+	app.component("MkStickyContainer", MkStickyContainer);
 }
 
 declare module "@vue/runtime-core" {
@@ -41,18 +41,18 @@ declare module "@vue/runtime-core" {
 		I18n: typeof I18n;
 		RouterView: typeof RouterView;
 		Mfm: typeof Mfm;
-		A: typeof A;
-		Acct: typeof Acct;
-		Avatar: typeof Avatar;
-		Emoji: typeof Emoji;
-		UserName: typeof UserName;
-		Ellipsis: typeof Ellipsis;
-		Time: typeof Time;
-		Url: typeof Url;
-		Loading: typeof Loading;
-		Error_: typeof Error_;
-		PageHeader: typeof PageHeader;
-		Spacer: typeof Spacer;
-		StickyContainer: typeof StickyContainer;
+		MkA: typeof MkA;
+		MkAcct: typeof MkAcct;
+		MkAvatar: typeof MkAvatar;
+		MkEmoji: typeof MkEmoji;
+		MkUserName: typeof MkUserName;
+		MkEllipsis: typeof MkEllipsis;
+		MkTime: typeof MkTime;
+		MkUrl: typeof MkUrl;
+		MkLoading: typeof MkLoading;
+		MkError: typeof MkError;
+		MkPageHeader: typeof MkPageHeader;
+		MkSpacer: typeof MkSpacer;
+		MkStickyContainer: typeof MkStickyContainer;
 	}
 }
diff --git a/packages/client/src/components/mfm.ts b/packages/client/src/components/mfm.ts
index 95573fd5a..cb0942a33 100644
--- a/packages/client/src/components/mfm.ts
+++ b/packages/client/src/components/mfm.ts
@@ -1,16 +1,16 @@
 import { defineComponent, h } from "vue";
 import * as mfm from "mfm-js";
 import type { VNode } from "vue";
-import Url from "@/components/global/Url.vue";
-import Link from "@/components/Link.vue";
-import Mention from "@/components/Mention.vue";
-import Emoji from "@/components/global/Emoji.vue";
+import MkUrl from "@/components/global/MkUrl.vue";
+import MkLink from "@/components/MkLink.vue";
+import MkMention from "@/components/MkMention.vue";
+import MkEmoji from "@/components/global/MkEmoji.vue";
 import { concat } from "@/scripts/array";
-import Formula from "@/components/Formula.vue";
-import Code from "@/components/Code.vue";
-import WebSearch from "@/components/WebSearch.vue";
-import Sparkle from "@/components/Sparkle.vue";
-import A from "@/components/global/Anchor.vue";
+import MkFormula from "@/components/MkFormula.vue";
+import MkCode from "@/components/MkCode.vue";
+import MkGoogle from "@/components/MkGoogle.vue";
+import MkSparkle from "@/components/MkSparkle.vue";
+import MkA from "@/components/global/MkA.vue";
 import { host } from "@/config";
 import { reducedMotion } from "@/scripts/reduced-motion";
 import { defaultStore } from "@/store";
@@ -183,7 +183,7 @@ export default defineComponent({
 									if (reducedMotion()) {
 										return genEl(token.children);
 									}
-									return h(Sparkle, {}, genEl(token.children));
+									return h(MkSparkle, {}, genEl(token.children));
 								}
 								case "fade": {
 									const direction = token.props.args.out
@@ -364,7 +364,7 @@ export default defineComponent({
 
 						case "url": {
 							return [
-								h(Url, {
+								h(MkUrl, {
 									key: Math.random(),
 									url: token.props.url,
 									rel: "nofollow noopener",
@@ -375,7 +375,7 @@ export default defineComponent({
 						case "link": {
 							return [
 								h(
-									Link,
+									MkLink,
 									{
 										key: Math.random(),
 										url: token.props.url,
@@ -388,7 +388,7 @@ export default defineComponent({
 
 						case "mention": {
 							return [
-								h(Mention, {
+								h(MkMention, {
 									key: Math.random(),
 									host:
 										(token.props.host == null &&
@@ -404,7 +404,7 @@ export default defineComponent({
 						case "hashtag": {
 							return [
 								h(
-									A,
+									MkA,
 									{
 										key: Math.random(),
 										to: `/tags/${encodeURIComponent(token.props.hashtag)}`,
@@ -417,7 +417,7 @@ export default defineComponent({
 
 						case "blockCode": {
 							return [
-								h(Code, {
+								h(MkCode, {
 									key: Math.random(),
 									code: token.props.code,
 									lang: token.props.lang,
@@ -427,7 +427,7 @@ export default defineComponent({
 
 						case "inlineCode": {
 							return [
-								h(Code, {
+								h(MkCode, {
 									key: Math.random(),
 									code: token.props.code,
 									inline: true,
@@ -453,7 +453,7 @@ export default defineComponent({
 
 						case "emojiCode": {
 							return [
-								h(Emoji, {
+								h(MkEmoji, {
 									key: Math.random(),
 									emoji: `:${token.props.name}:`,
 									customEmojis: this.customEmojis,
@@ -464,7 +464,7 @@ export default defineComponent({
 
 						case "unicodeEmoji": {
 							return [
-								h(Emoji, {
+								h(MkEmoji, {
 									key: Math.random(),
 									emoji: token.props.emoji,
 									customEmojis: this.customEmojis,
@@ -475,7 +475,7 @@ export default defineComponent({
 
 						case "mathInline": {
 							return [
-								h(Formula, {
+								h(MkFormula, {
 									key: Math.random(),
 									formula: token.props.formula,
 									block: false,
@@ -485,7 +485,7 @@ export default defineComponent({
 
 						case "mathBlock": {
 							return [
-								h(Formula, {
+								h(MkFormula, {
 									key: Math.random(),
 									formula: token.props.formula,
 									block: true,
@@ -537,7 +537,7 @@ export default defineComponent({
 							}
 
 							return [
-								h(WebSearch, {
+								h(MkGoogle, {
 									key: Math.random(),
 									q: token.props.query,
 								}),
diff --git a/packages/client/src/components/page/Block.vue b/packages/client/src/components/page/page.block.vue
similarity index 53%
rename from packages/client/src/components/page/Block.vue
rename to packages/client/src/components/page/page.block.vue
index bce93c972..edeb33a14 100644
--- a/packages/client/src/components/page/Block.vue
+++ b/packages/client/src/components/page/page.block.vue
@@ -10,21 +10,21 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
-import XText from "./Text.vue";
-import XSection from "./Section.vue";
-import XImage from "./Image.vue";
-import XButton from "./Button.vue";
-import XNumberInput from "./NumberInput.vue";
-import XTextInput from "./TextInput.vue";
-import XTextareaInput from "./TextareaInput.vue";
-import XSwitch from "./Switch.vue";
-import XIf from "./If.vue";
-import XTextarea from "./Textarea.vue";
-import XPost from "./Post.vue";
-import XCounter from "./Counter.vue";
-import XRadioButton from "./RadioButton.vue";
-import XCanvas from "./Canvas.vue";
-import XNote from "./Note.vue";
+import XText from "./page.text.vue";
+import XSection from "./page.section.vue";
+import XImage from "./page.image.vue";
+import XButton from "./page.button.vue";
+import XNumberInput from "./page.number-input.vue";
+import XTextInput from "./page.text-input.vue";
+import XTextareaInput from "./page.textarea-input.vue";
+import XSwitch from "./page.switch.vue";
+import XIf from "./page.if.vue";
+import XTextarea from "./page.textarea.vue";
+import XPost from "./page.post.vue";
+import XCounter from "./page.counter.vue";
+import XRadioButton from "./page.radio-button.vue";
+import XCanvas from "./page.canvas.vue";
+import XNote from "./page.note.vue";
 import { Hpml } from "@/scripts/hpml/evaluator";
 import { Block } from "@/scripts/hpml/block";
 
diff --git a/packages/client/src/components/page/Button.vue b/packages/client/src/components/page/page.button.vue
similarity index 90%
rename from packages/client/src/components/page/Button.vue
rename to packages/client/src/components/page/page.button.vue
index 8a5f5fbc9..b3c42eb60 100644
--- a/packages/client/src/components/page/Button.vue
+++ b/packages/client/src/components/page/page.button.vue
@@ -1,21 +1,21 @@
 <template>
 	<div>
-		<Button class="kudkigyw" :primary="block.primary" @click="click()">{{
+		<MkButton class="kudkigyw" :primary="block.primary" @click="click()">{{
 			hpml.interpolate(block.text)
-		}}</Button>
+		}}</MkButton>
 	</div>
 </template>
 
 <script lang="ts">
 import { defineComponent, PropType, unref } from "vue";
-import Button from "../Button.vue";
+import MkButton from "../MkButton.vue";
 import * as os from "@/os";
 import { ButtonBlock } from "@/scripts/hpml/block";
 import { Hpml } from "@/scripts/hpml/evaluator";
 
 export default defineComponent({
 	components: {
-		Button,
+		MkButton,
 	},
 	props: {
 		block: {
diff --git a/packages/client/src/components/page/Canvas.vue b/packages/client/src/components/page/page.canvas.vue
similarity index 100%
rename from packages/client/src/components/page/Canvas.vue
rename to packages/client/src/components/page/page.canvas.vue
diff --git a/packages/client/src/components/page/Counter.vue b/packages/client/src/components/page/page.counter.vue
similarity index 88%
rename from packages/client/src/components/page/Counter.vue
rename to packages/client/src/components/page/page.counter.vue
index 84d450870..514790b5f 100644
--- a/packages/client/src/components/page/Counter.vue
+++ b/packages/client/src/components/page/page.counter.vue
@@ -1,21 +1,21 @@
 <template>
 	<div>
-		<Button class="llumlmnx" @click="click()">{{
+		<MkButton class="llumlmnx" @click="click()">{{
 			hpml.interpolate(block.text)
-		}}</Button>
+		}}</MkButton>
 	</div>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, PropType } from "vue";
-import Button from "../Button.vue";
+import MkButton from "../MkButton.vue";
 import * as os from "@/os";
 import { CounterVarBlock } from "@/scripts/hpml/block";
 import { Hpml } from "@/scripts/hpml/evaluator";
 
 export default defineComponent({
 	components: {
-		Button,
+		MkButton,
 	},
 	props: {
 		block: {
diff --git a/packages/client/src/components/page/If.vue b/packages/client/src/components/page/page.if.vue
similarity index 90%
rename from packages/client/src/components/page/If.vue
rename to packages/client/src/components/page/page.if.vue
index 118fc3928..7cc25f212 100644
--- a/packages/client/src/components/page/If.vue
+++ b/packages/client/src/components/page/page.if.vue
@@ -17,7 +17,7 @@ import { defineComponent, defineAsyncComponent, PropType } from "vue";
 
 export default defineComponent({
 	components: {
-		XBlock: defineAsyncComponent(() => import("./Block.vue")),
+		XBlock: defineAsyncComponent(() => import("./page.block.vue")),
 	},
 	props: {
 		block: {
diff --git a/packages/client/src/components/page/Image.vue b/packages/client/src/components/page/page.image.vue
similarity index 91%
rename from packages/client/src/components/page/Image.vue
rename to packages/client/src/components/page/page.image.vue
index 5398f2304..726446030 100644
--- a/packages/client/src/components/page/Image.vue
+++ b/packages/client/src/components/page/page.image.vue
@@ -13,7 +13,7 @@
 
 <script lang="ts" setup>
 import { defineComponent, PropType } from "vue";
-import ImgWithBlurhash from "@/components/ImgWithBlurhash.vue";
+import ImgWithBlurhash from "@/components/MkImgWithBlurhash.vue";
 import * as os from "@/os";
 import { ImageBlock } from "@/scripts/hpml/block";
 import { Hpml } from "@/scripts/hpml/evaluator";
diff --git a/packages/client/src/components/page/Note.vue b/packages/client/src/components/page/page.note.vue
similarity index 89%
rename from packages/client/src/components/page/Note.vue
rename to packages/client/src/components/page/page.note.vue
index c442bffe8..868418cd4 100644
--- a/packages/client/src/components/page/Note.vue
+++ b/packages/client/src/components/page/page.note.vue
@@ -15,8 +15,8 @@
 
 <script lang="ts">
 import { defineComponent, onMounted, PropType, Ref, ref } from "vue";
-import XNote from "@/components/Note.vue";
-import XNoteDetailed from "@/components/NoteDetailed.vue";
+import XNote from "@/components/MkNote.vue";
+import XNoteDetailed from "@/components/MkNoteDetailed.vue";
 import * as os from "@/os";
 import { NoteBlock } from "@/scripts/hpml/block";
 
diff --git a/packages/client/src/components/page/NumberInput.vue b/packages/client/src/components/page/page.number-input.vue
similarity index 93%
rename from packages/client/src/components/page/NumberInput.vue
rename to packages/client/src/components/page/page.number-input.vue
index ede532ed4..3426cf667 100644
--- a/packages/client/src/components/page/NumberInput.vue
+++ b/packages/client/src/components/page/page.number-input.vue
@@ -1,26 +1,26 @@
 <template>
 	<div>
-		<Input
+		<MkInput
 			class="kudkigyw"
 			:model-value="value"
 			type="number"
 			@update:modelValue="updateValue($event)"
 		>
 			<template #label>{{ hpml.interpolate(block.text) }}</template>
-		</Input>
+		</MkInput>
 	</div>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, PropType } from "vue";
-import Input from "../form/Input.vue";
+import MkInput from "../form/input.vue";
 import * as os from "@/os";
 import { Hpml } from "@/scripts/hpml/evaluator";
 import { NumberInputVarBlock } from "@/scripts/hpml/block";
 
 export default defineComponent({
 	components: {
-		Input,
+		MkInput,
 	},
 	props: {
 		block: {
diff --git a/packages/client/src/components/page/Post.vue b/packages/client/src/components/page/page.post.vue
similarity index 91%
rename from packages/client/src/components/page/Post.vue
rename to packages/client/src/components/page/page.post.vue
index 82dc0549e..2213d3021 100644
--- a/packages/client/src/components/page/Post.vue
+++ b/packages/client/src/components/page/page.post.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="ngbfujlo">
-		<Textarea :model-value="text" readonly style="margin: 0"></Textarea>
-		<Button
+		<MkTextarea :model-value="text" readonly style="margin: 0"></MkTextarea>
+		<MkButton
 			class="button"
 			primary
 			:disabled="posting || posted"
@@ -9,14 +9,14 @@
 		>
 			<i v-if="posted" class="ph-check ph-bold ph-lg"></i>
 			<i v-else class="ph-paper-plane-tilt ph-bold ph-lg"></i>
-		</Button>
+		</MkButton>
 	</div>
 </template>
 
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
-import Textarea from "../form/Textarea.vue";
-import Button from "../Button.vue";
+import MkTextarea from "../form/textarea.vue";
+import MkButton from "../MkButton.vue";
 import { apiUrl } from "@/config";
 import * as os from "@/os";
 import { PostBlock } from "@/scripts/hpml/block";
@@ -24,8 +24,8 @@ import { Hpml } from "@/scripts/hpml/evaluator";
 
 export default defineComponent({
 	components: {
-		Textarea,
-		Button,
+		MkTextarea,
+		MkButton,
 	},
 	props: {
 		block: {
diff --git a/packages/client/src/components/page/RadioButton.vue b/packages/client/src/components/page/page.radio-button.vue
similarity index 91%
rename from packages/client/src/components/page/RadioButton.vue
rename to packages/client/src/components/page/page.radio-button.vue
index a76d3c860..3d3878e4f 100644
--- a/packages/client/src/components/page/RadioButton.vue
+++ b/packages/client/src/components/page/page.radio-button.vue
@@ -1,27 +1,27 @@
 <template>
 	<div>
 		<div>{{ hpml.interpolate(block.title) }}</div>
-		<Radio
+		<MkRadio
 			v-for="item in block.values"
 			:key="item"
 			:modelValue="value"
 			:value="item"
 			@update:modelValue="updateValue($event)"
-			>{{ item }}</Radio
+			>{{ item }}</MkRadio
 		>
 	</div>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, PropType } from "vue";
-import Radio from "../form/Radio.vue";
+import MkRadio from "../form/radio.vue";
 import * as os from "@/os";
 import { Hpml } from "@/scripts/hpml/evaluator";
 import { RadioButtonVarBlock } from "@/scripts/hpml/block";
 
 export default defineComponent({
 	components: {
-		Radio,
+		MkRadio,
 	},
 	props: {
 		block: {
diff --git a/packages/client/src/components/page/Section.vue b/packages/client/src/components/page/page.section.vue
similarity index 93%
rename from packages/client/src/components/page/Section.vue
rename to packages/client/src/components/page/page.section.vue
index 702656c72..04de165f1 100644
--- a/packages/client/src/components/page/Section.vue
+++ b/packages/client/src/components/page/page.section.vue
@@ -22,7 +22,7 @@ import { Hpml } from "@/scripts/hpml/evaluator";
 
 export default defineComponent({
 	components: {
-		XBlock: defineAsyncComponent(() => import("./Block.vue")),
+		XBlock: defineAsyncComponent(() => import("./page.block.vue")),
 	},
 	props: {
 		block: {
diff --git a/packages/client/src/components/page/Switch.vue b/packages/client/src/components/page/page.switch.vue
similarity index 83%
rename from packages/client/src/components/page/Switch.vue
rename to packages/client/src/components/page/page.switch.vue
index 8b8f43ba7..7a00694e0 100644
--- a/packages/client/src/components/page/Switch.vue
+++ b/packages/client/src/components/page/page.switch.vue
@@ -1,21 +1,23 @@
 <template>
 	<div class="hkcxmtwj">
-		<Switch :model-value="value" @update:modelValue="updateValue($event)">{{
-			hpml.interpolate(block.text)
-		}}</Switch>
+		<MkSwitch
+			:model-value="value"
+			@update:modelValue="updateValue($event)"
+			>{{ hpml.interpolate(block.text) }}</MkSwitch
+		>
 	</div>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, PropType } from "vue";
-import Switch from "../form/Switch.vue";
+import MkSwitch from "../form/switch.vue";
 import * as os from "@/os";
 import { Hpml } from "@/scripts/hpml/evaluator";
 import { SwitchVarBlock } from "@/scripts/hpml/block";
 
 export default defineComponent({
 	components: {
-		Switch,
+		MkSwitch,
 	},
 	props: {
 		block: {
diff --git a/packages/client/src/components/page/TextInput.vue b/packages/client/src/components/page/page.text-input.vue
similarity index 93%
rename from packages/client/src/components/page/TextInput.vue
rename to packages/client/src/components/page/page.text-input.vue
index 969256602..eb76d1890 100644
--- a/packages/client/src/components/page/TextInput.vue
+++ b/packages/client/src/components/page/page.text-input.vue
@@ -1,26 +1,26 @@
 <template>
 	<div>
-		<Input
+		<MkInput
 			class="kudkigyw"
 			:model-value="value"
 			type="text"
 			@update:modelValue="updateValue($event)"
 		>
 			<template #label>{{ hpml.interpolate(block.text) }}</template>
-		</Input>
+		</MkInput>
 	</div>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, PropType } from "vue";
-import Input from "../form/Input.vue";
+import MkInput from "../form/input.vue";
 import * as os from "@/os";
 import { Hpml } from "@/scripts/hpml/evaluator";
 import { TextInputVarBlock } from "@/scripts/hpml/block";
 
 export default defineComponent({
 	components: {
-		Input,
+		MkInput,
 	},
 	props: {
 		block: {
diff --git a/packages/client/src/components/page/Text.vue b/packages/client/src/components/page/page.text.vue
similarity index 87%
rename from packages/client/src/components/page/Text.vue
rename to packages/client/src/components/page/page.text.vue
index d0cdcf2e4..72854bf39 100644
--- a/packages/client/src/components/page/Text.vue
+++ b/packages/client/src/components/page/page.text.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="mrdgzndn">
 		<Mfm :key="text" :text="text" :is-note="false" :i="$i" />
-		<UrlPreview v-for="url in urls" :key="url" :url="url" class="url" />
+		<MkUrlPreview v-for="url in urls" :key="url" :url="url" class="url" />
 	</div>
 </template>
 
@@ -13,8 +13,8 @@ import * as mfm from "mfm-js";
 import { extractUrlFromMfm } from "@/scripts/extract-url-from-mfm";
 export default defineComponent({
 	components: {
-		UrlPreview: defineAsyncComponent(
-			() => import("@/components/UrlPreview.vue"),
+		MkUrlPreview: defineAsyncComponent(
+			() => import("@/components/MkUrlPreview.vue"),
 		),
 	},
 	props: {
@@ -57,11 +57,9 @@ export default defineComponent({
 	&:not(:first-child) {
 		margin-top: 0.5em;
 	}
-
 	&:not(:last-child) {
 		margin-bottom: 0.5em;
 	}
-
 	> .url {
 		margin: 0.5em 0;
 	}
diff --git a/packages/client/src/components/page/TextareaInput.vue b/packages/client/src/components/page/page.textarea-input.vue
similarity index 84%
rename from packages/client/src/components/page/TextareaInput.vue
rename to packages/client/src/components/page/page.textarea-input.vue
index 70c7619bf..fab665c6d 100644
--- a/packages/client/src/components/page/TextareaInput.vue
+++ b/packages/client/src/components/page/page.textarea-input.vue
@@ -1,14 +1,17 @@
 <template>
 	<div>
-		<Textarea :model-value="value" @update:modelValue="updateValue($event)">
+		<MkTextarea
+			:model-value="value"
+			@update:modelValue="updateValue($event)"
+		>
 			<template #label>{{ hpml.interpolate(block.text) }}</template>
-		</Textarea>
+		</MkTextarea>
 	</div>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, PropType } from "vue";
-import Textarea from "../form/Textarea.vue";
+import MkTextarea from "../form/textarea.vue";
 import * as os from "@/os";
 import { Hpml } from "@/scripts/hpml/evaluator";
 import { HpmlTextInput } from "@/scripts/hpml";
@@ -16,7 +19,7 @@ import { TextInputVarBlock } from "@/scripts/hpml/block";
 
 export default defineComponent({
 	components: {
-		Textarea,
+		MkTextarea,
 	},
 	props: {
 		block: {
diff --git a/packages/client/src/components/page/Textarea.vue b/packages/client/src/components/page/page.textarea.vue
similarity index 80%
rename from packages/client/src/components/page/Textarea.vue
rename to packages/client/src/components/page/page.textarea.vue
index 4c031fcfc..323334438 100644
--- a/packages/client/src/components/page/Textarea.vue
+++ b/packages/client/src/components/page/page.textarea.vue
@@ -1,10 +1,10 @@
 <template>
-	<Textarea :model-value="text" readonly></Textarea>
+	<MkTextarea :model-value="text" readonly></MkTextarea>
 </template>
 
 <script lang="ts" setup>
 import { watch } from "vue";
-import Textarea from "../form/Textarea.vue";
+import MkTextarea from "../form/textarea.vue";
 import { TextBlock } from "@/scripts/hpml/block";
 import { Hpml } from "@/scripts/hpml/evaluator";
 
diff --git a/packages/client/src/components/page/Page.vue b/packages/client/src/components/page/page.vue
similarity index 97%
rename from packages/client/src/components/page/Page.vue
rename to packages/client/src/components/page/page.vue
index 9899ca963..f2079c9ba 100644
--- a/packages/client/src/components/page/Page.vue
+++ b/packages/client/src/components/page/page.vue
@@ -23,7 +23,7 @@ import {
 	PropType,
 } from "vue";
 import { parse } from "@syuilo/aiscript";
-import XBlock from "./Block.vue";
+import XBlock from "./page.block.vue";
 import { Hpml } from "@/scripts/hpml/evaluator";
 import { url } from "@/config";
 import { $i } from "@/account";
diff --git a/packages/client/src/config.ts b/packages/client/src/config.ts
index d2035a1d5..bf882d07c 100644
--- a/packages/client/src/config.ts
+++ b/packages/client/src/config.ts
@@ -23,6 +23,6 @@ export const langs = _LANGS_;
 export const locale = JSON.parse(localStorage.getItem("locale"));
 export const version = _VERSION_;
 export const instanceName = siteName === "Iceshrimp" ? host : siteName;
-export let searchEngine = "https://duckduckgo.com/?q=";
+export let searchEngine = 'https://duckduckgo.com/?q=';
 export const ui = localStorage.getItem("ui");
 export const debug = localStorage.getItem("debug") === "true";
diff --git a/packages/client/src/directives/ripple.ts b/packages/client/src/directives/ripple.ts
index 6514777ee..395f1a077 100644
--- a/packages/client/src/directives/ripple.ts
+++ b/packages/client/src/directives/ripple.ts
@@ -1,4 +1,4 @@
-import Ripple from "@/components/Ripple.vue";
+import Ripple from "@/components/MkRipple.vue";
 import { popup } from "@/os";
 
 export default {
diff --git a/packages/client/src/directives/tooltip.ts b/packages/client/src/directives/tooltip.ts
index a673b3892..e2db3fbf5 100644
--- a/packages/client/src/directives/tooltip.ts
+++ b/packages/client/src/directives/tooltip.ts
@@ -54,7 +54,7 @@ export default {
 
 			const showing = ref(true);
 			popup(
-				defineAsyncComponent(() => import("@/components/Tooltip.vue")),
+				defineAsyncComponent(() => import("@/components/MkTooltip.vue")),
 				{
 					showing,
 					text: self.text,
diff --git a/packages/client/src/directives/user-preview.ts b/packages/client/src/directives/user-preview.ts
index 88fb81c00..90c9ba3d0 100644
--- a/packages/client/src/directives/user-preview.ts
+++ b/packages/client/src/directives/user-preview.ts
@@ -31,7 +31,7 @@ export class UserPreview {
 		const showing = ref(true);
 
 		popup(
-			defineAsyncComponent(() => import("@/components/UserPreview.vue")),
+			defineAsyncComponent(() => import("@/components/MkUserPreview.vue")),
 			{
 				showing,
 				q: this.user,
diff --git a/packages/client/src/init.ts b/packages/client/src/init.ts
index c37bc77bb..d51ddeb1d 100644
--- a/packages/client/src/init.ts
+++ b/packages/client/src/init.ts
@@ -189,12 +189,12 @@ function checkForSplash() {
 
 	const app = createApp(
 		window.location.search === "?zen"
-			? defineAsyncComponent(() => import("@/ui/Zen.vue"))
+			? defineAsyncComponent(() => import("@/ui/zen.vue"))
 			: !$i
-			? defineAsyncComponent(() => import("@/ui/Visitor.vue"))
+			? defineAsyncComponent(() => import("@/ui/visitor.vue"))
 			: ui === "deck"
-			? defineAsyncComponent(() => import("@/ui/Deck.vue"))
-			: defineAsyncComponent(() => import("@/ui/Universal.vue")),
+			? defineAsyncComponent(() => import("@/ui/deck.vue"))
+			: defineAsyncComponent(() => import("@/ui/universal.vue")),
 	);
 
 	if (_DEV_) {
@@ -262,7 +262,7 @@ function checkForSplash() {
 				// ログインしてる場合だけ
 				if ($i) {
 					popup(
-						defineAsyncComponent(() => import("@/components/Updated.vue")),
+						defineAsyncComponent(() => import("@/components/MkUpdated.vue")),
 						{},
 						{},
 						"closed",
@@ -287,7 +287,7 @@ function checkForSplash() {
 				if (unreadAnnouncements.length > 3) {
 					popup(
 						defineAsyncComponent(
-							() => import("@/components/ManyAnnouncements.vue"),
+							() => import("@/components/MkManyAnnouncements.vue"),
 						),
 						{},
 						{},
@@ -298,7 +298,7 @@ function checkForSplash() {
 						if (item.showPopup)
 							popup(
 								defineAsyncComponent(
-									() => import("@/components/Announcement.vue"),
+									() => import("@/components/MkAnnouncement.vue"),
 								),
 								{ announcement: item },
 								{},
@@ -382,12 +382,13 @@ function checkForSplash() {
 		{ immediate: true },
 	);
 
-	watch(defaultStore.reactiveState.useBlurEffect, () => {
-		const theme = defaultStore.state.darkMode
-			? ColdDeviceStorage.get("darkTheme")
-			: ColdDeviceStorage.get("lightTheme");
-		applyTheme(theme);
-	});
+	watch(
+		defaultStore.reactiveState.useBlurEffect,
+		() => {
+			const theme = defaultStore.state.darkMode ? ColdDeviceStorage.get("darkTheme") : ColdDeviceStorage.get("lightTheme");
+			applyTheme(theme);
+		}
+	);
 
 	let reloadDialogShowing = false;
 	stream.on("_disconnected_", async () => {
diff --git a/packages/client/src/navbar.ts b/packages/client/src/navbar.ts
index f7a96069f..3a322c7f0 100644
--- a/packages/client/src/navbar.ts
+++ b/packages/client/src/navbar.ts
@@ -8,7 +8,7 @@ import { unisonReload } from "@/scripts/unison-reload";
 import { defaultStore } from "@/store";
 import { instance } from "@/instance";
 import { host } from "@/config";
-import XTutorial from "@/components/TutorialDialog.vue";
+import XTutorial from "@/components/MkTutorialDialog.vue";
 import { openHelpMenu_ } from "@/scripts/helpMenu";
 
 export const navbarItemDef = reactive({
@@ -154,8 +154,8 @@ export const navbarItemDef = reactive({
 		icon: "ph-arrows-clockwise ph-bold ph-lg",
 		action: () => {
 			location.reload();
-		},
-	},
+		}
+	}
 });
 
 function openHelpMenu(ev: MouseEvent) {
diff --git a/packages/client/src/os.ts b/packages/client/src/os.ts
index 53a9a3406..0e1e82b07 100644
--- a/packages/client/src/os.ts
+++ b/packages/client/src/os.ts
@@ -5,10 +5,10 @@ import { EventEmitter } from "eventemitter3";
 import insertTextAtCursor from "insert-text-at-cursor";
 import * as Misskey from "iceshrimp-js";
 import { apiUrl, url } from "@/config";
-import PostFormDialog from "@/components/PostFormDialog.vue";
-import WaitingDialog from "@/components/WaitingDialog.vue";
-import Toast from "@/components/Toast.vue";
-import Dialog from "@/components/Dialog.vue";
+import MkPostFormDialog from "@/components/MkPostFormDialog.vue";
+import MkWaitingDialog from "@/components/MkWaitingDialog.vue";
+import MkToast from "@/components/MkToast.vue";
+import MkDialog from "@/components/MkDialog.vue";
 import { MenuItem } from "@/types/menu";
 import { $i } from "@/account";
 import { i18n } from "./i18n";
@@ -77,9 +77,7 @@ export const apiJson = ((
 	const authorization = authorizationToken
 		? `Bearer ${authorizationToken}`
 		: undefined;
-	const authHeaders: {} | { authorization: string } = authorization
-		? { authorization }
-		: {};
+	const authHeaders: {} | {authorization: string} = authorization ? { authorization } : {};
 
 	const promise = new Promise((resolve, reject) => {
 		fetch(endpoint.indexOf("://") > -1 ? endpoint : `${apiUrl}/${endpoint}`, {
@@ -87,7 +85,7 @@ export const apiJson = ((
 			body: JSON.stringify(data),
 			credentials: "omit",
 			cache: "no-cache",
-			headers: { ...authHeaders, "content-type": "application/json" },
+			headers: {...authHeaders, "content-type": "application/json" },
 		})
 			.then(async (res) => {
 				const body = res.status === 204 ? null : await res.json();
@@ -204,7 +202,7 @@ export function promiseDialog<T extends Promise<any>>(
 
 	// NOTE: dynamic importすると挙動がおかしくなる(showingの変更が伝播しない)
 	popup(
-		WaitingDialog,
+		MkWaitingDialog,
 		{
 			success: success,
 			showing: showing,
@@ -280,8 +278,8 @@ export async function popup(
 export function pageWindow(path: string) {
 	popup(
 		defineAsyncComponent({
-			loader: () => import("@/components/PageWindow.vue"),
-			loadingComponent: WaitingDialog,
+			loader: () => import("@/components/MkPageWindow.vue"),
+			loadingComponent: MkWaitingDialog,
 			delay: 1000,
 		}),
 		{
@@ -295,8 +293,8 @@ export function pageWindow(path: string) {
 export function modalPageWindow(path: string) {
 	popup(
 		defineAsyncComponent({
-			loader: () => import("@/components/ModalPageWindow.vue"),
-			loadingComponent: WaitingDialog,
+			loader: () => import("@/components/MkModalPageWindow.vue"),
+			loadingComponent: MkWaitingDialog,
 			delay: 1000,
 		}),
 		{
@@ -309,7 +307,7 @@ export function modalPageWindow(path: string) {
 
 export function toast(message: string) {
 	popup(
-		Toast,
+		MkToast,
 		{
 			message,
 		},
@@ -328,7 +326,7 @@ export function alert(props: {
 			props.text = i18n.ts.somethingHappened;
 		}
 		popup(
-			Dialog,
+			MkDialog,
 			props,
 			{
 				done: (result) => {
@@ -349,7 +347,7 @@ export function confirm(props: {
 }): Promise<{ canceled: boolean }> {
 	return new Promise((resolve, reject) => {
 		popup(
-			Dialog,
+			MkDialog,
 			{
 				...props,
 				showCancelButton: true,
@@ -372,8 +370,8 @@ export function yesno(props: {
 	return new Promise((resolve, reject) => {
 		popup(
 			defineAsyncComponent({
-				loader: () => import("@/components/Dialog.vue"),
-				loadingComponent: WaitingDialog,
+				loader: () => import("@/components/MkDialog.vue"),
+				loadingComponent: MkWaitingDialog,
 				delay: 1000,
 			}),
 			{
@@ -409,7 +407,7 @@ export function inputText(props: {
 > {
 	return new Promise((resolve, reject) => {
 		popup(
-			Dialog,
+			MkDialog,
 			{
 				title: props.title,
 				text: props.text,
@@ -447,8 +445,8 @@ export function inputParagraph(props: {
 	return new Promise((resolve, reject) => {
 		popup(
 			defineAsyncComponent({
-				loader: () => import("@/components/Dialog.vue"),
-				loadingComponent: WaitingDialog,
+				loader: () => import("@/components/MkDialog.vue"),
+				loadingComponent: MkWaitingDialog,
 				delay: 1000,
 			}),
 			{
@@ -486,8 +484,8 @@ export function inputNumber(props: {
 	return new Promise((resolve, reject) => {
 		popup(
 			defineAsyncComponent({
-				loader: () => import("@/components/Dialog.vue"),
-				loadingComponent: WaitingDialog,
+				loader: () => import("@/components/MkDialog.vue"),
+				loadingComponent: MkWaitingDialog,
 				delay: 1000,
 			}),
 			{
@@ -524,7 +522,7 @@ export function inputDate(props: {
 > {
 	return new Promise((resolve, reject) => {
 		popup(
-			Dialog,
+			MkDialog,
 			{
 				title: props.title,
 				text: props.text,
@@ -582,7 +580,7 @@ export function select<C = any>(
 > {
 	return new Promise((resolve, reject) => {
 		popup(
-			Dialog,
+			MkDialog,
 			{
 				title: props.title,
 				text: props.text,
@@ -609,7 +607,7 @@ export function success(): Promise<void> {
 			showing.value = false;
 		}, 1000);
 		popup(
-			WaitingDialog,
+			MkWaitingDialog,
 			{
 				success: true,
 				showing: showing,
@@ -626,7 +624,7 @@ export function waiting(): Promise<void> {
 	return new Promise((resolve, reject) => {
 		const showing = ref(true);
 		popup(
-			WaitingDialog,
+			MkWaitingDialog,
 			{
 				success: false,
 				showing: showing,
@@ -643,8 +641,8 @@ export function form(title, form) {
 	return new Promise((resolve, reject) => {
 		popup(
 			defineAsyncComponent({
-				loader: () => import("@/components/FormDialog.vue"),
-				loadingComponent: WaitingDialog,
+				loader: () => import("@/components/MkFormDialog.vue"),
+				loadingComponent: MkWaitingDialog,
 				delay: 1000,
 			}),
 			{ title, form },
@@ -662,8 +660,8 @@ export async function selectUser() {
 	return new Promise((resolve, reject) => {
 		popup(
 			defineAsyncComponent({
-				loader: () => import("@/components/UserSelectDialog.vue"),
-				loadingComponent: WaitingDialog,
+				loader: () => import("@/components/MkUserSelectDialog.vue"),
+				loadingComponent: MkWaitingDialog,
 				delay: 1000,
 			}),
 			{},
@@ -681,8 +679,8 @@ export async function selectLocalUser() {
 	return new Promise((resolve, reject) => {
 		popup(
 			defineAsyncComponent({
-				loader: () => import("@/components/UserSelectLocalDialog.vue"),
-				loadingComponent: WaitingDialog,
+				loader: () => import("@/components/MkUserSelectLocalDialog.vue"),
+				loadingComponent: MkWaitingDialog,
 				delay: 1000,
 			}),
 			{},
@@ -700,8 +698,8 @@ export async function selectInstance(): Promise<Misskey.entities.Instance> {
 	return new Promise((resolve, reject) => {
 		popup(
 			defineAsyncComponent({
-				loader: () => import("@/components/InstanceSelectDialog.vue"),
-				loadingComponent: WaitingDialog,
+				loader: () => import("@/components/MkInstanceSelectDialog.vue"),
+				loadingComponent: MkWaitingDialog,
 				delay: 1000,
 			}),
 			{},
@@ -719,8 +717,8 @@ export async function selectDriveFile(multiple: boolean) {
 	return new Promise((resolve, reject) => {
 		popup(
 			defineAsyncComponent({
-				loader: () => import("@/components/DriveSelectDialog.vue"),
-				loadingComponent: WaitingDialog,
+				loader: () => import("@/components/MkDriveSelectDialog.vue"),
+				loadingComponent: MkWaitingDialog,
 				delay: 1000,
 			}),
 			{
@@ -743,8 +741,8 @@ export async function selectDriveFolder(multiple: boolean) {
 	return new Promise((resolve, reject) => {
 		popup(
 			defineAsyncComponent({
-				loader: () => import("@/components/DriveSelectDialog.vue"),
-				loadingComponent: WaitingDialog,
+				loader: () => import("@/components/MkDriveSelectDialog.vue"),
+				loadingComponent: MkWaitingDialog,
 				delay: 1000,
 			}),
 			{
@@ -767,8 +765,8 @@ export async function pickEmoji(src: HTMLElement | null, opts) {
 	return new Promise((resolve, reject) => {
 		popup(
 			defineAsyncComponent({
-				loader: () => import("@/components/EmojiPickerDialog.vue"),
-				loadingComponent: WaitingDialog,
+				loader: () => import("@/components/MkEmojiPickerDialog.vue"),
+				loadingComponent: MkWaitingDialog,
 				delay: 1000,
 			}),
 			{
@@ -794,8 +792,8 @@ export async function cropImage(
 	return new Promise((resolve, reject) => {
 		popup(
 			defineAsyncComponent({
-				loader: () => import("@/components/CropperDialog.vue"),
-				loadingComponent: WaitingDialog,
+				loader: () => import("@/components/MkCropperDialog.vue"),
+				loadingComponent: MkWaitingDialog,
 				delay: 1000,
 			}),
 			{
@@ -862,8 +860,8 @@ export async function openEmojiPicker(
 
 	openingEmojiPicker = await popup(
 		defineAsyncComponent({
-			loader: () => import("@/components/EmojiPickerDialog.vue"),
-			loadingComponent: WaitingDialog,
+			loader: () => import("@/components/MkEmojiPickerDialog.vue"),
+			loadingComponent: MkWaitingDialog,
 			delay: 1000,
 		}),
 		{
@@ -900,8 +898,8 @@ export function popupMenu(
 		let dispose;
 		popup(
 			defineAsyncComponent({
-				loader: () => import("@/components/PopupMenu.vue"),
-				loadingComponent: WaitingDialog,
+				loader: () => import("@/components/MkPopupMenu.vue"),
+				loadingComponent: MkWaitingDialog,
 				delay: 1000,
 			}),
 			{
@@ -933,8 +931,8 @@ export function contextMenu(
 		let dispose;
 		popup(
 			defineAsyncComponent({
-				loader: () => import("@/components/ContextMenu.vue"),
-				loadingComponent: WaitingDialog,
+				loader: () => import("@/components/MkContextMenu.vue"),
+				loadingComponent: MkWaitingDialog,
 				delay: 1000,
 			}),
 			{
@@ -955,13 +953,13 @@ export function contextMenu(
 
 export function post(props: Record<string, any> = {}) {
 	return new Promise((resolve, reject) => {
-		// NOTE: PostFormDialogをdynamic importするとiOSでテキストエリアに自動フォーカスできない
-		// NOTE: ただ、dynamic importしない場合、PostFormDialogインスタンスが使いまわされ、
+		// NOTE: MkPostFormDialogをdynamic importするとiOSでテキストエリアに自動フォーカスできない
+		// NOTE: ただ、dynamic importしない場合、MkPostFormDialogインスタンスが使いまわされ、
 		//       Vueが渡されたコンポーネントに内部的に__propsというプロパティを生やす影響で、
 		//       複数のpost formを開いたときに場合によってはエラーになる
 		//       もちろん複数のpost formを開けること自体Misskeyサイドのバグなのだが
 		let dispose;
-		popup(PostFormDialog, props, {
+		popup(MkPostFormDialog, props, {
 			closed: () => {
 				resolve();
 				dispose();
diff --git a/packages/client/src/pages/Empty.vue b/packages/client/src/pages/_empty_.vue
similarity index 100%
rename from packages/client/src/pages/Empty.vue
rename to packages/client/src/pages/_empty_.vue
diff --git a/packages/client/src/pages/Error.vue b/packages/client/src/pages/_error_.vue
similarity index 86%
rename from packages/client/src/pages/Error.vue
rename to packages/client/src/pages/_error_.vue
index 740b201c2..4f536c2b5 100644
--- a/packages/client/src/pages/Error.vue
+++ b/packages/client/src/pages/_error_.vue
@@ -1,8 +1,12 @@
 <template>
-	<Loading v-if="!loaded" />
+	<MkLoading v-if="!loaded" />
 	<transition :name="$store.state.animation ? 'zoom' : ''" appear>
 		<div v-show="loaded" class="mjndxjch">
-			<img :src="instance.images.error" class="_ghost" alt="Error" />
+			<img
+				:src="instance.images.error"
+				class="_ghost"
+				alt="Error"
+			/>
 			<p>
 				<b
 					><i class="ph-warning ph-bold ph-lg"></i>
@@ -16,14 +20,14 @@
 			<template v-else>
 				<p>{{ i18n.ts.newVersionOfClientAvailable }}</p>
 				<p>{{ i18n.ts.youShouldUpgradeClient }}</p>
-				<Button class="button primary" @click="reload">{{
+				<MkButton class="button primary" @click="reload">{{
 					i18n.ts.reload
-				}}</Button>
+				}}</MkButton>
 			</template>
 			<p>
-				<A to="/docs/general/troubleshooting" class="_link">{{
+				<MkA to="/docs/general/troubleshooting" class="_link">{{
 					i18n.ts.troubleshooting
-				}}</A>
+				}}</MkA>
 			</p>
 			<p v-if="error" class="error">ERROR: {{ error }}</p>
 		</div>
@@ -33,7 +37,7 @@
 <script lang="ts" setup>
 import {} from "vue";
 import * as misskey from "iceshrimp-js";
-import Button from "@/components/Button.vue";
+import MkButton from "@/components/MkButton.vue";
 import { version } from "@/config";
 import * as os from "@/os";
 import { unisonReload } from "@/scripts/unison-reload";
@@ -41,6 +45,7 @@ import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import { instance } from "@/instance";
 
+
 const props = withDefaults(
 	defineProps<{
 		error?: Error;
diff --git a/packages/client/src/pages/Loading.vue b/packages/client/src/pages/_loading_.vue
similarity index 79%
rename from packages/client/src/pages/Loading.vue
rename to packages/client/src/pages/_loading_.vue
index bf0a302d1..832c05916 100644
--- a/packages/client/src/pages/Loading.vue
+++ b/packages/client/src/pages/_loading_.vue
@@ -1,5 +1,5 @@
 <template>
-	<Loading />
+	<MkLoading />
 </template>
 
 <script lang="ts" setup></script>
diff --git a/packages/client/src/pages/AboutIceshrimp.vue b/packages/client/src/pages/about-iceshrimp.vue
similarity index 82%
rename from packages/client/src/pages/AboutIceshrimp.vue
rename to packages/client/src/pages/about-iceshrimp.vue
index dbdff03df..cb84d7919 100644
--- a/packages/client/src/pages/AboutIceshrimp.vue
+++ b/packages/client/src/pages/about-iceshrimp.vue
@@ -1,10 +1,10 @@
 <template>
-	<StickyContainer>
-		<template #header>
-			<PageHeader :actions="headerActions" :tabs="headerTabs" />
-		</template>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
+		/></template>
 		<div style="overflow: clip">
-			<Spacer :content-max="600" :margin-min="20">
+			<MkSpacer :content-max="600" :margin-min="20">
 				<div class="_formRoot znqjceqz">
 					<div id="debug"></div>
 					<div
@@ -23,13 +23,13 @@
 							@click="gravity"
 						/>
 						<img
-							src="/client-assets/about-icon-light.png"
-							v-if="darkMode"
-							alt=""
-							class="icon"
-							draggable="false"
-							@load="iconLoaded"
-							@click="gravity"
+								src="/client-assets/about-icon-light.png"
+								v-if="darkMode"
+								alt=""
+								class="icon"
+								draggable="false"
+								@load="iconLoaded"
+								@click="gravity"
 						/>
 						<div class="misskey">Iceshrimp</div>
 						<div class="version">v{{ version }}</div>
@@ -42,16 +42,14 @@
 							:class="{
 								_physics_circle_: !emoji.emoji.startsWith(':'),
 							}"
-						>
-							<Emoji
+							><MkEmoji
 								class="emoji"
 								:emoji="emoji.emoji"
 								:custom-emojis="$instance.emojis"
 								:is-reaction="false"
 								:normal="true"
 								:no-style="true"
-							/>
-						</span>
+						/></span>
 					</div>
 					<div class="_formBlock" style="text-align: center">
 						{{ i18n.ts._aboutIceshrimp.about }}<br /><a
@@ -62,9 +60,9 @@
 						>
 					</div>
 					<div class="_formBlock" style="text-align: center">
-						<Button primary rounded inline @click="iLoveMisskey"
-							>I <Mfm text="$[jelly ❤]" /> #Iceshrimp
-						</Button>
+						<MkButton primary rounded inline @click="iLoveMisskey"
+							>I <Mfm text="$[jelly ❤]" /> #Iceshrimp</MkButton
+						>
 					</div>
 					<FormSection>
 						<div class="_formLinks">
@@ -83,19 +81,19 @@
 						</div>
 					</FormSection>
 				</div>
-			</Spacer>
+			</MkSpacer>
 		</div>
-	</StickyContainer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { computed, nextTick, onBeforeUnmount } from "vue";
 import { version } from "@/config";
-import FormLink from "@/components/form/Link.vue";
-import FormSection from "@/components/form/Section.vue";
-import Button from "@/components/Button.vue";
-import Link from "@/components/Link.vue";
-import Sparkle from "@/components/Sparkle.vue";
+import FormLink from "@/components/form/link.vue";
+import FormSection from "@/components/form/section.vue";
+import MkButton from "@/components/MkButton.vue";
+import MkLink from "@/components/MkLink.vue";
+import MkSparkle from "@/components/MkSparkle.vue";
 import { physics } from "@/scripts/physics";
 import { i18n } from "@/i18n";
 import { defaultStore } from "@/store";
diff --git a/packages/client/src/pages/AboutEmojis.vue b/packages/client/src/pages/about.emojis.vue
similarity index 85%
rename from packages/client/src/pages/AboutEmojis.vue
rename to packages/client/src/pages/about.emojis.vue
index d8f45f3b8..853a2bef2 100644
--- a/packages/client/src/pages/AboutEmojis.vue
+++ b/packages/client/src/pages/about.emojis.vue
@@ -1,11 +1,11 @@
 <template>
 	<div class="driuhtrh">
 		<div class="query">
-			<Input v-model="q" class="" :placeholder="i18n.ts.search">
+			<MkInput v-model="q" class="" :placeholder="i18n.ts.search">
 				<template #prefix
 					><i class="ph-magnifying-glass ph-bold ph-lg"></i
 				></template>
-			</Input>
+			</MkInput>
 
 			<!-- たくさんあると邪魔
 		<div class="tags">
@@ -14,7 +14,7 @@
 		-->
 		</div>
 
-		<Folder v-if="searchEmojis" class="emojis">
+		<MkFolder v-if="searchEmojis" class="emojis">
 			<template #header>{{ i18n.ts.searchResult }}</template>
 			<div class="zuvgdzyt">
 				<XEmoji
@@ -24,9 +24,9 @@
 					:emoji="emoji"
 				/>
 			</div>
-		</Folder>
+		</MkFolder>
 
-		<Folder
+		<MkFolder
 			v-for="category in customEmojiCategories"
 			:key="category"
 			class="emojis"
@@ -42,29 +42,29 @@
 					:emoji="emoji"
 				/>
 			</div>
-		</Folder>
+		</MkFolder>
 	</div>
 </template>
 
 <script lang="ts">
 import { defineComponent, computed } from "vue";
-import XEmoji from "./EmojisEmoji.vue";
-import Button from "@/components/Button.vue";
-import Input from "@/components/form/Input.vue";
-import Select from "@/components/form/Select.vue";
-import Folder from "@/components/Folder.vue";
-import Tab from "@/components/Tab.vue";
+import XEmoji from "./emojis.emoji.vue";
+import MkButton from "@/components/MkButton.vue";
+import MkInput from "@/components/form/input.vue";
+import MkSelect from "@/components/form/select.vue";
+import MkFolder from "@/components/MkFolder.vue";
+import MkTab from "@/components/MkTab.vue";
 import * as os from "@/os";
 import { emojiCategories, emojiTags } from "@/instance";
 import { i18n } from "@/i18n";
 
 export default defineComponent({
 	components: {
-		Button,
-		Input,
-		Select,
-		Folder,
-		Tab,
+		MkButton,
+		MkInput,
+		MkSelect,
+		MkFolder,
+		MkTab,
 		XEmoji,
 	},
 
diff --git a/packages/client/src/pages/AboutFederation.vue b/packages/client/src/pages/about.federation.vue
similarity index 88%
rename from packages/client/src/pages/AboutFederation.vue
rename to packages/client/src/pages/about.federation.vue
index 5286e5c0b..b22b7d203 100644
--- a/packages/client/src/pages/AboutFederation.vue
+++ b/packages/client/src/pages/about.federation.vue
@@ -1,14 +1,14 @@
 <template>
 	<div class="taeiyria">
 		<div class="query">
-			<Input v-model="host" :debounce="true" class="">
+			<MkInput v-model="host" :debounce="true" class="">
 				<template #prefix
 					><i class="ph-magnifying-glass ph-bold ph-lg"></i
 				></template>
 				<template #label>{{ i18n.ts.host }}</template>
-			</Input>
+			</MkInput>
 			<FormSplit style="margin-top: var(--margin)">
-				<Select v-model="state">
+				<MkSelect v-model="state">
 					<template #label>{{ i18n.ts.state }}</template>
 					<option value="all">{{ i18n.ts.all }}</option>
 					<option value="federating">{{ i18n.ts.federating }}</option>
@@ -22,8 +22,8 @@
 					<option value="notResponding">
 						{{ i18n.ts.notResponding }}
 					</option>
-				</Select>
-				<Select v-model="sort">
+				</MkSelect>
+				<MkSelect v-model="sort">
 					<template #label>{{ i18n.ts.sort }}</template>
 					<option value="+pubSub">
 						{{ i18n.ts.pubSub }} ({{ i18n.ts.descendingOrder }})
@@ -75,18 +75,18 @@
 							i18n.ts.ascendingOrder
 						}})
 					</option>
-				</Select>
+				</MkSelect>
 			</FormSplit>
 		</div>
 
-		<Pagination
+		<MkPagination
 			v-slot="{ items }"
 			ref="instances"
 			:key="host + state"
 			:pagination="pagination"
 		>
 			<div class="dqokceoi">
-				<A
+				<MkA
 					v-for="instance in items"
 					:key="instance.id"
 					v-tooltip.mfm="
@@ -97,20 +97,20 @@
 					class="instance"
 					:to="`/instance-info/${instance.host}`"
 				>
-					<InstanceCardMini :instance="instance" />
-				</A>
+					<MkInstanceCardMini :instance="instance" />
+				</MkA>
 			</div>
-		</Pagination>
+		</MkPagination>
 	</div>
 </template>
 
 <script lang="ts" setup>
 import { computed } from "vue";
-import Input from "@/components/form/Input.vue";
-import Select from "@/components/form/Select.vue";
-import Pagination from "@/components/Pagination.vue";
-import InstanceCardMini from "@/components/InstanceCardMini.vue";
-import FormSplit from "@/components/form/Split.vue";
+import MkInput from "@/components/form/input.vue";
+import MkSelect from "@/components/form/select.vue";
+import MkPagination from "@/components/MkPagination.vue";
+import MkInstanceCardMini from "@/components/MkInstanceCardMini.vue";
+import FormSplit from "@/components/form/split.vue";
 import { i18n } from "@/i18n";
 
 let host = $ref("");
diff --git a/packages/client/src/pages/About.vue b/packages/client/src/pages/about.vue
similarity index 89%
rename from packages/client/src/pages/About.vue
rename to packages/client/src/pages/about.vue
index 01b13b797..0f4f3c7bc 100644
--- a/packages/client/src/pages/About.vue
+++ b/packages/client/src/pages/about.vue
@@ -1,13 +1,12 @@
 <template>
-	<StickyContainer>
-		<template #header>
-			<PageHeader
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
 				v-model:tab="tab"
 				:actions="headerActions"
 				:tabs="headerTabs"
-			/>
-		</template>
-		<Spacer :content-max="600" :margin-min="20">
+		/></template>
+		<MkSpacer :content-max="600" :margin-min="20">
 			<swiper
 				:round-lengths="true"
 				:touch-angle="25"
@@ -51,18 +50,18 @@
 							</div>
 						</div>
 
-						<KeyValue class="_formBlock">
+						<MkKeyValue class="_formBlock">
 							<template #key>{{ i18n.ts.description }}</template>
-							<template #value>
-								<div v-html="$instance.description"></div>
-							</template>
-						</KeyValue>
+							<template #value
+								><div v-html="$instance.description"></div
+							></template>
+						</MkKeyValue>
 
 						<FormSection>
-							<KeyValue class="_formBlock" :copy="version">
+							<MkKeyValue class="_formBlock" :copy="version">
 								<template #key>Iceshrimp</template>
 								<template #value>{{ version }}</template>
-							</KeyValue>
+							</MkKeyValue>
 							<FormLink to="/about-iceshrimp">{{
 								i18n.ts.aboutIceshrimp
 							}}</FormLink>
@@ -70,22 +69,22 @@
 
 						<FormSection>
 							<FormSplit>
-								<KeyValue class="_formBlock">
+								<MkKeyValue class="_formBlock">
 									<template #key>{{
 										i18n.ts.administrator
 									}}</template>
 									<template #value>{{
 										$instance.maintainerName
 									}}</template>
-								</KeyValue>
-								<KeyValue class="_formBlock">
+								</MkKeyValue>
+								<MkKeyValue class="_formBlock">
 									<template #key>{{
 										i18n.ts.contact
 									}}</template>
 									<template #value>{{
 										$instance.maintainerEmail
 									}}</template>
-								</KeyValue>
+								</MkKeyValue>
 							</FormSplit>
 							<FormLink
 								v-if="$instance.tosUrl"
@@ -117,22 +116,22 @@
 									i18n.ts.statistics
 								}}</template>
 								<FormSplit>
-									<KeyValue class="_formBlock">
+									<MkKeyValue class="_formBlock">
 										<template #key>{{
 											i18n.ts.users
 										}}</template>
 										<template #value>{{
 											number(stats.originalUsersCount)
 										}}</template>
-									</KeyValue>
-									<KeyValue class="_formBlock">
+									</MkKeyValue>
+									<MkKeyValue class="_formBlock">
 										<template #key>{{
 											i18n.ts.notes
 										}}</template>
 										<template #value>{{
 											number(stats.originalNotesCount)
 										}}</template>
-									</KeyValue>
+									</MkKeyValue>
 								</FormSplit>
 							</FormSection>
 						</FormSuspense>
@@ -167,29 +166,29 @@
 					<XEmojis />
 				</swiper-slide>
 				<swiper-slide>
-					<InstanceStats :chart-limit="500" :detailed="true" />
+					<MkInstanceStats :chart-limit="500" :detailed="true" />
 				</swiper-slide>
 				<swiper-slide>
 					<XFederation />
 				</swiper-slide>
 			</swiper>
-		</Spacer>
-	</StickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { ref, computed, onMounted, watch } from "vue";
 import { Virtual } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/vue";
-import XEmojis from "./AboutEmojis.vue";
-import XFederation from "./AboutFederation.vue";
+import XEmojis from "./about.emojis.vue";
+import XFederation from "./about.federation.vue";
 import { version, instanceName, host } from "@/config";
-import FormLink from "@/components/form/Link.vue";
-import FormSection from "@/components/form/Section.vue";
-import FormSuspense from "@/components/form/Suspense.vue";
-import FormSplit from "@/components/form/Split.vue";
-import KeyValue from "@/components/KeyValue.vue";
-import InstanceStats from "@/components/InstanceStats.vue";
+import FormLink from "@/components/form/link.vue";
+import FormSection from "@/components/form/section.vue";
+import FormSuspense from "@/components/form/suspense.vue";
+import FormSplit from "@/components/form/split.vue";
+import MkKeyValue from "@/components/MkKeyValue.vue";
+import MkInstanceStats from "@/components/MkInstanceStats.vue";
 import * as os from "@/os";
 import number from "@/filters/number";
 import { i18n } from "@/i18n";
@@ -315,43 +314,33 @@ function syncSlide(index) {
 	0% {
 		transform: translate(2px, 0px) rotate(-1deg);
 	}
-
 	10% {
 		transform: translate(2px, -3px) rotate(5deg);
 	}
-
 	20% {
 		transform: translate(-1px, -3px) rotate(3deg);
 	}
-
 	30% {
 		transform: translate(-2px, 0px) rotate(-1deg);
 	}
-
 	40% {
 		transform: translate(-2px, -1px) rotate(4deg);
 	}
-
 	50% {
 		transform: translate(-1px, -1px) rotate(1deg);
 	}
-
 	60% {
 		transform: translate(-2px, 0px) rotate(-8deg);
 	}
-
 	70% {
 		transform: translate(1px, 2px) rotate(-2deg);
 	}
-
 	80% {
 		transform: translate(-1px, 2px) rotate(4deg);
 	}
-
 	90% {
 		transform: translate(-1px, 1px) rotate(11deg);
 	}
-
 	100% {
 		transform: translate(-3px, -3px) rotate(-5deg);
 	}
@@ -361,43 +350,33 @@ function syncSlide(index) {
 	0% {
 		transform: translate(-1px, 5px) rotate(33deg);
 	}
-
 	10% {
 		transform: translate(-2px, 7px) rotate(20deg);
 	}
-
 	20% {
 		transform: translate(8px, 5px) rotate(31deg);
 	}
-
 	30% {
 		transform: translate(-2px, 5px) rotate(3deg);
 	}
-
 	40% {
 		transform: translate(4px, 6px) rotate(16deg);
 	}
-
 	50% {
 		transform: translate(8px, -3px) rotate(19deg);
 	}
-
 	60% {
 		transform: translate(7px, -2px) rotate(0deg);
 	}
-
 	70% {
 		transform: translate(4px, 4px) rotate(8deg);
 	}
-
 	80% {
 		transform: translate(7px, -3px) rotate(13deg);
 	}
-
 	90% {
 		transform: translate(6px, 7px) rotate(4deg);
 	}
-
 	100% {
 		transform: translate(4px, -2px) rotate(-2deg);
 	}
@@ -407,43 +386,33 @@ function syncSlide(index) {
 	0% {
 		transform: translate(12px, -2px) rotate(57deg);
 	}
-
 	10% {
 		transform: translate(10px, 2px) rotate(12deg);
 	}
-
 	20% {
 		transform: translate(10px, 4px) rotate(3deg);
 	}
-
 	30% {
 		transform: translate(17px, 11px) rotate(15deg);
 	}
-
 	40% {
 		transform: translate(12px, 20px) rotate(-11deg);
 	}
-
 	50% {
 		transform: translate(5px, 12px) rotate(43deg);
 	}
-
 	60% {
 		transform: translate(16px, 8px) rotate(-4deg);
 	}
-
 	70% {
 		transform: translate(14px, 11px) rotate(22deg);
 	}
-
 	80% {
 		transform: translate(9px, 19px) rotate(-3deg);
 	}
-
 	90% {
 		transform: translate(0px, 12px) rotate(-3deg);
 	}
-
 	100% {
 		transform: translate(17px, 3px) rotate(57deg);
 	}
@@ -453,7 +422,6 @@ function syncSlide(index) {
 	0% {
 		transform: perspective(128px) rotateY(0deg);
 	}
-
 	100% {
 		transform: perspective(128px) rotateY(360deg);
 	}
diff --git a/packages/client/src/pages/AdminFile.vue b/packages/client/src/pages/admin-file.vue
similarity index 80%
rename from packages/client/src/pages/AdminFile.vue
rename to packages/client/src/pages/admin-file.vue
index 14d0c422a..87647dc1d 100644
--- a/packages/client/src/pages/AdminFile.vue
+++ b/packages/client/src/pages/admin-file.vue
@@ -1,13 +1,12 @@
 <template>
-	<StickyContainer>
-		<template #header>
-			<PageHeader
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
 				v-model:tab="tab"
 				:actions="headerActions"
 				:tabs="headerTabs"
-			/>
-		</template>
-		<Spacer :content-max="600" :margin-min="16" :margin-max="32">
+		/></template>
+		<MkSpacer :content-max="600" :margin-min="16" :margin-max="32">
 			<swiper
 				:round-lengths="true"
 				:touch-angle="25"
@@ -31,14 +30,14 @@
 							:href="file.url"
 							target="_blank"
 						>
-							<DriveFileThumbnail
+							<MkDriveFileThumbnail
 								class="thumbnail"
 								:file="file"
 								fit="contain"
 							/>
 						</a>
 						<div class="_formBlock">
-							<KeyValue
+							<MkKeyValue
 								:copy="file.type"
 								oneline
 								style="margin: 1em 0"
@@ -49,16 +48,16 @@
 										file.type
 									}}</span></template
 								>
-							</KeyValue>
-							<KeyValue oneline style="margin: 1em 0">
+							</MkKeyValue>
+							<MkKeyValue oneline style="margin: 1em 0">
 								<template #key>Size</template>
 								<template #value
 									><span class="_monospace">{{
 										bytes(file.size)
 									}}</span></template
 								>
-							</KeyValue>
-							<KeyValue
+							</MkKeyValue>
+							<MkKeyValue
 								:copy="file.id"
 								oneline
 								style="margin: 1em 0"
@@ -69,8 +68,8 @@
 										file.id
 									}}</span></template
 								>
-							</KeyValue>
-							<KeyValue
+							</MkKeyValue>
+							<MkKeyValue
 								:copy="file.md5"
 								oneline
 								style="margin: 1em 0"
@@ -81,49 +80,49 @@
 										file.md5
 									}}</span></template
 								>
-							</KeyValue>
-							<KeyValue oneline style="margin: 1em 0">
+							</MkKeyValue>
+							<MkKeyValue oneline style="margin: 1em 0">
 								<template #key>{{
 									i18n.ts.createdAt
 								}}</template>
 								<template #value
 									><span class="_monospace"
-										><Time
+										><MkTime
 											:time="file.createdAt"
 											mode="detail"
 											style="display: block" /></span
 								></template>
-							</KeyValue>
+							</MkKeyValue>
 						</div>
-						<A
+						<MkA
 							v-if="file.user"
 							class="user"
 							:to="`/user-info/${file.user.id}`"
 						>
-							<UserCardMini :user="file.user" />
-						</A>
+							<MkUserCardMini :user="file.user" />
+						</MkA>
 						<div class="_formBlock">
-							<Switch
+							<MkSwitch
 								v-model="isSensitive"
 								@update:modelValue="toggleIsSensitive"
-								>NSFW</Switch
+								>NSFW</MkSwitch
 							>
 						</div>
 
 						<div class="_formBlock">
-							<Button danger @click="del"
+							<MkButton danger @click="del"
 								><i class="ph-trash ph-bold ph-lg"></i>
-								{{ i18n.ts.delete }}</Button
+								{{ i18n.ts.delete }}</MkButton
 							>
 						</div>
 					</div>
 				</swiper-slide>
 				<swiper-slide>
 					<div v-if="info" class="_formRoot">
-						<Info v-if="!iAmAdmin" warn>{{
+						<MkInfo v-if="!iAmAdmin" warn>{{
 							i18n.ts.requireAdminForView
-						}}</Info>
-						<KeyValue
+						}}</MkInfo>
+						<MkKeyValue
 							v-if="info.requestIp"
 							class="_formBlock _monospace"
 							:copy="info.requestIp"
@@ -131,43 +130,43 @@
 						>
 							<template #key>IP</template>
 							<template #value>{{ info.requestIp }}</template>
-						</KeyValue>
+						</MkKeyValue>
 						<FormSection v-if="info.requestHeaders">
 							<template #label>Headers</template>
-							<KeyValue
+							<MkKeyValue
 								v-for="(v, k) in info.requestHeaders"
 								:key="k"
 								class="_formBlock _monospace"
 							>
 								<template #key>{{ k }}</template>
 								<template #value>{{ v }}</template>
-							</KeyValue>
+							</MkKeyValue>
 						</FormSection>
 					</div>
 				</swiper-slide>
 				<swiper-slide>
 					<div class="_formRoot">
-						<ObjectView v-if="info" tall :value="info">
-						</ObjectView>
+						<MkObjectView v-if="info" tall :value="info">
+						</MkObjectView>
 					</div>
 				</swiper-slide>
 			</swiper>
-		</Spacer>
-	</StickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { computed, watch } from "vue";
 import { Virtual } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/vue";
-import Button from "@/components/Button.vue";
-import Switch from "@/components/form/Switch.vue";
-import ObjectView from "@/components/ObjectView.vue";
-import DriveFileThumbnail from "@/components/DriveFileThumbnail.vue";
-import KeyValue from "@/components/KeyValue.vue";
-import FormSection from "@/components/form/Section.vue";
-import UserCardMini from "@/components/UserCardMini.vue";
-import Info from "@/components/Info.vue";
+import MkButton from "@/components/MkButton.vue";
+import MkSwitch from "@/components/form/switch.vue";
+import MkObjectView from "@/components/MkObjectView.vue";
+import MkDriveFileThumbnail from "@/components/MkDriveFileThumbnail.vue";
+import MkKeyValue from "@/components/MkKeyValue.vue";
+import FormSection from "@/components/form/section.vue";
+import MkUserCardMini from "@/components/MkUserCardMini.vue";
+import MkInfo from "@/components/MkInfo.vue";
 import bytes from "@/filters/bytes";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
diff --git a/packages/client/src/pages/admin/Header.vue b/packages/client/src/pages/admin/_header_.vue
similarity index 98%
rename from packages/client/src/pages/admin/Header.vue
rename to packages/client/src/pages/admin/_header_.vue
index 189e9fac1..ae0e48929 100644
--- a/packages/client/src/pages/admin/Header.vue
+++ b/packages/client/src/pages/admin/_header_.vue
@@ -31,13 +31,13 @@
 		<div class="buttons right">
 			<template v-if="actions">
 				<template v-for="action in actions">
-					<Button
+					<MkButton
 						v-if="action.asFullButton"
 						class="fullButton"
 						primary
 						@click.stop="action.handler"
 						><i :class="action.icon" style="margin-right: 6px"></i
-						>{{ action.text }}</Button
+						>{{ action.text }}</MkButton
 					>
 					<button
 						v-else
@@ -69,7 +69,7 @@ import tinycolor from "tinycolor2";
 import { popupMenu } from "@/os";
 import { url } from "@/config";
 import { scrollToTop } from "@/scripts/scroll";
-import Button from "@/components/Button.vue";
+import MkButton from "@/components/MkButton.vue";
 import { i18n } from "@/i18n";
 import { globalEvents } from "@/events";
 import { injectPageMetadata } from "@/scripts/page-metadata";
diff --git a/packages/client/src/pages/admin/Abuses.vue b/packages/client/src/pages/admin/abuses.vue
similarity index 74%
rename from packages/client/src/pages/admin/Abuses.vue
rename to packages/client/src/pages/admin/abuses.vue
index 8ba1a10dc..27d8a700c 100644
--- a/packages/client/src/pages/admin/Abuses.vue
+++ b/packages/client/src/pages/admin/abuses.vue
@@ -1,18 +1,20 @@
 <template>
-	<StickyContainer>
-		<template #header>
-			<PageHeader
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
 				:actions="headerActions"
 				:tabs="headerTabs"
 				:display-back-button="true"
-			/>
-		</template>
-		<Spacer :content-max="900">
+		/></template>
+		<MkSpacer :content-max="900">
 			<div class="lcixvhis">
 				<div class="_section reports">
 					<div class="_content">
 						<div class="inputs" style="display: flex">
-							<Select v-model="state" style="margin: 0; flex: 1">
+							<MkSelect
+								v-model="state"
+								style="margin: 0; flex: 1"
+							>
 								<template #label>{{ i18n.ts.state }}</template>
 								<option value="all">{{ i18n.ts.all }}</option>
 								<option value="unresolved">
@@ -21,8 +23,8 @@
 								<option value="resolved">
 									{{ i18n.ts.resolved }}
 								</option>
-							</Select>
-							<Select
+							</MkSelect>
+							<MkSelect
 								v-model="targetUserOrigin"
 								style="margin: 0; flex: 1"
 							>
@@ -38,8 +40,8 @@
 								<option value="remote">
 									{{ i18n.ts.remote }}
 								</option>
-							</Select>
-							<Select
+							</MkSelect>
+							<MkSelect
 								v-model="reporterOrigin"
 								style="margin: 0; flex: 1"
 							>
@@ -55,20 +57,20 @@
 								<option value="remote">
 									{{ i18n.ts.remote }}
 								</option>
-							</Select>
+							</MkSelect>
 						</div>
 						<!-- TODO
 			<div class="inputs" style="display: flex; padding-top: 1.2em;">
-				<Input v-model="searchUsername" style="margin: 0; flex: 1;" type="text" :spellcheck="false">
+				<MkInput v-model="searchUsername" style="margin: 0; flex: 1;" type="text" :spellcheck="false">
 					<span>{{ i18n.ts.username }}</span>
-				</Input>
-				<Input v-model="searchHost" style="margin: 0; flex: 1;" type="text" :spellcheck="false" :disabled="pagination.params().origin === 'local'">
+				</MkInput>
+				<MkInput v-model="searchHost" style="margin: 0; flex: 1;" type="text" :spellcheck="false" :disabled="pagination.params().origin === 'local'">
 					<span>{{ i18n.ts.host }}</span>
-				</Input>
+				</MkInput>
 			</div>
 			-->
 
-						<Pagination
+						<MkPagination
 							v-slot="{ items }"
 							ref="reports"
 							:pagination="pagination"
@@ -80,26 +82,26 @@
 								:report="report"
 								@resolved="resolved"
 							/>
-						</Pagination>
+						</MkPagination>
 					</div>
 				</div>
 			</div>
-		</Spacer>
-	</StickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { computed } from "vue";
 
-import Input from "@/components/form/Input.vue";
-import Select from "@/components/form/Select.vue";
-import Pagination from "@/components/Pagination.vue";
-import XAbuseReport from "@/components/AbuseReport.vue";
+import MkInput from "@/components/form/input.vue";
+import MkSelect from "@/components/form/select.vue";
+import MkPagination from "@/components/MkPagination.vue";
+import XAbuseReport from "@/components/MkAbuseReport.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 
-let reports = $ref<InstanceType<typeof Pagination>>();
+let reports = $ref<InstanceType<typeof MkPagination>>();
 
 let state = $ref("unresolved");
 let reporterOrigin = $ref("combined");
diff --git a/packages/client/src/pages/admin/Announcements.vue b/packages/client/src/pages/admin/announcements.vue
similarity index 78%
rename from packages/client/src/pages/admin/Announcements.vue
rename to packages/client/src/pages/admin/announcements.vue
index 344e9ed56..b2172b307 100644
--- a/packages/client/src/pages/admin/Announcements.vue
+++ b/packages/client/src/pages/admin/announcements.vue
@@ -1,38 +1,37 @@
 <template>
-	<StickyContainer>
-		<template #header>
-			<PageHeader
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
 				:actions="headerActions"
 				:tabs="headerTabs"
 				:display-back-button="true"
-			/>
-		</template>
-		<Spacer :content-max="900">
+		/></template>
+		<MkSpacer :content-max="900">
 			<div :class="$style.root">
 				<section
 					v-for="announcement in announcements"
 					class="_card _gap announcements"
 				>
 					<div class="_content announcement">
-						<Input v-model="announcement.title">
+						<MkInput v-model="announcement.title">
 							<template #label>{{ i18n.ts.title }}</template>
-						</Input>
-						<Textarea v-model="announcement.text">
+						</MkInput>
+						<MkTextarea v-model="announcement.text">
 							<template #label>{{ i18n.ts.text }}</template>
-						</Textarea>
-						<Input v-model="announcement.imageUrl">
+						</MkTextarea>
+						<MkInput v-model="announcement.imageUrl">
 							<template #label>{{ i18n.ts.imageUrl }}</template>
-						</Input>
-						<Switch
+						</MkInput>
+						<MkSwitch
 							v-model="announcement.showPopup"
 							class="_formBlock"
-							>{{ i18n.ts.showPopup }}</Switch
+							>{{ i18n.ts.showPopup }}</MkSwitch
 						>
-						<Switch
+						<MkSwitch
 							v-if="announcement.showPopup"
 							v-model="announcement.isGoodNews"
 							class="_formBlock"
-							>{{ i18n.ts.showWithSparkles }}</Switch
+							>{{ i18n.ts.showWithSparkles }}</MkSwitch
 						>
 						<p v-if="announcement.reads">
 							{{
@@ -40,7 +39,7 @@
 							}}
 						</p>
 						<div class="buttons">
-							<Button
+							<MkButton
 								class="button"
 								inline
 								primary
@@ -48,29 +47,29 @@
 								><i
 									class="ph-floppy-disk-back ph-bold ph-lg"
 								></i>
-								{{ i18n.ts.save }}</Button
+								{{ i18n.ts.save }}</MkButton
 							>
-							<Button
+							<MkButton
 								class="button"
 								inline
 								@click="remove(announcement)"
 								><i class="ph-trash ph-bold ph-lg"></i>
-								{{ i18n.ts.remove }}</Button
+								{{ i18n.ts.remove }}</MkButton
 							>
 						</div>
 					</div>
 				</section>
 			</div>
-		</Spacer>
-	</StickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import {} from "vue";
-import Button from "@/components/Button.vue";
-import Input from "@/components/form/Input.vue";
-import Switch from "@/components/form/Switch.vue";
-import Textarea from "@/components/form/Textarea.vue";
+import MkButton from "@/components/MkButton.vue";
+import MkInput from "@/components/form/input.vue";
+import MkSwitch from "@/components/form/switch.vue";
+import MkTextarea from "@/components/form/textarea.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
diff --git a/packages/client/src/pages/admin/BotProtection.vue b/packages/client/src/pages/admin/bot-protection.vue
similarity index 88%
rename from packages/client/src/pages/admin/BotProtection.vue
rename to packages/client/src/pages/admin/bot-protection.vue
index 7a9f4d027..bdf992190 100644
--- a/packages/client/src/pages/admin/BotProtection.vue
+++ b/packages/client/src/pages/admin/bot-protection.vue
@@ -29,7 +29,7 @@
 					</FormInput>
 					<FormSlot class="_formBlock">
 						<template #label>{{ i18n.ts.preview }}</template>
-						<Captcha
+						<MkCaptcha
 							provider="hcaptcha"
 							:sitekey="
 								hcaptchaSiteKey ||
@@ -57,7 +57,7 @@
 					</FormInput>
 					<FormSlot v-if="recaptchaSiteKey" class="_formBlock">
 						<template #label>{{ i18n.ts.preview }}</template>
-						<Captcha
+						<MkCaptcha
 							provider="recaptcha"
 							:sitekey="recaptchaSiteKey"
 						/>
@@ -75,16 +75,18 @@
 
 <script lang="ts" setup>
 import { defineAsyncComponent } from "vue";
-import FormRadios from "@/components/form/Radios.vue";
-import FormInput from "@/components/form/Input.vue";
-import FormButton from "@/components/Button.vue";
-import FormSuspense from "@/components/form/Suspense.vue";
-import FormSlot from "@/components/form/Slot.vue";
+import FormRadios from "@/components/form/radios.vue";
+import FormInput from "@/components/form/input.vue";
+import FormButton from "@/components/MkButton.vue";
+import FormSuspense from "@/components/form/suspense.vue";
+import FormSlot from "@/components/form/slot.vue";
 import * as os from "@/os";
 import { fetchInstance } from "@/instance";
 import { i18n } from "@/i18n";
 
-const Captcha = defineAsyncComponent(() => import("@/components/Captcha.vue"));
+const MkCaptcha = defineAsyncComponent(
+	() => import("@/components/MkCaptcha.vue"),
+);
 
 let provider = $ref(null);
 let hcaptchaSiteKey: string | null = $ref(null);
diff --git a/packages/client/src/pages/admin/CustomCss.vue b/packages/client/src/pages/admin/custom-css.vue
similarity index 91%
rename from packages/client/src/pages/admin/CustomCss.vue
rename to packages/client/src/pages/admin/custom-css.vue
index a10db851f..2362c1f93 100644
--- a/packages/client/src/pages/admin/CustomCss.vue
+++ b/packages/client/src/pages/admin/custom-css.vue
@@ -18,8 +18,8 @@
 
 <script lang="ts" setup>
 import { ref, watch } from "vue";
-import FormTextarea from "@/components/form/Textarea.vue";
-import FormInfo from "@/components/Info.vue";
+import FormTextarea from "@/components/form/textarea.vue";
+import FormInfo from "@/components/MkInfo.vue";
 import * as os from "@/os";
 import { unisonReload } from "@/scripts/unison-reload";
 import { i18n } from "@/i18n";
diff --git a/packages/client/src/pages/admin/Database.vue b/packages/client/src/pages/admin/database.vue
similarity index 76%
rename from packages/client/src/pages/admin/Database.vue
rename to packages/client/src/pages/admin/database.vue
index 613f3119e..7222ba318 100644
--- a/packages/client/src/pages/admin/Database.vue
+++ b/packages/client/src/pages/admin/database.vue
@@ -1,13 +1,12 @@
 <template>
-	<StickyContainer>
-		<template #header>
-			<PageHeader
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
 				:actions="headerActions"
 				:tabs="headerTabs"
 				:display-back-button="true"
-			/>
-		</template>
-		<Spacer :content-max="800" :margin-min="16" :margin-max="32">
+		/></template>
+		<MkSpacer :content-max="800" :margin-min="16" :margin-max="32">
 			<FormButton primary @click="indexPosts">{{
 				i18n.ts.indexPosts
 			}}</FormButton>
@@ -15,7 +14,7 @@
 				v-slot="{ result: database }"
 				:p="databasePromiseFactory"
 			>
-				<KeyValue
+				<MkKeyValue
 					v-for="table in database"
 					:key="table[0]"
 					oneline
@@ -28,17 +27,17 @@
 						}}
 						recs)</template
 					>
-				</KeyValue>
+				</MkKeyValue>
 			</FormSuspense>
-		</Spacer>
-	</StickyContainer>
+		</MkSpacer></MkStickyContainer
+	>
 </template>
 
 <script lang="ts" setup>
 import {} from "vue";
-import FormSuspense from "@/components/form/Suspense.vue";
-import FormButton from "@/components/Button.vue";
-import KeyValue from "@/components/KeyValue.vue";
+import FormSuspense from "@/components/form/suspense.vue";
+import FormButton from "@/components/MkButton.vue";
+import MkKeyValue from "@/components/MkKeyValue.vue";
 import * as os from "@/os";
 import bytes from "@/filters/bytes";
 import number from "@/filters/number";
diff --git a/packages/client/src/pages/admin/EmailSettings.vue b/packages/client/src/pages/admin/email-settings.vue
similarity index 88%
rename from packages/client/src/pages/admin/EmailSettings.vue
rename to packages/client/src/pages/admin/email-settings.vue
index 8484ed51d..3eaee5566 100644
--- a/packages/client/src/pages/admin/EmailSettings.vue
+++ b/packages/client/src/pages/admin/email-settings.vue
@@ -1,13 +1,12 @@
 <template>
-	<StickyContainer>
-		<template #header>
-			<PageHeader
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
 				:actions="headerActions"
 				:tabs="headerTabs"
 				:display-back-button="true"
-			/>
-		</template>
-		<Spacer :content-max="700" :margin-min="16" :margin-max="32">
+		/></template>
+		<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
 			<FormSuspense :p="init">
 				<div class="_formRoot">
 					<FormSwitch v-model="enableEmail" class="_formBlock">
@@ -87,18 +86,18 @@
 					</template>
 				</div>
 			</FormSuspense>
-		</Spacer>
-	</StickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import {} from "vue";
-import FormSwitch from "@/components/form/Switch.vue";
-import FormInput from "@/components/form/Input.vue";
-import FormInfo from "@/components/Info.vue";
-import FormSuspense from "@/components/form/Suspense.vue";
-import FormSplit from "@/components/form/Split.vue";
-import FormSection from "@/components/form/Section.vue";
+import FormSwitch from "@/components/form/switch.vue";
+import FormInput from "@/components/form/input.vue";
+import FormInfo from "@/components/MkInfo.vue";
+import FormSuspense from "@/components/form/suspense.vue";
+import FormSplit from "@/components/form/split.vue";
+import FormSection from "@/components/form/section.vue";
 import * as os from "@/os";
 import { fetchInstance, instance } from "@/instance";
 import { i18n } from "@/i18n";
diff --git a/packages/client/src/pages/admin/EmojiEditDialog.vue b/packages/client/src/pages/admin/emoji-edit-dialog.vue
similarity index 81%
rename from packages/client/src/pages/admin/EmojiEditDialog.vue
rename to packages/client/src/pages/admin/emoji-edit-dialog.vue
index b2bfcbeef..053f3d3e7 100644
--- a/packages/client/src/pages/admin/EmojiEditDialog.vue
+++ b/packages/client/src/pages/admin/emoji-edit-dialog.vue
@@ -12,28 +12,28 @@
 		<div class="_monolithic_">
 			<div class="yigymqpb _section">
 				<img :src="emoji.url" class="img" />
-				<Input v-model="name" class="_formBlock">
+				<MkInput v-model="name" class="_formBlock">
 					<template #label>{{ i18n.ts.name }}</template>
-				</Input>
-				<Input
+				</MkInput>
+				<MkInput
 					v-model="category"
 					class="_formBlock"
 					:datalist="categories"
 				>
 					<template #label>{{ i18n.ts.category }}</template>
-				</Input>
-				<Input v-model="aliases" class="_formBlock">
+				</MkInput>
+				<MkInput v-model="aliases" class="_formBlock">
 					<template #label>{{ i18n.ts.tags }}</template>
 					<template #caption>{{
 						i18n.ts.setMultipleBySeparatingWithSpace
 					}}</template>
-				</Input>
-				<Textarea v-model="license" class="_formBlock">
+				</MkInput>
+				<MkTextarea v-model="license" class="_formBlock">
 					<template #label>{{ i18n.ts.license }}</template>
-				</Textarea>
-				<Button danger @click="del()"
+				</MkTextarea>
+				<MkButton danger @click="del()"
 					><i class="ph-trash ph-bold ph-lg"></i>
-					{{ i18n.ts.delete }}</Button
+					{{ i18n.ts.delete }}</MkButton
 				>
 			</div>
 		</div>
@@ -42,10 +42,10 @@
 
 <script lang="ts" setup>
 import {} from "vue";
-import XModalWindow from "@/components/ModalWindow.vue";
-import Button from "@/components/Button.vue";
-import Input from "@/components/form/Input.vue";
-import Textarea from "@/components/form/Textarea.vue";
+import XModalWindow from "@/components/MkModalWindow.vue";
+import MkButton from "@/components/MkButton.vue";
+import MkInput from "@/components/form/input.vue";
+import MkTextarea from "@/components/form/textarea.vue";
 import * as os from "@/os";
 import { unique } from "@/scripts/array";
 import { i18n } from "@/i18n";
diff --git a/packages/client/src/pages/admin/Emojis.vue b/packages/client/src/pages/admin/emojis.vue
similarity index 87%
rename from packages/client/src/pages/admin/Emojis.vue
rename to packages/client/src/pages/admin/emojis.vue
index 250a30fb8..8d633e551 100644
--- a/packages/client/src/pages/admin/Emojis.vue
+++ b/packages/client/src/pages/admin/emojis.vue
@@ -1,28 +1,27 @@
 <template>
 	<div>
-		<StickyContainer>
-			<template #header>
-				<PageHeader
+		<MkStickyContainer>
+			<template #header
+				><MkPageHeader
 					v-model:tab="tab"
 					:actions="headerActions"
 					:tabs="headerTabs"
 					:display-back-button="true"
-				/>
-			</template>
-			<Spacer :content-max="900">
+			/></template>
+			<MkSpacer :content-max="900">
 				<div class="ogwlenmc">
 					<div v-if="tab === 'local'" class="local">
-						<Input v-model="query" :debounce="true" type="search">
+						<MkInput v-model="query" :debounce="true" type="search">
 							<template #prefix
 								><i
 									class="ph-magnifying-glass ph-bold ph-lg"
 								></i
 							></template>
 							<template #label>{{ i18n.ts.search }}</template>
-						</Input>
-						<Switch v-model="selectMode" style="margin: 8px 0">
+						</MkInput>
+						<MkSwitch v-model="selectMode" style="margin: 8px 0">
 							<template #label>Select mode</template>
-						</Switch>
+						</MkSwitch>
 						<div
 							v-if="selectMode"
 							style="
@@ -31,25 +30,29 @@
 								flex-wrap: wrap;
 							"
 						>
-							<Button inline @click="selectAll"
-								>Select all</Button
+							<MkButton inline @click="selectAll"
+								>Select all</MkButton
 							>
-							<Button inline @click="setCategoryBulk"
-								>Set category</Button
+							<MkButton inline @click="setCategoryBulk"
+								>Set category</MkButton
 							>
-							<Button inline @click="addTagBulk">Add tag</Button>
-							<Button inline @click="removeTagBulk"
-								>Remove tag</Button
+							<MkButton inline @click="addTagBulk"
+								>Add tag</MkButton
 							>
-							<Button inline @click="setTagBulk">Set tag</Button>
-							<Button inline @click="setLicenseBulk"
-								>Set license</Button
+							<MkButton inline @click="removeTagBulk"
+								>Remove tag</MkButton
 							>
-							<Button inline danger @click="delBulk"
-								>Delete</Button
+							<MkButton inline @click="setTagBulk"
+								>Set tag</MkButton
+							>
+							<MkButton inline @click="setLicenseBulk"
+								>Set license</MkButton
+							>
+							<MkButton inline danger @click="delBulk"
+								>Delete</MkButton
 							>
 						</div>
-						<Pagination
+						<MkPagination
 							ref="emojisPaginationComponent"
 							:pagination="pagination"
 						>
@@ -91,12 +94,12 @@
 									</button>
 								</div>
 							</template>
-						</Pagination>
+						</MkPagination>
 					</div>
 
 					<div v-else-if="tab === 'remote'" class="remote">
 						<FormSplit>
-							<Input
+							<MkInput
 								v-model="queryRemote"
 								:debounce="true"
 								type="search"
@@ -107,12 +110,12 @@
 									></i
 								></template>
 								<template #label>{{ i18n.ts.search }}</template>
-							</Input>
-							<Input v-model="host" :debounce="true">
+							</MkInput>
+							<MkInput v-model="host" :debounce="true">
 								<template #label>{{ i18n.ts.host }}</template>
-							</Input>
+							</MkInput>
 						</FormSplit>
-						<Pagination :pagination="remotePagination">
+						<MkPagination :pagination="remotePagination">
 							<template #empty
 								><span>{{
 									i18n.ts.noCustomEmojis
@@ -142,11 +145,11 @@
 									</div>
 								</div>
 							</template>
-						</Pagination>
+						</MkPagination>
 					</div>
 				</div>
-			</Spacer>
-		</StickyContainer>
+			</MkSpacer>
+		</MkStickyContainer>
 	</div>
 </template>
 
@@ -158,18 +161,18 @@ import {
 	ref,
 	toRef,
 } from "vue";
-import Button from "@/components/Button.vue";
-import Input from "@/components/form/Input.vue";
-import Pagination from "@/components/Pagination.vue";
-import Tab from "@/components/Tab.vue";
-import Switch from "@/components/form/Switch.vue";
-import FormSplit from "@/components/form/Split.vue";
+import MkButton from "@/components/MkButton.vue";
+import MkInput from "@/components/form/input.vue";
+import MkPagination from "@/components/MkPagination.vue";
+import MkTab from "@/components/MkTab.vue";
+import MkSwitch from "@/components/form/switch.vue";
+import FormSplit from "@/components/form/split.vue";
 import { selectFile, selectFiles } from "@/scripts/select-file";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 
-const emojisPaginationComponent = ref<InstanceType<typeof Pagination>>();
+const emojisPaginationComponent = ref<InstanceType<typeof MkPagination>>();
 
 const tab = ref("local");
 const query = ref(null);
@@ -236,7 +239,7 @@ const add = async (ev: MouseEvent) => {
 
 const edit = (emoji) => {
 	os.popup(
-		defineAsyncComponent(() => import("./EmojiEditDialog.vue")),
+		defineAsyncComponent(() => import("./emoji-edit-dialog.vue")),
 		{
 			emoji: emoji,
 		},
diff --git a/packages/client/src/pages/admin/Experiments.vue b/packages/client/src/pages/admin/experiments.vue
similarity index 80%
rename from packages/client/src/pages/admin/Experiments.vue
rename to packages/client/src/pages/admin/experiments.vue
index efb4250ed..32ce9bfae 100644
--- a/packages/client/src/pages/admin/Experiments.vue
+++ b/packages/client/src/pages/admin/experiments.vue
@@ -1,13 +1,12 @@
 <template>
-	<StickyContainer>
-		<template #header>
-			<PageHeader
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
 				:actions="headerActions"
 				:tabs="headerTabs"
 				:display-back-button="true"
-			/>
-		</template>
-		<Spacer :content-max="700" :margin-min="16" :margin-max="32">
+		/></template>
+		<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
 			<FormSuspense :p="init">
 				<FormSwitch
 					v-model="enablePostImports"
@@ -23,15 +22,15 @@
 					}}</template>
 				</FormSwitch>
 			</FormSuspense>
-		</Spacer>
-	</StickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import {} from "vue";
-import StickyContainer from "@/components/global/StickyContainer.vue";
-import FormSuspense from "@/components/form/Suspense.vue";
-import FormSwitch from "@/components/form/Switch.vue";
+import MkStickyContainer from "@/components/global/MkStickyContainer.vue";
+import FormSuspense from "@/components/form/suspense.vue";
+import FormSwitch from "@/components/form/switch.vue";
 import * as os from "@/os";
 import { fetchInstance } from "@/instance";
 import { i18n } from "@/i18n";
diff --git a/packages/client/src/pages/admin/Federation.vue b/packages/client/src/pages/admin/federation.vue
similarity index 70%
rename from packages/client/src/pages/admin/Federation.vue
rename to packages/client/src/pages/admin/federation.vue
index 0a6dbcdb5..64329b87a 100644
--- a/packages/client/src/pages/admin/Federation.vue
+++ b/packages/client/src/pages/admin/federation.vue
@@ -1,17 +1,16 @@
 <template>
 	<div>
-		<StickyContainer>
-			<template #header>
-				<PageHeader
+		<MkStickyContainer>
+			<template #header
+				><MkPageHeader
 					:actions="headerActions"
 					:tabs="headerTabs"
 					:display-back-button="true"
-				/>
-			</template>
-			<Spacer :content-max="900">
+			/></template>
+			<MkSpacer :content-max="900">
 				<XFederation />
-			</Spacer>
-		</StickyContainer>
+			</MkSpacer>
+		</MkStickyContainer>
 	</div>
 </template>
 
@@ -19,7 +18,7 @@
 import { computed } from "vue";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import { i18n } from "@/i18n";
-import XFederation from "@/pages/AboutFederation.vue";
+import XFederation from "@/pages/about.federation.vue";
 
 const headerActions = $computed(() => []);
 
diff --git a/packages/client/src/pages/admin/Files.vue b/packages/client/src/pages/admin/files.vue
similarity index 81%
rename from packages/client/src/pages/admin/Files.vue
rename to packages/client/src/pages/admin/files.vue
index d9ca09077..394f5467b 100644
--- a/packages/client/src/pages/admin/Files.vue
+++ b/packages/client/src/pages/admin/files.vue
@@ -1,10 +1,10 @@
 <template>
 	<div>
-		<StickyContainer>
-			<template #header>
-				<PageHeader :actions="headerActions" />
-			</template>
-			<Spacer :content-max="900">
+		<MkStickyContainer>
+			<template #header
+				><MkPageHeader :actions="headerActions"
+			/></template>
+			<MkSpacer :content-max="900">
 				<div class="xrmjdkdw">
 					<div>
 						<div
@@ -15,7 +15,10 @@
 								flex-wrap: wrap;
 							"
 						>
-							<Select v-model="origin" style="margin: 0; flex: 1">
+							<MkSelect
+								v-model="origin"
+								style="margin: 0; flex: 1"
+							>
 								<template #label>{{
 									i18n.ts.instance
 								}}</template>
@@ -28,8 +31,8 @@
 								<option value="remote">
 									{{ i18n.ts.remote }}
 								</option>
-							</Select>
-							<Input
+							</MkSelect>
+							<MkInput
 								v-model="searchHost"
 								:debounce="true"
 								type="search"
@@ -37,7 +40,7 @@
 								:disabled="pagination.params.origin === 'local'"
 							>
 								<template #label>{{ i18n.ts.host }}</template>
-							</Input>
+							</MkInput>
 						</div>
 						<div
 							class="inputs"
@@ -48,41 +51,41 @@
 								padding-top: 1.2em;
 							"
 						>
-							<Input
+							<MkInput
 								v-model="userId"
 								:debounce="true"
 								type="search"
 								style="margin: 0; flex: 1"
 							>
 								<template #label>User ID</template>
-							</Input>
-							<Input
+							</MkInput>
+							<MkInput
 								v-model="type"
 								:debounce="true"
 								type="search"
 								style="margin: 0; flex: 1"
 							>
 								<template #label>MIME type</template>
-							</Input>
+							</MkInput>
 						</div>
-						<FileListForAdmin
+						<MkFileListForAdmin
 							:pagination="pagination"
 							:view-mode="viewMode"
 						/>
 					</div>
 				</div>
-			</Spacer>
-		</StickyContainer>
+			</MkSpacer>
+		</MkStickyContainer>
 	</div>
 </template>
 
 <script lang="ts" setup>
 import { computed, defineAsyncComponent } from "vue";
 import * as Acct from "iceshrimp-js/built/acct";
-import Button from "@/components/Button.vue";
-import Input from "@/components/form/Input.vue";
-import Select from "@/components/form/Select.vue";
-import FileListForAdmin from "@/components/FileListForAdmin.vue";
+import MkButton from "@/components/MkButton.vue";
+import MkInput from "@/components/form/input.vue";
+import MkSelect from "@/components/form/select.vue";
+import MkFileListForAdmin from "@/components/MkFileListForAdmin.vue";
 import { lookupFile } from "@/scripts/lookup-file";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
diff --git a/packages/client/src/pages/admin/Hashtags.vue b/packages/client/src/pages/admin/hashtags.vue
similarity index 80%
rename from packages/client/src/pages/admin/Hashtags.vue
rename to packages/client/src/pages/admin/hashtags.vue
index 65600d819..d10ee44f3 100644
--- a/packages/client/src/pages/admin/Hashtags.vue
+++ b/packages/client/src/pages/admin/hashtags.vue
@@ -1,13 +1,13 @@
 <template>
-	<StickyContainer>
+	<MkStickyContainer>
 		<template #header>
-			<PageHeader
+			<MkPageHeader
 				:actions="headerActions"
 				:tabs="headerTabs"
 				:display-back-button="true"
 			/>
 		</template>
-		<Spacer :content-max="700" :margin-min="16" :margin-max="32">
+		<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
 			<FormSuspense :p="init">
 				<FormTextarea v-model="hiddenTags" class="_formBlock">
 					<span>{{ i18n.ts.hiddenTags }}</span>
@@ -21,15 +21,15 @@
 					{{ i18n.ts.save }}</FormButton
 				>
 			</FormSuspense>
-		</Spacer>
-	</StickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import {} from "vue";
-import FormButton from "@/components/Button.vue";
-import FormTextarea from "@/components/form/Textarea.vue";
-import FormSuspense from "@/components/form/Suspense.vue";
+import FormButton from "@/components/MkButton.vue";
+import FormTextarea from "@/components/form/textarea.vue";
+import FormSuspense from "@/components/form/suspense.vue";
 import * as os from "@/os";
 import { fetchInstance } from "@/instance";
 import { i18n } from "@/i18n";
diff --git a/packages/client/src/pages/admin/Index.vue b/packages/client/src/pages/admin/index.vue
similarity index 87%
rename from packages/client/src/pages/admin/Index.vue
rename to packages/client/src/pages/admin/index.vue
index 22fadb159..4f2f1ded0 100644
--- a/packages/client/src/pages/admin/Index.vue
+++ b/packages/client/src/pages/admin/index.vue
@@ -1,7 +1,7 @@
 <template>
 	<div ref="el" class="hiyeyicy" :class="{ wide: !narrow }">
 		<div v-if="!narrow || currentPage?.route.name == null" class="nav">
-			<Spacer :content-max="700" :margin-min="16">
+			<MkSpacer :content-max="700" :margin-min="16">
 				<div class="lxpfedzu">
 					<div class="banner">
 						<img
@@ -11,43 +11,46 @@
 						/>
 					</div>
 
-					<Info v-if="thereIsUnresolvedAbuseReport" warn class="info"
+					<MkInfo
+						v-if="thereIsUnresolvedAbuseReport"
+						warn
+						class="info"
 						>{{ i18n.ts.thereIsUnresolvedAbuseReportWarning }}
-						<A to="/admin/abuses" class="_link">{{
+						<MkA to="/admin/abuses" class="_link">{{
 							i18n.ts.check
-						}}</A>
-					</Info>
-					<Info v-if="noMaintainerInformation" warn class="info"
+						}}</MkA></MkInfo
+					>
+					<MkInfo v-if="noMaintainerInformation" warn class="info"
 						>{{ i18n.ts.noMaintainerInformationWarning }}
-						<A to="/admin/settings" class="_link">{{
+						<MkA to="/admin/settings" class="_link">{{
 							i18n.ts.configure
-						}}</A>
-					</Info>
-					<Info v-if="noBotProtection" warn class="info"
+						}}</MkA></MkInfo
+					>
+					<MkInfo v-if="noBotProtection" warn class="info"
 						>{{ i18n.ts.noBotProtectionWarning }}
-						<A to="/admin/security" class="_link">{{
+						<MkA to="/admin/security" class="_link">{{
 							i18n.ts.configure
-						}}</A>
-					</Info>
-					<Info v-if="noEmailServer" warn class="info"
+						}}</MkA></MkInfo
+					>
+					<MkInfo v-if="noEmailServer" warn class="info"
 						>{{ i18n.ts.noEmailServerWarning }}
-						<A to="/admin/email-settings" class="_link">{{
+						<MkA to="/admin/email-settings" class="_link">{{
 							i18n.ts.configure
-						}}</A>
-					</Info>
-					<Info v-if="updateAvailable" warn class="info"
+						}}</MkA></MkInfo
+					>
+					<MkInfo v-if="updateAvailable" warn class="info"
 						>{{ i18n.ts.updateAvailable }}
 						<a
 							href="https://iceshrimp.dev/iceshrimp/iceshrimp/releases"
 							target="_bank"
 							class="_link"
 							>{{ i18n.ts.check }}</a
-						>
-					</Info>
+						></MkInfo
+					>
 
-					<SuperMenu :def="menuDef" :grid="narrow"></SuperMenu>
+					<MkSuperMenu :def="menuDef" :grid="narrow"></MkSuperMenu>
 				</div>
-			</Spacer>
+			</MkSpacer>
 		</div>
 		<div v-if="!(narrow && currentPage?.route.name == null)" class="main">
 			<RouterView />
@@ -68,8 +71,8 @@ import {
 	ref,
 } from "vue";
 import { i18n } from "@/i18n";
-import SuperMenu from "@/components/SuperMenu.vue";
-import Info from "@/components/Info.vue";
+import MkSuperMenu from "@/components/MkSuperMenu.vue";
+import MkInfo from "@/components/MkInfo.vue";
 import { scroll } from "@/scripts/scroll";
 import { instance } from "@/instance";
 import { version } from "@/config";
@@ -124,28 +127,24 @@ os.api("admin/abuse-user-reports", {
 
 if (defaultStore.state.showAdminUpdates) {
 	os.api("latest-version").then((res) => {
-		if (!res?.tag_name) {
-			updateAvailable = false;
-			return;
-		}
+    if (!res?.tag_name) {
+      updateAvailable = false;
+      return;
+    }
 
-		const tag = res.tag_name as string;
-		if (tag === `v${version}`) {
-			updateAvailable = false;
-			return;
-		}
-		const tagDate = tag.includes("-")
-			? tag.substring(0, tag.indexOf("-"))
-			: tag;
-		const versionDate = version.includes("-")
-			? version.substring(0, version.indexOf("-"))
-			: version;
-		if (tagDate < versionDate) {
-			updateAvailable = false;
-			return;
-		}
-		updateAvailable = true;
-		return;
+    const tag = res.tag_name as string;
+    if (tag === `v${version}`) {
+      updateAvailable = false;
+      return;
+    }
+    const tagDate = tag.includes('-') ? tag.substring(0, tag.indexOf('-')) : tag;
+    const versionDate = version.includes('-') ? version.substring(0, version.indexOf('-')) : version;
+    if (tagDate < versionDate) {
+      updateAvailable = false;
+      return;
+    }
+    updateAvailable = true;
+    return;
 	});
 }
 
diff --git a/packages/client/src/pages/admin/InstanceBlock.vue b/packages/client/src/pages/admin/instance-block.vue
similarity index 81%
rename from packages/client/src/pages/admin/InstanceBlock.vue
rename to packages/client/src/pages/admin/instance-block.vue
index f6cb2f650..f3c4f542c 100644
--- a/packages/client/src/pages/admin/InstanceBlock.vue
+++ b/packages/client/src/pages/admin/instance-block.vue
@@ -1,17 +1,16 @@
 <template>
-	<StickyContainer>
-		<template #header>
-			<PageHeader
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
 				:actions="headerActions"
 				:tabs="headerTabs"
 				:display-back-button="true"
-			/>
-		</template>
-		<Spacer :content-max="700" :margin-min="16" :margin-max="32">
-			<Tab v-model="tab" class="_formBlock">
+		/></template>
+		<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
+			<MkTab v-model="tab" class="_formBlock">
 				<option value="block">{{ i18n.ts.blockedInstances }}</option>
 				<option value="silence">{{ i18n.ts.silencedInstances }}</option>
-			</Tab>
+			</MkTab>
 			<FormSuspense :p="init">
 				<FormTextarea
 					v-if="tab === 'block'"
@@ -39,16 +38,16 @@
 					{{ i18n.ts.save }}</FormButton
 				>
 			</FormSuspense>
-		</Spacer>
-	</StickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import {} from "vue";
-import FormButton from "@/components/Button.vue";
-import FormTextarea from "@/components/form/Textarea.vue";
-import FormSuspense from "@/components/form/Suspense.vue";
-import Tab from "@/components/Tab.vue";
+import FormButton from "@/components/MkButton.vue";
+import FormTextarea from "@/components/form/textarea.vue";
+import FormSuspense from "@/components/form/suspense.vue";
+import MkTab from "@/components/MkTab.vue";
 import * as os from "@/os";
 import { fetchInstance } from "@/instance";
 import { i18n } from "@/i18n";
diff --git a/packages/client/src/pages/admin/IntegrationsDiscord.vue b/packages/client/src/pages/admin/integrations.discord.vue
similarity index 86%
rename from packages/client/src/pages/admin/IntegrationsDiscord.vue
rename to packages/client/src/pages/admin/integrations.discord.vue
index 207d0ac9f..2bf047069 100644
--- a/packages/client/src/pages/admin/IntegrationsDiscord.vue
+++ b/packages/client/src/pages/admin/integrations.discord.vue
@@ -35,11 +35,11 @@
 
 <script lang="ts" setup>
 import {} from "vue";
-import FormSwitch from "@/components/form/Switch.vue";
-import FormInput from "@/components/form/Input.vue";
-import FormButton from "@/components/Button.vue";
-import FormInfo from "@/components/Info.vue";
-import FormSuspense from "@/components/form/Suspense.vue";
+import FormSwitch from "@/components/form/switch.vue";
+import FormInput from "@/components/form/input.vue";
+import FormButton from "@/components/MkButton.vue";
+import FormInfo from "@/components/MkInfo.vue";
+import FormSuspense from "@/components/form/suspense.vue";
 import * as os from "@/os";
 import { fetchInstance } from "@/instance";
 import { i18n } from "@/i18n";
diff --git a/packages/client/src/pages/admin/IntegrationsGithub.vue b/packages/client/src/pages/admin/integrations.github.vue
similarity index 86%
rename from packages/client/src/pages/admin/IntegrationsGithub.vue
rename to packages/client/src/pages/admin/integrations.github.vue
index bbb25266c..67c57a7dd 100644
--- a/packages/client/src/pages/admin/IntegrationsGithub.vue
+++ b/packages/client/src/pages/admin/integrations.github.vue
@@ -35,11 +35,11 @@
 
 <script lang="ts" setup>
 import {} from "vue";
-import FormSwitch from "@/components/form/Switch.vue";
-import FormInput from "@/components/form/Input.vue";
-import FormButton from "@/components/Button.vue";
-import FormInfo from "@/components/Info.vue";
-import FormSuspense from "@/components/form/Suspense.vue";
+import FormSwitch from "@/components/form/switch.vue";
+import FormInput from "@/components/form/input.vue";
+import FormButton from "@/components/MkButton.vue";
+import FormInfo from "@/components/MkInfo.vue";
+import FormSuspense from "@/components/form/suspense.vue";
 import * as os from "@/os";
 import { fetchInstance } from "@/instance";
 import { i18n } from "@/i18n";
diff --git a/packages/client/src/pages/admin/Integrations.vue b/packages/client/src/pages/admin/integrations.vue
similarity index 80%
rename from packages/client/src/pages/admin/Integrations.vue
rename to packages/client/src/pages/admin/integrations.vue
index f54f8cd87..510b32a08 100644
--- a/packages/client/src/pages/admin/Integrations.vue
+++ b/packages/client/src/pages/admin/integrations.vue
@@ -1,13 +1,12 @@
 <template>
-	<StickyContainer>
-		<template #header>
-			<PageHeader
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
 				:actions="headerActions"
 				:tabs="headerTabs"
 				:display-back-button="true"
-			/>
-		</template>
-		<Spacer :content-max="700" :margin-min="16" :margin-max="32">
+		/></template>
+		<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
 			<FormSuspense :p="init">
 				<FormFolder class="_formBlock">
 					<template #icon
@@ -34,16 +33,16 @@
 					<XDiscord />
 				</FormFolder>
 			</FormSuspense>
-		</Spacer>
-	</StickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import {} from "vue";
-import XGithub from "./IntegrationsGithub.vue";
-import XDiscord from "./IntegrationsDiscord.vue";
-import FormSuspense from "@/components/form/Suspense.vue";
-import FormFolder from "@/components/form/Folder.vue";
+import XGithub from "./integrations.github.vue";
+import XDiscord from "./integrations.discord.vue";
+import FormSuspense from "@/components/form/suspense.vue";
+import FormFolder from "@/components/form/folder.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
diff --git a/packages/client/src/pages/admin/ObjectStorage.vue b/packages/client/src/pages/admin/object-storage.vue
similarity index 92%
rename from packages/client/src/pages/admin/ObjectStorage.vue
rename to packages/client/src/pages/admin/object-storage.vue
index 26692e22f..a438c6944 100644
--- a/packages/client/src/pages/admin/ObjectStorage.vue
+++ b/packages/client/src/pages/admin/object-storage.vue
@@ -1,13 +1,12 @@
 <template>
-	<StickyContainer>
-		<template #header>
-			<PageHeader
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
 				:actions="headerActions"
 				:tabs="headerTabs"
 				:display-back-button="true"
-			/>
-		</template>
-		<Spacer :content-max="700" :margin-min="16" :margin-max="32">
+		/></template>
+		<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
 			<FormSuspense :p="init">
 				<div class="_formRoot">
 					<FormSwitch v-model="useObjectStorage" class="_formBlock">{{
@@ -140,17 +139,17 @@
 					</template>
 				</div>
 			</FormSuspense>
-		</Spacer>
-	</StickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import {} from "vue";
-import FormSwitch from "@/components/form/Switch.vue";
-import FormInput from "@/components/form/Input.vue";
-import FormSuspense from "@/components/form/Suspense.vue";
-import FormSplit from "@/components/form/Split.vue";
-import FormSection from "@/components/form/Section.vue";
+import FormSwitch from "@/components/form/switch.vue";
+import FormInput from "@/components/form/input.vue";
+import FormSuspense from "@/components/form/suspense.vue";
+import FormSplit from "@/components/form/split.vue";
+import FormSection from "@/components/form/section.vue";
 import * as os from "@/os";
 import { fetchInstance } from "@/instance";
 import { i18n } from "@/i18n";
diff --git a/packages/client/src/pages/admin/OtherSettings.vue b/packages/client/src/pages/admin/other-settings.vue
similarity index 77%
rename from packages/client/src/pages/admin/OtherSettings.vue
rename to packages/client/src/pages/admin/other-settings.vue
index d02b9caa5..1d74e752a 100644
--- a/packages/client/src/pages/admin/OtherSettings.vue
+++ b/packages/client/src/pages/admin/other-settings.vue
@@ -1,21 +1,20 @@
 <template>
-	<StickyContainer>
-		<template #header>
-			<PageHeader
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
 				:actions="headerActions"
 				:tabs="headerTabs"
 				:display-back-button="true"
-			/>
-		</template>
-		<Spacer :content-max="700" :margin-min="16" :margin-max="32">
+		/></template>
+		<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
 			<FormSuspense :p="init"> none </FormSuspense>
-		</Spacer>
-	</StickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import {} from "vue";
-import FormSuspense from "@/components/form/Suspense.vue";
+import FormSuspense from "@/components/form/suspense.vue";
 import * as os from "@/os";
 import { fetchInstance } from "@/instance";
 import { i18n } from "@/i18n";
diff --git a/packages/client/src/pages/admin/OverviewActiveUsers.vue b/packages/client/src/pages/admin/overview.active-users.vue
similarity index 99%
rename from packages/client/src/pages/admin/OverviewActiveUsers.vue
rename to packages/client/src/pages/admin/overview.active-users.vue
index 60dabd215..25dcac494 100644
--- a/packages/client/src/pages/admin/OverviewActiveUsers.vue
+++ b/packages/client/src/pages/admin/overview.active-users.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<Loading v-if="fetching" />
+		<MkLoading v-if="fetching" />
 		<div v-show="!fetching" :class="$style.root" class="_panel">
 			<canvas ref="chartEl"></canvas>
 		</div>
diff --git a/packages/client/src/pages/admin/OverviewApRequests.vue b/packages/client/src/pages/admin/overview.ap-requests.vue
similarity index 97%
rename from packages/client/src/pages/admin/OverviewApRequests.vue
rename to packages/client/src/pages/admin/overview.ap-requests.vue
index b5455a7d4..c655336e8 100644
--- a/packages/client/src/pages/admin/OverviewApRequests.vue
+++ b/packages/client/src/pages/admin/overview.ap-requests.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<Loading v-if="fetching" />
+		<MkLoading v-if="fetching" />
 		<div v-show="!fetching" :class="$style.root">
 			<div class="charts _panel">
 				<div class="chart">
@@ -19,10 +19,10 @@ import { onMounted, onUnmounted, ref } from "vue";
 import { Chart } from "chart.js";
 import gradient from "chartjs-plugin-gradient";
 import tinycolor from "tinycolor2";
-import MiniChart from "@/components/MiniChart.vue";
+import MkMiniChart from "@/components/MkMiniChart.vue";
 import * as os from "@/os";
 import number from "@/filters/number";
-import NumberDiff from "@/components/NumberDiff.vue";
+import MkNumberDiff from "@/components/MkNumberDiff.vue";
 import { i18n } from "@/i18n";
 import { useChartTooltip } from "@/scripts/use-chart-tooltip";
 import { chartVLine } from "@/scripts/chart-vline";
diff --git a/packages/client/src/pages/admin/OverviewFederation.vue b/packages/client/src/pages/admin/overview.federation.vue
similarity index 94%
rename from packages/client/src/pages/admin/OverviewFederation.vue
rename to packages/client/src/pages/admin/overview.federation.vue
index eb09344c9..ab4dd2c69 100644
--- a/packages/client/src/pages/admin/OverviewFederation.vue
+++ b/packages/client/src/pages/admin/overview.federation.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<Loading v-if="fetching" />
+		<MkLoading v-if="fetching" />
 		<div v-show="!fetching" :class="$style.root">
 			<div
 				v-if="topSubInstancesForPie && topPubInstancesForPie"
@@ -25,12 +25,11 @@
 					<div class="body">
 						<div class="value">
 							{{ number(federationSubActive) }}
-							<NumberDiff
+							<MkNumberDiff
 								v-tooltip="i18n.ts.dayOverDayChanges"
 								class="diff"
 								:value="federationSubActiveDiff"
-							>
-							</NumberDiff>
+							></MkNumberDiff>
 						</div>
 						<div class="label">Sub</div>
 					</div>
@@ -42,12 +41,11 @@
 					<div class="body">
 						<div class="value">
 							{{ number(federationPubActive) }}
-							<NumberDiff
+							<MkNumberDiff
 								v-tooltip="i18n.ts.dayOverDayChanges"
 								class="diff"
 								:value="federationPubActiveDiff"
-							>
-							</NumberDiff>
+							></MkNumberDiff>
 						</div>
 						<div class="label">Pub</div>
 					</div>
@@ -59,11 +57,11 @@
 
 <script lang="ts" setup>
 import { onMounted, onUnmounted, ref } from "vue";
-import XPie from "./OverviewPie.vue";
-import MiniChart from "@/components/MiniChart.vue";
+import XPie from "./overview.pie.vue";
+import MkMiniChart from "@/components/MkMiniChart.vue";
 import * as os from "@/os";
 import number from "@/filters/number";
-import NumberDiff from "@/components/NumberDiff.vue";
+import MkNumberDiff from "@/components/MkNumberDiff.vue";
 import { i18n } from "@/i18n";
 import { useChartTooltip } from "@/scripts/use-chart-tooltip";
 
diff --git a/packages/client/src/pages/admin/OverviewHeatmap.vue b/packages/client/src/pages/admin/overview.heatmap.vue
similarity index 74%
rename from packages/client/src/pages/admin/OverviewHeatmap.vue
rename to packages/client/src/pages/admin/overview.heatmap.vue
index b4e88b9ce..e926fdc53 100644
--- a/packages/client/src/pages/admin/OverviewHeatmap.vue
+++ b/packages/client/src/pages/admin/overview.heatmap.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="_panel" :class="$style.root">
-		<Select v-model="src" style="margin: 0 0 12px 0" small>
+		<MkSelect v-model="src" style="margin: 0 0 12px 0" small>
 			<option value="notes">Posts</option>
 			<option value="active-users">Active users</option>
 			<option value="ap-requests-inbox-received">
@@ -12,14 +12,14 @@
 			<option value="ap-requests-deliver-failed">
 				Fediverse Requests: deliverFailed
 			</option>
-		</Select>
-		<Heatmap :src="src" />
+		</MkSelect>
+		<MkHeatmap :src="src" />
 	</div>
 </template>
 
 <script lang="ts" setup>
-import Heatmap from "@/components/Heatmap.vue";
-import Select from "@/components/form/Select.vue";
+import MkHeatmap from "@/components/MkHeatmap.vue";
+import MkSelect from "@/components/form/select.vue";
 
 let src = $ref("notes");
 </script>
diff --git a/packages/client/src/pages/admin/OverviewInstances.vue b/packages/client/src/pages/admin/overview.instances.vue
similarity index 87%
rename from packages/client/src/pages/admin/OverviewInstances.vue
rename to packages/client/src/pages/admin/overview.instances.vue
index 825e4a7f5..e5d0d1d32 100644
--- a/packages/client/src/pages/admin/OverviewInstances.vue
+++ b/packages/client/src/pages/admin/overview.instances.vue
@@ -4,9 +4,9 @@
 			:name="$store.state.animation ? '_transition_zoom' : ''"
 			mode="out-in"
 		>
-			<Loading v-if="fetching" />
+			<MkLoading v-if="fetching" />
 			<div v-else class="instances">
-				<A
+				<MkA
 					v-for="(instance, i) in instances"
 					:key="instance.id"
 					v-tooltip.mfm.noDelay="
@@ -15,8 +15,8 @@
 					:to="`/instance-info/${instance.host}`"
 					class="instance"
 				>
-					<InstanceCardMini :instance="instance" />
-				</A>
+					<MkInstanceCardMini :instance="instance" />
+				</MkA>
 			</div>
 		</Transition>
 	</div>
@@ -26,7 +26,7 @@
 import { onMounted, onUnmounted, ref } from "vue";
 import * as os from "@/os";
 import { useInterval } from "@/scripts/use-interval";
-import InstanceCardMini from "@/components/InstanceCardMini.vue";
+import MkInstanceCardMini from "@/components/MkInstanceCardMini.vue";
 
 const instances = ref([]);
 const fetching = ref(true);
diff --git a/packages/client/src/pages/admin/OverviewMetrics.vue b/packages/client/src/pages/admin/overview.metrics.vue
similarity index 98%
rename from packages/client/src/pages/admin/OverviewMetrics.vue
rename to packages/client/src/pages/admin/overview.metrics.vue
index 866b8d4e7..48d407e7d 100644
--- a/packages/client/src/pages/admin/OverviewMetrics.vue
+++ b/packages/client/src/pages/admin/overview.metrics.vue
@@ -55,7 +55,7 @@
 
 <script lang="ts" setup>
 import { onMounted, onUnmounted } from "vue";
-import XPie from "../../widgets/server-metric/Pie.vue";
+import XPie from "../../widgets/server-metric/pie.vue";
 import bytes from "@/filters/bytes";
 import { stream } from "@/stream";
 import * as os from "@/os";
diff --git a/packages/client/src/pages/admin/OverviewModerators.vue b/packages/client/src/pages/admin/overview.moderators.vue
similarity index 87%
rename from packages/client/src/pages/admin/OverviewModerators.vue
rename to packages/client/src/pages/admin/overview.moderators.vue
index 13cd4f2b4..a29cc20b9 100644
--- a/packages/client/src/pages/admin/OverviewModerators.vue
+++ b/packages/client/src/pages/admin/overview.moderators.vue
@@ -4,16 +4,21 @@
 			:name="$store.state.animation ? '_transition_zoom' : ''"
 			mode="out-in"
 		>
-			<Loading v-if="fetching" />
+			<MkLoading v-if="fetching" />
 			<div v-else :class="$style.root" class="_panel">
-				<A
+				<MkA
 					v-for="user in moderators"
 					:key="user.id"
 					class="user"
 					:to="`/user-info/${user.id}`"
 				>
-					<Avatar :user="user" class="avatar" indicator disableLink />
-				</A>
+					<MkAvatar
+						:user="user"
+						class="avatar"
+						indicator
+						disableLink
+					/>
+				</MkA>
 			</div>
 		</Transition>
 	</div>
diff --git a/packages/client/src/pages/admin/OverviewPie.vue b/packages/client/src/pages/admin/overview.pie.vue
similarity index 100%
rename from packages/client/src/pages/admin/OverviewPie.vue
rename to packages/client/src/pages/admin/overview.pie.vue
diff --git a/packages/client/src/pages/admin/overview.queue-chart.vue b/packages/client/src/pages/admin/overview.queue-chart.vue
new file mode 100644
index 000000000..1348bde98
--- /dev/null
+++ b/packages/client/src/pages/admin/overview.queue-chart.vue
@@ -0,0 +1,222 @@
+<template>
+	<canvas ref="chartEl"></canvas>
+</template>
+
+<script lang="ts" setup>
+import { defineComponent, onMounted, onUnmounted, ref } from "vue";
+import {
+	Chart,
+	ArcElement,
+	LineElement,
+	BarElement,
+	PointElement,
+	BarController,
+	LineController,
+	CategoryScale,
+	LinearScale,
+	TimeScale,
+	Legend,
+	Title,
+	Tooltip,
+	SubTitle,
+	Filler,
+} from "chart.js";
+import number from "@/filters/number";
+import * as os from "@/os";
+import { defaultStore } from "@/store";
+import { useChartTooltip } from "@/scripts/use-chart-tooltip";
+
+Chart.register(
+	ArcElement,
+	LineElement,
+	BarElement,
+	PointElement,
+	BarController,
+	LineController,
+	CategoryScale,
+	LinearScale,
+	TimeScale,
+	Legend,
+	Title,
+	Tooltip,
+	SubTitle,
+	Filler,
+);
+
+const props = defineProps<{
+	domain: string;
+	connection: any;
+}>();
+
+const alpha = (hex, a) => {
+	const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)!;
+	const r = parseInt(result[1], 16);
+	const g = parseInt(result[2], 16);
+	const b = parseInt(result[3], 16);
+	return `rgba(${r}, ${g}, ${b}, ${a})`;
+};
+
+const chartEl = ref<HTMLCanvasElement>(null);
+
+const gridColor = defaultStore.state.darkMode
+	? "rgba(255, 255, 255, 0.1)"
+	: "rgba(0, 0, 0, 0.1)";
+
+// フォントカラー
+Chart.defaults.color = getComputedStyle(
+	document.documentElement,
+).getPropertyValue("--fg");
+
+const { handler: externalTooltipHandler } = useChartTooltip();
+
+let chartInstance: Chart;
+
+const onStats = (stats) => {
+	chartInstance.data.labels.push("");
+	chartInstance.data.datasets[0].data.push(
+		stats[props.domain].activeSincePrevTick,
+	);
+	chartInstance.data.datasets[1].data.push(stats[props.domain].active);
+	chartInstance.data.datasets[2].data.push(stats[props.domain].waiting);
+	chartInstance.data.datasets[3].data.push(stats[props.domain].delayed);
+	if (chartInstance.data.datasets[0].data.length > 100) {
+		chartInstance.data.labels.shift();
+		chartInstance.data.datasets[0].data.shift();
+		chartInstance.data.datasets[1].data.shift();
+		chartInstance.data.datasets[2].data.shift();
+		chartInstance.data.datasets[3].data.shift();
+	}
+	chartInstance.update();
+};
+
+const onStatsLog = (statsLog) => {
+	for (const stats of [...statsLog].reverse()) {
+		chartInstance.data.labels.push("");
+		chartInstance.data.datasets[0].data.push(
+			stats[props.domain].activeSincePrevTick,
+		);
+		chartInstance.data.datasets[1].data.push(stats[props.domain].active);
+		chartInstance.data.datasets[2].data.push(stats[props.domain].waiting);
+		chartInstance.data.datasets[3].data.push(stats[props.domain].delayed);
+		if (chartInstance.data.datasets[0].data.length > 100) {
+			chartInstance.data.labels.shift();
+			chartInstance.data.datasets[0].data.shift();
+			chartInstance.data.datasets[1].data.shift();
+			chartInstance.data.datasets[2].data.shift();
+			chartInstance.data.datasets[3].data.shift();
+		}
+	}
+	chartInstance.update();
+};
+
+onMounted(() => {
+	chartInstance = new Chart(chartEl.value, {
+		type: "line",
+		data: {
+			labels: [],
+			datasets: [
+				{
+					label: "Process",
+					pointRadius: 0,
+					tension: 0.3,
+					borderWidth: 2,
+					borderJoinStyle: "round",
+					borderColor: "#9ccfd8",
+					backgroundColor: alpha("#9ccfd8", 0.1),
+					data: [],
+				},
+				{
+					label: "Active",
+					pointRadius: 0,
+					tension: 0.3,
+					borderWidth: 2,
+					borderJoinStyle: "round",
+					borderColor: "#31748f",
+					backgroundColor: alpha("#31748f", 0.1),
+					data: [],
+				},
+				{
+					label: "Waiting",
+					pointRadius: 0,
+					tension: 0.3,
+					borderWidth: 2,
+					borderJoinStyle: "round",
+					borderColor: "#f6c177",
+					backgroundColor: alpha("#f6c177", 0.1),
+					data: [],
+				},
+				{
+					label: "Delayed",
+					pointRadius: 0,
+					tension: 0.3,
+					borderWidth: 2,
+					borderJoinStyle: "round",
+					borderColor: "#eb6f92",
+					borderDash: [5, 5],
+					fill: false,
+					data: [],
+				},
+			],
+		},
+		options: {
+			aspectRatio: 2.5,
+			layout: {
+				padding: {
+					left: 0,
+					right: 0,
+					top: 0,
+					bottom: 0,
+				},
+			},
+			scales: {
+				x: {
+					display: false,
+					grid: {
+						display: false,
+					},
+					ticks: {
+						display: false,
+						maxTicksLimit: 10,
+					},
+				},
+				y: {
+					display: false,
+					min: 0,
+					grid: {
+						display: false,
+					},
+					ticks: {
+						display: false,
+					},
+				},
+			},
+			interaction: {
+				intersect: false,
+			},
+			plugins: {
+				legend: {
+					display: false,
+				},
+				tooltip: {
+					enabled: false,
+					mode: "index",
+					animation: {
+						duration: 0,
+					},
+					external: externalTooltipHandler,
+				},
+			},
+		},
+	});
+
+	props.connection.on("stats", onStats);
+	props.connection.on("statsLog", onStatsLog);
+});
+
+onUnmounted(() => {
+	props.connection.off("stats", onStats);
+	props.connection.off("statsLog", onStatsLog);
+});
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/packages/client/src/pages/admin/OverviewQueueChart.vue b/packages/client/src/pages/admin/overview.queue.chart.vue
similarity index 100%
rename from packages/client/src/pages/admin/OverviewQueueChart.vue
rename to packages/client/src/pages/admin/overview.queue.chart.vue
diff --git a/packages/client/src/pages/admin/OverviewQueue.vue b/packages/client/src/pages/admin/overview.queue.vue
similarity index 98%
rename from packages/client/src/pages/admin/OverviewQueue.vue
rename to packages/client/src/pages/admin/overview.queue.vue
index ebc0c0121..5b003887e 100644
--- a/packages/client/src/pages/admin/OverviewQueue.vue
+++ b/packages/client/src/pages/admin/overview.queue.vue
@@ -43,7 +43,7 @@
 
 <script lang="ts" setup>
 import { markRaw, onMounted, onUnmounted, ref } from "vue";
-import XChart from "./OverviewQueueChart.vue";
+import XChart from "./overview.queue.chart.vue";
 import number from "@/filters/number";
 import * as os from "@/os";
 import { stream } from "@/stream";
diff --git a/packages/client/src/pages/admin/OverviewStats.vue b/packages/client/src/pages/admin/overview.stats.vue
similarity index 92%
rename from packages/client/src/pages/admin/OverviewStats.vue
rename to packages/client/src/pages/admin/overview.stats.vue
index 2ccbdbdfd..172e346e7 100644
--- a/packages/client/src/pages/admin/OverviewStats.vue
+++ b/packages/client/src/pages/admin/overview.stats.vue
@@ -4,7 +4,7 @@
 			:name="$store.state.animation ? '_transition_zoom' : ''"
 			mode="out-in"
 		>
-			<Loading v-if="fetching" />
+			<MkLoading v-if="fetching" />
 			<div v-else :class="$style.root">
 				<div class="item _panel users">
 					<div class="icon">
@@ -12,15 +12,15 @@
 					</div>
 					<div class="body">
 						<div class="value">
-							<Number
+							<MkNumber
 								:value="stats.originalUsersCount"
 								style="margin-right: 0.5em"
 							/>
-							<NumberDiff
+							<MkNumberDiff
 								v-tooltip="i18n.ts.dayOverDayChanges"
 								class="diff"
 								:value="usersComparedToThePrevDay"
-							></NumberDiff>
+							></MkNumberDiff>
 						</div>
 						<div class="label">{{ i18n.ts.users }}</div>
 					</div>
@@ -31,15 +31,15 @@
 					</div>
 					<div class="body">
 						<div class="value">
-							<Number
+							<MkNumber
 								:value="stats.originalNotesCount"
 								style="margin-right: 0.5em"
 							/>
-							<NumberDiff
+							<MkNumberDiff
 								v-tooltip="i18n.ts.dayOverDayChanges"
 								class="diff"
 								:value="notesComparedToThePrevDay"
-							></NumberDiff>
+							></MkNumberDiff>
 						</div>
 						<div class="label">{{ i18n.ts.notes }}</div>
 					</div>
@@ -50,7 +50,7 @@
 					</div>
 					<div class="body">
 						<div class="value">
-							<Number
+							<MkNumber
 								:value="stats.instances"
 								style="margin-right: 0.5em"
 							/>
@@ -64,7 +64,7 @@
 					</div>
 					<div class="body">
 						<div class="value">
-							<Number
+							<MkNumber
 								:value="onlineUsersCount"
 								style="margin-right: 0.5em"
 							/>
@@ -78,7 +78,7 @@
 					</div>
 					<div class="body">
 						<div class="value">
-							<Number
+							<MkNumber
 								:value="emojiCount"
 								style="margin-right: 0.5em"
 							/>
@@ -95,11 +95,11 @@
 
 <script lang="ts" setup>
 import { onMounted, onUnmounted, ref } from "vue";
-import MiniChart from "@/components/MiniChart.vue";
+import MkMiniChart from "@/components/MkMiniChart.vue";
 import * as os from "@/os";
 import number from "@/filters/number";
-import NumberDiff from "@/components/NumberDiff.vue";
-import Number from "@/components/Number.vue";
+import MkNumberDiff from "@/components/MkNumberDiff.vue";
+import MkNumber from "@/components/MkNumber.vue";
 import { i18n } from "@/i18n";
 
 let stats: any = $ref(null);
diff --git a/packages/client/src/pages/admin/OverviewUser.vue b/packages/client/src/pages/admin/overview.user.vue
similarity index 84%
rename from packages/client/src/pages/admin/OverviewUser.vue
rename to packages/client/src/pages/admin/overview.user.vue
index ce4f6b43e..a2eaf33a7 100644
--- a/packages/client/src/pages/admin/OverviewUser.vue
+++ b/packages/client/src/pages/admin/overview.user.vue
@@ -1,26 +1,24 @@
 <template>
-	<A :class="[$style.root]" :to="`/user-info/${user.id}`">
-		<Avatar
+	<MkA :class="[$style.root]" :to="`/user-info/${user.id}`">
+		<MkAvatar
 			class="avatar"
 			:user="user"
 			:disable-link="true"
 			:show-indicator="true"
 		/>
 		<div class="body">
-			<span class="name">
-				<UserName class="name" :user="user" />
-			</span>
+			<span class="name"><MkUserName class="name" :user="user" /></span>
 			<span class="sub"
 				><span class="acct _monospace">@{{ acct(user) }}</span></span
 			>
 		</div>
-		<MiniChart v-if="chart" class="chart" :src="chart.inc" />
-	</A>
+		<MkMiniChart v-if="chart" class="chart" :src="chart.inc" />
+	</MkA>
 </template>
 
 <script lang="ts" setup>
 import * as misskey from "iceshrimp-js";
-import MiniChart from "@/components/MiniChart.vue";
+import MkMiniChart from "@/components/MkMiniChart.vue";
 import * as os from "@/os";
 import { acct } from "@/filters/user";
 
diff --git a/packages/client/src/pages/admin/OverviewUsers.vue b/packages/client/src/pages/admin/overview.users.vue
similarity index 87%
rename from packages/client/src/pages/admin/OverviewUsers.vue
rename to packages/client/src/pages/admin/overview.users.vue
index da08d52a0..9017eb2a2 100644
--- a/packages/client/src/pages/admin/OverviewUsers.vue
+++ b/packages/client/src/pages/admin/overview.users.vue
@@ -4,16 +4,16 @@
 			:name="$store.state.animation ? '_transition_zoom' : ''"
 			mode="out-in"
 		>
-			<Loading v-if="fetching" />
+			<MkLoading v-if="fetching" />
 			<div v-else class="users">
-				<A
+				<MkA
 					v-for="(user, i) in newUsers"
 					:key="user.id"
 					:to="`/user-info/${user.id}`"
 					class="user"
 				>
-					<UserCardMini :user="user" />
-				</A>
+					<MkUserCardMini :user="user" />
+				</MkA>
 			</div>
 		</Transition>
 	</div>
@@ -23,7 +23,7 @@
 import { onMounted, onUnmounted, ref } from "vue";
 import * as os from "@/os";
 import { useInterval } from "@/scripts/use-interval";
-import UserCardMini from "@/components/UserCardMini.vue";
+import MkUserCardMini from "@/components/MkUserCardMini.vue";
 
 let newUsers = $ref(null);
 let fetching = $ref(true);
diff --git a/packages/client/src/pages/admin/Overview.vue b/packages/client/src/pages/admin/overview.vue
similarity index 77%
rename from packages/client/src/pages/admin/Overview.vue
rename to packages/client/src/pages/admin/overview.vue
index 3a05acefb..d88022595 100644
--- a/packages/client/src/pages/admin/Overview.vue
+++ b/packages/client/src/pages/admin/overview.vue
@@ -1,62 +1,62 @@
 <template>
-	<Spacer :content-max="1000">
+	<MkSpacer :content-max="1000">
 		<div ref="rootEl" class="edbbcaef">
-			<Folder class="item">
+			<MkFolder class="item">
 				<template #header>Stats</template>
 				<XStats />
-			</Folder>
+			</MkFolder>
 
-			<Folder class="item">
+			<MkFolder class="item">
 				<template #header>Active users</template>
 				<XActiveUsers />
-			</Folder>
+			</MkFolder>
 
-			<Folder class="item">
+			<MkFolder class="item">
 				<template #header>Heatmap</template>
 				<XHeatmap />
-			</Folder>
+			</MkFolder>
 
-			<Folder class="item">
+			<MkFolder class="item">
 				<template #header>Moderators</template>
 				<XModerators />
-			</Folder>
+			</MkFolder>
 
-			<Folder class="item">
+			<MkFolder class="item">
 				<template #header>Federation</template>
 				<XFederation />
-			</Folder>
+			</MkFolder>
 
-			<Folder class="item">
+			<MkFolder class="item">
 				<template #header>Instances</template>
 				<XInstances />
-			</Folder>
+			</MkFolder>
 
-			<Folder class="item">
+			<MkFolder class="item">
 				<template #header>Fediverse Requests</template>
 				<XApRequests />
-			</Folder>
+			</MkFolder>
 
-			<Folder class="item">
+			<MkFolder class="item">
 				<template #header>New users</template>
 				<XUsers />
-			</Folder>
+			</MkFolder>
 
-			<Folder class="item">
+			<MkFolder class="item">
 				<template #header>Deliver queue</template>
 				<XQueue domain="deliver" />
-			</Folder>
+			</MkFolder>
 
-			<Folder class="item">
+			<MkFolder class="item">
 				<template #header>Inbox queue</template>
 				<XQueue domain="inbox" />
-			</Folder>
+			</MkFolder>
 
-			<!-- <Folder class="item">
+			<!-- <MkFolder class="item">
 				<template #header>Server metrics</template>
 				<XMetrics domain="inbox" />
-			</Folder> -->
+			</MkFolder> -->
 		</div>
-	</Spacer>
+	</MkSpacer>
 </template>
 
 <script lang="ts" setup>
@@ -67,25 +67,25 @@ import {
 	onBeforeUnmount,
 	nextTick,
 } from "vue";
-import XFederation from "./OverviewFederation.vue";
-import XInstances from "./OverviewInstances.vue";
-import XQueue from "./OverviewQueue.vue";
-import XApRequests from "./OverviewApRequests.vue";
-import XUsers from "./OverviewUsers.vue";
-import XActiveUsers from "./OverviewActiveUsers.vue";
-import XStats from "./OverviewStats.vue";
-import XModerators from "./OverviewModerators.vue";
-import XHeatmap from "./OverviewHeatmap.vue";
-// import XMetrics from "./OverviewMetrics.vue";
-import TagCloud from "@/components/TagCloud.vue";
+import XFederation from "./overview.federation.vue";
+import XInstances from "./overview.instances.vue";
+import XQueue from "./overview.queue.vue";
+import XApRequests from "./overview.ap-requests.vue";
+import XUsers from "./overview.users.vue";
+import XActiveUsers from "./overview.active-users.vue";
+import XStats from "./overview.stats.vue";
+import XModerators from "./overview.moderators.vue";
+import XHeatmap from "./overview.heatmap.vue";
+// import XMetrics from "./overview.metrics.vue";
+import MkTagCloud from "@/components/MkTagCloud.vue";
 import { version, url } from "@/config";
 import * as os from "@/os";
 import { stream } from "@/stream";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import { defaultStore } from "@/store";
-import FileListForAdmin from "@/components/FileListForAdmin.vue";
-import Folder from "@/components/Folder.vue";
+import MkFileListForAdmin from "@/components/MkFileListForAdmin.vue";
+import MkFolder from "@/components/MkFolder.vue";
 
 const rootEl = $shallowRef<HTMLElement>();
 let serverInfo: any = $ref(null);
diff --git a/packages/client/src/pages/admin/QueueChartChart.vue b/packages/client/src/pages/admin/queue.chart.chart.vue
similarity index 100%
rename from packages/client/src/pages/admin/QueueChartChart.vue
rename to packages/client/src/pages/admin/queue.chart.chart.vue
diff --git a/packages/client/src/pages/admin/QueueChart.vue b/packages/client/src/pages/admin/queue.chart.vue
similarity index 98%
rename from packages/client/src/pages/admin/QueueChart.vue
rename to packages/client/src/pages/admin/queue.chart.vue
index 0ebcda216..2b6f271c6 100644
--- a/packages/client/src/pages/admin/QueueChart.vue
+++ b/packages/client/src/pages/admin/queue.chart.vue
@@ -59,7 +59,7 @@
 
 <script lang="ts" setup>
 import { markRaw, onMounted, onUnmounted, ref } from "vue";
-import XChart from "./QueueChartChart.vue";
+import XChart from "./queue.chart.chart.vue";
 import number from "@/filters/number";
 import * as os from "@/os";
 import { stream } from "@/stream";
diff --git a/packages/client/src/pages/admin/Queue.vue b/packages/client/src/pages/admin/queue.vue
similarity index 84%
rename from packages/client/src/pages/admin/Queue.vue
rename to packages/client/src/pages/admin/queue.vue
index b28127bf6..b8920f332 100644
--- a/packages/client/src/pages/admin/Queue.vue
+++ b/packages/client/src/pages/admin/queue.vue
@@ -1,24 +1,23 @@
 <template>
-	<StickyContainer>
-		<template #header>
-			<PageHeader
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
 				v-model:tab="tab"
 				:actions="headerActions"
 				:tabs="headerTabs"
 				:display-back-button="true"
-			/>
-		</template>
-		<Spacer :content-max="800">
+		/></template>
+		<MkSpacer :content-max="800">
 			<XQueue v-if="tab === 'deliver'" domain="deliver" />
 			<XQueue v-else-if="tab === 'inbox'" domain="inbox" />
-		</Spacer>
-	</StickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { markRaw, onMounted, onBeforeUnmount, nextTick } from "vue";
-import XQueue from "./QueueChart.vue";
-import Button from "@/components/Button.vue";
+import XQueue from "./queue.chart.vue";
+import MkButton from "@/components/MkButton.vue";
 import * as os from "@/os";
 import * as config from "@/config";
 import { i18n } from "@/i18n";
diff --git a/packages/client/src/pages/admin/Relays.vue b/packages/client/src/pages/admin/relays.vue
similarity index 90%
rename from packages/client/src/pages/admin/Relays.vue
rename to packages/client/src/pages/admin/relays.vue
index 6d441fedc..34f76db69 100644
--- a/packages/client/src/pages/admin/Relays.vue
+++ b/packages/client/src/pages/admin/relays.vue
@@ -1,13 +1,12 @@
 <template>
-	<StickyContainer>
-		<template #header>
-			<PageHeader
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
 				:actions="headerActions"
 				:tabs="headerTabs"
 				:display-back-button="true"
-			/>
-		</template>
-		<Spacer :content-max="800">
+		/></template>
+		<MkSpacer :content-max="800">
 			<div
 				v-for="relay in relays"
 				:key="relay.inbox"
@@ -30,22 +29,22 @@
 					></i>
 					<span>{{ i18n.t(`_relayStatus.${relay.status}`) }}</span>
 				</div>
-				<Button
+				<MkButton
 					class="button"
 					inline
 					danger
 					@click="remove(relay.inbox)"
 					><i class="ph-trash ph-bold ph-lg"></i>
-					{{ i18n.ts.remove }}</Button
+					{{ i18n.ts.remove }}</MkButton
 				>
 			</div>
-		</Spacer>
-	</StickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import {} from "vue";
-import Button from "@/components/Button.vue";
+import MkButton from "@/components/MkButton.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
diff --git a/packages/client/src/pages/admin/Security.vue b/packages/client/src/pages/admin/security.vue
similarity index 87%
rename from packages/client/src/pages/admin/Security.vue
rename to packages/client/src/pages/admin/security.vue
index c1111169e..7d70a95db 100644
--- a/packages/client/src/pages/admin/Security.vue
+++ b/packages/client/src/pages/admin/security.vue
@@ -1,13 +1,12 @@
 <template>
-	<StickyContainer>
-		<template #header>
-			<PageHeader
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
 				:actions="headerActions"
 				:tabs="headerTabs"
 				:display-back-button="true"
-			/>
-		</template>
-		<Spacer :content-max="700" :margin-min="16" :margin-max="32">
+		/></template>
+		<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
 			<FormSuspense :p="init">
 				<div class="_formRoot">
 					<FormFolder class="_formBlock">
@@ -141,22 +140,22 @@
 					</FormFolder>
 				</div>
 			</FormSuspense>
-		</Spacer>
-	</StickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import {} from "vue";
-import XBotProtection from "./BotProtection.vue";
-import FormFolder from "@/components/form/Folder.vue";
-import FormRadios from "@/components/form/Radios.vue";
-import FormSwitch from "@/components/form/Switch.vue";
-import FormInfo from "@/components/Info.vue";
-import FormSuspense from "@/components/form/Suspense.vue";
-import FormRange from "@/components/form/Range.vue";
-import FormInput from "@/components/form/Input.vue";
-import FormTextarea from "@/components/form/Textarea.vue";
-import FormButton from "@/components/Button.vue";
+import XBotProtection from "./bot-protection.vue";
+import FormFolder from "@/components/form/folder.vue";
+import FormRadios from "@/components/form/radios.vue";
+import FormSwitch from "@/components/form/switch.vue";
+import FormInfo from "@/components/MkInfo.vue";
+import FormSuspense from "@/components/form/suspense.vue";
+import FormRange from "@/components/form/range.vue";
+import FormInput from "@/components/form/input.vue";
+import FormTextarea from "@/components/form/textarea.vue";
+import FormButton from "@/components/MkButton.vue";
 import * as os from "@/os";
 import { fetchInstance } from "@/instance";
 import { i18n } from "@/i18n";
diff --git a/packages/client/src/pages/admin/Settings.vue b/packages/client/src/pages/admin/settings.vue
similarity index 93%
rename from packages/client/src/pages/admin/Settings.vue
rename to packages/client/src/pages/admin/settings.vue
index c4fede881..8875c2723 100644
--- a/packages/client/src/pages/admin/Settings.vue
+++ b/packages/client/src/pages/admin/settings.vue
@@ -1,14 +1,13 @@
 <template>
 	<div>
-		<StickyContainer>
-			<template #header>
-				<PageHeader
+		<MkStickyContainer>
+			<template #header
+				><MkPageHeader
 					:actions="headerActions"
 					:tabs="headerTabs"
 					:display-back-button="true"
-				/>
-			</template>
-			<Spacer :content-max="700" :margin-min="16" :margin-max="32">
+			/></template>
+			<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
 				<FormSuspense :p="init">
 					<div class="_formRoot">
 						<FormInput v-model="name" class="_formBlock">
@@ -122,20 +121,20 @@
 							<FormSwitch
 								v-model="enableLocalTimeline"
 								class="_formBlock"
-								>{{ i18n.ts.enableLocalTimeline }}
-							</FormSwitch>
+								>{{ i18n.ts.enableLocalTimeline }}</FormSwitch
+							>
 							<FormSwitch
 								v-model="enableGlobalTimeline"
 								class="_formBlock"
-								>{{ i18n.ts.enableGlobalTimeline }}
-							</FormSwitch>
+								>{{ i18n.ts.enableGlobalTimeline }}</FormSwitch
+							>
 							<FormInfo class="_formBlock">{{
 								i18n.ts.disablingTimelinesInfo
 							}}</FormInfo>
 						</FormSection>
 
 						<FormSection>
-							<Radios
+							<MkRadios
 								v-model="defaultReaction"
 								class="_formBlock"
 							>
@@ -143,13 +142,13 @@
 									i18n.ts.defaultReaction
 								}}</template>
 								<option value="⭐">
-									<Emoji emoji="⭐" style="height: 1.7em" />
+									<MkEmoji emoji="⭐" style="height: 1.7em" />
 								</option>
 								<option value="👍">
-									<Emoji emoji="👍" style="height: 1.7em" />
+									<MkEmoji emoji="👍" style="height: 1.7em" />
 								</option>
 								<option value="❤️">
-									<Emoji emoji="❤️" style="height: 1.7em" />
+									<MkEmoji emoji="❤️" style="height: 1.7em" />
 								</option>
 								<option value="custom">
 									<FormInput
@@ -160,7 +159,7 @@
 										style="margin: 0 0 !important"
 									/>
 								</option>
-							</Radios>
+							</MkRadios>
 						</FormSection>
 
 						<FormSection>
@@ -385,21 +384,21 @@
 						</FormSection>
 					</div>
 				</FormSuspense>
-			</Spacer>
-		</StickyContainer>
+			</MkSpacer>
+		</MkStickyContainer>
 	</div>
 </template>
 
 <script lang="ts" setup>
 import { ref } from "vue";
-import FormSwitch from "@/components/form/Switch.vue";
-import FormInput from "@/components/form/Input.vue";
-import FormTextarea from "@/components/form/Textarea.vue";
-import FormInfo from "@/components/Info.vue";
-import FormSection from "@/components/form/Section.vue";
-import FormSplit from "@/components/form/Split.vue";
-import FormSuspense from "@/components/form/Suspense.vue";
-import Radios from "@/components/form/Radios.vue";
+import FormSwitch from "@/components/form/switch.vue";
+import FormInput from "@/components/form/input.vue";
+import FormTextarea from "@/components/form/textarea.vue";
+import FormInfo from "@/components/MkInfo.vue";
+import FormSection from "@/components/form/section.vue";
+import FormSplit from "@/components/form/split.vue";
+import FormSuspense from "@/components/form/suspense.vue";
+import MkRadios from "@/components/form/radios.vue";
 import * as os from "@/os";
 import { fetchInstance } from "@/instance";
 import { i18n } from "@/i18n";
diff --git a/packages/client/src/pages/admin/Users.vue b/packages/client/src/pages/admin/users.vue
similarity index 85%
rename from packages/client/src/pages/admin/Users.vue
rename to packages/client/src/pages/admin/users.vue
index 431e786b8..5ed0fb365 100644
--- a/packages/client/src/pages/admin/Users.vue
+++ b/packages/client/src/pages/admin/users.vue
@@ -1,18 +1,17 @@
 <template>
 	<div>
-		<StickyContainer>
-			<template #header>
-				<PageHeader
+		<MkStickyContainer>
+			<template #header
+				><MkPageHeader
 					:actions="headerActions"
 					:tabs="headerTabs"
 					:display-back-button="true"
-				/>
-			</template>
-			<Spacer :content-max="900">
+			/></template>
+			<MkSpacer :content-max="900">
 				<div class="lknzcolw">
 					<div class="users">
 						<div class="inputs">
-							<Select v-model="sort" style="flex: 1">
+							<MkSelect v-model="sort" style="flex: 1">
 								<template #label>{{ i18n.ts.sort }}</template>
 								<option value="-createdAt">
 									{{ i18n.ts.registeredDate }} ({{
@@ -34,8 +33,8 @@
 										i18n.ts.descendingOrder
 									}})
 								</option>
-							</Select>
-							<Select v-model="state" style="flex: 1">
+							</MkSelect>
+							<MkSelect v-model="state" style="flex: 1">
 								<template #label>{{ i18n.ts.state }}</template>
 								<option value="all">{{ i18n.ts.all }}</option>
 								<option value="available">
@@ -53,8 +52,8 @@
 								<option value="suspended">
 									{{ i18n.ts.suspend }}
 								</option>
-							</Select>
-							<Select v-model="origin" style="flex: 1">
+							</MkSelect>
+							<MkSelect v-model="origin" style="flex: 1">
 								<template #label>{{
 									i18n.ts.instance
 								}}</template>
@@ -67,10 +66,10 @@
 								<option value="remote">
 									{{ i18n.ts.remote }}
 								</option>
-							</Select>
+							</MkSelect>
 						</div>
 						<div class="inputs">
-							<Input
+							<MkInput
 								v-model="searchUsername"
 								style="flex: 1"
 								type="text"
@@ -81,8 +80,8 @@
 								<template #label>{{
 									i18n.ts.username
 								}}</template>
-							</Input>
-							<Input
+							</MkInput>
+							<MkInput
 								v-model="searchHost"
 								style="flex: 1"
 								type="text"
@@ -92,16 +91,16 @@
 							>
 								<template #prefix>@</template>
 								<template #label>{{ i18n.ts.host }}</template>
-							</Input>
+							</MkInput>
 						</div>
 
-						<Pagination
+						<MkPagination
 							v-slot="{ items }"
 							ref="paginationComponent"
 							:pagination="pagination"
 							class="users"
 						>
-							<A
+							<MkA
 								v-for="user in items"
 								:key="user.id"
 								v-tooltip.mfm="
@@ -112,28 +111,28 @@
 								class="user"
 								:to="`/user-info/${user.id}`"
 							>
-								<UserCardMini :user="user" />
-							</A>
-						</Pagination>
+								<MkUserCardMini :user="user" />
+							</MkA>
+						</MkPagination>
 					</div>
 				</div>
-			</Spacer>
-		</StickyContainer>
+			</MkSpacer>
+		</MkStickyContainer>
 	</div>
 </template>
 
 <script lang="ts" setup>
 import { computed } from "vue";
-import Input from "@/components/form/Input.vue";
-import Select from "@/components/form/Select.vue";
-import Pagination from "@/components/Pagination.vue";
+import MkInput from "@/components/form/input.vue";
+import MkSelect from "@/components/form/select.vue";
+import MkPagination from "@/components/MkPagination.vue";
 import * as os from "@/os";
 import { lookupUser } from "@/scripts/lookup-user";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
-import UserCardMini from "@/components/UserCardMini.vue";
+import MkUserCardMini from "@/components/MkUserCardMini.vue";
 
-let paginationComponent = $ref<InstanceType<typeof Pagination>>();
+let paginationComponent = $ref<InstanceType<typeof MkPagination>>();
 
 let sort = $ref("+createdAt");
 let state = $ref("all");
diff --git a/packages/client/src/pages/Announcements.vue b/packages/client/src/pages/announcements.vue
similarity index 77%
rename from packages/client/src/pages/Announcements.vue
rename to packages/client/src/pages/announcements.vue
index ac1c23615..cc62ce0f5 100644
--- a/packages/client/src/pages/Announcements.vue
+++ b/packages/client/src/pages/announcements.vue
@@ -1,10 +1,10 @@
 <template>
-	<StickyContainer>
-		<template #header>
-			<PageHeader :actions="headerActions" :tabs="headerTabs" />
-		</template>
-		<Spacer :content-max="800">
-			<Pagination
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
+		/></template>
+		<MkSpacer :content-max="800">
+			<MkPagination
 				v-slot="{ items }"
 				:pagination="pagination"
 				class="ruryvtyk _content"
@@ -17,10 +17,10 @@
 					<div class="_title">
 						<span v-if="$i && !announcement.isRead">🆕 </span>
 						<h3>{{ announcement.title }}</h3>
-						<Time :time="announcement.createdAt" />
+						<MkTime :time="announcement.createdAt" />
 						<div v-if="announcement.updatedAt">
 							{{ i18n.ts.updatedAt }}:
-							<Time :time="announcement.createdAt" />
+							<MkTime :time="announcement.createdAt" />
 						</div>
 					</div>
 					<div class="_content">
@@ -31,21 +31,21 @@
 						/>
 					</div>
 					<div v-if="$i && !announcement.isRead" class="_footer">
-						<Button primary @click="read(items, announcement, i)"
+						<MkButton primary @click="read(items, announcement, i)"
 							><i class="ph-check ph-bold ph-lg"></i>
-							{{ i18n.ts.gotIt }}</Button
+							{{ i18n.ts.gotIt }}</MkButton
 						>
 					</div>
 				</section>
-			</Pagination>
-		</Spacer>
-	</StickyContainer>
+			</MkPagination>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import {} from "vue";
-import Pagination from "@/components/Pagination.vue";
-import Button from "@/components/Button.vue";
+import MkPagination from "@/components/MkPagination.vue";
+import MkButton from "@/components/MkButton.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
diff --git a/packages/client/src/pages/AntennaTimeline.vue b/packages/client/src/pages/antenna-timeline.vue
similarity index 92%
rename from packages/client/src/pages/AntennaTimeline.vue
rename to packages/client/src/pages/antenna-timeline.vue
index 534f43c11..011e44ce6 100644
--- a/packages/client/src/pages/AntennaTimeline.vue
+++ b/packages/client/src/pages/antenna-timeline.vue
@@ -1,8 +1,8 @@
 <template>
-	<StickyContainer>
-		<template #header>
-			<PageHeader :actions="headerActions" :tabs="headerTabs" />
-		</template>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
+		/></template>
 		<div
 			ref="rootEl"
 			v-hotkey.global="keymap"
@@ -20,12 +20,12 @@
 				/>
 			</div>
 		</div>
-	</StickyContainer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { computed, inject, watch } from "vue";
-import XTimeline from "@/components/Timeline.vue";
+import XTimeline from "@/components/MkTimeline.vue";
 import * as os from "@/os";
 import { useRouter } from "@/router";
 import { definePageMetadata } from "@/scripts/page-metadata";
diff --git a/packages/client/src/pages/ApiConsole.vue b/packages/client/src/pages/api-console.vue
similarity index 74%
rename from packages/client/src/pages/ApiConsole.vue
rename to packages/client/src/pages/api-console.vue
index 0b36143c4..116dc38eb 100644
--- a/packages/client/src/pages/ApiConsole.vue
+++ b/packages/client/src/pages/api-console.vue
@@ -1,58 +1,56 @@
 <template>
-	<StickyContainer>
-		<template #header>
-			<PageHeader :actions="headerActions" :tabs="headerTabs" />
-		</template>
-		<Spacer :content-max="700">
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
+		/></template>
+		<MkSpacer :content-max="700">
 			<div class="_formRoot">
 				<div class="_formBlock">
-					<Input
+					<MkInput
 						v-model="endpoint"
 						:datalist="endpoints"
 						class="_formBlock"
 						@update:modelValue="onEndpointChange()"
 					>
 						<template #label>Endpoint</template>
-					</Input>
-					<Textarea v-model="body" class="_formBlock" code>
+					</MkInput>
+					<MkTextarea v-model="body" class="_formBlock" code>
 						<template #label>Params (JSON or JSON5)</template>
-					</Textarea>
-					<Switch v-model="withCredential" class="_formBlock">
+					</MkTextarea>
+					<MkSwitch v-model="withCredential" class="_formBlock">
 						With credential
-					</Switch>
-					<Button
+					</MkSwitch>
+					<MkButton
 						class="_formBlock"
 						primary
 						:disabled="sending"
 						@click="send"
 					>
-						<template v-if="sending">
-							<Ellipsis />
-						</template>
+						<template v-if="sending"><MkEllipsis /></template>
 						<template v-else
 							><i class="ph-paper-plane-tilt ph-bold ph-lg"></i>
 							Send</template
 						>
-					</Button>
+					</MkButton>
 				</div>
 				<div v-if="res" class="_formBlock">
-					<Textarea v-model="res" code readonly tall>
+					<MkTextarea v-model="res" code readonly tall>
 						<template #label>Response</template>
-					</Textarea>
+					</MkTextarea>
 				</div>
 			</div>
-		</Spacer>
-	</StickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { ref } from "vue";
 import JSON5 from "json5";
 import { Endpoints } from "iceshrimp-js";
-import Button from "@/components/Button.vue";
-import Input from "@/components/form/Input.vue";
-import Textarea from "@/components/form/Textarea.vue";
-import Switch from "@/components/form/Switch.vue";
+import MkButton from "@/components/MkButton.vue";
+import MkInput from "@/components/form/input.vue";
+import MkTextarea from "@/components/form/textarea.vue";
+import MkSwitch from "@/components/form/switch.vue";
 import * as os from "@/os";
 import { definePageMetadata } from "@/scripts/page-metadata";
 
diff --git a/packages/client/src/pages/AuthForm.vue b/packages/client/src/pages/auth.form.vue
similarity index 85%
rename from packages/client/src/pages/AuthForm.vue
rename to packages/client/src/pages/auth.form.vue
index fff53e7cc..189650f30 100644
--- a/packages/client/src/pages/AuthForm.vue
+++ b/packages/client/src/pages/auth.form.vue
@@ -17,15 +17,17 @@
 			</ul>
 		</div>
 		<div class="_footer">
-			<Button inline @click="cancel">{{ i18n.ts.cancel }}</Button>
-			<Button inline primary @click="accept">{{ i18n.ts.accept }}</Button>
+			<MkButton inline @click="cancel">{{ i18n.ts.cancel }}</MkButton>
+			<MkButton inline primary @click="accept">{{
+				i18n.ts.accept
+			}}</MkButton>
 		</div>
 	</section>
 </template>
 
 <script lang="ts" setup>
 import { defineComponent } from "vue";
-import Button from "@/components/Button.vue";
+import MkButton from "@/components/MkButton.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 
diff --git a/packages/client/src/pages/Auth.vue b/packages/client/src/pages/auth.vue
similarity index 83%
rename from packages/client/src/pages/Auth.vue
rename to packages/client/src/pages/auth.vue
index 50108bac2..26b1e2dfc 100644
--- a/packages/client/src/pages/Auth.vue
+++ b/packages/client/src/pages/auth.vue
@@ -1,6 +1,6 @@
 <template>
 	<div v-if="$i && fetching" class="">
-		<Loading />
+		<MkLoading />
 	</div>
 	<div v-else-if="$i">
 		<XForm
@@ -23,16 +23,15 @@
 				}}
 			</h1>
 			<p v-if="session.app.callbackUrl && !auth_code">
-				{{ i18n.ts._auth.callback }}
-				<Ellipsis />
+				{{ i18n.ts._auth.callback }}<MkEllipsis />
 			</p>
-			<KeyValue
+			<MkKeyValue
 				v-if="session.app.callbackUrl && auth_code"
 				:copy="auth_code"
 			>
 				<template #key>{{ i18n.ts._auth.copyAsk }}</template>
 				<template #value>{{ auth_code }}</template>
-			</KeyValue>
+			</MkKeyValue>
 			<p v-if="!session.app.callbackUrl">
 				{{ i18n.ts._auth.pleaseGoBack }}
 			</p>
@@ -42,15 +41,15 @@
 		</div>
 	</div>
 	<div v-else class="signin">
-		<Signin @login="onLogin" />
+		<MkSignin @login="onLogin" />
 	</div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import XForm from "./AuthForm.vue";
-import Signin from "@/components/Signin.vue";
-import KeyValue from "@/components/KeyValue.vue";
+import XForm from "./auth.form.vue";
+import MkSignin from "@/components/MkSignin.vue";
+import MkKeyValue from "@/components/MkKeyValue.vue";
 import * as os from "@/os";
 import { login } from "@/account";
 import { i18n } from "@/i18n";
@@ -58,8 +57,8 @@ import { i18n } from "@/i18n";
 export default defineComponent({
 	components: {
 		XForm,
-		Signin,
-		KeyValue,
+		MkSignin,
+		MkKeyValue,
 	},
 	props: ["token"],
 	data() {
@@ -107,30 +106,20 @@ export default defineComponent({
 					.split("&")
 					.reduce((result, query) => {
 						const [k, v] = query.split("=");
-						result[k] = decodeURI(v);
+						result[k] = decodeURIComponent(v);
 						return result;
 					}, {});
 			const isMastodon = !!getUrlParams().mastodon;
 			if (this.session.app.callbackUrl && isMastodon) {
 				const redirectUri = getUrlParams().redirect_uri;
-				if (
-					!this.session.app.callbackUrl
-						.split("\n")
-						.some((p) => p === redirectUri)
-				) {
+				if (!this.session.app.callbackUrl.split('\n').some(p => p === redirectUri)){
 					this.state = "fetch-session-error";
 					this.fetching = false;
 					console.log(`redirect uri: ${redirectUri}`);
-					console.log(
-						`reg_app uris: ${this.session.app.callbackUrl
-							.split("\n")
-							.join(",")}`,
-					);
-					throw new Error(
-						"callback uri doesn't match registered app",
-					);
+					console.log(`reg_app uris: ${this.session.app.callbackUrl.split('\n').join(',')}`);
+					throw new Error("callback uri doesn't match registered app");
 				}
-				const callbackUrl = new URL(redirectUri);
+				const callbackUrl = new URL(redirectUri)
 				callbackUrl.searchParams.append("code", this.session.token);
 				if (!!getUrlParams().state)
 					callbackUrl.searchParams.append(
diff --git a/packages/client/src/pages/ChannelEditor.vue b/packages/client/src/pages/channel-editor.vue
similarity index 75%
rename from packages/client/src/pages/ChannelEditor.vue
rename to packages/client/src/pages/channel-editor.vue
index adfab0956..203c69770 100644
--- a/packages/client/src/pages/ChannelEditor.vue
+++ b/packages/client/src/pages/channel-editor.vue
@@ -1,47 +1,49 @@
 <template>
-	<StickyContainer>
-		<template #header>
-			<PageHeader :actions="headerActions" :tabs="headerTabs" />
-		</template>
-		<Spacer :content-max="700">
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
+		/></template>
+		<MkSpacer :content-max="700">
 			<div class="_formRoot">
-				<Input v-model="name" class="_formBlock">
+				<MkInput v-model="name" class="_formBlock">
 					<template #label>{{ i18n.ts.name }}</template>
-				</Input>
+				</MkInput>
 
-				<Textarea v-model="description" class="_formBlock">
+				<MkTextarea v-model="description" class="_formBlock">
 					<template #label>{{ i18n.ts.description }}</template>
-				</Textarea>
+				</MkTextarea>
 
 				<div class="banner">
-					<Button v-if="bannerId == null" @click="setBannerImage"
+					<MkButton v-if="bannerId == null" @click="setBannerImage"
 						><i class="ph-plus ph-bold ph-lg"></i>
-						{{ i18n.ts._channel.setBanner }}</Button
+						{{ i18n.ts._channel.setBanner }}</MkButton
 					>
 					<div v-else-if="bannerUrl">
 						<img :src="bannerUrl" style="width: 100%" />
-						<Button @click="removeBannerImage()"
+						<MkButton @click="removeBannerImage()"
 							><i class="ph-trash ph-bold ph-lg"></i>
-							{{ i18n.ts._channel.removeBanner }}</Button
+							{{ i18n.ts._channel.removeBanner }}</MkButton
 						>
 					</div>
 				</div>
 				<div class="_formBlock">
-					<Button primary @click="save()"
+					<MkButton primary @click="save()"
 						><i class="ph-floppy-disk-back ph-bold ph-lg"></i>
-						{{ channelId ? i18n.ts.save : i18n.ts.create }}</Button
+						{{
+							channelId ? i18n.ts.save : i18n.ts.create
+						}}</MkButton
 					>
 				</div>
 			</div>
-		</Spacer>
-	</StickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { computed, inject, watch } from "vue";
-import Textarea from "@/components/form/Textarea.vue";
-import Button from "@/components/Button.vue";
-import Input from "@/components/form/Input.vue";
+import MkTextarea from "@/components/form/textarea.vue";
+import MkButton from "@/components/MkButton.vue";
+import MkInput from "@/components/form/input.vue";
 import { selectFile } from "@/scripts/select-file";
 import * as os from "@/os";
 import { useRouter } from "@/router";
diff --git a/packages/client/src/pages/Channel.vue b/packages/client/src/pages/channel.vue
similarity index 90%
rename from packages/client/src/pages/Channel.vue
rename to packages/client/src/pages/channel.vue
index 91edea8f5..d54c13d77 100644
--- a/packages/client/src/pages/Channel.vue
+++ b/packages/client/src/pages/channel.vue
@@ -1,13 +1,12 @@
 <template>
-	<StickyContainer>
-		<template #header>
-			<PageHeader
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
 				:actions="headerActions"
 				:tabs="headerTabs"
 				:display-back-button="true"
-			/>
-		</template>
-		<Spacer :content-max="700">
+		/></template>
+		<MkSpacer :content-max="700">
 			<div v-if="channel">
 				<div
 					class="wpgynlbz _panel _gap"
@@ -42,8 +41,8 @@
 							<div>
 								<i
 									class="ph-users ph-bold ph-lg ph-fw ph-lg"
-								></i>
-								<I18n
+								></i
+								><I18n
 									:src="i18n.ts._channel.usersCount"
 									tag="span"
 									style="margin-left: 4px"
@@ -57,8 +56,8 @@
 							<div>
 								<i
 									class="ph-pencil ph-bold ph-lg ph-fw ph-lg"
-								></i>
-								<I18n
+								></i
+								><I18n
 									:src="i18n.ts._channel.notesCount"
 									tag="span"
 									style="margin-left: 4px"
@@ -97,16 +96,16 @@
 					@after="after"
 				/>
 			</div>
-		</Spacer>
-	</StickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { computed, inject, watch } from "vue";
-import Container from "@/components/Container.vue";
-import XPostForm from "@/components/PostForm.vue";
-import XTimeline from "@/components/Timeline.vue";
-import XChannelFollowButton from "@/components/ChannelFollowButton.vue";
+import MkContainer from "@/components/MkContainer.vue";
+import XPostForm from "@/components/MkPostForm.vue";
+import XTimeline from "@/components/MkTimeline.vue";
+import XChannelFollowButton from "@/components/MkChannelFollowButton.vue";
 import * as os from "@/os";
 import { useRouter } from "@/router";
 import { $i } from "@/account";
@@ -144,7 +143,7 @@ const headerActions = $computed(() => [
 					text: i18n.ts.edit,
 					handler: edit,
 				},
-		  ]
+			]
 		: []),
 ]);
 
@@ -156,7 +155,7 @@ definePageMetadata(
 			? {
 					title: channel.name,
 					icon: "ph-television ph-bold ph-lg",
-			  }
+				}
 			: null,
 	),
 );
diff --git a/packages/client/src/pages/Channels.vue b/packages/client/src/pages/channels.vue
similarity index 80%
rename from packages/client/src/pages/Channels.vue
rename to packages/client/src/pages/channels.vue
index 454012dba..65f4dbf0c 100644
--- a/packages/client/src/pages/Channels.vue
+++ b/packages/client/src/pages/channels.vue
@@ -1,16 +1,15 @@
 <template>
-	<StickyContainer>
-		<template #header>
-			<PageHeader
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
 				v-model:tab="tab"
 				:actions="headerActions"
 				:tabs="headerTabs"
-			/>
-		</template>
-		<Spacer :content-max="700">
-			<Info class="_gap" :warn="true">{{
+		/></template>
+		<MkSpacer :content-max="700">
+			<MkInfo class="_gap" :warn="true">{{
 				i18n.ts.channelFederationWarn
-			}}</Info>
+			}}</MkInfo>
 			<swiper
 				:round-lengths="true"
 				:touch-angle="25"
@@ -29,7 +28,7 @@
 			>
 				<swiper-slide>
 					<div class="_content grwlizim search">
-						<Input
+						<MkInput
 							v-model="searchQuery"
 							:large="true"
 							:autofocus="true"
@@ -40,8 +39,8 @@
 									class="ph-magnifying-glass ph-bold ph-lg"
 								></i
 							></template>
-						</Input>
-						<Radios
+						</MkInput>
+						<MkRadios
 							v-model="searchType"
 							@update:model-value="search()"
 							class="_gap"
@@ -52,36 +51,36 @@
 							<option value="nameOnly">
 								{{ i18n.ts._channel.nameOnly }}
 							</option>
-						</Radios>
-						<Button large primary @click="search" class="_gap">{{
+						</MkRadios>
+						<MkButton large primary @click="search" class="_gap">{{
 							i18n.ts.search
-						}}</Button>
-						<FoldableSection v-if="channelPagination">
+						}}</MkButton>
+						<MkFoldableSection v-if="channelPagination">
 							<template #header>{{
 								i18n.ts.searchResult
 							}}</template>
-							<ChannelList
+							<MkChannelList
 								:key="key"
 								:pagination="channelPagination"
 							/>
-						</FoldableSection>
+						</MkFoldableSection>
 					</div>
 				</swiper-slide>
 				<swiper-slide>
 					<div class="_content grwlizim featured">
-						<!-- <Pagination
+						<!-- <MkPagination
 							v-slot="{ items }"
 							:pagination="featuredPagination"
 							:disable-auto-load="true"
 						>
-							<ChannelPreview
+							<MkChannelPreview
 								v-for="channel in items"
 								:key="channel.id"
 								class="_gap"
 								:channel="channel"
 							/>
-						</Pagination> -->
-						<ChannelList
+						</MkPagination> -->
+						<MkChannelList
 							key="featured"
 							:pagination="featuredPagination"
 						/>
@@ -89,7 +88,7 @@
 				</swiper-slide>
 				<swiper-slide>
 					<div class="_content grwlizim following">
-						<ChannelList
+						<MkChannelList
 							key="following"
 							:pagination="followingPagination"
 						/>
@@ -97,32 +96,32 @@
 				</swiper-slide>
 				<swiper-slide>
 					<div class="_content grwlizim owned">
-						<Button class="new" @click="create()"
+						<MkButton class="new" @click="create()"
 							><i class="ph-plus ph-bold ph-lg"></i
-						></Button>
-						<ChannelList
+						></MkButton>
+						<MkChannelList
 							key="owned"
 							:pagination="ownedPagination"
 						/>
 					</div>
 				</swiper-slide>
 			</swiper>
-		</Spacer>
-	</StickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { computed, onMounted, defineComponent, inject, watch } from "vue";
 import { Virtual } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/vue";
-import ChannelPreview from "@/components/ChannelPreview.vue";
-import ChannelList from "@/components/ChannelList.vue";
-import Pagination from "@/components/Pagination.vue";
-import Input from "@/components/form/Input.vue";
-import Radios from "@/components/form/Radios.vue";
-import Button from "@/components/Button.vue";
-import Folder from "@/components/Folder.vue";
-import Info from "@/components/Info.vue";
+import MkChannelPreview from "@/components/MkChannelPreview.vue";
+import MkChannelList from "@/components/MkChannelList.vue";
+import MkPagination from "@/components/MkPagination.vue";
+import MkInput from "@/components/form/input.vue";
+import MkRadios from "@/components/form/radios.vue";
+import MkButton from "@/components/MkButton.vue";
+import MkFolder from "@/components/MkFolder.vue";
+import MkInfo from "@/components/MkInfo.vue";
 import { useRouter } from "@/router";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import { deviceKind } from "@/scripts/device-kind";
diff --git a/packages/client/src/pages/Clip.vue b/packages/client/src/pages/clip.vue
similarity index 91%
rename from packages/client/src/pages/Clip.vue
rename to packages/client/src/pages/clip.vue
index 82094057a..42feecf1e 100644
--- a/packages/client/src/pages/Clip.vue
+++ b/packages/client/src/pages/clip.vue
@@ -1,9 +1,7 @@
 <template>
-	<StickyContainer>
-		<template #header>
-			<PageHeader :actions="headerActions" />
-		</template>
-		<Spacer :content-max="800">
+	<MkStickyContainer>
+		<template #header><MkPageHeader :actions="headerActions" /></template>
+		<MkSpacer :content-max="800">
 			<div v-if="clip">
 				<div class="okzinsic _panel">
 					<div v-if="clip.description" class="description">
@@ -14,25 +12,25 @@
 						/>
 					</div>
 					<div class="user">
-						<Avatar
+						<MkAvatar
 							:user="clip.user"
 							class="avatar"
 							:show-indicator="true"
 						/>
-						<UserName :user="clip.user" :nowrap="false" />
+						<MkUserName :user="clip.user" :nowrap="false" />
 					</div>
 				</div>
 
 				<XNotes :pagination="pagination" :detail="true" />
 			</div>
-		</Spacer>
-	</StickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { computed, watch, provide } from "vue";
 import type * as misskey from "iceshrimp-js";
-import XNotes from "@/components/Notes.vue";
+import XNotes from "@/components/MkNotes.vue";
 import { $i } from "@/account";
 import { i18n } from "@/i18n";
 import * as os from "@/os";
diff --git a/packages/client/src/pages/Drive.vue b/packages/client/src/pages/drive.vue
similarity index 91%
rename from packages/client/src/pages/Drive.vue
rename to packages/client/src/pages/drive.vue
index 13252a07d..2b4bf2d1f 100644
--- a/packages/client/src/pages/Drive.vue
+++ b/packages/client/src/pages/drive.vue
@@ -6,7 +6,7 @@
 
 <script lang="ts" setup>
 import { computed } from "vue";
-import XDrive from "@/components/Drive.vue";
+import XDrive from "@/components/MkDrive.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
diff --git a/packages/client/src/pages/EmojisEmoji.vue b/packages/client/src/pages/emojis.emoji.vue
similarity index 100%
rename from packages/client/src/pages/EmojisEmoji.vue
rename to packages/client/src/pages/emojis.emoji.vue
diff --git a/packages/client/src/pages/ExploreFeatured.vue b/packages/client/src/pages/explore.featured.vue
similarity index 79%
rename from packages/client/src/pages/ExploreFeatured.vue
rename to packages/client/src/pages/explore.featured.vue
index 60fc53c8c..2d21bfcb4 100644
--- a/packages/client/src/pages/ExploreFeatured.vue
+++ b/packages/client/src/pages/explore.featured.vue
@@ -1,20 +1,20 @@
 <template>
-	<Spacer :content-max="800">
-		<Tab v-model="tab" style="margin-bottom: var(--margin)">
+	<MkSpacer :content-max="800">
+		<MkTab v-model="tab" style="margin-bottom: var(--margin)">
 			<option value="local">{{ i18n.ts.local }}</option>
 			<option value="remote">{{ i18n.ts.remote }}</option>
-		</Tab>
+		</MkTab>
 		<XNotes v-if="tab === 'local'" :pagination="paginationForLocal" />
 		<XNotes
 			v-else-if="tab === 'remote'"
 			:pagination="paginationForRemote"
 		/>
-	</Spacer>
+	</MkSpacer>
 </template>
 
 <script lang="ts" setup>
-import XNotes from "@/components/Notes.vue";
-import Tab from "@/components/Tab.vue";
+import XNotes from "@/components/MkNotes.vue";
+import MkTab from "@/components/MkTab.vue";
 import { i18n } from "@/i18n";
 
 const paginationForLocal = {
diff --git a/packages/client/src/pages/ExploreUsers.vue b/packages/client/src/pages/explore.users.vue
similarity index 86%
rename from packages/client/src/pages/ExploreUsers.vue
rename to packages/client/src/pages/explore.users.vue
index e65d5ceb9..75fd21a83 100644
--- a/packages/client/src/pages/ExploreUsers.vue
+++ b/packages/client/src/pages/explore.users.vue
@@ -1,13 +1,13 @@
 4.8 KiB
 <template>
-	<Spacer :content-max="1200">
-		<Tab v-model="origin" style="margin-bottom: var(--margin)">
+	<MkSpacer :content-max="1200">
+		<MkTab v-model="origin" style="margin-bottom: var(--margin)">
 			<option value="local">{{ i18n.ts.local }}</option>
 			<option value="remote">{{ i18n.ts.remote }}</option>
-		</Tab>
+		</MkTab>
 		<div v-if="origin === 'local'">
 			<template v-if="tag == null">
-				<Folder class="_gap" persist-key="explore-pinned-users">
+				<MkFolder class="_gap" persist-key="explore-pinned-users">
 					<template #header
 						><i
 							class="ph-bookmark ph-bold ph-lg ph-fw"
@@ -16,8 +16,8 @@
 						>{{ i18n.ts.pinnedUsers }}</template
 					>
 					<XUserList :pagination="pinnedUsers" />
-				</Folder>
-				<Folder
+				</MkFolder>
+				<MkFolder
 					v-if="$i != null"
 					class="_gap"
 					persist-key="explore-popular-users"
@@ -30,8 +30,8 @@
 						>{{ i18n.ts.popularUsers }}</template
 					>
 					<XUserList :pagination="popularUsers" />
-				</Folder>
-				<Folder
+				</MkFolder>
+				<MkFolder
 					v-if="$i != null"
 					class="_gap"
 					persist-key="explore-recently-updated-users"
@@ -44,8 +44,8 @@
 						>{{ i18n.ts.recentlyUpdatedUsers }}</template
 					>
 					<XUserList :pagination="recentlyUpdatedUsers" />
-				</Folder>
-				<Folder
+				</MkFolder>
+				<MkFolder
 					v-if="$i != null"
 					class="_gap"
 					persist-key="explore-recently-registered-users"
@@ -58,11 +58,11 @@
 						>{{ i18n.ts.recentlyRegisteredUsers }}</template
 					>
 					<XUserList :pagination="recentlyRegisteredUsers" />
-				</Folder>
+				</MkFolder>
 			</template>
 		</div>
 		<div v-else>
-			<Folder
+			<MkFolder
 				ref="tagsEl"
 				:foldable="true"
 				:expanded="false"
@@ -77,23 +77,23 @@
 				>
 
 				<div class="vxjfqztj">
-					<A
+					<MkA
 						v-for="tag in tagsLocal"
 						:key="'local:' + tag.tag"
 						:to="`/tags/${tag.tag}`"
 						class="local"
-						>{{ tag.tag }}</A
+						>{{ tag.tag }}</MkA
 					>
-					<A
+					<MkA
 						v-for="tag in tagsRemote"
 						:key="'remote:' + tag.tag"
 						:to="`/tags/${tag.tag}`"
-						>{{ tag.tag }}</A
+						>{{ tag.tag }}</MkA
 					>
 				</div>
-			</Folder>
+			</MkFolder>
 
-			<Folder v-if="tag != null" :key="`${tag}`" class="_gap">
+			<MkFolder v-if="tag != null" :key="`${tag}`" class="_gap">
 				<template #header
 					><i
 						class="ph-hash ph-bold ph-lg ph-fw"
@@ -102,10 +102,10 @@
 					>{{ tag }}</template
 				>
 				<XUserList :pagination="tagUsers" />
-			</Folder>
+			</MkFolder>
 
 			<template v-if="tag == null && $i != null">
-				<Folder class="_gap">
+				<MkFolder class="_gap">
 					<template #header
 						><i
 							class="ph-chart-line-up ph-bold ph-lg ph-fw"
@@ -114,8 +114,8 @@
 						>{{ i18n.ts.popularUsers }}</template
 					>
 					<XUserList :pagination="popularUsersF" />
-				</Folder>
-				<Folder class="_gap">
+				</MkFolder>
+				<MkFolder class="_gap">
 					<template #header
 						><i
 							class="ph-activity ph-bold ph-lg ph-fw"
@@ -124,8 +124,8 @@
 						>{{ i18n.ts.recentlyUpdatedUsers }}</template
 					>
 					<XUserList :pagination="recentlyUpdatedUsersF" />
-				</Folder>
-				<Folder class="_gap">
+				</MkFolder>
+				<MkFolder class="_gap">
 					<template #header
 						><i
 							class="ph-rocke-launch ph-bold ph-lg ph-fw"
@@ -134,17 +134,17 @@
 						>{{ i18n.ts.recentlyDiscoveredUsers }}</template
 					>
 					<XUserList :pagination="recentlyRegisteredUsersF" />
-				</Folder>
+				</MkFolder>
 			</template>
 		</div>
-	</Spacer>
+	</MkSpacer>
 </template>
 
 <script lang="ts" setup>
 import { computed, watch } from "vue";
-import XUserList from "@/components/UserList.vue";
-import Folder from "@/components/Folder.vue";
-import Tab from "@/components/Tab.vue";
+import XUserList from "@/components/MkUserList.vue";
+import MkFolder from "@/components/MkFolder.vue";
+import MkTab from "@/components/MkTab.vue";
 import number from "@/filters/number";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
@@ -156,7 +156,7 @@ const props = defineProps<{
 }>();
 
 let origin = $ref("local");
-let tagsEl = $ref<InstanceType<typeof Folder>>();
+let tagsEl = $ref<InstanceType<typeof MkFolder>>();
 let tagsLocal = $ref([]);
 let tagsRemote = $ref([]);
 
diff --git a/packages/client/src/pages/Explore.vue b/packages/client/src/pages/explore.vue
similarity index 88%
rename from packages/client/src/pages/Explore.vue
rename to packages/client/src/pages/explore.vue
index d2fec81ba..304f6e24d 100644
--- a/packages/client/src/pages/Explore.vue
+++ b/packages/client/src/pages/explore.vue
@@ -1,14 +1,13 @@
 <template>
-	<StickyContainer>
-		<template #header>
-			<PageHeader
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
 				v-model:tab="tab"
 				:actions="headerActions"
 				:tabs="headerTabs"
-			/>
-		</template>
+		/></template>
 		<div class="lznhrdub">
-			<Spacer :content-max="1200">
+			<MkSpacer :content-max="1200">
 				<swiper
 					:round-lengths="true"
 					:touch-angle="25"
@@ -32,17 +31,17 @@
 						<XFeatured />
 					</swiper-slide>
 				</swiper>
-			</Spacer>
+			</MkSpacer>
 		</div>
-	</StickyContainer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { computed, watch, onMounted } from "vue";
 import { Virtual } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/vue";
-import XFeatured from "./ExploreFeatured.vue";
-import XUsers from "./ExploreUsers.vue";
+import XFeatured from "./explore.featured.vue";
+import XUsers from "./explore.users.vue";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import { deviceKind } from "@/scripts/device-kind";
 import { i18n } from "@/i18n";
diff --git a/packages/client/src/pages/Favorites.vue b/packages/client/src/pages/favorites.vue
similarity index 66%
rename from packages/client/src/pages/Favorites.vue
rename to packages/client/src/pages/favorites.vue
index 6b2d799bb..1b8e53e28 100644
--- a/packages/client/src/pages/Favorites.vue
+++ b/packages/client/src/pages/favorites.vue
@@ -1,10 +1,8 @@
 <template>
-	<StickyContainer>
-		<template #header>
-			<PageHeader />
-		</template>
-		<Spacer :content-max="800">
-			<Pagination ref="pagingComponent" :pagination="pagination">
+	<MkStickyContainer>
+		<template #header><MkPageHeader /></template>
+		<MkSpacer :content-max="800">
+			<MkPagination ref="pagingComponent" :pagination="pagination">
 				<template #empty>
 					<div class="_fullinfo">
 						<img
@@ -30,26 +28,26 @@
 						/>
 					</XList>
 				</template>
-			</Pagination>
-		</Spacer>
-	</StickyContainer>
+			</MkPagination>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { ref } from "vue";
-import Pagination from "@/components/Pagination.vue";
-import XNote from "@/components/Note.vue";
-import XList from "@/components/DateSeparatedList.vue";
+import MkPagination from "@/components/MkPagination.vue";
+import XNote from "@/components/MkNote.vue";
+import XList from "@/components/MkDateSeparatedList.vue";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
-import { instance } from "@/instance";
+import {instance} from "@/instance";
 
 const pagination = {
 	endpoint: "i/favorites" as const,
 	limit: 10,
 };
 
-const pagingComponent = ref<InstanceType<typeof Pagination>>();
+const pagingComponent = ref<InstanceType<typeof MkPagination>>();
 
 definePageMetadata({
 	title: i18n.ts.favorites,
diff --git a/packages/client/src/pages/FollowRequests.vue b/packages/client/src/pages/follow-requests.vue
similarity index 87%
rename from packages/client/src/pages/FollowRequests.vue
rename to packages/client/src/pages/follow-requests.vue
index 78e5cba2d..9ef1ba133 100644
--- a/packages/client/src/pages/FollowRequests.vue
+++ b/packages/client/src/pages/follow-requests.vue
@@ -1,10 +1,8 @@
 <template>
-	<StickyContainer>
-		<template #header>
-			<PageHeader />
-		</template>
-		<Spacer :content-max="800">
-			<Pagination ref="paginationComponent" :pagination="pagination">
+	<MkStickyContainer>
+		<template #header><MkPageHeader /></template>
+		<MkSpacer :content-max="800">
+			<MkPagination ref="paginationComponent" :pagination="pagination">
 				<template #empty>
 					<div class="_fullinfo">
 						<img
@@ -16,16 +14,16 @@
 					</div>
 				</template>
 				<template #default="{ items }">
-					<Info v-if="$i?.isLocked === false" warn class="info"
+					<MkInfo v-if="$i?.isLocked === false" warn class="info"
 						>{{ i18n.ts.silencedWarning }}
-					</Info>
+					</MkInfo>
 					<div class="mk-follow-requests">
 						<div
 							v-for="req in items"
 							:key="req.id"
 							class="user _panel"
 						>
-							<Avatar
+							<MkAvatar
 								class="avatar"
 								:user="req.follower"
 								:show-indicator="true"
@@ -33,13 +31,12 @@
 							/>
 							<div class="body">
 								<div class="name">
-									<A
+									<MkA
 										v-user-preview="req.follower.id"
 										class="name"
 										:to="userPage(req.follower)"
-									>
-										<UserName :user="req.follower" />
-									</A>
+										><MkUserName :user="req.follower"
+									/></MkA>
 									<p class="acct">
 										@{{ acct(req.follower) }}
 									</p>
@@ -79,22 +76,22 @@
 						</div>
 					</div>
 				</template>
-			</Pagination>
-		</Spacer>
-	</StickyContainer>
+			</MkPagination>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { ref, computed } from "vue";
-import Pagination from "@/components/Pagination.vue";
+import MkPagination from "@/components/MkPagination.vue";
 import { userPage, acct } from "@/filters/user";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import { $i } from "@/account";
-import { instance } from "@/instance";
+import {instance} from "@/instance";
 
-const paginationComponent = ref<InstanceType<typeof Pagination>>();
+const paginationComponent = ref<InstanceType<typeof MkPagination>>();
 
 const pagination = {
 	endpoint: "following/requests/list" as const,
diff --git a/packages/client/src/pages/Follow.vue b/packages/client/src/pages/follow.vue
similarity index 100%
rename from packages/client/src/pages/Follow.vue
rename to packages/client/src/pages/follow.vue
diff --git a/packages/client/src/pages/gallery/Edit.vue b/packages/client/src/pages/gallery/edit.vue
similarity index 85%
rename from packages/client/src/pages/gallery/Edit.vue
rename to packages/client/src/pages/gallery/edit.vue
index 0dc7e8978..f3b0627ba 100644
--- a/packages/client/src/pages/gallery/Edit.vue
+++ b/packages/client/src/pages/gallery/edit.vue
@@ -1,19 +1,15 @@
 <template>
-	<StickyContainer>
-		<template #header>
-			<PageHeader :actions="headerActions" :tabs="headerTabs" />
-		</template>
-		<Spacer :content-max="800" :margin-min="16" :margin-max="32">
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
+		/></template>
+		<MkSpacer :content-max="800" :margin-min="16" :margin-max="32">
 			<FormSuspense :p="init" class="_formRoot">
 				<FormInput v-model="title" class="_formBlock">
 					<template #label>{{ i18n.ts.title }}</template>
 				</FormInput>
 
-				<FormTextarea
-					v-model="description"
-					:max="500"
-					class="_formBlock"
-				>
+				<FormTextarea v-model="description" :max="500" class="_formBlock">
 					<template #label>{{ i18n.ts.description }}</template>
 				</FormTextarea>
 
@@ -48,11 +44,7 @@
 					i18n.ts.markAsSensitive
 				}}</FormSwitch>
 
-				<FormButton
-					v-if="postId"
-					primary
-					@click="save"
-					class="_formBlock"
+				<FormButton v-if="postId" primary @click="save" class="_formBlock"
 					><i class="ph-floppy-disk-back ph-bold ph-lg"></i>
 					{{ i18n.ts.save }}</FormButton
 				>
@@ -66,17 +58,17 @@
 					{{ i18n.ts.delete }}</FormButton
 				>
 			</FormSuspense>
-		</Spacer>
-	</StickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { computed, inject, watch } from "vue";
-import FormButton from "@/components/Button.vue";
-import FormInput from "@/components/form/Input.vue";
-import FormTextarea from "@/components/form/Textarea.vue";
-import FormSwitch from "@/components/form/Switch.vue";
-import FormSuspense from "@/components/form/Suspense.vue";
+import FormButton from "@/components/MkButton.vue";
+import FormInput from "@/components/form/input.vue";
+import FormTextarea from "@/components/form/textarea.vue";
+import FormSwitch from "@/components/form/switch.vue";
+import FormSuspense from "@/components/form/suspense.vue";
 import { selectFiles } from "@/scripts/select-file";
 import * as os from "@/os";
 import { useRouter } from "@/router";
diff --git a/packages/client/src/pages/gallery/Index.vue b/packages/client/src/pages/gallery/index.vue
similarity index 83%
rename from packages/client/src/pages/gallery/Index.vue
rename to packages/client/src/pages/gallery/index.vue
index 50664730c..45e7bd7ae 100644
--- a/packages/client/src/pages/gallery/Index.vue
+++ b/packages/client/src/pages/gallery/index.vue
@@ -1,14 +1,13 @@
 <template>
-	<StickyContainer>
-		<template #header>
-			<PageHeader
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
 				v-model:tab="tab"
 				:actions="headerActions"
 				:tabs="headerTabs"
 				:display-back-button="true"
-			/>
-		</template>
-		<Spacer :content-max="1200">
+		/></template>
+		<MkSpacer :content-max="1200">
 			<swiper
 				:round-lengths="true"
 				:touch-angle="25"
@@ -26,93 +25,93 @@
 				@slide-change="onSlideChange"
 			>
 				<swiper-slide>
-					<Folder class="_gap">
+					<MkFolder class="_gap">
 						<template #header
 							><i class="ph-clock ph-bold ph-lg"></i>
 							{{ i18n.ts.recentPosts }}</template
 						>
-						<Pagination
+						<MkPagination
 							v-slot="{ items }"
 							:pagination="recentPostsPagination"
 							:disable-auto-load="true"
 						>
 							<div class="vfpdbgtk">
-								<GalleryPostPreview
+								<MkGalleryPostPreview
 									v-for="post in items"
 									:key="post.id"
 									:post="post"
 									class="post"
 								/>
 							</div>
-						</Pagination>
-					</Folder>
-					<Folder class="_gap">
+						</MkPagination>
+					</MkFolder>
+					<MkFolder class="_gap">
 						<template #header
 							><i class="ph-fire-simple ph-bold ph-lg"></i>
 							{{ i18n.ts.popularPosts }}</template
 						>
-						<Pagination
+						<MkPagination
 							v-slot="{ items }"
 							:pagination="popularPostsPagination"
 							:disable-auto-load="true"
 						>
 							<div class="vfpdbgtk">
-								<GalleryPostPreview
+								<MkGalleryPostPreview
 									v-for="post in items"
 									:key="post.id"
 									:post="post"
 									class="post"
 								/>
 							</div>
-						</Pagination>
-					</Folder>
+						</MkPagination>
+					</MkFolder>
 				</swiper-slide>
 				<swiper-slide>
-					<Pagination
+					<MkPagination
 						v-slot="{ items }"
 						:pagination="likedPostsPagination"
 					>
 						<div class="vfpdbgtk">
-							<GalleryPostPreview
+							<MkGalleryPostPreview
 								v-for="like in items"
 								:key="like.id"
 								:post="like.post"
 								class="post"
 							/>
 						</div>
-					</Pagination>
+					</MkPagination>
 				</swiper-slide>
 				<swiper-slide>
-					<A to="/gallery/new" class="_link" style="margin: 16px"
+					<MkA to="/gallery/new" class="_link" style="margin: 16px"
 						><i class="ph-plus ph-bold ph-lg"></i>
-						{{ i18n.ts.postToGallery }}</A
+						{{ i18n.ts.postToGallery }}</MkA
 					>
-					<Pagination
+					<MkPagination
 						v-slot="{ items }"
 						:pagination="myPostsPagination"
 					>
 						<div class="vfpdbgtk">
-							<GalleryPostPreview
+							<MkGalleryPostPreview
 								v-for="mypost in items"
 								:key="mypost.id"
 								:post="mypost"
 								class="post"
 							/>
 						</div>
-					</Pagination>
+					</MkPagination>
 				</swiper-slide>
 			</swiper>
-		</Spacer>
-	</StickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { computed, defineComponent, watch, onMounted } from "vue";
 import { Virtual } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/vue";
-import Folder from "@/components/Folder.vue";
-import Pagination from "@/components/Pagination.vue";
-import GalleryPostPreview from "@/components/GalleryPostPreview.vue";
+import MkFolder from "@/components/MkFolder.vue";
+import MkPagination from "@/components/MkPagination.vue";
+import MkGalleryPostPreview from "@/components/MkGalleryPostPreview.vue";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import { deviceKind } from "@/scripts/device-kind";
 import { i18n } from "@/i18n";
diff --git a/packages/client/src/pages/gallery/Post.vue b/packages/client/src/pages/gallery/post.vue
similarity index 85%
rename from packages/client/src/pages/gallery/Post.vue
rename to packages/client/src/pages/gallery/post.vue
index 15239fe92..568d85f94 100644
--- a/packages/client/src/pages/gallery/Post.vue
+++ b/packages/client/src/pages/gallery/post.vue
@@ -1,9 +1,9 @@
 <template>
-	<StickyContainer>
-		<template #header>
-			<PageHeader :actions="headerActions" :tabs="headerTabs" />
-		</template>
-		<Spacer :content-max="1000" :margin-min="16" :margin-max="32">
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
+		/></template>
+		<MkSpacer :content-max="1000" :margin-min="16" :margin-max="32">
 			<div class="_root">
 				<transition
 					:name="$store.state.animation ? 'fade' : ''"
@@ -26,11 +26,11 @@
 							</div>
 							<div class="info">
 								<i class="ph-clock ph-bold ph-lg"></i>
-								<Time :time="post.createdAt" mode="detail" />
+								<MkTime :time="post.createdAt" mode="detail" />
 							</div>
 							<div class="actions">
 								<div class="like">
-									<Button
+									<MkButton
 										v-if="post.isLiked"
 										v-tooltip="i18n.ts._gallery.unlike"
 										class="button"
@@ -41,9 +41,9 @@
 											v-if="post.likedCount > 0"
 											class="count"
 											>{{ post.likedCount }}</span
-										></Button
+										></MkButton
 									>
-									<Button
+									<MkButton
 										v-else
 										v-tooltip="i18n.ts._gallery.like"
 										class="button"
@@ -53,7 +53,7 @@
 											v-if="post.likedCount > 0"
 											class="count"
 											>{{ post.likedCount }}</span
-										></Button
+										></MkButton
 									>
 								</div>
 								<div class="other">
@@ -92,15 +92,15 @@
 								</div>
 							</div>
 							<div class="user">
-								<Avatar :user="post.user" class="avatar" />
+								<MkAvatar :user="post.user" class="avatar" />
 								<div class="name">
-									<UserName
+									<MkUserName
 										:user="post.user"
 										style="display: block"
 									/>
-									<Acct :user="post.user" />
+									<MkAcct :user="post.user" />
 								</div>
-								<FollowButton
+								<MkFollowButton
 									v-if="!$i || $i.id != post.user.id"
 									:user="post.user"
 									:inline="true"
@@ -111,7 +111,7 @@
 								/>
 							</div>
 						</div>
-						<Container
+						<MkContainer
 							:max-height="300"
 							:foldable="true"
 							class="other"
@@ -120,38 +120,38 @@
 								><i class="ph-clock ph-bold ph-lg"></i>
 								{{ i18n.ts.recentPosts }}</template
 							>
-							<Pagination
+							<MkPagination
 								v-slot="{ items }"
 								:pagination="otherPostsPagination"
 							>
 								<div class="sdrarzaf">
-									<GalleryPostPreview
+									<MkGalleryPostPreview
 										v-for="post in items"
 										:key="post.id"
 										:post="post"
 										class="post"
 									/>
 								</div>
-							</Pagination>
-						</Container>
+							</MkPagination>
+						</MkContainer>
 					</div>
-					<Error v-else-if="error" @retry="fetch()" />
-					<Loading v-else />
+					<MkError v-else-if="error" @retry="fetch()" />
+					<MkLoading v-else />
 				</transition>
 			</div>
-		</Spacer>
-	</StickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { computed, defineComponent, inject, watch } from "vue";
-import Button from "@/components/Button.vue";
+import MkButton from "@/components/MkButton.vue";
 import * as os from "@/os";
-import Container from "@/components/Container.vue";
-import ImgWithBlurhash from "@/components/ImgWithBlurhash.vue";
-import Pagination from "@/components/Pagination.vue";
-import GalleryPostPreview from "@/components/GalleryPostPreview.vue";
-import FollowButton from "@/components/FollowButton.vue";
+import MkContainer from "@/components/MkContainer.vue";
+import ImgWithBlurhash from "@/components/MkImgWithBlurhash.vue";
+import MkPagination from "@/components/MkPagination.vue";
+import MkGalleryPostPreview from "@/components/MkGalleryPostPreview.vue";
+import MkFollowButton from "@/components/MkFollowButton.vue";
 import { url } from "@/config";
 import { useRouter } from "@/router";
 import { i18n } from "@/i18n";
@@ -241,7 +241,7 @@ definePageMetadata(
 			? {
 					title: post.title,
 					avatar: post.user,
-			  }
+				}
 			: null,
 	),
 );
@@ -252,7 +252,6 @@ definePageMetadata(
 .fade-leave-active {
 	transition: opacity 0.125s ease;
 }
-
 .fade-enter-from,
 .fade-leave-to {
 	opacity: 0;
diff --git a/packages/client/src/pages/InstanceInfo.vue b/packages/client/src/pages/instance-info.vue
similarity index 84%
rename from packages/client/src/pages/InstanceInfo.vue
rename to packages/client/src/pages/instance-info.vue
index 483140849..d83e601d6 100644
--- a/packages/client/src/pages/InstanceInfo.vue
+++ b/packages/client/src/pages/instance-info.vue
@@ -1,13 +1,12 @@
 <template>
-	<StickyContainer>
-		<template #header>
-			<PageHeader
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
 				v-model:tab="tab"
 				:actions="headerActions"
 				:tabs="headerTabs"
-			/>
-		</template>
-		<Spacer
+		/></template>
+		<MkSpacer
 			v-if="instance"
 			:content-max="600"
 			:margin-min="16"
@@ -37,17 +36,17 @@
 								instance.name || `(${i18n.ts.unknown})`
 							}}</span>
 						</div>
-						<KeyValue :copy="host" oneline style="margin: 1em 0">
+						<MkKeyValue :copy="host" oneline style="margin: 1em 0">
 							<template #key>Host</template>
 							<template #value
-								><span class="_monospace">
-									<Link :url="`https://${host}`">{{
+								><span class="_monospace"
+									><MkLink :url="`https://${host}`">{{
 										host
-									}}</Link>
-								</span></template
+									}}</MkLink></span
+								></template
 							>
-						</KeyValue>
-						<KeyValue oneline style="margin: 1em 0">
+						</MkKeyValue>
+						<MkKeyValue oneline style="margin: 1em 0">
 							<template #key>{{ i18n.ts.software }}</template>
 							<template #value
 								><span class="_monospace"
@@ -62,8 +61,8 @@
 									}}</span
 								></template
 							>
-						</KeyValue>
-						<KeyValue oneline style="margin: 1em 0">
+						</MkKeyValue>
+						<MkKeyValue oneline style="margin: 1em 0">
 							<template #key>{{
 								i18n.ts.administrator
 							}}</template>
@@ -77,13 +76,13 @@
 									`(${i18n.ts.unknown})`
 								}})</template
 							>
-						</KeyValue>
-						<KeyValue>
+						</MkKeyValue>
+						<MkKeyValue>
 							<template #key>{{ i18n.ts.description }}</template>
 							<template #value>{{
 								instance.description
 							}}</template>
-						</KeyValue>
+						</MkKeyValue>
 
 						<FormSection v-if="iAmAdmin">
 							<template #label>Moderation</template>
@@ -111,47 +110,47 @@
 									}}</FormSwitch
 								>
 							</FormSuspense>
-							<Button @click="refreshMetadata"
+							<MkButton @click="refreshMetadata"
 								><i
 									class="ph-arrows-clockwise ph-bold ph-lg"
 								></i>
-								Refresh metadata</Button
+								Refresh metadata</MkButton
 							>
 						</FormSection>
 
 						<FormSection>
-							<KeyValue oneline style="margin: 1em 0">
+							<MkKeyValue oneline style="margin: 1em 0">
 								<template #key>{{
 									i18n.ts.registeredAt
 								}}</template>
 								<template #value
-									><Time
+									><MkTime
 										mode="detail"
 										:time="instance.caughtAt"
 								/></template>
-							</KeyValue>
-							<KeyValue oneline style="margin: 1em 0">
+							</MkKeyValue>
+							<MkKeyValue oneline style="margin: 1em 0">
 								<template #key>{{
 									i18n.ts.updatedAt
 								}}</template>
 								<template #value
-									><Time
+									><MkTime
 										mode="detail"
 										:time="instance.infoUpdatedAt"
 								/></template>
-							</KeyValue>
-							<KeyValue oneline style="margin: 1em 0">
+							</MkKeyValue>
+							<MkKeyValue oneline style="margin: 1em 0">
 								<template #key>{{
 									i18n.ts.latestRequestSentAt
 								}}</template>
 								<template #value
-									><Time
+									><MkTime
 										v-if="instance.latestRequestSentAt"
 										:time="instance.latestRequestSentAt"
 									/><span v-else>N/A</span></template
 								>
-							</KeyValue>
-							<KeyValue oneline style="margin: 1em 0">
+							</MkKeyValue>
+							<MkKeyValue oneline style="margin: 1em 0">
 								<template #key>{{
 									i18n.ts.latestStatus
 								}}</template>
@@ -160,33 +159,33 @@
 										? instance.latestStatus
 										: "N/A"
 								}}</template>
-							</KeyValue>
-							<KeyValue oneline style="margin: 1em 0">
+							</MkKeyValue>
+							<MkKeyValue oneline style="margin: 1em 0">
 								<template #key>{{
 									i18n.ts.latestRequestReceivedAt
 								}}</template>
 								<template #value
-									><Time
+									><MkTime
 										v-if="instance.latestRequestReceivedAt"
 										:time="instance.latestRequestReceivedAt"
 									/><span v-else>N/A</span></template
 								>
-							</KeyValue>
+							</MkKeyValue>
 						</FormSection>
 
 						<FormSection>
-							<KeyValue oneline style="margin: 1em 0">
+							<MkKeyValue oneline style="margin: 1em 0">
 								<template #key>Following (Pub)</template>
 								<template #value>{{
 									number(instance.followingCount)
 								}}</template>
-							</KeyValue>
-							<KeyValue oneline style="margin: 1em 0">
+							</MkKeyValue>
+							<MkKeyValue oneline style="margin: 1em 0">
 								<template #key>Followers (Sub)</template>
 								<template #value>{{
 									number(instance.followersCount)
 								}}</template>
-							</KeyValue>
+							</MkKeyValue>
 						</FormSection>
 
 						<FormSection>
@@ -195,8 +194,7 @@
 								:to="`https://${host}/.well-known/host-meta`"
 								external
 								style="margin-bottom: 8px"
-							>
-								host-meta</FormLink
+								>host-meta</FormLink
 							>
 							<FormLink
 								:to="`https://${host}/.well-known/host-meta.json`"
@@ -208,21 +206,19 @@
 								:to="`https://${host}/.well-known/nodeinfo`"
 								external
 								style="margin-bottom: 8px"
-							>
-								nodeinfo</FormLink
+								>nodeinfo</FormLink
 							>
 							<FormLink
 								:to="`https://${host}/robots.txt`"
 								external
 								style="margin-bottom: 8px"
-								>robots.txt
-							</FormLink>
+								>robots.txt</FormLink
+							>
 							<FormLink
 								:to="`https://${host}/manifest.json`"
 								external
 								style="margin-bottom: 8px"
-							>
-								manifest.json</FormLink
+								>manifest.json</FormLink
 							>
 						</FormSection>
 					</div>
@@ -231,7 +227,7 @@
 					<div class="_formRoot">
 						<div class="cmhjzshl">
 							<div class="selects">
-								<Select
+								<MkSelect
 									v-model="chartSrc"
 									style="margin: 0 10px 0 0; flex: 1"
 								>
@@ -271,38 +267,38 @@
 									<option value="instance-drive-files-total">
 										{{ i18n.ts._instanceCharts.filesTotal }}
 									</option>
-								</Select>
+								</MkSelect>
 							</div>
 							<div class="charts">
 								<div class="label">
 									{{ i18n.t("recentNHours", { n: 90 }) }}
 								</div>
-								<Chart
+								<MkChart
 									class="chart"
 									:src="chartSrc"
 									span="hour"
 									:limit="90"
 									:args="{ host: host }"
 									:detailed="true"
-								></Chart>
+								></MkChart>
 								<div class="label">
 									{{ i18n.t("recentNDays", { n: 90 }) }}
 								</div>
-								<Chart
+								<MkChart
 									class="chart"
 									:src="chartSrc"
 									span="day"
 									:limit="90"
 									:args="{ host: host }"
 									:detailed="true"
-								></Chart>
+								></MkChart>
 							</div>
 						</div>
 					</div>
 				</swiper-slide>
 				<swiper-slide>
 					<div class="_formRoot">
-						<Pagination
+						<MkPagination
 							v-slot="{ items }"
 							:pagination="usersPagination"
 							style="
@@ -314,7 +310,7 @@
 								grid-gap: 12px;
 							"
 						>
-							<A
+							<MkA
 								v-for="user in items"
 								:key="user.id"
 								v-tooltip.mfm="
@@ -325,19 +321,19 @@
 								class="user"
 								:to="`/user-info/${user.id}`"
 							>
-								<UserCardMini :user="user" />
-							</A>
-						</Pagination>
+								<MkUserCardMini :user="user" />
+							</MkA>
+						</MkPagination>
 					</div>
 				</swiper-slide>
 				<swiper-slide>
 					<div class="_formRoot">
-						<ObjectView tall :value="instance"> </ObjectView>
+						<MkObjectView tall :value="instance"> </MkObjectView>
 					</div>
 				</swiper-slide>
 			</swiper>
-		</Spacer>
-	</StickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
@@ -345,15 +341,15 @@ import { watch } from "vue";
 import { Virtual } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/vue";
 import type * as iceshrimp from "iceshrimp-js";
-import Chart from "@/components/Chart.vue";
-import ObjectView from "@/components/ObjectView.vue";
-import FormLink from "@/components/form/Link.vue";
-import Link from "@/components/Link.vue";
-import Button from "@/components/Button.vue";
-import FormSection from "@/components/form/Section.vue";
-import KeyValue from "@/components/KeyValue.vue";
-import Select from "@/components/form/Select.vue";
-import FormSwitch from "@/components/form/Switch.vue";
+import MkChart from "@/components/MkChart.vue";
+import MkObjectView from "@/components/MkObjectView.vue";
+import FormLink from "@/components/form/link.vue";
+import MkLink from "@/components/MkLink.vue";
+import MkButton from "@/components/MkButton.vue";
+import FormSection from "@/components/form/section.vue";
+import MkKeyValue from "@/components/MkKeyValue.vue";
+import MkSelect from "@/components/form/select.vue";
+import FormSwitch from "@/components/form/switch.vue";
 import * as os from "@/os";
 import number from "@/filters/number";
 import { iAmAdmin } from "@/account";
@@ -361,8 +357,8 @@ import { definePageMetadata } from "@/scripts/page-metadata";
 import { deviceKind } from "@/scripts/device-kind";
 import { defaultStore } from "@/store";
 import { i18n } from "@/i18n";
-import UserCardMini from "@/components/UserCardMini.vue";
-import Pagination from "@/components/Pagination.vue";
+import MkUserCardMini from "@/components/MkUserCardMini.vue";
+import MkPagination from "@/components/MkPagination.vue";
 import "swiper/scss";
 import "swiper/scss/virtual";
 import { getProxiedImageUrlNullable } from "@/scripts/media-proxy";
diff --git a/packages/client/src/pages/messaging/Index.vue b/packages/client/src/pages/messaging/index.vue
similarity index 90%
rename from packages/client/src/pages/messaging/Index.vue
rename to packages/client/src/pages/messaging/index.vue
index 17c9de886..5659f2c05 100644
--- a/packages/client/src/pages/messaging/Index.vue
+++ b/packages/client/src/pages/messaging/index.vue
@@ -1,14 +1,13 @@
 <template>
-	<StickyContainer>
-		<template #header>
-			<PageHeader
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
 				v-model:tab="tab"
 				:actions="headerActions"
 				:tabs="headerTabs"
-			/>
-		</template>
+		/></template>
 		<div>
-			<Spacer :content-max="800">
+			<MkSpacer :content-max="800">
 				<swiper
 					:round-lengths="true"
 					:touch-angle="25"
@@ -27,31 +26,31 @@
 				>
 					<swiper-slide>
 						<div class="_content yweeujhr dms">
-							<Button
+							<MkButton
 								primary
 								class="start"
 								v-if="!isMobile"
 								@click="startUser"
 								><i class="ph-plus ph-bold ph-lg"></i>
-								{{ i18n.ts.startMessaging }}</Button
+								{{ i18n.ts.startMessaging }}</MkButton
 							>
-							<Pagination
+							<MkPagination
 								v-slot="{ items }"
 								:pagination="dmsPagination"
 							>
-								<ChatPreview
+								<MkChatPreview
 									v-for="message in items"
 									:key="message.id"
 									class="yweeujhr message _block"
 									:message="message"
 								/>
-							</Pagination>
+							</MkPagination>
 						</div>
 					</swiper-slide>
 					<swiper-slide>
 						<div class="_content yweeujhr groups">
 							<div v-if="!isMobile" class="groupsbuttons">
-								<Button
+								<MkButton
 									primary
 									class="start"
 									:link="true"
@@ -59,33 +58,33 @@
 									><i
 										class="ph-user-circle-gear ph-bold ph-lg"
 									></i>
-									{{ i18n.ts.manageGroups }}</Button
+									{{ i18n.ts.manageGroups }}</MkButton
 								>
-								<Button
+								<MkButton
 									primary
 									class="start"
 									@click="startGroup"
 									><i class="ph-plus ph-bold ph-lg"></i>
-									{{ i18n.ts.startMessaging }}</Button
+									{{ i18n.ts.startMessaging }}</MkButton
 								>
 							</div>
-							<Pagination
+							<MkPagination
 								v-slot="{ items }"
 								:pagination="groupsPagination"
 							>
-								<ChatPreview
+								<MkChatPreview
 									v-for="message in items"
 									:key="message.id"
 									class="yweeujhr message _block"
 									:message="message"
 								/>
-							</Pagination>
+							</MkPagination>
 						</div>
 					</swiper-slide>
 				</swiper>
-			</Spacer>
+			</MkSpacer>
 		</div>
-	</StickyContainer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
@@ -93,9 +92,9 @@ import { ref, markRaw, onMounted, onUnmounted, watch } from "vue";
 import * as Acct from "iceshrimp-js/built/acct";
 import { Virtual } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/vue";
-import Button from "@/components/Button.vue";
-import ChatPreview from "@/components/ChatPreview.vue";
-import Pagination from "@/components/Pagination.vue";
+import MkButton from "@/components/MkButton.vue";
+import MkChatPreview from "@/components/MkChatPreview.vue";
+import MkPagination from "@/components/MkPagination.vue";
 import * as os from "@/os";
 import { stream } from "@/stream";
 import { useRouter } from "@/router";
diff --git a/packages/client/src/pages/messaging/MessagingRoomForm.vue b/packages/client/src/pages/messaging/messaging-room.form.vue
similarity index 100%
rename from packages/client/src/pages/messaging/MessagingRoomForm.vue
rename to packages/client/src/pages/messaging/messaging-room.form.vue
diff --git a/packages/client/src/pages/messaging/MessagingRoomMessage.vue b/packages/client/src/pages/messaging/messaging-room.message.vue
similarity index 97%
rename from packages/client/src/pages/messaging/MessagingRoomMessage.vue
rename to packages/client/src/pages/messaging/messaging-room.message.vue
index af8f2c812..f3fb921e3 100644
--- a/packages/client/src/pages/messaging/MessagingRoomMessage.vue
+++ b/packages/client/src/pages/messaging/messaging-room.message.vue
@@ -1,6 +1,6 @@
 <template>
 	<div v-size="{ max: [400, 500] }" class="thvuemwp" :class="{ isMe }">
-		<Avatar
+		<MkAvatar
 			v-if="!isMe"
 			class="avatar"
 			:user="message.user"
@@ -54,7 +54,7 @@
 				</a>
 			</div>
 			<div></div>
-			<UrlPreview
+			<MkUrlPreview
 				v-for="url in urls"
 				:key="url"
 				:url="url"
@@ -72,7 +72,7 @@
 						i18n.ts.messageRead
 					}}</span>
 				</template>
-				<Time :time="message.createdAt" />
+				<MkTime :time="message.createdAt" />
 				<template v-if="message.is_edited"
 					><i class="ph-pencil ph-bold ph-lg"></i
 				></template>
@@ -85,9 +85,9 @@
 import {} from "vue";
 import * as mfm from "mfm-js";
 import type * as Misskey from "iceshrimp-js";
-import XMediaList from "@/components/MediaList.vue";
+import XMediaList from "@/components/MkMediaList.vue";
 import { extractUrlFromMfm } from "@/scripts/extract-url-from-mfm";
-import UrlPreview from "@/components/UrlPreview.vue";
+import MkUrlPreview from "@/components/MkUrlPreview.vue";
 import * as os from "@/os";
 import { $i } from "@/account";
 import { i18n } from "@/i18n";
diff --git a/packages/client/src/pages/messaging/MessagingRoom.vue b/packages/client/src/pages/messaging/messaging-room.vue
similarity index 94%
rename from packages/client/src/pages/messaging/MessagingRoom.vue
rename to packages/client/src/pages/messaging/messaging-room.vue
index e4647c0ff..a360863f2 100644
--- a/packages/client/src/pages/messaging/MessagingRoom.vue
+++ b/packages/client/src/pages/messaging/messaging-room.vue
@@ -6,9 +6,9 @@
 		@drop.prevent.stop="onDrop"
 	>
 		<div class="_content mk-messaging-room">
-			<Spacer :content-max="800">
+			<MkSpacer :content-max="800">
 				<div class="body">
-					<Pagination
+					<MkPagination
 						v-if="pagination"
 						ref="pagingComponent"
 						:key="userAcct || groupId"
@@ -46,7 +46,7 @@
 								/>
 							</XList>
 						</template>
-					</Pagination>
+					</MkPagination>
 				</div>
 				<footer>
 					<div
@@ -68,7 +68,7 @@
 								>
 							</template>
 						</I18n>
-						<Ellipsis />
+						<MkEllipsis />
 					</div>
 					<transition :name="animation ? 'fade' : ''">
 						<div v-show="showIndicator" class="new-message">
@@ -91,7 +91,7 @@
 						class="form"
 					/>
 				</footer>
-			</Spacer>
+			</MkSpacer>
 		</div>
 	</div>
 </template>
@@ -100,10 +100,10 @@
 import { computed, watch, onMounted, nextTick, onBeforeUnmount } from "vue";
 import * as Misskey from "iceshrimp-js";
 import * as Acct from "iceshrimp-js/built/acct";
-import XMessage from "./MessagingRoomMessage.vue";
-import XForm from "./MessagingRoomForm.vue";
-import XList from "@/components/DateSeparatedList.vue";
-import Pagination, { Paging } from "@/components/Pagination.vue";
+import XMessage from "./messaging-room.message.vue";
+import XForm from "./messaging-room.form.vue";
+import XList from "@/components/MkDateSeparatedList.vue";
+import MkPagination, { Paging } from "@/components/MkPagination.vue";
 import {
 	isBottomVisible,
 	onScrollBottom,
@@ -116,7 +116,7 @@ import { i18n } from "@/i18n";
 import { $i } from "@/account";
 import { defaultStore } from "@/store";
 import { definePageMetadata } from "@/scripts/page-metadata";
-import { instance } from "@/instance";
+import {instance} from "@/instance";
 
 const props = defineProps<{
 	userAcct?: string;
@@ -125,7 +125,7 @@ const props = defineProps<{
 
 let rootEl = $ref<HTMLDivElement>();
 let formEl = $ref<InstanceType<typeof XForm>>();
-let pagingComponent = $ref<InstanceType<typeof Pagination>>();
+let pagingComponent = $ref<InstanceType<typeof MkPagination>>();
 
 let fetching = $ref(true);
 let user: Misskey.entities.UserDetailed | null = $ref(null);
@@ -338,7 +338,7 @@ onMounted(() => {
 	fetch();
 	definePageMetadata(
 		computed(() => ({
-			title: group != null ? group.name : user?.name ?? "Chat",
+			title: group != null ? group.name : user?.name ?? 'Chat',
 			icon: "ph-chats-teardrop-bold ph-lg",
 		})),
 	);
diff --git a/packages/client/src/pages/MfmCheatsheet.vue b/packages/client/src/pages/mfm-cheat-sheet.vue
similarity index 80%
rename from packages/client/src/pages/MfmCheatsheet.vue
rename to packages/client/src/pages/mfm-cheat-sheet.vue
index 9cbb55c38..e870ecbdf 100644
--- a/packages/client/src/pages/MfmCheatsheet.vue
+++ b/packages/client/src/pages/mfm-cheat-sheet.vue
@@ -1,9 +1,7 @@
 <template>
-	<StickyContainer>
-		<template #header>
-			<PageHeader v-if="!popup" />
-		</template>
-		<Spacer :content-max="800">
+	<MkStickyContainer>
+		<template #header><MkPageHeader v-if="!popup" /></template>
+		<MkSpacer :content-max="800">
 			<div class="mfm-cheat-sheet">
 				<div>{{ i18n.ts._mfm.intro }}</div>
 				<br />
@@ -13,8 +11,8 @@
 						<p>{{ i18n.ts._mfm.mentionDescription }}</p>
 						<div class="preview">
 							<Mfm :text="preview_mention" />
-							<Textarea v-model="preview_mention"
-								><template #label>MFM</template></Textarea
+							<MkTextarea v-model="preview_mention"
+								><template #label>MFM</template></MkTextarea
 							>
 						</div>
 					</div>
@@ -25,8 +23,8 @@
 						<p>{{ i18n.ts._mfm.hashtagDescription }}</p>
 						<div class="preview">
 							<Mfm :text="preview_hashtag" />
-							<Textarea v-model="preview_hashtag"
-								><template #label>MFM</template></Textarea
+							<MkTextarea v-model="preview_hashtag"
+								><template #label>MFM</template></MkTextarea
 							>
 						</div>
 					</div>
@@ -37,8 +35,8 @@
 						<p>{{ i18n.ts._mfm.linkDescription }}</p>
 						<div class="preview">
 							<Mfm :text="preview_link" />
-							<Textarea v-model="preview_link"
-								><template #label>MFM</template></Textarea
+							<MkTextarea v-model="preview_link"
+								><template #label>MFM</template></MkTextarea
 							>
 						</div>
 					</div>
@@ -49,8 +47,8 @@
 						<p>{{ i18n.ts._mfm.emojiDescription }}</p>
 						<div class="preview">
 							<Mfm :text="preview_emoji" />
-							<Textarea v-model="preview_emoji"
-								><template #label>MFM</template></Textarea
+							<MkTextarea v-model="preview_emoji"
+								><template #label>MFM</template></MkTextarea
 							>
 						</div>
 					</div>
@@ -61,8 +59,8 @@
 						<p>{{ i18n.ts._mfm.boldDescription }}</p>
 						<div class="preview">
 							<Mfm :text="preview_bold" />
-							<Textarea v-model="preview_bold"
-								><template #label>MFM</template></Textarea
+							<MkTextarea v-model="preview_bold"
+								><template #label>MFM</template></MkTextarea
 							>
 						</div>
 					</div>
@@ -73,8 +71,8 @@
 						<p>{{ i18n.ts._mfm.smallDescription }}</p>
 						<div class="preview">
 							<Mfm :text="preview_small" />
-							<Textarea v-model="preview_small"
-								><template #label>MFM</template></Textarea
+							<MkTextarea v-model="preview_small"
+								><template #label>MFM</template></MkTextarea
 							>
 						</div>
 					</div>
@@ -85,8 +83,8 @@
 						<p>{{ i18n.ts._mfm.quoteDescription }}</p>
 						<div class="preview">
 							<Mfm :text="preview_quote" />
-							<Textarea v-model="preview_quote"
-								><template #label>MFM</template></Textarea
+							<MkTextarea v-model="preview_quote"
+								><template #label>MFM</template></MkTextarea
 							>
 						</div>
 					</div>
@@ -97,8 +95,8 @@
 						<p>{{ i18n.ts._mfm.centerDescription }}</p>
 						<div class="preview">
 							<Mfm :text="preview_center" />
-							<Textarea v-model="preview_center"
-								><template #label>MFM</template></Textarea
+							<MkTextarea v-model="preview_center"
+								><template #label>MFM</template></MkTextarea
 							>
 						</div>
 					</div>
@@ -109,8 +107,8 @@
 						<p>{{ i18n.ts._mfm.inlineCodeDescription }}</p>
 						<div class="preview">
 							<Mfm :text="preview_inlineCode" />
-							<Textarea v-model="preview_inlineCode"
-								><template #label>MFM</template></Textarea
+							<MkTextarea v-model="preview_inlineCode"
+								><template #label>MFM</template></MkTextarea
 							>
 						</div>
 					</div>
@@ -121,8 +119,8 @@
 						<p>{{ i18n.ts._mfm.blockCodeDescription }}</p>
 						<div class="preview">
 							<Mfm :text="preview_blockCode" />
-							<Textarea v-model="preview_blockCode"
-								><template #label>MFM</template></Textarea
+							<MkTextarea v-model="preview_blockCode"
+								><template #label>MFM</template></MkTextarea
 							>
 						</div>
 					</div>
@@ -133,8 +131,8 @@
 						<p>{{ i18n.ts._mfm.inlineMathDescription }}</p>
 						<div class="preview">
 							<Mfm :text="preview_inlineMath" />
-							<Textarea v-model="preview_inlineMath"
-								><template #label>MFM</template></Textarea
+							<MkTextarea v-model="preview_inlineMath"
+								><template #label>MFM</template></MkTextarea
 							>
 						</div>
 					</div>
@@ -145,8 +143,8 @@
 						<p>{{ i18n.ts._mfm.blockMathDescription }}</p>
 						<div class="preview">
 							<Mfm :text="preview_blockMath" />
-							<Textarea v-model="preview_blockMath"
-								><template #label>MFM</template></Textarea
+							<MkTextarea v-model="preview_blockMath"
+								><template #label>MFM</template></MkTextarea
 							>
 						</div>
 					</div>
@@ -158,7 +156,7 @@
 				<p>{{ i18n.ts._mfm.searchDescription }}</p>
 				<div class="preview">
 					<Mfm :text="preview_search"/>
-					<Textarea v-model="preview_search"><template #label>MFM</template></Textarea>
+					<MkTextarea v-model="preview_search"><template #label>MFM</template></MkTextarea>
 				</div>
 			</div>
 		</div>
@@ -169,8 +167,8 @@
 						<p>{{ i18n.ts._mfm.flipDescription }}</p>
 						<div class="preview">
 							<Mfm :text="preview_flip" />
-							<Textarea v-model="preview_flip"
-								><template #label>MFM</template></Textarea
+							<MkTextarea v-model="preview_flip"
+								><template #label>MFM</template></MkTextarea
 							>
 						</div>
 					</div>
@@ -181,8 +179,8 @@
 						<p>{{ i18n.ts._mfm.fontDescription }}</p>
 						<div class="preview">
 							<Mfm :text="preview_font" />
-							<Textarea v-model="preview_font"
-								><template #label>MFM</template></Textarea
+							<MkTextarea v-model="preview_font"
+								><template #label>MFM</template></MkTextarea
 							>
 						</div>
 					</div>
@@ -193,8 +191,8 @@
 						<p>{{ i18n.ts._mfm.x2Description }}</p>
 						<div class="preview">
 							<Mfm :text="preview_x2" />
-							<Textarea v-model="preview_x2"
-								><template #label>MFM</template></Textarea
+							<MkTextarea v-model="preview_x2"
+								><template #label>MFM</template></MkTextarea
 							>
 						</div>
 					</div>
@@ -205,8 +203,8 @@
 						<p>{{ i18n.ts._mfm.x3Description }}</p>
 						<div class="preview">
 							<Mfm :text="preview_x3" />
-							<Textarea v-model="preview_x3"
-								><template #label>MFM</template></Textarea
+							<MkTextarea v-model="preview_x3"
+								><template #label>MFM</template></MkTextarea
 							>
 						</div>
 					</div>
@@ -217,8 +215,8 @@
 						<p>{{ i18n.ts._mfm.x4Description }}</p>
 						<div class="preview">
 							<Mfm :text="preview_x4" />
-							<Textarea v-model="preview_x4"
-								><template #label>MFM</template></Textarea
+							<MkTextarea v-model="preview_x4"
+								><template #label>MFM</template></MkTextarea
 							>
 						</div>
 					</div>
@@ -229,8 +227,8 @@
 						<p>{{ i18n.ts._mfm.blurDescription }}</p>
 						<div class="preview">
 							<Mfm :text="preview_blur" />
-							<Textarea v-model="preview_blur"
-								><template #label>MFM</template></Textarea
+							<MkTextarea v-model="preview_blur"
+								><template #label>MFM</template></MkTextarea
 							>
 						</div>
 					</div>
@@ -241,8 +239,8 @@
 						<p>{{ i18n.ts._mfm.jellyDescription }}</p>
 						<div class="preview">
 							<Mfm :text="preview_jelly" />
-							<Textarea v-model="preview_jelly"
-								><template #label>MFM</template></Textarea
+							<MkTextarea v-model="preview_jelly"
+								><template #label>MFM</template></MkTextarea
 							>
 						</div>
 					</div>
@@ -253,8 +251,8 @@
 						<p>{{ i18n.ts._mfm.tadaDescription }}</p>
 						<div class="preview">
 							<Mfm :text="preview_tada" />
-							<Textarea v-model="preview_tada"
-								><template #label>MFM</template></Textarea
+							<MkTextarea v-model="preview_tada"
+								><template #label>MFM</template></MkTextarea
 							>
 						</div>
 					</div>
@@ -265,8 +263,8 @@
 						<p>{{ i18n.ts._mfm.jumpDescription }}</p>
 						<div class="preview">
 							<Mfm :text="preview_jump" />
-							<Textarea v-model="preview_jump"
-								><template #label>MFM</template></Textarea
+							<MkTextarea v-model="preview_jump"
+								><template #label>MFM</template></MkTextarea
 							>
 						</div>
 					</div>
@@ -277,8 +275,8 @@
 						<p>{{ i18n.ts._mfm.bounceDescription }}</p>
 						<div class="preview">
 							<Mfm :text="preview_bounce" />
-							<Textarea v-model="preview_bounce"
-								><template #label>MFM</template></Textarea
+							<MkTextarea v-model="preview_bounce"
+								><template #label>MFM</template></MkTextarea
 							>
 						</div>
 					</div>
@@ -289,8 +287,8 @@
 						<p>{{ i18n.ts._mfm.spinDescription }}</p>
 						<div class="preview">
 							<Mfm :text="preview_spin" />
-							<Textarea v-model="preview_spin"
-								><template #label>MFM</template></Textarea
+							<MkTextarea v-model="preview_spin"
+								><template #label>MFM</template></MkTextarea
 							>
 						</div>
 					</div>
@@ -301,8 +299,8 @@
 						<p>{{ i18n.ts._mfm.shakeDescription }}</p>
 						<div class="preview">
 							<Mfm :text="preview_shake" />
-							<Textarea v-model="preview_shake"
-								><template #label>MFM</template></Textarea
+							<MkTextarea v-model="preview_shake"
+								><template #label>MFM</template></MkTextarea
 							>
 						</div>
 					</div>
@@ -313,8 +311,8 @@
 						<p>{{ i18n.ts._mfm.twitchDescription }}</p>
 						<div class="preview">
 							<Mfm :text="preview_twitch" />
-							<Textarea v-model="preview_twitch"
-								><template #label>MFM</template></Textarea
+							<MkTextarea v-model="preview_twitch"
+								><template #label>MFM</template></MkTextarea
 							>
 						</div>
 					</div>
@@ -325,8 +323,8 @@
 						<p>{{ i18n.ts._mfm.rainbowDescription }}</p>
 						<div class="preview">
 							<Mfm :text="preview_rainbow" />
-							<Textarea v-model="preview_rainbow"
-								><template #label>MFM</template></Textarea
+							<MkTextarea v-model="preview_rainbow"
+								><template #label>MFM</template></MkTextarea
 							>
 						</div>
 					</div>
@@ -337,8 +335,8 @@
 						<p>{{ i18n.ts._mfm.sparkleDescription }}</p>
 						<div class="preview">
 							<Mfm :text="preview_sparkle" />
-							<Textarea v-model="preview_sparkle"
-								><span>MFM</span></Textarea
+							<MkTextarea v-model="preview_sparkle"
+								><span>MFM</span></MkTextarea
 							>
 						</div>
 					</div>
@@ -349,8 +347,8 @@
 						<p>{{ i18n.ts._mfm.rotateDescription }}</p>
 						<div class="preview">
 							<Mfm :text="preview_rotate" />
-							<Textarea v-model="preview_rotate"
-								><span>MFM</span></Textarea
+							<MkTextarea v-model="preview_rotate"
+								><span>MFM</span></MkTextarea
 							>
 						</div>
 					</div>
@@ -361,8 +359,8 @@
 						<p>{{ i18n.ts._mfm.fadeDescription }}</p>
 						<div class="preview">
 							<Mfm :text="preview_fade" />
-							<Textarea v-model="preview_fade"
-								><span>MFM</span></Textarea
+							<MkTextarea v-model="preview_fade"
+								><span>MFM</span></MkTextarea
 							>
 						</div>
 					</div>
@@ -373,8 +371,8 @@
 						<p>{{ i18n.ts._mfm.cropDescription }}</p>
 						<div class="preview">
 							<Mfm :text="preview_crop" />
-							<Textarea v-model="preview_crop"
-								><span>MFM</span></Textarea
+							<MkTextarea v-model="preview_crop"
+								><span>MFM</span></MkTextarea
 							>
 						</div>
 					</div>
@@ -385,8 +383,8 @@
 						<p>{{ i18n.ts._mfm.positionDescription }}</p>
 						<div class="preview">
 							<Mfm :text="preview_position" />
-							<Textarea v-model="preview_position"
-								><span>MFM</span></Textarea
+							<MkTextarea v-model="preview_position"
+								><span>MFM</span></MkTextarea
 							>
 						</div>
 					</div>
@@ -397,8 +395,8 @@
 						<p>{{ i18n.ts._mfm.scaleDescription }}</p>
 						<div class="preview">
 							<Mfm :text="preview_scale" />
-							<Textarea v-model="preview_scale"
-								><span>MFM</span></Textarea
+							<MkTextarea v-model="preview_scale"
+								><span>MFM</span></MkTextarea
 							>
 						</div>
 					</div>
@@ -409,8 +407,8 @@
 						<p>{{ i18n.ts._mfm.foregroundDescription }}</p>
 						<div class="preview">
 							<Mfm :text="preview_fg" />
-							<Textarea v-model="preview_fg"
-								><span>MFM</span></Textarea
+							<MkTextarea v-model="preview_fg"
+								><span>MFM</span></MkTextarea
 							>
 						</div>
 					</div>
@@ -421,8 +419,8 @@
 						<p>{{ i18n.ts._mfm.backgroundDescription }}</p>
 						<div class="preview">
 							<Mfm :text="preview_bg" />
-							<Textarea v-model="preview_bg"
-								><span>MFM</span></Textarea
+							<MkTextarea v-model="preview_bg"
+								><span>MFM</span></MkTextarea
 							>
 						</div>
 					</div>
@@ -433,20 +431,20 @@
 						<p>{{ i18n.ts._mfm.plainDescription }}</p>
 						<div class="preview">
 							<Mfm :text="preview_plain" />
-							<Textarea v-model="preview_plain"
-								><span>MFM</span></Textarea
+							<MkTextarea v-model="preview_plain"
+								><span>MFM</span></MkTextarea
 							>
 						</div>
 					</div>
 				</div>
 			</div>
-		</Spacer>
-	</StickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { defineComponent } from "vue";
-import Textarea from "@/components/form/Textarea.vue";
+import MkTextarea from "@/components/form/textarea.vue";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import { i18n } from "@/i18n";
 import { instance } from "@/instance";
diff --git a/packages/client/src/pages/MiAuth.vue b/packages/client/src/pages/miauth.vue
similarity index 88%
rename from packages/client/src/pages/MiAuth.vue
rename to packages/client/src/pages/miauth.vue
index 234df3cc8..7fedce007 100644
--- a/packages/client/src/pages/MiAuth.vue
+++ b/packages/client/src/pages/miauth.vue
@@ -1,9 +1,9 @@
 <template>
-	<Spacer :content-max="800">
+	<MkSpacer :content-max="800">
 		<div v-if="$i">
 			<div v-if="state == 'waiting'" class="waiting _section">
 				<div class="_content">
-					<Loading />
+					<MkLoading />
 				</div>
 			</div>
 			<div v-if="state == 'denied'" class="denied _section">
@@ -14,8 +14,7 @@
 			<div v-else-if="state == 'accepted'" class="accepted _section">
 				<div class="_content">
 					<p v-if="callback">
-						{{ i18n.ts._auth.callback }}
-						<Ellipsis />
+						{{ i18n.ts._auth.callback }}<MkEllipsis />
 					</p>
 					<p v-else>{{ i18n.ts._auth.pleaseGoBack }}</p>
 				</div>
@@ -63,23 +62,25 @@
 					</div>
 				</div>
 				<div class="_footer">
-					<Button inline @click="deny">{{ i18n.ts.cancel }}</Button>
-					<Button inline primary @click="accept">{{
+					<MkButton inline @click="deny">{{
+						i18n.ts.cancel
+					}}</MkButton>
+					<MkButton inline primary @click="accept">{{
 						i18n.ts.accept
-					}}</Button>
+					}}</MkButton>
 				</div>
 			</div>
 		</div>
 		<div v-else class="signin">
-			<Signin @login="onLogin" />
+			<MkSignin @login="onLogin" />
 		</div>
-	</Spacer>
+	</MkSpacer>
 </template>
 
 <script lang="ts" setup>
 import {} from "vue";
-import Signin from "@/components/Signin.vue";
-import Button from "@/components/Button.vue";
+import MkSignin from "@/components/MkSignin.vue";
+import MkButton from "@/components/MkButton.vue";
 import * as os from "@/os";
 import { $i, login } from "@/account";
 import { appendQuery, query } from "@/scripts/url";
diff --git a/packages/client/src/pages/my-antennas/Create.vue b/packages/client/src/pages/my-antennas/create.vue
similarity index 90%
rename from packages/client/src/pages/my-antennas/Create.vue
rename to packages/client/src/pages/my-antennas/create.vue
index a2eb8eac2..040a6b052 100644
--- a/packages/client/src/pages/my-antennas/Create.vue
+++ b/packages/client/src/pages/my-antennas/create.vue
@@ -1,13 +1,13 @@
 <template>
-	<Spacer :content-max="700">
+	<MkSpacer :content-max="700">
 		<div class="geegznzt">
 			<XAntenna :antenna="draft" @created="onAntennaCreated" />
 		</div>
-	</Spacer>
+	</MkSpacer>
 </template>
 
 <script lang="ts" setup>
-import XAntenna from "./Editor.vue";
+import XAntenna from "./editor.vue";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import { useRouter } from "@/router";
diff --git a/packages/client/src/pages/my-antennas/Edit.vue b/packages/client/src/pages/my-antennas/edit.vue
similarity index 96%
rename from packages/client/src/pages/my-antennas/Edit.vue
rename to packages/client/src/pages/my-antennas/edit.vue
index 77f1791c1..36254ff74 100644
--- a/packages/client/src/pages/my-antennas/Edit.vue
+++ b/packages/client/src/pages/my-antennas/edit.vue
@@ -10,7 +10,7 @@
 
 <script lang="ts" setup>
 import { inject, watch } from "vue";
-import XAntenna from "./Editor.vue";
+import XAntenna from "./editor.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { useRouter } from "@/router";
diff --git a/packages/client/src/pages/my-antennas/Editor.vue b/packages/client/src/pages/my-antennas/editor.vue
similarity index 83%
rename from packages/client/src/pages/my-antennas/Editor.vue
rename to packages/client/src/pages/my-antennas/editor.vue
index 19b44dc54..560794cb8 100644
--- a/packages/client/src/pages/my-antennas/Editor.vue
+++ b/packages/client/src/pages/my-antennas/editor.vue
@@ -1,10 +1,10 @@
 <template>
 	<div class="shaynizk">
 		<div class="form">
-			<Input v-model="name" class="_formBlock">
+			<MkInput v-model="name" class="_formBlock">
 				<template #label>{{ i18n.ts.name }}</template>
-			</Input>
-			<Select v-model="src" class="_formBlock">
+			</MkInput>
+			<MkSelect v-model="src" class="_formBlock">
 				<template #label>{{ i18n.ts.antennaSource }}</template>
 				<option value="all">{{ i18n.ts._antennaSources.all }}</option>
 				<!--<option value="home">{{ i18n.ts._antennaSources.homeTimeline }}</option>-->
@@ -16,8 +16,8 @@
 				<option value="instances">
 					{{ i18n.ts._antennaSources.instances }}
 				</option>
-			</Select>
-			<Select
+			</MkSelect>
+			<MkSelect
 				v-if="src === 'list'"
 				v-model="userListId"
 				class="_formBlock"
@@ -30,8 +30,8 @@
 				>
 					{{ list.name }}
 				</option>
-			</Select>
-			<Select
+			</MkSelect>
+			<MkSelect
 				v-else-if="src === 'group'"
 				v-model="userGroupId"
 				class="_formBlock"
@@ -44,8 +44,8 @@
 				>
 					{{ group.name }}
 				</option>
-			</Select>
-			<Textarea
+			</MkSelect>
+			<MkTextarea
 				v-else-if="src === 'users'"
 				v-model="users"
 				class="_formBlock"
@@ -57,8 +57,8 @@
 						{{ i18n.ts.addUser }}
 					</button></template
 				>
-			</Textarea>
-			<Textarea
+			</MkTextarea>
+			<MkTextarea
 				v-else-if="src === 'instances'"
 				v-model="instances"
 				class="_formBlock"
@@ -70,44 +70,44 @@
 						{{ i18n.ts.addInstance }}
 					</button></template
 				>
-			</Textarea>
-			<Switch v-model="withReplies" class="_formBlock">{{
+			</MkTextarea>
+			<MkSwitch v-model="withReplies" class="_formBlock">{{
 				i18n.ts.withReplies
-			}}</Switch>
-			<Textarea v-model="keywords" class="_formBlock">
+			}}</MkSwitch>
+			<MkTextarea v-model="keywords" class="_formBlock">
 				<template #label>{{ i18n.ts.antennaKeywords }}</template>
 				<template #caption>{{
 					i18n.ts.antennaKeywordsDescription
 				}}</template>
-			</Textarea>
-			<Textarea v-model="excludeKeywords" class="_formBlock">
+			</MkTextarea>
+			<MkTextarea v-model="excludeKeywords" class="_formBlock">
 				<template #label>{{ i18n.ts.antennaExcludeKeywords }}</template>
 				<template #caption>{{
 					i18n.ts.antennaKeywordsDescription
 				}}</template>
-			</Textarea>
-			<Switch v-model="caseSensitive" class="_formBlock">{{
+			</MkTextarea>
+			<MkSwitch v-model="caseSensitive" class="_formBlock">{{
 				i18n.ts.caseSensitive
-			}}</Switch>
-			<Switch v-model="withFile" class="_formBlock">{{
+			}}</MkSwitch>
+			<MkSwitch v-model="withFile" class="_formBlock">{{
 				i18n.ts.withFileAntenna
-			}}</Switch>
-			<Switch v-model="notify" class="_formBlock">{{
+			}}</MkSwitch>
+			<MkSwitch v-model="notify" class="_formBlock">{{
 				i18n.ts.notifyAntenna
-			}}</Switch>
+			}}</MkSwitch>
 		</div>
 		<div class="actions">
-			<Button inline primary @click="saveAntenna()"
+			<MkButton inline primary @click="saveAntenna()"
 				><i class="ph-floppy-disk-back ph-bold ph-lg"></i>
-				{{ i18n.ts.save }}</Button
+				{{ i18n.ts.save }}</MkButton
 			>
-			<Button
+			<MkButton
 				v-if="antenna.id != null"
 				inline
 				danger
 				@click="deleteAntenna()"
 				><i class="ph-trash ph-bold ph-lg"></i>
-				{{ i18n.ts.delete }}</Button
+				{{ i18n.ts.delete }}</MkButton
 			>
 		</div>
 	</div>
@@ -116,11 +116,11 @@
 <script lang="ts" setup>
 import { watch } from "vue";
 import * as Acct from "iceshrimp-js/built/acct";
-import Button from "@/components/Button.vue";
-import Input from "@/components/form/Input.vue";
-import Textarea from "@/components/form/Textarea.vue";
-import Select from "@/components/form/Select.vue";
-import Switch from "@/components/form/Switch.vue";
+import MkButton from "@/components/MkButton.vue";
+import MkInput from "@/components/form/input.vue";
+import MkTextarea from "@/components/form/textarea.vue";
+import MkSelect from "@/components/form/select.vue";
+import MkSwitch from "@/components/form/switch.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 
diff --git a/packages/client/src/pages/my-antennas/Index.vue b/packages/client/src/pages/my-antennas/index.vue
similarity index 80%
rename from packages/client/src/pages/my-antennas/Index.vue
rename to packages/client/src/pages/my-antennas/index.vue
index 80385277b..259c6db69 100644
--- a/packages/client/src/pages/my-antennas/Index.vue
+++ b/packages/client/src/pages/my-antennas/index.vue
@@ -1,30 +1,29 @@
 <template>
-	<StickyContainer>
-		<template #header>
-			<PageHeader
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
 				:actions="headerActions"
 				:tabs="headerTabs"
 				:display-back-button="true"
-			/>
-		</template>
-		<Spacer :content-max="700">
+		/></template>
+		<MkSpacer :content-max="700">
 			<div class="ieepwinx">
-				<Info class="_gap" :icon="'flying-saucer'" :card="true">
+				<MkInfo class="_gap" :icon="'flying-saucer'" :card="true">
 					<p>{{ i18n.ts.antennasDesc }}</p>
-					<Button
+					<MkButton
 						:link="true"
 						to="/my/antennas/create"
 						primary
 						class="add"
 						><i class="ph-plus ph-bold ph-lg"></i>
-						{{ i18n.ts.add }}</Button
+						{{ i18n.ts.add }}</MkButton
 					>
-				</Info>
+				</MkInfo>
 				<div class="">
-					<Pagination ref="list" :pagination="pagination">
+					<MkPagination ref="list" :pagination="pagination">
 						<template #default="{ items }">
 							<div v-for="antenna in items" :key="antenna.id">
-								<A
+								<MkA
 									class="uopelskx"
 									:link="true"
 									:to="`/timeline/antenna/${antenna.id}`"
@@ -39,27 +38,27 @@
 												: 'ph-check'
 										} ph-xs notify-icon`"
 									></i>
-								</A>
-								<A
+								</MkA>
+								<MkA
 									class="ljoevbzj"
 									:to="`/my/antennas/${antenna.id}`"
 								>
 									<div class="name">{{ antenna.name }}</div>
-								</A>
+								</MkA>
 							</div>
 						</template>
-					</Pagination>
+					</MkPagination>
 				</div>
 			</div>
-		</Spacer>
-	</StickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { onActivated, onDeactivated, ref } from "vue";
-import Pagination from "@/components/Pagination.vue";
-import Button from "@/components/Button.vue";
-import Info from "@/components/Info.vue";
+import MkPagination from "@/components/MkPagination.vue";
+import MkButton from "@/components/MkButton.vue";
+import MkInfo from "@/components/MkInfo.vue";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 
@@ -72,7 +71,7 @@ const headerActions = $computed(() => []);
 
 const headerTabs = $computed(() => []);
 
-const list = ref<typeof Pagination | null>(null);
+const list = ref<typeof MkPagination | null>(null);
 
 let isCached: boolean = false;
 let refreshTimer: number | null = null;
diff --git a/packages/client/src/pages/my-clips/Index.vue b/packages/client/src/pages/my-clips/index.vue
similarity index 79%
rename from packages/client/src/pages/my-clips/Index.vue
rename to packages/client/src/pages/my-clips/index.vue
index ab9490bf0..f88ee5a9b 100644
--- a/packages/client/src/pages/my-clips/Index.vue
+++ b/packages/client/src/pages/my-clips/index.vue
@@ -1,26 +1,25 @@
 <template>
-	<StickyContainer>
-		<template #header>
-			<PageHeader
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
 				:actions="headerActions"
 				:tabs="headerTabs"
 				:display-back-button="true"
-			/>
-		</template>
-		<Spacer :content-max="700">
+		/></template>
+		<MkSpacer :content-max="700">
 			<div class="qtcaoidl">
-				<Pagination
+				<MkPagination
 					ref="pagingComponent"
 					:pagination="pagination"
 					class="list"
 				>
 					<template #empty>
-						<Info :icon="'paperclip'" :card="true">
+						<MkInfo :icon="'paperclip'" :card="true">
 							<p>{{ i18n.ts.clipsDesc }}</p>
-						</Info>
+						</MkInfo>
 					</template>
 					<template #default="{ items }">
-						<A
+						<MkA
 							v-for="item in items"
 							:key="item.id"
 							:to="`/clips/${item.id}`"
@@ -30,19 +29,19 @@
 							<div v-if="item.description" class="description">
 								{{ item.description }}
 							</div>
-						</A>
+						</MkA>
 					</template>
-				</Pagination>
+				</MkPagination>
 			</div>
-		</Spacer>
-	</StickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import {} from "vue";
-import Pagination from "@/components/Pagination.vue";
-import Button from "@/components/Button.vue";
-import Info from "@/components/Info.vue";
+import MkPagination from "@/components/MkPagination.vue";
+import MkButton from "@/components/MkButton.vue";
+import MkInfo from "@/components/MkInfo.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
@@ -52,7 +51,7 @@ const pagination = {
 	limit: 10,
 };
 
-const pagingComponent = $ref<InstanceType<typeof Pagination>>();
+const pagingComponent = $ref<InstanceType<typeof MkPagination>>();
 
 async function create() {
 	const { canceled, result } = await os.form(i18n.ts.createNewClip, {
diff --git a/packages/client/src/pages/my-groups/Group.vue b/packages/client/src/pages/my-groups/group.vue
similarity index 93%
rename from packages/client/src/pages/my-groups/Group.vue
rename to packages/client/src/pages/my-groups/group.vue
index 19e24b97b..d77751e8d 100644
--- a/packages/client/src/pages/my-groups/Group.vue
+++ b/packages/client/src/pages/my-groups/group.vue
@@ -1,8 +1,6 @@
 <template>
-	<StickyContainer>
-		<template #header>
-			<PageHeader :actions="headerActions" />
-		</template>
+	<MkStickyContainer>
+		<template #header><MkPageHeader :actions="headerActions" /></template>
 		<div class="mk-group-page">
 			<div class="_section members _gap">
 				<div class="_content">
@@ -12,14 +10,14 @@
 							:key="user.id"
 							class="user _panel"
 						>
-							<Avatar
+							<MkAvatar
 								:user="user"
 								class="avatar"
 								:show-indicator="true"
 							/>
 							<div class="body">
-								<UserName :user="user" class="name" />
-								<Acct :user="user" class="acct" />
+								<MkUserName :user="user" class="name" />
+								<MkAcct :user="user" class="acct" />
 							</div>
 							<div class="action">
 								<button
@@ -35,7 +33,7 @@
 				</div>
 			</div>
 		</div>
-	</StickyContainer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
@@ -173,7 +171,6 @@ const headerActions = $computed(() => [
 				> ._panel {
 					margin: 1rem 2rem;
 				}
-
 				> .user {
 					display: flex;
 					align-items: center;
diff --git a/packages/client/src/pages/my-groups/Index.vue b/packages/client/src/pages/my-groups/index.vue
similarity index 73%
rename from packages/client/src/pages/my-groups/Index.vue
rename to packages/client/src/pages/my-groups/index.vue
index 66cd98e77..d4cc6ab71 100644
--- a/packages/client/src/pages/my-groups/Index.vue
+++ b/packages/client/src/pages/my-groups/index.vue
@@ -1,33 +1,33 @@
 <template>
-	<StickyContainer>
-		<template #header>
-			<PageHeader :actions="headerActions" :display-back-button="true" />
-		</template>
-		<Spacer :content-max="800" :margin-min="20">
-			<Button
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader :actions="headerActions" :display-back-button="true"
+		/></template>
+		<MkSpacer :content-max="800" :margin-min="20">
+			<MkButton
 				primary
 				style="margin: 0 auto var(--margin) auto"
 				@click="create"
 				><i class="ph-plus ph-bold ph-lg"></i>
-				{{ i18n.ts.createGroup }}</Button
+				{{ i18n.ts.createGroup }}</MkButton
 			>
-			<Pagination
+			<MkPagination
 				v-slot="{ items }"
 				ref="owned"
 				:pagination="ownedPagination"
 			>
 				<div v-for="group in items" :key="group.id" class="_card">
 					<div class="_title">
-						<A :to="`/my/groups/${group.id}`" class="_link">{{
+						<MkA :to="`/my/groups/${group.id}`" class="_link">{{
 							group.name
-						}}</A>
+						}}</MkA>
 					</div>
 					<div class="_content">
-						<Avatars :user-ids="group.userIds" />
+						<MkAvatars :user-ids="group.userIds" />
 					</div>
 				</div>
-			</Pagination>
-			<Pagination
+			</MkPagination>
+			<MkPagination
 				v-slot="{ items }"
 				ref="joined"
 				:pagination="joinedPagination"
@@ -35,28 +35,28 @@
 				<div v-for="group in items" :key="group.id" class="_card">
 					<div class="_title">{{ group.name }}</div>
 					<div class="_content">
-						<Avatars :user-ids="group.userIds" />
+						<MkAvatars :user-ids="group.userIds" />
 					</div>
 					<div class="_footer">
-						<Button danger @click="leave(group)">{{
+						<MkButton danger @click="leave(group)">{{
 							i18n.ts.leaveGroup
-						}}</Button>
+						}}</MkButton>
 					</div>
 				</div>
-			</Pagination>
-		</Spacer>
-	</StickyContainer>
+			</MkPagination>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { computed, ref } from "vue";
-import Pagination from "@/components/Pagination.vue";
-import Button from "@/components/Button.vue";
-import Avatars from "@/components/Avatars.vue";
+import MkPagination from "@/components/MkPagination.vue";
+import MkButton from "@/components/MkButton.vue";
+import MkAvatars from "@/components/MkAvatars.vue";
 import * as os from "@/os";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import { i18n } from "@/i18n";
-import StickyContainer from "@/components/global/StickyContainer.vue";
+import MkStickyContainer from "@/components/global/MkStickyContainer.vue";
 
 const owned = ref("owned");
 const joined = ref("joined");
@@ -117,12 +117,10 @@ async function leave(group) {
 
 ._card {
 	margin-bottom: 1rem;
-
 	._title {
 		font-size: 1.2rem;
 		font-weight: bold;
 	}
-
 	._content {
 		padding: 20px;
 
@@ -130,7 +128,6 @@ async function leave(group) {
 			padding: 0;
 		}
 	}
-
 	._footer {
 		display: flex;
 		justify-content: flex-end;
diff --git a/packages/client/src/pages/my-lists/Index.vue b/packages/client/src/pages/my-lists/index.vue
similarity index 70%
rename from packages/client/src/pages/my-lists/Index.vue
rename to packages/client/src/pages/my-lists/index.vue
index dd6025a31..cb3a74f57 100644
--- a/packages/client/src/pages/my-lists/Index.vue
+++ b/packages/client/src/pages/my-lists/index.vue
@@ -1,58 +1,57 @@
 <template>
-	<StickyContainer>
-		<template #header>
-			<PageHeader
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
 				:actions="headerActions"
 				:tabs="headerTabs"
 				:display-back-button="true"
-			/>
-		</template>
-		<Spacer :content-max="700">
+		/></template>
+		<MkSpacer :content-max="700">
 			<div class="qkcjvfiv">
-				<Info class="_gap" :icon="'list-bullets'" :card="true">
+				<MkInfo class="_gap" :icon="'list-bullets'" :card="true">
 					<p>{{ i18n.ts.listsDesc }}</p>
-					<Button primary class="add" @click="create"
+					<MkButton primary class="add" @click="create"
 						><i class="ph-plus ph-bold ph-lg"></i>
-						{{ i18n.ts.createList }}</Button
+						{{ i18n.ts.createList }}</MkButton
 					>
-				</Info>
+				</MkInfo>
 
-				<Pagination
+				<MkPagination
 					v-slot="{ items }"
 					ref="pagingComponent"
 					:pagination="pagination"
 					class="lists _content"
 				>
-					<A
+					<MkA
 						v-for="list in items"
 						:key="list.id"
 						class="list _panel"
 						:to="`/my/lists/${list.id}`"
 					>
 						<div class="name">{{ list.name }}</div>
-						<Avatars :user-ids="list.userIds" />
-					</A>
-					<Button @click="deleteAll"
+						<MkAvatars :user-ids="list.userIds" />
+					</MkA>
+					<MkButton @click="deleteAll"
 						><i class="ph-trash ph-bold ph-lg"></i>
-						{{ i18n.ts.deleteAll }}</Button
+						{{ i18n.ts.deleteAll }}</MkButton
 					>
-				</Pagination>
+				</MkPagination>
 			</div>
-		</Spacer>
-	</StickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import {} from "vue";
-import Pagination from "@/components/Pagination.vue";
-import Button from "@/components/Button.vue";
-import Avatars from "@/components/Avatars.vue";
-import Info from "@/components/Info.vue";
+import MkPagination from "@/components/MkPagination.vue";
+import MkButton from "@/components/MkButton.vue";
+import MkAvatars from "@/components/MkAvatars.vue";
+import MkInfo from "@/components/MkInfo.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 
-const pagingComponent = $ref<InstanceType<typeof Pagination>>();
+const pagingComponent = $ref<InstanceType<typeof MkPagination>>();
 
 const pagination = {
 	endpoint: "users/lists/list" as const,
diff --git a/packages/client/src/pages/my-lists/List.vue b/packages/client/src/pages/my-lists/list.vue
similarity index 84%
rename from packages/client/src/pages/my-lists/List.vue
rename to packages/client/src/pages/my-lists/list.vue
index 70a78372f..14223ffee 100644
--- a/packages/client/src/pages/my-lists/List.vue
+++ b/packages/client/src/pages/my-lists/list.vue
@@ -1,9 +1,9 @@
 <template>
-	<StickyContainer>
-		<template #header>
-			<PageHeader :actions="headerActions" :tabs="headerTabs" />
-		</template>
-		<Spacer :content-max="700">
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
+		/></template>
+		<MkSpacer :content-max="700">
 			<div class="mk-list-page">
 				<transition
 					:name="$store.state.animation ? 'zoom' : ''"
@@ -11,15 +11,15 @@
 				>
 					<div v-if="list" class="_section">
 						<div class="_content">
-							<Button inline @click="addUser()">{{
+							<MkButton inline @click="addUser()">{{
 								i18n.ts.addUser
-							}}</Button>
-							<Button inline @click="renameList()">{{
+							}}</MkButton>
+							<MkButton inline @click="renameList()">{{
 								i18n.ts.rename
-							}}</Button>
-							<Button inline @click="deleteList()">{{
+							}}</MkButton>
+							<MkButton inline @click="deleteList()">{{
 								i18n.ts.delete
-							}}</Button>
+							}}</MkButton>
 							<FormSection>
 								<FormSwitch v-model="hideFromHomeTl">{{
 									i18n.ts.hideFromHome
@@ -42,14 +42,14 @@
 									:key="user.id"
 									class="user _panel"
 								>
-									<Avatar
+									<MkAvatar
 										:user="user"
 										class="avatar"
 										:show-indicator="true"
 									/>
 									<div class="body">
-										<UserName :user="user" class="name" />
-										<Acct :user="user" class="acct" />
+										<MkUserName :user="user" class="name" />
+										<MkAcct :user="user" class="acct" />
 									</div>
 									<div class="action">
 										<button
@@ -66,26 +66,26 @@
 					</div>
 				</transition>
 			</div>
-		</Spacer>
-	</StickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { computed, watch } from "vue";
-import Button from "@/components/Button.vue";
+import MkButton from "@/components/MkButton.vue";
 import * as os from "@/os";
 import { mainRouter } from "@/router";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import { i18n } from "@/i18n";
-import FormSwitch from "@/components/form/Switch.vue";
-import FormSection from "@/components/form/Section.vue";
+import FormSwitch from "@/components/form/switch.vue";
+import FormSection from "@/components/form/section.vue";
 
 const props = defineProps<{
 	listId: string;
 }>();
 
 let list = $ref(null);
-let hideFromHomeTl = $ref(false); 
+let hideFromHomeTl = $ref(false);
 let users = $ref([]);
 
 function fetchList() {
diff --git a/packages/client/src/pages/NoGraze.vue b/packages/client/src/pages/no-graze.vue
similarity index 81%
rename from packages/client/src/pages/NoGraze.vue
rename to packages/client/src/pages/no-graze.vue
index 749a2bb3a..8b4617cfc 100644
--- a/packages/client/src/pages/NoGraze.vue
+++ b/packages/client/src/pages/no-graze.vue
@@ -1,7 +1,11 @@
 <template>
 	<transition :name="$store.state.animation ? 'zoom' : ''" appear>
 		<div :class="$style.root">
-			<img :src="instance.images.info" class="_ghost" alt="Error" />
+			<img
+				:src="instance.images.info"
+				class="_ghost"
+				alt="Error"
+			/>
 			<p>
 				<i class="ph-warning ph-bold ph-lg"></i>
 				{{ i18n.ts.noGraze }}
@@ -12,7 +16,7 @@
 
 <script lang="ts" setup>
 import { i18n } from "@/i18n";
-import { instance } from "@/instance";
+import {instance} from "@/instance";
 </script>
 
 <style lang="scss" module>
diff --git a/packages/client/src/pages/NotFound.vue b/packages/client/src/pages/not-found.vue
similarity index 100%
rename from packages/client/src/pages/NotFound.vue
rename to packages/client/src/pages/not-found.vue
diff --git a/packages/client/src/pages/Note.vue b/packages/client/src/pages/note.vue
similarity index 81%
rename from packages/client/src/pages/Note.vue
rename to packages/client/src/pages/note.vue
index 96bb78fff..6e46df45b 100644
--- a/packages/client/src/pages/Note.vue
+++ b/packages/client/src/pages/note.vue
@@ -1,14 +1,13 @@
 <template>
-	<StickyContainer>
-		<template #header>
-			<PageHeader
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
 				:actions="headerActions"
 				:tabs="headerTabs"
 				:display-back-button="true"
 				:to="`#${noteId}`"
-			/>
-		</template>
-		<Spacer :content-max="800" :marginMin="6">
+		/></template>
+		<MkSpacer :content-max="800" :marginMin="6">
 			<div class="fcuexfpr">
 				<transition
 					:name="$store.state.animation ? 'fade' : ''"
@@ -17,7 +16,7 @@
 					<div v-if="appearNote" class="note">
 						<div class="main _gap">
 							<div class="note _gap">
-								<RemoteCaution
+								<MkRemoteCaution
 									v-if="appearNote.user.host != null"
 									:href="appearNote.url ?? appearNote.uri"
 								/>
@@ -30,21 +29,21 @@
 							</div>
 						</div>
 					</div>
-					<Error v-else-if="error" @retry="fetch()" />
-					<Loading v-else />
+					<MkError v-else-if="error" @retry="fetch()" />
+					<MkLoading v-else />
 				</transition>
 			</div>
-		</Spacer>
-	</StickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { computed, defineComponent, watch } from "vue";
 import * as misskey from "iceshrimp-js";
-import XNoteDetailed from "@/components/NoteDetailed.vue";
-import XNotes from "@/components/Notes.vue";
-import RemoteCaution from "@/components/RemoteCaution.vue";
-import Button from "@/components/Button.vue";
+import XNoteDetailed from "@/components/MkNoteDetailed.vue";
+import XNotes from "@/components/MkNotes.vue";
+import MkRemoteCaution from "@/components/MkRemoteCaution.vue";
+import MkButton from "@/components/MkButton.vue";
 import * as os from "@/os";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import { i18n } from "@/i18n";
@@ -116,21 +115,13 @@ watch(() => props.noteId, fetchNote, {
 	immediate: true,
 });
 
-const headerActions = $computed(() =>
-	appearNote
-		? [
-				{
-					icon: `${
-						expandAllCws ? "ph-eye" : "ph-eye-slash"
-					} ph-bold ph-lg`,
-					text: expandAllCws
-						? i18n.ts.collapseAllCws
-						: i18n.ts.expandAllCws,
-					handler: toggleAllCws,
-				},
-		  ]
-		: [],
-);
+const headerActions = $computed(() => appearNote ? [
+	{
+		icon: `${expandAllCws ? "ph-eye" : "ph-eye-slash"} ph-bold ph-lg`,
+		text: expandAllCws ? i18n.ts.collapseAllCws : i18n.ts.expandAllCws,
+		handler: toggleAllCws,
+	},
+]:[]);
 
 const headerTabs = $computed(() => []);
 
@@ -163,7 +154,6 @@ definePageMetadata(
 .fade-leave-active {
 	transition: opacity 0.125s ease;
 }
-
 .fade-enter-from,
 .fade-leave-to {
 	opacity: 0;
diff --git a/packages/client/src/pages/Notifications.vue b/packages/client/src/pages/notifications.vue
similarity index 94%
rename from packages/client/src/pages/Notifications.vue
rename to packages/client/src/pages/notifications.vue
index 11732654c..34df09c46 100644
--- a/packages/client/src/pages/Notifications.vue
+++ b/packages/client/src/pages/notifications.vue
@@ -1,14 +1,14 @@
 <template>
-	<StickyContainer>
+	<MkStickyContainer>
 		<template #header>
-			<PageHeader
+			<MkPageHeader
 				v-model:tab="tab"
 				:actions="headerActions"
 				:tabs="headerTabs"
 				:display-my-avatar="true"
 			/>
 		</template>
-		<Spacer :content-max="800">
+		<MkSpacer :content-max="800">
 			<swiper
 				:round-lengths="true"
 				:touch-angle="25"
@@ -46,8 +46,8 @@
 					<XNotes :pagination="directNotesPagination" />
 				</swiper-slide>
 			</swiper>
-		</Spacer>
-	</StickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
@@ -55,8 +55,8 @@ import { computed, ref, watch } from "vue";
 import { Virtual } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/vue";
 import { notificationTypes } from "iceshrimp-js";
-import XNotifications from "@/components/Notifications.vue";
-import XNotes from "@/components/Notes.vue";
+import XNotifications from "@/components/MkNotifications.vue";
+import XNotes from "@/components/MkNotes.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
diff --git a/packages/client/src/pages/OAuth.vue b/packages/client/src/pages/oauth.vue
similarity index 62%
rename from packages/client/src/pages/OAuth.vue
rename to packages/client/src/pages/oauth.vue
index 06e528668..d33151b87 100644
--- a/packages/client/src/pages/OAuth.vue
+++ b/packages/client/src/pages/oauth.vue
@@ -16,10 +16,7 @@
 					<p>{{ message }}</p>
 				</div>
 			</div>
-			<div
-				v-else-if="state == 'accepted-oob'"
-				class="accepted-oob _section"
-			>
+			<div v-else-if="state == 'accepted-oob'" class="accepted-oob _section">
 				<div class="_content">
 					<p>{{ i18n.ts._auth.copyAsk }}</p>
 					<pre>{{ code }}</pre>
@@ -27,7 +24,9 @@
 			</div>
 			<div v-else-if="state == 'accepted'" class="accepted _section">
 				<div class="_content">
-					<p>{{ i18n.ts._auth.callback }}<MkEllipsis /></p>
+					<p>
+						{{ i18n.ts._auth.callback }}<MkEllipsis />
+					</p>
 				</div>
 			</div>
 			<div v-else class="_section">
@@ -41,14 +40,14 @@
 					<p>{{ i18n.ts._auth.permissionAsk }}</p>
 					<div :class="[$style.permissions]">
 						<div
-							v-for="p in _scopes"
-							:key="p"
-							:class="[$style.permission]"
+								v-for="p in _scopes"
+								:key="p"
+								:class="[$style.permission]"
 						>
 							<i
-								:class="[`ph-${getIcon(p)}`]"
-								class="ph-bold ph-xl"
-								style="margin-right: 0.5rem"
+									:class="[`ph-${getIcon(p)}`]"
+									class="ph-bold ph-xl"
+									style="margin-right: 0.5rem"
 							></i>
 							<span class="monospace">{{ p }}</span>
 						</div>
@@ -56,11 +55,11 @@
 				</div>
 				<div class="_footer">
 					<MkButton inline @click="deny">{{
-						i18n.ts.cancel
-					}}</MkButton>
+							i18n.ts.cancel
+						}}</MkButton>
 					<MkButton inline primary @click="accept">{{
-						i18n.ts.accept
-					}}</MkButton>
+							i18n.ts.accept
+						}}</MkButton>
 				</div>
 			</div>
 		</div>
@@ -72,8 +71,8 @@
 
 <script lang="ts" setup>
 import {} from "vue";
-import MkSignin from "@/components/Signin.vue";
-import MkButton from "@/components/Button.vue";
+import MkSignin from "@/components/MkSignin.vue";
+import MkButton from "@/components/MkButton.vue";
 import * as os from "@/os";
 import { $i, login } from "@/account";
 import { appendQuery, query } from "@/scripts/url";
@@ -88,74 +87,68 @@ const props = defineProps<{
 	lang?: string;
 }>();
 
-const _scopes = props.scope?.split(" ") ?? ["read"];
+const _scopes = props.scope?.split(" ") ?? ['read'];
 
 let state = $ref<string | null>(null);
 let code = $ref<string | null>(null);
 let name = $ref<string | null>(null);
-let message = $ref<string>("Unknown error occurred");
+let message = $ref<string>('Unknown error occurred');
 
 if ($i) {
-	await os
-		.apiJson("v1/iceshrimp/apps/info", {
-			client_id: props.client_id,
-		})
-		.then((res) => {
-			name = res.name;
-		})
-		.catch((reason) => {
-			message = reason;
-			state = "error";
-		});
+	await os.apiJson("v1/iceshrimp/apps/info", {
+		client_id: props.client_id,
+	}).then(res => {
+		name = res.name;
+	}).catch(reason => {
+		message = reason;
+		state = 'error';
+	});
 }
 
 const getUrlParams = () =>
-	window.location.search
-		.substring(1)
-		.split("&")
-		.reduce((result, query) => {
-			const [k, v] = query.split("=");
-			result[k] = decodeURIComponent(v);
-			return result;
-		}, {});
+		window.location.search
+				.substring(1)
+				.split("&")
+				.reduce((result, query) => {
+					const [k, v] = query.split("=");
+					result[k] = decodeURIComponent(v);
+					return result;
+				}, {});
 
-const redirectUri = getUrlParams()["redirect_uri"];
+const redirectUri = getUrlParams()['redirect_uri'];
 if (redirectUri !== props.redirect_uri)
-	console.warn(
-		`Mismatching redirect_uris between props (${props.redirect_uri}) and getUrlParams (${redirectUri})`,
-	);
+	console.warn(`Mismatching redirect_uris between props (${props.redirect_uri}) and getUrlParams (${redirectUri})`);
 
 function getIcon(p: string) {
 	if (p.startsWith("write")) return "pencil-simple";
-	else if (p.startsWith("read")) return "eye";
+	else if(p.startsWith("read")) return "eye";
 	else if (p.startsWith("push")) return "bell-ringing";
-	else if (p.startsWith("follow")) return "users";
+	else if(p.startsWith("follow")) return "users";
 	else return "check-fat";
 }
 
 async function accept(): Promise<void> {
 	state = "waiting";
-	const res = await os
-		.apiJson("v1/iceshrimp/auth/code", {
-			client_id: props.client_id,
-			redirect_uri: redirectUri,
-			scopes: _scopes,
-		})
-		.catch((r) => {
-			message = r;
-			state = "error";
-			throw r;
-		});
+	const res = await os.apiJson("v1/iceshrimp/auth/code", {
+		client_id: props.client_id,
+		redirect_uri: redirectUri,
+		scopes: _scopes,
+	}).catch(r => {
+		message = r;
+		state = 'error';
+		throw r;
+	});
 
-	if (props.redirect_uri !== "urn:ietf:wg:oauth:2.0:oob") {
+	if (props.redirect_uri !== 'urn:ietf:wg:oauth:2.0:oob') {
 		state = "accepted";
 		location.href = appendQuery(
-			redirectUri,
-			query({
-				code: res.code,
-			}),
+				redirectUri,
+				query({
+					code: res.code,
+				}),
 		);
-	} else {
+	}
+	else {
 		code = res.code;
 		state = "accepted-oob";
 	}
@@ -189,4 +182,4 @@ async function onLogin(res): Promise<void> {
 	background-color: var(--buttonBg);
 	color: var(--fg);
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/packages/client/src/pages/page-editor/elements/Button.vue b/packages/client/src/pages/page-editor/els/page-editor.el.button.vue
similarity index 79%
rename from packages/client/src/pages/page-editor/elements/Button.vue
rename to packages/client/src/pages/page-editor/els/page-editor.el.button.vue
index 81a11baeb..e53c9c8d8 100644
--- a/packages/client/src/pages/page-editor/elements/Button.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.button.vue
@@ -6,17 +6,17 @@
 		>
 
 		<section class="xfhsjczc">
-			<Input v-model="value.text"
+			<MkInput v-model="value.text"
 				><template #label>{{
 					i18n.ts._pages.blocks._button.text
-				}}</template></Input
+				}}</template></MkInput
 			>
-			<Switch v-model="value.primary"
+			<MkSwitch v-model="value.primary"
 				><span>{{
 					i18n.ts._pages.blocks._button.colored
-				}}</span></Switch
+				}}</span></MkSwitch
 			>
-			<Select v-model="value.action">
+			<MkSelect v-model="value.action">
 				<template #label>{{
 					i18n.ts._pages.blocks._button.action
 				}}</template>
@@ -32,26 +32,26 @@
 				<option value="callAiScript">
 					{{ i18n.ts._pages.blocks._button._action.callAiScript }}
 				</option>
-			</Select>
+			</MkSelect>
 			<template v-if="value.action === 'dialog'">
-				<Input v-model="value.content"
+				<MkInput v-model="value.content"
 					><template #label>{{
 						i18n.ts._pages.blocks._button._action._dialog.content
-					}}</template></Input
+					}}</template></MkInput
 				>
 			</template>
 			<template v-else-if="value.action === 'pushEvent'">
-				<Input v-model="value.event"
+				<MkInput v-model="value.event"
 					><template #label>{{
 						i18n.ts._pages.blocks._button._action._pushEvent.event
-					}}</template></Input
+					}}</template></MkInput
 				>
-				<Input v-model="value.message"
+				<MkInput v-model="value.message"
 					><template #label>{{
 						i18n.ts._pages.blocks._button._action._pushEvent.message
-					}}</template></Input
+					}}</template></MkInput
 				>
-				<Select v-model="value.var">
+				<MkSelect v-model="value.var">
 					<template #label>{{
 						i18n.ts._pages.blocks._button._action._pushEvent
 							.variable
@@ -81,14 +81,14 @@
 							{{ v }}
 						</option>
 					</optgroup>
-				</Select>
+				</MkSelect>
 			</template>
 			<template v-else-if="value.action === 'callAiScript'">
-				<Input v-model="value.fn"
+				<MkInput v-model="value.fn"
 					><template #label>{{
 						i18n.ts._pages.blocks._button._action._callAiScript
 							.functionName
-					}}</template></Input
+					}}</template></MkInput
 				>
 			</template>
 		</section>
@@ -97,10 +97,10 @@
 
 <script lang="ts" setup>
 import {} from "vue";
-import XContainer from "../Container.vue";
-import Select from "@/components/form/Select.vue";
-import Input from "@/components/form/Input.vue";
-import Switch from "@/components/form/Switch.vue";
+import XContainer from "../page-editor.container.vue";
+import MkSelect from "@/components/form/select.vue";
+import MkInput from "@/components/form/input.vue";
+import MkSwitch from "@/components/form/switch.vue";
 import { i18n } from "@/i18n";
 
 withDefaults(
diff --git a/packages/client/src/pages/page-editor/elements/Canvas.vue b/packages/client/src/pages/page-editor/els/page-editor.el.canvas.vue
similarity index 76%
rename from packages/client/src/pages/page-editor/elements/Canvas.vue
rename to packages/client/src/pages/page-editor/els/page-editor.el.canvas.vue
index f89304ae3..49820844d 100644
--- a/packages/client/src/pages/page-editor/elements/Canvas.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.canvas.vue
@@ -6,34 +6,34 @@
 		>
 
 		<section style="padding: 0 16px 0 16px">
-			<Input v-model="value.name">
+			<MkInput v-model="value.name">
 				<template #prefix
 					><i class="ph-magic-wand ph-bold ph-lg"></i
 				></template>
 				<template #label>{{
 					i18n.ts._pages.blocks._canvas.id
 				}}</template>
-			</Input>
-			<Input v-model="value.width" type="number">
+			</MkInput>
+			<MkInput v-model="value.width" type="number">
 				<template #label>{{
 					i18n.ts._pages.blocks._canvas.width
 				}}</template>
 				<template #suffix>px</template>
-			</Input>
-			<Input v-model="value.height" type="number">
+			</MkInput>
+			<MkInput v-model="value.height" type="number">
 				<template #label>{{
 					i18n.ts._pages.blocks._canvas.height
 				}}</template>
 				<template #suffix>px</template>
-			</Input>
+			</MkInput>
 		</section>
 	</XContainer>
 </template>
 
 <script lang="ts" setup>
 import {} from "vue";
-import XContainer from "../Container.vue";
-import Input from "@/components/form/Input.vue";
+import XContainer from "../page-editor.container.vue";
+import MkInput from "@/components/form/input.vue";
 import { i18n } from "@/i18n";
 
 withDefaults(
diff --git a/packages/client/src/pages/page-editor/elements/Counter.vue b/packages/client/src/pages/page-editor/els/page-editor.el.counter.vue
similarity index 75%
rename from packages/client/src/pages/page-editor/elements/Counter.vue
rename to packages/client/src/pages/page-editor/els/page-editor.el.counter.vue
index b02a9bd05..b047bb62d 100644
--- a/packages/client/src/pages/page-editor/elements/Counter.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.counter.vue
@@ -6,32 +6,32 @@
 		>
 
 		<section style="padding: 0 16px 0 16px">
-			<Input v-model="value.name">
+			<MkInput v-model="value.name">
 				<template #prefix
 					><i class="ph-magic-wand ph-bold ph-lg"></i
 				></template>
 				<template #label>{{
 					i18n.ts._pages.blocks._counter.name
 				}}</template>
-			</Input>
-			<Input v-model="value.text">
+			</MkInput>
+			<MkInput v-model="value.text">
 				<template #label>{{
 					i18n.ts._pages.blocks._counter.text
 				}}</template>
-			</Input>
-			<Input v-model="value.inc" type="number">
+			</MkInput>
+			<MkInput v-model="value.inc" type="number">
 				<template #label>{{
 					i18n.ts._pages.blocks._counter.inc
 				}}</template>
-			</Input>
+			</MkInput>
 		</section>
 	</XContainer>
 </template>
 
 <script lang="ts" setup>
 import {} from "vue";
-import XContainer from "../Container.vue";
-import Input from "@/components/form/Input.vue";
+import XContainer from "../page-editor.container.vue";
+import MkInput from "@/components/form/input.vue";
 import { i18n } from "@/i18n";
 
 withDefaults(
diff --git a/packages/client/src/pages/page-editor/elements/If.vue b/packages/client/src/pages/page-editor/els/page-editor.el.if.vue
similarity index 88%
rename from packages/client/src/pages/page-editor/elements/If.vue
rename to packages/client/src/pages/page-editor/els/page-editor.el.if.vue
index 1dbfbd870..6f436e9d4 100644
--- a/packages/client/src/pages/page-editor/elements/If.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.if.vue
@@ -11,7 +11,7 @@
 		</template>
 
 		<section class="romcojzs">
-			<Select v-model="value.var">
+			<MkSelect v-model="value.var">
 				<template #label>{{
 					i18n.ts._pages.blocks._if.variable
 				}}</template>
@@ -37,7 +37,7 @@
 						{{ v }}
 					</option>
 				</optgroup>
-			</Select>
+			</MkSelect>
 
 			<XBlocks v-model="value.children" class="children" :hpml="hpml" />
 		</section>
@@ -47,12 +47,12 @@
 <script lang="ts" setup>
 import { defineAsyncComponent, inject } from "vue";
 import { v4 as uuid } from "uuid";
-import XContainer from "../Container.vue";
-import Select from "@/components/form/Select.vue";
+import XContainer from "../page-editor.container.vue";
+import MkSelect from "@/components/form/select.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 
-const XBlocks = defineAsyncComponent(() => import("../Blocks.vue"));
+const XBlocks = defineAsyncComponent(() => import("../page-editor.blocks.vue"));
 
 const props = withDefaults(
 	defineProps<{
diff --git a/packages/client/src/pages/page-editor/elements/Image.vue b/packages/client/src/pages/page-editor/els/page-editor.el.image.vue
similarity index 88%
rename from packages/client/src/pages/page-editor/elements/Image.vue
rename to packages/client/src/pages/page-editor/els/page-editor.el.image.vue
index f9eb9df2b..0f95c79a0 100644
--- a/packages/client/src/pages/page-editor/elements/Image.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.image.vue
@@ -11,7 +11,7 @@
 		</template>
 
 		<section class="oyyftmcf">
-			<DriveFileThumbnail
+			<MkDriveFileThumbnail
 				v-if="file"
 				class="preview"
 				:file="file"
@@ -24,8 +24,8 @@
 
 <script lang="ts" setup>
 import { onMounted } from "vue";
-import XContainer from "../Container.vue";
-import DriveFileThumbnail from "@/components/DriveFileThumbnail.vue";
+import XContainer from "../page-editor.container.vue";
+import MkDriveFileThumbnail from "@/components/MkDriveFileThumbnail.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 
diff --git a/packages/client/src/pages/page-editor/elements/Note.vue b/packages/client/src/pages/page-editor/els/page-editor.el.note.vue
similarity index 76%
rename from packages/client/src/pages/page-editor/elements/Note.vue
rename to packages/client/src/pages/page-editor/els/page-editor.el.note.vue
index 9a0a126c5..a3c66a80c 100644
--- a/packages/client/src/pages/page-editor/elements/Note.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.note.vue
@@ -6,14 +6,16 @@
 		>
 
 		<section style="padding: 0 16px 0 16px">
-			<Input v-model="id">
+			<MkInput v-model="id">
 				<template #label>{{ i18n.ts._pages.blocks._note.id }}</template>
 				<template #caption>{{
 					i18n.ts._pages.blocks._note.idDescription
 				}}</template>
-			</Input>
-			<Switch v-model="value.detailed"
-				><span>{{ i18n.ts._pages.blocks._note.detailed }}</span></Switch
+			</MkInput>
+			<MkSwitch v-model="value.detailed"
+				><span>{{
+					i18n.ts._pages.blocks._note.detailed
+				}}</span></MkSwitch
 			>
 
 			<XNote
@@ -34,11 +36,11 @@
 
 <script lang="ts" setup>
 import { watch } from "vue";
-import XContainer from "../Container.vue";
-import Input from "@/components/form/Input.vue";
-import Switch from "@/components/form/Switch.vue";
-import XNote from "@/components/Note.vue";
-import XNoteDetailed from "@/components/NoteDetailed.vue";
+import XContainer from "../page-editor.container.vue";
+import MkInput from "@/components/form/input.vue";
+import MkSwitch from "@/components/form/switch.vue";
+import XNote from "@/components/MkNote.vue";
+import XNoteDetailed from "@/components/MkNoteDetailed.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 
diff --git a/packages/client/src/pages/page-editor/elements/NumberInput.vue b/packages/client/src/pages/page-editor/els/page-editor.el.number-input.vue
similarity index 75%
rename from packages/client/src/pages/page-editor/elements/NumberInput.vue
rename to packages/client/src/pages/page-editor/els/page-editor.el.number-input.vue
index 16073d98f..a14b16d67 100644
--- a/packages/client/src/pages/page-editor/elements/NumberInput.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.number-input.vue
@@ -6,32 +6,32 @@
 		>
 
 		<section style="padding: 0 16px 0 16px">
-			<Input v-model="value.name">
+			<MkInput v-model="value.name">
 				<template #prefix
 					><i class="ph-magic-wand ph-bold ph-lg"></i
 				></template>
 				<template #label>{{
 					i18n.ts._pages.blocks._numberInput.name
 				}}</template>
-			</Input>
-			<Input v-model="value.text">
+			</MkInput>
+			<MkInput v-model="value.text">
 				<template #label>{{
 					i18n.ts._pages.blocks._numberInput.text
 				}}</template>
-			</Input>
-			<Input v-model="value.default" type="number">
+			</MkInput>
+			<MkInput v-model="value.default" type="number">
 				<template #label>{{
 					i18n.ts._pages.blocks._numberInput.default
 				}}</template>
-			</Input>
+			</MkInput>
 		</section>
 	</XContainer>
 </template>
 
 <script lang="ts" setup>
 import {} from "vue";
-import XContainer from "../Container.vue";
-import Input from "@/components/form/Input.vue";
+import XContainer from "../page-editor.container.vue";
+import MkInput from "@/components/form/input.vue";
 import { i18n } from "@/i18n";
 
 withDefaults(
diff --git a/packages/client/src/pages/page-editor/elements/Post.vue b/packages/client/src/pages/page-editor/els/page-editor.el.post.vue
similarity index 61%
rename from packages/client/src/pages/page-editor/elements/Post.vue
rename to packages/client/src/pages/page-editor/els/page-editor.el.post.vue
index 0cc79b2c2..f2d6558be 100644
--- a/packages/client/src/pages/page-editor/elements/Post.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.post.vue
@@ -6,20 +6,20 @@
 		>
 
 		<section style="padding: 16px">
-			<Textarea v-model="value.text"
+			<MkTextarea v-model="value.text"
 				><template #label>{{
 					i18n.ts._pages.blocks._post.text
-				}}</template></Textarea
+				}}</template></MkTextarea
 			>
-			<Switch v-model="value.attachCanvasImage"
+			<MkSwitch v-model="value.attachCanvasImage"
 				><span>{{
 					i18n.ts._pages.blocks._post.attachCanvasImage
-				}}</span></Switch
+				}}</span></MkSwitch
 			>
-			<Input v-if="value.attachCanvasImage" v-model="value.canvasId"
+			<MkInput v-if="value.attachCanvasImage" v-model="value.canvasId"
 				><template #label>{{
 					i18n.ts._pages.blocks._post.canvasId
-				}}</template></Input
+				}}</template></MkInput
 			>
 		</section>
 	</XContainer>
@@ -27,10 +27,10 @@
 
 <script lang="ts" setup>
 import {} from "vue";
-import XContainer from "../Container.vue";
-import Textarea from "@/components/form/Textarea.vue";
-import Input from "@/components/form/Input.vue";
-import Switch from "@/components/form/Switch.vue";
+import XContainer from "../page-editor.container.vue";
+import MkTextarea from "@/components/form/textarea.vue";
+import MkInput from "@/components/form/input.vue";
+import MkSwitch from "@/components/form/switch.vue";
 import { i18n } from "@/i18n";
 
 withDefaults(
diff --git a/packages/client/src/pages/page-editor/elements/RadioButton.vue b/packages/client/src/pages/page-editor/els/page-editor.el.radio-button.vue
similarity index 72%
rename from packages/client/src/pages/page-editor/elements/RadioButton.vue
rename to packages/client/src/pages/page-editor/els/page-editor.el.radio-button.vue
index 400dbfb5d..63082b5ab 100644
--- a/packages/client/src/pages/page-editor/elements/RadioButton.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.radio-button.vue
@@ -6,27 +6,27 @@
 		>
 
 		<section style="padding: 0 16px 16px 16px">
-			<Input v-model="value.name"
+			<MkInput v-model="value.name"
 				><template #prefix
 					><i class="ph-magic-wand ph-bold ph-lg"></i></template
 				><template #label>{{
 					i18n.ts._pages.blocks._radioButton.name
-				}}</template></Input
+				}}</template></MkInput
 			>
-			<Input v-model="value.title"
+			<MkInput v-model="value.title"
 				><template #label>{{
 					i18n.ts._pages.blocks._radioButton.title
-				}}</template></Input
+				}}</template></MkInput
 			>
-			<Textarea v-model="values"
+			<MkTextarea v-model="values"
 				><template #label>{{
 					i18n.ts._pages.blocks._radioButton.values
-				}}</template></Textarea
+				}}</template></MkTextarea
 			>
-			<Input v-model="value.default"
+			<MkInput v-model="value.default"
 				><template #label>{{
 					i18n.ts._pages.blocks._radioButton.default
-				}}</template></Input
+				}}</template></MkInput
 			>
 		</section>
 	</XContainer>
@@ -34,9 +34,9 @@
 
 <script lang="ts" setup>
 import { watch } from "vue";
-import XContainer from "../Container.vue";
-import Textarea from "@/components/form/Textarea.vue";
-import Input from "@/components/form/Input.vue";
+import XContainer from "../page-editor.container.vue";
+import MkTextarea from "@/components/form/textarea.vue";
+import MkInput from "@/components/form/input.vue";
 import { i18n } from "@/i18n";
 
 const props = withDefaults(
diff --git a/packages/client/src/pages/page-editor/elements/Section.vue b/packages/client/src/pages/page-editor/els/page-editor.el.section.vue
similarity index 91%
rename from packages/client/src/pages/page-editor/elements/Section.vue
rename to packages/client/src/pages/page-editor/els/page-editor.el.section.vue
index a9a37a88a..d4b28e13c 100644
--- a/packages/client/src/pages/page-editor/elements/Section.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.section.vue
@@ -22,11 +22,11 @@
 <script lang="ts" setup>
 import { defineAsyncComponent, inject, onMounted } from "vue";
 import { v4 as uuid } from "uuid";
-import XContainer from "../Container.vue";
+import XContainer from "../page-editor.container.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 
-const XBlocks = defineAsyncComponent(() => import("../Blocks.vue"));
+const XBlocks = defineAsyncComponent(() => import("../page-editor.blocks.vue"));
 
 const props = withDefaults(
 	defineProps<{
diff --git a/packages/client/src/pages/page-editor/elements/Switch.vue b/packages/client/src/pages/page-editor/els/page-editor.el.switch.vue
similarity index 70%
rename from packages/client/src/pages/page-editor/elements/Switch.vue
rename to packages/client/src/pages/page-editor/els/page-editor.el.switch.vue
index dd2e72ceb..ef4b9961e 100644
--- a/packages/client/src/pages/page-editor/elements/Switch.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.switch.vue
@@ -6,22 +6,22 @@
 		>
 
 		<section class="kjuadyyj">
-			<Input v-model="value.name"
+			<MkInput v-model="value.name"
 				><template #prefix
 					><i class="ph-magic-wand ph-bold ph-lg"></i></template
 				><template #label>{{
 					i18n.ts._pages.blocks._switch.name
-				}}</template></Input
+				}}</template></MkInput
 			>
-			<Input v-model="value.text"
+			<MkInput v-model="value.text"
 				><template #label>{{
 					i18n.ts._pages.blocks._switch.text
-				}}</template></Input
+				}}</template></MkInput
 			>
-			<Switch v-model="value.default"
+			<MkSwitch v-model="value.default"
 				><span>{{
 					i18n.ts._pages.blocks._switch.default
-				}}</span></Switch
+				}}</span></MkSwitch
 			>
 		</section>
 	</XContainer>
@@ -29,9 +29,9 @@
 
 <script lang="ts" setup>
 import {} from "vue";
-import XContainer from "../Container.vue";
-import Switch from "@/components/form/Switch.vue";
-import Input from "@/components/form/Input.vue";
+import XContainer from "../page-editor.container.vue";
+import MkSwitch from "@/components/form/switch.vue";
+import MkInput from "@/components/form/input.vue";
 import { i18n } from "@/i18n";
 
 withDefaults(
diff --git a/packages/client/src/pages/page-editor/elements/TextInput.vue b/packages/client/src/pages/page-editor/els/page-editor.el.text-input.vue
similarity index 71%
rename from packages/client/src/pages/page-editor/elements/TextInput.vue
rename to packages/client/src/pages/page-editor/els/page-editor.el.text-input.vue
index 947f0d1cd..d53e0621a 100644
--- a/packages/client/src/pages/page-editor/elements/TextInput.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.text-input.vue
@@ -6,22 +6,22 @@
 		>
 
 		<section style="padding: 0 16px 0 16px">
-			<Input v-model="value.name"
+			<MkInput v-model="value.name"
 				><template #prefix
 					><i class="ph-magic-wand ph-bold ph-lg"></i></template
 				><template #label>{{
 					i18n.ts._pages.blocks._textInput.name
-				}}</template></Input
+				}}</template></MkInput
 			>
-			<Input v-model="value.text"
+			<MkInput v-model="value.text"
 				><template #label>{{
 					i18n.ts._pages.blocks._textInput.text
-				}}</template></Input
+				}}</template></MkInput
 			>
-			<Input v-model="value.default" type="text"
+			<MkInput v-model="value.default" type="text"
 				><template #label>{{
 					i18n.ts._pages.blocks._textInput.default
-				}}</template></Input
+				}}</template></MkInput
 			>
 		</section>
 	</XContainer>
@@ -29,8 +29,8 @@
 
 <script lang="ts" setup>
 import {} from "vue";
-import XContainer from "../Container.vue";
-import Input from "@/components/form/Input.vue";
+import XContainer from "../page-editor.container.vue";
+import MkInput from "@/components/form/input.vue";
 import { i18n } from "@/i18n";
 
 withDefaults(
diff --git a/packages/client/src/pages/page-editor/elements/Text.vue b/packages/client/src/pages/page-editor/els/page-editor.el.text.vue
similarity index 93%
rename from packages/client/src/pages/page-editor/elements/Text.vue
rename to packages/client/src/pages/page-editor/els/page-editor.el.text.vue
index 14d457add..1aac0859e 100644
--- a/packages/client/src/pages/page-editor/elements/Text.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.text.vue
@@ -13,7 +13,7 @@
 
 <script lang="ts" setup>
 import {} from "vue";
-import XContainer from "../Container.vue";
+import XContainer from "../page-editor.container.vue";
 import { i18n } from "@/i18n";
 
 withDefaults(
diff --git a/packages/client/src/pages/page-editor/elements/TextareaInput.vue b/packages/client/src/pages/page-editor/els/page-editor.el.textarea-input.vue
similarity index 69%
rename from packages/client/src/pages/page-editor/elements/TextareaInput.vue
rename to packages/client/src/pages/page-editor/els/page-editor.el.textarea-input.vue
index 1b7fd16bf..bed60a3bb 100644
--- a/packages/client/src/pages/page-editor/elements/TextareaInput.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.textarea-input.vue
@@ -6,22 +6,22 @@
 		>
 
 		<section style="padding: 0 16px 16px 16px">
-			<Input v-model="value.name"
+			<MkInput v-model="value.name"
 				><template #prefix
 					><i class="ph-magic-wand ph-bold ph-lg"></i></template
 				><template #label>{{
 					i18n.ts._pages.blocks._textareaInput.name
-				}}</template></Input
+				}}</template></MkInput
 			>
-			<Input v-model="value.text"
+			<MkInput v-model="value.text"
 				><template #label>{{
 					i18n.ts._pages.blocks._textareaInput.text
-				}}</template></Input
+				}}</template></MkInput
 			>
-			<Textarea v-model="value.default"
+			<MkTextarea v-model="value.default"
 				><template #label>{{
 					i18n.ts._pages.blocks._textareaInput.default
-				}}</template></Textarea
+				}}</template></MkTextarea
 			>
 		</section>
 	</XContainer>
@@ -29,9 +29,9 @@
 
 <script lang="ts" setup>
 import {} from "vue";
-import XContainer from "../Container.vue";
-import Textarea from "@/components/form/Textarea.vue";
-import Input from "@/components/form/Input.vue";
+import XContainer from "../page-editor.container.vue";
+import MkTextarea from "@/components/form/textarea.vue";
+import MkInput from "@/components/form/input.vue";
 import { i18n } from "@/i18n";
 
 withDefaults(
diff --git a/packages/client/src/pages/page-editor/elements/Textarea.vue b/packages/client/src/pages/page-editor/els/page-editor.el.textarea.vue
similarity index 93%
rename from packages/client/src/pages/page-editor/elements/Textarea.vue
rename to packages/client/src/pages/page-editor/els/page-editor.el.textarea.vue
index d0f1fa882..563e085a7 100644
--- a/packages/client/src/pages/page-editor/elements/Textarea.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.textarea.vue
@@ -13,7 +13,7 @@
 
 <script lang="ts" setup>
 import {} from "vue";
-import XContainer from "../Container.vue";
+import XContainer from "../page-editor.container.vue";
 import { i18n } from "@/i18n";
 
 withDefaults(
diff --git a/packages/client/src/pages/page-editor/Blocks.vue b/packages/client/src/pages/page-editor/page-editor.blocks.vue
similarity index 64%
rename from packages/client/src/pages/page-editor/Blocks.vue
rename to packages/client/src/pages/page-editor/page-editor.blocks.vue
index f0ba3dcc2..25e35a487 100644
--- a/packages/client/src/pages/page-editor/Blocks.vue
+++ b/packages/client/src/pages/page-editor/page-editor.blocks.vue
@@ -22,21 +22,21 @@
 <script lang="ts">
 import { defineComponent, defineAsyncComponent } from "vue";
 import { VueDraggable } from "vue-draggable-plus";
-import XSection from "./elements/Section.vue";
-import XText from "./elements/Text.vue";
-import XTextarea from "./elements/Textarea.vue";
-import XImage from "./elements/Image.vue";
-import XButton from "./elements/Button.vue";
-import XTextInput from "./elements/TextInput.vue";
-import XTextareaInput from "./elements/TextareaInput.vue";
-import XNumberInput from "./elements/NumberInput.vue";
-import XSwitch from "./elements/Switch.vue";
-import XIf from "./elements/If.vue";
-import XPost from "./elements/Post.vue";
-import XCounter from "./elements/Counter.vue";
-import XRadioButton from "./elements/RadioButton.vue";
-import XCanvas from "./elements/Canvas.vue";
-import XNote from "./elements/Note.vue";
+import XSection from "./els/page-editor.el.section.vue";
+import XText from "./els/page-editor.el.text.vue";
+import XTextarea from "./els/page-editor.el.textarea.vue";
+import XImage from "./els/page-editor.el.image.vue";
+import XButton from "./els/page-editor.el.button.vue";
+import XTextInput from "./els/page-editor.el.text-input.vue";
+import XTextareaInput from "./els/page-editor.el.textarea-input.vue";
+import XNumberInput from "./els/page-editor.el.number-input.vue";
+import XSwitch from "./els/page-editor.el.switch.vue";
+import XIf from "./els/page-editor.el.if.vue";
+import XPost from "./els/page-editor.el.post.vue";
+import XCounter from "./els/page-editor.el.counter.vue";
+import XRadioButton from "./els/page-editor.el.radio-button.vue";
+import XCanvas from "./els/page-editor.el.canvas.vue";
+import XNote from "./els/page-editor.el.note.vue";
 import * as os from "@/os";
 
 export default defineComponent({
diff --git a/packages/client/src/pages/page-editor/Container.vue b/packages/client/src/pages/page-editor/page-editor.container.vue
similarity index 100%
rename from packages/client/src/pages/page-editor/Container.vue
rename to packages/client/src/pages/page-editor/page-editor.container.vue
diff --git a/packages/client/src/pages/page-editor/ScriptBlock.vue b/packages/client/src/pages/page-editor/page-editor.script-block.vue
similarity index 97%
rename from packages/client/src/pages/page-editor/ScriptBlock.vue
rename to packages/client/src/pages/page-editor/page-editor.script-block.vue
index bb67f1434..4ce8fcd3c 100644
--- a/packages/client/src/pages/page-editor/ScriptBlock.vue
+++ b/packages/client/src/pages/page-editor/page-editor.script-block.vue
@@ -93,14 +93,14 @@
 			class=""
 			style="padding: 0 16px 16px 16px"
 		>
-			<Textarea v-model="slots">
+			<MkTextarea v-model="slots">
 				<template #label>{{
 					i18n.ts._pages.script.blocks._fn.slots
 				}}</template>
 				<template #caption>{{
 					i18n.t("_pages.script.blocks._fn.slots-info")
 				}}</template>
-			</Textarea>
+			</MkTextarea>
 			<XV
 				v-if="modelValue.value.expression"
 				v-model="modelValue.value.expression"
@@ -151,8 +151,8 @@
 <script lang="ts">
 import { defineAsyncComponent, defineComponent } from "vue";
 import { v4 as uuid } from "uuid";
-import XContainer from "./Container.vue";
-import Textarea from "@/components/form/Textarea.vue";
+import XContainer from "./page-editor.container.vue";
+import MkTextarea from "@/components/form/textarea.vue";
 import { blockDefs } from "@/scripts/hpml/index";
 import * as os from "@/os";
 import { isLiteralValue } from "@/scripts/hpml/expr";
@@ -162,8 +162,10 @@ import { i18n } from "@/i18n";
 export default defineComponent({
 	components: {
 		XContainer,
-		Textarea,
-		XV: defineAsyncComponent(() => import("./ScriptBlock.vue")),
+		MkTextarea,
+		XV: defineAsyncComponent(
+			() => import("./page-editor.script-block.vue"),
+		),
 	},
 
 	inject: ["getScriptBlockList"],
diff --git a/packages/client/src/pages/page-editor/PageEditor.vue b/packages/client/src/pages/page-editor/page-editor.vue
similarity index 88%
rename from packages/client/src/pages/page-editor/PageEditor.vue
rename to packages/client/src/pages/page-editor/page-editor.vue
index e24f4cd1d..7fda39303 100644
--- a/packages/client/src/pages/page-editor/PageEditor.vue
+++ b/packages/client/src/pages/page-editor/page-editor.vue
@@ -1,72 +1,71 @@
 <template>
-	<StickyContainer>
-		<template #header>
-			<PageHeader
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
 				v-model:tab="tab"
 				:actions="headerActions"
 				:tabs="headerTabs"
-			/>
-		</template>
-		<Spacer :content-max="700">
+		/></template>
+		<MkSpacer :content-max="700">
 			<div class="jqqmcavi">
-				<Button
+				<MkButton
 					v-if="pageId"
 					class="button"
 					inline
 					link
 					:to="`/@${author.username}/pages/${currentName}`"
 					><i class="ph-arrow-square-out ph-bold ph-lg"></i>
-					{{ i18n.ts._pages.viewPage }}</Button
+					{{ i18n.ts._pages.viewPage }}</MkButton
 				>
-				<Button
+				<MkButton
 					v-if="!readonly"
 					inline
 					primary
 					class="button"
 					@click="save"
 					><i class="ph-floppy-disk-back ph-bold ph-lg"></i>
-					{{ i18n.ts.save }}</Button
+					{{ i18n.ts.save }}</MkButton
 				>
-				<Button v-if="pageId" inline class="button" @click="duplicate"
+				<MkButton v-if="pageId" inline class="button" @click="duplicate"
 					><i class="ph-clipboard-text ph-bold ph-lg"></i>
-					{{ i18n.ts.duplicate }}</Button
+					{{ i18n.ts.duplicate }}</MkButton
 				>
-				<Button
+				<MkButton
 					v-if="pageId && !readonly"
 					inline
 					class="button"
 					danger
 					@click="del"
 					><i class="ph-trash ph-bold ph-lg"></i>
-					{{ i18n.ts.delete }}</Button
+					{{ i18n.ts.delete }}</MkButton
 				>
 			</div>
 
 			<div v-if="tab === 'settings'">
 				<div class="_formRoot">
-					<Input v-model="title" class="_formBlock">
+					<MkInput v-model="title" class="_formBlock">
 						<template #label>{{ i18n.ts._pages.title }}</template>
-					</Input>
+					</MkInput>
 
-					<Input v-model="summary" class="_formBlock">
+					<MkInput v-model="summary" class="_formBlock">
 						<template #label>{{ i18n.ts._pages.summary }}</template>
-					</Input>
+					</MkInput>
 
-					<Input v-model="name" class="_formBlock">
+					<MkInput v-model="name" class="_formBlock">
 						<template #prefix
 							>{{ url }}/@{{ author.username }}/pages/</template
 						>
 						<template #label>{{ i18n.ts._pages.url }}</template>
-					</Input>
+					</MkInput>
 
-					<Switch v-model="isPublic" class="_formBlock">{{
+					<MkSwitch v-model="isPublic" class="_formBlock">{{
 						i18n.ts.public
-					}}</Switch>
-					<Switch v-model="alignCenter" class="_formBlock">{{
+					}}</MkSwitch>
+					<MkSwitch v-model="alignCenter" class="_formBlock">{{
 						i18n.ts._pages.alignCenter
-					}}</Switch>
+					}}</MkSwitch>
 
-					<Select v-model="font" class="_formBlock">
+					<MkSelect v-model="font" class="_formBlock">
 						<template #label>{{ i18n.ts._pages.font }}</template>
 						<option value="serif">
 							{{ i18n.ts._pages.fontSerif }}
@@ -74,18 +73,20 @@
 						<option value="sans-serif">
 							{{ i18n.ts._pages.fontSansSerif }}
 						</option>
-					</Select>
+					</MkSelect>
 
-					<Switch v-model="hideTitleWhenPinned" class="_formBlock"
-						>{{ i18n.ts._pages.hideTitleWhenPinned }}
-					</Switch>
+					<MkSwitch
+						v-model="hideTitleWhenPinned"
+						class="_formBlock"
+						>{{ i18n.ts._pages.hideTitleWhenPinned }}</MkSwitch
+					>
 
 					<div class="eyeCatch">
-						<Button
+						<MkButton
 							v-if="eyeCatchingImageId == null && !readonly"
 							@click="setEyeCatchingImage"
 							><i class="ph-plus ph-bold ph-lg"></i>
-							{{ i18n.ts._pages.eyeCatchingImageSet }}</Button
+							{{ i18n.ts._pages.eyeCatchingImageSet }}</MkButton
 						>
 						<div v-else-if="eyeCatchingImage">
 							<img
@@ -93,13 +94,13 @@
 								:alt="eyeCatchingImage.name"
 								style="max-width: 100%"
 							/>
-							<Button
+							<MkButton
 								v-if="!readonly"
 								@click="removeEyeCatchingImage()"
 								><i class="ph-trash ph-bold ph-lg"></i>
 								{{
 									i18n.ts._pages.eyeCatchingImageRemove
-								}}</Button
+								}}</MkButton
 							>
 						</div>
 					</div>
@@ -109,9 +110,9 @@
 			<div v-else-if="tab === 'contents'">
 				<div>
 					<XBlocks v-model="content" class="content" :hpml="hpml" />
-					<Button v-if="!readonly" @click="add()"
+					<MkButton v-if="!readonly" @click="add()"
 						><i class="ph-plus ph-bold ph-lg"></i
-					></Button>
+					></MkButton>
 				</div>
 			</div>
 
@@ -140,31 +141,34 @@
 						/>
 					</VueDraggable>
 
-					<Button v-if="!readonly" class="add" @click="addVariable()"
+					<MkButton
+						v-if="!readonly"
+						class="add"
+						@click="addVariable()"
 						><i class="ph-plus ph-bold ph-lg"></i
-					></Button>
+					></MkButton>
 				</div>
 			</div>
 
 			<div v-else-if="tab === 'script'">
 				<div>
-					<Textarea v-model="script" class="_code" />
+					<MkTextarea v-model="script" class="_code" />
 				</div>
 			</div>
-		</Spacer>
-	</StickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { defineAsyncComponent, computed, provide, watch } from "vue";
 import { v4 as uuid } from "uuid";
-import XVariable from "./ScriptBlock.vue";
-import XBlocks from "./Blocks.vue";
-import Textarea from "@/components/form/Textarea.vue";
-import Button from "@/components/Button.vue";
-import Select from "@/components/form/Select.vue";
-import Switch from "@/components/form/Switch.vue";
-import Input from "@/components/form/Input.vue";
+import XVariable from "./page-editor.script-block.vue";
+import XBlocks from "./page-editor.blocks.vue";
+import MkTextarea from "@/components/form/textarea.vue";
+import MkButton from "@/components/MkButton.vue";
+import MkSelect from "@/components/form/select.vue";
+import MkSwitch from "@/components/form/switch.vue";
+import MkInput from "@/components/form/input.vue";
 import { blockDefs } from "@/scripts/hpml/index";
 import { HpmlTypeChecker } from "@/scripts/hpml/type-checker";
 import { url } from "@/config";
diff --git a/packages/client/src/pages/Page.vue b/packages/client/src/pages/page.vue
similarity index 87%
rename from packages/client/src/pages/Page.vue
rename to packages/client/src/pages/page.vue
index 7fa16df5c..069d5da29 100644
--- a/packages/client/src/pages/Page.vue
+++ b/packages/client/src/pages/page.vue
@@ -1,13 +1,12 @@
 <template>
-	<StickyContainer>
-		<template #header>
-			<PageHeader
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
 				:actions="headerActions"
 				:tabs="headerTabs"
 				:display-back-button="true"
-			/>
-		</template>
-		<Spacer :content-max="800">
+		/></template>
+		<MkSpacer :content-max="800">
 			<transition
 				:name="$store.state.animation ? 'fade' : ''"
 				mode="out-in"
@@ -22,12 +21,12 @@
 						<div>
 							<i class="ph-alarm ph-bold" />
 							{{ i18n.ts.createdAt }}:
-							<Time :time="page.createdAt" mode="detail" />
+							<MkTime :time="page.createdAt" mode="detail" />
 						</div>
 						<div v-if="page.createdAt != page.updatedAt">
 							<i class="ph-alarm ph-bold"></i>
 							{{ i18n.ts.updatedAt }}:
-							<Time :time="page.updatedAt" mode="detail" />
+							<MkTime :time="page.updatedAt" mode="detail" />
 						</div>
 					</div>
 					<div class="_block main">
@@ -46,23 +45,23 @@
 											class="ph-link-simple ph-bold ph-lg"
 										/>
 									</button>
-									<A
+									<MkA
 										v-tooltip="i18n.ts._pages.viewSource"
 										:to="`/@${username}/pages/${pageName}/view-source`"
 										class="menu _button"
 										style="transform: translateY(2px)"
 										><i class="ph-code ph-bold ph-lg"
-									/></A>
+									/></MkA>
 									<template
 										v-if="$i && $i.id === page.userId"
 									>
-										<A
+										<MkA
 											v-tooltip="i18n.ts._pages.editPage"
 											class="menu _button"
 											:to="`/pages/edit/${page.id}`"
 											style="transform: translateY(2px)"
 											><i class="ph-pencil ph-bold ph-lg"
-										/></A>
+										/></MkA>
 										<button
 											v-if="$i.pinnedPageId === page.id"
 											v-tooltip="i18n.ts.unpin"
@@ -92,7 +91,7 @@
 						</div>
 						<div class="actions">
 							<div class="like">
-								<Button
+								<MkButton
 									v-if="page.isLiked"
 									v-tooltip="i18n.ts._pages.unlike"
 									class="button"
@@ -103,9 +102,9 @@
 										v-if="page.likedCount > 0"
 										class="count"
 										>{{ page.likedCount }}</span
-									></Button
+									></MkButton
 								>
-								<Button
+								<MkButton
 									v-else
 									v-tooltip="i18n.ts._pages.like"
 									class="button"
@@ -115,7 +114,7 @@
 										v-if="page.likedCount > 0"
 										class="count"
 										>{{ page.likedCount }}</span
-									></Button
+									></MkButton
 								>
 							</div>
 							<div class="other">
@@ -142,15 +141,15 @@
 								</button>
 							</div>
 							<div class="user">
-								<Avatar :user="page.user" class="avatar" />
+								<MkAvatar :user="page.user" class="avatar" />
 								<div class="name">
-									<UserName
+									<MkUserName
 										:user="page.user"
 										style="display: block"
 									/>
-									<Acct :user="page.user" />
+									<MkAcct :user="page.user" />
 								</div>
-								<FollowButton
+								<MkFollowButton
 									v-if="!$i || $i.id != page.user.id"
 									:user="page.user"
 									:inline="true"
@@ -161,15 +160,15 @@
 							</div>
 						</div>
 						<!-- <div class="links">
-						<A :to="`/@${username}/pages/${pageName}/view-source`" class="link">{{ i18n.ts._pages.viewSource }}</A>
+						<MkA :to="`/@${username}/pages/${pageName}/view-source`" class="link">{{ i18n.ts._pages.viewSource }}</MkA>
 						<template v-if="$i && $i.id === page.userId">
-							<A :to="`/pages/edit/${page.id}`" class="link">{{ i18n.ts._pages.editThisPage }}</A>
+							<MkA :to="`/pages/edit/${page.id}`" class="link">{{ i18n.ts._pages.editThisPage }}</MkA>
 							<button v-if="$i.pinnedPageId === page.id" class="link _textButton" @click="pin(false)">{{ i18n.ts.unpin }}</button>
 							<button v-else class="link _textButton" @click="pin(true)">{{ i18n.ts.pin }}</button>
 						</template>
 					</div> -->
 					</div>
-					<Container
+					<MkContainer
 						:max-height="300"
 						:foldable="true"
 						:expanded="false"
@@ -179,36 +178,36 @@
 							><i class="ph-clock ph-bold ph-lg"></i>
 							{{ i18n.ts.recentPosts }}</template
 						>
-						<Pagination
+						<MkPagination
 							v-slot="{ items }"
 							:pagination="otherPostsPagination"
 						>
-							<PagePreview
+							<MkPagePreview
 								v-for="page in items"
 								:key="page.id"
 								:page="page"
 								class="_gap"
 							/>
-						</Pagination>
-					</Container>
+						</MkPagination>
+					</MkContainer>
 				</div>
-				<Error v-else-if="error" @retry="fetchPage()" />
-				<Loading v-else />
+				<MkError v-else-if="error" @retry="fetchPage()" />
+				<MkLoading v-else />
 			</transition>
-		</Spacer>
-	</StickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { computed, watch } from "vue";
-import XPage from "@/components/page/Page.vue";
-import Button from "@/components/Button.vue";
+import XPage from "@/components/page/page.vue";
+import MkButton from "@/components/MkButton.vue";
 import * as os from "@/os";
 import { url } from "@/config";
-import FollowButton from "@/components/FollowButton.vue";
-import Container from "@/components/Container.vue";
-import Pagination from "@/components/Pagination.vue";
-import PagePreview from "@/components/PagePreview.vue";
+import MkFollowButton from "@/components/MkFollowButton.vue";
+import MkContainer from "@/components/MkContainer.vue";
+import MkPagination from "@/components/MkPagination.vue";
+import MkPagePreview from "@/components/MkPagePreview.vue";
 import { i18n } from "@/i18n";
 import copyToClipboard from "@/scripts/copy-to-clipboard";
 import { definePageMetadata } from "@/scripts/page-metadata";
@@ -316,7 +315,7 @@ definePageMetadata(
 						title: page.title || page.name,
 						text: page.summary,
 					},
-			  }
+				}
 			: null,
 	),
 );
@@ -327,7 +326,6 @@ definePageMetadata(
 .fade-leave-active {
 	transition: opacity 0.125s ease;
 }
-
 .fade-enter-from,
 .fade-leave-to {
 	opacity: 0;
diff --git a/packages/client/src/pages/Pages.vue b/packages/client/src/pages/pages.vue
similarity index 85%
rename from packages/client/src/pages/Pages.vue
rename to packages/client/src/pages/pages.vue
index c055dd62c..6b051f683 100644
--- a/packages/client/src/pages/Pages.vue
+++ b/packages/client/src/pages/pages.vue
@@ -1,13 +1,12 @@
 <template>
-	<StickyContainer>
-		<template #header>
-			<PageHeader
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
 				v-model:tab="tab"
 				:actions="headerActions"
 				:tabs="headerTabs"
-			/>
-		</template>
-		<Spacer :content-max="700">
+		/></template>
+		<MkSpacer :content-max="700">
 			<swiper
 				:round-lengths="true"
 				:touch-angle="25"
@@ -26,67 +25,67 @@
 			>
 				<swiper-slide>
 					<div class="rknalgpo">
-						<Pagination
+						<MkPagination
 							v-slot="{ items }"
 							:pagination="featuredPagesPagination"
 						>
-							<PagePreview
+							<MkPagePreview
 								v-for="page in items"
 								:key="page.id"
 								class="ckltabjg"
 								:page="page"
 							/>
-						</Pagination>
+						</MkPagination>
 					</div>
 				</swiper-slide>
 				<swiper-slide>
 					<div class="rknalgpo liked">
-						<Pagination
+						<MkPagination
 							v-slot="{ items }"
 							:pagination="likedPagesPagination"
 						>
-							<PagePreview
+							<MkPagePreview
 								v-for="like in items"
 								:key="like.page.id"
 								class="ckltabjg"
 								:page="like.page"
 							/>
-						</Pagination>
+						</MkPagination>
 					</div>
 				</swiper-slide>
 				<swiper-slide>
 					<div class="rknalgpo my">
 						<div class="buttoncontainer">
-							<Button class="new primary" @click="create()"
+							<MkButton class="new primary" @click="create()"
 								><i class="ph-plus ph-bold ph-lg"></i>
-								{{ i18n.ts._pages.newPage }}</Button
+								{{ i18n.ts._pages.newPage }}</MkButton
 							>
 						</div>
-						<Pagination
+						<MkPagination
 							v-slot="{ items }"
 							:pagination="myPagesPagination"
 						>
-							<PagePreview
+							<MkPagePreview
 								v-for="mypage in items"
 								:key="mypage.id"
 								class="ckltabjg"
 								:page="mypage"
 							/>
-						</Pagination>
+						</MkPagination>
 					</div>
 				</swiper-slide>
 			</swiper>
-		</Spacer>
-	</StickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { computed, watch, onMounted } from "vue";
 import { Virtual } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/vue";
-import PagePreview from "@/components/PagePreview.vue";
-import Pagination from "@/components/Pagination.vue";
-import Button from "@/components/Button.vue";
+import MkPagePreview from "@/components/MkPagePreview.vue";
+import MkPagination from "@/components/MkPagination.vue";
+import MkButton from "@/components/MkButton.vue";
 import { useRouter } from "@/router";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
diff --git a/packages/client/src/pages/Preview.vue b/packages/client/src/pages/preview.vue
similarity index 88%
rename from packages/client/src/pages/Preview.vue
rename to packages/client/src/pages/preview.vue
index 2f9c4afa4..cfec4bd38 100644
--- a/packages/client/src/pages/Preview.vue
+++ b/packages/client/src/pages/preview.vue
@@ -1,12 +1,12 @@
 <template>
 	<div class="graojtoi">
-		<Sample />
+		<MkSample />
 	</div>
 </template>
 
 <script lang="ts" setup>
 import { computed } from "vue";
-import Sample from "@/components/Sample.vue";
+import MkSample from "@/components/MkSample.vue";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 
diff --git a/packages/client/src/pages/RegistryKeys.vue b/packages/client/src/pages/registry.keys.vue
similarity index 76%
rename from packages/client/src/pages/RegistryKeys.vue
rename to packages/client/src/pages/registry.keys.vue
index d52481af9..bdc258489 100644
--- a/packages/client/src/pages/RegistryKeys.vue
+++ b/packages/client/src/pages/registry.keys.vue
@@ -1,23 +1,23 @@
 <template>
-	<StickyContainer>
-		<template #header>
-			<PageHeader :actions="headerActions" :tabs="headerTabs" />
-		</template>
-		<Spacer :content-max="600" :margin-min="16">
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
+		/></template>
+		<MkSpacer :content-max="600" :margin-min="16">
 			<FormSplit>
-				<KeyValue class="_formBlock">
+				<MkKeyValue class="_formBlock">
 					<template #key>{{ i18n.ts._registry.domain }}</template>
 					<template #value>{{ i18n.ts.system }}</template>
-				</KeyValue>
-				<KeyValue class="_formBlock">
+				</MkKeyValue>
+				<MkKeyValue class="_formBlock">
 					<template #key>{{ i18n.ts._registry.scope }}</template>
 					<template #value>{{ scope.join("/") }}</template>
-				</KeyValue>
+				</MkKeyValue>
 			</FormSplit>
 
-			<Button primary @click="createKey">{{
+			<MkButton primary @click="createKey">{{
 				i18n.ts._registry.createKey
-			}}</Button>
+			}}</MkButton>
 
 			<FormSection v-if="keys">
 				<template #label>{{ i18n.ts.keys }}</template>
@@ -35,8 +35,8 @@
 					>
 				</div>
 			</FormSection>
-		</Spacer>
-	</StickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
@@ -45,11 +45,11 @@ import JSON5 from "json5";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
-import FormLink from "@/components/form/Link.vue";
-import FormSection from "@/components/form/Section.vue";
-import Button from "@/components/Button.vue";
-import KeyValue from "@/components/KeyValue.vue";
-import FormSplit from "@/components/form/Split.vue";
+import FormLink from "@/components/form/link.vue";
+import FormSection from "@/components/form/section.vue";
+import MkButton from "@/components/MkButton.vue";
+import MkKeyValue from "@/components/MkKeyValue.vue";
+import FormSplit from "@/components/form/split.vue";
 
 const props = defineProps<{
 	path: string;
diff --git a/packages/client/src/pages/RegistryValue.vue b/packages/client/src/pages/registry.value.vue
similarity index 70%
rename from packages/client/src/pages/RegistryValue.vue
rename to packages/client/src/pages/registry.value.vue
index e2fe42c00..b95061c7e 100644
--- a/packages/client/src/pages/RegistryValue.vue
+++ b/packages/client/src/pages/registry.value.vue
@@ -1,27 +1,27 @@
 <template>
-	<StickyContainer>
-		<template #header>
-			<PageHeader :actions="headerActions" :tabs="headerTabs" />
-		</template>
-		<Spacer :content-max="600" :margin-min="16">
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
+		/></template>
+		<MkSpacer :content-max="600" :margin-min="16">
 			<FormInfo warn>{{
 				i18n.ts.editTheseSettingsMayBreakAccount
 			}}</FormInfo>
 
 			<template v-if="value">
 				<FormSplit>
-					<KeyValue class="_formBlock">
+					<MkKeyValue class="_formBlock">
 						<template #key>{{ i18n.ts._registry.domain }}</template>
 						<template #value>{{ i18n.ts.system }}</template>
-					</KeyValue>
-					<KeyValue class="_formBlock">
+					</MkKeyValue>
+					<MkKeyValue class="_formBlock">
 						<template #key>{{ i18n.ts._registry.scope }}</template>
 						<template #value>{{ scope.join("/") }}</template>
-					</KeyValue>
-					<KeyValue class="_formBlock">
+					</MkKeyValue>
+					<MkKeyValue class="_formBlock">
 						<template #key>{{ i18n.ts._registry.key }}</template>
 						<template #value>{{ key }}</template>
-					</KeyValue>
+					</MkKeyValue>
 				</FormSplit>
 
 				<FormTextarea
@@ -32,25 +32,25 @@
 					<template #label>{{ i18n.ts.value }} (JSON)</template>
 				</FormTextarea>
 
-				<Button class="_formBlock" primary @click="save"
+				<MkButton class="_formBlock" primary @click="save"
 					><i class="ph-floppy-disk-back ph-bold ph-lg"></i>
-					{{ i18n.ts.save }}</Button
+					{{ i18n.ts.save }}</MkButton
 				>
 
-				<KeyValue class="_formBlock">
+				<MkKeyValue class="_formBlock">
 					<template #key>{{ i18n.ts.updatedAt }}</template>
 					<template #value
-						><Time :time="value.updatedAt" mode="detail"
+						><MkTime :time="value.updatedAt" mode="detail"
 					/></template>
-				</KeyValue>
+				</MkKeyValue>
 
-				<Button danger @click="del"
+				<MkButton danger @click="del"
 					><i class="ph-trash ph-bold ph-lg"></i>
-					{{ i18n.ts.delete }}</Button
+					{{ i18n.ts.delete }}</MkButton
 				>
 			</template>
-		</Spacer>
-	</StickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
@@ -59,13 +59,13 @@ import JSON5 from "json5";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
-import FormLink from "@/components/form/Link.vue";
-import FormSection from "@/components/form/Section.vue";
-import Button from "@/components/Button.vue";
-import KeyValue from "@/components/KeyValue.vue";
-import FormTextarea from "@/components/form/Textarea.vue";
-import FormSplit from "@/components/form/Split.vue";
-import FormInfo from "@/components/Info.vue";
+import FormLink from "@/components/form/link.vue";
+import FormSection from "@/components/form/section.vue";
+import MkButton from "@/components/MkButton.vue";
+import MkKeyValue from "@/components/MkKeyValue.vue";
+import FormTextarea from "@/components/form/textarea.vue";
+import FormSplit from "@/components/form/split.vue";
+import FormInfo from "@/components/MkInfo.vue";
 
 const props = defineProps<{
 	path: string;
diff --git a/packages/client/src/pages/Registry.vue b/packages/client/src/pages/registry.vue
similarity index 78%
rename from packages/client/src/pages/Registry.vue
rename to packages/client/src/pages/registry.vue
index a46cd8511..7bb300c99 100644
--- a/packages/client/src/pages/Registry.vue
+++ b/packages/client/src/pages/registry.vue
@@ -1,12 +1,12 @@
 <template>
-	<StickyContainer>
-		<template #header>
-			<PageHeader :actions="headerActions" :tabs="headerTabs" />
-		</template>
-		<Spacer :content-max="600" :margin-min="16">
-			<Button primary @click="createKey">{{
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
+		/></template>
+		<MkSpacer :content-max="600" :margin-min="16">
+			<MkButton primary @click="createKey">{{
 				i18n.ts._registry.createKey
-			}}</Button>
+			}}</MkButton>
 
 			<FormSection v-if="scopes">
 				<template #label>{{ i18n.ts.system }}</template>
@@ -19,8 +19,8 @@
 					>
 				</div>
 			</FormSection>
-		</Spacer>
-	</StickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
@@ -29,9 +29,9 @@ import JSON5 from "json5";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
-import FormLink from "@/components/form/Link.vue";
-import FormSection from "@/components/form/Section.vue";
-import Button from "@/components/Button.vue";
+import FormLink from "@/components/form/link.vue";
+import FormSection from "@/components/form/section.vue";
+import MkButton from "@/components/MkButton.vue";
 
 let scopes = $ref(null);
 
diff --git a/packages/client/src/pages/ResetPassword.vue b/packages/client/src/pages/reset-password.vue
similarity index 80%
rename from packages/client/src/pages/ResetPassword.vue
rename to packages/client/src/pages/reset-password.vue
index c19bab849..395bf11f9 100644
--- a/packages/client/src/pages/ResetPassword.vue
+++ b/packages/client/src/pages/reset-password.vue
@@ -1,9 +1,9 @@
 <template>
-	<StickyContainer>
-		<template #header>
-			<PageHeader :actions="headerActions" :tabs="headerTabs" />
-		</template>
-		<Spacer
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
+		/></template>
+		<MkSpacer
 			v-if="token"
 			:content-max="700"
 			:margin-min="16"
@@ -25,14 +25,14 @@
 					i18n.ts.save
 				}}</FormButton>
 			</div>
-		</Spacer>
-	</StickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { defineAsyncComponent, onMounted } from "vue";
-import FormInput from "@/components/form/Input.vue";
-import FormButton from "@/components/Button.vue";
+import FormInput from "@/components/form/input.vue";
+import FormButton from "@/components/MkButton.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { mainRouter } from "@/router";
@@ -56,7 +56,7 @@ onMounted(() => {
 	if (props.token == null) {
 		os.popup(
 			defineAsyncComponent(
-				() => import("@/components/ForgotPassword.vue"),
+				() => import("@/components/MkForgotPassword.vue"),
 			),
 			{},
 			{},
diff --git a/packages/client/src/pages/Scratchpad.vue b/packages/client/src/pages/scratchpad.vue
similarity index 93%
rename from packages/client/src/pages/Scratchpad.vue
rename to packages/client/src/pages/scratchpad.vue
index 54ed700a3..77b4bf835 100644
--- a/packages/client/src/pages/Scratchpad.vue
+++ b/packages/client/src/pages/scratchpad.vue
@@ -8,15 +8,15 @@
 				:highlight="highlighter"
 				:line-numbers="false"
 			/>
-			<Button
+			<MkButton
 				style="position: absolute; top: 8px; right: 8px"
 				primary
 				@click="run()"
 				><i class="ph-play ph-bold ph-lg"></i
-			></Button>
+			></MkButton>
 		</div>
 
-		<Container :foldable="true" class="_gap">
+		<MkContainer :foldable="true" class="_gap">
 			<template #header>{{ i18n.ts.output }}</template>
 			<div class="bepmlvbi">
 				<div
@@ -28,7 +28,7 @@
 					{{ log.text }}
 				</div>
 			</div>
-		</Container>
+		</MkContainer>
 
 		<div class="_gap">
 			{{ i18n.ts.scratchpadDescription }}
@@ -46,8 +46,8 @@ import "prismjs/themes/prism-okaidia.css";
 import { PrismEditor } from "vue-prism-editor";
 import "vue-prism-editor/dist/prismeditor.min.css";
 import { AiScript, parse, utils } from "@syuilo/aiscript";
-import Container from "@/components/Container.vue";
-import Button from "@/components/Button.vue";
+import MkContainer from "@/components/MkContainer.vue";
+import MkButton from "@/components/MkButton.vue";
 import { createAiScriptEnv } from "@/scripts/aiscript/api";
 import * as os from "@/os";
 import { $i } from "@/account";
diff --git a/packages/client/src/pages/Search.vue b/packages/client/src/pages/search.vue
similarity index 86%
rename from packages/client/src/pages/Search.vue
rename to packages/client/src/pages/search.vue
index d65f002be..24043fbb1 100644
--- a/packages/client/src/pages/Search.vue
+++ b/packages/client/src/pages/search.vue
@@ -1,14 +1,13 @@
 <template>
-	<StickyContainer>
-		<template #header>
-			<PageHeader
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
 				v-model:tab="tab"
 				:actions="headerActions"
 				:tabs="headerTabs"
 				:display-back-button="true"
-			/>
-		</template>
-		<Spacer :content-max="800">
+		/></template>
+		<MkSpacer :content-max="800">
 			<swiper
 				:round-lengths="true"
 				:touch-angle="25"
@@ -30,10 +29,7 @@
 						<XNotes ref="notes" :pagination="notesPagination" />
 					</template>
 					<template v-else>
-						<transition
-							:name="$store.state.animation ? 'zoom' : ''"
-							appear
-						>
+						<transition :name="$store.state.animation ? 'zoom' : ''" appear>
 							<div class="_fullinfo" ref="notes">
 								<img
 									:src="instance.images.info"
@@ -41,7 +37,7 @@
 									alt="Info"
 								/>
 								<div>
-									{{ i18n.ts.searchNotLoggedIn_1 }}<br />
+									{{ i18n.ts.searchNotLoggedIn_1 }}<br>
 									{{ i18n.ts.searchNotLoggedIn_2 }}
 								</div>
 							</div>
@@ -56,16 +52,16 @@
 					/>
 				</swiper-slide>
 			</swiper>
-		</Spacer>
-	</StickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { computed, watch, onMounted } from "vue";
 import { Virtual } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/vue";
-import XNotes from "@/components/Notes.vue";
-import XUserList from "@/components/UserList.vue";
+import XNotes from "@/components/MkNotes.vue";
+import XUserList from "@/components/MkUserList.vue";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import { defaultStore } from "@/store";
@@ -73,7 +69,7 @@ import { deviceKind } from "@/scripts/device-kind";
 import { $i } from "@/account";
 import "swiper/scss";
 import "swiper/scss/virtual";
-import { instance } from "@/instance";
+import {instance} from "@/instance";
 
 const props = defineProps<{
 	query: string;
diff --git a/packages/client/src/pages/settings/2faQrDialog.vue b/packages/client/src/pages/settings/2fa.qrdialog.vue
similarity index 82%
rename from packages/client/src/pages/settings/2faQrDialog.vue
rename to packages/client/src/pages/settings/2fa.qrdialog.vue
index f14c63fbb..5f14d069e 100644
--- a/packages/client/src/pages/settings/2faQrDialog.vue
+++ b/packages/client/src/pages/settings/2fa.qrdialog.vue
@@ -1,5 +1,5 @@
 <template>
-	<Modal
+	<MkModal
 		ref="dialogEl"
 		:prefer-type="'dialog'"
 		:z-priority="'low'"
@@ -36,23 +36,23 @@
 				><img :class="$style.qr" :src="twoFactorData.qr"
 			/></a>
 			<div style="max-width: 610px">
-				<KeyValue :copy="twoFactorData.url">
+				<MkKeyValue :copy="twoFactorData.url">
 					<template #key>{{ i18n.ts._2fa.step2Url }}</template>
 					<template #value>{{ twoFactorData.url }}</template>
-				</KeyValue>
+				</MkKeyValue>
 			</div>
 			<div class="_flexList">
-				<Button primary @click="ok">{{ i18n.ts.next }}</Button>
-				<Button @click="cancel">{{ i18n.ts.cancel }}</Button>
+				<MkButton primary @click="ok">{{ i18n.ts.next }}</MkButton>
+				<MkButton @click="cancel">{{ i18n.ts.cancel }}</MkButton>
 			</div>
 		</div>
-	</Modal>
+	</MkModal>
 </template>
 
 <script lang="ts" setup>
-import Button from "@/components/Button.vue";
-import Modal from "@/components/Modal.vue";
-import KeyValue from "@/components/KeyValue.vue";
+import MkButton from "@/components/MkButton.vue";
+import MkModal from "@/components/MkModal.vue";
+import MkKeyValue from "@/components/MkKeyValue.vue";
 import { i18n } from "@/i18n";
 
 defineProps<{
diff --git a/packages/client/src/pages/settings/2fa.vue b/packages/client/src/pages/settings/2fa.vue
index 14e1c851e..4a1598e16 100644
--- a/packages/client/src/pages/settings/2fa.vue
+++ b/packages/client/src/pages/settings/2fa.vue
@@ -3,7 +3,7 @@
 		<template #label>{{ i18n.ts["2fa"] }}</template>
 
 		<div v-if="$i" class="_gaps_s">
-			<Folder>
+			<MkFolder>
 				<template #icon
 					><i
 						class="ph-shield-check ph-bold ph-lg"
@@ -15,32 +15,32 @@
 				<div v-if="$i.twoFactorEnabled" class="_gaps_s">
 					<div v-text="i18n.ts._2fa.alreadyRegistered" />
 					<template v-if="$i.securityKeysList.length > 0">
-						<Button @click="renewTOTP"
+						<MkButton @click="renewTOTP"
 							><i
 								class="ph-shield-check ph-bold ph-lg"
 								style="margin-right: 0.5rem"
 							></i
-							>{{ i18n.ts._2fa.renewTOTP }}</Button
+							>{{ i18n.ts._2fa.renewTOTP }}</MkButton
 						>
-						<Info>{{ i18n.ts._2fa.whyTOTPOnlyRenew }}</Info>
+						<MkInfo>{{ i18n.ts._2fa.whyTOTPOnlyRenew }}</MkInfo>
 					</template>
-					<Button v-else @click="unregisterTOTP"
+					<MkButton v-else @click="unregisterTOTP"
 						><i
 							class="ph-shield-slash ph-bold ph-lg"
 							style="margin-right: 0.5rem"
 						></i
-						>{{ i18n.ts.unregister }}</Button
+						>{{ i18n.ts.unregister }}</MkButton
 					>
 				</div>
 
-				<Button
+				<MkButton
 					v-else-if="!twoFactorData && !$i.twoFactorEnabled"
 					@click="registerTOTP"
-					>{{ i18n.ts._2fa.registerTOTP }}</Button
+					>{{ i18n.ts._2fa.registerTOTP }}</MkButton
 				>
-			</Folder>
+			</MkFolder>
 
-			<Folder>
+			<MkFolder>
 				<template #icon
 					><i
 						class="ph-key ph-bold ph-lg"
@@ -49,32 +49,32 @@
 				></template>
 				<template #label>{{ i18n.ts.securityKeyAndPasskey }}</template>
 				<div class="_gaps_s">
-					<Info>
+					<MkInfo>
 						{{ i18n.ts._2fa.securityKeyInfo }}<br />
 						<br />
 						{{ i18n.ts._2fa.chromePasskeyNotSupported }}
-					</Info>
+					</MkInfo>
 
-					<Info v-if="!supportsCredentials" warn>
+					<MkInfo v-if="!supportsCredentials" warn>
 						{{ i18n.ts._2fa.securityKeyNotSupported }}
-					</Info>
+					</MkInfo>
 
-					<Info
+					<MkInfo
 						v-else-if="supportsCredentials && !$i.twoFactorEnabled"
 						warn
 					>
 						{{ i18n.ts._2fa.registerTOTPBeforeKey }}
-					</Info>
+					</MkInfo>
 
 					<template v-else>
-						<Button primary @click="addSecurityKey"
+						<MkButton primary @click="addSecurityKey"
 							><i
 								class="ph-key ph-bold ph-lg"
 								style="margin-right: 0.5rem"
 							></i
-							>{{ i18n.ts._2fa.registerSecurityKey }}</Button
+							>{{ i18n.ts._2fa.registerSecurityKey }}</MkButton
 						>
-						<Folder
+						<MkFolder
 							v-for="key in $i.securityKeysList"
 							:key="key.id"
 						>
@@ -83,23 +83,23 @@
 								{{ `${i18n.ts.lastUsedDate}: ${key.lastUsed}` }}
 							</p>
 							<div class="_flexList">
-								<Button @click="renameKey(key)"
+								<MkButton @click="renameKey(key)"
 									><i
 										class="ph-pencil-line ph-bold ph-lg"
 									></i>
-									{{ i18n.ts.rename }}</Button
+									{{ i18n.ts.rename }}</MkButton
 								>
-								<Button danger @click="unregisterKey(key)"
+								<MkButton danger @click="unregisterKey(key)"
 									><i class="ph-trash ph-bold ph-lg"></i>
-									{{ i18n.ts.unregister }}</Button
+									{{ i18n.ts.unregister }}</MkButton
 								>
 							</div>
-						</Folder>
+						</MkFolder>
 					</template>
 				</div>
-			</Folder>
+			</MkFolder>
 
-			<Switch
+			<MkSwitch
 				:disabled="
 					!$i.twoFactorEnabled || $i.securityKeysList.length === 0
 				"
@@ -110,7 +110,7 @@
 				<template #caption>{{
 					i18n.ts.passwordLessLoginDescription
 				}}</template>
-			</Switch>
+			</MkSwitch>
 		</div>
 	</FormSection>
 </template>
@@ -119,11 +119,11 @@
 import { ref, defineAsyncComponent } from "vue";
 import { hostname } from "@/config";
 import { byteify, hexify, stringify } from "@/scripts/2fa";
-import Button from "@/components/Button.vue";
-import Info from "@/components/Info.vue";
-import Switch from "@/components/form/Switch.vue";
-import FormSection from "@/components/form/Section.vue";
-import Folder from "@/components/Folder.vue";
+import MkButton from "@/components/MkButton.vue";
+import MkInfo from "@/components/MkInfo.vue";
+import MkSwitch from "@/components/form/switch.vue";
+import FormSection from "@/components/form/section.vue";
+import MkFolder from "@/components/MkFolder.vue";
 import * as os from "@/os";
 import { $i } from "@/account";
 import { i18n } from "@/i18n";
@@ -158,7 +158,7 @@ async function registerTOTP() {
 
 	const qrdialog = await new Promise<boolean>((res) => {
 		os.popup(
-			defineAsyncComponent(() => import("./2faQrDialog.vue")),
+			defineAsyncComponent(() => import("./2fa.qrdialog.vue")),
 			{
 				twoFactorData,
 			},
diff --git a/packages/client/src/pages/settings/AccountInfo.vue b/packages/client/src/pages/settings/account-info.vue
similarity index 71%
rename from packages/client/src/pages/settings/AccountInfo.vue
rename to packages/client/src/pages/settings/account-info.vue
index cb57d9d51..faaee07db 100644
--- a/packages/client/src/pages/settings/AccountInfo.vue
+++ b/packages/client/src/pages/settings/account-info.vue
@@ -1,74 +1,74 @@
 <template>
 	<div class="_formRoot">
-		<KeyValue>
+		<MkKeyValue>
 			<template #key>ID</template>
 			<template #value
 				><span class="_monospace">{{ $i.id }}</span></template
 			>
-		</KeyValue>
+		</MkKeyValue>
 
 		<FormSection>
-			<KeyValue>
+			<MkKeyValue>
 				<template #key>{{ i18n.ts.registeredDate }}</template>
 				<template #value
-					><Time :time="$i.createdAt" mode="detail"
+					><MkTime :time="$i.createdAt" mode="detail"
 				/></template>
-			</KeyValue>
+			</MkKeyValue>
 		</FormSection>
 
 		<FormSection v-if="stats">
 			<template #label>{{ i18n.ts.statistics }}</template>
-			<KeyValue oneline style="margin: 1em 0">
+			<MkKeyValue oneline style="margin: 1em 0">
 				<template #key>{{ i18n.ts.notesCount }}</template>
 				<template #value>{{ number(stats.notesCount) }}</template>
-			</KeyValue>
-			<KeyValue oneline style="margin: 1em 0">
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
 				<template #key>{{ i18n.ts.repliesCount }}</template>
 				<template #value>{{ number(stats.repliesCount) }}</template>
-			</KeyValue>
-			<KeyValue oneline style="margin: 1em 0">
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
 				<template #key>{{ i18n.ts.renotesCount }}</template>
 				<template #value>{{ number(stats.renotesCount) }}</template>
-			</KeyValue>
-			<KeyValue oneline style="margin: 1em 0">
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
 				<template #key>{{ i18n.ts.repliedCount }}</template>
 				<template #value>{{ number(stats.repliedCount) }}</template>
-			</KeyValue>
-			<KeyValue oneline style="margin: 1em 0">
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
 				<template #key>{{ i18n.ts.renotedCount }}</template>
 				<template #value>{{ number(stats.renotedCount) }}</template>
-			</KeyValue>
-			<KeyValue oneline style="margin: 1em 0">
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
 				<template #key>{{ i18n.ts.pollVotesCount }}</template>
 				<template #value>{{ number(stats.pollVotesCount) }}</template>
-			</KeyValue>
-			<KeyValue oneline style="margin: 1em 0">
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
 				<template #key>{{ i18n.ts.pollVotedCount }}</template>
 				<template #value>{{ number(stats.pollVotedCount) }}</template>
-			</KeyValue>
-			<KeyValue oneline style="margin: 1em 0">
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
 				<template #key>{{ i18n.ts.sentReactionsCount }}</template>
 				<template #value>{{
 					number(stats.sentReactionsCount)
 				}}</template>
-			</KeyValue>
-			<KeyValue oneline style="margin: 1em 0">
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
 				<template #key>{{ i18n.ts.receivedReactionsCount }}</template>
 				<template #value>{{
 					number(stats.receivedReactionsCount)
 				}}</template>
-			</KeyValue>
-			<KeyValue oneline style="margin: 1em 0">
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
 				<template #key>{{ i18n.ts.noteFavoritesCount }}</template>
 				<template #value>{{
 					number(stats.noteFavoritesCount)
 				}}</template>
-			</KeyValue>
-			<KeyValue oneline style="margin: 1em 0">
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
 				<template #key>{{ i18n.ts.followingCount }}</template>
 				<template #value>{{ number(stats.followingCount) }}</template>
-			</KeyValue>
-			<KeyValue oneline style="margin: 1em 0">
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
 				<template #key
 					>{{ i18n.ts.followingCount }} ({{
 						i18n.ts.local
@@ -77,8 +77,8 @@
 				<template #value>{{
 					number(stats.localFollowingCount)
 				}}</template>
-			</KeyValue>
-			<KeyValue oneline style="margin: 1em 0">
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
 				<template #key
 					>{{ i18n.ts.followingCount }} ({{
 						i18n.ts.remote
@@ -87,12 +87,12 @@
 				<template #value>{{
 					number(stats.remoteFollowingCount)
 				}}</template>
-			</KeyValue>
-			<KeyValue oneline style="margin: 1em 0">
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
 				<template #key>{{ i18n.ts.followersCount }}</template>
 				<template #value>{{ number(stats.followersCount) }}</template>
-			</KeyValue>
-			<KeyValue oneline style="margin: 1em 0">
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
 				<template #key
 					>{{ i18n.ts.followersCount }} ({{
 						i18n.ts.local
@@ -101,8 +101,8 @@
 				<template #value>{{
 					number(stats.localFollowersCount)
 				}}</template>
-			</KeyValue>
-			<KeyValue oneline style="margin: 1em 0">
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
 				<template #key
 					>{{ i18n.ts.followersCount }} ({{
 						i18n.ts.remote
@@ -111,71 +111,71 @@
 				<template #value>{{
 					number(stats.remoteFollowersCount)
 				}}</template>
-			</KeyValue>
-			<KeyValue oneline style="margin: 1em 0">
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
 				<template #key>{{ i18n.ts.pageLikesCount }}</template>
 				<template #value>{{ number(stats.pageLikesCount) }}</template>
-			</KeyValue>
-			<KeyValue oneline style="margin: 1em 0">
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
 				<template #key>{{ i18n.ts.pageLikedCount }}</template>
 				<template #value>{{ number(stats.pageLikedCount) }}</template>
-			</KeyValue>
-			<KeyValue oneline style="margin: 1em 0">
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
 				<template #key>{{ i18n.ts.driveFilesCount }}</template>
 				<template #value>{{ number(stats.driveFilesCount) }}</template>
-			</KeyValue>
-			<KeyValue oneline style="margin: 1em 0">
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
 				<template #key>{{ i18n.ts.driveUsage }}</template>
 				<template #value>{{ bytes(stats.driveUsage) }}</template>
-			</KeyValue>
+			</MkKeyValue>
 		</FormSection>
 
 		<FormSection>
 			<template #label>{{ i18n.ts.other }}</template>
-			<KeyValue oneline style="margin: 1em 0">
+			<MkKeyValue oneline style="margin: 1em 0">
 				<template #key>emailVerified</template>
 				<template #value>{{
 					$i.emailVerified ? i18n.ts.yes : i18n.ts.no
 				}}</template>
-			</KeyValue>
-			<KeyValue oneline style="margin: 1em 0">
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
 				<template #key>twoFactorEnabled</template>
 				<template #value>{{
 					$i.twoFactorEnabled ? i18n.ts.yes : i18n.ts.no
 				}}</template>
-			</KeyValue>
-			<KeyValue oneline style="margin: 1em 0">
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
 				<template #key>securityKeys</template>
 				<template #value>{{
 					$i.securityKeys ? i18n.ts.yes : i18n.ts.no
 				}}</template>
-			</KeyValue>
-			<KeyValue oneline style="margin: 1em 0">
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
 				<template #key>usePasswordLessLogin</template>
 				<template #value>{{
 					$i.usePasswordLessLogin ? i18n.ts.yes : i18n.ts.no
 				}}</template>
-			</KeyValue>
-			<KeyValue oneline style="margin: 1em 0">
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
 				<template #key>isModerator</template>
 				<template #value>{{
 					$i.isModerator ? i18n.ts.yes : i18n.ts.no
 				}}</template>
-			</KeyValue>
-			<KeyValue oneline style="margin: 1em 0">
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
 				<template #key>isAdmin</template>
 				<template #value>{{
 					$i.isAdmin ? i18n.ts.yes : i18n.ts.no
 				}}</template>
-			</KeyValue>
+			</MkKeyValue>
 		</FormSection>
 	</div>
 </template>
 
 <script lang="ts" setup>
 import { onMounted, ref } from "vue";
-import FormSection from "@/components/form/Section.vue";
-import KeyValue from "@/components/KeyValue.vue";
+import FormSection from "@/components/form/section.vue";
+import MkKeyValue from "@/components/MkKeyValue.vue";
 import * as os from "@/os";
 import number from "@/filters/number";
 import bytes from "@/filters/bytes";
diff --git a/packages/client/src/pages/settings/Accounts.vue b/packages/client/src/pages/settings/accounts.vue
similarity index 89%
rename from packages/client/src/pages/settings/Accounts.vue
rename to packages/client/src/pages/settings/accounts.vue
index fb449d745..52a9fb15a 100644
--- a/packages/client/src/pages/settings/Accounts.vue
+++ b/packages/client/src/pages/settings/accounts.vue
@@ -13,14 +13,14 @@
 				@click="menu(account, $event)"
 			>
 				<div class="avatar">
-					<Avatar :user="account" class="avatar" disableLink />
+					<MkAvatar :user="account" class="avatar" disableLink />
 				</div>
 				<div class="body">
 					<div class="name">
-						<UserName :user="account" />
+						<MkUserName :user="account" />
 					</div>
 					<div class="acct">
-						<Acct :user="account" />
+						<MkAcct :user="account" />
 					</div>
 				</div>
 			</button>
@@ -30,8 +30,8 @@
 
 <script lang="ts" setup>
 import { defineAsyncComponent, ref } from "vue";
-import FormSuspense from "@/components/form/Suspense.vue";
-import FormButton from "@/components/Button.vue";
+import FormSuspense from "@/components/form/suspense.vue";
+import FormButton from "@/components/MkButton.vue";
 import * as os from "@/os";
 import {
 	getAccounts,
@@ -108,7 +108,7 @@ function removeAccount(account) {
 
 function addExistingAccount() {
 	os.popup(
-		defineAsyncComponent(() => import("@/components/SigninDialog.vue")),
+		defineAsyncComponent(() => import("@/components/MkSigninDialog.vue")),
 		{},
 		{
 			done: (res) => {
@@ -122,7 +122,7 @@ function addExistingAccount() {
 
 function createAccount() {
 	os.popup(
-		defineAsyncComponent(() => import("@/components/SignupDialog.vue")),
+		defineAsyncComponent(() => import("@/components/MkSignupDialog.vue")),
 		{},
 		{
 			done: (res) => {
diff --git a/packages/client/src/pages/settings/Api.vue b/packages/client/src/pages/settings/api.vue
similarity index 88%
rename from packages/client/src/pages/settings/Api.vue
rename to packages/client/src/pages/settings/api.vue
index 3f9197925..910ebaa57 100644
--- a/packages/client/src/pages/settings/Api.vue
+++ b/packages/client/src/pages/settings/api.vue
@@ -17,8 +17,8 @@
 
 <script lang="ts" setup>
 import { defineAsyncComponent, ref } from "vue";
-import FormLink from "@/components/form/Link.vue";
-import FormButton from "@/components/Button.vue";
+import FormLink from "@/components/form/link.vue";
+import FormButton from "@/components/MkButton.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
@@ -28,7 +28,7 @@ const isDesktop = ref(window.innerWidth >= 1100);
 function generateToken() {
 	os.popup(
 		defineAsyncComponent(
-			() => import("@/components/TokenGenerateWindow.vue"),
+			() => import("@/components/MkTokenGenerateWindow.vue"),
 		),
 		{},
 		{
diff --git a/packages/client/src/pages/settings/Apps.vue b/packages/client/src/pages/settings/apps.vue
similarity index 91%
rename from packages/client/src/pages/settings/Apps.vue
rename to packages/client/src/pages/settings/apps.vue
index 0ae6fb4a9..7ff99b922 100644
--- a/packages/client/src/pages/settings/Apps.vue
+++ b/packages/client/src/pages/settings/apps.vue
@@ -28,11 +28,11 @@
 						<div class="description">{{ token.description }}</div>
 						<div class="_keyValue">
 							<div>{{ i18n.ts.installedDate }}:</div>
-							<div><Time :time="token.createdAt" /></div>
+							<div><MkTime :time="token.createdAt" /></div>
 						</div>
 						<div class="_keyValue">
 							<div>{{ i18n.ts.lastUsedDate }}:</div>
-							<div><Time :time="token.lastUsedAt" /></div>
+							<div><MkTime :time="token.lastUsedAt" /></div>
 						</div>
 						<div class="actions">
 							<button class="_button" @click="revoke(token)">
@@ -56,11 +56,11 @@
 
 <script lang="ts" setup>
 import { ref } from "vue";
-import FormPagination from "@/components/Pagination.vue";
+import FormPagination from "@/components/MkPagination.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
-import { instance } from "@/instance";
+import {instance} from "@/instance";
 
 const list = ref<any>(null);
 
diff --git a/packages/client/src/pages/settings/CustomCss.vue b/packages/client/src/pages/settings/custom-css.vue
similarity index 91%
rename from packages/client/src/pages/settings/CustomCss.vue
rename to packages/client/src/pages/settings/custom-css.vue
index a261e6c3f..e24ff33a9 100644
--- a/packages/client/src/pages/settings/CustomCss.vue
+++ b/packages/client/src/pages/settings/custom-css.vue
@@ -16,8 +16,8 @@
 
 <script lang="ts" setup>
 import { ref, watch } from "vue";
-import FormTextarea from "@/components/form/Textarea.vue";
-import FormInfo from "@/components/Info.vue";
+import FormTextarea from "@/components/form/textarea.vue";
+import FormInfo from "@/components/MkInfo.vue";
 import * as os from "@/os";
 import { unisonReload } from "@/scripts/unison-reload";
 import { i18n } from "@/i18n";
diff --git a/packages/client/src/pages/settings/CustomKatexMacro.vue b/packages/client/src/pages/settings/custom-katex-macro.vue
similarity index 90%
rename from packages/client/src/pages/settings/CustomKatexMacro.vue
rename to packages/client/src/pages/settings/custom-katex-macro.vue
index 0ea40dd1b..67818f9e0 100644
--- a/packages/client/src/pages/settings/CustomKatexMacro.vue
+++ b/packages/client/src/pages/settings/custom-katex-macro.vue
@@ -22,9 +22,9 @@
 
 <script lang="ts" setup>
 import { ref, watch, computed } from "vue";
-import FormTextarea from "@/components/form/Textarea.vue";
-import FormInfo from "@/components/Info.vue";
-import FormSwitch from "@/components/form/Switch.vue";
+import FormTextarea from "@/components/form/textarea.vue";
+import FormInfo from "@/components/MkInfo.vue";
+import FormSwitch from "@/components/form/switch.vue";
 import * as os from "@/os";
 import { unisonReload } from "@/scripts/unison-reload";
 import { i18n } from "@/i18n";
diff --git a/packages/client/src/pages/settings/Deck.vue b/packages/client/src/pages/settings/deck.vue
similarity index 86%
rename from packages/client/src/pages/settings/Deck.vue
rename to packages/client/src/pages/settings/deck.vue
index b8194b3b0..fc18a65d6 100644
--- a/packages/client/src/pages/settings/Deck.vue
+++ b/packages/client/src/pages/settings/deck.vue
@@ -20,10 +20,10 @@
 
 <script lang="ts" setup>
 import { computed, watch } from "vue";
-import FormSwitch from "@/components/form/Switch.vue";
-import FormLink from "@/components/form/Link.vue";
-import FormRadios from "@/components/form/Radios.vue";
-import FormInput from "@/components/form/Input.vue";
+import FormSwitch from "@/components/form/switch.vue";
+import FormLink from "@/components/form/link.vue";
+import FormRadios from "@/components/form/radios.vue";
+import FormInput from "@/components/form/input.vue";
 import { deckStore } from "@/ui/deck/deck-store";
 import * as os from "@/os";
 import { unisonReload } from "@/scripts/unison-reload";
diff --git a/packages/client/src/pages/settings/DeleteAccount.vue b/packages/client/src/pages/settings/delete-account.vue
similarity index 93%
rename from packages/client/src/pages/settings/DeleteAccount.vue
rename to packages/client/src/pages/settings/delete-account.vue
index de6346554..574806c08 100644
--- a/packages/client/src/pages/settings/DeleteAccount.vue
+++ b/packages/client/src/pages/settings/delete-account.vue
@@ -20,8 +20,8 @@
 </template>
 
 <script lang="ts" setup>
-import FormInfo from "@/components/Info.vue";
-import FormButton from "@/components/Button.vue";
+import FormInfo from "@/components/MkInfo.vue";
+import FormButton from "@/components/MkButton.vue";
 import * as os from "@/os";
 import { signout } from "@/account";
 import { i18n } from "@/i18n";
diff --git a/packages/client/src/pages/settings/Drive.vue b/packages/client/src/pages/settings/drive.vue
similarity index 86%
rename from packages/client/src/pages/settings/Drive.vue
rename to packages/client/src/pages/settings/drive.vue
index 9b5de171f..b79029edf 100644
--- a/packages/client/src/pages/settings/Drive.vue
+++ b/packages/client/src/pages/settings/drive.vue
@@ -3,25 +3,23 @@
 		<FormSection v-if="!fetching">
 			<template #label>{{ i18n.ts.usageAmount }}</template>
 			<div class="_formBlock uawsfosz">
-				<div class="meter">
-					<div :style="meterStyle"></div>
-				</div>
+				<div class="meter"><div :style="meterStyle"></div></div>
 			</div>
 			<FormSplit>
-				<KeyValue class="_formBlock">
+				<MkKeyValue class="_formBlock">
 					<template #key>{{ i18n.ts.capacity }}</template>
 					<template #value>{{ bytes(capacity, 1) }}</template>
-				</KeyValue>
-				<KeyValue class="_formBlock">
+				</MkKeyValue>
+				<MkKeyValue class="_formBlock">
 					<template #key>{{ i18n.ts.inUse }}</template>
 					<template #value>{{ bytes(usage, 1) }}</template>
-				</KeyValue>
+				</MkKeyValue>
 			</FormSplit>
 		</FormSection>
 
 		<FormSection>
 			<template #label>{{ i18n.ts.statistics }}</template>
-			<Chart
+			<MkChart
 				src="per-user-drive"
 				:args="{ user: $i }"
 				span="day"
@@ -63,16 +61,16 @@
 <script lang="ts" setup>
 import { computed, ref } from "vue";
 import tinycolor from "tinycolor2";
-import FormLink from "@/components/form/Link.vue";
-import FormButton from "@/components/Button.vue";
-import FormSwitch from "@/components/form/Switch.vue";
-import FormSection from "@/components/form/Section.vue";
-import KeyValue from "@/components/KeyValue.vue";
-import FormSplit from "@/components/form/Split.vue";
+import FormLink from "@/components/form/link.vue";
+import FormButton from "@/components/MkButton.vue";
+import FormSwitch from "@/components/form/switch.vue";
+import FormSection from "@/components/form/section.vue";
+import MkKeyValue from "@/components/MkKeyValue.vue";
+import FormSplit from "@/components/form/split.vue";
 import * as os from "@/os";
 import bytes from "@/filters/bytes";
 import { defaultStore } from "@/store";
-import Chart from "@/components/Chart.vue";
+import MkChart from "@/components/MkChart.vue";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import { $i } from "@/account";
diff --git a/packages/client/src/pages/settings/Email.vue b/packages/client/src/pages/settings/email.vue
similarity index 96%
rename from packages/client/src/pages/settings/Email.vue
rename to packages/client/src/pages/settings/email.vue
index 3c7abba34..089a9d0a9 100644
--- a/packages/client/src/pages/settings/Email.vue
+++ b/packages/client/src/pages/settings/email.vue
@@ -62,9 +62,9 @@
 
 <script lang="ts" setup>
 import { onMounted, ref, watch } from "vue";
-import FormSection from "@/components/form/Section.vue";
-import FormInput from "@/components/form/Input.vue";
-import FormSwitch from "@/components/form/Switch.vue";
+import FormSection from "@/components/form/section.vue";
+import FormInput from "@/components/form/input.vue";
+import FormSwitch from "@/components/form/switch.vue";
 import * as os from "@/os";
 import { $i } from "@/account";
 import { i18n } from "@/i18n";
diff --git a/packages/client/src/pages/settings/General.vue b/packages/client/src/pages/settings/general.vue
similarity index 93%
rename from packages/client/src/pages/settings/General.vue
rename to packages/client/src/pages/settings/general.vue
index 3d500064f..895c2dbbd 100644
--- a/packages/client/src/pages/settings/General.vue
+++ b/packages/client/src/pages/settings/general.vue
@@ -8,9 +8,9 @@
 			<template #caption>
 				<I18n :src="i18n.ts.i18nInfo" tag="span">
 					<template #link>
-						<Link
+						<MkLink
 							url="https://translate.iceshrimp.dev/engage/iceshrimp/"
-							>Weblate</Link
+							>Weblate</MkLink
 						>
 					</template>
 				</I18n>
@@ -119,8 +119,8 @@
 			<FormSwitch
 				v-model="disableShowingAnimatedImages"
 				class="_formBlock"
-				>{{ i18n.ts.disableShowingAnimatedImages }}
-			</FormSwitch>
+				>{{ i18n.ts.disableShowingAnimatedImages }}</FormSwitch
+			>
 			<FormRadios v-model="fontSize" class="_formBlock">
 				<template #label>{{ i18n.ts.fontSize }}</template>
 				<option :value="null">
@@ -195,11 +195,11 @@
 				v-if="$i?.isAdmin"
 				v-model="showAdminUpdates"
 				class="_formBlock"
-				>{{ i18n.ts.showAdminUpdates }}
-			</FormSwitch>
-			<FormSwitch v-model="alwaysExpandCws" class="_formBlock">{{
-				i18n.ts.alwaysExpandCws
-			}}</FormSwitch>
+				>{{ i18n.ts.showAdminUpdates }}</FormSwitch
+			>
+      <FormSwitch v-model="alwaysExpandCws" class="_formBlock">{{
+        i18n.ts.alwaysExpandCws
+      }}</FormSwitch>
 
 			<FormSelect v-model="cwStyle" class="_formBlock">
 				<template #label>{{ i18n.ts.cwStyle }}</template>
@@ -261,13 +261,13 @@
 <script lang="ts" setup>
 import { reactive, computed, ref, watch } from "vue";
 import { $i } from "@/account";
-import FormSwitch from "@/components/form/Switch.vue";
-import FormSelect from "@/components/form/Select.vue";
-import FormRadios from "@/components/form/Radios.vue";
-import FormRange from "@/components/form/Range.vue";
-import FormSection from "@/components/form/Section.vue";
-import FormLink from "@/components/form/Link.vue";
-import Link from "@/components/Link.vue";
+import FormSwitch from "@/components/form/switch.vue";
+import FormSelect from "@/components/form/select.vue";
+import FormRadios from "@/components/form/radios.vue";
+import FormRange from "@/components/form/range.vue";
+import FormSection from "@/components/form/section.vue";
+import FormLink from "@/components/form/link.vue";
+import MkLink from "@/components/MkLink.vue";
 import { langs } from "@/config";
 import { defaultStore } from "@/store";
 import * as os from "@/os";
@@ -335,7 +335,7 @@ const showFixedPostForm = computed(
 	defaultStore.makeGetterSetter("showFixedPostForm"),
 );
 const alwaysExpandCws = computed(
-	defaultStore.makeGetterSetter("alwaysExpandCws"),
+    defaultStore.makeGetterSetter("alwaysExpandCws"),
 );
 const numberOfPageCache = computed(
 	defaultStore.makeGetterSetter("numberOfPageCache"),
@@ -367,7 +367,9 @@ const showAdminUpdates = computed(
 const showTimelineReplies = computed(
 	defaultStore.makeGetterSetter("showTimelineReplies"),
 );
-const cwStyle = computed(defaultStore.makeGetterSetter("cwStyle"));
+const cwStyle = computed(
+	defaultStore.makeGetterSetter("cwStyle"),
+);
 
 watch(swipeOnDesktop, () => {
 	defaultStore.set("swipeOnMobile", true);
@@ -413,7 +415,7 @@ watch(
 		autoplayMfm,
 		expandOnNoteClick,
 		cwStyle,
-		alwaysExpandCws,
+		alwaysExpandCws
 	],
 	async () => {
 		await reloadAsk();
diff --git a/packages/client/src/pages/settings/ImportExport.vue b/packages/client/src/pages/settings/import-export.vue
similarity index 90%
rename from packages/client/src/pages/settings/ImportExport.vue
rename to packages/client/src/pages/settings/import-export.vue
index 3e451e960..3204bf752 100644
--- a/packages/client/src/pages/settings/ImportExport.vue
+++ b/packages/client/src/pages/settings/import-export.vue
@@ -7,13 +7,13 @@
 				<template #icon
 					><i class="ph-download-simple ph-bold ph-lg"></i
 				></template>
-				<Button
+				<MkButton
 					primary
 					:class="$style.button"
 					inline
 					@click="exportNotes()"
 					><i class="ph-download-simple ph-bold ph-lg"></i>
-					{{ i18n.ts.export }}</Button
+					{{ i18n.ts.export }}</MkButton
 				>
 			</FormFolder>
 			<FormFolder class="_formBlock">
@@ -28,13 +28,13 @@
 						Twitter (soon)
 					</option>
 				</FormRadios>
-				<Button
+				<MkButton
 					primary
 					:class="$style.button"
 					inline
 					@click="importPosts($event)"
 					><i class="ph-upload-simple ph-bold ph-lg"></i>
-					{{ i18n.ts.import }}</Button
+					{{ i18n.ts.import }}</MkButton
 				>
 			</FormFolder>
 		</FormSection>
@@ -53,13 +53,13 @@
 				<FormSwitch v-model="excludeInactiveUsers" class="_formBlock">
 					{{ i18n.ts._exportOrImport.excludeInactiveUsers }}
 				</FormSwitch>
-				<Button
+				<MkButton
 					primary
 					:class="$style.button"
 					inline
 					@click="exportFollowing()"
 					><i class="ph-download-simple ph-bold ph-lg"></i>
-					{{ i18n.ts.export }}</Button
+					{{ i18n.ts.export }}</MkButton
 				>
 			</FormFolder>
 			<FormFolder class="_formBlock">
@@ -67,13 +67,13 @@
 				<template #icon
 					><i class="ph-upload-simple ph-bold ph-lg"></i
 				></template>
-				<Button
+				<MkButton
 					primary
 					:class="$style.button"
 					inline
 					@click="importFollowing($event)"
 					><i class="ph-upload-simple ph-bold ph-lg"></i>
-					{{ i18n.ts.import }}</Button
+					{{ i18n.ts.import }}</MkButton
 				>
 			</FormFolder>
 		</FormSection>
@@ -84,13 +84,13 @@
 				<template #icon
 					><i class="ph-download-simple ph-bold ph-lg"></i
 				></template>
-				<Button
+				<MkButton
 					primary
 					:class="$style.button"
 					inline
 					@click="exportUserLists()"
 					><i class="ph-download-simple ph-bold ph-lg"></i>
-					{{ i18n.ts.export }}</Button
+					{{ i18n.ts.export }}</MkButton
 				>
 			</FormFolder>
 			<FormFolder class="_formBlock">
@@ -98,13 +98,13 @@
 				<template #icon
 					><i class="ph-upload-simple ph-bold ph-lg"></i
 				></template>
-				<Button
+				<MkButton
 					primary
 					:class="$style.button"
 					inline
 					@click="importUserLists($event)"
 					><i class="ph-upload-simple ph-bold ph-lg"></i>
-					{{ i18n.ts.import }}</Button
+					{{ i18n.ts.import }}</MkButton
 				>
 			</FormFolder>
 		</FormSection>
@@ -115,13 +115,13 @@
 				<template #icon
 					><i class="ph-download-simple ph-bold ph-lg"></i
 				></template>
-				<Button
+				<MkButton
 					primary
 					:class="$style.button"
 					inline
 					@click="exportMuting()"
 					><i class="ph-download-simple ph-bold ph-lg"></i>
-					{{ i18n.ts.export }}</Button
+					{{ i18n.ts.export }}</MkButton
 				>
 			</FormFolder>
 			<FormFolder class="_formBlock">
@@ -129,13 +129,13 @@
 				<template #icon
 					><i class="ph-upload-simple ph-bold ph-lg"></i
 				></template>
-				<Button
+				<MkButton
 					primary
 					:class="$style.button"
 					inline
 					@click="importMuting($event)"
 					><i class="ph-upload-simple ph-bold ph-lg"></i>
-					{{ i18n.ts.import }}</Button
+					{{ i18n.ts.import }}</MkButton
 				>
 			</FormFolder>
 		</FormSection>
@@ -148,13 +148,13 @@
 				<template #icon
 					><i class="ph-download-simple ph-bold ph-lg"></i
 				></template>
-				<Button
+				<MkButton
 					primary
 					:class="$style.button"
 					inline
 					@click="exportBlocking()"
 					><i class="ph-download-simple ph-bold ph-lg"></i>
-					{{ i18n.ts.export }}</Button
+					{{ i18n.ts.export }}</MkButton
 				>
 			</FormFolder>
 			<FormFolder class="_formBlock">
@@ -162,13 +162,13 @@
 				<template #icon
 					><i class="ph-upload-simple ph-bold ph-lg"></i
 				></template>
-				<Button
+				<MkButton
 					primary
 					:class="$style.button"
 					inline
 					@click="importBlocking($event)"
 					><i class="ph-upload-simple ph-bold ph-lg"></i>
-					{{ i18n.ts.import }}</Button
+					{{ i18n.ts.import }}</MkButton
 				>
 			</FormFolder>
 		</FormSection>
@@ -177,11 +177,11 @@
 
 <script lang="ts" setup>
 import { ref } from "vue";
-import Button from "@/components/Button.vue";
-import FormSection from "@/components/form/Section.vue";
-import FormFolder from "@/components/form/Folder.vue";
-import FormSwitch from "@/components/form/Switch.vue";
-import FormRadios from "@/components/form/Radios.vue";
+import MkButton from "@/components/MkButton.vue";
+import FormSection from "@/components/form/section.vue";
+import FormFolder from "@/components/form/folder.vue";
+import FormSwitch from "@/components/form/switch.vue";
+import FormRadios from "@/components/form/radios.vue";
 import * as os from "@/os";
 import { selectFile } from "@/scripts/select-file";
 import { i18n } from "@/i18n";
diff --git a/packages/client/src/pages/settings/Index.vue b/packages/client/src/pages/settings/index.vue
similarity index 94%
rename from packages/client/src/pages/settings/Index.vue
rename to packages/client/src/pages/settings/index.vue
index 70435cb1a..def40a277 100644
--- a/packages/client/src/pages/settings/Index.vue
+++ b/packages/client/src/pages/settings/index.vue
@@ -1,13 +1,12 @@
 <template>
-	<StickyContainer>
-		<template #header>
-			<PageHeader
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
 				:actions="headerActions"
 				:tabs="headerTabs"
 				:display-back-button="true"
-			/>
-		</template>
-		<Spacer :content-max="900" :margin-min="20" :margin-max="32">
+		/></template>
+		<MkSpacer :content-max="900" :margin-min="20" :margin-max="32">
 			<div ref="el" class="vvcocwet" :class="{ wide: !narrow }">
 				<div class="body">
 					<div
@@ -15,16 +14,16 @@
 						class="nav"
 					>
 						<div class="baaadecd">
-							<Info v-if="emailNotConfigured" warn class="info"
+							<MkInfo v-if="emailNotConfigured" warn class="info"
 								>{{ i18n.ts.emailNotConfiguredWarning }}
-								<A to="/settings/email" class="_link">{{
+								<MkA to="/settings/email" class="_link">{{
 									i18n.ts.configure
-								}}</A>
-							</Info>
-							<SuperMenu
+								}}</MkA></MkInfo
+							>
+							<MkSuperMenu
 								:def="menuDef"
 								:grid="narrow"
-							></SuperMenu>
+							></MkSuperMenu>
 						</div>
 					</div>
 					<section
@@ -37,8 +36,8 @@
 					</section>
 				</div>
 			</div>
-		</Spacer>
-	</StickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script setup lang="ts">
@@ -55,8 +54,8 @@ import {
 	watch,
 } from "vue";
 import { i18n } from "@/i18n";
-import Info from "@/components/Info.vue";
-import SuperMenu from "@/components/SuperMenu.vue";
+import MkInfo from "@/components/MkInfo.vue";
+import MkSuperMenu from "@/components/MkSuperMenu.vue";
 import { scroll } from "@/scripts/scroll";
 import { signout, $i } from "@/account";
 import { unisonReload } from "@/scripts/unison-reload";
@@ -337,7 +336,6 @@ definePageMetadata(INFO);
 			padding: var(--margin);
 			border-radius: var(--radius);
 		}
-
 		> .nav {
 			.baaadecd {
 				> .info {
diff --git a/packages/client/src/pages/settings/InstanceMute.vue b/packages/client/src/pages/settings/instance-mute.vue
similarity index 79%
rename from packages/client/src/pages/settings/InstanceMute.vue
rename to packages/client/src/pages/settings/instance-mute.vue
index bde72dc2f..4c8ce7a3d 100644
--- a/packages/client/src/pages/settings/InstanceMute.vue
+++ b/packages/client/src/pages/settings/instance-mute.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="_formRoot">
-		<Info>{{ i18n.ts._instanceMute.title }}</Info>
+		<MkInfo>{{ i18n.ts._instanceMute.title }}</MkInfo>
 		<FormTextarea v-model="instanceMutes" class="_formBlock">
 			<template #label>{{ i18n.ts._instanceMute.heading }}</template>
 			<template #caption
@@ -9,18 +9,22 @@
 				}}</template
 			>
 		</FormTextarea>
-		<Button primary :disabled="!changed" class="_formBlock" @click="save()"
+		<MkButton
+			primary
+			:disabled="!changed"
+			class="_formBlock"
+			@click="save()"
 			><i class="ph-floppy-disk-back ph-bold ph-lg"></i>
-			{{ i18n.ts.save }}</Button
+			{{ i18n.ts.save }}</MkButton
 		>
 	</div>
 </template>
 
 <script lang="ts" setup>
 import { ref, watch } from "vue";
-import FormTextarea from "@/components/form/Textarea.vue";
-import Info from "@/components/Info.vue";
-import Button from "@/components/Button.vue";
+import FormTextarea from "@/components/form/textarea.vue";
+import MkInfo from "@/components/MkInfo.vue";
+import MkButton from "@/components/MkButton.vue";
 import * as os from "@/os";
 import { $i } from "@/account";
 import { i18n } from "@/i18n";
diff --git a/packages/client/src/pages/settings/Integration.vue b/packages/client/src/pages/settings/integration.vue
similarity index 88%
rename from packages/client/src/pages/settings/Integration.vue
rename to packages/client/src/pages/settings/integration.vue
index cff870932..ef4182f39 100644
--- a/packages/client/src/pages/settings/Integration.vue
+++ b/packages/client/src/pages/settings/integration.vue
@@ -15,15 +15,15 @@
 					}}</a
 				>
 			</p>
-			<Button
+			<MkButton
 				v-if="integrations.discord"
 				danger
 				@click="disconnectDiscord"
-				>{{ i18n.ts.disconnectService }}</Button
+				>{{ i18n.ts.disconnectService }}</MkButton
 			>
-			<Button v-else primary @click="connectDiscord">{{
+			<MkButton v-else primary @click="connectDiscord">{{
 				i18n.ts.connectService
-			}}</Button>
+			}}</MkButton>
 		</FormSection>
 
 		<FormSection v-if="instance.enableGithubIntegration">
@@ -39,15 +39,15 @@
 					>@{{ integrations.github.login }}</a
 				>
 			</p>
-			<Button
+			<MkButton
 				v-if="integrations.github"
 				danger
 				@click="disconnectGithub"
-				>{{ i18n.ts.disconnectService }}</Button
+				>{{ i18n.ts.disconnectService }}</MkButton
 			>
-			<Button v-else primary @click="connectGithub">{{
+			<MkButton v-else primary @click="connectGithub">{{
 				i18n.ts.connectService
-			}}</Button>
+			}}</MkButton>
 		</FormSection>
 	</div>
 </template>
@@ -55,8 +55,8 @@
 <script lang="ts" setup>
 import { computed, onMounted, ref, watch } from "vue";
 import { apiUrl } from "@/config";
-import FormSection from "@/components/form/Section.vue";
-import Button from "@/components/Button.vue";
+import FormSection from "@/components/form/section.vue";
+import MkButton from "@/components/MkButton.vue";
 import { $i } from "@/account";
 import { instance } from "@/instance";
 import { i18n } from "@/i18n";
diff --git a/packages/client/src/pages/settings/Migration.vue b/packages/client/src/pages/settings/migration.vue
similarity index 89%
rename from packages/client/src/pages/settings/Migration.vue
rename to packages/client/src/pages/settings/migration.vue
index 91d4ff1a9..d33616f51 100644
--- a/packages/client/src/pages/settings/Migration.vue
+++ b/packages/client/src/pages/settings/migration.vue
@@ -39,10 +39,9 @@
 				inline
 				style="margin-right: 8px"
 				@click="add"
+				><i class="ph-plus ph-bold ph-lg"></i>
+				{{ i18n.ts.add }}</FormButton
 			>
-				<i class="ph-plus ph-bold ph-lg"></i>
-				{{ i18n.ts.add }}
-			</FormButton>
 			<FormButton class="button" inline primary @click="save">
 				<i class="ph-floppy-disk-back ph-bold ph-lg"></i>
 				{{ i18n.ts.save }}
@@ -52,10 +51,10 @@
 </template>
 
 <script lang="ts" setup>
-import FormSection from "@/components/form/Section.vue";
-import FormInput from "@/components/form/Input.vue";
-import FormButton from "@/components/Button.vue";
-import FormInfo from "@/components/Info.vue";
+import FormSection from "@/components/form/section.vue";
+import FormInput from "@/components/form/input.vue";
+import FormButton from "@/components/MkButton.vue";
+import FormInfo from "@/components/MkInfo.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
diff --git a/packages/client/src/pages/settings/MuteBlock.vue b/packages/client/src/pages/settings/mute-block.vue
similarity index 63%
rename from packages/client/src/pages/settings/MuteBlock.vue
rename to packages/client/src/pages/settings/mute-block.vue
index 2455e8ef2..81e9ec875 100644
--- a/packages/client/src/pages/settings/MuteBlock.vue
+++ b/packages/client/src/pages/settings/mute-block.vue
@@ -1,50 +1,50 @@
 <template>
 	<div class="_formRoot">
-		<Tab v-model="tab" style="margin-bottom: var(--margin)">
+		<MkTab v-model="tab" style="margin-bottom: var(--margin)">
 			<option value="mute">{{ i18n.ts.mutedUsers }}</option>
 			<option value="block">{{ i18n.ts.blockedUsers }}</option>
-		</Tab>
+		</MkTab>
 		<div v-if="tab === 'mute'">
-			<Pagination :pagination="mutingPagination" class="muting">
-				<template #empty>
-					<FormInfo>{{ i18n.ts.noUsers }}</FormInfo>
-				</template>
+			<MkPagination :pagination="mutingPagination" class="muting">
+				<template #empty
+					><FormInfo>{{ i18n.ts.noUsers }}</FormInfo></template
+				>
 				<template #default="{ items }">
 					<FormLink
 						v-for="mute in items"
 						:key="mute.id"
 						:to="userPage(mute.mutee)"
 					>
-						<Acct :user="mute.mutee" />
+						<MkAcct :user="mute.mutee" />
 					</FormLink>
 				</template>
-			</Pagination>
+			</MkPagination>
 		</div>
 		<div v-if="tab === 'block'">
-			<Pagination :pagination="blockingPagination" class="blocking">
-				<template #empty>
-					<FormInfo>{{ i18n.ts.noUsers }}</FormInfo>
-				</template>
+			<MkPagination :pagination="blockingPagination" class="blocking">
+				<template #empty
+					><FormInfo>{{ i18n.ts.noUsers }}</FormInfo></template
+				>
 				<template #default="{ items }">
 					<FormLink
 						v-for="block in items"
 						:key="block.id"
 						:to="userPage(block.blockee)"
 					>
-						<Acct :user="block.blockee" />
+						<MkAcct :user="block.blockee" />
 					</FormLink>
 				</template>
-			</Pagination>
+			</MkPagination>
 		</div>
 	</div>
 </template>
 
 <script lang="ts" setup>
 import {} from "vue";
-import Pagination from "@/components/Pagination.vue";
-import Tab from "@/components/Tab.vue";
-import FormInfo from "@/components/Info.vue";
-import FormLink from "@/components/form/Link.vue";
+import MkPagination from "@/components/MkPagination.vue";
+import MkTab from "@/components/MkTab.vue";
+import FormInfo from "@/components/MkInfo.vue";
+import FormLink from "@/components/form/link.vue";
 import { userPage } from "@/filters/user";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
diff --git a/packages/client/src/pages/settings/Navbar.vue b/packages/client/src/pages/settings/navbar.vue
similarity index 87%
rename from packages/client/src/pages/settings/Navbar.vue
rename to packages/client/src/pages/settings/navbar.vue
index 4066a9e7e..d192a5e95 100644
--- a/packages/client/src/pages/settings/Navbar.vue
+++ b/packages/client/src/pages/settings/navbar.vue
@@ -2,7 +2,7 @@
 	<div class="_gaps_m">
 		<FormSlot>
 			<template #label>{{ i18n.ts.navbar }}</template>
-			<Container :showHeader="false">
+			<MkContainer :showHeader="false">
 				<Sortable
 					v-model="items"
 					itemKey="id"
@@ -43,20 +43,20 @@
 						</div>
 					</template>
 				</Sortable>
-			</Container>
+			</MkContainer>
 		</FormSlot>
 		<div class="buttons">
-			<Button inline @click="addItem"
+			<MkButton inline @click="addItem"
 				><i class="ph-plus ph-bold ph-lg"></i>
-				{{ i18n.ts.addItem }}</Button
+				{{ i18n.ts.addItem }}</MkButton
 			>
-			<Button inline danger @click="reset"
+			<MkButton inline danger @click="reset"
 				><i class="ph-arrow-clockwise ph-bold ph-lg"></i>
-				{{ i18n.ts.default }}</Button
+				{{ i18n.ts.default }}</MkButton
 			>
-			<Button inline primary class="save" @click="save"
+			<MkButton inline primary class="save" @click="save"
 				><i class="ph-floppy-disk ph-bold ph-lg"></i>
-				{{ i18n.ts.save }}</Button
+				{{ i18n.ts.save }}</MkButton
 			>
 		</div>
 
@@ -69,7 +69,7 @@
 				{{ i18n.ts._menuDisplay.sideIcon }}
 			</option>
 			<!--<option value="top">{{ i18n.ts._menuDisplay.top }}</option>-->
-			<!-- <Radio v-model="menuDisplay" value="hide" disabled>{{ i18n.ts._menuDisplay.hide }}</Radio>-->
+			<!-- <MkRadio v-model="menuDisplay" value="hide" disabled>{{ i18n.ts._menuDisplay.hide }}</MkRadio>-->
 			<!-- TODO: サイドバーを完全に隠せるようにすると、別途ハンバーガーボタンのようなものをUIに表示する必要があり面倒 -->
 		</FormRadios>
 	</div>
@@ -77,10 +77,10 @@
 
 <script lang="ts" setup>
 import { computed, defineAsyncComponent, ref, watch } from "vue";
-import FormRadios from "@/components/form/Radios.vue";
-import Button from "@/components/Button.vue";
-import FormSlot from "@/components/form/Slot.vue";
-import Container from "@/components/Container.vue";
+import FormRadios from "@/components/form/radios.vue";
+import MkButton from "@/components/MkButton.vue";
+import FormSlot from "@/components/form/slot.vue";
+import MkContainer from "@/components/MkContainer.vue";
 import * as os from "@/os";
 import { navbarItemDef } from "@/navbar";
 import { defaultStore } from "@/store";
diff --git a/packages/client/src/pages/settings/Notifications.vue b/packages/client/src/pages/settings/notifications.vue
similarity index 82%
rename from packages/client/src/pages/settings/Notifications.vue
rename to packages/client/src/pages/settings/notifications.vue
index 9fa0e42e9..ad90126e7 100644
--- a/packages/client/src/pages/settings/Notifications.vue
+++ b/packages/client/src/pages/settings/notifications.vue
@@ -5,9 +5,11 @@
 			>{{ i18n.ts.notificationSetting }}</FormButton
 		>
 		<FormSection>
-			<ForFormButtonmLink class="_formBlock" @click="readAllNotifications"
-				>{{ i18n.ts.markAsReadAllNotifications }}
-			</ForFormButtonmLink>
+			<ForFormButtonmLink
+				class="_formBlock"
+				@click="readAllNotifications"
+				>{{ i18n.ts.markAsReadAllNotifications }}</ForFormButtonmLink
+			>
 			<FormButton class="_formBlock" @click="readAllUnreadNotes">{{
 				i18n.ts.markAsReadAllUnreadNotes
 			}}</FormButton>
@@ -19,8 +21,8 @@
 			<template #label>{{ i18n.ts.pushNotification }}</template>
 
 			<div class="_gaps_m">
-				<PushNotificationAllowButton ref="allowButton" />
-				<Switch
+				<MkPushNotificationAllowButton ref="allowButton" />
+				<MkSwitch
 					:disabled="!pushRegistrationInServer"
 					:model-value="sendReadMessage"
 					@update:model-value="onChangeSendReadMessage"
@@ -40,7 +42,7 @@
 							}}</template>
 						</I18n>
 					</template>
-				</Switch>
+				</MkSwitch>
 			</div>
 		</FormSection>
 	</div>
@@ -49,17 +51,17 @@
 <script lang="ts" setup>
 import { defineAsyncComponent } from "vue";
 import { notificationTypes } from "iceshrimp-js";
-import FormButton from "@/components/Button.vue";
-import FormLink from "@/components/form/Link.vue";
-import FormSection from "@/components/form/Section.vue";
+import FormButton from "@/components/MkButton.vue";
+import FormLink from "@/components/form/link.vue";
+import FormSection from "@/components/form/section.vue";
 import * as os from "@/os";
 import { $i } from "@/account";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
-import PushNotificationAllowButton from "@/components/PushNotificationAllowButton.vue";
+import MkPushNotificationAllowButton from "@/components/MkPushNotificationAllowButton.vue";
 
 let allowButton =
-	$shallowRef<InstanceType<typeof PushNotificationAllowButton>>();
+	$shallowRef<InstanceType<typeof MkPushNotificationAllowButton>>();
 let pushRegistrationInServer = $computed(
 	() => allowButton?.pushRegistrationInServer,
 );
@@ -85,7 +87,7 @@ function configure() {
 	);
 	os.popup(
 		defineAsyncComponent(
-			() => import("@/components/NotificationSettingWindow.vue"),
+			() => import("@/components/MkNotificationSettingWindow.vue"),
 		),
 		{
 			includingTypes,
diff --git a/packages/client/src/pages/settings/Other.vue b/packages/client/src/pages/settings/other.vue
similarity index 91%
rename from packages/client/src/pages/settings/Other.vue
rename to packages/client/src/pages/settings/other.vue
index 9dff9cd43..6a069493f 100644
--- a/packages/client/src/pages/settings/Other.vue
+++ b/packages/client/src/pages/settings/other.vue
@@ -30,9 +30,9 @@
 
 <script lang="ts" setup>
 import { computed, defineAsyncComponent } from "vue";
-import FormSwitch from "@/components/form/Switch.vue";
-import FormLink from "@/components/form/Link.vue";
-import Button from "@/components/Button.vue";
+import FormSwitch from "@/components/form/switch.vue";
+import FormLink from "@/components/form/link.vue";
+import MkButton from "@/components/MkButton.vue";
 import * as os from "@/os";
 import { popup } from "@/os";
 import { defaultStore } from "@/store";
diff --git a/packages/client/src/pages/settings/PluginInstall.vue b/packages/client/src/pages/settings/plugin.install.vue
similarity index 92%
rename from packages/client/src/pages/settings/PluginInstall.vue
rename to packages/client/src/pages/settings/plugin.install.vue
index c606bf6d9..a38c4a062 100644
--- a/packages/client/src/pages/settings/PluginInstall.vue
+++ b/packages/client/src/pages/settings/plugin.install.vue
@@ -22,9 +22,9 @@ import { defineAsyncComponent, nextTick, ref } from "vue";
 import { AiScript, parse } from "@syuilo/aiscript";
 import { serialize } from "@syuilo/aiscript/built/serializer";
 import { v4 as uuid } from "uuid";
-import FormTextarea from "@/components/form/Textarea.vue";
-import FormButton from "@/components/Button.vue";
-import FormInfo from "@/components/Info.vue";
+import FormTextarea from "@/components/form/textarea.vue";
+import FormButton from "@/components/MkButton.vue";
+import FormInfo from "@/components/MkInfo.vue";
 import * as os from "@/os";
 import { ColdDeviceStorage } from "@/store";
 import { unisonReload } from "@/scripts/unison-reload";
@@ -94,7 +94,9 @@ async function install() {
 					os.popup(
 						defineAsyncComponent(
 							() =>
-								import("@/components/TokenGenerateWindow.vue"),
+								import(
+									"@/components/MkTokenGenerateWindow.vue"
+								),
 						),
 						{
 							title: i18n.ts.tokenRequested,
diff --git a/packages/client/src/pages/settings/Plugin.vue b/packages/client/src/pages/settings/plugin.vue
similarity index 81%
rename from packages/client/src/pages/settings/Plugin.vue
rename to packages/client/src/pages/settings/plugin.vue
index a85b1d977..b5e1b76dc 100644
--- a/packages/client/src/pages/settings/Plugin.vue
+++ b/packages/client/src/pages/settings/plugin.vue
@@ -28,27 +28,30 @@
 					>{{ i18n.ts.makeActive }}</FormSwitch
 				>
 
-				<KeyValue class="_formBlock">
+				<MkKeyValue class="_formBlock">
 					<template #key>{{ i18n.ts.author }}</template>
 					<template #value>{{ plugin.author }}</template>
-				</KeyValue>
-				<KeyValue class="_formBlock">
+				</MkKeyValue>
+				<MkKeyValue class="_formBlock">
 					<template #key>{{ i18n.ts.description }}</template>
 					<template #value>{{ plugin.description }}</template>
-				</KeyValue>
-				<KeyValue class="_formBlock">
+				</MkKeyValue>
+				<MkKeyValue class="_formBlock">
 					<template #key>{{ i18n.ts.permission }}</template>
 					<template #value>{{ plugin.permission }}</template>
-				</KeyValue>
+				</MkKeyValue>
 
 				<div style="display: flex; gap: var(--margin); flex-wrap: wrap">
-					<Button v-if="plugin.config" inline @click="config(plugin)"
+					<MkButton
+						v-if="plugin.config"
+						inline
+						@click="config(plugin)"
 						><i class="ph-gear-six ph-bold ph-lg"></i>
-						{{ i18n.ts.settings }}</Button
+						{{ i18n.ts.settings }}</MkButton
 					>
-					<Button inline danger @click="uninstall(plugin)"
+					<MkButton inline danger @click="uninstall(plugin)"
 						><i class="ph-trash ph-bold ph-lg"></i>
-						{{ i18n.ts.uninstall }}</Button
+						{{ i18n.ts.uninstall }}</MkButton
 					>
 				</div>
 			</div>
@@ -58,11 +61,11 @@
 
 <script lang="ts" setup>
 import { nextTick, ref } from "vue";
-import FormLink from "@/components/form/Link.vue";
-import FormSwitch from "@/components/form/Switch.vue";
-import FormSection from "@/components/form/Section.vue";
-import Button from "@/components/Button.vue";
-import KeyValue from "@/components/KeyValue.vue";
+import FormLink from "@/components/form/link.vue";
+import FormSwitch from "@/components/form/switch.vue";
+import FormSection from "@/components/form/section.vue";
+import MkButton from "@/components/MkButton.vue";
+import MkKeyValue from "@/components/MkKeyValue.vue";
 import * as os from "@/os";
 import { ColdDeviceStorage } from "@/store";
 import { unisonReload } from "@/scripts/unison-reload";
diff --git a/packages/client/src/pages/settings/PreferencesBackups.vue b/packages/client/src/pages/settings/preferences-backups.vue
similarity index 97%
rename from packages/client/src/pages/settings/PreferencesBackups.vue
rename to packages/client/src/pages/settings/preferences-backups.vue
index 11c126df2..f79538821 100644
--- a/packages/client/src/pages/settings/PreferencesBackups.vue
+++ b/packages/client/src/pages/settings/preferences-backups.vue
@@ -1,12 +1,12 @@
 <template>
 	<div class="_formRoot">
 		<div :class="$style.buttons">
-			<Button inline primary @click="saveNew">{{
+			<MkButton inline primary @click="saveNew">{{
 				ts._preferencesBackups.saveNew
-			}}</Button>
-			<Button inline @click="loadFile">{{
+			}}</MkButton>
+			<MkButton inline @click="loadFile">{{
 				ts._preferencesBackups.loadFile
-			}}</Button>
+			}}</MkButton>
 		</div>
 
 		<FormSection>
@@ -48,9 +48,9 @@
 				</div>
 			</template>
 			<div v-else-if="profiles">
-				<Info>{{ ts._preferencesBackups.noBackups }}</Info>
+				<MkInfo>{{ ts._preferencesBackups.noBackups }}</MkInfo>
 			</div>
-			<Loading v-else />
+			<MkLoading v-else />
 		</FormSection>
 	</div>
 </template>
@@ -58,9 +58,9 @@
 <script lang="ts" setup>
 import { computed, onMounted, onUnmounted, useCssModule } from "vue";
 import { v4 as uuid } from "uuid";
-import FormSection from "@/components/form/Section.vue";
-import Button from "@/components/Button.vue";
-import Info from "@/components/Info.vue";
+import FormSection from "@/components/form/section.vue";
+import MkButton from "@/components/MkButton.vue";
+import MkInfo from "@/components/MkInfo.vue";
 import * as os from "@/os";
 import { ColdDeviceStorage, defaultStore } from "@/store";
 import { unisonReload } from "@/scripts/unison-reload";
diff --git a/packages/client/src/pages/settings/Privacy.vue b/packages/client/src/pages/settings/privacy.vue
similarity index 95%
rename from packages/client/src/pages/settings/Privacy.vue
rename to packages/client/src/pages/settings/privacy.vue
index e82581149..08a388bd8 100644
--- a/packages/client/src/pages/settings/Privacy.vue
+++ b/packages/client/src/pages/settings/privacy.vue
@@ -135,10 +135,10 @@
 
 <script lang="ts" setup>
 import {} from "vue";
-import FormSwitch from "@/components/form/Switch.vue";
-import FormSelect from "@/components/form/Select.vue";
-import FormSection from "@/components/form/Section.vue";
-import FormFolder from "@/components/form/Folder.vue";
+import FormSwitch from "@/components/form/switch.vue";
+import FormSelect from "@/components/form/select.vue";
+import FormSection from "@/components/form/section.vue";
+import FormFolder from "@/components/form/folder.vue";
 import * as os from "@/os";
 import { defaultStore } from "@/store";
 import { i18n } from "@/i18n";
diff --git a/packages/client/src/pages/settings/Profile.vue b/packages/client/src/pages/settings/profile.vue
similarity index 87%
rename from packages/client/src/pages/settings/Profile.vue
rename to packages/client/src/pages/settings/profile.vue
index 7bdce1e15..3b94a8248 100644
--- a/packages/client/src/pages/settings/Profile.vue
+++ b/packages/client/src/pages/settings/profile.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="_formRoot">
 		<div v-if="saveButton == true">
-			<Button primary @click="save">{{ i18n.ts.save }}</Button>
+			<MkButton primary @click="save">{{ i18n.ts.save }}</MkButton>
 		</div>
 		<br />
 		<div
@@ -11,23 +11,27 @@
 			}"
 		>
 			<div class="avatar">
-				<Avatar
+				<MkAvatar
 					class="avatar"
 					:user="$i"
 					:disable-link="true"
 					@click="changeAvatar"
 				/>
-				<Button
+				<MkButton
 					primary
 					rounded
 					class="avatarEdit"
 					@click="changeAvatar"
-					>{{ i18n.ts._profile.changeAvatar }}</Button
+					>{{ i18n.ts._profile.changeAvatar }}</MkButton
 				>
 			</div>
-			<Button primary rounded class="bannerEdit" @click="changeBanner">{{
-				i18n.ts._profile.changeBanner
-			}}</Button>
+			<MkButton
+				primary
+				rounded
+				class="bannerEdit"
+				@click="changeBanner"
+				>{{ i18n.ts._profile.changeBanner }}</MkButton
+			>
 		</div>
 
 		<FormInput
@@ -107,17 +111,17 @@
 							>
 						</FormInput>
 					</FormSplit>
-					<Button
+					<MkButton
 						:disabled="fields.length >= 16"
 						inline
 						style="margin-right: 8px"
 						@click="addField"
 						><i class="ph-plus ph-bold ph-lg"></i>
-						{{ i18n.ts.add }}</Button
+						{{ i18n.ts.add }}</MkButton
 					>
-					<Button inline primary @click="saveFields"
+					<MkButton inline primary @click="saveFields"
 						><i class="ph-check ph-bold ph-lg"></i>
-						{{ i18n.ts.save }}</Button
+						{{ i18n.ts.save }}</MkButton
 					>
 				</div>
 			</FormFolder>
@@ -152,21 +156,21 @@
 			}}</template></FormSwitch
 		>
 		<div v-if="saveButton == true">
-			<Button primary @click="save">{{ i18n.ts.save }}</Button>
+			<MkButton primary @click="save">{{ i18n.ts.save }}</MkButton>
 		</div>
 	</div>
 </template>
 
 <script lang="ts" setup>
 import { reactive, watch } from "vue";
-import Button from "@/components/Button.vue";
-import FormInput from "@/components/form/Input.vue";
-import FormTextarea from "@/components/form/Textarea.vue";
-import FormSwitch from "@/components/form/Switch.vue";
-import FormSelect from "@/components/form/Select.vue";
-import FormSplit from "@/components/form/Split.vue";
-import FormFolder from "@/components/form/Folder.vue";
-import FormSlot from "@/components/form/Slot.vue";
+import MkButton from "@/components/MkButton.vue";
+import FormInput from "@/components/form/input.vue";
+import FormTextarea from "@/components/form/textarea.vue";
+import FormSwitch from "@/components/form/switch.vue";
+import FormSelect from "@/components/form/select.vue";
+import FormSplit from "@/components/form/split.vue";
+import FormFolder from "@/components/form/folder.vue";
+import FormSlot from "@/components/form/slot.vue";
 import { selectFile } from "@/scripts/select-file";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
diff --git a/packages/client/src/pages/settings/Reaction.vue b/packages/client/src/pages/settings/reaction.vue
similarity index 90%
rename from packages/client/src/pages/settings/Reaction.vue
rename to packages/client/src/pages/settings/reaction.vue
index 0cc13bc59..29f14fd48 100644
--- a/packages/client/src/pages/settings/Reaction.vue
+++ b/packages/client/src/pages/settings/reaction.vue
@@ -24,7 +24,7 @@
 							class="_button item"
 							@click="remove(item, $event)"
 						>
-							<Emoji
+							<MkEmoji
 								:emoji="item"
 								style="height: 1.7em"
 								class="emoji"
@@ -46,22 +46,22 @@
 			<FormRadios v-model="reactionPickerSkinTone" class="_formBlock">
 				<template #label>{{ i18n.ts.reactionPickerSkinTone }}</template>
 				<option :value="1" :aria-label="i18n.ts._skinTones.yellow">
-					<Emoji style="height: 1.7em" emoji="✌️" />
+					<MkEmoji style="height: 1.7em" emoji="✌️" />
 				</option>
 				<option :value="6" :aria-label="i18n.ts._skinTones.dark">
-					<Emoji style="height: 1.7em" emoji="✌🏿" />
+					<MkEmoji style="height: 1.7em" emoji="✌🏿" />
 				</option>
 				<option :value="5" :aria-label="i18n.ts._skinTones.mediumDark">
-					<Emoji style="height: 1.7em" emoji="✌🏾" />
+					<MkEmoji style="height: 1.7em" emoji="✌🏾" />
 				</option>
 				<option :value="4" :aria-label="i18n.ts._skinTones.medium">
-					<Emoji style="height: 1.7em" emoji="✌🏽" />
+					<MkEmoji style="height: 1.7em" emoji="✌🏽" />
 				</option>
 				<option :value="3" :aria-label="i18n.ts._skinTones.mediumLight">
-					<Emoji style="height: 1.7em" emoji="✌🏼" />
+					<MkEmoji style="height: 1.7em" emoji="✌🏼" />
 				</option>
 				<option :value="2" :aria-label="i18n.ts._skinTones.light">
-					<Emoji style="height: 1.7em" emoji="✌🏻" />
+					<MkEmoji style="height: 1.7em" emoji="✌🏻" />
 				</option>
 			</FormRadios>
 			<FormRadios v-model="reactionPickerSize" class="_formBlock">
@@ -123,11 +123,11 @@
 <script lang="ts" setup>
 import { defineAsyncComponent, watch } from "vue";
 import { VueDraggable } from "vue-draggable-plus";
-import FormRadios from "@/components/form/Radios.vue";
-import FromSlot from "@/components/form/Slot.vue";
-import FormButton from "@/components/Button.vue";
-import FormSection from "@/components/form/Section.vue";
-import FormSwitch from "@/components/form/Switch.vue";
+import FormRadios from "@/components/form/radios.vue";
+import FromSlot from "@/components/form/slot.vue";
+import FormButton from "@/components/MkButton.vue";
+import FormSection from "@/components/form/section.vue";
+import FormSwitch from "@/components/form/switch.vue";
 import * as os from "@/os";
 import { defaultStore } from "@/store";
 import { i18n } from "@/i18n";
@@ -192,7 +192,7 @@ function remove(reaction, ev: MouseEvent) {
 function preview(ev: MouseEvent) {
 	os.popup(
 		defineAsyncComponent(
-			() => import("@/components/EmojiPickerDialog.vue"),
+			() => import("@/components/MkEmojiPickerDialog.vue"),
 		),
 		{
 			asReactionPicker: true,
diff --git a/packages/client/src/pages/settings/Security.vue b/packages/client/src/pages/settings/security.vue
similarity index 86%
rename from packages/client/src/pages/settings/Security.vue
rename to packages/client/src/pages/settings/security.vue
index 91a3460b4..d0979408b 100644
--- a/packages/client/src/pages/settings/Security.vue
+++ b/packages/client/src/pages/settings/security.vue
@@ -2,16 +2,16 @@
 	<div class="_formRoot">
 		<FormSection style="border: none !important">
 			<template #label>{{ i18n.ts.password }}</template>
-			<Button primary @click="change()">{{
+			<MkButton primary @click="change()">{{
 				i18n.ts.changePassword
-			}}</Button>
+			}}</MkButton>
 		</FormSection>
 
 		<X2fa />
 
 		<FormSection>
 			<template #label>{{ i18n.ts.signinHistory }}</template>
-			<Pagination :pagination="pagination" disable-auto-load>
+			<MkPagination :pagination="pagination" disable-auto-load>
 				<template #default="{ items }">
 					<div>
 						<div
@@ -30,19 +30,19 @@
 									class="ph-circle-wavy-warning ph-bold ph-lg icon fail"
 								></i>
 								<code class="ip _monospace">{{ item.ip }}</code>
-								<Time :time="item.createdAt" class="time" />
+								<MkTime :time="item.createdAt" class="time" />
 							</header>
 						</div>
 					</div>
 				</template>
-			</Pagination>
+			</MkPagination>
 		</FormSection>
 
 		<FormSection>
 			<FormSlot>
-				<Button danger @click="regenerateToken"
+				<MkButton danger @click="regenerateToken"
 					><i class="ph-arrows-clockwise ph-bold ph-lg"></i>
-					{{ i18n.ts.regenerateLoginToken }}</Button
+					{{ i18n.ts.regenerateLoginToken }}</MkButton
 				>
 				<template #caption>{{
 					i18n.ts.regenerateLoginTokenDescription
@@ -54,10 +54,10 @@
 
 <script lang="ts" setup>
 import X2fa from "./2fa.vue";
-import FormSection from "@/components/form/Section.vue";
-import FormSlot from "@/components/form/Slot.vue";
-import Button from "@/components/Button.vue";
-import Pagination from "@/components/Pagination.vue";
+import FormSection from "@/components/form/section.vue";
+import FormSlot from "@/components/form/slot.vue";
+import MkButton from "@/components/MkButton.vue";
+import MkPagination from "@/components/MkPagination.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
diff --git a/packages/client/src/pages/settings/Sounds.vue b/packages/client/src/pages/settings/sounds.vue
similarity index 95%
rename from packages/client/src/pages/settings/Sounds.vue
rename to packages/client/src/pages/settings/sounds.vue
index b6411501b..bc890a569 100644
--- a/packages/client/src/pages/settings/Sounds.vue
+++ b/packages/client/src/pages/settings/sounds.vue
@@ -39,9 +39,9 @@
 
 <script lang="ts" setup>
 import { computed, ref } from "vue";
-import FormRange from "@/components/form/Range.vue";
-import FormButton from "@/components/Button.vue";
-import FormSection from "@/components/form/Section.vue";
+import FormRange from "@/components/form/range.vue";
+import FormButton from "@/components/MkButton.vue";
+import FormSection from "@/components/form/section.vue";
 import * as os from "@/os";
 import { ColdDeviceStorage } from "@/store";
 import { playFile } from "@/scripts/sound";
diff --git a/packages/client/src/pages/settings/StatusbarOptions.vue b/packages/client/src/pages/settings/statusbar.statusbar.vue
similarity index 82%
rename from packages/client/src/pages/settings/StatusbarOptions.vue
rename to packages/client/src/pages/settings/statusbar.statusbar.vue
index c3238b1c6..b070c0c7d 100644
--- a/packages/client/src/pages/settings/StatusbarOptions.vue
+++ b/packages/client/src/pages/settings/statusbar.statusbar.vue
@@ -11,13 +11,13 @@
 			<option value="userList">User list timeline</option>
 		</FormSelect>
 
-		<Input v-model="statusbar.name" manual-save class="_formBlock">
+		<MkInput v-model="statusbar.name" manual-save class="_formBlock">
 			<template #label>{{ i18n.ts.label }}</template>
-		</Input>
+		</MkInput>
 
-		<Switch v-model="statusbar.black" class="_formBlock">
+		<MkSwitch v-model="statusbar.black" class="_formBlock">
 			<template #label>Black</template>
-		</Switch>
+		</MkSwitch>
 
 		<FormRadios v-model="statusbar.size" class="_formBlock">
 			<template #label>{{ i18n.ts.size }}</template>
@@ -29,25 +29,25 @@
 		</FormRadios>
 
 		<template v-if="statusbar.type === 'rss'">
-			<Input
+			<MkInput
 				v-model="statusbar.props.url"
 				manual-save
 				class="_formBlock"
 				type="url"
 			>
 				<template #label>URL</template>
-			</Input>
-			<Switch v-model="statusbar.props.shuffle" class="_formBlock">
+			</MkInput>
+			<MkSwitch v-model="statusbar.props.shuffle" class="_formBlock">
 				<template #label>{{ i18n.ts.shuffle }}</template>
-			</Switch>
-			<Input
+			</MkSwitch>
+			<MkInput
 				v-model="statusbar.props.refreshIntervalSec"
 				manual-save
 				class="_formBlock"
 				type="number"
 			>
 				<template #label>{{ i18n.ts.refreshInterval }}</template>
-			</Input>
+			</MkInput>
 			<FormRange
 				v-model="statusbar.props.marqueeDuration"
 				:min="5"
@@ -60,19 +60,22 @@
 					>{{ i18n.ts.fast }} &lt;-&gt; {{ i18n.ts.slow }}</template
 				>
 			</FormRange>
-			<Switch v-model="statusbar.props.marqueeReverse" class="_formBlock">
+			<MkSwitch
+				v-model="statusbar.props.marqueeReverse"
+				class="_formBlock"
+			>
 				<template #label>{{ i18n.ts.reverse }}</template>
-			</Switch>
+			</MkSwitch>
 		</template>
 		<template v-else-if="statusbar.type === 'federation'">
-			<Input
+			<MkInput
 				v-model="statusbar.props.refreshIntervalSec"
 				manual-save
 				class="_formBlock"
 				type="number"
 			>
 				<template #label>{{ i18n.ts.refreshInterval }}</template>
-			</Input>
+			</MkInput>
 			<FormRange
 				v-model="statusbar.props.marqueeDuration"
 				:min="5"
@@ -85,12 +88,15 @@
 					>{{ i18n.ts.fast }} &lt;-&gt; {{ i18n.ts.slow }}</template
 				>
 			</FormRange>
-			<Switch v-model="statusbar.props.marqueeReverse" class="_formBlock">
+			<MkSwitch
+				v-model="statusbar.props.marqueeReverse"
+				class="_formBlock"
+			>
 				<template #label>{{ i18n.ts.reverse }}</template>
-			</Switch>
-			<Switch v-model="statusbar.props.colored" class="_formBlock">
+			</MkSwitch>
+			<MkSwitch v-model="statusbar.props.colored" class="_formBlock">
 				<template #label>{{ i18n.ts.colored }}</template>
-			</Switch>
+			</MkSwitch>
 		</template>
 		<template
 			v-else-if="statusbar.type === 'userList' && userLists != null"
@@ -101,14 +107,14 @@
 					{{ list.name }}
 				</option>
 			</FormSelect>
-			<Input
+			<MkInput
 				v-model="statusbar.props.refreshIntervalSec"
 				manual-save
 				class="_formBlock"
 				type="number"
 			>
 				<template #label>{{ i18n.ts.refreshInterval }}</template>
-			</Input>
+			</MkInput>
 			<FormRange
 				v-model="statusbar.props.marqueeDuration"
 				:min="5"
@@ -121,9 +127,12 @@
 					>{{ i18n.ts.fast }} &lt;-&gt; {{ i18n.ts.slow }}</template
 				>
 			</FormRange>
-			<Switch v-model="statusbar.props.marqueeReverse" class="_formBlock">
+			<MkSwitch
+				v-model="statusbar.props.marqueeReverse"
+				class="_formBlock"
+			>
 				<template #label>{{ i18n.ts.reverse }}</template>
-			</Switch>
+			</MkSwitch>
 		</template>
 
 		<div style="display: flex; gap: var(--margin); flex-wrap: wrap">
@@ -134,12 +143,12 @@
 
 <script lang="ts" setup>
 import { computed, reactive, ref, watch } from "vue";
-import FormSelect from "@/components/form/Select.vue";
-import Input from "@/components/form/Input.vue";
-import Switch from "@/components/form/Switch.vue";
-import FormRadios from "@/components/form/Radios.vue";
-import FormButton from "@/components/Button.vue";
-import FormRange from "@/components/form/Range.vue";
+import FormSelect from "@/components/form/select.vue";
+import MkInput from "@/components/form/input.vue";
+import MkSwitch from "@/components/form/switch.vue";
+import FormRadios from "@/components/form/radios.vue";
+import FormButton from "@/components/MkButton.vue";
+import FormRange from "@/components/form/range.vue";
 import * as os from "@/os";
 import { defaultStore } from "@/store";
 import { i18n } from "@/i18n";
diff --git a/packages/client/src/pages/settings/StatusbarPage.vue b/packages/client/src/pages/settings/statusbar.vue
similarity index 85%
rename from packages/client/src/pages/settings/StatusbarPage.vue
rename to packages/client/src/pages/settings/statusbar.vue
index 2d9b2243c..96a80e8c6 100644
--- a/packages/client/src/pages/settings/StatusbarPage.vue
+++ b/packages/client/src/pages/settings/statusbar.vue
@@ -12,10 +12,10 @@
 <script lang="ts" setup>
 import { computed, onMounted, ref, watch } from "vue";
 import { v4 as uuid } from "uuid";
-import XStatusbar from "./StatusbarOptions.vue";
-import FormRadios from "@/components/form/Radios.vue";
-import FormFolder from "@/components/form/Folder.vue";
-import FormButton from "@/components/Button.vue";
+import XStatusbar from "./statusbar.statusbar.vue";
+import FormRadios from "@/components/form/radios.vue";
+import FormFolder from "@/components/form/folder.vue";
+import FormButton from "@/components/MkButton.vue";
 import * as os from "@/os";
 import { defaultStore } from "@/store";
 import { unisonReload } from "@/scripts/unison-reload";
diff --git a/packages/client/src/pages/settings/ThemeInstall.vue b/packages/client/src/pages/settings/theme.install.vue
similarity index 94%
rename from packages/client/src/pages/settings/ThemeInstall.vue
rename to packages/client/src/pages/settings/theme.install.vue
index 98d782f79..0428de0f7 100644
--- a/packages/client/src/pages/settings/ThemeInstall.vue
+++ b/packages/client/src/pages/settings/theme.install.vue
@@ -30,8 +30,8 @@
 <script lang="ts" setup>
 import {} from "vue";
 import JSON5 from "json5";
-import FormTextarea from "@/components/form/Textarea.vue";
-import FormButton from "@/components/Button.vue";
+import FormTextarea from "@/components/form/textarea.vue";
+import FormButton from "@/components/MkButton.vue";
 import { applyTheme, validateTheme } from "@/scripts/theme";
 import * as os from "@/os";
 import { addTheme, getThemes } from "@/theme-store";
diff --git a/packages/client/src/pages/settings/ThemeManage.vue b/packages/client/src/pages/settings/theme.manage.vue
similarity index 92%
rename from packages/client/src/pages/settings/ThemeManage.vue
rename to packages/client/src/pages/settings/theme.manage.vue
index cc0c21d3b..79689b4e2 100644
--- a/packages/client/src/pages/settings/ThemeManage.vue
+++ b/packages/client/src/pages/settings/theme.manage.vue
@@ -57,10 +57,10 @@
 <script lang="ts" setup>
 import { computed, ref } from "vue";
 import JSON5 from "json5";
-import FormTextarea from "@/components/form/Textarea.vue";
-import FormSelect from "@/components/form/Select.vue";
-import FormInput from "@/components/form/Input.vue";
-import FormButton from "@/components/Button.vue";
+import FormTextarea from "@/components/form/textarea.vue";
+import FormSelect from "@/components/form/select.vue";
+import FormInput from "@/components/form/input.vue";
+import FormButton from "@/components/MkButton.vue";
 import { Theme, getBuiltinThemesRef } from "@/scripts/theme";
 import copyToClipboard from "@/scripts/copy-to-clipboard";
 import * as os from "@/os";
diff --git a/packages/client/src/pages/settings/Theme.vue b/packages/client/src/pages/settings/theme.vue
similarity index 97%
rename from packages/client/src/pages/settings/Theme.vue
rename to packages/client/src/pages/settings/theme.vue
index b45263e33..437f73182 100644
--- a/packages/client/src/pages/settings/Theme.vue
+++ b/packages/client/src/pages/settings/theme.vue
@@ -146,8 +146,8 @@
 			v-if="wallpaper == null"
 			class="_formBlock"
 			@click="setWallpaper"
-			>{{ i18n.ts.setWallpaper }}
-		</FormButton>
+			>{{ i18n.ts.setWallpaper }}</FormButton
+		>
 		<FormButton v-else class="_formBlock" @click="wallpaper = null">{{
 			i18n.ts.removeWallpaper
 		}}</FormButton>
@@ -157,11 +157,11 @@
 <script lang="ts" setup>
 import { computed, onActivated, ref, watch } from "vue";
 import JSON5 from "json5";
-import FormSwitch from "@/components/form/Switch.vue";
-import FormSelect from "@/components/form/Select.vue";
-import FormSection from "@/components/form/Section.vue";
-import FormLink from "@/components/form/Link.vue";
-import FormButton from "@/components/Button.vue";
+import FormSwitch from "@/components/form/switch.vue";
+import FormSelect from "@/components/form/select.vue";
+import FormSection from "@/components/form/section.vue";
+import FormLink from "@/components/form/link.vue";
+import FormButton from "@/components/MkButton.vue";
 import { getBuiltinThemesRef } from "@/scripts/theme";
 import { selectFile } from "@/scripts/select-file";
 import { isDeviceDarkmode } from "@/scripts/is-device-darkmode";
@@ -515,7 +515,6 @@ definePageMetadata({
 			}
 		}
 	}
-
 	> .sync {
 		padding: 14px 16px;
 		border-top: solid 0.5px var(--divider);
diff --git a/packages/client/src/pages/settings/WebhookEdit.vue b/packages/client/src/pages/settings/webhook.edit.vue
similarity index 93%
rename from packages/client/src/pages/settings/WebhookEdit.vue
rename to packages/client/src/pages/settings/webhook.edit.vue
index abcc1db71..9d171c446 100644
--- a/packages/client/src/pages/settings/WebhookEdit.vue
+++ b/packages/client/src/pages/settings/webhook.edit.vue
@@ -55,10 +55,10 @@
 
 <script lang="ts" setup>
 import {} from "vue";
-import FormInput from "@/components/form/Input.vue";
-import FormSection from "@/components/form/Section.vue";
-import FormSwitch from "@/components/form/Switch.vue";
-import FormButton from "@/components/Button.vue";
+import FormInput from "@/components/form/input.vue";
+import FormSection from "@/components/form/section.vue";
+import FormSwitch from "@/components/form/switch.vue";
+import FormButton from "@/components/MkButton.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
diff --git a/packages/client/src/pages/settings/WebhookNew.vue b/packages/client/src/pages/settings/webhook.new.vue
similarity index 91%
rename from packages/client/src/pages/settings/WebhookNew.vue
rename to packages/client/src/pages/settings/webhook.new.vue
index 862b0a70a..3ff25c345 100644
--- a/packages/client/src/pages/settings/WebhookNew.vue
+++ b/packages/client/src/pages/settings/webhook.new.vue
@@ -53,10 +53,10 @@
 
 <script lang="ts" setup>
 import {} from "vue";
-import FormInput from "@/components/form/Input.vue";
-import FormSection from "@/components/form/Section.vue";
-import FormSwitch from "@/components/form/Switch.vue";
-import FormButton from "@/components/Button.vue";
+import FormInput from "@/components/form/input.vue";
+import FormSection from "@/components/form/section.vue";
+import FormSwitch from "@/components/form/switch.vue";
+import FormButton from "@/components/MkButton.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
diff --git a/packages/client/src/pages/settings/Webhook.vue b/packages/client/src/pages/settings/webhook.vue
similarity index 86%
rename from packages/client/src/pages/settings/Webhook.vue
rename to packages/client/src/pages/settings/webhook.vue
index 2ad780c3c..e80b0dd83 100644
--- a/packages/client/src/pages/settings/Webhook.vue
+++ b/packages/client/src/pages/settings/webhook.vue
@@ -5,7 +5,7 @@
 		</FormSection>
 
 		<FormSection>
-			<Pagination :pagination="pagination">
+			<MkPagination :pagination="pagination">
 				<template #default="{ items }">
 					<FormLink
 						v-for="webhook in items"
@@ -39,23 +39,23 @@
 						</template>
 						{{ webhook.name || webhook.url }}
 						<template #suffix>
-							<Time
+							<MkTime
 								v-if="webhook.latestSentAt"
 								:time="webhook.latestSentAt"
-							></Time>
+							></MkTime>
 						</template>
 					</FormLink>
 				</template>
-			</Pagination>
+			</MkPagination>
 		</FormSection>
 	</div>
 </template>
 
 <script lang="ts" setup>
 import {} from "vue";
-import Pagination from "@/components/Pagination.vue";
-import FormSection from "@/components/form/Section.vue";
-import FormLink from "@/components/form/Link.vue";
+import MkPagination from "@/components/MkPagination.vue";
+import FormSection from "@/components/form/section.vue";
+import FormLink from "@/components/form/link.vue";
 import { userPage } from "@/filters/user";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
diff --git a/packages/client/src/pages/settings/WordMute.vue b/packages/client/src/pages/settings/word-mute.vue
similarity index 86%
rename from packages/client/src/pages/settings/WordMute.vue
rename to packages/client/src/pages/settings/word-mute.vue
index bcd9de06b..9c69358bf 100644
--- a/packages/client/src/pages/settings/WordMute.vue
+++ b/packages/client/src/pages/settings/word-mute.vue
@@ -1,14 +1,14 @@
 <template>
 	<div class="_formRoot">
-		<Tab v-model="tab" class="_formBlock">
+		<MkTab v-model="tab" class="_formBlock">
 			<option value="soft">{{ i18n.ts._wordMute.soft }}</option>
 			<option value="hard">{{ i18n.ts._wordMute.hard }}</option>
-		</Tab>
+		</MkTab>
 		<div class="_formBlock">
 			<div v-show="tab === 'soft'">
-				<Info class="_formBlock">{{
+				<MkInfo class="_formBlock">{{
 					i18n.ts._wordMute.softDescription
-				}}</Info>
+				}}</MkInfo>
 				<FormTextarea v-model="softMutedWords" class="_formBlock">
 					<span>{{ i18n.ts._wordMute.muteWords }}</span>
 					<template #caption
@@ -19,9 +19,9 @@
 				</FormTextarea>
 			</div>
 			<div v-show="tab === 'hard'">
-				<Info class="_formBlock"
+				<MkInfo class="_formBlock"
 					>{{ i18n.ts._wordMute.hardDescription }}
-					{{ i18n.ts.reflectMayTakeTime }}</Info
+					{{ i18n.ts.reflectMayTakeTime }}</MkInfo
 				>
 				<FormTextarea v-model="hardMutedWords" class="_formBlock">
 					<span>{{ i18n.ts._wordMute.muteWords }}</span>
@@ -31,7 +31,7 @@
 						}}</template
 					>
 				</FormTextarea>
-				<KeyValue
+				<MkKeyValue
 					v-if="hardWordMutedNotesCount != null"
 					class="_formBlock"
 				>
@@ -39,23 +39,23 @@
 					<template #value>{{
 						number(hardWordMutedNotesCount)
 					}}</template>
-				</KeyValue>
+				</MkKeyValue>
 			</div>
 		</div>
-		<Button primary inline :disabled="!changed" @click="save()"
+		<MkButton primary inline :disabled="!changed" @click="save()"
 			><i class="ph-floppy-disk-back ph-bold ph-lg"></i>
-			{{ i18n.ts.save }}</Button
+			{{ i18n.ts.save }}</MkButton
 		>
 	</div>
 </template>
 
 <script lang="ts" setup>
 import { ref, watch } from "vue";
-import FormTextarea from "@/components/form/Textarea.vue";
-import KeyValue from "@/components/KeyValue.vue";
-import Button from "@/components/Button.vue";
-import Info from "@/components/Info.vue";
-import Tab from "@/components/Tab.vue";
+import FormTextarea from "@/components/form/textarea.vue";
+import MkKeyValue from "@/components/MkKeyValue.vue";
+import MkButton from "@/components/MkButton.vue";
+import MkInfo from "@/components/MkInfo.vue";
+import MkTab from "@/components/MkTab.vue";
 import * as os from "@/os";
 import number from "@/filters/number";
 import { defaultStore } from "@/store";
diff --git a/packages/client/src/pages/Share.vue b/packages/client/src/pages/share.vue
similarity index 92%
rename from packages/client/src/pages/Share.vue
rename to packages/client/src/pages/share.vue
index 09f55573b..d43c67528 100644
--- a/packages/client/src/pages/Share.vue
+++ b/packages/client/src/pages/share.vue
@@ -1,9 +1,9 @@
 <template>
-	<StickyContainer>
-		<template #header>
-			<PageHeader :actions="headerActions" :tabs="headerTabs" />
-		</template>
-		<Spacer :content-max="800">
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
+		/></template>
+		<MkSpacer :content-max="800">
 			<XPostForm
 				v-if="state === 'writing'"
 				fixed
@@ -18,15 +18,15 @@
 				class="_panel"
 				@posted="state = 'posted'"
 			/>
-			<Button
+			<MkButton
 				v-else-if="state === 'posted'"
 				primary
 				class="close"
 				@click="close()"
-				>{{ i18n.ts.close }}</Button
+				>{{ i18n.ts.close }}</MkButton
 			>
-		</Spacer>
-	</StickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
@@ -36,8 +36,8 @@ import {} from "vue";
 import { noteVisibilities } from "iceshrimp-js";
 import * as Acct from "iceshrimp-js/built/acct";
 import * as Misskey from "iceshrimp-js";
-import Button from "@/components/Button.vue";
-import XPostForm from "@/components/PostForm.vue";
+import MkButton from "@/components/MkButton.vue";
+import XPostForm from "@/components/MkPostForm.vue";
 import * as os from "@/os";
 import { mainRouter } from "@/router";
 import { definePageMetadata } from "@/scripts/page-metadata";
diff --git a/packages/client/src/pages/SignupComplete.vue b/packages/client/src/pages/signup-complete.vue
similarity index 100%
rename from packages/client/src/pages/SignupComplete.vue
rename to packages/client/src/pages/signup-complete.vue
diff --git a/packages/client/src/pages/Tag.vue b/packages/client/src/pages/tag.vue
similarity index 90%
rename from packages/client/src/pages/Tag.vue
rename to packages/client/src/pages/tag.vue
index c0e875f6b..e9a1792a0 100644
--- a/packages/client/src/pages/Tag.vue
+++ b/packages/client/src/pages/tag.vue
@@ -1,14 +1,13 @@
 <template>
-	<StickyContainer>
-		<template #header>
-			<PageHeader
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
 				v-model:tab="tab"
 				:actions="headerActions"
 				:tabs="headerTabs"
 				:display-back-button="true"
-			/>
-		</template>
-		<Spacer :content-max="800">
+		/></template>
+		<MkSpacer :content-max="800">
 			<swiper
 				:round-lengths="true"
 				:touch-angle="25"
@@ -36,16 +35,16 @@
 					/>
 				</swiper-slide>
 			</swiper>
-		</Spacer>
-	</StickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { computed, watch, onMounted } from "vue";
 import { Virtual } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/vue";
-import XNotes from "@/components/Notes.vue";
-import XUserList from "@/components/UserList.vue";
+import XNotes from "@/components/MkNotes.vue";
+import XUserList from "@/components/MkUserList.vue";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import { defaultStore } from "@/store";
diff --git a/packages/client/src/pages/ThemeEditor.vue b/packages/client/src/pages/theme-editor.vue
similarity index 95%
rename from packages/client/src/pages/ThemeEditor.vue
rename to packages/client/src/pages/theme-editor.vue
index 16aea910f..cec2cb980 100644
--- a/packages/client/src/pages/ThemeEditor.vue
+++ b/packages/client/src/pages/theme-editor.vue
@@ -1,9 +1,9 @@
 <template>
-	<StickyContainer>
-		<template #header>
-			<PageHeader :actions="headerActions" :tabs="headerTabs" />
-		</template>
-		<Spacer :content-max="800" :margin-min="16" :margin-max="32">
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
+		/></template>
+		<MkSpacer :content-max="800" :margin-min="16" :margin-max="32">
 			<div class="cwepdizn _formRoot">
 				<FormFolder :default-open="true" class="_formBlock">
 					<template #label>{{ i18n.ts.backgroundColor }}</template>
@@ -138,8 +138,8 @@
 					</div>
 				</FormFolder>
 			</div>
-		</Spacer>
-	</StickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
@@ -149,9 +149,9 @@ import tinycolor from "tinycolor2";
 import { v4 as uuid } from "uuid";
 import JSON5 from "json5";
 
-import FormButton from "@/components/Button.vue";
-import FormTextarea from "@/components/form/Textarea.vue";
-import FormFolder from "@/components/form/Folder.vue";
+import FormButton from "@/components/MkButton.vue";
+import FormTextarea from "@/components/form/textarea.vue";
+import FormFolder from "@/components/form/folder.vue";
 
 import { $i } from "@/account";
 import { Theme, applyTheme } from "@/scripts/theme";
diff --git a/packages/client/src/pages/Timeline.vue b/packages/client/src/pages/timeline.vue
similarity index 96%
rename from packages/client/src/pages/Timeline.vue
rename to packages/client/src/pages/timeline.vue
index cd780af44..930a9635a 100644
--- a/packages/client/src/pages/Timeline.vue
+++ b/packages/client/src/pages/timeline.vue
@@ -1,14 +1,14 @@
 <template>
-	<StickyContainer>
+	<MkStickyContainer>
 		<template #header>
-			<PageHeader
+			<MkPageHeader
 				v-model:tab="src"
 				:actions="headerActions"
 				:tabs="headerTabs"
 				:display-my-avatar="true"
 			/>
 		</template>
-		<Spacer :content-max="800">
+		<MkSpacer :content-max="800">
 			<div ref="rootEl" v-hotkey.global="keymap" class="cmuxhskf">
 				<XPostForm
 					v-if="$store.reactiveState.showFixedPostForm.value"
@@ -59,17 +59,17 @@
 					</swiper>
 				</div>
 			</div>
-		</Spacer>
-	</StickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { computed, ref, onMounted } from "vue";
 import { Virtual } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/vue";
-import XTutorial from "@/components/TutorialDialog.vue";
-import XTimeline from "@/components/Timeline.vue";
-import XPostForm from "@/components/PostForm.vue";
+import XTutorial from "@/components/MkTutorialDialog.vue";
+import XTimeline from "@/components/MkTimeline.vue";
+import XPostForm from "@/components/MkPostForm.vue";
 import * as os from "@/os";
 import { defaultStore } from "@/store";
 import { i18n } from "@/i18n";
@@ -310,7 +310,6 @@ onMounted(() => {
 <style lang="scss" scoped>
 .cmuxhskf {
 	--swiper-theme-color: var(--accent);
-
 	> .tl {
 		background: none;
 	}
diff --git a/packages/client/src/pages/UserInfo.vue b/packages/client/src/pages/user-info.vue
similarity index 85%
rename from packages/client/src/pages/UserInfo.vue
rename to packages/client/src/pages/user-info.vue
index 13f806912..433f4e4d6 100644
--- a/packages/client/src/pages/UserInfo.vue
+++ b/packages/client/src/pages/user-info.vue
@@ -1,25 +1,24 @@
 <template>
-	<StickyContainer>
-		<template #header>
-			<PageHeader
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
 				v-model:tab="tab"
 				:actions="headerActions"
 				:tabs="headerTabs"
-			/>
-		</template>
-		<Spacer :content-max="600" :margin-min="16" :margin-max="32">
+		/></template>
+		<MkSpacer :content-max="600" :margin-min="16" :margin-max="32">
 			<FormSuspense :p="init">
 				<div v-if="tab === 'overview'" class="_formRoot">
 					<div class="_formBlock aeakzknw">
-						<Avatar
+						<MkAvatar
 							class="avatar"
 							:user="user"
 							:show-indicator="true"
 						/>
 						<div class="body">
-							<span class="name">
-								<UserName class="name" :user="user" />
-							</span>
+							<span class="name"
+								><MkUserName class="name" :user="user"
+							/></span>
 							<span class="sub"
 								><span class="acct _monospace"
 									>@{{ acct(user) }}</span
@@ -39,11 +38,11 @@
 						</div>
 					</div>
 
-					<Info
+					<MkInfo
 						v-if="user.username.includes('.')"
 						class="_formBlock"
 						warn
-						>{{ i18n.ts.isSystemAccount }}</Info
+						>{{ i18n.ts.isSystemAccount }}</MkInfo
 					>
 
 					<div v-if="user.url" class="_formLinksGrid _formBlock">
@@ -64,55 +63,59 @@
 					>
 
 					<div class="_formBlock">
-						<KeyValue :copy="user.id" oneline style="margin: 1em 0">
+						<MkKeyValue
+							:copy="user.id"
+							oneline
+							style="margin: 1em 0"
+						>
 							<template #key>ID</template>
 							<template #value
 								><span class="_monospace">{{
 									user.id
 								}}</span></template
 							>
-						</KeyValue>
+						</MkKeyValue>
 						<!-- 要る？
-					<KeyValue v-if="ips.length > 0" :copy="user.id" oneline style="margin: 1em 0;">
+					<MkKeyValue v-if="ips.length > 0" :copy="user.id" oneline style="margin: 1em 0;">
 						<template #key>IP (recent)</template>
 						<template #value><span class="_monospace">{{ ips[0].ip }}</span></template>
-					</KeyValue>
+					</MkKeyValue>
 					-->
-						<KeyValue oneline style="margin: 1em 0">
+						<MkKeyValue oneline style="margin: 1em 0">
 							<template #key>{{ i18n.ts.createdAt }}</template>
 							<template #value
 								><span class="_monospace"
-									><Time
+									><MkTime
 										:time="user.createdAt"
 										:mode="'detail'" /></span
 							></template>
-						</KeyValue>
-						<KeyValue v-if="info" oneline style="margin: 1em 0">
+						</MkKeyValue>
+						<MkKeyValue v-if="info" oneline style="margin: 1em 0">
 							<template #key>{{
 								i18n.ts.lastActiveDate
 							}}</template>
 							<template #value
 								><span class="_monospace"
-									><Time
+									><MkTime
 										:time="info.lastActiveDate"
 										:mode="'detail'" /></span
 							></template>
-						</KeyValue>
-						<KeyValue v-if="info" oneline style="margin: 1em 0">
+						</MkKeyValue>
+						<MkKeyValue v-if="info" oneline style="margin: 1em 0">
 							<template #key>{{ i18n.ts.email }}</template>
 							<template #value
 								><span class="_monospace">{{
 									info.email
 								}}</span></template
 							>
-						</KeyValue>
+						</MkKeyValue>
 					</div>
 
 					<FormSection>
 						<template #label>ActivityPub</template>
 
 						<div class="_formBlock">
-							<KeyValue
+							<MkKeyValue
 								v-if="user.host"
 								oneline
 								style="margin: 1em 0"
@@ -121,41 +124,41 @@
 									i18n.ts.instanceInfo
 								}}</template>
 								<template #value
-									><A
+									><MkA
 										:to="`/instance-info/${user.host}`"
 										class="_link"
 										>{{ user.host }}
 										<i
 											class="ph-caret-right ph-bold ph-lg"
-										></i></A
+										></i></MkA
 								></template>
-							</KeyValue>
-							<KeyValue v-else oneline style="margin: 1em 0">
+							</MkKeyValue>
+							<MkKeyValue v-else oneline style="margin: 1em 0">
 								<template #key>{{
 									i18n.ts.instanceInfo
 								}}</template>
 								<template #value>(Local user)</template>
-							</KeyValue>
-							<KeyValue oneline style="margin: 1em 0">
+							</MkKeyValue>
+							<MkKeyValue oneline style="margin: 1em 0">
 								<template #key>{{
 									i18n.ts.updatedAt
 								}}</template>
 								<template #value
-									><Time
+									><MkTime
 										v-if="user.lastFetchedAt"
 										mode="detail"
 										:time="user.lastFetchedAt"
 									/><span v-else>N/A</span></template
 								>
-							</KeyValue>
-							<KeyValue v-if="ap" oneline style="margin: 1em 0">
+							</MkKeyValue>
+							<MkKeyValue v-if="ap" oneline style="margin: 1em 0">
 								<template #key>Type</template>
 								<template #value
 									><span class="_monospace">{{
 										ap.type
 									}}</span></template
 								>
-							</KeyValue>
+							</MkKeyValue>
 						</div>
 
 						<FormButton
@@ -169,8 +172,8 @@
 						<FormFolder class="_formBlock">
 							<template #label>Raw</template>
 
-							<ObjectView v-if="ap" tall :value="ap">
-							</ObjectView>
+							<MkObjectView v-if="ap" tall :value="ap">
+							</MkObjectView>
 						</FormFolder>
 					</FormSection>
 				</div>
@@ -184,8 +187,8 @@
 						v-model="moderator"
 						class="_formBlock"
 						@update:modelValue="toggleModerator"
-						>{{ i18n.ts.moderator }}
-					</FormSwitch>
+						>{{ i18n.ts.moderator }}</FormSwitch
+					>
 					<FormSwitch
 						v-model="silenced"
 						class="_formBlock"
@@ -232,12 +235,12 @@
 					</FormTextarea>
 					<FormFolder class="_formBlock">
 						<template #label>IP</template>
-						<Info v-if="!iAmAdmin" warn>{{
+						<MkInfo v-if="!iAmAdmin" warn>{{
 							i18n.ts.requireAdminForView
-						}}</Info>
-						<Info v-else
+						}}</MkInfo>
+						<MkInfo v-else
 							>The date is the IP address was first
-							acknowledged.</Info
+							acknowledged.</MkInfo
 						>
 						<template v-if="iAmAdmin && ips">
 							<div
@@ -255,7 +258,7 @@
 					<FormFolder class="_formBlock">
 						<template #label>{{ i18n.ts.files }}</template>
 
-						<FileListForAdmin
+						<MkFileListForAdmin
 							:pagination="filesPagination"
 							view-mode="grid"
 						/>
@@ -289,70 +292,70 @@
 				<div v-else-if="tab === 'chart'" class="_formRoot">
 					<div class="cmhjzshm">
 						<div class="selects">
-							<Select
+							<MkSelect
 								v-model="chartSrc"
 								style="margin: 0 10px 0 0; flex: 1"
 							>
 								<option value="per-user-notes">
 									{{ i18n.ts.notes }}
 								</option>
-							</Select>
+							</MkSelect>
 						</div>
 						<div class="charts">
 							<div class="label">
 								{{ i18n.t("recentNHours", { n: 90 }) }}
 							</div>
-							<Chart
+							<MkChart
 								class="chart"
 								:src="chartSrc"
 								span="hour"
 								:limit="90"
 								:args="{ user, withoutAll: true }"
 								:detailed="true"
-							></Chart>
+							></MkChart>
 							<div class="label">
 								{{ i18n.t("recentNDays", { n: 90 }) }}
 							</div>
-							<Chart
+							<MkChart
 								class="chart"
 								:src="chartSrc"
 								span="day"
 								:limit="90"
 								:args="{ user, withoutAll: true }"
 								:detailed="true"
-							></Chart>
+							></MkChart>
 						</div>
 					</div>
 				</div>
 				<div v-else-if="tab === 'raw'" class="_formRoot">
-					<ObjectView v-if="info && $i.isAdmin" tall :value="info">
-					</ObjectView>
+					<MkObjectView v-if="info && $i.isAdmin" tall :value="info">
+					</MkObjectView>
 
-					<ObjectView tall :value="user"> </ObjectView>
+					<MkObjectView tall :value="user"> </MkObjectView>
 				</div>
 			</FormSuspense>
-		</Spacer>
-	</StickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { computed, watch } from "vue";
 import * as misskey from "iceshrimp-js";
-import Chart from "@/components/Chart.vue";
-import ObjectView from "@/components/ObjectView.vue";
-import FormTextarea from "@/components/form/Textarea.vue";
-import FormSwitch from "@/components/form/Switch.vue";
-import FormLink from "@/components/form/Link.vue";
-import FormSection from "@/components/form/Section.vue";
-import FormButton from "@/components/Button.vue";
-import FormInput from "@/components/form/Input.vue";
-import FormSplit from "@/components/form/Split.vue";
-import FormFolder from "@/components/form/Folder.vue";
-import KeyValue from "@/components/KeyValue.vue";
-import Select from "@/components/form/Select.vue";
-import FormSuspense from "@/components/form/Suspense.vue";
-import FileListForAdmin from "@/components/FileListForAdmin.vue";
-import Info from "@/components/Info.vue";
+import MkChart from "@/components/MkChart.vue";
+import MkObjectView from "@/components/MkObjectView.vue";
+import FormTextarea from "@/components/form/textarea.vue";
+import FormSwitch from "@/components/form/switch.vue";
+import FormLink from "@/components/form/link.vue";
+import FormSection from "@/components/form/section.vue";
+import FormButton from "@/components/MkButton.vue";
+import FormInput from "@/components/form/input.vue";
+import FormSplit from "@/components/form/split.vue";
+import FormFolder from "@/components/form/folder.vue";
+import MkKeyValue from "@/components/MkKeyValue.vue";
+import MkSelect from "@/components/form/select.vue";
+import FormSuspense from "@/components/form/suspense.vue";
+import MkFileListForAdmin from "@/components/MkFileListForAdmin.vue";
+import MkInfo from "@/components/MkInfo.vue";
 import * as os from "@/os";
 import number from "@/filters/number";
 import bytes from "@/filters/bytes";
diff --git a/packages/client/src/pages/UserListTimeline.vue b/packages/client/src/pages/user-list-timeline.vue
similarity index 90%
rename from packages/client/src/pages/UserListTimeline.vue
rename to packages/client/src/pages/user-list-timeline.vue
index 6aca70745..b6e1127eb 100644
--- a/packages/client/src/pages/UserListTimeline.vue
+++ b/packages/client/src/pages/user-list-timeline.vue
@@ -1,8 +1,8 @@
 <template>
-	<StickyContainer>
-		<template #header>
-			<PageHeader :actions="headerActions" :tabs="headerTabs" />
-		</template>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
+		/></template>
 		<div ref="rootEl" v-size="{ min: [800] }" class="eqqrhokj">
 			<div class="tl _block">
 				<XTimeline
@@ -15,12 +15,12 @@
 				/>
 			</div>
 		</div>
-	</StickyContainer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { computed, watch, inject } from "vue";
-import XTimeline from "@/components/Timeline.vue";
+import XTimeline from "@/components/MkTimeline.vue";
 import * as os from "@/os";
 import { useRouter } from "@/router";
 import { definePageMetadata } from "@/scripts/page-metadata";
@@ -93,7 +93,6 @@ definePageMetadata(
 <style lang="scss" scoped>
 .eqqrhokj {
 	padding: var(--margin);
-
 	> .tl {
 		background: none;
 		border-radius: var(--radius);
diff --git a/packages/client/src/pages/user/Clips.vue b/packages/client/src/pages/user/clips.vue
similarity index 85%
rename from packages/client/src/pages/user/Clips.vue
rename to packages/client/src/pages/user/clips.vue
index de576f162..2da78686b 100644
--- a/packages/client/src/pages/user/Clips.vue
+++ b/packages/client/src/pages/user/clips.vue
@@ -1,13 +1,13 @@
 <template>
-	<Spacer :content-max="800">
+	<MkSpacer :content-max="800">
 		<div class="pages-user-clips">
-			<Pagination
+			<MkPagination
 				v-slot="{ items }"
 				ref="list"
 				:pagination="pagination"
 				class="list"
 			>
-				<A
+				<MkA
 					v-for="item in items"
 					:key="item.id"
 					:to="`/clips/${item.id}`"
@@ -17,16 +17,16 @@
 					<div v-if="item.description" class="description">
 						{{ item.description }}
 					</div>
-				</A>
-			</Pagination>
+				</MkA>
+			</MkPagination>
 		</div>
-	</Spacer>
+	</MkSpacer>
 </template>
 
 <script lang="ts" setup>
 import { computed } from "vue";
 import * as misskey from "iceshrimp-js";
-import Pagination from "@/components/Pagination.vue";
+import MkPagination from "@/components/MkPagination.vue";
 
 const props = defineProps<{
 	user: misskey.entities.User;
diff --git a/packages/client/src/pages/user/FollowList.vue b/packages/client/src/pages/user/follow-list.vue
similarity index 87%
rename from packages/client/src/pages/user/FollowList.vue
rename to packages/client/src/pages/user/follow-list.vue
index cb14eac9f..668cf33cd 100644
--- a/packages/client/src/pages/user/FollowList.vue
+++ b/packages/client/src/pages/user/follow-list.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<Pagination
+		<MkPagination
 			v-slot="{ items }"
 			ref="list"
 			:pagination="
@@ -9,7 +9,7 @@
 			class="mk-following-or-followers"
 		>
 			<div class="users">
-				<UserInfo
+				<MkUserInfo
 					v-for="user in items.map((x) =>
 						type === 'following' ? x.followee : x.follower,
 					)"
@@ -18,15 +18,15 @@
 					:user="user"
 				/>
 			</div>
-		</Pagination>
+		</MkPagination>
 	</div>
 </template>
 
 <script lang="ts" setup>
 import { computed } from "vue";
 import * as misskey from "iceshrimp-js";
-import UserInfo from "@/components/UserInfo.vue";
-import Pagination from "@/components/Pagination.vue";
+import MkUserInfo from "@/components/MkUserInfo.vue";
+import MkPagination from "@/components/MkPagination.vue";
 
 const props = defineProps<{
 	user: misskey.entities.User;
diff --git a/packages/client/src/pages/user/Followers.vue b/packages/client/src/pages/user/followers.vue
similarity index 81%
rename from packages/client/src/pages/user/Followers.vue
rename to packages/client/src/pages/user/followers.vue
index 719bb6a73..fccbb36bc 100644
--- a/packages/client/src/pages/user/Followers.vue
+++ b/packages/client/src/pages/user/followers.vue
@@ -1,18 +1,18 @@
 <template>
-	<StickyContainer>
-		<template #header>
-			<PageHeader :actions="headerActions" :tabs="headerTabs" />
-		</template>
-		<Spacer :content-max="1000">
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
+		/></template>
+		<MkSpacer :content-max="1000">
 			<transition name="fade" mode="out-in">
 				<div v-if="user">
 					<XFollowList :user="user" type="followers" />
 				</div>
-				<Error v-else-if="error" @retry="fetchUser()" />
-				<Loading v-else />
+				<MkError v-else-if="error" @retry="fetchUser()" />
+				<MkLoading v-else />
 			</transition>
-		</Spacer>
-	</StickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
@@ -26,7 +26,7 @@ import {
 } from "vue";
 import * as Acct from "iceshrimp-js/built/acct";
 import * as misskey from "iceshrimp-js";
-import XFollowList from "./FollowList.vue";
+import XFollowList from "./follow-list.vue";
 import * as os from "@/os";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import { i18n } from "@/i18n";
diff --git a/packages/client/src/pages/user/Following.vue b/packages/client/src/pages/user/following.vue
similarity index 81%
rename from packages/client/src/pages/user/Following.vue
rename to packages/client/src/pages/user/following.vue
index 6765808ee..e397d1bbd 100644
--- a/packages/client/src/pages/user/Following.vue
+++ b/packages/client/src/pages/user/following.vue
@@ -1,18 +1,18 @@
 <template>
-	<StickyContainer>
-		<template #header>
-			<PageHeader :actions="headerActions" :tabs="headerTabs" />
-		</template>
-		<Spacer :content-max="1000">
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
+		/></template>
+		<MkSpacer :content-max="1000">
 			<transition name="fade" mode="out-in">
 				<div v-if="user">
 					<XFollowList :user="user" type="following" />
 				</div>
-				<Error v-else-if="error" @retry="fetchUser()" />
-				<Loading v-else />
+				<MkError v-else-if="error" @retry="fetchUser()" />
+				<MkLoading v-else />
 			</transition>
-		</Spacer>
-	</StickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
@@ -26,7 +26,7 @@ import {
 } from "vue";
 import * as Acct from "iceshrimp-js/built/acct";
 import * as misskey from "iceshrimp-js";
-import XFollowList from "./FollowList.vue";
+import XFollowList from "./follow-list.vue";
 import * as os from "@/os";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import { i18n } from "@/i18n";
diff --git a/packages/client/src/pages/user/Gallery.vue b/packages/client/src/pages/user/gallery.vue
similarity index 70%
rename from packages/client/src/pages/user/Gallery.vue
rename to packages/client/src/pages/user/gallery.vue
index a3dd9506c..72255b17b 100644
--- a/packages/client/src/pages/user/Gallery.vue
+++ b/packages/client/src/pages/user/gallery.vue
@@ -1,23 +1,23 @@
 <template>
-	<Spacer :content-max="800">
-		<Pagination v-slot="{ items }" :pagination="pagination">
+	<MkSpacer :content-max="800">
+		<MkPagination v-slot="{ items }" :pagination="pagination">
 			<div class="jrnovfpt">
-				<GalleryPostPreview
+				<MkGalleryPostPreview
 					v-for="post in items"
 					:key="post.id"
 					:post="post"
 					class="post"
 				/>
 			</div>
-		</Pagination>
-	</Spacer>
+		</MkPagination>
+	</MkSpacer>
 </template>
 
 <script lang="ts" setup>
 import { computed } from "vue";
 import * as misskey from "iceshrimp-js";
-import GalleryPostPreview from "@/components/GalleryPostPreview.vue";
-import Pagination from "@/components/Pagination.vue";
+import MkGalleryPostPreview from "@/components/MkGalleryPostPreview.vue";
+import MkPagination from "@/components/MkPagination.vue";
 
 const props = withDefaults(
 	defineProps<{
diff --git a/packages/client/src/pages/user/Home.vue b/packages/client/src/pages/user/home.vue
similarity index 94%
rename from packages/client/src/pages/user/Home.vue
rename to packages/client/src/pages/user/home.vue
index a1f9e09a5..b1fc07443 100644
--- a/packages/client/src/pages/user/Home.vue
+++ b/packages/client/src/pages/user/home.vue
@@ -1,5 +1,5 @@
 <template>
-	<Spacer :content-max="narrow ? 800 : 1100">
+	<MkSpacer :content-max="narrow ? 800 : 1100">
 		<div
 			ref="rootEl"
 			v-size="{ max: [500] }"
@@ -8,12 +8,12 @@
 		>
 			<div class="main">
 				<div class="profile">
-					<Moved
+					<MkMoved
 						v-if="user.movedToUri"
 						:host="user.movedToUri.host"
 						:acct="user.movedToUri.username"
 					/>
-					<RemoteCaution
+					<MkRemoteCaution
 						v-if="user.host != null"
 						:href="user.url"
 						class="warn"
@@ -38,7 +38,7 @@
 							<div class="fade"></div>
 							<div class="title">
 								<div class="nameColumn">
-									<UserName
+									<MkUserName
 										class="name"
 										:user="user"
 										:nowrap="true"
@@ -80,9 +80,9 @@
 									>
 								</div>
 								<div class="bottom">
-									<span class="username">
-										<Acct :user="user" :detail="true" />
-									</span>
+									<span class="username"
+										><MkAcct :user="user" :detail="true"
+									/></span>
 									<span
 										v-if="user.isAdmin"
 										v-tooltip.noDelay="i18n.ts.isAdmin"
@@ -112,7 +112,7 @@
 								</div>
 							</div>
 						</div>
-						<Avatar
+						<MkAvatar
 							class="avatar"
 							:user="user"
 							:disable-preview="true"
@@ -120,7 +120,7 @@
 						/>
 						<div class="title">
 							<div class="nameColumn">
-								<UserName
+								<MkUserName
 									class="name"
 									:user="user"
 									:nowrap="true"
@@ -155,9 +155,9 @@
 								</div>
 							</div>
 							<div class="bottom">
-								<span class="username">
-									<Acct :user="user" :detail="true" />
-								</span>
+								<span class="username"
+									><MkAcct :user="user" :detail="true"
+								/></span>
 								<span
 									v-if="user.isAdmin"
 									v-tooltip.noDelay="i18n.ts.isAdmin"
@@ -191,7 +191,7 @@
 						</div>
 						<div class="follow-container">
 							<div class="actions">
-								<FollowButton
+								<MkFollowButton
 									:user="user"
 									@refresh="emit('refresh')"
 									:inline="true"
@@ -255,7 +255,7 @@
 											user.createdAt,
 										).toLocaleString()
 									}}
-									(<Time :time="user.createdAt" />)
+									(<MkTime :time="user.createdAt" />)
 								</dd>
 							</dl>
 						</div>
@@ -292,30 +292,30 @@
 							</dl>
 						</div>
 						<div class="status">
-							<A
+							<MkA
 								v-click-anime
 								:to="userPage(user)"
 								:class="{ active: page === 'index' }"
 							>
 								<b>{{ number(user.notesCount) }}</b>
 								<span>{{ i18n.ts.notes }}</span>
-							</A>
-							<A
+							</MkA>
+							<MkA
 								v-click-anime
 								:to="userPage(user, 'following')"
 								:class="{ active: page === 'following' }"
 							>
 								<b>{{ number(user.followingCount) }}</b>
 								<span>{{ i18n.ts.following }}</span>
-							</A>
-							<A
+							</MkA>
+							<MkA
 								v-click-anime
 								:to="userPage(user, 'followers')"
 								:class="{ active: page === 'followers' }"
 							>
 								<b>{{ number(user.followersCount) }}</b>
 								<span>{{ i18n.ts.followers }}</span>
-							</A>
+							</MkA>
 						</div>
 					</div>
 				</div>
@@ -330,10 +330,10 @@
 							:pinned="true"
 						/>
 					</div>
-					<Info
+					<MkInfo
 						v-else-if="$i && $i.id === user.id"
 						style="margin: 12px 0"
-						>{{ i18n.ts.userPagePinTip }}</Info
+						>{{ i18n.ts.userPagePinTip }}</MkInfo
 					>
 					<template v-if="narrow">
 						<XPhotos :key="user.id" :user="user" />
@@ -357,20 +357,20 @@
 				/>
 			</div>
 		</div>
-	</Spacer>
+	</MkSpacer>
 </template>
 
 <script lang="ts" setup>
 import { defineAsyncComponent, onMounted, onUnmounted } from "vue";
 import calcAge from "s-age";
 import cityTimezones from "city-timezones";
-import XUserTimeline from "./IndexTimeline.vue";
+import XUserTimeline from "./index.timeline.vue";
 import type * as misskey from "iceshrimp-js";
-import XNote from "@/components/Note.vue";
-import FollowButton from "@/components/FollowButton.vue";
-import RemoteCaution from "@/components/RemoteCaution.vue";
-import Info from "@/components/Info.vue";
-import Moved from "@/components/Moved.vue";
+import XNote from "@/components/MkNote.vue";
+import MkFollowButton from "@/components/MkFollowButton.vue";
+import MkRemoteCaution from "@/components/MkRemoteCaution.vue";
+import MkInfo from "@/components/MkInfo.vue";
+import MkMoved from "@/components/MkMoved.vue";
 import { getScrollPosition } from "@/scripts/scroll";
 import { getStaticImageUrl } from "@/scripts/get-static-image-url";
 import number from "@/filters/number";
@@ -381,8 +381,8 @@ import { i18n } from "@/i18n";
 import { $i } from "@/account";
 import { host } from "@/config";
 
-const XPhotos = defineAsyncComponent(() => import("./IndexPhotos.vue"));
-const XActivity = defineAsyncComponent(() => import("./IndexActivity.vue"));
+const XPhotos = defineAsyncComponent(() => import("./index.photos.vue"));
+const XActivity = defineAsyncComponent(() => import("./index.activity.vue"));
 
 const emit = defineEmits(["refresh"]);
 const props = withDefaults(
@@ -485,7 +485,6 @@ onUnmounted(() => {
 					overflow: hidden;
 					background-size: cover;
 					background-position: center;
-
 					> .banner {
 						height: 100%;
 						background-color: #26233a;
@@ -493,7 +492,6 @@ onUnmounted(() => {
 						background-position: center;
 						box-shadow: 0 0 128px var(--shadow) inset;
 						will-change: background-position;
-
 						&::before {
 							content: "";
 							position: fixed;
@@ -540,7 +538,6 @@ onUnmounted(() => {
 
 						> .nameColumn {
 							display: block;
-
 							> .name {
 								margin: 0;
 								line-height: 32px;
@@ -649,7 +646,6 @@ onUnmounted(() => {
 
 					> .nameColumn {
 						display: block;
-
 						> .name {
 							margin: 0;
 							align-content: center;
@@ -813,7 +809,6 @@ onUnmounted(() => {
 					display: block;
 					border-bottom: 0;
 					padding-bottom: 0;
-
 					> .bottom {
 						> .username {
 							margin-right: 0;
@@ -855,7 +850,6 @@ onUnmounted(() => {
 					height: auto;
 					border-bottom: 1px solid var(--divider);
 					padding-bottom: 5px;
-
 					> .actions {
 						position: static;
 					}
diff --git a/packages/client/src/pages/user/IndexActivity.vue b/packages/client/src/pages/user/index.activity.vue
similarity index 89%
rename from packages/client/src/pages/user/IndexActivity.vue
rename to packages/client/src/pages/user/index.activity.vue
index 21d379004..7116e456b 100644
--- a/packages/client/src/pages/user/IndexActivity.vue
+++ b/packages/client/src/pages/user/index.activity.vue
@@ -1,5 +1,5 @@
 <template>
-	<Container>
+	<MkContainer>
 		<template #header
 			><i
 				class="ph-chart-bar ph-bold ph-lg"
@@ -14,7 +14,7 @@
 		</template>
 
 		<div style="padding: 8px">
-			<Chart
+			<MkChart
 				:src="chartSrc"
 				:args="{ user, withoutAll: true }"
 				span="day"
@@ -25,14 +25,14 @@
 				:aspect-ratio="5"
 			/>
 		</div>
-	</Container>
+	</MkContainer>
 </template>
 
 <script lang="ts" setup>
 import {} from "vue";
 import * as misskey from "iceshrimp-js";
-import Container from "@/components/Container.vue";
-import Chart from "@/components/Chart.vue";
+import MkContainer from "@/components/MkContainer.vue";
+import MkChart from "@/components/MkChart.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 
diff --git a/packages/client/src/pages/user/IndexPhotos.vue b/packages/client/src/pages/user/index.photos.vue
similarity index 89%
rename from packages/client/src/pages/user/IndexPhotos.vue
rename to packages/client/src/pages/user/index.photos.vue
index 5c95bb502..f1adbefb9 100644
--- a/packages/client/src/pages/user/IndexPhotos.vue
+++ b/packages/client/src/pages/user/index.photos.vue
@@ -1,13 +1,13 @@
 <template>
-	<Container id="photos-container" :max-height="300" :foldable="true">
+	<MkContainer id="photos-container" :max-height="300" :foldable="true">
 		<template #header
 			><i class="ph-image ph-bold ph-lg" style="margin-right: 0.5em"></i
 			>{{ i18n.ts.images }}</template
 		>
 		<div class="ujigsodd">
-			<Loading v-if="fetching" />
+			<MkLoading v-if="fetching" />
 			<div v-if="!fetching && images.length > 0" class="stream">
-				<A
+				<MkA
 					v-for="image in images"
 					:key="image.note.id + image.file.id"
 					class="img"
@@ -18,13 +18,13 @@
 						:src="thumbnail(image.file)"
 						:title="image.file.name"
 					/>
-				</A>
+				</MkA>
 			</div>
 			<p v-if="!fetching && images.length == 0" class="empty">
 				{{ i18n.ts.nothing }}
 			</p>
 		</div>
-	</Container>
+	</MkContainer>
 </template>
 
 <script lang="ts" setup>
@@ -33,8 +33,8 @@ import * as misskey from "iceshrimp-js";
 import { getStaticImageUrl } from "@/scripts/get-static-image-url";
 import { notePage } from "@/filters/note";
 import * as os from "@/os";
-import Container from "@/components/Container.vue";
-import ImgWithBlurhash from "@/components/ImgWithBlurhash.vue";
+import MkContainer from "@/components/MkContainer.vue";
+import ImgWithBlurhash from "@/components/MkImgWithBlurhash.vue";
 import { defaultStore } from "@/store";
 import { i18n } from "@/i18n";
 
diff --git a/packages/client/src/pages/user/IndexTimeline.vue b/packages/client/src/pages/user/index.timeline.vue
similarity index 82%
rename from packages/client/src/pages/user/IndexTimeline.vue
rename to packages/client/src/pages/user/index.timeline.vue
index 6efebcc54..3bc3294df 100644
--- a/packages/client/src/pages/user/IndexTimeline.vue
+++ b/packages/client/src/pages/user/index.timeline.vue
@@ -1,21 +1,21 @@
 <template>
-	<StickyContainer>
+	<MkStickyContainer>
 		<template #header>
-			<Tab v-model="include" :class="$style.tab">
+			<MkTab v-model="include" :class="$style.tab">
 				<option :value="null">{{ i18n.ts.notes }}</option>
 				<option value="replies">{{ i18n.ts.notesAndReplies }}</option>
 				<option value="files">{{ i18n.ts.withFiles }}</option>
-			</Tab>
+			</MkTab>
 		</template>
 		<XNotes :no-gap="true" :pagination="pagination" />
-	</StickyContainer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { ref, computed } from "vue";
 import * as misskey from "iceshrimp-js";
-import XNotes from "@/components/Notes.vue";
-import Tab from "@/components/Tab.vue";
+import XNotes from "@/components/MkNotes.vue";
+import MkTab from "@/components/MkTab.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 
diff --git a/packages/client/src/pages/user/Index.vue b/packages/client/src/pages/user/index.vue
similarity index 86%
rename from packages/client/src/pages/user/Index.vue
rename to packages/client/src/pages/user/index.vue
index 186449726..91e0cbaaa 100644
--- a/packages/client/src/pages/user/Index.vue
+++ b/packages/client/src/pages/user/index.vue
@@ -1,7 +1,7 @@
 <template>
-	<StickyContainer>
+	<MkStickyContainer>
 		<template #header>
-			<PageHeader
+			<MkPageHeader
 				v-model:tab="tab"
 				:actions="headerActions"
 				:tabs="headerTabs"
@@ -21,11 +21,11 @@
 					<XPages v-else-if="tab === 'pages'" :user="user" />
 					<XGallery v-else-if="tab === 'gallery'" :user="user" />
 				</div>
-				<Error v-else-if="error" @retry="fetchUser()" />
-				<Loading v-else />
+				<MkError v-else-if="error" @retry="fetchUser()" />
+				<MkLoading v-else />
 			</transition>
 		</div>
-	</StickyContainer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
@@ -42,11 +42,11 @@ import { definePageMetadata } from "@/scripts/page-metadata";
 import { i18n } from "@/i18n";
 import { $i } from "@/account";
 
-const XHome = defineAsyncComponent(() => import("./Home.vue"));
-const XReactions = defineAsyncComponent(() => import("./Reactions.vue"));
-const XClips = defineAsyncComponent(() => import("./Clips.vue"));
-const XPages = defineAsyncComponent(() => import("./Pages.vue"));
-const XGallery = defineAsyncComponent(() => import("./Gallery.vue"));
+const XHome = defineAsyncComponent(() => import("./home.vue"));
+const XReactions = defineAsyncComponent(() => import("./reactions.vue"));
+const XClips = defineAsyncComponent(() => import("./clips.vue"));
+const XPages = defineAsyncComponent(() => import("./pages.vue"));
+const XGallery = defineAsyncComponent(() => import("./gallery.vue"));
 
 const props = withDefaults(
 	defineProps<{
@@ -148,7 +148,6 @@ definePageMetadata(
 .fade-leave-active {
 	transition: opacity 0.125s ease;
 }
-
 .fade-enter-from,
 .fade-leave-to {
 	opacity: 0;
diff --git a/packages/client/src/pages/user/Pages.vue b/packages/client/src/pages/user/pages.vue
similarity index 62%
rename from packages/client/src/pages/user/Pages.vue
rename to packages/client/src/pages/user/pages.vue
index cf26cbc01..98050647d 100644
--- a/packages/client/src/pages/user/Pages.vue
+++ b/packages/client/src/pages/user/pages.vue
@@ -1,21 +1,21 @@
 <template>
-	<Spacer :content-max="800">
-		<Pagination v-slot="{ items }" ref="list" :pagination="pagination">
-			<PagePreview
+	<MkSpacer :content-max="800">
+		<MkPagination v-slot="{ items }" ref="list" :pagination="pagination">
+			<MkPagePreview
 				v-for="page in items"
 				:key="page.id"
 				:page="page"
 				class="_gap"
 			/>
-		</Pagination>
-	</Spacer>
+		</MkPagination>
+	</MkSpacer>
 </template>
 
 <script lang="ts" setup>
 import { computed } from "vue";
 import * as misskey from "iceshrimp-js";
-import PagePreview from "@/components/PagePreview.vue";
-import Pagination from "@/components/Pagination.vue";
+import MkPagePreview from "@/components/MkPagePreview.vue";
+import MkPagination from "@/components/MkPagination.vue";
 
 const props = defineProps<{
 	user: misskey.entities.User;
diff --git a/packages/client/src/pages/user/Reactions.vue b/packages/client/src/pages/user/reactions.vue
similarity index 67%
rename from packages/client/src/pages/user/Reactions.vue
rename to packages/client/src/pages/user/reactions.vue
index 24dbc4e6d..0228076cd 100644
--- a/packages/client/src/pages/user/Reactions.vue
+++ b/packages/client/src/pages/user/reactions.vue
@@ -1,6 +1,6 @@
 <template>
-	<Spacer :content-max="800">
-		<Pagination v-slot="{ items }" ref="list" :pagination="pagination">
+	<MkSpacer :content-max="800">
+		<MkPagination v-slot="{ items }" ref="list" :pagination="pagination">
 			<div
 				v-for="item in items"
 				:key="item.id"
@@ -8,27 +8,27 @@
 				class="item _panel _gap afdcfbfb"
 			>
 				<div class="header">
-					<Avatar class="avatar" :user="user" />
-					<ReactionIcon
+					<MkAvatar class="avatar" :user="user" />
+					<MkReactionIcon
 						class="reaction"
 						:reaction="item.type"
 						:custom-emojis="item.note.emojis"
 						:no-style="true"
 					/>
-					<Time :time="item.createdAt" class="createdAt" />
+					<MkTime :time="item.createdAt" class="createdAt" />
 				</div>
-				<Note :key="item.id" :note="item.note" />
+				<MkNote :key="item.id" :note="item.note" />
 			</div>
-		</Pagination>
-	</Spacer>
+		</MkPagination>
+	</MkSpacer>
 </template>
 
 <script lang="ts" setup>
 import { computed } from "vue";
 import * as misskey from "iceshrimp-js";
-import Pagination from "@/components/Pagination.vue";
-import Note from "@/components/Note.vue";
-import ReactionIcon from "@/components/ReactionIcon.vue";
+import MkPagination from "@/components/MkPagination.vue";
+import MkNote from "@/components/MkNote.vue";
+import MkReactionIcon from "@/components/MkReactionIcon.vue";
 
 const props = defineProps<{
 	user: misskey.entities.User;
diff --git a/packages/client/src/pages/VerifyEmail.vue b/packages/client/src/pages/verify-email.vue
similarity index 100%
rename from packages/client/src/pages/VerifyEmail.vue
rename to packages/client/src/pages/verify-email.vue
diff --git a/packages/client/src/pages/WelcomeEntranceA.vue b/packages/client/src/pages/welcome.entrance.a.vue
similarity index 83%
rename from packages/client/src/pages/WelcomeEntranceA.vue
rename to packages/client/src/pages/welcome.entrance.a.vue
index e486e1f30..9e3f8db06 100644
--- a/packages/client/src/pages/WelcomeEntranceA.vue
+++ b/packages/client/src/pages/welcome.entrance.a.vue
@@ -1,23 +1,23 @@
 <template>
 	<div v-if="meta" class="rsqzvsbo">
 		<div class="top">
-			<FeaturedPhotos class="bg" />
+			<MkFeaturedPhotos class="bg" />
 			<XTimeline class="tl" />
 			<div class="shape1"></div>
 			<div class="shape2"></div>
 			<img src="/client-assets/welcome-logo.svg" class="misskey" />
 			<div class="emojis">
-				<Emoji :normal="true" :no-style="true" emoji="⭐" />
-				<Emoji :normal="true" :no-style="true" emoji="❤️" />
-				<Emoji :normal="true" :no-style="true" emoji="😆" />
-				<Emoji :normal="true" :no-style="true" emoji="🤔" />
-				<Emoji :normal="true" :no-style="true" emoji="😮" />
-				<Emoji :normal="true" :no-style="true" emoji="🎉" />
-				<Emoji :normal="true" :no-style="true" emoji="💢" />
-				<Emoji :normal="true" :no-style="true" emoji="😥" />
-				<Emoji :normal="true" :no-style="true" emoji="😇" />
-				<Emoji :normal="true" :no-style="true" emoji="🥴" />
-				<Emoji :normal="true" :no-style="true" emoji="🍮" />
+				<MkEmoji :normal="true" :no-style="true" emoji="⭐" />
+				<MkEmoji :normal="true" :no-style="true" emoji="❤️" />
+				<MkEmoji :normal="true" :no-style="true" emoji="😆" />
+				<MkEmoji :normal="true" :no-style="true" emoji="🤔" />
+				<MkEmoji :normal="true" :no-style="true" emoji="😮" />
+				<MkEmoji :normal="true" :no-style="true" emoji="🎉" />
+				<MkEmoji :normal="true" :no-style="true" emoji="💢" />
+				<MkEmoji :normal="true" :no-style="true" emoji="😥" />
+				<MkEmoji :normal="true" :no-style="true" emoji="😇" />
+				<MkEmoji :normal="true" :no-style="true" emoji="🥴" />
+				<MkEmoji :normal="true" :no-style="true" emoji="🍮" />
 			</div>
 			<div class="main">
 				<img
@@ -49,35 +49,35 @@
 						></div>
 					</div>
 					<div class="action">
-						<Button
+						<MkButton
 							inline
 							rounded
 							gradate
 							data-cy-signup
 							style="margin-right: 12px"
 							@click="signup()"
-							>{{ i18n.ts.signup }}</Button
+							>{{ i18n.ts.signup }}</MkButton
 						>
-						<Button
+						<MkButton
 							inline
 							rounded
 							data-cy-signin
 							@click="signin()"
-							>{{ i18n.ts.login }}</Button
+							>{{ i18n.ts.login }}</MkButton
 						>
-						<Button
+						<MkButton
 							inline
 							rounded
 							style="margin-left: 12px; margin-top: 12px"
 							onclick="window.location.href='/explore'"
-							>Explore</Button
+							>Explore</MkButton
 						>
 					</div>
 				</div>
 			</div>
 			<div v-if="instances" class="federation">
 				<MarqueeText :duration="40">
-					<A
+					<MkA
 						v-for="instance in instances"
 						:key="instance.id"
 						:class="$style.federationInstance"
@@ -90,7 +90,7 @@
 							alt=""
 						/>
 						<span class="name _monospace">{{ instance.host }}</span>
-					</A>
+					</MkA>
 				</MarqueeText>
 			</div>
 		</div>
@@ -100,13 +100,13 @@
 <script lang="ts" setup>
 import {} from "vue";
 import { toUnicode } from "punycode/";
-import XTimeline from "./WelcomeTimeline.vue";
-import MarqueeText from "@/components/Marquee.vue";
-import XSigninDialog from "@/components/SigninDialog.vue";
-import XSignupDialog from "@/components/SignupDialog.vue";
-import Button from "@/components/Button.vue";
-import XNote from "@/components/Note.vue";
-import FeaturedPhotos from "@/components/FeaturedPhotos.vue";
+import XTimeline from "./welcome.timeline.vue";
+import MarqueeText from "@/components/MkMarquee.vue";
+import XSigninDialog from "@/components/MkSigninDialog.vue";
+import XSignupDialog from "@/components/MkSignupDialog.vue";
+import MkButton from "@/components/MkButton.vue";
+import XNote from "@/components/MkNote.vue";
+import MkFeaturedPhotos from "@/components/MkFeaturedPhotos.vue";
 import { host, instanceName } from "@/config";
 import * as os from "@/os";
 import number from "@/filters/number";
@@ -244,7 +244,6 @@ function showMenu(ev) {
 			background: var(--accent);
 			clip-path: polygon(0% 0%, 45% 0%, 20% 100%, 0% 100%);
 		}
-
 		> .shape2 {
 			position: absolute;
 			top: 0;
diff --git a/packages/client/src/pages/WelcomeEntranceB.vue b/packages/client/src/pages/welcome.entrance.b.vue
similarity index 89%
rename from packages/client/src/pages/WelcomeEntranceB.vue
rename to packages/client/src/pages/welcome.entrance.b.vue
index fa74cd4a3..bfdd2d02f 100644
--- a/packages/client/src/pages/WelcomeEntranceB.vue
+++ b/packages/client/src/pages/welcome.entrance.b.vue
@@ -1,7 +1,7 @@
 <template>
 	<div v-if="meta" class="rsqzvsbo">
 		<div class="top">
-			<FeaturedPhotos class="bg" />
+			<MkFeaturedPhotos class="bg" />
 			<XTimeline class="tl" />
 			<div class="shape"></div>
 			<div class="main">
@@ -19,12 +19,12 @@
 					></div>
 				</div>
 				<div class="action">
-					<Button class="signup" inline gradate @click="signup()">{{
+					<MkButton class="signup" inline gradate @click="signup()">{{
 						i18n.ts.signup
-					}}</Button>
-					<Button class="signin" inline @click="signin()">{{
+					}}</MkButton>
+					<MkButton class="signin" inline @click="signin()">{{
 						i18n.ts.login
-					}}</Button>
+					}}</MkButton>
 				</div>
 				<div v-if="onlineUsersCount && stats" class="status">
 					<div>
@@ -70,12 +70,12 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 import { toUnicode } from "punycode/";
-import XSigninDialog from "@/components/SigninDialog.vue";
-import XSignupDialog from "@/components/SignupDialog.vue";
-import Button from "@/components/Button.vue";
-import XNote from "@/components/Note.vue";
-import FeaturedPhotos from "@/components/FeaturedPhotos.vue";
-import XTimeline from "./WelcomeTimeline.vue";
+import XSigninDialog from "@/components/MkSigninDialog.vue";
+import XSignupDialog from "@/components/MkSignupDialog.vue";
+import MkButton from "@/components/MkButton.vue";
+import XNote from "@/components/MkNote.vue";
+import MkFeaturedPhotos from "@/components/MkFeaturedPhotos.vue";
+import XTimeline from "./welcome.timeline.vue";
 import { host, instanceName } from "@/config";
 import * as os from "@/os";
 import number from "@/filters/number";
@@ -83,10 +83,10 @@ import { i18n } from "@/i18n";
 
 export default defineComponent({
 	components: {
-		Button,
+		MkButton,
 		XNote,
 		XTimeline,
-		FeaturedPhotos,
+		MkFeaturedPhotos,
 	},
 
 	data() {
diff --git a/packages/client/src/pages/WelcomeEntranceC.vue b/packages/client/src/pages/welcome.entrance.c.vue
similarity index 84%
rename from packages/client/src/pages/WelcomeEntranceC.vue
rename to packages/client/src/pages/welcome.entrance.c.vue
index f90925e47..5e540a37a 100644
--- a/packages/client/src/pages/WelcomeEntranceC.vue
+++ b/packages/client/src/pages/welcome.entrance.c.vue
@@ -1,14 +1,14 @@
 <template>
 	<div v-if="meta" class="rsqzvsbo">
 		<div class="top">
-			<FeaturedPhotos class="bg" />
+			<MkFeaturedPhotos class="bg" />
 			<div class="fade"></div>
 			<div class="emojis">
-				<Emoji :normal="true" :no-style="true" emoji="👍" />
-				<Emoji :normal="true" :no-style="true" emoji="❤" />
-				<Emoji :normal="true" :no-style="true" emoji="😆" />
-				<Emoji :normal="true" :no-style="true" emoji="🎉" />
-				<Emoji :normal="true" :no-style="true" emoji="🍮" />
+				<MkEmoji :normal="true" :no-style="true" emoji="👍" />
+				<MkEmoji :normal="true" :no-style="true" emoji="❤" />
+				<MkEmoji :normal="true" :no-style="true" emoji="😆" />
+				<MkEmoji :normal="true" :no-style="true" emoji="🎉" />
+				<MkEmoji :normal="true" :no-style="true" emoji="🍮" />
 			</div>
 			<div class="main">
 				<img src="/client-assets/welcome-logo.svg" class="misskey" />
@@ -35,12 +35,12 @@
 							></div>
 						</div>
 						<div class="action">
-							<Button inline gradate @click="signup()">{{
+							<MkButton inline gradate @click="signup()">{{
 								i18n.ts.signup
-							}}</Button>
-							<Button inline @click="signin()">{{
+							}}</MkButton>
+							<MkButton inline @click="signin()">{{
 								i18n.ts.login
-							}}</Button>
+							}}</MkButton>
 						</div>
 						<div v-if="onlineUsersCount && stats" class="status">
 							<div>
@@ -83,10 +83,10 @@
 					</div>
 				</div>
 				<nav class="nav">
-					<A to="/announcements">{{ i18n.ts.announcements }}</A>
-					<A to="/explore">{{ i18n.ts.explore }}</A>
-					<A to="/channels">{{ i18n.ts.channel }}</A>
-					<A to="/featured">{{ i18n.ts.featured }}</A>
+					<MkA to="/announcements">{{ i18n.ts.announcements }}</MkA>
+					<MkA to="/explore">{{ i18n.ts.explore }}</MkA>
+					<MkA to="/channels">{{ i18n.ts.channel }}</MkA>
+					<MkA to="/featured">{{ i18n.ts.featured }}</MkA>
 				</nav>
 			</div>
 		</div>
@@ -96,12 +96,12 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 import { toUnicode } from "punycode/";
-import XTimeline from "./WelcomeTimeline.vue";
-import XSigninDialog from "@/components/SigninDialog.vue";
-import XSignupDialog from "@/components/SignupDialog.vue";
-import Button from "@/components/Button.vue";
-import XNote from "@/components/Note.vue";
-import FeaturedPhotos from "@/components/FeaturedPhotos.vue";
+import XTimeline from "./welcome.timeline.vue";
+import XSigninDialog from "@/components/MkSigninDialog.vue";
+import XSignupDialog from "@/components/MkSignupDialog.vue";
+import MkButton from "@/components/MkButton.vue";
+import XNote from "@/components/MkNote.vue";
+import MkFeaturedPhotos from "@/components/MkFeaturedPhotos.vue";
 import { host, instanceName } from "@/config";
 import * as os from "@/os";
 import number from "@/filters/number";
@@ -109,9 +109,9 @@ import { i18n } from "@/i18n";
 
 export default defineComponent({
 	components: {
-		Button,
+		MkButton,
 		XNote,
-		FeaturedPhotos,
+		MkFeaturedPhotos,
 		XTimeline,
 	},
 
diff --git a/packages/client/src/pages/WelcomeSetup.vue b/packages/client/src/pages/welcome.setup.vue
similarity index 88%
rename from packages/client/src/pages/WelcomeSetup.vue
rename to packages/client/src/pages/welcome.setup.vue
index 698dc0739..2f1e21290 100644
--- a/packages/client/src/pages/WelcomeSetup.vue
+++ b/packages/client/src/pages/welcome.setup.vue
@@ -3,7 +3,7 @@
 		<h1>Welcome to Iceshrimp!</h1>
 		<div class="_formRoot">
 			<p>{{ i18n.ts.intro }}</p>
-			<Input
+			<MkInput
 				v-model="username"
 				pattern="^[a-zA-Z0-9_]{1,20}$"
 				:spellcheck="false"
@@ -14,8 +14,8 @@
 				<template #label>{{ i18n.ts.username }}</template>
 				<template #prefix>@</template>
 				<template #suffix>@{{ host }}</template>
-			</Input>
-			<Input
+			</MkInput>
+			<MkInput
 				v-model="password"
 				type="password"
 				data-cy-admin-password
@@ -25,17 +25,17 @@
 				<template #prefix
 					><i class="ph-lock ph-bold ph-lg"></i
 				></template>
-			</Input>
+			</MkInput>
 			<div class="bottom _formBlock">
-				<Button
+				<MkButton
 					gradate
 					type="submit"
 					:disabled="submitting"
 					data-cy-admin-ok
 				>
-					{{ submitting ? i18n.ts.processing : i18n.ts.done }}
-					<Ellipsis v-if="submitting" />
-				</Button>
+					{{ submitting ? i18n.ts.processing : i18n.ts.done
+					}}<MkEllipsis v-if="submitting" />
+				</MkButton>
 			</div>
 		</div>
 	</form>
@@ -43,8 +43,8 @@
 
 <script lang="ts" setup>
 import {} from "vue";
-import Button from "@/components/Button.vue";
-import Input from "@/components/form/Input.vue";
+import MkButton from "@/components/MkButton.vue";
+import MkInput from "@/components/form/input.vue";
 import { host } from "@/config";
 import * as os from "@/os";
 import { login } from "@/account";
diff --git a/packages/client/src/pages/WelcomeTimeline.vue b/packages/client/src/pages/welcome.timeline.vue
similarity index 86%
rename from packages/client/src/pages/WelcomeTimeline.vue
rename to packages/client/src/pages/welcome.timeline.vue
index 74774316a..26f5fa4b0 100644
--- a/packages/client/src/pages/WelcomeTimeline.vue
+++ b/packages/client/src/pages/welcome.timeline.vue
@@ -8,12 +8,12 @@
 			<div v-for="note in notes" class="note">
 				<div class="content _panel" v-if="note.cw == null">
 					<div class="body">
-						<A
+						<MkA
 							v-if="note.replyId"
 							class="reply"
 							:to="`/notes/${note.replyId}`"
 							><i class="ph-arrow-bend-up-left ph-bold ph-lg"></i
-						></A>
+						></MkA>
 						<Mfm
 							v-if="note.text"
 							:text="note.text"
@@ -21,7 +21,7 @@
 							:i="$i"
 							:custom-emojis="note.emojis"
 						/>
-						<!-- <A v-if="note.renoteId" class="rp" :to="`/notes/${note.renoteId}`">RN: ...</A> -->
+						<!-- <MkA v-if="note.renoteId" class="rp" :to="`/notes/${note.renoteId}`">RN: ...</MkA> -->
 					</div>
 					<div v-if="note.files.length > 0" class="richcontent">
 						<XMediaList :media-list="note.files" />
@@ -38,9 +38,9 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import XReactionsViewer from "@/components/ReactionsViewer.vue";
-import XMediaList from "@/components/MediaList.vue";
-import XPoll from "@/components/Poll.vue";
+import XReactionsViewer from "@/components/MkReactionsViewer.vue";
+import XMediaList from "@/components/MkMediaList.vue";
+import XPoll from "@/components/MkPoll.vue";
 import * as os from "@/os";
 
 export default defineComponent({
@@ -76,15 +76,12 @@ export default defineComponent({
 	0% {
 		transform: translate3d(0, 0, 0);
 	}
-
 	5% {
 		transform: translate3d(0, 0, 0);
 	}
-
 	75% {
 		transform: translate3d(0, calc(-100% + 90vh), 0);
 	}
-
 	90% {
 		transform: translate3d(0, calc(-100% + 90vh), 0);
 	}
diff --git a/packages/client/src/pages/Welcome.vue b/packages/client/src/pages/welcome.vue
similarity index 86%
rename from packages/client/src/pages/Welcome.vue
rename to packages/client/src/pages/welcome.vue
index a3c112832..2b66a9168 100644
--- a/packages/client/src/pages/Welcome.vue
+++ b/packages/client/src/pages/welcome.vue
@@ -7,8 +7,8 @@
 
 <script lang="ts" setup>
 import { computed } from "vue";
-import XSetup from "./WelcomeSetup.vue";
-import XEntrance from "./WelcomeEntranceA.vue";
+import XSetup from "./welcome.setup.vue";
+import XEntrance from "./welcome.entrance.a.vue";
 import { instanceName } from "@/config";
 import * as os from "@/os";
 import { definePageMetadata } from "@/scripts/page-metadata";
diff --git a/packages/client/src/router.ts b/packages/client/src/router.ts
index 2f830b899..925bede67 100644
--- a/packages/client/src/router.ts
+++ b/packages/client/src/router.ts
@@ -1,309 +1,313 @@
 import { AsyncComponentLoader, defineAsyncComponent, inject } from "vue";
 import { Router } from "@/nirax";
 import { $i, iAmModerator } from "@/account";
-import Loading from "@/pages/Loading.vue";
-import Error from "@/pages/Error.vue";
+import MkLoading from "@/pages/_loading_.vue";
+import MkError from "@/pages/_error_.vue";
 
 const page = (loader: AsyncComponentLoader<any>) =>
 	defineAsyncComponent({
 		loader: loader,
-		loadingComponent: Loading,
-		errorComponent: Error,
+		loadingComponent: MkLoading,
+		errorComponent: MkError,
 	});
 
 export const routes = [
 	{
 		path: "/@:initUser/pages/:initPageName/view-source",
-		component: page(() => import("./pages/page-editor/PageEditor.vue")),
+		component: page(() => import("./pages/page-editor/page-editor.vue")),
 	},
 	{
 		path: "/@:username/pages/:pageName",
-		component: page(() => import("./pages/Page.vue")),
+		component: page(() => import("./pages/page.vue")),
 	},
 	{
 		path: "/@:acct/following",
-		component: page(() => import("./pages/user/Following.vue")),
+		component: page(() => import("./pages/user/following.vue")),
 	},
 	{
 		path: "/@:acct/followers",
-		component: page(() => import("./pages/user/Followers.vue")),
+		component: page(() => import("./pages/user/followers.vue")),
 	},
 	{
 		name: "user",
 		path: "/@:acct/:page?",
-		component: page(() => import("./pages/user/Index.vue")),
+		component: page(() => import("./pages/user/index.vue")),
 	},
 	{
 		name: "note",
 		path: "/notes/:noteId",
-		component: page(() => import("./pages/Note.vue")),
+		component: page(() => import("./pages/note.vue")),
 	},
 	{
 		path: "/clips/:clipId",
-		component: page(() => import("./pages/Clip.vue")),
+		component: page(() => import("./pages/clip.vue")),
 	},
 	{
 		path: "/user-info/:userId",
-		component: page(() => import("./pages/UserInfo.vue")),
+		component: page(() => import("./pages/user-info.vue")),
 	},
 	{
 		path: "/instance-info/:host",
-		component: page(() => import("./pages/InstanceInfo.vue")),
+		component: page(() => import("./pages/instance-info.vue")),
 	},
 	{
 		path: "/public/local",
-		component: page(() => import("./pages/NoGraze.vue")),
+		component: page(() => import("./pages/no-graze.vue")),
 	},
 	{
 		name: "settings",
 		path: "/settings",
-		component: page(() => import("./pages/settings/Index.vue")),
+		component: page(() => import("./pages/settings/index.vue")),
 		loginRequired: true,
 		children: [
 			{
 				path: "/profile",
 				name: "profile",
-				component: page(() => import("./pages/settings/Profile.vue")),
+				component: page(() => import("./pages/settings/profile.vue")),
 			},
 			{
 				path: "/privacy",
 				name: "privacy",
-				component: page(() => import("./pages/settings/Privacy.vue")),
+				component: page(() => import("./pages/settings/privacy.vue")),
 			},
 			{
 				path: "/reaction",
 				name: "reaction",
-				component: page(() => import("./pages/settings/Reaction.vue")),
+				component: page(() => import("./pages/settings/reaction.vue")),
 			},
 			{
 				path: "/drive",
 				name: "drive",
-				component: page(() => import("./pages/settings/Drive.vue")),
+				component: page(() => import("./pages/settings/drive.vue")),
 			},
 			{
 				path: "/notifications",
 				name: "notifications",
-				component: page(() => import("./pages/settings/Notifications.vue")),
+				component: page(() => import("./pages/settings/notifications.vue")),
 			},
 			{
 				path: "/email",
 				name: "email",
-				component: page(() => import("./pages/settings/Email.vue")),
+				component: page(() => import("./pages/settings/email.vue")),
 			},
 			{
 				path: "/integration",
 				name: "integration",
-				component: page(() => import("./pages/settings/Integration.vue")),
+				component: page(() => import("./pages/settings/integration.vue")),
 			},
 			{
 				path: "/security",
 				name: "security",
-				component: page(() => import("./pages/settings/Security.vue")),
+				component: page(() => import("./pages/settings/security.vue")),
 			},
 			{
 				path: "/general",
 				name: "general",
-				component: page(() => import("./pages/settings/General.vue")),
+				component: page(() => import("./pages/settings/general.vue")),
 			},
 			{
 				path: "/theme/install",
 				name: "theme",
-				component: page(() => import("./pages/settings/ThemeInstall.vue")),
+				component: page(() => import("./pages/settings/theme.install.vue")),
 			},
 			{
 				path: "/theme/manage",
 				name: "theme",
-				component: page(() => import("./pages/settings/ThemeManage.vue")),
+				component: page(() => import("./pages/settings/theme.manage.vue")),
 			},
 			{
 				path: "/theme",
 				name: "theme",
-				component: page(() => import("./pages/settings/Theme.vue")),
+				component: page(() => import("./pages/settings/theme.vue")),
 			},
 			{
 				path: "/custom-css",
 				name: "custom-css",
-				component: page(() => import("./pages/settings/CustomCss.vue")),
+				component: page(() => import("./pages/settings/custom-css.vue")),
 			},
 			{
 				path: "/custom-katex-macro",
 				name: "custom-katex-macro",
-				component: page(() => import("./pages/settings/CustomKatexMacro.vue")),
+				component: page(
+					() => import("./pages/settings/custom-katex-macro.vue"),
+				),
 			},
 			{
 				path: "/account-info",
 				name: "account-info",
-				component: page(() => import("./pages/settings/AccountInfo.vue")),
+				component: page(() => import("./pages/settings/account-info.vue")),
 			},
 			{
 				path: "/navbar",
 				name: "navbar",
-				component: page(() => import("./pages/settings/Navbar.vue")),
+				component: page(() => import("./pages/settings/navbar.vue")),
 			},
 			{
 				path: "/statusbar",
 				name: "statusbar",
-				component: page(() => import("./pages/settings/StatusbarPage.vue")),
+				component: page(() => import("./pages/settings/statusbar.vue")),
 			},
 			{
 				path: "/sounds",
 				name: "sounds",
-				component: page(() => import("./pages/settings/Sounds.vue")),
+				component: page(() => import("./pages/settings/sounds.vue")),
 			},
 			{
 				path: "/plugin/install",
 				name: "plugin",
-				component: page(() => import("./pages/settings/PluginInstall.vue")),
+				component: page(() => import("./pages/settings/plugin.install.vue")),
 			},
 			{
 				path: "/plugin",
 				name: "plugin",
-				component: page(() => import("./pages/settings/Plugin.vue")),
+				component: page(() => import("./pages/settings/plugin.vue")),
 			},
 			{
 				path: "/import-export",
 				name: "import-export",
-				component: page(() => import("./pages/settings/ImportExport.vue")),
+				component: page(() => import("./pages/settings/import-export.vue")),
 			},
 			{
 				path: "/instance-mute",
 				name: "instance-mute",
-				component: page(() => import("./pages/settings/InstanceMute.vue")),
+				component: page(() => import("./pages/settings/instance-mute.vue")),
 			},
 			{
 				path: "/mute-block",
 				name: "mute-block",
-				component: page(() => import("./pages/settings/MuteBlock.vue")),
+				component: page(() => import("./pages/settings/mute-block.vue")),
 			},
 			{
 				path: "/word-mute",
 				name: "word-mute",
-				component: page(() => import("./pages/settings/WordMute.vue")),
+				component: page(() => import("./pages/settings/word-mute.vue")),
 			},
 			{
 				path: "/api",
 				name: "api",
-				component: page(() => import("./pages/settings/Api.vue")),
+				component: page(() => import("./pages/settings/api.vue")),
 			},
 			{
 				path: "/apps",
 				name: "apps",
-				component: page(() => import("./pages/settings/Apps.vue")),
+				component: page(() => import("./pages/settings/apps.vue")),
 			},
 			{
 				path: "/webhook/edit/:webhookId",
 				name: "webhook",
-				component: page(() => import("./pages/settings/WebhookEdit.vue")),
+				component: page(() => import("./pages/settings/webhook.edit.vue")),
 			},
 			{
 				path: "/webhook/new",
 				name: "webhook",
-				component: page(() => import("./pages/settings/WebhookNew.vue")),
+				component: page(() => import("./pages/settings/webhook.new.vue")),
 			},
 			{
 				path: "/webhook",
 				name: "webhook",
-				component: page(() => import("./pages/settings/Webhook.vue")),
+				component: page(() => import("./pages/settings/webhook.vue")),
 			},
 			{
 				path: "/deck",
 				name: "deck",
-				component: page(() => import("./pages/settings/Deck.vue")),
+				component: page(() => import("./pages/settings/deck.vue")),
 			},
 			{
 				path: "/delete-account",
 				name: "delete-account",
-				component: page(() => import("./pages/settings/DeleteAccount.vue")),
+				component: page(() => import("./pages/settings/delete-account.vue")),
 			},
 			{
 				path: "/preferences-backups",
 				name: "preferences-backups",
 				component: page(
-					() => import("./pages/settings/PreferencesBackups.vue"),
+					() => import("./pages/settings/preferences-backups.vue"),
 				),
 			},
 			{
 				path: "/migration",
 				name: "migration",
-				component: page(() => import("./pages/settings/Migration.vue")),
+				component: page(() => import("./pages/settings/migration.vue")),
 			},
 			{
 				path: "/custom-css",
 				name: "general",
-				component: page(() => import("./pages/settings/CustomCss.vue")),
+				component: page(() => import("./pages/settings/custom-css.vue")),
 			},
 			{
 				path: "/custom-katex-macro",
 				name: "general",
-				component: page(() => import("./pages/settings/CustomKatexMacro.vue")),
+				component: page(
+					() => import("./pages/settings/custom-katex-macro.vue"),
+				),
 			},
 			{
 				path: "/accounts",
 				name: "profile",
-				component: page(() => import("./pages/settings/Accounts.vue")),
+				component: page(() => import("./pages/settings/accounts.vue")),
 			},
 			{
 				path: "/account-info",
 				name: "other",
-				component: page(() => import("./pages/settings/AccountInfo.vue")),
+				component: page(() => import("./pages/settings/account-info.vue")),
 			},
 			{
 				path: "/delete-account",
 				name: "other",
-				component: page(() => import("./pages/settings/DeleteAccount.vue")),
+				component: page(() => import("./pages/settings/delete-account.vue")),
 			},
 			{
 				path: "/other",
 				name: "other",
-				component: page(() => import("./pages/settings/Other.vue")),
+				component: page(() => import("./pages/settings/other.vue")),
 			},
 			{
 				path: "/",
-				component: page(() => import("./pages/Empty.vue")),
+				component: page(() => import("./pages/_empty_.vue")),
 			},
 		],
 	},
 	{
 		path: "/reset-password/:token?",
-		component: page(() => import("./pages/ResetPassword.vue")),
+		component: page(() => import("./pages/reset-password.vue")),
 	},
 	{
 		path: "/signup-complete/:code",
-		component: page(() => import("./pages/SignupComplete.vue")),
+		component: page(() => import("./pages/signup-complete.vue")),
 	},
 	{
 		path: "/verify-email/:code",
-		component: page(() => import("./pages/VerifyEmail.vue")),
+		component: page(() => import("./pages/verify-email.vue")),
 	},
 	{
 		path: "/announcements",
-		component: page(() => import("./pages/Announcements.vue")),
+		component: page(() => import("./pages/announcements.vue")),
 	},
 	{
 		path: "/about",
-		component: page(() => import("./pages/About.vue")),
+		component: page(() => import("./pages/about.vue")),
 		hash: "initialTab",
 	},
 	{
 		path: "/about-iceshrimp",
-		component: page(() => import("./pages/AboutIceshrimp.vue")),
+		component: page(() => import("./pages/about-iceshrimp.vue")),
 	},
 	{
 		path: "/theme-editor",
-		component: page(() => import("./pages/ThemeEditor.vue")),
+		component: page(() => import("./pages/theme-editor.vue")),
 		loginRequired: true,
 	},
 	{
 		path: "/explore/tags/:tag",
-		component: page(() => import("./pages/Explore.vue")),
+		component: page(() => import("./pages/explore.vue")),
 	},
 	{
 		path: "/explore",
-		component: page(() => import("./pages/Explore.vue")),
+		component: page(() => import("./pages/explore.vue")),
 	},
 	{
 		path: "/search",
-		component: page(() => import("./pages/Search.vue")),
+		component: page(() => import("./pages/search.vue")),
 		query: {
 			q: "query",
 			channel: "channel",
@@ -311,50 +315,50 @@ export const routes = [
 	},
 	{
 		path: "/authorize-follow",
-		component: page(() => import("./pages/Follow.vue")),
+		component: page(() => import("./pages/follow.vue")),
 		loginRequired: true,
 	},
 	{
 		path: "/share",
-		component: page(() => import("./pages/Share.vue")),
+		component: page(() => import("./pages/share.vue")),
 		loginRequired: true,
 	},
 	{
 		path: "/api-console",
-		component: page(() => import("./pages/ApiConsole.vue")),
+		component: page(() => import("./pages/api-console.vue")),
 		loginRequired: true,
 	},
 	{
 		path: "/mfm-cheat-sheet",
-		component: page(() => import("./pages/MfmCheatsheet.vue")),
+		component: page(() => import("./pages/mfm-cheat-sheet.vue")),
 	},
 	{
 		path: "/scratchpad",
-		component: page(() => import("./pages/Scratchpad.vue")),
+		component: page(() => import("./pages/scratchpad.vue")),
 	},
 	{
 		path: "/preview",
-		component: page(() => import("./pages/Preview.vue")),
+		component: page(() => import("./pages/preview.vue")),
 	},
 	{
 		path: "/auth/:token",
-		component: page(() => import("./pages/Auth.vue")),
+		component: page(() => import("./pages/auth.vue")),
 	},
 	{
 		path: "/oauth/authorize",
-		component: page(() => import("./pages/OAuth.vue")),
+		component: page(() => import("./pages/oauth.vue")),
 		query: {
 			response_type: "response_type",
 			client_id: "client_id",
 			redirect_uri: "redirect_uri",
 			scope: "scope",
 			force_login: "force_login",
-			lang: "lang",
-		},
+			lang: "lang"
+		}
 	},
 	{
 		path: "/miauth/:session",
-		component: page(() => import("./pages/MiAuth.vue")),
+		component: page(() => import("./pages/miauth.vue")),
 		query: {
 			callback: "callback",
 			name: "name",
@@ -364,290 +368,290 @@ export const routes = [
 	},
 	{
 		path: "/tags/:tag",
-		component: page(() => import("./pages/Tag.vue")),
+		component: page(() => import("./pages/tag.vue")),
 	},
 	{
 		path: "/pages/new",
-		component: page(() => import("./pages/page-editor/PageEditor.vue")),
+		component: page(() => import("./pages/page-editor/page-editor.vue")),
 		loginRequired: true,
 	},
 	{
 		path: "/pages/edit/:initPageId",
-		component: page(() => import("./pages/page-editor/PageEditor.vue")),
+		component: page(() => import("./pages/page-editor/page-editor.vue")),
 		loginRequired: true,
 	},
 	{
 		path: "/pages",
-		component: page(() => import("./pages/Pages.vue")),
+		component: page(() => import("./pages/pages.vue")),
 	},
 	{
 		path: "/gallery/:postId/edit",
-		component: page(() => import("./pages/gallery/Edit.vue")),
+		component: page(() => import("./pages/gallery/edit.vue")),
 		loginRequired: true,
 	},
 	{
 		path: "/gallery/new",
-		component: page(() => import("./pages/gallery/Edit.vue")),
+		component: page(() => import("./pages/gallery/edit.vue")),
 		loginRequired: true,
 	},
 	{
 		path: "/gallery/:postId",
-		component: page(() => import("./pages/gallery/Post.vue")),
+		component: page(() => import("./pages/gallery/post.vue")),
 	},
 	{
 		path: "/gallery",
-		component: page(() => import("./pages/gallery/Index.vue")),
+		component: page(() => import("./pages/gallery/index.vue")),
 	},
 	{
 		path: "/channels/:channelId/edit",
-		component: page(() => import("./pages/ChannelEditor.vue")),
+		component: page(() => import("./pages/channel-editor.vue")),
 		loginRequired: true,
 	},
 	{
 		path: "/channels/new",
-		component: page(() => import("./pages/ChannelEditor.vue")),
+		component: page(() => import("./pages/channel-editor.vue")),
 		loginRequired: true,
 	},
 	{
 		path: "/channels/:channelId",
-		component: page(() => import("./pages/Channel.vue")),
+		component: page(() => import("./pages/channel.vue")),
 	},
 	{
 		path: "/channels",
-		component: page(() => import("./pages/Channels.vue")),
+		component: page(() => import("./pages/channels.vue")),
 	},
 	{
 		path: "/registry/keys/system/:path(*)?",
-		component: page(() => import("./pages/RegistryKeys.vue")),
+		component: page(() => import("./pages/registry.keys.vue")),
 	},
 	{
 		path: "/registry/value/system/:path(*)?",
-		component: page(() => import("./pages/RegistryValue.vue")),
+		component: page(() => import("./pages/registry.value.vue")),
 	},
 	{
 		path: "/registry",
-		component: page(() => import("./pages/Registry.vue")),
+		component: page(() => import("./pages/registry.vue")),
 	},
 	{
 		path: "/admin/file/:fileId",
 		component: iAmModerator
-			? page(() => import("./pages/AdminFile.vue"))
-			: page(() => import("./pages/NotFound.vue")),
+			? page(() => import("./pages/admin-file.vue"))
+			: page(() => import("./pages/not-found.vue")),
 	},
 	{
 		path: "/admin",
 		component: iAmModerator
-			? page(() => import("./pages/admin/Index.vue"))
-			: page(() => import("./pages/NotFound.vue")),
+			? page(() => import("./pages/admin/index.vue"))
+			: page(() => import("./pages/not-found.vue")),
 		children: [
 			{
 				path: "/overview",
 				name: "overview",
-				component: page(() => import("./pages/admin/Overview.vue")),
+				component: page(() => import("./pages/admin/overview.vue")),
 			},
 			{
 				path: "/users",
 				name: "users",
-				component: page(() => import("./pages/admin/Users.vue")),
+				component: page(() => import("./pages/admin/users.vue")),
 			},
 			{
 				path: "/hashtags",
 				name: "hashtags",
-				component: page(() => import("./pages/admin/Hashtags.vue")),
+				component: page(() => import("./pages/admin/hashtags.vue")),
 			},
 			{
 				path: "/emojis",
 				name: "emojis",
-				component: page(() => import("./pages/admin/Emojis.vue")),
+				component: page(() => import("./pages/admin/emojis.vue")),
 			},
 			{
 				path: "/federation",
 				name: "federation",
-				component: page(() => import("./pages/admin/Federation.vue")),
+				component: page(() => import("./pages/admin/federation.vue")),
 			},
 			{
 				path: "/queue",
 				name: "queue",
-				component: page(() => import("./pages/admin/Queue.vue")),
+				component: page(() => import("./pages/admin/queue.vue")),
 			},
 			{
 				path: "/files",
 				name: "files",
-				component: page(() => import("./pages/admin/Files.vue")),
+				component: page(() => import("./pages/admin/files.vue")),
 			},
 			{
 				path: "/announcements",
 				name: "announcements",
-				component: page(() => import("./pages/admin/Announcements.vue")),
+				component: page(() => import("./pages/admin/announcements.vue")),
 			},
 			{
 				path: "/database",
 				name: "database",
-				component: page(() => import("./pages/admin/Database.vue")),
+				component: page(() => import("./pages/admin/database.vue")),
 			},
 			{
 				path: "/abuses",
 				name: "abuses",
-				component: page(() => import("./pages/admin/Abuses.vue")),
+				component: page(() => import("./pages/admin/abuses.vue")),
 			},
 			{
 				path: "/settings",
 				name: "settings",
-				component: page(() => import("./pages/admin/Settings.vue")),
+				component: page(() => import("./pages/admin/settings.vue")),
 			},
 			{
 				path: "/email-settings",
 				name: "email-settings",
-				component: page(() => import("./pages/admin/EmailSettings.vue")),
+				component: page(() => import("./pages/admin/email-settings.vue")),
 			},
 			{
 				path: "/object-storage",
 				name: "object-storage",
-				component: page(() => import("./pages/admin/ObjectStorage.vue")),
+				component: page(() => import("./pages/admin/object-storage.vue")),
 			},
 			{
 				path: "/security",
 				name: "security",
-				component: page(() => import("./pages/admin/Security.vue")),
+				component: page(() => import("./pages/admin/security.vue")),
 			},
 			{
 				path: "/relays",
 				name: "relays",
-				component: page(() => import("./pages/admin/Relays.vue")),
+				component: page(() => import("./pages/admin/relays.vue")),
 			},
 			{
 				path: "/integrations",
 				name: "integrations",
-				component: page(() => import("./pages/admin/Integrations.vue")),
+				component: page(() => import("./pages/admin/integrations.vue")),
 			},
 			{
 				path: "/instance-block",
 				name: "instance-block",
-				component: page(() => import("./pages/admin/InstanceBlock.vue")),
+				component: page(() => import("./pages/admin/instance-block.vue")),
 			},
 			{
 				path: "/other-settings",
 				name: "other-settings",
-				component: page(() => import("./pages/admin/OtherSettings.vue")),
+				component: page(() => import("./pages/admin/other-settings.vue")),
 			},
 			{
 				path: "/other-settings",
 				name: "other-settings",
-				component: page(() => import("./pages/admin/CustomCss.vue")),
+				component: page(() => import("./pages/admin/custom-css.vue")),
 			},
 			{
 				path: "/experiments",
 				name: "experiments",
-				component: page(() => import("./pages/admin/Experiments.vue")),
+				component: page(() => import("./pages/admin/experiments.vue")),
 			},
 			{
 				path: "/",
-				component: page(() => import("./pages/Empty.vue")),
+				component: page(() => import("./pages/_empty_.vue")),
 			},
 		],
 	},
 	{
 		path: "/my/notifications",
-		component: page(() => import("./pages/Notifications.vue")),
+		component: page(() => import("./pages/notifications.vue")),
 		loginRequired: true,
 	},
 	{
 		path: "/my/favorites",
-		component: page(() => import("./pages/Favorites.vue")),
+		component: page(() => import("./pages/favorites.vue")),
 		loginRequired: true,
 	},
 	{
 		name: "messaging",
 		path: "/my/messaging",
-		component: page(() => import("./pages/messaging/Index.vue")),
+		component: page(() => import("./pages/messaging/index.vue")),
 		loginRequired: true,
 	},
 	{
 		path: "/my/messaging/:userAcct",
-		component: page(() => import("./pages/messaging/MessagingRoom.vue")),
+		component: page(() => import("./pages/messaging/messaging-room.vue")),
 		loginRequired: true,
 	},
 	{
 		path: "/my/messaging/group/:groupId",
-		component: page(() => import("./pages/messaging/MessagingRoom.vue")),
+		component: page(() => import("./pages/messaging/messaging-room.vue")),
 		loginRequired: true,
 	},
 	{
 		path: "/my/drive/folder/:folder",
-		component: page(() => import("./pages/Drive.vue")),
+		component: page(() => import("./pages/drive.vue")),
 		loginRequired: true,
 	},
 	{
 		path: "/my/drive",
-		component: page(() => import("./pages/Drive.vue")),
+		component: page(() => import("./pages/drive.vue")),
 		loginRequired: true,
 	},
 	{
 		path: "/my/follow-requests",
-		component: page(() => import("./pages/FollowRequests.vue")),
+		component: page(() => import("./pages/follow-requests.vue")),
 		loginRequired: true,
 	},
 	{
 		path: "/my/lists/:listId",
-		component: page(() => import("./pages/my-lists/List.vue")),
+		component: page(() => import("./pages/my-lists/list.vue")),
 		loginRequired: true,
 	},
 	{
 		path: "/my/lists",
-		component: page(() => import("./pages/my-lists/Index.vue")),
+		component: page(() => import("./pages/my-lists/index.vue")),
 		loginRequired: true,
 	},
 	{
 		path: "/my/clips",
-		component: page(() => import("./pages/my-clips/Index.vue")),
+		component: page(() => import("./pages/my-clips/index.vue")),
 		loginRequired: true,
 	},
 	{
 		path: "/my/groups",
-		component: page(() => import("./pages/my-groups/Index.vue")),
+		component: page(() => import("./pages/my-groups/index.vue")),
 		loginRequired: true,
 	},
 	{
 		path: "/my/groups/:groupId",
-		component: page(() => import("./pages/my-groups/Group.vue")),
+		component: page(() => import("./pages/my-groups/group.vue")),
 		loginRequired: true,
 	},
 	{
 		path: "/my/antennas/create",
-		component: page(() => import("./pages/my-antennas/Create.vue")),
+		component: page(() => import("./pages/my-antennas/create.vue")),
 		loginRequired: true,
 	},
 	{
 		path: "/my/antennas/:antennaId",
-		component: page(() => import("./pages/my-antennas/Edit.vue")),
+		component: page(() => import("./pages/my-antennas/edit.vue")),
 		loginRequired: true,
 	},
 	{
 		path: "/my/antennas",
-		component: page(() => import("./pages/my-antennas/Index.vue")),
+		component: page(() => import("./pages/my-antennas/index.vue")),
 		loginRequired: true,
 	},
 	{
 		path: "/timeline/list/:listId",
-		component: page(() => import("./pages/UserListTimeline.vue")),
+		component: page(() => import("./pages/user-list-timeline.vue")),
 		loginRequired: true,
 	},
 	{
 		path: "/timeline/antenna/:antennaId",
-		component: page(() => import("./pages/AntennaTimeline.vue")),
+		component: page(() => import("./pages/antenna-timeline.vue")),
 		loginRequired: true,
 	},
 	{
 		name: "index",
 		path: "/",
 		component: $i
-			? page(() => import("./pages/Timeline.vue"))
-			: page(() => import("./pages/Welcome.vue")),
+			? page(() => import("./pages/timeline.vue"))
+			: page(() => import("./pages/welcome.vue")),
 		globalCacheKey: "index",
 	},
 	{
 		path: "/:(*)",
-		component: page(() => import("./pages/NotFound.vue")),
+		component: page(() => import("./pages/not-found.vue")),
 	},
 ];
 
diff --git a/packages/client/src/scripts/aiscript/api.ts b/packages/client/src/scripts/aiscript/api.ts
index e7159081f..9ec2db963 100644
--- a/packages/client/src/scripts/aiscript/api.ts
+++ b/packages/client/src/scripts/aiscript/api.ts
@@ -8,14 +8,14 @@ export function createAiScriptEnv(opts) {
 		USER_ID: $i ? values.STR($i.id) : values.NULL,
 		USER_NAME: $i ? values.STR($i.name) : values.NULL,
 		USER_USERNAME: $i ? values.STR($i.username) : values.NULL,
-		":dialog": values.FN_NATIVE(async ([title, text, type]) => {
+		"Mk:dialog": values.FN_NATIVE(async ([title, text, type]) => {
 			await os.alert({
 				type: type ? type.value : "info",
 				title: title.value,
 				text: text.value,
 			});
 		}),
-		":confirm": values.FN_NATIVE(async ([title, text, type]) => {
+		"Mk:confirm": values.FN_NATIVE(async ([title, text, type]) => {
 			const confirm = await os.confirm({
 				type: type ? type.value : "question",
 				title: title.value,
@@ -23,7 +23,7 @@ export function createAiScriptEnv(opts) {
 			});
 			return confirm.canceled ? values.FALSE : values.TRUE;
 		}),
-		":api": values.FN_NATIVE(async ([ep, param, token]) => {
+		"Mk:api": values.FN_NATIVE(async ([ep, param, token]) => {
 			if (token) {
 				utils.assertString(token);
 				// バグがあればundefinedもあり得るため念のため
@@ -38,7 +38,7 @@ export function createAiScriptEnv(opts) {
 			);
 			return utils.jsToVal(res);
 		}),
-		":save": values.FN_NATIVE(([key, value]) => {
+		"Mk:save": values.FN_NATIVE(([key, value]) => {
 			utils.assertString(key);
 			localStorage.setItem(
 				`aiscript:${opts.storageKey}:${key.value}`,
@@ -46,7 +46,7 @@ export function createAiScriptEnv(opts) {
 			);
 			return values.NULL;
 		}),
-		":load": values.FN_NATIVE(([key]) => {
+		"Mk:load": values.FN_NATIVE(([key]) => {
 			utils.assertString(key);
 			return utils.jsToVal(
 				JSON.parse(
diff --git a/packages/client/src/scripts/autocomplete.ts b/packages/client/src/scripts/autocomplete.ts
index bc8dd4338..99f9dce40 100644
--- a/packages/client/src/scripts/autocomplete.ts
+++ b/packages/client/src/scripts/autocomplete.ts
@@ -170,7 +170,7 @@ export class Autocomplete {
 			const _q = ref(q);
 
 			const { dispose } = await popup(
-				defineAsyncComponent(() => import("@/components/Autocomplete.vue")),
+				defineAsyncComponent(() => import("@/components/MkAutocomplete.vue")),
 				{
 					textarea: this.textarea,
 					close: this.close,
diff --git a/packages/client/src/scripts/get-note-menu.ts b/packages/client/src/scripts/get-note-menu.ts
index ae64b25d3..3c05bc619 100644
--- a/packages/client/src/scripts/get-note-menu.ts
+++ b/packages/client/src/scripts/get-note-menu.ts
@@ -397,7 +397,7 @@ export function getNoteMenu(props: {
 								`${url}/notes/${appearNote.id}`;
 							os.popup(
 								defineAsyncComponent(
-									() => import("@/components/AbuseReportWindow.vue"),
+									() => import("@/components/MkAbuseReportWindow.vue"),
 								),
 								{
 									user: appearNote.user,
diff --git a/packages/client/src/scripts/get-user-menu.ts b/packages/client/src/scripts/get-user-menu.ts
index 666791f21..e23ef97a0 100644
--- a/packages/client/src/scripts/get-user-menu.ts
+++ b/packages/client/src/scripts/get-user-menu.ts
@@ -193,7 +193,9 @@ export function getUserMenu(user, router: Router = mainRouter) {
 
 	function reportAbuse() {
 		os.popup(
-			defineAsyncComponent(() => import("@/components/AbuseReportWindow.vue")),
+			defineAsyncComponent(
+				() => import("@/components/MkAbuseReportWindow.vue"),
+			),
 			{
 				user: user,
 			},
diff --git a/packages/client/src/scripts/helpMenu.ts b/packages/client/src/scripts/helpMenu.ts
index fc6064bed..a31f99ad3 100644
--- a/packages/client/src/scripts/helpMenu.ts
+++ b/packages/client/src/scripts/helpMenu.ts
@@ -2,7 +2,7 @@ import { defaultStore } from "@/store";
 import { instance } from "@/instance";
 import { host } from "@/config";
 import * as os from "@/os";
-import XTutorial from "../components/TutorialDialog.vue";
+import XTutorial from "../components/MkTutorialDialog.vue";
 import { i18n } from "@/i18n";
 
 export function openHelpMenu_(ev: MouseEvent) {
diff --git a/packages/client/src/scripts/hpml/lib.ts b/packages/client/src/scripts/hpml/lib.ts
index 9440767ef..d0f774e36 100644
--- a/packages/client/src/scripts/hpml/lib.ts
+++ b/packages/client/src/scripts/hpml/lib.ts
@@ -22,10 +22,10 @@ Chart.pluginService.register({
 
 export function initAiLib(hpml: Hpml) {
 	return {
-		"Pages:updated": values.FN_NATIVE(([callback]) => {
+		"MkPages:updated": values.FN_NATIVE(([callback]) => {
 			hpml.pageVarUpdatedCallback = callback as values.VFn;
 		}),
-		"Pages:get_canvas": values.FN_NATIVE(([id]) => {
+		"MkPages:get_canvas": values.FN_NATIVE(([id]) => {
 			utils.assertString(id);
 			const canvas = hpml.canvases[id.value];
 			const ctx = canvas.getContext("2d");
@@ -152,7 +152,7 @@ export function initAiLib(hpml: Hpml) {
 				]),
 			);
 		}),
-		"Pages:chart": values.FN_NATIVE(([id, opts]) => {
+		"MkPages:chart": values.FN_NATIVE(([id, opts]) => {
 			/* TODO
 			utils.assertString(id);
 			utils.assertObject(opts);
diff --git a/packages/client/src/scripts/please-login.ts b/packages/client/src/scripts/please-login.ts
index 6a034dfb0..9b660dd6d 100644
--- a/packages/client/src/scripts/please-login.ts
+++ b/packages/client/src/scripts/please-login.ts
@@ -7,7 +7,7 @@ export function pleaseLogin(path?: string) {
 	if ($i) return;
 
 	popup(
-		defineAsyncComponent(() => import("@/components/SigninDialog.vue")),
+		defineAsyncComponent(() => import("@/components/MkSigninDialog.vue")),
 		{
 			autoSet: true,
 			message: i18n.ts.signinRequired,
diff --git a/packages/client/src/scripts/reaction-picker.ts b/packages/client/src/scripts/reaction-picker.ts
index 103f65cb8..8baa50278 100644
--- a/packages/client/src/scripts/reaction-picker.ts
+++ b/packages/client/src/scripts/reaction-picker.ts
@@ -13,7 +13,9 @@ class ReactionPicker {
 
 	public async init() {
 		await popup(
-			defineAsyncComponent(() => import("@/components/EmojiPickerDialog.vue")),
+			defineAsyncComponent(
+				() => import("@/components/MkEmojiPickerDialog.vue"),
+			),
 			{
 				src: this.src,
 				asReactionPicker: true,
diff --git a/packages/client/src/scripts/theme.ts b/packages/client/src/scripts/theme.ts
index 7a52cfe9f..1fb81e1d2 100644
--- a/packages/client/src/scripts/theme.ts
+++ b/packages/client/src/scripts/theme.ts
@@ -52,7 +52,7 @@ export const getBuiltinThemes = () =>
 			"d-green-orange",
 			"d-cherry",
 			"d-ice",
-			"d-u0",
+			"d-u0"
 		].map((name) =>
 			import(`../themes/${name}.json5`).then(
 				({ default: _default }): Theme => _default,
@@ -138,13 +138,10 @@ function compile(theme: Theme): Record<string, string> {
 				case "lighten":
 					return color.lighten(arg);
 				case "alpha":
-					if (
-						!defaultStore.state.useBlurEffect &&
-						key &&
-						ignoreAlphaForKeys.includes(key)
-					) {
+					if (!defaultStore.state.useBlurEffect && key && ignoreAlphaForKeys.includes(key)) {
 						return color.setAlpha(1.0);
-					} else {
+					}
+					else {
 						return color.setAlpha(arg);
 					}
 				case "hue":
diff --git a/packages/client/src/scripts/use-chart-tooltip.ts b/packages/client/src/scripts/use-chart-tooltip.ts
index ea5fd7776..13ed0e571 100644
--- a/packages/client/src/scripts/use-chart-tooltip.ts
+++ b/packages/client/src/scripts/use-chart-tooltip.ts
@@ -1,6 +1,6 @@
 import { onUnmounted, onDeactivated, ref } from "vue";
 import * as os from "@/os";
-import ChartTooltip from "@/components/ChartTooltip.vue";
+import MkChartTooltip from "@/components/MkChartTooltip.vue";
 
 export function useChartTooltip(
 	opts: { position: "top" | "middle" } = { position: "top" },
@@ -13,7 +13,7 @@ export function useChartTooltip(
 	let disposeTooltipComponent;
 
 	os.popup(
-		ChartTooltip,
+		MkChartTooltip,
 		{
 			showing: tooltipShowing,
 			x: tooltipX,
diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss
index 563203e92..3fd3eb973 100644
--- a/packages/client/src/style.scss
+++ b/packages/client/src/style.scss
@@ -320,11 +320,11 @@ hr {
 	);
 
 	&:not(:disabled):hover {
-		background: var(--accentLightenLess);
+			background: var(--accentLightenLess)
 	}
 
 	&:not(:disabled):active {
-		background: var(--accentLightenLess);
+		background: var(--accentLightenLess)
 	}
 }
 
diff --git a/packages/client/src/ui/common/Common.vue b/packages/client/src/ui/_common_/common.vue
similarity index 93%
rename from packages/client/src/ui/common/Common.vue
rename to packages/client/src/ui/_common_/common.vue
index 96bfe2692..e87c3c6d6 100644
--- a/packages/client/src/ui/common/Common.vue
+++ b/packages/client/src/ui/_common_/common.vue
@@ -26,9 +26,9 @@ import { $i } from "@/account";
 import { stream } from "@/stream";
 
 const XStreamIndicator = defineAsyncComponent(
-	() => import("./StreamIndicator.vue"),
+	() => import("./stream-indicator.vue"),
 );
-const XUpload = defineAsyncComponent(() => import("./Upload.vue"));
+const XUpload = defineAsyncComponent(() => import("./upload.vue"));
 
 const dev = _DEV_;
 
@@ -42,7 +42,7 @@ const onNotification = (notification) => {
 
 		popup(
 			defineAsyncComponent(
-				() => import("@/components/NotificationToast.vue"),
+				() => import("@/components/MkNotificationToast.vue"),
 			),
 			{
 				notification,
@@ -71,11 +71,9 @@ if ($i) {
 	0% {
 		opacity: 1;
 	}
-
 	50% {
 		opacity: 0;
 	}
-
 	100% {
 		opacity: 1;
 	}
@@ -85,7 +83,6 @@ if ($i) {
 	0% {
 		transform: rotate(0deg);
 	}
-
 	100% {
 		transform: rotate(360deg);
 	}
diff --git a/packages/client/src/ui/common/NavbarMobile.vue b/packages/client/src/ui/_common_/navbar-for-mobile.vue
similarity index 96%
rename from packages/client/src/ui/common/NavbarMobile.vue
rename to packages/client/src/ui/_common_/navbar-for-mobile.vue
index f74262c69..6e6204761 100644
--- a/packages/client/src/ui/common/NavbarMobile.vue
+++ b/packages/client/src/ui/_common_/navbar-for-mobile.vue
@@ -15,15 +15,15 @@
 					class="item _button account"
 					@click="openAccountMenu"
 				>
-					<Avatar
+					<MkAvatar
 						:user="$i"
 						class="icon"
 						disableLink
-					/><!-- <Acct class="text" :user="$i"/> -->
+					/><!-- <MkAcct class="text" :user="$i"/> -->
 				</button>
 			</div>
 			<div class="middle">
-				<A
+				<MkA
 					v-click-anime
 					class="item index"
 					active-class="active"
@@ -32,11 +32,11 @@
 				>
 					<i class="icon ph-house ph-bold ph-lg ph-fw ph-lg"></i
 					><span class="text">{{ i18n.ts.timeline }}</span>
-				</A>
+				</MkA>
 				<template v-for="item in menu">
 					<div v-if="item === '-'" class="divider"></div>
 					<component
-						:is="navbarItemDef[item].to ? 'A' : 'button'"
+						:is="navbarItemDef[item].to ? 'MkA' : 'button'"
 						v-else-if="
 							navbarItemDef[item] &&
 							navbarItemDef[item].show !== false
@@ -70,7 +70,7 @@
 					</component>
 				</template>
 				<div class="divider"></div>
-				<A
+				<MkA
 					v-if="$i.isAdmin || $i.isModerator"
 					v-click-anime
 					class="item"
@@ -79,7 +79,7 @@
 				>
 					<i class="icon ph-door ph-bold ph-lg ph-fw ph-lg"></i
 					><span class="text">{{ i18n.ts.controlPanel }}</span>
-				</A>
+				</MkA>
 				<div class="divider" v-if="$i.isAdmin || $i.isModerator"></div>
 				<button v-click-anime class="item _button" @click="more">
 					<i
@@ -93,7 +93,7 @@
 						><i class="icon ph-circle ph-fill"></i
 					></span>
 				</button>
-				<A
+				<MkA
 					v-click-anime
 					class="item"
 					active-class="active"
@@ -101,7 +101,7 @@
 				>
 					<i class="icon ph-gear-six ph-bold ph-lg ph-fw ph-lg"></i
 					><span class="text">{{ i18n.ts.settings }}</span>
-				</A>
+				</MkA>
 			</div>
 			<div class="bottom">
 				<button
@@ -152,7 +152,7 @@ function openAccountMenu(ev: MouseEvent) {
 
 function more() {
 	os.popup(
-		defineAsyncComponent(() => import("@/components/LaunchPad.vue")),
+		defineAsyncComponent(() => import("@/components/MkLaunchPad.vue")),
 		{},
 		{},
 		"closed",
diff --git a/packages/client/src/ui/common/Navbar.vue b/packages/client/src/ui/_common_/navbar.vue
similarity index 95%
rename from packages/client/src/ui/common/Navbar.vue
rename to packages/client/src/ui/_common_/navbar.vue
index 05bbf5a6c..0327ff1eb 100644
--- a/packages/client/src/ui/common/Navbar.vue
+++ b/packages/client/src/ui/_common_/navbar.vue
@@ -15,15 +15,15 @@
 					class="item _button account"
 					@click="openAccountMenu"
 				>
-					<Avatar
+					<MkAvatar
 						:user="$i"
 						class="icon"
 						disableLink
-					/><!-- <Acct class="text" :user="$i"/> -->
+					/><!-- <MkAcct class="text" :user="$i"/> -->
 				</button>
 			</div>
 			<nav class="middle">
-				<A
+				<MkA
 					v-click-anime
 					v-tooltip.noDelay.right="i18n.ts.timeline"
 					class="item index"
@@ -33,11 +33,11 @@
 				>
 					<i class="icon ph-house ph-bold ph-fw ph-lg"></i
 					><span class="text">{{ i18n.ts.timeline }}</span>
-				</A>
+				</MkA>
 				<template v-for="item in menu">
 					<div v-if="item === '-'" class="divider"></div>
 					<component
-						:is="navbarItemDef[item].to ? 'A' : 'button'"
+						:is="navbarItemDef[item].to ? 'MkA' : 'button'"
 						v-else-if="
 							navbarItemDef[item] &&
 							navbarItemDef[item].show !== false
@@ -71,7 +71,7 @@
 					</component>
 				</template>
 				<div class="divider"></div>
-				<A
+				<MkA
 					v-if="$i.isAdmin || $i.isModerator"
 					v-click-anime
 					v-tooltip.noDelay.right="i18n.ts.controlPanel"
@@ -88,10 +88,11 @@
 							updateAvailable
 						"
 						class="indicator"
-						><i class="icon ph-circle ph-fill"></i></span
+					><i class="icon ph-circle ph-fill"></i>
+					</span
 					><i class="icon ph-door ph-bold ph-fw ph-lg"></i
 					><span class="text">{{ i18n.ts.controlPanel }}</span>
-				</A>
+				</MkA>
 				<div class="divider" v-if="$i.isAdmin || $i.isModerator"></div>
 				<button
 					v-click-anime
@@ -107,7 +108,7 @@
 						><i class="icon ph-circle ph-fill"></i
 					></span>
 				</button>
-				<A
+				<MkA
 					v-click-anime
 					v-tooltip.noDelay.right="i18n.ts.settings"
 					class="item _button"
@@ -116,7 +117,7 @@
 				>
 					<i class="icon ph-gear-six ph-bold ph-fw ph-lg"></i
 					><span class="text">{{ i18n.ts.settings }}</span>
-				</A>
+				</MkA>
 			</nav>
 			<div class="bottom">
 				<button
@@ -132,7 +133,7 @@
 				<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" alt="" class="icon"/>
 			</button> -->
 				<!-- <button v-click-anime v-tooltip.noDelay.right="`${i18n.ts.account}: @${$i.username}`" class="item _button account" @click="openAccountMenu">
-				<Avatar :user="$i" class="account"/><Acct class="text" :user="$i"/>
+				<MkAvatar :user="$i" class="account"/><MkAcct class="text" :user="$i"/>
 			</button> -->
 			</div>
 		</div>
@@ -206,12 +207,8 @@ if ($i?.isAdmin) {
 				updateAvailable = false;
 				return;
 			}
-			const tagDate = tag.includes("-")
-				? tag.substring(0, tag.indexOf("-"))
-				: tag;
-			const versionDate = version.includes("-")
-				? version.substring(0, version.indexOf("-"))
-				: version;
+			const tagDate = tag.includes('-') ? tag.substring(0, tag.indexOf('-')) : tag;
+			const versionDate = version.includes('-') ? version.substring(0, version.indexOf('-')) : version;
 			if (tagDate < versionDate) {
 				updateAvailable = false;
 				return;
@@ -233,7 +230,7 @@ function openAccountMenu(ev: MouseEvent) {
 
 function more(ev: MouseEvent) {
 	os.popup(
-		defineAsyncComponent(() => import("@/components/LaunchPad.vue")),
+		defineAsyncComponent(() => import("@/components/MkLaunchPad.vue")),
 		{
 			src: ev.currentTarget ?? ev.target,
 		},
@@ -260,15 +257,12 @@ function more(ev: MouseEvent) {
 		box-sizing: border-box;
 		overflow: auto;
 		overflow-x: clip;
-
 		#iceshrimp_app > :not(.wallpaper) & {
 			background: var(--navBg);
 		}
-
 		#iceshrimp_app > .wallpaper:not(.centered) & {
 			border-right: 1px solid var(--divider);
 		}
-
 		contain: strict;
 		display: flex;
 		flex-direction: column;
@@ -285,7 +279,6 @@ function more(ev: MouseEvent) {
 				position: relative;
 				z-index: 1;
 				padding: 2rem 0;
-
 				> .banner {
 					position: absolute;
 					top: 0;
@@ -646,7 +639,7 @@ function more(ev: MouseEvent) {
 							opacity: 1;
 						}
 					}
-
+					
 					&:hover,
 					&:focus-within {
 						&:before {
@@ -666,7 +659,6 @@ function more(ev: MouseEvent) {
 
 	.item {
 		outline: none;
-
 		&:focus-visible:before {
 			outline: auto;
 		}
diff --git a/packages/client/src/ui/common/StatusbarFederation.vue b/packages/client/src/ui/_common_/statusbar-federation.vue
similarity index 97%
rename from packages/client/src/ui/common/StatusbarFederation.vue
rename to packages/client/src/ui/_common_/statusbar-federation.vue
index 8c067c3c2..5f0cd8315 100644
--- a/packages/client/src/ui/common/StatusbarFederation.vue
+++ b/packages/client/src/ui/_common_/statusbar-federation.vue
@@ -21,12 +21,12 @@
 							:src="getInstanceIcon(instance)"
 							alt=""
 						/>
-						<A
+						<MkA
 							:to="`/instance-info/${instance.host}`"
 							class="host _monospace"
 						>
 							{{ instance.host }}
-						</A>
+						</MkA>
 						<span class="divider"></span>
 					</span>
 				</MarqueeText>
@@ -41,7 +41,7 @@
 <script lang="ts" setup>
 import { computed, defineAsyncComponent, ref, toRef, watch } from "vue";
 import * as misskey from "iceshrimp-js";
-import MarqueeText from "@/components/Marquee.vue";
+import MarqueeText from "@/components/MkMarquee.vue";
 import * as os from "@/os";
 import { useInterval } from "@/scripts/use-interval";
 import { getNoteSummary } from "@/scripts/get-note-summary";
@@ -93,12 +93,10 @@ function getInstanceIcon(instance): string {
 	top: 0;
 	transition: all 1s ease;
 }
-
 .change-enter-from {
 	opacity: 0;
 	transform: translateY(-100%);
 }
-
 .change-leave-to {
 	opacity: 0;
 	transform: translateY(100%);
diff --git a/packages/client/src/ui/common/StatusbarRss.vue b/packages/client/src/ui/_common_/statusbar-rss.vue
similarity index 97%
rename from packages/client/src/ui/common/StatusbarRss.vue
rename to packages/client/src/ui/_common_/statusbar-rss.vue
index 478a7d06c..606f3f1bd 100644
--- a/packages/client/src/ui/common/StatusbarRss.vue
+++ b/packages/client/src/ui/_common_/statusbar-rss.vue
@@ -28,7 +28,7 @@
 
 <script lang="ts" setup>
 import { computed, defineAsyncComponent, ref, toRef, watch } from "vue";
-import MarqueeText from "@/components/Marquee.vue";
+import MarqueeText from "@/components/MkMarquee.vue";
 import * as os from "@/os";
 import { useInterval } from "@/scripts/use-interval";
 import { shuffle } from "@/scripts/shuffle";
@@ -73,12 +73,10 @@ useInterval(tick, Math.max(5000, props.refreshIntervalSec * 1000), {
 	top: 0;
 	transition: all 1s ease;
 }
-
 .change-enter-from {
 	opacity: 0;
 	transform: translateY(-100%);
 }
-
 .change-leave-to {
 	opacity: 0;
 	transform: translateY(100%);
diff --git a/packages/client/src/ui/common/StatusbarUserList.vue b/packages/client/src/ui/_common_/statusbar-user-list.vue
similarity index 95%
rename from packages/client/src/ui/common/StatusbarUserList.vue
rename to packages/client/src/ui/_common_/statusbar-user-list.vue
index 40f2d502e..5ef771e19 100644
--- a/packages/client/src/ui/common/StatusbarUserList.vue
+++ b/packages/client/src/ui/_common_/statusbar-user-list.vue
@@ -13,7 +13,7 @@
 							:src="note.user.avatarUrl"
 							decoding="async"
 						/>
-						<A class="text" :to="notePage(note)">
+						<MkA class="text" :to="notePage(note)">
 							<Mfm
 								class="text"
 								:text="getNoteSummary(note)"
@@ -21,7 +21,7 @@
 								:nowrap="true"
 								:custom-emojis="note.emojis"
 							/>
-						</A>
+						</MkA>
 						<span class="divider"></span>
 					</span>
 				</MarqueeText>
@@ -36,7 +36,7 @@
 <script lang="ts" setup>
 import { computed, defineAsyncComponent, ref, toRef, watch } from "vue";
 import * as misskey from "iceshrimp-js";
-import MarqueeText from "@/components/Marquee.vue";
+import MarqueeText from "@/components/MkMarquee.vue";
 import * as os from "@/os";
 import { useInterval } from "@/scripts/use-interval";
 import { getNoteSummary } from "@/scripts/get-note-summary";
@@ -81,12 +81,10 @@ useInterval(tick, Math.max(5000, props.refreshIntervalSec * 1000), {
 	top: 0;
 	transition: all 1s ease;
 }
-
 .change-enter-from {
 	opacity: 0;
 	transform: translateY(-100%);
 }
-
 .change-leave-to {
 	opacity: 0;
 	transform: translateY(100%);
diff --git a/packages/client/src/ui/common/Statusbars.vue b/packages/client/src/ui/_common_/statusbars.vue
similarity index 92%
rename from packages/client/src/ui/common/Statusbars.vue
rename to packages/client/src/ui/_common_/statusbars.vue
index 40df5e7a0..830f9f570 100644
--- a/packages/client/src/ui/common/Statusbars.vue
+++ b/packages/client/src/ui/_common_/statusbars.vue
@@ -52,11 +52,13 @@
 import { computed, defineAsyncComponent, ref, toRef, watch } from "vue";
 import * as os from "@/os";
 import { defaultStore } from "@/store";
-const XRss = defineAsyncComponent(() => import("./StatusbarRss.vue"));
+const XRss = defineAsyncComponent(() => import("./statusbar-rss.vue"));
 const XFederation = defineAsyncComponent(
-	() => import("./StatusbarFederation.vue"),
+	() => import("./statusbar-federation.vue"),
+);
+const XUserList = defineAsyncComponent(
+	() => import("./statusbar-user-list.vue"),
 );
-const XUserList = defineAsyncComponent(() => import("./StatusbarUserList.vue"));
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/ui/common/StreamIndicator.vue b/packages/client/src/ui/_common_/stream-indicator.vue
similarity index 100%
rename from packages/client/src/ui/common/StreamIndicator.vue
rename to packages/client/src/ui/_common_/stream-indicator.vue
diff --git a/packages/client/src/ui/common/sw-inject.ts b/packages/client/src/ui/_common_/sw-inject.ts
similarity index 100%
rename from packages/client/src/ui/common/sw-inject.ts
rename to packages/client/src/ui/_common_/sw-inject.ts
diff --git a/packages/client/src/ui/common/Upload.vue b/packages/client/src/ui/_common_/upload.vue
similarity index 97%
rename from packages/client/src/ui/common/Upload.vue
rename to packages/client/src/ui/_common_/upload.vue
index 25499824e..01b882c2c 100644
--- a/packages/client/src/ui/common/Upload.vue
+++ b/packages/client/src/ui/_common_/upload.vue
@@ -15,9 +15,8 @@
 						<span
 							v-if="ctx.progressValue === undefined"
 							class="initing"
-							>{{ i18n.ts.waiting }}
-							<Ellipsis />
-						</span>
+							>{{ i18n.ts.waiting }}<MkEllipsis
+						/></span>
 						<span v-if="ctx.progressValue !== undefined" class="kb"
 							>{{
 								String(
@@ -76,18 +75,15 @@ const zIndex = os.claimZIndex("high");
 	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
 	border-radius: 8px;
 }
-
 .mk-uploader:empty {
 	display: none;
 }
-
 .mk-uploader > ol {
 	display: block;
 	margin: 0;
 	padding: 0;
 	list-style: none;
 }
-
 .mk-uploader > ol > li {
 	display: grid;
 	margin: 8px 0 0 0;
@@ -100,13 +96,11 @@ const zIndex = os.claimZIndex("high");
 	column-gap: 8px;
 	box-sizing: content-box;
 }
-
 .mk-uploader > ol > li:first-child {
 	margin: 0;
 	box-shadow: none;
 	border-top: none;
 }
-
 .mk-uploader > ol > li > .img {
 	position: relative;
 	display: block;
@@ -115,13 +109,11 @@ const zIndex = os.claimZIndex("high");
 	grid-column: 1/2;
 	grid-row: 1/3;
 }
-
 .mk-uploader > ol > li > .top {
 	display: flex;
 	grid-column: 2/3;
 	grid-row: 1/2;
 }
-
 .mk-uploader > ol > li > .top > .name {
 	display: block;
 	padding: 0 8px 0 0;
@@ -132,11 +124,9 @@ const zIndex = os.claimZIndex("high");
 	overflow: hidden;
 	flex-shrink: 1;
 }
-
 .mk-uploader > ol > li > .top > .name > i {
 	margin-right: 4px;
 }
-
 .mk-uploader > ol > li > .top > .status {
 	display: block;
 	margin: 0 0 0 auto;
@@ -144,23 +134,18 @@ const zIndex = os.claimZIndex("high");
 	font-size: 0.8em;
 	flex-shrink: 0;
 }
-
 .mk-uploader > ol > li > .top > .status > .initing {
 }
-
 .mk-uploader > ol > li > .top > .status > .kb {
 }
-
 .mk-uploader > ol > li > .top > .status > .percentage {
 	display: inline-block;
 	width: 48px;
 	text-align: right;
 }
-
 .mk-uploader > ol > li > .top > .status > .percentage:after {
 	content: "%";
 }
-
 .mk-uploader > ol > li > progress {
 	display: block;
 	background: transparent;
@@ -173,11 +158,9 @@ const zIndex = os.claimZIndex("high");
 	width: 100%;
 	height: 8px;
 }
-
 .mk-uploader > ol > li > progress::-webkit-progress-value {
 	background: var(--accent);
 }
-
 .mk-uploader > ol > li > progress::-webkit-progress-bar {
 	//background: var(--accentAlpha01);
 	background: transparent;
diff --git a/packages/client/src/ui/Deck.vue b/packages/client/src/ui/deck.vue
similarity index 96%
rename from packages/client/src/ui/Deck.vue
rename to packages/client/src/ui/deck.vue
index 3213033f7..905c6ee36 100644
--- a/packages/client/src/ui/Deck.vue
+++ b/packages/client/src/ui/deck.vue
@@ -30,7 +30,7 @@
 													)
 													.map((c) => c.width),
 											) + 'px',
-								  }
+									}
 						"
 						@wheel.self="onWheel"
 					>
@@ -58,7 +58,7 @@
 											columns.find(
 												(c) => c.id === ids[0],
 											)!.width + 'px',
-								  }
+									}
 						"
 						@parent-focus="moveFocus(ids[0], $event)"
 						@headerWheel="onWheel"
@@ -66,9 +66,9 @@
 				</template>
 				<div v-if="layout.length === 0" class="intro _panel">
 					<div>{{ i18n.ts._deck.introduction }}</div>
-					<Button primary class="add" @click="addColumn">{{
+					<MkButton primary class="add" @click="addColumn">{{
 						i18n.ts._deck.addColumn
-					}}</Button>
+					}}</MkButton>
 					<div>{{ i18n.ts._deck.introduction2 }}</div>
 				</div>
 				<div class="sideMenu">
@@ -191,7 +191,7 @@ import {
 	watch,
 } from "vue";
 import { v4 as uuid } from "uuid";
-import XCommon from "./common/Common.vue";
+import XCommon from "./_common_/common.vue";
 import {
 	addColumn as addColumnToStore,
 	deckStore,
@@ -200,10 +200,10 @@ import {
 	loadDeck,
 	renameProfile as renameProfile_,
 } from "./deck/deck-store";
-import DeckColumnCore from "@/ui/deck/ColumnCore.vue";
-import XSidebar from "@/ui/common/Navbar.vue";
-import XDrawerMenu from "@/ui/common/NavbarMobile.vue";
-import Button from "@/components/Button.vue";
+import DeckColumnCore from "@/ui/deck/column-core.vue";
+import XSidebar from "@/ui/_common_/navbar.vue";
+import XDrawerMenu from "@/ui/_common_/navbar-for-mobile.vue";
+import MkButton from "@/components/MkButton.vue";
 import { getScrollContainer } from "@/scripts/scroll";
 import * as os from "@/os";
 import { navbarItemDef } from "@/navbar";
@@ -212,7 +212,7 @@ import { i18n } from "@/i18n";
 import { mainRouter } from "@/router";
 import { unisonReload } from "@/scripts/unison-reload";
 const XStatusBars = defineAsyncComponent(
-	() => import("@/ui/common/Statusbars.vue"),
+	() => import("@/ui/_common_/statusbars.vue"),
 );
 
 mainRouter.navHook = (path, flag): boolean => {
@@ -393,7 +393,6 @@ async function deleteProfile() {
 		transform 300ms cubic-bezier(0.23, 1, 0.32, 1),
 		opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
 }
-
 .menu-enter-from,
 .menu-leave-active {
 	opacity: 0;
@@ -405,7 +404,6 @@ async function deleteProfile() {
 	opacity: 1;
 	transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
 }
-
 .menu-back-enter-from,
 .menu-back-leave-active {
 	opacity: 0;
diff --git a/packages/client/src/ui/deck/AntennaColumn.vue b/packages/client/src/ui/deck/antenna-column.vue
similarity index 94%
rename from packages/client/src/ui/deck/AntennaColumn.vue
rename to packages/client/src/ui/deck/antenna-column.vue
index 4f0a1647e..8e3001738 100644
--- a/packages/client/src/ui/deck/AntennaColumn.vue
+++ b/packages/client/src/ui/deck/antenna-column.vue
@@ -22,10 +22,10 @@
 
 <script lang="ts" setup>
 import { onMounted } from "vue";
-import XColumn from "./Column.vue";
+import XColumn from "./column.vue";
 import type { Column } from "./deck-store";
 import { updateColumn } from "./deck-store";
-import XTimeline from "@/components/Timeline.vue";
+import XTimeline from "@/components/MkTimeline.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 
diff --git a/packages/client/src/ui/deck/ChannelColumn.vue b/packages/client/src/ui/deck/channel-column.vue
similarity index 94%
rename from packages/client/src/ui/deck/ChannelColumn.vue
rename to packages/client/src/ui/deck/channel-column.vue
index 422eac152..e53290d97 100644
--- a/packages/client/src/ui/deck/ChannelColumn.vue
+++ b/packages/client/src/ui/deck/channel-column.vue
@@ -22,10 +22,10 @@
 
 <script lang="ts" setup>
 import {} from "vue";
-import XColumn from "./Column.vue";
+import XColumn from "./column.vue";
 import type { Column } from "./deck-store";
 import { updateColumn } from "./deck-store";
-import XTimeline from "@/components/Timeline.vue";
+import XTimeline from "@/components/MkTimeline.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 
diff --git a/packages/client/src/ui/deck/ColumnCore.vue b/packages/client/src/ui/deck/column-core.vue
similarity index 79%
rename from packages/client/src/ui/deck/ColumnCore.vue
rename to packages/client/src/ui/deck/column-core.vue
index b3db70918..4c3c93734 100644
--- a/packages/client/src/ui/deck/ColumnCore.vue
+++ b/packages/client/src/ui/deck/column-core.vue
@@ -59,15 +59,15 @@
 
 <script lang="ts" setup>
 import {} from "vue";
-import XMainColumn from "./MainColumn.vue";
-import XTlColumn from "./TimelineColumn.vue";
-import XAntennaColumn from "./AntennaColumn.vue";
-import XListColumn from "./ListColumn.vue";
-import XNotificationsColumn from "./NotificationsColumn.vue";
-import XWidgetsColumn from "./WidgetsColumn.vue";
-import XMentionsColumn from "./MentionsColumn.vue";
-import XDirectColumn from "./DirectColumn.vue";
-import XChannelColumn from "./ChannelColumn.vue";
+import XMainColumn from "./main-column.vue";
+import XTlColumn from "./tl-column.vue";
+import XAntennaColumn from "./antenna-column.vue";
+import XListColumn from "./list-column.vue";
+import XNotificationsColumn from "./notifications-column.vue";
+import XWidgetsColumn from "./widgets-column.vue";
+import XMentionsColumn from "./mentions-column.vue";
+import XDirectColumn from "./direct-column.vue";
+import XChannelColumn from "./channel-column.vue";
 import type { Column } from "./deck-store";
 
 defineProps<{
diff --git a/packages/client/src/ui/deck/Column.vue b/packages/client/src/ui/deck/column.vue
similarity index 100%
rename from packages/client/src/ui/deck/Column.vue
rename to packages/client/src/ui/deck/column.vue
diff --git a/packages/client/src/ui/deck/DirectColumn.vue b/packages/client/src/ui/deck/direct-column.vue
similarity index 89%
rename from packages/client/src/ui/deck/DirectColumn.vue
rename to packages/client/src/ui/deck/direct-column.vue
index 5dc61a48d..5973cbe37 100644
--- a/packages/client/src/ui/deck/DirectColumn.vue
+++ b/packages/client/src/ui/deck/direct-column.vue
@@ -18,9 +18,9 @@
 
 <script lang="ts" setup>
 import {} from "vue";
-import XColumn from "./Column.vue";
+import XColumn from "./column.vue";
 import type { Column } from "./deck-store";
-import XNotes from "@/components/Notes.vue";
+import XNotes from "@/components/MkNotes.vue";
 
 defineProps<{
 	column: Column;
diff --git a/packages/client/src/ui/deck/ListColumn.vue b/packages/client/src/ui/deck/list-column.vue
similarity index 94%
rename from packages/client/src/ui/deck/ListColumn.vue
rename to packages/client/src/ui/deck/list-column.vue
index 2cd8733e6..110258f0e 100644
--- a/packages/client/src/ui/deck/ListColumn.vue
+++ b/packages/client/src/ui/deck/list-column.vue
@@ -22,10 +22,10 @@
 
 <script lang="ts" setup>
 import {} from "vue";
-import XColumn from "./Column.vue";
+import XColumn from "./column.vue";
 import type { Column } from "./deck-store";
 import { updateColumn } from "./deck-store";
-import XTimeline from "@/components/Timeline.vue";
+import XTimeline from "@/components/MkTimeline.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 
diff --git a/packages/client/src/ui/deck/MainColumn.vue b/packages/client/src/ui/deck/main-column.vue
similarity index 98%
rename from packages/client/src/ui/deck/MainColumn.vue
rename to packages/client/src/ui/deck/main-column.vue
index c7edff391..b284f9073 100644
--- a/packages/client/src/ui/deck/MainColumn.vue
+++ b/packages/client/src/ui/deck/main-column.vue
@@ -22,7 +22,7 @@
 <script lang="ts" setup>
 import type { ComputedRef } from "vue";
 import { provide } from "vue";
-import XColumn from "./Column.vue";
+import XColumn from "./column.vue";
 import type { Column } from "@/ui/deck/deck-store";
 import { deckStore } from "@/ui/deck/deck-store";
 import * as os from "@/os";
diff --git a/packages/client/src/ui/deck/MentionsColumn.vue b/packages/client/src/ui/deck/mentions-column.vue
similarity index 88%
rename from packages/client/src/ui/deck/MentionsColumn.vue
rename to packages/client/src/ui/deck/mentions-column.vue
index 4dc7c3595..08e11dd21 100644
--- a/packages/client/src/ui/deck/MentionsColumn.vue
+++ b/packages/client/src/ui/deck/mentions-column.vue
@@ -15,9 +15,9 @@
 
 <script lang="ts" setup>
 import {} from "vue";
-import XColumn from "./Column.vue";
+import XColumn from "./column.vue";
 import type { Column } from "./deck-store";
-import XNotes from "@/components/Notes.vue";
+import XNotes from "@/components/MkNotes.vue";
 
 defineProps<{
 	column: Column;
diff --git a/packages/client/src/ui/deck/NotificationsColumn.vue b/packages/client/src/ui/deck/notifications-column.vue
similarity index 87%
rename from packages/client/src/ui/deck/NotificationsColumn.vue
rename to packages/client/src/ui/deck/notifications-column.vue
index 6e2fa21ef..37cbe30a7 100644
--- a/packages/client/src/ui/deck/NotificationsColumn.vue
+++ b/packages/client/src/ui/deck/notifications-column.vue
@@ -16,10 +16,10 @@
 
 <script lang="ts" setup>
 import { defineAsyncComponent } from "vue";
-import XColumn from "./Column.vue";
+import XColumn from "./column.vue";
 import { updateColumn } from "./deck-store";
 import type { Column } from "./deck-store";
-import XNotifications from "@/components/Notifications.vue";
+import XNotifications from "@/components/MkNotifications.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 
@@ -35,7 +35,7 @@ const emit = defineEmits<{
 function func(): void {
 	os.popup(
 		defineAsyncComponent(
-			() => import("@/components/NotificationSettingWindow.vue"),
+			() => import("@/components/MkNotificationSettingWindow.vue"),
 		),
 		{
 			includingTypes: props.column.includingTypes,
diff --git a/packages/client/src/ui/deck/TimelineColumn.vue b/packages/client/src/ui/deck/tl-column.vue
similarity index 97%
rename from packages/client/src/ui/deck/TimelineColumn.vue
rename to packages/client/src/ui/deck/tl-column.vue
index 300b36e93..c419b0469 100644
--- a/packages/client/src/ui/deck/TimelineColumn.vue
+++ b/packages/client/src/ui/deck/tl-column.vue
@@ -45,10 +45,10 @@
 
 <script lang="ts" setup>
 import { onMounted } from "vue";
-import XColumn from "./Column.vue";
+import XColumn from "./column.vue";
 import type { Column } from "./deck-store";
 import { removeColumn, updateColumn } from "./deck-store";
-import XTimeline from "@/components/Timeline.vue";
+import XTimeline from "@/components/MkTimeline.vue";
 import * as os from "@/os";
 import { $i } from "@/account";
 import { instance } from "@/instance";
diff --git a/packages/client/src/ui/deck/WidgetsColumn.vue b/packages/client/src/ui/deck/widgets-column.vue
similarity index 95%
rename from packages/client/src/ui/deck/WidgetsColumn.vue
rename to packages/client/src/ui/deck/widgets-column.vue
index 63d76f502..d5762b539 100644
--- a/packages/client/src/ui/deck/WidgetsColumn.vue
+++ b/packages/client/src/ui/deck/widgets-column.vue
@@ -32,7 +32,7 @@
 
 <script lang="ts" setup>
 import {} from "vue";
-import XColumn from "./Column.vue";
+import XColumn from "./column.vue";
 import type { Column } from "./deck-store";
 import {
 	addColumnWidget,
@@ -40,7 +40,7 @@ import {
 	setColumnWidgets,
 	updateColumnWidget,
 } from "./deck-store";
-import XWidgets from "@/components/Widgets.vue";
+import XWidgets from "@/components/MkWidgets.vue";
 import { i18n } from "@/i18n";
 
 const props = defineProps<{
diff --git a/packages/client/src/ui/Universal.vue b/packages/client/src/ui/universal.vue
similarity index 96%
rename from packages/client/src/ui/Universal.vue
rename to packages/client/src/ui/universal.vue
index 7fd1b0dbb..e7a7d5d47 100644
--- a/packages/client/src/ui/Universal.vue
+++ b/packages/client/src/ui/universal.vue
@@ -5,10 +5,10 @@
 	>
 		<XSidebar v-if="!isMobile" />
 
-		<StickyContainer class="contents">
-			<template #header>
-				<XStatusBars :class="$style.statusbars" />
-			</template>
+		<MkStickyContainer class="contents">
+			<template #header
+				><XStatusBars :class="$style.statusbars"
+			/></template>
 			<main
 				id="maincontent"
 				style="min-width: 0"
@@ -17,7 +17,7 @@
 			>
 				<RouterView />
 			</main>
-		</StickyContainer>
+		</MkStickyContainer>
 
 		<div v-if="isDesktop" ref="widgetsEl" class="widgets-container">
 			<XWidgets @mounted="attachSticky" />
@@ -172,11 +172,11 @@
 import { computed, defineAsyncComponent, onMounted, provide, ref } from "vue";
 import * as Acct from "iceshrimp-js/built/acct";
 import type { ComputedRef } from "vue";
-import XCommon from "./common/Common.vue";
+import XCommon from "./_common_/common.vue";
 import type { PageMetadata } from "@/scripts/page-metadata";
 import { instanceName, ui } from "@/config";
-import XDrawerMenu from "@/ui/common/NavbarMobile.vue";
-import XSidebar from "@/ui/common/Navbar.vue";
+import XDrawerMenu from "@/ui/_common_/navbar-for-mobile.vue";
+import XSidebar from "@/ui/_common_/navbar.vue";
 import * as os from "@/os";
 import { defaultStore } from "@/store";
 import { navbarItemDef } from "@/navbar";
@@ -189,9 +189,9 @@ import {
 } from "@/scripts/page-metadata";
 import { deviceKind } from "@/scripts/device-kind";
 
-const XWidgets = defineAsyncComponent(() => import("./UniversalWidgets.vue"));
+const XWidgets = defineAsyncComponent(() => import("./universal.widgets.vue"));
 const XStatusBars = defineAsyncComponent(
-	() => import("@/ui/common/Statusbars.vue"),
+	() => import("@/ui/_common_/statusbars.vue"),
 );
 
 const DESKTOP_THRESHOLD = 1100;
@@ -413,7 +413,6 @@ console.log(mainRouter.currentRoute.value.name);
 		transform 300ms cubic-bezier(0.23, 1, 0.32, 1),
 		opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
 }
-
 .widgetsDrawer-enter-from,
 .widgetsDrawer-leave-active {
 	opacity: 0;
@@ -425,7 +424,6 @@ console.log(mainRouter.currentRoute.value.name);
 	opacity: 1;
 	transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
 }
-
 .widgetsDrawer-back-enter-from,
 .widgetsDrawer-back-leave-active {
 	opacity: 0;
@@ -439,7 +437,6 @@ console.log(mainRouter.currentRoute.value.name);
 		transform 300ms cubic-bezier(0.23, 1, 0.32, 1),
 		opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
 }
-
 .menuDrawer-enter-from,
 .menuDrawer-leave-active {
 	opacity: 0;
@@ -451,7 +448,6 @@ console.log(mainRouter.currentRoute.value.name);
 	opacity: 1;
 	transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
 }
-
 .menuDrawer-back-enter-from,
 .menuDrawer-back-leave-active {
 	opacity: 0;
@@ -467,23 +463,19 @@ console.log(mainRouter.currentRoute.value.name);
 	display: flex;
 
 	--stickyBottom: 1em;
-
 	&.isMobile {
 		--stickyBottom: 6rem;
 	}
-
 	&:not(.isMobile) {
 		> .contents {
 			border-right: 0.5px solid var(--divider);
 		}
 	}
-
 	&.wallpaper {
 		background: var(--wallpaperOverlay);
 
 		:deep(.sidebar .middle) {
 			position: relative;
-
 			&::before {
 				content: "";
 				position: absolute;
@@ -493,7 +485,6 @@ console.log(mainRouter.currentRoute.value.name);
 				opacity: 1;
 				z-index: -3;
 			}
-
 			> ._button:last-child {
 				margin-bottom: 0 !important;
 			}
@@ -502,10 +493,8 @@ console.log(mainRouter.currentRoute.value.name);
 
 	&.centered {
 		justify-content: center;
-
 		&:not(.isMobile) {
 			--navBg: transparent;
-
 			> .contents {
 				border-inline: 0.5px solid var(--divider);
 				margin-inline: -1px;
@@ -516,7 +505,6 @@ console.log(mainRouter.currentRoute.value.name);
 			margin-left: -200px;
 			padding-left: 200px;
 			box-sizing: content-box;
-
 			.banner {
 				pointer-events: none;
 				top: -20% !important;
@@ -579,7 +567,6 @@ console.log(mainRouter.currentRoute.value.name);
 				background: var(--acrylicBg) !important;
 				backdrop-filter: var(--blur, blur(12px));
 			}
-
 			:deep(.tl),
 			:deep(.notes) {
 				background: none;
@@ -592,7 +579,6 @@ console.log(mainRouter.currentRoute.value.name);
 		min-width: 0;
 		$widgets-hide-threshold: 1090px;
 		overflow-x: clip;
-
 		@media (max-width: $widgets-hide-threshold) {
 			padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 96px);
 		}
@@ -638,11 +624,7 @@ console.log(mainRouter.currentRoute.value.name);
 		height: 4rem;
 		width: 4rem;
 		background-position: center;
-		background: linear-gradient(
-			90deg,
-			var(--buttonGradateA),
-			var(--buttonGradateB)
-		);
+		background: linear-gradient(90deg,var(--buttonGradateA),var(--buttonGradateB));
 		color: var(--fgOnAccent);
 		position: fixed !important;
 		z-index: 1000;
@@ -692,6 +674,7 @@ console.log(mainRouter.currentRoute.value.name);
 			> .button-wrapper {
 				display: inline-flex;
 				justify-content: center;
+				padding: 4px 0;
 
 				&.on {
 					background-color: var(--focus);
@@ -723,7 +706,6 @@ console.log(mainRouter.currentRoute.value.name);
 					margin-right: 8px;
 				}
 			}
-
 			> .indicator {
 				position: absolute;
 				top: 0;
diff --git a/packages/client/src/ui/UniversalWidgets.vue b/packages/client/src/ui/universal.widgets.vue
similarity index 97%
rename from packages/client/src/ui/UniversalWidgets.vue
rename to packages/client/src/ui/universal.widgets.vue
index 0be725959..c43d1aa0c 100644
--- a/packages/client/src/ui/UniversalWidgets.vue
+++ b/packages/client/src/ui/universal.widgets.vue
@@ -30,7 +30,7 @@
 
 <script lang="ts" setup>
 import { onMounted } from "vue";
-import XWidgets from "@/components/Widgets.vue";
+import XWidgets from "@/components/MkWidgets.vue";
 import { i18n } from "@/i18n";
 import { defaultStore } from "@/store";
 
diff --git a/packages/client/src/ui/Visitor.vue b/packages/client/src/ui/visitor.vue
similarity index 67%
rename from packages/client/src/ui/Visitor.vue
rename to packages/client/src/ui/visitor.vue
index f0f898a44..9b602b5b0 100644
--- a/packages/client/src/ui/Visitor.vue
+++ b/packages/client/src/ui/visitor.vue
@@ -5,9 +5,9 @@
 
 <script lang="ts">
 import { defineAsyncComponent, defineComponent } from "vue";
-import DesignA from "./visitor/A.vue";
-import DesignB from "./visitor/B.vue";
-import XCommon from "./common/Common.vue";
+import DesignA from "./visitor/a.vue";
+import DesignB from "./visitor/b.vue";
+import XCommon from "./_common_/common.vue";
 import { i18n } from "@/i18n";
 
 export default defineComponent({
diff --git a/packages/client/src/ui/visitor/A.vue b/packages/client/src/ui/visitor/a.vue
similarity index 96%
rename from packages/client/src/ui/visitor/A.vue
rename to packages/client/src/ui/visitor/a.vue
index 6b262c208..a755b3789 100644
--- a/packages/client/src/ui/visitor/A.vue
+++ b/packages/client/src/ui/visitor/a.vue
@@ -59,7 +59,7 @@
 				</main>
 				<div class="powered-by">
 					<b
-						><A to="/">{{ host }}</A></b
+						><MkA to="/">{{ host }}</MkA></b
 					>
 					<small
 						>Powered by
@@ -75,12 +75,12 @@
 
 <script lang="ts">
 import { defineAsyncComponent, defineComponent } from "vue";
-import XHeader from "./Header.vue";
+import XHeader from "./header.vue";
 import { host, instanceName } from "@/config";
 import { search } from "@/scripts/search";
 import * as os from "@/os";
-import Pagination from "@/components/Pagination.vue";
-import Button from "@/components/Button.vue";
+import MkPagination from "@/components/MkPagination.vue";
+import MkButton from "@/components/MkButton.vue";
 import { ColdDeviceStorage } from "@/store";
 import { mainRouter } from "@/router";
 import { i18n } from "@/i18n";
@@ -90,8 +90,8 @@ const DESKTOP_THRESHOLD = 1100;
 export default defineComponent({
 	components: {
 		XHeader,
-		Pagination,
-		Button,
+		MkPagination,
+		MkButton,
 	},
 
 	data() {
diff --git a/packages/client/src/ui/visitor/B.vue b/packages/client/src/ui/visitor/b.vue
similarity index 86%
rename from packages/client/src/ui/visitor/B.vue
rename to packages/client/src/ui/visitor/b.vue
index d033d1ca2..5131a7117 100644
--- a/packages/client/src/ui/visitor/B.vue
+++ b/packages/client/src/ui/visitor/b.vue
@@ -14,7 +14,7 @@
 				</main>
 				<div v-if="!root" class="powered-by">
 					<b
-						><A to="/">{{ host }}</A></b
+						><MkA to="/">{{ host }}</MkA></b
 					>
 					<small
 						>Powered by
@@ -37,31 +37,27 @@
 
 		<transition :name="$store.state.animation ? 'tray' : ''">
 			<div v-if="showMenu" class="menu">
-				<A to="/" class="link" active-class="active"
+				<MkA to="/" class="link" active-class="active"
 					><i class="ph-house ph-bold ph-lg icon"></i
-					>{{ i18n.ts.home }}</A
+					>{{ i18n.ts.home }}</MkA
 				>
-				<A to="/explore" class="link" active-class="active"
+				<MkA to="/explore" class="link" active-class="active"
 					><i class="ph-compass ph-bold ph-lg icon"></i
-					>{{ i18n.ts.explore }}</A
+					>{{ i18n.ts.explore }}</MkA
 				>
-				<A to="/channels" class="link" active-class="active"
+				<MkA to="/channels" class="link" active-class="active"
 					><i class="ph-television ph-bold ph-lg icon"></i
-					>{{ i18n.ts.channel }}</A
+					>{{ i18n.ts.channel }}</MkA
 				>
-				<A to="/pages" class="link" active-class="active"
+				<MkA to="/pages" class="link" active-class="active"
 					><i class="ph-file-text ph-bold ph-lg icon"></i
-					>{{ i18n.ts.pages }}</A
+					>{{ i18n.ts.pages }}</MkA
 				>
-				<A to="/gallery" class="link" active-class="active"
+				<MkA to="/gallery" class="link" active-class="active"
 					><i class="ph-image-square ph-bold ph-lg icon"></i
-					>{{ i18n.ts.gallery }}</A
-				>
-				<button
-					class="_button link"
-					active-class="active"
-					@click="search()"
+					>{{ i18n.ts.gallery }}</MkA
 				>
+				<button class="_button link" active-class="active" @click="search()">
 					<i class="ph-magnifying-glass ph-bold ph-lg icon"></i
 					><span>{{ i18n.ts.search }}</span>
 				</button>
@@ -81,16 +77,16 @@
 <script lang="ts" setup>
 import type { ComputedRef } from "vue";
 import { onMounted, provide } from "vue";
-import XHeader from "./Header.vue";
-import XKanban from "./Kanban.vue";
+import XHeader from "./header.vue";
+import XKanban from "./kanban.vue";
 import { host, instanceName } from "@/config";
 import { search } from "@/scripts/search";
 import * as os from "@/os";
 import { instance } from "@/instance";
-import Pagination from "@/components/Pagination.vue";
-import XSigninDialog from "@/components/SigninDialog.vue";
-import XSignupDialog from "@/components/SignupDialog.vue";
-import Button from "@/components/Button.vue";
+import MkPagination from "@/components/MkPagination.vue";
+import XSigninDialog from "@/components/MkSigninDialog.vue";
+import XSignupDialog from "@/components/MkSignupDialog.vue";
+import MkButton from "@/components/MkButton.vue";
 import { ColdDeviceStorage, defaultStore } from "@/store";
 import { mainRouter } from "@/router";
 import type { PageMetadata } from "@/scripts/page-metadata";
@@ -189,7 +185,6 @@ defineExpose({
 		transform 300ms cubic-bezier(0.23, 1, 0.32, 1),
 		opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
 }
-
 .tray-enter-from,
 .tray-leave-active {
 	opacity: 0;
@@ -201,7 +196,6 @@ defineExpose({
 	opacity: 1;
 	transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
 }
-
 .tray-back-enter-from,
 .tray-back-leave-active {
 	opacity: 0;
diff --git a/packages/client/src/ui/visitor/Header.vue b/packages/client/src/ui/visitor/header.vue
similarity index 87%
rename from packages/client/src/ui/visitor/Header.vue
rename to packages/client/src/ui/visitor/header.vue
index b3814635f..feba0b2c0 100644
--- a/packages/client/src/ui/visitor/Header.vue
+++ b/packages/client/src/ui/visitor/header.vue
@@ -2,46 +2,42 @@
 	<div class="sqxihjet">
 		<div v-if="narrow === false" class="wide">
 			<div class="content">
-				<A to="/" class="link" active-class="active"
+				<MkA to="/" class="link" active-class="active"
 					><i class="ph-house ph-bold ph-lg icon"></i
-					>{{ i18n.ts.home }}</A
+					>{{ i18n.ts.home }}</MkA
 				>
-				<!-- <A
+				<!-- <MkA
 					v-if="isTimelineAvailable"
 					to="/timeline"
 					class="link"
 					active-class="active"
 					><i class="ph-chats-circle ph-bold ph-lg icon"></i
-					>{{ i18n.ts.timeline }}</A
+					>{{ i18n.ts.timeline }}</MkA
 				> -->
-				<A to="/explore" class="link" active-class="active"
+				<MkA to="/explore" class="link" active-class="active"
 					><i class="ph-compass ph-bold ph-lg icon"></i
-					>{{ i18n.ts.explore }}</A
+					>{{ i18n.ts.explore }}</MkA
 				>
-				<A to="/channels" class="link" active-class="active"
+				<MkA to="/channels" class="link" active-class="active"
 					><i class="ph-television ph-bold ph-lg icon"></i
-					>{{ i18n.ts.channel }}</A
+					>{{ i18n.ts.channel }}</MkA
 				>
-				<A to="/pages" class="link" active-class="active"
+				<MkA to="/pages" class="link" active-class="active"
 					><i class="ph-file-text ph-bold ph-lg icon"></i
-					>{{ i18n.ts.pages }}</A
+					>{{ i18n.ts.pages }}</MkA
 				>
-				<A to="/gallery" class="link" active-class="active"
+				<MkA to="/gallery" class="link" active-class="active"
 					><i class="ph-image-square ph-bold ph-lg icon"></i
-					>{{ i18n.ts.gallery }}</A
-				>
-				<button
-					class="_button link"
-					active-class="active"
-					@click="search()"
+					>{{ i18n.ts.gallery }}</MkA
 				>
+				<button class="_button link" active-class="active" @click="search()">
 					<i class="ph-magnifying-glass ph-bold ph-lg icon"></i
 					><span>{{ i18n.ts.search }}</span>
 				</button>
 				<div v-if="info" class="page active link">
 					<div class="title">
 						<i v-if="info.icon" class="icon" :class="info.icon"></i>
-						<Avatar
+						<MkAvatar
 							v-else-if="info.avatar"
 							class="avatar"
 							:user="info.avatar"
@@ -51,7 +47,7 @@
 						<span v-if="info.title" class="text">{{
 							info.title
 						}}</span>
-						<UserName
+						<MkUserName
 							v-else-if="info.userName"
 							:user="info.userName"
 							:nowrap="false"
@@ -82,7 +78,7 @@
 			</button>
 			<div v-if="info" class="title">
 				<i v-if="info.icon" class="icon" :class="info.icon"></i>
-				<Avatar
+				<MkAvatar
 					v-else-if="info.avatar"
 					class="avatar"
 					:user="info.avatar"
@@ -90,7 +86,7 @@
 					:show-indicator="true"
 				/>
 				<span v-if="info.title" class="text">{{ info.title }}</span>
-				<UserName
+				<MkUserName
 					v-else-if="info.userName"
 					:user="info.userName"
 					:nowrap="false"
@@ -110,8 +106,8 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import XSigninDialog from "@/components/SigninDialog.vue";
-import XSignupDialog from "@/components/SignupDialog.vue";
+import XSigninDialog from "@/components/MkSigninDialog.vue";
+import XSignupDialog from "@/components/MkSignupDialog.vue";
 import * as os from "@/os";
 import { instance } from "@/instance";
 import { search } from "@/scripts/search";
@@ -202,11 +198,11 @@ export default defineComponent({
 				&.page {
 					border-bottom-color: var(--accent);
 				}
-
+				
 				&._button {
 					text-decoration: underline;
 					text-decoration-color: transparent;
-					transition: text-decoration-color 0.2s;
+					transition: text-decoration-color .2s;
 
 					&:hover {
 						text-decoration-color: currentColor;
@@ -256,7 +252,6 @@ export default defineComponent({
 
 			> .right {
 				margin-left: auto;
-
 				> .signup {
 					border-radius: 999px;
 					padding: 0 24px;
diff --git a/packages/client/src/ui/visitor/Kanban.vue b/packages/client/src/ui/visitor/kanban.vue
similarity index 92%
rename from packages/client/src/ui/visitor/Kanban.vue
rename to packages/client/src/ui/visitor/kanban.vue
index 8204803d6..1f672b8be 100644
--- a/packages/client/src/ui/visitor/Kanban.vue
+++ b/packages/client/src/ui/visitor/kanban.vue
@@ -11,13 +11,15 @@
 		<div class="contents">
 			<div class="wrapper">
 				<h1 v-if="meta" :class="{ full }">
-					<A to="/" class="link"
+					<MkA to="/" class="link"
 						><img
 							v-if="meta.logoImageUrl"
 							class="logo"
 							:src="meta.logoImageUrl"
 							alt="logo"
-						/><span v-else class="text">{{ instanceName }}</span></A
+						/><span v-else class="text">{{
+							instanceName
+						}}</span></MkA
 					>
 				</h1>
 				<template v-if="full">
@@ -37,7 +39,7 @@
 					</div>
 					<div class="announcements panel">
 						<header>{{ i18n.ts.announcements }}</header>
-						<Pagination
+						<MkPagination
 							v-slot="{ items }"
 							:pagination="announcements"
 							class="list"
@@ -59,11 +61,11 @@
 									/>
 								</div>
 							</section>
-						</Pagination>
+						</MkPagination>
 					</div>
 					<div v-if="poweredBy" class="powered-by">
 						<b
-							><A to="/">{{ host }}</A></b
+							><MkA to="/">{{ host }}</MkA></b
 						>
 						<small
 							>Powered by
@@ -82,16 +84,16 @@
 import { defineAsyncComponent, defineComponent } from "vue";
 import { host, instanceName } from "@/config";
 import * as os from "@/os";
-import Pagination from "@/components/Pagination.vue";
-import XSigninDialog from "@/components/SigninDialog.vue";
-import XSignupDialog from "@/components/SignupDialog.vue";
-import Button from "@/components/Button.vue";
+import MkPagination from "@/components/MkPagination.vue";
+import XSigninDialog from "@/components/MkSigninDialog.vue";
+import XSignupDialog from "@/components/MkSignupDialog.vue";
+import MkButton from "@/components/MkButton.vue";
 import { i18n } from "@/i18n";
 
 export default defineComponent({
 	components: {
-		Pagination,
-		Button,
+		MkPagination,
+		MkButton,
 	},
 
 	props: {
diff --git a/packages/client/src/ui/Zen.vue b/packages/client/src/ui/zen.vue
similarity index 95%
rename from packages/client/src/ui/Zen.vue
rename to packages/client/src/ui/zen.vue
index 32fbdee20..b171420d7 100644
--- a/packages/client/src/ui/Zen.vue
+++ b/packages/client/src/ui/zen.vue
@@ -9,7 +9,7 @@
 <script lang="ts" setup>
 import type { ComputedRef } from "vue";
 import { provide } from "vue";
-import XCommon from "./common/Common.vue";
+import XCommon from "./_common_/common.vue";
 import { mainRouter } from "@/router";
 import type { PageMetadata } from "@/scripts/page-metadata";
 import {
diff --git a/packages/client/src/widgets/ActivityCalendar.vue b/packages/client/src/widgets/activity.calendar.vue
similarity index 100%
rename from packages/client/src/widgets/ActivityCalendar.vue
rename to packages/client/src/widgets/activity.calendar.vue
diff --git a/packages/client/src/widgets/ActivityChart.vue b/packages/client/src/widgets/activity.chart.vue
similarity index 100%
rename from packages/client/src/widgets/ActivityChart.vue
rename to packages/client/src/widgets/activity.chart.vue
diff --git a/packages/client/src/widgets/Activity.vue b/packages/client/src/widgets/activity.vue
similarity index 89%
rename from packages/client/src/widgets/Activity.vue
rename to packages/client/src/widgets/activity.vue
index 3b7371d61..beeba81d7 100644
--- a/packages/client/src/widgets/Activity.vue
+++ b/packages/client/src/widgets/activity.vue
@@ -1,5 +1,5 @@
 <template>
-	<Container
+	<MkContainer
 		:show-header="widgetProps.showHeader"
 		:naked="widgetProps.transparent"
 		class="mkw-activity"
@@ -18,10 +18,10 @@
 		></template>
 
 		<div v-if="widgetProps.newStyle">
-			<Heatmap src="my-notes" />
+			<MkHeatmap src="my-notes" />
 		</div>
 		<div v-else>
-			<Loading v-if="fetching" />
+			<MkLoading v-if="fetching" />
 			<template v-else>
 				<XCalendar
 					v-show="widgetProps.view === 0"
@@ -33,7 +33,7 @@
 				/>
 			</template>
 		</div>
-	</Container>
+	</MkContainer>
 </template>
 
 <script lang="ts" setup>
@@ -44,12 +44,12 @@ import {
 	WidgetComponentProps,
 	useWidgetPropsManager,
 } from "./widget";
-import XCalendar from "./ActivityCalendar.vue";
-import XChart from "./ActivityChart.vue";
-import Heatmap from "@/components/Heatmap.vue";
+import XCalendar from "./activity.calendar.vue";
+import XChart from "./activity.chart.vue";
+import MkHeatmap from "@/components/MkHeatmap.vue";
 import type { GetFormResultType } from "@/scripts/form";
 import * as os from "@/os";
-import Container from "@/components/Container.vue";
+import MkContainer from "@/components/MkContainer.vue";
 import { $i } from "@/account";
 import { i18n } from "@/i18n";
 
diff --git a/packages/client/src/widgets/Aiscript.vue b/packages/client/src/widgets/aiscript.vue
similarity index 96%
rename from packages/client/src/widgets/Aiscript.vue
rename to packages/client/src/widgets/aiscript.vue
index 37bb3bbf5..ac1472da1 100644
--- a/packages/client/src/widgets/Aiscript.vue
+++ b/packages/client/src/widgets/aiscript.vue
@@ -1,5 +1,5 @@
 <template>
-	<Container :show-header="widgetProps.showHeader" class="mkw-aiscript">
+	<MkContainer :show-header="widgetProps.showHeader" class="mkw-aiscript">
 		<template #header
 			><i class="ph-terminal-window ph-bold ph-lg"></i
 			>{{ i18n.ts._widgets.aiscript }}</template
@@ -22,7 +22,7 @@
 				</div>
 			</div>
 		</div>
-	</Container>
+	</MkContainer>
 </template>
 
 <script lang="ts" setup>
@@ -36,7 +36,7 @@ import {
 } from "./widget";
 import type { GetFormResultType } from "@/scripts/form";
 import * as os from "@/os";
-import Container from "@/components/Container.vue";
+import MkContainer from "@/components/MkContainer.vue";
 import { createAiScriptEnv } from "@/scripts/aiscript/api";
 import { $i } from "@/account";
 import { i18n } from "@/i18n";
diff --git a/packages/client/src/widgets/Button.vue b/packages/client/src/widgets/button.vue
similarity index 92%
rename from packages/client/src/widgets/Button.vue
rename to packages/client/src/widgets/button.vue
index 04b70f188..b9378e0ea 100644
--- a/packages/client/src/widgets/Button.vue
+++ b/packages/client/src/widgets/button.vue
@@ -1,8 +1,8 @@
 <template>
 	<div class="mkw-button">
-		<Button :primary="widgetProps.colored" full @click="run">
+		<MkButton :primary="widgetProps.colored" full @click="run">
 			{{ widgetProps.label }}
-		</Button>
+		</MkButton>
 	</div>
 </template>
 
@@ -19,7 +19,7 @@ import type { GetFormResultType } from "@/scripts/form";
 import * as os from "@/os";
 import { createAiScriptEnv } from "@/scripts/aiscript/api";
 import { $i } from "@/account";
-import Button from "@/components/Button.vue";
+import MkButton from "@/components/MkButton.vue";
 
 const name = "button";
 
@@ -35,7 +35,7 @@ const widgetPropsDef = {
 	script: {
 		type: "string" as const,
 		multiline: true,
-		default: ':dialog("hello" "world")',
+		default: 'Mk:dialog("hello" "world")',
 	},
 };
 
diff --git a/packages/client/src/widgets/Calendar.vue b/packages/client/src/widgets/calendar.vue
similarity index 100%
rename from packages/client/src/widgets/Calendar.vue
rename to packages/client/src/widgets/calendar.vue
diff --git a/packages/client/src/widgets/Clock.vue b/packages/client/src/widgets/clock.vue
similarity index 95%
rename from packages/client/src/widgets/Clock.vue
rename to packages/client/src/widgets/clock.vue
index 1de60fb04..d1a6385b3 100644
--- a/packages/client/src/widgets/Clock.vue
+++ b/packages/client/src/widgets/clock.vue
@@ -1,5 +1,5 @@
 <template>
-	<Container
+	<MkContainer
 		:naked="widgetProps.transparent"
 		:show-header="false"
 		class="mkw-clock"
@@ -14,7 +14,7 @@
 			>
 				{{ tzAbbrev }}
 			</div>
-			<AnalogClock
+			<MkAnalogClock
 				class="clock"
 				:thickness="widgetProps.thickness"
 				:offset="tzOffset"
@@ -23,7 +23,7 @@
 				:twentyfour="widgetProps.twentyFour"
 				:s-animation="widgetProps.sAnimation"
 			/>
-			<DigitalClock
+			<MkDigitalClock
 				v-if="
 					widgetProps.label === 'time' ||
 					widgetProps.label === 'timeAndTz'
@@ -42,7 +42,7 @@
 				{{ tzOffsetLabel }}
 			</div>
 		</div>
-	</Container>
+	</MkContainer>
 </template>
 
 <script lang="ts" setup>
@@ -54,9 +54,9 @@ import {
 	useWidgetPropsManager,
 } from "./widget";
 import type { GetFormResultType } from "@/scripts/form";
-import Container from "@/components/Container.vue";
-import AnalogClock from "@/components/AnalogClock.vue";
-import DigitalClock from "@/components/DigitalClock.vue";
+import MkContainer from "@/components/MkContainer.vue";
+import MkAnalogClock from "@/components/MkAnalogClock.vue";
+import MkDigitalClock from "@/components/MkDigitalClock.vue";
 import { timezones } from "@/scripts/timezones";
 import { i18n } from "@/i18n";
 
diff --git a/packages/client/src/widgets/DigitalClock.vue b/packages/client/src/widgets/digital-clock.vue
similarity index 95%
rename from packages/client/src/widgets/DigitalClock.vue
rename to packages/client/src/widgets/digital-clock.vue
index b22431d39..9b16a62de 100644
--- a/packages/client/src/widgets/DigitalClock.vue
+++ b/packages/client/src/widgets/digital-clock.vue
@@ -6,7 +6,7 @@
 	>
 		<div v-if="widgetProps.showLabel" class="label">{{ tzAbbrev }}</div>
 		<div class="time">
-			<DigitalClock :show-ms="widgetProps.showMs" :offset="tzOffset" />
+			<MkDigitalClock :show-ms="widgetProps.showMs" :offset="tzOffset" />
 		</div>
 		<div v-if="widgetProps.showLabel" class="label">
 			{{ tzOffsetLabel }}
@@ -24,7 +24,7 @@ import {
 } from "./widget";
 import type { GetFormResultType } from "@/scripts/form";
 import { timezones } from "@/scripts/timezones";
-import DigitalClock from "@/components/DigitalClock.vue";
+import MkDigitalClock from "@/components/MkDigitalClock.vue";
 
 const name = "digitalClock";
 
diff --git a/packages/client/src/widgets/Federation.vue b/packages/client/src/widgets/federation.vue
similarity index 95%
rename from packages/client/src/widgets/Federation.vue
rename to packages/client/src/widgets/federation.vue
index 6af8fddd8..a8e121519 100644
--- a/packages/client/src/widgets/Federation.vue
+++ b/packages/client/src/widgets/federation.vue
@@ -1,5 +1,5 @@
 <template>
-	<Container
+	<MkContainer
 		:show-header="widgetProps.showHeader"
 		:foldable="foldable"
 		:scrollable="scrollable"
@@ -11,7 +11,7 @@
 		>
 
 		<div class="wbrkwalb">
-			<Loading v-if="fetching" />
+			<MkLoading v-if="fetching" />
 			<transition-group
 				v-else
 				tag="div"
@@ -37,14 +37,14 @@
 							{{ instance.softwareVersion }}
 						</p>
 					</div>
-					<MiniChart
+					<MkMiniChart
 						class="chart"
 						:src="charts[i].requests.received"
 					/>
 				</div>
 			</transition-group>
 		</div>
-	</Container>
+	</MkContainer>
 </template>
 
 <script lang="ts" setup>
@@ -56,8 +56,8 @@ import {
 	useWidgetPropsManager,
 } from "./widget";
 import type { GetFormResultType } from "@/scripts/form";
-import Container from "@/components/Container.vue";
-import MiniChart from "@/components/MiniChart.vue";
+import MkContainer from "@/components/MkContainer.vue";
+import MkMiniChart from "@/components/MkMiniChart.vue";
 import * as os from "@/os";
 import { useInterval } from "@/scripts/use-interval";
 import { i18n } from "@/i18n";
diff --git a/packages/client/src/widgets/index.ts b/packages/client/src/widgets/index.ts
index db2a71b37..4c48811a9 100644
--- a/packages/client/src/widgets/index.ts
+++ b/packages/client/src/widgets/index.ts
@@ -2,96 +2,96 @@ import { App, defineAsyncComponent } from "vue";
 
 export default function (app: App) {
 	app.component(
-		"wMemo",
-		defineAsyncComponent(() => import("./Memo.vue")),
+		"MkwMemo",
+		defineAsyncComponent(() => import("./memo.vue")),
 	);
 	app.component(
-		"wNotifications",
-		defineAsyncComponent(() => import("./Notifications.vue")),
+		"MkwNotifications",
+		defineAsyncComponent(() => import("./notifications.vue")),
 	);
 	app.component(
-		"wTimeline",
-		defineAsyncComponent(() => import("./Timeline.vue")),
+		"MkwTimeline",
+		defineAsyncComponent(() => import("./timeline.vue")),
 	);
 	app.component(
-		"wCalendar",
-		defineAsyncComponent(() => import("./Calendar.vue")),
+		"MkwCalendar",
+		defineAsyncComponent(() => import("./calendar.vue")),
 	);
 	app.component(
-		"wRss",
-		defineAsyncComponent(() => import("./Rss.vue")),
+		"MkwRss",
+		defineAsyncComponent(() => import("./rss.vue")),
 	);
 	app.component(
-		"wRssTicker",
-		defineAsyncComponent(() => import("./RssTicker.vue")),
+		"MkwRssTicker",
+		defineAsyncComponent(() => import("./rss-ticker.vue")),
 	);
 	app.component(
-		"wTrends",
-		defineAsyncComponent(() => import("./Trends.vue")),
+		"MkwTrends",
+		defineAsyncComponent(() => import("./trends.vue")),
 	);
 	app.component(
-		"wClock",
-		defineAsyncComponent(() => import("./Clock.vue")),
+		"MkwClock",
+		defineAsyncComponent(() => import("./clock.vue")),
 	);
 	app.component(
-		"wActivity",
-		defineAsyncComponent(() => import("./Activity.vue")),
+		"MkwActivity",
+		defineAsyncComponent(() => import("./activity.vue")),
 	);
 	app.component(
-		"wPhotos",
-		defineAsyncComponent(() => import("./Photos.vue")),
+		"MkwPhotos",
+		defineAsyncComponent(() => import("./photos.vue")),
 	);
 	app.component(
-		"wDigitalClock",
-		defineAsyncComponent(() => import("./DigitalClock.vue")),
+		"MkwDigitalClock",
+		defineAsyncComponent(() => import("./digital-clock.vue")),
 	);
 	app.component(
-		"wUnixClock",
-		defineAsyncComponent(() => import("./UnixClock.vue")),
+		"MkwUnixClock",
+		defineAsyncComponent(() => import("./unix-clock.vue")),
 	);
 	app.component(
-		"wFederation",
-		defineAsyncComponent(() => import("./Federation.vue")),
+		"MkwFederation",
+		defineAsyncComponent(() => import("./federation.vue")),
 	);
 	app.component(
-		"wPostForm",
-		defineAsyncComponent(() => import("./PostForm.vue")),
+		"MkwPostForm",
+		defineAsyncComponent(() => import("./post-form.vue")),
 	);
 	app.component(
-		"wSlideshow",
-		defineAsyncComponent(() => import("./Slideshow.vue")),
+		"MkwSlideshow",
+		defineAsyncComponent(() => import("./slideshow.vue")),
 	);
 	app.component(
-		"wServerMetric",
-		defineAsyncComponent(() => import("./server-metric/Index.vue")),
+		"MkwServerMetric",
+		defineAsyncComponent(() => import("./server-metric/index.vue")),
 	);
 	app.component(
-		"wOnlineUsers",
-		defineAsyncComponent(() => import("./OnlineUsers.vue")),
+		"MkwOnlineUsers",
+		defineAsyncComponent(() => import("./online-users.vue")),
 	);
 	app.component(
-		"wJobQueue",
-		defineAsyncComponent(() => import("./JobQueue.vue")),
+		"MkwJobQueue",
+		defineAsyncComponent(() => import("./job-queue.vue")),
 	);
 	app.component(
-		"wInstanceCloud",
-		defineAsyncComponent(() => import("./InstanceCloud.vue")),
+		"MkwInstanceCloud",
+		defineAsyncComponent(() => import("./instance-cloud.vue")),
 	);
 	app.component(
-		"wButton",
-		defineAsyncComponent(() => import("./Button.vue")),
+		"MkwButton",
+		defineAsyncComponent(() => import("./button.vue")),
 	);
 	app.component(
-		"wAiscript",
-		defineAsyncComponent(() => import("./Aiscript.vue")),
+		"MkwAiscript",
+		defineAsyncComponent(() => import("./aiscript.vue")),
 	);
 	app.component(
-		"wUserList",
-		defineAsyncComponent(() => import("./UserList.vue")),
+		"MkwUserList",
+		defineAsyncComponent(() => import("./user-list.vue")),
 	);
 	app.component(
-		"wServerInfo",
-		defineAsyncComponent(() => import("./ServerInfo.vue")),
+		"MkwServerInfo",
+		defineAsyncComponent(() => import("./server-info.vue")),
 	);
 }
 
diff --git a/packages/client/src/widgets/InstanceCloud.vue b/packages/client/src/widgets/instance-cloud.vue
similarity index 89%
rename from packages/client/src/widgets/InstanceCloud.vue
rename to packages/client/src/widgets/instance-cloud.vue
index 9f8bde187..e42037ed9 100644
--- a/packages/client/src/widgets/InstanceCloud.vue
+++ b/packages/client/src/widgets/instance-cloud.vue
@@ -1,11 +1,11 @@
 <template>
-	<Container
+	<MkContainer
 		:naked="widgetProps.transparent"
 		:show-header="false"
 		class="mkw-instance-cloud"
 	>
 		<div class="">
-			<TagCloud v-if="activeInstances">
+			<MkTagCloud v-if="activeInstances">
 				<li v-for="instance in activeInstances" :key="instance.id">
 					<a @click.prevent="onInstanceClick(instance)">
 						<img
@@ -14,9 +14,9 @@
 						/>
 					</a>
 				</li>
-			</TagCloud>
+			</MkTagCloud>
 		</div>
-	</Container>
+	</MkContainer>
 </template>
 
 <script lang="ts" setup>
@@ -28,8 +28,8 @@ import {
 } from "./widget";
 import type { Widget, WidgetComponentExpose } from "./widget";
 import type { GetFormResultType } from "@/scripts/form";
-import Container from "@/components/Container.vue";
-import TagCloud from "@/components/TagCloud.vue";
+import MkContainer from "@/components/MkContainer.vue";
+import MkTagCloud from "@/components/MkTagCloud.vue";
 import * as os from "@/os";
 import { useInterval } from "@/scripts/use-interval";
 import { getProxiedImageUrlNullable } from "@/scripts/media-proxy";
@@ -58,7 +58,7 @@ const { widgetProps, configure } = useWidgetPropsManager(
 	emit,
 );
 
-const cloud = $ref<InstanceType<typeof TagCloud> | null>();
+const cloud = $ref<InstanceType<typeof MkTagCloud> | null>();
 let activeInstances = $shallowRef(null);
 
 function onInstanceClick(i) {
diff --git a/packages/client/src/widgets/JobQueue.vue b/packages/client/src/widgets/job-queue.vue
similarity index 100%
rename from packages/client/src/widgets/JobQueue.vue
rename to packages/client/src/widgets/job-queue.vue
diff --git a/packages/client/src/widgets/Memo.vue b/packages/client/src/widgets/memo.vue
similarity index 94%
rename from packages/client/src/widgets/Memo.vue
rename to packages/client/src/widgets/memo.vue
index c39eb0b28..78c5ad5a6 100644
--- a/packages/client/src/widgets/Memo.vue
+++ b/packages/client/src/widgets/memo.vue
@@ -1,5 +1,5 @@
 <template>
-	<Container :show-header="widgetProps.showHeader" class="mkw-memo">
+	<MkContainer :show-header="widgetProps.showHeader" class="mkw-memo">
 		<template #header
 			><i class="ph-sticker ph-bold ph-lg"></i
 			>{{ i18n.ts._widgets.memo }}</template
@@ -19,7 +19,7 @@
 				{{ i18n.ts.save }}
 			</button>
 		</div>
-	</Container>
+	</MkContainer>
 </template>
 
 <script lang="ts" setup>
@@ -32,7 +32,7 @@ import {
 } from "./widget";
 import type { GetFormResultType } from "@/scripts/form";
 import * as os from "@/os";
-import Container from "@/components/Container.vue";
+import MkContainer from "@/components/MkContainer.vue";
 import { defaultStore } from "@/store";
 import { i18n } from "@/i18n";
 
diff --git a/packages/client/src/widgets/Notifications.vue b/packages/client/src/widgets/notifications.vue
similarity index 91%
rename from packages/client/src/widgets/Notifications.vue
rename to packages/client/src/widgets/notifications.vue
index 3ef008a11..cc253b5cc 100644
--- a/packages/client/src/widgets/Notifications.vue
+++ b/packages/client/src/widgets/notifications.vue
@@ -1,5 +1,5 @@
 <template>
-	<Container
+	<MkContainer
 		:style="`height: ${widgetProps.height}px;`"
 		:show-header="widgetProps.showHeader"
 		:scrollable="true"
@@ -26,7 +26,7 @@
 		<div>
 			<XNotifications :include-types="widgetProps.includingTypes" />
 		</div>
-	</Container>
+	</MkContainer>
 </template>
 
 <script lang="ts" setup>
@@ -38,8 +38,8 @@ import {
 	useWidgetPropsManager,
 } from "./widget";
 import type { GetFormResultType } from "@/scripts/form";
-import Container from "@/components/Container.vue";
-import XNotifications from "@/components/Notifications.vue";
+import MkContainer from "@/components/MkContainer.vue";
+import XNotifications from "@/components/MkNotifications.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 
@@ -79,7 +79,7 @@ const { widgetProps, configure, save } = useWidgetPropsManager(
 const configureNotification = () => {
 	os.popup(
 		defineAsyncComponent(
-			() => import("@/components/NotificationSettingWindow.vue"),
+			() => import("@/components/MkNotificationSettingWindow.vue"),
 		),
 		{
 			includingTypes: widgetProps.includingTypes,
diff --git a/packages/client/src/widgets/OnlineUsers.vue b/packages/client/src/widgets/online-users.vue
similarity index 100%
rename from packages/client/src/widgets/OnlineUsers.vue
rename to packages/client/src/widgets/online-users.vue
diff --git a/packages/client/src/widgets/Photos.vue b/packages/client/src/widgets/photos.vue
similarity index 96%
rename from packages/client/src/widgets/Photos.vue
rename to packages/client/src/widgets/photos.vue
index cf15a8078..3a0130624 100644
--- a/packages/client/src/widgets/Photos.vue
+++ b/packages/client/src/widgets/photos.vue
@@ -1,5 +1,5 @@
 <template>
-	<Container
+	<MkContainer
 		:show-header="widgetProps.showHeader"
 		:naked="widgetProps.transparent"
 		:class="$style.root"
@@ -12,7 +12,7 @@
 		>
 
 		<div class="">
-			<Loading v-if="fetching" />
+			<MkLoading v-if="fetching" />
 			<div v-else :class="$style.stream">
 				<div
 					v-for="(image, i) in images"
@@ -22,7 +22,7 @@
 				></div>
 			</div>
 		</div>
-	</Container>
+	</MkContainer>
 </template>
 
 <script lang="ts" setup>
@@ -37,7 +37,7 @@ import type { GetFormResultType } from "@/scripts/form";
 import { stream } from "@/stream";
 import { getStaticImageUrl } from "@/scripts/get-static-image-url";
 import * as os from "@/os";
-import Container from "@/components/Container.vue";
+import MkContainer from "@/components/MkContainer.vue";
 import { defaultStore } from "@/store";
 import { i18n } from "@/i18n";
 
diff --git a/packages/client/src/widgets/PostForm.vue b/packages/client/src/widgets/post-form.vue
similarity index 95%
rename from packages/client/src/widgets/PostForm.vue
rename to packages/client/src/widgets/post-form.vue
index 8b2bb652b..e76d6ba6f 100644
--- a/packages/client/src/widgets/PostForm.vue
+++ b/packages/client/src/widgets/post-form.vue
@@ -16,7 +16,7 @@ import {
 	useWidgetPropsManager,
 } from "./widget";
 import type { GetFormResultType } from "@/scripts/form";
-import XPostForm from "@/components/PostForm.vue";
+import XPostForm from "@/components/MkPostForm.vue";
 
 const name = "postForm";
 
diff --git a/packages/client/src/widgets/RssTicker.vue b/packages/client/src/widgets/rss-ticker.vue
similarity index 95%
rename from packages/client/src/widgets/RssTicker.vue
rename to packages/client/src/widgets/rss-ticker.vue
index 365ff8d88..bb696a7ca 100644
--- a/packages/client/src/widgets/RssTicker.vue
+++ b/packages/client/src/widgets/rss-ticker.vue
@@ -1,5 +1,5 @@
 <template>
-	<Container
+	<MkContainer
 		:naked="widgetProps.transparent"
 		:show-header="widgetProps.showHeader"
 		class="mkw-rss-ticker"
@@ -11,7 +11,7 @@
 		></template>
 
 		<div class="ekmkgxbk">
-			<Loading v-if="fetching" />
+			<MkLoading v-if="fetching" />
 			<div v-else class="feed">
 				<transition name="change" mode="default">
 					<MarqueeText
@@ -33,7 +33,7 @@
 				</transition>
 			</div>
 		</div>
-	</Container>
+	</MkContainer>
 </template>
 
 <script lang="ts" setup>
@@ -44,10 +44,10 @@ import {
 	WidgetComponentProps,
 	useWidgetPropsManager,
 } from "./widget";
-import MarqueeText from "@/components/Marquee.vue";
+import MarqueeText from "@/components/MkMarquee.vue";
 import type { GetFormResultType } from "@/scripts/form";
 import * as os from "@/os";
-import Container from "@/components/Container.vue";
+import MkContainer from "@/components/MkContainer.vue";
 import { useInterval } from "@/scripts/use-interval";
 import { shuffle } from "@/scripts/shuffle";
 
@@ -140,12 +140,10 @@ defineExpose<WidgetComponentExpose>({
 	top: 0;
 	transition: all 1s ease;
 }
-
 .change-enter-from {
 	opacity: 0;
 	transform: translateY(-100%);
 }
-
 .change-leave-to {
 	opacity: 0;
 	transform: translateY(100%);
diff --git a/packages/client/src/widgets/Rss.vue b/packages/client/src/widgets/rss.vue
similarity index 95%
rename from packages/client/src/widgets/Rss.vue
rename to packages/client/src/widgets/rss.vue
index 96b8dd75c..9ba99e2d2 100644
--- a/packages/client/src/widgets/Rss.vue
+++ b/packages/client/src/widgets/rss.vue
@@ -1,5 +1,5 @@
 <template>
-	<Container
+	<MkContainer
 		:show-header="widgetProps.showHeader"
 		class="mkw-rss"
 		:scrollable="true"
@@ -12,7 +12,7 @@
 		></template>
 
 		<div class="ekmkgxbj">
-			<Loading v-if="fetching" />
+			<MkLoading v-if="fetching" />
 			<div v-else class="feed">
 				<a
 					v-for="item in items"
@@ -25,7 +25,7 @@
 				>
 			</div>
 		</div>
-	</Container>
+	</MkContainer>
 </template>
 
 <script lang="ts" setup>
@@ -38,7 +38,7 @@ import {
 } from "./widget";
 import type { GetFormResultType } from "@/scripts/form";
 import * as os from "@/os";
-import Container from "@/components/Container.vue";
+import MkContainer from "@/components/MkContainer.vue";
 import { useInterval } from "@/scripts/use-interval";
 
 const name = "rss";
diff --git a/packages/client/src/widgets/ServerInfo.vue b/packages/client/src/widgets/server-info.vue
similarity index 96%
rename from packages/client/src/widgets/ServerInfo.vue
rename to packages/client/src/widgets/server-info.vue
index 75fcdde31..7b2b63d2a 100644
--- a/packages/client/src/widgets/ServerInfo.vue
+++ b/packages/client/src/widgets/server-info.vue
@@ -19,9 +19,9 @@
 			</div>
 			<div :class="$style.bodyContainer">
 				<div :class="$style.body">
-					<A :class="$style.name" to="/about" behavior="window">{{
+					<MkA :class="$style.name" to="/about" behavior="window">{{
 						$instance.name
-					}}</A>
+					}}</MkA>
 					<div :class="$style.host">{{ host }}</div>
 				</div>
 			</div>
diff --git a/packages/client/src/widgets/server-metric/CpuMem.vue b/packages/client/src/widgets/server-metric/cpu-mem.vue
similarity index 100%
rename from packages/client/src/widgets/server-metric/CpuMem.vue
rename to packages/client/src/widgets/server-metric/cpu-mem.vue
diff --git a/packages/client/src/widgets/server-metric/Cpu.vue b/packages/client/src/widgets/server-metric/cpu.vue
similarity index 96%
rename from packages/client/src/widgets/server-metric/Cpu.vue
rename to packages/client/src/widgets/server-metric/cpu.vue
index 2250e397b..46843363b 100644
--- a/packages/client/src/widgets/server-metric/Cpu.vue
+++ b/packages/client/src/widgets/server-metric/cpu.vue
@@ -11,7 +11,7 @@
 
 <script lang="ts" setup>
 import { onBeforeUnmount, onMounted } from "vue";
-import XPie from "./Pie.vue";
+import XPie from "./pie.vue";
 
 const props = defineProps<{
 	connection: any;
diff --git a/packages/client/src/widgets/server-metric/Disk.vue b/packages/client/src/widgets/server-metric/disk.vue
similarity index 97%
rename from packages/client/src/widgets/server-metric/Disk.vue
rename to packages/client/src/widgets/server-metric/disk.vue
index 52770379e..67ea398c1 100644
--- a/packages/client/src/widgets/server-metric/Disk.vue
+++ b/packages/client/src/widgets/server-metric/disk.vue
@@ -12,7 +12,7 @@
 
 <script lang="ts" setup>
 import {} from "vue";
-import XPie from "./Pie.vue";
+import XPie from "./pie.vue";
 import bytes from "@/filters/bytes";
 
 const props = defineProps<{
diff --git a/packages/client/src/widgets/server-metric/Index.vue b/packages/client/src/widgets/server-metric/index.vue
similarity index 90%
rename from packages/client/src/widgets/server-metric/Index.vue
rename to packages/client/src/widgets/server-metric/index.vue
index 2cc0bc615..ce8ddfc96 100644
--- a/packages/client/src/widgets/server-metric/Index.vue
+++ b/packages/client/src/widgets/server-metric/index.vue
@@ -1,5 +1,5 @@
 <template>
-	<Container
+	<MkContainer
 		:show-header="widgetProps.showHeader"
 		:naked="widgetProps.transparent"
 	>
@@ -46,7 +46,7 @@
 				:meta="meta"
 			/>
 		</div>
-	</Container>
+	</MkContainer>
 </template>
 
 <script lang="ts" setup>
@@ -57,13 +57,13 @@ import {
 	WidgetComponentProps,
 	useWidgetPropsManager,
 } from "../widget";
-import XCpuMemory from "./CpuMem.vue";
-import XNet from "./Net.vue";
-import XCpu from "./Cpu.vue";
-import XMemory from "./Mem.vue";
-import XDisk from "./Disk.vue";
-import XMeili from "./Meilisearch.vue";
-import Container from "@/components/Container.vue";
+import XCpuMemory from "./cpu-mem.vue";
+import XNet from "./net.vue";
+import XCpu from "./cpu.vue";
+import XMemory from "./mem.vue";
+import XDisk from "./disk.vue";
+import XMeili from "./meilisearch.vue";
+import MkContainer from "@/components/MkContainer.vue";
 import type { GetFormResultType } from "@/scripts/form";
 import * as os from "@/os";
 import { stream } from "@/stream";
diff --git a/packages/client/src/widgets/server-metric/Meilisearch.vue b/packages/client/src/widgets/server-metric/meilisearch.vue
similarity index 98%
rename from packages/client/src/widgets/server-metric/Meilisearch.vue
rename to packages/client/src/widgets/server-metric/meilisearch.vue
index f73fcb99d..1c3b07fd1 100644
--- a/packages/client/src/widgets/server-metric/Meilisearch.vue
+++ b/packages/client/src/widgets/server-metric/meilisearch.vue
@@ -18,7 +18,7 @@
 
 <script lang="ts" setup>
 import { onBeforeUnmount, onMounted } from "vue";
-import XPie from "./Pie.vue";
+import XPie from "./pie.vue";
 import bytes from "@/filters/bytes";
 import { i18n } from "@/i18n";
 import * as os from "@/os";
diff --git a/packages/client/src/widgets/server-metric/Mem.vue b/packages/client/src/widgets/server-metric/mem.vue
similarity index 97%
rename from packages/client/src/widgets/server-metric/Mem.vue
rename to packages/client/src/widgets/server-metric/mem.vue
index 409623ff9..da7ecd81e 100644
--- a/packages/client/src/widgets/server-metric/Mem.vue
+++ b/packages/client/src/widgets/server-metric/mem.vue
@@ -12,7 +12,7 @@
 
 <script lang="ts" setup>
 import { onBeforeUnmount, onMounted } from "vue";
-import XPie from "./Pie.vue";
+import XPie from "./pie.vue";
 import bytes from "@/filters/bytes";
 
 const props = defineProps<{
diff --git a/packages/client/src/widgets/server-metric/Net.vue b/packages/client/src/widgets/server-metric/net.vue
similarity index 100%
rename from packages/client/src/widgets/server-metric/Net.vue
rename to packages/client/src/widgets/server-metric/net.vue
diff --git a/packages/client/src/widgets/server-metric/Pie.vue b/packages/client/src/widgets/server-metric/pie.vue
similarity index 100%
rename from packages/client/src/widgets/server-metric/Pie.vue
rename to packages/client/src/widgets/server-metric/pie.vue
diff --git a/packages/client/src/widgets/Slideshow.vue b/packages/client/src/widgets/slideshow.vue
similarity index 100%
rename from packages/client/src/widgets/Slideshow.vue
rename to packages/client/src/widgets/slideshow.vue
diff --git a/packages/client/src/widgets/Timeline.vue b/packages/client/src/widgets/timeline.vue
similarity index 97%
rename from packages/client/src/widgets/Timeline.vue
rename to packages/client/src/widgets/timeline.vue
index 9fd10aac2..8ff30d299 100644
--- a/packages/client/src/widgets/Timeline.vue
+++ b/packages/client/src/widgets/timeline.vue
@@ -1,5 +1,5 @@
 <template>
-	<Container
+	<MkContainer
 		:show-header="widgetProps.showHeader"
 		:style="`height: ${widgetProps.height}px;`"
 		:scrollable="true"
@@ -63,7 +63,7 @@
 				:antenna="widgetProps.antenna ? widgetProps.antenna.id : null"
 			/>
 		</div>
-	</Container>
+	</MkContainer>
 </template>
 
 <script lang="ts" setup>
@@ -76,8 +76,8 @@ import {
 } from "./widget";
 import type { GetFormResultType } from "@/scripts/form";
 import * as os from "@/os";
-import Container from "@/components/Container.vue";
-import XTimeline from "@/components/Timeline.vue";
+import MkContainer from "@/components/MkContainer.vue";
+import XTimeline from "@/components/MkTimeline.vue";
 import { $i } from "@/account";
 import { i18n } from "@/i18n";
 
diff --git a/packages/client/src/widgets/Trends.vue b/packages/client/src/widgets/trends.vue
similarity index 89%
rename from packages/client/src/widgets/Trends.vue
rename to packages/client/src/widgets/trends.vue
index 391bc6cf7..52b068127 100644
--- a/packages/client/src/widgets/Trends.vue
+++ b/packages/client/src/widgets/trends.vue
@@ -1,12 +1,12 @@
 <template>
-	<Container :show-header="widgetProps.showHeader" class="mkw-trends">
+	<MkContainer :show-header="widgetProps.showHeader" class="mkw-trends">
 		<template #header
 			><i class="ph-hash ph-bold ph-lg"></i
 			>{{ i18n.ts._widgets.trends }}</template
 		>
 
 		<div class="wbrkwala">
-			<Loading v-if="fetching" />
+			<MkLoading v-if="fetching" />
 			<transition-group
 				v-else
 				tag="div"
@@ -15,11 +15,11 @@
 			>
 				<div v-for="stat in stats" :key="stat.tag">
 					<div class="tag">
-						<A
+						<MkA
 							class="a"
 							:to="`/tags/${encodeURIComponent(stat.tag)}`"
 							:title="stat.tag"
-							>#{{ stat.tag }}</A
+							>#{{ stat.tag }}</MkA
 						>
 						<p>
 							{{
@@ -29,11 +29,11 @@
 							}}
 						</p>
 					</div>
-					<MiniChart class="chart" :src="stat.chart" />
+					<MkMiniChart class="chart" :src="stat.chart" />
 				</div>
 			</transition-group>
 		</div>
-	</Container>
+	</MkContainer>
 </template>
 
 <script lang="ts" setup>
@@ -45,8 +45,8 @@ import {
 	useWidgetPropsManager,
 } from "./widget";
 import type { GetFormResultType } from "@/scripts/form";
-import Container from "@/components/Container.vue";
-import MiniChart from "@/components/MiniChart.vue";
+import MkContainer from "@/components/MkContainer.vue";
+import MkMiniChart from "@/components/MkMiniChart.vue";
 import * as os from "@/os";
 import { useInterval } from "@/scripts/use-interval";
 import { i18n } from "@/i18n";
diff --git a/packages/client/src/widgets/UnixClock.vue b/packages/client/src/widgets/unix-clock.vue
similarity index 100%
rename from packages/client/src/widgets/UnixClock.vue
rename to packages/client/src/widgets/unix-clock.vue
diff --git a/packages/client/src/widgets/UserList.vue b/packages/client/src/widgets/user-list.vue
similarity index 86%
rename from packages/client/src/widgets/UserList.vue
rename to packages/client/src/widgets/user-list.vue
index a90d05228..45cdad00e 100644
--- a/packages/client/src/widgets/UserList.vue
+++ b/packages/client/src/widgets/user-list.vue
@@ -1,5 +1,5 @@
 <template>
-	<Container :show-header="widgetProps.showHeader" class="mkw-userList">
+	<MkContainer :show-header="widgetProps.showHeader" class="mkw-userList">
 		<template #header
 			><i class="ph-user-list ph-bold ph-lg"></i>
 			{{ list ? list.name : i18n.ts._widgets.userList }}</template
@@ -15,28 +15,28 @@
 
 		<div class="wsdlkfj">
 			<div v-if="widgetProps.listId == null" class="init">
-				<Button primary @click="chooseList">{{
+				<MkButton primary @click="chooseList">{{
 					i18n.ts._widgets._userList.chooseList
-				}}</Button>
+				}}</MkButton>
 			</div>
-			<Loading v-else-if="fetching" />
+			<MkLoading v-else-if="fetching" />
 			<div v-else class="users">
-				<Avatars :user-ids="users" class="userAvatars" />
+				<MkAvatars :user-ids="users" class="userAvatars" />
 			</div>
 		</div>
-	</Container>
+	</MkContainer>
 </template>
 
 <script lang="ts" setup>
 import type { Widget, WidgetComponentExpose } from "./widget";
 import { useWidgetPropsManager } from "./widget";
 import type { GetFormResultType } from "@/scripts/form";
-import Container from "@/components/Container.vue";
-import Avatars from "@/components/Avatars.vue";
+import MkContainer from "@/components/MkContainer.vue";
+import MkAvatars from "@/components/MkAvatars.vue";
 import * as os from "@/os";
 import { useInterval } from "@/scripts/use-interval";
 import { i18n } from "@/i18n";
-import Button from "@/components/Button.vue";
+import MkButton from "@/components/MkButton.vue";
 
 const name = "userList";
 const widgetPropsDef = {