From 014440850014ee86d766bb07467c2970b17a1fc6 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Wed, 25 Nov 2020 21:31:34 +0900
Subject: [PATCH] nanka iroiro (#6853)

* wip

* Update maps.ts

* wip

* wip

* wip

* wip

* Update base.vue

* wip

* wip

* wip

* wip

* Update link.vue

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* Update privacy.vue

* wip

* wip

* wip

* wip

* Update range.vue

* wip

* wip

* wip

* wip

* Update profile.vue

* wip

* Update a.vue

* Update index.vue

* wip

* Update sidebar.vue

* wip

* wip

* Update account-info.vue

* Update a.vue

* wip

* wip

* Update sounds.vue

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* Update account-info.vue

* Update account-info.vue

* wip

* wip

* wip

* Update d-persimmon.json5

* wip
---
 locales/ja-JP.yml                             |  51 +-
 .../1605585339718-instance-pinned-pages.ts    |   2 +-
 migration/1605965516823-instance-images.ts    |  16 +
 migration/1606191203881-no-crawle.ts          |  16 +
 src/client/assets/sounds/syuilo/kick.mp3      | Bin 0 -> 15672 bytes
 src/client/assets/sounds/syuilo/snare.mp3     | Bin 0 -> 26121 bytes
 src/client/cold-storage.ts                    |  34 +
 src/client/components/form-dialog.vue         |  63 +-
 src/client/components/form/base.vue           |  56 ++
 src/client/components/form/button.vue         |  81 +++
 src/client/components/form/form.scss          |  34 +
 src/client/components/form/group.vue          |  42 ++
 src/client/components/form/input.vue          | 306 +++++++++
 src/client/components/form/key-value-view.vue |  30 +
 src/client/components/form/link.vue           |  90 +++
 src/client/components/form/pagination.vue     |  42 ++
 src/client/components/form/radios.vue         | 106 ++++
 src/client/components/form/range.vue          | 122 ++++
 src/client/components/form/select.vue         | 147 +++++
 src/client/components/form/switch.vue         | 132 ++++
 src/client/components/form/textarea.vue       | 136 ++++
 src/client/components/form/tuple.vue          |  36 ++
 src/client/components/media-image.vue         |   2 +-
 src/client/components/media-video.vue         |   2 +-
 .../components/taskmanager.api-window.vue     |   5 +-
 src/client/components/taskmanager.vue         |   3 +-
 src/client/components/timeline.vue            |   3 +-
 src/client/components/ui/range.vue            |   4 +-
 src/client/components/ui/switch.vue           |   6 +-
 src/client/components/ui/textarea.vue         |   3 +-
 src/client/init.ts                            |  11 +-
 src/client/os.ts                              |  10 +-
 src/client/pages/announcements.vue            |   2 +-
 src/client/pages/instance/settings.vue        |   8 +
 src/client/pages/messaging/messaging-room.vue |   3 +-
 src/client/pages/reversi/game.board.vue       |  13 +-
 .../settings/{security.2fa.vue => 2fa.vue}    |  13 +
 src/client/pages/settings/account-info.vue    | 185 ++++++
 src/client/pages/settings/api.vue             |  27 +-
 src/client/pages/{ => settings}/apps.vue      |  60 +-
 src/client/pages/settings/deck.vue            |  90 +++
 src/client/pages/settings/email-address.vue   |  71 +++
 src/client/pages/settings/email.vue           |  52 ++
 src/client/pages/settings/general.vue         | 211 +++----
 src/client/pages/settings/index.vue           | 149 ++---
 src/client/pages/settings/notifications.vue   |  30 +-
 src/client/pages/settings/other.vue           |  53 +-
 src/client/pages/settings/privacy.vue         |  56 +-
 src/client/pages/settings/profile.vue         | 240 +++++---
 src/client/pages/settings/reaction.vue        |  69 +--
 src/client/pages/settings/security.vue        |  85 ++-
 src/client/pages/settings/sidebar.vue         |  56 +-
 src/client/pages/settings/sounds.vue          | 208 +++----
 src/client/pages/settings/theme.install.vue   | 106 ++++
 src/client/pages/settings/theme.manage.vue    | 103 ++++
 src/client/pages/settings/theme.vue           | 581 ++++++++----------
 src/client/pages/settings/word-mute.vue       |  48 +-
 src/client/pages/user/follow-list.vue         |   2 +-
 src/client/pages/user/index.activity.vue      |  18 +-
 src/client/pages/user/index.photos.vue        |  42 +-
 src/client/pages/user/index.vue               | 570 ++++++++---------
 src/client/pages/welcome.entrance.vue         |  28 -
 src/client/router.ts                          |   3 +-
 src/client/scripts/sound.ts                   |  24 +
 src/client/scripts/theme.ts                   |  13 +-
 src/client/store.ts                           |  10 +-
 src/client/style.scss                         |   6 +-
 src/client/themes/_dark.json5                 |   1 +
 src/client/themes/_light.json5                |   1 +
 src/client/themes/d-battery-saver.json5       |  18 -
 src/client/themes/d-black.json5               |  24 +-
 src/client/themes/d-blue.json5                |  29 -
 .../themes/{d-red.json5 => d-dark.json5}      |  14 +-
 src/client/themes/d-green.json5               |  29 -
 src/client/themes/d-persimmon.json5           |  12 +-
 src/client/themes/l-apricot.json5             |   2 +-
 src/client/themes/l-blue.json5                |  21 -
 src/client/themes/l-green.json5               |  21 -
 .../themes/{l-white.json5 => l-light.json5}   |   2 +-
 src/client/themes/l-red.json5                 |  21 -
 src/client/ui/_common_/common.vue             |   5 +-
 src/client/ui/visitor.vue                     | 202 +-----
 src/client/ui/visitor/a.vue                   | 357 +++++++++++
 src/client/ui/visitor/b.vue                   | 372 +++++++++++
 src/client/widgets/digital-clock.vue          |   3 +-
 src/games/reversi/maps.ts                     |  16 +
 src/models/entities/meta.ts                   |  14 +-
 src/models/entities/note-reaction.ts          |   2 +
 src/models/entities/user-profile.ts           |   6 +
 src/models/repositories/drive-file.ts         |   8 +-
 src/models/repositories/user.ts               |   1 +
 src/server/api/endpoints/admin/update-meta.ts |  16 +
 src/server/api/endpoints/drive.ts             |   2 +-
 src/server/api/endpoints/i/update.ts          |   8 +
 src/server/api/endpoints/meta.ts              |   2 +
 src/server/api/endpoints/users/stats.ts       | 144 +++++
 src/server/index.ts                           |  10 +-
 src/server/web/index.ts                       |   6 +
 src/server/web/views/clip.pug                 |   3 +
 src/server/web/views/note.pug                 |   6 +-
 src/server/web/views/page.pug                 |   3 +
 src/server/web/views/user.pug                 |   6 +-
 src/services/chart/charts/classes/drive.ts    |   4 +-
 src/services/chart/charts/classes/instance.ts |   2 +-
 .../chart/charts/classes/per-user-drive.ts    |   2 +-
 src/services/drive/add-file.ts                |   2 +-
 106 files changed, 4489 insertions(+), 1734 deletions(-)
 create mode 100644 migration/1605965516823-instance-images.ts
 create mode 100644 migration/1606191203881-no-crawle.ts
 create mode 100644 src/client/assets/sounds/syuilo/kick.mp3
 create mode 100644 src/client/assets/sounds/syuilo/snare.mp3
 create mode 100644 src/client/cold-storage.ts
 create mode 100644 src/client/components/form/base.vue
 create mode 100644 src/client/components/form/button.vue
 create mode 100644 src/client/components/form/form.scss
 create mode 100644 src/client/components/form/group.vue
 create mode 100644 src/client/components/form/input.vue
 create mode 100644 src/client/components/form/key-value-view.vue
 create mode 100644 src/client/components/form/link.vue
 create mode 100644 src/client/components/form/pagination.vue
 create mode 100644 src/client/components/form/radios.vue
 create mode 100644 src/client/components/form/range.vue
 create mode 100644 src/client/components/form/select.vue
 create mode 100644 src/client/components/form/switch.vue
 create mode 100644 src/client/components/form/textarea.vue
 create mode 100644 src/client/components/form/tuple.vue
 rename src/client/pages/settings/{security.2fa.vue => 2fa.vue} (96%)
 create mode 100644 src/client/pages/settings/account-info.vue
 rename src/client/pages/{ => settings}/apps.vue (63%)
 create mode 100644 src/client/pages/settings/deck.vue
 create mode 100644 src/client/pages/settings/email-address.vue
 create mode 100644 src/client/pages/settings/email.vue
 create mode 100644 src/client/pages/settings/theme.install.vue
 create mode 100644 src/client/pages/settings/theme.manage.vue
 create mode 100644 src/client/scripts/sound.ts
 delete mode 100644 src/client/themes/d-battery-saver.json5
 delete mode 100644 src/client/themes/d-blue.json5
 rename src/client/themes/{d-red.json5 => d-dark.json5} (65%)
 delete mode 100644 src/client/themes/d-green.json5
 delete mode 100644 src/client/themes/l-blue.json5
 delete mode 100644 src/client/themes/l-green.json5
 rename src/client/themes/{l-white.json5 => l-light.json5} (95%)
 delete mode 100644 src/client/themes/l-red.json5
 create mode 100644 src/client/ui/visitor/a.vue
 create mode 100644 src/client/ui/visitor/b.vue
 create mode 100644 src/server/api/endpoints/users/stats.ts

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 8a4d346bc2..e99d9b5350 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -127,6 +127,7 @@ cacheRemoteFilesDescription: "この設定を無効にすると、リモート
 flagAsBot: "Botとして設定"
 flagAsBotDescription: "このアカウントがプログラムによって運用される場合は、このフラグをオンにします。オンにすると、反応の連鎖を防ぐためのフラグとして他の開発者に役立ったり、Misskeyのシステム上での扱いがBotに合ったものになります。"
 flagAsCat: "Catとして設定"
+flagAsCatDescription: "このアカウントが猫であることを示す場合は、このフラグをオンにします。"
 autoAcceptFollowed: "フォロー中ユーザーからのフォロリクを自動承認"
 addAcount: "アカウント追加"
 loginFailed: "ログインに失敗しました"
@@ -440,6 +441,7 @@ useOsNativeEmojis: "OSネイティブの絵文字を使用"
 youHaveNoGroups: "グループがありません"
 joinOrCreateGroup: "既存のグループに招待してもらうか、新しくグループを作成してください。"
 noHistory: "履歴はありません"
+signinHistory: "ログイン履歴"
 disableAnimatedMfm: "動きのあるMFMを無効にする"
 doing: "やっています"
 category: "カテゴリ"
@@ -492,6 +494,7 @@ none: "なし"
 showInPage: "ページで表示"
 popout: "ポップアウト"
 volume: "音量"
+masterVolume: "マスター音量"
 details: "詳細"
 chooseEmoji: "絵文字を選択"
 unableToProcess: "操作を完了できません"
@@ -564,7 +567,8 @@ useStarForReactionFallback: "リアクション絵文字が不明な場合、代
 emailConfig: "メールサーバー設定"
 enableEmail: "メール配信機能を有効化する"
 emailConfigInfo: "メールアドレスの確認やパスワードリセットの際に使います"
-email: "メールアドレス"
+email: "メール"
+emailAddress: "メールアドレス"
 smtpConfig: "SMTP サーバーの設定"
 smtpHost: "ホスト"
 smtpPort: "ポート"
@@ -596,6 +600,7 @@ regenerateLoginTokenDescription: "ログインに使用される内部トーク
 setMultipleBySeparatingWithSpace: "スペースで区切って複数設定できます。"
 fileIdOrUrl: "ファイルIDまたはURL"
 chatOpenBehavior: "チャットを開くときの動作"
+behavior: "動作"
 sample: "サンプル"
 abuseReports: "通報"
 reportAbuse: "通報"
@@ -619,6 +624,42 @@ createNew: "新規作成"
 optional: "任意"
 createNewClip: "新しいクリップを作成"
 public: "パブリック"
+i18nInfo: "Misskeyは有志によって様々な言語に翻訳されています。{link}で翻訳に協力できます。"
+manageAccessTokens: "アクセストークンの管理"
+accountInfo: "アカウント情報"
+notesCount: "ノートの数"
+repliesCount: "返信した数"
+renotesCount: "Renoteした数"
+repliedCount: "返信された数"
+renotedCount: "Renoteされた数"
+followingCount: "フォロー数"
+followersCount: "フォロワー数"
+sentReactionsCount: "リアクションした数"
+receivedReactionsCount: "リアクションされた数"
+pollVotesCount: "アンケートに投票した数"
+pollVotedCount: "アンケートに投票された数"
+yes: "はい"
+no: "いいえ"
+driveFilesCount: "ドライブのファイル数"
+driveUsage: "ドライブ使用量"
+noCrawle: "クローラーによるインデックスを拒否"
+noCrawleDescription: "検索エンジンにあなたのユーザーページ、ノート、Pagesなどのコンテンツを登録(インデックス)しないよう要請します。"
+lockedAccountInfo: "フォローを承認制にしても、ノートの公開範囲を「フォロワー」にしない限り、誰でもあなたのノートを見ることができます。"
+alwaysMarkSensitive: "デフォルトでメディアを閲覧注意にする"
+loadRawImages: "添付画像のサムネイルをオリジナル画質にする"
+disableShowingAnimatedImages: "アニメーション画像を再生しない"
+verificationEmailSent: "確認のメールを送信しました。メールに記載されたリンクにアクセスして、設定を完了してください。"
+notSet: "未設定"
+emailVerified: "メールアドレスが確認されました"
+noteFavoritesCount: "お気に入りノートの数"
+pageLikesCount: "Pageにいいねした数"
+pageLikedCount: "Pageにいいねされた数"
+reversiCount: "リバーシの対局数"
+
+_nsfw:
+  respect: "閲覧注意のメディアは隠す"
+  ignore: "閲覧注意のメディアを隠さない"
+  force: "常にメディアを隠す"
 
 _mfm:
   cheatSheet: "MFMチートシート"
@@ -745,6 +786,8 @@ _theme:
   manage: "テーマの管理"
   code: "テーマコード"
   installed: "{name}をインストールしました"
+  installedThemes: "インストールされたテーマ"
+  builtinThemes: "標準のテーマ"
   alreadyInstalled: "そのテーマは既にインストールされています"
   invalid: "テーマの形式が間違っています"
   make: "テーマを作る"
@@ -820,6 +863,8 @@ _sfx:
   chatBg: "チャット(バックグラウンド)"
   antenna: "アンテナ受信"
   channel: "チャンネル通知"
+  reversiPutBlack: "リバーシ: 黒が打ったとき"
+  reversiPutWhite: "リバーシ: 白が打ったとき"
 
 _ago:
   unknown: "謎"
@@ -999,7 +1044,9 @@ _profile:
   username: "ユーザー名"
   description: "自己紹介"
   youCanIncludeHashtags: "ハッシュタグを含めることができます。"
-  metadata: "補足情報"
+  metadata: "追加情報"
+  metadataEdit: "追加情報を編集"
+  metadataDescription: "プロフィールに表として4つまでの追加情報を表示することができます。"
   metadataLabel: "ラベル"
   metadataContent: "内容"
 
diff --git a/migration/1605585339718-instance-pinned-pages.ts b/migration/1605585339718-instance-pinned-pages.ts
index 2f0ebab235..f593461306 100644
--- a/migration/1605585339718-instance-pinned-pages.ts
+++ b/migration/1605585339718-instance-pinned-pages.ts
@@ -4,7 +4,7 @@ export class instancePinnedPages1605585339718 implements MigrationInterface {
     name = 'instancePinnedPages1605585339718'
 
     public async up(queryRunner: QueryRunner): Promise<void> {
-        await queryRunner.query(`ALTER TABLE "meta" ADD "pinnedPages" character varying(512) array NOT NULL DEFAULT '{"/announcements", "/featured", "/channels", "/pages", "/explore", "/games/reversi", "/about-misskey"}'::varchar[]`);
+        await queryRunner.query(`ALTER TABLE "meta" ADD "pinnedPages" character varying(512) array NOT NULL DEFAULT '{"/featured", "/channels", "/explore", "/pages", "/about-misskey"}'::varchar[]`);
     }
 
     public async down(queryRunner: QueryRunner): Promise<void> {
diff --git a/migration/1605965516823-instance-images.ts b/migration/1605965516823-instance-images.ts
new file mode 100644
index 0000000000..bf8d408563
--- /dev/null
+++ b/migration/1605965516823-instance-images.ts
@@ -0,0 +1,16 @@
+import {MigrationInterface, QueryRunner} from "typeorm";
+
+export class instanceImages1605965516823 implements MigrationInterface {
+    name = 'instanceImages1605965516823'
+
+    public async up(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(`ALTER TABLE "meta" ADD "backgroundImageUrl" character varying(512)`);
+        await queryRunner.query(`ALTER TABLE "meta" ADD "logoImageUrl" character varying(512)`);
+    }
+
+    public async down(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(`ALTER TABLE "meta" DROP COLUMN "logoImageUrl"`);
+        await queryRunner.query(`ALTER TABLE "meta" DROP COLUMN "backgroundImageUrl"`);
+    }
+
+}
diff --git a/migration/1606191203881-no-crawle.ts b/migration/1606191203881-no-crawle.ts
new file mode 100644
index 0000000000..accc8f8fe2
--- /dev/null
+++ b/migration/1606191203881-no-crawle.ts
@@ -0,0 +1,16 @@
+import {MigrationInterface, QueryRunner} from "typeorm";
+
+export class noCrawle1606191203881 implements MigrationInterface {
+    name = 'noCrawle1606191203881'
+
+    public async up(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(`ALTER TABLE "user_profile" ADD "noCrawle" boolean NOT NULL DEFAULT false`);
+        await queryRunner.query(`COMMENT ON COLUMN "user_profile"."noCrawle" IS 'Whether reject index by crawler.'`);
+    }
+
+    public async down(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(`COMMENT ON COLUMN "user_profile"."noCrawle" IS 'Whether reject index by crawler.'`);
+        await queryRunner.query(`ALTER TABLE "user_profile" DROP COLUMN "noCrawle"`);
+    }
+
+}
diff --git a/src/client/assets/sounds/syuilo/kick.mp3 b/src/client/assets/sounds/syuilo/kick.mp3
new file mode 100644
index 0000000000000000000000000000000000000000..4e0e72091c6b5092c1ee9f3f352dcd276a343a47
GIT binary patch
literal 15672
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
Znu?s+@#M*lv!T=mBOu{ZJIIEUc>qBTV2l6&

literal 0
HcmV?d00001

diff --git a/src/client/assets/sounds/syuilo/snare.mp3 b/src/client/assets/sounds/syuilo/snare.mp3
new file mode 100644
index 0000000000000000000000000000000000000000..9244189c2d5e5c0cf1064196e92b0843d5dacad1
GIT binary patch
literal 26121
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

literal 0
HcmV?d00001

diff --git a/src/client/cold-storage.ts b/src/client/cold-storage.ts
new file mode 100644
index 0000000000..1bee2313fa
--- /dev/null
+++ b/src/client/cold-storage.ts
@@ -0,0 +1,34 @@
+// 常にメモリにロードしておく必要がないような設定情報を保管するストレージ
+
+const PREFIX = 'miux:';
+
+export const defaultDeviceSettings = {
+	sound_masterVolume: 0.3,
+	sound_note: { type: 'syuilo/down', volume: 1 },
+	sound_noteMy: { type: 'syuilo/up', volume: 1 },
+	sound_notification: { type: 'syuilo/pope2', volume: 1 },
+	sound_chat: { type: 'syuilo/pope1', volume: 1 },
+	sound_chatBg: { type: 'syuilo/waon', volume: 1 },
+	sound_antenna: { type: 'syuilo/triple', volume: 1 },
+	sound_channel: { type: 'syuilo/square-pico', volume: 1 },
+	sound_reversiPutBlack: { type: 'syuilo/kick', volume: 0.3 },
+	sound_reversiPutWhite: { type: 'syuilo/snare', volume: 0.3 },
+};
+
+export const device = {
+	get<T extends keyof typeof defaultDeviceSettings>(key: T): typeof defaultDeviceSettings[T] {
+		// TODO: indexedDBにする
+		//       ただしその際はnullチェックではなくキー存在チェックにしないとダメ
+		//       (indexedDBはnullを保存できるため、ユーザーが意図してnullを格納した可能性がある)
+		const value = localStorage.getItem(PREFIX + key);
+		if (value == null) {
+			return defaultDeviceSettings[key];
+		} else {
+			return JSON.parse(value);
+		}
+	},
+
+	set(key: keyof typeof defaultDeviceSettings, value: any): any {
+		localStorage.setItem(PREFIX + key, JSON.stringify(value));
+	},
+};
diff --git a/src/client/components/form-dialog.vue b/src/client/components/form-dialog.vue
index 0dc02258af..add6b230d3 100644
--- a/src/client/components/form-dialog.vue
+++ b/src/client/components/form-dialog.vue
@@ -1,6 +1,6 @@
 <template>
 <XModalWindow ref="dialog"
-	:width="400"
+	:width="450"
 	:can-close="false"
 	:with-ok-button="true"
 	:ok-button-disabled="false"
@@ -12,42 +12,61 @@
 	<template #header>
 		{{ title }}
 	</template>
-	<div class="xkpnjxcv _section">
-		<label v-for="item in Object.keys(form).filter(item => !form[item].hidden)" :key="item">
-			<MkInput v-if="form[item].type === 'number'" v-model:value="values[item]" type="number" :step="form[item].step || 1">
+	<FormBase class="xkpnjxcv">
+		<template v-for="item in Object.keys(form).filter(item => !form[item].hidden)">
+			<FormInput v-if="form[item].type === 'number'" v-model:value="values[item]" type="number" :step="form[item].step || 1">
 				<span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $t('optional') }})</span>
 				<template v-if="form[item].description" #desc>{{ form[item].description }}</template>
-			</MkInput>
-			<MkInput v-else-if="form[item].type === 'string' && !form[item].multiline" v-model:value="values[item]" type="text">
+			</FormInput>
+			<FormInput v-else-if="form[item].type === 'string' && !form[item].multiline" v-model:value="values[item]" type="text">
 				<span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $t('optional') }})</span>
 				<template v-if="form[item].description" #desc>{{ form[item].description }}</template>
-			</MkInput>
-			<MkTextarea v-else-if="form[item].type === 'string' && form[item].multiline" v-model:value="values[item]">
+			</FormInput>
+			<FormTextarea v-else-if="form[item].type === 'string' && form[item].multiline" v-model:value="values[item]">
 				<span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $t('optional') }})</span>
 				<template v-if="form[item].description" #desc>{{ form[item].description }}</template>
-			</MkTextarea>
-			<MkSwitch v-else-if="form[item].type === 'boolean'" v-model:value="values[item]">
+			</FormTextarea>
+			<FormSwitch v-else-if="form[item].type === 'boolean'" v-model:value="values[item]">
 				<span v-text="form[item].label || item"></span>
 				<template v-if="form[item].description" #desc>{{ form[item].description }}</template>
-			</MkSwitch>
-		</label>
-	</div>
+			</FormSwitch>
+			<FormSelect v-else-if="form[item].type === 'enum'" v-model:value="values[item]">
+				<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $t('optional') }})</span></template>
+				<option v-for="item in form[item].enum" :value="item.value" :key="item.value">{{ item.label }}</option>
+			</FormSelect>
+			<FormRange v-else-if="form[item].type === 'range'" v-model:value="values[item]" :min="form[item].mim" :max="form[item].max" :step="form[item].step">
+				<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $t('optional') }})</span></template>
+				<template v-if="form[item].description" #desc>{{ form[item].description }}</template>
+			</FormRange>
+			<FormButton v-else-if="form[item].type === 'button'" @click="form[item].action($event, values)">
+				<span v-text="form[item].content || item"></span>
+			</FormButton>
+		</template>
+	</FormBase>
 </XModalWindow>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
 import XModalWindow from '@/components/ui/modal-window.vue';
-import MkInput from './ui/input.vue';
-import MkTextarea from './ui/textarea.vue';
-import MkSwitch from './ui/switch.vue';
+import FormBase from './form/base.vue';
+import FormInput from './form/input.vue';
+import FormTextarea from './form/textarea.vue';
+import FormSwitch from './form/switch.vue';
+import FormSelect from './form/select.vue';
+import FormRange from './form/range.vue';
+import FormButton from './form/button.vue';
 
 export default defineComponent({
 	components: {
 		XModalWindow,
-		MkInput,
-		MkTextarea,
-		MkSwitch,
+		FormBase,
+		FormInput,
+		FormTextarea,
+		FormSwitch,
+		FormSelect,
+		FormRange,
+		FormButton,
 	},
 
 	props: {
@@ -95,12 +114,6 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .xkpnjxcv {
-	> label {
-		display: block;
 
-		&:not(:last-child) {
-			margin-bottom: 32px;
-		}
-	}
 }
 </style>
diff --git a/src/client/components/form/base.vue b/src/client/components/form/base.vue
new file mode 100644
index 0000000000..249b49c675
--- /dev/null
+++ b/src/client/components/form/base.vue
@@ -0,0 +1,56 @@
+<template>
+<div class="rbusrurv" :class="{ wide: forceWide }" v-size="{ max: [400] }">
+	<slot></slot>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+	props: {
+		forceWide: {
+			type: Boolean,
+			required: false,
+			default: false,
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.rbusrurv {
+	line-height: 1.4em;
+	background: var(--bg);
+	padding: 32px;
+
+	&:not(.wide).max-width_400px {
+		padding: 32px 0;
+
+		> ::v-deep(*) {
+			._formPanel {
+				border: solid 0.5px var(--divider);
+				border-radius: 0;
+				border-left: none;
+				border-right: none;
+			}
+
+			._form_group {
+				> * {
+					&:not(:first-child) {
+						&._formPanel, ._formPanel {
+							border-top: none;
+						}
+					}
+
+					&:not(:last-child) {
+						&._formPanel, ._formPanel {
+							border-bottom: solid 0.5px var(--divider);
+						}
+					}
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/src/client/components/form/button.vue b/src/client/components/form/button.vue
new file mode 100644
index 0000000000..b4f0890945
--- /dev/null
+++ b/src/client/components/form/button.vue
@@ -0,0 +1,81 @@
+<template>
+<div class="yzpgjkxe _formItem">
+	<div class="_formLabel"><slot name="label"></slot></div>
+	<button class="main _button _formPanel _formClickable" :class="{ center, primary, danger }">
+		<slot></slot>
+		<div class="suffix">
+			<slot name="suffix"></slot>
+			<div class="icon">
+				<slot name="suffixIcon"></slot>
+			</div>
+		</div>
+	</button>
+	<div class="_formCaption"><slot name="desc"></slot></div>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import './form.scss';
+
+export default defineComponent({
+	props: {
+		primary: {
+			type: Boolean,
+			required: false,
+			default: false,
+		},
+		danger: {
+			type: Boolean,
+			required: false,
+			default: false,
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false,
+		},
+		center: {
+			type: Boolean,
+			required: false,
+			default: true,
+		}
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.yzpgjkxe {
+	> .main {
+		display: flex;
+		width: 100%;
+		box-sizing: border-box;
+		padding: 14px 16px;
+		text-align: left;
+		align-items: center;
+
+		&.center {
+			display: block;
+			text-align: center;
+		}
+
+		&.primary {
+			color: var(--accent);
+		}
+
+		&.danger {
+			color: #ff2a2a;
+		}
+
+		> .suffix {
+			display: inline-flex;
+			margin-left: auto;
+			opacity: 0.7;
+
+			> .icon {
+				margin-left: 1em;
+			}
+		}
+	}
+}
+</style>
diff --git a/src/client/components/form/form.scss b/src/client/components/form/form.scss
new file mode 100644
index 0000000000..b541bf826d
--- /dev/null
+++ b/src/client/components/form/form.scss
@@ -0,0 +1,34 @@
+._formPanel {
+	background: var(--panel);
+	border-radius: var(--radius);
+
+	&._formClickable {
+		&:hover {
+			background: var(--panelHighlight);
+		}
+	}
+}
+
+._formLabel {
+	font-size: 80%;
+	padding: 0 16px 8px 16px;
+
+	&:empty {
+		display: none;
+	}
+}
+
+._formCaption {
+	font-size: 80%;
+	padding: 8px 16px 0 16px;
+
+	&:empty {
+		display: none;
+	}
+}
+
+._formItem {
+	& + ._formItem {
+		margin-top: 24px;
+	}
+}
diff --git a/src/client/components/form/group.vue b/src/client/components/form/group.vue
new file mode 100644
index 0000000000..d07852155a
--- /dev/null
+++ b/src/client/components/form/group.vue
@@ -0,0 +1,42 @@
+<template>
+<div class="vrtktovg _formItem" v-size="{ max: [500] }">
+	<div class="_formLabel"><slot name="label"></slot></div>
+	<div class="main _form_group">
+		<slot></slot>
+	</div>
+	<div class="_formCaption"><slot name="caption"></slot></div>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+});
+</script>
+
+<style lang="scss" scoped>
+.vrtktovg {
+	> .main {
+		> ::v-deep(*) {
+			margin: 0;
+
+			&:not(:first-child) {
+				&._formPanel, ._formPanel {
+					border-top: none;
+					border-top-left-radius: 0;
+					border-top-right-radius: 0;
+				}
+			}
+
+			&:not(:last-child) {
+				&._formPanel, ._formPanel {
+					border-bottom: solid 0.5px var(--divider);
+					border-bottom-left-radius: 0;
+					border-bottom-right-radius: 0;
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/src/client/components/form/input.vue b/src/client/components/form/input.vue
new file mode 100644
index 0000000000..89551a5fc2
--- /dev/null
+++ b/src/client/components/form/input.vue
@@ -0,0 +1,306 @@
+<template>
+<div class="ztzhwixg _formItem" :class="{ inline, disabled }">
+	<div class="_formLabel"><slot></slot></div>
+	<div class="icon" ref="icon"><slot name="icon"></slot></div>
+	<div class="input _formPanel">
+		<div class="prefix" ref="prefixEl"><slot name="prefix"></slot></div>
+		<input v-if="debounce" ref="inputEl"
+			v-debounce="500"
+			:type="type"
+			v-model.lazy="v"
+			:disabled="disabled"
+			:required="required"
+			:readonly="readonly"
+			:placeholder="placeholder"
+			:pattern="pattern"
+			:autocomplete="autocomplete"
+			:spellcheck="spellcheck"
+			:step="step"
+			@focus="focused = true"
+			@blur="focused = false"
+			@keydown="onKeydown($event)"
+			@input="onInput"
+			:list="id"
+		>
+		<input v-else ref="inputEl"
+			:type="type"
+			v-model="v"
+			:disabled="disabled"
+			:required="required"
+			:readonly="readonly"
+			:placeholder="placeholder"
+			:pattern="pattern"
+			:autocomplete="autocomplete"
+			:spellcheck="spellcheck"
+			:step="step"
+			@focus="focused = true"
+			@blur="focused = false"
+			@keydown="onKeydown($event)"
+			@input="onInput"
+			:list="id"
+		>
+		<datalist :id="id" v-if="datalist">
+			<option v-for="data in datalist" :value="data"/>
+		</datalist>
+		<div class="suffix" ref="suffixEl"><slot name="suffix"></slot></div>
+	</div>
+	<button class="save _textButton" v-if="save && changed" @click="() => { changed = false; save(); }">{{ $t('save') }}</button>
+	<div class="_formCaption"><slot name="desc"></slot></div>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, onUnmounted, nextTick, ref, watch, computed, toRefs } from 'vue';
+import debounce from 'v-debounce';
+import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
+import './form.scss';
+
+export default defineComponent({
+	directives: {
+		debounce
+	},
+	props: {
+		value: {
+			required: false
+		},
+		type: {
+			type: String,
+			required: false
+		},
+		required: {
+			type: Boolean,
+			required: false
+		},
+		readonly: {
+			type: Boolean,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		pattern: {
+			type: String,
+			required: false
+		},
+		placeholder: {
+			type: String,
+			required: false
+		},
+		autofocus: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		autocomplete: {
+			required: false
+		},
+		spellcheck: {
+			required: false
+		},
+		step: {
+			required: false
+		},
+		debounce: {
+			required: false
+		},
+		datalist: {
+			type: Array,
+			required: false,
+		},
+		inline: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		save: {
+			type: Function,
+			required: false,
+		},
+	},
+	emits: ['change', 'keydown', 'enter'],
+	setup(props, context) {
+		const { value, type, autofocus } = toRefs(props);
+		const v = ref(value.value);
+		const id = Math.random().toString(); // TODO: uuid?
+		const focused = ref(false);
+		const changed = ref(false);
+		const invalid = ref(false);
+		const filled = computed(() => v.value !== '' && v.value != null);
+		const inputEl = ref(null);
+		const prefixEl = ref(null);
+		const suffixEl = ref(null);
+
+		const focus = () => inputEl.value.focus();
+		const onInput = (ev) => {
+			changed.value = true;
+			context.emit('change', ev);
+		};
+		const onKeydown = (ev: KeyboardEvent) => {
+			context.emit('keydown', ev);
+
+			if (ev.code === 'Enter') {
+				context.emit('enter');
+			}
+		};
+
+		watch(value, newValue => {
+			v.value = newValue;
+		});
+
+		watch(v, newValue => {
+			if (type?.value === 'number') {
+				context.emit('update:value', parseFloat(newValue));
+			} else {
+				context.emit('update:value', newValue);
+			}
+
+			invalid.value = inputEl.value.validity.badInput;
+		});
+
+		onMounted(() => {
+			nextTick(() => {
+				if (autofocus.value) {
+					focus();
+				}
+
+				// このコンポーネントが作成された時、非表示状態である場合がある
+				// 非表示状態だと要素の幅などは0になってしまうので、定期的に計算する
+				const clock = setInterval(() => {
+					if (prefixEl.value) {
+						if (prefixEl.value.offsetWidth) {
+							inputEl.value.style.paddingLeft = prefixEl.value.offsetWidth + 'px';
+						}
+					}
+					if (suffixEl.value) {
+						if (suffixEl.value.offsetWidth) {
+							inputEl.value.style.paddingRight = suffixEl.value.offsetWidth + 'px';
+						}
+					}
+				}, 100);
+
+				onUnmounted(() => {
+					clearInterval(clock);
+				});
+			});
+		});
+
+		return {
+			id,
+			v,
+			focused,
+			invalid,
+			changed,
+			filled,
+			inputEl,
+			prefixEl,
+			suffixEl,
+			focus,
+			onInput,
+			onKeydown,
+			faExclamationCircle,
+		};
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.ztzhwixg {
+	position: relative;
+
+	> .icon {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 24px;
+		text-align: center;
+		line-height: 32px;
+
+		&:not(:empty) + .input {
+			margin-left: 28px;
+		}
+	}
+
+	> .input {
+		$height: 52px;
+		position: relative;
+
+		> input {
+			display: block;
+			height: $height;
+			width: 100%;
+			margin: 0;
+			padding: 0 16px;
+			font: inherit;
+			font-weight: normal;
+			font-size: 1em;
+			line-height: $height;
+			color: var(--inputText);
+			background: transparent;
+			border: none;
+			border-radius: 0;
+			outline: none;
+			box-shadow: none;
+			box-sizing: border-box;
+
+			&[type='file'] {
+				display: none;
+			}
+		}
+
+		> .prefix,
+		> .suffix {
+			display: block;
+			position: absolute;
+			z-index: 1;
+			top: 0;
+			padding: 0 16px;
+			font-size: 1em;
+			line-height: $height;
+			color: var(--inputLabel);
+			pointer-events: none;
+
+			&:empty {
+				display: none;
+			}
+
+			> * {
+				display: inline-block;
+				min-width: 16px;
+				max-width: 150px;
+				overflow: hidden;
+				white-space: nowrap;
+				text-overflow: ellipsis;
+			}
+		}
+
+		> .prefix {
+			left: 0;
+			padding-right: 8px;
+		}
+
+		> .suffix {
+			right: 0;
+			padding-left: 8px;
+		}
+	}
+
+	> .save {
+		margin: 6px 0 0 0;
+		font-size: 0.8em;
+	}
+
+	&.inline {
+		display: inline-block;
+		margin: 0;
+	}
+
+	&.disabled {
+		opacity: 0.7;
+
+		&, * {
+			cursor: not-allowed !important;
+		}
+	}
+}
+</style>
diff --git a/src/client/components/form/key-value-view.vue b/src/client/components/form/key-value-view.vue
new file mode 100644
index 0000000000..eadc675f89
--- /dev/null
+++ b/src/client/components/form/key-value-view.vue
@@ -0,0 +1,30 @@
+<template>
+<div class="_formItem">
+	<div class="_formPanel anocepby">
+		<span class="key"><slot name="key"></slot></span>
+		<span class="value"><slot name="value"></slot></span>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import './form.scss';
+
+export default defineComponent({
+
+});
+</script>
+
+<style lang="scss" scoped>
+.anocepby {
+	display: flex;
+	align-items: center;
+	padding: 14px 16px;
+
+	> .value {
+		margin-left: auto;
+		opacity: 0.7;
+	}
+}
+</style>
diff --git a/src/client/components/form/link.vue b/src/client/components/form/link.vue
new file mode 100644
index 0000000000..01c46e851a
--- /dev/null
+++ b/src/client/components/form/link.vue
@@ -0,0 +1,90 @@
+<template>
+<div class="qmfkfnzi _formItem">
+	<a class="main _button _formPanel _formClickable" :href="to" target="_blank" v-if="external">
+		<span class="icon"><slot name="icon"></slot></span>
+		<span class="text"><slot></slot></span>
+		<Fa :icon="faExternalLinkAlt" class="right"/>
+	</a>
+	<MkA class="main _button _formPanel _formClickable" :class="{ active }" :to="to" v-else>
+		<span class="icon"><slot name="icon"></slot></span>
+		<span class="text"><slot></slot></span>
+		<Fa :icon="faChevronRight" class="right"/>
+	</MkA>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { faChevronRight, faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
+import './form.scss';
+
+export default defineComponent({
+	props: {
+		to: {
+			type: String,
+			required: true
+		},
+		active: {
+			type: Boolean,
+			required: false
+		},
+		external: {
+			type: Boolean,
+			required: false
+		},
+	},
+	data() {
+		return {
+			faChevronRight, faExternalLinkAlt
+		};
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.qmfkfnzi {
+	> .main {
+		display: flex;
+		align-items: center;
+		width: 100%;
+		box-sizing: border-box;
+		padding: 14px 16px 14px 14px;
+
+		&:hover {
+			text-decoration: none;
+		}
+
+		&.active {
+			color: var(--accent);
+		}
+
+		> .icon {
+			width: 32px;
+			margin-right: 2px;
+			flex-shrink: 0;
+			text-align: center;
+			opacity: 0.8;
+
+			&:empty {
+				display: none;
+
+				& + .text {
+					padding-left: 4px;
+				}
+			}
+		}
+
+		> .text {
+			white-space: nowrap;
+			text-overflow: ellipsis;
+			overflow: hidden;
+			padding-right: 12px;
+		}
+
+		> .right {
+			margin-left: auto;
+			opacity: 0.7;
+		}
+	}
+}
+</style>
diff --git a/src/client/components/form/pagination.vue b/src/client/components/form/pagination.vue
new file mode 100644
index 0000000000..7dcaedf9bf
--- /dev/null
+++ b/src/client/components/form/pagination.vue
@@ -0,0 +1,42 @@
+<template>
+<FormGroup class="uljviswt _formItem">
+	<template #label><slot name="label"></slot></template>
+	<slot :items="items"></slot>
+	<div class="empty" v-if="empty" key="_empty_">
+		<slot name="empty"></slot>
+	</div>
+	<FormButton v-show="more" class="button" @click="fetchMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary>
+		<template v-if="!moreFetching">{{ $t('loadMore') }}</template>
+		<template v-if="moreFetching"><MkLoading inline/></template>
+	</FormButton>
+</FormGroup>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import FormButton from './button.vue';
+import FormGroup from './group.vue';
+import paging from '@/scripts/paging';
+
+export default defineComponent({
+	components: {
+		FormButton,
+		FormGroup,
+	},
+
+	mixins: [
+		paging({}),
+	],
+
+	props: {
+		pagination: {
+			required: true
+		},
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.uljviswt {
+}
+</style>
diff --git a/src/client/components/form/radios.vue b/src/client/components/form/radios.vue
new file mode 100644
index 0000000000..4c7f405cac
--- /dev/null
+++ b/src/client/components/form/radios.vue
@@ -0,0 +1,106 @@
+<script lang="ts">
+import { defineComponent, h } from 'vue';
+import MkRadio from '@/components/ui/radio.vue';
+import './form.scss';
+
+export default defineComponent({
+	components: {
+		MkRadio
+	},
+	props: {
+		modelValue: {
+			required: false
+		},
+	},
+	data() {
+		return {
+			value: this.modelValue,
+		}
+	},
+	watch: {
+		value() {
+			this.$emit('update:modelValue', this.value);
+		}
+	},
+	render() {
+		const label = this.$slots.desc();
+		const options = this.$slots.default();
+
+		return h('div', {
+			class: 'cnklmpwm _formItem'
+		}, [
+			h('div', {
+				class: '_formLabel',
+			}, label),
+			...options.map(option => h('button', {
+				class: '_button _formPanel _formClickable',
+				key: option.props.value,
+				onClick: () => this.value = option.props.value,
+			}, [h('span', {
+				class: ['check', { checked: this.value === option.props.value }],
+			}), option.children]))
+		]);
+	}
+});
+</script>
+
+<style lang="scss">
+.cnklmpwm {
+	> button {
+		display: block;
+		width: 100%;
+		box-sizing: border-box;
+		padding: 14px 18px;
+		text-align: left;
+
+		&:not(:first-of-type) {
+			border-top: none !important;
+			border-top-left-radius: 0;
+			border-top-right-radius: 0;
+		}
+
+		&:not(:last-of-type) {
+			border-bottom: solid 0.5px var(--divider);
+			border-bottom-left-radius: 0;
+			border-bottom-right-radius: 0;
+		}
+
+		> .check {
+			display: inline-block;
+			vertical-align: bottom;
+			position: relative;
+			width: 20px;
+			height: 20px;
+			margin-right: 8px;
+			background: none;
+			border: 2px solid var(--inputBorder);
+			border-radius: 100%;
+			transition: inherit;
+
+			&:after {
+				content: "";
+				display: block;
+				position: absolute;
+				top: 3px;
+				right: 3px;
+				bottom: 3px;
+				left: 3px;
+				border-radius: 100%;
+				opacity: 0;
+				transform: scale(0);
+				transition: .4s cubic-bezier(.25,.8,.25,1);
+			}
+
+			&.checked {
+				border-color: var(--accent);
+
+				&:after {
+					background-color: var(--accent);
+					transform: scale(1);
+					opacity: 1;
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/src/client/components/form/range.vue b/src/client/components/form/range.vue
new file mode 100644
index 0000000000..3452184c55
--- /dev/null
+++ b/src/client/components/form/range.vue
@@ -0,0 +1,122 @@
+<template>
+<div class="ifitouly _formItem" :class="{ focused, disabled }">
+	<div class="_formLabel"><slot name="label"></slot></div>
+	<div class="_formPanel main">
+		<input
+			type="range"
+			ref="input"
+			v-model="v"
+			:disabled="disabled"
+			:min="min"
+			:max="max"
+			:step="step"
+			@focus="focused = true"
+			@blur="focused = false"
+			@input="$emit('update:value', $event.target.value)"
+		/>
+	</div>
+	<div class="_formCaption"><slot name="caption"></slot></div>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+	props: {
+		value: {
+			type: Number,
+			required: false,
+			default: 0
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		min: {
+			type: Number,
+			required: false,
+			default: 0
+		},
+		max: {
+			type: Number,
+			required: false,
+			default: 100
+		},
+		step: {
+			type: Number,
+			required: false,
+			default: 1
+		},
+	},
+	data() {
+		return {
+			v: this.value,
+			focused: false
+		};
+	},
+	watch: {
+		value(v) {
+			this.v = parseFloat(v);
+		}
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.ifitouly {
+	position: relative;
+
+	> .main {
+		padding: 24px 16px;
+
+		> input {
+			display: block;
+			-webkit-appearance: none;
+			-moz-appearance: none;
+			appearance: none;
+			background: var(--X10);
+			height: 4px;
+			width: 100%;
+			box-sizing: border-box;
+			margin: 0;
+			outline: 0;
+			border: 0;
+			border-radius: 7px;
+
+			&.disabled {
+				opacity: 0.6;
+				cursor: not-allowed;
+			}
+
+			&::-webkit-slider-thumb {
+				-webkit-appearance: none;
+				appearance: none;
+				cursor: pointer;
+				width: 20px;
+				height: 20px;
+				display: block;
+				border-radius: 50%;
+				border: none;
+				background: var(--accent);
+				box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
+				box-sizing: content-box;
+			}
+
+			&::-moz-range-thumb {
+				-moz-appearance: none;
+				appearance: none;
+				cursor: pointer;
+				width: 20px;
+				height: 20px;
+				display: block;
+				border-radius: 50%;
+				border: none;
+				background: var(--accent);
+				box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
+			}
+		}
+	}
+}
+</style>
diff --git a/src/client/components/form/select.vue b/src/client/components/form/select.vue
new file mode 100644
index 0000000000..b865372f56
--- /dev/null
+++ b/src/client/components/form/select.vue
@@ -0,0 +1,147 @@
+<template>
+<div class="yrtfrpux _formItem" :class="{ disabled, inline }">
+	<div class="_formLabel"><slot name="label"></slot></div>
+	<div class="icon" ref="icon"><slot name="icon"></slot></div>
+	<div class="input _formPanel _formClickable" @click="focus">
+		<div class="prefix" ref="prefix"><slot name="prefix"></slot></div>
+		<select ref="input"
+			v-model="v"
+			:required="required"
+			:disabled="disabled"
+			@focus="focused = true"
+			@blur="focused = false"
+		>
+			<slot></slot>
+		</select>
+		<div class="suffix">
+			<Fa :icon="faChevronDown"/>
+		</div>
+	</div>
+	<div class="_formCaption"><slot name="caption"></slot></div>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
+import './form.scss';
+
+export default defineComponent({
+	props: {
+		value: {
+			required: false
+		},
+		required: {
+			type: Boolean,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		inline: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+	},
+	data() {
+		return {
+			faChevronDown,
+		};
+	},
+	computed: {
+		v: {
+			get() {
+				return this.value;
+			},
+			set(v) {
+				this.$emit('update:value', v);
+			}
+		},
+	},
+	methods: {
+		focus() {
+			this.$refs.input.focus();
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.yrtfrpux {
+	position: relative;
+
+	> .icon {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 24px;
+		text-align: center;
+		line-height: 32px;
+
+		&:not(:empty) + .input {
+			margin-left: 28px;
+		}
+	}
+
+	> .input {
+		display: flex;
+		position: relative;
+
+		> select {
+			display: block;
+			flex: 1;
+			width: 100%;
+			padding: 0 16px;
+			font: inherit;
+			font-weight: normal;
+			font-size: 1em;
+			height: 52px;
+			background: none;
+			border: none;
+			border-radius: 0;
+			outline: none;
+			box-shadow: none;
+			appearance: none;
+			-webkit-appearance: none;
+			color: var(--fg);
+
+			option,
+			optgroup {
+				color: var(--fg);
+				background: var(--bg);
+			}
+		}
+
+		> .prefix,
+		> .suffix {
+			display: block;
+			align-self: center;
+			justify-self: center;
+			font-size: 1em;
+			line-height: 32px;
+			color: var(--inputLabel);
+			pointer-events: none;
+
+			&:empty {
+				display: none;
+			}
+
+			> * {
+				display: block;
+				min-width: 16px;
+			}
+		}
+
+		> .prefix {
+			padding-right: 4px;
+		}
+
+		> .suffix {
+			padding: 0 16px 0 0;
+			opacity: 0.7;
+		}
+	}
+}
+</style>
diff --git a/src/client/components/form/switch.vue b/src/client/components/form/switch.vue
new file mode 100644
index 0000000000..a2941c5996
--- /dev/null
+++ b/src/client/components/form/switch.vue
@@ -0,0 +1,132 @@
+<template>
+<div class="ijnpvmgr _formItem">
+	<div class="main _formPanel _formClickable"
+		:class="{ disabled, checked }"
+		:aria-checked="checked"
+		:aria-disabled="disabled"
+		@click.prevent="toggle"
+	>
+		<input
+			type="checkbox"
+			ref="input"
+			:disabled="disabled"
+			@keydown.enter="toggle"
+		>
+		<span class="button">
+			<span></span>
+		</span>
+		<span class="label">
+			<span><slot></slot></span>
+		</span>
+	</div>
+	<div class="_formCaption"><slot name="desc"></slot></div>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import './form.scss';
+
+export default defineComponent({
+	props: {
+		value: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		}
+	},
+	computed: {
+		checked(): boolean {
+			return this.value;
+		}
+	},
+	methods: {
+		toggle() {
+			if (this.disabled) return;
+			this.$emit('update:value', !this.checked);
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.ijnpvmgr {
+	> .main {
+		position: relative;
+		display: flex;
+		padding: 16px;
+		cursor: pointer;
+
+		> * {
+			user-select: none;
+		}
+
+		&.disabled {
+			opacity: 0.6;
+			cursor: not-allowed;
+		}
+
+		&.checked {
+			> .button {
+				background-color: var(--X10);
+				border-color: var(--X10);
+
+				> * {
+					background-color: var(--accent);
+					transform: translateX(14px);
+				}
+			}
+		}
+
+		> input {
+			position: absolute;
+			width: 0;
+			height: 0;
+			opacity: 0;
+			margin: 0;
+		}
+
+		> .button {
+			position: relative;
+			display: inline-block;
+			flex-shrink: 0;
+			margin: 3px 0 0 0;
+			width: 34px;
+			height: 14px;
+			background: var(--X6);
+			outline: none;
+			border-radius: 14px;
+			transition: all 0.3s;
+			cursor: pointer;
+
+			> * {
+				position: absolute;
+				top: -3px;
+				left: 0;
+				border-radius: 100%;
+				transition: background-color 0.3s, transform 0.3s;
+				width: 20px;
+				height: 20px;
+				background-color: #fff;
+				box-shadow: 0 2px 1px -1px rgba(#000, 0.2), 0 1px 1px 0 rgba(#000, 0.14), 0 1px 3px 0 rgba(#000, 0.12);
+			}
+		}
+
+		> .label {
+			margin-left: 12px;
+			display: block;
+			transition: inherit;
+			color: var(--fg);
+
+			> span {
+				display: block;
+				line-height: 20px;
+				transition: inherit;
+			}
+		}
+	}
+}
+</style>
diff --git a/src/client/components/form/textarea.vue b/src/client/components/form/textarea.vue
new file mode 100644
index 0000000000..d84b48197a
--- /dev/null
+++ b/src/client/components/form/textarea.vue
@@ -0,0 +1,136 @@
+<template>
+<div class="rivhosbp _formItem" :class="{ tall, pre }">
+	<div class="_formLabel"><slot></slot></div>
+	<div class="input _formPanel">
+		<textarea ref="input" :class="{ code, _monospace: code }"
+			:value="value"
+			:required="required"
+			:readonly="readonly"
+			:pattern="pattern"
+			:autocomplete="autocomplete"
+			:spellcheck="!code"
+			@input="onInput"
+			@focus="focused = true"
+			@blur="focused = false"
+		></textarea>
+	</div>
+	<button class="save _textButton" v-if="save && changed" @click="() => { changed = false; save(); }">{{ $t('save') }}</button>
+	<div class="_formCaption"><slot name="desc"></slot></div>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import './form.scss';
+
+export default defineComponent({
+	props: {
+		value: {
+			required: false
+		},
+		required: {
+			type: Boolean,
+			required: false
+		},
+		readonly: {
+			type: Boolean,
+			required: false
+		},
+		pattern: {
+			type: String,
+			required: false
+		},
+		autocomplete: {
+			type: String,
+			required: false
+		},
+		code: {
+			type: Boolean,
+			required: false
+		},
+		tall: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		pre: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		save: {
+			type: Function,
+			required: false,
+		},
+	},
+	data() {
+		return {
+			changed: false,
+		}
+	},
+	methods: {
+		focus() {
+			this.$refs.input.focus();
+		},
+		onInput(ev) {
+			this.changed = true;
+			this.$emit('update:value', ev.target.value);
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.rivhosbp {
+	position: relative;
+
+	> .input {
+		position: relative;
+	
+		> textarea {
+			display: block;
+			width: 100%;
+			min-width: 100%;
+			max-width: 100%;
+			min-height: 130px;
+			margin: 0;
+			padding: 16px;
+			box-sizing: border-box;
+			font: inherit;
+			font-weight: normal;
+			font-size: 1em;
+			background: transparent;
+			border: none;
+			border-radius: 0;
+			outline: none;
+			box-shadow: none;
+			color: var(--fg);
+
+			&.code {
+				tab-size: 2;
+			}
+		}
+	}
+
+	> .save {
+		margin: 6px 0 0 0;
+		font-size: 0.8em;
+	}
+
+	&.tall {
+		> .input {
+			> textarea {
+				min-height: 200px;
+			}
+		}
+	}
+
+	&.pre {
+		> .input {
+			> textarea {
+				white-space: pre;
+			}
+		}
+	}
+}
+</style>
diff --git a/src/client/components/form/tuple.vue b/src/client/components/form/tuple.vue
new file mode 100644
index 0000000000..6c8a22d189
--- /dev/null
+++ b/src/client/components/form/tuple.vue
@@ -0,0 +1,36 @@
+<template>
+<div class="wthhikgt _formItem" v-size="{ max: [500] }">
+	<slot></slot>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+});
+</script>
+
+<style lang="scss" scoped>
+.wthhikgt {
+	position: relative;
+	display: flex;
+
+	> ::v-deep(*) {
+		flex: 1;
+		margin: 0;
+
+		&:not(:last-child) {
+			margin-right: 16px;
+		}
+	}
+
+	&.max-width_500px {
+		display: block;
+
+		> ::v-deep(*) {
+			margin: inherit;
+		}
+	}
+}
+</style>
diff --git a/src/client/components/media-image.vue b/src/client/components/media-image.vue
index 64e3efab31..a9d0023cc2 100644
--- a/src/client/components/media-image.vue
+++ b/src/client/components/media-image.vue
@@ -68,7 +68,7 @@ export default defineComponent({
 	created() {
 		// Plugin:register_note_view_interruptor を使って書き換えられる可能性があるためwatchする
 		this.$watch('image', () => {
-			this.hide = this.image.isSensitive && !this.$store.state.device.alwaysShowNsfw;
+			this.hide = (this.$store.state.device.nsfw === 'force') ? true : this.image.isSensitive && (this.$store.state.device.nsfw !== 'ignore');
 			if (this.image.blurhash) {
 				this.color = extractAvgColorFromBlurhash(this.image.blurhash);
 			}
diff --git a/src/client/components/media-video.vue b/src/client/components/media-video.vue
index 21faddf73b..3dfd60c87f 100644
--- a/src/client/components/media-video.vue
+++ b/src/client/components/media-video.vue
@@ -48,7 +48,7 @@ export default defineComponent({
 		}
 	},
 	created() {
-		this.hide = this.video.isSensitive && !this.$store.state.device.alwaysShowNsfw;
+		this.hide = (this.$store.state.device.nsfw === 'force') ? true : this.video.isSensitive && (this.$store.state.device.nsfw !== 'ignore');
 	},
 });
 </script>
diff --git a/src/client/components/taskmanager.api-window.vue b/src/client/components/taskmanager.api-window.vue
index 0df3f75fa2..ec685462c9 100644
--- a/src/client/components/taskmanager.api-window.vue
+++ b/src/client/components/taskmanager.api-window.vue
@@ -14,8 +14,8 @@
 			<option value="res">Response</option>
 		</MkTab>
 
-		<code v-if="tab === 'req'">{{ reqStr }}</code>
-		<code v-if="tab === 'res'">{{ resStr }}</code>
+		<code v-if="tab === 'req'" class="_monospace">{{ reqStr }}</code>
+		<code v-if="tab === 'res'" class="_monospace">{{ resStr }}</code>
 	</div>
 </XWindow>
 </template>
@@ -67,7 +67,6 @@ export default defineComponent({
 		font-size: 0.9em;
 		tab-size: 2;
 		white-space: pre;
-		font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
 	}
 }
 </style>
diff --git a/src/client/components/taskmanager.vue b/src/client/components/taskmanager.vue
index 92c56442c3..1ed8c8bd5e 100644
--- a/src/client/components/taskmanager.vue
+++ b/src/client/components/taskmanager.vue
@@ -3,7 +3,7 @@
 	<template #header>
 		<Fa :icon="faTerminal" style="margin-right: 0.5em;"/>Task Manager
 	</template>
-	<div class="qljqmnzj">
+	<div class="qljqmnzj _monospace">
 		<MkTab v-model:value="tab" style="border-bottom: solid 1px var(--divider);">
 			<option value="windows">Windows</option>
 			<option value="stream">Stream</option>
@@ -150,7 +150,6 @@ export default defineComponent({
 	display: flex;
 	flex-direction: column;
 	height: 100%;
-	font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
 
 	> .content {
 		flex: 1;
diff --git a/src/client/components/timeline.vue b/src/client/components/timeline.vue
index 930f47b1a5..df9424d8ed 100644
--- a/src/client/components/timeline.vue
+++ b/src/client/components/timeline.vue
@@ -6,6 +6,7 @@
 import { defineComponent } from 'vue';
 import XNotes from './notes.vue';
 import * as os from '@/os';
+import * as sound from '@/scripts/sound';
 
 export default defineComponent({
 	components: {
@@ -65,7 +66,7 @@ export default defineComponent({
 			this.$emit('note');
 
 			if (this.sound) {
-				os.sound(note.userId === this.$store.state.i.id ? 'noteMy' : 'note');
+				sound.play(note.userId === this.$store.state.i.id ? 'noteMy' : 'note');
 			}
 		};
 
diff --git a/src/client/components/ui/range.vue b/src/client/components/ui/range.vue
index c6e585cf50..4cfe66a8fc 100644
--- a/src/client/components/ui/range.vue
+++ b/src/client/components/ui/range.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="timctyfi" :class="{ focused, disabled }">
 	<div class="icon"><slot name="icon"></slot></div>
-	<span class="title"><slot name="title"></slot></span>
+	<span class="label"><slot name="label"></slot></span>
 	<input
 		type="range"
 		ref="input"
@@ -19,7 +19,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';import * as os from '@/os';
+import { defineComponent } from 'vue';
 
 export default defineComponent({
 	props: {
diff --git a/src/client/components/ui/switch.vue b/src/client/components/ui/switch.vue
index f738257232..762fba6d99 100644
--- a/src/client/components/ui/switch.vue
+++ b/src/client/components/ui/switch.vue
@@ -17,10 +17,8 @@
 		<span></span>
 	</span>
 	<span class="label">
-		<span :aria-hidden="!checked"><slot></slot></span>
-		<p :aria-hidden="!checked">
-			<slot name="desc"></slot>
-		</p>
+		<span><slot></slot></span>
+		<p><slot name="desc"></slot></p>
 	</span>
 </div>
 </template>
diff --git a/src/client/components/ui/textarea.vue b/src/client/components/ui/textarea.vue
index 7d3250cc45..d49d7e8342 100644
--- a/src/client/components/ui/textarea.vue
+++ b/src/client/components/ui/textarea.vue
@@ -2,7 +2,7 @@
 <div class="adhpbeos" :class="{ focused, filled, tall, pre }">
 	<div class="input">
 		<span class="label" ref="label"><slot></slot></span>
-		<textarea ref="input" :class="{ code }"
+		<textarea ref="input" :class="{ code, _monospace: code }"
 			:value="value"
 			:required="required"
 			:readonly="readonly"
@@ -166,7 +166,6 @@ export default defineComponent({
 
 			&.code {
 				tab-size: 2;
-				font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
 			}
 		}
 	}
diff --git a/src/client/init.ts b/src/client/init.ts
index cc97947c0a..9294733bbb 100644
--- a/src/client/init.ts
+++ b/src/client/init.ts
@@ -16,7 +16,8 @@ import { router } from './router';
 import { applyTheme } from '@/scripts/theme';
 import { isDeviceDarkmode } from '@/scripts/is-device-darkmode';
 import { i18n, lang } from './i18n';
-import { stream, sound, isMobile, dialog } from '@/os';
+import { stream, isMobile, dialog } from '@/os';
+import * as sound from './scripts/sound';
 
 console.info(`Misskey v${version}`);
 
@@ -50,7 +51,7 @@ if (_DEV_) {
 document.addEventListener('touchend', () => {}, { passive: true });
 
 if (localStorage.getItem('theme') == null) {
-	applyTheme(require('@/themes/l-white.json5'));
+	applyTheme(require('@/themes/l-light.json5'));
 }
 
 //#region SEE: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
@@ -307,7 +308,7 @@ if (store.getters.isSignedIn) {
 			hasUnreadMessagingMessage: true
 		});
 
-		sound('chatBg');
+		sound.play('chatBg');
 	});
 
 	main.on('readAllAntennas', () => {
@@ -321,7 +322,7 @@ if (store.getters.isSignedIn) {
 			hasUnreadAntenna: true
 		});
 
-		sound('antenna');
+		sound.play('antenna');
 	});
 
 	main.on('readAllAnnouncements', () => {
@@ -341,7 +342,7 @@ if (store.getters.isSignedIn) {
 			hasUnreadChannel: true
 		});
 
-		sound('channel');
+		sound.play('channel');
 	});
 
 	main.on('readAllAnnouncements', () => {
diff --git a/src/client/os.ts b/src/client/os.ts
index 88d445ebac..d43de4de44 100644
--- a/src/client/os.ts
+++ b/src/client/os.ts
@@ -6,6 +6,7 @@ import { apiUrl, debug } from '@/config';
 import MkPostFormDialog from '@/components/post-form-dialog.vue';
 import MkWaitingDialog from '@/components/waiting-dialog.vue';
 import { resolve } from '@/router';
+import { device } from './cold-storage';
 
 const ua = navigator.userAgent.toLowerCase();
 export const isMobile = /mobile|iphone|ipad|android/.test(ua);
@@ -344,15 +345,6 @@ export function post(props: Record<string, any>) {
 	});
 }
 
-export function sound(type: string) {
-	if (store.state.device.sfxVolume === 0) return;
-	const sound = store.state.device['sfx' + type.substr(0, 1).toUpperCase() + type.substr(1)];
-	if (sound == null) return;
-	const audio = new Audio(`/assets/sounds/${sound}.mp3`);
-	audio.volume = store.state.device.sfxVolume;
-	audio.play();
-}
-
 export const deckGlobalEvents = new EventEmitter();
 
 export const uploads = ref([]);
diff --git a/src/client/pages/announcements.vue b/src/client/pages/announcements.vue
index a202ec749f..50dc994025 100644
--- a/src/client/pages/announcements.vue
+++ b/src/client/pages/announcements.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="_section">
-	<MkPagination :pagination="pagination" #default="{items}" class="ruryvtyk _content" ref="list">
+	<MkPagination :pagination="pagination" #default="{items}" class="ruryvtyk _content">
 		<section class="_card announcement _vMargin" v-for="(announcement, i) in items" :key="announcement.id">
 			<div class="_title"><span v-if="$store.getters.isSignedIn && !announcement.isRead">🆕 </span>{{ announcement.title }}</div>
 			<div class="_content">
diff --git a/src/client/pages/instance/settings.vue b/src/client/pages/instance/settings.vue
index 32a6a9595f..542c2942b9 100644
--- a/src/client/pages/instance/settings.vue
+++ b/src/client/pages/instance/settings.vue
@@ -7,6 +7,8 @@
 			<MkTextarea v-model:value="description">{{ $t('instanceDescription') }}</MkTextarea>
 			<MkInput v-model:value="iconUrl"><template #icon><Fa :icon="faLink"/></template>{{ $t('iconUrl') }}</MkInput>
 			<MkInput v-model:value="bannerUrl"><template #icon><Fa :icon="faLink"/></template>{{ $t('bannerUrl') }}</MkInput>
+			<MkInput v-model:value="backgroundImageUrl"><template #icon><Fa :icon="faLink"/></template>{{ $t('backgroundImageUrl') }}</MkInput>
+			<MkInput v-model:value="logoImageUrl"><template #icon><Fa :icon="faLink"/></template>{{ $t('logoImageUrl') }}</MkInput>
 			<MkInput v-model:value="tosUrl"><template #icon><Fa :icon="faLink"/></template>{{ $t('tosUrl') }}</MkInput>
 			<MkInput v-model:value="maintainerName">{{ $t('maintainerName') }}</MkInput>
 			<MkInput v-model:value="maintainerEmail" type="email"><template #icon><Fa :icon="faEnvelope"/></template>{{ $t('maintainerEmail') }}</MkInput>
@@ -292,6 +294,8 @@ export default defineComponent({
 			email: null,
 			bannerUrl: null,
 			iconUrl: null,
+			logoImageUrl: null,
+			backgroundImageUrl: null,
 			maxNoteTextLength: 0,
 			enableRegistration: false,
 			enableLocalTimeline: false,
@@ -345,6 +349,8 @@ export default defineComponent({
 		this.tosUrl = this.meta.tosUrl;
 		this.bannerUrl = this.meta.bannerUrl;
 		this.iconUrl = this.meta.iconUrl;
+		this.logoImageUrl = this.meta.logoImageUrl;
+		this.backgroundImageUrl = this.meta.backgroundImageUrl;
 		this.enableEmail = this.meta.enableEmail;
 		this.email = this.meta.email;
 		this.maintainerName = this.meta.maintainerName;
@@ -498,6 +504,8 @@ export default defineComponent({
 				tosUrl: this.tosUrl,
 				bannerUrl: this.bannerUrl,
 				iconUrl: this.iconUrl,
+				logoImageUrl: this.logoImageUrl,
+				backgroundImageUrl: this.backgroundImageUrl,
 				maintainerName: this.maintainerName,
 				maintainerEmail: this.maintainerEmail,
 				maxNoteTextLength: this.maxNoteTextLength,
diff --git a/src/client/pages/messaging/messaging-room.vue b/src/client/pages/messaging/messaging-room.vue
index f414ccbaa4..d4331c1390 100644
--- a/src/client/pages/messaging/messaging-room.vue
+++ b/src/client/pages/messaging/messaging-room.vue
@@ -38,6 +38,7 @@ import parseAcct from '../../../misc/acct/parse';
 import { isBottom, onScrollBottom, scroll } from '@/scripts/scroll';
 import * as os from '@/os';
 import { popout } from '@/scripts/popout';
+import * as sound from '@/scripts/sound';
 
 const Component = defineComponent({
 	components: {
@@ -218,7 +219,7 @@ const Component = defineComponent({
 		},
 
 		onMessage(message) {
-			os.sound('chat');
+			sound.play('chat');
 
 			const _isBottom = isBottom(this.$el, 64);
 
diff --git a/src/client/pages/reversi/game.board.vue b/src/client/pages/reversi/game.board.vue
index 6559396aca..302d7bc79c 100644
--- a/src/client/pages/reversi/game.board.vue
+++ b/src/client/pages/reversi/game.board.vue
@@ -94,6 +94,7 @@ import { url } from '@/config';
 import MkButton from '@/components/ui/button.vue';
 import { userPage } from '@/filters/user';
 import * as os from '@/os';
+import * as sound from '@/scripts/sound';
 
 export default defineComponent({
 	components: {
@@ -245,11 +246,7 @@ export default defineComponent({
 			this.o.put(this.myColor, pos);
 
 			// サウンドを再生する
-			if (this.$store.state.device.enableSounds) {
-				const sound = new Audio(`${url}/assets/reversi-put-me.mp3`);
-				sound.volume = this.$store.state.device.soundVolume;
-				sound.play();
-			}
+			sound.play(this.myColor ? 'reversiPutBlack' : 'reversiPutWhite');
 
 			this.connection.send('set', {
 				pos: pos
@@ -268,10 +265,8 @@ export default defineComponent({
 			this.$forceUpdate();
 
 			// サウンドを再生する
-			if (this.$store.state.device.enableSounds && x.color != this.myColor) {
-				const sound = new Audio(`${url}/assets/reversi-put-you.mp3`);
-				sound.volume = this.$store.state.device.soundVolume;
-				sound.play();
+			if (x.color !== this.myColor) {
+				sound.play(x.color ? 'reversiPutBlack' : 'reversiPutWhite');
 			}
 		},
 
diff --git a/src/client/pages/settings/security.2fa.vue b/src/client/pages/settings/2fa.vue
similarity index 96%
rename from src/client/pages/settings/security.2fa.vue
rename to src/client/pages/settings/2fa.vue
index 22b3878445..dc6d12a40f 100644
--- a/src/client/pages/settings/security.2fa.vue
+++ b/src/client/pages/settings/2fa.vue
@@ -75,14 +75,25 @@ import MkButton from '@/components/ui/button.vue';
 import MkInfo from '@/components/ui/info.vue';
 import MkInput from '@/components/ui/input.vue';
 import MkSwitch from '@/components/ui/switch.vue';
+import FormBase from '@/components/form/base.vue';
+import FormGroup from '@/components/form/group.vue';
+import FormButton from '@/components/form/button.vue';
 import * as os from '@/os';
 
 export default defineComponent({
 	components: {
+		FormBase,
 		MkButton, MkInfo, MkInput, MkSwitch
 	},
+
+	emits: ['info'],
+
 	data() {
 		return {
+			INFO: {
+				title: this.$t('twoStepAuthentication'),
+				icon: faLock
+			},
 			data: null,
 			supportsCredentials: !!navigator.credentials,
 			usePasswordLessLogin: this.$store.state.i.usePasswordLessLogin,
@@ -92,6 +103,7 @@ export default defineComponent({
 			faLock
 		};
 	},
+
 	methods: {
 		register() {
 			os.dialog({
@@ -225,6 +237,7 @@ export default defineComponent({
 				});
 			});
 		},
+
 		updatePasswordLessLogin() {
 			os.api('i/2fa/password-less', {
 				value: !!this.usePasswordLessLogin
diff --git a/src/client/pages/settings/account-info.vue b/src/client/pages/settings/account-info.vue
new file mode 100644
index 0000000000..c881b91535
--- /dev/null
+++ b/src/client/pages/settings/account-info.vue
@@ -0,0 +1,185 @@
+<template>
+<FormBase>
+	<FormKeyValueView>
+		<template #key>ID</template>
+		<template #value><span class="_monospace">{{ $store.state.i.id }}</span></template>
+	</FormKeyValueView>
+
+	<FormGroup>
+		<FormKeyValueView>
+			<template #key>{{ $t('registeredDate') }}</template>
+			<template #value><MkTime :time="$store.state.i.createdAt" mode="detail"/></template>
+		</FormKeyValueView>
+	</FormGroup>
+
+	<FormGroup v-if="stats">
+		<template #label>{{ $t('statistics') }}</template>
+		<FormKeyValueView>
+			<template #key>{{ $t('notesCount') }}</template>
+			<template #value>{{ number(stats.notesCount) }}</template>
+		</FormKeyValueView>
+		<FormKeyValueView>
+			<template #key>{{ $t('repliesCount') }}</template>
+			<template #value>{{ number(stats.repliesCount) }}</template>
+		</FormKeyValueView>
+		<FormKeyValueView>
+			<template #key>{{ $t('renotesCount') }}</template>
+			<template #value>{{ number(stats.renotesCount) }}</template>
+		</FormKeyValueView>
+		<FormKeyValueView>
+			<template #key>{{ $t('repliedCount') }}</template>
+			<template #value>{{ number(stats.repliedCount) }}</template>
+		</FormKeyValueView>
+		<FormKeyValueView>
+			<template #key>{{ $t('renotedCount') }}</template>
+			<template #value>{{ number(stats.renotedCount) }}</template>
+		</FormKeyValueView>
+		<FormKeyValueView>
+			<template #key>{{ $t('pollVotesCount') }}</template>
+			<template #value>{{ number(stats.pollVotesCount) }}</template>
+		</FormKeyValueView>
+		<FormKeyValueView>
+			<template #key>{{ $t('pollVotedCount') }}</template>
+			<template #value>{{ number(stats.pollVotedCount) }}</template>
+		</FormKeyValueView>
+		<FormKeyValueView>
+			<template #key>{{ $t('sentReactionsCount') }}</template>
+			<template #value>{{ number(stats.sentReactionsCount) }}</template>
+		</FormKeyValueView>
+		<FormKeyValueView>
+			<template #key>{{ $t('receivedReactionsCount') }}</template>
+			<template #value>{{ number(stats.receivedReactionsCount) }}</template>
+		</FormKeyValueView>
+		<FormKeyValueView>
+			<template #key>{{ $t('noteFavoritesCount') }}</template>
+			<template #value>{{ number(stats.noteFavoritesCount) }}</template>
+		</FormKeyValueView>
+		<FormKeyValueView>
+			<template #key>{{ $t('followingCount') }}</template>
+			<template #value>{{ number(stats.followingCount) }}</template>
+		</FormKeyValueView>
+		<FormKeyValueView>
+			<template #key>{{ $t('followingCount') }} ({{ $t('local') }})</template>
+			<template #value>{{ number(stats.localFollowingCount) }}</template>
+		</FormKeyValueView>
+		<FormKeyValueView>
+			<template #key>{{ $t('followingCount') }} ({{ $t('remote') }})</template>
+			<template #value>{{ number(stats.remoteFollowingCount) }}</template>
+		</FormKeyValueView>
+		<FormKeyValueView>
+			<template #key>{{ $t('followersCount') }}</template>
+			<template #value>{{ number(stats.followersCount) }}</template>
+		</FormKeyValueView>
+		<FormKeyValueView>
+			<template #key>{{ $t('followersCount') }} ({{ $t('local') }})</template>
+			<template #value>{{ number(stats.localFollowersCount) }}</template>
+		</FormKeyValueView>
+		<FormKeyValueView>
+			<template #key>{{ $t('followersCount') }} ({{ $t('remote') }})</template>
+			<template #value>{{ number(stats.remoteFollowersCount) }}</template>
+		</FormKeyValueView>
+		<FormKeyValueView>
+			<template #key>{{ $t('pageLikesCount') }}</template>
+			<template #value>{{ number(stats.pageLikesCount) }}</template>
+		</FormKeyValueView>
+		<FormKeyValueView>
+			<template #key>{{ $t('pageLikedCount') }}</template>
+			<template #value>{{ number(stats.pageLikedCount) }}</template>
+		</FormKeyValueView>
+		<FormKeyValueView>
+			<template #key>{{ $t('driveFilesCount') }}</template>
+			<template #value>{{ number(stats.driveFilesCount) }}</template>
+		</FormKeyValueView>
+		<FormKeyValueView>
+			<template #key>{{ $t('driveUsage') }}</template>
+			<template #value>{{ bytes(stats.driveUsage) }}</template>
+		</FormKeyValueView>
+		<FormKeyValueView>
+			<template #key>{{ $t('reversiCount') }}</template>
+			<template #value>{{ number(stats.reversiCount) }}</template>
+		</FormKeyValueView>
+	</FormGroup>
+
+	<FormGroup>
+		<template #label>{{ $t('other') }}</template>
+		<FormKeyValueView>
+			<template #key>emailVerified</template>
+			<template #value>{{ $store.state.i.emailVerified ? $t('yes') : $t('no') }}</template>
+		</FormKeyValueView>
+		<FormKeyValueView>
+			<template #key>twoFactorEnabled</template>
+			<template #value>{{ $store.state.i.twoFactorEnabled ? $t('yes') : $t('no') }}</template>
+		</FormKeyValueView>
+		<FormKeyValueView>
+			<template #key>securityKeys</template>
+			<template #value>{{ $store.state.i.securityKeys ? $t('yes') : $t('no') }}</template>
+		</FormKeyValueView>
+		<FormKeyValueView>
+			<template #key>usePasswordLessLogin</template>
+			<template #value>{{ $store.state.i.usePasswordLessLogin ? $t('yes') : $t('no') }}</template>
+		</FormKeyValueView>
+		<FormKeyValueView>
+			<template #key>isModerator</template>
+			<template #value>{{ $store.state.i.isModerator ? $t('yes') : $t('no') }}</template>
+		</FormKeyValueView>
+		<FormKeyValueView>
+			<template #key>isAdmin</template>
+			<template #value>{{ $store.state.i.isAdmin ? $t('yes') : $t('no') }}</template>
+		</FormKeyValueView>
+	</FormGroup>
+</FormBase>
+</template>
+
+<script lang="ts">
+import { defineAsyncComponent, defineComponent } from 'vue';
+import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
+import FormSwitch from '@/components/form/switch.vue';
+import FormSelect from '@/components/form/select.vue';
+import FormLink from '@/components/form/link.vue';
+import FormBase from '@/components/form/base.vue';
+import FormGroup from '@/components/form/group.vue';
+import FormButton from '@/components/form/button.vue';
+import FormKeyValueView from '@/components/form/key-value-view.vue';
+import * as os from '@/os';
+import number from '@/filters/number';
+import bytes from '@/filters/bytes';
+
+export default defineComponent({
+	components: {
+		FormBase,
+		FormSelect,
+		FormSwitch,
+		FormButton,
+		FormLink,
+		FormGroup,
+		FormKeyValueView,
+	},
+
+	emits: ['info'],
+	
+	data() {
+		return {
+			INFO: {
+				title: this.$t('accountInfo'),
+				icon: faInfoCircle
+			},
+			stats: null
+		}
+	},
+
+	mounted() {
+		this.$emit('info', this.INFO);
+
+		os.api('users/stats', {
+			userId: this.$store.state.i.id
+		}).then(stats => {
+			this.stats = stats;
+		});
+	},
+
+	methods: {
+		number,
+		bytes,
+	}
+});
+</script>
diff --git a/src/client/pages/settings/api.vue b/src/client/pages/settings/api.vue
index f4cebbee36..8e5e4fbc66 100644
--- a/src/client/pages/settings/api.vue
+++ b/src/client/pages/settings/api.vue
@@ -1,26 +1,27 @@
 <template>
-<div>
-	<div class="_section">
-		<div class="_content">
-			<MkButton @click="generateToken">{{ $t('generateAccessToken') }}</MkButton>
-		</div>
-	</div>
-	<div class="_section">
-		<MkA to="/api-console" :behavior="isDesktop ? 'window' : null">API console</MkA>
-	</div>
-</div>
+<FormBase>
+	<FormButton @click="generateToken" primary>{{ $t('generateAccessToken') }}</FormButton>
+	<FormLink to="/settings/apps">{{ $t('manageAccessTokens') }}</FormLink>
+	<FormLink to="/api-console" :behavior="isDesktop ? 'window' : null">API console</FormLink>
+</FormBase>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faKey } from '@fortawesome/free-solid-svg-icons';
-import MkButton from '@/components/ui/button.vue';
-import MkInput from '@/components/ui/input.vue';
+import FormSwitch from '@/components/form/switch.vue';
+import FormSelect from '@/components/form/select.vue';
+import FormLink from '@/components/form/link.vue';
+import FormBase from '@/components/form/base.vue';
+import FormGroup from '@/components/form/group.vue';
+import FormButton from '@/components/form/button.vue';
 import * as os from '@/os';
 
 export default defineComponent({
 	components: {
-		MkButton, MkInput
+		FormBase,
+		FormButton,
+		FormLink,
 	},
 
 	emits: ['info'],
diff --git a/src/client/pages/apps.vue b/src/client/pages/settings/apps.vue
similarity index 63%
rename from src/client/pages/apps.vue
rename to src/client/pages/settings/apps.vue
index f9dd0a3584..724a2e8d1f 100644
--- a/src/client/pages/apps.vue
+++ b/src/client/pages/settings/apps.vue
@@ -1,6 +1,6 @@
 <template>
-<div>
-	<MkPagination :pagination="pagination" class="bfomjevm" ref="list">
+<FormBase>
+	<FormPagination :pagination="pagination" ref="list">
 		<template #empty>
 			<div class="_fullinfo">
 				<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
@@ -8,8 +8,8 @@
 			</div>
 		</template>
 		<template #default="{items}">
-			<div class="token _panel" v-for="token in items" :key="token.id">
-				<img class="icon" :src="token.iconUrl" alt=""/>
+			<div class="_formPanel bfomjevm" v-for="token in items" :key="token.id">
+				<img class="icon" :src="token.iconUrl" alt="" v-if="token.iconUrl"/>
 				<div class="body">
 					<div class="name">{{ token.name }}</div>
 					<div class="description">{{ token.description }}</div>
@@ -33,21 +33,29 @@
 				</div>
 			</div>
 		</template>
-	</MkPagination>
-</div>
+	</FormPagination>
+</FormBase>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faTrashAlt, faPlug } from '@fortawesome/free-solid-svg-icons';
-import MkPagination from '@/components/ui/pagination.vue';
+import FormPagination from '@/components/form/pagination.vue';
+import FormSelect from '@/components/form/select.vue';
+import FormLink from '@/components/form/link.vue';
+import FormBase from '@/components/form/base.vue';
+import FormGroup from '@/components/form/group.vue';
+import FormButton from '@/components/form/button.vue';
 import * as os from '@/os';
 
 export default defineComponent({
 	components: {
-		MkPagination
+		FormBase,
+		FormPagination,
 	},
 
+	emits: ['info'],
+
 	data() {
 		return {
 			INFO: {
@@ -65,6 +73,10 @@ export default defineComponent({
 		};
 	},
 
+	mounted() {
+		this.$emit('info', this.INFO);
+	},
+
 	methods: {
 		revoke(token) {
 			os.api('i/revoke-token', { tokenId: token.id }).then(() => {
@@ -77,26 +89,24 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .bfomjevm {
-	> .token {
-		display: flex;
-		padding: 16px;
+	display: flex;
+	padding: 16px;
 
-		> .icon {
-			display: block;
-			flex-shrink: 0;
-			margin: 0 12px 0 0;
-			width: 50px;
-			height: 50px;
-			border-radius: 8px;
-		}
+	> .icon {
+		display: block;
+		flex-shrink: 0;
+		margin: 0 12px 0 0;
+		width: 50px;
+		height: 50px;
+		border-radius: 8px;
+	}
 
-		> .body {
-			width: calc(100% - 62px);
-			position: relative;
+	> .body {
+		width: calc(100% - 62px);
+		position: relative;
 
-			> .name {
-				font-weight: bold;
-			}
+		> .name {
+			font-weight: bold;
 		}
 	}
 }
diff --git a/src/client/pages/settings/deck.vue b/src/client/pages/settings/deck.vue
new file mode 100644
index 0000000000..2eb2f60cba
--- /dev/null
+++ b/src/client/pages/settings/deck.vue
@@ -0,0 +1,90 @@
+<template>
+<FormBase>
+
+	<section class="_card _vMargin">
+		<div class="_title"><Fa :icon="faColumns"/> </div>
+		<div class="_content">
+			<div>{{ $t('defaultNavigationBehaviour') }}</div>
+			<MkSwitch v-model:value="deckNavWindow">{{ $t('openInWindow') }}</MkSwitch>
+		</div>
+		<div class="_content">
+			<MkSwitch v-model:value="deckAlwaysShowMainColumn">
+				{{ $t('_deck.alwaysShowMainColumn') }}
+			</MkSwitch>
+		</div>
+		<div class="_content">
+			<div>{{ $t('_deck.columnAlign') }}</div>
+			<MkRadio v-model="deckColumnAlign" value="left">{{ $t('left') }}</MkRadio>
+			<MkRadio v-model="deckColumnAlign" value="center">{{ $t('center') }}</MkRadio>
+		</div>
+	</section>
+
+</FormBase>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { faImage, faCog, faColumns } from '@fortawesome/free-solid-svg-icons';
+import MkButton from '@/components/ui/button.vue';
+import MkSwitch from '@/components/ui/switch.vue';
+import MkSelect from '@/components/ui/select.vue';
+import MkRadio from '@/components/ui/radio.vue';
+import MkRadios from '@/components/ui/radios.vue';
+import MkRange from '@/components/ui/range.vue';
+import FormSwitch from '@/components/form/switch.vue';
+import FormSelect from '@/components/form/select.vue';
+import FormRadios from '@/components/form/radios.vue';
+import FormBase from '@/components/form/base.vue';
+import FormGroup from '@/components/form/group.vue';
+import { clientDb, set } from '@/db';
+import * as os from '@/os';
+
+export default defineComponent({
+	components: {
+		MkButton,
+		MkSwitch,
+		MkSelect,
+		MkRadio,
+		MkRadios,
+		MkRange,
+		FormSwitch,
+		FormSelect,
+		FormRadios,
+		FormBase,
+		FormGroup,
+	},
+
+	emits: ['info'],
+
+	data() {
+		return {
+			INFO: {
+				title: this.$t('deck'),
+				icon: faColumns
+			},
+			faImage, faCog,
+		}
+	},
+
+	computed: {
+		deckNavWindow: {
+			get() { return this.$store.state.device.deckNavWindow; },
+			set(value) { this.$store.commit('device/set', { key: 'deckNavWindow', value }); }
+		},
+
+		deckAlwaysShowMainColumn: {
+			get() { return this.$store.state.device.deckAlwaysShowMainColumn; },
+			set(value) { this.$store.commit('device/set', { key: 'deckAlwaysShowMainColumn', value }); }
+		},
+
+		deckColumnAlign: {
+			get() { return this.$store.state.device.deckColumnAlign; },
+			set(value) { this.$store.commit('device/set', { key: 'deckColumnAlign', value }); }
+		},
+	},
+
+	mounted() {
+		this.$emit('info', this.INFO);
+	},
+});
+</script>
diff --git a/src/client/pages/settings/email-address.vue b/src/client/pages/settings/email-address.vue
new file mode 100644
index 0000000000..7ff89d7910
--- /dev/null
+++ b/src/client/pages/settings/email-address.vue
@@ -0,0 +1,71 @@
+<template>
+<FormBase>
+	<FormGroup>
+		<FormInput v-model:value="emailAddress" type="email">
+			{{ $t('emailAddress') }}
+			<template #desc v-if="$store.state.i.email && !$store.state.i.emailVerified">{{ $t('verificationEmailSent') }}</template>
+			<template #desc v-else-if="emailAddress === $store.state.i.email && $store.state.i.emailVerified">{{ $t('emailVerified') }}</template>
+		</FormInput>
+	</FormGroup>
+	<FormButton @click="save" primary>{{ $t('save') }}</FormButton>
+</FormBase>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { faCog } from '@fortawesome/free-solid-svg-icons';
+import { faBell, faEnvelope } from '@fortawesome/free-regular-svg-icons';
+import FormButton from '@/components/form/button.vue';
+import FormInput from '@/components/form/input.vue';
+import FormBase from '@/components/form/base.vue';
+import FormGroup from '@/components/form/group.vue';
+import * as os from '@/os';
+
+export default defineComponent({
+	components: {
+		FormBase,
+		FormInput,
+		FormButton,
+		FormGroup,
+	},
+
+	emits: ['info'],
+	
+	data() {
+		return {
+			INFO: {
+				title: this.$t('emailAddress'),
+				icon: faEnvelope
+			},
+			emailAddress: null,
+			code: null,
+			faCog
+		}
+	},
+
+	created() {
+		this.emailAddress = this.$store.state.i.email;
+	},
+
+	mounted() {
+		this.$emit('info', this.INFO);
+	},
+
+	methods: {
+		save() {
+			os.dialog({
+				title: this.$t('password'),
+				input: {
+					type: 'password'
+				}
+			}).then(({ canceled, result: password }) => {
+				if (canceled) return;
+				os.api('i/update-email', {
+					password: password,
+					email: this.emailAddress,
+				});
+			});
+		}
+	}
+});
+</script>
diff --git a/src/client/pages/settings/email.vue b/src/client/pages/settings/email.vue
new file mode 100644
index 0000000000..f72ee29a97
--- /dev/null
+++ b/src/client/pages/settings/email.vue
@@ -0,0 +1,52 @@
+<template>
+<FormBase>
+	<FormGroup>
+		<template #label>{{ $t('emailAddress') }}</template>
+		<FormLink to="/settings/email/address">
+			<template v-if="$store.state.i.email && !$store.state.i.emailVerified" #icon><Fa :icon="faExclamationTriangle" style="color: var(--warn);"/></template>
+			<template v-else-if="$store.state.i.email && $store.state.i.emailVerified" #icon><Fa :icon="faCheck" style="color: var(--success);"/></template>
+			{{ $store.state.i.email || $t('notSet') }}
+		</FormLink>
+	</FormGroup>
+</FormBase>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { faCog, faExclamationTriangle, faCheck } from '@fortawesome/free-solid-svg-icons';
+import { faBell, faEnvelope } from '@fortawesome/free-regular-svg-icons';
+import FormButton from '@/components/form/button.vue';
+import FormLink from '@/components/form/link.vue';
+import FormBase from '@/components/form/base.vue';
+import FormGroup from '@/components/form/group.vue';
+import * as os from '@/os';
+
+export default defineComponent({
+	components: {
+		FormBase,
+		FormLink,
+		FormButton,
+		FormGroup,
+	},
+
+	emits: ['info'],
+	
+	data() {
+		return {
+			INFO: {
+				title: this.$t('email'),
+				icon: faEnvelope
+			},
+			faCog, faExclamationTriangle, faCheck
+		}
+	},
+
+	mounted() {
+		this.$emit('info', this.INFO);
+	},
+
+	methods: {
+
+	}
+});
+</script>
diff --git a/src/client/pages/settings/general.vue b/src/client/pages/settings/general.vue
index c88c573ae6..7c2905fdeb 100644
--- a/src/client/pages/settings/general.vue
+++ b/src/client/pages/settings/general.vue
@@ -1,109 +1,110 @@
 <template>
-<div class="">
-	<section class="_card _vMargin">
-		<div class="_title"><Fa :icon="faCog"/> {{ $t('general') }}</div>
-		<div class="_content">
-			<MkRadios v-model="serverDisconnectedBehavior">
-				<template #desc>{{ $t('whenServerDisconnected') }}</template>
-				<option value="reload">{{ $t('_serverDisconnectedBehavior.reload') }}</option>
-				<option value="dialog">{{ $t('_serverDisconnectedBehavior.dialog') }}</option>
-				<option value="quiet">{{ $t('_serverDisconnectedBehavior.quiet') }}</option>
-			</MkRadios>
-			<MkSwitch v-model:value="imageNewTab">{{ $t('openImageInNewTab') }}</MkSwitch>
-			<MkSwitch v-model:value="showFixedPostForm">{{ $t('showFixedPostForm') }}</MkSwitch>
-			<MkSwitch v-model:value="enableInfiniteScroll">{{ $t('enableInfiniteScroll') }}</MkSwitch>
-			<MkSwitch v-model:value="disablePagesScript">{{ $t('disablePagesScript') }}</MkSwitch>
-			<MkSelect v-model:value="lang">
-				<template #label>{{ $t('uiLanguage') }}</template>
-				<option v-for="x in langs" :value="x[0]" :key="x[0]">{{ x[1] }}</option>
-			</MkSelect>
-		</div>
-	</section>
+<FormBase>
+	<FormSwitch v-model:value="showFixedPostForm">{{ $t('showFixedPostForm') }}</FormSwitch>
 
-	<section class="_card _vMargin">
-		<div class="_title"><Fa :icon="faCog"/> {{ $t('defaultNavigationBehaviour') }}</div>
-		<div class="_content">
-			<MkSwitch v-model:value="defaultSideView">{{ $t('openInSideView') }}</MkSwitch>
-		</div>
-		<div class="_content">
-			<MkRadios v-model="chatOpenBehavior">
-				<template #desc>{{ $t('chatOpenBehavior') }}</template>
-				<option value="page">{{ $t('showInPage') }}</option>
-				<option value="window">{{ $t('openInWindow') }}</option>
-				<option value="popout">{{ $t('popout') }}</option>
-			</MkRadios>
-		</div>
-	</section>
+	<FormSelect v-model:value="lang">
+		<template #label>{{ $t('uiLanguage') }}</template>
+		<option v-for="x in langs" :value="x[0]" :key="x[0]">{{ x[1] }}</option>
+		<template #caption>
+			<i18n-t keypath="i18nInfo" tag="span">
+				<template #link>
+					<MkLink url="https://crowdin.com/project/misskey">Crowdin</MkLink>
+				</template>
+			</i18n-t>
+		</template>
+	</FormSelect>
 
-	<section class="_card _vMargin">
-		<div class="_title"><Fa :icon="faCog"/> {{ $t('appearance') }}</div>
-		<div class="_content">
-			<MkSwitch v-model:value="disableAnimatedMfm">{{ $t('disableAnimatedMfm') }}</MkSwitch>
-			<MkSwitch v-model:value="reduceAnimation">{{ $t('reduceUiAnimation') }}</MkSwitch>
-			<MkSwitch v-model:value="useBlurEffectForModal">{{ $t('useBlurEffectForModal') }}</MkSwitch>
-			<MkSwitch v-model:value="useOsNativeEmojis">
-				{{ $t('useOsNativeEmojis') }}
-				<template #desc><Mfm text="🍮🍦🍭🍩🍰🍫🍬🥞🍪"/></template>
-			</MkSwitch>
-			<MkRadios v-model="fontSize">
-				<template #desc>{{ $t('fontSize') }}</template>
-				<option value="small"><span style="font-size: 14px;">Aa</span></option>
-				<option :value="null"><span style="font-size: 16px;">Aa</span></option>
-				<option value="large"><span style="font-size: 18px;">Aa</span></option>
-				<option value="veryLarge"><span style="font-size: 20px;">Aa</span></option>
-			</MkRadios>
-			<MkRadios v-model="instanceTicker">
-				<template #desc>{{ $t('instanceTicker') }}</template>
-				<option value="none">{{ $t('_instanceTicker.none') }}</option>
-				<option value="remote">{{ $t('_instanceTicker.remote') }}</option>
-				<option value="always">{{ $t('_instanceTicker.always') }}</option>
-			</MkRadios>
-		</div>
-	</section>
+	<FormGroup>
+		<template #label>{{ $t('behavior') }}</template>
+		<FormSwitch v-model:value="imageNewTab">{{ $t('openImageInNewTab') }}</FormSwitch>
+		<FormSwitch v-model:value="enableInfiniteScroll">{{ $t('enableInfiniteScroll') }}</FormSwitch>
+		<FormSwitch v-model:value="disablePagesScript">{{ $t('disablePagesScript') }}</FormSwitch>
+	</FormGroup>
 
-	<section class="_card _vMargin">
-		<div class="_title"><Fa :icon="faColumns"/> {{ $t('deck') }}</div>
-		<div class="_content">
-			<div>{{ $t('defaultNavigationBehaviour') }}</div>
-			<MkSwitch v-model:value="deckNavWindow">{{ $t('openInWindow') }}</MkSwitch>
-		</div>
-		<div class="_content">
-			<MkSwitch v-model:value="deckAlwaysShowMainColumn">
-				{{ $t('_deck.alwaysShowMainColumn') }}
-			</MkSwitch>
-		</div>
-		<div class="_content">
-			<div>{{ $t('_deck.columnAlign') }}</div>
-			<MkRadio v-model="deckColumnAlign" value="left">{{ $t('left') }}</MkRadio>
-			<MkRadio v-model="deckColumnAlign" value="center">{{ $t('center') }}</MkRadio>
-		</div>
-	</section>
+	<FormSelect v-model:value="serverDisconnectedBehavior">
+		<template #label>{{ $t('whenServerDisconnected') }}</template>
+		<option value="reload">{{ $t('_serverDisconnectedBehavior.reload') }}</option>
+		<option value="dialog">{{ $t('_serverDisconnectedBehavior.dialog') }}</option>
+		<option value="quiet">{{ $t('_serverDisconnectedBehavior.quiet') }}</option>
+	</FormSelect>
 
-	<MkButton @click="cacheClear()" primary style="margin: var(--margin) auto;">{{ $t('cacheClear') }}</MkButton>
-</div>
+	<FormGroup>
+		<template #label>{{ $t('appearance') }}</template>
+		<FormSwitch v-model:value="disableAnimatedMfm">{{ $t('disableAnimatedMfm') }}</FormSwitch>
+		<FormSwitch v-model:value="reduceAnimation">{{ $t('reduceUiAnimation') }}</FormSwitch>
+		<FormSwitch v-model:value="useBlurEffectForModal">{{ $t('useBlurEffectForModal') }}</FormSwitch>
+		<FormSwitch v-model:value="useOsNativeEmojis">{{ $t('useOsNativeEmojis') }}
+			<div><Mfm text="🍮🍦🍭🍩🍰🍫🍬🥞🍪"/></div>
+		</FormSwitch>
+		<FormSwitch v-model:value="loadRawImages">{{ $t('loadRawImages') }}</FormSwitch>
+		<FormSwitch v-model:value="disableShowingAnimatedImages">{{ $t('disableShowingAnimatedImages') }}</FormSwitch>
+	</FormGroup>
+
+	<FormRadios v-model="fontSize">
+		<template #desc>{{ $t('fontSize') }}</template>
+		<option value="small"><span style="font-size: 14px;">Aa</span></option>
+		<option :value="null"><span style="font-size: 16px;">Aa</span></option>
+		<option value="large"><span style="font-size: 18px;">Aa</span></option>
+		<option value="veryLarge"><span style="font-size: 20px;">Aa</span></option>
+	</FormRadios>
+
+	<FormSelect v-model:value="instanceTicker">
+		<template #label>{{ $t('instanceTicker') }}</template>
+		<option value="none">{{ $t('_instanceTicker.none') }}</option>
+		<option value="remote">{{ $t('_instanceTicker.remote') }}</option>
+		<option value="always">{{ $t('_instanceTicker.always') }}</option>
+	</FormSelect>
+
+	<FormSelect v-model:value="nsfw">
+		<template #label>{{ $t('nsfw') }}</template>
+		<option value="respect">{{ $t('_nsfw.respect') }}</option>
+		<option value="ignore">{{ $t('_nsfw.ignore') }}</option>
+		<option value="force">{{ $t('_nsfw.force') }}</option>
+	</FormSelect>
+
+	<FormGroup>
+		<template #label>{{ $t('defaultNavigationBehaviour') }}</template>
+		<FormSwitch v-model:value="defaultSideView">{{ $t('openInSideView') }}</FormSwitch>
+	</FormGroup>
+
+	<FormSelect v-model:value="chatOpenBehavior">
+		<template #label>{{ $t('chatOpenBehavior') }}</template>
+		<option value="page">{{ $t('showInPage') }}</option>
+		<option value="window">{{ $t('openInWindow') }}</option>
+		<option value="popout">{{ $t('popout') }}</option>
+	</FormSelect>
+
+	<FormLink to="/settings/deck">{{ $t('deck') }}</FormLink>
+
+	<FormButton @click="cacheClear()" danger>{{ $t('cacheClear') }}</FormButton>
+</FormBase>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faImage, faCog, faColumns, faCogs } from '@fortawesome/free-solid-svg-icons';
-import MkButton from '@/components/ui/button.vue';
-import MkSwitch from '@/components/ui/switch.vue';
-import MkSelect from '@/components/ui/select.vue';
-import MkRadio from '@/components/ui/radio.vue';
-import MkRadios from '@/components/ui/radios.vue';
-import MkRange from '@/components/ui/range.vue';
+import FormSwitch from '@/components/form/switch.vue';
+import FormSelect from '@/components/form/select.vue';
+import FormRadios from '@/components/form/radios.vue';
+import FormBase from '@/components/form/base.vue';
+import FormGroup from '@/components/form/group.vue';
+import FormLink from '@/components/form/link.vue';
+import FormButton from '@/components/form/button.vue';
+import MkLink from '@/components/link.vue';
 import { langs } from '@/config';
 import { clientDb, set } from '@/db';
 import * as os from '@/os';
 
 export default defineComponent({
 	components: {
-		MkButton,
-		MkSwitch,
-		MkSelect,
-		MkRadio,
-		MkRadios,
-		MkRange,
+		MkLink,
+		FormSwitch,
+		FormSelect,
+		FormRadios,
+		FormBase,
+		FormGroup,
+		FormLink,
+		FormButton,
 	},
 
 	emits: ['info'],
@@ -167,11 +168,6 @@ export default defineComponent({
 			set(value) { this.$store.commit('device/set', { key: 'defaultSideView', value }); }
 		},
 
-		deckNavWindow: {
-			get() { return this.$store.state.device.deckNavWindow; },
-			set(value) { this.$store.commit('device/set', { key: 'deckNavWindow', value }); }
-		},
-
 		chatOpenBehavior: {
 			get() { return this.$store.state.device.chatOpenBehavior; },
 			set(value) { this.$store.commit('device/set', { key: 'chatOpenBehavior', value }); }
@@ -182,20 +178,25 @@ export default defineComponent({
 			set(value) { this.$store.commit('device/set', { key: 'instanceTicker', value }); }
 		},
 
+		loadRawImages: {
+			get() { return this.$store.state.device.loadRawImages; },
+			set(value) { this.$store.commit('device/set', { key: 'loadRawImages', value }); }
+		},
+
+		disableShowingAnimatedImages: {
+			get() { return this.$store.state.device.disableShowingAnimatedImages; },
+			set(value) { this.$store.commit('device/set', { key: 'disableShowingAnimatedImages', value }); }
+		},
+
+		nsfw: {
+			get() { return this.$store.state.device.nsfw; },
+			set(value) { this.$store.commit('device/set', { key: 'nsfw', value }); }
+		},
+
 		enableInfiniteScroll: {
 			get() { return this.$store.state.device.enableInfiniteScroll; },
 			set(value) { this.$store.commit('device/set', { key: 'enableInfiniteScroll', value }); }
 		},
-
-		deckAlwaysShowMainColumn: {
-			get() { return this.$store.state.device.deckAlwaysShowMainColumn; },
-			set(value) { this.$store.commit('device/set', { key: 'deckAlwaysShowMainColumn', value }); }
-		},
-
-		deckColumnAlign: {
-			get() { return this.$store.state.device.deckColumnAlign; },
-			set(value) { this.$store.commit('device/set', { key: 'deckColumnAlign', value }); }
-		},
 	},
 
 	watch: {
diff --git a/src/client/pages/settings/index.vue b/src/client/pages/settings/index.vue
index 5451c8616b..a42a4614cc 100644
--- a/src/client/pages/settings/index.vue
+++ b/src/client/pages/settings/index.vue
@@ -1,35 +1,36 @@
 <template>
 <div class="vvcocwet" :class="{ wide: !narrow }" ref="el">
-	<div class="nav" v-if="!narrow || page == null">
-		<div class="menu">
-			<div class="label">{{ $t('basicSettings') }}</div>
-			<MkA class="item" :class="{ active: page === 'profile' }" replace to="/settings/profile"><Fa :icon="faUser" fixed-width class="icon"/>{{ $t('profile') }}</MkA>
-			<MkA class="item" :class="{ active: page === 'privacy' }" replace to="/settings/privacy"><Fa :icon="faLockOpen" fixed-width class="icon"/>{{ $t('privacy') }}</MkA>
-			<MkA class="item" :class="{ active: page === 'reaction' }" replace to="/settings/reaction"><Fa :icon="faLaugh" fixed-width class="icon"/>{{ $t('reaction') }}</MkA>
-			<MkA class="item" :class="{ active: page === 'notifications' }" replace to="/settings/notifications"><Fa :icon="faBell" fixed-width class="icon"/>{{ $t('notifications') }}</MkA>
-			<MkA class="item" :class="{ active: page === 'integration' }" replace to="/settings/integration"><Fa :icon="faShareAlt" fixed-width class="icon"/>{{ $t('integration') }}</MkA>
-			<MkA class="item" :class="{ active: page === 'security' }" replace to="/settings/security"><Fa :icon="faLock" fixed-width class="icon"/>{{ $t('security') }}</MkA>
-		</div>
-		<div class="menu">
-			<div class="label">{{ $t('clientSettings') }}</div>
-			<MkA class="item" :class="{ active: page === 'general' }" replace to="/settings/general"><Fa :icon="faCogs" fixed-width class="icon"/>{{ $t('general') }}</MkA>
-			<MkA class="item" :class="{ active: page === 'theme' }" replace to="/settings/theme"><Fa :icon="faPalette" fixed-width class="icon"/>{{ $t('theme') }}</MkA>
-			<MkA class="item" :class="{ active: page === 'sidebar' }" replace to="/settings/sidebar"><Fa :icon="faListUl" fixed-width class="icon"/>{{ $t('sidebar') }}</MkA>
-			<MkA class="item" :class="{ active: page === 'sounds' }" replace to="/settings/sounds"><Fa :icon="faMusic" fixed-width class="icon"/>{{ $t('sounds') }}</MkA>
-			<MkA class="item" :class="{ active: page === 'plugins' }" replace to="/settings/plugins"><Fa :icon="faPlug" fixed-width class="icon"/>{{ $t('plugins') }}</MkA>
-		</div>
-		<div class="menu">
-			<div class="label">{{ $t('otherSettings') }}</div>
-			<MkA class="item" :class="{ active: page === 'import-export' }" replace to="/settings/import-export"><Fa :icon="faBoxes" fixed-width class="icon"/>{{ $t('importAndExport') }}</MkA>
-			<MkA class="item" :class="{ active: page === 'mute-block' }" replace to="/settings/mute-block"><Fa :icon="faBan" fixed-width class="icon"/>{{ $t('muteAndBlock') }}</MkA>
-			<MkA class="item" :class="{ active: page === 'word-mute' }" replace to="/settings/word-mute"><Fa :icon="faCommentSlash" fixed-width class="icon"/>{{ $t('wordMute') }}</MkA>
-			<MkA class="item" :class="{ active: page === 'api' }" replace to="/settings/api"><Fa :icon="faKey" fixed-width class="icon"/>API</MkA>
-			<MkA class="item" :class="{ active: page === 'other' }" replace to="/settings/other"><Fa :icon="faEllipsisH" fixed-width class="icon"/>{{ $t('other') }}</MkA>
-		</div>
-		<div class="menu">
-			<button class="_button item" @click="logout">{{ $t('logout') }}</button>
-		</div>
-	</div>
+	<FormBase class="nav" v-if="!narrow || page == null" :force-wide="!narrow">
+		<FormGroup>
+			<template #label>{{ $t('basicSettings') }}</template>
+			<FormLink :active="page === 'profile'" replace to="/settings/profile"><template #icon><Fa :icon="faUser"/></template>{{ $t('profile') }}</FormLink>
+			<FormLink :active="page === 'privacy'" replace to="/settings/privacy"><template #icon><Fa :icon="faLockOpen"/></template>{{ $t('privacy') }}</FormLink>
+			<FormLink :active="page === 'reaction'" replace to="/settings/reaction"><template #icon><Fa :icon="faLaugh"/></template>{{ $t('reaction') }}</FormLink>
+			<FormLink :active="page === 'notifications'" replace to="/settings/notifications"><template #icon><Fa :icon="faBell"/></template>{{ $t('notifications') }}</FormLink>
+			<FormLink :active="page === 'email'" replace to="/settings/email"><template #icon><Fa :icon="faEnvelope"/></template>{{ $t('email') }}</FormLink>
+			<FormLink :active="page === 'integration'" replace to="/settings/integration"><template #icon><Fa :icon="faShareAlt"/></template>{{ $t('integration') }}</FormLink>
+			<FormLink :active="page === 'security'" replace to="/settings/security"><template #icon><Fa :icon="faLock"/></template>{{ $t('security') }}</FormLink>
+		</FormGroup>
+		<FormGroup>
+			<template #label>{{ $t('clientSettings') }}</template>
+			<FormLink :active="page === 'general'" replace to="/settings/general"><template #icon><Fa :icon="faCogs"/></template>{{ $t('general') }}</FormLink>
+			<FormLink :active="page === 'theme'" replace to="/settings/theme"><template #icon><Fa :icon="faPalette"/></template>{{ $t('theme') }}</FormLink>
+			<FormLink :active="page === 'sidebar'" replace to="/settings/sidebar"><template #icon><Fa :icon="faListUl"/></template>{{ $t('sidebar') }}</FormLink>
+			<FormLink :active="page === 'sounds'" replace to="/settings/sounds"><template #icon><Fa :icon="faMusic"/></template>{{ $t('sounds') }}</FormLink>
+			<FormLink :active="page === 'plugins'" replace to="/settings/plugins"><template #icon><Fa :icon="faPlug"/></template>{{ $t('plugins') }}</FormLink>
+		</FormGroup>
+		<FormGroup>
+			<template #label>{{ $t('otherSettings') }}</template>
+			<FormLink :active="page === 'import-export'" replace to="/settings/import-export"><template #icon><Fa :icon="faBoxes"/></template>{{ $t('importAndExport') }}</FormLink>
+			<FormLink :active="page === 'mute-block'" replace to="/settings/mute-block"><template #icon><Fa :icon="faBan"/></template>{{ $t('muteAndBlock') }}</FormLink>
+			<FormLink :active="page === 'word-mute'" replace to="/settings/word-mute"><template #icon><Fa :icon="faCommentSlash"/></template>{{ $t('wordMute') }}</FormLink>
+			<FormLink :active="page === 'api'" replace to="/settings/api"><template #icon><Fa :icon="faKey"/></template>API</FormLink>
+			<FormLink :active="page === 'other'" replace to="/settings/other"><template #icon><Fa :icon="faEllipsisH"/></template>{{ $t('other') }}</FormLink>
+		</FormGroup>
+		<FormGroup>
+			<FormButton @click="logout" danger>{{ $t('logout') }}</FormButton>
+		</FormGroup>
+	</FormBase>
 	<div class="main">
 		<component :is="component" @info="onInfo"/>
 	</div>
@@ -37,13 +38,25 @@
 </template>
 
 <script lang="ts">
-import { computed, defineAsyncComponent, defineComponent, onMounted, ref } from 'vue';
+import { computed, defineAsyncComponent, defineComponent, nextTick, onMounted, ref, watch } from 'vue';
 import { faCog, faPalette, faPlug, faUser, faListUl, faLock, faCommentSlash, faMusic, faCogs, faEllipsisH, faBan, faShareAlt, faLockOpen, faKey, faBoxes } from '@fortawesome/free-solid-svg-icons';
-import { faLaugh, faBell } from '@fortawesome/free-regular-svg-icons';
+import { faLaugh, faBell, faEnvelope } from '@fortawesome/free-regular-svg-icons';
 import { store } from '@/store';
 import { i18n } from '@/i18n';
+import FormLink from '@/components/form/link.vue';
+import FormGroup from '@/components/form/group.vue';
+import FormBase from '@/components/form/base.vue';
+import FormButton from '@/components/form/button.vue';
+import { scroll } from '../../scripts/scroll';
 
 export default defineComponent({
+	components: {
+		FormBase,
+		FormLink,
+		FormGroup,
+		FormButton,
+	},
+
 	props: {
 		page: {
 			type: String,
@@ -72,21 +85,35 @@ export default defineComponent({
 				case 'word-mute': return defineAsyncComponent(() => import('./word-mute.vue'));
 				case 'integration': return defineAsyncComponent(() => import('./integration.vue'));
 				case 'security': return defineAsyncComponent(() => import('./security.vue'));
+				case '2fa': return defineAsyncComponent(() => import('./2fa.vue'));
 				case 'api': return defineAsyncComponent(() => import('./api.vue'));
+				case 'apps': return defineAsyncComponent(() => import('./apps.vue'));
 				case 'other': return defineAsyncComponent(() => import('./other.vue'));
 				case 'general': return defineAsyncComponent(() => import('./general.vue'));
+				case 'email': return defineAsyncComponent(() => import('./email.vue'));
+				case 'email/address': return defineAsyncComponent(() => import('./email-address.vue'));
 				case 'theme': return defineAsyncComponent(() => import('./theme.vue'));
+				case 'theme/install': return defineAsyncComponent(() => import('./theme.install.vue'));
+				case 'theme/manage': return defineAsyncComponent(() => import('./theme.manage.vue'));
 				case 'sidebar': return defineAsyncComponent(() => import('./sidebar.vue'));
 				case 'sounds': return defineAsyncComponent(() => import('./sounds.vue'));
+				case 'deck': return defineAsyncComponent(() => import('./deck.vue'));
 				case 'plugins': return defineAsyncComponent(() => import('./plugins.vue'));
 				case 'import-export': return defineAsyncComponent(() => import('./import-export.vue'));
+				case 'account-info': return defineAsyncComponent(() => import('./account-info.vue'));
 				case 'regedit': return defineAsyncComponent(() => import('./regedit.vue'));
 				default: return null;
 			}
 		});
 
+		watch(component, () => {
+			nextTick(() => {
+				scroll(el.value, 0);
+			});
+		});
+
 		onMounted(() => {
-			narrow.value = el.value.offsetWidth < 650;
+			narrow.value = el.value.offsetWidth < 1025;
 		});
 
 		return {
@@ -100,7 +127,7 @@ export default defineComponent({
 				store.dispatch('logout');
 				location.href = '/';
 			},
-			faPalette, faPlug, faUser, faListUl, faLock, faLaugh, faCommentSlash, faMusic, faBell, faCogs, faEllipsisH, faBan, faShareAlt, faLockOpen, faKey, faBoxes,
+			faPalette, faPlug, faUser, faListUl, faLock, faLaugh, faCommentSlash, faMusic, faBell, faCogs, faEllipsisH, faBan, faShareAlt, faLockOpen, faKey, faBoxes, faEnvelope,
 		};
 	},
 });
@@ -108,63 +135,19 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .vvcocwet {
-	> .nav {
-		> .menu {
-			margin: 16px 0;
-
-			> .label {
-				padding: 8px 32px;
-				font-size: 80%;
-				opacity: 0.7;
-			}
-
-			> .item {
-				display: block;
-				width: 100%;
-				box-sizing: border-box;
-				padding: 0 32px;
-				line-height: 40px;
-				white-space: nowrap;
-				overflow: hidden;
-				text-overflow: ellipsis;
-				//background: var(--panel);
-				//border-bottom: solid 1px var(--divider);
-				transition: padding 0.2s ease, color 0.1s ease;
-
-				&:first-of-type {
-					//border-top: solid 1px var(--divider);
-				}
-
-				&.active {
-					color: var(--accent);
-					padding-left: 42px;
-				}
-
-				&:hover {
-					text-decoration: none;
-					padding-left: 42px;
-				}
-
-				> .icon {
-					margin-right: 0.5em;
-				}
-			}
-		}
-	}
-
 	&.wide {
 		display: flex;
+		max-width: 1100px;
+		margin: 0 auto;
 
 		> .nav {
-			width: 30%;
-			max-width: 300px;
-			font-size: 0.95em;
-			border-right: solid 1px var(--divider);
+			width: 32%;
+			box-sizing: border-box;
+			border-right: solid 0.5px var(--divider);
 		}
 
 		> .main {
 			flex: 1;
-			padding: 32px;
 			--baseContentWidth: 100%;
 
 			::v-deep(._section) {
diff --git a/src/client/pages/settings/notifications.vue b/src/client/pages/settings/notifications.vue
index ff0c276398..d26a11ef78 100644
--- a/src/client/pages/settings/notifications.vue
+++ b/src/client/pages/settings/notifications.vue
@@ -1,29 +1,31 @@
 <template>
-<div>
-	<div class="_section">
-		<MkButton full primary @click="configure"><Fa :icon="faCog"/> {{ $t('notificationSetting') }}</MkButton>
-	</div>
-	<div class="_section">
-		<MkButton full @click="readAllNotifications">{{ $t('markAsReadAllNotifications') }}</MkButton>
-		<MkButton full @click="readAllUnreadNotes">{{ $t('markAsReadAllUnreadNotes') }}</MkButton>
-		<MkButton full @click="readAllMessagingMessages">{{ $t('markAsReadAllTalkMessages') }}</MkButton>
-	</div>
-</div>
+<FormBase>
+	<FormLink @click="configure">{{ $t('notificationSetting') }}</FormLink>
+	<FormGroup>
+		<FormButton @click="readAllNotifications">{{ $t('markAsReadAllNotifications') }}</FormButton>
+		<FormButton @click="readAllUnreadNotes">{{ $t('markAsReadAllUnreadNotes') }}</FormButton>
+		<FormButton @click="readAllMessagingMessages">{{ $t('markAsReadAllTalkMessages') }}</FormButton>
+	</FormGroup>
+</FormBase>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faCog } from '@fortawesome/free-solid-svg-icons';
 import { faBell } from '@fortawesome/free-regular-svg-icons';
-import MkButton from '@/components/ui/button.vue';
-import MkSwitch from '@/components/ui/switch.vue';
+import FormButton from '@/components/form/button.vue';
+import FormLink from '@/components/form/link.vue';
+import FormBase from '@/components/form/base.vue';
+import FormGroup from '@/components/form/group.vue';
 import { notificationTypes } from '../../../types';
 import * as os from '@/os';
 
 export default defineComponent({
 	components: {
-		MkButton,
-		MkSwitch,
+		FormBase,
+		FormLink,
+		FormButton,
+		FormGroup,
 	},
 
 	emits: ['info'],
diff --git a/src/client/pages/settings/other.vue b/src/client/pages/settings/other.vue
index 9c44d1b4f4..b3bab0e232 100644
--- a/src/client/pages/settings/other.vue
+++ b/src/client/pages/settings/other.vue
@@ -1,40 +1,43 @@
 <template>
-<div>
-	<div class="_section">
-		<div class="_card">
-			<div class="_content">
-				<MkSwitch v-model:value="$store.state.i.injectFeaturedNote" @update:value="onChangeInjectFeaturedNote">
-					{{ $t('showFeaturedNotesInTimeline') }}
-				</MkSwitch>
-			</div>
-		</div>
-	</div>
-	<div class="_section">
-		<MkSwitch v-model:value="debug" @update:value="changeDebug">
+<FormBase>
+	<FormSwitch :value="$store.state.i.injectFeaturedNote" @update:value="onChangeInjectFeaturedNote">
+		{{ $t('showFeaturedNotesInTimeline') }}
+	</FormSwitch>
+
+	<FormLink to="/settings/account-info">{{ $t('accountInfo') }}</FormLink>
+
+	<FormGroup>
+		<FormSwitch v-model:value="debug" @update:value="changeDebug">
 			DEBUG MODE
-		</MkSwitch>
-		<div v-if="debug">
-			<MkA to="/settings/regedit">RegEdit</MkA>
-			<MkButton @click="taskmanager">Task Manager</MkButton>
-		</div>
-	</div>
-</div>
+		</FormSwitch>
+		<template v-if="debug">
+			<FormLink to="/settings/regedit">RegEdit</FormLink>
+			<FormButton @click="taskmanager">Task Manager</FormButton>
+		</template>
+	</FormGroup>
+</FormBase>
 </template>
 
 <script lang="ts">
 import { defineAsyncComponent, defineComponent } from 'vue';
 import { faEllipsisH } from '@fortawesome/free-solid-svg-icons';
-import MkSelect from '@/components/ui/select.vue';
-import MkSwitch from '@/components/ui/switch.vue';
-import MkButton from '@/components/ui/button.vue';
+import FormSwitch from '@/components/form/switch.vue';
+import FormSelect from '@/components/form/select.vue';
+import FormLink from '@/components/form/link.vue';
+import FormBase from '@/components/form/base.vue';
+import FormGroup from '@/components/form/group.vue';
+import FormButton from '@/components/form/button.vue';
 import * as os from '@/os';
 import { debug } from '@/config';
 
 export default defineComponent({
 	components: {
-		MkSelect,
-		MkSwitch,
-		MkButton,
+		FormBase,
+		FormSelect,
+		FormSwitch,
+		FormButton,
+		FormLink,
+		FormGroup,
 	},
 
 	emits: ['info'],
diff --git a/src/client/pages/settings/privacy.vue b/src/client/pages/settings/privacy.vue
index 27a949836a..09db077502 100644
--- a/src/client/pages/settings/privacy.vue
+++ b/src/client/pages/settings/privacy.vue
@@ -1,36 +1,43 @@
 <template>
-<div class="_section">
-	<div class="_card">
-		<div class="_content">
-			<MkSwitch v-model:value="isLocked" @update:value="save()">{{ $t('makeFollowManuallyApprove') }}</MkSwitch>
-			<MkSwitch v-model:value="autoAcceptFollowed" v-if="isLocked" @update:value="save()">{{ $t('autoAcceptFollowed') }}</MkSwitch>
-		</div>
-		<div class="_content">
-			<MkSwitch v-model:value="rememberNoteVisibility" @update:value="save()">{{ $t('rememberNoteVisibility') }}</MkSwitch>
-			<MkSelect v-model:value="defaultNoteVisibility" style="margin-bottom: 8px;" v-if="!rememberNoteVisibility">
-				<template #label>{{ $t('defaultNoteVisibility') }}</template>
-				<option value="public">{{ $t('_visibility.public') }}</option>
-				<option value="home">{{ $t('_visibility.home') }}</option>
-				<option value="followers">{{ $t('_visibility.followers') }}</option>
-				<option value="specified">{{ $t('_visibility.specified') }}</option>
-			</MkSelect>
-			<MkSwitch v-model:value="defaultNoteLocalOnly" v-if="!rememberNoteVisibility">{{ $t('_visibility.localOnly') }}</MkSwitch>
-		</div>
-	</div>
-</div>
+<FormBase>
+	<FormGroup>
+		<FormSwitch v-model:value="isLocked" @update:value="save()">{{ $t('makeFollowManuallyApprove') }}</FormSwitch>
+		<FormSwitch v-model:value="autoAcceptFollowed" :disabled="!isLocked" @update:value="save()">{{ $t('autoAcceptFollowed') }}</FormSwitch>
+		<template #caption>{{ $t('lockedAccountInfo') }}</template>
+	</FormGroup>
+	<FormSwitch v-model:value="noCrawle" @update:value="save()">
+		{{ $t('noCrawle') }}
+		<template #desc>{{ $t('noCrawleDescription') }}</template>
+	</FormSwitch>
+	<FormSwitch v-model:value="rememberNoteVisibility" @update:value="save()">{{ $t('rememberNoteVisibility') }}</FormSwitch>
+	<FormGroup v-if="!rememberNoteVisibility">
+		<template #label>{{ $t('defaultNoteVisibility') }}</template>
+		<FormSelect v-model:value="defaultNoteVisibility">
+			<option value="public">{{ $t('_visibility.public') }}</option>
+			<option value="home">{{ $t('_visibility.home') }}</option>
+			<option value="followers">{{ $t('_visibility.followers') }}</option>
+			<option value="specified">{{ $t('_visibility.specified') }}</option>
+		</FormSelect>
+		<FormSwitch v-model:value="defaultNoteLocalOnly">{{ $t('_visibility.localOnly') }}</FormSwitch>
+	</FormGroup>
+</FormBase>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faLockOpen } from '@fortawesome/free-solid-svg-icons';
-import MkSelect from '@/components/ui/select.vue';
-import MkSwitch from '@/components/ui/switch.vue';
+import FormSwitch from '@/components/form/switch.vue';
+import FormSelect from '@/components/form/select.vue';
+import FormBase from '@/components/form/base.vue';
+import FormGroup from '@/components/form/group.vue';
 import * as os from '@/os';
 
 export default defineComponent({
 	components: {
-		MkSelect,
-		MkSwitch,
+		FormBase,
+		FormSelect,
+		FormGroup,
+		FormSwitch,
 	},
 
 	emits: ['info'],
@@ -43,6 +50,7 @@ export default defineComponent({
 			},
 			isLocked: false,
 			autoAcceptFollowed: false,
+			noCrawle: false,
 		}
 	},
 
@@ -66,6 +74,7 @@ export default defineComponent({
 	created() {
 		this.isLocked = this.$store.state.i.isLocked;
 		this.autoAcceptFollowed = this.$store.state.i.autoAcceptFollowed;
+		this.noCrawle = this.$store.state.i.noCrawle;
 	},
 
 	mounted() {
@@ -77,6 +86,7 @@ export default defineComponent({
 			os.api('i/update', {
 				isLocked: !!this.isLocked,
 				autoAcceptFollowed: !!this.autoAcceptFollowed,
+				noCrawle: !!this.noCrawle,
 			});
 		}
 	}
diff --git a/src/client/pages/settings/profile.vue b/src/client/pages/settings/profile.vue
index 6a523e08cf..4fc4783c49 100644
--- a/src/client/pages/settings/profile.vue
+++ b/src/client/pages/settings/profile.vue
@@ -1,79 +1,67 @@
 <template>
-<div class="_section">
-	<div class="llvierxe _card">
-		<div class="_title"><Fa :icon="faUser"/> {{ $t('profile') }}<small style="display: block; font-weight: normal; opacity: 0.6;">@{{ $store.state.i.username }}@{{ host }}</small></div>
-		<div class="_content">
-			<div class="header" :style="{ backgroundImage: $store.state.i.bannerUrl ? `url(${ $store.state.i.bannerUrl })` : null }" @click="changeBanner">
-				<MkAvatar class="avatar" :user="$store.state.i" :disable-preview="true" :disable-link="true" @click.stop="changeAvatar"/>
-			</div>
-		
-			<MkInput v-model:value="name" :max="30">
-				<span>{{ $t('_profile.name') }}</span>
-			</MkInput>
-
-			<MkTextarea v-model:value="description" :max="500">
-				<span>{{ $t('_profile.description') }}</span>
-				<template #desc>{{ $t('_profile.youCanIncludeHashtags') }}</template>
-			</MkTextarea>
-
-			<MkInput v-model:value="location">
-				<span>{{ $t('location') }}</span>
-				<template #prefix><Fa :icon="faMapMarkerAlt"/></template>
-			</MkInput>
-
-			<MkInput v-model:value="birthday" type="date">
-				<template #title>{{ $t('birthday') }}</template>
-				<template #prefix><Fa :icon="faBirthdayCake"/></template>
-			</MkInput>
-
-			<details class="fields">
-				<summary>{{ $t('_profile.metadata') }}</summary>
-				<div class="row">
-					<MkInput v-model:value="fieldName0">{{ $t('_profile.metadataLabel') }}</MkInput>
-					<MkInput v-model:value="fieldValue0">{{ $t('_profile.metadataContent') }}</MkInput>
-				</div>
-				<div class="row">
-					<MkInput v-model:value="fieldName1">{{ $t('_profile.metadataLabel') }}</MkInput>
-					<MkInput v-model:value="fieldValue1">{{ $t('_profile.metadataContent') }}</MkInput>
-				</div>
-				<div class="row">
-					<MkInput v-model:value="fieldName2">{{ $t('_profile.metadataLabel') }}</MkInput>
-					<MkInput v-model:value="fieldValue2">{{ $t('_profile.metadataContent') }}</MkInput>
-				</div>
-				<div class="row">
-					<MkInput v-model:value="fieldName3">{{ $t('_profile.metadataLabel') }}</MkInput>
-					<MkInput v-model:value="fieldValue3">{{ $t('_profile.metadataContent') }}</MkInput>
-				</div>
-			</details>
-
-			<MkSwitch v-model:value="isBot">{{ $t('flagAsBot') }}</MkSwitch>
-			<MkSwitch v-model:value="isCat">{{ $t('flagAsCat') }}</MkSwitch>
-		</div>
-		<div class="_footer">
-			<MkButton @click="save(true)" primary><Fa :icon="faSave"/> {{ $t('save') }}</MkButton>
-		</div>
+<FormBase class="llvierxe">
+	<div class="header _formItem" :style="{ backgroundImage: $store.state.i.bannerUrl ? `url(${ $store.state.i.bannerUrl })` : null }" @click="changeBanner">
+		<MkAvatar class="avatar" :user="$store.state.i" :disable-preview="true" :disable-link="true" @click.stop="changeAvatar"/>
 	</div>
-</div>
+
+	<FormInput v-model:value="name" :max="30">
+		<span>{{ $t('_profile.name') }}</span>
+	</FormInput>
+
+	<FormTextarea v-model:value="description" :max="500">
+		<span>{{ $t('_profile.description') }}</span>
+		<template #desc>{{ $t('_profile.youCanIncludeHashtags') }}</template>
+	</FormTextarea>
+
+	<FormInput v-model:value="location">
+		<span>{{ $t('location') }}</span>
+		<template #prefix><Fa :icon="faMapMarkerAlt"/></template>
+	</FormInput>
+
+	<FormInput v-model:value="birthday" type="date">
+		<span>{{ $t('birthday') }}</span>
+		<template #prefix><Fa :icon="faBirthdayCake"/></template>
+	</FormInput>
+
+	<FormGroup>
+		<FormButton @click="editMetadata" primary>{{ $t('_profile.metadataEdit') }}</FormButton>
+		<template #caption>{{ $t('_profile.metadataDescription') }}</template>
+	</FormGroup>
+
+	<FormSwitch v-model:value="isCat">{{ $t('flagAsCat') }}<template #desc>{{ $t('flagAsCatDescription') }}</template></FormSwitch>
+
+	<FormSwitch v-model:value="isBot">{{ $t('flagAsBot') }}<template #desc>{{ $t('flagAsBotDescription') }}</template></FormSwitch>
+
+	<FormSwitch v-model:value="alwaysMarkNsfw">{{ $t('alwaysMarkSensitive') }}</FormSwitch>
+
+	<FormButton @click="save(true)" primary><Fa :icon="faSave"/> {{ $t('save') }}</FormButton>
+</FormBase>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faUnlockAlt, faCogs, faUser, faMapMarkerAlt, faBirthdayCake } from '@fortawesome/free-solid-svg-icons';
 import { faSave } from '@fortawesome/free-regular-svg-icons';
-import MkButton from '@/components/ui/button.vue';
-import MkInput from '@/components/ui/input.vue';
-import MkTextarea from '@/components/ui/textarea.vue';
-import MkSwitch from '@/components/ui/switch.vue';
+import FormButton from '@/components/form/button.vue';
+import FormInput from '@/components/form/input.vue';
+import FormTextarea from '@/components/form/textarea.vue';
+import FormSwitch from '@/components/form/switch.vue';
+import FormTuple from '@/components/form/tuple.vue';
+import FormBase from '@/components/form/base.vue';
+import FormGroup from '@/components/form/group.vue';
 import { host } from '@/config';
 import { selectFile } from '@/scripts/select-file';
 import * as os from '@/os';
 
 export default defineComponent({
 	components: {
-		MkButton,
-		MkInput,
-		MkTextarea,
-		MkSwitch,
+		FormButton,
+		FormInput,
+		FormTextarea,
+		FormSwitch,
+		FormTuple,
+		FormBase,
+		FormGroup,
 	},
 	
 	emits: ['info'],
@@ -101,6 +89,7 @@ export default defineComponent({
 			bannerId: null,
 			isBot: false,
 			isCat: false,
+			alwaysMarkNsfw: false,
 			saving: false,
 			faSave, faUnlockAlt, faCogs, faUser, faMapMarkerAlt, faBirthdayCake
 		}
@@ -115,6 +104,7 @@ export default defineComponent({
 		this.bannerId = this.$store.state.i.bannerId;
 		this.isBot = this.$store.state.i.isBot;
 		this.isCat = this.$store.state.i.isCat;
+		this.alwaysMarkNsfw = this.$store.state.i.alwaysMarkNsfw;
 
 		this.fieldName0 = this.$store.state.i.fields[0] ? this.$store.state.i.fields[0].name : null;
 		this.fieldValue0 = this.$store.state.i.fields[0] ? this.$store.state.i.fields[0].value : null;
@@ -147,7 +137,60 @@ export default defineComponent({
 			});
 		},
 
-		save(notify) {
+		async editMetadata() {
+			const { canceled, result } = await os.form(this.$t('_profile.metadata'), {
+				fieldName0: {
+					type: 'string',
+					label: this.$t('_profile.metadataLabel') + ' 1',
+					default: this.fieldName0,
+				},
+				fieldValue0: {
+					type: 'string',
+					label: this.$t('_profile.metadataContent') + ' 1',
+					default: this.fieldValue0,
+				},
+				fieldName1: {
+					type: 'string',
+					label: this.$t('_profile.metadataLabel') + ' 2',
+					default: this.fieldName1,
+				},
+				fieldValue1: {
+					type: 'string',
+					label: this.$t('_profile.metadataContent') + ' 2',
+					default: this.fieldValue1,
+				},
+				fieldName2: {
+					type: 'string',
+					label: this.$t('_profile.metadataLabel') + ' 3',
+					default: this.fieldName2,
+				},
+				fieldValue2: {
+					type: 'string',
+					label: this.$t('_profile.metadataContent') + ' 3',
+					default: this.fieldValue2,
+				},
+				fieldName3: {
+					type: 'string',
+					label: this.$t('_profile.metadataLabel') + ' 4',
+					default: this.fieldName3,
+				},
+				fieldValue3: {
+					type: 'string',
+					label: this.$t('_profile.metadataContent') + ' 4',
+					default: this.fieldValue3,
+				},
+			});
+			if (canceled) return;
+
+			this.fieldName0 = result.fieldName0;
+			this.fieldValue0 = result.fieldValue0;
+			this.fieldName1 = result.fieldName1;
+			this.fieldValue1 = result.fieldValue1;
+			this.fieldName2 = result.fieldName2;
+			this.fieldValue2 = result.fieldValue2;
+			this.fieldName3 = result.fieldName3;
+			this.fieldValue3 = result.fieldValue3;
+
 			const fields = [
 				{ name: this.fieldName0, value: this.fieldValue0 },
 				{ name: this.fieldName1, value: this.fieldValue1 },
@@ -155,6 +198,19 @@ export default defineComponent({
 				{ name: this.fieldName3, value: this.fieldValue3 },
 			];
 
+			os.api('i/update', {
+				fields,
+			}).then(i => {
+				os.success();
+			}).catch(err => {
+				os.dialog({
+					type: 'error',
+					text: err.id
+				});
+			});
+		},
+
+		save(notify) {
 			this.saving = true;
 
 			os.api('i/update', {
@@ -162,9 +218,9 @@ export default defineComponent({
 				description: this.description || null,
 				location: this.location || null,
 				birthday: this.birthday || null,
-				fields,
 				isBot: !!this.isBot,
 				isCat: !!this.isCat,
+				alwaysMarkNsfw: !!this.alwaysMarkNsfw,
 			}).then(i => {
 				this.saving = false;
 				this.$store.state.i.avatarId = i.avatarId;
@@ -189,41 +245,29 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .llvierxe {
-	> ._content {
-		> .header {
-			position: relative;
-			height: 150px;
-			overflow: hidden;
-			background-size: cover;
-			background-position: center;
-			border-radius: 5px;
-			border: solid 1px var(--divider);
-			box-sizing: border-box;
+	> .header {
+		position: relative;
+		height: 150px;
+		overflow: hidden;
+		background-size: cover;
+		background-position: center;
+		border-radius: 5px;
+		border: solid 1px var(--divider);
+		box-sizing: border-box;
+		cursor: pointer;
+
+		> .avatar {
+			position: absolute;
+			top: 0;
+			bottom: 0;
+			left: 0;
+			right: 0;
+			display: block;
+			width: 72px;
+			height: 72px;
+			margin: auto;
 			cursor: pointer;
-
-			> .avatar {
-				position: absolute;
-				top: 0;
-				bottom: 0;
-				left: 0;
-				right: 0;
-				display: block;
-				width: 72px;
-				height: 72px;
-				margin: auto;
-				cursor: pointer;
-				box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.5);
-			}
-		}
-
-		> .fields {
-			> .row {
-				> * {
-					display: inline-block;
-					width: 50%;
-					margin-bottom: 0;
-				}
-			}
+			box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.5);
 		}
 	}
 }
diff --git a/src/client/pages/settings/reaction.vue b/src/client/pages/settings/reaction.vue
index 88de091441..75dae29068 100644
--- a/src/client/pages/settings/reaction.vue
+++ b/src/client/pages/settings/reaction.vue
@@ -1,9 +1,8 @@
 <template>
-<div class="_section">
-	<div class="_card">
-		<div class="_title"><Fa :icon="faLaugh"/> {{ $t('reaction') }}</div>
-		<div class="_content">
-			<div class="_caption" style="padding: 0 8px 8px 8px;">{{ $t('reactionSettingDescription') }}</div>
+<FormBase>
+	<div class="_formItem">
+		<div class="_formLabel">{{ $t('reactionSettingDescription') }}</div>
+		<div class="_formPanel">
 			<XDraggable class="zoaiodol" :list="reactions" animation="150" delay="100" delay-on-touch-only="true">
 				<button class="_button item" v-for="reaction in reactions" :key="reaction" @click="remove(reaction, $event)">
 					<MkEmoji :emoji="reaction" :normal="true"/>
@@ -12,26 +11,25 @@
 					<button>a</button>
 				</template>
 			</XDraggable>
-			<div class="_caption" style="padding: 8px;">{{ $t('reactionSettingDescription2') }} <button class="_textButton" @click="chooseEmoji">{{ $t('chooseEmoji') }}</button></div>
-			<MkRadios v-model="reactionPickerWidth">
-				<template #desc>{{ $t('width') }}</template>
-				<option :value="1">{{ $t('small') }}</option>
-				<option :value="2">{{ $t('medium') }}</option>
-				<option :value="3">{{ $t('large') }}</option>
-			</MkRadios>
-			<MkRadios v-model="reactionPickerHeight">
-				<template #desc>{{ $t('height') }}</template>
-				<option :value="1">{{ $t('small') }}</option>
-				<option :value="2">{{ $t('medium') }}</option>
-				<option :value="3">{{ $t('large') }}</option>
-			</MkRadios>
-		</div>
-		<div class="_footer">
-			<MkButton inline @click="preview"><Fa :icon="faEye"/> {{ $t('preview') }}</MkButton>
-			<MkButton inline @click="setDefault"><Fa :icon="faUndo"/> {{ $t('default') }}</MkButton>
 		</div>
+		<div class="_formCaption">{{ $t('reactionSettingDescription2') }} <button class="_textButton" @click="chooseEmoji">{{ $t('chooseEmoji') }}</button></div>
 	</div>
-</div>
+
+	<FormRadios v-model="reactionPickerWidth">
+		<template #desc>{{ $t('width') }}</template>
+		<option :value="1">{{ $t('small') }}</option>
+		<option :value="2">{{ $t('medium') }}</option>
+		<option :value="3">{{ $t('large') }}</option>
+	</FormRadios>
+	<FormRadios v-model="reactionPickerHeight">
+		<template #desc>{{ $t('height') }}</template>
+		<option :value="1">{{ $t('small') }}</option>
+		<option :value="2">{{ $t('medium') }}</option>
+		<option :value="3">{{ $t('large') }}</option>
+	</FormRadios>
+	<FormButton @click="preview"><Fa :icon="faEye"/> {{ $t('preview') }}</FormButton>
+	<FormButton danger @click="setDefault"><Fa :icon="faUndo"/> {{ $t('default') }}</FormButton>
+</FormBase>
 </template>
 
 <script lang="ts">
@@ -39,20 +37,19 @@ import { defineComponent } from 'vue';
 import { faLaugh, faSave, faEye } from '@fortawesome/free-regular-svg-icons';
 import { faUndo } from '@fortawesome/free-solid-svg-icons';
 import { VueDraggableNext } from 'vue-draggable-next';
-import MkInput from '@/components/ui/input.vue';
-import MkButton from '@/components/ui/button.vue';
-import MkSwitch from '@/components/ui/switch.vue';
-import MkRadios from '@/components/ui/radios.vue';
-import { emojiRegexWithCustom } from '../../../misc/emoji-regex';
+import FormInput from '@/components/form/input.vue';
+import FormRadios from '@/components/form/radios.vue';
+import FormBase from '@/components/form/base.vue';
+import FormButton from '@/components/form/button.vue';
 import { defaultSettings } from '@/store';
 import * as os from '@/os';
 
 export default defineComponent({
 	components: {
-		MkInput,
-		MkButton,
-		MkSwitch,
-		MkRadios,
+		FormInput,
+		FormButton,
+		FormBase,
+		FormRadios,
 		XDraggable: VueDraggableNext,
 	},
 
@@ -62,7 +59,11 @@ export default defineComponent({
 		return {
 			INFO: {
 				title: this.$t('reaction'),
-				icon: faLaugh
+				icon: faLaugh,
+				action: {
+					icon: faEye,
+					handler: this.preview
+				}
 			},
 			reactions: JSON.parse(JSON.stringify(this.$store.state.settings.reactions)),
 			faLaugh, faSave, faEye, faUndo
@@ -144,8 +145,6 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .zoaiodol {
-	border: solid 1px var(--divider);
-	border-radius: var(--radius);
 	padding: 16px;
 
 	> .item {
diff --git a/src/client/pages/settings/security.vue b/src/client/pages/settings/security.vue
index 98863679c4..8d84d08f78 100644
--- a/src/client/pages/settings/security.vue
+++ b/src/client/pages/settings/security.vue
@@ -1,29 +1,45 @@
 <template>
-<div>
-	<div class="_section">
-		<X2fa/>
-	</div>
-	<div class="_section">
-		<MkButton primary @click="change()" full>{{ $t('changePassword') }}</MkButton>
-	</div>
-	<div class="_section">
-		<MkButton class="_vMargin" primary @click="regenerateToken" full><Fa :icon="faSyncAlt"/> {{ $t('regenerateLoginToken') }}</MkButton>
-		<div class="_caption _vMargin" style="padding: 0 6px;">{{ $t('regenerateLoginTokenDescription') }}</div>
-	</div>
-</div>
+<FormBase>
+	<X2fa/>
+	<FormLink to="/settings/2fa"><template #icon><Fa :icon="faMobileAlt"/></template>{{ $t('twoStepAuthentication') }}</FormLink>
+	<FormButton primary @click="change()">{{ $t('changePassword') }}</FormButton>
+	<FormPagination :pagination="pagination">
+		<template #label>{{ $t('signinHistory') }}</template>
+		<template #default="{items}">
+			<div class="_formPanel timnmucd" v-for="item in items" :key="item.id">
+				<header>
+					<Fa class="icon succ" :icon="faCheck" v-if="item.success"/>
+					<Fa class="icon fail" :icon="faTimesCircle" v-else/>
+					<code class="ip _monospace">{{ item.ip }}</code>
+					<MkTime :time="item.createdAt" class="time"/>
+				</header>
+			</div>
+		</template>
+	</FormPagination>
+	<FormGroup>
+		<FormButton danger @click="regenerateToken"><Fa :icon="faSyncAlt"/> {{ $t('regenerateLoginToken') }}</FormButton>
+		<template #caption>{{ $t('regenerateLoginTokenDescription') }}</template>
+	</FormGroup>
+</FormBase>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faLock, faSyncAlt } from '@fortawesome/free-solid-svg-icons';
-import MkButton from '@/components/ui/button.vue';
-import X2fa from './security.2fa.vue';
+import { faCheck, faTimesCircle, faLock, faSyncAlt, faMobileAlt } from '@fortawesome/free-solid-svg-icons';
+import FormBase from '@/components/form/base.vue';
+import FormLink from '@/components/form/link.vue';
+import FormGroup from '@/components/form/group.vue';
+import FormButton from '@/components/form/button.vue';
+import FormPagination from '@/components/form/pagination.vue';
 import * as os from '@/os';
 
 export default defineComponent({
 	components: {
-		MkButton,
-		X2fa,
+		FormBase,
+		FormLink,
+		FormButton,
+		FormPagination,
+		FormGroup,
 	},
 	
 	emits: ['info'],
@@ -34,7 +50,11 @@ export default defineComponent({
 				title: this.$t('security'),
 				icon: faLock
 			},
-			faLock, faSyncAlt
+			pagination: {
+				endpoint: 'i/signin-history',
+				limit: 5,
+			},
+			faLock, faSyncAlt, faCheck, faTimesCircle, faMobileAlt,
 		}
 	},
 
@@ -98,3 +118,32 @@ export default defineComponent({
 	}
 });
 </script>
+
+<style lang="scss" scoped>
+.timnmucd {
+	padding: 16px;
+
+	> header {
+		display: flex;
+		align-items: center;
+
+		> .icon {
+			width: 1em;
+			margin-right: 0.75em;
+
+			&.succ {
+				color: var(--success);
+			}
+
+			&.fail {
+				color: var(--error);
+			}
+		}
+
+		> .time {
+			margin-left: auto;
+			opacity: 0.7;
+		}
+	}
+}
+</style>
diff --git a/src/client/pages/settings/sidebar.vue b/src/client/pages/settings/sidebar.vue
index 2ab5acf936..4138aaf733 100644
--- a/src/client/pages/settings/sidebar.vue
+++ b/src/client/pages/settings/sidebar.vue
@@ -1,41 +1,41 @@
 <template>
-<div class="_section">
-	<div class="_card">
-		<div class="_content">
-			<MkTextarea v-model:value="items" tall>
-				<span>{{ $t('sidebar') }}</span>
-				<template #desc><button class="_textButton" @click="addItem">{{ $t('addItem') }}</button></template>
-			</MkTextarea>
-		</div>
-		<div class="_content">
-			<div>{{ $t('display') }}</div>
-			<MkRadio v-model="sidebarDisplay" value="full">{{ $t('_sidebar.full') }}</MkRadio>
-			<MkRadio v-model="sidebarDisplay" value="icon">{{ $t('_sidebar.icon') }}</MkRadio>
-			<!-- <MkRadio v-model="sidebarDisplay" value="hide" disabled>{{ $t('_sidebar.hide') }}</MkRadio>--> <!-- TODO: サイドバーを完全に隠せるようにすると、別途ハンバーガーボタンのようなものをUIに表示する必要があり面倒 -->
-		</div>
-		<div class="_footer">
-			<MkButton inline @click="save()" primary><Fa :icon="faSave"/> {{ $t('save') }}</MkButton>
-			<MkButton inline @click="reset()"><Fa :icon="faRedo"/> {{ $t('default') }}</MkButton>
-		</div>
-	</div>
-</div>
+<FormBase>
+	<FormTextarea v-model:value="items" tall>
+		<span>{{ $t('sidebar') }}</span>
+		<template #desc><button class="_textButton" @click="addItem">{{ $t('addItem') }}</button></template>
+	</FormTextarea>
+
+	<FormRadios v-model="sidebarDisplay">
+		<template #desc>{{ $t('display') }}</template>
+		<option value="full">{{ $t('_sidebar.full') }}</option>
+		<option value="icon">{{ $t('_sidebar.icon') }}</option>
+		<!-- <MkRadio v-model="sidebarDisplay" value="hide" disabled>{{ $t('_sidebar.hide') }}</MkRadio>--> <!-- TODO: サイドバーを完全に隠せるようにすると、別途ハンバーガーボタンのようなものをUIに表示する必要があり面倒 -->
+	</FormRadios>
+
+	<FormButton @click="save()" primary><Fa :icon="faSave"/> {{ $t('save') }}</FormButton>
+	<FormButton @click="reset()" danger><Fa :icon="faRedo"/> {{ $t('default') }}</FormButton>
+</FormBase>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faListUl, faSave, faRedo } from '@fortawesome/free-solid-svg-icons';
-import MkButton from '@/components/ui/button.vue';
-import MkTextarea from '@/components/ui/textarea.vue';
-import MkRadio from '@/components/ui/radio.vue';
+import FormSwitch from '@/components/form/switch.vue';
+import FormTextarea from '@/components/form/textarea.vue';
+import FormRadios from '@/components/form/radios.vue';
+import FormBase from '@/components/form/base.vue';
+import FormGroup from '@/components/form/group.vue';
+import FormButton from '@/components/form/button.vue';
 import { defaultDeviceUserSettings } from '@/store';
 import * as os from '@/os';
 import { sidebarDef } from '@/sidebar';
 
 export default defineComponent({
 	components: {
-		MkButton,
-		MkTextarea,
-		MkRadio,
+		FormBase,
+		FormButton,
+		FormTextarea,
+		FormRadios,
 	},
 
 	emits: ['info'],
@@ -102,7 +102,3 @@ export default defineComponent({
 	},
 });
 </script>
-
-<style lang="scss" scoped>
-
-</style>
diff --git a/src/client/pages/settings/sounds.vue b/src/client/pages/settings/sounds.vue
index fc6b751fed..f19be54e82 100644
--- a/src/client/pages/settings/sounds.vue
+++ b/src/client/pages/settings/sounds.vue
@@ -1,62 +1,35 @@
 <template>
-<div class="_section">
-	<div class="_card">
-		<div class="_title"><Fa :icon="faMusic"/> {{ $t('sounds') }}</div>
-		<div class="_content">
-			<MkRange v-model:value="sfxVolume" :min="0" :max="1" :step="0.1">
-				<Fa slot="icon" :icon="volumeIcon"/>
-				<span slot="title">{{ $t('volume') }}</span>
-			</MkRange>
-		</div>
-		<div class="_content">
-			<MkSelect v-model:value="sfxNote">
-				<template #label>{{ $t('_sfx.note') }}</template>
-				<option v-for="sound in sounds" :value="sound" :key="sound">{{ sound || $t('none') }}</option>
-				<template #text><button class="_textButton" @click="listen(sfxNote)" v-if="sfxNote"><Fa :icon="faPlay"/> {{ $t('listen') }}</button></template>
-			</MkSelect>
-			<MkSelect v-model:value="sfxNoteMy">
-				<template #label>{{ $t('_sfx.noteMy') }}</template>
-				<option v-for="sound in sounds" :value="sound" :key="sound">{{ sound || $t('none') }}</option>
-				<template #text><button class="_textButton" @click="listen(sfxNoteMy)" v-if="sfxNoteMy"><Fa :icon="faPlay"/> {{ $t('listen') }}</button></template>
-			</MkSelect>
-			<MkSelect v-model:value="sfxNotification">
-				<template #label>{{ $t('_sfx.notification') }}</template>
-				<option v-for="sound in sounds" :value="sound" :key="sound">{{ sound || $t('none') }}</option>
-				<template #text><button class="_textButton" @click="listen(sfxNotification)" v-if="sfxNotification"><Fa :icon="faPlay"/> {{ $t('listen') }}</button></template>
-			</MkSelect>
-			<MkSelect v-model:value="sfxChat">
-				<template #label>{{ $t('_sfx.chat') }}</template>
-				<option v-for="sound in sounds" :value="sound" :key="sound">{{ sound || $t('none') }}</option>
-				<template #text><button class="_textButton" @click="listen(sfxChat)" v-if="sfxChat"><Fa :icon="faPlay"/> {{ $t('listen') }}</button></template>
-			</MkSelect>
-			<MkSelect v-model:value="sfxChatBg">
-				<template #label>{{ $t('_sfx.chatBg') }}</template>
-				<option v-for="sound in sounds" :value="sound" :key="sound">{{ sound || $t('none') }}</option>
-				<template #text><button class="_textButton" @click="listen(sfxChatBg)" v-if="sfxChatBg"><Fa :icon="faPlay"/> {{ $t('listen') }}</button></template>
-			</MkSelect>
-			<MkSelect v-model:value="sfxAntenna">
-				<template #label>{{ $t('_sfx.antenna') }}</template>
-				<option v-for="sound in sounds" :value="sound" :key="sound">{{ sound || $t('none') }}</option>
-				<template #text><button class="_textButton" @click="listen(sfxAntenna)" v-if="sfxAntenna"><Fa :icon="faPlay"/> {{ $t('listen') }}</button></template>
-			</MkSelect>
-			<MkSelect v-model:value="sfxChannel">
-				<template #label>{{ $t('_sfx.channel') }}</template>
-				<option v-for="sound in sounds" :value="sound" :key="sound">{{ sound || $t('none') }}</option>
-				<template #text><button class="_textButton" @click="listen(sfxChannel)" v-if="sfxChannel"><Fa :icon="faPlay"/> {{ $t('listen') }}</button></template>
-			</MkSelect>
-		</div>
-	</div>
-</div>
+<FormBase>
+	<FormRange v-model:value="masterVolume" :min="0" :max="1" :step="0.05">
+		<template #label><Fa :icon="volumeIcon" :key="volumeIcon"/> {{ $t('masterVolume') }}</template>
+	</FormRange>
+
+	<FormGroup>
+		<template #label>{{ $t('sounds') }}</template>
+		<FormButton v-for="type in Object.keys(sounds)" :key="type" :center="false" @click="edit(type)">
+			{{ $t('_sfx.' + type) }}
+			<template #suffix>{{ sounds[type].type || $t('none') }}</template>
+			<template #suffixIcon><Fa :icon="faChevronDown"/></template>
+		</FormButton>
+	</FormGroup>
+
+	<FormButton @click="reset()" danger><Fa :icon="faRedo"/> {{ $t('default') }}</FormButton>
+</FormBase>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faMusic, faPlay, faVolumeUp, faVolumeMute } from '@fortawesome/free-solid-svg-icons';
-import MkSelect from '@/components/ui/select.vue';
-import MkRange from '@/components/ui/range.vue';
+import { faMusic, faPlay, faVolumeUp, faVolumeMute, faChevronDown, faRedo } from '@fortawesome/free-solid-svg-icons';
+import FormRange from '@/components/form/range.vue';
+import FormSelect from '@/components/form/select.vue';
+import FormBase from '@/components/form/base.vue';
+import FormButton from '@/components/form/button.vue';
+import FormGroup from '@/components/form/group.vue';
 import * as os from '@/os';
+import { device, defaultDeviceSettings } from '@/cold-storage';
+import { playFile } from '@/scripts/sound';
 
-const sounds = [
+const soundsTypes = [
 	null,
 	'syuilo/up',
 	'syuilo/down',
@@ -73,6 +46,8 @@ const sounds = [
 	'syuilo/square-pico',
 	'syuilo/reverved',
 	'syuilo/ryukyu',
+	'syuilo/kick',
+	'syuilo/snare',
 	'aisha/1',
 	'aisha/2',
 	'aisha/3',
@@ -82,71 +57,98 @@ const sounds = [
 
 export default defineComponent({
 	components: {
-		MkSelect,
-		MkRange,
+		FormSelect,
+		FormButton,
+		FormBase,
+		FormRange,
+		FormGroup,
 	},
 
+	emits: ['info'],
+
 	data() {
 		return {
-			sounds,
-			faMusic, faPlay, faVolumeUp, faVolumeMute,
+			INFO: {
+				title: this.$t('sounds'),
+				icon: faMusic
+			},
+			sounds: {},
+			faMusic, faPlay, faVolumeUp, faVolumeMute, faChevronDown, faRedo,
 		}
 	},
 
 	computed: {
-		sfxVolume: {
-			get() { return this.$store.state.device.sfxVolume; },
-			set(value) { this.$store.commit('device/set', { key: 'sfxVolume', value: parseFloat(value, 10) }); }
+		masterVolume: { // TODO: (外部)関数にcomputedを使うのはアレなので直す
+			get() { return device.get('sound_masterVolume'); },
+			set(value) { device.set('sound_masterVolume', value); }
 		},
-
-		sfxNote: {
-			get() { return this.$store.state.device.sfxNote; },
-			set(value) { this.$store.commit('device/set', { key: 'sfxNote', value }); }
-		},
-
-		sfxNoteMy: {
-			get() { return this.$store.state.device.sfxNoteMy; },
-			set(value) { this.$store.commit('device/set', { key: 'sfxNoteMy', value }); }
-		},
-
-		sfxNotification: {
-			get() { return this.$store.state.device.sfxNotification; },
-			set(value) { this.$store.commit('device/set', { key: 'sfxNotification', value }); }
-		},
-
-		sfxChat: {
-			get() { return this.$store.state.device.sfxChat; },
-			set(value) { this.$store.commit('device/set', { key: 'sfxChat', value }); }
-		},
-
-		sfxChatBg: {
-			get() { return this.$store.state.device.sfxChatBg; },
-			set(value) { this.$store.commit('device/set', { key: 'sfxChatBg', value }); }
-		},
-
-		sfxAntenna: {
-			get() { return this.$store.state.device.sfxAntenna; },
-			set(value) { this.$store.commit('device/set', { key: 'sfxAntenna', value }); }
-		},
-
-		sfxChannel: {
-			get() { return this.$store.state.device.sfxChannel; },
-			set(value) { this.$store.commit('device/set', { key: 'sfxChannel', value }); }
-		},
-
-		volumeIcon: {
-			get() {
-				return this.sfxVolume === 0 ? faVolumeMute : faVolumeUp;
-			}
+		volumeIcon() {
+			return this.masterVolume === 0 ? faVolumeMute : faVolumeUp;
 		}
 	},
 
+	created() {
+		this.sounds.note = device.get('sound_note');
+		this.sounds.noteMy = device.get('sound_noteMy');
+		this.sounds.notification = device.get('sound_notification');
+		this.sounds.chat = device.get('sound_chat');
+		this.sounds.chatBg = device.get('sound_chatBg');
+		this.sounds.antenna = device.get('sound_antenna');
+		this.sounds.channel = device.get('sound_channel');
+		this.sounds.reversiPutBlack = device.get('sound_reversiPutBlack');
+		this.sounds.reversiPutWhite = device.get('sound_reversiPutWhite');
+	},
+
+	mounted() {
+		this.$emit('info', this.INFO);
+	},
+
 	methods: {
-		listen(sound) {
-			const audio = new Audio(`/assets/sounds/${sound}.mp3`);
-			audio.volume = this.$store.state.device.sfxVolume;
-			audio.play();
+		async edit(type) {
+			const { canceled, result } = await os.form(this.$t('_sfx.' + type), {
+				type: {
+					type: 'enum',
+					enum: soundsTypes.map(x => ({
+						value: x,
+						label: x == null ? this.$t('none') : x,
+					})),
+					label: this.$t('sound'),
+					default: this.sounds[type].type,
+				},
+				volume: {
+					type: 'range',
+					mim: 0,
+					max: 1,
+					step: 0.05,
+					label: this.$t('volume'),
+					default: this.sounds[type].volume
+				},
+				listen: {
+					type: 'button',
+					content: this.$t('listen'),
+					action: (_, values) => {
+						playFile(values.type, values.volume);
+					}
+				}
+			});
+			if (canceled) return;
+
+			const v = {
+				type: result.type,
+				volume: result.volume,
+			};
+
+			device.set('sound_' + type, v);
+			this.sounds[type] = v;
 		},
+
+		reset() {
+			for (const sound of Object.keys(this.sounds)) {
+				const v = defaultDeviceSettings['sound_' + sound];
+				device.set('sound_' + sound, v);
+				this.sounds[sound] = v;
+			}
+		}
 	}
 });
 </script>
diff --git a/src/client/pages/settings/theme.install.vue b/src/client/pages/settings/theme.install.vue
new file mode 100644
index 0000000000..c3f2565cca
--- /dev/null
+++ b/src/client/pages/settings/theme.install.vue
@@ -0,0 +1,106 @@
+<template>
+<FormBase>
+	<FormGroup>
+		<FormTextarea v-model:value="installThemeCode">
+			<span>{{ $t('_theme.code') }}</span>
+		</FormTextarea>
+		<FormButton @click="() => preview(installThemeCode)" :disabled="installThemeCode == null" inline><Fa :icon="faEye"/> {{ $t('preview') }}</FormButton>
+	</FormGroup>
+
+	<FormButton @click="() => install(installThemeCode)" :disabled="installThemeCode == null" primary inline><Fa :icon="faCheck"/> {{ $t('install') }}</FormButton>
+</FormBase>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { faPalette, faDownload, faFolderOpen, faCheck, faTrashAlt, faEye } from '@fortawesome/free-solid-svg-icons';
+import * as JSON5 from 'json5';
+import FormTextarea from '@/components/form/textarea.vue';
+import FormSelect from '@/components/form/select.vue';
+import FormRadios from '@/components/form/radios.vue';
+import FormBase from '@/components/form/base.vue';
+import FormGroup from '@/components/form/group.vue';
+import FormLink from '@/components/form/link.vue';
+import FormButton from '@/components/form/button.vue';
+import { applyTheme, validateTheme } from '@/scripts/theme';
+import * as os from '@/os';
+
+export default defineComponent({
+	components: {
+		FormTextarea,
+		FormSelect,
+		FormRadios,
+		FormBase,
+		FormGroup,
+		FormLink,
+		FormButton,
+	},
+
+	emits: ['info'],
+
+	data() {
+		return {
+			INFO: {
+				title: this.$t('_theme.install'),
+				icon: faDownload
+			},
+			installThemeCode: null,
+			faPalette, faDownload, faFolderOpen, faCheck, faTrashAlt, faEye
+		}
+	},
+
+	mounted() {
+		this.$emit('info', this.INFO);
+	},
+
+	methods: {
+		parseThemeCode(code) {
+			let theme;
+
+			try {
+				theme = JSON5.parse(code);
+			} catch (e) {
+				os.dialog({
+					type: 'error',
+					text: this.$t('_theme.invalid')
+				});
+				return false;
+			}
+			if (!validateTheme(theme)) {
+				os.dialog({
+					type: 'error',
+					text: this.$t('_theme.invalid')
+				});
+				return false;
+			}
+			if (this.$store.state.device.themes.some(t => t.id === theme.id)) {
+				os.dialog({
+					type: 'info',
+					text: this.$t('_theme.alreadyInstalled')
+				});
+				return false;
+			}
+
+			return theme;
+		},
+
+		preview(code) {
+			const theme = this.parseThemeCode(code);
+			if (theme) applyTheme(theme, false);
+		},
+
+		install(code) {
+			const theme = this.parseThemeCode(code);
+			if (!theme) return;
+			const themes = this.$store.state.device.themes.concat(theme);
+			this.$store.commit('device/set', {
+				key: 'themes', value: themes
+			});
+			os.dialog({
+				type: 'success',
+				text: this.$t('_theme.installed', { name: theme.name })
+			});
+		},
+	}
+});
+</script>
diff --git a/src/client/pages/settings/theme.manage.vue b/src/client/pages/settings/theme.manage.vue
new file mode 100644
index 0000000000..a7bd97a4d5
--- /dev/null
+++ b/src/client/pages/settings/theme.manage.vue
@@ -0,0 +1,103 @@
+<template>
+<FormBase>
+	<FormSelect v-model:value="selectedThemeId">
+		<template #label>{{ $t('installedThemes') }}</template>
+		<option v-for="x in installedThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
+		<optgroup :label="$t('builtinThemes')">
+			<option v-for="x in builtinThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
+		</optgroup>
+	</FormSelect>
+	<template v-if="selectedTheme">
+		<FormInput readonly :value="selectedTheme.author">
+			<span>{{ $t('author') }}</span>
+		</FormInput>
+		<FormTextarea readonly tall :value="selectedThemeCode">
+			<span>{{ $t('_theme.code') }}</span>
+			<template #desc><button @click="copyThemeCode()" class="_textButton">{{ $t('copy') }}</button></template>
+		</FormTextarea>
+		<FormButton @click="uninstall()" danger v-if="!builtinThemes.some(t => t.id == selectedTheme.id)"><Fa :icon="faTrashAlt"/> {{ $t('uninstall') }}</FormButton>
+	</template>
+</FormBase>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { faPalette, faDownload, faFolderOpen, faCheck, faTrashAlt, faEye } from '@fortawesome/free-solid-svg-icons';
+import * as JSON5 from 'json5';
+import FormTextarea from '@/components/form/textarea.vue';
+import FormSelect from '@/components/form/select.vue';
+import FormRadios from '@/components/form/radios.vue';
+import FormBase from '@/components/form/base.vue';
+import FormGroup from '@/components/form/group.vue';
+import FormInput from '@/components/form/input.vue';
+import FormButton from '@/components/form/button.vue';
+import { Theme, builtinThemes } from '@/scripts/theme';
+import copyToClipboard from '@/scripts/copy-to-clipboard';
+import * as os from '@/os';
+
+export default defineComponent({
+	components: {
+		FormTextarea,
+		FormSelect,
+		FormRadios,
+		FormBase,
+		FormGroup,
+		FormInput,
+		FormButton,
+	},
+
+	emits: ['info'],
+	
+	data() {
+		return {
+			INFO: {
+				title: this.$t('_theme.manage'),
+				icon: faFolderOpen
+			},
+			builtinThemes,
+			selectedThemeId: null,
+			faPalette, faDownload, faFolderOpen, faCheck, faTrashAlt, faEye
+		}
+	},
+
+	computed: {
+		themes(): Theme[] {
+			return builtinThemes.concat(this.$store.state.device.themes);
+		},
+
+		installedThemes(): Theme[] {
+			return this.$store.state.device.themes;
+		},
+	
+		selectedTheme() {
+			if (this.selectedThemeId == null) return null;
+			return this.themes.find(x => x.id === this.selectedThemeId);
+		},
+
+		selectedThemeCode() {
+			if (this.selectedTheme == null) return null;
+			return JSON5.stringify(this.selectedTheme, null, '\t');
+		},
+	},
+
+	mounted() {
+		this.$emit('info', this.INFO);
+	},
+
+	methods: {
+		copyThemeCode() {
+			copyToClipboard(this.selectedThemeCode);
+			os.success();
+		},
+
+		uninstall() {
+			const theme = this.selectedTheme;
+			const themes = this.$store.state.device.themes.filter(t => t.id != theme.id);
+			this.$store.commit('device/set', {
+				key: 'themes', value: themes
+			});
+			os.success();
+		},
+	}
+});
+</script>
diff --git a/src/client/pages/settings/theme.vue b/src/client/pages/settings/theme.vue
index c023d56dea..50dcf4952c 100644
--- a/src/client/pages/settings/theme.vue
+++ b/src/client/pages/settings/theme.vue
@@ -1,7 +1,26 @@
 <template>
-<div class="">
-	<div class="rfqxtzch _card _vMargin">
-		<div class="_content">
+<FormBase>
+	<FormSelect v-model:value="lightTheme" v-if="!darkMode">
+		<template #label>{{ $t('themeForLightMode') }}</template>
+		<optgroup :label="$t('lightThemes')">
+			<option v-for="x in lightThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
+		</optgroup>
+		<optgroup :label="$t('darkThemes')">
+			<option v-for="x in darkThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
+		</optgroup>
+	</FormSelect>
+	<FormSelect v-model:value="darkTheme" v-else>
+		<template #label>{{ $t('themeForDarkMode') }}</template>
+		<optgroup :label="$t('darkThemes')">
+			<option v-for="x in darkThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
+		</optgroup>
+		<optgroup :label="$t('lightThemes')">
+			<option v-for="x in lightThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
+		</optgroup>
+	</FormSelect>
+
+	<FormGroup>
+		<div class="rfqxtzch _formItem _formPanel">
 			<div class="darkMode" :class="{ disabled: syncDeviceDarkMode }">
 				<div class="toggleWrapper">
 					<input type="checkbox" class="dn" id="dn" v-model="darkMode" :disabled="syncDeviceDarkMode"/>
@@ -23,85 +42,47 @@
 				</div>
 			</div>
 		</div>
-		<div class="_content">
-			<MkSwitch v-model:value="syncDeviceDarkMode">{{ $t('syncDeviceDarkMode') }}</MkSwitch>
-		</div>
-	</div>
-	<div class="_card _vMargin">
-		<div class="_content">
-			<MkSelect v-model:value="lightTheme">
-				<template #label>{{ $t('themeForLightMode') }}</template>
-				<optgroup :label="$t('lightThemes')">
-					<option v-for="x in lightThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
-				</optgroup>
-				<optgroup :label="$t('darkThemes')">
-					<option v-for="x in darkThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
-				</optgroup>
-			</MkSelect>
-			<MkSelect v-model:value="darkTheme">
-				<template #label>{{ $t('themeForDarkMode') }}</template>
-				<optgroup :label="$t('darkThemes')">
-					<option v-for="x in darkThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
-				</optgroup>
-				<optgroup :label="$t('lightThemes')">
-					<option v-for="x in lightThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
-				</optgroup>
-			</MkSelect>
-			<a href="https://assets.msky.cafe/theme/list" rel="noopener" target="_blank" class="_link">{{ $t('_theme.explore') }}</a>・<MkA to="/theme-editor" class="_link">{{ $t('_theme.make') }}</MkA>
-		</div>
-		<div class="_content">
-			<MkButton primary v-if="wallpaper == null" @click="setWallpaper">{{ $t('setWallpaper') }}</MkButton>
-			<MkButton primary v-else @click="wallpaper = null">{{ $t('removeWallpaper') }}</MkButton>
-		</div>
-	</div>
-	<div class="_card _vMargin">
-		<div class="_title"><Fa :icon="faDownload"/> {{ $t('_theme.install') }}</div>
-		<div class="_content">
-			<MkTextarea v-model:value="installThemeCode">
-				<span>{{ $t('_theme.code') }}</span>
-			</MkTextarea>
-			<MkButton @click="() => install(installThemeCode)" :disabled="installThemeCode == null" primary inline><Fa :icon="faCheck"/> {{ $t('install') }}</MkButton>
-			<MkButton @click="() => preview(installThemeCode)" :disabled="installThemeCode == null" inline><Fa :icon="faEye"/> {{ $t('preview') }}</MkButton>
-		</div>
-	</div>
-	<div class="_card _vMargin">
-		<div class="_title"><Fa :icon="faFolderOpen"/> {{ $t('_theme.manage') }}</div>
-		<div class="_content">
-			<MkSelect v-model:value="selectedThemeId">
-				<option v-for="x in installedThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
-			</MkSelect>
-			<template v-if="selectedTheme">
-				<MkTextarea readonly tall :value="selectedThemeCode">
-					<span>{{ $t('_theme.code') }}</span>
-					<template #desc><button @click="copyThemeCode()" class="_textButton">{{ $t('copy') }}</button></template>
-				</MkTextarea>
-				<MkButton @click="uninstall()" v-if="!builtinThemes.some(t => t.id == selectedTheme.id)"><Fa :icon="faTrashAlt"/> {{ $t('uninstall') }}</MkButton>
-			</template>
-		</div>
-	</div>
-</div>
+		<FormSwitch v-model:value="syncDeviceDarkMode">{{ $t('syncDeviceDarkMode') }}</FormSwitch>
+	</FormGroup>
+
+	<FormButton primary v-if="wallpaper == null" @click="setWallpaper">{{ $t('setWallpaper') }}</FormButton>
+	<FormButton primary v-else @click="wallpaper = null">{{ $t('removeWallpaper') }}</FormButton>
+
+	<FormGroup>
+		<FormLink to="https://assets.msky.cafe/theme/list" external>{{ $t('_theme.explore') }}</FormLink>
+		<FormLink to="/theme-editor">{{ $t('_theme.make') }}</FormLink>
+	</FormGroup>
+
+	<FormLink to="/settings/theme/install"><template #icon><Fa :icon="faDownload"/></template>{{ $t('_theme.install') }}</FormLink>
+
+	<FormLink to="/settings/theme/manage"><template #icon><Fa :icon="faFolderOpen"/></template>{{ $t('_theme.manage') }}</FormLink>
+</FormBase>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faPalette, faDownload, faFolderOpen, faCheck, faTrashAlt, faEye } from '@fortawesome/free-solid-svg-icons';
-import * as JSON5 from 'json5';
-import MkButton from '@/components/ui/button.vue';
-import MkSelect from '@/components/ui/select.vue';
-import MkSwitch from '@/components/ui/switch.vue';
-import MkTextarea from '@/components/ui/textarea.vue';
-import { Theme, builtinThemes, applyTheme, validateTheme } from '@/scripts/theme';
+import FormSwitch from '@/components/form/switch.vue';
+import FormSelect from '@/components/form/select.vue';
+import FormRadios from '@/components/form/radios.vue';
+import FormBase from '@/components/form/base.vue';
+import FormGroup from '@/components/form/group.vue';
+import FormLink from '@/components/form/link.vue';
+import FormButton from '@/components/form/button.vue';
+import { Theme, builtinThemes, applyTheme } from '@/scripts/theme';
 import { selectFile } from '@/scripts/select-file';
 import { isDeviceDarkmode } from '@/scripts/is-device-darkmode';
-import copyToClipboard from '@/scripts/copy-to-clipboard';
 import * as os from '@/os';
 
 export default defineComponent({
 	components: {
-		MkButton,
-		MkSelect,
-		MkSwitch,
-		MkTextarea,
+		FormSwitch,
+		FormSelect,
+		FormRadios,
+		FormBase,
+		FormGroup,
+		FormLink,
+		FormButton,
 	},
 
 	emits: ['info'],
@@ -113,8 +94,6 @@ export default defineComponent({
 				icon: faPalette
 			},
 			builtinThemes,
-			installThemeCode: null,
-			selectedThemeId: null,
 			wallpaper: localStorage.getItem('wallpaper'),
 			faPalette, faDownload, faFolderOpen, faCheck, faTrashAlt, faEye
 		}
@@ -156,16 +135,6 @@ export default defineComponent({
 			get() { return this.$store.state.device.syncDeviceDarkMode; },
 			set(value) { this.$store.commit('device/set', { key: 'syncDeviceDarkMode', value }); }
 		},
-
-		selectedTheme() {
-			if (this.selectedThemeId == null) return null;
-			return this.themes.find(x => x.id === this.selectedThemeId);
-		},
-
-		selectedThemeCode() {
-			if (this.selectedTheme == null) return null;
-			return JSON5.stringify(this.selectedTheme, null, '\t');
-		},
 	},
 
 	watch: {
@@ -207,292 +176,230 @@ export default defineComponent({
 				this.wallpaper = file.url;
 			});
 		},
-
-		copyThemeCode() {
-			copyToClipboard(this.selectedThemeCode);
-			os.success();
-		},
-
-		parseThemeCode(code) {
-			let theme;
-
-			try {
-				theme = JSON5.parse(code);
-			} catch (e) {
-				os.dialog({
-					type: 'error',
-					text: this.$t('_theme.invalid')
-				});
-				return false;
-			}
-			if (!validateTheme(theme)) {
-				os.dialog({
-					type: 'error',
-					text: this.$t('_theme.invalid')
-				});
-				return false;
-			}
-			if (this.$store.state.device.themes.some(t => t.id === theme.id)) {
-				os.dialog({
-					type: 'info',
-					text: this.$t('_theme.alreadyInstalled')
-				});
-				return false;
-			}
-
-			return theme;
-		},
-
-		preview(code) {
-			const theme = this.parseThemeCode(code);
-			if (theme) applyTheme(theme, false);
-		},
-
-		install(code) {
-			const theme = this.parseThemeCode(code);
-			if (!theme) return;
-			const themes = this.$store.state.device.themes.concat(theme);
-			this.$store.commit('device/set', {
-				key: 'themes', value: themes
-			});
-			os.dialog({
-				type: 'success',
-				text: this.$t('_theme.installed', { name: theme.name })
-			});
-		},
-
-		uninstall() {
-			const theme = this.selectedTheme;
-			const themes = this.$store.state.device.themes.filter(t => t.id != theme.id);
-			this.$store.commit('device/set', {
-				key: 'themes', value: themes
-			});
-			os.success();
-		},
 	}
 });
 </script>
 
 <style lang="scss" scoped>
 .rfqxtzch {
-	> ._content {
-		> .darkMode {
-			position: relative;
-			padding: 32px 0;
+	padding: 16px;
 
-			&.disabled {
-				opacity: 0.7;
+	> .darkMode {
+		position: relative;
+		padding: 32px 0;
 
-				&, * {
-					cursor: not-allowed !important;
-				}
+		&.disabled {
+			opacity: 0.7;
+
+			&, * {
+				cursor: not-allowed !important;
 			}
+		}
 
-			.toggleWrapper {
+		.toggleWrapper {
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			overflow: hidden;
+			padding: 0 100px;
+			transform: translate3d(-50%, -50%, 0);
+
+			input {
 				position: absolute;
-				top: 50%;
-				left: 50%;
-				overflow: hidden;
-				padding: 0 100px;
-				transform: translate3d(-50%, -50%, 0);
+				left: -99em;
+			}
+		}
 
-				input {
-					position: absolute;
-					left: -99em;
-				}
+		.toggle {
+			cursor: pointer;
+			display: inline-block;
+			position: relative;
+			width: 90px;
+			height: 50px;
+			background-color: #83D8FF;
+			border-radius: 90px - 6;
+			transition: background-color 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) !important;
+
+			> .before, > .after {
+				position: absolute;
+				top: 15px;
+				font-size: 18px;
+				transition: color 1s ease;
 			}
 
-			.toggle {
-				cursor: pointer;
-				display: inline-block;
-				position: relative;
-				width: 90px;
-				height: 50px;
-				background-color: #83D8FF;
-				border-radius: 90px - 6;
-				transition: background-color 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) !important;
+			> .before {
+				left: -70px;
+				color: var(--accent);
+			}
 
-				> .before, > .after {
-					position: absolute;
-					top: 15px;
-					font-size: 18px;
-					transition: color 1s ease;
-				}
+			> .after {
+				right: -68px;
+				color: var(--fg);
+			}
+		}
+
+		.toggle__handler {
+			display: inline-block;
+			position: relative;
+			z-index: 1;
+			top: 3px;
+			left: 3px;
+			width: 50px - 6;
+			height: 50px - 6;
+			background-color: #FFCF96;
+			border-radius: 50px;
+			box-shadow: 0 2px 6px rgba(0,0,0,.3);
+			transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
+			transform:  rotate(-45deg);
+
+			.crater {
+				position: absolute;
+				background-color: #E8CDA5;
+				opacity: 0;
+				transition: opacity 200ms ease-in-out !important;
+				border-radius: 100%;
+			}
+
+			.crater--1 {
+				top: 18px;
+				left: 10px;
+				width: 4px;
+				height: 4px;
+			}
+
+			.crater--2 {
+				top: 28px;
+				left: 22px;
+				width: 6px;
+				height: 6px;
+			}
+
+			.crater--3 {
+				top: 10px;
+				left: 25px;
+				width: 8px;
+				height: 8px;
+			}
+		}
+
+		.star {
+			position: absolute;
+			background-color: #ffffff;
+			transition: all 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95) !important;
+			border-radius: 50%;
+		}
+
+		.star--1 {
+			top: 10px;
+			left: 35px;
+			z-index: 0;
+			width: 30px;
+			height: 3px;
+		}
+
+		.star--2 {
+			top: 18px;
+			left: 28px;
+			z-index: 1;
+			width: 30px;
+			height: 3px;
+		}
+
+		.star--3 {
+			top: 27px;
+			left: 40px;
+			z-index: 0;
+			width: 30px;
+			height: 3px;
+		}
+
+		.star--4,
+		.star--5,
+		.star--6 {
+			opacity: 0;
+			transition: all 300ms 0 cubic-bezier(0.445, 0.05, 0.55, 0.95) !important;
+		}
+
+		.star--4 {
+			top: 16px;
+			left: 11px;
+			z-index: 0;
+			width: 2px;
+			height: 2px;
+			transform: translate3d(3px,0,0);
+		}
+
+		.star--5 {
+			top: 32px;
+			left: 17px;
+			z-index: 0;
+			width: 3px;
+			height: 3px;
+			transform: translate3d(3px,0,0);
+		}
+
+		.star--6 {
+			top: 36px;
+			left: 28px;
+			z-index: 0;
+			width: 2px;
+			height: 2px;
+			transform: translate3d(3px,0,0);
+		}
+
+		input:checked {
+			+ .toggle {
+				background-color: #749DD6;
 
 				> .before {
-					left: -70px;
-					color: var(--accent);
+					color: var(--fg);
 				}
 
 				> .after {
-					right: -68px;
-					color: var(--fg);
-				}
-			}
-
-			.toggle__handler {
-				display: inline-block;
-				position: relative;
-				z-index: 1;
-				top: 3px;
-				left: 3px;
-				width: 50px - 6;
-				height: 50px - 6;
-				background-color: #FFCF96;
-				border-radius: 50px;
-				box-shadow: 0 2px 6px rgba(0,0,0,.3);
-				transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
-				transform:  rotate(-45deg);
-
-				.crater {
-					position: absolute;
-					background-color: #E8CDA5;
-					opacity: 0;
-					transition: opacity 200ms ease-in-out !important;
-					border-radius: 100%;
+					color: var(--accent);
 				}
 
-				.crater--1 {
-					top: 18px;
-					left: 10px;
+				.toggle__handler {
+					background-color: #FFE5B5;
+					transform: translate3d(40px, 0, 0) rotate(0);
+
+					.crater { opacity: 1; }
+				}
+
+				.star--1 {
+					width: 2px;
+					height: 2px;
+				}
+
+				.star--2 {
 					width: 4px;
 					height: 4px;
+					transform: translate3d(-5px, 0, 0);
 				}
 
-				.crater--2 {
-					top: 28px;
-					left: 22px;
-					width: 6px;
-					height: 6px;
+				.star--3 {
+					width: 2px;
+					height: 2px;
+					transform: translate3d(-7px, 0, 0);
 				}
 
-				.crater--3 {
-					top: 10px;
-					left: 25px;
-					width: 8px;
-					height: 8px;
+				.star--4,
+				.star--5,
+				.star--6 {
+					opacity: 1;
+					transform: translate3d(0,0,0);
 				}
-			}
 
-			.star {
-				position: absolute;
-				background-color: #ffffff;
-				transition: all 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95) !important;
-				border-radius: 50%;
-			}
+				.star--4 {
+					transition: all 300ms 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) !important;
+				}
 
-			.star--1 {
-				top: 10px;
-				left: 35px;
-				z-index: 0;
-				width: 30px;
-				height: 3px;
-			}
+				.star--5 {
+					transition: all 300ms 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95) !important;
+				}
 
-			.star--2 {
-				top: 18px;
-				left: 28px;
-				z-index: 1;
-				width: 30px;
-				height: 3px;
-			}
-
-			.star--3 {
-				top: 27px;
-				left: 40px;
-				z-index: 0;
-				width: 30px;
-				height: 3px;
-			}
-
-			.star--4,
-			.star--5,
-			.star--6 {
-				opacity: 0;
-				transition: all 300ms 0 cubic-bezier(0.445, 0.05, 0.55, 0.95) !important;
-			}
-
-			.star--4 {
-				top: 16px;
-				left: 11px;
-				z-index: 0;
-				width: 2px;
-				height: 2px;
-				transform: translate3d(3px,0,0);
-			}
-
-			.star--5 {
-				top: 32px;
-				left: 17px;
-				z-index: 0;
-				width: 3px;
-				height: 3px;
-				transform: translate3d(3px,0,0);
-			}
-
-			.star--6 {
-				top: 36px;
-				left: 28px;
-				z-index: 0;
-				width: 2px;
-				height: 2px;
-				transform: translate3d(3px,0,0);
-			}
-
-			input:checked {
-				+ .toggle {
-					background-color: #749DD6;
-
-					> .before {
-						color: var(--fg);
-					}
-
-					> .after {
-						color: var(--accent);
-					}
-
-					.toggle__handler {
-						background-color: #FFE5B5;
-						transform: translate3d(40px, 0, 0) rotate(0);
-
-						.crater { opacity: 1; }
-					}
-
-					.star--1 {
-						width: 2px;
-						height: 2px;
-					}
-
-					.star--2 {
-						width: 4px;
-						height: 4px;
-						transform: translate3d(-5px, 0, 0);
-					}
-
-					.star--3 {
-						width: 2px;
-						height: 2px;
-						transform: translate3d(-7px, 0, 0);
-					}
-
-					.star--4,
-					.star--5,
-					.star--6 {
-						opacity: 1;
-						transform: translate3d(0,0,0);
-					}
-
-					.star--4 {
-						transition: all 300ms 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) !important;
-					}
-
-					.star--5 {
-						transition: all 300ms 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95) !important;
-					}
-
-					.star--6 {
-						transition: all 300ms 400ms cubic-bezier(0.445, 0.05, 0.55, 0.95) !important;
-					}
+				.star--6 {
+					transition: all 300ms 400ms cubic-bezier(0.445, 0.05, 0.55, 0.95) !important;
 				}
 			}
 		}
diff --git a/src/client/pages/settings/word-mute.vue b/src/client/pages/settings/word-mute.vue
index 444b2e598c..3148c635bc 100644
--- a/src/client/pages/settings/word-mute.vue
+++ b/src/client/pages/settings/word-mute.vue
@@ -1,47 +1,53 @@
 <template>
-<div class="_section">
-	<div class="_card">
-		<MkTab v-model:value="tab">
-			<option value="soft">{{ $t('_wordMute.soft') }}</option>
-			<option value="hard">{{ $t('_wordMute.hard') }}</option>
-		</MkTab>
-		<div class="_content">
+<div>
+	<MkTab v-model:value="tab">
+		<option value="soft">{{ $t('_wordMute.soft') }}</option>
+		<option value="hard">{{ $t('_wordMute.hard') }}</option>
+	</MkTab>
+	<FormBase>
+		<div class="_formItem">
 			<div v-show="tab === 'soft'">
 				<MkInfo>{{ $t('_wordMute.softDescription') }}</MkInfo>
-				<MkTextarea v-model:value="softMutedWords">
+				<FormTextarea v-model:value="softMutedWords">
 					<span>{{ $t('_wordMute.muteWords') }}</span>
 					<template #desc>{{ $t('_wordMute.muteWordsDescription') }}<br>{{ $t('_wordMute.muteWordsDescription2') }}</template>
-				</MkTextarea>
+				</FormTextarea>
 			</div>
 			<div v-show="tab === 'hard'">
 				<MkInfo>{{ $t('_wordMute.hardDescription') }}</MkInfo>
-				<MkTextarea v-model:value="hardMutedWords" style="margin-bottom: 16px;">
+				<FormTextarea v-model:value="hardMutedWords">
 					<span>{{ $t('_wordMute.muteWords') }}</span>
 					<template #desc>{{ $t('_wordMute.muteWordsDescription') }}<br>{{ $t('_wordMute.muteWordsDescription2') }}</template>
-				</MkTextarea>
-				<div v-if="hardWordMutedNotesCount != null" class="_caption">{{ $t('_wordMute.mutedNotes') }}: {{ hardWordMutedNotesCount | number }}</div>
+				</FormTextarea>
+				<FormKeyValueView v-if="hardWordMutedNotesCount != null">
+					<template #key>{{ $t('_wordMute.mutedNotes') }}</template>
+					<template #value>{{ number(hardWordMutedNotesCount) }}</template>
+				</FormKeyValueView>
 			</div>
 		</div>
-		<div class="_footer">
-			<MkButton @click="save()" primary inline :disabled="!changed"><Fa :icon="faSave"/> {{ $t('save') }}</MkButton>
-		</div>
-	</div>
+		<FormButton @click="save()" primary inline :disabled="!changed"><Fa :icon="faSave"/> {{ $t('save') }}</FormButton>
+	</FormBase>
 </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faCommentSlash, faSave } from '@fortawesome/free-solid-svg-icons';
-import MkButton from '@/components/ui/button.vue';
-import MkTextarea from '@/components/ui/textarea.vue';
+import FormTextarea from '@/components/form/textarea.vue';
+import FormBase from '@/components/form/base.vue';
+import FormKeyValueView from '@/components/form/key-value-view.vue';
+import FormButton from '@/components/form/button.vue';
 import MkTab from '@/components/tab.vue';
 import MkInfo from '@/components/ui/info.vue';
 import * as os from '@/os';
+import number from '@/filters/number';
 
 export default defineComponent({
 	components: {
-		MkButton,
-		MkTextarea,
+		FormBase,
+		FormButton,
+		FormTextarea,
+		FormKeyValueView,
 		MkTab,
 		MkInfo,
 	},
@@ -97,6 +103,8 @@ export default defineComponent({
 			});
 			this.changed = false;
 		},
+
+		number
 	}
 });
 </script>
diff --git a/src/client/pages/user/follow-list.vue b/src/client/pages/user/follow-list.vue
index 6761210ff6..90a67e9a8e 100644
--- a/src/client/pages/user/follow-list.vue
+++ b/src/client/pages/user/follow-list.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="_section">
+<div>
 	<MkPagination :pagination="pagination" #default="{items}" class="mk-following-or-followers _content" ref="list">
 		<div class="users">
 			<MkUserInfo class="user" v-for="user in items.map(x => type === 'following' ? x.followee : x.follower)" :user="user" :key="user.id"/>
diff --git a/src/client/pages/user/index.activity.vue b/src/client/pages/user/index.activity.vue
index 30c02ec54a..1f059146e3 100644
--- a/src/client/pages/user/index.activity.vue
+++ b/src/client/pages/user/index.activity.vue
@@ -1,15 +1,24 @@
 <template>
-<div>
-	<div ref="chart"></div>
-</div>
+<MkContainer>
+	<template #header><Fa :icon="faChartBar" style="margin-right: 0.5em;"/>{{ $t('activity') }}</template>
+
+	<div style="padding: 8px;">
+		<div ref="chart"></div>
+	</div>
+</MkContainer>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
 import ApexCharts from 'apexcharts';
+import { faChartBar } from '@fortawesome/free-solid-svg-icons';
 import * as os from '@/os';
+import MkContainer from '@/components/ui/container.vue';
 
 export default defineComponent({
+	components: {
+		MkContainer,
+	},
 	props: {
 		user: {
 			type: Object,
@@ -25,7 +34,8 @@ export default defineComponent({
 		return {
 			fetching: true,
 			data: [],
-			peak: null
+			peak: null,
+			faChartBar,
 		};
 	},
 	mounted() {
diff --git a/src/client/pages/user/index.photos.vue b/src/client/pages/user/index.photos.vue
index aabcbebe8a..7d498cfb30 100644
--- a/src/client/pages/user/index.photos.vue
+++ b/src/client/pages/user/index.photos.vue
@@ -1,29 +1,43 @@
 <template>
-<div class="ujigsodd">
-	<MkLoading v-if="fetching"/>
-	<div class="stream" v-if="!fetching && images.length > 0">
-		<MkA v-for="image in images"
-			class="img"
-			:style="`background-image: url(${thumbnail(image.file)})`"
-			:to="notePage(image.note)"
-		></MkA>
+<MkContainer>
+	<template #header><Fa :icon="faImage" style="margin-right: 0.5em;"/>{{ $t('images') }}</template>
+	<div class="ujigsodd">
+		<MkLoading v-if="fetching"/>
+		<div class="stream" v-if="!fetching && images.length > 0">
+			<MkA v-for="image in images"
+				class="img"
+				:style="`background-image: url(${thumbnail(image.file)})`"
+				:to="notePage(image.note)"
+			></MkA>
+		</div>
+		<p class="empty" v-if="!fetching && images.length == 0">{{ $t('nothing') }}</p>
 	</div>
-	<p class="empty" v-if="!fetching && images.length == 0">{{ $t('nothing') }}</p>
-</div>
+</MkContainer>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import { faImage } from '@fortawesome/free-solid-svg-icons';
 import { getStaticImageUrl } from '@/scripts/get-static-image-url';
 import notePage from '../../filters/note';
 import * as os from '@/os';
+import MkContainer from '@/components/ui/container.vue';
 
 export default defineComponent({
-	props: ['user'],
+	components: {
+		MkContainer,
+	},
+	props: {
+		user: {
+			type: Object,
+			required: true
+		},
+	},
 	data() {
 		return {
 			fetching: true,
-			images: []
+			images: [],
+			faImage
 		};
 	},
 	mounted() {
@@ -37,7 +51,7 @@ export default defineComponent({
 		os.api('users/notes', {
 			userId: this.user.id,
 			fileType: image,
-			excludeNsfw: !this.$store.state.device.alwaysShowNsfw,
+			excludeNsfw: this.$store.state.device.nsfw !== 'ignore',
 			limit: 9,
 		}).then(notes => {
 			for (const note of notes) {
@@ -66,6 +80,8 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .ujigsodd {
+	padding: 8px;
+
 	> .stream {
 		display: flex;
 		justify-content: center;
diff --git a/src/client/pages/user/index.vue b/src/client/pages/user/index.vue
index 015d83f755..ceafa7ba97 100644
--- a/src/client/pages/user/index.vue
+++ b/src/client/pages/user/index.vue
@@ -1,115 +1,113 @@
 <template>
-<div class="mk-user-page" v-if="user" v-size="{ max: [500] }">
-	<!-- TODO -->
-	<!-- <div class="punished" v-if="user.isSuspended"><Fa :icon="faExclamationTriangle" style="margin-right: 8px;"/> {{ $t('userSuspended') }}</div> -->
-	<!-- <div class="punished" v-if="user.isSilenced"><Fa :icon="faExclamationTriangle" style="margin-right: 8px;"/> {{ $t('userSilenced') }}</div> -->
+<div>
+	<div class="mk-user-page" v-if="user" v-size="{ max: [500] }" :class="{ _section: narrow === false }">
+		<!-- TODO -->
+		<!-- <div class="punished" v-if="user.isSuspended"><Fa :icon="faExclamationTriangle" style="margin-right: 8px;"/> {{ $t('userSuspended') }}</div> -->
+		<!-- <div class="punished" v-if="user.isSilenced"><Fa :icon="faExclamationTriangle" style="margin-right: 8px;"/> {{ $t('userSilenced') }}</div> -->
 
-	<div class="profile _section _fitBottom">
-		<MkRemoteCaution v-if="user.host != null" :href="user.url" class="_content _vMargin"/>
+		<div class="main">
+			<div class="profile _vMargin" :class="{ _section: narrow === true }">
+				<MkRemoteCaution v-if="user.host != null" :href="user.url" class="_content _vMargin"/>
 
-		<div class="_content _vMargin" :key="user.id">
-			<div class="banner-container" :style="style">
-				<div class="banner" ref="banner" :style="style"></div>
-				<div class="fade"></div>
-				<div class="title">
-					<MkUserName class="name" :user="user" :nowrap="true"/>
-					<div class="bottom">
-						<span class="username"><MkAcct :user="user" :detail="true" /></span>
-						<span v-if="user.isAdmin" :title="$t('isAdmin')" style="color: var(--badge);"><Fa :icon="faBookmark"/></span>
-						<span v-if="!user.isAdmin && user.isModerator" :title="$t('isModerator')" style="color: var(--badge);"><Fa :icon="farBookmark"/></span>
-						<span v-if="user.isLocked" :title="$t('isLocked')"><Fa :icon="faLock"/></span>
-						<span v-if="user.isBot" :title="$t('isBot')"><Fa :icon="faRobot"/></span>
+				<div class="_content _panel _vMargin" :key="user.id">
+					<div class="banner-container" :style="style">
+						<div class="banner" ref="banner" :style="style"></div>
+						<div class="fade"></div>
+						<div class="title">
+							<MkUserName class="name" :user="user" :nowrap="true"/>
+							<div class="bottom">
+								<span class="username"><MkAcct :user="user" :detail="true" /></span>
+								<span v-if="user.isAdmin" :title="$t('isAdmin')" style="color: var(--badge);"><Fa :icon="faBookmark"/></span>
+								<span v-if="!user.isAdmin && user.isModerator" :title="$t('isModerator')" style="color: var(--badge);"><Fa :icon="farBookmark"/></span>
+								<span v-if="user.isLocked" :title="$t('isLocked')"><Fa :icon="faLock"/></span>
+								<span v-if="user.isBot" :title="$t('isBot')"><Fa :icon="faRobot"/></span>
+							</div>
+						</div>
+						<span class="followed" v-if="$store.getters.isSignedIn && $store.state.i.id != user.id && user.isFollowed">{{ $t('followsYou') }}</span>
+						<div class="actions" v-if="$store.getters.isSignedIn">
+							<button @click="menu" class="menu _button"><Fa :icon="faEllipsisH"/></button>
+							<MkFollowButton v-if="$store.state.i.id != user.id" :user="user" :inline="true" :transparent="false" :full="true" class="koudoku"/>
+						</div>
+					</div>
+					<MkAvatar class="avatar" :user="user" :disable-preview="true"/>
+					<div class="title">
+						<MkUserName :user="user" :nowrap="false" class="name"/>
+						<div class="bottom">
+							<span class="username"><MkAcct :user="user" :detail="true" /></span>
+							<span v-if="user.isAdmin" :title="$t('isAdmin')" style="color: var(--badge);"><Fa :icon="faBookmark"/></span>
+							<span v-if="!user.isAdmin && user.isModerator" :title="$t('isModerator')" style="color: var(--badge);"><Fa :icon="farBookmark"/></span>
+							<span v-if="user.isLocked" :title="$t('isLocked')"><Fa :icon="faLock"/></span>
+							<span v-if="user.isBot" :title="$t('isBot')"><Fa :icon="faRobot"/></span>
+						</div>
+					</div>
+					<div class="description">
+						<Mfm v-if="user.description" :text="user.description" :is-note="false" :author="user" :i="$store.state.i" :custom-emojis="user.emojis"/>
+						<p v-else class="empty">{{ $t('noAccountDescription') }}</p>
+					</div>
+					<div class="fields system">
+						<dl class="field" v-if="user.location">
+							<dt class="name"><Fa :icon="faMapMarker" fixed-width/> {{ $t('location') }}</dt>
+							<dd class="value">{{ user.location }}</dd>
+						</dl>
+						<dl class="field" v-if="user.birthday">
+							<dt class="name"><Fa :icon="faBirthdayCake" fixed-width/> {{ $t('birthday') }}</dt>
+							<dd class="value">{{ user.birthday.replace('-', '/').replace('-', '/') }} ({{ $t('yearsOld', { age }) }})</dd>
+						</dl>
+						<dl class="field">
+							<dt class="name"><Fa :icon="faCalendarAlt" fixed-width/> {{ $t('registeredDate') }}</dt>
+							<dd class="value">{{ new Date(user.createdAt).toLocaleString() }} (<MkTime :time="user.createdAt"/>)</dd>
+						</dl>
+					</div>
+					<div class="fields" v-if="user.fields.length > 0">
+						<dl class="field" v-for="(field, i) in user.fields" :key="i">
+							<dt class="name">
+								<Mfm :text="field.name" :plain="true" :custom-emojis="user.emojis" :colored="false"/>
+							</dt>
+							<dd class="value">
+								<Mfm :text="field.value" :author="user" :i="$store.state.i" :custom-emojis="user.emojis" :colored="false"/>
+							</dd>
+						</dl>
+					</div>
+					<div class="status">
+						<MkA :to="userPage(user)" :class="{ active: page === 'index' }">
+							<b>{{ number(user.notesCount) }}</b>
+							<span>{{ $t('notes') }}</span>
+						</MkA>
+						<MkA :to="userPage(user, 'following')" :class="{ active: page === 'following' }">
+							<b>{{ number(user.followingCount) }}</b>
+							<span>{{ $t('following') }}</span>
+						</MkA>
+						<MkA :to="userPage(user, 'followers')" :class="{ active: page === 'followers' }">
+							<b>{{ number(user.followersCount) }}</b>
+							<span>{{ $t('followers') }}</span>
+						</MkA>
 					</div>
 				</div>
-				<span class="followed" v-if="$store.getters.isSignedIn && $store.state.i.id != user.id && user.isFollowed">{{ $t('followsYou') }}</span>
-				<div class="actions" v-if="$store.getters.isSignedIn">
-					<button @click="menu" class="menu _button"><Fa :icon="faEllipsisH"/></button>
-					<MkFollowButton v-if="$store.state.i.id != user.id" :user="user" :inline="true" :transparent="false" :full="true" class="koudoku"/>
+			</div>
+
+			<template v-if="page === 'index'">
+				<div v-if="user.pinnedNotes.length > 0" :class="{ _section: narrow === true, _vMargin: narrow === false }">
+					<XNote v-for="note in user.pinnedNotes" class="note _content _vMargin" :note="note" @update:note="pinnedNoteUpdated(note, $event)" :key="note.id" :detail="true" :pinned="true"/>
 				</div>
-			</div>
-			<MkAvatar class="avatar" :user="user" :disable-preview="true"/>
-			<div class="title">
-				<MkUserName :user="user" :nowrap="false" class="name"/>
-				<div class="bottom">
-					<span class="username"><MkAcct :user="user" :detail="true" /></span>
-					<span v-if="user.isAdmin" :title="$t('isAdmin')" style="color: var(--badge);"><Fa :icon="faBookmark"/></span>
-					<span v-if="!user.isAdmin && user.isModerator" :title="$t('isModerator')" style="color: var(--badge);"><Fa :icon="farBookmark"/></span>
-					<span v-if="user.isLocked" :title="$t('isLocked')"><Fa :icon="faLock"/></span>
-					<span v-if="user.isBot" :title="$t('isBot')"><Fa :icon="faRobot"/></span>
+				<div v-if="narrow === true" class="_section">
+					<XPhotos class="_content _vMargin" :user="user" :key="user.id"/>
+					<XActivity class="_content _vMargin" :user="user" :key="user.id"/>
 				</div>
-			</div>
-			<div class="description">
-				<Mfm v-if="user.description" :text="user.description" :is-note="false" :author="user" :i="$store.state.i" :custom-emojis="user.emojis"/>
-				<p v-else class="empty">{{ $t('noAccountDescription') }}</p>
-			</div>
-			<div class="fields system">
-				<dl class="field" v-if="user.location">
-					<dt class="name"><Fa :icon="faMapMarker" fixed-width/> {{ $t('location') }}</dt>
-					<dd class="value">{{ user.location }}</dd>
-				</dl>
-				<dl class="field" v-if="user.birthday">
-					<dt class="name"><Fa :icon="faBirthdayCake" fixed-width/> {{ $t('birthday') }}</dt>
-					<dd class="value">{{ user.birthday.replace('-', '/').replace('-', '/') }} ({{ $t('yearsOld', { age }) }})</dd>
-				</dl>
-				<dl class="field">
-					<dt class="name"><Fa :icon="faCalendarAlt" fixed-width/> {{ $t('registeredDate') }}</dt>
-					<dd class="value">{{ new Date(user.createdAt).toLocaleString() }} (<MkTime :time="user.createdAt"/>)</dd>
-				</dl>
-			</div>
-			<div class="fields" v-if="user.fields.length > 0">
-				<dl class="field" v-for="(field, i) in user.fields" :key="i">
-					<dt class="name">
-						<Mfm :text="field.name" :plain="true" :custom-emojis="user.emojis" :colored="false"/>
-					</dt>
-					<dd class="value">
-						<Mfm :text="field.value" :author="user" :i="$store.state.i" :custom-emojis="user.emojis" :colored="false"/>
-					</dd>
-				</dl>
-			</div>
-			<div class="status">
-				<MkA :to="userPage(user)" :class="{ active: page === 'index' }">
-					<b>{{ number(user.notesCount) }}</b>
-					<span>{{ $t('notes') }}</span>
-				</MkA>
-				<MkA :to="userPage(user, 'following')" :class="{ active: page === 'following' }">
-					<b>{{ number(user.followingCount) }}</b>
-					<span>{{ $t('following') }}</span>
-				</MkA>
-				<MkA :to="userPage(user, 'followers')" :class="{ active: page === 'followers' }">
-					<b>{{ number(user.followersCount) }}</b>
-					<span>{{ $t('followers') }}</span>
-				</MkA>
-			</div>
+				<div :class="{ _section: narrow === true, _vMargin: narrow === false }">
+					<XUserTimeline :user="user" class="_content"/>
+				</div>
+			</template>
+			<XFollowList v-else-if="page === 'following'" :class="{ _section: narrow === true, _vMargin: narrow === false }" type="following" :user="user"/>
+			<XFollowList v-else-if="page === 'followers'" :class="{ _section: narrow === true, _vMargin: narrow === false }" type="followers" :user="user"/>
+		</div>
+		<div class="side" v-if="narrow === false">
+			<XPhotos class="_vMargin" :user="user" :key="user.id"/>
+			<XActivity class="_vMargin" :user="user" :key="user.id"/>
 		</div>
 	</div>
-
-	<template v-if="page === 'index'">
-		<div class="_section">
-			<div class="_content _vMargin" v-if="user.pinnedNotes.length > 0">
-				<XNote v-for="note in user.pinnedNotes" class="note _vMargin" :note="note" @update:note="pinnedNoteUpdated(note, $event)" :key="note.id" :detail="true" :pinned="true"/>
-			</div>
-			<MkFolder :body-togglable="true" class="_content _vMargin" persist-key="user-images">
-				<template #header><Fa :icon="faImage" style="margin-right: 0.5em;"/>{{ $t('images') }}</template>
-				<div>
-					<XPhotos :user="user" :key="user.id"/>
-				</div>
-			</MkFolder>
-			<MkFolder :body-togglable="true" class="_content _vMargin" persist-key="user-activity">
-				<template #header><Fa :icon="faChartBar" style="margin-right: 0.5em;"/>{{ $t('activity') }}</template>
-				<div>
-					<XActivity :user="user" :key="user.id"/>
-				</div>
-			</MkFolder>
-		</div>
-		<div class="_section">
-			<XUserTimeline :user="user" class="_content"/>
-		</div>
-	</template>
-	<XFollowList v-else-if="page === 'following'" type="following" :user="user"/>
-	<XFollowList v-else-if="page === 'followers'" type="followers" :user="user"/>
-</div>
-<div v-else-if="error">
-	<MkError @retry="fetch()"/>
+	<div v-else-if="error">
+		<MkError @retry="fetch()"/>
+	</div>
 </div>
 </template>
 
@@ -170,6 +168,7 @@ export default defineComponent({
 			user: null,
 			error: null,
 			parallaxAnimationId: null,
+			narrow: null,
 			faExclamationTriangle, faEllipsisH, faRobot, faLock, faBookmark, farBookmark, faChartBar, faImage, faBirthdayCake, faMapMarker, faCalendarAlt
 		};
 	},
@@ -197,6 +196,7 @@ export default defineComponent({
 
 	mounted() {
 		window.requestAnimationFrame(this.parallaxLoop);
+		this.narrow = this.$el.clientWidth < 1000;
 	},
 
 	beforeUnmount() {
@@ -254,220 +254,234 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .mk-user-page {
-	> .punished {
-		font-size: 0.8em;
-		padding: 16px;
-	}
+	display: flex;
+	max-width: 1050px;
+	margin: 0 auto;
+	
+	> .main {
+		flex: 1;
 
-	> .profile {
-		> ._content {
-			position: relative;
-			overflow: hidden;
+		> .punished {
+			font-size: 0.8em;
+			padding: 16px;
+		}
 
-			> .banner-container {
+		> .profile {
+			> ._content {
 				position: relative;
-				height: 250px;
 				overflow: hidden;
-				background-size: cover;
-				background-position: center;
-				border-radius: 12px;
 
-				> .banner {
-					height: 100%;
-					background-color: #4c5e6d;
+				> .banner-container {
+					position: relative;
+					height: 250px;
+					overflow: hidden;
 					background-size: cover;
 					background-position: center;
-					box-shadow: 0 0 128px rgba(0, 0, 0, 0.5) inset;
-					will-change: background-position;
-				}
 
-				> .fade {
-					position: absolute;
-					bottom: 0;
-					left: 0;
-					width: 100%;
-					height: 78px;
-					background: linear-gradient(transparent, rgba(#000, 0.7));
-				}
+					> .banner {
+						height: 100%;
+						background-color: #4c5e6d;
+						background-size: cover;
+						background-position: center;
+						box-shadow: 0 0 128px rgba(0, 0, 0, 0.5) inset;
+						will-change: background-position;
+					}
 
-				> .followed {
-					position: absolute;
-					top: 12px;
-					left: 12px;
-					padding: 4px 8px;
-					color: #fff;
-					background: rgba(0, 0, 0, 0.7);
-					font-size: 0.7em;
-					border-radius: 6px;
-				}
+					> .fade {
+						position: absolute;
+						bottom: 0;
+						left: 0;
+						width: 100%;
+						height: 78px;
+						background: linear-gradient(transparent, rgba(#000, 0.7));
+					}
 
-				> .actions {
-					position: absolute;
-					top: 12px;
-					right: 12px;
-					-webkit-backdrop-filter: blur(8px);
-					backdrop-filter: blur(8px);
-					background: rgba(0, 0, 0, 0.2);
-					padding: 8px;
-					border-radius: 24px;
-
-					> .menu {
-						vertical-align: bottom;
-						height: 31px;
-						width: 31px;
+					> .followed {
+						position: absolute;
+						top: 12px;
+						left: 12px;
+						padding: 4px 8px;
 						color: #fff;
-						text-shadow: 0 0 8px #000;
-						font-size: 16px;
+						background: rgba(0, 0, 0, 0.7);
+						font-size: 0.7em;
+						border-radius: 6px;
 					}
 
-					> .koudoku {
-						margin-left: 4px;
-						vertical-align: bottom;
-					}
-				}
+					> .actions {
+						position: absolute;
+						top: 12px;
+						right: 12px;
+						-webkit-backdrop-filter: blur(8px);
+						backdrop-filter: blur(8px);
+						background: rgba(0, 0, 0, 0.2);
+						padding: 8px;
+						border-radius: 24px;
 
-				> .title {
-					position: absolute;
-					bottom: 0;
-					left: 0;
-					width: 100%;
-					padding: 0 0 8px 154px;
-					box-sizing: border-box;
-					color: #fff;
+						> .menu {
+							vertical-align: bottom;
+							height: 31px;
+							width: 31px;
+							color: #fff;
+							text-shadow: 0 0 8px #000;
+							font-size: 16px;
+						}
 
-					> .name {
-						display: block;
-						margin: 0;
-						line-height: 32px;
-						font-weight: bold;
-						font-size: 1.8em;
-						text-shadow: 0 0 8px #000;
+						> .koudoku {
+							margin-left: 4px;
+							vertical-align: bottom;
+						}
 					}
 
-					> .bottom {
-						> * {
-							display: inline-block;
-							margin-right: 16px;
-							line-height: 20px;
-							opacity: 0.8;
+					> .title {
+						position: absolute;
+						bottom: 0;
+						left: 0;
+						width: 100%;
+						padding: 0 0 8px 154px;
+						box-sizing: border-box;
+						color: #fff;
 
-							&.username {
-								font-weight: bold;
+						> .name {
+							display: block;
+							margin: 0;
+							line-height: 32px;
+							font-weight: bold;
+							font-size: 1.8em;
+							text-shadow: 0 0 8px #000;
+						}
+
+						> .bottom {
+							> * {
+								display: inline-block;
+								margin-right: 16px;
+								line-height: 20px;
+								opacity: 0.8;
+
+								&.username {
+									font-weight: bold;
+								}
 							}
 						}
 					}
 				}
-			}
 
-			> .title {
-				display: none;
-				text-align: center;
-				padding: 50px 8px 16px 8px;
-				font-weight: bold;
-				border-bottom: solid 1px var(--divider);
-
-				> .bottom {
-					> * {
-						display: inline-block;
-						margin-right: 8px;
-						opacity: 0.8;
-					}
-				}
-			}
-
-			> .avatar {
-				display: block;
-				position: absolute;
-				top: 170px;
-				left: 16px;
-				z-index: 2;
-				width: 120px;
-				height: 120px;
-				box-shadow: 1px 1px 3px rgba(#000, 0.2);
-			}
-
-			> .description {
-				padding: 24px 24px 24px 154px;
-				font-size: 0.95em;
-
-				> .empty {
-					margin: 0;
-					opacity: 0.5;
-				}
-			}
-
-			> .fields {
-				padding: 24px;
-				font-size: 0.9em;
-				border-top: solid 1px var(--divider);
-
-				> .field {
-					display: flex;
-					padding: 0;
-					margin: 0;
-					align-items: center;
-
-					&:not(:last-child) {
-						margin-bottom: 8px;
-					}
-
-					> .name {
-						width: 30%;
-						overflow: hidden;
-						white-space: nowrap;
-						text-overflow: ellipsis;
-						font-weight: bold;
-						text-align: center;
-					}
-
-					> .value {
-						width: 70%;
-						overflow: hidden;
-						white-space: nowrap;
-						text-overflow: ellipsis;
-					}
-				}
-
-				&.system > .field > .name {
-				}
-			}
-
-			> .status {
-				display: flex;
-				padding: 24px;
-				border-top: solid 1px var(--divider);
-
-				> a {
-					flex: 1;
+				> .title {
+					display: none;
 					text-align: center;
+					padding: 50px 8px 16px 8px;
+					font-weight: bold;
+					border-bottom: solid 1px var(--divider);
 
-					&.active {
-						color: var(--accent);
+					> .bottom {
+						> * {
+							display: inline-block;
+							margin-right: 8px;
+							opacity: 0.8;
+						}
+					}
+				}
+
+				> .avatar {
+					display: block;
+					position: absolute;
+					top: 170px;
+					left: 16px;
+					z-index: 2;
+					width: 120px;
+					height: 120px;
+					box-shadow: 1px 1px 3px rgba(#000, 0.2);
+				}
+
+				> .description {
+					padding: 24px 24px 24px 154px;
+					font-size: 0.95em;
+
+					> .empty {
+						margin: 0;
+						opacity: 0.5;
+					}
+				}
+
+				> .fields {
+					padding: 24px;
+					font-size: 0.9em;
+					border-top: solid 1px var(--divider);
+
+					> .field {
+						display: flex;
+						padding: 0;
+						margin: 0;
+						align-items: center;
+
+						&:not(:last-child) {
+							margin-bottom: 8px;
+						}
+
+						> .name {
+							width: 30%;
+							overflow: hidden;
+							white-space: nowrap;
+							text-overflow: ellipsis;
+							font-weight: bold;
+							text-align: center;
+						}
+
+						> .value {
+							width: 70%;
+							overflow: hidden;
+							white-space: nowrap;
+							text-overflow: ellipsis;
+						}
 					}
 
-					&:hover {
-						text-decoration: none;
+					&.system > .field > .name {
 					}
+				}
 
-					> b {
-						display: block;
-						line-height: 16px;
-					}
+				> .status {
+					display: flex;
+					padding: 24px;
+					border-top: solid 1px var(--divider);
 
-					> span {
-						font-size: 70%;
+					> a {
+						flex: 1;
+						text-align: center;
+
+						&.active {
+							color: var(--accent);
+						}
+
+						&:hover {
+							text-decoration: none;
+						}
+
+						> b {
+							display: block;
+							line-height: 16px;
+						}
+
+						> span {
+							font-size: 70%;
+						}
 					}
 				}
 			}
 		}
+
+		> .content {
+			margin-bottom: var(--margin);
+		}
 	}
 
-	> .content {
-		margin-bottom: var(--margin);
+	> .side {
+		flex-basis: 300px;
+		margin-left: var(--margin);
 	}
 
 	&.max-width_500px {
-		> .profile > ._content {
+		display: block;
+
+		> .main > .profile > ._content {
 			> .banner-container {
 				height: 140px;
 
diff --git a/src/client/pages/welcome.entrance.vue b/src/client/pages/welcome.entrance.vue
index b1cd6d50c6..d5ea47bb85 100644
--- a/src/client/pages/welcome.entrance.vue
+++ b/src/client/pages/welcome.entrance.vue
@@ -1,11 +1,5 @@
 <template>
 <div class="rsqzvsbo _section" v-if="meta">
-	<div class="about">
-		<h1>{{ instanceName }}</h1>
-		<div class="desc" v-html="meta.description || $t('introMisskey')"></div>
-		<MkButton @click="signup()" style="display: inline-block; margin-right: 16px;" primary>{{ $t('signup') }}</MkButton>
-		<MkButton @click="signin()" style="display: inline-block;">{{ $t('login') }}</MkButton>
-	</div>
 	<div class="blocks">
 		<XBlock class="block" v-for="path in meta.pinnedPages" :initial-path="path" :key="path"/>
 	</div>
@@ -68,28 +62,6 @@ export default defineComponent({
 .rsqzvsbo {
 	text-align: center;
 
-	> .about {
-		display: inline-block;
-		padding: 24px;
-		margin-bottom: var(--margin);
-		-webkit-backdrop-filter: blur(8px);
-		backdrop-filter: blur(8px);
-		background: rgba(0, 0, 0, 0.5);
-		border-radius: var(--radius);
-		text-align: center;
-		box-sizing: border-box;
-		min-width: 300px;
-		max-width: 800px;
-
-		&, * {
-			color: #fff !important;
-		}
-
-		> h1 {
-			margin: 0 0 16px 0;
-		}
-	}
-
 	> .blocks {
 		display: grid;
 		grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
diff --git a/src/client/router.ts b/src/client/router.ts
index 5ad3345d55..a21c6494b9 100644
--- a/src/client/router.ts
+++ b/src/client/router.ts
@@ -22,7 +22,7 @@ export const router = createRouter({
 		{ path: '/@:user/pages/:page', component: page('page'), props: route => ({ pageName: route.params.page, username: route.params.user }) },
 		{ path: '/@:user/pages/:pageName/view-source', component: page('page-editor/page-editor'), props: route => ({ initUser: route.params.user, initPageName: route.params.pageName }) },
 		{ path: '/@:acct/room', props: true, component: page('room/room') },
-		{ path: '/settings/:page?', name: 'settings', component: page('settings/index'), props: route => ({ page: route.params.page || null }) },
+		{ path: '/settings/:page(.*)?', name: 'settings', component: page('settings/index'), props: route => ({ page: route.params.page || null }) },
 		{ path: '/announcements', component: page('announcements') },
 		{ path: '/about', component: page('about') },
 		{ path: '/about-misskey', component: page('about-misskey') },
@@ -57,7 +57,6 @@ export const router = createRouter({
 		{ path: '/my/groups/:group', component: page('my-groups/group') },
 		{ path: '/my/antennas', component: page('my-antennas/index') },
 		{ path: '/my/clips', component: page('my-clips/index') },
-		{ path: '/my/apps', component: page('apps') },
 		{ path: '/scratchpad', component: page('scratchpad') },
 		{ path: '/instance', component: page('instance/index') },
 		{ path: '/instance/emojis', component: page('instance/emojis') },
diff --git a/src/client/scripts/sound.ts b/src/client/scripts/sound.ts
new file mode 100644
index 0000000000..13fd9a80f5
--- /dev/null
+++ b/src/client/scripts/sound.ts
@@ -0,0 +1,24 @@
+import { device } from '@/cold-storage';
+
+const cache = new Map<string, HTMLAudioElement>();
+
+export function play(type: string) {
+	const sound = device.get('sound_' + type as any);
+	if (sound.type == null) return;
+	playFile(sound.type, sound.volume);
+}
+
+export function playFile(file: string, volume: number) {
+	const masterVolume = device.get('sound_masterVolume');
+	if (masterVolume === 0) return;
+
+	let audio: HTMLAudioElement;
+	if (cache.has(file)) {
+		audio = cache.get(file);
+	} else {
+		audio = new Audio(`/assets/sounds/${file}.mp3`);
+		cache.set(file, audio);
+	}
+	audio.volume = masterVolume - ((1 - volume) * masterVolume);
+	audio.play();
+}
diff --git a/src/client/scripts/theme.ts b/src/client/scripts/theme.ts
index c1fc88bf0e..c1580c6367 100644
--- a/src/client/scripts/theme.ts
+++ b/src/client/scripts/theme.ts
@@ -15,19 +15,12 @@ export const darkTheme: Theme = require('../themes/_dark.json5');
 export const themeProps = Object.keys(lightTheme.props).filter(key => !key.startsWith('X'));
 
 export const builtinThemes = [
-	require('../themes/l-white.json5'),
-	require('../themes/l-red.json5'),
-	require('../themes/l-green.json5'),
-	require('../themes/l-blue.json5'),
+	require('../themes/l-light.json5'),
 	require('../themes/l-apricot.json5'),
 
-	require('../themes/d-black.json5'),
-	require('../themes/d-red.json5'),
-	require('../themes/d-green.json5'),
-	require('../themes/d-blue.json5'),
+	require('../themes/d-dark.json5'),
 	require('../themes/d-persimmon.json5'),
-
-	require('../themes/d-battery-saver.json5'),
+	require('../themes/d-black.json5'),
 ] as Theme[];
 
 let timeout = null;
diff --git a/src/client/store.ts b/src/client/store.ts
index cb7f993378..2c63e79503 100644
--- a/src/client/store.ts
+++ b/src/client/store.ts
@@ -55,7 +55,7 @@ export const defaultDeviceUserSettings = {
 export const defaultDeviceSettings = {
 	lang: null,
 	loadRawImages: false,
-	alwaysShowNsfw: false,
+	nsfw: 'respect', // respect, force, ignore
 	useOsNativeEmojis: false,
 	serverDisconnectedBehavior: 'quiet',
 	accounts: [],
@@ -87,14 +87,6 @@ export const defaultDeviceSettings = {
 	deckColumnAlign: 'left',
 	deckAlwaysShowMainColumn: true,
 	deckMainColumnPlace: 'left',
-	sfxVolume: 0.3,
-	sfxNote: 'syuilo/down',
-	sfxNoteMy: 'syuilo/up',
-	sfxNotification: 'syuilo/pope2',
-	sfxChat: 'syuilo/pope1',
-	sfxChatBg: 'syuilo/waon',
-	sfxAntenna: 'syuilo/triple',
-	sfxChannel: 'syuilo/square-pico',
 	userData: {},
 };
 
diff --git a/src/client/style.scss b/src/client/style.scss
index d7a78dc9c9..85a54706e6 100644
--- a/src/client/style.scss
+++ b/src/client/style.scss
@@ -448,10 +448,14 @@ hr {
 	opacity: 0.7;
 }
 
+._monospace {
+	font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
+}
+
 ._code {
+	@extend ._monospace;
 	background: #2d2d2d;
 	color: #ccc;
-	font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
 	font-size: 14px;
 	line-height: 1.5;
 	padding: 5px;
diff --git a/src/client/themes/_dark.json5 b/src/client/themes/_dark.json5
index ee6d9b49e9..f290586eb4 100644
--- a/src/client/themes/_dark.json5
+++ b/src/client/themes/_dark.json5
@@ -19,6 +19,7 @@
 		divider: 'rgba(255, 255, 255, 0.1)',
 		indicator: '@accent',
 		panel: '#000',
+		panelHighlight: ':lighten<3<@panel',
 		panelHeaderBg: ':lighten<3<@panel',
 		panelHeaderFg: '@fg',
 		panelHeaderDivider: 'rgba(0, 0, 0, 0)',
diff --git a/src/client/themes/_light.json5 b/src/client/themes/_light.json5
index 8821999395..0a1125cab7 100644
--- a/src/client/themes/_light.json5
+++ b/src/client/themes/_light.json5
@@ -19,6 +19,7 @@
 		divider: 'rgba(0, 0, 0, 0.1)',
 		indicator: '@accent',
 		panel: '#fff',
+		panelHighlight: ':darken<3<@panel',
 		panelHeaderBg: ':lighten<3<@panel',
 		panelHeaderFg: '@fg',
 		panelHeaderDivider: 'rgba(0, 0, 0, 0)',
diff --git a/src/client/themes/d-battery-saver.json5 b/src/client/themes/d-battery-saver.json5
deleted file mode 100644
index e6499ace96..0000000000
--- a/src/client/themes/d-battery-saver.json5
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-	id: '8c539dc1-0fab-4d47-9194-39c508e9bfe1',
-
-	name: 'Battery Saver',
-	author: 'syuilo',
-
-	base: 'dark',
-
-	props: {
-		divider: '#2d2d2d',
-		panelHeaderBg: '@panel',
-		panelHeaderDivider: '@divider',
-		panelShadow: '" 0 0 0 1px var(--divider)',
-		shadow: 'rgba(255, 255, 255, 0.05)',
-		modalBg: 'rgba(255, 255, 255, 0.1)',
-		messageBg: '#1d1d1d',
-	},
-}
diff --git a/src/client/themes/d-black.json5 b/src/client/themes/d-black.json5
index 1e30d56473..b52e0fc394 100644
--- a/src/client/themes/d-black.json5
+++ b/src/client/themes/d-black.json5
@@ -1,29 +1,19 @@
 {
-	id: '8050783a-7f63-445a-b270-36d0f6ba1677',
+	id: '8c539dc1-0fab-4d47-9194-39c508e9bfe1',
 
 	name: 'Mi Black',
 	author: 'syuilo',
-	desc: 'Default light theme',
 
 	base: 'dark',
 
 	props: {
-		bg: '#272727',
-		fg: 'rgb(199, 209, 216)',
-		fgHighlighted: '#fff',
-		divider: 'rgba(255, 255, 255, 0.14)',
-		panel: '@bg',
-		panelShadow: '" 0 0 0 1px var(--divider)',
+		divider: '#2d2d2d',
+		panel: '#0a0a0a',
 		panelHeaderBg: '@panel',
 		panelHeaderDivider: '@divider',
-		infoFg: '@accent',
-		infoBg: 'rgb(0, 0, 0)',
-		header: ':alpha<0.7<@bg',
-		navBg: '#363636',
-		renote: '@accent',
-		mention: '#da6d35',
-		mentionMe: '#d44c4c',
-		hashtag: '#4cb8d4',
-		link: '@accent',
+		panelShadow: '" 0 8px 24px rgb(0 0 0 / 25%)',
+		shadow: 'rgba(255, 255, 255, 0.05)',
+		modalBg: 'rgba(255, 255, 255, 0.1)',
+		messageBg: '#1d1d1d',
 	},
 }
diff --git a/src/client/themes/d-blue.json5 b/src/client/themes/d-blue.json5
deleted file mode 100644
index 96e6240e90..0000000000
--- a/src/client/themes/d-blue.json5
+++ /dev/null
@@ -1,29 +0,0 @@
-{
-	id: 'ab4eb6d5-dcc0-4457-8a3c-98aad8ea3979',
-
-	name: 'Mi D Blue',
-	author: 'syuilo',
-
-	base: 'dark',
-
-	props: {
-		accent: 'rgb(81 185 189)',
-		bg: 'rgb(54, 54, 54)',
-		fg: 'rgb(199, 209, 216)',
-		fgHighlighted: '#fff',
-		divider: 'rgba(255, 255, 255, 0.14)',
-		panel: '@bg',
-		panelShadow: '" 0 0 0 1px var(--divider)',
-		panelHeaderBg: '@panel',
-		panelHeaderDivider: '@divider',
-		infoFg: '@accent',
-		infoBg: 'rgb(0, 0, 0)',
-		header: ':alpha<0.7<@bg',
-		navBg: 'rgb(71, 71, 71)',
-		renote: '@accent',
-		mention: '#da6d35',
-		mentionMe: '#d44c4c',
-		hashtag: '#4cb8d4',
-		link: '@accent',
-	},
-}
diff --git a/src/client/themes/d-red.json5 b/src/client/themes/d-dark.json5
similarity index 65%
rename from src/client/themes/d-red.json5
rename to src/client/themes/d-dark.json5
index 0f137322c0..7dd29b4a0f 100644
--- a/src/client/themes/d-red.json5
+++ b/src/client/themes/d-dark.json5
@@ -1,25 +1,25 @@
 {
-	id: '60960086-26da-4f3c-bb0c-f6a4f89e0f60',
+	id: '8050783a-7f63-445a-b270-36d0f6ba1677',
 
-	name: 'Mi D Red',
+	name: 'Mi Dark',
 	author: 'syuilo',
+	desc: 'Default light theme',
 
 	base: 'dark',
 
 	props: {
-		accent: 'rgb(196 115 69)',
-		bg: 'rgb(54, 54, 54)',
+		bg: '#232323',
 		fg: 'rgb(199, 209, 216)',
 		fgHighlighted: '#fff',
 		divider: 'rgba(255, 255, 255, 0.14)',
-		panel: '@bg',
-		panelShadow: '" 0 0 0 1px var(--divider)',
+		panel: '#2d2d2d',
+		panelShadow: '" 0 8px 24px rgb(0 0 0 / 25%)',
 		panelHeaderBg: '@panel',
 		panelHeaderDivider: '@divider',
 		infoFg: '@accent',
 		infoBg: 'rgb(0, 0, 0)',
 		header: ':alpha<0.7<@bg',
-		navBg: 'rgb(71, 71, 71)',
+		navBg: '#363636',
 		renote: '@accent',
 		mention: '#da6d35',
 		mentionMe: '#d44c4c',
diff --git a/src/client/themes/d-green.json5 b/src/client/themes/d-green.json5
deleted file mode 100644
index f1f90d1c78..0000000000
--- a/src/client/themes/d-green.json5
+++ /dev/null
@@ -1,29 +0,0 @@
-{
-	id: '326dc4bf-29d9-45b4-889e-bdc33e84919b',
-
-	name: 'Mi D Green',
-	author: 'syuilo',
-
-	base: 'dark',
-
-	props: {
-		accent: 'rgb(152, 196, 69)',
-		bg: 'rgb(54, 54, 54)',
-		fg: 'rgb(199, 209, 216)',
-		fgHighlighted: '#fff',
-		divider: 'rgba(255, 255, 255, 0.14)',
-		panel: '@bg',
-		panelShadow: '" 0 0 0 1px var(--divider)',
-		panelHeaderBg: '@panel',
-		panelHeaderDivider: '@divider',
-		infoFg: '@accent',
-		infoBg: 'rgb(0, 0, 0)',
-		header: ':alpha<0.7<@bg',
-		navBg: 'rgb(71, 71, 71)',
-		renote: '@accent',
-		mention: '#da6d35',
-		mentionMe: '#d44c4c',
-		hashtag: '#4cb8d4',
-		link: '@accent',
-	},
-}
diff --git a/src/client/themes/d-persimmon.json5 b/src/client/themes/d-persimmon.json5
index 2c32e0797b..067911ace6 100644
--- a/src/client/themes/d-persimmon.json5
+++ b/src/client/themes/d-persimmon.json5
@@ -1,23 +1,23 @@
 {
 	id: 'c503d768-7c70-4db2-a4e6-08264304bc8d',
 
-	name: 'Ai Persimmon',
+	name: 'Mi Persimmon',
 	author: 'syuilo',
 
 	base: 'dark',
 
 	props: {
 		accent: 'rgb(206, 102, 65)',
-		bg: 'rgb(41, 43, 41)',
+		bg: 'rgb(31, 33, 31)',
 		fg: '#cdd8c7',
 		fgHighlighted: '#fff',
 		divider: 'rgba(255, 255, 255, 0.14)',
-		panel: '@bg',
-		panelShadow: '" 0 0 0 1px var(--divider)',
+		panel: 'rgb(41, 43, 41)',
+		panelShadow: '" 0 8px 24px rgb(0 0 0 / 25%)',
 		panelHeaderBg: '@panel',
 		panelHeaderDivider: '@divider',
-		infoFg: '@accent',
-		infoBg: 'rgb(0, 0, 0)',
+		infoFg: '@fg',
+		infoBg: '#333c3b',
 		header: ':alpha<0.7<@bg',
 		navBg: '#1f211f',
 		renote: '@accent',
diff --git a/src/client/themes/l-apricot.json5 b/src/client/themes/l-apricot.json5
index 7fbc2b47c7..4bdeea21a5 100644
--- a/src/client/themes/l-apricot.json5
+++ b/src/client/themes/l-apricot.json5
@@ -1,7 +1,7 @@
 {
 	id: '0ff48d43-aab3-46e7-ab12-8492110d2e2b',
 
-	name: 'Ai Apricot',
+	name: 'Mi Apricot',
 	author: 'syuilo',
 
 	base: 'light',
diff --git a/src/client/themes/l-blue.json5 b/src/client/themes/l-blue.json5
deleted file mode 100644
index 06c06da08b..0000000000
--- a/src/client/themes/l-blue.json5
+++ /dev/null
@@ -1,21 +0,0 @@
-{
-	id: 'ad18a23b-6af6-4af0-9ed4-600568250574',
-
-	name: 'Mi L Blue',
-	author: 'syuilo',
-
-	base: 'light',
-
-	props: {
-		accent: '#4dbccc',
-		bg: '#fff',
-		fg: '#5d5d5d',
-		divider: 'rgb(223, 223, 223)',
-		header: ':alpha<0.7<@bg',
-		navBg: '@bg',
-		panel: '@bg',
-		panelShadow: '" 0 0 0 1px var(--divider)',
-		panelHeaderDivider: '@divider',
-		messageBg: '#dedede',
-	},
-}
diff --git a/src/client/themes/l-green.json5 b/src/client/themes/l-green.json5
deleted file mode 100644
index 5a9eb8e0a2..0000000000
--- a/src/client/themes/l-green.json5
+++ /dev/null
@@ -1,21 +0,0 @@
-{
-	id: 'a55af79a-12bf-4f8d-a0cc-718957ad59b4',
-
-	name: 'Mi L Green',
-	author: 'syuilo',
-
-	base: 'light',
-
-	props: {
-		accent: '#8bcc4d',
-		bg: '#fff',
-		fg: '#5d5d5d',
-		divider: 'rgb(223, 223, 223)',
-		header: ':alpha<0.7<@bg',
-		navBg: '@bg',
-		panel: '@bg',
-		panelShadow: '" 0 0 0 1px var(--divider)',
-		panelHeaderDivider: '@divider',
-		messageBg: '#dedede',
-	},
-}
diff --git a/src/client/themes/l-white.json5 b/src/client/themes/l-light.json5
similarity index 95%
rename from src/client/themes/l-white.json5
rename to src/client/themes/l-light.json5
index 9daa60c119..f7ec85d01e 100644
--- a/src/client/themes/l-white.json5
+++ b/src/client/themes/l-light.json5
@@ -1,7 +1,7 @@
 {
 	id: '4eea646f-7afa-4645-83e9-83af0333cd37',
 
-	name: 'Mi White',
+	name: 'Mi Light',
 	author: 'syuilo',
 	desc: 'Default light theme',
 
diff --git a/src/client/themes/l-red.json5 b/src/client/themes/l-red.json5
deleted file mode 100644
index 22139c3aaa..0000000000
--- a/src/client/themes/l-red.json5
+++ /dev/null
@@ -1,21 +0,0 @@
-{
-	id: '957db7cb-30fb-4c80-bf0b-04198e7ae7e3',
-
-	name: 'Mi L Red',
-	author: 'syuilo',
-
-	base: 'light',
-
-	props: {
-		accent: '#fb734d',
-		bg: '#fff',
-		fg: '#5d5d5d',
-		divider: 'rgb(223, 223, 223)',
-		header: ':alpha<0.7<@bg',
-		navBg: '@bg',
-		panel: '@bg',
-		panelShadow: '" 0 0 0 1px var(--divider)',
-		panelHeaderDivider: '@divider',
-		messageBg: '#dedede',
-	},
-}
diff --git a/src/client/ui/_common_/common.vue b/src/client/ui/_common_/common.vue
index d06cbb9869..469220806d 100644
--- a/src/client/ui/_common_/common.vue
+++ b/src/client/ui/_common_/common.vue
@@ -15,8 +15,9 @@
 
 <script lang="ts">
 import { defineAsyncComponent, defineComponent } from 'vue';
-import { stream, sound, popup, popups, uploads, pendingApiRequestsCount } from '@/os';
+import { stream, popup, popups, uploads, pendingApiRequestsCount } from '@/os';
 import { store } from '@/store';
+import * as sound from '@/scripts/sound';
 
 export default defineComponent({
 	components: {
@@ -38,7 +39,7 @@ export default defineComponent({
 				}, {}, 'closed');
 			}
 
-			sound('notification');
+			sound.play('notification');
 		};
 
 		if (store.getters.isSignedIn) {
diff --git a/src/client/ui/visitor.vue b/src/client/ui/visitor.vue
index 56cc270be7..0d83088882 100644
--- a/src/client/ui/visitor.vue
+++ b/src/client/ui/visitor.vue
@@ -1,209 +1,19 @@
 <template>
-<div class="mk-app">
-	<header>
-		<MkA class="link" to="/">{{ $t('home') }}</MkA>
-		<MkA class="link" to="/announcements">{{ $t('announcements') }}</MkA>
-		<MkA class="link" to="/channels">{{ $t('channel') }}</MkA>
-		<MkA class="link" to="/about">{{ $t('aboutX', { x: instanceName }) }}</MkA>
-	</header>
-
-	<div class="banner" :class="{ asBg: $route.path === '/' }" :style="{ backgroundImage: `url(${ $store.state.instance.meta.bannerUrl })` }">
-		<h1 v-if="$route.path !== '/'">{{ instanceName }}</h1>
-	</div>
-
-	<div class="contents" ref="contents" :class="{ wallpaper }">
-		<header class="header" ref="header" v-show="$route.path !== '/'">
-			<XHeader :info="pageInfo"/>
-		</header>
-		<main ref="main">
-			<router-view v-slot="{ Component }">
-				<transition :name="$store.state.device.animation ? 'page' : ''" mode="out-in" @enter="onTransition">
-					<component :is="Component" :ref="changePage"/>
-				</transition>
-			</router-view>
-		</main>
-		<div class="powered-by">
-			<b><MkA to="/">{{ host }}</MkA></b>
-			<small>Powered by <a href="https://github.com/syuilo/misskey" target="_blank">Misskey</a></small>
-		</div>
-	</div>
-
-	<XCommon/>
-</div>
+<DesignA/>
+<XCommon/>
 </template>
 
 <script lang="ts">
 import { defineComponent, defineAsyncComponent } from 'vue';
-import { } from '@fortawesome/free-solid-svg-icons';
-import { host, instanceName } from '@/config';
-import { search } from '@/scripts/search';
-import * as os from '@/os';
-import XHeader from './_common_/header.vue';
+import DesignA from './visitor/a.vue';
+import DesignB from './visitor/b.vue';
 import XCommon from './_common_/common.vue';
 
-const DESKTOP_THRESHOLD = 1100;
-
 export default defineComponent({
 	components: {
 		XCommon,
-		XHeader,
+		DesignA,
+		DesignB,
 	},
-
-	data() {
-		return {
-			host,
-			instanceName,
-			pageKey: 0,
-			pageInfo: null,
-			isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
-		};
-	},
-
-	computed: {
-		keymap(): any {
-			return {
-				'd': () => {
-					if (this.$store.state.device.syncDeviceDarkMode) return;
-					this.$store.commit('device/set', { key: 'darkMode', value: !this.$store.state.device.darkMode });
-				},
-				's': search,
-				'h|/': this.help
-			};
-		},
-	},
-
-	watch: {
-		$route(to, from) {
-			this.pageKey++;
-		},
-	},
-
-	created() {
-		document.documentElement.style.overflowY = 'scroll';
-	},
-
-	mounted() {
-		if (!this.isDesktop) {
-			window.addEventListener('resize', () => {
-				if (window.innerWidth >= DESKTOP_THRESHOLD) this.isDesktop = true;
-			}, { passive: true });
-		}
-	},
-
-	methods: {
-		changePage(page) {
-			if (page == null) return;
-			if (page.INFO) {
-				this.pageInfo = page.INFO;
-			}
-		},
-
-		top() {
-			window.scroll({ top: 0, behavior: 'smooth' });
-		},
-
-		help() {
-			this.$router.push('/docs/keyboard-shortcut');
-		},
-
-		onTransition() {
-			if (window._scroll) window._scroll();
-		},
-	}
 });
 </script>
-
-<style lang="scss" scoped>
-.mk-app {
-	min-height: 100vh;
-
-	> header {
-		position: relative;
-		z-index: 1;
-		background: var(--panel);
-		padding: 0 16px;
-		text-align: center;
-		overflow: auto;
-		white-space: nowrap;
-
-		> .link {
-			display: inline-block;
-			line-height: 60px;
-			padding: 0 0.7em;
-
-			&.MkA-active {
-				box-shadow: 0 -2px 0 0 var(--accent) inset;
-			}
-		}
-	}
-
-	> .banner {
-		position: relative;
-		width: 100%;
-		height: 200px;
-		background-size: cover;
-		background-position: center;
-
-		&.asBg {
-			position: absolute;
-			left: 0;
-			height: 320px;
-		}
-
-		&:after {
-			content: "";
-			display: block;
-			position: absolute;
-			bottom: 0;
-			left: 0;
-			width: 100%;
-			height: 64px;
-			background: linear-gradient(transparent, var(--bg));
-		}
-
-		> h1 {
-			margin: 0;
-			text-align: center;
-			color: #fff;
-			text-shadow: 0 0 8px #000;
-			line-height: 200px;
-		}
-	}
-
-	> .contents {
-		position: relative;
-		z-index: 1;
-
-		> .header {
-			position: sticky;
-			top: 0;
-			left: 0;
-			z-index: 1000;
-			height: 60px;
-			width: 100%;
-			line-height: 60px;
-			text-align: center;
-			-webkit-backdrop-filter: blur(32px);
-			backdrop-filter: blur(32px);
-			background-color: var(--header);
-			border-bottom: 1px solid var(--divider);
-		}
-
-		> .powered-by {
-			padding: 28px;
-			font-size: 14px;
-			text-align: center;
-			border-top: 1px solid var(--divider);
-
-			> small {
-				display: block;
-				margin-top: 8px;
-				opacity: 0.5;
-			}
-		}
-	}
-}
-</style>
-
-<style lang="scss">
-</style>
diff --git a/src/client/ui/visitor/a.vue b/src/client/ui/visitor/a.vue
new file mode 100644
index 0000000000..da09a9363b
--- /dev/null
+++ b/src/client/ui/visitor/a.vue
@@ -0,0 +1,357 @@
+<template>
+<div class="mk-app">
+	<div class="banner" v-if="$route.path === '/'" :style="{ backgroundImage: `url(${ $store.state.instance.meta.bannerUrl })` }">
+		<div>
+			<header>
+				<MkA class="link" to="/">{{ $t('home') }}</MkA>
+				<MkA class="link" to="/announcements">{{ $t('announcements') }}</MkA>
+				<MkA class="link" to="/channels">{{ $t('channel') }}</MkA>
+				<MkA class="link" to="/about">{{ $t('aboutX', { x: instanceName }) }}</MkA>
+			</header>
+			<h1 v-if="meta"><img class="logo" v-if="meta.logoImageUrl" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span></h1>
+			<div class="about" v-if="meta">
+				<div class="desc" v-html="meta.description || $t('introMisskey')"></div>
+			</div>
+			<div class="action">
+				<button class="_button primary" @click="signup()">{{ $t('signup') }}</button>
+				<button class="_button" @click="signin()">{{ $t('login') }}</button>
+			</div>
+		</div>
+	</div>
+	<div class="banner-mini" v-else :style="{ backgroundImage: `url(${ $store.state.instance.meta.bannerUrl })` }">
+		<div>
+			<header>
+				<MkA class="link" to="/">{{ $t('home') }}</MkA>
+				<MkA class="link" to="/announcements">{{ $t('announcements') }}</MkA>
+				<MkA class="link" to="/channels">{{ $t('channel') }}</MkA>
+				<MkA class="link" to="/about">{{ $t('aboutX', { x: instanceName }) }}</MkA>
+				<div class="action">
+					<button class="_button primary" @click="signup()">{{ $t('signup') }}</button>
+					<button class="_button" @click="signin()">{{ $t('login') }}</button>
+				</div>
+			</header>
+			<h1 v-if="meta"><img class="logo" v-if="meta.logoImageUrl" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span></h1>
+		</div>
+	</div>
+
+	<div class="main">
+		<div class="contents" ref="contents" :class="{ wallpaper }">
+			<header class="header" ref="header" v-show="$route.path !== '/'">
+				<XHeader :info="pageInfo"/>
+			</header>
+			<main ref="main">
+				<router-view v-slot="{ Component }">
+					<transition :name="$store.state.device.animation ? 'page' : ''" mode="out-in" @enter="onTransition">
+						<component :is="Component" :ref="changePage"/>
+					</transition>
+				</router-view>
+			</main>
+			<div class="powered-by">
+				<b><MkA to="/">{{ host }}</MkA></b>
+				<small>Powered by <a href="https://github.com/syuilo/misskey" target="_blank">Misskey</a></small>
+			</div>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, defineAsyncComponent } from 'vue';
+import { } from '@fortawesome/free-solid-svg-icons';
+import { host, instanceName } from '@/config';
+import { search } from '@/scripts/search';
+import * as os from '@/os';
+import MkPagination from '@/components/ui/pagination.vue';
+import XSigninDialog from '@/components/signin-dialog.vue';
+import XSignupDialog from '@/components/signup-dialog.vue';
+import MkButton from '@/components/ui/button.vue';
+import XHeader from '../_common_/header.vue';
+
+const DESKTOP_THRESHOLD = 1100;
+
+export default defineComponent({
+	components: {
+		XHeader,
+		MkPagination,
+		MkButton,
+	},
+
+	data() {
+		return {
+			host,
+			instanceName,
+			pageKey: 0,
+			pageInfo: null,
+			meta: null,
+			narrow: window.innerWidth < 1280,
+			announcements: {
+				endpoint: 'announcements',
+				limit: 10,
+			},
+			isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
+		};
+	},
+
+	computed: {
+		keymap(): any {
+			return {
+				'd': () => {
+					if (this.$store.state.device.syncDeviceDarkMode) return;
+					this.$store.commit('device/set', { key: 'darkMode', value: !this.$store.state.device.darkMode });
+				},
+				's': search,
+				'h|/': this.help
+			};
+		},
+	},
+
+	watch: {
+		$route(to, from) {
+			this.pageKey++;
+		},
+	},
+
+	created() {
+		document.documentElement.style.overflowY = 'scroll';
+
+		os.api('meta', { detail: true }).then(meta => {
+			this.meta = meta;
+		});
+	},
+
+	mounted() {
+		if (!this.isDesktop) {
+			window.addEventListener('resize', () => {
+				if (window.innerWidth >= DESKTOP_THRESHOLD) this.isDesktop = true;
+			}, { passive: true });
+		}
+	},
+
+	methods: {
+		setParallax(el) {
+			//new simpleParallax(el);
+		},
+
+		changePage(page) {
+			if (page == null) return;
+			if (page.INFO) {
+				this.pageInfo = page.INFO;
+			}
+		},
+
+		top() {
+			window.scroll({ top: 0, behavior: 'smooth' });
+		},
+
+		help() {
+			this.$router.push('/docs/keyboard-shortcut');
+		},
+
+		onTransition() {
+			if (window._scroll) window._scroll();
+		},
+
+		signin() {
+			os.popup(XSigninDialog, {
+				autoSet: true
+			}, {}, 'closed');
+		},
+
+		signup() {
+			os.popup(XSignupDialog, {
+				autoSet: true
+			}, {}, 'closed');
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.mk-app {
+	min-height: 100vh;
+
+	> .banner {
+		position: relative;
+		width: 100%;
+		text-align: center;
+		background-position: center;
+		background-size: cover;
+
+		> div {
+			height: 100%;
+			background: rgba(0, 0, 0, 0.3);
+
+			* {
+				color: #fff;
+			}
+					
+			> h1 {
+				margin: 0;
+				padding: 96px 32px 0 32px;
+				text-shadow: 0 0 8px black;
+
+				> .logo {
+					vertical-align: bottom;
+					max-height: 150px;
+				}
+			}
+
+			> .about {
+				padding: 32px;
+				max-width: 580px;
+				margin: 0 auto;
+				box-sizing: border-box;
+				text-shadow: 0 0 8px black;
+			}
+
+			> .action {
+				padding-bottom: 64px;
+				
+				> button {
+					display: inline-block;
+					padding: 10px 20px;
+					box-sizing: border-box;
+					text-align: center;
+					border-radius: 999px;
+					background: var(--panel);
+					color: var(--fg);
+
+					&.primary {
+						background: var(--accent);
+						color: #fff;
+					}
+
+					&:first-child {
+						margin-right: 16px;
+					}
+				}
+			}
+		}
+	}
+
+	> .banner-mini {
+		position: relative;
+		width: 100%;
+		text-align: center;
+		background-position: center;
+		background-size: cover;
+
+		> div {
+			position: relative;
+			z-index: 1;
+			height: 100%;
+			background: rgba(0, 0, 0, 0.3);
+
+			* {
+				color: #fff !important;
+			}
+
+			> header {
+				
+			}
+					
+			> h1 {
+				margin: 0;
+				padding: 32px;
+				text-shadow: 0 0 8px black;
+
+				> .logo {
+					vertical-align: bottom;
+					max-height: 100px;
+				}
+			}
+		}
+	}
+
+	> .main {
+		> header {
+			position: relative;
+			z-index: 1;
+			background: var(--panel);
+			padding: 0 32px;
+			text-align: left;
+			overflow: auto;
+			white-space: nowrap;
+
+			> .link {
+				display: inline-block;
+				line-height: 60px;
+				padding: 0 0.7em;
+
+				&.MkA-active {
+					box-shadow: 0 -2px 0 0 var(--accent) inset;
+				}
+			}
+		}
+
+		> .banner {
+			position: relative;
+			width: 100%;
+			height: 200px;
+			background-size: cover;
+			background-position: center;
+
+			&.asBg {
+				position: absolute;
+				left: 0;
+				height: 320px;
+			}
+
+			&:after {
+				content: "";
+				display: block;
+				position: absolute;
+				bottom: 0;
+				left: 0;
+				width: 100%;
+				height: 64px;
+				background: linear-gradient(transparent, var(--bg));
+			}
+
+			> h1 {
+				margin: 0;
+				text-align: center;
+				color: #fff;
+				text-shadow: 0 0 8px #000;
+				line-height: 200px;
+			}
+		}
+
+		> .contents {
+			position: relative;
+			z-index: 1;
+
+			> .header {
+				position: sticky;
+				top: 0;
+				left: 0;
+				z-index: 1000;
+				height: 60px;
+				width: 100%;
+				line-height: 60px;
+				text-align: center;
+				-webkit-backdrop-filter: blur(32px);
+				backdrop-filter: blur(32px);
+				background-color: var(--header);
+				border-bottom: 1px solid var(--divider);
+			}
+
+			> .powered-by {
+				padding: 28px;
+				font-size: 14px;
+				text-align: center;
+				border-top: 1px solid var(--divider);
+
+				> small {
+					display: block;
+					margin-top: 8px;
+					opacity: 0.5;
+				}
+			}
+		}
+	}
+}
+</style>
+
+<style lang="scss">
+</style>
diff --git a/src/client/ui/visitor/b.vue b/src/client/ui/visitor/b.vue
new file mode 100644
index 0000000000..13f93a522e
--- /dev/null
+++ b/src/client/ui/visitor/b.vue
@@ -0,0 +1,372 @@
+<template>
+<div class="mk-app">
+	<div class="side" v-if="!narrow">
+		<div :style="{ backgroundImage: `url(${ $store.state.instance.meta.backgroundImageUrl })` }">
+			<div class="fade"></div>
+			<h1 v-if="meta"><img class="logo" v-if="meta.logoImageUrl" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span></h1>
+			<div class="about _panel" v-if="meta">
+				<div class="desc" v-html="meta.description || $t('introMisskey')"></div>
+			</div>
+			<div class="action">
+				<button class="_button primary" @click="signup()">{{ $t('signup') }}</button>
+				<button class="_button" @click="signin()">{{ $t('login') }}</button>
+			</div>
+			<div class="announcements panel">
+				<header>{{ $t('announcements') }}</header>
+				<MkPagination :pagination="announcements" #default="{items}" class="list">
+					<section class="item" v-for="(announcement, i) in items" :key="announcement.id">
+						<div class="title">{{ announcement.title }}</div>
+						<div class="content">
+							<Mfm :text="announcement.text"/>
+							<img v-if="announcement.imageUrl" :src="announcement.imageUrl"/>
+						</div>
+					</section>
+				</MkPagination>
+			</div>
+		</div>
+	</div>
+
+	<div class="main">
+		<header>
+			<MkA class="link" to="/">{{ $t('home') }}</MkA>
+			<MkA class="link" to="/announcements">{{ $t('announcements') }}</MkA>
+			<MkA class="link" to="/channels">{{ $t('channel') }}</MkA>
+			<MkA class="link" to="/about">{{ $t('aboutX', { x: instanceName }) }}</MkA>
+		</header>
+
+		<div v-if="narrow" class="banner" :style="{ backgroundImage: `url(${ $store.state.instance.meta.bannerUrl })` }">
+			<h1 v-if="meta"><img class="logo" v-if="meta.logoImageUrl" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span></h1>
+		</div>
+
+		<div class="contents" ref="contents" :class="{ wallpaper }">
+			<header class="header" ref="header" v-show="$route.path !== '/'">
+				<XHeader :info="pageInfo"/>
+			</header>
+			<main ref="main">
+				<router-view v-slot="{ Component }">
+					<transition :name="$store.state.device.animation ? 'page' : ''" mode="out-in" @enter="onTransition">
+						<component :is="Component" :ref="changePage"/>
+					</transition>
+				</router-view>
+			</main>
+			<div class="powered-by">
+				<b><MkA to="/">{{ host }}</MkA></b>
+				<small>Powered by <a href="https://github.com/syuilo/misskey" target="_blank">Misskey</a></small>
+			</div>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, defineAsyncComponent } from 'vue';
+import { } from '@fortawesome/free-solid-svg-icons';
+import { host, instanceName } from '@/config';
+import { search } from '@/scripts/search';
+import * as os from '@/os';
+import MkPagination from '@/components/ui/pagination.vue';
+import XSigninDialog from '@/components/signin-dialog.vue';
+import XSignupDialog from '@/components/signup-dialog.vue';
+import MkButton from '@/components/ui/button.vue';
+import XHeader from '../_common_/header.vue';
+
+const DESKTOP_THRESHOLD = 1100;
+
+export default defineComponent({
+	components: {
+		XHeader,
+		MkPagination,
+		MkButton,
+	},
+
+	data() {
+		return {
+			host,
+			instanceName,
+			pageKey: 0,
+			pageInfo: null,
+			meta: null,
+			narrow: window.innerWidth < 1280,
+			announcements: {
+				endpoint: 'announcements',
+				limit: 10,
+			},
+			isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
+		};
+	},
+
+	computed: {
+		keymap(): any {
+			return {
+				'd': () => {
+					if (this.$store.state.device.syncDeviceDarkMode) return;
+					this.$store.commit('device/set', { key: 'darkMode', value: !this.$store.state.device.darkMode });
+				},
+				's': search,
+				'h|/': this.help
+			};
+		},
+	},
+
+	watch: {
+		$route(to, from) {
+			this.pageKey++;
+		},
+	},
+
+	created() {
+		document.documentElement.style.overflowY = 'scroll';
+
+		os.api('meta', { detail: true }).then(meta => {
+			this.meta = meta;
+		});
+	},
+
+	mounted() {
+		if (!this.isDesktop) {
+			window.addEventListener('resize', () => {
+				if (window.innerWidth >= DESKTOP_THRESHOLD) this.isDesktop = true;
+			}, { passive: true });
+		}
+	},
+
+	methods: {
+		changePage(page) {
+			if (page == null) return;
+			if (page.INFO) {
+				this.pageInfo = page.INFO;
+			}
+		},
+
+		top() {
+			window.scroll({ top: 0, behavior: 'smooth' });
+		},
+
+		help() {
+			this.$router.push('/docs/keyboard-shortcut');
+		},
+
+		onTransition() {
+			if (window._scroll) window._scroll();
+		},
+
+		signin() {
+			os.popup(XSigninDialog, {
+				autoSet: true
+			}, {}, 'closed');
+		},
+
+		signup() {
+			os.popup(XSignupDialog, {
+				autoSet: true
+			}, {}, 'closed');
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.mk-app {
+	display: flex;
+	min-height: 100vh;
+
+	> .side {
+		width: 500px;
+		height: 100vh;
+		text-align: center;
+
+		> div {
+			position: fixed;
+			top: 0;
+			left: 0;
+			width: 500px;
+			height: 100vh;
+			background-position: center;
+			background-size: cover;
+
+			> .panel {
+				-webkit-backdrop-filter: blur(8px);
+				backdrop-filter: blur(8px);
+				background: rgba(0, 0, 0, 0.5);
+				border-radius: var(--radius);
+
+				&, * {
+					color: #fff !important;
+				}
+			}
+
+			> .fade {
+				position: absolute;
+				z-index: -1;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 300px;
+				background: linear-gradient(rgba(#000, 0.5), transparent);
+			}
+
+			> h1 {
+				display: block;
+				margin: 0;
+				padding: 64px 32px 48px 32px;
+				color: #fff;
+
+				> .logo {
+					vertical-align: bottom;
+					max-height: 150px;
+				}
+			}
+
+			> .about {
+				display: block;
+				margin: 0 64px 16px 64px;
+				padding: 24px;
+				text-align: center;
+				box-sizing: border-box;
+			}
+
+			> .action {
+				padding: 0 64px;
+
+				> button {
+					display: block;
+					width: 100%;
+					padding: 10px;
+					box-sizing: border-box;
+					text-align: center;
+					border-radius: 999px;
+					background: var(--panel);
+
+					&.primary {
+						background: var(--accent);
+						color: #fff;
+					}
+
+					&:first-child {
+						margin-bottom: 16px;
+					}
+				}
+			}
+
+			> .announcements {
+				margin: 64px 64px 16px 64px;
+				text-align: left;
+
+				> header {
+					padding: 12px 16px;
+					border-bottom: solid 1px rgba(255, 255, 255, 0.5);
+				}
+
+				> .list {
+					max-height: 300px;
+					overflow: auto;
+
+					> .item {
+						padding: 12px 16px;
+
+						& + .item {
+							border-top: solid 1px rgba(255, 255, 255, 0.5);
+						}
+
+						> .title {
+							font-weight: bold;
+						}
+					}
+				}
+			}
+		}
+	}
+
+	> .main {
+		flex: 1;
+
+		> header {
+			position: relative;
+			z-index: 1;
+			background: var(--panel);
+			padding: 0 32px;
+			text-align: left;
+			overflow: auto;
+			white-space: nowrap;
+
+			> .link {
+				display: inline-block;
+				line-height: 60px;
+				padding: 0 0.7em;
+
+				&.MkA-active {
+					box-shadow: 0 -2px 0 0 var(--accent) inset;
+				}
+			}
+		}
+
+		> .banner {
+			position: relative;
+			width: 100%;
+			height: 200px;
+			background-size: cover;
+			background-position: center;
+
+			&:after {
+				content: "";
+				display: block;
+				position: absolute;
+				bottom: 0;
+				left: 0;
+				width: 100%;
+				height: 64px;
+				background: linear-gradient(transparent, var(--bg));
+			}
+
+			> h1 {
+				margin: 0;
+				padding: 32px;
+				text-align: center;
+				color: #fff;
+				text-shadow: 0 0 8px #000;
+
+				> .logo {
+					vertical-align: bottom;
+					max-height: 150px;
+				}
+			}
+		}
+
+		> .contents {
+			position: relative;
+			z-index: 1;
+
+			> .header {
+				position: sticky;
+				top: 0;
+				left: 0;
+				z-index: 1000;
+				height: 60px;
+				width: 100%;
+				line-height: 60px;
+				text-align: center;
+				-webkit-backdrop-filter: blur(32px);
+				backdrop-filter: blur(32px);
+				background-color: var(--header);
+				border-bottom: 1px solid var(--divider);
+			}
+
+			> .powered-by {
+				padding: 28px;
+				font-size: 14px;
+				text-align: center;
+				border-top: 1px solid var(--divider);
+
+				> small {
+					display: block;
+					margin-top: 8px;
+					opacity: 0.5;
+				}
+			}
+		}
+	}
+}
+</style>
+
+<style lang="scss">
+</style>
diff --git a/src/client/widgets/digital-clock.vue b/src/client/widgets/digital-clock.vue
index 702f335c7f..9d32e8b9fe 100644
--- a/src/client/widgets/digital-clock.vue
+++ b/src/client/widgets/digital-clock.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="mkw-digitalClock" :class="{ _panel: !props.transparent }" :style="{ fontSize: `${props.fontSize}em` }">
+<div class="mkw-digitalClock _monospace" :class="{ _panel: !props.transparent }" :style="{ fontSize: `${props.fontSize}em` }">
 	<span>
 		<span v-text="hh"></span>
 		<span :style="{ visibility: showColon ? 'visible' : 'hidden' }">:</span>
@@ -74,7 +74,6 @@ export default defineComponent({
 <style lang="scss" scoped>
 .mkw-digitalClock {
 	padding: 16px 0;
-	font-family: Lucida Console, Courier, monospace;
 	text-align: center;
 }
 </style>
diff --git a/src/games/reversi/maps.ts b/src/games/reversi/maps.ts
index b95eb4f02d..dc0d1bf9d0 100644
--- a/src/games/reversi/maps.ts
+++ b/src/games/reversi/maps.ts
@@ -878,3 +878,19 @@ export const test7: Map = {
 		'--wwww--',
 	]
 };
+
+// 検証用: この盤面で藍(lv5)が黒で始めると何故か(?)A1に打ってしまう
+export const test8: Map = {
+	name: 'Test8',
+	category: 'Test',
+	data: [
+		'--------',
+		'-----w--',
+		'w--www--',
+		'wwwwww--',
+		'bbbbwww-',
+		'wwwwww--',
+		'--www---',
+		'--ww----',
+	]
+};
diff --git a/src/models/entities/meta.ts b/src/models/entities/meta.ts
index b7fe8b18ad..cfc9782614 100644
--- a/src/models/entities/meta.ts
+++ b/src/models/entities/meta.ts
@@ -77,7 +77,7 @@ export class Meta {
 	public blockedHosts: string[];
 
 	@Column('varchar', {
-		length: 512, array: true, default: '{"/announcements", "/featured", "/channels", "/explore", "/games/reversi", "/about-misskey"}'
+		length: 512, array: true, default: '{"/featured", "/channels", "/explore", "/pages", "/about-misskey"}'
 	})
 	public pinnedPages: string[];
 
@@ -94,6 +94,18 @@ export class Meta {
 	})
 	public bannerUrl: string | null;
 
+	@Column('varchar', {
+		length: 512,
+		nullable: true
+	})
+	public backgroundImageUrl: string | null;
+
+	@Column('varchar', {
+		length: 512,
+		nullable: true
+	})
+	public logoImageUrl: string | null;
+
 	@Column('varchar', {
 		length: 512,
 		nullable: true,
diff --git a/src/models/entities/note-reaction.ts b/src/models/entities/note-reaction.ts
index ed38450bb2..69bb663fd3 100644
--- a/src/models/entities/note-reaction.ts
+++ b/src/models/entities/note-reaction.ts
@@ -35,6 +35,8 @@ export class NoteReaction {
 	@JoinColumn()
 	public note: Note | null;
 
+	// TODO: 対象noteのuserIdを非正規化したい(「受け取ったリアクション一覧」のようなものを(JOIN無しで)実装したいため)
+
 	@Column('varchar', {
 		length: 260
 	})
diff --git a/src/models/entities/user-profile.ts b/src/models/entities/user-profile.ts
index bd37da5ecc..97a4150be0 100644
--- a/src/models/entities/user-profile.ts
+++ b/src/models/entities/user-profile.ts
@@ -111,6 +111,12 @@ export class UserProfile {
 	})
 	public autoAcceptFollowed: boolean;
 
+	@Column('boolean', {
+		default: false,
+		comment: 'Whether reject index by crawler.'
+	})
+	public noCrawle: boolean;
+
 	@Column('boolean', {
 		default: false,
 	})
diff --git a/src/models/repositories/drive-file.ts b/src/models/repositories/drive-file.ts
index 7d1f2b9fec..ab22d2dc09 100644
--- a/src/models/repositories/drive-file.ts
+++ b/src/models/repositories/drive-file.ts
@@ -48,7 +48,7 @@ export class DriveFileRepository extends Repository<DriveFile> {
 		return thumbnail ? (file.thumbnailUrl || (isImage ? (file.webpublicUrl || file.url) : null)) : (file.webpublicUrl || file.url);
 	}
 
-	public async clacDriveUsageOf(user: User['id'] | User): Promise<number> {
+	public async calcDriveUsageOf(user: User['id'] | User): Promise<number> {
 		const id = typeof user === 'object' ? user.id : user;
 
 		const { sum } = await this
@@ -60,7 +60,7 @@ export class DriveFileRepository extends Repository<DriveFile> {
 		return parseInt(sum, 10) || 0;
 	}
 
-	public async clacDriveUsageOfHost(host: string): Promise<number> {
+	public async calcDriveUsageOfHost(host: string): Promise<number> {
 		const { sum } = await this
 			.createQueryBuilder('file')
 			.where('file.userHost = :host', { host: toPuny(host) })
@@ -70,7 +70,7 @@ export class DriveFileRepository extends Repository<DriveFile> {
 		return parseInt(sum, 10) || 0;
 	}
 
-	public async clacDriveUsageOfLocal(): Promise<number> {
+	public async calcDriveUsageOfLocal(): Promise<number> {
 		const { sum } = await this
 			.createQueryBuilder('file')
 			.where('file.userHost IS NULL')
@@ -80,7 +80,7 @@ export class DriveFileRepository extends Repository<DriveFile> {
 		return parseInt(sum, 10) || 0;
 	}
 
-	public async clacDriveUsageOfRemote(): Promise<number> {
+	public async calcDriveUsageOfRemote(): Promise<number> {
 		const { sum } = await this
 			.createQueryBuilder('file')
 			.where('file.userHost IS NOT NULL')
diff --git a/src/models/repositories/user.ts b/src/models/repositories/user.ts
index a334196832..87f50b448b 100644
--- a/src/models/repositories/user.ts
+++ b/src/models/repositories/user.ts
@@ -239,6 +239,7 @@ export class UserRepository extends Repository<User> {
 				alwaysMarkNsfw: profile!.alwaysMarkNsfw,
 				carefulBot: profile!.carefulBot,
 				autoAcceptFollowed: profile!.autoAcceptFollowed,
+				noCrawle: profile!.noCrawle,
 				hasUnreadSpecifiedNotes: NoteUnreads.count({
 					where: { userId: user.id, isSpecified: true },
 					take: 1
diff --git a/src/server/api/endpoints/admin/update-meta.ts b/src/server/api/endpoints/admin/update-meta.ts
index ae6d2a4163..acb29b9e51 100644
--- a/src/server/api/endpoints/admin/update-meta.ts
+++ b/src/server/api/endpoints/admin/update-meta.ts
@@ -94,6 +94,14 @@ export const meta = {
 			}
 		},
 
+		backgroundImageUrl: {
+			validator: $.optional.nullable.str,
+		},
+
+		logoImageUrl: {
+			validator: $.optional.nullable.str,
+		},
+
 		name: {
 			validator: $.optional.nullable.str,
 			desc: {
@@ -473,6 +481,14 @@ export default define(meta, async (ps, me) => {
 		set.iconUrl = ps.iconUrl;
 	}
 
+	if (ps.backgroundImageUrl !== undefined) {
+		set.backgroundImageUrl = ps.backgroundImageUrl;
+	}
+
+	if (ps.logoImageUrl !== undefined) {
+		set.logoImageUrl = ps.logoImageUrl;
+	}
+
 	if (ps.name !== undefined) {
 		set.name = ps.name;
 	}
diff --git a/src/server/api/endpoints/drive.ts b/src/server/api/endpoints/drive.ts
index 9b723a0542..527b7719a4 100644
--- a/src/server/api/endpoints/drive.ts
+++ b/src/server/api/endpoints/drive.ts
@@ -34,7 +34,7 @@ export default define(meta, async (ps, user) => {
 	const instance = await fetchMeta(true);
 
 	// Calculate drive usage
-	const usage = await DriveFiles.clacDriveUsageOf(user);
+	const usage = await DriveFiles.calcDriveUsageOf(user);
 
 	return {
 		capacity: 1024 * 1024 * instance.localDriveCapacityMb,
diff --git a/src/server/api/endpoints/i/update.ts b/src/server/api/endpoints/i/update.ts
index d3a8e0a8ce..0872671208 100644
--- a/src/server/api/endpoints/i/update.ts
+++ b/src/server/api/endpoints/i/update.ts
@@ -106,6 +106,13 @@ export const meta = {
 			}
 		},
 
+		noCrawle: {
+			validator: $.optional.bool,
+			desc: {
+				'ja-JP': '検索エンジンによるインデックスを拒否するか否か'
+			}
+		},
+
 		isBot: {
 			validator: $.optional.bool,
 			desc: {
@@ -204,6 +211,7 @@ export default define(meta, async (ps, user, token) => {
 	if (typeof ps.isBot === 'boolean') updates.isBot = ps.isBot;
 	if (typeof ps.carefulBot === 'boolean') profileUpdates.carefulBot = ps.carefulBot;
 	if (typeof ps.autoAcceptFollowed === 'boolean') profileUpdates.autoAcceptFollowed = ps.autoAcceptFollowed;
+	if (typeof ps.noCrawle === 'boolean') profileUpdates.noCrawle = ps.noCrawle;
 	if (typeof ps.isCat === 'boolean') updates.isCat = ps.isCat;
 	if (typeof ps.injectFeaturedNote === 'boolean') profileUpdates.injectFeaturedNote = ps.injectFeaturedNote;
 	if (typeof ps.alwaysMarkNsfw === 'boolean') profileUpdates.alwaysMarkNsfw = ps.alwaysMarkNsfw;
diff --git a/src/server/api/endpoints/meta.ts b/src/server/api/endpoints/meta.ts
index 97376a9d73..f24493899a 100644
--- a/src/server/api/endpoints/meta.ts
+++ b/src/server/api/endpoints/meta.ts
@@ -129,6 +129,8 @@ export default define(meta, async (ps, me) => {
 		bannerUrl: instance.bannerUrl,
 		errorImageUrl: instance.errorImageUrl,
 		iconUrl: instance.iconUrl,
+		backgroundImageUrl: instance.backgroundImageUrl,
+		logoImageUrl: instance.logoImageUrl,
 		maxNoteTextLength: Math.min(instance.maxNoteTextLength, DB_MAX_NOTE_TEXT_LENGTH),
 		emojis: await Emojis.packMany(emojis),
 		enableEmail: instance.enableEmail,
diff --git a/src/server/api/endpoints/users/stats.ts b/src/server/api/endpoints/users/stats.ts
new file mode 100644
index 0000000000..50730e7cd0
--- /dev/null
+++ b/src/server/api/endpoints/users/stats.ts
@@ -0,0 +1,144 @@
+import $ from 'cafy';
+import define from '../../define';
+import { ApiError } from '../../error';
+import { ID } from '../../../../misc/cafy-id';
+import { DriveFiles, Followings, NoteFavorites, NoteReactions, Notes, PageLikes, PollVotes, ReversiGames, Users } from '../../../../models';
+
+export const meta = {
+	tags: ['users'],
+
+	requireCredential: false as const,
+
+	params: {
+		userId: {
+			validator: $.type(ID),
+		},
+	},
+
+	errors: {
+		noSuchUser: {
+			message: 'No such user.',
+			code: 'NO_SUCH_USER',
+			id: '9e638e45-3b25-4ef7-8f95-07e8498f1819'
+		},
+	}
+};
+
+export default define(meta, async (ps, me) => {
+	const user = await Users.findOne(ps.userId);
+	if (user == null) {
+		throw new ApiError(meta.errors.noSuchUser);
+	}
+
+	const [
+		notesCount,
+		repliesCount,
+		renotesCount,
+		repliedCount,
+		renotedCount,
+		pollVotesCount,
+		pollVotedCount,
+		localFollowingCount,
+		remoteFollowingCount,
+		localFollowersCount,
+		remoteFollowersCount,
+		sentReactionsCount,
+		receivedReactionsCount,
+		noteFavoritesCount,
+		pageLikesCount,
+		pageLikedCount,
+		driveFilesCount,
+		driveUsage,
+		reversiCount,
+	] = await Promise.all([
+		Notes.createQueryBuilder('note')
+			.where('note.userId = :userId', { userId: user.id })
+			.getCount(),
+		Notes.createQueryBuilder('note')
+			.where('note.userId = :userId', { userId: user.id })
+			.andWhere('note.replyId IS NOT NULL')
+			.getCount(),
+		Notes.createQueryBuilder('note')
+			.where('note.userId = :userId', { userId: user.id })
+			.andWhere('note.renoteId IS NOT NULL')
+			.getCount(),
+		Notes.createQueryBuilder('note')
+			.where('note.replyUserId = :userId', { userId: user.id })
+			.getCount(),
+		Notes.createQueryBuilder('note')
+			.where('note.renoteUserId = :userId', { userId: user.id })
+			.getCount(),
+		PollVotes.createQueryBuilder('vote')
+			.where('vote.userId = :userId', { userId: user.id })
+			.getCount(),
+		PollVotes.createQueryBuilder('vote')
+			.innerJoin('vote.note', 'note')
+			.where('note.userId = :userId', { userId: user.id })
+			.getCount(),
+		Followings.createQueryBuilder('following')
+			.where('following.followerId = :userId', { userId: user.id })
+			.andWhere('following.followeeHost IS NULL')
+			.getCount(),
+		Followings.createQueryBuilder('following')
+			.where('following.followerId = :userId', { userId: user.id })
+			.andWhere('following.followeeHost IS NOT NULL')
+			.getCount(),
+		Followings.createQueryBuilder('following')
+			.where('following.followeeId = :userId', { userId: user.id })
+			.andWhere('following.followerHost IS NULL')
+			.getCount(),
+		Followings.createQueryBuilder('following')
+			.where('following.followeeId = :userId', { userId: user.id })
+			.andWhere('following.followerHost IS NOT NULL')
+			.getCount(),
+		NoteReactions.createQueryBuilder('reaction')
+			.where('reaction.userId = :userId', { userId: user.id })
+			.getCount(),
+		NoteReactions.createQueryBuilder('reaction')
+			.innerJoin('reaction.note', 'note')
+			.where('note.userId = :userId', { userId: user.id })
+			.getCount(),
+		NoteFavorites.createQueryBuilder('favorite')
+			.where('favorite.userId = :userId', { userId: user.id })
+			.getCount(),
+		PageLikes.createQueryBuilder('like')
+			.where('like.userId = :userId', { userId: user.id })
+			.getCount(),
+		PageLikes.createQueryBuilder('like')
+			.innerJoin('like.page', 'page')
+			.where('page.userId = :userId', { userId: user.id })
+			.getCount(),
+		DriveFiles.createQueryBuilder('file')
+			.where('file.userId = :userId', { userId: user.id })
+			.getCount(),
+		DriveFiles.calcDriveUsageOf(user),
+		ReversiGames.createQueryBuilder('game')
+			.where('game.user1Id = :userId', { userId: user.id })
+			.orWhere('game.user2Id = :userId', { userId: user.id })
+			.getCount(),
+	]);
+
+	return {
+		notesCount,
+		repliesCount,
+		renotesCount,
+		repliedCount,
+		renotedCount,
+		pollVotesCount,
+		pollVotedCount,
+		localFollowingCount,
+		remoteFollowingCount,
+		localFollowersCount,
+		remoteFollowersCount,
+		followingCount: localFollowingCount + remoteFollowingCount,
+		followersCount: localFollowersCount + remoteFollowersCount,
+		sentReactionsCount,
+		receivedReactionsCount,
+		noteFavoritesCount,
+		pageLikesCount,
+		pageLikedCount,
+		driveFilesCount,
+		driveUsage,
+		reversiCount,
+	};
+});
diff --git a/src/server/index.ts b/src/server/index.ts
index 15e1fedc98..5a7bb99c63 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -21,10 +21,11 @@ import apiServer from './api';
 import { sum } from '../prelude/array';
 import Logger from '../services/logger';
 import { program } from '../argv';
-import { UserProfiles } from '../models';
+import { UserProfiles, Users } from '../models';
 import { networkChart } from '../services/chart';
 import { genAvatar } from '../misc/gen-avatar';
 import { createTemp } from '../misc/create-temp';
+import { publishMainStream } from '../services/stream';
 
 export const serverLogger = new Logger('server', 'gray', false);
 
@@ -83,10 +84,15 @@ router.get('/verify-email/:code', async ctx => {
 		ctx.body = 'Verify succeeded!';
 		ctx.status = 200;
 
-		UserProfiles.update({ userId: profile.userId }, {
+		await UserProfiles.update({ userId: profile.userId }, {
 			emailVerified: true,
 			emailVerifyCode: null
 		});
+
+		publishMainStream(profile.userId, 'meUpdated', await Users.pack(profile.userId, profile.userId, {
+			detail: true,
+			includeSecrets: true
+		}));
 	} else {
 		ctx.status = 404;
 	}
diff --git a/src/server/web/index.ts b/src/server/web/index.ts
index 0bc9f242ad..468ece5359 100644
--- a/src/server/web/index.ts
+++ b/src/server/web/index.ts
@@ -242,9 +242,11 @@ router.get('/notes/:note', async ctx => {
 
 	if (note) {
 		const _note = await Notes.pack(note);
+		const profile = await UserProfiles.findOne(note.userId).then(ensure);
 		const meta = await fetchMeta();
 		await ctx.render('note', {
 			note: _note,
+			profile,
 			// TODO: Let locale changeable by instance setting
 			summary: getNoteSummary(_note, locales['ja-JP']),
 			instanceName: meta.name || 'Misskey',
@@ -280,9 +282,11 @@ router.get('/@:user/pages/:page', async ctx => {
 
 	if (page) {
 		const _page = await Pages.pack(page);
+		const profile = await UserProfiles.findOne(page.userId).then(ensure);
 		const meta = await fetchMeta();
 		await ctx.render('page', {
 			page: _page,
+			profile,
 			instanceName: meta.name || 'Misskey'
 		});
 
@@ -307,9 +311,11 @@ router.get('/clips/:clip', async ctx => {
 
 	if (clip) {
 		const _clip = await Clips.pack(clip);
+		const profile = await UserProfiles.findOne(clip.userId).then(ensure);
 		const meta = await fetchMeta();
 		await ctx.render('clip', {
 			clip: _clip,
+			profile,
 			instanceName: meta.name || 'Misskey'
 		});
 
diff --git a/src/server/web/views/clip.pug b/src/server/web/views/clip.pug
index 8cd1c673ed..8de53f19d6 100644
--- a/src/server/web/views/clip.pug
+++ b/src/server/web/views/clip.pug
@@ -19,6 +19,9 @@ block og
 	meta(property='og:image'       content= user.avatarUrl)
 
 block meta
+	if profile.noCrawle
+		meta(name='robots' content='noindex')
+
 	meta(name='misskey:user-username' content=user.username)
 	meta(name='misskey:user-id' content=user.id)
 	meta(name='misskey:clip-id' content=clip.id)
diff --git a/src/server/web/views/note.pug b/src/server/web/views/note.pug
index 0580e959f7..7030936975 100644
--- a/src/server/web/views/note.pug
+++ b/src/server/web/views/note.pug
@@ -19,6 +19,9 @@ block og
 	meta(property='og:image'       content= user.avatarUrl)
 
 block meta
+	if user.host || profile.noCrawle
+		meta(name='robots' content='noindex')
+
 	meta(name='misskey:user-username' content=user.username)
 	meta(name='misskey:user-id' content=user.id)
 	meta(name='misskey:note-id' content=note.id)
@@ -26,9 +29,6 @@ block meta
 	meta(name='twitter:card' content='summary')
 
 	// todo
-	if user.host
-		meta(name='robots' content='noindex')
-
 	if user.twitter
 		meta(name='twitter:creator' content=`@${user.twitter.screenName}`)
 
diff --git a/src/server/web/views/page.pug b/src/server/web/views/page.pug
index 55f64ff054..cb9e1039e1 100644
--- a/src/server/web/views/page.pug
+++ b/src/server/web/views/page.pug
@@ -19,6 +19,9 @@ block og
 	meta(property='og:image'       content= page.eyeCatchingImage ? page.eyeCatchingImage.thumbnailUrl : user.avatarUrl)
 
 block meta
+	if profile.noCrawle
+		meta(name='robots' content='noindex')
+
 	meta(name='misskey:user-username' content=user.username)
 	meta(name='misskey:user-id' content=user.id)
 	meta(name='misskey:page-id' content=page.id)
diff --git a/src/server/web/views/user.pug b/src/server/web/views/user.pug
index d41b0bbac0..1a8a6b4413 100644
--- a/src/server/web/views/user.pug
+++ b/src/server/web/views/user.pug
@@ -19,14 +19,14 @@ block og
 	meta(property='og:image'       content= img)
 
 block meta
+	if user.host || profile.noCrawle
+		meta(name='robots' content='noindex')
+
 	meta(name='misskey:user-username' content=user.username)
 	meta(name='misskey:user-id' content=user.id)
 
 	meta(name='twitter:card' content='summary')
 
-	if user.host
-		meta(name='robots' content='noindex')
-
 	if profile.twitter
 		meta(name='twitter:creator' content=`@${profile.twitter.screenName}`)
 
diff --git a/src/services/chart/charts/classes/drive.ts b/src/services/chart/charts/classes/drive.ts
index c3bcacb7df..57bb120beb 100644
--- a/src/services/chart/charts/classes/drive.ts
+++ b/src/services/chart/charts/classes/drive.ts
@@ -32,8 +32,8 @@ export default class DriveChart extends Chart<DriveLog> {
 		const [localCount, remoteCount, localSize, remoteSize] = await Promise.all([
 			DriveFiles.count({ userHost: null }),
 			DriveFiles.count({ userHost: Not(IsNull()) }),
-			DriveFiles.clacDriveUsageOfLocal(),
-			DriveFiles.clacDriveUsageOfRemote()
+			DriveFiles.calcDriveUsageOfLocal(),
+			DriveFiles.calcDriveUsageOfRemote()
 		]);
 
 		return {
diff --git a/src/services/chart/charts/classes/instance.ts b/src/services/chart/charts/classes/instance.ts
index f3d341f383..7575abfb6f 100644
--- a/src/services/chart/charts/classes/instance.ts
+++ b/src/services/chart/charts/classes/instance.ts
@@ -51,7 +51,7 @@ export default class InstanceChart extends Chart<InstanceLog> {
 			Followings.count({ followerHost: group }),
 			Followings.count({ followeeHost: group }),
 			DriveFiles.count({ userHost: group }),
-			DriveFiles.clacDriveUsageOfHost(group),
+			DriveFiles.calcDriveUsageOfHost(group),
 		]);
 
 		return {
diff --git a/src/services/chart/charts/classes/per-user-drive.ts b/src/services/chart/charts/classes/per-user-drive.ts
index 822f4eda0f..aed9f6fce7 100644
--- a/src/services/chart/charts/classes/per-user-drive.ts
+++ b/src/services/chart/charts/classes/per-user-drive.ts
@@ -24,7 +24,7 @@ export default class PerUserDriveChart extends Chart<PerUserDriveLog> {
 	protected async fetchActual(group: string): Promise<DeepPartial<PerUserDriveLog>> {
 		const [count, size] = await Promise.all([
 			DriveFiles.count({ userId: group }),
-			DriveFiles.clacDriveUsageOf(group)
+			DriveFiles.calcDriveUsageOf(group)
 		]);
 
 		return {
diff --git a/src/services/drive/add-file.ts b/src/services/drive/add-file.ts
index 8d32d06d2e..b5085ec8e3 100644
--- a/src/services/drive/add-file.ts
+++ b/src/services/drive/add-file.ts
@@ -334,7 +334,7 @@ export default async function(
 
 	//#region Check drive usage
 	if (user && !isLink) {
-		const usage = await DriveFiles.clacDriveUsageOf(user);
+		const usage = await DriveFiles.calcDriveUsageOf(user);
 
 		const instance = await fetchMeta();
 		const driveCapacity = 1024 * 1024 * (Users.isLocalUser(user) ? instance.localDriveCapacityMb : instance.remoteDriveCapacityMb);