diff --git a/packages/frontend/.storybook/fakes.ts b/packages/frontend/.storybook/fakes.ts
index fc3b0334e4..95d0f741ed 100644
--- a/packages/frontend/.storybook/fakes.ts
+++ b/packages/frontend/.storybook/fakes.ts
@@ -207,12 +207,71 @@ export function note(id = 'somenoteid'): entities.Note {
 	};
 }
 
+export function remoteNote(id = 'somenoteId'){
+	return {
+		...note(),
+		user: {
+			...userLite(id, "remoteUser", "Remote Server"),
+		},
+		text: "this is remote note text"
+	}
+}
+
+export function renotedNote(id = 'somenoteId'): entities.Note {
+	return {
+		...note(id),
+		renote: {...note()},
+		text: null,
+	}
+}
+
+export function quotedNote(id = 'somenoteId'): entities.Note {
+	return {
+		...note(id),
+		renote: {...note()},
+		text: "quote note"
+	}
+}
+
+export function channelNote(id = 'somenoteId'): entities.Note {
+	return {
+		...note(id),
+		channel: channel(),
+	}
+}
+
+// チャンネルからのRenoteは renote に channnelNoteを入れる
+export function renotedFromChannelnote(id = "somenoteId"){
+	return {
+		...note(id),
+		renote: channelNote(),
+		text: null
+	}
+}
+
+// チャンネルへRenoteされたTLのNoteは renoteにnoteを入れる ベースはchannelNoteである
+export function renotedToChannel(id = "somenoteId"){
+	return {
+		...channelNote(),
+		renote: note(),
+		text: null
+	}
+}
+export function renotedToChannelFromChannel(id = "somenoteId"){
+	return {
+		...channelNote(),
+		renote: channelNote(),
+		text: null
+	}
+}
+
 export function userLite(id = 'someuserid', username = 'miskist', host: entities.UserDetailed['host'] = 'misskey-hub.net', name: entities.UserDetailed['name'] = 'Misskey User'): entities.UserLite {
 	return {
 		id,
 		username,
 		host,
 		name,
+		instance: host !== 'misskey-hub.net' ?   federationInstance() : null,
 		onlineStatus: 'unknown',
 		avatarUrl: 'https://github.com/misskey-dev/misskey/blob/master/packages/frontend/assets/about-icon.png?raw=true',
 		avatarBlurhash: 'eQFRshof5NWBRi},juayfPju53WB?0ofs;s*a{ofjuay^SoMEJR%ay',
diff --git a/packages/frontend/src/components/MkNote.stories.ts b/packages/frontend/src/components/MkNote.stories.ts
new file mode 100644
index 0000000000..29f3284284
--- /dev/null
+++ b/packages/frontend/src/components/MkNote.stories.ts
@@ -0,0 +1,160 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+/* eslint-disable import/no-default-export */
+/* eslint-disable import/no-duplicates */
+/* eslint-disable import/order */
+import { Meta } from '@storybook/vue3';
+const meta = {
+	title: 'components/MkNote',
+	component: MkNote,
+} satisfies Meta<typeof MkNote>;
+export default meta;
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import { StoryObj } from '@storybook/vue3';
+import { HttpResponse, http } from 'msw';
+import {
+	note,
+	channel,
+	channelNote,
+	quotedNote,
+	renotedNote,
+	remoteNote,
+	renotedFromChannelnote, renotedToChannel, renotedToChannelFromChannel
+} from '../../.storybook/fakes.js';
+import { commonHandlers } from '../../.storybook/mocks.js';
+import MkNote from "@/components/MkNote.vue";
+
+
+export const Default = {
+	render(args) {
+		return {
+			components: {
+				MkNote,
+			},
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...this.args,
+					};
+				},
+			},
+			template: '<MkNote v-bind="props" />',
+		};
+	},
+	args: {
+		note: note(),
+	},
+	parameters: {
+		layout: 'centered',
+		msw: {
+			handlers: [
+				...commonHandlers,
+				http.get('/undefined/preview.webp', async ({ request }) => {
+					const urlStr = new URL(request.url).searchParams.get('url');
+					if (urlStr == null) {
+						return new HttpResponse(null, { status: 404 });
+					}
+					const url = new URL(urlStr);
+
+					if (
+						url.href.startsWith(
+							'https://github.com/misskey-dev/misskey/blob/master/packages/frontend/assets/',
+						)
+					) {
+						const image = await (
+							await fetch(`client-assets/${url.pathname.split('/').pop()}`)
+						).blob();
+						return new HttpResponse(image, {
+							headers: {
+								'Content-Type': 'image/jpeg',
+							},
+						});
+					} else {
+						return new HttpResponse(null, { status: 404 });
+					}
+				}),
+			],
+		},
+	},
+} satisfies StoryObj<typeof MkNote>;
+
+export const Channel = {
+    ...Default,
+    args: {
+        note: channelNote()
+    }
+}
+
+export const Quoted = {
+    ...Default,
+    args: {
+        note: quotedNote()
+    }
+}
+
+export const Renoted = {
+    ...Default,
+    args: {
+        note: renotedNote()
+    }
+}
+
+export const RemoteNote = {
+	...Default,
+	args: {
+		note: remoteNote(),
+	}
+}
+
+export const Renote_RemoteNote = {
+	...Default,
+	args: {
+		note: {
+			...note(),
+			renote: remoteNote(),
+			text: null
+		}
+	}
+}
+
+export const RemoteuserRenoteNote = {
+	...Default,
+	args: {
+		note: {
+			...remoteNote(),
+			renote: note(),
+			text: null
+		}
+	}
+}
+
+export const RenotedFromChannel = {
+    ...Default,
+    args: {
+        note: renotedFromChannelnote()
+    }
+}
+
+export const RenotedToChannel = {
+        ...Default,
+        args: {
+            note: renotedToChannel()
+        }
+}
+
+export const RenotedToChannelFromChannel = {
+        ...Default,
+        args: {
+            note: renotedToChannelFromChannel()
+        }
+}
+