diff --git a/packages/chronicle/src/components/api/playground-dialog.module.css b/packages/chronicle/src/components/api/playground-dialog.module.css
index 9e78160..45bb5c0 100644
--- a/packages/chronicle/src/components/api/playground-dialog.module.css
+++ b/packages/chronicle/src/components/api/playground-dialog.module.css
@@ -198,6 +198,12 @@
   flex-shrink: 0;
 }
 
+.responseHeaderActions {
+  display: flex;
+  align-items: center;
+  gap: var(--rs-space-2);
+}
+
 .statusBar {
   display: flex;
   align-items: center;
diff --git a/packages/chronicle/src/components/api/playground-dialog.tsx b/packages/chronicle/src/components/api/playground-dialog.tsx
index e7a2d37..c2b3c9b 100644
--- a/packages/chronicle/src/components/api/playground-dialog.tsx
+++ b/packages/chronicle/src/components/api/playground-dialog.tsx
@@ -269,6 +269,10 @@ export function PlaygroundDialog({
 
   const responseLines = responseJson ? responseJson.split('\n') : []
 
+  const responseHeadersText = responseData?.headers
+    ? Object.entries(responseData.headers).map(([k, v]) => `${k}: ${v}`).join('\n')
+    : ''
+
   const curlSnippet = useMemo(() => {
     const headers: Record<string, string> = { ...getAuthHeaders(), ...headerValues }
     if (body) headers['Content-Type'] = body.contentType ?? 'application/json'
@@ -467,15 +471,18 @@ export function PlaygroundDialog({
             <div className={styles.responseHeader}>
               <span className={styles.panelTitle}>Response</span>
               {responseData && (
-                <Menu>
-                  <Menu.Trigger render={<Button variant="text" color="neutral" size="small" trailingIcon={<ChevronDownIcon />} />}>
-                    {responseView === 'body' ? 'Body' : 'Headers'}
-                  </Menu.Trigger>
-                  <Menu.Content>
-                    <Menu.Item onClick={() => setResponseView('body')}>Body</Menu.Item>
-                    <Menu.Item onClick={() => setResponseView('headers')}>Headers</Menu.Item>
-                  </Menu.Content>
-                </Menu>
+                <div className={styles.responseHeaderActions}>
+                  <CopyButton text={responseView === 'body' ? responseJson : responseHeadersText} size={2} />
+                  <Menu>
+                    <Menu.Trigger render={<Button variant="text" color="neutral" size="small" trailingIcon={<ChevronDownIcon />} />}>
+                      {responseView === 'body' ? 'Body' : 'Headers'}
+                    </Menu.Trigger>
+                    <Menu.Content>
+                      <Menu.Item onClick={() => setResponseView('body')}>Body</Menu.Item>
+                      <Menu.Item onClick={() => setResponseView('headers')}>Headers</Menu.Item>
+                    </Menu.Content>
+                  </Menu>
+                </div>
               )}
             </div>