diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/dev-tools-indicator/internal/next-logo.stories.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/dev-tools-indicator/internal/next-logo.stories.tsx
index 55f4c3881c397..5fda7e623a357 100644
--- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/dev-tools-indicator/internal/next-logo.stories.tsx
+++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/dev-tools-indicator/internal/next-logo.stories.tsx
@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import { NextLogo } from './next-logo'
+import { withShadowPortal } from '../../../../storybook/with-shadow-portal'
 
 const meta: Meta<typeof NextLogo> = {
   component: NextLogo,
@@ -7,8 +8,9 @@ const meta: Meta<typeof NextLogo> = {
     layout: 'centered',
   },
   args: {
-    onClick: () => alert('Clicked!'),
+    onClick: () => console.log('Clicked!'),
   },
+  decorators: [withShadowPortal],
 }
 
 export default meta
@@ -69,3 +71,11 @@ export const Rendering: Story = {
     isDevRendering: true,
   },
 }
+
+export const RenderingWithError: Story = {
+  args: {
+    issueCount: 1,
+    isDevBuilding: false,
+    isDevRendering: true,
+  },
+}
diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/dev-tools-indicator/internal/next-logo.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/dev-tools-indicator/internal/next-logo.tsx
index 2953d5158ef46..31357dd8b0b74 100644
--- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/dev-tools-indicator/internal/next-logo.tsx
+++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/dev-tools-indicator/internal/next-logo.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 import { noop as css } from '../../../../../../internal/helpers/noop-template'
 
-interface Props extends React.ComponentProps<'svg'> {
+interface Props extends React.ComponentProps<'button'> {
   issueCount: number
   onClick: () => void
   isDevBuilding: boolean
@@ -16,6 +16,7 @@ export const NextLogo = ({
   ...props
 }: Props) => {
   const [isLoading, setIsLoading] = useState(false)
+  const [isPressed, setIsPressed] = useState(false)
 
   // Only shows the loading state after a 200ms delay when building or rendering,
   // to avoid flashing the loading state for quick updates
@@ -31,47 +32,71 @@ export const NextLogo = ({
   }, [isDevBuilding, isDevRendering])
 
   return (
-    <div onClick={onClick} style={{ position: 'relative' }}>
+    <button
+      onClick={onClick}
+      style={{
+        position: 'relative',
+        cursor: 'pointer',
+        userSelect: 'none',
+        backdropFilter: 'blur(48px)',
+        boxShadow:
+          '0px 24px 32px -8px #0000001A, 0px 8px 16px -4px #0000001A, 0px 1px 1px 0px #00000026',
+        borderRadius: '50%',
+        transition: 'transform 0.1s ease',
+        transform: isPressed ? 'scale(0.95)' : 'scale(1)',
+      }}
+      onMouseDown={() => setIsPressed(true)}
+      onMouseUp={() => setIsPressed(false)}
+      onMouseLeave={() => setIsPressed(false)}
+      {...props}
+    >
       <style>
         {css`
           .path0 {
-            animation: draw0 2s ease-in-out infinite;
+            animation: draw0 1.5s ease-in-out infinite;
+          }
+
+          .path1 {
+            animation: draw1 1.5s ease-out infinite;
+            animation-delay: 0.3s;
           }
 
           .paused {
             stroke-dashoffset: 0;
           }
-
           @keyframes draw0 {
-            0% {
+            0%,
+            25% {
               stroke-dashoffset: -29.6;
             }
+            25%,
             50% {
               stroke-dashoffset: 0;
             }
+            50%,
+            75% {
+              stroke-dashoffset: 0;
+            }
+            75%,
             100% {
               stroke-dashoffset: 29.6;
             }
           }
 
-          .path1 {
-            animation: draw1 2s ease-out infinite;
-            animation-delay: 0.5s;
-          }
-
           @keyframes draw1 {
-            0% {
+            0%,
+            20% {
               stroke-dashoffset: -11.6;
             }
-            25% {
-              stroke-dashoffset: 0;
-            }
+            20%,
             50% {
               stroke-dashoffset: 0;
             }
+            50%,
             75% {
-              stroke-dashoffset: 11.6;
+              stroke-dashoffset: 0;
             }
+            75%,
             100% {
               stroke-dashoffset: 11.6;
             }
@@ -88,16 +113,14 @@ export const NextLogo = ({
             right: '-5px',
             width: '20px',
             height: '20px',
-            background: '#551A1E',
+            background: 'var(--color-red-300)',
             borderRadius: '50%',
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
-            color: '#FF6369',
+            color: 'var(--color-red-900)',
             fontSize: '12px',
             fontWeight: 'bold',
-            cursor: 'pointer',
-            userSelect: 'none',
           }}
         >
           {issueCount}
@@ -110,76 +133,60 @@ export const NextLogo = ({
         viewBox="0 0 40 40"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
-        {...props}
+        style={{ shapeRendering: 'geometricPrecision' }}
       >
-        <g filter="url(#filter0_bdddi_1457_6023)">
-          <rect
-            x="0"
-            y="0"
-            width="40"
-            height="40"
-            rx="20"
-            fill="#333333"
-            shapeRendering="crispEdges"
-          />
-          <rect
-            x="0"
-            y="0"
-            width="40"
-            height="40"
-            rx="20"
-            fill={issueCount > 0 ? '#E5484D' : 'black'}
-            fillOpacity="0.8"
-            shapeRendering="crispEdges"
-          />
-          <g filter="url(#filter1_i_1457_6023)">
-            <rect
-              x="1.5"
-              y="1.5"
-              width="37"
-              height="37"
-              rx="18.5"
-              stroke="url(#paint0_angular_1457_6023)"
-              strokeOpacity="0.8"
-            />
-            <rect
-              x="1.5"
-              y="1.5"
-              width="37"
-              height="37"
-              rx="18.5"
-              stroke="white"
-              strokeOpacity="0.2"
-              style={{ mixBlendMode: 'multiply' }}
-            />
-            <rect
-              x="2"
-              y="2"
-              width="36"
-              height="36"
-              rx="18"
-              fill={issueCount > 0 ? '#CA2A30' : '#2A2A2A'}
-            />
+        <defs>
+          <clipPath id="circleClip">
+            <circle cx="20" cy="20" r="20" />
+          </clipPath>
+        </defs>
 
-            <g transform="translate(12, 12)">
-              <path
-                className={isLoading ? 'path0' : 'paused'}
-                d="M13.3 15.2 L2.34 1 V12.6"
-                fill="none"
-                stroke="url(#paint0_linear_1357_10853)"
-                strokeWidth="1.86"
-                mask="url(#mask0)"
-                strokeDasharray="29.6"
-                strokeDashoffset="29.6"
+        <g clipPath="url(#circleClip)">
+          <g filter="url(#filter0_bdddi_1457_6023)">
+            <circle cx="20" cy="20" r="20" fill={'black'} fillOpacity="0.8" />
+            <g filter="url(#filter1_i_1457_6023)">
+              <circle
+                cx="20"
+                cy="20"
+                r="18.5"
+                stroke="url(#paint0_angular_1457_6023)"
+                strokeOpacity="0.8"
               />
-              <path
-                className={isLoading ? 'path1' : 'paused'}
-                d="M11.825 1.5 V13.1"
-                strokeWidth="1.86"
-                stroke="url(#paint1_linear_1357_10853)"
-                strokeDasharray="11.6"
-                strokeDashoffset="11.6"
+              <circle
+                cx="20"
+                cy="20"
+                r="18.5"
+                stroke="white"
+                strokeOpacity="0.2"
+                style={{ mixBlendMode: 'multiply' }}
               />
+              <circle
+                cx="20"
+                cy="20"
+                r="18"
+                fill={issueCount > 0 ? '#CA2A30' : '#2A2A2A'}
+              />
+
+              <g transform="translate(13, 12)">
+                <path
+                  className={isLoading ? 'path0' : 'paused'}
+                  d="M13.3 15.2 L2.34 1 V12.6"
+                  fill="none"
+                  stroke="url(#paint0_linear_1357_10853)"
+                  strokeWidth="1.86"
+                  mask="url(#mask0)"
+                  strokeDasharray="29.6"
+                  strokeDashoffset="29.6"
+                />
+                <path
+                  className={isLoading ? 'path1' : 'paused'}
+                  d="M11.825 1.5 V13.1"
+                  strokeWidth="1.86"
+                  stroke="url(#paint1_linear_1357_10853)"
+                  strokeDasharray="11.6"
+                  strokeDashoffset="11.6"
+                />
+              </g>
             </g>
           </g>
         </g>
@@ -235,10 +242,10 @@ export const NextLogo = ({
 
           <filter
             id="filter0_bdddi_1457_6023"
-            x="-2"
-            y="-2"
-            width="44"
-            height="44"
+            x="0"
+            y="0"
+            width="40"
+            height="40"
             filterUnits="userSpaceOnUse"
             colorInterpolationFilters="sRGB"
           >
@@ -390,6 +397,6 @@ export const NextLogo = ({
           </radialGradient>
         </defs>
       </svg>
-    </div>
+    </button>
   )
 }
diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/styles/CssReset.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/styles/CssReset.tsx
index eb3e2ca7a6453..194cf2d022162 100644
--- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/styles/CssReset.tsx
+++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/styles/CssReset.tsx
@@ -56,6 +56,9 @@ export function CssReset() {
           line-height: 1.5;
           color: var(--color-font);
           text-align: left;
+        }
+
+        :host:not(button) {
           background-color: #fff;
         }
 
@@ -226,6 +229,12 @@ export function CssReset() {
 
         button {
           border-radius: 0;
+          border: 0;
+          padding: 0;
+          margin: 0;
+          background: none;
+          appearance: none;
+          -webkit-appearance: none;
         }
 
         button:focus {
@@ -233,6 +242,10 @@ export function CssReset() {
           outline: 5px auto -webkit-focus-ring-color;
         }
 
+        button:focus:not(:focus-visible) {
+          outline: none;
+        }
+
         input,
         button,
         select,