diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue
index 58078200cd..00758e7e40 100644
--- a/packages/client/src/components/MkNote.vue
+++ b/packages/client/src/components/MkNote.vue
@@ -821,6 +821,10 @@ defineExpose({
 						color: var(--fgHighlighted);
 					}
 
+					> i {
+						display: inline !important;
+					}
+
 					> .count {
 						display: inline;
 						margin: 0 0 0 8px;
diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue
index c26af16687..c006ebaff8 100644
--- a/packages/client/src/components/MkNoteSub.vue
+++ b/packages/client/src/components/MkNoteSub.vue
@@ -506,6 +506,10 @@ function noteClick(e) {
 						color: var(--fgHighlighted);
 					}
 
+					> i {
+						display: inline !important;
+					}
+
 					> .count {
 						display: inline;
 						margin: 0 0 0 8px;
diff --git a/packages/client/src/components/MkRenoteButton.vue b/packages/client/src/components/MkRenoteButton.vue
index 4a8e329d02..b0fda56de6 100644
--- a/packages/client/src/components/MkRenoteButton.vue
+++ b/packages/client/src/components/MkRenoteButton.vue
@@ -4,6 +4,7 @@
 		ref="buttonRef"
 		v-tooltip.noDelay.bottom="i18n.ts.renote"
 		class="button _button canRenote"
+		:class="{ renoted: hasRenotedBefore }"
 		@click="renote(false, $event)"
 	>
 		<i class="ph-repeat ph-bold ph-lg"></i>
@@ -64,17 +65,18 @@ useTooltip(buttonRef, async (showing) => {
 	);
 });
 
-const renote = async (viaKeyboard = false, ev?: MouseEvent) => {
+let hasRenotedBefore = $ref(false);
+os.api("notes/renotes", {
+	noteId: props.note.id,
+	userId: $i.id,
+	limit: 1,
+}).then((res) => {
+	hasRenotedBefore = res.length > 0;
+});
+
+const renote = (viaKeyboard = false, ev?: MouseEvent) => {
 	pleaseLogin();
 
-	const renotes = await os.api("notes/renotes", {
-		noteId: props.note.id,
-		userId: $i.id,
-		limit: 1,
-	});
-
-	const hasRenotedBefore = renotes.length > 0;
-
 	let buttonActions: Array<MenuItem> = [];
 
 	if (props.note.visibility === "public") {
@@ -88,6 +90,7 @@ const renote = async (viaKeyboard = false, ev?: MouseEvent) => {
 					renoteId: props.note.id,
 					visibility: "public",
 				});
+				hasRenotedBefore = true;
 				const el =
 					ev &&
 					((ev.currentTarget ?? ev.target) as
@@ -114,6 +117,7 @@ const renote = async (viaKeyboard = false, ev?: MouseEvent) => {
 					renoteId: props.note.id,
 					visibility: "home",
 				});
+				hasRenotedBefore = true;
 				const el =
 					ev &&
 					((ev.currentTarget ?? ev.target) as
@@ -141,6 +145,7 @@ const renote = async (viaKeyboard = false, ev?: MouseEvent) => {
 					visibility: "specified",
 					visibleUserIds: props.note.visibleUserIds,
 				});
+				hasRenotedBefore = true;
 				const el =
 					ev &&
 					((ev.currentTarget ?? ev.target) as
@@ -165,6 +170,7 @@ const renote = async (viaKeyboard = false, ev?: MouseEvent) => {
 					renoteId: props.note.id,
 					visibility: "followers",
 				});
+				hasRenotedBefore = true;
 				const el =
 					ev &&
 					((ev.currentTarget ?? ev.target) as
@@ -202,6 +208,7 @@ const renote = async (viaKeyboard = false, ev?: MouseEvent) => {
 								localOnly: true,
 						  }
 				);
+				hasRenotedBefore = true;
 				const el =
 					ev &&
 					((ev.currentTarget ?? ev.target) as
@@ -240,6 +247,7 @@ const renote = async (viaKeyboard = false, ev?: MouseEvent) => {
 				os.api("notes/unrenote", {
 					noteId: props.note.id,
 				});
+				hasRenotedBefore = false;
 			},
 		});
 	}
@@ -253,7 +261,8 @@ const renote = async (viaKeyboard = false, ev?: MouseEvent) => {
 		cursor: default;
 	}
 	&.renoted {
-		background: var(--accent);
+		color: var(--accent) !important;
+		opacity: 1 !important;
 	}
 }
 </style>