diff --git a/Dockerfile b/Dockerfile
index 7b159efe09..9eb69e2302 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -12,6 +12,7 @@ RUN apk add --no-cache \
     autoconf \
     automake \
     file \
+		git \
     g++ \
     gcc \
     libc-dev \
diff --git a/README.md b/README.md
index 263e7b44ca..0ed7a36bef 100644
--- a/README.md
+++ b/README.md
@@ -6,6 +6,7 @@
 [![CircleCI](https://img.shields.io/circleci/project/github/syuilo/misskey.svg?style=for-the-badge&logo=circleci)](https://circleci.com/gh/syuilo/misskey)
 [![Dependencies](https://img.shields.io/david/syuilo/misskey.svg?style=for-the-badge&logo=npm)](https://david-dm.org/syuilo/misskey)
 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=for-the-badge&logo=github)](http://makeapullrequest.com)
+[![Awesome Humane Tech](https://raw.githubusercontent.com/humanetech-community/awesome-humane-tech/main/humane-tech-badge.svg?sanitize=true)](https://github.com/humanetech-community/awesome-humane-tech)
 
 **A forever evolving, sophisticated microblogging platform.**
 
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index d3891a41a6..870041d673 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -264,6 +264,7 @@ rename: "名前を変更"
 avatar: "アイコン"
 banner: "バナー"
 nsfw: "閲覧注意"
+whenServerDisconnected: "サーバーとの接続が失われたとき"
 disconnectedFromServer: "サーバーから切断されました"
 reload: "リロード"
 doNothing: "なにもしない"
@@ -364,7 +365,6 @@ unregister: "登録を解除"
 passwordLessLogin: "パスワード無しログイン"
 resetPassword: "パスワードをリセット"
 newPasswordIs: "新しいパスワードは「{password}」です"
-autoReloadWhenDisconnected: "サーバー切断時に自動リロード"
 autoNoteWatch: "ノートの自動ウォッチ"
 autoNoteWatchDescription: "あなたがリアクションしたり返信したりした他のユーザーのノートに関する通知を受け取るようにします。"
 reduceUiAnimation: "UIのアニメーションを減らす"
@@ -468,6 +468,7 @@ objectStorageUseSSL: "SSLを使用する"
 objectStorageUseSSLDesc: "API接続にhttpsを使用しない場合はオフにしてください"
 objectStorageUseProxy: "Proxyを利用する"
 objectStorageUseProxyDesc: "API接続にproxyを利用しない場合はオフにしてください"
+objectStorageSetPublicRead: "アップロード時に'public-read'を設定する"
 serverLogs: "サーバーログ"
 deleteAll: "全て削除"
 showFixedPostForm: "タイムライン上部に投稿フォームを表示する"
@@ -558,6 +559,29 @@ userSaysSomething: "{name}が何かを言いました"
 makeActive: "アクティブにする"
 display: "表示"
 copy: "コピー"
+metrics: "メトリクス"
+overview: "概要"
+logs: "ログ"
+delayed: "遅延"
+database: "データベース"
+channel: "チャンネル"
+create: "作成"
+
+_serverDisconnectedBehavior:
+  reload: "自動でリロード"
+  dialog: "ダイアログで警告"
+  quiet: "控えめに警告"
+
+_channel:
+  create: "チャンネルを作成"
+  edit: "チャンネルを編集"
+  setBanner: "バナーを設定"
+  removeBanner: "バナーを削除"
+  featured: "トレンド"
+  owned: "管理中"
+  following: "フォロー中"
+  usersCount: "{n}人が参加中"
+  notesCount: "{n}投稿があります"
 
 _sidebar:
   full: "フル"
@@ -572,6 +596,7 @@ _wordMute:
   hardDescription: "指定した条件のノートをタイムラインに追加しないようにします。追加されなかったノートは、条件を変更しても除外されたままになります。"
   soft: "ソフト"
   hard: "ハード"
+  mutedNotes: "ミュートされたノート"
 
 _theme:
   explore: "テーマを探す"
@@ -653,6 +678,7 @@ _sfx:
   chat: "チャット"
   chatBg: "チャット(バックグラウンド)"
   antenna: "アンテナ受信"
+  channel: "チャンネル通知"
 
 _ago:
   unknown: "謎"
@@ -733,6 +759,8 @@ _permissions:
   "write:page-likes": "ページのいいねを操作する"
   "read:user-groups": "ユーザーグループを見る"
   "write:user-groups": "ユーザーグループを操作する"
+  "read:channels": "チャンネルを見る"
+  "write:channels": "チャンネルを操作する"
 
 _auth:
   shareAccess: "「{name}」がアカウントにアクセスすることを許可しますか？"
@@ -815,6 +843,7 @@ _visibility:
 _postForm:
   replyPlaceholder: "このノートに返信..."
   quotePlaceholder: "このノートを引用..."
+  channelPlaceholder: "チャンネルに投稿..."
   _placeholders:
     a: "いまどうしてる？"
     b: "何かありましたか？"
diff --git a/migration/1596548170836-channel.ts b/migration/1596548170836-channel.ts
new file mode 100644
index 0000000000..4e3ebb330a
--- /dev/null
+++ b/migration/1596548170836-channel.ts
@@ -0,0 +1,58 @@
+import {MigrationInterface, QueryRunner} from "typeorm";
+
+export class channel1596548170836 implements MigrationInterface {
+    name = 'channel1596548170836'
+
+    public async up(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(`CREATE TABLE "channel" ("id" character varying(32) NOT NULL, "createdAt" TIMESTAMP WITH TIME ZONE NOT NULL, "lastNotedAt" TIMESTAMP WITH TIME ZONE, "userId" character varying(32) NOT NULL, "name" character varying(128) NOT NULL, "description" character varying(2048), "bannerId" character varying(32), "notesCount" integer NOT NULL DEFAULT 0, "usersCount" integer NOT NULL DEFAULT 0, CONSTRAINT "PK_590f33ee6ee7d76437acf362e39" PRIMARY KEY ("id"))`);
+        await queryRunner.query(`CREATE INDEX "IDX_71cb7b435b7c0d4843317e7e16" ON "channel" ("createdAt") `);
+        await queryRunner.query(`CREATE INDEX "IDX_29ef80c6f13bcea998447fce43" ON "channel" ("lastNotedAt") `);
+        await queryRunner.query(`CREATE INDEX "IDX_823bae55bd81b3be6e05cff438" ON "channel" ("userId") `);
+        await queryRunner.query(`CREATE INDEX "IDX_0f58c11241e649d2a638a8de94" ON "channel" ("notesCount") `);
+        await queryRunner.query(`CREATE INDEX "IDX_094b86cd36bb805d1aa1e8cc9a" ON "channel" ("usersCount") `);
+        await queryRunner.query(`CREATE TABLE "channel_following" ("id" character varying(32) NOT NULL, "createdAt" TIMESTAMP WITH TIME ZONE NOT NULL, "followeeId" character varying(32) NOT NULL, "followerId" character varying(32) NOT NULL, CONSTRAINT "PK_8b104be7f7415113f2a02cd5bdd" PRIMARY KEY ("id"))`);
+        await queryRunner.query(`CREATE INDEX "IDX_11e71f2511589dcc8a4d3214f9" ON "channel_following" ("createdAt") `);
+        await queryRunner.query(`CREATE INDEX "IDX_0e43068c3f92cab197c3d3cd86" ON "channel_following" ("followeeId") `);
+        await queryRunner.query(`CREATE INDEX "IDX_6d8084ec9496e7334a4602707e" ON "channel_following" ("followerId") `);
+        await queryRunner.query(`CREATE UNIQUE INDEX "IDX_2e230dd45a10e671d781d99f3e" ON "channel_following" ("followerId", "followeeId") `);
+        await queryRunner.query(`CREATE TABLE "channel_note_pining" ("id" character varying(32) NOT NULL, "createdAt" TIMESTAMP WITH TIME ZONE NOT NULL, "channelId" character varying(32) NOT NULL, "noteId" character varying(32) NOT NULL, CONSTRAINT "PK_44f7474496bcf2e4b741681146d" PRIMARY KEY ("id"))`);
+        await queryRunner.query(`CREATE INDEX "IDX_8125f950afd3093acb10d2db8a" ON "channel_note_pining" ("channelId") `);
+        await queryRunner.query(`CREATE UNIQUE INDEX "IDX_f36fed37d6d4cdcc68c803cd9c" ON "channel_note_pining" ("channelId", "noteId") `);
+        await queryRunner.query(`ALTER TABLE "note" ADD "channelId" character varying(32) DEFAULT null`);
+        await queryRunner.query(`CREATE INDEX "IDX_f22169eb10657bded6d875ac8f" ON "note" ("channelId") `);
+        await queryRunner.query(`ALTER TABLE "channel" ADD CONSTRAINT "FK_823bae55bd81b3be6e05cff4383" FOREIGN KEY ("userId") REFERENCES "user"("id") ON DELETE SET NULL ON UPDATE NO ACTION`);
+        await queryRunner.query(`ALTER TABLE "channel" ADD CONSTRAINT "FK_999da2bcc7efadbfe0e92d3bc19" FOREIGN KEY ("bannerId") REFERENCES "drive_file"("id") ON DELETE SET NULL ON UPDATE NO ACTION`);
+        await queryRunner.query(`ALTER TABLE "note" ADD CONSTRAINT "FK_f22169eb10657bded6d875ac8f9" FOREIGN KEY ("channelId") REFERENCES "channel"("id") ON DELETE CASCADE ON UPDATE NO ACTION`);
+        await queryRunner.query(`ALTER TABLE "channel_following" ADD CONSTRAINT "FK_0e43068c3f92cab197c3d3cd86e" FOREIGN KEY ("followeeId") REFERENCES "channel"("id") ON DELETE CASCADE ON UPDATE NO ACTION`);
+        await queryRunner.query(`ALTER TABLE "channel_following" ADD CONSTRAINT "FK_6d8084ec9496e7334a4602707e1" FOREIGN KEY ("followerId") REFERENCES "user"("id") ON DELETE CASCADE ON UPDATE NO ACTION`);
+        await queryRunner.query(`ALTER TABLE "channel_note_pining" ADD CONSTRAINT "FK_8125f950afd3093acb10d2db8a8" FOREIGN KEY ("channelId") REFERENCES "channel"("id") ON DELETE CASCADE ON UPDATE NO ACTION`);
+        await queryRunner.query(`ALTER TABLE "channel_note_pining" ADD CONSTRAINT "FK_10b19ef67d297ea9de325cd4502" FOREIGN KEY ("noteId") REFERENCES "note"("id") ON DELETE CASCADE ON UPDATE NO ACTION`);
+    }
+
+    public async down(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(`ALTER TABLE "channel_note_pining" DROP CONSTRAINT "FK_10b19ef67d297ea9de325cd4502"`);
+        await queryRunner.query(`ALTER TABLE "channel_note_pining" DROP CONSTRAINT "FK_8125f950afd3093acb10d2db8a8"`);
+        await queryRunner.query(`ALTER TABLE "channel_following" DROP CONSTRAINT "FK_6d8084ec9496e7334a4602707e1"`);
+        await queryRunner.query(`ALTER TABLE "channel_following" DROP CONSTRAINT "FK_0e43068c3f92cab197c3d3cd86e"`);
+        await queryRunner.query(`ALTER TABLE "note" DROP CONSTRAINT "FK_f22169eb10657bded6d875ac8f9"`);
+        await queryRunner.query(`ALTER TABLE "channel" DROP CONSTRAINT "FK_999da2bcc7efadbfe0e92d3bc19"`);
+        await queryRunner.query(`ALTER TABLE "channel" DROP CONSTRAINT "FK_823bae55bd81b3be6e05cff4383"`);
+        await queryRunner.query(`DROP INDEX "IDX_f22169eb10657bded6d875ac8f"`);
+        await queryRunner.query(`ALTER TABLE "note" DROP COLUMN "channelId"`);
+        await queryRunner.query(`DROP INDEX "IDX_f36fed37d6d4cdcc68c803cd9c"`);
+        await queryRunner.query(`DROP INDEX "IDX_8125f950afd3093acb10d2db8a"`);
+        await queryRunner.query(`DROP TABLE "channel_note_pining"`);
+        await queryRunner.query(`DROP INDEX "IDX_2e230dd45a10e671d781d99f3e"`);
+        await queryRunner.query(`DROP INDEX "IDX_6d8084ec9496e7334a4602707e"`);
+        await queryRunner.query(`DROP INDEX "IDX_0e43068c3f92cab197c3d3cd86"`);
+        await queryRunner.query(`DROP INDEX "IDX_11e71f2511589dcc8a4d3214f9"`);
+        await queryRunner.query(`DROP TABLE "channel_following"`);
+        await queryRunner.query(`DROP INDEX "IDX_094b86cd36bb805d1aa1e8cc9a"`);
+        await queryRunner.query(`DROP INDEX "IDX_0f58c11241e649d2a638a8de94"`);
+        await queryRunner.query(`DROP INDEX "IDX_823bae55bd81b3be6e05cff438"`);
+        await queryRunner.query(`DROP INDEX "IDX_29ef80c6f13bcea998447fce43"`);
+        await queryRunner.query(`DROP INDEX "IDX_71cb7b435b7c0d4843317e7e16"`);
+        await queryRunner.query(`DROP TABLE "channel"`);
+    }
+
+}
diff --git a/migration/1596786425167-channel2.ts b/migration/1596786425167-channel2.ts
new file mode 100644
index 0000000000..0233f7ab0f
--- /dev/null
+++ b/migration/1596786425167-channel2.ts
@@ -0,0 +1,14 @@
+import {MigrationInterface, QueryRunner} from "typeorm";
+
+export class channel21596786425167 implements MigrationInterface {
+    name = 'channel21596786425167'
+
+    public async up(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(`ALTER TABLE "channel_following" ADD "readCursor" TIMESTAMP WITH TIME ZONE NOT NULL`);
+    }
+
+    public async down(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(`ALTER TABLE "channel_following" DROP COLUMN "readCursor"`);
+    }
+
+}
diff --git a/migration/1597230137744-objectStorageSetPublicRead.ts b/migration/1597230137744-objectStorageSetPublicRead.ts
new file mode 100644
index 0000000000..f040f2afdd
--- /dev/null
+++ b/migration/1597230137744-objectStorageSetPublicRead.ts
@@ -0,0 +1,14 @@
+import {MigrationInterface, QueryRunner} from "typeorm";
+
+export class objectStorageSetPublicRead1597230137744 implements MigrationInterface {
+    name = 'objectStorageSetPublicRead1597230137744'
+
+    public async up(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(`ALTER TABLE "meta" ADD "objectStorageSetPublicRead" boolean NOT NULL DEFAULT false`);
+    }
+
+    public async down(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(`ALTER TABLE "meta" DROP COLUMN "objectStorageSetPublicRead"`);
+    }
+
+}
diff --git a/migration/1597385880794-add-sensitive-index.ts b/migration/1597385880794-add-sensitive-index.ts
new file mode 100644
index 0000000000..ff6251ac0a
--- /dev/null
+++ b/migration/1597385880794-add-sensitive-index.ts
@@ -0,0 +1,14 @@
+import {MigrationInterface, QueryRunner} from "typeorm";
+
+export class addSensitiveIndex1597385880794 implements MigrationInterface {
+    name = 'addSensitiveIndex1597385880794'
+
+    public async up(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(`CREATE INDEX "IDX_a7eba67f8b3fa27271e85d2e26" ON "drive_file" ("isSensitive") `);
+    }
+
+    public async down(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(`DROP INDEX "IDX_a7eba67f8b3fa27271e85d2e26"`);
+    }
+
+}
diff --git a/migration/1597459042300-channel-unread.ts b/migration/1597459042300-channel-unread.ts
new file mode 100644
index 0000000000..a0f862114d
--- /dev/null
+++ b/migration/1597459042300-channel-unread.ts
@@ -0,0 +1,27 @@
+import {MigrationInterface, QueryRunner} from "typeorm";
+
+export class channelUnread1597459042300 implements MigrationInterface {
+    name = 'channelUnread1597459042300'
+
+    public async up(queryRunner: QueryRunner): Promise<void> {
+				await queryRunner.query(`TRUNCATE TABLE "note_unread"`, undefined);
+        await queryRunner.query(`ALTER TABLE "channel_following" DROP COLUMN "readCursor"`);
+        await queryRunner.query(`ALTER TABLE "note_unread" ADD "isMentioned" boolean NOT NULL`);
+        await queryRunner.query(`ALTER TABLE "note_unread" ADD "noteChannelId" character varying(32)`);
+        await queryRunner.query(`CREATE INDEX "IDX_25b1dd384bec391b07b74b861c" ON "note_unread" ("isMentioned") `);
+        await queryRunner.query(`CREATE INDEX "IDX_89a29c9237b8c3b6b3cbb4cb30" ON "note_unread" ("isSpecified") `);
+        await queryRunner.query(`CREATE INDEX "IDX_29e8c1d579af54d4232939f994" ON "note_unread" ("noteUserId") `);
+        await queryRunner.query(`CREATE INDEX "IDX_6a57f051d82c6d4036c141e107" ON "note_unread" ("noteChannelId") `);
+    }
+
+    public async down(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(`DROP INDEX "IDX_6a57f051d82c6d4036c141e107"`);
+        await queryRunner.query(`DROP INDEX "IDX_29e8c1d579af54d4232939f994"`);
+        await queryRunner.query(`DROP INDEX "IDX_89a29c9237b8c3b6b3cbb4cb30"`);
+        await queryRunner.query(`DROP INDEX "IDX_25b1dd384bec391b07b74b861c"`);
+        await queryRunner.query(`ALTER TABLE "note_unread" DROP COLUMN "noteChannelId"`);
+        await queryRunner.query(`ALTER TABLE "note_unread" DROP COLUMN "isMentioned"`);
+        await queryRunner.query(`ALTER TABLE "channel_following" ADD "readCursor" TIMESTAMP WITH TIME ZONE NOT NULL`);
+    }
+
+}
diff --git a/src/client/assets/sounds/noizenecio/kick_gaba2.mp3 b/src/client/assets/sounds/noizenecio/kick_gaba2.mp3
new file mode 100644
index 0000000000..33c2837620
Binary files /dev/null and b/src/client/assets/sounds/noizenecio/kick_gaba2.mp3 differ
diff --git a/src/client/assets/sounds/syuilo/reverved.mp3 b/src/client/assets/sounds/syuilo/reverved.mp3
new file mode 100644
index 0000000000..47588ef270
Binary files /dev/null and b/src/client/assets/sounds/syuilo/reverved.mp3 differ
diff --git a/src/client/assets/sounds/syuilo/ryukyu.mp3 b/src/client/assets/sounds/syuilo/ryukyu.mp3
new file mode 100644
index 0000000000..9e935e3f37
Binary files /dev/null and b/src/client/assets/sounds/syuilo/ryukyu.mp3 differ
diff --git a/src/client/assets/sounds/syuilo/square-pico.mp3 b/src/client/assets/sounds/syuilo/square-pico.mp3
new file mode 100644
index 0000000000..c4d8305ae7
Binary files /dev/null and b/src/client/assets/sounds/syuilo/square-pico.mp3 differ
diff --git a/src/client/components/channel-follow-button.vue b/src/client/components/channel-follow-button.vue
new file mode 100644
index 0000000000..3b83865b55
--- /dev/null
+++ b/src/client/components/channel-follow-button.vue
@@ -0,0 +1,141 @@
+<template>
+<button class="hdcaacmi _button"
+	:class="{ wait, active: isFollowing, full }"
+	@click="onClick"
+	:disabled="wait"
+>
+	<template v-if="!wait">
+		<template v-if="isFollowing">
+			<span v-if="full">{{ $t('unfollow') }}</span><fa :icon="faMinus"/>
+		</template>
+		<template v-else>
+			<span v-if="full">{{ $t('follow') }}</span><fa :icon="faPlus"/>
+		</template>
+	</template>
+	<template v-else>
+		<span v-if="full">{{ $t('processing') }}</span><fa :icon="faSpinner" pulse fixed-width/>
+	</template>
+</button>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { faSpinner, faPlus, faMinus, } from '@fortawesome/free-solid-svg-icons';
+
+export default Vue.extend({
+	props: {
+		channel: {
+			type: Object,
+			required: true
+		},
+		full: {
+			type: Boolean,
+			required: false,
+			default: false,
+		},
+	},
+
+	data() {
+		return {
+			isFollowing: this.channel.isFollowing,
+			wait: false,
+			faSpinner, faPlus, faMinus,
+		};
+	},
+
+	methods: {
+		async onClick() {
+			this.wait = true;
+
+			try {
+				if (this.isFollowing) {
+					await this.$root.api('channels/unfollow', {
+						channelId: this.channel.id
+					});
+					this.isFollowing = false;
+				} else {
+					await this.$root.api('channels/follow', {
+						channelId: this.channel.id
+					});
+					this.isFollowing = true;
+				}
+			} catch (e) {
+				console.error(e);
+			} finally {
+				this.wait = false;
+			}
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.hdcaacmi {
+	position: relative;
+	display: inline-block;
+	font-weight: bold;
+	color: var(--accent);
+	background: transparent;
+	border: solid 1px var(--accent);
+	padding: 0;
+	height: 31px;
+	font-size: 16px;
+	border-radius: 32px;
+	background: #fff;
+
+	&.full {
+		padding: 0 8px 0 12px;
+		font-size: 14px;
+	}
+
+	&:not(.full) {
+		width: 31px;
+	}
+
+	&:focus {
+		&:after {
+			content: "";
+			pointer-events: none;
+			position: absolute;
+			top: -5px;
+			right: -5px;
+			bottom: -5px;
+			left: -5px;
+			border: 2px solid var(--focus);
+			border-radius: 32px;
+		}
+	}
+
+	&:hover {
+		//background: mix($primary, #fff, 20);
+	}
+
+	&:active {
+		//background: mix($primary, #fff, 40);
+	}
+
+	&.active {
+		color: #fff;
+		background: var(--accent);
+
+		&:hover {
+			background: var(--accentLighten);
+			border-color: var(--accentLighten);
+		}
+
+		&:active {
+			background: var(--accentDarken);
+			border-color: var(--accentDarken);
+		}
+	}
+
+	&.wait {
+		cursor: wait !important;
+		opacity: 0.7;
+	}
+
+	> span {
+		margin-right: 6px;
+	}
+}
+</style>
diff --git a/src/client/components/channel-preview.vue b/src/client/components/channel-preview.vue
new file mode 100644
index 0000000000..bef4759570
--- /dev/null
+++ b/src/client/components/channel-preview.vue
@@ -0,0 +1,144 @@
+<template>
+<router-link :to="`/channels/${channel.id}`" class="eftoefju _panel" tabindex="-1">
+	<div class="banner" v-if="channel.bannerUrl" :style="`background-image: url('${channel.bannerUrl}')`">
+		<div class="fade"></div>
+		<div class="name"><fa :icon="faSatelliteDish"/> {{ channel.name }}</div>
+		<div class="status">
+			<div><fa :icon="faUsers" fixed-width/><i18n path="_channel.usersCount" tag="span" style="margin-left: 4px;"><b place="n">{{ channel.usersCount }}</b></i18n></div>
+			<div><fa :icon="faPencilAlt" fixed-width/><i18n path="_channel.notesCount" tag="span" style="margin-left: 4px;"><b place="n">{{ channel.notesCount }}</b></i18n></div>
+		</div>
+	</div>
+	<article v-if="channel.description">
+		<p :title="channel.description">{{ channel.description.length > 85 ? channel.description.slice(0, 85) + '…' : channel.description }}</p>
+	</article>
+	<footer>
+		<span>
+			{{ $t('updatedAt') }}: <mk-time :time="channel.lastNotedAt"/>
+		</span>
+	</footer>
+</router-link>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { faSatelliteDish, faUsers, faPencilAlt } from '@fortawesome/free-solid-svg-icons';
+
+export default Vue.extend({
+	props: {
+		channel: {
+			type: Object,
+			required: true
+		},
+	},
+
+	data() {
+		return {
+			faSatelliteDish, faUsers, faPencilAlt,
+		};
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.eftoefju {
+	display: block;
+	overflow: hidden;
+	width: 100%;
+	border: 1px solid var(--divider);
+
+	&:hover {
+		text-decoration: none;
+	}
+
+	> .banner {
+		position: relative;
+		width: 100%;
+		height: 200px;
+		background-position: center;
+		background-size: cover;
+
+		> .fade {
+			position: absolute;
+			bottom: 0;
+			left: 0;
+			width: 100%;
+			height: 64px;
+			background: linear-gradient(0deg, var(--panel), var(--X15));
+		}
+
+		> .name {
+			position: absolute;
+			top: 16px;
+			left: 16px;
+			padding: 12px 16px;
+			background: rgba(0, 0, 0, 0.7);
+			color: #fff;
+			font-size: 1.2em;
+		}
+
+		> .status {
+			position: absolute;
+			z-index: 1;
+			bottom: 16px;
+			right: 16px;
+			padding: 8px 12px;
+			font-size: 80%;
+			background: rgba(0, 0, 0, 0.7);
+			border-radius: 6px;
+			color: #fff;
+		}
+	}
+
+	> article {
+		padding: 16px;
+
+		> p {
+			margin: 0;
+			font-size: 1em;
+		}
+	}
+
+	> footer {
+		padding: 12px 16px;
+		border-top: solid 1px var(--divider);
+
+		> span {
+			opacity: 0.7;
+			font-size: 0.9em;
+		}
+	}
+
+	@media (max-width: 550px) {
+		font-size: 0.9em;
+
+		> .banner {
+			height: 80px;
+
+			> .status {
+				display: none;
+			}
+		}
+
+		> article {
+			padding: 12px;
+		}
+
+		> footer {
+			display: none;
+		}
+	}
+
+	@media (max-width: 500px) {
+		font-size: 0.8em;
+
+		> .banner {
+			height: 70px;
+		}
+
+		> article {
+			padding: 8px;
+		}
+	}
+}
+
+</style>
diff --git a/src/client/components/instance-stats.vue b/src/client/components/instance-stats.vue
index 59ea57f61b..5f6e963ece 100644
--- a/src/client/components/instance-stats.vue
+++ b/src/client/components/instance-stats.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="zbcjwnqg">
+<div class="zbcjwnqg" v-size="{ max: [550, 1200] }">
 	<div class="stats" v-if="info">
 		<div class="_panel">
 			<div>
@@ -84,7 +84,7 @@
 	</div>
 
 	<section class="_card">
-		<div class="_title"><fa :icon="faChartBar"/> {{ $t('statistics') }}</div>
+		<div class="_title" style="position: relative;"><fa :icon="faChartBar"/> {{ $t('statistics') }}<button @click="fetchChart" class="_button" style="position: absolute; right: 0; bottom: 0; top: 0; padding: inherit;"><fa :icon="faSync"/></button></div>
 		<div class="_content" style="margin-top: -8px;">
 			<div class="selects" style="display: flex;">
 				<mk-select v-model="chartSrc" style="margin: 0; flex: 1;">
@@ -123,12 +123,11 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faChartBar, faUser, faPencilAlt } from '@fortawesome/free-solid-svg-icons';
+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 '../filters/number';
 
-const chartLimit = 90;
 const sum = (...arr) => arr.reduce((r, a) => r.map((b, i) => a[i] + b));
 const negate = arr => arr.map(x => -x);
 const alpha = (hex, a) => {
@@ -144,6 +143,19 @@ export default defineComponent({
 		MkSelect
 	},
 
+	props: {
+		chartLimit: {
+			type: Number,
+			required: false,
+			default: 90
+		},
+		detailed: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+	},
+
 	data() {
 		return {
 			info: null,
@@ -160,7 +172,7 @@ export default defineComponent({
 			chartInstance: null,
 			chartSrc: 'notes',
 			chartSpan: 'hour',
-			faChartBar, faUser, faPencilAlt
+			faChartBar, faUser, faPencilAlt, faSync
 		}
 	},
 
@@ -209,62 +221,69 @@ export default defineComponent({
 
 		this.now = new Date();
 
-		const [perHour, perDay] = await Promise.all([Promise.all([
-			this.$root.api('charts/federation', { limit: chartLimit, span: 'hour' }),
-			this.$root.api('charts/users', { limit: chartLimit, span: 'hour' }),
-			this.$root.api('charts/active-users', { limit: chartLimit, span: 'hour' }),
-			this.$root.api('charts/notes', { limit: chartLimit, span: 'hour' }),
-			this.$root.api('charts/drive', { limit: chartLimit, span: 'hour' }),
-		]), Promise.all([
-			this.$root.api('charts/federation', { limit: chartLimit, span: 'day' }),
-			this.$root.api('charts/users', { limit: chartLimit, span: 'day' }),
-			this.$root.api('charts/active-users', { limit: chartLimit, span: 'day' }),
-			this.$root.api('charts/notes', { limit: chartLimit, span: 'day' }),
-			this.$root.api('charts/drive', { limit: chartLimit, span: 'day' }),
-		])]);
-
-		const chart = {
-			perHour: {
-				federation: perHour[0],
-				users: perHour[1],
-				activeUsers: perHour[2],
-				notes: perHour[3],
-				drive: perHour[4],
-			},
-			perDay: {
-				federation: perDay[0],
-				users: perDay[1],
-				activeUsers: perDay[2],
-				notes: perDay[3],
-				drive: perDay[4],
-			}
-		};
-
-		this.notesLocalWoW = this.info.originalNotesCount - chart.perDay.notes.local.total[7];
-		this.notesLocalDoD = this.info.originalNotesCount - chart.perDay.notes.local.total[1];
-		this.notesRemoteWoW = (this.info.notesCount - this.info.originalNotesCount) - chart.perDay.notes.remote.total[7];
-		this.notesRemoteDoD = (this.info.notesCount - this.info.originalNotesCount) - chart.perDay.notes.remote.total[1];
-		this.usersLocalWoW = this.info.originalUsersCount - chart.perDay.users.local.total[7];
-		this.usersLocalDoD = this.info.originalUsersCount - chart.perDay.users.local.total[1];
-		this.usersRemoteWoW = (this.info.usersCount - this.info.originalUsersCount) - chart.perDay.users.remote.total[7];
-		this.usersRemoteDoD = (this.info.usersCount - this.info.originalUsersCount) - chart.perDay.users.remote.total[1];
-
-		this.chart = chart;
-
-		this.renderChart();
+		this.fetchChart();
 	},
 
 	methods: {
+		async fetchChart() {
+			const [perHour, perDay] = await Promise.all([Promise.all([
+				this.$root.api('charts/federation', { limit: this.chartLimit, span: 'hour' }),
+				this.$root.api('charts/users', { limit: this.chartLimit, span: 'hour' }),
+				this.$root.api('charts/active-users', { limit: this.chartLimit, span: 'hour' }),
+				this.$root.api('charts/notes', { limit: this.chartLimit, span: 'hour' }),
+				this.$root.api('charts/drive', { limit: this.chartLimit, span: 'hour' }),
+			]), Promise.all([
+				this.$root.api('charts/federation', { limit: this.chartLimit, span: 'day' }),
+				this.$root.api('charts/users', { limit: this.chartLimit, span: 'day' }),
+				this.$root.api('charts/active-users', { limit: this.chartLimit, span: 'day' }),
+				this.$root.api('charts/notes', { limit: this.chartLimit, span: 'day' }),
+				this.$root.api('charts/drive', { limit: this.chartLimit, span: 'day' }),
+			])]);
+
+			const chart = {
+				perHour: {
+					federation: perHour[0],
+					users: perHour[1],
+					activeUsers: perHour[2],
+					notes: perHour[3],
+					drive: perHour[4],
+				},
+				perDay: {
+					federation: perDay[0],
+					users: perDay[1],
+					activeUsers: perDay[2],
+					notes: perDay[3],
+					drive: perDay[4],
+				}
+			};
+
+			this.notesLocalWoW = this.info.originalNotesCount - chart.perDay.notes.local.total[7];
+			this.notesLocalDoD = this.info.originalNotesCount - chart.perDay.notes.local.total[1];
+			this.notesRemoteWoW = (this.info.notesCount - this.info.originalNotesCount) - chart.perDay.notes.remote.total[7];
+			this.notesRemoteDoD = (this.info.notesCount - this.info.originalNotesCount) - chart.perDay.notes.remote.total[1];
+			this.usersLocalWoW = this.info.originalUsersCount - chart.perDay.users.local.total[7];
+			this.usersLocalDoD = this.info.originalUsersCount - chart.perDay.users.local.total[1];
+			this.usersRemoteWoW = (this.info.usersCount - this.info.originalUsersCount) - chart.perDay.users.remote.total[7];
+			this.usersRemoteDoD = (this.info.usersCount - this.info.originalUsersCount) - chart.perDay.users.remote.total[1];
+
+			this.chart = chart;
+
+			this.renderChart();
+		},
+
 		renderChart() {
 			if (this.chartInstance) {
 				this.chartInstance.destroy();
 			}
 
+			// TODO: var(--panel)の色が暗いか明るいかで判定する
+			const gridColor = this.$store.state.device.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
+
 			Chart.defaults.global.defaultFontColor = getComputedStyle(document.documentElement).getPropertyValue('--fg');
 			this.chartInstance = new Chart(this.$refs.chart, {
 				type: 'line',
 				data: {
-					labels: new Array(chartLimit).fill(0).map((_, i) => this.getDate(i).toLocaleString()).slice().reverse(),
+					labels: new Array(this.chartLimit).fill(0).map((_, i) => this.getDate(i).toLocaleString()).slice().reverse(),
 					datasets: this.data.series.map(x => ({
 						label: x.name,
 						data: x.data.slice().reverse(),
@@ -272,7 +291,9 @@ export default defineComponent({
 						lineTension: 0,
 						borderWidth: 2,
 						borderColor: x.color,
+						borderDash: x.borderDash || [],
 						backgroundColor: alpha(x.color, 0.1),
+						fill: x.fill == null ? true : x.fill,
 						hidden: !!x.hidden
 					}))
 				},
@@ -294,17 +315,28 @@ export default defineComponent({
 					},
 					scales: {
 						xAxes: [{
+							type: 'time',
+							time: {
+								stepSize: 1,
+								unit: this.chartSpan == 'day' ? 'month' : 'day',
+							},
 							gridLines: {
-								display: false
+								display: this.detailed,
+								color: gridColor,
+								zeroLineColor: gridColor,
 							},
 							ticks: {
-								display: false
+								display: this.detailed
 							}
 						}],
 						yAxes: [{
-							position: 'right',
+							position: 'left',
+							gridLines: {
+								color: gridColor,
+								zeroLineColor: gridColor,
+							},
 							ticks: {
-								display: false
+								display: this.detailed
 							}
 						}]
 					},
@@ -326,7 +358,11 @@ export default defineComponent({
 		},
 
 		format(arr) {
-			return arr;
+			const now = Date.now();
+			return arr.map((v, i) => ({
+				x: new Date(now - ((this.chartSpan == 'day' ? 86400000 :3600000 ) * i)),
+				y: v
+			}));
 		},
 
 		federationInstancesChart(total: boolean): any {
@@ -348,6 +384,8 @@ export default defineComponent({
 					name: 'All',
 					type: 'line',
 					color: '#008FFB',
+					borderDash: [5, 5],
+					fill: false,
 					data: this.format(type == 'combined'
 						? sum(this.stats.notes.local.inc, negate(this.stats.notes.local.dec), this.stats.notes.remote.inc, negate(this.stats.notes.remote.dec))
 						: sum(this.stats.notes[type].inc, negate(this.stats.notes[type].dec))
@@ -464,7 +502,9 @@ export default defineComponent({
 				series: [{
 					name: 'All',
 					type: 'line',
-					color: '#008FFB',
+					color: '#09d8e2',
+					borderDash: [5, 5],
+					fill: false,
 					data: this.format(
 						sum(
 							this.stats.drive.local.incSize,
@@ -481,17 +521,17 @@ export default defineComponent({
 				}, {
 					name: 'Local -',
 					type: 'area',
-					color: '#008FFB',
+					color: '#FF4560',
 					data: this.format(negate(this.stats.drive.local.decSize))
 				}, {
 					name: 'Remote +',
 					type: 'area',
-					color: '#008FFB',
+					color: '#00E396',
 					data: this.format(this.stats.drive.remote.incSize)
 				}, {
 					name: 'Remote -',
 					type: 'area',
-					color: '#008FFB',
+					color: '#FEB019',
 					data: this.format(negate(this.stats.drive.remote.decSize))
 				}]
 			};
@@ -526,7 +566,9 @@ export default defineComponent({
 				series: [{
 					name: 'All',
 					type: 'line',
-					color: '#008FFB',
+					color: '#09d8e2',
+					borderDash: [5, 5],
+					fill: false,
 					data: this.format(
 						sum(
 							this.stats.drive.local.incCount,
@@ -543,17 +585,17 @@ export default defineComponent({
 				}, {
 					name: 'Local -',
 					type: 'area',
-					color: '#008FFB',
+					color: '#FF4560',
 					data: this.format(negate(this.stats.drive.local.decCount))
 				}, {
 					name: 'Remote +',
 					type: 'area',
-					color: '#008FFB',
+					color: '#00E396',
 					data: this.format(this.stats.drive.remote.incCount)
 				}, {
 					name: 'Remote -',
 					type: 'area',
-					color: '#008FFB',
+					color: '#FEB019',
 					data: this.format(negate(this.stats.drive.remote.decCount))
 				}]
 			};
@@ -589,17 +631,30 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .zbcjwnqg {
+	&.max-width_1200px {
+		> .stats {
+			grid-template-columns: 1fr 1fr;
+			grid-template-rows: 1fr 1fr;
+		}
+	}
+
+	&.max-width_550px {
+		> .stats {
+			grid-template-columns: 1fr;
+			grid-template-rows: 1fr 1fr 1fr 1fr;
+		}
+	}
+
 	> .stats {
-		display: flex;
-		justify-content: space-between;
-		flex-wrap: wrap;
-		margin: calc(0px - var(--margin) / 2);
-		margin-bottom: calc(var(--margin) / 2);
+		display: grid;
+		grid-template-columns: 1fr 1fr 1fr 1fr;
+		grid-template-rows: 1fr;
+		gap: var(--margin);
+		margin-bottom: var(--margin);
+		font-size: 90%;
 
 		> div {
 			display: flex;
-			flex: 1 0 213px;
-			margin: calc(var(--margin) / 2);
 			box-sizing: border-box;
 			padding: 16px 20px;
 
@@ -634,7 +689,7 @@ export default defineComponent({
 							margin: 0;
 						}
 
-						> dt {
+						> dd {
 							text-overflow: ellipsis;
 							overflow: hidden;
 							white-space: nowrap;
diff --git a/src/client/components/note.sub.vue b/src/client/components/note.sub.vue
index 1d6d87b79a..9913409b79 100644
--- a/src/client/components/note.sub.vue
+++ b/src/client/components/note.sub.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="wrpstxzv" :class="{ children }" v-size="[{ max: 450 }]">
+<div class="wrpstxzv" :class="{ children }" v-size="{ max: [450] }">
 	<div class="main">
 		<mk-avatar class="avatar" :user="note.user"/>
 		<div class="body">
diff --git a/src/client/components/note.vue b/src/client/components/note.vue
index 26a0579d1b..41a2a81267 100644
--- a/src/client/components/note.vue
+++ b/src/client/components/note.vue
@@ -6,7 +6,7 @@
 	:tabindex="!isDeleted ? '-1' : null"
 	:class="{ renote: isRenote }"
 	v-hotkey="keymap"
-	v-size="[{ max: 500 }, { max: 450 }, { max: 350 }, { max: 300 }]"
+	v-size="{ max: [500, 450, 350, 300] }"
 >
 	<x-sub v-for="note in conversation" class="reply-to-more" :key="note.id" :note="note"/>
 	<x-sub :note="appearNote.reply" class="reply-to" v-if="appearNote.reply"/>
@@ -57,6 +57,7 @@
 					<mk-url-preview v-for="url in urls" :url="url" :key="url" :compact="true" :detail="detail" class="url-preview"/>
 					<div class="renote" v-if="appearNote.renote"><x-note-preview :note="appearNote.renote"/></div>
 				</div>
+				<router-link v-if="appearNote.channel && !inChannel" class="channel" :to="`/channels/${appearNote.channel.id}`"><fa :icon="faSatelliteDish"/> {{ appearNote.channel.name }}</router-link>
 			</div>
 			<footer class="footer">
 				<x-reactions-viewer :note="appearNote" ref="reactionsViewer"/>
@@ -96,7 +97,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faBolt, faTimes, faBullhorn, faStar, faLink, faExternalLinkSquareAlt, faPlus, faMinus, faRetweet, faReply, faReplyAll, faEllipsisH, faHome, faUnlock, faEnvelope, faThumbtack, faBan, faQuoteRight, faInfoCircle, faBiohazard, faPlug } from '@fortawesome/free-solid-svg-icons';
+import { faSatelliteDish, faBolt, faTimes, faBullhorn, faStar, faLink, faExternalLinkSquareAlt, faPlus, faMinus, faRetweet, faReply, faReplyAll, faEllipsisH, faHome, faUnlock, faEnvelope, faThumbtack, faBan, faQuoteRight, faInfoCircle, faBiohazard, faPlug } from '@fortawesome/free-solid-svg-icons';
 import { faCopy, faTrashAlt, faEdit, faEye, faEyeSlash } from '@fortawesome/free-regular-svg-icons';
 import { parse } from '../../mfm/parse';
 import { sum, unique } from '../../prelude/array';
@@ -134,6 +135,12 @@ export default defineComponent({
 		MkUrlPreview,
 	},
 
+	inject: {
+		inChannel: {
+			default: null
+		}
+	},
+
 	props: {
 		note: {
 			type: Object,
@@ -160,7 +167,7 @@ export default defineComponent({
 			isDeleted: false,
 			muted: false,
 			noteBody: this.$refs.noteBody,
-			faEdit, faBolt, faTimes, faBullhorn, faPlus, faMinus, faRetweet, faReply, faReplyAll, faEllipsisH, faHome, faUnlock, faEnvelope, faThumbtack, faBan, faBiohazard, faPlug
+			faEdit, faBolt, faTimes, faBullhorn, faPlus, faMinus, faRetweet, faReply, faReplyAll, faEllipsisH, faHome, faUnlock, faEnvelope, faThumbtack, faBan, faBiohazard, faPlug, faSatelliteDish
 		};
 	},
 
@@ -957,6 +964,11 @@ export default defineComponent({
 						}
 					}
 				}
+
+				> .channel {
+					opacity: 0.7;
+					font-size: 80%;
+				}
 			}
 
 			> .footer {
diff --git a/src/client/components/notification.vue b/src/client/components/notification.vue
index 35168e911f..13780d7791 100644
--- a/src/client/components/notification.vue
+++ b/src/client/components/notification.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="qglefbjs" :class="notification.type" v-size="[{ max: 500 }, { max: 600 }]">
+<div class="qglefbjs" :class="notification.type" v-size="{ max: [500, 600] }">
 	<div class="head">
 		<mk-avatar v-if="notification.user" class="icon" :user="notification.user"/>
 		<img v-else class="icon" :src="notification.icon" alt=""/>
diff --git a/src/client/components/post-form.vue b/src/client/components/post-form.vue
index 641701e964..af74a8b262 100644
--- a/src/client/components/post-form.vue
+++ b/src/client/components/post-form.vue
@@ -10,7 +10,7 @@
 		<div>
 			<span class="local-only" v-if="localOnly" v-text="$t('_visibility.localOnly')" />
 			<span class="text-count" :class="{ over: trimmedLength(text) > max }">{{ max - trimmedLength(text) }}</span>
-			<button class="_button visibility" @click="setVisibility" ref="visibilityButton" v-tooltip="$t('visibility')">
+			<button class="_button visibility" @click="setVisibility" ref="visibilityButton" v-tooltip="$t('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>
@@ -88,6 +88,10 @@ export default defineComponent({
 			type: Object,
 			required: false
 		},
+		channel: {
+			type: Object,
+			required: false
+		},
 		mention: {
 			type: Object,
 			required: false
@@ -140,30 +144,38 @@ export default defineComponent({
 	},
 
 	computed: {
-		draftId(): string {
-			return this.renote
-				? `renote:${this.renote.id}`
-				: this.reply
-					? `reply:${this.reply.id}`
-					: 'note';
+		draftKey(): string {
+			let key = this.channel ? `channel:${this.channel.id}` : '';
+
+			if (this.renote) {
+				key += `renote:${this.renote.id}`;
+			} else if (this.reply) {
+				key += `reply:${this.reply.id}`;
+			} else {
+				key += 'note';
+			}
+
+			return key;
 		},
 
 		placeholder(): string {
-			const xs = [
-				this.$t('_postForm._placeholders.a'),
-				this.$t('_postForm._placeholders.b'),
-				this.$t('_postForm._placeholders.c'),
-				this.$t('_postForm._placeholders.d'),
-				this.$t('_postForm._placeholders.e'),
-				this.$t('_postForm._placeholders.f')
-			];
-			const x = xs[Math.floor(Math.random() * xs.length)];
-
-			return this.renote
-				? this.$t('_postForm.quotePlaceholder')
-				: this.reply
-					? this.$t('_postForm.replyPlaceholder')
-					: x;
+			if (this.renote) {
+				return this.$t('_postForm.quotePlaceholder');
+			} else if (this.reply) {
+				return this.$t('_postForm.replyPlaceholder');
+			} else if (this.channel) {
+				return this.$t('_postForm.channelPlaceholder');
+			} else {
+				const xs = [
+					this.$t('_postForm._placeholders.a'),
+					this.$t('_postForm._placeholders.b'),
+					this.$t('_postForm._placeholders.c'),
+					this.$t('_postForm._placeholders.d'),
+					this.$t('_postForm._placeholders.e'),
+					this.$t('_postForm._placeholders.f')
+				];
+				return xs[Math.floor(Math.random() * xs.length)];
+			}
 		},
 
 		submitText(): string {
@@ -224,9 +236,11 @@ export default defineComponent({
 		}
 
 		// デフォルト公開範囲
-		this.applyVisibility(this.$store.state.settings.rememberNoteVisibility ? this.$store.state.deviceUser.visibility : this.$store.state.settings.defaultNoteVisibility);
+		if (this.channel == null) {
+			this.applyVisibility(this.$store.state.settings.rememberNoteVisibility ? this.$store.state.deviceUser.visibility : this.$store.state.settings.defaultNoteVisibility);
 
-		this.localOnly = this.$store.state.settings.rememberNoteVisibility ? this.$store.state.deviceUser.localOnly : this.$store.state.settings.defaultNoteLocalOnly;
+			this.localOnly = this.$store.state.settings.rememberNoteVisibility ? this.$store.state.deviceUser.localOnly : this.$store.state.settings.defaultNoteLocalOnly;
+		}
 
 		// 公開以外へのリプライ時は元の公開範囲を引き継ぐ
 		if (this.reply && ['home', 'followers', 'specified'].includes(this.reply.visibility)) {
@@ -266,7 +280,7 @@ export default defineComponent({
 		this.$nextTick(() => {
 			// 書きかけの投稿を復元
 			if (!this.instant && !this.mention) {
-				const draft = JSON.parse(localStorage.getItem('drafts') || '{}')[this.draftId];
+				const draft = JSON.parse(localStorage.getItem('drafts') || '{}')[this.draftKey];
 				if (draft) {
 					this.text = draft.data.text;
 					this.useCw = draft.data.useCw;
@@ -398,6 +412,10 @@ export default defineComponent({
 		},
 
 		setVisibility() {
+			if (this.channel) {
+				// TODO: information dialog
+				return;
+			}
 			const w = this.$root.new(MkVisibilityChooser, {
 				source: this.$refs.visibilityButton,
 				currentVisibility: this.visibility,
@@ -510,7 +528,7 @@ export default defineComponent({
 
 			const data = JSON.parse(localStorage.getItem('drafts') || '{}');
 
-			data[this.draftId] = {
+			data[this.draftKey] = {
 				updatedAt: new Date(),
 				data: {
 					text: this.text,
@@ -529,7 +547,7 @@ export default defineComponent({
 		deleteDraft() {
 			const data = JSON.parse(localStorage.getItem('drafts') || '{}');
 
-			delete data[this.draftId];
+			delete data[this.draftKey];
 
 			localStorage.setItem('drafts', JSON.stringify(data));
 		},
@@ -540,6 +558,7 @@ export default defineComponent({
 				fileIds: this.files.length > 0 ? this.files.map(f => f.id) : undefined,
 				replyId: this.reply ? this.reply.id : undefined,
 				renoteId: this.renote ? this.renote.id : this.quoteId ? this.quoteId : undefined,
+				channelId: this.channel ? this.channel.id : undefined,
 				poll: this.poll ? (this.$refs.poll as any).get() : undefined,
 				cw: this.useCw ? this.cw || '' : undefined,
 				localOnly: this.localOnly,
diff --git a/src/client/components/stream-indicator.vue b/src/client/components/stream-indicator.vue
index 3b774e00b4..7c2d6bf8c6 100644
--- a/src/client/components/stream-indicator.vue
+++ b/src/client/components/stream-indicator.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="nsbbhtug" v-if="hasDisconnected" @click="resetDisconnected">
+<div class="nsbbhtug" v-if="hasDisconnected && $store.state.device.serverDisconnectedBehavior === 'quiet'" @click="resetDisconnected">
 	<div>{{ $t('disconnectedFromServer') }}</div>
 	<div class="command">
 		<button class="_textButton" @click="reload">{{ $t('reload') }}</button>
@@ -23,21 +23,12 @@ export default defineComponent({
 		},
 	},
 	created() {
-		this.$root.stream.on('_connected_', this.onConnected);
 		this.$root.stream.on('_disconnected_', this.onDisconnected);
 	},
 	beforeDestroy() {
-		this.$root.stream.off('_connected_', this.onConnected);
 		this.$root.stream.off('_disconnected_', this.onDisconnected);
 	},
 	methods: {
-		onConnected() {
-			if (this.hasDisconnected) {
-				if (this.$store.state.device.autoReload) {
-					this.reload();
-				}
-			}
-		},
 		onDisconnected() {
 			this.hasDisconnected = true;
 		},
diff --git a/src/client/components/tab.vue b/src/client/components/tab.vue
index ec8b1a8708..b4f1d8737b 100644
--- a/src/client/components/tab.vue
+++ b/src/client/components/tab.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="pxhvhrfw" v-size="[{ max: 500 }]">
+<div class="pxhvhrfw" v-size="{ max: [500] }">
 	<button v-for="item in items" class="_button" @click="$emit('input', item.value)" :class="{ active: value === item.value }" :key="item.value"><fa v-if="item.icon" :icon="item.icon" class="icon"/>{{ item.label }}</button>
 </div>
 </template>
diff --git a/src/client/components/timeline.vue b/src/client/components/timeline.vue
index 083cf479f6..d6b88c602f 100644
--- a/src/client/components/timeline.vue
+++ b/src/client/components/timeline.vue
@@ -24,6 +24,10 @@ export default defineComponent({
 			type: String,
 			required: false
 		},
+		channel: {
+			type: String,
+			required: false
+		},
 		sound: {
 			type: Boolean,
 			required: false,
@@ -31,6 +35,12 @@ export default defineComponent({
 		}
 	},
 
+	provide() {
+		return {
+			inChannel: this.src === 'channel'
+		};
+	},
+
 	data() {
 		return {
 			connection: null,
@@ -112,6 +122,15 @@ export default defineComponent({
 			this.connection.on('note', prepend);
 			this.connection.on('userAdded', onUserAdded);
 			this.connection.on('userRemoved', onUserRemoved);
+		} else if (this.src == 'channel') {
+			endpoint = 'channels/timeline';
+			this.query = {
+				channelId: this.channel
+			};
+			this.connection = this.$root.stream.connectToChannel('channel', {
+				channelId: this.channel
+			});
+			this.connection.on('note', prepend);
 		}
 
 		this.pagination = {
diff --git a/src/client/components/ui/container.vue b/src/client/components/ui/container.vue
index d8fa682f35..58bf2f81aa 100644
--- a/src/client/components/ui/container.vue
+++ b/src/client/components/ui/container.vue
@@ -1,12 +1,14 @@
 <template>
-<div class="ukygtjoj _panel" :class="{ naked, hideHeader: !showHeader, scrollable }" v-size="[{ max: 500 }]">
-	<header v-if="showHeader">
+<div class="ukygtjoj _panel" :class="{ naked, hideHeader: !showHeader, scrollable, closed: !showBody }" v-size="{ max: [380], el: resizeBaseEl }">
+	<header v-if="showHeader" ref="header">
 		<div class="title"><slot name="header"></slot></div>
-		<slot name="func"></slot>
-		<button class="_button" v-if="bodyTogglable" @click="() => showBody = !showBody">
-			<template v-if="showBody"><fa :icon="faAngleUp"/></template>
-			<template v-else><fa :icon="faAngleDown"/></template>
-		</button>
+		<div class="sub">
+			<slot name="func"></slot>
+			<button class="_button" v-if="bodyTogglable" @click="() => showBody = !showBody">
+				<template v-if="showBody"><fa :icon="faAngleUp"/></template>
+				<template v-else><fa :icon="faAngleDown"/></template>
+			</button>
+		</div>
 	</header>
 	<transition name="container-toggle"
 		@enter="enter"
@@ -52,6 +54,9 @@ export default defineComponent({
 			required: false,
 			default: false
 		},
+		resizeBaseEl: {
+			required: false,
+		},
 	},
 	data() {
 		return {
@@ -59,6 +64,18 @@ export default defineComponent({
 			faAngleUp, faAngleDown
 		};
 	},
+	mounted() {
+		this.$watch('showBody', showBody => {
+			this.$el.style.minHeight = `${this.$refs.header.offsetHeight}px`;
+			if (showBody) {
+				this.$el.style.flexBasis = `auto`;
+			} else {
+				this.$el.style.flexBasis = `${this.$refs.header.offsetHeight}px`;
+			}
+		}, {
+			immediate: true
+		});
+	},
 	methods: {
 		toggleContent(show: boolean) {
 			if (!this.bodyTogglable) return;
@@ -103,10 +120,6 @@ export default defineComponent({
 	position: relative;
 	overflow: hidden;
 
-	& + .ukygtjoj {
-		margin-top: var(--margin);
-	}
-
 	&.naked {
 		background: transparent !important;
 		box-shadow: none !important;
@@ -127,6 +140,7 @@ export default defineComponent({
 		z-index: 2;
 		background: var(--panelHeaderBg);
 		color: var(--panelHeaderFg);
+		line-height: 1.4em;
 
 		> .title {
 			margin: 0;
@@ -141,23 +155,42 @@ export default defineComponent({
 			}
 		}
 
-		> button {
+		> .sub {
 			position: absolute;
 			z-index: 2;
 			top: 0;
 			right: 0;
-			padding: 0;
-			width: 42px;
 			height: 100%;
+
+			> button {
+				width: 42px;
+				height: 100%;
+			}
 		}
 	}
 
-	&.max-width_500px {
+	> div {
+		> ::v-deep ._content {
+			padding: 24px;
+
+			& + ._content {
+				border-top: solid 1px var(--divider);
+			}
+		}
+	}
+
+	&.max-width_380px {
 		> header {
 			> .title {
 				padding: 8px 10px;
 			}
 		}
+
+		> div {
+			> ::v-deep ._content {
+				padding: 16px;
+			}
+		}
 	}
 }
 
diff --git a/src/client/components/ui/folder.vue b/src/client/components/ui/folder.vue
new file mode 100644
index 0000000000..0b489fe9ad
--- /dev/null
+++ b/src/client/components/ui/folder.vue
@@ -0,0 +1,126 @@
+<template>
+<div class="ssazuxis" v-size="{ max: [500] }">
+	<header @click="() => showBody = !showBody" class="_button">
+		<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>
+		</button>
+	</header>
+	<transition name="folder-toggle"
+		@enter="enter"
+		@after-enter="afterEnter"
+		@leave="leave"
+		@after-leave="afterLeave"
+	>
+		<div v-show="showBody">
+			<slot></slot>
+		</div>
+	</transition>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { faAngleUp, faAngleDown } from '@fortawesome/free-solid-svg-icons';
+
+export default Vue.extend({
+	props: {
+		expanded: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+	},
+	data() {
+		return {
+			showBody: this.expanded,
+			faAngleUp, faAngleDown
+		};
+	},
+	methods: {
+		toggleContent(show: boolean) {
+			this.showBody = show;
+		},
+
+		enter(el) {
+			const elementHeight = el.getBoundingClientRect().height;
+			el.style.height = 0;
+			el.offsetHeight; // reflow
+			el.style.height = elementHeight + 'px';
+		},
+		afterEnter(el) {
+			el.style.height = null;
+		},
+		leave(el) {
+			const elementHeight = el.getBoundingClientRect().height;
+			el.style.height = elementHeight + 'px';
+			el.offsetHeight; // reflow
+			el.style.height = 0;
+		},
+		afterLeave(el) {
+			el.style.height = null;
+		},
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.folder-toggle-enter-active, .folder-toggle-leave-active {
+	overflow-y: hidden;
+	transition: opacity 0.5s, height 0.5s !important;
+}
+.folder-toggle-enter {
+	opacity: 0;
+}
+.folder-toggle-leave-to {
+	opacity: 0;
+}
+
+.ssazuxis {
+	position: relative;
+
+	> header {
+		display: flex;
+		position: relative;
+		z-index: 2;
+		// TODO
+		// position: sticky;
+		// top: var(--stickyTopOffset);
+		// backdrop-filter: blur(20px);
+
+		> .title {
+			margin: 0;
+			padding: 12px 16px 12px 8px;
+
+			> [data-icon] {
+				margin-right: 6px;
+			}
+
+			&:empty {
+				display: none;
+			}
+		}
+
+		> .divider {
+			flex: 1;
+			margin: auto;
+			height: 1px;
+			background: var(--divider);
+		}
+
+		> button {
+			width: 42px;
+		}
+	}
+
+	&.max-width_500px {
+		> header {
+			> .title {
+				padding: 8px 10px;
+			}
+		}
+	}
+}
+</style>
diff --git a/src/client/components/ui/input.vue b/src/client/components/ui/input.vue
index 5476006af3..654b1ef85e 100644
--- a/src/client/components/ui/input.vue
+++ b/src/client/components/ui/input.vue
@@ -64,7 +64,7 @@
 		<div class="suffix" ref="suffix"><slot name="suffix"></slot></div>
 	</div>
 	<button class="save _textButton" v-if="save && changed" @click="() => { changed = false; save(); }">{{ $t('save') }}</button>
-	<div class="desc"><slot name="desc"></slot></div>
+	<div class="desc _caption"><slot name="desc"></slot></div>
 </div>
 </template>
 
@@ -401,13 +401,11 @@ export default defineComponent({
 
 	> .save {
 		margin: 6px 0 0 0;
-		font-size: 13px;
+		font-size: 0.8em;
 	}
 
 	> .desc {
 		margin: 6px 0 0 0;
-		font-size: 13px;
-		opacity: 0.7;
 
 		&:empty {
 			display: none;
diff --git a/src/client/components/ui/select.vue b/src/client/components/ui/select.vue
index 271989f2df..66a4de13d6 100644
--- a/src/client/components/ui/select.vue
+++ b/src/client/components/ui/select.vue
@@ -196,7 +196,7 @@ export default defineComponent({
 
 	> .text {
 		margin: 6px 0;
-		font-size: 13px;
+		font-size: 0.8em;
 
 		&:empty {
 			display: none;
diff --git a/src/client/components/ui/textarea.vue b/src/client/components/ui/textarea.vue
index 30accf8ffd..ee5ac89f27 100644
--- a/src/client/components/ui/textarea.vue
+++ b/src/client/components/ui/textarea.vue
@@ -14,7 +14,7 @@
 		></textarea>
 	</div>
 	<button class="save _textButton" v-if="save && changed" @click="() => { changed = false; save(); }">{{ $t('save') }}</button>
-	<div class="desc"><slot name="desc"></slot></div>
+	<div class="desc _caption"><slot name="desc"></slot></div>
 </div>
 </template>
 
@@ -163,13 +163,11 @@ export default defineComponent({
 
 	> .save {
 		margin: 6px 0 0 0;
-		font-size: 13px;
+		font-size: 0.8em;
 	}
 
 	> .desc {
 		margin: 6px 0 0 0;
-		font-size: 13px;
-		opacity: 0.7;
 
 		&:empty {
 			display: none;
diff --git a/src/client/components/url-preview.vue b/src/client/components/url-preview.vue
index 93f901027c..b5cdd087f1 100644
--- a/src/client/components/url-preview.vue
+++ b/src/client/components/url-preview.vue
@@ -6,7 +6,7 @@
 <div v-else-if="tweetId && tweetExpanded" class="twitter" ref="twitter">
 	<iframe ref="tweet" scrolling="no" frameborder="no" :style="{ position: 'relative', left: `${tweetLeft}px`, width: `${tweetLeft < 0 ? 'auto' : '100%'}`, height: `${tweetHeight}px` }" :src="`https://platform.twitter.com/embed/index.html?embedId=${embedId}&amp;hideCard=false&amp;hideThread=false&amp;lang=en&amp;theme=${$store.state.device.darkMode ? 'dark' : 'light'}&amp;id=${tweetId}`"></iframe>
 </div>
-<div v-else class="mk-url-preview" v-size="[{ max: 400 }, { max: 350 }]">
+<div v-else class="mk-url-preview" v-size="{ max: [400, 350] }">
 	<transition name="zoom" mode="out-in">
 		<component :is="self ? 'router-link' : '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}')`">
diff --git a/src/client/default.vue b/src/client/default.vue
index d63c89e963..83c62fda23 100644
--- a/src/client/default.vue
+++ b/src/client/default.vue
@@ -33,7 +33,7 @@
 
 	<x-sidebar ref="nav" @change-view-mode="calcHeaderWidth"/>
 
-	<div class="contents" ref="contents" :class="{ wallpaper }">
+	<div class="contents" ref="contents" :class="{ wallpaper, full: $store.state.fullView }">
 		<main ref="main">
 			<div class="content">
 				<router-view v-slot="{ Component }">
@@ -549,6 +549,18 @@ export default defineComponent({
 			backdrop-filter: blur(4px);
 		}
 
+		&.full {
+			width: 100%;
+
+			> main {
+				width: 100%;
+			}
+
+			> .widgets {
+				display: none;
+			}
+		}
+
 		> main {
 			width: $main-width;
 			min-width: 0;
diff --git a/src/client/directives/size.ts b/src/client/directives/size.ts
index 0604a797c0..352f825afe 100644
--- a/src/client/directives/size.ts
+++ b/src/client/directives/size.ts
@@ -3,27 +3,12 @@ import { Directive } from 'vue';
 //const observers = new Map<Element, ResizeObserver>();
 
 export default {
-	mounted(el, binding, vn) {
+	mounted(src, binding, vn) {
 		const query = binding.value;
 
-		/*
-		const addClassRecursive = (el: Element, cls: string) => {
-			el.classList.add(cls);
-			if (el.children) {
-				for (const child of el.children) {
-					addClassRecursive(child, cls);
-				}
-			}
-		};
-
-		const removeClassRecursive = (el: Element, cls: string) => {
-			el.classList.remove(cls);
-			if (el.children) {
-				for (const child of el.children) {
-					removeClassRecursive(child, cls);
-				}
-			}
-		};*/
+		// TODO: 要素をもらうというよりはカスタム幅算出関数をもらうようにしてcalcで都度呼び出して計算するようにした方が柔軟そう
+		// その場合はunbindの方も改修することを忘れずに
+		const el = query.el ? query.el() : src;
 
 		const addClass = (el: Element, cls: string) => {
 			el.classList.add(cls);
@@ -36,19 +21,21 @@ export default {
 		const calc = () => {
 			const width = el.clientWidth;
 
-			for (const q of query) {
-				if (q.max) {
-					if (width <= q.max) {
-						addClass(el, 'max-width_' + q.max + 'px');
+			if (query.max) {
+				for (const v of query.max) {
+					if (width <= v) {
+						addClass(src, 'max-width_' + v + 'px');
 					} else {
-						removeClass(el, 'max-width_' + q.max + 'px');
+						removeClass(src, 'max-width_' + v + 'px');
 					}
 				}
-				if (q.min) {
-					if (width >= q.min) {
-						addClass(el, 'min-width_' + q.min + 'px');
+			}
+			if (query.min) {
+				for (const v of query.min) {
+					if (width >= v) {
+						addClass(src, 'min-width_' + v + 'px');
 					} else {
-						removeClass(el, 'min-width_' + q.min + 'px');
+						removeClass(src, 'min-width_' + v + 'px');
 					}
 				}
 			}
@@ -71,7 +58,11 @@ export default {
 		el._ro_ = ro;
 	},
 
-	unmounted(el, binding, vn) {
+	unmounted(src, binding, vn) {
+		const query = binding.value;
+
+		const el = query.el ? query.el() : src;
+
 		el._ro_.unobserve(el);
 	}
 } as Directive;
diff --git a/src/client/init.ts b/src/client/init.ts
index 03eee450c7..4083fe501a 100644
--- a/src/client/init.ts
+++ b/src/client/init.ts
@@ -217,6 +217,25 @@ store.watch(state => state.device.useBlurEffectForModal, v => {
 	document.documentElement.style.setProperty('--modalBgFilter', v ? 'blur(4px)' : 'none');
 }, { immediate: true });
 
+let reloadDialogShowing = false;
+stream.on('_disconnected_', async () => {
+	if (store.state.device.serverDisconnectedBehavior === 'reload') {
+		location.reload();
+	} else if (store.state.device.serverDisconnectedBehavior === 'dialog') {
+		if (reloadDialogShowing) return;
+		reloadDialogShowing = true;
+		const { canceled } = await app.dialog({
+			type: 'warning',
+			title: app.$t('disconnectedFromServer'),
+			text: app.$t('reloadConfirm'),
+			showCancelButton: true
+		});
+		reloadDialogShowing = false;
+		if (!canceled) {
+			location.reload();
+		}
+	}
+});
 
 stream.on('emojiAdded', data => {
 	// TODO
@@ -337,6 +356,26 @@ if (store.getters.isSignedIn) {
 		});
 	});
 
+	main.on('readAllChannels', () => {
+		store.dispatch('mergeMe', {
+			hasUnreadChannel: false
+		});
+	});
+
+	main.on('unreadChannel', () => {
+		store.dispatch('mergeMe', {
+			hasUnreadChannel: true
+		});
+
+		app.sound('channel');
+	});
+
+	main.on('readAllAnnouncements', () => {
+		store.dispatch('mergeMe', {
+			hasUnreadAnnouncement: false
+		});
+	});
+
 	main.on('clientSettingUpdated', x => {
 		store.commit('settings/set', {
 			key: x.key,
diff --git a/src/client/pages/channel-editor.vue b/src/client/pages/channel-editor.vue
new file mode 100644
index 0000000000..0178662119
--- /dev/null
+++ b/src/client/pages/channel-editor.vue
@@ -0,0 +1,128 @@
+<template>
+<div>
+	<portal to="icon"><fa :icon="faSatelliteDish"/></portal>
+	<portal to="title">{{ channelId ? $t('_channel.edit') : $t('_channel.create') }}</portal>
+
+	<div class="_card">
+		<div class="_content">
+			<mk-input v-model="name">{{ $t('name') }}</mk-input>
+
+			<mk-textarea v-model="description">{{ $t('description') }}</mk-textarea>
+
+			<div class="banner">
+				<mk-button v-if="bannerId == null" @click="setBannerImage"><fa :icon="faPlus"/> {{ $t('_channel.setBanner') }}</mk-button>
+				<div v-else-if="bannerUrl">
+					<img :src="bannerUrl" style="width: 100%;"/>
+					<mk-button @click="removeBannerImage()"><fa :icon="faTrashAlt"/> {{ $t('_channel.removeBanner') }}</mk-button>
+				</div>
+			</div>
+		</div>
+		<div class="_footer">
+			<mk-button @click="save()" primary><fa :icon="faSave"/> {{ channelId ? $t('save') : $t('create') }}</mk-button>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { faPlus, faSatelliteDish } from '@fortawesome/free-solid-svg-icons';
+import { faSave, faTrashAlt } from '@fortawesome/free-regular-svg-icons';
+import MkTextarea from '../components/ui/textarea.vue';
+import MkButton from '../components/ui/button.vue';
+import MkInput from '../components/ui/input.vue';
+import { selectFile } from '../scripts/select-file';
+
+export default Vue.extend({
+	components: {
+		MkTextarea, MkButton, MkInput,
+	},
+
+	props: {
+		channelId: {
+			type: String,
+			required: false
+		},
+	},
+
+	data() {
+		return {
+			channel: null,
+			name: null,
+			description: null,
+			bannerUrl: null,
+			bannerId: null,
+			faSave, faTrashAlt, faPlus,faSatelliteDish,
+		};
+	},
+
+	watch: {
+		async bannerId() {
+			if (this.bannerId == null) {
+				this.bannerUrl = null;
+			} else {
+				this.bannerUrl = (await this.$root.api('drive/files/show', {
+					fileId: this.bannerId,
+				})).url;
+			}
+		},
+	},
+
+	async created() {
+		if (this.channelId) {
+			this.channel = await this.$root.api('channels/show', {
+				channelId: this.channelId,
+			});
+
+			this.name = this.channel.name;
+			this.description = this.channel.description;
+			this.bannerId = this.channel.bannerId;
+			this.bannerUrl = this.channel.bannerUrl;
+		}
+	},
+
+	methods: {
+		save() {
+			const params = {
+				name: this.name,
+				description: this.description,
+				bannerId: this.bannerId,
+			};
+
+			if (this.channelId) {
+				params.channelId = this.channelId;
+				this.$root.api('channels/update', params)
+				.then(channel => {
+					this.$root.dialog({
+						type: 'success',
+						iconOnly: true, autoClose: true
+					});
+				});
+			} else {
+				this.$root.api('channels/create', params)
+				.then(channel => {
+					this.$root.dialog({
+						type: 'success',
+						iconOnly: true, autoClose: true
+					});
+					this.$router.push(`/channels/${channel.id}`);
+				});
+			}
+		},
+
+		setBannerImage(e) {
+			selectFile(this, e.currentTarget || e.target, null, false).then(file => {
+				this.bannerId = file.id;
+			});
+		},
+
+		removeBannerImage() {
+			this.bannerId = null;
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/client/pages/channel.vue b/src/client/pages/channel.vue
new file mode 100644
index 0000000000..69631af74b
--- /dev/null
+++ b/src/client/pages/channel.vue
@@ -0,0 +1,190 @@
+<template>
+<div v-if="channel">
+	<portal to="icon"><fa :icon="faSatelliteDish"/></portal>
+	<portal to="title">{{ channel.name }}</portal>
+
+	<div class="wpgynlbz _panel _vMargin" :class="{ hide: !showBanner }">
+		<x-channel-follow-button :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>
+		</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 path="_channel.usersCount" tag="span" style="margin-left: 4px;"><b place="n">{{ channel.usersCount }}</b></i18n></div>
+				<div><fa :icon="faPencilAlt" fixed-width/><i18n path="_channel.notesCount" tag="span" style="margin-left: 4px;"><b place="n">{{ channel.notesCount }}</b></i18n></div>
+			</div>
+			<div class="fade"></div>
+		</div>
+		<div class="description" v-if="channel.description">
+			<mfm :text="channel.description" :is-note="false" :i="$store.state.i"/>
+		</div>
+	</div>
+
+	<x-post-form :channel="channel" class="post-form _panel _vMargin" fixed/>
+
+	<x-timeline class="_vMargin" src="channel" :channel="channelId" @before="before" @after="after"/>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { faSatelliteDish, faUsers, faPencilAlt, faAngleUp, faAngleDown } from '@fortawesome/free-solid-svg-icons';
+import {  } from '@fortawesome/free-regular-svg-icons';
+import MkContainer from '../components/ui/container.vue';
+import XPostForm from '../components/post-form.vue';
+import XTimeline from '../components/timeline.vue';
+import XChannelFollowButton from '../components/channel-follow-button.vue';
+
+export default Vue.extend({
+	metaInfo() {
+		return {
+			title: this.$t('channel') as string
+		};
+	},
+
+	components: {
+		MkContainer,
+		XPostForm,
+		XTimeline,
+		XChannelFollowButton
+	},
+
+	props: {
+		channelId: {
+			type: String,
+			required: true
+		}
+	},
+
+	data() {
+		return {
+			channel: null,
+			showBanner: true,
+			pagination: {
+				endpoint: 'channels/timeline',
+				limit: 10,
+				params: () => ({
+					channelId: this.channelId,
+				})
+			},
+			faSatelliteDish, faUsers, faPencilAlt, faAngleUp, faAngleDown,
+		};
+	},
+
+	watch: {
+		channelId: {
+			async handler() {
+				this.channel = await this.$root.api('channels/show', {
+					channelId: this.channelId,
+				});
+			},
+			immediate: true
+		}
+	},
+
+	created() {
+
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.wpgynlbz {
+	> .subscribe {
+		position: absolute;
+		z-index: 1;
+		top: 16px;
+		left: 16px;
+	}
+
+	> .toggle {
+		position: absolute;
+		z-index: 2;
+    top: 8px;
+		right: 8px;
+		font-size: 1.2em;
+		width: 48px;
+		height: 48px;
+		color: #fff;
+		background: rgba(0, 0, 0, 0.5);
+		border-radius: 100%;
+		
+		> [data-icon] {
+			vertical-align: middle;
+		}
+	}
+	
+	> .banner {
+		position: relative;
+		height: 200px;
+		background-position: center;
+		background-size: cover;
+
+		> .fade {
+			position: absolute;
+			bottom: 0;
+			left: 0;
+			width: 100%;
+			height: 64px;
+			background: linear-gradient(0deg, var(--panel), var(--X15));
+		}
+
+		> .status {
+			position: absolute;
+			z-index: 1;
+			bottom: 16px;
+			right: 16px;
+			padding: 8px 12px;
+			font-size: 80%;
+			background: rgba(0, 0, 0, 0.7);
+			border-radius: 6px;
+			color: #fff;
+		}
+	}
+
+	> .description {
+		padding: 16px;
+	}
+
+	> .hideOverlay {
+		position: absolute;
+		z-index: 1;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		-webkit-backdrop-filter: blur(16px);
+		backdrop-filter: blur(16px);
+		background: rgba(0, 0, 0, 0.3);
+	}
+
+	&.hide {
+		> .subscribe {
+			display: none;
+		}
+
+		> .toggle {
+			top: 0;
+			right: 0;
+			height: 100%;
+			background: transparent;
+		}
+
+		> .banner {
+			height: 42px;
+			filter: blur(8px);
+
+			> * {
+				display: none;
+			}
+		}
+
+		> .description {
+			display: none;
+		}
+	}
+}
+</style>
diff --git a/src/client/pages/channels.vue b/src/client/pages/channels.vue
new file mode 100644
index 0000000000..85804141f1
--- /dev/null
+++ b/src/client/pages/channels.vue
@@ -0,0 +1,86 @@
+<template>
+<div>
+	<portal to="icon"><fa :icon="faSatelliteDish"/></portal>
+	<portal to="title">{{ $t('channel') }}</portal>
+
+	<mk-tab v-model="tab" :items="[{ label: $t('_channel.featured'), value: 'featured', icon: faFireAlt }, { label: $t('_channel.following'), value: 'following', icon: faHeart }, { label: $t('_channel.owned'), value: 'owned', icon: faEdit }]"/>
+
+	<div class="grwlizim featured" v-if="tab === 'featured'">
+		<mk-pagination :pagination="featuredPagination" #default="{items}">
+			<mk-channel-preview v-for="channel in items" class="uveselbe" :channel="channel" :key="channel.id"/>
+		</mk-pagination>
+	</div>
+
+	<div class="grwlizim following" v-if="tab === 'following'">
+		<mk-pagination :pagination="followingPagination" #default="{items}">
+			<mk-channel-preview v-for="channel in items" class="uveselbe" :channel="channel" :key="channel.id"/>
+		</mk-pagination>
+	</div>
+
+	<div class="grwlizim owned" v-if="tab === 'owned'">
+		<mk-button class="new" @click="create()"><fa :icon="faPlus"/></mk-button>
+		<mk-pagination :pagination="ownedPagination" #default="{items}">
+			<mk-channel-preview v-for="channel in items" class="uveselbe" :channel="channel" :key="channel.id"/>
+		</mk-pagination>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { faSatelliteDish, faPlus, faEdit, faFireAlt } from '@fortawesome/free-solid-svg-icons';
+import { faHeart } from '@fortawesome/free-regular-svg-icons';
+import MkChannelPreview from '../components/channel-preview.vue';
+import MkPagination from '../components/ui/pagination.vue';
+import MkButton from '../components/ui/button.vue';
+import MkTab from '../components/tab.vue';
+
+export default Vue.extend({
+	components: {
+		MkChannelPreview, MkPagination, MkButton, MkTab
+	},
+	data() {
+		return {
+			tab: 'featured',
+			featuredPagination: {
+				endpoint: 'channels/featured',
+				limit: 5,
+			},
+			followingPagination: {
+				endpoint: 'channels/followed',
+				limit: 5,
+			},
+			ownedPagination: {
+				endpoint: 'channels/owned',
+				limit: 5,
+			},
+			faSatelliteDish, faPlus, faEdit, faHeart, faFireAlt
+		};
+	},
+	methods: {
+		create() {
+			this.$router.push(`/channels/new`);
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.grwlizim {
+	padding: 16px 0;
+
+	&.my .uveselbe:first-child {
+		margin-top: 16px;
+	}
+
+	.uveselbe:not(:last-child) {
+		margin-bottom: 8px;
+	}
+
+	@media (min-width: 500px) {
+		.uveselbe:not(:last-child) {
+			margin-bottom: 16px;
+		}
+	}
+}
+</style>
diff --git a/src/client/pages/index.home.vue b/src/client/pages/index.home.vue
index 8028040897..45d613162d 100644
--- a/src/client/pages/index.home.vue
+++ b/src/client/pages/index.home.vue
@@ -2,14 +2,15 @@
 <div class="mk-home" v-hotkey.global="keymap">
 	<portal to="header" v-if="showTitle">
 		<button @click="choose" class="_button _kjvfvyph_">
-			<i><fa v-if="$store.state.i.hasUnreadAntenna" :icon="faCircle"/></i>
+			<i><fa v-if="$store.state.i.hasUnreadAntenna || $store.state.i.hasUnreadChannel" :icon="faCircle"/></i>
 			<fa v-if="src === 'home'" :icon="faHome"/>
 			<fa v-if="src === 'local'" :icon="faComments"/>
 			<fa v-if="src === 'social'" :icon="faShareAlt"/>
 			<fa v-if="src === 'global'" :icon="faGlobe"/>
 			<fa v-if="src === 'list'" :icon="faListUl"/>
 			<fa v-if="src === 'antenna'" :icon="faSatellite"/>
-			<span style="margin-left: 8px;">{{ src === 'list' ? list.name : src === 'antenna' ? antenna.name : $t('_timelines.' + src) }}</span>
+			<fa v-if="src === 'channel'" :icon="faSatelliteDish"/>
+			<span style="margin-left: 8px;">{{ src === 'list' ? list.name : src === 'antenna' ? antenna.name : src === 'channel' ? channel.name : $t('_timelines.' + src) }}</span>
 			<fa :icon="menuOpened ? faAngleUp : faAngleDown" style="margin-left: 8px;"/>
 		</button>
 	</portal>
@@ -19,13 +20,13 @@
 	<x-tutorial class="tutorial" v-if="$store.state.settings.tutorial != -1"/>
 
 	<x-post-form class="post-form _panel" fixed v-if="$store.state.device.showFixedPostForm"/>
-	<x-timeline ref="tl" :key="src === 'list' ? `list:${list.id}` : src === 'antenna' ? `antenna:${antenna.id}` : src" :src="src" :list="list ? list.id : null" :antenna="antenna ? antenna.id : null" :sound="true" @before="before()" @after="after()" @queue="queueUpdated"/>
+	<x-timeline ref="tl" :key="src === 'list' ? `list:${list.id}` : src === 'antenna' ? `antenna:${antenna.id}` : src === 'channel' ? `channel:${channel.id}` : src" :src="src" :list="list ? list.id : null" :antenna="antenna ? antenna.id : null" :channel="channel ? channel.id : null" :sound="true" @before="before()" @after="after()" @queue="queueUpdated"/>
 </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, defineAsyncComponent } from 'vue';
-import { faAngleDown, faAngleUp, faHome, faShareAlt, faGlobe, faListUl, faSatellite, faCircle } from '@fortawesome/free-solid-svg-icons';
+import { faAngleDown, faAngleUp, faHome, faShareAlt, faGlobe, faListUl, faSatellite, faSatelliteDish, faCircle } from '@fortawesome/free-solid-svg-icons';
 import { faComments } from '@fortawesome/free-regular-svg-icons';
 import Progress from '../scripts/loading';
 import XTimeline from '../components/timeline.vue';
@@ -57,10 +58,11 @@ export default defineComponent({
 			src: 'home',
 			list: null,
 			antenna: null,
+			channel: null,
 			menuOpened: false,
 			queue: 0,
 			width: 0,
-			faAngleDown, faAngleUp, faHome, faShareAlt, faGlobe, faComments, faListUl, faSatellite, faCircle
+			faAngleDown, faAngleUp, faHome, faShareAlt, faGlobe, faComments, faListUl, faSatellite, faSatelliteDish, faCircle
 		};
 	},
 
@@ -79,16 +81,20 @@ export default defineComponent({
 	watch: {
 		src() {
 			this.showNav = false;
-			this.saveSrc();
 		},
 		list(x) {
 			this.showNav = false;
-			this.saveSrc();
 			if (x != null) this.antenna = null;
+			if (x != null) this.channel = null;
 		},
 		antenna(x) {
 			this.showNav = false;
-			this.saveSrc();
+			if (x != null) this.list = null;
+			if (x != null) this.channel = null;
+		},
+		channel(x) {
+			this.showNav = false;
+			if (x != null) this.antenna = null;
 			if (x != null) this.list = null;
 		},
 	},
@@ -99,6 +105,8 @@ export default defineComponent({
 			this.list = this.$store.state.deviceUser.tl.arg;
 		} else if (this.src === 'antenna') {
 			this.antenna = this.$store.state.deviceUser.tl.arg;
+		} else if (this.src === 'channel') {
+			this.channel = this.$store.state.deviceUser.tl.arg;
 		}
 	},
 
@@ -127,9 +135,10 @@ export default defineComponent({
 		async choose(ev) {
 			if (this.meta == null) return;
 			this.menuOpened = true;
-			const [antennas, lists] = await Promise.all([
+			const [antennas, lists, channels] = await Promise.all([
 				this.$root.api('antennas/list'),
-				this.$root.api('users/lists/list')
+				this.$root.api('users/lists/list'),
+				this.$root.api('channels/followed'),
 			]);
 			const antennaItems = antennas.map(antenna => ({
 				text: antenna.name,
@@ -137,7 +146,8 @@ export default defineComponent({
 				indicate: antenna.hasUnreadNote,
 				action: () => {
 					this.antenna = antenna;
-					this.setSrc('antenna');
+					this.src = 'antenna';
+					this.saveSrc();
 				}
 			}));
 			const listItems = lists.map(list => ({
@@ -145,27 +155,40 @@ export default defineComponent({
 				icon: faListUl,
 				action: () => {
 					this.list = list;
-					this.setSrc('list');
+					this.src = 'list';
+					this.saveSrc();
+				}
+			}));
+			const channelItems = channels.map(channel => ({
+				text: channel.name,
+				icon: faSatelliteDish,
+				indicate: channel.hasUnreadNote,
+				action: () => {
+					// NOTE: チャンネルタイムラインをこのコンポーネントで表示するようにすると投稿フォームはどうするかなどの問題が生じるのでとりあえずページ遷移で
+					//this.channel = channel;
+					//this.src = 'channel';
+					//this.saveSrc();
+					this.$router.push(`/channels/${channel.id}`);
 				}
 			}));
 			this.$root.menu({
 				items: [{
 					text: this.$t('_timelines.home'),
 					icon: faHome,
-					action: () => { this.setSrc('home') }
+					action: () => { this.src = 'home'; this.saveSrc(); }
 				}, this.meta.disableLocalTimeline && !this.$store.state.i.isModerator && !this.$store.state.i.isAdmin ? undefined : {
 					text: this.$t('_timelines.local'),
 					icon: faComments,
-					action: () => { this.setSrc('local') }
+					action: () => { this.src = 'local'; this.saveSrc(); }
 				}, this.meta.disableLocalTimeline && !this.$store.state.i.isModerator && !this.$store.state.i.isAdmin ? undefined : {
 					text: this.$t('_timelines.social'),
 					icon: faShareAlt,
-					action: () => { this.setSrc('social') }
+					action: () => { this.src = 'social'; this.saveSrc(); }
 				}, this.meta.disableGlobalTimeline && !this.$store.state.i.isModerator && !this.$store.state.i.isAdmin ? undefined : {
 					text: this.$t('_timelines.global'),
 					icon: faGlobe,
-					action: () => { this.setSrc('global') }
-				}, antennaItems.length > 0 ? null : undefined, ...antennaItems, listItems.length > 0 ? null : undefined, ...listItems],
+					action: () => { this.src = 'global'; this.saveSrc(); }
+				}, antennaItems.length > 0 ? null : undefined, ...antennaItems, listItems.length > 0 ? null : undefined, ...listItems, channelItems.length > 0 ? null : undefined, ...channelItems],
 				fixed: true,
 				noCenter: true,
 				source: ev.currentTarget || ev.target
@@ -174,14 +197,13 @@ export default defineComponent({
 			});
 		},
 
-		setSrc(src) {
-			this.src = src;
-		},
-
 		saveSrc() {
 			this.$store.commit('deviceUser/setTl', {
 				src: this.src,
-				arg: this.src == 'list' ? this.list : this.antenna
+				arg:
+					this.src === 'list' ? this.list :
+					this.src === 'antenna' ? this.antenna :
+					this.channel
 			});
 		},
 
diff --git a/src/client/pages/instance/emojis.vue b/src/client/pages/instance/emojis.vue
index a67601d3f8..70f9466a35 100644
--- a/src/client/pages/instance/emojis.vue
+++ b/src/client/pages/instance/emojis.vue
@@ -3,7 +3,7 @@
 	<portal to="icon"><fa :icon="faLaugh"/></portal>
 	<portal to="title">{{ $t('customEmojis') }}</portal>
 
-	<section class="_card local">
+	<section class="_card _vMargin local">
 		<div class="_title"><fa :icon="faLaugh"/> {{ $t('customEmojis') }}</div>
 		<div class="_content">
 			<mk-pagination :pagination="pagination" class="emojis" ref="emojis">
@@ -33,7 +33,7 @@
 			<mk-button inline primary @click="add"><fa :icon="faPlus"/> {{ $t('addEmoji') }}</mk-button>
 		</div>
 	</section>
-	<section class="_card remote">
+	<section class="_card _vMargin remote">
 		<div class="_title"><fa :icon="faLaugh"/> {{ $t('customEmojisOfRemote') }}</div>
 		<div class="_content">
 			<mk-input v-model="host" :debounce="true"><span>{{ $t('host') }}</span></mk-input>
diff --git a/src/client/pages/instance/federation.vue b/src/client/pages/instance/federation.vue
index 7b29523969..2e77586ddb 100644
--- a/src/client/pages/instance/federation.vue
+++ b/src/client/pages/instance/federation.vue
@@ -66,7 +66,7 @@ import MkButton from '../../components/ui/button.vue';
 import MkInput from '../../components/ui/input.vue';
 import MkSelect from '../../components/ui/select.vue';
 import MkPagination from '../../components/ui/pagination.vue';
-import MkInstanceInfo from './federation.instance.vue';
+import MkInstanceInfo from './instance.vue';
 
 export default defineComponent({
 	metaInfo() {
diff --git a/src/client/pages/instance/index.queue-chart.vue b/src/client/pages/instance/index.queue-chart.vue
new file mode 100644
index 0000000000..3b7823d924
--- /dev/null
+++ b/src/client/pages/instance/index.queue-chart.vue
@@ -0,0 +1,198 @@
+<template>
+<mk-container :body-togglable="false">
+	<template #header><slot name="title"></slot></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></template>
+
+	<div class="_content _table">
+		<div class="_row">
+			<div class="_cell"><div class="_label">Process</div>{{ activeSincePrevTick | number }}</div>
+			<div class="_cell"><div class="_label">Active</div>{{ active | number }}</div>
+			<div class="_cell"><div class="_label">Waiting</div>{{ waiting | number }}</div>
+			<div class="_cell"><div class="_label">Delayed</div>{{ delayed | number }}</div>
+		</div>
+	</div>
+	<div class="_content" style="margin-bottom: -8px;">
+		<canvas ref="chart"></canvas>
+	</div>
+</mk-container>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import Chart from 'chart.js';
+import { faPlay, faPause } from '@fortawesome/free-solid-svg-icons';
+import MkContainer from '../../components/ui/container.vue';
+
+const alpha = (hex, a) => {
+	const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)!;
+	const r = parseInt(result[1], 16);
+	const g = parseInt(result[2], 16);
+	const b = parseInt(result[3], 16);
+	return `rgba(${r}, ${g}, ${b}, ${a})`;
+};
+
+export default Vue.extend({
+	components: {
+		MkContainer,
+	},
+
+	props: {
+		domain: {
+			required: true
+		},
+		connection: {
+			required: true
+		},
+	},
+
+	data() {
+		return {
+			chart: null,
+			activeSincePrevTick: 0,
+			active: 0,
+			waiting: 0,
+			delayed: 0,
+			paused: false,
+			faPlay, faPause
+		}
+	},
+
+	mounted() {
+		// TODO: var(--panel)の色が暗いか明るいかで判定する
+		const gridColor = this.$store.state.device.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
+
+		Chart.defaults.global.defaultFontColor = getComputedStyle(document.documentElement).getPropertyValue('--fg');
+
+		this.chart = new Chart(this.$refs.chart, {
+			type: 'bar',
+			data: {
+				labels: [],
+				datasets: [{
+					label: 'Process',
+					pointRadius: 0,
+					lineTension: 0,
+					borderWidth: 0,
+					backgroundColor: '#8BC34A',
+					data: []
+				}, {
+					label: 'Active',
+					pointRadius: 0,
+					lineTension: 0,
+					borderWidth: 0,
+					backgroundColor: '#03A9F4',
+					data: []
+				}, {
+					label: 'Waiting',
+					pointRadius: 0,
+					lineTension: 0,
+					borderWidth: 0,
+					backgroundColor: '#FFC107',
+					data: []
+				}, {
+					label: 'Delayed',
+					order: -1,
+					type: 'line',
+					pointRadius: 0,
+					lineTension: 0,
+					borderWidth: 2,
+					borderColor: '#F44336',
+					borderDash: [5, 5],
+					fill: false,
+					data: []
+				}]
+			},
+			options: {
+				aspectRatio: 3,
+				layout: {
+					padding: {
+						left: 0,
+						right: 0,
+						top: 8,
+						bottom: 0
+					}
+				},
+				legend: {
+					position: 'bottom',
+					labels: {
+						boxWidth: 16,
+					}
+				},
+				scales: {
+					xAxes: [{
+						stacked: true,
+						gridLines: {
+							display: false,
+							color: gridColor,
+							zeroLineColor: gridColor,
+						},
+						ticks: {
+							display: false
+						}
+					}],
+					yAxes: [{
+						stacked: true,
+						position: 'right',
+						gridLines: {
+							display: true,
+							color: gridColor,
+							zeroLineColor: gridColor,
+						},
+						ticks: {
+							display: false,
+						}
+					}]
+				},
+				tooltips: {
+					intersect: false,
+					mode: 'index',
+				}
+			}
+		});
+
+		this.connection.on('stats', this.onStats);
+		this.connection.on('statsLog', this.onStatsLog);
+	},
+
+	beforeDestroy() {
+		this.connection.off('stats', this.onStats);
+		this.connection.off('statsLog', this.onStatsLog);
+	},
+
+	methods: {
+		onStats(stats) {
+			if (this.paused) return;
+			this.activeSincePrevTick = stats[this.domain].activeSincePrevTick;
+			this.active = stats[this.domain].active;
+			this.waiting = stats[this.domain].waiting;
+			this.delayed = stats[this.domain].delayed;
+			this.chart.data.labels.push('');
+			this.chart.data.datasets[0].data.push(stats[this.domain].activeSincePrevTick);
+			this.chart.data.datasets[1].data.push(stats[this.domain].active);
+			this.chart.data.datasets[2].data.push(stats[this.domain].waiting);
+			this.chart.data.datasets[3].data.push(stats[this.domain].delayed);
+			if (this.chart.data.datasets[0].data.length > 100) {
+				this.chart.data.labels.shift();
+				this.chart.data.datasets[0].data.shift();
+				this.chart.data.datasets[1].data.shift();
+				this.chart.data.datasets[2].data.shift();
+				this.chart.data.datasets[3].data.shift();
+			}
+			this.chart.update();
+		},
+
+		onStatsLog(statsLog) {
+			for (const stats of [...statsLog].reverse()) {
+				this.onStats(stats);
+			}
+		},
+
+		pause() {
+			this.paused = true;
+		},
+
+		resume() {
+			this.paused = false;
+		},
+	}
+});
+</script>
diff --git a/src/client/pages/instance/index.vue b/src/client/pages/instance/index.vue
index 0ba5d763b0..2e2bd0c3fc 100644
--- a/src/client/pages/instance/index.vue
+++ b/src/client/pages/instance/index.vue
@@ -1,113 +1,204 @@
 <template>
-<div v-if="meta" class="xhexznfu">
+<div v-if="meta" class="xhexznfu" v-size="{ min: [1600] }">
 	<portal to="icon"><fa :icon="faServer"/></portal>
 	<portal to="title">{{ $t('instance') }}</portal>
 
-	<mk-instance-stats style="margin-bottom: var(--margin);"/>
+	<mk-folder>
+		<template #header><fa :icon="faTachometerAlt"/> {{ $t('overview') }}</template>
 
-	<section class="_card logs">
-		<div class="_title"><fa :icon="faStream"/> {{ $t('serverLogs') }}</div>
-		<div class="_content">
-			<div class="_inputs">
-				<mk-input v-model="logDomain" :debounce="true">
-					<span>{{ $t('domain') }}</span>
-				</mk-input>
-				<mk-select v-model="logLevel">
-					<template #label>{{ $t('level') }}</template>
-					<option value="all">{{ $t('levels.all') }}</option>
-					<option value="info">{{ $t('levels.info') }}</option>
-					<option value="success">{{ $t('levels.success') }}</option>
-					<option value="warning">{{ $t('levels.warning') }}</option>
-					<option value="error">{{ $t('levels.error') }}</option>
-					<option value="debug">{{ $t('levels.debug') }}</option>
-				</mk-select>
-			</div>
+		<div class="sboqnrfi" :style="{ gridTemplateRows: overviewHeight }">
+			<mk-instance-stats :chart-limit="300" :detailed="true" class="stats" ref="stats"/>
 
-			<div class="logs">
-				<code v-for="log in logs" :key="log.id" :class="log.level">
-					<details>
-						<summary><mk-time :time="log.createdAt"/> [{{ log.domain.join('.') }}] {{ log.message }}</summary>
-						<vue-json-pretty v-if="log.data" :data="log.data"></vue-json-pretty>
-					</details>
-				</code>
-			</div>
-		</div>
-		<div class="_footer">
-			<mk-button @click="deleteAllLogs()" primary><fa :icon="faTrashAlt"/> {{ $t('deleteAll') }}</mk-button>
-		</div>
-	</section>
+			<div class="column">
+				<mk-container :body-togglable="true" :resize-base-el="() => $el" class="info">
+					<template #header><fa :icon="faInfoCircle"/>{{ $t('instanceInfo') }}</template>
 
-	<section class="_card chart">
-		<div class="_title"><fa :icon="faMicrochip"/> {{ $t('cpuAndMemory') }}</div>
-		<div class="_content" style="margin-top: -8px; margin-bottom: -12px;">
-			<canvas ref="cpumem"></canvas>
-		</div>
-		<div class="_content" v-if="serverInfo">
-			<div class="table">
-				<div class="row">
-					<div class="cell"><div class="label">CPU</div>{{ serverInfo.cpu.model }}</div>
-				</div>
-				<div class="row">
-					<div class="cell"><div class="label">MEM total</div>{{ bytes(serverInfo.mem.total) }}</div>
-					<div class="cell"><div class="label">MEM used</div>{{ bytes(memUsage) }} ({{ (memUsage / serverInfo.mem.total * 100).toFixed(0) }}%)</div>
-					<div class="cell"><div class="label">MEM free</div>{{ bytes(serverInfo.mem.total - memUsage) }} ({{ ((serverInfo.mem.total - memUsage) / serverInfo.mem.total * 100).toFixed(0) }}%)</div>
-				</div>
-			</div>
-		</div>
-	</section>
-	<section class="_card chart">
-		<div class="_title"><fa :icon="faHdd"/> {{ $t('disk') }}</div>
-		<div class="_content" style="margin-top: -8px; margin-bottom: -12px;">
-			<canvas ref="disk"></canvas>
-		</div>
-		<div class="_content" v-if="serverInfo">
-			<div class="table">
-				<div class="row">
-					<div class="cell"><div class="label">Disk total</div>{{ bytes(serverInfo.fs.total) }}</div>
-					<div class="cell"><div class="label">Disk used</div>{{ bytes(serverInfo.fs.used) }} ({{ (serverInfo.fs.used / serverInfo.fs.total * 100).toFixed(0) }}%)</div>
-					<div class="cell"><div class="label">Disk free</div>{{ bytes(serverInfo.fs.total - serverInfo.fs.used) }} ({{ ((serverInfo.fs.total - serverInfo.fs.used) / serverInfo.fs.total * 100).toFixed(0) }}%)</div>
-				</div>
-			</div>
-		</div>
-	</section>
-	<section class="_card chart">
-		<div class="_title"><fa :icon="faExchangeAlt"/> {{ $t('network') }}</div>
-		<div class="_content" style="margin-top: -8px; margin-bottom: -12px;">
-			<canvas ref="net"></canvas>
-		</div>
-		<div class="_content" v-if="serverInfo">
-			<div class="table">
-				<div class="row">
-					<div class="cell"><div class="label">Interface</div>{{ serverInfo.net.interface }}</div>
-				</div>
-			</div>
-		</div>
-	</section>
+					<div class="_content">
+						<div class="_keyValue"><b>Misskey</b><span>v{{ version }}</span></div>
+					</div>
+					<div class="_content" v-if="serverInfo">
+						<div class="_keyValue"><b>Node.js</b><span>{{ serverInfo.node }}</span></div>
+						<div class="_keyValue"><b>PostgreSQL</b><span>v{{ serverInfo.psql }}</span></div>
+						<div class="_keyValue"><b>Redis</b><span>v{{ serverInfo.redis }}</span></div>
+					</div>
+				</mk-container>
+				
+				<mk-container :body-togglable="true" :scrollable="true" :resize-base-el="() => $el" class="db">
+					<template #header><fa :icon="faDatabase"/>{{ $t('database') }}</template>
 
-	<section class="_card info">
-		<div class="_content table">
-			<div><b>Misskey</b><span>v{{ version }}</span></div>
+					<div class="_content" v-if="dbInfo">
+						<table style="border-collapse: collapse; width: 100%;">
+							<tr style="opacity: 0.7;">
+								<th style="text-align: left; padding: 0 8px 8px 0;">Table</th>
+								<th style="text-align: left; padding: 0 8px 8px 0;">Records</th>
+								<th style="text-align: left; padding: 0 0 8px 0;">Size</th>
+							</tr>
+							<tr v-for="table in dbInfo" :key="table[0]">
+								<th style="text-align: left; padding: 0 8px 0 0; word-break: break-all;">{{ table[0] }}</th>
+								<td style="padding: 0 8px 0 0;">{{ number(table[1].count) }}</td>
+								<td style="padding: 0; opacity: 0.7;">{{ bytes(table[1].size) }}</td>
+							</tr>
+						</table>
+					</div>
+				</mk-container>
+
+				<mkw-federation class="fed" :body-togglable="true" :scrollable="true"/>
+			</div>
 		</div>
-		<div class="_content table" v-if="serverInfo">
-			<div><b>Node.js</b><span>{{ serverInfo.node }}</span></div>
-			<div><b>PostgreSQL</b><span>v{{ serverInfo.psql }}</span></div>
-			<div><b>Redis</b><span>v{{ serverInfo.redis }}</span></div>
+	</mk-folder>
+
+	<mk-folder style="margin: var(--margin) 0;">
+		<template #header><fa :icon="faHeartbeat"/> {{ $t('metrics') }}</template>
+
+		<div class="segusily">
+			<mk-container :body-togglable="false" :resize-base-el="() => $el">
+				<template #header><fa :icon="faMicrochip"/>{{ $t('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></template>
+
+				<div class="_content" style="margin-top: -8px; margin-bottom: -12px;">
+					<canvas ref="cpumem"></canvas>
+				</div>
+				<div class="_content" v-if="serverInfo">
+					<div class="_table">
+						<!--
+						<div class="_row">
+							<div class="_cell"><div class="_label">CPU</div>{{ serverInfo.cpu.model }}</div>
+						</div>
+						-->
+						<div class="_row">
+							<div class="_cell"><div class="_label">MEM total</div>{{ bytes(serverInfo.mem.total) }}</div>
+							<div class="_cell"><div class="_label">MEM used</div>{{ bytes(memUsage) }} ({{ (memUsage / serverInfo.mem.total * 100).toFixed(0) }}%)</div>
+							<div class="_cell"><div class="_label">MEM free</div>{{ bytes(serverInfo.mem.total - memUsage) }} ({{ ((serverInfo.mem.total - memUsage) / serverInfo.mem.total * 100).toFixed(0) }}%)</div>
+						</div>
+					</div>
+				</div>
+			</mk-container>
+
+			<mk-container :body-togglable="false" :resize-base-el="() => $el">
+				<template #header><fa :icon="faHdd"/> {{ $t('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></template>
+
+				<div class="_content" style="margin-top: -8px; margin-bottom: -12px;">
+					<canvas ref="disk"></canvas>
+				</div>
+				<div class="_content" v-if="serverInfo">
+					<div class="_table">
+						<div class="_row">
+							<div class="_cell"><div class="_label">Disk total</div>{{ bytes(serverInfo.fs.total) }}</div>
+							<div class="_cell"><div class="_label">Disk used</div>{{ bytes(serverInfo.fs.used) }} ({{ (serverInfo.fs.used / serverInfo.fs.total * 100).toFixed(0) }}%)</div>
+							<div class="_cell"><div class="_label">Disk free</div>{{ bytes(serverInfo.fs.total - serverInfo.fs.used) }} ({{ ((serverInfo.fs.total - serverInfo.fs.used) / serverInfo.fs.total * 100).toFixed(0) }}%)</div>
+						</div>
+					</div>
+				</div>
+			</mk-container>
+
+			<mk-container :body-togglable="false" :resize-base-el="() => $el">
+				<template #header><fa :icon="faExchangeAlt"/> {{ $t('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></template>
+
+				<div class="_content" style="margin-top: -8px; margin-bottom: -12px;">
+					<canvas ref="net"></canvas>
+				</div>
+				<div class="_content" v-if="serverInfo">
+					<div class="_table">
+						<div class="_row">
+							<div class="_cell"><div class="_label">Interface</div>{{ serverInfo.net.interface }}</div>
+						</div>
+					</div>
+				</div>
+			</mk-container>
 		</div>
-	</section>
+	</mk-folder>
+
+	<mk-folder>
+		<template #header><fa :icon="faClipboardList"/> {{ $t('jobQueue') }}</template>
+
+		<div class="vkyrmkwb" :style="{ gridTemplateRows: queueHeight }">
+			<mk-container :body-togglable="false" :scrollable="true" :resize-base-el="() => $el">
+				<template #header><fa :icon="faExclamationTriangle"/> {{ $t('delayed') }}</template>
+
+				<div class="_content">
+					<div class="_keyValue" v-for="job in jobs" :key="job[0]">
+						<button class="_button" @click="showInstanceInfo(job[0])">{{ job[0] }}</button>
+						<div style="text-align: right;">{{ number(job[1]) }} jobs</div>
+					</div>
+				</div>
+			</mk-container>
+			<x-queue :connection="queueConnection" domain="inbox" ref="queue" class="queue">
+				<template #title><fa :icon="faExchangeAlt"/> In</template>
+			</x-queue>
+			<x-queue :connection="queueConnection" domain="deliver" class="queue">
+				<template #title><fa :icon="faExchangeAlt"/> Out</template>
+			</x-queue>
+		</div>
+	</mk-folder>
+
+	<mk-folder>
+		<template #header><fa :icon="faStream"/> {{ $t('logs') }}</template>
+
+		<div class="uwuemslx">
+			<mk-container :body-togglable="false" :resize-base-el="() => $el">
+				<template #header><fa :icon="faInfoCircle"/>{{ $t('') }}</template>
+
+				<div class="_content">
+					<div class="_keyValue" v-for="log in modLogs">
+						<b>{{ log.type }}</b><span>by {{ log.user.username }}</span><mk-time :time="log.createdAt" style="opacity: 0.7;"/>
+					</div>
+				</div>
+			</mk-container>
+
+			<section class="_card logs">
+				<div class="_title"><fa :icon="faStream"/> {{ $t('serverLogs') }}</div>
+				<div class="_content">
+					<div class="_inputs">
+						<mk-input v-model="logDomain" :debounce="true">
+							<span>{{ $t('domain') }}</span>
+						</mk-input>
+						<mk-select v-model="logLevel">
+							<template #label>{{ $t('level') }}</template>
+							<option value="all">{{ $t('levels.all') }}</option>
+							<option value="info">{{ $t('levels.info') }}</option>
+							<option value="success">{{ $t('levels.success') }}</option>
+							<option value="warning">{{ $t('levels.warning') }}</option>
+							<option value="error">{{ $t('levels.error') }}</option>
+							<option value="debug">{{ $t('levels.debug') }}</option>
+						</mk-select>
+					</div>
+
+					<div class="logs">
+						<code v-for="log in logs" :key="log.id" :class="log.level">
+							<details>
+								<summary><mk-time :time="log.createdAt"/> [{{ log.domain.join('.') }}] {{ log.message }}</summary>
+								<vue-json-pretty v-if="log.data" :data="log.data"></vue-json-pretty>
+							</details>
+						</code>
+					</div>
+				</div>
+				<div class="_footer">
+					<mk-button @click="deleteAllLogs()" primary><fa :icon="faTrashAlt"/> {{ $t('deleteAll') }}</mk-button>
+				</div>
+			</section>
+		</div>
+	</mk-folder>
 </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faServer, faExchangeAlt, faMicrochip, faHdd, faStream, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
+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 VueJsonPretty from 'vue-json-pretty';
 import MkInstanceStats from '../../components/instance-stats.vue';
 import MkButton from '../../components/ui/button.vue';
 import MkSelect from '../../components/ui/select.vue';
 import MkInput from '../../components/ui/input.vue';
+import MkContainer from '../../components/ui/container.vue';
+import MkFolder from '../../components/ui/folder.vue';
+import MkwFederation from '../../widgets/federation.vue';
 import { version, url } from '../../config';
 import bytes from '../../filters/bytes';
+import XQueue from './index.queue-chart.vue';
+import MkInstanceInfo from './instance.vue';
 
 const alpha = (hex, a) => {
 	const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)!;
@@ -129,7 +220,11 @@ export default defineComponent({
 		MkButton,
 		MkSelect,
 		MkInput,
-		VueJsonPretty
+		MkContainer,
+		MkFolder,
+		MkwFederation,
+		XQueue,
+		VueJsonPretty,
 	},
 
 	data() {
@@ -139,13 +234,20 @@ export default defineComponent({
 			stats: null,
 			serverInfo: null,
 			connection: null,
+			queueConnection: this.$root.stream.useSharedConnection('queueStats'),
 			memUsage: 0,
 			chartCpuMem: null,
 			chartNet: null,
+			jobs: [],
 			logs: [],
 			logLevel: 'all',
 			logDomain: '',
-			faServer, faExchangeAlt, faMicrochip, faHdd, faStream, faTrashAlt
+			modLogs: [],
+			dbInfo: null,
+			overviewHeight: '1fr',
+			queueHeight: '1fr',
+			paused: false,
+			faPlay, faPause, faDatabase, faServer, faExchangeAlt, faMicrochip, faHdd, faStream, faTrashAlt, faInfoCircle, faExclamationTriangle, faTachometerAlt, faHeartbeat, faClipboardList,
 		}
 	},
 
@@ -166,9 +268,18 @@ export default defineComponent({
 		}
 	},
 
+	created() {
+		this.$store.commit('setFullView', true);
+	},
+
 	mounted() {
 		this.fetchLogs();
+		this.fetchJobs();
+		this.fetchModLogs();
 
+		// TODO: var(--panel)の色が暗いか明るいかで判定する
+		const gridColor = this.$store.state.device.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
+	
 		Chart.defaults.global.defaultFontColor = getComputedStyle(document.documentElement).getPropertyValue('--fg');
 
 		this.chartCpuMem = new Chart(this.$refs.cpumem, {
@@ -221,14 +332,21 @@ export default defineComponent({
 				scales: {
 					xAxes: [{
 						gridLines: {
-							display: false
+							display: false,
+							color: gridColor,
+							zeroLineColor: gridColor,
 						},
 						ticks: {
-							display: false
+							display: false,
 						}
 					}],
 					yAxes: [{
 						position: 'right',
+						gridLines: {
+							display: true,
+							color: gridColor,
+							zeroLineColor: gridColor,
+						},
 						ticks: {
 							display: false,
 							max: 100
@@ -283,7 +401,9 @@ export default defineComponent({
 				scales: {
 					xAxes: [{
 						gridLines: {
-							display: false
+							display: false,
+							color: gridColor,
+							zeroLineColor: gridColor,
 						},
 						ticks: {
 							display: false
@@ -291,6 +411,11 @@ export default defineComponent({
 					}],
 					yAxes: [{
 						position: 'right',
+						gridLines: {
+							display: true,
+							color: gridColor,
+							zeroLineColor: gridColor,
+						},
 						ticks: {
 							display: false,
 						}
@@ -344,7 +469,9 @@ export default defineComponent({
 				scales: {
 					xAxes: [{
 						gridLines: {
-							display: false
+							display: false,
+							color: gridColor,
+							zeroLineColor: gridColor,
 						},
 						ticks: {
 							display: false
@@ -352,6 +479,11 @@ export default defineComponent({
 					}],
 					yAxes: [{
 						position: 'right',
+						gridLines: {
+							display: true,
+							color: gridColor,
+							zeroLineColor: gridColor,
+						},
 						ticks: {
 							display: false,
 						}
@@ -374,6 +506,31 @@ export default defineComponent({
 				id: Math.random().toString().substr(2, 8),
 				length: 150
 			});
+
+			this.$nextTick(() => {
+				this.queueConnection.send('requestLog', {
+					id: Math.random().toString().substr(2, 8),
+					length: 200
+				});
+			});
+		});
+
+		this.$root.api('admin/get-table-stats', {}).then(res => {
+			this.dbInfo = Object.entries(res).sort((a, b) => b[1].size - a[1].size);
+		});
+
+		this.$nextTick(() => {
+			new ResizeObserver((entries, observer) => {
+				if (this.$refs.stats && this.$refs.stats.$el) {
+					this.overviewHeight = this.$refs.stats.$el.offsetHeight + 'px';
+				}
+			}).observe(this.$refs.stats.$el);
+
+			new ResizeObserver((entries, observer) => {
+				if (this.$refs.queue && this.$refs.queue.$el) {
+					this.queueHeight = this.$refs.queue.$el.offsetHeight + 'px';
+				}
+			}).observe(this.$refs.queue.$el);
 		});
 	},
 
@@ -381,9 +538,23 @@ export default defineComponent({
 		this.connection.off('stats', this.onStats);
 		this.connection.off('statsLog', this.onStatsLog);
 		this.connection.dispose();
+		this.queueConnection.dispose();
+		this.$store.commit('setFullView', false);
 	},
 
 	methods: {
+		async showInstanceInfo(q) {
+			let instance = q;
+			if (typeof q === 'string') {
+				instance = await this.$root.api('federation/show-instance', {
+					host: q
+				});
+			}
+			this.$root.new(MkInstanceInfo, {
+				instance: instance
+			});
+		},
+
 		fetchLogs() {
 			this.$root.api('admin/logs', {
 				level: this.logLevel === 'all' ? null : this.logLevel,
@@ -394,6 +565,18 @@ export default defineComponent({
 			});
 		},
 
+		fetchJobs() {
+			this.$root.api('admin/queue/deliver-delayed', {}).then(jobs => {
+				this.jobs = jobs;
+			});
+		},
+
+		fetchModLogs() {
+			this.$root.api('admin/show-moderation-logs', {}).then(logs => {
+				this.modLogs = logs;
+			});
+		},
+
 		deleteAllLogs() {
 			this.$root.api('admin/delete-logs').then(() => {
 				this.$root.dialog({
@@ -404,6 +587,8 @@ export default defineComponent({
 		},
 
 		onStats(stats) {
+			if (this.paused) return;
+
 			const cpu = (stats.cpu * 100).toFixed(0);
 			const memActive = (stats.mem.active / this.serverInfo.mem.total * 100).toFixed(0);
 			const memUsed = (stats.mem.used / this.serverInfo.mem.total * 100).toFixed(0);
@@ -442,13 +627,97 @@ export default defineComponent({
 			}
 		},
 
-		bytes
+		bytes,
+
+		pause() {
+			this.paused = true;
+		},
+
+		resume() {
+			this.paused = false;
+		},
 	}
 });
 </script>
 
 <style lang="scss" scoped>
 .xhexznfu {
+	&.min-width_1600px {
+		.sboqnrfi {
+			display: grid;
+			grid-template-columns: 3.2fr 1fr;
+			grid-template-rows: 1fr;
+			gap: 16px 16px;
+
+			> .stats {
+				height: min-content;
+			}
+
+			> .column {
+				display: flex;
+				flex-direction: column;
+
+				> .info {
+					flex-shrink: 0;
+					flex-grow: 0;
+				}
+
+				> .db {
+					flex: 1;
+					flex-grow: 0;
+					height: 100%;
+				}
+
+				> .fed {
+					flex: 1;
+					flex-grow: 0;
+					height: 100%;
+				}
+
+				> *:not(:last-child) {
+					margin-bottom: var(--margin);
+				}
+			}
+		}
+
+		.segusily {
+			display: grid;
+			grid-template-columns: 1fr 1fr 1fr;
+			grid-template-rows: 1fr;
+			gap: 16px 16px;
+		}
+
+		.vkyrmkwb {
+			display: grid;
+			grid-template-columns: 0.5fr 1fr 1fr;
+			grid-template-rows: 1fr;
+			gap: 16px 16px;
+			margin-bottom: var(--margin);
+
+			> .queue {
+				height: min-content;
+			}
+
+			> * {
+				margin-bottom: 0;
+			}
+		}
+
+		.uwuemslx {
+			display: grid;
+			grid-template-columns: 2fr 3fr;
+			grid-template-rows: 1fr;
+			gap: 16px 16px;
+			height: 400px;
+		}
+	}
+
+	.vkyrmkwb {
+		> * {
+			margin-bottom: var(--margin);
+		}
+	}
+
 	> .stats {
 		display: flex;
 		justify-content: space-between;
@@ -494,49 +763,5 @@ export default defineComponent({
 			}
 		}
 	}
-
-	> .chart {
-		> ._content {
-			> .table {
-				> .row {
-					display: flex;
-
-					&:not(:last-child) {
-						margin-bottom: 16px;
-
-						@media (max-width: 500px) {
-							margin-bottom: 8px;
-						}
-					}
-
-					> .cell {
-						flex: 1;
-
-						> .label {
-							font-size: 80%;
-							opacity: 0.7;
-
-							> .icon {
-								margin-right: 4px;
-								display: none;
-							}
-						}
-					}
-				}
-			}
-		}
-	}
-
-	> .info {
-		> .table {
-			> div {
-				display: flex;
-
-				> * {
-					flex: 1;
-				}
-			}
-		}
-	}
 }
 </style>
diff --git a/src/client/pages/instance/federation.instance.vue b/src/client/pages/instance/instance.vue
similarity index 80%
rename from src/client/pages/instance/federation.instance.vue
rename to src/client/pages/instance/instance.vue
index c51303942d..81312a0cf3 100644
--- a/src/client/pages/instance/federation.instance.vue
+++ b/src/client/pages/instance/instance.vue
@@ -2,69 +2,69 @@
 <x-window @closed="() => { $emit('closed'); destroyDom(); }" :no-padding="true" :width="520" :height="500">
 	<template #header>{{ instance.host }}</template>
 	<div class="mk-instance-info">
-		<div class="table info">
-			<div class="row">
-				<div class="cell">
-					<div class="label">{{ $t('software') }}</div>
-					<div class="data">{{ instance.softwareName || '?' }}</div>
+		<div class="_table">
+			<div class="_row">
+				<div class="_cell">
+					<div class="_label">{{ $t('software') }}</div>
+					<div class="_data">{{ instance.softwareName || '?' }}</div>
 				</div>
-				<div class="cell">
-					<div class="label">{{ $t('version') }}</div>
-					<div class="data">{{ instance.softwareVersion || '?' }}</div>
+				<div class="_cell">
+					<div class="_label">{{ $t('version') }}</div>
+					<div class="_data">{{ instance.softwareVersion || '?' }}</div>
 				</div>
 			</div>
 		</div>
-		<div class="table data">
-			<div class="row">
-				<div class="cell">
-					<div class="label"><fa :icon="faCrosshairs" fixed-width class="icon"/>{{ $t('registeredAt') }}</div>
-					<div class="data">{{ new Date(instance.caughtAt).toLocaleString() }} (<mk-time :time="instance.caughtAt"/>)</div>
+		<div class="_table data">
+			<div class="_row">
+				<div class="_cell">
+					<div class="_label">{{ $t('registeredAt') }}</div>
+					<div class="_data">{{ new Date(instance.caughtAt).toLocaleString() }} (<mk-time :time="instance.caughtAt"/>)</div>
 				</div>
 			</div>
-			<div class="row">
-				<div class="cell">
-					<div class="label"><fa :icon="faCloudDownloadAlt" fixed-width class="icon"/>{{ $t('following') }}</div>
-					<div class="data clickable" @click="showFollowing()">{{ number(instance.followingCount) }}</div>
+			<div class="_row">
+				<div class="_cell">
+					<div class="_label">{{ $t('following') }}</div>
+					<button class="_data _textButton" @click="showFollowing()">{{ number(instance.followingCount) }}</button>
 				</div>
-				<div class="cell">
-					<div class="label"><fa :icon="faCloudUploadAlt" fixed-width class="icon"/>{{ $t('followers') }}</div>
-					<div class="data clickable" @click="showFollowers()">{{ number(instance.followersCount) }}</div>
+				<div class="_cell">
+					<div class="_label">{{ $t('followers') }}</div>
+					<button class="_data _textButton" @click="showFollowers()">{{ number(instance.followersCount) }}</button>
 				</div>
 			</div>
-			<div class="row">
-				<div class="cell">
-					<div class="label"><fa :icon="faUsers" fixed-width class="icon"/>{{ $t('users') }}</div>
-					<div class="data clickable" @click="showUsers()">{{ number(instance.usersCount) }}</div>
+			<div class="_row">
+				<div class="_cell">
+					<div class="_label">{{ $t('users') }}</div>
+					<button class="_data _textButton" @click="showUsers()">{{ number(instance.usersCount) }}</button>
 				</div>
-				<div class="cell">
-					<div class="label"><fa :icon="faPencilAlt" fixed-width class="icon"/>{{ $t('notes') }}</div>
-					<div class="data">{{ number(instance.notesCount) }}</div>
+				<div class="_cell">
+					<div class="_label">{{ $t('notes') }}</div>
+					<div class="_data">{{ number(instance.notesCount) }}</div>
 				</div>
 			</div>
-			<div class="row">
-				<div class="cell">
-					<div class="label"><fa :icon="faFileImage" fixed-width class="icon"/>{{ $t('files') }}</div>
-					<div class="data">{{ number(instance.driveFiles) }}</div>
+			<div class="_row">
+				<div class="_cell">
+					<div class="_label">{{ $t('files') }}</div>
+					<div class="_data">{{ number(instance.driveFiles) }}</div>
 				</div>
-				<div class="cell">
-					<div class="label"><fa :icon="faDatabase" fixed-width class="icon"/>{{ $t('storageUsage') }}</div>
-					<div class="data">{{ bytes(instance.driveUsage) }}</div>
+				<div class="_cell">
+					<div class="_label">{{ $t('storageUsage') }}</div>
+					<div class="_data">{{ bytes(instance.driveUsage) }}</div>
 				</div>
 			</div>
-			<div class="row">
-				<div class="cell">
-					<div class="label"><fa :icon="faLongArrowAltUp" fixed-width class="icon"/>{{ $t('latestRequestSentAt') }}</div>
-					<div class="data"><mk-time v-if="instance.latestRequestSentAt" :time="instance.latestRequestSentAt"/><span v-else>N/A</span></div>
+			<div class="_row">
+				<div class="_cell">
+					<div class="_label">{{ $t('latestRequestSentAt') }}</div>
+					<div class="_data"><mk-time v-if="instance.latestRequestSentAt" :time="instance.latestRequestSentAt"/><span v-else>N/A</span></div>
 				</div>
-				<div class="cell">
-					<div class="label"><fa :icon="faTrafficLight" fixed-width class="icon"/>{{ $t('latestStatus') }}</div>
-					<div class="data">{{ instance.latestStatus ? instance.latestStatus : 'N/A' }}</div>
+				<div class="_cell">
+					<div class="_label">{{ $t('latestStatus') }}</div>
+					<div class="_data">{{ instance.latestStatus ? instance.latestStatus : 'N/A' }}</div>
 				</div>
 			</div>
-			<div class="row">
-				<div class="cell">
-					<div class="label"><fa :icon="faLongArrowAltDown" fixed-width class="icon"/>{{ $t('latestRequestReceivedAt') }}</div>
-					<div class="data"><mk-time v-if="instance.latestRequestReceivedAt" :time="instance.latestRequestReceivedAt"/><span v-else>N/A</span></div>
+			<div class="_row">
+				<div class="_cell">
+					<div class="_label">{{ $t('latestRequestReceivedAt') }}</div>
+					<div class="_data"><mk-time v-if="instance.latestRequestReceivedAt" :time="instance.latestRequestReceivedAt"/><span v-else>N/A</span></div>
 				</div>
 			</div>
 		</div>
@@ -489,39 +489,12 @@ export default defineComponent({
 .mk-instance-info {
 	overflow: auto;
 
-	> .table {
+	> ._table {
 		padding: 0 32px;
 
 		@media (max-width: 500px) {
 			padding: 0 16px;
 		}
-
-		> .row {
-			display: flex;
-
-			&:not(:last-child) {
-				margin-bottom: 8px;
-			}
-
-			> .cell {
-				flex: 1;
-
-				> .label {
-					font-size: 80%;
-					opacity: 0.7;
-
-					> .icon {
-						margin-right: 4px;
-						display: none;
-					}
-				}
-
-				> .data.clickable {
-					color: var(--accent);
-					cursor: pointer;
-				}
-			}
-		}
 	}
 
 	> .data {
diff --git a/src/client/pages/instance/queue.queue.vue b/src/client/pages/instance/queue.chart.vue
similarity index 83%
rename from src/client/pages/instance/queue.queue.vue
rename to src/client/pages/instance/queue.chart.vue
index e020cfc095..1e61478e6a 100644
--- a/src/client/pages/instance/queue.queue.vue
+++ b/src/client/pages/instance/queue.chart.vue
@@ -1,11 +1,13 @@
 <template>
-<section class="_card mk-queue-queue">
+<section class="_card">
 	<div class="_title"><slot name="title"></slot></div>
-	<div class="_content status">
-		<div class="cell"><div class="label">Process</div>{{ number(activeSincePrevTick) }}</div>
-		<div class="cell"><div class="label">Active</div>{{ number(active) }}</div>
-		<div class="cell"><div class="label">Waiting</div>{{ number(waiting) }}</div>
-		<div class="cell"><div class="label">Delayed</div>{{ number(delayed) }}</div>
+	<div class="_content _table">
+		<div class="_row">
+			<div class="_cell"><div class="_label">Process</div>{{ number(activeSincePrevTick) }}</div>
+			<div class="_cell"><div class="_label">Active</div>{{ number(active) }}</div>
+			<div class="_cell"><div class="_label">Waiting</div>{{ number(waiting) }}</div>
+			<div class="_cell"><div class="_label">Delayed</div>{{ number(delayed) }}</div>
+		</div>
 	</div>
 	<div class="_content" style="margin-bottom: -8px;">
 		<canvas ref="chart"></canvas>
@@ -59,6 +61,9 @@ export default defineComponent({
 	mounted() {
 		this.fetchJobs();
 
+		// TODO: var(--panel)の色が暗いか明るいかで判定する
+		const gridColor = this.$store.state.device.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
+
 		Chart.defaults.global.defaultFontColor = getComputedStyle(document.documentElement).getPropertyValue('--fg');
 
 		this.chart = new Chart(this.$refs.chart, {
@@ -119,7 +124,9 @@ export default defineComponent({
 				scales: {
 					xAxes: [{
 						gridLines: {
-							display: false
+							display: false,
+							color: gridColor,
+							zeroLineColor: gridColor,
 						},
 						ticks: {
 							display: false
@@ -127,6 +134,11 @@ export default defineComponent({
 					}],
 					yAxes: [{
 						position: 'right',
+						gridLines: {
+							display: true,
+							color: gridColor,
+							zeroLineColor: gridColor,
+						},
 						ticks: {
 							display: false,
 						}
@@ -185,20 +197,3 @@ export default defineComponent({
 	}
 });
 </script>
-
-<style lang="scss" scoped>
-.mk-queue-queue {
-	> .status {
-		display: flex;
-
-		> .cell {
-			flex: 1;
-
-			> .label {
-				font-size: 80%;
-				opacity: 0.7;
-			}
-		}
-	}
-}
-</style>
diff --git a/src/client/pages/instance/queue.vue b/src/client/pages/instance/queue.vue
index d808769957..04a228fcfe 100644
--- a/src/client/pages/instance/queue.vue
+++ b/src/client/pages/instance/queue.vue
@@ -22,7 +22,7 @@ import { defineComponent } from 'vue';
 import { faExchangeAlt } from '@fortawesome/free-solid-svg-icons';
 import { faTrashAlt } from '@fortawesome/free-regular-svg-icons';
 import MkButton from '../../components/ui/button.vue';
-import XQueue from './queue.queue.vue';
+import XQueue from './queue.chart.vue';
 
 export default defineComponent({
 	metaInfo() {
diff --git a/src/client/pages/instance/relays.vue b/src/client/pages/instance/relays.vue
index 4402cbd544..d410dce273 100644
--- a/src/client/pages/instance/relays.vue
+++ b/src/client/pages/instance/relays.vue
@@ -3,7 +3,7 @@
 	<portal to="icon"><fa :icon="faProjectDiagram"/></portal>
 	<portal to="title">{{ $t('relays') }}</portal>
 
-	<section class="_card add">
+	<section class="_card _vMargin add">
 		<div class="_title"><fa :icon="faPlus"/> {{ $t('addRelay') }}</div>
 		<div class="_content">
 			<mk-input v-model="inbox">
@@ -13,7 +13,7 @@
 		</div>
 	</section>
 
-	<section class="_card relays">
+	<section class="_card _vMargin relays">
 		<div class="_title"><fa :icon="faProjectDiagram"/> {{ $t('addedRelays') }}</div>
 		<div class="_content relay" v-for="relay in relays" :key="relay.inbox">
 			<div>{{ relay.inbox }}</div>
diff --git a/src/client/pages/instance/settings.vue b/src/client/pages/instance/settings.vue
index 4048fea6cf..5453e79ada 100644
--- a/src/client/pages/instance/settings.vue
+++ b/src/client/pages/instance/settings.vue
@@ -3,7 +3,7 @@
 	<portal to="icon"><fa :icon="faCog"/></portal>
 	<portal to="title">{{ $t('settings') }}</portal>
 
-	<section class="_card info">
+	<section class="_card _vMargin info">
 		<div class="_title"><fa :icon="faInfoCircle"/> {{ $t('basicInfo') }}</div>
 		<div class="_content">
 			<mk-input v-model="name">{{ $t('instanceName') }}</mk-input>
@@ -19,7 +19,7 @@
 		</div>
 	</section>
 
-	<section class="_card info">
+	<section class="_card _vMargin info">
 		<div class="_content">
 			<mk-input v-model="maxNoteTextLength" type="number" :save="() => save()" style="margin:0;"><template #icon><fa :icon="faPencilAlt"/></template>{{ $t('maxNoteTextLength') }}</mk-input>
 		</div>
@@ -33,7 +33,7 @@
 		</div>
 	</section>
 
-	<section class="_card info">
+	<section class="_card _vMargin info">
 		<div class="_title"><fa :icon="faUser"/> {{ $t('registration') }}</div>
 		<div class="_content">
 			<mk-switch v-model="enableRegistration" @change="save()">{{ $t('enableRegistration') }}</mk-switch>
@@ -41,7 +41,7 @@
 		</div>
 	</section>
 
-	<section class="_card">
+	<section class="_card _vMargin">
 		<div class="_title"><fa :icon="faShieldAlt"/> {{ $t('hcaptcha') }}</div>
 		<div class="_content">
 			<mk-switch v-model="enableHcaptcha" ref="enableHcaptcha">{{ $t('enableHcaptcha') }}</mk-switch>
@@ -59,7 +59,7 @@
 		</div>
 	</section>
 
-	<section class="_card">
+	<section class="_card _vMargin">
 		<div class="_title"><fa :icon="faShieldAlt"/> {{ $t('recaptcha') }}</div>
 		<div class="_content">
 			<mk-switch v-model="enableRecaptcha" ref="enableRecaptcha">{{ $t('enableRecaptcha') }}</mk-switch>
@@ -77,7 +77,7 @@
 		</div>
 	</section>
 
-	<section class="_card">
+	<section class="_card _vMargin">
 		<div class="_title"><fa :icon="faEnvelope" /> {{ $t('emailConfig') }}</div>
 		<div class="_content">
 			<mk-switch v-model="enableEmail" @change="save()">{{ $t('enableEmail') }}<template #desc>{{ $t('emailConfigInfo') }}</template></mk-switch>
@@ -100,7 +100,7 @@
 		</div>
 	</section>
 
-	<section class="_card">
+	<section class="_card _vMargin">
 		<div class="_title"><fa :icon="faBolt"/> {{ $t('serviceworker') }}</div>
 		<div class="_content">
 			<mk-switch v-model="enableServiceWorker">{{ $t('enableServiceworker') }}<template #desc>{{ $t('serviceworkerInfo') }}</template></mk-switch>
@@ -116,7 +116,7 @@
 		</div>
 	</section>
 
-	<section class="_card">
+	<section class="_card _vMargin">
 		<div class="_title"><fa :icon="faThumbtack"/> {{ $t('pinnedUsers') }}</div>
 		<div class="_content">
 			<mk-textarea v-model="pinnedUsers">
@@ -128,7 +128,7 @@
 		</div>
 	</section>
 
-	<section class="_card">
+	<section class="_card _vMargin">
 		<div class="_title"><fa :icon="faCloud"/> {{ $t('files') }}</div>
 		<div class="_content">
 			<mk-switch v-model="cacheRemoteFiles">{{ $t('cacheRemoteFiles') }}<template #desc>{{ $t('cacheRemoteFilesDescription') }}</template></mk-switch>
@@ -141,7 +141,7 @@
 		</div>
 	</section>
 
-	<section class="_card">
+	<section class="_card _vMargin">
 		<div class="_title"><fa :icon="faCloud"/> {{ $t('objectStorage') }}</div>
 		<div class="_content">
 			<mk-switch v-model="useObjectStorage">{{ $t('useObjectStorage') }}</mk-switch>
@@ -161,6 +161,7 @@
 				</div>
 				<mk-switch v-model="objectStorageUseSSL" :disabled="!useObjectStorage">{{ $t('objectStorageUseSSL') }}<template #desc>{{ $t('objectStorageUseSSLDesc') }}</template></mk-switch>
 				<mk-switch v-model="objectStorageUseProxy" :disabled="!useObjectStorage">{{ $t('objectStorageUseProxy') }}<template #desc>{{ $t('objectStorageUseProxyDesc') }}</template></mk-switch>
+				<mk-switch v-model="objectStorageSetPublicRead" :disabled="!useObjectStorage">{{ $t('objectStorageSetPublicRead') }}</mk-switch>
 			</template>
 		</div>
 		<div class="_footer">
@@ -168,7 +169,7 @@
 		</div>
 	</section>
 
-	<section class="_card">
+	<section class="_card _vMargin">
 		<div class="_title"><fa :icon="faGhost"/> {{ $t('proxyAccount') }}</div>
 		<div class="_content">
 			<mk-input :value="proxyAccount ? proxyAccount.username : null" style="margin: 0;" disabled><template #prefix>@</template>{{ $t('proxyAccount') }}<template #desc>{{ $t('proxyAccountDescription') }}</template></mk-input>
@@ -176,7 +177,7 @@
 		</div>
 	</section>
 
-	<section class="_card">
+	<section class="_card _vMargin">
 		<div class="_title"><fa :icon="faBan"/> {{ $t('blockedInstances') }}</div>
 		<div class="_content">
 			<mk-textarea v-model="blockedHosts">
@@ -188,7 +189,7 @@
 		</div>
 	</section>
 
-	<section class="_card">
+	<section class="_card _vMargin">
 		<div class="_title"><fa :icon="faShareAlt"/> {{ $t('integration') }}</div>
 		<div class="_content">
 			<header><fa :icon="faTwitter"/> Twitter</header>
@@ -221,7 +222,8 @@
 			<mk-button primary @click="save(true)"><fa :icon="faSave"/> {{ $t('save') }}</mk-button>
 		</div>
 	</section>
-	<section class="_card">
+
+	<section class="_card _vMargin">
 		<div class="_title"><fa :icon="faArchway" /> Summaly Proxy</div>
 		<div class="_content">
 			<mk-input v-model="summalyProxy">URL</mk-input>
@@ -305,6 +307,7 @@ export default defineComponent({
 			objectStorageSecretKey: null,
 			objectStorageUseSSL: false,
 			objectStorageUseProxy: false,
+			objectStorageSetPublicRead: false,
 			enableTwitterIntegration: false,
 			twitterConsumerKey: null,
 			twitterConsumerSecret: null,
@@ -372,6 +375,7 @@ export default defineComponent({
 		this.objectStorageSecretKey = this.meta.objectStorageSecretKey;
 		this.objectStorageUseSSL = this.meta.objectStorageUseSSL;
 		this.objectStorageUseProxy = this.meta.objectStorageUseProxy;
+		this.objectStorageSetPublicRead = this.meta.objectStorageSetPublicRead;
 		this.enableTwitterIntegration = this.meta.enableTwitterIntegration;
 		this.twitterConsumerKey = this.meta.twitterConsumerKey;
 		this.twitterConsumerSecret = this.meta.twitterConsumerSecret;
@@ -521,6 +525,7 @@ export default defineComponent({
 				objectStorageSecretKey: this.objectStorageSecretKey ? this.objectStorageSecretKey : null,
 				objectStorageUseSSL: this.objectStorageUseSSL,
 				objectStorageUseProxy: this.objectStorageUseProxy,
+				objectStorageSetPublicRead: this.objectStorageSetPublicRead,
 				enableTwitterIntegration: this.enableTwitterIntegration,
 				twitterConsumerKey: this.twitterConsumerKey,
 				twitterConsumerSecret: this.twitterConsumerSecret,
diff --git a/src/client/pages/instance/users.vue b/src/client/pages/instance/users.vue
index 7705c9a745..0167d7aa24 100644
--- a/src/client/pages/instance/users.vue
+++ b/src/client/pages/instance/users.vue
@@ -3,7 +3,7 @@
 	<portal to="icon"><fa :icon="faUsers"/></portal>
 	<portal to="title">{{ $t('users') }}</portal>
 
-	<section class="_card lookup">
+	<section class="_card _vMargin lookup">
 		<div class="_title"><fa :icon="faSearch"/> {{ $t('lookup') }}</div>
 		<div class="_content">
 			<mk-input class="target" v-model="target" type="text" @enter="showUser()">
@@ -16,7 +16,7 @@
 		</div>
 	</section>
 
-	<section class="_card users">
+	<section class="_card _vMargin users">
 		<div class="_title"><fa :icon="faUsers"/> {{ $t('users') }}</div>
 		<div class="_content">
 			<div class="inputs" style="display: flex;">
diff --git a/src/client/pages/messaging/index.vue b/src/client/pages/messaging/index.vue
index 3edc630387..f5fac791a8 100644
--- a/src/client/pages/messaging/index.vue
+++ b/src/client/pages/messaging/index.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="mk-messaging" v-size="[{ max: 400 }]">
+<div class="mk-messaging" v-size="{ max: [400] }">
 	<portal to="icon"><fa :icon="faComments"/></portal>
 	<portal to="title">{{ $t('messaging') }}</portal>
 
diff --git a/src/client/pages/messaging/messaging-room.form.vue b/src/client/pages/messaging/messaging-room.form.vue
index 2c98a661f4..05ffe9d539 100644
--- a/src/client/pages/messaging/messaging-room.form.vue
+++ b/src/client/pages/messaging/messaging-room.form.vue
@@ -53,7 +53,7 @@ export default defineComponent({
 		};
 	},
 	computed: {
-		draftId(): string {
+		draftKey(): string {
 			return this.user ? 'user:' + this.user.id : 'group:' + this.group.id;
 		},
 		canSend(): boolean {
@@ -79,7 +79,7 @@ export default defineComponent({
 		autosize(this.$refs.text);
 
 		// 書きかけの投稿を復元
-		const draft = JSON.parse(localStorage.getItem('message_drafts') || '{}')[this.draftId];
+		const draft = JSON.parse(localStorage.getItem('message_drafts') || '{}')[this.draftKey];
 		if (draft) {
 			this.text = draft.data.text;
 			this.file = draft.data.file;
@@ -199,7 +199,7 @@ export default defineComponent({
 		saveDraft() {
 			const data = JSON.parse(localStorage.getItem('message_drafts') || '{}');
 
-			data[this.draftId] = {
+			data[this.draftKey] = {
 				updatedAt: new Date(),
 				data: {
 					text: this.text,
@@ -213,7 +213,7 @@ export default defineComponent({
 		deleteDraft() {
 			const data = JSON.parse(localStorage.getItem('message_drafts') || '{}');
 
-			delete data[this.draftId];
+			delete data[this.draftKey];
 
 			localStorage.setItem('message_drafts', JSON.stringify(data));
 		},
diff --git a/src/client/pages/miauth.vue b/src/client/pages/miauth.vue
index 71e89761f4..b94be88299 100644
--- a/src/client/pages/miauth.vue
+++ b/src/client/pages/miauth.vue
@@ -1,22 +1,22 @@
 <template>
 <div v-if="$store.getters.isSignedIn">
-	<div class="waiting _card" v-if="state == 'waiting'">
+	<div class="waiting _card _vMargin" v-if="state == 'waiting'">
 		<div class="_content">
 			<mk-loading/>
 		</div>
 	</div>
-	<div class="denied _card" v-if="state == 'denied'">
+	<div class="denied _card _vMargin" v-if="state == 'denied'">
 		<div class="_content">
 			<p>{{ $t('_auth.denied') }}</p>
 		</div>
 	</div>
-	<div class="accepted _card" v-else-if="state == 'accepted'">
+	<div class="accepted _card _vMargin" v-else-if="state == 'accepted'">
 		<div class="_content">
 			<p v-if="callback">{{ $t('_auth.callback') }}<mk-ellipsis/></p>
 			<p v-else>{{ $t('_auth.pleaseGoBack') }}</p>
 		</div>
 	</div>
-	<div class="_card" v-else>
+	<div class="_card _vMargin" v-else>
 		<div class="_title" v-if="name">{{ $t('_auth.shareAccess', { name: name }) }}</div>
 		<div class="_title" v-else>{{ $t('_auth.shareAccessAsk') }}</div>
 		<div class="_content">
diff --git a/src/client/pages/my-groups/group.vue b/src/client/pages/my-groups/group.vue
index 124a47e75b..ad01fd5c11 100644
--- a/src/client/pages/my-groups/group.vue
+++ b/src/client/pages/my-groups/group.vue
@@ -4,7 +4,7 @@
 	<portal to="title">{{ group.name }}</portal>
 
 	<transition name="zoom" mode="out-in">
-		<div v-if="group" class="_card">
+		<div v-if="group" class="_card _vMargin">
 			<div class="_content">
 				<mk-button inline @click="renameGroup()">{{ $t('rename') }}</mk-button>
 				<mk-button inline @click="transfer()">{{ $t('transfer') }}</mk-button>
@@ -14,7 +14,7 @@
 	</transition>
 
 	<transition name="zoom" mode="out-in">
-		<div v-if="group" class="_card members">
+		<div v-if="group" class="_card members _vMargin">
 			<div class="_title">{{ $t('members') }}</div>
 			<div class="_content">
 				<div class="users">
diff --git a/src/client/pages/my-lists/list.vue b/src/client/pages/my-lists/list.vue
index 3c006c0fec..dcf368882e 100644
--- a/src/client/pages/my-lists/list.vue
+++ b/src/client/pages/my-lists/list.vue
@@ -4,7 +4,7 @@
 	<portal to="title">{{ list.name }}</portal>
 
 	<transition name="zoom" mode="out-in">
-		<div v-if="list" class="_card">
+		<div v-if="list" class="_card _vMargin">
 			<div class="_content">
 				<mk-button inline @click="renameList()">{{ $t('rename') }}</mk-button>
 				<mk-button inline @click="deleteList()">{{ $t('delete') }}</mk-button>
@@ -13,7 +13,7 @@
 	</transition>
 
 	<transition name="zoom" mode="out-in">
-		<div v-if="list" class="_card members">
+		<div v-if="list" class="_card members _vMargin">
 			<div class="_title">{{ $t('members') }}</div>
 			<div class="_content">
 				<div class="users">
diff --git a/src/client/pages/my-settings/index.vue b/src/client/pages/my-settings/index.vue
index 94e6ec53af..3a48d4b85c 100644
--- a/src/client/pages/my-settings/index.vue
+++ b/src/client/pages/my-settings/index.vue
@@ -3,11 +3,11 @@
 	<portal to="icon"><fa :icon="faCog"/></portal>
 	<portal to="title">{{ $t('accountSettings') }}</portal>
 
-	<x-profile-setting/>
-	<x-privacy-setting/>
-	<x-reaction-setting/>
+	<x-profile-setting class="_vMargin"/>
+	<x-privacy-setting class="_vMargin"/>
+	<x-reaction-setting class="_vMargin"/>
 
-	<section class="_card">
+	<section class="_card _vMargin">
 		<div class="_title"><fa :icon="faCog"/> {{ $t('general') }}</div>
 		<div class="_content">
 			<mk-switch v-model="$store.state.i.autoWatch" @change="onChangeAutoWatch">
@@ -24,14 +24,14 @@
 		</div>
 	</section>
 
-	<x-import-export/>
-	<x-drive/>
-	<x-mute-block/>
-	<x-word-mute/>
-	<x-security/>
-	<x-2fa/>
-	<x-integration/>
-	<x-api/>
+	<x-import-export class="_vMargin"/>
+	<x-drive class="_vMargin"/>
+	<x-mute-block class="_vMargin"/>
+	<x-word-mute class="_vMargin"/>
+	<x-security class="_vMargin"/>
+	<x-2fa class="_vMargin"/>
+	<x-integration class="_vMargin"/>
+	<x-api class="_vMargin"/>
 
 	<router-link class="_panel _buttonPrimary" to="/my/apps" style="margin: var(--margin) auto;">{{ $t('installedApps') }}</router-link>
 
diff --git a/src/client/pages/my-settings/word-mute.vue b/src/client/pages/my-settings/word-mute.vue
index 63edc22452..b8eb2ce4c4 100644
--- a/src/client/pages/my-settings/word-mute.vue
+++ b/src/client/pages/my-settings/word-mute.vue
@@ -13,10 +13,11 @@
 	</div>
 	<div class="_content" v-show="tab === 'hard'">
 		<mk-info>{{ $t('_wordMute.hardDescription') }}</mk-info>
-		<mk-textarea v-model="hardMutedWords">
+		<mk-textarea v-model="hardMutedWords" style="margin-bottom: 16px;">
 			<span>{{ $t('_wordMute.muteWords') }}</span>
 			<template #desc>{{ $t('_wordMute.muteWordsDescription') }}<br>{{ $t('_wordMute.muteWordsDescription2') }}</template>
 		</mk-textarea>
+		<div v-if="hardWordMutedNotesCount != null" class="_caption">{{ $t('_wordMute.mutedNotes') }}: {{ hardWordMutedNotesCount | number }}</div>
 	</div>
 	<div class="_footer">
 		<mk-button @click="save()" primary inline :disabled="!changed"><fa :icon="faSave"/> {{ $t('save') }}</mk-button>
@@ -45,6 +46,7 @@ export default defineComponent({
 			tab: 'soft',
 			softMutedWords: '',
 			hardMutedWords: '',
+			hardWordMutedNotesCount: null,
 			changed: false,
 			faCommentSlash, faSave,
 		}
@@ -59,9 +61,11 @@ export default defineComponent({
 		},
 	},
 
-	created() {
+	async created() {
 		this.softMutedWords = this.$store.state.settings.mutedWords.map(x => x.join(' ')).join('\n');
 		this.hardMutedWords = this.$store.state.i.mutedWords.map(x => x.join(' ')).join('\n');
+
+		this.hardWordMutedNotesCount = (await this.$root.api('i/get-word-muted-notes-count', {})).count;
 	},
 
 	methods: {
diff --git a/src/client/pages/preferences/index.vue b/src/client/pages/preferences/index.vue
index a6c8100625..82f08f3ffd 100644
--- a/src/client/pages/preferences/index.vue
+++ b/src/client/pages/preferences/index.vue
@@ -5,13 +5,13 @@
 
 	<router-link v-if="$store.getters.isSignedIn" class="_panel _buttonPrimary" to="/my/settings" style="margin-bottom: var(--margin);">{{ $t('accountSettings') }}</router-link>
 
-	<x-theme/>
+	<x-theme class="_vMargin"/>
 
-	<x-sidebar/>
+	<x-sidebar class="_vMargin"/>
 
-	<x-plugins/>
+	<x-plugins class="_vMargin"/>
 
-	<section class="_card">
+	<section class="_card _vMargin">
 		<div class="_title"><fa :icon="faMusic"/> {{ $t('sounds') }}</div>
 		<div class="_content">
 			<mk-range v-model="sfxVolume" :min="0" :max="1" :step="0.1">
@@ -50,10 +50,15 @@
 				<option v-for="sound in sounds" :value="sound" :key="sound">{{ sound || $t('none') }}</option>
 				<template #text><button class="_textButton" @click="listen(sfxAntenna)" v-if="sfxAntenna"><fa :icon="faPlay"/> {{ $t('listen') }}</button></template>
 			</mk-select>
+			<mk-select v-model="sfxChannel">
+				<template #label>{{ $t('_sfx.channel') }}</template>
+				<option v-for="sound in sounds" :value="sound" :key="sound">{{ sound || $t('none') }}</option>
+				<template #text><button class="_textButton" @click="listen(sfxChannel)" v-if="sfxChannel"><fa :icon="faPlay"/> {{ $t('listen') }}</button></template>
+			</mk-select>
 		</div>
 	</section>
 
-	<section class="_card">
+	<section class="_card _vMargin">
 		<div class="_title"><fa :icon="faColumns"/> {{ $t('deck') }}</div>
 		<div class="_content">
 			<mk-switch v-model="deckAlwaysShowMainColumn">
@@ -67,7 +72,7 @@
 		</div>
 	</section>
 
-	<section class="_card">
+	<section class="_card _vMargin">
 		<div class="_title"><fa :icon="faCog"/> {{ $t('appearance') }}</div>
 		<div class="_content">
 			<mk-switch v-model="disableAnimatedMfm">{{ $t('disableAnimatedMfm') }}</mk-switch>
@@ -87,12 +92,13 @@
 		</div>
 	</section>
 
-	<section class="_card">
+	<section class="_card _vMargin">
 		<div class="_title"><fa :icon="faCog"/> {{ $t('general') }}</div>
 		<div class="_content">
-			<mk-switch v-model="autoReload">
-				{{ $t('autoReloadWhenDisconnected') }}
-			</mk-switch>
+			<div>{{ $t('whenServerDisconnected') }}</div>
+			<mk-radio v-model="serverDisconnectedBehavior" value="reload">{{ $t('_serverDisconnectedBehavior.reload') }}</mk-radio>
+			<mk-radio v-model="serverDisconnectedBehavior" value="dialog">{{ $t('_serverDisconnectedBehavior.dialog') }}</mk-radio>
+			<mk-radio v-model="serverDisconnectedBehavior" value="quiet">{{ $t('_serverDisconnectedBehavior.quiet') }}</mk-radio>
 		</div>
 		<div class="_content">
 			<mk-switch v-model="imageNewTab">{{ $t('openImageInNewTab') }}</mk-switch>
@@ -142,10 +148,14 @@ const sounds = [
 	'syuilo/pirori',
 	'syuilo/pirori-wet',
 	'syuilo/pirori-square-wet',
+	'syuilo/square-pico',
+	'syuilo/reverved',
+	'syuilo/ryukyu',
 	'aisha/1',
 	'aisha/2',
 	'aisha/3',
 	'noizenecio/kick_gaba',
+	'noizenecio/kick_gaba2',
 ];
 
 export default defineComponent({
@@ -177,9 +187,9 @@ export default defineComponent({
 	},
 
 	computed: {
-		autoReload: {
-			get() { return this.$store.state.device.autoReload; },
-			set(value) { this.$store.commit('device/set', { key: 'autoReload', value }); }
+		serverDisconnectedBehavior: {
+			get() { return this.$store.state.device.serverDisconnectedBehavior; },
+			set(value) { this.$store.commit('device/set', { key: 'serverDisconnectedBehavior', value }); }
 		},
 
 		reduceAnimation: {
@@ -272,6 +282,11 @@ export default defineComponent({
 			set(value) { this.$store.commit('device/set', { key: 'sfxAntenna', value }); }
 		},
 
+		sfxChannel: {
+			get() { return this.$store.state.device.sfxChannel; },
+			set(value) { this.$store.commit('device/set', { key: 'sfxChannel', value }); }
+		},
+
 		volumeIcon: {
 			get() {
 				return this.sfxVolume === 0 ? faVolumeMute : faVolumeUp;
diff --git a/src/client/pages/room/room.vue b/src/client/pages/room/room.vue
index fe38441503..6e82cdb441 100644
--- a/src/client/pages/room/room.vue
+++ b/src/client/pages/room/room.vue
@@ -8,7 +8,7 @@
 		/>
 	</portal>
 
-	<div class="controller _card" v-if="objectSelected">
+	<div class="controller _card _vMargin" v-if="objectSelected">
 		<div class="_content">
 			<p class="name">{{ selectedFurnitureName }}</p>
 			<x-preview ref="preview"/>
@@ -34,7 +34,7 @@
 		</div>
 	</div>
 
-	<div class="menu _card" v-if="isMyRoom">
+	<div class="menu _card _vMargin" v-if="isMyRoom">
 		<div class="_content">
 			<mk-button @click="add()"><fa :icon="faBoxOpen"/> {{ $t('_rooms.addFurniture') }}</mk-button>
 		</div>
diff --git a/src/client/pages/user/index.timeline.vue b/src/client/pages/user/index.timeline.vue
index 4e35a88d94..0890a0251c 100644
--- a/src/client/pages/user/index.timeline.vue
+++ b/src/client/pages/user/index.timeline.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="kjeftjfm" v-size="[{ max: 500 }]">
+<div class="kjeftjfm" v-size="{ max: [500] }">
 	<div class="with">
 		<button class="_button" @click="with_ = null" :class="{ active: with_ === null }">{{ $t('notes') }}</button>
 		<button class="_button" @click="with_ = 'replies'" :class="{ active: with_ === 'replies' }">{{ $t('notesAndReplies') }}</button>
diff --git a/src/client/pages/user/index.vue b/src/client/pages/user/index.vue
index 33bfb26b59..1c1a63565a 100644
--- a/src/client/pages/user/index.vue
+++ b/src/client/pages/user/index.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="mk-user-page" v-if="user" v-size="[{ max: 500 }]">
+<div class="mk-user-page" v-if="user" v-size="{ max: [500] }">
 	<portal to="title" v-if="user"><mk-user-name :user="user" :nowrap="false" class="name"/></portal>
 	<portal to="avatar" v-if="user"><mk-avatar class="avatar" :user="user" :disable-preview="true"/></portal>
 
diff --git a/src/client/router.ts b/src/client/router.ts
index 8175e97daf..ae3bbc5f84 100644
--- a/src/client/router.ts
+++ b/src/client/router.ts
@@ -27,6 +27,10 @@ export const router = createRouter({
 		{ path: '/explore', component: page('explore') },
 		{ path: '/explore/tags/:tag', props: true, component: page('explore') },
 		{ path: '/search', component: page('search') },
+		{ path: '/channels', component: page('channels') },
+		{ path: '/channels/new', component: page('channel-editor') },
+		{ path: '/channels/:channelId/edit', component: page('channel-editor'), props: true },
+		{ path: '/channels/:channelId', component: page('channel'), props: true },
 		{ path: '/my/notifications', component: page('notifications') },
 		{ path: '/my/favorites', component: page('favorites') },
 		{ path: '/my/messages', component: page('messages') },
diff --git a/src/client/scripts/paging.ts b/src/client/scripts/paging.ts
index adcdc6597a..129c96004f 100644
--- a/src/client/scripts/paging.ts
+++ b/src/client/scripts/paging.ts
@@ -1,4 +1,4 @@
-import { getScrollPosition, onScrollTop } from './scroll';
+import { onScrollTop, isTopVisible } from './scroll';
 
 const SECOND_FETCH_LIMIT = 30;
 
@@ -147,7 +147,7 @@ export default (opts) => ({
 		},
 
 		prepend(item) {
-			const isTop = this.isBackTop || (document.body.contains(this.$el) && (getScrollPosition(this.$el) === 0));
+			const isTop = this.isBackTop || (document.body.contains(this.$el) && isTopVisible(this.$el));
 
 			if (isTop) {
 				// Prepend the item
diff --git a/src/client/scripts/scroll.ts b/src/client/scripts/scroll.ts
index be9ea22261..18c3366891 100644
--- a/src/client/scripts/scroll.ts
+++ b/src/client/scripts/scroll.ts
@@ -13,14 +13,20 @@ export function getScrollPosition(el: Element | null): number {
 	return container == null ? window.scrollY : container.scrollTop;
 }
 
+export function isTopVisible(el: Element | null): boolean {
+	const scrollTop = getScrollPosition(el);
+	const topPosition = el.offsetTop; // TODO: container内でのelの相対位置を取得できればより正確になる
+
+	return scrollTop <= topPosition;
+}
+
 export function onScrollTop(el: Element, cb) {
 	const container = getScrollContainer(el) || window;
 	const onScroll = ev => {
 		if (!document.body.contains(el)) return;
-		const pos = getScrollPosition(el);
-		if (pos === 0) {
+		if (isTopVisible(el)) {
 			cb();
-			container.removeEventListener('scroll', onscroll);
+			container.removeEventListener('scroll', onScroll);
 		}
 	};
 	container.addEventListener('scroll', onScroll, { passive: true });
@@ -33,7 +39,7 @@ export function onScrollBottom(el: Element, cb) {
 		const pos = getScrollPosition(el);
 		if (pos + el.clientHeight > el.scrollHeight - 1) {
 			cb();
-			container.removeEventListener('scroll', onscroll);
+			container.removeEventListener('scroll', onScroll);
 		}
 	};
 	container.addEventListener('scroll', onScroll, { passive: true });
diff --git a/src/client/store.ts b/src/client/store.ts
index 1e56aac05b..5544edd122 100644
--- a/src/client/store.ts
+++ b/src/client/store.ts
@@ -1,7 +1,7 @@
 import { createStore } from 'vuex';
 import createPersistedState from 'vuex-persistedstate';
 import * as nestedProperty from 'nested-property';
-import { faTerminal, faHashtag, faBroadcastTower, faFireAlt, faSearch, faStar, faAt, faListUl, faUserClock, faUsers, faCloud, faGamepad, faFileAlt, faSatellite, faDoorClosed, faColumns } from '@fortawesome/free-solid-svg-icons';
+import { faSatelliteDish, faTerminal, faHashtag, faBroadcastTower, faFireAlt, faSearch, faStar, faAt, faListUl, faUserClock, faUsers, faCloud, faGamepad, faFileAlt, faSatellite, faDoorClosed, faColumns } from '@fortawesome/free-solid-svg-icons';
 import { faBell, faEnvelope, faComments } from '@fortawesome/free-regular-svg-icons';
 import { AiScript, utils, values } from '@syuilo/aiscript';
 import { apiUrl, deckmode } from './config';
@@ -60,7 +60,7 @@ export const defaultDeviceSettings = {
 	loadRawImages: false,
 	alwaysShowNsfw: false,
 	useOsNativeEmojis: false,
-	autoReload: false,
+	serverDisconnectedBehavior: 'quiet',
 	accounts: [],
 	recentEmojis: [],
 	themes: [],
@@ -90,6 +90,7 @@ export const defaultDeviceSettings = {
 	sfxChat: 'syuilo/pope1',
 	sfxChatBg: 'syuilo/waon',
 	sfxAntenna: 'syuilo/triple',
+	sfxChannel: 'syuilo/square-pico',
 	userData: {},
 };
 
@@ -113,6 +114,7 @@ export const store = createStore({
 			text: string;
 			result: any;
 		}[],
+		fullView: false,
 
 		// Plugin
 		pluginContexts: new Map<string, AiScript>(),
@@ -219,6 +221,11 @@ export const store = createStore({
 				get show() { return getters.isSignedIn; },
 				to: '/my/pages',
 			},
+			channels: {
+				title: 'channel',
+				icon: faSatelliteDish,
+				to: '/channels',
+			},
 			games: {
 				title: 'games',
 				icon: faGamepad,
@@ -259,6 +266,10 @@ export const store = createStore({
 			state.dialogs.push(dialog);
 		},
 
+		setFullView(state, v) {
+			state.fullView = v;
+		},
+
 		initPlugin(state, { plugin, aiscript }) {
 			state.pluginContexts.set(plugin.id, aiscript);
 		},
diff --git a/src/client/style.scss b/src/client/style.scss
index ab0dcf6220..2d23f81213 100644
--- a/src/client/style.scss
+++ b/src/client/style.scss
@@ -329,10 +329,6 @@ hr {
 ._card {
 	@extend ._panel;
 
-	& + ._card {
-		margin-top: var(--margin);
-	}
-
 	> ._title {
 		margin: 0;
 		padding: 22px 32px;
@@ -389,6 +385,40 @@ hr {
 	}
 }
 
+._vMargin {
+	& + ._vMargin {
+		margin-top: var(--margin);
+	}
+}
+
+._table {
+	> ._row {
+		display: flex;
+
+		&:not(:last-child) {
+			margin-bottom: 16px;
+
+			@media (max-width: 500px) {
+				margin-bottom: 8px;
+			}
+		}
+
+		> ._cell {
+			flex: 1;
+
+			> ._label {
+				font-size: 80%;
+				opacity: 0.7;
+
+				> ._icon {
+					margin-right: 4px;
+					display: none;
+				}
+			}
+		}
+	}
+}
+
 ._fullinfo {
 	padding: 64px 32px;
 	text-align: center;
@@ -404,7 +434,7 @@ hr {
 ._keyValue {
 	display: flex;
 
-	> div {
+	> * {
 		flex: 1;
 	}
 }
@@ -413,6 +443,11 @@ hr {
 	color: var(--link);
 }
 
+._caption {
+	font-size: 0.8em;
+	opacity: 0.7;
+}
+
 .zoom-enter-active, .zoom-leave-active {
 	transition: opacity 0.5s, transform 0.5s !important;
 }
diff --git a/src/client/themes/_dark.json5 b/src/client/themes/_dark.json5
index 35d79421c4..d401e807a9 100644
--- a/src/client/themes/_dark.json5
+++ b/src/client/themes/_dark.json5
@@ -72,5 +72,6 @@
 		X12: 'rgba(255, 255, 255, 0.1)',
 		X13: 'rgba(255, 255, 255, 0.15)',
 		X14: ':alpha<0.5<@navBg',
+		X15: ':alpha<0<@panel',
 	},
 }
diff --git a/src/client/themes/_light.json5 b/src/client/themes/_light.json5
index 0d5071a682..50aa0cd235 100644
--- a/src/client/themes/_light.json5
+++ b/src/client/themes/_light.json5
@@ -72,5 +72,6 @@
 		X12: 'rgba(0, 0, 0, 0.1)',
 		X13: 'rgba(0, 0, 0, 0.15)',
 		X14: ':alpha<0.5<@navBg',
+		X15: ':alpha<0<@panel',
 	},
 }
diff --git a/src/client/widgets/define.ts b/src/client/widgets/define.ts
index fb9511023e..d2d97768cb 100644
--- a/src/client/widgets/define.ts
+++ b/src/client/widgets/define.ts
@@ -8,7 +8,8 @@ export default function <T extends Form>(data: {
 	return defineComponent({
 		props: {
 			widget: {
-				type: Object
+				type: Object,
+				required: false
 			},
 			isCustomizeMode: {
 				type: Boolean,
@@ -18,11 +19,11 @@ export default function <T extends Form>(data: {
 
 		computed: {
 			id(): string {
-				return this.widget.id;
+				return this.widget ? this.widget.id : null;
 			},
 
 			props(): Record<string, any> {
-				return this.widget.data;
+				return this.widget ? this.widget.data : {};
 			}
 		},
 
@@ -61,7 +62,9 @@ export default function <T extends Form>(data: {
 			},
 
 			save() {
-				this.$store.commit('deviceUser/updateWidget', this.widget);
+				if (this.widget) {
+					this.$store.commit('deviceUser/updateWidget', this.widget);
+				}
 			}
 		}
 	});
diff --git a/src/client/widgets/federation.vue b/src/client/widgets/federation.vue
index bd9702623d..a1cf79efb6 100644
--- a/src/client/widgets/federation.vue
+++ b/src/client/widgets/federation.vue
@@ -1,5 +1,5 @@
 <template>
-<mk-container :show-header="props.showHeader">
+<mk-container :show-header="props.showHeader" :body-togglable="bodyTogglable" :scrollable="scrollable">
 	<template #header><fa :icon="faGlobe"/>{{ $t('_widgets.federation') }}</template>
 
 	<div class="wbrkwalb">
@@ -40,6 +40,18 @@ export default defineComponent({
 	components: {
 		MkContainer, MkMiniChart
 	},
+	props: {
+		bodyTogglable: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		scrollable: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+	},
 	data() {
 		return {
 			instances: [],
diff --git a/src/db/postgre.ts b/src/db/postgre.ts
index 6ffc56ee08..e2acdeafd1 100644
--- a/src/db/postgre.ts
+++ b/src/db/postgre.ts
@@ -38,7 +38,7 @@ import { FollowRequest } from '../models/entities/follow-request';
 import { Emoji } from '../models/entities/emoji';
 import { ReversiGame } from '../models/entities/games/reversi/game';
 import { ReversiMatching } from '../models/entities/games/reversi/matching';
-import { UserNotePining } from '../models/entities/user-note-pinings';
+import { UserNotePining } from '../models/entities/user-note-pining';
 import { Poll } from '../models/entities/poll';
 import { UserKeypair } from '../models/entities/user-keypair';
 import { UserPublickey } from '../models/entities/user-publickey';
@@ -60,6 +60,9 @@ import { PromoRead } from '../models/entities/promo-read';
 import { program } from '../argv';
 import { Relay } from '../models/entities/relay';
 import { MutedNote } from '../models/entities/muted-note';
+import { Channel } from '../models/entities/channel';
+import { ChannelFollowing } from '../models/entities/channel-following';
+import { ChannelNotePining } from '../models/entities/channel-note-pining';
 
 const sqlLogger = dbLogger.createSubLogger('sql', 'white', false);
 
@@ -153,6 +156,9 @@ export const entities = [
 	ReversiMatching,
 	Relay,
 	MutedNote,
+	Channel,
+	ChannelFollowing,
+	ChannelNotePining,
 	...charts as any
 ];
 
diff --git a/src/misc/api-permissions.ts b/src/misc/api-permissions.ts
index be3c30f7d9..de9fdea52c 100644
--- a/src/misc/api-permissions.ts
+++ b/src/misc/api-permissions.ts
@@ -25,4 +25,6 @@ export const kinds = [
 	'read:page-likes',
 	'read:user-groups',
 	'write:user-groups',
+	'read:channels',
+	'write:channels',
 ];
diff --git a/src/models/entities/channel-following.ts b/src/models/entities/channel-following.ts
new file mode 100644
index 0000000000..fca801e5ab
--- /dev/null
+++ b/src/models/entities/channel-following.ts
@@ -0,0 +1,43 @@
+import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
+import { User } from './user';
+import { id } from '../id';
+import { Channel } from './channel';
+
+@Entity()
+@Index(['followerId', 'followeeId'], { unique: true })
+export class ChannelFollowing {
+	@PrimaryColumn(id())
+	public id: string;
+
+	@Index()
+	@Column('timestamp with time zone', {
+		comment: 'The created date of the ChannelFollowing.'
+	})
+	public createdAt: Date;
+
+	@Index()
+	@Column({
+		...id(),
+		comment: 'The followee channel ID.'
+	})
+	public followeeId: Channel['id'];
+
+	@ManyToOne(type => Channel, {
+		onDelete: 'CASCADE'
+	})
+	@JoinColumn()
+	public followee: Channel | null;
+
+	@Index()
+	@Column({
+		...id(),
+		comment: 'The follower user ID.'
+	})
+	public followerId: User['id'];
+
+	@ManyToOne(type => User, {
+		onDelete: 'CASCADE'
+	})
+	@JoinColumn()
+	public follower: User | null;
+}
diff --git a/src/models/entities/channel-note-pining.ts b/src/models/entities/channel-note-pining.ts
new file mode 100644
index 0000000000..26a7eb501f
--- /dev/null
+++ b/src/models/entities/channel-note-pining.ts
@@ -0,0 +1,35 @@
+import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
+import { Note } from './note';
+import { Channel } from './channel';
+import { id } from '../id';
+
+@Entity()
+@Index(['channelId', 'noteId'], { unique: true })
+export class ChannelNotePining {
+	@PrimaryColumn(id())
+	public id: string;
+
+	@Column('timestamp with time zone', {
+		comment: 'The created date of the ChannelNotePining.'
+	})
+	public createdAt: Date;
+
+	@Index()
+	@Column(id())
+	public channelId: Channel['id'];
+
+	@ManyToOne(type => Channel, {
+		onDelete: 'CASCADE'
+	})
+	@JoinColumn()
+	public channel: Channel | null;
+
+	@Column(id())
+	public noteId: Note['id'];
+
+	@ManyToOne(type => Note, {
+		onDelete: 'CASCADE'
+	})
+	@JoinColumn()
+	public note: Note | null;
+}
diff --git a/src/models/entities/channel.ts b/src/models/entities/channel.ts
new file mode 100644
index 0000000000..1868f75143
--- /dev/null
+++ b/src/models/entities/channel.ts
@@ -0,0 +1,74 @@
+import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
+import { User } from './user';
+import { id } from '../id';
+import { DriveFile } from './drive-file';
+
+@Entity()
+export class Channel {
+	@PrimaryColumn(id())
+	public id: string;
+
+	@Index()
+	@Column('timestamp with time zone', {
+		comment: 'The created date of the Channel.'
+	})
+	public createdAt: Date;
+
+	@Index()
+	@Column('timestamp with time zone', {
+		nullable: true
+	})
+	public lastNotedAt: Date | null;
+
+	@Index()
+	@Column({
+		...id(),
+		comment: 'The owner ID.'
+	})
+	public userId: User['id'];
+
+	@ManyToOne(type => User, {
+		onDelete: 'SET NULL'
+	})
+	@JoinColumn()
+	public user: User | null;
+
+	@Column('varchar', {
+		length: 128,
+		comment: 'The name of the Channel.'
+	})
+	public name: string;
+
+	@Column('varchar', {
+		length: 2048, nullable: true,
+		comment: 'The description of the Channel.'
+	})
+	public description: string | null;
+
+	@Column({
+		...id(),
+		nullable: true,
+		comment: 'The ID of banner Channel.'
+	})
+	public bannerId: DriveFile['id'] | null;
+
+	@ManyToOne(type => DriveFile, {
+		onDelete: 'SET NULL'
+	})
+	@JoinColumn()
+	public banner: DriveFile | null;
+
+	@Index()
+	@Column('integer', {
+		default: 0,
+		comment: 'The count of notes.'
+	})
+	public notesCount: number;
+
+	@Index()
+	@Column('integer', {
+		default: 0,
+		comment: 'The count of users.'
+	})
+	public usersCount: number;
+}
diff --git a/src/models/entities/drive-file.ts b/src/models/entities/drive-file.ts
index c02b9f3636..680a40bc06 100644
--- a/src/models/entities/drive-file.ts
+++ b/src/models/entities/drive-file.ts
@@ -145,6 +145,7 @@ export class DriveFile {
 	@JoinColumn()
 	public folder: DriveFolder | null;
 
+	@Index()
 	@Column('boolean', {
 		default: false,
 		comment: 'Whether the DriveFile is NSFW.'
diff --git a/src/models/entities/meta.ts b/src/models/entities/meta.ts
index 622d28bead..d1eecf6277 100644
--- a/src/models/entities/meta.ts
+++ b/src/models/entities/meta.ts
@@ -370,4 +370,9 @@ export class Meta {
 		default: true,
 	})
 	public objectStorageUseProxy: boolean;
+
+	@Column('boolean', {
+		default: false,
+	})
+	public objectStorageSetPublicRead: boolean;
 }
diff --git a/src/models/entities/note-unread.ts b/src/models/entities/note-unread.ts
index 2d18728256..57dda4fafd 100644
--- a/src/models/entities/note-unread.ts
+++ b/src/models/entities/note-unread.ts
@@ -2,6 +2,7 @@ import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typ
 import { User } from './user';
 import { Note } from './note';
 import { id } from '../id';
+import { Channel } from './channel';
 
 @Entity()
 @Index(['userId', 'noteId'], { unique: true })
@@ -29,15 +30,34 @@ export class NoteUnread {
 	@JoinColumn()
 	public note: Note | null;
 
+	/**
+	 * メンションか否か
+	 */
+	@Index()
+	@Column('boolean')
+	public isMentioned: boolean;
+
+	/**
+	 * ダイレクト投稿か否か
+	 */
+	@Index()
+	@Column('boolean')
+	public isSpecified: boolean;
+
+	//#region Denormalized fields
+	@Index()
 	@Column({
 		...id(),
 		comment: '[Denormalized]'
 	})
 	public noteUserId: User['id'];
 
-	/**
-	 * ダイレクト投稿か
-	 */
-	@Column('boolean')
-	public isSpecified: boolean;
+	@Index()
+	@Column({
+		...id(),
+		nullable: true,
+		comment: '[Denormalized]'
+	})
+	public noteChannelId: Channel['id'] | null;
+	//#endregion
 }
diff --git a/src/models/entities/note.ts b/src/models/entities/note.ts
index 196be1e350..2be7d2b33c 100644
--- a/src/models/entities/note.ts
+++ b/src/models/entities/note.ts
@@ -3,7 +3,7 @@ import { User } from './user';
 import { DriveFile } from './drive-file';
 import { id } from '../id';
 import { noteVisibilities } from '../../types';
-
+import { Channel } from './channel';
 
 @Entity()
 @Index('IDX_NOTE_TAGS', { synchronize: false })
@@ -173,6 +173,20 @@ export class Note {
 	})
 	public hasPoll: boolean;
 
+	@Index()
+	@Column({
+		...id(),
+		nullable: true, default: null,
+		comment: 'The ID of source channel.'
+	})
+	public channelId: Channel['id'] | null;
+
+	@ManyToOne(type => Channel, {
+		onDelete: 'CASCADE'
+	})
+	@JoinColumn()
+	public channel: Channel | null;
+
 	//#region Denormalized fields
 	@Index()
 	@Column('varchar', {
diff --git a/src/models/entities/user-note-pinings.ts b/src/models/entities/user-note-pining.ts
similarity index 100%
rename from src/models/entities/user-note-pinings.ts
rename to src/models/entities/user-note-pining.ts
diff --git a/src/models/index.ts b/src/models/index.ts
index e58d8b551d..dd05dcbcc6 100644
--- a/src/models/index.ts
+++ b/src/models/index.ts
@@ -15,7 +15,7 @@ import { DriveFileRepository } from './repositories/drive-file';
 import { DriveFolderRepository } from './repositories/drive-folder';
 import { Log } from './entities/log';
 import { AccessToken } from './entities/access-token';
-import { UserNotePining } from './entities/user-note-pinings';
+import { UserNotePining } from './entities/user-note-pining';
 import { SigninRepository } from './repositories/signin';
 import { MessagingMessageRepository } from './repositories/messaging-message';
 import { ReversiGameRepository } from './repositories/games/reversi/game';
@@ -53,7 +53,10 @@ import { PromoNote } from './entities/promo-note';
 import { PromoRead } from './entities/promo-read';
 import { EmojiRepository } from './repositories/emoji';
 import { RelayRepository } from './repositories/relay';
+import { ChannelRepository } from './repositories/channel';
 import { MutedNote } from './entities/muted-note';
+import { ChannelFollowing } from './entities/channel-following';
+import { ChannelNotePining } from './entities/channel-note-pining';
 
 export const Announcements = getRepository(Announcement);
 export const AnnouncementReads = getRepository(AnnouncementRead);
@@ -110,3 +113,6 @@ export const PromoNotes = getRepository(PromoNote);
 export const PromoReads = getRepository(PromoRead);
 export const Relays = getCustomRepository(RelayRepository);
 export const MutedNotes = getRepository(MutedNote);
+export const Channels = getCustomRepository(ChannelRepository);
+export const ChannelFollowings = getRepository(ChannelFollowing);
+export const ChannelNotePinings = getRepository(ChannelNotePining);
diff --git a/src/models/repositories/channel.ts b/src/models/repositories/channel.ts
new file mode 100644
index 0000000000..2a90419922
--- /dev/null
+++ b/src/models/repositories/channel.ts
@@ -0,0 +1,101 @@
+import { EntityRepository, Repository } from 'typeorm';
+import { Channel } from '../entities/channel';
+import { ensure } from '../../prelude/ensure';
+import { SchemaType } from '../../misc/schema';
+import { DriveFiles, ChannelFollowings, NoteUnreads } from '..';
+import { User } from '../entities/user';
+
+export type PackedChannel = SchemaType<typeof packedChannelSchema>;
+
+@EntityRepository(Channel)
+export class ChannelRepository extends Repository<Channel> {
+	public async pack(
+		src: Channel['id'] | Channel,
+		me?: User['id'] | User | null | undefined,
+	): Promise<PackedChannel> {
+		const channel = typeof src === 'object' ? src : await this.findOne(src).then(ensure);
+		const meId = me ? typeof me === 'string' ? me : me.id : null;
+
+		const banner = channel.bannerId ? await DriveFiles.findOne(channel.bannerId) : null;
+
+		const hasUnreadNote = me ? (await NoteUnreads.findOne({ noteChannelId: channel.id, userId: meId })) != null : undefined;
+
+		const following = await ChannelFollowings.findOne({
+			followerId: meId,
+			followeeId: channel.id,
+		});
+
+		return {
+			id: channel.id,
+			createdAt: channel.createdAt.toISOString(),
+			lastNotedAt: channel.lastNotedAt ? channel.lastNotedAt.toISOString() : null,
+			name: channel.name,
+			description: channel.description,
+			userId: channel.userId,
+			bannerUrl: banner ? DriveFiles.getPublicUrl(banner, false) : null,
+			usersCount: channel.usersCount,
+			notesCount: channel.notesCount,
+
+			...(me ? {
+				isFollowing: following != null,
+				hasUnreadNote,
+			} : {})
+		};
+	}
+}
+
+export const packedChannelSchema = {
+	type: 'object' as const,
+	optional: false as const, nullable: false as const,
+	properties: {
+		id: {
+			type: 'string' as const,
+			optional: false as const, nullable: false as const,
+			format: 'id',
+			description: 'The unique identifier for this Channel.',
+			example: 'xxxxxxxxxx',
+		},
+		createdAt: {
+			type: 'string' as const,
+			optional: false as const, nullable: false as const,
+			format: 'date-time',
+			description: 'The date that the Channel was created.'
+		},
+		lastNotedAt: {
+			type: 'string' as const,
+			optional: false as const, nullable: true as const,
+			format: 'date-time',
+		},
+		name: {
+			type: 'string' as const,
+			optional: false as const, nullable: false as const,
+			description: 'The name of the Channel.'
+		},
+		description: {
+			type: 'string' as const,
+			nullable: true as const, optional: false as const,
+		},
+		bannerUrl: {
+			type: 'string' as const,
+			format: 'url',
+			nullable: true as const, optional: false as const,
+		},
+		notesCount: {
+			type: 'number' as const,
+			nullable: false as const, optional: false as const,
+		},
+		usersCount: {
+			type: 'number' as const,
+			nullable: false as const, optional: false as const,
+		},
+		isFollowing: {
+			type: 'boolean' as const,
+			optional: true as const, nullable: false as const,
+		},
+		userId: {
+			type: 'string' as const,
+			nullable: false as const, optional: false as const,
+			format: 'id',
+		},
+	},
+};
diff --git a/src/models/repositories/note.ts b/src/models/repositories/note.ts
index 3c5500f493..b60744bb2b 100644
--- a/src/models/repositories/note.ts
+++ b/src/models/repositories/note.ts
@@ -1,7 +1,7 @@
 import { EntityRepository, Repository, In } from 'typeorm';
 import { Note } from '../entities/note';
 import { User } from '../entities/user';
-import { Emojis, Users, PollVotes, DriveFiles, NoteReactions, Followings, Polls } from '..';
+import { Emojis, Users, PollVotes, DriveFiles, NoteReactions, Followings, Polls, Channels } from '..';
 import { ensure } from '../../prelude/ensure';
 import { SchemaType } from '../../misc/schema';
 import { awaitAll } from '../../prelude/await-all';
@@ -207,6 +207,12 @@ export class NoteRepository extends Repository<Note> {
 			text = `【${note.name}】\n${(note.text || '').trim()}\n\n${note.url || note.uri}`;
 		}
 
+		const channel = note.channelId
+			? note.channel
+				? note.channel
+				: await Channels.findOne(note.channelId)
+			: null;
+
 		const packed = await awaitAll({
 			id: note.id,
 			createdAt: note.createdAt.toISOString(),
@@ -227,6 +233,11 @@ export class NoteRepository extends Repository<Note> {
 			files: DriveFiles.packMany(note.fileIds),
 			replyId: note.replyId,
 			renoteId: note.renoteId,
+			channelId: note.channelId || undefined,
+			channel: channel ? {
+				id: channel.id,
+				name: channel.name,
+			} : undefined,
 			mentions: note.mentions.length > 0 ? note.mentions : undefined,
 			uri: note.uri || undefined,
 			url: note.url || undefined,
@@ -391,6 +402,16 @@ export const packedNoteSchema = {
 			type: 'object' as const,
 			optional: true as const, nullable: true as const,
 		},
-
+		channelId: {
+			type: 'string' as const,
+			optional: true as const, nullable: true as const,
+			format: 'id',
+			example: 'xxxxxxxxxx',
+		},
+		channel: {
+			type: 'object' as const,
+			optional: true as const, nullable: true as const,
+			ref: 'Channel'
+		},
 	},
 };
diff --git a/src/models/repositories/user.ts b/src/models/repositories/user.ts
index 955a70ee60..ae5321b15a 100644
--- a/src/models/repositories/user.ts
+++ b/src/models/repositories/user.ts
@@ -1,7 +1,7 @@
 import $ from 'cafy';
 import { EntityRepository, Repository, In, Not } from 'typeorm';
 import { User, ILocalUser, IRemoteUser } from '../entities/user';
-import { Emojis, Notes, NoteUnreads, FollowRequests, Notifications, MessagingMessages, UserNotePinings, Followings, Blockings, Mutings, UserProfiles, UserSecurityKeys, UserGroupJoinings, Pages, Announcements, AnnouncementReads, Antennas, AntennaNotes } from '..';
+import { Emojis, Notes, NoteUnreads, FollowRequests, Notifications, MessagingMessages, UserNotePinings, Followings, Blockings, Mutings, UserProfiles, UserSecurityKeys, UserGroupJoinings, Pages, Announcements, AnnouncementReads, Antennas, AntennaNotes, ChannelFollowings } from '..';
 import { ensure } from '../../prelude/ensure';
 import config from '../../config';
 import { SchemaType } from '../../misc/schema';
@@ -107,6 +107,17 @@ export class UserRepository extends Repository<User> {
 		return unread != null;
 	}
 
+	public async getHasUnreadChannel(userId: User['id']): Promise<boolean> {
+		const channels = await ChannelFollowings.find({ followerId: userId });
+
+		const unread = channels.length > 0 ? await NoteUnreads.findOne({
+			userId: userId,
+			noteChannelId: In(channels.map(x => x.id)),
+		}) : null;
+
+		return unread != null;
+	}
+
 	public async getHasUnreadNotification(userId: User['id']): Promise<boolean> {
 		const mute = await Mutings.find({
 			muterId: userId
@@ -139,7 +150,6 @@ export class UserRepository extends Repository<User> {
 		options?: {
 			detail?: boolean,
 			includeSecrets?: boolean,
-			includeHasUnreadNotes?: boolean
 		}
 	): Promise<PackedUser> {
 		const opts = Object.assign({
@@ -181,17 +191,6 @@ export class UserRepository extends Repository<User> {
 				select: ['name', 'host', 'url', 'aliases']
 			}) : [],
 
-			...(opts.includeHasUnreadNotes ? {
-				hasUnreadSpecifiedNotes: NoteUnreads.count({
-					where: { userId: user.id, isSpecified: true },
-					take: 1
-				}).then(count => count > 0),
-				hasUnreadMentions: NoteUnreads.count({
-					where: { userId: user.id },
-					take: 1
-				}).then(count => count > 0),
-			} : {}),
-
 			...(opts.detail ? {
 				url: profile!.url,
 				createdAt: user.createdAt.toISOString(),
@@ -233,8 +232,17 @@ export class UserRepository extends Repository<User> {
 				alwaysMarkNsfw: profile!.alwaysMarkNsfw,
 				carefulBot: profile!.carefulBot,
 				autoAcceptFollowed: profile!.autoAcceptFollowed,
+				hasUnreadSpecifiedNotes: NoteUnreads.count({
+					where: { userId: user.id, isSpecified: true },
+					take: 1
+				}).then(count => count > 0),
+				hasUnreadMentions: NoteUnreads.count({
+					where: { userId: user.id, isMentioned: true },
+					take: 1
+				}).then(count => count > 0),
 				hasUnreadAnnouncement: this.getHasUnreadAnnouncement(user.id),
 				hasUnreadAntenna: this.getHasUnreadAntenna(user.id),
+				hasUnreadChannel: this.getHasUnreadChannel(user.id),
 				hasUnreadMessagingMessage: this.getHasUnreadMessagingMessage(user.id),
 				hasUnreadNotification: this.getHasUnreadNotification(user.id),
 				hasPendingReceivedFollowRequest: this.getHasPendingReceivedFollowRequest(user.id),
@@ -276,7 +284,6 @@ export class UserRepository extends Repository<User> {
 		options?: {
 			detail?: boolean,
 			includeSecrets?: boolean,
-			includeHasUnreadNotes?: boolean
 		}
 	) {
 		return Promise.all(users.map(u => this.pack(u, me, options)));
diff --git a/src/remote/activitypub/models/person.ts b/src/remote/activitypub/models/person.ts
index 5213f872ec..9f6392174b 100644
--- a/src/remote/activitypub/models/person.ts
+++ b/src/remote/activitypub/models/person.ts
@@ -15,7 +15,7 @@ import { updateUsertags } from '../../../services/update-hashtag';
 import { Users, UserNotePinings, Instances, DriveFiles, Followings, UserProfiles, UserPublickeys } from '../../../models';
 import { User, IRemoteUser } from '../../../models/entities/user';
 import { Emoji } from '../../../models/entities/emoji';
-import { UserNotePining } from '../../../models/entities/user-note-pinings';
+import { UserNotePining } from '../../../models/entities/user-note-pining';
 import { genId } from '../../../misc/gen-id';
 import { instanceChart, usersChart } from '../../../services/chart';
 import { UserPublickey } from '../../../models/entities/user-publickey';
diff --git a/src/remote/activitypub/request.ts b/src/remote/activitypub/request.ts
index ab3ae025a5..ab51fdd93c 100644
--- a/src/remote/activitypub/request.ts
+++ b/src/remote/activitypub/request.ts
@@ -49,7 +49,7 @@ export default async (user: ILocalUser, url: string, object: any) => {
 			authorizationHeaderName: 'Signature',
 			key: keypair.privateKey,
 			keyId: `${config.url}/users/${user.id}#main-key`,
-			headers: ['date', 'host', 'digest']
+			headers: ['(request-target)', 'date', 'host', 'digest']
 		});
 
 		req.on('timeout', () => req.abort());
diff --git a/src/server/api/common/generate-channel-query.ts b/src/server/api/common/generate-channel-query.ts
new file mode 100644
index 0000000000..c0337b2c6b
--- /dev/null
+++ b/src/server/api/common/generate-channel-query.ts
@@ -0,0 +1,24 @@
+import { User } from '../../../models/entities/user';
+import { ChannelFollowings } from '../../../models';
+import { Brackets, SelectQueryBuilder } from 'typeorm';
+
+export function generateChannelQuery(q: SelectQueryBuilder<any>, me?: User | null) {
+	if (me == null) {
+		q.andWhere('note.channelId IS NULL');
+	} else {
+		q.leftJoinAndSelect('note.channel', 'channel');
+
+		const channelFollowingQuery = ChannelFollowings.createQueryBuilder('channelFollowing')
+			.select('channelFollowing.followeeId')
+			.where('channelFollowing.followerId = :followerId', { followerId: me.id });
+
+		q.andWhere(new Brackets(qb => { qb
+			// チャンネルのノートではない
+			.where('note.channelId IS NULL')
+			// または自分がフォローしているチャンネルのノート
+			.orWhere(`note.channelId IN (${ channelFollowingQuery.getQuery() })`);
+		}));
+
+		q.setParameters(channelFollowingQuery.getParameters());
+	}
+}
diff --git a/src/server/api/endpoints/admin/show-user.ts b/src/server/api/endpoints/admin/show-user.ts
index 81a311b725..ea4df141f3 100644
--- a/src/server/api/endpoints/admin/show-user.ts
+++ b/src/server/api/endpoints/admin/show-user.ts
@@ -35,5 +35,8 @@ export default define(meta, async (ps, me) => {
 		throw new Error('cannot show info of admin');
 	}
 
-	return user;
+	return {
+		...user,
+		token: user.token != null ? '<MASKED>' : user.token,
+	};
 });
diff --git a/src/server/api/endpoints/admin/update-meta.ts b/src/server/api/endpoints/admin/update-meta.ts
index dffe7ffe7f..fea6cb539f 100644
--- a/src/server/api/endpoints/admin/update-meta.ts
+++ b/src/server/api/endpoints/admin/update-meta.ts
@@ -418,6 +418,10 @@ export const meta = {
 
 		objectStorageUseProxy: {
 			validator: $.optional.bool
+		},
+
+		objectStorageSetPublicRead: {
+			validator: $.optional.bool
 		}
 	}
 };
@@ -673,6 +677,10 @@ export default define(meta, async (ps, me) => {
 		set.objectStorageUseProxy = ps.objectStorageUseProxy;
 	}
 
+	if (ps.objectStorageSetPublicRead !== undefined) {
+		set.objectStorageSetPublicRead = ps.objectStorageSetPublicRead;
+	}
+
 	await getConnection().transaction(async transactionalEntityManager => {
 		const meta = await transactionalEntityManager.findOne(Meta, {
 			order: {
diff --git a/src/server/api/endpoints/channels/create.ts b/src/server/api/endpoints/channels/create.ts
new file mode 100644
index 0000000000..53436e703d
--- /dev/null
+++ b/src/server/api/endpoints/channels/create.ts
@@ -0,0 +1,68 @@
+import $ from 'cafy';
+import define from '../../define';
+import { ApiError } from '../../error';
+import { Channels, DriveFiles } from '../../../../models';
+import { Channel } from '../../../../models/entities/channel';
+import { genId } from '../../../../misc/gen-id';
+import { ID } from '../../../../misc/cafy-id';
+
+export const meta = {
+	tags: ['channels'],
+
+	requireCredential: true as const,
+
+	kind: 'write:channels',
+
+	params: {
+		name: {
+			validator: $.str.range(1, 128)
+		},
+
+		description: {
+			validator: $.nullable.optional.str.range(1, 2048)
+		},
+
+		bannerId: {
+			validator: $.nullable.optional.type(ID),
+		}
+	},
+
+	res: {
+		type: 'object' as const,
+		optional: false as const, nullable: false as const,
+		ref: 'Channel',
+	},
+
+	errors: {
+		noSuchFile: {
+			message: 'No such file.',
+			code: 'NO_SUCH_FILE',
+			id: 'cd1e9f3e-5a12-4ab4-96f6-5d0a2cc32050'
+		},
+	}
+};
+
+export default define(meta, async (ps, user) => {
+	let banner = null;
+	if (ps.bannerId != null) {
+		banner = await DriveFiles.findOne({
+			id: ps.bannerId,
+			userId: user.id
+		});
+
+		if (banner == null) {
+			throw new ApiError(meta.errors.noSuchFile);
+		}
+	}
+
+	const channel = await Channels.save({
+		id: genId(),
+		createdAt: new Date(),
+		userId: user.id,
+		name: ps.name,
+		description: ps.description || null,
+		bannerId: banner ? banner.id : null,
+	} as Channel);
+
+	return await Channels.pack(channel, user);
+});
diff --git a/src/server/api/endpoints/channels/featured.ts b/src/server/api/endpoints/channels/featured.ts
new file mode 100644
index 0000000000..abb0a19e2d
--- /dev/null
+++ b/src/server/api/endpoints/channels/featured.ts
@@ -0,0 +1,28 @@
+import define from '../../define';
+import { Channels } from '../../../../models';
+
+export const meta = {
+	tags: ['channels'],
+
+	requireCredential: false as const,
+
+	res: {
+		type: 'array' as const,
+		optional: false as const, nullable: false as const,
+		items: {
+			type: 'object' as const,
+			optional: false as const, nullable: false as const,
+			ref: 'Channel',
+		}
+	},
+};
+
+export default define(meta, async (ps, me) => {
+	const query = Channels.createQueryBuilder('channel')
+		.where('channel.lastNotedAt IS NOT NULL')
+		.orderBy('channel.lastNotedAt', 'DESC');
+
+	const channels = await query.take(10).getMany();
+
+	return await Promise.all(channels.map(x => Channels.pack(x, me)));
+});
diff --git a/src/server/api/endpoints/channels/follow.ts b/src/server/api/endpoints/channels/follow.ts
new file mode 100644
index 0000000000..bf2f2bbb57
--- /dev/null
+++ b/src/server/api/endpoints/channels/follow.ts
@@ -0,0 +1,45 @@
+import $ from 'cafy';
+import { ID } from '../../../../misc/cafy-id';
+import define from '../../define';
+import { ApiError } from '../../error';
+import { Channels, ChannelFollowings } from '../../../../models';
+import { genId } from '../../../../misc/gen-id';
+
+export const meta = {
+	tags: ['channels'],
+
+	requireCredential: true as const,
+
+	kind: 'write:channels',
+
+	params: {
+		channelId: {
+			validator: $.type(ID),
+		},
+	},
+
+	errors: {
+		noSuchChannel: {
+			message: 'No such channel.',
+			code: 'NO_SUCH_CHANNEL',
+			id: 'c0031718-d573-4e85-928e-10039f1fbb68'
+		},
+	}
+};
+
+export default define(meta, async (ps, user) => {
+	const channel = await Channels.findOne({
+		id: ps.channelId,
+	});
+
+	if (channel == null) {
+		throw new ApiError(meta.errors.noSuchChannel);
+	}
+
+	await ChannelFollowings.save({
+		id: genId(),
+		createdAt: new Date(),
+		followerId: user.id,
+		followeeId: channel.id,
+	});
+});
diff --git a/src/server/api/endpoints/channels/followed.ts b/src/server/api/endpoints/channels/followed.ts
new file mode 100644
index 0000000000..05c2ec6a75
--- /dev/null
+++ b/src/server/api/endpoints/channels/followed.ts
@@ -0,0 +1,28 @@
+import define from '../../define';
+import { Channels, ChannelFollowings } from '../../../../models';
+
+export const meta = {
+	tags: ['channels', 'account'],
+
+	requireCredential: true as const,
+
+	kind: 'read:channels',
+
+	res: {
+		type: 'array' as const,
+		optional: false as const, nullable: false as const,
+		items: {
+			type: 'object' as const,
+			optional: false as const, nullable: false as const,
+			ref: 'Channel',
+		}
+	},
+};
+
+export default define(meta, async (ps, me) => {
+	const followings = await ChannelFollowings.find({
+		followerId: me.id,
+	});
+
+	return await Promise.all(followings.map(x => Channels.pack(x.followeeId, me)));
+});
diff --git a/src/server/api/endpoints/channels/owned.ts b/src/server/api/endpoints/channels/owned.ts
new file mode 100644
index 0000000000..9e563c0ac5
--- /dev/null
+++ b/src/server/api/endpoints/channels/owned.ts
@@ -0,0 +1,28 @@
+import define from '../../define';
+import { Channels } from '../../../../models';
+
+export const meta = {
+	tags: ['channels', 'account'],
+
+	requireCredential: true as const,
+
+	kind: 'read:channels',
+
+	res: {
+		type: 'array' as const,
+		optional: false as const, nullable: false as const,
+		items: {
+			type: 'object' as const,
+			optional: false as const, nullable: false as const,
+			ref: 'Channel',
+		}
+	},
+};
+
+export default define(meta, async (ps, me) => {
+	const channels = await Channels.find({
+		userId: me.id,
+	});
+
+	return await Promise.all(channels.map(x => Channels.pack(x, me)));
+});
diff --git a/src/server/api/endpoints/channels/pin-note.ts b/src/server/api/endpoints/channels/pin-note.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/server/api/endpoints/channels/show.ts b/src/server/api/endpoints/channels/show.ts
new file mode 100644
index 0000000000..63057dd57f
--- /dev/null
+++ b/src/server/api/endpoints/channels/show.ts
@@ -0,0 +1,43 @@
+import $ from 'cafy';
+import { ID } from '../../../../misc/cafy-id';
+import define from '../../define';
+import { ApiError } from '../../error';
+import { Channels } from '../../../../models';
+
+export const meta = {
+	tags: ['channels'],
+
+	requireCredential: false as const,
+
+	params: {
+		channelId: {
+			validator: $.type(ID),
+		},
+	},
+
+	res: {
+		type: 'object' as const,
+		optional: false as const, nullable: false as const,
+		ref: 'Channel',
+	},
+
+	errors: {
+		noSuchChannel: {
+			message: 'No such channel.',
+			code: 'NO_SUCH_CHANNEL',
+			id: '6f6c314b-7486-4897-8966-c04a66a02923'
+		},
+	}
+};
+
+export default define(meta, async (ps, me) => {
+	const channel = await Channels.findOne({
+		id: ps.channelId,
+	});
+
+	if (channel == null) {
+		throw new ApiError(meta.errors.noSuchChannel);
+	}
+
+	return await Channels.pack(channel, me);
+});
diff --git a/src/server/api/endpoints/channels/timeline.ts b/src/server/api/endpoints/channels/timeline.ts
new file mode 100644
index 0000000000..3ae28fc67a
--- /dev/null
+++ b/src/server/api/endpoints/channels/timeline.ts
@@ -0,0 +1,99 @@
+import $ from 'cafy';
+import { ID } from '../../../../misc/cafy-id';
+import define from '../../define';
+import { ApiError } from '../../error';
+import { Notes, Channels } from '../../../../models';
+import { makePaginationQuery } from '../../common/make-pagination-query';
+import { activeUsersChart } from '../../../../services/chart';
+
+export const meta = {
+	tags: ['notes', 'channels'],
+
+	requireCredential: false as const,
+
+	params: {
+		channelId: {
+			validator: $.type(ID),
+			desc: {
+				'ja-JP': 'チャンネルのID'
+			}
+		},
+
+		limit: {
+			validator: $.optional.num.range(1, 100),
+			default: 10,
+			desc: {
+				'ja-JP': '最大数'
+			}
+		},
+
+		sinceId: {
+			validator: $.optional.type(ID),
+			desc: {
+				'ja-JP': '指定すると、その投稿を基点としてより新しい投稿を取得します'
+			}
+		},
+
+		untilId: {
+			validator: $.optional.type(ID),
+			desc: {
+				'ja-JP': '指定すると、その投稿を基点としてより古い投稿を取得します'
+			}
+		},
+
+		sinceDate: {
+			validator: $.optional.num,
+			desc: {
+				'ja-JP': '指定した時間を基点としてより新しい投稿を取得します。数値は、1970年1月1日 00:00:00 UTC から指定した日時までの経過時間をミリ秒単位で表します。'
+			}
+		},
+
+		untilDate: {
+			validator: $.optional.num,
+			desc: {
+				'ja-JP': '指定した時間を基点としてより古い投稿を取得します。数値は、1970年1月1日 00:00:00 UTC から指定した日時までの経過時間をミリ秒単位で表します。'
+			}
+		},
+	},
+
+	res: {
+		type: 'array' as const,
+		optional: false as const, nullable: false as const,
+		items: {
+			type: 'object' as const,
+			optional: false as const, nullable: false as const,
+			ref: 'Note',
+		}
+	},
+
+	errors: {
+		noSuchChannel: {
+			message: 'No such channel.',
+			code: 'NO_SUCH_CHANNEL',
+			id: '4d0eeeba-a02c-4c3c-9966-ef60d38d2e7f'
+		}
+	}
+};
+
+export default define(meta, async (ps, user) => {
+	const channel = await Channels.findOne({
+		id: ps.channelId,
+	});
+
+	if (channel == null) {
+		throw new ApiError(meta.errors.noSuchChannel);
+	}
+
+	//#region Construct query
+	const query = makePaginationQuery(Notes.createQueryBuilder('note'), ps.sinceId, ps.untilId)
+		.andWhere('note.channelId = :channelId', { channelId: channel.id })
+		.leftJoinAndSelect('note.user', 'user')
+		.leftJoinAndSelect('note.channel', 'channel');
+	//#endregion
+
+	const timeline = await query.take(ps.limit!).getMany();
+
+	activeUsersChart.update(user);
+
+	return await Notes.packMany(timeline, user);
+});
diff --git a/src/server/api/endpoints/channels/unfollow.ts b/src/server/api/endpoints/channels/unfollow.ts
new file mode 100644
index 0000000000..8cab5c36a6
--- /dev/null
+++ b/src/server/api/endpoints/channels/unfollow.ts
@@ -0,0 +1,42 @@
+import $ from 'cafy';
+import { ID } from '../../../../misc/cafy-id';
+import define from '../../define';
+import { ApiError } from '../../error';
+import { Channels, ChannelFollowings } from '../../../../models';
+
+export const meta = {
+	tags: ['channels'],
+
+	requireCredential: true as const,
+
+	kind: 'write:channels',
+
+	params: {
+		channelId: {
+			validator: $.type(ID),
+		},
+	},
+
+	errors: {
+		noSuchChannel: {
+			message: 'No such channel.',
+			code: 'NO_SUCH_CHANNEL',
+			id: '19959ee9-0153-4c51-bbd9-a98c49dc59d6'
+		},
+	}
+};
+
+export default define(meta, async (ps, user) => {
+	const channel = await Channels.findOne({
+		id: ps.channelId,
+	});
+
+	if (channel == null) {
+		throw new ApiError(meta.errors.noSuchChannel);
+	}
+
+	await ChannelFollowings.delete({
+		followerId: user.id,
+		followeeId: channel.id,
+	});
+});
diff --git a/src/server/api/endpoints/channels/update.ts b/src/server/api/endpoints/channels/update.ts
new file mode 100644
index 0000000000..8b94646ad1
--- /dev/null
+++ b/src/server/api/endpoints/channels/update.ts
@@ -0,0 +1,93 @@
+import $ from 'cafy';
+import { ID } from '../../../../misc/cafy-id';
+import define from '../../define';
+import { ApiError } from '../../error';
+import { Channels, DriveFiles } from '../../../../models';
+
+export const meta = {
+	tags: ['channels'],
+
+	requireCredential: true as const,
+
+	kind: 'write:channels',
+
+	params: {
+		channelId: {
+			validator: $.type(ID),
+		},
+
+		name: {
+			validator: $.optional.str.range(1, 128)
+		},
+
+		description: {
+			validator: $.nullable.optional.str.range(1, 2048)
+		},
+
+		bannerId: {
+			validator: $.nullable.optional.type(ID),
+		}
+	},
+
+	res: {
+		type: 'object' as const,
+		optional: false as const, nullable: false as const,
+		ref: 'Channel',
+	},
+
+	errors: {
+		noSuchChannel: {
+			message: 'No such channel.',
+			code: 'NO_SUCH_CHANNEL',
+			id: 'f9c5467f-d492-4c3c-9a8d-a70dacc86512'
+		},
+
+		accessDenied: {
+			message: 'You do not have edit privilege of the channel.',
+			code: 'ACCESS_DENIED',
+			id: '1fb7cb09-d46a-4fdf-b8df-057788cce513'
+		},
+
+		noSuchFile: {
+			message: 'No such file.',
+			code: 'NO_SUCH_FILE',
+			id: 'e86c14a4-0da2-4032-8df3-e737a04c7f3b'
+		},
+	}
+};
+
+export default define(meta, async (ps, me) => {
+	const channel = await Channels.findOne({
+		id: ps.channelId,
+	});
+
+	if (channel == null) {
+		throw new ApiError(meta.errors.noSuchChannel);
+	}
+
+	if (channel.userId !== me.id) {
+		throw new ApiError(meta.errors.accessDenied);
+	}
+
+	let banner = undefined;
+	if (ps.bannerId != null) {
+		banner = await DriveFiles.findOne({
+			id: ps.bannerId,
+			userId: me.id
+		});
+
+		if (banner == null) {
+			throw new ApiError(meta.errors.noSuchFile);
+		}
+	} else if (ps.bannerId === null) {
+		banner = null;
+	}
+
+	await Channels.update(channel.id, {
+		...(ps.name !== undefined ? { name: ps.name } : {}),
+		...(ps.description !== undefined ? { description: ps.description } : {}),
+		...(banner ? { bannerId: banner.id } : {}),
+	});
+
+	return await Channels.pack(channel.id, me);
+});
diff --git a/src/server/api/endpoints/i.ts b/src/server/api/endpoints/i.ts
index 02d59682b8..bceb9548ef 100644
--- a/src/server/api/endpoints/i.ts
+++ b/src/server/api/endpoints/i.ts
@@ -24,7 +24,6 @@ export default define(meta, async (ps, user, token) => {
 
 	return await Users.pack(user, user, {
 		detail: true,
-		includeHasUnreadNotes: true,
 		includeSecrets: isSecure
 	});
 });
diff --git a/src/server/api/endpoints/i/get-word-muted-notes-count.ts b/src/server/api/endpoints/i/get-word-muted-notes-count.ts
new file mode 100644
index 0000000000..e88d697bfd
--- /dev/null
+++ b/src/server/api/endpoints/i/get-word-muted-notes-count.ts
@@ -0,0 +1,22 @@
+import define from '../../define';
+import { MutedNotes } from '../../../../models';
+
+export const meta = {
+	tags: ['account'],
+
+	requireCredential: true as const,
+
+	kind: 'read:account',
+
+	params: {
+	}
+};
+
+export default define(meta, async (ps, user) => {
+	return {
+		count: await MutedNotes.count({
+			userId: user.id,
+			reason: 'word'
+		})
+	};
+});
diff --git a/src/server/api/endpoints/meta.ts b/src/server/api/endpoints/meta.ts
index eefc370124..f011a6751f 100644
--- a/src/server/api/endpoints/meta.ts
+++ b/src/server/api/endpoints/meta.ts
@@ -195,6 +195,7 @@ export default define(meta, async (ps, me) => {
 		response.objectStorageSecretKey = instance.objectStorageSecretKey;
 		response.objectStorageUseSSL = instance.objectStorageUseSSL;
 		response.objectStorageUseProxy = instance.objectStorageUseProxy;
+		response.objectStorageSetPublicRead = instance.objectStorageSetPublicRead;
 	}
 
 	return response;
diff --git a/src/server/api/endpoints/notes/create.ts b/src/server/api/endpoints/notes/create.ts
index 5076dad82a..b8c4900af7 100644
--- a/src/server/api/endpoints/notes/create.ts
+++ b/src/server/api/endpoints/notes/create.ts
@@ -7,11 +7,12 @@ import { fetchMeta } from '../../../../misc/fetch-meta';
 import { ApiError } from '../../error';
 import { ID } from '../../../../misc/cafy-id';
 import { User } from '../../../../models/entities/user';
-import { Users, DriveFiles, Notes } from '../../../../models';
+import { Users, DriveFiles, Notes, Channels } from '../../../../models';
 import { DriveFile } from '../../../../models/entities/drive-file';
 import { Note } from '../../../../models/entities/note';
 import { DB_MAX_NOTE_TEXT_LENGTH } from '../../../../misc/hard-limits';
 import { noteVisibilities } from '../../../../types';
+import { Channel } from '../../../../models/entities/channel';
 
 let maxNoteTextLength = 500;
 
@@ -128,19 +129,26 @@ export const meta = {
 		},
 
 		replyId: {
-			validator: $.optional.type(ID),
+			validator: $.optional.nullable.type(ID),
 			desc: {
 				'ja-JP': '返信対象'
 			}
 		},
 
 		renoteId: {
-			validator: $.optional.type(ID),
+			validator: $.optional.nullable.type(ID),
 			desc: {
 				'ja-JP': 'Renote対象'
 			}
 		},
 
+		channelId: {
+			validator: $.optional.nullable.type(ID),
+			desc: {
+				'ja-JP': 'チャンネル'
+			}
+		},
+
 		poll: {
 			validator: $.optional.obj({
 				choices: $.arr($.str)
@@ -206,7 +214,13 @@ export const meta = {
 			message: 'Poll is already expired.',
 			code: 'CANNOT_CREATE_ALREADY_EXPIRED_POLL',
 			id: '04da457d-b083-4055-9082-955525eda5a5'
-		}
+		},
+
+		noSuchChannel: {
+			message: 'No such channel.',
+			code: 'NO_SUCH_CHANNEL',
+			id: 'b1653923-5453-4edc-b786-7c4f39bb0bbb'
+		},
 	}
 };
 
@@ -269,6 +283,15 @@ export default define(meta, async (ps, user) => {
 		throw new ApiError(meta.errors.contentRequired);
 	}
 
+	let channel: Channel | undefined;
+	if (ps.channelId != null) {
+		channel = await Channels.findOne(ps.channelId);
+
+		if (channel == null) {
+			throw new ApiError(meta.errors.noSuchChannel);
+		}
+	}
+
 	// 投稿を作成
 	const note = await create(user, {
 		createdAt: new Date(),
@@ -286,6 +309,7 @@ export default define(meta, async (ps, user) => {
 		localOnly: ps.localOnly,
 		visibility: ps.visibility,
 		visibleUsers,
+		channel,
 		apMentions: ps.noExtractMentions ? [] : undefined,
 		apHashtags: ps.noExtractHashtags ? [] : undefined,
 		apEmojis: ps.noExtractEmojis ? [] : undefined,
diff --git a/src/server/api/endpoints/notes/global-timeline.ts b/src/server/api/endpoints/notes/global-timeline.ts
index 5e61c17841..6d99f1fdbc 100644
--- a/src/server/api/endpoints/notes/global-timeline.ts
+++ b/src/server/api/endpoints/notes/global-timeline.ts
@@ -80,6 +80,7 @@ export default define(meta, async (ps, user) => {
 	const query = makePaginationQuery(Notes.createQueryBuilder('note'),
 			ps.sinceId, ps.untilId, ps.sinceDate, ps.untilDate)
 		.andWhere('note.visibility = \'public\'')
+		.andWhere('note.channelId IS NULL')
 		.leftJoinAndSelect('note.user', 'user');
 
 	generateRepliesQuery(query, user);
diff --git a/src/server/api/endpoints/notes/hybrid-timeline.ts b/src/server/api/endpoints/notes/hybrid-timeline.ts
index fab4e9f4e5..2b91b8c67b 100644
--- a/src/server/api/endpoints/notes/hybrid-timeline.ts
+++ b/src/server/api/endpoints/notes/hybrid-timeline.ts
@@ -13,6 +13,7 @@ import { generateRepliesQuery } from '../../common/generate-replies-query';
 import { injectPromo } from '../../common/inject-promo';
 import { injectFeatured } from '../../common/inject-featured';
 import { generateMutedNoteQuery } from '../../common/generate-muted-note-query';
+import { generateChannelQuery } from '../../common/generate-channel-query';
 
 export const meta = {
 	desc: {
@@ -131,6 +132,7 @@ export default define(meta, async (ps, user) => {
 		.leftJoinAndSelect('note.user', 'user')
 		.setParameters(followingQuery.getParameters());
 
+	generateChannelQuery(query, user);
 	generateRepliesQuery(query, user);
 	generateVisibilityQuery(query, user);
 	generateMutedUserQuery(query, user);
diff --git a/src/server/api/endpoints/notes/local-timeline.ts b/src/server/api/endpoints/notes/local-timeline.ts
index 38ec1d4727..51e35e6241 100644
--- a/src/server/api/endpoints/notes/local-timeline.ts
+++ b/src/server/api/endpoints/notes/local-timeline.ts
@@ -13,6 +13,7 @@ import { generateRepliesQuery } from '../../common/generate-replies-query';
 import { injectPromo } from '../../common/inject-promo';
 import { injectFeatured } from '../../common/inject-featured';
 import { generateMutedNoteQuery } from '../../common/generate-muted-note-query';
+import { generateChannelQuery } from '../../common/generate-channel-query';
 
 export const meta = {
 	desc: {
@@ -99,6 +100,7 @@ export default define(meta, async (ps, user) => {
 		.andWhere('(note.visibility = \'public\') AND (note.userHost IS NULL)')
 		.leftJoinAndSelect('note.user', 'user');
 
+	generateChannelQuery(query, user);
 	generateRepliesQuery(query, user);
 	generateVisibilityQuery(query, user);
 	if (user) generateMutedUserQuery(query, user);
diff --git a/src/server/api/endpoints/notes/timeline.ts b/src/server/api/endpoints/notes/timeline.ts
index 657739820b..f09f3d1733 100644
--- a/src/server/api/endpoints/notes/timeline.ts
+++ b/src/server/api/endpoints/notes/timeline.ts
@@ -11,6 +11,7 @@ import { generateRepliesQuery } from '../../common/generate-replies-query';
 import { injectPromo } from '../../common/inject-promo';
 import { injectFeatured } from '../../common/inject-featured';
 import { generateMutedNoteQuery } from '../../common/generate-muted-note-query';
+import { generateChannelQuery } from '../../common/generate-channel-query';
 
 export const meta = {
 	desc: {
@@ -124,6 +125,7 @@ export default define(meta, async (ps, user) => {
 		.leftJoinAndSelect('note.user', 'user')
 		.setParameters(followingQuery.getParameters());
 
+	generateChannelQuery(query, user);
 	generateRepliesQuery(query, user);
 	generateVisibilityQuery(query, user);
 	generateMutedUserQuery(query, user);
diff --git a/src/server/api/stream/channel.ts b/src/server/api/stream/channel.ts
index 82a95ad3d7..9b7c31e7bb 100644
--- a/src/server/api/stream/channel.ts
+++ b/src/server/api/stream/channel.ts
@@ -27,6 +27,10 @@ export default abstract class Channel {
 		return this.connection.muting;
 	}
 
+	protected get followingChannels() {
+		return this.connection.followingChannels;
+	}
+
 	protected get subscriber() {
 		return this.connection.subscriber;
 	}
diff --git a/src/server/api/stream/channels/channel.ts b/src/server/api/stream/channels/channel.ts
new file mode 100644
index 0000000000..c24b3db937
--- /dev/null
+++ b/src/server/api/stream/channels/channel.ts
@@ -0,0 +1,49 @@
+import autobind from 'autobind-decorator';
+import Channel from '../channel';
+import { Notes } from '../../../../models';
+import { isMutedUserRelated } from '../../../../misc/is-muted-user-related';
+import { PackedNote } from '../../../../models/repositories/note';
+
+export default class extends Channel {
+	public readonly chName = 'channel';
+	public static shouldShare = false;
+	public static requireCredential = false;
+	private channelId: string;
+
+	@autobind
+	public async init(params: any) {
+		this.channelId = params.channelId as string;
+
+		// Subscribe stream
+		this.subscriber.on('notesStream', this.onNote);
+	}
+
+	@autobind
+	private async onNote(note: PackedNote) {
+		if (note.channelId !== this.channelId) return;
+
+		// リプライなら再pack
+		if (note.replyId != null) {
+			note.reply = await Notes.pack(note.replyId, this.user, {
+				detail: true
+			});
+		}
+		// Renoteなら再pack
+		if (note.renoteId != null) {
+			note.renote = await Notes.pack(note.renoteId, this.user, {
+				detail: true
+			});
+		}
+
+		// 流れてきたNoteがミュートしているユーザーが関わるものだったら無視する
+		if (isMutedUserRelated(note, this.muting)) return;
+
+		this.send('note', note);
+	}
+
+	@autobind
+	public dispose() {
+		// Unsubscribe events
+		this.subscriber.off('notesStream', this.onNote);
+	}
+}
diff --git a/src/server/api/stream/channels/global-timeline.ts b/src/server/api/stream/channels/global-timeline.ts
index d530907d8d..8c97e67226 100644
--- a/src/server/api/stream/channels/global-timeline.ts
+++ b/src/server/api/stream/channels/global-timeline.ts
@@ -25,6 +25,7 @@ export default class extends Channel {
 	@autobind
 	private async onNote(note: PackedNote) {
 		if (note.visibility !== 'public') return;
+		if (note.channelId != null) return;
 
 		// リプライなら再pack
 		if (note.replyId != null) {
diff --git a/src/server/api/stream/channels/home-timeline.ts b/src/server/api/stream/channels/home-timeline.ts
index caf4ccf5e9..15fe7fa6f0 100644
--- a/src/server/api/stream/channels/home-timeline.ts
+++ b/src/server/api/stream/channels/home-timeline.ts
@@ -18,8 +18,12 @@ export default class extends Channel {
 
 	@autobind
 	private async onNote(note: PackedNote) {
-		// その投稿のユーザーをフォローしていなかったら弾く
-		if (this.user!.id !== note.userId && !this.following.includes(note.userId)) return;
+		if (note.channelId) {
+			if (!this.followingChannels.includes(note.channelId)) return;
+		} else {
+			// その投稿のユーザーをフォローしていなかったら弾く
+			if ((this.user!.id !== note.userId) && !this.following.includes(note.userId)) return;
+		}
 
 		if (['followers', 'specified'].includes(note.visibility)) {
 			note = await Notes.pack(note.id, this.user!, {
diff --git a/src/server/api/stream/channels/hybrid-timeline.ts b/src/server/api/stream/channels/hybrid-timeline.ts
index 1aec98aa72..4dc5f01a32 100644
--- a/src/server/api/stream/channels/hybrid-timeline.ts
+++ b/src/server/api/stream/channels/hybrid-timeline.ts
@@ -23,11 +23,15 @@ export default class extends Channel {
 
 	@autobind
 	private async onNote(note: PackedNote) {
-		// 自分自身の投稿 または その投稿のユーザーをフォローしている または 全体公開のローカルの投稿 の場合だけ
+		// チャンネルの投稿ではなく、自分自身の投稿 または
+		// チャンネルの投稿ではなく、その投稿のユーザーをフォローしている または
+		// チャンネルの投稿ではなく、全体公開のローカルの投稿 または
+		// フォローしているチャンネルの投稿 の場合だけ
 		if (!(
-			this.user!.id === note.userId ||
-			this.following.includes(note.userId) ||
-			((note.user as PackedUser).host == null && note.visibility === 'public')
+			(note.channelId == null && this.user!.id === note.userId) ||
+			(note.channelId == null && this.following.includes(note.userId)) ||
+			(note.channelId == null && ((note.user as PackedUser).host == null && note.visibility === 'public')) ||
+			(note.channelId != null && this.followingChannels.includes(note.channelId))
 		)) return;
 
 		if (['followers', 'specified'].includes(note.visibility)) {
diff --git a/src/server/api/stream/channels/index.ts b/src/server/api/stream/channels/index.ts
index 6efad078c6..1841573043 100644
--- a/src/server/api/stream/channels/index.ts
+++ b/src/server/api/stream/channels/index.ts
@@ -11,6 +11,7 @@ import messaging from './messaging';
 import messagingIndex from './messaging-index';
 import drive from './drive';
 import hashtag from './hashtag';
+import channel from './channel';
 import admin from './admin';
 import gamesReversi from './games/reversi';
 import gamesReversiGame from './games/reversi-game';
@@ -29,6 +30,7 @@ export default {
 	messagingIndex,
 	drive,
 	hashtag,
+	channel,
 	admin,
 	gamesReversi,
 	gamesReversiGame
diff --git a/src/server/api/stream/channels/local-timeline.ts b/src/server/api/stream/channels/local-timeline.ts
index 6426ccc23f..baeae86603 100644
--- a/src/server/api/stream/channels/local-timeline.ts
+++ b/src/server/api/stream/channels/local-timeline.ts
@@ -27,6 +27,7 @@ export default class extends Channel {
 	private async onNote(note: PackedNote) {
 		if ((note.user as PackedUser).host !== null) return;
 		if (note.visibility !== 'public') return;
+		if (note.channelId != null && !this.followingChannels.includes(note.channelId)) return;
 
 		// リプライなら再pack
 		if (note.replyId != null) {
diff --git a/src/server/api/stream/index.ts b/src/server/api/stream/index.ts
index bebf88a7cd..36e08ec05f 100644
--- a/src/server/api/stream/index.ts
+++ b/src/server/api/stream/index.ts
@@ -7,7 +7,8 @@ import Channel from './channel';
 import channels from './channels';
 import { EventEmitter } from 'events';
 import { User } from '../../../models/entities/user';
-import { Users, Followings, Mutings, UserProfiles } from '../../../models';
+import { Channel as ChannelModel } from '../../../models/entities/channel';
+import { Users, Followings, Mutings, UserProfiles, ChannelFollowings } from '../../../models';
 import { ApiError } from '../error';
 import { AccessToken } from '../../../models/entities/access-token';
 import { UserProfile } from '../../../models/entities/user-profile';
@@ -20,6 +21,7 @@ export default class Connection {
 	public userProfile?: UserProfile;
 	public following: User['id'][] = [];
 	public muting: User['id'][] = [];
+	public followingChannels: ChannelModel['id'][] = [];
 	public token?: AccessToken;
 	private wsConnection: websocket.connection;
 	public subscriber: EventEmitter;
@@ -27,6 +29,7 @@ export default class Connection {
 	private subscribingNotes: any = {};
 	private followingClock: NodeJS.Timer;
 	private mutingClock: NodeJS.Timer;
+	private followingChannelsClock: NodeJS.Timer;
 	private userProfileClock: NodeJS.Timer;
 
 	constructor(
@@ -53,6 +56,9 @@ export default class Connection {
 			this.updateMuting();
 			this.mutingClock = setInterval(this.updateMuting, 5000);
 
+			this.updateFollowingChannels();
+			this.followingChannelsClock = setInterval(this.updateFollowingChannels, 5000);
+
 			this.updateUserProfile();
 			this.userProfileClock = setInterval(this.updateUserProfile, 5000);
 		}
@@ -65,7 +71,15 @@ export default class Connection {
 	private async onWsConnectionMessage(data: websocket.IMessage) {
 		if (data.utf8Data == null) return;
 
-		const { type, body } = JSON.parse(data.utf8Data);
+		let obj: Record<string, any>;
+
+		try {
+			obj = JSON.parse(data.utf8Data);
+		} catch (e) {
+			return;
+		}
+
+		const { type, body } = obj;
 
 		switch (type) {
 			case 'api': this.onApiRequest(body); break;
@@ -268,6 +282,18 @@ export default class Connection {
 		this.muting = mutings.map(x => x.muteeId);
 	}
 
+	@autobind
+	private async updateFollowingChannels() {
+		const followings = await ChannelFollowings.find({
+			where: {
+				followerId: this.user!.id
+			},
+			select: ['followeeId']
+		});
+
+		this.followingChannels = followings.map(x => x.followeeId);
+	}
+
 	@autobind
 	private async updateUserProfile() {
 		this.userProfile = await UserProfiles.findOne({
@@ -286,6 +312,7 @@ export default class Connection {
 
 		if (this.followingClock) clearInterval(this.followingClock);
 		if (this.mutingClock) clearInterval(this.mutingClock);
+		if (this.followingChannelsClock) clearInterval(this.followingChannelsClock);
 		if (this.userProfileClock) clearInterval(this.userProfileClock);
 	}
 }
diff --git a/src/server/proxy/proxy-media.ts b/src/server/proxy/proxy-media.ts
index d035a84d9e..4373cc20f5 100644
--- a/src/server/proxy/proxy-media.ts
+++ b/src/server/proxy/proxy-media.ts
@@ -21,7 +21,7 @@ export async function proxyMedia(ctx: Koa.Context) {
 
 		let image: IImage;
 
-		if ('static' in ctx.query && ['image/png', 'image/gif', 'image/apng', 'image/vnd.mozilla.apng'].includes(mime)) {
+		if ('static' in ctx.query && ['image/png', 'image/gif', 'image/apng', 'image/vnd.mozilla.apng', 'image/webp'].includes(mime)) {
 			image = await convertToPng(path, 498, 280);
 		} else if ('preview' in ctx.query && ['image/jpeg', 'image/png', 'image/gif', 'image/apng', 'image/vnd.mozilla.apng'].includes(mime)) {
 			image = await convertToJpeg(path, 200, 200);
diff --git a/src/server/web/index.ts b/src/server/web/index.ts
index 42c37b61aa..18cd102eba 100644
--- a/src/server/web/index.ts
+++ b/src/server/web/index.ts
@@ -17,7 +17,7 @@ import packFeed from './feed';
 import { fetchMeta } from '../../misc/fetch-meta';
 import { genOpenapiSpec } from '../api/openapi/gen-spec';
 import config from '../../config';
-import { Users, Notes, Emojis, UserProfiles, Pages } from '../../models';
+import { Users, Notes, Emojis, UserProfiles, Pages, Channels } from '../../models';
 import parseAcct from '../../misc/acct/parse';
 import getNoteSummary from '../../misc/get-note-summary';
 import { ensure } from '../../prelude/ensure';
@@ -188,7 +188,7 @@ router.get('/@:user.json', async ctx => {
 	}
 });
 
-//#region for crawlers
+//#region SSR (for crawlers)
 // User
 router.get(['/@:user', '/@:user/:sub'], async (ctx, next) => {
 	const { username, host } = parseAcct(ctx.params.user);
@@ -297,6 +297,28 @@ router.get('/@:user/pages/:page', async ctx => {
 
 	ctx.status = 404;
 });
+
+// Channel
+router.get('/channels/:channel', async ctx => {
+	const channel = await Channels.findOne({
+		id: ctx.params.channel,
+	});
+
+	if (channel) {
+		const _channel = await Channels.pack(channel);
+		const meta = await fetchMeta();
+		await ctx.render('channel', {
+			channel: _channel,
+			instanceName: meta.name || 'Misskey'
+		});
+
+		ctx.set('Cache-Control', 'public, max-age=180');
+
+		return;
+	}
+
+	ctx.status = 404;
+});
 //#endregion
 
 router.get('/info', async ctx => {
diff --git a/src/server/web/views/channel.pug b/src/server/web/views/channel.pug
new file mode 100644
index 0000000000..273632f0e0
--- /dev/null
+++ b/src/server/web/views/channel.pug
@@ -0,0 +1,21 @@
+extends ./base
+
+block vars
+	- const title = channel.name;
+	- const url = `${config.url}/channels/${channel.id}`;
+
+block title
+	= `${title} | ${instanceName}`
+
+block desc
+	meta(name='description' content= channel.description)
+
+block og
+	meta(property='og:type'        content='article')
+	meta(property='og:title'       content= title)
+	meta(property='og:description' content= channel.description)
+	meta(property='og:url'         content= url)
+	meta(property='og:image'       content= channel.bannerUrl)
+
+block meta
+	meta(name='twitter:card' content='summary')
diff --git a/src/services/add-note-to-antenna.ts b/src/services/add-note-to-antenna.ts
index 57a0df2752..e486494c9b 100644
--- a/src/services/add-note-to-antenna.ts
+++ b/src/services/add-note-to-antenna.ts
@@ -28,6 +28,7 @@ export async function addNoteToAntenna(antenna: Antenna, note: Note, noteUser: U
 			select: ['muteeId']
 		});
 
+		// Copy
 		const _note: Note = {
 			...note
 		};
diff --git a/src/services/drive/add-file.ts b/src/services/drive/add-file.ts
index 969dc04069..fbd2f76ddc 100644
--- a/src/services/drive/add-file.ts
+++ b/src/services/drive/add-file.ts
@@ -7,7 +7,7 @@ import { deleteFile } from './delete-file';
 import { fetchMeta } from '../../misc/fetch-meta';
 import { GenerateVideoThumbnail } from './generate-video-thumbnail';
 import { driveLogger } from './logger';
-import { IImage, convertToJpeg, convertToWebp, convertToPng, convertToPngOrJpeg } from './image-processor';
+import { IImage, convertSharpToJpeg, convertSharpToWebp, convertSharpToPng, convertSharpToPngOrJpeg } from './image-processor';
 import { contentDisposition } from '../../misc/content-disposition';
 import { getFileInfo } from '../../misc/get-file-info';
 import { DriveFiles, DriveFolders, Users, Instances, UserProfiles } from '../../models';
@@ -19,6 +19,7 @@ import { genId } from '../../misc/gen-id';
 import { isDuplicateKeyValueError } from '../../misc/is-duplicate-key-value-error';
 import * as S3 from 'aws-sdk/clients/s3';
 import { getS3 } from './s3';
+import * as sharp from 'sharp';
 
 const logger = driveLogger.createSubLogger('register', 'yellow');
 
@@ -143,6 +144,34 @@ async function save(file: DriveFile, path: string, name: string, type: string, h
  * @param generateWeb Generate webpublic or not
  */
 export async function generateAlts(path: string, type: string, generateWeb: boolean) {
+	if (type.startsWith('video/')) {
+		try {
+			const thumbnail = await GenerateVideoThumbnail(path);
+			return {
+				webpublic: null,
+				thumbnail
+			};
+		} catch (e) {
+			logger.warn(`GenerateVideoThumbnail failed: ${e}`);
+			return {
+				webpublic: null,
+				thumbnail: null
+			};
+		}
+	}
+
+	const img = sharp(path);
+	const metadata = await img.metadata();
+	const isAnimated = metadata.pages && metadata.pages > 1;
+
+	// skip animated
+	if (isAnimated) {
+		return {
+			webpublic: null,
+			thumbnail: null
+		};
+	}
+
 	// #region webpublic
 	let webpublic: IImage | null = null;
 
@@ -151,11 +180,11 @@ export async function generateAlts(path: string, type: string, generateWeb: bool
 
 		try {
 			if (['image/jpeg'].includes(type)) {
-				webpublic = await convertToJpeg(path, 2048, 2048);
+				webpublic = await convertSharpToJpeg(img, 2048, 2048);
 			} else if (['image/webp'].includes(type)) {
-				webpublic = await convertToWebp(path, 2048, 2048);
+				webpublic = await convertSharpToWebp(img, 2048, 2048);
 			} else if (['image/png'].includes(type)) {
-				webpublic = await convertToPng(path, 2048, 2048);
+				webpublic = await convertSharpToPng(img, 2048, 2048);
 			} else {
 				logger.debug(`web image not created (not an required image)`);
 			}
@@ -172,15 +201,9 @@ export async function generateAlts(path: string, type: string, generateWeb: bool
 
 	try {
 		if (['image/jpeg', 'image/webp'].includes(type)) {
-			thumbnail = await convertToJpeg(path, 498, 280);
+			thumbnail = await convertSharpToJpeg(img, 498, 280);
 		} else if (['image/png'].includes(type)) {
-			thumbnail = await convertToPngOrJpeg(path, 498, 280);
-		} else if (type.startsWith('video/')) {
-			try {
-				thumbnail = await GenerateVideoThumbnail(path);
-			} catch (e) {
-				logger.warn(`GenerateVideoThumbnail failed: ${e}`);
-			}
+			thumbnail = await convertSharpToPngOrJpeg(img, 498, 280);
 		} else {
 			logger.debug(`thumbnail not created (not an required file)`);
 		}
@@ -212,10 +235,13 @@ async function upload(key: string, stream: fs.ReadStream | Buffer, type: string,
 	} as S3.PutObjectRequest;
 
 	if (filename) params.ContentDisposition = contentDisposition('inline', filename);
+	if (meta.objectStorageSetPublicRead) params.ACL = 'public-read';
 
 	const s3 = getS3(meta);
 
-	const upload = s3.upload(params);
+	const upload = s3.upload(params, {
+		partSize: s3.endpoint?.hostname === 'storage.googleapis.com' ? 500 * 1024 * 1024 : 8 * 1024 * 1024
+	});
 
 	const result = await upload.promise();
 	if (result) logger.debug(`Uploaded: ${result.Bucket}/${result.Key} => ${result.Location}`);
diff --git a/src/services/i/pin.ts b/src/services/i/pin.ts
index fcddc50636..1ff5476b40 100644
--- a/src/services/i/pin.ts
+++ b/src/services/i/pin.ts
@@ -6,7 +6,7 @@ import { IdentifiableError } from '../../misc/identifiable-error';
 import { User } from '../../models/entities/user';
 import { Note } from '../../models/entities/note';
 import { Notes, UserNotePinings, Users } from '../../models';
-import { UserNotePining } from '../../models/entities/user-note-pinings';
+import { UserNotePining } from '../../models/entities/user-note-pining';
 import { genId } from '../../misc/gen-id';
 import { deliverToFollowers } from '../../remote/activitypub/deliver-manager';
 import { deliverToRelays } from '../relay';
diff --git a/src/services/note/create.ts b/src/services/note/create.ts
index 44ec5fda6f..a530b86f55 100644
--- a/src/services/note/create.ts
+++ b/src/services/note/create.ts
@@ -17,7 +17,7 @@ import extractMentions from '../../misc/extract-mentions';
 import extractEmojis from '../../misc/extract-emojis';
 import extractHashtags from '../../misc/extract-hashtags';
 import { Note, IMentionedRemoteUsers } from '../../models/entities/note';
-import { Mutings, Users, NoteWatchings, Notes, Instances, UserProfiles, Antennas, Followings, MutedNotes } from '../../models';
+import { Mutings, Users, NoteWatchings, Notes, Instances, UserProfiles, Antennas, Followings, MutedNotes, Channels, ChannelFollowings } from '../../models';
 import { DriveFile } from '../../models/entities/drive-file';
 import { App } from '../../models/entities/app';
 import { Not, getConnection, In } from 'typeorm';
@@ -33,6 +33,7 @@ import { checkWordMute } from '../../misc/check-word-mute';
 import { addNoteToAntenna } from '../add-note-to-antenna';
 import { countSameRenotes } from '../../misc/count-same-renotes';
 import { deliverToRelays } from '../relay';
+import { Channel } from '../../models/entities/channel';
 
 type NotificationType = 'reply' | 'renote' | 'quote' | 'mention';
 
@@ -102,6 +103,7 @@ type Option = {
 	cw?: string | null;
 	visibility?: string;
 	visibleUsers?: User[] | null;
+	channel?: Channel | null;
 	apMentions?: User[] | null;
 	apHashtags?: string[] | null;
 	apEmojis?: string[] | null;
@@ -111,13 +113,31 @@ type Option = {
 };
 
 export default async (user: User, data: Option, silent = false) => new Promise<Note>(async (res, rej) => {
+	// チャンネル外にリプライしたら対象のスコープに合わせる
+	// (クライアントサイドでやっても良い処理だと思うけどとりあえずサーバーサイドで)
+	if (data.reply && data.channel && data.reply.channelId !== data.channel.id) {
+		if (data.reply.channelId) {
+			data.channel = await Channels.findOne(data.reply.channelId);
+		} else {
+			data.channel = null;
+		}
+	}
+
+	// チャンネル内にリプライしたら対象のスコープに合わせる
+	// (クライアントサイドでやっても良い処理だと思うけどとりあえずサーバーサイドで)
+	if (data.reply && (data.channel == null) && data.reply.channelId) {
+		data.channel = await Channels.findOne(data.reply.channelId);
+	}
+
 	if (data.createdAt == null) data.createdAt = new Date();
 	if (data.visibility == null) data.visibility = 'public';
 	if (data.viaMobile == null) data.viaMobile = false;
 	if (data.localOnly == null) data.localOnly = false;
+	if (data.channel != null) data.visibility = 'public';
+	if (data.channel != null) data.visibleUsers = [];
 
 	// サイレンス
-	if (user.isSilenced && data.visibility === 'public') {
+	if (user.isSilenced && data.visibility === 'public' && data.channel == null) {
 		data.visibility = 'home';
 	}
 
@@ -142,12 +162,12 @@ export default async (user: User, data: Option, silent = false) => new Promise<N
 	}
 
 	// ローカルのみをRenoteしたらローカルのみにする
-	if (data.renote && data.renote.localOnly) {
+	if (data.renote && data.renote.localOnly && data.channel == null) {
 		data.localOnly = true;
 	}
 
 	// ローカルのみにリプライしたらローカルのみにする
-	if (data.reply && data.reply.localOnly) {
+	if (data.reply && data.reply.localOnly && data.channel == null) {
 		data.localOnly = true;
 	}
 
@@ -255,6 +275,18 @@ export default async (user: User, data: Option, silent = false) => new Promise<N
 		}
 	});
 
+	// Channel
+	if (note.channelId) {
+		ChannelFollowings.find({ followeeId: note.channelId }).then(followings => {
+			for (const following of followings) {
+				insertNoteUnread(following.followerId, note, {
+					isSpecified: false,
+					isMentioned: false,
+				});
+			}
+		});
+	}
+
 	if (data.reply) {
 		saveReply(data.reply, note);
 	}
@@ -273,11 +305,23 @@ export default async (user: User, data: Option, silent = false) => new Promise<N
 			if (data.visibleUsers == null) throw new Error('invalid param');
 
 			for (const u of data.visibleUsers) {
-				insertNoteUnread(u, note, true);
+				// ローカルユーザーのみ
+				if (!Users.isLocalUser(u)) continue;
+
+				insertNoteUnread(u.id, note, {
+					isSpecified: true,
+					isMentioned: false,
+				});
 			}
 		} else {
 			for (const u of mentionedUsers) {
-				insertNoteUnread(u, note, false);
+				// ローカルユーザーのみ
+				if (!Users.isLocalUser(u)) continue;
+
+				insertNoteUnread(u.id, note, {
+					isSpecified: false,
+					isMentioned: true,
+				});
 			}
 		}
 
@@ -379,6 +423,24 @@ export default async (user: User, data: Option, silent = false) => new Promise<N
 		//#endregion
 	}
 
+	if (data.channel) {
+		Channels.increment({ id: data.channel.id }, 'notesCount', 1);
+		Channels.update(data.channel.id, {
+			lastNotedAt: new Date(),
+		});
+
+		Notes.count({
+			userId: user.id,
+			channelId: data.channel.id,
+		}).then(count => {
+			// この処理が行われるのはノート作成後なので、ノートが一つしかなかったら最初の投稿だと判断できる
+			// TODO: とはいえノートを削除して何回も投稿すればその分だけインクリメントされる雑さもあるのでどうにかしたい
+			if (count === 1) {
+				Channels.increment({ id: data.channel.id }, 'usersCount', 1);
+			}
+		});
+	}
+
 	// Register to search database
 	index(note);
 });
@@ -405,6 +467,7 @@ async function insertNote(user: User, data: Option, tags: string[], emojis: stri
 		fileIds: data.files ? data.files.map(file => file.id) : [],
 		replyId: data.reply ? data.reply.id : null,
 		renoteId: data.renote ? data.renote.id : null,
+		channelId: data.channel ? data.channel.id : null,
 		name: data.name,
 		text: data.text,
 		hasPoll: data.poll != null,
diff --git a/src/services/note/read.ts b/src/services/note/read.ts
index 33fe4f1bf0..5a39ab30b7 100644
--- a/src/services/note/read.ts
+++ b/src/services/note/read.ts
@@ -2,71 +2,104 @@ import { publishMainStream } from '../stream';
 import { Note } from '../../models/entities/note';
 import { User } from '../../models/entities/user';
 import { NoteUnreads, Antennas, AntennaNotes, Users } from '../../models';
-
-// TODO: 状態が変化していない場合は各種イベントを送信しない
+import { Not, IsNull } from 'typeorm';
 
 /**
  * Mark a note as read
  */
-export default (
+export default async function(
 	userId: User['id'],
 	noteId: Note['id']
-) => new Promise<any>(async (resolve, reject) => {
-	// Remove document
-	/*const res = */await NoteUnreads.delete({
-		userId: userId,
-		noteId: noteId
-	});
-
-	// v11 TODO: https://github.com/typeorm/typeorm/issues/2415
-	//if (res.affected === 0) {
-	//	return;
-	//}
-
-	const [count1, count2] = await Promise.all([
-		NoteUnreads.count({
+) {
+	async function careNoteUnreads() {
+		const exist = await NoteUnreads.findOne({
 			userId: userId,
-			isSpecified: false
-		}),
-		NoteUnreads.count({
-			userId: userId,
-			isSpecified: true
-		})
-	]);
-
-	if (count1 === 0) {
-		// 全て既読になったイベントを発行
-		publishMainStream(userId, 'readAllUnreadMentions');
-	}
-
-	if (count2 === 0) {
-		// 全て既読になったイベントを発行
-		publishMainStream(userId, 'readAllUnreadSpecifiedNotes');
-	}
-
-	const antennas = await Antennas.find({ userId });
-
-	await Promise.all(antennas.map(async antenna => {
-		await AntennaNotes.update({
-			antennaId: antenna.id,
-			noteId: noteId
-		}, {
-			read: true
+			noteId: noteId,
 		});
 
-		const count = await AntennaNotes.count({
-			antennaId: antenna.id,
-			read: false
+		if (!exist) return;
+
+		// Remove the record
+		await NoteUnreads.delete({
+			userId: userId,
+			noteId: noteId,
 		});
 
-		if (count === 0) {
-			publishMainStream(userId, 'readAntenna', antenna);
+		if (exist.isMentioned) {
+			NoteUnreads.count({
+				userId: userId,
+				isMentioned: true
+			}).then(mentionsCount => {
+				if (mentionsCount === 0) {
+					// 全て既読になったイベントを発行
+					publishMainStream(userId, 'readAllUnreadMentions');
+				}
+			});
 		}
-	}));
 
-	Users.getHasUnreadAntenna(userId).then(unread => {
-		if (!unread) {
-			publishMainStream(userId, 'readAllAntennas');
+		if (exist.isSpecified) {
+			NoteUnreads.count({
+				userId: userId,
+				isSpecified: true
+			}).then(specifiedCount => {
+				if (specifiedCount === 0) {
+					// 全て既読になったイベントを発行
+					publishMainStream(userId, 'readAllUnreadSpecifiedNotes');
+				}
+			});
 		}
-	});
-});
+
+		if (exist.noteChannelId) {
+			NoteUnreads.count({
+				userId: userId,
+				noteChannelId: Not(IsNull())
+			}).then(channelNoteCount => {
+				if (channelNoteCount === 0) {
+					// 全て既読になったイベントを発行
+					publishMainStream(userId, 'readAllChannels');
+				}
+			});
+		}
+	}
+
+	async function careAntenna() {
+		const beforeUnread = await Users.getHasUnreadAntenna(userId);
+		if (!beforeUnread) return;
+
+		const antennas = await Antennas.find({ userId });
+
+		await Promise.all(antennas.map(async antenna => {
+			const countBefore = await AntennaNotes.count({
+				antennaId: antenna.id,
+				read: false
+			});
+
+			if (countBefore === 0) return;
+
+			await AntennaNotes.update({
+				antennaId: antenna.id,
+				noteId: noteId
+			}, {
+				read: true
+			});
+
+			const countAfter = await AntennaNotes.count({
+				antennaId: antenna.id,
+				read: false
+			});
+
+			if (countAfter === 0) {
+				publishMainStream(userId, 'readAntenna', antenna);
+			}
+		}));
+
+		Users.getHasUnreadAntenna(userId).then(unread => {
+			if (!unread) {
+				publishMainStream(userId, 'readAllAntennas');
+			}
+		});
+	}
+
+	careNoteUnreads();
+	careAntenna();
+}
diff --git a/src/services/note/unread.ts b/src/services/note/unread.ts
index 549aa971a7..6fd9ee2cfe 100644
--- a/src/services/note/unread.ts
+++ b/src/services/note/unread.ts
@@ -1,16 +1,18 @@
 import { Note } from '../../models/entities/note';
 import { publishMainStream } from '../stream';
 import { User } from '../../models/entities/user';
-import { Mutings, NoteUnreads, Users } from '../../models';
+import { Mutings, NoteUnreads } from '../../models';
 import { genId } from '../../misc/gen-id';
 
-export default async function(user: User, note: Note, isSpecified = false) {
-	// ローカルユーザーのみ
-	if (!Users.isLocalUser(user)) return;
-
+export default async function(userId: User['id'], note: Note, params: {
+	// NOTE: isSpecifiedがtrueならisMentionedは必ずfalse
+	isSpecified: boolean;
+	isMentioned: boolean;
+}) {
 	//#region ミュートしているなら無視
+	// TODO: 現在の仕様ではChannelにミュートは適用されないのでよしなにケアする
 	const mute = await Mutings.find({
-		muterId: user.id
+		muterId: userId
 	});
 	if (mute.map(m => m.muteeId).includes(note.userId)) return;
 	//#endregion
@@ -18,20 +20,27 @@ export default async function(user: User, note: Note, isSpecified = false) {
 	const unread = await NoteUnreads.save({
 		id: genId(),
 		noteId: note.id,
-		userId: user.id,
-		isSpecified,
-		noteUserId: note.userId
+		userId: userId,
+		isSpecified: params.isSpecified,
+		isMentioned: params.isMentioned,
+		noteChannelId: note.channelId,
+		noteUserId: note.userId,
 	});
 
 	// 2秒経っても既読にならなかったら「未読の投稿がありますよ」イベントを発行する
 	setTimeout(async () => {
 		const exist = await NoteUnreads.findOne(unread.id);
+
 		if (exist == null) return;
 
-		publishMainStream(user.id, 'unreadMention', note.id);
-
-		if (isSpecified) {
-			publishMainStream(user.id, 'unreadSpecifiedNote', note.id);
+		if (params.isMentioned) {
+			publishMainStream(userId, 'unreadMention', note.id);
+		}
+		if (params.isSpecified) {
+			publishMainStream(userId, 'unreadSpecifiedNote', note.id);
+		}
+		if (note.channelId) {
+			publishMainStream(userId, 'unreadChannel', note.id);
 		}
 	}, 2000);
 }