diff --git a/frontend/src/components/tasks/TaskDetails/preview/DevServerLogsView.tsx b/frontend/src/components/tasks/TaskDetails/preview/DevServerLogsView.tsx
index 23032d8b..009366fb 100644
--- a/frontend/src/components/tasks/TaskDetails/preview/DevServerLogsView.tsx
+++ b/frontend/src/components/tasks/TaskDetails/preview/DevServerLogsView.tsx
@@ -1,6 +1,5 @@
 import { useTranslation } from 'react-i18next';
 import { Terminal, ChevronDown } from 'lucide-react';
-import { Button } from '@/components/ui/button';
 import ProcessLogsViewer, {
   ProcessLogsViewerContent,
 } from '../ProcessLogsViewer';
@@ -32,28 +31,36 @@ export function DevServerLogsView({
   }
 
   return (
-    <div className="border-t bg-background">
-      {/* Logs toolbar */}
-      <div className="flex items-center justify-between px-3 py-2 border-b bg-muted/50">
-        <div className="flex items-center gap-2">
-          <Terminal className="h-4 w-4 text-muted-foreground" />
-          <span className="text-sm font-medium text-foreground">
-            {t('preview.logs.title')}
-          </span>
+    <details
+      className="group border-t bg-background"
+      open={showLogs}
+      onToggle={(e) => {
+        if (e.currentTarget.open !== showLogs) {
+          onToggle();
+        }
+      }}
+    >
+      <summary className="list-none cursor-pointer">
+        <div className="flex items-center justify-between px-3 py-2 border-b bg-muted/50">
+          <div className="flex items-center gap-2">
+            <Terminal className="h-4 w-4 text-muted-foreground" />
+            <span className="text-sm font-medium text-foreground">
+              {t('preview.logs.title')}
+            </span>
+          </div>
+          <div className="flex items-center text-sm">
+            <ChevronDown
+              className={`h-4 w-4 mr-1 ${showToggleText ? 'transition-transform' : ''} ${showLogs ? '' : 'rotate-180'}`}
+            />
+            {showToggleText
+              ? showLogs
+                ? t('preview.logs.hide')
+                : t('preview.logs.show')
+              : t('preview.logs.hide')}
+          </div>
         </div>
-        <Button size="sm" variant="ghost" onClick={onToggle}>
-          <ChevronDown
-            className={`h-4 w-4 mr-1 ${showToggleText ? 'transition-transform' : ''} ${showLogs ? '' : 'rotate-180'}`}
-          />
-          {showToggleText
-            ? showLogs
-              ? t('preview.logs.hide')
-              : t('preview.logs.show')
-            : t('preview.logs.hide')}
-        </Button>
-      </div>
+      </summary>
 
-      {/* Logs viewer */}
       {showLogs && (
         <div className={height}>
           {logs ? (
@@ -63,6 +70,6 @@ export function DevServerLogsView({
           )}
         </div>
       )}
-    </div>
+    </details>
   );
 }