From 08e1db45a9f2dc29d2fe1bf8ff92c5e2ec546bfe Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 17 Apr 2021 11:29:44 +0900
Subject: [PATCH 01/34] Improve client

---
 src/client/pages/instance-info.vue | 9 +++++++++
 src/client/pages/user-ap-info.vue  | 3 +++
 2 files changed, 12 insertions(+)

diff --git a/src/client/pages/instance-info.vue b/src/client/pages/instance-info.vue
index 5c1210c4bd..326b30c7c9 100644
--- a/src/client/pages/instance-info.vue
+++ b/src/client/pages/instance-info.vue
@@ -86,10 +86,19 @@
 				<template #key>{{ $ts.registeredAt }}</template>
 				<template #value><MkTime mode="detail" :time="instance.caughtAt"/></template>
 			</FormKeyValueView>
+			<FormKeyValueView>
+				<template #key>{{ $ts.updatedAt }}</template>
+				<template #value><MkTime mode="detail" :time="instance.infoUpdatedAt"/></template>
+			</FormKeyValueView>
 		</FormGroup>
 		<FormObjectView tall :value="instance">
 			<span>Raw</span>
 		</FormObjectView>
+		<FormGroup>
+			<FormLink :to="`https://${host}/.well-known/host-meta`" external>host-meta</FormLink>
+			<FormLink :to="`https://${host}/.well-known/host-meta.json`" external>host-meta.json</FormLink>
+			<FormLink :to="`https://${host}/.well-known/nodeinfo`" external>nodeinfo</FormLink>
+		</FormGroup>
 	</FormGroup>
 </FormBase>
 </template>
diff --git a/src/client/pages/user-ap-info.vue b/src/client/pages/user-ap-info.vue
index 3f2920402f..7520540c2d 100644
--- a/src/client/pages/user-ap-info.vue
+++ b/src/client/pages/user-ap-info.vue
@@ -43,6 +43,9 @@
 			<FormObjectView tall :value="ap">
 				<span>Raw</span>
 			</FormObjectView>
+			<FormGroup>
+				<FormLink :to="`https://${user.host}/.well-known/webfinger?resource=acct:${user.username}`" external>WebFinger</FormLink>
+			</FormGroup>
 			<FormLink v-if="user.host" :to="`/instance-info/${user.host}`">{{ $ts.instanceInfo }}<template #suffix>{{ user.host }}</template></FormLink>
 			<FormKeyValueView v-else>
 				<template #key>{{ $ts.instanceInfo }}</template>

From c27c3817a9b354101f9e78e361c8595b4315c9bc Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 17 Apr 2021 11:40:47 +0900
Subject: [PATCH 02/34] Tweak UI

---
 src/client/pages/note.vue       | 66 +++++++++++++++++++--------------
 src/client/pages/user/index.vue | 21 ++++++++---
 2 files changed, 53 insertions(+), 34 deletions(-)

diff --git a/src/client/pages/note.vue b/src/client/pages/note.vue
index 77f15b8a49..b203a1322a 100644
--- a/src/client/pages/note.vue
+++ b/src/client/pages/note.vue
@@ -1,37 +1,37 @@
 <template>
 <div class="fcuexfpr _root">
-	<div v-if="note" class="note" v-anim>
-		<div class="_gap" v-if="showNext">
-			<XNotes class="_content" :pagination="next" :no-gap="true"/>
-		</div>
-
-		<div class="main _gap">
-			<MkButton v-if="!showNext && hasNext" class="load next" @click="showNext = true"><Fa :icon="faChevronUp"/></MkButton>
-			<div class="_content _gap">
-				<MkRemoteCaution v-if="note.user.host != null" :href="note.url || note.uri" class="_gap"/>
-				<XNoteDetailed v-model:note="note" :key="note.id" class="_gap"/>
+	<transition name="fade" mode="out-in">
+		<div v-if="note" class="note">
+			<div class="_gap" v-if="showNext">
+				<XNotes class="_content" :pagination="next" :no-gap="true"/>
 			</div>
-			<div class="_content clips _gap" v-if="clips && clips.length > 0">
-				<div class="title">{{ $ts.clip }}</div>
-				<MkA v-for="item in clips" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap">
-					<b>{{ item.name }}</b>
-					<div v-if="item.description" class="description">{{ item.description }}</div>
-					<div class="user">
-						<MkAvatar :user="item.user" class="avatar"/> <MkUserName :user="item.user" :nowrap="false"/>
-					</div>
-				</MkA>
+
+			<div class="main _gap">
+				<MkButton v-if="!showNext && hasNext" class="load next" @click="showNext = true"><Fa :icon="faChevronUp"/></MkButton>
+				<div class="_content _gap">
+					<MkRemoteCaution v-if="note.user.host != null" :href="note.url || note.uri" class="_gap"/>
+					<XNoteDetailed v-model:note="note" :key="note.id" class="_gap"/>
+				</div>
+				<div class="_content clips _gap" v-if="clips && clips.length > 0">
+					<div class="title">{{ $ts.clip }}</div>
+					<MkA v-for="item in clips" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap">
+						<b>{{ item.name }}</b>
+						<div v-if="item.description" class="description">{{ item.description }}</div>
+						<div class="user">
+							<MkAvatar :user="item.user" class="avatar"/> <MkUserName :user="item.user" :nowrap="false"/>
+						</div>
+					</MkA>
+				</div>
+				<MkButton v-if="!showPrev && hasPrev" class="load prev" @click="showPrev = true"><Fa :icon="faChevronDown"/></MkButton>
 			</div>
-			<MkButton v-if="!showPrev && hasPrev" class="load prev" @click="showPrev = true"><Fa :icon="faChevronDown"/></MkButton>
-		</div>
 
-		<div class="_gap" v-if="showPrev">
-			<XNotes class="_content" :pagination="prev" :no-gap="true"/>
+			<div class="_gap" v-if="showPrev">
+				<XNotes class="_content" :pagination="prev" :no-gap="true"/>
+			</div>
 		</div>
-	</div>
-
-	<div v-if="error">
-		<MkError @retry="fetch()"/>
-	</div>
+		<MkError v-else-if="error" @retry="fetch()"/>
+		<MkLoading v-else/>
+	</transition>
 </div>
 </template>
 
@@ -106,6 +106,7 @@ export default defineComponent({
 	},
 	methods: {
 		fetch() {
+			this.note = null;
 			os.api('notes/show', {
 				noteId: this.noteId
 			}).then(note => {
@@ -138,6 +139,15 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+.fade-enter-active,
+.fade-leave-active {
+	transition: opacity 0.125s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+	opacity: 0;
+}
+
 .fcuexfpr {
 	> .note {
 		> .main {
diff --git a/src/client/pages/user/index.vue b/src/client/pages/user/index.vue
index 2322b09ea9..630ac382b5 100644
--- a/src/client/pages/user/index.vue
+++ b/src/client/pages/user/index.vue
@@ -1,6 +1,6 @@
 <template>
-<div>
-	<div class="ftskorzw wide _section" v-if="user && narrow === false">
+<transition name="fade" mode="out-in">
+	<div class="ftskorzw wide" v-if="user && narrow === false">
 		<MkRemoteCaution v-if="user.host != null" :href="user.url" class="_gap"/>
 
 		<div class="banner-container _gap" :style="style">
@@ -212,10 +212,9 @@
 			<XPages v-else-if="page === 'pages'" :user="user" class="_gap"/>
 		</div>
 	</div>
-	<div v-else-if="error">
-		<MkError @retry="fetch()"/>
-	</div>
-</div>
+	<MkError v-else-if="error" @retry="fetch()"/>
+	<MkLoading v-else/>
+</transition>
 </template>
 
 <script lang="ts">
@@ -324,6 +323,7 @@ export default defineComponent({
 
 		fetch() {
 			if (this.acct == null) return;
+			this.user = null;
 			Progress.start();
 			os.api('users/show', parseAcct(this.acct)).then(user => {
 				this.user = user;
@@ -369,6 +369,15 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+.fade-enter-active,
+.fade-leave-active {
+	transition: opacity 0.125s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+	opacity: 0;
+}
+
 .ftskorzw.wide {
 	max-width: 1150px;
 	margin: 0 auto;

From 61461b7f5935a49ea96cdb6f8963c1a4e2434d3f Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 17 Apr 2021 14:06:32 +0900
Subject: [PATCH 03/34] Improve client

---
 src/client/components/form/suspense.vue    |  9 ++++-
 src/client/pages/instance-info.vue         | 28 ++++++++++++++
 src/client/pages/user-ap-info.vue          |  2 +-
 src/client/pages/user-info.vue             |  7 ++++
 src/models/repositories/user.ts            |  1 +
 src/server/api/endpoints/federation/dns.ts | 43 ++++++++++++++++++++++
 6 files changed, 87 insertions(+), 3 deletions(-)
 create mode 100644 src/server/api/endpoints/federation/dns.ts

diff --git a/src/client/components/form/suspense.vue b/src/client/components/form/suspense.vue
index 562fe23e06..6a8282733f 100644
--- a/src/client/components/form/suspense.vue
+++ b/src/client/components/form/suspense.vue
@@ -5,9 +5,9 @@
 			<MkLoading/>
 		</div>
 	</div>
-	<div v-else-if="resolved">
+	<FormGroup v-else-if="resolved" class="_formItem">
 		<slot :result="result"></slot>
-	</div>
+	</FormGroup>
 	<div class="_formItem" v-else>
 		<div class="_formPanel">
 			error!
@@ -20,8 +20,13 @@
 <script lang="ts">
 import { defineComponent, PropType, ref, watch } from 'vue';
 import './form.scss';
+import FormGroup from './group.vue';
 
 export default defineComponent({
+	components: {
+		FormGroup,
+	},
+
 	props: {
 		p: {
 			type: Function as PropType<() => Promise<any>>,
diff --git a/src/client/pages/instance-info.vue b/src/client/pages/instance-info.vue
index 326b30c7c9..a3cd402993 100644
--- a/src/client/pages/instance-info.vue
+++ b/src/client/pages/instance-info.vue
@@ -14,6 +14,10 @@
 			</FormKeyValueView>
 		</FormGroup>
 
+		<FormTextarea readonly :value="instance.description">
+			<span>{{ $ts.description }}</span>
+		</FormTextarea>
+
 		<FormGroup>
 			<FormKeyValueView>
 				<template #key>{{ $ts.software }}</template>
@@ -99,6 +103,27 @@
 			<FormLink :to="`https://${host}/.well-known/host-meta.json`" external>host-meta.json</FormLink>
 			<FormLink :to="`https://${host}/.well-known/nodeinfo`" external>nodeinfo</FormLink>
 		</FormGroup>
+		<FormSuspense :p="dnsPromiseFactory" v-slot="{ result: dns }">
+			<FormGroup>
+				<template #label>DNS</template>
+				<FormKeyValueView v-for="record in dns.a" :key="record">
+					<template #key>A</template>
+					<template #value><span class="_monospace">{{ record }}</span></template>
+				</FormKeyValueView>
+				<FormKeyValueView v-for="record in dns.aaaa" :key="record">
+					<template #key>AAAA</template>
+					<template #value><span class="_monospace">{{ record }}</span></template>
+				</FormKeyValueView>
+				<FormKeyValueView v-for="record in dns.cname" :key="record">
+					<template #key>CNAME</template>
+					<template #value><span class="_monospace">{{ record }}</span></template>
+				</FormKeyValueView>
+				<FormKeyValueView v-for="record in dns.txt">
+					<template #key>TXT</template>
+					<template #value><span class="_monospace">{{ record[0] }}</span></template>
+				</FormKeyValueView>
+			</FormGroup>
+		</FormSuspense>
 	</FormGroup>
 </FormBase>
 </template>
@@ -167,6 +192,9 @@ export default defineComponent({
 				}],
 			},
 			instance: null,
+			dnsPromiseFactory: () => os.api('federation/dns', {
+				host: this.host
+			}),
 			now: null,
 			canvas: null,
 			chart: null,
diff --git a/src/client/pages/user-ap-info.vue b/src/client/pages/user-ap-info.vue
index 7520540c2d..648ecdb10a 100644
--- a/src/client/pages/user-ap-info.vue
+++ b/src/client/pages/user-ap-info.vue
@@ -22,7 +22,7 @@
 				</FormKeyValueView>
 				<FormKeyValueView>
 					<template #key>Shared Inbox</template>
-					<template #value><span class="_monospace">{{ ap.sharedInbox }}</span></template>
+					<template #value><span class="_monospace">{{ ap.sharedInbox || ap.endpoints.sharedInbox }}</span></template>
 				</FormKeyValueView>
 				<FormKeyValueView>
 					<template #key>Outbox</template>
diff --git a/src/client/pages/user-info.vue b/src/client/pages/user-info.vue
index 1d714cac33..06f2e4270d 100644
--- a/src/client/pages/user-info.vue
+++ b/src/client/pages/user-info.vue
@@ -18,6 +18,13 @@
 			</FormKeyValueView>
 		</FormGroup>
 
+		<FormGroup>
+			<FormKeyValueView>
+				<template #key>{{ $ts.updatedAt }}</template>
+				<template #value><MkTime v-if="user.lastFetchedAt" mode="detail" :time="user.lastFetchedAt"/><span v-else>N/A</span></template>
+			</FormKeyValueView>
+		</FormGroup>
+
 		<FormObjectView tall :value="user">
 			<span>Raw</span>
 		</FormObjectView>
diff --git a/src/models/repositories/user.ts b/src/models/repositories/user.ts
index 203b878fbb..a3b4c69f43 100644
--- a/src/models/repositories/user.ts
+++ b/src/models/repositories/user.ts
@@ -198,6 +198,7 @@ export class UserRepository extends Repository<User> {
 				uri: user.uri,
 				createdAt: user.createdAt.toISOString(),
 				updatedAt: user.updatedAt ? user.updatedAt.toISOString() : null,
+				lastFetchedAt: user.lastFetchedAt?.toISOString(),
 				bannerUrl: user.bannerUrl,
 				bannerBlurhash: user.bannerBlurhash,
 				bannerColor: null, // 後方互換性のため
diff --git a/src/server/api/endpoints/federation/dns.ts b/src/server/api/endpoints/federation/dns.ts
new file mode 100644
index 0000000000..a188f46ac1
--- /dev/null
+++ b/src/server/api/endpoints/federation/dns.ts
@@ -0,0 +1,43 @@
+import { promises as dns } from 'dns';
+import $ from 'cafy';
+import define from '../../define';
+import { Instances } from '../../../../models';
+import { toPuny } from '@/misc/convert-host';
+
+const resolver = new dns.Resolver();
+resolver.setServers(['1.1.1.1']);
+
+export const meta = {
+	tags: ['federation'],
+
+	requireCredential: false as const,
+
+	params: {
+		host: {
+			validator: $.str
+		}
+	},
+};
+
+export default define(meta, async (ps, me) => {
+	const instance = await Instances.findOneOrFail({ host: toPuny(ps.host) });
+
+	const [
+		resolved4,
+		resolved6,
+		resolvedCname,
+		resolvedTxt,
+	] = await Promise.all([
+		resolver.resolve4(instance.host).catch(() => []),
+		resolver.resolve6(instance.host).catch(() => []),
+		resolver.resolveCname(instance.host).catch(() => []),
+		resolver.resolveTxt(instance.host).catch(() => []),
+	]);
+
+	return {
+		a: resolved4,
+		aaaa: resolved6,
+		cname: resolvedCname,
+		txt: resolvedTxt,
+	};
+});

From 68571d8f577e0a9eb8679e8dd30e11d8b1709340 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 17 Apr 2021 15:30:26 +0900
Subject: [PATCH 04/34] Implement user online status

Resolve #7422
Fix #7424
---
 locales/ja-JP.yml                             |  6 ++++++
 .../1618637372000-user-last-active-date.ts    | 16 ++++++++++++++++
 .../1618639857000-user-hide-online-status.ts  | 14 ++++++++++++++
 src/client/pages/settings/privacy.vue         |  7 +++++++
 src/const.ts                                  |  2 ++
 src/models/entities/user.ts                   | 11 +++++++++++
 src/models/repositories/user.ts               | 14 ++++++++++++++
 .../api/endpoints/get-online-users-count.ts   | 19 ++++++++++---------
 src/server/api/endpoints/i/update.ts          |  5 +++++
 src/server/api/streaming.ts                   |  7 +++++++
 10 files changed, 92 insertions(+), 9 deletions(-)
 create mode 100644 migration/1618637372000-user-last-active-date.ts
 create mode 100644 migration/1618639857000-user-hide-online-status.ts
 create mode 100644 src/const.ts

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 86deff6753..989edcda2d 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -722,6 +722,12 @@ notSpecifiedMentionWarning: "宛先に含まれていないメンションがあ
 info: "情報"
 userInfo: "ユーザー情報"
 unknown: "不明"
+onlineStatus: "オンライン状態"
+hideOnlineStatus: "オンライン状態を隠す"
+hideOnlineStatusDescription: "オンライン状態を隠すと、検索などの一部機能において利便性が低下することがあります。"
+online: "オンライン"
+active: "アクティブ"
+offline: "オフライン"
 
 _email:
   _follow:
diff --git a/migration/1618637372000-user-last-active-date.ts b/migration/1618637372000-user-last-active-date.ts
new file mode 100644
index 0000000000..a66c433a3a
--- /dev/null
+++ b/migration/1618637372000-user-last-active-date.ts
@@ -0,0 +1,16 @@
+import {MigrationInterface, QueryRunner} from "typeorm";
+
+export class userLastActiveDate1618637372000 implements MigrationInterface {
+    name = 'userLastActiveDate1618637372000'
+
+    public async up(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(`ALTER TABLE "user" ADD "lastActiveDate" TIMESTAMP WITH TIME ZONE DEFAULT NULL`);
+        await queryRunner.query(`CREATE INDEX "IDX_seoignmeoprigmkpodgrjmkpormg" ON "user" ("lastActiveDate") `);
+    }
+
+    public async down(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(`DROP INDEX "IDX_seoignmeoprigmkpodgrjmkpormg"`);
+        await queryRunner.query(`ALTER TABLE "user" DROP COLUMN "lastActiveDate"`);
+    }
+
+}
diff --git a/migration/1618639857000-user-hide-online-status.ts b/migration/1618639857000-user-hide-online-status.ts
new file mode 100644
index 0000000000..d5d77f9837
--- /dev/null
+++ b/migration/1618639857000-user-hide-online-status.ts
@@ -0,0 +1,14 @@
+import {MigrationInterface, QueryRunner} from "typeorm";
+
+export class userHideOnlineStatus1618639857000 implements MigrationInterface {
+    name = 'userHideOnlineStatus1618639857000'
+
+    public async up(queryRunner: QueryRunner): Promise<void> {
+			await queryRunner.query(`ALTER TABLE "user" ADD "hideOnlineStatus" boolean NOT NULL DEFAULT false`);
+    }
+
+    public async down(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(`ALTER TABLE "user" DROP COLUMN "hideOnlineStatus"`);
+    }
+
+}
diff --git a/src/client/pages/settings/privacy.vue b/src/client/pages/settings/privacy.vue
index 0542c527f9..c8df378410 100644
--- a/src/client/pages/settings/privacy.vue
+++ b/src/client/pages/settings/privacy.vue
@@ -5,6 +5,10 @@
 		<FormSwitch v-model:value="autoAcceptFollowed" :disabled="!isLocked" @update:value="save()">{{ $ts.autoAcceptFollowed }}</FormSwitch>
 		<template #caption>{{ $ts.lockedAccountInfo }}</template>
 	</FormGroup>
+	<FormSwitch v-model:value="hideOnlineStatus" @update:value="save()">
+		{{ $ts.hideOnlineStatus }}
+		<template #desc>{{ $ts.hideOnlineStatusDescription }}</template>
+	</FormSwitch>
 	<FormSwitch v-model:value="noCrawle" @update:value="save()">
 		{{ $ts.noCrawle }}
 		<template #desc>{{ $ts.noCrawleDescription }}</template>
@@ -58,6 +62,7 @@ export default defineComponent({
 			autoAcceptFollowed: false,
 			noCrawle: false,
 			isExplorable: false,
+			hideOnlineStatus: false,
 		}
 	},
 
@@ -72,6 +77,7 @@ export default defineComponent({
 		this.autoAcceptFollowed = this.$i.autoAcceptFollowed;
 		this.noCrawle = this.$i.noCrawle;
 		this.isExplorable = this.$i.isExplorable;
+		this.hideOnlineStatus = this.$i.hideOnlineStatus;
 	},
 
 	mounted() {
@@ -85,6 +91,7 @@ export default defineComponent({
 				autoAcceptFollowed: !!this.autoAcceptFollowed,
 				noCrawle: !!this.noCrawle,
 				isExplorable: !!this.isExplorable,
+				hideOnlineStatus: !!this.hideOnlineStatus,
 			});
 		}
 	}
diff --git a/src/const.ts b/src/const.ts
new file mode 100644
index 0000000000..43f59f1e4f
--- /dev/null
+++ b/src/const.ts
@@ -0,0 +1,2 @@
+export const USER_ONLINE_THRESHOLD = 1000 * 60 * 10; // 10min
+export const USER_ACTIVE_THRESHOLD = 1000 * 60 * 60 * 24 * 3; // 3days
diff --git a/src/models/entities/user.ts b/src/models/entities/user.ts
index 91fbe35d94..060ec06b9a 100644
--- a/src/models/entities/user.ts
+++ b/src/models/entities/user.ts
@@ -26,6 +26,17 @@ export class User {
 	})
 	public lastFetchedAt: Date | null;
 
+	@Index()
+	@Column('timestamp with time zone', {
+		nullable: true
+	})
+	public lastActiveDate: Date | null;
+
+	@Column('boolean', {
+		default: false,
+	})
+	public hideOnlineStatus: boolean;
+
 	@Column('varchar', {
 		length: 128,
 		comment: 'The username of the User.'
diff --git a/src/models/repositories/user.ts b/src/models/repositories/user.ts
index a3b4c69f43..0d59ed2545 100644
--- a/src/models/repositories/user.ts
+++ b/src/models/repositories/user.ts
@@ -7,6 +7,7 @@ import { SchemaType } from '@/misc/schema';
 import { awaitAll } from '../../prelude/await-all';
 import { populateEmojis } from '@/misc/populate-emojis';
 import { getAntennas } from '@/misc/antenna-cache';
+import { USER_ACTIVE_THRESHOLD, USER_ONLINE_THRESHOLD } from '@/const';
 
 export type PackedUser = SchemaType<typeof packedUserSchema>;
 
@@ -145,6 +146,17 @@ export class UserRepository extends Repository<User> {
 		return count > 0;
 	}
 
+	public getOnlineStatus(user: User): string {
+		if (user.hideOnlineStatus == null) return 'unknown';
+		if (user.lastActiveDate == null) return 'unknown';
+		const elapsed = Date.now() - user.lastActiveDate.getTime();
+		return (
+			elapsed < USER_ONLINE_THRESHOLD ? 'online' :
+			elapsed < USER_ACTIVE_THRESHOLD ? 'active' :
+			'offline'
+		);
+	}
+
 	public async pack(
 		src: User['id'] | User,
 		me?: { id: User['id'] } | null | undefined,
@@ -192,6 +204,7 @@ export class UserRepository extends Repository<User> {
 				themeColor: instance.themeColor,
 			} : undefined) : undefined,
 			emojis: populateEmojis(user.emojis, user.host),
+			onlineStatus: this.getOnlineStatus(user),
 
 			...(opts.detail ? {
 				url: profile!.url,
@@ -239,6 +252,7 @@ export class UserRepository extends Repository<User> {
 				autoAcceptFollowed: profile!.autoAcceptFollowed,
 				noCrawle: profile!.noCrawle,
 				isExplorable: user.isExplorable,
+				hideOnlineStatus: user.hideOnlineStatus,
 				hasUnreadSpecifiedNotes: NoteUnreads.count({
 					where: { userId: user.id, isSpecified: true },
 					take: 1
diff --git a/src/server/api/endpoints/get-online-users-count.ts b/src/server/api/endpoints/get-online-users-count.ts
index 150ac9e365..a13363055f 100644
--- a/src/server/api/endpoints/get-online-users-count.ts
+++ b/src/server/api/endpoints/get-online-users-count.ts
@@ -1,6 +1,7 @@
+import { USER_ONLINE_THRESHOLD } from '@/const';
+import { Users } from '@/models';
+import { MoreThan } from 'typeorm';
 import define from '../define';
-import { redisClient } from '../../../db/redis';
-import config from '@/config';
 
 export const meta = {
 	tags: ['meta'],
@@ -11,12 +12,12 @@ export const meta = {
 	}
 };
 
-export default define(meta, (ps, user) => {
-	return new Promise((res, rej) => {
-		redisClient.pubsub('numsub', config.host, (_, x) => {
-			res({
-				count: x[1]
-			});
-		});
+export default define(meta, async () => {
+	const count = await Users.count({
+		lastActiveDate: MoreThan(new Date(Date.now() - USER_ONLINE_THRESHOLD))
 	});
+
+	return {
+		count
+	};
 });
diff --git a/src/server/api/endpoints/i/update.ts b/src/server/api/endpoints/i/update.ts
index c0ffd75e23..032dccd91a 100644
--- a/src/server/api/endpoints/i/update.ts
+++ b/src/server/api/endpoints/i/update.ts
@@ -96,6 +96,10 @@ export const meta = {
 			validator: $.optional.bool,
 		},
 
+		hideOnlineStatus: {
+			validator: $.optional.bool,
+		},
+
 		carefulBot: {
 			validator: $.optional.bool,
 			desc: {
@@ -228,6 +232,7 @@ export default define(meta, async (ps, _user, token) => {
 	if (ps.mutingNotificationTypes !== undefined) profileUpdates.mutingNotificationTypes = ps.mutingNotificationTypes as typeof notificationTypes[number][];
 	if (typeof ps.isLocked === 'boolean') updates.isLocked = ps.isLocked;
 	if (typeof ps.isExplorable === 'boolean') updates.isExplorable = ps.isExplorable;
+	if (typeof ps.hideOnlineStatus === 'boolean') updates.hideOnlineStatus = ps.hideOnlineStatus;
 	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;
diff --git a/src/server/api/streaming.ts b/src/server/api/streaming.ts
index 81b83edcf5..7224c23570 100644
--- a/src/server/api/streaming.ts
+++ b/src/server/api/streaming.ts
@@ -6,6 +6,7 @@ import { ParsedUrlQuery } from 'querystring';
 import authenticate from './authenticate';
 import { EventEmitter } from 'events';
 import { subsdcriber as redisClient } from '../../db/redis';
+import { Users } from '@/models';
 
 module.exports = (server: http.Server) => {
 	// Init websocket server
@@ -45,5 +46,11 @@ module.exports = (server: http.Server) => {
 				connection.send('pong');
 			}
 		});
+
+		if (user) {
+			Users.update(user.id, {
+				lastActiveDate: new Date(),
+			});
+		}
 	});
 };

From 1700154f00b789818da9de0d0aae669d99cb3f2f Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 17 Apr 2021 15:34:19 +0900
Subject: [PATCH 05/34] Update package.json

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index d3872fb4c5..c881e9a023 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "misskey",
 	"author": "syuilo <syuilotan@yahoo.co.jp>",
-	"version": "12.76.1-beta.1",
+	"version": "12.77.0-beta.1",
 	"codename": "indigo",
 	"repository": {
 		"type": "git",

From 3da93e7bf9271159cd2da63acce5c6e2cd265cfc Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 17 Apr 2021 17:35:44 +0900
Subject: [PATCH 06/34] Create .yarnrc

---
 .yarnrc | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 .yarnrc

diff --git a/.yarnrc b/.yarnrc
new file mode 100644
index 0000000000..788570fcd5
--- /dev/null
+++ b/.yarnrc
@@ -0,0 +1 @@
+network-timeout 600000

From 79e60afd420498c463b95b88b7032d747a8dda3c Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 17 Apr 2021 18:37:10 +0900
Subject: [PATCH 07/34] Update Dockerfile

---
 Dockerfile | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Dockerfile b/Dockerfile
index c1745fc215..067b772a42 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -22,7 +22,7 @@ RUN apk add --no-cache \
     vips-dev \
     vips
 
-COPY package.json yarn.lock ./
+COPY package.json yarn.lock .yarnrc ./
 RUN yarn install
 COPY . ./
 RUN yarn build

From e7610b24677600a49ca585b17b63b0aa0c972598 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 17 Apr 2021 23:52:54 +0900
Subject: [PATCH 08/34] display online status

---
 src/client/components/avatars.vue             |  2 +-
 src/client/components/global/avatar.vue       | 21 +++++++-
 src/client/components/note-detailed.vue       |  2 +-
 src/client/components/user-info.vue           |  2 +-
 .../components/user-online-indicator.vue      | 50 +++++++++++++++++++
 src/client/components/user-preview.vue        |  2 +-
 src/client/components/user-select-dialog.vue  |  4 +-
 src/client/components/users-dialog.vue        |  2 +-
 src/client/pages/clip.vue                     |  2 +-
 src/client/pages/follow-requests.vue          |  2 +-
 src/client/pages/instance/abuses.vue          |  2 +-
 src/client/pages/instance/user-dialog.vue     |  2 +-
 src/client/pages/instance/users.vue           |  2 +-
 src/client/pages/messaging/index.vue          |  2 +-
 .../messaging/messaging-room.message.vue      |  2 +-
 src/client/pages/my-groups/group.vue          |  2 +-
 src/client/pages/my-lists/list.vue            |  2 +-
 src/client/pages/note.vue                     |  2 +-
 src/client/pages/reversi/index.vue            |  2 +-
 src/client/pages/user/index.vue               |  4 +-
 src/client/ui/_common_/header.vue             |  2 +-
 src/client/ui/visitor/header.vue              |  4 +-
 22 files changed, 93 insertions(+), 24 deletions(-)
 create mode 100644 src/client/components/user-online-indicator.vue

diff --git a/src/client/components/avatars.vue b/src/client/components/avatars.vue
index cac95e6d40..da862967dd 100644
--- a/src/client/components/avatars.vue
+++ b/src/client/components/avatars.vue
@@ -1,7 +1,7 @@
 <template>
 <div>
 	<div v-for="user in us" :key="user.id" style="display:inline-block;width:32px;height:32px;margin-right:8px;">
-		<MkAvatar :user="user" style="width:32px;height:32px;"/>
+		<MkAvatar :user="user" style="width:32px;height:32px;" :show-indicator="true"/>
 	</div>
 </div>
 </template>
diff --git a/src/client/components/global/avatar.vue b/src/client/components/global/avatar.vue
index 83675a155c..64fb2116b6 100644
--- a/src/client/components/global/avatar.vue
+++ b/src/client/components/global/avatar.vue
@@ -1,9 +1,11 @@
 <template>
 <span class="eiwwqkts _noSelect" :class="{ cat }" :title="acct(user)" v-if="disableLink" v-user-preview="disablePreview ? undefined : user.id" @click="onClick">
 	<img class="inner" :src="url" decoding="async"/>
+	<MkUserOnlineIndicator v-if="showIndicator" class="indicator" :user="user"/>
 </span>
 <MkA class="eiwwqkts _noSelect" :class="{ cat }" :to="userPage(user)" :title="acct(user)" :target="target" v-else v-user-preview="disablePreview ? undefined : user.id">
 	<img class="inner" :src="url" decoding="async"/>
+	<MkUserOnlineIndicator v-if="showIndicator" class="indicator" :user="user"/>
 </MkA>
 </template>
 
@@ -12,8 +14,12 @@ import { defineComponent } from 'vue';
 import { getStaticImageUrl } from '@client/scripts/get-static-image-url';
 import { extractAvgColorFromBlurhash } from '@client/scripts/extract-avg-color-from-blurhash';
 import { acct, userPage } from '@client/filters/user';
+import MkUserOnlineIndicator from '@client/components/user-online-indicator.vue';
 
 export default defineComponent({
+	components: {
+		MkUserOnlineIndicator
+	},
 	props: {
 		user: {
 			type: Object,
@@ -30,6 +36,10 @@ export default defineComponent({
 		disablePreview: {
 			required: false,
 			default: false
+		},
+		showIndicator: {
+			required: false,
+			default: false
 		}
 	},
 	emits: ['click'],
@@ -93,7 +103,7 @@ export default defineComponent({
 		}
 	}
 
-	.inner {
+	> .inner {
 		position: absolute;
 		bottom: 0;
 		left: 0;
@@ -106,5 +116,14 @@ export default defineComponent({
 		width: 100%;
 		height: 100%;
 	}
+
+	> .indicator {
+		position: absolute;
+		z-index: 1;
+		bottom: 0;
+		left: 0;
+		width: 20%;
+		height: 20%;
+	}
 }
 </style>
diff --git a/src/client/components/note-detailed.vue b/src/client/components/note-detailed.vue
index b25c97543b..50e76e5299 100644
--- a/src/client/components/note-detailed.vue
+++ b/src/client/components/note-detailed.vue
@@ -35,7 +35,7 @@
 	</div>
 	<article class="article" @contextmenu.stop="onContextmenu">
 		<header class="header">
-			<MkAvatar class="avatar" :user="appearNote.user"/>
+			<MkAvatar class="avatar" :user="appearNote.user" :show-indicator="true"/>
 			<div class="body">
 				<div class="top">
 					<MkA class="name" :to="userPage(appearNote.user)" v-user-preview="appearNote.user.id">
diff --git a/src/client/components/user-info.vue b/src/client/components/user-info.vue
index ac2f9a75a6..289e0f3c3f 100644
--- a/src/client/components/user-info.vue
+++ b/src/client/components/user-info.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="_panel vjnjpkug">
 	<div class="banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl})` : ''"></div>
-	<MkAvatar class="avatar" :user="user" :disable-preview="true"/>
+	<MkAvatar class="avatar" :user="user" :disable-preview="true" :show-indicator="true"/>
 	<div class="title">
 		<MkA class="name" :to="userPage(user)"><MkUserName :user="user" :nowrap="false"/></MkA>
 		<p class="username"><MkAcct :user="user"/></p>
diff --git a/src/client/components/user-online-indicator.vue b/src/client/components/user-online-indicator.vue
new file mode 100644
index 0000000000..bb98978bba
--- /dev/null
+++ b/src/client/components/user-online-indicator.vue
@@ -0,0 +1,50 @@
+<template>
+<div class="fzgwjkgc" :class="user.onlineStatus" v-tooltip="text"></div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+	props: {
+		user: {
+			type: Object,
+			required: true
+		},
+	},
+
+	computed: {
+		text(): string {
+			switch (this.user.onlineStatus) {
+				case 'online': return this.$ts.online;
+				case 'active': return this.$ts.active;
+				case 'offline': return this.$ts.offline;
+				case 'unknown': return this.$ts.unknown;
+			}
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.fzgwjkgc {
+	box-shadow: 0 0 0 3px var(--panel);
+	border-radius: 100%;
+
+	&.online {
+		background: #58d4c9;
+	}
+
+	&.active {
+		background: #e4bc48;
+	}
+
+	&.offline {
+		background: #ea5353;
+	}
+
+	&.unknown {
+		background: #888;
+	}
+}
+</style>
diff --git a/src/client/components/user-preview.vue b/src/client/components/user-preview.vue
index b2b3358374..2ec81a5220 100644
--- a/src/client/components/user-preview.vue
+++ b/src/client/components/user-preview.vue
@@ -3,7 +3,7 @@
 	<div v-if="showing" class="fxxzrfni _popup _shadow" :style="{ top: top + 'px', left: left + 'px' }" @mouseover="() => { $emit('mouseover'); }" @mouseleave="() => { $emit('mouseleave'); }">
 		<div v-if="fetched" class="info">
 			<div class="banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl})` : ''"></div>
-			<MkAvatar class="avatar" :user="user" :disable-preview="true"/>
+			<MkAvatar class="avatar" :user="user" :disable-preview="true" :show-indicator="true"/>
 			<div class="title">
 				<MkA class="name" :to="userPage(user)"><MkUserName :user="user" :nowrap="false"/></MkA>
 				<p class="username"><MkAcct :user="user"/></p>
diff --git a/src/client/components/user-select-dialog.vue b/src/client/components/user-select-dialog.vue
index 05a43402a8..a243e182e8 100644
--- a/src/client/components/user-select-dialog.vue
+++ b/src/client/components/user-select-dialog.vue
@@ -17,7 +17,7 @@
 	<div class="tbhwbxda _section result" v-if="username != '' || host != ''" :class="{ hit: users.length > 0 }">
 		<div class="users" v-if="users.length > 0">
 			<div class="user" v-for="user in users" :key="user.id" :class="{ selected: selected && selected.id === user.id }" @click="selected = user" @dblclick="ok()">
-				<MkAvatar :user="user" class="avatar"/>
+				<MkAvatar :user="user" class="avatar" :show-indicator="true"/>
 				<div class="body">
 					<MkUserName :user="user" class="name"/>
 					<MkAcct :user="user" class="acct"/>
@@ -31,7 +31,7 @@
 	<div class="tbhwbxda _section recent" v-if="username == '' && host == ''">
 		<div class="users">
 			<div class="user" v-for="user in recentUsers" :key="user.id" :class="{ selected: selected && selected.id === user.id }" @click="selected = user" @dblclick="ok()">
-				<MkAvatar :user="user" class="avatar"/>
+				<MkAvatar :user="user" class="avatar" :show-indicator="true"/>
 				<div class="body">
 					<MkUserName :user="user" class="name"/>
 					<MkAcct :user="user" class="acct"/>
diff --git a/src/client/components/users-dialog.vue b/src/client/components/users-dialog.vue
index 381aa60911..ebf867f702 100644
--- a/src/client/components/users-dialog.vue
+++ b/src/client/components/users-dialog.vue
@@ -7,7 +7,7 @@
 
 	<div class="users">
 		<MkA v-for="item in items" class="user" :key="item.id" :to="userPage(extract ? extract(item) : item)">
-			<MkAvatar :user="extract ? extract(item) : item" class="avatar" :disable-link="true"/>
+			<MkAvatar :user="extract ? extract(item) : item" class="avatar" :disable-link="true" :show-indicator="true"/>
 			<div class="body">
 				<MkUserName :user="extract ? extract(item) : item" class="name"/>
 				<MkAcct :user="extract ? extract(item) : item" class="acct"/>
diff --git a/src/client/pages/clip.vue b/src/client/pages/clip.vue
index 493a34e7f0..ca3e051d51 100644
--- a/src/client/pages/clip.vue
+++ b/src/client/pages/clip.vue
@@ -5,7 +5,7 @@
 			<Mfm :text="clip.description" :is-note="false" :i="$i"/>
 		</div>
 		<div class="user">
-			<MkAvatar :user="clip.user" class="avatar"/> <MkUserName :user="clip.user" :nowrap="false"/>
+			<MkAvatar :user="clip.user" class="avatar" :show-indicator="true"/> <MkUserName :user="clip.user" :nowrap="false"/>
 		</div>
 	</div>
 
diff --git a/src/client/pages/follow-requests.vue b/src/client/pages/follow-requests.vue
index 309c5b4fdf..31c00d63cd 100644
--- a/src/client/pages/follow-requests.vue
+++ b/src/client/pages/follow-requests.vue
@@ -9,7 +9,7 @@
 		</template>
 		<template #default="{items}">
 			<div class="user _panel" v-for="req in items" :key="req.id">
-				<MkAvatar class="avatar" :user="req.follower"/>
+				<MkAvatar class="avatar" :user="req.follower" :show-indicator="true"/>
 				<div class="body">
 					<div class="name">
 						<MkA class="name" :to="userPage(req.follower)" v-user-preview="req.follower.id"><MkUserName :user="req.follower"/></MkA>
diff --git a/src/client/pages/instance/abuses.vue b/src/client/pages/instance/abuses.vue
index 736f05cc72..c8355b0683 100644
--- a/src/client/pages/instance/abuses.vue
+++ b/src/client/pages/instance/abuses.vue
@@ -36,7 +36,7 @@
 			<MkPagination :pagination="pagination" #default="{items}" ref="reports" style="margin-top: var(--margin);">
 				<div class="bcekxzvu _card _gap" v-for="report in items" :key="report.id">
 					<div class="_content target">
-						<MkAvatar class="avatar" :user="report.targetUser"/>
+						<MkAvatar class="avatar" :user="report.targetUser" :show-indicator="true"/>
 						<div class="info">
 							<MkUserName class="name" :user="report.targetUser"/>
 							<div class="acct">@{{ acct(report.targetUser) }}</div>
diff --git a/src/client/pages/instance/user-dialog.vue b/src/client/pages/instance/user-dialog.vue
index fb0e766c5a..a6bab5ecb8 100644
--- a/src/client/pages/instance/user-dialog.vue
+++ b/src/client/pages/instance/user-dialog.vue
@@ -8,7 +8,7 @@
 	<div class="vrcsvlkm" v-if="user && info">
 		<div class="_section">
 			<div class="banner" :style="bannerStyle">
-				<MkAvatar class="avatar" :user="user"/>
+				<MkAvatar class="avatar" :user="user" :show-indicator="true"/>
 			</div>
 		</div>
 		<div class="_section">
diff --git a/src/client/pages/instance/users.vue b/src/client/pages/instance/users.vue
index e998971830..ea09b1bda0 100644
--- a/src/client/pages/instance/users.vue
+++ b/src/client/pages/instance/users.vue
@@ -54,7 +54,7 @@
 
 			<MkPagination :pagination="pagination" #default="{items}" class="users" ref="users">
 				<button class="user _panel _button _gap" v-for="user in items" :key="user.id" @click="show(user)">
-					<MkAvatar class="avatar" :user="user" :disable-link="true"/>
+					<MkAvatar class="avatar" :user="user" :disable-link="true" :show-indicator="true"/>
 					<div class="body">
 						<header>
 							<MkUserName class="name" :user="user"/>
diff --git a/src/client/pages/messaging/index.vue b/src/client/pages/messaging/index.vue
index e5ad6b01a5..1e316e9090 100644
--- a/src/client/pages/messaging/index.vue
+++ b/src/client/pages/messaging/index.vue
@@ -12,7 +12,7 @@
 			v-anim="i"
 		>
 			<div>
-				<MkAvatar class="avatar" :user="message.groupId ? message.user : isMe(message) ? message.recipient : message.user"/>
+				<MkAvatar class="avatar" :user="message.groupId ? message.user : isMe(message) ? message.recipient : message.user" :show-indicator="true"/>
 				<header v-if="message.groupId">
 					<span class="name">{{ message.group.name }}</span>
 					<MkTime :time="message.createdAt" class="time"/>
diff --git a/src/client/pages/messaging/messaging-room.message.vue b/src/client/pages/messaging/messaging-room.message.vue
index 8c275d5e33..1228baff68 100644
--- a/src/client/pages/messaging/messaging-room.message.vue
+++ b/src/client/pages/messaging/messaging-room.message.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="thvuemwp" :class="{ isMe }" v-size="{ max: [400, 500] }">
-	<MkAvatar class="avatar" :user="message.user"/>
+	<MkAvatar class="avatar" :user="message.user" :show-indicator="true"/>
 	<div class="content">
 		<div class="balloon" :class="{ noText: message.text == null }" >
 			<button class="delete-button" v-if="isMe" :title="$ts.delete" @click="del">
diff --git a/src/client/pages/my-groups/group.vue b/src/client/pages/my-groups/group.vue
index 0631118ca3..90a60e5e2b 100644
--- a/src/client/pages/my-groups/group.vue
+++ b/src/client/pages/my-groups/group.vue
@@ -17,7 +17,7 @@
 			<div class="_content">
 				<div class="users">
 					<div class="user _panel" v-for="user in users" :key="user.id">
-						<MkAvatar :user="user" class="avatar"/>
+						<MkAvatar :user="user" class="avatar" :show-indicator="true"/>
 						<div class="body">
 							<MkUserName :user="user" class="name"/>
 							<MkAcct :user="user" class="acct"/>
diff --git a/src/client/pages/my-lists/list.vue b/src/client/pages/my-lists/list.vue
index 21c8a696b9..2892150ffe 100644
--- a/src/client/pages/my-lists/list.vue
+++ b/src/client/pages/my-lists/list.vue
@@ -16,7 +16,7 @@
 			<div class="_content">
 				<div class="users">
 					<div class="user _panel" v-for="user in users" :key="user.id">
-						<MkAvatar :user="user" class="avatar"/>
+						<MkAvatar :user="user" class="avatar" :show-indicator="true"/>
 						<div class="body">
 							<MkUserName :user="user" class="name"/>
 							<MkAcct :user="user" class="acct"/>
diff --git a/src/client/pages/note.vue b/src/client/pages/note.vue
index b203a1322a..279dd96661 100644
--- a/src/client/pages/note.vue
+++ b/src/client/pages/note.vue
@@ -18,7 +18,7 @@
 						<b>{{ item.name }}</b>
 						<div v-if="item.description" class="description">{{ item.description }}</div>
 						<div class="user">
-							<MkAvatar :user="item.user" class="avatar"/> <MkUserName :user="item.user" :nowrap="false"/>
+							<MkAvatar :user="item.user" class="avatar" :show-indicator="true"/> <MkUserName :user="item.user" :nowrap="false"/>
 						</div>
 					</MkA>
 				</div>
diff --git a/src/client/pages/reversi/index.vue b/src/client/pages/reversi/index.vue
index d590bbeb9f..59b228f5f6 100644
--- a/src/client/pages/reversi/index.vue
+++ b/src/client/pages/reversi/index.vue
@@ -11,7 +11,7 @@
 			<template #header>{{ $ts.invitations }}</template>
 			<div class="nfcacttm">
 				<button class="invitation _panel _button" v-for="invitation in invitations" tabindex="-1" @click="accept(invitation)">
-					<MkAvatar class="avatar" :user="invitation.parent"/>
+					<MkAvatar class="avatar" :user="invitation.parent" :show-indicator="true"/>
 					<span class="name"><b><MkUserName :user="invitation.parent"/></b></span>
 					<span class="username">@{{ invitation.parent.username }}</span>
 					<MkTime :time="invitation.createdAt" class="time"/>
diff --git a/src/client/pages/user/index.vue b/src/client/pages/user/index.vue
index 630ac382b5..92656fff2c 100644
--- a/src/client/pages/user/index.vue
+++ b/src/client/pages/user/index.vue
@@ -8,7 +8,7 @@
 		</div>
 		<div class="contents">
 			<div class="side _forceContainerFull_">
-				<MkAvatar class="avatar" :user="user" :disable-preview="true"/>
+				<MkAvatar class="avatar" :user="user" :disable-preview="true" :show-indicator="true"/>
 				<div class="name">
 					<MkUserName :user="user" :nowrap="false" class="name"/>
 					<MkAcct :user="user" :detail="true" class="acct"/>
@@ -121,7 +121,7 @@
 						<MkFollowButton v-if="$i.id != user.id" :user="user" :inline="true" :transparent="false" :full="true" class="koudoku"/>
 					</div>
 				</div>
-				<MkAvatar class="avatar" :user="user" :disable-preview="true"/>
+				<MkAvatar class="avatar" :user="user" :disable-preview="true" :show-indicator="true"/>
 				<div class="title">
 					<MkUserName :user="user" :nowrap="false" class="name"/>
 					<div class="bottom">
diff --git a/src/client/ui/_common_/header.vue b/src/client/ui/_common_/header.vue
index a60e1df73f..493deaeb96 100644
--- a/src/client/ui/_common_/header.vue
+++ b/src/client/ui/_common_/header.vue
@@ -7,7 +7,7 @@
 		<div class="titleContainer">
 			<div class="title">
 				<Fa v-if="info.icon" :icon="info.icon" :key="info.icon" class="icon"/>
-				<MkAvatar v-else-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true"/>
+				<MkAvatar v-else-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true" :show-indicator="true"/>
 				<MkUserName v-if="info.userName" :user="info.userName" :nowrap="false" class="text"/>
 				<span v-else-if="info.title" class="text">{{ info.title }}</span>
 			</div>
diff --git a/src/client/ui/visitor/header.vue b/src/client/ui/visitor/header.vue
index a66c4d5fb0..42598ce1c0 100644
--- a/src/client/ui/visitor/header.vue
+++ b/src/client/ui/visitor/header.vue
@@ -9,7 +9,7 @@
 			<div class="page active link" v-if="info">
 				<div class="title">
 					<Fa v-if="info.icon" :icon="info.icon" :key="info.icon" class="icon"/>
-					<MkAvatar v-else-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true"/>
+					<MkAvatar v-else-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true" :show-indicator="true"/>
 					<span v-if="info.title" class="text">{{ info.title }}</span>
 					<MkUserName v-else-if="info.userName" :user="info.userName" :nowrap="false" class="text"/>
 				</div>
@@ -28,7 +28,7 @@
 		</button>
 		<div class="title" v-if="info">
 			<Fa v-if="info.icon" :icon="info.icon" :key="info.icon" class="icon"/>
-			<MkAvatar v-else-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true"/>
+			<MkAvatar v-else-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true" :show-indicator="true"/>
 			<span v-if="info.title" class="text">{{ info.title }}</span>
 			<MkUserName v-else-if="info.userName" :user="info.userName" :nowrap="false" class="text"/>
 		</div>

From 8c4662e6e583091ea030de97ed035dac070d2501 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 17 Apr 2021 23:53:05 +0900
Subject: [PATCH 09/34] Improve tooltip behaviour

---
 src/client/components/ui/tooltip.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/client/components/ui/tooltip.vue b/src/client/components/ui/tooltip.vue
index b220fe5d8c..de8c02ad4a 100644
--- a/src/client/components/ui/tooltip.vue
+++ b/src/client/components/ui/tooltip.vue
@@ -39,7 +39,7 @@ export default defineComponent({
 			const contentHeight = this.$refs.content.offsetHeight;
 
 			let left = rect.left + window.pageXOffset + (this.source.offsetWidth / 2);
-			let top = rect.top + window.pageYOffset + this.source.offsetHeight;
+			let top = rect.top + window.pageYOffset - contentHeight;
 
 			left -= (this.$el.offsetWidth / 2);
 
@@ -47,9 +47,9 @@ export default defineComponent({
 				left = window.innerWidth - contentWidth + window.pageXOffset - 1;
 			}
 
-			if (top + contentHeight - window.pageYOffset > window.innerHeight) {
-				top = rect.top + window.pageYOffset - contentHeight;
-				this.$refs.content.style.transformOrigin = 'center bottom';
+			if (top - window.pageYOffset < 0) {
+				top = rect.top + window.pageYOffset + this.source.offsetHeight;
+				this.$refs.content.style.transformOrigin = 'center top';
 			}
 
 			this.$el.style.left = left + 'px';
@@ -81,6 +81,6 @@ export default defineComponent({
 	text-align: center;
 	border-radius: 4px;
 	pointer-events: none;
-	transform-origin: center top;
+	transform-origin: center bottom;
 }
 </style>

From 3553f3be4e3bc4976e419b50d68e0bd06f4aebfc Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 18 Apr 2021 00:07:20 +0900
Subject: [PATCH 10/34] 12.77.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index c881e9a023..cd73d0e36c 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "misskey",
 	"author": "syuilo <syuilotan@yahoo.co.jp>",
-	"version": "12.77.0-beta.1",
+	"version": "12.77.0",
 	"codename": "indigo",
 	"repository": {
 		"type": "git",

From 7c26fbbb2ea1d35b94dde809c2a2a3ae272163d9 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 18 Apr 2021 00:23:38 +0900
Subject: [PATCH 11/34] New Crowdin updates (#7451)

* New translations ja-JP.yml (English)

* New translations theme.md (English)

* New translations ja-JP.yml (Ukrainian)

* New translations ja-JP.yml (Chinese Traditional)

* New translations theme.md (Chinese Simplified)

* New translations ja-JP.yml (Chinese Simplified)

* New translations ja-JP.yml (Japanese, Kansai)

* New translations mfm.md (Czech)

* New translations timelines.md (Czech)

* New translations theme.md (Czech)

* New translations reaction.md (Czech)

* New translations pages.md (Czech)

* New translations mute.md (Czech)

* New translations follow.md (Czech)

* New translations ja-JP.yml (Italian)

* New translations theme.md (German)

* New translations ja-JP.yml (German)

* New translations keyboard-shortcut.md (Czech)

* New translations custom-emoji.md (Czech)

* New translations ja-JP.yml (Spanish)

* New translations theme.md (French)

* New translations stream.md (French)

* New translations reversi-bot.md (French)

* New translations create-plugin.md (Czech)

* New translations aiscript.md (Czech)

* New translations ja-JP.yml (Czech)

* New translations ja-JP.yml (Arabic)

* New translations ja-JP.yml (Polish)

* New translations ja-JP.yml (Russian)

* New translations mute.md (Korean)

* New translations keyboard-shortcut.md (Korean)

* New translations follow.md (Korean)

* New translations custom-emoji.md (Korean)

* New translations create-plugin.md (Korean)

* New translations api.md (Korean)

* New translations ja-JP.yml (Korean)

* New translations reaction.md (Korean)

* New translations pages.md (Korean)

* New translations reversi-bot.md (Korean)

* New translations stream.md (Korean)

* New translations deck.md (Korean)

* New translations timelines.md (Korean)

* New translations theme.md (Korean)
---
 locales/ar-SA.yml                   |   1 +
 locales/cs-CZ.yml                   | 373 +++++++++++++++
 locales/de-DE.yml                   |   3 +
 locales/en-US.yml                   |   3 +
 locales/es-ES.yml                   |   3 +
 locales/it-IT.yml                   |   2 +
 locales/ja-KS.yml                   | 698 +++++++++++++++++++++++++++-
 locales/ko-KR.yml                   | 107 +++++
 locales/pl-PL.yml                   |   3 +
 locales/ru-RU.yml                   |   5 +-
 locales/uk-UA.yml                   |   3 +
 locales/zh-CN.yml                   |   3 +
 locales/zh-TW.yml                   | 154 +++---
 src/docs/cs-CZ/aiscript.md          |   2 +-
 src/docs/cs-CZ/create-plugin.md     |   2 +-
 src/docs/cs-CZ/custom-emoji.md      |   2 +-
 src/docs/cs-CZ/follow.md            |   2 +-
 src/docs/cs-CZ/keyboard-shortcut.md |  26 +-
 src/docs/cs-CZ/mfm.md               |   2 +-
 src/docs/cs-CZ/mute.md              |   2 +-
 src/docs/cs-CZ/pages.md             |   4 +-
 src/docs/cs-CZ/reaction.md          |   2 +-
 src/docs/cs-CZ/theme.md             |  16 +-
 src/docs/cs-CZ/timelines.md         |   6 +-
 src/docs/de-DE/theme.md             |   2 +-
 src/docs/en-US/theme.md             |   2 +-
 src/docs/fr-FR/reversi-bot.md       |   2 +-
 src/docs/fr-FR/stream.md            |   4 +-
 src/docs/fr-FR/theme.md             |   2 +-
 src/docs/ko-KR/api.md               |  78 ++--
 src/docs/ko-KR/create-plugin.md     |  54 +--
 src/docs/ko-KR/custom-emoji.md      |   2 +-
 src/docs/ko-KR/deck.md              |  22 +-
 src/docs/ko-KR/follow.md            |   4 +-
 src/docs/ko-KR/keyboard-shortcut.md |  70 +--
 src/docs/ko-KR/mute.md              |  14 +-
 src/docs/ko-KR/pages.md             |  10 +-
 src/docs/ko-KR/reaction.md          |  14 +-
 src/docs/ko-KR/reversi-bot.md       | 126 ++---
 src/docs/ko-KR/stream.md            | 208 ++++-----
 src/docs/ko-KR/theme.md             |  62 +--
 src/docs/ko-KR/timelines.md         |  12 +-
 src/docs/zh-CN/theme.md             |   2 +-
 43 files changed, 1665 insertions(+), 449 deletions(-)

diff --git a/locales/ar-SA.yml b/locales/ar-SA.yml
index 1b400f65f9..ddc0dc0e86 100644
--- a/locales/ar-SA.yml
+++ b/locales/ar-SA.yml
@@ -429,6 +429,7 @@ latestVersion: "آخر نسخة مستقرة"
 usageAmount: "الإستخدام"
 capacity: "السعة"
 inUse: "مستخدم"
+info: "عن"
 _email:
   _follow:
     title: "يتابعك"
diff --git a/locales/cs-CZ.yml b/locales/cs-CZ.yml
index 17deab9420..d6c5f26264 100644
--- a/locales/cs-CZ.yml
+++ b/locales/cs-CZ.yml
@@ -1,2 +1,375 @@
 ---
 _lang_: "Čeština"
+introMisskey: "Vítejte! Misskey je otevřený a decentralizovaný microblogový servis.\n\"Poznámkami\" můžete sdílet co se zrovna děje se všemi ve Vašem okolí. 📡\nPomocí \"reakcí\" můžete sdílet své názory a pocity na ostatní poznámky. 👍\nPojďte objevovat nový svět! 🚀"
+monthAndDay: "{day}. {month}."
+search: "Vyhledávání"
+notifications: "Oznámení"
+username: "Uživatelské jméno"
+password: "Heslo"
+fetchingAsApObject: "Načítám data z Fediversu..."
+ok: "Potvrdit"
+gotIt: "Rozumím!"
+cancel: "Zrušit"
+enterUsername: "Zadej uživatelské jméno"
+renotedBy: "{user} přeposla/a"
+noNotes: "Žádné poznámky"
+noNotifications: "Žádná oznámení"
+instance: "Instance"
+settings: "Nastavení"
+basicSettings: "Obecná nastavení"
+otherSettings: "Rozšířená nastavení"
+openInWindow: "Otevřít v novém okně"
+profile: "Váš profil"
+timeline: "Časová osa"
+noAccountDescription: "Tento uživatel zatím nenapsal svou biografii."
+login: "Přihlásit se"
+loggingIn: "Probíhá přihlašování"
+logout: "Odhlásit"
+signup: "Registrace"
+uploading: "Nahrávám"
+save: "Uložit"
+users: "Uživatelé"
+addUser: "Přidat uživatele"
+favorite: "Oblíbené"
+favorites: "Oblíbené"
+unfavorite: "Odebrat z oblízených"
+favorited: "Přidáno do oblíbených"
+alreadyFavorited: "Už je mezi oblíbenými"
+cantFavorite: "Nepodařilo se přidat mezi oblíbené."
+pin: "Připnout"
+unpin: "Odepnout"
+copyContent: "Zkopírovat obsah"
+copyLink: "Kopírovat odkaz"
+delete: "Smazat"
+deleteAndEdit: "Smazat a upravit"
+deleteAndEditConfirm: "Jste si jistí že chcete smazat tuto poznámku a editovat ji? Ztratíte tím všechny reakce, sdílení a odpovědi na ni."
+addToList: "Přidat do seznamu"
+sendMessage: "Odeslat zprávu"
+copyUsername: "Kopírovat uživatelské jméno"
+searchUser: "Vyhledat uživatele"
+reply: "Odpovědět"
+loadMore: "Zobrazit více"
+showMore: "Zobrazit více"
+mention: "Zmínění"
+mentions: "Zmínění"
+importAndExport: "Import a export"
+import: "Importovat"
+export: "Exportovat"
+files: "Soubor(ů)"
+download: "Stáhnout"
+unfollowConfirm: "Jste si jisti že už nechcete sledovat {name}?"
+importRequested: "Požádali jste o export. To může chvilku trvat."
+lists: "Seznamy"
+noLists: "Nemáte žádné seznamy"
+note: "Poznámka"
+notes: "Poznámky"
+following: "Sledovaní"
+followers: "Sledující"
+followsYou: "Sledují vás"
+createList: "Vytvořit seznam"
+manageLists: "Spravovat seznam"
+error: "Chyba"
+somethingHappened: "Jejda. Něco se nepovedlo."
+retry: "Opakovat"
+pageLoadError: "Nepodařilo se načíst stránku"
+follow: "Sledovaní"
+unfollow: "Přestat sledovat"
+renote: "Přeposlat"
+cantReRenote: "Odpověď nemůže být odstraněna."
+quote: "Citovat"
+pinned: "Připnout"
+you: "Vy"
+clickToShow: "Klikněte pro zobrazení"
+sensitive: "NSFW"
+add: "Přidat"
+reaction: "Reakce"
+reactionSettingDescription: "Vyberte Vaší oblíbenou reakci, kterou chcete připnout ve výběru."
+reactionSettingDescription2: "Přetažením změníte pořadí, kliknutím smažete, zmáčkněte \"+\" k přidání"
+rememberNoteVisibility: "Zapamatovat nastavení zobrazení poznámky"
+attachCancel: "Odstranit přílohu"
+markAsSensitive: "Označit jako NSFW"
+unmarkAsSensitive: "Odznačit jako NSFW"
+enterFileName: "Zadejte název souboru"
+mute: "Ztlumit"
+unmute: "Odmlčet"
+block: "Zablokovat"
+unblock: "Odblokovat"
+suspend: "Zmrazit"
+unsuspend: "Odmrazit"
+blockConfirm: "Jste si jistí že chcete zablokovat tento účet?"
+unblockConfirm: "Jste si jistí že chcete odblokovat tento účet?"
+suspendConfirm: "Jste si jistí že chcete suspendovat tenhle účet?"
+unsuspendConfirm: "Jste si jistí že chcete obnovit tenhle účet?"
+selectList: "Vybrat seznam"
+selectAntenna: "Vyberte Anténu"
+selectWidget: "Zvolte widget"
+editWidgets: "Upravit widget"
+editWidgetsExit: "Hotovo"
+customEmojis: "Vlastní emoji"
+emoji: "Emoji"
+emojiName: "Jméno emoji"
+emojiUrl: "URL obrázku"
+addEmoji: "Přidat emoji"
+settingGuide: "Doporučené nastavení"
+flagAsBot: "Tento účet je bot"
+flagAsBotDescription: "Pokud je tento účet kontrolován programem zaškrtněte tuto možnost. To označí tento účet jako bot pro ostatní vývojáře a zabrání tak nekonečným interakcím s ostatními boty a upraví Misskey systém aby se choval k tomuhle účtu jako bot."
+flagAsCat: "Tenhle účet je kočka"
+flagAsCatDescription: "Vyberte tuto možnost aby tento účet byl označen jako kočka."
+autoAcceptFollowed: "Automaticky akceptovat následování od účtů které sledujete"
+addAcount: "Přidat účet"
+loginFailed: "Přihlášení se nezdařilo."
+general: "Obecně"
+wallpaper: "Obrázek na pozadí"
+setWallpaper: "Nastavení obrázku na pozadí"
+removeWallpaper: "Odstranit pozadí"
+selectUser: "Vyberte uživatele"
+recipient: "Pro"
+annotation: "Komentáře"
+instances: "Instance"
+registeredAt: "Registrován"
+latestRequestSentAt: "Poslední požadavek poslán"
+latestRequestReceivedAt: "Poslední požadavek přijat"
+latestStatus: "Poslední status"
+storageUsage: "Využití úložiště"
+charts: "Grafy"
+perHour: "za hodinu"
+perDay: "za den"
+blockThisInstance: "Blokovat tuto instanci"
+operations: "Operace"
+software: "Software"
+version: "Verze"
+metadata: "Metadata"
+jobQueue: "Fronta úloh"
+cpuAndMemory: "CPU a paměť"
+network: "Síť"
+disk: "Disk"
+instanceInfo: "Informace o instanci"
+statistics: "Statistiky"
+clearQueue: "Vyčistit frontu"
+clearQueueConfirmTitle: "Jste si jisti že zrušit všechny úlohy ve frontě?"
+clearCachedFiles: "Vyprázdnit mezipaměť"
+blockedInstances: "Blokované instance"
+pinLimitExceeded: "Nemůžete připnout další poznámky."
+intro: "Instalace Misskey byla dokončena! Prosím vytvořte admina."
+done: "Hotovo"
+processing: "Zpracovávám"
+preview: "Náhled"
+default: "Výchozí"
+blocked: "Blokováno"
+suspended: "Suspendováno"
+all: "Vše"
+subscribing: "Odebíráte"
+publishing: "Publikuji"
+notResponding: "Neodpovídá"
+instanceFollowers: "Následovníci na instanci"
+instanceUsers: "Uživatelé této instance"
+changePassword: "Změnit heslo"
+security: "Zabezpečení"
+currentPassword: "Současné heslo"
+newPassword: "Nové heslo"
+newPasswordRetype: "Nové heslo (znovu)"
+attachFile: "Přiložit soubor"
+more: "Více!"
+usernameOrUserId: "Uživatelské jméno nebo uživatelské id"
+noSuchUser: "Uživatel nebyl nalezen"
+announcements: "Oznámení"
+imageUrl: "URL obrázku"
+remove: "Smazat"
+removed: "Smazáno"
+removeAreYouSure: "Jste si jistí že chcete smazat \"{x}\"?"
+deleteAreYouSure: "Jste si jistí že chcete smazat \"{x}\"?"
+resetAreYouSure: "Opravdu resetovat?"
+saved: "Uloženo"
+messaging: "Zprávy"
+upload: "Nahrát soubory"
+fromDrive: "Z disku"
+fromUrl: "Z URL"
+uploadFromUrl: "Nahrát z URL adresy"
+uploadFromUrlDescription: "URL adresa souboru, který chcete nahrát"
+uploadFromUrlMayTakeTime: "Může trvat nějakou dobu, dokud nebude dokončeno nahrávání."
+explore: "Objevovat"
+games: "Misskey hry"
+messageRead: "Přečtené"
+noMoreHistory: "To je vše"
+startMessaging: "Zahájit chat"
+nUsersRead: "přečteno {n} uživateli"
+agreeTo: "Souhlasím s {0}"
+tos: "Podmínky užívání"
+start: "Začít"
+home: "Domů"
+remoteUserCaution: "Tyto informace nemusí být aktuální jelikož uživatel je ze vzdálené instance."
+activity: "Aktivita"
+images: "Obrázky"
+birthday: "Datum narození"
+registeredDate: "Datum registrace"
+location: "Lokace"
+lightThemes: "Světlý vzhled"
+darkThemes: "Tmavý vzhled"
+syncDeviceDarkMode: "Synchronizovat tmavý vzhled s nastavením Vašeho systému"
+drive: "Úložiště"
+fileName: "Název souboru"
+selectFile: "Vybrat soubor"
+selectFiles: "Vybrat soubory"
+selectFolder: "Vyberte složku"
+selectFolders: "Vyberte složky"
+renameFile: "Přejmenovat soubor"
+folderName: "Název složky"
+createFolder: "Vytvořit složku"
+renameFolder: "Přejmenovat složku"
+deleteFolder: "Odstranit složku"
+copyUrl: "Kopírovat URL"
+rename: "Přejmenovat"
+avatar: "Avatar"
+banner: "Baner"
+nsfw: "NSFW"
+disconnectedFromServer: "Spojení bylo přerušeno"
+reload: "Aktualizovat"
+watch: "Sledovat"
+unwatch: "Přestat sledovat"
+accept: "Souhlasím"
+reject: "Odmítnout"
+normal: "Normální"
+instanceName: "Název instance"
+instanceDescription: "Popis instance"
+maintainerName: "Správce"
+maintainerEmail: "E-mailová adresa správce"
+tosUrl: "URL pro smluvní podmínky"
+thisYear: "Tento rok"
+thisMonth: "Tento měsíc"
+today: "Dnes"
+dayX: "{day}"
+monthX: "{month}"
+yearX: "{year}"
+pages: "Stránky"
+integration: "Integrace"
+connectSerice: "Připojit"
+disconnectSerice: "Odpojit"
+enableLocalTimeline: "Povolit lokální čas"
+enableGlobalTimeline: "Povolit globální čas"
+registration: "Registrace"
+enableRegistration: "Povolit registraci novým uživatelům"
+invite: "Pozvat"
+inMb: "V megabajtech"
+iconUrl: "Favicon URL"
+bannerUrl: "Baner URL"
+basicInfo: "Základní informace"
+hcaptcha: "hCaptcha"
+userList: "Seznamy"
+about: "Informace"
+aboutMisskey: "O Misskey"
+administrator: "Administrátor"
+token: "Token"
+twoStepAuthentication: "Dvoufaktorová autentikace"
+moderator: "Moderátor"
+nUsersMentioned: "{n} uživatelů zmínilo"
+securityKey: "Bezpečnostní klíč"
+securityKeyName: "Název klíče"
+registerSecurityKey: "Registrovat bezpečnostní klíč"
+lastUsed: "Naposledy použito"
+unregister: "Odstranit"
+resetPassword: "Resetovat heslo"
+newPasswordIs: "Nové heslo je \"{password}\""
+reduceUiAnimation: "Snížit UI animace"
+share: "Sdílet"
+notFound: "Nenalezeno"
+notFoundDescription: "Nebyla nalezená žádná stránka korespondující se zadanou URL."
+uploadFolder: "Výchozí lokace pro upload"
+cacheClear: "Vymazat cache"
+markAsReadAllNotifications: "Označit všechna oznámení za přečtená"
+markAsReadAllUnreadNotes: "Označit všechny příspěvky za přečtené"
+markAsReadAllTalkMessages: "Označit všechny zprávy za přečtené"
+help: "Nápověda"
+inputMessageHere: "Sem zadejte zprávu"
+close: "Zavřít"
+group: "Skupina"
+groups: "Skupiny"
+createGroup: "Vytvořit skupinu"
+ownedGroups: "Vlastněné skupiny"
+joinedGroups: "Členství ve skupinách"
+invites: "Pozvat"
+groupName: "Název skupiny"
+members: "Členové"
+transfer: "Převod"
+title: "Titulek"
+text: "Text"
+enable: "Povolit"
+next: "Další"
+retype: "Zadejte znovu"
+noteOf: "{user} poznámky"
+inviteToGroup: "Pozvat do skupiny"
+invitations: "Pozvat"
+smtpUser: "Uživatelské jméno"
+smtpPass: "Heslo"
+clearCache: "Vyprázdnit mezipaměť"
+info: "Informace"
+_mfm:
+  mention: "Zmínění"
+  quote: "Citovat"
+  emoji: "Vlastní emoji"
+  search: "Vyhledávání"
+_sidebar:
+  icon: "Avatar"
+_theme:
+  keys:
+    mention: "Zmínění"
+    renote: "Přeposlat"
+_sfx:
+  note: "Poznámky"
+  notification: "Oznámení"
+  chat: "Zprávy"
+_widgets:
+  notifications: "Oznámení"
+  timeline: "Časová osa"
+  activity: "Aktivita"
+  jobQueue: "Fronta úloh"
+_cw:
+  show: "Zobrazit více"
+_visibility:
+  home: "Domů"
+  followers: "Sledující"
+_profile:
+  username: "Uživatelské jméno"
+_exportOrImport:
+  followingList: "Sledovaní"
+  muteList: "Ztlumit"
+  blockingList: "Zablokovat"
+  userLists: "Seznamy"
+_timelines:
+  home: "Domů"
+_rooms:
+  _roomType:
+    default: "Výchozí"
+_pages:
+  blocks:
+    image: "Obrázky"
+  script:
+    categories:
+      list: "Seznamy"
+    blocks:
+      _join:
+        arg1: "Seznamy"
+      _randomPick:
+        arg1: "Seznamy"
+      _dailyRandomPick:
+        arg1: "Seznamy"
+      _seedRandomPick:
+        arg2: "Seznamy"
+      _pick:
+        arg1: "Seznamy"
+      _listLen:
+        arg1: "Seznamy"
+    types:
+      array: "Seznamy"
+_notification:
+  _types:
+    follow: "Sledovaní"
+    mention: "Zmínění"
+    renote: "Přeposlat"
+    quote: "Citovat"
+    reaction: "Reakce"
+_deck:
+  _columns:
+    notifications: "Oznámení"
+    tl: "Časová osa"
+    list: "Seznamy"
+    mentions: "Zmínění"
diff --git a/locales/de-DE.yml b/locales/de-DE.yml
index ceec5c8a6f..1f4e739550 100644
--- a/locales/de-DE.yml
+++ b/locales/de-DE.yml
@@ -710,6 +710,8 @@ typingUsers: "{users} ist/sind am schreiben..."
 jumpToSpecifiedDate: "Zu bestimmtem Datum springen"
 showingPastTimeline: "Momentan wird eine alte Chronik angezeigt"
 clear: "Zurückkehren"
+goBack: "Zurück"
+info: "Über"
 _email:
   _follow:
     title: "Du hast einen neuen Follower"
@@ -865,6 +867,7 @@ _theme:
   install: "Thema installieren"
   manage: "Themaverwaltung"
   code: "Themen-Code"
+  description: "Beschreibung"
   installed: "{name} wurde installiert"
   installedThemes: "Installierte Themen"
   builtinThemes: "Eingebaute Themen"
diff --git a/locales/en-US.yml b/locales/en-US.yml
index 496306194c..97ec618180 100644
--- a/locales/en-US.yml
+++ b/locales/en-US.yml
@@ -710,6 +710,8 @@ typingUsers: "{users} is/are typing..."
 jumpToSpecifiedDate: "Jump to specific date"
 showingPastTimeline: "Currently displaying an old timeline"
 clear: "Return"
+goBack: "Back"
+info: "About"
 _email:
   _follow:
     title: "You've got a new follower"
@@ -865,6 +867,7 @@ _theme:
   install: "Install theme"
   manage: "Themes manager"
   code: "Theme code"
+  description: "Description"
   installed: "{name} has been installed"
   installedThemes: "Installed themes"
   builtinThemes: "Built-in themes"
diff --git a/locales/es-ES.yml b/locales/es-ES.yml
index a168ffd90e..e9a0814276 100644
--- a/locales/es-ES.yml
+++ b/locales/es-ES.yml
@@ -652,6 +652,8 @@ backgroundColor: "Fondo"
 accentColor: "Acento"
 textColor: "Texto"
 value: "Valores"
+goBack: "Deseleccionar"
+info: "Información"
 _email:
   _follow:
     title: "te ha seguido"
@@ -745,6 +747,7 @@ _theme:
   install: "Instalar tema"
   manage: "Gestor de temas"
   code: "Código del tema"
+  description: "Descripción"
   installed: "{name} ha sido instalado"
   alreadyInstalled: "Este tema ya está instalado"
   invalid: "El formato del tema no es válido"
diff --git a/locales/it-IT.yml b/locales/it-IT.yml
index 25ee8c6f6b..08aac507a1 100644
--- a/locales/it-IT.yml
+++ b/locales/it-IT.yml
@@ -615,6 +615,7 @@ inChannelSearch: "Cerca in canale"
 useReactionPickerForContextMenu: "Cliccare sul tasto destro per aprire il pannello di reazioni"
 typingUsers: "{users} sta(nno) scrivendo"
 showingPastTimeline: "Stai visualizzando una vecchia timeline"
+info: "Informazioni"
 _email:
   _follow:
     title: "Ha iniziato a seguirti"
@@ -676,6 +677,7 @@ _theme:
   install: "Installa un tema"
   manage: "Gerisci temi"
   code: "Codice tema"
+  description: "Descrizione"
   installed: "{name} è installato"
   installedThemes: "Temi installati"
   builtinThemes: "Temi integrati"
diff --git a/locales/ja-KS.yml b/locales/ja-KS.yml
index 1a7001269a..c58e51cb9e 100644
--- a/locales/ja-KS.yml
+++ b/locales/ja-KS.yml
@@ -1,5 +1,6 @@
 ---
 _lang_: "日本語 (関西弁)"
+headlineMisskey: "ノートでつながるネットワーク"
 introMisskey: "ようお越し！Misskeyは、オープンソースの分散型マイクロブログサービスやねん。\n「ノート」を作って、いま起こっとることを共有したり、あんたについて皆に発信しよう📡\n「リアクション」機能で、皆のノートに素早く反応を追加したりもできるで✌\nほな新しい世界を探検しよか🚀"
 monthAndDay: "{month}月 {day}日"
 search: "探す"
@@ -54,7 +55,7 @@ youGotNewFollower: "フォローされたで"
 receiveFollowRequest: "フォローリクエストされたで"
 followRequestAccepted: "フォローが承認されたで"
 mention: "メンション"
-mentions: "あんた宛て"
+mentions: "うち宛て"
 directNotes: "ダイレクト投稿"
 importAndExport: "インポートとエクスポート"
 import: "インポート"
@@ -433,6 +434,7 @@ passwordMatched: "よし！一致や！"
 passwordNotMatched: "一致しとらんで？"
 signinWith: "{x}でログイン"
 or: "それか"
+language: "言語"
 uiLanguage: "UIの表示言語"
 groupInvited: "グループに招待されとるで"
 aboutX: "{x}について"
@@ -454,40 +456,352 @@ openImageInNewTab: "画像を新しいタブで開く"
 dashboard: "ダッシュボード"
 local: "ローカル"
 remote: "リモート"
+total: "合計"
+weekOverWeekChanges: "前週比"
+dayOverDayChanges: "前日比"
+appearance: "見た目"
+clientSettings: "クライアントの設定"
+accountSettings: "アカウントの設定"
+promotion: "宣伝"
+promote: "宣伝"
+numberOfDays: "日数"
+hideThisNote: "このノートは表示せんでいい"
+showFeaturedNotesInTimeline: "タイムラインにおすすめのノートを表示してや"
+objectStorage: "オブジェクトストレージ"
+useObjectStorage: "オブジェクトストレージを使う"
+objectStorageBaseUrl: "Base URL"
+objectStorageBaseUrlDesc: "参照に使うにURLやで。CDNやProxyを使用してるんならそのURL、S3: 'https://<bucket>.s3.amazonaws.com'、GCSとかなら: 'https://storage.googleapis.com/<bucket>'。"
+objectStorageBucket: "Bucket"
+objectStoragePrefix: "Prefix"
+objectStorageEndpoint: "Endpoint"
+objectStorageRegion: "Region"
+objectStorageUseSSL: "SSLを使う"
+objectStorageUseProxy: "Proxyを使う"
+objectStorageUseProxyDesc: "API接続にproxy使わんのやったら切ってくれへん？"
+objectStorageSetPublicRead: "アップロードした時に'public-read'を設定してや"
+serverLogs: "サーバーログ"
+deleteAll: "全て削除してや"
+showFixedPostForm: "タイムラインの上の方で投稿できるようにやってくれへん？"
+newNoteRecived: "新しいノートがあるで"
+sounds: "サウンド"
+listen: "聴く"
+none: "なし"
+showInPage: "ページで表示"
+popout: "ポップアウト"
+volume: "音量"
+masterVolume: "全体の音量"
+details: "もっと"
+chooseEmoji: "絵文字を選ぶ"
+unableToProcess: "なんか作業が止まってしまったようやね"
+recentUsed: "最近使ったやつ"
+install: "インストール"
+uninstall: "アンインストール"
+installedApps: "インストールされとるアプリ"
+nothing: "あらへん"
+installedDate: "インストールした日時"
+lastUsedDate: "最後に使った日時"
+state: "状態"
+sort: "仕分ける"
+ascendingOrder: "小さい順"
+descendingOrder: "大きい順"
+scratchpad: "スクラッチパッド"
 scratchpadDescription: "スクラッチパッドではAiScriptを色々試すことができるんや。Misskeyに対して色々できるコードを書いて動かしてみたり、結果を見たりできるで。"
+output: "出力"
+script: "スクリプト"
+disablePagesScript: "Pagesのスクリプトを無効にしてや"
+updateRemoteUser: "リモートユーザー情報の更新してくれん？"
+deleteAllFiles: "すべてのファイルを削除"
+deleteAllFilesConfirm: "ホンマにすべてのファイルを削除するん？消したもんはもう戻ってこんのやで？"
+removeAllFollowing: "フォローを全解除"
+removeAllFollowingDescription: "{host}からのフォローをすべて解除するで。そのインスタンスが消えて無くなった時とかには便利な機能やで。"
+userSuspended: "このユーザーは...凍結されとる。"
+userSilenced: "このユーザーは...サイレンスされとる。"
+sidebar: "サイドバー"
+divider: "分割線"
+rooms: "ルーム"
+relays: "リレー"
+addRelay: "リレーの追加"
+inboxUrl: "inboxのURL"
+addedRelays: "追加済みのリレー"
+poll: "アンケート"
+enablePlayer: "プレイヤーを開く"
+disablePlayer: "プレイヤーを閉じる"
+expandTweet: "ツイートを展開する"
+themeEditor: "テーマエディター"
+description: "説明"
+author: "作者"
 leaveConfirm: "未保存の変更があるで！ほかしてええか？"
+manage: "管理"
+plugins: "プラグイン"
+deck: "デッキ"
+undeck: "デッキ解除"
+width: "幅"
+height: "高さ"
+large: "大"
+medium: "中"
+small: "小"
+edit: "編集"
+emailConfig: "メールサーバー設定"
+enableEmail: "メール配信を受け取る"
 emailConfigInfo: "メールアドレスの確認とかパスワードリセットの時に使うで"
+email: "メール"
+emailAddress: "メールアドレス"
+smtpConfig: "SMTP サーバーの設定"
 smtpHost: "ホスト"
+smtpPort: "ポート"
 smtpUser: "ユーザー名"
 smtpPass: "パスワード"
+emptyToDisableSmtpAuth: "ユーザー名とパスワードになんも入れんかったら、SMTP認証を無効化するで"
+smtpSecure: "SMTP 接続に暗黙的なSSL/TLSを使用する"
+testEmail: "配信テスト"
+wordMute: "ワードミュート"
+userSaysSomething: "{name}が何か言ったようやで"
+makeActive: "アクティブにしてや"
+display: "表示"
+copy: "コピー"
+metrics: "メトリクス"
+overview: "概要"
+logs: "ログ"
+delayed: "遅延"
+database: "データベース"
+channel: "チャンネル"
+create: "作成"
+notificationSetting: "通知設定"
 notificationSettingDesc: "表示する通知の種類えらんでや。"
+useGlobalSetting: "グローバル設定を使ってや"
+other: "その他"
+regenerateLoginToken: "ログイントークンを再生成"
+behavior: "動作"
+sample: "サンプル"
+abuseReports: "通報"
+reportAbuse: "通報"
+reportAbuseOf: "{name}を通報する"
+send: "送信"
+abuseMarkAsResolved: "対応したで"
+openInNewTab: "新しいタブで開く"
+openInSideView: "サイドビューで開く"
+defaultNavigationBehaviour: "デフォルトのナビゲーション"
+editTheseSettingsMayBreakAccount: "このへんの設定をようわからんままイジるとアカウントが壊れて使えんくなるかも知れへんで？"
+instanceTicker: "ノートのインスタンス情報"
+waitingFor: "{x}を待っとるで"
+random: "ランダム"
+system: "システム"
+switchUi: "UI切り替え"
+desktop: "デスクトップ"
+clip: "クリップ"
+receivedReactionsCount: "リアクションされた数"
+pollVotesCount: "アンケートに投票した数"
+pollVotedCount: "アンケートに投票された数"
+yes: "はい"
+no: "いいえ"
+driveFilesCount: "ドライブのファイル数"
 emailVerified: "メールアドレスは確認されたで"
 pageLikesCount: "Pageにええやんと思った数"
 pageLikedCount: "Pageにええやんと思ってくれた数"
+clips: "クリップ"
+duplicate: "複製"
+left: "左"
+center: "中央"
+wide: "広い"
+narrow: "狭い"
 reloadToApplySetting: "設定はページリロード後に反映されるで。今リロードしとくか？"
+showTitlebar: "タイトルバーを見せる"
 clearCache: "キャッシュをほかす"
 onlineUsersCount: "{n}人が起きとるで"
+nUsers: "{n}ユーザー"
+nNotes: "{n}ノート"
+sendErrorReports: "エラーリポートを送る"
 sendErrorReportsDescription: "オンにしたら、なんか変なことが起きたときにエラーの詳細がMisskeyに共有されて、ソフトウェアの品質向上に役立てられるんや。エラー情報には、OSのバージョン、ブラウザの種類、行動履歴などが含まれるで。"
+myTheme: "マイテーマ"
+backgroundColor: "背景"
+accentColor: "アクセント"
+textColor: "文字"
+saveAs: "名前を付けて保存"
+advanced: "高度"
+value: "値"
+updatedAt: "更新日時"
+saveConfirm: "保存するで？"
+deleteConfirm: "ホンマに削除するで？"
+registry: "レジストリ"
+closeAccount: "アカウントを閉鎖する"
+currentVersion: "現在のバージョン"
+latestVersion: "最新のバージョン"
 youAreRunningUpToDateClient: "今使ってるクライアントが最新やで！"
 newVersionOfClientAvailable: "新しいバージョンのクライアントが使えるで。"
+usageAmount: "使用量"
+capacity: "容量"
+inUse: "使用中"
+editCode: "コードを編集"
+apply: "適用"
+receiveAnnouncementFromInstance: "インスタンスからのお知らせを受け取る"
+emailNotification: "メール通知"
+inChannelSearch: "チャンネル内検索"
+useReactionPickerForContextMenu: "右クリックでリアクションピッカーを開くようにする"
+typingUsers: "{users}が今書きよるで"
+jumpToSpecifiedDate: "特定の日付にジャンプ"
+showingPastTimeline: "過去のタイムラインを表示してるで"
+clear: "クリア"
+goBack: "戻る"
+info: "情報"
 _email:
   _follow:
     title: "フォローされたで"
+  _receiveFollowRequest:
+    title: "フォローリクエストを受け取ったで"
+_plugin:
+  install: "プラグインのインストール"
+  installWarn: "信頼できへんプラグインはインストールせんとってな"
+  manage: "プラグインの管理"
+_registry:
+  scope: "スコープ"
+  key: "キー"
+  keys: "キー"
+  domain: "ドメイン"
+  createKey: "キーを作る"
+_aboutMisskey:
+  about: "Misskeyはsyuiloが2014年からずっと作ってはる、オープンソースなソフトウェアや。"
+  contributors: "主な貢献者"
+  allContributors: "全ての貢献者"
+  source: "ソースコード"
+  translation: "Misskeyを翻訳"
+  donate: "Misskeyに寄付"
+  morePatrons: "他にもぎょうさんの人からサポートしてもろてんねん。ほんまおおきに🥰"
+  patrons: "支援者"
 _mfm:
+  cheatSheet: "MFMチートシート"
   mention: "メンション"
+  hashtag: "ハッシュタグ"
+  url: "URL"
+  link: "リンク"
+  bold: "太字"
+  center: "中央寄せ"
+  inlineCode: "コード(インライン)"
+  blockCode: "コード(ブロック)"
+  inlineMath: "数式(インライン)"
   quote: "引用"
   emoji: "カスタム絵文字"
   search: "探す"
+  shake: "アニメーション(ぶるぶる)"
+  twitch: "アニメーション(ブレ)"
+  spin: "アニメーション(回転)"
+  blur: "ぼかし"
+  font: "フォント"
+_reversi:
+  reversi: "リバーシ"
+  gameSettings: "対局の設定"
+  chooseBoard: "ボードを選択"
+  blackOrWhite: "先行/後攻"
+  blackIs: "{name}が黒(先行)"
+  rules: "ルール"
+  botSettings: "Botのオプション"
+  pastTurnOf: "{name}のターン"
+  surrender: "投了"
+  surrendered: "投了により"
+  drawn: "引き分け"
+  won: "{name}の勝ち"
+  black: "黒"
+  white: "白"
+  total: "合計"
+  turnCount: "{count}ターン目"
+  myGames: "自分の対局"
+  allGames: "みんなの対局"
+  ended: "終了"
+  playing: "対局中"
+  isLlotheo: "石の少ない方が勝ち(ロセオ)"
+  loopedMap: "ループマップ"
+_instanceTicker:
+  none: "表示せん"
+  remote: "リモートユーザーに表示"
+  always: "常に表示"
+_serverDisconnectedBehavior:
+  reload: "自動でリロード"
+  dialog: "ダイアログで警告"
 _channel:
+  create: "チャンネルを作る"
+  edit: "チャンネルを編集"
+  setBanner: "バナーを設定"
+  removeBanner: "バナーを削除"
+  featured: "トレンド"
   notesCount: "{n}こ投稿があるで"
 _sidebar:
+  full: "フル"
   icon: "アイコン"
+  hide: "隠す"
+_wordMute:
+  soft: "ソフト"
+  hard: "ハード"
 _theme:
+  explore: "テーマを探す"
+  install: "テーマのインストール"
+  manage: "テーマの管理"
+  code: "テーマコード"
+  description: "説明"
+  installed: "{name}をインストールしたで。"
+  installedThemes: "インストールされとるテーマ"
+  builtinThemes: "標準のテーマ"
+  alreadyInstalled: "そのテーマはもうインストールされとるで？"
+  make: "テーマを作る"
+  base: "ベース"
+  addConstant: "定数を追加"
+  defaultValue: "デフォルト値"
+  color: "色"
+  refProp: "プロパティを参照"
+  refConst: "定数を参照"
+  key: "キー"
+  func: "関数"
+  funcKind: "関数の種類"
+  argument: "引数"
+  basedProp: "元にするプロパティの名前"
+  alpha: "不透明度"
+  darken: "暗さ"
+  lighten: "明るさ"
   keys:
+    accent: "アクセント"
+    bg: "背景"
+    fg: "文字"
+    focus: "フォーカス"
+    indicator: "インジケーター"
+    panel: "パネル"
+    shadow: "影"
+    header: "ヘッダー"
+    navBg: "サイドバーの背景"
+    navFg: "サイドバーの文字"
+    navHoverFg: "サイドバー文字(ホバー)"
+    navActive: "サイドバー文字(アクティブ)"
+    navIndicator: "サイドバーのインジケーター"
+    link: "リンク"
+    hashtag: "ハッシュタグ"
     mention: "メンション"
+    mentionMe: "うち宛てのメンション"
     renote: "Renote"
+    modalBg: "モーダルの背景"
+    divider: "分割線"
+    scrollbarHandle: "スクロールバーの取っ手"
+    scrollbarHandleHover: "スクロールバーの取っ手（ホバー)"
+    dateLabelFg: "日付ラベルの文字"
+    infoBg: "情報の背景"
+    infoFg: "情報の文字"
+    infoWarnBg: "警告の背景"
+    infoWarnFg: "警告の文字"
+    cwBg: "CW ボタンの背景"
+    cwFg: "CW ボタンの文字"
+    cwHoverBg: "CW ボタンの背景 (ホバー)"
+    toastBg: "通知トーストの背景"
+    toastFg: "通知トーストの文字"
+    buttonBg: "ボタンの背景"
+    buttonHoverBg: "ボタンの背景 (ホバー)"
+    inputBorder: "入力ボックスの縁取り"
+    listItemHoverBg: "リスト項目の背景 (ホバー)"
+    driveFolderBg: "ドライブフォルダーの背景"
+    wallpaperOverlay: "壁紙のオーバーレイ"
+    badge: "バッジ"
+    messageBg: "チャットの背景"
+    accentDarken: "アクセント (暗め)"
+    accentLighten: "アクセント (明るめ)"
+    fgHighlighted: "強調されとる文字"
 _sfx:
   note: "ノート"
+  noteMy: "ノート(自分)"
   notification: "通知"
   chat: "チャット"
 _ago:
@@ -511,24 +825,63 @@ _tutorial:
 _2fa:
   alreadyRegistered: "もう設定終わっとるわ。"
 _permissions:
+  "read:reactions": "リアクションを見る"
+  "write:votes": "投票する"
+  "read:pages": "ページを見る"
   "read:page-likes": "ページのええやんを見る"
   "write:page-likes": "ページのええやんを操作する"
+  "read:user-groups": "ユーザーグループを見る"
+  "read:channels": "チャンネルを見る"
 _auth:
   permissionAsk: "このアプリは次の権限を要求しとるで"
 _antennaSources:
   all: "みなのノート"
   homeTimeline: "フォローしとるユーザーのノート"
+_weekday:
+  sunday: "日曜日"
+  monday: "月曜日"
+  tuesday: "火曜日"
+  wednesday: "水曜日"
+  thursday: "木曜日"
+  friday: "金曜日"
+  saturday: "土曜日"
 _widgets:
+  memo: "付箋"
   notifications: "通知"
   timeline: "タイムライン"
+  calendar: "カレンダー"
+  trends: "トレンド"
+  clock: "時計"
+  rss: "RSSリーダー"
   activity: "アクティビティ"
+  photos: "フォト"
+  digitalClock: "デジタル時計"
   federation: "連合"
+  postForm: "投稿フォーム"
+  slideshow: "スライドショー"
+  button: "ボタン"
+  onlineUsers: "オンラインユーザー"
   jobQueue: "ジョブキュー"
+  serverMetric: "サーバーメトリクス"
+  aiscript: "AiScriptコンソール"
 _cw:
+  hide: "隠す"
   show: "続き見して！"
+  chars: "{count}文字"
+  files: "{count}ファイル"
 _poll:
+  choiceN: "選択肢{n}"
   noMore: "これ以上追加でけへん"
+  canMultipleVote: "複数回答可"
+  expiration: "期限"
+  infinite: "無期限"
+  at: "日時指定"
+  after: "経過指定"
+  deadlineDate: "期日"
   deadlineTime: "時間"
+  duration: "期間"
+  votesCount: "{n}票"
+  vote: "投票する"
 _visibility:
   publicDescription: "みなのユーザーに公開"
   home: "ホーム"
@@ -542,44 +895,372 @@ _exportOrImport:
   muteList: "ミュート"
   blockingList: "ブロック"
   userLists: "リスト"
+_charts:
+  usersTotal: "ユーザーの合計"
+  activeUsers: "アクティブユーザー数"
+  notesIncDec: "ノートの増減"
+  localNotesIncDec: "ローカルのノートの増減"
+  remoteNotesIncDec: "リモートのノートの増減"
+  notesTotal: "ノートの合計"
+  filesIncDec: "ファイルの増減"
+  filesTotal: "ファイルの合計"
+  storageUsageIncDec: "ストレージ使用量の増減"
+  storageUsageTotal: "ストレージ使用量の合計"
+_instanceCharts:
+  requests: "リクエスト"
+  users: "ユーザーの増減"
+  usersTotal: "ユーザーの累積"
+  notes: "ノートの増減"
+  notesTotal: "ノートの累積"
+  ff: "フォロー/フォロワーの増減"
+  ffTotal: "フォロー/フォロワーの累積"
+  cacheSize: "キャッシュサイズの増減"
+  cacheSizeTotal: "キャッシュサイズの累積"
+  files: "ファイル数の増減"
+  filesTotal: "ファイル数の累積"
 _timelines:
   home: "ホーム"
+  local: "ローカル"
+  social: "ソーシャル"
+  global: "グローバル"
 _rooms:
+  roomOf: "{user}のルーム"
+  addFurniture: "家具を置く"
+  translate: "移動"
+  rotate: "回転"
+  exit: "戻る"
+  remove: "しまう"
+  clear: "片付け"
+  clearConfirm: "家具ぜんぶしまうけど、ホンマにええん？"
   leaveConfirm: "未保存の変更があるけど、移動してええか？"
+  chooseImage: "画像を選ぶ"
+  roomType: "部屋のタイプ"
+  carpetColor: "床の色"
   _roomType:
     default: "デフォルト"
+    washitsu: "和室"
   _furnitures:
+    milk: "牛乳パック"
+    bed: "ベッド"
+    low-table: "ローテーブル"
+    desk: "デスク"
+    chair: "チェア"
+    chair2: "チェア2"
+    fan: "換気扇"
+    pc: "パソコン"
+    plant: "観葉植物"
+    plant2: "観葉植物2"
+    eraser: "消しゴム"
+    pencil: "鉛筆"
+    pudding: "プリン"
+    cardboard-box: "段ボール箱"
+    cardboard-box2: "段ボール箱2"
+    cardboard-box3: "段ボール箱3"
+    book: "本"
+    book2: "本2"
+    piano: "ピアノ"
+    facial-tissue: "ティッシュボックス"
+    server: "サーバー"
+    moon: "月"
+    corkboard: "コルクボード"
+    mousepad: "マウスパッド"
     monitor: "モニター"
+    keyboard: "キーボード"
+    carpet-stripe: "カーペット(縞)"
+    mat: "マット"
+    color-box: "カラーボックス"
+    wall-clock: "壁掛け時計"
+    photoframe: "額縁"
+    cube: "キューブ"
+    tv: "テレビ"
+    pinguin: "ピンギン"
+    rubik-cube: "ルービックキューブ"
+    poster-h: "ルービックキューブ"
+    poster-v: "ポスター(縦長)"
+    sofa: "ソファ"
+    spiral: "螺旋階段"
+    bin: "ゴミ箱"
+    cup-noodle: "カップ麺"
+    holo-display: "ホログラフィックディスプレイ"
+    energy-drink: "エナジードリンク"
+    doll-ai: "藍ちゃん人形"
+    banknote: "札束"
 _pages:
+  newPage: "ページを作る"
+  editPage: "ページの編集"
+  readPage: "ソースを表示中"
+  created: "ページを作成したで"
+  updated: "ページを更新したで"
+  deleted: "ページを削除したで"
+  pageSetting: "ページ設定"
+  viewPage: "ページを見る"
   like: "ええやん"
   unlike: "良くないわ"
   liked: "ええと思ったページ"
+  contents: "コンテンツ"
+  summary: "ページの要約"
+  alignCenter: "中央寄せ"
+  font: "フォント"
+  fontSerif: "セリフ"
+  fontSansSerif: "サンセリフ"
+  eyeCatchingImageSet: "アイキャッチ画像を設定"
+  eyeCatchingImageRemove: "アイキャッチ画像を削除"
+  chooseBlock: "ブロックを追加"
+  selectType: "種類を選択"
+  contentBlocks: "コンテンツ"
+  inputBlocks: "入力"
+  specialBlocks: "特殊"
   blocks:
+    text: "テキスト"
+    textarea: "テキストエリア"
+    section: "セクション"
     image: "画像"
+    button: "ボタン"
+    if: "もし"
+    _if:
+      variable: "変数"
+    post: "投稿フォーム"
+    _post:
+      text: "内容"
+      canvasId: "キャンバスID"
+    textInput: "テキスト入力"
+    _textInput:
+      name: "変数名"
+      text: "タイトル"
+      default: "デフォルト値"
+    textareaInput: "複数行テキスト入力"
+    _textareaInput:
+      name: "変数名"
+      text: "タイトル"
+      default: "デフォルト値"
+    numberInput: "数値入力"
+    _numberInput:
+      name: "変数名"
+      text: "タイトル"
+      default: "デフォルト値"
+    canvas: "キャンバス"
+    _canvas:
+      id: "キャンバスID"
+      width: "幅"
+      height: "高さ"
+    note: "ノート埋め込み"
+    _note:
+      id: "ノートID"
+      detailed: "詳細な表示"
+    switch: "スイッチ"
+    _switch:
+      name: "変数名"
+      text: "タイトル"
+      default: "デフォルト値"
+    counter: "カウンター"
+    _counter:
+      name: "変数名"
+      text: "タイトル"
+      inc: "増加値"
+    _button:
+      text: "タイトル"
+      colored: "色付き"
+      action: "ボタンを押したときの動作"
+      _action:
+        dialog: "ダイアログを表示する"
+        _dialog:
+          content: "内容"
+        resetRandom: "乱数をリセット"
+        pushEvent: "イベントを送信させる"
+        _pushEvent:
+          event: "イベント名"
+          no-variable: "なし"
+        callAiScript: "AiScript呼び出し"
+        _callAiScript:
+          functionName: "関数名"
+    radioButton: "選択肢"
+    _radioButton:
+      name: "変数名"
+      title: "タイトル"
+      values: "改行で区切った選択肢"
+      default: "デフォルト値"
   script:
     categories:
+      flow: "制御"
+      logical: "論理演算"
+      operation: "計算"
+      comparison: "比較"
+      random: "ランダム"
+      value: "値"
+      fn: "関数"
+      text: "関数"
+      convert: "変換"
       list: "リスト"
     blocks:
+      text: "テキスト"
+      multiLineText: "テキスト(複数行)"
+      textList: "テキストのリスト"
+      strLen: "テキストの長さ"
+      _strLen:
+        arg1: "テキスト"
+      strPick: "文字取り出し"
+      _strPick:
+        arg1: "テキスト"
+        arg2: "文字の位置"
+      strReplace: "テキスト置き換え"
+      _strReplace:
+        arg1: "テキスト"
+        arg2: "置き換え前"
+        arg3: "置き換え後"
+      strReverse: "テキストを反転"
+      _strReverse:
+        arg1: "テキスト"
+      join: "テキストを連結"
       _join:
         arg1: "リスト"
+        arg2: "区切り"
+      add: "足す"
+      _add:
+        arg1: "A"
+        arg2: "B"
+      subtract: "引く"
+      _subtract:
+        arg1: "A"
+        arg2: "A"
+      multiply: "掛ける"
+      _multiply:
+        arg1: "A"
+        arg2: "B"
+      divide: "割る"
+      _divide:
+        arg1: "A"
+        arg2: "B"
+      mod: "割った余り"
+      _mod:
+        arg1: "A"
+        arg2: "B"
+      round: "小数を丸める"
+      _round:
+        arg1: "数値"
+      eq: "AとBが同じ"
+      _eq:
+        arg1: "A"
+        arg2: "B"
+      notEq: "AとBが異なる"
+      _notEq:
+        arg1: "A"
+        arg2: "B"
+      and: "AかつB"
+      _and:
+        arg1: "A"
+        arg2: "B"
+      or: "AまたはB"
+      _or:
+        arg1: "A"
+        arg2: "B"
+      lt: "< AがBより小さい"
+      _lt:
+        arg1: "A"
+        arg2: "B"
+      gt: "> AがBより大きい"
+      _gt:
+        arg1: "A"
+        arg2: "B"
+      ltEq: "<= AがBと同じか小さい"
+      _ltEq:
+        arg1: "A"
+        arg2: "B"
+      gtEq: ">= AがBと同じか大きい"
+      _gtEq:
+        arg1: "A"
+        arg2: "B"
+      if: "分岐"
+      _if:
+        arg1: "もし"
+        arg2: "なら"
+        arg3: "そうでなければ"
+      not: "否定"
+      _not:
+        arg1: "否定"
+      random: "ランダム"
+      _random:
+        arg1: "確率"
+      rannum: "乱数"
+      _rannum:
+        arg1: "最小"
+        arg2: "最大"
+      randomPick: "リストからランダムに選ぶ"
       _randomPick:
         arg1: "リスト"
+      dailyRandom: "ランダム (ユーザーごとに日替わり)"
+      _dailyRandom:
+        arg1: "確率"
+      dailyRannum: "乱数 (ユーザーごとに日替わり)"
+      _dailyRannum:
+        arg1: "最小"
+        arg2: "最大"
+      dailyRandomPick: "リストからランダムに選ぶ (ユーザーごとに日替わり)"
       _dailyRandomPick:
         arg1: "リスト"
+      seedRandom: "ランダム (シード)"
+      _seedRandom:
+        arg1: "シード"
+        arg2: "確率"
+      seedRannum: "乱数 (シード)"
+      _seedRannum:
+        arg1: "シード"
+        arg2: "最小"
+        arg3: "最大"
+      seedRandomPick: "リストからランダムに選択 (シード)"
       _seedRandomPick:
+        arg1: "シード"
         arg2: "リスト"
+      DRPWPM: "確率付きリストからランダムに選ぶ (ユーザーごとに日替わり)"
+      _DRPWPM:
+        arg1: "テキストのリスト"
+      pick: "リストから選ぶ"
       _pick:
         arg1: "リスト"
+        arg2: "位置"
+      listLen: "リストの長さを取得"
       _listLen:
         arg1: "リスト"
+      number: "数値"
+      stringToNumber: "テキストを数値に"
+      _stringToNumber:
+        arg1: "テキスト"
+      numberToString: "数値をテキストに"
+      _numberToString:
+        arg1: "数値"
+      splitStrByLine: "テキストを行で分割"
+      _splitStrByLine:
+        arg1: "テキスト"
+      ref: "変数"
+      aiScriptVar: "AiScript変数"
+      fn: "関数"
+      _fn:
+        slots: "スロット"
+        arg1: "出力"
+      for: "繰り返し"
+      _for:
+        arg1: "回数"
+        arg2: "処理"
+    thereIsEmptySlot: "スロット{slot}が空っぽやで！"
     types:
+      string: "テキスト"
+      number: "数値"
+      boolean: "フラグ"
       array: "リスト"
+      stringArray: "テキストのリスト"
+    emptySlot: "空のスロット"
+    enviromentVariables: "環境変数"
+    pageVariables: "ページ要素"
+    argVariables: "入力スロット"
 _notification:
+  fileUploaded: "ファイルが無事アップロードされたで。"
+  youGotMention: "{name}からのメンション"
+  youGotReply: "{name}からのリプライ"
   youWereFollowed: "フォローされたで"
   youReceivedFollowRequest: "フォロー許可してほしいみたいやな"
   yourFollowRequestAccepted: "フォローさせてもろたで"
   youWereInvitedToGroup: "グループに招待されとるで"
   _types:
+    all: "すべて"
     follow: "フォロー"
     mention: "メンション"
     renote: "Renote"
@@ -588,9 +1269,24 @@ _notification:
     receiveFollowRequest: "フォロー許可してほしいみたいやで"
     followRequestAccepted: "フォローが受理されたで"
 _deck:
+  alwaysShowMainColumn: "いつもメインカラムを表示"
+  columnAlign: "カラムの寄せ"
+  columnMargin: "カラム間のマージン"
+  columnHeaderHeight: "カラムのヘッダー幅"
+  addColumn: "カラムを追加"
+  swapLeft: "左に移動"
+  swapRight: "右に移動"
+  swapUp: "上に移動"
+  swapDown: "下に移動"
+  stackLeft: "左に重ねる"
+  popRight: "右に出す"
+  profile: "プロファイル"
   _columns:
+    main: "メイン"
+    widgets: "ウィジェット"
     notifications: "通知"
     tl: "タイムライン"
     antenna: "アンテナ"
     list: "リスト"
     mentions: "あんた宛て"
+    direct: "ダイレクト"
diff --git a/locales/ko-KR.yml b/locales/ko-KR.yml
index d1a69ea481..23a224f520 100644
--- a/locales/ko-KR.yml
+++ b/locales/ko-KR.yml
@@ -552,6 +552,8 @@ manage: "관리"
 plugins: "플러그인"
 deck: "덱"
 undeck: "덱 해제"
+useBlurEffectForModal: "모달에 흐림 효과 사용"
+useFullReactionPicker: "모든 기능이 포함된 리액션 선택기 사용"
 width: "폭"
 height: "높이"
 large: "크게"
@@ -613,6 +615,7 @@ send: "전송"
 abuseMarkAsResolved: "해결됨으로 표시"
 openInNewTab: "새 탭에서 열기"
 openInSideView: "사이드뷰로 열기"
+defaultNavigationBehaviour: "기본 탐색 동작"
 editTheseSettingsMayBreakAccount: "이 설정을 변경하면 계정이 손상될 수 있습니다."
 instanceTicker: "노트의 인스턴스 정보"
 waitingFor: "{x}을(를) 기다리고 있습니다"
@@ -684,6 +687,7 @@ textColor: "문자 색"
 saveAs: "다른 이름으로 저장"
 advanced: "고급"
 value: "값"
+createdAt: "생성된 날짜"
 updatedAt: "수정한 날짜"
 saveConfirm: "저장하시겠습니까?"
 deleteConfirm: "삭제하시겠습니까?"
@@ -692,15 +696,38 @@ registry: "레지스트리"
 closeAccount: "계정 폐쇄"
 currentVersion: "현재 버전"
 latestVersion: "최신 버전"
+youAreRunningUpToDateClient: "사용 중인 클라이언트는 최신입니다."
 newVersionOfClientAvailable: "새로운 버전의 클라이언트를 이용할 수 있습니다."
 usageAmount: "사용량"
 capacity: "용량"
 inUse: "사용중"
 editCode: "코드 수정"
 apply: "적용"
+receiveAnnouncementFromInstance: "이 인스턴스의 알림을 이메일로 수신할게요"
+emailNotification: "메일 알림"
+inChannelSearch: "채널에서 검색"
+useReactionPickerForContextMenu: "우클릭하여 리액션 선택기 열기"
+typingUsers: "{users} 님이 입력하고 있어요.."
+jumpToSpecifiedDate: "특정 날짜로 이동"
+showingPastTimeline: "과거의 타임라인을 표시하고 있어요"
+clear: "지우기"
+markAllAsRead: "모두 읽은 상태로 표시"
+goBack: "뒤로"
+unlikeConfirm: "좋아요를 취소할까요?"
+fullView: "전체 화면"
+quitFullView: "전체 화면 해제"
+addDescription: "설명 추가"
+info: "정보"
+offline: "오프라인"
 _email:
   _follow:
     title: "새로운 팔로워가 있습니다"
+  _receiveFollowRequest:
+    title: "팔로우 요청을 받았습니다"
+_plugin:
+  install: "플러그인 설치"
+  installWarn: "신뢰할 수 없는 플러그인은 설치하지 않는 것이 좋습니다."
+  manage: "플러그인 관리"
 _registry:
   scope: "범위"
   key: "키"
@@ -734,6 +761,7 @@ _mfm:
   linkDescription: "문장의 특정 범위를 URL로 표시합니다."
   bold: "굵음/볼드체"
   boldDescription: "문자를 굵게 강조합니다."
+  small: "눈에 띄지 않음"
   smallDescription: "내용을 작고 연하게 보이게 합니다."
   center: "가운데 정렬"
   centerDescription: "내용을 가운데 정렬로 보이게 합니다."
@@ -746,19 +774,35 @@ _mfm:
   blockMath: "수식(블록)"
   blockMathDescription: "여러 줄의 수식(KaTeX)를 블록으로 보이게 합니다."
   quote: "인용"
+  quoteDescription: "내용을 인용문으로 표시합니다."
   emoji: "커스텀 이모지"
   emojiDescription: "커스텀 이모지의 이름을 쌍점(:)으로 감싸서 커스텀 이모지를 사용합니다."
   search: "검색"
   searchDescription: "주어진 키워드가 입력된 검색창을 보이게 합니다."
   flip: "플립"
   flipDescription: "내용을 상하 또는 좌우로 반전시킵니다."
+  jelly: "애니메이션 (젤리)"
+  jellyDescription: "젤리처럼 탱글탱글한 느낌의 효과를 줍니다."
+  tada: "애니메이션 (짠!)"
+  tadaDescription: "짠! 하는 느낌의 효과를 줍니다."
   jump: "애니메이션(점프)"
+  jumpDescription: "펄쩍 뛸 듯한 느낌의 효과를 줍니다."
+  bounce: "애니메이션 (바운스)"
+  bounceDescription: "통통 튀는 느낌의 효과를 줍니다."
+  shake: "애니메이션 (부들부들)"
+  shakeDescription: "부들부들 떠는 느낌의 효과를 줍니다."
+  twitch: "애니메이션 (경련)"
+  twitchDescription: "격하게 흔들리는 느낌의 효과를 줍니다."
+  spin: "애니메이션 (회전)"
+  spinDescription: "회전 효과를 줍니다."
   x2: "크게"
   x2Description: "내용을 크게 표시합니다."
   x3: "더 크게"
   x3Description: "내용을 더 크게 표시합니다."
   x4: "매우 크게"
   x4Description: "내용을 매우 크게 표시합니다."
+  blur: "흐림"
+  blurDescription: "내용이 흐리게 보입니다. 마우스를 위에 올려두면 내용이 보입니다."
   font: "폰트"
   fontDescription: "내용의 글꼴을 지정할 수 있습니다."
 _reversi:
@@ -772,6 +816,7 @@ _reversi:
   thisGameIsStartedSoon: "잠시 후에 대국이 시작됩니다"
   waitingForOther: "상대의 준비가 완료될 때까지 기다리고 있습니다"
   waitingForMe: "당신의 준비 완료를 기다리고 있습니다"
+  waitingBoth: "준비해 주세요"
   ready: "준비 완료"
   cancelReady: "준비 취소"
   opponentTurn: "상대의 차례입니다"
@@ -812,6 +857,7 @@ _channel:
   usersCount: "{n}명 참여 중"
   notesCount: "{n}노트"
 _sidebar:
+  full: "전체"
   icon: "아이콘"
   hide: "숨기기"
 _wordMute:
@@ -820,12 +866,15 @@ _wordMute:
   muteWordsDescription2: "정규 표현식을 사용하려면 키워드를 빗금표(/)로 감싸 주세요."
   softDescription: "지정한 조건의 노트를 타임라인에서 숨깁니다."
   hardDescription: "지정한 조건의 노트를 타임라인에 추가하지 않습니다. 타임라인에 추가되지 않은 노트는 조건을 변경해도 표시되지 않습니다."
+  soft: "보통"
+  hard: "보다 높은 수준"
   mutedNotes: "뮤트된 노트"
 _theme:
   explore: "테마 찾아보기"
   install: "테마 설치"
   manage: "테마 관리"
   code: "테마 코드"
+  description: "설명"
   installed: "{name} 테마가 설치되었습니다"
   installedThemes: "설치된 테마"
   builtinThemes: "표준 테마"
@@ -843,17 +892,57 @@ _theme:
   func: "함수"
   funcKind: "함수 종류"
   argument: "매개변수"
+  basedProp: "기준으로 할 속성 이름"
+  alpha: "불투명도"
+  darken: "어두움"
+  lighten: "밝음"
   inputConstantName: "상수 이름을 입력하세요"
   importInfo: "여기에 테마 코드를 붙여 넣어 에디터로 불러올 수 있습니다."
   deleteConstantConfirm: "상수 {const}를 삭제하시겠습니까?"
   keys:
     accent: "강조 색상"
+    bg: "배경"
+    fg: "텍스트"
+    focus: "포커스"
+    indicator: "인디케이터"
     panel: "패널"
+    shadow: "그림자"
+    header: "헤더"
+    navBg: "사이드바 배경"
+    navFg: "사이드바 텍스트"
+    navHoverFg: "사이드바 텍스트 (호버)"
+    navActive: "사이드바 텍스트 (활성)"
+    navIndicator: "사이드바 인디케이터"
     link: "링크"
     hashtag: "해시태그"
     mention: "멘션"
+    mentionMe: "나에게 보낸 멘션"
     renote: "Renote"
+    modalBg: "모달 배경"
     divider: "구분선"
+    scrollbarHandle: "스크롤바 핸들"
+    scrollbarHandleHover: "스크롤바 핸들 (호버)"
+    dateLabelFg: "날짜 레이블 텍스트"
+    infoBg: "정보창 배경"
+    infoFg: "정보창 텍스트"
+    infoWarnBg: "경고창 배경"
+    infoWarnFg: "경고창 텍스트"
+    cwBg: "CW 버튼 배경"
+    cwFg: "CW 버튼 텍스트"
+    cwHoverBg: "CW 버튼 배경 (호버)"
+    toastBg: "알림창 배경"
+    toastFg: "알림창 텍스트"
+    buttonBg: "버튼 배경"
+    buttonHoverBg: "버튼 배경 (호버)"
+    inputBorder: "입력 필드 테두리"
+    listItemHoverBg: "리스트 항목 배경 (호버)"
+    driveFolderBg: "드라이브 폴더 배경"
+    wallpaperOverlay: "배경화면 오버레이"
+    badge: "배지"
+    messageBg: "채팅 배경"
+    accentDarken: "강조 색상 (어두움)"
+    accentLighten: "강조 색상 (밝음)"
+    fgHighlighted: "강조된 텍스트"
 _sfx:
   note: "새 노트"
   noteMy: "내 노트"
@@ -977,8 +1066,10 @@ _widgets:
   postForm: "글 입력란"
   slideshow: "슬라이드 쇼"
   button: "버튼"
+  onlineUsers: "온라인 유저"
   jobQueue: "작업 대기열"
   serverMetric: "서버 통계"
+  aiscript: "AiScript 콘솔"
 _cw:
   hide: "숨기기"
   show: "더 보기"
@@ -1033,8 +1124,13 @@ _profile:
   username: "유저명"
   description: "자기소개"
   youCanIncludeHashtags: "해시 태그를 포함할 수 있습니다."
+  metadata: "추가 정보"
+  metadataEdit: "추가 정보 편집"
+  metadataDescription: "프로필에 최대 4개의 추가 정보를 표시할 수 있어요"
   metadataLabel: "라벨"
   metadataContent: "내용"
+  changeAvatar: "아바타 이미지 변경"
+  changeBanner: "배너 이미지 변경"
 _exportOrImport:
   allNotes: "모든 노트"
   followingList: "팔로잉"
@@ -1434,19 +1530,30 @@ _notification:
   youGotQuote: "{name}님이 인용함"
   youRenoted: "{name}님이 Renote"
   youGotPoll: "{name}님이 투표함"
+  youGotMessagingMessageFromUser: "{name} 님이 보낸 채팅이 있어요"
+  youGotMessagingMessageFromGroup: "{name}에서 보낸 채팅이 있어요"
   youWereFollowed: "새로운 팔로워가 있습니다"
   youReceivedFollowRequest: "새로운 팔로우 요청이 있습니다"
   yourFollowRequestAccepted: "팔로우 요청이 수락되었습니다"
   youWereInvitedToGroup: "그룹에 초대되었습니다"
   _types:
+    all: "전부"
     follow: "팔로잉"
     mention: "멘션"
+    reply: "답글"
     renote: "Renote"
     quote: "인용"
     reaction: "리액션"
+    pollVote: "투표 참여"
+    receiveFollowRequest: "팔로우 요청을 받았을 때"
+    followRequestAccepted: "팔로우 요청이 승인되었을 때"
+    groupInvited: "그룹에 초대되었을 때"
+    app: "연동된 앱을 통한 알림"
 _deck:
   alwaysShowMainColumn: "메인 칼럼 항상 표시"
   columnAlign: "칼럼 정렬"
+  columnMargin: "칼럼 간 여백"
+  columnHeaderHeight: "칼럼 헤더 폭"
   addColumn: "칼럼 추가"
   swapLeft: "왼쪽으로 이동"
   swapRight: "오른쪽으로 이동"
diff --git a/locales/pl-PL.yml b/locales/pl-PL.yml
index c4c771665e..9acf8aaece 100644
--- a/locales/pl-PL.yml
+++ b/locales/pl-PL.yml
@@ -644,6 +644,8 @@ backgroundColor: "Tło"
 accentColor: "Akcent"
 textColor: "Tekst"
 value: "Wartość"
+goBack: "Wróć"
+info: "Informacje"
 _email:
   _follow:
     title: "Zaobserwował(a) Cię"
@@ -762,6 +764,7 @@ _theme:
   install: "Zainstaluj motyw"
   manage: "Zarządzanie motywami"
   code: "Kod motywu"
+  description: "Opis"
   installed: "Zainstalowano {name}"
   installedThemes: "Zainstalowane motywy"
   builtinThemes: "Wbudowane motywy"
diff --git a/locales/ru-RU.yml b/locales/ru-RU.yml
index 6893213409..57fa366f5d 100644
--- a/locales/ru-RU.yml
+++ b/locales/ru-RU.yml
@@ -623,7 +623,7 @@ random: "Случайные"
 system: "Система"
 switchUi: "Выбор вида"
 desktop: "Стол"
-clip: "В подборку"
+clip: "Подборка"
 createNew: "Новый документ"
 optional: "Необязательно"
 createNewClip: "Новая подборка"
@@ -710,6 +710,8 @@ typingUsers: "Стук клавиш. Это {users}…"
 jumpToSpecifiedDate: "Перейти к заданной дате"
 showingPastTimeline: "Отображается старая лента"
 clear: "Очистить"
+goBack: "Выход"
+info: "Описание"
 _email:
   _follow:
     title: "Новый подписчик"
@@ -865,6 +867,7 @@ _theme:
   install: "Установить тему"
   manage: "Менеджер тем"
   code: "Код темы"
+  description: "Описание"
   installed: "Тема «{name}» установлена."
   installedThemes: "Установленные темы"
   builtinThemes: "Встроенные темы"
diff --git a/locales/uk-UA.yml b/locales/uk-UA.yml
index e08ae46ba3..2eac306cd5 100644
--- a/locales/uk-UA.yml
+++ b/locales/uk-UA.yml
@@ -689,6 +689,8 @@ deleteConfirm: "Ви дійсно бажаєте це видалити?"
 invalidValue: "Некоректне значення."
 registry: "Реєстр"
 closeAccount: "Закрити обліковий запис"
+goBack: "Назад"
+info: "Інформація"
 _email:
   _follow:
     title: "Новий підписник"
@@ -830,6 +832,7 @@ _theme:
   install: "Встановити тему"
   manage: "Керування темами"
   code: "Код теми"
+  description: "Опис"
   installed: "Тему {name} встановлено"
   installedThemes: "Встановлені теми"
   builtinThemes: "Вбудоваі теми"
diff --git a/locales/zh-CN.yml b/locales/zh-CN.yml
index d6da577982..67aef27a61 100644
--- a/locales/zh-CN.yml
+++ b/locales/zh-CN.yml
@@ -710,6 +710,8 @@ typingUsers: "{users}正在输入"
 jumpToSpecifiedDate: "跳转到特定日期"
 showingPastTimeline: "显示过去的时间线"
 clear: "清除"
+goBack: "返回"
+info: "关于"
 _email:
   _follow:
     title: "你有新的关注者"
@@ -865,6 +867,7 @@ _theme:
   install: "安装主题"
   manage: "主题管理"
   code: "主题代码"
+  description: "描述"
   installed: "{name} 已安装"
   installedThemes: "已安装的主题"
   builtinThemes: "标准主题"
diff --git a/locales/zh-TW.yml b/locales/zh-TW.yml
index dfae988f1b..7752f6613f 100644
--- a/locales/zh-TW.yml
+++ b/locales/zh-TW.yml
@@ -149,7 +149,7 @@ searchWith: "搜尋: {q}"
 youHaveNoLists: "你沒有任何清單"
 followConfirm: "你真的要追隨{name}嗎？"
 proxyAccount: "代理帳號"
-proxyAccountDescription: "代理帳號是在某些情況下充當其他服務器用戶的帳號。例如，當用戶將一個來自其他服務器的帳號放在列表中時，由於沒有其他用戶關注該帳號，該指令不會傳送到該服務器上，因此會由代理帳戶關注。"
+proxyAccountDescription: "代理帳號是在某些情況下充當其他伺服器用戶的帳號。例如，當用戶將一個來自其他伺服器的帳號放在列表中時，由於沒有其他用戶關注該帳號，該指令不會傳送到該伺服器上，因此會由代理帳戶關注。"
 host: "主機"
 selectUser: "選取使用者"
 recipient: "收件人"
@@ -182,7 +182,7 @@ clearQueue: "清除佇列"
 clearQueueConfirmTitle: "確定要清除佇列嗎？"
 clearQueueConfirmText: "未發佈的帖子將不會發佈。您通常不需要確認。"
 clearCachedFiles: "清除快取資料"
-clearCachedFilesConfirm: "確定要清除緩存資料嗎？"
+clearCachedFilesConfirm: "確定要清除所有遠端暫存資料嗎？"
 blockedInstances: "已封鎖的實例"
 blockedInstancesDescription: "請逐行輸入需要封鎖的實例。已封鎖的實例將無法與本實例進行通訊。"
 muteAndBlock: "靜音和封鎖"
@@ -215,7 +215,7 @@ retypedNotMatch: "兩次輸入不一致。"
 currentPassword: "目前密碼"
 newPassword: "新密碼"
 newPasswordRetype: "確認密碼"
-attachFile: "添加附件"
+attachFile: "上傳附件"
 more: "更多！"
 featured: "精選"
 usernameOrUserId: "使用者名稱或用戶ID"
@@ -256,12 +256,12 @@ registeredDate: "註冊日期"
 location: "位置"
 theme: "外觀主題"
 themeForLightMode: "在淺色模式下使用的主題"
-themeForDarkMode: "在深色模式下使用的主題"
+themeForDarkMode: "在黑暗模式下使用的主題"
 light: "淺色"
-dark: "灰暗"
+dark: "黑暗"
 lightThemes: "明亮主題"
-darkThemes: "灰暗主題"
-syncDeviceDarkMode: "將深色模式與設備設置同步"
+darkThemes: "黑暗主題"
+syncDeviceDarkMode: "將黑暗模式與設備設置同步"
 drive: "雲端硬碟"
 fileName: "檔案名稱"
 selectFile: "選擇檔案"
@@ -313,7 +313,7 @@ connectSerice: "連線"
 disconnectSerice: "中斷連線"
 enableLocalTimeline: "開啟本地時間軸"
 enableGlobalTimeline: "啟用公開時間軸"
-disablingTimelinesInfo: "即使您禁用了時間線功能，管理員和協調人仍可以繼續使用，以方便您。"
+disablingTimelinesInfo: "即使您關閉了時間線功能，管理員和協調人仍可以繼續使用，以方便您。"
 registration: "註冊"
 enableRegistration: "開啟新用戶註冊"
 invite: "邀請"
@@ -373,14 +373,14 @@ about: "資訊"
 aboutMisskey: "關於 Misskey"
 administrator: "管理員"
 token: "權杖"
-twoStepAuthentication: "雙重身份驗證"
+twoStepAuthentication: "兩階段驗證"
 moderator: "板主"
 nUsersMentioned: "提到了{n}"
 securityKey: "安全金鑰"
 securityKeyName: "金鑰名稱"
 registerSecurityKey: "註冊安全金鑰"
-lastUsed: "最後活躍時間"
-unregister: "刪除賬戶"
+lastUsed: "上次使用"
+unregister: "註銷帳號"
 passwordLessLogin: "設置無密碼登入"
 resetPassword: "重置密碼"
 newPasswordIs: "新密碼為「{password}」"
@@ -419,7 +419,7 @@ quoteAttached: "引用"
 quoteQuestion: "是否要引用？"
 noMessagesYet: "沒有訊息"
 newMessageExists: "有新的訊息"
-onlyOneFileCanBeAttached: "只能添加一個附件"
+onlyOneFileCanBeAttached: "只能加入一個附件"
 signinRequired: "請先登入"
 invitations: "邀請"
 invitationCode: "邀請碼"
@@ -446,7 +446,7 @@ useOsNativeEmojis: "使用OS原生表情符號"
 youHaveNoGroups: "找不到群組"
 joinOrCreateGroup: "請加入現有群組，或創建新群組。"
 noHistory: "沒有歷史紀錄"
-signinHistory: "登錄歷史"
+signinHistory: "登入歷史"
 disableAnimatedMfm: "禁用MFM動畫"
 doing: "正在進行"
 category: "類別"
@@ -482,7 +482,7 @@ objectStorageEndpointDesc: "如要使用AWS S3，請留空。否則請根據伺
 objectStorageRegion: "地域（Region）"
 objectStorageUseSSL: "使用SSL"
 objectStorageUseProxy: "使用網路代理"
-objectStorageSetPublicRead: "上載時設定為\"public-read\""
+objectStorageSetPublicRead: "上傳時設定為\"public-read\""
 serverLogs: "伺服器日誌"
 deleteAll: "刪除所有記錄"
 showFixedPostForm: "於時間軸頁頂顯示「發送貼文」方框"
@@ -495,7 +495,7 @@ popout: "彈出型窗口"
 volume: "音量"
 masterVolume: "主音量"
 details: "詳細資訊"
-chooseEmoji: "選擇您的表情符號\n"
+chooseEmoji: "選擇您的表情符號"
 unableToProcess: "操作無法完成"
 recentUsed: "最近使用"
 install: "安裝"
@@ -512,11 +512,11 @@ scratchpad: "暫存記憶體"
 output: "輸出"
 script: "腳本"
 disablePagesScript: "停用頁面的AiScript腳本"
-updateRemoteUser: "更新非本地用戶資料"
+updateRemoteUser: "更新遠端用戶資料"
 deleteAllFiles: "刪除所有檔案"
-deleteAllFilesConfirm: "要删除所有檔案吗？"
-removeAllFollowing: "解除所有追隨"
-removeAllFollowingDescription: "解除{host}所有的跟隨。在實例不再存在時執行。"
+deleteAllFilesConfirm: "要删除所有檔案嗎？"
+removeAllFollowing: "解除所有追蹤"
+removeAllFollowingDescription: "解除{host}所有的追蹤。在實例不再存在時執行。"
 userSuspended: "該用戶已被凍結"
 userSilenced: "該用戶已被禁言。"
 sidebar: "側邊列"
@@ -524,12 +524,12 @@ divider: "分割線"
 addItem: "新增項目"
 rooms: "房間"
 relays: "中繼"
-addRelay: "添加中繼"
-inboxUrl: "私信URL"
-addedRelays: "已添加的中繼"
+addRelay: "新增中繼"
+inboxUrl: "收件夾URL"
+addedRelays: "已加入的中繼"
 serviceworkerInfo: "您需要啟用推送通知"
 deletedNote: "已删除的貼文"
-invisibleNote: "隱藏的帖子"
+invisibleNote: "隱藏的貼文"
 enableInfiniteScroll: "啟用自動滾動頁面模式"
 visibility: "可見性"
 poll: "投票"
@@ -546,7 +546,7 @@ plugins: "插件"
 deck: "多欄模式"
 undeck: "取消多欄模式"
 useBlurEffectForModal: "在模態框使用模糊效果"
-useFullReactionPicker: "使用大尺寸的情感選擇欄"
+useFullReactionPicker: "使用全尺寸的反應選擇器"
 width: "寬度"
 height: "高度"
 large: "大"
@@ -555,7 +555,7 @@ small: "小"
 permission: "權限"
 enableAll: "啟用全部"
 disableAll: "停用全部"
-tokenRequested: "允許訪問帳號"
+tokenRequested: "允許存取帳號"
 notificationType: "通知形式"
 edit: "編輯"
 useStarForReactionFallback: "以★代替未知的表情符號"
@@ -566,11 +566,11 @@ email: "電子郵件"
 emailAddress: "電郵地址"
 smtpConfig: "SMTP伺服器設定"
 smtpHost: "主機"
-smtpPort: "端口"
+smtpPort: "埠"
 smtpUser: "使用者名稱"
 smtpPass: "密碼"
-emptyToDisableSmtpAuth: "留空使用者名稱和密碼以禁用SMTP驗證。"
-testEmail: "郵件測試發送"
+emptyToDisableSmtpAuth: "留空使用者名稱和密碼以關閉SMTP驗證。"
+testEmail: "測試郵件發送"
 wordMute: "靜音文字"
 userSaysSomething: "{name}說了什麼"
 makeActive: "啟用"
@@ -587,22 +587,22 @@ notificationSetting: "通知設定"
 notificationSettingDesc: "選擇顯示通知的類型"
 useGlobalSetting: "使用全域設定"
 other: "其他"
-regenerateLoginToken: "再生登入權杖"
-regenerateLoginTokenDescription: "再生用於登入的內部權杖。一般情況下是不需要這樣做的。一旦再生，所有裝置將會被登出。"
-fileIdOrUrl: "文檔ID或者URL"
+regenerateLoginToken: "重新產生登入權杖"
+regenerateLoginTokenDescription: "重新產生用於登入的內部權杖。一般情況下是不需要這樣做的。一旦重產，所有裝置將會被登出。"
+fileIdOrUrl: "檔案ID或URL"
 chatOpenBehavior: "開啟聊天窗口時的行為"
 behavior: "行為"
-sample: "範例 "
+sample: "範例"
 abuseReports: "檢舉"
 reportAbuse: "檢舉"
 reportAbuseOf: "檢舉{name}"
 fillAbuseReportDescription: "請填寫檢舉的詳細理由。可以的話，請附上針對的URL網址。"
-abuseReported: "內容已經發送。感謝您的報告。"
+abuseReported: "回報已送出。感謝您的報告。"
 send: "發送"
 abuseMarkAsResolved: "處理完畢"
 openInNewTab: "在新分頁中開啟"
 openInSideView: "在側欄中開啟"
-editTheseSettingsMayBreakAccount: "修改這些設定可能會毀壞您的帳戶"
+editTheseSettingsMayBreakAccount: "修改這些設定可能會毀損您的帳戶"
 instanceTicker: "貼文的實例來源"
 waitingFor: "等待{x}"
 random: "隨機"
@@ -618,7 +618,7 @@ i18nInfo: "Misskey已經被志願者們翻譯成各種語言版本，如果想
 manageAccessTokens: "管理存取權杖"
 accountInfo: "帳戶資訊"
 notesCount: "貼文數量"
-repliesCount: "回覆數量\n"
+repliesCount: "回覆數量"
 renotesCount: "轉發數量"
 repliedCount: "回覆數量"
 renotedCount: "轉發次數"
@@ -632,26 +632,27 @@ yes: "確定"
 no: "取消"
 driveFilesCount: "雲端硬碟檔案數量"
 driveUsage: "雲端硬碟使用量"
-noCrawleDescription: "請求網路搜尋引擎不要索引你的個人資料頁、貼文及頁面等。"
+noCrawle: "拒絕搜尋引擎索引"
+noCrawleDescription: "要求網路搜尋引擎不要索引你的個人資料頁、貼文及頁面等。"
 lockedAccountInfo: "即使你通過了追隨者請求，除非你將貼文的可見性設定為 「追隨者」，否則任何人都能看見你的貼文。"
-loadRawImages: "以原始圖像質量顯示附件圖像的縮略圖"
-disableShowingAnimatedImages: "不播放動態圖像"
+loadRawImages: "以原始圖檔顯示附件圖檔的縮圖"
+disableShowingAnimatedImages: "不播放動態圖檔"
 notSet: "未設定"
 emailVerified: "已成功驗證您的電郵"
 noteFavoritesCount: "我的最愛貼文的數目"
-pageLikesCount: "頁面被喜歡次數"
-pageLikedCount: "頁面被喜歡次數"
+pageLikesCount: "頁面被按讚次數"
+pageLikedCount: "頁面被按讚次數"
 contact: "聯絡人"
-useSystemFont: "使用系統默認的字型"
+useSystemFont: "使用系統預設的字型"
 clips: "摘錄"
-experimentalFeatures: "測試中的功能"
+experimentalFeatures: "實驗中的功能"
 developer: "開發者"
-makeExplorable: "讓自己的帳戶能夠在“探索”版面顯示"
-makeExplorableDescription: "如果關閉，帳戶將不會被顯示在\"探索\"版面中。"
+makeExplorable: "使自己的帳戶能夠在“探索”頁面中顯示"
+makeExplorableDescription: "如果關閉，帳戶將不會被顯示在\"探索\"頁面中。"
 showGapBetweenNotesInTimeline: "分開顯示時間線上的貼文。"
 duplicate: "複製"
 left: "左"
-center: "向中央"
+center: "置中"
 wide: "寬"
 narrow: "窄"
 reloadToApplySetting: "設定將會在頁面重新載入之後生效。要現在就重載頁面嗎？"
@@ -660,25 +661,37 @@ clearCache: "清除快取資料"
 onlineUsersCount: "{n}人正在線上"
 nUsers: "{n}用戶"
 nNotes: "{n}貼文"
+sendErrorReports: "傳送錯誤報告"
+sendErrorReportsDescription: "啟用後，問題報告將傳送至開發者以提升軟體品質。問題報告可能包括OS版本，瀏覽器類型，行為歷史記錄等。"
 myTheme: "我的佈景主題"
 backgroundColor: "背景"
 accentColor: "重點色彩"
-textColor: "文本"
+textColor: "文字"
+saveAs: "另存為..."
 advanced: "進階"
-value: "數值 "
+value: "數值"
 updatedAt: "最後更新"
 saveConfirm: "您要儲存變更嗎？"
 deleteConfirm: "你確定要刪除嗎？"
 invalidValue: "輸入值無效。"
 registry: "登錄表"
 closeAccount: "停用帳戶"
-currentVersion: "當前版本"
+currentVersion: "目前版本"
 latestVersion: "最新版本"
+youAreRunningUpToDateClient: "您所使用的用戶端已經是最新的。"
 newVersionOfClientAvailable: "新版本的用戶端可用。"
 usageAmount: "使用量"
 capacity: "容量"
 inUse: "已使用"
+editCode: "編輯代碼"
+apply: "套用"
+emailNotification: "郵件通知"
+inChannelSearch: "頻道内搜尋"
+typingUsers: "{users}輸入中..."
+jumpToSpecifiedDate: "跳轉到特定日期"
 clear: "清除"
+goBack: "返回"
+info: "資訊"
 _email:
   _follow:
     title: "您有新的追隨者"
@@ -691,13 +704,13 @@ _registry:
   domain: "域"
   createKey: "新增機碼"
 _aboutMisskey:
-  about: "Misskey是由syuilo於2014年開發的開源軟件。"
+  about: "Misskey是由syuilo自2014年起開發的開源軟體。"
   contributors: "主要貢獻者"
   allContributors: "全體貢獻人員"
   source: "原始碼"
   translation: "翻譯Misskey"
-  donate: "捐贈給Misskey"
-  morePatrons: "感謝你們的支持、 幫助。 🥰"
+  donate: "贊助Misskey"
+  morePatrons: "還有許許多多幫助我們的其他人，非常感謝你們。 🥰"
   patrons: "贊助者"
 _nsfw:
   respect: "隱藏敏感內容"
@@ -706,7 +719,7 @@ _nsfw:
 _mfm:
   cheatSheet: "MFM代碼小抄"
   intro: "MFM是Misskey專用的標記語言，可以在Misskey中的各個位置使用。 您可以這裏看到MFM可用語法列表。"
-  dummy: "通過Misskey擴展Fediverse的世界"
+  dummy: "Misskey拓展了Fediverse的世界"
   mention: "提及"
   mentionDescription: "透過 @+用戶名 來標示特定使用者。"
   hashtag: "#tag"
@@ -741,7 +754,7 @@ _mfm:
   x4Description: "將顯示內容放至最大。"
   blur: "模糊"
   font: "字型"
-  fontDescription: "可設置顯示內容所使用的字型"
+  fontDescription: "您可以設定顯示內容的字型"
 _reversi:
   reversi: "黑白棋"
   gameSettings: "對弈設定"
@@ -762,7 +775,7 @@ _reversi:
   pastTurnOf: "{name}的回合"
   surrender: "認輸"
   surrendered: "對手認輸"
-  drawn: "平局"
+  drawn: "平手"
   won: "{name}獲勝"
   black: "黑"
   white: "白"
@@ -772,6 +785,7 @@ _reversi:
   allGames: "所有對弈"
   ended: "已結束"
   playing: "正在對弈"
+  loopedMap: "循環棋盤"
 _instanceTicker:
   none: "隱藏"
   remote: "向遠端使用者顯示"
@@ -785,14 +799,14 @@ _channel:
   edit: "編輯頻道"
   setBanner: "設定橫幅"
   removeBanner: "移除封面圖"
-  featured: "發燒內容"
+  featured: "熱門貼文"
   owned: "管理中"
   following: "關注中"
   usersCount: "有{n}人參與"
-  notesCount: "有{n}個帖子"
+  notesCount: "有{n}個貼文"
 _sidebar:
   full: "全部"
-  icon: "頭像"
+  icon: "大頭貼"
   hide: "隱藏"
 _wordMute:
   muteWords: "加入靜音文字"
@@ -803,6 +817,7 @@ _theme:
   install: "安裝佈景主題"
   manage: "佈景主題管理員"
   code: "主題代碼"
+  description: "描述"
   installed: "{name}已安裝"
   installedThemes: "已經安裝的主題"
   builtinThemes: "標準主題"
@@ -822,16 +837,17 @@ _theme:
   keys:
     bg: "背景"
     fg: "文本"
+    panel: "面板"
     shadow: "陰影"
     navIndicator: "側邊欄指示符"
     link: "鏈接"
     hashtag: "#tag"
-    mention: "提及"
-    mentionMe: "提及我"
+    mention: "提到"
+    mentionMe: "提到了我"
     renote: "轉發貼文"
     divider: "分割線"
-    scrollbarHandle: "滾動條"
-    scrollbarHandleHover: "滾動條 (漂浮)"
+    scrollbarHandle: "捲動條"
+    scrollbarHandleHover: "捲動條 (漂浮)"
     dateLabelFg: "日期標籤文字"
     infoBg: "資訊背景"
     infoFg: "資訊內容"
@@ -846,7 +862,7 @@ _theme:
     listItemHoverBg: "列表物品背景 (漂浮)"
     driveFolderBg: "雲端硬碟文件夾背景"
     badge: "獎章"
-    messageBg: "私信背景"
+    messageBg: "私訊背景"
     accentDarken: "強調色(偏暗)"
     accentLighten: "強調色(明亮)"
     fgHighlighted: "高亮顯示文本"
@@ -880,15 +896,15 @@ _tutorial:
   step1_3: "由於你沒有發佈任何貼文，也沒有追隨任何人，所以你的時間軸目前是空的。"
   step2_1: "在發文或追隨其他人之前先讓我們設定一下個人資料吧。"
   step2_2: "提供一些關於自己的資訊來讓其他人更有追隨你的意願。"
-  step3_1: "個人資料都打理好了嗎？"
-  step3_2: "下一步讓我們來試試看發個文，按一下畫面上的鉛筆圖示來開始"
+  step3_1: "個人資料都設定好了嗎？"
+  step3_2: "接下來，讓我們來試試看發個文，按一下畫面上的鉛筆圖示來開始"
   step3_3: "輸入完內容後，按視窗右上角的按鈕來發文"
   step3_4: "不知道該寫什麼內容嗎？試試看「開始使用Misskey了」如何。"
   step4_1: "貼文發出去了嗎？"
   step4_2: "如果你的貼文出現在時間軸上，就代表發文成功。"
   step5_1: "現在試試看追隨其他人來讓你的時間軸變得更生動吧。"
   step5_2: "你會在{featured}上看到受歡迎的貼文，你也可以從列表中追隨你喜歡的人，或者在{explore}上找到熱門使用者。"
-  step5_3: "想要追隨其他人，只要點擊他們的頭像並按「追隨」即可。"
+  step5_3: "想要追隨其他人，只要點擊他們的大頭貼並按「追隨」即可。"
   step5_4: "如果使用者的名字旁有鎖頭的圖示，代表他們需要手動核准你的追隨請求。"
   step6_1: "現在你可以在時間軸上看到其他用戶的貼文。"
   step6_2: "你也可以對別人的貼文作出「情感」，作出簡單的回覆。"
@@ -899,13 +915,13 @@ _2fa:
   alreadyRegistered: "此設備已經被註冊過了"
   registerDevice: "註冊裝置"
   step1: "首先，在您的設備上安裝二步驗證程式，例如{a}或{b}。"
-  step2: "然後，掃描熒幕上的QR code。"
+  step2: "然後，掃描螢幕上的QR code。"
 _permissions:
   "read:account": "查看帳戶信息"
   "write:account": "更改帳戶信息"
   "read:blocks": "已封鎖用戶名單"
   "write:blocks": "編輯已封鎖用戶名單"
-  "read:drive": "存取雲端硬碟\n"
+  "read:drive": "存取雲端硬碟"
   "write:drive": "編輯雲端硬碟的檔案"
   "read:favorites": "瀏覽我的最愛"
   "write:favorites": "編輯我的最愛列表"
@@ -922,7 +938,7 @@ _permissions:
   "write:votes": "投票"
   "read:pages": "顯示頁面"
   "write:pages": "編輯頁面"
-  "read:page-likes": "顯示頁面的已喜歡"
+  "read:page-likes": "顯示已按讚的頁面"
   "write:page-likes": "編輯頁面上喜歡"
   "read:user-groups": "顯示使用者群組"
   "write:user-groups": "編輯使用者群組"
@@ -964,7 +980,7 @@ _widgets:
   postForm: "發佈窗口"
   slideshow: "幻燈片"
   button: "按鈕"
-  onlineUsers: "在線上的用戶"
+  onlineUsers: "線上的用戶"
   jobQueue: "佇列"
 _cw:
   hide: "隱藏"
diff --git a/src/docs/cs-CZ/aiscript.md b/src/docs/cs-CZ/aiscript.md
index 6c28b446e3..a153268eac 100644
--- a/src/docs/cs-CZ/aiscript.md
+++ b/src/docs/cs-CZ/aiscript.md
@@ -1,4 +1,4 @@
 # AiScript
 
-## 関数
+## Funkce
 デフォルトで値渡しです。
diff --git a/src/docs/cs-CZ/create-plugin.md b/src/docs/cs-CZ/create-plugin.md
index 0d2fa19178..ec17b95186 100644
--- a/src/docs/cs-CZ/create-plugin.md
+++ b/src/docs/cs-CZ/create-plugin.md
@@ -1,7 +1,7 @@
 # プラグインの作成
 Misskey Webクライアントのプラグイン機能を使うと、クライアントを拡張し、様々な機能を追加できます。 ここではプラグインの作成にあたってのメタデータ定義や、AiScript APIリファレンスを掲載します。
 
-## メタデータ
+## Metadata
 プラグインは、AiScriptのメタデータ埋め込み機能を使って、デフォルトとしてプラグインのメタデータを定義する必要があります。 メタデータは次のプロパティを含むオブジェクトです。
 
 ### name
diff --git a/src/docs/cs-CZ/custom-emoji.md b/src/docs/cs-CZ/custom-emoji.md
index ed2e92be16..39f490037d 100644
--- a/src/docs/cs-CZ/custom-emoji.md
+++ b/src/docs/cs-CZ/custom-emoji.md
@@ -1,2 +1,2 @@
-# カスタム絵文字
+# Vlastní emoji
 カスタム絵文字は、インスタンスで用意された画像を絵文字のように使える機能です。 ノート、リアクション、チャット、自己紹介、名前などの場所で使うことができます。 カスタム絵文字をそれらの場所で使うには、絵文字ピッカーボタン(ある場合)を押すか、`:`を入力して絵文字サジェストを表示します。 テキスト内に`:foo:`のような形式の文字列が見つかると、`foo`の部分がカスタム絵文字名と解釈され、表示時には対応したカスタム絵文字に置き換わります。
diff --git a/src/docs/cs-CZ/follow.md b/src/docs/cs-CZ/follow.md
index 3c1ea7bbe0..61acb28956 100644
--- a/src/docs/cs-CZ/follow.md
+++ b/src/docs/cs-CZ/follow.md
@@ -1,2 +1,2 @@
-# フォロー
+# Sledovaní
 ユーザーをフォローすると、タイムラインにそのユーザーの投稿が表示されるようになります。ただし、他のユーザーに対する返信は含まれません。 ユーザーをフォローするには、ユーザーページの「フォロー」ボタンをクリックします。フォローを解除するには、もう一度クリックします。
diff --git a/src/docs/cs-CZ/keyboard-shortcut.md b/src/docs/cs-CZ/keyboard-shortcut.md
index 957ca838c9..62382eca60 100644
--- a/src/docs/cs-CZ/keyboard-shortcut.md
+++ b/src/docs/cs-CZ/keyboard-shortcut.md
@@ -1,25 +1,25 @@
-# キーボードショートカット
+# Klávesové zkratky
 
-## グローバル
-これらのショートカットは基本的にどこでも使えます。
+## Globální
+Tyto zkratky lze použít prakticky kdekoliv.
 <table>
     <thead>
-        <tr><th>ショートカット</th><th>効果</th><th>由来</th></tr>
+        <tr><th>Zkratka</th><th>Efekt</th><th>由来</th></tr>
     </thead>
     <tbody>
-        <tr><td><kbd class="key">P</kbd>, <kbd class="key">N</kbd></td><td>新規投稿</td><td><b>P</b>ost, <b>N</b>ew, <b>N</b>ote</td></tr>
-        <tr><td><kbd class="key">T</kbd></td><td>タイムラインの最も新しい投稿にフォーカス</td><td><b>T</b>imeline, <b>T</b>op</td></tr>
-        <tr><td><kbd class="group"><kbd class="key">Shift</kbd> + <kbd class="key">N</kbd></kbd></td><td>通知を表示/隠す</td><td><b>N</b>otifications</td></tr>
-        <tr><td><kbd class="key">S</kbd></td><td>検索</td><td><b>S</b>earch</td></tr>
-        <tr><td><kbd class="key">H</kbd>, <kbd class="key">?</kbd></td><td>ヘルプを表示</td><td><b>H</b>elp</td></tr>
+        <tr><td><kbd class="key">P</kbd>, <kbd class="key">N</kbd></td><td>Nový příspěvek</td><td><b>P</b>ost, <b>N</b>ew, <b>N</b>ote</td></tr>
+        <tr><td><kbd class="key">T</kbd></td><td>Zaměřit se na nejnovější příspěvek ve feedu.</td><td><b>T</b>imeline, <b>T</b>op</td></tr>
+        <tr><td><kbd class="group"><kbd class="key">Shift</kbd> + <kbd class="key">N</kbd></kbd></td><td>Zobrazit/schovat notifikace</td><td><b>N</b>otifications</td></tr>
+        <tr><td><kbd class="key">S</kbd></td><td>Vyhledávání</td><td><b>S</b>earch</td></tr>
+        <tr><td><kbd class="key">H</kbd>, <kbd class="key">?</kbd></td><td>Zobrazit nápovědu</td><td><b>H</b>elp</td></tr>
     </tbody>
 </table>
 
-## 投稿にフォーカスされた状態
+## Zkratky pro příspěvky
 
 <table>
     <thead>
-        <tr><th>ショートカット</th><th>効果</th><th>由来</th></tr>
+        <tr><th>Zkratka</th><th>Efekt</th><th>由来</th></tr>
     </thead>
     <tbody>
         <tr><td><kbd class="key">↑</kbd>, <kbd class="key">K</kbd>, <kbd class="group"><kbd class="key">Shift</kbd> + <kbd class="key">Tab</kbd></kbd></td><td>上の投稿にフォーカスを移動</td><td>-</td></tr>
@@ -41,7 +41,7 @@
 
 <table>
     <thead>
-        <tr><th>ショートカット</th><th>効果</th><th>由来</th></tr>
+        <tr><th>Zkratka</th><th>Efekt</th><th>由来</th></tr>
     </thead>
     <tbody>
         <tr><td><kbd class="key">Enter</kbd></td><td>Renoteする</td><td>-</td></tr>
@@ -54,7 +54,7 @@
 デフォルトで「👍」にフォーカスが当たっている状態です。
 <table>
     <thead>
-        <tr><th>ショートカット</th><th>効果</th><th>由来</th></tr>
+        <tr><th>Zkratka</th><th>Efekt</th><th>由来</th></tr>
     </thead>
     <tbody>
         <tr><td><kbd class="key">↑</kbd>, <kbd class="key">K</kbd></td><td>上のリアクションにフォーカスを移動</td><td>-</td></tr>
diff --git a/src/docs/cs-CZ/mfm.md b/src/docs/cs-CZ/mfm.md
index e237287acc..3ce8200cb5 100644
--- a/src/docs/cs-CZ/mfm.md
+++ b/src/docs/cs-CZ/mfm.md
@@ -1,2 +1,2 @@
 # MFM
-MFMは、Misskey Flavored Markdownの略で、Misskeyの様々な場所で使用できる専用のマークアップ言語です。 MFMで使用可能な構文は[MFMチートシート](/mfm-cheat-sheet)で確認できます。
+MFM je zkratka pro "Misskey Flavored Markdown". Speciální markup, který může být použit na mnoha místech v Misskey. Syntaxi můžete vidět na [MFM taháku](/mfm-cheat-sheet).
diff --git a/src/docs/cs-CZ/mute.md b/src/docs/cs-CZ/mute.md
index 6a9608662a..fb4ef68d5c 100644
--- a/src/docs/cs-CZ/mute.md
+++ b/src/docs/cs-CZ/mute.md
@@ -1,4 +1,4 @@
-# ミュート
+# Ztlumit
 
 ユーザーをミュートすると、そのユーザーに関する次のコンテンツがMisskeyに表示されなくなります:
 
diff --git a/src/docs/cs-CZ/pages.md b/src/docs/cs-CZ/pages.md
index a7311b95e6..7edfafe68e 100644
--- a/src/docs/cs-CZ/pages.md
+++ b/src/docs/cs-CZ/pages.md
@@ -1,6 +1,6 @@
-# Pages
+# Stránky
 
-## 変数
+## Proměnná
 変数を使うことで動的なページを作成できます。テキスト内で <b>{ 変数名 }</b> と書くとそこに変数の値を埋め込めます。例えば <b>Hello { thing } world!</b> というテキストで、変数(thing)の値が <b>ai</b> だった場合、テキストは <b>Hello ai world!</b> になります。
 
 変数の評価(値を算出すること)は上から下に行われるので、ある変数の中で自分より下の変数を参照することはできません。例えば上から <b>A、B、C</b> と3つの変数を定義したとき、<b>C</b>の中で<b>A</b>や<b>B</b>を参照することはできますが、<b>A</b>の中で<b>B</b>や<b>C</b>を参照することはできません。
diff --git a/src/docs/cs-CZ/reaction.md b/src/docs/cs-CZ/reaction.md
index c26ead75b3..02ccda571f 100644
--- a/src/docs/cs-CZ/reaction.md
+++ b/src/docs/cs-CZ/reaction.md
@@ -1,4 +1,4 @@
-# リアクション
+# Reakce
 他の人のノートに、絵文字を付けて簡単にあなたの反応を伝えられる機能です。 リアクションするには、ノートの + アイコンをクリックしてピッカーを表示し、絵文字を選択します。 リアクションには[カスタム絵文字](./custom-emoji)も使用できます。
 
 ## リアクションピッカーのカスタマイズ
diff --git a/src/docs/cs-CZ/theme.md b/src/docs/cs-CZ/theme.md
index a406f3433c..33eb614480 100644
--- a/src/docs/cs-CZ/theme.md
+++ b/src/docs/cs-CZ/theme.md
@@ -1,11 +1,11 @@
-# テーマ
+# Vzhled
 
-テーマを設定して、Misskeyクライアントの見た目を変更できます。
+Můžete si vybrat vzhled a změnit tím jak vypadá Misskey klient.
 
-## テーマの設定
-設定 > テーマ
+## Nastavení vzhledu
+Nastavení > vzhled
 
-## テーマを作成する
+## Vytvořit vzhled
 テーマコードはJSON5で記述されたテーマオブジェクトです。 テーマは以下のようなオブジェクトです。
 ``` js
 {
@@ -33,9 +33,9 @@
 
 ```
 
-* `id` ... テーマの一意なID。UUIDをおすすめします。
-* `name` ... テーマ名
-* `author` ... テーマの作者
+* `id` ... Unikátní ID vzhledu. UUID je povinné.
+* `name` ... Jméno vzhledu
+* `author` ... Autor vzhledu
 * `desc` ... テーマの説明(オプション)
 * `base` ... 明るいテーマか、暗いテーマか
     * `light`にすると明るいテーマになり、`dark`にすると暗いテーマになります。
diff --git a/src/docs/cs-CZ/timelines.md b/src/docs/cs-CZ/timelines.md
index 36ba61bd2d..3bd9f1cff2 100644
--- a/src/docs/cs-CZ/timelines.md
+++ b/src/docs/cs-CZ/timelines.md
@@ -2,14 +2,14 @@
 
 https://docs.google.com/spreadsheets/d/1lxQ2ugKrhz58Bg96HTDK_2F98BUritkMyIiBkOByjHA/edit?usp=sharing
 
-## ホーム
+## Domů
 自分のフォローしているユーザーの投稿
 
-## ローカル
+## Lokální
 全てのローカルユーザーの「ホーム」指定されていない投稿
 
 ## ソーシャル
 自分のフォローしているユーザーの投稿と、全てのローカルユーザーの「ホーム」指定されていない投稿
 
-## グローバル
+## Globální
 全てのローカルユーザーの「ホーム」指定されていない投稿と、サーバーに届いた全てのリモートユーザーの「ホーム」指定されていない投稿
diff --git a/src/docs/de-DE/theme.md b/src/docs/de-DE/theme.md
index e8d95ca628..fe1c4fc7bb 100644
--- a/src/docs/de-DE/theme.md
+++ b/src/docs/de-DE/theme.md
@@ -43,7 +43,7 @@ Themencodes werden im Format eines JSON5-Objekts gespeichert. Themen werden wie
 * `props` ... Definitionen der Themenoptionen.Diese werden im folgenden erläutert.
 
 ### Definition von Themenoptionen
-Die Optionen des Themas werden in `props` definiert. Die Schlüssel werden zu CSS-Variablen, die Werte geben den Inhalt an. Zusätzlich werden die `props` des gewählten Basisthemas von diesem Thema geerbt. Ist die `base` dieses Themas auf `light` gesetzt, so werden sie aus [_light.json5](https://github.com/misskey-dev/misskey/blob/develop/src/client/themes/_light.json5) kopiert, ist sie auf `dark` gesetzt, so werden sie aus [_dark.json5](https://github.com/misskey-dev/misskey/blob/develop/src/client/themes/_dark.json5) kopiert. Beispielsweise wird, falls sich in den `props` dieses Themas keine Definition für den Schlüssel `panel` befindet, so wird der Wert von `panel` aus dem Basisthema verwendet.
+Die Optionen des Themas werden in `props` definiert. Die Schlüssel werden zu CSS-Variablen, die Werte geben den Inhalt an. Zusätzlich werden die `props` des gewählten Basisthemas von diesem Thema geerbt. Ist die `base` dieses Themas auf `light` gesetzt, so werden sie aus [_light.json5](https://github.com/syuilo/misskey/blob/develop/src/client/themes/_light.json5) kopiert, ist sie auf `dark` gesetzt, so werden sie aus [_dark.json5](https://github.com/syuilo/misskey/blob/develop/src/client/themes/_dark.json5) kopiert. Beispielsweise wird, falls sich in den `props` dieses Themas keine Definition für den Schlüssel `panel` befindet, so wird der Wert von `panel` aus dem Basisthema verwendet.
 
 #### Syntax für Wertangaben
 * Hexadezimalfarben
diff --git a/src/docs/en-US/theme.md b/src/docs/en-US/theme.md
index 6deb75abe6..35c0197966 100644
--- a/src/docs/en-US/theme.md
+++ b/src/docs/en-US/theme.md
@@ -43,7 +43,7 @@ Theme codes are saved as a JSON5 object of theme options. Themes are composed of
 * `props` ... The style definitions of the theme.These will be explained in the following.
 
 ### Theme style definitions
-Define the style of the theme within `props`. The keys will become CSS variables, and the value specifies the content. In addition, the default `props` options are inherited from the base theme. If this theme's `base` is `light`, they will be copied from [_light.json5](https://github.com/misskey-dev/misskey/blob/develop/src/client/themes/_light.json5), if it is `dark` they will be copied from [_dark.json5](https://github.com/misskey-dev/misskey/blob/develop/src/client/themes/_dark.json5). In other words, if there is for example no `panel` key contained in `props`, then the value of `panel` from the base theme will be used.
+Define the style of the theme within `props`. The keys will become CSS variables, and the value specifies the content. In addition, the default `props` options are inherited from the base theme. If this theme's `base` is `light`, they will be copied from [_light.json5](https://github.com/syuilo/misskey/blob/develop/src/client/themes/_light.json5), if it is `dark` they will be copied from [_dark.json5](https://github.com/syuilo/misskey/blob/develop/src/client/themes/_dark.json5). In other words, if there is for example no `panel` key contained in `props`, then the value of `panel` from the base theme will be used.
 
 #### Syntax for values
 * Hex colors
diff --git a/src/docs/fr-FR/reversi-bot.md b/src/docs/fr-FR/reversi-bot.md
index 8c94831054..2da95be1dc 100644
--- a/src/docs/fr-FR/reversi-bot.md
+++ b/src/docs/fr-FR/reversi-bot.md
@@ -110,7 +110,7 @@ y = Math.floor(pos / mapWidth)
 ```
 
 ### フォームコントロールの種類
-#### Basculer
+#### Interrupteur
 type: `switch` スイッチを表示します。何かの機能をオン/オフさせたい場合に有用です。
 
 ##### プロパティ
diff --git a/src/docs/fr-FR/stream.md b/src/docs/fr-FR/stream.md
index 55e6bc6806..cd0a2f81f1 100644
--- a/src/docs/fr-FR/stream.md
+++ b/src/docs/fr-FR/stream.md
@@ -1,6 +1,6 @@
-# API streaming
+# API Stream
 
-ストリーミングAPIを使うと、リアルタイムで様々な情報(例えばタイムラインに新しい投稿が流れてきた、メッセージが届いた、フォローされた、など)を受け取ったり、様々な操作を行ったりすることができます。
+L'API Stream permet d'implémenter l'exécution d'opérations variées et la réception de diverses informations en temps réel. Cela concerne, par exemple, l'affichage des nouvelles publications dans les fils, la réception de nouveaux messages, les nouveaux abonnements, etc.
 
 ## ストリームに接続する
 
diff --git a/src/docs/fr-FR/theme.md b/src/docs/fr-FR/theme.md
index ab721fe445..cf15c921e4 100644
--- a/src/docs/fr-FR/theme.md
+++ b/src/docs/fr-FR/theme.md
@@ -43,7 +43,7 @@ Le code des thèmes est écrit sous forme d'objets JSON5. Les thèmes comprennen
 * `props` ... Définir un style de thème.Voir les explications ci-après.
 
 ### Définir un style de thème
-C'est dans `props` que vous définirez le style de thème. Les propriétés deviendront des variables CSS et les valeurs associées spécifieront le contenu de ces variables. Par ailleurs, les objets présents par défaut dans `props` sont hérités du thème de base. Ainsi, si le thème de `base` est clair `light` ce sera l'objet [_light.json5](https://github.com/misskey-dev/misskey/blob/develop/src/client/themes/_light.json5) ; et s'il est sombre `dark` ce sera l'objet [_dark.json5](https://github.com/misskey-dev/misskey/blob/develop/src/client/themes/_dark.json5). Cela signifie, par exemple, que s'il n'y pas de propriété `panel` définie dans les `props` du thème, alors ce sera la valeur `panel` du thème de base qui sera prise en compte.
+C'est dans `props` que vous définirez le style de thème. Les propriétés deviendront des variables CSS et les valeurs associées spécifieront le contenu de ces variables. Par ailleurs, les objets présents par défaut dans `props` sont hérités du thème de base. Ainsi, si le thème de `base` est clair `light` ce sera l'objet [_light.json5](https://github.com/syuilo/misskey/blob/develop/src/client/themes/_light.json5) ; et s'il est sombre `dark` ce sera l'objet [_dark.json5](https://github.com/syuilo/misskey/blob/develop/src/client/themes/_dark.json5). Cela signifie, par exemple, que s'il n'y pas de propriété `panel` définie dans les `props` du thème, alors ce sera la valeur `panel` du thème de base qui sera prise en compte.
 
 #### Syntaxe des valeurs
 * Codes de couleur Hex
diff --git a/src/docs/ko-KR/api.md b/src/docs/ko-KR/api.md
index 76019b6145..057749ca6d 100644
--- a/src/docs/ko-KR/api.md
+++ b/src/docs/ko-KR/api.md
@@ -1,58 +1,58 @@
 # Misskey API
 
-MisskeyAPIを使ってMisskeyクライアント、Misskey連携Webサービス、Bot等(以下「アプリケーション」と呼びます)を開発できます。 ストリーミングAPIもあるので、リアルタイム性のあるアプリケーションを作ることも可能です。
+Misskey API를 사용하여 Misskey 클라이언트, Misskey 연계 웹 서비스, 봇 등(이하 "애플리케이션"이라고 부릅니다)을 개발할 수 있습니다. 스트리밍 API도 있기 때문에 실시간 애플리케이션을 만들 수도 있습니다.
 
-APIを使い始めるには、まずアクセストークンを取得する必要があります。 このドキュメントでは、アクセストークンを取得する手順を説明した後、基本的なAPIの使い方を説明します。
+API를 사용하려면 먼저 액세스 토큰을 취득해야 합니다. 이 문서에서는 액세스 토큰을 취득하는 절차를 설명한 후 기본적인 API 사용법을 설명합니다.
 
-## アクセストークンの取得
-基本的に、APIはリクエストにはアクセストークンが必要となります。 APIにリクエストするのが自分自身なのか、不特定の利用者に使ってもらうアプリケーションなのかによって取得手順は異なります。
+## 액세스 토큰 가져오기
+기본적으로 API는 요청 시에 액세스 토큰이 필요합니다. API에 요청하는 것이 자기 자신인지, 불특정한 유저에게 사용하는 애플리케이션인지에 따라 취득 절차가 달라집니다.
 
-* 前者の場合: [「自分自身のアクセストークンを手動発行する」](#自分自身のアクセストークンを手動発行する)に進む
-* 後者の場合: [「アプリケーション利用者にアクセストークンの発行をリクエストする」](#アプリケーション利用者にアクセストークンの発行をリクエストする)に進む
+* 전자의 경우: [ 「자기 자신의 액세스 토큰을 수동으로 발급하기」](#自分自身のアクセストークンを手動発行する)로 진행
+* 후자의 경우: [「애플리케이션 사용자에게 액세스 토큰 발급을 요청하기」](#アプリケーション利用者にアクセストークンの発行をリクエストする)로 진행
 
-### 自分自身のアクセストークンを手動発行する
-「設定 > API」で、自分のアクセストークンを発行できます。
+### 자기 자신의 액세스 토큰을 수동으로 발급하기
+「설정 &#062 API」에서 자신의 액세스 토큰을 발급할 수 있습니다.
 
-[「APIの使い方」へ進む](#APIの使い方)
+[「API 사용 방법」으로 이동](#APIの使い方)
 
-### アプリケーション利用者にアクセストークンの発行をリクエストする
-アプリケーション利用者のアクセストークンを取得するには、以下の手順で発行をリクエストします。
+### 애플리케이션 사용자에게 액세스 토큰 발급을 요청하기
+애플리케이션 사용자의 액세스 토큰을 취득하려면, 다음 순서로 발급을 요청합니다.
 
-#### Step 1
+#### 1 단계
 
-UUIDを生成する。以後これをセッションIDと呼びます。
+UUID를 생성합니다. 이것을 세션 ID라고 부릅니다.
 
-> このセッションIDは毎回生成し、使いまわさないようにしてください。
+> 이 세션 ID는 매번 새로 생성하는 것이 아닙니다.
 
-#### Step 2
+#### 2 단계
 
-`{_URL_}/miauth/{session}`をユーザーのブラウザで表示させる。`{session}`の部分は、セッションIDに置き換えてください。
-> 例: `{_URL_}/miauth/c1f6d42b-468b-4fd2-8274-e58abdedef6f`
+`{_URL_}/miauth/{session}`을 사용자의 브라우저에 입력합니다. `{session}` 부분은 세션 ID로 대체해서 입력합니다.
+> 예: `{_URL_}/miauth/c1f6d42b-468b-4fd2-8274-e58abdedef6f`
 
-表示する際、URLにクエリパラメータとしていくつかのオプションを設定できます:
-* `name` ... アプリケーション名
-    * > 例: `MissDeck`
-* `icon` ... アプリケーションのアイコン画像URL
-    * > 例: `https://missdeck.example.com/icon.png`
-* `callback` ... 認証が終わった後にリダイレクトするURL
-    * > 例: `https://missdeck.example.com/callback`
-    * リダイレクト時には、`session`というクエリパラメータでセッションIDが付きます
-* `permission` ... アプリケーションが要求する権限
-    * > 例: `write:notes,write:following,read:drive`
-    * 要求する権限を`,`で区切って列挙します
-    * どのような権限があるかは[APIリファレンス](/api-doc)で確認できます
+표시할 때 URL에 쿼리 매개변수로 몇 가지 옵션을 설정할 수 있습니다:
+* `name` ... 애플리케이션 이름
+    * > 예: `MissDeck`
+* `icon` ... 애플리케이션 아이콘의 이미지 URL
+    * > 예: `https://missdeck.example.com/icon.png`
+* `callback` ... 인증이 끝난 후 리디렉션되는 URL
+    * > 예: `https://missdeck.example.com/callback`
+    * 리디렉션 할 시, `session`이라는 쿼리 매개변수로 세션 ID가 붙습니다.
+* `permission` ... 애플리케이션이 요구하는 권한
+    * > 예: `write:notes,write:following,read:drive`
+    * 요구하는 권한을 `,`으로 구분해서 작성합니다.
+    * 권한의 종류에 대해서는 [API 레퍼런스](/api-doc)에서 확인할 수 있습니다.
 
-#### Step 3
-ユーザーが発行を許可した後、`{_URL_}/api/miauth/{session}/check`にPOSTリクエストすると、レスポンスとしてアクセストークンを含むJSONが返ります。
+#### 3 단계
+사용자가 발급을 허용한 후, `{_URL_}/api/miauth/{session}/check`에 POST 요청을 하면 응답으로 액세스 토큰을 포함한 JSON이 반환됩니다.
 
-レスポンスに含まれるプロパティ:
-* `token` ... ユーザーのアクセストークン
-* `user` ... ユーザーの情報
+응답에 포함되는  속성:
+* `token` ... 유저의 액세스 토큰
+* `user` ... 유저 정보
 
-[「APIの使い方」へ進む](#APIの使い方)
+[「API 사용 방법」으로 이동](#APIの使い方)
 
-## APIの使い方
-**APIはすべてPOSTで、リクエスト/レスポンスともにJSON形式です。RESTではありません。** アクセストークンは、`i`というパラメータ名でリクエストに含めます。
+## API 사용 방법
+**API는 모두 POST 방식이며, 요청/응답 모두 JSON 형식입니다. REST가 아닙니다.** 액세스 토큰은 `i`라는 매개변수로 요청에 포함됩니다.
 
-* [APIリファレンス](/api-doc)
-* [ストリーミングAPI](./stream)
+* [API 레퍼런스](/api-doc)
+* [스트리밍 API](./stream)
diff --git a/src/docs/ko-KR/create-plugin.md b/src/docs/ko-KR/create-plugin.md
index 1562060d72..3c93eb053b 100644
--- a/src/docs/ko-KR/create-plugin.md
+++ b/src/docs/ko-KR/create-plugin.md
@@ -1,74 +1,74 @@
-# プラグインの作成
-Misskey Webクライアントのプラグイン機能を使うと、クライアントを拡張し、様々な機能を追加できます。 ここではプラグインの作成にあたってのメタデータ定義や、AiScript APIリファレンスを掲載します。
+# 플러그인 제작
+Misskey 웹 클라이언트의 플러그인 기능을 사용하면, 클라이언트를 확장하고 다양한 기능을 추가할 수 있습니다. 여기에서는 플러그인의 제작에 있어서 메타데이터 정의, AiScript API 레퍼런스를 소개합니다.
 
 ## 메타데이터
-プラグインは、AiScriptのメタデータ埋め込み機能を使って、デフォルトとしてプラグインのメタデータを定義する必要があります。 メタデータは次のプロパティを含むオブジェクトです。
+플러그인은 AiScript의 메타데이터 내장 기능을 사용하며, 기본적으로 플러그인의 메타데이터를 정의해야 합니다.
 
 ### name
-プラグイン名
+플러그인 이름
 
 ### author
-プラグイン作者
+플러그인 제작자
 
 ### version
-プラグインバージョン。数値を指定してください。
+플러그인 버전. 값을 지정해 주세요.
 
 ### description
-プラグインの説明
+플러그인에 대한 설명
 
 ### permissions
-プラグインが要求する権限。MisskeyAPIにリクエストする際に用いられます。
+플러그인이 요구하는 권한. Misskey API에 요청할 때 사용됩니다.
 
 ### config
-プラグインの設定情報を表すオブジェクト。 キーに設定名、値に以下のプロパティを含めます。
+플러그인의 설정 정보를 나타내는 객체. 키 값에 설정명을, 값에는 다음 속성을 포함할 수 있습니다.
 
 #### type
-設定値の種類を表す文字列。以下から選択します。 string number boolean
+설정값의 종류를 나타내는 문자열. 아래 항목들을 사용할 수 있습니다. string number boolean
 
 #### label
-ユーザーに表示する設定名
+사용자에게 표시할 설정 이름
 
 #### description
-設定の説明
+설정의 설명
 
 #### default
-設定のデフォルト値
+설정의 기본값
 
-## APIリファレンス
-AiScript標準で組み込まれているAPIは掲載しません。
+## API 레퍼런스
+AiScript 표준으로 내장되어 있는 API는 소개하지 않습니다.
 
 ### Mk:dialog(title text type)
-ダイアログを表示します。typeには以下の値が設定できます。 info success warn error question 省略すると info になります。
+대화 상자를 표시합니다. type에는 아래 항목들을 사용할 수 있습니다. info success warn error question 생략하면 info로 설정됩니다.
 
 ### Mk:confirm(title text type)
-確認ダイアログを表示します。typeには以下の値が設定できます。 info success warn error question 省略すると question になります。 ユーザーが"OK"を選択した場合は true を、"キャンセル"を選択した場合は false が返ります。
+확인 대화 상자를 표시합니다. type에는 아래 항목들을 사용할 수 있습니다. info success warn error question 생략하면 question으로 설정됩니다. 사용자가 "OK"를 선택한 경우 true를, "취소"를 선택한 경우 false가 반환됩니다.
 
 ### Mk:api(endpoint params)
-Misskey APIにリクエストします。第一引数にエンドポイント名、第二引数にパラメータオブジェクトを渡します。
+Misskey API에 요청합니다. 첫 번째 인수에 엔드포인트 이름, 두 번째 인수에 매개변수 객체를 전달합니다.
 
 ### Mk:save(key value)
-任意の値に任意の名前を付けて永続化します。永続化した値は、AiScriptコンテキストが終了しても残り、Mk:loadで読み取ることができます。
+임의의 값에 임의의 이름을 붙여 영속화합니다. 영속화한 값은 AiScript 컨텍스트가 종료되어도 남아서 Mk:load 작업을 수행합니다.
 
 ### Mk:load(key)
-Mk:saveで永続化した指定の名前の値を読み取ります。
+Mk:save에서 영속화된 지정값을 읽습니다.
 
 ### Plugin:register_post_form_action(title fn)
-投稿フォームにアクションを追加します。第一引数にアクション名、第二引数にアクションが選択された際のコールバック関数を渡します。 コールバック関数には、第一引数に投稿フォームオブジェクトが渡されます。
+게시 양식에 작업을 추가합니다. 첫 번째 인수로 작업 이름, 두 번째 인수로 작업이 선택되었을 때의 콜백 함수를 전달합니다. 콜백 함수에는 첫 번째 인수로 게시 양식 객체가 전달됩니다.
 
 ### Plugin:register_note_action(title fn)
-ノートメニューに項目を追加します。第一引数に項目名、第二引数に項目が選択された際のコールバック関数を渡します。 コールバック関数には、第一引数に対象のノートオブジェクトが渡されます。
+노트 메뉴에 항목을 추가합니다. 첫 번째 인수로 항목명, 두 번째 인수로 항목이 선택되었을 때의 콜백 함수를 전달합니다. 콜백 함수에는 첫 번째 인수로 대상 노트 객체가 전달됩니다.
 
 ### Plugin:register_user_action(title fn)
-ユーザーメニューに項目を追加します。第一引数に項目名、第二引数に項目が選択された際のコールバック関数を渡します。 コールバック関数には、第一引数に対象のユーザーオブジェクトが渡されます。
+유저 메뉴에 항목을 추가합니다. 첫 번째 인수로 항목명, 두 번째 인수로 항목이 선택되었을 때의 콜백 함수를 전달합니다. 콜백 함수에는 첫 번째 인수로 대상 유저 객체가 전달됩니다.
 
 ### Plugin:register_note_view_interruptor(fn)
-UIに表示されるノート情報を書き換えます。 コールバック関数には、第一引数に対象のノートオブジェクトが渡されます。 コールバック関数の返り値でノートが書き換えられます。
+UI에 표시되는 노트 정보를 변경합니다. 콜백 함수는 첫 번째 인수로 해당되는 노트 객체를 전달합니다. 콜백 함수의 반환값으로 노트가 변경됩니다.
 
 ### Plugin:register_note_post_interruptor(fn)
-ノート投稿時にノート情報を書き換えます。 コールバック関数には、第一引数に対象のノートオブジェクトが渡されます。 コールバック関数の返り値でノートが書き換えられます。
+노트를 게시할 때의 노트 정보를 변경합니다. 콜백 함수는 첫 번째 인수로 해당되는 노트 객체를 전달합니다. 콜백 함수의 반환값으로 노트가 변경됩니다.
 
 ### Plugin:open_url(url)
-第一引数に渡されたURLをブラウザの新しいタブで開きます。
+첫 번째 인수로 전달된 URL을 브라우저의 새 탭에서 엽니다.
 
 ### Plugin:config
-プラグインの設定が格納されるオブジェクト。プラグイン定義のconfigで設定したキーで値が入ります。
+플러그인의 설정이 저장되는 객체. 플러그인 정의 config에서 설정한 키로 값이 저장됩니다.
diff --git a/src/docs/ko-KR/custom-emoji.md b/src/docs/ko-KR/custom-emoji.md
index 6aa3a0fe49..bc6fbafa6c 100644
--- a/src/docs/ko-KR/custom-emoji.md
+++ b/src/docs/ko-KR/custom-emoji.md
@@ -1,2 +1,2 @@
 # 커스텀 이모지
-カスタム絵文字は、インスタンスで用意された画像を絵文字のように使える機能です。 ノート、リアクション、チャット、自己紹介、名前などの場所で使うことができます。 カスタム絵文字をそれらの場所で使うには、絵文字ピッカーボタン(ある場合)を押すか、`:`を入力して絵文字サジェストを表示します。 テキスト内に`:foo:`のような形式の文字列が見つかると、`foo`の部分がカスタム絵文字名と解釈され、表示時には対応したカスタム絵文字に置き換わります。
+커스텀 이모지는 인스턴스에 준비된 이미지를 이모지와 같이 사용할 수 있는 기능입니다. 노트, 리액션, 채팅, 자기소개, 이름 등에서 사용할 수 있습니다. 커스텀 이모지를 사용하려면, 커스텀 이모지 선택기 버튼(있는 경우)을 누르거나, `:`를 입력해 이모지 추천을 표시합니다. 텍스트 내에 `:foo:`와 같은 형식의 문자열이 발견되면, `foo` 부분이 커스텀 이모지명으로 해석되며, 표기는 대응하는 커스텀 이모지로 대체됩니다.
diff --git a/src/docs/ko-KR/deck.md b/src/docs/ko-KR/deck.md
index 87c95d45b3..bf5dc84a56 100644
--- a/src/docs/ko-KR/deck.md
+++ b/src/docs/ko-KR/deck.md
@@ -1,18 +1,18 @@
 # 덱
 
-デッキは利用可能なUIのひとつです。「カラム」と呼ばれるビューを複数並べて表示させることで、カスタマイズ性が高く、情報量の多いUIが構築できることが特徴です。
+덱은 이용 가능한 UI 중 하나입니다. 「칼럼」이라고 불리는 여러 뷰를 나열하여 표시함으로써, 맞춤성이 높고 정보량이 많은 UI를 구축할 수 있다는 특징이 있습니다.
 
-## カラムの追加
-デッキの背景を右クリックし、「カラムを追加」して任意のカラムを追加できます。
+## 칼럼 추가
+덱의 배경을 우클릭 한 뒤, 「칼럼 추가」를 눌러 원하는 칼럼을 추가할 수 있습니다.
 
-## カラムの移動
-カラムは、ドラッグアンドドロップで他のカラムと位置を入れ替えることが出来るほか、カラムメニュー(カラムのヘッダー右クリック)から位置を移動させることもできます。
+## 칼럼 이동
+칼럼은 드래그 앤 드롭으로 다른 칼럼과 위치를 바꿀 수 있으며, 칼럼 메뉴(칼럼의 헤더 오른쪽 클릭)에서도 위치를 이동할 수 있습니다.
 
-## カラムの水平分割
-カラムは左右だけでなく、上下に並べることもできます。 カラムメニューを開き、「左に重ねる」を選択すると、左のカラムの下に現在のカラムが移動します。 上下分割を解除するには、カラムメニューの「右に出す」を選択します。
+## 칼럼 수평 분할
+칼럼은 좌우뿐만 아니라, 상하로도 정렬할 수 있습니다. 칼럼 메뉴를 열고 「왼쪽에 쌓기」를 선택하면 왼쪽 칼럼 아래로 현재 칼럼이 이동합니다. 수평 분할을 해제하려면 칼럼 메뉴의 「오른쪽으로 빼기」를 선택합니다.
 
-## カラムの設定
-カラムメニューの「編集」を選択するとカラムの設定を編集できます。カラムの名前を変えたり、幅を変えたりできます。
+## 칼럼 설정
+칼럼 메뉴의 「편집」을 클릭하면 칼럼의 설정을 편집할 수 있습니다. 칼럼의 이름을 변경하거나, 너비를 조절할 수 있습니다.
 
-## デッキの設定
-デッキに関する設定は、[settings/deck](/settings/deck)で行えます。
+## 덱 설정
+덱에 관한 설정은 [settings/deck](/settings/deck)에서 할 수 있습니다.
diff --git a/src/docs/ko-KR/follow.md b/src/docs/ko-KR/follow.md
index 197aee13c5..66cfdac3ed 100644
--- a/src/docs/ko-KR/follow.md
+++ b/src/docs/ko-KR/follow.md
@@ -1,2 +1,2 @@
-# 팔로잉
-ユーザーをフォローすると、タイムラインにそのユーザーの投稿が表示されるようになります。ただし、他のユーザーに対する返信は含まれません。 ユーザーをフォローするには、ユーザーページの「フォロー」ボタンをクリックします。フォローを解除するには、もう一度クリックします。
+# 팔로우
+유저를 팔로우하게 되면 타임라인에 해당 유저의 글이 뜨게 됩니다. 단, 다른 유저에 대한 회신은 포함되지 않습니다. 유저를 팔로우 하려면, 유저 페이지의 「팔로우」 버튼을 클릭합니다. 팔로우를 해제하려면 다시 클릭합니다.
diff --git a/src/docs/ko-KR/keyboard-shortcut.md b/src/docs/ko-KR/keyboard-shortcut.md
index 7aaab0660b..acc5daf87b 100644
--- a/src/docs/ko-KR/keyboard-shortcut.md
+++ b/src/docs/ko-KR/keyboard-shortcut.md
@@ -1,68 +1,68 @@
-# キーボードショートカット
+# 키보드 단축키
 
 ## 글로벌
-これらのショートカットは基本的にどこでも使えます。
+아래 단축키는 어디서든 사용할 수 있습니다.
 <table>
     <thead>
-        <tr><th>단축키</th><th>効果</th><th>由来</th></tr>
+        <tr><th>단축키</th><th>동작</th><th>뜻</th></tr>
     </thead>
     <tbody>
-        <tr><td><kbd class="key">P</kbd>, <kbd class="key">N</kbd></td><td>新規投稿</td><td><b>P</b>ost, <b>N</b>ew, <b>N</b>ote</td></tr>
-        <tr><td><kbd class="key">T</kbd></td><td>タイムラインの最も新しい投稿にフォーカス</td><td><b>T</b>imeline, <b>T</b>op</td></tr>
-        <tr><td><kbd class="group"><kbd class="key">Shift</kbd> + <kbd class="key">N</kbd></kbd></td><td>通知を表示/隠す</td><td><b>N</b>otifications</td></tr>
+        <tr><td><kbd class="key">P</kbd>, <kbd class="key">N</kbd></td><td>새 노트 작성</td><td><b>P</b>ost, <b>N</b>ew, <b>N</b>ote</td></tr>
+        <tr><td><kbd class="key">T</kbd></td><td>타임라인에서 가장 최근에 올라온 노트로 이동</td><td><b>T</b>imeline, <b>T</b>op</td></tr>
+        <tr><td><kbd class="group"><kbd class="key">Shift</kbd> + <kbd class="key">N</kbd></kbd></td><td>알림 표시/숨기기</td><td><b>N</b>otifications</td></tr>
         <tr><td><kbd class="key">S</kbd></td><td>검색</td><td><b>S</b>earch</td></tr>
         <tr><td><kbd class="key">H</kbd>, <kbd class="key">?</kbd></td><td>도움말 표시</td><td><b>H</b>elp</td></tr>
     </tbody>
 </table>
 
-## 投稿にフォーカスされた状態
+## 노트를 선택한 상태
 
 <table>
     <thead>
-        <tr><th>단축키</th><th>効果</th><th>由来</th></tr>
+        <tr><th>단축키</th><th>동작</th><th>뜻</th></tr>
     </thead>
     <tbody>
-        <tr><td><kbd class="key">↑</kbd>, <kbd class="key">K</kbd>, <kbd class="group"><kbd class="key">Shift</kbd> + <kbd class="key">Tab</kbd></kbd></td><td>上の投稿にフォーカスを移動</td><td>-</td></tr>
-        <tr><td><kbd class="key">↓</kbd>, <kbd class="key">J</kbd>, <kbd class="key">Tab</kbd></td><td>下の投稿にフォーカスを移動</td><td>-</td></tr>
-        <tr><td><kbd class="key">R</kbd></td><td>返信フォームを開く</td><td><b>R</b>eply</td></tr>
-        <tr><td><kbd class="key">Q</kbd></td><td>Renoteフォームを開く</td><td><b>Q</b>uote</td></tr>
-        <tr><td><kbd class="group"><kbd class="key">Ctrl</kbd> + <kbd class="key">Q</kbd></kbd></td><td>即刻Renoteする(フォームを開かずに)</td><td>-</td></tr>
-        <tr><td><kbd class="key">E</kbd>, <kbd class="key">A</kbd>, <kbd class="key">+</kbd></td><td>リアクションフォームを開く</td><td><b>E</b>mote, re<b>A</b>ction</td></tr>
-        <tr><td><kbd class="key">0</kbd>~<kbd class="key">9</kbd></td><td>数字に対応したリアクションをする(対応については後述)</td><td>-</td></tr>
-        <tr><td><kbd class="key">F</kbd>, <kbd class="key">B</kbd></td><td>お気に入りに登録</td><td><b>F</b>avorite, <b>B</b>ookmark</td></tr>
-        <tr><td><kbd class="key">Del</kbd>, <kbd class="group"><kbd class="key">Ctrl</kbd> + <kbd class="key">D</kbd></kbd></td><td>投稿を削除</td><td><b>D</b>elete</tr>
-        <tr><td><kbd class="key">M</kbd>, <kbd class="key">O</kbd></td><td>投稿に対するメニューを開く</td><td><b>M</b>ore, <b>O</b>ther</td></tr>
-        <tr><td><kbd class="key">S</kbd></td><td>CWで隠された部分を表示 or 隠す</td><td><b>S</b>how, <b>S</b>ee</td></tr>
-        <tr><td><kbd class="key">Esc</kbd></td><td>フォーカスを外す</td><td>-</td></tr>
+        <tr><td><kbd class="key">↑</kbd>, <kbd class="key">K</kbd>, <kbd class="group"><kbd class="key">Shift</kbd> + <kbd class="key">Tab</kbd></kbd></td><td>위쪽 노트로 이동</td><td>-</td></tr>
+        <tr><td><kbd class="key">↓</kbd>, <kbd class="key">J</kbd>, <kbd class="key">Tab</kbd></td><td>아래쪽 노트로 이동</td><td>-</td></tr>
+        <tr><td><kbd class="key">R</kbd></td><td>답글창 열기</td><td><b>R</b>eply</td></tr>
+        <tr><td><kbd class="key">Q</kbd></td><td>인용창 열기</td><td><b>Q</b>uote</td></tr>
+        <tr><td><kbd class="group"><kbd class="key">Ctrl</kbd> + <kbd class="key">Q</kbd></kbd></td><td>즉시 Renote 하기(창을 열지 않음)</td><td>-</td></tr>
+        <tr><td><kbd class="key">E</kbd>, <kbd class="key">A</kbd>, <kbd class="key">+</kbd></td><td>리액션 창 열기</td><td><b>E</b>mote, re<b>A</b>ction</td></tr>
+        <tr><td><kbd class="key">0</kbd>~<kbd class="key">9</kbd></td><td>숫자에 대응하는 리액션(대응에 대해서는 후술)</td><td>-</td></tr>
+        <tr><td><kbd class="key">F</kbd>, <kbd class="key">B</kbd></td><td>즐겨찾기에 등록</td><td><b>F</b>avorite, <b>B</b>ookmark</td></tr>
+        <tr><td><kbd class="key">Del</kbd>, <kbd class="group"><kbd class="key">Ctrl</kbd> + <kbd class="key">D</kbd></kbd></td><td>노트 삭제</td><td><b>D</b>elete</tr>
+        <tr><td><kbd class="key">M</kbd>, <kbd class="key">O</kbd></td><td>노트 추가 메뉴 열기</td><td><b>M</b>ore, <b>O</b>ther</td></tr>
+        <tr><td><kbd class="key">S</kbd></td><td>CW로 가려진 부분을 표시 또는 가리기</td><td><b>S</b>how, <b>S</b>ee</td></tr>
+        <tr><td><kbd class="key">Esc</kbd></td><td>노트 선택을 해제</td><td>-</td></tr>
     </tbody>
 </table>
 
-## Renoteフォーム
+## Renote 창
 
 <table>
     <thead>
-        <tr><th>단축키</th><th>効果</th><th>由来</th></tr>
+        <tr><th>단축키</th><th>동작</th><th>뜻</th></tr>
     </thead>
     <tbody>
-        <tr><td><kbd class="key">Enter</kbd></td><td>Renoteする</td><td>-</td></tr>
-        <tr><td><kbd class="key">Q</kbd></td><td>フォームを展開する</td><td><b>Q</b>uote</td></tr>
-        <tr><td><kbd class="key">Esc</kbd></td><td>フォームを閉じる</td><td>-</td></tr>
+        <tr><td><kbd class="key">Enter</kbd></td><td>Renote 하기</td><td>-</td></tr>
+        <tr><td><kbd class="key">Q</kbd></td><td>창 펼치기</td><td><b>Q</b>uote</td></tr>
+        <tr><td><kbd class="key">Esc</kbd></td><td>창 닫기</td><td>-</td></tr>
     </tbody>
 </table>
 
-## リアクションフォーム
-デフォルトで「👍」にフォーカスが当たっている状態です。
+## 리액션 창
+기본으로 「👍」가 선택되어 있습니다.
 <table>
     <thead>
-        <tr><th>단축키</th><th>効果</th><th>由来</th></tr>
+        <tr><th>단축키</th><th>동작</th><th>뜻</th></tr>
     </thead>
     <tbody>
-        <tr><td><kbd class="key">↑</kbd>, <kbd class="key">K</kbd></td><td>上のリアクションにフォーカスを移動</td><td>-</td></tr>
-        <tr><td><kbd class="key">↓</kbd>, <kbd class="key">J</kbd></td><td>下のリアクションにフォーカスを移動</td><td>-</td></tr>
-        <tr><td><kbd class="key">←</kbd>, <kbd class="key">H</kbd>, <kbd class="group"><kbd class="key">Shift</kbd> + <kbd class="key">Tab</kbd></kbd></td><td>左のリアクションにフォーカスを移動</td><td>-</td></tr>
-        <tr><td><kbd class="key">→</kbd>, <kbd class="key">L</kbd>, <kbd class="key">Tab</kbd></td><td>右のリアクションにフォーカスを移動</td><td>-</td></tr>
-        <tr><td><kbd class="key">Enter</kbd>, <kbd class="key">Space</kbd>, <kbd class="key">+</kbd></td><td>リアクション確定</td><td>-</td></tr>
-        <tr><td><kbd class="key">0</kbd>~<kbd class="key">9</kbd></td><td>数字に対応したリアクションで確定</td><td>-</td></tr>
-        <tr><td><kbd class="key">Esc</kbd></td><td>リアクションするのをやめる</td><td>-</td></tr>
+        <tr><td><kbd class="key">↑</kbd>, <kbd class="key">K</kbd></td><td>위쪽 리액션으로 이동</td><td>-</td></tr>
+        <tr><td><kbd class="key">↓</kbd>, <kbd class="key">J</kbd></td><td>아래쪽 리액션으로 이동</td><td>-</td></tr>
+        <tr><td><kbd class="key">←</kbd>, <kbd class="key">H</kbd>, <kbd class="group"><kbd class="key">Shift</kbd> + <kbd class="key">Tab</kbd></kbd></td><td>왼쪽 리액션으로 이동</td><td>-</td></tr>
+        <tr><td><kbd class="key">→</kbd>, <kbd class="key">L</kbd>, <kbd class="key">Tab</kbd></td><td>오른쪽 리액션으로 이동</td><td>-</td></tr>
+        <tr><td><kbd class="key">Enter</kbd>, <kbd class="key">Space</kbd>, <kbd class="key">+</kbd></td><td>리액션 확정</td><td>-</td></tr>
+        <tr><td><kbd class="key">0</kbd>~<kbd class="key">9</kbd></td><td>숫자에 대응하는 리액션으로 확정</td><td>-</td></tr>
+        <tr><td><kbd class="key">Esc</kbd></td><td>리액션 그만두기</td><td>-</td></tr>
     </tbody>
 </table>
diff --git a/src/docs/ko-KR/mute.md b/src/docs/ko-KR/mute.md
index 89195bb108..74a3485d36 100644
--- a/src/docs/ko-KR/mute.md
+++ b/src/docs/ko-KR/mute.md
@@ -1,13 +1,13 @@
 # 뮤트
 
-ユーザーをミュートすると、そのユーザーに関する次のコンテンツがMisskeyに表示されなくなります:
+유저를 뮤트하면, 해당 유저에 대해서 다음 콘텐츠가 Misskey에 표시되지 않습니다:
 
-* タイムラインや投稿の検索結果内の、そのユーザーの投稿(およびそれらの投稿に対する返信やRenote)
-* そのユーザーからの通知
-* メッセージ履歴一覧内の、そのユーザーとのメッセージ履歴
+* 타임라인이나 노트 검색 결과에서 해당 유저의 노트(및 해당 노트의 답글이나 Renote)
+* 해당 유저가 보내는 알림
+* 다이렉트 노트 기록에서의 해당 유저가 보낸 다이렉트 메시지 기록
 
-ユーザーをミュートするには、対象のユーザーのユーザーページに表示されている「ミュート」ボタンを押します。
+유저를 뮤트하려면, 해당 유저의 유저 페이지에 표시되어 있는 뮤트 버튼을 누릅니다.
 
-ミュートを行ったことは相手に通知されず、ミュートされていることを知ることもできません。
+자신이 뮤트한 것은 상대방에게 알려지지 않으며, 뮤트되어 있다는 것을 알 수 없습니다.
 
-設定>ミュート から、自分がミュートしているユーザー一覧を確認することができます。
+설정 > 뮤트에서 현재 뮤트하고 있는 유저 목록을 확인할 수 있습니다.
diff --git a/src/docs/ko-KR/pages.md b/src/docs/ko-KR/pages.md
index 54bc853715..6b6d09c493 100644
--- a/src/docs/ko-KR/pages.md
+++ b/src/docs/ko-KR/pages.md
@@ -1,10 +1,10 @@
-# Pages
+# 페이지
 
 ## 변수
-変数を使うことで動的なページを作成できます。テキスト内で <b>{ 変数名 }</b> と書くとそこに変数の値を埋め込めます。例えば <b>Hello { thing } world!</b> というテキストで、変数(thing)の値が <b>ai</b> だった場合、テキストは <b>Hello ai world!</b> になります。
+변수를 사용하여 동적 페이지를 생성할 수 있습니다. 텍스트 내에서 <b>{ 변수명 }</b>을 쓰면 해당 위치에 변수의 값을 설정할 수 있습니다. 예를 들면 <b>Hello { thing } world!</b> 라는 텍스트에서 변수(things)의 값이 <b>ai</b>였을 경우, 텍스트는 <b>Hello ai world!</b>가 됩니다.
 
-変数の評価(値を算出すること)は上から下に行われるので、ある変数の中で自分より下の変数を参照することはできません。例えば上から <b>A、B、C</b> と3つの変数を定義したとき、<b>C</b>の中で<b>A</b>や<b>B</b>を参照することはできますが、<b>A</b>の中で<b>B</b>や<b>C</b>を参照することはできません。
+변수의 평가(값을 산출하는 것)는 위에서 아래로 이루어지기 때문에, 어떤 변수든 자신보다 아래에 있는 변수를 참조할 수 없습니다. 예를 들어, 위에서 <b>A, B, C</b>라는 3가지 변수를 정의했을 때, <b>C</b>에서 <b>A</b>나 <b>B</b>를 참조할 수는 있지만, <b>A</b>에서 <b>B</b>나 <b>C</b>를 참조할 수는 없습니다.
 
-ユーザーからの入力を受け取るには、ページに「ユーザー入力」ブロックを設置し、「変数名」に入力を格納したい変数名を設定します(変数は自動で作成されます)。その変数を使ってユーザー入力に応じた動作を行えます。
+사용자의 입력을 받기 위해서는, 페이지에 「유저 입력」 블럭을 설치하고, 「변수명」에 입력을 저장하려는 변수 이름을 설정합니다(변수는 자동으로 생성됩니다). 이 변수를 이용해, 사용자가 입력한 내용에 대응하는 동작을 실행할 수 있습니다.
 
-関数を使うと、値の算出処理を再利用可能な形にまとめることができます。関数を作るには、「関数」タイプの変数を作成します。関数にはスロット(引数)を設定することができ、スロットの値は関数内で変数として利用可能です。また、関数を引数に取る関数(高階関数と呼ばれます)も存在します。関数は予め定義しておくほかに、このような高階関数のスロットに即席でセットすることもできます。
+함수를 사용하면 값 산출 처리를 다시 사용 가능한 형태로 정리할 수 있습니다. 함수를 만들려면, 「함수」 유형의 변수를 만듭니다. 함수에는 슬롯(인수)을 설정할 수 있으며, 슬롯 값은 함수 내에서 변수로 이용할 수 있습니다. 또한, 함수의 인수를 취하는 함수(고계함수라 불립니다)도 존재합니다. 함수는 미리 정의해 두는 것 외에, 이러한 고계함수의 슬롯에 직접 설정할 수도 있습니다.
diff --git a/src/docs/ko-KR/reaction.md b/src/docs/ko-KR/reaction.md
index b8227839b5..58e4dfd4b9 100644
--- a/src/docs/ko-KR/reaction.md
+++ b/src/docs/ko-KR/reaction.md
@@ -1,11 +1,11 @@
 # 리액션
-他の人のノートに、絵文字を付けて簡単にあなたの反応を伝えられる機能です。 リアクションするには、ノートの + アイコンをクリックしてピッカーを表示し、絵文字を選択します。 リアクションには[カスタム絵文字](./custom-emoji)も使用できます。
+다른 사람의 노트에 이모지를 붙여 간단하게 자신의 반응을 전달할 수 있는 기능입니다. 리액션 하려면, 노트의 + 아이콘을 클릭해서 선택기를 열고, 이모지를 선택합니다. 리액션에는 [커스텀 이모지](./custom-emoji)도 사용할 수 있습니다.
 
-## リアクションピッカーのカスタマイズ
-ピッカーに表示される絵文字を自分好みにカスタマイズすることができます。 設定の「リアクション」で設定します。
+## 리액션 선택기의 사용자화
+선택기에 표시되는 이모지를 취향에 맞게 커스텀할 수 있습니다. 설정의 「리액션」에서 설정할 수 있습니다.
 
-## リモート投稿へのリアクションについて
-リアクションはMisskeyオリジナルの機能であるため、リモートインスタンスがMisskeyでない限りは、ほとんどの場合「Like」としてアクティビティが送信されます。一般的にはLikeは「お気に入り」として実装されているようです。 また、相手がMisskeyであったとしても、カスタム絵文字リアクションは伝わらず、自動的に「👍」等にフォールバックされます。
+## 리모트 인스턴스에서의 리액션에 대해서
+리액션은 Misskey의 자체 기능이기 때문에, 리모트 인스턴스가 Misskey가 아니면 「Like」로 액티비티가 전송됩니다. 일반적으로 Like는 「마음에 들어요」 정도의 의미를 가지고 있는 것 같습니다. 또, 상대방이 Misskey를 이용하고 있었다고 해도, 커스텀 이모지는 전달되지 않고 자동으로 「👍」 등으로 보여집니다.
 
-## リモートからのリアクションについて
-リモートから「Like」アクティビティを受信したとき、Misskeyでは「👍」のリアクションとして解釈されます。
+## 리모트 인스턴스로부터의 리액션에 대해서
+다른 인스턴스에서 「Like」 액티비티를 수신했다면, Misskey에서는 「👍」로 표시됩니다.
diff --git a/src/docs/ko-KR/reversi-bot.md b/src/docs/ko-KR/reversi-bot.md
index aef450f2de..9add4b17da 100644
--- a/src/docs/ko-KR/reversi-bot.md
+++ b/src/docs/ko-KR/reversi-bot.md
@@ -1,33 +1,33 @@
-# MisskeyリバーシBotの開発
-Misskeyのリバーシ機能に対応したBotの開発方法をここに記します。
+# Misskey 리버시 봇 개발
+Misskey의 리버시 기능을 지원하는 봇의 개발 방법을 소개합니다.
 
-1. `games/reversi`ストリームに以下のパラメータを付けて接続する:
-    * `i`: botアカウントのAPIキー
+1. `games/reversi` 스트림에 다음 매개변수를 붙여 접속합니다:
+    * `i`: 봇 계정의 API 키
 
-2. 対局への招待が来たら、ストリームから`invited`イベントが流れてくる
-    * イベントの中身に、`parent`という名前で対局へ誘ってきたユーザーの情報が含まれている
+2. 대국 초대가 오면 스트림에서 `invited` 이벤트가 발생합니다
+    * 이벤트 내용에 `parent`라는 이름으로 대국 신청을 한 유저의 정보가 포함되어 있습니다
 
-3. `games/reversi/match`へ、`user_id`として`parent`の`id`が含まれたリクエストを送信する
+3. `games/reversi/match`에 `user_id`로 `parent`의 `id`가 포함된 요청을 전송합니다
 
-4. 上手くいくとゲーム情報が返ってくるので、`games/reversi-game`ストリームへ、以下のパラメータを付けて接続する:
-    * `i`: botアカウントのAPIキー
-    * `game`: `game`の`id`
+4. 문제가 없으면 게임 정보가 반환되므로, `games/reversi-game` 스트림에 아래의 매개변수를 붙여 접속합니다:
+    * `i`: 봇 계정의 API 키
+    * `game`: `game`의 `id`
 
-5. この間、相手がゲームの設定を変更するとその都度`update-settings`イベントが流れてくるので、必要であれば何かしらの処理を行う
+5. 상대방이 게임의 설정을 변경할 때 마다 `update-settings` 이벤트가 발생하므로, 필요에 따라 별도의 처리 과정을 진행할 수 있습니다
 
-6. 設定に満足したら、`{ type: 'accept' }`メッセージをストリームに送信する
+6. 설정에 동의하면 `{ type: 'accept' }` 메시지를 스트림으로 전달합니다
 
-7. ゲームが開始すると、`started`イベントが流れてくる
-    * イベントの中身にはゲーム情報が含まれている
+7. 게임이 시작되면 `started` 이벤트가 발생합니다
+    * 이벤트 내용에는 게임 정보가 포함됩니다
 
-8. 石を打つには、ストリームに`{ type: 'set', pos: <位置> }`を送信する(位置の計算方法は後述)
+8. 돌을 치려면, 스트림에 `{ type: 'set', pos: <위치> }`를 전달합니다(위치 계산 방법은 후술)
 
-9. 相手または自分が石を打つと、ストリームから`set`イベントが流れてくる
-    * `color`として石の色が含まれている
-    * `pos`として位置情報が含まれている
+9. 상대방 또는 자신이 돌을 치면 스트림에서 `set` 이벤트가 발생합니다
+    * `color` 에는 돌의 색상이 포함되어 있음
+    * `pos` 에는 위치 정보가 포함되어 있음
 
-## 位置の計算法
-8x8のマップを考える場合、各マスの位置(インデックスと呼びます)は次のようになっています:
+## 위치 계산 방법
+8x8 크기의 맵을 생각할 경우, 각 칸의 위치(인덱스라고 부릅니다)는 다음과 같습니다:
 ```
 +--+--+--+--+--+--+--+--+
 | 0| 1| 2| 3| 4| 5| 6| 7|
@@ -38,29 +38,29 @@ Misskeyのリバーシ機能に対応したBotの開発方法をここに記し
 ...
 ```
 
-### X,Y座標 から インデックス に変換する
+### X,Y 좌표를 인덱스로 변환
 ```
 pos = x + (y * mapWidth)
 ```
-`mapWidth`は、ゲーム情報の`map`から、次のようにして計算できます:
+`mapWidth`는 게임 정보의 `map`에서 다음과 같이 계산할 수 있습니다:
 ```
 mapWidth = map[0].length
 ```
 
-### インデックス から X,Y座標 に変換する
+### 인덱스에서 X,Y 좌표로 변환
 ```
 x = pos % mapWidth
 y = Math.floor(pos / mapWidth)
 ```
 
-## マップ情報
-マップ情報は、ゲーム情報の`map`に入っています。 文字列の配列になっており、ひとつひとつの文字がマス情報を表しています。 それをもとにマップのデザインを知る事が出来ます:
-* `(スペース)` ... マス無し
-* `-` ... マス
-* `b` ... 初期配置される黒石
-* `w` ... 初期配置される白石
+## 맵 정보
+맵 정보는 게임 정보의 `map`에 들어있습니다. 문자열이 배열되어 있어서 각 글자가 칸 정보를 나타냅니다. 이것을 바탕으로 맵의 디자인을 알 수 있습니다:
+* `(공간)` ... 칸 없음
+* `-` ... 칸
+* `b` ... 처음 배치되는 흑돌
+* `w` ... 처음 배치되는 백돌
 
-例えば、4*4の次のような単純なマップがあるとします:
+예를 들어, 4*4 와 같은 단순한 맵이 있다고 가정합니다:
 ```text
 +---+---+---+---+
 |   |   |   |   |
@@ -73,23 +73,23 @@ y = Math.floor(pos / mapWidth)
 +---+---+---+---+
 ```
 
-この場合、マップデータはこのようになります:
+이 경우, 맵 데이터는 아래와 같습니다:
 ```javascript
 ['----', '-wb-', '-bw-', '----']
 ```
 
-## ユーザーにフォームを提示して対話可能Botを作成する
-ユーザーとのコミュニケーションを行うため、ゲームの設定画面でユーザーにフォームを提示することができます。 例えば、Botの強さをユーザーが設定できるようにする、といったシナリオが考えられます。
+## 사용자에게 폼을 제시하여 소통할 수 있는 봇 제작
+사용자와 소통을 위해, 게임 설정 화면을 통해서 사용자에게 폼을 제시할 수 있습니다. 예를 들어, 봇의 난이도를 사용자가 설정할 수 있도록 하는 등의 구현이 가능합니다.
 
-フォームを提示するには、`reversi-game`ストリームに次のメッセージを送信します:
+폼을 제시하려면, `reversi-game` 스트림으로 다음 메시지를 전송합니다:
 ```javascript
 {
   type: 'init-form',
-  body: [フォームコントロールの配列]
+  body: [폼 제어 배열]
 }
 ```
 
-フォームコントロールの配列については今から説明します。 フォームコントロールは、次のようなオブジェクトです:
+폼 제어 배열에 대해서는 지금부터 설명하겠습니다. 폼 제어는 다음과 같은 개체입니다:
 ```javascript
 {
   id: 'switch1',
@@ -98,10 +98,10 @@ y = Math.floor(pos / mapWidth)
   value: false
 }
 ```
-`id` ... コントロールのID。 `type` ... コントロールの種類。後述します。 `label` ... コントロールと一緒に表記するテキスト。 `value` ... コントロールのデフォルト値。
+`id` ... 제어 ID. `type` ... 제어 종류. 후술합니다. `label` ... 제어와 함께 표시할 텍스트. `value` ... 제어 기본값.
 
-### フォームの操作を受け取る
-ユーザーがフォームを操作すると、ストリームから`update-form`イベントが流れてきます。 イベントの中身には、コントロールのIDと、ユーザーが設定した値が含まれています。 例えば、上で示したスイッチをユーザーがオンにしたとすると、次のイベントが流れてきます:
+### 폼 조작값 받기
+사용자가 폼을 조작하면, 스트림에서 `update-form` 이벤트가 발생합니다. 이벤트의 내용에는 제어 ID와 사용자가 설정한 값이 포함되어 있습니다. 예를 들어, 위에서 나타낸 스위치를 사용자가 켰다면 다음 이벤트가 발생합니다:
 ```javascript
 {
   id: 'switch1',
@@ -109,52 +109,52 @@ y = Math.floor(pos / mapWidth)
 }
 ```
 
-### フォームコントロールの種類
+### 폼 제어 종류
 #### 스위치
-type: `switch` スイッチを表示します。何かの機能をオン/オフさせたい場合に有用です。
+type: `switch` 스위치를 표시합니다. 어떠한 기능을 켜거나 끄고 싶은 경우에 사용합니다.
 
-##### プロパティ
-`label` ... スイッチに表記するテキスト。
+##### 속성
+`label` ... 스위치에 표시되는 텍스트.
 
-#### ラジオボタン
-type: `radio` ラジオボタンを表示します。選択肢を提示するのに有用です。例えば、Botの強さを設定させるなどです。
+#### 라디오 버튼
+type: `radio` 라디오 버튼을 표시합니다. 선택지를 표시할 때 사용할 수 있습니다. 예를 들면, 봇의 난이도를 설정하는 등에 사용됩니다.
 
-##### プロパティ
-`items` ... ラジオボタンの選択肢。例:
+##### 속성
+`items` ... 라디오 버튼 선택지. 예:
 ```javascript
 items: [{
-  label: '弱',
+  label: '약',
   value: 1
 }, {
-  label: '中',
+  label: '중',
   value: 2
 }, {
-  label: '強',
+  label: '강',
   value: 3
 }]
 ```
 
-#### スライダー
-type: `slider` スライダーを表示します。
+#### 슬라이더
+type: `slider` 슬라이더를 표시합니다.
 
-##### プロパティ
-`min` ... スライダーの下限。 `max` ... スライダーの上限。 `step` ... 入力欄で刻むステップ値。
+##### 속성
+`min` ... 슬라이더의 최소값. `max` ... 슬라이더의 최대값. `step` ... 입력란에 기입되는 스텝 값.
 
-#### テキストボックス
-type: `textbox` テキストボックスを表示します。ユーザーになにか入力させる一般的な用途に利用できます。
+#### 텍스트 상자
+type: `textbox` 텍스트 상자를 표시합니다. 사용자에게 어떠한 것을 입력하도록 하는 일반적인 용도로 사용할 수 있습니다.
 
-## ユーザーにメッセージを表示する
-設定画面でユーザーと対話する、フォーム以外のもうひとつの方法がこれです。ユーザーになにかメッセージを表示することができます。 例えば、ユーザーがBotの対応していないモードやマップを選択したとき、警告を表示するなどです。 メッセージを表示するには、次のメッセージをストリームに送信します:
+## 사용자에게 메시지 표시하기
+설정 화면에서 사용자와 대화하는 것 이외에, 또 다른 방법입니다. 사용자에게 메시지를 표시할 수 있습니다. 예를 들어, 사용자가 봇이 지원하지 않는 모드나 지도를 선택했을 때, 경고를 표시하는 등으로 사용됩니다. 메시지를 표시하려면, 다음 메시지를 스트림으로 전송합니다:
 ```javascript
 {
   type: 'message',
   body: {
-    text: 'メッセージ内容',
-    type: 'メッセージの種類'
+    text: '메시지 내용',
+    type: '메시지 종류'
   }
 }
 ```
-メッセージの種類: `success`, `info`, `warning`, `error`。
+메시지 종류: `success`, `info`, `warning`, `error`。
 
-## 投了する
-投了をするには、<a href="./api/endpoints/games/reversi/games/surrender">このエンドポイント</a>にリクエストします。
+## 거두기
+거두기를 하려면, <a href="./api/endpoints/games/reversi/games/surrender">이 엔드포인트</a>에 요청합니다.
diff --git a/src/docs/ko-KR/stream.md b/src/docs/ko-KR/stream.md
index 1ff7d4c3ef..b32176494e 100644
--- a/src/docs/ko-KR/stream.md
+++ b/src/docs/ko-KR/stream.md
@@ -1,25 +1,25 @@
-# ストリーミングAPI
+# 스트리밍 API
 
-ストリーミングAPIを使うと、リアルタイムで様々な情報(例えばタイムラインに新しい投稿が流れてきた、メッセージが届いた、フォローされた、など)を受け取ったり、様々な操作を行ったりすることができます。
+스트리밍 API를 사용하면, 실시간으로 다양한 정보(예를 들어 타임라인에 새로운 노트가 올라왔다거나, 메시지가 도착했다거나 팔로우 되었다거나 등)를 받거나, 다양한 작업을 할 수 있습니다.
 
-## ストリームに接続する
+## 스트림에 접속하기
 
-ストリーミングAPIを利用するには、まずMisskeyサーバーに**websocket**接続する必要があります。
+스트리밍 API를 이용하려면, 먼저 Misskey 서버에 **websocket** 접속이 필요합니다.
 
-以下のURLに、`i`というパラメータ名で認証情報を含めて、websocket接続してください。例:
+아래 URL에, `i` 라고 하는 매개변수명으로 인증 정보를 포함해서, websocket에 접속해주세요. 예:
 ```
 %WS_URL%/streaming?i=xxxxxxxxxxxxxxx
 ```
 
-認証情報は、自分のAPIキーや、アプリケーションからストリームに接続する際はユーザーのアクセストークンのことを指します。
+인증 정보는 자신의 API 키나 애플리케이션에서 스트림에 접속할 때, 사용자의 접속 토큰을 뜻합니다.
 
 <div class="ui info">
-    <p><i class="fas fa-info-circle"></i> 認証情報の取得については、<a href="./api">こちらのドキュメント</a>をご確認ください。</p>
+    <p><i class="fas fa-info-circle"></i> 인증 정보 발급에 대해서는, <a href="./api">해당 문서</a>를 참고해 주세요.</p>
 </div>
 
 ---
 
-認証情報は省略することもできますが、その場合非ログインでの利用ということになり、受信できる情報や可能な操作は限られます。例:
+인증 정보는 생략할 수 있지만, 이렇게 하면 게스트로 작동하기 때문에, 수신할 수 있는 정보나 조작이 한정됩니다. 예:
 
 ```
 %WS_URL%/streaming
@@ -27,15 +27,15 @@
 
 ---
 
-ストリームに接続すると、後述するAPI操作や、投稿の購読を行ったりすることができます。 しかしまだこの段階では、例えばタイムラインへの新しい投稿を受信したりすることはできません。 それを行うには、ストリーム上で、後述する**チャンネル**に接続する必要があります。
+스트림에 접속하면, 뒤에서 서술하는 API 조작 및 노트 구독을 할 수 있습니다. 그러나 아직 이 단계에서는, 타임라인에 새로운 노트를 확인하는 등의 행동을 할 수 없습니다. 이것을 하기 위해서는, 스트림 상에서 후술하는 **채널**에 접속할 필요가 있습니다.
 
-**ストリームでのやり取りはすべてJSONです。**
+**스트림에서 주고 받는 정보는 모두 JSON 입니다.**
 
 ## 채널
-MisskeyのストリーミングAPIにはチャンネルという概念があります。これは、送受信する情報を分離するための仕組みです。 Misskeyのストリームに接続しただけでは、まだリアルタイムでタイムラインの投稿を受信したりはできません。 ストリーム上でチャンネルに接続することで、様々な情報を受け取ったり情報を送信したりすることができるようになります。
+Misskey의 스트리밍 API에는 채널이라는 개념이 있습니다. 이것은 송수신하는 정보를 분리하기 위한 구조입니다. Misskey의 스트림 연결만으로는, 아직 실시간으로 타임라인의 노트를 수신할 수 없습니다. 스트림 상에서 채널에 접속함으로써, 다양한 정보를 받거나 보낼 수 있게 됩니다.
 
-### チャンネルに接続する
-チャンネルに接続するには、次のようなデータをJSONでストリームに送信します:
+### 채널에 접속하기
+채널에 접속하려면, 다음 데이터를 JSON으로 스트림에 전송합니다:
 
 ```json
 {
@@ -50,19 +50,19 @@ MisskeyのストリーミングAPIにはチャンネルという概念があり
 }
 ```
 
-ここで、
-* `channel`には接続したいチャンネル名を設定します。チャンネルの種類については後述します。
-* `id`にはそのチャンネルとやり取りするための任意のIDを設定します。ストリームでは様々なメッセージが流れるので、そのメッセージがどのチャンネルからのものなのか識別する必要があるからです。このIDは、UUIDや、乱数のようなもので構いません。
-* `params`はチャンネルに接続する際のパラメータです。チャンネルによって接続時に必要とされるパラメータは異なります。パラメータ不要のチャンネルに接続する際は、このプロパティは省略可能です。
+여기서,
+* `channel`에는 접속하고자 하는 채널명을 입력합니다. 채널의 종류에 대해서는 후술하겠습니다.
+* `id`에는 해당 채널과 주고받기 위한 임의의 ID를 입력합니다. 스트림에서는 다양한 메시지가 나오기 때문에, 그 메시지가 어떤 채널에서 나오는 것인지 식별할 수 있어야 합니다. ID는 UUID나 난수 같은 것이면 됩니다.
+* `params`는 채널에 접속할 때의 매개변수입니다. 채널에 따라서 접속 시 필요한 매개변수는 다릅니다. 매개변수가 필요없는 채널에 접속할 때는, 이 속성은 생략할 수 있습니다.
 
 <div class="ui info">
-    <p><i class="fas fa-info-circle"></i> IDはチャンネルごとではなく「チャンネルの接続ごと」です。なぜなら、同じチャンネルに異なるパラメータで複数接続するケースもあるからです。</p>
+    <p><i class="fas fa-info-circle"></i> ID는 채널별로 설정하는 것이 아니라, 「채널에 접속하는 스트림마다」 설정해야 합니다. 왜냐하면, 같은 채널에 다른 매개변수로 다중 접속하는 경우도 존재하기 때문입니다.</p>
 </div>
 
-### チャンネルからのメッセージを受け取る
-例えばタイムラインのチャンネルなら、新しい投稿があった時にメッセージを発します。そのメッセージを受け取ることで、タイムラインに新しい投稿がされたことをリアルタイムで知ることができます。
+### 채널에서 메시지 수신하기
+예를 들어, 타임라인 채널이라면. 새로운 노트가 올라왔을 때 메시지를 보냅니다. 메시지를 받음으로써, 타임라인에 새로운 노트가 올라온 것을 실시간으로 알 수 있습니다.
 
-チャンネルがメッセージを発すると、次のようなデータがJSONでストリームに流れてきます:
+채널에서 메시지를 보내면, 다음 데이터가 JSON에서 스트림으로 전달됩니다:
 ```json
 {
     type: 'channel',
@@ -76,15 +76,15 @@ MisskeyのストリーミングAPIにはチャンネルという概念があり
 }
 ```
 
-ここで、
-* `id`には前述したそのチャンネルに接続する際に設定したIDが設定されています。これで、このメッセージがどのチャンネルからのものなのか知ることができます。
-* `type`にはメッセージの種類が設定されます。チャンネルによって、どのような種類のメッセージが流れてくるかは異なります。
-* `body`にはメッセージの内容が設定されます。チャンネルによって、どのような内容のメッセージが流れてくるかは異なります。
+여기서,
+* `id`에는 앞서 말한 채널에 접속할 때 설정한 ID를 입력합니다. 이제 이 메시지가 어느 채널에서 온 것인지 알 수 있습니다.
+* `type`에는 메시지의 종류를 입력합니다. 채널에 따라 어떤 종류의 메시지가 나오는지가 달라집니다.
+* `body`에는 메시지 내용을 입력합니다. 채널에 따라, 어떤 내용의 메시지가 나오는지가 달라집니다.
 
-### チャンネルに向けてメッセージを送信する
-チャンネルによっては、メッセージを受け取るだけでなく、こちらから何かメッセージを送信し、何らかの操作を行える場合があります。
+### 채널에 메시지 보내기
+채널에 따라서는, 메시지를 받을 뿐만 아니라, 반대로 메시지를 발송해서 특정한 동작을 실행할 수도 있습니다.
 
-チャンネルにメッセージを送信するには、次のようなデータをJSONでストリームに送信します:
+채널에 메시지를 보내려면, 다음 데이터를 JSON으로 스트림에 보냅니다:
 ```json
 {
     type: 'channel',
@@ -98,13 +98,13 @@ MisskeyのストリーミングAPIにはチャンネルという概念があり
 }
 ```
 
-ここで、
-* `id`には前述したそのチャンネルに接続する際に設定したIDを設定します。これで、このメッセージがどのチャンネルに向けたものなのか識別させることができます。
-* `type`にはメッセージの種類を設定します。チャンネルによって、どのような種類のメッセージを受け付けるかは異なります。
-* `body`にはメッセージの内容を設定します。チャンネルによって、どのような内容のメッセージを受け付けるかは異なります。
+여기서,
+* `id`에는 앞서 말한 채널에 접속할 때 설정한 ID를 입력합니다. 이제 이 메시지가 어느 채널로 갈 것인지 알 수 있습니다.
+* `type`에는 메시지 종류를 입력합니다. 채널에 따라 어떤 종류의 메시지를 수신할지는 다릅니다.
+* `body`에는 메시지 내용을 입력합니다. 채널에 따라, 어떤 내용의 메시지를 수신할지가 달라집니다.
 
-### チャンネルから切断する
-チャンネルから切断するには、次のようなデータをJSONでストリームに送信します:
+### 채널 접속 끊기
+채널 접속을 끊으려면, 다음 데이터를 JSON으로 스트림에 전송합니다:
 
 ```json
 {
@@ -115,14 +115,14 @@ MisskeyのストリーミングAPIにはチャンネルという概念があり
 }
 ```
 
-ここで、
-* `id`には前述したそのチャンネルに接続する際に設定したIDを設定します。
+여기서,
+* `id`에는 앞서 말한 채널에 접속할 때 설정한 ID를 입력합니다.
 
-## ストリームを経由してAPIリクエストする
+## 스트림을 경유하여 API 요청하기
 
-ストリームを経由してAPIリクエストすると、HTTPリクエストを発生させずにAPIを利用できます。そのため、コードを簡潔にできたり、パフォーマンスの向上を見込めるかもしれません。
+스트림을 통해 API를 요청하면, HTTP 요청을 발생시키지 않고 API를 이용할 수 있습니다. 이렇게 하면, 코드를 간결하게 만들거나, 성능을 향상시킬 수 있을지도 모릅니다.
 
-ストリームを経由してAPIリクエストするには、次のようなデータをJSONでストリームに送信します:
+스트림을 통해 API를 요청하려면, 다음 데이터를 JSON으로 스트림에 전송합니다:
 ```json
 {
     type: 'api',
@@ -136,18 +136,18 @@ MisskeyのストリーミングAPIにはチャンネルという概念があり
 }
 ```
 
-ここで、
-* `id`には、APIのレスポンスを識別するための、APIリクエストごとの一意なIDを設定する必要があります。UUIDや、簡単な乱数のようなもので構いません。
-* `endpoint`には、あなたがリクエストしたいAPIのエンドポイントを指定します。
-* `data`には、エンドポイントのパラメータを含めます。
+여기서,
+* `id`에는 API의 응답을 식별할 수 있는 API 요청별 핵심 ID를 입력해야 합니다. UUID나 간단한 난수 같은 것으로 설정해도 됩니다.
+* `endpoint`에는 내가 요청하려는 API의 엔드포인트를 입력합니다.
+* `data`에는 엔드포인트의 매개변수를 입력합니다.
 
 <div class="ui info">
-    <p><i class="fas fa-info-circle"></i> APIのエンドポイントやパラメータについてはAPIリファレンスをご確認ください。</p>
+    <p><i class="fas fa-info-circle"></i> API의 엔드포인트 및 매개변수는 API 레퍼런스를 확인하시기 바랍니다.</p>
 </div>
 
-### レスポンスの受信
+### 응답 수신
 
-APIへリクエストすると、レスポンスがストリームから次のような形式で流れてきます。
+API로 요청하면, 응답이 스트림에서 다음 형식으로 전달됩니다.
 
 ```json
 {
@@ -158,23 +158,23 @@ APIへリクエストすると、レスポンスがストリームから次の
 }
 ```
 
-ここで、
-* `xxxxxxxxxxxxxxxx`の部分には、リクエストの際に設定された`id`が含まれています。これにより、どのリクエストに対するレスポンスなのか判別することができます。
-* `body`には、レスポンスが含まれています。
+여기서,
+* `xxxxxxxxxxxxxxxx` 부분에는, 요청 시 설정된 `id`가 포함되어 있습니다. 이를 통해, 어떤 요청에 대한 응답인지 판별할 수 있습니다.
+* `body`에는 응답이 포함되어 있습니다.
 
-## 投稿のキャプチャ
+## 노트 캡처
 
-Misskeyは投稿のキャプチャと呼ばれる仕組みを提供しています。これは、指定した投稿のイベントをストリームで受け取る機能です。
+Misskey는 게시한 노트를 캡처할 수 있는 시스템을 제공하고 있습니다. 이것은 지정한 노트의 이벤트를 스트림으로 받을 수 있는 기능입니다.
 
-例えばタイムラインを取得してユーザーに表示したとします。ここで誰かがそのタイムラインに含まれるどれかの投稿に対してリアクションしたとします。
+예를 들어, 타임라인을 불러와 유저에게 표시했습니다. 여기서 누군가가 그 타임라인에 포함된 어떤 노트에 대해서 리액션을 했다고 가정합니다.
 
-しかし、クライアントからするとある投稿にリアクションが付いたことなどは知る由がないため、リアルタイムでリアクションをタイムライン上の投稿に反映して表示するといったことができません。
+그러나, 클라이언트가 보기에 어떤 글에 리액션이 붙었는지 등은 알 수가 없기 때문에, 실시간으로 리액션을 타임라인 상의 노트에 반영해서 표시하는 것은 불가능합니다.
 
-この問題を解決するために、Misskeyは投稿のキャプチャ機構を用意しています。投稿をキャプチャすると、その投稿に関するイベントを受け取ることができるため、リアルタイムでリアクションを反映させたりすることが可能になります。
+이 문제를 해결하기 위해, Misskey는 게시 캡처 도구를 제공하고 있습니다. 노트를 캡처하면, 해당 노트에 대한 이벤트를 받을 수 있기 때문에, 실시간으로 리액션을 반영할 수 있습니다.
 
-### 投稿をキャプチャする
+### 노트 게시 캡처
 
-投稿をキャプチャするには、ストリームに次のようなメッセージを送信します:
+노트를 캡처하려면, 스트림에 다음 메시지를 발송합니다:
 
 ```json
 {
@@ -185,12 +185,12 @@ Misskeyは投稿のキャプチャと呼ばれる仕組みを提供していま
 }
 ```
 
-ここで、
-* `id`にキャプチャしたい投稿の`id`を設定します。
+여기서,
+* `id`에 캡처하려는 노트의 `id`를 입력합니다.
 
-このメッセージを送信すると、Misskeyにキャプチャを要請したことになり、以後、その投稿に関するイベントが流れてくるようになります。
+이 메시지를 발송하면, Misskey에 캡처를 요청하게 되고, 이후, 해당 노트에 대한 이벤트를 불러오게 됩니다.
 
-例えば投稿にリアクションが付いたとすると、次のようなメッセージが流れてきます:
+예를 들면, 노트에 리액션이 붙었을 때 다음과 같은 메시지를 받습니다:
 
 ```json
 {
@@ -206,20 +206,20 @@ Misskeyは投稿のキャプチャと呼ばれる仕組みを提供していま
 }
 ```
 
-ここで、
-* `body`内の`id`に、イベントを発生させた投稿のIDが設定されます。
-* `body`内の`type`に、イベントの種類が設定されます。
-* `body`内の`body`に、イベントの詳細が設定されます。
+여기서,
+* `body`내에 `id`에는 이벤트를 발생시킨 노트의 ID가 포함됩니다.
+* `body`내에 `type`에는 이벤트 종류가 포함됩니다.
+* `body`내에 `body`에는 이벤트의 상세 내용이 포함됩니다.
 
-#### イベントの種類
+#### 이벤트의 종류
 
 ##### `reacted`
-その投稿にリアクションがされた時に発生します。
+해당 노트에 리액션이 올라갔을 때 발생합니다.
 
-* `reaction`に、リアクションの種類が設定されます。
-* `userId`に、リアクションを行ったユーザーのIDが設定されます。
+* `reaction`에 리액션 종류가 포함됩니다.
+* `userId`에 리액션을 한 유저의 ID가 포함됩니다.
 
-例:
+예:
 ```json
 {
     type: 'noteUpdated',
@@ -235,11 +235,11 @@ Misskeyは投稿のキャプチャと呼ばれる仕組みを提供していま
 ```
 
 ##### `deleted`
-その投稿が削除された時に発生します。
+해당 노트가 삭제되었을 때 발생합니다.
 
-* `deletedAt`に、削除日時が設定されます。
+* `deletedAt`에 삭제한 날짜가 포함됩니다.
 
-例:
+예:
 ```json
 {
     type: 'noteUpdated',
@@ -254,12 +254,12 @@ Misskeyは投稿のキャプチャと呼ばれる仕組みを提供していま
 ```
 
 ##### `pollVoted`
-その投稿に添付されたアンケートに投票された時に発生します。
+해당 노트에 첨부된 투표에 투표했을 때 발생합니다.
 
-* `choice`に、選択肢IDが設定されます。
-* `userId`に、投票を行ったユーザーのIDが設定されます。
+* `choice`에 선택 항목의 ID가 포함됩니다.
+* `userId`에 투표한 유저의 ID가 포함됩니다.
 
-例:
+예:
 ```json
 {
     type: 'noteUpdated',
@@ -274,11 +274,11 @@ Misskeyは投稿のキャプチャと呼ばれる仕組みを提供していま
 }
 ```
 
-### 投稿のキャプチャを解除する
+### 노트 캡처 해제
 
-その投稿がもう画面に表示されなくなったりして、その投稿に関するイベントをもう受け取る必要がなくなったときは、キャプチャの解除を申請してください。
+노트가 더 이상 화면에 표시되지 않는 등의 이유로, 해당 노트에 대한 이벤트를 받을 필요가 없을 때는, 캡처 해제를 진행해 주세요.
 
-次のメッセージを送信します:
+아래 메시지를 보냅니다:
 
 ```json
 {
@@ -289,66 +289,66 @@ Misskeyは投稿のキャプチャと呼ばれる仕組みを提供していま
 }
 ```
 
-ここで、
-* `id`にキャプチャを解除したい投稿の`id`を設定します。
+여기서,
+* `id`에 캡처를 해제하고자 하는 노트의 `id`를 입력합니다.
 
-このメッセージを送信すると、以後、その投稿に関するイベントは流れてこないようになります。
+이 메시지를 보내면, 더 이상 해당 노트에 대한 이벤트는 발생하지 않습니다.
 
-# チャンネル一覧
+# 채널 목록
 ## `main`
-アカウントに関する基本的な情報が流れてきます。このチャンネルにパラメータはありません。
+계정에 대한 기본적인 정보를 표시됩니다. 이 채널에 대응하는 매개변수는 없습니다.
 
-### 流れてくるイベント一覧
+### 발생하는 이벤트 목록
 
 #### `renote`
-自分の投稿がRenoteされた時に発生するイベントです。自分自身の投稿をRenoteしたときは発生しません。
+내 노트가 Renote 되었을 때 발생하는 이벤트입니다. 내가 올린 노트를 Renote 했을 때는 발생하지 않습니다.
 
 #### `mention`
-誰かからメンションされたときに発生するイベントです。
+다른 사람이 나를 멘션 했을 때 발생하는 이벤트입니다.
 
 #### `readAllNotifications`
-自分宛ての通知がすべて既読になったことを表すイベントです。このイベントを利用して、「通知があることを示すアイコン」のようなものをオフにしたりする等のケースが想定されます。
+나에게 온 알림을 모두 읽었음을 나타내는 이벤트입니다. 이 이벤트를 이용해, 「알림이 있음을 나타내는 아이콘」과 같은 것을 끄는 등의 활용이 가능합니다.
 
 #### `meUpdated`
-自分の情報が更新されたことを表すイベントです。
+내 정보가 업데이트 되었음을 나타내는 이벤트입니다.
 
 #### `follow`
-自分が誰かをフォローしたときに発生するイベントです。
+내가 누군가를 팔로우 했을 때 발생하는 이벤트입니다.
 
 #### `unfollow`
-自分が誰かのフォローを解除したときに発生するイベントです。
+내가 누군가를 언팔로우 했을 때 발생하는 이벤트입니다.
 
 #### `followed`
-自分が誰かにフォローされたときに発生するイベントです。
+다른 사람이 나를 팔로우 했을 때 발생하는 이벤트입니다.
 
 ## `homeTimeline`
-ホームタイムラインの投稿情報が流れてきます。このチャンネルにパラメータはありません。
+홈 타임라인에 게시된 정보가 표시됩니다. 이 채널에 대응하는 매개변수는 없습니다.
 
-### 流れてくるイベント一覧
+### 발생하는 이벤트 목록
 
 #### `note`
-タイムラインに新しい投稿が流れてきたときに発生するイベントです。
+타임라인에 새로운 노트가 올라왔을 때 발생하는 이벤트입니다.
 
 ## `localTimeline`
-ローカルタイムラインの投稿情報が流れてきます。このチャンネルにパラメータはありません。
+로컬 타임라인에 게시된 정보가 표시됩니다. 이 채널에 대응하는 매개변수는 없습니다.
 
-### 流れてくるイベント一覧
+### 발생하는 이벤트 목록
 
 #### `note`
-ローカルタイムラインに新しい投稿が流れてきたときに発生するイベントです。
+로컬 타임라인에 새로운 노트가 올라왔을 때 발생하는 이벤트입니다.
 
 ## `hybridTimeline`
-ソーシャルタイムラインの投稿情報が流れてきます。このチャンネルにパラメータはありません。
+소셜 타임라인에 게시된 정보가 표시됩니다. 이 채널에 대응하는 매개변수는 없습니다.
 
-### 流れてくるイベント一覧
+### 발생하는 이벤트 목록
 
 #### `note`
-ソーシャルタイムラインに新しい投稿が流れてきたときに発生するイベントです。
+소셜 타임라인에 새로운 노트가 올라왔을 때 발생하는 이벤트입니다.
 
 ## `globalTimeline`
-グローバルタイムラインの投稿情報が流れてきます。このチャンネルにパラメータはありません。
+글로벌 타임라인에 게시된 정보가 표시됩니다. 이 채널에 대응하는 매개변수는 없습니다.
 
-### 流れてくるイベント一覧
+### 발생하는 이벤트 목록
 
 #### `note`
-グローバルタイムラインに新しい投稿が流れてきたときに発生するイベントです。
+글로벌 타임라인에 새로운 노트가 올라왔을 때 발생하는 이벤트입니다.
diff --git a/src/docs/ko-KR/theme.md b/src/docs/ko-KR/theme.md
index e01133b831..21ea085414 100644
--- a/src/docs/ko-KR/theme.md
+++ b/src/docs/ko-KR/theme.md
@@ -1,12 +1,12 @@
 # 테마
 
-テーマを設定して、Misskeyクライアントの見た目を変更できます。
+테마를 설정하여 Misskey 클라이언트의 외형을 변경할 수 있습니다.
 
-## テーマの設定
-設定 > テーマ
+## 테마 설정
+설정 > 테마
 
-## テーマを作成する
-テーマコードはJSON5で記述されたテーマオブジェクトです。 テーマは以下のようなオブジェクトです。
+## 테마 만들기
+테마 코드는 JSON5에 기술된 테마 객체입니다. 예시는 아래와 같습니다.
 ``` js
 {
     id: '17587283-dd92-4a2c-a22c-be0637c9e22a',
@@ -33,36 +33,36 @@
 
 ```
 
-* `id` ... テーマの一意なID。UUIDをおすすめします。
-* `name` ... テーマ名
-* `author` ... テーマの作者
-* `desc` ... テーマの説明(オプション)
-* `base` ... 明るいテーマか、暗いテーマか
-    * `light`にすると明るいテーマになり、`dark`にすると暗いテーマになります。
-    * テーマはここで設定されたベーステーマを継承します。
-* `props` ... テーマのスタイル定義。これから説明します。
+* `id` ... 테마에 지정된 고유 ID. UUID 방식을 추천합니다.
+* `name` ... 테마 이름
+* `author` ... 테마 제작자
+* `desc` ... 테마 설명(옵션)
+* `base` ... 밝은 테마인지, 어두운 테마인지
+    * `light`로 하면 밝은 테마가 되고, `dark`로 하면 어두운 테마가 됩니다.
+    * 테마는 여기서 상속된 베이스 테마를 기준으로 합니다.
+* `props` ... 테마 스타일 정의. 이제부터 설명하겠습니다.
 
-### テーマのスタイル定義
-`props`下にはテーマのスタイルを定義します。 キーがCSSの変数名になり、バリューで中身を指定します。 なお、この`props`オブジェクトはベーステーマから継承されます。 ベーステーマは、このテーマの`base`が`light`なら[_light.json5](https://github.com/misskey-dev/misskey/blob/develop/src/client/themes/_light.json5)で、`dark`なら[_dark.json5](https://github.com/misskey-dev/misskey/blob/develop/src/client/themes/_dark.json5)です。 つまり、このテーマ内の`props`に`panel`というキーが無くても、そこにはベーステーマの`panel`があると見なされます。
+### 테마 스타일 정의
+`props`에서는 테마의 스타일을 정의합니다. 키가 CSS 변수명이 되고, 값으로 내용을 지정합니다. 덧붙여, 이 `props` 객체는 베이스 테마로부터 상속됩니다. 베이스 테마는, 이 테마의 `base`가 `light`인 경우, [_light.json5](https://github.com/misskey-dev/misskey/blob/develop/src/client/themes/_light.json5) 이고, `dark`라면 [_dark.json5](https://github.com/misskey-dev/misskey/blob/develop/src/client/themes/_dark.json5) 입니다. 즉, 만들려는 테마의 `props`에 `panel`라는 키가 없어도 베이스 테마로부터 상속되므로, `panel`이 존재한다고 볼 수 있습니다.
 
-#### バリューで使える構文
-* 16進数で表された色
-    * 例: `#00ff00`
-* `rgb(r, g, b)`形式で表された色
-    * 例: `rgb(0, 255, 0)`
-* `rgb(r, g, b, a)`形式で表された透明度を含む色
-    * 例: `rgba(0, 255, 0, 0.5)`
-* 他のキーの値の参照
-    * `@{キー名}`と書くと他のキーの値の参照になります。`{キー名}`は参照したいキーの名前に置き換えます。
-    * 例: `@panel`
-* 定数(後述)の参照
-    * `${定数名}`と書くと定数の参照になります。`{定数名}`は参照したい定数の名前に置き換えます。
-    * 例: `$main`
-* 関数(後述)
-    * `:{関数名}<{引数}<{色}`
+#### 값으로 사용할 수 있는 구문
+* 16진수로 표현된 색
+    * 예: `#00ff00`
+* `rgb(r, g, b)` 형식으로 나타낸 색
+    * 예: `rgb(0, 255, 0)`
+* `rgb(r, g, b, a)` 형식으로 표시된 투명도를 포함한 색상
+    * 예: `rgba(0, 255, 0, 0.5)`
+* 다른 키 값 참조
+    * `@{키 이름}`으로 쓰면 다른 키의 값을 참조할 수 있습니다. `{키 이름}`은 참조하려는 키의 이름으로 대체합니다.
+    * 예: `@panel`
+* 정수(후술)의 참조
+    * `${정수명}`이라고 쓰면 정수를 참조합니다. `{정수명}`은 참조하려는 정수의 이름으로 대체합니다.
+    * 예: `$main`
+* 함수(후술)
+    * `:{함수명}<{인수}<{색상}`
 
 #### 상수
-「CSS変数として出力はしたくないが、他のCSS変数の値として使いまわしたい」値があるときは、定数を使うと便利です。 キー名を`$`で始めると、そのキーはCSS変数として出力されません。
+「CSS 변수로 출력하고 싶지 않지만, 다른 CSS 변수의 값을 사용」하고 싶은 값이 있을 때는, 정수를 사용하면 편리합니다. 키의 이름 앞에 `$`를 붙이면, 키가 CSS 변수로 출력되지 않습니다.
 
 #### 함수
 wip
diff --git a/src/docs/ko-KR/timelines.md b/src/docs/ko-KR/timelines.md
index ecaaa644aa..fca5bde9a2 100644
--- a/src/docs/ko-KR/timelines.md
+++ b/src/docs/ko-KR/timelines.md
@@ -1,15 +1,15 @@
-# タイムラインの比較
+# 타임라인의 비교
 
-https://docs.google.com/spreadsheets/d/1lxQ2ugKrhz58Bg96HTDK_2F98BUritkMyIiBkOByjHA/edit?usp=sharing
+https://docs.google.com/spreadsheets/d/1uNVxlN4WUPAxrR0-5uXXeoJiUb_kDTaoGT5VLYntZpg/edit?usp=sharing
 
 ## 홈
-自分のフォローしているユーザーの投稿
+자신이 팔로우하고 있는 사용자의 노트
 
 ## 로컬
-全てのローカルユーザーの「ホーム」指定されていない投稿
+공개 범위가 「홈」으로 지정되지 않은 모든 로컬 유저의 노트
 
 ## 소셜
-自分のフォローしているユーザーの投稿と、全てのローカルユーザーの「ホーム」指定されていない投稿
+자신이 팔로우하고 있는 유저의 노트와, 공개 범위가 「홈」으로 지정되지 않은 모든 로컬 유저의 노트
 
 ## 글로벌
-全てのローカルユーザーの「ホーム」指定されていない投稿と、サーバーに届いた全てのリモートユーザーの「ホーム」指定されていない投稿
+공개 범위가 「홈」으로 지정되지 않은 모든 로컬 유저의 노트와, 서버에 배달된 공개 범위가 「홈」으로 지정되지 않은 모든 리모트 유저의 노트
diff --git a/src/docs/zh-CN/theme.md b/src/docs/zh-CN/theme.md
index 1f33c00b41..a0d0c10bcd 100644
--- a/src/docs/zh-CN/theme.md
+++ b/src/docs/zh-CN/theme.md
@@ -43,7 +43,7 @@
 * `props` ... 关于主题样式的定义，下面是详细介绍。
 
 ### 主题样式定义
-在 `props` 下，你可以定义主题的样式。 键是 CSS 变量名，值是指定的内容。 请注意，`props` 对象是从基础主题集继承的。 如果这个主题的 `base` 是 `light`，则基础主题为 [_light.json5](https://github.com/misskey-dev/misskey/blob/develop/src/client/themes/_light.json5)；如果 `dark`，则基础主题为 [_dark.json5](https://github.com/misskey-dev/misskey/blob/develop/src/client/themes/_dark.json5)。 换句话说，即使这个主题中的 `props` 中没有定义关键的 `panel`，也会继承在基础主题中所拥有 `panel`。
+在 `props` 下，你可以定义主题的样式。 键是 CSS 变量名，值是指定的内容。 请注意，`props` 对象是从基础主题集继承的。 如果这个主题的 `base` 是 `light`，则基础主题为 [_light.json5](https://github.com/syuilo/misskey/blob/develop/src/client/themes/_light.json5)；如果 `dark`，则基础主题为 [_dark.json5](https://github.com/syuilo/misskey/blob/develop/src/client/themes/_dark.json5)。 换句话说，即使这个主题中的 `props` 中没有定义关键的 `panel`，也会继承在基础主题中所拥有 `panel`。
 
 #### 可以在值中使用的语法
 * 以十六进制表示的颜色

From 1bcf123dd5b40852107a24ede0d0bc02ce39f0d9 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 18 Apr 2021 11:16:57 +0900
Subject: [PATCH 12/34] update secret message

---
 src/server/web/views/base.pug | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/server/web/views/base.pug b/src/server/web/views/base.pug
index 9a5c674242..22d5fd0c67 100644
--- a/src/server/web/views/base.pug
+++ b/src/server/web/views/base.pug
@@ -2,7 +2,9 @@ block vars
 
 doctype html
 
-!= '\n<!-- Thank you for using Misskey! @syuilo -->\n'
+!= '\n<!-- Thank you for using Misskey! -->\n'
+!= '\n<!-- If you are reading this message... how about joining the development of Misskey? -->\n'
+!= '\n<!-- https://github.com/misskey-dev/misskey -->\n'
 
 html
 

From 926266c7af106345ba28c6b13a8e1c1e9cc11acc Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 18 Apr 2021 11:55:38 +0900
Subject: [PATCH 13/34] fix style

---
 src/client/style.scss | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/client/style.scss b/src/client/style.scss
index eadf56bf37..4c101c1dab 100644
--- a/src/client/style.scss
+++ b/src/client/style.scss
@@ -323,6 +323,11 @@ hr {
 	margin: var(--root-margin, 32px) auto;
 	max-width: min(var(--baseContentWidth), calc(100% - (var(--root-margin, 32px) * 2)));
 
+	// 子marginが突き抜けるのを防ぐため
+	// https://stackoverflow.com/questions/1762539/margin-on-child-element-moves-parent-element
+	padding-top: 1px;
+	margin-top: calc(var(--root-margin, 32px) - 1px);
+
 	@media (max-width: 500px) {
 		--root-margin: 10px;
 	}
@@ -344,7 +349,7 @@ hr {
 }
 
 ._flat_ {
-	--root-margin: 0;
+	--root-margin: 0px;
 	--baseContentWidth: 100%;
 	--panelShadow: none;
 
@@ -365,7 +370,7 @@ hr {
 
 	@media (max-width: 500px) {
 		._root {
-			--root-margin: 0;
+			--root-margin: 0px;
 		}
 	}
 }

From 5c51185388ba9e252019a328897c0d2f9f24a149 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 18 Apr 2021 11:55:44 +0900
Subject: [PATCH 14/34] refactoring

---
 src/client/components/date-separated-list.vue | 8 --------
 src/client/ui/deck/column.vue                 | 2 +-
 2 files changed, 1 insertion(+), 9 deletions(-)

diff --git a/src/client/components/date-separated-list.vue b/src/client/components/date-separated-list.vue
index 012ed42385..0f2823d392 100644
--- a/src/client/components/date-separated-list.vue
+++ b/src/client/components/date-separated-list.vue
@@ -171,12 +171,4 @@ export default defineComponent({
 		}
 	}
 }
-
-._inContainer_ .sqadhkmv > * {
-	margin: 0 !important;
-	border: none;
-	border-bottom: solid 0.5px var(--divider);
-	border-radius: 0;
-	box-shadow: none;
-}
 </style>
diff --git a/src/client/ui/deck/column.vue b/src/client/ui/deck/column.vue
index 3fae7c27ee..7a08b65a64 100644
--- a/src/client/ui/deck/column.vue
+++ b/src/client/ui/deck/column.vue
@@ -1,6 +1,6 @@
 <template>
 <!-- sectionを利用しているのは、deck.vue側でcolumnに対してfirst-of-typeを効かせるため -->
-<section class="dnpfarvg _panel _narrow_" :class="{ paged: isMainColumn, naked, _inContainer_: !isMainColumn, active, isStacked, draghover, dragging, dropready }"
+<section class="dnpfarvg _panel _narrow_" :class="{ paged: isMainColumn, naked, active, isStacked, draghover, dragging, dropready }"
 	@dragover.prevent.stop="onDragover"
 	@dragleave="onDragleave"
 	@drop.prevent.stop="onDrop"

From e04d866b209947978a257ad8bb4b6e3c99239cae Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 18 Apr 2021 14:29:31 +0900
Subject: [PATCH 15/34] Tweak UI

---
 src/client/components/notifications.vue |  4 ++--
 src/client/pages/page.vue               |  4 ++--
 src/client/pages/timeline.vue           |  7 +++----
 src/client/style.scss                   | 11 ++++-------
 4 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/src/client/components/notifications.vue b/src/client/components/notifications.vue
index 1b789093ef..161419f891 100644
--- a/src/client/components/notifications.vue
+++ b/src/client/components/notifications.vue
@@ -6,8 +6,8 @@
 
 	<p class="mfcuwfyp" v-else-if="empty">{{ $ts.noNotifications }}</p>
 
-	<div v-else class="_magnetParent">
-		<XList class="notifications _magnetChild" :items="items" v-slot="{ item: notification }" :no-gap="true">
+	<div v-else>
+		<XList class="notifications" :items="items" v-slot="{ item: notification }" :no-gap="true">
 			<XNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :note="notification.note" @update:note="noteUpdated(notification.note, $event)" :key="notification.id"/>
 			<XNotification v-else :notification="notification" :with-time="true" :full="true" class="_panel notification" :key="notification.id"/>
 		</XList>
diff --git a/src/client/pages/page.vue b/src/client/pages/page.vue
index 6ff09e2b68..d7b570e5f4 100644
--- a/src/client/pages/page.vue
+++ b/src/client/pages/page.vue
@@ -1,6 +1,6 @@
 <template>
-<div class="xcukqgmh _root _magnetParent" v-if="page" :key="page.id" v-size="{ max: [450] }">
-	<div class="_block _magnetChild main">
+<div class="xcukqgmh _root" v-if="page" :key="page.id" v-size="{ max: [450] }">
+	<div class="_block main">
 		<!--
 		<div class="header">
 			<h1>{{ page.title }}</h1>
diff --git a/src/client/pages/timeline.vue b/src/client/pages/timeline.vue
index 0e0116465c..efad31c252 100644
--- a/src/client/pages/timeline.vue
+++ b/src/client/pages/timeline.vue
@@ -1,10 +1,8 @@
 <template>
-<div class="cmuxhskf _root _magnetParent" v-hotkey.global="keymap">
-	<div class="new" v-if="queue > 0"><button class="_buttonPrimary" @click="top()">{{ $ts.newNoteRecived }}</button></div>
-
+<div class="cmuxhskf _root" v-hotkey.global="keymap">
 	<XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _block"/>
 	<XPostForm v-if="$store.reactiveState.showFixedPostForm.value" class="post-form _block" fixed/>
-	<div class="tabs _block _magnetChild">
+	<div class="tabs _block">
 		<div class="left">
 			<button class="_button tab" @click="() => { src = 'home'; saveSrc(); }" :class="{ active: src === 'home' }" v-tooltip="$ts._timelines.home"><Fa :icon="faHome"/></button>
 			<button class="_button tab" @click="() => { src = 'local'; saveSrc(); }" :class="{ active: src === 'local' }" v-tooltip="$ts._timelines.local" v-if="isLocalTimelineAvailable"><Fa :icon="faComments"/></button>
@@ -32,6 +30,7 @@
 		@after="after()"
 		@queue="queueUpdated"
 	/>
+	<div class="new" v-if="queue > 0"><button class="_buttonPrimary" @click="top()">{{ $ts.newNoteRecived }}</button></div>
 </div>
 </template>
 
diff --git a/src/client/style.scss b/src/client/style.scss
index 4c101c1dab..ab8da9ccfa 100644
--- a/src/client/style.scss
+++ b/src/client/style.scss
@@ -243,7 +243,10 @@ hr {
 
 ._block {
 	@extend ._panel;
-	margin: var(--margin) 0;
+
+	& + ._block {
+		margin-top: var(--margin);
+	}
 }
 
 ._gap {
@@ -375,12 +378,6 @@ hr {
 	}
 }
 
-._magnetParent {
-	._magnetChild:not(* + ._magnetChild) {
-		margin-top: 0;
-	}
-}
-
 ._narrow_ ._card {
 	> ._title {
 		padding: 16px;

From e81c466d741ccccc86b1d097b1e32290410775ea Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 18 Apr 2021 16:35:22 +0900
Subject: [PATCH 16/34] fix #7454

---
 src/client/ui/default.widgets.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/client/ui/default.widgets.vue b/src/client/ui/default.widgets.vue
index e0f85f2459..e5a0419387 100644
--- a/src/client/ui/default.widgets.vue
+++ b/src/client/ui/default.widgets.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="efzpzdvf">
-	<XWidgets :edit="editMode" :widgets="$store.reactiveState.widgets.value" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/>
+	<XWidgets class="widgets" :edit="editMode" :widgets="$store.reactiveState.widgets.value" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/>
 
 	<button v-if="editMode" @click="editMode = false" class="_textButton edit" style="font-size: 0.9em;"><Fa :icon="faCheck"/> {{ $ts.editWidgetsExit }}</button>
 	<button v-else @click="editMode = true" class="_textButton edit" style="font-size: 0.9em;"><Fa :icon="faPencilAlt"/> {{ $ts.editWidgets }}</button>
@@ -64,6 +64,10 @@ export default defineComponent({
 	box-sizing: border-box;
 	padding-bottom: 8px;
 
+	> .widgets {
+		width: 300px;
+	}
+
 	> .edit {
 		display: block;
 		margin: 16px auto;

From ad826bf0883e621e4e37a8efd37e7006f97af583 Mon Sep 17 00:00:00 2001
From: marihachi <marihachi0620@gmail.com>
Date: Sun, 18 Apr 2021 16:35:34 +0900
Subject: [PATCH 17/34] update MFM (#7456)

---
 package.json                         |  2 +-
 src/client/pages/mfm-cheat-sheet.vue | 26 +++++++++++++-------------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/package.json b/package.json
index cd73d0e36c..f08e5c79f9 100644
--- a/package.json
+++ b/package.json
@@ -181,7 +181,7 @@
 		"markdown-it": "12.0.5",
 		"markdown-it-anchor": "7.1.0",
 		"matter-js": "0.17.1",
-		"mfm-js": "0.15.0",
+		"mfm-js": "0.16.0",
 		"mocha": "8.3.2",
 		"moji": "0.5.1",
 		"ms": "2.1.3",
diff --git a/src/client/pages/mfm-cheat-sheet.vue b/src/client/pages/mfm-cheat-sheet.vue
index 1fe7b18222..36f40dbcab 100644
--- a/src/client/pages/mfm-cheat-sheet.vue
+++ b/src/client/pages/mfm-cheat-sheet.vue
@@ -294,19 +294,19 @@ export default defineComponent({
 			preview_inlineMath: '\\(x= \\frac{-b\' \\pm \\sqrt{(b\')^2-ac}}{a}\\)',
 			preview_quote: `> ${this.$ts._mfm.dummy}`,
 			preview_search: `${this.$ts._mfm.dummy} 検索`,
-			preview_jelly: `[jelly 🍮]`,
-			preview_tada: `[tada 🍮]`,
-			preview_jump: `[jump 🍮]`,
-			preview_bounce: `[bounce 🍮]`,
-			preview_shake: `[shake 🍮]`,
-			preview_twitch: `[twitch 🍮]`,
-			preview_spin: `[spin 🍮] [spin.left 🍮] [spin.alternate 🍮]\n[spin.x 🍮] [spin.x,left 🍮] [spin.x,alternate 🍮]\n[spin.y 🍮] [spin.y,left 🍮] [spin.y,alternate 🍮]`,
-			preview_flip: `[flip ${this.$ts._mfm.dummy}]\n[flip.v ${this.$ts._mfm.dummy}]\n[flip.h,v ${this.$ts._mfm.dummy}]`,
-			preview_font: `[font.serif ${this.$ts._mfm.dummy}]\n[font.monospace ${this.$ts._mfm.dummy}]\n[font.cursive ${this.$ts._mfm.dummy}]\n[font.fantasy ${this.$ts._mfm.dummy}]`,
-			preview_x2: `[x2 🍮]`,
-			preview_x3: `[x3 🍮]`,
-			preview_x4: `[x4 🍮]`,
-			preview_blur: `[blur ${this.$ts._mfm.dummy}]`,
+			preview_jelly: `$[jelly 🍮]`,
+			preview_tada: `$[tada 🍮]`,
+			preview_jump: `$[jump 🍮]`,
+			preview_bounce: `$[bounce 🍮]`,
+			preview_shake: `$[shake 🍮]`,
+			preview_twitch: `$[twitch 🍮]`,
+			preview_spin: `$[spin 🍮] $[spin.left 🍮] $[spin.alternate 🍮]\n$[spin.x 🍮] $[spin.x,left 🍮] $[spin.x,alternate 🍮]\n$[spin.y 🍮] $[spin.y,left 🍮] $[spin.y,alternate 🍮]`,
+			preview_flip: `$[flip ${this.$ts._mfm.dummy}]\n$[flip.v ${this.$ts._mfm.dummy}]\n$[flip.h,v ${this.$ts._mfm.dummy}]`,
+			preview_font: `$[font.serif ${this.$ts._mfm.dummy}]\n$[font.monospace ${this.$ts._mfm.dummy}]\n$[font.cursive ${this.$ts._mfm.dummy}]\n$[font.fantasy ${this.$ts._mfm.dummy}]`,
+			preview_x2: `$[x2 🍮]`,
+			preview_x3: `$[x3 🍮]`,
+			preview_x4: `$[x4 🍮]`,
+			preview_blur: `$[blur ${this.$ts._mfm.dummy}]`,
 		}
 	},
 });

From 203799871cf1382b6b0b83287ae48ecab59d8d7c Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 18 Apr 2021 16:36:01 +0900
Subject: [PATCH 18/34] Update yarn.lock

---
 yarn.lock | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 44accf6594..ac5b283498 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6695,10 +6695,10 @@ methods@^1.1.2:
   resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
   integrity sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=
 
-mfm-js@0.15.0:
-  version "0.15.0"
-  resolved "https://registry.yarnpkg.com/mfm-js/-/mfm-js-0.15.0.tgz#b7dea4225a992ac4fd873ad6b2cad069f171dc24"
-  integrity sha512-JW7AAQzXejo60JGwx+wzodkp45XKYBEq4bYlMDcxjmi2e+P0IOhAcpz2HPBbzxnO/4X3WPuklU8B16RUZpFFdg==
+mfm-js@0.16.0:
+  version "0.16.0"
+  resolved "https://registry.yarnpkg.com/mfm-js/-/mfm-js-0.16.0.tgz#71852124eba5564f8a94cd7476a4eaa4ddeed1cd"
+  integrity sha512-z33e1yPj9dLN+DjDHakhslvGhCnzTxsUNpodyFw3nemO6gnKOE1adUrm49jjB2boQxtBExKhH7FERMCsNFcpBQ==
   dependencies:
     twemoji-parser "13.0.x"
 

From f984f56459182375421c4af0a31393a8f411a296 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 18 Apr 2021 22:35:47 +0900
Subject: [PATCH 19/34] =?UTF-8?q?=E7=B2=BE=E5=BA=A6=E3=82=92=E9=AB=98?=
 =?UTF-8?q?=E3=82=81=E3=82=8B=E3=81=9F=E3=82=81=E3=82=B9=E3=83=88=E3=83=AA?=
 =?UTF-8?q?=E3=83=BC=E3=83=9F=E3=83=B3=E3=82=B0=E6=8E=A5=E7=B6=9A=E4=B8=AD?=
 =?UTF-8?q?=E3=81=AB=E5=AE=9A=E6=9C=9F=E7=9A=84=E3=81=ABlastActiveDate?=
 =?UTF-8?q?=E3=82=92=E6=9B=B4=E6=96=B0=E3=81=99=E3=82=8B=E3=82=88=E3=81=86?=
 =?UTF-8?q?=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/server/api/streaming.ts | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/server/api/streaming.ts b/src/server/api/streaming.ts
index 7224c23570..57e8c90860 100644
--- a/src/server/api/streaming.ts
+++ b/src/server/api/streaming.ts
@@ -35,10 +35,22 @@ module.exports = (server: http.Server) => {
 
 		const main = new MainStreamConnection(connection, ev, user, app);
 
+		const intervalId = user ? setInterval(() => {
+			Users.update(user.id, {
+				lastActiveDate: new Date(),
+			});
+		}, 1000 * 60 * 5) : null;
+		if (user) {
+			Users.update(user.id, {
+				lastActiveDate: new Date(),
+			});
+		}
+
 		connection.once('close', () => {
 			ev.removeAllListeners();
 			main.dispose();
 			redisClient.off('message', onRedisMessage);
+			if (intervalId) clearInterval(intervalId);
 		});
 
 		connection.on('message', async (data) => {
@@ -46,11 +58,5 @@ module.exports = (server: http.Server) => {
 				connection.send('pong');
 			}
 		});
-
-		if (user) {
-			Users.update(user.id, {
-				lastActiveDate: new Date(),
-			});
-		}
 	});
 };

From 7da5eead8a52c842a93047bb4bb180cfca183ec1 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 18 Apr 2021 22:51:35 +0900
Subject: [PATCH 20/34] Resolve #7457

---
 .../api/endpoints/notifications/read.ts       | 42 +++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 src/server/api/endpoints/notifications/read.ts

diff --git a/src/server/api/endpoints/notifications/read.ts b/src/server/api/endpoints/notifications/read.ts
new file mode 100644
index 0000000000..fe8e5ba44f
--- /dev/null
+++ b/src/server/api/endpoints/notifications/read.ts
@@ -0,0 +1,42 @@
+import $ from 'cafy';
+import { ID } from '@/misc/cafy-id';
+import { publishMainStream } from '../../../../services/stream';
+import define from '../../define';
+import { Notifications } from '../../../../models';
+import { readNotification } from '../../common/read-notification';
+import { ApiError } from '../../error';
+
+export const meta = {
+	tags: ['notifications', 'account'],
+
+	requireCredential: true as const,
+
+	kind: 'write:notifications',
+
+	params: {
+		notificationId: {
+			validator: $.type(ID),
+		},
+	},
+
+	errors: {
+		noSuchNotification: {
+			message: 'No such notification.',
+			code: 'NO_SUCH_NOTIFICATION',
+			id: 'efa929d5-05b5-47d1-beec-e6a4dbed011e'
+		},
+	},
+};
+
+export default define(meta, async (ps, user) => {
+	const notification = await Notifications.findOne({
+		notifieeId: user.id,
+		id: ps.notificationId,
+	});
+
+	if (notification == null) {
+		throw new ApiError(meta.errors.noSuchNotification);
+	}
+
+	readNotification(user.id, [notification.id]);
+});

From 9e012dbc1a298f45e8a5d37f100e32e0c1fba3e8 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 18 Apr 2021 23:24:33 +0900
Subject: [PATCH 21/34] New Crowdin updates (#7452)

* New translations ja-JP.yml (Korean)

* New translations ja-JP.yml (Chinese Simplified)

* New translations ja-JP.yml (Chinese Simplified)

* New translations ja-JP.yml (Chinese Simplified)

* New translations ja-JP.yml (Korean)

* New translations reaction.md (Korean)

* New translations reversi-bot.md (Korean)

* New translations ja-JP.yml (English)

* New translations ja-JP.yml (German)

* New translations ja-JP.yml (French)

* New translations ja-JP.yml (French)

* New translations ja-JP.yml (English)

* New translations ja-JP.yml (German)

* New translations ja-JP.yml (English)

* New translations ja-JP.yml (French)

* New translations ja-JP.yml (French)

* New translations ja-JP.yml (French)

* New translations ja-JP.yml (French)
---
 locales/de-DE.yml             | 16 ++++++++++++++++
 locales/en-US.yml             | 16 ++++++++++++++++
 locales/fr-FR.yml             | 22 ++++++++++++++++++++--
 locales/ko-KR.yml             |  9 +++++++++
 locales/zh-CN.yml             | 18 +++++++++++++++++-
 src/docs/ko-KR/reaction.md    |  2 +-
 src/docs/ko-KR/reversi-bot.md |  2 +-
 7 files changed, 80 insertions(+), 5 deletions(-)

diff --git a/locales/de-DE.yml b/locales/de-DE.yml
index 1f4e739550..1ffeafcd73 100644
--- a/locales/de-DE.yml
+++ b/locales/de-DE.yml
@@ -687,6 +687,7 @@ textColor: "Text"
 saveAs: "Speichern als…"
 advanced: "Fortgeschritten"
 value: "Wert"
+createdAt: "Erstellt am"
 updatedAt: "Zuletzt geändert am"
 saveConfirm: "Änderungen speichern?"
 deleteConfirm: "Wirklich löschen?"
@@ -710,8 +711,23 @@ typingUsers: "{users} ist/sind am schreiben..."
 jumpToSpecifiedDate: "Zu bestimmtem Datum springen"
 showingPastTimeline: "Momentan wird eine alte Chronik angezeigt"
 clear: "Zurückkehren"
+markAllAsRead: "Alle als gelesen markieren"
 goBack: "Zurück"
+unlikeConfirm: "\"Gefällt mir\" wirklich entfernen?"
+fullView: "Vollansicht"
+quitFullView: "Vollansicht verlassen"
+addDescription: "Beschreibung hinzufügen"
+userPagePinTip: "Um Notizen hier erscheinen zu lassen, drücke \"Anpinnen\" im Menü individueller Notizen"
+notSpecifiedMentionWarning: "Diese Notiz enthält Erwähnungen von Nutzern, die nicht als Empfänger ausgewählt sind"
 info: "Über"
+userInfo: "Benutzerinformation"
+unknown: "Unbekannt"
+onlineStatus: "Online-Status"
+hideOnlineStatus: "Online-Status verbergen"
+hideOnlineStatusDescription: "Das Verbergen deines Online-Statuses reduziert die Nützlichkeit von Funktionen wie der Suche."
+online: "Online"
+active: "Aktiv"
+offline: "Offline"
 _email:
   _follow:
     title: "Du hast einen neuen Follower"
diff --git a/locales/en-US.yml b/locales/en-US.yml
index 97ec618180..b5f9ff8279 100644
--- a/locales/en-US.yml
+++ b/locales/en-US.yml
@@ -687,6 +687,7 @@ textColor: "Text"
 saveAs: "Save as..."
 advanced: "Advanced"
 value: "Value"
+createdAt: "Created on"
 updatedAt: "Updated at"
 saveConfirm: "Save changes?"
 deleteConfirm: "Really delete?"
@@ -710,8 +711,23 @@ typingUsers: "{users} is/are typing..."
 jumpToSpecifiedDate: "Jump to specific date"
 showingPastTimeline: "Currently displaying an old timeline"
 clear: "Return"
+markAllAsRead: "Mark all as read"
 goBack: "Back"
+unlikeConfirm: "Really remove your like?"
+fullView: "Full view"
+quitFullView: "Exit full view"
+addDescription: "Add description"
+userPagePinTip: "You can make notes be displayed here by selecting \"Pin to profile\" from the menu of individual notes"
+notSpecifiedMentionWarning: "This note contains mentions of users not included as recipient"
 info: "About"
+userInfo: "User information"
+unknown: "Unknown"
+onlineStatus: "Online status"
+hideOnlineStatus: "Hide online status"
+hideOnlineStatusDescription: "Hiding your online status reduces the convenience of some functions such as search"
+online: "Online"
+active: "Active"
+offline: "Offline"
 _email:
   _follow:
     title: "You've got a new follower"
diff --git a/locales/fr-FR.yml b/locales/fr-FR.yml
index 1b3ccbbb0c..199aa983fc 100644
--- a/locales/fr-FR.yml
+++ b/locales/fr-FR.yml
@@ -686,6 +686,7 @@ textColor: "Texte"
 saveAs: "Enregistrer sous ..."
 advanced: "Avancé"
 value: "Valeur"
+createdAt: "Date de création"
 updatedAt: "Mis à jour le"
 saveConfirm: "Voulez-vous sauvegarder les modifications?"
 deleteConfirm: "Confirmez-vous la suppression?"
@@ -709,6 +710,22 @@ typingUsers: "{users} est en train d'écrire"
 jumpToSpecifiedDate: "Se rendre à la date"
 showingPastTimeline: "Un fil ancien est affiché"
 clear: "Effacer"
+markAllAsRead: "Tout marquer comme lu"
+goBack: "Retour"
+unlikeConfirm: "Êtes-vous sûr·e de ne plus vouloir aimer cette publication ?"
+fullView: "Plein écran"
+quitFullView: "Quitter le plein écran"
+addDescription: "Ajouter une description"
+userPagePinTip: "Vous pouvez afficher des notes ici en sélectionnant l'option « Épingler au profil » dans le menu de chaque note."
+notSpecifiedMentionWarning: "Vous avez mentionné des utilisateur·rice·s qui ne font pas partie de la liste des destinataires"
+info: "Informations"
+userInfo: "Informations sur l'utilisateur"
+unknown: "Inconnu"
+onlineStatus: "Statut"
+hideOnlineStatus: "Toujours apparaître hors ligne"
+hideOnlineStatusDescription: "Forcer votre statut à toujours apparaître hors ligne peut diminuer les performances de certaines fonctionnalités, telles que la Recherche."
+online: "En ligne"
+offline: "Hors ligne"
 _email:
   _follow:
     title: "Vous suit"
@@ -842,6 +859,7 @@ _theme:
   install: "Installer un thème"
   manage: "Gestion des thèmes"
   code: "Code du thème"
+  description: "Description"
   installed: "{name} a été installé"
   installedThemes: "Thèmes installés"
   builtinThemes: "Thèmes intégrés"
@@ -936,7 +954,7 @@ _tutorial:
   step3_3: "Remplissez le cadran et cliquez sur le bouton en haut à droite pour envoyer."
   step3_4: "Vous n’avez rien à dire ? Essayez d’écrire « J’ai commencé à utiliser Misskey »."
   step4_1: "Avez-vous publié votre première note ?"
-  step4_2: "Youpi ! Celle-ci est maintenant affiché sur votre fil d’actualité."
+  step4_2: "Youpi ! Celle-ci est maintenant affichée sur votre fil d’actualité."
   step5_1: "Maintenant, essayons de nous abonner à d’autres personnes afin de rendre votre fil plus vivant."
   step5_2: "La page {featured} affiche les notes en tendance sur la présente instance et {explore} vous permet de trouver des utilisateur·rice·s en tendance. Essayez de vous abonner aux gens que vous aimez !"
   step5_3: "Pour pouvoir suivre d’autres utilisateur·rice, cliquez sur leur avatar afin d’afficher la page du profil utilisateur ensuite appuyez sur le bouton « S’abonner »."
@@ -946,7 +964,7 @@ _tutorial:
   step6_3: "Pour ajouter une réaction à une note, cliquez sur le signe « + » de celle-ci et sélectionnez l’émoji souhaité."
   step7_1: "Félicitations ! Vous avez atteint la fin du tutoriel de base pour l’utilisation de Misskey."
   step7_2: "Si vous désirez en savoir plus sur Misskey, jetez un œil sur la section {help}."
-  step7_3: "Bon courage et amusez-vous bien sur Misskey 🚀"
+  step7_3: "Bon courage et amusez-vous bien sur Misskey ! 🚀"
 _2fa:
   alreadyRegistered: "Cette étape à déjà été complétée"
   registerDevice: "Ajouter un nouvel appareil"
diff --git a/locales/ko-KR.yml b/locales/ko-KR.yml
index 23a224f520..972169c244 100644
--- a/locales/ko-KR.yml
+++ b/locales/ko-KR.yml
@@ -717,7 +717,16 @@ unlikeConfirm: "좋아요를 취소할까요?"
 fullView: "전체 화면"
 quitFullView: "전체 화면 해제"
 addDescription: "설명 추가"
+userPagePinTip: "각 노트의 메뉴에서 「프로필에 고정」을 선택하는 것으로, 여기에 노트를 표시해 둘 수 있어요."
+notSpecifiedMentionWarning: "수신자가 선택되지 않은 멘션이 있어요"
 info: "정보"
+userInfo: "유저 정보"
+unknown: "알 수 없음"
+onlineStatus: "온라인 상태"
+hideOnlineStatus: "온라인 상태 숨기기"
+hideOnlineStatusDescription: "온라인 상태를 숨기면, 검색과 같은 일부 기능에 영향을 미칠 수 있습니다."
+online: "온라인"
+active: "활동 중"
 offline: "오프라인"
 _email:
   _follow:
diff --git a/locales/zh-CN.yml b/locales/zh-CN.yml
index 67aef27a61..04206c0a34 100644
--- a/locales/zh-CN.yml
+++ b/locales/zh-CN.yml
@@ -584,7 +584,7 @@ smtpSecureInfo: "使用STARTTLS时关闭。"
 testEmail: "邮件发送测试"
 wordMute: "文字屏蔽"
 userSaysSomething: "{name}说了什么"
-makeActive: "激活"
+makeActive: "启用"
 display: "显示"
 copy: "复制"
 metrics: "指标"
@@ -687,6 +687,7 @@ textColor: "文本"
 saveAs: "另存为"
 advanced: "高级"
 value: "值"
+createdAt: "创建日期"
 updatedAt: "更新时间"
 saveConfirm: "确定保存？"
 deleteConfirm: "确定删除?"
@@ -710,8 +711,23 @@ typingUsers: "{users}正在输入"
 jumpToSpecifiedDate: "跳转到特定日期"
 showingPastTimeline: "显示过去的时间线"
 clear: "清除"
+markAllAsRead: "全部标记为已读"
 goBack: "返回"
+unlikeConfirm: "取消赞？"
+fullView: "全屏"
+quitFullView: "退出全屏"
+addDescription: "添加描述"
+userPagePinTip: "在帖子的菜单中选择“置顶”，即可显示该条帖子。"
+notSpecifiedMentionWarning: "有未指定的提及"
 info: "关于"
+userInfo: "用户信息"
+unknown: "未知"
+onlineStatus: "在线状态"
+hideOnlineStatus: "隐藏在线状态"
+hideOnlineStatusDescription: "隐藏在线状态后，可能会降低例如搜索等功能的便利性。"
+online: "在线"
+active: "活动"
+offline: "离线"
 _email:
   _follow:
     title: "你有新的关注者"
diff --git a/src/docs/ko-KR/reaction.md b/src/docs/ko-KR/reaction.md
index 58e4dfd4b9..7c4e156257 100644
--- a/src/docs/ko-KR/reaction.md
+++ b/src/docs/ko-KR/reaction.md
@@ -8,4 +8,4 @@
 리액션은 Misskey의 자체 기능이기 때문에, 리모트 인스턴스가 Misskey가 아니면 「Like」로 액티비티가 전송됩니다. 일반적으로 Like는 「마음에 들어요」 정도의 의미를 가지고 있는 것 같습니다. 또, 상대방이 Misskey를 이용하고 있었다고 해도, 커스텀 이모지는 전달되지 않고 자동으로 「👍」 등으로 보여집니다.
 
 ## 리모트 인스턴스로부터의 리액션에 대해서
-다른 인스턴스에서 「Like」 액티비티를 수신했다면, Misskey에서는 「👍」로 표시됩니다.
+리모트 인스턴스에서 「Like」 액티비티를 수신했다면, Misskey에서는 「👍」로 표시됩니다.
diff --git a/src/docs/ko-KR/reversi-bot.md b/src/docs/ko-KR/reversi-bot.md
index 9add4b17da..77d33b9577 100644
--- a/src/docs/ko-KR/reversi-bot.md
+++ b/src/docs/ko-KR/reversi-bot.md
@@ -101,7 +101,7 @@ y = Math.floor(pos / mapWidth)
 `id` ... 제어 ID. `type` ... 제어 종류. 후술합니다. `label` ... 제어와 함께 표시할 텍스트. `value` ... 제어 기본값.
 
 ### 폼 조작값 받기
-사용자가 폼을 조작하면, 스트림에서 `update-form` 이벤트가 발생합니다. 이벤트의 내용에는 제어 ID와 사용자가 설정한 값이 포함되어 있습니다. 예를 들어, 위에서 나타낸 스위치를 사용자가 켰다면 다음 이벤트가 발생합니다:
+사용자가 폼을 조작하면, 스트림에서 `update-form` 이벤트가 발생합니다. 이벤트의 내용에는 제어 ID와 사용자가 설정한 값이 포함되어 있습니다. 예를 들어, 위에서 나타낸 스위치를 사용자가 켰다면, 다음 이벤트가 발생합니다:
 ```javascript
 {
   id: 'switch1',

From 53d257ef0f5d79c0717842f5944a91f1a9885c2c Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 18 Apr 2021 23:25:46 +0900
Subject: [PATCH 22/34] 12.77.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index f08e5c79f9..f3a4930cc1 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "misskey",
 	"author": "syuilo <syuilotan@yahoo.co.jp>",
-	"version": "12.77.0",
+	"version": "12.77.1",
 	"codename": "indigo",
 	"repository": {
 		"type": "git",

From 135ff280b9b555fb28ae4968979a9d6de2f99f77 Mon Sep 17 00:00:00 2001
From: okpierre <1679025+okpierre@users.noreply.github.com>
Date: Sun, 18 Apr 2021 23:17:22 -0400
Subject: [PATCH 23/34] Update index.ts (#7463)

---
 src/server/web/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/server/web/index.ts b/src/server/web/index.ts
index 953f2b47f1..1caab14cc2 100644
--- a/src/server/web/index.ts
+++ b/src/server/web/index.ts
@@ -99,7 +99,7 @@ router.get('/manifest.json', require('./manifest'));
 
 router.get('/robots.txt', async ctx => {
 	await send(ctx as any, '/robots.txt', {
-		root: assets
+		root: staticAssets
 	});
 });
 

From 4d9e3b9012d0f97cc53df32a700772799f100f73 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Mon, 19 Apr 2021 20:06:23 +0900
Subject: [PATCH 24/34] Improve client

---
 src/client/pages/instance-info.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/client/pages/instance-info.vue b/src/client/pages/instance-info.vue
index a3cd402993..1a294b858b 100644
--- a/src/client/pages/instance-info.vue
+++ b/src/client/pages/instance-info.vue
@@ -99,9 +99,12 @@
 			<span>Raw</span>
 		</FormObjectView>
 		<FormGroup>
+			<template #label>Well-known resources</template>
 			<FormLink :to="`https://${host}/.well-known/host-meta`" external>host-meta</FormLink>
 			<FormLink :to="`https://${host}/.well-known/host-meta.json`" external>host-meta.json</FormLink>
 			<FormLink :to="`https://${host}/.well-known/nodeinfo`" external>nodeinfo</FormLink>
+			<FormLink :to="`https://${host}/robots.txt`" external>robots.txt</FormLink>
+			<FormLink :to="`https://${host}/manifest.json`" external>manifest.json</FormLink>
 		</FormGroup>
 		<FormSuspense :p="dnsPromiseFactory" v-slot="{ result: dns }">
 			<FormGroup>

From 17f2e39084aab02d34f15487ea74733a2fd85064 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 20 Apr 2021 00:15:53 +0900
Subject: [PATCH 25/34] fix #7466

---
 src/models/repositories/user.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/models/repositories/user.ts b/src/models/repositories/user.ts
index 0d59ed2545..1ebc16a563 100644
--- a/src/models/repositories/user.ts
+++ b/src/models/repositories/user.ts
@@ -147,7 +147,7 @@ export class UserRepository extends Repository<User> {
 	}
 
 	public getOnlineStatus(user: User): string {
-		if (user.hideOnlineStatus == null) return 'unknown';
+		if (user.hideOnlineStatus) return 'unknown';
 		if (user.lastActiveDate == null) return 'unknown';
 		const elapsed = Date.now() - user.lastActiveDate.getTime();
 		return (

From 1043020f2725b175921dc22fcbb213029e3b7d5c Mon Sep 17 00:00:00 2001
From: marihachi <marihachi0620@gmail.com>
Date: Tue, 20 Apr 2021 10:29:08 +0900
Subject: [PATCH 26/34] update mfm.js (#7468)

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index f3a4930cc1..a54ba04416 100644
--- a/package.json
+++ b/package.json
@@ -181,7 +181,7 @@
 		"markdown-it": "12.0.5",
 		"markdown-it-anchor": "7.1.0",
 		"matter-js": "0.17.1",
-		"mfm-js": "0.16.0",
+		"mfm-js": "0.16.2",
 		"mocha": "8.3.2",
 		"moji": "0.5.1",
 		"ms": "2.1.3",

From 8bb6ed625bbc5dc4b14a068f6220747a9af82bee Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 20 Apr 2021 16:58:05 +0900
Subject: [PATCH 27/34] Tweak style

---
 src/client/components/user-online-indicator.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/client/components/user-online-indicator.vue b/src/client/components/user-online-indicator.vue
index bb98978bba..afaf0e8736 100644
--- a/src/client/components/user-online-indicator.vue
+++ b/src/client/components/user-online-indicator.vue
@@ -29,7 +29,7 @@ export default defineComponent({
 <style lang="scss" scoped>
 .fzgwjkgc {
 	box-shadow: 0 0 0 3px var(--panel);
-	border-radius: 100%;
+	border-radius: 120%; // Blinkのバグか知らんけど、100%ぴったりにすると何故か若干楕円でレンダリングされる
 
 	&.online {
 		background: #58d4c9;

From 11349561d697b11df7bcaa3d57ed3498eb4dd3c5 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 20 Apr 2021 23:22:59 +0900
Subject: [PATCH 28/34] Use FontAwesome as web font instead of vue component
 (#7469)

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* Update yarn.lock

* wip

* wip
---
 package.json                                  |   7 +-
 src/client/components/abuse-report-window.vue |   4 +-
 .../components/channel-follow-button.vue      |   8 +-
 src/client/components/channel-preview.vue     |   8 +-
 src/client/components/date-separated-list.vue |  12 +-
 src/client/components/dialog.vue              |  17 ++-
 .../components/drive-file-thumbnail.vue       |  39 ++-----
 src/client/components/drive.file.vue          |  10 +-
 src/client/components/drive.folder.vue        |  13 +--
 src/client/components/drive.nav-folder.vue    |   4 +-
 src/client/components/drive.vue               |  17 ++-
 .../components/emoji-picker.section.vue       |   4 +-
 src/client/components/emoji-picker.vue        |  13 +--
 src/client/components/file-type-icon.vue      |   4 +-
 src/client/components/follow-button.vue       |  14 +--
 src/client/components/form/info.vue           |   6 +-
 src/client/components/form/input.vue          |   4 +-
 src/client/components/form/link.vue           |   6 +-
 src/client/components/form/select.vue         |   4 +-
 src/client/components/form/textarea.vue       |   4 +-
 src/client/components/global/a.vue            |  11 +-
 src/client/components/global/error.vue        |   4 +-
 src/client/components/global/url.vue          |   4 +-
 src/client/components/google.vue              |   4 +-
 src/client/components/instance-stats.vue      |  14 +--
 src/client/components/launch-pad.vue          |  18 ++-
 src/client/components/link.vue                |   4 +-
 src/client/components/media-banner.vue        |   6 +-
 src/client/components/media-image.vue         |   6 +-
 src/client/components/media-video.vue         |   7 +-
 src/client/components/modal-page-window.vue   |  16 ++-
 src/client/components/note-detailed.vue       | 103 ++++++++---------
 src/client/components/note-header.vue         |  17 ++-
 src/client/components/note.vue                |  97 +++++++---------
 src/client/components/notification.vue        |  39 +++----
 src/client/components/page-window.vue         |  14 +--
 src/client/components/page/page.post.vue      |   7 +-
 src/client/components/poll-editor.vue         |   8 +-
 src/client/components/poll.vue                |   6 +-
 src/client/components/post-form-attaches.vue  |   9 +-
 src/client/components/post-form.vue           |  37 +++---
 src/client/components/remote-caution.vue      |   4 +-
 src/client/components/signin.vue              |  15 +--
 src/client/components/signup.vue              |  32 +++---
 src/client/components/sub-note-content.vue    |   4 +-
 src/client/components/taskmanager.vue         |   4 +-
 src/client/components/ui/container.vue        |   8 +-
 src/client/components/ui/folder.vue           |   8 +-
 src/client/components/ui/info.vue             |   6 +-
 src/client/components/ui/input.vue            |   4 +-
 src/client/components/ui/menu.vue             |  20 ++--
 src/client/components/ui/modal-window.vue     |   8 +-
 src/client/components/ui/select.vue           |   4 +-
 src/client/components/ui/window.vue           |   6 +-
 src/client/components/url-preview.vue         |   9 +-
 src/client/components/user-list.vue           |   4 +-
 src/client/components/user-select-dialog.vue  |   2 -
 src/client/components/users-dialog.vue        |   6 +-
 src/client/components/visibility-picker.vue   |  15 +--
 src/client/components/waiting-dialog.vue      |   6 +-
 src/client/components/widgets.vue             |   8 +-
 src/client/init.ts                            |   3 -
 src/client/pages/_error_.vue                  |   6 +-
 src/client/pages/about-misskey.vue            |   8 +-
 src/client/pages/about.vue                    |   4 +-
 src/client/pages/advanced-theme-editor.vue    |   6 +-
 src/client/pages/announcements.vue            |   6 +-
 src/client/pages/api-console.vue              |   6 +-
 src/client/pages/channel-editor.vue           |  13 +--
 src/client/pages/channel.vue                  |  15 +--
 src/client/pages/channels.vue                 |  15 +--
 src/client/pages/clip.vue                     |   9 +-
 src/client/pages/doc.vue                      |   3 +-
 src/client/pages/docs.vue                     |   4 +-
 src/client/pages/drive.vue                    |   3 +-
 src/client/pages/explore.vue                  |  25 ++---
 src/client/pages/favorites.vue                |   3 +-
 src/client/pages/featured.vue                 |   4 +-
 src/client/pages/follow-requests.vue          |   8 +-
 src/client/pages/instance-info.vue            |   5 +-
 src/client/pages/instance/abuses.vue          |   5 +-
 src/client/pages/instance/announcements.vue   |  11 +-
 .../pages/instance/emoji-edit-dialog.vue      |   4 +-
 src/client/pages/instance/emojis.vue          |  15 +--
 src/client/pages/instance/federation.vue      |  18 ++-
 src/client/pages/instance/file-dialog.vue     |   7 +-
 src/client/pages/instance/files.vue           |  11 +-
 src/client/pages/instance/index.metrics.vue   |  30 +++--
 src/client/pages/instance/index.vue           |  16 ++-
 src/client/pages/instance/instance.vue        |   6 +-
 src/client/pages/instance/logs.vue            |   7 +-
 src/client/pages/instance/queue.vue           |  11 +-
 src/client/pages/instance/relays.vue          |  13 +--
 src/client/pages/instance/settings.vue        | 106 +++++++++---------
 src/client/pages/instance/user-dialog.vue     |  19 ++--
 src/client/pages/instance/users.vue           |  23 ++--
 src/client/pages/mentions.vue                 |   3 +-
 src/client/pages/messages.vue                 |   4 +-
 src/client/pages/messaging/index.vue          |  10 +-
 .../pages/messaging/messaging-room.form.vue   |   8 +-
 .../messaging/messaging-room.message.vue      |   4 +-
 src/client/pages/messaging/messaging-room.vue |  27 ++---
 src/client/pages/mfm-cheat-sheet.vue          |   3 +-
 .../pages/my-antennas/index.antenna.vue       |   6 +-
 src/client/pages/my-antennas/index.vue        |   8 +-
 src/client/pages/my-clips/index.vue           |   8 +-
 src/client/pages/my-groups/group.vue          |   6 +-
 src/client/pages/my-groups/index.vue          |  12 +-
 src/client/pages/my-lists/index.vue           |   8 +-
 src/client/pages/my-lists/list.vue            |   6 +-
 src/client/pages/not-found.vue                |   3 +-
 src/client/pages/note.vue                     |   6 +-
 src/client/pages/notifications.vue            |   5 +-
 .../page-editor/els/page-editor.el.button.vue |   4 +-
 .../page-editor/els/page-editor.el.canvas.vue |   6 +-
 .../els/page-editor.el.counter.vue            |   6 +-
 .../page-editor/els/page-editor.el.if.vue     |   6 +-
 .../page-editor/els/page-editor.el.image.vue  |   7 +-
 .../page-editor/els/page-editor.el.note.vue   |   4 +-
 .../els/page-editor.el.number-input.vue       |   6 +-
 .../page-editor/els/page-editor.el.post.vue   |   4 +-
 .../els/page-editor.el.radio-button.vue       |   6 +-
 .../els/page-editor.el.section.vue            |   9 +-
 .../page-editor/els/page-editor.el.switch.vue |   6 +-
 .../els/page-editor.el.text-input.vue         |   6 +-
 .../page-editor/els/page-editor.el.text.vue   |   4 +-
 .../els/page-editor.el.textarea-input.vue     |   6 +-
 .../els/page-editor.el.textarea.vue           |   4 +-
 .../page-editor/page-editor.container.vue     |  13 +--
 .../page-editor/page-editor.script-block.vue  |   8 +-
 src/client/pages/page-editor/page-editor.vue  |  31 +++--
 src/client/pages/page.vue                     |  11 +-
 src/client/pages/pages.vue                    |  15 +--
 src/client/pages/preview.vue                  |   3 +-
 src/client/pages/reversi/game.board.vue       |  18 ++-
 src/client/pages/reversi/game.setting.vue     |   8 +-
 src/client/pages/reversi/game.vue             |   3 +-
 src/client/pages/reversi/index.vue            |   3 +-
 src/client/pages/room/room.vue                |  17 ++-
 src/client/pages/scratchpad.vue               |   8 +-
 src/client/pages/search.vue                   |   3 +-
 src/client/pages/settings/2fa.vue             |  10 +-
 src/client/pages/settings/account-info.vue    |   3 +-
 src/client/pages/settings/api.vue             |   3 +-
 src/client/pages/settings/apps.vue            |   6 +-
 src/client/pages/settings/deck.vue            |   4 +-
 src/client/pages/settings/drive.vue           |   7 +-
 src/client/pages/settings/email-address.vue   |   5 +-
 .../pages/settings/email-notification.vue     |   4 +-
 src/client/pages/settings/email.vue           |  11 +-
 .../pages/settings/experimental-features.vue  |   3 +-
 src/client/pages/settings/general.vue         |   4 +-
 src/client/pages/settings/import-export.vue   |  18 ++-
 src/client/pages/settings/index.vue           |  41 ++++---
 src/client/pages/settings/integration.vue     |  11 +-
 src/client/pages/settings/mute-block.vue      |   3 +-
 src/client/pages/settings/notifications.vue   |   5 +-
 src/client/pages/settings/other.vue           |  10 +-
 src/client/pages/settings/plugin.install.vue  |   6 +-
 src/client/pages/settings/plugin.manage.vue   |   8 +-
 src/client/pages/settings/plugin.vue          |   8 +-
 src/client/pages/settings/privacy.vue         |   3 +-
 src/client/pages/settings/profile.vue         |   9 +-
 src/client/pages/settings/reaction.vue        |  13 +--
 src/client/pages/settings/registry.keys.vue   |   3 +-
 src/client/pages/settings/registry.value.vue  |   8 +-
 src/client/pages/settings/registry.vue        |   3 +-
 src/client/pages/settings/security.vue        |  12 +-
 src/client/pages/settings/sidebar.vue         |   8 +-
 src/client/pages/settings/sounds.vue          |  12 +-
 src/client/pages/settings/theme.install.vue   |   8 +-
 src/client/pages/settings/theme.manage.vue    |   6 +-
 src/client/pages/settings/theme.vue           |  14 +--
 src/client/pages/settings/update.vue          |   3 +-
 src/client/pages/settings/word-mute.vue       |   6 +-
 src/client/pages/share.vue                    |   4 +-
 src/client/pages/tag.vue                      |   4 +-
 src/client/pages/test.vue                     |   3 +-
 src/client/pages/theme-editor.vue             |  10 +-
 src/client/pages/timeline.tutorial.vue        |  12 +-
 src/client/pages/timeline.vue                 |  25 ++---
 src/client/pages/user-ap-info.vue             |   3 +-
 src/client/pages/user-info.vue                |   5 +-
 src/client/pages/user/index.activity.vue      |   4 +-
 src/client/pages/user/index.photos.vue        |   4 +-
 src/client/pages/user/index.vue               |  51 ++++-----
 src/client/pages/v.vue                        |   2 -
 src/client/pages/welcome.entrance.a.vue       |  10 +-
 src/client/pages/welcome.entrance.b.vue       |   8 +-
 src/client/pages/welcome.entrance.c.vue       |  10 +-
 src/client/pages/welcome.setup.vue            |   4 +-
 src/client/scripts/get-user-menu.ts           |  28 +++--
 src/client/scripts/hpml/index.ts              |  22 ++--
 src/client/scripts/hpml/lib.ts                |  95 ++++++----------
 src/client/scripts/search.ts                  |   3 +-
 src/client/scripts/select-file.ts             |   7 +-
 src/client/sidebar.ts                         |  44 ++++----
 src/client/ui/_common_/header.vue             |  12 +-
 src/client/ui/_common_/sidebar.vue            |  51 ++++-----
 src/client/ui/_common_/upload.vue             |   6 +-
 src/client/ui/chat/date-separated-list.vue    |  12 +-
 src/client/ui/chat/index.vue                  |  73 ++++++------
 src/client/ui/chat/note-header.vue            |  17 ++-
 src/client/ui/chat/note.vue                   |  97 +++++++---------
 src/client/ui/chat/post-form.vue              |  35 +++---
 src/client/ui/chat/side.vue                   |  14 +--
 src/client/ui/chat/sub-note-content.vue       |   4 +-
 src/client/ui/deck.vue                        |   9 +-
 src/client/ui/deck/antenna-column.vue         |   4 +-
 src/client/ui/deck/column.vue                 |  25 ++---
 src/client/ui/deck/direct-column.vue          |   4 +-
 src/client/ui/deck/list-column.vue            |   4 +-
 src/client/ui/deck/main-column.vue            |   3 +-
 src/client/ui/deck/mentions-column.vue        |   3 +-
 src/client/ui/deck/notifications-column.vue   |   5 +-
 src/client/ui/deck/tl-column.vue              |  12 +-
 src/client/ui/deck/widgets-column.vue         |   4 +-
 src/client/ui/default.side.vue                |  14 +--
 src/client/ui/default.sidebar.vue             |  51 ++++-----
 src/client/ui/default.vue                     |  19 ++--
 src/client/ui/default.widgets.vue             |   6 +-
 src/client/ui/universal.vue                   |  21 ++--
 src/client/ui/universal.widgets.vue           |   6 +-
 src/client/ui/visitor/a.vue                   |   1 -
 src/client/ui/visitor/b.vue                   |   9 +-
 src/client/ui/visitor/header.vue              |  22 ++--
 src/client/ui/visitor/kanban.vue              |   1 -
 src/client/ui/zen.vue                         |   3 -
 src/client/widgets/activity.vue               |   6 +-
 src/client/widgets/aiscript.vue               |   4 +-
 src/client/widgets/federation.vue             |   4 +-
 src/client/widgets/job-queue.vue              |   6 +-
 src/client/widgets/memo.vue                   |   4 +-
 src/client/widgets/notifications.vue          |   6 +-
 src/client/widgets/photos.vue                 |   4 +-
 src/client/widgets/rss.vue                    |   6 +-
 src/client/widgets/server-metric/cpu.vue      |   6 +-
 src/client/widgets/server-metric/disk.vue     |   6 +-
 src/client/widgets/server-metric/index.vue    |   6 +-
 src/client/widgets/server-metric/mem.vue      |   6 +-
 src/client/widgets/slideshow.vue              |   1 -
 src/client/widgets/timeline.vue               |  29 +++--
 src/client/widgets/trends.vue                 |   4 +-
 src/server/web/views/base.pug                 |   2 +
 yarn.lock                                     |  46 +-------
 245 files changed, 1156 insertions(+), 1775 deletions(-)

diff --git a/package.json b/package.json
index a54ba04416..7e8b47d7f7 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "misskey",
 	"author": "syuilo <syuilotan@yahoo.co.jp>",
-	"version": "12.77.1",
+	"version": "12.78.0-beta.1",
 	"codename": "indigo",
 	"repository": {
 		"type": "git",
@@ -39,11 +39,6 @@
 	"dependencies": {
 		"@babel/plugin-transform-runtime": "7.13.15",
 		"@elastic/elasticsearch": "7.11.0",
-		"@fortawesome/fontawesome-svg-core": "1.2.35",
-		"@fortawesome/free-brands-svg-icons": "5.15.3",
-		"@fortawesome/free-regular-svg-icons": "5.15.3",
-		"@fortawesome/free-solid-svg-icons": "5.15.3",
-		"@fortawesome/vue-fontawesome": "3.0.0-3",
 		"@koa/cors": "3.1.0",
 		"@koa/multer": "3.0.0",
 		"@koa/router": "9.0.1",
diff --git a/src/client/components/abuse-report-window.vue b/src/client/components/abuse-report-window.vue
index df5b594c0b..d9e1c3966b 100644
--- a/src/client/components/abuse-report-window.vue
+++ b/src/client/components/abuse-report-window.vue
@@ -1,7 +1,7 @@
 <template>
 <XWindow ref="window" :initial-width="400" :initial-height="500" :can-resize="true" @closed="$emit('closed')">
 	<template #header>
-		<Fa :icon="faExclamationCircle" style="margin-right: 0.5em;"/>
+		<i class="fas fa-exclamation-circle" style="margin-right: 0.5em;"></i>
 		<I18n :src="$ts.reportAbuseOf" tag="span">
 			<template #name>
 				<b><MkAcct :user="user"/></b>
@@ -24,7 +24,6 @@
 
 <script lang="ts">
 import { defineComponent, markRaw } from 'vue';
-import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
 import XWindow from '@client/components/ui/window.vue';
 import MkTextarea from '@client/components/ui/textarea.vue';
 import MkButton from '@client/components/ui/button.vue';
@@ -53,7 +52,6 @@ export default defineComponent({
 	data() {
 		return {
 			comment: this.initialComment || '',
-			faExclamationCircle,
 		};
 	},
 
diff --git a/src/client/components/channel-follow-button.vue b/src/client/components/channel-follow-button.vue
index dc0c0faa1f..6f9405b97f 100644
--- a/src/client/components/channel-follow-button.vue
+++ b/src/client/components/channel-follow-button.vue
@@ -6,21 +6,20 @@
 >
 	<template v-if="!wait">
 		<template v-if="isFollowing">
-			<span v-if="full">{{ $ts.unfollow }}</span><Fa :icon="faMinus"/>
+			<span v-if="full">{{ $ts.unfollow }}</span><i class="fas fa-minus"></i>
 		</template>
 		<template v-else>
-			<span v-if="full">{{ $ts.follow }}</span><Fa :icon="faPlus"/>
+			<span v-if="full">{{ $ts.follow }}</span><i class="fas fa-plus"></i>
 		</template>
 	</template>
 	<template v-else>
-		<span v-if="full">{{ $ts.processing }}</span><Fa :icon="faSpinner" pulse fixed-width/>
+		<span v-if="full">{{ $ts.processing }}</span><i class="fas fa-spinner fa-pulse fa-fw"></i>
 	</template>
 </button>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faSpinner, faPlus, faMinus, } from '@fortawesome/free-solid-svg-icons';
 import * as os from '@client/os';
 
 export default defineComponent({
@@ -40,7 +39,6 @@ export default defineComponent({
 		return {
 			isFollowing: this.channel.isFollowing,
 			wait: false,
-			faSpinner, faPlus, faMinus,
 		};
 	},
 
diff --git a/src/client/components/channel-preview.vue b/src/client/components/channel-preview.vue
index 4dc633bcb7..eb00052a78 100644
--- a/src/client/components/channel-preview.vue
+++ b/src/client/components/channel-preview.vue
@@ -2,10 +2,10 @@
 <MkA :to="`/channels/${channel.id}`" class="eftoefju _panel" tabindex="-1">
 	<div class="banner" :style="bannerStyle">
 		<div class="fade"></div>
-		<div class="name"><Fa :icon="faSatelliteDish"/> {{ channel.name }}</div>
+		<div class="name"><i class="fas fa-satellite-dish"></i> {{ channel.name }}</div>
 		<div class="status">
 			<div>
-				<Fa :icon="faUsers" fixed-width/>
+				<i class="fas fa-users fa-fw"></i>
 				<I18n :src="$ts._channel.usersCount" tag="span" style="margin-left: 4px;">
 					<template #n>
 						<b>{{ channel.usersCount }}</b>
@@ -13,7 +13,7 @@
 				</I18n>
 			</div>
 			<div>
-				<Fa :icon="faPencilAlt" fixed-width/>
+				<i class="fas fa-pencil-alt fa-fw"></i>
 				<I18n :src="$ts._channel.notesCount" tag="span" style="margin-left: 4px;">
 					<template #n>
 						<b>{{ channel.notesCount }}</b>
@@ -35,7 +35,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faSatelliteDish, faUsers, faPencilAlt } from '@fortawesome/free-solid-svg-icons';
 
 export default defineComponent({
 	props: {
@@ -57,7 +56,6 @@ export default defineComponent({
 
 	data() {
 		return {
-			faSatelliteDish, faUsers, faPencilAlt,
 		};
 	},
 });
diff --git a/src/client/components/date-separated-list.vue b/src/client/components/date-separated-list.vue
index 0f2823d392..2a861adb09 100644
--- a/src/client/components/date-separated-list.vue
+++ b/src/client/components/date-separated-list.vue
@@ -1,7 +1,5 @@
 <script lang="ts">
 import { defineComponent, h, TransitionGroup } from 'vue';
-import { faAngleUp, faAngleDown } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
 export default defineComponent({
 	props: {
@@ -73,17 +71,15 @@ export default defineComponent({
 					class: 'date'
 				}, [
 					h('span', [
-						h(FontAwesomeIcon, {
-							class: 'icon',
-							icon: faAngleUp,
+						h('i', {
+							class: 'fas fa-angle-up icon',
 						}),
 						this.getDateText(item.createdAt)
 					]),
 					h('span', [
 						this.getDateText(this.items[i + 1].createdAt),
-						h(FontAwesomeIcon, {
-							class: 'icon',
-							icon: faAngleDown,
+						h('i', {
+							class: 'fas fa-angle-down icon',
 						})
 					])
 				]));
diff --git a/src/client/components/dialog.vue b/src/client/components/dialog.vue
index ef30715343..83ea40922c 100644
--- a/src/client/components/dialog.vue
+++ b/src/client/components/dialog.vue
@@ -2,15 +2,15 @@
 <MkModal ref="modal" @click="done(true)" @closed="$emit('closed')">
 	<div class="mk-dialog">
 		<div class="icon" v-if="icon">
-			<Fa :icon="icon"/>
+			<i :class="icon"></i>
 		</div>
 		<div class="icon" v-else-if="!input && !select" :class="type">
-			<Fa :icon="faCheck" v-if="type === 'success'"/>
-			<Fa :icon="faTimesCircle" v-if="type === 'error'"/>
-			<Fa :icon="faExclamationTriangle" v-if="type === 'warning'"/>
-			<Fa :icon="faInfoCircle" v-if="type === 'info'"/>
-			<Fa :icon="faQuestionCircle" v-if="type === 'question'"/>
-			<Fa :icon="faSpinner" pulse v-if="type === 'waiting'"/>
+			<i v-if="type === 'success'" class="fas fa-check"></i>
+			<i v-else-if="type === 'error'" class="fas fa-times-circle"></i>
+			<i v-else-if="type === 'warning'" class="fas fa-exclamation-triangle"></i>
+			<i v-else-if="type === 'info'" class="fas fa-information-circle"></i>
+			<i v-else-if="type === 'question'" class="fas fa-question-circle"></i>
+			<i v-else-if="type === 'waiting'" class="fas fa-spinner fa-pulse"></i>
 		</div>
 		<header v-if="title"><Mfm :text="title"/></header>
 		<div class="body" v-if="text"><Mfm :text="text"/></div>
@@ -38,8 +38,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faSpinner, faInfoCircle, faExclamationTriangle, faCheck } from '@fortawesome/free-solid-svg-icons';
-import { faTimesCircle, faQuestionCircle } from '@fortawesome/free-regular-svg-icons';
 import MkModal from '@client/components/ui/modal.vue';
 import MkButton from '@client/components/ui/button.vue';
 import MkInput from '@client/components/ui/input.vue';
@@ -99,7 +97,6 @@ export default defineComponent({
 		return {
 			inputValue: this.input && this.input.default ? this.input.default : null,
 			selectedValue: this.select ? this.select.default ? this.select.default : this.select.items ? this.select.items[0].value : this.select.groupedItems[0].items[0].value : null,
-			faTimesCircle, faQuestionCircle, faSpinner, faInfoCircle, faExclamationTriangle, faCheck
 		};
 	},
 
diff --git a/src/client/components/drive-file-thumbnail.vue b/src/client/components/drive-file-thumbnail.vue
index aadf22ed77..2cb1d98618 100644
--- a/src/client/components/drive-file-thumbnail.vue
+++ b/src/client/components/drive-file-thumbnail.vue
@@ -1,31 +1,21 @@
 <template>
 <div class="zdjebgpv" ref="thumbnail">
 	<ImgWithBlurhash v-if="isThumbnailAvailable" :hash="file.blurhash" :src="file.thumbnailUrl" :alt="file.name" :title="file.name" :style="`object-fit: ${ fit }`"/>
-	<Fa :icon="faFileImage" class="icon" v-else-if="is === 'image'"/>
-	<Fa :icon="faFileVideo" class="icon" v-else-if="is === 'video'"/>
-	<Fa :icon="faMusic" class="icon" v-else-if="is === 'audio' || is === 'midi'"/>
-	<Fa :icon="faFileCsv" class="icon" v-else-if="is === 'csv'"/>
-	<Fa :icon="faFilePdf" class="icon" v-else-if="is === 'pdf'"/>
-	<Fa :icon="faFileAlt" class="icon" v-else-if="is === 'textfile'"/>
-	<Fa :icon="faFileArchive" class="icon" v-else-if="is === 'archive'"/>
-	<Fa :icon="faFile" class="icon" v-else/>
-	<Fa :icon="faFilm" class="icon-sub" v-if="isThumbnailAvailable && is === 'video'"/>
+	<i v-else-if="is === 'image'" class="fas fa-file-image icon"></i>
+	<i v-else-if="is === 'video'" class="fas fa-file-video icon"></i>
+	<i v-else-if="is === 'audio' || is === 'midi'" class="fas fa-music icon"></i>
+	<i v-else-if="is === 'csv'" class="fas fa-file-csv icon"></i>
+	<i v-else-if="is === 'pdf'" class="fas fa-file-pdf icon"></i>
+	<i v-else-if="is === 'textfile'" class="fas fa-file-alt icon"></i>
+	<i v-else-if="is === 'archive'" class="fas fa-file-archive icon"></i>
+	<i v-else class="fas fa-file icon"></i>
+
+	<i v-if="isThumbnailAvailable && is === 'video'" class="fas fa-film icon-sub"></i>
 </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import {
-	faFile,
-	faFileAlt,
-	faFileImage,
-	faMusic,
-	faFileVideo,
-	faFileCsv,
-	faFilePdf,
-	faFileArchive,
-	faFilm
-	} from '@fortawesome/free-solid-svg-icons';
 import ImgWithBlurhash from '@client/components/img-with-blurhash.vue';
 import { ColdDeviceStorage } from '@client/store';
 
@@ -49,15 +39,6 @@ export default defineComponent({
 			isContextmenuShowing: false,
 			isDragging: false,
 
-			faFile,
-			faFileAlt,
-			faFileImage,
-			faMusic,
-			faFileVideo,
-			faFileCsv,
-			faFilePdf,
-			faFileArchive,
-			faFilm
 		};
 	},
 	computed: {
diff --git a/src/client/components/drive.file.vue b/src/client/components/drive.file.vue
index fb8b50d25a..293465e428 100644
--- a/src/client/components/drive.file.vue
+++ b/src/client/components/drive.file.vue
@@ -32,8 +32,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faEye, faEyeSlash } from '@fortawesome/free-regular-svg-icons';
-import { faDownload, faLink, faICursor, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
 import copyToClipboard from '@client/scripts/copy-to-clipboard';
 import MkDriveFileThumbnail from './drive-file-thumbnail.vue';
 import bytes from '@client/filters/bytes';
@@ -87,22 +85,22 @@ export default defineComponent({
 				action: this.rename
 			}, {
 				text: this.file.isSensitive ? this.$ts.unmarkAsSensitive : this.$ts.markAsSensitive,
-				icon: this.file.isSensitive ? faEye : faEyeSlash,
+				icon: this.file.isSensitive ? 'fas fa-eye' : 'fas fa-eye-slash',
 				action: this.toggleSensitive
 			}, null, {
 				text: this.$ts.copyUrl,
-				icon: faLink,
+				icon: 'fas fa-link',
 				action: this.copyUrl
 			}, {
 				type: 'a',
 				href: this.file.url,
 				target: '_blank',
 				text: this.$ts.download,
-				icon: faDownload,
+				icon: 'fas fa-download',
 				download: this.file.name
 			}, null, {
 				text: this.$ts.delete,
-				icon: faTrashAlt,
+				icon: 'fas fa-trash-alt',
 				danger: true,
 				action: this.deleteFile
 			}];
diff --git a/src/client/components/drive.folder.vue b/src/client/components/drive.folder.vue
index 2822c85680..6ddd392527 100644
--- a/src/client/components/drive.folder.vue
+++ b/src/client/components/drive.folder.vue
@@ -15,8 +15,8 @@
 	:title="title"
 >
 	<p class="name">
-		<template v-if="hover"><Fa :icon="faFolderOpen" fixed-width/></template>
-		<template v-if="!hover"><Fa :icon="faFolder" fixed-width/></template>
+		<template v-if="hover"><i class="fas fa-folder-open fa-fw"></i></template>
+		<template v-if="!hover"><i class="fas fa-folder fa-fw"></i></template>
 		{{ folder.name }}
 	</p>
 	<p class="upload" v-if="$store.state.uploadFolder == folder.id">
@@ -28,9 +28,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faFolder, faFolderOpen, faTrashAlt, faWindowRestore } from '@fortawesome/free-regular-svg-icons';
 import * as os from '@client/os';
-import { faICursor } from '@fortawesome/free-solid-svg-icons';
 
 export default defineComponent({
 	props: {
@@ -57,7 +55,6 @@ export default defineComponent({
 			hover: false,
 			draghover: false,
 			isDragging: false,
-			faFolder, faFolderOpen
 		};
 	},
 
@@ -241,7 +238,7 @@ export default defineComponent({
 		onContextmenu(e) {
 			os.contextMenu([{
 				text: this.$ts.openInWindow,
-				icon: faWindowRestore,
+				icon: 'fas fa-window-restore',
 				action: () => {
 					os.popup(import('./drive-window.vue'), {
 						initialFolder: this.folder
@@ -254,7 +251,7 @@ export default defineComponent({
 				action: this.rename
 			}, null, {
 				text: this.$ts.delete,
-				icon: faTrashAlt,
+				icon: 'fas fa-trash-alt',
 				danger: true,
 				action: this.deleteFolder
 			}], e);
@@ -312,7 +309,7 @@ export default defineComponent({
 		font-size: 0.9em;
 		color: var(--desktopDriveFolderFg);
 
-		> [data-icon] {
+		> i {
 			margin-right: 4px;
 			margin-left: 2px;
 			text-align: left;
diff --git a/src/client/components/drive.nav-folder.vue b/src/client/components/drive.nav-folder.vue
index 89a267b19f..913a1b5f92 100644
--- a/src/client/components/drive.nav-folder.vue
+++ b/src/client/components/drive.nav-folder.vue
@@ -7,14 +7,13 @@
 	@dragleave="onDragleave"
 	@drop.stop="onDrop"
 >
-	<i v-if="folder == null"><Fa :icon="faCloud"/></i>
+	<i v-if="folder == null" class="fas fa-cloud"></i>
 	<span>{{ folder == null ? $ts.drive : folder.name }}</span>
 </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faCloud } from '@fortawesome/free-solid-svg-icons';
 import * as os from '@client/os';
 
 export default defineComponent({
@@ -29,7 +28,6 @@ export default defineComponent({
 		return {
 			hover: false,
 			draghover: false,
-			faCloud
 		};
 	},
 
diff --git a/src/client/components/drive.vue b/src/client/components/drive.vue
index 103ae9c11e..bd5bd8008b 100644
--- a/src/client/components/drive.vue
+++ b/src/client/components/drive.vue
@@ -4,10 +4,10 @@
 		<div class="path" @contextmenu.prevent.stop="() => {}">
 			<XNavFolder :class="{ current: folder == null }"/>
 			<template v-for="f in hierarchyFolders">
-				<span class="separator"><Fa :icon="faAngleRight"/></span>
+				<span class="separator"><i class="fas fa-angle-right"></i></span>
 				<XNavFolder :folder="f"/>
 			</template>
-			<span class="separator" v-if="folder != null"><Fa :icon="faAngleRight"/></span>
+			<span class="separator" v-if="folder != null"><i class="fas fa-angle-right"></i></span>
 			<span class="folder current" v-if="folder != null">{{ folder.name }}</span>
 		</div>
 	</nav>
@@ -47,13 +47,11 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faAngleRight, faFolderPlus, faICursor, faLink, faUpload } from '@fortawesome/free-solid-svg-icons';
 import XNavFolder from './drive.nav-folder.vue';
 import XFolder from './drive.folder.vue';
 import XFile from './drive.file.vue';
 import MkButton from './ui/button.vue';
 import * as os from '@client/os';
-import { faTrashAlt } from '@fortawesome/free-regular-svg-icons';
 
 export default defineComponent({
 	components: {
@@ -125,7 +123,6 @@ export default defineComponent({
 			),
 			moreFilesElement: null as Element,
 
-			faAngleRight
 		};
 	},
 
@@ -606,11 +603,11 @@ export default defineComponent({
 				type: 'label'
 			}, {
 				text: this.$ts.upload,
-				icon: faUpload,
+				icon: 'fas fa-upload',
 				action: () => { this.selectLocalFile(); }
 			}, {
 				text: this.$ts.fromUrl,
-				icon: faLink,
+				icon: 'fas fa-link',
 				action: () => { this.urlUpload(); }
 			}, null, {
 				text: this.folder ? this.folder.name : this.$ts.drive,
@@ -621,11 +618,11 @@ export default defineComponent({
 				action: () => { this.renameFolder(this.folder); }
 			} : undefined, this.folder ? {
 				text: this.$ts.deleteFolder,
-				icon: faTrashAlt,
+				icon: 'fas fa-trash-alt',
 				action: () => { this.deleteFolder(this.folder); }
 			} : undefined, {
 				text: this.$ts.createFolder,
-				icon: faFolderPlus,
+				icon: 'fas fa-folder-plus',
 				action: () => { this.createFolder(); }
 			}];
 		},
@@ -693,7 +690,7 @@ export default defineComponent({
 					opacity: 0.5;
 					cursor: default;
 
-					> [data-icon] {
+					> i {
 						margin: 0;
 					}
 				}
diff --git a/src/client/components/emoji-picker.section.vue b/src/client/components/emoji-picker.section.vue
index 944c507bdc..0ea3761429 100644
--- a/src/client/components/emoji-picker.section.vue
+++ b/src/client/components/emoji-picker.section.vue
@@ -1,7 +1,7 @@
 <template>
 <section>
 	<header class="_acrylic" @click="shown = !shown">
-		<Fa :icon="shown ? faChevronDown : faChevronUp" :key="shown" fixed-width class="toggle"/> <slot></slot> ({{ emojis.length }})
+		<i class="toggle fa-fw" :class="shown ? 'fas fa-chevron-down' : 'fas fa-chevron-up'"></i> <slot></slot> ({{ emojis.length }})
 	</header>
 	<div v-if="shown">
 		<button v-for="emoji in emojis"
@@ -17,7 +17,6 @@
 
 <script lang="ts">
 import { defineComponent, markRaw } from 'vue';
-import { faChevronUp, faChevronDown } from '@fortawesome/free-solid-svg-icons';
 import { getStaticImageUrl } from '@client/scripts/get-static-image-url';
 
 export default defineComponent({
@@ -36,7 +35,6 @@ export default defineComponent({
 		return {
 			getStaticImageUrl,
 			shown: this.initialShown,
-			faChevronUp, faChevronDown,
 		};
 	},
 
diff --git a/src/client/components/emoji-picker.vue b/src/client/components/emoji-picker.vue
index a212c15049..9bec319af2 100644
--- a/src/client/components/emoji-picker.vue
+++ b/src/client/components/emoji-picker.vue
@@ -42,7 +42,7 @@
 			</section>
 
 			<section>
-				<header class="_acrylic"><Fa :icon="faClock" fixed-width/> {{ $ts.recentUsed }}</header>
+				<header class="_acrylic"><i class="far fa-clock fa-fw"></i> {{ $ts.recentUsed }}</header>
 				<div>
 					<button v-for="emoji in $store.state.recentlyUsedEmojis"
 						class="_button"
@@ -64,10 +64,10 @@
 		</div>
 	</div>
 	<div class="tabs">
-		<button class="_button tab" :class="{ active: tab === 'index' }" @click="tab = 'index'"><Fa :icon="faAsterisk" fixed-width/></button>
-		<button class="_button tab" :class="{ active: tab === 'custom' }" @click="tab = 'custom'"><Fa :icon="faLaugh" fixed-width/></button>
-		<button class="_button tab" :class="{ active: tab === 'unicode' }" @click="tab = 'unicode'"><Fa :icon="faLeaf" fixed-width/></button>
-		<button class="_button tab" :class="{ active: tab === 'tags' }" @click="tab = 'tags'"><Fa :icon="faHashtag" fixed-width/></button>
+		<button class="_button tab" :class="{ active: tab === 'index' }" @click="tab = 'index'"><i class="fas fa-asterisk fa-fw"></i></button>
+		<button class="_button tab" :class="{ active: tab === 'custom' }" @click="tab = 'custom'"><i class="fas fa-laugh fa-fw"></i></button>
+		<button class="_button tab" :class="{ active: tab === 'unicode' }" @click="tab = 'unicode'"><i class="fas fa-leaf fa-fw"></i></button>
+		<button class="_button tab" :class="{ active: tab === 'tags' }" @click="tab = 'tags'"><i class="fas fa-hashtag fa-fw"></i></button>
 	</div>
 </div>
 </template>
@@ -76,8 +76,6 @@
 import { defineComponent, markRaw } from 'vue';
 import { emojilist } from '@/misc/emojilist';
 import { getStaticImageUrl } from '@client/scripts/get-static-image-url';
-import { faAsterisk, faLeaf, faUtensils, faFutbol, faCity, faDice, faGlobe, faClock, faUser, faChevronDown, faShapes, faBicycle, faHashtag } from '@fortawesome/free-solid-svg-icons';
-import { faHeart, faFlag, faLaugh } from '@fortawesome/free-regular-svg-icons';
 import Particle from '@client/components/particle.vue';
 import * as os from '@client/os';
 import { isDeviceTouch } from '@client/scripts/is-device-touch';
@@ -117,7 +115,6 @@ export default defineComponent({
 			searchResultUnicode: [],
 			tab: 'index',
 			categories: ['face', 'people', 'animals_and_nature', 'food_and_drink', 'activity', 'travel_and_places', 'objects', 'symbols', 'flags'],
-			faGlobe, faClock, faChevronDown, faAsterisk, faLaugh, faUtensils, faLeaf, faShapes, faBicycle, faHashtag,
 		};
 	},
 
diff --git a/src/client/components/file-type-icon.vue b/src/client/components/file-type-icon.vue
index 2da9ba0cbd..95200b98c2 100644
--- a/src/client/components/file-type-icon.vue
+++ b/src/client/components/file-type-icon.vue
@@ -1,12 +1,11 @@
 <template>
 <span class="mk-file-type-icon">
-	<template v-if="kind == 'image'"><Fa :icon="faFileImage"/></template>
+	<template v-if="kind == 'image'"><i class="fas fa-file-image"></i></template>
 </span>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faFileImage } from '@fortawesome/free-solid-svg-icons';
 import * as os from '@client/os';
 
 export default defineComponent({
@@ -18,7 +17,6 @@ export default defineComponent({
 	},
 	data() {
 		return {
-			faFileImage
 		};
 	},
 	computed: {
diff --git a/src/client/components/follow-button.vue b/src/client/components/follow-button.vue
index d2dc9223bd..7199183c66 100644
--- a/src/client/components/follow-button.vue
+++ b/src/client/components/follow-button.vue
@@ -6,30 +6,29 @@
 >
 	<template v-if="!wait">
 		<template v-if="hasPendingFollowRequestFromYou && user.isLocked">
-			<span v-if="full">{{ $ts.followRequestPending }}</span><Fa :icon="faHourglassHalf"/>
+			<span v-if="full">{{ $ts.followRequestPending }}</span><i class="fas fa-hourglass-half"></i>
 		</template>
 		<template v-else-if="hasPendingFollowRequestFromYou && !user.isLocked"> <!-- つまりリモートフォローの場合。 -->
-			<span v-if="full">{{ $ts.processing }}</span><Fa :icon="faSpinner" pulse/>
+			<span v-if="full">{{ $ts.processing }}</span><i class="fas fa-spinner fa-pulse"></i>
 		</template>
 		<template v-else-if="isFollowing">
-			<span v-if="full">{{ $ts.unfollow }}</span><Fa :icon="faMinus"/>
+			<span v-if="full">{{ $ts.unfollow }}</span><i class="fas fa-minus"></i>
 		</template>
 		<template v-else-if="!isFollowing && user.isLocked">
-			<span v-if="full">{{ $ts.followRequest }}</span><Fa :icon="faPlus"/>
+			<span v-if="full">{{ $ts.followRequest }}</span><i class="fas fa-plus"></i>
 		</template>
 		<template v-else-if="!isFollowing && !user.isLocked">
-			<span v-if="full">{{ $ts.follow }}</span><Fa :icon="faPlus"/>
+			<span v-if="full">{{ $ts.follow }}</span><i class="fas fa-plus"></i>
 		</template>
 	</template>
 	<template v-else>
-		<span v-if="full">{{ $ts.processing }}</span><Fa :icon="faSpinner" pulse fixed-width/>
+		<span v-if="full">{{ $ts.processing }}</span><i class="fas fa-spinner fa-pulse fa-fw"></i>
 	</template>
 </button>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faSpinner, faPlus, faMinus, faHourglassHalf } from '@fortawesome/free-solid-svg-icons';
 import * as os from '@client/os';
 
 export default defineComponent({
@@ -56,7 +55,6 @@ export default defineComponent({
 			hasPendingFollowRequestFromYou: this.user.hasPendingFollowRequestFromYou,
 			wait: false,
 			connection: null,
-			faSpinner, faPlus, faMinus, faHourglassHalf
 		};
 	},
 
diff --git a/src/client/components/form/info.vue b/src/client/components/form/info.vue
index a9224c7e65..9fdcbdca62 100644
--- a/src/client/components/form/info.vue
+++ b/src/client/components/form/info.vue
@@ -1,8 +1,8 @@
 <template>
 <div class="fzenkabp _formItem">
 	<div class="_formPanel" :class="{ warn }">
-		<i v-if="warn"><Fa :icon="faExclamationTriangle"/></i>
-		<i v-else><Fa :icon="faInfoCircle"/></i>
+		<i v-if="warn" class="fas fa-exclamation-triangle"></i>
+		<i v-else class="fas fa-info-circle"></i>
 		<slot></slot>
 	</div>
 </div>
@@ -10,7 +10,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faInfoCircle, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
 
 export default defineComponent({
 	props: {
@@ -22,7 +21,6 @@ export default defineComponent({
 	},
 	data() {
 		return {
-			faInfoCircle, faExclamationTriangle
 		};
 	}
 });
diff --git a/src/client/components/form/input.vue b/src/client/components/form/input.vue
index c0fa3e716e..942ac4dfd2 100644
--- a/src/client/components/form/input.vue
+++ b/src/client/components/form/input.vue
@@ -30,13 +30,12 @@
 	</div>
 	<template #caption><slot name="desc"></slot></template>
 
-	<FormButton v-if="manualSave && changed" @click="updated" primary><Fa :icon="faSave"/> {{ $ts.save }}</FormButton>
+	<FormButton v-if="manualSave && changed" @click="updated" primary><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
 </FormGroup>
 </template>
 
 <script lang="ts">
 import { defineComponent, onMounted, onUnmounted, nextTick, ref, watch, computed, toRefs } from 'vue';
-import { faExclamationCircle, faSave } from '@fortawesome/free-solid-svg-icons';
 import './form.scss';
 import FormButton from './button.vue';
 import FormGroup from './group.vue';
@@ -191,7 +190,6 @@ export default defineComponent({
 			onInput,
 			onKeydown,
 			updated,
-			faExclamationCircle, faSave,
 		};
 	},
 });
diff --git a/src/client/components/form/link.vue b/src/client/components/form/link.vue
index af36bcf22c..e1d13c6431 100644
--- a/src/client/components/form/link.vue
+++ b/src/client/components/form/link.vue
@@ -5,7 +5,7 @@
 		<span class="text"><slot></slot></span>
 		<span class="right">
 			<span class="text"><slot name="suffix"></slot></span>
-			<Fa :icon="faExternalLinkAlt" class="icon"/>
+			<i class="fas fa-external-link-alt icon"></i>
 		</span>
 	</a>
 	<MkA class="main _button _formPanel _formClickable" :class="{ active }" :to="to" :behavior="behavior" v-else>
@@ -13,7 +13,7 @@
 		<span class="text"><slot></slot></span>
 		<span class="right">
 			<span class="text"><slot name="suffix"></slot></span>
-			<Fa :icon="faChevronRight" class="icon"/>
+			<i class="fas fa-chevron-right icon"></i>
 		</span>
 	</MkA>
 </div>
@@ -21,7 +21,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faChevronRight, faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
 import './form.scss';
 
 export default defineComponent({
@@ -45,7 +44,6 @@ export default defineComponent({
 	},
 	data() {
 		return {
-			faChevronRight, faExternalLinkAlt
 		};
 	}
 });
diff --git a/src/client/components/form/select.vue b/src/client/components/form/select.vue
index 01f28587dc..1c5a473451 100644
--- a/src/client/components/form/select.vue
+++ b/src/client/components/form/select.vue
@@ -14,7 +14,7 @@
 			<slot></slot>
 		</select>
 		<div class="suffix">
-			<Fa :icon="faChevronDown"/>
+			<i class="fas fa-chevron-down"></i>
 		</div>
 	</div>
 	<div class="_formCaption"><slot name="caption"></slot></div>
@@ -23,7 +23,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
 import './form.scss';
 
 export default defineComponent({
@@ -47,7 +46,6 @@ export default defineComponent({
 	},
 	data() {
 		return {
-			faChevronDown,
 		};
 	},
 	computed: {
diff --git a/src/client/components/form/textarea.vue b/src/client/components/form/textarea.vue
index 135e16c259..8f42581a9b 100644
--- a/src/client/components/form/textarea.vue
+++ b/src/client/components/form/textarea.vue
@@ -18,13 +18,12 @@
 	</div>
 	<template #caption><slot name="desc"></slot></template>
 
-	<FormButton v-if="manualSave && changed" @click="updated" primary><Fa :icon="faSave"/> {{ $ts.save }}</FormButton>
+	<FormButton v-if="manualSave && changed" @click="updated" primary><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
 </FormGroup>
 </template>
 
 <script lang="ts">
 import { defineComponent, ref, toRefs, watch } from 'vue';
-import { faSave } from '@fortawesome/free-solid-svg-icons';
 import './form.scss';
 import FormButton from './button.vue';
 import FormGroup from './group.vue';
@@ -106,7 +105,6 @@ export default defineComponent({
 			changed,
 			focus,
 			onInput,
-			faSave,
 		};
 	}
 });
diff --git a/src/client/components/global/a.vue b/src/client/components/global/a.vue
index 7ad62a7310..952dfb1841 100644
--- a/src/client/components/global/a.vue
+++ b/src/client/components/global/a.vue
@@ -6,7 +6,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faExpandAlt, faColumns, faExternalLinkAlt, faLink, faWindowMaximize } from '@fortawesome/free-solid-svg-icons';
 import * as os from '@client/os';
 import copyToClipboard from '@client/scripts/copy-to-clipboard';
 import { router } from '@client/router';
@@ -57,31 +56,31 @@ export default defineComponent({
 				type: 'label',
 				text: this.to,
 			}, {
-				icon: faWindowMaximize,
+				icon: 'fas fa-window-maximize',
 				text: this.$ts.openInWindow,
 				action: () => {
 					os.pageWindow(this.to);
 				}
 			}, this.sideViewHook ? {
-				icon: faColumns,
+				icon: 'fas fa-columns',
 				text: this.$ts.openInSideView,
 				action: () => {
 					this.sideViewHook(this.to);
 				}
 			} : undefined, {
-				icon: faExpandAlt,
+				icon: 'fas fa-expand-alt',
 				text: this.$ts.showInPage,
 				action: () => {
 					this.$router.push(this.to);
 				}
 			}, null, {
-				icon: faExternalLinkAlt,
+				icon: 'fas fa-external-link-alt',
 				text: this.$ts.openInNewTab,
 				action: () => {
 					window.open(this.to, '_blank');
 				}
 			}, {
-				icon: faLink,
+				icon: 'fas fa-link',
 				text: this.$ts.copyLink,
 				action: () => {
 					copyToClipboard(`${url}${this.to}`);
diff --git a/src/client/components/global/error.vue b/src/client/components/global/error.vue
index af989b1c57..05a508a653 100644
--- a/src/client/components/global/error.vue
+++ b/src/client/components/global/error.vue
@@ -2,7 +2,7 @@
 <transition :name="$store.state.animation ? 'zoom' : ''" appear>
 	<div class="mjndxjcg">
 		<img src="https://xn--931a.moe/assets/error.jpg" class="_ghost"/>
-		<p><Fa :icon="faExclamationTriangle"/> {{ $ts.somethingHappened }}</p>
+		<p><i class="fas fa-exclamation-triangle"></i> {{ $ts.somethingHappened }}</p>
 		<MkButton @click="() => $emit('retry')" class="button">{{ $ts.retry }}</MkButton>
 	</div>
 </transition>
@@ -10,7 +10,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
 import MkButton from '@client/components/ui/button.vue';
 
 export default defineComponent({
@@ -19,7 +18,6 @@ export default defineComponent({
 	},
 	data() {
 		return {
-			faExclamationTriangle
 		};
 	},
 });
diff --git a/src/client/components/global/url.vue b/src/client/components/global/url.vue
index f68a3c00be..e633a57bd8 100644
--- a/src/client/components/global/url.vue
+++ b/src/client/components/global/url.vue
@@ -15,13 +15,12 @@
 	<span class="pathname" v-if="pathname != ''">{{ self ? pathname.substr(1) : pathname }}</span>
 	<span class="query">{{ query }}</span>
 	<span class="hash">{{ hash }}</span>
-	<Fa :icon="faExternalLinkSquareAlt" v-if="target === '_blank'" class="icon"/>
+	<i v-if="target === '_blank'" class="fas fa-external-link-square-alt icon"></i>
 </component>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faExternalLinkSquareAlt } from '@fortawesome/free-solid-svg-icons';
 import { toUnicode as decodePunycode } from 'punycode/';
 import { url as local } from '@client/config';
 import { isDeviceTouch } from '@client/scripts/is-device-touch';
@@ -55,7 +54,6 @@ export default defineComponent({
 			hideTimer: null,
 			checkTimer: null,
 			close: null,
-			faExternalLinkSquareAlt
 		};
 	},
 	created() {
diff --git a/src/client/components/google.vue b/src/client/components/google.vue
index 20dc1f825a..6d8ae0b5bf 100644
--- a/src/client/components/google.vue
+++ b/src/client/components/google.vue
@@ -1,13 +1,12 @@
 <template>
 <div class="mk-google">
 	<input type="search" v-model="query" :placeholder="q">
-	<button @click="search"><Fa :icon="faSearch"/> {{ $ts.search }}</button>
+	<button @click="search"><i class="fas fa-search"></i> {{ $ts.search }}</button>
 </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faSearch } from '@fortawesome/free-solid-svg-icons';
 import * as os from '@client/os';
 
 export default defineComponent({
@@ -15,7 +14,6 @@ export default defineComponent({
 	data() {
 		return {
 			query: null,
-			faSearch
 		};
 	},
 	mounted() {
diff --git a/src/client/components/instance-stats.vue b/src/client/components/instance-stats.vue
index 75abefc2fe..aa01f1c806 100644
--- a/src/client/components/instance-stats.vue
+++ b/src/client/components/instance-stats.vue
@@ -3,7 +3,7 @@
 	<div class="stats" v-if="info">
 		<div class="_panel">
 			<div>
-				<b><Fa :icon="faUser"/>{{ $ts.users }}</b>
+				<b><i class="fas fa-user"></i>{{ $ts.users }}</b>
 				<small>{{ $ts.local }}</small>
 			</div>
 			<div>
@@ -23,7 +23,7 @@
 		</div>
 		<div class="_panel">
 			<div>
-				<b><Fa :icon="faUser"/>{{ $ts.users }}</b>
+				<b><i class="fas fa-user"></i>{{ $ts.users }}</b>
 				<small>{{ $ts.remote }}</small>
 			</div>
 			<div>
@@ -43,7 +43,7 @@
 		</div>
 		<div class="_panel">
 			<div>
-				<b><Fa :icon="faPencilAlt"/>{{ $ts.notes }}</b>
+				<b><i class="fas fa-pencil-alt"></i>{{ $ts.notes }}</b>
 				<small>{{ $ts.local }}</small>
 			</div>
 			<div>
@@ -63,7 +63,7 @@
 		</div>
 		<div class="_panel">
 			<div>
-				<b><Fa :icon="faPencilAlt"/>{{ $ts.notes }}</b>
+				<b><i class="fas fa-pencil-alt"></i>{{ $ts.notes }}</b>
 				<small>{{ $ts.remote }}</small>
 			</div>
 			<div>
@@ -84,7 +84,7 @@
 	</div>
 
 	<section class="_card">
-		<div class="_title" style="position: relative;"><Fa :icon="faChartBar"/> {{ $ts.statistics }}<button @click="fetchChart" class="_button" style="position: absolute; right: 0; bottom: 0; top: 0; padding: inherit;"><Fa :icon="faSync"/></button></div>
+		<div class="_title" style="position: relative;"><i class="fas fa-chart-bar"></i> {{ $ts.statistics }}<button @click="fetchChart" class="_button" style="position: absolute; right: 0; bottom: 0; top: 0; padding: inherit;"><i class="fas fa-sync"></i></button></div>
 		<div class="_content" style="margin-top: -8px;">
 			<div class="selects" style="display: flex;">
 				<MkSelect v-model:value="chartSrc" style="margin: 0; flex: 1;">
@@ -123,7 +123,6 @@
 
 <script lang="ts">
 import { defineComponent, markRaw } from 'vue';
-import { faChartBar, faUser, faPencilAlt, faSync } from '@fortawesome/free-solid-svg-icons';
 import Chart from 'chart.js';
 import MkSelect from './ui/select.vue';
 import number from '@client/filters/number';
@@ -173,7 +172,6 @@ export default defineComponent({
 			chartInstance: null,
 			chartSrc: 'notes',
 			chartSpan: 'hour',
-			faChartBar, faUser, faPencilAlt, faSync
 		}
 	},
 
@@ -666,7 +664,7 @@ export default defineComponent({
 					> b {
 						display: block;
 
-						> [data-icon] {
+						> i {
 							width: 16px;
 							margin-right: 8px;
 						}
diff --git a/src/client/components/launch-pad.vue b/src/client/components/launch-pad.vue
index 7610b44eb5..e3d24c70f2 100644
--- a/src/client/components/launch-pad.vue
+++ b/src/client/components/launch-pad.vue
@@ -4,28 +4,28 @@
 		<div class="main">
 			<template v-for="item in items">
 				<button v-if="item.action" class="_button" @click="$event => { item.action($event); close(); }">
-					<Fa :icon="item.icon" class="icon"/>
+					<i class="icon" :class="item.icon"></i>
 					<div class="text">{{ item.text }}</div>
-					<i v-if="item.indicate"><Fa :icon="faCircle"/></i>
+					<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
 				</button>
 				<MkA v-else :to="item.to" @click.passive="close()">
-					<Fa :icon="item.icon" class="icon"/>
+					<i class="icon" :class="item.icon"></i>
 					<div class="text">{{ item.text }}</div>
-					<i v-if="item.indicate"><Fa :icon="faCircle"/></i>
+					<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
 				</MkA>
 			</template>
 		</div>
 		<div class="sub">
 			<MkA to="/docs" @click.passive="close()">
-				<Fa :icon="faQuestionCircle" class="icon"/>
+				<i class="fas fa-question-circle icon"></i>
 				<div class="text">{{ $ts.help }}</div>
 			</MkA>
 			<MkA to="/about" @click.passive="close()">
-				<Fa :icon="faInfoCircle" class="icon"/>
+				<i class="fas fa-info-circle icon"></i>
 				<div class="text">{{ $t('aboutX', { x: instanceName }) }}</div>
 			</MkA>
 			<MkA to="/about-misskey" @click.passive="close()">
-				<Fa :icon="faInfoCircle" class="icon"/>
+				<i class="fas fa-info-circle icon"></i>
 				<div class="text">{{ $ts.aboutMisskey }}</div>
 			</MkA>
 		</div>
@@ -35,7 +35,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faQuestionCircle, faInfoCircle, faCircle } from '@fortawesome/free-solid-svg-icons';
 import MkModal from '@client/components/ui/modal.vue';
 import { sidebarDef } from '@client/sidebar';
 import { instanceName } from '@client/config';
@@ -52,7 +51,6 @@ export default defineComponent({
 			menuDef: sidebarDef,
 			items: [],
 			instanceName,
-			faQuestionCircle, faInfoCircle, faCircle,
 		};
 	},
 
@@ -127,7 +125,7 @@ export default defineComponent({
 				line-height: 1.5em;
 			}
 
-			> i {
+			> .indicator {
 				position: absolute;
 				top: 32px;
 				left: 32px;
diff --git a/src/client/components/link.vue b/src/client/components/link.vue
index cc7db8c2f5..9712c778a9 100644
--- a/src/client/components/link.vue
+++ b/src/client/components/link.vue
@@ -5,13 +5,12 @@
 	:title="url"
 >
 	<slot></slot>
-	<Fa :icon="faExternalLinkSquareAlt" v-if="target === '_blank'" class="icon"/>
+	<i v-if="target === '_blank'" class="fas fa-external-link-square-alt icon"></i>
 </component>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faExternalLinkSquareAlt } from '@fortawesome/free-solid-svg-icons';
 import { url as local } from '@client/config';
 import { isDeviceTouch } from '@client/scripts/is-device-touch';
 import * as os from '@client/os';
@@ -38,7 +37,6 @@ export default defineComponent({
 			hideTimer: null,
 			checkTimer: null,
 			close: null,
-			faExternalLinkSquareAlt
 		};
 	},
 	methods: {
diff --git a/src/client/components/media-banner.vue b/src/client/components/media-banner.vue
index 29d7c727f6..34065557bf 100644
--- a/src/client/components/media-banner.vue
+++ b/src/client/components/media-banner.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="mk-media-banner">
 	<div class="sensitive" v-if="media.isSensitive && hide" @click="hide = false">
-		<span class="icon"><Fa :icon="faExclamationTriangle"/></span>
+		<span class="icon"><i class="fas fa-exclamation-triangle"></i></span>
 		<b>{{ $ts.sensitive }}</b>
 		<span>{{ $ts.clickToShow }}</span>
 	</div>
@@ -19,7 +19,7 @@
 		:title="media.name"
 		:download="media.name"
 	>
-		<span class="icon"><Fa icon="download"/></span>
+		<span class="icon"><i class="fas fa-download"></i></span>
 		<b>{{ media.name }}</b>
 	</a>
 </div>
@@ -27,7 +27,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
 import * as os from '@client/os';
 import { ColdDeviceStorage } from '@client/store';
 
@@ -41,7 +40,6 @@ export default defineComponent({
 	data() {
 		return {
 			hide: true,
-			faExclamationTriangle
 		};
 	},
 	mounted() {
diff --git a/src/client/components/media-image.vue b/src/client/components/media-image.vue
index 5760466138..0573b2592d 100644
--- a/src/client/components/media-image.vue
+++ b/src/client/components/media-image.vue
@@ -3,13 +3,13 @@
 	<ImgWithBlurhash class="bg" :hash="image.blurhash" :title="image.name"/>
 	<div class="text">
 		<div>
-			<b><Fa :icon="faExclamationTriangle"/> {{ $ts.sensitive }}</b>
+			<b><i class="fas fa-exclamation-triangle"></i> {{ $ts.sensitive }}</b>
 			<span>{{ $ts.clickToShow }}</span>
 		</div>
 	</div>
 </div>
 <div class="gqnyydlz" :style="{ background: color }" v-else>
-	<i><Fa :icon="faEyeSlash" @click="hide = true"/></i>
+	<i class="fas fa-eye-slash" @click="hide = true"></i>
 	<a
 		:href="image.url"
 		:title="image.name"
@@ -23,7 +23,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faExclamationTriangle, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
 import { getStaticImageUrl } from '@client/scripts/get-static-image-url';
 import { extractAvgColorFromBlurhash } from '@client/scripts/extract-avg-color-from-blurhash';
 import ImageViewer from './image-viewer.vue';
@@ -47,7 +46,6 @@ export default defineComponent({
 		return {
 			hide: true,
 			color: null,
-			faExclamationTriangle, faEyeSlash,
 		};
 	},
 	computed: {
diff --git a/src/client/components/media-video.vue b/src/client/components/media-video.vue
index b6f63cb65d..020b5e93a8 100644
--- a/src/client/components/media-video.vue
+++ b/src/client/components/media-video.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="icozogqfvdetwohsdglrbswgrejoxbdj" v-if="hide" @click="hide = false">
 	<div>
-		<b><Fa :icon="faExclamationTriangle"/> {{ $ts.sensitive }}</b>
+		<b><i class="fas fa-exclamation-triangle"></i> {{ $ts.sensitive }}</b>
 		<span>{{ $ts.clickToShow }}</span>
 	</div>
 </div>
@@ -18,13 +18,12 @@
 			:type="video.type"
 		>
 	</video>
-	<i><Fa :icon="faEyeSlash" @click="hide = true"/></i>
+	<i class="fas fa-eye-slash" @click="hide = true"></i>
 </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faExclamationTriangle, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
 import * as os from '@client/os';
 
 export default defineComponent({
@@ -37,8 +36,6 @@ export default defineComponent({
 	data() {
 		return {
 			hide: true,
-			faExclamationTriangle,
-			faEyeSlash
 		};
 	},
 	created() {
diff --git a/src/client/components/modal-page-window.vue b/src/client/components/modal-page-window.vue
index 474a67f985..a391a8de35 100644
--- a/src/client/components/modal-page-window.vue
+++ b/src/client/components/modal-page-window.vue
@@ -2,12 +2,12 @@
 <MkModal ref="modal" @click="$emit('click')" @closed="$emit('closed')">
 	<div class="hrmcaedk _popup _narrow_" :style="{ width: `${width}px`, height: (height ? `min(${height}px, 100%)` : '100%') }">
 		<div class="header">
-			<button class="_button" @click="back()" v-if="history.length > 0"><Fa :icon="faChevronLeft"/></button>
+			<button class="_button" @click="back()" v-if="history.length > 0"><i class="fas fa-chevron-left"></i></button>
 			<button class="_button" style="pointer-events: none;" v-else><!-- マージンのバランスを取るためのダミー --></button>
 			<span class="title">
 				<XHeader :info="pageInfo" :with-back="false"/>
 			</span>
-			<button class="_button" @click="$refs.modal.close()"><Fa :icon="faTimes"/></button>
+			<button class="_button" @click="$refs.modal.close()"><i class="fas fa-times"></i></button>
 		</div>
 		<div class="body _flat_">
 			<keep-alive>
@@ -20,7 +20,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faExternalLinkAlt, faExpandAlt, faLink, faChevronLeft, faColumns, faTimes } from '@fortawesome/free-solid-svg-icons';
 import MkModal from '@client/components/ui/modal.vue';
 import XHeader from '@client/ui/_common_/header.vue';
 import { popout } from '@client/scripts/popout';
@@ -76,7 +75,6 @@ export default defineComponent({
 			component: this.initialComponent,
 			props: this.initialProps,
 			history: [],
-			faChevronLeft, faTimes,
 		};
 	},
 
@@ -90,29 +88,29 @@ export default defineComponent({
 				type: 'label',
 				text: this.path,
 			}, {
-				icon: faExpandAlt,
+				icon: 'fas fa-expand-alt',
 				text: this.$ts.showInPage,
 				action: this.expand
 			}, this.sideViewHook ? {
-				icon: faColumns,
+				icon: 'fas fa-columns',
 				text: this.$ts.openInSideView,
 				action: () => {
 					this.sideViewHook(this.path);
 					this.$refs.window.close();
 				}
 			} : undefined, {
-				icon: faExternalLinkAlt,
+				icon: 'fas fa-external-link-alt',
 				text: this.$ts.popout,
 				action: this.popout
 			}, null, {
-				icon: faExternalLinkAlt,
+				icon: 'fas fa-external-link-alt',
 				text: this.$ts.openInNewTab,
 				action: () => {
 					window.open(this.url, '_blank');
 					this.$refs.window.close();
 				}
 			}, {
-				icon: faLink,
+				icon: 'fas fa-link',
 				text: this.$ts.copyLink,
 				action: () => {
 					copyToClipboard(this.url);
diff --git a/src/client/components/note-detailed.vue b/src/client/components/note-detailed.vue
index 50e76e5299..6040ad378f 100644
--- a/src/client/components/note-detailed.vue
+++ b/src/client/components/note-detailed.vue
@@ -12,7 +12,7 @@
 	<XSub :note="appearNote.reply" class="reply-to" v-if="appearNote.reply"/>
 	<div class="renote" v-if="isRenote">
 		<MkAvatar class="avatar" :user="note.user"/>
-		<Fa :icon="faRetweet"/>
+		<i class="fas fa-retweet"></i>
 		<I18n :src="$ts.renotedBy" tag="span">
 			<template #user>
 				<MkA class="name" :to="userPage(note.user)" v-user-preview="note.userId">
@@ -22,15 +22,15 @@
 		</I18n>
 		<div class="info">
 			<button class="_button time" @click="showRenoteMenu()" ref="renoteTime">
-				<Fa class="dropdownIcon" v-if="isMyRenote" :icon="faEllipsisH"/>
+				<i v-if="isMyRenote" class="fas fa-ellipsis-h dropdownIcon"></i>
 				<MkTime :time="note.createdAt"/>
 			</button>
 			<span class="visibility" v-if="note.visibility !== 'public'">
-				<Fa v-if="note.visibility === 'home'" :icon="faHome"/>
-				<Fa v-if="note.visibility === 'followers'" :icon="faUnlock"/>
-				<Fa v-if="note.visibility === 'specified'" :icon="faEnvelope"/>
+				<i v-if="note.visibility === 'home'" class="fas fa-home"></i>
+				<i v-else-if="note.visibility === 'followers'" class="fas fa-unlock"></i>
+				<i v-else-if="note.visibility === 'specified'" class="fas fa-envelope"></i>
 			</span>
-			<span class="localOnly" v-if="note.localOnly"><Fa :icon="faBiohazard"/></span>
+			<span class="localOnly" v-if="note.localOnly"><i class="fas fa-biohazard"></i></span>
 		</div>
 	</div>
 	<article class="article" @contextmenu.stop="onContextmenu">
@@ -42,14 +42,14 @@
 						<MkUserName :user="appearNote.user"/>
 					</MkA>
 					<span class="is-bot" v-if="appearNote.user.isBot">bot</span>
-					<span class="admin" v-if="appearNote.user.isAdmin"><Fa :icon="faBookmark"/></span>
-					<span class="moderator" v-if="!appearNote.user.isAdmin && appearNote.user.isModerator"><Fa :icon="farBookmark"/></span>
+					<span class="admin" v-if="appearNote.user.isAdmin"><i class="fas fa-bookmark"></i></span>
+					<span class="moderator" v-if="!appearNote.user.isAdmin && appearNote.user.isModerator"><i class="far fa-bookmark"></i></span>
 					<span class="visibility" v-if="appearNote.visibility !== 'public'">
-						<Fa v-if="appearNote.visibility === 'home'" :icon="faHome"/>
-						<Fa v-if="appearNote.visibility === 'followers'" :icon="faUnlock"/>
-						<Fa v-if="appearNote.visibility === 'specified'" :icon="faEnvelope"/>
+						<i v-if="appearNote.visibility === 'home'" class="fas fa-home"></i>
+						<i v-else-if="appearNote.visibility === 'followers'" class="fas fa-unlock"></i>
+						<i v-else-if="appearNote.visibility === 'specified'" class="fas fa-envelope"></i>
 					</span>
-					<span class="localOnly" v-if="appearNote.localOnly"><Fa :icon="faBiohazard"/></span>
+					<span class="localOnly" v-if="appearNote.localOnly"><i class="fas fa-biohazard"></i></span>
 				</div>
 				<div class="username"><MkAcct :user="appearNote.user"/></div>
 				<MkInstanceTicker v-if="showTicker" class="ticker" :instance="appearNote.user.instance"/>
@@ -64,7 +64,7 @@
 				<div class="content" v-show="appearNote.cw == null || showContent">
 					<div class="text">
 						<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ $ts.private }})</span>
-						<MkA class="reply" v-if="appearNote.replyId" :to="`/notes/${appearNote.replyId}`"><Fa :icon="faReply"/></MkA>
+						<MkA class="reply" v-if="appearNote.replyId" :to="`/notes/${appearNote.replyId}`"><i class="fas fa-reply"></i></MkA>
 						<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
 						<a class="rp" v-if="appearNote.renote != null">RN:</a>
 					</div>
@@ -75,33 +75,33 @@
 					<MkUrlPreview v-for="url in urls" :url="url" :key="url" :compact="true" :detail="true" class="url-preview"/>
 					<div class="renote" v-if="appearNote.renote"><XNotePreview :note="appearNote.renote"/></div>
 				</div>
-				<MkA v-if="appearNote.channel && !inChannel" class="channel" :to="`/channels/${appearNote.channel.id}`"><Fa :icon="faSatelliteDish"/> {{ appearNote.channel.name }}</MkA>
+				<MkA v-if="appearNote.channel && !inChannel" class="channel" :to="`/channels/${appearNote.channel.id}`"><i class="fas fa-satellite-dish"></i> {{ appearNote.channel.name }}</MkA>
 			</div>
 			<footer class="footer">
 				<div class="info">
-					<span class="mobile" v-if="note.viaMobile"><Fa :icon="faMobileAlt"/></span>
+					<span class="mobile" v-if="note.viaMobile"><i class="fas fa-mobile-alt"></i></span>
 					<MkTime class="created-at" :time="note.createdAt" mode="detail"/>
 				</div>
 				<XReactionsViewer :note="appearNote" ref="reactionsViewer"/>
 				<button @click="reply()" class="button _button">
-					<template v-if="appearNote.reply"><Fa :icon="faReplyAll"/></template>
-					<template v-else><Fa :icon="faReply"/></template>
+					<template v-if="appearNote.reply"><i class="fas fa-reply-all"></i></template>
+					<template v-else><i class="fas fa-reply"></i></template>
 					<p class="count" v-if="appearNote.repliesCount > 0">{{ appearNote.repliesCount }}</p>
 				</button>
 				<button v-if="canRenote" @click="renote()" class="button _button" ref="renoteButton">
-					<Fa :icon="faRetweet"/><p class="count" v-if="appearNote.renoteCount > 0">{{ appearNote.renoteCount }}</p>
+					<i class="fas fa-retweet"></i><p class="count" v-if="appearNote.renoteCount > 0">{{ appearNote.renoteCount }}</p>
 				</button>
 				<button v-else class="button _button">
-					<Fa :icon="faBan"/>
+					<i class="fas fa-ban"></i>
 				</button>
 				<button v-if="appearNote.myReaction == null" class="button _button" @click="react()" ref="reactButton">
-					<Fa :icon="faPlus"/>
+					<i class="fas fa-plus"></i>
 				</button>
 				<button v-if="appearNote.myReaction != null" class="button _button reacted" @click="undoReact(appearNote)" ref="reactButton">
-					<Fa :icon="faMinus"/>
+					<i class="fas fa-minus"></i>
 				</button>
 				<button class="button _button" @click="menu()" ref="menuButton">
-					<Fa :icon="faEllipsisH"/>
+					<i class="fas fa-ellipsis-h"></i>
 				</button>
 			</footer>
 		</div>
@@ -121,8 +121,6 @@
 
 <script lang="ts">
 import { defineAsyncComponent, defineComponent, markRaw } from 'vue';
-import { faSatelliteDish, faBolt, faTimes, faBullhorn, faStar, faLink, faExternalLinkSquareAlt, faPlus, faMinus, faRetweet, faReply, faReplyAll, faEllipsisH, faHome, faUnlock, faEnvelope, faThumbtack, faBan, faQuoteRight, faInfoCircle, faBiohazard, faPlug, faExclamationCircle, faPaperclip, faShareAlt } from '@fortawesome/free-solid-svg-icons';
-import { faCopy, faTrashAlt, faEdit, faEye, faEyeSlash } from '@fortawesome/free-regular-svg-icons';
 import * as mfm from 'mfm-js';
 import { sum } from '../../prelude/array';
 import XSub from './note.sub.vue';
@@ -143,14 +141,6 @@ import { noteActions, noteViewInterruptors } from '@client/store';
 import { reactionPicker } from '@client/scripts/reaction-picker';
 import { extractUrlFromMfm } from '@/misc/extract-url-from-mfm';
 
-function markRawAll(...xs) {
-	for (const x of xs) {
-		markRaw(x);
-	}
-}
-
-markRawAll(faEdit, faBolt, faTimes, faBullhorn, faPlus, faMinus, faRetweet, faReply, faReplyAll, faEllipsisH, faHome, faUnlock, faEnvelope, faThumbtack, faBan, faBiohazard, faPlug, faSatelliteDish);
-
 // TODO: note.vueとほぼ同じなので共通化したい
 export default defineComponent({
 	components: {
@@ -188,7 +178,6 @@ export default defineComponent({
 			showContent: false,
 			isDeleted: false,
 			muted: false,
-			faEdit, faBolt, faTimes, faBullhorn, faPlus, faMinus, faRetweet, faReply, faReplyAll, faEllipsisH, faHome, faUnlock, faEnvelope, faThumbtack, faBan, faBiohazard, faPlug, faSatelliteDish
 		};
 	},
 
@@ -467,7 +456,7 @@ export default defineComponent({
 			this.blur();
 			os.modalMenu([{
 				text: this.$ts.renote,
-				icon: faRetweet,
+				icon: 'fas fa-retweet',
 				action: () => {
 					os.api('notes/create', {
 						renoteId: this.appearNote.id
@@ -475,7 +464,7 @@ export default defineComponent({
 				}
 			}, {
 				text: this.$ts.quote,
-				icon: faQuoteRight,
+				icon: 'fas fa-quote-right',
 				action: () => {
 					os.post({
 						renote: this.appearNote,
@@ -611,62 +600,62 @@ export default defineComponent({
 				});
 
 				menu = [{
-					icon: faCopy,
+					icon: 'fas fa-copy',
 					text: this.$ts.copyContent,
 					action: this.copyContent
 				}, {
-					icon: faLink,
+					icon: 'fas fa-link',
 					text: this.$ts.copyLink,
 					action: this.copyLink
 				}, (this.appearNote.url || this.appearNote.uri) ? {
-					icon: faExternalLinkSquareAlt,
+					icon: 'fas fa-external-link-square-alt',
 					text: this.$ts.showOnRemote,
 					action: () => {
 						window.open(this.appearNote.url || this.appearNote.uri, '_blank');
 					}
 				} : undefined,
 				{
-					icon: faShareAlt,
+					icon: 'fas fa-share-alt',
 					text: this.$ts.share,
 					action: this.share
 				},
 				null,
 				statePromise.then(state => state.isFavorited ? {
-					icon: faStar,
+					icon: 'fas fa-star',
 					text: this.$ts.unfavorite,
 					action: () => this.toggleFavorite(false)
 				} : {
-					icon: faStar,
+					icon: 'fas fa-star',
 					text: this.$ts.favorite,
 					action: () => this.toggleFavorite(true)
 				}),
 				{
-					icon: faPaperclip,
+					icon: 'fas fa-paperclip',
 					text: this.$ts.clip,
 					action: () => this.clip()
 				},
 				(this.appearNote.userId != this.$i.id) ? statePromise.then(state => state.isWatching ? {
-					icon: faEyeSlash,
+					icon: 'fas fa-eye-slash',
 					text: this.$ts.unwatch,
 					action: () => this.toggleWatch(false)
 				} : {
-					icon: faEye,
+					icon: 'fas fa-eye',
 					text: this.$ts.watch,
 					action: () => this.toggleWatch(true)
 				}) : undefined,
 				this.appearNote.userId == this.$i.id ? (this.$i.pinnedNoteIds || []).includes(this.appearNote.id) ? {
-					icon: faThumbtack,
+					icon: 'fas fa-thumbtack',
 					text: this.$ts.unpin,
 					action: () => this.togglePin(false)
 				} : {
-					icon: faThumbtack,
+					icon: 'fas fa-thumbtack',
 					text: this.$ts.pin,
 					action: () => this.togglePin(true)
 				} : undefined,
 				...(this.$i.isModerator || this.$i.isAdmin ? [
 					null,
 					{
-						icon: faBullhorn,
+						icon: 'fas fa-bullhorn',
 						text: this.$ts.promote,
 						action: this.promote
 					}]
@@ -675,7 +664,7 @@ export default defineComponent({
 				...(this.appearNote.userId != this.$i.id ? [
 					null,
 					{
-						icon: faExclamationCircle,
+						icon: 'fas fa-exclamation-circle',
 						text: this.$ts.reportAbuse,
 						action: () => {
 							const u = `${url}/notes/${this.appearNote.id}`;
@@ -690,12 +679,12 @@ export default defineComponent({
 				...(this.appearNote.userId == this.$i.id || this.$i.isModerator || this.$i.isAdmin ? [
 					null,
 					this.appearNote.userId == this.$i.id ? {
-						icon: faEdit,
+						icon: 'fas fa-edit',
 						text: this.$ts.deleteAndEdit,
 						action: this.delEdit
 					} : undefined,
 					{
-						icon: faTrashAlt,
+						icon: 'fas fa-trash-alt',
 						text: this.$ts.delete,
 						danger: true,
 						action: this.del
@@ -705,15 +694,15 @@ export default defineComponent({
 				.filter(x => x !== undefined);
 			} else {
 				menu = [{
-					icon: faCopy,
+					icon: 'fas fa-copy',
 					text: this.$ts.copyContent,
 					action: this.copyContent
 				}, {
-					icon: faLink,
+					icon: 'fas fa-link',
 					text: this.$ts.copyLink,
 					action: this.copyLink
 				}, (this.appearNote.url || this.appearNote.uri) ? {
-					icon: faExternalLinkSquareAlt,
+					icon: 'fas fa-external-link-square-alt',
 					text: this.$ts.showOnRemote,
 					action: () => {
 						window.open(this.appearNote.url || this.appearNote.uri, '_blank');
@@ -724,7 +713,7 @@ export default defineComponent({
 
 			if (noteActions.length > 0) {
 				menu = menu.concat([null, ...noteActions.map(action => ({
-					icon: faPlug,
+					icon: 'fas fa-plug',
 					text: action.title,
 					action: () => {
 						action.handler(this.appearNote);
@@ -763,7 +752,7 @@ export default defineComponent({
 			if (!this.isMyRenote) return;
 			os.modalMenu([{
 				text: this.$ts.unrenote,
-				icon: faTrashAlt,
+				icon: 'fas fa-trash-alt',
 				danger: true,
 				action: () => {
 					os.api('notes/delete', {
@@ -806,7 +795,7 @@ export default defineComponent({
 		async clip() {
 			const clips = await os.api('clips/list');
 			os.modalMenu([{
-				icon: faPlus,
+				icon: 'fas fa-plus',
 				text: this.$ts.createNew,
 				action: async () => {
 					const { canceled, result } = await os.form(this.$ts.createNewClip, {
@@ -943,7 +932,7 @@ export default defineComponent({
 			border-radius: 6px;
 		}
 
-		> [data-icon] {
+		> i {
 			margin-right: 4px;
 		}
 
diff --git a/src/client/components/note-header.vue b/src/client/components/note-header.vue
index ab40c5fd4a..1cd6463f9b 100644
--- a/src/client/components/note-header.vue
+++ b/src/client/components/note-header.vue
@@ -5,27 +5,25 @@
 	</MkA>
 	<span class="is-bot" v-if="note.user.isBot">bot</span>
 	<span class="username"><MkAcct :user="note.user"/></span>
-	<span class="admin" v-if="note.user.isAdmin"><Fa :icon="faBookmark"/></span>
-	<span class="moderator" v-if="!note.user.isAdmin && note.user.isModerator"><Fa :icon="farBookmark"/></span>
+	<span class="admin" v-if="note.user.isAdmin"><i class="fas fa-bookmark"></i></span>
+	<span class="moderator" v-if="!note.user.isAdmin && note.user.isModerator"><i class="far fa-bookmark"></i></span>
 	<div class="info">
-		<span class="mobile" v-if="note.viaMobile"><Fa :icon="faMobileAlt"/></span>
+		<span class="mobile" v-if="note.viaMobile"><i class="fas fa-mobile-alt"></i></span>
 		<MkA class="created-at" :to="notePage(note)">
 			<MkTime :time="note.createdAt"/>
 		</MkA>
 		<span class="visibility" v-if="note.visibility !== 'public'">
-			<Fa v-if="note.visibility === 'home'" :icon="faHome"/>
-			<Fa v-if="note.visibility === 'followers'" :icon="faUnlock"/>
-			<Fa v-if="note.visibility === 'specified'" :icon="faEnvelope"/>
+			<i v-if="note.visibility === 'home'" class="fas fa-home"></i>
+			<i v-else-if="note.visibility === 'followers'" class="fas fa-unlock"></i>
+			<i v-else-if="note.visibility === 'specified'" class="fas fa-envelope"></i>
 		</span>
-		<span class="localOnly" v-if="note.localOnly"><Fa :icon="faBiohazard"/></span>
+		<span class="localOnly" v-if="note.localOnly"><i class="fas fa-biohazard"></i></span>
 	</div>
 </header>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faHome, faUnlock, faEnvelope, faMobileAlt, faBookmark, faBiohazard } from '@fortawesome/free-solid-svg-icons';
-import { faBookmark as farBookmark } from '@fortawesome/free-regular-svg-icons';
 import notePage from '../filters/note';
 import { userPage } from '../filters/user';
 import * as os from '@client/os';
@@ -40,7 +38,6 @@ export default defineComponent({
 
 	data() {
 		return {
-			faHome, faUnlock, faEnvelope, faMobileAlt, faBookmark, farBookmark, faBiohazard
 		};
 	},
 
diff --git a/src/client/components/note.vue b/src/client/components/note.vue
index 0e153033ca..504d07c0eb 100644
--- a/src/client/components/note.vue
+++ b/src/client/components/note.vue
@@ -9,12 +9,12 @@
 	v-size="{ max: [500, 450, 350, 300] }"
 >
 	<XSub :note="appearNote.reply" class="reply-to" v-if="appearNote.reply"/>
-	<div class="info" v-if="pinned"><Fa :icon="faThumbtack"/> {{ $ts.pinnedNote }}</div>
-	<div class="info" v-if="appearNote._prId_"><Fa :icon="faBullhorn"/> {{ $ts.promotion }}<button class="_textButton hide" @click="readPromo()">{{ $ts.hideThisNote }} <Fa :icon="faTimes"/></button></div>
-	<div class="info" v-if="appearNote._featuredId_"><Fa :icon="faBolt"/> {{ $ts.featured }}</div>
+	<div class="info" v-if="pinned"><i class="fas fa-thumbtack"></i> {{ $ts.pinnedNote }}</div>
+	<div class="info" v-if="appearNote._prId_"><i class="fas fa-bullhorn"></i> {{ $ts.promotion }}<button class="_textButton hide" @click="readPromo()">{{ $ts.hideThisNote }} <i class="fas fa-times"></i></button></div>
+	<div class="info" v-if="appearNote._featuredId_"><i class="fas fa-bolt"></i> {{ $ts.featured }}</div>
 	<div class="renote" v-if="isRenote">
 		<MkAvatar class="avatar" :user="note.user"/>
-		<Fa :icon="faRetweet"/>
+		<i class="fas fa-retweet"></i>
 		<I18n :src="$ts.renotedBy" tag="span">
 			<template #user>
 				<MkA class="name" :to="userPage(note.user)" v-user-preview="note.userId">
@@ -24,15 +24,15 @@
 		</I18n>
 		<div class="info">
 			<button class="_button time" @click="showRenoteMenu()" ref="renoteTime">
-				<Fa class="dropdownIcon" v-if="isMyRenote" :icon="faEllipsisH"/>
+				<i v-if="isMyRenote" class="fas fa-ellipsis-h dropdownIcon"></i>
 				<MkTime :time="note.createdAt"/>
 			</button>
 			<span class="visibility" v-if="note.visibility !== 'public'">
-				<Fa v-if="note.visibility === 'home'" :icon="faHome"/>
-				<Fa v-if="note.visibility === 'followers'" :icon="faUnlock"/>
-				<Fa v-if="note.visibility === 'specified'" :icon="faEnvelope"/>
+				<i v-if="note.visibility === 'home'" class="fas fa-home"></i>
+				<i v-else-if="note.visibility === 'followers'" class="fas fa-unlock"></i>
+				<i v-else-if="note.visibility === 'specified'" class="fas fa-envelope"></i>
 			</span>
-			<span class="localOnly" v-if="note.localOnly"><Fa :icon="faBiohazard"/></span>
+			<span class="localOnly" v-if="note.localOnly"><i class="fas fa-biohazard"></i></span>
 		</div>
 	</div>
 	<article class="article" @contextmenu.stop="onContextmenu">
@@ -48,7 +48,7 @@
 				<div class="content" :class="{ collapsed }" v-show="appearNote.cw == null || showContent">
 					<div class="text">
 						<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ $ts.private }})</span>
-						<MkA class="reply" v-if="appearNote.replyId" :to="`/notes/${appearNote.replyId}`"><Fa :icon="faReply"/></MkA>
+						<MkA class="reply" v-if="appearNote.replyId" :to="`/notes/${appearNote.replyId}`"><i class="fas fa-reply"></i></MkA>
 						<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
 						<a class="rp" v-if="appearNote.renote != null">RN:</a>
 					</div>
@@ -62,29 +62,29 @@
 						<span>{{ $ts.showMore }}</span>
 					</button>
 				</div>
-				<MkA v-if="appearNote.channel && !inChannel" class="channel" :to="`/channels/${appearNote.channel.id}`"><Fa :icon="faSatelliteDish"/> {{ appearNote.channel.name }}</MkA>
+				<MkA v-if="appearNote.channel && !inChannel" class="channel" :to="`/channels/${appearNote.channel.id}`"><i class="fas fa-satellite-dish"></i> {{ appearNote.channel.name }}</MkA>
 			</div>
 			<footer class="footer">
 				<XReactionsViewer :note="appearNote" ref="reactionsViewer"/>
 				<button @click="reply()" class="button _button">
-					<template v-if="appearNote.reply"><Fa :icon="faReplyAll"/></template>
-					<template v-else><Fa :icon="faReply"/></template>
+					<template v-if="appearNote.reply"><i class="fas fa-reply-all"></i></template>
+					<template v-else><i class="fas fa-reply"></i></template>
 					<p class="count" v-if="appearNote.repliesCount > 0">{{ appearNote.repliesCount }}</p>
 				</button>
 				<button v-if="canRenote" @click="renote()" class="button _button" ref="renoteButton">
-					<Fa :icon="faRetweet"/><p class="count" v-if="appearNote.renoteCount > 0">{{ appearNote.renoteCount }}</p>
+					<i class="fas fa-retweet"></i><p class="count" v-if="appearNote.renoteCount > 0">{{ appearNote.renoteCount }}</p>
 				</button>
 				<button v-else class="button _button">
-					<Fa :icon="faBan"/>
+					<i class="fas fa-ban"></i>
 				</button>
 				<button v-if="appearNote.myReaction == null" class="button _button" @click="react()" ref="reactButton">
-					<Fa :icon="faPlus"/>
+					<i class="fas fa-plus"></i>
 				</button>
 				<button v-if="appearNote.myReaction != null" class="button _button reacted" @click="undoReact(appearNote)" ref="reactButton">
-					<Fa :icon="faMinus"/>
+					<i class="fas fa-minus"></i>
 				</button>
 				<button class="button _button" @click="menu()" ref="menuButton">
-					<Fa :icon="faEllipsisH"/>
+					<i class="fas fa-ellipsis-h"></i>
 				</button>
 			</footer>
 		</div>
@@ -103,8 +103,6 @@
 
 <script lang="ts">
 import { defineAsyncComponent, defineComponent, markRaw } from 'vue';
-import { faSatelliteDish, faBolt, faTimes, faBullhorn, faStar, faLink, faExternalLinkSquareAlt, faPlus, faMinus, faRetweet, faReply, faReplyAll, faEllipsisH, faHome, faUnlock, faEnvelope, faThumbtack, faBan, faQuoteRight, faInfoCircle, faBiohazard, faPlug, faExclamationCircle, faPaperclip, faShareAlt } from '@fortawesome/free-solid-svg-icons';
-import { faCopy, faTrashAlt, faEdit, faEye, faEyeSlash } from '@fortawesome/free-regular-svg-icons';
 import * as mfm from 'mfm-js';
 import { sum } from '../../prelude/array';
 import XSub from './note.sub.vue';
@@ -125,14 +123,6 @@ import { noteActions, noteViewInterruptors } from '@client/store';
 import { reactionPicker } from '@client/scripts/reaction-picker';
 import { extractUrlFromMfm } from '@/misc/extract-url-from-mfm';
 
-function markRawAll(...xs) {
-	for (const x of xs) {
-		markRaw(x);
-	}
-}
-
-markRawAll(faEdit, faBolt, faTimes, faBullhorn, faPlus, faMinus, faRetweet, faReply, faReplyAll, faEllipsisH, faHome, faUnlock, faEnvelope, faThumbtack, faBan, faBiohazard, faPlug, faSatelliteDish);
-
 export default defineComponent({
 	components: {
 		XSub,
@@ -174,7 +164,6 @@ export default defineComponent({
 			collapsed: false,
 			isDeleted: false,
 			muted: false,
-			faEdit, faBolt, faTimes, faBullhorn, faPlus, faMinus, faRetweet, faReply, faReplyAll, faEllipsisH, faHome, faUnlock, faEnvelope, faThumbtack, faBan, faBiohazard, faPlug, faSatelliteDish
 		};
 	},
 
@@ -442,7 +431,7 @@ export default defineComponent({
 			this.blur();
 			os.modalMenu([{
 				text: this.$ts.renote,
-				icon: faRetweet,
+				icon: 'fas fa-retweet',
 				action: () => {
 					os.api('notes/create', {
 						renoteId: this.appearNote.id
@@ -450,7 +439,7 @@ export default defineComponent({
 				}
 			}, {
 				text: this.$ts.quote,
-				icon: faQuoteRight,
+				icon: 'fas fa-quote-right',
 				action: () => {
 					os.post({
 						renote: this.appearNote,
@@ -586,62 +575,62 @@ export default defineComponent({
 				});
 
 				menu = [{
-					icon: faCopy,
+					icon: 'fas fa-copy',
 					text: this.$ts.copyContent,
 					action: this.copyContent
 				}, {
-					icon: faLink,
+					icon: 'fas fa-link',
 					text: this.$ts.copyLink,
 					action: this.copyLink
 				}, (this.appearNote.url || this.appearNote.uri) ? {
-					icon: faExternalLinkSquareAlt,
+					icon: 'fas fa-external-link-square-alt',
 					text: this.$ts.showOnRemote,
 					action: () => {
 						window.open(this.appearNote.url || this.appearNote.uri, '_blank');
 					}
 				} : undefined,
 				{
-					icon: faShareAlt,
+					icon: 'fas fa-share-alt',
 					text: this.$ts.share,
 					action: this.share
 				},
 				null,
 				statePromise.then(state => state.isFavorited ? {
-					icon: faStar,
+					icon: 'fas fa-star',
 					text: this.$ts.unfavorite,
 					action: () => this.toggleFavorite(false)
 				} : {
-					icon: faStar,
+					icon: 'fas fa-star',
 					text: this.$ts.favorite,
 					action: () => this.toggleFavorite(true)
 				}),
 				{
-					icon: faPaperclip,
+					icon: 'fas fa-paperclip',
 					text: this.$ts.clip,
 					action: () => this.clip()
 				},
 				(this.appearNote.userId != this.$i.id) ? statePromise.then(state => state.isWatching ? {
-					icon: faEyeSlash,
+					icon: 'fas fa-eye-slash',
 					text: this.$ts.unwatch,
 					action: () => this.toggleWatch(false)
 				} : {
-					icon: faEye,
+					icon: 'fas fa-eye',
 					text: this.$ts.watch,
 					action: () => this.toggleWatch(true)
 				}) : undefined,
 				this.appearNote.userId == this.$i.id ? (this.$i.pinnedNoteIds || []).includes(this.appearNote.id) ? {
-					icon: faThumbtack,
+					icon: 'fas fa-thumbtack',
 					text: this.$ts.unpin,
 					action: () => this.togglePin(false)
 				} : {
-					icon: faThumbtack,
+					icon: 'fas fa-thumbtack',
 					text: this.$ts.pin,
 					action: () => this.togglePin(true)
 				} : undefined,
 				...(this.$i.isModerator || this.$i.isAdmin ? [
 					null,
 					{
-						icon: faBullhorn,
+						icon: 'fas fa-bullhorn',
 						text: this.$ts.promote,
 						action: this.promote
 					}]
@@ -650,7 +639,7 @@ export default defineComponent({
 				...(this.appearNote.userId != this.$i.id ? [
 					null,
 					{
-						icon: faExclamationCircle,
+						icon: 'fas fa-exclamation-circle',
 						text: this.$ts.reportAbuse,
 						action: () => {
 							const u = `${url}/notes/${this.appearNote.id}`;
@@ -665,12 +654,12 @@ export default defineComponent({
 				...(this.appearNote.userId == this.$i.id || this.$i.isModerator || this.$i.isAdmin ? [
 					null,
 					this.appearNote.userId == this.$i.id ? {
-						icon: faEdit,
+						icon: 'fas fa-edit',
 						text: this.$ts.deleteAndEdit,
 						action: this.delEdit
 					} : undefined,
 					{
-						icon: faTrashAlt,
+						icon: 'fas fa-trash-alt',
 						text: this.$ts.delete,
 						danger: true,
 						action: this.del
@@ -680,15 +669,15 @@ export default defineComponent({
 				.filter(x => x !== undefined);
 			} else {
 				menu = [{
-					icon: faCopy,
+					icon: 'fas fa-copy',
 					text: this.$ts.copyContent,
 					action: this.copyContent
 				}, {
-					icon: faLink,
+					icon: 'fas fa-link',
 					text: this.$ts.copyLink,
 					action: this.copyLink
 				}, (this.appearNote.url || this.appearNote.uri) ? {
-					icon: faExternalLinkSquareAlt,
+					icon: 'fas fa-external-link-square-alt',
 					text: this.$ts.showOnRemote,
 					action: () => {
 						window.open(this.appearNote.url || this.appearNote.uri, '_blank');
@@ -699,7 +688,7 @@ export default defineComponent({
 
 			if (noteActions.length > 0) {
 				menu = menu.concat([null, ...noteActions.map(action => ({
-					icon: faPlug,
+					icon: 'fas fa-plug',
 					text: action.title,
 					action: () => {
 						action.handler(this.appearNote);
@@ -738,7 +727,7 @@ export default defineComponent({
 			if (!this.isMyRenote) return;
 			os.modalMenu([{
 				text: this.$ts.unrenote,
-				icon: faTrashAlt,
+				icon: 'fas fa-trash-alt',
 				danger: true,
 				action: () => {
 					os.api('notes/delete', {
@@ -781,7 +770,7 @@ export default defineComponent({
 		async clip() {
 			const clips = await os.api('clips/list');
 			os.modalMenu([{
-				icon: faPlus,
+				icon: 'fas fa-plus',
 				text: this.$ts.createNew,
 				action: async () => {
 					const { canceled, result } = await os.form(this.$ts.createNewClip, {
@@ -909,7 +898,7 @@ export default defineComponent({
 		white-space: pre;
 		color: #d28a3f;
 
-		> [data-icon] {
+		> i {
 			margin-right: 4px;
 		}
 
@@ -945,7 +934,7 @@ export default defineComponent({
 			border-radius: 6px;
 		}
 
-		> [data-icon] {
+		> i {
 			margin-right: 4px;
 		}
 
diff --git a/src/client/components/notification.vue b/src/client/components/notification.vue
index 2b8b440ced..9badd7a708 100644
--- a/src/client/components/notification.vue
+++ b/src/client/components/notification.vue
@@ -4,15 +4,15 @@
 		<MkAvatar v-if="notification.user" class="icon" :user="notification.user"/>
 		<img v-else-if="notification.icon" class="icon" :src="notification.icon" alt=""/>
 		<div class="sub-icon" :class="notification.type">
-			<Fa :icon="faPlus" v-if="notification.type === 'follow'"/>
-			<Fa :icon="faClock" v-else-if="notification.type === 'receiveFollowRequest'"/>
-			<Fa :icon="faCheck" v-else-if="notification.type === 'followRequestAccepted'"/>
-			<Fa :icon="faIdCardAlt" v-else-if="notification.type === 'groupInvited'"/>
-			<Fa :icon="faRetweet" v-else-if="notification.type === 'renote'"/>
-			<Fa :icon="faReply" v-else-if="notification.type === 'reply'"/>
-			<Fa :icon="faAt" v-else-if="notification.type === 'mention'"/>
-			<Fa :icon="faQuoteLeft" v-else-if="notification.type === 'quote'"/>
-			<Fa :icon="faPollH" v-else-if="notification.type === 'pollVote'"/>
+			<i v-if="notification.type === 'follow'" class="fas fa-plus"></i>
+			<i v-else-if="notification.type === 'receiveFollowRequest'" class="fas fa-clock"></i>
+			<i v-else-if="notification.type === 'followRequestAccepted'" class="fas fa-check"></i>
+			<i v-else-if="notification.type === 'groupInvited'" class="fas fa-id-card-alt"></i>
+			<i v-else-if="notification.type === 'renote'" class="fas fa-retweet"></i>
+			<i v-else-if="notification.type === 'reply'" class="fas fa-reply"></i>
+			<i v-else-if="notification.type === 'mention'" class="fas fa-at"></i>
+			<i v-else-if="notification.type === 'quote'" class="fas fa-quote-left"></i>
+			<i v-else-if="notification.type === 'pollVote'" class="fas fa-poll-h"></i>
 			<XReactionIcon v-else-if="notification.type === 'reaction'" :reaction="notification.reaction" :custom-emojis="notification.note.emojis" :no-style="true"/>
 		</div>
 	</div>
@@ -23,14 +23,14 @@
 			<MkTime :time="notification.createdAt" v-if="withTime" class="time"/>
 		</header>
 		<MkA v-if="notification.type === 'reaction'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
-			<Fa :icon="faQuoteLeft"/>
+			<i class="fas fa-quote-left"></i>
 			<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
-			<Fa :icon="faQuoteRight"/>
+			<i class="fas fa-quote-right"></i>
 		</MkA>
 		<MkA v-if="notification.type === 'renote'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note.renote)">
-			<Fa :icon="faQuoteLeft"/>
+			<i class="fas fa-quote-left"></i>
 			<Mfm :text="getNoteSummary(notification.note.renote)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.renote.emojis"/>
-			<Fa :icon="faQuoteRight"/>
+			<i class="fas fa-quote-right"></i>
 		</MkA>
 		<MkA v-if="notification.type === 'reply'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
 			<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
@@ -42,9 +42,9 @@
 			<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
 		</MkA>
 		<MkA v-if="notification.type === 'pollVote'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
-			<Fa :icon="faQuoteLeft"/>
+			<i class="fas fa-quote-left"></i>
 			<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
-			<Fa :icon="faQuoteRight"/>
+			<i class="fas fa-quote-right"></i>
 		</MkA>
 		<span v-if="notification.type === 'follow'" class="text" style="opacity: 0.6;">{{ $ts.youGotNewFollower }}<div v-if="full"><MkFollowButton :user="notification.user" :full="true"/></div></span>
 		<span v-if="notification.type === 'followRequestAccepted'" class="text" style="opacity: 0.6;">{{ $ts.followRequestAccepted }}</span>
@@ -59,8 +59,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faIdCardAlt, faPlus, faQuoteLeft, faQuoteRight, faRetweet, faReply, faAt, faCheck, faPollH } from '@fortawesome/free-solid-svg-icons';
-import { faClock } from '@fortawesome/free-regular-svg-icons';
 import { getNoteSummary } from '@/misc/get-note-summary';
 import XReactionIcon from './reaction-icon.vue';
 import MkFollowButton from './follow-button.vue';
@@ -96,7 +94,6 @@ export default defineComponent({
 			groupInviteDone: false,
 			connection: null,
 			readObserver: null,
-			faIdCardAlt, faPlus, faQuoteLeft, faQuoteRight, faRetweet, faReply, faAt, faClock, faCheck, faPollH
 		};
 	},
 
@@ -271,17 +268,17 @@ export default defineComponent({
 			overflow: hidden;
 			text-overflow: ellipsis;
 
-			> [data-icon] {
+			> i {
 				vertical-align: super;
 				font-size: 50%;
 				opacity: 0.5;
 			}
 
-			> [data-icon]:first-child {
+			> i:first-child {
 				margin-right: 4px;
 			}
 
-			> [data-icon]:last-child {
+			> i:last-child {
 				margin-left: 4px;
 			}
 		}
diff --git a/src/client/components/page-window.vue b/src/client/components/page-window.vue
index 1afde25501..26499f7054 100644
--- a/src/client/components/page-window.vue
+++ b/src/client/components/page-window.vue
@@ -11,7 +11,7 @@
 		<XHeader :info="pageInfo" :with-back="false"/>
 	</template>
 	<template #buttons>
-		<button class="_button" @click="back()" v-if="history.length > 0"><Fa :icon="faChevronLeft"/></button>
+		<button class="_button" @click="back()" v-if="history.length > 0"><i class="fas fa-chevron-left"></i></button>
 		<button class="_button" style="pointer-events: none;" v-else><!-- マージンのバランスを取るためのダミー --></button>
 	</template>
 	<div class="yrolvcoq _flat_">
@@ -22,7 +22,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faExternalLinkAlt, faExpandAlt, faLink, faChevronLeft, faColumns } from '@fortawesome/free-solid-svg-icons';
 import XWindow from '@client/components/ui/window.vue';
 import XHeader from '@client/ui/_common_/header.vue';
 import { popout } from '@client/scripts/popout';
@@ -76,7 +75,6 @@ export default defineComponent({
 			component: this.initialComponent,
 			props: this.initialProps,
 			history: [],
-			faChevronLeft,
 		};
 	},
 
@@ -90,29 +88,29 @@ export default defineComponent({
 				type: 'label',
 				text: this.path,
 			}, {
-				icon: faExpandAlt,
+				icon: 'fas fa-expand-alt',
 				text: this.$ts.showInPage,
 				action: this.expand
 			}, this.sideViewHook ? {
-				icon: faColumns,
+				icon: 'fas fa-columns',
 				text: this.$ts.openInSideView,
 				action: () => {
 					this.sideViewHook(this.path);
 					this.$refs.window.close();
 				}
 			} : undefined, {
-				icon: faExternalLinkAlt,
+				icon: 'fas fa-external-link-alt',
 				text: this.$ts.popout,
 				action: this.popout
 			}, null, {
-				icon: faExternalLinkAlt,
+				icon: 'fas fa-external-link-alt',
 				text: this.$ts.openInNewTab,
 				action: () => {
 					window.open(this.url, '_blank');
 					this.$refs.window.close();
 				}
 			}, {
-				icon: faLink,
+				icon: 'fas fa-link',
 				text: this.$ts.copyLink,
 				action: () => {
 					copyToClipboard(this.url);
diff --git a/src/client/components/page/page.post.vue b/src/client/components/page/page.post.vue
index 926d06ae80..1dfb506d5f 100644
--- a/src/client/components/page/page.post.vue
+++ b/src/client/components/page/page.post.vue
@@ -1,13 +1,15 @@
 <template>
 <div class="ngbfujlo">
 	<MkTextarea :value="text" readonly style="margin: 0;"></MkTextarea>
-	<MkButton class="button" primary @click="post()" :disabled="posting || posted"><Fa v-if="posted" :icon="faCheck"/><Fa v-else :icon="faPaperPlane"/></MkButton>
+	<MkButton class="button" primary @click="post()" :disabled="posting || posted">
+		<i v-if="posted" class="fas fa-check"></i>
+		<i v-else class="fas fa-paper-plane"></i>
+	</MkButton>
 </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, PropType } from 'vue';
-import { faCheck, faPaperPlane } from '@fortawesome/free-solid-svg-icons';
 import MkTextarea from '../ui/textarea.vue';
 import MkButton from '../ui/button.vue';
 import { apiUrl } from '@client/config';
@@ -35,7 +37,6 @@ export default defineComponent({
 			text: this.hpml.interpolate(this.block.text),
 			posted: false,
 			posting: false,
-			faCheck, faPaperPlane
 		};
 	},
 	watch: {
diff --git a/src/client/components/poll-editor.vue b/src/client/components/poll-editor.vue
index 3503d3df71..0ade2c3ba0 100644
--- a/src/client/components/poll-editor.vue
+++ b/src/client/components/poll-editor.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="zmdxowus">
 	<p class="caution" v-if="choices.length < 2">
-		<Fa :icon="faExclamationTriangle"/>{{ $ts._poll.noOnlyOneChoice }}
+		<i class="fas fa-exclamation-triangle"></i>{{ $ts._poll.noOnlyOneChoice }}
 	</p>
 	<ul ref="choices">
 		<li v-for="(choice, i) in choices" :key="i">
@@ -9,7 +9,7 @@
 				<span>{{ $t('_poll.choiceN', { n: i + 1 }) }}</span>
 			</MkInput>
 			<button @click="remove(i)" class="_button">
-				<Fa :icon="faTimes"/>
+				<i class="fas fa-times"></i>
 			</button>
 		</li>
 	</ul>
@@ -50,7 +50,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faExclamationTriangle, faTimes } from '@fortawesome/free-solid-svg-icons';
 import { addTime } from '../../prelude/time';
 import { formatDateTimeString } from '@/misc/format-time-string';
 import MkInput from './ui/input.vue';
@@ -84,7 +83,6 @@ export default defineComponent({
 			atTime: '00:00',
 			after: 0,
 			unit: 'second',
-			faExclamationTriangle, faTimes
 		};
 	},
 
@@ -190,7 +188,7 @@ export default defineComponent({
 		font-size: 0.8em;
 		color: #f00;
 
-		> [data-icon] {
+		> i {
 			margin-right: 4px;
 		}
 	}
diff --git a/src/client/components/poll.vue b/src/client/components/poll.vue
index 6cf6a8e918..463ddab721 100644
--- a/src/client/components/poll.vue
+++ b/src/client/components/poll.vue
@@ -4,7 +4,7 @@
 		<li v-for="(choice, i) in poll.choices" :key="i" @click="vote(i)" :class="{ voted: choice.voted }">
 			<div class="backdrop" :style="{ 'width': `${showResult ? (choice.votes / total * 100) : 0}%` }"></div>
 			<span>
-				<template v-if="choice.isVoted"><Fa :icon="faCheck"/></template>
+				<template v-if="choice.isVoted"><i class="fas fa-check"></i></template>
 				<Mfm :text="choice.text" :plain="true" :custom-emojis="note.emojis"/>
 				<span class="votes" v-if="showResult">({{ $t('_poll.votesCount', { n: choice.votes }) }})</span>
 			</span>
@@ -23,7 +23,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faCheck } from '@fortawesome/free-solid-svg-icons';
 import { sum } from '../../prelude/array';
 import * as os from '@client/os';
 
@@ -38,7 +37,6 @@ export default defineComponent({
 		return {
 			remaining: -1,
 			showResult: false,
-			faCheck
 		};
 	},
 	computed: {
@@ -135,7 +133,7 @@ export default defineComponent({
 			> span {
 				position: relative;
 
-				> [data-icon] {
+				> i {
 					margin-right: 4px;
 				}
 
diff --git a/src/client/components/post-form-attaches.vue b/src/client/components/post-form-attaches.vue
index f2eed30441..eba7e7af36 100644
--- a/src/client/components/post-form-attaches.vue
+++ b/src/client/components/post-form-attaches.vue
@@ -5,7 +5,7 @@
 			<div @click="showFileMenu(element, $event)" @contextmenu.prevent="showFileMenu(element, $event)">
 				<MkDriveFileThumbnail :data-id="element.id" class="thumbnail" :file="element" fit="cover"/>
 				<div class="sensitive" v-if="element.isSensitive">
-					<Fa class="icon" :icon="faExclamationTriangle"/>
+					<i class="fas fa-exclamation-triangle icon"></i>
 				</div>
 			</div>
 		</template>
@@ -16,8 +16,6 @@
 
 <script lang="ts">
 import { defineComponent, defineAsyncComponent } from 'vue';
-import { faTimesCircle, faEye, faEyeSlash } from '@fortawesome/free-regular-svg-icons';
-import { faExclamationTriangle, faICursor } from '@fortawesome/free-solid-svg-icons';
 import MkDriveFileThumbnail from './drive-file-thumbnail.vue'
 import * as os from '@client/os';
 
@@ -44,7 +42,6 @@ export default defineComponent({
 		return {
 			menu: null as Promise<null> | null,
 
-			faExclamationTriangle
 		};
 	},
 
@@ -100,11 +97,11 @@ export default defineComponent({
 				action: () => { this.rename(file) }
 			}, {
 				text: file.isSensitive ? this.$ts.unmarkAsSensitive : this.$ts.markAsSensitive,
-				icon: file.isSensitive ? faEyeSlash : faEye,
+				icon: file.isSensitive ? 'fas fa-eye-slash' : 'fas fa-eye',
 				action: () => { this.toggleSensitive(file) }
 			}, {
 				text: this.$ts.attachCancel,
-				icon: faTimesCircle,
+				icon: 'fas fa-times-circle',
 				action: () => { this.detachMedia(file.id) }
 			}], ev.currentTarget || ev.target).then(() => this.menu = null);
 		}
diff --git a/src/client/components/post-form.vue b/src/client/components/post-form.vue
index 4c6a9ebc95..c5186577f3 100644
--- a/src/client/components/post-form.vue
+++ b/src/client/components/post-form.vue
@@ -7,31 +7,31 @@
 	@drop.stop="onDrop"
 >
 	<header>
-		<button v-if="!fixed" class="cancel _button" @click="cancel"><Fa :icon="faTimes"/></button>
+		<button v-if="!fixed" class="cancel _button" @click="cancel"><i class="fas fa-times"></i></button>
 		<div>
 			<span class="text-count" :class="{ over: textLength > max }">{{ max - textLength }}</span>
-			<span class="local-only" v-if="localOnly"><Fa :icon="faBiohazard"/></span>
+			<span class="local-only" v-if="localOnly"><i class="fas fa-biohazard"></i></span>
 			<button class="_button visibility" @click="setVisibility" ref="visibilityButton" v-tooltip="$ts.visibility" :disabled="channel != null">
-				<span v-if="visibility === 'public'"><Fa :icon="faGlobe"/></span>
-				<span v-if="visibility === 'home'"><Fa :icon="faHome"/></span>
-				<span v-if="visibility === 'followers'"><Fa :icon="faUnlock"/></span>
-				<span v-if="visibility === 'specified'"><Fa :icon="faEnvelope"/></span>
+				<span v-if="visibility === 'public'"><i class="fas fa-globe"></i></span>
+				<span v-if="visibility === 'home'"><i class="fas fa-home"></i></span>
+				<span v-if="visibility === 'followers'"><i class="fas fa-unlock"></i></span>
+				<span v-if="visibility === 'specified'"><i class="fas fa-envelope"></i></span>
 			</button>
-			<button class="submit _buttonPrimary" :disabled="!canPost" @click="post">{{ submitText }}<Fa :icon="reply ? faReply : renote ? faQuoteRight : faPaperPlane"/></button>
+			<button class="submit _buttonPrimary" :disabled="!canPost" @click="post">{{ submitText }}<i :class="reply ? 'fas fa-reply' : renote ? 'fas fa-quote-right' : 'fas fa-paper-plane'"></i></button>
 		</div>
 	</header>
 	<div class="form" :class="{ fixed }">
 		<XNotePreview class="preview" v-if="reply" :note="reply"/>
 		<XNotePreview class="preview" v-if="renote" :note="renote"/>
-		<div class="with-quote" v-if="quoteId"><Fa icon="quote-left"/> {{ $ts.quoteAttached }}<button @click="quoteId = null"><Fa icon="times"/></button></div>
+		<div class="with-quote" v-if="quoteId"><i class="fas fa-quote-left"></i> {{ $ts.quoteAttached }}<button @click="quoteId = null"><i class="fas fa-times"></i></button></div>
 		<div v-if="visibility === 'specified'" class="to-specified">
 			<span style="margin-right: 8px;">{{ $ts.recipient }}</span>
 			<div class="visibleUsers">
 				<span v-for="u in visibleUsers" :key="u.id">
 					<MkAcct :user="u"/>
-					<button class="_button" @click="removeVisibleUser(u)"><Fa :icon="faTimes"/></button>
+					<button class="_button" @click="removeVisibleUser(u)"><i class="fas fa-times"></i></button>
 				</span>
-				<button @click="addVisibleUser" class="_buttonPrimary"><Fa :icon="faPlus" fixed-width/></button>
+				<button @click="addVisibleUser" class="_buttonPrimary"><i class="fas fa-plus fa-fw"></i></button>
 			</div>
 		</div>
 		<MkInfo warn v-if="hasNotSpecifiedMentions" class="hasNotSpecifiedMentions">{{ $ts.notSpecifiedMentionWarning }} - <button class="_textButton" @click="addMissingMention()">{{ $ts.add }}</button></MkInfo>
@@ -40,12 +40,12 @@
 		<XPostFormAttaches class="attaches" :files="files" @updated="updateFiles" @detach="detachFile" @changeSensitive="updateFileSensitive" @changeName="updateFileName"/>
 		<XPollEditor v-if="poll" :poll="poll" @destroyed="poll = null" @updated="onPollUpdate"/>
 		<footer>
-			<button class="_button" @click="chooseFileFrom" v-tooltip="$ts.attachFile"><Fa :icon="faPhotoVideo"/></button>
-			<button class="_button" @click="togglePoll" :class="{ active: poll }" v-tooltip="$ts.poll"><Fa :icon="faPollH"/></button>
-			<button class="_button" @click="useCw = !useCw" :class="{ active: useCw }" v-tooltip="$ts.useCw"><Fa :icon="faEyeSlash"/></button>
-			<button class="_button" @click="insertMention" v-tooltip="$ts.mention"><Fa :icon="faAt"/></button>
-			<button class="_button" @click="insertEmoji" v-tooltip="$ts.emoji"><Fa :icon="faLaughSquint"/></button>
-			<button class="_button" @click="showActions" v-tooltip="$ts.plugin" v-if="postFormActions.length > 0"><Fa :icon="faPlug"/></button>
+			<button class="_button" @click="chooseFileFrom" v-tooltip="$ts.attachFile"><i class="fas fa-photo-video"></i></button>
+			<button class="_button" @click="togglePoll" :class="{ active: poll }" v-tooltip="$ts.poll"><i class="fas fa-poll-h"></i></button>
+			<button class="_button" @click="useCw = !useCw" :class="{ active: useCw }" v-tooltip="$ts.useCw"><i class="fas fa-eye-slash"></i></button>
+			<button class="_button" @click="insertMention" v-tooltip="$ts.mention"><i class="fas fa-at"></i></button>
+			<button class="_button" @click="insertEmoji" v-tooltip="$ts.emoji"><i class="fas fa-laugh-squint"></i></button>
+			<button class="_button" @click="showActions" v-tooltip="$ts.plugin" v-if="postFormActions.length > 0"><i class="fas fa-plug"></i></button>
 		</footer>
 	</div>
 </div>
@@ -53,8 +53,6 @@
 
 <script lang="ts">
 import { defineComponent, defineAsyncComponent } from 'vue';
-import { faReply, faQuoteRight, faPaperPlane, faTimes, faUpload, faPollH, faGlobe, faHome, faUnlock, faEnvelope, faPlus, faPhotoVideo, faAt, faBiohazard, faPlug } from '@fortawesome/free-solid-svg-icons';
-import { faEyeSlash, faLaughSquint } from '@fortawesome/free-regular-svg-icons';
 import insertTextAtCursor from 'insert-text-at-cursor';
 import { length } from 'stringz';
 import { toASCII } from 'punycode/';
@@ -155,7 +153,6 @@ export default defineComponent({
 				}
 			}),
 			postFormActions,
-			faReply, faQuoteRight, faPaperPlane, faTimes, faUpload, faPollH, faGlobe, faHome, faUnlock, faEnvelope, faEyeSlash, faLaughSquint, faPlus, faPhotoVideo, faAt, faBiohazard, faPlug
 		};
 	},
 
@@ -724,7 +721,7 @@ export default defineComponent({
 					opacity: 0.7;
 				}
 
-				> [data-icon] {
+				> i {
 					margin-left: 6px;
 				}
 			}
diff --git a/src/client/components/remote-caution.vue b/src/client/components/remote-caution.vue
index c9c5ceea4c..985ae44694 100644
--- a/src/client/components/remote-caution.vue
+++ b/src/client/components/remote-caution.vue
@@ -1,10 +1,9 @@
 <template>
-<div class="jmgmzlwq _block"><Fa :icon="faExclamationTriangle" style="margin-right: 8px;"/>{{ $ts.remoteUserCaution }}<a :href="href" rel="nofollow noopener" target="_blank">{{ $ts.showOnRemote }}</a></div>
+<div class="jmgmzlwq _block"><i class="fas fa-exclamation-triangle" style="margin-right: 8px;"></i>{{ $ts.remoteUserCaution }}<a :href="href" rel="nofollow noopener" target="_blank">{{ $ts.showOnRemote }}</a></div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
 import * as os from '@client/os';
 
 export default defineComponent({
@@ -16,7 +15,6 @@ export default defineComponent({
 	},
 	data() {
 		return {
-			faExclamationTriangle
 		};
 	}
 });
diff --git a/src/client/components/signin.vue b/src/client/components/signin.vue
index 1cd79bac1d..2c883e0c32 100755
--- a/src/client/components/signin.vue
+++ b/src/client/components/signin.vue
@@ -10,7 +10,7 @@
 			</MkInput>
 			<MkInput v-model:value="password" type="password" :with-password-toggle="true" v-if="!user || user && !user.usePasswordLessLogin" required>
 				<span>{{ $ts.password }}</span>
-				<template #prefix><Fa :icon="faLock"/></template>
+				<template #prefix><i class="fas fa-lock"></i></template>
 			</MkInput>
 			<MkButton type="submit" primary :disabled="signing" style="margin: 0 auto;">{{ signing ? $ts.loggingIn : $ts.login }}</MkButton>
 		</div>
@@ -28,20 +28,20 @@
 				<p style="margin-bottom:0;">{{ $ts.twoStepAuthentication }}</p>
 				<MkInput v-model:value="password" type="password" :with-password-toggle="true" v-if="user && user.usePasswordLessLogin" required>
 					<span>{{ $ts.password }}</span>
-					<template #prefix><Fa :icon="faLock"/></template>
+					<template #prefix><i class="fas fa-lock"></i></template>
 				</MkInput>
 				<MkInput v-model:value="token" type="text" pattern="^[0-9]{6}$" autocomplete="off" spellcheck="false" required>
 					<span>{{ $ts.token }}</span>
-					<template #prefix><Fa :icon="faGavel"/></template>
+					<template #prefix><i class="fas fa-gavel"></i></template>
 				</MkInput>
 				<MkButton type="submit" :disabled="signing" primary style="margin: 0 auto;">{{ signing ? $ts.loggingIn : $ts.login }}</MkButton>
 			</div>
 		</div>
 	</div>
 	<div class="social _section">
-		<a class="_borderButton _gap" v-if="meta && meta.enableTwitterIntegration" :href="`${apiUrl}/signin/twitter`"><Fa :icon="faTwitter" style="margin-right: 4px;"/>{{ $t('signinWith', { x: 'Twitter' }) }}</a>
-		<a class="_borderButton _gap" v-if="meta && meta.enableGithubIntegration" :href="`${apiUrl}/signin/github`"><Fa :icon="faGithub" style="margin-right: 4px;"/>{{ $t('signinWith', { x: 'GitHub' }) }}</a>
-		<a class="_borderButton _gap" v-if="meta && meta.enableDiscordIntegration" :href="`${apiUrl}/signin/discord`"><Fa :icon="faDiscord" style="margin-right: 4px;"/>{{ $t('signinWith', { x: 'Discord' }) }}</a>
+		<a class="_borderButton _gap" v-if="meta && meta.enableTwitterIntegration" :href="`${apiUrl}/signin/twitter`"><i class="fab fa-twitter" style="margin-right: 4px;"></i>{{ $t('signinWith', { x: 'Twitter' }) }}</a>
+		<a class="_borderButton _gap" v-if="meta && meta.enableGithubIntegration" :href="`${apiUrl}/signin/github`"><i class="fab fa-github" style="margin-right: 4px;"></i>{{ $t('signinWith', { x: 'GitHub' }) }}</a>
+		<a class="_borderButton _gap" v-if="meta && meta.enableDiscordIntegration" :href="`${apiUrl}/signin/discord`"><i class="fab fa-discord" style="margin-right: 4px;"></i>{{ $t('signinWith', { x: 'Discord' }) }}</a>
 	</div>
 </form>
 </template>
@@ -49,8 +49,6 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { toUnicode } from 'punycode/';
-import { faLock, faGavel } from '@fortawesome/free-solid-svg-icons';
-import { faTwitter, faDiscord, faGithub } from '@fortawesome/free-brands-svg-icons';
 import MkButton from './ui/button.vue';
 import MkInput from './ui/input.vue';
 import { apiUrl, host } from '@client/config';
@@ -92,7 +90,6 @@ export default defineComponent({
 			credential: null,
 			challengeData: null,
 			queryingKey: false,
-			faLock, faGavel, faTwitter, faDiscord, faGithub
 		};
 	},
 
diff --git a/src/client/components/signup.vue b/src/client/components/signup.vue
index 66d01213bc..7b40561adf 100644
--- a/src/client/components/signup.vue
+++ b/src/client/components/signup.vue
@@ -3,37 +3,37 @@
 	<template v-if="meta">
 		<MkInput v-if="meta.disableRegistration" v-model:value="invitationCode" type="text" :autocomplete="Math.random()" spellcheck="false" required>
 			<span>{{ $ts.invitationCode }}</span>
-			<template #prefix><Fa :icon="faKey"/></template>
+			<template #prefix><i class="fas fa-key"></i></template>
 		</MkInput>
 		<MkInput v-model:value="username" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :autocomplete="Math.random()" spellcheck="false" required @update:value="onChangeUsername">
 			<span>{{ $ts.username }}</span>
 			<template #prefix>@</template>
 			<template #suffix>@{{ host }}</template>
 			<template #desc>
-				<span v-if="usernameState == 'wait'" style="color:#999"><Fa :icon="faSpinner" pulse fixed-width/> {{ $ts.checking }}</span>
-				<span v-if="usernameState == 'ok'" style="color:#3CB7B5"><Fa :icon="faCheck" fixed-width/> {{ $ts.available }}</span>
-				<span v-if="usernameState == 'unavailable'" style="color:#FF1161"><Fa :icon="faExclamationTriangle" fixed-width/> {{ $ts.unavailable }}</span>
-				<span v-if="usernameState == 'error'" style="color:#FF1161"><Fa :icon="faExclamationTriangle" fixed-width/> {{ $ts.error }}</span>
-				<span v-if="usernameState == 'invalid-format'" style="color:#FF1161"><Fa :icon="faExclamationTriangle" fixed-width/> {{ $ts.usernameInvalidFormat }}</span>
-				<span v-if="usernameState == 'min-range'" style="color:#FF1161"><Fa :icon="faExclamationTriangle" fixed-width/> {{ $ts.tooShort }}</span>
-				<span v-if="usernameState == 'max-range'" style="color:#FF1161"><Fa :icon="faExclamationTriangle" fixed-width/> {{ $ts.tooLong }}</span>
+				<span v-if="usernameState == 'wait'" style="color:#999"><i class="fas fa-spinner fa-pulse fa-fw"></i> {{ $ts.checking }}</span>
+				<span v-if="usernameState == 'ok'" style="color:#3CB7B5"><i class="fas fa-check fa-fw"></i> {{ $ts.available }}</span>
+				<span v-if="usernameState == 'unavailable'" style="color:#FF1161"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.unavailable }}</span>
+				<span v-if="usernameState == 'error'" style="color:#FF1161"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.error }}</span>
+				<span v-if="usernameState == 'invalid-format'" style="color:#FF1161"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.usernameInvalidFormat }}</span>
+				<span v-if="usernameState == 'min-range'" style="color:#FF1161"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.tooShort }}</span>
+				<span v-if="usernameState == 'max-range'" style="color:#FF1161"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.tooLong }}</span>
 			</template>
 		</MkInput>
 		<MkInput v-model:value="password" type="password" :autocomplete="Math.random()" required @update:value="onChangePassword">
 			<span>{{ $ts.password }}</span>
-			<template #prefix><Fa :icon="faLock"/></template>
+			<template #prefix><i class="fas fa-lock"></i></template>
 			<template #desc>
-				<p v-if="passwordStrength == 'low'" style="color:#FF1161"><Fa :icon="faExclamationTriangle" fixed-width/> {{ $ts.weakPassword }}</p>
-				<p v-if="passwordStrength == 'medium'" style="color:#3CB7B5"><Fa :icon="faCheck" fixed-width/> {{ $ts.normalPassword }}</p>
-				<p v-if="passwordStrength == 'high'" style="color:#3CB7B5"><Fa :icon="faCheck" fixed-width/> {{ $ts.strongPassword }}</p>
+				<p v-if="passwordStrength == 'low'" style="color:#FF1161"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.weakPassword }}</p>
+				<p v-if="passwordStrength == 'medium'" style="color:#3CB7B5"><i class="fas fa-check fa-fw"></i> {{ $ts.normalPassword }}</p>
+				<p v-if="passwordStrength == 'high'" style="color:#3CB7B5"><i class="fas fa-check fa-fw"></i> {{ $ts.strongPassword }}</p>
 			</template>
 		</MkInput>
 		<MkInput v-model:value="retypedPassword" type="password" :autocomplete="Math.random()" required @update:value="onChangePasswordRetype">
 			<span>{{ $ts.password }} ({{ $ts.retype }})</span>
-			<template #prefix><Fa :icon="faLock"/></template>
+			<template #prefix><i class="fas fa-lock"></i></template>
 			<template #desc>
-				<p v-if="passwordRetypeState == 'match'" style="color:#3CB7B5"><Fa :icon="faCheck" fixed-width/> {{ $ts.passwordMatched }}</p>
-				<p v-if="passwordRetypeState == 'not-match'" style="color:#FF1161"><Fa :icon="faExclamationTriangle" fixed-width/> {{ $ts.passwordNotMatched }}</p>
+				<p v-if="passwordRetypeState == 'match'" style="color:#3CB7B5"><i class="fas fa-check fa-fw"></i> {{ $ts.passwordMatched }}</p>
+				<p v-if="passwordRetypeState == 'not-match'" style="color:#FF1161"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.passwordNotMatched }}</p>
 			</template>
 		</MkInput>
 		<label v-if="meta.tosUrl" class="tou">
@@ -53,7 +53,6 @@
 
 <script lang="ts">
 import { defineComponent, defineAsyncComponent } from 'vue';
-import { faLock, faExclamationTriangle, faSpinner, faCheck, faKey } from '@fortawesome/free-solid-svg-icons';
 const getPasswordStrength = require('syuilo-password-strength');
 import { toUnicode } from 'punycode/';
 import { host, url } from '@client/config';
@@ -96,7 +95,6 @@ export default defineComponent({
 			ToSAgreement: false,
 			hCaptchaResponse: null,
 			reCaptchaResponse: null,
-			faLock, faExclamationTriangle, faSpinner, faCheck, faKey
 		}
 	},
 
diff --git a/src/client/components/sub-note-content.vue b/src/client/components/sub-note-content.vue
index 384bcb4563..ff89a9887b 100644
--- a/src/client/components/sub-note-content.vue
+++ b/src/client/components/sub-note-content.vue
@@ -3,7 +3,7 @@
 	<div class="body">
 		<span v-if="note.isHidden" style="opacity: 0.5">({{ $ts.private }})</span>
 		<span v-if="note.deletedAt" style="opacity: 0.5">({{ $ts.deleted }})</span>
-		<MkA class="reply" v-if="note.replyId" :to="`/notes/${note.replyId}`"><Fa :icon="faReply"/></MkA>
+		<MkA class="reply" v-if="note.replyId" :to="`/notes/${note.replyId}`"><i class="fas fa-reply"></i></MkA>
 		<Mfm v-if="note.text" :text="note.text" :author="note.user" :i="$i" :custom-emojis="note.emojis"/>
 		<MkA class="rp" v-if="note.renoteId" :to="`/notes/${note.renoteId}`">RN: ...</MkA>
 	</div>
@@ -20,7 +20,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faReply } from '@fortawesome/free-solid-svg-icons';
 import XPoll from './poll.vue';
 import XMediaList from './media-list.vue';
 import * as os from '@client/os';
@@ -38,7 +37,6 @@ export default defineComponent({
 	},
 	data() {
 		return {
-			faReply
 		};
 	}
 });
diff --git a/src/client/components/taskmanager.vue b/src/client/components/taskmanager.vue
index 1339e2e352..cb8cb78748 100644
--- a/src/client/components/taskmanager.vue
+++ b/src/client/components/taskmanager.vue
@@ -1,7 +1,7 @@
 <template>
 <XWindow ref="window" :initial-width="650" :initial-height="420" :can-resize="true" @closed="$emit('closed')">
 	<template #header>
-		<Fa :icon="faTerminal" style="margin-right: 0.5em;"/>Task Manager
+		<i class="fas fa-terminal" style="margin-right: 0.5em;"></i>Task Manager
 	</template>
 	<div class="qljqmnzj _monospace">
 		<MkTab v-model:value="tab" style="border-bottom: solid 0.5px var(--divider);">
@@ -78,7 +78,6 @@
 
 <script lang="ts">
 import { defineComponent, markRaw, onBeforeUnmount, ref, shallowRef } from 'vue';
-import { faTerminal } from '@fortawesome/free-solid-svg-icons';
 import XWindow from '@client/components/ui/window.vue';
 import MkTab from '@client/components/tab.vue';
 import MkButton from '@client/components/ui/button.vue';
@@ -139,7 +138,6 @@ export default defineComponent({
 			pools,
 			killPopup,
 			showReq,
-			faTerminal,
 		};
 	},
 });
diff --git a/src/client/components/ui/container.vue b/src/client/components/ui/container.vue
index ecd48876e8..cfd928518e 100644
--- a/src/client/components/ui/container.vue
+++ b/src/client/components/ui/container.vue
@@ -5,8 +5,8 @@
 		<div class="sub">
 			<slot name="func"></slot>
 			<button class="_button" v-if="foldable" @click="() => showBody = !showBody">
-				<template v-if="showBody"><Fa :icon="faAngleUp"/></template>
-				<template v-else><Fa :icon="faAngleDown"/></template>
+				<template v-if="showBody"><i class="fas fa-angle-up"></i></template>
+				<template v-else><i class="fas fa-angle-down"></i></template>
 			</button>
 		</div>
 	</header>
@@ -28,7 +28,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faAngleUp, faAngleDown } from '@fortawesome/free-solid-svg-icons';
 
 export default defineComponent({
 	props: {
@@ -68,7 +67,6 @@ export default defineComponent({
 			showBody: this.expanded,
 			omitted: null,
 			ignoreOmit: false,
-			faAngleUp, faAngleDown
 		};
 	},
 	mounted() {
@@ -169,7 +167,7 @@ export default defineComponent({
 			margin: 0;
 			padding: 12px 16px;
 
-			> ::v-deep([data-icon]) {
+			> ::v-deep(i) {
 				margin-right: 6px;
 			}
 
diff --git a/src/client/components/ui/folder.vue b/src/client/components/ui/folder.vue
index aee3c0ccaa..4281ec7778 100644
--- a/src/client/components/ui/folder.vue
+++ b/src/client/components/ui/folder.vue
@@ -4,8 +4,8 @@
 		<div class="title"><slot name="header"></slot></div>
 		<div class="divider"></div>
 		<button class="_button">
-			<template v-if="showBody"><Fa :icon="faAngleUp"/></template>
-			<template v-else><Fa :icon="faAngleDown"/></template>
+			<template v-if="showBody"><i class="fas fa-angle-up"></i></template>
+			<template v-else><i class="fas fa-angle-down"></i></template>
 		</button>
 	</header>
 	<transition name="folder-toggle"
@@ -23,7 +23,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faAngleUp, faAngleDown } from '@fortawesome/free-solid-svg-icons';
 
 const localStoragePrefix = 'ui:folder:';
 
@@ -43,7 +42,6 @@ export default defineComponent({
 	data() {
 		return {
 			showBody: (this.persistKey && localStorage.getItem(localStoragePrefix + this.persistKey)) ? localStorage.getItem(localStoragePrefix + this.persistKey) === 't' : this.expanded,
-			faAngleUp, faAngleDown
 		};
 	},
 	watch: {
@@ -109,7 +107,7 @@ export default defineComponent({
 			margin: 0;
 			padding: 12px 16px 12px 0;
 
-			> [data-icon] {
+			> i {
 				margin-right: 6px;
 			}
 
diff --git a/src/client/components/ui/info.vue b/src/client/components/ui/info.vue
index ad1b9ebb58..513682ef55 100644
--- a/src/client/components/ui/info.vue
+++ b/src/client/components/ui/info.vue
@@ -1,14 +1,13 @@
 <template>
 <div class="fpezltsf" :class="{ warn }">
-	<i v-if="warn"><Fa :icon="faExclamationTriangle"/></i>
-	<i v-else><Fa :icon="faInfoCircle"/></i>
+	<i v-if="warn" class="fas fa-exclamation-triangle"></i>
+	<i v-else class="fas fa-info-circle"></i>
 	<slot></slot>
 </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faInfoCircle, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
 import * as os from '@client/os';
 
 export default defineComponent({
@@ -21,7 +20,6 @@ export default defineComponent({
 	},
 	data() {
 		return {
-			faInfoCircle, faExclamationTriangle
 		};
 	}
 });
diff --git a/src/client/components/ui/input.vue b/src/client/components/ui/input.vue
index 302d96d026..7415d9896b 100644
--- a/src/client/components/ui/input.vue
+++ b/src/client/components/ui/input.vue
@@ -5,7 +5,7 @@
 		<span class="label" ref="labelEl"><slot></slot></span>
 		<span class="title" ref="title">
 			<slot name="title"></slot>
-			<span class="warning" v-if="invalid"><Fa :icon="faExclamationCircle"/>{{ $refs.input.validationMessage }}</span>
+			<span class="warning" v-if="invalid"><i class="fas fa-exclamation-circle"></i>{{ $refs.input.validationMessage }}</span>
 		</span>
 		<div class="prefix" ref="prefixEl"><slot name="prefix"></slot></div>
 		<input v-if="debounce" ref="inputEl"
@@ -56,7 +56,6 @@
 <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 * as os from '@client/os';
 
 export default defineComponent({
@@ -205,7 +204,6 @@ export default defineComponent({
 			focus,
 			onInput,
 			onKeydown,
-			faExclamationCircle,
 		};
 	},
 });
diff --git a/src/client/components/ui/menu.vue b/src/client/components/ui/menu.vue
index 1550fe40c7..eb96450774 100644
--- a/src/client/components/ui/menu.vue
+++ b/src/client/components/ui/menu.vue
@@ -13,25 +13,25 @@
 			<span><MkEllipsis/></span>
 		</span>
 		<MkA v-else-if="item.type === 'link'" :to="item.to" @click.passive="close()" :tabindex="i" class="_button item">
-			<Fa v-if="item.icon" :icon="item.icon" fixed-width/>
+			<i v-if="item.icon" class="fa-fw" :class="item.icon"></i>
 			<MkAvatar v-if="item.avatar" :user="item.avatar" class="avatar"/>
 			<span>{{ item.text }}</span>
-			<i v-if="item.indicate"><Fa :icon="faCircle"/></i>
+			<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
 		</MkA>
 		<a v-else-if="item.type === 'a'" :href="item.href" :target="item.target" :download="item.download" @click="close()" :tabindex="i" class="_button item">
-			<Fa v-if="item.icon" :icon="item.icon" fixed-width/>
+			<i v-if="item.icon" class="fa-fw" :class="item.icon"></i>
 			<span>{{ item.text }}</span>
-			<i v-if="item.indicate"><Fa :icon="faCircle"/></i>
+			<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
 		</a>
 		<button v-else-if="item.type === 'user'" @click="clicked(item.action, $event)" :tabindex="i" class="_button item">
 			<MkAvatar :user="item.user" class="avatar"/><MkUserName :user="item.user"/>
-			<i v-if="item.indicate"><Fa :icon="faCircle"/></i>
+			<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
 		</button>
 		<button v-else @click="clicked(item.action, $event)" :tabindex="i" class="_button item" :class="{ danger: item.danger }">
-			<Fa v-if="item.icon" :icon="item.icon" fixed-width/>
+			<i v-if="item.icon" class="fa-fw" :class="item.icon"></i>
 			<MkAvatar v-if="item.avatar" :user="item.avatar" class="avatar"/>
 			<span>{{ item.text }}</span>
-			<i v-if="item.indicate"><Fa :icon="faCircle"/></i>
+			<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
 		</button>
 	</template>
 	<span v-if="_items.length === 0" class="none item">
@@ -42,7 +42,6 @@
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
-import { faCircle } from '@fortawesome/free-solid-svg-icons';
 import { focusPrev, focusNext } from '@client/scripts/focus';
 import contains from '@client/scripts/contains';
 
@@ -65,7 +64,6 @@ export default defineComponent({
 	data() {
 		return {
 			_items: [],
-			faCircle,
 		};
 	},
 	computed: {
@@ -207,7 +205,7 @@ export default defineComponent({
 			opacity: 0.7;
 		}
 
-		> [data-icon] {
+		> i {
 			margin-right: 4px;
 			width: 20px;
 		}
@@ -218,7 +216,7 @@ export default defineComponent({
 			height: 20px;
 		}
 
-		> i {
+		> .indicator {
 			position: absolute;
 			top: 5px;
 			left: 13px;
diff --git a/src/client/components/ui/modal-window.vue b/src/client/components/ui/modal-window.vue
index 90b803801d..2d2b587662 100644
--- a/src/client/components/ui/modal-window.vue
+++ b/src/client/components/ui/modal-window.vue
@@ -2,12 +2,12 @@
 <MkModal ref="modal" @click="$emit('click')" @closed="$emit('closed')">
 	<div class="ebkgoccj _popup _narrow_" @keydown="onKeydown" :style="{ width: `${width}px`, height: scroll ? (height ? `${height}px` : null) :  (height ? `min(${height}px, 100%)` : '100%') }">
 		<div class="header">
-			<button class="_button" v-if="withOkButton" @click="$emit('close')"><Fa :icon="faTimes"/></button>
+			<button class="_button" v-if="withOkButton" @click="$emit('close')"><i class="fas fa-times"></i></button>
 			<span class="title">
 				<slot name="header"></slot>
 			</span>
-			<button class="_button" v-if="!withOkButton" @click="$emit('close')"><Fa :icon="faTimes"/></button>
-			<button class="_button" v-if="withOkButton" @click="$emit('ok')" :disabled="okButtonDisabled"><Fa :icon="faCheck"/></button>
+			<button class="_button" v-if="!withOkButton" @click="$emit('close')"><i class="fas fa-times"></i></button>
+			<button class="_button" v-if="withOkButton" @click="$emit('ok')" :disabled="okButtonDisabled"><i class="fas fa-check"></i></button>
 		</div>
 		<div class="body" v-if="padding">
 			<div class="_section">
@@ -23,7 +23,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faTimes, faCheck } from '@fortawesome/free-solid-svg-icons';
 import MkModal from './modal.vue';
 
 export default defineComponent({
@@ -72,7 +71,6 @@ export default defineComponent({
 
 	data() {
 		return {
-			faTimes, faCheck
 		};
 	},
 
diff --git a/src/client/components/ui/select.vue b/src/client/components/ui/select.vue
index d9250a62cd..e78c44fe0d 100644
--- a/src/client/components/ui/select.vue
+++ b/src/client/components/ui/select.vue
@@ -15,7 +15,7 @@
 		</select>
 		<div class="suffix">
 			<slot name="suffix">
-				<Fa :icon="faChevronDown"/>
+				<i class="fas fa-chevron-down"></i>
 			</slot>
 		</div>
 	</div>
@@ -25,7 +25,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
 
 export default defineComponent({
 	props: {
@@ -49,7 +48,6 @@ export default defineComponent({
 	data() {
 		return {
 			focused: false,
-			faChevronDown,
 		};
 	},
 	computed: {
diff --git a/src/client/components/ui/window.vue b/src/client/components/ui/window.vue
index 70676cdaf5..ce621ac6fd 100644
--- a/src/client/components/ui/window.vue
+++ b/src/client/components/ui/window.vue
@@ -4,13 +4,13 @@
 		<div class="body _popup _shadow _narrow_" @mousedown="onBodyMousedown" @keydown="onKeydown">
 			<div class="header" :class="{ mini }" @contextmenu.prevent.stop="onContextmenu">
 				<slot v-if="closeRight" name="buttons"><button class="_button" style="pointer-events: none;"></button></slot>
-				<button v-else class="_button" @click="close()"><Fa :icon="faTimes"/></button>
+				<button v-else class="_button" @click="close()"><i class="fas fa-times"></i></button>
 
 				<span class="title" @mousedown.prevent="onHeaderMousedown" @touchstart.prevent="onHeaderMousedown">
 					<slot name="header"></slot>
 				</span>
 
-				<button v-if="closeRight" class="_button" @click="close()"><Fa :icon="faTimes"/></button>
+				<button v-if="closeRight" class="_button" @click="close()"><i class="fas fa-times"></i></button>
 				<slot v-else name="buttons"><button class="_button" style="pointer-events: none;"></button></slot>
 			</div>
 			<div class="body" v-if="padding">
@@ -38,7 +38,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faTimes, faCheck } from '@fortawesome/free-solid-svg-icons';
 import contains from '@client/scripts/contains';
 import * as os from '@client/os';
 
@@ -114,7 +113,6 @@ export default defineComponent({
 		return {
 			showing: true,
 			id: Math.random().toString(), // TODO: UUIDとかにする
-			faTimes
 		};
 	},
 
diff --git a/src/client/components/url-preview.vue b/src/client/components/url-preview.vue
index 7495da6f24..1d44b04578 100644
--- a/src/client/components/url-preview.vue
+++ b/src/client/components/url-preview.vue
@@ -1,6 +1,6 @@
 <template>
 <div v-if="playerEnabled" class="player" :style="`padding: ${(player.height || 0) / (player.width || 1) * 100}% 0 0`">
-	<button class="disablePlayer" @click="playerEnabled = false" :title="$ts.disablePlayer"><Fa icon="times"/></button>
+	<button class="disablePlayer" @click="playerEnabled = false" :title="$ts.disablePlayer"><i class="fas fa-times"></i></button>
 	<iframe :src="player.url + (player.url.match(/\?/) ? '&autoplay=1&auto_play=1' : '?autoplay=1&auto_play=1')" :width="player.width || '100%'" :heigth="player.height || 250" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen />
 </div>
 <div v-else-if="tweetId && tweetExpanded" class="twitter" ref="twitter">
@@ -10,7 +10,7 @@
 	<transition name="zoom" mode="out-in">
 		<component :is="self ? 'MkA' : 'a'" :class="{ compact }" :[attr]="self ? url.substr(local.length) : url" rel="nofollow noopener" :target="target" :title="url" v-if="!fetching">
 			<div class="thumbnail" v-if="thumbnail" :style="`background-image: url('${thumbnail}')`">
-				<button class="_button" v-if="!playerEnabled && player.url" @click.prevent="playerEnabled = true" :title="$ts.enablePlayer"><Fa :icon="faPlayCircle"/></button>
+				<button class="_button" v-if="!playerEnabled && player.url" @click.prevent="playerEnabled = true" :title="$ts.enablePlayer"><i class="fas fa-play-circle"></i></button>
 			</div>
 			<article>
 				<header>
@@ -26,7 +26,7 @@
 	</transition>
 	<div class="expandTweet" v-if="tweetId">
 		<a @click="tweetExpanded = true">
-			<Fa :icon="faTwitter"/> {{ $ts.expandTweet }}
+			<i class="fab fa-twitter"></i> {{ $ts.expandTweet }}
 		</a>
 	</div>
 </div>
@@ -34,8 +34,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faPlayCircle } from '@fortawesome/free-regular-svg-icons';
-import { faTwitter } from '@fortawesome/free-brands-svg-icons'; 
 import { url as local, lang } from '@client/config';
 import * as os from '@client/os';
 
@@ -83,7 +81,6 @@ export default defineComponent({
 			self: self,
 			attr: self ? 'to' : 'href',
 			target: self ? null : '_blank',
-			faPlayCircle, faTwitter
 		};
 	},
 
diff --git a/src/client/components/user-list.vue b/src/client/components/user-list.vue
index 38d9df63bb..a7162ddcc2 100644
--- a/src/client/components/user-list.vue
+++ b/src/client/components/user-list.vue
@@ -9,7 +9,7 @@
 		<MkUserInfo class="user" v-for="user in users" :user="user" :key="user.id"/>
 	</div>
 	<button class="more" v-appear="$store.state.enableInfiniteScroll ? fetchMore : null" @click="fetchMore" :class="{ fetching: moreFetching }" v-show="more" :disabled="moreFetching">
-		<template v-if="moreFetching"><Fa icon="spinner" pulse fixed-width/></template>{{ moreFetching ? $ts.loading : $ts.loadMore }}
+		<template v-if="moreFetching"><i class="fas fa-spinner fa-pulse fa-fw"></i></template>{{ moreFetching ? $ts.loading : $ts.loadMore }}
 	</button>
 </div>
 </template>
@@ -83,7 +83,7 @@ export default defineComponent({
 			cursor: wait;
 		}
 
-		> [data-icon] {
+		> i {
 			margin-right: 4px;
 		}
 	}
diff --git a/src/client/components/user-select-dialog.vue b/src/client/components/user-select-dialog.vue
index a243e182e8..620c8eee28 100644
--- a/src/client/components/user-select-dialog.vue
+++ b/src/client/components/user-select-dialog.vue
@@ -44,7 +44,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faTimes, faCheck } from '@fortawesome/free-solid-svg-icons';
 import MkInput from './ui/input.vue';
 import XModalWindow from '@client/components/ui/modal-window.vue';
 import * as os from '@client/os';
@@ -67,7 +66,6 @@ export default defineComponent({
 			recentUsers: [],
 			users: [],
 			selected: null,
-			faTimes, faCheck
 		};
 	},
 
diff --git a/src/client/components/users-dialog.vue b/src/client/components/users-dialog.vue
index ebf867f702..90cd926f0c 100644
--- a/src/client/components/users-dialog.vue
+++ b/src/client/components/users-dialog.vue
@@ -2,7 +2,7 @@
 <div class="mk-users-dialog">
 	<div class="header">
 		<span>{{ title }}</span>
-		<button class="_button" @click="close()"><Fa :icon="faTimes"/></button>
+		<button class="_button" @click="close()"><i class="fas fa-times"></i></button>
 	</div>
 
 	<div class="users">
@@ -16,7 +16,7 @@
 	</div>
 	<button class="more _button" v-appear="$store.state.enableInfiniteScroll ? fetchMore : null" @click="fetchMore" v-show="more" :disabled="moreFetching">
 		<template v-if="!moreFetching">{{ $ts.loadMore }}</template>
-		<template v-if="moreFetching"><Fa :icon="faSpinner" pulse fixed-width/></template>
+		<template v-if="moreFetching"><i class="fas fa-spinner fa-pulse fa-fw"></i></template>
 	</button>
 
 	<p class="empty" v-if="empty">{{ $ts.noUsers }}</p>
@@ -27,7 +27,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faTimes } from '@fortawesome/free-solid-svg-icons';
 import paging from '@client/scripts/paging';
 import { userPage } from '../filters/user';
 
@@ -50,7 +49,6 @@ export default defineComponent({
 
 	data() {
 		return {
-			faTimes
 		};
 	},
 
diff --git a/src/client/components/visibility-picker.vue b/src/client/components/visibility-picker.vue
index caa2b116a6..492ec092e3 100644
--- a/src/client/components/visibility-picker.vue
+++ b/src/client/components/visibility-picker.vue
@@ -2,28 +2,28 @@
 <MkModal ref="modal" :src="src" @click="$refs.modal.close()" @closed="$emit('closed')">
 	<div class="gqyayizv _popup">
 		<button class="_button" @click="choose('public')" :class="{ active: v == 'public' }" data-index="1" key="public">
-			<div><Fa :icon="faGlobe"/></div>
+			<div><i class="fas fa-globe"></i></div>
 			<div>
 				<span>{{ $ts._visibility.public }}</span>
 				<span>{{ $ts._visibility.publicDescription }}</span>
 			</div>
 		</button>
 		<button class="_button" @click="choose('home')" :class="{ active: v == 'home' }" data-index="2" key="home">
-			<div><Fa :icon="faHome"/></div>
+			<div><i class="fas fa-home"></i></div>
 			<div>
 				<span>{{ $ts._visibility.home }}</span>
 				<span>{{ $ts._visibility.homeDescription }}</span>
 			</div>
 		</button>
 		<button class="_button" @click="choose('followers')" :class="{ active: v == 'followers' }" data-index="3" key="followers">
-			<div><Fa :icon="faUnlock"/></div>
+			<div><i class="fas fa-unlock"></i></div>
 			<div>
 				<span>{{ $ts._visibility.followers }}</span>
 				<span>{{ $ts._visibility.followersDescription }}</span>
 			</div>
 		</button>
 		<button :disabled="localOnly" class="_button" @click="choose('specified')" :class="{ active: v == 'specified' }" data-index="4" key="specified">
-			<div><Fa :icon="faEnvelope"/></div>
+			<div><i class="fas fa-envelope"></i></div>
 			<div>
 				<span>{{ $ts._visibility.specified }}</span>
 				<span>{{ $ts._visibility.specifiedDescription }}</span>
@@ -31,12 +31,12 @@
 		</button>
 		<div class="divider"></div>
 		<button class="_button localOnly" @click="localOnly = !localOnly" :class="{ active: localOnly }" data-index="5" key="localOnly">
-			<div><Fa :icon="faBiohazard"/></div>
+			<div><i class="fas fa-biohazard"></i></div>
 			<div>
 				<span>{{ $ts._visibility.localOnly }}</span>
 				<span>{{ $ts._visibility.localOnlyDescription }}</span>
 			</div>
-			<div><Fa :icon="localOnly ? faToggleOn : faToggleOff" :key="localOnly"/></div>
+			<div><i :class="localOnly ? 'fas fa-toggle-on' : 'fas fa-toggle-off'"></i></div>
 		</button>
 	</div>
 </MkModal>
@@ -44,8 +44,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faGlobe, faUnlock, faHome, faBiohazard, faToggleOn, faToggleOff } from '@fortawesome/free-solid-svg-icons';
-import { faEnvelope } from '@fortawesome/free-regular-svg-icons';
 import MkModal from '@client/components/ui/modal.vue';
 
 export default defineComponent({
@@ -70,7 +68,6 @@ export default defineComponent({
 		return {
 			v: this.currentVisibility,
 			localOnly: this.currentLocalOnly,
-			faGlobe, faUnlock, faEnvelope, faHome, faBiohazard, faToggleOn, faToggleOff
 		}
 	},
 	watch: {
diff --git a/src/client/components/waiting-dialog.vue b/src/client/components/waiting-dialog.vue
index c3a265af9c..97f18842e2 100644
--- a/src/client/components/waiting-dialog.vue
+++ b/src/client/components/waiting-dialog.vue
@@ -1,8 +1,8 @@
 <template>
 <MkModal ref="modal" @click="success ? done() : () => {}" @closed="$emit('closed')">
 	<div class="iuyakobc" :class="{ iconOnly: (text == null) || success }">
-		<Fa class="icon success" v-if="success" :icon="faCheck"/>
-		<Fa class="icon waiting" v-else :icon="faSpinner" pulse/>
+		<i v-if="success" class="fas fa-check icon success"></i>
+		<i v-else class="fas fa-spinner fa-pulse icon waiting"></i>
 		<div class="text" v-if="text && !success">{{ text }}<MkEllipsis/></div>
 	</div>
 </MkModal>
@@ -10,7 +10,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faCheck, faSpinner } from '@fortawesome/free-solid-svg-icons';
 import MkModal from '@client/components/ui/modal.vue';
 
 export default defineComponent({
@@ -37,7 +36,6 @@ export default defineComponent({
 
 	data() {
 		return {
-			faCheck, faSpinner,
 		};
 	},
 
diff --git a/src/client/components/widgets.vue b/src/client/components/widgets.vue
index 993b843cb1..790ca56112 100644
--- a/src/client/components/widgets.vue
+++ b/src/client/components/widgets.vue
@@ -6,7 +6,7 @@
 				<template #label>{{ $ts.selectWidget }}</template>
 				<option v-for="widget in widgetDefs" :value="widget" :key="widget">{{ $t(`_widgets.${widget}`) }}</option>
 			</MkSelect>
-			<MkButton inline @click="addWidget" primary><Fa :icon="faPlus"/> {{ $ts.add }}</MkButton>
+			<MkButton inline @click="addWidget" primary><i class="fas fa-plus"></i> {{ $ts.add }}</MkButton>
 			<MkButton inline @click="$emit('exit')">{{ $ts.close }}</MkButton>
 		</header>
 		<XDraggable
@@ -16,8 +16,8 @@
 		>
 			<template #item="{element}">
 				<div class="customize-container">
-					<button class="config _button" @click.prevent.stop="configWidget(element.id)"><Fa :icon="faCog"/></button>
-					<button class="remove _button" @click.prevent.stop="removeWidget(element)"><Fa :icon="faTimes"/></button>
+					<button class="config _button" @click.prevent.stop="configWidget(element.id)"><i class="fas fa-cog"></i></button>
+					<button class="remove _button" @click.prevent.stop="removeWidget(element)"><i class="fas fa-times"></i></button>
 					<component :is="`mkw-${element.name}`" :widget="element" :setting-callback="setting => settings[element.id] = setting" :column="column" @updateProps="updateWidget(element.id, $event)"/>
 				</div>
 			</template>
@@ -30,7 +30,6 @@
 <script lang="ts">
 import { defineComponent, defineAsyncComponent } from 'vue';
 import { v4 as uuid } from 'uuid';
-import { faTimes, faCog, faPlus } from '@fortawesome/free-solid-svg-icons';
 import MkSelect from '@client/components/ui/select.vue';
 import MkButton from '@client/components/ui/button.vue';
 import { widgets as widgetDefs } from '@client/widgets';
@@ -59,7 +58,6 @@ export default defineComponent({
 			widgetAdderSelected: null,
 			widgetDefs,
 			settings: {},
-			faTimes, faPlus, faCog
 		};
 	},
 
diff --git a/src/client/init.ts b/src/client/init.ts
index daedce4aee..8926b35539 100644
--- a/src/client/init.ts
+++ b/src/client/init.ts
@@ -7,7 +7,6 @@ import '@client/style.scss';
 import * as Sentry from '@sentry/browser';
 import { Integrations } from '@sentry/tracing';
 import { computed, createApp, watch } from 'vue';
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
 import widgets from '@client/widgets';
 import directives from '@client/directives';
@@ -184,8 +183,6 @@ app.config.globalProperties = {
 };
 
 app.use(router);
-// eslint-disable-next-line vue/component-definition-name-casing
-app.component('Fa', FontAwesomeIcon);
 
 widgets(app);
 directives(app);
diff --git a/src/client/pages/_error_.vue b/src/client/pages/_error_.vue
index 67c1a1991c..6caecd6eaf 100644
--- a/src/client/pages/_error_.vue
+++ b/src/client/pages/_error_.vue
@@ -3,7 +3,7 @@
 	<div class="_section">
 		<div class="mjndxjch _content">
 			<img src="https://xn--931a.moe/assets/error.jpg" class="_ghost"/>
-			<p><Fa :icon="faExclamationTriangle"/> {{ $ts.pageLoadError }}</p>
+			<p><i class="fas fa-exclamation-triangle"></i> {{ $ts.pageLoadError }}</p>
 			<p>{{ $ts.pageLoadErrorDescription }}</p>
 		</div>
 	</div>
@@ -12,7 +12,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
 import MkButton from '@client/components/ui/button.vue';
 import * as symbols from '@client/symbols';
 
@@ -24,9 +23,8 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.error,
-				icon: faExclamationTriangle
+				icon: 'fas fa-exclamation-triangle'
 			},
-			faExclamationTriangle
 		};
 	},
 });
diff --git a/src/client/pages/about-misskey.vue b/src/client/pages/about-misskey.vue
index aae8a7052a..1d57c80810 100644
--- a/src/client/pages/about-misskey.vue
+++ b/src/client/pages/about-misskey.vue
@@ -15,17 +15,17 @@
 		</section>
 		<FormGroup>
 			<FormLink to="https://github.com/misskey-dev/misskey" external>
-				<template #icon><Fa :icon="faCode"/></template>
+				<template #icon><i class="fas fa-code"></i></template>
 				{{ $ts._aboutMisskey.source }}
 				<template #suffix>GitHub</template>
 			</FormLink>
 			<FormLink to="https://crowdin.com/project/misskey" external>
-				<template #icon><Fa :icon="faLanguage"/></template>
+				<template #icon><i class="fas fa-language"></i></template>
 				{{ $ts._aboutMisskey.translation }}
 				<template #suffix>Crowdin</template>
 			</FormLink>
 			<FormLink to="https://www.patreon.com/syuilo" external>
-				<template #icon><Fa :icon="faHandHoldingMedical"/></template>
+				<template #icon><i class="fas fa-hand-holding-medical"></i></template>
 				{{ $ts._aboutMisskey.donate }}
 				<template #suffix>Patreon</template>
 			</FormLink>
@@ -54,7 +54,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faInfoCircle, faCode, faLanguage, faHandHoldingMedical, } from '@fortawesome/free-solid-svg-icons';
 import VanillaTilt from 'vanilla-tilt';
 import { version } from '@client/config';
 import FormLink from '@client/components/form/link.vue';
@@ -125,7 +124,6 @@ export default defineComponent({
 			easterEggReady: false,
 			easterEggEmojis: [],
 			easterEggEngine: null,
-			faInfoCircle, faCode, faLanguage, faHandHoldingMedical,
 		}
 	},
 
diff --git a/src/client/pages/about.vue b/src/client/pages/about.vue
index 4084256cf4..4f70998eee 100644
--- a/src/client/pages/about.vue
+++ b/src/client/pages/about.vue
@@ -40,7 +40,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
 import { version, instanceName } from '@client/config';
 import FormLink from '@client/components/form/link.vue';
 import FormBase from '@client/components/form/base.vue';
@@ -62,12 +61,11 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.instanceInfo,
-				icon: faInfoCircle
+				icon: 'fas fa-info-circle'
 			},
 			version,
 			instanceName,
 			stats: null,
-			faInfoCircle
 		}
 	},
 
diff --git a/src/client/pages/advanced-theme-editor.vue b/src/client/pages/advanced-theme-editor.vue
index fff525a32d..b40d9808ca 100644
--- a/src/client/pages/advanced-theme-editor.vue
+++ b/src/client/pages/advanced-theme-editor.vue
@@ -34,7 +34,7 @@
 						</div>
 						<div>
 							<div class="type" @click="chooseType($event, i)">
-								{{ getTypeOf(v) }} <Fa :icon="faChevronDown"/>
+								{{ getTypeOf(v) }} <i class="fas fa-chevron-down"></i>
 							</div>
 							<!-- default -->
 							<div v-if="v === null" v-text="baseProps[k]" class="default-value" />
@@ -92,7 +92,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faPalette, faChevronDown, faKeyboard } from '@fortawesome/free-solid-svg-icons';
 import * as JSON5 from 'json5';
 import { toUnicode } from 'punycode/';
 
@@ -125,7 +124,7 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.themeEditor,
-				icon: faPalette,
+				icon: 'fas fa-palette',
 			},
 			theme: [] as ThemeViewModel,
 			name: '',
@@ -135,7 +134,6 @@ export default defineComponent({
 			themeToImport: '',
 			changed: false,
 			lightTheme, darkTheme, themeProps,
-			faPalette, faChevronDown, faKeyboard,
 		}
 	},
 
diff --git a/src/client/pages/announcements.vue b/src/client/pages/announcements.vue
index 4e5f0e7f9c..a7ccb03588 100644
--- a/src/client/pages/announcements.vue
+++ b/src/client/pages/announcements.vue
@@ -8,7 +8,7 @@
 				<img v-if="announcement.imageUrl" :src="announcement.imageUrl"/>
 			</div>
 			<div class="_footer" v-if="$i && !announcement.isRead">
-				<MkButton @click="read(items, announcement, i)" primary><Fa :icon="faCheck"/> {{ $ts.gotIt }}</MkButton>
+				<MkButton @click="read(items, announcement, i)" primary><i class="fas fa-check"></i> {{ $ts.gotIt }}</MkButton>
 			</div>
 		</section>
 	</MkPagination>
@@ -17,7 +17,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faCheck, faBroadcastTower } from '@fortawesome/free-solid-svg-icons';
 import MkPagination from '@client/components/ui/pagination.vue';
 import MkButton from '@client/components/ui/button.vue';
 import * as os from '@client/os';
@@ -33,13 +32,12 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.announcements,
-				icon: faBroadcastTower
+				icon: 'fas fa-broadcast-tower'
 			},
 			pagination: {
 				endpoint: 'announcements',
 				limit: 10,
 			},
-			faCheck,
 		};
 	},
 
diff --git a/src/client/pages/api-console.vue b/src/client/pages/api-console.vue
index 669e814778..b153d10396 100644
--- a/src/client/pages/api-console.vue
+++ b/src/client/pages/api-console.vue
@@ -12,7 +12,7 @@
 		</MkSwitch>
 		<MkButton primary full @click="send" :disabled="sending">
 			<template v-if="sending"><MkEllipsis/></template>
-			<template v-else><Fa :icon="faPaperPlane"/> Send</template>
+			<template v-else><i class="fas fa-paper-plane"></i> Send</template>
 		</MkButton>
 	</div>
 	<div v-if="res" class="_block" style="padding: 24px;">
@@ -25,7 +25,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faTerminal, faPaperPlane } from '@fortawesome/free-solid-svg-icons';
 import * as JSON5 from 'json5';
 import MkButton from '@client/components/ui/button.vue';
 import MkInput from '@client/components/ui/input.vue';
@@ -43,7 +42,7 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: 'API console',
-				icon: faTerminal
+				icon: 'fas fa-terminal'
 			},
 
 			endpoint: '',
@@ -53,7 +52,6 @@ export default defineComponent({
 			endpoints: [],
 			withCredential: true,
 
-			faPaperPlane
 		};
 	},
 
diff --git a/src/client/pages/channel-editor.vue b/src/client/pages/channel-editor.vue
index 7216aaec4a..bc772d34fa 100644
--- a/src/client/pages/channel-editor.vue
+++ b/src/client/pages/channel-editor.vue
@@ -7,15 +7,15 @@
 			<MkTextarea v-model:value="description">{{ $ts.description }}</MkTextarea>
 
 			<div class="banner">
-				<MkButton v-if="bannerId == null" @click="setBannerImage"><Fa :icon="faPlus"/> {{ $ts._channel.setBanner }}</MkButton>
+				<MkButton v-if="bannerId == null" @click="setBannerImage"><i class="fas fa-plus"></i> {{ $ts._channel.setBanner }}</MkButton>
 				<div v-else-if="bannerUrl">
 					<img :src="bannerUrl" style="width: 100%;"/>
-					<MkButton @click="removeBannerImage()"><Fa :icon="faTrashAlt"/> {{ $ts._channel.removeBanner }}</MkButton>
+					<MkButton @click="removeBannerImage()"><i class="fas fa-trash-alt"></i> {{ $ts._channel.removeBanner }}</MkButton>
 				</div>
 			</div>
 		</div>
 		<div class="_footer">
-			<MkButton @click="save()" primary><Fa :icon="faSave"/> {{ channelId ? $ts.save : $ts.create }}</MkButton>
+			<MkButton @click="save()" primary><i class="fas fa-save"></i> {{ channelId ? $ts.save : $ts.create }}</MkButton>
 		</div>
 	</div>
 </div>
@@ -23,8 +23,6 @@
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue';
-import { faPlus, faSatelliteDish } from '@fortawesome/free-solid-svg-icons';
-import { faSave, faTrashAlt } from '@fortawesome/free-regular-svg-icons';
 import MkTextarea from '@client/components/ui/textarea.vue';
 import MkButton from '@client/components/ui/button.vue';
 import MkInput from '@client/components/ui/input.vue';
@@ -48,17 +46,16 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: computed(() => this.channelId ? {
 				title: this.$ts._channel.edit,
-				icon: faSatelliteDish,
+				icon: 'fas fa-satellite-dish',
 			} : {
 				title: this.$ts._channel.create,
-				icon: faSatelliteDish,
+				icon: 'fas fa-satellite-dish',
 			}),
 			channel: null,
 			name: null,
 			description: null,
 			bannerUrl: null,
 			bannerId: null,
-			faSave, faTrashAlt, faPlus,faSatelliteDish,
 		};
 	},
 
diff --git a/src/client/pages/channel.vue b/src/client/pages/channel.vue
index f98bb41a38..1504264af5 100644
--- a/src/client/pages/channel.vue
+++ b/src/client/pages/channel.vue
@@ -3,15 +3,15 @@
 	<div class="wpgynlbz _content _panel _gap" :class="{ hide: !showBanner }">
 		<XChannelFollowButton :channel="channel" :full="true" class="subscribe"/>
 		<button class="_button toggle" @click="() => showBanner = !showBanner">
-			<template v-if="showBanner"><Fa :icon="faAngleUp"/></template>
-			<template v-else><Fa :icon="faAngleDown"/></template>
+			<template v-if="showBanner"><i class="fas fa-angle-up"></i></template>
+			<template v-else><i class="fas fa-angle-down"></i></template>
 		</button>
 		<div class="hideOverlay" v-if="!showBanner">
 		</div>
 		<div :style="{ backgroundImage: channel.bannerUrl ? `url(${channel.bannerUrl})` : null }" class="banner">
 			<div class="status">
-				<div><Fa :icon="faUsers" fixed-width/><I18n :src="$ts._channel.usersCount" tag="span" style="margin-left: 4px;"><template #n><b>{{ channel.usersCount }}</b></template></I18n></div>
-				<div><Fa :icon="faPencilAlt" fixed-width/><I18n :src="$ts._channel.notesCount" tag="span" style="margin-left: 4px;"><template #n><b>{{ channel.notesCount }}</b></template></I18n></div>
+				<div><i class="fas fa-users fa-fw"></i><I18n :src="$ts._channel.usersCount" tag="span" style="margin-left: 4px;"><template #n><b>{{ channel.usersCount }}</b></template></I18n></div>
+				<div><i class="fas fa-pencil-alt fa-fw"></i><I18n :src="$ts._channel.notesCount" tag="span" style="margin-left: 4px;"><template #n><b>{{ channel.notesCount }}</b></template></I18n></div>
 			</div>
 			<div class="fade"></div>
 		</div>
@@ -28,8 +28,6 @@
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue';
-import { faSatelliteDish, faUsers, faPencilAlt, faAngleUp, faAngleDown } from '@fortawesome/free-solid-svg-icons';
-import {  } from '@fortawesome/free-regular-svg-icons';
 import MkContainer from '@client/components/ui/container.vue';
 import XPostForm from '@client/components/post-form.vue';
 import XTimeline from '@client/components/timeline.vue';
@@ -56,7 +54,7 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: computed(() => this.channel ? {
 				title: this.channel.name,
-				icon: faSatelliteDish,
+				icon: 'fas fa-satellite-dish',
 			} : null),
 			channel: null,
 			showBanner: true,
@@ -67,7 +65,6 @@ export default defineComponent({
 					channelId: this.channelId,
 				})
 			},
-			faSatelliteDish, faUsers, faPencilAlt, faAngleUp, faAngleDown,
 		};
 	},
 
@@ -111,7 +108,7 @@ export default defineComponent({
 		background: rgba(0, 0, 0, 0.5);
 		border-radius: 100%;
 		
-		> [data-icon] {
+		> i {
 			vertical-align: middle;
 		}
 	}
diff --git a/src/client/pages/channels.vue b/src/client/pages/channels.vue
index ebf1e7b871..7e3302959b 100644
--- a/src/client/pages/channels.vue
+++ b/src/client/pages/channels.vue
@@ -2,9 +2,9 @@
 <div>
 	<div class="_section" style="padding: 0;" v-if="$i">
 		<MkTab class="_content" v-model:value="tab">
-			<option value="featured"><Fa :icon="faFireAlt"/> {{ $ts._channel.featured }}</option>
-			<option value="following"><Fa :icon="faHeart"/> {{ $ts._channel.following }}</option>
-			<option value="owned"><Fa :icon="faEdit"/> {{ $ts._channel.owned }}</option>
+			<option value="featured"><i class="fas fa-fire-alt"></i> {{ $ts._channel.featured }}</option>
+			<option value="following"><i class="fas fa-heart"></i> {{ $ts._channel.following }}</option>
+			<option value="owned"><i class="fas fa-edit"></i> {{ $ts._channel.owned }}</option>
 		</MkTab>
 	</div>
 
@@ -22,7 +22,7 @@
 		</div>
 
 		<div class="_content grwlizim owned" v-if="tab === 'owned'">
-			<MkButton class="new" @click="create()"><Fa :icon="faPlus"/></MkButton>
+			<MkButton class="new" @click="create()"><i class="fas fa-plus"></i></MkButton>
 			<MkPagination :pagination="ownedPagination" #default="{items}">
 				<MkChannelPreview v-for="channel in items" class="_gap" :channel="channel" :key="channel.id"/>
 			</MkPagination>
@@ -33,8 +33,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faSatelliteDish, faPlus, faEdit, faFireAlt } from '@fortawesome/free-solid-svg-icons';
-import { faHeart } from '@fortawesome/free-regular-svg-icons';
 import MkChannelPreview from '@client/components/channel-preview.vue';
 import MkPagination from '@client/components/ui/pagination.vue';
 import MkButton from '@client/components/ui/button.vue';
@@ -49,9 +47,9 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.channel,
-				icon: faSatelliteDish,
+				icon: 'fas fa-satellite-dish',
 				action: {
-					icon: faPlus,
+					icon: 'fas fa-plus',
 					handler: this.create
 				}
 			},
@@ -68,7 +66,6 @@ export default defineComponent({
 				endpoint: 'channels/owned',
 				limit: 5,
 			},
-			faSatelliteDish, faPlus, faEdit, faHeart, faFireAlt
 		};
 	},
 	methods: {
diff --git a/src/client/pages/clip.vue b/src/client/pages/clip.vue
index ca3e051d51..050bd4c979 100644
--- a/src/client/pages/clip.vue
+++ b/src/client/pages/clip.vue
@@ -15,7 +15,6 @@
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue';
-import { faEllipsisH, faPaperclip, faPencilAlt, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
 import MkContainer from '@client/components/ui/container.vue';
 import XPostForm from '@client/components/post-form.vue';
 import XNotes from '@client/components/notes.vue';
@@ -40,9 +39,9 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: computed(() => this.clip ? {
 				title: this.clip.name,
-				icon: faPaperclip,
+				icon: 'fas fa-paperclip',
 				action: {
-					icon: faEllipsisH,
+					icon: 'fas fa-ellipsis'H,
 					handler: this.menu
 				}
 			} : null),
@@ -81,7 +80,7 @@ export default defineComponent({
 	methods: {
 		menu(ev) {
 			os.modalMenu([this.isOwned ? {
-				icon: faPencilAlt,
+				icon: 'fas fa-pencil-alt',
 				text: this.$ts.edit,
 				action: async () => {
 					const { canceled, result } = await os.form(this.clip.name, {
@@ -111,7 +110,7 @@ export default defineComponent({
 					});
 				}
 			} : undefined, this.isOwned ? {
-				icon: faTrashAlt,
+				icon: 'fas fa-trash-alt',
 				text: this.$ts.delete,
 				danger: true,
 				action: async () => {
diff --git a/src/client/pages/doc.vue b/src/client/pages/doc.vue
index cf3628dafb..a4cf25033e 100644
--- a/src/client/pages/doc.vue
+++ b/src/client/pages/doc.vue
@@ -10,7 +10,6 @@
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue';
-import { faQuestionCircle } from '@fortawesome/free-solid-svg-icons'
 import MarkdownIt from 'markdown-it';
 import MarkdownItAnchor from 'markdown-it-anchor';
 import { url, lang } from '@client/config';
@@ -41,7 +40,7 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: computed(() => this.title ? {
 				title: this.title,
-				icon: faQuestionCircle,
+				icon: 'fas fa-question-circle',
 			} : null),
 			title: null,
 			body: null,
diff --git a/src/client/pages/docs.vue b/src/client/pages/docs.vue
index 92eab86716..e51528f83d 100644
--- a/src/client/pages/docs.vue
+++ b/src/client/pages/docs.vue
@@ -14,7 +14,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faQuestionCircle } from '@fortawesome/free-solid-svg-icons'
 import { url, lang } from '@client/config';
 import * as symbols from '@client/symbols';
 
@@ -23,10 +22,9 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.help,
-				icon: faQuestionCircle
+				icon: 'fas fa-question-circle'
 			},
 			docs: [],
-			faQuestionCircle
 		}
 	},
 
diff --git a/src/client/pages/drive.vue b/src/client/pages/drive.vue
index 33bbfbc50f..753114f725 100644
--- a/src/client/pages/drive.vue
+++ b/src/client/pages/drive.vue
@@ -6,7 +6,6 @@
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue';
-import { faCloud } from '@fortawesome/free-solid-svg-icons';
 import XDrive from '@client/components/drive.vue';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';
@@ -20,7 +19,7 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: computed(() => this.folder ? this.folder.name : this.$ts.drive),
-				icon: faCloud,
+				icon: 'fas fa-cloud',
 				menu: () => this.$refs.drive.getMenu()
 			},
 			folder: null,
diff --git a/src/client/pages/explore.vue b/src/client/pages/explore.vue
index dc0803237b..7bcb09d8c5 100644
--- a/src/client/pages/explore.vue
+++ b/src/client/pages/explore.vue
@@ -2,7 +2,7 @@
 <div class="lznhrdub _root">
 	<div>
 		<div class="_isolated">
-			<MkInput v-model:value="query" :debounce="true" type="search"><template #icon><Fa :icon="faSearch"/></template><span>{{ $ts.searchUser }}</span></MkInput>
+			<MkInput v-model:value="query" :debounce="true" type="search"><template #icon><i class="fas fa-search"></i></template><span>{{ $ts.searchUser }}</span></MkInput>
 		</div>
 
 		<XUserList v-if="query" class="_gap" :pagination="searchPagination" ref="search"/>
@@ -14,19 +14,19 @@
 
 		<template v-if="tag == null">
 			<MkFolder class="_gap" persist-key="explore-pinned-users">
-				<template #header><Fa :icon="faBookmark" fixed-width style="margin-right: 0.5em;"/>{{ $ts.pinnedUsers }}</template>
+				<template #header><i class="fas fa-bookmark fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.pinnedUsers }}</template>
 				<XUserList :pagination="pinnedUsers"/>
 			</MkFolder>
 			<MkFolder class="_gap" persist-key="explore-popular-users">
-				<template #header><Fa :icon="faChartLine" fixed-width style="margin-right: 0.5em;"/>{{ $ts.popularUsers }}</template>
+				<template #header><i class="fas fa-chart-line fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.popularUsers }}</template>
 				<XUserList :pagination="popularUsers"/>
 			</MkFolder>
 			<MkFolder class="_gap" persist-key="explore-recently-updated-users">
-				<template #header><Fa :icon="faCommentAlt" fixed-width style="margin-right: 0.5em;"/>{{ $ts.recentlyUpdatedUsers }}</template>
+				<template #header><i class="fas fa-comment-alt fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.recentlyUpdatedUsers }}</template>
 				<XUserList :pagination="recentlyUpdatedUsers"/>
 			</MkFolder>
 			<MkFolder class="_gap" persist-key="explore-recently-registered-users">
-				<template #header><Fa :icon="faPlus" fixed-width style="margin-right: 0.5em;"/>{{ $ts.recentlyRegisteredUsers }}</template>
+				<template #header><i class="fas fa-plus fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.recentlyRegisteredUsers }}</template>
 				<XUserList :pagination="recentlyRegisteredUsers"/>
 			</MkFolder>
 		</template>
@@ -37,7 +37,7 @@
 		</div>
 
 		<MkFolder :foldable="true" :expanded="false" ref="tags" class="_gap">
-			<template #header><Fa :icon="faHashtag" fixed-width style="margin-right: 0.5em;"/>{{ $ts.popularTags }}</template>
+			<template #header><i class="fas fa-hashtag fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.popularTags }}</template>
 
 			<div class="vxjfqztj">
 				<MkA v-for="tag in tagsLocal" :to="`/explore/tags/${tag.tag}`" :key="'local:' + tag.tag" class="local">{{ tag.tag }}</MkA>
@@ -46,21 +46,21 @@
 		</MkFolder>
 
 		<MkFolder v-if="tag != null" :key="`${tag}`" class="_gap">
-			<template #header><Fa :icon="faHashtag" fixed-width style="margin-right: 0.5em;"/>{{ tag }}</template>
+			<template #header><i class="fas fa-hashtag fa-fw" style="margin-right: 0.5em;"></i>{{ tag }}</template>
 			<XUserList :pagination="tagUsers"/>
 		</MkFolder>
 
 		<template v-if="tag == null">
 			<MkFolder class="_gap">
-				<template #header><Fa :icon="faChartLine" fixed-width style="margin-right: 0.5em;"/>{{ $ts.popularUsers }}</template>
+				<template #header><i class="fas fa-chart-line fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.popularUsers }}</template>
 				<XUserList :pagination="popularUsersF"/>
 			</MkFolder>
 			<MkFolder class="_gap">
-				<template #header><Fa :icon="faCommentAlt" fixed-width style="margin-right: 0.5em;"/>{{ $ts.recentlyUpdatedUsers }}</template>
+				<template #header><i class="fas fa-comment-alt fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.recentlyUpdatedUsers }}</template>
 				<XUserList :pagination="recentlyUpdatedUsersF"/>
 			</MkFolder>
 			<MkFolder class="_gap">
-				<template #header><Fa :icon="faRocket" fixed-width style="margin-right: 0.5em;"/>{{ $ts.recentlyDiscoveredUsers }}</template>
+				<template #header><i class="fas fa-rocket fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.recentlyDiscoveredUsers }}</template>
 				<XUserList :pagination="recentlyRegisteredUsersF"/>
 			</MkFolder>
 		</template>
@@ -70,8 +70,6 @@
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue';
-import { faChartLine, faPlus, faHashtag, faRocket, faSearch } from '@fortawesome/free-solid-svg-icons';
-import { faBookmark, faCommentAlt } from '@fortawesome/free-regular-svg-icons';
 import XUserList from '@client/components/user-list.vue';
 import MkFolder from '@client/components/ui/folder.vue';
 import MkInput from '@client/components/ui/input.vue';
@@ -97,7 +95,7 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.explore,
-				icon: faHashtag
+				icon: 'fas fa-hashtag'
 			},
 			pinnedUsers: { endpoint: 'pinned-users' },
 			popularUsers: { endpoint: 'users', limit: 10, noPaging: true, params: {
@@ -139,7 +137,6 @@ export default defineComponent({
 			stats: null,
 			query: null,
 			num: number,
-			faBookmark, faChartLine, faCommentAlt, faPlus, faHashtag, faRocket, faSearch,
 		};
 	},
 
diff --git a/src/client/pages/favorites.vue b/src/client/pages/favorites.vue
index 7ecd327137..408ab222b5 100644
--- a/src/client/pages/favorites.vue
+++ b/src/client/pages/favorites.vue
@@ -6,7 +6,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faStar } from '@fortawesome/free-solid-svg-icons';
 import Progress from '@client/scripts/loading';
 import XNotes from '@client/components/notes.vue';
 import * as os from '@client/os';
@@ -21,7 +20,7 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.favorites,
-				icon: faStar
+				icon: 'fas fa-star'
 			},
 			pagination: {
 				endpoint: 'i/favorites',
diff --git a/src/client/pages/featured.vue b/src/client/pages/featured.vue
index cd7343f583..21818ba617 100644
--- a/src/client/pages/featured.vue
+++ b/src/client/pages/featured.vue
@@ -6,7 +6,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faFireAlt } from '@fortawesome/free-solid-svg-icons';
 import Progress from '@client/scripts/loading';
 import XNotes from '@client/components/notes.vue';
 import * as symbols from '@client/symbols';
@@ -20,14 +19,13 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.featured,
-				icon: faFireAlt
+				icon: 'fas fa-fire-alt'
 			},
 			pagination: {
 				endpoint: 'notes/featured',
 				limit: 10,
 				offsetMode: true
 			},
-			faFireAlt
 		};
 	},
 
diff --git a/src/client/pages/follow-requests.vue b/src/client/pages/follow-requests.vue
index 31c00d63cd..9f27a6baa8 100644
--- a/src/client/pages/follow-requests.vue
+++ b/src/client/pages/follow-requests.vue
@@ -19,8 +19,8 @@
 						<Mfm :text="req.follower.description" :is-note="false" :author="req.follower" :i="$i" :custom-emojis="req.follower.emojis" :plain="true" :nowrap="true"/>
 					</div>
 					<div class="actions">
-						<button class="_button" @click="accept(req.follower)"><Fa :icon="faCheck"/></button>
-						<button class="_button" @click="reject(req.follower)"><Fa :icon="faTimes"/></button>
+						<button class="_button" @click="accept(req.follower)"><i class="fas fa-check"></i></button>
+						<button class="_button" @click="reject(req.follower)"><i class="fas fa-times"></i></button>
 					</div>
 				</div>
 			</div>
@@ -31,7 +31,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faUserClock, faCheck, faTimes } from '@fortawesome/free-solid-svg-icons';
 import MkPagination from '@client/components/ui/pagination.vue';
 import { userPage, acct } from '../filters/user';
 import * as os from '@client/os';
@@ -46,13 +45,12 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.followRequests,
-				icon: faUserClock,
+				icon: 'fas fa-user-clock',
 			},
 			pagination: {
 				endpoint: 'following/requests/list',
 				limit: 10,
 			},
-			faCheck, faTimes, faUserClock
 		};
 	},
 
diff --git a/src/client/pages/instance-info.vue b/src/client/pages/instance-info.vue
index 1a294b858b..662b82ddb1 100644
--- a/src/client/pages/instance-info.vue
+++ b/src/client/pages/instance-info.vue
@@ -133,7 +133,6 @@
 
 <script lang="ts">
 import { defineAsyncComponent, defineComponent } from 'vue';
-import { faExternalLinkAlt, faInfoCircle } from '@fortawesome/free-solid-svg-icons';
 import Chart from 'chart.js';
 import FormObjectView from '@client/components/form/object-view.vue';
 import FormTextarea from '@client/components/form/textarea.vue';
@@ -185,10 +184,10 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.instanceInfo,
-				icon: faInfoCircle,
+				icon: 'fas fa-info-circle',
 				actions: [{
 					text: `https://${this.host}`,
-					icon: faExternalLinkAlt,
+					icon: 'fas fa-external-link-alt',
 					handler: () => {
 						window.open(`https://${this.host}`, '_blank');
 					}
diff --git a/src/client/pages/instance/abuses.vue b/src/client/pages/instance/abuses.vue
index c8355b0683..7666bc1a44 100644
--- a/src/client/pages/instance/abuses.vue
+++ b/src/client/pages/instance/abuses.vue
@@ -63,8 +63,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faPlus, faUsers, faSearch, faBookmark, faMicrophoneSlash, faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
-import { faSnowflake, faBookmark as farBookmark } from '@fortawesome/free-regular-svg-icons';
 import parseAcct from '@/misc/acct/parse';
 import MkButton from '@client/components/ui/button.vue';
 import MkInput from '@client/components/ui/input.vue';
@@ -86,7 +84,7 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.abuseReports,
-				icon: faExclamationCircle
+				icon: 'fas fa-exclamation-circle'
 			},
 			searchUsername: '',
 			searchHost: '',
@@ -102,7 +100,6 @@ export default defineComponent({
 					targetUserOrigin: this.targetUserOrigin,
 				}),
 			},
-			faPlus, faUsers, faSearch, faBookmark, farBookmark, faMicrophoneSlash, faSnowflake
 		}
 	},
 
diff --git a/src/client/pages/instance/announcements.vue b/src/client/pages/instance/announcements.vue
index f9d58a29c4..6a00476f9f 100644
--- a/src/client/pages/instance/announcements.vue
+++ b/src/client/pages/instance/announcements.vue
@@ -2,7 +2,7 @@
 <div class="ztgjmzrw">
 	<div class="_section">
 		<div class="_content">
-			<MkButton @click="add()" primary style="margin: 0 auto 16px auto;"><Fa :icon="faPlus"/> {{ $ts.add }}</MkButton>
+			<MkButton @click="add()" primary style="margin: 0 auto 16px auto;"><i class="fas fa-plus"></i> {{ $ts.add }}</MkButton>
 			<section class="_card _gap announcements" v-for="announcement in announcements">
 				<div class="_content announcement">
 					<MkInput v-model:value="announcement.title">
@@ -16,8 +16,8 @@
 					</MkInput>
 					<p v-if="announcement.reads">{{ $t('nUsersRead', { n: announcement.reads }) }}</p>
 					<div class="buttons">
-						<MkButton class="button" inline @click="save(announcement)" primary><Fa :icon="faSave"/> {{ $ts.save }}</MkButton>
-						<MkButton class="button" inline @click="remove(announcement)"><Fa :icon="faTrashAlt"/> {{ $ts.remove }}</MkButton>
+						<MkButton class="button" inline @click="save(announcement)" primary><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
+						<MkButton class="button" inline @click="remove(announcement)"><i class="fas fa-trash-alt"></i> {{ $ts.remove }}</MkButton>
 					</div>
 				</div>
 			</section>
@@ -28,8 +28,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faBroadcastTower, faPlus } from '@fortawesome/free-solid-svg-icons';
-import { faSave, faTrashAlt } from '@fortawesome/free-regular-svg-icons';
 import MkButton from '@client/components/ui/button.vue';
 import MkInput from '@client/components/ui/input.vue';
 import MkTextarea from '@client/components/ui/textarea.vue';
@@ -47,10 +45,9 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.announcements,
-				icon: faBroadcastTower
+				icon: 'fas fa-broadcast-tower'
 			},
 			announcements: [],
-			faBroadcastTower, faSave, faTrashAlt, faPlus
 		}
 	},
 
diff --git a/src/client/pages/instance/emoji-edit-dialog.vue b/src/client/pages/instance/emoji-edit-dialog.vue
index 34eca47b4e..9ab53c42af 100644
--- a/src/client/pages/instance/emoji-edit-dialog.vue
+++ b/src/client/pages/instance/emoji-edit-dialog.vue
@@ -16,14 +16,13 @@
 			<span>{{ $ts.tags }}</span>
 			<template #desc>{{ $ts.setMultipleBySeparatingWithSpace }}</template>
 		</MkInput>
-		<MkButton danger @click="del()"><Fa :icon="faTrashAlt"/> {{ $ts.delete }}</MkButton>
+		<MkButton danger @click="del()"><i class="fas fa-trash-alt"></i> {{ $ts.delete }}</MkButton>
 	</div>
 </XModalWindow>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faTrashAlt } from '@fortawesome/free-regular-svg-icons';
 import XModalWindow from '@client/components/ui/modal-window.vue';
 import MkButton from '@client/components/ui/button.vue';
 import MkInput from '@client/components/ui/input.vue';
@@ -51,7 +50,6 @@ export default defineComponent({
 			category: this.emoji.category,
 			aliases: this.emoji.aliases?.join(' '),
 			categories: [],
-			faTrashAlt,
 		}
 	},
 
diff --git a/src/client/pages/instance/emojis.vue b/src/client/pages/instance/emojis.vue
index 722ed0063f..88bebb40e0 100644
--- a/src/client/pages/instance/emojis.vue
+++ b/src/client/pages/instance/emojis.vue
@@ -9,8 +9,8 @@
 
 	<div class="_section">
 		<div class="local" v-if="tab === 'local'">
-			<MkButton primary @click="add" style="margin: 0 auto var(--margin) auto;"><Fa :icon="faPlus"/> {{ $ts.addEmoji }}</MkButton>
-			<MkInput v-model:value="query" :debounce="true" type="search"><template #icon><Fa :icon="faSearch"/></template><span>{{ $ts.search }}</span></MkInput>
+			<MkButton primary @click="add" style="margin: 0 auto var(--margin) auto;"><i class="fas fa-plus"></i> {{ $ts.addEmoji }}</MkButton>
+			<MkInput v-model:value="query" :debounce="true" type="search"><template #icon><i class="fas fa-search"></i></template><span>{{ $ts.search }}</span></MkInput>
 			<MkPagination :pagination="pagination" ref="emojis">
 				<template #empty><span>{{ $ts.noCustomEmojis }}</span></template>
 				<template #default="{items}">
@@ -28,7 +28,7 @@
 		</div>
 
 		<div class="remote" v-else-if="tab === 'remote'">
-			<MkInput v-model:value="queryRemote" :debounce="true" type="search"><template #icon><Fa :icon="faSearch"/></template><span>{{ $ts.search }}</span></MkInput>
+			<MkInput v-model:value="queryRemote" :debounce="true" type="search"><template #icon><i class="fas fa-search"></i></template><span>{{ $ts.search }}</span></MkInput>
 			<MkInput v-model:value="host" :debounce="true"><span>{{ $ts.host }}</span></MkInput>
 			<MkPagination :pagination="remotePagination" ref="remoteEmojis">
 				<template #empty><span>{{ $ts.noCustomEmojis }}</span></template>
@@ -51,8 +51,6 @@
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue';
-import { faPlus, faSave, faSearch } from '@fortawesome/free-solid-svg-icons';
-import { faTrashAlt, faLaugh } from '@fortawesome/free-regular-svg-icons';
 import MkButton from '@client/components/ui/button.vue';
 import MkInput from '@client/components/ui/input.vue';
 import MkPagination from '@client/components/ui/pagination.vue';
@@ -73,9 +71,9 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.customEmojis,
-				icon: faLaugh,
+				icon: 'fas fa-laugh',
 				action: {
-					icon: faPlus,
+					icon: 'fas fa-plus',
 					handler: this.add
 				}
 			},
@@ -98,7 +96,6 @@ export default defineComponent({
 					host: (this.host && this.host !== '') ? this.host : null
 				}))
 			},
-			faTrashAlt, faPlus, faLaugh, faSave, faSearch,
 		}
 	},
 
@@ -144,7 +141,7 @@ export default defineComponent({
 				text: ':' + emoji.name + ':',
 			}, {
 				text: this.$ts.import,
-				icon: faPlus,
+				icon: 'fas fa-plus',
 				action: () => { this.im(emoji) }
 			}], ev.currentTarget || ev.target);
 		}
diff --git a/src/client/pages/instance/federation.vue b/src/client/pages/instance/federation.vue
index 2a820e5baf..1b69fc291e 100644
--- a/src/client/pages/instance/federation.vue
+++ b/src/client/pages/instance/federation.vue
@@ -42,14 +42,14 @@
 		<div class="_content">
 			<MkPagination :pagination="pagination" #default="{items}" ref="instances" :key="host + state">
 				<div class="ppgwaixt _panel" v-for="instance in items" :key="instance.id" @click="info(instance)">
-					<div class="host"><Fa :icon="faCircle" class="indicator" :class="getStatus(instance)"/><b>{{ instance.host }}</b></div>
+					<div class="host"><i class="fas fa-circle indicator" :class="getStatus(instance)"></i><b>{{ instance.host }}</b></div>
 					<div class="status">
-						<span class="sub" v-if="instance.followersCount > 0"><Fa :icon="faCaretDown" class="icon"/>Sub</span>
-						<span class="sub" v-else><Fa :icon="faCaretDown" class="icon"/>-</span>
-						<span class="pub" v-if="instance.followingCount > 0"><Fa :icon="faCaretUp" class="icon"/>Pub</span>
-						<span class="pub" v-else><Fa :icon="faCaretUp" class="icon"/>-</span>
-						<span class="lastCommunicatedAt"><Fa :icon="faExchangeAlt" class="icon"/><MkTime :time="instance.lastCommunicatedAt"/></span>
-						<span class="latestStatus"><Fa :icon="faTrafficLight" class="icon"/>{{ instance.latestStatus || '-' }}</span>
+						<span class="sub" v-if="instance.followersCount > 0"><i class="fas fa-caret-down icon"></i>Sub</span>
+						<span class="sub" v-else><i class="fas fa-caret-down icon"></i>-</span>
+						<span class="pub" v-if="instance.followingCount > 0"><i class="fas fa-caret-up icon"></i>Pub</span>
+						<span class="pub" v-else><i class="fas fa-caret-up icon"></i>-</span>
+						<span class="lastCommunicatedAt"><i class="fas fa-exchange-alt icon"></i><MkTime :time="instance.lastCommunicatedAt"/></span>
+						<span class="latestStatus"><i class="fas fa-traffic-light icon"></i>{{ instance.latestStatus || '-' }}</span>
 					</div>
 				</div>
 			</MkPagination>
@@ -60,7 +60,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faGlobe, faCircle, faExchangeAlt, faCaretDown, faCaretUp, faTrafficLight } from '@fortawesome/free-solid-svg-icons';
 import MkButton from '@client/components/ui/button.vue';
 import MkInput from '@client/components/ui/input.vue';
 import MkSelect from '@client/components/ui/select.vue';
@@ -81,7 +80,7 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.federation,
-				icon: faGlobe
+				icon: 'fas fa-globe'
 			},
 			host: '',
 			state: 'federating',
@@ -103,7 +102,6 @@ export default defineComponent({
 						{})
 				})
 			},
-			faGlobe, faCircle, faExchangeAlt, faCaretDown, faCaretUp, faTrafficLight
 		}
 	},
 
diff --git a/src/client/pages/instance/file-dialog.vue b/src/client/pages/instance/file-dialog.vue
index 85c03e3dce..1220a5193f 100644
--- a/src/client/pages/instance/file-dialog.vue
+++ b/src/client/pages/instance/file-dialog.vue
@@ -21,8 +21,8 @@
 		</div>
 		<div class="_section">
 			<div class="_content">
-				<MkButton full @click="showUser"><Fa :icon="faExternalLinkSquareAlt"/> {{ $ts.user }}</MkButton>
-				<MkButton full danger @click="del"><Fa :icon="faTrashAlt"/> {{ $ts.delete }}</MkButton>
+				<MkButton full @click="showUser"><i class="fas fa-external-link-square-alt"></i> {{ $ts.user }}</MkButton>
+				<MkButton full danger @click="del"><i class="fas fa-trash-alt"></i> {{ $ts.delete }}</MkButton>
 			</div>
 		</div>
 		<div class="_section" v-if="info">
@@ -36,8 +36,6 @@
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue';
-import { faTimes, faBookmark, faKey, faSync, faMicrophoneSlash, faExternalLinkSquareAlt } from '@fortawesome/free-solid-svg-icons';
-import { faSnowflake, faTrashAlt, faBookmark as farBookmark  } from '@fortawesome/free-regular-svg-icons';
 import MkButton from '@client/components/ui/button.vue';
 import MkSwitch from '@client/components/ui/switch.vue';
 import XModalWindow from '@client/components/ui/modal-window.vue';
@@ -67,7 +65,6 @@ export default defineComponent({
 			file: null,
 			info: null,
 			isSensitive: false,
-			faTimes, faBookmark, farBookmark, faKey, faSync, faMicrophoneSlash, faSnowflake, faTrashAlt, faExternalLinkSquareAlt
 		};
 	},
 
diff --git a/src/client/pages/instance/files.vue b/src/client/pages/instance/files.vue
index e7de050df8..ed46dd466c 100644
--- a/src/client/pages/instance/files.vue
+++ b/src/client/pages/instance/files.vue
@@ -2,17 +2,17 @@
 <div class="xrmjdkdw">
 	<div class="_section">
 		<div class="_content">
-			<MkButton primary @click="clear()"><Fa :icon="faTrashAlt"/> {{ $ts.clearCachedFiles }}</MkButton>
+			<MkButton primary @click="clear()"><i class="fas fa-trash-alt"></i> {{ $ts.clearCachedFiles }}</MkButton>
 		</div>
 	</div>
 
 	<div class="_section lookup">
-		<div class="_title"><Fa :icon="faSearch"/> {{ $ts.lookup }}</div>
+		<div class="_title"><i class="fas fa-search"></i> {{ $ts.lookup }}</div>
 		<div class="_content">
 			<MkInput class="target" v-model:value="q" type="text" @enter="find()">
 				<span>{{ $ts.fileIdOrUrl }}</span>
 			</MkInput>
-			<MkButton @click="find()" primary><Fa :icon="faSearch"/> {{ $ts.lookup }}</MkButton>
+			<MkButton @click="find()" primary><i class="fas fa-search"></i> {{ $ts.lookup }}</MkButton>
 		</div>
 	</div>
 
@@ -62,8 +62,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faCloud, faSearch } from '@fortawesome/free-solid-svg-icons';
-import { faTrashAlt } from '@fortawesome/free-regular-svg-icons';
 import MkButton from '@client/components/ui/button.vue';
 import MkInput from '@client/components/ui/input.vue';
 import MkSelect from '@client/components/ui/select.vue';
@@ -86,7 +84,7 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.files,
-				icon: faCloud
+				icon: 'fas fa-cloud'
 			},
 			q: null,
 			origin: 'local',
@@ -101,7 +99,6 @@ export default defineComponent({
 					hostname: (this.hostname && this.hostname !== '') ? this.hostname : null,
 				}),
 			},
-			faTrashAlt, faCloud, faSearch,
 		}
 	},
 
diff --git a/src/client/pages/instance/index.metrics.vue b/src/client/pages/instance/index.metrics.vue
index 17ebf5d0d6..9dd115240e 100644
--- a/src/client/pages/instance/index.metrics.vue
+++ b/src/client/pages/instance/index.metrics.vue
@@ -1,15 +1,15 @@
 <template>
 <div>
 	<MkFolder>
-		<template #header><Fa :icon="faHeartbeat"/> {{ $ts.metrics }}</template>
+		<template #header><i class="fas fa-heartbeat"></i> {{ $ts.metrics }}</template>
 		<div class="_section" style="padding: 0 var(--margin);">
 			<div class="_content">
 				<MkContainer :foldable="false" class="_gap">
-					<template #header><Fa :icon="faMicrochip"/>{{ $ts.cpuAndMemory }}</template>
+					<template #header><i class="fas fa-microchip"></i>{{ $ts.cpuAndMemory }}</template>
 					<!--
 					<template #func>
-						<button class="_button" @click="resume" :disabled="!paused"><Fa :icon="faPlay"/></button>
-						<button class="_button" @click="pause" :disabled="paused"><Fa :icon="faPause"/></button>
+						<button class="_button" @click="resume" :disabled="!paused"><i class="fas fa-play"></i></button>
+						<button class="_button" @click="pause" :disabled="paused"><i class="fas fa-pause"></i></button>
 					</template>
 					-->
 
@@ -28,11 +28,11 @@
 				</MkContainer>
 
 				<MkContainer :foldable="false" class="_gap">
-					<template #header><Fa :icon="faHdd"/> {{ $ts.disk }}</template>
+					<template #header><i class="fas fa-hdd"></i> {{ $ts.disk }}</template>
 					<!--
 					<template #func>
-						<button class="_button" @click="resume" :disabled="!paused"><Fa :icon="faPlay"/></button>
-						<button class="_button" @click="pause" :disabled="paused"><Fa :icon="faPause"/></button>
+						<button class="_button" @click="resume" :disabled="!paused"><i class="fas fa-play"></i></button>
+						<button class="_button" @click="pause" :disabled="paused"><i class="fas fa-pause"></i></button>
 					</template>
 					-->
 
@@ -51,11 +51,11 @@
 				</MkContainer>
 
 				<MkContainer :foldable="false" class="_gap">
-					<template #header><Fa :icon="faExchangeAlt"/> {{ $ts.network }}</template>
+					<template #header><i class="fas fa-exchange-alt"></i> {{ $ts.network }}</template>
 					<!--
 					<template #func>
-						<button class="_button" @click="resume" :disabled="!paused"><Fa :icon="faPlay"/></button>
-						<button class="_button" @click="pause" :disabled="paused"><Fa :icon="faPause"/></button>
+						<button class="_button" @click="resume" :disabled="!paused"><i class="fas fa-play"></i></button>
+						<button class="_button" @click="pause" :disabled="paused"><i class="fas fa-pause"></i></button>
 					</template>
 					-->
 
@@ -75,11 +75,11 @@
 	</MkFolder>
 
 	<MkFolder>
-		<template #header><Fa :icon="faClipboardList"/> {{ $ts.jobQueue }}</template>
+		<template #header><i class="fas fa-clipboard-list"></i> {{ $ts.jobQueue }}</template>
 
 		<div class="vkyrmkwb" :style="{ gridTemplateRows: queueHeight }">
 			<MkContainer :foldable="false" :scrollable="true" :resize-base-el="() => $el">
-				<template #header><Fa :icon="faExclamationTriangle"/> {{ $ts.delayed }}</template>
+				<template #header><i class="fas fa-exclamation-triangle"></i> {{ $ts.delayed }}</template>
 
 				<div class="_content">
 					<div class="_keyValue" v-for="job in jobs" :key="job[0]">
@@ -89,10 +89,10 @@
 				</div>
 			</MkContainer>
 			<XQueue :connection="queueConnection" domain="inbox" ref="queue" class="queue">
-				<template #title><Fa :icon="faExchangeAlt"/> In</template>
+				<template #title><i class="fas fa-exchange-alt"></i> In</template>
 			</XQueue>
 			<XQueue :connection="queueConnection" domain="deliver" class="queue">
-				<template #title><Fa :icon="faExchangeAlt"/> Out</template>
+				<template #title><i class="fas fa-exchange-alt"></i> Out</template>
 			</XQueue>
 		</div>
 	</MkFolder>
@@ -101,7 +101,6 @@
 
 <script lang="ts">
 import { defineComponent, markRaw } from 'vue';
-import { faPlay, faPause, faDatabase, faServer, faExchangeAlt, faMicrochip, faHdd, faStream, faTrashAlt, faInfoCircle, faExclamationTriangle, faTachometerAlt, faHeartbeat, faClipboardList } from '@fortawesome/free-solid-svg-icons';
 import Chart from 'chart.js';
 import MkButton from '@client/components/ui/button.vue';
 import MkSelect from '@client/components/ui/select.vue';
@@ -153,7 +152,6 @@ export default defineComponent({
 			overviewHeight: '1fr',
 			queueHeight: '1fr',
 			paused: false,
-			faPlay, faPause, faDatabase, faServer, faExchangeAlt, faMicrochip, faHdd, faStream, faTrashAlt, faInfoCircle, faExclamationTriangle, faTachometerAlt, faHeartbeat, faClipboardList,
 		}
 	},
 
diff --git a/src/client/pages/instance/index.vue b/src/client/pages/instance/index.vue
index 731acd8f00..f0240718aa 100644
--- a/src/client/pages/instance/index.vue
+++ b/src/client/pages/instance/index.vue
@@ -1,13 +1,13 @@
 <template>
 <div v-if="meta" v-show="page === 'index'" class="xhexznfu _section">
 	<MkFolder>
-		<template #header><Fa :icon="faTachometerAlt"/> {{ $ts.overview }}</template>
+		<template #header><i class="fas fa-tachometer-alt"></i> {{ $ts.overview }}</template>
 
 		<div class="sboqnrfi" :style="{ gridTemplateRows: overviewHeight }">
 			<MkInstanceStats :chart-limit="300" :detailed="true" class="_gap" ref="stats"/>
 
 			<MkContainer :foldable="true" class="_gap">
-				<template #header><Fa :icon="faInfoCircle"/>{{ $ts.instanceInfo }}</template>
+				<template #header><i class="fas fa-info-circle"></i>{{ $ts.instanceInfo }}</template>
 
 				<div class="_content">
 					<div class="_keyValue"><b>Misskey</b><span>v{{ version }}</span></div>
@@ -20,7 +20,7 @@
 			</MkContainer>
 			
 			<MkContainer :foldable="true" :scrollable="true" class="_gap" style="height: 300px;">
-				<template #header><Fa :icon="faDatabase"/>{{ $ts.database }}</template>
+				<template #header><i class="fas fa-database"></i>{{ $ts.database }}</template>
 
 				<div class="_content" v-if="dbInfo">
 					<table style="border-collapse: collapse; width: 100%;">
@@ -42,7 +42,7 @@
 </div>
 <div v-if="page === 'logs'" class="_section">
 	<MkFolder>
-		<template #header><Fa :icon="faStream"/> {{ $ts.logs }}</template>
+		<template #header><i class="fas fa-stream"></i> {{ $ts.logs }}</template>
 
 		<div class="_keyValue" v-for="log in modLogs">
 			<b>{{ log.type }}</b><span>by {{ log.user.username }}</span><MkTime :time="log.createdAt" style="opacity: 0.7;"/>
@@ -56,7 +56,6 @@
 
 <script lang="ts">
 import { computed, defineComponent, markRaw } from 'vue';
-import { faPlay, faPause, faDatabase, faServer, faExchangeAlt, faMicrochip, faHdd, faStream, faTrashAlt, faInfoCircle, faExclamationTriangle, faTachometerAlt, faHeartbeat, faClipboardList } from '@fortawesome/free-solid-svg-icons';
 import VueJsonPretty from 'vue-json-pretty';
 import MkInstanceStats from '@client/components/instance-stats.vue';
 import MkButton from '@client/components/ui/button.vue';
@@ -91,21 +90,21 @@ export default defineComponent({
 					id: 'index',
 					title: null,
 					tooltip: this.$ts.instance,
-					icon: faServer,
+					icon: 'fas fa-server',
 					onClick: () => { this.page = 'index'; },
 					selected: computed(() => this.page === 'index')
 				}, {
 					id: 'metrics',
 					title: null,
 					tooltip: this.$ts.metrics,
-					icon: faHeartbeat,
+					icon: 'fas fa-heartbeat',
 					onClick: () => { this.page = 'metrics'; },
 					selected: computed(() => this.page === 'metrics')
 				}, {
 					id: 'logs',
 					title: null,
 					tooltip: this.$ts.logs,
-					icon: faStream,
+					icon: 'fas fa-stream',
 					onClick: () => { this.page = 'logs'; },
 					selected: computed(() => this.page === 'logs')
 				}]
@@ -117,7 +116,6 @@ export default defineComponent({
 			serverInfo: null,
 			modLogs: [],
 			dbInfo: null,
-			faPlay, faPause, faDatabase, faServer, faExchangeAlt, faMicrochip, faHdd, faStream, faTrashAlt, faInfoCircle, faExclamationTriangle, faTachometerAlt, faHeartbeat, faClipboardList,
 		}
 	},
 
diff --git a/src/client/pages/instance/instance.vue b/src/client/pages/instance/instance.vue
index 1adb3ab9d2..f52e5d866b 100644
--- a/src/client/pages/instance/instance.vue
+++ b/src/client/pages/instance/instance.vue
@@ -106,11 +106,11 @@
 			<MkSwitch :value="isBlocked" class="switch" @update:value="changeBlock">{{ $ts.blockThisInstance }}</MkSwitch>
 			<details>
 				<summary>{{ $ts.deleteAllFiles }}</summary>
-				<MkButton @click="deleteAllFiles()" style="margin: 0.5em 0 0.5em 0;"><Fa :icon="faTrashAlt"/> {{ $ts.deleteAllFiles }}</MkButton>
+				<MkButton @click="deleteAllFiles()" style="margin: 0.5em 0 0.5em 0;"><i class="fas fa-trash-alt"></i> {{ $ts.deleteAllFiles }}</MkButton>
 			</details>
 			<details>
 				<summary>{{ $ts.removeAllFollowing }}</summary>
-				<MkButton @click="removeAllFollowing()" style="margin: 0.5em 0 0.5em 0;"><Fa :icon="faMinusCircle"/> {{ $ts.removeAllFollowing }}</MkButton>
+				<MkButton @click="removeAllFollowing()" style="margin: 0.5em 0 0.5em 0;"><i class="fas fa-minus-circle"></i> {{ $ts.removeAllFollowing }}</MkButton>
 				<MkInfo warn>{{ $t('removeAllFollowingDescription', { host: instance.host }) }}</MkInfo>
 			</details>
 		</div>
@@ -125,7 +125,6 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import Chart from 'chart.js';
-import { faTimes, faCrosshairs, faCloudDownloadAlt, faCloudUploadAlt, faUsers, faPencilAlt, faFileImage, faDatabase, faTrafficLight, faLongArrowAltUp, faLongArrowAltDown, faMinusCircle, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
 import XModalWindow from '@client/components/ui/modal-window.vue';
 import MkUsersDialog from '@client/components/users-dialog.vue';
 import MkSelect from '@client/components/ui/select.vue';
@@ -174,7 +173,6 @@ export default defineComponent({
 			chartInstance: null,
 			chartSrc: 'requests',
 			chartSpan: 'hour',
-			faTimes, faCrosshairs, faCloudDownloadAlt, faCloudUploadAlt, faUsers, faPencilAlt, faFileImage, faDatabase, faTrafficLight, faLongArrowAltUp, faLongArrowAltDown, faMinusCircle, faTrashAlt
 		};
 	},
 
diff --git a/src/client/pages/instance/logs.vue b/src/client/pages/instance/logs.vue
index f27546a401..7b634259d3 100644
--- a/src/client/pages/instance/logs.vue
+++ b/src/client/pages/instance/logs.vue
@@ -24,14 +24,12 @@
 		</code>
 	</div>
 
-	<MkButton @click="deleteAllLogs()" primary><Fa :icon="faTrashAlt"/> {{ $ts.deleteAll }}</MkButton>
+	<MkButton @click="deleteAllLogs()" primary><i class="fas fa-trash-alt"></i> {{ $ts.deleteAll }}</MkButton>
 </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faStream } from '@fortawesome/free-solid-svg-icons';
-import { faTrashAlt } from '@fortawesome/free-regular-svg-icons';
 import MkButton from '@client/components/ui/button.vue';
 import MkInput from '@client/components/ui/input.vue';
 import MkSelect from '@client/components/ui/select.vue';
@@ -51,12 +49,11 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.serverLogs,
-				icon: faStream
+				icon: 'fas fa-stream'
 			},
 			logs: [],
 			logLevel: 'all',
 			logDomain: '',
-			faTrashAlt,
 		}
 	},
 
diff --git a/src/client/pages/instance/queue.vue b/src/client/pages/instance/queue.vue
index 249babcf41..0c1e0e51b5 100644
--- a/src/client/pages/instance/queue.vue
+++ b/src/client/pages/instance/queue.vue
@@ -1,14 +1,14 @@
 <template>
 <div>
 	<XQueue :connection="connection" domain="inbox">
-		<template #title><Fa :icon="faExchangeAlt"/> In</template>
+		<template #title><i class="fas fa-exchange-alt"></i> In</template>
 	</XQueue>
 	<XQueue :connection="connection" domain="deliver">
-		<template #title><Fa :icon="faExchangeAlt"/> Out</template>
+		<template #title><i class="fas fa-exchange-alt"></i> Out</template>
 	</XQueue>
 	<section class="_section">
 		<div class="_content">
-			<MkButton @click="clear()"><Fa :icon="faTrashAlt"/> {{ $ts.clearQueue }}</MkButton>
+			<MkButton @click="clear()"><i class="fas fa-trash-alt"></i> {{ $ts.clearQueue }}</MkButton>
 		</div>
 	</section>
 </div>
@@ -16,8 +16,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faExchangeAlt } from '@fortawesome/free-solid-svg-icons';
-import { faTrashAlt } from '@fortawesome/free-regular-svg-icons';
 import MkButton from '@client/components/ui/button.vue';
 import XQueue from './queue.chart.vue';
 import * as os from '@client/os';
@@ -33,10 +31,9 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.jobQueue,
-				icon: faExchangeAlt,
+				icon: 'fas fa-exchange-alt',
 			},
 			connection: os.stream.useSharedConnection('queueStats'),
-			faExchangeAlt, faTrashAlt
 		}
 	},
 
diff --git a/src/client/pages/instance/relays.vue b/src/client/pages/instance/relays.vue
index d97a07cbb2..dbf75ea53b 100644
--- a/src/client/pages/instance/relays.vue
+++ b/src/client/pages/instance/relays.vue
@@ -1,21 +1,21 @@
 <template>
 <div class="relaycxt">
 	<section class="_section add">
-		<div class="_title"><Fa :icon="faPlus"/> {{ $ts.addRelay }}</div>
+		<div class="_title"><i class="fas fa-plus"></i> {{ $ts.addRelay }}</div>
 		<div class="_content">
 			<MkInput v-model:value="inbox">
 				<span>{{ $ts.inboxUrl }}</span>
 			</MkInput>
-			<MkButton @click="add(inbox)" primary><Fa :icon="faPlus"/> {{ $ts.add }}</MkButton>
+			<MkButton @click="add(inbox)" primary><i class="fas fa-plus"></i> {{ $ts.add }}</MkButton>
 		</div>
 	</section>
 
 	<section class="_section relays">
-		<div class="_title"><Fa :icon="faProjectDiagram"/> {{ $ts.addedRelays }}</div>
+		<div class="_title"><i class="fas fa-project-diagram"></i> {{ $ts.addedRelays }}</div>
 		<div class="_content relay" v-for="relay in relays" :key="relay.inbox">
 			<div>{{ relay.inbox }}</div>
 			<div>{{ $t(`_relayStatus.${relay.status}`) }}</div>
-			<MkButton class="button" inline @click="remove(relay.inbox)"><Fa :icon="faTrashAlt"/> {{ $ts.remove }}</MkButton>
+			<MkButton class="button" inline @click="remove(relay.inbox)"><i class="fas fa-trash-alt"></i> {{ $ts.remove }}</MkButton>
 		</div>
 	</section>
 </div>
@@ -23,8 +23,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faPlus, faProjectDiagram } from '@fortawesome/free-solid-svg-icons';
-import { faSave, faTrashAlt } from '@fortawesome/free-regular-svg-icons';
 import MkButton from '@client/components/ui/button.vue';
 import MkInput from '@client/components/ui/input.vue';
 import * as os from '@client/os';
@@ -40,11 +38,10 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.relays,
-				icon: faProjectDiagram,
+				icon: 'fas fa-project-diagram',
 			},
 			relays: [],
 			inbox: '',
-			faPlus, faProjectDiagram, faSave, faTrashAlt
 		}
 	},
 
diff --git a/src/client/pages/instance/settings.vue b/src/client/pages/instance/settings.vue
index 038ecfd5ac..b827a77649 100644
--- a/src/client/pages/instance/settings.vue
+++ b/src/client/pages/instance/settings.vue
@@ -1,20 +1,20 @@
 <template>
 <div v-if="meta" class="_section">
 	<section class="_card _gap">
-		<div class="_title"><Fa :icon="faInfoCircle"/> {{ $ts.basicInfo }}</div>
+		<div class="_title"><i class="fas fa-info-circle"></i> {{ $ts.basicInfo }}</div>
 		<div class="_content">
 			<MkInput v-model:value="name">{{ $ts.instanceName }}</MkInput>
 			<MkTextarea v-model:value="description">{{ $ts.instanceDescription }}</MkTextarea>
-			<MkInput v-model:value="iconUrl"><template #icon><Fa :icon="faLink"/></template>{{ $ts.iconUrl }}</MkInput>
-			<MkInput v-model:value="bannerUrl"><template #icon><Fa :icon="faLink"/></template>{{ $ts.bannerUrl }}</MkInput>
-			<MkInput v-model:value="backgroundImageUrl"><template #icon><Fa :icon="faLink"/></template>{{ $ts.backgroundImageUrl }}</MkInput>
-			<MkInput v-model:value="logoImageUrl"><template #icon><Fa :icon="faLink"/></template>{{ $ts.logoImageUrl }}</MkInput>
-			<MkInput v-model:value="tosUrl"><template #icon><Fa :icon="faLink"/></template>{{ $ts.tosUrl }}</MkInput>
+			<MkInput v-model:value="iconUrl"><template #icon><i class="fas fa-link"></i></template>{{ $ts.iconUrl }}</MkInput>
+			<MkInput v-model:value="bannerUrl"><template #icon><i class="fas fa-link"></i></template>{{ $ts.bannerUrl }}</MkInput>
+			<MkInput v-model:value="backgroundImageUrl"><template #icon><i class="fas fa-link"></i></template>{{ $ts.backgroundImageUrl }}</MkInput>
+			<MkInput v-model:value="logoImageUrl"><template #icon><i class="fas fa-link"></i></template>{{ $ts.logoImageUrl }}</MkInput>
+			<MkInput v-model:value="tosUrl"><template #icon><i class="fas fa-link"></i></template>{{ $ts.tosUrl }}</MkInput>
 			<MkInput v-model:value="maintainerName">{{ $ts.maintainerName }}</MkInput>
-			<MkInput v-model:value="maintainerEmail" type="email"><template #icon><Fa :icon="faEnvelope"/></template>{{ $ts.maintainerEmail }}</MkInput>
+			<MkInput v-model:value="maintainerEmail" type="email"><template #icon><i class="fas fa-envelope"></i></template>{{ $ts.maintainerEmail }}</MkInput>
 		</div>
 		<div class="_footer">
-			<MkButton primary @click="save(true)"><Fa :icon="faSave"/> {{ $ts.save }}</MkButton>
+			<MkButton primary @click="save(true)"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
 		</div>
 	</section>
 
@@ -22,7 +22,7 @@
 
 	<section class="_card _gap">
 		<div class="_content">
-			<MkInput v-model:value="maxNoteTextLength" type="number" :save="() => save()"><template #icon><Fa :icon="faPencilAlt"/></template>{{ $ts.maxNoteTextLength }}</MkInput>
+			<MkInput v-model:value="maxNoteTextLength" type="number" :save="() => save()"><template #icon><i class="fas fa-pencil-alt"></i></template>{{ $ts.maxNoteTextLength }}</MkInput>
 		</div>
 		<div class="_content">
 			<MkSwitch v-model:value="enableLocalTimeline" @update:value="save()">{{ $ts.enableLocalTimeline }}</MkSwitch>
@@ -35,7 +35,7 @@
 	</section>
 
 	<section class="_card _gap">
-		<div class="_title"><Fa :icon="faUser"/> {{ $ts.registration }}</div>
+		<div class="_title"><i class="fas fa-user"></i> {{ $ts.registration }}</div>
 		<div class="_content">
 			<MkSwitch v-model:value="enableRegistration" @update:value="save()">{{ $ts.enableRegistration }}</MkSwitch>
 			<MkButton v-if="!enableRegistration" @click="invite">{{ $ts.invite }}</MkButton>
@@ -43,12 +43,12 @@
 	</section>
 
 	<section class="_card _gap">
-		<div class="_title"><Fa :icon="faShieldAlt"/> {{ $ts.hcaptcha }}</div>
+		<div class="_title"><i class="fas fa-shield-alt"></i> {{ $ts.hcaptcha }}</div>
 		<div class="_content">
 			<MkSwitch v-model:value="enableHcaptcha">{{ $ts.enableHcaptcha }}</MkSwitch>
 			<template v-if="enableHcaptcha">
-				<MkInput v-model:value="hcaptchaSiteKey" :disabled="!enableHcaptcha"><template #icon><Fa :icon="faKey"/></template>{{ $ts.hcaptchaSiteKey }}</MkInput>
-				<MkInput v-model:value="hcaptchaSecretKey" :disabled="!enableHcaptcha"><template #icon><Fa :icon="faKey"/></template>{{ $ts.hcaptchaSecretKey }}</MkInput>
+				<MkInput v-model:value="hcaptchaSiteKey" :disabled="!enableHcaptcha"><template #icon><i class="fas fa-key"></i></template>{{ $ts.hcaptchaSiteKey }}</MkInput>
+				<MkInput v-model:value="hcaptchaSecretKey" :disabled="!enableHcaptcha"><template #icon><i class="fas fa-key"></i></template>{{ $ts.hcaptchaSecretKey }}</MkInput>
 			</template>
 		</div>
 		<div class="_content" v-if="enableHcaptcha">
@@ -56,17 +56,17 @@
 			<captcha v-if="enableHcaptcha" provider="hcaptcha" :sitekey="hcaptchaSiteKey || '10000000-ffff-ffff-ffff-000000000001'"/>
 		</div>
 		<div class="_footer">
-			<MkButton primary @click="save(true)"><Fa :icon="faSave"/> {{ $ts.save }}</MkButton>
+			<MkButton primary @click="save(true)"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
 		</div>
 	</section>
 
 	<section class="_card _gap">
-		<div class="_title"><Fa :icon="faShieldAlt"/> {{ $ts.recaptcha }}</div>
+		<div class="_title"><i class="fas fa-shield-alt"></i> {{ $ts.recaptcha }}</div>
 		<div class="_content">
 			<MkSwitch v-model:value="enableRecaptcha" ref="enableRecaptcha">{{ $ts.enableRecaptcha }}</MkSwitch>
 			<template v-if="enableRecaptcha">
-				<MkInput v-model:value="recaptchaSiteKey" :disabled="!enableRecaptcha"><template #icon><Fa :icon="faKey"/></template>{{ $ts.recaptchaSiteKey }}</MkInput>
-				<MkInput v-model:value="recaptchaSecretKey" :disabled="!enableRecaptcha"><template #icon><Fa :icon="faKey"/></template>{{ $ts.recaptchaSecretKey }}</MkInput>
+				<MkInput v-model:value="recaptchaSiteKey" :disabled="!enableRecaptcha"><template #icon><i class="fas fa-key"></i></template>{{ $ts.recaptchaSiteKey }}</MkInput>
+				<MkInput v-model:value="recaptchaSecretKey" :disabled="!enableRecaptcha"><template #icon><i class="fas fa-key"></i></template>{{ $ts.recaptchaSecretKey }}</MkInput>
 			</template>
 		</div>
 		<div class="_content" v-if="enableRecaptcha && recaptchaSiteKey">
@@ -74,12 +74,12 @@
 			<captcha v-if="enableRecaptcha" provider="grecaptcha" :sitekey="recaptchaSiteKey"/>
 		</div>
 		<div class="_footer">
-			<MkButton primary @click="save(true)"><Fa :icon="faSave"/> {{ $ts.save }}</MkButton>
+			<MkButton primary @click="save(true)"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
 		</div>
 	</section>
 
 	<section class="_card _gap">
-		<div class="_title"><Fa :icon="faEnvelope" /> {{ $ts.emailConfig }}</div>
+		<div class="_title"><i class="fas fa-envelope"></i> {{ $ts.emailConfig }}</div>
 		<div class="_content">
 			<MkSwitch v-model:value="enableEmail" @update:value="save()">{{ $ts.enableEmail }}<template #desc>{{ $ts.emailConfigInfo }}</template></MkSwitch>
 			<MkInput v-model:value="email" type="email" :disabled="!enableEmail">{{ $ts.email }}</MkInput>
@@ -95,54 +95,54 @@
 			<MkInfo>{{ $ts.emptyToDisableSmtpAuth }}</MkInfo>
 			<MkSwitch v-model:value="smtpSecure" :disabled="!enableEmail">{{ $ts.smtpSecure }}<template #desc>{{ $ts.smtpSecureInfo }}</template></MkSwitch>
 			<div>
-			  <MkButton :disabled="!enableEmail" primary inline @click="save(true)"><Fa :icon="faSave"/> {{ $ts.save }}</MkButton>
+				<MkButton :disabled="!enableEmail" primary inline @click="save(true)"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
 				<MkButton :disabled="!enableEmail" inline @click="testEmail()">{{ $ts.testEmail }}</MkButton>
 			</div>
 		</div>
 	</section>
 
 	<section class="_card _gap">
-		<div class="_title"><Fa :icon="faBolt"/> {{ $ts.serviceworker }}</div>
+		<div class="_title"><i class="fas fa-bolt"></i> {{ $ts.serviceworker }}</div>
 		<div class="_content">
 			<MkSwitch v-model:value="enableServiceWorker">{{ $ts.enableServiceworker }}<template #desc>{{ $ts.serviceworkerInfo }}</template></MkSwitch>
 			<template v-if="enableServiceWorker">
 				<div class="_inputs">
-					<MkInput v-model:value="swPublicKey" :disabled="!enableServiceWorker"><template #icon><Fa :icon="faKey"/></template>Public key</MkInput>
-					<MkInput v-model:value="swPrivateKey" :disabled="!enableServiceWorker"><template #icon><Fa :icon="faKey"/></template>Private key</MkInput>
+					<MkInput v-model:value="swPublicKey" :disabled="!enableServiceWorker"><template #icon><i class="fas fa-key"></i></template>Public key</MkInput>
+					<MkInput v-model:value="swPrivateKey" :disabled="!enableServiceWorker"><template #icon><i class="fas fa-key"></i></template>Private key</MkInput>
 				</div>
 			</template>
 		</div>
 		<div class="_footer">
-			<MkButton primary @click="save(true)"><Fa :icon="faSave"/> {{ $ts.save }}</MkButton>
+			<MkButton primary @click="save(true)"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
 		</div>
 	</section>
 
 	<section class="_card _gap">
-		<div class="_title"><Fa :icon="faThumbtack"/> {{ $ts.pinnedUsers }}</div>
+		<div class="_title"><i class="fas fa-thumbtack"></i> {{ $ts.pinnedUsers }}</div>
 		<div class="_content">
 			<MkTextarea v-model:value="pinnedUsers">
 				<template #desc>{{ $ts.pinnedUsersDescription }} <button class="_textButton" @click="addPinUser">{{ $ts.addUser }}</button></template>
 			</MkTextarea>
 		</div>
 		<div class="_footer">
-			<MkButton primary @click="save(true)"><Fa :icon="faSave"/> {{ $ts.save }}</MkButton>
+			<MkButton primary @click="save(true)"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
 		</div>
 	</section>
 
 	<section class="_card _gap">
-		<div class="_title"><Fa :icon="faThumbtack"/> {{ $ts.pinnedPages }}</div>
+		<div class="_title"><i class="fas fa-thumbtack"></i> {{ $ts.pinnedPages }}</div>
 		<div class="_content">
 			<MkTextarea v-model:value="pinnedPages">
 				<template #desc>{{ $ts.pinnedPagesDescription }}</template>
 			</MkTextarea>
 		</div>
 		<div class="_footer">
-			<MkButton primary @click="save(true)"><Fa :icon="faSave"/> {{ $ts.save }}</MkButton>
+			<MkButton primary @click="save(true)"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
 		</div>
 	</section>
 
 	<section class="_card _gap">
-		<div class="_title"><Fa :icon="faCloud"/> {{ $ts.files }}</div>
+		<div class="_title"><i class="fas fa-cloud"></i> {{ $ts.files }}</div>
 		<div class="_content">
 			<MkSwitch v-model:value="cacheRemoteFiles">{{ $ts.cacheRemoteFiles }}<template #desc>{{ $ts.cacheRemoteFilesDescription }}</template></MkSwitch>
 			<MkSwitch v-model:value="proxyRemoteFiles">{{ $ts.proxyRemoteFiles }}<template #desc>{{ $ts.proxyRemoteFilesDescription }}</template></MkSwitch>
@@ -150,12 +150,12 @@
 			<MkInput v-model:value="remoteDriveCapacityMb" type="number" :disabled="!cacheRemoteFiles">{{ $ts.driveCapacityPerRemoteAccount }}<template #suffix>MB</template><template #desc>{{ $ts.inMb }}</template></MkInput>
 		</div>
 		<div class="_footer">
-			<MkButton primary @click="save(true)"><Fa :icon="faSave"/> {{ $ts.save }}</MkButton>
+			<MkButton primary @click="save(true)"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
 		</div>
 	</section>
 
 	<section class="_card _gap">
-		<div class="_title"><Fa :icon="faCloud"/> {{ $ts.objectStorage }}</div>
+		<div class="_title"><i class="fas fa-cloud"></i> {{ $ts.objectStorage }}</div>
 		<div class="_content">
 			<MkSwitch v-model:value="useObjectStorage">{{ $ts.useObjectStorage }}</MkSwitch>
 			<template v-if="useObjectStorage">
@@ -169,8 +169,8 @@
 					<MkInput v-model:value="objectStorageRegion" :disabled="!useObjectStorage">{{ $ts.objectStorageRegion }}<template #desc>{{ $ts.objectStorageRegionDesc }}</template></MkInput>
 				</div>
 				<div class="_inputs">
-					<MkInput v-model:value="objectStorageAccessKey" :disabled="!useObjectStorage"><template #icon><Fa :icon="faKey"/></template>Access key</MkInput>
-					<MkInput v-model:value="objectStorageSecretKey" :disabled="!useObjectStorage"><template #icon><Fa :icon="faKey"/></template>Secret key</MkInput>
+					<MkInput v-model:value="objectStorageAccessKey" :disabled="!useObjectStorage"><template #icon><i class="fas fa-key"></i></template>Access key</MkInput>
+					<MkInput v-model:value="objectStorageSecretKey" :disabled="!useObjectStorage"><template #icon><i class="fas fa-key"></i></template>Secret key</MkInput>
 				</div>
 				<MkSwitch v-model:value="objectStorageUseSSL" :disabled="!useObjectStorage">{{ $ts.objectStorageUseSSL }}<template #desc>{{ $ts.objectStorageUseSSLDesc }}</template></MkSwitch>
 				<MkSwitch v-model:value="objectStorageUseProxy" :disabled="!useObjectStorage">{{ $ts.objectStorageUseProxy }}<template #desc>{{ $ts.objectStorageUseProxyDesc }}</template></MkSwitch>
@@ -179,12 +179,12 @@
 			</template>
 		</div>
 		<div class="_footer">
-			<MkButton primary @click="save(true)"><Fa :icon="faSave"/> {{ $ts.save }}</MkButton>
+			<MkButton primary @click="save(true)"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
 		</div>
 	</section>
 
 	<section class="_card _gap">
-		<div class="_title"><Fa :icon="faGhost"/> {{ $ts.proxyAccount }}</div>
+		<div class="_title"><i class="fas fa-ghost"></i> {{ $ts.proxyAccount }}</div>
 		<div class="_content">
 			<MkInput :value="proxyAccount ? proxyAccount.username : null" disabled><template #prefix>@</template>{{ $ts.proxyAccount }}<template #desc>{{ $ts.proxyAccountDescription }}</template></MkInput>
 			<MkButton primary @click="chooseProxyAccount">{{ $ts.chooseProxyAccount }}</MkButton>
@@ -192,56 +192,56 @@
 	</section>
 
 	<section class="_card _gap">
-		<div class="_title"><Fa :icon="faBan"/> {{ $ts.blockedInstances }}</div>
+		<div class="_title"><i class="fas fa-ban"></i> {{ $ts.blockedInstances }}</div>
 		<div class="_content">
 			<MkTextarea v-model:value="blockedHosts">
 				<template #desc>{{ $ts.blockedInstancesDescription }}</template>
 			</MkTextarea>
 		</div>
 		<div class="_footer">
-			<MkButton primary @click="save(true)"><Fa :icon="faSave"/> {{ $ts.save }}</MkButton>
+			<MkButton primary @click="save(true)"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
 		</div>
 	</section>
 
 	<section class="_card _gap">
-		<div class="_title"><Fa :icon="faShareAlt"/> {{ $ts.integration }}</div>
+		<div class="_title"><i class="fas fa-share-alt"></i> {{ $ts.integration }}</div>
 		<div class="_content">
-			<header><Fa :icon="faTwitter"/> Twitter</header>
+			<header><i class="fab fa-twitter"></i> Twitter</header>
 			<MkSwitch v-model:value="enableTwitterIntegration">{{ $ts.enable }}</MkSwitch>
 			<template v-if="enableTwitterIntegration">
 				<MkInfo>Callback URL: {{ `${url}/api/tw/cb` }}</MkInfo>
-				<MkInput v-model:value="twitterConsumerKey" :disabled="!enableTwitterIntegration"><template #icon><Fa :icon="faKey"/></template>Consumer Key</MkInput>
-				<MkInput v-model:value="twitterConsumerSecret" :disabled="!enableTwitterIntegration"><template #icon><Fa :icon="faKey"/></template>Consumer Secret</MkInput>
+				<MkInput v-model:value="twitterConsumerKey" :disabled="!enableTwitterIntegration"><template #icon><i class="fas fa-key"></i></template>Consumer Key</MkInput>
+				<MkInput v-model:value="twitterConsumerSecret" :disabled="!enableTwitterIntegration"><template #icon><i class="fas fa-key"></i></template>Consumer Secret</MkInput>
 			</template>
 		</div>
 		<div class="_content">
-			<header><Fa :icon="faGithub"/> GitHub</header>
+			<header><i class="fas fa-github"></i> GitHub</header>
 			<MkSwitch v-model:value="enableGithubIntegration">{{ $ts.enable }}</MkSwitch>
 			<template v-if="enableGithubIntegration">
 				<MkInfo>Callback URL: {{ `${url}/api/gh/cb` }}</MkInfo>
-				<MkInput v-model:value="githubClientId" :disabled="!enableGithubIntegration"><template #icon><Fa :icon="faKey"/></template>Client ID</MkInput>
-				<MkInput v-model:value="githubClientSecret" :disabled="!enableGithubIntegration"><template #icon><Fa :icon="faKey"/></template>Client Secret</MkInput>
+				<MkInput v-model:value="githubClientId" :disabled="!enableGithubIntegration"><template #icon><i class="fas fa-key"></i></template>Client ID</MkInput>
+				<MkInput v-model:value="githubClientSecret" :disabled="!enableGithubIntegration"><template #icon><i class="fas fa-key"></i></template>Client Secret</MkInput>
 			</template>
 		</div>
 		<div class="_content">
-			<header><Fa :icon="faDiscord"/> Discord</header>
+			<header><i class="fas fa-discord"></i> Discord</header>
 			<MkSwitch v-model:value="enableDiscordIntegration">{{ $ts.enable }}</MkSwitch>
 			<template v-if="enableDiscordIntegration">
 				<MkInfo>Callback URL: {{ `${url}/api/dc/cb` }}</MkInfo>
-				<MkInput v-model:value="discordClientId" :disabled="!enableDiscordIntegration"><template #icon><Fa :icon="faKey"/></template>Client ID</MkInput>
-				<MkInput v-model:value="discordClientSecret" :disabled="!enableDiscordIntegration"><template #icon><Fa :icon="faKey"/></template>Client Secret</MkInput>
+				<MkInput v-model:value="discordClientId" :disabled="!enableDiscordIntegration"><template #icon><i class="fas fa-key"></i></template>Client ID</MkInput>
+				<MkInput v-model:value="discordClientSecret" :disabled="!enableDiscordIntegration"><template #icon><i class="fas fa-key"></i></template>Client Secret</MkInput>
 			</template>
 		</div>
 		<div class="_footer">
-			<MkButton primary @click="save(true)"><Fa :icon="faSave"/> {{ $ts.save }}</MkButton>
+			<MkButton primary @click="save(true)"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
 		</div>
 	</section>
 
 	<section class="_card _gap">
-		<div class="_title"><Fa :icon="faArchway" /> Summaly Proxy</div>
+		<div class="_title"><i class="fas fa-archway"></i> Summaly Proxy</div>
 		<div class="_content">
 			<MkInput v-model:value="summalyProxy">URL</MkInput>
-			<MkButton primary @click="save(true)"><Fa :icon="faSave"/> {{ $ts.save }}</MkButton>
+			<MkButton primary @click="save(true)"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
 		</div>
 	</section>
 </div>
@@ -249,9 +249,6 @@
 
 <script lang="ts">
 import { defineComponent, defineAsyncComponent } from 'vue';
-import { faPencilAlt, faShareAlt, faGhost, faCog, faPlus, faCloud, faInfoCircle, faBan, faSave, faServer, faLink, faThumbtack, faUser, faShieldAlt, faKey, faBolt, faArchway } from '@fortawesome/free-solid-svg-icons';
-import { faTrashAlt, faEnvelope } from '@fortawesome/free-regular-svg-icons';
-import { faTwitter, faDiscord, faGithub } from '@fortawesome/free-brands-svg-icons';
 import MkButton from '@client/components/ui/button.vue';
 import MkInput from '@client/components/ui/input.vue';
 import MkTextarea from '@client/components/ui/textarea.vue';
@@ -277,7 +274,7 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.instance,
-				icon: faCog,
+				icon: 'fas fa-cog',
 			},
 			meta: null,
 			url,
@@ -344,7 +341,6 @@ export default defineComponent({
 			smtpUser: '',
 			smtpPass: '',
 			summalyProxy: '',
-			faPencilAlt, faTwitter, faDiscord, faGithub, faShareAlt, faTrashAlt, faGhost, faCog, faPlus, faCloud, faInfoCircle, faBan, faSave, faServer, faLink, faEnvelope, faThumbtack, faUser, faShieldAlt, faKey, faBolt, faArchway
 		}
 	},
 
diff --git a/src/client/pages/instance/user-dialog.vue b/src/client/pages/instance/user-dialog.vue
index a6bab5ecb8..d7d627191e 100644
--- a/src/client/pages/instance/user-dialog.vue
+++ b/src/client/pages/instance/user-dialog.vue
@@ -16,10 +16,10 @@
 				<span class="acct">@{{ acct(user) }}</span>
 			</div>
 			<div class="status">
-				<span class="staff" v-if="user.isAdmin"><Fa :icon="faBookmark"/></span>
-				<span class="staff" v-if="user.isModerator"><Fa :icon="farBookmark"/></span>
-				<span class="punished" v-if="user.isSilenced"><Fa :icon="faMicrophoneSlash"/></span>
-				<span class="punished" v-if="user.isSuspended"><Fa :icon="faSnowflake"/></span>
+				<span class="staff" v-if="user.isAdmin"><i class="fas fa-bookmark"></i></span>
+				<span class="staff" v-if="user.isModerator"><i class="far fa-bookmark"></i></span>
+				<span class="punished" v-if="user.isSilenced"><i class="fas fa-microphone-slash"></i></span>
+				<span class="punished" v-if="user.isSuspended"><i class="fas fa-snowflake"></i></span>
 			</div>
 		</div>
 		<div class="_section">
@@ -31,10 +31,10 @@
 		</div>
 		<div class="_section">
 			<div class="_content">
-				<MkButton full @click="openProfile"><Fa :icon="faExternalLinkSquareAlt"/> {{ $ts.profile }}</MkButton>
-				<MkButton full v-if="user.host != null" @click="updateRemoteUser"><Fa :icon="faSync"/> {{ $ts.updateRemoteUser }}</MkButton>
-				<MkButton full @click="resetPassword"><Fa :icon="faKey"/> {{ $ts.resetPassword }}</MkButton>
-				<MkButton full @click="deleteAllFiles" danger><Fa :icon="faTrashAlt"/> {{ $ts.deleteAllFiles }}</MkButton>
+				<MkButton full @click="openProfile"><i class="fas fa-external-link-square-alt"></i> {{ $ts.profile }}</MkButton>
+				<MkButton full v-if="user.host != null" @click="updateRemoteUser"><i class="fas fa-sync"></i> {{ $ts.updateRemoteUser }}</MkButton>
+				<MkButton full @click="resetPassword"><i class="fas fa-key"></i> {{ $ts.resetPassword }}</MkButton>
+				<MkButton full @click="deleteAllFiles" danger><i class="fas fa-trash-alt"></i> {{ $ts.deleteAllFiles }}</MkButton>
 			</div>
 		</div>
 		<div class="_section">
@@ -48,8 +48,6 @@
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue';
-import { faTimes, faBookmark, faKey, faSync, faMicrophoneSlash, faExternalLinkSquareAlt } from '@fortawesome/free-solid-svg-icons';
-import { faSnowflake, faTrashAlt, faBookmark as farBookmark  } from '@fortawesome/free-regular-svg-icons';
 import MkButton from '@client/components/ui/button.vue';
 import MkSwitch from '@client/components/ui/switch.vue';
 import XModalWindow from '@client/components/ui/modal-window.vue';
@@ -79,7 +77,6 @@ export default defineComponent({
 			moderator: false,
 			silenced: false,
 			suspended: false,
-			faTimes, faBookmark, farBookmark, faKey, faSync, faMicrophoneSlash, faSnowflake, faTrashAlt, faExternalLinkSquareAlt
 		};
 	},
 
diff --git a/src/client/pages/instance/users.vue b/src/client/pages/instance/users.vue
index ea09b1bda0..4db965588c 100644
--- a/src/client/pages/instance/users.vue
+++ b/src/client/pages/instance/users.vue
@@ -2,22 +2,22 @@
 <div class="mk-instance-users">
 	<div class="_section">
 		<div class="_content">
-			<MkButton inline primary @click="addUser()"><Fa :icon="faPlus"/> {{ $ts.addUser }}</MkButton>
+			<MkButton inline primary @click="addUser()"><i class="fas fa-plus"></i> {{ $ts.addUser }}</MkButton>
 		</div>
 	</div>
 
 	<div class="_section lookup">
-		<div class="_title"><Fa :icon="faSearch"/> {{ $ts.lookup }}</div>
+		<div class="_title"><i class="fas fa-search"></i> {{ $ts.lookup }}</div>
 		<div class="_content">
 			<MkInput class="target" v-model:value="target" type="text" @enter="showUser()">
 				<span>{{ $ts.usernameOrUserId }}</span>
 			</MkInput>
-			<MkButton @click="showUser()" primary><Fa :icon="faSearch"/> {{ $ts.lookup }}</MkButton>
+			<MkButton @click="showUser()" primary><i class="fas fa-search"></i> {{ $ts.lookup }}</MkButton>
 		</div>
 	</div>
 
 	<div class="_section users">
-		<div class="_title"><Fa :icon="faUsers"/> {{ $ts.users }}</div>
+		<div class="_title"><i class="fas fa-users"></i> {{ $ts.users }}</div>
 		<div class="_content">
 			<div class="inputs" style="display: flex;">
 				<MkSelect v-model:value="sort" style="margin: 0; flex: 1;">
@@ -59,10 +59,10 @@
 						<header>
 							<MkUserName class="name" :user="user"/>
 							<span class="acct">@{{ acct(user) }}</span>
-							<span class="staff" v-if="user.isAdmin"><Fa :icon="faBookmark"/></span>
-							<span class="staff" v-if="user.isModerator"><Fa :icon="farBookmark"/></span>
-							<span class="punished" v-if="user.isSilenced"><Fa :icon="faMicrophoneSlash"/></span>
-							<span class="punished" v-if="user.isSuspended"><Fa :icon="faSnowflake"/></span>
+							<span class="staff" v-if="user.isAdmin"><i class="fas fa-bookmark"></i></span>
+							<span class="staff" v-if="user.isModerator"><i class="far fa-bookmark"></i></span>
+							<span class="punished" v-if="user.isSilenced"><i class="fas fa-microphone-slash"></i></span>
+							<span class="punished" v-if="user.isSuspended"><i class="fas fa-snowflake"></i></span>
 						</header>
 						<div>
 							<span>{{ $ts.lastUsed }}: <MkTime v-if="user.updatedAt" :time="user.updatedAt" mode="detail"/></span>
@@ -80,8 +80,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faPlus, faUsers, faSearch, faBookmark, faMicrophoneSlash } from '@fortawesome/free-solid-svg-icons';
-import { faSnowflake, faBookmark as farBookmark } from '@fortawesome/free-regular-svg-icons';
 import parseAcct from '@/misc/acct/parse';
 import MkButton from '@client/components/ui/button.vue';
 import MkInput from '@client/components/ui/input.vue';
@@ -103,9 +101,9 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.users,
-				icon: faUsers,
+				icon: 'fas fa-users',
 				action: {
-					icon: faSearch,
+					icon: 'fas fa-search',
 					handler: this.searchUser
 				}
 			},
@@ -127,7 +125,6 @@ export default defineComponent({
 				}),
 				offsetMode: true
 			},
-			faPlus, faUsers, faSearch, faBookmark, farBookmark, faMicrophoneSlash, faSnowflake
 		}
 	},
 
diff --git a/src/client/pages/mentions.vue b/src/client/pages/mentions.vue
index 042c3a498b..a12993ebb8 100644
--- a/src/client/pages/mentions.vue
+++ b/src/client/pages/mentions.vue
@@ -6,7 +6,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faAt } from '@fortawesome/free-solid-svg-icons';
 import Progress from '@client/scripts/loading';
 import XNotes from '@client/components/notes.vue';
 import * as symbols from '@client/symbols';
@@ -20,7 +19,7 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.mentions,
-				icon: faAt
+				icon: 'fas fa-at'
 			},
 			pagination: {
 				endpoint: 'notes/mentions',
diff --git a/src/client/pages/messages.vue b/src/client/pages/messages.vue
index 09d92e51ba..6ac9746d4e 100644
--- a/src/client/pages/messages.vue
+++ b/src/client/pages/messages.vue
@@ -6,7 +6,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faEnvelope } from '@fortawesome/free-solid-svg-icons';
 import Progress from '@client/scripts/loading';
 import XNotes from '@client/components/notes.vue';
 import * as symbols from '@client/symbols';
@@ -20,7 +19,7 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.directNotes,
-				icon: faEnvelope
+				icon: 'fas fa-envelope'
 			},
 			pagination: {
 				endpoint: 'notes/mentions',
@@ -29,7 +28,6 @@ export default defineComponent({
 					visibility: 'specified'
 				})
 			},
-			faEnvelope
 		};
 	},
 
diff --git a/src/client/pages/messaging/index.vue b/src/client/pages/messaging/index.vue
index 1e316e9090..9f3323f629 100644
--- a/src/client/pages/messaging/index.vue
+++ b/src/client/pages/messaging/index.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="yweeujhr _root" v-size="{ max: [400] }">
-	<MkButton @click="start" primary class="start"><Fa :icon="faPlus"/> {{ $ts.startMessaging }}</MkButton>
+	<MkButton @click="start" primary class="start"><i class="fas fa-plus"></i> {{ $ts.startMessaging }}</MkButton>
 
 	<div class="history" v-if="messages.length > 0">
 		<MkA v-for="(message, i) in messages"
@@ -38,7 +38,6 @@
 
 <script lang="ts">
 import { defineAsyncComponent, defineComponent } from 'vue';
-import { faUser, faUsers, faComments, faPlus } from '@fortawesome/free-solid-svg-icons';
 import getAcct from '@/misc/acct/render';
 import MkButton from '@client/components/ui/button.vue';
 import { acct } from '../../filters/user';
@@ -54,13 +53,12 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.messaging,
-				icon: faComments
+				icon: 'fas fa-comments'
 			},
 			fetching: true,
 			moreFetching: false,
 			messages: [],
 			connection: null,
-			faUser, faUsers, faComments, faPlus
 		};
 	},
 
@@ -120,11 +118,11 @@ export default defineComponent({
 		start(ev) {
 			os.modalMenu([{
 				text: this.$ts.messagingWithUser,
-				icon: faUser,
+				icon: 'fas fa-user',
 				action: () => { this.startUser() }
 			}, {
 				text: this.$ts.messagingWithGroup,
-				icon: faUsers,
+				icon: 'fas fa-users',
 				action: () => { this.startGroup() }
 			}], ev.currentTarget || ev.target);
 		},
diff --git a/src/client/pages/messaging/messaging-room.form.vue b/src/client/pages/messaging/messaging-room.form.vue
index c547e18850..31c42e4ab3 100644
--- a/src/client/pages/messaging/messaging-room.form.vue
+++ b/src/client/pages/messaging/messaging-room.form.vue
@@ -13,17 +13,16 @@
 	></textarea>
 	<div class="file" @click="file = null" v-if="file">{{ file.name }}</div>
 	<button class="send _button" @click="send" :disabled="!canSend || sending" :title="$ts.send">
-		<template v-if="!sending"><Fa :icon="faPaperPlane"/></template><template v-if="sending"><Fa icon="spinner .spin"/></template>
+		<template v-if="!sending"><i class="fas fa-paper-plane"></i></template><template v-if="sending"><i class="fas fa-spinner fa-pulse fa-fw"></i></template>
 	</button>
-	<button class="_button" @click="chooseFile"><Fa :icon="faPhotoVideo"/></button>
-	<button class="_button" @click="insertEmoji"><Fa :icon="faLaughSquint"/></button>
+	<button class="_button" @click="chooseFile"><i class="fas fa-photo-video"></i></button>
+	<button class="_button" @click="insertEmoji"><i class="fas fa-laugh-squint"></i></button>
 	<input ref="file" type="file" @change="onChangeFile"/>
 </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, defineAsyncComponent } from 'vue';
-import { faPaperPlane, faPhotoVideo, faLaughSquint } from '@fortawesome/free-solid-svg-icons';
 import insertTextAtCursor from 'insert-text-at-cursor';
 import * as autosize from 'autosize';
 import { formatTimeString } from '@/misc/format-time-string';
@@ -51,7 +50,6 @@ export default defineComponent({
 			typing: throttle(3000, () => {
 				os.stream.send('typingOnMessaging', this.user ? { partner: this.user.id } : { group: this.group.id });
 			}),
-			faPaperPlane, faPhotoVideo, faLaughSquint
 		};
 	},
 	computed: {
diff --git a/src/client/pages/messaging/messaging-room.message.vue b/src/client/pages/messaging/messaging-room.message.vue
index 1228baff68..dfac83ad6a 100644
--- a/src/client/pages/messaging/messaging-room.message.vue
+++ b/src/client/pages/messaging/messaging-room.message.vue
@@ -29,7 +29,7 @@
 				<span class="read" v-if="isMe && message.isRead">{{ $ts.messageRead }}</span>
 			</template>
 			<MkTime :time="message.createdAt"/>
-			<template v-if="message.is_edited"><Fa icon="pencil-alt"/></template>
+			<template v-if="message.is_edited"><i class="fas fa-pencil-alt"></i></template>
 		</footer>
 	</div>
 </div>
@@ -221,7 +221,7 @@ export default defineComponent({
 				margin: 0 8px;
 			}
 
-			> [data-icon] {
+			> i {
 				margin-left: 4px;
 			}
 		}
diff --git a/src/client/pages/messaging/messaging-room.vue b/src/client/pages/messaging/messaging-room.vue
index dae4590213..1b49216322 100644
--- a/src/client/pages/messaging/messaging-room.vue
+++ b/src/client/pages/messaging/messaging-room.vue
@@ -6,10 +6,10 @@
 	<div class="_content mk-messaging-room">
 		<div class="body">
 			<MkLoading v-if="fetching"/>
-			<p class="empty" v-if="!fetching && messages.length == 0"><Fa :icon="faInfoCircle"/>{{ $ts.noMessagesYet }}</p>
-			<p class="no-history" v-if="!fetching && messages.length > 0 && !existMoreMessages"><Fa :icon="faFlag"/>{{ $ts.noMoreHistory }}</p>
+			<p class="empty" v-if="!fetching && messages.length == 0"><i class="fas fa-info-circle"></i>{{ $ts.noMessagesYet }}</p>
+			<p class="no-history" v-if="!fetching && messages.length > 0 && !existMoreMessages"><i class="fas fa-flag"></i>{{ $ts.noMoreHistory }}</p>
 			<button class="more _button" ref="loadMore" :class="{ fetching: fetchingMoreMessages }" v-show="existMoreMessages" @click="fetchMoreMessages" :disabled="fetchingMoreMessages">
-				<template v-if="fetchingMoreMessages"><Fa icon="spinner" pulse fixed-width/></template>{{ fetchingMoreMessages ? $ts.loading : $ts.loadMore }}
+				<template v-if="fetchingMoreMessages"><i class="fas fa-spinner fa-pulse fa-fw"></i></template>{{ fetchingMoreMessages ? $ts.loading : $ts.loadMore }}
 			</button>
 			<XList class="messages" :items="messages" v-slot="{ item: message }" direction="up" reversed>
 				<XMessage :message="message" :is-group="group != null" :key="message.id"/>
@@ -26,7 +26,7 @@
 			</div>
 			<transition name="fade">
 				<div class="new-message" v-show="showIndicator">
-					<button class="_buttonPrimary" @click="onIndicatorClick"><i><Fa :icon="faArrowCircleDown"/></i>{{ $ts.newMessageExists }}</button>
+					<button class="_buttonPrimary" @click="onIndicatorClick"><i class="fas fa-arrow-circle-down"></i>{{ $ts.newMessageExists }}</button>
 				</div>
 			</transition>
 			<XForm v-if="!fetching" :user="user" :group="group" ref="form"/>
@@ -37,8 +37,6 @@
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue';
-import { faArrowCircleDown, faFlag, faUsers, faInfoCircle, faEllipsisH, faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
-import { faWindowMaximize } from '@fortawesome/free-regular-svg-icons';
 import XList from '@client/components/date-separated-list.vue';
 import XMessage from './messaging-room.message.vue';
 import XForm from './messaging-room.form.vue';
@@ -75,14 +73,14 @@ const Component = defineComponent({
 				userName: this.user,
 				avatar: this.user,
 				action: {
-					icon: faEllipsisH,
+					icon: 'fas fa-ellipsis'H,
 					handler: this.menu,
 				},
 			} : {
 				title: this.group.name,
-				icon: faUsers,
+				icon: 'fas fa-users',
 				action: {
-					icon: faEllipsisH,
+					icon: 'fas fa-ellipsis'H,
 					handler: this.menu,
 				},
 			} : null),
@@ -103,7 +101,6 @@ const Component = defineComponent({
 					&& this.existMoreMessages
 					&& this.fetchMoreMessages()
 			),
-			faArrowCircleDown, faFlag, faInfoCircle
 		};
 	},
 
@@ -325,14 +322,14 @@ const Component = defineComponent({
 
 			os.modalMenu([this.inWindow ? undefined : {
 				text: this.$ts.openInWindow,
-				icon: faWindowMaximize,
+				icon: 'fas fa-window-maximize',
 				action: () => {
 					os.pageWindow(path);
 					this.$router.back();
 				},
 			}, this.inWindow ? undefined : {
 				text: this.$ts.popout,
-				icon: faExternalLinkAlt,
+				icon: 'fas fa-external-link-alt',
 				action: () => {
 					popout(path);
 					this.$router.back();
@@ -356,7 +353,7 @@ export default Component;
 			font-size: 0.8em;
 			opacity: 0.5;
 
-			[data-icon] {
+			i {
 				margin-right: 4px;
 			}
 		}
@@ -370,7 +367,7 @@ export default Component;
 			color: var(--messagingRoomInfo);
 			opacity: 0.5;
 
-			[data-icon] {
+			i {
 				margin-right: 4px;
 			}
 		}
@@ -396,7 +393,7 @@ export default Component;
 				cursor: wait;
 			}
 
-			> [data-icon] {
+			> i {
 				margin-right: 4px;
 			}
 		}
diff --git a/src/client/pages/mfm-cheat-sheet.vue b/src/client/pages/mfm-cheat-sheet.vue
index 36f40dbcab..5227855236 100644
--- a/src/client/pages/mfm-cheat-sheet.vue
+++ b/src/client/pages/mfm-cheat-sheet.vue
@@ -266,7 +266,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faQuestionCircle } from '@fortawesome/free-regular-svg-icons';
 import MkTextarea from '@client/components/ui/textarea.vue';
 import * as symbols from '@client/symbols';
 
@@ -279,7 +278,7 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts._mfm.cheatSheet,
-				icon: faQuestionCircle,
+				icon: 'fas fa-question-circle',
 			},
 			preview_mention: '@example',
 			preview_hashtag: '#test',
diff --git a/src/client/pages/my-antennas/index.antenna.vue b/src/client/pages/my-antennas/index.antenna.vue
index d7050d08c4..8cad6fa553 100644
--- a/src/client/pages/my-antennas/index.antenna.vue
+++ b/src/client/pages/my-antennas/index.antenna.vue
@@ -39,15 +39,14 @@
 		<MkSwitch v-model:value="notify">{{ $ts.notifyAntenna }}</MkSwitch>
 	</div>
 	<div class="_footer">
-		<MkButton inline @click="saveAntenna()" primary><Fa :icon="faSave"/> {{ $ts.save }}</MkButton>
-		<MkButton inline @click="deleteAntenna()" v-if="antenna.id != null"><Fa :icon="faTrash"/> {{ $ts.delete }}</MkButton>
+		<MkButton inline @click="saveAntenna()" primary><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
+		<MkButton inline @click="deleteAntenna()" v-if="antenna.id != null"><i class="fas fa-trash"></i> {{ $ts.delete }}</MkButton>
 	</div>
 </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faSave, faTrash } from '@fortawesome/free-solid-svg-icons';
 import MkButton from '@client/components/ui/button.vue';
 import MkInput from '@client/components/ui/input.vue';
 import MkTextarea from '@client/components/ui/textarea.vue';
@@ -83,7 +82,6 @@ export default defineComponent({
 			notify: false,
 			userLists: null,
 			userGroups: null,
-			faSave, faTrash
 		};
 	},
 
diff --git a/src/client/pages/my-antennas/index.vue b/src/client/pages/my-antennas/index.vue
index dfb752b831..57c55cefdd 100644
--- a/src/client/pages/my-antennas/index.vue
+++ b/src/client/pages/my-antennas/index.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="ieepwinx _section">
-	<MkButton @click="create" primary class="add"><Fa :icon="faPlus"/> {{ $ts.add }}</MkButton>
+	<MkButton @click="create" primary class="add"><i class="fas fa-plus"></i> {{ $ts.add }}</MkButton>
 
 	<div class="_content">
 		<XAntenna v-if="draft" :antenna="draft" @created="onAntennaCreated" style="margin-bottom: var(--margin);"/>
@@ -14,7 +14,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faSatellite, faPlus } from '@fortawesome/free-solid-svg-icons';
 import MkPagination from '@client/components/ui/pagination.vue';
 import MkButton from '@client/components/ui/button.vue';
 import XAntenna from './index.antenna.vue';
@@ -31,9 +30,9 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.manageAntennas,
-				icon: faSatellite,
+				icon: 'fas fa-satellite',
 				action: {
-					icon: faPlus,
+					icon: 'fas fa-plus',
 					handler: this.create
 				}
 			},
@@ -42,7 +41,6 @@ export default defineComponent({
 				limit: 10,
 			},
 			draft: null,
-			faSatellite, faPlus
 		};
 	},
 
diff --git a/src/client/pages/my-clips/index.vue b/src/client/pages/my-clips/index.vue
index 09cd7f828a..c4ca474748 100644
--- a/src/client/pages/my-clips/index.vue
+++ b/src/client/pages/my-clips/index.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="_section qtcaoidl">
-	<MkButton @click="create" primary class="add"><Fa :icon="faPlus"/> {{ $ts.add }}</MkButton>
+	<MkButton @click="create" primary class="add"><i class="fas fa-plus"></i> {{ $ts.add }}</MkButton>
 
 	<div class="_content">
 		<MkPagination :pagination="pagination" #default="{items}" ref="list" class="list">
@@ -15,7 +15,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faPlus, faPaperclip } from '@fortawesome/free-solid-svg-icons';
 import MkPagination from '@client/components/ui/pagination.vue';
 import MkButton from '@client/components/ui/button.vue';
 import * as os from '@client/os';
@@ -31,9 +30,9 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.clip,
-				icon: faPaperclip,
+				icon: 'fas fa-paperclip',
 				action: {
-					icon: faPlus,
+					icon: 'fas fa-plus',
 					handler: this.create
 				}
 			},
@@ -42,7 +41,6 @@ export default defineComponent({
 				limit: 10,
 			},
 			draft: null,
-			faPlus
 		};
 	},
 
diff --git a/src/client/pages/my-groups/group.vue b/src/client/pages/my-groups/group.vue
index 90a60e5e2b..bd5537cbfa 100644
--- a/src/client/pages/my-groups/group.vue
+++ b/src/client/pages/my-groups/group.vue
@@ -23,7 +23,7 @@
 							<MkAcct :user="user" class="acct"/>
 						</div>
 						<div class="action">
-							<button class="_button" @click="removeUser(user)"><Fa :icon="faTimes"/></button>
+							<button class="_button" @click="removeUser(user)"><i class="fas fa-times"></i></button>
 						</div>
 					</div>
 				</div>
@@ -35,7 +35,6 @@
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue';
-import { faTimes, faUsers } from '@fortawesome/free-solid-svg-icons';
 import Progress from '@client/scripts/loading';
 import MkButton from '@client/components/ui/button.vue';
 import * as os from '@client/os';
@@ -57,11 +56,10 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: computed(() => this.group ? {
 				title: this.group.name,
-				icon: faUsers,
+				icon: 'fas fa-users',
 			} : null),
 			group: null,
 			users: [],
-			faTimes, faUsers
 		};
 	},
 
diff --git a/src/client/pages/my-groups/index.vue b/src/client/pages/my-groups/index.vue
index 5125ce3f4f..9f153ff9cc 100644
--- a/src/client/pages/my-groups/index.vue
+++ b/src/client/pages/my-groups/index.vue
@@ -4,13 +4,13 @@
 		<MkTab v-model:value="tab">
 			<option value="owned">{{ $ts.ownedGroups }}</option>
 			<option value="joined">{{ $ts.joinedGroups }}</option>
-			<option value="invites"><Fa :icon="faEnvelopeOpenText"/> {{ $ts.invites }}</option>
+			<option value="invites"><i class="fas fa-envelope-open-text"></i> {{ $ts.invites }}</option>
 		</MkTab>
 	</div>
 
 	<div class="_section">
 		<div class="_content" v-if="tab === 'owned'">
-			<MkButton @click="create" primary style="margin: 0 auto var(--margin) auto;"><Fa :icon="faPlus"/> {{ $ts.createGroup }}</MkButton>
+			<MkButton @click="create" primary style="margin: 0 auto var(--margin) auto;"><i class="fas fa-plus"></i> {{ $ts.createGroup }}</MkButton>
 
 			<MkPagination :pagination="ownedPagination" #default="{items}" ref="owned">
 				<div class="_card" v-for="group in items" :key="group.id">
@@ -35,8 +35,8 @@
 					<div class="_title">{{ invitation.group.name }}</div>
 					<div class="_content"><MkAvatars :user-ids="invitation.group.userIds"/></div>
 					<div class="_footer">
-						<MkButton @click="acceptInvite(invitation)" primary inline><Fa :icon="faCheck"/> {{ $ts.accept }}</MkButton>
-						<MkButton @click="rejectInvite(invitation)" primary inline><Fa :icon="faBan"/> {{ $ts.reject }}</MkButton>
+						<MkButton @click="acceptInvite(invitation)" primary inline><i class="fas fa-check"></i> {{ $ts.accept }}</MkButton>
+						<MkButton @click="rejectInvite(invitation)" primary inline><i class="fas fa-ban"></i> {{ $ts.reject }}</MkButton>
 					</div>
 				</div>
 			</MkPagination>
@@ -47,7 +47,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faUsers, faPlus, faEnvelopeOpenText } from '@fortawesome/free-solid-svg-icons';
 import MkPagination from '@client/components/ui/pagination.vue';
 import MkButton from '@client/components/ui/button.vue';
 import MkContainer from '@client/components/ui/container.vue';
@@ -69,7 +68,7 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.groups,
-				icon: faUsers
+				icon: 'fas fa-users'
 			},
 			tab: 'owned',
 			ownedPagination: {
@@ -84,7 +83,6 @@ export default defineComponent({
 				endpoint: 'i/user-group-invites',
 				limit: 10,
 			},
-			faUsers, faPlus, faEnvelopeOpenText
 		};
 	},
 
diff --git a/src/client/pages/my-lists/index.vue b/src/client/pages/my-lists/index.vue
index e680b90d1a..2b60917060 100644
--- a/src/client/pages/my-lists/index.vue
+++ b/src/client/pages/my-lists/index.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="qkcjvfiv _section">
-	<MkButton @click="create" primary class="add"><Fa :icon="faPlus"/> {{ $ts.createList }}</MkButton>
+	<MkButton @click="create" primary class="add"><i class="fas fa-plus"></i> {{ $ts.createList }}</MkButton>
 
 	<MkPagination :pagination="pagination" #default="{items}" class="lists _content" ref="list">
 		<div class="list _panel" v-for="(list, i) in items" :key="list.id">
@@ -12,7 +12,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faListUl, faPlus } from '@fortawesome/free-solid-svg-icons';
 import MkPagination from '@client/components/ui/pagination.vue';
 import MkButton from '@client/components/ui/button.vue';
 import * as os from '@client/os';
@@ -28,9 +27,9 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.manageLists,
-				icon: faListUl,
+				icon: 'fas fa-list-ul',
 				action: {
-					icon: faPlus,
+					icon: 'fas fa-plus',
 					handler: this.create
 				}
 			},
@@ -38,7 +37,6 @@ export default defineComponent({
 				endpoint: 'users/lists/list',
 				limit: 10,
 			},
-			faListUl, faPlus
 		};
 	},
 
diff --git a/src/client/pages/my-lists/list.vue b/src/client/pages/my-lists/list.vue
index 2892150ffe..049d370b4e 100644
--- a/src/client/pages/my-lists/list.vue
+++ b/src/client/pages/my-lists/list.vue
@@ -22,7 +22,7 @@
 							<MkAcct :user="user" class="acct"/>
 						</div>
 						<div class="action">
-							<button class="_button" @click="removeUser(user)"><Fa :icon="faTimes"/></button>
+							<button class="_button" @click="removeUser(user)"><i class="fas fa-times"></i></button>
 						</div>
 					</div>
 				</div>
@@ -34,7 +34,6 @@
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue';
-import { faTimes, faListUl } from '@fortawesome/free-solid-svg-icons';
 import Progress from '@client/scripts/loading';
 import MkButton from '@client/components/ui/button.vue';
 import * as os from '@client/os';
@@ -49,11 +48,10 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: computed(() => this.list ? {
 				title: this.list.name,
-				icon: faListUl,
+				icon: 'fas fa-list-ul',
 			} : null),
 			list: null,
 			users: [],
-			faTimes, faListUl
 		};
 	},
 
diff --git a/src/client/pages/not-found.vue b/src/client/pages/not-found.vue
index b13bdac2b8..5e7fe17f75 100644
--- a/src/client/pages/not-found.vue
+++ b/src/client/pages/not-found.vue
@@ -9,7 +9,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';
 
@@ -18,7 +17,7 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.notFound,
-				icon: faExclamationTriangle
+				icon: 'fas fa-exclamation-triangle'
 			},
 		}
 	},
diff --git a/src/client/pages/note.vue b/src/client/pages/note.vue
index 279dd96661..ce4af4eb4e 100644
--- a/src/client/pages/note.vue
+++ b/src/client/pages/note.vue
@@ -7,7 +7,7 @@
 			</div>
 
 			<div class="main _gap">
-				<MkButton v-if="!showNext && hasNext" class="load next" @click="showNext = true"><Fa :icon="faChevronUp"/></MkButton>
+				<MkButton v-if="!showNext && hasNext" class="load next" @click="showNext = true"><i class="fas fa-chevron-up"></i></MkButton>
 				<div class="_content _gap">
 					<MkRemoteCaution v-if="note.user.host != null" :href="note.url || note.uri" class="_gap"/>
 					<XNoteDetailed v-model:note="note" :key="note.id" class="_gap"/>
@@ -22,7 +22,7 @@
 						</div>
 					</MkA>
 				</div>
-				<MkButton v-if="!showPrev && hasPrev" class="load prev" @click="showPrev = true"><Fa :icon="faChevronDown"/></MkButton>
+				<MkButton v-if="!showPrev && hasPrev" class="load prev" @click="showPrev = true"><i class="fas fa-chevron-down"></i></MkButton>
 			</div>
 
 			<div class="_gap" v-if="showPrev">
@@ -37,7 +37,6 @@
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue';
-import { faChevronUp, faChevronDown } from '@fortawesome/free-solid-svg-icons';
 import XNote from '@client/components/note.vue';
 import XNoteDetailed from '@client/components/note-detailed.vue';
 import XNotes from '@client/components/notes.vue';
@@ -95,7 +94,6 @@ export default defineComponent({
 					sinceId: this.note.id,
 				})
 			},
-			faChevronUp, faChevronDown
 		};
 	},
 	watch: {
diff --git a/src/client/pages/notifications.vue b/src/client/pages/notifications.vue
index 25605988ed..38797d746e 100644
--- a/src/client/pages/notifications.vue
+++ b/src/client/pages/notifications.vue
@@ -6,7 +6,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faBell, faCheck } from '@fortawesome/free-solid-svg-icons';
 import Progress from '@client/scripts/loading';
 import XNotifications from '@client/components/notifications.vue';
 import * as os from '@client/os';
@@ -21,10 +20,10 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.notifications,
-				icon: faBell,
+				icon: 'fas fa-bell',
 				actions: [{
 					text: this.$ts.markAllAsRead,
-					icon: faCheck,
+					icon: 'fas fa-check',
 					handler: () => {
 						os.apiWithDialog('notifications/mark-all-as-read');
 					}
diff --git a/src/client/pages/page-editor/els/page-editor.el.button.vue b/src/client/pages/page-editor/els/page-editor.el.button.vue
index 1515187676..6e9036faac 100644
--- a/src/client/pages/page-editor/els/page-editor.el.button.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.button.vue
@@ -1,6 +1,6 @@
 <template>
 <XContainer @remove="() => $emit('remove')" :draggable="true">
-	<template #header><Fa :icon="faBolt"/> {{ $ts._pages.blocks.button }}</template>
+	<template #header><i class="fas fa-bolt"></i> {{ $ts._pages.blocks.button }}</template>
 
 	<section class="xfhsjczc">
 		<MkInput v-model:value="value.text"><span>{{ $ts._pages.blocks._button.text }}</span></MkInput>
@@ -39,7 +39,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faBolt } from '@fortawesome/free-solid-svg-icons';
 import XContainer from '../page-editor.container.vue';
 import MkSelect from '@client/components/ui/select.vue';
 import MkInput from '@client/components/ui/input.vue';
@@ -62,7 +61,6 @@ export default defineComponent({
 
 	data() {
 		return {
-			faBolt
 		};
 	},
 
diff --git a/src/client/pages/page-editor/els/page-editor.el.canvas.vue b/src/client/pages/page-editor/els/page-editor.el.canvas.vue
index 9d4b4c76d2..59d29b9b71 100644
--- a/src/client/pages/page-editor/els/page-editor.el.canvas.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.canvas.vue
@@ -1,9 +1,9 @@
 <template>
 <XContainer @remove="() => $emit('remove')" :draggable="true">
-	<template #header><Fa :icon="faPaintBrush"/> {{ $ts._pages.blocks.canvas }}</template>
+	<template #header><i class="fas fa-paint-brush"></i> {{ $ts._pages.blocks.canvas }}</template>
 
 	<section style="padding: 0 16px 0 16px;">
-		<MkInput v-model:value="value.name"><template #prefix><Fa :icon="faMagic"/></template><span>{{ $ts._pages.blocks._canvas.id }}</span></MkInput>
+		<MkInput v-model:value="value.name"><template #prefix><i class="fas fa-magic"></i></template><span>{{ $ts._pages.blocks._canvas.id }}</span></MkInput>
 		<MkInput v-model:value="value.width" type="number"><span>{{ $ts._pages.blocks._canvas.width }}</span><template #suffix>px</template></MkInput>
 		<MkInput v-model:value="value.height" type="number"><span>{{ $ts._pages.blocks._canvas.height }}</span><template #suffix>px</template></MkInput>
 	</section>
@@ -12,7 +12,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faPaintBrush, faMagic } from '@fortawesome/free-solid-svg-icons';
 import XContainer from '../page-editor.container.vue';
 import MkInput from '@client/components/ui/input.vue';
 import * as os from '@client/os';
@@ -30,7 +29,6 @@ export default defineComponent({
 
 	data() {
 		return {
-			faPaintBrush, faMagic
 		};
 	},
 
diff --git a/src/client/pages/page-editor/els/page-editor.el.counter.vue b/src/client/pages/page-editor/els/page-editor.el.counter.vue
index e16962aee9..3394817b53 100644
--- a/src/client/pages/page-editor/els/page-editor.el.counter.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.counter.vue
@@ -1,9 +1,9 @@
 <template>
 <XContainer @remove="() => $emit('remove')" :draggable="true">
-	<template #header><Fa :icon="faBolt"/> {{ $ts._pages.blocks.counter }}</template>
+	<template #header><i class="fas fa-bolt"></i> {{ $ts._pages.blocks.counter }}</template>
 
 	<section style="padding: 0 16px 0 16px;">
-		<MkInput v-model:value="value.name"><template #prefix><Fa :icon="faMagic"/></template><span>{{ $ts._pages.blocks._counter.name }}</span></MkInput>
+		<MkInput v-model:value="value.name"><template #prefix><i class="fas fa-magic"></i></template><span>{{ $ts._pages.blocks._counter.name }}</span></MkInput>
 		<MkInput v-model:value="value.text"><span>{{ $ts._pages.blocks._counter.text }}</span></MkInput>
 		<MkInput v-model:value="value.inc" type="number"><span>{{ $ts._pages.blocks._counter.inc }}</span></MkInput>
 	</section>
@@ -12,7 +12,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faBolt, faMagic } from '@fortawesome/free-solid-svg-icons';
 import XContainer from '../page-editor.container.vue';
 import MkInput from '@client/components/ui/input.vue';
 import * as os from '@client/os';
@@ -30,7 +29,6 @@ export default defineComponent({
 
 	data() {
 		return {
-			faBolt, faMagic
 		};
 	},
 
diff --git a/src/client/pages/page-editor/els/page-editor.el.if.vue b/src/client/pages/page-editor/els/page-editor.el.if.vue
index 0cbfaa7eb8..7f4ed458aa 100644
--- a/src/client/pages/page-editor/els/page-editor.el.if.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.if.vue
@@ -1,9 +1,9 @@
 <template>
 <XContainer @remove="() => $emit('remove')" :draggable="true">
-	<template #header><Fa :icon="faQuestion"/> {{ $ts._pages.blocks.if }}</template>
+	<template #header><i class="fas fa-question"></i> {{ $ts._pages.blocks.if }}</template>
 	<template #func>
 		<button @click="add()" class="_button">
-			<Fa :icon="faPlus"/>
+			<i class="fas fa-plus"></i>
 		</button>
 	</template>
 
@@ -27,7 +27,6 @@
 <script lang="ts">
 import { defineComponent, defineAsyncComponent } from 'vue';
 import { v4 as uuid } from 'uuid';
-import { faPlus, faQuestion } from '@fortawesome/free-solid-svg-icons';
 import XContainer from '../page-editor.container.vue';
 import MkSelect from '@client/components/ui/select.vue';
 import * as os from '@client/os';
@@ -51,7 +50,6 @@ export default defineComponent({
 
 	data() {
 		return {
-			faPlus, faQuestion
 		};
 	},
 
diff --git a/src/client/pages/page-editor/els/page-editor.el.image.vue b/src/client/pages/page-editor/els/page-editor.el.image.vue
index 1a96e42679..d96879f50d 100644
--- a/src/client/pages/page-editor/els/page-editor.el.image.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.image.vue
@@ -1,9 +1,9 @@
 <template>
 <XContainer @remove="() => $emit('remove')" :draggable="true">
-	<template #header><Fa :icon="faImage"/> {{ $ts._pages.blocks.image }}</template>
+	<template #header><i class="fas fa-image"></i> {{ $ts._pages.blocks.image }}</template>
 	<template #func>
 		<button @click="choose()">
-			<Fa :icon="faFolderOpen"/>
+			<i class="fas fa-folder-open"></i>
 		</button>
 	</template>
 
@@ -15,8 +15,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faPencilAlt } from '@fortawesome/free-solid-svg-icons';
-import { faImage, faFolderOpen } from '@fortawesome/free-regular-svg-icons';
 import XContainer from '../page-editor.container.vue';
 import MkDriveFileThumbnail from '@client/components/drive-file-thumbnail.vue';
 import * as os from '@client/os';
@@ -35,7 +33,6 @@ export default defineComponent({
 	data() {
 		return {
 			file: null,
-			faPencilAlt, faImage, faFolderOpen
 		};
 	},
 
diff --git a/src/client/pages/page-editor/els/page-editor.el.note.vue b/src/client/pages/page-editor/els/page-editor.el.note.vue
index 3f7eaf7572..d4801f3059 100644
--- a/src/client/pages/page-editor/els/page-editor.el.note.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.note.vue
@@ -1,6 +1,6 @@
 <template>
 <XContainer @remove="() => $emit('remove')" :draggable="true">
-	<template #header><Fa :icon="faStickyNote"/> {{ $ts._pages.blocks.note }}</template>
+	<template #header><i class="fas fa-sticky-note"></i> {{ $ts._pages.blocks.note }}</template>
 
 	<section style="padding: 0 16px 0 16px;">
 		<MkInput v-model:value="id">
@@ -17,7 +17,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faStickyNote } from '@fortawesome/free-solid-svg-icons';
 import XContainer from '../page-editor.container.vue';
 import MkInput from '@client/components/ui/input.vue';
 import MkSwitch from '@client/components/ui/switch.vue';
@@ -40,7 +39,6 @@ export default defineComponent({
 		return {
 			id: this.value.note,
 			note: null,
-			faStickyNote
 		};
 	},
 
diff --git a/src/client/pages/page-editor/els/page-editor.el.number-input.vue b/src/client/pages/page-editor/els/page-editor.el.number-input.vue
index 76c35d4406..8058d941c1 100644
--- a/src/client/pages/page-editor/els/page-editor.el.number-input.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.number-input.vue
@@ -1,9 +1,9 @@
 <template>
 <XContainer @remove="() => $emit('remove')" :draggable="true">
-	<template #header><Fa :icon="faBolt"/> {{ $ts._pages.blocks.numberInput }}</template>
+	<template #header><i class="fas fa-bolt"></i> {{ $ts._pages.blocks.numberInput }}</template>
 
 	<section style="padding: 0 16px 0 16px;">
-		<MkInput v-model:value="value.name"><template #prefix><Fa :icon="faMagic"/></template><span>{{ $ts._pages.blocks._numberInput.name }}</span></MkInput>
+		<MkInput v-model:value="value.name"><template #prefix><i class="fas fa-magic"></i></template><span>{{ $ts._pages.blocks._numberInput.name }}</span></MkInput>
 		<MkInput v-model:value="value.text"><span>{{ $ts._pages.blocks._numberInput.text }}</span></MkInput>
 		<MkInput v-model:value="value.default" type="number"><span>{{ $ts._pages.blocks._numberInput.default }}</span></MkInput>
 	</section>
@@ -12,7 +12,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faBolt, faMagic } from '@fortawesome/free-solid-svg-icons';
 import XContainer from '../page-editor.container.vue';
 import MkInput from '@client/components/ui/input.vue';
 import * as os from '@client/os';
@@ -30,7 +29,6 @@ export default defineComponent({
 
 	data() {
 		return {
-			faBolt, faMagic
 		};
 	},
 
diff --git a/src/client/pages/page-editor/els/page-editor.el.post.vue b/src/client/pages/page-editor/els/page-editor.el.post.vue
index 51c5481d54..1ed7f860c8 100644
--- a/src/client/pages/page-editor/els/page-editor.el.post.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.post.vue
@@ -1,6 +1,6 @@
 <template>
 <XContainer @remove="() => $emit('remove')" :draggable="true">
-	<template #header><Fa :icon="faPaperPlane"/> {{ $ts._pages.blocks.post }}</template>
+	<template #header><i class="fas fa-paper-plane"></i> {{ $ts._pages.blocks.post }}</template>
 
 	<section style="padding: 16px;">
 		<MkTextarea v-model:value="value.text">{{ $ts._pages.blocks._post.text }}</MkTextarea>
@@ -12,7 +12,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faPaperPlane } from '@fortawesome/free-regular-svg-icons';
 import XContainer from '../page-editor.container.vue';
 import MkTextarea from '@client/components/ui/textarea.vue';
 import MkInput from '@client/components/ui/input.vue';
@@ -32,7 +31,6 @@ export default defineComponent({
 
 	data() {
 		return {
-			faPaperPlane
 		};
 	},
 
diff --git a/src/client/pages/page-editor/els/page-editor.el.radio-button.vue b/src/client/pages/page-editor/els/page-editor.el.radio-button.vue
index 82b09a6290..97715ed69c 100644
--- a/src/client/pages/page-editor/els/page-editor.el.radio-button.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.radio-button.vue
@@ -1,9 +1,9 @@
 <template>
 <XContainer @remove="() => $emit('remove')" :draggable="true">
-	<template #header><Fa :icon="faBolt"/> {{ $ts._pages.blocks.radioButton }}</template>
+	<template #header><i class="fas fa-bolt"></i> {{ $ts._pages.blocks.radioButton }}</template>
 
 	<section style="padding: 0 16px 16px 16px;">
-		<MkInput v-model:value="value.name"><template #prefix><Fa :icon="faMagic"/></template><span>{{ $ts._pages.blocks._radioButton.name }}</span></MkInput>
+		<MkInput v-model:value="value.name"><template #prefix><i class="fas fa-magic"></i></template><span>{{ $ts._pages.blocks._radioButton.name }}</span></MkInput>
 		<MkInput v-model:value="value.title"><span>{{ $ts._pages.blocks._radioButton.title }}</span></MkInput>
 		<MkTextarea v-model:value="values"><span>{{ $ts._pages.blocks._radioButton.values }}</span></MkTextarea>
 		<MkInput v-model:value="value.default"><span>{{ $ts._pages.blocks._radioButton.default }}</span></MkInput>
@@ -13,7 +13,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faBolt, faMagic } from '@fortawesome/free-solid-svg-icons';
 import XContainer from '../page-editor.container.vue';
 import MkTextarea from '@client/components/ui/textarea.vue';
 import MkInput from '@client/components/ui/input.vue';
@@ -31,7 +30,6 @@ export default defineComponent({
 	data() {
 		return {
 			values: '',
-			faBolt, faMagic
 		};
 	},
 	watch: {
diff --git a/src/client/pages/page-editor/els/page-editor.el.section.vue b/src/client/pages/page-editor/els/page-editor.el.section.vue
index 96f468b13a..16ef2598f9 100644
--- a/src/client/pages/page-editor/els/page-editor.el.section.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.section.vue
@@ -1,12 +1,12 @@
 <template>
 <XContainer @remove="() => $emit('remove')" :draggable="true">
-	<template #header><Fa :icon="faStickyNote"/> {{ value.title }}</template>
+	<template #header><i class="fas fa-sticky-note"></i> {{ value.title }}</template>
 	<template #func>
 		<button @click="rename()" class="_button">
-			<Fa :icon="faPencilAlt"/>
+			<i class="fas fa-pencil-alt"></i>
 		</button>
 		<button @click="add()" class="_button">
-			<Fa :icon="faPlus"/>
+			<i class="fas fa-plus"></i>
 		</button>
 	</template>
 
@@ -19,8 +19,6 @@
 <script lang="ts">
 import { defineComponent, defineAsyncComponent } from 'vue';
 import { v4 as uuid } from 'uuid';
-import { faPlus, faPencilAlt } from '@fortawesome/free-solid-svg-icons';
-import { faStickyNote } from '@fortawesome/free-regular-svg-icons';
 import XContainer from '../page-editor.container.vue';
 import * as os from '@client/os';
 
@@ -43,7 +41,6 @@ export default defineComponent({
 
 	data() {
 		return {
-			faStickyNote, faPlus, faPencilAlt
 		};
 	},
 
diff --git a/src/client/pages/page-editor/els/page-editor.el.switch.vue b/src/client/pages/page-editor/els/page-editor.el.switch.vue
index 56b9f1561c..564d5e22c3 100644
--- a/src/client/pages/page-editor/els/page-editor.el.switch.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.switch.vue
@@ -1,9 +1,9 @@
 <template>
 <XContainer @remove="() => $emit('remove')" :draggable="true">
-	<template #header><Fa :icon="faBolt"/> {{ $ts._pages.blocks.switch }}</template>
+	<template #header><i class="fas fa-bolt"></i> {{ $ts._pages.blocks.switch }}</template>
 
 	<section class="kjuadyyj">
-		<MkInput v-model:value="value.name"><template #prefix><Fa :icon="faMagic"/></template><span>{{ $ts._pages.blocks._switch.name }}</span></MkInput>
+		<MkInput v-model:value="value.name"><template #prefix><i class="fas fa-magic"></i></template><span>{{ $ts._pages.blocks._switch.name }}</span></MkInput>
 		<MkInput v-model:value="value.text"><span>{{ $ts._pages.blocks._switch.text }}</span></MkInput>
 		<MkSwitch v-model:value="value.default"><span>{{ $ts._pages.blocks._switch.default }}</span></MkSwitch>
 	</section>
@@ -12,7 +12,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faBolt, faMagic } from '@fortawesome/free-solid-svg-icons';
 import XContainer from '../page-editor.container.vue';
 import MkSwitch from '@client/components/ui/switch.vue';
 import MkInput from '@client/components/ui/input.vue';
@@ -31,7 +30,6 @@ export default defineComponent({
 
 	data() {
 		return {
-			faBolt, faMagic
 		};
 	},
 
diff --git a/src/client/pages/page-editor/els/page-editor.el.text-input.vue b/src/client/pages/page-editor/els/page-editor.el.text-input.vue
index cb8cb83aa7..4435d9b841 100644
--- a/src/client/pages/page-editor/els/page-editor.el.text-input.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.text-input.vue
@@ -1,9 +1,9 @@
 <template>
 <XContainer @remove="() => $emit('remove')" :draggable="true">
-	<template #header><Fa :icon="faBolt"/> {{ $ts._pages.blocks.textInput }}</template>
+	<template #header><i class="fas fa-bolt"></i> {{ $ts._pages.blocks.textInput }}</template>
 
 	<section style="padding: 0 16px 0 16px;">
-		<MkInput v-model:value="value.name"><template #prefix><Fa :icon="faMagic"/></template><span>{{ $ts._pages.blocks._textInput.name }}</span></MkInput>
+		<MkInput v-model:value="value.name"><template #prefix><i class="fas fa-magic"></i></template><span>{{ $ts._pages.blocks._textInput.name }}</span></MkInput>
 		<MkInput v-model:value="value.text"><span>{{ $ts._pages.blocks._textInput.text }}</span></MkInput>
 		<MkInput v-model:value="value.default" type="text"><span>{{ $ts._pages.blocks._textInput.default }}</span></MkInput>
 	</section>
@@ -12,7 +12,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faBolt, faMagic } from '@fortawesome/free-solid-svg-icons';
 import XContainer from '../page-editor.container.vue';
 import MkInput from '@client/components/ui/input.vue';
 import * as os from '@client/os';
@@ -30,7 +29,6 @@ export default defineComponent({
 
 	data() {
 		return {
-			faBolt, faMagic
 		};
 	},
 
diff --git a/src/client/pages/page-editor/els/page-editor.el.text.vue b/src/client/pages/page-editor/els/page-editor.el.text.vue
index bd2c9c46dc..668dd5f52d 100644
--- a/src/client/pages/page-editor/els/page-editor.el.text.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.text.vue
@@ -1,6 +1,6 @@
 <template>
 <XContainer @remove="() => $emit('remove')" :draggable="true">
-	<template #header><Fa :icon="faAlignLeft"/> {{ $ts._pages.blocks.text }}</template>
+	<template #header><i class="fas fa-align-left"></i> {{ $ts._pages.blocks.text }}</template>
 
 	<section class="vckmsadr">
 		<textarea v-model="value.text"></textarea>
@@ -10,7 +10,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faAlignLeft } from '@fortawesome/free-solid-svg-icons';
 import XContainer from '../page-editor.container.vue';
 import * as os from '@client/os';
 
@@ -27,7 +26,6 @@ export default defineComponent({
 
 	data() {
 		return {
-			faAlignLeft,
 		};
 	},
 
diff --git a/src/client/pages/page-editor/els/page-editor.el.textarea-input.vue b/src/client/pages/page-editor/els/page-editor.el.textarea-input.vue
index 8c4ff23408..cf3b9f93f4 100644
--- a/src/client/pages/page-editor/els/page-editor.el.textarea-input.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.textarea-input.vue
@@ -1,9 +1,9 @@
 <template>
 <XContainer @remove="() => $emit('remove')" :draggable="true">
-	<template #header><Fa :icon="faBolt"/> {{ $ts._pages.blocks.textareaInput }}</template>
+	<template #header><i class="fas fa-bolt"></i> {{ $ts._pages.blocks.textareaInput }}</template>
 
 	<section style="padding: 0 16px 16px 16px;">
-		<MkInput v-model:value="value.name"><template #prefix><Fa :icon="faMagic"/></template><span>{{ $ts._pages.blocks._textareaInput.name }}</span></MkInput>
+		<MkInput v-model:value="value.name"><template #prefix><i class="fas fa-magic"></i></template><span>{{ $ts._pages.blocks._textareaInput.name }}</span></MkInput>
 		<MkInput v-model:value="value.text"><span>{{ $ts._pages.blocks._textareaInput.text }}</span></MkInput>
 		<MkTextarea v-model:value="value.default"><span>{{ $ts._pages.blocks._textareaInput.default }}</span></MkTextarea>
 	</section>
@@ -12,7 +12,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faBolt, faMagic } from '@fortawesome/free-solid-svg-icons';
 import XContainer from '../page-editor.container.vue';
 import MkTextarea from '@client/components/ui/textarea.vue';
 import MkInput from '@client/components/ui/input.vue';
@@ -31,7 +30,6 @@ export default defineComponent({
 
 	data() {
 		return {
-			faBolt, faMagic
 		};
 	},
 
diff --git a/src/client/pages/page-editor/els/page-editor.el.textarea.vue b/src/client/pages/page-editor/els/page-editor.el.textarea.vue
index 042b283731..a29d5bd3f2 100644
--- a/src/client/pages/page-editor/els/page-editor.el.textarea.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.textarea.vue
@@ -1,6 +1,6 @@
 <template>
 <XContainer @remove="() => $emit('remove')" :draggable="true">
-	<template #header><Fa :icon="faAlignLeft"/> {{ $ts._pages.blocks.textarea }}</template>
+	<template #header><i class="fas fa-align-left"></i> {{ $ts._pages.blocks.textarea }}</template>
 
 	<section class="ihymsbbe">
 		<textarea v-model="value.text"></textarea>
@@ -10,7 +10,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faAlignLeft } from '@fortawesome/free-solid-svg-icons';
 import XContainer from '../page-editor.container.vue';
 import * as os from '@client/os';
 
@@ -27,7 +26,6 @@ export default defineComponent({
 
 	data() {
 		return {
-			faAlignLeft,
 		};
 	},
 
diff --git a/src/client/pages/page-editor/page-editor.container.vue b/src/client/pages/page-editor/page-editor.container.vue
index 46e2dca157..afd261fac7 100644
--- a/src/client/pages/page-editor/page-editor.container.vue
+++ b/src/client/pages/page-editor/page-editor.container.vue
@@ -5,14 +5,14 @@
 		<div class="buttons">
 			<slot name="func"></slot>
 			<button v-if="removable" @click="remove()" class="_button">
-				<Fa :icon="faTrashAlt"/>
+				<i class="fas fa-trash-alt"></i>
 			</button>
 			<button v-if="draggable" class="drag-handle _button">
-				<Fa :icon="faBars"/>
+				<i class="fas fa-bars"></i>
 			</button>
 			<button @click="toggleContent(!showBody)" class="_button">
-				<template v-if="showBody"><Fa :icon="faAngleUp"/></template>
-				<template v-else><Fa :icon="faAngleDown"/></template>
+				<template v-if="showBody"><i class="fas fa-angle-up"></i></template>
+				<template v-else><i class="fas fa-angle-down"></i></template>
 			</button>
 		</div>
 	</header>
@@ -26,8 +26,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faBars, faAngleUp, faAngleDown } from '@fortawesome/free-solid-svg-icons';
-import { faTrashAlt } from '@fortawesome/free-regular-svg-icons';
 
 export default defineComponent({
 	props: {
@@ -56,7 +54,6 @@ export default defineComponent({
 	data() {
 		return {
 			showBody: this.expanded,
-			faTrashAlt, faBars, faAngleUp, faAngleDown
 		};
 	},
 	methods: {
@@ -105,7 +102,7 @@ export default defineComponent({
 			font-weight: bold;
 			box-shadow: 0 1px rgba(#000, 0.07);
 
-			> [data-icon] {
+			> i {
 				margin-right: 6px;
 			}
 
diff --git a/src/client/pages/page-editor/page-editor.script-block.vue b/src/client/pages/page-editor/page-editor.script-block.vue
index 10d5311cde..65ac731e47 100644
--- a/src/client/pages/page-editor/page-editor.script-block.vue
+++ b/src/client/pages/page-editor/page-editor.script-block.vue
@@ -1,9 +1,9 @@
 <template>
 <XContainer :removable="removable" @remove="() => $emit('remove')" :error="error" :warn="warn" :draggable="draggable">
-	<template #header><Fa v-if="icon" :icon="icon"/> <template v-if="title">{{ title }} <span class="turmquns" v-if="typeText">({{ typeText }})</span></template><template v-else-if="typeText">{{ typeText }}</template></template>
+	<template #header><i v-if="icon" :class="icon"></i> <template v-if="title">{{ title }} <span class="turmquns" v-if="typeText">({{ typeText }})</span></template><template v-else-if="typeText">{{ typeText }}</template></template>
 	<template #func>
 		<button @click="changeType()" class="_button">
-			<Fa :icon="faPencilAlt"/>
+			<i class="fas fa-pencil-alt"></i>
 		</button>
 	</template>
 
@@ -57,7 +57,6 @@
 
 <script lang="ts">
 import { defineAsyncComponent, defineComponent } from 'vue';
-import { faPencilAlt, faPlug } from '@fortawesome/free-solid-svg-icons';
 import { v4 as uuid } from 'uuid';
 import XContainer from './page-editor.container.vue';
 import MkTextarea from '@client/components/ui/textarea.vue';
@@ -109,14 +108,13 @@ export default defineComponent({
 			error: null,
 			warn: null,
 			slots: '',
-			faPencilAlt
 		};
 	},
 
 	computed: {
 		icon(): any {
 			if (this.value.type === null) return null;
-			if (this.value.type.startsWith('fn:')) return faPlug;
+			if (this.value.type.startsWith('fn:')) return 'fas fa-plug';
 			return blockDefs.find(x => x.type === this.value.type).icon;
 		},
 		typeText(): any {
diff --git a/src/client/pages/page-editor/page-editor.vue b/src/client/pages/page-editor/page-editor.vue
index 4583863a1c..e96e1faaf2 100644
--- a/src/client/pages/page-editor/page-editor.vue
+++ b/src/client/pages/page-editor/page-editor.vue
@@ -1,15 +1,15 @@
 <template>
 <div class="_root">
-	<MkA class="view" v-if="pageId" :to="`/@${ author.username }/pages/${ currentName }`"><Fa :icon="faExternalLinkSquareAlt"/> {{ $ts._pages.viewPage }}</MkA>
+	<MkA class="view" v-if="pageId" :to="`/@${ author.username }/pages/${ currentName }`"><i class="fas fa-external-link-square-alt"></i> {{ $ts._pages.viewPage }}</MkA>
 
 	<div class="buttons" style="margin: 16px;">
-		<MkButton inline @click="save" primary class="save" v-if="!readonly"><Fa :icon="faSave"/> {{ $ts.save }}</MkButton>
-		<MkButton inline @click="duplicate" class="duplicate" v-if="pageId"><Fa :icon="faCopy"/> {{ $ts.duplicate }}</MkButton>
-		<MkButton inline @click="del" class="delete" v-if="pageId && !readonly"><Fa :icon="faTrashAlt"/> {{ $ts.delete }}</MkButton>
+		<MkButton inline @click="save" primary class="save" v-if="!readonly"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
+		<MkButton inline @click="duplicate" class="duplicate" v-if="pageId"><i class="fas fa-copy"></i> {{ $ts.duplicate }}</MkButton>
+		<MkButton inline @click="del" class="delete" v-if="pageId && !readonly"><i class="fas fa-trash-alt"></i> {{ $ts.delete }}</MkButton>
 	</div>
 
 	<MkContainer :foldable="true" :expanded="true" class="_gap">
-		<template #header><Fa :icon="faCog"/> {{ $ts._pages.pageSetting }}</template>
+		<template #header><i class="fas fa-cog"></i> {{ $ts._pages.pageSetting }}</template>
 		<div style="padding: 16px;">
 			<MkInput v-model:value="title">
 				<span>{{ $ts._pages.title }}</span>
@@ -35,26 +35,26 @@
 			<MkSwitch v-model:value="hideTitleWhenPinned">{{ $ts._pages.hideTitleWhenPinned }}</MkSwitch>
 
 			<div class="eyeCatch">
-				<MkButton v-if="eyeCatchingImageId == null && !readonly" @click="setEyeCatchingImage"><Fa :icon="faPlus"/> {{ $ts._pages.eyeCatchingImageSet }}</MkButton>
+				<MkButton v-if="eyeCatchingImageId == null && !readonly" @click="setEyeCatchingImage"><i class="fas fa-plus"></i> {{ $ts._pages.eyeCatchingImageSet }}</MkButton>
 				<div v-else-if="eyeCatchingImage">
 					<img :src="eyeCatchingImage.url" :alt="eyeCatchingImage.name" style="max-width: 100%;"/>
-					<MkButton @click="removeEyeCatchingImage()" v-if="!readonly"><Fa :icon="faTrashAlt"/> {{ $ts._pages.eyeCatchingImageRemove }}</MkButton>
+					<MkButton @click="removeEyeCatchingImage()" v-if="!readonly"><i class="fas fa-trash-alt"></i> {{ $ts._pages.eyeCatchingImageRemove }}</MkButton>
 				</div>
 			</div>
 		</div>
 	</MkContainer>
 
 	<MkContainer :foldable="true" :expanded="true" class="_gap">
-		<template #header><Fa :icon="faStickyNote"/> {{ $ts._pages.contents }}</template>
+		<template #header><i class="fas fa-sticky-note"></i> {{ $ts._pages.contents }}</template>
 		<div style="padding: 16px;">
 			<XBlocks class="content" v-model:value="content" :hpml="hpml"/>
 
-			<MkButton @click="add()" v-if="!readonly"><Fa :icon="faPlus"/></MkButton>
+			<MkButton @click="add()" v-if="!readonly"><i class="fas fa-plus"></i></MkButton>
 		</div>
 	</MkContainer>
 
 	<MkContainer :foldable="true" class="_gap">
-		<template #header><Fa :icon="faMagic"/> {{ $ts._pages.variables }}</template>
+		<template #header><i class="fas fa-magic"></i> {{ $ts._pages.variables }}</template>
 		<div class="qmuvgica">
 			<XDraggable tag="div" class="variables" v-show="variables.length > 0" v-model="variables" item-key="name" handle=".drag-handle" :group="{ name: 'variables' }" animation="150" swap-threshold="0.5">
 				<template #item="{element}">
@@ -70,12 +70,12 @@
 				</template>
 			</XDraggable>
 
-			<MkButton @click="addVariable()" class="add" v-if="!readonly"><Fa :icon="faPlus"/></MkButton>
+			<MkButton @click="addVariable()" class="add" v-if="!readonly"><i class="fas fa-plus"></i></MkButton>
 		</div>
 	</MkContainer>
 
 	<MkContainer :foldable="true" :expanded="true" class="_gap">
-		<template #header><Fa :icon="faCode"/> {{ $ts.script }}</template>
+		<template #header><i class="fas fa-code"></i> {{ $ts.script }}</template>
 		<div>
 			<MkTextarea class="_code" v-model:value="script"/>
 		</div>
@@ -91,8 +91,6 @@ import 'prismjs/components/prism-clike';
 import 'prismjs/components/prism-javascript';
 import 'prismjs/themes/prism-okaidia.css';
 import 'vue-prism-editor/dist/prismeditor.min.css';
-import { faICursor, faPlus, faMagic, faCog, faCode, faExternalLinkSquareAlt, faPencilAlt, faCopy } from '@fortawesome/free-solid-svg-icons';
-import { faSave, faStickyNote, faTrashAlt } from '@fortawesome/free-regular-svg-icons';
 import { v4 as uuid } from 'uuid';
 import XVariable from './page-editor.script-block.vue';
 import XBlocks from './page-editor.blocks.vue';
@@ -143,7 +141,7 @@ export default defineComponent({
 				}
 				return {
 					title: title,
-					icon: faPencilAlt,
+					icon: 'fas fa-pencil-alt',
 				};
 			}),
 			author: this.$i,
@@ -164,7 +162,6 @@ export default defineComponent({
 			hpml: null,
 			script: '',
 			url,
-			faPlus, faICursor, faSave, faStickyNote, faMagic, faCog, faTrashAlt, faExternalLinkSquareAlt, faCode, faCopy
 		};
 	},
 
@@ -471,7 +468,7 @@ export default defineComponent({
 			font-weight: bold;
 			box-shadow: 0 1px rgba(#000, 0.07);
 
-			> [data-icon] {
+			> i {
 				margin-right: 6px;
 			}
 
diff --git a/src/client/pages/page.vue b/src/client/pages/page.vue
index d7b570e5f4..f25ed51184 100644
--- a/src/client/pages/page.vue
+++ b/src/client/pages/page.vue
@@ -14,8 +14,8 @@
 			<small style="display: block; opacity: 0.7; margin-top: 1em;">@{{ page.user.username }}</small>
 		</div>
 		<div class="like">
-			<MkButton class="button" @click="unlike()" v-if="page.isLiked" v-tooltip="$ts._pages.unlike" primary><Fa :icon="faHeartS"/><span class="count" v-if="page.likedCount > 0">{{ page.likedCount }}</span></MkButton>
-			<MkButton class="button" @click="like()" v-else v-tooltip="$ts._pages.like"><Fa :icon="faHeartR"/><span class="count" v-if="page.likedCount > 0">{{ page.likedCount }}</span></MkButton>
+			<MkButton class="button" @click="unlike()" v-if="page.isLiked" v-tooltip="$ts._pages.unlike" primary><i class="fas fa-heart"></i><span class="count" v-if="page.likedCount > 0">{{ page.likedCount }}</span></MkButton>
+			<MkButton class="button" @click="like()" v-else v-tooltip="$ts._pages.like"><i class="far fa-heart"></i><span class="count" v-if="page.likedCount > 0">{{ page.likedCount }}</span></MkButton>
 		</div>
 		<div class="links">
 			<MkA :to="`/@${username}/pages/${pageName}/view-source`" class="link">{{ $ts._pages.viewSource }}</MkA>
@@ -27,16 +27,14 @@
 		</div>
 	</div>
 	<div class="footer">
-		<div><Fa :icon="faClock"/> {{ $ts.createdAt }}: <MkTime :time="page.createdAt" mode="detail"/></div>
-		<div v-if="page.createdAt != page.updatedAt"><Fa :icon="faClock"/> {{ $ts.updatedAt }}: <MkTime :time="page.updatedAt" mode="detail"/></div>
+		<div><i class="far fa-clock"></i> {{ $ts.createdAt }}: <MkTime :time="page.createdAt" mode="detail"/></div>
+		<div v-if="page.createdAt != page.updatedAt"><i class="far fa-clock"></i> {{ $ts.updatedAt }}: <MkTime :time="page.updatedAt" mode="detail"/></div>
 	</div>
 </div>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue';
-import { faHeart as faHeartS } from '@fortawesome/free-solid-svg-icons';
-import { faHeart as faHeartR, faClock } from '@fortawesome/free-regular-svg-icons';
 import XPage from '@client/components/page/page.vue';
 import MkButton from '@client/components/ui/button.vue';
 import * as os from '@client/os';
@@ -71,7 +69,6 @@ export default defineComponent({
 				},
 			} : null),
 			page: null,
-			faHeartS, faHeartR, faClock,
 		};
 	},
 
diff --git a/src/client/pages/pages.vue b/src/client/pages/pages.vue
index 8aea7e6b95..52a860be13 100644
--- a/src/client/pages/pages.vue
+++ b/src/client/pages/pages.vue
@@ -1,9 +1,9 @@
 <template>
 <div>
 	<MkTab v-model:value="tab" v-if="$i">
-		<option value="featured"><Fa :icon="faFireAlt"/> {{ $ts._pages.featured }}</option>
-		<option value="my"><Fa :icon="faEdit"/> {{ $ts._pages.my }}</option>
-		<option value="liked"><Fa :icon="faHeart"/> {{ $ts._pages.liked }}</option>
+		<option value="featured"><i class="fas fa-fire-alt"></i> {{ $ts._pages.featured }}</option>
+		<option value="my"><i class="fas fa-edit"></i> {{ $ts._pages.my }}</option>
+		<option value="liked"><i class="fas fa-heart"></i> {{ $ts._pages.liked }}</option>
 	</MkTab>
 
 	<div class="_section">
@@ -14,7 +14,7 @@
 		</div>
 
 		<div class="rknalgpo _content my" v-if="tab === 'my'">
-			<MkButton class="new" @click="create()"><Fa :icon="faPlus"/></MkButton>
+			<MkButton class="new" @click="create()"><i class="fas fa-plus"></i></MkButton>
 			<MkPagination :pagination="myPagesPagination" #default="{items}">
 				<MkPagePreview v-for="page in items" class="ckltabjg" :page="page" :key="page.id"/>
 			</MkPagination>
@@ -31,8 +31,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faPlus, faEdit, faFireAlt } from '@fortawesome/free-solid-svg-icons';
-import { faStickyNote, faHeart } from '@fortawesome/free-regular-svg-icons';
 import MkPagePreview from '@client/components/page-preview.vue';
 import MkPagination from '@client/components/ui/pagination.vue';
 import MkButton from '@client/components/ui/button.vue';
@@ -47,9 +45,9 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.pages,
-				icon: faStickyNote,
+				icon: 'fas fa-sticky-note',
 				actions: [{
-					icon: faPlus,
+					icon: 'fas fa-plus',
 					text: this.$ts.create,
 					handler: this.create
 				}]
@@ -67,7 +65,6 @@ export default defineComponent({
 				endpoint: 'i/page-likes',
 				limit: 5,
 			},
-			faStickyNote, faPlus, faEdit, faHeart, faFireAlt
 		};
 	},
 	methods: {
diff --git a/src/client/pages/preview.vue b/src/client/pages/preview.vue
index bd4e08db62..3df446e676 100644
--- a/src/client/pages/preview.vue
+++ b/src/client/pages/preview.vue
@@ -6,7 +6,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faEye } from '@fortawesome/free-solid-svg-icons';
 import MkSample from '@client/components/sample.vue';
 import * as symbols from '@client/symbols';
 
@@ -19,7 +18,7 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.preview,
-				icon: faEye,
+				icon: 'fas fa-eye',
 			},
 		}
 	},
diff --git a/src/client/pages/reversi/game.board.vue b/src/client/pages/reversi/game.board.vue
index a466527c01..78bcf03413 100644
--- a/src/client/pages/reversi/game.board.vue
+++ b/src/client/pages/reversi/game.board.vue
@@ -40,8 +40,8 @@
 						<img v-if="stone === false" :src="whiteUser.avatarUrl" alt="white">
 					</template>
 					<template v-else>
-						<fa v-if="stone === true" :icon="fasCircle"/>
-						<fa v-if="stone === false" :icon="farCircle"/>
+						<i v-if="stone === true" class="fas fa-circle"></i>
+						<i v-if="stone === false" class="far fa-circle"></i>
 					</template>
 				</div>
 			</div>
@@ -63,12 +63,12 @@
 	<div class="player" v-if="game.isEnded">
 		<span>{{ logPos }} / {{ logs.length }}</span>
 		<div class="buttons" v-if="!autoplaying">
-			<MkButton inline @click="logPos = 0" :disabled="logPos == 0"><fa :icon="faAngleDoubleLeft"/></MkButton>
-			<MkButton inline @click="logPos--" :disabled="logPos == 0"><fa :icon="faAngleLeft"/></MkButton>
-			<MkButton inline @click="logPos++" :disabled="logPos == logs.length"><fa :icon="faAngleRight"/></MkButton>
-			<MkButton inline @click="logPos = logs.length" :disabled="logPos == logs.length"><fa :icon="faAngleDoubleRight"/></MkButton>
+			<MkButton inline @click="logPos = 0" :disabled="logPos == 0"><i class="fas fa-angle-double-left"></i></MkButton>
+			<MkButton inline @click="logPos--" :disabled="logPos == 0"><i class="fas fa-angle-left"></i></MkButton>
+			<MkButton inline @click="logPos++" :disabled="logPos == logs.length"><i class="fas fa-angle-right"></i></MkButton>
+			<MkButton inline @click="logPos = logs.length" :disabled="logPos == logs.length"><i class="fas fa-angle-double-right"></i></MkButton>
 		</div>
-		<MkButton @click="autoplay()" :disabled="autoplaying" style="margin: var(--margin) auto 0 auto;"><fa :icon="faPlay"/></MkButton>
+		<MkButton @click="autoplay()" :disabled="autoplaying" style="margin: var(--margin) auto 0 auto;"><i class="fas fa-play"></i></MkButton>
 	</div>
 
 	<div class="info">
@@ -85,9 +85,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faAngleDoubleLeft, faAngleLeft, faAngleRight, faAngleDoubleRight, faPlay } from '@fortawesome/free-solid-svg-icons';
-import { faCircle as fasCircle } from '@fortawesome/free-solid-svg-icons';
-import { faCircle as farCircle } from '@fortawesome/free-regular-svg-icons';
 import * as CRC32 from 'crc-32';
 import Reversi, { Color } from '../../../games/reversi/core';
 import { url } from '@client/config';
@@ -120,7 +117,6 @@ export default defineComponent({
 			logPos: 0,
 			watchers: [],
 			pollingClock: null,
-			faAngleDoubleLeft, faAngleLeft, faAngleRight, faAngleDoubleRight, fasCircle, farCircle, faPlay
 		};
 	},
 
diff --git a/src/client/pages/reversi/game.setting.vue b/src/client/pages/reversi/game.setting.vue
index c7c2937ba8..1a2abba795 100644
--- a/src/client/pages/reversi/game.setting.vue
+++ b/src/client/pages/reversi/game.setting.vue
@@ -17,11 +17,11 @@
 			</header>
 
 			<div>
-				<div class="random" v-if="game.map == null"><fa icon="dice"/></div>
+				<div class="random" v-if="game.map == null"><i class="fas fa-dice"></i></div>
 				<div class="board" v-else :style="{ 'grid-template-rows': `repeat(${ game.map.length }, 1fr)`, 'grid-template-columns': `repeat(${ game.map[0].length }, 1fr)` }">
 					<div v-for="(x, i) in game.map.join('')" :class="{ none: x == ' ' }" @click="onPixelClick(i, x)">
-						<fa v-if="x == 'b'" :icon="fasCircle"/>
-						<fa v-if="x == 'w'" :icon="farCircle"/>
+						<i v-if="x === 'b'" class="fas fa-circle"></i>
+						<i v-if="x === 'w'" class="far fa-circle"></i>
 					</div>
 				</div>
 			</div>
@@ -125,8 +125,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faCircle as fasCircle } from '@fortawesome/free-solid-svg-icons';
-import { faCircle as farCircle } from '@fortawesome/free-regular-svg-icons';
 import * as maps from '../../../games/reversi/maps';
 import MkButton from '@client/components/ui/button.vue';
 import MkSwitch from '@client/components/ui/switch.vue';
diff --git a/src/client/pages/reversi/game.vue b/src/client/pages/reversi/game.vue
index 896dbc39cc..62c99d7755 100644
--- a/src/client/pages/reversi/game.vue
+++ b/src/client/pages/reversi/game.vue
@@ -9,7 +9,6 @@ import { defineComponent } from 'vue';
 import GameSetting from './game.setting.vue';
 import GameBoard from './game.board.vue';
 import * as os from '@client/os';
-import { faGamepad } from '@fortawesome/free-solid-svg-icons';
 import * as symbols from '@client/symbols';
 
 export default defineComponent({
@@ -29,7 +28,7 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts._reversi.reversi,
-				icon: faGamepad
+				icon: 'fas fa-gamepad'
 			},
 			game: null,
 			connection: null,
diff --git a/src/client/pages/reversi/index.vue b/src/client/pages/reversi/index.vue
index 59b228f5f6..37126fca10 100644
--- a/src/client/pages/reversi/index.vue
+++ b/src/client/pages/reversi/index.vue
@@ -64,7 +64,6 @@ import { defineComponent } from 'vue';
 import * as os from '@client/os';
 import MkButton from '@client/components/ui/button.vue';
 import MkFolder from '@client/components/ui/folder.vue';
-import { faGamepad } from '@fortawesome/free-solid-svg-icons';
 import * as symbols from '@client/symbols';
 
 export default defineComponent({
@@ -78,7 +77,7 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts._reversi.reversi,
-				icon: faGamepad
+				icon: 'fas fa-gamepad'
 			},
 			games: [],
 			gamesFetching: true,
diff --git a/src/client/pages/room/room.vue b/src/client/pages/room/room.vue
index e1de52b8f1..ea34ef11b5 100644
--- a/src/client/pages/room/room.vue
+++ b/src/client/pages/room/room.vue
@@ -17,18 +17,18 @@
 			</template>
 		</div>
 		<div class="_content">
-			<MkButton inline @click="translate()" :primary="isTranslateMode"><Fa :icon="faArrowsAlt"/> {{ $ts._rooms.translate }}</MkButton>
-			<MkButton inline @click="rotate()" :primary="isRotateMode"><Fa :icon="faUndo"/> {{ $ts._rooms.rotate }}</MkButton>
-			<MkButton inline v-if="isTranslateMode || isRotateMode" @click="exit()"><Fa :icon="faBan"/> {{ $ts._rooms.exit }}</MkButton>
+			<MkButton inline @click="translate()" :primary="isTranslateMode"><i class="fas fa-arrows-alt"></i> {{ $ts._rooms.translate }}</MkButton>
+			<MkButton inline @click="rotate()" :primary="isRotateMode"><i class="fas fa-undo"></i> {{ $ts._rooms.rotate }}</MkButton>
+			<MkButton inline v-if="isTranslateMode || isRotateMode" @click="exit()"><i class="fas fa-ban"></i> {{ $ts._rooms.exit }}</MkButton>
 		</div>
 		<div class="_content">
-			<MkButton @click="remove()"><Fa :icon="faTrashAlt"/> {{ $ts._rooms.remove }}</MkButton>
+			<MkButton @click="remove()"><i class="fas fa-trash-alt"></i> {{ $ts._rooms.remove }}</MkButton>
 		</div>
 	</div>
 
 	<div class="menu _section" v-if="isMyRoom">
 		<div class="_content">
-			<MkButton @click="add()"><Fa :icon="faBoxOpen"/> {{ $ts._rooms.addFurniture }}</MkButton>
+			<MkButton @click="add()"><i class="fas fa-box-open"></i> {{ $ts._rooms.addFurniture }}</MkButton>
 		</div>
 		<div class="_content">
 			<MkSelect :value="roomType" @update:value="updateRoomType($event)">
@@ -42,8 +42,8 @@
 			</label>
 		</div>
 		<div class="_content">
-			<MkButton inline :disabled="!changed" primary @click="save()"><Fa :icon="faSave"/> {{ $ts.save }}</MkButton>
-			<MkButton inline @click="clear()"><Fa :icon="faBroom"/> {{ $ts._rooms.clear }}</MkButton>
+			<MkButton inline :disabled="!changed" primary @click="save()"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
+			<MkButton inline @click="clear()"><i class="fas fa-broom"></i> {{ $ts._rooms.clear }}</MkButton>
 		</div>
 	</div>
 </div>
@@ -55,8 +55,6 @@ import { Room } from '@client/scripts/room/room';
 import parseAcct from '@/misc/acct/parse';
 import XPreview from './preview.vue';
 const storeItems = require('@client/scripts/room/furnitures.json5');
-import { faBoxOpen, faUndo, faArrowsAlt, faBan, faBroom } from '@fortawesome/free-solid-svg-icons';
-import { faSave, faTrashAlt } from '@fortawesome/free-regular-svg-icons';
 import { query as urlQuery } from '../../../prelude/url';
 import MkButton from '@client/components/ui/button.vue';
 import MkSelect from '@client/components/ui/select.vue';
@@ -98,7 +96,6 @@ export default defineComponent({
 			isRotateMode: false,
 			isMyRoom: false,
 			changed: false,
-			faBoxOpen, faSave, faTrashAlt, faUndo, faArrowsAlt, faBan, faBroom,
 		};
 	},
 
diff --git a/src/client/pages/scratchpad.vue b/src/client/pages/scratchpad.vue
index 1a863e6b2e..99164ec51f 100644
--- a/src/client/pages/scratchpad.vue
+++ b/src/client/pages/scratchpad.vue
@@ -2,11 +2,11 @@
 <div class="iltifgqe">
 	<div class="editor _panel _gap">
 		<PrismEditor class="_code code" v-model="code" :highlight="highlighter" :line-numbers="false"/>
-		<MkButton style="position: absolute; top: 8px; right: 8px;" @click="run()" primary><Fa :icon="faPlay"/></MkButton>
+		<MkButton style="position: absolute; top: 8px; right: 8px;" @click="run()" primary><i class="fas fa-play"></i></MkButton>
 	</div>
 
 	<MkContainer :foldable="true" class="_gap">
-		<template #header><Fa fixed-width/>{{ $ts.output }}</template>
+		<template #header>{{ $ts.output }}</template>
 		<div class="bepmlvbi">
 			<div v-for="log in logs" class="log" :key="log.id" :class="{ print: log.print }">{{ log.text }}</div>
 		</div>
@@ -20,7 +20,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faTerminal, faPlay } from '@fortawesome/free-solid-svg-icons';
 import 'prismjs';
 import { highlight, languages } from 'prismjs/components/prism-core';
 import 'prismjs/components/prism-clike';
@@ -46,11 +45,10 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.scratchpad,
-				icon: faTerminal,
+				icon: 'fas fa-terminal',
 			},
 			code: '',
 			logs: [],
-			faTerminal, faPlay
 		}
 	},
 
diff --git a/src/client/pages/search.vue b/src/client/pages/search.vue
index b670714730..bf228576be 100644
--- a/src/client/pages/search.vue
+++ b/src/client/pages/search.vue
@@ -8,7 +8,6 @@
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue';
-import { faSearch } from '@fortawesome/free-solid-svg-icons';
 import Progress from '@client/scripts/loading';
 import XNotes from '@client/components/notes.vue';
 import * as symbols from '@client/symbols';
@@ -22,7 +21,7 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: computed(() => this.$t('searchWith', { q: this.$route.query.q })),
-				icon: faSearch
+				icon: 'fas fa-search'
 			},
 			pagination: {
 				endpoint: 'notes/search',
diff --git a/src/client/pages/settings/2fa.vue b/src/client/pages/settings/2fa.vue
index 361611bcb2..aa14f91d71 100644
--- a/src/client/pages/settings/2fa.vue
+++ b/src/client/pages/settings/2fa.vue
@@ -1,6 +1,6 @@
 <template>
 <section class="_card">
-	<div class="_title"><Fa :icon="faLock"/> {{ $ts.twoStepAuthentication }}</div>
+	<div class="_title"><i class="fas fa-lock"></i> {{ $ts.twoStepAuthentication }}</div>
 	<div class="_content">
 		<MkButton v-if="!data && !$i.twoFactorEnabled" @click="register">{{ $ts._2fa.registerDevice }}</MkButton>
 		<template v-if="$i.twoFactorEnabled">
@@ -28,7 +28,7 @@
 				<ol v-if="registration && !registration.error">
 					<li v-if="registration.stage >= 0">
 						{{ $ts.tapSecurityKey }}
-						<Fa icon="spinner" pulse fixed-width v-if="registration.saving && registration.stage == 0" />
+						<i v-if="registration.saving && registration.stage == 0" class="fas fa-spinner fa-pulse fa-fw"></i>
 					</li>
 					<li v-if="registration.stage >= 1">
 						<MkForm :disabled="registration.stage != 1 || registration.saving">
@@ -36,7 +36,7 @@
 								<span>{{ $ts.securityKeyName }}</span>
 							</MkInput>
 							<MkButton @click="registerKey" :disabled="keyName.length == 0">{{ $ts.registerSecurityKey }}</MkButton>
-							<Fa icon="spinner" pulse fixed-width v-if="registration.saving && registration.stage == 1" />
+							<i v-if="registration.saving && registration.stage == 1" class="fas fa-spinner fa-pulse fa-fw"></i>
 						</MkForm>
 					</li>
 				</ol>
@@ -68,7 +68,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faLock } from '@fortawesome/free-solid-svg-icons';
 import { hostname } from '@client/config';
 import { byteify, hexify, stringify } from '@client/scripts/2fa';
 import MkButton from '@client/components/ui/button.vue';
@@ -93,7 +92,7 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.twoStepAuthentication,
-				icon: faLock
+				icon: 'fas fa-lock'
 			},
 			data: null,
 			supportsCredentials: !!navigator.credentials,
@@ -101,7 +100,6 @@ export default defineComponent({
 			registration: null,
 			keyName: '',
 			token: null,
-			faLock
 		};
 	},
 
diff --git a/src/client/pages/settings/account-info.vue b/src/client/pages/settings/account-info.vue
index 955a0f7845..4d851b7b12 100644
--- a/src/client/pages/settings/account-info.vue
+++ b/src/client/pages/settings/account-info.vue
@@ -132,7 +132,6 @@
 
 <script lang="ts">
 import { defineAsyncComponent, defineComponent } from 'vue';
-import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
 import FormSwitch from '@client/components/form/switch.vue';
 import FormSelect from '@client/components/form/select.vue';
 import FormLink from '@client/components/form/link.vue';
@@ -162,7 +161,7 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.accountInfo,
-				icon: faInfoCircle
+				icon: 'fas fa-info-circle'
 			},
 			stats: null
 		}
diff --git a/src/client/pages/settings/api.vue b/src/client/pages/settings/api.vue
index 9b53399870..396d4405c3 100644
--- a/src/client/pages/settings/api.vue
+++ b/src/client/pages/settings/api.vue
@@ -8,7 +8,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faKey } from '@fortawesome/free-solid-svg-icons';
 import FormSwitch from '@client/components/form/switch.vue';
 import FormSelect from '@client/components/form/select.vue';
 import FormLink from '@client/components/form/link.vue';
@@ -31,7 +30,7 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: 'API',
-				icon: faKey
+				icon: 'fas fa-key'
 			},
 			isDesktop: window.innerWidth >= 1100,
 		};
diff --git a/src/client/pages/settings/apps.vue b/src/client/pages/settings/apps.vue
index 82bf9b7f8f..c864920ce1 100644
--- a/src/client/pages/settings/apps.vue
+++ b/src/client/pages/settings/apps.vue
@@ -22,7 +22,7 @@
 						<div><MkTime :time="token.lastUsedAt"/></div>
 					</div>
 					<div class="actions">
-						<button class="_button" @click="revoke(token)"><Fa :icon="faTrashAlt"/></button>
+						<button class="_button" @click="revoke(token)"><i class="fas fa-trash-alt"></i></button>
 					</div>
 					<details>
 						<summary>{{ $ts.details }}</summary>
@@ -39,7 +39,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faTrashAlt, faPlug } from '@fortawesome/free-solid-svg-icons';
 import FormPagination from '@client/components/form/pagination.vue';
 import FormSelect from '@client/components/form/select.vue';
 import FormLink from '@client/components/form/link.vue';
@@ -61,7 +60,7 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.installedApps,
-				icon: faPlug,
+				icon: 'fas fa-plug',
 			},
 			pagination: {
 				endpoint: 'i/apps',
@@ -70,7 +69,6 @@ export default defineComponent({
 					sort: '+lastUsedAt'
 				}
 			},
-			faTrashAlt, faPlug
 		};
 	},
 
diff --git a/src/client/pages/settings/deck.vue b/src/client/pages/settings/deck.vue
index 84992adc09..05f3061ca1 100644
--- a/src/client/pages/settings/deck.vue
+++ b/src/client/pages/settings/deck.vue
@@ -31,7 +31,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faImage, faCog, faColumns } from '@fortawesome/free-solid-svg-icons';
 import FormSwitch from '@client/components/form/switch.vue';
 import FormLink from '@client/components/form/link.vue';
 import FormRadios from '@client/components/form/radios.vue';
@@ -59,9 +58,8 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.deck,
-				icon: faColumns
+				icon: 'fas fa-columns'
 			},
-			faImage, faCog,
 		}
 	},
 
diff --git a/src/client/pages/settings/drive.vue b/src/client/pages/settings/drive.vue
index 675b025ab8..3da2a21dc7 100644
--- a/src/client/pages/settings/drive.vue
+++ b/src/client/pages/settings/drive.vue
@@ -27,7 +27,7 @@
 	<FormButton :center="false" @click="chooseUploadFolder()" primary>
 		{{ $ts.uploadFolder }}
 		<template #suffix>{{ uploadFolder ? uploadFolder.name : '-' }}</template>
-		<template #suffixIcon><Fa :icon="faFolderOpen"/></template>
+		<template #suffixIcon><i class="fas fa-folder-open"></i></template>
 	</FormButton>
 </FormBase>
 </template>
@@ -36,8 +36,6 @@
 import { defineComponent } from 'vue';
 import * as tinycolor from 'tinycolor2';
 import ApexCharts from 'apexcharts';
-import { faCloud, faFolderOpen } from '@fortawesome/free-solid-svg-icons';
-import { faClock, faEyeSlash, faTrashAlt } from '@fortawesome/free-regular-svg-icons';
 import FormButton from '@client/components/form/button.vue';
 import FormGroup from '@client/components/form/group.vue';
 import FormKeyValueView from '@client/components/form/key-value-view.vue';
@@ -60,13 +58,12 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.drive,
-				icon: faCloud
+				icon: 'fas fa-cloud'
 			},
 			fetching: true,
 			usage: null,
 			capacity: null,
 			uploadFolder: null,
-			faCloud, faClock, faEyeSlash, faFolderOpen, faTrashAlt
 		}
 	},
 
diff --git a/src/client/pages/settings/email-address.vue b/src/client/pages/settings/email-address.vue
index 97c5d396ce..28eeeb6b73 100644
--- a/src/client/pages/settings/email-address.vue
+++ b/src/client/pages/settings/email-address.vue
@@ -13,8 +13,6 @@
 
 <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 '@client/components/form/button.vue';
 import FormInput from '@client/components/form/input.vue';
 import FormBase from '@client/components/form/base.vue';
@@ -36,11 +34,10 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.emailAddress,
-				icon: faEnvelope
+				icon: 'fas fa-envelope'
 			},
 			emailAddress: null,
 			code: null,
-			faCog
 		}
 	},
 
diff --git a/src/client/pages/settings/email-notification.vue b/src/client/pages/settings/email-notification.vue
index cc28bac4b0..ac3402568a 100644
--- a/src/client/pages/settings/email-notification.vue
+++ b/src/client/pages/settings/email-notification.vue
@@ -25,8 +25,6 @@
 
 <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 '@client/components/form/button.vue';
 import FormSwitch from '@client/components/form/switch.vue';
 import FormBase from '@client/components/form/base.vue';
@@ -49,7 +47,7 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.emailNotification,
-				icon: faEnvelope
+				icon: 'fas fa-envelope'
 			},
 
 			mention: this.$i.emailNotificationTypes.includes('mention'),
diff --git a/src/client/pages/settings/email.vue b/src/client/pages/settings/email.vue
index 04f433f9ae..aa20d9d94e 100644
--- a/src/client/pages/settings/email.vue
+++ b/src/client/pages/settings/email.vue
@@ -3,14 +3,14 @@
 	<FormGroup>
 		<template #label>{{ $ts.emailAddress }}</template>
 		<FormLink to="/settings/email/address">
-			<template v-if="$i.email && !$i.emailVerified" #icon><Fa :icon="faExclamationTriangle" style="color: var(--warn);"/></template>
-			<template v-else-if="$i.email && $i.emailVerified" #icon><Fa :icon="faCheck" style="color: var(--success);"/></template>
+			<template v-if="$i.email && !$i.emailVerified" #icon><i class="fas fa-exclamation-triangle" style="color: var(--warn);"></i></template>
+			<template v-else-if="$i.email && $i.emailVerified" #icon><i class="fas fa-check" style="color: var(--success);"></i></template>
 			{{ $i.email || $ts.notSet }}
 		</FormLink>
 	</FormGroup>
 
 	<FormLink to="/settings/email/notification">
-		<template #icon><Fa :icon="faBell"/></template>
+		<template #icon><i class="fas fa-bell"></i></template>
 		{{ $ts.emailNotification }}
 	</FormLink>
 
@@ -22,8 +22,6 @@
 
 <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 '@client/components/form/button.vue';
 import FormLink from '@client/components/form/link.vue';
 import FormBase from '@client/components/form/base.vue';
@@ -47,9 +45,8 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.email,
-				icon: faEnvelope
+				icon: 'fas fa-envelope'
 			},
-			faCog, faExclamationTriangle, faCheck, faBell
 		}
 	},
 
diff --git a/src/client/pages/settings/experimental-features.vue b/src/client/pages/settings/experimental-features.vue
index 25453b7e10..f8d5e419e9 100644
--- a/src/client/pages/settings/experimental-features.vue
+++ b/src/client/pages/settings/experimental-features.vue
@@ -6,7 +6,6 @@
 
 <script lang="ts">
 import { defineAsyncComponent, defineComponent } from 'vue';
-import { faFlask } from '@fortawesome/free-solid-svg-icons';
 import FormSwitch from '@client/components/form/switch.vue';
 import FormSelect from '@client/components/form/select.vue';
 import FormLink from '@client/components/form/link.vue';
@@ -34,7 +33,7 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.experimentalFeatures,
-				icon: faFlask
+				icon: 'fas fa-flask'
 			},
 			stats: null
 		}
diff --git a/src/client/pages/settings/general.vue b/src/client/pages/settings/general.vue
index 2963ddf432..fdbae0b8a1 100644
--- a/src/client/pages/settings/general.vue
+++ b/src/client/pages/settings/general.vue
@@ -83,7 +83,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faImage, faCog, faColumns, faCogs } from '@fortawesome/free-solid-svg-icons';
 import FormSwitch from '@client/components/form/switch.vue';
 import FormSelect from '@client/components/form/select.vue';
 import FormRadios from '@client/components/form/radios.vue';
@@ -117,13 +116,12 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.general,
-				icon: faCogs
+				icon: 'fas fa-cogs'
 			},
 			langs,
 			lang: localStorage.getItem('lang'),
 			fontSize: localStorage.getItem('fontSize'),
 			useSystemFont: localStorage.getItem('useSystemFont') != null,
-			faImage, faCog, faColumns
 		}
 	},
 
diff --git a/src/client/pages/settings/import-export.vue b/src/client/pages/settings/import-export.vue
index 1591a9d548..e77efb4429 100644
--- a/src/client/pages/settings/import-export.vue
+++ b/src/client/pages/settings/import-export.vue
@@ -2,32 +2,31 @@
 <FormBase>
 	<FormGroup>
 		<template #label>{{ $ts._exportOrImport.allNotes }}</template>
-		<FormButton @click="doExport('notes')"><Fa :icon="faDownload"/> {{ $ts.export }}</FormButton>
+		<FormButton @click="doExport('notes')"><i class="fas fa-download"></i> {{ $ts.export }}</FormButton>
 	</FormGroup>
 	<FormGroup>
 		<template #label>{{ $ts._exportOrImport.followingList }}</template>
-		<FormButton @click="doExport('following')"><Fa :icon="faDownload"/> {{ $ts.export }}</FormButton>
-		<FormButton @click="doImport('following', $event)"><Fa :icon="faUpload"/> {{ $ts.import }}</FormButton>
+		<FormButton @click="doExport('following')"><i class="fas fa-download"></i> {{ $ts.export }}</FormButton>
+		<FormButton @click="doImport('following', $event)"><i class="fas fa-upload"></i> {{ $ts.import }}</FormButton>
 	</FormGroup>
 	<FormGroup>
 		<template #label>{{ $ts._exportOrImport.userLists }}</template>
-		<FormButton @click="doExport('user-lists')"><Fa :icon="faDownload"/> {{ $ts.export }}</FormButton>
-		<FormButton @click="doImport('user-lists', $event)"><Fa :icon="faUpload"/> {{ $ts.import }}</FormButton>
+		<FormButton @click="doExport('user-lists')"><i class="fas fa-download"></i> {{ $ts.export }}</FormButton>
+		<FormButton @click="doImport('user-lists', $event)"><i class="fas fa-upload"></i> {{ $ts.import }}</FormButton>
 	</FormGroup>
 	<FormGroup>
 		<template #label>{{ $ts._exportOrImport.muteList }}</template>
-		<FormButton @click="doExport('mute')"><Fa :icon="faDownload"/> {{ $ts.export }}</FormButton>
+		<FormButton @click="doExport('mute')"><i class="fas fa-download"></i> {{ $ts.export }}</FormButton>
 	</FormGroup>
 	<FormGroup>
 		<template #label>{{ $ts._exportOrImport.blockingList }}</template>
-		<FormButton @click="doExport('blocking')"><Fa :icon="faDownload"/> {{ $ts.export }}</FormButton>
+		<FormButton @click="doExport('blocking')"><i class="fas fa-download"></i> {{ $ts.export }}</FormButton>
 	</FormGroup>
 </FormBase>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faDownload, faUpload, faBoxes } from '@fortawesome/free-solid-svg-icons';
 import FormSelect from '@client/components/form/select.vue';
 import FormButton from '@client/components/form/button.vue';
 import FormBase from '@client/components/form/base.vue';
@@ -49,9 +48,8 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.importAndExport,
-				icon: faBoxes
+				icon: 'fas fa-boxes'
 			},
-			faDownload, faUpload, faBoxes
 		}
 	},
 
diff --git a/src/client/pages/settings/index.vue b/src/client/pages/settings/index.vue
index eb7469c861..ba4fc40ae7 100644
--- a/src/client/pages/settings/index.vue
+++ b/src/client/pages/settings/index.vue
@@ -4,30 +4,30 @@
 		<FormBase>
 			<FormGroup>
 				<template #label>{{ $ts.basicSettings }}</template>
-				<FormLink :active="page === 'profile'" replace to="/settings/profile"><template #icon><Fa :icon="faUser"/></template>{{ $ts.profile }}</FormLink>
-				<FormLink :active="page === 'privacy'" replace to="/settings/privacy"><template #icon><Fa :icon="faLockOpen"/></template>{{ $ts.privacy }}</FormLink>
-				<FormLink :active="page === 'reaction'" replace to="/settings/reaction"><template #icon><Fa :icon="faLaugh"/></template>{{ $ts.reaction }}</FormLink>
-				<FormLink :active="page === 'drive'" replace to="/settings/drive"><template #icon><Fa :icon="faCloud"/></template>{{ $ts.drive }}</FormLink>
-				<FormLink :active="page === 'notifications'" replace to="/settings/notifications"><template #icon><Fa :icon="faBell"/></template>{{ $ts.notifications }}</FormLink>
-				<FormLink :active="page === 'email'" replace to="/settings/email"><template #icon><Fa :icon="faEnvelope"/></template>{{ $ts.email }}</FormLink>
-				<FormLink :active="page === 'integration'" replace to="/settings/integration"><template #icon><Fa :icon="faShareAlt"/></template>{{ $ts.integration }}</FormLink>
-				<FormLink :active="page === 'security'" replace to="/settings/security"><template #icon><Fa :icon="faLock"/></template>{{ $ts.security }}</FormLink>
+				<FormLink :active="page === 'profile'" replace to="/settings/profile"><template #icon><i class="fas fa-user"></i></template>{{ $ts.profile }}</FormLink>
+				<FormLink :active="page === 'privacy'" replace to="/settings/privacy"><template #icon><i class="fas fa-lock-open"></i></template>{{ $ts.privacy }}</FormLink>
+				<FormLink :active="page === 'reaction'" replace to="/settings/reaction"><template #icon><i class="fas fa-laugh"></i></template>{{ $ts.reaction }}</FormLink>
+				<FormLink :active="page === 'drive'" replace to="/settings/drive"><template #icon><i class="fas fa-cloud"></i></template>{{ $ts.drive }}</FormLink>
+				<FormLink :active="page === 'notifications'" replace to="/settings/notifications"><template #icon><i class="fas fa-bell"></i></template>{{ $ts.notifications }}</FormLink>
+				<FormLink :active="page === 'email'" replace to="/settings/email"><template #icon><i class="fas fa-envelope"></i></template>{{ $ts.email }}</FormLink>
+				<FormLink :active="page === 'integration'" replace to="/settings/integration"><template #icon><i class="fas fa-share-alt"></i></template>{{ $ts.integration }}</FormLink>
+				<FormLink :active="page === 'security'" replace to="/settings/security"><template #icon><i class="fas fa-lock"></i></template>{{ $ts.security }}</FormLink>
 			</FormGroup>
 			<FormGroup>
 				<template #label>{{ $ts.clientSettings }}</template>
-				<FormLink :active="page === 'general'" replace to="/settings/general"><template #icon><Fa :icon="faCogs"/></template>{{ $ts.general }}</FormLink>
-				<FormLink :active="page === 'theme'" replace to="/settings/theme"><template #icon><Fa :icon="faPalette"/></template>{{ $ts.theme }}</FormLink>
-				<FormLink :active="page === 'sidebar'" replace to="/settings/sidebar"><template #icon><Fa :icon="faListUl"/></template>{{ $ts.sidebar }}</FormLink>
-				<FormLink :active="page === 'sounds'" replace to="/settings/sounds"><template #icon><Fa :icon="faMusic"/></template>{{ $ts.sounds }}</FormLink>
-				<FormLink :active="page === 'plugin'" replace to="/settings/plugin"><template #icon><Fa :icon="faPlug"/></template>{{ $ts.plugins }}</FormLink>
+				<FormLink :active="page === 'general'" replace to="/settings/general"><template #icon><i class="fas fa-cogs"></i></template>{{ $ts.general }}</FormLink>
+				<FormLink :active="page === 'theme'" replace to="/settings/theme"><template #icon><i class="fas fa-palette"></i></template>{{ $ts.theme }}</FormLink>
+				<FormLink :active="page === 'sidebar'" replace to="/settings/sidebar"><template #icon><i class="fas fa-list-ul"></i></template>{{ $ts.sidebar }}</FormLink>
+				<FormLink :active="page === 'sounds'" replace to="/settings/sounds"><template #icon><i class="fas fa-music"></i></template>{{ $ts.sounds }}</FormLink>
+				<FormLink :active="page === 'plugin'" replace to="/settings/plugin"><template #icon><i class="fas fa-plug"></i></template>{{ $ts.plugins }}</FormLink>
 			</FormGroup>
 			<FormGroup>
 				<template #label>{{ $ts.otherSettings }}</template>
-				<FormLink :active="page === 'import-export'" replace to="/settings/import-export"><template #icon><Fa :icon="faBoxes"/></template>{{ $ts.importAndExport }}</FormLink>
-				<FormLink :active="page === 'mute-block'" replace to="/settings/mute-block"><template #icon><Fa :icon="faBan"/></template>{{ $ts.muteAndBlock }}</FormLink>
-				<FormLink :active="page === 'word-mute'" replace to="/settings/word-mute"><template #icon><Fa :icon="faCommentSlash"/></template>{{ $ts.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>{{ $ts.other }}</FormLink>
+				<FormLink :active="page === 'import-export'" replace to="/settings/import-export"><template #icon><i class="fas fa-boxes"></i></template>{{ $ts.importAndExport }}</FormLink>
+				<FormLink :active="page === 'mute-block'" replace to="/settings/mute-block"><template #icon><i class="fas fa-ban"></i></template>{{ $ts.muteAndBlock }}</FormLink>
+				<FormLink :active="page === 'word-mute'" replace to="/settings/word-mute"><template #icon><i class="fas fa-comment-slash"></i></template>{{ $ts.wordMute }}</FormLink>
+				<FormLink :active="page === 'api'" replace to="/settings/api"><template #icon><i class="fas fa-key"></i></template>API</FormLink>
+				<FormLink :active="page === 'other'" replace to="/settings/other"><template #icon><i class="fas fa-ellipsis-h"></i></template>{{ $ts.other }}</FormLink>
 			</FormGroup>
 			<FormGroup>
 				<FormButton @click="clear">{{ $ts.clearCache }}</FormButton>
@@ -45,8 +45,6 @@
 
 <script lang="ts">
 import { computed, defineAsyncComponent, defineComponent, nextTick, onMounted, reactive, ref, watch } from 'vue';
-import { faCog, faPalette, faPlug, faUser, faListUl, faLock, faCommentSlash, faMusic, faCogs, faEllipsisH, faBan, faShareAlt, faLockOpen, faKey, faBoxes, faCloud } from '@fortawesome/free-solid-svg-icons';
-import { faLaugh, faBell, faEnvelope } from '@fortawesome/free-regular-svg-icons';
 import { i18n } from '@client/i18n';
 import FormLink from '@client/components/form/link.vue';
 import FormGroup from '@client/components/form/group.vue';
@@ -75,7 +73,7 @@ export default defineComponent({
 	setup(props, context) {
 		const indexInfo = {
 			title: i18n.locale.settings,
-			icon: faCog
+			icon: 'fas fa-cog'
 		};
 		const INFO = ref(indexInfo);
 		const page = ref(props.initialPage);
@@ -183,7 +181,6 @@ export default defineComponent({
 				localStorage.removeItem('theme');
 				unisonReload();
 			},
-			faPalette, faPlug, faUser, faListUl, faLock, faLaugh, faCommentSlash, faMusic, faBell, faCogs, faEllipsisH, faBan, faShareAlt, faLockOpen, faKey, faBoxes, faEnvelope, faCloud,
 		};
 	},
 });
diff --git a/src/client/pages/settings/integration.vue b/src/client/pages/settings/integration.vue
index 49f955bc35..2d2be04051 100644
--- a/src/client/pages/settings/integration.vue
+++ b/src/client/pages/settings/integration.vue
@@ -1,7 +1,7 @@
 <template>
 <FormBase>
 	<div class="_formItem" v-if="enableTwitterIntegration">
-		<div class="_formLabel"><Fa :icon="faTwitter"/> Twitter</div>
+		<div class="_formLabel"><i class="fab fa-twitter"></i> Twitter</div>
 		<div class="_formPanel" style="padding: 16px;">
 			<p v-if="integrations.twitter">{{ $ts.connectedTo }}: <a :href="`https://twitter.com/${integrations.twitter.screenName}`" rel="nofollow noopener" target="_blank">@{{ integrations.twitter.screenName }}</a></p>
 			<MkButton v-if="integrations.twitter" @click="disconnectTwitter" danger>{{ $ts.disconnectSerice }}</MkButton>
@@ -10,7 +10,7 @@
 	</div>
 
 	<div class="_formItem" v-if="enableDiscordIntegration">
-		<div class="_formLabel"><Fa :icon="faDiscord"/> Discord</div>
+		<div class="_formLabel"><i class="fab fa-discord"></i> Discord</div>
 		<div class="_formPanel" style="padding: 16px;">
 			<p v-if="integrations.discord">{{ $ts.connectedTo }}: <a :href="`https://discord.com/users/${integrations.discord.id}`" rel="nofollow noopener" target="_blank">@{{ integrations.discord.username }}#{{ integrations.discord.discriminator }}</a></p>
 			<MkButton v-if="integrations.discord" @click="disconnectDiscord" danger>{{ $ts.disconnectSerice }}</MkButton>
@@ -19,7 +19,7 @@
 	</div>
 
 	<div class="_formItem" v-if="enableGithubIntegration">
-		<div class="_formLabel"><Fa :icon="faGithub"/> GitHub</div>
+		<div class="_formLabel"><i class="fab fa-github"></i> GitHub</div>
 		<div class="_formPanel" style="padding: 16px;">
 			<p v-if="integrations.github">{{ $ts.connectedTo }}: <a :href="`https://github.com/${integrations.github.login}`" rel="nofollow noopener" target="_blank">@{{ integrations.github.login }}</a></p>
 			<MkButton v-if="integrations.github" @click="disconnectGithub" danger>{{ $ts.disconnectSerice }}</MkButton>
@@ -31,8 +31,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faShareAlt } from '@fortawesome/free-solid-svg-icons';
-import { faTwitter, faDiscord, faGithub } from '@fortawesome/free-brands-svg-icons';
 import { apiUrl } from '@client/config';
 import FormBase from '@client/components/form/base.vue';
 import MkButton from '@client/components/ui/button.vue';
@@ -51,7 +49,7 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.integration,
-				icon: faShareAlt
+				icon: 'fas fa-share-alt'
 			},
 			apiUrl,
 			twitterForm: null,
@@ -60,7 +58,6 @@ export default defineComponent({
 			enableTwitterIntegration: false,
 			enableDiscordIntegration: false,
 			enableGithubIntegration: false,
-			faShareAlt, faTwitter, faDiscord, faGithub
 		};
 	},
 
diff --git a/src/client/pages/settings/mute-block.vue b/src/client/pages/settings/mute-block.vue
index 11450e049b..dde0199e18 100644
--- a/src/client/pages/settings/mute-block.vue
+++ b/src/client/pages/settings/mute-block.vue
@@ -33,7 +33,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faBan } from '@fortawesome/free-solid-svg-icons';
 import MkPagination from '@client/components/ui/pagination.vue';
 import MkTab from '@client/components/tab.vue';
 import FormInfo from '@client/components/form/info.vue';
@@ -60,7 +59,7 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.muteAndBlock,
-				icon: faBan
+				icon: 'fas fa-ban'
 			},
 			tab: 'mute',
 			mutingPagination: {
diff --git a/src/client/pages/settings/notifications.vue b/src/client/pages/settings/notifications.vue
index ea72bcfee8..ec95452ba2 100644
--- a/src/client/pages/settings/notifications.vue
+++ b/src/client/pages/settings/notifications.vue
@@ -11,8 +11,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faCog } from '@fortawesome/free-solid-svg-icons';
-import { faBell } from '@fortawesome/free-regular-svg-icons';
 import FormButton from '@client/components/form/button.vue';
 import FormLink from '@client/components/form/link.vue';
 import FormBase from '@client/components/form/base.vue';
@@ -35,9 +33,8 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.notifications,
-				icon: faBell
+				icon: 'fas fa-bell'
 			},
-			faCog
 		}
 	},
 
diff --git a/src/client/pages/settings/other.vue b/src/client/pages/settings/other.vue
index 2bd9c2476c..7aa6b37725 100644
--- a/src/client/pages/settings/other.vue
+++ b/src/client/pages/settings/other.vue
@@ -21,10 +21,10 @@
 		</template>
 	</FormGroup>
 
-	<FormLink to="/settings/registry"><template #icon><Fa :icon="faCogs"/></template>{{ $ts.registry }}</FormLink>
+	<FormLink to="/settings/registry"><template #icon><i class="fas fa-cogs"></i></template>{{ $ts.registry }}</FormLink>
 
-	<FormLink to="/bios" behavior="browser"><template #icon><Fa :icon="faDoorOpen"/></template>BIOS</FormLink>
-	<FormLink to="/cli" behavior="browser"><template #icon><Fa :icon="faDoorOpen"/></template>CLI</FormLink>
+	<FormLink to="/bios" behavior="browser"><template #icon><i class="fas fa-door-open"></i></template>BIOS</FormLink>
+	<FormLink to="/cli" behavior="browser"><template #icon><i class="fas fa-door-open"></i></template>CLI</FormLink>
 
 	<FormButton @click="closeAccount" danger>{{ $ts.closeAccount }}</FormButton>
 </FormBase>
@@ -32,7 +32,6 @@
 
 <script lang="ts">
 import { defineAsyncComponent, defineComponent } from 'vue';
-import { faEllipsisH, faCogs, faDoorOpen } from '@fortawesome/free-solid-svg-icons';
 import FormSwitch from '@client/components/form/switch.vue';
 import FormSelect from '@client/components/form/select.vue';
 import FormLink from '@client/components/form/link.vue';
@@ -62,10 +61,9 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.other,
-				icon: faEllipsisH
+				icon: 'fas fa-ellipsis'H
 			},
 			debug,
-			faCogs, faDoorOpen,
 		}
 	},
 
diff --git a/src/client/pages/settings/plugin.install.vue b/src/client/pages/settings/plugin.install.vue
index bc80188fc6..30cbf58ad7 100644
--- a/src/client/pages/settings/plugin.install.vue
+++ b/src/client/pages/settings/plugin.install.vue
@@ -8,13 +8,12 @@
 		</FormTextarea>
 	</FormGroup>
 
-	<FormButton @click="install" :disabled="code == null" primary inline><Fa :icon="faCheck"/> {{ $ts.install }}</FormButton>
+	<FormButton @click="install" :disabled="code == null" primary inline><i class="fas fa-check"></i> {{ $ts.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 { AiScript, parse } from '@syuilo/aiscript';
 import { serialize } from '@syuilo/aiscript/built/serializer';
 import { v4 as uuid } from 'uuid';
@@ -49,10 +48,9 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts._plugin.install,
-				icon: faDownload
+				icon: 'fas fa-download'
 			},
 			code: null,
-			faPalette, faDownload, faFolderOpen, faCheck, faTrashAlt, faEye
 		}
 	},
 
diff --git a/src/client/pages/settings/plugin.manage.vue b/src/client/pages/settings/plugin.manage.vue
index d7aabe560e..3df87ca084 100644
--- a/src/client/pages/settings/plugin.manage.vue
+++ b/src/client/pages/settings/plugin.manage.vue
@@ -22,8 +22,8 @@
 		</div>
 		<div class="_formItem">
 			<div class="_formPanel" style="padding: 16px;">
-				<MkButton @click="config(plugin)" inline v-if="plugin.config"><Fa :icon="faCog"/> {{ $ts.settings }}</MkButton>
-				<MkButton @click="uninstall(plugin)" inline danger><Fa :icon="faTrashAlt"/> {{ $ts.uninstall }}</MkButton>
+				<MkButton @click="config(plugin)" inline v-if="plugin.config"><i class="fas fa-cog"></i> {{ $ts.settings }}</MkButton>
+				<MkButton @click="uninstall(plugin)" inline danger><i class="fas fa-trash-alt"></i> {{ $ts.uninstall }}</MkButton>
 			</div>
 		</div>
 	</FormGroup>
@@ -32,7 +32,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faPlug, faSave, faTrashAlt, faFolderOpen, faDownload, faCog } from '@fortawesome/free-solid-svg-icons';
 import MkButton from '@client/components/ui/button.vue';
 import MkTextarea from '@client/components/ui/textarea.vue';
 import MkSelect from '@client/components/ui/select.vue';
@@ -59,10 +58,9 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts._plugin.manage,
-				icon: faPlug
+				icon: 'fas fa-plug'
 			},
 			plugins: ColdDeviceStorage.get('plugins'),
-			faPlug, faSave, faTrashAlt, faFolderOpen, faDownload, faCog
 		}
 	},
 
diff --git a/src/client/pages/settings/plugin.vue b/src/client/pages/settings/plugin.vue
index bee4e57ec3..13eaca07fd 100644
--- a/src/client/pages/settings/plugin.vue
+++ b/src/client/pages/settings/plugin.vue
@@ -1,13 +1,12 @@
 <template>
 <FormBase>
-	<FormLink to="/settings/plugin/install"><template #icon><Fa :icon="faDownload"/></template>{{ $ts._plugin.install }}</FormLink>
-	<FormLink to="/settings/plugin/manage"><template #icon><Fa :icon="faFolderOpen"/></template>{{ $ts._plugin.manage }}<template #suffix>{{ plugins }}</template></FormLink>
+	<FormLink to="/settings/plugin/install"><template #icon><i class="fas fa-download"></i></template>{{ $ts._plugin.install }}</FormLink>
+	<FormLink to="/settings/plugin/manage"><template #icon><i class="fas fa-folder-open"></i></template>{{ $ts._plugin.manage }}<template #suffix>{{ plugins }}</template></FormLink>
 </FormBase>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faPlug, faSave, faTrashAlt, faFolderOpen, faDownload, faCog } from '@fortawesome/free-solid-svg-icons';
 import FormBase from '@client/components/form/base.vue';
 import FormGroup from '@client/components/form/group.vue';
 import FormLink from '@client/components/form/link.vue';
@@ -27,10 +26,9 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.plugins,
-				icon: faPlug
+				icon: 'fas fa-plug'
 			},
 			plugins: ColdDeviceStorage.get('plugins').length,
-			faPlug, faSave, faTrashAlt, faFolderOpen, faDownload, faCog
 		}
 	},
 
diff --git a/src/client/pages/settings/privacy.vue b/src/client/pages/settings/privacy.vue
index c8df378410..4095e744c2 100644
--- a/src/client/pages/settings/privacy.vue
+++ b/src/client/pages/settings/privacy.vue
@@ -33,7 +33,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faLockOpen } from '@fortawesome/free-solid-svg-icons';
 import FormSwitch from '@client/components/form/switch.vue';
 import FormSelect from '@client/components/form/select.vue';
 import FormBase from '@client/components/form/base.vue';
@@ -56,7 +55,7 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.privacy,
-				icon: faLockOpen
+				icon: 'fas fa-lock-open'
 			},
 			isLocked: false,
 			autoAcceptFollowed: false,
diff --git a/src/client/pages/settings/profile.vue b/src/client/pages/settings/profile.vue
index 5ec580a206..de7e86bd12 100644
--- a/src/client/pages/settings/profile.vue
+++ b/src/client/pages/settings/profile.vue
@@ -19,12 +19,12 @@
 
 	<FormInput v-model:value="location" manual-save>
 		<span>{{ $ts.location }}</span>
-		<template #prefix><Fa :icon="faMapMarkerAlt"/></template>
+		<template #prefix><i class="fas fa-map-marker-alt"></i></template>
 	</FormInput>
 
 	<FormInput v-model:value="birthday" type="date" manual-save>
 		<span>{{ $ts.birthday }}</span>
-		<template #prefix><Fa :icon="faBirthdayCake"/></template>
+		<template #prefix><i class="fas fa-birthday-cake"></i></template>
 	</FormInput>
 
 	<FormSelect v-model:value="lang">
@@ -47,8 +47,6 @@
 
 <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 FormButton from '@client/components/form/button.vue';
 import FormInput from '@client/components/form/input.vue';
 import FormTextarea from '@client/components/form/textarea.vue';
@@ -78,7 +76,7 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.profile,
-				icon: faUser
+				icon: 'fas fa-user'
 			},
 			host,
 			langs,
@@ -101,7 +99,6 @@ export default defineComponent({
 			isCat: false,
 			alwaysMarkNsfw: false,
 			saving: false,
-			faSave, faUnlockAlt, faCogs, faUser, faMapMarkerAlt, faBirthdayCake
 		}
 	},
 
diff --git a/src/client/pages/settings/reaction.vue b/src/client/pages/settings/reaction.vue
index 0293f53fa8..9bffd5f903 100644
--- a/src/client/pages/settings/reaction.vue
+++ b/src/client/pages/settings/reaction.vue
@@ -10,7 +10,7 @@
 					</button>
 				</template>
 				<template #footer>
-					<button class="_button add" @click="chooseEmoji"><Fa :icon="faPlus"/></button>
+					<button class="_button add" @click="chooseEmoji"><i class="fas fa-plus"></i></button>
 				</template>
 			</XDraggable>
 		</div>
@@ -29,15 +29,13 @@
 		<option :value="2">{{ $ts.medium }}</option>
 		<option :value="3">{{ $ts.large }}</option>
 	</FormRadios>
-	<FormButton @click="preview"><Fa :icon="faEye"/> {{ $ts.preview }}</FormButton>
-	<FormButton danger @click="setDefault"><Fa :icon="faUndo"/> {{ $ts.default }}</FormButton>
+	<FormButton @click="preview"><i class="fas fa-eye"></i> {{ $ts.preview }}</FormButton>
+	<FormButton danger @click="setDefault"><i class="fas fa-undo"></i> {{ $ts.default }}</FormButton>
 </FormBase>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faLaugh, faSave, faEye } from '@fortawesome/free-regular-svg-icons';
-import { faUndo, faPlus } from '@fortawesome/free-solid-svg-icons';
 import XDraggable from 'vuedraggable';
 import FormInput from '@client/components/form/input.vue';
 import FormRadios from '@client/components/form/radios.vue';
@@ -62,14 +60,13 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.reaction,
-				icon: faLaugh,
+				icon: 'fas fa-laugh',
 				action: {
-					icon: faEye,
+					icon: 'fas fa-eye',
 					handler: this.preview
 				}
 			},
 			reactions: JSON.parse(JSON.stringify(this.$store.state.reactions)),
-			faLaugh, faSave, faEye, faUndo, faPlus
 		}
 	},
 
diff --git a/src/client/pages/settings/registry.keys.vue b/src/client/pages/settings/registry.keys.vue
index 5cdfdc1332..f71589ba4f 100644
--- a/src/client/pages/settings/registry.keys.vue
+++ b/src/client/pages/settings/registry.keys.vue
@@ -22,7 +22,6 @@
 
 <script lang="ts">
 import { defineAsyncComponent, defineComponent } from 'vue';
-import { faCogs } from '@fortawesome/free-solid-svg-icons';
 import * as JSON5 from 'json5';
 import FormSwitch from '@client/components/form/switch.vue';
 import FormSelect from '@client/components/form/select.vue';
@@ -57,7 +56,7 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.registry,
-				icon: faCogs
+				icon: 'fas fa-cogs'
 			},
 			keys: null,
 		}
diff --git a/src/client/pages/settings/registry.value.vue b/src/client/pages/settings/registry.value.vue
index 7d5756af99..48245ae99f 100644
--- a/src/client/pages/settings/registry.value.vue
+++ b/src/client/pages/settings/registry.value.vue
@@ -22,7 +22,7 @@
 			<FormTextarea tall v-model:value="valueForEditor" class="_monospace" style="tab-size: 2;">
 				<span>{{ $ts.value }} (JSON)</span>
 			</FormTextarea>
-			<FormButton @click="save" primary><Fa :icon="faSave"/> {{ $ts.save }}</FormButton>
+			<FormButton @click="save" primary><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
 		</FormGroup>
 
 		<FormKeyValueView>
@@ -30,14 +30,13 @@
 			<template #value><MkTime :time="value.updatedAt" mode="detail"/></template>
 		</FormKeyValueView>
 
-		<FormButton danger @click="del"><Fa :icon="faTrash"/> {{ $ts.delete }}</FormButton>
+		<FormButton danger @click="del"><i class="fas fa-trash"></i> {{ $ts.delete }}</FormButton>
 	</template>
 </FormBase>
 </template>
 
 <script lang="ts">
 import { defineAsyncComponent, defineComponent } from 'vue';
-import { faCogs, faSave, faTrash } from '@fortawesome/free-solid-svg-icons';
 import * as JSON5 from 'json5';
 import FormInfo from '@client/components/form/info.vue';
 import FormSwitch from '@client/components/form/switch.vue';
@@ -77,11 +76,10 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.registry,
-				icon: faCogs
+				icon: 'fas fa-cogs'
 			},
 			value: null,
 			valueForEditor: null,
-			faSave, faTrash,
 		}
 	},
 
diff --git a/src/client/pages/settings/registry.vue b/src/client/pages/settings/registry.vue
index 085389fc95..5ba1bc751b 100644
--- a/src/client/pages/settings/registry.vue
+++ b/src/client/pages/settings/registry.vue
@@ -10,7 +10,6 @@
 
 <script lang="ts">
 import { defineAsyncComponent, defineComponent } from 'vue';
-import { faCogs } from '@fortawesome/free-solid-svg-icons';
 import * as JSON5 from 'json5';
 import FormSwitch from '@client/components/form/switch.vue';
 import FormSelect from '@client/components/form/select.vue';
@@ -39,7 +38,7 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.registry,
-				icon: faCogs
+				icon: 'fas fa-cogs'
 			},
 			scopes: null,
 		}
diff --git a/src/client/pages/settings/security.vue b/src/client/pages/settings/security.vue
index 64733c55a2..b70fa5a9f3 100644
--- a/src/client/pages/settings/security.vue
+++ b/src/client/pages/settings/security.vue
@@ -1,15 +1,15 @@
 <template>
 <FormBase>
 	<X2fa/>
-	<FormLink to="/settings/2fa"><template #icon><Fa :icon="faMobileAlt"/></template>{{ $ts.twoStepAuthentication }}</FormLink>
+	<FormLink to="/settings/2fa"><template #icon><i class="fas fa-mobile-alt"></i></template>{{ $ts.twoStepAuthentication }}</FormLink>
 	<FormButton primary @click="change()">{{ $ts.changePassword }}</FormButton>
 	<FormPagination :pagination="pagination">
 		<template #label>{{ $ts.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/>
+					<i v-if="item.success" class="fas fa-check icon succ"></i>
+					<i v-else class="fas fa-times-circle icon fail"></i>
 					<code class="ip _monospace">{{ item.ip }}</code>
 					<MkTime :time="item.createdAt" class="time"/>
 				</header>
@@ -17,7 +17,7 @@
 		</template>
 	</FormPagination>
 	<FormGroup>
-		<FormButton danger @click="regenerateToken"><Fa :icon="faSyncAlt"/> {{ $ts.regenerateLoginToken }}</FormButton>
+		<FormButton danger @click="regenerateToken"><i class="fas fa-sync-alt"></i> {{ $ts.regenerateLoginToken }}</FormButton>
 		<template #caption>{{ $ts.regenerateLoginTokenDescription }}</template>
 	</FormGroup>
 </FormBase>
@@ -25,7 +25,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faCheck, faTimesCircle, faLock, faSyncAlt, faMobileAlt } from '@fortawesome/free-solid-svg-icons';
 import FormBase from '@client/components/form/base.vue';
 import FormLink from '@client/components/form/link.vue';
 import FormGroup from '@client/components/form/group.vue';
@@ -49,13 +48,12 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.security,
-				icon: faLock
+				icon: 'fas fa-lock'
 			},
 			pagination: {
 				endpoint: 'i/signin-history',
 				limit: 5,
 			},
-			faLock, faSyncAlt, faCheck, faTimesCircle, faMobileAlt,
 		}
 	},
 
diff --git a/src/client/pages/settings/sidebar.vue b/src/client/pages/settings/sidebar.vue
index adeec2f636..f0172e945f 100644
--- a/src/client/pages/settings/sidebar.vue
+++ b/src/client/pages/settings/sidebar.vue
@@ -12,14 +12,13 @@
 		<!-- <MkRadio v-model="sidebarDisplay" value="hide" disabled>{{ $ts._sidebar.hide }}</MkRadio>--> <!-- TODO: サイドバーを完全に隠せるようにすると、別途ハンバーガーボタンのようなものをUIに表示する必要があり面倒 -->
 	</FormRadios>
 
-	<FormButton @click="save()" primary><Fa :icon="faSave"/> {{ $ts.save }}</FormButton>
-	<FormButton @click="reset()" danger><Fa :icon="faRedo"/> {{ $ts.default }}</FormButton>
+	<FormButton @click="save()" primary><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
+	<FormButton @click="reset()" danger><i class="fas fa-redo"></i> {{ $ts.default }}</FormButton>
 </FormBase>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faListUl, faSave, faRedo } from '@fortawesome/free-solid-svg-icons';
 import FormSwitch from '@client/components/form/switch.vue';
 import FormTextarea from '@client/components/form/textarea.vue';
 import FormRadios from '@client/components/form/radios.vue';
@@ -45,11 +44,10 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.sidebar,
-				icon: faListUl
+				icon: 'fas fa-list-ul'
 			},
 			menuDef: sidebarDef,
 			items: '',
-			faSave, faRedo
 		}
 	},
 
diff --git a/src/client/pages/settings/sounds.vue b/src/client/pages/settings/sounds.vue
index 54be003115..f56ec4cd89 100644
--- a/src/client/pages/settings/sounds.vue
+++ b/src/client/pages/settings/sounds.vue
@@ -1,7 +1,7 @@
 <template>
 <FormBase>
 	<FormRange v-model:value="masterVolume" :min="0" :max="1" :step="0.05">
-		<template #label><Fa :icon="volumeIcon" :key="volumeIcon"/> {{ $ts.masterVolume }}</template>
+		<template #label><i class="fas fa-volume-icon"></i> {{ $ts.masterVolume }}</template>
 	</FormRange>
 
 	<FormGroup>
@@ -9,17 +9,16 @@
 		<FormButton v-for="type in Object.keys(sounds)" :key="type" :center="false" @click="edit(type)">
 			{{ $t('_sfx.' + type) }}
 			<template #suffix>{{ sounds[type].type || $ts.none }}</template>
-			<template #suffixIcon><Fa :icon="faChevronDown"/></template>
+			<template #suffixIcon><i class="fas fa-chevron-down"></i></template>
 		</FormButton>
 	</FormGroup>
 
-	<FormButton @click="reset()" danger><Fa :icon="faRedo"/> {{ $ts.default }}</FormButton>
+	<FormButton @click="reset()" danger><i class="fas fa-redo"></i> {{ $ts.default }}</FormButton>
 </FormBase>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faMusic, faPlay, faVolumeUp, faVolumeMute, faChevronDown, faRedo } from '@fortawesome/free-solid-svg-icons';
 import FormRange from '@client/components/form/range.vue';
 import FormSelect from '@client/components/form/select.vue';
 import FormBase from '@client/components/form/base.vue';
@@ -71,10 +70,9 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.sounds,
-				icon: faMusic
+				icon: 'fas fa-music'
 			},
 			sounds: {},
-			faMusic, faPlay, faVolumeUp, faVolumeMute, faChevronDown, faRedo,
 		}
 	},
 
@@ -84,7 +82,7 @@ export default defineComponent({
 			set(value) { ColdDeviceStorage.set('sound_masterVolume', value); }
 		},
 		volumeIcon() {
-			return this.masterVolume === 0 ? faVolumeMute : faVolumeUp;
+			return this.masterVolume === 0 ? 'fas fa-volume-mute' : 'fas fa-volume-up';
 		}
 	},
 
diff --git a/src/client/pages/settings/theme.install.vue b/src/client/pages/settings/theme.install.vue
index 744d1aba44..d719cc801f 100644
--- a/src/client/pages/settings/theme.install.vue
+++ b/src/client/pages/settings/theme.install.vue
@@ -4,16 +4,15 @@
 		<FormTextarea v-model:value="installThemeCode">
 			<span>{{ $ts._theme.code }}</span>
 		</FormTextarea>
-		<FormButton @click="() => preview(installThemeCode)" :disabled="installThemeCode == null" inline><Fa :icon="faEye"/> {{ $ts.preview }}</FormButton>
+		<FormButton @click="() => preview(installThemeCode)" :disabled="installThemeCode == null" inline><i class="fas fa-eye"></i> {{ $ts.preview }}</FormButton>
 	</FormGroup>
 
-	<FormButton @click="() => install(installThemeCode)" :disabled="installThemeCode == null" primary inline><Fa :icon="faCheck"/> {{ $ts.install }}</FormButton>
+	<FormButton @click="() => install(installThemeCode)" :disabled="installThemeCode == null" primary inline><i class="fas fa-check"></i> {{ $ts.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 '@client/components/form/textarea.vue';
 import FormSelect from '@client/components/form/select.vue';
@@ -45,10 +44,9 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts._theme.install,
-				icon: faDownload
+				icon: 'fas fa-download'
 			},
 			installThemeCode: null,
-			faPalette, faDownload, faFolderOpen, faCheck, faTrashAlt, faEye
 		}
 	},
 
diff --git a/src/client/pages/settings/theme.manage.vue b/src/client/pages/settings/theme.manage.vue
index ea9d5949ff..7cc7a0169a 100644
--- a/src/client/pages/settings/theme.manage.vue
+++ b/src/client/pages/settings/theme.manage.vue
@@ -20,14 +20,13 @@
 			<span>{{ $ts._theme.code }}</span>
 			<template #desc><button @click="copyThemeCode()" class="_textButton">{{ $ts.copy }}</button></template>
 		</FormTextarea>
-		<FormButton @click="uninstall()" danger v-if="!builtinThemes.some(t => t.id == selectedTheme.id)"><Fa :icon="faTrashAlt"/> {{ $ts.uninstall }}</FormButton>
+		<FormButton @click="uninstall()" danger v-if="!builtinThemes.some(t => t.id == selectedTheme.id)"><i class="fas fa-trash-alt"></i> {{ $ts.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 '@client/components/form/textarea.vue';
 import FormSelect from '@client/components/form/select.vue';
@@ -60,12 +59,11 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts._theme.manage,
-				icon: faFolderOpen
+				icon: 'fas fa-folder-open'
 			},
 			installedThemes: getThemes(),
 			builtinThemes,
 			selectedThemeId: null,
-			faPalette, faDownload, faFolderOpen, faCheck, faTrashAlt, faEye
 		}
 	},
 
diff --git a/src/client/pages/settings/theme.vue b/src/client/pages/settings/theme.vue
index 606e10ab7a..1eb0d68be5 100644
--- a/src/client/pages/settings/theme.vue
+++ b/src/client/pages/settings/theme.vue
@@ -71,22 +71,21 @@
 	<FormButton primary v-else @click="wallpaper = null">{{ $ts.removeWallpaper }}</FormButton>
 
 	<FormGroup>
-		<FormLink to="https://assets.msky.cafe/theme/list" external><template #icon><Fa :icon="faGlobe"/></template>{{ $ts._theme.explore }}</FormLink>
-		<FormLink to="/settings/theme/install"><template #icon><Fa :icon="faDownload"/></template>{{ $ts._theme.install }}</FormLink>
+		<FormLink to="https://assets.msky.cafe/theme/list" external><template #icon><i class="fas fa-globe"></i></template>{{ $ts._theme.explore }}</FormLink>
+		<FormLink to="/settings/theme/install"><template #icon><i class="fas fa-download"></i></template>{{ $ts._theme.install }}</FormLink>
 	</FormGroup>
 
 	<FormGroup>
-		<FormLink to="/theme-editor"><template #icon><Fa :icon="faPaintRoller"/></template>{{ $ts._theme.make }}</FormLink>
-		<!--<FormLink to="/advanced-theme-editor"><template #icon><Fa :icon="faPaintRoller"/></template>{{ $ts._theme.make }} ({{ $ts.advanced }})</FormLink>-->
+		<FormLink to="/theme-editor"><template #icon><i class="fas fa-paint-roller"></i></template>{{ $ts._theme.make }}</FormLink>
+		<!--<FormLink to="/advanced-theme-editor"><template #icon><i class="fas fa-paint-roller"></i></template>{{ $ts._theme.make }} ({{ $ts.advanced }})</FormLink>-->
 	</FormGroup>
 
-	<FormLink to="/settings/theme/manage"><template #icon><Fa :icon="faFolderOpen"/></template>{{ $ts._theme.manage }}<template #suffix>{{ themesCount }}</template></FormLink>
+	<FormLink to="/settings/theme/manage"><template #icon><i class="fas fa-folder-open"></i></template>{{ $ts._theme.manage }}<template #suffix>{{ themesCount }}</template></FormLink>
 </FormBase>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, onActivated, onMounted, ref, watch } from 'vue';
-import { faPalette, faDownload, faFolderOpen, faCheck, faTrashAlt, faEye, faGlobe, faPaintRoller } from '@fortawesome/free-solid-svg-icons';
 import FormSwitch from '@client/components/form/switch.vue';
 import FormSelect from '@client/components/form/select.vue';
 import FormBase from '@client/components/form/base.vue';
@@ -117,7 +116,7 @@ export default defineComponent({
 	setup(props, { emit }) {
 		const INFO = {
 			title: i18n.locale.theme,
-			icon: faPalette
+			icon: 'fas fa-palette'
 		};
 
 		const installedThemes = ref(getThemes());
@@ -191,7 +190,6 @@ export default defineComponent({
 					wallpaper.value = file.url;
 				});
 			},
-			faPalette, faDownload, faFolderOpen, faCheck, faTrashAlt, faEye, faGlobe, faPaintRoller,
 		};
 	}
 });
diff --git a/src/client/pages/settings/update.vue b/src/client/pages/settings/update.vue
index d7b2adae56..8000327d0c 100644
--- a/src/client/pages/settings/update.vue
+++ b/src/client/pages/settings/update.vue
@@ -30,7 +30,6 @@
 
 <script lang="ts">
 import { defineAsyncComponent, defineComponent } from 'vue';
-import { faInfoCircle, faSyncAlt } from '@fortawesome/free-solid-svg-icons';
 import FormSwitch from '@client/components/form/switch.vue';
 import FormSelect from '@client/components/form/select.vue';
 import FormLink from '@client/components/form/link.vue';
@@ -61,7 +60,7 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: 'Misskey Update',
-				icon: faSyncAlt
+				icon: 'fas fa-sync-alt'
 			},
 			version,
 			instanceName,
diff --git a/src/client/pages/settings/word-mute.vue b/src/client/pages/settings/word-mute.vue
index 79de2ebbdf..fe3fece844 100644
--- a/src/client/pages/settings/word-mute.vue
+++ b/src/client/pages/settings/word-mute.vue
@@ -25,14 +25,13 @@
 				</FormKeyValueView>
 			</div>
 		</div>
-		<FormButton @click="save()" primary inline :disabled="!changed"><Fa :icon="faSave"/> {{ $ts.save }}</FormButton>
+		<FormButton @click="save()" primary inline :disabled="!changed"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
 	</FormBase>
 </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faCommentSlash, faSave } from '@fortawesome/free-solid-svg-icons';
 import FormTextarea from '@client/components/form/textarea.vue';
 import FormBase from '@client/components/form/base.vue';
 import FormKeyValueView from '@client/components/form/key-value-view.vue';
@@ -59,14 +58,13 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.wordMute,
-				icon: faCommentSlash
+				icon: 'fas fa-comment-slash'
 			},
 			tab: 'soft',
 			softMutedWords: '',
 			hardMutedWords: '',
 			hardWordMutedNotesCount: null,
 			changed: false,
-			faSave,
 		}
 	},
 
diff --git a/src/client/pages/share.vue b/src/client/pages/share.vue
index 313b73b9cb..67e598fa8f 100644
--- a/src/client/pages/share.vue
+++ b/src/client/pages/share.vue
@@ -13,7 +13,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faShareAlt } from '@fortawesome/free-solid-svg-icons';
 import MkButton from '@client/components/ui/button.vue';
 import XPostForm from '@client/components/post-form.vue';
 import * as os from '@client/os';
@@ -29,7 +28,7 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.share,
-				icon: faShareAlt
+				icon: 'fas fa-share-alt'
 			},
 			title: null,
 			text: null,
@@ -37,7 +36,6 @@ export default defineComponent({
 			initialText: null,
 			posted: false,
 
-			faShareAlt
 		}
 	},
 
diff --git a/src/client/pages/tag.vue b/src/client/pages/tag.vue
index 813181dd1f..3ca9fe5c0c 100644
--- a/src/client/pages/tag.vue
+++ b/src/client/pages/tag.vue
@@ -6,7 +6,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faHashtag } from '@fortawesome/free-solid-svg-icons';
 import Progress from '@client/scripts/loading';
 import XNotes from '@client/components/notes.vue';
 import * as symbols from '@client/symbols';
@@ -27,7 +26,7 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.tag,
-				icon: faHashtag
+				icon: 'fas fa-hashtag'
 			},
 			pagination: {
 				endpoint: 'notes/search-by-tag',
@@ -36,7 +35,6 @@ export default defineComponent({
 					tag: this.tag,
 				})
 			},
-			faHashtag
 		};
 	},
 
diff --git a/src/client/pages/test.vue b/src/client/pages/test.vue
index 252fa1c828..9a06d31090 100644
--- a/src/client/pages/test.vue
+++ b/src/client/pages/test.vue
@@ -132,7 +132,6 @@
 
 <script lang="ts">
 import { defineComponent, defineAsyncComponent } from 'vue';
-import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
 import MkButton from '@client/components/ui/button.vue';
 import MkInput from '@client/components/ui/input.vue';
 import MkSwitch from '@client/components/ui/switch.vue';
@@ -154,7 +153,7 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: 'TEST',
-				icon: faExclamationTriangle
+				icon: 'fas fa-exclamation-triangle'
 			},
 			dialogTitle: 'Hello',
 			dialogBody: 'World!',
diff --git a/src/client/pages/theme-editor.vue b/src/client/pages/theme-editor.vue
index db273746a8..ce8bae4ff5 100644
--- a/src/client/pages/theme-editor.vue
+++ b/src/client/pages/theme-editor.vue
@@ -42,7 +42,7 @@
 		</FormTextarea>
 		<FormButton @click="applyThemeCode" primary>{{ $ts.apply }}</FormButton>
 	</FormGroup>
-	<FormButton v-else @click="codeEnabled = true"><Fa :icon="faCode"/> {{ $ts.editCode }}</FormButton>
+	<FormButton v-else @click="codeEnabled = true"><i class="fas fa-code"></i> {{ $ts.editCode }}</FormButton>
 
 	<FormGroup v-if="descriptionEnabled">
 		<FormTextarea v-model:value="description">
@@ -52,15 +52,14 @@
 	<FormButton v-else @click="descriptionEnabled = true">{{ $ts.addDescription }}</FormButton>
 
 	<FormGroup>
-		<FormButton @click="showPreview"><Fa :icon="faEye"/> {{ $ts.preview }}</FormButton>
-		<FormButton @click="saveAs" primary><Fa :icon="faSave"/> {{ $ts.saveAs }}</FormButton>
+		<FormButton @click="showPreview"><i class="fas fa-eye"></i> {{ $ts.preview }}</FormButton>
+		<FormButton @click="saveAs" primary><i class="fas fa-save"></i> {{ $ts.saveAs }}</FormButton>
 	</FormGroup>
 </FormBase>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faPalette, faSave, faEye, faCode } from '@fortawesome/free-solid-svg-icons';
 import { toUnicode } from 'punycode/';
 import * as tinycolor from 'tinycolor2';
 import { v4 as uuid} from 'uuid';
@@ -90,7 +89,7 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.themeEditor,
-				icon: faPalette,
+				icon: 'fas fa-palette',
 			},
 			theme: {
 				base: 'light',
@@ -129,7 +128,6 @@ export default defineComponent({
 				{ color: 'pink', forLight: '#84667d', forDark: '#e4d1e0', forPreview: '#b12390' },
 			],
 			changed: false,
-			faPalette, faSave, faEye, faCode,
 		}
 	},
 
diff --git a/src/client/pages/timeline.tutorial.vue b/src/client/pages/timeline.tutorial.vue
index bcbf16acc7..620994c0da 100644
--- a/src/client/pages/timeline.tutorial.vue
+++ b/src/client/pages/timeline.tutorial.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="_card tbkwesmv">
-	<div class="_title"><Fa :icon="faInfoCircle"/> {{ $ts._tutorial.title }}</div>
+	<div class="_title"><i class="fas fa-info-circle"></i> {{ $ts._tutorial.title }}</div>
 	<div class="_content" v-if="tutorial === 0">
 		<div>{{ $ts._tutorial.step1_1 }}</div>
 		<div>{{ $ts._tutorial.step1_2 }}</div>
@@ -52,22 +52,21 @@
 	<div class="_footer navigation">
 		<div class="step">
 			<button class="arrow _button" @click="tutorial--" :disabled="tutorial === 0">
-				<Fa :icon="faChevronLeft"/>
+				<i class="fas fa-chevron-left"></i>
 			</button>
 			<span>{{ tutorial + 1 }} / 7</span>
 			<button class="arrow _button" @click="tutorial++" :disabled="tutorial === 6">
-				<Fa :icon="faChevronRight"/>
+				<i class="fas fa-chevron-right"></i>
 			</button>
 		</div>
-		<MkButton class="ok" @click="tutorial = -1" primary v-if="tutorial === 6"><Fa :icon="faCheck"/> {{ $ts.gotIt }}</MkButton>
-		<MkButton class="ok" @click="tutorial++" primary v-else><Fa :icon="faCheck"/> {{ $ts.next }}</MkButton>
+		<MkButton class="ok" @click="tutorial = -1" primary v-if="tutorial === 6"><i class="fas fa-check"></i> {{ $ts.gotIt }}</MkButton>
+		<MkButton class="ok" @click="tutorial++" primary v-else><i class="fas fa-check"></i> {{ $ts.next }}</MkButton>
 	</div>
 </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faInfoCircle, faChevronLeft, faChevronRight, faCheck } from '@fortawesome/free-solid-svg-icons'
 import MkButton from '@client/components/ui/button.vue';
 
 export default defineComponent({
@@ -77,7 +76,6 @@ export default defineComponent({
 
 	data() {
 		return {
-			faInfoCircle, faChevronLeft, faChevronRight, faCheck
 		}
 	},
 
diff --git a/src/client/pages/timeline.vue b/src/client/pages/timeline.vue
index efad31c252..5660d0099e 100644
--- a/src/client/pages/timeline.vue
+++ b/src/client/pages/timeline.vue
@@ -4,18 +4,18 @@
 	<XPostForm v-if="$store.reactiveState.showFixedPostForm.value" class="post-form _block" fixed/>
 	<div class="tabs _block">
 		<div class="left">
-			<button class="_button tab" @click="() => { src = 'home'; saveSrc(); }" :class="{ active: src === 'home' }" v-tooltip="$ts._timelines.home"><Fa :icon="faHome"/></button>
-			<button class="_button tab" @click="() => { src = 'local'; saveSrc(); }" :class="{ active: src === 'local' }" v-tooltip="$ts._timelines.local" v-if="isLocalTimelineAvailable"><Fa :icon="faComments"/></button>
-			<button class="_button tab" @click="() => { src = 'social'; saveSrc(); }" :class="{ active: src === 'social' }" v-tooltip="$ts._timelines.social" v-if="isLocalTimelineAvailable"><Fa :icon="faShareAlt"/></button>
-			<button class="_button tab" @click="() => { src = 'global'; saveSrc(); }" :class="{ active: src === 'global' }" v-tooltip="$ts._timelines.global" v-if="isGlobalTimelineAvailable"><Fa :icon="faGlobe"/></button>
+			<button class="_button tab" @click="() => { src = 'home'; saveSrc(); }" :class="{ active: src === 'home' }" v-tooltip="$ts._timelines.home"><i class="fas fa-home"></i></button>
+			<button class="_button tab" @click="() => { src = 'local'; saveSrc(); }" :class="{ active: src === 'local' }" v-tooltip="$ts._timelines.local" v-if="isLocalTimelineAvailable"><i class="fas fa-comments"></i></button>
+			<button class="_button tab" @click="() => { src = 'social'; saveSrc(); }" :class="{ active: src === 'social' }" v-tooltip="$ts._timelines.social" v-if="isLocalTimelineAvailable"><i class="fas fa-share-alt"></i></button>
+			<button class="_button tab" @click="() => { src = 'global'; saveSrc(); }" :class="{ active: src === 'global' }" v-tooltip="$ts._timelines.global" v-if="isGlobalTimelineAvailable"><i class="fas fa-globe"></i></button>
 			<span class="divider"></span>
-			<button class="_button tab" @click="() => { src = 'mentions'; saveSrc(); }" :class="{ active: src === 'mentions' }" v-tooltip="$ts.mentions"><Fa :icon="faAt"/><Fa :icon="faCircle" class="i" v-if="$i.hasUnreadMentions"/></button>
-			<button class="_button tab" @click="() => { src = 'directs'; saveSrc(); }" :class="{ active: src === 'directs' }" v-tooltip="$ts.directNotes"><Fa :icon="faEnvelope"/><Fa :icon="faCircle" class="i" v-if="$i.hasUnreadSpecifiedNotes"/></button>
+			<button class="_button tab" @click="() => { src = 'mentions'; saveSrc(); }" :class="{ active: src === 'mentions' }" v-tooltip="$ts.mentions"><i class="fas fa-at"></i><i v-if="$i.hasUnreadMentions" class="fas fa-circle i"></i></button>
+			<button class="_button tab" @click="() => { src = 'directs'; saveSrc(); }" :class="{ active: src === 'directs' }" v-tooltip="$ts.directNotes"><i class="fas fa-envelope"></i><i v-if="$i.hasUnreadSpecifiedNotes" class="fas fa-circle i"></i></button>
 		</div>
 		<div class="right">
-			<button class="_button tab" @click="chooseChannel" :class="{ active: src === 'channel' }" v-tooltip="$ts.channel"><Fa :icon="faSatelliteDish"/><Fa :icon="faCircle" class="i" v-if="$i.hasUnreadChannel"/></button>
-			<button class="_button tab" @click="chooseAntenna" :class="{ active: src === 'antenna' }" v-tooltip="$ts.antennas"><Fa :icon="faSatellite"/><Fa :icon="faCircle" class="i" v-if="$i.hasUnreadAntenna"/></button>
-			<button class="_button tab" @click="chooseList" :class="{ active: src === 'list' }" v-tooltip="$ts.lists"><Fa :icon="faListUl"/></button>
+			<button class="_button tab" @click="chooseChannel" :class="{ active: src === 'channel' }" v-tooltip="$ts.channel"><i class="fas fa-satellite-dish"></i><i v-if="$i.hasUnreadChannel" class="fas fa-circle i"></i></button>
+			<button class="_button tab" @click="chooseAntenna" :class="{ active: src === 'antenna' }" v-tooltip="$ts.antennas"><i class="fas fa-satellite"></i><i v-if="$i.hasUnreadAntenna" class="fas fa-circle i"></i></button>
+			<button class="_button tab" @click="chooseList" :class="{ active: src === 'list' }" v-tooltip="$ts.lists"><i class="fas fa-list-ul"></i></button>
 		</div>
 	</div>
 	<XTimeline ref="tl"
@@ -36,8 +36,6 @@
 
 <script lang="ts">
 import { defineComponent, defineAsyncComponent, computed } from 'vue';
-import { faAngleDown, faAngleUp, faHome, faShareAlt, faGlobe, faListUl, faSatellite, faSatelliteDish, faCircle, faEllipsisH, faPencilAlt, faAt } from '@fortawesome/free-solid-svg-icons';
-import { faComments, faEnvelope, faCalendarAlt } from '@fortawesome/free-regular-svg-icons';
 import Progress from '@client/scripts/loading';
 import XTimeline from '@client/components/timeline.vue';
 import XPostForm from '@client/components/post-form.vue';
@@ -64,14 +62,13 @@ export default defineComponent({
 			queue: 0,
 			[symbols.PAGE_INFO]: computed(() => ({
 				title: this.$ts.timeline,
-				icon: this.src === 'local' ? faComments : this.src === 'social' ? faShareAlt : this.src === 'global' ? faGlobe : faHome,
+				icon: this.src === 'local' ? 'fas fa-comments' : this.src === 'social' ? 'fas fa-share-alt' : this.src === 'global' ? 'fas fa-globe' : 'fas fa-home',
 				actions: [{
-					icon: faCalendarAlt,
+					icon: 'fas fa-calendar-alt',
 					text: this.$ts.jumpToSpecifiedDate,
 					handler: this.timetravel
 				}]
 			})),
-			faAngleDown, faAngleUp, faHome, faShareAlt, faGlobe, faComments, faListUl, faSatellite, faSatelliteDish, faCircle, faEllipsisH, faAt, faEnvelope,
 		};
 	},
 
diff --git a/src/client/pages/user-ap-info.vue b/src/client/pages/user-ap-info.vue
index 648ecdb10a..c08a352571 100644
--- a/src/client/pages/user-ap-info.vue
+++ b/src/client/pages/user-ap-info.vue
@@ -58,7 +58,6 @@
 
 <script lang="ts">
 import { defineAsyncComponent, defineComponent } from 'vue';
-import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
 import FormObjectView from '@client/components/form/object-view.vue';
 import FormTextarea from '@client/components/form/textarea.vue';
 import FormLink from '@client/components/form/link.vue';
@@ -96,7 +95,7 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.userInfo,
-				icon: faInfoCircle
+				icon: 'fas fa-info-circle'
 			},
 			user: null,
 			apPromiseFactory: null,
diff --git a/src/client/pages/user-info.vue b/src/client/pages/user-info.vue
index 06f2e4270d..ebe462f796 100644
--- a/src/client/pages/user-info.vue
+++ b/src/client/pages/user-info.vue
@@ -34,7 +34,6 @@
 
 <script lang="ts">
 import { computed, defineAsyncComponent, defineComponent } from 'vue';
-import { faExternalLinkAlt, faInfoCircle } from '@fortawesome/free-solid-svg-icons';
 import FormObjectView from '@client/components/form/object-view.vue';
 import FormTextarea from '@client/components/form/textarea.vue';
 import FormLink from '@client/components/form/link.vue';
@@ -72,10 +71,10 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: computed(() => ({
 				title: this.$ts.userInfo,
-				icon: faInfoCircle,
+				icon: 'fas fa-info-circle',
 				actions: this.user ? [this.user.url ? {
 					text: this.user.url,
-					icon: faExternalLinkAlt,
+					icon: 'fas fa-external-link-alt',
 					handler: () => {
 						window.open(this.user.url, '_blank');
 					}
diff --git a/src/client/pages/user/index.activity.vue b/src/client/pages/user/index.activity.vue
index 3eca1ab210..9101c8ae5f 100644
--- a/src/client/pages/user/index.activity.vue
+++ b/src/client/pages/user/index.activity.vue
@@ -1,6 +1,6 @@
 <template>
 <MkContainer>
-	<template #header><Fa :icon="faChartBar" style="margin-right: 0.5em;"/>{{ $ts.activity }}</template>
+	<template #header><i class="fas fa-chart-bar" style="margin-right: 0.5em;"></i>{{ $ts.activity }}</template>
 
 	<div style="padding: 8px;">
 		<div ref="chart"></div>
@@ -11,7 +11,6 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import ApexCharts from 'apexcharts';
-import { faChartBar } from '@fortawesome/free-solid-svg-icons';
 import * as os from '@client/os';
 import MkContainer from '@client/components/ui/container.vue';
 
@@ -35,7 +34,6 @@ export default defineComponent({
 			fetching: true,
 			data: [],
 			peak: null,
-			faChartBar,
 		};
 	},
 	mounted() {
diff --git a/src/client/pages/user/index.photos.vue b/src/client/pages/user/index.photos.vue
index 21d84cef4f..a899b116e5 100644
--- a/src/client/pages/user/index.photos.vue
+++ b/src/client/pages/user/index.photos.vue
@@ -1,6 +1,6 @@
 <template>
 <MkContainer :max-height="300" :foldable="true">
-	<template #header><Fa :icon="faImage" style="margin-right: 0.5em;"/>{{ $ts.images }}</template>
+	<template #header><i class="fas fa-image" style="margin-right: 0.5em;"></i>{{ $ts.images }}</template>
 	<div class="ujigsodd">
 		<MkLoading v-if="fetching"/>
 		<div class="stream" v-if="!fetching && images.length > 0">
@@ -19,7 +19,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faImage } from '@fortawesome/free-solid-svg-icons';
 import { getStaticImageUrl } from '@client/scripts/get-static-image-url';
 import notePage from '../../filters/note';
 import * as os from '@client/os';
@@ -41,7 +40,6 @@ export default defineComponent({
 		return {
 			fetching: true,
 			images: [],
-			faImage
 		};
 	},
 	mounted() {
diff --git a/src/client/pages/user/index.vue b/src/client/pages/user/index.vue
index 92656fff2c..477f235062 100644
--- a/src/client/pages/user/index.vue
+++ b/src/client/pages/user/index.vue
@@ -34,15 +34,15 @@
 				</div>
 				<div class="fields system">
 					<dl class="field" v-if="user.location">
-						<dt class="name"><Fa :icon="faMapMarker" fixed-width/> {{ $ts.location }}</dt>
+						<dt class="name"><i class="fas fa-map-marker fa-fw"></i> {{ $ts.location }}</dt>
 						<dd class="value">{{ user.location }}</dd>
 					</dl>
 					<dl class="field" v-if="user.birthday">
-						<dt class="name"><Fa :icon="faBirthdayCake" fixed-width/> {{ $ts.birthday }}</dt>
+						<dt class="name"><i class="fas fa-birthday-cake fa-fw"></i> {{ $ts.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/> {{ $ts.registeredDate }}</dt>
+						<dt class="name"><i class="fas fa-calendar-alt fa-fw"></i> {{ $ts.registeredDate }}</dt>
 						<dd class="value">{{ new Date(user.createdAt).toLocaleString() }} (<MkTime :time="user.createdAt"/>)</dd>
 					</dl>
 				</div>
@@ -62,19 +62,19 @@
 			<div class="main">
 				<div class="nav _gap">
 					<MkA :to="userPage(user)" :class="{ active: page === 'index' }" class="link">
-						<Fa :icon="faCommentAlt" class="icon"/>
+						<i class="fas fa-comment-alt icon"></i>
 						<span>{{ $ts.notes }}</span>
 					</MkA>
 					<MkA :to="userPage(user, 'clips')" :class="{ active: page === 'clips' }" class="link">
-						<Fa :icon="faPaperclip" class="icon"/>
+						<i class="fas fa-paperclip icon"></i>
 						<span>{{ $ts.clips }}</span>
 					</MkA>
 					<MkA :to="userPage(user, 'pages')" :class="{ active: page === 'pages' }" class="link">
-						<Fa :icon="faFileAlt" class="icon"/>
+						<i class="fas fa-file-alt icon"></i>
 						<span>{{ $ts.pages }}</span>
 					</MkA>
 					<div class="actions">
-						<button @click="menu" class="menu _button"><Fa :icon="faEllipsisH"/></button>
+						<button @click="menu" class="menu _button"><i class="fas fa-ellipsis-h"></i></button>
 						<MkFollowButton v-if="!$i || $i.id != user.id" :user="user" :inline="true" :transparent="false" :full="true" large class="koudoku"/>
 					</div>
 				</div>
@@ -95,8 +95,8 @@
 	</div>
 	<div class="ftskorzw narrow _root" v-else-if="user && narrow === true" v-size="{ max: [500] }">
 		<!-- TODO -->
-		<!-- <div class="punished" v-if="user.isSuspended"><Fa :icon="faExclamationTriangle" style="margin-right: 8px;"/> {{ $ts.userSuspended }}</div> -->
-		<!-- <div class="punished" v-if="user.isSilenced"><Fa :icon="faExclamationTriangle" style="margin-right: 8px;"/> {{ $ts.userSilenced }}</div> -->
+		<!-- <div class="punished" v-if="user.isSuspended"><i class="fas fa-exclamation-triangle" style="margin-right: 8px;"></i> {{ $ts.userSuspended }}</div> -->
+		<!-- <div class="punished" v-if="user.isSilenced"><i class="fas fa-exclamation-triangle" style="margin-right: 8px;"></i> {{ $ts.userSilenced }}</div> -->
 
 		<div class="profile">
 			<MkRemoteCaution v-if="user.host != null" :href="user.url" class="warn"/>
@@ -109,15 +109,15 @@
 						<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="$ts.isAdmin" style="color: var(--badge);"><Fa :icon="faBookmark"/></span>
-							<span v-if="!user.isAdmin && user.isModerator" :title="$ts.isModerator" style="color: var(--badge);"><Fa :icon="farBookmark"/></span>
-							<span v-if="user.isLocked" :title="$ts.isLocked"><Fa :icon="faLock"/></span>
-							<span v-if="user.isBot" :title="$ts.isBot"><Fa :icon="faRobot"/></span>
+							<span v-if="user.isAdmin" :title="$ts.isAdmin" style="color: var(--badge);"><i class="fas fa-bookmark"></i></span>
+							<span v-if="!user.isAdmin && user.isModerator" :title="$ts.isModerator" style="color: var(--badge);"><i class="far fa-bookmark"></i></span>
+							<span v-if="user.isLocked" :title="$ts.isLocked"><i class="fas fa-lock"></i></span>
+							<span v-if="user.isBot" :title="$ts.isBot"><i class="fas fa-robot"></i></span>
 						</div>
 					</div>
 					<span class="followed" v-if="$i && $i.id != user.id && user.isFollowed">{{ $ts.followsYou }}</span>
 					<div class="actions" v-if="$i">
-						<button @click="menu" class="menu _button"><Fa :icon="faEllipsisH"/></button>
+						<button @click="menu" class="menu _button"><i class="fas fa-ellipsis-h"></i></button>
 						<MkFollowButton v-if="$i.id != user.id" :user="user" :inline="true" :transparent="false" :full="true" class="koudoku"/>
 					</div>
 				</div>
@@ -126,10 +126,10 @@
 					<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="$ts.isAdmin" style="color: var(--badge);"><Fa :icon="faBookmark"/></span>
-						<span v-if="!user.isAdmin && user.isModerator" :title="$ts.isModerator" style="color: var(--badge);"><Fa :icon="farBookmark"/></span>
-						<span v-if="user.isLocked" :title="$ts.isLocked"><Fa :icon="faLock"/></span>
-						<span v-if="user.isBot" :title="$ts.isBot"><Fa :icon="faRobot"/></span>
+						<span v-if="user.isAdmin" :title="$ts.isAdmin" style="color: var(--badge);"><i class="fas fa-bookmark"></i></span>
+						<span v-if="!user.isAdmin && user.isModerator" :title="$ts.isModerator" style="color: var(--badge);"><i class="far fa-bookmark"></i></span>
+						<span v-if="user.isLocked" :title="$ts.isLocked"><i class="fas fa-lock"></i></span>
+						<span v-if="user.isBot" :title="$ts.isBot"><i class="fas fa-robot"></i></span>
 					</div>
 				</div>
 				<div class="description">
@@ -138,15 +138,15 @@
 				</div>
 				<div class="fields system">
 					<dl class="field" v-if="user.location">
-						<dt class="name"><Fa :icon="faMapMarker" fixed-width/> {{ $ts.location }}</dt>
+						<dt class="name"><i class="fas fa-map-marker fa-fw"></i> {{ $ts.location }}</dt>
 						<dd class="value">{{ user.location }}</dd>
 					</dl>
 					<dl class="field" v-if="user.birthday">
-						<dt class="name"><Fa :icon="faBirthdayCake" fixed-width/> {{ $ts.birthday }}</dt>
+						<dt class="name"><i class="fas fa-birthday-cake fa-fw"></i> {{ $ts.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/> {{ $ts.registeredDate }}</dt>
+						<dt class="name"><i class="fas fa-calendar-alt fa-fw"></i> {{ $ts.registeredDate }}</dt>
 						<dd class="value">{{ new Date(user.createdAt).toLocaleString() }} (<MkTime :time="user.createdAt"/>)</dd>
 					</dl>
 				</div>
@@ -180,15 +180,15 @@
 		<div class="contents">
 			<div class="nav _gap">
 				<MkA :to="userPage(user)" :class="{ active: page === 'index' }" class="link">
-					<Fa :icon="faCommentAlt" class="icon"/>
+					<i class="fas fa-comment-alt icon"></i>
 					<span>{{ $ts.notes }}</span>
 				</MkA>
 				<MkA :to="userPage(user, 'clips')" :class="{ active: page === 'clips' }" class="link">
-					<Fa :icon="faPaperclip" class="icon"/>
+					<i class="fas fa-paperclip icon"></i>
 					<span>{{ $ts.clips }}</span>
 				</MkA>
 				<MkA :to="userPage(user, 'pages')" :class="{ active: page === 'pages' }" class="link">
-					<Fa :icon="faFileAlt" class="icon"/>
+					<i class="fas fa-file-alt icon"></i>
 					<span>{{ $ts.pages }}</span>
 				</MkA>
 			</div>
@@ -219,8 +219,6 @@
 
 <script lang="ts">
 import { defineComponent, defineAsyncComponent, computed } from 'vue';
-import { faExclamationTriangle, faEllipsisH, faRobot, faLock, faBookmark, faChartBar, faImage, faBirthdayCake, faMapMarker, faPaperclip, faFileAlt } from '@fortawesome/free-solid-svg-icons';
-import { faCalendarAlt, faBookmark as farBookmark, faCommentAlt } from '@fortawesome/free-regular-svg-icons';
 import * as age from 's-age';
 import XUserTimeline from './index.timeline.vue';
 import XNote from '@client/components/note.vue';
@@ -284,7 +282,6 @@ export default defineComponent({
 			error: null,
 			parallaxAnimationId: null,
 			narrow: null,
-			faExclamationTriangle, faEllipsisH, faRobot, faLock, faBookmark, farBookmark, faChartBar, faImage, faBirthdayCake, faMapMarker, faCalendarAlt, faCommentAlt, faPaperclip, faFileAlt,
 		};
 	},
 
diff --git a/src/client/pages/v.vue b/src/client/pages/v.vue
index 37a850b625..4440e8070e 100644
--- a/src/client/pages/v.vue
+++ b/src/client/pages/v.vue
@@ -12,7 +12,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
 import { version } from '@client/config';
 import * as symbols from '@client/symbols';
 
@@ -24,7 +23,6 @@ export default defineComponent({
 				icon: null
 			},
 			version,
-			faInfoCircle
 		}
 	},
 });
diff --git a/src/client/pages/welcome.entrance.a.vue b/src/client/pages/welcome.entrance.a.vue
index 7b02c44923..da3c694265 100644
--- a/src/client/pages/welcome.entrance.a.vue
+++ b/src/client/pages/welcome.entrance.a.vue
@@ -43,7 +43,7 @@
 						<template #n><b>{{ onlineUsersCount }}</b></template>
 					</I18n>
 				</div>
-				<button class="_button _acrylic menu" @click="showMenu"><Fa :icon="faEllipsisH"/></button>
+				<button class="_button _acrylic menu" @click="showMenu"><i class="fas fa-ellipsis-h"></i></button>
 			</div>
 		</div>
 	</div>
@@ -52,7 +52,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faEllipsisH, faInfoCircle, faQuestionCircle } from '@fortawesome/free-solid-svg-icons';
 import { toUnicode } from 'punycode/';
 import XSigninDialog from '@client/components/signin-dialog.vue';
 import XSignupDialog from '@client/components/signup-dialog.vue';
@@ -80,7 +79,6 @@ export default defineComponent({
 			stats: null,
 			tags: [],
 			onlineUsersCount: null,
-			faEllipsisH
 		};
 	},
 
@@ -121,19 +119,19 @@ export default defineComponent({
 		showMenu(ev) {
 			os.modalMenu([{
 				text: this.$t('aboutX', { x: instanceName }),
-				icon: faInfoCircle,
+				icon: 'fas fa-info-circle',
 				action: () => {
 					os.pageWindow('/about');
 				}
 			}, {
 				text: this.$ts.aboutMisskey,
-				icon: faInfoCircle,
+				icon: 'fas fa-info-circle',
 				action: () => {
 					os.pageWindow('/about-misskey');
 				}
 			}, null, {
 				text: this.$ts.help,
-				icon: faQuestionCircle,
+				icon: 'fas fa-question-circle',
 				action: () => {
 					os.pageWindow('/docs');
 				}
diff --git a/src/client/pages/welcome.entrance.b.vue b/src/client/pages/welcome.entrance.b.vue
index d8622e4d8e..d108eb7d94 100644
--- a/src/client/pages/welcome.entrance.b.vue
+++ b/src/client/pages/welcome.entrance.b.vue
@@ -36,7 +36,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faEllipsisH, faInfoCircle, faQuestionCircle } from '@fortawesome/free-solid-svg-icons';
 import { toUnicode } from 'punycode/';
 import XSigninDialog from '@client/components/signin-dialog.vue';
 import XSignupDialog from '@client/components/signup-dialog.vue';
@@ -64,7 +63,6 @@ export default defineComponent({
 			stats: null,
 			tags: [],
 			onlineUsersCount: null,
-			faEllipsisH
 		};
 	},
 
@@ -105,19 +103,19 @@ export default defineComponent({
 		showMenu(ev) {
 			os.modalMenu([{
 				text: this.$t('aboutX', { x: instanceName }),
-				icon: faInfoCircle,
+				icon: 'fas fa-info-circle',
 				action: () => {
 					os.pageWindow('/about');
 				}
 			}, {
 				text: this.$ts.aboutMisskey,
-				icon: faInfoCircle,
+				icon: 'fas fa-info-circle',
 				action: () => {
 					os.pageWindow('/about-misskey');
 				}
 			}, null, {
 				text: this.$ts.help,
-				icon: faQuestionCircle,
+				icon: 'fas fa-question-circle',
 				action: () => {
 					os.pageWindow('/docs');
 				}
diff --git a/src/client/pages/welcome.entrance.c.vue b/src/client/pages/welcome.entrance.c.vue
index 47ddf9e5ed..93811e98fb 100644
--- a/src/client/pages/welcome.entrance.c.vue
+++ b/src/client/pages/welcome.entrance.c.vue
@@ -40,7 +40,7 @@
 							<template #n><b>{{ onlineUsersCount }}</b></template>
 						</I18n>
 					</div>
-					<button class="_button _acrylic menu" @click="showMenu"><Fa :icon="faEllipsisH"/></button>
+					<button class="_button _acrylic menu" @click="showMenu"><i class="fas fa-ellipsis-h"></i></button>
 				</div>
 			</div>
 			<nav class="nav">
@@ -56,7 +56,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faEllipsisH, faInfoCircle, faQuestionCircle } from '@fortawesome/free-solid-svg-icons';
 import { toUnicode } from 'punycode/';
 import XSigninDialog from '@client/components/signin-dialog.vue';
 import XSignupDialog from '@client/components/signup-dialog.vue';
@@ -84,7 +83,6 @@ export default defineComponent({
 			stats: null,
 			tags: [],
 			onlineUsersCount: null,
-			faEllipsisH
 		};
 	},
 
@@ -125,19 +123,19 @@ export default defineComponent({
 		showMenu(ev) {
 			os.modalMenu([{
 				text: this.$t('aboutX', { x: instanceName }),
-				icon: faInfoCircle,
+				icon: 'fas fa-info-circle',
 				action: () => {
 					os.pageWindow('/about');
 				}
 			}, {
 				text: this.$ts.aboutMisskey,
-				icon: faInfoCircle,
+				icon: 'fas fa-info-circle',
 				action: () => {
 					os.pageWindow('/about-misskey');
 				}
 			}, null, {
 				text: this.$ts.help,
-				icon: faQuestionCircle,
+				icon: 'fas fa-question-circle',
 				action: () => {
 					os.pageWindow('/docs');
 				}
diff --git a/src/client/pages/welcome.setup.vue b/src/client/pages/welcome.setup.vue
index db64f6b194..2a71e2311c 100644
--- a/src/client/pages/welcome.setup.vue
+++ b/src/client/pages/welcome.setup.vue
@@ -10,7 +10,7 @@
 		</MkInput>
 		<MkInput v-model:value="password" type="password">
 			<span>{{ $ts.password }}</span>
-			<template #prefix><Fa :icon="faLock"/></template>
+			<template #prefix><i class="fas fa-lock"></i></template>
 		</MkInput>
 		<footer>
 			<MkButton primary type="submit" :disabled="submitting">{{ submitting ? $ts.processing : $ts.done }}<MkEllipsis v-if="submitting"/></MkButton>
@@ -21,7 +21,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faLock } from '@fortawesome/free-solid-svg-icons';
 import MkButton from '@client/components/ui/button.vue';
 import MkInput from '@client/components/ui/input.vue';
 import { host } from '@client/config';
@@ -40,7 +39,6 @@ export default defineComponent({
 			password: '',
 			submitting: false,
 			host,
-			faLock
 		}
 	},
 
diff --git a/src/client/scripts/get-user-menu.ts b/src/client/scripts/get-user-menu.ts
index 0496e87502..ceb2bfe173 100644
--- a/src/client/scripts/get-user-menu.ts
+++ b/src/client/scripts/get-user-menu.ts
@@ -1,5 +1,3 @@
-import { faAt, faListUl, faEye, faEyeSlash, faBan, faPencilAlt, faComments, faUsers, faMicrophoneSlash, faPlug, faExclamationCircle, faInfoCircle } from '@fortawesome/free-solid-svg-icons';
-import { faSnowflake, faEnvelope } from '@fortawesome/free-regular-svg-icons';
 import { i18n } from '@client/i18n';
 import copyToClipboard from '@client/scripts/copy-to-clipboard';
 import { host } from '@client/config';
@@ -121,62 +119,62 @@ export function getUserMenu(user) {
 	}
 
 	let menu = [{
-		icon: faAt,
+		icon: 'fas fa-at',
 		text: i18n.locale.copyUsername,
 		action: () => {
 			copyToClipboard(`@${user.username}@${user.host || host}`);
 		}
 	}, {
-		icon: faInfoCircle,
+		icon: 'fas fa-info-circle',
 		text: i18n.locale.info,
 		action: () => {
 			os.pageWindow(`/user-info/${user.id}`);
 		}
 	}, {
-		icon: faEnvelope,
+		icon: 'fas fa-envelope',
 		text: i18n.locale.sendMessage,
 		action: () => {
 			os.post({ specified: user });
 		}
 	}, meId != user.id ? {
 		type: 'link',
-		icon: faComments,
+		icon: 'fas fa-comments',
 		text: i18n.locale.startMessaging,
 		to: '/my/messaging/' + getAcct(user),
 	} : undefined, null, {
-		icon: faListUl,
+		icon: 'fas fa-list-ul',
 		text: i18n.locale.addToList,
 		action: pushList
 	}, meId != user.id ? {
-		icon: faUsers,
+		icon: 'fas fa-users',
 		text: i18n.locale.inviteToGroup,
 		action: inviteGroup
 	} : undefined] as any;
 
 	if ($i && meId != user.id) {
 		menu = menu.concat([null, {
-			icon: user.isMuted ? faEye : faEyeSlash,
+			icon: user.isMuted ? 'fas fa-eye' : 'fas fa-eye-slash',
 			text: user.isMuted ? i18n.locale.unmute : i18n.locale.mute,
 			action: toggleMute
 		}, {
-			icon: faBan,
+			icon: 'fas fa-ban',
 			text: user.isBlocking ? i18n.locale.unblock : i18n.locale.block,
 			action: toggleBlock
 		}]);
 
 		menu = menu.concat([null, {
-			icon: faExclamationCircle,
+			icon: 'fas fa-exclamation-circle',
 			text: i18n.locale.reportAbuse,
 			action: reportAbuse
 		}]);
 
 		if ($i && ($i.isAdmin || $i.isModerator)) {
 			menu = menu.concat([null, {
-				icon: faMicrophoneSlash,
+				icon: 'fas fa-microphone-slash',
 				text: user.isSilenced ? i18n.locale.unsilence : i18n.locale.silence,
 				action: toggleSilence
 			}, {
-				icon: faSnowflake,
+				icon: 'fas fa-snowflake',
 				text: user.isSuspended ? i18n.locale.unsuspend : i18n.locale.suspend,
 				action: toggleSuspend
 			}]);
@@ -185,7 +183,7 @@ export function getUserMenu(user) {
 
 	if ($i && meId === user.id) {
 		menu = menu.concat([null, {
-			icon: faPencilAlt,
+			icon: 'fas fa-pencil-alt',
 			text: i18n.locale.editProfile,
 			action: () => {
 				router.push('/settings/profile');
@@ -195,7 +193,7 @@ export function getUserMenu(user) {
 
 	if (userActions.length > 0) {
 		menu = menu.concat([null, ...userActions.map(action => ({
-			icon: faPlug,
+			icon: 'fas fa-plug',
 			text: action.title,
 			action: () => {
 				action.handler(user);
diff --git a/src/client/scripts/hpml/index.ts b/src/client/scripts/hpml/index.ts
index 924cd32eb5..ac81eac2d9 100644
--- a/src/client/scripts/hpml/index.ts
+++ b/src/client/scripts/hpml/index.ts
@@ -3,14 +3,6 @@
  */
 
 import autobind from 'autobind-decorator';
-import {
-	faMagic,
-	faSquareRootAlt,
-	faAlignLeft,
-	faList,
-	faQuoteRight,
-	faSortNumericUp,
-} from '@fortawesome/free-solid-svg-icons';
 import { Hpml } from './evaluator';
 import { funcDefs } from './lib';
 
@@ -22,13 +14,13 @@ export type Fn = {
 export type Type = 'string' | 'number' | 'boolean' | 'stringArray' | null;
 
 export const literalDefs: Record<string, { out: any; category: string; icon: any; }> = {
-	text:          { out: 'string',      category: 'value', icon: faQuoteRight, },
-	multiLineText: { out: 'string',      category: 'value', icon: faAlignLeft, },
-	textList:      { out: 'stringArray', category: 'value', icon: faList, },
-	number:        { out: 'number',      category: 'value', icon: faSortNumericUp, },
-	ref:           { out: null,          category: 'value', icon: faMagic, },
-	aiScriptVar:   { out: null,          category: 'value', icon: faMagic, },
-	fn:            { out: 'function',    category: 'value', icon: faSquareRootAlt, },
+	text:          { out: 'string',      category: 'value', icon: 'fas fa-quote-right', },
+	multiLineText: { out: 'string',      category: 'value', icon: 'fas fa-align-left', },
+	textList:      { out: 'stringArray', category: 'value', icon: 'fas fa-list', },
+	number:        { out: 'number',      category: 'value', icon: 'fas fa-sort-numeric-up', },
+	ref:           { out: null,          category: 'value', icon: 'fas fa-magic', },
+	aiScriptVar:   { out: null,          category: 'value', icon: 'fas fa-magic', },
+	fn:            { out: 'function',    category: 'value', icon: 'fas fa-square-root-alt', },
 };
 
 export const blockDefs = [
diff --git a/src/client/scripts/hpml/lib.ts b/src/client/scripts/hpml/lib.ts
index 7454562184..150a04732f 100644
--- a/src/client/scripts/hpml/lib.ts
+++ b/src/client/scripts/hpml/lib.ts
@@ -6,27 +6,6 @@ import { Fn, HpmlScope } from '.';
 import { Expr } from './expr';
 import * as seedrandom from 'seedrandom';
 
-import {
-	faShareAlt,
-	faPlus,
-	faMinus,
-	faTimes,
-	faDivide,
-	faQuoteRight,
-	faEquals,
-	faGreaterThan,
-	faLessThan,
-	faGreaterThanEqual,
-	faLessThanEqual,
-	faNotEqual,
-	faDice,
-	faExchangeAlt,
-	faRecycle,
-	faIndent,
-	faCalculator,
-} from '@fortawesome/free-solid-svg-icons';
-import { faFlag } from '@fortawesome/free-regular-svg-icons';
-
 // https://stackoverflow.com/questions/38493564/chart-area-background-color-chartjs
 Chart.pluginService.register({
 	beforeDraw: (chart, easing) => {
@@ -148,43 +127,43 @@ export function initAiLib(hpml: Hpml) {
 }
 
 export const funcDefs: Record<string, { in: any[]; out: any; category: string; icon: any; }> = {
-	if:              { in: ['boolean', 0, 0],              out: 0,             category: 'flow',       icon: faShareAlt, },
-	for:             { in: ['number', 'function'],         out: null,          category: 'flow',       icon: faRecycle, },
-	not:             { in: ['boolean'],                    out: 'boolean',     category: 'logical',    icon: faFlag, },
-	or:              { in: ['boolean', 'boolean'],         out: 'boolean',     category: 'logical',    icon: faFlag, },
-	and:             { in: ['boolean', 'boolean'],         out: 'boolean',     category: 'logical',    icon: faFlag, },
-	add:             { in: ['number', 'number'],           out: 'number',      category: 'operation',  icon: faPlus, },
-	subtract:        { in: ['number', 'number'],           out: 'number',      category: 'operation',  icon: faMinus, },
-	multiply:        { in: ['number', 'number'],           out: 'number',      category: 'operation',  icon: faTimes, },
-	divide:          { in: ['number', 'number'],           out: 'number',      category: 'operation',  icon: faDivide, },
-	mod:             { in: ['number', 'number'],           out: 'number',      category: 'operation',  icon: faDivide, },
-	round:           { in: ['number'],                     out: 'number',      category: 'operation',  icon: faCalculator, },
-	eq:              { in: [0, 0],                         out: 'boolean',     category: 'comparison', icon: faEquals, },
-	notEq:           { in: [0, 0],                         out: 'boolean',     category: 'comparison', icon: faNotEqual, },
-	gt:              { in: ['number', 'number'],           out: 'boolean',     category: 'comparison', icon: faGreaterThan, },
-	lt:              { in: ['number', 'number'],           out: 'boolean',     category: 'comparison', icon: faLessThan, },
-	gtEq:            { in: ['number', 'number'],           out: 'boolean',     category: 'comparison', icon: faGreaterThanEqual, },
-	ltEq:            { in: ['number', 'number'],           out: 'boolean',     category: 'comparison', icon: faLessThanEqual, },
-	strLen:          { in: ['string'],                     out: 'number',      category: 'text',       icon: faQuoteRight, },
-	strPick:         { in: ['string', 'number'],           out: 'string',      category: 'text',       icon: faQuoteRight, },
-	strReplace:      { in: ['string', 'string', 'string'], out: 'string',      category: 'text',       icon: faQuoteRight, },
-	strReverse:      { in: ['string'],                     out: 'string',      category: 'text',       icon: faQuoteRight, },
-	join:            { in: ['stringArray', 'string'],      out: 'string',      category: 'text',       icon: faQuoteRight, },
-	stringToNumber:  { in: ['string'],                     out: 'number',      category: 'convert',    icon: faExchangeAlt, },
-	numberToString:  { in: ['number'],                     out: 'string',      category: 'convert',    icon: faExchangeAlt, },
-	splitStrByLine:  { in: ['string'],                     out: 'stringArray', category: 'convert',    icon: faExchangeAlt, },
-	pick:            { in: [null, 'number'],               out: null,          category: 'list',       icon: faIndent, },
-	listLen:         { in: [null],                         out: 'number',      category: 'list',       icon: faIndent, },
-	rannum:          { in: ['number', 'number'],           out: 'number',      category: 'random',     icon: faDice, },
-	dailyRannum:     { in: ['number', 'number'],           out: 'number',      category: 'random',     icon: faDice, },
-	seedRannum:      { in: [null, 'number', 'number'],     out: 'number',      category: 'random',     icon: faDice, },
-	random:          { in: ['number'],                     out: 'boolean',     category: 'random',     icon: faDice, },
-	dailyRandom:     { in: ['number'],                     out: 'boolean',     category: 'random',     icon: faDice, },
-	seedRandom:      { in: [null, 'number'],               out: 'boolean',     category: 'random',     icon: faDice, },
-	randomPick:      { in: [0],                            out: 0,             category: 'random',     icon: faDice, },
-	dailyRandomPick: { in: [0],                            out: 0,             category: 'random',     icon: faDice, },
-	seedRandomPick:  { in: [null, 0],                      out: 0,             category: 'random',     icon: faDice, },
-	DRPWPM:      { in: ['stringArray'],                out: 'string',      category: 'random',     icon: faDice, }, // dailyRandomPickWithProbabilityMapping
+	if:              { in: ['boolean', 0, 0],              out: 0,             category: 'flow',       icon: 'fas fa-share-alt', },
+	for:             { in: ['number', 'function'],         out: null,          category: 'flow',       icon: 'fas fa-recycle', },
+	not:             { in: ['boolean'],                    out: 'boolean',     category: 'logical',    icon: 'fas fa-flag', },
+	or:              { in: ['boolean', 'boolean'],         out: 'boolean',     category: 'logical',    icon: 'fas fa-flag', },
+	and:             { in: ['boolean', 'boolean'],         out: 'boolean',     category: 'logical',    icon: 'fas fa-flag', },
+	add:             { in: ['number', 'number'],           out: 'number',      category: 'operation',  icon: 'fas fa-plus', },
+	subtract:        { in: ['number', 'number'],           out: 'number',      category: 'operation',  icon: 'fas fa-minus', },
+	multiply:        { in: ['number', 'number'],           out: 'number',      category: 'operation',  icon: 'fas fa-times', },
+	divide:          { in: ['number', 'number'],           out: 'number',      category: 'operation',  icon: 'fas fa-divide', },
+	mod:             { in: ['number', 'number'],           out: 'number',      category: 'operation',  icon: 'fas fa-divide', },
+	round:           { in: ['number'],                     out: 'number',      category: 'operation',  icon: 'fas fa-calculator', },
+	eq:              { in: [0, 0],                         out: 'boolean',     category: 'comparison', icon: 'fas fa-equals', },
+	notEq:           { in: [0, 0],                         out: 'boolean',     category: 'comparison', icon: 'fas fa-not-equal', },
+	gt:              { in: ['number', 'number'],           out: 'boolean',     category: 'comparison', icon: 'fas fa-greater-than', },
+	lt:              { in: ['number', 'number'],           out: 'boolean',     category: 'comparison', icon: 'fas fa-less-than', },
+	gtEq:            { in: ['number', 'number'],           out: 'boolean',     category: 'comparison', icon: 'fas fa-greater-than-equal', },
+	ltEq:            { in: ['number', 'number'],           out: 'boolean',     category: 'comparison', icon: 'fas fa-less-than-equal', },
+	strLen:          { in: ['string'],                     out: 'number',      category: 'text',       icon: 'fas fa-quote-right', },
+	strPick:         { in: ['string', 'number'],           out: 'string',      category: 'text',       icon: 'fas fa-quote-right', },
+	strReplace:      { in: ['string', 'string', 'string'], out: 'string',      category: 'text',       icon: 'fas fa-quote-right', },
+	strReverse:      { in: ['string'],                     out: 'string',      category: 'text',       icon: 'fas fa-quote-right', },
+	join:            { in: ['stringArray', 'string'],      out: 'string',      category: 'text',       icon: 'fas fa-quote-right', },
+	stringToNumber:  { in: ['string'],                     out: 'number',      category: 'convert',    icon: 'fas fa-exchange-alt', },
+	numberToString:  { in: ['number'],                     out: 'string',      category: 'convert',    icon: 'fas fa-exchange-alt', },
+	splitStrByLine:  { in: ['string'],                     out: 'stringArray', category: 'convert',    icon: 'fas fa-exchange-alt', },
+	pick:            { in: [null, 'number'],               out: null,          category: 'list',       icon: 'fas fa-indent', },
+	listLen:         { in: [null],                         out: 'number',      category: 'list',       icon: 'fas fa-indent', },
+	rannum:          { in: ['number', 'number'],           out: 'number',      category: 'random',     icon: 'fas fa-dice', },
+	dailyRannum:     { in: ['number', 'number'],           out: 'number',      category: 'random',     icon: 'fas fa-dice', },
+	seedRannum:      { in: [null, 'number', 'number'],     out: 'number',      category: 'random',     icon: 'fas fa-dice', },
+	random:          { in: ['number'],                     out: 'boolean',     category: 'random',     icon: 'fas fa-dice', },
+	dailyRandom:     { in: ['number'],                     out: 'boolean',     category: 'random',     icon: 'fas fa-dice', },
+	seedRandom:      { in: [null, 'number'],               out: 'boolean',     category: 'random',     icon: 'fas fa-dice', },
+	randomPick:      { in: [0],                            out: 0,             category: 'random',     icon: 'fas fa-dice', },
+	dailyRandomPick: { in: [0],                            out: 0,             category: 'random',     icon: 'fas fa-dice', },
+	seedRandomPick:  { in: [null, 0],                      out: 0,             category: 'random',     icon: 'fas fa-dice', },
+	DRPWPM:      { in: ['stringArray'],                out: 'string',      category: 'random',     icon: 'fas fa-dice', }, // dailyRandomPickWithProbabilityMapping
 };
 
 export function initHpmlLib(expr: Expr, scope: HpmlScope, randomSeed: string, visitor?: any) {
diff --git a/src/client/scripts/search.ts b/src/client/scripts/search.ts
index 829065534c..2221f5f279 100644
--- a/src/client/scripts/search.ts
+++ b/src/client/scripts/search.ts
@@ -1,4 +1,3 @@
-import { faHistory } from '@fortawesome/free-solid-svg-icons';
 import * as os from '@client/os';
 import { i18n } from '@client/i18n';
 import { router } from '@client/router';
@@ -37,7 +36,7 @@ export async function search() {
 		// TODO
 		//v.$root.$emit('warp', date);
 		os.dialog({
-			icon: faHistory,
+			icon: 'fas fa-history',
 			iconOnly: true, autoClose: true
 		});
 		return;
diff --git a/src/client/scripts/select-file.ts b/src/client/scripts/select-file.ts
index 03ac863aa0..c193e7dc71 100644
--- a/src/client/scripts/select-file.ts
+++ b/src/client/scripts/select-file.ts
@@ -1,4 +1,3 @@
-import { faUpload, faCloud, faLink } from '@fortawesome/free-solid-svg-icons';
 import * as os from '@client/os';
 import { i18n } from '@client/i18n';
 
@@ -73,15 +72,15 @@ export function selectFile(src: any, label: string | null, multiple = false) {
 			type: 'label'
 		} : undefined, {
 			text: i18n.locale.upload,
-			icon: faUpload,
+			icon: 'fas fa-upload',
 			action: chooseFileFromPc
 		}, {
 			text: i18n.locale.fromDrive,
-			icon: faCloud,
+			icon: 'fas fa-cloud',
 			action: chooseFileFromDrive
 		}, {
 			text: i18n.locale.fromUrl,
-			icon: faLink,
+			icon: 'fas fa-link',
 			action: chooseFileFromUrl
 		}], src);
 	});
diff --git a/src/client/sidebar.ts b/src/client/sidebar.ts
index 09b69fd815..e5105f13b4 100644
--- a/src/client/sidebar.ts
+++ b/src/client/sidebar.ts
@@ -1,5 +1,3 @@
-import { faBell, faComments, faEnvelope } from '@fortawesome/free-regular-svg-icons';
-import { faAt, faBroadcastTower, faCloud, faColumns, faDoorClosed, faFileAlt, faFireAlt, faGamepad, faHashtag, faListUl, faPaperclip, faSatellite, faSatelliteDish, faSearch, faStar, faTerminal, faUserClock, faUsers } from '@fortawesome/free-solid-svg-icons';
 import { computed } from 'vue';
 import { search } from '@client/scripts/search';
 import * as os from '@client/os';
@@ -10,125 +8,125 @@ import { unisonReload } from '@client/scripts/unison-reload';
 export const sidebarDef = {
 	notifications: {
 		title: 'notifications',
-		icon: faBell,
+		icon: 'fas fa-bell',
 		show: computed(() => $i != null),
 		indicated: computed(() => $i != null && $i.hasUnreadNotification),
 		to: '/my/notifications',
 	},
 	messaging: {
 		title: 'messaging',
-		icon: faComments,
+		icon: 'fas fa-comments',
 		show: computed(() => $i != null),
 		indicated: computed(() => $i != null && $i.hasUnreadMessagingMessage),
 		to: '/my/messaging',
 	},
 	drive: {
 		title: 'drive',
-		icon: faCloud,
+		icon: 'fas fa-cloud',
 		show: computed(() => $i != null),
 		to: '/my/drive',
 	},
 	followRequests: {
 		title: 'followRequests',
-		icon: faUserClock,
+		icon: 'fas fa-user-clock',
 		show: computed(() => $i != null && $i.isLocked),
 		indicated: computed(() => $i != null && $i.hasPendingReceivedFollowRequest),
 		to: '/my/follow-requests',
 	},
 	featured: {
 		title: 'featured',
-		icon: faFireAlt,
+		icon: 'fas fa-fire-alt',
 		to: '/featured',
 	},
 	explore: {
 		title: 'explore',
-		icon: faHashtag,
+		icon: 'fas fa-hashtag',
 		to: '/explore',
 	},
 	announcements: {
 		title: 'announcements',
-		icon: faBroadcastTower,
+		icon: 'fas fa-broadcast-tower',
 		indicated: computed(() => $i != null && $i.hasUnreadAnnouncement),
 		to: '/announcements',
 	},
 	search: {
 		title: 'search',
-		icon: faSearch,
+		icon: 'fas fa-search',
 		action: () => search(),
 	},
 	lists: {
 		title: 'lists',
-		icon: faListUl,
+		icon: 'fas fa-list-ul',
 		show: computed(() => $i != null),
 		to: '/my/lists',
 	},
 	groups: {
 		title: 'groups',
-		icon: faUsers,
+		icon: 'fas fa-users',
 		show: computed(() => $i != null),
 		to: '/my/groups',
 	},
 	antennas: {
 		title: 'antennas',
-		icon: faSatellite,
+		icon: 'fas fa-satellite',
 		show: computed(() => $i != null),
 		to: '/my/antennas',
 	},
 	mentions: {
 		title: 'mentions',
-		icon: faAt,
+		icon: 'fas fa-at',
 		show: computed(() => $i != null),
 		indicated: computed(() => $i != null && $i.hasUnreadMentions),
 		to: '/my/mentions',
 	},
 	messages: {
 		title: 'directNotes',
-		icon: faEnvelope,
+		icon: 'fas fa-envelope',
 		show: computed(() => $i != null),
 		indicated: computed(() => $i != null && $i.hasUnreadSpecifiedNotes),
 		to: '/my/messages',
 	},
 	favorites: {
 		title: 'favorites',
-		icon: faStar,
+		icon: 'fas fa-star',
 		show: computed(() => $i != null),
 		to: '/my/favorites',
 	},
 	pages: {
 		title: 'pages',
-		icon: faFileAlt,
+		icon: 'fas fa-file-alt',
 		to: '/pages',
 	},
 	clips: {
 		title: 'clip',
-		icon: faPaperclip,
+		icon: 'fas fa-paperclip',
 		show: computed(() => $i != null),
 		to: '/my/clips',
 	},
 	channels: {
 		title: 'channel',
-		icon: faSatelliteDish,
+		icon: 'fas fa-satellite-dish',
 		to: '/channels',
 	},
 	games: {
 		title: 'games',
-		icon: faGamepad,
+		icon: 'fas fa-gamepad',
 		to: '/games/reversi',
 	},
 	scratchpad: {
 		title: 'scratchpad',
-		icon: faTerminal,
+		icon: 'fas fa-terminal',
 		to: '/scratchpad',
 	},
 	rooms: {
 		title: 'rooms',
-		icon: faDoorClosed,
+		icon: 'fas fa-door-closed',
 		show: computed(() => $i != null),
 		to: computed(() => `/@${$i.username}/room`),
 	},
 	ui: {
 		title: 'switchUi',
-		icon: faColumns,
+		icon: 'fas fa-columns',
 		action: (ev) => {
 			os.modalMenu([{
 				text: i18n.locale.default,
diff --git a/src/client/ui/_common_/header.vue b/src/client/ui/_common_/header.vue
index 493deaeb96..83aa669b44 100644
--- a/src/client/ui/_common_/header.vue
+++ b/src/client/ui/_common_/header.vue
@@ -1,12 +1,12 @@
 <template>
 <div class="fdidabkb" :class="{ center }" :style="`--height:${height};`" :key="key">
 	<transition :name="$store.state.animation ? 'header' : ''" mode="out-in" appear>
-		<button class="_button back" v-if="withBack && canBack" @click.stop="back()" v-tooltip="$ts.goBack"><Fa :icon="faChevronLeft"/></button>
+		<button class="_button back" v-if="withBack && canBack" @click.stop="back()" v-tooltip="$ts.goBack"><i class="fas fa-chevron-left"></i></button>
 	</transition>
 	<template v-if="info">
 		<div class="titleContainer">
 			<div class="title">
-				<Fa v-if="info.icon" :icon="info.icon" :key="info.icon" class="icon"/>
+				<i v-if="info.icon" class="icon" :class="info.icon"></i>
 				<MkAvatar v-else-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true" :show-indicator="true"/>
 				<MkUserName v-if="info.userName" :user="info.userName" :nowrap="false" class="text"/>
 				<span v-else-if="info.title" class="text">{{ info.title }}</span>
@@ -14,9 +14,9 @@
 		</div>
 		<div class="buttons">
 			<template v-if="info.actions && showActions">
-				<button v-for="action in info.actions" class="_button button" @click.stop="action.handler" v-tooltip="action.text"><Fa :icon="action.icon"/></button>
+				<button v-for="action in info.actions" class="_button button" @click.stop="action.handler" v-tooltip="action.text"><i :class="action.icon"></i></button>
 			</template>
-			<button v-if="showMenu" class="_button button" @click.stop="menu"><Fa :icon="faEllipsisH"/></button>
+			<button v-if="showMenu" class="_button button" @click.stop="menu"><i class="fas fa-ellipsis-h"></i></button>
 		</div>
 	</template>
 </div>
@@ -24,7 +24,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faChevronLeft, faCircle, faShareAlt, faEllipsisH } from '@fortawesome/free-solid-svg-icons';
 import { modalMenu } from '@client/os';
 import { url } from '@client/config';
 
@@ -51,7 +50,6 @@ export default defineComponent({
 			showActions: false,
 			height: 0,
 			key: 0,
-			faChevronLeft, faCircle, faShareAlt, faEllipsisH,
 		};
 	},
 
@@ -111,7 +109,7 @@ export default defineComponent({
 				if (menu.length > 0) menu.push(null);
 				menu.push({
 					text: this.$ts.share,
-					icon: faShareAlt,
+					icon: 'fas fa-share-alt',
 					action: this.share
 				});
 			}
diff --git a/src/client/ui/_common_/sidebar.vue b/src/client/ui/_common_/sidebar.vue
index 6243d6fcc2..fefe6afa7b 100644
--- a/src/client/ui/_common_/sidebar.vue
+++ b/src/client/ui/_common_/sidebar.vue
@@ -15,28 +15,28 @@
 					<MkAvatar :user="$i" class="avatar"/><MkAcct class="text" :user="$i"/>
 				</button>
 				<MkA class="item index" active-class="active" to="/" exact>
-					<Fa :icon="faHome" fixed-width/><span class="text">{{ $ts.timeline }}</span>
+					<i class="fas fa-home fa-fw"></i><span class="text">{{ $ts.timeline }}</span>
 				</MkA>
 				<template v-for="item in menu">
 					<div v-if="item === '-'" class="divider"></div>
 					<component v-else-if="menuDef[item] && (menuDef[item].show !== false)" :is="menuDef[item].to ? 'MkA' : 'button'" class="item _button" :class="item" active-class="active" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}" :to="menuDef[item].to">
-						<Fa :icon="menuDef[item].icon" fixed-width/><span class="text">{{ $ts[menuDef[item].title] }}</span>
-						<i v-if="menuDef[item].indicated"><Fa :icon="faCircle"/></i>
+						<i class="fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ $ts[menuDef[item].title] }}</span>
+						<span v-if="menuDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span>
 					</component>
 				</template>
 				<div class="divider"></div>
 				<button class="item _button" :class="{ active: $route.path === '/instance' || $route.path.startsWith('/instance/') }" v-if="$i.isAdmin || $i.isModerator" @click="oepnInstanceMenu">
-					<Fa :icon="faServer" fixed-width/><span class="text">{{ $ts.instance }}</span>
+					<i class="fas fa-server fa-fw"></i><span class="text">{{ $ts.instance }}</span>
 				</button>
 				<button class="item _button" @click="more">
-					<Fa :icon="faEllipsisH" fixed-width/><span class="text">{{ $ts.more }}</span>
-					<i v-if="otherNavItemIndicated"><Fa :icon="faCircle"/></i>
+					<i class="fa fa-ellipsis-h fa-fw"></i><span class="text">{{ $ts.more }}</span>
+					<span v-if="otherNavItemIndicated" class="indicator"><i class="fas fa-circle"></i></span>
 				</button>
 				<MkA class="item" active-class="active" to="/settings">
-					<Fa :icon="faCog" fixed-width/><span class="text">{{ $ts.settings }}</span>
+					<i class="fas fa-cog fa-fw"></i><span class="text">{{ $ts.settings }}</span>
 				</MkA>
 				<button class="item _button post" @click="post">
-					<Fa :icon="faPencilAlt" fixed-width/><span class="text">{{ $ts.note }}</span>
+					<i class="fas fa-pencil-alt fa-fw"></i><span class="text">{{ $ts.note }}</span>
 				</button>
 			</div>
 		</nav>
@@ -46,8 +46,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faGripVertical, faChevronLeft, faHashtag, faBroadcastTower, faFireAlt, faEllipsisH, faPencilAlt, faBars, faTimes, faSearch, faUserCog, faCog, faUser, faHome, faStar, faCircle, faAt, faListUl, faPlus, faUserClock, faUsers, faTachometerAlt, faExchangeAlt, faGlobe, faChartBar, faCloud, faServer, faInfoCircle, faQuestionCircle, faProjectDiagram, faStream, faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
-import { faBell, faEnvelope, faLaugh, faComments } from '@fortawesome/free-regular-svg-icons';
 import { host } from '@client/config';
 import { search } from '@client/scripts/search';
 import * as os from '@client/os';
@@ -72,7 +70,6 @@ export default defineComponent({
 			menuDef: sidebarDef,
 			iconOnly: false,
 			hidden: this.defaultHidden,
-			faGripVertical, faChevronLeft, faComments, faHashtag, faBroadcastTower, faFireAlt, faEllipsisH, faPencilAlt, faBars, faTimes, faBell, faSearch, faUserCog, faCog, faUser, faHome, faStar, faCircle, faAt, faEnvelope, faListUl, faPlus, faUserClock, faLaugh, faUsers, faTachometerAlt, faExchangeAlt, faGlobe, faChartBar, faCloud, faServer, faProjectDiagram
 		};
 	},
 
@@ -159,7 +156,7 @@ export default defineComponent({
 				to: `/@${ this.$i.username }`,
 				avatar: this.$i,
 			}, null, ...accountItemPromises, {
-				icon: faPlus,
+				icon: 'fas fa-plus',
 				text: this.$ts.addAcount,
 				action: () => {
 					os.modalMenu([{
@@ -180,57 +177,57 @@ export default defineComponent({
 				type: 'link',
 				text: this.$ts.dashboard,
 				to: '/instance',
-				icon: faTachometerAlt,
+				icon: 'fas fa-tachometer-alt',
 			}, null, this.$i.isAdmin ? {
 				type: 'link',
 				text: this.$ts.settings,
 				to: '/instance/settings',
-				icon: faCog,
+				icon: 'fas fa-cog',
 			} : undefined, {
 				type: 'link',
 				text: this.$ts.customEmojis,
 				to: '/instance/emojis',
-				icon: faLaugh,
+				icon: 'fas fa-laugh',
 			}, {
 				type: 'link',
 				text: this.$ts.users,
 				to: '/instance/users',
-				icon: faUsers,
+				icon: 'fas fa-users',
 			}, {
 				type: 'link',
 				text: this.$ts.files,
 				to: '/instance/files',
-				icon: faCloud,
+				icon: 'fas fa-cloud',
 			}, {
 				type: 'link',
 				text: this.$ts.jobQueue,
 				to: '/instance/queue',
-				icon: faExchangeAlt,
+				icon: 'fas fa-exchange-alt',
 			}, {
 				type: 'link',
 				text: this.$ts.federation,
 				to: '/instance/federation',
-				icon: faGlobe,
+				icon: 'fas fa-globe',
 			}, {
 				type: 'link',
 				text: this.$ts.relays,
 				to: '/instance/relays',
-				icon: faProjectDiagram,
+				icon: 'fas fa-project-diagram',
 			}, {
 				type: 'link',
 				text: this.$ts.announcements,
 				to: '/instance/announcements',
-				icon: faBroadcastTower,
+				icon: 'fas fa-broadcast-tower',
 			}, {
 				type: 'link',
 				text: this.$ts.abuseReports,
 				to: '/instance/abuses',
-				icon: faExclamationCircle,
+				icon: 'fas fa-exclamation-circle',
 			}, {
 				type: 'link',
 				text: this.$ts.logs,
 				to: '/instance/logs',
-				icon: faStream,
+				icon: 'fas fa-stream',
 			}], ev.currentTarget || ev.target);
 		},
 
@@ -330,7 +327,7 @@ export default defineComponent({
 						font-size: $ui-font-size * 1.1;
 						line-height: 3.7rem;
 
-						> [data-icon],
+						> i,
 						> .avatar {
 							margin-right: 0;
 						}
@@ -397,11 +394,11 @@ export default defineComponent({
 				box-sizing: border-box;
 				color: var(--navFg);
 
-				> [data-icon] {
+				> i {
 					width: 32px;
 				}
 
-				> [data-icon],
+				> i,
 				> .avatar {
 					margin-right: $avatar-margin;
 				}
@@ -412,7 +409,7 @@ export default defineComponent({
 					vertical-align: middle;
 				}
 
-				> i {
+				> .indicator {
 					position: absolute;
 					top: 0;
 					left: 20px;
diff --git a/src/client/ui/_common_/upload.vue b/src/client/ui/_common_/upload.vue
index bd3b2cd684..25a807cd36 100644
--- a/src/client/ui/_common_/upload.vue
+++ b/src/client/ui/_common_/upload.vue
@@ -4,7 +4,7 @@
 		<li v-for="ctx in uploads" :key="ctx.id">
 			<div class="img" :style="{ backgroundImage: `url(${ ctx.img })` }"></div>
 			<div class="top">
-				<p class="name"><Fa :icon="faSpinner" pulse/>{{ ctx.name }}</p>
+				<p class="name"><i class="fas fa-spinner fa-pulse"></i>{{ ctx.name }}</p>
 				<p class="status">
 					<span class="initing" v-if="ctx.progressValue === undefined">{{ $ts.waiting }}<MkEllipsis/></span>
 					<span class="kb" v-if="ctx.progressValue !== undefined">{{ String(Math.floor(ctx.progressValue / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }}<i>KB</i> / {{ String(Math.floor(ctx.progressMax / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }}<i>KB</i></span>
@@ -19,14 +19,12 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faSpinner } from '@fortawesome/free-solid-svg-icons';
 import * as os from '@client/os';
 
 export default defineComponent({
 	data() {
 		return {
 			uploads: os.uploads,
-			faSpinner
 		};
 	},
 });
@@ -92,7 +90,7 @@ export default defineComponent({
   overflow: hidden;
   flex-shrink: 1;
 }
-.mk-uploader > ol > li > .top > .name > [data-icon] {
+.mk-uploader > ol > li > .top > .name > i {
   margin-right: 4px;
 }
 .mk-uploader > ol > li > .top > .status {
diff --git a/src/client/ui/chat/date-separated-list.vue b/src/client/ui/chat/date-separated-list.vue
index 65deb9e1c2..b073a38eb1 100644
--- a/src/client/ui/chat/date-separated-list.vue
+++ b/src/client/ui/chat/date-separated-list.vue
@@ -1,7 +1,5 @@
 <script lang="ts">
 import { defineComponent, h, TransitionGroup } from 'vue';
-import { faAngleUp, faAngleDown } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
 export default defineComponent({
 	props: {
@@ -57,17 +55,15 @@ export default defineComponent({
 					class: 'date'
 				}, [
 					h('span', [
-						h(FontAwesomeIcon, {
-							class: 'icon',
-							icon: faAngleUp,
+						h('i', {
+							class: 'fas fa-angle-up icon',
 						}),
 						getDateText(item.createdAt)
 					]),
 					h('span', [
 						getDateText(this.items[i + 1].createdAt),
-						h(FontAwesomeIcon, {
-							class: 'icon',
-							icon: faAngleDown,
+						h('i', {
+							class: 'fas fa-angle-down icon',
 						})
 					])
 				]));
diff --git a/src/client/ui/chat/index.vue b/src/client/ui/chat/index.vue
index d5c455d123..b498d70a75 100644
--- a/src/client/ui/chat/index.vue
+++ b/src/client/ui/chat/index.vue
@@ -10,63 +10,63 @@
 				</button>
 			</div>
 			<div class="right">
-				<MkA class="item" to="/my/messaging" v-tooltip="$ts.messaging"><Fa class="icon" :icon="faComments"/><i v-if="$i.hasUnreadMessagingMessage"><Fa :icon="faCircle"/></i></MkA>
-				<MkA class="item" to="/my/messages" v-tooltip="$ts.directNotes"><Fa class="icon" :icon="faEnvelope"/><i v-if="$i.hasUnreadSpecifiedNotes"><Fa :icon="faCircle"/></i></MkA>
-				<MkA class="item" to="/my/mentions" v-tooltip="$ts.mentions"><Fa class="icon" :icon="faAt"/><i v-if="$i.hasUnreadMentions"><Fa :icon="faCircle"/></i></MkA>
-				<MkA class="item" to="/my/notifications" v-tooltip="$ts.notifications"><Fa class="icon" :icon="faBell"/><i v-if="$i.hasUnreadNotification"><Fa :icon="faCircle"/></i></MkA>
+				<MkA class="item" to="/my/messaging" v-tooltip="$ts.messaging"><i class="fas fa-comments icon"></i><span v-if="$i.hasUnreadMessagingMessage" class="indicator"><i class="fas fa-circle"></i></span></MkA>
+				<MkA class="item" to="/my/messages" v-tooltip="$ts.directNotes"><i class="fas fa-envelope icon"></i><span v-if="$i.hasUnreadSpecifiedNotes" class="indicator"><i class="fas fa-circle"></i></span></MkA>
+				<MkA class="item" to="/my/mentions" v-tooltip="$ts.mentions"><i class="fas fa-at icon"></i><span v-if="$i.hasUnreadMentions" class="indicator"><i class="fas fa-circle"></i></span></MkA>
+				<MkA class="item" to="/my/notifications" v-tooltip="$ts.notifications"><i class="fas fa-bell icon"></i><span v-if="$i.hasUnreadNotification" class="indicator"><i class="fas fa-circle"></i></span></MkA>
 			</div>
 		</header>
 		<div class="body">
 			<div class="container">
 				<div class="header">{{ $ts.timeline }}</div>
 				<div class="body">
-					<MkA to="/timeline/home" class="item" :class="{ active: tl === 'home' }"><Fa :icon="faHome" class="icon"/>{{ $ts._timelines.home }}</MkA>
-					<MkA to="/timeline/local" class="item" :class="{ active: tl === 'local' }"><Fa :icon="faComments" class="icon"/>{{ $ts._timelines.local }}</MkA>
-					<MkA to="/timeline/social" class="item" :class="{ active: tl === 'social' }"><Fa :icon="faShareAlt" class="icon"/>{{ $ts._timelines.social }}</MkA>
-					<MkA to="/timeline/global" class="item" :class="{ active: tl === 'global' }"><Fa :icon="faGlobe" class="icon"/>{{ $ts._timelines.global }}</MkA>
+					<MkA to="/timeline/home" class="item" :class="{ active: tl === 'home' }"><i class="fas fa-home icon"></i>{{ $ts._timelines.home }}</MkA>
+					<MkA to="/timeline/local" class="item" :class="{ active: tl === 'local' }"><i class="fas fa-comments icon"></i>{{ $ts._timelines.local }}</MkA>
+					<MkA to="/timeline/social" class="item" :class="{ active: tl === 'social' }"><i class="fas fa-share-alt icon"></i>{{ $ts._timelines.social }}</MkA>
+					<MkA to="/timeline/global" class="item" :class="{ active: tl === 'global' }"><i class="fas fa-globe icon"></i>{{ $ts._timelines.global }}</MkA>
 				</div>
 			</div>
 			<div class="container" v-if="followedChannels">
-				<div class="header">{{ $ts.channel }} ({{ $ts.following }})<button class="_button add" @click="addChannel"><Fa :icon="faPlus"/></button></div>
+				<div class="header">{{ $ts.channel }} ({{ $ts.following }})<button class="_button add" @click="addChannel"><i class="fas fa-plus"></i></button></div>
 				<div class="body">
-					<MkA v-for="channel in followedChannels" :key="channel.id" :to="`/channels/${ channel.id }`" class="item" :class="{ active: tl === `channel:${ channel.id }`, read: !channel.hasUnreadNote }"><Fa :icon="faSatelliteDish" class="icon"/>{{ channel.name }}</MkA>
+					<MkA v-for="channel in followedChannels" :key="channel.id" :to="`/channels/${ channel.id }`" class="item" :class="{ active: tl === `channel:${ channel.id }`, read: !channel.hasUnreadNote }"><i class="fas fa-satellite-dish icon"></i>{{ channel.name }}</MkA>
 				</div>
 			</div>
 			<div class="container" v-if="featuredChannels">
-				<div class="header">{{ $ts.channel }}<button class="_button add" @click="addChannel"><Fa :icon="faPlus"/></button></div>
+				<div class="header">{{ $ts.channel }}<button class="_button add" @click="addChannel"><i class="fas fa-plus"></i></button></div>
 				<div class="body">
-					<MkA v-for="channel in featuredChannels" :key="channel.id" :to="`/channels/${ channel.id }`" class="item" :class="{ active: tl === `channel:${ channel.id }` }"><Fa :icon="faSatelliteDish" class="icon"/>{{ channel.name }}</MkA>
+					<MkA v-for="channel in featuredChannels" :key="channel.id" :to="`/channels/${ channel.id }`" class="item" :class="{ active: tl === `channel:${ channel.id }` }"><i class="fas fa-satellite-dish icon"></i>{{ channel.name }}</MkA>
 				</div>
 			</div>
 			<div class="container" v-if="lists">
-				<div class="header">{{ $ts.lists }}<button class="_button add" @click="addList"><Fa :icon="faPlus"/></button></div>
+				<div class="header">{{ $ts.lists }}<button class="_button add" @click="addList"><i class="fas fa-plus"></i></button></div>
 				<div class="body">
-					<MkA v-for="list in lists" :key="list.id" :to="`/my/list/${ list.id }`" class="item" :class="{ active: tl === `list:${ list.id }` }"><Fa :icon="faListUl" class="icon"/>{{ list.name }}</MkA>
+					<MkA v-for="list in lists" :key="list.id" :to="`/my/list/${ list.id }`" class="item" :class="{ active: tl === `list:${ list.id }` }"><i class="fas fa-list-ul icon"></i>{{ list.name }}</MkA>
 				</div>
 			</div>
 			<div class="container" v-if="antennas">
-				<div class="header">{{ $ts.antennas }}<button class="_button add" @click="addAntenna"><Fa :icon="faPlus"/></button></div>
+				<div class="header">{{ $ts.antennas }}<button class="_button add" @click="addAntenna"><i class="fas fa-plus"></i></button></div>
 				<div class="body">
-					<MkA v-for="antenna in antennas" :key="antenna.id" :to="`/my/antenna/${ antenna.id }`" class="item" :class="{ active: tl === `antenna:${ antenna.id }` }"><Fa :icon="faSatellite" class="icon"/>{{ antenna.name }}</MkA>
+					<MkA v-for="antenna in antennas" :key="antenna.id" :to="`/my/antenna/${ antenna.id }`" class="item" :class="{ active: tl === `antenna:${ antenna.id }` }"><i class="fas fa-satellite icon"></i>{{ antenna.name }}</MkA>
 				</div>
 			</div>
 			<div class="container">
 				<div class="body">
-					<MkA to="/my/favorites" class="item"><Fa :icon="faStar" class="icon"/>{{ $ts.favorites }}</MkA>
+					<MkA to="/my/favorites" class="item"><i class="fas fa-star icon"></i>{{ $ts.favorites }}</MkA>
 				</div>
 			</div>
 		</div>
 		<footer class="footer">
 			<div class="left">
 				<button class="_button menu" @click="showMenu">
-					<Fa class="icon" :icon="faBars"/>
+					<i class="fas fa-bars icon"></i>
 				</button>
 			</div>
 			<div class="right">
 				<button class="_button item search" @click="search" v-tooltip="$ts.search">
-					<Fa :icon="faSearch"/>
+					<i class="fas fa-search"></i>
 				</button>
-				<MkA class="item" to="/settings" v-tooltip="$ts.settings"><Fa class="icon" :icon="faCog"/></MkA>
+				<MkA class="item" to="/settings" v-tooltip="$ts.settings"><i class="fas fa-cog icon"></i></MkA>
 			</div>
 		</footer>
 	</div>
@@ -75,23 +75,23 @@
 		<header class="header" ref="header" @click="onHeaderClick">
 			<div class="left">
 				<template v-if="tl === 'home'">
-					<Fa :icon="faHome" class="icon"/>
+					<i class="fas fa-home icon"></i>
 					<div class="title">{{ $ts._timelines.home }}</div>
 				</template>
 				<template v-else-if="tl === 'local'">
-					<Fa :icon="faComments" class="icon"/>
+					<i class="fas fa-comments icon"></i>
 					<div class="title">{{ $ts._timelines.local }}</div>
 				</template>
 				<template v-else-if="tl === 'social'">
-					<Fa :icon="faShareAlt" class="icon"/>
+					<i class="fas fa-share-alt icon"></i>
 					<div class="title">{{ $ts._timelines.social }}</div>
 				</template>
 				<template v-else-if="tl === 'global'">
-					<Fa :icon="faGlobe" class="icon"/>
+					<i class="fas fa-globe icon"></i>
 					<div class="title">{{ $ts._timelines.global }}</div>
 				</template>
 				<template v-else-if="tl.startsWith('channel:')">
-					<Fa :icon="faSatelliteDish" class="icon"/>
+					<i class="fas fa-satellite-dish icon"></i>
 					<div class="title" v-if="currentChannel">{{ currentChannel.name }}<div class="description">{{ currentChannel.description }}</div></div>
 				</template>
 			</div>
@@ -100,20 +100,20 @@
 				<div class="instance">{{ instanceName }}</div>
 				<XHeaderClock class="clock"/>
 				<button class="_button button timetravel" @click="timetravel" v-tooltip="$ts.jumpToSpecifiedDate">
-					<Fa :icon="faCalendarAlt"/>
+					<i class="fas fa-calendar-alt"></i>
 				</button>
 				<button class="_button button search" v-if="tl.startsWith('channel:') && currentChannel" @click="inChannelSearch" v-tooltip="$ts.inChannelSearch">
-					<Fa :icon="faSearch"/>
+					<i class="fas fa-search"></i>
 				</button>
 				<button class="_button button search" v-else @click="search" v-tooltip="$ts.search">
-					<Fa :icon="faSearch"/>
+					<i class="fas fa-search"></i>
 				</button>
 				<button class="_button button follow" v-if="tl.startsWith('channel:') && currentChannel" :class="{ followed: currentChannel.isFollowing }" @click="toggleChannelFollow" v-tooltip="currentChannel.isFollowing ? $ts.unfollow : $ts.follow">
-					<Fa v-if="currentChannel.isFollowing" :icon="faStar"/>
-					<Fa v-else :icon="farStar"/>
+					<i v-if="currentChannel.isFollowing" class="fas fa-star"></i>
+					<i v-else class="far fa-star"></i>
 				</button>
 				<button class="_button button menu" v-if="tl.startsWith('channel:') && currentChannel" @click="openChannelMenu">
-					<Fa :icon="faEllipsisH"/>
+					<i class="fas fa-ellipsis-h"></i>
 				</button>
 			</div>
 		</header>
@@ -133,8 +133,6 @@
 
 <script lang="ts">
 import { defineComponent, defineAsyncComponent } from 'vue';
-import { faLayerGroup, faBars, faHome, faCircle, faWindowMaximize, faColumns, faPencilAlt, faShareAlt, faSatelliteDish, faListUl, faSatellite, faCog, faSearch, faPlus, faStar, faAt, faLink, faEllipsisH, faGlobe } from '@fortawesome/free-solid-svg-icons';
-import { faBell, faStar as farStar, faEnvelope, faComments, faCalendarAlt } from '@fortawesome/free-regular-svg-icons';
 import { instanceName, url } from '@client/config';
 import XSidebar from '@client/ui/_common_/sidebar.vue';
 import XWidgets from './widgets.vue';
@@ -195,7 +193,6 @@ export default defineComponent({
 			menuDef: sidebarDef,
 			sideViewOpening: false,
 			instanceName,
-			faLayerGroup, faBars, faBell, faHome, faCircle, faPencilAlt, faShareAlt, faSatelliteDish, faListUl, faSatellite, faCog, faSearch, faPlus, faStar, farStar, faAt, faLink, faEllipsisH, faGlobe, faComments, faEnvelope, faCalendarAlt,
 		};
 	},
 
@@ -293,7 +290,7 @@ export default defineComponent({
 		openChannelMenu(ev) {
 			os.modalMenu([{
 				text: this.$ts.copyUrl,
-				icon: faLink,
+				icon: 'fas fa-link',
 				action: () => {
 					copyToClipboard(`${url}/channels/${this.currentChannel.id}`);
 				}
@@ -323,13 +320,13 @@ export default defineComponent({
 				type: 'label',
 				text: path,
 			}, {
-				icon: faColumns,
+				icon: 'fas fa-columns',
 				text: this.$ts.openInSideView,
 				action: () => {
 					this.$refs.side.navigate(path);
 				}
 			}, {
-				icon: faWindowMaximize,
+				icon: 'fas fa-window-maximize',
 				text: this.$ts.openInWindow,
 				action: () => {
 					os.pageWindow(path);
@@ -398,7 +395,7 @@ export default defineComponent({
 						margin: auto;
 					}
 
-					> i {
+					> .indicator {
 						position: absolute;
 						top: 8px;
 						right: 8px;
diff --git a/src/client/ui/chat/note-header.vue b/src/client/ui/chat/note-header.vue
index be08183d39..e40f22f588 100644
--- a/src/client/ui/chat/note-header.vue
+++ b/src/client/ui/chat/note-header.vue
@@ -5,27 +5,25 @@
 	</MkA>
 	<span class="is-bot" v-if="note.user.isBot">bot</span>
 	<span class="username"><MkAcct :user="note.user"/></span>
-	<span class="admin" v-if="note.user.isAdmin"><Fa :icon="faBookmark"/></span>
-	<span class="moderator" v-if="!note.user.isAdmin && note.user.isModerator"><Fa :icon="farBookmark"/></span>
+	<span class="admin" v-if="note.user.isAdmin"><i class="fas fa-bookmark"></i></span>
+	<span class="moderator" v-if="!note.user.isAdmin && note.user.isModerator"><i class="far fa-bookmark"></i></span>
 	<div class="info">
-		<span class="mobile" v-if="note.viaMobile"><Fa :icon="faMobileAlt"/></span>
+		<span class="mobile" v-if="note.viaMobile"><i class="fas fa-mobile-alt"></i></span>
 		<MkA class="created-at" :to="notePage(note)">
 			<MkTime :time="note.createdAt"/>
 		</MkA>
 		<span class="visibility" v-if="note.visibility !== 'public'">
-			<Fa v-if="note.visibility === 'home'" :icon="faHome"/>
-			<Fa v-if="note.visibility === 'followers'" :icon="faUnlock"/>
-			<Fa v-if="note.visibility === 'specified'" :icon="faEnvelope"/>
+			<i v-if="note.visibility === 'home'" class="fas fa-home"></i>
+			<i v-else-if="note.visibility === 'followers'" class="fas fa-unlock"></i>
+			<i v-else-if="note.visibility === 'specified'" class="fas fa-envelope"></i>
 		</span>
-		<span class="localOnly" v-if="note.localOnly"><Fa :icon="faBiohazard"/></span>
+		<span class="localOnly" v-if="note.localOnly"><i class="fas fa-biohazard"></i></span>
 	</div>
 </header>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faHome, faUnlock, faEnvelope, faMobileAlt, faBookmark, faBiohazard } from '@fortawesome/free-solid-svg-icons';
-import { faBookmark as farBookmark } from '@fortawesome/free-regular-svg-icons';
 import notePage from '@client/filters/note';
 import { userPage } from '@client/filters/user';
 import * as os from '@client/os';
@@ -40,7 +38,6 @@ export default defineComponent({
 
 	data() {
 		return {
-			faHome, faUnlock, faEnvelope, faMobileAlt, faBookmark, farBookmark, faBiohazard
 		};
 	},
 
diff --git a/src/client/ui/chat/note.vue b/src/client/ui/chat/note.vue
index 77b7440ca1..7a525d9edb 100644
--- a/src/client/ui/chat/note.vue
+++ b/src/client/ui/chat/note.vue
@@ -8,12 +8,12 @@
 	v-hotkey="keymap"
 >
 	<XSub :note="appearNote.reply" class="reply-to" v-if="appearNote.reply"/>
-	<div class="info" v-if="pinned"><Fa :icon="faThumbtack"/> {{ $ts.pinnedNote }}</div>
-	<div class="info" v-if="appearNote._prId_"><Fa :icon="faBullhorn"/> {{ $ts.promotion }}<button class="_textButton hide" @click="readPromo()">{{ $ts.hideThisNote }} <Fa :icon="faTimes"/></button></div>
-	<div class="info" v-if="appearNote._featuredId_"><Fa :icon="faBolt"/> {{ $ts.featured }}</div>
+	<div class="info" v-if="pinned"><i class="fas fa-thumbtack"></i> {{ $ts.pinnedNote }}</div>
+	<div class="info" v-if="appearNote._prId_"><i class="fas fa-bullhorn"></i> {{ $ts.promotion }}<button class="_textButton hide" @click="readPromo()">{{ $ts.hideThisNote }} <i class="fas fa-times"></i></button></div>
+	<div class="info" v-if="appearNote._featuredId_"><i class="fas fa-bolt"></i> {{ $ts.featured }}</div>
 	<div class="renote" v-if="isRenote">
 		<MkAvatar class="avatar" :user="note.user"/>
-		<Fa :icon="faRetweet"/>
+		<i class="fas fa-retweet"></i>
 		<I18n :src="$ts.renotedBy" tag="span">
 			<template #user>
 				<MkA class="name" :to="userPage(note.user)" v-user-preview="note.userId">
@@ -23,15 +23,15 @@
 		</I18n>
 		<div class="info">
 			<button class="_button time" @click="showRenoteMenu()" ref="renoteTime">
-				<Fa class="dropdownIcon" v-if="isMyRenote" :icon="faEllipsisH"/>
+				<i v-if="isMyRenote" class="fas fa-ellipsis-h dropdownIcon"></i>
 				<MkTime :time="note.createdAt"/>
 			</button>
 			<span class="visibility" v-if="note.visibility !== 'public'">
-				<Fa v-if="note.visibility === 'home'" :icon="faHome"/>
-				<Fa v-if="note.visibility === 'followers'" :icon="faUnlock"/>
-				<Fa v-if="note.visibility === 'specified'" :icon="faEnvelope"/>
+				<i v-if="note.visibility === 'home'" class="fas fa-home"></i>
+				<i v-else-if="note.visibility === 'followers'" class="fas fa-unlock"></i>
+				<i v-else-if="note.visibility === 'specified'" class="fas fa-envelope"></i>
 			</span>
-			<span class="localOnly" v-if="note.localOnly"><Fa :icon="faBiohazard"/></span>
+			<span class="localOnly" v-if="note.localOnly"><i class="fas fa-biohazard"></i></span>
 		</div>
 	</div>
 	<article class="article" @contextmenu.stop="onContextmenu">
@@ -47,7 +47,7 @@
 				<div class="content" :class="{ collapsed }" v-show="appearNote.cw == null || showContent">
 					<div class="text">
 						<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ $ts.private }})</span>
-						<MkA class="reply" v-if="appearNote.replyId" :to="`/notes/${appearNote.replyId}`"><Fa :icon="faReply"/></MkA>
+						<MkA class="reply" v-if="appearNote.replyId" :to="`/notes/${appearNote.replyId}`"><i class="fas fa-reply"></i></MkA>
 						<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
 						<a class="rp" v-if="appearNote.renote != null">RN:</a>
 					</div>
@@ -61,29 +61,29 @@
 						<span>{{ $ts.showMore }}</span>
 					</button>
 				</div>
-				<MkA v-if="appearNote.channel && !inChannel" class="channel" :to="`/channels/${appearNote.channel.id}`"><Fa :icon="faSatelliteDish"/> {{ appearNote.channel.name }}</MkA>
+				<MkA v-if="appearNote.channel && !inChannel" class="channel" :to="`/channels/${appearNote.channel.id}`"><i class="fas fa-satellite-dish"></i> {{ appearNote.channel.name }}</MkA>
 			</div>
 			<XReactionsViewer :note="appearNote" ref="reactionsViewer"/>
 			<footer class="footer _panel">
 				<button @click="reply()" class="button _button" v-tooltip="$ts.reply">
-					<template v-if="appearNote.reply"><Fa :icon="faReplyAll"/></template>
-					<template v-else><Fa :icon="faReply"/></template>
+					<template v-if="appearNote.reply"><i class="fas fa-reply-all"></i></template>
+					<template v-else><i class="fas fa-reply"></i></template>
 					<p class="count" v-if="appearNote.repliesCount > 0">{{ appearNote.repliesCount }}</p>
 				</button>
 				<button v-if="canRenote" @click="renote()" class="button _button" ref="renoteButton" v-tooltip="$ts.renote">
-					<Fa :icon="faRetweet"/><p class="count" v-if="appearNote.renoteCount > 0">{{ appearNote.renoteCount }}</p>
+					<i class="fas fa-retweet"></i><p class="count" v-if="appearNote.renoteCount > 0">{{ appearNote.renoteCount }}</p>
 				</button>
 				<button v-else class="button _button">
-					<Fa :icon="faBan"/>
+					<i class="fas fa-ban"></i>
 				</button>
 				<button v-if="appearNote.myReaction == null" class="button _button" @click="react()" ref="reactButton" v-tooltip="$ts.reaction">
-					<Fa :icon="faPlus"/>
+					<i class="fas fa-plus"></i>
 				</button>
 				<button v-if="appearNote.myReaction != null" class="button _button reacted" @click="undoReact(appearNote)" ref="reactButton" v-tooltip="$ts.reaction">
-					<Fa :icon="faMinus"/>
+					<i class="fas fa-minus"></i>
 				</button>
 				<button class="button _button" @click="menu()" ref="menuButton">
-					<Fa :icon="faEllipsisH"/>
+					<i class="fas fa-ellipsis-h"></i>
 				</button>
 			</footer>
 		</div>
@@ -102,8 +102,6 @@
 
 <script lang="ts">
 import { defineAsyncComponent, defineComponent, markRaw } from 'vue';
-import { faSatelliteDish, faBolt, faTimes, faBullhorn, faStar, faLink, faExternalLinkSquareAlt, faPlus, faMinus, faRetweet, faReply, faReplyAll, faEllipsisH, faHome, faUnlock, faEnvelope, faThumbtack, faBan, faQuoteRight, faInfoCircle, faBiohazard, faPlug, faExclamationCircle, faPaperclip, faShareAlt } from '@fortawesome/free-solid-svg-icons';
-import { faCopy, faTrashAlt, faEdit, faEye, faEyeSlash } from '@fortawesome/free-regular-svg-icons';
 import * as mfm from 'mfm-js';
 import { sum } from '../../../prelude/array';
 import XSub from './note.sub.vue';
@@ -124,14 +122,6 @@ import { noteActions, noteViewInterruptors } from '@client/store';
 import { reactionPicker } from '@client/scripts/reaction-picker';
 import { extractUrlFromMfm } from '@/misc/extract-url-from-mfm';
 
-function markRawAll(...xs) {
-	for (const x of xs) {
-		markRaw(x);
-	}
-}
-
-markRawAll(faEdit, faBolt, faTimes, faBullhorn, faPlus, faMinus, faRetweet, faReply, faReplyAll, faEllipsisH, faHome, faUnlock, faEnvelope, faThumbtack, faBan, faBiohazard, faPlug, faSatelliteDish);
-
 export default defineComponent({
 	components: {
 		XSub,
@@ -174,7 +164,6 @@ export default defineComponent({
 			isDeleted: false,
 			muted: false,
 			operating: false,
-			faEdit, faBolt, faTimes, faBullhorn, faPlus, faMinus, faRetweet, faReply, faReplyAll, faEllipsisH, faHome, faUnlock, faEnvelope, faThumbtack, faBan, faBiohazard, faPlug, faSatelliteDish
 		};
 	},
 
@@ -445,7 +434,7 @@ export default defineComponent({
 			this.blur();
 			os.modalMenu([{
 				text: this.$ts.renote,
-				icon: faRetweet,
+				icon: 'fas fa-retweet',
 				action: () => {
 					os.api('notes/create', {
 						renoteId: this.appearNote.id
@@ -453,7 +442,7 @@ export default defineComponent({
 				}
 			}, {
 				text: this.$ts.quote,
-				icon: faQuoteRight,
+				icon: 'fas fa-quote-right',
 				action: () => {
 					os.post({
 						renote: this.appearNote,
@@ -593,62 +582,62 @@ export default defineComponent({
 				});
 
 				menu = [{
-					icon: faCopy,
+					icon: 'fas fa-copy',
 					text: this.$ts.copyContent,
 					action: this.copyContent
 				}, {
-					icon: faLink,
+					icon: 'fas fa-link',
 					text: this.$ts.copyLink,
 					action: this.copyLink
 				}, (this.appearNote.url || this.appearNote.uri) ? {
-					icon: faExternalLinkSquareAlt,
+					icon: 'fas fa-external-link-square-alt',
 					text: this.$ts.showOnRemote,
 					action: () => {
 						window.open(this.appearNote.url || this.appearNote.uri, '_blank');
 					}
 				} : undefined,
 				{
-					icon: faShareAlt,
+					icon: 'fas fa-share-alt',
 					text: this.$ts.share,
 					action: this.share
 				},
 				null,
 				statePromise.then(state => state.isFavorited ? {
-					icon: faStar,
+					icon: 'fas fa-star',
 					text: this.$ts.unfavorite,
 					action: () => this.toggleFavorite(false)
 				} : {
-					icon: faStar,
+					icon: 'fas fa-star',
 					text: this.$ts.favorite,
 					action: () => this.toggleFavorite(true)
 				}),
 				{
-					icon: faPaperclip,
+					icon: 'fas fa-paperclip',
 					text: this.$ts.clip,
 					action: () => this.clip()
 				},
 				(this.appearNote.userId != this.$i.id) ? statePromise.then(state => state.isWatching ? {
-					icon: faEyeSlash,
+					icon: 'fas fa-eye-slash',
 					text: this.$ts.unwatch,
 					action: () => this.toggleWatch(false)
 				} : {
-					icon: faEye,
+					icon: 'fas fa-eye',
 					text: this.$ts.watch,
 					action: () => this.toggleWatch(true)
 				}) : undefined,
 				this.appearNote.userId == this.$i.id ? (this.$i.pinnedNoteIds || []).includes(this.appearNote.id) ? {
-					icon: faThumbtack,
+					icon: 'fas fa-thumbtack',
 					text: this.$ts.unpin,
 					action: () => this.togglePin(false)
 				} : {
-					icon: faThumbtack,
+					icon: 'fas fa-thumbtack',
 					text: this.$ts.pin,
 					action: () => this.togglePin(true)
 				} : undefined,
 				...(this.$i.isModerator || this.$i.isAdmin ? [
 					null,
 					{
-						icon: faBullhorn,
+						icon: 'fas fa-bullhorn',
 						text: this.$ts.promote,
 						action: this.promote
 					}]
@@ -657,7 +646,7 @@ export default defineComponent({
 				...(this.appearNote.userId != this.$i.id ? [
 					null,
 					{
-						icon: faExclamationCircle,
+						icon: 'fas fa-exclamation-circle',
 						text: this.$ts.reportAbuse,
 						action: () => {
 							const u = `${url}/notes/${this.appearNote.id}`;
@@ -672,12 +661,12 @@ export default defineComponent({
 				...(this.appearNote.userId == this.$i.id || this.$i.isModerator || this.$i.isAdmin ? [
 					null,
 					this.appearNote.userId == this.$i.id ? {
-						icon: faEdit,
+						icon: 'fas fa-edit',
 						text: this.$ts.deleteAndEdit,
 						action: this.delEdit
 					} : undefined,
 					{
-						icon: faTrashAlt,
+						icon: 'fas fa-trash-alt',
 						text: this.$ts.delete,
 						danger: true,
 						action: this.del
@@ -687,15 +676,15 @@ export default defineComponent({
 				.filter(x => x !== undefined);
 			} else {
 				menu = [{
-					icon: faCopy,
+					icon: 'fas fa-copy',
 					text: this.$ts.copyContent,
 					action: this.copyContent
 				}, {
-					icon: faLink,
+					icon: 'fas fa-link',
 					text: this.$ts.copyLink,
 					action: this.copyLink
 				}, (this.appearNote.url || this.appearNote.uri) ? {
-					icon: faExternalLinkSquareAlt,
+					icon: 'fas fa-external-link-square-alt',
 					text: this.$ts.showOnRemote,
 					action: () => {
 						window.open(this.appearNote.url || this.appearNote.uri, '_blank');
@@ -706,7 +695,7 @@ export default defineComponent({
 
 			if (noteActions.length > 0) {
 				menu = menu.concat([null, ...noteActions.map(action => ({
-					icon: faPlug,
+					icon: 'fas fa-plug',
 					text: action.title,
 					action: () => {
 						action.handler(this.appearNote);
@@ -749,7 +738,7 @@ export default defineComponent({
 			if (!this.isMyRenote) return;
 			os.modalMenu([{
 				text: this.$ts.unrenote,
-				icon: faTrashAlt,
+				icon: 'fas fa-trash-alt',
 				danger: true,
 				action: () => {
 					os.api('notes/delete', {
@@ -792,7 +781,7 @@ export default defineComponent({
 		async clip() {
 			const clips = await os.api('clips/list');
 			os.modalMenu([{
-				icon: faPlus,
+				icon: 'fas fa-plus',
 				text: this.$ts.createNew,
 				action: async () => {
 					const { canceled, result } = await os.form(this.$ts.createNewClip, {
@@ -914,7 +903,7 @@ export default defineComponent({
 		white-space: pre;
 		color: #d28a3f;
 
-		> [data-icon] {
+		> i {
 			margin-right: 4px;
 		}
 
@@ -952,7 +941,7 @@ export default defineComponent({
 			border-radius: 6px;
 		}
 
-		> [data-icon] {
+		> i {
 			margin-right: 4px;
 		}
 
diff --git a/src/client/ui/chat/post-form.vue b/src/client/ui/chat/post-form.vue
index a9413ea8bc..6030166fc5 100644
--- a/src/client/ui/chat/post-form.vue
+++ b/src/client/ui/chat/post-form.vue
@@ -6,15 +6,15 @@
 	@drop.stop="onDrop"
 >
 	<div class="form">
-		<div class="with-quote" v-if="quoteId"><Fa icon="quote-left"/> {{ $ts.quoteAttached }}<button @click="quoteId = null"><Fa icon="times"/></button></div>
+		<div class="with-quote" v-if="quoteId"><i class="fas fa-quote-left"></i> {{ $ts.quoteAttached }}<button @click="quoteId = null"><i class="fas fa-times"></i></button></div>
 		<div v-if="visibility === 'specified'" class="to-specified">
 			<span style="margin-right: 8px;">{{ $ts.recipient }}</span>
 			<div class="visibleUsers">
 				<span v-for="u in visibleUsers" :key="u.id">
 					<MkAcct :user="u"/>
-					<button class="_button" @click="removeVisibleUser(u)"><Fa :icon="faTimes"/></button>
+					<button class="_button" @click="removeVisibleUser(u)"><i class="fas fa-times"></i></button>
 				</span>
-				<button @click="addVisibleUser" class="_buttonPrimary"><Fa :icon="faPlus" fixed-width/></button>
+				<button @click="addVisibleUser" class="_buttonPrimary"><i class="fas fa-plus fa-fw"></i></button>
 			</div>
 		</div>
 		<input v-show="useCw" ref="cw" class="cw" v-model="cw" :placeholder="$ts.annotation" @keydown="onKeydown">
@@ -23,23 +23,23 @@
 		<XPollEditor v-if="poll" :poll="poll" @destroyed="poll = null" @updated="onPollUpdate"/>
 		<footer>
 			<div class="left">
-				<button class="_button" @click="chooseFileFrom" v-tooltip="$ts.attachFile"><Fa :icon="faPhotoVideo"/></button>
-				<button class="_button" @click="togglePoll" :class="{ active: poll }" v-tooltip="$ts.poll"><Fa :icon="faPollH"/></button>
-				<button class="_button" @click="useCw = !useCw" :class="{ active: useCw }" v-tooltip="$ts.useCw"><Fa :icon="faEyeSlash"/></button>
-				<button class="_button" @click="insertMention" v-tooltip="$ts.mention"><Fa :icon="faAt"/></button>
-				<button class="_button" @click="insertEmoji" v-tooltip="$ts.emoji"><Fa :icon="faLaughSquint"/></button>
-				<button class="_button" @click="showActions" v-tooltip="$ts.plugin" v-if="postFormActions.length > 0"><Fa :icon="faPlug"/></button>
+				<button class="_button" @click="chooseFileFrom" v-tooltip="$ts.attachFile"><i class="fas fa-photo-video"></i></button>
+				<button class="_button" @click="togglePoll" :class="{ active: poll }" v-tooltip="$ts.poll"><i class="fas fa-poll-h"></i></button>
+				<button class="_button" @click="useCw = !useCw" :class="{ active: useCw }" v-tooltip="$ts.useCw"><i class="fas fa-eye-slash"></i></button>
+				<button class="_button" @click="insertMention" v-tooltip="$ts.mention"><i class="fas fa-at"></i></button>
+				<button class="_button" @click="insertEmoji" v-tooltip="$ts.emoji"><i class="fas fa-laugh-squint"></i></button>
+				<button class="_button" @click="showActions" v-tooltip="$ts.plugin" v-if="postFormActions.length > 0"><i class="fas fa-plug"></i></button>
 			</div>
 			<div class="right">
 				<span class="text-count" :class="{ over: textLength > max }">{{ max - textLength }}</span>
-				<span class="local-only" v-if="localOnly"><Fa :icon="faBiohazard"/></span>
+				<span class="local-only" v-if="localOnly"><i class="fas fa-biohazard"></i></span>
 				<button class="_button visibility" @click="setVisibility" ref="visibilityButton" v-tooltip="$ts.visibility" :disabled="channel != null">
-					<span v-if="visibility === 'public'"><Fa :icon="faGlobe"/></span>
-					<span v-if="visibility === 'home'"><Fa :icon="faHome"/></span>
-					<span v-if="visibility === 'followers'"><Fa :icon="faUnlock"/></span>
-					<span v-if="visibility === 'specified'"><Fa :icon="faEnvelope"/></span>
+					<span v-if="visibility === 'public'"><i class="fas fa-globe"></i></span>
+					<span v-if="visibility === 'home'"><i class="fas fa-home"></i></span>
+					<span v-if="visibility === 'followers'"><i class="fas fa-unlock"></i></span>
+					<span v-if="visibility === 'specified'"><i class="fas fa-envelope"></i></span>
 				</button>
-				<button class="submit _buttonPrimary" :disabled="!canPost" @click="post">{{ submitText }}<Fa :icon="reply ? faReply : renote ? faQuoteRight : faPaperPlane"/></button>
+				<button class="submit _buttonPrimary" :disabled="!canPost" @click="post">{{ submitText }}<i :class="reply ? 'fas fa-reply' : renote ? 'fas fa-quote-right' : 'fas fa-paper-plane'"></i></button>
 			</div>
 		</footer>
 	</div>
@@ -48,8 +48,6 @@
 
 <script lang="ts">
 import { defineComponent, defineAsyncComponent } from 'vue';
-import { faReply, faQuoteRight, faPaperPlane, faTimes, faUpload, faPollH, faGlobe, faHome, faUnlock, faEnvelope, faPlus, faPhotoVideo, faAt, faBiohazard, faPlug } from '@fortawesome/free-solid-svg-icons';
-import { faEyeSlash, faLaughSquint } from '@fortawesome/free-regular-svg-icons';
 import insertTextAtCursor from 'insert-text-at-cursor';
 import { length } from 'stringz';
 import { toASCII } from 'punycode/';
@@ -138,7 +136,6 @@ export default defineComponent({
 				}
 			}),
 			postFormActions,
-			faReply, faQuoteRight, faPaperPlane, faTimes, faUpload, faPollH, faGlobe, faHome, faUnlock, faEnvelope, faEyeSlash, faLaughSquint, faPlus, faPhotoVideo, faAt, faBiohazard, faPlug
 		};
 	},
 
@@ -767,7 +764,7 @@ export default defineComponent({
 						opacity: 0.7;
 					}
 
-					> [data-icon] {
+					> i {
 						margin-left: 6px;
 					}
 				}
diff --git a/src/client/ui/chat/side.vue b/src/client/ui/chat/side.vue
index 2f182175ba..8cc69fee8c 100644
--- a/src/client/ui/chat/side.vue
+++ b/src/client/ui/chat/side.vue
@@ -1,9 +1,9 @@
 <template>
 <div class="mrajymqm _narrow_" v-if="component">
 	<header class="header" @contextmenu.prevent.stop="onContextmenu">
-		<button class="_button" @click="back()" v-if="history.length > 0"><Fa :icon="faChevronLeft"/></button>
+		<button class="_button" @click="back()" v-if="history.length > 0"><i class="fas fa-chevron-left"></i></button>
 		<XHeader class="title" :info="pageInfo" :with-back="false" :center="false"/>
-		<button class="_button" @click="close()"><Fa :icon="faTimes"/></button>
+		<button class="_button" @click="close()"><i class="fas fa-times"></i></button>
 	</header>
 	<component :is="component" v-bind="props" :ref="changePage"/>
 </div>
@@ -11,7 +11,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faTimes, faChevronLeft, faExpandAlt, faWindowMaximize, faExternalLinkAlt, faLink } from '@fortawesome/free-solid-svg-icons';
 import XHeader from '../_common_/header.vue';
 import * as os from '@client/os';
 import copyToClipboard from '@client/scripts/copy-to-clipboard';
@@ -39,7 +38,6 @@ export default defineComponent({
 			props: {},
 			pageInfo: null,
 			history: [],
-			faTimes, faChevronLeft,
 		};
 	},
 
@@ -82,28 +80,28 @@ export default defineComponent({
 				type: 'label',
 				text: this.path,
 			}, {
-				icon: faExpandAlt,
+				icon: 'fas fa-expand-alt',
 				text: this.$ts.showInPage,
 				action: () => {
 					this.$router.push(this.path);
 					this.close();
 				}
 			}, {
-				icon: faWindowMaximize,
+				icon: 'fas fa-window-maximize',
 				text: this.$ts.openInWindow,
 				action: () => {
 					os.pageWindow(this.path);
 					this.close();
 				}
 			}, null, {
-				icon: faExternalLinkAlt,
+				icon: 'fas fa-external-link-alt',
 				text: this.$ts.openInNewTab,
 				action: () => {
 					window.open(this.url, '_blank');
 					this.close();
 				}
 			}, {
-				icon: faLink,
+				icon: 'fas fa-link',
 				text: this.$ts.copyLink,
 				action: () => {
 					copyToClipboard(this.url);
diff --git a/src/client/ui/chat/sub-note-content.vue b/src/client/ui/chat/sub-note-content.vue
index e530a88172..8a3cf1160f 100644
--- a/src/client/ui/chat/sub-note-content.vue
+++ b/src/client/ui/chat/sub-note-content.vue
@@ -3,7 +3,7 @@
 	<div class="body">
 		<span v-if="note.isHidden" style="opacity: 0.5">({{ $ts.private }})</span>
 		<span v-if="note.deletedAt" style="opacity: 0.5">({{ $ts.deleted }})</span>
-		<MkA class="reply" v-if="note.replyId" :to="`/notes/${note.replyId}`"><Fa :icon="faReply"/></MkA>
+		<MkA class="reply" v-if="note.replyId" :to="`/notes/${note.replyId}`"><i class="fas fa-reply"></i></MkA>
 		<Mfm v-if="note.text" :text="note.text" :author="note.user" :i="$i" :custom-emojis="note.emojis"/>
 		<MkA class="rp" v-if="note.renoteId" :to="`/notes/${note.renoteId}`">RN: ...</MkA>
 	</div>
@@ -20,7 +20,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faReply } from '@fortawesome/free-solid-svg-icons';
 import XPoll from '@client/components/poll.vue';
 import XMediaList from '@client/components/media-list.vue';
 import * as os from '@client/os';
@@ -38,7 +37,6 @@ export default defineComponent({
 	},
 	data() {
 		return {
-			faReply
 		};
 	}
 });
diff --git a/src/client/ui/deck.vue b/src/client/ui/deck.vue
index 0429dbc9b1..935445a54d 100644
--- a/src/client/ui/deck.vue
+++ b/src/client/ui/deck.vue
@@ -22,8 +22,8 @@
 		/>
 	</template>
 
-	<button v-if="$i" class="nav _button" @click="showNav()"><Fa :icon="faBars"/><i v-if="navIndicated"><Fa :icon="faCircle"/></i></button>
-	<button v-if="$i" class="post _buttonPrimary" @click="post()"><Fa :icon="faPencilAlt"/></button>
+	<button v-if="$i" class="nav _button" @click="showNav()"><i class="fas fa-bars"></i><span v-if="navIndicated" class="indicator"><i class="fas fa-circle"></i></span></button>
+	<button v-if="$i" class="post _buttonPrimary" @click="post()"><i class="fas fa-pencil-alt"></i></button>
 
 	<XCommon/>
 </div>
@@ -31,8 +31,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faPlus, faPencilAlt, faChevronLeft, faBars, faCircle } from '@fortawesome/free-solid-svg-icons';
-import {  } from '@fortawesome/free-regular-svg-icons';
 import { v4 as uuid } from 'uuid';
 import { host } from '@client/config';
 import DeckColumnCore from '@client/ui/deck/column-core.vue';
@@ -64,7 +62,6 @@ export default defineComponent({
 			host: host,
 			menuDef: sidebarDef,
 			wallpaper: localStorage.getItem('wallpaper') != null,
-			faPlus, faPencilAlt, faChevronLeft, faBars, faCircle
 		};
 	},
 
@@ -219,7 +216,7 @@ export default defineComponent({
 			background: var(--X2);
 		}
 
-		> i {
+		> .indicator {
 			position: absolute;
 			top: 0;
 			left: 0;
diff --git a/src/client/ui/deck/antenna-column.vue b/src/client/ui/deck/antenna-column.vue
index 0de870233a..3abd3d3a45 100644
--- a/src/client/ui/deck/antenna-column.vue
+++ b/src/client/ui/deck/antenna-column.vue
@@ -1,7 +1,7 @@
 <template>
 <XColumn :func="{ handler: setAntenna, title: $ts.selectAntenna }" :column="column" :is-stacked="isStacked">
 	<template #header>
-		<Fa :icon="faSatellite"/><span style="margin-left: 8px;">{{ column.name }}</span>
+		<i class="fas fa-satellite"></i><span style="margin-left: 8px;">{{ column.name }}</span>
 	</template>
 
 	<XTimeline v-if="column.antennaId" ref="timeline" src="antenna" :antenna="column.antennaId" @after="() => $emit('loaded')"/>
@@ -10,7 +10,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faSatellite, faCog } from '@fortawesome/free-solid-svg-icons';
 import XColumn from './column.vue';
 import XTimeline from '@client/components/timeline.vue';
 import * as os from '@client/os';
@@ -35,7 +34,6 @@ export default defineComponent({
 
 	data() {
 		return {
-			faSatellite
 		};
 	},
 
diff --git a/src/client/ui/deck/column.vue b/src/client/ui/deck/column.vue
index 7a08b65a64..eaf9280698 100644
--- a/src/client/ui/deck/column.vue
+++ b/src/client/ui/deck/column.vue
@@ -15,14 +15,14 @@
 		@contextmenu.prevent.stop="onContextmenu"
 	>
 		<button class="toggleActive _button" @click="toggleActive" v-if="isStacked && !isMainColumn">
-			<template v-if="active"><Fa :icon="faAngleUp"/></template>
-			<template v-else><Fa :icon="faAngleDown"/></template>
+			<template v-if="active"><i class="fas fa-angle-up"></i></template>
+			<template v-else><i class="fas fa-angle-down"></i></template>
 		</button>
 		<div class="action">
 			<slot name="action"></slot>
 		</div>
 		<span class="header"><slot name="header"></slot></span>
-		<button v-if="func" class="menu _button" v-tooltip="func.title" @click.stop="func.handler"><Fa :icon="func.icon || faCog"/></button>
+		<button v-if="func" class="menu _button" v-tooltip="func.title" @click.stop="func.handler"><i :class="func.icon || 'fas fa-cog'"></i></button>
 	</header>
 	<div ref="body" v-show="active">
 		<slot></slot>
@@ -32,8 +32,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faArrowUp, faArrowDown, faAngleUp, faAngleDown, faCaretDown, faArrowRight, faArrowLeft, faPencilAlt, faCog } from '@fortawesome/free-solid-svg-icons';
-import { faWindowMaximize, faTrashAlt, faWindowRestore } from '@fortawesome/free-regular-svg-icons';
 import * as os from '@client/os';
 import { updateColumn, swapLeftColumn, swapRightColumn, swapUpColumn, swapDownColumn, stackLeftColumn, popRightColumn, removeColumn, swapColumn } from './deck-store';
 import { deckStore } from './deck-store';
@@ -73,7 +71,6 @@ export default defineComponent({
 			dragging: false,
 			draghover: false,
 			dropready: false,
-			faArrowUp, faArrowDown, faAngleUp, faAngleDown, faCaretDown, faCog,
 		};
 	},
 
@@ -134,7 +131,7 @@ export default defineComponent({
 
 		getMenu() {
 			const items = [{
-				icon: faPencilAlt,
+				icon: 'fas fa-pencil-alt',
 				text: this.$ts.edit,
 				action: async () => {
 					const { canceled, result } = await os.form(this.column.name, {
@@ -158,43 +155,43 @@ export default defineComponent({
 					updateColumn(this.column.id, result);
 				}
 			}, null, {
-				icon: faArrowLeft,
+				icon: 'fas fa-arrow-left',
 				text: this.$ts._deck.swapLeft,
 				action: () => {
 					swapLeftColumn(this.column.id);
 				}
 			}, {
-				icon: faArrowRight,
+				icon: 'fas fa-arrow-right',
 				text: this.$ts._deck.swapRight,
 				action: () => {
 					swapRightColumn(this.column.id);
 				}
 			}, this.isStacked ? {
-				icon: faArrowUp,
+				icon: 'fas fa-arrow-up',
 				text: this.$ts._deck.swapUp,
 				action: () => {
 					swapUpColumn(this.column.id);
 				}
 			} : undefined, this.isStacked ? {
-				icon: faArrowDown,
+				icon: 'fas fa-arrow-down',
 				text: this.$ts._deck.swapDown,
 				action: () => {
 					swapDownColumn(this.column.id);
 				}
 			} : undefined, null, {
-				icon: faWindowRestore,
+				icon: 'fas fa-window-restore',
 				text: this.$ts._deck.stackLeft,
 				action: () => {
 					stackLeftColumn(this.column.id);
 				}
 			}, this.isStacked ? {
-				icon: faWindowMaximize,
+				icon: 'fas fa-window-maximize',
 				text: this.$ts._deck.popRight,
 				action: () => {
 					popRightColumn(this.column.id);
 				}
 			} : undefined, null, {
-				icon: faTrashAlt,
+				icon: 'fas fa-trash-alt',
 				text: this.$ts.remove,
 				danger: true,
 				action: () => {
diff --git a/src/client/ui/deck/direct-column.vue b/src/client/ui/deck/direct-column.vue
index 6fceae4ed7..5b4b02932b 100644
--- a/src/client/ui/deck/direct-column.vue
+++ b/src/client/ui/deck/direct-column.vue
@@ -1,6 +1,6 @@
 <template>
 <XColumn :column="column" :is-stacked="isStacked">
-	<template #header><Fa :icon="faEnvelope" style="margin-right: 8px;"/>{{ column.name }}</template>
+	<template #header><i class="fas fa-envelope" style="margin-right: 8px;"></i>{{ column.name }}</template>
 
 	<XNotes :pagination="pagination" @before="before()" @after="after()"/>
 </XColumn>
@@ -8,7 +8,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faEnvelope } from '@fortawesome/free-solid-svg-icons';
 import Progress from '@client/scripts/loading';
 import XColumn from './column.vue';
 import XNotes from '@client/components/notes.vue';
@@ -40,7 +39,6 @@ export default defineComponent({
 					visibility: 'specified'
 				})
 			},
-			faEnvelope
 		}
 	},
 
diff --git a/src/client/ui/deck/list-column.vue b/src/client/ui/deck/list-column.vue
index c70abc9f6e..450280b863 100644
--- a/src/client/ui/deck/list-column.vue
+++ b/src/client/ui/deck/list-column.vue
@@ -1,7 +1,7 @@
 <template>
 <XColumn :func="{ handler: setList, title: $ts.selectList }" :column="column" :is-stacked="isStacked">
 	<template #header>
-		<Fa :icon="faListUl"/><span style="margin-left: 8px;">{{ column.name }}</span>
+		<i class="fas fa-list-ul"></i><span style="margin-left: 8px;">{{ column.name }}</span>
 	</template>
 
 	<XTimeline v-if="column.listId" ref="timeline" src="list" :list="column.listId" @after="() => $emit('loaded')"/>
@@ -10,7 +10,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faListUl, faCog } from '@fortawesome/free-solid-svg-icons';
 import XColumn from './column.vue';
 import XTimeline from '@client/components/timeline.vue';
 import * as os from '@client/os';
@@ -35,7 +34,6 @@ export default defineComponent({
 
 	data() {
 		return {
-			faListUl
 		};
 	},
 
diff --git a/src/client/ui/deck/main-column.vue b/src/client/ui/deck/main-column.vue
index 2206fa5e13..75cf94aaed 100644
--- a/src/client/ui/deck/main-column.vue
+++ b/src/client/ui/deck/main-column.vue
@@ -16,7 +16,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faWindowMaximize } from '@fortawesome/free-solid-svg-icons';
 import XColumn from './column.vue';
 import XNotes from '@client/components/notes.vue';
 import XHeader from '@client/ui/_common_/header.vue';
@@ -72,7 +71,7 @@ export default defineComponent({
 				type: 'label',
 				text: path,
 			}, {
-				icon: faWindowMaximize,
+				icon: 'fas fa-window-maximize',
 				text: this.$ts.openInWindow,
 				action: () => {
 					os.pageWindow(path);
diff --git a/src/client/ui/deck/mentions-column.vue b/src/client/ui/deck/mentions-column.vue
index 996123cb1f..053ef918f0 100644
--- a/src/client/ui/deck/mentions-column.vue
+++ b/src/client/ui/deck/mentions-column.vue
@@ -1,6 +1,6 @@
 <template>
 <XColumn :column="column" :is-stacked="isStacked">
-	<template #header><Fa :icon="faAt" style="margin-right: 8px;"/>{{ column.name }}</template>
+	<template #header><i class="fas fa-at" style="margin-right: 8px;"></i>{{ column.name }}</template>
 
 	<XNotes :pagination="pagination" @before="before()" @after="after()"/>
 </XColumn>
@@ -8,7 +8,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faAt } from '@fortawesome/free-solid-svg-icons';
 import Progress from '@client/scripts/loading';
 import XColumn from './column.vue';
 import XNotes from '@client/components/notes.vue';
diff --git a/src/client/ui/deck/notifications-column.vue b/src/client/ui/deck/notifications-column.vue
index 1b29a2d54f..c24bf7ab10 100644
--- a/src/client/ui/deck/notifications-column.vue
+++ b/src/client/ui/deck/notifications-column.vue
@@ -1,6 +1,6 @@
 <template>
 <XColumn :column="column" :is-stacked="isStacked" :func="{ handler: func, title: $ts.notificationSetting }">
-	<template #header><Fa :icon="faBell" style="margin-right: 8px;"/>{{ column.name }}</template>
+	<template #header><i class="fas fa-bell" style="margin-right: 8px;"></i>{{ column.name }}</template>
 
 	<XNotifications :include-types="column.includingTypes"/>
 </XColumn>
@@ -8,8 +8,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faCog } from '@fortawesome/free-solid-svg-icons';
-import { faBell } from '@fortawesome/free-regular-svg-icons';
 import XColumn from './column.vue';
 import XNotifications from '@client/components/notifications.vue';
 import * as os from '@client/os';
@@ -34,7 +32,6 @@ export default defineComponent({
 
 	data() {
 		return {
-			faBell
 		}
 	},
 
diff --git a/src/client/ui/deck/tl-column.vue b/src/client/ui/deck/tl-column.vue
index d4908d0edf..370f7d507f 100644
--- a/src/client/ui/deck/tl-column.vue
+++ b/src/client/ui/deck/tl-column.vue
@@ -1,16 +1,16 @@
 <template>
 <XColumn :func="{ handler: setType, title: $ts.timeline }" :column="column" :is-stacked="isStacked" :indicated="indicated" @change-active-state="onChangeActiveState">
 	<template #header>
-		<Fa v-if="column.tl === 'home'" :icon="faHome"/>
-		<Fa v-else-if="column.tl === 'local'" :icon="faComments"/>
-		<Fa v-else-if="column.tl === 'social'" :icon="faShareAlt"/>
-		<Fa v-else-if="column.tl === 'global'" :icon="faGlobe"/>
+		<i v-if="column.tl === 'home'" class="fas fa-home"></i>
+		<i v-else-if="column.tl === 'local'" class="fas fa-comments"></i>
+		<i v-else-if="column.tl === 'social'" class="fas fa-share-alt"></i>
+		<i v-else-if="column.tl === 'global'" class="fas fa-globe"></i>
 		<span style="margin-left: 8px;">{{ column.name }}</span>
 	</template>
 
 	<div class="iwaalbte" v-if="disabled">
 		<p>
-			<Fa :icon="faMinusCircle"/>
+			<i class="fas fa-minus-circle"></i>
 			{{ $t('disabled-timeline.title') }}
 		</p>
 		<p class="desc">{{ $t('disabled-timeline.description') }}</p>
@@ -21,7 +21,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faMinusCircle, faHome, faComments, faShareAlt, faGlobe, faCog } from '@fortawesome/free-solid-svg-icons';
 import XColumn from './column.vue';
 import XTimeline from '@client/components/timeline.vue';
 import * as os from '@client/os';
@@ -49,7 +48,6 @@ export default defineComponent({
 			disabled: false,
 			indicated: false,
 			columnActive: true,
-			faMinusCircle, faHome, faComments, faShareAlt, faGlobe,
 		};
 	},
 
diff --git a/src/client/ui/deck/widgets-column.vue b/src/client/ui/deck/widgets-column.vue
index 992845ff7e..47d7e7e314 100644
--- a/src/client/ui/deck/widgets-column.vue
+++ b/src/client/ui/deck/widgets-column.vue
@@ -1,6 +1,6 @@
 <template>
 <XColumn :func="{ handler: func, title: $ts.editWidgets }" :naked="true" :column="column" :is-stacked="isStacked">
-	<template #header><Fa :icon="faWindowMaximize" style="margin-right: 8px;"/>{{ column.name }}</template>
+	<template #header><i class="fas fa-window-maximize" style="margin-right: 8px;"></i>{{ column.name }}</template>
 
 	<div class="wtdtxvec">
 		<XWidgets :edit="edit" :widgets="column.widgets" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="edit = false"/>
@@ -10,7 +10,6 @@
 
 <script lang="ts">
 import { defineComponent, defineAsyncComponent } from 'vue';
-import { faWindowMaximize, faTimes, faCog, faPlus } from '@fortawesome/free-solid-svg-icons';
 import XWidgets from '@client/components/widgets.vue';
 import XColumn from './column.vue';
 import { addColumnWidget, removeColumnWidget, setColumnWidgets, updateColumnWidget } from './deck-store';
@@ -35,7 +34,6 @@ export default defineComponent({
 	data() {
 		return {
 			edit: false,
-			faWindowMaximize, faTimes, faPlus
 		};
 	},
 
diff --git a/src/client/ui/default.side.vue b/src/client/ui/default.side.vue
index 89b648244f..5c8de80378 100644
--- a/src/client/ui/default.side.vue
+++ b/src/client/ui/default.side.vue
@@ -2,10 +2,10 @@
 <div class="qvzfzxam _narrow_" v-if="component">
 	<div class="container">
 		<header class="header" @contextmenu.prevent.stop="onContextmenu">
-			<button class="_button" @click="back()" v-if="history.length > 0"><Fa :icon="faChevronLeft"/></button>
+			<button class="_button" @click="back()" v-if="history.length > 0"><i class="fas fa-chevron-left"></i></button>
 			<button class="_button" style="pointer-events: none;" v-else><!-- マージンのバランスを取るためのダミー --></button>
 			<XHeader class="title" :info="pageInfo" :with-back="false"/>
-			<button class="_button" @click="close()"><Fa :icon="faTimes"/></button>
+			<button class="_button" @click="close()"><i class="fas fa-times"></i></button>
 		</header>
 		<component :is="component" v-bind="props" :ref="changePage"/>
 	</div>
@@ -14,7 +14,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faTimes, faChevronLeft, faExpandAlt, faWindowMaximize, faExternalLinkAlt, faLink } from '@fortawesome/free-solid-svg-icons';
 import XHeader from './_common_/header.vue';
 import * as os from '@client/os';
 import copyToClipboard from '@client/scripts/copy-to-clipboard';
@@ -42,7 +41,6 @@ export default defineComponent({
 			props: {},
 			pageInfo: null,
 			history: [],
-			faTimes, faChevronLeft,
 		};
 	},
 
@@ -83,28 +81,28 @@ export default defineComponent({
 				type: 'label',
 				text: this.path,
 			}, {
-				icon: faExpandAlt,
+				icon: 'fas fa-expand-alt',
 				text: this.$ts.showInPage,
 				action: () => {
 					this.$router.push(this.path);
 					this.close();
 				}
 			}, {
-				icon: faWindowMaximize,
+				icon: 'fas fa-window-maximize',
 				text: this.$ts.openInWindow,
 				action: () => {
 					os.pageWindow(this.path);
 					this.close();
 				}
 			}, null, {
-				icon: faExternalLinkAlt,
+				icon: 'fas fa-external-link-alt',
 				text: this.$ts.openInNewTab,
 				action: () => {
 					window.open(this.url, '_blank');
 					this.close();
 				}
 			}, {
-				icon: faLink,
+				icon: 'fas fa-link',
 				text: this.$ts.copyLink,
 				action: () => {
 					copyToClipboard(this.url);
diff --git a/src/client/ui/default.sidebar.vue b/src/client/ui/default.sidebar.vue
index 3e956679cd..952ec3903d 100644
--- a/src/client/ui/default.sidebar.vue
+++ b/src/client/ui/default.sidebar.vue
@@ -5,30 +5,30 @@
 	</button>
 	<div class="post" @click="post">
 		<MkButton class="button" primary full>
-			<Fa :icon="faPencilAlt" fixed-width/><span class="text" v-if="!iconOnly">{{ $ts.note }}</span>
+			<i class="fas fa-pencil-alt fa-fw"></i><span class="text" v-if="!iconOnly">{{ $ts.note }}</span>
 		</MkButton>
 	</div>
 	<div class="divider"></div>
 	<MkA class="item index" active-class="active" to="/" exact>
-		<Fa :icon="faHome" fixed-width/><span class="text">{{ $ts.timeline }}</span>
+		<i class="fas fa-home fa-fw"></i><span class="text">{{ $ts.timeline }}</span>
 	</MkA>
 	<template v-for="item in menu">
 		<div v-if="item === '-'" class="divider"></div>
 		<component v-else-if="menuDef[item] && (menuDef[item].show !== false)" :is="menuDef[item].to ? 'MkA' : 'button'" class="item _button" :class="item" active-class="active" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}" :to="menuDef[item].to">
-			<Fa :icon="menuDef[item].icon" fixed-width/><span class="text">{{ $ts[menuDef[item].title] }}</span>
-			<i v-if="menuDef[item].indicated"><Fa :icon="faCircle"/></i>
+			<i class="fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ $ts[menuDef[item].title] }}</span>
+			<span v-if="menuDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span>
 		</component>
 	</template>
 	<div class="divider"></div>
 	<button class="item _button" :class="{ active: $route.path === '/instance' || $route.path.startsWith('/instance/') }" v-if="$i.isAdmin || $i.isModerator" @click="oepnInstanceMenu">
-		<Fa :icon="faServer" fixed-width/><span class="text">{{ $ts.instance }}</span>
+		<i class="fas fa-server fa-fw"></i><span class="text">{{ $ts.instance }}</span>
 	</button>
 	<button class="item _button" @click="more">
-		<Fa :icon="faEllipsisH" fixed-width/><span class="text">{{ $ts.more }}</span>
-		<i v-if="otherNavItemIndicated"><Fa :icon="faCircle"/></i>
+		<i class="fas fa-ellipsis-h fa-fw"></i><span class="text">{{ $ts.more }}</span>
+		<span v-if="otherNavItemIndicated" class="indicator"><i class="fas fa-circle"></i></span>
 	</button>
 	<MkA class="item" active-class="active" to="/settings" :behavior="settingsWindowed ? 'modalWindow' : null">
-		<Fa :icon="faCog" fixed-width/><span class="text">{{ $ts.settings }}</span>
+		<i class="fas fa-cog fa-fw"></i><span class="text">{{ $ts.settings }}</span>
 	</MkA>
 	<div class="divider"></div>
 	<div class="foo">
@@ -40,8 +40,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faGripVertical, faChevronLeft, faHashtag, faBroadcastTower, faFireAlt, faEllipsisH, faPencilAlt, faBars, faTimes, faSearch, faUserCog, faCog, faUser, faHome, faStar, faCircle, faAt, faListUl, faPlus, faUserClock, faUsers, faTachometerAlt, faExchangeAlt, faGlobe, faChartBar, faCloud, faServer, faInfoCircle, faQuestionCircle, faProjectDiagram, faStream, faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
-import { faBell, faEnvelope, faLaugh, faComments } from '@fortawesome/free-regular-svg-icons';
 import { host } from '@client/config';
 import { search } from '@client/scripts/search';
 import * as os from '@client/os';
@@ -65,7 +63,6 @@ export default defineComponent({
 			menuDef: sidebarDef,
 			iconOnly: false,
 			settingsWindowed: false,
-			faGripVertical, faChevronLeft, faComments, faHashtag, faBroadcastTower, faFireAlt, faEllipsisH, faPencilAlt, faBars, faTimes, faBell, faSearch, faUserCog, faCog, faUser, faHome, faStar, faCircle, faAt, faEnvelope, faListUl, faPlus, faUserClock, faLaugh, faUsers, faTachometerAlt, faExchangeAlt, faGlobe, faChartBar, faCloud, faServer, faProjectDiagram
 		};
 	},
 
@@ -143,7 +140,7 @@ export default defineComponent({
 				to: `/@${ this.$i.username }`,
 				avatar: this.$i,
 			}, null, ...accountItemPromises, {
-				icon: faPlus,
+				icon: 'fas fa-plus',
 				text: this.$ts.addAcount,
 				action: () => {
 					os.modalMenu([{
@@ -164,57 +161,57 @@ export default defineComponent({
 				type: 'link',
 				text: this.$ts.dashboard,
 				to: '/instance',
-				icon: faTachometerAlt,
+				icon: 'fas fa-tachometer-alt',
 			}, null, this.$i.isAdmin ? {
 				type: 'link',
 				text: this.$ts.settings,
 				to: '/instance/settings',
-				icon: faCog,
+				icon: 'fas fa-cog',
 			} : undefined, {
 				type: 'link',
 				text: this.$ts.customEmojis,
 				to: '/instance/emojis',
-				icon: faLaugh,
+				icon: 'fas fa-laugh',
 			}, {
 				type: 'link',
 				text: this.$ts.users,
 				to: '/instance/users',
-				icon: faUsers,
+				icon: 'fas fa-users',
 			}, {
 				type: 'link',
 				text: this.$ts.files,
 				to: '/instance/files',
-				icon: faCloud,
+				icon: 'fas fa-cloud',
 			}, {
 				type: 'link',
 				text: this.$ts.jobQueue,
 				to: '/instance/queue',
-				icon: faExchangeAlt,
+				icon: 'fas fa-exchange-alt',
 			}, {
 				type: 'link',
 				text: this.$ts.federation,
 				to: '/instance/federation',
-				icon: faGlobe,
+				icon: 'fas fa-globe',
 			}, {
 				type: 'link',
 				text: this.$ts.relays,
 				to: '/instance/relays',
-				icon: faProjectDiagram,
+				icon: 'fas fa-project-diagram',
 			}, {
 				type: 'link',
 				text: this.$ts.announcements,
 				to: '/instance/announcements',
-				icon: faBroadcastTower,
+				icon: 'fas fa-broadcast-tower',
 			}, {
 				type: 'link',
 				text: this.$ts.abuseReports,
 				to: '/instance/abuses',
-				icon: faExclamationCircle,
+				icon: 'fas fa-exclamation-circle',
 			}, {
 				type: 'link',
 				text: this.$ts.logs,
 				to: '/instance/logs',
-				icon: faStream,
+				icon: 'fas fa-stream',
 			}], ev.currentTarget || ev.target);
 		},
 
@@ -289,7 +286,7 @@ export default defineComponent({
 			font-size: $ui-font-size * 1.1;
 			line-height: 3.7rem;
 
-			> [data-icon],
+			> i,
 			> .avatar {
 				margin-right: 0;
 			}
@@ -344,11 +341,11 @@ export default defineComponent({
 		text-align: left;
 		box-sizing: border-box;
 
-		> [data-icon] {
+		> i {
 			width: 32px;
 		}
 
-		> [data-icon],
+		> i,
 		> .avatar {
 			margin-right: $avatar-margin;
 		}
@@ -359,7 +356,7 @@ export default defineComponent({
 			vertical-align: middle;
 		}
 
-		> i {
+		> .indicator {
 			position: absolute;
 			top: 0;
 			left: 20px;
diff --git a/src/client/ui/default.vue b/src/client/ui/default.vue
index c3dce0f323..19eca0975c 100644
--- a/src/client/ui/default.vue
+++ b/src/client/ui/default.vue
@@ -26,11 +26,11 @@
 	</div>
 
 	<div class="buttons" v-if="isMobile">
-		<button class="button nav _button" @click="showDrawerNav" ref="navButton"><Fa :icon="faBars"/><i v-if="navIndicated"><Fa :icon="faCircle"/></i></button>
-		<button class="button home _button" @click="$route.name === 'index' ? top() : $router.push('/')"><Fa :icon="faHome"/></button>
-		<button class="button notifications _button" @click="$router.push('/my/notifications')"><Fa :icon="faBell"/><i v-if="$i.hasUnreadNotification"><Fa :icon="faCircle"/></i></button>
-		<button class="button widget _button" @click="widgetsShowing = true"><Fa :icon="faLayerGroup"/></button>
-		<button class="button post _button" @click="post"><Fa :icon="faPencilAlt"/></button>
+		<button class="button nav _button" @click="showDrawerNav" ref="navButton"><i class="fas fa-bars"></i><span v-if="navIndicated" class="indicator"><i class="fas fa-circle"></i></span></button>
+		<button class="button home _button" @click="$route.name === 'index' ? top() : $router.push('/')"><i class="fas fa-home"></i></button>
+		<button class="button notifications _button" @click="$router.push('/my/notifications')"><i class="fas fa-bell"></i><span v-if="$i.hasUnreadNotification" class="indicator"><i class="fas fa-circle"></i></span></button>
+		<button class="button widget _button" @click="widgetsShowing = true"><i class="fas fa-layer-group"></i></button>
+		<button class="button post _button" @click="post"><i class="fas fa-pencil-alt"></i></button>
 	</div>
 
 	<XDrawerSidebar ref="drawerNav" class="sidebar" v-if="isMobile"/>
@@ -53,8 +53,6 @@
 
 <script lang="ts">
 import { defineComponent, defineAsyncComponent } from 'vue';
-import { faLayerGroup, faBars, faHome, faCircle, faWindowMaximize, faExpand, faPencilAlt, faCompress } from '@fortawesome/free-solid-svg-icons';
-import { faBell } from '@fortawesome/free-regular-svg-icons';
 import { instanceName } from '@client/config';
 import { StickySidebar } from '@client/scripts/sticky-sidebar';
 import XSidebar from './default.sidebar.vue';
@@ -86,7 +84,6 @@ export default defineComponent({
 			widgetsShowing: false,
 			fullView: false,
 			wallpaper: localStorage.getItem('wallpaper') != null,
-			faLayerGroup, faBars, faBell, faHome, faCircle, faPencilAlt,
 		};
 	},
 
@@ -175,13 +172,13 @@ export default defineComponent({
 				type: 'label',
 				text: path,
 			}, {
-				icon: this.fullView ? faCompress : faExpand,
+				icon: this.fullView ? 'fas fa-compress' : 'fas fa-expand',
 				text: this.fullView ? this.$ts.quitFullView : this.$ts.fullView,
 				action: () => {
 					this.fullView = !this.fullView;
 				}
 			}, {
-				icon: faWindowMaximize,
+				icon: 'fas fa-window-maximize',
 				text: this.$ts.openInWindow,
 				action: () => {
 					os.pageWindow(path);
@@ -372,7 +369,7 @@ export default defineComponent({
 				background: var(--X2);
 			}
 
-			> i {
+			> .indicator {
 				position: absolute;
 				top: 0;
 				left: 0;
diff --git a/src/client/ui/default.widgets.vue b/src/client/ui/default.widgets.vue
index e5a0419387..cabd83937e 100644
--- a/src/client/ui/default.widgets.vue
+++ b/src/client/ui/default.widgets.vue
@@ -2,14 +2,13 @@
 <div class="efzpzdvf">
 	<XWidgets class="widgets" :edit="editMode" :widgets="$store.reactiveState.widgets.value" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/>
 
-	<button v-if="editMode" @click="editMode = false" class="_textButton edit" style="font-size: 0.9em;"><Fa :icon="faCheck"/> {{ $ts.editWidgetsExit }}</button>
-	<button v-else @click="editMode = true" class="_textButton edit" style="font-size: 0.9em;"><Fa :icon="faPencilAlt"/> {{ $ts.editWidgets }}</button>
+	<button v-if="editMode" @click="editMode = false" class="_textButton edit" style="font-size: 0.9em;"><i class="fas fa-check"></i> {{ $ts.editWidgetsExit }}</button>
+	<button v-else @click="editMode = true" class="_textButton edit" style="font-size: 0.9em;"><i class="fas fa-pencil-alt"></i> {{ $ts.editWidgets }}</button>
 </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, defineAsyncComponent } from 'vue';
-import { faPencilAlt, faPlus, faBars, faTimes, faCheck } from '@fortawesome/free-solid-svg-icons';
 import XWidgets from '@client/components/widgets.vue';
 import * as os from '@client/os';
 
@@ -23,7 +22,6 @@ export default defineComponent({
 	data() {
 		return {
 			editMode: false,
-			faPencilAlt, faPlus, faBars, faTimes, faCheck,
 		};
 	},
 
diff --git a/src/client/ui/universal.vue b/src/client/ui/universal.vue
index 6df09937df..a44dfc42f0 100644
--- a/src/client/ui/universal.vue
+++ b/src/client/ui/universal.vue
@@ -27,14 +27,14 @@
 	</div>
 
 	<div class="buttons" :class="{ navHidden }">
-		<button class="button nav _button" @click="showNav" ref="navButton"><Fa :icon="faBars"/><i v-if="navIndicated"><Fa :icon="faCircle"/></i></button>
-		<button class="button home _button" @click="$route.name === 'index' ? top() : $router.push('/')"><Fa :icon="faHome"/></button>
-		<button class="button notifications _button" @click="$router.push('/my/notifications')"><Fa :icon="faBell"/><i v-if="$i.hasUnreadNotification"><Fa :icon="faCircle"/></i></button>
-		<button class="button widget _button" @click="widgetsShowing = true"><Fa :icon="faLayerGroup"/></button>
-		<button class="button post _button" @click="post"><Fa :icon="faPencilAlt"/></button>
+		<button class="button nav _button" @click="showNav" ref="navButton"><i class="fas fa-bars"></i><span v-if="navIndicated" class="indicator"><i class="fas fa-circle"></i></span></button>
+		<button class="button home _button" @click="$route.name === 'index' ? top() : $router.push('/')"><i class="fas fa-home"></i></button>
+		<button class="button notifications _button" @click="$router.push('/my/notifications')"><i class="fas fa-bell"></i><span v-if="$i.hasUnreadNotification" class="indicator"><i class="fas fa-circle"></i></span></button>
+		<button class="button widget _button" @click="widgetsShowing = true"><i class="fas fa-layer-group"></i></button>
+		<button class="button post _button" @click="post"><i class="fas fa-pencil-alt"></i></button>
 	</div>
 
-	<button class="widgetButton _button" :class="{ navHidden }" @click="widgetsShowing = true"><Fa :icon="faLayerGroup"/></button>
+	<button class="widgetButton _button" :class="{ navHidden }" @click="widgetsShowing = true"><i class="fas fa-layer-group"></i></button>
 
 	<transition name="tray-back">
 		<div class="tray-back _modalBg"
@@ -54,8 +54,6 @@
 
 <script lang="ts">
 import { defineComponent, defineAsyncComponent } from 'vue';
-import { faLayerGroup, faBars, faHome, faCircle, faWindowMaximize, faColumns, faPencilAlt } from '@fortawesome/free-solid-svg-icons';
-import { faBell } from '@fortawesome/free-regular-svg-icons';
 import { instanceName } from '@client/config';
 import { StickySidebar } from '@client/scripts/sticky-sidebar';
 import XSidebar from '@client/ui/_common_/sidebar.vue';
@@ -93,7 +91,6 @@ export default defineComponent({
 			navHidden: false,
 			widgetsShowing: false,
 			wallpaper: localStorage.getItem('wallpaper') != null,
-			faLayerGroup, faBars, faBell, faHome, faCircle, faPencilAlt,
 		};
 	},
 
@@ -201,13 +198,13 @@ export default defineComponent({
 				type: 'label',
 				text: path,
 			}, {
-				icon: faColumns,
+				icon: 'fas fa-columns',
 				text: this.$ts.openInSideView,
 				action: () => {
 					this.$refs.side.navigate(path);
 				}
 			}, {
-				icon: faWindowMaximize,
+				icon: 'fas fa-window-maximize',
 				text: this.$ts.openInWindow,
 				action: () => {
 					os.pageWindow(path);
@@ -378,7 +375,7 @@ export default defineComponent({
 				background: var(--X2);
 			}
 
-			> i {
+			> .indicator {
 				position: absolute;
 				top: 0;
 				left: 0;
diff --git a/src/client/ui/universal.widgets.vue b/src/client/ui/universal.widgets.vue
index 35d3442bb2..28b14749d1 100644
--- a/src/client/ui/universal.widgets.vue
+++ b/src/client/ui/universal.widgets.vue
@@ -2,14 +2,13 @@
 <div class="efzpzdvf">
 	<XWidgets :edit="editMode" :widgets="$store.reactiveState.widgets.value" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/>
 
-	<button v-if="editMode" @click="editMode = false" class="_textButton" style="font-size: 0.9em;"><Fa :icon="faCheck"/> {{ $ts.editWidgetsExit }}</button>
-	<button v-else @click="editMode = true" class="_textButton" style="font-size: 0.9em;"><Fa :icon="faPencilAlt"/> {{ $ts.editWidgets }}</button>
+	<button v-if="editMode" @click="editMode = false" class="_textButton" style="font-size: 0.9em;"><i class="fas fa-check"></i> {{ $ts.editWidgetsExit }}</button>
+	<button v-else @click="editMode = true" class="_textButton" style="font-size: 0.9em;"><i class="fas fa-pencil-alt"></i> {{ $ts.editWidgets }}</button>
 </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, defineAsyncComponent } from 'vue';
-import { faPencilAlt, faPlus, faBars, faTimes, faCheck } from '@fortawesome/free-solid-svg-icons';
 import XWidgets from '@client/components/widgets.vue';
 import * as os from '@client/os';
 
@@ -23,7 +22,6 @@ export default defineComponent({
 	data() {
 		return {
 			editMode: false,
-			faPencilAlt, faPlus, faBars, faTimes, faCheck,
 		};
 	},
 
diff --git a/src/client/ui/visitor/a.vue b/src/client/ui/visitor/a.vue
index 1b080c9e82..1dcb803eb1 100644
--- a/src/client/ui/visitor/a.vue
+++ b/src/client/ui/visitor/a.vue
@@ -41,7 +41,6 @@
 
 <script lang="ts">
 import { defineComponent, defineAsyncComponent } from 'vue';
-import { } from '@fortawesome/free-solid-svg-icons';
 import { host, instanceName } from '@client/config';
 import { search } from '@client/scripts/search';
 import * as os from '@client/os';
diff --git a/src/client/ui/visitor/b.vue b/src/client/ui/visitor/b.vue
index da2ae45180..0a70e5e1d1 100644
--- a/src/client/ui/visitor/b.vue
+++ b/src/client/ui/visitor/b.vue
@@ -35,10 +35,10 @@
 
 	<transition name="tray">
 		<div v-if="showMenu" class="menu">
-			<MkA to="/" class="link" active-class="active"><Fa :icon="faHome" class="icon"/>{{ $ts.home }}</MkA>
-			<MkA to="/explore" class="link" active-class="active"><Fa :icon="faHashtag" class="icon"/>{{ $ts.explore }}</MkA>
-			<MkA to="/featured" class="link" active-class="active"><Fa :icon="faFireAlt" class="icon"/>{{ $ts.featured }}</MkA>
-			<MkA to="/channels" class="link" active-class="active"><Fa :icon="faSatelliteDish" class="icon"/>{{ $ts.channel }}</MkA>
+			<MkA to="/" class="link" active-class="active"><i class="fas fa-home icon"></i>{{ $ts.home }}</MkA>
+			<MkA to="/explore" class="link" active-class="active"><i class="fas fa-hashtag icon"></i>{{ $ts.explore }}</MkA>
+			<MkA to="/featured" class="link" active-class="active"><i class="fas fa-fire-alt icon"></i>{{ $ts.featured }}</MkA>
+			<MkA to="/channels" class="link" active-class="active"><i class="fas fa-satellite-dish icon"></i>{{ $ts.channel }}</MkA>
 			<div class="action">
 				<button class="_buttonPrimary" @click="signup()">{{ $ts.signup }}</button>
 				<button class="_button" @click="signin()">{{ $ts.login }}</button>
@@ -50,7 +50,6 @@
 
 <script lang="ts">
 import { defineComponent, defineAsyncComponent } from 'vue';
-import { } from '@fortawesome/free-solid-svg-icons';
 import { host, instanceName } from '@client/config';
 import { search } from '@client/scripts/search';
 import * as os from '@client/os';
diff --git a/src/client/ui/visitor/header.vue b/src/client/ui/visitor/header.vue
index 42598ce1c0..1effadf4f7 100644
--- a/src/client/ui/visitor/header.vue
+++ b/src/client/ui/visitor/header.vue
@@ -2,21 +2,21 @@
 <div class="sqxihjet">
 	<div class="wide" v-if="narrow === false">
 		<div class="content">
-			<MkA to="/" class="link" active-class="active"><Fa :icon="faHome" class="icon"/>{{ $ts.home }}</MkA>
-			<MkA to="/explore" class="link" active-class="active"><Fa :icon="faHashtag" class="icon"/>{{ $ts.explore }}</MkA>
-			<MkA to="/featured" class="link" active-class="active"><Fa :icon="faFireAlt" class="icon"/>{{ $ts.featured }}</MkA>
-			<MkA to="/channels" class="link" active-class="active"><Fa :icon="faSatelliteDish" class="icon"/>{{ $ts.channel }}</MkA>
+			<MkA to="/" class="link" active-class="active"><i class="fas fa-home icon"></i>{{ $ts.home }}</MkA>
+			<MkA to="/explore" class="link" active-class="active"><i class="fas fa-hashtag icon"></i>{{ $ts.explore }}</MkA>
+			<MkA to="/featured" class="link" active-class="active"><i class="fas fa-fire-alt icon"></i>{{ $ts.featured }}</MkA>
+			<MkA to="/channels" class="link" active-class="active"><i class="fas fa-satellite-dish icon"></i>{{ $ts.channel }}</MkA>
 			<div class="page active link" v-if="info">
 				<div class="title">
-					<Fa v-if="info.icon" :icon="info.icon" :key="info.icon" class="icon"/>
+					<i v-if="info.icon" class="icon" :class="info.icon"></i>
 					<MkAvatar v-else-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true" :show-indicator="true"/>
 					<span v-if="info.title" class="text">{{ info.title }}</span>
 					<MkUserName v-else-if="info.userName" :user="info.userName" :nowrap="false" class="text"/>
 				</div>
-				<button class="_button action" v-if="info.action" @click.stop="info.action.handler"><Fa :icon="info.action.icon" :key="info.action.icon"/></button>
+				<button class="_button action" v-if="info.action" @click.stop="info.action.handler"><!-- TODO --></button>
 			</div>
 			<div class="right">
-				<button class="_button search" @click="search()"><Fa :icon="faSearch" class="icon"/><span>{{ $ts.search }}</span></button>
+				<button class="_button search" @click="search()"><i class="fas fa-search icon"></i><span>{{ $ts.search }}</span></button>
 				<button class="_buttonPrimary signup" @click="signup()">{{ $ts.signup }}</button>
 				<button class="_button login" @click="signin()">{{ $ts.login }}</button>
 			</div>
@@ -24,16 +24,16 @@
 	</div>
 	<div class="narrow" v-else-if="narrow === true">
 		<button class="menu _button" @click="$parent.showMenu = true">
-			<Fa :icon="faBars" class="icon"/>
+			<i class="fas fa-bars icon"></i>
 		</button>
 		<div class="title" v-if="info">
-			<Fa v-if="info.icon" :icon="info.icon" :key="info.icon" class="icon"/>
+			<i v-if="info.icon" class="icon" :class="info.icon"></i>
 			<MkAvatar v-else-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true" :show-indicator="true"/>
 			<span v-if="info.title" class="text">{{ info.title }}</span>
 			<MkUserName v-else-if="info.userName" :user="info.userName" :nowrap="false" class="text"/>
 		</div>
 		<button class="action _button" v-if="info && info.action" @click.stop="info.action.handler">
-			<Fa :icon="info.action.icon" :key="info.action.icon" class="icon"/>
+			<!-- TODO -->
 		</button>
 	</div>
 </div>
@@ -41,7 +41,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faSearch, faHome, faFireAlt, faHashtag, faSatelliteDish, faBars } from '@fortawesome/free-solid-svg-icons';
 import XSigninDialog from '@client/components/signin-dialog.vue';
 import XSignupDialog from '@client/components/signup-dialog.vue';
 import * as os from '@client/os';
@@ -58,7 +57,6 @@ export default defineComponent({
 		return {
 			narrow: null,
 			showMenu: false,
-			faSearch, faHome, faFireAlt, faHashtag, faSatelliteDish, faBars,
 		};
 	},
 
diff --git a/src/client/ui/visitor/kanban.vue b/src/client/ui/visitor/kanban.vue
index 2ed8cf4bc0..ffa7a3d1ff 100644
--- a/src/client/ui/visitor/kanban.vue
+++ b/src/client/ui/visitor/kanban.vue
@@ -38,7 +38,6 @@
 
 <script lang="ts">
 import { defineComponent, defineAsyncComponent } from 'vue';
-import { } from '@fortawesome/free-solid-svg-icons';
 import { host, instanceName } from '@client/config';
 import * as os from '@client/os';
 import MkPagination from '@client/components/ui/pagination.vue';
diff --git a/src/client/ui/zen.vue b/src/client/ui/zen.vue
index af3e53225e..6e7382b0d3 100644
--- a/src/client/ui/zen.vue
+++ b/src/client/ui/zen.vue
@@ -23,8 +23,6 @@
 
 <script lang="ts">
 import { defineComponent, defineAsyncComponent } from 'vue';
-import { faLayerGroup, faBars, faHome, faCircle } from '@fortawesome/free-solid-svg-icons';
-import { faBell } from '@fortawesome/free-regular-svg-icons';
 import { host } from '@client/config';
 import XHeader from './_common_/header.vue';
 import XCommon from './_common_/common.vue';
@@ -40,7 +38,6 @@ export default defineComponent({
 		return {
 			host: host,
 			pageInfo: null,
-			faLayerGroup, faBars, faBell, faHome, faCircle,
 		};
 	},
 
diff --git a/src/client/widgets/activity.vue b/src/client/widgets/activity.vue
index 9623765e40..cc8d4debd0 100644
--- a/src/client/widgets/activity.vue
+++ b/src/client/widgets/activity.vue
@@ -1,7 +1,7 @@
 <template>
 <MkContainer :show-header="props.showHeader" :naked="props.transparent">
-	<template #header><Fa :icon="faChartBar"/>{{ $ts._widgets.activity }}</template>
-	<template #func><button @click="toggleView()" class="_button"><Fa :icon="faSort"/></button></template>
+	<template #header><i class="fas fa-chart-bar"></i>{{ $ts._widgets.activity }}</template>
+	<template #func><button @click="toggleView()" class="_button"><i class="fas fa-sort"></i></button></template>
 
 	<div>
 		<MkLoading v-if="fetching"/>
@@ -15,7 +15,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faChartBar, faSort } from '@fortawesome/free-solid-svg-icons';
 import MkContainer from '@client/components/ui/container.vue';
 import define from './define';
 import XCalendar from './activity.calendar.vue';
@@ -52,7 +51,6 @@ export default defineComponent({
 		return {
 			fetching: true,
 			activity: null,
-			faChartBar, faSort
 		};
 	},
 	mounted() {
diff --git a/src/client/widgets/aiscript.vue b/src/client/widgets/aiscript.vue
index f24e033593..2ea6d09ff5 100644
--- a/src/client/widgets/aiscript.vue
+++ b/src/client/widgets/aiscript.vue
@@ -1,6 +1,6 @@
 <template>
 <MkContainer :show-header="props.showHeader">
-	<template #header><Fa :icon="faTerminal"/>{{ $ts._widgets.aiscript }}</template>
+	<template #header><i class="fas fa-terminal"></i>{{ $ts._widgets.aiscript }}</template>
 
 	<div class="uylguesu _monospace">
 		<textarea v-model="props.script" placeholder="(1 + 1)"></textarea>
@@ -14,7 +14,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faTerminal } from '@fortawesome/free-solid-svg-icons';
 import MkContainer from '@client/components/ui/container.vue';
 import define from './define';
 import * as os from '@client/os';
@@ -46,7 +45,6 @@ export default defineComponent({
 	data() {
 		return {
 			logs: [],
-			faTerminal
 		};
 	},
 
diff --git a/src/client/widgets/federation.vue b/src/client/widgets/federation.vue
index eb17915f08..3f2e1e691d 100644
--- a/src/client/widgets/federation.vue
+++ b/src/client/widgets/federation.vue
@@ -1,6 +1,6 @@
 <template>
 <MkContainer :show-header="props.showHeader" :foldable="foldable" :scrollable="scrollable">
-	<template #header><Fa :icon="faGlobe"/>{{ $ts._widgets.federation }}</template>
+	<template #header><i class="fas fa-globe"></i>{{ $ts._widgets.federation }}</template>
 
 	<div class="wbrkwalb">
 		<MkLoading v-if="fetching"/>
@@ -20,7 +20,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faGlobe } from '@fortawesome/free-solid-svg-icons';
 import MkContainer from '@client/components/ui/container.vue';
 import define from './define';
 import MkMiniChart from '@client/components/mini-chart.vue';
@@ -58,7 +57,6 @@ export default defineComponent({
 			instances: [],
 			charts: [],
 			fetching: true,
-			faGlobe
 		};
 	},
 	mounted() {
diff --git a/src/client/widgets/job-queue.vue b/src/client/widgets/job-queue.vue
index 007fd412c8..31a322e6e2 100644
--- a/src/client/widgets/job-queue.vue
+++ b/src/client/widgets/job-queue.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="mkw-jobQueue _monospace" :class="{ _panel: !props.transparent }">
 	<div class="inbox">
-		<div class="label">Inbox queue<Fa :icon="faExclamationTriangle" v-if="inbox.waiting > 0" class="icon"/></div>
+		<div class="label">Inbox queue<i v-if="inbox.waiting > 0" class="fas fa-exclamation-triangle icon"></i></div>
 		<div class="values">
 			<div>
 				<div>Process</div>
@@ -22,7 +22,7 @@
 		</div>
 	</div>
 	<div class="deliver">
-		<div class="label">Deliver queue<Fa :icon="faExclamationTriangle" v-if="deliver.waiting > 0" class="icon"/></div>
+		<div class="label">Deliver queue<i v-if="deliver.waiting > 0" class="fas fa-exclamation-triangle icon"></i></div>
 		<div class="values">
 			<div>
 				<div>Process</div>
@@ -47,7 +47,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
 import define from './define';
 import * as os from '@client/os';
 import number from '@client/filters/number';
@@ -80,7 +79,6 @@ export default defineComponent({
 				delayed: 0,
 			},
 			prev: {},
-			faExclamationTriangle,
 		};
 	},
 	created() {
diff --git a/src/client/widgets/memo.vue b/src/client/widgets/memo.vue
index c3ab2934a8..13ab628f24 100644
--- a/src/client/widgets/memo.vue
+++ b/src/client/widgets/memo.vue
@@ -1,6 +1,6 @@
 <template>
 <MkContainer :show-header="props.showHeader">
-	<template #header><Fa :icon="faStickyNote"/>{{ $ts._widgets.memo }}</template>
+	<template #header><i class="fas fa-sticky-note"></i>{{ $ts._widgets.memo }}</template>
 
 	<div class="otgbylcu">
 		<textarea v-model="text" :placeholder="$ts.placeholder" @input="onChange"></textarea>
@@ -11,7 +11,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faStickyNote } from '@fortawesome/free-solid-svg-icons';
 import MkContainer from '@client/components/ui/container.vue';
 import define from './define';
 import * as os from '@client/os';
@@ -37,7 +36,6 @@ export default defineComponent({
 			text: null,
 			changed: false,
 			timeoutId: null,
-			faStickyNote
 		};
 	},
 
diff --git a/src/client/widgets/notifications.vue b/src/client/widgets/notifications.vue
index 046556ef1c..01c76850d8 100644
--- a/src/client/widgets/notifications.vue
+++ b/src/client/widgets/notifications.vue
@@ -1,7 +1,7 @@
 <template>
 <MkContainer :style="`height: ${props.height}px;`" :show-header="props.showHeader" :scrollable="true">
-	<template #header><Fa :icon="faBell"/>{{ $ts.notifications }}</template>
-	<template #func><button @click="configure()" class="_button"><Fa :icon="faCog"/></button></template>
+	<template #header><i class="fas fa-bell"></i>{{ $ts.notifications }}</template>
+	<template #func><button @click="configure()" class="_button"><i class="fas fa-cog"></i></button></template>
 
 	<div class="_flat_">
 		<XNotifications :include-types="props.includingTypes"/>
@@ -11,7 +11,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faBell, faCog } from '@fortawesome/free-solid-svg-icons';
 import MkContainer from '@client/components/ui/container.vue';
 import XNotifications from '@client/components/notifications.vue';
 import define from './define';
@@ -46,7 +45,6 @@ export default defineComponent({
 
 	data() {
 		return {
-			faBell, faCog
 		};
 	},
 
diff --git a/src/client/widgets/photos.vue b/src/client/widgets/photos.vue
index f1041b4ec2..65843385b6 100644
--- a/src/client/widgets/photos.vue
+++ b/src/client/widgets/photos.vue
@@ -1,6 +1,6 @@
 <template>
 <MkContainer :show-header="props.showHeader" :naked="props.transparent" :class="$style.root" :data-transparent="props.transparent ? true : null">
-	<template #header><Fa :icon="faCamera"/>{{ $ts._widgets.photos }}</template>
+	<template #header><i class="fas fa-camera"></i>{{ $ts._widgets.photos }}</template>
 
 	<div class="">
 		<MkLoading v-if="fetching"/>
@@ -16,7 +16,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faCamera } from '@fortawesome/free-solid-svg-icons';
 import MkContainer from '@client/components/ui/container.vue';
 import define from './define';
 import { getStaticImageUrl } from '@client/scripts/get-static-image-url';
@@ -46,7 +45,6 @@ export default defineComponent({
 			images: [],
 			fetching: true,
 			connection: null,
-			faCamera
 		};
 	},
 	mounted() {
diff --git a/src/client/widgets/rss.vue b/src/client/widgets/rss.vue
index 78ad390d27..6d19a86dff 100644
--- a/src/client/widgets/rss.vue
+++ b/src/client/widgets/rss.vue
@@ -1,7 +1,7 @@
 <template>
 <MkContainer :show-header="props.showHeader">
-	<template #header><Fa :icon="faRssSquare"/>RSS</template>
-	<template #func><button class="_button" @click="setting"><Fa :icon="faCog"/></button></template>
+	<template #header><i class="fas fa-rss-square"></i>RSS</template>
+	<template #func><button class="_button" @click="setting"><i class="fas fa-cog"></i></button></template>
 
 	<div class="ekmkgxbj">
 		<MkLoading v-if="fetching"/>
@@ -14,7 +14,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faRssSquare, faCog } from '@fortawesome/free-solid-svg-icons';
 import MkContainer from '@client/components/ui/container.vue';
 import define from './define';
 import * as os from '@client/os';
@@ -43,7 +42,6 @@ export default defineComponent({
 			items: [],
 			fetching: true,
 			clock: null,
-			faRssSquare, faCog
 		};
 	},
 	mounted() {
diff --git a/src/client/widgets/server-metric/cpu.vue b/src/client/widgets/server-metric/cpu.vue
index f1574522c2..4478ee3065 100644
--- a/src/client/widgets/server-metric/cpu.vue
+++ b/src/client/widgets/server-metric/cpu.vue
@@ -2,7 +2,7 @@
 <div class="vrvdvrys">
 	<XPie class="pie" :value="usage"/>
 	<div>
-		<p><fa :icon="faMicrochip"/>CPU</p>
+		<p><i class="fas fa-microchip"></i>CPU</p>
 		<p>{{ meta.cpu.cores }} Logical cores</p>
 		<p>{{ meta.cpu.model }}</p>
 	</div>
@@ -11,7 +11,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faMicrochip } from '@fortawesome/free-solid-svg-icons';
 import XPie from './pie.vue';
 
 export default defineComponent({
@@ -29,7 +28,6 @@ export default defineComponent({
 	data() {
 		return {
 			usage: 0,
-			faMicrochip,
 		};
 	},
 	mounted() {
@@ -68,7 +66,7 @@ export default defineComponent({
 				font-weight: bold;
 				margin-bottom: 4px;
 
-				> [data-icon] {
+				> i {
 					margin-right: 4px;
 				}
 			}
diff --git a/src/client/widgets/server-metric/disk.vue b/src/client/widgets/server-metric/disk.vue
index fa5933e7b9..a3f5d0376b 100644
--- a/src/client/widgets/server-metric/disk.vue
+++ b/src/client/widgets/server-metric/disk.vue
@@ -2,7 +2,7 @@
 <div class="zbwaqsat">
 	<XPie class="pie" :value="usage"/>
 	<div>
-		<p><fa :icon="faHdd"/>Disk</p>
+		<p><i class="fas fa-hdd"></i>Disk</p>
 		<p>Total: {{ bytes(total, 1) }}</p>
 		<p>Free: {{ bytes(available, 1) }}</p>
 		<p>Used: {{ bytes(used, 1) }}</p>
@@ -12,7 +12,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faHdd } from '@fortawesome/free-solid-svg-icons';
 import XPie from './pie.vue';
 import bytes from '@client/filters/bytes';
 
@@ -31,7 +30,6 @@ export default defineComponent({
 			total: this.meta.fs.total,
 			used: this.meta.fs.used,
 			available: this.meta.fs.total - this.meta.fs.used,
-			faHdd,
 		};
 	},
 	methods: {
@@ -62,7 +60,7 @@ export default defineComponent({
 				font-weight: bold;
 				margin-bottom: 4px;
 
-				> [data-icon] {
+				> i {
 					margin-right: 4px;
 				}
 			}
diff --git a/src/client/widgets/server-metric/index.vue b/src/client/widgets/server-metric/index.vue
index 7f2aea6b49..6331b5bdf1 100644
--- a/src/client/widgets/server-metric/index.vue
+++ b/src/client/widgets/server-metric/index.vue
@@ -1,7 +1,7 @@
 <template>
 <MkContainer :show-header="props.showHeader" :naked="props.transparent">
-	<template #header><Fa :icon="faServer"/>{{ $ts._widgets.serverMetric }}</template>
-	<template #func><button @click="toggleView()" class="_button"><Fa :icon="faSort"/></button></template>
+	<template #header><i class="fas fa-server"></i>{{ $ts._widgets.serverMetric }}</template>
+	<template #func><button @click="toggleView()" class="_button"><i class="fas fa-sort"></i></button></template>
 
 	<div class="mkw-serverMetric" v-if="meta">
 		<XCpuMemory v-if="props.view === 0" :connection="connection" :meta="meta"/>
@@ -15,7 +15,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faServer, faSort } from '@fortawesome/free-solid-svg-icons';
 import define from '../define';
 import MkContainer from '@client/components/ui/container.vue';
 import XCpuMemory from './cpu-mem.vue';
@@ -58,7 +57,6 @@ export default defineComponent({
 		return {
 			meta: null,
 			connection: null,
-			faServer, faSort,
 		};
 	},
 	created() {
diff --git a/src/client/widgets/server-metric/mem.vue b/src/client/widgets/server-metric/mem.vue
index 89fa8fef43..92c0aa0c77 100644
--- a/src/client/widgets/server-metric/mem.vue
+++ b/src/client/widgets/server-metric/mem.vue
@@ -2,7 +2,7 @@
 <div class="zlxnikvl">
 	<XPie class="pie" :value="usage"/>
 	<div>
-		<p><fa :icon="faMemory"/>RAM</p>
+		<p><i class="fas fa-memory"></i>RAM</p>
 		<p>Total: {{ bytes(total, 1) }}</p>
 		<p>Used: {{ bytes(used, 1) }}</p>
 		<p>Free: {{ bytes(free, 1) }}</p>
@@ -12,7 +12,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faMemory } from '@fortawesome/free-solid-svg-icons';
 import XPie from './pie.vue';
 import bytes from '@client/filters/bytes';
 
@@ -34,7 +33,6 @@ export default defineComponent({
 			total: 0,
 			used: 0,
 			free: 0,
-			faMemory,
 		};
 	},
 	mounted() {
@@ -77,7 +75,7 @@ export default defineComponent({
 				font-weight: bold;
 				margin-bottom: 4px;
 
-				> [data-icon] {
+				> i {
 					margin-right: 4px;
 				}
 			}
diff --git a/src/client/widgets/slideshow.vue b/src/client/widgets/slideshow.vue
index 69c5cc01b2..2f079e0d42 100644
--- a/src/client/widgets/slideshow.vue
+++ b/src/client/widgets/slideshow.vue
@@ -14,7 +14,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import {  } from '@fortawesome/free-solid-svg-icons';
 import define from './define';
 import * as os from '@client/os';
 
diff --git a/src/client/widgets/timeline.vue b/src/client/widgets/timeline.vue
index f1ddc9cb80..8548574afc 100644
--- a/src/client/widgets/timeline.vue
+++ b/src/client/widgets/timeline.vue
@@ -2,14 +2,14 @@
 <MkContainer :show-header="props.showHeader" :style="`height: ${props.height}px;`" :scrollable="true">
 	<template #header>
 		<button @click="choose" class="_button">
-			<Fa v-if="props.src === 'home'" :icon="faHome"/>
-			<Fa v-if="props.src === 'local'" :icon="faComments"/>
-			<Fa v-if="props.src === 'social'" :icon="faShareAlt"/>
-			<Fa v-if="props.src === 'global'" :icon="faGlobe"/>
-			<Fa v-if="props.src === 'list'" :icon="faListUl"/>
-			<Fa v-if="props.src === 'antenna'" :icon="faSatellite"/>
+			<i v-if="props.src === 'home'" class="fas fa-home"></i>
+			<i v-else-if="props.src === 'local'" class="fas fa-comments"></i>
+			<i v-else-if="props.src === 'social'" class="fas fa-share-alt"></i>
+			<i v-else-if="props.src === 'global'" class="fas fa-globe"></i>
+			<i v-else-if="props.src === 'list'" class="fas fa-list-ul"></i>
+			<i v-else-if="props.src === 'antenna'" class="fas fa-satellite"></i>
 			<span style="margin-left: 8px;">{{ props.src === 'list' ? props.list.name : props.src === 'antenna' ? props.antenna.name : $t('_timelines.' + props.src) }}</span>
-			<Fa :icon="menuOpened ? faAngleUp : faAngleDown" style="margin-left: 8px;"/>
+			<i :class="menuOpened ? 'fas fa-angle-up' : 'fas fa-angle-down'" style="margin-left: 8px;"></i>
 		</button>
 	</template>
 
@@ -21,8 +21,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faAngleDown, faAngleUp, faHome, faShareAlt, faGlobe, faListUl, faSatellite } from '@fortawesome/free-solid-svg-icons';
-import { faComments } from '@fortawesome/free-regular-svg-icons';
 import MkContainer from '@client/components/ui/container.vue';
 import XTimeline from '@client/components/timeline.vue';
 import define from './define';
@@ -62,7 +60,6 @@ export default defineComponent({
 	data() {
 		return {
 			menuOpened: false,
-			faAngleDown, faAngleUp, faHome, faShareAlt, faGlobe, faComments, faListUl, faSatellite
 		};
 	},
 
@@ -75,7 +72,7 @@ export default defineComponent({
 			]);
 			const antennaItems = antennas.map(antenna => ({
 				text: antenna.name,
-				icon: faSatellite,
+				icon: 'fas fa-satellite',
 				action: () => {
 					this.props.antenna = antenna;
 					this.setSrc('antenna');
@@ -83,7 +80,7 @@ export default defineComponent({
 			}));
 			const listItems = lists.map(list => ({
 				text: list.name,
-				icon: faListUl,
+				icon: 'fas fa-list-ul',
 				action: () => {
 					this.props.list = list;
 					this.setSrc('list');
@@ -91,19 +88,19 @@ export default defineComponent({
 			}));
 			os.modalMenu([{
 				text: this.$ts._timelines.home,
-				icon: faHome,
+				icon: 'fas fa-home',
 				action: () => { this.setSrc('home') }
 			}, {
 				text: this.$ts._timelines.local,
-				icon: faComments,
+				icon: 'fas fa-comments',
 				action: () => { this.setSrc('local') }
 			}, {
 				text: this.$ts._timelines.social,
-				icon: faShareAlt,
+				icon: 'fas fa-share-alt',
 				action: () => { this.setSrc('social') }
 			}, {
 				text: this.$ts._timelines.global,
-				icon: faGlobe,
+				icon: 'fas fa-globe',
 				action: () => { this.setSrc('global') }
 			}, antennaItems.length > 0 ? null : undefined, ...antennaItems, listItems.length > 0 ? null : undefined, ...listItems], ev.currentTarget || ev.target).then(() => {
 				this.menuOpened = false;
diff --git a/src/client/widgets/trends.vue b/src/client/widgets/trends.vue
index cd7202f1f8..8511bc718f 100644
--- a/src/client/widgets/trends.vue
+++ b/src/client/widgets/trends.vue
@@ -1,6 +1,6 @@
 <template>
 <MkContainer :show-header="props.showHeader">
-	<template #header><Fa :icon="faHashtag"/>{{ $ts._widgets.trends }}</template>
+	<template #header><i class="fas fa-hashtag"></i>{{ $ts._widgets.trends }}</template>
 
 	<div class="wbrkwala">
 		<MkLoading v-if="fetching"/>
@@ -19,7 +19,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faHashtag } from '@fortawesome/free-solid-svg-icons';
 import MkContainer from '@client/components/ui/container.vue';
 import define from './define';
 import MkMiniChart from '@client/components/mini-chart.vue';
@@ -44,7 +43,6 @@ export default defineComponent({
 		return {
 			stats: [],
 			fetching: true,
-			faHashtag
 		};
 	},
 	mounted() {
diff --git a/src/server/web/views/base.pug b/src/server/web/views/base.pug
index 22d5fd0c67..4aed19763c 100644
--- a/src/server/web/views/base.pug
+++ b/src/server/web/views/base.pug
@@ -22,6 +22,8 @@ html
 		link(rel='prefetch' href='https://xn--931a.moe/assets/info.jpg')
 		link(rel='prefetch' href='https://xn--931a.moe/assets/not-found.jpg')
 		link(rel='prefetch' href='https://xn--931a.moe/assets/error.jpg')
+		link(rel='preload' href='https://use.fontawesome.com/releases/v5.15.3/css/all.css' as='style')
+		link(rel='stylesheet' href='https://use.fontawesome.com/releases/v5.15.3/css/all.css')
 
 		title
 			block title
diff --git a/yarn.lock b/yarn.lock
index ac5b283498..0efe32eff4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -227,44 +227,6 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
-"@fortawesome/fontawesome-common-types@^0.2.35":
-  version "0.2.35"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.35.tgz#01dd3d054da07a00b764d78748df20daf2b317e9"
-  integrity sha512-IHUfxSEDS9dDGqYwIW7wTN6tn/O8E0n5PcAHz9cAaBoZw6UpG20IG/YM3NNLaGPwPqgjBAFjIURzqoQs3rrtuw==
-
-"@fortawesome/fontawesome-svg-core@1.2.35":
-  version "1.2.35"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.35.tgz#85aea8c25645fcec88d35f2eb1045c38d3e65cff"
-  integrity sha512-uLEXifXIL7hnh2sNZQrIJWNol7cTVIzwI+4qcBIq9QWaZqUblm0IDrtSqbNg+3SQf8SMGHkiSigD++rHmCHjBg==
-  dependencies:
-    "@fortawesome/fontawesome-common-types" "^0.2.35"
-
-"@fortawesome/free-brands-svg-icons@5.15.3":
-  version "5.15.3"
-  resolved "https://registry.yarnpkg.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.15.3.tgz#bec2821d23b9c667be1d192a6c5bfb2667e588eb"
-  integrity sha512-1hirPcbjj72ZJtFvdnXGPbAbpn3Ox6mH3g5STbANFp3vGSiE5u5ingAKV06mK6ZVqNYxUPlh4DlTnaIvLtF2kw==
-  dependencies:
-    "@fortawesome/fontawesome-common-types" "^0.2.35"
-
-"@fortawesome/free-regular-svg-icons@5.15.3":
-  version "5.15.3"
-  resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.15.3.tgz#1ec4f2410ff638db549c5c5484fc60b66407dbe6"
-  integrity sha512-q4/p8Xehy9qiVTdDWHL4Z+o5PCLRChePGZRTXkl+/Z7erDVL8VcZUuqzJjs6gUz6czss4VIPBRdCz6wP37/zMQ==
-  dependencies:
-    "@fortawesome/fontawesome-common-types" "^0.2.35"
-
-"@fortawesome/free-solid-svg-icons@5.15.3":
-  version "5.15.3"
-  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.3.tgz#52eebe354f60dc77e0bde934ffc5c75ffd04f9d8"
-  integrity sha512-XPeeu1IlGYqz4VWGRAT5ukNMd4VHUEEJ7ysZ7pSSgaEtNvSo+FLurybGJVmiqkQdK50OkSja2bfZXOeyMGRD8Q==
-  dependencies:
-    "@fortawesome/fontawesome-common-types" "^0.2.35"
-
-"@fortawesome/vue-fontawesome@3.0.0-3":
-  version "3.0.0-3"
-  resolved "https://registry.yarnpkg.com/@fortawesome/vue-fontawesome/-/vue-fontawesome-3.0.0-3.tgz#b658a7c1f35d4eb04ac85749da693be483442b25"
-  integrity sha512-fCM7+R9M7Y/ipKC5n9hukGpJHhe53JOENGqtku/KWtpXsnbGik3AS5zfJYEupV2uXOw/5S0RSSfttQ2hNIrmFA==
-
 "@jfonx/console-utils@^1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@jfonx/console-utils/-/console-utils-1.0.3.tgz#cbb7f911e4191a4a2fe1ba4807d29f100b5d099f"
@@ -6695,10 +6657,10 @@ methods@^1.1.2:
   resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
   integrity sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=
 
-mfm-js@0.16.0:
-  version "0.16.0"
-  resolved "https://registry.yarnpkg.com/mfm-js/-/mfm-js-0.16.0.tgz#71852124eba5564f8a94cd7476a4eaa4ddeed1cd"
-  integrity sha512-z33e1yPj9dLN+DjDHakhslvGhCnzTxsUNpodyFw3nemO6gnKOE1adUrm49jjB2boQxtBExKhH7FERMCsNFcpBQ==
+mfm-js@0.16.2:
+  version "0.16.2"
+  resolved "https://registry.yarnpkg.com/mfm-js/-/mfm-js-0.16.2.tgz#6dfa44a9b6ac0fd9d55d6f8c21eaa60c75bcd9fa"
+  integrity sha512-Ah/XTPsg88il3kRwXxY6QqlNGkc9ToWWFhW9BGBk6V6T108iLjS30pd79WL02Nd1tw1Jl/JduJMgpb5QzCE45w==
   dependencies:
     twemoji-parser "13.0.x"
 

From a5bbb6732d8ec03e3e9ae560f0dcc1a31155330c Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 20 Apr 2021 23:26:17 +0900
Subject: [PATCH 29/34] Update Misskey description

---
 src/server/web/views/base.pug | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/server/web/views/base.pug b/src/server/web/views/base.pug
index 4aed19763c..328069c473 100644
--- a/src/server/web/views/base.pug
+++ b/src/server/web/views/base.pug
@@ -30,7 +30,7 @@ html
 				= title || 'Misskey'
 
 		block desc
-			meta(name='description' content= desc || '✨🌎✨ A federated blogging platform ✨🚀✨')
+			meta(name='description' content= desc || '✨🌎✨ A interplanetary communication platform ✨🚀✨')
 
 		block meta
 

From 03101f001c162fdbe8ffc20f7edcc11a641297aa Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Wed, 21 Apr 2021 03:17:51 +0900
Subject: [PATCH 30/34] chore

---
 src/server/web/views/base.pug | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/server/web/views/base.pug b/src/server/web/views/base.pug
index 328069c473..8992f96db9 100644
--- a/src/server/web/views/base.pug
+++ b/src/server/web/views/base.pug
@@ -2,9 +2,11 @@ block vars
 
 doctype html
 
-!= '\n<!-- Thank you for using Misskey! -->\n'
-!= '\n<!-- If you are reading this message... how about joining the development of Misskey? -->\n'
-!= '\n<!-- https://github.com/misskey-dev/misskey -->\n'
+!= '\n'
+!= '<!-- Thank you for using Misskey! -->\n'
+!= '<!-- If you are reading this message... how about joining the development of Misskey? -->\n'
+!= '<!-- https://github.com/misskey-dev/misskey -->'
+!= '\n'
 
 html
 

From 878b154604c5360fde994d61d67cc6240fcd3de4 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Wed, 21 Apr 2021 03:24:53 +0900
Subject: [PATCH 31/34] =?UTF-8?q?nodejs=20v16=E3=81=A7=E5=8B=95=E3=81=8F?=
 =?UTF-8?q?=E3=82=88=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json      | 1 -
 webpack.config.ts | 4 ++--
 yarn.lock         | 7 -------
 3 files changed, 2 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index 7e8b47d7f7..2b1477a236 100644
--- a/package.json
+++ b/package.json
@@ -135,7 +135,6 @@
 		"eslint-plugin-vue": "7.9.0",
 		"eventemitter3": "4.0.7",
 		"feed": "4.2.2",
-		"fibers": "5.0.0",
 		"file-type": "16.3.0",
 		"fluent-ffmpeg": "2.1.2",
 		"glob": "7.1.6",
diff --git a/webpack.config.ts b/webpack.config.ts
index 9f2a3a89af..296813caa0 100644
--- a/webpack.config.ts
+++ b/webpack.config.ts
@@ -70,7 +70,7 @@ module.exports = {
 					options: {
 						implementation: require('sass'),
 						sassOptions: {
-							fiber: require('fibers')
+							fiber: false
 						}
 					}
 				}]
@@ -88,7 +88,7 @@ module.exports = {
 					options: {
 						implementation: require('sass'),
 						sassOptions: {
-							fiber: require('fibers')
+							fiber: false
 						}
 					}
 				}]
diff --git a/yarn.lock b/yarn.lock
index 0efe32eff4..8d17fc1bc2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4288,13 +4288,6 @@ feed@4.2.2:
   dependencies:
     xml-js "^1.6.11"
 
-fibers@5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/fibers/-/fibers-5.0.0.tgz#3a60e0695b3ee5f6db94e62726716fa7a59acc41"
-  integrity sha512-UpGv/YAZp7mhKHxDvC1tColrroGRX90sSvh8RMZV9leo+e5+EkRVgCEZPlmXeo3BUNQTZxUaVdLskq1Q2FyCPg==
-  dependencies:
-    detect-libc "^1.0.3"
-
 figlet@^1.1.1:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/figlet/-/figlet-1.3.0.tgz#c49e3d92907ba13bebadc7124f76ba71f1f32ef0"

From 83a53c100855bc7810ef84fc3983c40ef67b0be0 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Wed, 21 Apr 2021 03:32:16 +0900
Subject: [PATCH 32/34] fix bug

---
 src/client/pages/clip.vue                     | 2 +-
 src/client/pages/messaging/messaging-room.vue | 4 ++--
 src/client/pages/settings/other.vue           | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/client/pages/clip.vue b/src/client/pages/clip.vue
index 050bd4c979..8777975557 100644
--- a/src/client/pages/clip.vue
+++ b/src/client/pages/clip.vue
@@ -41,7 +41,7 @@ export default defineComponent({
 				title: this.clip.name,
 				icon: 'fas fa-paperclip',
 				action: {
-					icon: 'fas fa-ellipsis'H,
+					icon: 'fas fa-ellipsis-h',
 					handler: this.menu
 				}
 			} : null),
diff --git a/src/client/pages/messaging/messaging-room.vue b/src/client/pages/messaging/messaging-room.vue
index 1b49216322..44bfd6c51d 100644
--- a/src/client/pages/messaging/messaging-room.vue
+++ b/src/client/pages/messaging/messaging-room.vue
@@ -73,14 +73,14 @@ const Component = defineComponent({
 				userName: this.user,
 				avatar: this.user,
 				action: {
-					icon: 'fas fa-ellipsis'H,
+					icon: 'fas fa-ellipsis-h',
 					handler: this.menu,
 				},
 			} : {
 				title: this.group.name,
 				icon: 'fas fa-users',
 				action: {
-					icon: 'fas fa-ellipsis'H,
+					icon: 'fas fa-ellipsis-h',
 					handler: this.menu,
 				},
 			} : null),
diff --git a/src/client/pages/settings/other.vue b/src/client/pages/settings/other.vue
index 7aa6b37725..f73ff9cb21 100644
--- a/src/client/pages/settings/other.vue
+++ b/src/client/pages/settings/other.vue
@@ -61,7 +61,7 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.other,
-				icon: 'fas fa-ellipsis'H
+				icon: 'fas fa-ellipsis-h'
 			},
 			debug,
 		}

From ec7242576ea023ff6c6acd9945f1cce182e7549c Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Wed, 21 Apr 2021 03:33:13 +0900
Subject: [PATCH 33/34] 12.78.0-beta.2

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 2b1477a236..26aacae492 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "misskey",
 	"author": "syuilo <syuilotan@yahoo.co.jp>",
-	"version": "12.78.0-beta.1",
+	"version": "12.78.0-beta.2",
 	"codename": "indigo",
 	"repository": {
 		"type": "git",

From ec75600e1c79aca18b8214c8fca62f70f6c13014 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Wed, 21 Apr 2021 12:06:02 +0900
Subject: [PATCH 34/34] fix style

---
 .../pages/instance/emoji-edit-dialog.vue      | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/client/pages/instance/emoji-edit-dialog.vue b/src/client/pages/instance/emoji-edit-dialog.vue
index 9ab53c42af..f7a3671584 100644
--- a/src/client/pages/instance/emoji-edit-dialog.vue
+++ b/src/client/pages/instance/emoji-edit-dialog.vue
@@ -8,15 +8,17 @@
 >
 	<template #header>:{{ emoji.name }}:</template>
 
-	<div class="yigymqpb _section">
-		<img :src="emoji.url" class="img"/>
-		<MkInput v-model:value="name"><span>{{ $ts.name }}</span></MkInput>
-		<MkInput v-model:value="category" :datalist="categories"><span>{{ $ts.category }}</span></MkInput>
-		<MkInput v-model:value="aliases">
-			<span>{{ $ts.tags }}</span>
-			<template #desc>{{ $ts.setMultipleBySeparatingWithSpace }}</template>
-		</MkInput>
-		<MkButton danger @click="del()"><i class="fas fa-trash-alt"></i> {{ $ts.delete }}</MkButton>
+	<div class="_monolithic_">
+		<div class="yigymqpb _section">
+			<img :src="emoji.url" class="img"/>
+			<MkInput v-model:value="name"><span>{{ $ts.name }}</span></MkInput>
+			<MkInput v-model:value="category" :datalist="categories"><span>{{ $ts.category }}</span></MkInput>
+			<MkInput v-model:value="aliases">
+				<span>{{ $ts.tags }}</span>
+				<template #desc>{{ $ts.setMultipleBySeparatingWithSpace }}</template>
+			</MkInput>
+			<MkButton danger @click="del()"><i class="fas fa-trash-alt"></i> {{ $ts.delete }}</MkButton>
+		</div>
 	</div>
 </XModalWindow>
 </template>