diff --git a/CHANGELOG_CHERRYPICK.md b/CHANGELOG_CHERRYPICK.md
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/backend/migration/1696318192428-noteUpdatedAtHistory.js b/packages/backend/migration/1696318192428-noteUpdatedAtHistory.js
new file mode 100644
index 0000000000..70220f3058
--- /dev/null
+++ b/packages/backend/migration/1696318192428-noteUpdatedAtHistory.js
@@ -0,0 +1,17 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and other misskey, cherrypick contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+export class NoteUpdateAtHistory1696318192428 {
+	name = 'NoteUpdateAtHistory1696318192428'
+
+	async up(queryRunner) {
+		await queryRunner.query(`ALTER TABLE "note" ADD "updatedAtHistory" TIMESTAMP WITH TIME ZONE array`);
+	}
+
+	async down(queryRunner) {
+		await queryRunner.query(`ALTER TABLE "note" DROP "updatedAtHistory"`);
+	}
+
+}
diff --git a/packages/backend/src/core/entities/NoteEntityService.ts b/packages/backend/src/core/entities/NoteEntityService.ts
index 6438486ebd..a016c0a101 100644
--- a/packages/backend/src/core/entities/NoteEntityService.ts
+++ b/packages/backend/src/core/entities/NoteEntityService.ts
@@ -324,6 +324,7 @@ export class NoteEntityService implements OnModuleInit {
 			id: note.id,
 			createdAt: this.idService.parse(note.id).date.toISOString(),
 			updatedAt: note.updatedAt ? note.updatedAt.toISOString() : undefined,
+			updatedAtHistory: note.updatedAtHistory ? note.updatedAtHistory.map(x => x.toISOString()) : undefined,
 			noteEditHistory: note.noteEditHistory.length ? note.noteEditHistory : undefined,
 			userId: note.userId,
 			user: this.userEntityService.pack(note.user ?? note.userId, me),
diff --git a/packages/backend/src/models/Note.ts b/packages/backend/src/models/Note.ts
index 0cc12e38d1..03f410dab0 100644
--- a/packages/backend/src/models/Note.ts
+++ b/packages/backend/src/models/Note.ts
@@ -19,6 +19,12 @@ export class MiNote {
 	})
 	public updatedAt: Date | null;
 
+	@Column('timestamp with time zone', {
+		array: true,
+		default: null,
+	})
+	public updatedAtHistory: Date[] | null;
+
 	@Column('varchar', {
 		length: 3000,
 		array: true,
diff --git a/packages/backend/src/models/json-schema/note.ts b/packages/backend/src/models/json-schema/note.ts
index 0e36662f80..3e1d4500f5 100644
--- a/packages/backend/src/models/json-schema/note.ts
+++ b/packages/backend/src/models/json-schema/note.ts
@@ -22,6 +22,15 @@ export const packedNoteSchema = {
 			optional: true, nullable: true,
 			format: 'date-time',
 		},
+		updatedAtHistory: {
+			type: 'array',
+			optional: true, nullable: true,
+			items: {
+				type: 'string',
+				optional: false, nullable: false,
+				format: 'date-time',
+			},
+		},
 		noteEditHistory: {
 			type: 'array',
 			optional: true, nullable: false,
diff --git a/packages/cherrypick-js/src/entities.ts b/packages/cherrypick-js/src/entities.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue
index 626021395d..2cbc8ffcaa 100644
--- a/packages/frontend/src/components/MkNoteDetailed.vue
+++ b/packages/frontend/src/components/MkNoteDetailed.vue
@@ -77,7 +77,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 					v-if="appearNote.text"
 					:parsedNodes="parsed"
 					:text="appearNote.text"
-					:author="appearNote.user"
 					:nyaize="'respect'"
 					:emojiUrls="appearNote.emojis"
 					:enableEmojiMenu="true"
@@ -88,7 +87,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<MkLoading v-if="translating" mini/>
 					<div v-else-if="translation">
 						<b>{{ i18n.tsx.translatedFrom({ x: translation.sourceLang }) }}: </b>
-						<Mfm :text="translation.text" :author="appearNote.user" :nyaize="'respect'" :emojiUrls="appearNote.emojis"/>
+						<Mfm :text="translation.text" :nyaize="'respect'" :emojiUrls="appearNote.emojis"/>
 					</div>
 				</div>
 				<div v-if="appearNote.files && appearNote.files.length > 0">
@@ -143,12 +142,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</footer>
 	</article>
 	<div :class="$style.tabs">
-
 		<button class="_button" :class="[$style.tab, { [$style.tabActive]: tab === 'replies' },{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' && tab === 'replies'}]" @click="tab = 'replies'"><i class="ti ti-arrow-back-up"></i> {{ i18n.ts.replies }}</button>
 		<button class="_button" :class="[$style.tab, { [$style.tabActive]: tab === 'renotes'},{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' && tab === 'renotes'}]" @click="tab = 'renotes'"><i class="ti ti-repeat"></i> {{ i18n.ts.renotes }}</button>
 		<button class="_button" :class="[$style.tab, { [$style.tabActive]: tab === 'reactions'},{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' && tab === 'reactions'}]" @click="tab = 'reactions'"><i class="ti ti-icons"></i> {{ i18n.ts.reactions }}</button>
-        <button class="_button" :class="[$style.tab, { [$style.tabActive]: tab === 'history' },{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light']" @click="tab = 'history'"><i class="ti ti-pencil"></i> {{ i18n.ts.edited }}</button>
-    </div>
+		<button class="_button" :class="[$style.tab, { [$style.tabActive]: tab === 'history' },{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light'}]" @click="tab = 'history'"><i class="ti ti-pencil"></i> {{ i18n.ts.edited }}</button>
+	</div>
 	<div>
 		<div v-if="tab === 'replies'">
 			<div v-if="!repliesLoaded" style="padding: 16px">
@@ -186,26 +184,39 @@ 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.reverse()" :key="text">
-					<MkNotePreview :class="$style.historyNote" :text="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"/>
+							<MkTime :class="$style.updatedAt" :time="appearNote.updatedAtHistory![index]"/>
+						</div>
+						<div>
+							<div>
+								<Mfm :text="text.trim()" :author="appearNote.user" :i="$i"/>
+							</div>
+							<CodeDiff
+								:oldString="appearNote.noteEditHistory[index - 1] || ''"
+								:newString="text"
+								:trim="true"
+								:hideHeader="true"
+								diffStyle="char"
+							/>
+						</div>
+					</div>
+				</div>
+				<div v-if="appearNote.noteEditHistory == null" class="_fullinfo">
+					<img :src="infoImageUrl" class="_ghost"/>
+					<div>{{ i18n.ts.nothing }}</div>
 				</div>
 			</div>
 		</div>
 	</div>
 </div>
-<div v-else class="_panel" :class="$style.muted" @click="muted = false">
-	<I18n :src="i18n.ts.userSaysSomething" tag="small">
-		<template #name>
-			<MkA v-user-preview="appearNote.userId" :to="userPage(appearNote.user)">
-				<MkUserName :user="appearNote.user"/>
-			</MkA>
-		</template>
-	</I18n>
-</div>
 </template>
 
 <script lang="ts" setup>
-import {computed, inject, onMounted, provide, ref, shallowRef, watch} from 'vue';
+import { computed, inject, onMounted, provide, ref, shallowRef, watch } from 'vue';
 import * as mfm from 'mfm-js';
 import * as Misskey from 'misskey-js';
 import MkNoteSub from '@/components/MkNoteSub.vue';
@@ -241,6 +252,13 @@ import MkUserCardMini from '@/components/MkUserCardMini.vue';
 import MkPagination, { type Paging } from '@/components/MkPagination.vue';
 import MkReactionIcon from '@/components/MkReactionIcon.vue';
 import MkButton from '@/components/MkButton.vue';
+import { miLocalStorage } from '@/local-storage.js';
+import { infoImageUrl, instance } from '@/instance.js';
+import MkPostForm from '@/components/MkPostFormSimple.vue';
+import { deviceKind } from '@/scripts/device-kind.js';
+
+const MOBILE_THRESHOLD = 500;
+const isMobile = ref(deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD);
 
 const props = defineProps<{
 	note: Misskey.entities.Note;
@@ -250,38 +268,37 @@ const inChannel = inject('inChannel', null);
 
 const note = ref(deepClone(props.note));
 
-
 let gaming = ref('');
 
 const gamingMode = computed(defaultStore.makeGetterSetter('gamingMode'));
 const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
 if (darkMode.value && gamingMode.value == true) {
-  gaming.value = 'dark';
+	gaming.value = 'dark';
 } else if (!darkMode.value && gamingMode.value == true) {
-  gaming.value = 'light';
+	gaming.value = 'light';
 } else {
-  gaming.value = '';
+	gaming.value = '';
 }
 
 watch(darkMode, () => {
-  if (darkMode.value && gamingMode.value == true) {
-    gaming.value = 'dark';
-  } else if (!darkMode.value && gamingMode.value == true) {
-    gaming.value = 'light';
-  } else {
-    gaming.value = '';
-  }
-})
+	if (darkMode.value && gamingMode.value == true) {
+		gaming.value = 'dark';
+	} else if (!darkMode.value && gamingMode.value == true) {
+		gaming.value = 'light';
+	} else {
+		gaming.value = '';
+	}
+});
 
 watch(gamingMode, () => {
-  if (darkMode.value && gamingMode.value == true) {
-    gaming.value = 'dark';
-  } else if (!darkMode.value && gamingMode.value == true) {
-    gaming.value = 'light';
-  } else {
-    gaming.value = '';
-  }
-})
+	if (darkMode.value && gamingMode.value == true) {
+		gaming.value = 'dark';
+	} else if (!darkMode.value && gamingMode.value == true) {
+		gaming.value = 'light';
+	} else {
+		gaming.value = '';
+	}
+});
 // plugin
 if (noteViewInterruptors.length > 0) {
 	onMounted(async () => {
@@ -831,12 +848,32 @@ function loadConversation() {
 		width: 50px;
 		height: 50px;
 	}
+  .noteFooterButton {
+    &:not(:last-child) {
+      margin-right: 12px;
+    }
+  }
+}
+.historyRoot {
+	display: flex;
+	margin: 0;
+	padding: 10px;
+	overflow: clip;
+	font-size: 0.95em;
+}
 
-	.noteFooterButton {
-		&:not(:last-child) {
-			margin-right: 12px;
-		}
-	}
+.historyMain {
+	flex: 1;
+	min-width: 0;
+}
+
+.historyHeader {
+	display: flex;
+	margin-bottom: 2px;
+	font-weight: bold;
+	width: 100%;
+	overflow: clip;
+	text-overflow: ellipsis;
 }
 
 .historyNote {
@@ -845,6 +882,12 @@ function loadConversation() {
 	overflow: auto;
 }
 
+.updatedAt {
+	flex-shrink: 0;
+	margin-left: auto;
+	font-size: 0.9em;
+}
+
 .muted {
 	padding: 8px;
 	text-align: center;