diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Dialog/styles.ts b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Dialog/styles.ts
index 81d14038be03d..4d415022bdcd7 100644
--- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Dialog/styles.ts
+++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Dialog/styles.ts
@@ -10,7 +10,6 @@ const styles = css`
     margin-left: auto;
     outline: none;
     background: var(--color-background);
-    border: 1px solid var(--color-gray-400);
     border-radius: var(--rounded-xl);
     box-shadow: var(--shadow-md);
     max-height: calc(100% - 56px);
@@ -46,16 +45,18 @@ const styles = css`
     overflow-y: auto;
     border: none;
     margin: 0;
-    /* calc(padding + banner width offset) */
-    padding: calc(var(--size-gap-double) + var(--size-gap-half))
-      var(--size-gap-double);
     height: 100%;
     display: flex;
     flex-direction: column;
   }
   [data-nextjs-dialog-content] > [data-nextjs-dialog-header] {
     flex-shrink: 0;
-    margin-bottom: var(--size-gap-double);
+    padding: var(--size-4);
+    border-top: 1px solid var(--color-gray-400);
+    border-left: 1px solid var(--color-gray-400);
+    border-right: 1px solid var(--color-gray-400);
+    border-top-left-radius: var(--rounded-xl);
+    border-top-right-radius: var(--rounded-xl);
   }
   [data-nextjs-dialog-content] > [data-nextjs-dialog-body] {
     position: relative;
diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-footer/styles.ts b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-footer/styles.ts
index a9d9c26237e61..15b23f14fa116 100644
--- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-footer/styles.ts
+++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-footer/styles.ts
@@ -5,6 +5,11 @@ const styles = css`
     display: flex;
     align-items: center;
     justify-content: space-between;
+    padding: var(--size-3);
+    background: var(--color-background-200);
+    border: 1px solid var(--color-gray-400);
+    border-bottom-left-radius: var(--rounded-xl);
+    border-bottom-right-radius: var(--rounded-xl);
   }
 
   .error-overlay-footer p {
diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/Errors.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/Errors.tsx
index 442bfe1d6a7c3..5233921f041a6 100644
--- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/Errors.tsx
+++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/Errors.tsx
@@ -269,24 +269,26 @@ export function Errors({
       setActiveIndex={setActiveIndex}
       footerMessage={footerMessage}
     >
-      {notes ? (
-        <>
+      <div className="error-overlay-notes-container">
+        {notes ? (
+          <>
+            <p
+              id="nextjs__container_errors__notes"
+              className="nextjs__container_errors__notes"
+            >
+              {notes}
+            </p>
+          </>
+        ) : null}
+        {hydrationWarning ? (
           <p
-            id="nextjs__container_errors__notes"
-            className="nextjs__container_errors__notes"
+            id="nextjs__container_errors__link"
+            className="nextjs__container_errors__link"
           >
-            {notes}
+            <HotlinkedText text="See more info here: https://nextjs.org/docs/messages/react-hydration-error" />
           </p>
-        </>
-      ) : null}
-      {hydrationWarning ? (
-        <p
-          id="nextjs__container_errors__link"
-          className="nextjs__container_errors__link"
-        >
-          <HotlinkedText text="See more info here: https://nextjs.org/docs/messages/react-hydration-error" />
-        </p>
-      ) : null}
+        ) : null}
+      </div>
 
       {hydrationWarning &&
       (activeError.componentStackFrames?.length ||
@@ -337,18 +339,17 @@ export const styles = css`
     padding: var(--size-gap) var(--size-gap-double);
     border-left: 2px solid var(--color-text-color-red-1);
     margin-top: var(--size-gap);
+    margin-bottom: 0;
     font-weight: bold;
     color: var(--color-text-color-red-1);
     background-color: var(--color-text-background-red-1);
   }
   p.nextjs__container_errors__link {
-    margin: var(--size-gap-double) auto;
     color: var(--color-text-color-red-1);
     font-weight: 600;
     font-size: 15px;
   }
   p.nextjs__container_errors__notes {
-    margin: var(--size-gap-double) auto;
     color: var(--color-stack-notes);
     font-weight: 600;
     font-size: 15px;
@@ -370,6 +371,7 @@ export const styles = css`
     font-size: var(--size-font-big);
   }
   .nextjs__container_errors__component-stack {
+    margin: 0;
     padding: 12px 32px;
     color: var(--color-ansi-fg);
     background: var(--color-ansi-bg);
@@ -404,8 +406,8 @@ export const styles = css`
   .nextjs-container-errors-header
     > .nextjs-container-build-error-version-status {
     position: absolute;
-    top: 0;
-    right: 0;
+    top: var(--size-4);
+    right: var(--size-4);
   }
   .nextjs__container_errors_inspect_copy_button {
     cursor: pointer;
@@ -428,4 +430,9 @@ export const styles = css`
     margin: 0 8px;
     color: inherit;
   }
+
+  .error-overlay-notes-container {
+    padding: var(--size-4);
+    padding-top: 0;
+  }
 `
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 d1dfabbbac359..a1d0c2d7e55b0 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
@@ -79,6 +79,10 @@ export function RuntimeError({ error }: RuntimeErrorProps) {
 }
 
 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);
diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/styles/Base.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/styles/Base.tsx
index 477e7cde1dc46..42558432ab7f8 100644
--- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/styles/Base.tsx
+++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/styles/Base.tsx
@@ -86,6 +86,23 @@ export function Base() {
           --rounded-xl: 0.75rem; /* 12px */
           --rounded-2xl: 1rem; /* 16px */
           --rounded-3xl: 1.5rem; /* 24px */
+
+          --size-0: 0px;
+          --size-px: 1px;
+          --size-0_5: 0.125rem; /* 2px */
+          --size-1: 0.25rem; /* 4px */
+          --size-1_5: 0.375rem; /* 6px */
+          --size-2: 0.5rem; /* 8px */
+          --size-2_5: 0.625rem; /* 10px */
+          --size-3: 0.75rem; /* 12px */
+          --size-3_5: 0.875rem; /* 14px */
+          --size-4: 1rem; /* 16px */
+          --size-5: 1.25rem; /* 20px */
+          --size-6: 1.5rem; /* 24px */
+          --size-7: 1.75rem; /* 28px */
+          --size-8: 2rem; /* 32px */
+          --size-9: 2.25rem; /* 36px */
+          --size-10: 2.5rem; /* 40px */
         }
 
         @media (prefers-color-scheme: dark) {