diff --git a/apps/client/src/features/page-history/components/history-diff.module.css b/apps/client/src/features/page-history/components/history-diff.module.css
index 6b5af8bc..dc9706d4 100644
--- a/apps/client/src/features/page-history/components/history-diff.module.css
+++ b/apps/client/src/features/page-history/components/history-diff.module.css
@@ -40,11 +40,9 @@
 }
 
 :global(.history-diff-node-deleted) {
-  display: inline-block;
-  background: light-dark(var(--mantine-color-red-0), rgba(255, 0, 0, 0.1));
-  border: rem(1px) dashed light-dark(var(--mantine-color-red-4), var(--mantine-color-red-6));
+  display: block;
+  opacity: 0.5;
+  outline: rem(2px) dashed light-dark(var(--mantine-color-red-4), var(--mantine-color-red-6));
+  outline-offset: rem(2px);
   border-radius: rem(4px);
-  padding: rem(4px) rem(8px);
-  color: light-dark(var(--mantine-color-red-7), var(--mantine-color-red-4));
-  font-size: rem(12px);
 }
diff --git a/apps/client/src/features/page-history/components/history-editor.tsx b/apps/client/src/features/page-history/components/history-editor.tsx
index 428b727c..b9db1a6b 100644
--- a/apps/client/src/features/page-history/components/history-editor.tsx
+++ b/apps/client/src/features/page-history/components/history-editor.tsx
@@ -7,7 +7,7 @@ import { Decoration, DecorationSet } from "@tiptap/pm/view";
 import classes from "./history-diff.module.css";
 import historyClasses from "./history.module.css";
 import { recreateTransform } from "@docmost/editor-ext";
-import { Node } from "@tiptap/pm/model";
+import { DOMSerializer, Node } from "@tiptap/pm/model";
 import { ChangeSet, simplifyChanges } from "prosemirror-changeset";
 
 export interface HistoryEditorProps {
@@ -126,10 +126,12 @@ export function HistoryEditor({
             if (foundDeletedNode) {
               decorations.push(
                 Decoration.widget(change.fromB, () => {
-                  const span = document.createElement("span");
-                  span.className = "history-diff-node-deleted";
-                  span.textContent = `[${foundDeletedNode!.node.type.name} removed]`;
-                  return span;
+                  const wrapper = document.createElement("div");
+                  wrapper.className = "history-diff-node-deleted";
+                  const serializer = DOMSerializer.fromSchema(schema);
+                  const dom = serializer.serializeNode(foundDeletedNode!.node);
+                  wrapper.appendChild(dom);
+                  return wrapper;
                 }),
               );
             } else {