diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/dialog/header.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/dialog/header.tsx
index 121bca96ee2195..ca3bda4fc8d3c1 100644
--- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/dialog/header.tsx
+++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/dialog/header.tsx
@@ -3,13 +3,19 @@ import { noop as css } from '../../../helpers/noop-template'
 
 type ErrorOverlayDialogHeaderProps = {
   children?: React.ReactNode
+  isTurbopack?: boolean
 }
 
 export function ErrorOverlayDialogHeader({
   children,
+  isTurbopack,
 }: ErrorOverlayDialogHeaderProps) {
   return (
-    <DialogHeader className="nextjs-container-errors-header">
+    <DialogHeader
+      className={`nextjs-container-errors-header ${
+        isTurbopack ? 'turbopack' : ''
+      }`}
+    >
       {children}
     </DialogHeader>
   )
@@ -48,4 +54,24 @@ export const DIALOG_HEADER_STYLES = css`
     top: var(--size-4);
     right: var(--size-4);
   }
+
+  .nextjs-container-errors-header.turbopack {
+    background-image: linear-gradient(
+      10deg,
+      var(--color-background-100) 60%,
+      var(--color-turbopack-background-red) 75%,
+      var(--color-turbopack-background-blue) 100%
+    );
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .nextjs-container-errors-header.turbopack {
+      background-image: linear-gradient(
+        10deg,
+        var(--color-background-100) 60%,
+        var(--color-turbopack-background-red) 75%,
+        var(--color-turbopack-background-blue) 100%
+      );
+    }
+  }
 `
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 24280923aa00f6..c10971032bf5b5 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
@@ -79,7 +79,7 @@ export function ErrorOverlayLayout({
 
       <ErrorOverlayDialog onClose={onClose} isTurbopack={isTurbopack}>
         <DialogContent>
-          <ErrorOverlayDialogHeader>
+          <ErrorOverlayDialogHeader isTurbopack={isTurbopack}>
             <div
               className="nextjs__container_errors__error_title"
               // allow assertion in tests before error rating is implemented
diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/styles/colors.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/styles/colors.tsx
index 0ceb4287d4d467..d5501f754edca3 100644
--- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/styles/colors.tsx
+++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/styles/colors.tsx
@@ -98,6 +98,8 @@ export function Colors() {
           --color-turbopack-text-blue: #0096ff;
           --color-turbopack-border-red: #f0adbe;
           --color-turbopack-border-blue: #adccea;
+          --color-turbopack-background-red: #fff7f9;
+          --color-turbopack-background-blue: #f6fbff;
         }
 
         @media (prefers-color-scheme: dark) {
@@ -194,6 +196,8 @@ export function Colors() {
             --color-turbopack-text-blue: #45b2ff;
             --color-turbopack-border-red: #6e293b;
             --color-turbopack-border-blue: #284f80;
+            --color-turbopack-background-red: #250d12;
+            --color-turbopack-background-blue: #0a1723;
           }
         }
       `}