diff --git a/packages/client/src/account.ts b/packages/client/src/account.ts
index 8afb0d394..83860bfed 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/MkSigninDialog.vue")),
+			defineAsyncComponent(() => import("@/components/SigninDialog.vue")),
 			{},
 			{
 				done: (res) => {
@@ -171,7 +171,7 @@ export async function openAccountMenu(
 
 	function createAccount() {
 		popup(
-			defineAsyncComponent(() => import("@/components/MkSignupDialog.vue")),
+			defineAsyncComponent(() => import("@/components/SignupDialog.vue")),
 			{},
 			{
 				done: (res) => {
diff --git a/packages/client/src/components/MkAbuseReport.vue b/packages/client/src/components/AbuseReport.vue
similarity index 78%
rename from packages/client/src/components/MkAbuseReport.vue
rename to packages/client/src/components/AbuseReport.vue
index f92d10ba7..267b84b26 100644
--- a/packages/client/src/components/MkAbuseReport.vue
+++ b/packages/client/src/components/AbuseReport.vue
@@ -1,35 +1,35 @@
 <template>
 	<div class="bcekxzvu _gap _panel">
 		<div class="target">
-			<MkA
+			<A
 				v-user-preview="report.targetUserId"
 				class="info"
 				:to="`/user-info/${report.targetUserId}`"
 			>
-				<MkAvatar
+				<Avatar
 					class="avatar"
 					:user="report.targetUser"
 					:show-indicator="true"
 					:disable-link="true"
 				/>
 				<div class="names">
-					<MkUserName class="name" :user="report.targetUser" />
-					<MkAcct
+					<UserName class="name" :user="report.targetUser" />
+					<Acct
 						class="acct"
 						:user="report.targetUser"
 						style="display: block"
 					/>
 				</div>
-			</MkA>
-			<MkKeyValue class="_formBlock">
+			</A>
+			<KeyValue class="_formBlock">
 				<template #key>{{ i18n.ts.registeredDate }}</template>
 				<template #value
 					>{{
 						new Date(report.targetUser.createdAt).toLocaleString()
 					}}
-					(<MkTime :time="report.targetUser.createdAt" />)</template
+					(<Time :time="report.targetUser.createdAt" />)</template
 				>
-			</MkKeyValue>
+			</KeyValue>
 		</div>
 		<div class="detail">
 			<div>
@@ -37,15 +37,16 @@
 			</div>
 			<hr />
 			<div>
-				{{ i18n.ts.reporter }}: <MkAcct :user="report.reporter" />
+				{{ i18n.ts.reporter }}:
+				<Acct :user="report.reporter" />
 			</div>
 			<div v-if="report.assignee">
 				{{ i18n.ts.moderator }}:
-				<MkAcct :user="report.assignee" />
+				<Acct :user="report.assignee" />
 			</div>
-			<div><MkTime :time="report.createdAt" /></div>
+			<div><Time :time="report.createdAt" /></div>
 			<div class="action">
-				<MkSwitch
+				<Switch
 					v-model="forward"
 					:disabled="
 						report.targetUser.host == null || report.resolved
@@ -55,19 +56,19 @@
 					<template #caption>{{
 						i18n.ts.forwardReportIsAnonymous
 					}}</template>
-				</MkSwitch>
-				<MkButton v-if="!report.resolved" primary @click="resolve">{{
+				</Switch>
+				<Button v-if="!report.resolved" primary @click="resolve">{{
 					i18n.ts.abuseMarkAsResolved
-				}}</MkButton>
+				}}</Button>
 			</div>
 		</div>
 	</div>
 </template>
 
 <script lang="ts" setup>
-import MkButton from "@/components/MkButton.vue";
-import MkSwitch from "@/components/form/switch.vue";
-import MkKeyValue from "@/components/MkKeyValue.vue";
+import Button from "@/components/Button.vue";
+import Switch from "@/components/form/Switch.vue";
+import KeyValue from "@/components/KeyValue.vue";
 import { acct, userPage } from "@/filters/user";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
diff --git a/packages/client/src/components/MkAbuseReportWindow.vue b/packages/client/src/components/AbuseReportWindow.vue
similarity index 83%
rename from packages/client/src/components/MkAbuseReportWindow.vue
rename to packages/client/src/components/AbuseReportWindow.vue
index 6e5171d57..cc80ec5dc 100644
--- a/packages/client/src/components/MkAbuseReportWindow.vue
+++ b/packages/client/src/components/AbuseReportWindow.vue
@@ -13,26 +13,28 @@
 			></i>
 			<I18n :src="i18n.ts.reportAbuseOf" tag="span">
 				<template #name>
-					<b><MkAcct :user="user" /></b>
+					<b>
+						<Acct :user="user" />
+					</b>
 				</template>
 			</I18n>
 		</template>
 		<div class="dpvffvvy _monolithic_">
 			<div class="_section">
-				<MkTextarea v-model="comment">
+				<Textarea v-model="comment">
 					<template #label>{{ i18n.ts.details }}</template>
 					<template #caption>{{
 						i18n.ts.fillAbuseReportDescription
 					}}</template>
-				</MkTextarea>
+				</Textarea>
 			</div>
 			<div class="_section">
-				<MkButton
+				<Button
 					primary
 					full
 					:disabled="comment.length === 0"
 					@click="send"
-					>{{ i18n.ts.send }}</MkButton
+					>{{ i18n.ts.send }}</Button
 				>
 			</div>
 		</div>
@@ -42,9 +44,9 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import type * as Misskey from "iceshrimp-js";
-import XWindow from "@/components/MkWindow.vue";
-import MkTextarea from "@/components/form/textarea.vue";
-import MkButton from "@/components/MkButton.vue";
+import XWindow from "@/components/Window.vue";
+import Textarea from "@/components/form/Textarea.vue";
+import Button from "@/components/Button.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 
diff --git a/packages/client/src/components/MkAnalogClock.vue b/packages/client/src/components/AnalogClock.vue
similarity index 100%
rename from packages/client/src/components/MkAnalogClock.vue
rename to packages/client/src/components/AnalogClock.vue
diff --git a/packages/client/src/components/MkAnnouncement.vue b/packages/client/src/components/Announcement.vue
similarity index 69%
rename from packages/client/src/components/MkAnnouncement.vue
rename to packages/client/src/components/Announcement.vue
index bd1091b7f..7b334da0d 100644
--- a/packages/client/src/components/MkAnnouncement.vue
+++ b/packages/client/src/components/Announcement.vue
@@ -1,15 +1,15 @@
 <template>
-	<MkModal ref="modal" :z-priority="'middle'" @closed="$emit('closed')">
+	<Modal ref="modal" :z-priority="'middle'" @closed="$emit('closed')">
 		<div :class="$style.root">
 			<div :class="$style.title">
-				<MkSparkle v-if="isGoodNews">{{ title }}</MkSparkle>
+				<Sparkle v-if="isGoodNews">{{ title }}</Sparkle>
 				<p v-else>{{ title }}</p>
 			</div>
 			<div :class="$style.time">
-				<MkTime :time="announcement.createdAt" />
+				<Time :time="announcement.createdAt" />
 				<div v-if="announcement.updatedAt">
 					{{ i18n.ts.updatedAt }}:
-					<MkTime :time="announcement.createdAt" />
+					<Time :time="announcement.createdAt" />
 				</div>
 			</div>
 			<Mfm :text="text" />
@@ -19,18 +19,18 @@
 				:src="imageUrl"
 				alt="attached image"
 			/>
-			<MkButton :class="$style.gotIt" primary full @click="gotIt()">{{
+			<Button :class="$style.gotIt" primary full @click="gotIt()">{{
 				i18n.ts.gotIt
-			}}</MkButton>
+			}}</Button>
 		</div>
-	</MkModal>
+	</Modal>
 </template>
 
 <script lang="ts" setup>
 import { shallowRef } from "vue";
-import MkModal from "@/components/MkModal.vue";
-import MkSparkle from "@/components/MkSparkle.vue";
-import MkButton from "@/components/MkButton.vue";
+import Modal from "@/components/Modal.vue";
+import Sparkle from "@/components/Sparkle.vue";
+import Button from "@/components/Button.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 MkModal>>();
+const modal = shallowRef<InstanceType<typeof Modal>>();
 
 const gotIt = () => {
 	modal.value.close();
diff --git a/packages/client/src/components/MkAutocomplete.vue b/packages/client/src/components/Autocomplete.vue
similarity index 98%
rename from packages/client/src/components/MkAutocomplete.vue
rename to packages/client/src/components/Autocomplete.vue
index dd7cd142d..3f169f03b 100644
--- a/packages/client/src/components/MkAutocomplete.vue
+++ b/packages/client/src/components/Autocomplete.vue
@@ -15,7 +15,7 @@
 			>
 				<img class="avatar" :src="user.avatarUrl" />
 				<span class="name">
-					<MkUserName :key="user.id" :user="user" />
+					<UserName :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/MkAvatars.vue b/packages/client/src/components/Avatars.vue
similarity index 91%
rename from packages/client/src/components/MkAvatars.vue
rename to packages/client/src/components/Avatars.vue
index d92eee22c..3eeb280b7 100644
--- a/packages/client/src/components/MkAvatars.vue
+++ b/packages/client/src/components/Avatars.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="defgtij">
 		<div v-for="user in users" :key="user.id" class="avatar-holder">
-			<MkAvatar :user="user" :show-indicator="true" class="avatar" />
+			<Avatar :user="user" :show-indicator="true" class="avatar" />
 		</div>
 	</div>
 </template>
diff --git a/packages/client/src/components/MkButton.vue b/packages/client/src/components/Button.vue
similarity index 99%
rename from packages/client/src/components/MkButton.vue
rename to packages/client/src/components/Button.vue
index 1494fcd54..4c5149599 100644
--- a/packages/client/src/components/MkButton.vue
+++ b/packages/client/src/components/Button.vue
@@ -12,7 +12,7 @@
 			<slot></slot>
 		</div>
 	</button>
-	<MkA
+	<A
 		v-else
 		class="bghgjjyj _button"
 		:class="{ inline, primary, gradate, danger, rounded, full, mini }"
@@ -23,7 +23,7 @@
 		<div class="content">
 			<slot></slot>
 		</div>
-	</MkA>
+	</A>
 </template>
 
 <script lang="ts" setup>
diff --git a/packages/client/src/components/MkCaptcha.vue b/packages/client/src/components/Captcha.vue
similarity index 97%
rename from packages/client/src/components/MkCaptcha.vue
rename to packages/client/src/components/Captcha.vue
index 146c512fb..be3459e6c 100644
--- a/packages/client/src/components/MkCaptcha.vue
+++ b/packages/client/src/components/Captcha.vue
@@ -1,6 +1,9 @@
 <template>
 	<div>
-		<span v-if="!available">{{ i18n.ts.waiting }}<MkEllipsis /></span>
+		<span v-if="!available"
+			>{{ i18n.ts.waiting }}
+			<Ellipsis />
+		</span>
 		<div ref="captchaEl"></div>
 	</div>
 </template>
diff --git a/packages/client/src/components/MkChannelFollowButton.vue b/packages/client/src/components/ChannelFollowButton.vue
similarity index 100%
rename from packages/client/src/components/MkChannelFollowButton.vue
rename to packages/client/src/components/ChannelFollowButton.vue
diff --git a/packages/client/src/components/MkChannelList.vue b/packages/client/src/components/ChannelList.vue
similarity index 68%
rename from packages/client/src/components/MkChannelList.vue
rename to packages/client/src/components/ChannelList.vue
index ff61ec7c6..cc4015616 100644
--- a/packages/client/src/components/MkChannelList.vue
+++ b/packages/client/src/components/ChannelList.vue
@@ -1,5 +1,5 @@
 <template>
-	<MkPagination :pagination="pagination">
+	<Pagination :pagination="pagination">
 		<template #empty>
 			<div class="_fullinfo">
 				<img
@@ -12,22 +12,22 @@
 		</template>
 
 		<template #default="{ items }">
-			<MkChannelPreview
+			<ChannelPreview
 				v-for="item in items"
 				:key="item.id"
 				class="_margin"
 				:channel="extractor(item)"
 			/>
 		</template>
-	</MkPagination>
+	</Pagination>
 </template>
 
 <script lang="ts" setup>
-import MkChannelPreview from "@/components/MkChannelPreview.vue";
-import type { Paging } from "@/components/MkPagination.vue";
-import MkPagination from "@/components/MkPagination.vue";
+import ChannelPreview from "@/components/ChannelPreview.vue";
+import type { Paging } from "@/components/Pagination.vue";
+import Pagination from "@/components/Pagination.vue";
 import { i18n } from "@/i18n";
-import {instance} from "@/instance";
+import { instance } from "@/instance";
 
 const props = withDefaults(
 	defineProps<{
diff --git a/packages/client/src/components/MkChannelPreview.vue b/packages/client/src/components/ChannelPreview.vue
similarity index 95%
rename from packages/client/src/components/MkChannelPreview.vue
rename to packages/client/src/components/ChannelPreview.vue
index 55b411b50..bb17783a9 100644
--- a/packages/client/src/components/MkChannelPreview.vue
+++ b/packages/client/src/components/ChannelPreview.vue
@@ -1,5 +1,5 @@
 <template>
-	<MkA :to="`/channels/${channel.id}`" class="eftoefju _panel" tabindex="-1">
+	<A :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 }}: <MkTime :time="channel.lastNotedAt" />
+				{{ i18n.ts.updatedAt }}: <Time :time="channel.lastNotedAt" />
 			</span>
 		</footer>
-	</MkA>
+	</A>
 </template>
 
 <script lang="ts" setup>
diff --git a/packages/client/src/components/MkChart.vue b/packages/client/src/components/Chart.vue
similarity index 99%
rename from packages/client/src/components/MkChart.vue
rename to packages/client/src/components/Chart.vue
index fdb0245f5..fe1adfcae 100644
--- a/packages/client/src/components/MkChart.vue
+++ b/packages/client/src/components/Chart.vue
@@ -2,7 +2,7 @@
 	<div class="cbbedffa">
 		<canvas ref="chartEl"></canvas>
 		<div v-if="fetching" class="fetching">
-			<MkLoading />
+			<Loading />
 		</div>
 	</div>
 </template>
diff --git a/packages/client/src/components/MkChartTooltip.vue b/packages/client/src/components/ChartTooltip.vue
similarity index 94%
rename from packages/client/src/components/MkChartTooltip.vue
rename to packages/client/src/components/ChartTooltip.vue
index 659dc6d39..32b6b23a9 100644
--- a/packages/client/src/components/MkChartTooltip.vue
+++ b/packages/client/src/components/ChartTooltip.vue
@@ -1,5 +1,5 @@
 <template>
-	<MkTooltip
+	<Tooltip
 		ref="tooltip"
 		:showing="showing"
 		:x="x"
@@ -24,12 +24,12 @@
 				</div>
 			</template>
 		</div>
-	</MkTooltip>
+	</Tooltip>
 </template>
 
 <script lang="ts" setup>
 import {} from "vue";
-import MkTooltip from "./MkTooltip.vue";
+import Tooltip from "./Tooltip.vue";
 
 const props = defineProps<{
 	showing: boolean;
diff --git a/packages/client/src/components/MkChatPreview.vue b/packages/client/src/components/ChatPreview.vue
similarity index 91%
rename from packages/client/src/components/MkChatPreview.vue
rename to packages/client/src/components/ChatPreview.vue
index 5d5849c93..327d51d46 100644
--- a/packages/client/src/components/MkChatPreview.vue
+++ b/packages/client/src/components/ChatPreview.vue
@@ -1,5 +1,5 @@
 <template>
-	<MkA
+	<A
 		class="rivslvers"
 		:class="{
 			isMe: isMe(message),
@@ -16,7 +16,7 @@
 		"
 	>
 		<div class="message _block">
-			<MkAvatar
+			<Avatar
 				class="avatar"
 				:user="
 					message.groupId
@@ -30,21 +30,20 @@
 			/>
 			<header v-if="message.groupId">
 				<span class="name">{{ message.group.name }}</span>
-				<MkTime :time="message.createdAt" class="time" />
+				<Time :time="message.createdAt" class="time" />
 			</header>
 			<header v-else>
-				<span class="name"
-					><MkUserName
-						:user="
-							isMe(message) ? message.recipient : message.user
-						"
-				/></span>
+				<span class="name">
+					<UserName
+						:user="isMe(message) ? message.recipient : message.user"
+					/>
+				</span>
 				<span class="username"
 					>@{{
 						acct(isMe(message) ? message.recipient : message.user)
 					}}</span
 				>
-				<MkTime :time="message.createdAt" class="time" />
+				<Time :time="message.createdAt" class="time" />
 			</header>
 			<div class="body">
 				<p class="text">
@@ -59,7 +58,7 @@
 				</p>
 			</div>
 		</div>
-	</MkA>
+	</A>
 </template>
 
 <script lang="ts" setup>
diff --git a/packages/client/src/components/MkCheatSheetDialog.vue b/packages/client/src/components/CheatSheetDialog.vue
similarity index 85%
rename from packages/client/src/components/MkCheatSheetDialog.vue
rename to packages/client/src/components/CheatSheetDialog.vue
index 3b723cde5..c7f54b031 100644
--- a/packages/client/src/components/MkCheatSheetDialog.vue
+++ b/packages/client/src/components/CheatSheetDialog.vue
@@ -11,8 +11,8 @@
 </template>
 
 <script lang="ts" setup>
-import XModalWindow from "@/components/MkModalWindow.vue";
-import XCheatSheet from "@/pages/mfm-cheat-sheet.vue";
+import XModalWindow from "@/components/ModalWindow.vue";
+import XCheatSheet from "@/pages/MfmCheatsheet.vue";
 import { i18n } from "@/i18n";
 
 const emit = defineEmits<{
@@ -32,6 +32,7 @@ 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/MkCode.vue b/packages/client/src/components/Code.vue
similarity index 72%
rename from packages/client/src/components/MkCode.vue
rename to packages/client/src/components/Code.vue
index 2e3fb3f0e..07dfa2427 100644
--- a/packages/client/src/components/MkCode.vue
+++ b/packages/client/src/components/Code.vue
@@ -11,7 +11,5 @@ defineProps<{
 	inline?: boolean;
 }>();
 
-const XCode = defineAsyncComponent(
-	() => import("@/components/MkCode.core.vue"),
-);
+const XCode = defineAsyncComponent(() => import("@/components/CodeCore.vue"));
 </script>
diff --git a/packages/client/src/components/MkCode.core.vue b/packages/client/src/components/CodeCore.vue
similarity index 100%
rename from packages/client/src/components/MkCode.core.vue
rename to packages/client/src/components/CodeCore.vue
diff --git a/packages/client/src/components/MkContainer.vue b/packages/client/src/components/Container.vue
similarity index 98%
rename from packages/client/src/components/MkContainer.vue
rename to packages/client/src/components/Container.vue
index be477a8f3..8fc98b526 100644
--- a/packages/client/src/components/MkContainer.vue
+++ b/packages/client/src/components/Container.vue
@@ -259,7 +259,11 @@ 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/MkContextMenu.vue b/packages/client/src/components/ContextMenu.vue
similarity index 92%
rename from packages/client/src/components/MkContextMenu.vue
rename to packages/client/src/components/ContextMenu.vue
index 33506b96f..9b509a386 100644
--- a/packages/client/src/components/MkContextMenu.vue
+++ b/packages/client/src/components/ContextMenu.vue
@@ -6,15 +6,15 @@
 			:style="{ zIndex }"
 			@contextmenu.prevent.stop="() => {}"
 		>
-			<MkMenu :items="items" :align="'left'" @close="$emit('closed')" />
+			<Menu :items="items" :align="'left'" @close="$emit('closed')" />
 		</div>
 	</transition>
 </template>
 
 <script lang="ts" setup>
 import { onBeforeUnmount, onMounted } from "vue";
-import MkMenu from "./MkMenu.vue";
-import type { MenuItem } from "./types/menu.vue";
+import Menu from "./Menu.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/MkCropperDialog.vue b/packages/client/src/components/CropperDialog.vue
similarity index 98%
rename from packages/client/src/components/MkCropperDialog.vue
rename to packages/client/src/components/CropperDialog.vue
index 835784594..ac0aa6000 100644
--- a/packages/client/src/components/MkCropperDialog.vue
+++ b/packages/client/src/components/CropperDialog.vue
@@ -19,7 +19,7 @@
 			>
 				<Transition name="fade">
 					<div v-if="loading" class="loading">
-						<MkLoading />
+						<Loading />
 					</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/MkModalWindow.vue";
+import XModalWindow from "@/components/ModalWindow.vue";
 import * as os from "@/os";
 import { $i } from "@/account";
 import { defaultStore } from "@/store";
@@ -144,6 +144,7 @@ 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/MkCwButton.vue b/packages/client/src/components/CwButton.vue
similarity index 94%
rename from packages/client/src/components/MkCwButton.vue
rename to packages/client/src/components/CwButton.vue
index 18227897d..a9f0d64e3 100644
--- a/packages/client/src/components/MkCwButton.vue
+++ b/packages/client/src/components/CwButton.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/MkDateSeparatedList.vue b/packages/client/src/components/DateSeparatedList.vue
similarity index 100%
rename from packages/client/src/components/MkDateSeparatedList.vue
rename to packages/client/src/components/DateSeparatedList.vue
diff --git a/packages/client/src/components/MkDialog.vue b/packages/client/src/components/Dialog.vue
similarity index 93%
rename from packages/client/src/components/MkDialog.vue
rename to packages/client/src/components/Dialog.vue
index 6d1f12833..83fff7c2c 100644
--- a/packages/client/src/components/MkDialog.vue
+++ b/packages/client/src/components/Dialog.vue
@@ -1,5 +1,5 @@
 <template>
-	<MkModal
+	<Modal
 		ref="modal"
 		:prefer-type="'dialog'"
 		@click="done(true)"
@@ -38,7 +38,7 @@
 					:class="$style.iconInner"
 					class="ph-circle-question ph-bold ph-lg"
 				></i>
-				<MkLoading
+				<Loading
 					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>
-			<MkInput
+			<Input
 				v-if="input && input.type !== 'paragraph'"
 				ref="inputEl"
 				v-model="inputValue"
@@ -107,16 +107,16 @@
 						<i class="ph-funnel ph-bold"></i>
 					</button>
 				</template>
-			</MkInput>
-			<MkTextarea
+			</Input>
+			<Textarea
 				v-if="input && input.type === 'paragraph'"
 				v-model="inputValue"
 				autofocus
 				:type="paragraph"
 				:placeholder="input.placeholder || undefined"
 			>
-			</MkTextarea>
-			<MkSelect v-if="select" v-model="selectedValue" autofocus>
+			</Textarea>
+			<Select 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>
-			</MkSelect>
+			</Select>
 
 			<div
 				v-if="(showOkButton || showCancelButton) && !actions"
 				:class="$style.buttons"
 			>
 				<div v-if="!isYesNo">
-					<MkButton
+					<Button
 						v-if="showOkButton"
 						inline
 						primary
@@ -153,34 +153,34 @@
 							showCancelButton || input || select
 								? i18n.ts.ok
 								: i18n.ts.gotIt
-						}}</MkButton
+						}}</Button
 					>
-					<MkButton
+					<Button
 						v-if="showCancelButton || input || select"
 						inline
 						@click="cancel"
-						>{{ i18n.ts.cancel }}</MkButton
+						>{{ i18n.ts.cancel }}</Button
 					>
 				</div>
 				<div v-else>
-					<MkButton
+					<Button
 						v-if="showOkButton"
 						inline
 						primary
 						:autofocus="!input && !select"
 						@click="ok"
 						>{{ i18n.ts.yes }}
-					</MkButton>
-					<MkButton
+					</Button>
+					<Button
 						v-if="showCancelButton || input || select"
 						inline
 						@click="cancel"
-						>{{ i18n.ts.no }}</MkButton
+						>{{ i18n.ts.no }}</Button
 					>
 				</div>
 			</div>
 			<div v-if="actions" :class="$style.buttons">
-				<MkButton
+				<Button
 					v-for="action in actions"
 					:key="action.text"
 					inline
@@ -191,21 +191,21 @@
 							modal?.close();
 						}
 					"
-					>{{ action.text }}</MkButton
+					>{{ action.text }}</Button
 				>
 			</div>
 		</div>
-	</MkModal>
+	</Modal>
 </template>
 
 <script lang="ts" setup>
 import { onBeforeUnmount, onMounted, ref, shallowRef } from "vue";
 import * as Acct from "iceshrimp-js/built/acct";
-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 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 * as os from "@/os";
 import { i18n } from "@/i18n";
 
@@ -276,7 +276,7 @@ const emit = defineEmits<{
 	(ev: "closed"): void;
 }>();
 
-const modal = shallowRef<InstanceType<typeof MkModal>>();
+const modal = shallowRef<InstanceType<typeof Modal>>();
 
 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 MkInput>();
+const inputEl = ref<typeof Input>();
 
 function done(canceled: boolean, result?) {
 	emit("done", { canceled, result });
diff --git a/packages/client/src/components/MkDigitalClock.vue b/packages/client/src/components/DigitalClock.vue
similarity index 100%
rename from packages/client/src/components/MkDigitalClock.vue
rename to packages/client/src/components/DigitalClock.vue
diff --git a/packages/client/src/components/MkDrive.vue b/packages/client/src/components/Drive.vue
similarity index 97%
rename from packages/client/src/components/MkDrive.vue
rename to packages/client/src/components/Drive.vue
index fdeafb2be..c662676b3 100644
--- a/packages/client/src/components/MkDrive.vue
+++ b/packages/client/src/components/Drive.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>
-					<MkButton v-if="moreFolders" ref="moreFolders">{{
+					<Button v-if="moreFolders" ref="moreFolders">{{
 						i18n.ts.loadMore
-					}}</MkButton>
+					}}</Button>
 				</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>
-					<MkButton
+					<Button
 						v-show="moreFiles"
 						ref="loadMoreFiles"
 						@click="fetchMoreFiles"
-						>{{ i18n.ts.loadMore }}</MkButton
+						>{{ i18n.ts.loadMore }}</Button
 					>
 				</div>
 				<div
@@ -116,7 +116,7 @@
 					</p>
 				</div>
 			</div>
-			<MkLoading v-if="fetching" />
+			<Loading 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 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 Button from "./Button.vue";
+import XNavFolder from "@/components/DriveNavFolder.vue";
+import XFolder from "@/components/DriveFolder.vue";
+import XFile from "@/components/DriveFile.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 MkButton>>();
+const loadMoreFiles = ref<InstanceType<typeof Button>>();
 const fileInput = ref<HTMLInputElement>();
 
 const folder = ref<Misskey.entities.DriveFolder | null>(null);
diff --git a/packages/client/src/components/MkDrive.file.vue b/packages/client/src/components/DriveFile.vue
similarity index 96%
rename from packages/client/src/components/MkDrive.file.vue
rename to packages/client/src/components/DriveFile.vue
index 8ed9be3eb..efc06ad59 100644
--- a/packages/client/src/components/MkDrive.file.vue
+++ b/packages/client/src/components/DriveFile.vue
@@ -22,7 +22,7 @@
 			<p>{{ i18n.ts.nsfw }}</p>
 		</div>
 
-		<MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain" />
+		<DriveFileThumbnail 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 MkDriveFileThumbnail from "@/components/MkDriveFileThumbnail.vue";
+import DriveFileThumbnail from "@/components/DriveFileThumbnail.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/MkMediaCaption.vue")),
+		defineAsyncComponent(() => import("@/components/MediaCaption.vue")),
 		{
 			title: i18n.ts.describeFile,
 			input: {
diff --git a/packages/client/src/components/MkDriveFileThumbnail.vue b/packages/client/src/components/DriveFileThumbnail.vue
similarity index 97%
rename from packages/client/src/components/MkDriveFileThumbnail.vue
rename to packages/client/src/components/DriveFileThumbnail.vue
index d3925cdcc..bb96cda54 100644
--- a/packages/client/src/components/MkDriveFileThumbnail.vue
+++ b/packages/client/src/components/DriveFileThumbnail.vue
@@ -42,7 +42,7 @@
 <script lang="ts" setup>
 import { computed } from "vue";
 import type * as Misskey from "iceshrimp-js";
-import ImgWithBlurhash from "@/components/MkImgWithBlurhash.vue";
+import ImgWithBlurhash from "@/components/ImgWithBlurhash.vue";
 
 const props = defineProps<{
 	file: Misskey.entities.DriveFile;
diff --git a/packages/client/src/components/MkDrive.folder.vue b/packages/client/src/components/DriveFolder.vue
similarity index 99%
rename from packages/client/src/components/MkDrive.folder.vue
rename to packages/client/src/components/DriveFolder.vue
index 1bcb9aa26..03ee5fa56 100644
--- a/packages/client/src/components/MkDrive.folder.vue
+++ b/packages/client/src/components/DriveFolder.vue
@@ -256,7 +256,7 @@ function onContextmenu(ev: MouseEvent) {
 				action: () => {
 					os.popup(
 						defineAsyncComponent(
-							() => import("@/components/MkDriveWindow.vue"),
+							() => import("@/components/DriveWindow.vue"),
 						),
 						{
 							initialFolder: props.folder,
diff --git a/packages/client/src/components/MkDrive.navFolder.vue b/packages/client/src/components/DriveNavFolder.vue
similarity index 100%
rename from packages/client/src/components/MkDrive.navFolder.vue
rename to packages/client/src/components/DriveNavFolder.vue
diff --git a/packages/client/src/components/MkDriveSelectDialog.vue b/packages/client/src/components/DriveSelectDialog.vue
similarity index 93%
rename from packages/client/src/components/MkDriveSelectDialog.vue
rename to packages/client/src/components/DriveSelectDialog.vue
index 7d25f14b3..fc6e45c4e 100644
--- a/packages/client/src/components/MkDriveSelectDialog.vue
+++ b/packages/client/src/components/DriveSelectDialog.vue
@@ -38,8 +38,8 @@
 <script lang="ts" setup>
 import { ref } from "vue";
 import * as Misskey from "iceshrimp-js";
-import XDrive from "@/components/MkDrive.vue";
-import XModalWindow from "@/components/MkModalWindow.vue";
+import XDrive from "@/components/Drive.vue";
+import XModalWindow from "@/components/ModalWindow.vue";
 import number from "@/filters/number";
 import { i18n } from "@/i18n";
 
diff --git a/packages/client/src/components/MkDriveWindow.vue b/packages/client/src/components/DriveWindow.vue
similarity index 84%
rename from packages/client/src/components/MkDriveWindow.vue
rename to packages/client/src/components/DriveWindow.vue
index 12d271f3e..1c7eb0962 100644
--- a/packages/client/src/components/MkDriveWindow.vue
+++ b/packages/client/src/components/DriveWindow.vue
@@ -16,8 +16,8 @@
 <script lang="ts" setup>
 import {} from "vue";
 import * as Misskey from "iceshrimp-js";
-import XDrive from "@/components/MkDrive.vue";
-import XWindow from "@/components/MkWindow.vue";
+import XDrive from "@/components/Drive.vue";
+import XWindow from "@/components/Window.vue";
 import { i18n } from "@/i18n";
 
 defineProps<{
diff --git a/packages/client/src/components/MkEmojiPicker.vue b/packages/client/src/components/EmojiPicker.vue
similarity index 98%
rename from packages/client/src/components/MkEmojiPicker.vue
rename to packages/client/src/components/EmojiPicker.vue
index 447017154..78eb8e4cb 100644
--- a/packages/client/src/components/MkEmojiPicker.vue
+++ b/packages/client/src/components/EmojiPicker.vue
@@ -28,7 +28,7 @@
 							tabindex="0"
 							@click="chosen(emoji, $event)"
 						>
-							<!--<MkEmoji v-if="emoji.char != null" :emoji="emoji.char"/>-->
+							<!--<Emoji v-if="emoji.char != null" :emoji="emoji.char"/>-->
 							<img
 								class="emoji"
 								:src="
@@ -48,7 +48,7 @@
 							tabindex="0"
 							@click="chosen(emoji, $event)"
 						>
-							<MkEmoji class="emoji" :emoji="emoji.emoji" />
+							<Emoji class="emoji" :emoji="emoji.emoji" />
 						</button>
 					</div>
 				</section>
@@ -63,7 +63,7 @@
 								tabindex="0"
 								@click="chosen(emoji, $event)"
 							>
-								<MkEmoji
+								<Emoji
 									class="emoji"
 									:emoji="emoji"
 									:normal="true"
@@ -84,7 +84,7 @@
 								class="_button item"
 								@click="chosen(emoji, $event)"
 							>
-								<MkEmoji
+								<Emoji
 									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/MkEmojiPicker.section.vue";
+import XSection from "@/components/EmojiPickerSection.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/MkRipple.vue";
+import Ripple from "@/components/Ripple.vue";
 import * as os from "@/os";
 import { isTouchUsing } from "@/scripts/touch";
 import { deviceKind } from "@/scripts/device-kind";
diff --git a/packages/client/src/components/MkEmojiPickerDialog.vue b/packages/client/src/components/EmojiPickerDialog.vue
similarity index 86%
rename from packages/client/src/components/MkEmojiPickerDialog.vue
rename to packages/client/src/components/EmojiPickerDialog.vue
index c3212cd40..8b3c7deab 100644
--- a/packages/client/src/components/MkEmojiPickerDialog.vue
+++ b/packages/client/src/components/EmojiPickerDialog.vue
@@ -1,5 +1,5 @@
 <template>
-	<MkModal
+	<Modal
 		ref="modal"
 		v-slot="{ type, maxHeight }"
 		:z-priority="'middle'"
@@ -17,7 +17,7 @@
 		@close="emit('close')"
 		@closed="emit('closed')"
 	>
-		<MkEmojiPicker
+		<EmojiPicker
 			ref="picker"
 			class="ryghynhb _popup _shadow"
 			:class="{ drawer: type === 'drawer' }"
@@ -27,13 +27,13 @@
 			:max-height="maxHeight"
 			@chosen="chosen"
 		/>
-	</MkModal>
+	</Modal>
 </template>
 
 <script lang="ts" setup>
 import { ref, onMounted, onBeforeUnmount } from "vue";
-import MkModal from "@/components/MkModal.vue";
-import MkEmojiPicker from "@/components/MkEmojiPicker.vue";
+import Modal from "@/components/Modal.vue";
+import EmojiPicker from "@/components/EmojiPicker.vue";
 import { defaultStore } from "@/store";
 
 withDefaults(
@@ -56,8 +56,8 @@ const emit = defineEmits<{
 	(ev: "closed"): void;
 }>();
 
-const modal = ref<InstanceType<typeof MkModal>>();
-const picker = ref<InstanceType<typeof MkEmojiPicker>>();
+const modal = ref<InstanceType<typeof Modal>>();
+const picker = ref<InstanceType<typeof EmojiPicker>>();
 
 function checkForShift(ev?: MouseEvent) {
 	if (ev?.shiftKey) return;
diff --git a/packages/client/src/components/MkEmojiPicker.section.vue b/packages/client/src/components/EmojiPickerSection.vue
similarity index 96%
rename from packages/client/src/components/MkEmojiPicker.section.vue
rename to packages/client/src/components/EmojiPickerSection.vue
index d7d1ba8f0..26119fe98 100644
--- a/packages/client/src/components/MkEmojiPicker.section.vue
+++ b/packages/client/src/components/EmojiPickerSection.vue
@@ -41,7 +41,7 @@
 				class="_button item"
 				@click="emit('chosen', emoji, $event)"
 			>
-				<MkEmoji class="emoji" :emoji="emoji" :normal="true" />
+				<Emoji class="emoji" :emoji="emoji" :normal="true" />
 			</button>
 		</div>
 	</section>
diff --git a/packages/client/src/components/MkFeaturedPhotos.vue b/packages/client/src/components/FeaturedPhotos.vue
similarity index 100%
rename from packages/client/src/components/MkFeaturedPhotos.vue
rename to packages/client/src/components/FeaturedPhotos.vue
diff --git a/packages/client/src/components/MkFileListForAdmin.vue b/packages/client/src/components/FileListForAdmin.vue
similarity index 86%
rename from packages/client/src/components/MkFileListForAdmin.vue
rename to packages/client/src/components/FileListForAdmin.vue
index e39272616..2827e91b4 100644
--- a/packages/client/src/components/MkFileListForAdmin.vue
+++ b/packages/client/src/components/FileListForAdmin.vue
@@ -1,12 +1,12 @@
 <template>
 	<div>
-		<MkPagination
+		<Pagination
 			v-slot="{ items }"
 			:pagination="pagination"
 			class="urempief"
 			:class="{ grid: viewMode === 'grid' }"
 		>
-			<MkA
+			<A
 				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>
-				<MkDriveFileThumbnail
+				<DriveFileThumbnail
 					class="thumbnail"
 					:file="file"
 					fit="contain"
@@ -32,7 +32,7 @@
 						<small style="opacity: 0.7">{{ file.name }}</small>
 					</div>
 					<div>
-						<MkAcct v-if="file.user" :user="file.user" />
+						<Acct 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 }}:
-							<MkTime :time="file.createdAt" mode="detail"
+							<Time :time="file.createdAt" mode="detail"
 						/></span>
 					</div>
 				</div>
-			</MkA>
-		</MkPagination>
+			</A>
+		</Pagination>
 	</div>
 </template>
 
 <script lang="ts" setup>
 import { computed } from "vue";
 import * as Acct from "iceshrimp-js/built/acct";
-import MkSwitch from "@/components/ui/switch.vue";
-import MkPagination from "@/components/MkPagination.vue";
-import MkDriveFileThumbnail from "@/components/MkDriveFileThumbnail.vue";
+import Switch from "@/components/ui/Switch.vue";
+import Pagination from "@/components/Pagination.vue";
+import DriveFileThumbnail from "@/components/DriveFileThumbnail.vue";
 import bytes from "@/filters/bytes";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
@@ -72,6 +72,7 @@ const props = defineProps<{
 	0% {
 		opacity: 1;
 	}
+
 	50% {
 		opacity: 0;
 	}
diff --git a/packages/client/src/components/MkFileTypeIcon.vue b/packages/client/src/components/FileTypeIcon.vue
similarity index 100%
rename from packages/client/src/components/MkFileTypeIcon.vue
rename to packages/client/src/components/FileTypeIcon.vue
diff --git a/packages/client/src/components/MkFolder.vue b/packages/client/src/components/Folder.vue
similarity index 100%
rename from packages/client/src/components/MkFolder.vue
rename to packages/client/src/components/Folder.vue
diff --git a/packages/client/src/components/MkFollowButton.vue b/packages/client/src/components/FollowButton.vue
similarity index 100%
rename from packages/client/src/components/MkFollowButton.vue
rename to packages/client/src/components/FollowButton.vue
diff --git a/packages/client/src/components/MkForgotPassword.vue b/packages/client/src/components/ForgotPassword.vue
similarity index 85%
rename from packages/client/src/components/MkForgotPassword.vue
rename to packages/client/src/components/ForgotPassword.vue
index 07f086601..5272a0d09 100644
--- a/packages/client/src/components/MkForgotPassword.vue
+++ b/packages/client/src/components/ForgotPassword.vue
@@ -14,7 +14,7 @@
 			@submit.prevent="onSubmit"
 		>
 			<div class="main _formRoot">
-				<MkInput
+				<Input
 					v-model="username"
 					class="_formBlock"
 					type="text"
@@ -25,9 +25,9 @@
 				>
 					<template #label>{{ i18n.ts.username }}</template>
 					<template #prefix>@</template>
-				</MkInput>
+				</Input>
 
-				<MkInput
+				<Input
 					v-model="email"
 					class="_formBlock"
 					type="email"
@@ -38,21 +38,21 @@
 					<template #caption>{{
 						i18n.ts._forgotPassword.enterEmail
 					}}</template>
-				</MkInput>
+				</Input>
 
-				<MkButton
+				<Button
 					class="_formBlock"
 					type="submit"
 					:disabled="processing"
 					primary
 					style="margin: 0 auto"
-					>{{ i18n.ts.send }}</MkButton
+					>{{ i18n.ts.send }}</Button
 				>
 			</div>
 			<div class="sub">
-				<MkA to="/about" class="_link">{{
+				<A to="/about" class="_link">{{
 					i18n.ts._forgotPassword.ifNoEmail
-				}}</MkA>
+				}}</A>
 			</div>
 		</form>
 		<div v-else class="bafecedb">
@@ -63,9 +63,9 @@
 
 <script lang="ts" setup>
 import {} from "vue";
-import XModalWindow from "@/components/MkModalWindow.vue";
-import MkButton from "@/components/MkButton.vue";
-import MkInput from "@/components/form/input.vue";
+import XModalWindow from "@/components/ModalWindow.vue";
+import Button from "@/components/Button.vue";
+import Input 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/MkFormDialog.vue b/packages/client/src/components/FormDialog.vue
similarity index 91%
rename from packages/client/src/components/MkFormDialog.vue
rename to packages/client/src/components/FormDialog.vue
index 08d075280..e35837377 100644
--- a/packages/client/src/components/MkFormDialog.vue
+++ b/packages/client/src/components/FormDialog.vue
@@ -14,7 +14,7 @@
 			{{ title }}
 		</template>
 
-		<MkSpacer :margin-min="20" :margin-max="32">
+		<Spacer :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>
-					<MkButton
+					<Button
 						v-else-if="form[item].type === 'button'"
 						class="_formBlock"
 						@click="form[item].action($event, values)"
 					>
 						<span v-text="form[item].content || item"></span>
-					</MkButton>
+					</Button>
 				</template>
 			</div>
-		</MkSpacer>
+		</Spacer>
 	</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 MkButton from "./MkButton.vue";
-import FormRadios from "./form/radios.vue";
-import XModalWindow from "@/components/MkModalWindow.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 { i18n } from "@/i18n";
 
 export default defineComponent({
@@ -174,7 +174,7 @@ export default defineComponent({
 		FormSwitch,
 		FormSelect,
 		FormRange,
-		MkButton,
+		Button,
 		FormRadios,
 	},
 
diff --git a/packages/client/src/components/MkFormula.vue b/packages/client/src/components/Formula.vue
similarity index 88%
rename from packages/client/src/components/MkFormula.vue
rename to packages/client/src/components/Formula.vue
index e488c7da7..eb532dca3 100644
--- a/packages/client/src/components/MkFormula.vue
+++ b/packages/client/src/components/Formula.vue
@@ -9,7 +9,7 @@ import * as os from "@/os";
 export default defineComponent({
 	components: {
 		XFormula: defineAsyncComponent(
-			() => import("@/components/MkFormulaCore.vue"),
+			() => import("@/components/FormulaCore.vue"),
 		),
 	},
 	props: {
diff --git a/packages/client/src/components/MkFormulaCore.vue b/packages/client/src/components/FormulaCore.vue
similarity index 100%
rename from packages/client/src/components/MkFormulaCore.vue
rename to packages/client/src/components/FormulaCore.vue
diff --git a/packages/client/src/components/MkGalleryPostPreview.vue b/packages/client/src/components/GalleryPostPreview.vue
similarity index 90%
rename from packages/client/src/components/MkGalleryPostPreview.vue
rename to packages/client/src/components/GalleryPostPreview.vue
index 2ef339a8f..d7cf489c2 100644
--- a/packages/client/src/components/MkGalleryPostPreview.vue
+++ b/packages/client/src/components/GalleryPostPreview.vue
@@ -1,5 +1,5 @@
 <template>
-	<MkA :to="`/gallery/${post.id}`" class="ttasepnz _panel">
+	<A :to="`/gallery/${post.id}`" class="ttasepnz _panel">
 		<div class="thumbnail">
 			<ImgWithBlurhash
 				class="img"
@@ -9,19 +9,19 @@
 		</div>
 		<article>
 			<header>
-				<MkAvatar :user="post.user" class="avatar" />
+				<Avatar :user="post.user" class="avatar" />
 			</header>
 			<footer>
 				<span class="title">{{ post.title }}</span>
 			</footer>
 		</article>
-	</MkA>
+	</A>
 </template>
 
 <script lang="ts" setup>
 import {} from "vue";
 import { userName } from "@/filters/user";
-import ImgWithBlurhash from "@/components/MkImgWithBlurhash.vue";
+import ImgWithBlurhash from "@/components/ImgWithBlurhash.vue";
 
 const props = defineProps<{
 	post: any;
diff --git a/packages/client/src/components/MkHeatmap.vue b/packages/client/src/components/Heatmap.vue
similarity index 99%
rename from packages/client/src/components/MkHeatmap.vue
rename to packages/client/src/components/Heatmap.vue
index f72286c43..f697c62b0 100644
--- a/packages/client/src/components/MkHeatmap.vue
+++ b/packages/client/src/components/Heatmap.vue
@@ -1,6 +1,6 @@
 <template>
 	<div ref="rootEl">
-		<MkLoading v-if="fetching" />
+		<Loading v-if="fetching" />
 		<div v-else>
 			<canvas ref="chartEl"></canvas>
 		</div>
diff --git a/packages/client/src/components/MkImageViewer.vue b/packages/client/src/components/ImageViewer.vue
similarity index 92%
rename from packages/client/src/components/MkImageViewer.vue
rename to packages/client/src/components/ImageViewer.vue
index f15092dc7..db3893236 100644
--- a/packages/client/src/components/MkImageViewer.vue
+++ b/packages/client/src/components/ImageViewer.vue
@@ -1,5 +1,5 @@
 <template>
-	<MkModal
+	<Modal
 		ref="modal"
 		:z-priority="'middle'"
 		@click="modal.close()"
@@ -22,7 +22,7 @@
 				>
 			</footer>
 		</div>
-	</MkModal>
+	</Modal>
 </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 MkModal from "@/components/MkModal.vue";
+import Modal from "@/components/Modal.vue";
 
 const props = withDefaults(
 	defineProps<{
@@ -43,7 +43,7 @@ const emit = defineEmits<{
 	(ev: "closed"): void;
 }>();
 
-const modal = $ref<InstanceType<typeof MkModal>>();
+const modal = $ref<InstanceType<typeof Modal>>();
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/components/MkImgWithBlurhash.vue b/packages/client/src/components/ImgWithBlurhash.vue
similarity index 100%
rename from packages/client/src/components/MkImgWithBlurhash.vue
rename to packages/client/src/components/ImgWithBlurhash.vue
diff --git a/packages/client/src/components/MkInfo.vue b/packages/client/src/components/Info.vue
similarity index 100%
rename from packages/client/src/components/MkInfo.vue
rename to packages/client/src/components/Info.vue
diff --git a/packages/client/src/components/MkInstanceCardMini.vue b/packages/client/src/components/InstanceCardMini.vue
similarity index 96%
rename from packages/client/src/components/MkInstanceCardMini.vue
rename to packages/client/src/components/InstanceCardMini.vue
index ff242f5a6..77987bf3e 100644
--- a/packages/client/src/components/MkInstanceCardMini.vue
+++ b/packages/client/src/components/InstanceCardMini.vue
@@ -19,13 +19,13 @@
 				{{ instance.softwareVersion }}</span
 			>
 		</div>
-		<MkMiniChart v-if="chartValues" class="chart" :src="chartValues" />
+		<MiniChart v-if="chartValues" class="chart" :src="chartValues" />
 	</div>
 </template>
 
 <script lang="ts" setup>
 import * as iceshrimp from "iceshrimp-js";
-import MkMiniChart from "@/components/MkMiniChart.vue";
+import MiniChart from "@/components/MiniChart.vue";
 import * as os from "@/os";
 import { getProxiedImageUrlNullable } from "@/scripts/media-proxy";
 
diff --git a/packages/client/src/components/MkInstanceSelectDialog.vue b/packages/client/src/components/InstanceSelectDialog.vue
similarity index 95%
rename from packages/client/src/components/MkInstanceSelectDialog.vue
rename to packages/client/src/components/InstanceSelectDialog.vue
index e9def98fa..aa1547d26 100644
--- a/packages/client/src/components/MkInstanceSelectDialog.vue
+++ b/packages/client/src/components/InstanceSelectDialog.vue
@@ -11,13 +11,13 @@
 		<template #header>{{ i18n.ts.selectInstance }}</template>
 		<div class="mehkoush">
 			<div class="form">
-				<MkInput
+				<Input
 					v-model="hostname"
 					:autofocus="true"
 					@update:modelValue="search"
 				>
 					<template #label>{{ i18n.ts.instance }}</template>
-				</MkInput>
+				</Input>
 			</div>
 			<div
 				v-if="hostname != ''"
@@ -56,8 +56,8 @@
 </template>
 
 <script lang="ts" setup>
-import MkInput from "@/components/form/input.vue";
-import XModalWindow from "@/components/MkModalWindow.vue";
+import Input from "@/components/form/Input.vue";
+import XModalWindow from "@/components/ModalWindow.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { Instance } from "iceshrimp-js/built/entities";
diff --git a/packages/client/src/components/MkInstanceStats.vue b/packages/client/src/components/InstanceStats.vue
similarity index 90%
rename from packages/client/src/components/MkInstanceStats.vue
rename to packages/client/src/components/InstanceStats.vue
index c2a507173..8cc782f4d 100644
--- a/packages/client/src/components/MkInstanceStats.vue
+++ b/packages/client/src/components/InstanceStats.vue
@@ -1,10 +1,10 @@
 <template>
 	<div :class="$style.root">
-		<MkFolder class="item">
+		<Folder class="item">
 			<template #header>Chart</template>
 			<div :class="$style.chart">
 				<div class="selects">
-					<MkSelect v-model="chartSrc" style="margin: 0; flex: 1">
+					<Select 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>
-					</MkSelect>
-					<MkSelect v-model="chartSpan" style="margin: 0 0 0 10px">
+					</Select>
+					<Select v-model="chartSpan" style="margin: 0 0 0 10px">
 						<option value="hour">{{ i18n.ts.perHour }}</option>
 						<option value="day">{{ i18n.ts.perDay }}</option>
-					</MkSelect>
+					</Select>
 				</div>
 				<div class="chart _panel">
-					<MkChart
+					<ChartComp
 						:src="chartSrc"
 						:span="chartSpan"
 						:limit="chartLimit"
 						:detailed="true"
-					></MkChart>
+					></ChartComp>
 				</div>
 			</div>
-		</MkFolder>
+		</Folder>
 
-		<MkFolder class="item">
+		<Folder class="item">
 			<template #header>Active users heatmap</template>
-			<MkSelect v-model="heatmapSrc" style="margin: 0 0 12px 0">
+			<Select 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>
-			</MkSelect>
+			</Select>
 			<div class="_panel" :class="$style.heatmap">
-				<MkHeatmap :src="heatmapSrc" />
+				<Heatmap :src="heatmapSrc" />
 			</div>
-		</MkFolder>
+		</Folder>
 
-		<MkFolder class="item">
+		<Folder class="item">
 			<template #header>Federation</template>
 			<div :class="$style.federation">
 				<div class="pies">
@@ -97,20 +97,20 @@
 					</div>
 				</div>
 			</div>
-		</MkFolder>
+		</Folder>
 	</div>
 </template>
 
 <script lang="ts" setup>
 import { onMounted } from "vue";
 import { Chart } from "chart.js";
-import MkSelect from "@/components/form/select.vue";
-import MkChart from "@/components/MkChart.vue";
+import Select from "@/components/form/Select.vue";
+import ChartComp from "@/components/Chart.vue";
 import { useChartTooltip } from "@/scripts/use-chart-tooltip";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
-import MkHeatmap from "@/components/MkHeatmap.vue";
-import MkFolder from "@/components/MkFolder.vue";
+import Heatmap from "@/components/Heatmap.vue";
+import Folder from "@/components/Folder.vue";
 import { initChart } from "@/scripts/init-chart";
 
 initChart();
diff --git a/packages/client/src/components/MkInstanceTicker.vue b/packages/client/src/components/InstanceTicker.vue
similarity index 100%
rename from packages/client/src/components/MkInstanceTicker.vue
rename to packages/client/src/components/InstanceTicker.vue
diff --git a/packages/client/src/components/MkKeyValue.vue b/packages/client/src/components/KeyValue.vue
similarity index 100%
rename from packages/client/src/components/MkKeyValue.vue
rename to packages/client/src/components/KeyValue.vue
diff --git a/packages/client/src/components/MkLaunchPad.vue b/packages/client/src/components/LaunchPad.vue
similarity index 96%
rename from packages/client/src/components/MkLaunchPad.vue
rename to packages/client/src/components/LaunchPad.vue
index e26105622..11cecfba1 100644
--- a/packages/client/src/components/MkLaunchPad.vue
+++ b/packages/client/src/components/LaunchPad.vue
@@ -1,5 +1,5 @@
 <template>
-	<MkModal
+	<Modal
 		ref="modal"
 		v-slot="{ type, maxHeight }"
 		:prefer-type="preferedModalType"
@@ -38,7 +38,7 @@
 							><i class="ph-circle ph-fill"></i
 						></span>
 					</button>
-					<MkA
+					<A
 						v-else
 						v-click-anime
 						:to="item.to"
@@ -54,16 +54,16 @@
 							}"
 							><i class="ph-circle ph-fill"></i
 						></span>
-					</MkA>
+					</A>
 				</template>
 			</div>
 		</div>
-	</MkModal>
+	</Modal>
 </template>
 
 <script lang="ts" setup>
 import {} from "vue";
-import MkModal from "@/components/MkModal.vue";
+import Modal from "@/components/Modal.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 MkModal>>();
+const modal = $ref<InstanceType<typeof Modal>>();
 
 const menu = defaultStore.state.menu;
 
diff --git a/packages/client/src/components/MkLink.vue b/packages/client/src/components/Link.vue
similarity index 90%
rename from packages/client/src/components/MkLink.vue
rename to packages/client/src/components/Link.vue
index 9e1e48215..0be521b9b 100644
--- a/packages/client/src/components/MkLink.vue
+++ b/packages/client/src/components/Link.vue
@@ -1,6 +1,6 @@
 <template>
 	<component
-		:is="self ? 'MkA' : 'a'"
+		:is="self ? 'A' : 'a'"
 		ref="el"
 		class="xlcxczvw _link"
 		:[attr]="self ? url.substr(local.length) : url"
@@ -39,9 +39,7 @@ const el = $ref();
 
 useTooltip($$(el), (showing) => {
 	os.popup(
-		defineAsyncComponent(
-			() => import("@/components/MkUrlPreviewPopup.vue"),
-		),
+		defineAsyncComponent(() => import("@/components/UrlPreviewPopup.vue")),
 		{
 			showing,
 			url: props.url,
diff --git a/packages/client/src/components/MkManyAnnouncements.vue b/packages/client/src/components/ManyAnnouncements.vue
similarity index 72%
rename from packages/client/src/components/MkManyAnnouncements.vue
rename to packages/client/src/components/ManyAnnouncements.vue
index 5c8b225de..e718c1a18 100644
--- a/packages/client/src/components/MkManyAnnouncements.vue
+++ b/packages/client/src/components/ManyAnnouncements.vue
@@ -1,28 +1,28 @@
 <template>
-	<MkModal ref="modal" :z-priority="'middle'" @closed="$emit('closed')">
+	<Modal ref="modal" :z-priority="'middle'" @closed="$emit('closed')">
 		<div :class="$style.root">
 			<p :class="$style.title">
 				{{ i18n.ts.youHaveUnreadAnnouncements }}
 			</p>
-			<MkButton
+			<Button
 				:class="$style.gotIt"
 				primary
 				full
 				@click="checkAnnouncements()"
-				>{{ i18n.ts.gotIt }}</MkButton
+				>{{ i18n.ts.gotIt }}</Button
 			>
 		</div>
-	</MkModal>
+	</Modal>
 </template>
 
 <script lang="ts" setup>
 import { shallowRef } from "vue";
-import MkModal from "@/components/MkModal.vue";
-import MkButton from "@/components/MkButton.vue";
+import Modal from "@/components/Modal.vue";
+import Button from "@/components/Button.vue";
 import { i18n } from "@/i18n";
 import * as os from "@/os";
 
-const modal = shallowRef<InstanceType<typeof MkModal>>();
+const modal = shallowRef<InstanceType<typeof Modal>>();
 const checkAnnouncements = () => {
 	modal.value.close();
 	location.href = "/announcements";
diff --git a/packages/client/src/components/MkMarquee.vue b/packages/client/src/components/Marquee.vue
similarity index 100%
rename from packages/client/src/components/MkMarquee.vue
rename to packages/client/src/components/Marquee.vue
diff --git a/packages/client/src/components/MkMedia.vue b/packages/client/src/components/Media.vue
similarity index 98%
rename from packages/client/src/components/MkMedia.vue
rename to packages/client/src/components/Media.vue
index 315e3eec6..d6af45f9a 100644
--- a/packages/client/src/components/MkMedia.vue
+++ b/packages/client/src/components/Media.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/MkImgWithBlurhash.vue";
+import ImgWithBlurhash from "@/components/ImgWithBlurhash.vue";
 import { defaultStore } from "@/store";
 import { i18n } from "@/i18n";
 import * as os from "@/os";
@@ -190,6 +190,7 @@ watch(
 		overflow: hidden;
 		top: 12px;
 		right: 12px;
+
 		> * {
 			background-color: var(--accentedBg);
 			-webkit-backdrop-filter: var(--blur, blur(15px));
@@ -211,6 +212,7 @@ watch(
 		background-size: contain;
 		background-repeat: no-repeat;
 		box-sizing: border-box;
+
 		&:focus-visible {
 			border: 2px solid var(--accent);
 		}
@@ -230,16 +232,19 @@ 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;
@@ -247,9 +252,11 @@ 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;
@@ -259,9 +266,11 @@ watch(
 			}
 		}
 	}
+
 	&.max-width_350px {
 		:deep(.plyr:not(:fullscreen)) {
 			min-width: unset !important;
+
 			.plyr__control--overlaid,
 			.plyr__progress__container,
 			.plyr__volume,
@@ -269,6 +278,7 @@ watch(
 				display: none;
 			}
 		}
+
 		:deep(.plyr__time) {
 			white-space: nowrap;
 			overflow: hidden;
diff --git a/packages/client/src/components/MkMediaBanner.vue b/packages/client/src/components/MediaBanner.vue
similarity index 100%
rename from packages/client/src/components/MkMediaBanner.vue
rename to packages/client/src/components/MediaBanner.vue
diff --git a/packages/client/src/components/MkMediaCaption.vue b/packages/client/src/components/MediaCaption.vue
similarity index 93%
rename from packages/client/src/components/MkMediaCaption.vue
rename to packages/client/src/components/MediaCaption.vue
index b44fa0d52..5c4a73ede 100644
--- a/packages/client/src/components/MkMediaCaption.vue
+++ b/packages/client/src/components/MediaCaption.vue
@@ -1,5 +1,5 @@
 <template>
-	<MkModal ref="modal" @click="done(true)" @closed="$emit('closed')">
+	<Modal 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"
 					>
-						<MkButton
+						<Button
 							inline
 							primary
 							:disabled="remainingLength < 0"
 							@click="ok"
-							>{{ i18n.ts.ok }}</MkButton
+							>{{ i18n.ts.ok }}</Button
 						>
-						<MkButton inline @click="caption">{{
+						<Button inline @click="caption">{{
 							i18n.ts.caption
-						}}</MkButton>
-						<MkButton inline @click="cancel">{{
+						}}</Button>
+						<Button inline @click="cancel">{{
 							i18n.ts.cancel
-						}}</MkButton>
+						}}</Button>
 					</div>
 				</div>
 			</div>
@@ -62,7 +62,7 @@
 				</footer>
 			</div>
 		</div>
-	</MkModal>
+	</Modal>
 </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 MkModal from "@/components/MkModal.vue";
-import MkButton from "@/components/MkButton.vue";
+import Modal from "@/components/Modal.vue";
+import Button from "@/components/Button.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: {
-		MkModal,
-		MkButton,
+		Modal,
+		Button,
 	},
 
 	props: {
@@ -210,18 +210,22 @@ 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;
@@ -282,6 +286,7 @@ export default defineComponent({
 		}
 	}
 }
+
 .hdrwpsaf {
 	display: flex;
 	flex-direction: column;
diff --git a/packages/client/src/components/MkMediaList.vue b/packages/client/src/components/MediaList.vue
similarity index 98%
rename from packages/client/src/components/MkMediaList.vue
rename to packages/client/src/components/MediaList.vue
index 0c9a7a321..8143027f5 100644
--- a/packages/client/src/components/MkMediaList.vue
+++ b/packages/client/src/components/MediaList.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/MkMediaBanner.vue";
-import XMedia from "@/components/MkMedia.vue";
+import XBanner from "@/components/MediaBanner.vue";
+import XMedia from "@/components/Media.vue";
 import * as os from "@/os";
 import { FILE_TYPE_BROWSERSAFE } from "@/const";
 import { defaultStore } from "@/store";
@@ -198,6 +198,7 @@ const previewableCount = props.mediaList.filter((media) =>
 
 		&[data-count] {
 			padding-top: 56.25%; // 16:9;
+
 			> div {
 				position: absolute;
 				inset: 0;
@@ -278,6 +279,7 @@ 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/MkMention.vue b/packages/client/src/components/Mention.vue
similarity index 99%
rename from packages/client/src/components/MkMention.vue
rename to packages/client/src/components/Mention.vue
index 59e0fb92e..61944c068 100644
--- a/packages/client/src/components/MkMention.vue
+++ b/packages/client/src/components/Mention.vue
@@ -1,5 +1,5 @@
 <template>
-	<MkA
+	<A
 		v-if="url.startsWith('/')"
 		v-user-preview="canonical"
 		class="mention"
@@ -16,7 +16,7 @@
 				>@{{ toUnicode(host) }}</span
 			>
 		</span>
-	</MkA>
+	</A>
 	<a
 		v-else
 		class="mention"
diff --git a/packages/client/src/components/MkMenu.vue b/packages/client/src/components/Menu.vue
similarity index 95%
rename from packages/client/src/components/MkMenu.vue
rename to packages/client/src/components/Menu.vue
index a7a593114..8b2f74fd2 100644
--- a/packages/client/src/components/MkMenu.vue
+++ b/packages/client/src/components/Menu.vue
@@ -28,9 +28,11 @@
 						v-else-if="item.type === 'pending'"
 						class="pending item"
 					>
-						<span><MkEllipsis /></span>
+						<span>
+							<Ellipsis />
+						</span>
 					</span>
-					<MkA
+					<A
 						v-else-if="item.type === 'link'"
 						:to="item.to"
 						class="_button item"
@@ -43,7 +45,7 @@
 							class="ph-fw ph-lg"
 							:class="item.icon"
 						></i>
-						<MkAvatar
+						<Avatar
 							v-if="item.avatar"
 							:user="item.avatar"
 							class="avatar"
@@ -60,7 +62,7 @@
 							}"
 							><i class="ph-circle ph-fill"></i
 						></span>
-					</MkA>
+					</A>
 					<a
 						v-else-if="item.type === 'a'"
 						:href="item.href"
@@ -97,11 +99,8 @@
 						@mouseenter.passive="onItemMouseEnter(item)"
 						@mouseleave.passive="onItemMouseLeave(item)"
 					>
-						<MkAvatar
-							:user="item.user"
-							class="avatar"
-							disableLink
-						/><MkUserName :user="item.user" />
+						<Avatar :user="item.user" class="avatar" disableLink />
+						<UserName :user="item.user" />
 						<span
 							v-if="item.indicate"
 							class="indicator"
@@ -141,11 +140,9 @@
 							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"
@@ -165,7 +162,7 @@
 							class="ph-fw ph-lg"
 							:class="item.icon"
 						></i>
-						<MkAvatar
+						<Avatar
 							v-if="item.avatar"
 							:user="item.avatar"
 							class="avatar"
@@ -217,13 +214,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("./MkMenu.child.vue"));
+const XChild = defineAsyncComponent(() => import("./MenuChild.vue"));
 const focusTrap = ref();
 
 const props = defineProps<{
@@ -392,6 +389,7 @@ onBeforeUnmount(() => {
 				background: var(--accentedBg);
 			}
 		}
+
 		&:focus-visible:before {
 			outline: auto;
 		}
@@ -534,7 +532,7 @@ onBeforeUnmount(() => {
 				margin-right: 14px;
 				width: 24px;
 			}
-			
+
 			> .avatar {
 				height: 24px;
 			}
diff --git a/packages/client/src/components/MkMenu.child.vue b/packages/client/src/components/MenuChild.vue
similarity index 96%
rename from packages/client/src/components/MkMenu.child.vue
rename to packages/client/src/components/MenuChild.vue
index 83ae6b5a1..64c20ce1c 100644
--- a/packages/client/src/components/MkMenu.child.vue
+++ b/packages/client/src/components/MenuChild.vue
@@ -1,6 +1,6 @@
 <template>
 	<div ref="el" class="sfhdhdhr" tabindex="-1">
-		<MkMenu
+		<Menu
 			ref="menu"
 			:items="items"
 			:align="align"
@@ -21,7 +21,7 @@ import {
 	ref,
 	watch,
 } from "vue";
-import MkMenu from "./MkMenu.vue";
+import Menu from "./Menu.vue";
 import { MenuItem } from "@/types/menu";
 
 const props = defineProps<{
diff --git a/packages/client/src/components/MkMiniChart.vue b/packages/client/src/components/MiniChart.vue
similarity index 100%
rename from packages/client/src/components/MkMiniChart.vue
rename to packages/client/src/components/MiniChart.vue
diff --git a/packages/client/src/components/MkModal.vue b/packages/client/src/components/Modal.vue
similarity index 100%
rename from packages/client/src/components/MkModal.vue
rename to packages/client/src/components/Modal.vue
diff --git a/packages/client/src/components/MkModalPageWindow.vue b/packages/client/src/components/ModalPageWindow.vue
similarity index 93%
rename from packages/client/src/components/MkModalPageWindow.vue
rename to packages/client/src/components/ModalPageWindow.vue
index a29571b4e..9aea86f77 100644
--- a/packages/client/src/components/MkModalPageWindow.vue
+++ b/packages/client/src/components/ModalPageWindow.vue
@@ -1,5 +1,5 @@
 <template>
-	<MkModal ref="modal" @click="$emit('click')" @closed="$emit('closed')">
+	<Modal ref="modal" @click="$emit('click')" @closed="$emit('closed')">
 		<div
 			ref="rootEl"
 			class="hrmcaedk _narrow_"
@@ -35,25 +35,26 @@
 				</button>
 			</div>
 			<div class="body">
-				<MkStickyContainer>
-					<template #header
-						><MkPageHeader
+				<StickyContainer>
+					<template #header>
+						<PageHeader
 							v-if="
 								pageMetadata?.value &&
 								!pageMetadata?.value.hideHeader
 							"
 							:info="pageMetadata?.value"
-					/></template>
+						/>
+					</template>
 					<RouterView :router="router" />
-				</MkStickyContainer>
+				</StickyContainer>
 			</div>
 		</div>
-	</MkModal>
+	</Modal>
 </template>
 
 <script lang="ts" setup>
 import { ComputedRef, provide } from "vue";
-import MkModal from "@/components/MkModal.vue";
+import Modal from "@/components/Modal.vue";
 import { popout as _popout } from "@/scripts/popout";
 import copyToClipboard from "@/scripts/copy-to-clipboard";
 import { url } from "@/config";
@@ -82,7 +83,7 @@ router.addListener("push", (ctx) => {});
 
 let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
 let rootEl = $ref();
-let modal = $ref<InstanceType<typeof MkModal>>();
+let modal = $ref<InstanceType<typeof Modal>>();
 let path = $ref(props.initialPath);
 let width = $ref(860);
 let height = $ref(660);
diff --git a/packages/client/src/components/MkModalWindow.vue b/packages/client/src/components/ModalWindow.vue
similarity index 96%
rename from packages/client/src/components/MkModalWindow.vue
rename to packages/client/src/components/ModalWindow.vue
index 734f6a17c..2a5d8a76e 100644
--- a/packages/client/src/components/MkModalWindow.vue
+++ b/packages/client/src/components/ModalWindow.vue
@@ -1,5 +1,5 @@
 <template>
-	<MkModal
+	<Modal
 		ref="modal"
 		:prefer-type="'dialog'"
 		@click="onBgClick"
@@ -58,12 +58,12 @@
 				</div>
 			</div>
 		</FocusTrap>
-	</MkModal>
+	</Modal>
 </template>
 
 <script lang="ts" setup>
 import { FocusTrap } from "focus-trap-vue";
-import MkModal from "./MkModal.vue";
+import Modal from "./Modal.vue";
 import { i18n } from "@/i18n";
 
 const props = withDefaults(
@@ -90,7 +90,7 @@ const emit = defineEmits<{
 	(event: "ok"): void;
 }>();
 
-let modal = $shallowRef<InstanceType<typeof MkModal>>();
+let modal = $shallowRef<InstanceType<typeof Modal>>();
 let rootEl = $shallowRef<HTMLElement>();
 let headerEl = $shallowRef<HTMLElement>();
 
diff --git a/packages/client/src/components/MkMoved.vue b/packages/client/src/components/Moved.vue
similarity index 83%
rename from packages/client/src/components/MkMoved.vue
rename to packages/client/src/components/Moved.vue
index b2f8095a2..1de7903f1 100644
--- a/packages/client/src/components/MkMoved.vue
+++ b/packages/client/src/components/Moved.vue
@@ -5,12 +5,12 @@
 			style="margin-right: 8px"
 		/>
 		{{ i18n.ts.accountMoved }}
-		<MkMention class="link" :username="acct" :host="host" />
+		<Mention class="link" :username="acct" :host="host" />
 	</div>
 </template>
 
 <script lang="ts" setup>
-import MkMention from "./MkMention.vue";
+import Mention from "./Mention.vue";
 import { i18n } from "@/i18n";
 
 defineProps<{
diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/Note.vue
similarity index 93%
rename from packages/client/src/components/MkNote.vue
rename to packages/client/src/components/Note.vue
index d4d1a4a8b..2dc80a7df 100644
--- a/packages/client/src/components/MkNote.vue
+++ b/packages/client/src/components/Note.vue
@@ -11,7 +11,7 @@
 		:class="{ renote: isRenote }"
 		:id="appearNote.id"
 	>
-		<MkNoteSub
+		<NoteSub
 			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>
-						<MkA
+						<A
 							v-user-preview="note.userId"
 							class="name"
 							:to="userPage(note.user)"
 							@click.stop
 						>
-							<MkUserName :user="note.user" />
-						</MkA>
+							<UserName :user="note.user" />
+						</A>
 					</template>
 				</I18n>
 				<div class="info">
@@ -66,17 +66,17 @@
 							v-if="isMyRenote"
 							class="ph-dots-three-outline ph-bold ph-lg dropdownIcon"
 						></i>
-						<MkTime :time="note.createdAt" />
+						<Time :time="note.createdAt" />
 					</button>
-					<MkVisibility :note="note" />
+					<Visibility :note="note" />
 				</div>
 			</div>
 			<div v-if="collapsedReply && appearNote.reply" class="info">
-				<MkAvatar class="avatar" :user="appearNote.reply.user" />
-				<MkUserName
+				<Avatar class="avatar" :user="appearNote.reply.user" />
+				<UserName
 					class="username"
 					:user="appearNote.reply.user"
-				></MkUserName>
+				></UserName>
 				<Mfm
 					class="summary"
 					:text="getNoteSummary(appearNote.reply)"
@@ -96,11 +96,11 @@
 		>
 			<div class="main">
 				<div class="header-container">
-					<MkAvatar class="avatar" :user="appearNote.user" />
+					<Avatar class="avatar" :user="appearNote.user" />
 					<XNoteHeader class="header" :note="appearNote" />
 				</div>
 				<div class="body">
-					<MkSubNoteContent
+					<SubNoteContent
 						class="text"
 						:note="appearNote"
 						:detailed="true"
@@ -110,9 +110,9 @@
 						@push="(e) => router.push(notePage(e))"
 						@focusfooter="footerEl.focus()"
 						@expanded="(e) => setPostExpanded(e)"
-					></MkSubNoteContent>
+					></SubNoteContent>
 					<div v-if="translating || translation" class="translation">
-						<MkLoading v-if="translating" mini />
+						<Loading v-if="translating" mini />
 						<div v-else class="translated">
 							<b
 								>{{
@@ -134,20 +134,20 @@
 					v-if="detailedView || (appearNote.channel && !inChannel)"
 					class="info"
 				>
-					<MkA
+					<A
 						v-if="detailedView"
 						class="created-at"
 						:to="notePage(appearNote)"
 					>
-						<MkTime :time="appearNote.createdAt" mode="absolute" />
-					</MkA>
-					<MkA
+						<Time :time="appearNote.createdAt" mode="absolute" />
+					</A>
+					<A
 						v-if="appearNote.channel && !inChannel"
 						class="channel"
 						:to="`/channels/${appearNote.channel.id}`"
 						@click.stop
 						><i class="ph-television ph-bold"></i>
-						{{ appearNote.channel.name }}</MkA
+						{{ appearNote.channel.name }}</A
 					>
 				</div>
 				<footer ref="footerEl" class="footer" tabindex="-1">
@@ -241,13 +241,13 @@
 	>
 		<I18n :src="softMuteReasonI18nSrc(muted.what)" tag="small">
 			<template #name>
-				<MkA
+				<A
 					v-user-preview="note.userId"
 					class="name"
 					:to="userPage(note.user)"
 				>
-					<MkUserName :user="note.user" />
-				</MkA>
+					<UserName :user="note.user" />
+				</A>
 			</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 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 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 copyToClipboard from "@/scripts/copy-to-clipboard";
 import { url } from "@/config";
 import { pleaseLogin } from "@/scripts/please-login";
@@ -668,15 +668,18 @@ 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;
@@ -691,6 +694,7 @@ defineExpose({
 		> div > i {
 			margin-left: -0.5px;
 		}
+
 		> .info {
 			display: flex;
 			align-items: center;
@@ -740,6 +744,7 @@ defineExpose({
 					color: inherit;
 					display: inline-flex;
 					align-items: center;
+
 					> .dropdownIcon {
 						margin-right: 4px;
 					}
@@ -750,6 +755,7 @@ defineExpose({
 		&.collapsedReply {
 			.line {
 				opacity: 0.25;
+
 				&::after {
 					content: "";
 					position: absolute;
@@ -762,10 +768,12 @@ defineExpose({
 					height: calc(50% + 5px);
 				}
 			}
+
 			.info {
 				color: var(--fgTransparentWeak);
 				transition: color 0.2s;
 			}
+
 			.avatar {
 				width: 1.2em;
 				height: 1.2em;
@@ -774,14 +782,17 @@ defineExpose({
 				margin-right: 0.4em;
 				background: var(--panelHighlight);
 			}
+
 			.username {
 				font-weight: 700;
 				flex-shrink: 0;
 				max-width: 30%;
+
 				&::after {
 					content: ": ";
 				}
 			}
+
 			&:hover,
 			&:focus-within {
 				.info {
@@ -811,6 +822,7 @@ defineExpose({
 			display: flex;
 			position: relative;
 			z-index: 2;
+
 			> .avatar {
 				flex-shrink: 0;
 				display: block;
@@ -821,30 +833,36 @@ 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);
@@ -852,6 +870,7 @@ defineExpose({
 					}
 				}
 			}
+
 			> .info {
 				display: flex;
 				justify-content: space-between;
@@ -861,26 +880,31 @@ 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;
@@ -890,17 +914,21 @@ 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);
 					}
@@ -931,25 +959,32 @@ 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));
@@ -971,6 +1006,7 @@ defineExpose({
 	._blur_text {
 		pointer-events: auto;
 	}
+
 	&:active ._blur_text {
 		filter: blur(0px);
 	}
diff --git a/packages/client/src/components/MkNoteDetailed.vue b/packages/client/src/components/NoteDetailed.vue
similarity index 91%
rename from packages/client/src/components/MkNoteDetailed.vue
rename to packages/client/src/components/NoteDetailed.vue
index d3cbf19a1..b600e66ca 100644
--- a/packages/client/src/components/MkNoteDetailed.vue
+++ b/packages/client/src/components/NoteDetailed.vue
@@ -9,7 +9,7 @@
 		:tabindex="!isDeleted ? '-1' : null"
 		:class="{ renote: isRenote }"
 	>
-		<MkNoteSub
+		<NoteSub
 			v-if="conversation"
 			v-for="note in conversation"
 			:key="note.id"
@@ -18,8 +18,8 @@
 			:detailedView="true"
 			:forceExpandCw="props.expandAllCws"
 		/>
-		<MkLoading v-else-if="note.reply" mini />
-		<MkNoteSub
+		<Loading v-else-if="note.reply" mini />
+		<NoteSub
 			v-if="note.reply"
 			:note="note.reply"
 			class="reply-to"
@@ -27,16 +27,16 @@
 			:forceExpandCw="props.expandAllCws"
 		/>
 
-		<MkNote
+		<Note
 			ref="noteEl"
 			@contextmenu.stop="onContextmenu"
 			tabindex="-1"
 			:note="note"
 			detailedView
 			:forceExpandCw="props.expandAllCws"
-		></MkNote>
+		></Note>
 
-		<MkTab v-model="tab" :style="'underline'" @update:modelValue="loadTab">
+		<Tab 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>
-		</MkTab>
+		</Tab>
 
-		<MkNoteSub
+		<NoteSub
 			v-if="directReplies && tab === 'replies'"
 			v-for="note in directReplies"
 			:key="note.id"
@@ -77,9 +77,9 @@
 			:parentId="note.id"
 			:forceExpandCw="props.expandAllCws"
 		/>
-		<MkLoading v-else-if="tab === 'replies' && note.repliesCount > 0" />
+		<Loading v-else-if="tab === 'replies' && note.repliesCount > 0" />
 
-		<MkNoteSub
+		<NoteSub
 			v-if="directQuotes && tab === 'quotes'"
 			v-for="note in directQuotes"
 			:key="note.id"
@@ -90,26 +90,26 @@
 			:parentId="note.id"
 			:forceExpandCw="props.expandAllCws"
 		/>
-		<MkLoading v-else-if="tab === 'quotes' && directQuotes.length > 0" />
+		<Loading v-else-if="tab === 'quotes' && directQuotes.length > 0" />
 
-		<!-- <MkPagination
+		<!-- <Pagination
 			v-if="tab === 'renotes'"
 			v-slot="{ items }"
 			ref="pagingComponent"
 			:pagination="pagination"
 		> -->
-		<MkUserCardMini
+		<UserCardMini
 			v-if="tab === 'renotes' && renotes"
 			v-for="item in renotes"
 			:key="item.user.id"
 			:user="item.user"
 			:with-chart="false"
 		/>
-		<!-- </MkPagination> -->
-		<MkLoading v-else-if="tab === 'renotes' && note.renoteCount > 0" />
+		<!-- </Pagination> -->
+		<Loading v-else-if="tab === 'renotes' && note.renoteCount > 0" />
 
 		<div v-if="tab === 'clips' && clips.length > 0" class="_content clips">
-			<MkA
+			<A
 				v-for="item in clips"
 				:key="item.id"
 				:to="`/clips/${item.id}`"
@@ -120,32 +120,32 @@
 					{{ item.description }}
 				</div>
 				<div class="user">
-					<MkAvatar
+					<Avatar
 						:user="item.user"
 						class="avatar"
 						:show-indicator="true"
 					/>
-					<MkUserName :user="item.user" :nowrap="false" />
+					<UserName :user="item.user" :nowrap="false" />
 				</div>
-			</MkA>
+			</A>
 		</div>
-		<MkLoading v-else-if="tab === 'clips' && clips.length > 0" />
+		<Loading v-else-if="tab === 'clips' && clips.length > 0" />
 
-		<MkReactedUsers
+		<ReactedUsers
 			v-if="tab === 'reactions' && reactionsCount > 0"
 			:note-id="note.id"
-		></MkReactedUsers>
+		></ReactedUsers>
 	</div>
 	<div v-else class="_panel muted" @click="muted.muted = false">
 		<I18n :src="softMuteReasonI18nSrc(muted.what)" tag="small">
 			<template #name>
-				<MkA
+				<A
 					v-user-preview="note.userId"
 					class="name"
 					:to="userPage(note.user)"
 				>
-					<MkUserName :user="note.user" />
-				</MkA>
+					<UserName :user="note.user" />
+				</A>
 			</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 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 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 { 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 MkPagination>>();
+// const pagingComponent = $ref<InstanceType<typeof Pagination>>();
 
 renotes = null;
 function loadTab() {
@@ -420,7 +420,10 @@ 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;
 	}
@@ -491,14 +494,17 @@ 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;
 		}
@@ -507,16 +513,19 @@ 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;
 	}
@@ -532,6 +541,7 @@ onUnmounted(() => {
 	.reply-to,
 	:deep(.more) {
 		position: relative;
+
 		&::before {
 			content: "";
 			position: absolute;
@@ -545,20 +555,25 @@ 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;
@@ -572,14 +587,17 @@ 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;
@@ -591,23 +609,29 @@ 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;
 				}
@@ -617,15 +641,18 @@ 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;
 		}
@@ -646,6 +673,7 @@ onUnmounted(() => {
 	// want to redesign at some point
 	padding: 24px 32px;
 	padding-top: 0;
+
 	> .item {
 		display: block;
 		padding: 16px;
@@ -653,6 +681,7 @@ 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/MkNoteHeader.vue b/packages/client/src/components/NoteHeader.vue
similarity index 87%
rename from packages/client/src/components/MkNoteHeader.vue
rename to packages/client/src/components/NoteHeader.vue
index 0d320b92a..118598082 100644
--- a/packages/client/src/components/MkNoteHeader.vue
+++ b/packages/client/src/components/NoteHeader.vue
@@ -2,22 +2,24 @@
 	<header class="kkwtjztg">
 		<div class="user-info">
 			<div>
-				<MkA
+				<A
 					v-user-preview="note.user.id"
 					class="name"
 					:to="userPage(note.user)"
 					@click.stop
 				>
-					<MkUserName :user="note.user" class="mkusername">
+					<UserName :user="note.user" class="mkusername">
 						<span v-if="note.user.isBot" class="is-bot">bot</span>
-					</MkUserName>
-				</MkA>
-				<div class="username"><MkAcct :user="note.user" /></div>
+					</UserName>
+				</A>
+				<div class="username">
+					<Acct :user="note.user" />
+				</div>
 			</div>
 			<div>
 				<div class="info">
-					<MkA class="created-at" :to="notePage(note)">
-						<MkTime :time="note.createdAt" />
+					<A class="created-at" :to="notePage(note)">
+						<Time :time="note.createdAt" />
 						<i
 							v-if="note.updatedAt"
 							v-tooltip.noDelay="
@@ -33,10 +35,10 @@
 							class="ph-pencil ph-bold"
 							style="margin-left: 0.4rem"
 						></i>
-					</MkA>
-					<MkVisibility :note="note" />
+					</A>
+					<Visibility :note="note" />
 				</div>
-				<MkInstanceTicker
+				<InstanceTicker
 					v-if="showTicker"
 					class="ticker"
 					:instance="note.user.instance"
@@ -50,8 +52,8 @@
 import {} from "vue";
 import type * as misskey from "iceshrimp-js";
 import { defaultStore, noteViewInterruptors } from "@/store";
-import MkVisibility from "@/components/MkVisibility.vue";
-import MkInstanceTicker from "@/components/MkInstanceTicker.vue";
+import Visibility from "@/components/Visibility.vue";
+import InstanceTicker from "@/components/InstanceTicker.vue";
 import { notePage } from "@/filters/note";
 import { userPage } from "@/filters/user";
 import { i18n } from "@/i18n";
@@ -78,17 +80,20 @@ 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;
@@ -97,22 +102,27 @@ 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;
@@ -152,6 +162,7 @@ const showTicker =
 			flex-shrink: 0;
 			margin-left: 0.5em;
 			font-size: 0.9em;
+
 			.created-at {
 				max-width: 100%;
 				overflow: hidden;
@@ -163,6 +174,7 @@ const showTicker =
 			display: inline-flex;
 			margin-left: 0.5em;
 			vertical-align: middle;
+
 			> .name {
 				display: none;
 			}
diff --git a/packages/client/src/components/MkNotePreview.vue b/packages/client/src/components/NotePreview.vue
similarity index 94%
rename from packages/client/src/components/MkNotePreview.vue
rename to packages/client/src/components/NotePreview.vue
index 607df89eb..c31cb6624 100644
--- a/packages/client/src/components/MkNotePreview.vue
+++ b/packages/client/src/components/NotePreview.vue
@@ -1,9 +1,9 @@
 <template>
 	<div v-size="{ min: [350, 500] }" class="fefdfafb">
-		<MkAvatar class="avatar" :user="$i" disableLink />
+		<Avatar class="avatar" :user="$i" disableLink />
 		<div class="main">
 			<div class="header">
-				<MkUserName :user="$i" />
+				<UserName :user="$i" />
 			</div>
 			<div class="body">
 				<div class="content">
diff --git a/packages/client/src/components/MkNoteSimple.vue b/packages/client/src/components/NoteSimple.vue
similarity index 80%
rename from packages/client/src/components/MkNoteSimple.vue
rename to packages/client/src/components/NoteSimple.vue
index 41ae29881..9045cd85a 100644
--- a/packages/client/src/components/MkNoteSimple.vue
+++ b/packages/client/src/components/NoteSimple.vue
@@ -1,10 +1,10 @@
 <template>
 	<div v-size="{ min: [350, 500] }" class="yohlumlk">
-		<MkAvatar class="avatar" :user="note.user" />
+		<Avatar class="avatar" :user="note.user" />
 		<div class="main">
 			<XNoteHeader class="header" :note="note" :mini="true" />
 			<div class="body">
-				<MkSubNoteContent class="text" :note="note" />
+				<SubNoteContent 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/MkNoteHeader.vue";
-import MkSubNoteContent from "@/components/MkSubNoteContent.vue";
+import XNoteHeader from "@/components/NoteHeader.vue";
+import SubNoteContent from "@/components/SubNoteContent.vue";
 
 const props = defineProps<{
 	note: misskey.entities.Note;
diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/NoteSub.vue
similarity index 94%
rename from packages/client/src/components/MkNoteSub.vue
rename to packages/client/src/components/NoteSub.vue
index 5bc7f3e5f..19838f5fd 100644
--- a/packages/client/src/components/MkNoteSub.vue
+++ b/packages/client/src/components/NoteSub.vue
@@ -20,7 +20,7 @@
 			:style="{ cursor: expandOnNoteClick ? 'pointer' : '' }"
 		>
 			<div class="avatar-container">
-				<MkAvatar class="avatar" :user="appearNote.user" />
+				<Avatar 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">
-					<MkSubNoteContent
+					<SubNoteContent
 						class="text"
 						:note="note"
 						:parentId="parentId"
@@ -39,7 +39,7 @@
 						@focusfooter="footerEl.focus()"
 					/>
 					<div v-if="translating || translation" class="translation">
-						<MkLoading v-if="translating" mini />
+						<Loading v-if="translating" mini />
 						<div v-else class="translated">
 							<b
 								>{{
@@ -137,7 +137,7 @@
 			</div>
 		</div>
 		<template v-if="conversation">
-			<MkNoteSub
+			<NoteSub
 				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>
-				<MkA class="text _link" :to="notePage(note)"
+				<A class="text _link" :to="notePage(note)"
 					>{{ i18n.ts.continueThread }}
 					<i class="ph-caret-double-right ph-bold ph-lg"></i
-				></MkA>
+				></A>
 			</div>
 		</template>
 	</article>
 	<div v-else class="muted" @click="muted.muted = false">
 		<I18n :src="softMuteReasonI18nSrc(muted.what)" tag="small">
 			<template #name>
-				<MkA
+				<A
 					v-user-preview="note.userId"
 					class="name"
 					:to="userPage(note.user)"
 				>
-					<MkUserName :user="note.user" />
-				</MkA>
+					<UserName :user="note.user" />
+				</A>
 			</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/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 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 copyToClipboard from "@/scripts/copy-to-clipboard";
 import { url } from "@/config";
 import { pleaseLogin } from "@/scripts/please-login";
@@ -257,14 +257,16 @@ 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;
 
@@ -418,6 +420,7 @@ function noteClick(e) {
 .wrpstxzv {
 	padding: 16px 32px;
 	outline: none;
+
 	&.children {
 		padding: 10px 0 0 var(--indent);
 		padding-left: var(--indent) !important;
@@ -435,6 +438,7 @@ function noteClick(e) {
 		> .avatar-container {
 			margin-right: 8px;
 			z-index: 2;
+
 			> .avatar {
 				flex-shrink: 0;
 				display: block;
@@ -451,6 +455,7 @@ function noteClick(e) {
 			margin: 0 -200px;
 			padding: 0 200px;
 			overflow: clip;
+
 			@media (pointer: coarse) {
 				cursor: default;
 			}
@@ -468,6 +473,7 @@ function noteClick(e) {
 					margin-top: 8px;
 				}
 			}
+
 			> .footer {
 				position: relative;
 				z-index: 2;
@@ -479,15 +485,18 @@ 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;
@@ -497,17 +506,21 @@ 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);
 					}
@@ -533,10 +546,12 @@ function noteClick(e) {
 	&.reply > .main {
 		margin-inline: -200px;
 		padding-inline: 200px;
+
 		&::before {
 			inset-inline: 176px !important;
 		}
 	}
+
 	&.reply,
 	&.reply-to {
 		> .main > .body {
@@ -549,6 +564,7 @@ function noteClick(e) {
 			border-radius: var(--radius);
 		}
 	}
+
 	&.reply-to {
 		> .main > .body {
 			margin-left: calc(0px - var(--avatarSize) - 38px);
@@ -557,17 +573,22 @@ 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;
 			}
@@ -578,6 +599,7 @@ function noteClick(e) {
 		display: flex;
 		padding-block: 10px;
 		font-weight: 600;
+
 		> .line {
 			position: relative;
 			z-index: 2;
@@ -585,22 +607,27 @@ 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;
 			}
@@ -621,9 +648,11 @@ function noteClick(e) {
 	&.reply-to,
 	&.reply-to-more {
 		padding-bottom: 0;
+
 		&:first-child {
 			padding-top: 24px;
 		}
+
 		.line::before {
 			margin-bottom: -16px;
 		}
@@ -634,6 +663,7 @@ function noteClick(e) {
 	&.reply-to,
 	&.reply-to-more {
 		--indent: calc(var(--avatarSize) - 5px);
+
 		> .main {
 			> .avatar-container {
 				display: flex;
@@ -641,6 +671,7 @@ function noteClick(e) {
 				align-items: center;
 				margin-right: 14px;
 				width: var(--avatarSize);
+
 				> .avatar {
 					width: var(--avatarSize);
 					height: var(--avatarSize);
@@ -648,6 +679,7 @@ function noteClick(e) {
 				}
 			}
 		}
+
 		.line {
 			position: relative;
 			z-index: 2;
@@ -657,6 +689,7 @@ function noteClick(e) {
 			margin-bottom: -10px;
 			pointer-events: none;
 			opacity: 0.25;
+
 			&::before {
 				content: "";
 				position: absolute;
@@ -668,21 +701,25 @@ 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;
@@ -690,15 +727,18 @@ 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;
@@ -711,17 +751,21 @@ 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);
@@ -731,22 +775,27 @@ 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,
@@ -754,10 +803,12 @@ function noteClick(e) {
 				--avatarSize: 35px;
 				--indent: 35px;
 			}
+
 			> .children:not(.single) {
 				padding-left: 28px !important;
 			}
 		}
+
 		&.reply-to {
 			--avatarSize: 46px;
 			padding: 14px 16px;
@@ -765,9 +816,11 @@ 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/MkNotes.vue b/packages/client/src/components/Notes.vue
similarity index 71%
rename from packages/client/src/components/MkNotes.vue
rename to packages/client/src/components/Notes.vue
index d7be5066d..5e6fd6671 100644
--- a/packages/client/src/components/MkNotes.vue
+++ b/packages/client/src/components/Notes.vue
@@ -1,12 +1,8 @@
 <template>
-	<MkPagination ref="pagingComponent" :pagination="pagination">
+	<Pagination 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>
@@ -30,18 +26,18 @@
 				</XList>
 			</div>
 		</template>
-	</MkPagination>
+	</Pagination>
 </template>
 
 <script lang="ts" setup>
 import { ref } from "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 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 { i18n } from "@/i18n";
 import { scroll } from "@/scripts/scroll";
-import {instance} from "@/instance";
+import { instance } from "@/instance";
 
 const tlEl = ref<HTMLElement>();
 
@@ -50,7 +46,7 @@ const props = defineProps<{
 	noGap?: boolean;
 }>();
 
-const pagingComponent = ref<InstanceType<typeof MkPagination>>();
+const pagingComponent = ref<InstanceType<typeof Pagination>>();
 
 function scrollTop() {
 	scroll(tlEl.value, { top: 0, behavior: "smooth" });
@@ -70,6 +66,7 @@ defineExpose({
 			border-radius: var(--radius);
 		}
 	}
+
 	&:not(.noGap) {
 		> .notes {
 			.qtqtichx {
diff --git a/packages/client/src/components/MkNotification.vue b/packages/client/src/components/Notification.vue
similarity index 95%
rename from packages/client/src/components/MkNotification.vue
rename to packages/client/src/components/Notification.vue
index 8dc76cac4..24f4a6150 100644
--- a/packages/client/src/components/MkNotification.vue
+++ b/packages/client/src/components/Notification.vue
@@ -6,12 +6,12 @@
 		:class="notification.type"
 	>
 		<div class="head">
-			<MkAvatar
+			<Avatar
 				v-if="notification.type === 'pollEnded'"
 				class="icon"
 				:user="notification.note.user"
 			/>
-			<MkAvatar
+			<Avatar
 				v-else-if="notification.user"
 				class="icon"
 				:user="notification.user"
@@ -94,21 +94,22 @@
 				<span v-if="notification.type === 'pollEnded'">{{
 					i18n.ts._notification.pollEnded
 				}}</span>
-				<MkA
+				<A
 					v-else-if="notification.user"
 					v-user-preview="notification.user.id"
 					class="name"
 					:to="userPage(notification.user)"
-					><MkUserName :user="notification.user"
-				/></MkA>
+				>
+					<UserName :user="notification.user" />
+				</A>
 				<span v-else>{{ notification.header }}</span>
-				<MkTime
+				<Time
 					v-if="withTime"
 					:time="notification.createdAt"
 					class="time"
 				/>
 			</header>
-			<MkA
+			<A
 				v-if="notification.type === 'reaction'"
 				class="text"
 				:to="notePage(notification.note)"
@@ -123,8 +124,8 @@
 					:custom-emojis="notification.note.emojis"
 				/>
 				<i class="ph-quotes ph-fill ph-lg"></i>
-			</MkA>
-			<MkA
+			</A>
+			<A
 				v-if="notification.type === 'renote'"
 				class="text"
 				:to="notePage(notification.note)"
@@ -139,8 +140,8 @@
 					:custom-emojis="notification.note.renote.emojis"
 				/>
 				<i class="ph-quotes ph-fill ph-lg"></i>
-			</MkA>
-			<MkA
+			</A>
+			<A
 				v-if="notification.type === 'reply'"
 				class="text"
 				:to="notePage(notification.note)"
@@ -152,8 +153,8 @@
 					:nowrap="!full"
 					:custom-emojis="notification.note.emojis"
 				/>
-			</MkA>
-			<MkA
+			</A>
+			<A
 				v-if="notification.type === 'mention'"
 				class="text"
 				:to="notePage(notification.note)"
@@ -165,8 +166,8 @@
 					:nowrap="!full"
 					:custom-emojis="notification.note.emojis"
 				/>
-			</MkA>
-			<MkA
+			</A>
+			<A
 				v-if="notification.type === 'quote'"
 				class="text"
 				:to="notePage(notification.note)"
@@ -178,8 +179,8 @@
 					:nowrap="!full"
 					:custom-emojis="notification.note.emojis"
 				/>
-			</MkA>
-			<MkA
+			</A>
+			<A
 				v-if="notification.type === 'pollVote'"
 				class="text"
 				:to="notePage(notification.note)"
@@ -194,8 +195,8 @@
 					:custom-emojis="notification.note.emojis"
 				/>
 				<i class="ph-quotes ph-fill ph-lg"></i>
-			</MkA>
-			<MkA
+			</A>
+			<A
 				v-if="notification.type === 'pollEnded'"
 				class="text"
 				:to="notePage(notification.note)"
@@ -209,19 +210,20 @@
 					:custom-emojis="notification.note.emojis"
 				/>
 				<i class="ph-quotes ph-fill ph-lg"></i>
-			</MkA>
+			</A>
 			<span
 				v-if="notification.type === 'follow'"
 				class="text"
 				style="opacity: 0.7"
 				>{{ i18n.ts.youGotNewFollower }}
 				<div v-if="full">
-					<MkFollowButton
+					<FollowButton
 						:user="notification.user"
 						:full="true"
 						:hideMenu="true"
-					/></div
-			></span>
+					/>
+				</div>
+			</span>
 			<span
 				v-if="notification.type === 'followRequestAccepted'"
 				class="text"
@@ -241,8 +243,8 @@
 					<button class="_textButton" @click="rejectFollowRequest()">
 						{{ i18n.ts.reject }}
 					</button>
-				</div></span
-			>
+				</div>
+			</span>
 			<span
 				v-if="notification.type === 'groupInvited'"
 				class="text"
@@ -263,8 +265,8 @@
 					>
 						{{ i18n.ts.reject }}
 					</button>
-				</div></span
-			>
+				</div>
+			</span>
 			<span v-if="notification.type === 'app'" class="text">
 				<Mfm :text="notification.body" :nowrap="!full" />
 			</span>
@@ -275,9 +277,9 @@
 <script lang="ts" setup>
 import { ref, onMounted, onUnmounted, watch } from "vue";
 import * as misskey from "iceshrimp-js";
-import XReactionIcon from "@/components/MkReactionIcon.vue";
-import MkFollowButton from "@/components/MkFollowButton.vue";
-import XReactionTooltip from "@/components/MkReactionTooltip.vue";
+import XReactionIcon from "@/components/ReactionIcon.vue";
+import FollowButton from "@/components/FollowButton.vue";
+import XReactionTooltip from "@/components/ReactionTooltip.vue";
 import { getNoteSummary } from "@/scripts/get-note-summary";
 import { notePage } from "@/filters/note";
 import { userPage } from "@/filters/user";
@@ -397,6 +399,7 @@ useTooltip(reactionRef, (showing) => {
 		padding-block: 16px;
 		font-size: 0.9em;
 	}
+
 	&.max-width_450px {
 		padding: 12px 16px;
 	}
@@ -519,6 +522,7 @@ useTooltip(reactionRef, (showing) => {
 
 			> span:first-child {
 				opacity: 0.7;
+
 				&::after {
 					content: ": ";
 				}
diff --git a/packages/client/src/components/MkNotificationSettingWindow.vue b/packages/client/src/components/NotificationSettingWindow.vue
similarity index 80%
rename from packages/client/src/components/MkNotificationSettingWindow.vue
rename to packages/client/src/components/NotificationSettingWindow.vue
index 39f6b9e09..61547dcd9 100644
--- a/packages/client/src/components/MkNotificationSettingWindow.vue
+++ b/packages/client/src/components/NotificationSettingWindow.vue
@@ -12,27 +12,29 @@
 		<template #header>{{ i18n.ts.notificationSetting }}</template>
 		<div class="_monolithic_">
 			<div v-if="showGlobalToggle" class="_section">
-				<MkSwitch v-model="useGlobalSetting">
+				<Switch v-model="useGlobalSetting">
 					{{ i18n.ts.useGlobalSetting }}
 					<template #caption>{{
 						i18n.ts.useGlobalSettingDesc
 					}}</template>
-				</MkSwitch>
+				</Switch>
 			</div>
 			<div v-if="!useGlobalSetting" class="_section _formRoot">
-				<MkInfo class="_formBlock">{{ i18n.ts.notificationSettingDesc }}</MkInfo>
-				<MkButton inline @click="disableAll">{{
+				<Info class="_formBlock">{{
+					i18n.ts.notificationSettingDesc
+				}}</Info>
+				<Button inline @click="disableAll">{{
 					i18n.ts.disableAll
-				}}</MkButton>
-				<MkButton inline @click="enableAll">{{
+				}}</Button>
+				<Button inline @click="enableAll">{{
 					i18n.ts.enableAll
-				}}</MkButton>
-				<MkSwitch
+				}}</Button>
+				<Switch
 					v-for="ntype in notificationTypes"
 					class="_formBlock"
 					:key="ntype"
 					v-model="typesMap[ntype]"
-					>{{ i18n.t(`_notification._types.${ntype}`) }}</MkSwitch
+					>{{ i18n.t(`_notification._types.${ntype}`) }}</Switch
 				>
 			</div>
 		</div>
@@ -42,10 +44,10 @@
 <script lang="ts" setup>
 import {} from "vue";
 import { notificationTypes } from "iceshrimp-js";
-import MkSwitch from "./form/switch.vue";
-import MkInfo from "./MkInfo.vue";
-import MkButton from "./MkButton.vue";
-import XModalWindow from "@/components/MkModalWindow.vue";
+import Switch from "./form/Switch.vue";
+import Info from "./Info.vue";
+import Button from "./Button.vue";
+import XModalWindow from "@/components/ModalWindow.vue";
 import { i18n } from "@/i18n";
 
 const emit = defineEmits<{
diff --git a/packages/client/src/components/MkNotificationToast.vue b/packages/client/src/components/NotificationToast.vue
similarity index 95%
rename from packages/client/src/components/MkNotificationToast.vue
rename to packages/client/src/components/NotificationToast.vue
index 20b084855..7798358ed 100644
--- a/packages/client/src/components/MkNotificationToast.vue
+++ b/packages/client/src/components/NotificationToast.vue
@@ -16,7 +16,7 @@
 
 <script lang="ts" setup>
 import { onMounted } from "vue";
-import XNotification from "@/components/MkNotification.vue";
+import XNotification from "@/components/Notification.vue";
 import * as os from "@/os";
 
 defineProps<{
@@ -44,6 +44,7 @@ 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/MkNotifications.vue b/packages/client/src/components/Notifications.vue
similarity index 86%
rename from packages/client/src/components/MkNotifications.vue
rename to packages/client/src/components/Notifications.vue
index 4ba2725b1..96db363c3 100644
--- a/packages/client/src/components/MkNotifications.vue
+++ b/packages/client/src/components/Notifications.vue
@@ -1,12 +1,8 @@
 <template>
-	<MkPagination ref="pagingComponent" :pagination="pagination">
+	<Pagination 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>
@@ -42,7 +38,7 @@
 				/>
 			</XList>
 		</template>
-	</MkPagination>
+	</Pagination>
 </template>
 
 <script lang="ts" setup>
@@ -55,22 +51,22 @@ import {
 	ref,
 } from "vue";
 import { notificationTypes } from "iceshrimp-js";
-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 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 * 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 MkPagination>>();
+const pagingComponent = ref<InstanceType<typeof Pagination>>();
 
 const pagination: Paging = {
 	endpoint: "i/notifications" as const,
diff --git a/packages/client/src/components/MkNumber.vue b/packages/client/src/components/Number.vue
similarity index 100%
rename from packages/client/src/components/MkNumber.vue
rename to packages/client/src/components/Number.vue
diff --git a/packages/client/src/components/MkNumberDiff.vue b/packages/client/src/components/NumberDiff.vue
similarity index 100%
rename from packages/client/src/components/MkNumberDiff.vue
rename to packages/client/src/components/NumberDiff.vue
diff --git a/packages/client/src/components/MkObjectView.vue b/packages/client/src/components/ObjectView.vue
similarity index 85%
rename from packages/client/src/components/MkObjectView.vue
rename to packages/client/src/components/ObjectView.vue
index b3fce680b..6b410e45a 100644
--- a/packages/client/src/components/MkObjectView.vue
+++ b/packages/client/src/components/ObjectView.vue
@@ -6,7 +6,7 @@
 
 <script lang="ts" setup>
 import {} from "vue";
-import XValue from "./MkObjectView.value.vue";
+import XValue from "./ObjectViewValue.vue";
 
 const props = defineProps<{
 	value: Record<string, unknown>;
diff --git a/packages/client/src/components/MkObjectView.value.vue b/packages/client/src/components/ObjectViewValue.vue
similarity index 100%
rename from packages/client/src/components/MkObjectView.value.vue
rename to packages/client/src/components/ObjectViewValue.vue
diff --git a/packages/client/src/components/MkPagePreview.vue b/packages/client/src/components/PagePreview.vue
similarity index 99%
rename from packages/client/src/components/MkPagePreview.vue
rename to packages/client/src/components/PagePreview.vue
index 034c6fed6..4a7f00c04 100644
--- a/packages/client/src/components/MkPagePreview.vue
+++ b/packages/client/src/components/PagePreview.vue
@@ -1,5 +1,5 @@
 <template>
-	<MkA
+	<A
 		:to="`/@${page.user.username}/pages/${page.name}`"
 		class="vhpxefrj _block"
 		tabindex="-1"
@@ -30,7 +30,7 @@
 				<p>{{ userName(page.user) }}</p>
 			</footer>
 		</article>
-	</MkA>
+	</A>
 </template>
 
 <script lang="ts" setup>
diff --git a/packages/client/src/components/MkPageWindow.vue b/packages/client/src/components/PageWindow.vue
similarity index 98%
rename from packages/client/src/components/MkPageWindow.vue
rename to packages/client/src/components/PageWindow.vue
index 88da05ffa..04acf59cd 100644
--- a/packages/client/src/components/MkPageWindow.vue
+++ b/packages/client/src/components/PageWindow.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/MkWindow.vue";
+import XWindow from "@/components/Window.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/MkPagination.vue b/packages/client/src/components/Pagination.vue
similarity index 94%
rename from packages/client/src/components/MkPagination.vue
rename to packages/client/src/components/Pagination.vue
index a3a82e230..0595544ee 100644
--- a/packages/client/src/components/MkPagination.vue
+++ b/packages/client/src/components/Pagination.vue
@@ -1,8 +1,8 @@
 <template>
 	<transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
-		<MkLoading v-if="fetching" />
+		<Loading v-if="fetching" />
 
-		<MkError v-else-if="error" @retry="init()" />
+		<Error 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"
 			>
-				<MkButton
+				<Button
 					v-if="!moreFetching"
 					class="button"
 					:disabled="moreFetching"
@@ -32,8 +32,8 @@
 					@click="fetchMoreAhead"
 				>
 					{{ i18n.ts.loadMore }}
-				</MkButton>
-				<MkLoading v-else class="loading" />
+				</Button>
+				<Loading v-else class="loading" />
 			</div>
 			<slot :items="items"></slot>
 			<div
@@ -41,7 +41,7 @@
 				key="_more_"
 				class="cxiknjgy _gap"
 			>
-				<MkButton
+				<Button
 					v-if="!moreFetching"
 					v-appear="
 						$store.state.enableInfiniteScroll && !disableAutoLoad
@@ -55,8 +55,8 @@
 					@click="fetchMore"
 				>
 					{{ i18n.ts.loadMore }}
-				</MkButton>
-				<MkLoading v-else class="loading" />
+				</Button>
+				<Loading v-else class="loading" />
 			</div>
 		</div>
 	</transition>
@@ -82,9 +82,9 @@ import {
 	getScrollPosition,
 	getScrollContainer,
 } from "@/scripts/scroll";
-import MkButton from "@/components/MkButton.vue";
+import Button from "@/components/Button.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,6 +506,7 @@ defineExpose({
 .fade-leave-active {
 	transition: opacity 0.125s ease;
 }
+
 .fade-enter-from,
 .fade-leave-to {
 	opacity: 0;
@@ -517,9 +518,11 @@ 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/MkPoll.vue b/packages/client/src/components/Poll.vue
similarity index 100%
rename from packages/client/src/components/MkPoll.vue
rename to packages/client/src/components/Poll.vue
diff --git a/packages/client/src/components/MkPollEditor.vue b/packages/client/src/components/PollEditor.vue
similarity index 85%
rename from packages/client/src/components/MkPollEditor.vue
rename to packages/client/src/components/PollEditor.vue
index de691ba88..3eab964fb 100644
--- a/packages/client/src/components/MkPollEditor.vue
+++ b/packages/client/src/components/PollEditor.vue
@@ -6,14 +6,14 @@
 		</p>
 		<ul>
 			<li v-for="(choice, i) in choices" :key="i">
-				<MkInput
+				<Input
 					class="input"
 					small
 					:model-value="choice"
 					:placeholder="i18n.t('_poll.choiceN', { n: i + 1 })"
 					@update:modelValue="onInput(i, $event)"
 				>
-				</MkInput>
+				</Input>
 				<button
 					class="_button"
 					@click="remove(i)"
@@ -23,42 +23,38 @@
 				</button>
 			</li>
 		</ul>
-		<MkButton v-if="choices.length < 10" class="add" @click="add">{{
+		<Button v-if="choices.length < 10" class="add" @click="add">{{
 			i18n.ts.add
-		}}</MkButton>
-		<MkButton v-else class="add" disabled>{{
-			i18n.ts._poll.noMore
-		}}</MkButton>
-		<MkSwitch v-model="multiple">{{
-			i18n.ts._poll.canMultipleVote
-		}}</MkSwitch>
+		}}</Button>
+		<Button v-else class="add" disabled>{{ i18n.ts._poll.noMore }}</Button>
+		<Switch v-model="multiple">{{ i18n.ts._poll.canMultipleVote }}</Switch>
 		<section>
 			<div>
-				<MkSelect v-model="expiration" small>
+				<Select 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>
-				</MkSelect>
+				</Select>
 				<section v-if="expiration === 'at'">
-					<MkInput v-model="atDate" small type="date" class="input">
+					<Input v-model="atDate" small type="date" class="input">
 						<template #label>{{
 							i18n.ts._poll.deadlineDate
 						}}</template>
-					</MkInput>
-					<MkInput v-model="atTime" small type="time" class="input">
+					</Input>
+					<Input v-model="atTime" small type="time" class="input">
 						<template #label>{{
 							i18n.ts._poll.deadlineTime
 						}}</template>
-					</MkInput>
+					</Input>
 				</section>
 				<section v-else-if="expiration === 'after'">
-					<MkInput v-model="after" small type="number" class="input">
+					<Input v-model="after" small type="number" class="input">
 						<template #label>{{ i18n.ts._poll.duration }}</template>
-					</MkInput>
-					<MkSelect v-model="unit" small>
+					</Input>
+					<Select v-model="unit" small>
 						<option value="second">
 							{{ i18n.ts._time.second }}
 						</option>
@@ -67,7 +63,7 @@
 						</option>
 						<option value="hour">{{ i18n.ts._time.hour }}</option>
 						<option value="day">{{ i18n.ts._time.day }}</option>
-					</MkSelect>
+					</Select>
 				</section>
 			</div>
 		</section>
@@ -76,10 +72,10 @@
 
 <script lang="ts" setup>
 import { ref, watch } from "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 Input from "./form/Input.vue";
+import Select from "./form/Select.vue";
+import Switch from "./form/Switch.vue";
+import Button from "./Button.vue";
 import { formatDateTimeString } from "@/scripts/format-time-string";
 import { addTime } from "@/scripts/time";
 import { i18n } from "@/i18n";
diff --git a/packages/client/src/components/MkPopupMenu.vue b/packages/client/src/components/PopupMenu.vue
similarity index 85%
rename from packages/client/src/components/MkPopupMenu.vue
rename to packages/client/src/components/PopupMenu.vue
index 12a18221c..474052ef7 100644
--- a/packages/client/src/components/MkPopupMenu.vue
+++ b/packages/client/src/components/PopupMenu.vue
@@ -1,5 +1,5 @@
 <template>
-	<MkModal
+	<Modal
 		ref="modal"
 		v-slot="{ type, maxHeight }"
 		:z-priority="'high'"
@@ -9,7 +9,7 @@
 		@closed="emit('closed')"
 		tabindex="-1"
 	>
-		<MkMenu
+		<Menu
 			:items="items"
 			:align="align"
 			:width="width"
@@ -20,13 +20,13 @@
 			:no-return-focus="noReturnFocus"
 			@close="modal?.close()"
 		/>
-	</MkModal>
+	</Modal>
 </template>
 
 <script lang="ts" setup>
 import {} from "vue";
-import MkModal from "./MkModal.vue";
-import MkMenu from "./MkMenu.vue";
+import Modal from "./Modal.vue";
+import Menu from "./Menu.vue";
 import { MenuItem } from "@/types/menu";
 
 defineProps<{
@@ -42,7 +42,7 @@ const emit = defineEmits<{
 	(ev: "closed"): void;
 }>();
 
-let modal = $ref<InstanceType<typeof MkModal>>();
+let modal = $ref<InstanceType<typeof Modal>>();
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/components/MkPostForm.vue b/packages/client/src/components/PostForm.vue
similarity index 94%
rename from packages/client/src/components/MkPostForm.vue
rename to packages/client/src/components/PostForm.vue
index 017f21ab1..fb9e8b3a1 100644
--- a/packages/client/src/components/MkPostForm.vue
+++ b/packages/client/src/components/PostForm.vue
@@ -20,7 +20,7 @@
 				class="account _button"
 				@click="openAccountMenu"
 			>
-				<MkAvatar :user="postAccount ?? $i" class="avatar" />
+				<Avatar :user="postAccount ?? $i" class="avatar" />
 			</button>
 			<div class="right">
 				<span
@@ -33,7 +33,11 @@
 				></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"
@@ -96,7 +100,7 @@
 				<span style="margin-right: 8px">{{ i18n.ts.recipient }}</span>
 				<div class="visibleUsers">
 					<span v-for="u in visibleUsers" :key="u.id">
-						<MkAcct :user="u" />
+						<Acct :user="u" />
 						<button
 							class="_button"
 							@click="removeVisibleUser(u)"
@@ -110,15 +114,15 @@
 					</button>
 				</div>
 			</div>
-			<MkInfo
+			<Info
 				v-if="hasNotSpecifiedMentions"
 				warn
 				class="hasNotSpecifiedMentions"
 				>{{ i18n.ts.notSpecifiedMentionWarning }} -
 				<button class="_textButton" @click="addMissingMention()">
 					{{ i18n.ts.add }}
-				</button></MkInfo
-			>
+				</button>
+			</Info>
 			<input
 				v-show="useCw"
 				ref="cwInputEl"
@@ -241,10 +245,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/MkNoteSimple.vue";
-import XNotePreview from "@/components/MkNotePreview.vue";
-import XPostFormAttaches from "@/components/MkPostFormAttaches.vue";
-import XPollEditor from "@/components/MkPollEditor.vue";
+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 { host, url } from "@/config";
 import { erase, unique } from "@/scripts/array";
 import { extractMentions } from "@/scripts/extract-mentions";
@@ -254,7 +258,7 @@ import * as os from "@/os";
 import { stream } from "@/stream";
 import { selectFiles } from "@/scripts/select-file";
 import { defaultStore, notePostInterruptors, postFormActions } from "@/store";
-import MkInfo from "@/components/MkInfo.vue";
+import Info from "@/components/Info.vue";
 import { i18n } from "@/i18n";
 import { instance } from "@/instance";
 import {
@@ -264,7 +268,7 @@ import {
 } from "@/account";
 import { uploadFile } from "@/scripts/upload";
 import { deepClone } from "@/scripts/clone";
-import XCheatSheet from "@/components/MkCheatSheetDialog.vue";
+import XCheatSheet from "@/components/CheatSheetDialog.vue";
 import { preprocess } from "@/scripts/preprocess";
 
 const modal = inject("modal");
@@ -636,9 +640,7 @@ function setVisibility() {
 	}
 
 	os.popup(
-		defineAsyncComponent(
-			() => import("@/components/MkVisibilityPicker.vue"),
-		),
+		defineAsyncComponent(() => import("@/components/VisibilityPicker.vue")),
 		{
 			currentVisibility: visibility,
 			currentLocalOnly: localOnly,
@@ -727,7 +729,12 @@ 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({
@@ -830,31 +837,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
-				: 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)
+				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,
+		  };
 
 	if (withHashtags && hashtags && hashtags.trim() !== "") {
 		const hashtags_ = hashtags
@@ -1037,6 +1044,7 @@ onMounted(() => {
 .right {
 	float: right;
 }
+
 .gafaadew {
 	position: relative;
 
diff --git a/packages/client/src/components/MkPostFormAttaches.vue b/packages/client/src/components/PostFormAttaches.vue
similarity index 95%
rename from packages/client/src/components/MkPostFormAttaches.vue
rename to packages/client/src/components/PostFormAttaches.vue
index a1cb191de..3aee11fc9 100644
--- a/packages/client/src/components/MkPostFormAttaches.vue
+++ b/packages/client/src/components/PostFormAttaches.vue
@@ -14,7 +14,7 @@
 				@click="showFileMenu(element, $event)"
 				@contextmenu.prevent="showFileMenu(element, $event)"
 			>
-				<MkDriveFileThumbnail
+				<DriveFileThumbnail
 					: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 MkDriveFileThumbnail from "@/components/MkDriveFileThumbnail.vue";
+import DriveFileThumbnail from "@/components/DriveFileThumbnail.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/MkMediaCaption.vue")),
+		defineAsyncComponent(() => import("@/components/MediaCaption.vue")),
 		{
 			title: i18n.ts.describeFile,
 			input: {
diff --git a/packages/client/src/components/MkPostFormDialog.vue b/packages/client/src/components/PostFormDialog.vue
similarity index 81%
rename from packages/client/src/components/MkPostFormDialog.vue
rename to packages/client/src/components/PostFormDialog.vue
index 5124e9a9a..ce26f787d 100644
--- a/packages/client/src/components/MkPostFormDialog.vue
+++ b/packages/client/src/components/PostFormDialog.vue
@@ -1,11 +1,11 @@
 <template>
-	<MkModal
+	<Modal
 		ref="modal"
 		:prefer-type="'dialog'"
 		@click="modal.close()"
 		@closed="onModalClosed()"
 	>
-		<MkPostForm
+		<PostForm
 			ref="form"
 			style="margin: 0 auto auto auto"
 			v-bind="props"
@@ -15,14 +15,14 @@
 			@cancel="modal.close()"
 			@esc="modal.close()"
 		/>
-	</MkModal>
+	</Modal>
 </template>
 
 <script lang="ts" setup>
 import {} from "vue";
 import * as misskey from "iceshrimp-js";
-import MkModal from "@/components/MkModal.vue";
-import MkPostForm from "@/components/MkPostForm.vue";
+import Modal from "@/components/Modal.vue";
+import PostForm from "@/components/PostForm.vue";
 
 const props = defineProps<{
 	reply?: misskey.entities.Note;
@@ -46,8 +46,8 @@ const emit = defineEmits<{
 	(ev: "closed"): void;
 }>();
 
-let modal = $shallowRef<InstanceType<typeof MkModal>>();
-let form = $shallowRef<InstanceType<typeof MkPostForm>>();
+let modal = $shallowRef<InstanceType<typeof Modal>>();
+let form = $shallowRef<InstanceType<typeof PostForm>>();
 
 function onPosted() {
 	modal.close({
diff --git a/packages/client/src/components/MkPushNotificationAllowButton.vue b/packages/client/src/components/PushNotificationAllowButton.vue
similarity index 97%
rename from packages/client/src/components/MkPushNotificationAllowButton.vue
rename to packages/client/src/components/PushNotificationAllowButton.vue
index 166c803f0..a7ddd0405 100644
--- a/packages/client/src/components/MkPushNotificationAllowButton.vue
+++ b/packages/client/src/components/PushNotificationAllowButton.vue
@@ -1,5 +1,5 @@
 <template>
-	<MkButton
+	<Button
 		v-if="supported && !pushRegistrationInServer"
 		type="button"
 		primary
@@ -12,8 +12,8 @@
 		@click="subscribe"
 	>
 		{{ i18n.ts.subscribePushNotification }}
-	</MkButton>
-	<MkButton
+	</Button>
+	<Button
 		v-else-if="
 			!showOnlyToRegister &&
 			($i ? pushRegistrationInServer : pushSubscription)
@@ -29,8 +29,8 @@
 		@click="unsubscribe"
 	>
 		{{ i18n.ts.unsubscribePushNotification }}
-	</MkButton>
-	<MkButton
+	</Button>
+	<Button
 		v-else-if="$i && pushRegistrationInServer"
 		disabled
 		:rounded="rounded"
@@ -39,8 +39,8 @@
 		:full="full"
 	>
 		{{ i18n.ts.pushNotificationAlreadySubscribed }}
-	</MkButton>
-	<MkButton
+	</Button>
+	<Button
 		v-else-if="!supported"
 		disabled
 		:rounded="rounded"
@@ -49,12 +49,12 @@
 		:full="full"
 	>
 		{{ i18n.ts.pushNotificationNotSupported }}
-	</MkButton>
+	</Button>
 </template>
 
 <script setup lang="ts">
 import { $i, getAccounts } from "@/account";
-import MkButton from "@/components/MkButton.vue";
+import Button from "@/components/Button.vue";
 import { instance } from "@/instance";
 import { api, apiWithDialog, promiseDialog } from "@/os";
 import { i18n } from "@/i18n";
diff --git a/packages/client/src/components/MkQuoteButton.vue b/packages/client/src/components/QuoteButton.vue
similarity index 100%
rename from packages/client/src/components/MkQuoteButton.vue
rename to packages/client/src/components/QuoteButton.vue
diff --git a/packages/client/src/components/MkReactedUsers.vue b/packages/client/src/components/ReactedUsers.vue
similarity index 90%
rename from packages/client/src/components/MkReactedUsers.vue
rename to packages/client/src/components/ReactedUsers.vue
index b483e81e6..110fd2ddb 100644
--- a/packages/client/src/components/MkReactedUsers.vue
+++ b/packages/client/src/components/ReactedUsers.vue
@@ -8,7 +8,7 @@
 				class="_button"
 				@click="tab = reaction"
 			>
-				<MkReactionIcon
+				<ReactionIcon
 					ref="reactionRef"
 					:reaction="
 						reaction
@@ -22,7 +22,7 @@
 				}}</span>
 			</button>
 		</div>
-		<MkUserCardMini
+		<UserCardMini
 			v-for="user in users"
 			:key="user.id"
 			:user="user"
@@ -30,15 +30,15 @@
 		/>
 	</div>
 	<div v-else>
-		<MkLoading />
+		<Loading />
 	</div>
 </template>
 
 <script lang="ts" setup>
 import { onMounted, watch } from "vue";
 import * as misskey from "iceshrimp-js";
-import MkReactionIcon from "@/components/MkReactionIcon.vue";
-import MkUserCardMini from "@/components/MkUserCardMini.vue";
+import ReactionIcon from "@/components/ReactionIcon.vue";
+import UserCardMini from "@/components/UserCardMini.vue";
 import { i18n } from "@/i18n";
 import * as os from "@/os";
 
diff --git a/packages/client/src/components/MkReactionIcon.vue b/packages/client/src/components/ReactionIcon.vue
similarity index 96%
rename from packages/client/src/components/MkReactionIcon.vue
rename to packages/client/src/components/ReactionIcon.vue
index eb19a5520..66bf0a138 100644
--- a/packages/client/src/components/MkReactionIcon.vue
+++ b/packages/client/src/components/ReactionIcon.vue
@@ -1,5 +1,5 @@
 <template>
-	<MkEmoji
+	<Emoji
 		:emoji="reaction"
 		:custom-emojis="customEmojis || []"
 		:is-reaction="true"
diff --git a/packages/client/src/components/MkReactionTooltip.vue b/packages/client/src/components/ReactionTooltip.vue
similarity index 86%
rename from packages/client/src/components/MkReactionTooltip.vue
rename to packages/client/src/components/ReactionTooltip.vue
index e3db05c27..09cc290d2 100644
--- a/packages/client/src/components/MkReactionTooltip.vue
+++ b/packages/client/src/components/ReactionTooltip.vue
@@ -1,5 +1,5 @@
 <template>
-	<MkTooltip
+	<Tooltip
 		ref="tooltip"
 		:target-element="targetElement"
 		:max-width="340"
@@ -14,13 +14,13 @@
 			/>
 			<div class="name">{{ reaction.replace("@.", "") }}</div>
 		</div>
-	</MkTooltip>
+	</Tooltip>
 </template>
 
 <script lang="ts" setup>
 import {} from "vue";
-import MkTooltip from "./MkTooltip.vue";
-import XReactionIcon from "@/components/MkReactionIcon.vue";
+import Tooltip from "./Tooltip.vue";
+import XReactionIcon from "@/components/ReactionIcon.vue";
 
 const props = defineProps<{
 	reaction: string;
diff --git a/packages/client/src/components/MkReactionsViewer.vue b/packages/client/src/components/ReactionsViewer.vue
similarity index 95%
rename from packages/client/src/components/MkReactionsViewer.vue
rename to packages/client/src/components/ReactionsViewer.vue
index 216daa75f..8235c8a81 100644
--- a/packages/client/src/components/MkReactionsViewer.vue
+++ b/packages/client/src/components/ReactionsViewer.vue
@@ -20,7 +20,7 @@
 import { computed, ref } from "vue";
 import * as misskey from "iceshrimp-js";
 import { $i } from "@/account";
-import XReaction from "@/components/MkReactionsViewer.reaction.vue";
+import XReaction from "@/components/ReactionsViewerReaction.vue";
 
 const props = defineProps<{
 	note: misskey.entities.Note;
@@ -55,6 +55,7 @@ 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/MkReactionsViewer.details.vue b/packages/client/src/components/ReactionsViewerDetails.vue
similarity index 87%
rename from packages/client/src/components/MkReactionsViewer.details.vue
rename to packages/client/src/components/ReactionsViewerDetails.vue
index 96dd05162..77494632e 100644
--- a/packages/client/src/components/MkReactionsViewer.details.vue
+++ b/packages/client/src/components/ReactionsViewerDetails.vue
@@ -1,5 +1,5 @@
 <template>
-	<MkTooltip
+	<Tooltip
 		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">
-					<MkAvatar class="avatar" :user="u" />
-					<MkUserName class="name" :user="u" :nowrap="true" />
+					<Avatar class="avatar" :user="u" />
+					<UserName class="name" :user="u" :nowrap="true" />
 				</div>
 				<div v-if="users.length > 10" class="omitted">
 					+{{ count - 10 }}
 				</div>
 			</div>
 		</div>
-	</MkTooltip>
+	</Tooltip>
 </template>
 
 <script lang="ts" setup>
 import {} from "vue";
-import MkTooltip from "./MkTooltip.vue";
-import XReactionIcon from "@/components/MkReactionIcon.vue";
+import Tooltip from "./Tooltip.vue";
+import XReactionIcon from "@/components/ReactionIcon.vue";
 
 const props = defineProps<{
 	reaction: string;
diff --git a/packages/client/src/components/MkReactionsViewer.reaction.vue b/packages/client/src/components/ReactionsViewerReaction.vue
similarity index 95%
rename from packages/client/src/components/MkReactionsViewer.reaction.vue
rename to packages/client/src/components/ReactionsViewerReaction.vue
index 1c63aa8b6..f933a42af 100644
--- a/packages/client/src/components/MkReactionsViewer.reaction.vue
+++ b/packages/client/src/components/ReactionsViewerReaction.vue
@@ -23,8 +23,8 @@
 <script lang="ts" setup>
 import { computed, ref } from "vue";
 import * as misskey from "iceshrimp-js";
-import XDetails from "@/components/MkReactionsViewer.details.vue";
-import XReactionIcon from "@/components/MkReactionIcon.vue";
+import XDetails from "@/components/ReactionsViewerDetails.vue";
+import XReactionIcon from "@/components/ReactionIcon.vue";
 import * as os from "@/os";
 import { useTooltip } from "@/scripts/use-tooltip";
 import { $i } from "@/account";
@@ -107,6 +107,7 @@ useTooltip(
 	padding: 0 8px;
 	pointer-events: all;
 	min-width: max-content;
+
 	&::before {
 		content: "";
 		position: absolute;
@@ -114,28 +115,35 @@ 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);
 		}
@@ -147,6 +155,7 @@ useTooltip(
 
 	&.reacted {
 		order: -1;
+
 		&::before {
 			background: var(--accent);
 		}
diff --git a/packages/client/src/components/MkRemoteCaution.vue b/packages/client/src/components/RemoteCaution.vue
similarity index 100%
rename from packages/client/src/components/MkRemoteCaution.vue
rename to packages/client/src/components/RemoteCaution.vue
diff --git a/packages/client/src/components/MkRenoteButton.vue b/packages/client/src/components/RenoteButton.vue
similarity index 98%
rename from packages/client/src/components/MkRenoteButton.vue
rename to packages/client/src/components/RenoteButton.vue
index f30041544..a23b89afe 100644
--- a/packages/client/src/components/MkRenoteButton.vue
+++ b/packages/client/src/components/RenoteButton.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/MkRipple.vue";
-import XDetails from "@/components/MkUsersTooltip.vue";
+import Ripple from "@/components/Ripple.vue";
+import XDetails from "@/components/UsersTooltip.vue";
 import { pleaseLogin } from "@/scripts/please-login";
 import * as os from "@/os";
 import { $i } from "@/account";
@@ -267,6 +267,7 @@ 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/MkRipple.vue b/packages/client/src/components/Ripple.vue
similarity index 100%
rename from packages/client/src/components/MkRipple.vue
rename to packages/client/src/components/Ripple.vue
diff --git a/packages/client/src/components/MkSample.vue b/packages/client/src/components/Sample.vue
similarity index 68%
rename from packages/client/src/components/MkSample.vue
rename to packages/client/src/components/Sample.vue
index 91bdcef5b..f9dc73153 100644
--- a/packages/client/src/components/MkSample.vue
+++ b/packages/client/src/components/Sample.vue
@@ -1,49 +1,49 @@
 <template>
 	<div class="_card">
 		<div class="_content">
-			<MkInput v-model="text">
+			<Input v-model="text">
 				<template #label>Text</template>
-			</MkInput>
-			<MkSwitch v-model="flag">
+			</Input>
+			<Switch v-model="flag">
 				<span>Switch is now {{ flag ? "on" : "off" }}</span>
-			</MkSwitch>
+			</Switch>
 			<div style="margin: 32px 0">
-				<MkRadio v-model="radio" value="misskey">Iceshrimp</MkRadio>
-				<MkRadio v-model="radio" value="mastodon">Mastodon</MkRadio>
-				<MkRadio v-model="radio" value="pleroma">Pleroma</MkRadio>
+				<Radio v-model="radio" value="misskey">Iceshrimp</Radio>
+				<Radio v-model="radio" value="mastodon">Mastodon</Radio>
+				<Radio v-model="radio" value="pleroma">Pleroma</Radio>
 			</div>
-			<MkButton inline>This is</MkButton>
-			<MkButton inline primary>the button</MkButton>
+			<Button inline>This is</Button>
+			<Button inline primary>the button</Button>
 		</div>
 		<div class="_content" style="pointer-events: none">
 			<Mfm :text="mfm" />
 		</div>
 		<div class="_content">
-			<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>
+			<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>
 		</div>
 	</div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from "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 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 * as os from "@/os";
 import * as config from "@/config";
 
 export default defineComponent({
 	components: {
-		MkButton,
-		MkInput,
-		MkSwitch,
-		MkTextarea,
-		MkRadio,
+		Button,
+		Input,
+		Switch,
+		Textarea,
+		Radio,
 	},
 
 	data() {
diff --git a/packages/client/src/components/MkShowMoreButton.vue b/packages/client/src/components/ShowMoreButton.vue
similarity index 94%
rename from packages/client/src/components/MkShowMoreButton.vue
rename to packages/client/src/components/ShowMoreButton.vue
index 872ddd5ec..d6186b2ca 100644
--- a/packages/client/src/components/MkShowMoreButton.vue
+++ b/packages/client/src/components/ShowMoreButton.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/MkSignin.vue b/packages/client/src/components/Signin.vue
similarity index 91%
rename from packages/client/src/components/MkSignin.vue
rename to packages/client/src/components/Signin.vue
index dc49ca23d..83818a55e 100644
--- a/packages/client/src/components/MkSignin.vue
+++ b/packages/client/src/components/Signin.vue
@@ -13,11 +13,11 @@
 					marginBottom: message ? '1.5em' : null,
 				}"
 			></div>
-			<MkInfo v-if="message">
+			<Info v-if="message">
 				{{ message }}
-			</MkInfo>
+			</Info>
 			<div v-if="!totpLogin" class="normal-signin">
-				<MkInput
+				<Input
 					v-model="username"
 					class="_formBlock"
 					:placeholder="i18n.ts.username"
@@ -31,8 +31,8 @@
 				>
 					<template #prefix>@</template>
 					<template #suffix>@{{ host }}</template>
-				</MkInput>
-				<MkInput
+				</Input>
+				<Input
 					v-if="!user || (user && !user.usePasswordLessLogin)"
 					v-model="password"
 					class="_formBlock"
@@ -55,14 +55,14 @@
 							{{ i18n.ts.forgotPassword }}
 						</button></template
 					>
-				</MkInput>
-				<MkButton
+				</Input>
+				<Button
 					class="_formBlock"
 					type="submit"
 					primary
 					:disabled="signing"
 					style="margin: 1rem auto"
-					>{{ signing ? i18n.ts.loggingIn : i18n.ts.login }}</MkButton
+					>{{ signing ? i18n.ts.loggingIn : i18n.ts.login }}</Button
 				>
 			</div>
 			<div
@@ -75,9 +75,9 @@
 					class="twofa-group tap-group"
 				>
 					<p>{{ i18n.ts.tapSecurityKey }}</p>
-					<MkButton v-if="!queryingKey" @click="queryKey">
+					<Button v-if="!queryingKey" @click="queryKey">
 						{{ i18n.ts.retry }}
-					</MkButton>
+					</Button>
 				</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>
-					<MkInput
+					<Input
 						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>
-					</MkInput>
-					<MkInput
+					</Input>
+					<Input
 						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>
-					</MkInput>
-					<MkButton
+					</Input>
+					<Button
 						type="submit"
 						:disabled="signing"
 						primary
 						style="margin: 1rem auto auto"
 						>{{
 							signing ? i18n.ts.loggingIn : i18n.ts.login
-						}}</MkButton
+						}}</Button
 					>
 				</div>
 			</div>
@@ -133,7 +133,11 @@
 					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"
@@ -143,7 +147,11 @@
 					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"
@@ -153,7 +161,11 @@
 					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>
@@ -163,9 +175,9 @@
 import Vue3OtpInput from "vue3-otp-input";
 import { defineAsyncComponent } from "vue";
 import { toUnicode } from "punycode/";
-import MkButton from "@/components/MkButton.vue";
-import MkInput from "@/components/form/input.vue";
-import MkInfo from "@/components/MkInfo.vue";
+import Button from "@/components/Button.vue";
+import Input from "@/components/form/Input.vue";
+import Info from "@/components/Info.vue";
 import { apiUrl, host as configHost } from "@/config";
 import { byteify, hexify } from "@/scripts/2fa";
 import * as os from "@/os";
@@ -367,7 +379,7 @@ function loginFailed(err) {
 
 function resetPassword() {
 	os.popup(
-		defineAsyncComponent(() => import("@/components/MkForgotPassword.vue")),
+		defineAsyncComponent(() => import("@/components/ForgotPassword.vue")),
 		{},
 		{},
 		"closed",
diff --git a/packages/client/src/components/MkSigninDialog.vue b/packages/client/src/components/SigninDialog.vue
similarity index 79%
rename from packages/client/src/components/MkSigninDialog.vue
rename to packages/client/src/components/SigninDialog.vue
index acb52ea7f..d2754e8af 100644
--- a/packages/client/src/components/MkSigninDialog.vue
+++ b/packages/client/src/components/SigninDialog.vue
@@ -7,14 +7,14 @@
 	>
 		<template #header>{{ i18n.ts.login }}</template>
 
-		<MkSignin :auto-set="autoSet" :message="message" @login="onLogin" />
+		<Signin :auto-set="autoSet" :message="message" @login="onLogin" />
 	</XModalWindow>
 </template>
 
 <script lang="ts" setup>
 import {} from "vue";
-import MkSignin from "@/components/MkSignin.vue";
-import XModalWindow from "@/components/MkModalWindow.vue";
+import Signin from "@/components/Signin.vue";
+import XModalWindow from "@/components/ModalWindow.vue";
 import { i18n } from "@/i18n";
 
 const props = withDefaults(
diff --git a/packages/client/src/components/MkSignup.vue b/packages/client/src/components/Signup.vue
similarity index 95%
rename from packages/client/src/components/MkSignup.vue
rename to packages/client/src/components/Signup.vue
index ebe502aa2..1ebdba9ca 100644
--- a/packages/client/src/components/MkSignup.vue
+++ b/packages/client/src/components/Signup.vue
@@ -2,9 +2,7 @@
 	<div v-if="instance.disableRegistration" style="margin-bottom: 1rem">
 		<p>{{ i18n.ts.signupsDisabled }}</p>
 		<a href="https://iceshrimp.dev/join">
-			<MkButton rounded gradate
-				>{{ i18n.ts.findOtherInstance }}
-			</MkButton>
+			<Button rounded gradate>{{ i18n.ts.findOtherInstance }} </Button>
 		</a>
 	</div>
 	<form
@@ -12,7 +10,7 @@
 		autocomplete="new-password"
 		@submit.prevent="onSubmit"
 	>
-		<MkInput
+		<Input
 			v-if="instance.disableRegistration"
 			v-model="invitationCode"
 			class="_formBlock"
@@ -24,14 +22,14 @@
 		>
 			<template #label>{{ i18n.ts.invitationCode }}</template>
 			<template #prefix><i class="ph-key ph-bold ph-lg"></i></template>
-		</MkInput>
+		</Input>
 		<div
 			v-if="
 				!instance.disableRegistration ||
 				(instance.disableRegistration && invitationState === 'entered')
 			"
 		>
-			<MkInput
+			<Input
 				v-model="username"
 				class="_formBlock"
 				type="text"
@@ -47,8 +45,9 @@
 						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>
@@ -95,8 +94,8 @@
 						{{ i18n.ts.tooLong }}</span
 					>
 				</template>
-			</MkInput>
-			<MkInput
+			</Input>
+			<Input
 				v-if="instance.emailRequiredForSignup"
 				v-model="email"
 				class="_formBlock"
@@ -113,8 +112,9 @@
 						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>
-			</MkInput>
-			<MkInput
+			</Input>
+			<Input
 				v-model="password"
 				class="_formBlock"
 				type="password"
@@ -208,8 +208,8 @@
 						{{ i18n.ts.strongPassword }}</span
 					>
 				</template>
-			</MkInput>
-			<MkInput
+			</Input>
+			<Input
 				v-model="retypedPassword"
 				class="_formBlock"
 				type="password"
@@ -238,8 +238,8 @@
 						{{ i18n.ts.passwordNotMatched }}</span
 					>
 				</template>
-			</MkInput>
-			<MkSwitch
+			</Input>
+			<Switch
 				v-if="instance.tosUrl"
 				v-model="ToSAgreement"
 				class="_formBlock tou"
@@ -254,8 +254,8 @@
 						>
 					</template>
 				</I18n>
-			</MkSwitch>
-			<MkCaptcha
+			</Switch>
+			<Captcha
 				v-if="instance.enableHcaptcha"
 				ref="hcaptcha"
 				v-model="hCaptchaResponse"
@@ -263,7 +263,7 @@
 				provider="hcaptcha"
 				:sitekey="instance.hcaptchaSiteKey"
 			/>
-			<MkCaptcha
+			<Captcha
 				v-if="instance.enableRecaptcha"
 				ref="recaptcha"
 				v-model="reCaptchaResponse"
@@ -271,13 +271,13 @@
 				provider="recaptcha"
 				:sitekey="instance.recaptchaSiteKey"
 			/>
-			<MkButton
+			<Button
 				class="_formBlock"
 				type="submit"
 				:disabled="shouldDisableSubmitting"
 				gradate
 				data-cy-signup-submit
-				>{{ i18n.ts.start }}</MkButton
+				>{{ i18n.ts.start }}</Button
 			>
 		</div>
 	</form>
@@ -287,10 +287,10 @@
 import {} from "vue";
 import getPasswordStrength from "syuilo-password-strength";
 import { toUnicode } from "punycode/";
-import MkButton from "./MkButton.vue";
-import MkInput from "./form/input.vue";
-import MkSwitch from "./form/switch.vue";
-import MkCaptcha from "@/components/MkCaptcha.vue";
+import Button from "./Button.vue";
+import Input from "./form/Input.vue";
+import Switch from "./form/Switch.vue";
+import Captcha from "@/components/Captcha.vue";
 import * as config from "@/config";
 import * as os from "@/os";
 import { login } from "@/account";
diff --git a/packages/client/src/components/MkSignupDialog.vue b/packages/client/src/components/SignupDialog.vue
similarity index 88%
rename from packages/client/src/components/MkSignupDialog.vue
rename to packages/client/src/components/SignupDialog.vue
index d9a1492e4..187749a7b 100644
--- a/packages/client/src/components/MkSignupDialog.vue
+++ b/packages/client/src/components/SignupDialog.vue
@@ -21,8 +21,8 @@
 
 <script lang="ts" setup>
 import {} from "vue";
-import XSignup from "@/components/MkSignup.vue";
-import XModalWindow from "@/components/MkModalWindow.vue";
+import XSignup from "@/components/Signup.vue";
+import XModalWindow from "@/components/ModalWindow.vue";
 import { i18n } from "@/i18n";
 
 const props = withDefaults(
diff --git a/packages/client/src/components/MkSparkle.vue b/packages/client/src/components/Sparkle.vue
similarity index 100%
rename from packages/client/src/components/MkSparkle.vue
rename to packages/client/src/components/Sparkle.vue
diff --git a/packages/client/src/components/MkStarButton.vue b/packages/client/src/components/StarButton.vue
similarity index 98%
rename from packages/client/src/components/MkStarButton.vue
rename to packages/client/src/components/StarButton.vue
index 021cd72bc..6cf792d2d 100644
--- a/packages/client/src/components/MkStarButton.vue
+++ b/packages/client/src/components/StarButton.vue
@@ -39,7 +39,7 @@
 
 <script lang="ts" setup>
 import type { Note } from "iceshrimp-js/built/entities";
-import Ripple from "@/components/MkRipple.vue";
+import Ripple from "@/components/Ripple.vue";
 import { pleaseLogin } from "@/scripts/please-login";
 import * as os from "@/os";
 import { defaultStore } from "@/store";
diff --git a/packages/client/src/components/MkStarButtonNoEmoji.vue b/packages/client/src/components/StarButtonNoEmoji.vue
similarity index 92%
rename from packages/client/src/components/MkStarButtonNoEmoji.vue
rename to packages/client/src/components/StarButtonNoEmoji.vue
index 5667095cd..fb3495be0 100644
--- a/packages/client/src/components/MkStarButtonNoEmoji.vue
+++ b/packages/client/src/components/StarButtonNoEmoji.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/MkRipple.vue";
-import XDetails from "@/components/MkUsersTooltip.vue";
+import Ripple from "@/components/Ripple.vue";
+import XDetails from "@/components/UsersTooltip.vue";
 import { pleaseLogin } from "@/scripts/please-login";
 import * as os from "@/os";
 import { defaultStore } from "@/store";
diff --git a/packages/client/src/components/MkSubNoteContent.vue b/packages/client/src/components/SubNoteContent.vue
similarity index 87%
rename from packages/client/src/components/MkSubNoteContent.vue
rename to packages/client/src/components/SubNoteContent.vue
index f32869979..fdac9848f 100644
--- a/packages/client/src/components/MkSubNoteContent.vue
+++ b/packages/client/src/components/SubNoteContent.vue
@@ -1,6 +1,6 @@
 <template>
 	<p v-if="note.cw != null" class="cw" :class="cwStyle">
-		<MkA
+		<A
 			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>
-		</MkA>
-		<MkA
+		</A>
+		<A
 			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>
-		</MkA>
+		</A>
 		<span
 			v-else-if="note.replyId && !note.reply"
 			class="reply-icon"
@@ -34,7 +34,10 @@
 			<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"
@@ -53,24 +56,43 @@
 	<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"
@@ -87,7 +109,7 @@
 					>({{ i18n.ts.deleted }})</span
 				>
 				<template v-if="!note.cw">
-					<MkA
+					<A
 						v-if="conversation && note.renoteId == parentId"
 						:to="
 							detailedView
@@ -99,8 +121,8 @@
 						@click.stop
 					>
 						<i class="ph-quotes ph-bold ph-lg"></i>
-					</MkA>
-					<MkA
+					</A>
+					<A
 						v-else-if="!detailed && note.replyId"
 						:to="
 							detailedView
@@ -113,7 +135,7 @@
 						@click.stop
 					>
 						<i class="ph-arrow-bend-left-up ph-bold ph-lg"></i>
-					</MkA>
+					</A>
 					<span
 						v-else-if="note.replyId && !note.reply"
 						class="reply-icon"
@@ -130,11 +152,11 @@
 					:i="$i"
 					:custom-emojis="note.emojis"
 				/>
-				<MkA
+				<A
 					v-if="!detailed && note.renoteId"
 					class="rp"
 					:to="`/notes/${note.renoteId}`"
-					>{{ i18n.ts.quoteAttached }}: ...</MkA
+					>{{ i18n.ts.quoteAttached }}: ...</A
 				>
 				<XMediaList
 					v-if="note.files.length > 0"
@@ -142,7 +164,7 @@
 				/>
 				<XPoll v-if="note.poll" :note="note" class="poll" />
 				<template v-if="detailed">
-					<MkUrlPreview
+					<UrlPreview
 						v-for="url in urls"
 						:key="url"
 						:url="url"
@@ -175,12 +197,16 @@
 				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>
-		<MkButton
+		<Button
 			v-if="hasMfm && defaultStore.state.animatedMfm"
 			@click.stop="toggleMfm"
 			mini
@@ -192,7 +218,7 @@
 			<template v-else>
 				<i class="ph-stop ph-bold"></i> {{ i18n.ts._mfm.stop }}
 			</template>
-		</MkButton>
+		</Button>
 		<!-- <div
 			v-if="(isLong && !collapsed) || (props.note.cw && showContent)"
 			class="fade"
@@ -205,13 +231,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/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 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 { notePage } from "@/filters/note";
 import { extractUrlFromMfm } from "@/scripts/extract-url-from-mfm";
 import { extractMfmWithAnimation } from "@/scripts/extract-mfm";
@@ -248,10 +274,12 @@ 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;
@@ -260,7 +288,7 @@ let showContent = $computed({
 
 		return _showContent;
 	},
-})
+});
 
 const mfms = props.note.text
 	? extractMfmWithAnimation(mfm.parse(props.note.text))
@@ -301,6 +329,7 @@ function focusFooter(ev) {
 	position: relative;
 	z-index: 2;
 }
+
 .reply-icon {
 	display: inline-block;
 	border-radius: 6px;
@@ -308,20 +337,25 @@ 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;
 	}
@@ -330,6 +364,7 @@ function focusFooter(ev) {
 .wrmlmaau {
 	.content {
 		overflow-wrap: break-word;
+
 		&._cw_style_modern {
 			> .hiddenNote {
 				display: block;
@@ -339,6 +374,7 @@ function focusFooter(ev) {
 				text-align: center;
 			}
 		}
+
 		&._cw_style_classic {
 			overflow: clip;
 
@@ -348,13 +384,16 @@ 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;
@@ -362,15 +401,18 @@ 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;
 			}
@@ -381,11 +423,13 @@ 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);
@@ -397,10 +441,13 @@ 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);
@@ -418,44 +465,53 @@ 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;
@@ -467,11 +523,13 @@ function focusFooter(ev) {
 			animation: none !important;
 		}
 	}
+
 	> :deep(button) {
 		margin-top: 10px;
 		margin-left: 0;
 		margin-right: 0.4rem;
 	}
+
 	> .fade {
 		position: absolute;
 		inset: 0;
@@ -480,6 +538,7 @@ function focusFooter(ev) {
 		align-items: flex-end;
 		z-index: 4;
 		pointer-events: none;
+
 		&::before {
 			content: "";
 			display: block;
diff --git a/packages/client/src/components/MkSuperMenu.vue b/packages/client/src/components/SuperMenu.vue
similarity index 99%
rename from packages/client/src/components/MkSuperMenu.vue
rename to packages/client/src/components/SuperMenu.vue
index 14974bbba..d69c66a37 100644
--- a/packages/client/src/components/MkSuperMenu.vue
+++ b/packages/client/src/components/SuperMenu.vue
@@ -33,7 +33,7 @@
 						></i>
 						<span class="text">{{ item.text }}</span>
 					</button>
-					<MkA
+					<A
 						v-else
 						:to="item.to"
 						class="_button item"
@@ -45,7 +45,7 @@
 							:class="item.icon"
 						></i>
 						<span class="text">{{ item.text }}</span>
-					</MkA>
+					</A>
 				</template>
 			</div>
 		</section>
diff --git a/packages/client/src/components/MkTab.vue b/packages/client/src/components/Tab.vue
similarity index 100%
rename from packages/client/src/components/MkTab.vue
rename to packages/client/src/components/Tab.vue
diff --git a/packages/client/src/components/MkTagCloud.vue b/packages/client/src/components/TagCloud.vue
similarity index 100%
rename from packages/client/src/components/MkTagCloud.vue
rename to packages/client/src/components/TagCloud.vue
diff --git a/packages/client/src/components/MkTimeline.vue b/packages/client/src/components/Timeline.vue
similarity index 95%
rename from packages/client/src/components/MkTimeline.vue
rename to packages/client/src/components/Timeline.vue
index e4c415d53..51c7800a5 100644
--- a/packages/client/src/components/MkTimeline.vue
+++ b/packages/client/src/components/Timeline.vue
@@ -1,5 +1,5 @@
 <template>
-	<MkInfo
+	<Info
 		v-if="tlHint && !tlHintClosed"
 		:closeable="true"
 		class="_gap"
@@ -8,7 +8,7 @@
 		<I18n :src="tlHint">
 			<template #icon></template>
 		</I18n>
-	</MkInfo>
+	</Info>
 	<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/MkNotes.vue";
-import MkInfo from "@/components/MkInfo.vue";
+import XNotes from "@/components/Notes.vue";
+import Info from "@/components/Info.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,6 +254,7 @@ const timetravel = (date?: Date) => {
 		opacity: 0;
 	}
 }
+
 .new {
 	position: sticky;
 	display: flex;
@@ -267,6 +268,7 @@ const timetravel = (date?: Date) => {
 	margin-top: -60px;
 	z-index: 1001;
 	box-shadow: 0 24px 24px -20px var(--accentedBg);
+
 	&::after {
 		content: "";
 		position: absolute;
@@ -285,6 +287,7 @@ const timetravel = (date?: Date) => {
 			transparent
 		);
 	}
+
 	> button {
 		display: flex;
 		position: absolute;
@@ -302,6 +305,7 @@ 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;
@@ -309,6 +313,7 @@ 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/MkToast.vue b/packages/client/src/components/Toast.vue
similarity index 100%
rename from packages/client/src/components/MkToast.vue
rename to packages/client/src/components/Toast.vue
diff --git a/packages/client/src/components/MkTokenGenerateWindow.vue b/packages/client/src/components/TokenGenerateWindow.vue
similarity index 78%
rename from packages/client/src/components/MkTokenGenerateWindow.vue
rename to packages/client/src/components/TokenGenerateWindow.vue
index b164114f0..fa5c73e33 100644
--- a/packages/client/src/components/MkTokenGenerateWindow.vue
+++ b/packages/client/src/components/TokenGenerateWindow.vue
@@ -13,30 +13,28 @@
 	>
 		<template #header>{{ title || i18n.ts.generateAccessToken }}</template>
 		<div v-if="information" class="_section">
-			<MkInfo warn>{{ information }}</MkInfo>
+			<Info warn>{{ information }}</Info>
 		</div>
 		<div class="_section">
 			<div style="margin-bottom: 16px">
 				<b>{{ i18n.ts.name }}</b>
 			</div>
-			<MkInput style="margin-bottom: 16px" v-model="name" />
+			<Input style="margin-bottom: 16px" v-model="name" />
 		</div>
 		<div class="_section">
 			<div style="margin-bottom: 16px">
 				<b>{{ i18n.ts.permission }}</b>
 			</div>
-			<MkButton inline @click="disableAll">{{
-				i18n.ts.disableAll
-			}}</MkButton>
-			<MkButton style="margin-bottom: 12px" inline @click="enableAll">{{
+			<Button inline @click="disableAll">{{ i18n.ts.disableAll }}</Button>
+			<Button style="margin-bottom: 12px" inline @click="enableAll">{{
 				i18n.ts.enableAll
-			}}</MkButton>
-			<MkSwitch
+			}}</Button>
+			<Switch
 				style="margin-bottom: 6px"
 				v-for="kind in initialPermissions || kinds"
 				:key="kind"
 				v-model="permissions[kind]"
-				>{{ i18n.t(`_permissions.${kind}`) }}</MkSwitch
+				>{{ i18n.t(`_permissions.${kind}`) }}</Switch
 			>
 		</div>
 	</XModalWindow>
@@ -45,11 +43,11 @@
 <script lang="ts" setup>
 import {} from "vue";
 import { permissions as kinds } from "iceshrimp-js";
-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 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 { i18n } from "@/i18n";
 
 const props = withDefaults(
diff --git a/packages/client/src/components/MkTooltip.vue b/packages/client/src/components/Tooltip.vue
similarity index 100%
rename from packages/client/src/components/MkTooltip.vue
rename to packages/client/src/components/Tooltip.vue
diff --git a/packages/client/src/components/MkTutorialDialog.vue b/packages/client/src/components/TutorialDialog.vue
similarity index 88%
rename from packages/client/src/components/MkTutorialDialog.vue
rename to packages/client/src/components/TutorialDialog.vue
index dd5336d47..df20369b8 100644
--- a/packages/client/src/components/MkTutorialDialog.vue
+++ b/packages/client/src/components/TutorialDialog.vue
@@ -28,17 +28,17 @@
 								<i class="ph-caret-right ph-bold ph-lg"></i>
 							</button>
 						</div>
-						<MkButton
+						<Button
 							v-if="tutorial === 5"
 							class="ok"
 							primary
 							@click="close"
 							><i class="ph-check ph-bold ph-lg"></i>
-							{{ i18n.ts.gotIt }}</MkButton
+							{{ i18n.ts.gotIt }}</Button
 						>
-						<MkButton v-else class="ok" primary @click="tutorial++"
+						<Button v-else class="ok" primary @click="tutorial++"
 							><i class="ph-check ph-bold ph-lg"></i>
-							{{ i18n.ts.next }}</MkButton
+							{{ i18n.ts.next }}</Button
 						>
 					</div>
 					<Transition name="fade">
@@ -84,9 +84,9 @@
 							<div>{{ i18n.ts._tutorial.step3_2 }}</div>
 							<XFeaturedUsers />
 							<br />
-							<MkButton class="ok" primary @click="tutorial++"
+							<Button class="ok" primary @click="tutorial++"
 								><i class="ph-check ph-bold ph-lg"></i>
-								{{ i18n.ts.next }}</MkButton
+								{{ i18n.ts.next }}</Button
 							>
 						</section>
 						<section
@@ -97,8 +97,8 @@
 							<h3>{{ i18n.ts._tutorial.step4_1 }}</h3>
 							<I18n :src="i18n.ts._tutorial.step4_2" tag="div">
 								<template #introduction>
-									<MkA class="_link" to="/tags/introduction"
-										>#introduction</MkA
+									<A class="_link" to="/tags/introduction"
+										>#introduction</A
 									>
 								</template>
 							</I18n>
@@ -187,13 +187,13 @@
 							<div>{{ i18n.ts._tutorial.step6_2 }}</div>
 							<div>{{ i18n.ts._tutorial.step6_3 }}</div>
 							<br />
-							<MkSparkle>
+							<Sparkle>
 								<h3>
 									{{ i18n.ts._tutorial.step6_4 }}
 									<Mfm text="$[shake 🚀]"></Mfm>
 								</h3>
-							</MkSparkle>
-							<MkPushNotificationAllowButton
+							</Sparkle>
+							<PushNotificationAllowButton
 								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/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 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 { defaultStore } from "@/store";
 import { i18n } from "@/i18n";
 import { $i } from "@/account";
@@ -287,6 +287,7 @@ 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/MkUpdated.vue b/packages/client/src/components/Updated.vue
similarity index 81%
rename from packages/client/src/components/MkUpdated.vue
rename to packages/client/src/components/Updated.vue
index 3ccb81978..93f1a7af1 100644
--- a/packages/client/src/components/MkUpdated.vue
+++ b/packages/client/src/components/Updated.vue
@@ -1,5 +1,5 @@
 <template>
-	<MkModal
+	<Modal
 		ref="modal"
 		:z-priority="'middle'"
 		@click="$refs.modal.close()"
@@ -7,7 +7,7 @@
 	>
 		<div :class="$style.root">
 			<div :class="$style.title">
-				<MkSparkle>{{ i18n.ts.iceshrimpUpdated }}</MkSparkle>
+				<Sparkle>{{ i18n.ts.iceshrimpUpdated }}</Sparkle>
 			</div>
 			<div :class="$style.version">✨ {{ version }} 🚀</div>
 			<div v-if="newRelease" :class="$style.releaseNotes">
@@ -21,27 +21,27 @@
 					/>
 				</div>
 			</div>
-			<MkButton
+			<Button
 				:class="$style.gotIt"
 				primary
 				full
 				@click="$refs.modal.close()"
-				>{{ i18n.ts.gotIt }}</MkButton
+				>{{ i18n.ts.gotIt }}</Button
 			>
 		</div>
-	</MkModal>
+	</Modal>
 </template>
 
 <script lang="ts" setup>
 import { shallowRef } from "vue";
-import MkModal from "@/components/MkModal.vue";
-import MkSparkle from "@/components/MkSparkle.vue";
-import MkButton from "@/components/MkButton.vue";
+import Modal from "@/components/Modal.vue";
+import Sparkle from "@/components/Sparkle.vue";
+import Button from "@/components/Button.vue";
 import { version } from "@/config";
 import { i18n } from "@/i18n";
 import * as os from "@/os";
 
-const modal = shallowRef<InstanceType<typeof MkModal>>();
+const modal = shallowRef<InstanceType<typeof Modal>>();
 
 let newRelease = $ref(false);
 let data = $ref(Object);
diff --git a/packages/client/src/components/MkUrlPreview.vue b/packages/client/src/components/UrlPreview.vue
similarity index 99%
rename from packages/client/src/components/MkUrlPreview.vue
rename to packages/client/src/components/UrlPreview.vue
index 29d045ebf..e4a088ea8 100644
--- a/packages/client/src/components/MkUrlPreview.vue
+++ b/packages/client/src/components/UrlPreview.vue
@@ -7,7 +7,7 @@
 			 weird w/ some links stuck loading (?) -->
 		<article v-if="!fetching" class="url-preview" @click.stop>
 			<component
-				:is="self ? 'MkA' : 'a'"
+				:is="self ? 'A' : 'a'"
 				:[attr]="self ? url.substring(local.length) : url"
 				rel="nofollow noopener"
 				:target="target"
@@ -48,7 +48,7 @@
 					</button>
 				</div>
 				<div v-if="fetching">
-					<MkLoading mini />
+					<Loading mini />
 				</div>
 				<div v-else>
 					<h3 :title="title || undefined">{{ title || url }}</h3>
@@ -193,10 +193,12 @@ 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;
@@ -204,6 +206,7 @@ onUnmounted(() => {
 			display: flex;
 			justify-content: center;
 			align-items: center;
+
 			img {
 				position: absolute;
 				inset: 0;
@@ -212,10 +215,12 @@ onUnmounted(() => {
 				object-fit: cover;
 				transition: opacity 0.2s;
 			}
+
 			button {
 				display: flex;
 				width: 100%;
 				height: 100%;
+
 				i {
 					background: var(--bg);
 					padding: 14px;
@@ -227,6 +232,7 @@ onUnmounted(() => {
 						opacity 0.2s,
 						background 0.2s;
 				}
+
 				&:hover,
 				&:focus {
 					i {
@@ -236,11 +242,13 @@ onUnmounted(() => {
 				}
 			}
 		}
+
 		> div:last-child {
 			padding: 14px 16px;
 			width: 0;
 			flex-grow: 1;
 		}
+
 		h3,
 		p {
 			display: block;
@@ -249,6 +257,7 @@ onUnmounted(() => {
 			text-overflow: ellipsis;
 			max-width: 100%;
 		}
+
 		h3 {
 			font-size: 1em;
 			white-space: nowrap;
@@ -257,35 +266,42 @@ 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 {
@@ -293,6 +309,7 @@ onUnmounted(() => {
 				img {
 					opacity: 0.2;
 				}
+
 				button i {
 					transform: none;
 					opacity: 1;
@@ -300,11 +317,13 @@ 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/MkUrlPreviewPopup.vue b/packages/client/src/components/UrlPreviewPopup.vue
similarity index 88%
rename from packages/client/src/components/MkUrlPreviewPopup.vue
rename to packages/client/src/components/UrlPreviewPopup.vue
index 76d014313..2fefee82b 100644
--- a/packages/client/src/components/MkUrlPreviewPopup.vue
+++ b/packages/client/src/components/UrlPreviewPopup.vue
@@ -7,14 +7,14 @@
 			:name="$store.state.animation ? 'zoom' : ''"
 			@after-leave="emit('closed')"
 		>
-			<MkUrlPreview v-if="showing" class="_popup _shadow" :url="url" />
+			<UrlPreview v-if="showing" class="_popup _shadow" :url="url" />
 		</transition>
 	</div>
 </template>
 
 <script lang="ts" setup>
 import { onMounted } from "vue";
-import MkUrlPreview from "@/components/MkUrlPreview.vue";
+import UrlPreview from "@/components/UrlPreview.vue";
 import * as os from "@/os";
 
 const props = defineProps<{
diff --git a/packages/client/src/components/MkUserCardMini.vue b/packages/client/src/components/UserCardMini.vue
similarity index 92%
rename from packages/client/src/components/MkUserCardMini.vue
rename to packages/client/src/components/UserCardMini.vue
index 4a7036f71..ac470271e 100644
--- a/packages/client/src/components/MkUserCardMini.vue
+++ b/packages/client/src/components/UserCardMini.vue
@@ -1,5 +1,5 @@
 <template>
-	<MkA
+	<A
 		class="user-card-mini"
 		:class="[
 			$style.root,
@@ -7,25 +7,27 @@
 		]"
 		:to="userPage(user)"
 	>
-		<MkAvatar
+		<Avatar
 			class="avatar"
 			:user="user"
 			:disable-link="true"
 			:show-indicator="true"
 		/>
 		<div class="body">
-			<span class="name"><MkUserName class="name" :user="user" /></span>
+			<span class="name">
+				<UserName class="name" :user="user" />
+			</span>
 			<span class="sub"
 				><span class="acct _monospace">@{{ acct(user) }}</span></span
 			>
 		</div>
-		<MkMiniChart v-if="chartValues" class="chart" :src="chartValues" />
-	</MkA>
+		<MiniChart v-if="chartValues" class="chart" :src="chartValues" />
+	</A>
 </template>
 
 <script lang="ts" setup>
 import * as misskey from "iceshrimp-js";
-import MkMiniChart from "@/components/MkMiniChart.vue";
+import MiniChart from "@/components/MiniChart.vue";
 import * as os from "@/os";
 import { acct, userPage } from "@/filters/user";
 
diff --git a/packages/client/src/components/MkUserInfo.vue b/packages/client/src/components/UserInfo.vue
similarity index 91%
rename from packages/client/src/components/MkUserInfo.vue
rename to packages/client/src/components/UserInfo.vue
index 9d2ab0154..46fa5d78f 100644
--- a/packages/client/src/components/MkUserInfo.vue
+++ b/packages/client/src/components/UserInfo.vue
@@ -14,16 +14,18 @@
 			>
 		</div>
 		<h3 class="title">
-			<MkAvatar
+			<Avatar
 				class="avatar"
 				:user="user"
 				:disable-preview="true"
 				:show-indicator="true"
 			/>
-			<MkA class="name" :to="userPage(user)"
-				><MkUserName :user="user" :nowrap="true"
-			/></MkA>
-			<p class="username"><MkAcct :user="user" /></p>
+			<A class="name" :to="userPage(user)">
+				<UserName :user="user" :nowrap="true" />
+			</A>
+			<p class="username">
+				<Acct :user="user" />
+			</p>
 		</h3>
 		<div
 			class="description"
@@ -65,21 +67,21 @@
 		</div>
 		<div class="status">
 			<p>
-				<MkNumber :value="user.notesCount" />
+				<Number :value="user.notesCount" />
 				{{ i18n.ts.notes }}
 			</p>
 			<p>
-				<MkNumber :value="user.followingCount" />
+				<Number :value="user.followingCount" />
 				{{ i18n.ts.following }}
 			</p>
 			<p>
-				<MkNumber :value="user.followersCount" />
+				<Number :value="user.followersCount" />
 				{{ i18n.ts.followers }}
 			</p>
 		</div>
 		<div class="buttons">
 			<slot>
-				<MkFollowButton v-if="$i && user.id != $i.id" :user="user" />
+				<FollowButton v-if="$i && user.id != $i.id" :user="user" />
 			</slot>
 		</div>
 	</article>
@@ -87,9 +89,9 @@
 
 <script lang="ts" setup>
 import * as misskey from "iceshrimp-js";
-import MkFollowButton from "@/components/MkFollowButton.vue";
-import XShowMoreButton from "@/components/MkShowMoreButton.vue";
-import MkNumber from "@/components/MkNumber.vue";
+import FollowButton from "@/components/FollowButton.vue";
+import XShowMoreButton from "@/components/ShowMoreButton.vue";
+import Number from "@/components/Number.vue";
 import { userPage } from "@/filters/user";
 import { i18n } from "@/i18n";
 
@@ -119,6 +121,7 @@ let collapsed = $ref(isLong);
 		background-size: cover;
 		background-position: center;
 		margin-bottom: calc(0px - var(--radius));
+
 		&::before {
 			content: "";
 			position: absolute;
@@ -132,6 +135,7 @@ let collapsed = $ref(isLong);
 				transparent
 			);
 		}
+
 		> .followed {
 			position: absolute;
 			top: 12px;
@@ -142,6 +146,7 @@ let collapsed = $ref(isLong);
 			font-size: 0.7em;
 			border-radius: 6px;
 		}
+
 		&.detailed::after {
 			content: "";
 			background-image: var(--blur, inherit);
@@ -179,6 +184,7 @@ let collapsed = $ref(isLong);
 			background: var(--panel);
 			border: solid 4px var(--panel);
 		}
+
 		.name {
 			display: inline-block;
 			margin: 0;
@@ -209,17 +215,20 @@ 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) {
@@ -227,12 +236,14 @@ 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);
@@ -241,12 +252,14 @@ 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;
@@ -261,6 +274,7 @@ let collapsed = $ref(isLong);
 			box-shadow: 0 0 7px 7px var(--bg);
 		}
 	}
+
 	> .fields {
 		padding-inline: 16px;
 		font-size: 0.8em;
@@ -300,6 +314,7 @@ let collapsed = $ref(isLong);
 			}
 		}
 	}
+
 	.status {
 		display: flex;
 		gap: 1em;
@@ -307,6 +322,7 @@ 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/MkUserList.vue b/packages/client/src/components/UserList.vue
similarity index 62%
rename from packages/client/src/components/MkUserList.vue
rename to packages/client/src/components/UserList.vue
index 0ea2739b5..a4280953a 100644
--- a/packages/client/src/components/MkUserList.vue
+++ b/packages/client/src/components/UserList.vue
@@ -1,19 +1,15 @@
 <template>
-	<MkPagination ref="pagingComponent" :pagination="pagination">
+	<Pagination 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">
-				<MkUserInfo
+				<UserInfo
 					v-for="user in users"
 					:key="user.id"
 					class="user"
@@ -21,23 +17,23 @@
 				/>
 			</div>
 		</template>
-	</MkPagination>
+	</Pagination>
 </template>
 
 <script lang="ts" setup>
 import { ref } from "vue";
-import MkUserInfo from "@/components/MkUserInfo.vue";
-import MkPagination, { Paging } from "@/components/MkPagination.vue";
+import UserInfo from "@/components/UserInfo.vue";
+import Pagination, { Paging } from "@/components/Pagination.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 MkPagination>>();
+const pagingComponent = ref<InstanceType<typeof Pagination>>();
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/components/MkUserOnlineIndicator.vue b/packages/client/src/components/UserOnlineIndicator.vue
similarity index 100%
rename from packages/client/src/components/MkUserOnlineIndicator.vue
rename to packages/client/src/components/UserOnlineIndicator.vue
diff --git a/packages/client/src/components/MkUserPreview.vue b/packages/client/src/components/UserPreview.vue
similarity index 92%
rename from packages/client/src/components/MkUserPreview.vue
rename to packages/client/src/components/UserPreview.vue
index d2e9ae56d..90b9a3572 100644
--- a/packages/client/src/components/MkUserPreview.vue
+++ b/packages/client/src/components/UserPreview.vue
@@ -19,9 +19,9 @@
 				}
 			"
 		>
-			<MkUserInfo v-if="user != null" :user="user" :detailed="true" />
+			<UserInfo v-if="user != null" :user="user" :detailed="true" />
 			<div v-else>
-				<MkLoading />
+				<Loading />
 			</div>
 		</div>
 	</transition>
@@ -29,7 +29,7 @@
 
 <script lang="ts" setup>
 import { onMounted } from "vue";
-import MkUserInfo from "@/components/MkUserInfo.vue";
+import UserInfo from "@/components/UserInfo.vue";
 import * as Acct from "iceshrimp-js/built/acct";
 import type * as misskey from "iceshrimp-js";
 import * as os from "@/os";
@@ -82,6 +82,7 @@ onMounted(() => {
 		opacity 0.3s,
 		transform 0.3s !important;
 }
+
 .popup-enter-from,
 .popup-leave-to {
 	opacity: 0;
diff --git a/packages/client/src/components/MkUserSelectDialog.vue b/packages/client/src/components/UserSelectDialog.vue
similarity index 89%
rename from packages/client/src/components/MkUserSelectDialog.vue
rename to packages/client/src/components/UserSelectDialog.vue
index 4d5cff92f..d430d1f12 100644
--- a/packages/client/src/components/MkUserSelectDialog.vue
+++ b/packages/client/src/components/UserSelectDialog.vue
@@ -12,18 +12,18 @@
 		<div class="tbhwbxda">
 			<div class="form">
 				<FormSplit :min-width="170">
-					<MkInput
+					<Input
 						v-model="username"
 						:autofocus="true"
 						@update:modelValue="search"
 					>
 						<template #label>{{ i18n.ts.username }}</template>
 						<template #prefix>@</template>
-					</MkInput>
-					<MkInput v-model="host" @update:modelValue="search">
+					</Input>
+					<Input v-model="host" @update:modelValue="search">
 						<template #label>{{ i18n.ts.host }}</template>
 						<template #prefix>@</template>
-					</MkInput>
+					</Input>
 				</FormSplit>
 			</div>
 			<div
@@ -42,15 +42,15 @@
 						@click="selected = user"
 						@dblclick="ok()"
 					>
-						<MkAvatar
+						<Avatar
 							:user="user"
 							class="avatar"
 							:show-indicator="true"
 							disableLink
 						/>
 						<div class="body">
-							<MkUserName :user="user" class="name" />
-							<MkAcct :user="user" class="acct" />
+							<UserName :user="user" class="name" />
+							<Acct :user="user" class="acct" />
 						</div>
 					</div>
 				</div>
@@ -70,15 +70,15 @@
 						@click="selected = user"
 						@dblclick="ok()"
 					>
-						<MkAvatar
+						<Avatar
 							:user="user"
 							class="avatar"
 							:show-indicator="true"
 							disableLink
 						/>
 						<div class="body">
-							<MkUserName :user="user" class="name" />
-							<MkAcct :user="user" class="acct" />
+							<UserName :user="user" class="name" />
+							<Acct :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 MkInput from "@/components/form/input.vue";
-import FormSplit from "@/components/form/split.vue";
-import XModalWindow from "@/components/MkModalWindow.vue";
+import Input from "@/components/form/Input.vue";
+import FormSplit from "@/components/form/Split.vue";
+import XModalWindow from "@/components/ModalWindow.vue";
 import * as os from "@/os";
 import { defaultStore } from "@/store";
 import { i18n } from "@/i18n";
diff --git a/packages/client/src/components/MkUserSelectLocalDialog.vue b/packages/client/src/components/UserSelectLocalDialog.vue
similarity index 90%
rename from packages/client/src/components/MkUserSelectLocalDialog.vue
rename to packages/client/src/components/UserSelectLocalDialog.vue
index dd71a18e5..34f3ebc16 100644
--- a/packages/client/src/components/MkUserSelectLocalDialog.vue
+++ b/packages/client/src/components/UserSelectLocalDialog.vue
@@ -12,14 +12,14 @@
 		<div class="tbhwbxdg">
 			<div class="form">
 				<FormSplit :min-width="170">
-					<MkInput
+					<Input
 						v-model="username"
 						:autofocus="true"
 						@update:modelValue="search"
 					>
 						<template #label>{{ i18n.ts.username }}</template>
 						<template #prefix>@</template>
-					</MkInput>
+					</Input>
 				</FormSplit>
 			</div>
 			<div
@@ -38,15 +38,15 @@
 						@click="selected = user"
 						@dblclick="ok()"
 					>
-						<MkAvatar
+						<Avatar
 							:user="user"
 							class="avatar"
 							:show-indicator="true"
 							disableLink
 						/>
 						<div class="body">
-							<MkUserName :user="user" class="name" />
-							<MkAcct :user="user" class="acct" />
+							<UserName :user="user" class="name" />
+							<Acct :user="user" class="acct" />
 						</div>
 					</div>
 				</div>
@@ -66,15 +66,15 @@
 						@click="selected = user"
 						@dblclick="ok()"
 					>
-						<MkAvatar
+						<Avatar
 							:user="user"
 							class="avatar"
 							:show-indicator="true"
 							disableLink
 						/>
 						<div class="body">
-							<MkUserName :user="user" class="name" />
-							<MkAcct :user="user" class="acct" />
+							<UserName :user="user" class="name" />
+							<Acct :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 MkInput from "@/components/form/input.vue";
-import FormSplit from "@/components/form/split.vue";
-import XModalWindow from "@/components/MkModalWindow.vue";
+import Input from "@/components/form/Input.vue";
+import FormSplit from "@/components/form/Split.vue";
+import XModalWindow from "@/components/ModalWindow.vue";
 import * as os from "@/os";
 import { defaultStore } from "@/store";
 import { i18n } from "@/i18n";
diff --git a/packages/client/src/components/MkUsersTooltip.vue b/packages/client/src/components/UsersTooltip.vue
similarity index 82%
rename from packages/client/src/components/MkUsersTooltip.vue
rename to packages/client/src/components/UsersTooltip.vue
index 78a4f90f2..b7389be15 100644
--- a/packages/client/src/components/MkUsersTooltip.vue
+++ b/packages/client/src/components/UsersTooltip.vue
@@ -1,5 +1,5 @@
 <template>
-	<MkTooltip
+	<Tooltip
 		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">
-				<MkAvatar class="avatar" :user="u" disableLink />
-				<MkUserName class="name" :user="u" :nowrap="true" />
+				<Avatar class="avatar" :user="u" disableLink />
+				<UserName class="name" :user="u" :nowrap="true" />
 			</div>
 			<div v-if="users.length < count" class="omitted">
 				+{{ count - users.length }}
 			</div>
 		</div>
-	</MkTooltip>
+	</Tooltip>
 </template>
 
 <script lang="ts" setup>
 import {} from "vue";
-import MkTooltip from "./MkTooltip.vue";
+import Tooltip from "./Tooltip.vue";
 
 const props = defineProps<{
 	users: any[]; // TODO
diff --git a/packages/client/src/components/MkVisibility.vue b/packages/client/src/components/Visibility.vue
similarity index 96%
rename from packages/client/src/components/MkVisibility.vue
rename to packages/client/src/components/Visibility.vue
index 3b22d5d08..ad73fbe80 100644
--- a/packages/client/src/components/MkVisibility.vue
+++ b/packages/client/src/components/Visibility.vue
@@ -26,7 +26,7 @@
 
 <script lang="ts" setup>
 import { ref } from "vue";
-import XDetails from "@/components/MkUsersTooltip.vue";
+import XDetails from "@/components/UsersTooltip.vue";
 import * as os from "@/os";
 import { useTooltip } from "@/scripts/use-tooltip";
 import { i18n } from "@/i18n";
diff --git a/packages/client/src/components/MkVisibilityPicker.vue b/packages/client/src/components/VisibilityPicker.vue
similarity index 95%
rename from packages/client/src/components/MkVisibilityPicker.vue
rename to packages/client/src/components/VisibilityPicker.vue
index 502635849..5f0829a0a 100644
--- a/packages/client/src/components/MkVisibilityPicker.vue
+++ b/packages/client/src/components/VisibilityPicker.vue
@@ -1,5 +1,5 @@
 <template>
-	<MkModal
+	<Modal
 		ref="modal"
 		v-slot="{ type }"
 		:z-priority="'high'"
@@ -7,9 +7,13 @@
 		@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"
@@ -121,16 +125,16 @@
 				</div>
 			</button>
 		</div>
-	</MkModal>
+	</Modal>
 </template>
 
 <script lang="ts" setup>
 import { nextTick, watch } from "vue";
 import * as misskey from "iceshrimp-js";
-import MkModal from "@/components/MkModal.vue";
+import Modal from "@/components/Modal.vue";
 import { i18n } from "@/i18n";
 
-const modal = $shallowRef<InstanceType<typeof MkModal>>();
+const modal = $shallowRef<InstanceType<typeof Modal>>();
 
 const props = withDefaults(
 	defineProps<{
@@ -170,20 +174,24 @@ 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/MkWaitingDialog.vue b/packages/client/src/components/WaitingDialog.vue
similarity index 83%
rename from packages/client/src/components/MkWaitingDialog.vue
rename to packages/client/src/components/WaitingDialog.vue
index cc9784d8d..58f2c471d 100644
--- a/packages/client/src/components/MkWaitingDialog.vue
+++ b/packages/client/src/components/WaitingDialog.vue
@@ -1,5 +1,5 @@
 <template>
-	<MkModal
+	<Modal
 		ref="modal"
 		:prefer-type="'dialog'"
 		:z-priority="'high'"
@@ -17,23 +17,20 @@
 				:class="[$style.icon, $style.success]"
 				class="ph-check ph-bold ph-lg"
 			></i>
-			<MkLoading
-				v-else
-				:class="[$style.icon, $style.waiting]"
-				:em="true"
-			/>
+			<Loading v-else :class="[$style.icon, $style.waiting]" :em="true" />
 			<div v-if="text && !success" :class="$style.text">
-				{{ text }}<MkEllipsis />
+				{{ text }}
+				<Ellipsis />
 			</div>
 		</div>
-	</MkModal>
+	</Modal>
 </template>
 
 <script lang="ts" setup>
 import { watch, shallowRef } from "vue";
-import MkModal from "@/components/MkModal.vue";
+import Modal from "@/components/Modal.vue";
 
-const modal = shallowRef<InstanceType<typeof MkModal>>();
+const modal = shallowRef<InstanceType<typeof Modal>>();
 
 const props = defineProps<{
 	success: boolean;
diff --git a/packages/client/src/components/MkGoogle.vue b/packages/client/src/components/WebSearch.vue
similarity index 90%
rename from packages/client/src/components/MkGoogle.vue
rename to packages/client/src/components/WebSearch.vue
index 8d7388e84..32ac5318a 100644
--- a/packages/client/src/components/MkGoogle.vue
+++ b/packages/client/src/components/WebSearch.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,10 +20,7 @@ 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/MkWidgets.vue b/packages/client/src/components/Widgets.vue
similarity index 92%
rename from packages/client/src/components/MkWidgets.vue
rename to packages/client/src/components/Widgets.vue
index f6241512f..ffa017ed2 100644
--- a/packages/client/src/components/MkWidgets.vue
+++ b/packages/client/src/components/Widgets.vue
@@ -2,7 +2,7 @@
 	<div class="vjoppmmu">
 		<template v-if="edit">
 			<header tabindex="-1" v-focus>
-				<MkSelect
+				<Select
 					v-model="widgetAdderSelected"
 					style="margin-bottom: var(--margin)"
 					class="mk-widget-select"
@@ -15,18 +15,14 @@
 					>
 						{{ i18n.t(`_widgets.${widget}`) }}
 					</option>
-				</MkSelect>
-				<MkButton
-					inline
-					primary
-					class="mk-widget-add"
-					@click="addWidget"
+				</Select>
+				<Button inline primary class="mk-widget-add" @click="addWidget"
 					><i class="ph-plus ph-bold ph-lg"></i>
-					{{ i18n.ts.add }}</MkButton
+					{{ i18n.ts.add }}</Button
 				>
-				<MkButton inline @click="$emit('exit')">{{
+				<Button inline @click="$emit('exit')">{{
 					i18n.ts.close
-				}}</MkButton>
+				}}</Button>
 			</header>
 			<VueDraggable v-model="widgets_" handle=".handle" animation="150">
 				<div v-for="element in widgets_" :key="element.id">
@@ -58,7 +54,7 @@
 			</VueDraggable>
 		</template>
 		<component
-			:is="`mkw-${widget.name}`"
+			:is="`w-${widget.name}`"
 			v-for="widget in widgets"
 			v-else
 			:key="widget.id"
@@ -75,8 +71,8 @@
 import { defineAsyncComponent, reactive, ref, computed } from "vue";
 import { v4 as uuid } from "uuid";
 import { VueDraggable } from "vue-draggable-plus";
-import MkSelect from "@/components/form/select.vue";
-import MkButton from "@/components/MkButton.vue";
+import Select from "@/components/form/Select.vue";
+import Button from "@/components/Button.vue";
 import { widgets as widgetDefs } from "@/widgets";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
@@ -170,6 +166,7 @@ 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/MkWindow.vue b/packages/client/src/components/Window.vue
similarity index 100%
rename from packages/client/src/components/MkWindow.vue
rename to packages/client/src/components/Window.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 a4d9716bb..be7b62c6e 100644
--- a/packages/client/src/components/form/checkbox.vue
+++ b/packages/client/src/components/form/CheckBox.vue
@@ -17,8 +17,13 @@
 		</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>
@@ -26,7 +31,7 @@
 <script lang="ts" setup>
 import { toRefs, Ref } from "vue";
 import * as os from "@/os";
-import Ripple from "@/components/MkRipple.vue";
+import Ripple from "@/components/Ripple.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 fb0b081ad..c609b461f 100644
--- a/packages/client/src/components/form/folder.vue
+++ b/packages/client/src/components/form/Folder.vue
@@ -1,18 +1,24 @@
 <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">
-			<MkSpacer :margin-min="14" :margin-max="22">
+			<Spacer :margin-min="14" :margin-max="22">
 				<slot></slot>
-			</MkSpacer>
+			</Spacer>
 		</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 f54e25fdc..585553847 100644
--- a/packages/client/src/components/form/input.vue
+++ b/packages/client/src/components/form/Input.vue
@@ -1,7 +1,9 @@
 <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>
@@ -32,15 +34,17 @@
 					<slot name="suffix"></slot>
 				</div>
 			</div>
-			<div class="caption"><slot name="caption"></slot></div>
+			<div class="caption">
+				<slot name="caption"></slot>
+			</div>
 		</label>
 
-		<MkButton
+		<Button
 			v-if="manualSave && changed"
 			primary
 			class="save"
 			@click="updated"
-			><i class="ph-check ph-bold ph-lg"></i> {{ i18n.ts.save }}</MkButton
+			><i class="ph-check ph-bold ph-lg"></i> {{ i18n.ts.save }}</Button
 		>
 	</div>
 </template>
@@ -56,7 +60,7 @@ import {
 	watch,
 } from "vue";
 import { debounce } from "throttle-debounce";
-import MkButton from "@/components/MkButton.vue";
+import Button from "@/components/Button.vue";
 import { useInterval } from "@/scripts/use-interval";
 import { i18n } from "@/i18n";
 
@@ -261,6 +265,7 @@ 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 01acb2951..dd0e6e67f 100644
--- a/packages/client/src/components/form/link.vue
+++ b/packages/client/src/components/form/Link.vue
@@ -1,27 +1,39 @@
 <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>
-		<MkA
+		<A
 			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>
-		</MkA>
+		</A>
 	</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 849ad4c9f..04dfb9db6 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 MkRadio from "./radio.vue";
+import Radio from "./Radio.vue";
 
 export default defineComponent({
 	components: {
-		MkRadio,
+		Radio,
 	},
 	props: {
 		modelValue: {
@@ -54,7 +54,7 @@ export default defineComponent({
 					},
 					options.map((option) =>
 						h(
-							MkRadio,
+							Radio,
 							{
 								key: option.key,
 								value: option.props?.value,
@@ -88,6 +88,7 @@ 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 38ebe29e3..3f56a02df 100644
--- a/packages/client/src/components/form/range.vue
+++ b/packages/client/src/components/form/Range.vue
@@ -1,6 +1,8 @@
 <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
@@ -30,7 +32,9 @@
 				</datalist>
 			</div>
 		</div>
-		<div class="caption"><slot name="caption"></slot></div>
+		<div class="caption">
+			<slot name="caption"></slot>
+		</div>
 	</label>
 </template>
 
@@ -81,7 +85,7 @@ const tooltipShowing = ref(false);
 function tooltipShow() {
 	tooltipShowing.value = true;
 	os.popup(
-		defineAsyncComponent(() => import("@/components/MkTooltip.vue")),
+		defineAsyncComponent(() => import("@/components/Tooltip.vue")),
 		{
 			showing: tooltipShowing,
 			text: computed(() => {
@@ -157,6 +161,7 @@ function tooltipHide() {
 					background: var(--accentLighten);
 				}
 			}
+
 			> input {
 				width: 100%;
 				background: none;
@@ -164,9 +169,11 @@ function tooltipHide() {
 				&::-webkit-slider-runnable-track {
 					@include track;
 				}
+
 				&::-moz-range-track {
 					@include track;
 				}
+
 				&::-ms-track {
 					@include track;
 				}
@@ -174,6 +181,7 @@ function tooltipHide() {
 				&::-moz-range-progress {
 					@include fill;
 				}
+
 				&::-ms-fill-lower {
 					@include fill;
 				}
@@ -182,9 +190,11 @@ 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 08f0e47df..aa8ee03da 100644
--- a/packages/client/src/components/form/select.vue
+++ b/packages/client/src/components/form/Select.vue
@@ -1,13 +1,17 @@
 <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"
@@ -33,11 +37,13 @@
 				></i>
 			</div>
 		</div>
-		<div class="caption"><slot name="caption"></slot></div>
+		<div class="caption">
+			<slot name="caption"></slot>
+		</div>
 
-		<MkButton v-if="manualSave && changed" primary @click="updated"
+		<Button v-if="manualSave && changed" primary @click="updated"
 			><i class="ph-floppy-disk-back ph-bold ph-lg"></i>
-			{{ i18n.ts.save }}</MkButton
+			{{ i18n.ts.save }}</Button
 		>
 	</div>
 </template>
@@ -53,7 +59,7 @@ import {
 	useSlots,
 	watch,
 } from "vue";
-import MkButton from "@/components/MkButton.vue";
+import Button from "@/components/Button.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 2b06bcbbb..626bfb1fd 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">
-			<MkLoading />
+			<Loading />
 		</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>
-				<MkButton inline class="retry" @click="retry"
+				<Button inline class="retry" @click="retry"
 					><i class="ph-arrow-clockwise ph-bold ph-lg"></i>
-					{{ i18n.ts.retry }}</MkButton
+					{{ i18n.ts.retry }}</Button
 				>
 			</div>
 		</div>
@@ -24,12 +24,12 @@
 <script lang="ts">
 import type { PropType } from "vue";
 import { defineComponent, ref, watch } from "vue";
-import MkButton from "@/components/MkButton.vue";
+import Button from "@/components/Button.vue";
 import { i18n } from "@/i18n";
 
 export default defineComponent({
 	components: {
-		MkButton,
+		Button,
 	},
 
 	props: {
@@ -95,6 +95,7 @@ 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 9ea38670c..c9d888005 100644
--- a/packages/client/src/components/form/textarea.vue
+++ b/packages/client/src/components/form/Textarea.vue
@@ -23,16 +23,18 @@
 					@input="onInput"
 				></textarea>
 			</div>
-			<div class="caption"><slot name="caption"></slot></div>
+			<div class="caption">
+				<slot name="caption"></slot>
+			</div>
 		</label>
 
-		<MkButton
+		<Button
 			v-if="manualSave && changed"
 			primary
 			class="save"
 			@click="updated"
 			><i class="ph-floppy-disk-back ph-bold ph-lg"></i>
-			{{ i18n.ts.save }}</MkButton
+			{{ i18n.ts.save }}</Button
 		>
 	</div>
 </template>
@@ -49,12 +51,12 @@ import {
 	watch,
 } from "vue";
 import { debounce } from "throttle-debounce";
-import MkButton from "@/components/MkButton.vue";
+import Button from "@/components/Button.vue";
 import { i18n } from "@/i18n";
 
 export default defineComponent({
 	components: {
-		MkButton,
+		Button,
 	},
 
 	props: {
@@ -201,10 +203,12 @@ 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;
@@ -214,6 +218,7 @@ export default defineComponent({
 				display: none;
 			}
 		}
+
 		> .input {
 			position: relative;
 
diff --git a/packages/client/src/components/global/MkAcct.vue b/packages/client/src/components/global/Acct.vue
similarity index 100%
rename from packages/client/src/components/global/MkAcct.vue
rename to packages/client/src/components/global/Acct.vue
diff --git a/packages/client/src/components/global/MkA.vue b/packages/client/src/components/global/Anchor.vue
similarity index 100%
rename from packages/client/src/components/global/MkA.vue
rename to packages/client/src/components/global/Anchor.vue
diff --git a/packages/client/src/components/global/MkAvatar.vue b/packages/client/src/components/global/Avatar.vue
similarity index 96%
rename from packages/client/src/components/global/MkAvatar.vue
rename to packages/client/src/components/global/Avatar.vue
index 8d6941670..094a690a3 100644
--- a/packages/client/src/components/global/MkAvatar.vue
+++ b/packages/client/src/components/global/Avatar.vue
@@ -9,13 +9,13 @@
 		@click="onClick"
 	>
 		<img class="inner" :src="url" decoding="async" />
-		<MkUserOnlineIndicator
+		<UserOnlineIndicator
 			v-if="showIndicator && user.instance == null"
 			class="indicator"
 			:user="user"
 		/>
 	</span>
-	<MkA
+	<A
 		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" />
-		<MkUserOnlineIndicator
+		<UserOnlineIndicator
 			v-if="showIndicator && user.instance == null"
 			class="indicator"
 			:user="user"
 		/>
-	</MkA>
+	</A>
 </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 MkUserOnlineIndicator from "@/components/MkUserOnlineIndicator.vue";
+import UserOnlineIndicator from "@/components/UserOnlineIndicator.vue";
 import { defaultStore } from "@/store";
 
 const props = withDefaults(
@@ -92,15 +92,19 @@ 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);
 	}
@@ -110,15 +114,19 @@ 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/MkEllipsis.vue b/packages/client/src/components/global/Ellipsis.vue
similarity index 100%
rename from packages/client/src/components/global/MkEllipsis.vue
rename to packages/client/src/components/global/Ellipsis.vue
diff --git a/packages/client/src/components/global/MkEmoji.vue b/packages/client/src/components/global/Emoji.vue
similarity index 100%
rename from packages/client/src/components/global/MkEmoji.vue
rename to packages/client/src/components/global/Emoji.vue
diff --git a/packages/client/src/components/global/MkError.vue b/packages/client/src/components/global/Error.vue
similarity index 74%
rename from packages/client/src/components/global/MkError.vue
rename to packages/client/src/components/global/Error.vue
index 77745d017..f76564ccf 100644
--- a/packages/client/src/components/global/MkError.vue
+++ b/packages/client/src/components/global/Error.vue
@@ -1,24 +1,20 @@
 <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>
-			<MkButton class="button" @click="() => $emit('retry')">{{
+			<Button class="button" @click="() => $emit('retry')">{{
 				i18n.ts.retry
-			}}</MkButton>
+			}}</Button>
 		</div>
 	</transition>
 </template>
 
 <script lang="ts" setup>
-import MkButton from "@/components/MkButton.vue";
+import Button from "@/components/Button.vue";
 import { i18n } from "@/i18n";
 import { instance } from "@/instance";
 </script>
diff --git a/packages/client/src/components/global/MkLoading.vue b/packages/client/src/components/global/Loading.vue
similarity index 100%
rename from packages/client/src/components/global/MkLoading.vue
rename to packages/client/src/components/global/Loading.vue
diff --git a/packages/client/src/components/global/MkMisskeyFlavoredMarkdown.vue b/packages/client/src/components/global/MisskeyFlavoredMarkdown.vue
similarity index 100%
rename from packages/client/src/components/global/MkMisskeyFlavoredMarkdown.vue
rename to packages/client/src/components/global/MisskeyFlavoredMarkdown.vue
diff --git a/packages/client/src/components/global/MkPageHeader.vue b/packages/client/src/components/global/PageHeader.vue
similarity index 98%
rename from packages/client/src/components/global/MkPageHeader.vue
rename to packages/client/src/components/global/PageHeader.vue
index d1165d27a..2b8261d7f 100644
--- a/packages/client/src/components/global/MkPageHeader.vue
+++ b/packages/client/src/components/global/PageHeader.vue
@@ -18,7 +18,7 @@
 				>
 					<i class="ph-caret-left ph-bold ph-lg"></i>
 				</button>
-				<MkAvatar
+				<Avatar
 					v-if="narrow && props.displayMyAvatar && $i"
 					class="avatar button"
 					:user="$i"
@@ -32,7 +32,7 @@
 				class="titleContainer"
 				@click="showTabsPopup"
 			>
-				<MkAvatar
+				<Avatar
 					v-if="metadata && metadata.avatar"
 					class="avatar"
 					:user="metadata.avatar"
@@ -45,7 +45,7 @@
 				></i>
 
 				<div class="title">
-					<MkUserName
+					<UserName
 						v-if="metadata.userName"
 						:user="metadata.userName"
 						:nowrap="true"
@@ -103,18 +103,18 @@
 				</button>
 			</template>
 			<template v-if="metadata && metadata.avatar">
-				<MkFollowButton
+				<FollowButton
 					v-if="narrow"
 					:user="metadata.avatar"
 					:full="false"
 					class="fullButton"
-				></MkFollowButton>
-				<MkFollowButton
+				></FollowButton>
+				<FollowButton
 					v-else
 					:user="metadata.avatar"
 					:full="true"
 					class="fullButton"
-				></MkFollowButton>
+				></FollowButton>
 			</template>
 		</div>
 	</header>
@@ -132,7 +132,7 @@ import {
 	shallowReactive,
 	watch,
 } from "vue";
-import MkFollowButton from "@/components/MkFollowButton.vue";
+import FollowButton from "@/components/FollowButton.vue";
 import { popupMenu } from "@/os";
 import { scrollToTop } from "@/scripts/scroll";
 import { globalEvents } from "@/events";
@@ -309,21 +309,26 @@ 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;
@@ -331,6 +336,7 @@ onUnmounted(() => {
 				max-width: unset !important;
 			}
 		}
+
 		&.tabs {
 			> .left {
 				flex-shrink: 0 !important;
@@ -349,6 +355,7 @@ onUnmounted(() => {
 		border-bottom: solid 0.5px var(--divider);
 		z-index: -1;
 	}
+
 	&::after {
 		content: "";
 		position: absolute;
@@ -369,11 +376,13 @@ onUnmounted(() => {
 
 	> .left {
 		display: flex;
+
 		> .buttons {
 			&:not(:empty) {
 				margin-right: 8px;
 				margin-left: calc(0px - var(--margin));
 			}
+
 			> .avatar {
 				width: 32px;
 				height: 32px;
@@ -387,9 +396,11 @@ 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 {
@@ -410,6 +421,7 @@ onUnmounted(() => {
 			align-items: center;
 			justify-content: center;
 		}
+
 		> .titleContainer {
 			display: flex;
 			align-items: center;
@@ -419,6 +431,7 @@ onUnmounted(() => {
 			text-align: left;
 			font-weight: bold;
 			flex-shrink: 0;
+
 			> .avatar {
 				$size: 32px;
 				display: inline-block;
@@ -469,11 +482,13 @@ onUnmounted(() => {
 		flex-shrink: 9999;
 		overflow: hidden;
 	}
+
 	> .left {
 		min-width: 20%;
 		margin-left: -10px;
 		padding-left: 10px;
 	}
+
 	> .right {
 		// margin-left: auto;
 		min-width: max-content;
@@ -503,21 +518,25 @@ 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;
 		}
@@ -554,10 +573,12 @@ onUnmounted(() => {
 			> .icon + .title {
 				margin-left: 8px;
 			}
+
 			> .title {
 				transition: opacity 0.2s;
 			}
 		}
+
 		> .highlight {
 			position: absolute;
 			bottom: 0;
diff --git a/packages/client/src/components/global/RouterView.vue b/packages/client/src/components/global/RouterView.vue
index 2073c3a55..7aeb9f080 100644
--- a/packages/client/src/components/global/RouterView.vue
+++ b/packages/client/src/components/global/RouterView.vue
@@ -11,7 +11,7 @@
 			/>
 
 			<template #fallback>
-				<MkLoading />
+				<Loading />
 			</template>
 		</Suspense>
 	</KeepAlive>
diff --git a/packages/client/src/components/global/MkSpacer.vue b/packages/client/src/components/global/Spacer.vue
similarity index 100%
rename from packages/client/src/components/global/MkSpacer.vue
rename to packages/client/src/components/global/Spacer.vue
diff --git a/packages/client/src/components/global/MkStickyContainer.vue b/packages/client/src/components/global/StickyContainer.vue
similarity index 100%
rename from packages/client/src/components/global/MkStickyContainer.vue
rename to packages/client/src/components/global/StickyContainer.vue
diff --git a/packages/client/src/components/global/MkTime.vue b/packages/client/src/components/global/Time.vue
similarity index 100%
rename from packages/client/src/components/global/MkTime.vue
rename to packages/client/src/components/global/Time.vue
diff --git a/packages/client/src/components/global/MkUrl.vue b/packages/client/src/components/global/Url.vue
similarity index 95%
rename from packages/client/src/components/global/MkUrl.vue
rename to packages/client/src/components/global/Url.vue
index 41bb05392..bf7eb9aee 100644
--- a/packages/client/src/components/global/MkUrl.vue
+++ b/packages/client/src/components/global/Url.vue
@@ -1,6 +1,6 @@
 <template>
 	<component
-		:is="self ? 'MkA' : 'a'"
+		:is="self ? 'A' : 'a'"
 		ref="el"
 		class="ieqqeuvs url _link"
 		:[attr]="self ? props.url.substring(local.length) : props.url"
@@ -50,9 +50,7 @@ const el = ref();
 
 useTooltip(el, (showing) => {
 	os.popup(
-		defineAsyncComponent(
-			() => import("@/components/MkUrlPreviewPopup.vue"),
-		),
+		defineAsyncComponent(() => import("@/components/UrlPreviewPopup.vue")),
 		{
 			showing,
 			url: props.url,
@@ -76,6 +74,7 @@ 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/MkUserName.vue b/packages/client/src/components/global/UserName.vue
similarity index 100%
rename from packages/client/src/components/global/MkUserName.vue
rename to packages/client/src/components/global/UserName.vue
diff --git a/packages/client/src/components/index.ts b/packages/client/src/components/index.ts
index 832426c6b..65e0d47e1 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/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 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 I18n from "./global/i18n";
 import RouterView from "./global/RouterView.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";
+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";
 
 export default function (app: App) {
 	app.component("I18n", I18n);
 	app.component("RouterView", RouterView);
 	app.component("Mfm", Mfm);
-	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);
+	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);
 }
 
 declare module "@vue/runtime-core" {
@@ -41,18 +41,18 @@ declare module "@vue/runtime-core" {
 		I18n: typeof I18n;
 		RouterView: typeof RouterView;
 		Mfm: typeof Mfm;
-		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;
+		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;
 	}
 }
diff --git a/packages/client/src/components/mfm.ts b/packages/client/src/components/mfm.ts
index cb0942a33..95573fd5a 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 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 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 { concat } from "@/scripts/array";
-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 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 { 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(MkSparkle, {}, genEl(token.children));
+									return h(Sparkle, {}, genEl(token.children));
 								}
 								case "fade": {
 									const direction = token.props.args.out
@@ -364,7 +364,7 @@ export default defineComponent({
 
 						case "url": {
 							return [
-								h(MkUrl, {
+								h(Url, {
 									key: Math.random(),
 									url: token.props.url,
 									rel: "nofollow noopener",
@@ -375,7 +375,7 @@ export default defineComponent({
 						case "link": {
 							return [
 								h(
-									MkLink,
+									Link,
 									{
 										key: Math.random(),
 										url: token.props.url,
@@ -388,7 +388,7 @@ export default defineComponent({
 
 						case "mention": {
 							return [
-								h(MkMention, {
+								h(Mention, {
 									key: Math.random(),
 									host:
 										(token.props.host == null &&
@@ -404,7 +404,7 @@ export default defineComponent({
 						case "hashtag": {
 							return [
 								h(
-									MkA,
+									A,
 									{
 										key: Math.random(),
 										to: `/tags/${encodeURIComponent(token.props.hashtag)}`,
@@ -417,7 +417,7 @@ export default defineComponent({
 
 						case "blockCode": {
 							return [
-								h(MkCode, {
+								h(Code, {
 									key: Math.random(),
 									code: token.props.code,
 									lang: token.props.lang,
@@ -427,7 +427,7 @@ export default defineComponent({
 
 						case "inlineCode": {
 							return [
-								h(MkCode, {
+								h(Code, {
 									key: Math.random(),
 									code: token.props.code,
 									inline: true,
@@ -453,7 +453,7 @@ export default defineComponent({
 
 						case "emojiCode": {
 							return [
-								h(MkEmoji, {
+								h(Emoji, {
 									key: Math.random(),
 									emoji: `:${token.props.name}:`,
 									customEmojis: this.customEmojis,
@@ -464,7 +464,7 @@ export default defineComponent({
 
 						case "unicodeEmoji": {
 							return [
-								h(MkEmoji, {
+								h(Emoji, {
 									key: Math.random(),
 									emoji: token.props.emoji,
 									customEmojis: this.customEmojis,
@@ -475,7 +475,7 @@ export default defineComponent({
 
 						case "mathInline": {
 							return [
-								h(MkFormula, {
+								h(Formula, {
 									key: Math.random(),
 									formula: token.props.formula,
 									block: false,
@@ -485,7 +485,7 @@ export default defineComponent({
 
 						case "mathBlock": {
 							return [
-								h(MkFormula, {
+								h(Formula, {
 									key: Math.random(),
 									formula: token.props.formula,
 									block: true,
@@ -537,7 +537,7 @@ export default defineComponent({
 							}
 
 							return [
-								h(MkGoogle, {
+								h(WebSearch, {
 									key: Math.random(),
 									q: token.props.query,
 								}),
diff --git a/packages/client/src/components/page/page.block.vue b/packages/client/src/components/page/Block.vue
similarity index 53%
rename from packages/client/src/components/page/page.block.vue
rename to packages/client/src/components/page/Block.vue
index edeb33a14..bce93c972 100644
--- a/packages/client/src/components/page/page.block.vue
+++ b/packages/client/src/components/page/Block.vue
@@ -10,21 +10,21 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from "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 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 { Hpml } from "@/scripts/hpml/evaluator";
 import { Block } from "@/scripts/hpml/block";
 
diff --git a/packages/client/src/components/page/page.button.vue b/packages/client/src/components/page/Button.vue
similarity index 90%
rename from packages/client/src/components/page/page.button.vue
rename to packages/client/src/components/page/Button.vue
index b3c42eb60..8a5f5fbc9 100644
--- a/packages/client/src/components/page/page.button.vue
+++ b/packages/client/src/components/page/Button.vue
@@ -1,21 +1,21 @@
 <template>
 	<div>
-		<MkButton class="kudkigyw" :primary="block.primary" @click="click()">{{
+		<Button class="kudkigyw" :primary="block.primary" @click="click()">{{
 			hpml.interpolate(block.text)
-		}}</MkButton>
+		}}</Button>
 	</div>
 </template>
 
 <script lang="ts">
 import { defineComponent, PropType, unref } from "vue";
-import MkButton from "../MkButton.vue";
+import Button from "../Button.vue";
 import * as os from "@/os";
 import { ButtonBlock } from "@/scripts/hpml/block";
 import { Hpml } from "@/scripts/hpml/evaluator";
 
 export default defineComponent({
 	components: {
-		MkButton,
+		Button,
 	},
 	props: {
 		block: {
diff --git a/packages/client/src/components/page/page.canvas.vue b/packages/client/src/components/page/Canvas.vue
similarity index 100%
rename from packages/client/src/components/page/page.canvas.vue
rename to packages/client/src/components/page/Canvas.vue
diff --git a/packages/client/src/components/page/page.counter.vue b/packages/client/src/components/page/Counter.vue
similarity index 88%
rename from packages/client/src/components/page/page.counter.vue
rename to packages/client/src/components/page/Counter.vue
index 514790b5f..84d450870 100644
--- a/packages/client/src/components/page/page.counter.vue
+++ b/packages/client/src/components/page/Counter.vue
@@ -1,21 +1,21 @@
 <template>
 	<div>
-		<MkButton class="llumlmnx" @click="click()">{{
+		<Button class="llumlmnx" @click="click()">{{
 			hpml.interpolate(block.text)
-		}}</MkButton>
+		}}</Button>
 	</div>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, PropType } from "vue";
-import MkButton from "../MkButton.vue";
+import Button from "../Button.vue";
 import * as os from "@/os";
 import { CounterVarBlock } from "@/scripts/hpml/block";
 import { Hpml } from "@/scripts/hpml/evaluator";
 
 export default defineComponent({
 	components: {
-		MkButton,
+		Button,
 	},
 	props: {
 		block: {
diff --git a/packages/client/src/components/page/page.if.vue b/packages/client/src/components/page/If.vue
similarity index 90%
rename from packages/client/src/components/page/page.if.vue
rename to packages/client/src/components/page/If.vue
index 7cc25f212..118fc3928 100644
--- a/packages/client/src/components/page/page.if.vue
+++ b/packages/client/src/components/page/If.vue
@@ -17,7 +17,7 @@ import { defineComponent, defineAsyncComponent, PropType } from "vue";
 
 export default defineComponent({
 	components: {
-		XBlock: defineAsyncComponent(() => import("./page.block.vue")),
+		XBlock: defineAsyncComponent(() => import("./Block.vue")),
 	},
 	props: {
 		block: {
diff --git a/packages/client/src/components/page/page.image.vue b/packages/client/src/components/page/Image.vue
similarity index 91%
rename from packages/client/src/components/page/page.image.vue
rename to packages/client/src/components/page/Image.vue
index 726446030..5398f2304 100644
--- a/packages/client/src/components/page/page.image.vue
+++ b/packages/client/src/components/page/Image.vue
@@ -13,7 +13,7 @@
 
 <script lang="ts" setup>
 import { defineComponent, PropType } from "vue";
-import ImgWithBlurhash from "@/components/MkImgWithBlurhash.vue";
+import ImgWithBlurhash from "@/components/ImgWithBlurhash.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/page.note.vue b/packages/client/src/components/page/Note.vue
similarity index 89%
rename from packages/client/src/components/page/page.note.vue
rename to packages/client/src/components/page/Note.vue
index 868418cd4..c442bffe8 100644
--- a/packages/client/src/components/page/page.note.vue
+++ b/packages/client/src/components/page/Note.vue
@@ -15,8 +15,8 @@
 
 <script lang="ts">
 import { defineComponent, onMounted, PropType, Ref, ref } from "vue";
-import XNote from "@/components/MkNote.vue";
-import XNoteDetailed from "@/components/MkNoteDetailed.vue";
+import XNote from "@/components/Note.vue";
+import XNoteDetailed from "@/components/NoteDetailed.vue";
 import * as os from "@/os";
 import { NoteBlock } from "@/scripts/hpml/block";
 
diff --git a/packages/client/src/components/page/page.number-input.vue b/packages/client/src/components/page/NumberInput.vue
similarity index 93%
rename from packages/client/src/components/page/page.number-input.vue
rename to packages/client/src/components/page/NumberInput.vue
index 3426cf667..ede532ed4 100644
--- a/packages/client/src/components/page/page.number-input.vue
+++ b/packages/client/src/components/page/NumberInput.vue
@@ -1,26 +1,26 @@
 <template>
 	<div>
-		<MkInput
+		<Input
 			class="kudkigyw"
 			:model-value="value"
 			type="number"
 			@update:modelValue="updateValue($event)"
 		>
 			<template #label>{{ hpml.interpolate(block.text) }}</template>
-		</MkInput>
+		</Input>
 	</div>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, PropType } from "vue";
-import MkInput from "../form/input.vue";
+import Input 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: {
-		MkInput,
+		Input,
 	},
 	props: {
 		block: {
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 f2079c9ba..9899ca963 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 "./page.block.vue";
+import XBlock from "./Block.vue";
 import { Hpml } from "@/scripts/hpml/evaluator";
 import { url } from "@/config";
 import { $i } from "@/account";
diff --git a/packages/client/src/components/page/page.post.vue b/packages/client/src/components/page/Post.vue
similarity index 91%
rename from packages/client/src/components/page/page.post.vue
rename to packages/client/src/components/page/Post.vue
index 2213d3021..82dc0549e 100644
--- a/packages/client/src/components/page/page.post.vue
+++ b/packages/client/src/components/page/Post.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="ngbfujlo">
-		<MkTextarea :model-value="text" readonly style="margin: 0"></MkTextarea>
-		<MkButton
+		<Textarea :model-value="text" readonly style="margin: 0"></Textarea>
+		<Button
 			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>
-		</MkButton>
+		</Button>
 	</div>
 </template>
 
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
-import MkTextarea from "../form/textarea.vue";
-import MkButton from "../MkButton.vue";
+import Textarea from "../form/Textarea.vue";
+import Button from "../Button.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: {
-		MkTextarea,
-		MkButton,
+		Textarea,
+		Button,
 	},
 	props: {
 		block: {
diff --git a/packages/client/src/components/page/page.radio-button.vue b/packages/client/src/components/page/RadioButton.vue
similarity index 91%
rename from packages/client/src/components/page/page.radio-button.vue
rename to packages/client/src/components/page/RadioButton.vue
index 3d3878e4f..a76d3c860 100644
--- a/packages/client/src/components/page/page.radio-button.vue
+++ b/packages/client/src/components/page/RadioButton.vue
@@ -1,27 +1,27 @@
 <template>
 	<div>
 		<div>{{ hpml.interpolate(block.title) }}</div>
-		<MkRadio
+		<Radio
 			v-for="item in block.values"
 			:key="item"
 			:modelValue="value"
 			:value="item"
 			@update:modelValue="updateValue($event)"
-			>{{ item }}</MkRadio
+			>{{ item }}</Radio
 		>
 	</div>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, PropType } from "vue";
-import MkRadio from "../form/radio.vue";
+import Radio 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: {
-		MkRadio,
+		Radio,
 	},
 	props: {
 		block: {
diff --git a/packages/client/src/components/page/page.section.vue b/packages/client/src/components/page/Section.vue
similarity index 93%
rename from packages/client/src/components/page/page.section.vue
rename to packages/client/src/components/page/Section.vue
index 04de165f1..702656c72 100644
--- a/packages/client/src/components/page/page.section.vue
+++ b/packages/client/src/components/page/Section.vue
@@ -22,7 +22,7 @@ import { Hpml } from "@/scripts/hpml/evaluator";
 
 export default defineComponent({
 	components: {
-		XBlock: defineAsyncComponent(() => import("./page.block.vue")),
+		XBlock: defineAsyncComponent(() => import("./Block.vue")),
 	},
 	props: {
 		block: {
diff --git a/packages/client/src/components/page/page.switch.vue b/packages/client/src/components/page/Switch.vue
similarity index 83%
rename from packages/client/src/components/page/page.switch.vue
rename to packages/client/src/components/page/Switch.vue
index 7a00694e0..8b8f43ba7 100644
--- a/packages/client/src/components/page/page.switch.vue
+++ b/packages/client/src/components/page/Switch.vue
@@ -1,23 +1,21 @@
 <template>
 	<div class="hkcxmtwj">
-		<MkSwitch
-			:model-value="value"
-			@update:modelValue="updateValue($event)"
-			>{{ hpml.interpolate(block.text) }}</MkSwitch
-		>
+		<Switch :model-value="value" @update:modelValue="updateValue($event)">{{
+			hpml.interpolate(block.text)
+		}}</Switch>
 	</div>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, PropType } from "vue";
-import MkSwitch from "../form/switch.vue";
+import Switch 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: {
-		MkSwitch,
+		Switch,
 	},
 	props: {
 		block: {
diff --git a/packages/client/src/components/page/page.text.vue b/packages/client/src/components/page/Text.vue
similarity index 87%
rename from packages/client/src/components/page/page.text.vue
rename to packages/client/src/components/page/Text.vue
index 72854bf39..d0cdcf2e4 100644
--- a/packages/client/src/components/page/page.text.vue
+++ b/packages/client/src/components/page/Text.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="mrdgzndn">
 		<Mfm :key="text" :text="text" :is-note="false" :i="$i" />
-		<MkUrlPreview v-for="url in urls" :key="url" :url="url" class="url" />
+		<UrlPreview 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: {
-		MkUrlPreview: defineAsyncComponent(
-			() => import("@/components/MkUrlPreview.vue"),
+		UrlPreview: defineAsyncComponent(
+			() => import("@/components/UrlPreview.vue"),
 		),
 	},
 	props: {
@@ -57,9 +57,11 @@ 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/page.text-input.vue b/packages/client/src/components/page/TextInput.vue
similarity index 93%
rename from packages/client/src/components/page/page.text-input.vue
rename to packages/client/src/components/page/TextInput.vue
index eb76d1890..969256602 100644
--- a/packages/client/src/components/page/page.text-input.vue
+++ b/packages/client/src/components/page/TextInput.vue
@@ -1,26 +1,26 @@
 <template>
 	<div>
-		<MkInput
+		<Input
 			class="kudkigyw"
 			:model-value="value"
 			type="text"
 			@update:modelValue="updateValue($event)"
 		>
 			<template #label>{{ hpml.interpolate(block.text) }}</template>
-		</MkInput>
+		</Input>
 	</div>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, PropType } from "vue";
-import MkInput from "../form/input.vue";
+import Input 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: {
-		MkInput,
+		Input,
 	},
 	props: {
 		block: {
diff --git a/packages/client/src/components/page/page.textarea.vue b/packages/client/src/components/page/Textarea.vue
similarity index 80%
rename from packages/client/src/components/page/page.textarea.vue
rename to packages/client/src/components/page/Textarea.vue
index 323334438..4c031fcfc 100644
--- a/packages/client/src/components/page/page.textarea.vue
+++ b/packages/client/src/components/page/Textarea.vue
@@ -1,10 +1,10 @@
 <template>
-	<MkTextarea :model-value="text" readonly></MkTextarea>
+	<Textarea :model-value="text" readonly></Textarea>
 </template>
 
 <script lang="ts" setup>
 import { watch } from "vue";
-import MkTextarea from "../form/textarea.vue";
+import Textarea 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.textarea-input.vue b/packages/client/src/components/page/TextareaInput.vue
similarity index 84%
rename from packages/client/src/components/page/page.textarea-input.vue
rename to packages/client/src/components/page/TextareaInput.vue
index fab665c6d..70c7619bf 100644
--- a/packages/client/src/components/page/page.textarea-input.vue
+++ b/packages/client/src/components/page/TextareaInput.vue
@@ -1,17 +1,14 @@
 <template>
 	<div>
-		<MkTextarea
-			:model-value="value"
-			@update:modelValue="updateValue($event)"
-		>
+		<Textarea :model-value="value" @update:modelValue="updateValue($event)">
 			<template #label>{{ hpml.interpolate(block.text) }}</template>
-		</MkTextarea>
+		</Textarea>
 	</div>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, PropType } from "vue";
-import MkTextarea from "../form/textarea.vue";
+import Textarea from "../form/Textarea.vue";
 import * as os from "@/os";
 import { Hpml } from "@/scripts/hpml/evaluator";
 import { HpmlTextInput } from "@/scripts/hpml";
@@ -19,7 +16,7 @@ import { TextInputVarBlock } from "@/scripts/hpml/block";
 
 export default defineComponent({
 	components: {
-		MkTextarea,
+		Textarea,
 	},
 	props: {
 		block: {
diff --git a/packages/client/src/config.ts b/packages/client/src/config.ts
index bf882d07c..d2035a1d5 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 395f1a077..6514777ee 100644
--- a/packages/client/src/directives/ripple.ts
+++ b/packages/client/src/directives/ripple.ts
@@ -1,4 +1,4 @@
-import Ripple from "@/components/MkRipple.vue";
+import Ripple from "@/components/Ripple.vue";
 import { popup } from "@/os";
 
 export default {
diff --git a/packages/client/src/directives/tooltip.ts b/packages/client/src/directives/tooltip.ts
index e2db3fbf5..a673b3892 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/MkTooltip.vue")),
+				defineAsyncComponent(() => import("@/components/Tooltip.vue")),
 				{
 					showing,
 					text: self.text,
diff --git a/packages/client/src/directives/user-preview.ts b/packages/client/src/directives/user-preview.ts
index 90c9ba3d0..88fb81c00 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/MkUserPreview.vue")),
+			defineAsyncComponent(() => import("@/components/UserPreview.vue")),
 			{
 				showing,
 				q: this.user,
diff --git a/packages/client/src/init.ts b/packages/client/src/init.ts
index d51ddeb1d..c37bc77bb 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/MkUpdated.vue")),
+						defineAsyncComponent(() => import("@/components/Updated.vue")),
 						{},
 						{},
 						"closed",
@@ -287,7 +287,7 @@ function checkForSplash() {
 				if (unreadAnnouncements.length > 3) {
 					popup(
 						defineAsyncComponent(
-							() => import("@/components/MkManyAnnouncements.vue"),
+							() => import("@/components/ManyAnnouncements.vue"),
 						),
 						{},
 						{},
@@ -298,7 +298,7 @@ function checkForSplash() {
 						if (item.showPopup)
 							popup(
 								defineAsyncComponent(
-									() => import("@/components/MkAnnouncement.vue"),
+									() => import("@/components/Announcement.vue"),
 								),
 								{ announcement: item },
 								{},
@@ -382,13 +382,12 @@ 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 3a322c7f0..f7a96069f 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/MkTutorialDialog.vue";
+import XTutorial from "@/components/TutorialDialog.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 0e1e82b07..53a9a3406 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 MkPostFormDialog from "@/components/MkPostFormDialog.vue";
-import MkWaitingDialog from "@/components/MkWaitingDialog.vue";
-import MkToast from "@/components/MkToast.vue";
-import MkDialog from "@/components/MkDialog.vue";
+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 { MenuItem } from "@/types/menu";
 import { $i } from "@/account";
 import { i18n } from "./i18n";
@@ -77,7 +77,9 @@ 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}`, {
@@ -85,7 +87,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();
@@ -202,7 +204,7 @@ export function promiseDialog<T extends Promise<any>>(
 
 	// NOTE: dynamic importすると挙動がおかしくなる(showingの変更が伝播しない)
 	popup(
-		MkWaitingDialog,
+		WaitingDialog,
 		{
 			success: success,
 			showing: showing,
@@ -278,8 +280,8 @@ export async function popup(
 export function pageWindow(path: string) {
 	popup(
 		defineAsyncComponent({
-			loader: () => import("@/components/MkPageWindow.vue"),
-			loadingComponent: MkWaitingDialog,
+			loader: () => import("@/components/PageWindow.vue"),
+			loadingComponent: WaitingDialog,
 			delay: 1000,
 		}),
 		{
@@ -293,8 +295,8 @@ export function pageWindow(path: string) {
 export function modalPageWindow(path: string) {
 	popup(
 		defineAsyncComponent({
-			loader: () => import("@/components/MkModalPageWindow.vue"),
-			loadingComponent: MkWaitingDialog,
+			loader: () => import("@/components/ModalPageWindow.vue"),
+			loadingComponent: WaitingDialog,
 			delay: 1000,
 		}),
 		{
@@ -307,7 +309,7 @@ export function modalPageWindow(path: string) {
 
 export function toast(message: string) {
 	popup(
-		MkToast,
+		Toast,
 		{
 			message,
 		},
@@ -326,7 +328,7 @@ export function alert(props: {
 			props.text = i18n.ts.somethingHappened;
 		}
 		popup(
-			MkDialog,
+			Dialog,
 			props,
 			{
 				done: (result) => {
@@ -347,7 +349,7 @@ export function confirm(props: {
 }): Promise<{ canceled: boolean }> {
 	return new Promise((resolve, reject) => {
 		popup(
-			MkDialog,
+			Dialog,
 			{
 				...props,
 				showCancelButton: true,
@@ -370,8 +372,8 @@ export function yesno(props: {
 	return new Promise((resolve, reject) => {
 		popup(
 			defineAsyncComponent({
-				loader: () => import("@/components/MkDialog.vue"),
-				loadingComponent: MkWaitingDialog,
+				loader: () => import("@/components/Dialog.vue"),
+				loadingComponent: WaitingDialog,
 				delay: 1000,
 			}),
 			{
@@ -407,7 +409,7 @@ export function inputText(props: {
 > {
 	return new Promise((resolve, reject) => {
 		popup(
-			MkDialog,
+			Dialog,
 			{
 				title: props.title,
 				text: props.text,
@@ -445,8 +447,8 @@ export function inputParagraph(props: {
 	return new Promise((resolve, reject) => {
 		popup(
 			defineAsyncComponent({
-				loader: () => import("@/components/MkDialog.vue"),
-				loadingComponent: MkWaitingDialog,
+				loader: () => import("@/components/Dialog.vue"),
+				loadingComponent: WaitingDialog,
 				delay: 1000,
 			}),
 			{
@@ -484,8 +486,8 @@ export function inputNumber(props: {
 	return new Promise((resolve, reject) => {
 		popup(
 			defineAsyncComponent({
-				loader: () => import("@/components/MkDialog.vue"),
-				loadingComponent: MkWaitingDialog,
+				loader: () => import("@/components/Dialog.vue"),
+				loadingComponent: WaitingDialog,
 				delay: 1000,
 			}),
 			{
@@ -522,7 +524,7 @@ export function inputDate(props: {
 > {
 	return new Promise((resolve, reject) => {
 		popup(
-			MkDialog,
+			Dialog,
 			{
 				title: props.title,
 				text: props.text,
@@ -580,7 +582,7 @@ export function select<C = any>(
 > {
 	return new Promise((resolve, reject) => {
 		popup(
-			MkDialog,
+			Dialog,
 			{
 				title: props.title,
 				text: props.text,
@@ -607,7 +609,7 @@ export function success(): Promise<void> {
 			showing.value = false;
 		}, 1000);
 		popup(
-			MkWaitingDialog,
+			WaitingDialog,
 			{
 				success: true,
 				showing: showing,
@@ -624,7 +626,7 @@ export function waiting(): Promise<void> {
 	return new Promise((resolve, reject) => {
 		const showing = ref(true);
 		popup(
-			MkWaitingDialog,
+			WaitingDialog,
 			{
 				success: false,
 				showing: showing,
@@ -641,8 +643,8 @@ export function form(title, form) {
 	return new Promise((resolve, reject) => {
 		popup(
 			defineAsyncComponent({
-				loader: () => import("@/components/MkFormDialog.vue"),
-				loadingComponent: MkWaitingDialog,
+				loader: () => import("@/components/FormDialog.vue"),
+				loadingComponent: WaitingDialog,
 				delay: 1000,
 			}),
 			{ title, form },
@@ -660,8 +662,8 @@ export async function selectUser() {
 	return new Promise((resolve, reject) => {
 		popup(
 			defineAsyncComponent({
-				loader: () => import("@/components/MkUserSelectDialog.vue"),
-				loadingComponent: MkWaitingDialog,
+				loader: () => import("@/components/UserSelectDialog.vue"),
+				loadingComponent: WaitingDialog,
 				delay: 1000,
 			}),
 			{},
@@ -679,8 +681,8 @@ export async function selectLocalUser() {
 	return new Promise((resolve, reject) => {
 		popup(
 			defineAsyncComponent({
-				loader: () => import("@/components/MkUserSelectLocalDialog.vue"),
-				loadingComponent: MkWaitingDialog,
+				loader: () => import("@/components/UserSelectLocalDialog.vue"),
+				loadingComponent: WaitingDialog,
 				delay: 1000,
 			}),
 			{},
@@ -698,8 +700,8 @@ export async function selectInstance(): Promise<Misskey.entities.Instance> {
 	return new Promise((resolve, reject) => {
 		popup(
 			defineAsyncComponent({
-				loader: () => import("@/components/MkInstanceSelectDialog.vue"),
-				loadingComponent: MkWaitingDialog,
+				loader: () => import("@/components/InstanceSelectDialog.vue"),
+				loadingComponent: WaitingDialog,
 				delay: 1000,
 			}),
 			{},
@@ -717,8 +719,8 @@ export async function selectDriveFile(multiple: boolean) {
 	return new Promise((resolve, reject) => {
 		popup(
 			defineAsyncComponent({
-				loader: () => import("@/components/MkDriveSelectDialog.vue"),
-				loadingComponent: MkWaitingDialog,
+				loader: () => import("@/components/DriveSelectDialog.vue"),
+				loadingComponent: WaitingDialog,
 				delay: 1000,
 			}),
 			{
@@ -741,8 +743,8 @@ export async function selectDriveFolder(multiple: boolean) {
 	return new Promise((resolve, reject) => {
 		popup(
 			defineAsyncComponent({
-				loader: () => import("@/components/MkDriveSelectDialog.vue"),
-				loadingComponent: MkWaitingDialog,
+				loader: () => import("@/components/DriveSelectDialog.vue"),
+				loadingComponent: WaitingDialog,
 				delay: 1000,
 			}),
 			{
@@ -765,8 +767,8 @@ export async function pickEmoji(src: HTMLElement | null, opts) {
 	return new Promise((resolve, reject) => {
 		popup(
 			defineAsyncComponent({
-				loader: () => import("@/components/MkEmojiPickerDialog.vue"),
-				loadingComponent: MkWaitingDialog,
+				loader: () => import("@/components/EmojiPickerDialog.vue"),
+				loadingComponent: WaitingDialog,
 				delay: 1000,
 			}),
 			{
@@ -792,8 +794,8 @@ export async function cropImage(
 	return new Promise((resolve, reject) => {
 		popup(
 			defineAsyncComponent({
-				loader: () => import("@/components/MkCropperDialog.vue"),
-				loadingComponent: MkWaitingDialog,
+				loader: () => import("@/components/CropperDialog.vue"),
+				loadingComponent: WaitingDialog,
 				delay: 1000,
 			}),
 			{
@@ -860,8 +862,8 @@ export async function openEmojiPicker(
 
 	openingEmojiPicker = await popup(
 		defineAsyncComponent({
-			loader: () => import("@/components/MkEmojiPickerDialog.vue"),
-			loadingComponent: MkWaitingDialog,
+			loader: () => import("@/components/EmojiPickerDialog.vue"),
+			loadingComponent: WaitingDialog,
 			delay: 1000,
 		}),
 		{
@@ -898,8 +900,8 @@ export function popupMenu(
 		let dispose;
 		popup(
 			defineAsyncComponent({
-				loader: () => import("@/components/MkPopupMenu.vue"),
-				loadingComponent: MkWaitingDialog,
+				loader: () => import("@/components/PopupMenu.vue"),
+				loadingComponent: WaitingDialog,
 				delay: 1000,
 			}),
 			{
@@ -931,8 +933,8 @@ export function contextMenu(
 		let dispose;
 		popup(
 			defineAsyncComponent({
-				loader: () => import("@/components/MkContextMenu.vue"),
-				loadingComponent: MkWaitingDialog,
+				loader: () => import("@/components/ContextMenu.vue"),
+				loadingComponent: WaitingDialog,
 				delay: 1000,
 			}),
 			{
@@ -953,13 +955,13 @@ export function contextMenu(
 
 export function post(props: Record<string, any> = {}) {
 	return new Promise((resolve, reject) => {
-		// NOTE: MkPostFormDialogをdynamic importするとiOSでテキストエリアに自動フォーカスできない
-		// NOTE: ただ、dynamic importしない場合、MkPostFormDialogインスタンスが使いまわされ、
+		// NOTE: PostFormDialogをdynamic importするとiOSでテキストエリアに自動フォーカスできない
+		// NOTE: ただ、dynamic importしない場合、PostFormDialogインスタンスが使いまわされ、
 		//       Vueが渡されたコンポーネントに内部的に__propsというプロパティを生やす影響で、
 		//       複数のpost formを開いたときに場合によってはエラーになる
 		//       もちろん複数のpost formを開けること自体Misskeyサイドのバグなのだが
 		let dispose;
-		popup(MkPostFormDialog, props, {
+		popup(PostFormDialog, props, {
 			closed: () => {
 				resolve();
 				dispose();
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 0f4f3c7bc..01b13b797 100644
--- a/packages/client/src/pages/about.vue
+++ b/packages/client/src/pages/About.vue
@@ -1,12 +1,13 @@
 <template>
-	<MkStickyContainer>
-		<template #header
-			><MkPageHeader
+	<StickyContainer>
+		<template #header>
+			<PageHeader
 				v-model:tab="tab"
 				:actions="headerActions"
 				:tabs="headerTabs"
-		/></template>
-		<MkSpacer :content-max="600" :margin-min="20">
+			/>
+		</template>
+		<Spacer :content-max="600" :margin-min="20">
 			<swiper
 				:round-lengths="true"
 				:touch-angle="25"
@@ -50,18 +51,18 @@
 							</div>
 						</div>
 
-						<MkKeyValue class="_formBlock">
+						<KeyValue class="_formBlock">
 							<template #key>{{ i18n.ts.description }}</template>
-							<template #value
-								><div v-html="$instance.description"></div
-							></template>
-						</MkKeyValue>
+							<template #value>
+								<div v-html="$instance.description"></div>
+							</template>
+						</KeyValue>
 
 						<FormSection>
-							<MkKeyValue class="_formBlock" :copy="version">
+							<KeyValue class="_formBlock" :copy="version">
 								<template #key>Iceshrimp</template>
 								<template #value>{{ version }}</template>
-							</MkKeyValue>
+							</KeyValue>
 							<FormLink to="/about-iceshrimp">{{
 								i18n.ts.aboutIceshrimp
 							}}</FormLink>
@@ -69,22 +70,22 @@
 
 						<FormSection>
 							<FormSplit>
-								<MkKeyValue class="_formBlock">
+								<KeyValue class="_formBlock">
 									<template #key>{{
 										i18n.ts.administrator
 									}}</template>
 									<template #value>{{
 										$instance.maintainerName
 									}}</template>
-								</MkKeyValue>
-								<MkKeyValue class="_formBlock">
+								</KeyValue>
+								<KeyValue class="_formBlock">
 									<template #key>{{
 										i18n.ts.contact
 									}}</template>
 									<template #value>{{
 										$instance.maintainerEmail
 									}}</template>
-								</MkKeyValue>
+								</KeyValue>
 							</FormSplit>
 							<FormLink
 								v-if="$instance.tosUrl"
@@ -116,22 +117,22 @@
 									i18n.ts.statistics
 								}}</template>
 								<FormSplit>
-									<MkKeyValue class="_formBlock">
+									<KeyValue class="_formBlock">
 										<template #key>{{
 											i18n.ts.users
 										}}</template>
 										<template #value>{{
 											number(stats.originalUsersCount)
 										}}</template>
-									</MkKeyValue>
-									<MkKeyValue class="_formBlock">
+									</KeyValue>
+									<KeyValue class="_formBlock">
 										<template #key>{{
 											i18n.ts.notes
 										}}</template>
 										<template #value>{{
 											number(stats.originalNotesCount)
 										}}</template>
-									</MkKeyValue>
+									</KeyValue>
 								</FormSplit>
 							</FormSection>
 						</FormSuspense>
@@ -166,29 +167,29 @@
 					<XEmojis />
 				</swiper-slide>
 				<swiper-slide>
-					<MkInstanceStats :chart-limit="500" :detailed="true" />
+					<InstanceStats :chart-limit="500" :detailed="true" />
 				</swiper-slide>
 				<swiper-slide>
 					<XFederation />
 				</swiper-slide>
 			</swiper>
-		</MkSpacer>
-	</MkStickyContainer>
+		</Spacer>
+	</StickyContainer>
 </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 "./about.emojis.vue";
-import XFederation from "./about.federation.vue";
+import XEmojis from "./AboutEmojis.vue";
+import XFederation from "./AboutFederation.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 MkKeyValue from "@/components/MkKeyValue.vue";
-import MkInstanceStats from "@/components/MkInstanceStats.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 KeyValue from "@/components/KeyValue.vue";
+import InstanceStats from "@/components/InstanceStats.vue";
 import * as os from "@/os";
 import number from "@/filters/number";
 import { i18n } from "@/i18n";
@@ -314,33 +315,43 @@ 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);
 	}
@@ -350,33 +361,43 @@ 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);
 	}
@@ -386,33 +407,43 @@ 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);
 	}
@@ -422,6 +453,7 @@ function syncSlide(index) {
 	0% {
 		transform: perspective(128px) rotateY(0deg);
 	}
+
 	100% {
 		transform: perspective(128px) rotateY(360deg);
 	}
diff --git a/packages/client/src/pages/about.emojis.vue b/packages/client/src/pages/AboutEmojis.vue
similarity index 85%
rename from packages/client/src/pages/about.emojis.vue
rename to packages/client/src/pages/AboutEmojis.vue
index 853a2bef2..d8f45f3b8 100644
--- a/packages/client/src/pages/about.emojis.vue
+++ b/packages/client/src/pages/AboutEmojis.vue
@@ -1,11 +1,11 @@
 <template>
 	<div class="driuhtrh">
 		<div class="query">
-			<MkInput v-model="q" class="" :placeholder="i18n.ts.search">
+			<Input v-model="q" class="" :placeholder="i18n.ts.search">
 				<template #prefix
 					><i class="ph-magnifying-glass ph-bold ph-lg"></i
 				></template>
-			</MkInput>
+			</Input>
 
 			<!-- たくさんあると邪魔
 		<div class="tags">
@@ -14,7 +14,7 @@
 		-->
 		</div>
 
-		<MkFolder v-if="searchEmojis" class="emojis">
+		<Folder v-if="searchEmojis" class="emojis">
 			<template #header>{{ i18n.ts.searchResult }}</template>
 			<div class="zuvgdzyt">
 				<XEmoji
@@ -24,9 +24,9 @@
 					:emoji="emoji"
 				/>
 			</div>
-		</MkFolder>
+		</Folder>
 
-		<MkFolder
+		<Folder
 			v-for="category in customEmojiCategories"
 			:key="category"
 			class="emojis"
@@ -42,29 +42,29 @@
 					:emoji="emoji"
 				/>
 			</div>
-		</MkFolder>
+		</Folder>
 	</div>
 </template>
 
 <script lang="ts">
 import { defineComponent, computed } from "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 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 * as os from "@/os";
 import { emojiCategories, emojiTags } from "@/instance";
 import { i18n } from "@/i18n";
 
 export default defineComponent({
 	components: {
-		MkButton,
-		MkInput,
-		MkSelect,
-		MkFolder,
-		MkTab,
+		Button,
+		Input,
+		Select,
+		Folder,
+		Tab,
 		XEmoji,
 	},
 
diff --git a/packages/client/src/pages/about.federation.vue b/packages/client/src/pages/AboutFederation.vue
similarity index 88%
rename from packages/client/src/pages/about.federation.vue
rename to packages/client/src/pages/AboutFederation.vue
index b22b7d203..5286e5c0b 100644
--- a/packages/client/src/pages/about.federation.vue
+++ b/packages/client/src/pages/AboutFederation.vue
@@ -1,14 +1,14 @@
 <template>
 	<div class="taeiyria">
 		<div class="query">
-			<MkInput v-model="host" :debounce="true" class="">
+			<Input 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>
-			</MkInput>
+			</Input>
 			<FormSplit style="margin-top: var(--margin)">
-				<MkSelect v-model="state">
+				<Select 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>
-				</MkSelect>
-				<MkSelect v-model="sort">
+				</Select>
+				<Select 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>
-				</MkSelect>
+				</Select>
 			</FormSplit>
 		</div>
 
-		<MkPagination
+		<Pagination
 			v-slot="{ items }"
 			ref="instances"
 			:key="host + state"
 			:pagination="pagination"
 		>
 			<div class="dqokceoi">
-				<MkA
+				<A
 					v-for="instance in items"
 					:key="instance.id"
 					v-tooltip.mfm="
@@ -97,20 +97,20 @@
 					class="instance"
 					:to="`/instance-info/${instance.host}`"
 				>
-					<MkInstanceCardMini :instance="instance" />
-				</MkA>
+					<InstanceCardMini :instance="instance" />
+				</A>
 			</div>
-		</MkPagination>
+		</Pagination>
 	</div>
 </template>
 
 <script lang="ts" setup>
 import { computed } from "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 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 { i18n } from "@/i18n";
 
 let host = $ref("");
diff --git a/packages/client/src/pages/about-iceshrimp.vue b/packages/client/src/pages/AboutIceshrimp.vue
similarity index 82%
rename from packages/client/src/pages/about-iceshrimp.vue
rename to packages/client/src/pages/AboutIceshrimp.vue
index cb84d7919..dbdff03df 100644
--- a/packages/client/src/pages/about-iceshrimp.vue
+++ b/packages/client/src/pages/AboutIceshrimp.vue
@@ -1,10 +1,10 @@
 <template>
-	<MkStickyContainer>
-		<template #header
-			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
-		/></template>
+	<StickyContainer>
+		<template #header>
+			<PageHeader :actions="headerActions" :tabs="headerTabs" />
+		</template>
 		<div style="overflow: clip">
-			<MkSpacer :content-max="600" :margin-min="20">
+			<Spacer :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,14 +42,16 @@
 							:class="{
 								_physics_circle_: !emoji.emoji.startsWith(':'),
 							}"
-							><MkEmoji
+						>
+							<Emoji
 								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
@@ -60,9 +62,9 @@
 						>
 					</div>
 					<div class="_formBlock" style="text-align: center">
-						<MkButton primary rounded inline @click="iLoveMisskey"
-							>I <Mfm text="$[jelly ❤]" /> #Iceshrimp</MkButton
-						>
+						<Button primary rounded inline @click="iLoveMisskey"
+							>I <Mfm text="$[jelly ❤]" /> #Iceshrimp
+						</Button>
 					</div>
 					<FormSection>
 						<div class="_formLinks">
@@ -81,19 +83,19 @@
 						</div>
 					</FormSection>
 				</div>
-			</MkSpacer>
+			</Spacer>
 		</div>
-	</MkStickyContainer>
+	</StickyContainer>
 </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 MkButton from "@/components/MkButton.vue";
-import MkLink from "@/components/MkLink.vue";
-import MkSparkle from "@/components/MkSparkle.vue";
+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 { physics } from "@/scripts/physics";
 import { i18n } from "@/i18n";
 import { defaultStore } from "@/store";
diff --git a/packages/client/src/pages/admin-file.vue b/packages/client/src/pages/AdminFile.vue
similarity index 80%
rename from packages/client/src/pages/admin-file.vue
rename to packages/client/src/pages/AdminFile.vue
index 87647dc1d..14d0c422a 100644
--- a/packages/client/src/pages/admin-file.vue
+++ b/packages/client/src/pages/AdminFile.vue
@@ -1,12 +1,13 @@
 <template>
-	<MkStickyContainer>
-		<template #header
-			><MkPageHeader
+	<StickyContainer>
+		<template #header>
+			<PageHeader
 				v-model:tab="tab"
 				:actions="headerActions"
 				:tabs="headerTabs"
-		/></template>
-		<MkSpacer :content-max="600" :margin-min="16" :margin-max="32">
+			/>
+		</template>
+		<Spacer :content-max="600" :margin-min="16" :margin-max="32">
 			<swiper
 				:round-lengths="true"
 				:touch-angle="25"
@@ -30,14 +31,14 @@
 							:href="file.url"
 							target="_blank"
 						>
-							<MkDriveFileThumbnail
+							<DriveFileThumbnail
 								class="thumbnail"
 								:file="file"
 								fit="contain"
 							/>
 						</a>
 						<div class="_formBlock">
-							<MkKeyValue
+							<KeyValue
 								:copy="file.type"
 								oneline
 								style="margin: 1em 0"
@@ -48,16 +49,16 @@
 										file.type
 									}}</span></template
 								>
-							</MkKeyValue>
-							<MkKeyValue oneline style="margin: 1em 0">
+							</KeyValue>
+							<KeyValue oneline style="margin: 1em 0">
 								<template #key>Size</template>
 								<template #value
 									><span class="_monospace">{{
 										bytes(file.size)
 									}}</span></template
 								>
-							</MkKeyValue>
-							<MkKeyValue
+							</KeyValue>
+							<KeyValue
 								:copy="file.id"
 								oneline
 								style="margin: 1em 0"
@@ -68,8 +69,8 @@
 										file.id
 									}}</span></template
 								>
-							</MkKeyValue>
-							<MkKeyValue
+							</KeyValue>
+							<KeyValue
 								:copy="file.md5"
 								oneline
 								style="margin: 1em 0"
@@ -80,49 +81,49 @@
 										file.md5
 									}}</span></template
 								>
-							</MkKeyValue>
-							<MkKeyValue oneline style="margin: 1em 0">
+							</KeyValue>
+							<KeyValue oneline style="margin: 1em 0">
 								<template #key>{{
 									i18n.ts.createdAt
 								}}</template>
 								<template #value
 									><span class="_monospace"
-										><MkTime
+										><Time
 											:time="file.createdAt"
 											mode="detail"
 											style="display: block" /></span
 								></template>
-							</MkKeyValue>
+							</KeyValue>
 						</div>
-						<MkA
+						<A
 							v-if="file.user"
 							class="user"
 							:to="`/user-info/${file.user.id}`"
 						>
-							<MkUserCardMini :user="file.user" />
-						</MkA>
+							<UserCardMini :user="file.user" />
+						</A>
 						<div class="_formBlock">
-							<MkSwitch
+							<Switch
 								v-model="isSensitive"
 								@update:modelValue="toggleIsSensitive"
-								>NSFW</MkSwitch
+								>NSFW</Switch
 							>
 						</div>
 
 						<div class="_formBlock">
-							<MkButton danger @click="del"
+							<Button danger @click="del"
 								><i class="ph-trash ph-bold ph-lg"></i>
-								{{ i18n.ts.delete }}</MkButton
+								{{ i18n.ts.delete }}</Button
 							>
 						</div>
 					</div>
 				</swiper-slide>
 				<swiper-slide>
 					<div v-if="info" class="_formRoot">
-						<MkInfo v-if="!iAmAdmin" warn>{{
+						<Info v-if="!iAmAdmin" warn>{{
 							i18n.ts.requireAdminForView
-						}}</MkInfo>
-						<MkKeyValue
+						}}</Info>
+						<KeyValue
 							v-if="info.requestIp"
 							class="_formBlock _monospace"
 							:copy="info.requestIp"
@@ -130,43 +131,43 @@
 						>
 							<template #key>IP</template>
 							<template #value>{{ info.requestIp }}</template>
-						</MkKeyValue>
+						</KeyValue>
 						<FormSection v-if="info.requestHeaders">
 							<template #label>Headers</template>
-							<MkKeyValue
+							<KeyValue
 								v-for="(v, k) in info.requestHeaders"
 								:key="k"
 								class="_formBlock _monospace"
 							>
 								<template #key>{{ k }}</template>
 								<template #value>{{ v }}</template>
-							</MkKeyValue>
+							</KeyValue>
 						</FormSection>
 					</div>
 				</swiper-slide>
 				<swiper-slide>
 					<div class="_formRoot">
-						<MkObjectView v-if="info" tall :value="info">
-						</MkObjectView>
+						<ObjectView v-if="info" tall :value="info">
+						</ObjectView>
 					</div>
 				</swiper-slide>
 			</swiper>
-		</MkSpacer>
-	</MkStickyContainer>
+		</Spacer>
+	</StickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { computed, watch } from "vue";
 import { Virtual } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/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 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 bytes from "@/filters/bytes";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
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 cc62ce0f5..ac1c23615 100644
--- a/packages/client/src/pages/announcements.vue
+++ b/packages/client/src/pages/Announcements.vue
@@ -1,10 +1,10 @@
 <template>
-	<MkStickyContainer>
-		<template #header
-			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
-		/></template>
-		<MkSpacer :content-max="800">
-			<MkPagination
+	<StickyContainer>
+		<template #header>
+			<PageHeader :actions="headerActions" :tabs="headerTabs" />
+		</template>
+		<Spacer :content-max="800">
+			<Pagination
 				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>
-						<MkTime :time="announcement.createdAt" />
+						<Time :time="announcement.createdAt" />
 						<div v-if="announcement.updatedAt">
 							{{ i18n.ts.updatedAt }}:
-							<MkTime :time="announcement.createdAt" />
+							<Time :time="announcement.createdAt" />
 						</div>
 					</div>
 					<div class="_content">
@@ -31,21 +31,21 @@
 						/>
 					</div>
 					<div v-if="$i && !announcement.isRead" class="_footer">
-						<MkButton primary @click="read(items, announcement, i)"
+						<Button primary @click="read(items, announcement, i)"
 							><i class="ph-check ph-bold ph-lg"></i>
-							{{ i18n.ts.gotIt }}</MkButton
+							{{ i18n.ts.gotIt }}</Button
 						>
 					</div>
 				</section>
-			</MkPagination>
-		</MkSpacer>
-	</MkStickyContainer>
+			</Pagination>
+		</Spacer>
+	</StickyContainer>
 </template>
 
 <script lang="ts" setup>
 import {} from "vue";
-import MkPagination from "@/components/MkPagination.vue";
-import MkButton from "@/components/MkButton.vue";
+import Pagination from "@/components/Pagination.vue";
+import Button from "@/components/Button.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
diff --git a/packages/client/src/pages/antenna-timeline.vue b/packages/client/src/pages/AntennaTimeline.vue
similarity index 92%
rename from packages/client/src/pages/antenna-timeline.vue
rename to packages/client/src/pages/AntennaTimeline.vue
index 011e44ce6..534f43c11 100644
--- a/packages/client/src/pages/antenna-timeline.vue
+++ b/packages/client/src/pages/AntennaTimeline.vue
@@ -1,8 +1,8 @@
 <template>
-	<MkStickyContainer>
-		<template #header
-			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
-		/></template>
+	<StickyContainer>
+		<template #header>
+			<PageHeader :actions="headerActions" :tabs="headerTabs" />
+		</template>
 		<div
 			ref="rootEl"
 			v-hotkey.global="keymap"
@@ -20,12 +20,12 @@
 				/>
 			</div>
 		</div>
-	</MkStickyContainer>
+	</StickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { computed, inject, watch } from "vue";
-import XTimeline from "@/components/MkTimeline.vue";
+import XTimeline from "@/components/Timeline.vue";
 import * as os from "@/os";
 import { useRouter } from "@/router";
 import { definePageMetadata } from "@/scripts/page-metadata";
diff --git a/packages/client/src/pages/api-console.vue b/packages/client/src/pages/ApiConsole.vue
similarity index 74%
rename from packages/client/src/pages/api-console.vue
rename to packages/client/src/pages/ApiConsole.vue
index 116dc38eb..0b36143c4 100644
--- a/packages/client/src/pages/api-console.vue
+++ b/packages/client/src/pages/ApiConsole.vue
@@ -1,56 +1,58 @@
 <template>
-	<MkStickyContainer>
-		<template #header
-			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
-		/></template>
-		<MkSpacer :content-max="700">
+	<StickyContainer>
+		<template #header>
+			<PageHeader :actions="headerActions" :tabs="headerTabs" />
+		</template>
+		<Spacer :content-max="700">
 			<div class="_formRoot">
 				<div class="_formBlock">
-					<MkInput
+					<Input
 						v-model="endpoint"
 						:datalist="endpoints"
 						class="_formBlock"
 						@update:modelValue="onEndpointChange()"
 					>
 						<template #label>Endpoint</template>
-					</MkInput>
-					<MkTextarea v-model="body" class="_formBlock" code>
+					</Input>
+					<Textarea v-model="body" class="_formBlock" code>
 						<template #label>Params (JSON or JSON5)</template>
-					</MkTextarea>
-					<MkSwitch v-model="withCredential" class="_formBlock">
+					</Textarea>
+					<Switch v-model="withCredential" class="_formBlock">
 						With credential
-					</MkSwitch>
-					<MkButton
+					</Switch>
+					<Button
 						class="_formBlock"
 						primary
 						:disabled="sending"
 						@click="send"
 					>
-						<template v-if="sending"><MkEllipsis /></template>
+						<template v-if="sending">
+							<Ellipsis />
+						</template>
 						<template v-else
 							><i class="ph-paper-plane-tilt ph-bold ph-lg"></i>
 							Send</template
 						>
-					</MkButton>
+					</Button>
 				</div>
 				<div v-if="res" class="_formBlock">
-					<MkTextarea v-model="res" code readonly tall>
+					<Textarea v-model="res" code readonly tall>
 						<template #label>Response</template>
-					</MkTextarea>
+					</Textarea>
 				</div>
 			</div>
-		</MkSpacer>
-	</MkStickyContainer>
+		</Spacer>
+	</StickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { ref } from "vue";
 import JSON5 from "json5";
 import { Endpoints } from "iceshrimp-js";
-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 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 * as os from "@/os";
 import { definePageMetadata } from "@/scripts/page-metadata";
 
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 26b1e2dfc..50108bac2 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="">
-		<MkLoading />
+		<Loading />
 	</div>
 	<div v-else-if="$i">
 		<XForm
@@ -23,15 +23,16 @@
 				}}
 			</h1>
 			<p v-if="session.app.callbackUrl && !auth_code">
-				{{ i18n.ts._auth.callback }}<MkEllipsis />
+				{{ i18n.ts._auth.callback }}
+				<Ellipsis />
 			</p>
-			<MkKeyValue
+			<KeyValue
 				v-if="session.app.callbackUrl && auth_code"
 				:copy="auth_code"
 			>
 				<template #key>{{ i18n.ts._auth.copyAsk }}</template>
 				<template #value>{{ auth_code }}</template>
-			</MkKeyValue>
+			</KeyValue>
 			<p v-if="!session.app.callbackUrl">
 				{{ i18n.ts._auth.pleaseGoBack }}
 			</p>
@@ -41,15 +42,15 @@
 		</div>
 	</div>
 	<div v-else class="signin">
-		<MkSignin @login="onLogin" />
+		<Signin @login="onLogin" />
 	</div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import XForm from "./auth.form.vue";
-import MkSignin from "@/components/MkSignin.vue";
-import MkKeyValue from "@/components/MkKeyValue.vue";
+import XForm from "./AuthForm.vue";
+import Signin from "@/components/Signin.vue";
+import KeyValue from "@/components/KeyValue.vue";
 import * as os from "@/os";
 import { login } from "@/account";
 import { i18n } from "@/i18n";
@@ -57,8 +58,8 @@ import { i18n } from "@/i18n";
 export default defineComponent({
 	components: {
 		XForm,
-		MkSignin,
-		MkKeyValue,
+		Signin,
+		KeyValue,
 	},
 	props: ["token"],
 	data() {
@@ -106,20 +107,30 @@ export default defineComponent({
 					.split("&")
 					.reduce((result, query) => {
 						const [k, v] = query.split("=");
-						result[k] = decodeURIComponent(v);
+						result[k] = decodeURI(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/auth.form.vue b/packages/client/src/pages/AuthForm.vue
similarity index 85%
rename from packages/client/src/pages/auth.form.vue
rename to packages/client/src/pages/AuthForm.vue
index 189650f30..fff53e7cc 100644
--- a/packages/client/src/pages/auth.form.vue
+++ b/packages/client/src/pages/AuthForm.vue
@@ -17,17 +17,15 @@
 			</ul>
 		</div>
 		<div class="_footer">
-			<MkButton inline @click="cancel">{{ i18n.ts.cancel }}</MkButton>
-			<MkButton inline primary @click="accept">{{
-				i18n.ts.accept
-			}}</MkButton>
+			<Button inline @click="cancel">{{ i18n.ts.cancel }}</Button>
+			<Button inline primary @click="accept">{{ i18n.ts.accept }}</Button>
 		</div>
 	</section>
 </template>
 
 <script lang="ts" setup>
 import { defineComponent } from "vue";
-import MkButton from "@/components/MkButton.vue";
+import Button from "@/components/Button.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 
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 d54c13d77..91edea8f5 100644
--- a/packages/client/src/pages/channel.vue
+++ b/packages/client/src/pages/Channel.vue
@@ -1,12 +1,13 @@
 <template>
-	<MkStickyContainer>
-		<template #header
-			><MkPageHeader
+	<StickyContainer>
+		<template #header>
+			<PageHeader
 				:actions="headerActions"
 				:tabs="headerTabs"
 				:display-back-button="true"
-		/></template>
-		<MkSpacer :content-max="700">
+			/>
+		</template>
+		<Spacer :content-max="700">
 			<div v-if="channel">
 				<div
 					class="wpgynlbz _panel _gap"
@@ -41,8 +42,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"
@@ -56,8 +57,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"
@@ -96,16 +97,16 @@
 					@after="after"
 				/>
 			</div>
-		</MkSpacer>
-	</MkStickyContainer>
+		</Spacer>
+	</StickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { computed, inject, watch } from "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 Container from "@/components/Container.vue";
+import XPostForm from "@/components/PostForm.vue";
+import XTimeline from "@/components/Timeline.vue";
+import XChannelFollowButton from "@/components/ChannelFollowButton.vue";
 import * as os from "@/os";
 import { useRouter } from "@/router";
 import { $i } from "@/account";
@@ -143,7 +144,7 @@ const headerActions = $computed(() => [
 					text: i18n.ts.edit,
 					handler: edit,
 				},
-			]
+		  ]
 		: []),
 ]);
 
@@ -155,7 +156,7 @@ definePageMetadata(
 			? {
 					title: channel.name,
 					icon: "ph-television ph-bold ph-lg",
-				}
+			  }
 			: null,
 	),
 );
diff --git a/packages/client/src/pages/channel-editor.vue b/packages/client/src/pages/ChannelEditor.vue
similarity index 75%
rename from packages/client/src/pages/channel-editor.vue
rename to packages/client/src/pages/ChannelEditor.vue
index 203c69770..adfab0956 100644
--- a/packages/client/src/pages/channel-editor.vue
+++ b/packages/client/src/pages/ChannelEditor.vue
@@ -1,49 +1,47 @@
 <template>
-	<MkStickyContainer>
-		<template #header
-			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
-		/></template>
-		<MkSpacer :content-max="700">
+	<StickyContainer>
+		<template #header>
+			<PageHeader :actions="headerActions" :tabs="headerTabs" />
+		</template>
+		<Spacer :content-max="700">
 			<div class="_formRoot">
-				<MkInput v-model="name" class="_formBlock">
+				<Input v-model="name" class="_formBlock">
 					<template #label>{{ i18n.ts.name }}</template>
-				</MkInput>
+				</Input>
 
-				<MkTextarea v-model="description" class="_formBlock">
+				<Textarea v-model="description" class="_formBlock">
 					<template #label>{{ i18n.ts.description }}</template>
-				</MkTextarea>
+				</Textarea>
 
 				<div class="banner">
-					<MkButton v-if="bannerId == null" @click="setBannerImage"
+					<Button v-if="bannerId == null" @click="setBannerImage"
 						><i class="ph-plus ph-bold ph-lg"></i>
-						{{ i18n.ts._channel.setBanner }}</MkButton
+						{{ i18n.ts._channel.setBanner }}</Button
 					>
 					<div v-else-if="bannerUrl">
 						<img :src="bannerUrl" style="width: 100%" />
-						<MkButton @click="removeBannerImage()"
+						<Button @click="removeBannerImage()"
 							><i class="ph-trash ph-bold ph-lg"></i>
-							{{ i18n.ts._channel.removeBanner }}</MkButton
+							{{ i18n.ts._channel.removeBanner }}</Button
 						>
 					</div>
 				</div>
 				<div class="_formBlock">
-					<MkButton primary @click="save()"
+					<Button primary @click="save()"
 						><i class="ph-floppy-disk-back ph-bold ph-lg"></i>
-						{{
-							channelId ? i18n.ts.save : i18n.ts.create
-						}}</MkButton
+						{{ channelId ? i18n.ts.save : i18n.ts.create }}</Button
 					>
 				</div>
 			</div>
-		</MkSpacer>
-	</MkStickyContainer>
+		</Spacer>
+	</StickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { computed, inject, watch } from "vue";
-import MkTextarea from "@/components/form/textarea.vue";
-import MkButton from "@/components/MkButton.vue";
-import MkInput from "@/components/form/input.vue";
+import Textarea from "@/components/form/Textarea.vue";
+import Button from "@/components/Button.vue";
+import Input 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/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 65f4dbf0c..454012dba 100644
--- a/packages/client/src/pages/channels.vue
+++ b/packages/client/src/pages/Channels.vue
@@ -1,15 +1,16 @@
 <template>
-	<MkStickyContainer>
-		<template #header
-			><MkPageHeader
+	<StickyContainer>
+		<template #header>
+			<PageHeader
 				v-model:tab="tab"
 				:actions="headerActions"
 				:tabs="headerTabs"
-		/></template>
-		<MkSpacer :content-max="700">
-			<MkInfo class="_gap" :warn="true">{{
+			/>
+		</template>
+		<Spacer :content-max="700">
+			<Info class="_gap" :warn="true">{{
 				i18n.ts.channelFederationWarn
-			}}</MkInfo>
+			}}</Info>
 			<swiper
 				:round-lengths="true"
 				:touch-angle="25"
@@ -28,7 +29,7 @@
 			>
 				<swiper-slide>
 					<div class="_content grwlizim search">
-						<MkInput
+						<Input
 							v-model="searchQuery"
 							:large="true"
 							:autofocus="true"
@@ -39,8 +40,8 @@
 									class="ph-magnifying-glass ph-bold ph-lg"
 								></i
 							></template>
-						</MkInput>
-						<MkRadios
+						</Input>
+						<Radios
 							v-model="searchType"
 							@update:model-value="search()"
 							class="_gap"
@@ -51,36 +52,36 @@
 							<option value="nameOnly">
 								{{ i18n.ts._channel.nameOnly }}
 							</option>
-						</MkRadios>
-						<MkButton large primary @click="search" class="_gap">{{
+						</Radios>
+						<Button large primary @click="search" class="_gap">{{
 							i18n.ts.search
-						}}</MkButton>
-						<MkFoldableSection v-if="channelPagination">
+						}}</Button>
+						<FoldableSection v-if="channelPagination">
 							<template #header>{{
 								i18n.ts.searchResult
 							}}</template>
-							<MkChannelList
+							<ChannelList
 								:key="key"
 								:pagination="channelPagination"
 							/>
-						</MkFoldableSection>
+						</FoldableSection>
 					</div>
 				</swiper-slide>
 				<swiper-slide>
 					<div class="_content grwlizim featured">
-						<!-- <MkPagination
+						<!-- <Pagination
 							v-slot="{ items }"
 							:pagination="featuredPagination"
 							:disable-auto-load="true"
 						>
-							<MkChannelPreview
+							<ChannelPreview
 								v-for="channel in items"
 								:key="channel.id"
 								class="_gap"
 								:channel="channel"
 							/>
-						</MkPagination> -->
-						<MkChannelList
+						</Pagination> -->
+						<ChannelList
 							key="featured"
 							:pagination="featuredPagination"
 						/>
@@ -88,7 +89,7 @@
 				</swiper-slide>
 				<swiper-slide>
 					<div class="_content grwlizim following">
-						<MkChannelList
+						<ChannelList
 							key="following"
 							:pagination="followingPagination"
 						/>
@@ -96,32 +97,32 @@
 				</swiper-slide>
 				<swiper-slide>
 					<div class="_content grwlizim owned">
-						<MkButton class="new" @click="create()"
+						<Button class="new" @click="create()"
 							><i class="ph-plus ph-bold ph-lg"></i
-						></MkButton>
-						<MkChannelList
+						></Button>
+						<ChannelList
 							key="owned"
 							:pagination="ownedPagination"
 						/>
 					</div>
 				</swiper-slide>
 			</swiper>
-		</MkSpacer>
-	</MkStickyContainer>
+		</Spacer>
+	</StickyContainer>
 </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 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 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 { 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 42feecf1e..82094057a 100644
--- a/packages/client/src/pages/clip.vue
+++ b/packages/client/src/pages/Clip.vue
@@ -1,7 +1,9 @@
 <template>
-	<MkStickyContainer>
-		<template #header><MkPageHeader :actions="headerActions" /></template>
-		<MkSpacer :content-max="800">
+	<StickyContainer>
+		<template #header>
+			<PageHeader :actions="headerActions" />
+		</template>
+		<Spacer :content-max="800">
 			<div v-if="clip">
 				<div class="okzinsic _panel">
 					<div v-if="clip.description" class="description">
@@ -12,25 +14,25 @@
 						/>
 					</div>
 					<div class="user">
-						<MkAvatar
+						<Avatar
 							:user="clip.user"
 							class="avatar"
 							:show-indicator="true"
 						/>
-						<MkUserName :user="clip.user" :nowrap="false" />
+						<UserName :user="clip.user" :nowrap="false" />
 					</div>
 				</div>
 
 				<XNotes :pagination="pagination" :detail="true" />
 			</div>
-		</MkSpacer>
-	</MkStickyContainer>
+		</Spacer>
+	</StickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { computed, watch, provide } from "vue";
 import type * as misskey from "iceshrimp-js";
-import XNotes from "@/components/MkNotes.vue";
+import XNotes from "@/components/Notes.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 2b4bf2d1f..13252a07d 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/MkDrive.vue";
+import XDrive from "@/components/Drive.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
diff --git a/packages/client/src/pages/emojis.emoji.vue b/packages/client/src/pages/EmojisEmoji.vue
similarity index 100%
rename from packages/client/src/pages/emojis.emoji.vue
rename to packages/client/src/pages/EmojisEmoji.vue
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 4f536c2b5..740b201c2 100644
--- a/packages/client/src/pages/_error_.vue
+++ b/packages/client/src/pages/Error.vue
@@ -1,12 +1,8 @@
 <template>
-	<MkLoading v-if="!loaded" />
+	<Loading 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>
@@ -20,14 +16,14 @@
 			<template v-else>
 				<p>{{ i18n.ts.newVersionOfClientAvailable }}</p>
 				<p>{{ i18n.ts.youShouldUpgradeClient }}</p>
-				<MkButton class="button primary" @click="reload">{{
+				<Button class="button primary" @click="reload">{{
 					i18n.ts.reload
-				}}</MkButton>
+				}}</Button>
 			</template>
 			<p>
-				<MkA to="/docs/general/troubleshooting" class="_link">{{
+				<A to="/docs/general/troubleshooting" class="_link">{{
 					i18n.ts.troubleshooting
-				}}</MkA>
+				}}</A>
 			</p>
 			<p v-if="error" class="error">ERROR: {{ error }}</p>
 		</div>
@@ -37,7 +33,7 @@
 <script lang="ts" setup>
 import {} from "vue";
 import * as misskey from "iceshrimp-js";
-import MkButton from "@/components/MkButton.vue";
+import Button from "@/components/Button.vue";
 import { version } from "@/config";
 import * as os from "@/os";
 import { unisonReload } from "@/scripts/unison-reload";
@@ -45,7 +41,6 @@ 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/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 304f6e24d..d2fec81ba 100644
--- a/packages/client/src/pages/explore.vue
+++ b/packages/client/src/pages/Explore.vue
@@ -1,13 +1,14 @@
 <template>
-	<MkStickyContainer>
-		<template #header
-			><MkPageHeader
+	<StickyContainer>
+		<template #header>
+			<PageHeader
 				v-model:tab="tab"
 				:actions="headerActions"
 				:tabs="headerTabs"
-		/></template>
+			/>
+		</template>
 		<div class="lznhrdub">
-			<MkSpacer :content-max="1200">
+			<Spacer :content-max="1200">
 				<swiper
 					:round-lengths="true"
 					:touch-angle="25"
@@ -31,17 +32,17 @@
 						<XFeatured />
 					</swiper-slide>
 				</swiper>
-			</MkSpacer>
+			</Spacer>
 		</div>
-	</MkStickyContainer>
+	</StickyContainer>
 </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 "./explore.featured.vue";
-import XUsers from "./explore.users.vue";
+import XFeatured from "./ExploreFeatured.vue";
+import XUsers from "./ExploreUsers.vue";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import { deviceKind } from "@/scripts/device-kind";
 import { i18n } from "@/i18n";
diff --git a/packages/client/src/pages/explore.featured.vue b/packages/client/src/pages/ExploreFeatured.vue
similarity index 79%
rename from packages/client/src/pages/explore.featured.vue
rename to packages/client/src/pages/ExploreFeatured.vue
index 2d21bfcb4..60fc53c8c 100644
--- a/packages/client/src/pages/explore.featured.vue
+++ b/packages/client/src/pages/ExploreFeatured.vue
@@ -1,20 +1,20 @@
 <template>
-	<MkSpacer :content-max="800">
-		<MkTab v-model="tab" style="margin-bottom: var(--margin)">
+	<Spacer :content-max="800">
+		<Tab v-model="tab" style="margin-bottom: var(--margin)">
 			<option value="local">{{ i18n.ts.local }}</option>
 			<option value="remote">{{ i18n.ts.remote }}</option>
-		</MkTab>
+		</Tab>
 		<XNotes v-if="tab === 'local'" :pagination="paginationForLocal" />
 		<XNotes
 			v-else-if="tab === 'remote'"
 			:pagination="paginationForRemote"
 		/>
-	</MkSpacer>
+	</Spacer>
 </template>
 
 <script lang="ts" setup>
-import XNotes from "@/components/MkNotes.vue";
-import MkTab from "@/components/MkTab.vue";
+import XNotes from "@/components/Notes.vue";
+import Tab from "@/components/Tab.vue";
 import { i18n } from "@/i18n";
 
 const paginationForLocal = {
diff --git a/packages/client/src/pages/explore.users.vue b/packages/client/src/pages/ExploreUsers.vue
similarity index 86%
rename from packages/client/src/pages/explore.users.vue
rename to packages/client/src/pages/ExploreUsers.vue
index 75fd21a83..e65d5ceb9 100644
--- a/packages/client/src/pages/explore.users.vue
+++ b/packages/client/src/pages/ExploreUsers.vue
@@ -1,13 +1,13 @@
 4.8 KiB
 <template>
-	<MkSpacer :content-max="1200">
-		<MkTab v-model="origin" style="margin-bottom: var(--margin)">
+	<Spacer :content-max="1200">
+		<Tab v-model="origin" style="margin-bottom: var(--margin)">
 			<option value="local">{{ i18n.ts.local }}</option>
 			<option value="remote">{{ i18n.ts.remote }}</option>
-		</MkTab>
+		</Tab>
 		<div v-if="origin === 'local'">
 			<template v-if="tag == null">
-				<MkFolder class="_gap" persist-key="explore-pinned-users">
+				<Folder 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" />
-				</MkFolder>
-				<MkFolder
+				</Folder>
+				<Folder
 					v-if="$i != null"
 					class="_gap"
 					persist-key="explore-popular-users"
@@ -30,8 +30,8 @@
 						>{{ i18n.ts.popularUsers }}</template
 					>
 					<XUserList :pagination="popularUsers" />
-				</MkFolder>
-				<MkFolder
+				</Folder>
+				<Folder
 					v-if="$i != null"
 					class="_gap"
 					persist-key="explore-recently-updated-users"
@@ -44,8 +44,8 @@
 						>{{ i18n.ts.recentlyUpdatedUsers }}</template
 					>
 					<XUserList :pagination="recentlyUpdatedUsers" />
-				</MkFolder>
-				<MkFolder
+				</Folder>
+				<Folder
 					v-if="$i != null"
 					class="_gap"
 					persist-key="explore-recently-registered-users"
@@ -58,11 +58,11 @@
 						>{{ i18n.ts.recentlyRegisteredUsers }}</template
 					>
 					<XUserList :pagination="recentlyRegisteredUsers" />
-				</MkFolder>
+				</Folder>
 			</template>
 		</div>
 		<div v-else>
-			<MkFolder
+			<Folder
 				ref="tagsEl"
 				:foldable="true"
 				:expanded="false"
@@ -77,23 +77,23 @@
 				>
 
 				<div class="vxjfqztj">
-					<MkA
+					<A
 						v-for="tag in tagsLocal"
 						:key="'local:' + tag.tag"
 						:to="`/tags/${tag.tag}`"
 						class="local"
-						>{{ tag.tag }}</MkA
+						>{{ tag.tag }}</A
 					>
-					<MkA
+					<A
 						v-for="tag in tagsRemote"
 						:key="'remote:' + tag.tag"
 						:to="`/tags/${tag.tag}`"
-						>{{ tag.tag }}</MkA
+						>{{ tag.tag }}</A
 					>
 				</div>
-			</MkFolder>
+			</Folder>
 
-			<MkFolder v-if="tag != null" :key="`${tag}`" class="_gap">
+			<Folder 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" />
-			</MkFolder>
+			</Folder>
 
 			<template v-if="tag == null && $i != null">
-				<MkFolder class="_gap">
+				<Folder 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" />
-				</MkFolder>
-				<MkFolder class="_gap">
+				</Folder>
+				<Folder 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" />
-				</MkFolder>
-				<MkFolder class="_gap">
+				</Folder>
+				<Folder 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" />
-				</MkFolder>
+				</Folder>
 			</template>
 		</div>
-	</MkSpacer>
+	</Spacer>
 </template>
 
 <script lang="ts" setup>
 import { computed, watch } from "vue";
-import XUserList from "@/components/MkUserList.vue";
-import MkFolder from "@/components/MkFolder.vue";
-import MkTab from "@/components/MkTab.vue";
+import XUserList from "@/components/UserList.vue";
+import Folder from "@/components/Folder.vue";
+import Tab from "@/components/Tab.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 MkFolder>>();
+let tagsEl = $ref<InstanceType<typeof Folder>>();
 let tagsLocal = $ref([]);
 let tagsRemote = $ref([]);
 
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 1b8e53e28..6b2d799bb 100644
--- a/packages/client/src/pages/favorites.vue
+++ b/packages/client/src/pages/Favorites.vue
@@ -1,8 +1,10 @@
 <template>
-	<MkStickyContainer>
-		<template #header><MkPageHeader /></template>
-		<MkSpacer :content-max="800">
-			<MkPagination ref="pagingComponent" :pagination="pagination">
+	<StickyContainer>
+		<template #header>
+			<PageHeader />
+		</template>
+		<Spacer :content-max="800">
+			<Pagination ref="pagingComponent" :pagination="pagination">
 				<template #empty>
 					<div class="_fullinfo">
 						<img
@@ -28,26 +30,26 @@
 						/>
 					</XList>
 				</template>
-			</MkPagination>
-		</MkSpacer>
-	</MkStickyContainer>
+			</Pagination>
+		</Spacer>
+	</StickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { ref } from "vue";
-import MkPagination from "@/components/MkPagination.vue";
-import XNote from "@/components/MkNote.vue";
-import XList from "@/components/MkDateSeparatedList.vue";
+import Pagination from "@/components/Pagination.vue";
+import XNote from "@/components/Note.vue";
+import XList from "@/components/DateSeparatedList.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 MkPagination>>();
+const pagingComponent = ref<InstanceType<typeof Pagination>>();
 
 definePageMetadata({
 	title: i18n.ts.favorites,
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/follow-requests.vue b/packages/client/src/pages/FollowRequests.vue
similarity index 87%
rename from packages/client/src/pages/follow-requests.vue
rename to packages/client/src/pages/FollowRequests.vue
index 9ef1ba133..78e5cba2d 100644
--- a/packages/client/src/pages/follow-requests.vue
+++ b/packages/client/src/pages/FollowRequests.vue
@@ -1,8 +1,10 @@
 <template>
-	<MkStickyContainer>
-		<template #header><MkPageHeader /></template>
-		<MkSpacer :content-max="800">
-			<MkPagination ref="paginationComponent" :pagination="pagination">
+	<StickyContainer>
+		<template #header>
+			<PageHeader />
+		</template>
+		<Spacer :content-max="800">
+			<Pagination ref="paginationComponent" :pagination="pagination">
 				<template #empty>
 					<div class="_fullinfo">
 						<img
@@ -14,16 +16,16 @@
 					</div>
 				</template>
 				<template #default="{ items }">
-					<MkInfo v-if="$i?.isLocked === false" warn class="info"
+					<Info v-if="$i?.isLocked === false" warn class="info"
 						>{{ i18n.ts.silencedWarning }}
-					</MkInfo>
+					</Info>
 					<div class="mk-follow-requests">
 						<div
 							v-for="req in items"
 							:key="req.id"
 							class="user _panel"
 						>
-							<MkAvatar
+							<Avatar
 								class="avatar"
 								:user="req.follower"
 								:show-indicator="true"
@@ -31,12 +33,13 @@
 							/>
 							<div class="body">
 								<div class="name">
-									<MkA
+									<A
 										v-user-preview="req.follower.id"
 										class="name"
 										:to="userPage(req.follower)"
-										><MkUserName :user="req.follower"
-									/></MkA>
+									>
+										<UserName :user="req.follower" />
+									</A>
 									<p class="acct">
 										@{{ acct(req.follower) }}
 									</p>
@@ -76,22 +79,22 @@
 						</div>
 					</div>
 				</template>
-			</MkPagination>
-		</MkSpacer>
-	</MkStickyContainer>
+			</Pagination>
+		</Spacer>
+	</StickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { ref, computed } from "vue";
-import MkPagination from "@/components/MkPagination.vue";
+import Pagination from "@/components/Pagination.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 MkPagination>>();
+const paginationComponent = ref<InstanceType<typeof Pagination>>();
 
 const pagination = {
 	endpoint: "following/requests/list" as const,
diff --git a/packages/client/src/pages/instance-info.vue b/packages/client/src/pages/InstanceInfo.vue
similarity index 84%
rename from packages/client/src/pages/instance-info.vue
rename to packages/client/src/pages/InstanceInfo.vue
index d83e601d6..483140849 100644
--- a/packages/client/src/pages/instance-info.vue
+++ b/packages/client/src/pages/InstanceInfo.vue
@@ -1,12 +1,13 @@
 <template>
-	<MkStickyContainer>
-		<template #header
-			><MkPageHeader
+	<StickyContainer>
+		<template #header>
+			<PageHeader
 				v-model:tab="tab"
 				:actions="headerActions"
 				:tabs="headerTabs"
-		/></template>
-		<MkSpacer
+			/>
+		</template>
+		<Spacer
 			v-if="instance"
 			:content-max="600"
 			:margin-min="16"
@@ -36,17 +37,17 @@
 								instance.name || `(${i18n.ts.unknown})`
 							}}</span>
 						</div>
-						<MkKeyValue :copy="host" oneline style="margin: 1em 0">
+						<KeyValue :copy="host" oneline style="margin: 1em 0">
 							<template #key>Host</template>
 							<template #value
-								><span class="_monospace"
-									><MkLink :url="`https://${host}`">{{
+								><span class="_monospace">
+									<Link :url="`https://${host}`">{{
 										host
-									}}</MkLink></span
-								></template
+									}}</Link>
+								</span></template
 							>
-						</MkKeyValue>
-						<MkKeyValue oneline style="margin: 1em 0">
+						</KeyValue>
+						<KeyValue oneline style="margin: 1em 0">
 							<template #key>{{ i18n.ts.software }}</template>
 							<template #value
 								><span class="_monospace"
@@ -61,8 +62,8 @@
 									}}</span
 								></template
 							>
-						</MkKeyValue>
-						<MkKeyValue oneline style="margin: 1em 0">
+						</KeyValue>
+						<KeyValue oneline style="margin: 1em 0">
 							<template #key>{{
 								i18n.ts.administrator
 							}}</template>
@@ -76,13 +77,13 @@
 									`(${i18n.ts.unknown})`
 								}})</template
 							>
-						</MkKeyValue>
-						<MkKeyValue>
+						</KeyValue>
+						<KeyValue>
 							<template #key>{{ i18n.ts.description }}</template>
 							<template #value>{{
 								instance.description
 							}}</template>
-						</MkKeyValue>
+						</KeyValue>
 
 						<FormSection v-if="iAmAdmin">
 							<template #label>Moderation</template>
@@ -110,47 +111,47 @@
 									}}</FormSwitch
 								>
 							</FormSuspense>
-							<MkButton @click="refreshMetadata"
+							<Button @click="refreshMetadata"
 								><i
 									class="ph-arrows-clockwise ph-bold ph-lg"
 								></i>
-								Refresh metadata</MkButton
+								Refresh metadata</Button
 							>
 						</FormSection>
 
 						<FormSection>
-							<MkKeyValue oneline style="margin: 1em 0">
+							<KeyValue oneline style="margin: 1em 0">
 								<template #key>{{
 									i18n.ts.registeredAt
 								}}</template>
 								<template #value
-									><MkTime
+									><Time
 										mode="detail"
 										:time="instance.caughtAt"
 								/></template>
-							</MkKeyValue>
-							<MkKeyValue oneline style="margin: 1em 0">
+							</KeyValue>
+							<KeyValue oneline style="margin: 1em 0">
 								<template #key>{{
 									i18n.ts.updatedAt
 								}}</template>
 								<template #value
-									><MkTime
+									><Time
 										mode="detail"
 										:time="instance.infoUpdatedAt"
 								/></template>
-							</MkKeyValue>
-							<MkKeyValue oneline style="margin: 1em 0">
+							</KeyValue>
+							<KeyValue oneline style="margin: 1em 0">
 								<template #key>{{
 									i18n.ts.latestRequestSentAt
 								}}</template>
 								<template #value
-									><MkTime
+									><Time
 										v-if="instance.latestRequestSentAt"
 										:time="instance.latestRequestSentAt"
 									/><span v-else>N/A</span></template
 								>
-							</MkKeyValue>
-							<MkKeyValue oneline style="margin: 1em 0">
+							</KeyValue>
+							<KeyValue oneline style="margin: 1em 0">
 								<template #key>{{
 									i18n.ts.latestStatus
 								}}</template>
@@ -159,33 +160,33 @@
 										? instance.latestStatus
 										: "N/A"
 								}}</template>
-							</MkKeyValue>
-							<MkKeyValue oneline style="margin: 1em 0">
+							</KeyValue>
+							<KeyValue oneline style="margin: 1em 0">
 								<template #key>{{
 									i18n.ts.latestRequestReceivedAt
 								}}</template>
 								<template #value
-									><MkTime
+									><Time
 										v-if="instance.latestRequestReceivedAt"
 										:time="instance.latestRequestReceivedAt"
 									/><span v-else>N/A</span></template
 								>
-							</MkKeyValue>
+							</KeyValue>
 						</FormSection>
 
 						<FormSection>
-							<MkKeyValue oneline style="margin: 1em 0">
+							<KeyValue oneline style="margin: 1em 0">
 								<template #key>Following (Pub)</template>
 								<template #value>{{
 									number(instance.followingCount)
 								}}</template>
-							</MkKeyValue>
-							<MkKeyValue oneline style="margin: 1em 0">
+							</KeyValue>
+							<KeyValue oneline style="margin: 1em 0">
 								<template #key>Followers (Sub)</template>
 								<template #value>{{
 									number(instance.followersCount)
 								}}</template>
-							</MkKeyValue>
+							</KeyValue>
 						</FormSection>
 
 						<FormSection>
@@ -194,7 +195,8 @@
 								: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`"
@@ -206,19 +208,21 @@
 								: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>
@@ -227,7 +231,7 @@
 					<div class="_formRoot">
 						<div class="cmhjzshl">
 							<div class="selects">
-								<MkSelect
+								<Select
 									v-model="chartSrc"
 									style="margin: 0 10px 0 0; flex: 1"
 								>
@@ -267,38 +271,38 @@
 									<option value="instance-drive-files-total">
 										{{ i18n.ts._instanceCharts.filesTotal }}
 									</option>
-								</MkSelect>
+								</Select>
 							</div>
 							<div class="charts">
 								<div class="label">
 									{{ i18n.t("recentNHours", { n: 90 }) }}
 								</div>
-								<MkChart
+								<Chart
 									class="chart"
 									:src="chartSrc"
 									span="hour"
 									:limit="90"
 									:args="{ host: host }"
 									:detailed="true"
-								></MkChart>
+								></Chart>
 								<div class="label">
 									{{ i18n.t("recentNDays", { n: 90 }) }}
 								</div>
-								<MkChart
+								<Chart
 									class="chart"
 									:src="chartSrc"
 									span="day"
 									:limit="90"
 									:args="{ host: host }"
 									:detailed="true"
-								></MkChart>
+								></Chart>
 							</div>
 						</div>
 					</div>
 				</swiper-slide>
 				<swiper-slide>
 					<div class="_formRoot">
-						<MkPagination
+						<Pagination
 							v-slot="{ items }"
 							:pagination="usersPagination"
 							style="
@@ -310,7 +314,7 @@
 								grid-gap: 12px;
 							"
 						>
-							<MkA
+							<A
 								v-for="user in items"
 								:key="user.id"
 								v-tooltip.mfm="
@@ -321,19 +325,19 @@
 								class="user"
 								:to="`/user-info/${user.id}`"
 							>
-								<MkUserCardMini :user="user" />
-							</MkA>
-						</MkPagination>
+								<UserCardMini :user="user" />
+							</A>
+						</Pagination>
 					</div>
 				</swiper-slide>
 				<swiper-slide>
 					<div class="_formRoot">
-						<MkObjectView tall :value="instance"> </MkObjectView>
+						<ObjectView tall :value="instance"> </ObjectView>
 					</div>
 				</swiper-slide>
 			</swiper>
-		</MkSpacer>
-	</MkStickyContainer>
+		</Spacer>
+	</StickyContainer>
 </template>
 
 <script lang="ts" setup>
@@ -341,15 +345,15 @@ import { watch } from "vue";
 import { Virtual } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/vue";
 import type * as iceshrimp from "iceshrimp-js";
-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 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 * as os from "@/os";
 import number from "@/filters/number";
 import { iAmAdmin } from "@/account";
@@ -357,8 +361,8 @@ import { definePageMetadata } from "@/scripts/page-metadata";
 import { deviceKind } from "@/scripts/device-kind";
 import { defaultStore } from "@/store";
 import { i18n } from "@/i18n";
-import MkUserCardMini from "@/components/MkUserCardMini.vue";
-import MkPagination from "@/components/MkPagination.vue";
+import UserCardMini from "@/components/UserCardMini.vue";
+import Pagination from "@/components/Pagination.vue";
 import "swiper/scss";
 import "swiper/scss/virtual";
 import { getProxiedImageUrlNullable } from "@/scripts/media-proxy";
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 832c05916..bf0a302d1 100644
--- a/packages/client/src/pages/_loading_.vue
+++ b/packages/client/src/pages/Loading.vue
@@ -1,5 +1,5 @@
 <template>
-	<MkLoading />
+	<Loading />
 </template>
 
 <script lang="ts" setup></script>
diff --git a/packages/client/src/pages/mfm-cheat-sheet.vue b/packages/client/src/pages/MfmCheatsheet.vue
similarity index 80%
rename from packages/client/src/pages/mfm-cheat-sheet.vue
rename to packages/client/src/pages/MfmCheatsheet.vue
index e870ecbdf..9cbb55c38 100644
--- a/packages/client/src/pages/mfm-cheat-sheet.vue
+++ b/packages/client/src/pages/MfmCheatsheet.vue
@@ -1,7 +1,9 @@
 <template>
-	<MkStickyContainer>
-		<template #header><MkPageHeader v-if="!popup" /></template>
-		<MkSpacer :content-max="800">
+	<StickyContainer>
+		<template #header>
+			<PageHeader v-if="!popup" />
+		</template>
+		<Spacer :content-max="800">
 			<div class="mfm-cheat-sheet">
 				<div>{{ i18n.ts._mfm.intro }}</div>
 				<br />
@@ -11,8 +13,8 @@
 						<p>{{ i18n.ts._mfm.mentionDescription }}</p>
 						<div class="preview">
 							<Mfm :text="preview_mention" />
-							<MkTextarea v-model="preview_mention"
-								><template #label>MFM</template></MkTextarea
+							<Textarea v-model="preview_mention"
+								><template #label>MFM</template></Textarea
 							>
 						</div>
 					</div>
@@ -23,8 +25,8 @@
 						<p>{{ i18n.ts._mfm.hashtagDescription }}</p>
 						<div class="preview">
 							<Mfm :text="preview_hashtag" />
-							<MkTextarea v-model="preview_hashtag"
-								><template #label>MFM</template></MkTextarea
+							<Textarea v-model="preview_hashtag"
+								><template #label>MFM</template></Textarea
 							>
 						</div>
 					</div>
@@ -35,8 +37,8 @@
 						<p>{{ i18n.ts._mfm.linkDescription }}</p>
 						<div class="preview">
 							<Mfm :text="preview_link" />
-							<MkTextarea v-model="preview_link"
-								><template #label>MFM</template></MkTextarea
+							<Textarea v-model="preview_link"
+								><template #label>MFM</template></Textarea
 							>
 						</div>
 					</div>
@@ -47,8 +49,8 @@
 						<p>{{ i18n.ts._mfm.emojiDescription }}</p>
 						<div class="preview">
 							<Mfm :text="preview_emoji" />
-							<MkTextarea v-model="preview_emoji"
-								><template #label>MFM</template></MkTextarea
+							<Textarea v-model="preview_emoji"
+								><template #label>MFM</template></Textarea
 							>
 						</div>
 					</div>
@@ -59,8 +61,8 @@
 						<p>{{ i18n.ts._mfm.boldDescription }}</p>
 						<div class="preview">
 							<Mfm :text="preview_bold" />
-							<MkTextarea v-model="preview_bold"
-								><template #label>MFM</template></MkTextarea
+							<Textarea v-model="preview_bold"
+								><template #label>MFM</template></Textarea
 							>
 						</div>
 					</div>
@@ -71,8 +73,8 @@
 						<p>{{ i18n.ts._mfm.smallDescription }}</p>
 						<div class="preview">
 							<Mfm :text="preview_small" />
-							<MkTextarea v-model="preview_small"
-								><template #label>MFM</template></MkTextarea
+							<Textarea v-model="preview_small"
+								><template #label>MFM</template></Textarea
 							>
 						</div>
 					</div>
@@ -83,8 +85,8 @@
 						<p>{{ i18n.ts._mfm.quoteDescription }}</p>
 						<div class="preview">
 							<Mfm :text="preview_quote" />
-							<MkTextarea v-model="preview_quote"
-								><template #label>MFM</template></MkTextarea
+							<Textarea v-model="preview_quote"
+								><template #label>MFM</template></Textarea
 							>
 						</div>
 					</div>
@@ -95,8 +97,8 @@
 						<p>{{ i18n.ts._mfm.centerDescription }}</p>
 						<div class="preview">
 							<Mfm :text="preview_center" />
-							<MkTextarea v-model="preview_center"
-								><template #label>MFM</template></MkTextarea
+							<Textarea v-model="preview_center"
+								><template #label>MFM</template></Textarea
 							>
 						</div>
 					</div>
@@ -107,8 +109,8 @@
 						<p>{{ i18n.ts._mfm.inlineCodeDescription }}</p>
 						<div class="preview">
 							<Mfm :text="preview_inlineCode" />
-							<MkTextarea v-model="preview_inlineCode"
-								><template #label>MFM</template></MkTextarea
+							<Textarea v-model="preview_inlineCode"
+								><template #label>MFM</template></Textarea
 							>
 						</div>
 					</div>
@@ -119,8 +121,8 @@
 						<p>{{ i18n.ts._mfm.blockCodeDescription }}</p>
 						<div class="preview">
 							<Mfm :text="preview_blockCode" />
-							<MkTextarea v-model="preview_blockCode"
-								><template #label>MFM</template></MkTextarea
+							<Textarea v-model="preview_blockCode"
+								><template #label>MFM</template></Textarea
 							>
 						</div>
 					</div>
@@ -131,8 +133,8 @@
 						<p>{{ i18n.ts._mfm.inlineMathDescription }}</p>
 						<div class="preview">
 							<Mfm :text="preview_inlineMath" />
-							<MkTextarea v-model="preview_inlineMath"
-								><template #label>MFM</template></MkTextarea
+							<Textarea v-model="preview_inlineMath"
+								><template #label>MFM</template></Textarea
 							>
 						</div>
 					</div>
@@ -143,8 +145,8 @@
 						<p>{{ i18n.ts._mfm.blockMathDescription }}</p>
 						<div class="preview">
 							<Mfm :text="preview_blockMath" />
-							<MkTextarea v-model="preview_blockMath"
-								><template #label>MFM</template></MkTextarea
+							<Textarea v-model="preview_blockMath"
+								><template #label>MFM</template></Textarea
 							>
 						</div>
 					</div>
@@ -156,7 +158,7 @@
 				<p>{{ i18n.ts._mfm.searchDescription }}</p>
 				<div class="preview">
 					<Mfm :text="preview_search"/>
-					<MkTextarea v-model="preview_search"><template #label>MFM</template></MkTextarea>
+					<Textarea v-model="preview_search"><template #label>MFM</template></Textarea>
 				</div>
 			</div>
 		</div>
@@ -167,8 +169,8 @@
 						<p>{{ i18n.ts._mfm.flipDescription }}</p>
 						<div class="preview">
 							<Mfm :text="preview_flip" />
-							<MkTextarea v-model="preview_flip"
-								><template #label>MFM</template></MkTextarea
+							<Textarea v-model="preview_flip"
+								><template #label>MFM</template></Textarea
 							>
 						</div>
 					</div>
@@ -179,8 +181,8 @@
 						<p>{{ i18n.ts._mfm.fontDescription }}</p>
 						<div class="preview">
 							<Mfm :text="preview_font" />
-							<MkTextarea v-model="preview_font"
-								><template #label>MFM</template></MkTextarea
+							<Textarea v-model="preview_font"
+								><template #label>MFM</template></Textarea
 							>
 						</div>
 					</div>
@@ -191,8 +193,8 @@
 						<p>{{ i18n.ts._mfm.x2Description }}</p>
 						<div class="preview">
 							<Mfm :text="preview_x2" />
-							<MkTextarea v-model="preview_x2"
-								><template #label>MFM</template></MkTextarea
+							<Textarea v-model="preview_x2"
+								><template #label>MFM</template></Textarea
 							>
 						</div>
 					</div>
@@ -203,8 +205,8 @@
 						<p>{{ i18n.ts._mfm.x3Description }}</p>
 						<div class="preview">
 							<Mfm :text="preview_x3" />
-							<MkTextarea v-model="preview_x3"
-								><template #label>MFM</template></MkTextarea
+							<Textarea v-model="preview_x3"
+								><template #label>MFM</template></Textarea
 							>
 						</div>
 					</div>
@@ -215,8 +217,8 @@
 						<p>{{ i18n.ts._mfm.x4Description }}</p>
 						<div class="preview">
 							<Mfm :text="preview_x4" />
-							<MkTextarea v-model="preview_x4"
-								><template #label>MFM</template></MkTextarea
+							<Textarea v-model="preview_x4"
+								><template #label>MFM</template></Textarea
 							>
 						</div>
 					</div>
@@ -227,8 +229,8 @@
 						<p>{{ i18n.ts._mfm.blurDescription }}</p>
 						<div class="preview">
 							<Mfm :text="preview_blur" />
-							<MkTextarea v-model="preview_blur"
-								><template #label>MFM</template></MkTextarea
+							<Textarea v-model="preview_blur"
+								><template #label>MFM</template></Textarea
 							>
 						</div>
 					</div>
@@ -239,8 +241,8 @@
 						<p>{{ i18n.ts._mfm.jellyDescription }}</p>
 						<div class="preview">
 							<Mfm :text="preview_jelly" />
-							<MkTextarea v-model="preview_jelly"
-								><template #label>MFM</template></MkTextarea
+							<Textarea v-model="preview_jelly"
+								><template #label>MFM</template></Textarea
 							>
 						</div>
 					</div>
@@ -251,8 +253,8 @@
 						<p>{{ i18n.ts._mfm.tadaDescription }}</p>
 						<div class="preview">
 							<Mfm :text="preview_tada" />
-							<MkTextarea v-model="preview_tada"
-								><template #label>MFM</template></MkTextarea
+							<Textarea v-model="preview_tada"
+								><template #label>MFM</template></Textarea
 							>
 						</div>
 					</div>
@@ -263,8 +265,8 @@
 						<p>{{ i18n.ts._mfm.jumpDescription }}</p>
 						<div class="preview">
 							<Mfm :text="preview_jump" />
-							<MkTextarea v-model="preview_jump"
-								><template #label>MFM</template></MkTextarea
+							<Textarea v-model="preview_jump"
+								><template #label>MFM</template></Textarea
 							>
 						</div>
 					</div>
@@ -275,8 +277,8 @@
 						<p>{{ i18n.ts._mfm.bounceDescription }}</p>
 						<div class="preview">
 							<Mfm :text="preview_bounce" />
-							<MkTextarea v-model="preview_bounce"
-								><template #label>MFM</template></MkTextarea
+							<Textarea v-model="preview_bounce"
+								><template #label>MFM</template></Textarea
 							>
 						</div>
 					</div>
@@ -287,8 +289,8 @@
 						<p>{{ i18n.ts._mfm.spinDescription }}</p>
 						<div class="preview">
 							<Mfm :text="preview_spin" />
-							<MkTextarea v-model="preview_spin"
-								><template #label>MFM</template></MkTextarea
+							<Textarea v-model="preview_spin"
+								><template #label>MFM</template></Textarea
 							>
 						</div>
 					</div>
@@ -299,8 +301,8 @@
 						<p>{{ i18n.ts._mfm.shakeDescription }}</p>
 						<div class="preview">
 							<Mfm :text="preview_shake" />
-							<MkTextarea v-model="preview_shake"
-								><template #label>MFM</template></MkTextarea
+							<Textarea v-model="preview_shake"
+								><template #label>MFM</template></Textarea
 							>
 						</div>
 					</div>
@@ -311,8 +313,8 @@
 						<p>{{ i18n.ts._mfm.twitchDescription }}</p>
 						<div class="preview">
 							<Mfm :text="preview_twitch" />
-							<MkTextarea v-model="preview_twitch"
-								><template #label>MFM</template></MkTextarea
+							<Textarea v-model="preview_twitch"
+								><template #label>MFM</template></Textarea
 							>
 						</div>
 					</div>
@@ -323,8 +325,8 @@
 						<p>{{ i18n.ts._mfm.rainbowDescription }}</p>
 						<div class="preview">
 							<Mfm :text="preview_rainbow" />
-							<MkTextarea v-model="preview_rainbow"
-								><template #label>MFM</template></MkTextarea
+							<Textarea v-model="preview_rainbow"
+								><template #label>MFM</template></Textarea
 							>
 						</div>
 					</div>
@@ -335,8 +337,8 @@
 						<p>{{ i18n.ts._mfm.sparkleDescription }}</p>
 						<div class="preview">
 							<Mfm :text="preview_sparkle" />
-							<MkTextarea v-model="preview_sparkle"
-								><span>MFM</span></MkTextarea
+							<Textarea v-model="preview_sparkle"
+								><span>MFM</span></Textarea
 							>
 						</div>
 					</div>
@@ -347,8 +349,8 @@
 						<p>{{ i18n.ts._mfm.rotateDescription }}</p>
 						<div class="preview">
 							<Mfm :text="preview_rotate" />
-							<MkTextarea v-model="preview_rotate"
-								><span>MFM</span></MkTextarea
+							<Textarea v-model="preview_rotate"
+								><span>MFM</span></Textarea
 							>
 						</div>
 					</div>
@@ -359,8 +361,8 @@
 						<p>{{ i18n.ts._mfm.fadeDescription }}</p>
 						<div class="preview">
 							<Mfm :text="preview_fade" />
-							<MkTextarea v-model="preview_fade"
-								><span>MFM</span></MkTextarea
+							<Textarea v-model="preview_fade"
+								><span>MFM</span></Textarea
 							>
 						</div>
 					</div>
@@ -371,8 +373,8 @@
 						<p>{{ i18n.ts._mfm.cropDescription }}</p>
 						<div class="preview">
 							<Mfm :text="preview_crop" />
-							<MkTextarea v-model="preview_crop"
-								><span>MFM</span></MkTextarea
+							<Textarea v-model="preview_crop"
+								><span>MFM</span></Textarea
 							>
 						</div>
 					</div>
@@ -383,8 +385,8 @@
 						<p>{{ i18n.ts._mfm.positionDescription }}</p>
 						<div class="preview">
 							<Mfm :text="preview_position" />
-							<MkTextarea v-model="preview_position"
-								><span>MFM</span></MkTextarea
+							<Textarea v-model="preview_position"
+								><span>MFM</span></Textarea
 							>
 						</div>
 					</div>
@@ -395,8 +397,8 @@
 						<p>{{ i18n.ts._mfm.scaleDescription }}</p>
 						<div class="preview">
 							<Mfm :text="preview_scale" />
-							<MkTextarea v-model="preview_scale"
-								><span>MFM</span></MkTextarea
+							<Textarea v-model="preview_scale"
+								><span>MFM</span></Textarea
 							>
 						</div>
 					</div>
@@ -407,8 +409,8 @@
 						<p>{{ i18n.ts._mfm.foregroundDescription }}</p>
 						<div class="preview">
 							<Mfm :text="preview_fg" />
-							<MkTextarea v-model="preview_fg"
-								><span>MFM</span></MkTextarea
+							<Textarea v-model="preview_fg"
+								><span>MFM</span></Textarea
 							>
 						</div>
 					</div>
@@ -419,8 +421,8 @@
 						<p>{{ i18n.ts._mfm.backgroundDescription }}</p>
 						<div class="preview">
 							<Mfm :text="preview_bg" />
-							<MkTextarea v-model="preview_bg"
-								><span>MFM</span></MkTextarea
+							<Textarea v-model="preview_bg"
+								><span>MFM</span></Textarea
 							>
 						</div>
 					</div>
@@ -431,20 +433,20 @@
 						<p>{{ i18n.ts._mfm.plainDescription }}</p>
 						<div class="preview">
 							<Mfm :text="preview_plain" />
-							<MkTextarea v-model="preview_plain"
-								><span>MFM</span></MkTextarea
+							<Textarea v-model="preview_plain"
+								><span>MFM</span></Textarea
 							>
 						</div>
 					</div>
 				</div>
 			</div>
-		</MkSpacer>
-	</MkStickyContainer>
+		</Spacer>
+	</StickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { defineComponent } from "vue";
-import MkTextarea from "@/components/form/textarea.vue";
+import Textarea 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 7fedce007..234df3cc8 100644
--- a/packages/client/src/pages/miauth.vue
+++ b/packages/client/src/pages/MiAuth.vue
@@ -1,9 +1,9 @@
 <template>
-	<MkSpacer :content-max="800">
+	<Spacer :content-max="800">
 		<div v-if="$i">
 			<div v-if="state == 'waiting'" class="waiting _section">
 				<div class="_content">
-					<MkLoading />
+					<Loading />
 				</div>
 			</div>
 			<div v-if="state == 'denied'" class="denied _section">
@@ -14,7 +14,8 @@
 			<div v-else-if="state == 'accepted'" class="accepted _section">
 				<div class="_content">
 					<p v-if="callback">
-						{{ i18n.ts._auth.callback }}<MkEllipsis />
+						{{ i18n.ts._auth.callback }}
+						<Ellipsis />
 					</p>
 					<p v-else>{{ i18n.ts._auth.pleaseGoBack }}</p>
 				</div>
@@ -62,25 +63,23 @@
 					</div>
 				</div>
 				<div class="_footer">
-					<MkButton inline @click="deny">{{
-						i18n.ts.cancel
-					}}</MkButton>
-					<MkButton inline primary @click="accept">{{
+					<Button inline @click="deny">{{ i18n.ts.cancel }}</Button>
+					<Button inline primary @click="accept">{{
 						i18n.ts.accept
-					}}</MkButton>
+					}}</Button>
 				</div>
 			</div>
 		</div>
 		<div v-else class="signin">
-			<MkSignin @login="onLogin" />
+			<Signin @login="onLogin" />
 		</div>
-	</MkSpacer>
+	</Spacer>
 </template>
 
 <script lang="ts" setup>
 import {} from "vue";
-import MkSignin from "@/components/MkSignin.vue";
-import MkButton from "@/components/MkButton.vue";
+import Signin from "@/components/Signin.vue";
+import Button from "@/components/Button.vue";
 import * as os from "@/os";
 import { $i, login } from "@/account";
 import { appendQuery, query } from "@/scripts/url";
diff --git a/packages/client/src/pages/no-graze.vue b/packages/client/src/pages/NoGraze.vue
similarity index 81%
rename from packages/client/src/pages/no-graze.vue
rename to packages/client/src/pages/NoGraze.vue
index 8b4617cfc..749a2bb3a 100644
--- a/packages/client/src/pages/no-graze.vue
+++ b/packages/client/src/pages/NoGraze.vue
@@ -1,11 +1,7 @@
 <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 }}
@@ -16,7 +12,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/not-found.vue b/packages/client/src/pages/NotFound.vue
similarity index 100%
rename from packages/client/src/pages/not-found.vue
rename to packages/client/src/pages/NotFound.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 6e46df45b..96bb78fff 100644
--- a/packages/client/src/pages/note.vue
+++ b/packages/client/src/pages/Note.vue
@@ -1,13 +1,14 @@
 <template>
-	<MkStickyContainer>
-		<template #header
-			><MkPageHeader
+	<StickyContainer>
+		<template #header>
+			<PageHeader
 				:actions="headerActions"
 				:tabs="headerTabs"
 				:display-back-button="true"
 				:to="`#${noteId}`"
-		/></template>
-		<MkSpacer :content-max="800" :marginMin="6">
+			/>
+		</template>
+		<Spacer :content-max="800" :marginMin="6">
 			<div class="fcuexfpr">
 				<transition
 					:name="$store.state.animation ? 'fade' : ''"
@@ -16,7 +17,7 @@
 					<div v-if="appearNote" class="note">
 						<div class="main _gap">
 							<div class="note _gap">
-								<MkRemoteCaution
+								<RemoteCaution
 									v-if="appearNote.user.host != null"
 									:href="appearNote.url ?? appearNote.uri"
 								/>
@@ -29,21 +30,21 @@
 							</div>
 						</div>
 					</div>
-					<MkError v-else-if="error" @retry="fetch()" />
-					<MkLoading v-else />
+					<Error v-else-if="error" @retry="fetch()" />
+					<Loading v-else />
 				</transition>
 			</div>
-		</MkSpacer>
-	</MkStickyContainer>
+		</Spacer>
+	</StickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { computed, defineComponent, watch } from "vue";
 import * as misskey from "iceshrimp-js";
-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 XNoteDetailed from "@/components/NoteDetailed.vue";
+import XNotes from "@/components/Notes.vue";
+import RemoteCaution from "@/components/RemoteCaution.vue";
+import Button from "@/components/Button.vue";
 import * as os from "@/os";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import { i18n } from "@/i18n";
@@ -115,13 +116,21 @@ 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(() => []);
 
@@ -154,6 +163,7 @@ 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 34df09c46..11732654c 100644
--- a/packages/client/src/pages/notifications.vue
+++ b/packages/client/src/pages/Notifications.vue
@@ -1,14 +1,14 @@
 <template>
-	<MkStickyContainer>
+	<StickyContainer>
 		<template #header>
-			<MkPageHeader
+			<PageHeader
 				v-model:tab="tab"
 				:actions="headerActions"
 				:tabs="headerTabs"
 				:display-my-avatar="true"
 			/>
 		</template>
-		<MkSpacer :content-max="800">
+		<Spacer :content-max="800">
 			<swiper
 				:round-lengths="true"
 				:touch-angle="25"
@@ -46,8 +46,8 @@
 					<XNotes :pagination="directNotesPagination" />
 				</swiper-slide>
 			</swiper>
-		</MkSpacer>
-	</MkStickyContainer>
+		</Spacer>
+	</StickyContainer>
 </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/MkNotifications.vue";
-import XNotes from "@/components/MkNotes.vue";
+import XNotifications from "@/components/Notifications.vue";
+import XNotes from "@/components/Notes.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 d33151b87..06e528668 100644
--- a/packages/client/src/pages/oauth.vue
+++ b/packages/client/src/pages/OAuth.vue
@@ -16,7 +16,10 @@
 					<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>
@@ -24,9 +27,7 @@
 			</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">
@@ -40,14 +41,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>
@@ -55,11 +56,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>
@@ -71,8 +72,8 @@
 
 <script lang="ts" setup>
 import {} from "vue";
-import MkSignin from "@/components/MkSignin.vue";
-import MkButton from "@/components/MkButton.vue";
+import MkSignin from "@/components/Signin.vue";
+import MkButton from "@/components/Button.vue";
 import * as os from "@/os";
 import { $i, login } from "@/account";
 import { appendQuery, query } from "@/scripts/url";
@@ -87,68 +88,74 @@ 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";
 	}
@@ -182,4 +189,4 @@ async function onLogin(res): Promise<void> {
 	background-color: var(--buttonBg);
 	color: var(--fg);
 }
-</style>
\ No newline at end of file
+</style>
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 069d5da29..7fa16df5c 100644
--- a/packages/client/src/pages/page.vue
+++ b/packages/client/src/pages/Page.vue
@@ -1,12 +1,13 @@
 <template>
-	<MkStickyContainer>
-		<template #header
-			><MkPageHeader
+	<StickyContainer>
+		<template #header>
+			<PageHeader
 				:actions="headerActions"
 				:tabs="headerTabs"
 				:display-back-button="true"
-		/></template>
-		<MkSpacer :content-max="800">
+			/>
+		</template>
+		<Spacer :content-max="800">
 			<transition
 				:name="$store.state.animation ? 'fade' : ''"
 				mode="out-in"
@@ -21,12 +22,12 @@
 						<div>
 							<i class="ph-alarm ph-bold" />
 							{{ i18n.ts.createdAt }}:
-							<MkTime :time="page.createdAt" mode="detail" />
+							<Time :time="page.createdAt" mode="detail" />
 						</div>
 						<div v-if="page.createdAt != page.updatedAt">
 							<i class="ph-alarm ph-bold"></i>
 							{{ i18n.ts.updatedAt }}:
-							<MkTime :time="page.updatedAt" mode="detail" />
+							<Time :time="page.updatedAt" mode="detail" />
 						</div>
 					</div>
 					<div class="_block main">
@@ -45,23 +46,23 @@
 											class="ph-link-simple ph-bold ph-lg"
 										/>
 									</button>
-									<MkA
+									<A
 										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"
-									/></MkA>
+									/></A>
 									<template
 										v-if="$i && $i.id === page.userId"
 									>
-										<MkA
+										<A
 											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"
-										/></MkA>
+										/></A>
 										<button
 											v-if="$i.pinnedPageId === page.id"
 											v-tooltip="i18n.ts.unpin"
@@ -91,7 +92,7 @@
 						</div>
 						<div class="actions">
 							<div class="like">
-								<MkButton
+								<Button
 									v-if="page.isLiked"
 									v-tooltip="i18n.ts._pages.unlike"
 									class="button"
@@ -102,9 +103,9 @@
 										v-if="page.likedCount > 0"
 										class="count"
 										>{{ page.likedCount }}</span
-									></MkButton
+									></Button
 								>
-								<MkButton
+								<Button
 									v-else
 									v-tooltip="i18n.ts._pages.like"
 									class="button"
@@ -114,7 +115,7 @@
 										v-if="page.likedCount > 0"
 										class="count"
 										>{{ page.likedCount }}</span
-									></MkButton
+									></Button
 								>
 							</div>
 							<div class="other">
@@ -141,15 +142,15 @@
 								</button>
 							</div>
 							<div class="user">
-								<MkAvatar :user="page.user" class="avatar" />
+								<Avatar :user="page.user" class="avatar" />
 								<div class="name">
-									<MkUserName
+									<UserName
 										:user="page.user"
 										style="display: block"
 									/>
-									<MkAcct :user="page.user" />
+									<Acct :user="page.user" />
 								</div>
-								<MkFollowButton
+								<FollowButton
 									v-if="!$i || $i.id != page.user.id"
 									:user="page.user"
 									:inline="true"
@@ -160,15 +161,15 @@
 							</div>
 						</div>
 						<!-- <div class="links">
-						<MkA :to="`/@${username}/pages/${pageName}/view-source`" class="link">{{ i18n.ts._pages.viewSource }}</MkA>
+						<A :to="`/@${username}/pages/${pageName}/view-source`" class="link">{{ i18n.ts._pages.viewSource }}</A>
 						<template v-if="$i && $i.id === page.userId">
-							<MkA :to="`/pages/edit/${page.id}`" class="link">{{ i18n.ts._pages.editThisPage }}</MkA>
+							<A :to="`/pages/edit/${page.id}`" class="link">{{ i18n.ts._pages.editThisPage }}</A>
 							<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>
-					<MkContainer
+					<Container
 						:max-height="300"
 						:foldable="true"
 						:expanded="false"
@@ -178,36 +179,36 @@
 							><i class="ph-clock ph-bold ph-lg"></i>
 							{{ i18n.ts.recentPosts }}</template
 						>
-						<MkPagination
+						<Pagination
 							v-slot="{ items }"
 							:pagination="otherPostsPagination"
 						>
-							<MkPagePreview
+							<PagePreview
 								v-for="page in items"
 								:key="page.id"
 								:page="page"
 								class="_gap"
 							/>
-						</MkPagination>
-					</MkContainer>
+						</Pagination>
+					</Container>
 				</div>
-				<MkError v-else-if="error" @retry="fetchPage()" />
-				<MkLoading v-else />
+				<Error v-else-if="error" @retry="fetchPage()" />
+				<Loading v-else />
 			</transition>
-		</MkSpacer>
-	</MkStickyContainer>
+		</Spacer>
+	</StickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { computed, watch } from "vue";
-import XPage from "@/components/page/page.vue";
-import MkButton from "@/components/MkButton.vue";
+import XPage from "@/components/page/Page.vue";
+import Button from "@/components/Button.vue";
 import * as os from "@/os";
 import { url } from "@/config";
-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 FollowButton from "@/components/FollowButton.vue";
+import Container from "@/components/Container.vue";
+import Pagination from "@/components/Pagination.vue";
+import PagePreview from "@/components/PagePreview.vue";
 import { i18n } from "@/i18n";
 import copyToClipboard from "@/scripts/copy-to-clipboard";
 import { definePageMetadata } from "@/scripts/page-metadata";
@@ -315,7 +316,7 @@ definePageMetadata(
 						title: page.title || page.name,
 						text: page.summary,
 					},
-				}
+			  }
 			: null,
 	),
 );
@@ -326,6 +327,7 @@ 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 6b051f683..c055dd62c 100644
--- a/packages/client/src/pages/pages.vue
+++ b/packages/client/src/pages/Pages.vue
@@ -1,12 +1,13 @@
 <template>
-	<MkStickyContainer>
-		<template #header
-			><MkPageHeader
+	<StickyContainer>
+		<template #header>
+			<PageHeader
 				v-model:tab="tab"
 				:actions="headerActions"
 				:tabs="headerTabs"
-		/></template>
-		<MkSpacer :content-max="700">
+			/>
+		</template>
+		<Spacer :content-max="700">
 			<swiper
 				:round-lengths="true"
 				:touch-angle="25"
@@ -25,67 +26,67 @@
 			>
 				<swiper-slide>
 					<div class="rknalgpo">
-						<MkPagination
+						<Pagination
 							v-slot="{ items }"
 							:pagination="featuredPagesPagination"
 						>
-							<MkPagePreview
+							<PagePreview
 								v-for="page in items"
 								:key="page.id"
 								class="ckltabjg"
 								:page="page"
 							/>
-						</MkPagination>
+						</Pagination>
 					</div>
 				</swiper-slide>
 				<swiper-slide>
 					<div class="rknalgpo liked">
-						<MkPagination
+						<Pagination
 							v-slot="{ items }"
 							:pagination="likedPagesPagination"
 						>
-							<MkPagePreview
+							<PagePreview
 								v-for="like in items"
 								:key="like.page.id"
 								class="ckltabjg"
 								:page="like.page"
 							/>
-						</MkPagination>
+						</Pagination>
 					</div>
 				</swiper-slide>
 				<swiper-slide>
 					<div class="rknalgpo my">
 						<div class="buttoncontainer">
-							<MkButton class="new primary" @click="create()"
+							<Button class="new primary" @click="create()"
 								><i class="ph-plus ph-bold ph-lg"></i>
-								{{ i18n.ts._pages.newPage }}</MkButton
+								{{ i18n.ts._pages.newPage }}</Button
 							>
 						</div>
-						<MkPagination
+						<Pagination
 							v-slot="{ items }"
 							:pagination="myPagesPagination"
 						>
-							<MkPagePreview
+							<PagePreview
 								v-for="mypage in items"
 								:key="mypage.id"
 								class="ckltabjg"
 								:page="mypage"
 							/>
-						</MkPagination>
+						</Pagination>
 					</div>
 				</swiper-slide>
 			</swiper>
-		</MkSpacer>
-	</MkStickyContainer>
+		</Spacer>
+	</StickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { computed, watch, onMounted } from "vue";
 import { Virtual } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/vue";
-import MkPagePreview from "@/components/MkPagePreview.vue";
-import MkPagination from "@/components/MkPagination.vue";
-import MkButton from "@/components/MkButton.vue";
+import PagePreview from "@/components/PagePreview.vue";
+import Pagination from "@/components/Pagination.vue";
+import Button from "@/components/Button.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 cfec4bd38..2f9c4afa4 100644
--- a/packages/client/src/pages/preview.vue
+++ b/packages/client/src/pages/Preview.vue
@@ -1,12 +1,12 @@
 <template>
 	<div class="graojtoi">
-		<MkSample />
+		<Sample />
 	</div>
 </template>
 
 <script lang="ts" setup>
 import { computed } from "vue";
-import MkSample from "@/components/MkSample.vue";
+import Sample from "@/components/Sample.vue";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 
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 7bb300c99..a46cd8511 100644
--- a/packages/client/src/pages/registry.vue
+++ b/packages/client/src/pages/Registry.vue
@@ -1,12 +1,12 @@
 <template>
-	<MkStickyContainer>
-		<template #header
-			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
-		/></template>
-		<MkSpacer :content-max="600" :margin-min="16">
-			<MkButton primary @click="createKey">{{
+	<StickyContainer>
+		<template #header>
+			<PageHeader :actions="headerActions" :tabs="headerTabs" />
+		</template>
+		<Spacer :content-max="600" :margin-min="16">
+			<Button primary @click="createKey">{{
 				i18n.ts._registry.createKey
-			}}</MkButton>
+			}}</Button>
 
 			<FormSection v-if="scopes">
 				<template #label>{{ i18n.ts.system }}</template>
@@ -19,8 +19,8 @@
 					>
 				</div>
 			</FormSection>
-		</MkSpacer>
-	</MkStickyContainer>
+		</Spacer>
+	</StickyContainer>
 </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 MkButton from "@/components/MkButton.vue";
+import FormLink from "@/components/form/Link.vue";
+import FormSection from "@/components/form/Section.vue";
+import Button from "@/components/Button.vue";
 
 let scopes = $ref(null);
 
diff --git a/packages/client/src/pages/registry.keys.vue b/packages/client/src/pages/RegistryKeys.vue
similarity index 76%
rename from packages/client/src/pages/registry.keys.vue
rename to packages/client/src/pages/RegistryKeys.vue
index bdc258489..d52481af9 100644
--- a/packages/client/src/pages/registry.keys.vue
+++ b/packages/client/src/pages/RegistryKeys.vue
@@ -1,23 +1,23 @@
 <template>
-	<MkStickyContainer>
-		<template #header
-			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
-		/></template>
-		<MkSpacer :content-max="600" :margin-min="16">
+	<StickyContainer>
+		<template #header>
+			<PageHeader :actions="headerActions" :tabs="headerTabs" />
+		</template>
+		<Spacer :content-max="600" :margin-min="16">
 			<FormSplit>
-				<MkKeyValue class="_formBlock">
+				<KeyValue class="_formBlock">
 					<template #key>{{ i18n.ts._registry.domain }}</template>
 					<template #value>{{ i18n.ts.system }}</template>
-				</MkKeyValue>
-				<MkKeyValue class="_formBlock">
+				</KeyValue>
+				<KeyValue class="_formBlock">
 					<template #key>{{ i18n.ts._registry.scope }}</template>
 					<template #value>{{ scope.join("/") }}</template>
-				</MkKeyValue>
+				</KeyValue>
 			</FormSplit>
 
-			<MkButton primary @click="createKey">{{
+			<Button primary @click="createKey">{{
 				i18n.ts._registry.createKey
-			}}</MkButton>
+			}}</Button>
 
 			<FormSection v-if="keys">
 				<template #label>{{ i18n.ts.keys }}</template>
@@ -35,8 +35,8 @@
 					>
 				</div>
 			</FormSection>
-		</MkSpacer>
-	</MkStickyContainer>
+		</Spacer>
+	</StickyContainer>
 </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 MkButton from "@/components/MkButton.vue";
-import MkKeyValue from "@/components/MkKeyValue.vue";
-import FormSplit from "@/components/form/split.vue";
+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";
 
 const props = defineProps<{
 	path: string;
diff --git a/packages/client/src/pages/registry.value.vue b/packages/client/src/pages/RegistryValue.vue
similarity index 70%
rename from packages/client/src/pages/registry.value.vue
rename to packages/client/src/pages/RegistryValue.vue
index b95061c7e..e2fe42c00 100644
--- a/packages/client/src/pages/registry.value.vue
+++ b/packages/client/src/pages/RegistryValue.vue
@@ -1,27 +1,27 @@
 <template>
-	<MkStickyContainer>
-		<template #header
-			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
-		/></template>
-		<MkSpacer :content-max="600" :margin-min="16">
+	<StickyContainer>
+		<template #header>
+			<PageHeader :actions="headerActions" :tabs="headerTabs" />
+		</template>
+		<Spacer :content-max="600" :margin-min="16">
 			<FormInfo warn>{{
 				i18n.ts.editTheseSettingsMayBreakAccount
 			}}</FormInfo>
 
 			<template v-if="value">
 				<FormSplit>
-					<MkKeyValue class="_formBlock">
+					<KeyValue class="_formBlock">
 						<template #key>{{ i18n.ts._registry.domain }}</template>
 						<template #value>{{ i18n.ts.system }}</template>
-					</MkKeyValue>
-					<MkKeyValue class="_formBlock">
+					</KeyValue>
+					<KeyValue class="_formBlock">
 						<template #key>{{ i18n.ts._registry.scope }}</template>
 						<template #value>{{ scope.join("/") }}</template>
-					</MkKeyValue>
-					<MkKeyValue class="_formBlock">
+					</KeyValue>
+					<KeyValue class="_formBlock">
 						<template #key>{{ i18n.ts._registry.key }}</template>
 						<template #value>{{ key }}</template>
-					</MkKeyValue>
+					</KeyValue>
 				</FormSplit>
 
 				<FormTextarea
@@ -32,25 +32,25 @@
 					<template #label>{{ i18n.ts.value }} (JSON)</template>
 				</FormTextarea>
 
-				<MkButton class="_formBlock" primary @click="save"
+				<Button class="_formBlock" primary @click="save"
 					><i class="ph-floppy-disk-back ph-bold ph-lg"></i>
-					{{ i18n.ts.save }}</MkButton
+					{{ i18n.ts.save }}</Button
 				>
 
-				<MkKeyValue class="_formBlock">
+				<KeyValue class="_formBlock">
 					<template #key>{{ i18n.ts.updatedAt }}</template>
 					<template #value
-						><MkTime :time="value.updatedAt" mode="detail"
+						><Time :time="value.updatedAt" mode="detail"
 					/></template>
-				</MkKeyValue>
+				</KeyValue>
 
-				<MkButton danger @click="del"
+				<Button danger @click="del"
 					><i class="ph-trash ph-bold ph-lg"></i>
-					{{ i18n.ts.delete }}</MkButton
+					{{ i18n.ts.delete }}</Button
 				>
 			</template>
-		</MkSpacer>
-	</MkStickyContainer>
+		</Spacer>
+	</StickyContainer>
 </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 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";
+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";
 
 const props = defineProps<{
 	path: string;
diff --git a/packages/client/src/pages/reset-password.vue b/packages/client/src/pages/ResetPassword.vue
similarity index 80%
rename from packages/client/src/pages/reset-password.vue
rename to packages/client/src/pages/ResetPassword.vue
index 395bf11f9..c19bab849 100644
--- a/packages/client/src/pages/reset-password.vue
+++ b/packages/client/src/pages/ResetPassword.vue
@@ -1,9 +1,9 @@
 <template>
-	<MkStickyContainer>
-		<template #header
-			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
-		/></template>
-		<MkSpacer
+	<StickyContainer>
+		<template #header>
+			<PageHeader :actions="headerActions" :tabs="headerTabs" />
+		</template>
+		<Spacer
 			v-if="token"
 			:content-max="700"
 			:margin-min="16"
@@ -25,14 +25,14 @@
 					i18n.ts.save
 				}}</FormButton>
 			</div>
-		</MkSpacer>
-	</MkStickyContainer>
+		</Spacer>
+	</StickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { defineAsyncComponent, onMounted } from "vue";
-import FormInput from "@/components/form/input.vue";
-import FormButton from "@/components/MkButton.vue";
+import FormInput from "@/components/form/Input.vue";
+import FormButton from "@/components/Button.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/MkForgotPassword.vue"),
+				() => import("@/components/ForgotPassword.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 77b4bf835..54ed700a3 100644
--- a/packages/client/src/pages/scratchpad.vue
+++ b/packages/client/src/pages/Scratchpad.vue
@@ -8,15 +8,15 @@
 				:highlight="highlighter"
 				:line-numbers="false"
 			/>
-			<MkButton
+			<Button
 				style="position: absolute; top: 8px; right: 8px"
 				primary
 				@click="run()"
 				><i class="ph-play ph-bold ph-lg"></i
-			></MkButton>
+			></Button>
 		</div>
 
-		<MkContainer :foldable="true" class="_gap">
+		<Container :foldable="true" class="_gap">
 			<template #header>{{ i18n.ts.output }}</template>
 			<div class="bepmlvbi">
 				<div
@@ -28,7 +28,7 @@
 					{{ log.text }}
 				</div>
 			</div>
-		</MkContainer>
+		</Container>
 
 		<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 MkContainer from "@/components/MkContainer.vue";
-import MkButton from "@/components/MkButton.vue";
+import Container from "@/components/Container.vue";
+import Button from "@/components/Button.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 24043fbb1..d65f002be 100644
--- a/packages/client/src/pages/search.vue
+++ b/packages/client/src/pages/Search.vue
@@ -1,13 +1,14 @@
 <template>
-	<MkStickyContainer>
-		<template #header
-			><MkPageHeader
+	<StickyContainer>
+		<template #header>
+			<PageHeader
 				v-model:tab="tab"
 				:actions="headerActions"
 				:tabs="headerTabs"
 				:display-back-button="true"
-		/></template>
-		<MkSpacer :content-max="800">
+			/>
+		</template>
+		<Spacer :content-max="800">
 			<swiper
 				:round-lengths="true"
 				:touch-angle="25"
@@ -29,7 +30,10 @@
 						<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"
@@ -37,7 +41,7 @@
 									alt="Info"
 								/>
 								<div>
-									{{ i18n.ts.searchNotLoggedIn_1 }}<br>
+									{{ i18n.ts.searchNotLoggedIn_1 }}<br />
 									{{ i18n.ts.searchNotLoggedIn_2 }}
 								</div>
 							</div>
@@ -52,16 +56,16 @@
 					/>
 				</swiper-slide>
 			</swiper>
-		</MkSpacer>
-	</MkStickyContainer>
+		</Spacer>
+	</StickyContainer>
 </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/MkNotes.vue";
-import XUserList from "@/components/MkUserList.vue";
+import XNotes from "@/components/Notes.vue";
+import XUserList from "@/components/UserList.vue";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import { defaultStore } from "@/store";
@@ -69,7 +73,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/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 d43c67528..09f55573b 100644
--- a/packages/client/src/pages/share.vue
+++ b/packages/client/src/pages/Share.vue
@@ -1,9 +1,9 @@
 <template>
-	<MkStickyContainer>
-		<template #header
-			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
-		/></template>
-		<MkSpacer :content-max="800">
+	<StickyContainer>
+		<template #header>
+			<PageHeader :actions="headerActions" :tabs="headerTabs" />
+		</template>
+		<Spacer :content-max="800">
 			<XPostForm
 				v-if="state === 'writing'"
 				fixed
@@ -18,15 +18,15 @@
 				class="_panel"
 				@posted="state = 'posted'"
 			/>
-			<MkButton
+			<Button
 				v-else-if="state === 'posted'"
 				primary
 				class="close"
 				@click="close()"
-				>{{ i18n.ts.close }}</MkButton
+				>{{ i18n.ts.close }}</Button
 			>
-		</MkSpacer>
-	</MkStickyContainer>
+		</Spacer>
+	</StickyContainer>
 </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 MkButton from "@/components/MkButton.vue";
-import XPostForm from "@/components/MkPostForm.vue";
+import Button from "@/components/Button.vue";
+import XPostForm from "@/components/PostForm.vue";
 import * as os from "@/os";
 import { mainRouter } from "@/router";
 import { definePageMetadata } from "@/scripts/page-metadata";
diff --git a/packages/client/src/pages/signup-complete.vue b/packages/client/src/pages/SignupComplete.vue
similarity index 100%
rename from packages/client/src/pages/signup-complete.vue
rename to packages/client/src/pages/SignupComplete.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 e9a1792a0..c0e875f6b 100644
--- a/packages/client/src/pages/tag.vue
+++ b/packages/client/src/pages/Tag.vue
@@ -1,13 +1,14 @@
 <template>
-	<MkStickyContainer>
-		<template #header
-			><MkPageHeader
+	<StickyContainer>
+		<template #header>
+			<PageHeader
 				v-model:tab="tab"
 				:actions="headerActions"
 				:tabs="headerTabs"
 				:display-back-button="true"
-		/></template>
-		<MkSpacer :content-max="800">
+			/>
+		</template>
+		<Spacer :content-max="800">
 			<swiper
 				:round-lengths="true"
 				:touch-angle="25"
@@ -35,16 +36,16 @@
 					/>
 				</swiper-slide>
 			</swiper>
-		</MkSpacer>
-	</MkStickyContainer>
+		</Spacer>
+	</StickyContainer>
 </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/MkNotes.vue";
-import XUserList from "@/components/MkUserList.vue";
+import XNotes from "@/components/Notes.vue";
+import XUserList from "@/components/UserList.vue";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import { defaultStore } from "@/store";
diff --git a/packages/client/src/pages/theme-editor.vue b/packages/client/src/pages/ThemeEditor.vue
similarity index 95%
rename from packages/client/src/pages/theme-editor.vue
rename to packages/client/src/pages/ThemeEditor.vue
index cec2cb980..16aea910f 100644
--- a/packages/client/src/pages/theme-editor.vue
+++ b/packages/client/src/pages/ThemeEditor.vue
@@ -1,9 +1,9 @@
 <template>
-	<MkStickyContainer>
-		<template #header
-			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
-		/></template>
-		<MkSpacer :content-max="800" :margin-min="16" :margin-max="32">
+	<StickyContainer>
+		<template #header>
+			<PageHeader :actions="headerActions" :tabs="headerTabs" />
+		</template>
+		<Spacer :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>
-		</MkSpacer>
-	</MkStickyContainer>
+		</Spacer>
+	</StickyContainer>
 </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/MkButton.vue";
-import FormTextarea from "@/components/form/textarea.vue";
-import FormFolder from "@/components/form/folder.vue";
+import FormButton from "@/components/Button.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 930a9635a..cd780af44 100644
--- a/packages/client/src/pages/timeline.vue
+++ b/packages/client/src/pages/Timeline.vue
@@ -1,14 +1,14 @@
 <template>
-	<MkStickyContainer>
+	<StickyContainer>
 		<template #header>
-			<MkPageHeader
+			<PageHeader
 				v-model:tab="src"
 				:actions="headerActions"
 				:tabs="headerTabs"
 				:display-my-avatar="true"
 			/>
 		</template>
-		<MkSpacer :content-max="800">
+		<Spacer :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>
-		</MkSpacer>
-	</MkStickyContainer>
+		</Spacer>
+	</StickyContainer>
 </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/MkTutorialDialog.vue";
-import XTimeline from "@/components/MkTimeline.vue";
-import XPostForm from "@/components/MkPostForm.vue";
+import XTutorial from "@/components/TutorialDialog.vue";
+import XTimeline from "@/components/Timeline.vue";
+import XPostForm from "@/components/PostForm.vue";
 import * as os from "@/os";
 import { defaultStore } from "@/store";
 import { i18n } from "@/i18n";
@@ -310,6 +310,7 @@ onMounted(() => {
 <style lang="scss" scoped>
 .cmuxhskf {
 	--swiper-theme-color: var(--accent);
+
 	> .tl {
 		background: none;
 	}
diff --git a/packages/client/src/pages/user-info.vue b/packages/client/src/pages/UserInfo.vue
similarity index 85%
rename from packages/client/src/pages/user-info.vue
rename to packages/client/src/pages/UserInfo.vue
index 433f4e4d6..13f806912 100644
--- a/packages/client/src/pages/user-info.vue
+++ b/packages/client/src/pages/UserInfo.vue
@@ -1,24 +1,25 @@
 <template>
-	<MkStickyContainer>
-		<template #header
-			><MkPageHeader
+	<StickyContainer>
+		<template #header>
+			<PageHeader
 				v-model:tab="tab"
 				:actions="headerActions"
 				:tabs="headerTabs"
-		/></template>
-		<MkSpacer :content-max="600" :margin-min="16" :margin-max="32">
+			/>
+		</template>
+		<Spacer :content-max="600" :margin-min="16" :margin-max="32">
 			<FormSuspense :p="init">
 				<div v-if="tab === 'overview'" class="_formRoot">
 					<div class="_formBlock aeakzknw">
-						<MkAvatar
+						<Avatar
 							class="avatar"
 							:user="user"
 							:show-indicator="true"
 						/>
 						<div class="body">
-							<span class="name"
-								><MkUserName class="name" :user="user"
-							/></span>
+							<span class="name">
+								<UserName class="name" :user="user" />
+							</span>
 							<span class="sub"
 								><span class="acct _monospace"
 									>@{{ acct(user) }}</span
@@ -38,11 +39,11 @@
 						</div>
 					</div>
 
-					<MkInfo
+					<Info
 						v-if="user.username.includes('.')"
 						class="_formBlock"
 						warn
-						>{{ i18n.ts.isSystemAccount }}</MkInfo
+						>{{ i18n.ts.isSystemAccount }}</Info
 					>
 
 					<div v-if="user.url" class="_formLinksGrid _formBlock">
@@ -63,59 +64,55 @@
 					>
 
 					<div class="_formBlock">
-						<MkKeyValue
-							:copy="user.id"
-							oneline
-							style="margin: 1em 0"
-						>
+						<KeyValue :copy="user.id" oneline style="margin: 1em 0">
 							<template #key>ID</template>
 							<template #value
 								><span class="_monospace">{{
 									user.id
 								}}</span></template
 							>
-						</MkKeyValue>
+						</KeyValue>
 						<!-- 要る？
-					<MkKeyValue v-if="ips.length > 0" :copy="user.id" oneline style="margin: 1em 0;">
+					<KeyValue 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>
-					</MkKeyValue>
+					</KeyValue>
 					-->
-						<MkKeyValue oneline style="margin: 1em 0">
+						<KeyValue oneline style="margin: 1em 0">
 							<template #key>{{ i18n.ts.createdAt }}</template>
 							<template #value
 								><span class="_monospace"
-									><MkTime
+									><Time
 										:time="user.createdAt"
 										:mode="'detail'" /></span
 							></template>
-						</MkKeyValue>
-						<MkKeyValue v-if="info" oneline style="margin: 1em 0">
+						</KeyValue>
+						<KeyValue v-if="info" oneline style="margin: 1em 0">
 							<template #key>{{
 								i18n.ts.lastActiveDate
 							}}</template>
 							<template #value
 								><span class="_monospace"
-									><MkTime
+									><Time
 										:time="info.lastActiveDate"
 										:mode="'detail'" /></span
 							></template>
-						</MkKeyValue>
-						<MkKeyValue v-if="info" oneline style="margin: 1em 0">
+						</KeyValue>
+						<KeyValue v-if="info" oneline style="margin: 1em 0">
 							<template #key>{{ i18n.ts.email }}</template>
 							<template #value
 								><span class="_monospace">{{
 									info.email
 								}}</span></template
 							>
-						</MkKeyValue>
+						</KeyValue>
 					</div>
 
 					<FormSection>
 						<template #label>ActivityPub</template>
 
 						<div class="_formBlock">
-							<MkKeyValue
+							<KeyValue
 								v-if="user.host"
 								oneline
 								style="margin: 1em 0"
@@ -124,41 +121,41 @@
 									i18n.ts.instanceInfo
 								}}</template>
 								<template #value
-									><MkA
+									><A
 										:to="`/instance-info/${user.host}`"
 										class="_link"
 										>{{ user.host }}
 										<i
 											class="ph-caret-right ph-bold ph-lg"
-										></i></MkA
+										></i></A
 								></template>
-							</MkKeyValue>
-							<MkKeyValue v-else oneline style="margin: 1em 0">
+							</KeyValue>
+							<KeyValue v-else oneline style="margin: 1em 0">
 								<template #key>{{
 									i18n.ts.instanceInfo
 								}}</template>
 								<template #value>(Local user)</template>
-							</MkKeyValue>
-							<MkKeyValue oneline style="margin: 1em 0">
+							</KeyValue>
+							<KeyValue oneline style="margin: 1em 0">
 								<template #key>{{
 									i18n.ts.updatedAt
 								}}</template>
 								<template #value
-									><MkTime
+									><Time
 										v-if="user.lastFetchedAt"
 										mode="detail"
 										:time="user.lastFetchedAt"
 									/><span v-else>N/A</span></template
 								>
-							</MkKeyValue>
-							<MkKeyValue v-if="ap" oneline style="margin: 1em 0">
+							</KeyValue>
+							<KeyValue v-if="ap" oneline style="margin: 1em 0">
 								<template #key>Type</template>
 								<template #value
 									><span class="_monospace">{{
 										ap.type
 									}}</span></template
 								>
-							</MkKeyValue>
+							</KeyValue>
 						</div>
 
 						<FormButton
@@ -172,8 +169,8 @@
 						<FormFolder class="_formBlock">
 							<template #label>Raw</template>
 
-							<MkObjectView v-if="ap" tall :value="ap">
-							</MkObjectView>
+							<ObjectView v-if="ap" tall :value="ap">
+							</ObjectView>
 						</FormFolder>
 					</FormSection>
 				</div>
@@ -187,8 +184,8 @@
 						v-model="moderator"
 						class="_formBlock"
 						@update:modelValue="toggleModerator"
-						>{{ i18n.ts.moderator }}</FormSwitch
-					>
+						>{{ i18n.ts.moderator }}
+					</FormSwitch>
 					<FormSwitch
 						v-model="silenced"
 						class="_formBlock"
@@ -235,12 +232,12 @@
 					</FormTextarea>
 					<FormFolder class="_formBlock">
 						<template #label>IP</template>
-						<MkInfo v-if="!iAmAdmin" warn>{{
+						<Info v-if="!iAmAdmin" warn>{{
 							i18n.ts.requireAdminForView
-						}}</MkInfo>
-						<MkInfo v-else
+						}}</Info>
+						<Info v-else
 							>The date is the IP address was first
-							acknowledged.</MkInfo
+							acknowledged.</Info
 						>
 						<template v-if="iAmAdmin && ips">
 							<div
@@ -258,7 +255,7 @@
 					<FormFolder class="_formBlock">
 						<template #label>{{ i18n.ts.files }}</template>
 
-						<MkFileListForAdmin
+						<FileListForAdmin
 							:pagination="filesPagination"
 							view-mode="grid"
 						/>
@@ -292,70 +289,70 @@
 				<div v-else-if="tab === 'chart'" class="_formRoot">
 					<div class="cmhjzshm">
 						<div class="selects">
-							<MkSelect
+							<Select
 								v-model="chartSrc"
 								style="margin: 0 10px 0 0; flex: 1"
 							>
 								<option value="per-user-notes">
 									{{ i18n.ts.notes }}
 								</option>
-							</MkSelect>
+							</Select>
 						</div>
 						<div class="charts">
 							<div class="label">
 								{{ i18n.t("recentNHours", { n: 90 }) }}
 							</div>
-							<MkChart
+							<Chart
 								class="chart"
 								:src="chartSrc"
 								span="hour"
 								:limit="90"
 								:args="{ user, withoutAll: true }"
 								:detailed="true"
-							></MkChart>
+							></Chart>
 							<div class="label">
 								{{ i18n.t("recentNDays", { n: 90 }) }}
 							</div>
-							<MkChart
+							<Chart
 								class="chart"
 								:src="chartSrc"
 								span="day"
 								:limit="90"
 								:args="{ user, withoutAll: true }"
 								:detailed="true"
-							></MkChart>
+							></Chart>
 						</div>
 					</div>
 				</div>
 				<div v-else-if="tab === 'raw'" class="_formRoot">
-					<MkObjectView v-if="info && $i.isAdmin" tall :value="info">
-					</MkObjectView>
+					<ObjectView v-if="info && $i.isAdmin" tall :value="info">
+					</ObjectView>
 
-					<MkObjectView tall :value="user"> </MkObjectView>
+					<ObjectView tall :value="user"> </ObjectView>
 				</div>
 			</FormSuspense>
-		</MkSpacer>
-	</MkStickyContainer>
+		</Spacer>
+	</StickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { computed, watch } from "vue";
 import * as misskey from "iceshrimp-js";
-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 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 * as os from "@/os";
 import number from "@/filters/number";
 import bytes from "@/filters/bytes";
diff --git a/packages/client/src/pages/user-list-timeline.vue b/packages/client/src/pages/UserListTimeline.vue
similarity index 90%
rename from packages/client/src/pages/user-list-timeline.vue
rename to packages/client/src/pages/UserListTimeline.vue
index b6e1127eb..6aca70745 100644
--- a/packages/client/src/pages/user-list-timeline.vue
+++ b/packages/client/src/pages/UserListTimeline.vue
@@ -1,8 +1,8 @@
 <template>
-	<MkStickyContainer>
-		<template #header
-			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
-		/></template>
+	<StickyContainer>
+		<template #header>
+			<PageHeader :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>
-	</MkStickyContainer>
+	</StickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { computed, watch, inject } from "vue";
-import XTimeline from "@/components/MkTimeline.vue";
+import XTimeline from "@/components/Timeline.vue";
 import * as os from "@/os";
 import { useRouter } from "@/router";
 import { definePageMetadata } from "@/scripts/page-metadata";
@@ -93,6 +93,7 @@ definePageMetadata(
 <style lang="scss" scoped>
 .eqqrhokj {
 	padding: var(--margin);
+
 	> .tl {
 		background: none;
 		border-radius: var(--radius);
diff --git a/packages/client/src/pages/verify-email.vue b/packages/client/src/pages/VerifyEmail.vue
similarity index 100%
rename from packages/client/src/pages/verify-email.vue
rename to packages/client/src/pages/VerifyEmail.vue
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 2b66a9168..a3c112832 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 "./welcome.setup.vue";
-import XEntrance from "./welcome.entrance.a.vue";
+import XSetup from "./WelcomeSetup.vue";
+import XEntrance from "./WelcomeEntranceA.vue";
 import { instanceName } from "@/config";
 import * as os from "@/os";
 import { definePageMetadata } from "@/scripts/page-metadata";
diff --git a/packages/client/src/pages/welcome.entrance.a.vue b/packages/client/src/pages/WelcomeEntranceA.vue
similarity index 83%
rename from packages/client/src/pages/welcome.entrance.a.vue
rename to packages/client/src/pages/WelcomeEntranceA.vue
index 9e3f8db06..e486e1f30 100644
--- a/packages/client/src/pages/welcome.entrance.a.vue
+++ b/packages/client/src/pages/WelcomeEntranceA.vue
@@ -1,23 +1,23 @@
 <template>
 	<div v-if="meta" class="rsqzvsbo">
 		<div class="top">
-			<MkFeaturedPhotos class="bg" />
+			<FeaturedPhotos 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">
-				<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="🍮" />
+				<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="🍮" />
 			</div>
 			<div class="main">
 				<img
@@ -49,35 +49,35 @@
 						></div>
 					</div>
 					<div class="action">
-						<MkButton
+						<Button
 							inline
 							rounded
 							gradate
 							data-cy-signup
 							style="margin-right: 12px"
 							@click="signup()"
-							>{{ i18n.ts.signup }}</MkButton
+							>{{ i18n.ts.signup }}</Button
 						>
-						<MkButton
+						<Button
 							inline
 							rounded
 							data-cy-signin
 							@click="signin()"
-							>{{ i18n.ts.login }}</MkButton
+							>{{ i18n.ts.login }}</Button
 						>
-						<MkButton
+						<Button
 							inline
 							rounded
 							style="margin-left: 12px; margin-top: 12px"
 							onclick="window.location.href='/explore'"
-							>Explore</MkButton
+							>Explore</Button
 						>
 					</div>
 				</div>
 			</div>
 			<div v-if="instances" class="federation">
 				<MarqueeText :duration="40">
-					<MkA
+					<A
 						v-for="instance in instances"
 						:key="instance.id"
 						:class="$style.federationInstance"
@@ -90,7 +90,7 @@
 							alt=""
 						/>
 						<span class="name _monospace">{{ instance.host }}</span>
-					</MkA>
+					</A>
 				</MarqueeText>
 			</div>
 		</div>
@@ -100,13 +100,13 @@
 <script lang="ts" setup>
 import {} from "vue";
 import { toUnicode } from "punycode/";
-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 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 { host, instanceName } from "@/config";
 import * as os from "@/os";
 import number from "@/filters/number";
@@ -244,6 +244,7 @@ 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/welcome.entrance.b.vue b/packages/client/src/pages/WelcomeEntranceB.vue
similarity index 89%
rename from packages/client/src/pages/welcome.entrance.b.vue
rename to packages/client/src/pages/WelcomeEntranceB.vue
index bfdd2d02f..fa74cd4a3 100644
--- a/packages/client/src/pages/welcome.entrance.b.vue
+++ b/packages/client/src/pages/WelcomeEntranceB.vue
@@ -1,7 +1,7 @@
 <template>
 	<div v-if="meta" class="rsqzvsbo">
 		<div class="top">
-			<MkFeaturedPhotos class="bg" />
+			<FeaturedPhotos class="bg" />
 			<XTimeline class="tl" />
 			<div class="shape"></div>
 			<div class="main">
@@ -19,12 +19,12 @@
 					></div>
 				</div>
 				<div class="action">
-					<MkButton class="signup" inline gradate @click="signup()">{{
+					<Button class="signup" inline gradate @click="signup()">{{
 						i18n.ts.signup
-					}}</MkButton>
-					<MkButton class="signin" inline @click="signin()">{{
+					}}</Button>
+					<Button class="signin" inline @click="signin()">{{
 						i18n.ts.login
-					}}</MkButton>
+					}}</Button>
 				</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/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 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 { 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: {
-		MkButton,
+		Button,
 		XNote,
 		XTimeline,
-		MkFeaturedPhotos,
+		FeaturedPhotos,
 	},
 
 	data() {
diff --git a/packages/client/src/pages/welcome.entrance.c.vue b/packages/client/src/pages/WelcomeEntranceC.vue
similarity index 84%
rename from packages/client/src/pages/welcome.entrance.c.vue
rename to packages/client/src/pages/WelcomeEntranceC.vue
index 5e540a37a..f90925e47 100644
--- a/packages/client/src/pages/welcome.entrance.c.vue
+++ b/packages/client/src/pages/WelcomeEntranceC.vue
@@ -1,14 +1,14 @@
 <template>
 	<div v-if="meta" class="rsqzvsbo">
 		<div class="top">
-			<MkFeaturedPhotos class="bg" />
+			<FeaturedPhotos class="bg" />
 			<div class="fade"></div>
 			<div class="emojis">
-				<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="🍮" />
+				<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="🍮" />
 			</div>
 			<div class="main">
 				<img src="/client-assets/welcome-logo.svg" class="misskey" />
@@ -35,12 +35,12 @@
 							></div>
 						</div>
 						<div class="action">
-							<MkButton inline gradate @click="signup()">{{
+							<Button inline gradate @click="signup()">{{
 								i18n.ts.signup
-							}}</MkButton>
-							<MkButton inline @click="signin()">{{
+							}}</Button>
+							<Button inline @click="signin()">{{
 								i18n.ts.login
-							}}</MkButton>
+							}}</Button>
 						</div>
 						<div v-if="onlineUsersCount && stats" class="status">
 							<div>
@@ -83,10 +83,10 @@
 					</div>
 				</div>
 				<nav class="nav">
-					<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>
+					<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>
 				</nav>
 			</div>
 		</div>
@@ -96,12 +96,12 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 import { toUnicode } from "punycode/";
-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 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 { 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: {
-		MkButton,
+		Button,
 		XNote,
-		MkFeaturedPhotos,
+		FeaturedPhotos,
 		XTimeline,
 	},
 
diff --git a/packages/client/src/pages/welcome.setup.vue b/packages/client/src/pages/WelcomeSetup.vue
similarity index 88%
rename from packages/client/src/pages/welcome.setup.vue
rename to packages/client/src/pages/WelcomeSetup.vue
index 2f1e21290..698dc0739 100644
--- a/packages/client/src/pages/welcome.setup.vue
+++ b/packages/client/src/pages/WelcomeSetup.vue
@@ -3,7 +3,7 @@
 		<h1>Welcome to Iceshrimp!</h1>
 		<div class="_formRoot">
 			<p>{{ i18n.ts.intro }}</p>
-			<MkInput
+			<Input
 				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>
-			</MkInput>
-			<MkInput
+			</Input>
+			<Input
 				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>
-			</MkInput>
+			</Input>
 			<div class="bottom _formBlock">
-				<MkButton
+				<Button
 					gradate
 					type="submit"
 					:disabled="submitting"
 					data-cy-admin-ok
 				>
-					{{ submitting ? i18n.ts.processing : i18n.ts.done
-					}}<MkEllipsis v-if="submitting" />
-				</MkButton>
+					{{ submitting ? i18n.ts.processing : i18n.ts.done }}
+					<Ellipsis v-if="submitting" />
+				</Button>
 			</div>
 		</div>
 	</form>
@@ -43,8 +43,8 @@
 
 <script lang="ts" setup>
 import {} from "vue";
-import MkButton from "@/components/MkButton.vue";
-import MkInput from "@/components/form/input.vue";
+import Button from "@/components/Button.vue";
+import Input 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/welcome.timeline.vue b/packages/client/src/pages/WelcomeTimeline.vue
similarity index 86%
rename from packages/client/src/pages/welcome.timeline.vue
rename to packages/client/src/pages/WelcomeTimeline.vue
index 26f5fa4b0..74774316a 100644
--- a/packages/client/src/pages/welcome.timeline.vue
+++ b/packages/client/src/pages/WelcomeTimeline.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">
-						<MkA
+						<A
 							v-if="note.replyId"
 							class="reply"
 							:to="`/notes/${note.replyId}`"
 							><i class="ph-arrow-bend-up-left ph-bold ph-lg"></i
-						></MkA>
+						></A>
 						<Mfm
 							v-if="note.text"
 							:text="note.text"
@@ -21,7 +21,7 @@
 							:i="$i"
 							:custom-emojis="note.emojis"
 						/>
-						<!-- <MkA v-if="note.renoteId" class="rp" :to="`/notes/${note.renoteId}`">RN: ...</MkA> -->
+						<!-- <A v-if="note.renoteId" class="rp" :to="`/notes/${note.renoteId}`">RN: ...</A> -->
 					</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/MkReactionsViewer.vue";
-import XMediaList from "@/components/MkMediaList.vue";
-import XPoll from "@/components/MkPoll.vue";
+import XReactionsViewer from "@/components/ReactionsViewer.vue";
+import XMediaList from "@/components/MediaList.vue";
+import XPoll from "@/components/Poll.vue";
 import * as os from "@/os";
 
 export default defineComponent({
@@ -76,12 +76,15 @@ 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/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 27d8a700c..8ba1a10dc 100644
--- a/packages/client/src/pages/admin/abuses.vue
+++ b/packages/client/src/pages/admin/Abuses.vue
@@ -1,20 +1,18 @@
 <template>
-	<MkStickyContainer>
-		<template #header
-			><MkPageHeader
+	<StickyContainer>
+		<template #header>
+			<PageHeader
 				:actions="headerActions"
 				:tabs="headerTabs"
 				:display-back-button="true"
-		/></template>
-		<MkSpacer :content-max="900">
+			/>
+		</template>
+		<Spacer :content-max="900">
 			<div class="lcixvhis">
 				<div class="_section reports">
 					<div class="_content">
 						<div class="inputs" style="display: flex">
-							<MkSelect
-								v-model="state"
-								style="margin: 0; flex: 1"
-							>
+							<Select v-model="state" style="margin: 0; flex: 1">
 								<template #label>{{ i18n.ts.state }}</template>
 								<option value="all">{{ i18n.ts.all }}</option>
 								<option value="unresolved">
@@ -23,8 +21,8 @@
 								<option value="resolved">
 									{{ i18n.ts.resolved }}
 								</option>
-							</MkSelect>
-							<MkSelect
+							</Select>
+							<Select
 								v-model="targetUserOrigin"
 								style="margin: 0; flex: 1"
 							>
@@ -40,8 +38,8 @@
 								<option value="remote">
 									{{ i18n.ts.remote }}
 								</option>
-							</MkSelect>
-							<MkSelect
+							</Select>
+							<Select
 								v-model="reporterOrigin"
 								style="margin: 0; flex: 1"
 							>
@@ -57,20 +55,20 @@
 								<option value="remote">
 									{{ i18n.ts.remote }}
 								</option>
-							</MkSelect>
+							</Select>
 						</div>
 						<!-- TODO
 			<div class="inputs" style="display: flex; padding-top: 1.2em;">
-				<MkInput v-model="searchUsername" style="margin: 0; flex: 1;" type="text" :spellcheck="false">
+				<Input v-model="searchUsername" style="margin: 0; flex: 1;" type="text" :spellcheck="false">
 					<span>{{ i18n.ts.username }}</span>
-				</MkInput>
-				<MkInput v-model="searchHost" style="margin: 0; flex: 1;" type="text" :spellcheck="false" :disabled="pagination.params().origin === 'local'">
+				</Input>
+				<Input v-model="searchHost" style="margin: 0; flex: 1;" type="text" :spellcheck="false" :disabled="pagination.params().origin === 'local'">
 					<span>{{ i18n.ts.host }}</span>
-				</MkInput>
+				</Input>
 			</div>
 			-->
 
-						<MkPagination
+						<Pagination
 							v-slot="{ items }"
 							ref="reports"
 							:pagination="pagination"
@@ -82,26 +80,26 @@
 								:report="report"
 								@resolved="resolved"
 							/>
-						</MkPagination>
+						</Pagination>
 					</div>
 				</div>
 			</div>
-		</MkSpacer>
-	</MkStickyContainer>
+		</Spacer>
+	</StickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { computed } from "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 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 * as os from "@/os";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 
-let reports = $ref<InstanceType<typeof MkPagination>>();
+let reports = $ref<InstanceType<typeof Pagination>>();
 
 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 b2172b307..344e9ed56 100644
--- a/packages/client/src/pages/admin/announcements.vue
+++ b/packages/client/src/pages/admin/Announcements.vue
@@ -1,37 +1,38 @@
 <template>
-	<MkStickyContainer>
-		<template #header
-			><MkPageHeader
+	<StickyContainer>
+		<template #header>
+			<PageHeader
 				:actions="headerActions"
 				:tabs="headerTabs"
 				:display-back-button="true"
-		/></template>
-		<MkSpacer :content-max="900">
+			/>
+		</template>
+		<Spacer :content-max="900">
 			<div :class="$style.root">
 				<section
 					v-for="announcement in announcements"
 					class="_card _gap announcements"
 				>
 					<div class="_content announcement">
-						<MkInput v-model="announcement.title">
+						<Input v-model="announcement.title">
 							<template #label>{{ i18n.ts.title }}</template>
-						</MkInput>
-						<MkTextarea v-model="announcement.text">
+						</Input>
+						<Textarea v-model="announcement.text">
 							<template #label>{{ i18n.ts.text }}</template>
-						</MkTextarea>
-						<MkInput v-model="announcement.imageUrl">
+						</Textarea>
+						<Input v-model="announcement.imageUrl">
 							<template #label>{{ i18n.ts.imageUrl }}</template>
-						</MkInput>
-						<MkSwitch
+						</Input>
+						<Switch
 							v-model="announcement.showPopup"
 							class="_formBlock"
-							>{{ i18n.ts.showPopup }}</MkSwitch
+							>{{ i18n.ts.showPopup }}</Switch
 						>
-						<MkSwitch
+						<Switch
 							v-if="announcement.showPopup"
 							v-model="announcement.isGoodNews"
 							class="_formBlock"
-							>{{ i18n.ts.showWithSparkles }}</MkSwitch
+							>{{ i18n.ts.showWithSparkles }}</Switch
 						>
 						<p v-if="announcement.reads">
 							{{
@@ -39,7 +40,7 @@
 							}}
 						</p>
 						<div class="buttons">
-							<MkButton
+							<Button
 								class="button"
 								inline
 								primary
@@ -47,29 +48,29 @@
 								><i
 									class="ph-floppy-disk-back ph-bold ph-lg"
 								></i>
-								{{ i18n.ts.save }}</MkButton
+								{{ i18n.ts.save }}</Button
 							>
-							<MkButton
+							<Button
 								class="button"
 								inline
 								@click="remove(announcement)"
 								><i class="ph-trash ph-bold ph-lg"></i>
-								{{ i18n.ts.remove }}</MkButton
+								{{ i18n.ts.remove }}</Button
 							>
 						</div>
 					</div>
 				</section>
 			</div>
-		</MkSpacer>
-	</MkStickyContainer>
+		</Spacer>
+	</StickyContainer>
 </template>
 
 <script lang="ts" setup>
 import {} from "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 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 * as os from "@/os";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
diff --git a/packages/client/src/pages/admin/bot-protection.vue b/packages/client/src/pages/admin/BotProtection.vue
similarity index 88%
rename from packages/client/src/pages/admin/bot-protection.vue
rename to packages/client/src/pages/admin/BotProtection.vue
index bdf992190..7a9f4d027 100644
--- a/packages/client/src/pages/admin/bot-protection.vue
+++ b/packages/client/src/pages/admin/BotProtection.vue
@@ -29,7 +29,7 @@
 					</FormInput>
 					<FormSlot class="_formBlock">
 						<template #label>{{ i18n.ts.preview }}</template>
-						<MkCaptcha
+						<Captcha
 							provider="hcaptcha"
 							:sitekey="
 								hcaptchaSiteKey ||
@@ -57,7 +57,7 @@
 					</FormInput>
 					<FormSlot v-if="recaptchaSiteKey" class="_formBlock">
 						<template #label>{{ i18n.ts.preview }}</template>
-						<MkCaptcha
+						<Captcha
 							provider="recaptcha"
 							:sitekey="recaptchaSiteKey"
 						/>
@@ -75,18 +75,16 @@
 
 <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/MkButton.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/Button.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 MkCaptcha = defineAsyncComponent(
-	() => import("@/components/MkCaptcha.vue"),
-);
+const Captcha = defineAsyncComponent(() => import("@/components/Captcha.vue"));
 
 let provider = $ref(null);
 let hcaptchaSiteKey: string | null = $ref(null);
diff --git a/packages/client/src/pages/admin/custom-css.vue b/packages/client/src/pages/admin/CustomCss.vue
similarity index 91%
rename from packages/client/src/pages/admin/custom-css.vue
rename to packages/client/src/pages/admin/CustomCss.vue
index 2362c1f93..a10db851f 100644
--- a/packages/client/src/pages/admin/custom-css.vue
+++ b/packages/client/src/pages/admin/CustomCss.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/MkInfo.vue";
+import FormTextarea from "@/components/form/Textarea.vue";
+import FormInfo from "@/components/Info.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 7222ba318..613f3119e 100644
--- a/packages/client/src/pages/admin/database.vue
+++ b/packages/client/src/pages/admin/Database.vue
@@ -1,12 +1,13 @@
 <template>
-	<MkStickyContainer>
-		<template #header
-			><MkPageHeader
+	<StickyContainer>
+		<template #header>
+			<PageHeader
 				:actions="headerActions"
 				:tabs="headerTabs"
 				:display-back-button="true"
-		/></template>
-		<MkSpacer :content-max="800" :margin-min="16" :margin-max="32">
+			/>
+		</template>
+		<Spacer :content-max="800" :margin-min="16" :margin-max="32">
 			<FormButton primary @click="indexPosts">{{
 				i18n.ts.indexPosts
 			}}</FormButton>
@@ -14,7 +15,7 @@
 				v-slot="{ result: database }"
 				:p="databasePromiseFactory"
 			>
-				<MkKeyValue
+				<KeyValue
 					v-for="table in database"
 					:key="table[0]"
 					oneline
@@ -27,17 +28,17 @@
 						}}
 						recs)</template
 					>
-				</MkKeyValue>
+				</KeyValue>
 			</FormSuspense>
-		</MkSpacer></MkStickyContainer
-	>
+		</Spacer>
+	</StickyContainer>
 </template>
 
 <script lang="ts" setup>
 import {} from "vue";
-import FormSuspense from "@/components/form/suspense.vue";
-import FormButton from "@/components/MkButton.vue";
-import MkKeyValue from "@/components/MkKeyValue.vue";
+import FormSuspense from "@/components/form/Suspense.vue";
+import FormButton from "@/components/Button.vue";
+import KeyValue from "@/components/KeyValue.vue";
 import * as os from "@/os";
 import bytes from "@/filters/bytes";
 import number from "@/filters/number";
diff --git a/packages/client/src/pages/admin/email-settings.vue b/packages/client/src/pages/admin/EmailSettings.vue
similarity index 88%
rename from packages/client/src/pages/admin/email-settings.vue
rename to packages/client/src/pages/admin/EmailSettings.vue
index 3eaee5566..8484ed51d 100644
--- a/packages/client/src/pages/admin/email-settings.vue
+++ b/packages/client/src/pages/admin/EmailSettings.vue
@@ -1,12 +1,13 @@
 <template>
-	<MkStickyContainer>
-		<template #header
-			><MkPageHeader
+	<StickyContainer>
+		<template #header>
+			<PageHeader
 				:actions="headerActions"
 				:tabs="headerTabs"
 				:display-back-button="true"
-		/></template>
-		<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
+			/>
+		</template>
+		<Spacer :content-max="700" :margin-min="16" :margin-max="32">
 			<FormSuspense :p="init">
 				<div class="_formRoot">
 					<FormSwitch v-model="enableEmail" class="_formBlock">
@@ -86,18 +87,18 @@
 					</template>
 				</div>
 			</FormSuspense>
-		</MkSpacer>
-	</MkStickyContainer>
+		</Spacer>
+	</StickyContainer>
 </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/MkInfo.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/Info.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/emoji-edit-dialog.vue b/packages/client/src/pages/admin/EmojiEditDialog.vue
similarity index 81%
rename from packages/client/src/pages/admin/emoji-edit-dialog.vue
rename to packages/client/src/pages/admin/EmojiEditDialog.vue
index 053f3d3e7..b2bfcbeef 100644
--- a/packages/client/src/pages/admin/emoji-edit-dialog.vue
+++ b/packages/client/src/pages/admin/EmojiEditDialog.vue
@@ -12,28 +12,28 @@
 		<div class="_monolithic_">
 			<div class="yigymqpb _section">
 				<img :src="emoji.url" class="img" />
-				<MkInput v-model="name" class="_formBlock">
+				<Input v-model="name" class="_formBlock">
 					<template #label>{{ i18n.ts.name }}</template>
-				</MkInput>
-				<MkInput
+				</Input>
+				<Input
 					v-model="category"
 					class="_formBlock"
 					:datalist="categories"
 				>
 					<template #label>{{ i18n.ts.category }}</template>
-				</MkInput>
-				<MkInput v-model="aliases" class="_formBlock">
+				</Input>
+				<Input v-model="aliases" class="_formBlock">
 					<template #label>{{ i18n.ts.tags }}</template>
 					<template #caption>{{
 						i18n.ts.setMultipleBySeparatingWithSpace
 					}}</template>
-				</MkInput>
-				<MkTextarea v-model="license" class="_formBlock">
+				</Input>
+				<Textarea v-model="license" class="_formBlock">
 					<template #label>{{ i18n.ts.license }}</template>
-				</MkTextarea>
-				<MkButton danger @click="del()"
+				</Textarea>
+				<Button danger @click="del()"
 					><i class="ph-trash ph-bold ph-lg"></i>
-					{{ i18n.ts.delete }}</MkButton
+					{{ i18n.ts.delete }}</Button
 				>
 			</div>
 		</div>
@@ -42,10 +42,10 @@
 
 <script lang="ts" setup>
 import {} from "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 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 * 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 8d633e551..250a30fb8 100644
--- a/packages/client/src/pages/admin/emojis.vue
+++ b/packages/client/src/pages/admin/Emojis.vue
@@ -1,27 +1,28 @@
 <template>
 	<div>
-		<MkStickyContainer>
-			<template #header
-				><MkPageHeader
+		<StickyContainer>
+			<template #header>
+				<PageHeader
 					v-model:tab="tab"
 					:actions="headerActions"
 					:tabs="headerTabs"
 					:display-back-button="true"
-			/></template>
-			<MkSpacer :content-max="900">
+				/>
+			</template>
+			<Spacer :content-max="900">
 				<div class="ogwlenmc">
 					<div v-if="tab === 'local'" class="local">
-						<MkInput v-model="query" :debounce="true" type="search">
+						<Input 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>
-						</MkInput>
-						<MkSwitch v-model="selectMode" style="margin: 8px 0">
+						</Input>
+						<Switch v-model="selectMode" style="margin: 8px 0">
 							<template #label>Select mode</template>
-						</MkSwitch>
+						</Switch>
 						<div
 							v-if="selectMode"
 							style="
@@ -30,29 +31,25 @@
 								flex-wrap: wrap;
 							"
 						>
-							<MkButton inline @click="selectAll"
-								>Select all</MkButton
+							<Button inline @click="selectAll"
+								>Select all</Button
 							>
-							<MkButton inline @click="setCategoryBulk"
-								>Set category</MkButton
+							<Button inline @click="setCategoryBulk"
+								>Set category</Button
 							>
-							<MkButton inline @click="addTagBulk"
-								>Add tag</MkButton
+							<Button inline @click="addTagBulk">Add tag</Button>
+							<Button inline @click="removeTagBulk"
+								>Remove tag</Button
 							>
-							<MkButton inline @click="removeTagBulk"
-								>Remove tag</MkButton
+							<Button inline @click="setTagBulk">Set tag</Button>
+							<Button inline @click="setLicenseBulk"
+								>Set license</Button
 							>
-							<MkButton inline @click="setTagBulk"
-								>Set tag</MkButton
-							>
-							<MkButton inline @click="setLicenseBulk"
-								>Set license</MkButton
-							>
-							<MkButton inline danger @click="delBulk"
-								>Delete</MkButton
+							<Button inline danger @click="delBulk"
+								>Delete</Button
 							>
 						</div>
-						<MkPagination
+						<Pagination
 							ref="emojisPaginationComponent"
 							:pagination="pagination"
 						>
@@ -94,12 +91,12 @@
 									</button>
 								</div>
 							</template>
-						</MkPagination>
+						</Pagination>
 					</div>
 
 					<div v-else-if="tab === 'remote'" class="remote">
 						<FormSplit>
-							<MkInput
+							<Input
 								v-model="queryRemote"
 								:debounce="true"
 								type="search"
@@ -110,12 +107,12 @@
 									></i
 								></template>
 								<template #label>{{ i18n.ts.search }}</template>
-							</MkInput>
-							<MkInput v-model="host" :debounce="true">
+							</Input>
+							<Input v-model="host" :debounce="true">
 								<template #label>{{ i18n.ts.host }}</template>
-							</MkInput>
+							</Input>
 						</FormSplit>
-						<MkPagination :pagination="remotePagination">
+						<Pagination :pagination="remotePagination">
 							<template #empty
 								><span>{{
 									i18n.ts.noCustomEmojis
@@ -145,11 +142,11 @@
 									</div>
 								</div>
 							</template>
-						</MkPagination>
+						</Pagination>
 					</div>
 				</div>
-			</MkSpacer>
-		</MkStickyContainer>
+			</Spacer>
+		</StickyContainer>
 	</div>
 </template>
 
@@ -161,18 +158,18 @@ import {
 	ref,
 	toRef,
 } from "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 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 { 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 MkPagination>>();
+const emojisPaginationComponent = ref<InstanceType<typeof Pagination>>();
 
 const tab = ref("local");
 const query = ref(null);
@@ -239,7 +236,7 @@ const add = async (ev: MouseEvent) => {
 
 const edit = (emoji) => {
 	os.popup(
-		defineAsyncComponent(() => import("./emoji-edit-dialog.vue")),
+		defineAsyncComponent(() => import("./EmojiEditDialog.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 32ce9bfae..efb4250ed 100644
--- a/packages/client/src/pages/admin/experiments.vue
+++ b/packages/client/src/pages/admin/Experiments.vue
@@ -1,12 +1,13 @@
 <template>
-	<MkStickyContainer>
-		<template #header
-			><MkPageHeader
+	<StickyContainer>
+		<template #header>
+			<PageHeader
 				:actions="headerActions"
 				:tabs="headerTabs"
 				:display-back-button="true"
-		/></template>
-		<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
+			/>
+		</template>
+		<Spacer :content-max="700" :margin-min="16" :margin-max="32">
 			<FormSuspense :p="init">
 				<FormSwitch
 					v-model="enablePostImports"
@@ -22,15 +23,15 @@
 					}}</template>
 				</FormSwitch>
 			</FormSuspense>
-		</MkSpacer>
-	</MkStickyContainer>
+		</Spacer>
+	</StickyContainer>
 </template>
 
 <script lang="ts" setup>
 import {} from "vue";
-import MkStickyContainer from "@/components/global/MkStickyContainer.vue";
-import FormSuspense from "@/components/form/suspense.vue";
-import FormSwitch from "@/components/form/switch.vue";
+import StickyContainer from "@/components/global/StickyContainer.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 64329b87a..0a6dbcdb5 100644
--- a/packages/client/src/pages/admin/federation.vue
+++ b/packages/client/src/pages/admin/Federation.vue
@@ -1,16 +1,17 @@
 <template>
 	<div>
-		<MkStickyContainer>
-			<template #header
-				><MkPageHeader
+		<StickyContainer>
+			<template #header>
+				<PageHeader
 					:actions="headerActions"
 					:tabs="headerTabs"
 					:display-back-button="true"
-			/></template>
-			<MkSpacer :content-max="900">
+				/>
+			</template>
+			<Spacer :content-max="900">
 				<XFederation />
-			</MkSpacer>
-		</MkStickyContainer>
+			</Spacer>
+		</StickyContainer>
 	</div>
 </template>
 
@@ -18,7 +19,7 @@
 import { computed } from "vue";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import { i18n } from "@/i18n";
-import XFederation from "@/pages/about.federation.vue";
+import XFederation from "@/pages/AboutFederation.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 394f5467b..d9ca09077 100644
--- a/packages/client/src/pages/admin/files.vue
+++ b/packages/client/src/pages/admin/Files.vue
@@ -1,10 +1,10 @@
 <template>
 	<div>
-		<MkStickyContainer>
-			<template #header
-				><MkPageHeader :actions="headerActions"
-			/></template>
-			<MkSpacer :content-max="900">
+		<StickyContainer>
+			<template #header>
+				<PageHeader :actions="headerActions" />
+			</template>
+			<Spacer :content-max="900">
 				<div class="xrmjdkdw">
 					<div>
 						<div
@@ -15,10 +15,7 @@
 								flex-wrap: wrap;
 							"
 						>
-							<MkSelect
-								v-model="origin"
-								style="margin: 0; flex: 1"
-							>
+							<Select v-model="origin" style="margin: 0; flex: 1">
 								<template #label>{{
 									i18n.ts.instance
 								}}</template>
@@ -31,8 +28,8 @@
 								<option value="remote">
 									{{ i18n.ts.remote }}
 								</option>
-							</MkSelect>
-							<MkInput
+							</Select>
+							<Input
 								v-model="searchHost"
 								:debounce="true"
 								type="search"
@@ -40,7 +37,7 @@
 								:disabled="pagination.params.origin === 'local'"
 							>
 								<template #label>{{ i18n.ts.host }}</template>
-							</MkInput>
+							</Input>
 						</div>
 						<div
 							class="inputs"
@@ -51,41 +48,41 @@
 								padding-top: 1.2em;
 							"
 						>
-							<MkInput
+							<Input
 								v-model="userId"
 								:debounce="true"
 								type="search"
 								style="margin: 0; flex: 1"
 							>
 								<template #label>User ID</template>
-							</MkInput>
-							<MkInput
+							</Input>
+							<Input
 								v-model="type"
 								:debounce="true"
 								type="search"
 								style="margin: 0; flex: 1"
 							>
 								<template #label>MIME type</template>
-							</MkInput>
+							</Input>
 						</div>
-						<MkFileListForAdmin
+						<FileListForAdmin
 							:pagination="pagination"
 							:view-mode="viewMode"
 						/>
 					</div>
 				</div>
-			</MkSpacer>
-		</MkStickyContainer>
+			</Spacer>
+		</StickyContainer>
 	</div>
 </template>
 
 <script lang="ts" setup>
 import { computed, defineAsyncComponent } from "vue";
 import * as Acct from "iceshrimp-js/built/acct";
-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 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 { 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 d10ee44f3..65600d819 100644
--- a/packages/client/src/pages/admin/hashtags.vue
+++ b/packages/client/src/pages/admin/Hashtags.vue
@@ -1,13 +1,13 @@
 <template>
-	<MkStickyContainer>
+	<StickyContainer>
 		<template #header>
-			<MkPageHeader
+			<PageHeader
 				:actions="headerActions"
 				:tabs="headerTabs"
 				:display-back-button="true"
 			/>
 		</template>
-		<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
+		<Spacer :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>
-		</MkSpacer>
-	</MkStickyContainer>
+		</Spacer>
+	</StickyContainer>
 </template>
 
 <script lang="ts" setup>
 import {} from "vue";
-import FormButton from "@/components/MkButton.vue";
-import FormTextarea from "@/components/form/textarea.vue";
-import FormSuspense from "@/components/form/suspense.vue";
+import FormButton from "@/components/Button.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/_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 ae0e48929..189e9fac1 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">
-					<MkButton
+					<Button
 						v-if="action.asFullButton"
 						class="fullButton"
 						primary
 						@click.stop="action.handler"
 						><i :class="action.icon" style="margin-right: 6px"></i
-						>{{ action.text }}</MkButton
+						>{{ action.text }}</Button
 					>
 					<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 MkButton from "@/components/MkButton.vue";
+import Button from "@/components/Button.vue";
 import { i18n } from "@/i18n";
 import { globalEvents } from "@/events";
 import { injectPageMetadata } from "@/scripts/page-metadata";
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 4f2f1ded0..22fadb159 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">
-			<MkSpacer :content-max="700" :margin-min="16">
+			<Spacer :content-max="700" :margin-min="16">
 				<div class="lxpfedzu">
 					<div class="banner">
 						<img
@@ -11,46 +11,43 @@
 						/>
 					</div>
 
-					<MkInfo
-						v-if="thereIsUnresolvedAbuseReport"
-						warn
-						class="info"
+					<Info v-if="thereIsUnresolvedAbuseReport" warn class="info"
 						>{{ i18n.ts.thereIsUnresolvedAbuseReportWarning }}
-						<MkA to="/admin/abuses" class="_link">{{
+						<A to="/admin/abuses" class="_link">{{
 							i18n.ts.check
-						}}</MkA></MkInfo
-					>
-					<MkInfo v-if="noMaintainerInformation" warn class="info"
+						}}</A>
+					</Info>
+					<Info v-if="noMaintainerInformation" warn class="info"
 						>{{ i18n.ts.noMaintainerInformationWarning }}
-						<MkA to="/admin/settings" class="_link">{{
+						<A to="/admin/settings" class="_link">{{
 							i18n.ts.configure
-						}}</MkA></MkInfo
-					>
-					<MkInfo v-if="noBotProtection" warn class="info"
+						}}</A>
+					</Info>
+					<Info v-if="noBotProtection" warn class="info"
 						>{{ i18n.ts.noBotProtectionWarning }}
-						<MkA to="/admin/security" class="_link">{{
+						<A to="/admin/security" class="_link">{{
 							i18n.ts.configure
-						}}</MkA></MkInfo
-					>
-					<MkInfo v-if="noEmailServer" warn class="info"
+						}}</A>
+					</Info>
+					<Info v-if="noEmailServer" warn class="info"
 						>{{ i18n.ts.noEmailServerWarning }}
-						<MkA to="/admin/email-settings" class="_link">{{
+						<A to="/admin/email-settings" class="_link">{{
 							i18n.ts.configure
-						}}</MkA></MkInfo
-					>
-					<MkInfo v-if="updateAvailable" warn class="info"
+						}}</A>
+					</Info>
+					<Info 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
-						></MkInfo
-					>
+						>
+					</Info>
 
-					<MkSuperMenu :def="menuDef" :grid="narrow"></MkSuperMenu>
+					<SuperMenu :def="menuDef" :grid="narrow"></SuperMenu>
 				</div>
-			</MkSpacer>
+			</Spacer>
 		</div>
 		<div v-if="!(narrow && currentPage?.route.name == null)" class="main">
 			<RouterView />
@@ -71,8 +68,8 @@ import {
 	ref,
 } from "vue";
 import { i18n } from "@/i18n";
-import MkSuperMenu from "@/components/MkSuperMenu.vue";
-import MkInfo from "@/components/MkInfo.vue";
+import SuperMenu from "@/components/SuperMenu.vue";
+import Info from "@/components/Info.vue";
 import { scroll } from "@/scripts/scroll";
 import { instance } from "@/instance";
 import { version } from "@/config";
@@ -127,24 +124,28 @@ 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/instance-block.vue b/packages/client/src/pages/admin/InstanceBlock.vue
similarity index 81%
rename from packages/client/src/pages/admin/instance-block.vue
rename to packages/client/src/pages/admin/InstanceBlock.vue
index f3c4f542c..f6cb2f650 100644
--- a/packages/client/src/pages/admin/instance-block.vue
+++ b/packages/client/src/pages/admin/InstanceBlock.vue
@@ -1,16 +1,17 @@
 <template>
-	<MkStickyContainer>
-		<template #header
-			><MkPageHeader
+	<StickyContainer>
+		<template #header>
+			<PageHeader
 				:actions="headerActions"
 				:tabs="headerTabs"
 				:display-back-button="true"
-		/></template>
-		<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
-			<MkTab v-model="tab" class="_formBlock">
+			/>
+		</template>
+		<Spacer :content-max="700" :margin-min="16" :margin-max="32">
+			<Tab v-model="tab" class="_formBlock">
 				<option value="block">{{ i18n.ts.blockedInstances }}</option>
 				<option value="silence">{{ i18n.ts.silencedInstances }}</option>
-			</MkTab>
+			</Tab>
 			<FormSuspense :p="init">
 				<FormTextarea
 					v-if="tab === 'block'"
@@ -38,16 +39,16 @@
 					{{ i18n.ts.save }}</FormButton
 				>
 			</FormSuspense>
-		</MkSpacer>
-	</MkStickyContainer>
+		</Spacer>
+	</StickyContainer>
 </template>
 
 <script lang="ts" setup>
 import {} from "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 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 * 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 510b32a08..f54f8cd87 100644
--- a/packages/client/src/pages/admin/integrations.vue
+++ b/packages/client/src/pages/admin/Integrations.vue
@@ -1,12 +1,13 @@
 <template>
-	<MkStickyContainer>
-		<template #header
-			><MkPageHeader
+	<StickyContainer>
+		<template #header>
+			<PageHeader
 				:actions="headerActions"
 				:tabs="headerTabs"
 				:display-back-button="true"
-		/></template>
-		<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
+			/>
+		</template>
+		<Spacer :content-max="700" :margin-min="16" :margin-max="32">
 			<FormSuspense :p="init">
 				<FormFolder class="_formBlock">
 					<template #icon
@@ -33,16 +34,16 @@
 					<XDiscord />
 				</FormFolder>
 			</FormSuspense>
-		</MkSpacer>
-	</MkStickyContainer>
+		</Spacer>
+	</StickyContainer>
 </template>
 
 <script lang="ts" setup>
 import {} from "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 XGithub from "./IntegrationsGithub.vue";
+import XDiscord from "./IntegrationsDiscord.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/integrations.discord.vue b/packages/client/src/pages/admin/IntegrationsDiscord.vue
similarity index 86%
rename from packages/client/src/pages/admin/integrations.discord.vue
rename to packages/client/src/pages/admin/IntegrationsDiscord.vue
index 2bf047069..207d0ac9f 100644
--- a/packages/client/src/pages/admin/integrations.discord.vue
+++ b/packages/client/src/pages/admin/IntegrationsDiscord.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/MkButton.vue";
-import FormInfo from "@/components/MkInfo.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/Button.vue";
+import FormInfo from "@/components/Info.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.github.vue b/packages/client/src/pages/admin/IntegrationsGithub.vue
similarity index 86%
rename from packages/client/src/pages/admin/integrations.github.vue
rename to packages/client/src/pages/admin/IntegrationsGithub.vue
index 67c57a7dd..bbb25266c 100644
--- a/packages/client/src/pages/admin/integrations.github.vue
+++ b/packages/client/src/pages/admin/IntegrationsGithub.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/MkButton.vue";
-import FormInfo from "@/components/MkInfo.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/Button.vue";
+import FormInfo from "@/components/Info.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/object-storage.vue b/packages/client/src/pages/admin/ObjectStorage.vue
similarity index 92%
rename from packages/client/src/pages/admin/object-storage.vue
rename to packages/client/src/pages/admin/ObjectStorage.vue
index a438c6944..26692e22f 100644
--- a/packages/client/src/pages/admin/object-storage.vue
+++ b/packages/client/src/pages/admin/ObjectStorage.vue
@@ -1,12 +1,13 @@
 <template>
-	<MkStickyContainer>
-		<template #header
-			><MkPageHeader
+	<StickyContainer>
+		<template #header>
+			<PageHeader
 				:actions="headerActions"
 				:tabs="headerTabs"
 				:display-back-button="true"
-		/></template>
-		<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
+			/>
+		</template>
+		<Spacer :content-max="700" :margin-min="16" :margin-max="32">
 			<FormSuspense :p="init">
 				<div class="_formRoot">
 					<FormSwitch v-model="useObjectStorage" class="_formBlock">{{
@@ -139,17 +140,17 @@
 					</template>
 				</div>
 			</FormSuspense>
-		</MkSpacer>
-	</MkStickyContainer>
+		</Spacer>
+	</StickyContainer>
 </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/other-settings.vue b/packages/client/src/pages/admin/OtherSettings.vue
similarity index 77%
rename from packages/client/src/pages/admin/other-settings.vue
rename to packages/client/src/pages/admin/OtherSettings.vue
index 1d74e752a..d02b9caa5 100644
--- a/packages/client/src/pages/admin/other-settings.vue
+++ b/packages/client/src/pages/admin/OtherSettings.vue
@@ -1,20 +1,21 @@
 <template>
-	<MkStickyContainer>
-		<template #header
-			><MkPageHeader
+	<StickyContainer>
+		<template #header>
+			<PageHeader
 				:actions="headerActions"
 				:tabs="headerTabs"
 				:display-back-button="true"
-		/></template>
-		<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
+			/>
+		</template>
+		<Spacer :content-max="700" :margin-min="16" :margin-max="32">
 			<FormSuspense :p="init"> none </FormSuspense>
-		</MkSpacer>
-	</MkStickyContainer>
+		</Spacer>
+	</StickyContainer>
 </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/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 d88022595..3a05acefb 100644
--- a/packages/client/src/pages/admin/overview.vue
+++ b/packages/client/src/pages/admin/Overview.vue
@@ -1,62 +1,62 @@
 <template>
-	<MkSpacer :content-max="1000">
+	<Spacer :content-max="1000">
 		<div ref="rootEl" class="edbbcaef">
-			<MkFolder class="item">
+			<Folder class="item">
 				<template #header>Stats</template>
 				<XStats />
-			</MkFolder>
+			</Folder>
 
-			<MkFolder class="item">
+			<Folder class="item">
 				<template #header>Active users</template>
 				<XActiveUsers />
-			</MkFolder>
+			</Folder>
 
-			<MkFolder class="item">
+			<Folder class="item">
 				<template #header>Heatmap</template>
 				<XHeatmap />
-			</MkFolder>
+			</Folder>
 
-			<MkFolder class="item">
+			<Folder class="item">
 				<template #header>Moderators</template>
 				<XModerators />
-			</MkFolder>
+			</Folder>
 
-			<MkFolder class="item">
+			<Folder class="item">
 				<template #header>Federation</template>
 				<XFederation />
-			</MkFolder>
+			</Folder>
 
-			<MkFolder class="item">
+			<Folder class="item">
 				<template #header>Instances</template>
 				<XInstances />
-			</MkFolder>
+			</Folder>
 
-			<MkFolder class="item">
+			<Folder class="item">
 				<template #header>Fediverse Requests</template>
 				<XApRequests />
-			</MkFolder>
+			</Folder>
 
-			<MkFolder class="item">
+			<Folder class="item">
 				<template #header>New users</template>
 				<XUsers />
-			</MkFolder>
+			</Folder>
 
-			<MkFolder class="item">
+			<Folder class="item">
 				<template #header>Deliver queue</template>
 				<XQueue domain="deliver" />
-			</MkFolder>
+			</Folder>
 
-			<MkFolder class="item">
+			<Folder class="item">
 				<template #header>Inbox queue</template>
 				<XQueue domain="inbox" />
-			</MkFolder>
+			</Folder>
 
-			<!-- <MkFolder class="item">
+			<!-- <Folder class="item">
 				<template #header>Server metrics</template>
 				<XMetrics domain="inbox" />
-			</MkFolder> -->
+			</Folder> -->
 		</div>
-	</MkSpacer>
+	</Spacer>
 </template>
 
 <script lang="ts" setup>
@@ -67,25 +67,25 @@ import {
 	onBeforeUnmount,
 	nextTick,
 } from "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 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 { 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 MkFileListForAdmin from "@/components/MkFileListForAdmin.vue";
-import MkFolder from "@/components/MkFolder.vue";
+import FileListForAdmin from "@/components/FileListForAdmin.vue";
+import Folder from "@/components/Folder.vue";
 
 const rootEl = $shallowRef<HTMLElement>();
 let serverInfo: any = $ref(null);
diff --git a/packages/client/src/pages/admin/overview.active-users.vue b/packages/client/src/pages/admin/OverviewActiveUsers.vue
similarity index 99%
rename from packages/client/src/pages/admin/overview.active-users.vue
rename to packages/client/src/pages/admin/OverviewActiveUsers.vue
index 25dcac494..60dabd215 100644
--- a/packages/client/src/pages/admin/overview.active-users.vue
+++ b/packages/client/src/pages/admin/OverviewActiveUsers.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<MkLoading v-if="fetching" />
+		<Loading 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/overview.ap-requests.vue b/packages/client/src/pages/admin/OverviewApRequests.vue
similarity index 97%
rename from packages/client/src/pages/admin/overview.ap-requests.vue
rename to packages/client/src/pages/admin/OverviewApRequests.vue
index c655336e8..b5455a7d4 100644
--- a/packages/client/src/pages/admin/overview.ap-requests.vue
+++ b/packages/client/src/pages/admin/OverviewApRequests.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<MkLoading v-if="fetching" />
+		<Loading 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 MkMiniChart from "@/components/MkMiniChart.vue";
+import MiniChart from "@/components/MiniChart.vue";
 import * as os from "@/os";
 import number from "@/filters/number";
-import MkNumberDiff from "@/components/MkNumberDiff.vue";
+import NumberDiff from "@/components/NumberDiff.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/overview.federation.vue b/packages/client/src/pages/admin/OverviewFederation.vue
similarity index 94%
rename from packages/client/src/pages/admin/overview.federation.vue
rename to packages/client/src/pages/admin/OverviewFederation.vue
index ab4dd2c69..eb09344c9 100644
--- a/packages/client/src/pages/admin/overview.federation.vue
+++ b/packages/client/src/pages/admin/OverviewFederation.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<MkLoading v-if="fetching" />
+		<Loading v-if="fetching" />
 		<div v-show="!fetching" :class="$style.root">
 			<div
 				v-if="topSubInstancesForPie && topPubInstancesForPie"
@@ -25,11 +25,12 @@
 					<div class="body">
 						<div class="value">
 							{{ number(federationSubActive) }}
-							<MkNumberDiff
+							<NumberDiff
 								v-tooltip="i18n.ts.dayOverDayChanges"
 								class="diff"
 								:value="federationSubActiveDiff"
-							></MkNumberDiff>
+							>
+							</NumberDiff>
 						</div>
 						<div class="label">Sub</div>
 					</div>
@@ -41,11 +42,12 @@
 					<div class="body">
 						<div class="value">
 							{{ number(federationPubActive) }}
-							<MkNumberDiff
+							<NumberDiff
 								v-tooltip="i18n.ts.dayOverDayChanges"
 								class="diff"
 								:value="federationPubActiveDiff"
-							></MkNumberDiff>
+							>
+							</NumberDiff>
 						</div>
 						<div class="label">Pub</div>
 					</div>
@@ -57,11 +59,11 @@
 
 <script lang="ts" setup>
 import { onMounted, onUnmounted, ref } from "vue";
-import XPie from "./overview.pie.vue";
-import MkMiniChart from "@/components/MkMiniChart.vue";
+import XPie from "./OverviewPie.vue";
+import MiniChart from "@/components/MiniChart.vue";
 import * as os from "@/os";
 import number from "@/filters/number";
-import MkNumberDiff from "@/components/MkNumberDiff.vue";
+import NumberDiff from "@/components/NumberDiff.vue";
 import { i18n } from "@/i18n";
 import { useChartTooltip } from "@/scripts/use-chart-tooltip";
 
diff --git a/packages/client/src/pages/admin/overview.heatmap.vue b/packages/client/src/pages/admin/OverviewHeatmap.vue
similarity index 74%
rename from packages/client/src/pages/admin/overview.heatmap.vue
rename to packages/client/src/pages/admin/OverviewHeatmap.vue
index e926fdc53..b4e88b9ce 100644
--- a/packages/client/src/pages/admin/overview.heatmap.vue
+++ b/packages/client/src/pages/admin/OverviewHeatmap.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="_panel" :class="$style.root">
-		<MkSelect v-model="src" style="margin: 0 0 12px 0" small>
+		<Select 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>
-		</MkSelect>
-		<MkHeatmap :src="src" />
+		</Select>
+		<Heatmap :src="src" />
 	</div>
 </template>
 
 <script lang="ts" setup>
-import MkHeatmap from "@/components/MkHeatmap.vue";
-import MkSelect from "@/components/form/select.vue";
+import Heatmap from "@/components/Heatmap.vue";
+import Select from "@/components/form/Select.vue";
 
 let src = $ref("notes");
 </script>
diff --git a/packages/client/src/pages/admin/overview.instances.vue b/packages/client/src/pages/admin/OverviewInstances.vue
similarity index 87%
rename from packages/client/src/pages/admin/overview.instances.vue
rename to packages/client/src/pages/admin/OverviewInstances.vue
index e5d0d1d32..825e4a7f5 100644
--- a/packages/client/src/pages/admin/overview.instances.vue
+++ b/packages/client/src/pages/admin/OverviewInstances.vue
@@ -4,9 +4,9 @@
 			:name="$store.state.animation ? '_transition_zoom' : ''"
 			mode="out-in"
 		>
-			<MkLoading v-if="fetching" />
+			<Loading v-if="fetching" />
 			<div v-else class="instances">
-				<MkA
+				<A
 					v-for="(instance, i) in instances"
 					:key="instance.id"
 					v-tooltip.mfm.noDelay="
@@ -15,8 +15,8 @@
 					:to="`/instance-info/${instance.host}`"
 					class="instance"
 				>
-					<MkInstanceCardMini :instance="instance" />
-				</MkA>
+					<InstanceCardMini :instance="instance" />
+				</A>
 			</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 MkInstanceCardMini from "@/components/MkInstanceCardMini.vue";
+import InstanceCardMini from "@/components/InstanceCardMini.vue";
 
 const instances = ref([]);
 const fetching = ref(true);
diff --git a/packages/client/src/pages/admin/overview.metrics.vue b/packages/client/src/pages/admin/OverviewMetrics.vue
similarity index 98%
rename from packages/client/src/pages/admin/overview.metrics.vue
rename to packages/client/src/pages/admin/OverviewMetrics.vue
index 48d407e7d..866b8d4e7 100644
--- a/packages/client/src/pages/admin/overview.metrics.vue
+++ b/packages/client/src/pages/admin/OverviewMetrics.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/overview.moderators.vue b/packages/client/src/pages/admin/OverviewModerators.vue
similarity index 87%
rename from packages/client/src/pages/admin/overview.moderators.vue
rename to packages/client/src/pages/admin/OverviewModerators.vue
index a29cc20b9..13cd4f2b4 100644
--- a/packages/client/src/pages/admin/overview.moderators.vue
+++ b/packages/client/src/pages/admin/OverviewModerators.vue
@@ -4,21 +4,16 @@
 			:name="$store.state.animation ? '_transition_zoom' : ''"
 			mode="out-in"
 		>
-			<MkLoading v-if="fetching" />
+			<Loading v-if="fetching" />
 			<div v-else :class="$style.root" class="_panel">
-				<MkA
+				<A
 					v-for="user in moderators"
 					:key="user.id"
 					class="user"
 					:to="`/user-info/${user.id}`"
 				>
-					<MkAvatar
-						:user="user"
-						class="avatar"
-						indicator
-						disableLink
-					/>
-				</MkA>
+					<Avatar :user="user" class="avatar" indicator disableLink />
+				</A>
 			</div>
 		</Transition>
 	</div>
diff --git a/packages/client/src/pages/admin/overview.pie.vue b/packages/client/src/pages/admin/OverviewPie.vue
similarity index 100%
rename from packages/client/src/pages/admin/overview.pie.vue
rename to packages/client/src/pages/admin/OverviewPie.vue
diff --git a/packages/client/src/pages/admin/overview.queue.vue b/packages/client/src/pages/admin/OverviewQueue.vue
similarity index 98%
rename from packages/client/src/pages/admin/overview.queue.vue
rename to packages/client/src/pages/admin/OverviewQueue.vue
index 5b003887e..ebc0c0121 100644
--- a/packages/client/src/pages/admin/overview.queue.vue
+++ b/packages/client/src/pages/admin/OverviewQueue.vue
@@ -43,7 +43,7 @@
 
 <script lang="ts" setup>
 import { markRaw, onMounted, onUnmounted, ref } from "vue";
-import XChart from "./overview.queue.chart.vue";
+import XChart from "./OverviewQueueChart.vue";
 import number from "@/filters/number";
 import * as os from "@/os";
 import { stream } from "@/stream";
diff --git a/packages/client/src/pages/admin/overview.queue.chart.vue b/packages/client/src/pages/admin/OverviewQueueChart.vue
similarity index 100%
rename from packages/client/src/pages/admin/overview.queue.chart.vue
rename to packages/client/src/pages/admin/OverviewQueueChart.vue
diff --git a/packages/client/src/pages/admin/overview.stats.vue b/packages/client/src/pages/admin/OverviewStats.vue
similarity index 92%
rename from packages/client/src/pages/admin/overview.stats.vue
rename to packages/client/src/pages/admin/OverviewStats.vue
index 172e346e7..2ccbdbdfd 100644
--- a/packages/client/src/pages/admin/overview.stats.vue
+++ b/packages/client/src/pages/admin/OverviewStats.vue
@@ -4,7 +4,7 @@
 			:name="$store.state.animation ? '_transition_zoom' : ''"
 			mode="out-in"
 		>
-			<MkLoading v-if="fetching" />
+			<Loading 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">
-							<MkNumber
+							<Number
 								:value="stats.originalUsersCount"
 								style="margin-right: 0.5em"
 							/>
-							<MkNumberDiff
+							<NumberDiff
 								v-tooltip="i18n.ts.dayOverDayChanges"
 								class="diff"
 								:value="usersComparedToThePrevDay"
-							></MkNumberDiff>
+							></NumberDiff>
 						</div>
 						<div class="label">{{ i18n.ts.users }}</div>
 					</div>
@@ -31,15 +31,15 @@
 					</div>
 					<div class="body">
 						<div class="value">
-							<MkNumber
+							<Number
 								:value="stats.originalNotesCount"
 								style="margin-right: 0.5em"
 							/>
-							<MkNumberDiff
+							<NumberDiff
 								v-tooltip="i18n.ts.dayOverDayChanges"
 								class="diff"
 								:value="notesComparedToThePrevDay"
-							></MkNumberDiff>
+							></NumberDiff>
 						</div>
 						<div class="label">{{ i18n.ts.notes }}</div>
 					</div>
@@ -50,7 +50,7 @@
 					</div>
 					<div class="body">
 						<div class="value">
-							<MkNumber
+							<Number
 								:value="stats.instances"
 								style="margin-right: 0.5em"
 							/>
@@ -64,7 +64,7 @@
 					</div>
 					<div class="body">
 						<div class="value">
-							<MkNumber
+							<Number
 								:value="onlineUsersCount"
 								style="margin-right: 0.5em"
 							/>
@@ -78,7 +78,7 @@
 					</div>
 					<div class="body">
 						<div class="value">
-							<MkNumber
+							<Number
 								:value="emojiCount"
 								style="margin-right: 0.5em"
 							/>
@@ -95,11 +95,11 @@
 
 <script lang="ts" setup>
 import { onMounted, onUnmounted, ref } from "vue";
-import MkMiniChart from "@/components/MkMiniChart.vue";
+import MiniChart from "@/components/MiniChart.vue";
 import * as os from "@/os";
 import number from "@/filters/number";
-import MkNumberDiff from "@/components/MkNumberDiff.vue";
-import MkNumber from "@/components/MkNumber.vue";
+import NumberDiff from "@/components/NumberDiff.vue";
+import Number from "@/components/Number.vue";
 import { i18n } from "@/i18n";
 
 let stats: any = $ref(null);
diff --git a/packages/client/src/pages/admin/overview.user.vue b/packages/client/src/pages/admin/OverviewUser.vue
similarity index 84%
rename from packages/client/src/pages/admin/overview.user.vue
rename to packages/client/src/pages/admin/OverviewUser.vue
index a2eaf33a7..ce4f6b43e 100644
--- a/packages/client/src/pages/admin/overview.user.vue
+++ b/packages/client/src/pages/admin/OverviewUser.vue
@@ -1,24 +1,26 @@
 <template>
-	<MkA :class="[$style.root]" :to="`/user-info/${user.id}`">
-		<MkAvatar
+	<A :class="[$style.root]" :to="`/user-info/${user.id}`">
+		<Avatar
 			class="avatar"
 			:user="user"
 			:disable-link="true"
 			:show-indicator="true"
 		/>
 		<div class="body">
-			<span class="name"><MkUserName class="name" :user="user" /></span>
+			<span class="name">
+				<UserName class="name" :user="user" />
+			</span>
 			<span class="sub"
 				><span class="acct _monospace">@{{ acct(user) }}</span></span
 			>
 		</div>
-		<MkMiniChart v-if="chart" class="chart" :src="chart.inc" />
-	</MkA>
+		<MiniChart v-if="chart" class="chart" :src="chart.inc" />
+	</A>
 </template>
 
 <script lang="ts" setup>
 import * as misskey from "iceshrimp-js";
-import MkMiniChart from "@/components/MkMiniChart.vue";
+import MiniChart from "@/components/MiniChart.vue";
 import * as os from "@/os";
 import { acct } from "@/filters/user";
 
diff --git a/packages/client/src/pages/admin/overview.users.vue b/packages/client/src/pages/admin/OverviewUsers.vue
similarity index 87%
rename from packages/client/src/pages/admin/overview.users.vue
rename to packages/client/src/pages/admin/OverviewUsers.vue
index 9017eb2a2..da08d52a0 100644
--- a/packages/client/src/pages/admin/overview.users.vue
+++ b/packages/client/src/pages/admin/OverviewUsers.vue
@@ -4,16 +4,16 @@
 			:name="$store.state.animation ? '_transition_zoom' : ''"
 			mode="out-in"
 		>
-			<MkLoading v-if="fetching" />
+			<Loading v-if="fetching" />
 			<div v-else class="users">
-				<MkA
+				<A
 					v-for="(user, i) in newUsers"
 					:key="user.id"
 					:to="`/user-info/${user.id}`"
 					class="user"
 				>
-					<MkUserCardMini :user="user" />
-				</MkA>
+					<UserCardMini :user="user" />
+				</A>
 			</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 MkUserCardMini from "@/components/MkUserCardMini.vue";
+import UserCardMini from "@/components/UserCardMini.vue";
 
 let newUsers = $ref(null);
 let fetching = $ref(true);
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 b8920f332..b28127bf6 100644
--- a/packages/client/src/pages/admin/queue.vue
+++ b/packages/client/src/pages/admin/Queue.vue
@@ -1,23 +1,24 @@
 <template>
-	<MkStickyContainer>
-		<template #header
-			><MkPageHeader
+	<StickyContainer>
+		<template #header>
+			<PageHeader
 				v-model:tab="tab"
 				:actions="headerActions"
 				:tabs="headerTabs"
 				:display-back-button="true"
-		/></template>
-		<MkSpacer :content-max="800">
+			/>
+		</template>
+		<Spacer :content-max="800">
 			<XQueue v-if="tab === 'deliver'" domain="deliver" />
 			<XQueue v-else-if="tab === 'inbox'" domain="inbox" />
-		</MkSpacer>
-	</MkStickyContainer>
+		</Spacer>
+	</StickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { markRaw, onMounted, onBeforeUnmount, nextTick } from "vue";
-import XQueue from "./queue.chart.vue";
-import MkButton from "@/components/MkButton.vue";
+import XQueue from "./QueueChart.vue";
+import Button from "@/components/Button.vue";
 import * as os from "@/os";
 import * as config from "@/config";
 import { i18n } from "@/i18n";
diff --git a/packages/client/src/pages/admin/queue.chart.vue b/packages/client/src/pages/admin/QueueChart.vue
similarity index 98%
rename from packages/client/src/pages/admin/queue.chart.vue
rename to packages/client/src/pages/admin/QueueChart.vue
index 2b6f271c6..0ebcda216 100644
--- a/packages/client/src/pages/admin/queue.chart.vue
+++ b/packages/client/src/pages/admin/QueueChart.vue
@@ -59,7 +59,7 @@
 
 <script lang="ts" setup>
 import { markRaw, onMounted, onUnmounted, ref } from "vue";
-import XChart from "./queue.chart.chart.vue";
+import XChart from "./QueueChartChart.vue";
 import number from "@/filters/number";
 import * as os from "@/os";
 import { stream } from "@/stream";
diff --git a/packages/client/src/pages/admin/queue.chart.chart.vue b/packages/client/src/pages/admin/QueueChartChart.vue
similarity index 100%
rename from packages/client/src/pages/admin/queue.chart.chart.vue
rename to packages/client/src/pages/admin/QueueChartChart.vue
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 34f76db69..6d441fedc 100644
--- a/packages/client/src/pages/admin/relays.vue
+++ b/packages/client/src/pages/admin/Relays.vue
@@ -1,12 +1,13 @@
 <template>
-	<MkStickyContainer>
-		<template #header
-			><MkPageHeader
+	<StickyContainer>
+		<template #header>
+			<PageHeader
 				:actions="headerActions"
 				:tabs="headerTabs"
 				:display-back-button="true"
-		/></template>
-		<MkSpacer :content-max="800">
+			/>
+		</template>
+		<Spacer :content-max="800">
 			<div
 				v-for="relay in relays"
 				:key="relay.inbox"
@@ -29,22 +30,22 @@
 					></i>
 					<span>{{ i18n.t(`_relayStatus.${relay.status}`) }}</span>
 				</div>
-				<MkButton
+				<Button
 					class="button"
 					inline
 					danger
 					@click="remove(relay.inbox)"
 					><i class="ph-trash ph-bold ph-lg"></i>
-					{{ i18n.ts.remove }}</MkButton
+					{{ i18n.ts.remove }}</Button
 				>
 			</div>
-		</MkSpacer>
-	</MkStickyContainer>
+		</Spacer>
+	</StickyContainer>
 </template>
 
 <script lang="ts" setup>
 import {} from "vue";
-import MkButton from "@/components/MkButton.vue";
+import Button from "@/components/Button.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 7d70a95db..c1111169e 100644
--- a/packages/client/src/pages/admin/security.vue
+++ b/packages/client/src/pages/admin/Security.vue
@@ -1,12 +1,13 @@
 <template>
-	<MkStickyContainer>
-		<template #header
-			><MkPageHeader
+	<StickyContainer>
+		<template #header>
+			<PageHeader
 				:actions="headerActions"
 				:tabs="headerTabs"
 				:display-back-button="true"
-		/></template>
-		<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
+			/>
+		</template>
+		<Spacer :content-max="700" :margin-min="16" :margin-max="32">
 			<FormSuspense :p="init">
 				<div class="_formRoot">
 					<FormFolder class="_formBlock">
@@ -140,22 +141,22 @@
 					</FormFolder>
 				</div>
 			</FormSuspense>
-		</MkSpacer>
-	</MkStickyContainer>
+		</Spacer>
+	</StickyContainer>
 </template>
 
 <script lang="ts" setup>
 import {} from "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 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 * 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 8875c2723..c4fede881 100644
--- a/packages/client/src/pages/admin/settings.vue
+++ b/packages/client/src/pages/admin/Settings.vue
@@ -1,13 +1,14 @@
 <template>
 	<div>
-		<MkStickyContainer>
-			<template #header
-				><MkPageHeader
+		<StickyContainer>
+			<template #header>
+				<PageHeader
 					:actions="headerActions"
 					:tabs="headerTabs"
 					:display-back-button="true"
-			/></template>
-			<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
+				/>
+			</template>
+			<Spacer :content-max="700" :margin-min="16" :margin-max="32">
 				<FormSuspense :p="init">
 					<div class="_formRoot">
 						<FormInput v-model="name" class="_formBlock">
@@ -121,20 +122,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>
-							<MkRadios
+							<Radios
 								v-model="defaultReaction"
 								class="_formBlock"
 							>
@@ -142,13 +143,13 @@
 									i18n.ts.defaultReaction
 								}}</template>
 								<option value="⭐">
-									<MkEmoji emoji="⭐" style="height: 1.7em" />
+									<Emoji emoji="⭐" style="height: 1.7em" />
 								</option>
 								<option value="👍">
-									<MkEmoji emoji="👍" style="height: 1.7em" />
+									<Emoji emoji="👍" style="height: 1.7em" />
 								</option>
 								<option value="❤️">
-									<MkEmoji emoji="❤️" style="height: 1.7em" />
+									<Emoji emoji="❤️" style="height: 1.7em" />
 								</option>
 								<option value="custom">
 									<FormInput
@@ -159,7 +160,7 @@
 										style="margin: 0 0 !important"
 									/>
 								</option>
-							</MkRadios>
+							</Radios>
 						</FormSection>
 
 						<FormSection>
@@ -384,21 +385,21 @@
 						</FormSection>
 					</div>
 				</FormSuspense>
-			</MkSpacer>
-		</MkStickyContainer>
+			</Spacer>
+		</StickyContainer>
 	</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/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 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 * 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 5ed0fb365..431e786b8 100644
--- a/packages/client/src/pages/admin/users.vue
+++ b/packages/client/src/pages/admin/Users.vue
@@ -1,17 +1,18 @@
 <template>
 	<div>
-		<MkStickyContainer>
-			<template #header
-				><MkPageHeader
+		<StickyContainer>
+			<template #header>
+				<PageHeader
 					:actions="headerActions"
 					:tabs="headerTabs"
 					:display-back-button="true"
-			/></template>
-			<MkSpacer :content-max="900">
+				/>
+			</template>
+			<Spacer :content-max="900">
 				<div class="lknzcolw">
 					<div class="users">
 						<div class="inputs">
-							<MkSelect v-model="sort" style="flex: 1">
+							<Select v-model="sort" style="flex: 1">
 								<template #label>{{ i18n.ts.sort }}</template>
 								<option value="-createdAt">
 									{{ i18n.ts.registeredDate }} ({{
@@ -33,8 +34,8 @@
 										i18n.ts.descendingOrder
 									}})
 								</option>
-							</MkSelect>
-							<MkSelect v-model="state" style="flex: 1">
+							</Select>
+							<Select v-model="state" style="flex: 1">
 								<template #label>{{ i18n.ts.state }}</template>
 								<option value="all">{{ i18n.ts.all }}</option>
 								<option value="available">
@@ -52,8 +53,8 @@
 								<option value="suspended">
 									{{ i18n.ts.suspend }}
 								</option>
-							</MkSelect>
-							<MkSelect v-model="origin" style="flex: 1">
+							</Select>
+							<Select v-model="origin" style="flex: 1">
 								<template #label>{{
 									i18n.ts.instance
 								}}</template>
@@ -66,10 +67,10 @@
 								<option value="remote">
 									{{ i18n.ts.remote }}
 								</option>
-							</MkSelect>
+							</Select>
 						</div>
 						<div class="inputs">
-							<MkInput
+							<Input
 								v-model="searchUsername"
 								style="flex: 1"
 								type="text"
@@ -80,8 +81,8 @@
 								<template #label>{{
 									i18n.ts.username
 								}}</template>
-							</MkInput>
-							<MkInput
+							</Input>
+							<Input
 								v-model="searchHost"
 								style="flex: 1"
 								type="text"
@@ -91,16 +92,16 @@
 							>
 								<template #prefix>@</template>
 								<template #label>{{ i18n.ts.host }}</template>
-							</MkInput>
+							</Input>
 						</div>
 
-						<MkPagination
+						<Pagination
 							v-slot="{ items }"
 							ref="paginationComponent"
 							:pagination="pagination"
 							class="users"
 						>
-							<MkA
+							<A
 								v-for="user in items"
 								:key="user.id"
 								v-tooltip.mfm="
@@ -111,28 +112,28 @@
 								class="user"
 								:to="`/user-info/${user.id}`"
 							>
-								<MkUserCardMini :user="user" />
-							</MkA>
-						</MkPagination>
+								<UserCardMini :user="user" />
+							</A>
+						</Pagination>
 					</div>
 				</div>
-			</MkSpacer>
-		</MkStickyContainer>
+			</Spacer>
+		</StickyContainer>
 	</div>
 </template>
 
 <script lang="ts" setup>
 import { computed } from "vue";
-import MkInput from "@/components/form/input.vue";
-import MkSelect from "@/components/form/select.vue";
-import MkPagination from "@/components/MkPagination.vue";
+import Input from "@/components/form/Input.vue";
+import Select from "@/components/form/Select.vue";
+import Pagination from "@/components/Pagination.vue";
 import * as os from "@/os";
 import { lookupUser } from "@/scripts/lookup-user";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
-import MkUserCardMini from "@/components/MkUserCardMini.vue";
+import UserCardMini from "@/components/UserCardMini.vue";
 
-let paginationComponent = $ref<InstanceType<typeof MkPagination>>();
+let paginationComponent = $ref<InstanceType<typeof Pagination>>();
 
 let sort = $ref("+createdAt");
 let state = $ref("all");
diff --git a/packages/client/src/pages/admin/overview.queue-chart.vue b/packages/client/src/pages/admin/overview.queue-chart.vue
deleted file mode 100644
index 1348bde98..000000000
--- a/packages/client/src/pages/admin/overview.queue-chart.vue
+++ /dev/null
@@ -1,222 +0,0 @@
-<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/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 f3b0627ba..0dc7e8978 100644
--- a/packages/client/src/pages/gallery/edit.vue
+++ b/packages/client/src/pages/gallery/Edit.vue
@@ -1,15 +1,19 @@
 <template>
-	<MkStickyContainer>
-		<template #header
-			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
-		/></template>
-		<MkSpacer :content-max="800" :margin-min="16" :margin-max="32">
+	<StickyContainer>
+		<template #header>
+			<PageHeader :actions="headerActions" :tabs="headerTabs" />
+		</template>
+		<Spacer :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>
 
@@ -44,7 +48,11 @@
 					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
 				>
@@ -58,17 +66,17 @@
 					{{ i18n.ts.delete }}</FormButton
 				>
 			</FormSuspense>
-		</MkSpacer>
-	</MkStickyContainer>
+		</Spacer>
+	</StickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { computed, inject, watch } from "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 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 { 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 45e7bd7ae..50664730c 100644
--- a/packages/client/src/pages/gallery/index.vue
+++ b/packages/client/src/pages/gallery/Index.vue
@@ -1,13 +1,14 @@
 <template>
-	<MkStickyContainer>
-		<template #header
-			><MkPageHeader
+	<StickyContainer>
+		<template #header>
+			<PageHeader
 				v-model:tab="tab"
 				:actions="headerActions"
 				:tabs="headerTabs"
 				:display-back-button="true"
-		/></template>
-		<MkSpacer :content-max="1200">
+			/>
+		</template>
+		<Spacer :content-max="1200">
 			<swiper
 				:round-lengths="true"
 				:touch-angle="25"
@@ -25,93 +26,93 @@
 				@slide-change="onSlideChange"
 			>
 				<swiper-slide>
-					<MkFolder class="_gap">
+					<Folder class="_gap">
 						<template #header
 							><i class="ph-clock ph-bold ph-lg"></i>
 							{{ i18n.ts.recentPosts }}</template
 						>
-						<MkPagination
+						<Pagination
 							v-slot="{ items }"
 							:pagination="recentPostsPagination"
 							:disable-auto-load="true"
 						>
 							<div class="vfpdbgtk">
-								<MkGalleryPostPreview
+								<GalleryPostPreview
 									v-for="post in items"
 									:key="post.id"
 									:post="post"
 									class="post"
 								/>
 							</div>
-						</MkPagination>
-					</MkFolder>
-					<MkFolder class="_gap">
+						</Pagination>
+					</Folder>
+					<Folder class="_gap">
 						<template #header
 							><i class="ph-fire-simple ph-bold ph-lg"></i>
 							{{ i18n.ts.popularPosts }}</template
 						>
-						<MkPagination
+						<Pagination
 							v-slot="{ items }"
 							:pagination="popularPostsPagination"
 							:disable-auto-load="true"
 						>
 							<div class="vfpdbgtk">
-								<MkGalleryPostPreview
+								<GalleryPostPreview
 									v-for="post in items"
 									:key="post.id"
 									:post="post"
 									class="post"
 								/>
 							</div>
-						</MkPagination>
-					</MkFolder>
+						</Pagination>
+					</Folder>
 				</swiper-slide>
 				<swiper-slide>
-					<MkPagination
+					<Pagination
 						v-slot="{ items }"
 						:pagination="likedPostsPagination"
 					>
 						<div class="vfpdbgtk">
-							<MkGalleryPostPreview
+							<GalleryPostPreview
 								v-for="like in items"
 								:key="like.id"
 								:post="like.post"
 								class="post"
 							/>
 						</div>
-					</MkPagination>
+					</Pagination>
 				</swiper-slide>
 				<swiper-slide>
-					<MkA to="/gallery/new" class="_link" style="margin: 16px"
+					<A to="/gallery/new" class="_link" style="margin: 16px"
 						><i class="ph-plus ph-bold ph-lg"></i>
-						{{ i18n.ts.postToGallery }}</MkA
+						{{ i18n.ts.postToGallery }}</A
 					>
-					<MkPagination
+					<Pagination
 						v-slot="{ items }"
 						:pagination="myPostsPagination"
 					>
 						<div class="vfpdbgtk">
-							<MkGalleryPostPreview
+							<GalleryPostPreview
 								v-for="mypost in items"
 								:key="mypost.id"
 								:post="mypost"
 								class="post"
 							/>
 						</div>
-					</MkPagination>
+					</Pagination>
 				</swiper-slide>
 			</swiper>
-		</MkSpacer>
-	</MkStickyContainer>
+		</Spacer>
+	</StickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { computed, defineComponent, watch, onMounted } from "vue";
 import { Virtual } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/vue";
-import MkFolder from "@/components/MkFolder.vue";
-import MkPagination from "@/components/MkPagination.vue";
-import MkGalleryPostPreview from "@/components/MkGalleryPostPreview.vue";
+import Folder from "@/components/Folder.vue";
+import Pagination from "@/components/Pagination.vue";
+import GalleryPostPreview from "@/components/GalleryPostPreview.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 568d85f94..15239fe92 100644
--- a/packages/client/src/pages/gallery/post.vue
+++ b/packages/client/src/pages/gallery/Post.vue
@@ -1,9 +1,9 @@
 <template>
-	<MkStickyContainer>
-		<template #header
-			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
-		/></template>
-		<MkSpacer :content-max="1000" :margin-min="16" :margin-max="32">
+	<StickyContainer>
+		<template #header>
+			<PageHeader :actions="headerActions" :tabs="headerTabs" />
+		</template>
+		<Spacer :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>
-								<MkTime :time="post.createdAt" mode="detail" />
+								<Time :time="post.createdAt" mode="detail" />
 							</div>
 							<div class="actions">
 								<div class="like">
-									<MkButton
+									<Button
 										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
-										></MkButton
+										></Button
 									>
-									<MkButton
+									<Button
 										v-else
 										v-tooltip="i18n.ts._gallery.like"
 										class="button"
@@ -53,7 +53,7 @@
 											v-if="post.likedCount > 0"
 											class="count"
 											>{{ post.likedCount }}</span
-										></MkButton
+										></Button
 									>
 								</div>
 								<div class="other">
@@ -92,15 +92,15 @@
 								</div>
 							</div>
 							<div class="user">
-								<MkAvatar :user="post.user" class="avatar" />
+								<Avatar :user="post.user" class="avatar" />
 								<div class="name">
-									<MkUserName
+									<UserName
 										:user="post.user"
 										style="display: block"
 									/>
-									<MkAcct :user="post.user" />
+									<Acct :user="post.user" />
 								</div>
-								<MkFollowButton
+								<FollowButton
 									v-if="!$i || $i.id != post.user.id"
 									:user="post.user"
 									:inline="true"
@@ -111,7 +111,7 @@
 								/>
 							</div>
 						</div>
-						<MkContainer
+						<Container
 							:max-height="300"
 							:foldable="true"
 							class="other"
@@ -120,38 +120,38 @@
 								><i class="ph-clock ph-bold ph-lg"></i>
 								{{ i18n.ts.recentPosts }}</template
 							>
-							<MkPagination
+							<Pagination
 								v-slot="{ items }"
 								:pagination="otherPostsPagination"
 							>
 								<div class="sdrarzaf">
-									<MkGalleryPostPreview
+									<GalleryPostPreview
 										v-for="post in items"
 										:key="post.id"
 										:post="post"
 										class="post"
 									/>
 								</div>
-							</MkPagination>
-						</MkContainer>
+							</Pagination>
+						</Container>
 					</div>
-					<MkError v-else-if="error" @retry="fetch()" />
-					<MkLoading v-else />
+					<Error v-else-if="error" @retry="fetch()" />
+					<Loading v-else />
 				</transition>
 			</div>
-		</MkSpacer>
-	</MkStickyContainer>
+		</Spacer>
+	</StickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { computed, defineComponent, inject, watch } from "vue";
-import MkButton from "@/components/MkButton.vue";
+import Button from "@/components/Button.vue";
 import * as os from "@/os";
-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 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 { url } from "@/config";
 import { useRouter } from "@/router";
 import { i18n } from "@/i18n";
@@ -241,7 +241,7 @@ definePageMetadata(
 			? {
 					title: post.title,
 					avatar: post.user,
-				}
+			  }
 			: null,
 	),
 );
@@ -252,6 +252,7 @@ definePageMetadata(
 .fade-leave-active {
 	transition: opacity 0.125s ease;
 }
+
 .fade-enter-from,
 .fade-leave-to {
 	opacity: 0;
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 5659f2c05..17c9de886 100644
--- a/packages/client/src/pages/messaging/index.vue
+++ b/packages/client/src/pages/messaging/Index.vue
@@ -1,13 +1,14 @@
 <template>
-	<MkStickyContainer>
-		<template #header
-			><MkPageHeader
+	<StickyContainer>
+		<template #header>
+			<PageHeader
 				v-model:tab="tab"
 				:actions="headerActions"
 				:tabs="headerTabs"
-		/></template>
+			/>
+		</template>
 		<div>
-			<MkSpacer :content-max="800">
+			<Spacer :content-max="800">
 				<swiper
 					:round-lengths="true"
 					:touch-angle="25"
@@ -26,31 +27,31 @@
 				>
 					<swiper-slide>
 						<div class="_content yweeujhr dms">
-							<MkButton
+							<Button
 								primary
 								class="start"
 								v-if="!isMobile"
 								@click="startUser"
 								><i class="ph-plus ph-bold ph-lg"></i>
-								{{ i18n.ts.startMessaging }}</MkButton
+								{{ i18n.ts.startMessaging }}</Button
 							>
-							<MkPagination
+							<Pagination
 								v-slot="{ items }"
 								:pagination="dmsPagination"
 							>
-								<MkChatPreview
+								<ChatPreview
 									v-for="message in items"
 									:key="message.id"
 									class="yweeujhr message _block"
 									:message="message"
 								/>
-							</MkPagination>
+							</Pagination>
 						</div>
 					</swiper-slide>
 					<swiper-slide>
 						<div class="_content yweeujhr groups">
 							<div v-if="!isMobile" class="groupsbuttons">
-								<MkButton
+								<Button
 									primary
 									class="start"
 									:link="true"
@@ -58,33 +59,33 @@
 									><i
 										class="ph-user-circle-gear ph-bold ph-lg"
 									></i>
-									{{ i18n.ts.manageGroups }}</MkButton
+									{{ i18n.ts.manageGroups }}</Button
 								>
-								<MkButton
+								<Button
 									primary
 									class="start"
 									@click="startGroup"
 									><i class="ph-plus ph-bold ph-lg"></i>
-									{{ i18n.ts.startMessaging }}</MkButton
+									{{ i18n.ts.startMessaging }}</Button
 								>
 							</div>
-							<MkPagination
+							<Pagination
 								v-slot="{ items }"
 								:pagination="groupsPagination"
 							>
-								<MkChatPreview
+								<ChatPreview
 									v-for="message in items"
 									:key="message.id"
 									class="yweeujhr message _block"
 									:message="message"
 								/>
-							</MkPagination>
+							</Pagination>
 						</div>
 					</swiper-slide>
 				</swiper>
-			</MkSpacer>
+			</Spacer>
 		</div>
-	</MkStickyContainer>
+	</StickyContainer>
 </template>
 
 <script lang="ts" setup>
@@ -92,9 +93,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 MkButton from "@/components/MkButton.vue";
-import MkChatPreview from "@/components/MkChatPreview.vue";
-import MkPagination from "@/components/MkPagination.vue";
+import Button from "@/components/Button.vue";
+import ChatPreview from "@/components/ChatPreview.vue";
+import Pagination from "@/components/Pagination.vue";
 import * as os from "@/os";
 import { stream } from "@/stream";
 import { useRouter } from "@/router";
diff --git a/packages/client/src/pages/messaging/messaging-room.vue b/packages/client/src/pages/messaging/MessagingRoom.vue
similarity index 94%
rename from packages/client/src/pages/messaging/messaging-room.vue
rename to packages/client/src/pages/messaging/MessagingRoom.vue
index a360863f2..e4647c0ff 100644
--- a/packages/client/src/pages/messaging/messaging-room.vue
+++ b/packages/client/src/pages/messaging/MessagingRoom.vue
@@ -6,9 +6,9 @@
 		@drop.prevent.stop="onDrop"
 	>
 		<div class="_content mk-messaging-room">
-			<MkSpacer :content-max="800">
+			<Spacer :content-max="800">
 				<div class="body">
-					<MkPagination
+					<Pagination
 						v-if="pagination"
 						ref="pagingComponent"
 						:key="userAcct || groupId"
@@ -46,7 +46,7 @@
 								/>
 							</XList>
 						</template>
-					</MkPagination>
+					</Pagination>
 				</div>
 				<footer>
 					<div
@@ -68,7 +68,7 @@
 								>
 							</template>
 						</I18n>
-						<MkEllipsis />
+						<Ellipsis />
 					</div>
 					<transition :name="animation ? 'fade' : ''">
 						<div v-show="showIndicator" class="new-message">
@@ -91,7 +91,7 @@
 						class="form"
 					/>
 				</footer>
-			</MkSpacer>
+			</Spacer>
 		</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 "./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 XMessage from "./MessagingRoomMessage.vue";
+import XForm from "./MessagingRoomForm.vue";
+import XList from "@/components/DateSeparatedList.vue";
+import Pagination, { Paging } from "@/components/Pagination.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 MkPagination>>();
+let pagingComponent = $ref<InstanceType<typeof Pagination>>();
 
 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/messaging/messaging-room.form.vue b/packages/client/src/pages/messaging/MessagingRoomForm.vue
similarity index 100%
rename from packages/client/src/pages/messaging/messaging-room.form.vue
rename to packages/client/src/pages/messaging/MessagingRoomForm.vue
diff --git a/packages/client/src/pages/messaging/messaging-room.message.vue b/packages/client/src/pages/messaging/MessagingRoomMessage.vue
similarity index 97%
rename from packages/client/src/pages/messaging/messaging-room.message.vue
rename to packages/client/src/pages/messaging/MessagingRoomMessage.vue
index f3fb921e3..af8f2c812 100644
--- a/packages/client/src/pages/messaging/messaging-room.message.vue
+++ b/packages/client/src/pages/messaging/MessagingRoomMessage.vue
@@ -1,6 +1,6 @@
 <template>
 	<div v-size="{ max: [400, 500] }" class="thvuemwp" :class="{ isMe }">
-		<MkAvatar
+		<Avatar
 			v-if="!isMe"
 			class="avatar"
 			:user="message.user"
@@ -54,7 +54,7 @@
 				</a>
 			</div>
 			<div></div>
-			<MkUrlPreview
+			<UrlPreview
 				v-for="url in urls"
 				:key="url"
 				:url="url"
@@ -72,7 +72,7 @@
 						i18n.ts.messageRead
 					}}</span>
 				</template>
-				<MkTime :time="message.createdAt" />
+				<Time :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/MkMediaList.vue";
+import XMediaList from "@/components/MediaList.vue";
 import { extractUrlFromMfm } from "@/scripts/extract-url-from-mfm";
-import MkUrlPreview from "@/components/MkUrlPreview.vue";
+import UrlPreview from "@/components/UrlPreview.vue";
 import * as os from "@/os";
 import { $i } from "@/account";
 import { i18n } from "@/i18n";
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 040a6b052..a2eb8eac2 100644
--- a/packages/client/src/pages/my-antennas/create.vue
+++ b/packages/client/src/pages/my-antennas/Create.vue
@@ -1,13 +1,13 @@
 <template>
-	<MkSpacer :content-max="700">
+	<Spacer :content-max="700">
 		<div class="geegznzt">
 			<XAntenna :antenna="draft" @created="onAntennaCreated" />
 		</div>
-	</MkSpacer>
+	</Spacer>
 </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 36254ff74..77f1791c1 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 560794cb8..19b44dc54 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">
-			<MkInput v-model="name" class="_formBlock">
+			<Input v-model="name" class="_formBlock">
 				<template #label>{{ i18n.ts.name }}</template>
-			</MkInput>
-			<MkSelect v-model="src" class="_formBlock">
+			</Input>
+			<Select 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>
-			</MkSelect>
-			<MkSelect
+			</Select>
+			<Select
 				v-if="src === 'list'"
 				v-model="userListId"
 				class="_formBlock"
@@ -30,8 +30,8 @@
 				>
 					{{ list.name }}
 				</option>
-			</MkSelect>
-			<MkSelect
+			</Select>
+			<Select
 				v-else-if="src === 'group'"
 				v-model="userGroupId"
 				class="_formBlock"
@@ -44,8 +44,8 @@
 				>
 					{{ group.name }}
 				</option>
-			</MkSelect>
-			<MkTextarea
+			</Select>
+			<Textarea
 				v-else-if="src === 'users'"
 				v-model="users"
 				class="_formBlock"
@@ -57,8 +57,8 @@
 						{{ i18n.ts.addUser }}
 					</button></template
 				>
-			</MkTextarea>
-			<MkTextarea
+			</Textarea>
+			<Textarea
 				v-else-if="src === 'instances'"
 				v-model="instances"
 				class="_formBlock"
@@ -70,44 +70,44 @@
 						{{ i18n.ts.addInstance }}
 					</button></template
 				>
-			</MkTextarea>
-			<MkSwitch v-model="withReplies" class="_formBlock">{{
+			</Textarea>
+			<Switch v-model="withReplies" class="_formBlock">{{
 				i18n.ts.withReplies
-			}}</MkSwitch>
-			<MkTextarea v-model="keywords" class="_formBlock">
+			}}</Switch>
+			<Textarea v-model="keywords" class="_formBlock">
 				<template #label>{{ i18n.ts.antennaKeywords }}</template>
 				<template #caption>{{
 					i18n.ts.antennaKeywordsDescription
 				}}</template>
-			</MkTextarea>
-			<MkTextarea v-model="excludeKeywords" class="_formBlock">
+			</Textarea>
+			<Textarea v-model="excludeKeywords" class="_formBlock">
 				<template #label>{{ i18n.ts.antennaExcludeKeywords }}</template>
 				<template #caption>{{
 					i18n.ts.antennaKeywordsDescription
 				}}</template>
-			</MkTextarea>
-			<MkSwitch v-model="caseSensitive" class="_formBlock">{{
+			</Textarea>
+			<Switch v-model="caseSensitive" class="_formBlock">{{
 				i18n.ts.caseSensitive
-			}}</MkSwitch>
-			<MkSwitch v-model="withFile" class="_formBlock">{{
+			}}</Switch>
+			<Switch v-model="withFile" class="_formBlock">{{
 				i18n.ts.withFileAntenna
-			}}</MkSwitch>
-			<MkSwitch v-model="notify" class="_formBlock">{{
+			}}</Switch>
+			<Switch v-model="notify" class="_formBlock">{{
 				i18n.ts.notifyAntenna
-			}}</MkSwitch>
+			}}</Switch>
 		</div>
 		<div class="actions">
-			<MkButton inline primary @click="saveAntenna()"
+			<Button inline primary @click="saveAntenna()"
 				><i class="ph-floppy-disk-back ph-bold ph-lg"></i>
-				{{ i18n.ts.save }}</MkButton
+				{{ i18n.ts.save }}</Button
 			>
-			<MkButton
+			<Button
 				v-if="antenna.id != null"
 				inline
 				danger
 				@click="deleteAntenna()"
 				><i class="ph-trash ph-bold ph-lg"></i>
-				{{ i18n.ts.delete }}</MkButton
+				{{ i18n.ts.delete }}</Button
 			>
 		</div>
 	</div>
@@ -116,11 +116,11 @@
 <script lang="ts" setup>
 import { watch } from "vue";
 import * as Acct from "iceshrimp-js/built/acct";
-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 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 * 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 259c6db69..80385277b 100644
--- a/packages/client/src/pages/my-antennas/index.vue
+++ b/packages/client/src/pages/my-antennas/Index.vue
@@ -1,29 +1,30 @@
 <template>
-	<MkStickyContainer>
-		<template #header
-			><MkPageHeader
+	<StickyContainer>
+		<template #header>
+			<PageHeader
 				:actions="headerActions"
 				:tabs="headerTabs"
 				:display-back-button="true"
-		/></template>
-		<MkSpacer :content-max="700">
+			/>
+		</template>
+		<Spacer :content-max="700">
 			<div class="ieepwinx">
-				<MkInfo class="_gap" :icon="'flying-saucer'" :card="true">
+				<Info class="_gap" :icon="'flying-saucer'" :card="true">
 					<p>{{ i18n.ts.antennasDesc }}</p>
-					<MkButton
+					<Button
 						:link="true"
 						to="/my/antennas/create"
 						primary
 						class="add"
 						><i class="ph-plus ph-bold ph-lg"></i>
-						{{ i18n.ts.add }}</MkButton
+						{{ i18n.ts.add }}</Button
 					>
-				</MkInfo>
+				</Info>
 				<div class="">
-					<MkPagination ref="list" :pagination="pagination">
+					<Pagination ref="list" :pagination="pagination">
 						<template #default="{ items }">
 							<div v-for="antenna in items" :key="antenna.id">
-								<MkA
+								<A
 									class="uopelskx"
 									:link="true"
 									:to="`/timeline/antenna/${antenna.id}`"
@@ -38,27 +39,27 @@
 												: 'ph-check'
 										} ph-xs notify-icon`"
 									></i>
-								</MkA>
-								<MkA
+								</A>
+								<A
 									class="ljoevbzj"
 									:to="`/my/antennas/${antenna.id}`"
 								>
 									<div class="name">{{ antenna.name }}</div>
-								</MkA>
+								</A>
 							</div>
 						</template>
-					</MkPagination>
+					</Pagination>
 				</div>
 			</div>
-		</MkSpacer>
-	</MkStickyContainer>
+		</Spacer>
+	</StickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { onActivated, onDeactivated, ref } from "vue";
-import MkPagination from "@/components/MkPagination.vue";
-import MkButton from "@/components/MkButton.vue";
-import MkInfo from "@/components/MkInfo.vue";
+import Pagination from "@/components/Pagination.vue";
+import Button from "@/components/Button.vue";
+import Info from "@/components/Info.vue";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 
@@ -71,7 +72,7 @@ const headerActions = $computed(() => []);
 
 const headerTabs = $computed(() => []);
 
-const list = ref<typeof MkPagination | null>(null);
+const list = ref<typeof Pagination | 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 f88ee5a9b..ab9490bf0 100644
--- a/packages/client/src/pages/my-clips/index.vue
+++ b/packages/client/src/pages/my-clips/Index.vue
@@ -1,25 +1,26 @@
 <template>
-	<MkStickyContainer>
-		<template #header
-			><MkPageHeader
+	<StickyContainer>
+		<template #header>
+			<PageHeader
 				:actions="headerActions"
 				:tabs="headerTabs"
 				:display-back-button="true"
-		/></template>
-		<MkSpacer :content-max="700">
+			/>
+		</template>
+		<Spacer :content-max="700">
 			<div class="qtcaoidl">
-				<MkPagination
+				<Pagination
 					ref="pagingComponent"
 					:pagination="pagination"
 					class="list"
 				>
 					<template #empty>
-						<MkInfo :icon="'paperclip'" :card="true">
+						<Info :icon="'paperclip'" :card="true">
 							<p>{{ i18n.ts.clipsDesc }}</p>
-						</MkInfo>
+						</Info>
 					</template>
 					<template #default="{ items }">
-						<MkA
+						<A
 							v-for="item in items"
 							:key="item.id"
 							:to="`/clips/${item.id}`"
@@ -29,19 +30,19 @@
 							<div v-if="item.description" class="description">
 								{{ item.description }}
 							</div>
-						</MkA>
+						</A>
 					</template>
-				</MkPagination>
+				</Pagination>
 			</div>
-		</MkSpacer>
-	</MkStickyContainer>
+		</Spacer>
+	</StickyContainer>
 </template>
 
 <script lang="ts" setup>
 import {} from "vue";
-import MkPagination from "@/components/MkPagination.vue";
-import MkButton from "@/components/MkButton.vue";
-import MkInfo from "@/components/MkInfo.vue";
+import Pagination from "@/components/Pagination.vue";
+import Button from "@/components/Button.vue";
+import Info from "@/components/Info.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
@@ -51,7 +52,7 @@ const pagination = {
 	limit: 10,
 };
 
-const pagingComponent = $ref<InstanceType<typeof MkPagination>>();
+const pagingComponent = $ref<InstanceType<typeof Pagination>>();
 
 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 d77751e8d..19e24b97b 100644
--- a/packages/client/src/pages/my-groups/group.vue
+++ b/packages/client/src/pages/my-groups/Group.vue
@@ -1,6 +1,8 @@
 <template>
-	<MkStickyContainer>
-		<template #header><MkPageHeader :actions="headerActions" /></template>
+	<StickyContainer>
+		<template #header>
+			<PageHeader :actions="headerActions" />
+		</template>
 		<div class="mk-group-page">
 			<div class="_section members _gap">
 				<div class="_content">
@@ -10,14 +12,14 @@
 							:key="user.id"
 							class="user _panel"
 						>
-							<MkAvatar
+							<Avatar
 								:user="user"
 								class="avatar"
 								:show-indicator="true"
 							/>
 							<div class="body">
-								<MkUserName :user="user" class="name" />
-								<MkAcct :user="user" class="acct" />
+								<UserName :user="user" class="name" />
+								<Acct :user="user" class="acct" />
 							</div>
 							<div class="action">
 								<button
@@ -33,7 +35,7 @@
 				</div>
 			</div>
 		</div>
-	</MkStickyContainer>
+	</StickyContainer>
 </template>
 
 <script lang="ts" setup>
@@ -171,6 +173,7 @@ 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 d4cc6ab71..66cd98e77 100644
--- a/packages/client/src/pages/my-groups/index.vue
+++ b/packages/client/src/pages/my-groups/Index.vue
@@ -1,33 +1,33 @@
 <template>
-	<MkStickyContainer>
-		<template #header
-			><MkPageHeader :actions="headerActions" :display-back-button="true"
-		/></template>
-		<MkSpacer :content-max="800" :margin-min="20">
-			<MkButton
+	<StickyContainer>
+		<template #header>
+			<PageHeader :actions="headerActions" :display-back-button="true" />
+		</template>
+		<Spacer :content-max="800" :margin-min="20">
+			<Button
 				primary
 				style="margin: 0 auto var(--margin) auto"
 				@click="create"
 				><i class="ph-plus ph-bold ph-lg"></i>
-				{{ i18n.ts.createGroup }}</MkButton
+				{{ i18n.ts.createGroup }}</Button
 			>
-			<MkPagination
+			<Pagination
 				v-slot="{ items }"
 				ref="owned"
 				:pagination="ownedPagination"
 			>
 				<div v-for="group in items" :key="group.id" class="_card">
 					<div class="_title">
-						<MkA :to="`/my/groups/${group.id}`" class="_link">{{
+						<A :to="`/my/groups/${group.id}`" class="_link">{{
 							group.name
-						}}</MkA>
+						}}</A>
 					</div>
 					<div class="_content">
-						<MkAvatars :user-ids="group.userIds" />
+						<Avatars :user-ids="group.userIds" />
 					</div>
 				</div>
-			</MkPagination>
-			<MkPagination
+			</Pagination>
+			<Pagination
 				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">
-						<MkAvatars :user-ids="group.userIds" />
+						<Avatars :user-ids="group.userIds" />
 					</div>
 					<div class="_footer">
-						<MkButton danger @click="leave(group)">{{
+						<Button danger @click="leave(group)">{{
 							i18n.ts.leaveGroup
-						}}</MkButton>
+						}}</Button>
 					</div>
 				</div>
-			</MkPagination>
-		</MkSpacer>
-	</MkStickyContainer>
+			</Pagination>
+		</Spacer>
+	</StickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { computed, ref } from "vue";
-import MkPagination from "@/components/MkPagination.vue";
-import MkButton from "@/components/MkButton.vue";
-import MkAvatars from "@/components/MkAvatars.vue";
+import Pagination from "@/components/Pagination.vue";
+import Button from "@/components/Button.vue";
+import Avatars from "@/components/Avatars.vue";
 import * as os from "@/os";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import { i18n } from "@/i18n";
-import MkStickyContainer from "@/components/global/MkStickyContainer.vue";
+import StickyContainer from "@/components/global/StickyContainer.vue";
 
 const owned = ref("owned");
 const joined = ref("joined");
@@ -117,10 +117,12 @@ async function leave(group) {
 
 ._card {
 	margin-bottom: 1rem;
+
 	._title {
 		font-size: 1.2rem;
 		font-weight: bold;
 	}
+
 	._content {
 		padding: 20px;
 
@@ -128,6 +130,7 @@ 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 cb3a74f57..dd6025a31 100644
--- a/packages/client/src/pages/my-lists/index.vue
+++ b/packages/client/src/pages/my-lists/Index.vue
@@ -1,57 +1,58 @@
 <template>
-	<MkStickyContainer>
-		<template #header
-			><MkPageHeader
+	<StickyContainer>
+		<template #header>
+			<PageHeader
 				:actions="headerActions"
 				:tabs="headerTabs"
 				:display-back-button="true"
-		/></template>
-		<MkSpacer :content-max="700">
+			/>
+		</template>
+		<Spacer :content-max="700">
 			<div class="qkcjvfiv">
-				<MkInfo class="_gap" :icon="'list-bullets'" :card="true">
+				<Info class="_gap" :icon="'list-bullets'" :card="true">
 					<p>{{ i18n.ts.listsDesc }}</p>
-					<MkButton primary class="add" @click="create"
+					<Button primary class="add" @click="create"
 						><i class="ph-plus ph-bold ph-lg"></i>
-						{{ i18n.ts.createList }}</MkButton
+						{{ i18n.ts.createList }}</Button
 					>
-				</MkInfo>
+				</Info>
 
-				<MkPagination
+				<Pagination
 					v-slot="{ items }"
 					ref="pagingComponent"
 					:pagination="pagination"
 					class="lists _content"
 				>
-					<MkA
+					<A
 						v-for="list in items"
 						:key="list.id"
 						class="list _panel"
 						:to="`/my/lists/${list.id}`"
 					>
 						<div class="name">{{ list.name }}</div>
-						<MkAvatars :user-ids="list.userIds" />
-					</MkA>
-					<MkButton @click="deleteAll"
+						<Avatars :user-ids="list.userIds" />
+					</A>
+					<Button @click="deleteAll"
 						><i class="ph-trash ph-bold ph-lg"></i>
-						{{ i18n.ts.deleteAll }}</MkButton
+						{{ i18n.ts.deleteAll }}</Button
 					>
-				</MkPagination>
+				</Pagination>
 			</div>
-		</MkSpacer>
-	</MkStickyContainer>
+		</Spacer>
+	</StickyContainer>
 </template>
 
 <script lang="ts" setup>
 import {} from "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 Pagination from "@/components/Pagination.vue";
+import Button from "@/components/Button.vue";
+import Avatars from "@/components/Avatars.vue";
+import Info from "@/components/Info.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 
-const pagingComponent = $ref<InstanceType<typeof MkPagination>>();
+const pagingComponent = $ref<InstanceType<typeof Pagination>>();
 
 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 14223ffee..70a78372f 100644
--- a/packages/client/src/pages/my-lists/list.vue
+++ b/packages/client/src/pages/my-lists/List.vue
@@ -1,9 +1,9 @@
 <template>
-	<MkStickyContainer>
-		<template #header
-			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
-		/></template>
-		<MkSpacer :content-max="700">
+	<StickyContainer>
+		<template #header>
+			<PageHeader :actions="headerActions" :tabs="headerTabs" />
+		</template>
+		<Spacer :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">
-							<MkButton inline @click="addUser()">{{
+							<Button inline @click="addUser()">{{
 								i18n.ts.addUser
-							}}</MkButton>
-							<MkButton inline @click="renameList()">{{
+							}}</Button>
+							<Button inline @click="renameList()">{{
 								i18n.ts.rename
-							}}</MkButton>
-							<MkButton inline @click="deleteList()">{{
+							}}</Button>
+							<Button inline @click="deleteList()">{{
 								i18n.ts.delete
-							}}</MkButton>
+							}}</Button>
 							<FormSection>
 								<FormSwitch v-model="hideFromHomeTl">{{
 									i18n.ts.hideFromHome
@@ -42,14 +42,14 @@
 									:key="user.id"
 									class="user _panel"
 								>
-									<MkAvatar
+									<Avatar
 										:user="user"
 										class="avatar"
 										:show-indicator="true"
 									/>
 									<div class="body">
-										<MkUserName :user="user" class="name" />
-										<MkAcct :user="user" class="acct" />
+										<UserName :user="user" class="name" />
+										<Acct :user="user" class="acct" />
 									</div>
 									<div class="action">
 										<button
@@ -66,26 +66,26 @@
 					</div>
 				</transition>
 			</div>
-		</MkSpacer>
-	</MkStickyContainer>
+		</Spacer>
+	</StickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { computed, watch } from "vue";
-import MkButton from "@/components/MkButton.vue";
+import Button from "@/components/Button.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/page-editor/page-editor.blocks.vue b/packages/client/src/pages/page-editor/Blocks.vue
similarity index 64%
rename from packages/client/src/pages/page-editor/page-editor.blocks.vue
rename to packages/client/src/pages/page-editor/Blocks.vue
index 25e35a487..f0ba3dcc2 100644
--- a/packages/client/src/pages/page-editor/page-editor.blocks.vue
+++ b/packages/client/src/pages/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 "./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 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 * as os from "@/os";
 
 export default defineComponent({
diff --git a/packages/client/src/pages/page-editor/page-editor.container.vue b/packages/client/src/pages/page-editor/Container.vue
similarity index 100%
rename from packages/client/src/pages/page-editor/page-editor.container.vue
rename to packages/client/src/pages/page-editor/Container.vue
diff --git a/packages/client/src/pages/page-editor/page-editor.vue b/packages/client/src/pages/page-editor/PageEditor.vue
similarity index 88%
rename from packages/client/src/pages/page-editor/page-editor.vue
rename to packages/client/src/pages/page-editor/PageEditor.vue
index 7fda39303..e24f4cd1d 100644
--- a/packages/client/src/pages/page-editor/page-editor.vue
+++ b/packages/client/src/pages/page-editor/PageEditor.vue
@@ -1,71 +1,72 @@
 <template>
-	<MkStickyContainer>
-		<template #header
-			><MkPageHeader
+	<StickyContainer>
+		<template #header>
+			<PageHeader
 				v-model:tab="tab"
 				:actions="headerActions"
 				:tabs="headerTabs"
-		/></template>
-		<MkSpacer :content-max="700">
+			/>
+		</template>
+		<Spacer :content-max="700">
 			<div class="jqqmcavi">
-				<MkButton
+				<Button
 					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 }}</MkButton
+					{{ i18n.ts._pages.viewPage }}</Button
 				>
-				<MkButton
+				<Button
 					v-if="!readonly"
 					inline
 					primary
 					class="button"
 					@click="save"
 					><i class="ph-floppy-disk-back ph-bold ph-lg"></i>
-					{{ i18n.ts.save }}</MkButton
+					{{ i18n.ts.save }}</Button
 				>
-				<MkButton v-if="pageId" inline class="button" @click="duplicate"
+				<Button v-if="pageId" inline class="button" @click="duplicate"
 					><i class="ph-clipboard-text ph-bold ph-lg"></i>
-					{{ i18n.ts.duplicate }}</MkButton
+					{{ i18n.ts.duplicate }}</Button
 				>
-				<MkButton
+				<Button
 					v-if="pageId && !readonly"
 					inline
 					class="button"
 					danger
 					@click="del"
 					><i class="ph-trash ph-bold ph-lg"></i>
-					{{ i18n.ts.delete }}</MkButton
+					{{ i18n.ts.delete }}</Button
 				>
 			</div>
 
 			<div v-if="tab === 'settings'">
 				<div class="_formRoot">
-					<MkInput v-model="title" class="_formBlock">
+					<Input v-model="title" class="_formBlock">
 						<template #label>{{ i18n.ts._pages.title }}</template>
-					</MkInput>
+					</Input>
 
-					<MkInput v-model="summary" class="_formBlock">
+					<Input v-model="summary" class="_formBlock">
 						<template #label>{{ i18n.ts._pages.summary }}</template>
-					</MkInput>
+					</Input>
 
-					<MkInput v-model="name" class="_formBlock">
+					<Input v-model="name" class="_formBlock">
 						<template #prefix
 							>{{ url }}/@{{ author.username }}/pages/</template
 						>
 						<template #label>{{ i18n.ts._pages.url }}</template>
-					</MkInput>
+					</Input>
 
-					<MkSwitch v-model="isPublic" class="_formBlock">{{
+					<Switch v-model="isPublic" class="_formBlock">{{
 						i18n.ts.public
-					}}</MkSwitch>
-					<MkSwitch v-model="alignCenter" class="_formBlock">{{
+					}}</Switch>
+					<Switch v-model="alignCenter" class="_formBlock">{{
 						i18n.ts._pages.alignCenter
-					}}</MkSwitch>
+					}}</Switch>
 
-					<MkSelect v-model="font" class="_formBlock">
+					<Select v-model="font" class="_formBlock">
 						<template #label>{{ i18n.ts._pages.font }}</template>
 						<option value="serif">
 							{{ i18n.ts._pages.fontSerif }}
@@ -73,20 +74,18 @@
 						<option value="sans-serif">
 							{{ i18n.ts._pages.fontSansSerif }}
 						</option>
-					</MkSelect>
+					</Select>
 
-					<MkSwitch
-						v-model="hideTitleWhenPinned"
-						class="_formBlock"
-						>{{ i18n.ts._pages.hideTitleWhenPinned }}</MkSwitch
-					>
+					<Switch v-model="hideTitleWhenPinned" class="_formBlock"
+						>{{ i18n.ts._pages.hideTitleWhenPinned }}
+					</Switch>
 
 					<div class="eyeCatch">
-						<MkButton
+						<Button
 							v-if="eyeCatchingImageId == null && !readonly"
 							@click="setEyeCatchingImage"
 							><i class="ph-plus ph-bold ph-lg"></i>
-							{{ i18n.ts._pages.eyeCatchingImageSet }}</MkButton
+							{{ i18n.ts._pages.eyeCatchingImageSet }}</Button
 						>
 						<div v-else-if="eyeCatchingImage">
 							<img
@@ -94,13 +93,13 @@
 								:alt="eyeCatchingImage.name"
 								style="max-width: 100%"
 							/>
-							<MkButton
+							<Button
 								v-if="!readonly"
 								@click="removeEyeCatchingImage()"
 								><i class="ph-trash ph-bold ph-lg"></i>
 								{{
 									i18n.ts._pages.eyeCatchingImageRemove
-								}}</MkButton
+								}}</Button
 							>
 						</div>
 					</div>
@@ -110,9 +109,9 @@
 			<div v-else-if="tab === 'contents'">
 				<div>
 					<XBlocks v-model="content" class="content" :hpml="hpml" />
-					<MkButton v-if="!readonly" @click="add()"
+					<Button v-if="!readonly" @click="add()"
 						><i class="ph-plus ph-bold ph-lg"></i
-					></MkButton>
+					></Button>
 				</div>
 			</div>
 
@@ -141,34 +140,31 @@
 						/>
 					</VueDraggable>
 
-					<MkButton
-						v-if="!readonly"
-						class="add"
-						@click="addVariable()"
+					<Button v-if="!readonly" class="add" @click="addVariable()"
 						><i class="ph-plus ph-bold ph-lg"></i
-					></MkButton>
+					></Button>
 				</div>
 			</div>
 
 			<div v-else-if="tab === 'script'">
 				<div>
-					<MkTextarea v-model="script" class="_code" />
+					<Textarea v-model="script" class="_code" />
 				</div>
 			</div>
-		</MkSpacer>
-	</MkStickyContainer>
+		</Spacer>
+	</StickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { defineAsyncComponent, computed, provide, watch } from "vue";
 import { v4 as uuid } from "uuid";
-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 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 { blockDefs } from "@/scripts/hpml/index";
 import { HpmlTypeChecker } from "@/scripts/hpml/type-checker";
 import { url } from "@/config";
diff --git a/packages/client/src/pages/page-editor/page-editor.script-block.vue b/packages/client/src/pages/page-editor/ScriptBlock.vue
similarity index 97%
rename from packages/client/src/pages/page-editor/page-editor.script-block.vue
rename to packages/client/src/pages/page-editor/ScriptBlock.vue
index 4ce8fcd3c..bb67f1434 100644
--- a/packages/client/src/pages/page-editor/page-editor.script-block.vue
+++ b/packages/client/src/pages/page-editor/ScriptBlock.vue
@@ -93,14 +93,14 @@
 			class=""
 			style="padding: 0 16px 16px 16px"
 		>
-			<MkTextarea v-model="slots">
+			<Textarea v-model="slots">
 				<template #label>{{
 					i18n.ts._pages.script.blocks._fn.slots
 				}}</template>
 				<template #caption>{{
 					i18n.t("_pages.script.blocks._fn.slots-info")
 				}}</template>
-			</MkTextarea>
+			</Textarea>
 			<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 "./page-editor.container.vue";
-import MkTextarea from "@/components/form/textarea.vue";
+import XContainer from "./Container.vue";
+import Textarea from "@/components/form/Textarea.vue";
 import { blockDefs } from "@/scripts/hpml/index";
 import * as os from "@/os";
 import { isLiteralValue } from "@/scripts/hpml/expr";
@@ -162,10 +162,8 @@ import { i18n } from "@/i18n";
 export default defineComponent({
 	components: {
 		XContainer,
-		MkTextarea,
-		XV: defineAsyncComponent(
-			() => import("./page-editor.script-block.vue"),
-		),
+		Textarea,
+		XV: defineAsyncComponent(() => import("./ScriptBlock.vue")),
 	},
 
 	inject: ["getScriptBlockList"],
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.button.vue b/packages/client/src/pages/page-editor/elements/Button.vue
similarity index 79%
rename from packages/client/src/pages/page-editor/els/page-editor.el.button.vue
rename to packages/client/src/pages/page-editor/elements/Button.vue
index e53c9c8d8..81a11baeb 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.button.vue
+++ b/packages/client/src/pages/page-editor/elements/Button.vue
@@ -6,17 +6,17 @@
 		>
 
 		<section class="xfhsjczc">
-			<MkInput v-model="value.text"
+			<Input v-model="value.text"
 				><template #label>{{
 					i18n.ts._pages.blocks._button.text
-				}}</template></MkInput
+				}}</template></Input
 			>
-			<MkSwitch v-model="value.primary"
+			<Switch v-model="value.primary"
 				><span>{{
 					i18n.ts._pages.blocks._button.colored
-				}}</span></MkSwitch
+				}}</span></Switch
 			>
-			<MkSelect v-model="value.action">
+			<Select 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>
-			</MkSelect>
+			</Select>
 			<template v-if="value.action === 'dialog'">
-				<MkInput v-model="value.content"
+				<Input v-model="value.content"
 					><template #label>{{
 						i18n.ts._pages.blocks._button._action._dialog.content
-					}}</template></MkInput
+					}}</template></Input
 				>
 			</template>
 			<template v-else-if="value.action === 'pushEvent'">
-				<MkInput v-model="value.event"
+				<Input v-model="value.event"
 					><template #label>{{
 						i18n.ts._pages.blocks._button._action._pushEvent.event
-					}}</template></MkInput
+					}}</template></Input
 				>
-				<MkInput v-model="value.message"
+				<Input v-model="value.message"
 					><template #label>{{
 						i18n.ts._pages.blocks._button._action._pushEvent.message
-					}}</template></MkInput
+					}}</template></Input
 				>
-				<MkSelect v-model="value.var">
+				<Select v-model="value.var">
 					<template #label>{{
 						i18n.ts._pages.blocks._button._action._pushEvent
 							.variable
@@ -81,14 +81,14 @@
 							{{ v }}
 						</option>
 					</optgroup>
-				</MkSelect>
+				</Select>
 			</template>
 			<template v-else-if="value.action === 'callAiScript'">
-				<MkInput v-model="value.fn"
+				<Input v-model="value.fn"
 					><template #label>{{
 						i18n.ts._pages.blocks._button._action._callAiScript
 							.functionName
-					}}</template></MkInput
+					}}</template></Input
 				>
 			</template>
 		</section>
@@ -97,10 +97,10 @@
 
 <script lang="ts" setup>
 import {} from "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 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 { i18n } from "@/i18n";
 
 withDefaults(
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.canvas.vue b/packages/client/src/pages/page-editor/elements/Canvas.vue
similarity index 76%
rename from packages/client/src/pages/page-editor/els/page-editor.el.canvas.vue
rename to packages/client/src/pages/page-editor/elements/Canvas.vue
index 49820844d..f89304ae3 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.canvas.vue
+++ b/packages/client/src/pages/page-editor/elements/Canvas.vue
@@ -6,34 +6,34 @@
 		>
 
 		<section style="padding: 0 16px 0 16px">
-			<MkInput v-model="value.name">
+			<Input 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>
-			</MkInput>
-			<MkInput v-model="value.width" type="number">
+			</Input>
+			<Input v-model="value.width" type="number">
 				<template #label>{{
 					i18n.ts._pages.blocks._canvas.width
 				}}</template>
 				<template #suffix>px</template>
-			</MkInput>
-			<MkInput v-model="value.height" type="number">
+			</Input>
+			<Input v-model="value.height" type="number">
 				<template #label>{{
 					i18n.ts._pages.blocks._canvas.height
 				}}</template>
 				<template #suffix>px</template>
-			</MkInput>
+			</Input>
 		</section>
 	</XContainer>
 </template>
 
 <script lang="ts" setup>
 import {} from "vue";
-import XContainer from "../page-editor.container.vue";
-import MkInput from "@/components/form/input.vue";
+import XContainer from "../Container.vue";
+import Input from "@/components/form/Input.vue";
 import { i18n } from "@/i18n";
 
 withDefaults(
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.counter.vue b/packages/client/src/pages/page-editor/elements/Counter.vue
similarity index 75%
rename from packages/client/src/pages/page-editor/els/page-editor.el.counter.vue
rename to packages/client/src/pages/page-editor/elements/Counter.vue
index b047bb62d..b02a9bd05 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.counter.vue
+++ b/packages/client/src/pages/page-editor/elements/Counter.vue
@@ -6,32 +6,32 @@
 		>
 
 		<section style="padding: 0 16px 0 16px">
-			<MkInput v-model="value.name">
+			<Input 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>
-			</MkInput>
-			<MkInput v-model="value.text">
+			</Input>
+			<Input v-model="value.text">
 				<template #label>{{
 					i18n.ts._pages.blocks._counter.text
 				}}</template>
-			</MkInput>
-			<MkInput v-model="value.inc" type="number">
+			</Input>
+			<Input v-model="value.inc" type="number">
 				<template #label>{{
 					i18n.ts._pages.blocks._counter.inc
 				}}</template>
-			</MkInput>
+			</Input>
 		</section>
 	</XContainer>
 </template>
 
 <script lang="ts" setup>
 import {} from "vue";
-import XContainer from "../page-editor.container.vue";
-import MkInput from "@/components/form/input.vue";
+import XContainer from "../Container.vue";
+import Input from "@/components/form/Input.vue";
 import { i18n } from "@/i18n";
 
 withDefaults(
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.if.vue b/packages/client/src/pages/page-editor/elements/If.vue
similarity index 88%
rename from packages/client/src/pages/page-editor/els/page-editor.el.if.vue
rename to packages/client/src/pages/page-editor/elements/If.vue
index 6f436e9d4..1dbfbd870 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.if.vue
+++ b/packages/client/src/pages/page-editor/elements/If.vue
@@ -11,7 +11,7 @@
 		</template>
 
 		<section class="romcojzs">
-			<MkSelect v-model="value.var">
+			<Select v-model="value.var">
 				<template #label>{{
 					i18n.ts._pages.blocks._if.variable
 				}}</template>
@@ -37,7 +37,7 @@
 						{{ v }}
 					</option>
 				</optgroup>
-			</MkSelect>
+			</Select>
 
 			<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 "../page-editor.container.vue";
-import MkSelect from "@/components/form/select.vue";
+import XContainer from "../Container.vue";
+import Select from "@/components/form/Select.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 
-const XBlocks = defineAsyncComponent(() => import("../page-editor.blocks.vue"));
+const XBlocks = defineAsyncComponent(() => import("../Blocks.vue"));
 
 const props = withDefaults(
 	defineProps<{
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.image.vue b/packages/client/src/pages/page-editor/elements/Image.vue
similarity index 88%
rename from packages/client/src/pages/page-editor/els/page-editor.el.image.vue
rename to packages/client/src/pages/page-editor/elements/Image.vue
index 0f95c79a0..f9eb9df2b 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.image.vue
+++ b/packages/client/src/pages/page-editor/elements/Image.vue
@@ -11,7 +11,7 @@
 		</template>
 
 		<section class="oyyftmcf">
-			<MkDriveFileThumbnail
+			<DriveFileThumbnail
 				v-if="file"
 				class="preview"
 				:file="file"
@@ -24,8 +24,8 @@
 
 <script lang="ts" setup>
 import { onMounted } from "vue";
-import XContainer from "../page-editor.container.vue";
-import MkDriveFileThumbnail from "@/components/MkDriveFileThumbnail.vue";
+import XContainer from "../Container.vue";
+import DriveFileThumbnail from "@/components/DriveFileThumbnail.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.note.vue b/packages/client/src/pages/page-editor/elements/Note.vue
similarity index 76%
rename from packages/client/src/pages/page-editor/els/page-editor.el.note.vue
rename to packages/client/src/pages/page-editor/elements/Note.vue
index a3c66a80c..9a0a126c5 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.note.vue
+++ b/packages/client/src/pages/page-editor/elements/Note.vue
@@ -6,16 +6,14 @@
 		>
 
 		<section style="padding: 0 16px 0 16px">
-			<MkInput v-model="id">
+			<Input v-model="id">
 				<template #label>{{ i18n.ts._pages.blocks._note.id }}</template>
 				<template #caption>{{
 					i18n.ts._pages.blocks._note.idDescription
 				}}</template>
-			</MkInput>
-			<MkSwitch v-model="value.detailed"
-				><span>{{
-					i18n.ts._pages.blocks._note.detailed
-				}}</span></MkSwitch
+			</Input>
+			<Switch v-model="value.detailed"
+				><span>{{ i18n.ts._pages.blocks._note.detailed }}</span></Switch
 			>
 
 			<XNote
@@ -36,11 +34,11 @@
 
 <script lang="ts" setup>
 import { watch } from "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 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 * as os from "@/os";
 import { i18n } from "@/i18n";
 
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.number-input.vue b/packages/client/src/pages/page-editor/elements/NumberInput.vue
similarity index 75%
rename from packages/client/src/pages/page-editor/els/page-editor.el.number-input.vue
rename to packages/client/src/pages/page-editor/elements/NumberInput.vue
index a14b16d67..16073d98f 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.number-input.vue
+++ b/packages/client/src/pages/page-editor/elements/NumberInput.vue
@@ -6,32 +6,32 @@
 		>
 
 		<section style="padding: 0 16px 0 16px">
-			<MkInput v-model="value.name">
+			<Input 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>
-			</MkInput>
-			<MkInput v-model="value.text">
+			</Input>
+			<Input v-model="value.text">
 				<template #label>{{
 					i18n.ts._pages.blocks._numberInput.text
 				}}</template>
-			</MkInput>
-			<MkInput v-model="value.default" type="number">
+			</Input>
+			<Input v-model="value.default" type="number">
 				<template #label>{{
 					i18n.ts._pages.blocks._numberInput.default
 				}}</template>
-			</MkInput>
+			</Input>
 		</section>
 	</XContainer>
 </template>
 
 <script lang="ts" setup>
 import {} from "vue";
-import XContainer from "../page-editor.container.vue";
-import MkInput from "@/components/form/input.vue";
+import XContainer from "../Container.vue";
+import Input from "@/components/form/Input.vue";
 import { i18n } from "@/i18n";
 
 withDefaults(
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.post.vue b/packages/client/src/pages/page-editor/elements/Post.vue
similarity index 61%
rename from packages/client/src/pages/page-editor/els/page-editor.el.post.vue
rename to packages/client/src/pages/page-editor/elements/Post.vue
index f2d6558be..0cc79b2c2 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.post.vue
+++ b/packages/client/src/pages/page-editor/elements/Post.vue
@@ -6,20 +6,20 @@
 		>
 
 		<section style="padding: 16px">
-			<MkTextarea v-model="value.text"
+			<Textarea v-model="value.text"
 				><template #label>{{
 					i18n.ts._pages.blocks._post.text
-				}}</template></MkTextarea
+				}}</template></Textarea
 			>
-			<MkSwitch v-model="value.attachCanvasImage"
+			<Switch v-model="value.attachCanvasImage"
 				><span>{{
 					i18n.ts._pages.blocks._post.attachCanvasImage
-				}}</span></MkSwitch
+				}}</span></Switch
 			>
-			<MkInput v-if="value.attachCanvasImage" v-model="value.canvasId"
+			<Input v-if="value.attachCanvasImage" v-model="value.canvasId"
 				><template #label>{{
 					i18n.ts._pages.blocks._post.canvasId
-				}}</template></MkInput
+				}}</template></Input
 			>
 		</section>
 	</XContainer>
@@ -27,10 +27,10 @@
 
 <script lang="ts" setup>
 import {} from "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 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 { i18n } from "@/i18n";
 
 withDefaults(
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.radio-button.vue b/packages/client/src/pages/page-editor/elements/RadioButton.vue
similarity index 72%
rename from packages/client/src/pages/page-editor/els/page-editor.el.radio-button.vue
rename to packages/client/src/pages/page-editor/elements/RadioButton.vue
index 63082b5ab..400dbfb5d 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.radio-button.vue
+++ b/packages/client/src/pages/page-editor/elements/RadioButton.vue
@@ -6,27 +6,27 @@
 		>
 
 		<section style="padding: 0 16px 16px 16px">
-			<MkInput v-model="value.name"
+			<Input 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></MkInput
+				}}</template></Input
 			>
-			<MkInput v-model="value.title"
+			<Input v-model="value.title"
 				><template #label>{{
 					i18n.ts._pages.blocks._radioButton.title
-				}}</template></MkInput
+				}}</template></Input
 			>
-			<MkTextarea v-model="values"
+			<Textarea v-model="values"
 				><template #label>{{
 					i18n.ts._pages.blocks._radioButton.values
-				}}</template></MkTextarea
+				}}</template></Textarea
 			>
-			<MkInput v-model="value.default"
+			<Input v-model="value.default"
 				><template #label>{{
 					i18n.ts._pages.blocks._radioButton.default
-				}}</template></MkInput
+				}}</template></Input
 			>
 		</section>
 	</XContainer>
@@ -34,9 +34,9 @@
 
 <script lang="ts" setup>
 import { watch } from "vue";
-import XContainer from "../page-editor.container.vue";
-import MkTextarea from "@/components/form/textarea.vue";
-import MkInput from "@/components/form/input.vue";
+import XContainer from "../Container.vue";
+import Textarea from "@/components/form/Textarea.vue";
+import Input from "@/components/form/Input.vue";
 import { i18n } from "@/i18n";
 
 const props = withDefaults(
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.section.vue b/packages/client/src/pages/page-editor/elements/Section.vue
similarity index 91%
rename from packages/client/src/pages/page-editor/els/page-editor.el.section.vue
rename to packages/client/src/pages/page-editor/elements/Section.vue
index d4b28e13c..a9a37a88a 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.section.vue
+++ b/packages/client/src/pages/page-editor/elements/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 "../page-editor.container.vue";
+import XContainer from "../Container.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 
-const XBlocks = defineAsyncComponent(() => import("../page-editor.blocks.vue"));
+const XBlocks = defineAsyncComponent(() => import("../Blocks.vue"));
 
 const props = withDefaults(
 	defineProps<{
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.switch.vue b/packages/client/src/pages/page-editor/elements/Switch.vue
similarity index 70%
rename from packages/client/src/pages/page-editor/els/page-editor.el.switch.vue
rename to packages/client/src/pages/page-editor/elements/Switch.vue
index ef4b9961e..dd2e72ceb 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.switch.vue
+++ b/packages/client/src/pages/page-editor/elements/Switch.vue
@@ -6,22 +6,22 @@
 		>
 
 		<section class="kjuadyyj">
-			<MkInput v-model="value.name"
+			<Input 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></MkInput
+				}}</template></Input
 			>
-			<MkInput v-model="value.text"
+			<Input v-model="value.text"
 				><template #label>{{
 					i18n.ts._pages.blocks._switch.text
-				}}</template></MkInput
+				}}</template></Input
 			>
-			<MkSwitch v-model="value.default"
+			<Switch v-model="value.default"
 				><span>{{
 					i18n.ts._pages.blocks._switch.default
-				}}</span></MkSwitch
+				}}</span></Switch
 			>
 		</section>
 	</XContainer>
@@ -29,9 +29,9 @@
 
 <script lang="ts" setup>
 import {} from "vue";
-import XContainer from "../page-editor.container.vue";
-import MkSwitch from "@/components/form/switch.vue";
-import MkInput from "@/components/form/input.vue";
+import XContainer from "../Container.vue";
+import Switch from "@/components/form/Switch.vue";
+import Input from "@/components/form/Input.vue";
 import { i18n } from "@/i18n";
 
 withDefaults(
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.text.vue b/packages/client/src/pages/page-editor/elements/Text.vue
similarity index 93%
rename from packages/client/src/pages/page-editor/els/page-editor.el.text.vue
rename to packages/client/src/pages/page-editor/elements/Text.vue
index 1aac0859e..14d457add 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.text.vue
+++ b/packages/client/src/pages/page-editor/elements/Text.vue
@@ -13,7 +13,7 @@
 
 <script lang="ts" setup>
 import {} from "vue";
-import XContainer from "../page-editor.container.vue";
+import XContainer from "../Container.vue";
 import { i18n } from "@/i18n";
 
 withDefaults(
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.text-input.vue b/packages/client/src/pages/page-editor/elements/TextInput.vue
similarity index 71%
rename from packages/client/src/pages/page-editor/els/page-editor.el.text-input.vue
rename to packages/client/src/pages/page-editor/elements/TextInput.vue
index d53e0621a..947f0d1cd 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.text-input.vue
+++ b/packages/client/src/pages/page-editor/elements/TextInput.vue
@@ -6,22 +6,22 @@
 		>
 
 		<section style="padding: 0 16px 0 16px">
-			<MkInput v-model="value.name"
+			<Input 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></MkInput
+				}}</template></Input
 			>
-			<MkInput v-model="value.text"
+			<Input v-model="value.text"
 				><template #label>{{
 					i18n.ts._pages.blocks._textInput.text
-				}}</template></MkInput
+				}}</template></Input
 			>
-			<MkInput v-model="value.default" type="text"
+			<Input v-model="value.default" type="text"
 				><template #label>{{
 					i18n.ts._pages.blocks._textInput.default
-				}}</template></MkInput
+				}}</template></Input
 			>
 		</section>
 	</XContainer>
@@ -29,8 +29,8 @@
 
 <script lang="ts" setup>
 import {} from "vue";
-import XContainer from "../page-editor.container.vue";
-import MkInput from "@/components/form/input.vue";
+import XContainer from "../Container.vue";
+import Input from "@/components/form/Input.vue";
 import { i18n } from "@/i18n";
 
 withDefaults(
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.textarea.vue b/packages/client/src/pages/page-editor/elements/Textarea.vue
similarity index 93%
rename from packages/client/src/pages/page-editor/els/page-editor.el.textarea.vue
rename to packages/client/src/pages/page-editor/elements/Textarea.vue
index 563e085a7..d0f1fa882 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.textarea.vue
+++ b/packages/client/src/pages/page-editor/elements/Textarea.vue
@@ -13,7 +13,7 @@
 
 <script lang="ts" setup>
 import {} from "vue";
-import XContainer from "../page-editor.container.vue";
+import XContainer from "../Container.vue";
 import { i18n } from "@/i18n";
 
 withDefaults(
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.textarea-input.vue b/packages/client/src/pages/page-editor/elements/TextareaInput.vue
similarity index 69%
rename from packages/client/src/pages/page-editor/els/page-editor.el.textarea-input.vue
rename to packages/client/src/pages/page-editor/elements/TextareaInput.vue
index bed60a3bb..1b7fd16bf 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.textarea-input.vue
+++ b/packages/client/src/pages/page-editor/elements/TextareaInput.vue
@@ -6,22 +6,22 @@
 		>
 
 		<section style="padding: 0 16px 16px 16px">
-			<MkInput v-model="value.name"
+			<Input 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></MkInput
+				}}</template></Input
 			>
-			<MkInput v-model="value.text"
+			<Input v-model="value.text"
 				><template #label>{{
 					i18n.ts._pages.blocks._textareaInput.text
-				}}</template></MkInput
+				}}</template></Input
 			>
-			<MkTextarea v-model="value.default"
+			<Textarea v-model="value.default"
 				><template #label>{{
 					i18n.ts._pages.blocks._textareaInput.default
-				}}</template></MkTextarea
+				}}</template></Textarea
 			>
 		</section>
 	</XContainer>
@@ -29,9 +29,9 @@
 
 <script lang="ts" setup>
 import {} from "vue";
-import XContainer from "../page-editor.container.vue";
-import MkTextarea from "@/components/form/textarea.vue";
-import MkInput from "@/components/form/input.vue";
+import XContainer from "../Container.vue";
+import Textarea from "@/components/form/Textarea.vue";
+import Input from "@/components/form/Input.vue";
 import { i18n } from "@/i18n";
 
 withDefaults(
diff --git a/packages/client/src/pages/settings/2fa.vue b/packages/client/src/pages/settings/2fa.vue
index 4a1598e16..14e1c851e 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">
-			<MkFolder>
+			<Folder>
 				<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">
-						<MkButton @click="renewTOTP"
+						<Button @click="renewTOTP"
 							><i
 								class="ph-shield-check ph-bold ph-lg"
 								style="margin-right: 0.5rem"
 							></i
-							>{{ i18n.ts._2fa.renewTOTP }}</MkButton
+							>{{ i18n.ts._2fa.renewTOTP }}</Button
 						>
-						<MkInfo>{{ i18n.ts._2fa.whyTOTPOnlyRenew }}</MkInfo>
+						<Info>{{ i18n.ts._2fa.whyTOTPOnlyRenew }}</Info>
 					</template>
-					<MkButton v-else @click="unregisterTOTP"
+					<Button v-else @click="unregisterTOTP"
 						><i
 							class="ph-shield-slash ph-bold ph-lg"
 							style="margin-right: 0.5rem"
 						></i
-						>{{ i18n.ts.unregister }}</MkButton
+						>{{ i18n.ts.unregister }}</Button
 					>
 				</div>
 
-				<MkButton
+				<Button
 					v-else-if="!twoFactorData && !$i.twoFactorEnabled"
 					@click="registerTOTP"
-					>{{ i18n.ts._2fa.registerTOTP }}</MkButton
+					>{{ i18n.ts._2fa.registerTOTP }}</Button
 				>
-			</MkFolder>
+			</Folder>
 
-			<MkFolder>
+			<Folder>
 				<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">
-					<MkInfo>
+					<Info>
 						{{ i18n.ts._2fa.securityKeyInfo }}<br />
 						<br />
 						{{ i18n.ts._2fa.chromePasskeyNotSupported }}
-					</MkInfo>
+					</Info>
 
-					<MkInfo v-if="!supportsCredentials" warn>
+					<Info v-if="!supportsCredentials" warn>
 						{{ i18n.ts._2fa.securityKeyNotSupported }}
-					</MkInfo>
+					</Info>
 
-					<MkInfo
+					<Info
 						v-else-if="supportsCredentials && !$i.twoFactorEnabled"
 						warn
 					>
 						{{ i18n.ts._2fa.registerTOTPBeforeKey }}
-					</MkInfo>
+					</Info>
 
 					<template v-else>
-						<MkButton primary @click="addSecurityKey"
+						<Button primary @click="addSecurityKey"
 							><i
 								class="ph-key ph-bold ph-lg"
 								style="margin-right: 0.5rem"
 							></i
-							>{{ i18n.ts._2fa.registerSecurityKey }}</MkButton
+							>{{ i18n.ts._2fa.registerSecurityKey }}</Button
 						>
-						<MkFolder
+						<Folder
 							v-for="key in $i.securityKeysList"
 							:key="key.id"
 						>
@@ -83,23 +83,23 @@
 								{{ `${i18n.ts.lastUsedDate}: ${key.lastUsed}` }}
 							</p>
 							<div class="_flexList">
-								<MkButton @click="renameKey(key)"
+								<Button @click="renameKey(key)"
 									><i
 										class="ph-pencil-line ph-bold ph-lg"
 									></i>
-									{{ i18n.ts.rename }}</MkButton
+									{{ i18n.ts.rename }}</Button
 								>
-								<MkButton danger @click="unregisterKey(key)"
+								<Button danger @click="unregisterKey(key)"
 									><i class="ph-trash ph-bold ph-lg"></i>
-									{{ i18n.ts.unregister }}</MkButton
+									{{ i18n.ts.unregister }}</Button
 								>
 							</div>
-						</MkFolder>
+						</Folder>
 					</template>
 				</div>
-			</MkFolder>
+			</Folder>
 
-			<MkSwitch
+			<Switch
 				:disabled="
 					!$i.twoFactorEnabled || $i.securityKeysList.length === 0
 				"
@@ -110,7 +110,7 @@
 				<template #caption>{{
 					i18n.ts.passwordLessLoginDescription
 				}}</template>
-			</MkSwitch>
+			</Switch>
 		</div>
 	</FormSection>
 </template>
@@ -119,11 +119,11 @@
 import { ref, defineAsyncComponent } from "vue";
 import { hostname } from "@/config";
 import { byteify, hexify, stringify } from "@/scripts/2fa";
-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 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 * 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("./2fa.qrdialog.vue")),
+			defineAsyncComponent(() => import("./2faQrDialog.vue")),
 			{
 				twoFactorData,
 			},
diff --git a/packages/client/src/pages/settings/2fa.qrdialog.vue b/packages/client/src/pages/settings/2faQrDialog.vue
similarity index 82%
rename from packages/client/src/pages/settings/2fa.qrdialog.vue
rename to packages/client/src/pages/settings/2faQrDialog.vue
index 5f14d069e..f14c63fbb 100644
--- a/packages/client/src/pages/settings/2fa.qrdialog.vue
+++ b/packages/client/src/pages/settings/2faQrDialog.vue
@@ -1,5 +1,5 @@
 <template>
-	<MkModal
+	<Modal
 		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">
-				<MkKeyValue :copy="twoFactorData.url">
+				<KeyValue :copy="twoFactorData.url">
 					<template #key>{{ i18n.ts._2fa.step2Url }}</template>
 					<template #value>{{ twoFactorData.url }}</template>
-				</MkKeyValue>
+				</KeyValue>
 			</div>
 			<div class="_flexList">
-				<MkButton primary @click="ok">{{ i18n.ts.next }}</MkButton>
-				<MkButton @click="cancel">{{ i18n.ts.cancel }}</MkButton>
+				<Button primary @click="ok">{{ i18n.ts.next }}</Button>
+				<Button @click="cancel">{{ i18n.ts.cancel }}</Button>
 			</div>
 		</div>
-	</MkModal>
+	</Modal>
 </template>
 
 <script lang="ts" setup>
-import MkButton from "@/components/MkButton.vue";
-import MkModal from "@/components/MkModal.vue";
-import MkKeyValue from "@/components/MkKeyValue.vue";
+import Button from "@/components/Button.vue";
+import Modal from "@/components/Modal.vue";
+import KeyValue from "@/components/KeyValue.vue";
 import { i18n } from "@/i18n";
 
 defineProps<{
diff --git a/packages/client/src/pages/settings/account-info.vue b/packages/client/src/pages/settings/AccountInfo.vue
similarity index 71%
rename from packages/client/src/pages/settings/account-info.vue
rename to packages/client/src/pages/settings/AccountInfo.vue
index faaee07db..cb57d9d51 100644
--- a/packages/client/src/pages/settings/account-info.vue
+++ b/packages/client/src/pages/settings/AccountInfo.vue
@@ -1,74 +1,74 @@
 <template>
 	<div class="_formRoot">
-		<MkKeyValue>
+		<KeyValue>
 			<template #key>ID</template>
 			<template #value
 				><span class="_monospace">{{ $i.id }}</span></template
 			>
-		</MkKeyValue>
+		</KeyValue>
 
 		<FormSection>
-			<MkKeyValue>
+			<KeyValue>
 				<template #key>{{ i18n.ts.registeredDate }}</template>
 				<template #value
-					><MkTime :time="$i.createdAt" mode="detail"
+					><Time :time="$i.createdAt" mode="detail"
 				/></template>
-			</MkKeyValue>
+			</KeyValue>
 		</FormSection>
 
 		<FormSection v-if="stats">
 			<template #label>{{ i18n.ts.statistics }}</template>
-			<MkKeyValue oneline style="margin: 1em 0">
+			<KeyValue oneline style="margin: 1em 0">
 				<template #key>{{ i18n.ts.notesCount }}</template>
 				<template #value>{{ number(stats.notesCount) }}</template>
-			</MkKeyValue>
-			<MkKeyValue oneline style="margin: 1em 0">
+			</KeyValue>
+			<KeyValue oneline style="margin: 1em 0">
 				<template #key>{{ i18n.ts.repliesCount }}</template>
 				<template #value>{{ number(stats.repliesCount) }}</template>
-			</MkKeyValue>
-			<MkKeyValue oneline style="margin: 1em 0">
+			</KeyValue>
+			<KeyValue oneline style="margin: 1em 0">
 				<template #key>{{ i18n.ts.renotesCount }}</template>
 				<template #value>{{ number(stats.renotesCount) }}</template>
-			</MkKeyValue>
-			<MkKeyValue oneline style="margin: 1em 0">
+			</KeyValue>
+			<KeyValue oneline style="margin: 1em 0">
 				<template #key>{{ i18n.ts.repliedCount }}</template>
 				<template #value>{{ number(stats.repliedCount) }}</template>
-			</MkKeyValue>
-			<MkKeyValue oneline style="margin: 1em 0">
+			</KeyValue>
+			<KeyValue oneline style="margin: 1em 0">
 				<template #key>{{ i18n.ts.renotedCount }}</template>
 				<template #value>{{ number(stats.renotedCount) }}</template>
-			</MkKeyValue>
-			<MkKeyValue oneline style="margin: 1em 0">
+			</KeyValue>
+			<KeyValue oneline style="margin: 1em 0">
 				<template #key>{{ i18n.ts.pollVotesCount }}</template>
 				<template #value>{{ number(stats.pollVotesCount) }}</template>
-			</MkKeyValue>
-			<MkKeyValue oneline style="margin: 1em 0">
+			</KeyValue>
+			<KeyValue oneline style="margin: 1em 0">
 				<template #key>{{ i18n.ts.pollVotedCount }}</template>
 				<template #value>{{ number(stats.pollVotedCount) }}</template>
-			</MkKeyValue>
-			<MkKeyValue oneline style="margin: 1em 0">
+			</KeyValue>
+			<KeyValue oneline style="margin: 1em 0">
 				<template #key>{{ i18n.ts.sentReactionsCount }}</template>
 				<template #value>{{
 					number(stats.sentReactionsCount)
 				}}</template>
-			</MkKeyValue>
-			<MkKeyValue oneline style="margin: 1em 0">
+			</KeyValue>
+			<KeyValue oneline style="margin: 1em 0">
 				<template #key>{{ i18n.ts.receivedReactionsCount }}</template>
 				<template #value>{{
 					number(stats.receivedReactionsCount)
 				}}</template>
-			</MkKeyValue>
-			<MkKeyValue oneline style="margin: 1em 0">
+			</KeyValue>
+			<KeyValue oneline style="margin: 1em 0">
 				<template #key>{{ i18n.ts.noteFavoritesCount }}</template>
 				<template #value>{{
 					number(stats.noteFavoritesCount)
 				}}</template>
-			</MkKeyValue>
-			<MkKeyValue oneline style="margin: 1em 0">
+			</KeyValue>
+			<KeyValue oneline style="margin: 1em 0">
 				<template #key>{{ i18n.ts.followingCount }}</template>
 				<template #value>{{ number(stats.followingCount) }}</template>
-			</MkKeyValue>
-			<MkKeyValue oneline style="margin: 1em 0">
+			</KeyValue>
+			<KeyValue oneline style="margin: 1em 0">
 				<template #key
 					>{{ i18n.ts.followingCount }} ({{
 						i18n.ts.local
@@ -77,8 +77,8 @@
 				<template #value>{{
 					number(stats.localFollowingCount)
 				}}</template>
-			</MkKeyValue>
-			<MkKeyValue oneline style="margin: 1em 0">
+			</KeyValue>
+			<KeyValue oneline style="margin: 1em 0">
 				<template #key
 					>{{ i18n.ts.followingCount }} ({{
 						i18n.ts.remote
@@ -87,12 +87,12 @@
 				<template #value>{{
 					number(stats.remoteFollowingCount)
 				}}</template>
-			</MkKeyValue>
-			<MkKeyValue oneline style="margin: 1em 0">
+			</KeyValue>
+			<KeyValue oneline style="margin: 1em 0">
 				<template #key>{{ i18n.ts.followersCount }}</template>
 				<template #value>{{ number(stats.followersCount) }}</template>
-			</MkKeyValue>
-			<MkKeyValue oneline style="margin: 1em 0">
+			</KeyValue>
+			<KeyValue oneline style="margin: 1em 0">
 				<template #key
 					>{{ i18n.ts.followersCount }} ({{
 						i18n.ts.local
@@ -101,8 +101,8 @@
 				<template #value>{{
 					number(stats.localFollowersCount)
 				}}</template>
-			</MkKeyValue>
-			<MkKeyValue oneline style="margin: 1em 0">
+			</KeyValue>
+			<KeyValue oneline style="margin: 1em 0">
 				<template #key
 					>{{ i18n.ts.followersCount }} ({{
 						i18n.ts.remote
@@ -111,71 +111,71 @@
 				<template #value>{{
 					number(stats.remoteFollowersCount)
 				}}</template>
-			</MkKeyValue>
-			<MkKeyValue oneline style="margin: 1em 0">
+			</KeyValue>
+			<KeyValue oneline style="margin: 1em 0">
 				<template #key>{{ i18n.ts.pageLikesCount }}</template>
 				<template #value>{{ number(stats.pageLikesCount) }}</template>
-			</MkKeyValue>
-			<MkKeyValue oneline style="margin: 1em 0">
+			</KeyValue>
+			<KeyValue oneline style="margin: 1em 0">
 				<template #key>{{ i18n.ts.pageLikedCount }}</template>
 				<template #value>{{ number(stats.pageLikedCount) }}</template>
-			</MkKeyValue>
-			<MkKeyValue oneline style="margin: 1em 0">
+			</KeyValue>
+			<KeyValue oneline style="margin: 1em 0">
 				<template #key>{{ i18n.ts.driveFilesCount }}</template>
 				<template #value>{{ number(stats.driveFilesCount) }}</template>
-			</MkKeyValue>
-			<MkKeyValue oneline style="margin: 1em 0">
+			</KeyValue>
+			<KeyValue oneline style="margin: 1em 0">
 				<template #key>{{ i18n.ts.driveUsage }}</template>
 				<template #value>{{ bytes(stats.driveUsage) }}</template>
-			</MkKeyValue>
+			</KeyValue>
 		</FormSection>
 
 		<FormSection>
 			<template #label>{{ i18n.ts.other }}</template>
-			<MkKeyValue oneline style="margin: 1em 0">
+			<KeyValue oneline style="margin: 1em 0">
 				<template #key>emailVerified</template>
 				<template #value>{{
 					$i.emailVerified ? i18n.ts.yes : i18n.ts.no
 				}}</template>
-			</MkKeyValue>
-			<MkKeyValue oneline style="margin: 1em 0">
+			</KeyValue>
+			<KeyValue oneline style="margin: 1em 0">
 				<template #key>twoFactorEnabled</template>
 				<template #value>{{
 					$i.twoFactorEnabled ? i18n.ts.yes : i18n.ts.no
 				}}</template>
-			</MkKeyValue>
-			<MkKeyValue oneline style="margin: 1em 0">
+			</KeyValue>
+			<KeyValue oneline style="margin: 1em 0">
 				<template #key>securityKeys</template>
 				<template #value>{{
 					$i.securityKeys ? i18n.ts.yes : i18n.ts.no
 				}}</template>
-			</MkKeyValue>
-			<MkKeyValue oneline style="margin: 1em 0">
+			</KeyValue>
+			<KeyValue oneline style="margin: 1em 0">
 				<template #key>usePasswordLessLogin</template>
 				<template #value>{{
 					$i.usePasswordLessLogin ? i18n.ts.yes : i18n.ts.no
 				}}</template>
-			</MkKeyValue>
-			<MkKeyValue oneline style="margin: 1em 0">
+			</KeyValue>
+			<KeyValue oneline style="margin: 1em 0">
 				<template #key>isModerator</template>
 				<template #value>{{
 					$i.isModerator ? i18n.ts.yes : i18n.ts.no
 				}}</template>
-			</MkKeyValue>
-			<MkKeyValue oneline style="margin: 1em 0">
+			</KeyValue>
+			<KeyValue oneline style="margin: 1em 0">
 				<template #key>isAdmin</template>
 				<template #value>{{
 					$i.isAdmin ? i18n.ts.yes : i18n.ts.no
 				}}</template>
-			</MkKeyValue>
+			</KeyValue>
 		</FormSection>
 	</div>
 </template>
 
 <script lang="ts" setup>
 import { onMounted, ref } from "vue";
-import FormSection from "@/components/form/section.vue";
-import MkKeyValue from "@/components/MkKeyValue.vue";
+import FormSection from "@/components/form/Section.vue";
+import KeyValue from "@/components/KeyValue.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 52a9fb15a..fb449d745 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">
-					<MkAvatar :user="account" class="avatar" disableLink />
+					<Avatar :user="account" class="avatar" disableLink />
 				</div>
 				<div class="body">
 					<div class="name">
-						<MkUserName :user="account" />
+						<UserName :user="account" />
 					</div>
 					<div class="acct">
-						<MkAcct :user="account" />
+						<Acct :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/MkButton.vue";
+import FormSuspense from "@/components/form/Suspense.vue";
+import FormButton from "@/components/Button.vue";
 import * as os from "@/os";
 import {
 	getAccounts,
@@ -108,7 +108,7 @@ function removeAccount(account) {
 
 function addExistingAccount() {
 	os.popup(
-		defineAsyncComponent(() => import("@/components/MkSigninDialog.vue")),
+		defineAsyncComponent(() => import("@/components/SigninDialog.vue")),
 		{},
 		{
 			done: (res) => {
@@ -122,7 +122,7 @@ function addExistingAccount() {
 
 function createAccount() {
 	os.popup(
-		defineAsyncComponent(() => import("@/components/MkSignupDialog.vue")),
+		defineAsyncComponent(() => import("@/components/SignupDialog.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 910ebaa57..3f9197925 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/MkButton.vue";
+import FormLink from "@/components/form/Link.vue";
+import FormButton from "@/components/Button.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/MkTokenGenerateWindow.vue"),
+			() => import("@/components/TokenGenerateWindow.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 7ff99b922..0ae6fb4a9 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><MkTime :time="token.createdAt" /></div>
+							<div><Time :time="token.createdAt" /></div>
 						</div>
 						<div class="_keyValue">
 							<div>{{ i18n.ts.lastUsedDate }}:</div>
-							<div><MkTime :time="token.lastUsedAt" /></div>
+							<div><Time :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/MkPagination.vue";
+import FormPagination from "@/components/Pagination.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/custom-css.vue b/packages/client/src/pages/settings/CustomCss.vue
similarity index 91%
rename from packages/client/src/pages/settings/custom-css.vue
rename to packages/client/src/pages/settings/CustomCss.vue
index e24ff33a9..a261e6c3f 100644
--- a/packages/client/src/pages/settings/custom-css.vue
+++ b/packages/client/src/pages/settings/CustomCss.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/MkInfo.vue";
+import FormTextarea from "@/components/form/Textarea.vue";
+import FormInfo from "@/components/Info.vue";
 import * as os from "@/os";
 import { unisonReload } from "@/scripts/unison-reload";
 import { i18n } from "@/i18n";
diff --git a/packages/client/src/pages/settings/custom-katex-macro.vue b/packages/client/src/pages/settings/CustomKatexMacro.vue
similarity index 90%
rename from packages/client/src/pages/settings/custom-katex-macro.vue
rename to packages/client/src/pages/settings/CustomKatexMacro.vue
index 67818f9e0..0ea40dd1b 100644
--- a/packages/client/src/pages/settings/custom-katex-macro.vue
+++ b/packages/client/src/pages/settings/CustomKatexMacro.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/MkInfo.vue";
-import FormSwitch from "@/components/form/switch.vue";
+import FormTextarea from "@/components/form/Textarea.vue";
+import FormInfo from "@/components/Info.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 fc18a65d6..b8194b3b0 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/delete-account.vue b/packages/client/src/pages/settings/DeleteAccount.vue
similarity index 93%
rename from packages/client/src/pages/settings/delete-account.vue
rename to packages/client/src/pages/settings/DeleteAccount.vue
index 574806c08..de6346554 100644
--- a/packages/client/src/pages/settings/delete-account.vue
+++ b/packages/client/src/pages/settings/DeleteAccount.vue
@@ -20,8 +20,8 @@
 </template>
 
 <script lang="ts" setup>
-import FormInfo from "@/components/MkInfo.vue";
-import FormButton from "@/components/MkButton.vue";
+import FormInfo from "@/components/Info.vue";
+import FormButton from "@/components/Button.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 b79029edf..9b5de171f 100644
--- a/packages/client/src/pages/settings/drive.vue
+++ b/packages/client/src/pages/settings/Drive.vue
@@ -3,23 +3,25 @@
 		<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>
-				<MkKeyValue class="_formBlock">
+				<KeyValue class="_formBlock">
 					<template #key>{{ i18n.ts.capacity }}</template>
 					<template #value>{{ bytes(capacity, 1) }}</template>
-				</MkKeyValue>
-				<MkKeyValue class="_formBlock">
+				</KeyValue>
+				<KeyValue class="_formBlock">
 					<template #key>{{ i18n.ts.inUse }}</template>
 					<template #value>{{ bytes(usage, 1) }}</template>
-				</MkKeyValue>
+				</KeyValue>
 			</FormSplit>
 		</FormSection>
 
 		<FormSection>
 			<template #label>{{ i18n.ts.statistics }}</template>
-			<MkChart
+			<Chart
 				src="per-user-drive"
 				:args="{ user: $i }"
 				span="day"
@@ -61,16 +63,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/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 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 * as os from "@/os";
 import bytes from "@/filters/bytes";
 import { defaultStore } from "@/store";
-import MkChart from "@/components/MkChart.vue";
+import Chart from "@/components/Chart.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 089a9d0a9..3c7abba34 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 895c2dbbd..3d500064f 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>
-						<MkLink
+						<Link
 							url="https://translate.iceshrimp.dev/engage/iceshrimp/"
-							>Weblate</MkLink
+							>Weblate</Link
 						>
 					</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 MkLink from "@/components/MkLink.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 Link from "@/components/Link.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,9 +367,7 @@ 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);
@@ -415,7 +413,7 @@ watch(
 		autoplayMfm,
 		expandOnNoteClick,
 		cwStyle,
-		alwaysExpandCws
+		alwaysExpandCws,
 	],
 	async () => {
 		await reloadAsk();
diff --git a/packages/client/src/pages/settings/import-export.vue b/packages/client/src/pages/settings/ImportExport.vue
similarity index 90%
rename from packages/client/src/pages/settings/import-export.vue
rename to packages/client/src/pages/settings/ImportExport.vue
index 3204bf752..3e451e960 100644
--- a/packages/client/src/pages/settings/import-export.vue
+++ b/packages/client/src/pages/settings/ImportExport.vue
@@ -7,13 +7,13 @@
 				<template #icon
 					><i class="ph-download-simple ph-bold ph-lg"></i
 				></template>
-				<MkButton
+				<Button
 					primary
 					:class="$style.button"
 					inline
 					@click="exportNotes()"
 					><i class="ph-download-simple ph-bold ph-lg"></i>
-					{{ i18n.ts.export }}</MkButton
+					{{ i18n.ts.export }}</Button
 				>
 			</FormFolder>
 			<FormFolder class="_formBlock">
@@ -28,13 +28,13 @@
 						Twitter (soon)
 					</option>
 				</FormRadios>
-				<MkButton
+				<Button
 					primary
 					:class="$style.button"
 					inline
 					@click="importPosts($event)"
 					><i class="ph-upload-simple ph-bold ph-lg"></i>
-					{{ i18n.ts.import }}</MkButton
+					{{ i18n.ts.import }}</Button
 				>
 			</FormFolder>
 		</FormSection>
@@ -53,13 +53,13 @@
 				<FormSwitch v-model="excludeInactiveUsers" class="_formBlock">
 					{{ i18n.ts._exportOrImport.excludeInactiveUsers }}
 				</FormSwitch>
-				<MkButton
+				<Button
 					primary
 					:class="$style.button"
 					inline
 					@click="exportFollowing()"
 					><i class="ph-download-simple ph-bold ph-lg"></i>
-					{{ i18n.ts.export }}</MkButton
+					{{ i18n.ts.export }}</Button
 				>
 			</FormFolder>
 			<FormFolder class="_formBlock">
@@ -67,13 +67,13 @@
 				<template #icon
 					><i class="ph-upload-simple ph-bold ph-lg"></i
 				></template>
-				<MkButton
+				<Button
 					primary
 					:class="$style.button"
 					inline
 					@click="importFollowing($event)"
 					><i class="ph-upload-simple ph-bold ph-lg"></i>
-					{{ i18n.ts.import }}</MkButton
+					{{ i18n.ts.import }}</Button
 				>
 			</FormFolder>
 		</FormSection>
@@ -84,13 +84,13 @@
 				<template #icon
 					><i class="ph-download-simple ph-bold ph-lg"></i
 				></template>
-				<MkButton
+				<Button
 					primary
 					:class="$style.button"
 					inline
 					@click="exportUserLists()"
 					><i class="ph-download-simple ph-bold ph-lg"></i>
-					{{ i18n.ts.export }}</MkButton
+					{{ i18n.ts.export }}</Button
 				>
 			</FormFolder>
 			<FormFolder class="_formBlock">
@@ -98,13 +98,13 @@
 				<template #icon
 					><i class="ph-upload-simple ph-bold ph-lg"></i
 				></template>
-				<MkButton
+				<Button
 					primary
 					:class="$style.button"
 					inline
 					@click="importUserLists($event)"
 					><i class="ph-upload-simple ph-bold ph-lg"></i>
-					{{ i18n.ts.import }}</MkButton
+					{{ i18n.ts.import }}</Button
 				>
 			</FormFolder>
 		</FormSection>
@@ -115,13 +115,13 @@
 				<template #icon
 					><i class="ph-download-simple ph-bold ph-lg"></i
 				></template>
-				<MkButton
+				<Button
 					primary
 					:class="$style.button"
 					inline
 					@click="exportMuting()"
 					><i class="ph-download-simple ph-bold ph-lg"></i>
-					{{ i18n.ts.export }}</MkButton
+					{{ i18n.ts.export }}</Button
 				>
 			</FormFolder>
 			<FormFolder class="_formBlock">
@@ -129,13 +129,13 @@
 				<template #icon
 					><i class="ph-upload-simple ph-bold ph-lg"></i
 				></template>
-				<MkButton
+				<Button
 					primary
 					:class="$style.button"
 					inline
 					@click="importMuting($event)"
 					><i class="ph-upload-simple ph-bold ph-lg"></i>
-					{{ i18n.ts.import }}</MkButton
+					{{ i18n.ts.import }}</Button
 				>
 			</FormFolder>
 		</FormSection>
@@ -148,13 +148,13 @@
 				<template #icon
 					><i class="ph-download-simple ph-bold ph-lg"></i
 				></template>
-				<MkButton
+				<Button
 					primary
 					:class="$style.button"
 					inline
 					@click="exportBlocking()"
 					><i class="ph-download-simple ph-bold ph-lg"></i>
-					{{ i18n.ts.export }}</MkButton
+					{{ i18n.ts.export }}</Button
 				>
 			</FormFolder>
 			<FormFolder class="_formBlock">
@@ -162,13 +162,13 @@
 				<template #icon
 					><i class="ph-upload-simple ph-bold ph-lg"></i
 				></template>
-				<MkButton
+				<Button
 					primary
 					:class="$style.button"
 					inline
 					@click="importBlocking($event)"
 					><i class="ph-upload-simple ph-bold ph-lg"></i>
-					{{ i18n.ts.import }}</MkButton
+					{{ i18n.ts.import }}</Button
 				>
 			</FormFolder>
 		</FormSection>
@@ -177,11 +177,11 @@
 
 <script lang="ts" setup>
 import { ref } from "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 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 * 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 def40a277..70435cb1a 100644
--- a/packages/client/src/pages/settings/index.vue
+++ b/packages/client/src/pages/settings/Index.vue
@@ -1,12 +1,13 @@
 <template>
-	<MkStickyContainer>
-		<template #header
-			><MkPageHeader
+	<StickyContainer>
+		<template #header>
+			<PageHeader
 				:actions="headerActions"
 				:tabs="headerTabs"
 				:display-back-button="true"
-		/></template>
-		<MkSpacer :content-max="900" :margin-min="20" :margin-max="32">
+			/>
+		</template>
+		<Spacer :content-max="900" :margin-min="20" :margin-max="32">
 			<div ref="el" class="vvcocwet" :class="{ wide: !narrow }">
 				<div class="body">
 					<div
@@ -14,16 +15,16 @@
 						class="nav"
 					>
 						<div class="baaadecd">
-							<MkInfo v-if="emailNotConfigured" warn class="info"
+							<Info v-if="emailNotConfigured" warn class="info"
 								>{{ i18n.ts.emailNotConfiguredWarning }}
-								<MkA to="/settings/email" class="_link">{{
+								<A to="/settings/email" class="_link">{{
 									i18n.ts.configure
-								}}</MkA></MkInfo
-							>
-							<MkSuperMenu
+								}}</A>
+							</Info>
+							<SuperMenu
 								:def="menuDef"
 								:grid="narrow"
-							></MkSuperMenu>
+							></SuperMenu>
 						</div>
 					</div>
 					<section
@@ -36,8 +37,8 @@
 					</section>
 				</div>
 			</div>
-		</MkSpacer>
-	</MkStickyContainer>
+		</Spacer>
+	</StickyContainer>
 </template>
 
 <script setup lang="ts">
@@ -54,8 +55,8 @@ import {
 	watch,
 } from "vue";
 import { i18n } from "@/i18n";
-import MkInfo from "@/components/MkInfo.vue";
-import MkSuperMenu from "@/components/MkSuperMenu.vue";
+import Info from "@/components/Info.vue";
+import SuperMenu from "@/components/SuperMenu.vue";
 import { scroll } from "@/scripts/scroll";
 import { signout, $i } from "@/account";
 import { unisonReload } from "@/scripts/unison-reload";
@@ -336,6 +337,7 @@ definePageMetadata(INFO);
 			padding: var(--margin);
 			border-radius: var(--radius);
 		}
+
 		> .nav {
 			.baaadecd {
 				> .info {
diff --git a/packages/client/src/pages/settings/instance-mute.vue b/packages/client/src/pages/settings/InstanceMute.vue
similarity index 79%
rename from packages/client/src/pages/settings/instance-mute.vue
rename to packages/client/src/pages/settings/InstanceMute.vue
index 4c8ce7a3d..bde72dc2f 100644
--- a/packages/client/src/pages/settings/instance-mute.vue
+++ b/packages/client/src/pages/settings/InstanceMute.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="_formRoot">
-		<MkInfo>{{ i18n.ts._instanceMute.title }}</MkInfo>
+		<Info>{{ i18n.ts._instanceMute.title }}</Info>
 		<FormTextarea v-model="instanceMutes" class="_formBlock">
 			<template #label>{{ i18n.ts._instanceMute.heading }}</template>
 			<template #caption
@@ -9,22 +9,18 @@
 				}}</template
 			>
 		</FormTextarea>
-		<MkButton
-			primary
-			:disabled="!changed"
-			class="_formBlock"
-			@click="save()"
+		<Button primary :disabled="!changed" class="_formBlock" @click="save()"
 			><i class="ph-floppy-disk-back ph-bold ph-lg"></i>
-			{{ i18n.ts.save }}</MkButton
+			{{ i18n.ts.save }}</Button
 		>
 	</div>
 </template>
 
 <script lang="ts" setup>
 import { ref, watch } from "vue";
-import FormTextarea from "@/components/form/textarea.vue";
-import MkInfo from "@/components/MkInfo.vue";
-import MkButton from "@/components/MkButton.vue";
+import FormTextarea from "@/components/form/Textarea.vue";
+import Info from "@/components/Info.vue";
+import Button from "@/components/Button.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 ef4182f39..cff870932 100644
--- a/packages/client/src/pages/settings/integration.vue
+++ b/packages/client/src/pages/settings/Integration.vue
@@ -15,15 +15,15 @@
 					}}</a
 				>
 			</p>
-			<MkButton
+			<Button
 				v-if="integrations.discord"
 				danger
 				@click="disconnectDiscord"
-				>{{ i18n.ts.disconnectService }}</MkButton
+				>{{ i18n.ts.disconnectService }}</Button
 			>
-			<MkButton v-else primary @click="connectDiscord">{{
+			<Button v-else primary @click="connectDiscord">{{
 				i18n.ts.connectService
-			}}</MkButton>
+			}}</Button>
 		</FormSection>
 
 		<FormSection v-if="instance.enableGithubIntegration">
@@ -39,15 +39,15 @@
 					>@{{ integrations.github.login }}</a
 				>
 			</p>
-			<MkButton
+			<Button
 				v-if="integrations.github"
 				danger
 				@click="disconnectGithub"
-				>{{ i18n.ts.disconnectService }}</MkButton
+				>{{ i18n.ts.disconnectService }}</Button
 			>
-			<MkButton v-else primary @click="connectGithub">{{
+			<Button v-else primary @click="connectGithub">{{
 				i18n.ts.connectService
-			}}</MkButton>
+			}}</Button>
 		</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 MkButton from "@/components/MkButton.vue";
+import FormSection from "@/components/form/Section.vue";
+import Button from "@/components/Button.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 d33616f51..91d4ff1a9 100644
--- a/packages/client/src/pages/settings/migration.vue
+++ b/packages/client/src/pages/settings/Migration.vue
@@ -39,9 +39,10 @@
 				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 }}
@@ -51,10 +52,10 @@
 </template>
 
 <script lang="ts" setup>
-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 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 * as os from "@/os";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
diff --git a/packages/client/src/pages/settings/mute-block.vue b/packages/client/src/pages/settings/MuteBlock.vue
similarity index 63%
rename from packages/client/src/pages/settings/mute-block.vue
rename to packages/client/src/pages/settings/MuteBlock.vue
index 81e9ec875..2455e8ef2 100644
--- a/packages/client/src/pages/settings/mute-block.vue
+++ b/packages/client/src/pages/settings/MuteBlock.vue
@@ -1,50 +1,50 @@
 <template>
 	<div class="_formRoot">
-		<MkTab v-model="tab" style="margin-bottom: var(--margin)">
+		<Tab v-model="tab" style="margin-bottom: var(--margin)">
 			<option value="mute">{{ i18n.ts.mutedUsers }}</option>
 			<option value="block">{{ i18n.ts.blockedUsers }}</option>
-		</MkTab>
+		</Tab>
 		<div v-if="tab === 'mute'">
-			<MkPagination :pagination="mutingPagination" class="muting">
-				<template #empty
-					><FormInfo>{{ i18n.ts.noUsers }}</FormInfo></template
-				>
+			<Pagination :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)"
 					>
-						<MkAcct :user="mute.mutee" />
+						<Acct :user="mute.mutee" />
 					</FormLink>
 				</template>
-			</MkPagination>
+			</Pagination>
 		</div>
 		<div v-if="tab === 'block'">
-			<MkPagination :pagination="blockingPagination" class="blocking">
-				<template #empty
-					><FormInfo>{{ i18n.ts.noUsers }}</FormInfo></template
-				>
+			<Pagination :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)"
 					>
-						<MkAcct :user="block.blockee" />
+						<Acct :user="block.blockee" />
 					</FormLink>
 				</template>
-			</MkPagination>
+			</Pagination>
 		</div>
 	</div>
 </template>
 
 <script lang="ts" setup>
 import {} from "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 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 { 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 d192a5e95..4066a9e7e 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>
-			<MkContainer :showHeader="false">
+			<Container :showHeader="false">
 				<Sortable
 					v-model="items"
 					itemKey="id"
@@ -43,20 +43,20 @@
 						</div>
 					</template>
 				</Sortable>
-			</MkContainer>
+			</Container>
 		</FormSlot>
 		<div class="buttons">
-			<MkButton inline @click="addItem"
+			<Button inline @click="addItem"
 				><i class="ph-plus ph-bold ph-lg"></i>
-				{{ i18n.ts.addItem }}</MkButton
+				{{ i18n.ts.addItem }}</Button
 			>
-			<MkButton inline danger @click="reset"
+			<Button inline danger @click="reset"
 				><i class="ph-arrow-clockwise ph-bold ph-lg"></i>
-				{{ i18n.ts.default }}</MkButton
+				{{ i18n.ts.default }}</Button
 			>
-			<MkButton inline primary class="save" @click="save"
+			<Button inline primary class="save" @click="save"
 				><i class="ph-floppy-disk ph-bold ph-lg"></i>
-				{{ i18n.ts.save }}</MkButton
+				{{ i18n.ts.save }}</Button
 			>
 		</div>
 
@@ -69,7 +69,7 @@
 				{{ i18n.ts._menuDisplay.sideIcon }}
 			</option>
 			<!--<option value="top">{{ i18n.ts._menuDisplay.top }}</option>-->
-			<!-- <MkRadio v-model="menuDisplay" value="hide" disabled>{{ i18n.ts._menuDisplay.hide }}</MkRadio>-->
+			<!-- <Radio v-model="menuDisplay" value="hide" disabled>{{ i18n.ts._menuDisplay.hide }}</Radio>-->
 			<!-- 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 MkButton from "@/components/MkButton.vue";
-import FormSlot from "@/components/form/slot.vue";
-import MkContainer from "@/components/MkContainer.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 * 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 ad90126e7..9fa0e42e9 100644
--- a/packages/client/src/pages/settings/notifications.vue
+++ b/packages/client/src/pages/settings/Notifications.vue
@@ -5,11 +5,9 @@
 			>{{ 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>
@@ -21,8 +19,8 @@
 			<template #label>{{ i18n.ts.pushNotification }}</template>
 
 			<div class="_gaps_m">
-				<MkPushNotificationAllowButton ref="allowButton" />
-				<MkSwitch
+				<PushNotificationAllowButton ref="allowButton" />
+				<Switch
 					:disabled="!pushRegistrationInServer"
 					:model-value="sendReadMessage"
 					@update:model-value="onChangeSendReadMessage"
@@ -42,7 +40,7 @@
 							}}</template>
 						</I18n>
 					</template>
-				</MkSwitch>
+				</Switch>
 			</div>
 		</FormSection>
 	</div>
@@ -51,17 +49,17 @@
 <script lang="ts" setup>
 import { defineAsyncComponent } from "vue";
 import { notificationTypes } from "iceshrimp-js";
-import FormButton from "@/components/MkButton.vue";
-import FormLink from "@/components/form/link.vue";
-import FormSection from "@/components/form/section.vue";
+import FormButton from "@/components/Button.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 MkPushNotificationAllowButton from "@/components/MkPushNotificationAllowButton.vue";
+import PushNotificationAllowButton from "@/components/PushNotificationAllowButton.vue";
 
 let allowButton =
-	$shallowRef<InstanceType<typeof MkPushNotificationAllowButton>>();
+	$shallowRef<InstanceType<typeof PushNotificationAllowButton>>();
 let pushRegistrationInServer = $computed(
 	() => allowButton?.pushRegistrationInServer,
 );
@@ -87,7 +85,7 @@ function configure() {
 	);
 	os.popup(
 		defineAsyncComponent(
-			() => import("@/components/MkNotificationSettingWindow.vue"),
+			() => import("@/components/NotificationSettingWindow.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 6a069493f..9dff9cd43 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 MkButton from "@/components/MkButton.vue";
+import FormSwitch from "@/components/form/Switch.vue";
+import FormLink from "@/components/form/Link.vue";
+import Button from "@/components/Button.vue";
 import * as os from "@/os";
 import { popup } from "@/os";
 import { defaultStore } from "@/store";
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 b5e1b76dc..a85b1d977 100644
--- a/packages/client/src/pages/settings/plugin.vue
+++ b/packages/client/src/pages/settings/Plugin.vue
@@ -28,30 +28,27 @@
 					>{{ i18n.ts.makeActive }}</FormSwitch
 				>
 
-				<MkKeyValue class="_formBlock">
+				<KeyValue class="_formBlock">
 					<template #key>{{ i18n.ts.author }}</template>
 					<template #value>{{ plugin.author }}</template>
-				</MkKeyValue>
-				<MkKeyValue class="_formBlock">
+				</KeyValue>
+				<KeyValue class="_formBlock">
 					<template #key>{{ i18n.ts.description }}</template>
 					<template #value>{{ plugin.description }}</template>
-				</MkKeyValue>
-				<MkKeyValue class="_formBlock">
+				</KeyValue>
+				<KeyValue class="_formBlock">
 					<template #key>{{ i18n.ts.permission }}</template>
 					<template #value>{{ plugin.permission }}</template>
-				</MkKeyValue>
+				</KeyValue>
 
 				<div style="display: flex; gap: var(--margin); flex-wrap: wrap">
-					<MkButton
-						v-if="plugin.config"
-						inline
-						@click="config(plugin)"
+					<Button v-if="plugin.config" inline @click="config(plugin)"
 						><i class="ph-gear-six ph-bold ph-lg"></i>
-						{{ i18n.ts.settings }}</MkButton
+						{{ i18n.ts.settings }}</Button
 					>
-					<MkButton inline danger @click="uninstall(plugin)"
+					<Button inline danger @click="uninstall(plugin)"
 						><i class="ph-trash ph-bold ph-lg"></i>
-						{{ i18n.ts.uninstall }}</MkButton
+						{{ i18n.ts.uninstall }}</Button
 					>
 				</div>
 			</div>
@@ -61,11 +58,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 MkButton from "@/components/MkButton.vue";
-import MkKeyValue from "@/components/MkKeyValue.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 * as os from "@/os";
 import { ColdDeviceStorage } from "@/store";
 import { unisonReload } from "@/scripts/unison-reload";
diff --git a/packages/client/src/pages/settings/plugin.install.vue b/packages/client/src/pages/settings/PluginInstall.vue
similarity index 92%
rename from packages/client/src/pages/settings/plugin.install.vue
rename to packages/client/src/pages/settings/PluginInstall.vue
index a38c4a062..c606bf6d9 100644
--- a/packages/client/src/pages/settings/plugin.install.vue
+++ b/packages/client/src/pages/settings/PluginInstall.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/MkButton.vue";
-import FormInfo from "@/components/MkInfo.vue";
+import FormTextarea from "@/components/form/Textarea.vue";
+import FormButton from "@/components/Button.vue";
+import FormInfo from "@/components/Info.vue";
 import * as os from "@/os";
 import { ColdDeviceStorage } from "@/store";
 import { unisonReload } from "@/scripts/unison-reload";
@@ -94,9 +94,7 @@ async function install() {
 					os.popup(
 						defineAsyncComponent(
 							() =>
-								import(
-									"@/components/MkTokenGenerateWindow.vue"
-								),
+								import("@/components/TokenGenerateWindow.vue"),
 						),
 						{
 							title: i18n.ts.tokenRequested,
diff --git a/packages/client/src/pages/settings/preferences-backups.vue b/packages/client/src/pages/settings/PreferencesBackups.vue
similarity index 97%
rename from packages/client/src/pages/settings/preferences-backups.vue
rename to packages/client/src/pages/settings/PreferencesBackups.vue
index f79538821..11c126df2 100644
--- a/packages/client/src/pages/settings/preferences-backups.vue
+++ b/packages/client/src/pages/settings/PreferencesBackups.vue
@@ -1,12 +1,12 @@
 <template>
 	<div class="_formRoot">
 		<div :class="$style.buttons">
-			<MkButton inline primary @click="saveNew">{{
+			<Button inline primary @click="saveNew">{{
 				ts._preferencesBackups.saveNew
-			}}</MkButton>
-			<MkButton inline @click="loadFile">{{
+			}}</Button>
+			<Button inline @click="loadFile">{{
 				ts._preferencesBackups.loadFile
-			}}</MkButton>
+			}}</Button>
 		</div>
 
 		<FormSection>
@@ -48,9 +48,9 @@
 				</div>
 			</template>
 			<div v-else-if="profiles">
-				<MkInfo>{{ ts._preferencesBackups.noBackups }}</MkInfo>
+				<Info>{{ ts._preferencesBackups.noBackups }}</Info>
 			</div>
-			<MkLoading v-else />
+			<Loading 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 MkButton from "@/components/MkButton.vue";
-import MkInfo from "@/components/MkInfo.vue";
+import FormSection from "@/components/form/Section.vue";
+import Button from "@/components/Button.vue";
+import Info from "@/components/Info.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 08a388bd8..e82581149 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 3b94a8248..7bdce1e15 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">
-			<MkButton primary @click="save">{{ i18n.ts.save }}</MkButton>
+			<Button primary @click="save">{{ i18n.ts.save }}</Button>
 		</div>
 		<br />
 		<div
@@ -11,27 +11,23 @@
 			}"
 		>
 			<div class="avatar">
-				<MkAvatar
+				<Avatar
 					class="avatar"
 					:user="$i"
 					:disable-link="true"
 					@click="changeAvatar"
 				/>
-				<MkButton
+				<Button
 					primary
 					rounded
 					class="avatarEdit"
 					@click="changeAvatar"
-					>{{ i18n.ts._profile.changeAvatar }}</MkButton
+					>{{ i18n.ts._profile.changeAvatar }}</Button
 				>
 			</div>
-			<MkButton
-				primary
-				rounded
-				class="bannerEdit"
-				@click="changeBanner"
-				>{{ i18n.ts._profile.changeBanner }}</MkButton
-			>
+			<Button primary rounded class="bannerEdit" @click="changeBanner">{{
+				i18n.ts._profile.changeBanner
+			}}</Button>
 		</div>
 
 		<FormInput
@@ -111,17 +107,17 @@
 							>
 						</FormInput>
 					</FormSplit>
-					<MkButton
+					<Button
 						:disabled="fields.length >= 16"
 						inline
 						style="margin-right: 8px"
 						@click="addField"
 						><i class="ph-plus ph-bold ph-lg"></i>
-						{{ i18n.ts.add }}</MkButton
+						{{ i18n.ts.add }}</Button
 					>
-					<MkButton inline primary @click="saveFields"
+					<Button inline primary @click="saveFields"
 						><i class="ph-check ph-bold ph-lg"></i>
-						{{ i18n.ts.save }}</MkButton
+						{{ i18n.ts.save }}</Button
 					>
 				</div>
 			</FormFolder>
@@ -156,21 +152,21 @@
 			}}</template></FormSwitch
 		>
 		<div v-if="saveButton == true">
-			<MkButton primary @click="save">{{ i18n.ts.save }}</MkButton>
+			<Button primary @click="save">{{ i18n.ts.save }}</Button>
 		</div>
 	</div>
 </template>
 
 <script lang="ts" setup>
 import { reactive, watch } from "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 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 { 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 29f14fd48..0cc13bc59 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)"
 						>
-							<MkEmoji
+							<Emoji
 								: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">
-					<MkEmoji style="height: 1.7em" emoji="✌️" />
+					<Emoji style="height: 1.7em" emoji="✌️" />
 				</option>
 				<option :value="6" :aria-label="i18n.ts._skinTones.dark">
-					<MkEmoji style="height: 1.7em" emoji="✌🏿" />
+					<Emoji style="height: 1.7em" emoji="✌🏿" />
 				</option>
 				<option :value="5" :aria-label="i18n.ts._skinTones.mediumDark">
-					<MkEmoji style="height: 1.7em" emoji="✌🏾" />
+					<Emoji style="height: 1.7em" emoji="✌🏾" />
 				</option>
 				<option :value="4" :aria-label="i18n.ts._skinTones.medium">
-					<MkEmoji style="height: 1.7em" emoji="✌🏽" />
+					<Emoji style="height: 1.7em" emoji="✌🏽" />
 				</option>
 				<option :value="3" :aria-label="i18n.ts._skinTones.mediumLight">
-					<MkEmoji style="height: 1.7em" emoji="✌🏼" />
+					<Emoji style="height: 1.7em" emoji="✌🏼" />
 				</option>
 				<option :value="2" :aria-label="i18n.ts._skinTones.light">
-					<MkEmoji style="height: 1.7em" emoji="✌🏻" />
+					<Emoji 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/MkButton.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/Button.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/MkEmojiPickerDialog.vue"),
+			() => import("@/components/EmojiPickerDialog.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 d0979408b..91a3460b4 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>
-			<MkButton primary @click="change()">{{
+			<Button primary @click="change()">{{
 				i18n.ts.changePassword
-			}}</MkButton>
+			}}</Button>
 		</FormSection>
 
 		<X2fa />
 
 		<FormSection>
 			<template #label>{{ i18n.ts.signinHistory }}</template>
-			<MkPagination :pagination="pagination" disable-auto-load>
+			<Pagination :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>
-								<MkTime :time="item.createdAt" class="time" />
+								<Time :time="item.createdAt" class="time" />
 							</header>
 						</div>
 					</div>
 				</template>
-			</MkPagination>
+			</Pagination>
 		</FormSection>
 
 		<FormSection>
 			<FormSlot>
-				<MkButton danger @click="regenerateToken"
+				<Button danger @click="regenerateToken"
 					><i class="ph-arrows-clockwise ph-bold ph-lg"></i>
-					{{ i18n.ts.regenerateLoginToken }}</MkButton
+					{{ i18n.ts.regenerateLoginToken }}</Button
 				>
 				<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 MkButton from "@/components/MkButton.vue";
-import MkPagination from "@/components/MkPagination.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 * 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 bc890a569..b6411501b 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/MkButton.vue";
-import FormSection from "@/components/form/section.vue";
+import FormRange from "@/components/form/Range.vue";
+import FormButton from "@/components/Button.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/statusbar.statusbar.vue b/packages/client/src/pages/settings/StatusbarOptions.vue
similarity index 82%
rename from packages/client/src/pages/settings/statusbar.statusbar.vue
rename to packages/client/src/pages/settings/StatusbarOptions.vue
index b070c0c7d..c3238b1c6 100644
--- a/packages/client/src/pages/settings/statusbar.statusbar.vue
+++ b/packages/client/src/pages/settings/StatusbarOptions.vue
@@ -11,13 +11,13 @@
 			<option value="userList">User list timeline</option>
 		</FormSelect>
 
-		<MkInput v-model="statusbar.name" manual-save class="_formBlock">
+		<Input v-model="statusbar.name" manual-save class="_formBlock">
 			<template #label>{{ i18n.ts.label }}</template>
-		</MkInput>
+		</Input>
 
-		<MkSwitch v-model="statusbar.black" class="_formBlock">
+		<Switch v-model="statusbar.black" class="_formBlock">
 			<template #label>Black</template>
-		</MkSwitch>
+		</Switch>
 
 		<FormRadios v-model="statusbar.size" class="_formBlock">
 			<template #label>{{ i18n.ts.size }}</template>
@@ -29,25 +29,25 @@
 		</FormRadios>
 
 		<template v-if="statusbar.type === 'rss'">
-			<MkInput
+			<Input
 				v-model="statusbar.props.url"
 				manual-save
 				class="_formBlock"
 				type="url"
 			>
 				<template #label>URL</template>
-			</MkInput>
-			<MkSwitch v-model="statusbar.props.shuffle" class="_formBlock">
+			</Input>
+			<Switch v-model="statusbar.props.shuffle" class="_formBlock">
 				<template #label>{{ i18n.ts.shuffle }}</template>
-			</MkSwitch>
-			<MkInput
+			</Switch>
+			<Input
 				v-model="statusbar.props.refreshIntervalSec"
 				manual-save
 				class="_formBlock"
 				type="number"
 			>
 				<template #label>{{ i18n.ts.refreshInterval }}</template>
-			</MkInput>
+			</Input>
 			<FormRange
 				v-model="statusbar.props.marqueeDuration"
 				:min="5"
@@ -60,22 +60,19 @@
 					>{{ i18n.ts.fast }} &lt;-&gt; {{ i18n.ts.slow }}</template
 				>
 			</FormRange>
-			<MkSwitch
-				v-model="statusbar.props.marqueeReverse"
-				class="_formBlock"
-			>
+			<Switch v-model="statusbar.props.marqueeReverse" class="_formBlock">
 				<template #label>{{ i18n.ts.reverse }}</template>
-			</MkSwitch>
+			</Switch>
 		</template>
 		<template v-else-if="statusbar.type === 'federation'">
-			<MkInput
+			<Input
 				v-model="statusbar.props.refreshIntervalSec"
 				manual-save
 				class="_formBlock"
 				type="number"
 			>
 				<template #label>{{ i18n.ts.refreshInterval }}</template>
-			</MkInput>
+			</Input>
 			<FormRange
 				v-model="statusbar.props.marqueeDuration"
 				:min="5"
@@ -88,15 +85,12 @@
 					>{{ i18n.ts.fast }} &lt;-&gt; {{ i18n.ts.slow }}</template
 				>
 			</FormRange>
-			<MkSwitch
-				v-model="statusbar.props.marqueeReverse"
-				class="_formBlock"
-			>
+			<Switch v-model="statusbar.props.marqueeReverse" class="_formBlock">
 				<template #label>{{ i18n.ts.reverse }}</template>
-			</MkSwitch>
-			<MkSwitch v-model="statusbar.props.colored" class="_formBlock">
+			</Switch>
+			<Switch v-model="statusbar.props.colored" class="_formBlock">
 				<template #label>{{ i18n.ts.colored }}</template>
-			</MkSwitch>
+			</Switch>
 		</template>
 		<template
 			v-else-if="statusbar.type === 'userList' && userLists != null"
@@ -107,14 +101,14 @@
 					{{ list.name }}
 				</option>
 			</FormSelect>
-			<MkInput
+			<Input
 				v-model="statusbar.props.refreshIntervalSec"
 				manual-save
 				class="_formBlock"
 				type="number"
 			>
 				<template #label>{{ i18n.ts.refreshInterval }}</template>
-			</MkInput>
+			</Input>
 			<FormRange
 				v-model="statusbar.props.marqueeDuration"
 				:min="5"
@@ -127,12 +121,9 @@
 					>{{ i18n.ts.fast }} &lt;-&gt; {{ i18n.ts.slow }}</template
 				>
 			</FormRange>
-			<MkSwitch
-				v-model="statusbar.props.marqueeReverse"
-				class="_formBlock"
-			>
+			<Switch v-model="statusbar.props.marqueeReverse" class="_formBlock">
 				<template #label>{{ i18n.ts.reverse }}</template>
-			</MkSwitch>
+			</Switch>
 		</template>
 
 		<div style="display: flex; gap: var(--margin); flex-wrap: wrap">
@@ -143,12 +134,12 @@
 
 <script lang="ts" setup>
 import { computed, reactive, ref, watch } from "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 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 * as os from "@/os";
 import { defaultStore } from "@/store";
 import { i18n } from "@/i18n";
diff --git a/packages/client/src/pages/settings/statusbar.vue b/packages/client/src/pages/settings/StatusbarPage.vue
similarity index 85%
rename from packages/client/src/pages/settings/statusbar.vue
rename to packages/client/src/pages/settings/StatusbarPage.vue
index 96a80e8c6..2d9b2243c 100644
--- a/packages/client/src/pages/settings/statusbar.vue
+++ b/packages/client/src/pages/settings/StatusbarPage.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 "./statusbar.statusbar.vue";
-import FormRadios from "@/components/form/radios.vue";
-import FormFolder from "@/components/form/folder.vue";
-import FormButton from "@/components/MkButton.vue";
+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 * as os from "@/os";
 import { defaultStore } from "@/store";
 import { unisonReload } from "@/scripts/unison-reload";
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 437f73182..b45263e33 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/MkButton.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/Button.vue";
 import { getBuiltinThemesRef } from "@/scripts/theme";
 import { selectFile } from "@/scripts/select-file";
 import { isDeviceDarkmode } from "@/scripts/is-device-darkmode";
@@ -515,6 +515,7 @@ definePageMetadata({
 			}
 		}
 	}
+
 	> .sync {
 		padding: 14px 16px;
 		border-top: solid 0.5px var(--divider);
diff --git a/packages/client/src/pages/settings/theme.install.vue b/packages/client/src/pages/settings/ThemeInstall.vue
similarity index 94%
rename from packages/client/src/pages/settings/theme.install.vue
rename to packages/client/src/pages/settings/ThemeInstall.vue
index 0428de0f7..98d782f79 100644
--- a/packages/client/src/pages/settings/theme.install.vue
+++ b/packages/client/src/pages/settings/ThemeInstall.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/MkButton.vue";
+import FormTextarea from "@/components/form/Textarea.vue";
+import FormButton from "@/components/Button.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/theme.manage.vue b/packages/client/src/pages/settings/ThemeManage.vue
similarity index 92%
rename from packages/client/src/pages/settings/theme.manage.vue
rename to packages/client/src/pages/settings/ThemeManage.vue
index 79689b4e2..cc0c21d3b 100644
--- a/packages/client/src/pages/settings/theme.manage.vue
+++ b/packages/client/src/pages/settings/ThemeManage.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/MkButton.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/Button.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/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 e80b0dd83..2ad780c3c 100644
--- a/packages/client/src/pages/settings/webhook.vue
+++ b/packages/client/src/pages/settings/Webhook.vue
@@ -5,7 +5,7 @@
 		</FormSection>
 
 		<FormSection>
-			<MkPagination :pagination="pagination">
+			<Pagination :pagination="pagination">
 				<template #default="{ items }">
 					<FormLink
 						v-for="webhook in items"
@@ -39,23 +39,23 @@
 						</template>
 						{{ webhook.name || webhook.url }}
 						<template #suffix>
-							<MkTime
+							<Time
 								v-if="webhook.latestSentAt"
 								:time="webhook.latestSentAt"
-							></MkTime>
+							></Time>
 						</template>
 					</FormLink>
 				</template>
-			</MkPagination>
+			</Pagination>
 		</FormSection>
 	</div>
 </template>
 
 <script lang="ts" setup>
 import {} from "vue";
-import MkPagination from "@/components/MkPagination.vue";
-import FormSection from "@/components/form/section.vue";
-import FormLink from "@/components/form/link.vue";
+import Pagination from "@/components/Pagination.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/webhook.edit.vue b/packages/client/src/pages/settings/WebhookEdit.vue
similarity index 93%
rename from packages/client/src/pages/settings/webhook.edit.vue
rename to packages/client/src/pages/settings/WebhookEdit.vue
index 9d171c446..abcc1db71 100644
--- a/packages/client/src/pages/settings/webhook.edit.vue
+++ b/packages/client/src/pages/settings/WebhookEdit.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/MkButton.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 * as os from "@/os";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
diff --git a/packages/client/src/pages/settings/webhook.new.vue b/packages/client/src/pages/settings/WebhookNew.vue
similarity index 91%
rename from packages/client/src/pages/settings/webhook.new.vue
rename to packages/client/src/pages/settings/WebhookNew.vue
index 3ff25c345..862b0a70a 100644
--- a/packages/client/src/pages/settings/webhook.new.vue
+++ b/packages/client/src/pages/settings/WebhookNew.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/MkButton.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 * as os from "@/os";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
diff --git a/packages/client/src/pages/settings/word-mute.vue b/packages/client/src/pages/settings/WordMute.vue
similarity index 86%
rename from packages/client/src/pages/settings/word-mute.vue
rename to packages/client/src/pages/settings/WordMute.vue
index 9c69358bf..bcd9de06b 100644
--- a/packages/client/src/pages/settings/word-mute.vue
+++ b/packages/client/src/pages/settings/WordMute.vue
@@ -1,14 +1,14 @@
 <template>
 	<div class="_formRoot">
-		<MkTab v-model="tab" class="_formBlock">
+		<Tab v-model="tab" class="_formBlock">
 			<option value="soft">{{ i18n.ts._wordMute.soft }}</option>
 			<option value="hard">{{ i18n.ts._wordMute.hard }}</option>
-		</MkTab>
+		</Tab>
 		<div class="_formBlock">
 			<div v-show="tab === 'soft'">
-				<MkInfo class="_formBlock">{{
+				<Info class="_formBlock">{{
 					i18n.ts._wordMute.softDescription
-				}}</MkInfo>
+				}}</Info>
 				<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'">
-				<MkInfo class="_formBlock"
+				<Info class="_formBlock"
 					>{{ i18n.ts._wordMute.hardDescription }}
-					{{ i18n.ts.reflectMayTakeTime }}</MkInfo
+					{{ i18n.ts.reflectMayTakeTime }}</Info
 				>
 				<FormTextarea v-model="hardMutedWords" class="_formBlock">
 					<span>{{ i18n.ts._wordMute.muteWords }}</span>
@@ -31,7 +31,7 @@
 						}}</template
 					>
 				</FormTextarea>
-				<MkKeyValue
+				<KeyValue
 					v-if="hardWordMutedNotesCount != null"
 					class="_formBlock"
 				>
@@ -39,23 +39,23 @@
 					<template #value>{{
 						number(hardWordMutedNotesCount)
 					}}</template>
-				</MkKeyValue>
+				</KeyValue>
 			</div>
 		</div>
-		<MkButton primary inline :disabled="!changed" @click="save()"
+		<Button primary inline :disabled="!changed" @click="save()"
 			><i class="ph-floppy-disk-back ph-bold ph-lg"></i>
-			{{ i18n.ts.save }}</MkButton
+			{{ i18n.ts.save }}</Button
 		>
 	</div>
 </template>
 
 <script lang="ts" setup>
 import { ref, watch } from "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 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 * as os from "@/os";
 import number from "@/filters/number";
 import { defaultStore } from "@/store";
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 2da78686b..de576f162 100644
--- a/packages/client/src/pages/user/clips.vue
+++ b/packages/client/src/pages/user/Clips.vue
@@ -1,13 +1,13 @@
 <template>
-	<MkSpacer :content-max="800">
+	<Spacer :content-max="800">
 		<div class="pages-user-clips">
-			<MkPagination
+			<Pagination
 				v-slot="{ items }"
 				ref="list"
 				:pagination="pagination"
 				class="list"
 			>
-				<MkA
+				<A
 					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>
-				</MkA>
-			</MkPagination>
+				</A>
+			</Pagination>
 		</div>
-	</MkSpacer>
+	</Spacer>
 </template>
 
 <script lang="ts" setup>
 import { computed } from "vue";
 import * as misskey from "iceshrimp-js";
-import MkPagination from "@/components/MkPagination.vue";
+import Pagination from "@/components/Pagination.vue";
 
 const props = defineProps<{
 	user: misskey.entities.User;
diff --git a/packages/client/src/pages/user/follow-list.vue b/packages/client/src/pages/user/FollowList.vue
similarity index 87%
rename from packages/client/src/pages/user/follow-list.vue
rename to packages/client/src/pages/user/FollowList.vue
index 668cf33cd..cb14eac9f 100644
--- a/packages/client/src/pages/user/follow-list.vue
+++ b/packages/client/src/pages/user/FollowList.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<MkPagination
+		<Pagination
 			v-slot="{ items }"
 			ref="list"
 			:pagination="
@@ -9,7 +9,7 @@
 			class="mk-following-or-followers"
 		>
 			<div class="users">
-				<MkUserInfo
+				<UserInfo
 					v-for="user in items.map((x) =>
 						type === 'following' ? x.followee : x.follower,
 					)"
@@ -18,15 +18,15 @@
 					:user="user"
 				/>
 			</div>
-		</MkPagination>
+		</Pagination>
 	</div>
 </template>
 
 <script lang="ts" setup>
 import { computed } from "vue";
 import * as misskey from "iceshrimp-js";
-import MkUserInfo from "@/components/MkUserInfo.vue";
-import MkPagination from "@/components/MkPagination.vue";
+import UserInfo from "@/components/UserInfo.vue";
+import Pagination from "@/components/Pagination.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 fccbb36bc..719bb6a73 100644
--- a/packages/client/src/pages/user/followers.vue
+++ b/packages/client/src/pages/user/Followers.vue
@@ -1,18 +1,18 @@
 <template>
-	<MkStickyContainer>
-		<template #header
-			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
-		/></template>
-		<MkSpacer :content-max="1000">
+	<StickyContainer>
+		<template #header>
+			<PageHeader :actions="headerActions" :tabs="headerTabs" />
+		</template>
+		<Spacer :content-max="1000">
 			<transition name="fade" mode="out-in">
 				<div v-if="user">
 					<XFollowList :user="user" type="followers" />
 				</div>
-				<MkError v-else-if="error" @retry="fetchUser()" />
-				<MkLoading v-else />
+				<Error v-else-if="error" @retry="fetchUser()" />
+				<Loading v-else />
 			</transition>
-		</MkSpacer>
-	</MkStickyContainer>
+		</Spacer>
+	</StickyContainer>
 </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 "./follow-list.vue";
+import XFollowList from "./FollowList.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 e397d1bbd..6765808ee 100644
--- a/packages/client/src/pages/user/following.vue
+++ b/packages/client/src/pages/user/Following.vue
@@ -1,18 +1,18 @@
 <template>
-	<MkStickyContainer>
-		<template #header
-			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
-		/></template>
-		<MkSpacer :content-max="1000">
+	<StickyContainer>
+		<template #header>
+			<PageHeader :actions="headerActions" :tabs="headerTabs" />
+		</template>
+		<Spacer :content-max="1000">
 			<transition name="fade" mode="out-in">
 				<div v-if="user">
 					<XFollowList :user="user" type="following" />
 				</div>
-				<MkError v-else-if="error" @retry="fetchUser()" />
-				<MkLoading v-else />
+				<Error v-else-if="error" @retry="fetchUser()" />
+				<Loading v-else />
 			</transition>
-		</MkSpacer>
-	</MkStickyContainer>
+		</Spacer>
+	</StickyContainer>
 </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 "./follow-list.vue";
+import XFollowList from "./FollowList.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 72255b17b..a3dd9506c 100644
--- a/packages/client/src/pages/user/gallery.vue
+++ b/packages/client/src/pages/user/Gallery.vue
@@ -1,23 +1,23 @@
 <template>
-	<MkSpacer :content-max="800">
-		<MkPagination v-slot="{ items }" :pagination="pagination">
+	<Spacer :content-max="800">
+		<Pagination v-slot="{ items }" :pagination="pagination">
 			<div class="jrnovfpt">
-				<MkGalleryPostPreview
+				<GalleryPostPreview
 					v-for="post in items"
 					:key="post.id"
 					:post="post"
 					class="post"
 				/>
 			</div>
-		</MkPagination>
-	</MkSpacer>
+		</Pagination>
+	</Spacer>
 </template>
 
 <script lang="ts" setup>
 import { computed } from "vue";
 import * as misskey from "iceshrimp-js";
-import MkGalleryPostPreview from "@/components/MkGalleryPostPreview.vue";
-import MkPagination from "@/components/MkPagination.vue";
+import GalleryPostPreview from "@/components/GalleryPostPreview.vue";
+import Pagination from "@/components/Pagination.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 b1fc07443..a1f9e09a5 100644
--- a/packages/client/src/pages/user/home.vue
+++ b/packages/client/src/pages/user/Home.vue
@@ -1,5 +1,5 @@
 <template>
-	<MkSpacer :content-max="narrow ? 800 : 1100">
+	<Spacer :content-max="narrow ? 800 : 1100">
 		<div
 			ref="rootEl"
 			v-size="{ max: [500] }"
@@ -8,12 +8,12 @@
 		>
 			<div class="main">
 				<div class="profile">
-					<MkMoved
+					<Moved
 						v-if="user.movedToUri"
 						:host="user.movedToUri.host"
 						:acct="user.movedToUri.username"
 					/>
-					<MkRemoteCaution
+					<RemoteCaution
 						v-if="user.host != null"
 						:href="user.url"
 						class="warn"
@@ -38,7 +38,7 @@
 							<div class="fade"></div>
 							<div class="title">
 								<div class="nameColumn">
-									<MkUserName
+									<UserName
 										class="name"
 										:user="user"
 										:nowrap="true"
@@ -80,9 +80,9 @@
 									>
 								</div>
 								<div class="bottom">
-									<span class="username"
-										><MkAcct :user="user" :detail="true"
-									/></span>
+									<span class="username">
+										<Acct :user="user" :detail="true" />
+									</span>
 									<span
 										v-if="user.isAdmin"
 										v-tooltip.noDelay="i18n.ts.isAdmin"
@@ -112,7 +112,7 @@
 								</div>
 							</div>
 						</div>
-						<MkAvatar
+						<Avatar
 							class="avatar"
 							:user="user"
 							:disable-preview="true"
@@ -120,7 +120,7 @@
 						/>
 						<div class="title">
 							<div class="nameColumn">
-								<MkUserName
+								<UserName
 									class="name"
 									:user="user"
 									:nowrap="true"
@@ -155,9 +155,9 @@
 								</div>
 							</div>
 							<div class="bottom">
-								<span class="username"
-									><MkAcct :user="user" :detail="true"
-								/></span>
+								<span class="username">
+									<Acct :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">
-								<MkFollowButton
+								<FollowButton
 									:user="user"
 									@refresh="emit('refresh')"
 									:inline="true"
@@ -255,7 +255,7 @@
 											user.createdAt,
 										).toLocaleString()
 									}}
-									(<MkTime :time="user.createdAt" />)
+									(<Time :time="user.createdAt" />)
 								</dd>
 							</dl>
 						</div>
@@ -292,30 +292,30 @@
 							</dl>
 						</div>
 						<div class="status">
-							<MkA
+							<A
 								v-click-anime
 								:to="userPage(user)"
 								:class="{ active: page === 'index' }"
 							>
 								<b>{{ number(user.notesCount) }}</b>
 								<span>{{ i18n.ts.notes }}</span>
-							</MkA>
-							<MkA
+							</A>
+							<A
 								v-click-anime
 								:to="userPage(user, 'following')"
 								:class="{ active: page === 'following' }"
 							>
 								<b>{{ number(user.followingCount) }}</b>
 								<span>{{ i18n.ts.following }}</span>
-							</MkA>
-							<MkA
+							</A>
+							<A
 								v-click-anime
 								:to="userPage(user, 'followers')"
 								:class="{ active: page === 'followers' }"
 							>
 								<b>{{ number(user.followersCount) }}</b>
 								<span>{{ i18n.ts.followers }}</span>
-							</MkA>
+							</A>
 						</div>
 					</div>
 				</div>
@@ -330,10 +330,10 @@
 							:pinned="true"
 						/>
 					</div>
-					<MkInfo
+					<Info
 						v-else-if="$i && $i.id === user.id"
 						style="margin: 12px 0"
-						>{{ i18n.ts.userPagePinTip }}</MkInfo
+						>{{ i18n.ts.userPagePinTip }}</Info
 					>
 					<template v-if="narrow">
 						<XPhotos :key="user.id" :user="user" />
@@ -357,20 +357,20 @@
 				/>
 			</div>
 		</div>
-	</MkSpacer>
+	</Spacer>
 </template>
 
 <script lang="ts" setup>
 import { defineAsyncComponent, onMounted, onUnmounted } from "vue";
 import calcAge from "s-age";
 import cityTimezones from "city-timezones";
-import XUserTimeline from "./index.timeline.vue";
+import XUserTimeline from "./IndexTimeline.vue";
 import type * as misskey from "iceshrimp-js";
-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 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 { 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("./index.photos.vue"));
-const XActivity = defineAsyncComponent(() => import("./index.activity.vue"));
+const XPhotos = defineAsyncComponent(() => import("./IndexPhotos.vue"));
+const XActivity = defineAsyncComponent(() => import("./IndexActivity.vue"));
 
 const emit = defineEmits(["refresh"]);
 const props = withDefaults(
@@ -485,6 +485,7 @@ onUnmounted(() => {
 					overflow: hidden;
 					background-size: cover;
 					background-position: center;
+
 					> .banner {
 						height: 100%;
 						background-color: #26233a;
@@ -492,6 +493,7 @@ onUnmounted(() => {
 						background-position: center;
 						box-shadow: 0 0 128px var(--shadow) inset;
 						will-change: background-position;
+
 						&::before {
 							content: "";
 							position: fixed;
@@ -538,6 +540,7 @@ onUnmounted(() => {
 
 						> .nameColumn {
 							display: block;
+
 							> .name {
 								margin: 0;
 								line-height: 32px;
@@ -646,6 +649,7 @@ onUnmounted(() => {
 
 					> .nameColumn {
 						display: block;
+
 						> .name {
 							margin: 0;
 							align-content: center;
@@ -809,6 +813,7 @@ onUnmounted(() => {
 					display: block;
 					border-bottom: 0;
 					padding-bottom: 0;
+
 					> .bottom {
 						> .username {
 							margin-right: 0;
@@ -850,6 +855,7 @@ onUnmounted(() => {
 					height: auto;
 					border-bottom: 1px solid var(--divider);
 					padding-bottom: 5px;
+
 					> .actions {
 						position: static;
 					}
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 91e0cbaaa..186449726 100644
--- a/packages/client/src/pages/user/index.vue
+++ b/packages/client/src/pages/user/Index.vue
@@ -1,7 +1,7 @@
 <template>
-	<MkStickyContainer>
+	<StickyContainer>
 		<template #header>
-			<MkPageHeader
+			<PageHeader
 				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>
-				<MkError v-else-if="error" @retry="fetchUser()" />
-				<MkLoading v-else />
+				<Error v-else-if="error" @retry="fetchUser()" />
+				<Loading v-else />
 			</transition>
 		</div>
-	</MkStickyContainer>
+	</StickyContainer>
 </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,6 +148,7 @@ 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/index.activity.vue b/packages/client/src/pages/user/IndexActivity.vue
similarity index 89%
rename from packages/client/src/pages/user/index.activity.vue
rename to packages/client/src/pages/user/IndexActivity.vue
index 7116e456b..21d379004 100644
--- a/packages/client/src/pages/user/index.activity.vue
+++ b/packages/client/src/pages/user/IndexActivity.vue
@@ -1,5 +1,5 @@
 <template>
-	<MkContainer>
+	<Container>
 		<template #header
 			><i
 				class="ph-chart-bar ph-bold ph-lg"
@@ -14,7 +14,7 @@
 		</template>
 
 		<div style="padding: 8px">
-			<MkChart
+			<Chart
 				:src="chartSrc"
 				:args="{ user, withoutAll: true }"
 				span="day"
@@ -25,14 +25,14 @@
 				:aspect-ratio="5"
 			/>
 		</div>
-	</MkContainer>
+	</Container>
 </template>
 
 <script lang="ts" setup>
 import {} from "vue";
 import * as misskey from "iceshrimp-js";
-import MkContainer from "@/components/MkContainer.vue";
-import MkChart from "@/components/MkChart.vue";
+import Container from "@/components/Container.vue";
+import Chart from "@/components/Chart.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 
diff --git a/packages/client/src/pages/user/index.photos.vue b/packages/client/src/pages/user/IndexPhotos.vue
similarity index 89%
rename from packages/client/src/pages/user/index.photos.vue
rename to packages/client/src/pages/user/IndexPhotos.vue
index f1adbefb9..5c95bb502 100644
--- a/packages/client/src/pages/user/index.photos.vue
+++ b/packages/client/src/pages/user/IndexPhotos.vue
@@ -1,13 +1,13 @@
 <template>
-	<MkContainer id="photos-container" :max-height="300" :foldable="true">
+	<Container 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">
-			<MkLoading v-if="fetching" />
+			<Loading v-if="fetching" />
 			<div v-if="!fetching && images.length > 0" class="stream">
-				<MkA
+				<A
 					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"
 					/>
-				</MkA>
+				</A>
 			</div>
 			<p v-if="!fetching && images.length == 0" class="empty">
 				{{ i18n.ts.nothing }}
 			</p>
 		</div>
-	</MkContainer>
+	</Container>
 </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 MkContainer from "@/components/MkContainer.vue";
-import ImgWithBlurhash from "@/components/MkImgWithBlurhash.vue";
+import Container from "@/components/Container.vue";
+import ImgWithBlurhash from "@/components/ImgWithBlurhash.vue";
 import { defaultStore } from "@/store";
 import { i18n } from "@/i18n";
 
diff --git a/packages/client/src/pages/user/index.timeline.vue b/packages/client/src/pages/user/IndexTimeline.vue
similarity index 82%
rename from packages/client/src/pages/user/index.timeline.vue
rename to packages/client/src/pages/user/IndexTimeline.vue
index 3bc3294df..6efebcc54 100644
--- a/packages/client/src/pages/user/index.timeline.vue
+++ b/packages/client/src/pages/user/IndexTimeline.vue
@@ -1,21 +1,21 @@
 <template>
-	<MkStickyContainer>
+	<StickyContainer>
 		<template #header>
-			<MkTab v-model="include" :class="$style.tab">
+			<Tab 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>
-			</MkTab>
+			</Tab>
 		</template>
 		<XNotes :no-gap="true" :pagination="pagination" />
-	</MkStickyContainer>
+	</StickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { ref, computed } from "vue";
 import * as misskey from "iceshrimp-js";
-import XNotes from "@/components/MkNotes.vue";
-import MkTab from "@/components/MkTab.vue";
+import XNotes from "@/components/Notes.vue";
+import Tab from "@/components/Tab.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 
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 98050647d..cf26cbc01 100644
--- a/packages/client/src/pages/user/pages.vue
+++ b/packages/client/src/pages/user/Pages.vue
@@ -1,21 +1,21 @@
 <template>
-	<MkSpacer :content-max="800">
-		<MkPagination v-slot="{ items }" ref="list" :pagination="pagination">
-			<MkPagePreview
+	<Spacer :content-max="800">
+		<Pagination v-slot="{ items }" ref="list" :pagination="pagination">
+			<PagePreview
 				v-for="page in items"
 				:key="page.id"
 				:page="page"
 				class="_gap"
 			/>
-		</MkPagination>
-	</MkSpacer>
+		</Pagination>
+	</Spacer>
 </template>
 
 <script lang="ts" setup>
 import { computed } from "vue";
 import * as misskey from "iceshrimp-js";
-import MkPagePreview from "@/components/MkPagePreview.vue";
-import MkPagination from "@/components/MkPagination.vue";
+import PagePreview from "@/components/PagePreview.vue";
+import Pagination from "@/components/Pagination.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 0228076cd..24dbc4e6d 100644
--- a/packages/client/src/pages/user/reactions.vue
+++ b/packages/client/src/pages/user/Reactions.vue
@@ -1,6 +1,6 @@
 <template>
-	<MkSpacer :content-max="800">
-		<MkPagination v-slot="{ items }" ref="list" :pagination="pagination">
+	<Spacer :content-max="800">
+		<Pagination 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">
-					<MkAvatar class="avatar" :user="user" />
-					<MkReactionIcon
+					<Avatar class="avatar" :user="user" />
+					<ReactionIcon
 						class="reaction"
 						:reaction="item.type"
 						:custom-emojis="item.note.emojis"
 						:no-style="true"
 					/>
-					<MkTime :time="item.createdAt" class="createdAt" />
+					<Time :time="item.createdAt" class="createdAt" />
 				</div>
-				<MkNote :key="item.id" :note="item.note" />
+				<Note :key="item.id" :note="item.note" />
 			</div>
-		</MkPagination>
-	</MkSpacer>
+		</Pagination>
+	</Spacer>
 </template>
 
 <script lang="ts" setup>
 import { computed } from "vue";
 import * as misskey from "iceshrimp-js";
-import MkPagination from "@/components/MkPagination.vue";
-import MkNote from "@/components/MkNote.vue";
-import MkReactionIcon from "@/components/MkReactionIcon.vue";
+import Pagination from "@/components/Pagination.vue";
+import Note from "@/components/Note.vue";
+import ReactionIcon from "@/components/ReactionIcon.vue";
 
 const props = defineProps<{
 	user: misskey.entities.User;
diff --git a/packages/client/src/router.ts b/packages/client/src/router.ts
index 925bede67..2f830b899 100644
--- a/packages/client/src/router.ts
+++ b/packages/client/src/router.ts
@@ -1,313 +1,309 @@
 import { AsyncComponentLoader, defineAsyncComponent, inject } from "vue";
 import { Router } from "@/nirax";
 import { $i, iAmModerator } from "@/account";
-import MkLoading from "@/pages/_loading_.vue";
-import MkError from "@/pages/_error_.vue";
+import Loading from "@/pages/Loading.vue";
+import Error from "@/pages/Error.vue";
 
 const page = (loader: AsyncComponentLoader<any>) =>
 	defineAsyncComponent({
 		loader: loader,
-		loadingComponent: MkLoading,
-		errorComponent: MkError,
+		loadingComponent: Loading,
+		errorComponent: Error,
 	});
 
 export const routes = [
 	{
 		path: "/@:initUser/pages/:initPageName/view-source",
-		component: page(() => import("./pages/page-editor/page-editor.vue")),
+		component: page(() => import("./pages/page-editor/PageEditor.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/user-info.vue")),
+		component: page(() => import("./pages/UserInfo.vue")),
 	},
 	{
 		path: "/instance-info/:host",
-		component: page(() => import("./pages/instance-info.vue")),
+		component: page(() => import("./pages/InstanceInfo.vue")),
 	},
 	{
 		path: "/public/local",
-		component: page(() => import("./pages/no-graze.vue")),
+		component: page(() => import("./pages/NoGraze.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/theme.install.vue")),
+				component: page(() => import("./pages/settings/ThemeInstall.vue")),
 			},
 			{
 				path: "/theme/manage",
 				name: "theme",
-				component: page(() => import("./pages/settings/theme.manage.vue")),
+				component: page(() => import("./pages/settings/ThemeManage.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/custom-css.vue")),
+				component: page(() => import("./pages/settings/CustomCss.vue")),
 			},
 			{
 				path: "/custom-katex-macro",
 				name: "custom-katex-macro",
-				component: page(
-					() => import("./pages/settings/custom-katex-macro.vue"),
-				),
+				component: page(() => import("./pages/settings/CustomKatexMacro.vue")),
 			},
 			{
 				path: "/account-info",
 				name: "account-info",
-				component: page(() => import("./pages/settings/account-info.vue")),
+				component: page(() => import("./pages/settings/AccountInfo.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/statusbar.vue")),
+				component: page(() => import("./pages/settings/StatusbarPage.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/plugin.install.vue")),
+				component: page(() => import("./pages/settings/PluginInstall.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/import-export.vue")),
+				component: page(() => import("./pages/settings/ImportExport.vue")),
 			},
 			{
 				path: "/instance-mute",
 				name: "instance-mute",
-				component: page(() => import("./pages/settings/instance-mute.vue")),
+				component: page(() => import("./pages/settings/InstanceMute.vue")),
 			},
 			{
 				path: "/mute-block",
 				name: "mute-block",
-				component: page(() => import("./pages/settings/mute-block.vue")),
+				component: page(() => import("./pages/settings/MuteBlock.vue")),
 			},
 			{
 				path: "/word-mute",
 				name: "word-mute",
-				component: page(() => import("./pages/settings/word-mute.vue")),
+				component: page(() => import("./pages/settings/WordMute.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/webhook.edit.vue")),
+				component: page(() => import("./pages/settings/WebhookEdit.vue")),
 			},
 			{
 				path: "/webhook/new",
 				name: "webhook",
-				component: page(() => import("./pages/settings/webhook.new.vue")),
+				component: page(() => import("./pages/settings/WebhookNew.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/delete-account.vue")),
+				component: page(() => import("./pages/settings/DeleteAccount.vue")),
 			},
 			{
 				path: "/preferences-backups",
 				name: "preferences-backups",
 				component: page(
-					() => import("./pages/settings/preferences-backups.vue"),
+					() => import("./pages/settings/PreferencesBackups.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/custom-css.vue")),
+				component: page(() => import("./pages/settings/CustomCss.vue")),
 			},
 			{
 				path: "/custom-katex-macro",
 				name: "general",
-				component: page(
-					() => import("./pages/settings/custom-katex-macro.vue"),
-				),
+				component: page(() => import("./pages/settings/CustomKatexMacro.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/account-info.vue")),
+				component: page(() => import("./pages/settings/AccountInfo.vue")),
 			},
 			{
 				path: "/delete-account",
 				name: "other",
-				component: page(() => import("./pages/settings/delete-account.vue")),
+				component: page(() => import("./pages/settings/DeleteAccount.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/reset-password.vue")),
+		component: page(() => import("./pages/ResetPassword.vue")),
 	},
 	{
 		path: "/signup-complete/:code",
-		component: page(() => import("./pages/signup-complete.vue")),
+		component: page(() => import("./pages/SignupComplete.vue")),
 	},
 	{
 		path: "/verify-email/:code",
-		component: page(() => import("./pages/verify-email.vue")),
+		component: page(() => import("./pages/VerifyEmail.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/about-iceshrimp.vue")),
+		component: page(() => import("./pages/AboutIceshrimp.vue")),
 	},
 	{
 		path: "/theme-editor",
-		component: page(() => import("./pages/theme-editor.vue")),
+		component: page(() => import("./pages/ThemeEditor.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",
@@ -315,50 +311,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/api-console.vue")),
+		component: page(() => import("./pages/ApiConsole.vue")),
 		loginRequired: true,
 	},
 	{
 		path: "/mfm-cheat-sheet",
-		component: page(() => import("./pages/mfm-cheat-sheet.vue")),
+		component: page(() => import("./pages/MfmCheatsheet.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",
@@ -368,290 +364,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/page-editor.vue")),
+		component: page(() => import("./pages/page-editor/PageEditor.vue")),
 		loginRequired: true,
 	},
 	{
 		path: "/pages/edit/:initPageId",
-		component: page(() => import("./pages/page-editor/page-editor.vue")),
+		component: page(() => import("./pages/page-editor/PageEditor.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/channel-editor.vue")),
+		component: page(() => import("./pages/ChannelEditor.vue")),
 		loginRequired: true,
 	},
 	{
 		path: "/channels/new",
-		component: page(() => import("./pages/channel-editor.vue")),
+		component: page(() => import("./pages/ChannelEditor.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/registry.keys.vue")),
+		component: page(() => import("./pages/RegistryKeys.vue")),
 	},
 	{
 		path: "/registry/value/system/:path(*)?",
-		component: page(() => import("./pages/registry.value.vue")),
+		component: page(() => import("./pages/RegistryValue.vue")),
 	},
 	{
 		path: "/registry",
-		component: page(() => import("./pages/registry.vue")),
+		component: page(() => import("./pages/Registry.vue")),
 	},
 	{
 		path: "/admin/file/:fileId",
 		component: iAmModerator
-			? page(() => import("./pages/admin-file.vue"))
-			: page(() => import("./pages/not-found.vue")),
+			? page(() => import("./pages/AdminFile.vue"))
+			: page(() => import("./pages/NotFound.vue")),
 	},
 	{
 		path: "/admin",
 		component: iAmModerator
-			? page(() => import("./pages/admin/index.vue"))
-			: page(() => import("./pages/not-found.vue")),
+			? page(() => import("./pages/admin/Index.vue"))
+			: page(() => import("./pages/NotFound.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/email-settings.vue")),
+				component: page(() => import("./pages/admin/EmailSettings.vue")),
 			},
 			{
 				path: "/object-storage",
 				name: "object-storage",
-				component: page(() => import("./pages/admin/object-storage.vue")),
+				component: page(() => import("./pages/admin/ObjectStorage.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/instance-block.vue")),
+				component: page(() => import("./pages/admin/InstanceBlock.vue")),
 			},
 			{
 				path: "/other-settings",
 				name: "other-settings",
-				component: page(() => import("./pages/admin/other-settings.vue")),
+				component: page(() => import("./pages/admin/OtherSettings.vue")),
 			},
 			{
 				path: "/other-settings",
 				name: "other-settings",
-				component: page(() => import("./pages/admin/custom-css.vue")),
+				component: page(() => import("./pages/admin/CustomCss.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/messaging-room.vue")),
+		component: page(() => import("./pages/messaging/MessagingRoom.vue")),
 		loginRequired: true,
 	},
 	{
 		path: "/my/messaging/group/:groupId",
-		component: page(() => import("./pages/messaging/messaging-room.vue")),
+		component: page(() => import("./pages/messaging/MessagingRoom.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/follow-requests.vue")),
+		component: page(() => import("./pages/FollowRequests.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/user-list-timeline.vue")),
+		component: page(() => import("./pages/UserListTimeline.vue")),
 		loginRequired: true,
 	},
 	{
 		path: "/timeline/antenna/:antennaId",
-		component: page(() => import("./pages/antenna-timeline.vue")),
+		component: page(() => import("./pages/AntennaTimeline.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/not-found.vue")),
+		component: page(() => import("./pages/NotFound.vue")),
 	},
 ];
 
diff --git a/packages/client/src/scripts/aiscript/api.ts b/packages/client/src/scripts/aiscript/api.ts
index 9ec2db963..e7159081f 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,
-		"Mk:dialog": values.FN_NATIVE(async ([title, text, type]) => {
+		":dialog": values.FN_NATIVE(async ([title, text, type]) => {
 			await os.alert({
 				type: type ? type.value : "info",
 				title: title.value,
 				text: text.value,
 			});
 		}),
-		"Mk:confirm": values.FN_NATIVE(async ([title, text, type]) => {
+		":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;
 		}),
-		"Mk:api": values.FN_NATIVE(async ([ep, param, token]) => {
+		":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);
 		}),
-		"Mk:save": values.FN_NATIVE(([key, value]) => {
+		":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;
 		}),
-		"Mk:load": values.FN_NATIVE(([key]) => {
+		":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 99f9dce40..bc8dd4338 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/MkAutocomplete.vue")),
+				defineAsyncComponent(() => import("@/components/Autocomplete.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 3c05bc619..ae64b25d3 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/MkAbuseReportWindow.vue"),
+									() => import("@/components/AbuseReportWindow.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 e23ef97a0..666791f21 100644
--- a/packages/client/src/scripts/get-user-menu.ts
+++ b/packages/client/src/scripts/get-user-menu.ts
@@ -193,9 +193,7 @@ export function getUserMenu(user, router: Router = mainRouter) {
 
 	function reportAbuse() {
 		os.popup(
-			defineAsyncComponent(
-				() => import("@/components/MkAbuseReportWindow.vue"),
-			),
+			defineAsyncComponent(() => import("@/components/AbuseReportWindow.vue")),
 			{
 				user: user,
 			},
diff --git a/packages/client/src/scripts/helpMenu.ts b/packages/client/src/scripts/helpMenu.ts
index a31f99ad3..fc6064bed 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/MkTutorialDialog.vue";
+import XTutorial from "../components/TutorialDialog.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 d0f774e36..9440767ef 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 {
-		"MkPages:updated": values.FN_NATIVE(([callback]) => {
+		"Pages:updated": values.FN_NATIVE(([callback]) => {
 			hpml.pageVarUpdatedCallback = callback as values.VFn;
 		}),
-		"MkPages:get_canvas": values.FN_NATIVE(([id]) => {
+		"Pages: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) {
 				]),
 			);
 		}),
-		"MkPages:chart": values.FN_NATIVE(([id, opts]) => {
+		"Pages: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 9b660dd6d..6a034dfb0 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/MkSigninDialog.vue")),
+		defineAsyncComponent(() => import("@/components/SigninDialog.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 8baa50278..103f65cb8 100644
--- a/packages/client/src/scripts/reaction-picker.ts
+++ b/packages/client/src/scripts/reaction-picker.ts
@@ -13,9 +13,7 @@ class ReactionPicker {
 
 	public async init() {
 		await popup(
-			defineAsyncComponent(
-				() => import("@/components/MkEmojiPickerDialog.vue"),
-			),
+			defineAsyncComponent(() => import("@/components/EmojiPickerDialog.vue")),
 			{
 				src: this.src,
 				asReactionPicker: true,
diff --git a/packages/client/src/scripts/theme.ts b/packages/client/src/scripts/theme.ts
index 1fb81e1d2..7a52cfe9f 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,10 +138,13 @@ 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 13ed0e571..ea5fd7776 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 MkChartTooltip from "@/components/MkChartTooltip.vue";
+import ChartTooltip from "@/components/ChartTooltip.vue";
 
 export function useChartTooltip(
 	opts: { position: "top" | "middle" } = { position: "top" },
@@ -13,7 +13,7 @@ export function useChartTooltip(
 	let disposeTooltipComponent;
 
 	os.popup(
-		MkChartTooltip,
+		ChartTooltip,
 		{
 			showing: tooltipShowing,
 			x: tooltipX,
diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss
index 3fd3eb973..563203e92 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/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 905c6ee36..3213033f7 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>
-					<MkButton primary class="add" @click="addColumn">{{
+					<Button primary class="add" @click="addColumn">{{
 						i18n.ts._deck.addColumn
-					}}</MkButton>
+					}}</Button>
 					<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/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 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 { 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,6 +393,7 @@ 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;
@@ -404,6 +405,7 @@ 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/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 e7a7d5d47..7fd1b0dbb 100644
--- a/packages/client/src/ui/universal.vue
+++ b/packages/client/src/ui/Universal.vue
@@ -5,10 +5,10 @@
 	>
 		<XSidebar v-if="!isMobile" />
 
-		<MkStickyContainer class="contents">
-			<template #header
-				><XStatusBars :class="$style.statusbars"
-			/></template>
+		<StickyContainer class="contents">
+			<template #header>
+				<XStatusBars :class="$style.statusbars" />
+			</template>
 			<main
 				id="maincontent"
 				style="min-width: 0"
@@ -17,7 +17,7 @@
 			>
 				<RouterView />
 			</main>
-		</MkStickyContainer>
+		</StickyContainer>
 
 		<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_/navbar-for-mobile.vue";
-import XSidebar from "@/ui/_common_/navbar.vue";
+import XDrawerMenu from "@/ui/common/NavbarMobile.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("./universal.widgets.vue"));
+const XWidgets = defineAsyncComponent(() => import("./UniversalWidgets.vue"));
 const XStatusBars = defineAsyncComponent(
-	() => import("@/ui/_common_/statusbars.vue"),
+	() => import("@/ui/common/Statusbars.vue"),
 );
 
 const DESKTOP_THRESHOLD = 1100;
@@ -413,6 +413,7 @@ 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;
@@ -424,6 +425,7 @@ 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;
@@ -437,6 +439,7 @@ 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;
@@ -448,6 +451,7 @@ 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;
@@ -463,19 +467,23 @@ 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;
@@ -485,6 +493,7 @@ console.log(mainRouter.currentRoute.value.name);
 				opacity: 1;
 				z-index: -3;
 			}
+
 			> ._button:last-child {
 				margin-bottom: 0 !important;
 			}
@@ -493,8 +502,10 @@ 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;
@@ -505,6 +516,7 @@ console.log(mainRouter.currentRoute.value.name);
 			margin-left: -200px;
 			padding-left: 200px;
 			box-sizing: content-box;
+
 			.banner {
 				pointer-events: none;
 				top: -20% !important;
@@ -567,6 +579,7 @@ console.log(mainRouter.currentRoute.value.name);
 				background: var(--acrylicBg) !important;
 				backdrop-filter: var(--blur, blur(12px));
 			}
+
 			:deep(.tl),
 			:deep(.notes) {
 				background: none;
@@ -579,6 +592,7 @@ 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);
 		}
@@ -624,7 +638,11 @@ 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;
@@ -674,7 +692,6 @@ console.log(mainRouter.currentRoute.value.name);
 			> .button-wrapper {
 				display: inline-flex;
 				justify-content: center;
-				padding: 4px 0;
 
 				&.on {
 					background-color: var(--focus);
@@ -706,6 +723,7 @@ console.log(mainRouter.currentRoute.value.name);
 					margin-right: 8px;
 				}
 			}
+
 			> .indicator {
 				position: absolute;
 				top: 0;
diff --git a/packages/client/src/ui/universal.widgets.vue b/packages/client/src/ui/UniversalWidgets.vue
similarity index 97%
rename from packages/client/src/ui/universal.widgets.vue
rename to packages/client/src/ui/UniversalWidgets.vue
index c43d1aa0c..0be725959 100644
--- a/packages/client/src/ui/universal.widgets.vue
+++ b/packages/client/src/ui/UniversalWidgets.vue
@@ -30,7 +30,7 @@
 
 <script lang="ts" setup>
 import { onMounted } from "vue";
-import XWidgets from "@/components/MkWidgets.vue";
+import XWidgets from "@/components/Widgets.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 9b602b5b0..f0f898a44 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/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 b171420d7..32fbdee20 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/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 e87c3c6d6..96bfe2692 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("./stream-indicator.vue"),
+	() => import("./StreamIndicator.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/MkNotificationToast.vue"),
+				() => import("@/components/NotificationToast.vue"),
 			),
 			{
 				notification,
@@ -71,9 +71,11 @@ if ($i) {
 	0% {
 		opacity: 1;
 	}
+
 	50% {
 		opacity: 0;
 	}
+
 	100% {
 		opacity: 1;
 	}
@@ -83,6 +85,7 @@ if ($i) {
 	0% {
 		transform: rotate(0deg);
 	}
+
 	100% {
 		transform: rotate(360deg);
 	}
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 0327ff1eb..05bbf5a6c 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"
 				>
-					<MkAvatar
+					<Avatar
 						:user="$i"
 						class="icon"
 						disableLink
-					/><!-- <MkAcct class="text" :user="$i"/> -->
+					/><!-- <Acct class="text" :user="$i"/> -->
 				</button>
 			</div>
 			<nav class="middle">
-				<MkA
+				<A
 					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>
-				</MkA>
+				</A>
 				<template v-for="item in menu">
 					<div v-if="item === '-'" class="divider"></div>
 					<component
-						:is="navbarItemDef[item].to ? 'MkA' : 'button'"
+						:is="navbarItemDef[item].to ? 'A' : 'button'"
 						v-else-if="
 							navbarItemDef[item] &&
 							navbarItemDef[item].show !== false
@@ -71,7 +71,7 @@
 					</component>
 				</template>
 				<div class="divider"></div>
-				<MkA
+				<A
 					v-if="$i.isAdmin || $i.isModerator"
 					v-click-anime
 					v-tooltip.noDelay.right="i18n.ts.controlPanel"
@@ -88,11 +88,10 @@
 							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>
-				</MkA>
+				</A>
 				<div class="divider" v-if="$i.isAdmin || $i.isModerator"></div>
 				<button
 					v-click-anime
@@ -108,7 +107,7 @@
 						><i class="icon ph-circle ph-fill"></i
 					></span>
 				</button>
-				<MkA
+				<A
 					v-click-anime
 					v-tooltip.noDelay.right="i18n.ts.settings"
 					class="item _button"
@@ -117,7 +116,7 @@
 				>
 					<i class="icon ph-gear-six ph-bold ph-fw ph-lg"></i
 					><span class="text">{{ i18n.ts.settings }}</span>
-				</MkA>
+				</A>
 			</nav>
 			<div class="bottom">
 				<button
@@ -133,7 +132,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">
-				<MkAvatar :user="$i" class="account"/><MkAcct class="text" :user="$i"/>
+				<Avatar :user="$i" class="account"/><Acct class="text" :user="$i"/>
 			</button> -->
 			</div>
 		</div>
@@ -207,8 +206,12 @@ 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;
@@ -230,7 +233,7 @@ function openAccountMenu(ev: MouseEvent) {
 
 function more(ev: MouseEvent) {
 	os.popup(
-		defineAsyncComponent(() => import("@/components/MkLaunchPad.vue")),
+		defineAsyncComponent(() => import("@/components/LaunchPad.vue")),
 		{
 			src: ev.currentTarget ?? ev.target,
 		},
@@ -257,12 +260,15 @@ 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;
@@ -279,6 +285,7 @@ function more(ev: MouseEvent) {
 				position: relative;
 				z-index: 1;
 				padding: 2rem 0;
+
 				> .banner {
 					position: absolute;
 					top: 0;
@@ -639,7 +646,7 @@ function more(ev: MouseEvent) {
 							opacity: 1;
 						}
 					}
-					
+
 					&:hover,
 					&:focus-within {
 						&:before {
@@ -659,6 +666,7 @@ function more(ev: MouseEvent) {
 
 	.item {
 		outline: none;
+
 		&:focus-visible:before {
 			outline: auto;
 		}
diff --git a/packages/client/src/ui/_common_/navbar-for-mobile.vue b/packages/client/src/ui/common/NavbarMobile.vue
similarity index 96%
rename from packages/client/src/ui/_common_/navbar-for-mobile.vue
rename to packages/client/src/ui/common/NavbarMobile.vue
index 6e6204761..f74262c69 100644
--- a/packages/client/src/ui/_common_/navbar-for-mobile.vue
+++ b/packages/client/src/ui/common/NavbarMobile.vue
@@ -15,15 +15,15 @@
 					class="item _button account"
 					@click="openAccountMenu"
 				>
-					<MkAvatar
+					<Avatar
 						:user="$i"
 						class="icon"
 						disableLink
-					/><!-- <MkAcct class="text" :user="$i"/> -->
+					/><!-- <Acct class="text" :user="$i"/> -->
 				</button>
 			</div>
 			<div class="middle">
-				<MkA
+				<A
 					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>
-				</MkA>
+				</A>
 				<template v-for="item in menu">
 					<div v-if="item === '-'" class="divider"></div>
 					<component
-						:is="navbarItemDef[item].to ? 'MkA' : 'button'"
+						:is="navbarItemDef[item].to ? 'A' : 'button'"
 						v-else-if="
 							navbarItemDef[item] &&
 							navbarItemDef[item].show !== false
@@ -70,7 +70,7 @@
 					</component>
 				</template>
 				<div class="divider"></div>
-				<MkA
+				<A
 					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>
-				</MkA>
+				</A>
 				<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>
-				<MkA
+				<A
 					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>
-				</MkA>
+				</A>
 			</div>
 			<div class="bottom">
 				<button
@@ -152,7 +152,7 @@ function openAccountMenu(ev: MouseEvent) {
 
 function more() {
 	os.popup(
-		defineAsyncComponent(() => import("@/components/MkLaunchPad.vue")),
+		defineAsyncComponent(() => import("@/components/LaunchPad.vue")),
 		{},
 		{},
 		"closed",
diff --git a/packages/client/src/ui/_common_/statusbar-federation.vue b/packages/client/src/ui/common/StatusbarFederation.vue
similarity index 97%
rename from packages/client/src/ui/_common_/statusbar-federation.vue
rename to packages/client/src/ui/common/StatusbarFederation.vue
index 5f0cd8315..8c067c3c2 100644
--- a/packages/client/src/ui/_common_/statusbar-federation.vue
+++ b/packages/client/src/ui/common/StatusbarFederation.vue
@@ -21,12 +21,12 @@
 							:src="getInstanceIcon(instance)"
 							alt=""
 						/>
-						<MkA
+						<A
 							:to="`/instance-info/${instance.host}`"
 							class="host _monospace"
 						>
 							{{ instance.host }}
-						</MkA>
+						</A>
 						<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/MkMarquee.vue";
+import MarqueeText from "@/components/Marquee.vue";
 import * as os from "@/os";
 import { useInterval } from "@/scripts/use-interval";
 import { getNoteSummary } from "@/scripts/get-note-summary";
@@ -93,10 +93,12 @@ 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_/statusbar-rss.vue b/packages/client/src/ui/common/StatusbarRss.vue
similarity index 97%
rename from packages/client/src/ui/_common_/statusbar-rss.vue
rename to packages/client/src/ui/common/StatusbarRss.vue
index 606f3f1bd..478a7d06c 100644
--- a/packages/client/src/ui/_common_/statusbar-rss.vue
+++ b/packages/client/src/ui/common/StatusbarRss.vue
@@ -28,7 +28,7 @@
 
 <script lang="ts" setup>
 import { computed, defineAsyncComponent, ref, toRef, watch } from "vue";
-import MarqueeText from "@/components/MkMarquee.vue";
+import MarqueeText from "@/components/Marquee.vue";
 import * as os from "@/os";
 import { useInterval } from "@/scripts/use-interval";
 import { shuffle } from "@/scripts/shuffle";
@@ -73,10 +73,12 @@ 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_/statusbar-user-list.vue b/packages/client/src/ui/common/StatusbarUserList.vue
similarity index 95%
rename from packages/client/src/ui/_common_/statusbar-user-list.vue
rename to packages/client/src/ui/common/StatusbarUserList.vue
index 5ef771e19..40f2d502e 100644
--- a/packages/client/src/ui/_common_/statusbar-user-list.vue
+++ b/packages/client/src/ui/common/StatusbarUserList.vue
@@ -13,7 +13,7 @@
 							:src="note.user.avatarUrl"
 							decoding="async"
 						/>
-						<MkA class="text" :to="notePage(note)">
+						<A class="text" :to="notePage(note)">
 							<Mfm
 								class="text"
 								:text="getNoteSummary(note)"
@@ -21,7 +21,7 @@
 								:nowrap="true"
 								:custom-emojis="note.emojis"
 							/>
-						</MkA>
+						</A>
 						<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/MkMarquee.vue";
+import MarqueeText from "@/components/Marquee.vue";
 import * as os from "@/os";
 import { useInterval } from "@/scripts/use-interval";
 import { getNoteSummary } from "@/scripts/get-note-summary";
@@ -81,10 +81,12 @@ 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 830f9f570..40df5e7a0 100644
--- a/packages/client/src/ui/_common_/statusbars.vue
+++ b/packages/client/src/ui/common/Statusbars.vue
@@ -52,13 +52,11 @@
 import { computed, defineAsyncComponent, ref, toRef, watch } from "vue";
 import * as os from "@/os";
 import { defaultStore } from "@/store";
-const XRss = defineAsyncComponent(() => import("./statusbar-rss.vue"));
+const XRss = defineAsyncComponent(() => import("./StatusbarRss.vue"));
 const XFederation = defineAsyncComponent(
-	() => import("./statusbar-federation.vue"),
-);
-const XUserList = defineAsyncComponent(
-	() => import("./statusbar-user-list.vue"),
+	() => import("./StatusbarFederation.vue"),
 );
+const XUserList = defineAsyncComponent(() => import("./StatusbarUserList.vue"));
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/ui/_common_/stream-indicator.vue b/packages/client/src/ui/common/StreamIndicator.vue
similarity index 100%
rename from packages/client/src/ui/_common_/stream-indicator.vue
rename to packages/client/src/ui/common/StreamIndicator.vue
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 01b882c2c..25499824e 100644
--- a/packages/client/src/ui/_common_/upload.vue
+++ b/packages/client/src/ui/common/Upload.vue
@@ -15,8 +15,9 @@
 						<span
 							v-if="ctx.progressValue === undefined"
 							class="initing"
-							>{{ i18n.ts.waiting }}<MkEllipsis
-						/></span>
+							>{{ i18n.ts.waiting }}
+							<Ellipsis />
+						</span>
 						<span v-if="ctx.progressValue !== undefined" class="kb"
 							>{{
 								String(
@@ -75,15 +76,18 @@ 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;
@@ -96,11 +100,13 @@ 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;
@@ -109,11 +115,13 @@ 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;
@@ -124,9 +132,11 @@ 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;
@@ -134,18 +144,23 @@ 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;
@@ -158,9 +173,11 @@ 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/_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/deck/antenna-column.vue b/packages/client/src/ui/deck/AntennaColumn.vue
similarity index 94%
rename from packages/client/src/ui/deck/antenna-column.vue
rename to packages/client/src/ui/deck/AntennaColumn.vue
index 8e3001738..4f0a1647e 100644
--- a/packages/client/src/ui/deck/antenna-column.vue
+++ b/packages/client/src/ui/deck/AntennaColumn.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/MkTimeline.vue";
+import XTimeline from "@/components/Timeline.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 
diff --git a/packages/client/src/ui/deck/channel-column.vue b/packages/client/src/ui/deck/ChannelColumn.vue
similarity index 94%
rename from packages/client/src/ui/deck/channel-column.vue
rename to packages/client/src/ui/deck/ChannelColumn.vue
index e53290d97..422eac152 100644
--- a/packages/client/src/ui/deck/channel-column.vue
+++ b/packages/client/src/ui/deck/ChannelColumn.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/MkTimeline.vue";
+import XTimeline from "@/components/Timeline.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 
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/column-core.vue b/packages/client/src/ui/deck/ColumnCore.vue
similarity index 79%
rename from packages/client/src/ui/deck/column-core.vue
rename to packages/client/src/ui/deck/ColumnCore.vue
index 4c3c93734..b3db70918 100644
--- a/packages/client/src/ui/deck/column-core.vue
+++ b/packages/client/src/ui/deck/ColumnCore.vue
@@ -59,15 +59,15 @@
 
 <script lang="ts" setup>
 import {} from "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 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 type { Column } from "./deck-store";
 
 defineProps<{
diff --git a/packages/client/src/ui/deck/direct-column.vue b/packages/client/src/ui/deck/DirectColumn.vue
similarity index 89%
rename from packages/client/src/ui/deck/direct-column.vue
rename to packages/client/src/ui/deck/DirectColumn.vue
index 5973cbe37..5dc61a48d 100644
--- a/packages/client/src/ui/deck/direct-column.vue
+++ b/packages/client/src/ui/deck/DirectColumn.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/MkNotes.vue";
+import XNotes from "@/components/Notes.vue";
 
 defineProps<{
 	column: Column;
diff --git a/packages/client/src/ui/deck/list-column.vue b/packages/client/src/ui/deck/ListColumn.vue
similarity index 94%
rename from packages/client/src/ui/deck/list-column.vue
rename to packages/client/src/ui/deck/ListColumn.vue
index 110258f0e..2cd8733e6 100644
--- a/packages/client/src/ui/deck/list-column.vue
+++ b/packages/client/src/ui/deck/ListColumn.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/MkTimeline.vue";
+import XTimeline from "@/components/Timeline.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 
diff --git a/packages/client/src/ui/deck/main-column.vue b/packages/client/src/ui/deck/MainColumn.vue
similarity index 98%
rename from packages/client/src/ui/deck/main-column.vue
rename to packages/client/src/ui/deck/MainColumn.vue
index b284f9073..c7edff391 100644
--- a/packages/client/src/ui/deck/main-column.vue
+++ b/packages/client/src/ui/deck/MainColumn.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/mentions-column.vue b/packages/client/src/ui/deck/MentionsColumn.vue
similarity index 88%
rename from packages/client/src/ui/deck/mentions-column.vue
rename to packages/client/src/ui/deck/MentionsColumn.vue
index 08e11dd21..4dc7c3595 100644
--- a/packages/client/src/ui/deck/mentions-column.vue
+++ b/packages/client/src/ui/deck/MentionsColumn.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/MkNotes.vue";
+import XNotes from "@/components/Notes.vue";
 
 defineProps<{
 	column: Column;
diff --git a/packages/client/src/ui/deck/notifications-column.vue b/packages/client/src/ui/deck/NotificationsColumn.vue
similarity index 87%
rename from packages/client/src/ui/deck/notifications-column.vue
rename to packages/client/src/ui/deck/NotificationsColumn.vue
index 37cbe30a7..6e2fa21ef 100644
--- a/packages/client/src/ui/deck/notifications-column.vue
+++ b/packages/client/src/ui/deck/NotificationsColumn.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/MkNotifications.vue";
+import XNotifications from "@/components/Notifications.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/MkNotificationSettingWindow.vue"),
+			() => import("@/components/NotificationSettingWindow.vue"),
 		),
 		{
 			includingTypes: props.column.includingTypes,
diff --git a/packages/client/src/ui/deck/tl-column.vue b/packages/client/src/ui/deck/TimelineColumn.vue
similarity index 97%
rename from packages/client/src/ui/deck/tl-column.vue
rename to packages/client/src/ui/deck/TimelineColumn.vue
index c419b0469..300b36e93 100644
--- a/packages/client/src/ui/deck/tl-column.vue
+++ b/packages/client/src/ui/deck/TimelineColumn.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/MkTimeline.vue";
+import XTimeline from "@/components/Timeline.vue";
 import * as os from "@/os";
 import { $i } from "@/account";
 import { instance } from "@/instance";
diff --git a/packages/client/src/ui/deck/widgets-column.vue b/packages/client/src/ui/deck/WidgetsColumn.vue
similarity index 95%
rename from packages/client/src/ui/deck/widgets-column.vue
rename to packages/client/src/ui/deck/WidgetsColumn.vue
index d5762b539..63d76f502 100644
--- a/packages/client/src/ui/deck/widgets-column.vue
+++ b/packages/client/src/ui/deck/WidgetsColumn.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/MkWidgets.vue";
+import XWidgets from "@/components/Widgets.vue";
 import { i18n } from "@/i18n";
 
 const props = defineProps<{
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 a755b3789..6b262c208 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
-						><MkA to="/">{{ host }}</MkA></b
+						><A to="/">{{ host }}</A></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 MkPagination from "@/components/MkPagination.vue";
-import MkButton from "@/components/MkButton.vue";
+import Pagination from "@/components/Pagination.vue";
+import Button from "@/components/Button.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,
-		MkPagination,
-		MkButton,
+		Pagination,
+		Button,
 	},
 
 	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 5131a7117..d033d1ca2 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
-						><MkA to="/">{{ host }}</MkA></b
+						><A to="/">{{ host }}</A></b
 					>
 					<small
 						>Powered by
@@ -37,27 +37,31 @@
 
 		<transition :name="$store.state.animation ? 'tray' : ''">
 			<div v-if="showMenu" class="menu">
-				<MkA to="/" class="link" active-class="active"
+				<A to="/" class="link" active-class="active"
 					><i class="ph-house ph-bold ph-lg icon"></i
-					>{{ i18n.ts.home }}</MkA
+					>{{ i18n.ts.home }}</A
 				>
-				<MkA to="/explore" class="link" active-class="active"
+				<A to="/explore" class="link" active-class="active"
 					><i class="ph-compass ph-bold ph-lg icon"></i
-					>{{ i18n.ts.explore }}</MkA
+					>{{ i18n.ts.explore }}</A
 				>
-				<MkA to="/channels" class="link" active-class="active"
+				<A to="/channels" class="link" active-class="active"
 					><i class="ph-television ph-bold ph-lg icon"></i
-					>{{ i18n.ts.channel }}</MkA
+					>{{ i18n.ts.channel }}</A
 				>
-				<MkA to="/pages" class="link" active-class="active"
+				<A to="/pages" class="link" active-class="active"
 					><i class="ph-file-text ph-bold ph-lg icon"></i
-					>{{ i18n.ts.pages }}</MkA
+					>{{ i18n.ts.pages }}</A
 				>
-				<MkA to="/gallery" class="link" active-class="active"
+				<A to="/gallery" class="link" active-class="active"
 					><i class="ph-image-square ph-bold ph-lg icon"></i
-					>{{ i18n.ts.gallery }}</MkA
+					>{{ i18n.ts.gallery }}</A
+				>
+				<button
+					class="_button link"
+					active-class="active"
+					@click="search()"
 				>
-				<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>
@@ -77,16 +81,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 MkPagination from "@/components/MkPagination.vue";
-import XSigninDialog from "@/components/MkSigninDialog.vue";
-import XSignupDialog from "@/components/MkSignupDialog.vue";
-import MkButton from "@/components/MkButton.vue";
+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 { ColdDeviceStorage, defaultStore } from "@/store";
 import { mainRouter } from "@/router";
 import type { PageMetadata } from "@/scripts/page-metadata";
@@ -185,6 +189,7 @@ 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;
@@ -196,6 +201,7 @@ 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 feba0b2c0..b3814635f 100644
--- a/packages/client/src/ui/visitor/header.vue
+++ b/packages/client/src/ui/visitor/Header.vue
@@ -2,42 +2,46 @@
 	<div class="sqxihjet">
 		<div v-if="narrow === false" class="wide">
 			<div class="content">
-				<MkA to="/" class="link" active-class="active"
+				<A to="/" class="link" active-class="active"
 					><i class="ph-house ph-bold ph-lg icon"></i
-					>{{ i18n.ts.home }}</MkA
+					>{{ i18n.ts.home }}</A
 				>
-				<!-- <MkA
+				<!-- <A
 					v-if="isTimelineAvailable"
 					to="/timeline"
 					class="link"
 					active-class="active"
 					><i class="ph-chats-circle ph-bold ph-lg icon"></i
-					>{{ i18n.ts.timeline }}</MkA
+					>{{ i18n.ts.timeline }}</A
 				> -->
-				<MkA to="/explore" class="link" active-class="active"
+				<A to="/explore" class="link" active-class="active"
 					><i class="ph-compass ph-bold ph-lg icon"></i
-					>{{ i18n.ts.explore }}</MkA
+					>{{ i18n.ts.explore }}</A
 				>
-				<MkA to="/channels" class="link" active-class="active"
+				<A to="/channels" class="link" active-class="active"
 					><i class="ph-television ph-bold ph-lg icon"></i
-					>{{ i18n.ts.channel }}</MkA
+					>{{ i18n.ts.channel }}</A
 				>
-				<MkA to="/pages" class="link" active-class="active"
+				<A to="/pages" class="link" active-class="active"
 					><i class="ph-file-text ph-bold ph-lg icon"></i
-					>{{ i18n.ts.pages }}</MkA
+					>{{ i18n.ts.pages }}</A
 				>
-				<MkA to="/gallery" class="link" active-class="active"
+				<A to="/gallery" class="link" active-class="active"
 					><i class="ph-image-square ph-bold ph-lg icon"></i
-					>{{ i18n.ts.gallery }}</MkA
+					>{{ i18n.ts.gallery }}</A
+				>
+				<button
+					class="_button link"
+					active-class="active"
+					@click="search()"
 				>
-				<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>
-						<MkAvatar
+						<Avatar
 							v-else-if="info.avatar"
 							class="avatar"
 							:user="info.avatar"
@@ -47,7 +51,7 @@
 						<span v-if="info.title" class="text">{{
 							info.title
 						}}</span>
-						<MkUserName
+						<UserName
 							v-else-if="info.userName"
 							:user="info.userName"
 							:nowrap="false"
@@ -78,7 +82,7 @@
 			</button>
 			<div v-if="info" class="title">
 				<i v-if="info.icon" class="icon" :class="info.icon"></i>
-				<MkAvatar
+				<Avatar
 					v-else-if="info.avatar"
 					class="avatar"
 					:user="info.avatar"
@@ -86,7 +90,7 @@
 					:show-indicator="true"
 				/>
 				<span v-if="info.title" class="text">{{ info.title }}</span>
-				<MkUserName
+				<UserName
 					v-else-if="info.userName"
 					:user="info.userName"
 					:nowrap="false"
@@ -106,8 +110,8 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import XSigninDialog from "@/components/MkSigninDialog.vue";
-import XSignupDialog from "@/components/MkSignupDialog.vue";
+import XSigninDialog from "@/components/SigninDialog.vue";
+import XSignupDialog from "@/components/SignupDialog.vue";
 import * as os from "@/os";
 import { instance } from "@/instance";
 import { search } from "@/scripts/search";
@@ -198,11 +202,11 @@ export default defineComponent({
 				&.page {
 					border-bottom-color: var(--accent);
 				}
-				
+
 				&._button {
 					text-decoration: underline;
 					text-decoration-color: transparent;
-					transition: text-decoration-color .2s;
+					transition: text-decoration-color 0.2s;
 
 					&:hover {
 						text-decoration-color: currentColor;
@@ -252,6 +256,7 @@ 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 1f672b8be..8204803d6 100644
--- a/packages/client/src/ui/visitor/kanban.vue
+++ b/packages/client/src/ui/visitor/Kanban.vue
@@ -11,15 +11,13 @@
 		<div class="contents">
 			<div class="wrapper">
 				<h1 v-if="meta" :class="{ full }">
-					<MkA to="/" class="link"
+					<A to="/" class="link"
 						><img
 							v-if="meta.logoImageUrl"
 							class="logo"
 							:src="meta.logoImageUrl"
 							alt="logo"
-						/><span v-else class="text">{{
-							instanceName
-						}}</span></MkA
+						/><span v-else class="text">{{ instanceName }}</span></A
 					>
 				</h1>
 				<template v-if="full">
@@ -39,7 +37,7 @@
 					</div>
 					<div class="announcements panel">
 						<header>{{ i18n.ts.announcements }}</header>
-						<MkPagination
+						<Pagination
 							v-slot="{ items }"
 							:pagination="announcements"
 							class="list"
@@ -61,11 +59,11 @@
 									/>
 								</div>
 							</section>
-						</MkPagination>
+						</Pagination>
 					</div>
 					<div v-if="poweredBy" class="powered-by">
 						<b
-							><MkA to="/">{{ host }}</MkA></b
+							><A to="/">{{ host }}</A></b
 						>
 						<small
 							>Powered by
@@ -84,16 +82,16 @@
 import { defineAsyncComponent, defineComponent } from "vue";
 import { host, instanceName } from "@/config";
 import * as os from "@/os";
-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 Pagination from "@/components/Pagination.vue";
+import XSigninDialog from "@/components/SigninDialog.vue";
+import XSignupDialog from "@/components/SignupDialog.vue";
+import Button from "@/components/Button.vue";
 import { i18n } from "@/i18n";
 
 export default defineComponent({
 	components: {
-		MkPagination,
-		MkButton,
+		Pagination,
+		Button,
 	},
 
 	props: {
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 beeba81d7..3b7371d61 100644
--- a/packages/client/src/widgets/activity.vue
+++ b/packages/client/src/widgets/Activity.vue
@@ -1,5 +1,5 @@
 <template>
-	<MkContainer
+	<Container
 		:show-header="widgetProps.showHeader"
 		:naked="widgetProps.transparent"
 		class="mkw-activity"
@@ -18,10 +18,10 @@
 		></template>
 
 		<div v-if="widgetProps.newStyle">
-			<MkHeatmap src="my-notes" />
+			<Heatmap src="my-notes" />
 		</div>
 		<div v-else>
-			<MkLoading v-if="fetching" />
+			<Loading v-if="fetching" />
 			<template v-else>
 				<XCalendar
 					v-show="widgetProps.view === 0"
@@ -33,7 +33,7 @@
 				/>
 			</template>
 		</div>
-	</MkContainer>
+	</Container>
 </template>
 
 <script lang="ts" setup>
@@ -44,12 +44,12 @@ import {
 	WidgetComponentProps,
 	useWidgetPropsManager,
 } from "./widget";
-import XCalendar from "./activity.calendar.vue";
-import XChart from "./activity.chart.vue";
-import MkHeatmap from "@/components/MkHeatmap.vue";
+import XCalendar from "./ActivityCalendar.vue";
+import XChart from "./ActivityChart.vue";
+import Heatmap from "@/components/Heatmap.vue";
 import type { GetFormResultType } from "@/scripts/form";
 import * as os from "@/os";
-import MkContainer from "@/components/MkContainer.vue";
+import Container from "@/components/Container.vue";
 import { $i } from "@/account";
 import { i18n } from "@/i18n";
 
diff --git a/packages/client/src/widgets/activity.calendar.vue b/packages/client/src/widgets/ActivityCalendar.vue
similarity index 100%
rename from packages/client/src/widgets/activity.calendar.vue
rename to packages/client/src/widgets/ActivityCalendar.vue
diff --git a/packages/client/src/widgets/activity.chart.vue b/packages/client/src/widgets/ActivityChart.vue
similarity index 100%
rename from packages/client/src/widgets/activity.chart.vue
rename to packages/client/src/widgets/ActivityChart.vue
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 ac1472da1..37bb3bbf5 100644
--- a/packages/client/src/widgets/aiscript.vue
+++ b/packages/client/src/widgets/Aiscript.vue
@@ -1,5 +1,5 @@
 <template>
-	<MkContainer :show-header="widgetProps.showHeader" class="mkw-aiscript">
+	<Container :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>
-	</MkContainer>
+	</Container>
 </template>
 
 <script lang="ts" setup>
@@ -36,7 +36,7 @@ import {
 } from "./widget";
 import type { GetFormResultType } from "@/scripts/form";
 import * as os from "@/os";
-import MkContainer from "@/components/MkContainer.vue";
+import Container from "@/components/Container.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 b9378e0ea..04b70f188 100644
--- a/packages/client/src/widgets/button.vue
+++ b/packages/client/src/widgets/Button.vue
@@ -1,8 +1,8 @@
 <template>
 	<div class="mkw-button">
-		<MkButton :primary="widgetProps.colored" full @click="run">
+		<Button :primary="widgetProps.colored" full @click="run">
 			{{ widgetProps.label }}
-		</MkButton>
+		</Button>
 	</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 MkButton from "@/components/MkButton.vue";
+import Button from "@/components/Button.vue";
 
 const name = "button";
 
@@ -35,7 +35,7 @@ const widgetPropsDef = {
 	script: {
 		type: "string" as const,
 		multiline: true,
-		default: 'Mk:dialog("hello" "world")',
+		default: ':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 d1a6385b3..1de60fb04 100644
--- a/packages/client/src/widgets/clock.vue
+++ b/packages/client/src/widgets/Clock.vue
@@ -1,5 +1,5 @@
 <template>
-	<MkContainer
+	<Container
 		:naked="widgetProps.transparent"
 		:show-header="false"
 		class="mkw-clock"
@@ -14,7 +14,7 @@
 			>
 				{{ tzAbbrev }}
 			</div>
-			<MkAnalogClock
+			<AnalogClock
 				class="clock"
 				:thickness="widgetProps.thickness"
 				:offset="tzOffset"
@@ -23,7 +23,7 @@
 				:twentyfour="widgetProps.twentyFour"
 				:s-animation="widgetProps.sAnimation"
 			/>
-			<MkDigitalClock
+			<DigitalClock
 				v-if="
 					widgetProps.label === 'time' ||
 					widgetProps.label === 'timeAndTz'
@@ -42,7 +42,7 @@
 				{{ tzOffsetLabel }}
 			</div>
 		</div>
-	</MkContainer>
+	</Container>
 </template>
 
 <script lang="ts" setup>
@@ -54,9 +54,9 @@ import {
 	useWidgetPropsManager,
 } from "./widget";
 import type { GetFormResultType } from "@/scripts/form";
-import MkContainer from "@/components/MkContainer.vue";
-import MkAnalogClock from "@/components/MkAnalogClock.vue";
-import MkDigitalClock from "@/components/MkDigitalClock.vue";
+import Container from "@/components/Container.vue";
+import AnalogClock from "@/components/AnalogClock.vue";
+import DigitalClock from "@/components/DigitalClock.vue";
 import { timezones } from "@/scripts/timezones";
 import { i18n } from "@/i18n";
 
diff --git a/packages/client/src/widgets/digital-clock.vue b/packages/client/src/widgets/DigitalClock.vue
similarity index 95%
rename from packages/client/src/widgets/digital-clock.vue
rename to packages/client/src/widgets/DigitalClock.vue
index 9b16a62de..b22431d39 100644
--- a/packages/client/src/widgets/digital-clock.vue
+++ b/packages/client/src/widgets/DigitalClock.vue
@@ -6,7 +6,7 @@
 	>
 		<div v-if="widgetProps.showLabel" class="label">{{ tzAbbrev }}</div>
 		<div class="time">
-			<MkDigitalClock :show-ms="widgetProps.showMs" :offset="tzOffset" />
+			<DigitalClock :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 MkDigitalClock from "@/components/MkDigitalClock.vue";
+import DigitalClock from "@/components/DigitalClock.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 a8e121519..6af8fddd8 100644
--- a/packages/client/src/widgets/federation.vue
+++ b/packages/client/src/widgets/Federation.vue
@@ -1,5 +1,5 @@
 <template>
-	<MkContainer
+	<Container
 		:show-header="widgetProps.showHeader"
 		:foldable="foldable"
 		:scrollable="scrollable"
@@ -11,7 +11,7 @@
 		>
 
 		<div class="wbrkwalb">
-			<MkLoading v-if="fetching" />
+			<Loading v-if="fetching" />
 			<transition-group
 				v-else
 				tag="div"
@@ -37,14 +37,14 @@
 							{{ instance.softwareVersion }}
 						</p>
 					</div>
-					<MkMiniChart
+					<MiniChart
 						class="chart"
 						:src="charts[i].requests.received"
 					/>
 				</div>
 			</transition-group>
 		</div>
-	</MkContainer>
+	</Container>
 </template>
 
 <script lang="ts" setup>
@@ -56,8 +56,8 @@ import {
 	useWidgetPropsManager,
 } from "./widget";
 import type { GetFormResultType } from "@/scripts/form";
-import MkContainer from "@/components/MkContainer.vue";
-import MkMiniChart from "@/components/MkMiniChart.vue";
+import Container from "@/components/Container.vue";
+import MiniChart from "@/components/MiniChart.vue";
 import * as os from "@/os";
 import { useInterval } from "@/scripts/use-interval";
 import { i18n } from "@/i18n";
diff --git a/packages/client/src/widgets/instance-cloud.vue b/packages/client/src/widgets/InstanceCloud.vue
similarity index 89%
rename from packages/client/src/widgets/instance-cloud.vue
rename to packages/client/src/widgets/InstanceCloud.vue
index e42037ed9..9f8bde187 100644
--- a/packages/client/src/widgets/instance-cloud.vue
+++ b/packages/client/src/widgets/InstanceCloud.vue
@@ -1,11 +1,11 @@
 <template>
-	<MkContainer
+	<Container
 		:naked="widgetProps.transparent"
 		:show-header="false"
 		class="mkw-instance-cloud"
 	>
 		<div class="">
-			<MkTagCloud v-if="activeInstances">
+			<TagCloud v-if="activeInstances">
 				<li v-for="instance in activeInstances" :key="instance.id">
 					<a @click.prevent="onInstanceClick(instance)">
 						<img
@@ -14,9 +14,9 @@
 						/>
 					</a>
 				</li>
-			</MkTagCloud>
+			</TagCloud>
 		</div>
-	</MkContainer>
+	</Container>
 </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 MkContainer from "@/components/MkContainer.vue";
-import MkTagCloud from "@/components/MkTagCloud.vue";
+import Container from "@/components/Container.vue";
+import TagCloud from "@/components/TagCloud.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 MkTagCloud> | null>();
+const cloud = $ref<InstanceType<typeof TagCloud> | null>();
 let activeInstances = $shallowRef(null);
 
 function onInstanceClick(i) {
diff --git a/packages/client/src/widgets/job-queue.vue b/packages/client/src/widgets/JobQueue.vue
similarity index 100%
rename from packages/client/src/widgets/job-queue.vue
rename to packages/client/src/widgets/JobQueue.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 78c5ad5a6..c39eb0b28 100644
--- a/packages/client/src/widgets/memo.vue
+++ b/packages/client/src/widgets/Memo.vue
@@ -1,5 +1,5 @@
 <template>
-	<MkContainer :show-header="widgetProps.showHeader" class="mkw-memo">
+	<Container :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>
-	</MkContainer>
+	</Container>
 </template>
 
 <script lang="ts" setup>
@@ -32,7 +32,7 @@ import {
 } from "./widget";
 import type { GetFormResultType } from "@/scripts/form";
 import * as os from "@/os";
-import MkContainer from "@/components/MkContainer.vue";
+import Container from "@/components/Container.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 cc253b5cc..3ef008a11 100644
--- a/packages/client/src/widgets/notifications.vue
+++ b/packages/client/src/widgets/Notifications.vue
@@ -1,5 +1,5 @@
 <template>
-	<MkContainer
+	<Container
 		:style="`height: ${widgetProps.height}px;`"
 		:show-header="widgetProps.showHeader"
 		:scrollable="true"
@@ -26,7 +26,7 @@
 		<div>
 			<XNotifications :include-types="widgetProps.includingTypes" />
 		</div>
-	</MkContainer>
+	</Container>
 </template>
 
 <script lang="ts" setup>
@@ -38,8 +38,8 @@ import {
 	useWidgetPropsManager,
 } from "./widget";
 import type { GetFormResultType } from "@/scripts/form";
-import MkContainer from "@/components/MkContainer.vue";
-import XNotifications from "@/components/MkNotifications.vue";
+import Container from "@/components/Container.vue";
+import XNotifications from "@/components/Notifications.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/MkNotificationSettingWindow.vue"),
+			() => import("@/components/NotificationSettingWindow.vue"),
 		),
 		{
 			includingTypes: widgetProps.includingTypes,
diff --git a/packages/client/src/widgets/online-users.vue b/packages/client/src/widgets/OnlineUsers.vue
similarity index 100%
rename from packages/client/src/widgets/online-users.vue
rename to packages/client/src/widgets/OnlineUsers.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 3a0130624..cf15a8078 100644
--- a/packages/client/src/widgets/photos.vue
+++ b/packages/client/src/widgets/Photos.vue
@@ -1,5 +1,5 @@
 <template>
-	<MkContainer
+	<Container
 		:show-header="widgetProps.showHeader"
 		:naked="widgetProps.transparent"
 		:class="$style.root"
@@ -12,7 +12,7 @@
 		>
 
 		<div class="">
-			<MkLoading v-if="fetching" />
+			<Loading v-if="fetching" />
 			<div v-else :class="$style.stream">
 				<div
 					v-for="(image, i) in images"
@@ -22,7 +22,7 @@
 				></div>
 			</div>
 		</div>
-	</MkContainer>
+	</Container>
 </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 MkContainer from "@/components/MkContainer.vue";
+import Container from "@/components/Container.vue";
 import { defaultStore } from "@/store";
 import { i18n } from "@/i18n";
 
diff --git a/packages/client/src/widgets/post-form.vue b/packages/client/src/widgets/PostForm.vue
similarity index 95%
rename from packages/client/src/widgets/post-form.vue
rename to packages/client/src/widgets/PostForm.vue
index e76d6ba6f..8b2bb652b 100644
--- a/packages/client/src/widgets/post-form.vue
+++ b/packages/client/src/widgets/PostForm.vue
@@ -16,7 +16,7 @@ import {
 	useWidgetPropsManager,
 } from "./widget";
 import type { GetFormResultType } from "@/scripts/form";
-import XPostForm from "@/components/MkPostForm.vue";
+import XPostForm from "@/components/PostForm.vue";
 
 const name = "postForm";
 
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 9ba99e2d2..96b8dd75c 100644
--- a/packages/client/src/widgets/rss.vue
+++ b/packages/client/src/widgets/Rss.vue
@@ -1,5 +1,5 @@
 <template>
-	<MkContainer
+	<Container
 		:show-header="widgetProps.showHeader"
 		class="mkw-rss"
 		:scrollable="true"
@@ -12,7 +12,7 @@
 		></template>
 
 		<div class="ekmkgxbj">
-			<MkLoading v-if="fetching" />
+			<Loading v-if="fetching" />
 			<div v-else class="feed">
 				<a
 					v-for="item in items"
@@ -25,7 +25,7 @@
 				>
 			</div>
 		</div>
-	</MkContainer>
+	</Container>
 </template>
 
 <script lang="ts" setup>
@@ -38,7 +38,7 @@ import {
 } from "./widget";
 import type { GetFormResultType } from "@/scripts/form";
 import * as os from "@/os";
-import MkContainer from "@/components/MkContainer.vue";
+import Container from "@/components/Container.vue";
 import { useInterval } from "@/scripts/use-interval";
 
 const name = "rss";
diff --git a/packages/client/src/widgets/rss-ticker.vue b/packages/client/src/widgets/RssTicker.vue
similarity index 95%
rename from packages/client/src/widgets/rss-ticker.vue
rename to packages/client/src/widgets/RssTicker.vue
index bb696a7ca..365ff8d88 100644
--- a/packages/client/src/widgets/rss-ticker.vue
+++ b/packages/client/src/widgets/RssTicker.vue
@@ -1,5 +1,5 @@
 <template>
-	<MkContainer
+	<Container
 		:naked="widgetProps.transparent"
 		:show-header="widgetProps.showHeader"
 		class="mkw-rss-ticker"
@@ -11,7 +11,7 @@
 		></template>
 
 		<div class="ekmkgxbk">
-			<MkLoading v-if="fetching" />
+			<Loading v-if="fetching" />
 			<div v-else class="feed">
 				<transition name="change" mode="default">
 					<MarqueeText
@@ -33,7 +33,7 @@
 				</transition>
 			</div>
 		</div>
-	</MkContainer>
+	</Container>
 </template>
 
 <script lang="ts" setup>
@@ -44,10 +44,10 @@ import {
 	WidgetComponentProps,
 	useWidgetPropsManager,
 } from "./widget";
-import MarqueeText from "@/components/MkMarquee.vue";
+import MarqueeText from "@/components/Marquee.vue";
 import type { GetFormResultType } from "@/scripts/form";
 import * as os from "@/os";
-import MkContainer from "@/components/MkContainer.vue";
+import Container from "@/components/Container.vue";
 import { useInterval } from "@/scripts/use-interval";
 import { shuffle } from "@/scripts/shuffle";
 
@@ -140,10 +140,12 @@ 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/server-info.vue b/packages/client/src/widgets/ServerInfo.vue
similarity index 96%
rename from packages/client/src/widgets/server-info.vue
rename to packages/client/src/widgets/ServerInfo.vue
index 7b2b63d2a..75fcdde31 100644
--- a/packages/client/src/widgets/server-info.vue
+++ b/packages/client/src/widgets/ServerInfo.vue
@@ -19,9 +19,9 @@
 			</div>
 			<div :class="$style.bodyContainer">
 				<div :class="$style.body">
-					<MkA :class="$style.name" to="/about" behavior="window">{{
+					<A :class="$style.name" to="/about" behavior="window">{{
 						$instance.name
-					}}</MkA>
+					}}</A>
 					<div :class="$style.host">{{ host }}</div>
 				</div>
 			</div>
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 8ff30d299..9fd10aac2 100644
--- a/packages/client/src/widgets/timeline.vue
+++ b/packages/client/src/widgets/Timeline.vue
@@ -1,5 +1,5 @@
 <template>
-	<MkContainer
+	<Container
 		:show-header="widgetProps.showHeader"
 		:style="`height: ${widgetProps.height}px;`"
 		:scrollable="true"
@@ -63,7 +63,7 @@
 				:antenna="widgetProps.antenna ? widgetProps.antenna.id : null"
 			/>
 		</div>
-	</MkContainer>
+	</Container>
 </template>
 
 <script lang="ts" setup>
@@ -76,8 +76,8 @@ import {
 } from "./widget";
 import type { GetFormResultType } from "@/scripts/form";
 import * as os from "@/os";
-import MkContainer from "@/components/MkContainer.vue";
-import XTimeline from "@/components/MkTimeline.vue";
+import Container from "@/components/Container.vue";
+import XTimeline from "@/components/Timeline.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 52b068127..391bc6cf7 100644
--- a/packages/client/src/widgets/trends.vue
+++ b/packages/client/src/widgets/Trends.vue
@@ -1,12 +1,12 @@
 <template>
-	<MkContainer :show-header="widgetProps.showHeader" class="mkw-trends">
+	<Container :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">
-			<MkLoading v-if="fetching" />
+			<Loading 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">
-						<MkA
+						<A
 							class="a"
 							:to="`/tags/${encodeURIComponent(stat.tag)}`"
 							:title="stat.tag"
-							>#{{ stat.tag }}</MkA
+							>#{{ stat.tag }}</A
 						>
 						<p>
 							{{
@@ -29,11 +29,11 @@
 							}}
 						</p>
 					</div>
-					<MkMiniChart class="chart" :src="stat.chart" />
+					<MiniChart class="chart" :src="stat.chart" />
 				</div>
 			</transition-group>
 		</div>
-	</MkContainer>
+	</Container>
 </template>
 
 <script lang="ts" setup>
@@ -45,8 +45,8 @@ import {
 	useWidgetPropsManager,
 } from "./widget";
 import type { GetFormResultType } from "@/scripts/form";
-import MkContainer from "@/components/MkContainer.vue";
-import MkMiniChart from "@/components/MkMiniChart.vue";
+import Container from "@/components/Container.vue";
+import MiniChart from "@/components/MiniChart.vue";
 import * as os from "@/os";
 import { useInterval } from "@/scripts/use-interval";
 import { i18n } from "@/i18n";
diff --git a/packages/client/src/widgets/unix-clock.vue b/packages/client/src/widgets/UnixClock.vue
similarity index 100%
rename from packages/client/src/widgets/unix-clock.vue
rename to packages/client/src/widgets/UnixClock.vue
diff --git a/packages/client/src/widgets/user-list.vue b/packages/client/src/widgets/UserList.vue
similarity index 86%
rename from packages/client/src/widgets/user-list.vue
rename to packages/client/src/widgets/UserList.vue
index 45cdad00e..a90d05228 100644
--- a/packages/client/src/widgets/user-list.vue
+++ b/packages/client/src/widgets/UserList.vue
@@ -1,5 +1,5 @@
 <template>
-	<MkContainer :show-header="widgetProps.showHeader" class="mkw-userList">
+	<Container :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">
-				<MkButton primary @click="chooseList">{{
+				<Button primary @click="chooseList">{{
 					i18n.ts._widgets._userList.chooseList
-				}}</MkButton>
+				}}</Button>
 			</div>
-			<MkLoading v-else-if="fetching" />
+			<Loading v-else-if="fetching" />
 			<div v-else class="users">
-				<MkAvatars :user-ids="users" class="userAvatars" />
+				<Avatars :user-ids="users" class="userAvatars" />
 			</div>
 		</div>
-	</MkContainer>
+	</Container>
 </template>
 
 <script lang="ts" setup>
 import type { Widget, WidgetComponentExpose } from "./widget";
 import { useWidgetPropsManager } from "./widget";
 import type { GetFormResultType } from "@/scripts/form";
-import MkContainer from "@/components/MkContainer.vue";
-import MkAvatars from "@/components/MkAvatars.vue";
+import Container from "@/components/Container.vue";
+import Avatars from "@/components/Avatars.vue";
 import * as os from "@/os";
 import { useInterval } from "@/scripts/use-interval";
 import { i18n } from "@/i18n";
-import MkButton from "@/components/MkButton.vue";
+import Button from "@/components/Button.vue";
 
 const name = "userList";
 const widgetPropsDef = {
diff --git a/packages/client/src/widgets/index.ts b/packages/client/src/widgets/index.ts
index 4c48811a9..db2a71b37 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(
-		"MkwMemo",
-		defineAsyncComponent(() => import("./memo.vue")),
+		"wMemo",
+		defineAsyncComponent(() => import("./Memo.vue")),
 	);
 	app.component(
-		"MkwNotifications",
-		defineAsyncComponent(() => import("./notifications.vue")),
+		"wNotifications",
+		defineAsyncComponent(() => import("./Notifications.vue")),
 	);
 	app.component(
-		"MkwTimeline",
-		defineAsyncComponent(() => import("./timeline.vue")),
+		"wTimeline",
+		defineAsyncComponent(() => import("./Timeline.vue")),
 	);
 	app.component(
-		"MkwCalendar",
-		defineAsyncComponent(() => import("./calendar.vue")),
+		"wCalendar",
+		defineAsyncComponent(() => import("./Calendar.vue")),
 	);
 	app.component(
-		"MkwRss",
-		defineAsyncComponent(() => import("./rss.vue")),
+		"wRss",
+		defineAsyncComponent(() => import("./Rss.vue")),
 	);
 	app.component(
-		"MkwRssTicker",
-		defineAsyncComponent(() => import("./rss-ticker.vue")),
+		"wRssTicker",
+		defineAsyncComponent(() => import("./RssTicker.vue")),
 	);
 	app.component(
-		"MkwTrends",
-		defineAsyncComponent(() => import("./trends.vue")),
+		"wTrends",
+		defineAsyncComponent(() => import("./Trends.vue")),
 	);
 	app.component(
-		"MkwClock",
-		defineAsyncComponent(() => import("./clock.vue")),
+		"wClock",
+		defineAsyncComponent(() => import("./Clock.vue")),
 	);
 	app.component(
-		"MkwActivity",
-		defineAsyncComponent(() => import("./activity.vue")),
+		"wActivity",
+		defineAsyncComponent(() => import("./Activity.vue")),
 	);
 	app.component(
-		"MkwPhotos",
-		defineAsyncComponent(() => import("./photos.vue")),
+		"wPhotos",
+		defineAsyncComponent(() => import("./Photos.vue")),
 	);
 	app.component(
-		"MkwDigitalClock",
-		defineAsyncComponent(() => import("./digital-clock.vue")),
+		"wDigitalClock",
+		defineAsyncComponent(() => import("./DigitalClock.vue")),
 	);
 	app.component(
-		"MkwUnixClock",
-		defineAsyncComponent(() => import("./unix-clock.vue")),
+		"wUnixClock",
+		defineAsyncComponent(() => import("./UnixClock.vue")),
 	);
 	app.component(
-		"MkwFederation",
-		defineAsyncComponent(() => import("./federation.vue")),
+		"wFederation",
+		defineAsyncComponent(() => import("./Federation.vue")),
 	);
 	app.component(
-		"MkwPostForm",
-		defineAsyncComponent(() => import("./post-form.vue")),
+		"wPostForm",
+		defineAsyncComponent(() => import("./PostForm.vue")),
 	);
 	app.component(
-		"MkwSlideshow",
-		defineAsyncComponent(() => import("./slideshow.vue")),
+		"wSlideshow",
+		defineAsyncComponent(() => import("./Slideshow.vue")),
 	);
 	app.component(
-		"MkwServerMetric",
-		defineAsyncComponent(() => import("./server-metric/index.vue")),
+		"wServerMetric",
+		defineAsyncComponent(() => import("./server-metric/Index.vue")),
 	);
 	app.component(
-		"MkwOnlineUsers",
-		defineAsyncComponent(() => import("./online-users.vue")),
+		"wOnlineUsers",
+		defineAsyncComponent(() => import("./OnlineUsers.vue")),
 	);
 	app.component(
-		"MkwJobQueue",
-		defineAsyncComponent(() => import("./job-queue.vue")),
+		"wJobQueue",
+		defineAsyncComponent(() => import("./JobQueue.vue")),
 	);
 	app.component(
-		"MkwInstanceCloud",
-		defineAsyncComponent(() => import("./instance-cloud.vue")),
+		"wInstanceCloud",
+		defineAsyncComponent(() => import("./InstanceCloud.vue")),
 	);
 	app.component(
-		"MkwButton",
-		defineAsyncComponent(() => import("./button.vue")),
+		"wButton",
+		defineAsyncComponent(() => import("./Button.vue")),
 	);
 	app.component(
-		"MkwAiscript",
-		defineAsyncComponent(() => import("./aiscript.vue")),
+		"wAiscript",
+		defineAsyncComponent(() => import("./Aiscript.vue")),
 	);
 	app.component(
-		"MkwUserList",
-		defineAsyncComponent(() => import("./user-list.vue")),
+		"wUserList",
+		defineAsyncComponent(() => import("./UserList.vue")),
 	);
 	app.component(
-		"MkwServerInfo",
-		defineAsyncComponent(() => import("./server-info.vue")),
+		"wServerInfo",
+		defineAsyncComponent(() => import("./ServerInfo.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 46843363b..2250e397b 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/cpu-mem.vue b/packages/client/src/widgets/server-metric/CpuMem.vue
similarity index 100%
rename from packages/client/src/widgets/server-metric/cpu-mem.vue
rename to packages/client/src/widgets/server-metric/CpuMem.vue
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 67ea398c1..52770379e 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 ce8ddfc96..2cc0bc615 100644
--- a/packages/client/src/widgets/server-metric/index.vue
+++ b/packages/client/src/widgets/server-metric/Index.vue
@@ -1,5 +1,5 @@
 <template>
-	<MkContainer
+	<Container
 		:show-header="widgetProps.showHeader"
 		:naked="widgetProps.transparent"
 	>
@@ -46,7 +46,7 @@
 				:meta="meta"
 			/>
 		</div>
-	</MkContainer>
+	</Container>
 </template>
 
 <script lang="ts" setup>
@@ -57,13 +57,13 @@ import {
 	WidgetComponentProps,
 	useWidgetPropsManager,
 } from "../widget";
-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 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 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 1c3b07fd1..f73fcb99d 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 da7ecd81e..409623ff9 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