diff --git a/packages/client/src/components/MkNoteDetailed.vue b/packages/client/src/components/MkNoteDetailed.vue
index afa51c0ca..55bae467c 100644
--- a/packages/client/src/components/MkNoteDetailed.vue
+++ b/packages/client/src/components/MkNoteDetailed.vue
@@ -17,10 +17,10 @@
 			:note="note"
 			:detailedView="true"
 		/>
-		<MkLoading v-else-if="note.reply" mini />
+		<MkLoading v-else-if="appearNote.reply" mini />
 		<MkNoteSub
-			v-if="note.reply"
-			:note="note.reply"
+			v-if="appearNote.reply"
+			:note="appearNote.reply"
 			class="reply-to"
 			:detailedView="true"
 		/>
@@ -29,21 +29,21 @@
 			ref="noteEl"
 			@contextmenu.stop="onContextmenu"
 			tabindex="-1"
-			:note="note"
+			:note="appearNote"
 			detailedView
 		></MkNote>
 
 		<MkTab v-model="tab" :style="'underline'" @update:modelValue="loadTab">
 			<option value="replies">
 				<!-- <i class="ph-arrow-u-up-left ph-bold ph-lg"></i> -->
-				<span v-if="note.repliesCount > 0" class="count">{{
-					note.repliesCount
+				<span v-if="appearNote.repliesCount > 0" class="count">{{
+					appearNote.repliesCount
 				}}</span>
 				{{ i18n.ts._notification._types.reply }}
 			</option>
-			<option value="renotes" v-if="note.renoteCount > 0">
+			<option value="renotes" v-if="appearNote.renoteCount > 0">
 				<!-- <i class="ph-repeat ph-bold ph-lg"></i> -->
-				<span class="count">{{ note.renoteCount }}</span>
+				<span class="count">{{ appearNote.renoteCount }}</span>
 				{{ i18n.ts._notification._types.renote }}
 			</option>
 			<option value="reactions" v-if="reactionsCount > 0">
@@ -71,10 +71,10 @@
 			class="reply"
 			:conversation="replies"
 			:detailedView="true"
-			:parentId="note.id"
+			:parentId="appearNote.id"
 		/>
 		<MkLoading
-			v-else-if="tab === 'replies' && note.repliesCount > 0"
+			v-else-if="tab === 'replies' && appearNote.repliesCount > 0"
 		/>
 
 		<MkNoteSub
@@ -85,7 +85,7 @@
 			class="reply"
 			:conversation="replies"
 			:detailedView="true"
-			:parentId="note.id"
+			:parentId="appearNote.id"
 		/>
 		<MkLoading v-else-if="tab === 'quotes' && directQuotes.length > 0" />
 
@@ -104,7 +104,7 @@
 		/>
 		<!-- </MkPagination> -->
 		<MkLoading
-			v-else-if="tab === 'renotes' && note.renoteCount > 0"
+			v-else-if="tab === 'renotes' && appearNote.renoteCount > 0"
 		/>
 
 		<div v-if="tab === 'clips' && clips.length > 0" class="_content clips">
@@ -132,7 +132,7 @@
 
 		<MkReactedUsers
 			v-if="tab === 'reactions' && reactionsCount > 0"
-			:note-id="note.id"
+			:note-id="appearNote.id"
 		></MkReactedUsers>
 	</div>
 	<div v-else class="_panel muted" @click="muted.muted = false">
@@ -217,11 +217,23 @@ if (noteViewInterruptors.length > 0) {
 	});
 }
 
+const isRenote =
+	note.renote != null &&
+	note.text == null &&
+	note.fileIds.length === 0 &&
+	note.poll == null;
+
 const el = ref<HTMLElement>();
 const noteEl = $ref();
 const menuButton = ref<HTMLElement>();
+const starButton = ref<InstanceType<typeof XStarButton>>();
 const renoteButton = ref<InstanceType<typeof XRenoteButton>>();
+const renoteTime = ref<HTMLElement>();
 const reactButton = ref<HTMLElement>();
+let appearNote = $computed(() =>
+	isRenote ? (note.renote as misskey.entities.Note) : note
+);
+const isMyRenote = $i && $i.id === note.userId;
 const showContent = ref(false);
 const isDeleted = ref(false);
 const muted = ref(getWordSoftMute(note, $i, defaultStore.state.mutedWords));
@@ -251,14 +263,14 @@ const keymap = {
 
 useNoteCapture({
 	rootEl: el,
-	note: $$(note),
+	note: $$(appearNote),
 	isDeletedRef: isDeleted,
 });
 
 function reply(viaKeyboard = false): void {
 	pleaseLogin();
 	os.post({
-		reply: note,
+		reply: appearNote,
 		animation: !viaKeyboard,
 	}).then(() => {
 		focus();
@@ -272,7 +284,7 @@ function react(viaKeyboard = false): void {
 		reactButton.value,
 		(reaction) => {
 			os.api("notes/reactions/create", {
-				noteId: note.id,
+				noteId: appearNote.id,
 				reaction: reaction,
 			});
 		},
@@ -343,27 +355,27 @@ function blur() {
 
 directReplies = null;
 os.api("notes/children", {
-	noteId: note.id,
+	noteId: appearNote.id,
 	limit: 30,
 	depth: 12,
 }).then((res) => {
 	res = res.reduce((acc, note) => {
-		if (note.userId == note.userId) {
+		if (note.userId == appearNote.userId) {
 			return [...acc, note];
 		}
 		return [note, ...acc];
 	}, []);
 	replies.value = res;
 	directReplies = res
-		.filter((note) => note.replyId === note.id)
+		.filter((note) => note.replyId === appearNote.id)
 		.reverse();
-	directQuotes = res.filter((note) => note.renoteId === note.id);
+	directQuotes = res.filter((note) => note.renoteId === appearNote.id);
 });
 
 conversation = null;
-if (note.replyId) {
+if (appearNote.replyId) {
 	os.api("notes/conversation", {
-		noteId: note.replyId,
+		noteId: appearNote.replyId,
 		limit: 30,
 	}).then((res) => {
 		conversation = res.reverse();
@@ -373,14 +385,14 @@ if (note.replyId) {
 
 clips = null;
 os.api("notes/clips", {
-	noteId: note.id,
+	noteId: appearNote.id,
 }).then((res) => {
 	clips = res;
 });
 
 // const pagination = {
 // 	endpoint: "notes/renotes",
-// 	noteId: note.id,
+// 	noteId: appearNote.id,
 // 	limit: 10,
 // };
 
@@ -390,7 +402,7 @@ renotes = null;
 function loadTab() {
 	if (tab === "renotes" && !renotes) {
 		os.api("notes/renotes", {
-			noteId: note.id,
+			noteId: appearNote.id,
 			limit: 100,
 		}).then((res) => {
 			renotes = res;
@@ -402,7 +414,7 @@ async function onNoteUpdated(noteData: NoteUpdatedEvent): Promise<void> {
 	const { type, id, body } = noteData;
 
 	let found = -1;
-	if (id === note.id) {
+	if (id === appearNote.id) {
 		found = 0;
 	} else {
 		for (let i = 0; i < replies.value.length; i++) {
diff --git a/packages/client/src/pages/note.vue b/packages/client/src/pages/note.vue
index fbb71bd16..e3c0bd7c2 100644
--- a/packages/client/src/pages/note.vue
+++ b/packages/client/src/pages/note.vue
@@ -13,7 +13,7 @@
 					:name="$store.state.animation ? 'fade' : ''"
 					mode="out-in"
 				>
-					<div v-if="appearNote" class="note">
+					<div v-if="note" class="note">
 						<div v-if="showNext" class="_gap">
 							<XNotes
 								class="_content"
@@ -33,12 +33,12 @@
 							</MkButton>
 							<div class="note _gap">
 								<MkRemoteCaution
-									v-if="appearNote.user.host != null"
-									:href="appearNote.url ?? appearNote.uri"
+									v-if="note.user.host != null"
+									:href="note.url ?? note.uri"
 								/>
 								<XNoteDetailed
-									:key="appearNote.id"
-									v-model:note="appearNote"
+									:key="note.id"
+									v-model:note="note"
 									class="note"
 								/>
 							</div>
@@ -71,6 +71,7 @@
 <script lang="ts" setup>
 import { computed, defineComponent, watch } from "vue";
 import * as misskey from "calckey-js";
+import XNote from "@/components/MkNote.vue";
 import XNoteDetailed from "@/components/MkNoteDetailed.vue";
 import XNotes from "@/components/MkNotes.vue";
 import MkRemoteCaution from "@/components/MkRemoteCaution.vue";
@@ -89,17 +90,15 @@ let hasNext = $ref(false);
 let showPrev = $ref(false);
 let showNext = $ref(false);
 let error = $ref();
-let isRenote = $ref(false);
-let appearNote = $ref<null | misskey.entities.Note>();
 
 const prevPagination = {
 	endpoint: "users/notes" as const,
 	limit: 10,
 	params: computed(() =>
-		appearNote
+		note
 			? {
-					userId: appearNote.userId,
-					untilId: appearNote.id,
+					userId: note.userId,
+					untilId: note.id,
 			  }
 			: null
 	),
@@ -110,10 +109,10 @@ const nextPagination = {
 	endpoint: "users/notes" as const,
 	limit: 10,
 	params: computed(() =>
-		appearNote
+		note
 			? {
-					userId: appearNote.userId,
-					sinceId: appearNote.id,
+					userId: note.userId,
+					sinceId: note.id,
 			  }
 			: null
 	),
@@ -130,13 +129,6 @@ function fetchNote() {
 	})
 		.then((res) => {
 			note = res;
-			isRenote =
-				note.renote != null &&
-				note.text == null &&
-				note.fileIds.length === 0 &&
-				note.poll == null;
-			appearNote = isRenote ? (note.renote as misskey.entities.Note) : note;
-			
 			Promise.all([
 				os.api("users/notes", {
 					userId: note.userId,
@@ -168,19 +160,19 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata(
 	computed(() =>
-		appearNote
+		note
 			? {
 					title: i18n.t("noteOf", {
-						user: appearNote.user.name || appearNote.user.username,
+						user: note.user.name || note.user.username,
 					}),
-					subtitle: new Date(appearNote.createdAt).toLocaleString(),
-					avatar: appearNote.user,
-					path: `/notes/${appearNote.id}`,
+					subtitle: new Date(note.createdAt).toLocaleString(),
+					avatar: note.user,
+					path: `/notes/${note.id}`,
 					share: {
 						title: i18n.t("noteOf", {
-							user: appearNote.user.name || appearNote.user.username,
+							user: note.user.name || note.user.username,
 						}),
-						text: appearNote.text,
+						text: note.text,
 					},
 			  }
 			: null