diff --git a/packages/next/src/client/components/react-dev-overlay/ui/storybook/app.png b/packages/next/src/client/components/react-dev-overlay/ui/app.png
similarity index 100%
rename from packages/next/src/client/components/react-dev-overlay/ui/storybook/app.png
rename to packages/next/src/client/components/react-dev-overlay/ui/app.png
diff --git a/packages/next/src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/next-logo.tsx b/packages/next/src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/next-logo.tsx
index 2e351f33a466a..df445e17b894c 100644
--- a/packages/next/src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/next-logo.tsx
+++ b/packages/next/src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/next-logo.tsx
@@ -190,11 +190,12 @@ export const NextLogo = forwardRef(function NextLogo(
           }
 
           [data-issues] {
+            --padding-left: 8px;
             display: flex;
             gap: 2px;
             align-items: center;
             padding-left: 8px;
-            padding-right: ${isBuildError ? '8px' : 'calc(2px * 2)'};
+            padding-right: 8px;
             height: var(--size-32);
             margin: 0 2px;
             border-radius: var(--rounded-full);
@@ -204,6 +205,10 @@ export const NextLogo = forwardRef(function NextLogo(
               background: var(--color-hover-alpha-error);
             }
 
+            &:has([data-issues-collapse]) {
+              padding-right: calc(var(--padding-left) / 2);
+            }
+
             [data-cross] {
               translate: 0px -1px;
             }
diff --git a/packages/next/src/client/components/react-dev-overlay/ui/dev-overlay.stories.tsx b/packages/next/src/client/components/react-dev-overlay/ui/dev-overlay.stories.tsx
index 0f5884aa3a2ad..d51f5db146981 100644
--- a/packages/next/src/client/components/react-dev-overlay/ui/dev-overlay.stories.tsx
+++ b/packages/next/src/client/components/react-dev-overlay/ui/dev-overlay.stories.tsx
@@ -1,6 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import type { OverlayState } from '../shared'
 
+// @ts-expect-error
+import imgApp from './app.png'
+
 import { useState } from 'react'
 import { DevOverlay } from './dev-overlay'
 import { ACTION_UNHANDLED_ERROR } from '../shared'
@@ -84,11 +87,22 @@ export const Default: Story = {
   render: function DevOverlayStory() {
     const [isErrorOverlayOpen, setIsErrorOverlayOpen] = useState(true)
     return (
-      <DevOverlay
-        state={state}
-        isErrorOverlayOpen={isErrorOverlayOpen}
-        setIsErrorOverlayOpen={setIsErrorOverlayOpen}
-      />
+      <>
+        <img
+          src={imgApp}
+          style={{
+            width: '100%',
+            height: '100%',
+            objectFit: 'contain',
+            filter: 'invert(1)',
+          }}
+        />
+        <DevOverlay
+          state={state}
+          isErrorOverlayOpen={isErrorOverlayOpen}
+          setIsErrorOverlayOpen={setIsErrorOverlayOpen}
+        />
+      </>
     )
   },
 }