diff --git a/.gitignore b/.gitignore
index 5dd72c88fa..bdd900040b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -24,6 +24,9 @@ packages/sw/.yarn/cache
 cypress/screenshots
 cypress/videos
 
+# Coverage
+coverage
+
 # config
 /.config/*
 !/.config/example.yml
diff --git a/packages/client/src/account.ts b/packages/client/src/account.ts
index 243aea68c4..10257b841f 100644
--- a/packages/client/src/account.ts
+++ b/packages/client/src/account.ts
@@ -146,7 +146,7 @@ export async function openAccountMenu(opts: {
 	onChoose?: (account: misskey.entities.UserDetailed) => void;
 }, ev: MouseEvent) {
 	function showSigninDialog() {
-		popup(defineAsyncComponent(() => import('@/components/signin-dialog.vue')), {}, {
+		popup(defineAsyncComponent(() => import('@/components/MkSigninDialog.vue')), {}, {
 			done: res => {
 				addAccount(res.id, res.i);
 				success();
@@ -155,7 +155,7 @@ export async function openAccountMenu(opts: {
 	}
 
 	function createAccount() {
-		popup(defineAsyncComponent(() => import('@/components/signup-dialog.vue')), {}, {
+		popup(defineAsyncComponent(() => import('@/components/MkSignupDialog.vue')), {}, {
 			done: res => {
 				addAccount(res.id, res.i);
 				switchAccountWithToken(res.i);
diff --git a/packages/client/src/components/abuse-report.vue b/packages/client/src/components/MkAbuseReport.vue
similarity index 98%
rename from packages/client/src/components/abuse-report.vue
rename to packages/client/src/components/MkAbuseReport.vue
index 8c25df1107..42bd1af3fb 100644
--- a/packages/client/src/components/abuse-report.vue
+++ b/packages/client/src/components/MkAbuseReport.vue
@@ -38,7 +38,7 @@
 <script lang="ts" setup>
 import MkButton from '@/components/ui/button.vue';
 import MkSwitch from '@/components/form/switch.vue';
-import MkKeyValue from '@/components/key-value.vue';
+import MkKeyValue from '@/components/MkKeyValue.vue';
 import { acct, userPage } from '@/filters/user';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
diff --git a/packages/client/src/components/abuse-report-window.vue b/packages/client/src/components/MkAbuseReportWindow.vue
similarity index 100%
rename from packages/client/src/components/abuse-report-window.vue
rename to packages/client/src/components/MkAbuseReportWindow.vue
diff --git a/packages/client/src/components/analog-clock.vue b/packages/client/src/components/MkAnalogClock.vue
similarity index 95%
rename from packages/client/src/components/analog-clock.vue
rename to packages/client/src/components/MkAnalogClock.vue
index b709a22548..40ef626aed 100644
--- a/packages/client/src/components/analog-clock.vue
+++ b/packages/client/src/components/MkAnalogClock.vue
@@ -40,7 +40,7 @@
 
 	<line
 		class="s"
-		:class="{ animate: !disableSAnimate }"
+		:class="{ animate: !disableSAnimate && sAnimation !== 'none', elastic: sAnimation === 'elastic', easeOut: sAnimation === 'easeOut' }"
 		:x1="5 - (0 * (sHandLengthRatio * handsTailLength))"
 		:y1="5 + (1 * (sHandLengthRatio * handsTailLength))"
 		:x2="5 + (0 * ((sHandLengthRatio * 5) - handsPadding))"
@@ -99,6 +99,7 @@ const props = withDefaults(defineProps<{
 	twentyfour?: boolean;
 	graduations?: 'none' | 'dots' | 'numbers';
 	fadeGraduations?: boolean;
+	sAnimation?: 'none' | 'elastic' | 'easeOut';
 }>(), {
 	numbers: false,
 	thickness: 0.1,
@@ -106,6 +107,7 @@ const props = withDefaults(defineProps<{
 	twentyfour: false,
 	graduations: 'dots',
 	fadeGraduations: true,
+	sAnimation: 'elastic',
 });
 
 const graduationsMajor = computed(() => {
@@ -161,7 +163,7 @@ function tick() {
 					disableSAnimate = false;
 				}, 100);
 			}, 100);
-		}, 500);
+		}, 700);
 	} else {
 		sAngle = Math.PI * s / 30;
 	}
@@ -211,9 +213,13 @@ onBeforeUnmount(() => {
 		will-change: transform;
 		transform-origin: 50% 50%;
 
-		&.animate {
+		&.animate.elastic {
 			transition: transform .2s cubic-bezier(.4,2.08,.55,.44);
 		}
+
+		&.animate.easeOut {
+			transition: transform .7s cubic-bezier(0,.7,.3,1);
+		}
 	}
 }
 </style>
diff --git a/packages/client/src/components/autocomplete.vue b/packages/client/src/components/MkAutocomplete.vue
similarity index 100%
rename from packages/client/src/components/autocomplete.vue
rename to packages/client/src/components/MkAutocomplete.vue
diff --git a/packages/client/src/components/avatars.vue b/packages/client/src/components/MkAvatars.vue
similarity index 100%
rename from packages/client/src/components/avatars.vue
rename to packages/client/src/components/MkAvatars.vue
diff --git a/packages/client/src/components/captcha.vue b/packages/client/src/components/MkCaptcha.vue
similarity index 100%
rename from packages/client/src/components/captcha.vue
rename to packages/client/src/components/MkCaptcha.vue
diff --git a/packages/client/src/components/channel-follow-button.vue b/packages/client/src/components/MkChannelFollowButton.vue
similarity index 100%
rename from packages/client/src/components/channel-follow-button.vue
rename to packages/client/src/components/MkChannelFollowButton.vue
diff --git a/packages/client/src/components/channel-preview.vue b/packages/client/src/components/MkChannelPreview.vue
similarity index 100%
rename from packages/client/src/components/channel-preview.vue
rename to packages/client/src/components/MkChannelPreview.vue
diff --git a/packages/client/src/components/chart.vue b/packages/client/src/components/MkChart.vue
similarity index 100%
rename from packages/client/src/components/chart.vue
rename to packages/client/src/components/MkChart.vue
diff --git a/packages/client/src/components/chart-tooltip.vue b/packages/client/src/components/MkChartTooltip.vue
similarity index 100%
rename from packages/client/src/components/chart-tooltip.vue
rename to packages/client/src/components/MkChartTooltip.vue
diff --git a/packages/client/src/components/code-core.vue b/packages/client/src/components/MkCode.core.vue
similarity index 100%
rename from packages/client/src/components/code-core.vue
rename to packages/client/src/components/MkCode.core.vue
diff --git a/packages/client/src/components/code.vue b/packages/client/src/components/MkCode.vue
similarity index 73%
rename from packages/client/src/components/code.vue
rename to packages/client/src/components/MkCode.vue
index d6478fd2f8..1640258d5b 100644
--- a/packages/client/src/components/code.vue
+++ b/packages/client/src/components/MkCode.vue
@@ -11,5 +11,5 @@ defineProps<{
 	inline?: boolean;
 }>();
 
-const XCode = defineAsyncComponent(() => import('./code-core.vue'));
+const XCode = defineAsyncComponent(() => import('@/components/MkCode.core.vue'));
 </script>
diff --git a/packages/client/src/components/cropper-dialog.vue b/packages/client/src/components/MkCropperDialog.vue
similarity index 100%
rename from packages/client/src/components/cropper-dialog.vue
rename to packages/client/src/components/MkCropperDialog.vue
diff --git a/packages/client/src/components/cw-button.vue b/packages/client/src/components/MkCwButton.vue
similarity index 100%
rename from packages/client/src/components/cw-button.vue
rename to packages/client/src/components/MkCwButton.vue
diff --git a/packages/client/src/components/date-separated-list.vue b/packages/client/src/components/MkDateSeparatedList.vue
similarity index 86%
rename from packages/client/src/components/date-separated-list.vue
rename to packages/client/src/components/MkDateSeparatedList.vue
index 085ef871e0..f63d9782b6 100644
--- a/packages/client/src/components/date-separated-list.vue
+++ b/packages/client/src/components/MkDateSeparatedList.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 import { defineComponent, h, PropType, TransitionGroup } from 'vue';
-import MkAd from '@/components/global/ad.vue';
+import MkAd from '@/components/global/MkAd.vue';
 import { i18n } from '@/i18n';
 import { defaultStore } from '@/store';
 
@@ -13,22 +13,22 @@ export default defineComponent({
 		direction: {
 			type: String,
 			required: false,
-			default: 'down'
+			default: 'down',
 		},
 		reversed: {
 			type: Boolean,
 			required: false,
-			default: false
+			default: false,
 		},
 		noGap: {
 			type: Boolean,
 			required: false,
-			default: false
+			default: false,
 		},
 		ad: {
 			type: Boolean,
 			required: false,
-			default: false
+			default: false,
 		},
 	},
 
@@ -38,7 +38,7 @@ export default defineComponent({
 			const month = new Date(time).getMonth() + 1;
 			return i18n.t('monthAndDay', {
 				month: month.toString(),
-				day: date.toString()
+				day: date.toString(),
 			});
 		}
 
@@ -48,7 +48,7 @@ export default defineComponent({
 			if (!slots || !slots.default) return;
 
 			const el = slots.default({
-				item: item
+				item: item,
 			})[0];
 			if (el.key == null && item.id) el.key = item.id;
 
@@ -60,20 +60,20 @@ export default defineComponent({
 					class: 'separator',
 					key: item.id + ':separator',
 				}, h('p', {
-					class: 'date'
+					class: 'date',
 				}, [
 					h('span', [
 						h('i', {
 							class: 'fas fa-angle-up icon',
 						}),
-						getDateText(item.createdAt)
+						getDateText(item.createdAt),
 					]),
 					h('span', [
 						getDateText(props.items[i + 1].createdAt),
 						h('i', {
 							class: 'fas fa-angle-down icon',
-						})
-					])
+						}),
+					]),
 				]));
 
 				return [el, separator];
@@ -93,16 +93,16 @@ export default defineComponent({
 		return () => h(
 			defaultStore.state.animation ? TransitionGroup : 'div',
 			defaultStore.state.animation ? {
-					class: 'sqadhkmv' + (props.noGap ? ' noGap' : ''),
-					name: 'list',
-					tag: 'div',
-					'data-direction': props.direction,
-					'data-reversed': props.reversed ? 'true' : 'false',
-				} : {
-					class: 'sqadhkmv' + (props.noGap ? ' noGap' : ''),
-				},
+				class: 'sqadhkmv' + (props.noGap ? ' noGap' : ''),
+				name: 'list',
+				tag: 'div',
+				'data-direction': props.direction,
+				'data-reversed': props.reversed ? 'true' : 'false',
+			} : {
+				class: 'sqadhkmv' + (props.noGap ? ' noGap' : ''),
+			},
 			{ default: renderChildren });
-	}
+	},
 });
 </script>
 
diff --git a/packages/client/src/components/dialog.vue b/packages/client/src/components/MkDialog.vue
similarity index 100%
rename from packages/client/src/components/dialog.vue
rename to packages/client/src/components/MkDialog.vue
diff --git a/packages/client/src/components/digital-clock.vue b/packages/client/src/components/MkDigitalClock.vue
similarity index 100%
rename from packages/client/src/components/digital-clock.vue
rename to packages/client/src/components/MkDigitalClock.vue
diff --git a/packages/client/src/components/drive.file.vue b/packages/client/src/components/MkDrive.file.vue
similarity index 92%
rename from packages/client/src/components/drive.file.vue
rename to packages/client/src/components/MkDrive.file.vue
index aaf7ca3ca3..22916d5680 100644
--- a/packages/client/src/components/drive.file.vue
+++ b/packages/client/src/components/MkDrive.file.vue
@@ -1,5 +1,6 @@
 <template>
-<div class="ncvczrfv"
+<div
+	class="ncvczrfv"
 	:class="{ isSelected }"
 	draggable="true"
 	:title="title"
@@ -34,7 +35,7 @@
 import { computed, defineAsyncComponent, ref } from 'vue';
 import * as Misskey from 'misskey-js';
 import copyToClipboard from '@/scripts/copy-to-clipboard';
-import MkDriveFileThumbnail from './drive-file-thumbnail.vue';
+import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
 import bytes from '@/filters/bytes';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
@@ -63,31 +64,31 @@ function getMenu() {
 	return [{
 		text: i18n.ts.rename,
 		icon: 'fas fa-i-cursor',
-		action: rename
+		action: rename,
 	}, {
 		text: props.file.isSensitive ? i18n.ts.unmarkAsSensitive : i18n.ts.markAsSensitive,
 		icon: props.file.isSensitive ? 'fas fa-eye' : 'fas fa-eye-slash',
-		action: toggleSensitive
+		action: toggleSensitive,
 	}, {
 		text: i18n.ts.describeFile,
 		icon: 'fas fa-i-cursor',
-		action: describe
+		action: describe,
 	}, null, {
 		text: i18n.ts.copyUrl,
 		icon: 'fas fa-link',
-		action: copyUrl
+		action: copyUrl,
 	}, {
 		type: 'a',
 		href: props.file.url,
 		target: '_blank',
 		text: i18n.ts.download,
 		icon: 'fas fa-download',
-		download: props.file.name
+		download: props.file.name,
 	}, null, {
 		text: i18n.ts.delete,
 		icon: 'fas fa-trash-alt',
 		danger: true,
-		action: deleteFile
+		action: deleteFile,
 	}];
 }
 
@@ -127,35 +128,35 @@ function rename() {
 		if (canceled) return;
 		os.api('drive/files/update', {
 			fileId: props.file.id,
-			name: name
+			name: name,
 		});
 	});
 }
 
 function describe() {
-	os.popup(defineAsyncComponent(() => import('@/components/media-caption.vue')), {
+	os.popup(defineAsyncComponent(() => import('@/components/MkMediaCaption.vue')), {
 		title: i18n.ts.describeFile,
 		input: {
 			placeholder: i18n.ts.inputNewDescription,
 			default: props.file.comment != null ? props.file.comment : '',
 		},
-		image: props.file
+		image: props.file,
 	}, {
 		done: result => {
 			if (!result || result.canceled) return;
 			let comment = result.result;
 			os.api('drive/files/update', {
 				fileId: props.file.id,
-				comment: comment.length === 0 ? null : comment
+				comment: comment.length === 0 ? null : comment,
 			});
-		}
+		},
 	}, 'closed');
 }
 
 function toggleSensitive() {
 	os.api('drive/files/update', {
 		fileId: props.file.id,
-		isSensitive: !props.file.isSensitive
+		isSensitive: !props.file.isSensitive,
 	});
 }
 
@@ -176,7 +177,7 @@ async function deleteFile() {
 
 	if (canceled) return;
 	os.api('drive/files/delete', {
-		fileId: props.file.id
+		fileId: props.file.id,
 	});
 }
 </script>
diff --git a/packages/client/src/components/drive.folder.vue b/packages/client/src/components/MkDrive.folder.vue
similarity index 93%
rename from packages/client/src/components/drive.folder.vue
rename to packages/client/src/components/MkDrive.folder.vue
index 3ccb5d6219..e55fa4f0f2 100644
--- a/packages/client/src/components/drive.folder.vue
+++ b/packages/client/src/components/MkDrive.folder.vue
@@ -1,5 +1,6 @@
 <template>
-<div class="rghtznwe"
+<div
+	class="rghtznwe"
 	:class="{ draghover }"
 	draggable="true"
 	:title="title"
@@ -123,7 +124,7 @@ function onDrop(ev: DragEvent) {
 		emit('removeFile', file.id);
 		os.api('drive/files/update', {
 			fileId: file.id,
-			folderId: props.folder.id
+			folderId: props.folder.id,
 		});
 	}
 	//#endregion
@@ -139,7 +140,7 @@ function onDrop(ev: DragEvent) {
 		emit('removeFolder', folder.id);
 		os.api('drive/folders/update', {
 			folderId: folder.id,
-			parentId: props.folder.id
+			parentId: props.folder.id,
 		}).then(() => {
 			// noop
 		}).catch(err => {
@@ -147,13 +148,13 @@ function onDrop(ev: DragEvent) {
 				case 'detected-circular-definition':
 					os.alert({
 						title: i18n.ts.unableToProcess,
-						text: i18n.ts.circularReferenceFolder
+						text: i18n.ts.circularReferenceFolder,
 					});
 					break;
 				default:
 					os.alert({
 						type: 'error',
-						text: i18n.ts.somethingHappened
+						text: i18n.ts.somethingHappened,
 					});
 			}
 		});
@@ -186,19 +187,19 @@ function rename() {
 	os.inputText({
 		title: i18n.ts.renameFolder,
 		placeholder: i18n.ts.inputNewFolderName,
-		default: props.folder.name
+		default: props.folder.name,
 	}).then(({ canceled, result: name }) => {
 		if (canceled) return;
 		os.api('drive/folders/update', {
 			folderId: props.folder.id,
-			name: name
+			name: name,
 		});
 	});
 }
 
 function deleteFolder() {
 	os.api('drive/folders/delete', {
-		folderId: props.folder.id
+		folderId: props.folder.id,
 	}).then(() => {
 		if (defaultStore.state.uploadFolder === props.folder.id) {
 			defaultStore.set('uploadFolder', null);
@@ -209,13 +210,13 @@ function deleteFolder() {
 				os.alert({
 					type: 'error',
 					title: i18n.ts.unableToDelete,
-					text: i18n.ts.hasChildFilesOrFolders
+					text: i18n.ts.hasChildFilesOrFolders,
 				});
 				break;
 			default:
 				os.alert({
 					type: 'error',
-					text: i18n.ts.unableToDelete
+					text: i18n.ts.unableToDelete,
 				});
 		}
 	});
@@ -230,11 +231,11 @@ function onContextmenu(ev: MouseEvent) {
 		text: i18n.ts.openInWindow,
 		icon: 'fas fa-window-restore',
 		action: () => {
-			os.popup(defineAsyncComponent(() => import('./drive-window.vue')), {
-				initialFolder: props.folder
+			os.popup(defineAsyncComponent(() => import('@/components/MkDriveWindow.vue')), {
+				initialFolder: props.folder,
 			}, {
 			}, 'closed');
-		}
+		},
 	}, null, {
 		text: i18n.ts.rename,
 		icon: 'fas fa-i-cursor',
diff --git a/packages/client/src/components/drive.nav-folder.vue b/packages/client/src/components/MkDrive.navFolder.vue
similarity index 100%
rename from packages/client/src/components/drive.nav-folder.vue
rename to packages/client/src/components/MkDrive.navFolder.vue
diff --git a/packages/client/src/components/drive.vue b/packages/client/src/components/MkDrive.vue
similarity index 99%
rename from packages/client/src/components/drive.vue
rename to packages/client/src/components/MkDrive.vue
index 9e2ef1b930..9f0016adc2 100644
--- a/packages/client/src/components/drive.vue
+++ b/packages/client/src/components/MkDrive.vue
@@ -90,10 +90,10 @@
 <script lang="ts" setup>
 import { markRaw, nextTick, onActivated, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import * as Misskey from 'misskey-js';
-import XNavFolder from './drive.nav-folder.vue';
-import XFolder from './drive.folder.vue';
-import XFile from './drive.file.vue';
 import MkButton from './ui/button.vue';
+import XNavFolder from '@/components/MkDrive.navFolder.vue';
+import XFolder from '@/components/MkDrive.folder.vue';
+import XFile from '@/components/MkDrive.file.vue';
 import * as os from '@/os';
 import { stream } from '@/stream';
 import { defaultStore } from '@/store';
diff --git a/packages/client/src/components/drive-file-thumbnail.vue b/packages/client/src/components/MkDriveFileThumbnail.vue
similarity index 97%
rename from packages/client/src/components/drive-file-thumbnail.vue
rename to packages/client/src/components/MkDriveFileThumbnail.vue
index b346585cec..de65d2f25b 100644
--- a/packages/client/src/components/drive-file-thumbnail.vue
+++ b/packages/client/src/components/MkDriveFileThumbnail.vue
@@ -17,7 +17,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
 import * as Misskey from 'misskey-js';
-import ImgWithBlurhash from '@/components/img-with-blurhash.vue';
+import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
 
 const props = defineProps<{
 	file: Misskey.entities.DriveFile;
diff --git a/packages/client/src/components/drive-select-dialog.vue b/packages/client/src/components/MkDriveSelectDialog.vue
similarity index 95%
rename from packages/client/src/components/drive-select-dialog.vue
rename to packages/client/src/components/MkDriveSelectDialog.vue
index 03974559d2..95a9a6fdb5 100644
--- a/packages/client/src/components/drive-select-dialog.vue
+++ b/packages/client/src/components/MkDriveSelectDialog.vue
@@ -1,5 +1,6 @@
 <template>
-<XModalWindow ref="dialog"
+<XModalWindow
+	ref="dialog"
 	:width="800"
 	:height="500"
 	:with-ok-button="true"
@@ -20,7 +21,7 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 import * as Misskey from 'misskey-js';
-import XDrive from './drive.vue';
+import XDrive from '@/components/MkDrive.vue';
 import XModalWindow from '@/components/ui/modal-window.vue';
 import number from '@/filters/number';
 import { i18n } from '@/i18n';
diff --git a/packages/client/src/components/drive-window.vue b/packages/client/src/components/MkDriveWindow.vue
similarity index 88%
rename from packages/client/src/components/drive-window.vue
rename to packages/client/src/components/MkDriveWindow.vue
index 51ea2b5015..113aabb9f3 100644
--- a/packages/client/src/components/drive-window.vue
+++ b/packages/client/src/components/MkDriveWindow.vue
@@ -1,5 +1,6 @@
 <template>
-<XWindow ref="window"
+<XWindow
+	ref="window"
 	:initial-width="800"
 	:initial-height="500"
 	:can-resize="true"
@@ -15,7 +16,7 @@
 <script lang="ts" setup>
 import { } from 'vue';
 import * as Misskey from 'misskey-js';
-import XDrive from './drive.vue';
+import XDrive from '@/components/MkDrive.vue';
 import XWindow from '@/components/ui/window.vue';
 import { i18n } from '@/i18n';
 
diff --git a/packages/client/src/components/emoji-picker.section.vue b/packages/client/src/components/MkEmojiPicker.section.vue
similarity index 100%
rename from packages/client/src/components/emoji-picker.section.vue
rename to packages/client/src/components/MkEmojiPicker.section.vue
diff --git a/packages/client/src/components/emoji-picker.vue b/packages/client/src/components/MkEmojiPicker.vue
similarity index 99%
rename from packages/client/src/components/emoji-picker.vue
rename to packages/client/src/components/MkEmojiPicker.vue
index 0d3466ce78..637bf630b7 100644
--- a/packages/client/src/components/emoji-picker.vue
+++ b/packages/client/src/components/MkEmojiPicker.vue
@@ -80,10 +80,10 @@
 <script lang="ts" setup>
 import { ref, computed, watch, onMounted } from 'vue';
 import * as Misskey from 'misskey-js';
-import XSection from './emoji-picker.section.vue';
+import XSection from '@/components/MkEmojiPicker.section.vue';
 import { emojilist, UnicodeEmojiDef, unicodeEmojiCategories as categories } from '@/scripts/emojilist';
 import { getStaticImageUrl } from '@/scripts/get-static-image-url';
-import Ripple from '@/components/ripple.vue';
+import Ripple from '@/components/MkRipple.vue';
 import * as os from '@/os';
 import { isTouchUsing } from '@/scripts/touch';
 import { deviceKind } from '@/scripts/device-kind';
diff --git a/packages/client/src/components/emoji-picker-dialog.vue b/packages/client/src/components/MkEmojiPickerDialog.vue
similarity index 96%
rename from packages/client/src/components/emoji-picker-dialog.vue
rename to packages/client/src/components/MkEmojiPickerDialog.vue
index 2c0b2e9a8b..94e66b971a 100644
--- a/packages/client/src/components/emoji-picker-dialog.vue
+++ b/packages/client/src/components/MkEmojiPickerDialog.vue
@@ -28,7 +28,7 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 import MkModal from '@/components/ui/modal.vue';
-import MkEmojiPicker from '@/components/emoji-picker.vue';
+import MkEmojiPicker from '@/components/MkEmojiPicker.vue';
 import { defaultStore } from '@/store';
 
 withDefaults(defineProps<{
diff --git a/packages/client/src/components/emoji-picker-window.vue b/packages/client/src/components/MkEmojiPickerWindow.vue
similarity index 97%
rename from packages/client/src/components/emoji-picker-window.vue
rename to packages/client/src/components/MkEmojiPickerWindow.vue
index 610690d701..a1a2fd9328 100644
--- a/packages/client/src/components/emoji-picker-window.vue
+++ b/packages/client/src/components/MkEmojiPickerWindow.vue
@@ -14,7 +14,7 @@
 <script lang="ts" setup>
 import { } from 'vue';
 import MkWindow from '@/components/ui/window.vue';
-import MkEmojiPicker from '@/components/emoji-picker.vue';
+import MkEmojiPicker from '@/components/MkEmojiPicker.vue';
 
 withDefaults(defineProps<{
 	src?: HTMLElement;
diff --git a/packages/client/src/components/featured-photos.vue b/packages/client/src/components/MkFeaturedPhotos.vue
similarity index 100%
rename from packages/client/src/components/featured-photos.vue
rename to packages/client/src/components/MkFeaturedPhotos.vue
diff --git a/packages/client/src/components/file-list-for-admin.vue b/packages/client/src/components/MkFileListForAdmin.vue
similarity index 97%
rename from packages/client/src/components/file-list-for-admin.vue
rename to packages/client/src/components/MkFileListForAdmin.vue
index 489c017a93..e03b8b94d8 100644
--- a/packages/client/src/components/file-list-for-admin.vue
+++ b/packages/client/src/components/MkFileListForAdmin.vue
@@ -36,7 +36,7 @@ import { computed } from 'vue';
 import * as Acct from 'misskey-js/built/acct';
 import MkSwitch from '@/components/ui/switch.vue';
 import MkPagination from '@/components/ui/pagination.vue';
-import MkDriveFileThumbnail from '@/components/drive-file-thumbnail.vue';
+import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
 import bytes from '@/filters/bytes';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
diff --git a/packages/client/src/components/file-type-icon.vue b/packages/client/src/components/MkFileTypeIcon.vue
similarity index 100%
rename from packages/client/src/components/file-type-icon.vue
rename to packages/client/src/components/MkFileTypeIcon.vue
diff --git a/packages/client/src/components/follow-button.vue b/packages/client/src/components/MkFollowButton.vue
similarity index 100%
rename from packages/client/src/components/follow-button.vue
rename to packages/client/src/components/MkFollowButton.vue
diff --git a/packages/client/src/components/forgot-password.vue b/packages/client/src/components/MkForgotPassword.vue
similarity index 100%
rename from packages/client/src/components/forgot-password.vue
rename to packages/client/src/components/MkForgotPassword.vue
diff --git a/packages/client/src/components/form-dialog.vue b/packages/client/src/components/MkFormDialog.vue
similarity index 100%
rename from packages/client/src/components/form-dialog.vue
rename to packages/client/src/components/MkFormDialog.vue
diff --git a/packages/client/src/components/formula.vue b/packages/client/src/components/MkFormula.vue
similarity index 60%
rename from packages/client/src/components/formula.vue
rename to packages/client/src/components/MkFormula.vue
index 431b4e6c3e..65a2fee930 100644
--- a/packages/client/src/components/formula.vue
+++ b/packages/client/src/components/MkFormula.vue
@@ -1,5 +1,5 @@
 <template>
-<XFormula :formula="formula" :block="block" />
+<XFormula :formula="formula" :block="block"/>
 </template>
 
 <script lang="ts">
@@ -8,17 +8,17 @@ import * as os from '@/os';
 
 export default defineComponent({
 	components: {
-		XFormula: defineAsyncComponent(() => import('./formula-core.vue'))
+		XFormula: defineAsyncComponent(() => import('@/components/MkFormulaCore.vue')),
 	},
 	props: {
 		formula: {
 			type: String,
-			required: true
+			required: true,
 		},
 		block: {
 			type: Boolean,
-			required: true
-		}
-	}
+			required: true,
+		},
+	},
 });
 </script>
diff --git a/packages/client/src/components/formula-core.vue b/packages/client/src/components/MkFormulaCore.vue
similarity index 100%
rename from packages/client/src/components/formula-core.vue
rename to packages/client/src/components/MkFormulaCore.vue
diff --git a/packages/client/src/components/gallery-post-preview.vue b/packages/client/src/components/MkGalleryPostPreview.vue
similarity index 84%
rename from packages/client/src/components/gallery-post-preview.vue
rename to packages/client/src/components/MkGalleryPostPreview.vue
index 082ac669d7..2afc8536ef 100644
--- a/packages/client/src/components/gallery-post-preview.vue
+++ b/packages/client/src/components/MkGalleryPostPreview.vue
@@ -14,26 +14,14 @@
 </MkA>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { } from 'vue';
 import { userName } from '@/filters/user';
-import ImgWithBlurhash from '@/components/img-with-blurhash.vue';
-import * as os from '@/os';
+import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
 
-export default defineComponent({
-	components: {
-		ImgWithBlurhash
-	},
-	props: {
-		post: {
-			type: Object,
-			required: true
-		},
-	},
-	methods: {
-		userName,
-	}
-});
+const props = defineProps<{
+		post: any;
+	}>();
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/components/google.vue b/packages/client/src/components/MkGoogle.vue
similarity index 100%
rename from packages/client/src/components/google.vue
rename to packages/client/src/components/MkGoogle.vue
diff --git a/packages/client/src/components/image-viewer.vue b/packages/client/src/components/MkImageViewer.vue
similarity index 100%
rename from packages/client/src/components/image-viewer.vue
rename to packages/client/src/components/MkImageViewer.vue
diff --git a/packages/client/src/components/img-with-blurhash.vue b/packages/client/src/components/MkImgWithBlurhash.vue
similarity index 100%
rename from packages/client/src/components/img-with-blurhash.vue
rename to packages/client/src/components/MkImgWithBlurhash.vue
diff --git a/packages/client/src/components/instance-card-mini.vue b/packages/client/src/components/MkInstanceCardMini.vue
similarity index 98%
rename from packages/client/src/components/instance-card-mini.vue
rename to packages/client/src/components/MkInstanceCardMini.vue
index 88621e72c2..f6e2f4eaa7 100644
--- a/packages/client/src/components/instance-card-mini.vue
+++ b/packages/client/src/components/MkInstanceCardMini.vue
@@ -11,7 +11,7 @@
 
 <script lang="ts" setup>
 import * as misskey from 'misskey-js';
-import MkMiniChart from '@/components/mini-chart.vue';
+import MkMiniChart from '@/components/MkMiniChart.vue';
 import * as os from '@/os';
 
 const props = defineProps<{
diff --git a/packages/client/src/components/instance-stats.vue b/packages/client/src/components/MkInstanceStats.vue
similarity index 99%
rename from packages/client/src/components/instance-stats.vue
rename to packages/client/src/components/MkInstanceStats.vue
index 65465dd9a2..0437e05fad 100644
--- a/packages/client/src/components/instance-stats.vue
+++ b/packages/client/src/components/MkInstanceStats.vue
@@ -68,7 +68,7 @@ import {
 	DoughnutController,
 } from 'chart.js';
 import MkSelect from '@/components/form/select.vue';
-import MkChart from '@/components/chart.vue';
+import MkChart from '@/components/MkChart.vue';
 import { useChartTooltip } from '@/scripts/use-chart-tooltip';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
diff --git a/packages/client/src/components/instance-ticker.vue b/packages/client/src/components/MkInstanceTicker.vue
similarity index 100%
rename from packages/client/src/components/instance-ticker.vue
rename to packages/client/src/components/MkInstanceTicker.vue
diff --git a/packages/client/src/components/key-value.vue b/packages/client/src/components/MkKeyValue.vue
similarity index 100%
rename from packages/client/src/components/key-value.vue
rename to packages/client/src/components/MkKeyValue.vue
diff --git a/packages/client/src/components/launch-pad.vue b/packages/client/src/components/MkLaunchPad.vue
similarity index 100%
rename from packages/client/src/components/launch-pad.vue
rename to packages/client/src/components/MkLaunchPad.vue
diff --git a/packages/client/src/components/link.vue b/packages/client/src/components/MkLink.vue
similarity index 91%
rename from packages/client/src/components/link.vue
rename to packages/client/src/components/MkLink.vue
index 846a9a3a76..649523abc2 100644
--- a/packages/client/src/components/link.vue
+++ b/packages/client/src/components/MkLink.vue
@@ -26,7 +26,7 @@ const target = self ? null : '_blank';
 const el = $ref();
 
 useTooltip($$(el), (showing) => {
-	os.popup(defineAsyncComponent(() => import('@/components/url-preview-popup.vue')), {
+	os.popup(defineAsyncComponent(() => import('@/components/MkUrlPreviewPopup.vue')), {
 		showing,
 		url: props.url,
 		source: el,
diff --git a/packages/client/src/components/marquee.vue b/packages/client/src/components/MkMarquee.vue
similarity index 100%
rename from packages/client/src/components/marquee.vue
rename to packages/client/src/components/MkMarquee.vue
diff --git a/packages/client/src/components/media-banner.vue b/packages/client/src/components/MkMediaBanner.vue
similarity index 100%
rename from packages/client/src/components/media-banner.vue
rename to packages/client/src/components/MkMediaBanner.vue
diff --git a/packages/client/src/components/media-caption.vue b/packages/client/src/components/MkMediaCaption.vue
similarity index 100%
rename from packages/client/src/components/media-caption.vue
rename to packages/client/src/components/MkMediaCaption.vue
diff --git a/packages/client/src/components/media-image.vue b/packages/client/src/components/MkMediaImage.vue
similarity index 97%
rename from packages/client/src/components/media-image.vue
rename to packages/client/src/components/MkMediaImage.vue
index 9d417bd99f..92f1bd2dbd 100644
--- a/packages/client/src/components/media-image.vue
+++ b/packages/client/src/components/MkMediaImage.vue
@@ -24,7 +24,7 @@
 import { watch } from 'vue';
 import * as misskey from 'misskey-js';
 import { getStaticImageUrl } from '@/scripts/get-static-image-url';
-import ImgWithBlurhash from '@/components/img-with-blurhash.vue';
+import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
 import { defaultStore } from '@/store';
 
 const props = defineProps<{
diff --git a/packages/client/src/components/media-list.vue b/packages/client/src/components/MkMediaList.vue
similarity index 96%
rename from packages/client/src/components/media-list.vue
rename to packages/client/src/components/MkMediaList.vue
index 7e330575e1..c6f8612182 100644
--- a/packages/client/src/components/media-list.vue
+++ b/packages/client/src/components/MkMediaList.vue
@@ -18,9 +18,9 @@ import * as misskey from 'misskey-js';
 import PhotoSwipeLightbox from 'photoswipe/lightbox';
 import PhotoSwipe from 'photoswipe';
 import 'photoswipe/style.css';
-import XBanner from './media-banner.vue';
-import XImage from './media-image.vue';
-import XVideo from './media-video.vue';
+import XBanner from '@/components/MkMediaBanner.vue';
+import XImage from '@/components/MkMediaImage.vue';
+import XVideo from '@/components/MkMediaVideo.vue';
 import * as os from '@/os';
 import { FILE_TYPE_BROWSERSAFE } from '@/const';
 import { defaultStore } from '@/store';
diff --git a/packages/client/src/components/media-video.vue b/packages/client/src/components/MkMediaVideo.vue
similarity index 100%
rename from packages/client/src/components/media-video.vue
rename to packages/client/src/components/MkMediaVideo.vue
diff --git a/packages/client/src/components/mention.vue b/packages/client/src/components/MkMention.vue
similarity index 100%
rename from packages/client/src/components/mention.vue
rename to packages/client/src/components/MkMention.vue
diff --git a/packages/client/src/components/mini-chart.vue b/packages/client/src/components/MkMiniChart.vue
similarity index 100%
rename from packages/client/src/components/mini-chart.vue
rename to packages/client/src/components/MkMiniChart.vue
diff --git a/packages/client/src/components/modal-page-window.vue b/packages/client/src/components/MkModalPageWindow.vue
similarity index 100%
rename from packages/client/src/components/modal-page-window.vue
rename to packages/client/src/components/MkModalPageWindow.vue
diff --git a/packages/client/src/components/note.vue b/packages/client/src/components/MkNote.vue
similarity index 96%
rename from packages/client/src/components/note.vue
rename to packages/client/src/components/MkNote.vue
index 8823a4d264..0c0d971727 100644
--- a/packages/client/src/components/note.vue
+++ b/packages/client/src/components/MkNote.vue
@@ -105,17 +105,17 @@
 import { computed, inject, onMounted, onUnmounted, reactive, ref, Ref } from 'vue';
 import * as mfm from 'mfm-js';
 import * as misskey from 'misskey-js';
-import MkNoteSub from './MkNoteSub.vue';
-import XNoteHeader from './note-header.vue';
-import XNoteSimple from './note-simple.vue';
-import XReactionsViewer from './reactions-viewer.vue';
-import XMediaList from './media-list.vue';
-import XCwButton from './cw-button.vue';
-import XPoll from './poll.vue';
-import XRenoteButton from './renote-button.vue';
-import MkUrlPreview from '@/components/url-preview.vue';
-import MkInstanceTicker from '@/components/instance-ticker.vue';
-import MkVisibility from '@/components/visibility.vue';
+import MkNoteSub from '@/components/MkNoteSub.vue';
+import XNoteHeader from '@/components/MkNoteHeader.vue';
+import XNoteSimple from '@/components/MkNoteSimple.vue';
+import XReactionsViewer from '@/components/MkReactionsViewer.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 MkUrlPreview from '@/components/MkUrlPreview.vue';
+import MkInstanceTicker from '@/components/MkInstanceTicker.vue';
+import MkVisibility from '@/components/MkVisibility.vue';
 import { pleaseLogin } from '@/scripts/please-login';
 import { focusPrev, focusNext } from '@/scripts/focus';
 import { checkWordMute } from '@/scripts/check-word-mute';
diff --git a/packages/client/src/components/note-detailed.vue b/packages/client/src/components/MkNoteDetailed.vue
similarity index 96%
rename from packages/client/src/components/note-detailed.vue
rename to packages/client/src/components/MkNoteDetailed.vue
index 162e6f116e..173ae44445 100644
--- a/packages/client/src/components/note-detailed.vue
+++ b/packages/client/src/components/MkNoteDetailed.vue
@@ -116,16 +116,16 @@
 import { computed, inject, onMounted, onUnmounted, reactive, ref } from 'vue';
 import * as mfm from 'mfm-js';
 import * as misskey from 'misskey-js';
-import MkNoteSub from './MkNoteSub.vue';
-import XNoteSimple from './note-simple.vue';
-import XReactionsViewer from './reactions-viewer.vue';
-import XMediaList from './media-list.vue';
-import XCwButton from './cw-button.vue';
-import XPoll from './poll.vue';
-import XRenoteButton from './renote-button.vue';
-import MkUrlPreview from '@/components/url-preview.vue';
-import MkInstanceTicker from '@/components/instance-ticker.vue';
-import MkVisibility from '@/components/visibility.vue';
+import MkNoteSub from '@/components/MkNoteSub.vue';
+import XNoteSimple from '@/components/MkNoteSimple.vue';
+import XReactionsViewer from '@/components/MkReactionsViewer.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 MkUrlPreview from '@/components/MkUrlPreview.vue';
+import MkInstanceTicker from '@/components/MkInstanceTicker.vue';
+import MkVisibility from '@/components/MkVisibility.vue';
 import { pleaseLogin } from '@/scripts/please-login';
 import { checkWordMute } from '@/scripts/check-word-mute';
 import { userPage } from '@/filters/user';
diff --git a/packages/client/src/components/note-header.vue b/packages/client/src/components/MkNoteHeader.vue
similarity index 96%
rename from packages/client/src/components/note-header.vue
rename to packages/client/src/components/MkNoteHeader.vue
index 0b05498566..333c3ddbd9 100644
--- a/packages/client/src/components/note-header.vue
+++ b/packages/client/src/components/MkNoteHeader.vue
@@ -17,7 +17,7 @@
 <script lang="ts" setup>
 import { } from 'vue';
 import * as misskey from 'misskey-js';
-import MkVisibility from '@/components/visibility.vue';
+import MkVisibility from '@/components/MkVisibility.vue';
 import { notePage } from '@/filters/note';
 import { userPage } from '@/filters/user';
 
diff --git a/packages/client/src/components/note-preview.vue b/packages/client/src/components/MkNotePreview.vue
similarity index 100%
rename from packages/client/src/components/note-preview.vue
rename to packages/client/src/components/MkNotePreview.vue
diff --git a/packages/client/src/components/note-simple.vue b/packages/client/src/components/MkNoteSimple.vue
similarity index 87%
rename from packages/client/src/components/note-simple.vue
rename to packages/client/src/components/MkNoteSimple.vue
index b813b9a2b9..1bbbe0e1a6 100644
--- a/packages/client/src/components/note-simple.vue
+++ b/packages/client/src/components/MkNoteSimple.vue
@@ -9,7 +9,7 @@
 				<XCwButton v-model="showContent" :note="note"/>
 			</p>
 			<div v-show="note.cw == null || showContent" class="content">
-				<MkNoteSubNoteContent class="text" :note="note"/>
+				<MkSubNoteContent class="text" :note="note"/>
 			</div>
 		</div>
 	</div>
@@ -19,9 +19,9 @@
 <script lang="ts" setup>
 import { } from 'vue';
 import * as misskey from 'misskey-js';
-import XNoteHeader from './note-header.vue';
-import MkNoteSubNoteContent from './sub-note-content.vue';
-import XCwButton from './cw-button.vue';
+import XNoteHeader from '@/components/MkNoteHeader.vue';
+import MkSubNoteContent from '@/components/MkSubNoteContent.vue';
+import XCwButton from '@/components/MkCwButton.vue';
 
 const props = defineProps<{
 	note: misskey.entities.Note;
diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue
index aac3f233bb..cb05f614a7 100644
--- a/packages/client/src/components/MkNoteSub.vue
+++ b/packages/client/src/components/MkNoteSub.vue
@@ -10,7 +10,7 @@
 					<XCwButton v-model="showContent" :note="note"/>
 				</p>
 				<div v-show="note.cw == null || showContent" class="content">
-					<MkNoteSubNoteContent class="text" :note="note"/>
+					<MkSubNoteContent class="text" :note="note"/>
 				</div>
 			</div>
 		</div>
@@ -29,9 +29,9 @@
 <script lang="ts" setup>
 import { } from 'vue';
 import * as misskey from 'misskey-js';
-import XNoteHeader from './note-header.vue';
-import MkNoteSubNoteContent from './sub-note-content.vue';
-import XCwButton from './cw-button.vue';
+import XNoteHeader from '@/components/MkNoteHeader.vue';
+import MkSubNoteContent from '@/components/MkSubNoteContent.vue';
+import XCwButton from '@/components/MkCwButton.vue';
 import { notePage } from '@/filters/note';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
diff --git a/packages/client/src/components/notes.vue b/packages/client/src/components/MkNotes.vue
similarity index 93%
rename from packages/client/src/components/notes.vue
rename to packages/client/src/components/MkNotes.vue
index 22f4f42966..8e5d8e3c6b 100644
--- a/packages/client/src/components/notes.vue
+++ b/packages/client/src/components/MkNotes.vue
@@ -19,8 +19,8 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue';
-import XNote from '@/components/note.vue';
-import XList from '@/components/date-separated-list.vue';
+import XNote from '@/components/MkNote.vue';
+import XList from '@/components/MkDateSeparatedList.vue';
 import MkPagination, { Paging } from '@/components/ui/pagination.vue';
 import { i18n } from '@/i18n';
 
diff --git a/packages/client/src/components/notification.vue b/packages/client/src/components/MkNotification.vue
similarity index 98%
rename from packages/client/src/components/notification.vue
rename to packages/client/src/components/MkNotification.vue
index 5c7dcf4e03..ac40851df8 100644
--- a/packages/client/src/components/notification.vue
+++ b/packages/client/src/components/MkNotification.vue
@@ -75,9 +75,9 @@
 <script lang="ts" setup>
 import { ref, onMounted, onUnmounted, watch } from 'vue';
 import * as misskey from 'misskey-js';
-import XReactionIcon from './reaction-icon.vue';
-import MkFollowButton from './follow-button.vue';
-import XReactionTooltip from './reaction-tooltip.vue';
+import XReactionIcon from '@/components/MkReactionIcon.vue';
+import MkFollowButton from '@/components/MkFollowButton.vue';
+import XReactionTooltip from '@/components/MkReactionTooltip.vue';
 import { getNoteSummary } from '@/scripts/get-note-summary';
 import { notePage } from '@/filters/note';
 import { userPage } from '@/filters/user';
diff --git a/packages/client/src/components/notification-setting-window.vue b/packages/client/src/components/MkNotificationSettingWindow.vue
similarity index 100%
rename from packages/client/src/components/notification-setting-window.vue
rename to packages/client/src/components/MkNotificationSettingWindow.vue
diff --git a/packages/client/src/components/notification-toast.vue b/packages/client/src/components/MkNotificationToast.vue
similarity index 95%
rename from packages/client/src/components/notification-toast.vue
rename to packages/client/src/components/MkNotificationToast.vue
index b808647bb4..398f64d544 100644
--- a/packages/client/src/components/notification-toast.vue
+++ b/packages/client/src/components/MkNotificationToast.vue
@@ -8,7 +8,7 @@
 
 <script lang="ts" setup>
 import { onMounted } from 'vue';
-import XNotification from './notification.vue';
+import XNotification from '@/components/MkNotification.vue';
 import * as os from '@/os';
 
 defineProps<{
diff --git a/packages/client/src/components/notifications.vue b/packages/client/src/components/MkNotifications.vue
similarity index 94%
rename from packages/client/src/components/notifications.vue
rename to packages/client/src/components/MkNotifications.vue
index c99596acbb..98de7afcae 100644
--- a/packages/client/src/components/notifications.vue
+++ b/packages/client/src/components/MkNotifications.vue
@@ -20,9 +20,9 @@
 import { defineComponent, markRaw, onUnmounted, onMounted, computed, ref } from 'vue';
 import { notificationTypes } from 'misskey-js';
 import MkPagination, { Paging } from '@/components/ui/pagination.vue';
-import XNotification from '@/components/notification.vue';
-import XList from '@/components/date-separated-list.vue';
-import XNote from '@/components/note.vue';
+import XNotification from '@/components/MkNotification.vue';
+import XList from '@/components/MkDateSeparatedList.vue';
+import XNote from '@/components/MkNote.vue';
 import * as os from '@/os';
 import { stream } from '@/stream';
 import { $i } from '@/account';
diff --git a/packages/client/src/components/number-diff.vue b/packages/client/src/components/MkNumberDiff.vue
similarity index 100%
rename from packages/client/src/components/number-diff.vue
rename to packages/client/src/components/MkNumberDiff.vue
diff --git a/packages/client/src/components/object-view.value.vue b/packages/client/src/components/MkObjectView.value.vue
similarity index 100%
rename from packages/client/src/components/object-view.value.vue
rename to packages/client/src/components/MkObjectView.value.vue
diff --git a/packages/client/src/components/object-view.vue b/packages/client/src/components/MkObjectView.vue
similarity index 85%
rename from packages/client/src/components/object-view.vue
rename to packages/client/src/components/MkObjectView.vue
index db66049fce..55578a37f6 100644
--- a/packages/client/src/components/object-view.vue
+++ b/packages/client/src/components/MkObjectView.vue
@@ -6,7 +6,7 @@
 
 <script lang="ts" setup>
 import { } from 'vue';
-import XValue from './object-view.value.vue';
+import XValue from './MkObjectView.value.vue';
 
 const props = defineProps<{
 	value: Record<string, unknown>;
diff --git a/packages/client/src/components/page-preview.vue b/packages/client/src/components/MkPagePreview.vue
similarity index 100%
rename from packages/client/src/components/page-preview.vue
rename to packages/client/src/components/MkPagePreview.vue
diff --git a/packages/client/src/components/page-window.vue b/packages/client/src/components/MkPageWindow.vue
similarity index 98%
rename from packages/client/src/components/page-window.vue
rename to packages/client/src/components/MkPageWindow.vue
index 43d75b0cf9..76eb77825f 100644
--- a/packages/client/src/components/page-window.vue
+++ b/packages/client/src/components/MkPageWindow.vue
@@ -25,7 +25,7 @@
 
 <script lang="ts" setup>
 import { ComputedRef, inject, provide } from 'vue';
-import RouterView from './global/router-view.vue';
+import RouterView from '@/components/global/RouterView.vue';
 import XWindow from '@/components/ui/window.vue';
 import { popout as _popout } from '@/scripts/popout';
 import copyToClipboard from '@/scripts/copy-to-clipboard';
diff --git a/packages/client/src/components/poll.vue b/packages/client/src/components/MkPoll.vue
similarity index 100%
rename from packages/client/src/components/poll.vue
rename to packages/client/src/components/MkPoll.vue
diff --git a/packages/client/src/components/poll-editor.vue b/packages/client/src/components/MkPollEditor.vue
similarity index 100%
rename from packages/client/src/components/poll-editor.vue
rename to packages/client/src/components/MkPollEditor.vue
diff --git a/packages/client/src/components/post-form.vue b/packages/client/src/components/MkPostForm.vue
similarity index 98%
rename from packages/client/src/components/post-form.vue
rename to packages/client/src/components/MkPostForm.vue
index 6dfb2edcb8..a499a62dde 100644
--- a/packages/client/src/components/post-form.vue
+++ b/packages/client/src/components/MkPostForm.vue
@@ -71,10 +71,10 @@ import { length } from 'stringz';
 import { toASCII } from 'punycode/';
 import * as Acct from 'misskey-js/built/acct';
 import { throttle } from 'throttle-debounce';
-import XNoteSimple from './note-simple.vue';
-import XNotePreview from './note-preview.vue';
-import XPostFormAttaches from './post-form-attaches.vue';
-import XPollEditor from './poll-editor.vue';
+import XNoteSimple from '@/components/MkNoteSimple.vue';
+import XNotePreview from '@/components/MkNotePreview.vue';
+import XPostFormAttaches from '@/components/MkPostFormAttaches.vue';
+import XPollEditor from '@/components/MkPollEditor.vue';
 import { host, url } from '@/config';
 import { erase, unique } from '@/scripts/array';
 import { extractMentions } from '@/scripts/extract-mentions';
@@ -384,7 +384,7 @@ function setVisibility() {
 		return;
 	}
 
-	os.popup(defineAsyncComponent(() => import('./visibility-picker.vue')), {
+	os.popup(defineAsyncComponent(() => import('@/components/MkVisibilityPicker.vue')), {
 		currentVisibility: visibility,
 		currentLocalOnly: localOnly,
 		src: visibilityButton,
diff --git a/packages/client/src/components/post-form-attaches.vue b/packages/client/src/components/MkPostFormAttaches.vue
similarity index 96%
rename from packages/client/src/components/post-form-attaches.vue
rename to packages/client/src/components/MkPostFormAttaches.vue
index 98bf2df09a..a8ec8c33ba 100644
--- a/packages/client/src/components/post-form-attaches.vue
+++ b/packages/client/src/components/MkPostFormAttaches.vue
@@ -16,7 +16,7 @@
 
 <script lang="ts">
 import { defineComponent, defineAsyncComponent } from 'vue';
-import MkDriveFileThumbnail from './drive-file-thumbnail.vue';
+import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
 import * as os from '@/os';
 
 export default defineComponent({
@@ -88,7 +88,7 @@ export default defineComponent({
 		},
 
 		async describe(file) {
-			os.popup(defineAsyncComponent(() => import('@/components/media-caption.vue')), {
+			os.popup(defineAsyncComponent(() => import('@/components/MkMediaCaption.vue')), {
 				title: this.$ts.describeFile,
 				input: {
 					placeholder: this.$ts.inputNewDescription,
diff --git a/packages/client/src/components/post-form-dialog.vue b/packages/client/src/components/MkPostFormDialog.vue
similarity index 89%
rename from packages/client/src/components/post-form-dialog.vue
rename to packages/client/src/components/MkPostFormDialog.vue
index dc4e842059..90b281d2ce 100644
--- a/packages/client/src/components/post-form-dialog.vue
+++ b/packages/client/src/components/MkPostFormDialog.vue
@@ -7,7 +7,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import MkModal from '@/components/ui/modal.vue';
-import MkPostForm from '@/components/post-form.vue';
+import MkPostForm from '@/components/MkPostForm.vue';
 
 export default defineComponent({
 	components: {
diff --git a/packages/client/src/components/reaction-icon.vue b/packages/client/src/components/MkReactionIcon.vue
similarity index 100%
rename from packages/client/src/components/reaction-icon.vue
rename to packages/client/src/components/MkReactionIcon.vue
diff --git a/packages/client/src/components/reaction-tooltip.vue b/packages/client/src/components/MkReactionTooltip.vue
similarity index 93%
rename from packages/client/src/components/reaction-tooltip.vue
rename to packages/client/src/components/MkReactionTooltip.vue
index b53061df48..44f2681700 100644
--- a/packages/client/src/components/reaction-tooltip.vue
+++ b/packages/client/src/components/MkReactionTooltip.vue
@@ -10,7 +10,7 @@
 <script lang="ts" setup>
 import { } from 'vue';
 import MkTooltip from './ui/tooltip.vue';
-import XReactionIcon from './reaction-icon.vue';
+import XReactionIcon from '@/components/MkReactionIcon.vue';
 
 const props = defineProps<{
 	reaction: string;
diff --git a/packages/client/src/components/reactions-viewer.details.vue b/packages/client/src/components/MkReactionsViewer.details.vue
similarity index 96%
rename from packages/client/src/components/reactions-viewer.details.vue
rename to packages/client/src/components/MkReactionsViewer.details.vue
index eaebc3541a..e886ff5023 100644
--- a/packages/client/src/components/reactions-viewer.details.vue
+++ b/packages/client/src/components/MkReactionsViewer.details.vue
@@ -19,7 +19,7 @@
 <script lang="ts" setup>
 import { } from 'vue';
 import MkTooltip from './ui/tooltip.vue';
-import XReactionIcon from './reaction-icon.vue';
+import XReactionIcon from '@/components/MkReactionIcon.vue';
 
 const props = defineProps<{
 	reaction: string;
diff --git a/packages/client/src/components/reactions-viewer.reaction.vue b/packages/client/src/components/MkReactionsViewer.reaction.vue
similarity index 95%
rename from packages/client/src/components/reactions-viewer.reaction.vue
rename to packages/client/src/components/MkReactionsViewer.reaction.vue
index c29bd46400..31342b0b48 100644
--- a/packages/client/src/components/reactions-viewer.reaction.vue
+++ b/packages/client/src/components/MkReactionsViewer.reaction.vue
@@ -15,8 +15,8 @@
 <script lang="ts" setup>
 import { computed, onMounted, ref, watch } from 'vue';
 import * as misskey from 'misskey-js';
-import XDetails from '@/components/reactions-viewer.details.vue';
-import XReactionIcon from '@/components/reaction-icon.vue';
+import XDetails from '@/components/MkReactionsViewer.details.vue';
+import XReactionIcon from '@/components/MkReactionIcon.vue';
 import * as os from '@/os';
 import { useTooltip } from '@/scripts/use-tooltip';
 import { $i } from '@/account';
diff --git a/packages/client/src/components/reactions-viewer.vue b/packages/client/src/components/MkReactionsViewer.vue
similarity index 91%
rename from packages/client/src/components/reactions-viewer.vue
rename to packages/client/src/components/MkReactionsViewer.vue
index a9bf51f65f..a88311efa1 100644
--- a/packages/client/src/components/reactions-viewer.vue
+++ b/packages/client/src/components/MkReactionsViewer.vue
@@ -8,7 +8,7 @@
 import { computed } from 'vue';
 import * as misskey from 'misskey-js';
 import { $i } from '@/account';
-import XReaction from './reactions-viewer.reaction.vue';
+import XReaction from '@/components/MkReactionsViewer.reaction.vue';
 
 const props = defineProps<{
 	note: misskey.entities.Note;
diff --git a/packages/client/src/components/remote-caution.vue b/packages/client/src/components/MkRemoteCaution.vue
similarity index 100%
rename from packages/client/src/components/remote-caution.vue
rename to packages/client/src/components/MkRemoteCaution.vue
diff --git a/packages/client/src/components/MkRenoteButton.vue b/packages/client/src/components/MkRenoteButton.vue
new file mode 100644
index 0000000000..068a9fba6f
--- /dev/null
+++ b/packages/client/src/components/MkRenoteButton.vue
@@ -0,0 +1,99 @@
+<template>
+<button
+	v-if="canRenote"
+	ref="buttonRef"
+	class="eddddedb _button canRenote"
+	@click="renote()"
+>
+	<i class="fas fa-retweet"></i>
+	<p v-if="count > 0" class="count">{{ count }}</p>
+</button>
+<button v-else class="eddddedb _button">
+	<i class="fas fa-ban"></i>
+</button>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import * as misskey from 'misskey-js';
+import XDetails from '@/components/MkUsersTooltip.vue';
+import { pleaseLogin } from '@/scripts/please-login';
+import * as os from '@/os';
+import { $i } from '@/account';
+import { useTooltip } from '@/scripts/use-tooltip';
+import { i18n } from '@/i18n';
+
+const props = defineProps<{
+		note: misskey.entities.Note;
+		count: number;
+	}>();
+
+const buttonRef = ref<HTMLElement>();
+
+const canRenote = computed(() => ['public', 'home'].includes(props.note.visibility) || props.note.userId === $i.id);
+
+useTooltip(buttonRef, async (showing) => {
+	const renotes = await os.api('notes/renotes', {
+		noteId: props.note.id,
+		limit: 11,
+	});
+
+	const users = renotes.map(x => x.user);
+
+	if (users.length < 1) return;
+
+	os.popup(XDetails, {
+		showing,
+		users,
+		count: props.count,
+		targetElement: buttonRef.value,
+	}, {}, 'closed');
+});
+
+const renote = (viaKeyboard = false) => {
+	pleaseLogin();
+	os.popupMenu([{
+		text: i18n.ts.renote,
+		icon: 'fas fa-retweet',
+		action: () => {
+			os.api('notes/create', {
+				renoteId: props.note.id,
+			});
+		},
+	}, {
+		text: i18n.ts.quote,
+		icon: 'fas fa-quote-right',
+		action: () => {
+			os.post({
+				renote: props.note,
+			});
+		},
+	}], buttonRef.value, {
+		viaKeyboard,
+	});
+};
+</script>
+
+	<style lang="scss" scoped>
+	.eddddedb {
+		display: inline-block;
+		height: 32px;
+		margin: 2px;
+		padding: 0 6px;
+		border-radius: 4px;
+
+		&:not(.canRenote) {
+			cursor: default;
+		}
+
+		&.renoted {
+			background: var(--accent);
+		}
+
+		> .count {
+			display: inline;
+			margin-left: 8px;
+			opacity: 0.7;
+		}
+	}
+	</style>
diff --git a/packages/client/src/components/ripple.vue b/packages/client/src/components/MkRipple.vue
similarity index 52%
rename from packages/client/src/components/ripple.vue
rename to packages/client/src/components/MkRipple.vue
index 401e78e304..9d93211d5f 100644
--- a/packages/client/src/components/ripple.vue
+++ b/packages/client/src/components/MkRipple.vue
@@ -1,8 +1,9 @@
 <template>
-<div class="vswabwbm" :style="{ zIndex, top: `${y - 64}px`, left: `${x - 64}px` }" :class="{ active }">
+<div class="vswabwbm" :style="{ zIndex, top: `${y - 64}px`, left: `${x - 64}px` }">
 	<svg width="128" height="128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
 		<circle fill="none" cx="64" cy="64">
-			<animate attributeName="r"
+			<animate
+				attributeName="r"
 				begin="0s" dur="0.5s"
 				values="4; 32"
 				calcMode="spline"
@@ -10,7 +11,8 @@
 				keySplines="0.165, 0.84, 0.44, 1"
 				repeatCount="1"
 			/>
-			<animate attributeName="stroke-width"
+			<animate
+				attributeName="stroke-width"
 				begin="0s" dur="0.5s"
 				values="16; 0"
 				calcMode="spline"
@@ -21,7 +23,8 @@
 		</circle>
 		<g fill="none" fill-rule="evenodd">
 			<circle v-for="(particle, i) in particles" :key="i" :fill="particle.color">
-				<animate attributeName="r"
+				<animate
+					attributeName="r"
 					begin="0s" dur="0.8s"
 					:values="`${particle.size}; 0`"
 					calcMode="spline"
@@ -29,7 +32,8 @@
 					keySplines="0.165, 0.84, 0.44, 1"
 					repeatCount="1"
 				/>
-				<animate attributeName="cx"
+				<animate
+					attributeName="cx"
 					begin="0s" dur="0.8s"
 					:values="`${particle.xA}; ${particle.xB}`"
 					calcMode="spline"
@@ -37,7 +41,8 @@
 					keySplines="0.3, 0.61, 0.355, 1"
 					repeatCount="1"
 				/>
-				<animate attributeName="cy"
+				<animate
+					attributeName="cy"
 					begin="0s" dur="0.8s"
 					:values="`${particle.yA}; ${particle.yB}`"
 					calcMode="spline"
@@ -51,59 +56,47 @@
 </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, onMounted } from 'vue';
+<script lang="ts" setup>
+import { onMounted } from 'vue';
 import * as os from '@/os';
 
-export default defineComponent({
-	props: {
-		x: {
-			type: Number,
-			required: true
-		},
-		y: {
-			type: Number,
-			required: true
-		},
-		particle: {
-			type: Boolean,
-			required: false,
-			default: true,
-		}
-	},
-	emits: ['end'],
-	setup(props, context) {
-		const particles = [];
-		const origin = 64;
-		const colors = ['#FF1493', '#00FFFF', '#FFE202'];
+const props = withDefaults(defineProps<{
+	x: number;
+	y: number;
+	particle?: boolean;
+}>(), {
+	particle: true,
+});
 
-		if (props.particle) {
-			for (let i = 0; i < 12; i++) {
-				const angle = Math.random() * (Math.PI * 2);
-				const pos = Math.random() * 16;
-				const velocity = 16 + (Math.random() * 48);
-				particles.push({
-					size: 4 + (Math.random() * 8),
-					xA: origin + (Math.sin(angle) * pos),
-					yA: origin + (Math.cos(angle) * pos),
-					xB: origin + (Math.sin(angle) * (pos + velocity)),
-					yB: origin + (Math.cos(angle) * (pos + velocity)),
-					color: colors[Math.floor(Math.random() * colors.length)]
-				});
-			}
-		}
+const emit = defineEmits<{
+	(ev: 'end'): void;
+}>();
 
-		onMounted(() => {
-			window.setTimeout(() => {
-				context.emit('end');
-			}, 1100);
+const particles = [];
+const origin = 64;
+const colors = ['#FF1493', '#00FFFF', '#FFE202'];
+const zIndex = os.claimZIndex('high');
+
+if (props.particle) {
+	for (let i = 0; i < 12; i++) {
+		const angle = Math.random() * (Math.PI * 2);
+		const pos = Math.random() * 16;
+		const velocity = 16 + (Math.random() * 48);
+		particles.push({
+			size: 4 + (Math.random() * 8),
+			xA: origin + (Math.sin(angle) * pos),
+			yA: origin + (Math.cos(angle) * pos),
+			xB: origin + (Math.sin(angle) * (pos + velocity)),
+			yB: origin + (Math.cos(angle) * (pos + velocity)),
+			color: colors[Math.floor(Math.random() * colors.length)],
 		});
+	}
+}
 
-		return {
-			particles,
-			zIndex: os.claimZIndex('high'),
-		};
-	},
+onMounted(() => {
+	window.setTimeout(() => {
+		emit('end');
+	}, 1100);
 });
 </script>
 
diff --git a/packages/client/src/components/sample.vue b/packages/client/src/components/MkSample.vue
similarity index 100%
rename from packages/client/src/components/sample.vue
rename to packages/client/src/components/MkSample.vue
diff --git a/packages/client/src/components/signin.vue b/packages/client/src/components/MkSignin.vue
similarity index 98%
rename from packages/client/src/components/signin.vue
rename to packages/client/src/components/MkSignin.vue
index dacc610165..e841631717 100644
--- a/packages/client/src/components/signin.vue
+++ b/packages/client/src/components/MkSignin.vue
@@ -237,7 +237,7 @@ function loginFailed(err) {
 }
 
 function resetPassword() {
-	os.popup(defineAsyncComponent(() => import('@/components/forgot-password.vue')), {}, {
+	os.popup(defineAsyncComponent(() => import('@/components/MkForgotPassword.vue')), {}, {
 	}, 'closed');
 }
 </script>
diff --git a/packages/client/src/components/signin-dialog.vue b/packages/client/src/components/MkSigninDialog.vue
similarity index 94%
rename from packages/client/src/components/signin-dialog.vue
rename to packages/client/src/components/MkSigninDialog.vue
index ec68668a7f..19b82b36d5 100644
--- a/packages/client/src/components/signin-dialog.vue
+++ b/packages/client/src/components/MkSigninDialog.vue
@@ -14,7 +14,7 @@
 
 <script lang="ts" setup>
 import { } from 'vue';
-import MkSignin from './signin.vue';
+import MkSignin from '@/components/MkSignin.vue';
 import XModalWindow from '@/components/ui/modal-window.vue';
 import { i18n } from '@/i18n';
 
diff --git a/packages/client/src/components/signup.vue b/packages/client/src/components/MkSignup.vue
similarity index 99%
rename from packages/client/src/components/signup.vue
rename to packages/client/src/components/MkSignup.vue
index f8e39985bc..dbd332ce6e 100644
--- a/packages/client/src/components/signup.vue
+++ b/packages/client/src/components/MkSignup.vue
@@ -68,9 +68,9 @@ import { } from 'vue';
 import getPasswordStrength from 'syuilo-password-strength';
 import { toUnicode } from 'punycode/';
 import MkButton from './ui/button.vue';
-import MkCaptcha from './captcha.vue';
 import MkInput from './form/input.vue';
 import MkSwitch from './form/switch.vue';
+import MkCaptcha from '@/components/MkCaptcha.vue';
 import * as config from '@/config';
 import * as os from '@/os';
 import { login } from '@/account';
diff --git a/packages/client/src/components/signup-dialog.vue b/packages/client/src/components/MkSignupDialog.vue
similarity index 94%
rename from packages/client/src/components/signup-dialog.vue
rename to packages/client/src/components/MkSignupDialog.vue
index c5f933f6b3..3e989fcb71 100644
--- a/packages/client/src/components/signup-dialog.vue
+++ b/packages/client/src/components/MkSignupDialog.vue
@@ -18,7 +18,7 @@
 
 <script lang="ts" setup>
 import { } from 'vue';
-import XSignup from './signup.vue';
+import XSignup from '@/components/MkSignup.vue';
 import XModalWindow from '@/components/ui/modal-window.vue';
 import { i18n } from '@/i18n';
 
diff --git a/packages/client/src/components/sparkle.vue b/packages/client/src/components/MkSparkle.vue
similarity index 100%
rename from packages/client/src/components/sparkle.vue
rename to packages/client/src/components/MkSparkle.vue
diff --git a/packages/client/src/components/sub-note-content.vue b/packages/client/src/components/MkSubNoteContent.vue
similarity index 96%
rename from packages/client/src/components/sub-note-content.vue
rename to packages/client/src/components/MkSubNoteContent.vue
index 75591d3883..97ba79605f 100644
--- a/packages/client/src/components/sub-note-content.vue
+++ b/packages/client/src/components/MkSubNoteContent.vue
@@ -26,8 +26,8 @@
 <script lang="ts" setup>
 import { } from 'vue';
 import * as misskey from 'misskey-js';
-import XPoll from './poll.vue';
-import XMediaList from './media-list.vue';
+import XMediaList from '@/components/MkMediaList.vue';
+import XPoll from '@/components/MkPoll.vue';
 import { i18n } from '@/i18n';
 
 const props = defineProps<{
diff --git a/packages/client/src/components/tab.vue b/packages/client/src/components/MkTab.vue
similarity index 100%
rename from packages/client/src/components/tab.vue
rename to packages/client/src/components/MkTab.vue
diff --git a/packages/client/src/components/tag-cloud.vue b/packages/client/src/components/MkTagCloud.vue
similarity index 100%
rename from packages/client/src/components/tag-cloud.vue
rename to packages/client/src/components/MkTagCloud.vue
diff --git a/packages/client/src/components/timeline.vue b/packages/client/src/components/MkTimeline.vue
similarity index 93%
rename from packages/client/src/components/timeline.vue
rename to packages/client/src/components/MkTimeline.vue
index 0b279c153e..47d2edd8cc 100644
--- a/packages/client/src/components/timeline.vue
+++ b/packages/client/src/components/MkTimeline.vue
@@ -4,7 +4,7 @@
 
 <script lang="ts" setup>
 import { ref, computed, provide, onUnmounted } from 'vue';
-import XNotes from './notes.vue';
+import XNotes from '@/components/MkNotes.vue';
 import * as os from '@/os';
 import { stream } from '@/stream';
 import * as sound from '@/scripts/sound';
@@ -59,10 +59,10 @@ let connection2;
 if (props.src === 'antenna') {
 	endpoint = 'antennas/notes';
 	query = {
-		antennaId: props.antenna
+		antennaId: props.antenna,
 	};
 	connection = stream.useChannel('antenna', {
-		antennaId: props.antenna
+		antennaId: props.antenna,
 	});
 	connection.on('note', prepend);
 } else if (props.src === 'home') {
@@ -96,7 +96,7 @@ if (props.src === 'antenna') {
 } else if (props.src === 'directs') {
 	endpoint = 'notes/mentions';
 	query = {
-		visibility: 'specified'
+		visibility: 'specified',
 	};
 	const onNote = note => {
 		if (note.visibility === 'specified') {
@@ -108,10 +108,10 @@ if (props.src === 'antenna') {
 } else if (props.src === 'list') {
 	endpoint = 'notes/user-list-timeline';
 	query = {
-		listId: props.list
+		listId: props.list,
 	};
 	connection = stream.useChannel('userList', {
-		listId: props.list
+		listId: props.list,
 	});
 	connection.on('note', prepend);
 	connection.on('userAdded', onUserAdded);
@@ -119,10 +119,10 @@ if (props.src === 'antenna') {
 } else if (props.src === 'channel') {
 	endpoint = 'channels/timeline';
 	query = {
-		channelId: props.channel
+		channelId: props.channel,
 	};
 	connection = stream.useChannel('channel', {
-		channelId: props.channel
+		channelId: props.channel,
 	});
 	connection.on('note', prepend);
 }
diff --git a/packages/client/src/components/toast.vue b/packages/client/src/components/MkToast.vue
similarity index 100%
rename from packages/client/src/components/toast.vue
rename to packages/client/src/components/MkToast.vue
diff --git a/packages/client/src/components/token-generate-window.vue b/packages/client/src/components/MkTokenGenerateWindow.vue
similarity index 100%
rename from packages/client/src/components/token-generate-window.vue
rename to packages/client/src/components/MkTokenGenerateWindow.vue
diff --git a/packages/client/src/components/updated.vue b/packages/client/src/components/MkUpdated.vue
similarity index 95%
rename from packages/client/src/components/updated.vue
rename to packages/client/src/components/MkUpdated.vue
index 0dd4406401..f6c4b59893 100644
--- a/packages/client/src/components/updated.vue
+++ b/packages/client/src/components/MkUpdated.vue
@@ -13,7 +13,7 @@
 import { ref } from 'vue';
 import MkModal from '@/components/ui/modal.vue';
 import MkButton from '@/components/ui/button.vue';
-import MkSparkle from '@/components/sparkle.vue';
+import MkSparkle from '@/components/MkSparkle.vue';
 import { version } from '@/config';
 import { i18n } from '@/i18n';
 
diff --git a/packages/client/src/components/url-preview.vue b/packages/client/src/components/MkUrlPreview.vue
similarity index 100%
rename from packages/client/src/components/url-preview.vue
rename to packages/client/src/components/MkUrlPreview.vue
diff --git a/packages/client/src/components/url-preview-popup.vue b/packages/client/src/components/MkUrlPreviewPopup.vue
similarity index 88%
rename from packages/client/src/components/url-preview-popup.vue
rename to packages/client/src/components/MkUrlPreviewPopup.vue
index 5f3717ab91..2f0ffaa388 100644
--- a/packages/client/src/components/url-preview-popup.vue
+++ b/packages/client/src/components/MkUrlPreviewPopup.vue
@@ -8,25 +8,25 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import MkUrlPreview from './url-preview.vue';
+import MkUrlPreview from '@/components/MkUrlPreview.vue';
 import * as os from '@/os';
 
 export default defineComponent({
 	components: {
-		MkUrlPreview
+		MkUrlPreview,
 	},
 
 	props: {
 		url: {
 			type: String,
-			required: true
+			required: true,
 		},
 		source: {
-			required: true
+			required: true,
 		},
 		showing: {
 			type: Boolean,
-			required: true
+			required: true,
 		},
 	},
 
diff --git a/packages/client/src/components/user-card-mini.vue b/packages/client/src/components/MkUserCardMini.vue
similarity index 97%
rename from packages/client/src/components/user-card-mini.vue
rename to packages/client/src/components/MkUserCardMini.vue
index 732adf7f5b..1a4c494987 100644
--- a/packages/client/src/components/user-card-mini.vue
+++ b/packages/client/src/components/MkUserCardMini.vue
@@ -11,7 +11,7 @@
 
 <script lang="ts" setup>
 import * as misskey from 'misskey-js';
-import MkMiniChart from '@/components/mini-chart.vue';
+import MkMiniChart from '@/components/MkMiniChart.vue';
 import * as os from '@/os';
 import { acct } from '@/filters/user';
 
diff --git a/packages/client/src/components/user-info.vue b/packages/client/src/components/MkUserInfo.vue
similarity index 97%
rename from packages/client/src/components/user-info.vue
rename to packages/client/src/components/MkUserInfo.vue
index 174167c26e..5b2b90d3b1 100644
--- a/packages/client/src/components/user-info.vue
+++ b/packages/client/src/components/MkUserInfo.vue
@@ -29,7 +29,7 @@
 
 <script lang="ts" setup>
 import * as misskey from 'misskey-js';
-import MkFollowButton from './follow-button.vue';
+import MkFollowButton from '@/components/MkFollowButton.vue';
 import { userPage } from '@/filters/user';
 import { i18n } from '@/i18n';
 
diff --git a/packages/client/src/components/user-list.vue b/packages/client/src/components/MkUserList.vue
similarity index 94%
rename from packages/client/src/components/user-list.vue
rename to packages/client/src/components/MkUserList.vue
index 5c98d6c63b..c9241707d5 100644
--- a/packages/client/src/components/user-list.vue
+++ b/packages/client/src/components/MkUserList.vue
@@ -17,7 +17,7 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue';
-import MkUserInfo from '@/components/user-info.vue';
+import MkUserInfo from '@/components/MkUserInfo.vue';
 import MkPagination, { Paging } from '@/components/ui/pagination.vue';
 import { userPage } from '@/filters/user';
 import { i18n } from '@/i18n';
diff --git a/packages/client/src/components/user-online-indicator.vue b/packages/client/src/components/MkUserOnlineIndicator.vue
similarity index 100%
rename from packages/client/src/components/user-online-indicator.vue
rename to packages/client/src/components/MkUserOnlineIndicator.vue
diff --git a/packages/client/src/components/user-preview.vue b/packages/client/src/components/MkUserPreview.vue
similarity index 96%
rename from packages/client/src/components/user-preview.vue
rename to packages/client/src/components/MkUserPreview.vue
index 7307ddc926..b8a67028f8 100644
--- a/packages/client/src/components/user-preview.vue
+++ b/packages/client/src/components/MkUserPreview.vue
@@ -36,27 +36,27 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import * as Acct from 'misskey-js/built/acct';
-import MkFollowButton from './follow-button.vue';
+import MkFollowButton from '@/components/MkFollowButton.vue';
 import { userPage } from '@/filters/user';
 import * as os from '@/os';
 
 export default defineComponent({
 	components: {
-		MkFollowButton
+		MkFollowButton,
 	},
 
 	props: {
 		showing: {
 			type: Boolean,
-			required: true
+			required: true,
 		},
 		q: {
 			type: String,
-			required: true
+			required: true,
 		},
 		source: {
-			required: true
-		}
+			required: true,
+		},
 	},
 
 	emits: ['closed', 'mouseover', 'mouseleave'],
@@ -96,8 +96,8 @@ export default defineComponent({
 	},
 
 	methods: {
-		userPage
-	}
+		userPage,
+	},
 });
 </script>
 
diff --git a/packages/client/src/components/user-select-dialog.vue b/packages/client/src/components/MkUserSelectDialog.vue
similarity index 100%
rename from packages/client/src/components/user-select-dialog.vue
rename to packages/client/src/components/MkUserSelectDialog.vue
diff --git a/packages/client/src/components/users-tooltip.vue b/packages/client/src/components/MkUsersTooltip.vue
similarity index 100%
rename from packages/client/src/components/users-tooltip.vue
rename to packages/client/src/components/MkUsersTooltip.vue
diff --git a/packages/client/src/components/visibility.vue b/packages/client/src/components/MkVisibility.vue
similarity index 95%
rename from packages/client/src/components/visibility.vue
rename to packages/client/src/components/MkVisibility.vue
index b41c950331..739720bf91 100644
--- a/packages/client/src/components/visibility.vue
+++ b/packages/client/src/components/MkVisibility.vue
@@ -9,7 +9,7 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue';
-import XDetails from '@/components/users-tooltip.vue';
+import XDetails from '@/components/MkUsersTooltip.vue';
 import * as os from '@/os';
 import { useTooltip } from '@/scripts/use-tooltip';
 
diff --git a/packages/client/src/components/visibility-picker.vue b/packages/client/src/components/MkVisibilityPicker.vue
similarity index 100%
rename from packages/client/src/components/visibility-picker.vue
rename to packages/client/src/components/MkVisibilityPicker.vue
diff --git a/packages/client/src/components/waiting-dialog.vue b/packages/client/src/components/MkWaitingDialog.vue
similarity index 100%
rename from packages/client/src/components/waiting-dialog.vue
rename to packages/client/src/components/MkWaitingDialog.vue
diff --git a/packages/client/src/components/widgets.vue b/packages/client/src/components/MkWidgets.vue
similarity index 100%
rename from packages/client/src/components/widgets.vue
rename to packages/client/src/components/MkWidgets.vue
diff --git a/packages/client/src/components/form/checkbox.vue b/packages/client/src/components/form/checkbox.vue
index fb5c82bb48..bd56c9c7ea 100644
--- a/packages/client/src/components/form/checkbox.vue
+++ b/packages/client/src/components/form/checkbox.vue
@@ -23,7 +23,7 @@
 <script lang="ts" setup>
 import { toRefs, Ref } from 'vue';
 import * as os from '@/os';
-import Ripple from '@/components/ripple.vue';
+import Ripple from '@/components/MkRipple.vue';
 import { i18n } from '@/i18n';
 
 const props = defineProps<{
diff --git a/packages/client/src/components/global/a.vue b/packages/client/src/components/global/MkA.vue
similarity index 100%
rename from packages/client/src/components/global/a.vue
rename to packages/client/src/components/global/MkA.vue
diff --git a/packages/client/src/components/global/acct.vue b/packages/client/src/components/global/MkAcct.vue
similarity index 100%
rename from packages/client/src/components/global/acct.vue
rename to packages/client/src/components/global/MkAcct.vue
diff --git a/packages/client/src/components/global/MkAd.vue b/packages/client/src/components/global/MkAd.vue
new file mode 100644
index 0000000000..fb52c91fda
--- /dev/null
+++ b/packages/client/src/components/global/MkAd.vue
@@ -0,0 +1,186 @@
+<template>
+<div v-if="chosen && defaultStore.state.showAds" class="qiivuoyo">
+	<div v-if="!showMenu" class="main" :class="chosen.place">
+		<a :href="chosen.url" target="_blank">
+			<img :src="chosen.imageUrl">
+			<button class="_button menu" @click.prevent.stop="toggleMenu"><span class="fas fa-info-circle info-circle"></span></button>
+		</a>
+	</div>
+	<div v-else class="menu">
+		<div class="body">
+			<div>Ads by {{ host }}</div>
+			<!--<MkButton class="button" primary>{{ $ts._ad.like }}</MkButton>-->
+			<MkButton v-if="chosen.ratio !== 0" class="button" @click="reduceFrequency">{{ $ts._ad.reduceFrequencyOfThisAd }}</MkButton>
+			<button class="_textButton" @click="toggleMenu">{{ $ts._ad.back }}</button>
+		</div>
+	</div>
+</div>
+<div v-else></div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { instance } from '@/instance';
+import { host } from '@/config';
+import MkButton from '@/components/ui/button.vue';
+import { defaultStore } from '@/store';
+import * as os from '@/os';
+
+type Ad = (typeof instance)['ads'][number];
+
+const props = defineProps<{
+	prefer: string[];
+	specify?: Ad;
+}>();
+
+const showMenu = ref(false);
+const toggleMenu = (): void => {
+	showMenu.value = !showMenu.value;
+};
+
+const choseAd = (): Ad | null => {
+	if (props.specify) {
+		return props.specify;
+	}
+
+	const allAds = instance.ads.map(ad => defaultStore.state.mutedAds.includes(ad.id) ? {
+		...ad,
+		ratio: 0,
+	} : ad);
+
+	let ads = allAds.filter(ad => props.prefer.includes(ad.place));
+
+	if (ads.length === 0) {
+		ads = allAds.filter(ad => ad.place === 'square');
+	}
+
+	const lowPriorityAds = ads.filter(ad => ad.ratio === 0);
+	ads = ads.filter(ad => ad.ratio !== 0);
+
+	if (ads.length === 0) {
+		if (lowPriorityAds.length !== 0) {
+			return lowPriorityAds[Math.floor(Math.random() * lowPriorityAds.length)];
+		} else {
+			return null;
+		}
+	}
+
+	const totalFactor = ads.reduce((a, b) => a + b.ratio, 0);
+	const r = Math.random() * totalFactor;
+
+	let stackedFactor = 0;
+	for (const ad of ads) {
+		if (r >= stackedFactor && r <= stackedFactor + ad.ratio) {
+			return ad;
+		} else {
+			stackedFactor += ad.ratio;
+		}
+	}
+
+	return null;
+};
+
+const chosen = ref(choseAd());
+
+function reduceFrequency(): void {
+	if (chosen.value == null) return;
+	if (defaultStore.state.mutedAds.includes(chosen.value.id)) return;
+	defaultStore.push('mutedAds', chosen.value.id);
+	os.success();
+	chosen.value = choseAd();
+	showMenu.value = false;
+}
+</script>
+
+<style lang="scss" scoped>
+.qiivuoyo {
+	background-size: auto auto;
+	background-image: repeating-linear-gradient(45deg, transparent, transparent 8px, var(--ad) 8px, var(--ad) 14px );
+
+	> .main {
+		text-align: center;
+
+		> a {
+			display: inline-block;
+			position: relative;
+			vertical-align: bottom;
+
+			&:hover {
+				> img {
+					filter: contrast(120%);
+				}
+			}
+
+			> img {
+				display: block;
+				object-fit: contain;
+				margin: auto;
+				border-radius: 5px;
+			}
+
+			> .menu {
+				position: absolute;
+				top: 1px;
+				right: 1px;
+
+				> .info-circle {
+					border: 3px solid var(--panel);
+					border-radius: 50%;
+					background: var(--panel);
+				}
+			}
+		}
+
+		&.square {
+			> a ,
+			> a > img {
+				max-width: min(300px, 100%);
+				max-height: 300px;
+			}
+		}
+
+		&.horizontal {
+			padding: 8px;
+
+			> a ,
+			> a > img {
+				max-width: min(600px, 100%);
+				max-height: 80px;
+			}
+		}
+
+		&.horizontal-big {
+			padding: 8px;
+
+			> a ,
+			> a > img {
+				max-width: min(600px, 100%);
+				max-height: 250px;
+			}
+		}
+
+		&.vertical {
+			> a ,
+			> a > img {
+				max-width: min(100px, 100%);
+			}
+		}
+	}
+
+	> .menu {
+		padding: 8px;
+		text-align: center;
+
+		> .body {
+			padding: 8px;
+			margin: 0 auto;
+			max-width: 400px;
+			border: solid 1px var(--divider);
+
+			> .button {
+				margin: 8px auto;
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/client/src/components/global/avatar.vue b/packages/client/src/components/global/MkAvatar.vue
similarity index 98%
rename from packages/client/src/components/global/avatar.vue
rename to packages/client/src/components/global/MkAvatar.vue
index 4868896c99..5f3e3c176d 100644
--- a/packages/client/src/components/global/avatar.vue
+++ b/packages/client/src/components/global/MkAvatar.vue
@@ -15,7 +15,7 @@ import * as misskey from 'misskey-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/user-online-indicator.vue';
+import MkUserOnlineIndicator from '@/components/MkUserOnlineIndicator.vue';
 import { defaultStore } from '@/store';
 
 const props = withDefaults(defineProps<{
diff --git a/packages/client/src/components/global/ellipsis.vue b/packages/client/src/components/global/MkEllipsis.vue
similarity index 100%
rename from packages/client/src/components/global/ellipsis.vue
rename to packages/client/src/components/global/MkEllipsis.vue
diff --git a/packages/client/src/components/global/emoji.vue b/packages/client/src/components/global/MkEmoji.vue
similarity index 100%
rename from packages/client/src/components/global/emoji.vue
rename to packages/client/src/components/global/MkEmoji.vue
diff --git a/packages/client/src/components/global/error.vue b/packages/client/src/components/global/MkError.vue
similarity index 100%
rename from packages/client/src/components/global/error.vue
rename to packages/client/src/components/global/MkError.vue
diff --git a/packages/client/src/components/global/loading.vue b/packages/client/src/components/global/MkLoading.vue
similarity index 100%
rename from packages/client/src/components/global/loading.vue
rename to packages/client/src/components/global/MkLoading.vue
diff --git a/packages/client/src/components/global/misskey-flavored-markdown.vue b/packages/client/src/components/global/MkMisskeyFlavoredMarkdown.vue
similarity index 100%
rename from packages/client/src/components/global/misskey-flavored-markdown.vue
rename to packages/client/src/components/global/MkMisskeyFlavoredMarkdown.vue
diff --git a/packages/client/src/components/global/page-header.vue b/packages/client/src/components/global/MkPageHeader.vue
similarity index 100%
rename from packages/client/src/components/global/page-header.vue
rename to packages/client/src/components/global/MkPageHeader.vue
diff --git a/packages/client/src/components/global/spacer.vue b/packages/client/src/components/global/MkSpacer.vue
similarity index 100%
rename from packages/client/src/components/global/spacer.vue
rename to packages/client/src/components/global/MkSpacer.vue
diff --git a/packages/client/src/components/global/sticky-container.vue b/packages/client/src/components/global/MkStickyContainer.vue
similarity index 100%
rename from packages/client/src/components/global/sticky-container.vue
rename to packages/client/src/components/global/MkStickyContainer.vue
diff --git a/packages/client/src/components/global/time.vue b/packages/client/src/components/global/MkTime.vue
similarity index 100%
rename from packages/client/src/components/global/time.vue
rename to packages/client/src/components/global/MkTime.vue
diff --git a/packages/client/src/components/global/url.vue b/packages/client/src/components/global/MkUrl.vue
similarity index 60%
rename from packages/client/src/components/global/url.vue
rename to packages/client/src/components/global/MkUrl.vue
index dc79a20649..37c0212eaa 100644
--- a/packages/client/src/components/global/url.vue
+++ b/packages/client/src/components/global/MkUrl.vue
@@ -18,54 +18,39 @@
 </component>
 </template>
 
-<script lang="ts">
-import { defineAsyncComponent, defineComponent, ref } from 'vue';
+<script lang="ts" setup>
+import { defineAsyncComponent, ref } from 'vue';
 import { toUnicode as decodePunycode } from 'punycode/';
 import { url as local } from '@/config';
 import * as os from '@/os';
 import { useTooltip } from '@/scripts/use-tooltip';
 import { safeURIDecode } from '@/scripts/safe-uri-decode';
 
-export default defineComponent({
-	props: {
-		url: {
-			type: String,
-			required: true,
-		},
-		rel: {
-			type: String,
-			required: false,
-			default: null,
-		},
-	},
-	setup(props) {
-		const self = props.url.startsWith(local);
-		const url = new URL(props.url);
-		const el = ref();
-		
-		useTooltip(el, (showing) => {
-			os.popup(defineAsyncComponent(() => import('@/components/url-preview-popup.vue')), {
-				showing,
-				url: props.url,
-				source: el.value,
-			}, {}, 'closed');
-		});
+const props = defineProps<{
+	url: string;
+	rel?: string;
+}>();
 
-		return {
-			local,
-			schema: url.protocol,
-			hostname: decodePunycode(url.hostname),
-			port: url.port,
-			pathname: safeURIDecode(url.pathname),
-			query: safeURIDecode(url.search),
-			hash: safeURIDecode(url.hash),
-			self: self,
-			attr: self ? 'to' : 'href',
-			target: self ? null : '_blank',
-			el,
-		};
-	},
+const self = props.url.startsWith(local);
+const url = new URL(props.url);
+const el = ref();
+
+useTooltip(el, (showing) => {
+	os.popup(defineAsyncComponent(() => import('@/components/MkUrlPreviewPopup.vue')), {
+		showing,
+		url: props.url,
+		source: el.value,
+	}, {}, 'closed');
 });
+
+const schema = url.protocol;
+const hostname = decodePunycode(url.hostname);
+const port = url.port;
+const pathname = safeURIDecode(url.pathname);
+const query = safeURIDecode(url.search);
+const hash = safeURIDecode(url.hash);
+const attr = self ? 'to' : 'href';
+const target = self ? null : '_blank';
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/components/global/user-name.vue b/packages/client/src/components/global/MkUserName.vue
similarity index 100%
rename from packages/client/src/components/global/user-name.vue
rename to packages/client/src/components/global/MkUserName.vue
diff --git a/packages/client/src/components/global/router-view.vue b/packages/client/src/components/global/RouterView.vue
similarity index 100%
rename from packages/client/src/components/global/router-view.vue
rename to packages/client/src/components/global/RouterView.vue
diff --git a/packages/client/src/components/global/ad.vue b/packages/client/src/components/global/ad.vue
deleted file mode 100644
index a887f607c7..0000000000
--- a/packages/client/src/components/global/ad.vue
+++ /dev/null
@@ -1,208 +0,0 @@
-<template>
-<div v-if="ad && showAds" class="qiivuoyo">
-	<div v-if="!showMenu" class="main" :class="ad.place">
-		<a :href="ad.url" target="_blank">
-			<img :src="ad.imageUrl">
-			<button class="_button menu" @click.prevent.stop="toggleMenu"><span class="fas fa-info-circle info-circle"></span></button>
-		</a>
-	</div>
-	<div v-else class="menu">
-		<div class="body">
-			<div>Ads by {{ host }}</div>
-			<!--<MkButton class="button" primary>{{ $ts._ad.like }}</MkButton>-->
-			<MkButton v-if="ad.ratio !== 0" class="button" @click="reduceFrequency">{{ $ts._ad.reduceFrequencyOfThisAd }}</MkButton>
-			<button class="_textButton" @click="toggleMenu">{{ $ts._ad.back }}</button>
-		</div>
-	</div>
-</div>
-<div v-else></div>
-</template>
-
-<script lang="ts">
-import { defineComponent, ref } from 'vue';
-import { instance } from '@/instance';
-import { host } from '@/config';
-import MkButton from '@/components/ui/button.vue';
-import { defaultStore } from '@/store';
-import * as os from '@/os';
-
-export default defineComponent({
-	components: {
-		MkButton
-	},
-
-	props: {
-		prefer: {
-			type: Array,
-			required: true
-		},
-		specify: {
-			type: Object,
-			required: false
-		},
-	},
-
-	setup(props) {
-		const showMenu = ref(false);
-		const showAds = defaultStore.state.showAds;
-		const toggleMenu = () => {
-			showMenu.value = !showMenu.value;
-		};
-
-		const choseAd = (): (typeof instance)['ads'][number] | null => {
-			if (props.specify) {
-				return props.specify as (typeof instance)['ads'][number];
-			}
-
-			const allAds = instance.ads.map(ad => defaultStore.state.mutedAds.includes(ad.id) ? {
-				...ad,
-				ratio: 0
-			} : ad);
-
-			let ads = allAds.filter(ad => props.prefer.includes(ad.place));
-
-			if (ads.length === 0) {
-				ads = allAds.filter(ad => ad.place === 'square');
-			}
-
-			const lowPriorityAds = ads.filter(ad => ad.ratio === 0);
-			ads = ads.filter(ad => ad.ratio !== 0);
-
-			if (ads.length === 0) {
-				if (lowPriorityAds.length !== 0) {
-					return lowPriorityAds[Math.floor(Math.random() * lowPriorityAds.length)];
-				} else {
-					return null;
-				}
-			}
-
-			const totalFactor = ads.reduce((a, b) => a + b.ratio, 0);
-			const r = Math.random() * totalFactor;
-
-			let stackedFactor = 0;
-			for (const ad of ads) {
-				if (r >= stackedFactor && r <= stackedFactor + ad.ratio) {
-					return ad;
-				} else {
-					stackedFactor += ad.ratio;
-				}
-			}
-
-			return null;
-		};
-
-		const chosen = ref(choseAd());
-
-		const reduceFrequency = () => {
-			if (chosen.value == null) return;
-			if (defaultStore.state.mutedAds.includes(chosen.value.id)) return;
-			defaultStore.push('mutedAds', chosen.value.id);
-			os.success();
-			chosen.value = choseAd();
-			showMenu.value = false;
-		};
-
-		return {
-			ad: chosen,
-			showMenu,
-			showAds,
-			toggleMenu,
-			host,
-			reduceFrequency,
-		};
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.qiivuoyo {
-	background-size: auto auto;
-	background-image: repeating-linear-gradient(45deg, transparent, transparent 8px, var(--ad) 8px, var(--ad) 14px );
-
-	> .main {
-		text-align: center;
-
-		> a {
-			display: inline-block;
-			position: relative;
-			vertical-align: bottom;
-
-			&:hover {
-				> img {
-					filter: contrast(120%);
-				}
-			}
-
-			> img {
-				display: block;
-				object-fit: contain;
-				margin: auto;
-				border-radius: 5px;
-			}
-
-			> .menu {
-				position: absolute;
-				top: 1px;
-				right: 1px;
-
-				> .info-circle {
-					border: 3px solid var(--panel);
-					border-radius: 50%;
-					background: var(--panel);
-				}
-			}
-		}
-
-		&.square {
-			> a ,
-			> a > img {
-				max-width: min(300px, 100%);
-				max-height: 300px;
-			}
-		}
-
-		&.horizontal {
-			padding: 8px;
-
-			> a ,
-			> a > img {
-				max-width: min(600px, 100%);
-				max-height: 80px;
-			}
-		}
-
-		&.horizontal-big {
-			padding: 8px;
-
-			> a ,
-			> a > img {
-				max-width: min(600px, 100%);
-				max-height: 250px;
-			}
-		}
-
-		&.vertical {
-			> a ,
-			> a > img {
-				max-width: min(100px, 100%);
-			}
-		}
-	}
-
-	> .menu {
-		padding: 8px;
-		text-align: center;
-
-		> .body {
-			padding: 8px;
-			margin: 0 auto;
-			max-width: 400px;
-			border: solid 1px var(--divider);
-
-			> .button {
-				margin: 8px auto;
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/components/index.ts b/packages/client/src/components/index.ts
index aa8a591e51..8639257003 100644
--- a/packages/client/src/components/index.ts
+++ b/packages/client/src/components/index.ts
@@ -1,22 +1,22 @@
 import { App } from 'vue';
 
-import Mfm from './global/misskey-flavored-markdown.vue';
-import MkA from './global/a.vue';
-import MkAcct from './global/acct.vue';
-import MkAvatar from './global/avatar.vue';
-import MkEmoji from './global/emoji.vue';
-import MkUserName from './global/user-name.vue';
-import MkEllipsis from './global/ellipsis.vue';
-import MkTime from './global/time.vue';
-import MkUrl from './global/url.vue';
+import Mfm from './global/MkMisskeyFlavoredMarkdown.vue';
+import MkA from './global/MkA.vue';
+import MkAcct from './global/MkAcct.vue';
+import MkAvatar from './global/MkAvatar.vue';
+import MkEmoji from './global/MkEmoji.vue';
+import MkUserName from './global/MkUserName.vue';
+import MkEllipsis from './global/MkEllipsis.vue';
+import MkTime from './global/MkTime.vue';
+import MkUrl from './global/MkUrl.vue';
 import I18n from './global/i18n';
-import RouterView from './global/router-view.vue';
-import MkLoading from './global/loading.vue';
-import MkError from './global/error.vue';
-import MkAd from './global/ad.vue';
-import MkPageHeader from './global/page-header.vue';
-import MkSpacer from './global/spacer.vue';
-import MkStickyContainer from './global/sticky-container.vue';
+import RouterView from './global/RouterView.vue';
+import MkLoading from './global/MkLoading.vue';
+import MkError from './global/MkError.vue';
+import MkAd from './global/MkAd.vue';
+import MkPageHeader from './global/MkPageHeader.vue';
+import MkSpacer from './global/MkSpacer.vue';
+import MkStickyContainer from './global/MkStickyContainer.vue';
 
 export default function(app: App) {
 	app.component('I18n', I18n);
diff --git a/packages/client/src/components/mfm.ts b/packages/client/src/components/mfm.ts
index a6fef39a21..5b1e6839c9 100644
--- a/packages/client/src/components/mfm.ts
+++ b/packages/client/src/components/mfm.ts
@@ -1,15 +1,15 @@
 import { VNode, defineComponent, h } from 'vue';
 import * as mfm from 'mfm-js';
-import MkUrl from '@/components/global/url.vue';
-import MkLink from '@/components/link.vue';
-import MkMention from '@/components/mention.vue';
-import MkEmoji from '@/components/global/emoji.vue';
+import MkUrl from '@/components/global/MkUrl.vue';
+import MkLink from '@/components/MkLink.vue';
+import MkMention from '@/components/MkMention.vue';
+import MkEmoji from '@/components/global/MkEmoji.vue';
 import { concat } from '@/scripts/array';
-import MkFormula from '@/components/formula.vue';
-import MkCode from '@/components/code.vue';
-import MkGoogle from '@/components/google.vue';
-import MkSparkle from '@/components/sparkle.vue';
-import MkA from '@/components/global/a.vue';
+import MkFormula from '@/components/MkFormula.vue';
+import MkCode from '@/components/MkCode.vue';
+import MkGoogle from '@/components/MkGoogle.vue';
+import MkSparkle from '@/components/MkSparkle.vue';
+import MkA from '@/components/global/MkA.vue';
 import { host } from '@/config';
 import { MFM_TAGS } from '@/scripts/mfm-tags';
 
diff --git a/packages/client/src/components/page/page.image.vue b/packages/client/src/components/page/page.image.vue
index 6e38a9f424..8ba70c5855 100644
--- a/packages/client/src/components/page/page.image.vue
+++ b/packages/client/src/components/page/page.image.vue
@@ -6,7 +6,7 @@
 
 <script lang="ts" setup>
 import { defineComponent, PropType } from 'vue';
-import ImgWithBlurhash from '@/components/img-with-blurhash.vue';
+import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
 import * as os from '@/os';
 import { ImageBlock } from '@/scripts/hpml/block';
 import { Hpml } from '@/scripts/hpml/evaluator';
diff --git a/packages/client/src/components/page/page.note.vue b/packages/client/src/components/page/page.note.vue
index 3bb338b095..431f0b08df 100644
--- a/packages/client/src/components/page/page.note.vue
+++ b/packages/client/src/components/page/page.note.vue
@@ -7,8 +7,8 @@
 
 <script lang="ts">
 import { defineComponent, onMounted, PropType, Ref, ref } from 'vue';
-import XNote from '@/components/note.vue';
-import XNoteDetailed from '@/components/note-detailed.vue';
+import XNote from '@/components/MkNote.vue';
+import XNoteDetailed from '@/components/MkNoteDetailed.vue';
 import * as os from '@/os';
 import { NoteBlock } from '@/scripts/hpml/block';
 
diff --git a/packages/client/src/components/page/page.text.vue b/packages/client/src/components/page/page.text.vue
index 1e07da8c06..54f52ee05e 100644
--- a/packages/client/src/components/page/page.text.vue
+++ b/packages/client/src/components/page/page.text.vue
@@ -1,57 +1,65 @@
 <template>
 <div class="mrdgzndn">
-	<Mfm :key="text" :text="text" :is-note="false"/>
+	<Mfm :key="text" :text="text" :is-note="false" :i="$i"/>
 	<MkUrlPreview v-for="url in urls" :key="url" :url="url" class="url"/>
 </div>
 </template>
 
-<script lang="ts" setup>
-import { defineAsyncComponent, watch, computed } from 'vue';
-import * as mfm from 'mfm-js';
+<script lang="ts">
 import { TextBlock } from '@/scripts/hpml/block';
 import { Hpml } from '@/scripts/hpml/evaluator';
+import { defineAsyncComponent, defineComponent, PropType } from 'vue';
+import * as mfm from 'mfm-js';
 import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm';
-
-const props = defineProps<{
-	block: TextBlock;
-	hpml: Hpml;
-}>();
-
-const MkUrlPreview = defineAsyncComponent(() => import('@/components/url-preview.vue'));
-
-let text: string = $ref('');
-
-const urls = computed((): string[] => {
-	if (text) {
-		return extractUrlFromMfm(mfm.parse(text));
-	} else {
-		return [];
-	}
-});
-
-watch(props.hpml.vars, () => {
-	text = props.hpml.interpolate(props.block.text) as string;
-}, {
-	deep: true,
-	immediate: true,
+export default defineComponent({
+	components: {
+		MkUrlPreview: defineAsyncComponent(() => import('@/components/MkUrlPreview.vue')),
+	},
+	props: {
+		block: {
+			type: Object as PropType<TextBlock>,
+			required: true
+		},
+		hpml: {
+			type: Object as PropType<Hpml>,
+			required: true
+		}
+	},
+	data() {
+		return {
+			text: this.hpml.interpolate(this.block.text),
+		};
+	},
+	computed: {
+		urls(): string[] {
+			if (this.text) {
+				return extractUrlFromMfm(mfm.parse(this.text));
+			} else {
+				return [];
+			}
+		}
+	},
+	watch: {
+		'hpml.vars': {
+			handler() {
+				this.text = this.hpml.interpolate(this.block.text);
+			},
+			deep: true
+		}
+	},
 });
 </script>
 
-<style lang="scss" scoped>
-.mrdgzndn {
-	padding-left: 1em;
-	padding-right: 1em;
-
-	&:not(:first-child) {
-		margin-top: 0.5em;
+	<style lang="scss" scoped>
+	.mrdgzndn {
+		&:not(:first-child) {
+			margin-top: 0.5em;
+		}
+		&:not(:last-child) {
+			margin-bottom: 0.5em;
+		}
+		> .url {
+			margin: 0.5em 0;
+		}
 	}
-
-	&:not(:last-child) {
-		margin-bottom: 0.5em;
-	}
-
-	> .url {
-		margin: 0.5em 0;
-	}
-}
-</style>
+	</style>
diff --git a/packages/client/src/components/renote-button.vue b/packages/client/src/components/renote-button.vue
deleted file mode 100644
index a067b884f3..0000000000
--- a/packages/client/src/components/renote-button.vue
+++ /dev/null
@@ -1,114 +0,0 @@
-<template>
-<button v-if="canRenote"
-	ref="buttonRef"
-	class="eddddedb _button canRenote"
-	@click="renote()"
->
-	<i class="fas fa-retweet"></i>
-	<p v-if="count > 0" class="count">{{ count }}</p>
-</button>
-<button v-else class="eddddedb _button">
-	<i class="fas fa-ban"></i>
-</button>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, ref } from 'vue';
-import XDetails from '@/components/users-tooltip.vue';
-import { pleaseLogin } from '@/scripts/please-login';
-import * as os from '@/os';
-import { $i } from '@/account';
-import { useTooltip } from '@/scripts/use-tooltip';
-import { i18n } from '@/i18n';
-
-export default defineComponent({
-	props: {
-		count: {
-			type: Number,
-			required: true,
-		},
-		note: {
-			type: Object,
-			required: true,
-		},
-	},
-
-	setup(props) {
-		const buttonRef = ref<HTMLElement>();
-
-		const canRenote = computed(() => ['public', 'home'].includes(props.note.visibility) || props.note.userId === $i.id);
-
-		useTooltip(buttonRef, async (showing) => {
-			const renotes = await os.api('notes/renotes', {
-				noteId: props.note.id,
-				limit: 11
-			});
-
-			const users = renotes.map(x => x.user);
-
-			if (users.length < 1) return;
-
-			os.popup(XDetails, {
-				showing,
-				users,
-				count: props.count,
-				targetElement: buttonRef.value
-			}, {}, 'closed');
-		});
-
-		const renote = (viaKeyboard = false) => {
-			pleaseLogin();
-			os.popupMenu([{
-				text: i18n.ts.renote,
-				icon: 'fas fa-retweet',
-				action: () => {
-					os.api('notes/create', {
-						renoteId: props.note.id,
-						visibility: props.note.visibility,
-					});
-				}
-			}, {
-				text: i18n.ts.quote,
-				icon: 'fas fa-quote-right',
-				action: () => {
-					os.post({
-						renote: props.note,
-					});
-				}
-			}], buttonRef.value, {
-				viaKeyboard
-			});
-		};
-
-		return {
-			buttonRef,
-			canRenote,
-			renote,
-		};
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.eddddedb {
-	display: inline-block;
-	height: 32px;
-	margin: 2px;
-	padding: 0 6px;
-	border-radius: 4px;
-
-	&:not(.canRenote) {
-		cursor: default;
-	}
-
-	&.renoted {
-		background: var(--accent);
-	}
-
-	> .count {
-		display: inline;
-		margin-left: 8px;
-		opacity: 0.7;
-	}
-}
-</style>
diff --git a/packages/client/src/components/ui/hr.vue b/packages/client/src/components/ui/hr.vue
deleted file mode 100644
index 0cb5b48875..0000000000
--- a/packages/client/src/components/ui/hr.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-<div class="evrzpitu"></div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import * as os from '@/os';
-
-export default defineComponent({});
-</script>
-
-<style lang="scss" scoped>
-.evrzpitu
-	margin 16px 0
-	border-bottom solid var(--lineWidth) var(--faceDivider)
-
-</style>
diff --git a/packages/client/src/directives/ripple.ts b/packages/client/src/directives/ripple.ts
index f1d41ddb0e..5329d021fb 100644
--- a/packages/client/src/directives/ripple.ts
+++ b/packages/client/src/directives/ripple.ts
@@ -1,4 +1,4 @@
-import Ripple from '@/components/ripple.vue';
+import Ripple from '@/components/MkRipple.vue';
 import { popup } from '@/os';
 
 export default {
diff --git a/packages/client/src/directives/user-preview.ts b/packages/client/src/directives/user-preview.ts
index 9d18a69877..c461676624 100644
--- a/packages/client/src/directives/user-preview.ts
+++ b/packages/client/src/directives/user-preview.ts
@@ -24,7 +24,7 @@ export class UserPreview {
 
 		const showing = ref(true);
 
-		popup(defineAsyncComponent(() => import('@/components/user-preview.vue')), {
+		popup(defineAsyncComponent(() => import('@/components/MkUserPreview.vue')), {
 			showing,
 			q: this.user,
 			source: this.el
diff --git a/packages/client/src/init.ts b/packages/client/src/init.ts
index 1a7a81b7cb..cb8eb5310f 100644
--- a/packages/client/src/init.ts
+++ b/packages/client/src/init.ts
@@ -242,7 +242,7 @@ import { getAccountFromId } from '@/scripts/get-account-from-id';
 			if (lastVersion != null && compareVersions(version, lastVersion) === 1 && defaultStore.state.showUpdates) {
 				// ログインしてる場合だけ
 				if ($i) {
-					popup(defineAsyncComponent(() => import('@/components/updated.vue')), {}, {}, 'closed');
+					popup(defineAsyncComponent(() => import('@/components/MkUpdated.vue')), {}, {}, 'closed');
 				}
 			}
 		} catch (err) {
diff --git a/packages/client/src/os.ts b/packages/client/src/os.ts
index ecf422a56e..1fd5dbceda 100644
--- a/packages/client/src/os.ts
+++ b/packages/client/src/os.ts
@@ -5,8 +5,8 @@ import { EventEmitter } from 'eventemitter3';
 import insertTextAtCursor from 'insert-text-at-cursor';
 import * as Misskey from 'misskey-js';
 import { apiUrl, url } from '@/config';
-import MkPostFormDialog from '@/components/post-form-dialog.vue';
-import MkWaitingDialog from '@/components/waiting-dialog.vue';
+import MkPostFormDialog from '@/components/MkPostFormDialog.vue';
+import MkWaitingDialog from '@/components/MkWaitingDialog.vue';
 import { MenuItem } from '@/types/menu';
 import { $i } from '@/account';
 
@@ -190,19 +190,19 @@ export async function popup(component: Component, props: Record<string, any>, ev
 }
 
 export function pageWindow(path: string) {
-	popup(defineAsyncComponent(() => import('@/components/page-window.vue')), {
+	popup(defineAsyncComponent(() => import('@/components/MkPageWindow.vue')), {
 		initialPath: path,
 	}, {}, 'closed');
 }
 
 export function modalPageWindow(path: string) {
-	popup(defineAsyncComponent(() => import('@/components/modal-page-window.vue')), {
+	popup(defineAsyncComponent(() => import('@/components/MkModalPageWindow.vue')), {
 		initialPath: path,
 	}, {}, 'closed');
 }
 
 export function toast(message: string) {
-	popup(defineAsyncComponent(() => import('@/components/toast.vue')), {
+	popup(defineAsyncComponent(() => import('@/components/MkToast.vue')), {
 		message,
 	}, {}, 'closed');
 }
@@ -213,7 +213,7 @@ export function alert(props: {
 	text?: string | null;
 }): Promise<void> {
 	return new Promise((resolve, reject) => {
-		popup(defineAsyncComponent(() => import('@/components/dialog.vue')), props, {
+		popup(defineAsyncComponent(() => import('@/components/MkDialog.vue')), props, {
 			done: result => {
 				resolve();
 			},
@@ -227,7 +227,7 @@ export function confirm(props: {
 	text?: string | null;
 }): Promise<{ canceled: boolean }> {
 	return new Promise((resolve, reject) => {
-		popup(defineAsyncComponent(() => import('@/components/dialog.vue')), {
+		popup(defineAsyncComponent(() => import('@/components/MkDialog.vue')), {
 			...props,
 			showCancelButton: true,
 		}, {
@@ -248,7 +248,7 @@ export function inputText(props: {
 	canceled: false; result: string;
 }> {
 	return new Promise((resolve, reject) => {
-		popup(defineAsyncComponent(() => import('@/components/dialog.vue')), {
+		popup(defineAsyncComponent(() => import('@/components/MkDialog.vue')), {
 			title: props.title,
 			text: props.text,
 			input: {
@@ -273,7 +273,7 @@ export function inputNumber(props: {
 	canceled: false; result: number;
 }> {
 	return new Promise((resolve, reject) => {
-		popup(defineAsyncComponent(() => import('@/components/dialog.vue')), {
+		popup(defineAsyncComponent(() => import('@/components/MkDialog.vue')), {
 			title: props.title,
 			text: props.text,
 			input: {
@@ -298,7 +298,7 @@ export function inputDate(props: {
 	canceled: false; result: Date;
 }> {
 	return new Promise((resolve, reject) => {
-		popup(defineAsyncComponent(() => import('@/components/dialog.vue')), {
+		popup(defineAsyncComponent(() => import('@/components/MkDialog.vue')), {
 			title: props.title,
 			text: props.text,
 			input: {
@@ -335,7 +335,7 @@ export function select<C = any>(props: {
 	canceled: false; result: C;
 }> {
 	return new Promise((resolve, reject) => {
-		popup(defineAsyncComponent(() => import('@/components/dialog.vue')), {
+		popup(defineAsyncComponent(() => import('@/components/MkDialog.vue')), {
 			title: props.title,
 			text: props.text,
 			select: {
@@ -357,7 +357,7 @@ export function success() {
 		window.setTimeout(() => {
 			showing.value = false;
 		}, 1000);
-		popup(defineAsyncComponent(() => import('@/components/waiting-dialog.vue')), {
+		popup(defineAsyncComponent(() => import('@/components/MkWaitingDialog.vue')), {
 			success: true,
 			showing: showing,
 		}, {
@@ -369,7 +369,7 @@ export function success() {
 export function waiting() {
 	return new Promise((resolve, reject) => {
 		const showing = ref(true);
-		popup(defineAsyncComponent(() => import('@/components/waiting-dialog.vue')), {
+		popup(defineAsyncComponent(() => import('@/components/MkWaitingDialog.vue')), {
 			success: false,
 			showing: showing,
 		}, {
@@ -380,7 +380,7 @@ export function waiting() {
 
 export function form(title, form) {
 	return new Promise((resolve, reject) => {
-		popup(defineAsyncComponent(() => import('@/components/form-dialog.vue')), { title, form }, {
+		popup(defineAsyncComponent(() => import('@/components/MkFormDialog.vue')), { title, form }, {
 			done: result => {
 				resolve(result);
 			},
@@ -390,7 +390,7 @@ export function form(title, form) {
 
 export async function selectUser() {
 	return new Promise((resolve, reject) => {
-		popup(defineAsyncComponent(() => import('@/components/user-select-dialog.vue')), {}, {
+		popup(defineAsyncComponent(() => import('@/components/MkUserSelectDialog.vue')), {}, {
 			ok: user => {
 				resolve(user);
 			},
@@ -400,7 +400,7 @@ export async function selectUser() {
 
 export async function selectDriveFile(multiple: boolean) {
 	return new Promise((resolve, reject) => {
-		popup(defineAsyncComponent(() => import('@/components/drive-select-dialog.vue')), {
+		popup(defineAsyncComponent(() => import('@/components/MkDriveSelectDialog.vue')), {
 			type: 'file',
 			multiple,
 		}, {
@@ -415,7 +415,7 @@ export async function selectDriveFile(multiple: boolean) {
 
 export async function selectDriveFolder(multiple: boolean) {
 	return new Promise((resolve, reject) => {
-		popup(defineAsyncComponent(() => import('@/components/drive-select-dialog.vue')), {
+		popup(defineAsyncComponent(() => import('@/components/MkDriveSelectDialog.vue')), {
 			type: 'folder',
 			multiple,
 		}, {
@@ -430,7 +430,7 @@ export async function selectDriveFolder(multiple: boolean) {
 
 export async function pickEmoji(src: HTMLElement | null, opts) {
 	return new Promise((resolve, reject) => {
-		popup(defineAsyncComponent(() => import('@/components/emoji-picker-dialog.vue')), {
+		popup(defineAsyncComponent(() => import('@/components/MkEmojiPickerDialog.vue')), {
 			src,
 			...opts,
 		}, {
@@ -445,7 +445,7 @@ export async function cropImage(image: Misskey.entities.DriveFile, options: {
 	aspectRatio: number;
 }): Promise<Misskey.entities.DriveFile> {
 	return new Promise((resolve, reject) => {
-		popup(defineAsyncComponent(() => import('@/components/cropper-dialog.vue')), {
+		popup(defineAsyncComponent(() => import('@/components/MkCropperDialog.vue')), {
 			file: image,
 			aspectRatio: options.aspectRatio,
 		}, {
@@ -495,7 +495,7 @@ export async function openEmojiPicker(src?: HTMLElement, opts, initialTextarea:
 		characterData: false,
 	});
 
-	openingEmojiPicker = await popup(defineAsyncComponent(() => import('@/components/emoji-picker-window.vue')), {
+	openingEmojiPicker = await popup(defineAsyncComponent(() => import('@/components/MkEmojiPickerWindow.vue')), {
 		src,
 		...opts,
 	}, {
diff --git a/packages/client/src/pages/about-misskey.vue b/packages/client/src/pages/about-misskey.vue
index f30b2d7ceb..173cc0eb4d 100644
--- a/packages/client/src/pages/about-misskey.vue
+++ b/packages/client/src/pages/about-misskey.vue
@@ -52,7 +52,7 @@ import { version } from '@/config';
 import FormLink from '@/components/form/link.vue';
 import FormSection from '@/components/form/section.vue';
 import MkButton from '@/components/ui/button.vue';
-import MkLink from '@/components/link.vue';
+import MkLink from '@/components/MkLink.vue';
 import { physics } from '@/scripts/physics';
 import { i18n } from '@/i18n';
 import { defaultStore } from '@/store';
diff --git a/packages/client/src/pages/about.emojis.vue b/packages/client/src/pages/about.emojis.vue
index 6d915c5843..8049975da3 100644
--- a/packages/client/src/pages/about.emojis.vue
+++ b/packages/client/src/pages/about.emojis.vue
@@ -34,7 +34,7 @@ import MkButton from '@/components/ui/button.vue';
 import MkInput from '@/components/form/input.vue';
 import MkSelect from '@/components/form/select.vue';
 import MkFolder from '@/components/ui/folder.vue';
-import MkTab from '@/components/tab.vue';
+import MkTab from '@/components/MkTab.vue';
 import * as os from '@/os';
 import { emojiCategories, emojiTags } from '@/instance';
 import XEmoji from './emojis.emoji.vue';
diff --git a/packages/client/src/pages/about.federation.vue b/packages/client/src/pages/about.federation.vue
index 8d93908725..51a49ba59f 100644
--- a/packages/client/src/pages/about.federation.vue
+++ b/packages/client/src/pages/about.federation.vue
@@ -52,7 +52,7 @@ import MkButton from '@/components/ui/button.vue';
 import MkInput from '@/components/form/input.vue';
 import MkSelect from '@/components/form/select.vue';
 import MkPagination from '@/components/ui/pagination.vue';
-import MkInstanceCardMini from '@/components/instance-card-mini.vue';
+import MkInstanceCardMini from '@/components/MkInstanceCardMini.vue';
 import FormSplit from '@/components/form/split.vue';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
diff --git a/packages/client/src/pages/about.vue b/packages/client/src/pages/about.vue
index 0a067d7b78..fc2337727e 100644
--- a/packages/client/src/pages/about.vue
+++ b/packages/client/src/pages/about.vue
@@ -88,8 +88,8 @@ 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/key-value.vue';
-import MkInstanceStats from '@/components/instance-stats.vue';
+import MkKeyValue from '@/components/MkKeyValue.vue';
+import MkInstanceStats from '@/components/MkInstanceStats.vue';
 import * as os from '@/os';
 import number from '@/filters/number';
 import { i18n } from '@/i18n';
diff --git a/packages/client/src/pages/admin-file.vue b/packages/client/src/pages/admin-file.vue
index f96a41a7ea..dfdbb1f0da 100644
--- a/packages/client/src/pages/admin-file.vue
+++ b/packages/client/src/pages/admin-file.vue
@@ -65,11 +65,11 @@
 import { computed } from 'vue';
 import MkButton from '@/components/ui/button.vue';
 import MkSwitch from '@/components/form/switch.vue';
-import MkObjectView from '@/components/object-view.vue';
-import MkDriveFileThumbnail from '@/components/drive-file-thumbnail.vue';
-import MkKeyValue from '@/components/key-value.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/user-card-mini.vue';
+import MkUserCardMini from '@/components/MkUserCardMini.vue';
 import MkInfo from '@/components/ui/info.vue';
 import bytes from '@/filters/bytes';
 import * as os from '@/os';
diff --git a/packages/client/src/pages/admin/abuses.vue b/packages/client/src/pages/admin/abuses.vue
index 9c718ab9e4..25fd8bcb6d 100644
--- a/packages/client/src/pages/admin/abuses.vue
+++ b/packages/client/src/pages/admin/abuses.vue
@@ -53,7 +53,7 @@ import XHeader from './_header_.vue';
 import MkInput from '@/components/form/input.vue';
 import MkSelect from '@/components/form/select.vue';
 import MkPagination from '@/components/ui/pagination.vue';
-import XAbuseReport from '@/components/abuse-report.vue';
+import XAbuseReport from '@/components/MkAbuseReport.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/bot-protection.vue
index cf2cdea92b..2c404380af 100644
--- a/packages/client/src/pages/admin/bot-protection.vue
+++ b/packages/client/src/pages/admin/bot-protection.vue
@@ -54,7 +54,7 @@ import * as os from '@/os';
 import { fetchInstance } from '@/instance';
 import { i18n } from '@/i18n';
 
-const MkCaptcha = defineAsyncComponent(() => import('@/components/captcha.vue'));
+const MkCaptcha = defineAsyncComponent(() => import('@/components/MkCaptcha.vue'));
 
 let provider = $ref(null);
 let hcaptchaSiteKey: string | null = $ref(null);
diff --git a/packages/client/src/pages/admin/database.vue b/packages/client/src/pages/admin/database.vue
index ca8718ef63..1c2656b8f5 100644
--- a/packages/client/src/pages/admin/database.vue
+++ b/packages/client/src/pages/admin/database.vue
@@ -13,7 +13,7 @@
 <script lang="ts" setup>
 import { } from 'vue';
 import FormSuspense from '@/components/form/suspense.vue';
-import MkKeyValue from '@/components/key-value.vue';
+import MkKeyValue from '@/components/MkKeyValue.vue';
 import * as os from '@/os';
 import bytes from '@/filters/bytes';
 import number from '@/filters/number';
diff --git a/packages/client/src/pages/admin/emojis.vue b/packages/client/src/pages/admin/emojis.vue
index 51ecd1b794..cb886ee37f 100644
--- a/packages/client/src/pages/admin/emojis.vue
+++ b/packages/client/src/pages/admin/emojis.vue
@@ -73,7 +73,7 @@ import XHeader from './_header_.vue';
 import MkButton from '@/components/ui/button.vue';
 import MkInput from '@/components/form/input.vue';
 import MkPagination from '@/components/ui/pagination.vue';
-import MkTab from '@/components/tab.vue';
+import MkTab from '@/components/MkTab.vue';
 import MkSwitch from '@/components/form/switch.vue';
 import FormSplit from '@/components/form/split.vue';
 import { selectFile, selectFiles } from '@/scripts/select-file';
diff --git a/packages/client/src/pages/admin/files.vue b/packages/client/src/pages/admin/files.vue
index 2614a6b8d9..f919571cef 100644
--- a/packages/client/src/pages/admin/files.vue
+++ b/packages/client/src/pages/admin/files.vue
@@ -39,7 +39,7 @@ import XHeader from './_header_.vue';
 import MkButton from '@/components/ui/button.vue';
 import MkInput from '@/components/form/input.vue';
 import MkSelect from '@/components/form/select.vue';
-import MkFileListForAdmin from '@/components/file-list-for-admin.vue';
+import MkFileListForAdmin from '@/components/MkFileListForAdmin.vue';
 import bytes from '@/filters/bytes';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
diff --git a/packages/client/src/pages/admin/overview.federation.vue b/packages/client/src/pages/admin/overview.federation.vue
index 6c99cad33c..e8cb5867a7 100644
--- a/packages/client/src/pages/admin/overview.federation.vue
+++ b/packages/client/src/pages/admin/overview.federation.vue
@@ -16,7 +16,7 @@
 
 <script lang="ts" setup>
 import { onMounted, onUnmounted, ref } from 'vue';
-import MkMiniChart from '@/components/mini-chart.vue';
+import MkMiniChart from '@/components/MkMiniChart.vue';
 import * as os from '@/os';
 import { useInterval } from '@/scripts/use-interval';
 
diff --git a/packages/client/src/pages/admin/overview.user.vue b/packages/client/src/pages/admin/overview.user.vue
index d70336f3c2..0dd4a749ba 100644
--- a/packages/client/src/pages/admin/overview.user.vue
+++ b/packages/client/src/pages/admin/overview.user.vue
@@ -11,7 +11,7 @@
 
 <script lang="ts" setup>
 import * as misskey from 'misskey-js';
-import MkMiniChart from '@/components/mini-chart.vue';
+import MkMiniChart from '@/components/MkMiniChart.vue';
 import * as os from '@/os';
 import { acct } from '@/filters/user';
 
diff --git a/packages/client/src/pages/admin/overview.vue b/packages/client/src/pages/admin/overview.vue
index 96ff26a03d..6c55073924 100644
--- a/packages/client/src/pages/admin/overview.vue
+++ b/packages/client/src/pages/admin/overview.vue
@@ -165,8 +165,8 @@ import XFederation from './overview.federation.vue';
 import XQueueChart from './overview.queue-chart.vue';
 import XUser from './overview.user.vue';
 import XPie from './overview.pie.vue';
-import MkNumberDiff from '@/components/number-diff.vue';
-import MkTagCloud from '@/components/tag-cloud.vue';
+import MkNumberDiff from '@/components/MkNumberDiff.vue';
+import MkTagCloud from '@/components/MkTagCloud.vue';
 import { version, url } from '@/config';
 import number from '@/filters/number';
 import * as os from '@/os';
@@ -176,7 +176,7 @@ import { definePageMetadata } from '@/scripts/page-metadata';
 import 'chartjs-adapter-date-fns';
 import { defaultStore } from '@/store';
 import { useChartTooltip } from '@/scripts/use-chart-tooltip';
-import MkFileListForAdmin from '@/components/file-list-for-admin.vue';
+import MkFileListForAdmin from '@/components/MkFileListForAdmin.vue';
 
 Chart.register(
 	ArcElement,
diff --git a/packages/client/src/pages/admin/proxy-account.vue b/packages/client/src/pages/admin/proxy-account.vue
index 0951d26c24..71f35bf0f6 100644
--- a/packages/client/src/pages/admin/proxy-account.vue
+++ b/packages/client/src/pages/admin/proxy-account.vue
@@ -15,7 +15,7 @@
 
 <script lang="ts" setup>
 import { } from 'vue';
-import MkKeyValue from '@/components/key-value.vue';
+import MkKeyValue from '@/components/MkKeyValue.vue';
 import FormButton from '@/components/ui/button.vue';
 import MkInfo from '@/components/ui/info.vue';
 import FormSuspense from '@/components/form/suspense.vue';
diff --git a/packages/client/src/pages/admin/users.vue b/packages/client/src/pages/admin/users.vue
index 6bc569f246..9cdb6d8be2 100644
--- a/packages/client/src/pages/admin/users.vue
+++ b/packages/client/src/pages/admin/users.vue
@@ -62,7 +62,7 @@ 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/user-card-mini.vue';
+import MkUserCardMini from '@/components/MkUserCardMini.vue';
 
 let paginationComponent = $ref<InstanceType<typeof MkPagination>>();
 
diff --git a/packages/client/src/pages/antenna-timeline.vue b/packages/client/src/pages/antenna-timeline.vue
index 1865781a0e..500cb3a7c5 100644
--- a/packages/client/src/pages/antenna-timeline.vue
+++ b/packages/client/src/pages/antenna-timeline.vue
@@ -19,7 +19,7 @@
 
 <script lang="ts" setup>
 import { computed, inject, watch } from 'vue';
-import XTimeline from '@/components/timeline.vue';
+import XTimeline from '@/components/MkTimeline.vue';
 import { scroll } from '@/scripts/scroll';
 import * as os from '@/os';
 import { useRouter } from '@/router';
diff --git a/packages/client/src/pages/auth.vue b/packages/client/src/pages/auth.vue
index 9457cd6b2f..bb55881a22 100644
--- a/packages/client/src/pages/auth.vue
+++ b/packages/client/src/pages/auth.vue
@@ -31,7 +31,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import XForm from './auth.form.vue';
-import MkSignin from '@/components/signin.vue';
+import MkSignin from '@/components/MkSignin.vue';
 import * as os from '@/os';
 import { login } from '@/account';
 
diff --git a/packages/client/src/pages/channel.vue b/packages/client/src/pages/channel.vue
index 4a3c97cdae..04c302f4da 100644
--- a/packages/client/src/pages/channel.vue
+++ b/packages/client/src/pages/channel.vue
@@ -34,9 +34,9 @@
 <script lang="ts" setup>
 import { computed, inject, watch } from 'vue';
 import MkContainer from '@/components/ui/container.vue';
-import XPostForm from '@/components/post-form.vue';
-import XTimeline from '@/components/timeline.vue';
-import XChannelFollowButton from '@/components/channel-follow-button.vue';
+import XPostForm from '@/components/MkPostForm.vue';
+import XTimeline from '@/components/MkTimeline.vue';
+import XChannelFollowButton from '@/components/MkChannelFollowButton.vue';
 import * as os from '@/os';
 import { useRouter } from '@/router';
 import { $i } from '@/account';
diff --git a/packages/client/src/pages/channels.vue b/packages/client/src/pages/channels.vue
index 63612bc57f..fbc17b6892 100644
--- a/packages/client/src/pages/channels.vue
+++ b/packages/client/src/pages/channels.vue
@@ -24,7 +24,7 @@
 
 <script lang="ts" setup>
 import { computed, defineComponent, inject } from 'vue';
-import MkChannelPreview from '@/components/channel-preview.vue';
+import MkChannelPreview from '@/components/MkChannelPreview.vue';
 import MkPagination from '@/components/ui/pagination.vue';
 import MkButton from '@/components/ui/button.vue';
 import { useRouter } from '@/router';
diff --git a/packages/client/src/pages/clip.vue b/packages/client/src/pages/clip.vue
index 608e4ba7ee..5b56651bdd 100644
--- a/packages/client/src/pages/clip.vue
+++ b/packages/client/src/pages/clip.vue
@@ -21,7 +21,7 @@
 <script lang="ts" setup>
 import { computed, watch, provide } from 'vue';
 import * as misskey from 'misskey-js';
-import XNotes from '@/components/notes.vue';
+import XNotes from '@/components/MkNotes.vue';
 import { $i } from '@/account';
 import { i18n } from '@/i18n';
 import * as os from '@/os';
diff --git a/packages/client/src/pages/drive.vue b/packages/client/src/pages/drive.vue
index 988a1bf3df..088f0eacdc 100644
--- a/packages/client/src/pages/drive.vue
+++ b/packages/client/src/pages/drive.vue
@@ -6,7 +6,7 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue';
-import XDrive from '@/components/drive.vue';
+import XDrive from '@/components/MkDrive.vue';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
diff --git a/packages/client/src/pages/explore.featured.vue b/packages/client/src/pages/explore.featured.vue
index 0f32804b72..18a371a086 100644
--- a/packages/client/src/pages/explore.featured.vue
+++ b/packages/client/src/pages/explore.featured.vue
@@ -10,8 +10,8 @@
 </template>
 
 <script lang="ts" setup>
-import XNotes from '@/components/notes.vue';
-import MkTab from '@/components/tab.vue';
+import XNotes from '@/components/MkNotes.vue';
+import MkTab from '@/components/MkTab.vue';
 import { i18n } from '@/i18n';
 
 const paginationForNotes = {
diff --git a/packages/client/src/pages/explore.users.vue b/packages/client/src/pages/explore.users.vue
index ed5ee3b791..f25015620a 100644
--- a/packages/client/src/pages/explore.users.vue
+++ b/packages/client/src/pages/explore.users.vue
@@ -59,9 +59,9 @@
 
 <script lang="ts" setup>
 import { computed, watch } from 'vue';
-import XUserList from '@/components/user-list.vue';
+import XUserList from '@/components/MkUserList.vue';
 import MkFolder from '@/components/ui/folder.vue';
-import MkTab from '@/components/tab.vue';
+import MkTab from '@/components/MkTab.vue';
 import number from '@/filters/number';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
diff --git a/packages/client/src/pages/explore.vue b/packages/client/src/pages/explore.vue
index 4725278ab6..1fac32c036 100644
--- a/packages/client/src/pages/explore.vue
+++ b/packages/client/src/pages/explore.vue
@@ -41,7 +41,7 @@ import * as os from '@/os';
 import { definePageMetadata } from '@/scripts/page-metadata';
 import { i18n } from '@/i18n';
 import { instance } from '@/instance';
-import XUserList from '@/components/user-list.vue';
+import XUserList from '@/components/MkUserList.vue';
 
 const props = defineProps<{
 	tag?: string;
diff --git a/packages/client/src/pages/favorites.vue b/packages/client/src/pages/favorites.vue
index e3cfe87389..d031a35b11 100644
--- a/packages/client/src/pages/favorites.vue
+++ b/packages/client/src/pages/favorites.vue
@@ -23,8 +23,8 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 import MkPagination from '@/components/ui/pagination.vue';
-import XNote from '@/components/note.vue';
-import XList from '@/components/date-separated-list.vue';
+import XNote from '@/components/MkNote.vue';
+import XList from '@/components/MkDateSeparatedList.vue';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
 
diff --git a/packages/client/src/pages/follow.vue b/packages/client/src/pages/follow.vue
index 0c1cb7733b..828246d678 100644
--- a/packages/client/src/pages/follow.vue
+++ b/packages/client/src/pages/follow.vue
@@ -3,63 +3,60 @@
 </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { } from 'vue';
 import * as Acct from 'misskey-js/built/acct';
 import * as os from '@/os';
 import { mainRouter } from '@/router';
+import { i18n } from '@/i18n';
 
-export default defineComponent({
-	created() {
-		const acct = new URL(location.href).searchParams.get('acct');
-		if (acct == null) return;
+async function follow(user): Promise<void> {
+	const { canceled } = await os.confirm({
+		type: 'question',
+		text: i18n.t('followConfirm', { name: user.name || user.username }),
+	});
 
-		let promise;
+	if (canceled) {
+		window.close();
+		return;
+	}
+	
+	os.apiWithDialog('following/create', {
+		userId: user.id,
+	});
+}
 
-		if (acct.startsWith('https://')) {
-			promise = os.api('ap/show', {
-				uri: acct,
-			});
-			promise.then(res => {
-				if (res.type === 'User') {
-					this.follow(res.object);
-				} else if (res.type === 'Note') {
-					mainRouter.push(`/notes/${res.object.id}`);
-				} else {
-					os.alert({
-						type: 'error',
-						text: 'Not a user',
-					}).then(() => {
-						window.close();
-					});
-				}
-			});
+const acct = new URL(location.href).searchParams.get('acct');
+if (acct == null) {
+	throw new Error('acct required');
+}
+
+let promise;
+
+if (acct.startsWith('https://')) {
+	promise = os.api('ap/show', {
+		uri: acct,
+	});
+	promise.then(res => {
+		if (res.type === 'User') {
+			follow(res.object);
+		} else if (res.type === 'Note') {
+			mainRouter.push(`/notes/${res.object.id}`);
 		} else {
-			promise = os.api('users/show', Acct.parse(acct));
-			promise.then(user => {
-				this.follow(user);
+			os.alert({
+				type: 'error',
+				text: 'Not a user',
+			}).then(() => {
+				window.close();
 			});
 		}
+	});
+} else {
+	promise = os.api('users/show', Acct.parse(acct));
+	promise.then(user => {
+		follow(user);
+	});
+}
 
-		os.promiseDialog(promise, null, null, this.$ts.fetchingAsApObject);
-	},
-
-	methods: {
-		async follow(user) {
-			const { canceled } = await os.confirm({
-				type: 'question',
-				text: this.$t('followConfirm', { name: user.name || user.username }),
-			});
-
-			if (canceled) {
-				window.close();
-				return;
-			}
-			
-			os.apiWithDialog('following/create', {
-				userId: user.id,
-			});
-		},
-	},
-});
+os.promiseDialog(promise, null, null, i18n.ts.fetchingAsApObject);
 </script>
diff --git a/packages/client/src/pages/gallery/index.vue b/packages/client/src/pages/gallery/index.vue
index fba8b96bda..1dfedb4a67 100644
--- a/packages/client/src/pages/gallery/index.vue
+++ b/packages/client/src/pages/gallery/index.vue
@@ -43,13 +43,13 @@
 
 <script lang="ts" setup>
 import { computed, defineComponent, watch } from 'vue';
-import XUserList from '@/components/user-list.vue';
+import XUserList from '@/components/MkUserList.vue';
 import MkFolder from '@/components/ui/folder.vue';
 import MkInput from '@/components/form/input.vue';
 import MkButton from '@/components/ui/button.vue';
-import MkTab from '@/components/tab.vue';
+import MkTab from '@/components/MkTab.vue';
 import MkPagination from '@/components/ui/pagination.vue';
-import MkGalleryPostPreview from '@/components/gallery-post-preview.vue';
+import MkGalleryPostPreview from '@/components/MkGalleryPostPreview.vue';
 import number from '@/filters/number';
 import * as os from '@/os';
 import { definePageMetadata } from '@/scripts/page-metadata';
diff --git a/packages/client/src/pages/gallery/post.vue b/packages/client/src/pages/gallery/post.vue
index a3a11d9a65..1e7a997167 100644
--- a/packages/client/src/pages/gallery/post.vue
+++ b/packages/client/src/pages/gallery/post.vue
@@ -59,10 +59,10 @@ import { computed, defineComponent, inject, watch } from 'vue';
 import MkButton from '@/components/ui/button.vue';
 import * as os from '@/os';
 import MkContainer from '@/components/ui/container.vue';
-import ImgWithBlurhash from '@/components/img-with-blurhash.vue';
+import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
 import MkPagination from '@/components/ui/pagination.vue';
-import MkGalleryPostPreview from '@/components/gallery-post-preview.vue';
-import MkFollowButton from '@/components/follow-button.vue';
+import MkGalleryPostPreview from '@/components/MkGalleryPostPreview.vue';
+import MkFollowButton from '@/components/MkFollowButton.vue';
 import { url } from '@/config';
 import { useRouter } from '@/router';
 import { i18n } from '@/i18n';
diff --git a/packages/client/src/pages/instance-info.vue b/packages/client/src/pages/instance-info.vue
index f44065957d..268fd4603f 100644
--- a/packages/client/src/pages/instance-info.vue
+++ b/packages/client/src/pages/instance-info.vue
@@ -117,13 +117,13 @@
 <script lang="ts" setup>
 import { } from 'vue';
 import * as misskey from 'misskey-js';
-import MkChart from '@/components/chart.vue';
-import MkObjectView from '@/components/object-view.vue';
+import MkChart from '@/components/MkChart.vue';
+import MkObjectView from '@/components/MkObjectView.vue';
 import FormLink from '@/components/form/link.vue';
-import MkLink from '@/components/link.vue';
+import MkLink from '@/components/MkLink.vue';
 import MkButton from '@/components/ui/button.vue';
 import FormSection from '@/components/form/section.vue';
-import MkKeyValue from '@/components/key-value.vue';
+import MkKeyValue from '@/components/MkKeyValue.vue';
 import MkSelect from '@/components/form/select.vue';
 import FormSwitch from '@/components/form/switch.vue';
 import * as os from '@/os';
@@ -132,7 +132,7 @@ import bytes from '@/filters/bytes';
 import { iAmModerator } from '@/account';
 import { definePageMetadata } from '@/scripts/page-metadata';
 import { i18n } from '@/i18n';
-import MkUserCardMini from '@/components/user-card-mini.vue';
+import MkUserCardMini from '@/components/MkUserCardMini.vue';
 import MkPagination from '@/components/ui/pagination.vue';
 
 const props = defineProps<{
diff --git a/packages/client/src/pages/messaging/messaging-room.message.vue b/packages/client/src/pages/messaging/messaging-room.message.vue
index e718e386b8..19e37cd940 100644
--- a/packages/client/src/pages/messaging/messaging-room.message.vue
+++ b/packages/client/src/pages/messaging/messaging-room.message.vue
@@ -54,7 +54,7 @@ import * as mfm from 'mfm-js';
 import * as Misskey from 'misskey-js';
 import VuePlyr from 'vue-plyr';
 import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm';
-import MkUrlPreview from '@/components/url-preview.vue';
+import MkUrlPreview from '@/components/MkUrlPreview.vue';
 import * as os from '@/os';
 import { $i } from '@/account';
 
diff --git a/packages/client/src/pages/messaging/messaging-room.vue b/packages/client/src/pages/messaging/messaging-room.vue
index dbd15af9ee..5325b9d239 100644
--- a/packages/client/src/pages/messaging/messaging-room.vue
+++ b/packages/client/src/pages/messaging/messaging-room.vue
@@ -55,7 +55,7 @@ import * as Misskey from 'misskey-js';
 import * as Acct from 'misskey-js/built/acct';
 import XMessage from './messaging-room.message.vue';
 import XForm from './messaging-room.form.vue';
-import XList from '@/components/date-separated-list.vue';
+import XList from '@/components/MkDateSeparatedList.vue';
 import MkPagination, { Paging } from '@/components/ui/pagination.vue';
 import { isBottomVisible, onScrollBottom, scrollToBottom } from '@/scripts/scroll';
 import * as os from '@/os';
diff --git a/packages/client/src/pages/miauth.vue b/packages/client/src/pages/miauth.vue
index cbdf6b2832..5a890c7b39 100644
--- a/packages/client/src/pages/miauth.vue
+++ b/packages/client/src/pages/miauth.vue
@@ -40,7 +40,7 @@
 
 <script lang="ts" setup>
 import { } from 'vue';
-import MkSignin from '@/components/signin.vue';
+import MkSignin from '@/components/MkSignin.vue';
 import MkButton from '@/components/ui/button.vue';
 import * as os from '@/os';
 import { $i, login } from '@/account';
diff --git a/packages/client/src/pages/my-lists/index.vue b/packages/client/src/pages/my-lists/index.vue
index 144cba684f..7dc5b3e907 100644
--- a/packages/client/src/pages/my-lists/index.vue
+++ b/packages/client/src/pages/my-lists/index.vue
@@ -20,7 +20,7 @@
 import { } from 'vue';
 import MkPagination from '@/components/ui/pagination.vue';
 import MkButton from '@/components/ui/button.vue';
-import MkAvatars from '@/components/avatars.vue';
+import MkAvatars from '@/components/MkAvatars.vue';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
diff --git a/packages/client/src/pages/note.vue b/packages/client/src/pages/note.vue
index 240a0d4eb7..ba05a7b887 100644
--- a/packages/client/src/pages/note.vue
+++ b/packages/client/src/pages/note.vue
@@ -43,10 +43,10 @@
 <script lang="ts" setup>
 import { computed, defineComponent, watch } from 'vue';
 import * as misskey from 'misskey-js';
-import XNote from '@/components/note.vue';
-import XNoteDetailed from '@/components/note-detailed.vue';
-import XNotes from '@/components/notes.vue';
-import MkRemoteCaution from '@/components/remote-caution.vue';
+import XNote from '@/components/MkNote.vue';
+import XNoteDetailed from '@/components/MkNoteDetailed.vue';
+import XNotes from '@/components/MkNotes.vue';
+import MkRemoteCaution from '@/components/MkRemoteCaution.vue';
 import MkButton from '@/components/ui/button.vue';
 import * as os from '@/os';
 import { definePageMetadata } from '@/scripts/page-metadata';
diff --git a/packages/client/src/pages/notifications.vue b/packages/client/src/pages/notifications.vue
index 0e9e4646e5..3689441359 100644
--- a/packages/client/src/pages/notifications.vue
+++ b/packages/client/src/pages/notifications.vue
@@ -25,8 +25,8 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
 import { notificationTypes } from 'misskey-js';
-import XNotifications from '@/components/notifications.vue';
-import XNotes from '@/components/notes.vue';
+import XNotifications from '@/components/MkNotifications.vue';
+import XNotes from '@/components/MkNotes.vue';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.image.vue b/packages/client/src/pages/page-editor/els/page-editor.el.image.vue
index b22bf1cb34..4d471e7b94 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.image.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.image.vue
@@ -18,7 +18,7 @@
 /* eslint-disable vue/no-mutating-props */
 import { onMounted } from 'vue';
 import XContainer from '../page-editor.container.vue';
-import MkDriveFileThumbnail from '@/components/drive-file-thumbnail.vue';
+import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
 import * as os from '@/os';
 
 const props = withDefaults(defineProps<{
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.note.vue b/packages/client/src/pages/page-editor/els/page-editor.el.note.vue
index 27f9f961f3..5e494ee23b 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.note.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.note.vue
@@ -22,8 +22,8 @@ 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/note.vue';
-import XNoteDetailed from '@/components/note-detailed.vue';
+import XNote from '@/components/MkNote.vue';
+import XNoteDetailed from '@/components/MkNoteDetailed.vue';
 import * as os from '@/os';
 
 const props = withDefaults(defineProps<{
diff --git a/packages/client/src/pages/page.vue b/packages/client/src/pages/page.vue
index 02fd61f58b..48d62a9549 100644
--- a/packages/client/src/pages/page.vue
+++ b/packages/client/src/pages/page.vue
@@ -68,10 +68,10 @@ import XPage from '@/components/page/page.vue';
 import MkButton from '@/components/ui/button.vue';
 import * as os from '@/os';
 import { url } from '@/config';
-import MkFollowButton from '@/components/follow-button.vue';
+import MkFollowButton from '@/components/MkFollowButton.vue';
 import MkContainer from '@/components/ui/container.vue';
 import MkPagination from '@/components/ui/pagination.vue';
-import MkPagePreview from '@/components/page-preview.vue';
+import MkPagePreview from '@/components/MkPagePreview.vue';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
 
diff --git a/packages/client/src/pages/pages.vue b/packages/client/src/pages/pages.vue
index 62c675e41e..6e71d9c836 100644
--- a/packages/client/src/pages/pages.vue
+++ b/packages/client/src/pages/pages.vue
@@ -26,7 +26,7 @@
 
 <script lang="ts" setup>
 import { computed, inject } from 'vue';
-import MkPagePreview from '@/components/page-preview.vue';
+import MkPagePreview from '@/components/MkPagePreview.vue';
 import MkPagination from '@/components/ui/pagination.vue';
 import MkButton from '@/components/ui/button.vue';
 import { useRouter } from '@/router';
diff --git a/packages/client/src/pages/preview.vue b/packages/client/src/pages/preview.vue
index 8f211081dd..efbe53a523 100644
--- a/packages/client/src/pages/preview.vue
+++ b/packages/client/src/pages/preview.vue
@@ -6,7 +6,7 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue';
-import MkSample from '@/components/sample.vue';
+import MkSample from '@/components/MkSample.vue';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
 
diff --git a/packages/client/src/pages/registry.keys.vue b/packages/client/src/pages/registry.keys.vue
index ae500386dd..372b5faa4d 100644
--- a/packages/client/src/pages/registry.keys.vue
+++ b/packages/client/src/pages/registry.keys.vue
@@ -34,7 +34,7 @@ import { definePageMetadata } from '@/scripts/page-metadata';
 import FormLink from '@/components/form/link.vue';
 import FormSection from '@/components/form/section.vue';
 import MkButton from '@/components/ui/button.vue';
-import MkKeyValue from '@/components/key-value.vue';
+import MkKeyValue from '@/components/MkKeyValue.vue';
 import FormSplit from '@/components/form/split.vue';
 
 const props = defineProps<{
diff --git a/packages/client/src/pages/registry.value.vue b/packages/client/src/pages/registry.value.vue
index 562f9df884..9fac7f990f 100644
--- a/packages/client/src/pages/registry.value.vue
+++ b/packages/client/src/pages/registry.value.vue
@@ -46,7 +46,7 @@ import { definePageMetadata } from '@/scripts/page-metadata';
 import FormLink from '@/components/form/link.vue';
 import FormSection from '@/components/form/section.vue';
 import MkButton from '@/components/ui/button.vue';
-import MkKeyValue from '@/components/key-value.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/ui/info.vue';
diff --git a/packages/client/src/pages/reset-password.vue b/packages/client/src/pages/reset-password.vue
index 10c41f2d21..4c4cdb8103 100644
--- a/packages/client/src/pages/reset-password.vue
+++ b/packages/client/src/pages/reset-password.vue
@@ -39,7 +39,7 @@ async function save() {
 
 onMounted(() => {
 	if (props.token == null) {
-		os.popup(defineAsyncComponent(() => import('@/components/forgot-password.vue')), {}, {}, 'closed');
+		os.popup(defineAsyncComponent(() => import('@/components/MkForgotPassword.vue')), {}, {}, 'closed');
 		mainRouter.push('/');
 	}
 });
diff --git a/packages/client/src/pages/search.vue b/packages/client/src/pages/search.vue
index 404b9e3dbd..fdcbb57e44 100644
--- a/packages/client/src/pages/search.vue
+++ b/packages/client/src/pages/search.vue
@@ -9,7 +9,7 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue';
-import XNotes from '@/components/notes.vue';
+import XNotes from '@/components/MkNotes.vue';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
 
diff --git a/packages/client/src/pages/settings/account-info.vue b/packages/client/src/pages/settings/account-info.vue
index 65b6233693..93e65d55b1 100644
--- a/packages/client/src/pages/settings/account-info.vue
+++ b/packages/client/src/pages/settings/account-info.vue
@@ -129,7 +129,7 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 import FormSection from '@/components/form/section.vue';
-import MkKeyValue from '@/components/key-value.vue';
+import MkKeyValue from '@/components/MkKeyValue.vue';
 import * as os from '@/os';
 import number from '@/filters/number';
 import bytes from '@/filters/bytes';
diff --git a/packages/client/src/pages/settings/accounts.vue b/packages/client/src/pages/settings/accounts.vue
index d1e71c4548..33a0fcc329 100644
--- a/packages/client/src/pages/settings/accounts.vue
+++ b/packages/client/src/pages/settings/accounts.vue
@@ -75,7 +75,7 @@ function removeAccount(account) {
 }
 
 function addExistingAccount() {
-	os.popup(defineAsyncComponent(() => import('@/components/signin-dialog.vue')), {}, {
+	os.popup(defineAsyncComponent(() => import('@/components/MkSigninDialog.vue')), {}, {
 		done: res => {
 			addAccounts(res.id, res.i);
 			os.success();
@@ -84,7 +84,7 @@ function addExistingAccount() {
 }
 
 function createAccount() {
-	os.popup(defineAsyncComponent(() => import('@/components/signup-dialog.vue')), {}, {
+	os.popup(defineAsyncComponent(() => import('@/components/MkSignupDialog.vue')), {}, {
 		done: res => {
 			addAccounts(res.id, res.i);
 			switchAccountWithToken(res.i);
diff --git a/packages/client/src/pages/settings/api.vue b/packages/client/src/pages/settings/api.vue
index b8a2dedb5a..b0a787fc48 100644
--- a/packages/client/src/pages/settings/api.vue
+++ b/packages/client/src/pages/settings/api.vue
@@ -17,7 +17,7 @@ import { definePageMetadata } from '@/scripts/page-metadata';
 const isDesktop = ref(window.innerWidth >= 1100);
 
 function generateToken() {
-	os.popup(defineAsyncComponent(() => import('@/components/token-generate-window.vue')), {}, {
+	os.popup(defineAsyncComponent(() => import('@/components/MkTokenGenerateWindow.vue')), {}, {
 		done: async result => {
 			const { name, permissions } = result;
 			const { token } = await os.api('miauth/gen-token', {
diff --git a/packages/client/src/pages/settings/drive.vue b/packages/client/src/pages/settings/drive.vue
index c8c78f2923..a10e2d9f7d 100644
--- a/packages/client/src/pages/settings/drive.vue
+++ b/packages/client/src/pages/settings/drive.vue
@@ -49,12 +49,12 @@ import tinycolor from 'tinycolor2';
 import FormLink from '@/components/form/link.vue';
 import FormSwitch from '@/components/form/switch.vue';
 import FormSection from '@/components/form/section.vue';
-import MkKeyValue from '@/components/key-value.vue';
+import MkKeyValue from '@/components/MkKeyValue.vue';
 import FormSplit from '@/components/form/split.vue';
 import * as os from '@/os';
 import bytes from '@/filters/bytes';
 import { defaultStore } from '@/store';
-import MkChart from '@/components/chart.vue';
+import MkChart from '@/components/MkChart.vue';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
 import { $i } from '@/account';
diff --git a/packages/client/src/pages/settings/general.vue b/packages/client/src/pages/settings/general.vue
index 22b27fad02..37450b7802 100644
--- a/packages/client/src/pages/settings/general.vue
+++ b/packages/client/src/pages/settings/general.vue
@@ -100,7 +100,7 @@ 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/link.vue';
+import MkLink from '@/components/MkLink.vue';
 import { langs } from '@/config';
 import { defaultStore } from '@/store';
 import * as os from '@/os';
diff --git a/packages/client/src/pages/settings/mute-block.vue b/packages/client/src/pages/settings/mute-block.vue
index 495d52d4d3..28c215a04f 100644
--- a/packages/client/src/pages/settings/mute-block.vue
+++ b/packages/client/src/pages/settings/mute-block.vue
@@ -30,7 +30,7 @@
 <script lang="ts" setup>
 import { } from 'vue';
 import MkPagination from '@/components/ui/pagination.vue';
-import MkTab from '@/components/tab.vue';
+import MkTab from '@/components/MkTab.vue';
 import FormInfo from '@/components/ui/info.vue';
 import FormLink from '@/components/form/link.vue';
 import { userPage } from '@/filters/user';
diff --git a/packages/client/src/pages/settings/notifications.vue b/packages/client/src/pages/settings/notifications.vue
index d2a363965a..47c51e600b 100644
--- a/packages/client/src/pages/settings/notifications.vue
+++ b/packages/client/src/pages/settings/notifications.vue
@@ -34,7 +34,7 @@ async function readAllNotifications() {
 
 function configure() {
 	const includingTypes = notificationTypes.filter(x => !$i!.mutingNotificationTypes.includes(x));
-	os.popup(defineAsyncComponent(() => import('@/components/notification-setting-window.vue')), {
+	os.popup(defineAsyncComponent(() => import('@/components/MkNotificationSettingWindow.vue')), {
 		includingTypes,
 		showGlobalToggle: false,
 	}, {
diff --git a/packages/client/src/pages/settings/plugin.install.vue b/packages/client/src/pages/settings/plugin.install.vue
index a4cab4b7a4..4940f3b5f9 100644
--- a/packages/client/src/pages/settings/plugin.install.vue
+++ b/packages/client/src/pages/settings/plugin.install.vue
@@ -79,7 +79,7 @@ async function install() {
 	}
 
 	const token = permissions == null || permissions.length === 0 ? null : await new Promise((res, rej) => {
-		os.popup(defineAsyncComponent(() => import('@/components/token-generate-window.vue')), {
+		os.popup(defineAsyncComponent(() => import('@/components/MkTokenGenerateWindow.vue')), {
 			title: i18n.ts.tokenRequested,
 			information: i18n.ts.pluginTokenRequestedDescription,
 			initialName: name,
diff --git a/packages/client/src/pages/settings/plugin.vue b/packages/client/src/pages/settings/plugin.vue
index 8e773b7990..b557bd538f 100644
--- a/packages/client/src/pages/settings/plugin.vue
+++ b/packages/client/src/pages/settings/plugin.vue
@@ -37,7 +37,7 @@ 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/ui/button.vue';
-import MkKeyValue from '@/components/key-value.vue';
+import MkKeyValue from '@/components/MkKeyValue.vue';
 import * as os from '@/os';
 import { ColdDeviceStorage } from '@/store';
 import { unisonReload } from '@/scripts/unison-reload';
diff --git a/packages/client/src/pages/settings/reaction.vue b/packages/client/src/pages/settings/reaction.vue
index 170124eacd..eae95c1e90 100644
--- a/packages/client/src/pages/settings/reaction.vue
+++ b/packages/client/src/pages/settings/reaction.vue
@@ -88,7 +88,7 @@ function remove(reaction, ev: MouseEvent) {
 }
 
 function preview(ev: MouseEvent) {
-	os.popup(defineAsyncComponent(() => import('@/components/emoji-picker-dialog.vue')), {
+	os.popup(defineAsyncComponent(() => import('@/components/MkEmojiPickerDialog.vue')), {
 		asReactionPicker: true,
 		src: ev.currentTarget ?? ev.target,
 	}, {}, 'closed');
diff --git a/packages/client/src/pages/settings/word-mute.vue b/packages/client/src/pages/settings/word-mute.vue
index 5fee7cd35a..daa2a4804b 100644
--- a/packages/client/src/pages/settings/word-mute.vue
+++ b/packages/client/src/pages/settings/word-mute.vue
@@ -31,10 +31,10 @@
 <script lang="ts" setup>
 import { ref, watch } from 'vue';
 import FormTextarea from '@/components/form/textarea.vue';
-import MkKeyValue from '@/components/key-value.vue';
+import MkKeyValue from '@/components/MkKeyValue.vue';
 import MkButton from '@/components/ui/button.vue';
 import MkInfo from '@/components/ui/info.vue';
-import MkTab from '@/components/tab.vue';
+import MkTab from '@/components/MkTab.vue';
 import * as os from '@/os';
 import number from '@/filters/number';
 import { defaultStore } from '@/store';
diff --git a/packages/client/src/pages/share.vue b/packages/client/src/pages/share.vue
index f4b6f66fa6..d41a701a70 100644
--- a/packages/client/src/pages/share.vue
+++ b/packages/client/src/pages/share.vue
@@ -29,7 +29,7 @@ import { noteVisibilities } from 'misskey-js';
 import * as Acct from 'misskey-js/built/acct';
 import * as Misskey from 'misskey-js';
 import MkButton from '@/components/ui/button.vue';
-import XPostForm from '@/components/post-form.vue';
+import XPostForm from '@/components/MkPostForm.vue';
 import * as os from '@/os';
 import { mainRouter } from '@/router';
 import { definePageMetadata } from '@/scripts/page-metadata';
diff --git a/packages/client/src/pages/tag.vue b/packages/client/src/pages/tag.vue
index 950d26a72e..5498c2999d 100644
--- a/packages/client/src/pages/tag.vue
+++ b/packages/client/src/pages/tag.vue
@@ -9,7 +9,7 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue';
-import XNotes from '@/components/notes.vue';
+import XNotes from '@/components/MkNotes.vue';
 import { definePageMetadata } from '@/scripts/page-metadata';
 
 const props = defineProps<{
diff --git a/packages/client/src/pages/timeline.vue b/packages/client/src/pages/timeline.vue
index 745e9ddb66..f7387e1841 100644
--- a/packages/client/src/pages/timeline.vue
+++ b/packages/client/src/pages/timeline.vue
@@ -64,11 +64,11 @@
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, computed, watch, ref } from 'vue';
+import { defineAsyncComponent, computed, watch } from 'vue';
 import { Pagination, Virtual } from 'swiper';
 import { Swiper, SwiperSlide } from 'swiper/vue';
-import XTimeline from '@/components/timeline.vue';
-import XPostForm from '@/components/post-form.vue';
+import XTimeline from '@/components/MkTimeline.vue';
+import XPostForm from '@/components/MkPostForm.vue';
 import { scroll } from '@/scripts/scroll';
 import * as os from '@/os';
 import { defaultStore } from '@/store';
diff --git a/packages/client/src/pages/user-info.vue b/packages/client/src/pages/user-info.vue
index 9154c7348e..316a3975c0 100644
--- a/packages/client/src/pages/user-info.vue
+++ b/packages/client/src/pages/user-info.vue
@@ -154,8 +154,8 @@
 <script lang="ts" setup>
 import { computed, watch } from 'vue';
 import * as misskey from 'misskey-js';
-import MkChart from '@/components/chart.vue';
-import MkObjectView from '@/components/object-view.vue';
+import MkChart from '@/components/MkChart.vue';
+import MkObjectView from '@/components/MkObjectView.vue';
 import FormTextarea from '@/components/form/textarea.vue';
 import FormSwitch from '@/components/form/switch.vue';
 import FormLink from '@/components/form/link.vue';
@@ -164,10 +164,10 @@ import FormButton from '@/components/ui/button.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/key-value.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/file-list-for-admin.vue';
+import MkFileListForAdmin from '@/components/MkFileListForAdmin.vue';
 import MkInfo from '@/components/ui/info.vue';
 import * as os from '@/os';
 import number from '@/filters/number';
diff --git a/packages/client/src/pages/user-list-timeline.vue b/packages/client/src/pages/user-list-timeline.vue
index c1f4569a02..4a534e47ba 100644
--- a/packages/client/src/pages/user-list-timeline.vue
+++ b/packages/client/src/pages/user-list-timeline.vue
@@ -19,7 +19,7 @@
 
 <script lang="ts" setup>
 import { computed, watch, inject } from 'vue';
-import XTimeline from '@/components/timeline.vue';
+import XTimeline from '@/components/MkTimeline.vue';
 import { scroll } from '@/scripts/scroll';
 import * as os from '@/os';
 import { useRouter } from '@/router';
diff --git a/packages/client/src/pages/user/clips.vue b/packages/client/src/pages/user/clips.vue
index 870e6f7174..f3fafc6934 100644
--- a/packages/client/src/pages/user/clips.vue
+++ b/packages/client/src/pages/user/clips.vue
@@ -9,40 +9,22 @@
 </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { computed } from 'vue';
+import * as misskey from 'misskey-js';
 import MkPagination from '@/components/ui/pagination.vue';
 
-export default defineComponent({
-	components: {
-		MkPagination,
-	},
+const props = defineProps<{
+	user: misskey.entities.User;
+}>();
 
-	props: {
-		user: {
-			type: Object,
-			required: true
-		},
-	},
-
-	data() {
-		return {
-			pagination: {
-				endpoint: 'users/clips' as const,
-				limit: 20,
-				params: {
-					userId: this.user.id,
-				}
-			},
-		};
-	},
-
-	watch: {
-		user() {
-			this.$refs.list.reload();
-		}
-	},
-});
+const pagination = {
+	endpoint: 'users/clips' as const,
+	limit: 20,
+	params: computed(() => ({
+		userId: props.user.id,
+	})),
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/pages/user/follow-list.vue b/packages/client/src/pages/user/follow-list.vue
index e84b7ff57e..6ee395f28b 100644
--- a/packages/client/src/pages/user/follow-list.vue
+++ b/packages/client/src/pages/user/follow-list.vue
@@ -11,7 +11,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
 import * as misskey from 'misskey-js';
-import MkUserInfo from '@/components/user-info.vue';
+import MkUserInfo from '@/components/MkUserInfo.vue';
 import MkPagination from '@/components/ui/pagination.vue';
 
 const props = defineProps<{
diff --git a/packages/client/src/pages/user/gallery.vue b/packages/client/src/pages/user/gallery.vue
index 6af28d455b..786268497e 100644
--- a/packages/client/src/pages/user/gallery.vue
+++ b/packages/client/src/pages/user/gallery.vue
@@ -11,7 +11,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
 import * as misskey from 'misskey-js';
-import MkGalleryPostPreview from '@/components/gallery-post-preview.vue';
+import MkGalleryPostPreview from '@/components/MkGalleryPostPreview.vue';
 import MkPagination from '@/components/ui/pagination.vue';
 
 const props = withDefaults(defineProps<{
diff --git a/packages/client/src/pages/user/home.vue b/packages/client/src/pages/user/home.vue
index 9a20055b13..f79c8c67be 100644
--- a/packages/client/src/pages/user/home.vue
+++ b/packages/client/src/pages/user/home.vue
@@ -112,12 +112,12 @@ import { defineAsyncComponent, computed, inject, onMounted, onUnmounted, watch }
 import calcAge from 's-age';
 import * as misskey from 'misskey-js';
 import XUserTimeline from './index.timeline.vue';
-import XNote from '@/components/note.vue';
-import MkFollowButton from '@/components/follow-button.vue';
+import XNote from '@/components/MkNote.vue';
+import MkFollowButton from '@/components/MkFollowButton.vue';
 import MkContainer from '@/components/ui/container.vue';
 import MkFolder from '@/components/ui/folder.vue';
-import MkRemoteCaution from '@/components/remote-caution.vue';
-import MkTab from '@/components/tab.vue';
+import MkRemoteCaution from '@/components/MkRemoteCaution.vue';
+import MkTab from '@/components/MkTab.vue';
 import MkInfo from '@/components/ui/info.vue';
 import { getScrollPosition } from '@/scripts/scroll';
 import { getUserMenu } from '@/scripts/get-user-menu';
diff --git a/packages/client/src/pages/user/index.activity.vue b/packages/client/src/pages/user/index.activity.vue
index 8a7a86e0f1..30e5a56f39 100644
--- a/packages/client/src/pages/user/index.activity.vue
+++ b/packages/client/src/pages/user/index.activity.vue
@@ -17,7 +17,7 @@
 import { } from 'vue';
 import * as misskey from 'misskey-js';
 import MkContainer from '@/components/ui/container.vue';
-import MkChart from '@/components/chart.vue';
+import MkChart from '@/components/MkChart.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/index.photos.vue
index 79dd1726e1..2a58b49f61 100644
--- a/packages/client/src/pages/user/index.photos.vue
+++ b/packages/client/src/pages/user/index.photos.vue
@@ -23,7 +23,7 @@ import { getStaticImageUrl } from '@/scripts/get-static-image-url';
 import { notePage } from '@/filters/note';
 import * as os from '@/os';
 import MkContainer from '@/components/ui/container.vue';
-import ImgWithBlurhash from '@/components/img-with-blurhash.vue';
+import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
 
 export default defineComponent({
 	components: {
diff --git a/packages/client/src/pages/user/index.timeline.vue b/packages/client/src/pages/user/index.timeline.vue
index 0345978b8d..41983a5ae8 100644
--- a/packages/client/src/pages/user/index.timeline.vue
+++ b/packages/client/src/pages/user/index.timeline.vue
@@ -14,8 +14,8 @@
 <script lang="ts" setup>
 import { ref, computed } from 'vue';
 import * as misskey from 'misskey-js';
-import XNotes from '@/components/notes.vue';
-import MkTab from '@/components/tab.vue';
+import XNotes from '@/components/MkNotes.vue';
+import MkTab from '@/components/MkTab.vue';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
 
diff --git a/packages/client/src/pages/user/pages.vue b/packages/client/src/pages/user/pages.vue
index ad101158e0..69bf926ebe 100644
--- a/packages/client/src/pages/user/pages.vue
+++ b/packages/client/src/pages/user/pages.vue
@@ -9,7 +9,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
 import * as misskey from 'misskey-js';
-import MkPagePreview from '@/components/page-preview.vue';
+import MkPagePreview from '@/components/MkPagePreview.vue';
 import MkPagination from '@/components/ui/pagination.vue';
 
 const props = defineProps<{
diff --git a/packages/client/src/pages/user/reactions.vue b/packages/client/src/pages/user/reactions.vue
index d2c1f92ebb..f1e8f61b08 100644
--- a/packages/client/src/pages/user/reactions.vue
+++ b/packages/client/src/pages/user/reactions.vue
@@ -17,8 +17,8 @@
 import { computed } from 'vue';
 import * as misskey from 'misskey-js';
 import MkPagination from '@/components/ui/pagination.vue';
-import MkNote from '@/components/note.vue';
-import MkReactionIcon from '@/components/reaction-icon.vue';
+import MkNote from '@/components/MkNote.vue';
+import MkReactionIcon from '@/components/MkReactionIcon.vue';
 
 const props = defineProps<{
 	user: misskey.entities.User;
diff --git a/packages/client/src/pages/welcome.entrance.a.vue b/packages/client/src/pages/welcome.entrance.a.vue
index b63ded9f0b..a182597a84 100644
--- a/packages/client/src/pages/welcome.entrance.a.vue
+++ b/packages/client/src/pages/welcome.entrance.a.vue
@@ -56,12 +56,12 @@
 import { } from 'vue';
 import { toUnicode } from 'punycode/';
 import XTimeline from './welcome.timeline.vue';
-import MarqueeText from '@/components/marquee.vue';
-import XSigninDialog from '@/components/signin-dialog.vue';
-import XSignupDialog from '@/components/signup-dialog.vue';
+import MarqueeText from '@/components/MkMarquee.vue';
+import XSigninDialog from '@/components/MkSigninDialog.vue';
+import XSignupDialog from '@/components/MkSignupDialog.vue';
 import MkButton from '@/components/ui/button.vue';
-import XNote from '@/components/note.vue';
-import MkFeaturedPhotos from '@/components/featured-photos.vue';
+import XNote from '@/components/MkNote.vue';
+import MkFeaturedPhotos from '@/components/MkFeaturedPhotos.vue';
 import { host, instanceName } from '@/config';
 import * as os from '@/os';
 import number from '@/filters/number';
diff --git a/packages/client/src/pages/welcome.entrance.b.vue b/packages/client/src/pages/welcome.entrance.b.vue
index 344dc9aed9..46cf8c2289 100644
--- a/packages/client/src/pages/welcome.entrance.b.vue
+++ b/packages/client/src/pages/welcome.entrance.b.vue
@@ -38,11 +38,11 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { toUnicode } from 'punycode/';
-import XSigninDialog from '@/components/signin-dialog.vue';
-import XSignupDialog from '@/components/signup-dialog.vue';
+import XSigninDialog from '@/components/MkSigninDialog.vue';
+import XSignupDialog from '@/components/MkSignupDialog.vue';
 import MkButton from '@/components/ui/button.vue';
-import XNote from '@/components/note.vue';
-import MkFeaturedPhotos from '@/components/featured-photos.vue';
+import XNote from '@/components/MkNote.vue';
+import MkFeaturedPhotos from '@/components/MkFeaturedPhotos.vue';
 import XTimeline from './welcome.timeline.vue';
 import { host, instanceName } from '@/config';
 import * as os from '@/os';
diff --git a/packages/client/src/pages/welcome.entrance.c.vue b/packages/client/src/pages/welcome.entrance.c.vue
index d583c5df35..6422d29234 100644
--- a/packages/client/src/pages/welcome.entrance.c.vue
+++ b/packages/client/src/pages/welcome.entrance.c.vue
@@ -58,11 +58,11 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { toUnicode } from 'punycode/';
-import XSigninDialog from '@/components/signin-dialog.vue';
-import XSignupDialog from '@/components/signup-dialog.vue';
+import XSigninDialog from '@/components/MkSigninDialog.vue';
+import XSignupDialog from '@/components/MkSignupDialog.vue';
 import MkButton from '@/components/ui/button.vue';
-import XNote from '@/components/note.vue';
-import MkFeaturedPhotos from '@/components/featured-photos.vue';
+import XNote from '@/components/MkNote.vue';
+import MkFeaturedPhotos from '@/components/MkFeaturedPhotos.vue';
 import XTimeline from './welcome.timeline.vue';
 import { host, instanceName } from '@/config';
 import * as os from '@/os';
diff --git a/packages/client/src/pages/welcome.timeline.vue b/packages/client/src/pages/welcome.timeline.vue
index bec9481ffd..e19ebac3ed 100644
--- a/packages/client/src/pages/welcome.timeline.vue
+++ b/packages/client/src/pages/welcome.timeline.vue
@@ -23,9 +23,9 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import XReactionsViewer from '@/components/reactions-viewer.vue';
-import XMediaList from '@/components/media-list.vue';
-import XPoll from '@/components/poll.vue';
+import XReactionsViewer from '@/components/MkReactionsViewer.vue';
+import XMediaList from '@/components/MkMediaList.vue';
+import XPoll from '@/components/MkPoll.vue';
 import * as os from '@/os';
 
 export default defineComponent({
diff --git a/packages/client/src/scripts/autocomplete.ts b/packages/client/src/scripts/autocomplete.ts
index 3ef6224175..206724de9e 100644
--- a/packages/client/src/scripts/autocomplete.ts
+++ b/packages/client/src/scripts/autocomplete.ts
@@ -157,7 +157,7 @@ export class Autocomplete {
 			const _y = ref(y);
 			const _q = ref(q);
 
-			const { dispose } = await popup(defineAsyncComponent(() => import('@/components/autocomplete.vue')), {
+			const { dispose } = await popup(defineAsyncComponent(() => import('@/components/MkAutocomplete.vue')), {
 				textarea: this.textarea,
 				close: this.close,
 				type: type,
diff --git a/packages/client/src/scripts/get-note-menu.ts b/packages/client/src/scripts/get-note-menu.ts
index 632143f514..a5cf982066 100644
--- a/packages/client/src/scripts/get-note-menu.ts
+++ b/packages/client/src/scripts/get-note-menu.ts
@@ -289,7 +289,7 @@ export function getNoteMenu(props: {
 					text: i18n.ts.reportAbuse,
 					action: () => {
 						const u = appearNote.url || appearNote.uri || `${url}/notes/${appearNote.id}`;
-						os.popup(defineAsyncComponent(() => import('@/components/abuse-report-window.vue')), {
+						os.popup(defineAsyncComponent(() => import('@/components/MkAbuseReportWindow.vue')), {
 							user: appearNote.user,
 							initialComment: `Note: ${u}\n-----\n`,
 						}, {}, 'closed');
diff --git a/packages/client/src/scripts/get-user-menu.ts b/packages/client/src/scripts/get-user-menu.ts
index c609fddd51..4a5a2d42f0 100644
--- a/packages/client/src/scripts/get-user-menu.ts
+++ b/packages/client/src/scripts/get-user-menu.ts
@@ -129,7 +129,7 @@ export function getUserMenu(user, router: Router = mainRouter) {
 	}
 
 	function reportAbuse() {
-		os.popup(defineAsyncComponent(() => import('@/components/abuse-report-window.vue')), {
+		os.popup(defineAsyncComponent(() => import('@/components/MkAbuseReportWindow.vue')), {
 			user: user,
 		}, {}, 'closed');
 	}
diff --git a/packages/client/src/scripts/please-login.ts b/packages/client/src/scripts/please-login.ts
index 1f38061841..3323968f71 100644
--- a/packages/client/src/scripts/please-login.ts
+++ b/packages/client/src/scripts/please-login.ts
@@ -6,7 +6,7 @@ import { popup } from '@/os';
 export function pleaseLogin(path?: string) {
 	if ($i) return;
 
-	popup(defineAsyncComponent(() => import('@/components/signin-dialog.vue')), {
+	popup(defineAsyncComponent(() => import('@/components/MkSigninDialog.vue')), {
 		autoSet: true,
 		message: i18n.ts.signinRequired
 	}, {
diff --git a/packages/client/src/scripts/reaction-picker.ts b/packages/client/src/scripts/reaction-picker.ts
index b7699cae4a..a6d0940a40 100644
--- a/packages/client/src/scripts/reaction-picker.ts
+++ b/packages/client/src/scripts/reaction-picker.ts
@@ -12,7 +12,7 @@ class ReactionPicker {
 	}
 
 	public async init() {
-		await popup(defineAsyncComponent(() => import('@/components/emoji-picker-dialog.vue')), {
+		await popup(defineAsyncComponent(() => import('@/components/MkEmojiPickerDialog.vue')), {
 			src: this.src,
 			asReactionPicker: true,
 			manualShowing: this.manualShowing
diff --git a/packages/client/src/scripts/use-chart-tooltip.ts b/packages/client/src/scripts/use-chart-tooltip.ts
index ab57165694..91c27585f3 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, ref } from 'vue';
 import * as os from '@/os';
-import MkChartTooltip from '@/components/chart-tooltip.vue';
+import MkChartTooltip from '@/components/MkChartTooltip.vue';
 
 export function useChartTooltip() {
 	const tooltipShowing = ref(false);
diff --git a/packages/client/src/ui/_common_/common.vue b/packages/client/src/ui/_common_/common.vue
index f32cd3fe0d..1ea59dd260 100644
--- a/packages/client/src/ui/_common_/common.vue
+++ b/packages/client/src/ui/_common_/common.vue
@@ -38,7 +38,7 @@ const onNotification = notification => {
 			id: notification.id,
 		});
 
-		popup(defineAsyncComponent(() => import('@/components/notification-toast.vue')), {
+		popup(defineAsyncComponent(() => import('@/components/MkNotificationToast.vue')), {
 			notification,
 		}, {}, 'closed');
 	}
diff --git a/packages/client/src/ui/_common_/navbar-for-mobile.vue b/packages/client/src/ui/_common_/navbar-for-mobile.vue
index 5a84db81e1..0880cd3d7b 100644
--- a/packages/client/src/ui/_common_/navbar-for-mobile.vue
+++ b/packages/client/src/ui/_common_/navbar-for-mobile.vue
@@ -123,7 +123,7 @@ function openInstanceMenu(ev: MouseEvent) {
 }
 
 function more() {
-	os.popup(defineAsyncComponent(() => import('@/components/launch-pad.vue')), {}, {
+	os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {}, {
 	}, 'closed');
 }
 </script>
diff --git a/packages/client/src/ui/_common_/navbar.vue b/packages/client/src/ui/_common_/navbar.vue
index dc4b158596..206cd004f6 100644
--- a/packages/client/src/ui/_common_/navbar.vue
+++ b/packages/client/src/ui/_common_/navbar.vue
@@ -149,7 +149,7 @@ function openInstanceMenu(ev: MouseEvent) {
 }
 
 function more(ev: MouseEvent) {
-	os.popup(defineAsyncComponent(() => import('@/components/launch-pad.vue')), {
+	os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {
 		src: ev.currentTarget ?? ev.target,
 	}, {
 	}, 'closed');
diff --git a/packages/client/src/ui/_common_/statusbar-federation.vue b/packages/client/src/ui/_common_/statusbar-federation.vue
index 7cf6b1f973..7d4f0d6166 100644
--- a/packages/client/src/ui/_common_/statusbar-federation.vue
+++ b/packages/client/src/ui/_common_/statusbar-federation.vue
@@ -22,7 +22,7 @@
 <script lang="ts" setup>
 import { computed, defineAsyncComponent, ref, toRef, watch } from 'vue';
 import * as misskey from 'misskey-js';
-import MarqueeText from '@/components/marquee.vue';
+import MarqueeText from '@/components/MkMarquee.vue';
 import * as os from '@/os';
 import { useInterval } from '@/scripts/use-interval';
 import { getNoteSummary } from '@/scripts/get-note-summary';
diff --git a/packages/client/src/ui/_common_/statusbar-rss.vue b/packages/client/src/ui/_common_/statusbar-rss.vue
index 635b875ca1..e75e13bb48 100644
--- a/packages/client/src/ui/_common_/statusbar-rss.vue
+++ b/packages/client/src/ui/_common_/statusbar-rss.vue
@@ -17,7 +17,7 @@
 
 <script lang="ts" setup>
 import { computed, defineAsyncComponent, ref, toRef, watch } from 'vue';
-import MarqueeText from '@/components/marquee.vue';
+import MarqueeText from '@/components/MkMarquee.vue';
 import * as os from '@/os';
 import { useInterval } from '@/scripts/use-interval';
 import { shuffle } from '@/scripts/shuffle';
diff --git a/packages/client/src/ui/_common_/statusbar-user-list.vue b/packages/client/src/ui/_common_/statusbar-user-list.vue
index 490c8a096e..f4d989c387 100644
--- a/packages/client/src/ui/_common_/statusbar-user-list.vue
+++ b/packages/client/src/ui/_common_/statusbar-user-list.vue
@@ -22,7 +22,7 @@
 <script lang="ts" setup>
 import { computed, defineAsyncComponent, ref, toRef, watch } from 'vue';
 import * as misskey from 'misskey-js';
-import MarqueeText from '@/components/marquee.vue';
+import MarqueeText from '@/components/MkMarquee.vue';
 import * as os from '@/os';
 import { useInterval } from '@/scripts/use-interval';
 import { getNoteSummary } from '@/scripts/get-note-summary';
diff --git a/packages/client/src/ui/classic.header.vue b/packages/client/src/ui/classic.header.vue
index 131767c0e3..34248486ce 100644
--- a/packages/client/src/ui/classic.header.vue
+++ b/packages/client/src/ui/classic.header.vue
@@ -101,7 +101,7 @@ export default defineComponent({
 		},
 
 		more(ev) {
-			os.popup(defineAsyncComponent(() => import('@/components/launch-pad.vue')), {
+			os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {
 				src: ev.currentTarget ?? ev.target,
 				anchor: { x: 'center', y: 'bottom' },
 			}, {
diff --git a/packages/client/src/ui/classic.sidebar.vue b/packages/client/src/ui/classic.sidebar.vue
index e688c74f4a..42c5ab3a63 100644
--- a/packages/client/src/ui/classic.sidebar.vue
+++ b/packages/client/src/ui/classic.sidebar.vue
@@ -121,7 +121,7 @@ export default defineComponent({
 		},
 
 		more(ev) {
-			os.popup(defineAsyncComponent(() => import('@/components/launch-pad.vue')), {
+			os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {
 				src: ev.currentTarget ?? ev.target,
 			}, {}, 'closed');
 		},
diff --git a/packages/client/src/ui/classic.widgets.vue b/packages/client/src/ui/classic.widgets.vue
index 6f9d18bde5..ca8e3f4dbc 100644
--- a/packages/client/src/ui/classic.widgets.vue
+++ b/packages/client/src/ui/classic.widgets.vue
@@ -10,7 +10,7 @@
 
 <script lang="ts">
 import { defineComponent, defineAsyncComponent } from 'vue';
-import XWidgets from '@/components/widgets.vue';
+import XWidgets from '@/components/MkWidgets.vue';
 
 export default defineComponent({
 	components: {
diff --git a/packages/client/src/ui/deck/antenna-column.vue b/packages/client/src/ui/deck/antenna-column.vue
index 6268c357eb..df9539617c 100644
--- a/packages/client/src/ui/deck/antenna-column.vue
+++ b/packages/client/src/ui/deck/antenna-column.vue
@@ -12,7 +12,7 @@
 import { onMounted } from 'vue';
 import XColumn from './column.vue';
 import { updateColumn, Column } from './deck-store';
-import XTimeline from '@/components/timeline.vue';
+import XTimeline from '@/components/MkTimeline.vue';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
 
diff --git a/packages/client/src/ui/deck/direct-column.vue b/packages/client/src/ui/deck/direct-column.vue
index 4837c0ce38..104f781b35 100644
--- a/packages/client/src/ui/deck/direct-column.vue
+++ b/packages/client/src/ui/deck/direct-column.vue
@@ -9,7 +9,7 @@
 <script lang="ts" setup>
 import { } from 'vue';
 import XColumn from './column.vue';
-import XNotes from '@/components/notes.vue';
+import XNotes from '@/components/MkNotes.vue';
 import { Column } from './deck-store';
 
 defineProps<{
diff --git a/packages/client/src/ui/deck/list-column.vue b/packages/client/src/ui/deck/list-column.vue
index 6fbb9f0e6c..9a1fb5b445 100644
--- a/packages/client/src/ui/deck/list-column.vue
+++ b/packages/client/src/ui/deck/list-column.vue
@@ -12,7 +12,7 @@
 import { } from 'vue';
 import XColumn from './column.vue';
 import { updateColumn, Column } from './deck-store';
-import XTimeline from '@/components/timeline.vue';
+import XTimeline from '@/components/MkTimeline.vue';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
 
diff --git a/packages/client/src/ui/deck/mentions-column.vue b/packages/client/src/ui/deck/mentions-column.vue
index 0b6ca3a239..18055215d2 100644
--- a/packages/client/src/ui/deck/mentions-column.vue
+++ b/packages/client/src/ui/deck/mentions-column.vue
@@ -9,7 +9,7 @@
 <script lang="ts" setup>
 import { } from 'vue';
 import XColumn from './column.vue';
-import XNotes from '@/components/notes.vue';
+import XNotes from '@/components/MkNotes.vue';
 import { Column } from './deck-store';
 
 defineProps<{
diff --git a/packages/client/src/ui/deck/notifications-column.vue b/packages/client/src/ui/deck/notifications-column.vue
index 34132f2e9f..b02118ee56 100644
--- a/packages/client/src/ui/deck/notifications-column.vue
+++ b/packages/client/src/ui/deck/notifications-column.vue
@@ -10,7 +10,7 @@
 import { defineAsyncComponent } from 'vue';
 import XColumn from './column.vue';
 import { updateColumn , Column } from './deck-store';
-import XNotifications from '@/components/notifications.vue';
+import XNotifications from '@/components/MkNotifications.vue';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
 
@@ -24,7 +24,7 @@ const emit = defineEmits<{
 }>();
 
 function func() {
-	os.popup(defineAsyncComponent(() => import('@/components/notification-setting-window.vue')), {
+	os.popup(defineAsyncComponent(() => import('@/components/MkNotificationSettingWindow.vue')), {
 		includingTypes: props.column.includingTypes,
 	}, {
 		done: async (res) => {
diff --git a/packages/client/src/ui/deck/tl-column.vue b/packages/client/src/ui/deck/tl-column.vue
index 16ec3d147a..32d0bd2346 100644
--- a/packages/client/src/ui/deck/tl-column.vue
+++ b/packages/client/src/ui/deck/tl-column.vue
@@ -23,7 +23,7 @@
 import { onMounted } from 'vue';
 import XColumn from './column.vue';
 import { removeColumn, updateColumn, Column } from './deck-store';
-import XTimeline from '@/components/timeline.vue';
+import XTimeline from '@/components/MkTimeline.vue';
 import * as os from '@/os';
 import { $i } from '@/account';
 import { instance } from '@/instance';
@@ -105,22 +105,6 @@ const menu = [{
 	text: i18n.ts.timeline,
 	action: setType,
 }];
-
-/*
-export default defineComponent({
-	watch: {
-		mediaOnly() {
-			(this.$refs.timeline as any).reload();
-		}
-	},
-
-	methods: {
-		focus() {
-			(this.$refs.timeline as any).focus();
-		}
-	}
-});
-*/
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/ui/deck/widgets-column.vue b/packages/client/src/ui/deck/widgets-column.vue
index 3661dda59f..2c97009b3b 100644
--- a/packages/client/src/ui/deck/widgets-column.vue
+++ b/packages/client/src/ui/deck/widgets-column.vue
@@ -13,7 +13,7 @@
 import { } from 'vue';
 import XColumn from './column.vue';
 import { addColumnWidget, Column, removeColumnWidget, setColumnWidgets, updateColumnWidget } from './deck-store';
-import XWidgets from '@/components/widgets.vue';
+import XWidgets from '@/components/MkWidgets.vue';
 import { i18n } from '@/i18n';
 
 const props = defineProps<{
diff --git a/packages/client/src/ui/universal.widgets.vue b/packages/client/src/ui/universal.widgets.vue
index 7aed083886..179f8a6baa 100644
--- a/packages/client/src/ui/universal.widgets.vue
+++ b/packages/client/src/ui/universal.widgets.vue
@@ -9,7 +9,7 @@
 
 <script lang="ts" setup>
 import { onMounted } from 'vue';
-import XWidgets from '@/components/widgets.vue';
+import XWidgets from '@/components/MkWidgets.vue';
 import { i18n } from '@/i18n';
 import { defaultStore } from '@/store';
 
diff --git a/packages/client/src/ui/visitor/b.vue b/packages/client/src/ui/visitor/b.vue
index bb0c59e4ff..463224bbcc 100644
--- a/packages/client/src/ui/visitor/b.vue
+++ b/packages/client/src/ui/visitor/b.vue
@@ -54,8 +54,8 @@ import { search } from '@/scripts/search';
 import * as os from '@/os';
 import { instance } from '@/instance';
 import MkPagination from '@/components/ui/pagination.vue';
-import XSigninDialog from '@/components/signin-dialog.vue';
-import XSignupDialog from '@/components/signup-dialog.vue';
+import XSigninDialog from '@/components/MkSigninDialog.vue';
+import XSignupDialog from '@/components/MkSignupDialog.vue';
 import MkButton from '@/components/ui/button.vue';
 import { ColdDeviceStorage, defaultStore } from '@/store';
 import { mainRouter } from '@/router';
diff --git a/packages/client/src/ui/visitor/header.vue b/packages/client/src/ui/visitor/header.vue
index 6b4dd1ded2..46cc23d34c 100644
--- a/packages/client/src/ui/visitor/header.vue
+++ b/packages/client/src/ui/visitor/header.vue
@@ -43,8 +43,8 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import XSigninDialog from '@/components/signin-dialog.vue';
-import XSignupDialog from '@/components/signup-dialog.vue';
+import XSigninDialog from '@/components/MkSigninDialog.vue';
+import XSignupDialog from '@/components/MkSignupDialog.vue';
 import * as os from '@/os';
 import { instance } from '@/instance';
 import { search } from '@/scripts/search';
diff --git a/packages/client/src/ui/visitor/kanban.vue b/packages/client/src/ui/visitor/kanban.vue
index 7c2181eaea..da6c249524 100644
--- a/packages/client/src/ui/visitor/kanban.vue
+++ b/packages/client/src/ui/visitor/kanban.vue
@@ -42,8 +42,8 @@ import { defineComponent, defineAsyncComponent } from 'vue';
 import { host, instanceName } from '@/config';
 import * as os from '@/os';
 import MkPagination from '@/components/ui/pagination.vue';
-import XSigninDialog from '@/components/signin-dialog.vue';
-import XSignupDialog from '@/components/signup-dialog.vue';
+import XSigninDialog from '@/components/MkSigninDialog.vue';
+import XSignupDialog from '@/components/MkSignupDialog.vue';
 import MkButton from '@/components/ui/button.vue';
 
 export default defineComponent({
diff --git a/packages/client/src/widgets/clock.vue b/packages/client/src/widgets/clock.vue
index 7d78b05f84..51d48b30a6 100644
--- a/packages/client/src/widgets/clock.vue
+++ b/packages/client/src/widgets/clock.vue
@@ -9,6 +9,7 @@
 			:graduations="widgetProps.graduations"
 			:fade-graduations="widgetProps.fadeGraduations"
 			:twentyfour="widgetProps.twentyFour"
+			:s-animation="widgetProps.sAnimation"
 		/>
 		<MkDigitalClock v-if="widgetProps.label === 'time' || widgetProps.label === 'timeAndTz'" class="_monospace label c time" :show-s="false" :offset="tzOffset"/>
 		<div v-if="widgetProps.label === 'tz' || widgetProps.label === 'timeAndTz'" class="_monospace label d offset">{{ tzOffsetLabel }}</div>
@@ -21,8 +22,8 @@ import { } from 'vue';
 import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
 import { GetFormResultType } from '@/scripts/form';
 import MkContainer from '@/components/ui/container.vue';
-import MkAnalogClock from '@/components/analog-clock.vue';
-import MkDigitalClock from '@/components/digital-clock.vue';
+import MkAnalogClock from '@/components/MkAnalogClock.vue';
+import MkDigitalClock from '@/components/MkDigitalClock.vue';
 import { timezones } from '@/scripts/timezones';
 import { i18n } from '@/i18n';
 
@@ -70,6 +71,17 @@ const widgetPropsDef = {
 		type: 'boolean' as const,
 		default: true,
 	},
+	sAnimation: {
+		type: 'radio' as const,
+		default: 'elastic',
+		options: [{
+			value: 'none', label: 'None',
+		}, {
+			value: 'elastic', label: 'Elastic',
+		}, {
+			value: 'easeOut', label: 'Ease out',
+		}],
+	},
 	twentyFour: {
 		type: 'boolean' as const,
 		default: false,
diff --git a/packages/client/src/widgets/digital-clock.vue b/packages/client/src/widgets/digital-clock.vue
index 387fad9b62..d2bfd523f3 100644
--- a/packages/client/src/widgets/digital-clock.vue
+++ b/packages/client/src/widgets/digital-clock.vue
@@ -13,7 +13,7 @@ import { onUnmounted, ref, watch } from 'vue';
 import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
 import { GetFormResultType } from '@/scripts/form';
 import { timezones } from '@/scripts/timezones';
-import MkDigitalClock from '@/components/digital-clock.vue';
+import MkDigitalClock from '@/components/MkDigitalClock.vue';
 
 const name = 'digitalClock';
 
diff --git a/packages/client/src/widgets/federation.vue b/packages/client/src/widgets/federation.vue
index 9619aa53ee..ec46a0ccb5 100644
--- a/packages/client/src/widgets/federation.vue
+++ b/packages/client/src/widgets/federation.vue
@@ -23,7 +23,7 @@ import { onMounted, onUnmounted, ref } from 'vue';
 import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
 import { GetFormResultType } from '@/scripts/form';
 import MkContainer from '@/components/ui/container.vue';
-import MkMiniChart from '@/components/mini-chart.vue';
+import MkMiniChart from '@/components/MkMiniChart.vue';
 import * as os from '@/os';
 import { useInterval } from '@/scripts/use-interval';
 import { i18n } from '@/i18n';
diff --git a/packages/client/src/widgets/instance-cloud.vue b/packages/client/src/widgets/instance-cloud.vue
index 597ce0e824..03fda4c74a 100644
--- a/packages/client/src/widgets/instance-cloud.vue
+++ b/packages/client/src/widgets/instance-cloud.vue
@@ -17,7 +17,7 @@ import { } from 'vue';
 import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
 import { GetFormResultType } from '@/scripts/form';
 import MkContainer from '@/components/ui/container.vue';
-import MkTagCloud from '@/components/tag-cloud.vue';
+import MkTagCloud from '@/components/MkTagCloud.vue';
 import * as os from '@/os';
 import { useInterval } from '@/scripts/use-interval';
 
diff --git a/packages/client/src/widgets/notifications.vue b/packages/client/src/widgets/notifications.vue
index 0d3fb8cdd8..46fbdc0263 100644
--- a/packages/client/src/widgets/notifications.vue
+++ b/packages/client/src/widgets/notifications.vue
@@ -13,7 +13,7 @@ import { defineAsyncComponent } from 'vue';
 import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
 import { GetFormResultType } from '@/scripts/form';
 import MkContainer from '@/components/ui/container.vue';
-import XNotifications from '@/components/notifications.vue';
+import XNotifications from '@/components/MkNotifications.vue';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
 
@@ -50,7 +50,7 @@ const { widgetProps, configure, save } = useWidgetPropsManager(name,
 );
 
 const configureNotification = () => {
-	os.popup(defineAsyncComponent(() => import('@/components/notification-setting-window.vue')), {
+	os.popup(defineAsyncComponent(() => import('@/components/MkNotificationSettingWindow.vue')), {
 		includingTypes: widgetProps.includingTypes,
 	}, {
 		done: async (res) => {
diff --git a/packages/client/src/widgets/post-form.vue b/packages/client/src/widgets/post-form.vue
index b542913357..f1708775ba 100644
--- a/packages/client/src/widgets/post-form.vue
+++ b/packages/client/src/widgets/post-form.vue
@@ -6,7 +6,7 @@
 import { } from 'vue';
 import { GetFormResultType } from '@/scripts/form';
 import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import XPostForm from '@/components/post-form.vue';
+import XPostForm from '@/components/MkPostForm.vue';
 
 const name = 'postForm';
 
diff --git a/packages/client/src/widgets/rss-ticker.vue b/packages/client/src/widgets/rss-ticker.vue
index c692c0c4ff..6e5924b6be 100644
--- a/packages/client/src/widgets/rss-ticker.vue
+++ b/packages/client/src/widgets/rss-ticker.vue
@@ -21,7 +21,7 @@
 <script lang="ts" setup>
 import { onMounted, onUnmounted, ref, watch } from 'vue';
 import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import MarqueeText from '@/components/marquee.vue';
+import MarqueeText from '@/components/MkMarquee.vue';
 import { GetFormResultType } from '@/scripts/form';
 import * as os from '@/os';
 import MkContainer from '@/components/ui/container.vue';
diff --git a/packages/client/src/widgets/timeline.vue b/packages/client/src/widgets/timeline.vue
index 3bcad1ae29..5042632cfc 100644
--- a/packages/client/src/widgets/timeline.vue
+++ b/packages/client/src/widgets/timeline.vue
@@ -25,7 +25,7 @@ import { GetFormResultType } from '@/scripts/form';
 import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
 import * as os from '@/os';
 import MkContainer from '@/components/ui/container.vue';
-import XTimeline from '@/components/timeline.vue';
+import XTimeline from '@/components/MkTimeline.vue';
 import { $i } from '@/account';
 import { i18n } from '@/i18n';
 
diff --git a/packages/client/src/widgets/trends.vue b/packages/client/src/widgets/trends.vue
index 8d11b69cb8..53ae4019dd 100644
--- a/packages/client/src/widgets/trends.vue
+++ b/packages/client/src/widgets/trends.vue
@@ -22,7 +22,7 @@ import { onMounted, onUnmounted, ref } from 'vue';
 import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
 import { GetFormResultType } from '@/scripts/form';
 import MkContainer from '@/components/ui/container.vue';
-import MkMiniChart from '@/components/mini-chart.vue';
+import MkMiniChart from '@/components/MkMiniChart.vue';
 import * as os from '@/os';
 import { useInterval } from '@/scripts/use-interval';
 import { i18n } from '@/i18n';