diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/call-stack/call-stack.stories.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/call-stack/call-stack.stories.tsx
new file mode 100644
index 0000000000000..09afec5f9c3b3
--- /dev/null
+++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/call-stack/call-stack.stories.tsx
@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { CallStack } from './call-stack'
+import { withShadowPortal } from '../../../storybook/with-shadow-portal'
+
+const meta: Meta<typeof CallStack> = {
+  title: 'CallStack',
+  component: CallStack,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  decorators: [withShadowPortal],
+}
+
+export default meta
+type Story = StoryObj<typeof CallStack>
+
+const frame = {
+  originalStackFrame: {
+    file: './app/page.tsx',
+    methodName: 'MyComponent',
+    arguments: [],
+    lineNumber: 10,
+    column: 5,
+    ignored: false,
+  },
+  sourceStackFrame: {
+    file: './app/page.tsx',
+    methodName: 'MyComponent',
+    arguments: [],
+    lineNumber: 10,
+    column: 5,
+  },
+  originalCodeFrame: 'export default function MyComponent() {',
+  error: false,
+  reason: null,
+  external: false,
+  ignored: false,
+}
+
+const ignoredFrame = {
+  ...frame,
+  ignored: true,
+}
+
+export const SingleFrame: Story = {
+  args: {
+    frames: [frame],
+  },
+}
+
+export const MultipleFrames: Story = {
+  args: {
+    frames: [
+      frame,
+      {
+        ...frame,
+        originalStackFrame: {
+          ...frame.originalStackFrame,
+          methodName: 'ParentComponent',
+          lineNumber: 5,
+        },
+      },
+      {
+        ...frame,
+        originalStackFrame: {
+          ...frame.originalStackFrame,
+          methodName: 'GrandparentComponent',
+          lineNumber: 1,
+        },
+      },
+      ...Array(5).fill(ignoredFrame),
+    ],
+  },
+}
diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/call-stack/call-stack.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/call-stack/call-stack.tsx
new file mode 100644
index 0000000000000..bc383762cfa15
--- /dev/null
+++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/call-stack/call-stack.tsx
@@ -0,0 +1,141 @@
+import type { OriginalStackFrame } from '../../../helpers/stack-frame'
+import { useMemo, useState } from 'react'
+import { CallStackFrame } from '../../call-stack-frame/call-stack-frame'
+import { noop as css } from '../../../helpers/noop-template'
+
+type CallStackProps = {
+  frames: OriginalStackFrame[]
+}
+
+export function CallStack({ frames }: CallStackProps) {
+  const [isIgnoreListOpen, setIsIgnoreListOpen] = useState(false)
+
+  const { filteredFrames, ignoreListLength } = useMemo(() => {
+    const filtered = []
+    let ignoredLength = 0
+
+    for (const frame of frames) {
+      if (isIgnoreListOpen || !frame.ignored) {
+        filtered.push(frame)
+      }
+      if (frame.ignored) {
+        ignoredLength++
+      }
+    }
+
+    return {
+      filteredFrames: filtered,
+      ignoreListLength: ignoredLength,
+    }
+  }, [frames, isIgnoreListOpen])
+
+  return (
+    <div className="error-overlay-call-stack-container">
+      <div className="error-overlay-call-stack-header">
+        <p className="error-overlay-call-stack-title">
+          Call Stack{' '}
+          <span className="error-overlay-call-stack-count">
+            {frames.length}
+          </span>
+        </p>
+        {ignoreListLength > 0 && (
+          <button
+            data-expand-ignore-button={isIgnoreListOpen}
+            className="error-overlay-call-stack-ignored-list-toggle-button"
+            onClick={() => setIsIgnoreListOpen(!isIgnoreListOpen)}
+          >
+            {`${isIgnoreListOpen ? 'Hide' : 'Show'} ${ignoreListLength} Ignore-listed Frames`}
+            <ChevronUpDown />
+          </button>
+        )}
+      </div>
+      {filteredFrames.map((frame, frameIndex) => (
+        <CallStackFrame
+          key={`call-stack-leading-${frameIndex}`}
+          frame={frame}
+        />
+      ))}
+    </div>
+  )
+}
+
+function ChevronUpDown() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8.70722 2.39641C8.3167 2.00588 7.68353 2.00588 7.29301 2.39641L4.46978 5.21963L3.93945 5.74996L5.00011 6.81062L5.53044 6.28029L8.00011 3.81062L10.4698 6.28029L11.0001 6.81062L12.0608 5.74996L11.5304 5.21963L8.70722 2.39641ZM5.53044 9.71963L5.00011 9.1893L3.93945 10.25L4.46978 10.7803L7.29301 13.6035C7.68353 13.994 8.3167 13.994 8.70722 13.6035L11.5304 10.7803L12.0608 10.25L11.0001 9.1893L10.4698 9.71963L8.00011 12.1893L5.53044 9.71963Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
+
+export const CALL_STACK_STYLES = css`
+  .error-overlay-call-stack-container {
+    border-top: 1px solid var(--color-gray-400);
+    padding: var(--size-4) var(--size-3);
+  }
+
+  .error-overlay-call-stack-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    margin-bottom: var(--size-3);
+
+    padding: 0 var(--size-2);
+  }
+
+  .error-overlay-call-stack-title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--size-2);
+
+    margin: 0;
+
+    color: var(--color-gray-1000);
+    font-size: var(--size-font);
+    font-weight: 500;
+    line-height: var(--size-5);
+  }
+
+  .error-overlay-call-stack-count {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    width: var(--size-5);
+    height: var(--size-5);
+    padding: var(--size-0_5) var(--size-1_5);
+    gap: var(--size-1);
+
+    color: var(--color-gray-1000);
+    text-align: center;
+    font-size: var(--size-font-11);
+    font-weight: 500;
+    line-height: var(--size-4);
+
+    border-radius: var(--rounded-full);
+    background: var(--color-gray-300);
+  }
+
+  .error-overlay-call-stack-ignored-list-toggle-button {
+    all: unset;
+    color: var(--color-gray-900);
+    font-size: var(--size-font-small);
+    line-height: var(--size-5);
+
+    &:focus {
+      outline: none;
+    }
+  }
+`
diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-layout/error-overlay-layout.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-layout/error-overlay-layout.tsx
index e6766bfd7ac96..a36df4b6b12b5 100644
--- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-layout/error-overlay-layout.tsx
+++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-layout/error-overlay-layout.tsx
@@ -32,6 +32,7 @@ import {
   DIALOG_HEADER_STYLES,
 } from '../dialog/header'
 import { ErrorOverlayDialogBody, DIALOG_BODY_STYLES } from '../dialog/body'
+import { CALL_STACK_STYLES } from '../call-stack/call-stack'
 
 type ErrorOverlayLayoutProps = {
   errorMessage: ErrorMessageType
@@ -118,4 +119,5 @@ export const styles = css`
   ${errorTypeLabelStyles}
   ${errorMessageStyles}
   ${toolbarStyles}
+  ${CALL_STACK_STYLES}
 `
diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/call-stack-frame/call-stack-frame.stories.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/call-stack-frame/call-stack-frame.stories.tsx
new file mode 100644
index 0000000000000..30bb6887ca965
--- /dev/null
+++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/call-stack-frame/call-stack-frame.stories.tsx
@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { CallStackFrame } from './call-stack-frame'
+import { withShadowPortal } from '../../storybook/with-shadow-portal'
+
+const meta: Meta<typeof CallStackFrame> = {
+  title: 'CallStackFrame',
+  component: CallStackFrame,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  decorators: [withShadowPortal],
+}
+
+export default meta
+type Story = StoryObj<typeof CallStackFrame>
+
+const frame = {
+  originalStackFrame: {
+    file: './app/page.tsx',
+    methodName: 'MyComponent',
+    arguments: [],
+    lineNumber: 10,
+    column: 5,
+    ignored: false,
+  },
+  sourceStackFrame: {
+    file: './app/page.tsx',
+    methodName: 'MyComponent',
+    arguments: [],
+    lineNumber: 10,
+    column: 5,
+  },
+  error: false,
+  reason: null,
+  external: false,
+  ignored: false,
+}
+
+export const HasSource: Story = {
+  args: {
+    frame: {
+      ...frame,
+      originalCodeFrame: 'export default function MyComponent() {',
+    },
+  },
+}
+
+export const NoSource: Story = {
+  args: {
+    frame,
+  },
+}
diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/call-stack-frame/call-stack-frame.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/call-stack-frame/call-stack-frame.tsx
new file mode 100644
index 0000000000000..2a8cfe64a1084
--- /dev/null
+++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/call-stack-frame/call-stack-frame.tsx
@@ -0,0 +1,140 @@
+import type { StackFrame } from 'next/dist/compiled/stacktrace-parser'
+import type { OriginalStackFrame } from '../../helpers/stack-frame'
+
+import { HotlinkedText } from '../hot-linked-text'
+import { getFrameSource } from '../../helpers/stack-frame'
+import { useOpenInEditor } from '../../helpers/use-open-in-editor'
+import { noop as css } from '../../helpers/noop-template'
+
+export const CallStackFrame: React.FC<{
+  frame: OriginalStackFrame
+}> = function CallStackFrame({ frame }) {
+  // TODO: ability to expand resolved frames
+  // TODO: render error or external indicator
+
+  const f: StackFrame = frame.originalStackFrame ?? frame.sourceStackFrame
+  const hasSource = Boolean(frame.originalCodeFrame)
+  const open = useOpenInEditor(
+    hasSource
+      ? {
+          file: f.file,
+          lineNumber: f.lineNumber,
+          column: f.column,
+        }
+      : undefined
+  )
+
+  // Format method to strip out the webpack layer prefix.
+  // e.g. (app-pages-browser)/./app/page.tsx -> ./app/page.tsx
+  const formattedMethod = f.methodName.replace(/^\([\w-]+\)\//, '')
+
+  // Formatted file source could be empty. e.g. <anonymous> will be formatted to empty string,
+  // we'll skip rendering the frame in this case.
+  const fileSource = getFrameSource(f)
+  if (!fileSource) {
+    return null
+  }
+
+  return (
+    <div
+      data-nextjs-call-stack-frame
+      data-nextjs-call-stack-frame-ignored={!hasSource}
+      onClick={hasSource ? open : undefined}
+      role="button"
+      tabIndex={0}
+      aria-label={hasSource ? 'Click to open in your editor' : undefined}
+      title={hasSource ? 'Click to open in your editor' : undefined}
+    >
+      <span
+        data-nextjs-frame-expanded={!frame.ignored}
+        className="call-stack-frame-method-name"
+      >
+        <HotlinkedText text={formattedMethod} />
+        {hasSource && <External />}
+      </span>
+      <span
+        className="call-stack-frame-file-source"
+        data-has-source={hasSource}
+      >
+        {fileSource}
+      </span>
+    </div>
+  )
+}
+
+function External() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M11.5 9.75V11.25C11.5 11.3881 11.3881 11.5 11.25 11.5H4.75C4.61193 11.5 4.5 11.3881 4.5 11.25L4.5 4.75C4.5 4.61193 4.61193 4.5 4.75 4.5H6.25H7V3H6.25H4.75C3.7835 3 3 3.7835 3 4.75V11.25C3 12.2165 3.7835 13 4.75 13H11.25C12.2165 13 13 12.2165 13 11.25V9.75V9H11.5V9.75ZM8.5 3H9.25H12.2495C12.6637 3 12.9995 3.33579 12.9995 3.75V6.75V7.5H11.4995V6.75V5.56066L8.53033 8.52978L8 9.06011L6.93934 7.99945L7.46967 7.46912L10.4388 4.5H9.25H8.5V3Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
+
+export const CALL_STACK_FRAME_STYLES = css`
+  [data-nextjs-call-stack-frame-ignored] {
+    padding: var(--size-1_5) var(--size-2);
+    margin-bottom: var(--size-1);
+
+    border-radius: var(--rounded-lg);
+  }
+
+  [data-nextjs-call-stack-frame] {
+    user-select: text;
+    display: block;
+    box-sizing: border-box;
+    width: 100%;
+
+    user-select: text;
+    -webkit-user-select: text;
+    -moz-user-select: text;
+    -ms-user-select: text;
+
+    padding: var(--size-1_5) var(--size-2);
+    margin-bottom: var(--size-1);
+
+    border-radius: var(--rounded-lg);
+
+    &:not(:disabled):hover {
+      background: var(--color-gray-alpha-100);
+      cursor: pointer;
+    }
+
+    &:not(:disabled):active {
+      background: var(--color-gray-alpha-200);
+    }
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  .call-stack-frame-method-name {
+    display: flex;
+    align-items: center;
+    gap: var(--size-1);
+
+    margin-bottom: var(--size-1);
+
+    color: var(--color-gray-1000);
+    font-size: var(--size-font-small);
+    font-weight: 500;
+    line-height: var(--size-5);
+  }
+
+  .call-stack-frame-file-source {
+    color: var(--color-gray-900);
+    font-size: var(--size-font-small);
+    line-height: var(--size-5);
+  }
+`
diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/copy-button/index.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/copy-button/index.tsx
index afbb284927f8e..5006128cdc870 100644
--- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/copy-button/index.tsx
+++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/copy-button/index.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { noop as css } from '../../helpers/noop-template'
 
 function useCopyLegacy(content: string) {
   type CopyState =
@@ -230,3 +231,36 @@ function CopySuccessIcon() {
     </svg>
   )
 }
+
+// TODO(jiwon): Is not used anymore, should we decouple the styles?
+export const COPY_BUTTON_STYLES = css`
+  [data-nextjs-data-runtime-error-copy-button],
+  [data-nextjs-data-runtime-error-copy-button]:focus:not(:focus-visible) {
+    position: relative;
+    margin-left: var(--size-gap);
+    padding: 0;
+    border: none;
+    background: none;
+    outline: none;
+  }
+  [data-nextjs-data-runtime-error-copy-button] > svg {
+    vertical-align: middle;
+  }
+  .nextjs-data-runtime-error-copy-button {
+    color: inherit;
+  }
+  .nextjs-data-runtime-error-copy-button--initial:hover {
+    cursor: pointer;
+  }
+  .nextjs-data-runtime-error-copy-button[aria-disabled='true'] {
+    opacity: 0.3;
+    cursor: not-allowed;
+  }
+  .nextjs-data-runtime-error-copy-button--error,
+  .nextjs-data-runtime-error-copy-button--error:hover {
+    color: var(--color-ansi-red);
+  }
+  .nextjs-data-runtime-error-copy-button--success {
+    color: var(--color-ansi-green);
+  }
+`
diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/RuntimeError/CallStackFrame.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/RuntimeError/CallStackFrame.tsx
deleted file mode 100644
index 72d3442836ad4..0000000000000
--- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/RuntimeError/CallStackFrame.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import type { StackFrame } from 'next/dist/compiled/stacktrace-parser'
-import {
-  getFrameSource,
-  type OriginalStackFrame,
-} from '../../helpers/stack-frame'
-import { useOpenInEditor } from '../../helpers/use-open-in-editor'
-import { HotlinkedText } from '../../components/hot-linked-text'
-
-export const CallStackFrame: React.FC<{
-  frame: OriginalStackFrame
-}> = function CallStackFrame({ frame }) {
-  // TODO: ability to expand resolved frames
-  // TODO: render error or external indicator
-
-  const f: StackFrame = frame.originalStackFrame ?? frame.sourceStackFrame
-  const hasSource = Boolean(frame.originalCodeFrame)
-  const open = useOpenInEditor(
-    hasSource
-      ? {
-          file: f.file,
-          lineNumber: f.lineNumber,
-          column: f.column,
-        }
-      : undefined
-  )
-
-  // Format method to strip out the webpack layer prefix.
-  // e.g. (app-pages-browser)/./app/page.tsx -> ./app/page.tsx
-  const formattedMethod = f.methodName.replace(/^\([\w-]+\)\//, '')
-
-  // Formatted file source could be empty. e.g. <anonymous> will be formatted to empty string,
-  // we'll skip rendering the frame in this case.
-  const fileSource = getFrameSource(f)
-  if (!fileSource) {
-    return null
-  }
-
-  return (
-    <div data-nextjs-call-stack-frame>
-      <h3 data-nextjs-frame-expanded={!frame.ignored}>
-        <HotlinkedText text={formattedMethod} />
-      </h3>
-      <div
-        data-has-source={hasSource ? 'true' : undefined}
-        data-no-source={hasSource ? undefined : 'true'}
-        tabIndex={hasSource ? 10 : undefined}
-        role={hasSource ? 'link' : undefined}
-        onClick={open}
-        title={hasSource ? 'Click to open in your editor' : undefined}
-      >
-        <span>{fileSource}</span>
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        >
-          <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
-          <polyline points="15 3 21 3 21 9"></polyline>
-          <line x1="10" y1="14" x2="21" y2="3"></line>
-        </svg>
-      </div>
-    </div>
-  )
-}
diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/RuntimeError/ComponentStackFrameRow.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/RuntimeError/ComponentStackFrameRow.tsx
deleted file mode 100644
index 774d39d1c1d0d..0000000000000
--- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/RuntimeError/ComponentStackFrameRow.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import React from 'react'
-import type { ComponentStackFrame } from '../../helpers/parse-component-stack'
-import { useOpenInEditor } from '../../helpers/use-open-in-editor'
-import { HotlinkedText } from '../../components/hot-linked-text'
-
-function EditorLink({
-  children,
-  componentStackFrame: { file, column, lineNumber },
-}: {
-  children: React.ReactNode
-  componentStackFrame: ComponentStackFrame
-}) {
-  const open = useOpenInEditor({
-    file,
-    column,
-    lineNumber,
-  })
-
-  return (
-    <div
-      tabIndex={10} // match CallStackFrame
-      role={'link'}
-      onClick={open}
-      title={'Click to open in your editor'}
-    >
-      {children}
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      >
-        <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
-        <polyline points="15 3 21 3 21 9"></polyline>
-        <line x1="10" y1="14" x2="21" y2="3"></line>
-      </svg>
-    </div>
-  )
-}
-
-function formatLineNumber(lineNumber: number, column: number | undefined) {
-  if (!column) {
-    return lineNumber
-  }
-
-  return `${lineNumber}:${column}`
-}
-
-function LocationLine({
-  componentStackFrame,
-}: {
-  componentStackFrame: ComponentStackFrame
-}) {
-  const { file, lineNumber, column } = componentStackFrame
-  return (
-    <>
-      {file} {lineNumber ? `(${formatLineNumber(lineNumber, column)})` : ''}
-    </>
-  )
-}
-
-function SourceLocation({
-  componentStackFrame,
-}: {
-  componentStackFrame: ComponentStackFrame
-}) {
-  const { file, canOpenInEditor } = componentStackFrame
-
-  if (file && canOpenInEditor) {
-    return (
-      <EditorLink componentStackFrame={componentStackFrame}>
-        <span>
-          <LocationLine componentStackFrame={componentStackFrame} />
-        </span>
-      </EditorLink>
-    )
-  }
-
-  return (
-    <div>
-      <LocationLine componentStackFrame={componentStackFrame} />
-    </div>
-  )
-}
-
-export function ComponentStackFrameRow({
-  componentStackFrame,
-}: {
-  componentStackFrame: ComponentStackFrame
-}) {
-  const { component } = componentStackFrame
-
-  return (
-    <div data-nextjs-component-stack-frame>
-      <h3>
-        <HotlinkedText text={component} />
-      </h3>
-      <SourceLocation componentStackFrame={componentStackFrame} />
-    </div>
-  )
-}
diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/RuntimeError/component-stack-pseudo-html.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/RuntimeError/component-stack-pseudo-html.tsx
index 5f893ae26e2d8..31708915277b5 100644
--- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/RuntimeError/component-stack-pseudo-html.tsx
+++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/RuntimeError/component-stack-pseudo-html.tsx
@@ -1,6 +1,7 @@
 import { useMemo, Fragment, useState } from 'react'
 import type { ComponentStackFrame } from '../../helpers/parse-component-stack'
 import { CollapseIcon } from '../../icons/CollapseIcon'
+import { noop as css } from '../../helpers/noop-template'
 
 function getAdjacentProps(isAdj: boolean) {
   return { 'data-nextjs-container-errors-pseudo-html--tag-adjacent': isAdj }
@@ -307,3 +308,36 @@ export function PseudoHtmlDiff({
     </div>
   )
 }
+
+export const PSEUDO_HTML_DIFF_STYLES = css`
+  [data-nextjs-container-errors-pseudo-html] {
+    position: relative;
+  }
+  [data-nextjs-container-errors-pseudo-html-collapse] {
+    position: absolute;
+    left: 10px;
+    top: 10px;
+    color: inherit;
+    background: none;
+    border: none;
+    padding: 0;
+  }
+  [data-nextjs-container-errors-pseudo-html--diff='add'] {
+    color: var(--color-ansi-green);
+  }
+  [data-nextjs-container-errors-pseudo-html--diff='remove'] {
+    color: var(--color-ansi-red);
+  }
+  [data-nextjs-container-errors-pseudo-html--tag-error] {
+    color: var(--color-ansi-red);
+    font-weight: bold;
+  }
+  /* hide but text are still accessible in DOM */
+  [data-nextjs-container-errors-pseudo-html--hint] {
+    display: inline-block;
+    font-size: 0;
+  }
+  [data-nextjs-container-errors-pseudo-html--tag-adjacent='false'] {
+    color: var(--color-accents-1);
+  }
+`
diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/RuntimeError/index.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/RuntimeError/index.tsx
index a8c588495d7fb..47abcbd25758f 100644
--- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/RuntimeError/index.tsx
+++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/RuntimeError/index.tsx
@@ -1,24 +1,16 @@
-import * as React from 'react'
-import { CodeFrame } from '../../components/CodeFrame'
 import type { ReadyRuntimeError } from '../../helpers/get-error-by-type'
+
+import { useMemo } from 'react'
+import { CodeFrame } from '../../components/CodeFrame'
+import { CallStack } from '../../components/Errors/call-stack/call-stack'
 import { noop as css } from '../../helpers/noop-template'
-import { CallStackFrame } from './CallStackFrame'
+import { PSEUDO_HTML_DIFF_STYLES } from './component-stack-pseudo-html'
 
 export type RuntimeErrorProps = { error: ReadyRuntimeError }
 
 export function RuntimeError({ error }: RuntimeErrorProps) {
-  const [isIgnoredExpanded, setIsIgnoredExpanded] = React.useState(false)
-  const {
-    firstFrame,
-    allLeadingFrames,
-    trailingCallStackFrames,
-    displayedFramesCount,
-  } = React.useMemo(() => {
-    const filteredFrames = error.frames.filter((frame) =>
-      isIgnoredExpanded ? true : !frame.ignored
-    )
-
-    const firstFirstPartyFrameIndex = filteredFrames.findIndex(
+  const { firstFrame } = useMemo(() => {
+    const firstFirstPartyFrameIndex = error.frames.findIndex(
       (entry) =>
         !entry.ignored &&
         Boolean(entry.originalCodeFrame) &&
@@ -26,188 +18,24 @@ export function RuntimeError({ error }: RuntimeErrorProps) {
     )
 
     return {
-      displayedFramesCount: filteredFrames.length,
-      firstFrame: filteredFrames[firstFirstPartyFrameIndex] ?? null,
-      allLeadingFrames:
-        firstFirstPartyFrameIndex < 0
-          ? []
-          : filteredFrames.slice(0, firstFirstPartyFrameIndex),
-      trailingCallStackFrames: filteredFrames.slice(
-        firstFirstPartyFrameIndex + 1
-      ),
+      firstFrame: error.frames[firstFirstPartyFrameIndex] ?? null,
     }
-  }, [error.frames, isIgnoredExpanded])
+  }, [error.frames])
 
   return (
-    <React.Fragment>
-      {firstFrame ? (
-        <>
-          <h2>Source</h2>
-          {allLeadingFrames.map((frame, frameIndex) => (
-            <CallStackFrame
-              key={`call-stack-leading-${frameIndex}`}
-              frame={frame}
-            />
-          ))}
-          <CodeFrame
-            stackFrame={firstFrame.originalStackFrame!}
-            codeFrame={firstFrame.originalCodeFrame!}
-          />
-        </>
-      ) : undefined}
-
-      {trailingCallStackFrames.map((frame, frameIndex) => (
-        <CallStackFrame
-          key={`call-stack-leading-${frameIndex}`}
-          frame={frame}
+    <>
+      {firstFrame && (
+        <CodeFrame
+          stackFrame={firstFrame.originalStackFrame!}
+          codeFrame={firstFrame.originalCodeFrame!}
         />
-      ))}
-      {
-        // if the default displayed ignored frames count is equal equal to the total frames count, hide the button
-        displayedFramesCount === error.frames.length &&
-        !isIgnoredExpanded ? null : (
-          <button
-            data-expand-ignore-button={isIgnoredExpanded}
-            onClick={() => setIsIgnoredExpanded(!isIgnoredExpanded)}
-          >
-            {`${isIgnoredExpanded ? 'Hide' : 'Show'} ignored frames`}
-          </button>
-        )
-      }
-    </React.Fragment>
+      )}
+
+      {error.frames.length > 0 && <CallStack frames={error.frames} />}
+    </>
   )
 }
 
 export const styles = css`
-  [data-nextjs-call-stack-frame] {
-    padding: var(--size-4);
-  }
-
-  [data-nextjs-call-stack-frame]:not(:last-child),
-  [data-nextjs-component-stack-frame]:not(:last-child) {
-    margin-bottom: var(--size-gap-double);
-  }
-
-  [data-expand-ignore-button]:focus:not(:focus-visible),
-  [data-expand-ignore-button] {
-    background: none;
-    border: none;
-    color: var(--color-font);
-    cursor: pointer;
-    font-size: var(--size-font);
-    margin: var(--size-gap) 0;
-    padding: 0;
-    text-decoration: underline;
-    outline: none;
-  }
-
-  .nextjs-data-runtime-error-copy-button--error,
-  .nextjs-data-runtime-error-copy-button--error:hover {
-    color: var(--color-ansi-red);
-  }
-  .nextjs-data-runtime-error-copy-button--success {
-    color: var(--color-ansi-green);
-  }
-
-  [data-nextjs-call-stack-frame] > h3,
-  [data-nextjs-component-stack-frame] > h3 {
-    margin-top: 0;
-    margin-bottom: 0;
-    font-family: var(--font-stack-monospace);
-    font-size: var(--size-font);
-  }
-  [data-nextjs-call-stack-frame] > h3[data-nextjs-frame-expanded='false'] {
-    color: #666;
-    display: inline-block;
-  }
-  [data-nextjs-call-stack-frame] > div,
-  [data-nextjs-component-stack-frame] > div {
-    display: flex;
-    align-items: center;
-    padding-left: calc(var(--size-gap) + var(--size-gap-half));
-    font-size: var(--size-font-small);
-    color: #999;
-  }
-  [data-nextjs-call-stack-frame] > div > svg,
-  [data-nextjs-component-stack-frame] > [role='link'] > svg {
-    width: auto;
-    height: var(--size-font-small);
-    margin-left: var(--size-gap);
-    flex-shrink: 0;
-    display: none;
-  }
-
-  [data-nextjs-call-stack-frame] > div[data-has-source],
-  [data-nextjs-component-stack-frame] > [role='link'] {
-    cursor: pointer;
-  }
-  [data-nextjs-call-stack-frame] > div[data-has-source]:hover,
-  [data-nextjs-component-stack-frame] > [role='link']:hover {
-    text-decoration: underline dotted;
-  }
-  [data-nextjs-call-stack-frame] > div[data-has-source] > svg,
-  [data-nextjs-component-stack-frame] > [role='link'] > svg {
-    display: unset;
-  }
-
-  [data-nextjs-call-stack-framework-icon] {
-    margin-right: var(--size-gap);
-  }
-  [data-nextjs-call-stack-framework-icon='next'] > mask {
-    mask-type: alpha;
-  }
-  [data-nextjs-call-stack-framework-icon='react'] {
-    color: rgb(20, 158, 202);
-  }
-  [data-nextjs-collapsed-call-stack-details][open]
-    [data-nextjs-call-stack-chevron-icon] {
-    transform: rotate(90deg);
-  }
-  [data-nextjs-collapsed-call-stack-details] summary {
-    display: flex;
-    align-items: center;
-    margin-bottom: var(--size-gap);
-    list-style: none;
-  }
-  [data-nextjs-collapsed-call-stack-details] summary::-webkit-details-marker {
-    display: none;
-  }
-
-  [data-nextjs-collapsed-call-stack-details] h3 {
-    color: #666;
-  }
-  [data-nextjs-collapsed-call-stack-details] [data-nextjs-call-stack-frame] {
-    margin-bottom: var(--size-gap-double);
-  }
-
-  [data-nextjs-container-errors-pseudo-html] {
-    position: relative;
-  }
-  [data-nextjs-container-errors-pseudo-html-collapse] {
-    position: absolute;
-    left: 10px;
-    top: 10px;
-    color: inherit;
-    background: none;
-    border: none;
-    padding: 0;
-  }
-  [data-nextjs-container-errors-pseudo-html--diff='add'] {
-    color: var(--color-ansi-green);
-  }
-  [data-nextjs-container-errors-pseudo-html--diff='remove'] {
-    color: var(--color-ansi-red);
-  }
-  [data-nextjs-container-errors-pseudo-html--tag-error] {
-    color: var(--color-ansi-red);
-    font-weight: bold;
-  }
-  /* hide but text are still accessible in DOM */
-  [data-nextjs-container-errors-pseudo-html--hint] {
-    display: inline-block;
-    font-size: 0;
-  }
-  [data-nextjs-container-errors-pseudo-html--tag-adjacent='false'] {
-    color: var(--color-accents-1);
-  }
+  ${PSEUDO_HTML_DIFF_STYLES}
 `
diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/icons/CollapseIcon.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/icons/CollapseIcon.tsx
index 4e38bd16b2ddc..8dab41204c571 100644
--- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/icons/CollapseIcon.tsx
+++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/icons/CollapseIcon.tsx
@@ -13,7 +13,6 @@ export function CollapseIcon({ collapsed }: { collapsed?: boolean } = {}) {
       strokeWidth="2"
       viewBox="0 0 24 24"
       // rotate 90 degrees if not collapsed.
-      // If collapsed isn't present, the rotation is applied via the `data-nextjs-collapsed-call-stack-details` element's `open` attribute
       {...(typeof collapsed === 'boolean'
         ? { style: { transform: collapsed ? undefined : 'rotate(90deg)' } }
         : {})}
diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/styles/ComponentStyles.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/styles/ComponentStyles.tsx
index 9b3e4e8d97ffc..1e0d51bfd895b 100644
--- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/styles/ComponentStyles.tsx
+++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/styles/ComponentStyles.tsx
@@ -11,6 +11,8 @@ import { styles as versionStaleness } from '../components/VersionStalenessInfo/V
 import { styles as buildErrorStyles } from '../container/BuildError'
 import { styles as containerErrorStyles } from '../container/Errors'
 import { styles as containerRuntimeErrorStyles } from '../container/RuntimeError'
+import { COPY_BUTTON_STYLES } from '../components/copy-button'
+import { CALL_STACK_FRAME_STYLES } from '../components/call-stack-frame/call-stack-frame'
 import { styles as devToolsIndicator } from '../components/Errors/dev-tools-indicator/styles'
 import { noop as css } from '../helpers/noop-template'
 
@@ -18,6 +20,8 @@ export function ComponentStyles() {
   return (
     <style>
       {css`
+        ${COPY_BUTTON_STYLES}
+        ${CALL_STACK_FRAME_STYLES}
         ${overlay}
         ${toast}
         ${dialog}