From 372a17d7f0fd4e95086b5e9685d4c21a3550422b Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Fri, 6 Jan 2023 09:41:14 +0900
Subject: [PATCH] refactor

---
 .../src/components/MkAbuseReportWindow.vue    |  6 +-
 packages/frontend/src/components/MkAsUi.vue   |  2 +-
 .../src/components/MkCropperDialog.vue        |  8 +-
 .../src/components/MkDriveSelectDialog.vue    |  8 +-
 .../components/MkFileCaptionEditWindow.vue    |  8 +-
 .../src/components/MkFlashPreview.vue         |  2 +-
 .../src/components/MkForgotPassword.vue       |  8 +-
 .../frontend/src/components/MkFormDialog.vue  |  8 +-
 packages/frontend/src/components/MkModal.vue  |  1 -
 .../src/components/MkModalPageWindow.vue      |  2 +-
 .../frontend/src/components/MkModalWindow.vue |  3 +-
 .../src/components/MkNoteDetailed.vue         |  2 +-
 .../MkNotificationSettingWindow.vue           | 10 +--
 .../frontend/src/components/MkPagePreview.vue |  2 +-
 .../src/components/MkRemoteCaution.vue        |  2 +-
 packages/frontend/src/components/MkSample.vue |  8 +-
 packages/frontend/src/components/MkSignin.vue |  6 +-
 .../src/components/MkSigninDialog.vue         | 12 +--
 .../src/components/MkSignupDialog.vue         | 16 ++--
 .../src/components/MkTokenGenerateWindow.vue  | 10 +--
 .../src/components/MkUserSelectDialog.vue     |  6 +-
 packages/frontend/src/components/MkWindow.vue |  2 +-
 packages/frontend/src/pages/admin/abuses.vue  |  4 +-
 .../src/pages/admin/announcements.vue         | 10 +--
 .../src/pages/admin/bot-protection.vue        |  4 +-
 .../src/pages/admin/emoji-edit-dialog.vue     |  6 +-
 packages/frontend/src/pages/admin/emojis.vue  |  2 +-
 .../src/pages/admin/instance-block.vue        |  4 +-
 .../src/pages/admin/integrations.discord.vue  |  4 +-
 .../src/pages/admin/integrations.github.vue   |  4 +-
 .../src/pages/admin/integrations.twitter.vue  |  4 +-
 .../src/pages/admin/proxy-account.vue         |  4 +-
 packages/frontend/src/pages/admin/relays.vue  |  2 +-
 .../frontend/src/pages/admin/security.vue     |  6 +-
 packages/frontend/src/pages/announcements.vue | 23 +++--
 .../frontend/src/pages/antenna-timeline.vue   |  2 +-
 packages/frontend/src/pages/auth.form.vue     | 10 +--
 packages/frontend/src/pages/channels.vue      |  6 +-
 .../frontend/src/pages/flash/flash-edit.vue   |  2 +-
 packages/frontend/src/pages/gallery/edit.vue  | 10 +--
 packages/frontend/src/pages/gallery/post.vue  |  2 +-
 .../frontend/src/pages/messaging/index.vue    |  2 +-
 .../pages/messaging/messaging-room.form.vue   |  2 +-
 .../src/pages/messaging/messaging-room.vue    |  4 +-
 .../frontend/src/pages/mfm-cheat-sheet.vue    | 60 ++++++-------
 packages/frontend/src/pages/miauth.vue        | 22 ++---
 .../frontend/src/pages/my-lists/index.vue     |  2 +-
 packages/frontend/src/pages/my-lists/list.vue | 10 +--
 packages/frontend/src/pages/note.vue          |  6 +-
 packages/frontend/src/pages/page.vue          |  2 +-
 .../frontend/src/pages/reset-password.vue     |  4 +-
 .../frontend/src/pages/settings/accounts.vue  |  4 +-
 packages/frontend/src/pages/settings/api.vue  |  4 +-
 .../src/pages/settings/delete-account.vue     |  6 +-
 .../frontend/src/pages/settings/navbar.vue    |  4 +-
 .../src/pages/settings/notifications.vue      |  2 +-
 .../src/pages/settings/plugin.install.vue     |  4 +-
 .../frontend/src/pages/settings/plugin.vue    |  2 +-
 .../frontend/src/pages/settings/reaction.vue  |  8 +-
 .../frontend/src/pages/settings/security.vue  |  6 +-
 .../src/pages/settings/sounds.sound.vue       |  8 +-
 .../frontend/src/pages/settings/sounds.vue    |  4 +-
 .../pages/settings/statusbar.statusbar.vue    |  6 +-
 .../frontend/src/pages/settings/statusbar.vue |  4 +-
 .../src/pages/settings/theme.install.vue      |  8 +-
 .../src/pages/settings/theme.manage.vue       |  4 +-
 .../frontend/src/pages/settings/theme.vue     |  6 +-
 .../src/pages/settings/webhook.edit.vue       |  6 +-
 .../src/pages/settings/webhook.new.vue        |  6 +-
 packages/frontend/src/pages/tag.vue           |  2 +-
 packages/frontend/src/pages/theme-editor.vue  |  4 +-
 packages/frontend/src/pages/timeline.vue      |  6 +-
 packages/frontend/src/pages/user-info.vue     |  8 +-
 .../frontend/src/pages/user-list-timeline.vue |  2 +-
 packages/frontend/src/pages/user/home.vue     |  4 +-
 packages/frontend/src/style.scss              | 90 +------------------
 packages/frontend/src/ui/deck/column.vue      |  2 +-
 77 files changed, 245 insertions(+), 320 deletions(-)

diff --git a/packages/frontend/src/components/MkAbuseReportWindow.vue b/packages/frontend/src/components/MkAbuseReportWindow.vue
index ab90ed357..e20cf1b73 100644
--- a/packages/frontend/src/components/MkAbuseReportWindow.vue
+++ b/packages/frontend/src/components/MkAbuseReportWindow.vue
@@ -8,14 +8,14 @@
 			</template>
 		</I18n>
 	</template>
-	<div class="dpvffvvy _monolithic_">
-		<div class="_section">
+	<div class="dpvffvvy _autoGap">
+		<div class="">
 			<MkTextarea v-model="comment">
 				<template #label>{{ i18n.ts.details }}</template>
 				<template #caption>{{ i18n.ts.fillAbuseReportDescription }}</template>
 			</MkTextarea>
 		</div>
-		<div class="_section">
+		<div class="">
 			<MkButton primary full :disabled="comment.length === 0" @click="send">{{ i18n.ts.send }}</MkButton>
 		</div>
 	</div>
diff --git a/packages/frontend/src/components/MkAsUi.vue b/packages/frontend/src/components/MkAsUi.vue
index ec214f039..e2d8c010a 100644
--- a/packages/frontend/src/components/MkAsUi.vue
+++ b/packages/frontend/src/components/MkAsUi.vue
@@ -8,7 +8,7 @@
 	<span v-else-if="c.type === 'text'" :class="{ [$style.fontSerif]: c.font === 'serif', [$style.fontMonospace]: c.font === 'monospace' }" :style="{ fontSize: c.size ? `${c.size * 100}%` : null, fontWeight: c.bold ? 'bold' : null, color: c.color ?? null }">{{ c.text }}</span>
 	<Mfm v-else-if="c.type === 'mfm'" :class="{ [$style.fontSerif]: c.font === 'serif', [$style.fontMonospace]: c.font === 'monospace' }" :style="{ fontSize: c.size ? `${c.size * 100}%` : null, color: c.color ?? null }" :text="c.text"/>
 	<MkButton v-else-if="c.type === 'button'" :primary="c.primary" :rounded="c.rounded" :small="size === 'small'" @click="c.onClick">{{ c.text }}</MkButton>
-	<div v-else-if="c.type === 'buttons'" style="display: flex; gap: 8px; flex-wrap: wrap;">
+	<div v-else-if="c.type === 'buttons'" class="_buttons">
 		<MkButton v-for="button in c.buttons" :primary="button.primary" :rounded="button.rounded" :small="size === 'small'" @click="button.onClick">{{ button.text }}</MkButton>
 	</div>
 	<MkSwitch v-else-if="c.type === 'switch'" :model-value="valueForSwitch" @update:model-value="onSwitchUpdate">
diff --git a/packages/frontend/src/components/MkCropperDialog.vue b/packages/frontend/src/components/MkCropperDialog.vue
index f00fef12f..84adb790f 100644
--- a/packages/frontend/src/components/MkCropperDialog.vue
+++ b/packages/frontend/src/components/MkCropperDialog.vue
@@ -1,5 +1,5 @@
 <template>
-<XModalWindow
+<MkModalWindow
 	ref="dialogEl"
 	:width="800"
 	:height="500"
@@ -22,7 +22,7 @@
 			</div>
 		</div>
 	</template>
-</XModalWindow>
+</MkModalWindow>
 </template>
 
 <script lang="ts" setup>
@@ -30,7 +30,7 @@ import { nextTick, onMounted } from 'vue';
 import * as misskey from 'misskey-js';
 import Cropper from 'cropperjs';
 import tinycolor from 'tinycolor2';
-import XModalWindow from '@/components/MkModalWindow.vue';
+import MkModalWindow from '@/components/MkModalWindow.vue';
 import * as os from '@/os';
 import { $i } from '@/account';
 import { defaultStore } from '@/store';
@@ -50,7 +50,7 @@ const props = defineProps<{
 }>();
 
 const imgUrl = getProxiedImageUrl(props.file.url);
-let dialogEl = $shallowRef<InstanceType<typeof XModalWindow>>();
+let dialogEl = $shallowRef<InstanceType<typeof MkModalWindow>>();
 let imgEl = $shallowRef<HTMLImageElement>();
 let cropper: Cropper | null = null;
 let loading = $ref(true);
diff --git a/packages/frontend/src/components/MkDriveSelectDialog.vue b/packages/frontend/src/components/MkDriveSelectDialog.vue
index 6a96e758f..8d2b19c01 100644
--- a/packages/frontend/src/components/MkDriveSelectDialog.vue
+++ b/packages/frontend/src/components/MkDriveSelectDialog.vue
@@ -1,5 +1,5 @@
 <template>
-<XModalWindow
+<MkModalWindow
 	ref="dialog"
 	:width="800"
 	:height="500"
@@ -15,14 +15,14 @@
 		<span v-if="selected.length > 0" style="margin-left: 8px; opacity: 0.5;">({{ number(selected.length) }})</span>
 	</template>
 	<XDrive :multiple="multiple" :select="type" @change-selection="onChangeSelection" @selected="ok()"/>
-</XModalWindow>
+</MkModalWindow>
 </template>
 
 <script lang="ts" setup>
 import { ref, shallowRef } from 'vue';
 import * as Misskey from 'misskey-js';
 import XDrive from '@/components/MkDrive.vue';
-import XModalWindow from '@/components/MkModalWindow.vue';
+import MkModalWindow from '@/components/MkModalWindow.vue';
 import number from '@/filters/number';
 import { i18n } from '@/i18n';
 
@@ -38,7 +38,7 @@ const emit = defineEmits<{
 	(ev: 'closed'): void;
 }>();
 
-const dialog = shallowRef<InstanceType<typeof XModalWindow>>();
+const dialog = shallowRef<InstanceType<typeof MkModalWindow>>();
 
 const selected = ref<Misskey.entities.DriveFile[]>([]);
 
diff --git a/packages/frontend/src/components/MkFileCaptionEditWindow.vue b/packages/frontend/src/components/MkFileCaptionEditWindow.vue
index b3bd194dc..f7b7430bf 100644
--- a/packages/frontend/src/components/MkFileCaptionEditWindow.vue
+++ b/packages/frontend/src/components/MkFileCaptionEditWindow.vue
@@ -1,5 +1,5 @@
 <template>
-<XModalWindow
+<MkModalWindow
 	ref="dialog"
 	:width="400"
 	:height="450"
@@ -16,13 +16,13 @@
 			<template #label>{{ i18n.ts.caption }}</template>
 		</MkTextarea>
 	</MkSpacer>
-</XModalWindow>
+</MkModalWindow>
 </template>
 
 <script lang="ts" setup>
 import { } from 'vue';
 import * as Misskey from 'misskey-js';
-import XModalWindow from '@/components/MkModalWindow.vue';
+import MkModalWindow from '@/components/MkModalWindow.vue';
 import MkTextarea from '@/components/form/textarea.vue';
 import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
 import { i18n } from '@/i18n';
@@ -37,7 +37,7 @@ const emit = defineEmits<{
 	(ev: 'closed'): void;
 }>();
 
-const dialog = $shallowRef<InstanceType<typeof XModalWindow>>();
+const dialog = $shallowRef<InstanceType<typeof MkModalWindow>>();
 
 let caption = $ref(props.default);
 
diff --git a/packages/frontend/src/components/MkFlashPreview.vue b/packages/frontend/src/components/MkFlashPreview.vue
index 1a82ffe5a..a1ce80c98 100644
--- a/packages/frontend/src/components/MkFlashPreview.vue
+++ b/packages/frontend/src/components/MkFlashPreview.vue
@@ -1,5 +1,5 @@
 <template>
-<MkA :to="`/play/${flash.id}`" class="vhpxefrk _block" tabindex="-1">
+<MkA :to="`/play/${flash.id}`" class="vhpxefrk" tabindex="-1">
 	<article>
 		<header>
 			<h1 :title="flash.title">{{ flash.title }}</h1>
diff --git a/packages/frontend/src/components/MkForgotPassword.vue b/packages/frontend/src/components/MkForgotPassword.vue
index 29bf355cc..f74bb24b8 100644
--- a/packages/frontend/src/components/MkForgotPassword.vue
+++ b/packages/frontend/src/components/MkForgotPassword.vue
@@ -1,5 +1,5 @@
 <template>
-<XModalWindow
+<MkModalWindow
 	ref="dialog"
 	:width="370"
 	:height="400"
@@ -29,12 +29,12 @@
 	<div v-else class="bafecedb">
 		{{ i18n.ts._forgotPassword.contactAdmin }}
 	</div>
-</XModalWindow>
+</MkModalWindow>
 </template>
 
 <script lang="ts" setup>
 import { } from 'vue';
-import XModalWindow from '@/components/MkModalWindow.vue';
+import MkModalWindow from '@/components/MkModalWindow.vue';
 import MkButton from '@/components/MkButton.vue';
 import MkInput from '@/components/form/input.vue';
 import * as os from '@/os';
@@ -46,7 +46,7 @@ const emit = defineEmits<{
 	(ev: 'closed'): void;
 }>();
 
-let dialog: InstanceType<typeof XModalWindow> = $ref();
+let dialog: InstanceType<typeof MkModalWindow> = $ref();
 
 let username = $ref('');
 let email = $ref('');
diff --git a/packages/frontend/src/components/MkFormDialog.vue b/packages/frontend/src/components/MkFormDialog.vue
index 29fc04009..2f440e4b9 100644
--- a/packages/frontend/src/components/MkFormDialog.vue
+++ b/packages/frontend/src/components/MkFormDialog.vue
@@ -1,5 +1,5 @@
 <template>
-<XModalWindow
+<MkModalWindow
 	ref="dialog"
 	:width="450"
 	:can-close="false"
@@ -51,7 +51,7 @@
 			</template>
 		</div>
 	</MkSpacer>
-</XModalWindow>
+</MkModalWindow>
 </template>
 
 <script lang="ts">
@@ -63,11 +63,11 @@ import FormSelect from './form/select.vue';
 import FormRange from './form/range.vue';
 import MkButton from './MkButton.vue';
 import FormRadios from './form/radios.vue';
-import XModalWindow from '@/components/MkModalWindow.vue';
+import MkModalWindow from '@/components/MkModalWindow.vue';
 
 export default defineComponent({
 	components: {
-		XModalWindow,
+		MkModalWindow,
 		FormInput,
 		FormTextarea,
 		FormSwitch,
diff --git a/packages/frontend/src/components/MkModal.vue b/packages/frontend/src/components/MkModal.vue
index 505b5e64b..38b1ce7c1 100644
--- a/packages/frontend/src/components/MkModal.vue
+++ b/packages/frontend/src/components/MkModal.vue
@@ -383,7 +383,6 @@ defineExpose({
 			mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 32px, rgba(0,0,0,1) calc(100% - 32px), rgba(0,0,0,0) 100%);
 			overflow: auto;
 			display: flex;
-			container-type: inline-size;
 
 			@media (max-width: 500px) {
 				padding: 16px;
diff --git a/packages/frontend/src/components/MkModalPageWindow.vue b/packages/frontend/src/components/MkModalPageWindow.vue
index 2791d5ceb..b06fcb9ff 100644
--- a/packages/frontend/src/components/MkModalPageWindow.vue
+++ b/packages/frontend/src/components/MkModalPageWindow.vue
@@ -1,6 +1,6 @@
 <template>
 <MkModal ref="modal" @click="$emit('click')" @closed="$emit('closed')">
-	<div ref="rootEl" class="hrmcaedk _narrow_" :style="{ width: `${width}px`, height: (height ? `min(${height}px, 100%)` : '100%') }">
+	<div ref="rootEl" class="hrmcaedk" :style="{ width: `${width}px`, height: (height ? `min(${height}px, 100%)` : '100%') }">
 		<div class="header" @contextmenu="onContextmenu">
 			<button v-if="history.length > 0" v-tooltip="$ts.goBack" class="_button" @click="back()"><i class="ti ti-arrow-left"></i></button>
 			<span v-else style="display: inline-block; width: 20px"></span>
diff --git a/packages/frontend/src/components/MkModalWindow.vue b/packages/frontend/src/components/MkModalWindow.vue
index 1e93f01c8..ac428fa7b 100644
--- a/packages/frontend/src/components/MkModalWindow.vue
+++ b/packages/frontend/src/components/MkModalWindow.vue
@@ -1,6 +1,6 @@
 <template>
 <MkModal ref="modal" :prefer-type="'dialog'" @click="onBgClick" @closed="$emit('closed')">
-	<div ref="rootEl" class="ebkgoccj _narrow_" :style="{ width: `${width}px`, height: scroll ? (height ? `${height}px` : null) : (height ? `min(${height}px, 100%)` : '100%') }" @keydown="onKeydown">
+	<div ref="rootEl" class="ebkgoccj" :style="{ width: `${width}px`, height: scroll ? (height ? `${height}px` : null) : (height ? `min(${height}px, 100%)` : '100%') }" @keydown="onKeydown">
 		<div ref="headerEl" class="header">
 			<button v-if="withOkButton" class="_button" @click="$emit('close')"><i class="ti ti-x"></i></button>
 			<span class="title">
@@ -89,6 +89,7 @@ defineExpose({
 	display: flex;
 	flex-direction: column;
 	contain: content;
+	container-type: inline-size;
 	border-radius: var(--radius);
 
 	--root-margin: 24px;
diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue
index 7d01a7bf7..c0e1ca721 100644
--- a/packages/frontend/src/components/MkNoteDetailed.vue
+++ b/packages/frontend/src/components/MkNoteDetailed.vue
@@ -4,7 +4,7 @@
 	v-show="!isDeleted"
 	ref="el"
 	v-hotkey="keymap"
-	class="lxwezrsl _block"
+	class="lxwezrsl"
 	:tabindex="!isDeleted ? '-1' : null"
 	:class="{ renote: isRenote }"
 >
diff --git a/packages/frontend/src/components/MkNotificationSettingWindow.vue b/packages/frontend/src/components/MkNotificationSettingWindow.vue
index e58a11bf5..671865f62 100644
--- a/packages/frontend/src/components/MkNotificationSettingWindow.vue
+++ b/packages/frontend/src/components/MkNotificationSettingWindow.vue
@@ -1,5 +1,5 @@
 <template>
-<XModalWindow
+<MkModalWindow
 	ref="dialog"
 	:width="400"
 	:height="450"
@@ -21,7 +21,7 @@
 			</template>
 			<template v-if="!useGlobalSetting">
 				<MkInfo>{{ i18n.ts.notificationSettingDesc }}</MkInfo>
-				<div style="display: flex; gap: var(--margin); flex-wrap: wrap;">
+				<div class="_buttons">
 					<MkButton inline @click="disableAll">{{ i18n.ts.disableAll }}</MkButton>
 					<MkButton inline @click="enableAll">{{ i18n.ts.enableAll }}</MkButton>
 				</div>
@@ -29,7 +29,7 @@
 			</template>
 		</div>
 	</MkSpacer>
-</XModalWindow>
+</MkModalWindow>
 </template>
 
 <script lang="ts" setup>
@@ -38,7 +38,7 @@ import { notificationTypes } from 'misskey-js';
 import MkSwitch from './form/switch.vue';
 import MkInfo from './MkInfo.vue';
 import MkButton from './MkButton.vue';
-import XModalWindow from '@/components/MkModalWindow.vue';
+import MkModalWindow from '@/components/MkModalWindow.vue';
 import { i18n } from '@/i18n';
 
 const emit = defineEmits<{
@@ -56,7 +56,7 @@ const props = withDefaults(defineProps<{
 
 let includingTypes = $computed(() => props.includingTypes || []);
 
-const dialog = $shallowRef<InstanceType<typeof XModalWindow>>();
+const dialog = $shallowRef<InstanceType<typeof MkModalWindow>>();
 
 let typesMap = $ref<Record<typeof notificationTypes[number], boolean>>({});
 let useGlobalSetting = $ref((includingTypes === null || includingTypes.length === 0) && props.showGlobalToggle);
diff --git a/packages/frontend/src/components/MkPagePreview.vue b/packages/frontend/src/components/MkPagePreview.vue
index 1eb61d434..a78431e2a 100644
--- a/packages/frontend/src/components/MkPagePreview.vue
+++ b/packages/frontend/src/components/MkPagePreview.vue
@@ -1,5 +1,5 @@
 <template>
-<MkA :to="`/@${page.user.username}/pages/${page.name}`" class="vhpxefrj _block" tabindex="-1">
+<MkA :to="`/@${page.user.username}/pages/${page.name}`" class="vhpxefrj" tabindex="-1">
 	<div v-if="page.eyeCatchingImage" class="thumbnail" :style="`background-image: url('${page.eyeCatchingImage.thumbnailUrl}')`"></div>
 	<article>
 		<header>
diff --git a/packages/frontend/src/components/MkRemoteCaution.vue b/packages/frontend/src/components/MkRemoteCaution.vue
index d5dc01c1f..6d398e770 100644
--- a/packages/frontend/src/components/MkRemoteCaution.vue
+++ b/packages/frontend/src/components/MkRemoteCaution.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="jmgmzlwq _block"><i class="ti ti-alert-triangle" style="margin-right: 8px;"></i>{{ i18n.ts.remoteUserCaution }}<a class="link" :href="href" rel="nofollow noopener" target="_blank">{{ i18n.ts.showOnRemote }}</a></div>
+<div class="jmgmzlwq"><i class="ti ti-alert-triangle" style="margin-right: 8px;"></i>{{ i18n.ts.remoteUserCaution }}<a class="link" :href="href" rel="nofollow noopener" target="_blank">{{ i18n.ts.showOnRemote }}</a></div>
 </template>
 
 <script lang="ts" setup>
diff --git a/packages/frontend/src/components/MkSample.vue b/packages/frontend/src/components/MkSample.vue
index 1d25ab54b..ded5ac3f7 100644
--- a/packages/frontend/src/components/MkSample.vue
+++ b/packages/frontend/src/components/MkSample.vue
@@ -1,6 +1,6 @@
 <template>
-<div class="_card">
-	<div class="_content">
+<div class="">
+	<div class="">
 		<MkInput v-model="text">
 			<template #label>Text</template>
 		</MkInput>
@@ -15,10 +15,10 @@
 		<MkButton inline>This is</MkButton>
 		<MkButton inline primary>the button</MkButton>
 	</div>
-	<div class="_content" style="pointer-events: none;">
+	<div class="" style="pointer-events: none;">
 		<Mfm :text="mfm"/>
 	</div>
-	<div class="_content">
+	<div class="">
 		<MkButton inline primary @click="openMenu">Open menu</MkButton>
 		<MkButton inline primary @click="openDialog">Open dialog</MkButton>
 		<MkButton inline primary @click="openForm">Open form</MkButton>
diff --git a/packages/frontend/src/components/MkSignin.vue b/packages/frontend/src/components/MkSignin.vue
index 281c935eb..eb015b08f 100644
--- a/packages/frontend/src/components/MkSignin.vue
+++ b/packages/frontend/src/components/MkSignin.vue
@@ -1,6 +1,6 @@
 <template>
-<form class="eppvobhk _monolithic_" :class="{ signing, totpLogin }" @submit.prevent="onSubmit">
-	<div class="auth _section _autoGap">
+<form class="eppvobhk" :class="{ signing, totpLogin }" @submit.prevent="onSubmit">
+	<div class="auth _autoGap">
 		<div v-show="withAvatar" class="avatar" :style="{ backgroundImage: user ? `url('${ user.avatarUrl }')` : null, marginBottom: message ? '1.5em' : null }"></div>
 		<MkInfo v-if="message">
 			{{ message }}
@@ -40,7 +40,7 @@
 			</div>
 		</div>
 	</div>
-	<div class="social _section">
+	<div class="social">
 		<a v-if="meta && meta.enableTwitterIntegration" class="_borderButton _margin" :href="`${apiUrl}/signin/twitter`"><i class="ti ti-brand-twitter" style="margin-right: 4px;"></i>{{ $t('signinWith', { x: 'Twitter' }) }}</a>
 		<a v-if="meta && meta.enableGithubIntegration" class="_borderButton _margin" :href="`${apiUrl}/signin/github`"><i class="ti ti-brand-github" style="margin-right: 4px;"></i>{{ $t('signinWith', { x: 'GitHub' }) }}</a>
 		<a v-if="meta && meta.enableDiscordIntegration" class="_borderButton _margin" :href="`${apiUrl}/signin/discord`"><i class="ti ti-brand-discord" style="margin-right: 4px;"></i>{{ $t('signinWith', { x: 'Discord' }) }}</a>
diff --git a/packages/frontend/src/components/MkSigninDialog.vue b/packages/frontend/src/components/MkSigninDialog.vue
index 5015d09e6..83506b8f6 100644
--- a/packages/frontend/src/components/MkSigninDialog.vue
+++ b/packages/frontend/src/components/MkSigninDialog.vue
@@ -1,5 +1,5 @@
 <template>
-<XModalWindow
+<MkModalWindow
 	ref="dialog"
 	:width="370"
 	:height="400"
@@ -8,14 +8,16 @@
 >
 	<template #header>{{ i18n.ts.login }}</template>
 
-	<MkSignin :auto-set="autoSet" :message="message" @login="onLogin"/>
-</XModalWindow>
+	<MkSpacer :margin-min="20" :margin-max="28">
+		<MkSignin :auto-set="autoSet" :message="message" @login="onLogin"/>
+	</MkSpacer>
+</MkModalWindow>
 </template>
 
 <script lang="ts" setup>
 import { } from 'vue';
 import MkSignin from '@/components/MkSignin.vue';
-import XModalWindow from '@/components/MkModalWindow.vue';
+import MkModalWindow from '@/components/MkModalWindow.vue';
 import { i18n } from '@/i18n';
 
 const props = withDefaults(defineProps<{
@@ -32,7 +34,7 @@ const emit = defineEmits<{
 	(ev: 'cancelled'): void;
 }>();
 
-const dialog = $shallowRef<InstanceType<typeof XModalWindow>>();
+const dialog = $shallowRef<InstanceType<typeof MkModalWindow>>();
 
 function onClose() {
 	emit('cancelled');
diff --git a/packages/frontend/src/components/MkSignupDialog.vue b/packages/frontend/src/components/MkSignupDialog.vue
index e1b76474a..790c1e94d 100644
--- a/packages/frontend/src/components/MkSignupDialog.vue
+++ b/packages/frontend/src/components/MkSignupDialog.vue
@@ -1,5 +1,5 @@
 <template>
-<XModalWindow
+<MkModalWindow
 	ref="dialog"
 	:width="366"
 	:height="500"
@@ -8,18 +8,16 @@
 >
 	<template #header>{{ i18n.ts.signup }}</template>
 
-	<div class="_monolithic_">
-		<div class="_section">
-			<XSignup :auto-set="autoSet" @signup="onSignup" @signup-email-pending="onSignupEmailPending"/>
-		</div>
-	</div>
-</XModalWindow>
+	<MkSpacer :margin-min="20" :margin-max="28">
+		<XSignup :auto-set="autoSet" @signup="onSignup" @signup-email-pending="onSignupEmailPending"/>
+	</MkSpacer>
+</MkModalWindow>
 </template>
 
 <script lang="ts" setup>
 import { } from 'vue';
 import XSignup from '@/components/MkSignup.vue';
-import XModalWindow from '@/components/MkModalWindow.vue';
+import MkModalWindow from '@/components/MkModalWindow.vue';
 import { i18n } from '@/i18n';
 
 const props = withDefaults(defineProps<{
@@ -33,7 +31,7 @@ const emit = defineEmits<{
 	(ev: 'closed'): void;
 }>();
 
-const dialog = $shallowRef<InstanceType<typeof XModalWindow>>();
+const dialog = $shallowRef<InstanceType<typeof MkModalWindow>>();
 
 function onSignup(res) {
 	emit('done', res);
diff --git a/packages/frontend/src/components/MkTokenGenerateWindow.vue b/packages/frontend/src/components/MkTokenGenerateWindow.vue
index 1762a0d33..1a5a92caf 100644
--- a/packages/frontend/src/components/MkTokenGenerateWindow.vue
+++ b/packages/frontend/src/components/MkTokenGenerateWindow.vue
@@ -1,5 +1,5 @@
 <template>
-<XModalWindow
+<MkModalWindow
 	ref="dialog"
 	:width="400"
 	:height="450"
@@ -23,14 +23,14 @@
 				</MkInput>
 			</div>
 			<div><b>{{ $ts.permission }}</b></div>
-			<div style="display: flex; gap: var(--margin); flex-wrap: wrap;">
+			<div class="_buttons">
 				<MkButton inline @click="disableAll">{{ i18n.ts.disableAll }}</MkButton>
 				<MkButton inline @click="enableAll">{{ i18n.ts.enableAll }}</MkButton>
 			</div>
 			<MkSwitch v-for="kind in (initialPermissions || kinds)" :key="kind" v-model="permissions[kind]">{{ $t(`_permissions.${kind}`) }}</MkSwitch>
 		</div>
 	</MkSpacer>
-</XModalWindow>
+</MkModalWindow>
 </template>
 
 <script lang="ts" setup>
@@ -40,7 +40,7 @@ import MkInput from './form/input.vue';
 import MkSwitch from './form/switch.vue';
 import MkButton from './MkButton.vue';
 import MkInfo from './MkInfo.vue';
-import XModalWindow from '@/components/MkModalWindow.vue';
+import MkModalWindow from '@/components/MkModalWindow.vue';
 import { i18n } from '@/i18n';
 
 const props = withDefaults(defineProps<{
@@ -60,7 +60,7 @@ const emit = defineEmits<{
 	(ev: 'done', result: { name: string | null, permissions: string[] }): void;
 }>();
 
-const dialog = $shallowRef<InstanceType<typeof XModalWindow>>();
+const dialog = $shallowRef<InstanceType<typeof MkModalWindow>>();
 let name = $ref(props.initialName);
 let permissions = $ref({});
 
diff --git a/packages/frontend/src/components/MkUserSelectDialog.vue b/packages/frontend/src/components/MkUserSelectDialog.vue
index 1d31769c3..c8a2fd8cc 100644
--- a/packages/frontend/src/components/MkUserSelectDialog.vue
+++ b/packages/frontend/src/components/MkUserSelectDialog.vue
@@ -1,5 +1,5 @@
 <template>
-<XModalWindow
+<MkModalWindow
 	ref="dialogEl"
 	:with-ok-button="true"
 	:ok-button-disabled="selected == null"
@@ -48,7 +48,7 @@
 			</div>
 		</div>
 	</div>
-</XModalWindow>
+</MkModalWindow>
 </template>
 
 <script lang="ts" setup>
@@ -56,7 +56,7 @@ import { nextTick, onMounted } from 'vue';
 import * as misskey from 'misskey-js';
 import MkInput from '@/components/form/input.vue';
 import FormSplit from '@/components/form/split.vue';
-import XModalWindow from '@/components/MkModalWindow.vue';
+import MkModalWindow from '@/components/MkModalWindow.vue';
 import * as os from '@/os';
 import { defaultStore } from '@/store';
 import { i18n } from '@/i18n';
diff --git a/packages/frontend/src/components/MkWindow.vue b/packages/frontend/src/components/MkWindow.vue
index 0f7e0e4f2..b28c5e4b8 100644
--- a/packages/frontend/src/components/MkWindow.vue
+++ b/packages/frontend/src/components/MkWindow.vue
@@ -1,7 +1,7 @@
 <template>
 <Transition :name="$store.state.animation ? 'window' : ''" appear @after-leave="$emit('closed')">
 	<div v-if="showing" ref="rootEl" class="ebkgocck" :class="{ maximized }">
-		<div class="body _shadow _narrow_" @mousedown="onBodyMousedown" @keydown="onKeydown">
+		<div class="body _shadow" @mousedown="onBodyMousedown" @keydown="onKeydown">
 			<div class="header" :class="{ mini }" @contextmenu.prevent.stop="onContextmenu">
 				<span class="left">
 					<button v-for="button in buttonsLeft" v-tooltip="button.title" class="button _button" :class="{ highlighted: button.highlighted }" @click="button.onClick"><i :class="button.icon"></i></button>
diff --git a/packages/frontend/src/pages/admin/abuses.vue b/packages/frontend/src/pages/admin/abuses.vue
index 3bff312b8..88535cc67 100644
--- a/packages/frontend/src/pages/admin/abuses.vue
+++ b/packages/frontend/src/pages/admin/abuses.vue
@@ -3,8 +3,8 @@
 	<template #header><XHeader :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :content-max="900">
 		<div class="lcixvhis">
-			<div class="_section reports">
-				<div class="_content">
+			<div class="reports">
+				<div class="">
 					<div class="inputs" style="display: flex;">
 						<MkSelect v-model="state" style="margin: 0; flex: 1;">
 							<template #label>{{ i18n.ts.state }}</template>
diff --git a/packages/frontend/src/pages/admin/announcements.vue b/packages/frontend/src/pages/admin/announcements.vue
index f5c2f1195..d9300da2e 100644
--- a/packages/frontend/src/pages/admin/announcements.vue
+++ b/packages/frontend/src/pages/admin/announcements.vue
@@ -2,9 +2,9 @@
 <MkStickyContainer>
 	<template #header><XHeader :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :content-max="900">
-		<div class="ztgjmzrw">
-			<section v-for="announcement in announcements" class="_card _margin announcements">
-				<div class="_content announcement">
+		<div class="ztgjmzrw _autoGap">
+			<section v-for="announcement in announcements" class="">
+				<div class="_panel _autoGap" style="padding: 24px;">
 					<MkInput v-model="announcement.title">
 						<template #label>{{ i18n.ts.title }}</template>
 					</MkInput>
@@ -15,9 +15,9 @@
 						<template #label>{{ i18n.ts.imageUrl }}</template>
 					</MkInput>
 					<p v-if="announcement.reads">{{ i18n.t('nUsersRead', { n: announcement.reads }) }}</p>
-					<div class="buttons">
+					<div class="buttons _buttons">
 						<MkButton class="button" inline primary @click="save(announcement)"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
-						<MkButton class="button" inline @click="remove(announcement)"><i class="ti ti-trash"></i> {{ i18n.ts.remove }}</MkButton>
+						<MkButton class="button" inline danger @click="remove(announcement)"><i class="ti ti-trash"></i> {{ i18n.ts.remove }}</MkButton>
 					</div>
 				</div>
 			</section>
diff --git a/packages/frontend/src/pages/admin/bot-protection.vue b/packages/frontend/src/pages/admin/bot-protection.vue
index c213e9805..22fac5491 100644
--- a/packages/frontend/src/pages/admin/bot-protection.vue
+++ b/packages/frontend/src/pages/admin/bot-protection.vue
@@ -52,7 +52,7 @@
 				</FormSlot>
 			</template>
 
-			<FormButton primary @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</FormButton>
+			<MkButton primary @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
 		</div>
 	</FormSuspense>
 </div>
@@ -62,7 +62,7 @@
 import { defineAsyncComponent } from 'vue';
 import FormRadios from '@/components/form/radios.vue';
 import FormInput from '@/components/form/input.vue';
-import FormButton from '@/components/MkButton.vue';
+import MkButton from '@/components/MkButton.vue';
 import FormSuspense from '@/components/form/suspense.vue';
 import FormSlot from '@/components/form/slot.vue';
 import * as os from '@/os';
diff --git a/packages/frontend/src/pages/admin/emoji-edit-dialog.vue b/packages/frontend/src/pages/admin/emoji-edit-dialog.vue
index 115125bd4..08b73d2ac 100644
--- a/packages/frontend/src/pages/admin/emoji-edit-dialog.vue
+++ b/packages/frontend/src/pages/admin/emoji-edit-dialog.vue
@@ -1,5 +1,5 @@
 <template>
-<XModalWindow
+<MkModalWindow
 	ref="dialog"
 	:width="370"
 	:with-ok-button="true"
@@ -25,12 +25,12 @@
 			<MkButton danger @click="del()"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton>
 		</div>
 	</MkSpacer>
-</XModalWindow>
+</MkModalWindow>
 </template>
 
 <script lang="ts" setup>
 import { } from 'vue';
-import XModalWindow from '@/components/MkModalWindow.vue';
+import MkModalWindow from '@/components/MkModalWindow.vue';
 import MkButton from '@/components/MkButton.vue';
 import MkInput from '@/components/form/input.vue';
 import * as os from '@/os';
diff --git a/packages/frontend/src/pages/admin/emojis.vue b/packages/frontend/src/pages/admin/emojis.vue
index 3d56ab196..68ad51bce 100644
--- a/packages/frontend/src/pages/admin/emojis.vue
+++ b/packages/frontend/src/pages/admin/emojis.vue
@@ -12,7 +12,7 @@
 					<MkSwitch v-model="selectMode" style="margin: 8px 0;">
 						<template #label>Select mode</template>
 					</MkSwitch>
-					<div v-if="selectMode" style="display: flex; gap: var(--margin); flex-wrap: wrap;">
+					<div v-if="selectMode" class="_buttons">
 						<MkButton inline @click="selectAll">Select all</MkButton>
 						<MkButton inline @click="setCategoryBulk">Set category</MkButton>
 						<MkButton inline @click="addTagBulk">Add tag</MkButton>
diff --git a/packages/frontend/src/pages/admin/instance-block.vue b/packages/frontend/src/pages/admin/instance-block.vue
index 6c6941dae..a45588e00 100644
--- a/packages/frontend/src/pages/admin/instance-block.vue
+++ b/packages/frontend/src/pages/admin/instance-block.vue
@@ -8,7 +8,7 @@
 				<template #caption>{{ i18n.ts.blockedInstancesDescription }}</template>
 			</FormTextarea>
 
-			<FormButton primary @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</FormButton>
+			<MkButton primary @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
 		</FormSuspense>
 	</MkSpacer>
 </MkStickyContainer>
@@ -17,7 +17,7 @@
 <script lang="ts" setup>
 import { } from 'vue';
 import XHeader from './_header_.vue';
-import FormButton from '@/components/MkButton.vue';
+import MkButton from '@/components/MkButton.vue';
 import FormTextarea from '@/components/form/textarea.vue';
 import FormSuspense from '@/components/form/suspense.vue';
 import * as os from '@/os';
diff --git a/packages/frontend/src/pages/admin/integrations.discord.vue b/packages/frontend/src/pages/admin/integrations.discord.vue
index e5069b9f8..09270896e 100644
--- a/packages/frontend/src/pages/admin/integrations.discord.vue
+++ b/packages/frontend/src/pages/admin/integrations.discord.vue
@@ -19,7 +19,7 @@
 			</FormInput>
 		</template>
 
-		<FormButton primary @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</FormButton>
+		<MkButton primary @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
 	</div>
 </FormSuspense>
 </template>
@@ -28,7 +28,7 @@
 import { } from 'vue';
 import FormSwitch from '@/components/form/switch.vue';
 import FormInput from '@/components/form/input.vue';
-import FormButton from '@/components/MkButton.vue';
+import MkButton from '@/components/MkButton.vue';
 import FormInfo from '@/components/MkInfo.vue';
 import FormSuspense from '@/components/form/suspense.vue';
 import * as os from '@/os';
diff --git a/packages/frontend/src/pages/admin/integrations.github.vue b/packages/frontend/src/pages/admin/integrations.github.vue
index 8418e202a..530fa6e03 100644
--- a/packages/frontend/src/pages/admin/integrations.github.vue
+++ b/packages/frontend/src/pages/admin/integrations.github.vue
@@ -19,7 +19,7 @@
 			</FormInput>
 		</template>
 
-		<FormButton primary @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</FormButton>
+		<MkButton primary @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
 	</div>
 </FormSuspense>
 </template>
@@ -28,7 +28,7 @@
 import { } from 'vue';
 import FormSwitch from '@/components/form/switch.vue';
 import FormInput from '@/components/form/input.vue';
-import FormButton from '@/components/MkButton.vue';
+import MkButton from '@/components/MkButton.vue';
 import FormInfo from '@/components/MkInfo.vue';
 import FormSuspense from '@/components/form/suspense.vue';
 import * as os from '@/os';
diff --git a/packages/frontend/src/pages/admin/integrations.twitter.vue b/packages/frontend/src/pages/admin/integrations.twitter.vue
index 8bd3c7c16..b807c1207 100644
--- a/packages/frontend/src/pages/admin/integrations.twitter.vue
+++ b/packages/frontend/src/pages/admin/integrations.twitter.vue
@@ -19,7 +19,7 @@
 			</FormInput>
 		</template>
 
-		<FormButton primary @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</FormButton>
+		<MkButton primary @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
 	</div>
 </FormSuspense>
 </template>
@@ -28,7 +28,7 @@
 import { defineComponent } from 'vue';
 import FormSwitch from '@/components/form/switch.vue';
 import FormInput from '@/components/form/input.vue';
-import FormButton from '@/components/MkButton.vue';
+import MkButton from '@/components/MkButton.vue';
 import FormInfo from '@/components/MkInfo.vue';
 import FormSuspense from '@/components/form/suspense.vue';
 import * as os from '@/os';
diff --git a/packages/frontend/src/pages/admin/proxy-account.vue b/packages/frontend/src/pages/admin/proxy-account.vue
index 36a271808..6ad566187 100644
--- a/packages/frontend/src/pages/admin/proxy-account.vue
+++ b/packages/frontend/src/pages/admin/proxy-account.vue
@@ -9,7 +9,7 @@
 				<template #value>{{ proxyAccount ? `@${proxyAccount.username}` : i18n.ts.none }}</template>
 			</MkKeyValue>
 
-			<FormButton primary @click="chooseProxyAccount">{{ i18n.ts.selectAccount }}</FormButton>
+			<MkButton primary @click="chooseProxyAccount">{{ i18n.ts.selectAccount }}</MkButton>
 		</FormSuspense>
 	</MkSpacer>
 </MkStickyContainer>
@@ -18,7 +18,7 @@
 <script lang="ts" setup>
 import { } from 'vue';
 import MkKeyValue from '@/components/MkKeyValue.vue';
-import FormButton from '@/components/MkButton.vue';
+import MkButton from '@/components/MkButton.vue';
 import MkInfo from '@/components/MkInfo.vue';
 import FormSuspense from '@/components/form/suspense.vue';
 import * as os from '@/os';
diff --git a/packages/frontend/src/pages/admin/relays.vue b/packages/frontend/src/pages/admin/relays.vue
index 4768ae67b..eb2788fde 100644
--- a/packages/frontend/src/pages/admin/relays.vue
+++ b/packages/frontend/src/pages/admin/relays.vue
@@ -2,7 +2,7 @@
 <MkStickyContainer>
 	<template #header><XHeader :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :content-max="800">
-		<div v-for="relay in relays" :key="relay.inbox" class="relaycxt _panel _block" style="padding: 16px;">
+		<div v-for="relay in relays" :key="relay.inbox" class="relaycxt _panel" style="padding: 16px;">
 			<div>{{ relay.inbox }}</div>
 			<div class="status">
 				<i v-if="relay.status === 'accepted'" class="ti ti-check icon accepted"></i>
diff --git a/packages/frontend/src/pages/admin/security.vue b/packages/frontend/src/pages/admin/security.vue
index 6bd26e832..92f3c259b 100644
--- a/packages/frontend/src/pages/admin/security.vue
+++ b/packages/frontend/src/pages/admin/security.vue
@@ -54,7 +54,7 @@
 						</FormSwitch>
 						-->
 
-						<FormButton primary @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</FormButton>
+						<MkButton primary @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
 					</div>
 				</FormFolder>
 
@@ -92,7 +92,7 @@
 							<template #label>Summaly Proxy URL</template>
 						</FormInput>
 
-						<FormButton primary @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</FormButton>
+						<MkButton primary @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
 					</div>
 				</FormFolder>
 			</div>
@@ -112,7 +112,7 @@ import FormInfo from '@/components/MkInfo.vue';
 import FormSuspense from '@/components/form/suspense.vue';
 import FormRange from '@/components/form/range.vue';
 import FormInput from '@/components/form/input.vue';
-import FormButton from '@/components/MkButton.vue';
+import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os';
 import { fetchInstance } from '@/instance';
 import { i18n } from '@/i18n';
diff --git a/packages/frontend/src/pages/announcements.vue b/packages/frontend/src/pages/announcements.vue
index 6a93b3b9f..702cf05e6 100644
--- a/packages/frontend/src/pages/announcements.vue
+++ b/packages/frontend/src/pages/announcements.vue
@@ -2,14 +2,14 @@
 <MkStickyContainer>
 	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :content-max="800">
-		<MkPagination v-slot="{items}" :pagination="pagination" class="ruryvtyk _content">
-			<section v-for="(announcement, i) in items" :key="announcement.id" class="_card announcement">
-				<div class="_title"><span v-if="$i && !announcement.isRead">🆕 </span>{{ announcement.title }}</div>
-				<div class="_content">
+		<MkPagination v-slot="{items}" :pagination="pagination" class="ruryvtyk _autoGap">
+			<section v-for="(announcement, i) in items" :key="announcement.id" class="announcement _panel">
+				<div class="header"><span v-if="$i && !announcement.isRead">🆕 </span>{{ announcement.title }}</div>
+				<div class="content">
 					<Mfm :text="announcement.text"/>
 					<img v-if="announcement.imageUrl" :src="announcement.imageUrl"/>
 				</div>
-				<div v-if="$i && !announcement.isRead" class="_footer">
+				<div v-if="$i && !announcement.isRead" class="footer">
 					<MkButton primary @click="read(items, announcement, i)"><i class="ti ti-check"></i> {{ $ts.gotIt }}</MkButton>
 				</div>
 			</section>
@@ -53,17 +53,24 @@ definePageMetadata({
 <style lang="scss" scoped>
 .ruryvtyk {
 	> .announcement {
-		&:not(:last-child) {
-			margin-bottom: var(--margin);
+		> .header {
+			padding: 16px;
+			font-weight: bold;
 		}
 
-		> ._content {
+		> .content {
+			padding: 0 16px;
+		
 			> img {
 				display: block;
 				max-height: 300px;
 				max-width: 100%;
 			}
 		}
+
+		> .footer {
+			padding: 16px;
+		}
 	}
 }
 </style>
diff --git a/packages/frontend/src/pages/antenna-timeline.vue b/packages/frontend/src/pages/antenna-timeline.vue
index af7e95d54..bf3004f28 100644
--- a/packages/frontend/src/pages/antenna-timeline.vue
+++ b/packages/frontend/src/pages/antenna-timeline.vue
@@ -3,7 +3,7 @@
 	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
 	<div ref="rootEl" v-hotkey.global="keymap" class="tqmomfks">
 		<div v-if="queue > 0" class="new"><button class="_buttonPrimary" @click="top()">{{ $ts.newNoteRecived }}</button></div>
-		<div class="tl _block">
+		<div class="tl">
 			<XTimeline
 				ref="tlEl" :key="antennaId"
 				class="tl"
diff --git a/packages/frontend/src/pages/auth.form.vue b/packages/frontend/src/pages/auth.form.vue
index 154673526..801295fce 100644
--- a/packages/frontend/src/pages/auth.form.vue
+++ b/packages/frontend/src/pages/auth.form.vue
@@ -1,18 +1,18 @@
 <template>
-<section class="_section">
-	<div class="_title">{{ $t('_auth.shareAccess', { name: app.name }) }}</div>
-	<div class="_content">
+<section class="">
+	<div class="">{{ $t('_auth.shareAccess', { name: app.name }) }}</div>
+	<div class="">
 		<h2>{{ app.name }}</h2>
 		<p class="id">{{ app.id }}</p>
 		<p class="description">{{ app.description }}</p>
 	</div>
-	<div class="_content">
+	<div class="">
 		<h2>{{ $ts._auth.permissionAsk }}</h2>
 		<ul>
 			<li v-for="p in app.permission" :key="p">{{ $t(`_permissions.${p}`) }}</li>
 		</ul>
 	</div>
-	<div class="_footer">
+	<div class="">
 		<MkButton inline @click="cancel">{{ $ts.cancel }}</MkButton>
 		<MkButton inline primary @click="accept">{{ $ts.accept }}</MkButton>
 	</div>
diff --git a/packages/frontend/src/pages/channels.vue b/packages/frontend/src/pages/channels.vue
index cc8375f63..9043d06c5 100644
--- a/packages/frontend/src/pages/channels.vue
+++ b/packages/frontend/src/pages/channels.vue
@@ -2,17 +2,17 @@
 <MkStickyContainer>
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :content-max="700">
-		<div v-if="tab === 'featured'" class="_content grwlizim featured">
+		<div v-if="tab === 'featured'" class="grwlizim featured">
 			<MkPagination v-slot="{items}" :pagination="featuredPagination">
 				<MkChannelPreview v-for="channel in items" :key="channel.id" class="_margin" :channel="channel"/>
 			</MkPagination>
 		</div>
-		<div v-else-if="tab === 'following'" class="_content grwlizim following">
+		<div v-else-if="tab === 'following'" class="grwlizim following">
 			<MkPagination v-slot="{items}" :pagination="followingPagination">
 				<MkChannelPreview v-for="channel in items" :key="channel.id" class="_margin" :channel="channel"/>
 			</MkPagination>
 		</div>
-		<div v-else-if="tab === 'owned'" class="_content grwlizim owned">
+		<div v-else-if="tab === 'owned'" class="grwlizim owned">
 			<MkButton class="new" @click="create()"><i class="ti ti-plus"></i></MkButton>
 			<MkPagination v-slot="{items}" :pagination="ownedPagination">
 				<MkChannelPreview v-for="channel in items" :key="channel.id" class="_margin" :channel="channel"/>
diff --git a/packages/frontend/src/pages/flash/flash-edit.vue b/packages/frontend/src/pages/flash/flash-edit.vue
index f89056488..b9b588a12 100644
--- a/packages/frontend/src/pages/flash/flash-edit.vue
+++ b/packages/frontend/src/pages/flash/flash-edit.vue
@@ -12,7 +12,7 @@
 			<MkTextarea v-model="script" class="_monospace" tall spellcheck="false">
 				<template #label>{{ i18n.ts._play.script }}</template>
 			</MkTextarea>
-			<div style="display: flex; gap: var(--margin); flex-wrap: wrap;">
+			<div class="_buttons">
 				<MkButton primary @click="save"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton>
 				<MkButton @click="show"><i class="ti ti-eye"></i> {{ i18n.ts.show }}</MkButton>
 			</div>
diff --git a/packages/frontend/src/pages/gallery/edit.vue b/packages/frontend/src/pages/gallery/edit.vue
index c8111d789..0e3a1ce06 100644
--- a/packages/frontend/src/pages/gallery/edit.vue
+++ b/packages/frontend/src/pages/gallery/edit.vue
@@ -16,15 +16,15 @@
 					<div class="name">{{ file.name }}</div>
 					<button v-tooltip="i18n.ts.remove" class="remove _button" @click="remove(file)"><i class="ti ti-x"></i></button>
 				</div>
-				<FormButton primary @click="selectFile"><i class="ti ti-plus"></i> {{ i18n.ts.attachFile }}</FormButton>
+				<MkButton primary @click="selectFile"><i class="ti ti-plus"></i> {{ i18n.ts.attachFile }}</MkButton>
 			</div>
 
 			<FormSwitch v-model="isSensitive">{{ i18n.ts.markAsSensitive }}</FormSwitch>
 
-			<FormButton v-if="postId" primary @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</FormButton>
-			<FormButton v-else primary @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.publish }}</FormButton>
+			<MkButton v-if="postId" primary @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
+			<MkButton v-else primary @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.publish }}</MkButton>
 
-			<FormButton v-if="postId" danger @click="del"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</FormButton>
+			<MkButton v-if="postId" danger @click="del"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton>
 		</FormSuspense>
 	</MkSpacer>
 </MkStickyContainer>
@@ -32,7 +32,7 @@
 
 <script lang="ts" setup>
 import { computed, inject, watch } from 'vue';
-import FormButton from '@/components/MkButton.vue';
+import MkButton from '@/components/MkButton.vue';
 import FormInput from '@/components/form/input.vue';
 import FormTextarea from '@/components/form/textarea.vue';
 import FormSwitch from '@/components/form/switch.vue';
diff --git a/packages/frontend/src/pages/gallery/post.vue b/packages/frontend/src/pages/gallery/post.vue
index b1dc872ff..30f63cf3a 100644
--- a/packages/frontend/src/pages/gallery/post.vue
+++ b/packages/frontend/src/pages/gallery/post.vue
@@ -10,7 +10,7 @@
 							<img :src="file.url"/>
 						</div>
 					</div>
-					<div class="body _block">
+					<div class="body">
 						<div class="title">{{ post.title }}</div>
 						<div class="description"><Mfm :text="post.description"/></div>
 						<div class="info">
diff --git a/packages/frontend/src/pages/messaging/index.vue b/packages/frontend/src/pages/messaging/index.vue
index 3fb5047a0..e75175450 100644
--- a/packages/frontend/src/pages/messaging/index.vue
+++ b/packages/frontend/src/pages/messaging/index.vue
@@ -10,7 +10,7 @@
 					v-for="(message, i) in messages"
 					:key="message.id"
 					v-anim="i"
-					class="message _block"
+					class="message"
 					:class="{ isMe: isMe(message), isRead: message.groupId ? message.reads.includes($i.id) : message.isRead }"
 					:to="message.groupId ? `/my/messaging/group/${message.groupId}` : `/my/messaging/${getAcct(isMe(message) ? message.recipient : message.user)}`"
 					:data-index="i"
diff --git a/packages/frontend/src/pages/messaging/messaging-room.form.vue b/packages/frontend/src/pages/messaging/messaging-room.form.vue
index 2c54c6f71..a0fa2677d 100644
--- a/packages/frontend/src/pages/messaging/messaging-room.form.vue
+++ b/packages/frontend/src/pages/messaging/messaging-room.form.vue
@@ -1,6 +1,6 @@
 <template>
 <div
-	class="pemppnzi _block"
+	class="pemppnzi"
 	@dragover.stop="onDragover"
 	@drop.stop="onDrop"
 >
diff --git a/packages/frontend/src/pages/messaging/messaging-room.vue b/packages/frontend/src/pages/messaging/messaging-room.vue
index f0a36fb8b..fa08b1cb7 100644
--- a/packages/frontend/src/pages/messaging/messaging-room.vue
+++ b/packages/frontend/src/pages/messaging/messaging-room.vue
@@ -1,11 +1,11 @@
 <template>
 <div
 	ref="rootEl"
-	class="_section"
+	class=""
 	@dragover.prevent.stop="onDragover"
 	@drop.prevent.stop="onDrop"
 >
-	<div class="_content mk-messaging-room">
+	<div class="mk-messaging-room">
 		<div class="body">
 			<MkPagination v-if="pagination" ref="pagingComponent" :key="userAcct || groupId" :pagination="pagination">
 				<template #empty>
diff --git a/packages/frontend/src/pages/mfm-cheat-sheet.vue b/packages/frontend/src/pages/mfm-cheat-sheet.vue
index 7c85dfb7a..2683affc4 100644
--- a/packages/frontend/src/pages/mfm-cheat-sheet.vue
+++ b/packages/frontend/src/pages/mfm-cheat-sheet.vue
@@ -4,7 +4,7 @@
 	<MkSpacer :content-max="800">
 		<div class="mwysmxbg">
 			<div>{{ i18n.ts._mfm.intro }}</div>
-			<div class="section _block">
+			<div class="section">
 				<div class="title">{{ i18n.ts._mfm.mention }}</div>
 				<div class="content">
 					<p>{{ i18n.ts._mfm.mentionDescription }}</p>
@@ -14,7 +14,7 @@
 					</div>
 				</div>
 			</div>
-			<div class="section _block">
+			<div class="section">
 				<div class="title">{{ i18n.ts._mfm.hashtag }}</div>
 				<div class="content">
 					<p>{{ i18n.ts._mfm.hashtagDescription }}</p>
@@ -24,7 +24,7 @@
 					</div>
 				</div>
 			</div>
-			<div class="section _block">
+			<div class="section">
 				<div class="title">{{ i18n.ts._mfm.url }}</div>
 				<div class="content">
 					<p>{{ i18n.ts._mfm.urlDescription }}</p>
@@ -34,7 +34,7 @@
 					</div>
 				</div>
 			</div>
-			<div class="section _block">
+			<div class="section">
 				<div class="title">{{ i18n.ts._mfm.link }}</div>
 				<div class="content">
 					<p>{{ i18n.ts._mfm.linkDescription }}</p>
@@ -44,7 +44,7 @@
 					</div>
 				</div>
 			</div>
-			<div class="section _block">
+			<div class="section">
 				<div class="title">{{ i18n.ts._mfm.emoji }}</div>
 				<div class="content">
 					<p>{{ i18n.ts._mfm.emojiDescription }}</p>
@@ -54,7 +54,7 @@
 					</div>
 				</div>
 			</div>
-			<div class="section _block">
+			<div class="section">
 				<div class="title">{{ i18n.ts._mfm.bold }}</div>
 				<div class="content">
 					<p>{{ i18n.ts._mfm.boldDescription }}</p>
@@ -64,7 +64,7 @@
 					</div>
 				</div>
 			</div>
-			<div class="section _block">
+			<div class="section">
 				<div class="title">{{ i18n.ts._mfm.small }}</div>
 				<div class="content">
 					<p>{{ i18n.ts._mfm.smallDescription }}</p>
@@ -74,7 +74,7 @@
 					</div>
 				</div>
 			</div>
-			<div class="section _block">
+			<div class="section">
 				<div class="title">{{ i18n.ts._mfm.quote }}</div>
 				<div class="content">
 					<p>{{ i18n.ts._mfm.quoteDescription }}</p>
@@ -84,7 +84,7 @@
 					</div>
 				</div>
 			</div>
-			<div class="section _block">
+			<div class="section">
 				<div class="title">{{ i18n.ts._mfm.center }}</div>
 				<div class="content">
 					<p>{{ i18n.ts._mfm.centerDescription }}</p>
@@ -94,7 +94,7 @@
 					</div>
 				</div>
 			</div>
-			<div class="section _block">
+			<div class="section">
 				<div class="title">{{ i18n.ts._mfm.inlineCode }}</div>
 				<div class="content">
 					<p>{{ i18n.ts._mfm.inlineCodeDescription }}</p>
@@ -104,7 +104,7 @@
 					</div>
 				</div>
 			</div>
-			<div class="section _block">
+			<div class="section">
 				<div class="title">{{ i18n.ts._mfm.blockCode }}</div>
 				<div class="content">
 					<p>{{ i18n.ts._mfm.blockCodeDescription }}</p>
@@ -114,7 +114,7 @@
 					</div>
 				</div>
 			</div>
-			<div class="section _block">
+			<div class="section">
 				<div class="title">{{ i18n.ts._mfm.inlineMath }}</div>
 				<div class="content">
 					<p>{{ i18n.ts._mfm.inlineMathDescription }}</p>
@@ -125,7 +125,7 @@
 				</div>
 			</div>
 			<!-- deprecated
-		<div class="section _block">
+		<div class="section">
 			<div class="title">{{ i18n.ts._mfm.search }}</div>
 			<div class="content">
 				<p>{{ i18n.ts._mfm.searchDescription }}</p>
@@ -136,7 +136,7 @@
 			</div>
 		</div>
 		-->
-			<div class="section _block">
+			<div class="section">
 				<div class="title">{{ i18n.ts._mfm.flip }}</div>
 				<div class="content">
 					<p>{{ i18n.ts._mfm.flipDescription }}</p>
@@ -146,7 +146,7 @@
 					</div>
 				</div>
 			</div>
-			<div class="section _block">
+			<div class="section">
 				<div class="title">{{ i18n.ts._mfm.font }}</div>
 				<div class="content">
 					<p>{{ i18n.ts._mfm.fontDescription }}</p>
@@ -156,7 +156,7 @@
 					</div>
 				</div>
 			</div>
-			<div class="section _block">
+			<div class="section">
 				<div class="title">{{ i18n.ts._mfm.x2 }}</div>
 				<div class="content">
 					<p>{{ i18n.ts._mfm.x2Description }}</p>
@@ -166,7 +166,7 @@
 					</div>
 				</div>
 			</div>
-			<div class="section _block">
+			<div class="section">
 				<div class="title">{{ i18n.ts._mfm.x3 }}</div>
 				<div class="content">
 					<p>{{ i18n.ts._mfm.x3Description }}</p>
@@ -176,7 +176,7 @@
 					</div>
 				</div>
 			</div>
-			<div class="section _block">
+			<div class="section">
 				<div class="title">{{ i18n.ts._mfm.x4 }}</div>
 				<div class="content">
 					<p>{{ i18n.ts._mfm.x4Description }}</p>
@@ -186,7 +186,7 @@
 					</div>
 				</div>
 			</div>
-			<div class="section _block">
+			<div class="section">
 				<div class="title">{{ i18n.ts._mfm.blur }}</div>
 				<div class="content">
 					<p>{{ i18n.ts._mfm.blurDescription }}</p>
@@ -196,7 +196,7 @@
 					</div>
 				</div>
 			</div>
-			<div class="section _block">
+			<div class="section">
 				<div class="title">{{ i18n.ts._mfm.jelly }}</div>
 				<div class="content">
 					<p>{{ i18n.ts._mfm.jellyDescription }}</p>
@@ -206,7 +206,7 @@
 					</div>
 				</div>
 			</div>
-			<div class="section _block">
+			<div class="section">
 				<div class="title">{{ i18n.ts._mfm.tada }}</div>
 				<div class="content">
 					<p>{{ i18n.ts._mfm.tadaDescription }}</p>
@@ -216,7 +216,7 @@
 					</div>
 				</div>
 			</div>
-			<div class="section _block">
+			<div class="section">
 				<div class="title">{{ i18n.ts._mfm.jump }}</div>
 				<div class="content">
 					<p>{{ i18n.ts._mfm.jumpDescription }}</p>
@@ -226,7 +226,7 @@
 					</div>
 				</div>
 			</div>
-			<div class="section _block">
+			<div class="section">
 				<div class="title">{{ i18n.ts._mfm.bounce }}</div>
 				<div class="content">
 					<p>{{ i18n.ts._mfm.bounceDescription }}</p>
@@ -236,7 +236,7 @@
 					</div>
 				</div>
 			</div>
-			<div class="section _block">
+			<div class="section">
 				<div class="title">{{ i18n.ts._mfm.spin }}</div>
 				<div class="content">
 					<p>{{ i18n.ts._mfm.spinDescription }}</p>
@@ -246,7 +246,7 @@
 					</div>
 				</div>
 			</div>
-			<div class="section _block">
+			<div class="section">
 				<div class="title">{{ i18n.ts._mfm.shake }}</div>
 				<div class="content">
 					<p>{{ i18n.ts._mfm.shakeDescription }}</p>
@@ -256,7 +256,7 @@
 					</div>
 				</div>
 			</div>
-			<div class="section _block">
+			<div class="section">
 				<div class="title">{{ i18n.ts._mfm.twitch }}</div>
 				<div class="content">
 					<p>{{ i18n.ts._mfm.twitchDescription }}</p>
@@ -266,7 +266,7 @@
 					</div>
 				</div>
 			</div>
-			<div class="section _block">
+			<div class="section">
 				<div class="title">{{ i18n.ts._mfm.rainbow }}</div>
 				<div class="content">
 					<p>{{ i18n.ts._mfm.rainbowDescription }}</p>
@@ -276,7 +276,7 @@
 					</div>
 				</div>
 			</div>
-			<div class="section _block">
+			<div class="section">
 				<div class="title">{{ i18n.ts._mfm.sparkle }}</div>
 				<div class="content">
 					<p>{{ i18n.ts._mfm.sparkleDescription }}</p>
@@ -286,7 +286,7 @@
 					</div>
 				</div>
 			</div>
-			<div class="section _block">
+			<div class="section">
 				<div class="title">{{ i18n.ts._mfm.rotate }}</div>
 				<div class="content">
 					<p>{{ i18n.ts._mfm.rotateDescription }}</p>
@@ -296,7 +296,7 @@
 					</div>
 				</div>
 			</div>
-			<div class="section _block">
+			<div class="section">
 				<div class="title">{{ i18n.ts._mfm.plain }}</div>
 				<div class="content">
 					<p>{{ i18n.ts._mfm.plainDescription }}</p>
diff --git a/packages/frontend/src/pages/miauth.vue b/packages/frontend/src/pages/miauth.vue
index 11a8d3094..a01c7c5c4 100644
--- a/packages/frontend/src/pages/miauth.vue
+++ b/packages/frontend/src/pages/miauth.vue
@@ -1,32 +1,32 @@
 <template>
 <MkSpacer :content-max="800">
 	<div v-if="$i">
-		<div v-if="state == 'waiting'" class="waiting _section">
-			<div class="_content">
+		<div v-if="state == 'waiting'" class="waiting">
+			<div class="">
 				<MkLoading/>
 			</div>
 		</div>
-		<div v-if="state == 'denied'" class="denied _section">
-			<div class="_content">
+		<div v-if="state == 'denied'" class="denied">
+			<div class="">
 				<p>{{ i18n.ts._auth.denied }}</p>
 			</div>
 		</div>
-		<div v-else-if="state == 'accepted'" class="accepted _section">
-			<div class="_content">
+		<div v-else-if="state == 'accepted'" class="accepted">
+			<div class="">
 				<p v-if="callback">{{ i18n.ts._auth.callback }}<MkEllipsis/></p>
 				<p v-else>{{ i18n.ts._auth.pleaseGoBack }}</p>
 			</div>
 		</div>
-		<div v-else class="_section">
-			<div v-if="name" class="_title">{{ $t('_auth.shareAccess', { name: name }) }}</div>
-			<div v-else class="_title">{{ i18n.ts._auth.shareAccessAsk }}</div>
-			<div class="_content">
+		<div v-else class="">
+			<div v-if="name" class="">{{ $t('_auth.shareAccess', { name: name }) }}</div>
+			<div v-else class="">{{ i18n.ts._auth.shareAccessAsk }}</div>
+			<div class="">
 				<p>{{ i18n.ts._auth.permissionAsk }}</p>
 				<ul>
 					<li v-for="p in _permissions" :key="p">{{ $t(`_permissions.${p}`) }}</li>
 				</ul>
 			</div>
-			<div class="_footer">
+			<div class="">
 				<MkButton inline @click="deny">{{ i18n.ts.cancel }}</MkButton>
 				<MkButton inline primary @click="accept">{{ i18n.ts.accept }}</MkButton>
 			</div>
diff --git a/packages/frontend/src/pages/my-lists/index.vue b/packages/frontend/src/pages/my-lists/index.vue
index 510e0173d..8a96b5488 100644
--- a/packages/frontend/src/pages/my-lists/index.vue
+++ b/packages/frontend/src/pages/my-lists/index.vue
@@ -5,7 +5,7 @@
 		<div class="qkcjvfiv">
 			<MkButton primary class="add" @click="create"><i class="ti ti-plus"></i> {{ i18n.ts.createList }}</MkButton>
 
-			<MkPagination v-slot="{items}" ref="pagingComponent" :pagination="pagination" class="lists _content">
+			<MkPagination v-slot="{items}" ref="pagingComponent" :pagination="pagination" class="lists">
 				<MkA v-for="list in items" :key="list.id" class="list _panel" :to="`/my/lists/${ list.id }`">
 					<div class="name">{{ list.name }}</div>
 					<MkAvatars :user-ids="list.userIds"/>
diff --git a/packages/frontend/src/pages/my-lists/list.vue b/packages/frontend/src/pages/my-lists/list.vue
index 48dde790e..2c624d68f 100644
--- a/packages/frontend/src/pages/my-lists/list.vue
+++ b/packages/frontend/src/pages/my-lists/list.vue
@@ -4,8 +4,8 @@
 	<MkSpacer :content-max="700">
 		<div class="mk-list-page">
 			<Transition :name="$store.state.animation ? '_transition_zoom' : ''" mode="out-in">
-				<div v-if="list" class="_section">
-					<div class="_content">
+				<div v-if="list" class="">
+					<div class="">
 						<MkButton inline @click="addUser()">{{ i18n.ts.addUser }}</MkButton>
 						<MkButton inline @click="renameList()">{{ i18n.ts.rename }}</MkButton>
 						<MkButton inline @click="deleteList()">{{ i18n.ts.delete }}</MkButton>
@@ -14,9 +14,9 @@
 			</Transition>
 
 			<Transition :name="$store.state.animation ? '_transition_zoom' : ''" mode="out-in">
-				<div v-if="list" class="_section members _margin">
-					<div class="_title">{{ i18n.ts.members }}</div>
-					<div class="_content">
+				<div v-if="list" class="members _margin">
+					<div class="">{{ i18n.ts.members }}</div>
+					<div class="">
 						<div class="users">
 							<div v-for="user in users" :key="user.id" class="user _panel">
 								<MkAvatar :user="user" class="avatar" :show-indicator="true"/>
diff --git a/packages/frontend/src/pages/note.vue b/packages/frontend/src/pages/note.vue
index 64032ac7f..7fd74d2ae 100644
--- a/packages/frontend/src/pages/note.vue
+++ b/packages/frontend/src/pages/note.vue
@@ -6,7 +6,7 @@
 			<Transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
 				<div v-if="note" class="note">
 					<div v-if="showNext" class="_margin">
-						<XNotes class="_content" :pagination="nextPagination" :no-gap="true"/>
+						<XNotes class="" :pagination="nextPagination" :no-gap="true"/>
 					</div>
 
 					<div class="main _margin">
@@ -15,7 +15,7 @@
 							<MkRemoteCaution v-if="note.user.host != null" :href="note.url ?? note.uri"/>
 							<XNoteDetailed :key="note.id" v-model:note="note" class="note"/>
 						</div>
-						<div v-if="clips && clips.length > 0" class="_content clips _margin">
+						<div v-if="clips && clips.length > 0" class="clips _margin">
 							<div class="title">{{ i18n.ts.clip }}</div>
 							<MkA v-for="item in clips" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _margin">
 								<b>{{ item.name }}</b>
@@ -29,7 +29,7 @@
 					</div>
 
 					<div v-if="showPrev" class="_margin">
-						<XNotes class="_content" :pagination="prevPagination" :no-gap="true"/>
+						<XNotes class="" :pagination="prevPagination" :no-gap="true"/>
 					</div>
 				</div>
 				<MkError v-else-if="error" @retry="fetch()"/>
diff --git a/packages/frontend/src/pages/page.vue b/packages/frontend/src/pages/page.vue
index 07e297f5d..7f0871a5f 100644
--- a/packages/frontend/src/pages/page.vue
+++ b/packages/frontend/src/pages/page.vue
@@ -4,7 +4,7 @@
 	<MkSpacer :content-max="700">
 		<Transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
 			<div v-if="page" :key="page.id" class="xcukqgmh">
-				<div class="_block main">
+				<div class="main">
 					<!--
 				<div class="header">
 					<h1>{{ page.title }}</h1>
diff --git a/packages/frontend/src/pages/reset-password.vue b/packages/frontend/src/pages/reset-password.vue
index eb7973316..0e790190b 100644
--- a/packages/frontend/src/pages/reset-password.vue
+++ b/packages/frontend/src/pages/reset-password.vue
@@ -8,7 +8,7 @@
 				<template #label>{{ i18n.ts.newPassword }}</template>
 			</FormInput>
 		
-			<FormButton primary @click="save">{{ i18n.ts.save }}</FormButton>
+			<MkButton primary @click="save">{{ i18n.ts.save }}</MkButton>
 		</div>
 	</MkSpacer>
 </MkStickyContainer>
@@ -17,7 +17,7 @@
 <script lang="ts" setup>
 import { defineAsyncComponent, onMounted } from 'vue';
 import FormInput from '@/components/form/input.vue';
-import FormButton from '@/components/MkButton.vue';
+import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
 import { mainRouter } from '@/router';
diff --git a/packages/frontend/src/pages/settings/accounts.vue b/packages/frontend/src/pages/settings/accounts.vue
index fc5972660..e27b11cf6 100644
--- a/packages/frontend/src/pages/settings/accounts.vue
+++ b/packages/frontend/src/pages/settings/accounts.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="_autoGap">
 	<FormSuspense :p="init">
-		<FormButton primary @click="addAccount"><i class="ti ti-plus"></i> {{ i18n.ts.addAccount }}</FormButton>
+		<MkButton primary @click="addAccount"><i class="ti ti-plus"></i> {{ i18n.ts.addAccount }}</MkButton>
 
 		<div v-for="account in accounts" :key="account.id" class="_panel _button lcjjdxlm" @click="menu(account, $event)">
 			<div class="avatar">
@@ -23,7 +23,7 @@
 <script lang="ts" setup>
 import { defineAsyncComponent, ref } from 'vue';
 import FormSuspense from '@/components/form/suspense.vue';
-import FormButton from '@/components/MkButton.vue';
+import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os';
 import { getAccounts, addAccount as addAccounts, removeAccount as _removeAccount, login, $i } from '@/account';
 import { i18n } from '@/i18n';
diff --git a/packages/frontend/src/pages/settings/api.vue b/packages/frontend/src/pages/settings/api.vue
index 919b45d3e..49240b01f 100644
--- a/packages/frontend/src/pages/settings/api.vue
+++ b/packages/frontend/src/pages/settings/api.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="_autoGap">
-	<FormButton primary @click="generateToken">{{ i18n.ts.generateAccessToken }}</FormButton>
+	<MkButton primary @click="generateToken">{{ i18n.ts.generateAccessToken }}</MkButton>
 	<FormLink to="/settings/apps">{{ i18n.ts.manageAccessTokens }}</FormLink>
 	<FormLink to="/api-console" :behavior="isDesktop ? 'window' : null">API console</FormLink>
 </div>
@@ -9,7 +9,7 @@
 <script lang="ts" setup>
 import { defineAsyncComponent, ref } from 'vue';
 import FormLink from '@/components/form/link.vue';
-import FormButton from '@/components/MkButton.vue';
+import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
diff --git a/packages/frontend/src/pages/settings/delete-account.vue b/packages/frontend/src/pages/settings/delete-account.vue
index c74b0f2b1..58abe6001 100644
--- a/packages/frontend/src/pages/settings/delete-account.vue
+++ b/packages/frontend/src/pages/settings/delete-account.vue
@@ -2,14 +2,14 @@
 <div class="_autoGap">
 	<FormInfo warn>{{ i18n.ts._accountDelete.mayTakeTime }}</FormInfo>
 	<FormInfo>{{ i18n.ts._accountDelete.sendEmail }}</FormInfo>
-	<FormButton v-if="!$i.isDeleted" danger @click="deleteAccount">{{ i18n.ts._accountDelete.requestAccountDelete }}</FormButton>
-	<FormButton v-else disabled>{{ i18n.ts._accountDelete.inProgress }}</FormButton>
+	<MkButton v-if="!$i.isDeleted" danger @click="deleteAccount">{{ i18n.ts._accountDelete.requestAccountDelete }}</MkButton>
+	<MkButton v-else disabled>{{ i18n.ts._accountDelete.inProgress }}</MkButton>
 </div>
 </template>
 
 <script lang="ts" setup>
 import FormInfo from '@/components/MkInfo.vue';
-import FormButton from '@/components/MkButton.vue';
+import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os';
 import { signout } from '@/account';
 import { i18n } from '@/i18n';
diff --git a/packages/frontend/src/pages/settings/navbar.vue b/packages/frontend/src/pages/settings/navbar.vue
index 33b970528..1cbb72ab1 100644
--- a/packages/frontend/src/pages/settings/navbar.vue
+++ b/packages/frontend/src/pages/settings/navbar.vue
@@ -13,7 +13,7 @@
 		<!-- <MkRadio v-model="menuDisplay" value="hide" disabled>{{ i18n.ts._menuDisplay.hide }}</MkRadio>--> <!-- TODO: サイドバーを完全に隠せるようにすると、別途ハンバーガーボタンのようなものをUIに表示する必要があり面倒 -->
 	</FormRadios>
 
-	<FormButton danger @click="reset()"><i class="ti ti-reload"></i> {{ i18n.ts.default }}</FormButton>
+	<MkButton danger @click="reset()"><i class="ti ti-reload"></i> {{ i18n.ts.default }}</MkButton>
 </div>
 </template>
 
@@ -21,7 +21,7 @@
 import { computed, ref, watch } from 'vue';
 import FormTextarea from '@/components/form/textarea.vue';
 import FormRadios from '@/components/form/radios.vue';
-import FormButton from '@/components/MkButton.vue';
+import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os';
 import { navbarItemDef } from '@/navbar';
 import { defaultStore } from '@/store';
diff --git a/packages/frontend/src/pages/settings/notifications.vue b/packages/frontend/src/pages/settings/notifications.vue
index 872d26c3f..372e6a351 100644
--- a/packages/frontend/src/pages/settings/notifications.vue
+++ b/packages/frontend/src/pages/settings/notifications.vue
@@ -29,7 +29,7 @@
 <script lang="ts" setup>
 import { defineAsyncComponent } from 'vue';
 import { notificationTypes } from 'misskey-js';
-import FormButton from '@/components/MkButton.vue';
+import MkButton from '@/components/MkButton.vue';
 import FormLink from '@/components/form/link.vue';
 import FormSection from '@/components/form/section.vue';
 import FormSwitch from '@/components/form/switch.vue';
diff --git a/packages/frontend/src/pages/settings/plugin.install.vue b/packages/frontend/src/pages/settings/plugin.install.vue
index 1950e7f08..eda8456f8 100644
--- a/packages/frontend/src/pages/settings/plugin.install.vue
+++ b/packages/frontend/src/pages/settings/plugin.install.vue
@@ -7,7 +7,7 @@
 	</FormTextarea>
 
 	<div>
-		<FormButton :disabled="code == null" primary inline @click="install"><i class="ti ti-check"></i> {{ i18n.ts.install }}</FormButton>
+		<MkButton :disabled="code == null" primary inline @click="install"><i class="ti ti-check"></i> {{ i18n.ts.install }}</MkButton>
 	</div>
 </div>
 </template>
@@ -17,7 +17,7 @@ import { defineAsyncComponent, nextTick, ref } from 'vue';
 import { Interpreter, Parser, utils } from '@syuilo/aiscript';
 import { v4 as uuid } from 'uuid';
 import FormTextarea from '@/components/form/textarea.vue';
-import FormButton from '@/components/MkButton.vue';
+import MkButton from '@/components/MkButton.vue';
 import FormInfo from '@/components/MkInfo.vue';
 import * as os from '@/os';
 import { ColdDeviceStorage } from '@/store';
diff --git a/packages/frontend/src/pages/settings/plugin.vue b/packages/frontend/src/pages/settings/plugin.vue
index 3ff1d64b8..13955288a 100644
--- a/packages/frontend/src/pages/settings/plugin.vue
+++ b/packages/frontend/src/pages/settings/plugin.vue
@@ -22,7 +22,7 @@
 				<template #value>{{ plugin.permission }}</template>
 			</MkKeyValue>
 
-			<div style="display: flex; gap: var(--margin); flex-wrap: wrap;">
+			<div class="_buttons">
 				<MkButton v-if="plugin.config" inline @click="config(plugin)"><i class="ti ti-settings"></i> {{ i18n.ts.settings }}</MkButton>
 				<MkButton inline danger @click="uninstall(plugin)"><i class="ti ti-trash"></i> {{ i18n.ts.uninstall }}</MkButton>
 			</div>
diff --git a/packages/frontend/src/pages/settings/reaction.vue b/packages/frontend/src/pages/settings/reaction.vue
index 7f2e93078..c5ffce277 100644
--- a/packages/frontend/src/pages/settings/reaction.vue
+++ b/packages/frontend/src/pages/settings/reaction.vue
@@ -45,9 +45,9 @@
 	</FormSwitch>
 
 	<FormSection>
-		<div style="display: flex; gap: var(--margin); flex-wrap: wrap;">
-			<FormButton inline @click="preview"><i class="ti ti-eye"></i> {{ i18n.ts.preview }}</FormButton>
-			<FormButton inline danger @click="setDefault"><i class="ti ti-reload"></i> {{ i18n.ts.default }}</FormButton>
+		<div class="_buttons">
+			<MkButton inline @click="preview"><i class="ti ti-eye"></i> {{ i18n.ts.preview }}</MkButton>
+			<MkButton inline danger @click="setDefault"><i class="ti ti-reload"></i> {{ i18n.ts.default }}</MkButton>
 		</div>
 	</FormSection>
 </div>
@@ -59,7 +59,7 @@ import Sortable from 'vuedraggable';
 import FormInput from '@/components/form/input.vue';
 import FormRadios from '@/components/form/radios.vue';
 import FromSlot from '@/components/form/slot.vue';
-import FormButton from '@/components/MkButton.vue';
+import MkButton from '@/components/MkButton.vue';
 import FormSection from '@/components/form/section.vue';
 import FormSwitch from '@/components/form/switch.vue';
 import * as os from '@/os';
diff --git a/packages/frontend/src/pages/settings/security.vue b/packages/frontend/src/pages/settings/security.vue
index e3b63ea1a..34d6059ac 100644
--- a/packages/frontend/src/pages/settings/security.vue
+++ b/packages/frontend/src/pages/settings/security.vue
@@ -2,7 +2,7 @@
 <div class="_autoGap">
 	<FormSection>
 		<template #label>{{ i18n.ts.password }}</template>
-		<FormButton primary @click="change()">{{ i18n.ts.changePassword }}</FormButton>
+		<MkButton primary @click="change()">{{ i18n.ts.changePassword }}</MkButton>
 	</FormSection>
 
 	<FormSection>
@@ -30,7 +30,7 @@
 
 	<FormSection>
 		<FormSlot>
-			<FormButton danger @click="regenerateToken"><i class="ti ti-refresh"></i> {{ i18n.ts.regenerateLoginToken }}</FormButton>
+			<MkButton danger @click="regenerateToken"><i class="ti ti-refresh"></i> {{ i18n.ts.regenerateLoginToken }}</MkButton>
 			<template #caption>{{ i18n.ts.regenerateLoginTokenDescription }}</template>
 		</FormSlot>
 	</FormSection>
@@ -41,7 +41,7 @@
 import X2fa from './2fa.vue';
 import FormSection from '@/components/form/section.vue';
 import FormSlot from '@/components/form/slot.vue';
-import FormButton from '@/components/MkButton.vue';
+import MkButton from '@/components/MkButton.vue';
 import MkPagination from '@/components/MkPagination.vue';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
diff --git a/packages/frontend/src/pages/settings/sounds.sound.vue b/packages/frontend/src/pages/settings/sounds.sound.vue
index 122b0d499..20070e674 100644
--- a/packages/frontend/src/pages/settings/sounds.sound.vue
+++ b/packages/frontend/src/pages/settings/sounds.sound.vue
@@ -8,9 +8,9 @@
 		<template #label>{{ i18n.ts.volume }}</template>
 	</FormRange>
 
-	<div style="display: flex; gap: var(--margin); flex-wrap: wrap;">
-		<FormButton inline @click="listen"><i class="ti ti-player-play"></i> {{ i18n.ts.listen }}</FormButton>
-		<FormButton inline primary @click="save"><i class="ti ti-check"></i> {{ i18n.ts.save }}</FormButton>
+	<div class="_buttons">
+		<MkButton inline @click="listen"><i class="ti ti-player-play"></i> {{ i18n.ts.listen }}</MkButton>
+		<MkButton inline primary @click="save"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton>
 	</div>
 </div>
 </template>
@@ -18,7 +18,7 @@
 <script lang="ts" setup>
 import { } from 'vue';
 import FormSelect from '@/components/form/select.vue';
-import FormButton from '@/components/MkButton.vue';
+import MkButton from '@/components/MkButton.vue';
 import FormRange from '@/components/form/range.vue';
 import { i18n } from '@/i18n';
 import { playFile, soundsTypes } from '@/scripts/sound';
diff --git a/packages/frontend/src/pages/settings/sounds.vue b/packages/frontend/src/pages/settings/sounds.vue
index 4d7ea95be..d6ccb4ccd 100644
--- a/packages/frontend/src/pages/settings/sounds.vue
+++ b/packages/frontend/src/pages/settings/sounds.vue
@@ -16,7 +16,7 @@
 		</div>
 	</FormSection>
 
-	<FormButton danger @click="reset()"><i class="ti ti-reload"></i> {{ i18n.ts.default }}</FormButton>
+	<MkButton danger @click="reset()"><i class="ti ti-reload"></i> {{ i18n.ts.default }}</MkButton>
 </div>
 </template>
 
@@ -24,7 +24,7 @@
 import { computed, ref } from 'vue';
 import XSound from './sounds.sound.vue';
 import FormRange from '@/components/form/range.vue';
-import FormButton from '@/components/MkButton.vue';
+import MkButton from '@/components/MkButton.vue';
 import FormLink from '@/components/form/link.vue';
 import FormSection from '@/components/form/section.vue';
 import FormFolder from '@/components/form/folder.vue';
diff --git a/packages/frontend/src/pages/settings/statusbar.statusbar.vue b/packages/frontend/src/pages/settings/statusbar.statusbar.vue
index 328a7f8e1..78ed1c4b4 100644
--- a/packages/frontend/src/pages/settings/statusbar.statusbar.vue
+++ b/packages/frontend/src/pages/settings/statusbar.statusbar.vue
@@ -74,8 +74,8 @@
 		</MkSwitch>
 	</template>
 
-	<div style="display: flex; gap: var(--margin); flex-wrap: wrap;">
-		<FormButton danger @click="del">{{ i18n.ts.remove }}</FormButton>
+	<div class="_buttons">
+		<MkButton danger @click="del">{{ i18n.ts.remove }}</MkButton>
 	</div>
 </div>
 </template>
@@ -86,7 +86,7 @@ import FormSelect from '@/components/form/select.vue';
 import MkInput from '@/components/form/input.vue';
 import MkSwitch from '@/components/form/switch.vue';
 import FormRadios from '@/components/form/radios.vue';
-import FormButton from '@/components/MkButton.vue';
+import MkButton from '@/components/MkButton.vue';
 import FormRange from '@/components/form/range.vue';
 import * as os from '@/os';
 import { defaultStore } from '@/store';
diff --git a/packages/frontend/src/pages/settings/statusbar.vue b/packages/frontend/src/pages/settings/statusbar.vue
index 1363c7974..2435bd6ba 100644
--- a/packages/frontend/src/pages/settings/statusbar.vue
+++ b/packages/frontend/src/pages/settings/statusbar.vue
@@ -5,7 +5,7 @@
 		<template #suffix>{{ x.name }}</template>
 		<XStatusbar :_id="x.id" :user-lists="userLists"/>
 	</FormFolder>
-	<FormButton primary @click="add">{{ i18n.ts.add }}</FormButton>
+	<MkButton primary @click="add">{{ i18n.ts.add }}</MkButton>
 </div>
 </template>
 
@@ -15,7 +15,7 @@ import { v4 as uuid } from 'uuid';
 import XStatusbar from './statusbar.statusbar.vue';
 import FormRadios from '@/components/form/radios.vue';
 import FormFolder from '@/components/form/folder.vue';
-import FormButton from '@/components/MkButton.vue';
+import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os';
 import { defaultStore } from '@/store';
 import { unisonReload } from '@/scripts/unison-reload';
diff --git a/packages/frontend/src/pages/settings/theme.install.vue b/packages/frontend/src/pages/settings/theme.install.vue
index e08a03d0c..b1010624c 100644
--- a/packages/frontend/src/pages/settings/theme.install.vue
+++ b/packages/frontend/src/pages/settings/theme.install.vue
@@ -4,9 +4,9 @@
 		<template #label>{{ i18n.ts._theme.code }}</template>
 	</FormTextarea>
 
-	<div style="display: flex; gap: var(--margin); flex-wrap: wrap;">
-		<FormButton :disabled="installThemeCode == null" inline @click="() => preview(installThemeCode)"><i class="ti ti-eye"></i> {{ i18n.ts.preview }}</FormButton>
-		<FormButton :disabled="installThemeCode == null" primary inline @click="() => install(installThemeCode)"><i class="ti ti-check"></i> {{ i18n.ts.install }}</FormButton>
+	<div class="_buttons">
+		<MkButton :disabled="installThemeCode == null" inline @click="() => preview(installThemeCode)"><i class="ti ti-eye"></i> {{ i18n.ts.preview }}</MkButton>
+		<MkButton :disabled="installThemeCode == null" primary inline @click="() => install(installThemeCode)"><i class="ti ti-check"></i> {{ i18n.ts.install }}</MkButton>
 	</div>
 </div>
 </template>
@@ -15,7 +15,7 @@
 import { } from 'vue';
 import JSON5 from 'json5';
 import FormTextarea from '@/components/form/textarea.vue';
-import FormButton from '@/components/MkButton.vue';
+import MkButton from '@/components/MkButton.vue';
 import { applyTheme, validateTheme } from '@/scripts/theme';
 import * as os from '@/os';
 import { addTheme, getThemes } from '@/theme-store';
diff --git a/packages/frontend/src/pages/settings/theme.manage.vue b/packages/frontend/src/pages/settings/theme.manage.vue
index afbc40a18..660e8ca02 100644
--- a/packages/frontend/src/pages/settings/theme.manage.vue
+++ b/packages/frontend/src/pages/settings/theme.manage.vue
@@ -20,7 +20,7 @@
 			<template #label>{{ i18n.ts._theme.code }}</template>
 			<template #caption><button class="_textButton" @click="copyThemeCode()">{{ i18n.ts.copy }}</button></template>
 		</FormTextarea>
-		<FormButton v-if="!builtinThemes.some(t => t.id == selectedTheme.id)" danger @click="uninstall()"><i class="ti ti-trash"></i> {{ i18n.ts.uninstall }}</FormButton>
+		<MkButton v-if="!builtinThemes.some(t => t.id == selectedTheme.id)" danger @click="uninstall()"><i class="ti ti-trash"></i> {{ i18n.ts.uninstall }}</MkButton>
 	</template>
 </div>
 </template>
@@ -31,7 +31,7 @@ import JSON5 from 'json5';
 import FormTextarea from '@/components/form/textarea.vue';
 import FormSelect from '@/components/form/select.vue';
 import FormInput from '@/components/form/input.vue';
-import FormButton from '@/components/MkButton.vue';
+import MkButton from '@/components/MkButton.vue';
 import { Theme, getBuiltinThemesRef } from '@/scripts/theme';
 import copyToClipboard from '@/scripts/copy-to-clipboard';
 import * as os from '@/os';
diff --git a/packages/frontend/src/pages/settings/theme.vue b/packages/frontend/src/pages/settings/theme.vue
index d2fc0980d..17aaa6e21 100644
--- a/packages/frontend/src/pages/settings/theme.vue
+++ b/packages/frontend/src/pages/settings/theme.vue
@@ -60,8 +60,8 @@
 		</div>
 	</FormSection>
 
-	<FormButton v-if="wallpaper == null" @click="setWallpaper">{{ i18n.ts.setWallpaper }}</FormButton>
-	<FormButton v-else @click="wallpaper = null">{{ i18n.ts.removeWallpaper }}</FormButton>
+	<MkButton v-if="wallpaper == null" @click="setWallpaper">{{ i18n.ts.setWallpaper }}</MkButton>
+	<MkButton v-else @click="wallpaper = null">{{ i18n.ts.removeWallpaper }}</MkButton>
 </div>
 </template>
 
@@ -72,7 +72,7 @@ import FormSwitch from '@/components/form/switch.vue';
 import FormSelect from '@/components/form/select.vue';
 import FormSection from '@/components/form/section.vue';
 import FormLink from '@/components/form/link.vue';
-import FormButton from '@/components/MkButton.vue';
+import MkButton from '@/components/MkButton.vue';
 import { getBuiltinThemesRef } from '@/scripts/theme';
 import { selectFile } from '@/scripts/select-file';
 import { isDeviceDarkmode } from '@/scripts/is-device-darkmode';
diff --git a/packages/frontend/src/pages/settings/webhook.edit.vue b/packages/frontend/src/pages/settings/webhook.edit.vue
index 439a27ed3..4bb2c1d27 100644
--- a/packages/frontend/src/pages/settings/webhook.edit.vue
+++ b/packages/frontend/src/pages/settings/webhook.edit.vue
@@ -29,8 +29,8 @@
 
 	<FormSwitch v-model="active">Active</FormSwitch>
 
-	<div style="display: flex; gap: var(--margin); flex-wrap: wrap;">
-		<FormButton primary inline @click="save"><i class="ti ti-check"></i> {{ i18n.ts.save }}</FormButton>
+	<div class="_buttons">
+		<MkButton primary inline @click="save"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton>
 	</div>
 </div>
 </template>
@@ -40,7 +40,7 @@ import { } from 'vue';
 import FormInput from '@/components/form/input.vue';
 import FormSection from '@/components/form/section.vue';
 import FormSwitch from '@/components/form/switch.vue';
-import FormButton from '@/components/MkButton.vue';
+import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
diff --git a/packages/frontend/src/pages/settings/webhook.new.vue b/packages/frontend/src/pages/settings/webhook.new.vue
index 3ef19e3f5..5b34de55f 100644
--- a/packages/frontend/src/pages/settings/webhook.new.vue
+++ b/packages/frontend/src/pages/settings/webhook.new.vue
@@ -27,8 +27,8 @@
 		</div>
 	</FormSection>
 
-	<div style="display: flex; gap: var(--margin); flex-wrap: wrap;">
-		<FormButton primary inline @click="create"><i class="ti ti-check"></i> {{ i18n.ts.create }}</FormButton>
+	<div class="_buttons">
+		<MkButton primary inline @click="create"><i class="ti ti-check"></i> {{ i18n.ts.create }}</MkButton>
 	</div>
 </div>
 </template>
@@ -38,7 +38,7 @@ import { } from 'vue';
 import FormInput from '@/components/form/input.vue';
 import FormSection from '@/components/form/section.vue';
 import FormSwitch from '@/components/form/switch.vue';
-import FormButton from '@/components/MkButton.vue';
+import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
diff --git a/packages/frontend/src/pages/tag.vue b/packages/frontend/src/pages/tag.vue
index 72775ed5c..5d6d01d2a 100644
--- a/packages/frontend/src/pages/tag.vue
+++ b/packages/frontend/src/pages/tag.vue
@@ -2,7 +2,7 @@
 <MkStickyContainer>
 	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :content-max="800">
-		<XNotes class="_content" :pagination="pagination"/>
+		<XNotes class="" :pagination="pagination"/>
 	</MkSpacer>
 </MkStickyContainer>
 </template>
diff --git a/packages/frontend/src/pages/theme-editor.vue b/packages/frontend/src/pages/theme-editor.vue
index 4b058a536..8f2ad4d66 100644
--- a/packages/frontend/src/pages/theme-editor.vue
+++ b/packages/frontend/src/pages/theme-editor.vue
@@ -49,7 +49,7 @@
 					<FormTextarea v-model="themeCode" tall>
 						<template #label>{{ i18n.ts._theme.code }}</template>
 					</FormTextarea>
-					<FormButton primary @click="applyThemeCode">{{ i18n.ts.apply }}</FormButton>
+					<MkButton primary @click="applyThemeCode">{{ i18n.ts.apply }}</MkButton>
 				</div>
 			</FormFolder>
 
@@ -74,7 +74,7 @@ import tinycolor from 'tinycolor2';
 import { v4 as uuid } from 'uuid';
 import JSON5 from 'json5';
 
-import FormButton from '@/components/MkButton.vue';
+import MkButton from '@/components/MkButton.vue';
 import FormTextarea from '@/components/form/textarea.vue';
 import FormFolder from '@/components/form/folder.vue';
 
diff --git a/packages/frontend/src/pages/timeline.vue b/packages/frontend/src/pages/timeline.vue
index 75f62d38f..5f08d3253 100644
--- a/packages/frontend/src/pages/timeline.vue
+++ b/packages/frontend/src/pages/timeline.vue
@@ -3,11 +3,11 @@
 	<template #header><MkPageHeader v-model:tab="src" :actions="headerActions" :tabs="headerTabs" :display-my-avatar="true"/></template>
 	<MkSpacer :content-max="800">
 		<div ref="rootEl" v-hotkey.global="keymap" class="cmuxhskf">
-			<XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _block"/>
-			<XPostForm v-if="$store.reactiveState.showFixedPostForm.value" class="post-form _block" fixed/>
+			<XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial"/>
+			<XPostForm v-if="$store.reactiveState.showFixedPostForm.value" class="post-form" fixed/>
 
 			<div v-if="queue > 0" class="new"><button class="_buttonPrimary" @click="top()">{{ i18n.ts.newNoteRecived }}</button></div>
-			<div class="tl _block">
+			<div class="tl">
 				<XTimeline
 					ref="tl" :key="src"
 					class="tl"
diff --git a/packages/frontend/src/pages/user-info.vue b/packages/frontend/src/pages/user-info.vue
index d879c95dd..c2b5cd5f4 100644
--- a/packages/frontend/src/pages/user-info.vue
+++ b/packages/frontend/src/pages/user-info.vue
@@ -75,7 +75,7 @@
 							</MkKeyValue>
 						</div>
 
-						<FormButton v-if="user.host != null" @click="updateRemoteUser"><i class="ti ti-refresh"></i> {{ i18n.ts.updateRemoteUser }}</FormButton>
+						<MkButton v-if="user.host != null" @click="updateRemoteUser"><i class="ti ti-refresh"></i> {{ i18n.ts.updateRemoteUser }}</MkButton>
 
 						<FormFolder>
 							<template #label>Raw</template>
@@ -92,8 +92,8 @@
 				<FormSwitch v-model="suspended" @update:model-value="toggleSuspend">{{ i18n.ts.suspend }}</FormSwitch>
 				{{ i18n.ts.reflectMayTakeTime }}
 				<div>
-					<FormButton v-if="user.host == null && iAmModerator" inline style="margin-right: 8px;" @click="resetPassword"><i class="ti ti-key"></i> {{ i18n.ts.resetPassword }}</FormButton>
-					<FormButton v-if="$i.isAdmin" inline danger @click="deleteAccount">{{ i18n.ts.deleteAccount }}</FormButton>
+					<MkButton v-if="user.host == null && iAmModerator" inline style="margin-right: 8px;" @click="resetPassword"><i class="ti ti-key"></i> {{ i18n.ts.resetPassword }}</MkButton>
+					<MkButton v-if="$i.isAdmin" inline danger @click="deleteAccount">{{ i18n.ts.deleteAccount }}</MkButton>
 				</div>
 				<FormTextarea v-model="moderationNote" manual-save>
 					<template #label>Moderation note</template>
@@ -162,7 +162,7 @@ import FormTextarea from '@/components/form/textarea.vue';
 import FormSwitch from '@/components/form/switch.vue';
 import FormLink from '@/components/form/link.vue';
 import FormSection from '@/components/form/section.vue';
-import FormButton from '@/components/MkButton.vue';
+import MkButton from '@/components/MkButton.vue';
 import FormInput from '@/components/form/input.vue';
 import FormSplit from '@/components/form/split.vue';
 import FormFolder from '@/components/form/folder.vue';
diff --git a/packages/frontend/src/pages/user-list-timeline.vue b/packages/frontend/src/pages/user-list-timeline.vue
index 542c28059..6817d44d8 100644
--- a/packages/frontend/src/pages/user-list-timeline.vue
+++ b/packages/frontend/src/pages/user-list-timeline.vue
@@ -3,7 +3,7 @@
 	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
 	<div ref="rootEl" class="eqqrhokj">
 		<div v-if="queue > 0" class="new"><button class="_buttonPrimary" @click="top()">{{ i18n.ts.newNoteRecived }}</button></div>
-		<div class="tl _block">
+		<div class="tl">
 			<XTimeline
 				ref="tlEl" :key="listId"
 				class="tl"
diff --git a/packages/frontend/src/pages/user/home.vue b/packages/frontend/src/pages/user/home.vue
index 40da7f9d5..bdf43bb04 100644
--- a/packages/frontend/src/pages/user/home.vue
+++ b/packages/frontend/src/pages/user/home.vue
@@ -9,7 +9,7 @@
 			<div class="profile">
 				<MkRemoteCaution v-if="user.host != null" :href="user.url" class="warn"/>
 
-				<div :key="user.id" class="_block main">
+				<div :key="user.id" class="main">
 					<div class="banner-container" :style="style">
 						<div ref="bannerEl" class="banner" :style="style"></div>
 						<div class="fade"></div>
@@ -87,7 +87,7 @@
 
 			<div class="contents">
 				<div v-if="user.pinnedNotes.length > 0" class="_margin">
-					<XNote v-for="note in user.pinnedNotes" :key="note.id" class="note _block" :note="note" :pinned="true"/>
+					<XNote v-for="note in user.pinnedNotes" :key="note.id" class="note" :note="note" :pinned="true"/>
 				</div>
 				<MkInfo v-else-if="$i && $i.id === user.id">{{ i18n.ts.userPagePinTip }}</MkInfo>
 				<template v-if="narrow">
diff --git a/packages/frontend/src/style.scss b/packages/frontend/src/style.scss
index e0ff1c23e..356e793ba 100644
--- a/packages/frontend/src/style.scss
+++ b/packages/frontend/src/style.scss
@@ -252,15 +252,6 @@ hr {
 	overflow: clip;
 }
 
-// TODO: 廃止
-._block {
-	@extend ._panel;
-
-	& + ._block {
-		margin-top: var(--margin);
-	}
-}
-
 ._margin {
 	margin: var(--margin) 0;
 }
@@ -277,52 +268,10 @@ hr {
 	gap: 0.75em;
 }
 
-// TODO: 廃止
-._card {
-	@extend ._panel;
-
-	// TODO: _cardTitle に
-	> ._title {
-		margin: 0;
-		padding: 22px 32px;
-		font-size: 1em;
-		border-bottom: solid 1px var(--panelHeaderDivider);
-		font-weight: bold;
-		background: var(--panelHeaderBg);
-		color: var(--panelHeaderFg);
-
-		@media (max-width: 500px) {
-			padding: 16px;
-			font-size: 1em;
-		}
-	}
-
-	// TODO: _cardContent に
-	> ._content {
-		padding: 32px;
-
-		@media (max-width: 500px) {
-			padding: 16px;
-		}
-
-		&._noPad {
-			padding: 0 !important;
-		}
-
-		& + ._content {
-			border-top: solid 0.5px var(--divider);
-		}
-	}
-
-	// TODO: _cardFooter に
-	> ._footer {
-		border-top: solid 0.5px var(--divider);
-		padding: 24px 32px;
-
-		@media (max-width: 500px) {
-			padding: 16px;
-		}
-	}
+._buttons {
+	display: flex;
+	gap: 8px;
+	flex-wrap: wrap;
 }
 
 ._borderButton {
@@ -346,37 +295,6 @@ hr {
 	contain: content;
 }
 
-// TODO: 廃止
-._monolithic_ {
-	._section:not(:empty) {
-		box-sizing: border-box;
-		padding: var(--root-margin, 32px);
-	
-		@media (max-width: 500px) {
-			--root-margin: 10px;
-		}
-	
-		& + ._section:not(:empty) {
-			border-top: solid 0.5px var(--divider);
-		}
-	}
-}
-
-._narrow_ ._card {
-	> ._title {
-		padding: 16px;
-		font-size: 1em;
-	}
-
-	> ._content {
-		padding: 16px;
-	}
-
-	> ._footer {
-		padding: 16px;
-	}
-}
-
 ._acrylic {
 	background: var(--acrylicPanel);
 	-webkit-backdrop-filter: var(--blur, blur(15px));
diff --git a/packages/frontend/src/ui/deck/column.vue b/packages/frontend/src/ui/deck/column.vue
index 775bdf6c1..cb945aa14 100644
--- a/packages/frontend/src/ui/deck/column.vue
+++ b/packages/frontend/src/ui/deck/column.vue
@@ -1,7 +1,7 @@
 <template>
 <!-- sectionを利用しているのは、deck.vue側でcolumnに対してfirst-of-typeを効かせるため -->
 <section
-	v-hotkey="keymap" class="dnpfarvg _narrow_"
+	v-hotkey="keymap" class="dnpfarvg"
 	:class="{ paged: isMainColumn, naked, active, isStacked, draghover, dragging, dropready }"
 	@dragover.prevent.stop="onDragover"
 	@dragleave="onDragleave"