diff --git a/packages/next/src/next-devtools/dev-overlay/components/hydration-diff/diff-view.tsx b/packages/next/src/next-devtools/dev-overlay/components/hydration-diff/diff-view.tsx
index ad9b78c5f5bfd..cf2198c669e37 100644
--- a/packages/next/src/next-devtools/dev-overlay/components/hydration-diff/diff-view.tsx
+++ b/packages/next/src/next-devtools/dev-overlay/components/hydration-diff/diff-view.tsx
@@ -118,14 +118,24 @@ export function PseudoHtmlDiff({
       data-nextjs-container-errors-pseudo-html
       data-nextjs-container-errors-pseudo-html-collapse={isDiffCollapsed}
     >
-      <button
-        aria-expanded={!isDiffCollapsed}
-        aria-label="complete Component Stack"
-        data-nextjs-container-errors-pseudo-html-collapse-button
-        onClick={() => toggleCollapseHtml(!isDiffCollapsed)}
-      >
-        <CollapseIcon collapsed={isDiffCollapsed} />
-      </button>
+      <div data-nextjs-hydration-diff-header>
+        <button
+          aria-expanded={!isDiffCollapsed}
+          aria-label="complete Component Stack"
+          data-nextjs-container-errors-pseudo-html-collapse-button
+          onClick={() => toggleCollapseHtml(!isDiffCollapsed)}
+        >
+          <CollapseIcon collapsed={isDiffCollapsed} />
+        </button>
+        <div data-nextjs-hydration-diff-badge>
+          <span data-nextjs-hydration-diff-badge-item="client">
+            <span>+</span> Client
+          </span>
+          <span data-nextjs-hydration-diff-badge-item="server">
+            <span>-</span> Server
+          </span>
+        </div>
+      </div>
       <pre className="nextjs__container_errors__component-stack">
         <code>{htmlComponents}</code>
       </pre>
diff --git a/packages/next/src/next-devtools/dev-overlay/container/runtime-error/component-stack-pseudo-html.tsx b/packages/next/src/next-devtools/dev-overlay/container/runtime-error/component-stack-pseudo-html.tsx
index f7aab71b89dcf..8168fa35b9cc9 100644
--- a/packages/next/src/next-devtools/dev-overlay/container/runtime-error/component-stack-pseudo-html.tsx
+++ b/packages/next/src/next-devtools/dev-overlay/container/runtime-error/component-stack-pseudo-html.tsx
@@ -89,4 +89,29 @@ export const PSEUDO_HTML_DIFF_STYLES = `
   .error-overlay-hydration-error-diff-minus-icon {
     color: var(--color-red-900);
   }
+  [data-nextjs-hydration-diff-header] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 12px 0 0;
+  }
+  [data-nextjs-hydration-diff-badge] {
+    display: flex;
+    gap: 8px;
+    font-size: var(--size-12);
+  }
+  [data-nextjs-hydration-diff-badge-item] {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    color: var(--color-gray-900);
+  }
+  [data-nextjs-hydration-diff-badge-item='client'] span:first-child {
+    color: var(--color-green-900);
+    font-weight: bold;
+  }
+  [data-nextjs-hydration-diff-badge-item='server'] span:first-child {
+    color: var(--color-red-900);
+    font-weight: bold;
+  }
 `