diff --git a/packages/html-reporter/src/testErrorView.css b/packages/html-reporter/src/testErrorView.css
index e29ea2a18b..7dd89ca558 100644
--- a/packages/html-reporter/src/testErrorView.css
+++ b/packages/html-reporter/src/testErrorView.css
@@ -31,3 +31,14 @@
 .test-error-text {
   font-family: monospace;
 }
+
+.fireworks-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  background: url('https://media1.tenor.com/m/iUZk-FXUd6oAAAAC/fireworks-gifkaro.gif') center center / cover no-repeat;
+  z-index: 9999;
+}
diff --git a/packages/html-reporter/src/testErrorView.tsx b/packages/html-reporter/src/testErrorView.tsx
index 18d5bee736..79e2c8c853 100644
--- a/packages/html-reporter/src/testErrorView.tsx
+++ b/packages/html-reporter/src/testErrorView.tsx
@@ -28,10 +28,12 @@ export const TestErrorView: React.FC<{
 }> = ({ error, testId, hidePrompt }) => {
   const html = React.useMemo(() => ansiErrorToHtml(error), [error]);
   return (
-    <div className='test-error-view test-error-text' data-testid={testId}>
-      {!hidePrompt && <PromptButton error={error} />}
-      <div dangerouslySetInnerHTML={{ __html: html || '' }}></div>
-    </div>
+    <>
+      <div className='test-error-view test-error-text' data-testid={testId}>
+        <div dangerouslySetInnerHTML={{ __html: html || '' }}></div>
+      </div>
+      <PromptButton error={error} />
+    </>
   );
 };
 
@@ -52,9 +54,31 @@ const PromptButton: React.FC<{
   if (!diff)
     return undefined;
 
+  const showFireworks = () => {
+    const fireworksContainer = document.createElement('div');
+    fireworksContainer.className = 'fireworks-container';
+    document.body.appendChild(fireworksContainer);
+
+    setTimeout(() => {
+      document.body.removeChild(fireworksContainer);
+    }, 2000);
+  };
+
   return (
     <button
-      style={{ width: 200, padding: '10px', marginBottom: '10px', borderRadius: '5px', border: '1px solid #ccc', backgroundColor: copied ? '#4caf50' : '#f0f0f0', color: copied ? '#fff' : '#000', cursor: 'pointer' }}
+      style={{
+        width: '100%',
+        padding: '10px',
+        marginTop: '10px',
+        borderRadius: '10px',
+        border: '2px solid #4caf50',
+        backgroundColor: copied ? '#4caf50' : '#fff',
+        color: copied ? '#fff' : '#4caf50',
+        cursor: 'pointer',
+        fontWeight: 'bold',
+        boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
+        transition: 'background-color 0.3s, color 0.3s, transform 0.3s'
+      }}
       onClick={async () => {
         await navigator.clipboard.writeText([
           'You are a helpful assistant. Help me understand the error cause. Here is the error:',
@@ -63,8 +87,12 @@ const PromptButton: React.FC<{
           diff
         ].join('\n\n'));
         setCopied(true);
+        showFireworks();
         setTimeout(() => setCopied(false), 1000);
-      }}>
+      }}
+      onMouseEnter={e => e.currentTarget.style.transform = 'scale(1.05)'}
+      onMouseLeave={e => e.currentTarget.style.transform = 'scale(1)'}
+    >
       {copied ? 'Copied!' : 'Copy prompt to fix with AI'}
     </button>
   );