diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue
index b1f3720d59..89bc226d26 100644
--- a/packages/frontend/src/components/MkNoteDetailed.vue
+++ b/packages/frontend/src/components/MkNoteDetailed.vue
@@ -176,16 +176,20 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</div>
 		<div v-else-if="tab === 'history'" :class="$style.tab_history">
 			<div style="display: grid;">
-				<div v-for="text in appearNote.noteEditHistory" :class="$style.historyRoot" :key="text">
+				<div v-for="(text, index) in appearNote.noteEditHistory" :key="text" :class="$style.historyRoot">
 					<MkAvatar :class="$style.avatar" :user="appearNote.user" link preview/>
 					<div :class="$style.historyMain">
 						<div :class="$style.historyHeader">
 							<MkUserName :user="appearNote.user" :nowrap="true"/>
 						</div>
 						<div>
-							<div>
-								<Mfm :text="text.trim()" :author="appearNote.user" :i="$i"/>
-							</div>
+							<CodeDiff
+								:old-string="appearNote.noteEditHistory[index - 1] || appearNote.noteEditHistory[0]"
+								:new-string="text"
+								:trim="true"
+								:hideHeader="true"
+								diffStyle="char"
+							/>
 						</div>
 					</div>
 				</div>
@@ -205,7 +209,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, onMounted, ref, shallowRef } from 'vue';
+import { computed, inject, onMounted, onUnmounted, ref, shallowRef } from 'vue';
 import * as mfm from 'mfm-js';
 import * as Misskey from 'misskey-js';
 import MkNoteSub from '@/components/MkNoteSub.vue';
@@ -240,6 +244,7 @@ import MkUserCardMini from '@/components/MkUserCardMini.vue';
 import MkPagination, { Paging } from '@/components/MkPagination.vue';
 import MkReactionIcon from '@/components/MkReactionIcon.vue';
 import MkButton from '@/components/MkButton.vue';
+import { CodeDiff } from 'v-code-diff';
 
 const props = defineProps<{
 	note: Misskey.entities.Note;