diff --git a/ui/public/config.json b/ui/public/config.json
index 2d8c690..fa023ba 100644
--- a/ui/public/config.json
+++ b/ui/public/config.json
@@ -1,3 +1,4 @@
 {
-  "apiUrl": "http://localhost:9090/api/v1"
+  "apiUrl": "http://localhost:9090/api/v1",
+  "benchmarkoorUrl": "https://benchmarkoor.core.ethpandaops.io"
 }
diff --git a/ui/src/components/jobs/JobCard.tsx b/ui/src/components/jobs/JobCard.tsx
index be71db5..332701d 100644
--- a/ui/src/components/jobs/JobCard.tsx
+++ b/ui/src/components/jobs/JobCard.tsx
@@ -1,10 +1,11 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, type ReactNode } from 'react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import type { Job, JobTemplate } from '../../types';
 import { api } from '../../api/client';
 import { useAuthStore } from '../../stores/authStore';
 import { LabelsDisplay } from '../common/LabelBadge';
 import { JobDetailDialog } from './JobDetailDialog';
+import { buildBenchmarkoorRunUrl } from '../../config';
 
 interface JobCardProps {
   job: Job;
@@ -30,6 +31,7 @@ export function JobCard({ job, template, isDragging, dragHandleProps }: JobCardP
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
   const [showCancelConfirm, setShowCancelConfirm] = useState(false);
   const [showDetailDialog, setShowDetailDialog] = useState(false);
+  const [showActionsMenu, setShowActionsMenu] = useState(false);
   const [currentTime, setCurrentTime] = useState(() => Date.now());
 
   // Update current time every second for running jobs to show live duration
@@ -212,9 +214,154 @@ export function JobCard({ job, template, isDragging, dragHandleProps }: JobCardP
   const effectiveOwner = job.owner ?? template?.owner;
   const effectiveRepo = job.repo ?? template?.repo;
 
+  // Build the action list once, then render it two ways: inline icon buttons on
+  // wide cards (@md+), and a labelled overflow menu on narrow cards.
+  const isActive = job.status === 'triggered' || job.status === 'running';
+  const requeueBusy = toggleRequeueMutation.isPending || disableRequeueMutation.isPending;
+  const handleRequeueToggle = () => {
+    if (job.auto_requeue) {
+      setShowStopRequeueConfirm(true);
+    } else {
+      toggleRequeueMutation.mutate();
+    }
+  };
+  const benchmarkoorUrl = job.run_id ? buildBenchmarkoorRunUrl(job.run_id) : undefined;
+
+  type JobAction = {
+    key: string;
+    label: string;
+    icon: ReactNode;
+    onClick?: () => void;
+    href?: string;
+    disabled?: boolean;
+    tone?: 'default' | 'danger' | 'green' | 'purple';
+    active?: boolean;
+  };
+
+  const actions: JobAction[] = [
+    {
+      key: 'details',
+      label: 'View details',
+      onClick: () => setShowDetailDialog(true),
+      icon: (
+        <svg className="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+        </svg>
+      ),
+    },
+  ];
+  if (job.run_url) {
+    actions.push({
+      key: 'run',
+      label: 'View run on GitHub',
+      href: job.run_url,
+      icon: (
+        <svg className="size-4" fill="currentColor" viewBox="0 0 24 24">
+          <path d="M14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z" />
+          <path d="M5 5v14h14v-7h-2v5H7V7h5V5H5z" />
+        </svg>
+      ),
+    });
+  }
+  if (benchmarkoorUrl) {
+    actions.push({
+      key: 'benchmarkoor',
+      label: 'View on Benchmarkoor',
+      href: benchmarkoorUrl,
+      icon: (
+        <svg className="size-4" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" d="M3 3v18h18M7 15l4-4 3 3 5-6" />
+        </svg>
+      ),
+    });
+  }
+  if (isAdmin && isActive) {
+    actions.push({
+      key: 'cancel',
+      label: 'Cancel workflow',
+      tone: 'danger',
+      disabled: cancelMutation.isPending,
+      onClick: () => setShowCancelConfirm(true),
+      icon: (
+        <svg className="size-4" fill="currentColor" viewBox="0 0 24 24">
+          <path d="M6 6h12v12H6z" />
+        </svg>
+      ),
+    });
+  }
+  if (isAdmin && (isActive || job.status === 'pending')) {
+    actions.push({
+      key: 'requeue',
+      label: job.auto_requeue ? 'Disable auto-requeue' : 'Enable auto-requeue',
+      tone: 'purple',
+      active: job.auto_requeue,
+      disabled: requeueBusy,
+      onClick: handleRequeueToggle,
+      icon: (
+        <svg className="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+        </svg>
+      ),
+    });
+  }
+  if (isAdmin && job.status === 'pending' && !job.paused) {
+    actions.push({
+      key: 'pause',
+      label: 'Pause job',
+      disabled: pauseMutation.isPending,
+      onClick: () => pauseMutation.mutate(),
+      icon: (
+        <svg className="size-4" fill="currentColor" viewBox="0 0 24 24">
+          <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" />
+        </svg>
+      ),
+    });
+  }
+  if (isAdmin && job.status === 'pending' && job.paused) {
+    actions.push({
+      key: 'resume',
+      label: 'Resume job',
+      tone: 'green',
+      disabled: unpauseMutation.isPending,
+      onClick: () => unpauseMutation.mutate(),
+      icon: (
+        <svg className="size-4" fill="currentColor" viewBox="0 0 24 24">
+          <path d="M8 5v14l11-7z" />
+        </svg>
+      ),
+    });
+  }
+  if (isAdmin && (job.status === 'pending' || job.status === 'failed')) {
+    actions.push({
+      key: 'delete',
+      label: 'Remove job',
+      tone: 'danger',
+      disabled: deleteMutation.isPending,
+      onClick: () => setShowDeleteConfirm(true),
+      icon: (
+        <svg className="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+        </svg>
+      ),
+    });
+  }
+
+  const inlineToneClass: Record<NonNullable<JobAction['tone']>, string> = {
+    default: 'text-zinc-500 hover:bg-zinc-800 hover:text-zinc-300',
+    danger: 'text-zinc-500 hover:bg-red-500/10 hover:text-red-400',
+    green: 'text-zinc-500 hover:bg-green-500/10 hover:text-green-400',
+    purple: 'text-zinc-500 hover:bg-purple-500/10 hover:text-purple-400',
+  };
+  const menuToneClass: Record<NonNullable<JobAction['tone']>, string> = {
+    default: 'text-zinc-300 hover:bg-zinc-700',
+    danger: 'text-red-400 hover:bg-red-500/10',
+    green: 'text-green-400 hover:bg-green-500/10',
+    purple: 'text-purple-400 hover:bg-zinc-700',
+  };
+
   return (
     <div
-      className={`rounded-sm border border-zinc-800 bg-zinc-900 p-4 transition-shadow ${
+      className={`@container rounded-sm border border-zinc-800 bg-zinc-900 p-4 transition-shadow ${
         isDragging ? 'shadow-lg ring-2 ring-blue-500' : ''
       }`}
     >
@@ -233,7 +380,7 @@ export function JobCard({ job, template, isDragging, dragHandleProps }: JobCardP
 
         <div className="flex-1 min-w-0">
           {/* Header */}
-          <div className="flex items-center gap-2 mb-2">
+          <div className="flex flex-wrap items-center gap-2 mb-2">
             <span className={`inline-flex items-center gap-1.5 rounded-sm px-2 py-0.5 text-xs font-medium ${job.paused ? 'bg-zinc-500/10 text-zinc-400' : colors.bg + ' ' + colors.text}`}>
               <span className={`size-1.5 rounded-full ${job.paused ? 'bg-zinc-400' : colors.dot}`} />
               {job.paused ? 'paused' : job.status}
@@ -260,7 +407,7 @@ export function JobCard({ job, template, isDragging, dragHandleProps }: JobCardP
           </div>
 
           {/* Job name */}
-          <h4 className="text-sm font-medium text-zinc-200 truncate">
+          <h4 className="text-sm font-medium text-zinc-200 break-words" title={effectiveName}>
             {effectiveName}
           </h4>
 
@@ -279,133 +426,97 @@ export function JobCard({ job, template, isDragging, dragHandleProps }: JobCardP
           )}
         </div>
 
-        {/* Actions */}
-        <div className="flex items-center gap-1">
-          {/* Info/details button */}
-          <button
-            onClick={() => setShowDetailDialog(true)}
-            className="rounded-sm p-1.5 text-zinc-500 hover:bg-zinc-800 hover:text-zinc-300"
-            title="View details"
-          >
-            <svg className="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-            </svg>
-          </button>
-          {/* Cancel button for running/triggered jobs */}
-          {isAdmin && (job.status === 'triggered' || job.status === 'running') && (
-            <button
-              onClick={() => setShowCancelConfirm(true)}
-              disabled={cancelMutation.isPending}
-              className="rounded-sm p-1.5 text-zinc-500 hover:bg-red-500/10 hover:text-red-400 disabled:opacity-50"
-              title="Cancel workflow"
-            >
-              <svg className="size-4" fill="currentColor" viewBox="0 0 24 24">
-                <path d="M6 6h12v12H6z"/>
-              </svg>
-            </button>
-          )}
-          {/* Auto-requeue toggle for running/triggered jobs - appears before GitHub link */}
-          {isAdmin && (job.status === 'triggered' || job.status === 'running') && (
-            <button
-              onClick={() => {
-                if (job.auto_requeue) {
-                  setShowStopRequeueConfirm(true);
-                } else {
-                  toggleRequeueMutation.mutate();
-                }
-              }}
-              disabled={toggleRequeueMutation.isPending || disableRequeueMutation.isPending}
-              className={`rounded-sm p-1.5 text-zinc-500 disabled:opacity-50 ${
-                job.auto_requeue
-                  ? 'bg-purple-500/10 text-purple-400 hover:bg-purple-500/20'
-                  : 'hover:bg-purple-500/10 hover:text-purple-400'
-              }`}
-              title={job.auto_requeue ? 'Disable auto-requeue' : 'Enable auto-requeue'}
-            >
-              <svg className="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
-              </svg>
-            </button>
-          )}
-          {job.run_url && (
-            <a
-              href={job.run_url}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="rounded-sm p-1.5 text-zinc-500 hover:bg-zinc-800 hover:text-zinc-300"
-              title="View run on GitHub"
-            >
-              <svg className="size-4" fill="currentColor" viewBox="0 0 24 24">
-                <path d="M14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/>
-                <path d="M5 5v14h14v-7h-2v5H7V7h5V5H5z"/>
-              </svg>
-            </a>
-          )}
-          {isAdmin && job.status === 'pending' && !job.paused && (
-            <button
-              onClick={() => pauseMutation.mutate()}
-              disabled={pauseMutation.isPending}
-              className="rounded-sm p-1.5 text-zinc-500 hover:bg-zinc-800 hover:text-zinc-300 disabled:opacity-50"
-              title="Pause job"
-            >
-              <svg className="size-4" fill="currentColor" viewBox="0 0 24 24">
-                <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
-              </svg>
-            </button>
-          )}
-          {isAdmin && job.status === 'pending' && job.paused && (
-            <button
-              onClick={() => unpauseMutation.mutate()}
-              disabled={unpauseMutation.isPending}
-              className="rounded-sm p-1.5 text-zinc-500 hover:bg-green-500/10 hover:text-green-400 disabled:opacity-50"
-              title="Resume job"
-            >
-              <svg className="size-4" fill="currentColor" viewBox="0 0 24 24">
-                <path d="M8 5v14l11-7z"/>
-              </svg>
-            </button>
-          )}
-          {/* Auto-requeue toggle for pending jobs */}
-          {isAdmin && job.status === 'pending' && (
-            <button
-              onClick={() => {
-                // Show confirmation modal when disabling auto-requeue
-                if (job.auto_requeue) {
-                  setShowStopRequeueConfirm(true);
-                } else {
-                  toggleRequeueMutation.mutate();
-                }
-              }}
-              disabled={toggleRequeueMutation.isPending || disableRequeueMutation.isPending}
-              className={`rounded-sm p-1.5 text-zinc-500 disabled:opacity-50 ${
-                job.auto_requeue
-                  ? 'bg-purple-500/10 text-purple-400 hover:bg-purple-500/20'
-                  : 'hover:bg-purple-500/10 hover:text-purple-400'
-              }`}
-              title={job.auto_requeue ? 'Disable auto-requeue' : 'Enable auto-requeue'}
-            >
-              <svg className="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
-              </svg>
-            </button>
-          )}
-          {isAdmin && (job.status === 'pending' || job.status === 'failed') && (
+        {/* Actions: inline icons on wide cards, overflow menu on narrow ones */}
+        <div className="flex shrink-0 items-start gap-1">
+          {/* Inline (wide card) */}
+          <div className="hidden items-center gap-1 @md:flex">
+            {actions.map((action) =>
+              action.href ? (
+                <a
+                  key={action.key}
+                  href={action.href}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  onClick={(e) => e.stopPropagation()}
+                  title={action.label}
+                  className={`rounded-sm p-1.5 ${inlineToneClass[action.tone ?? 'default']}`}
+                >
+                  {action.icon}
+                </a>
+              ) : (
+                <button
+                  key={action.key}
+                  onClick={action.onClick}
+                  disabled={action.disabled}
+                  title={action.label}
+                  className={`rounded-sm p-1.5 disabled:opacity-50 ${
+                    action.active
+                      ? 'bg-purple-500/10 text-purple-400 hover:bg-purple-500/20'
+                      : inlineToneClass[action.tone ?? 'default']
+                  }`}
+                >
+                  {action.icon}
+                </button>
+              )
+            )}
+          </div>
+
+          {/* Overflow menu (narrow card) */}
+          <div className="relative @md:hidden">
             <button
-              onClick={() => setShowDeleteConfirm(true)}
-              disabled={deleteMutation.isPending}
-              className="rounded-sm p-1.5 text-zinc-500 hover:bg-red-500/10 hover:text-red-400 disabled:opacity-50"
-              title="Remove job"
+              onClick={() => setShowActionsMenu((v) => !v)}
+              className="rounded-sm p-1.5 text-zinc-400 hover:bg-zinc-800 hover:text-zinc-200"
+              aria-label="Actions"
+              title="Actions"
             >
-              <svg className="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+              <svg className="size-5" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M12 8a2 2 0 100-4 2 2 0 000 4zm0 2a2 2 0 100 4 2 2 0 000-4zm0 6a2 2 0 100 4 2 2 0 000-4z" />
               </svg>
             </button>
-          )}
+            {showActionsMenu && (
+              <>
+                <div className="fixed inset-0 z-10" onClick={() => setShowActionsMenu(false)} />
+                <div className="absolute right-0 z-20 mt-1 w-52 rounded-sm border border-zinc-700 bg-zinc-800 py-1 shadow-lg">
+                  {actions.map((action) => {
+                    const cls = `flex w-full items-center gap-2.5 px-3 py-2 text-left text-sm ${
+                      action.active ? 'text-purple-400 hover:bg-zinc-700' : menuToneClass[action.tone ?? 'default']
+                    }`;
+                    return action.href ? (
+                      <a
+                        key={action.key}
+                        href={action.href}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        onClick={() => setShowActionsMenu(false)}
+                        className={cls}
+                      >
+                        <span className="shrink-0">{action.icon}</span>
+                        {action.label}
+                      </a>
+                    ) : (
+                      <button
+                        key={action.key}
+                        onClick={() => {
+                          setShowActionsMenu(false);
+                          action.onClick?.();
+                        }}
+                        disabled={action.disabled}
+                        className={`${cls} disabled:opacity-50`}
+                      >
+                        <span className="shrink-0">{action.icon}</span>
+                        {action.label}
+                      </button>
+                    );
+                  })}
+                </div>
+              </>
+            )}
+          </div>
         </div>
       </div>
 
-      {/* Bottom row: context left, timing right */}
-      <div className="mt-3 flex items-center justify-between gap-4 text-xs text-zinc-500">
+      {/* Bottom row: context left, timing right (stacks when the card is narrow) */}
+      <div className="mt-3 flex flex-col gap-1 text-xs text-zinc-500 @md:flex-row @md:items-center @md:justify-between @md:gap-4">
         {/* Context info - left */}
         <div className="flex flex-wrap items-center gap-x-4 gap-y-1">
           {(effectiveOwner && effectiveRepo) && (
@@ -426,7 +537,7 @@ export function JobCard({ job, template, isDragging, dragHandleProps }: JobCardP
           )}
         </div>
         {/* Timing info - right */}
-        <div className="flex flex-wrap items-center justify-end gap-x-4 gap-y-1">
+        <div className="flex flex-wrap items-center gap-x-4 gap-y-1 @md:justify-end">
           <span className="flex items-center gap-1" title="Created at">
             <svg className="size-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
diff --git a/ui/src/components/jobs/JobDetailDialog.tsx b/ui/src/components/jobs/JobDetailDialog.tsx
index b1e7551..64ee22d 100644
--- a/ui/src/components/jobs/JobDetailDialog.tsx
+++ b/ui/src/components/jobs/JobDetailDialog.tsx
@@ -4,6 +4,7 @@ import type { Job, JobTemplate } from '../../types';
 import { api } from '../../api/client';
 import { useAuthStore } from '../../stores/authStore';
 import { LabelsDisplay } from '../common/LabelBadge';
+import { buildBenchmarkoorRunUrl } from '../../config';
 
 interface JobDetailDialogProps {
   job: Job;
@@ -221,20 +222,20 @@ export function JobDetailDialog({ job, template, isOpen, onClose }: JobDetailDia
       {/* Dialog */}
       <div className="relative w-full max-w-2xl max-h-[85vh] mx-4 flex flex-col rounded-sm border border-zinc-800 bg-zinc-900 shadow-xl">
         {/* Header */}
-        <div className="flex items-center justify-between border-b border-zinc-800 px-4 py-3 shrink-0">
-          <div className="flex items-center gap-3">
-            <span className={`inline-flex items-center gap-1.5 rounded-sm px-2 py-0.5 text-xs font-medium ${job.paused ? 'bg-zinc-500/10 text-zinc-400' : colors.bg + ' ' + colors.text}`}>
+        <div className="flex items-start justify-between gap-2 border-b border-zinc-800 px-4 py-3 shrink-0">
+          <div className="flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1">
+            <span className={`inline-flex shrink-0 items-center gap-1.5 rounded-sm px-2 py-0.5 text-xs font-medium ${job.paused ? 'bg-zinc-500/10 text-zinc-400' : colors.bg + ' ' + colors.text}`}>
               <span className={`size-1.5 rounded-full ${job.paused ? 'bg-zinc-400' : colors.dot}`} />
               {job.paused ? 'paused' : job.status}
             </span>
-            <h2 className="text-lg font-semibold text-zinc-100">
+            <h2 className="min-w-0 break-words text-lg font-semibold text-zinc-100">
               {job.name ?? template?.name ?? job.template_id}
             </h2>
-            <span className="text-sm text-zinc-500">#{job.position}</span>
+            <span className="shrink-0 text-sm text-zinc-500">#{job.position}</span>
           </div>
           <button
             onClick={onClose}
-            className="rounded-sm p-1 text-zinc-400 hover:bg-zinc-800 hover:text-zinc-100"
+            className="mt-0.5 shrink-0 rounded-sm p-1 text-zinc-400 hover:bg-zinc-800 hover:text-zinc-100"
           >
             <svg className="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
@@ -259,7 +260,7 @@ export function JobDetailDialog({ job, template, isOpen, onClose }: JobDetailDia
                 <span className="text-xs text-zinc-500">Edit fields to override job</span>
               )}
             </div>
-            <div className="grid grid-cols-2 gap-3 text-sm">
+            <div className="grid grid-cols-1 gap-3 text-sm sm:grid-cols-2">
               {/* Owner */}
               <div>
                 <div className="flex items-center gap-2 mb-1">
@@ -414,12 +415,28 @@ export function JobDetailDialog({ job, template, isOpen, onClose }: JobDetailDia
                 </a>
               </div>
             )}
+            {job.run_id && buildBenchmarkoorRunUrl(job.run_id) && (
+              <div className="pt-2 border-t border-zinc-700/50">
+                <span className="text-zinc-500 text-xs">Benchmarkoor</span>
+                <a
+                  href={buildBenchmarkoorRunUrl(job.run_id)!}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="flex items-center gap-1 text-sm text-zinc-200 hover:text-blue-400"
+                >
+                  View benchmark run
+                  <svg className="size-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+                  </svg>
+                </a>
+              </div>
+            )}
           </div>
 
           {/* Timing Info */}
           <div className="rounded-sm border border-zinc-800 bg-zinc-800/30 p-3 space-y-2">
             <h3 className="text-xs font-medium text-zinc-400 uppercase tracking-wide">Timing</h3>
-            <div className="grid grid-cols-2 gap-3 text-sm">
+            <div className="grid grid-cols-1 gap-3 text-sm sm:grid-cols-2">
               <div>
                 <span className="text-zinc-500">Created</span>
                 <p className="text-zinc-200">{formatDateTime(job.created_at)}</p>
diff --git a/ui/src/components/layout/Header.tsx b/ui/src/components/layout/Header.tsx
index b413f1d..beac421 100644
--- a/ui/src/components/layout/Header.tsx
+++ b/ui/src/components/layout/Header.tsx
@@ -5,7 +5,7 @@ import { useAuthStore } from '../../stores/authStore';
 import { StatusIndicator } from './StatusIndicator';
 
 export function Header() {
-  const { sidebarCollapsed, toggleSidebar } = useUIStore();
+  const { sidebarCollapsed, toggleSidebar, toggleMobileNav } = useUIStore();
   const { user, logout } = useAuthStore();
   const [showUserMenu, setShowUserMenu] = useState(false);
   const menuRef = useRef<HTMLDivElement>(null);
@@ -26,10 +26,22 @@ export function Header() {
   };
 
   return (
-    <header className="sticky top-0 z-40 flex h-14 items-center gap-4 border-b border-zinc-800 bg-zinc-950 px-4">
+    <header className="sticky top-0 z-40 flex h-14 items-center gap-2 border-b border-zinc-800 bg-zinc-950 px-3 sm:gap-4 sm:px-4">
+      {/* Mobile: open the overlay nav drawer. */}
+      <button
+        onClick={toggleMobileNav}
+        className="inline-flex size-9 items-center justify-center rounded-sm text-zinc-400 hover:bg-zinc-800 hover:text-zinc-100 lg:hidden"
+        aria-label="Open navigation"
+      >
+        <svg className="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+        </svg>
+      </button>
+
+      {/* Desktop: collapse/expand the pinned sidebar. */}
       <button
         onClick={toggleSidebar}
-        className="inline-flex size-9 items-center justify-center rounded-sm text-zinc-400 hover:bg-zinc-800 hover:text-zinc-100"
+        className="hidden size-9 items-center justify-center rounded-sm text-zinc-400 hover:bg-zinc-800 hover:text-zinc-100 lg:inline-flex"
         aria-label={sidebarCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
       >
         <svg className="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -42,14 +54,14 @@ export function Header() {
         </svg>
       </button>
 
-      <div className="flex flex-1 items-center">
-        <Link to="/" className="flex items-center gap-2 text-lg font-semibold text-zinc-100 hover:text-white">
-          <img src="/images/dispatchoor_logo_white.png" alt="Dispatchoor" className="h-8" />
-          Dispatchoor
+      <div className="flex min-w-0 flex-1 items-center">
+        <Link to="/" className="flex min-w-0 items-center gap-2 text-lg font-semibold text-zinc-100 hover:text-white">
+          <img src="/images/dispatchoor_logo_white.png" alt="Dispatchoor" className="h-8 shrink-0" />
+          <span className="truncate">Dispatchoor</span>
         </Link>
       </div>
 
-      <div className="flex items-center gap-3">
+      <div className="flex items-center gap-1 sm:gap-3">
         {/* System status indicator */}
         <StatusIndicator />
 
@@ -93,16 +105,16 @@ export function Header() {
               onClick={() => setShowUserMenu(!showUserMenu)}
               className="flex items-center gap-2 rounded-sm px-2 py-1.5 text-zinc-300 hover:bg-zinc-800"
             >
-              <div className="flex size-7 items-center justify-center rounded-full bg-zinc-700 text-sm font-medium uppercase">
+              <div className="flex size-7 shrink-0 items-center justify-center rounded-full bg-zinc-700 text-sm font-medium uppercase">
                 {user.username.charAt(0)}
               </div>
-              <span className="text-sm">{user.username}</span>
+              <span className="hidden text-sm sm:inline">{user.username}</span>
               {user.role === 'admin' && (
-                <span className="rounded-xs bg-amber-500/20 px-1.5 py-0.5 text-xs text-amber-400">
+                <span className="hidden rounded-xs bg-amber-500/20 px-1.5 py-0.5 text-xs text-amber-400 sm:inline">
                   admin
                 </span>
               )}
-              <svg className="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <svg className="size-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path
                   strokeLinecap="round"
                   strokeLinejoin="round"
diff --git a/ui/src/components/layout/Layout.tsx b/ui/src/components/layout/Layout.tsx
index 17152ab..105a1b7 100644
--- a/ui/src/components/layout/Layout.tsx
+++ b/ui/src/components/layout/Layout.tsx
@@ -17,7 +17,7 @@ export function Layout() {
       <Sidebar />
       <main
         className={`transition-all duration-200 ${
-          sidebarCollapsed ? 'ml-0' : 'ml-64'
+          sidebarCollapsed ? 'lg:ml-0' : 'lg:ml-64'
         }`}
       >
         {isFullBleed ? (
diff --git a/ui/src/components/layout/Sidebar.tsx b/ui/src/components/layout/Sidebar.tsx
index 43f274a..e08e6c5 100644
--- a/ui/src/components/layout/Sidebar.tsx
+++ b/ui/src/components/layout/Sidebar.tsx
@@ -3,102 +3,105 @@ import { useGroups } from '../../hooks/useGroups';
 import { useUIStore } from '../../stores/uiStore';
 
 export function Sidebar() {
-  const { sidebarCollapsed } = useUIStore();
+  const { sidebarCollapsed, mobileNavOpen, setMobileNavOpen } = useUIStore();
   const { data: groups, isLoading } = useGroups();
 
-  if (sidebarCollapsed) {
-    return null;
-  }
+  // Close the mobile drawer after a navigation. Harmless on desktop (already closed).
+  const closeMobileNav = () => setMobileNavOpen(false);
 
-  return (
-    <aside className="fixed inset-y-0 left-0 z-30 w-64 border-r border-zinc-800 bg-zinc-900 pt-14">
-      <nav className="flex h-full flex-col gap-2 p-4">
-        <NavLink
-          to="/"
-          className={({ isActive }) =>
-            `flex items-center gap-3 rounded-sm px-3 py-2 text-sm font-medium transition-colors ${
-              isActive
-                ? 'bg-blue-500/20 text-blue-400'
-                : 'text-zinc-300 hover:bg-zinc-800 hover:text-zinc-100'
-            }`
-          }
-          end
-        >
-          <svg className="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={2}
-              d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
-            />
-          </svg>
-          Dashboard
-        </NavLink>
+  const linkClass = (isActive: boolean) =>
+    `flex items-center gap-3 rounded-sm px-3 py-2 text-sm font-medium transition-colors ${
+      isActive
+        ? 'bg-blue-500/20 text-blue-400'
+        : 'text-zinc-300 hover:bg-zinc-800 hover:text-zinc-100'
+    }`;
 
-        <div className="mt-4">
-          <h3 className="px-3 text-xs font-semibold uppercase tracking-wider text-zinc-500">
-            Groups
-          </h3>
-          <div className="mt-2 space-y-1">
-            {isLoading ? (
-              <div className="px-3 py-2 text-sm text-zinc-500">Loading...</div>
-            ) : groups && groups.length > 0 ? (
-              groups.map((group) => (
-                <NavLink
-                  key={group.id}
-                  to={`/groups/${group.id}`}
-                  className={({ isActive }) =>
-                    `flex items-center justify-between rounded-sm px-3 py-2 text-sm transition-colors ${
-                      isActive
-                        ? 'bg-blue-500/20 text-blue-400'
-                        : 'text-zinc-300 hover:bg-zinc-800 hover:text-zinc-100'
-                    }`
-                  }
-                >
-                  <span className="truncate">{group.name}</span>
-                  <div className="flex items-center gap-1.5">
-                    {group.running_jobs > 0 && (
-                      <span className="inline-flex items-center justify-center rounded-full bg-green-500/20 px-2 py-0.5 text-xs font-medium text-green-400">
-                        {group.running_jobs}
-                      </span>
-                    )}
-                    {group.queued_jobs > 0 && (
-                      <span className="inline-flex items-center justify-center rounded-full bg-amber-500/20 px-2 py-0.5 text-xs font-medium text-amber-400">
-                        {group.queued_jobs}
-                      </span>
-                    )}
-                  </div>
-                </NavLink>
-              ))
-            ) : (
-              <div className="px-3 py-2 text-sm text-zinc-500">No groups configured</div>
-            )}
-          </div>
-        </div>
+  return (
+    <>
+      {/* Backdrop: only on mobile while the drawer is open. */}
+      {mobileNavOpen && (
+        <div
+          className="fixed inset-0 z-20 bg-black/50 lg:hidden"
+          onClick={closeMobileNav}
+          aria-hidden="true"
+        />
+      )}
 
-        <div className="mt-4">
-          <NavLink
-            to="/runners"
-            className={({ isActive }) =>
-              `flex items-center gap-3 rounded-sm px-3 py-2 text-sm font-medium transition-colors ${
-                isActive
-                  ? 'bg-blue-500/20 text-blue-400'
-                  : 'text-zinc-300 hover:bg-zinc-800 hover:text-zinc-100'
-              }`
-            }
-          >
-            <svg className="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <aside
+        className={`fixed inset-y-0 left-0 z-30 w-64 border-r border-zinc-800 bg-zinc-900 pt-14 transition-transform duration-200 ease-in-out ${
+          mobileNavOpen ? 'translate-x-0' : '-translate-x-full'
+        } ${sidebarCollapsed ? 'lg:-translate-x-full' : 'lg:translate-x-0'}`}
+      >
+        <nav className="flex h-full flex-col gap-2 overflow-y-auto p-4">
+          <NavLink to="/" onClick={closeMobileNav} className={({ isActive }) => linkClass(isActive)} end>
+            <svg className="size-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path
                 strokeLinecap="round"
                 strokeLinejoin="round"
                 strokeWidth={2}
-                d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"
+                d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
               />
             </svg>
-            All Runners
+            Dashboard
           </NavLink>
-        </div>
-      </nav>
-    </aside>
+
+          <div className="mt-4">
+            <h3 className="px-3 text-xs font-semibold uppercase tracking-wider text-zinc-500">
+              Groups
+            </h3>
+            <div className="mt-2 space-y-1">
+              {isLoading ? (
+                <div className="px-3 py-2 text-sm text-zinc-500">Loading...</div>
+              ) : groups && groups.length > 0 ? (
+                groups.map((group) => (
+                  <NavLink
+                    key={group.id}
+                    to={`/groups/${group.id}`}
+                    onClick={closeMobileNav}
+                    className={({ isActive }) =>
+                      `flex items-center justify-between rounded-sm px-3 py-2 text-sm transition-colors ${
+                        isActive
+                          ? 'bg-blue-500/20 text-blue-400'
+                          : 'text-zinc-300 hover:bg-zinc-800 hover:text-zinc-100'
+                      }`
+                    }
+                  >
+                    <span className="truncate">{group.name}</span>
+                    <div className="flex items-center gap-1.5">
+                      {group.running_jobs > 0 && (
+                        <span className="inline-flex items-center justify-center rounded-full bg-green-500/20 px-2 py-0.5 text-xs font-medium text-green-400">
+                          {group.running_jobs}
+                        </span>
+                      )}
+                      {group.queued_jobs > 0 && (
+                        <span className="inline-flex items-center justify-center rounded-full bg-amber-500/20 px-2 py-0.5 text-xs font-medium text-amber-400">
+                          {group.queued_jobs}
+                        </span>
+                      )}
+                    </div>
+                  </NavLink>
+                ))
+              ) : (
+                <div className="px-3 py-2 text-sm text-zinc-500">No groups configured</div>
+              )}
+            </div>
+          </div>
+
+          <div className="mt-4">
+            <NavLink to="/runners" onClick={closeMobileNav} className={({ isActive }) => linkClass(isActive)}>
+              <svg className="size-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"
+                />
+              </svg>
+              All Runners
+            </NavLink>
+          </div>
+        </nav>
+      </aside>
+    </>
   );
 }
diff --git a/ui/src/components/layout/StatusIndicator.tsx b/ui/src/components/layout/StatusIndicator.tsx
index d32cb33..d7d0bdb 100644
--- a/ui/src/components/layout/StatusIndicator.tsx
+++ b/ui/src/components/layout/StatusIndicator.tsx
@@ -81,9 +81,9 @@ export function StatusIndicator() {
         onClick={() => setShowDropdown(!showDropdown)}
         className="flex items-center gap-1.5 rounded-sm px-2 py-1 text-zinc-400 hover:bg-zinc-800 hover:text-zinc-300"
       >
-        <div className={`size-2 rounded-full ${getStatusColor(overallStatus)}`} />
-        <span className="text-xs">{statusLabel}</span>
-        <svg className="size-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <div className={`size-2 shrink-0 rounded-full ${getStatusColor(overallStatus)}`} />
+        <span className="hidden text-xs sm:inline">{statusLabel}</span>
+        <svg className="size-3 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
         </svg>
       </button>
diff --git a/ui/src/config.ts b/ui/src/config.ts
index dfc391c..5dacf9b 100644
--- a/ui/src/config.ts
+++ b/ui/src/config.ts
@@ -1,11 +1,21 @@
 export interface AppConfig {
   apiUrl: string;
+  // Base URL for Benchmarkoor (e.g. https://benchmarkoor.core.ethpandaops.io).
+  // When set, jobs with a GitHub run_id display a link to the corresponding
+  // benchmark run, filtered via the github.run_id metadata label.
+  benchmarkoorUrl?: string;
 }
 
 const defaultConfig: AppConfig = {
   apiUrl: '/api/v1',
 };
 
+export function buildBenchmarkoorRunUrl(runId: number | string): string | undefined {
+  const base = config.benchmarkoorUrl?.replace(/\/+$/, '');
+  if (!base) return undefined;
+  return `${base}/runs?labels=${encodeURIComponent('github.run_id')}:${encodeURIComponent(String(runId))}`;
+}
+
 let config: AppConfig = defaultConfig;
 let configLoaded = false;
 let configPromise: Promise<AppConfig> | null = null;
diff --git a/ui/src/pages/GroupPage.tsx b/ui/src/pages/GroupPage.tsx
index 12ce4af..247addc 100644
--- a/ui/src/pages/GroupPage.tsx
+++ b/ui/src/pages/GroupPage.tsx
@@ -863,7 +863,7 @@ export function GroupPage() {
   return (
     <div className="space-y-6">
       {/* Header */}
-      <div className="flex items-start justify-between">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
         <div>
           <div className="flex items-center gap-2">
             <h1 className="text-2xl font-bold text-zinc-100">{group.name}</h1>
@@ -888,7 +888,7 @@ export function GroupPage() {
           </div>
         </div>
         {isAdmin && (
-          <div className="flex gap-2">
+          <div className="flex shrink-0 flex-wrap gap-2">
             {group.paused ? (
               <button
                 onClick={() => unpauseGroupMutation.mutate()}
@@ -1012,7 +1012,7 @@ export function GroupPage() {
           {/* Content */}
           {activeTab === 'queue' ? (
             <LayoutGroup>
-              <div className="grid gap-6 lg:grid-cols-2">
+              <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
                 {/* Pending jobs with drag-and-drop */}
                 <div>
                   <div className="mb-3 flex items-center justify-between">
@@ -1548,17 +1548,18 @@ export function GroupPage() {
               )}
 
               {filteredTemplates.length > 0 ? (
-                <div className="grid gap-3">
+                <div className="grid grid-cols-1 gap-3">
                   {filteredTemplates.map((template) => (
                     <div
                       key={template.id}
-                      className={`rounded-sm border bg-zinc-900 p-4 ${
+                      className={`@container min-w-0 rounded-sm border bg-zinc-900 p-4 ${
                         templateSelectionMode && selectedTemplateIds.has(template.id)
                           ? 'border-blue-500/50 ring-1 ring-blue-500/20'
                           : 'border-zinc-800'
                       }`}
                     >
-                      <div className="flex items-start justify-between gap-3">
+                      <div className="flex flex-col gap-3 @md:flex-row @md:items-start @md:justify-between">
+                        <div className="flex min-w-0 items-start gap-3">
                         {/* Checkbox for selection mode */}
                         {templateSelectionMode && template.in_config && (
                           <input
@@ -1569,7 +1570,7 @@ export function GroupPage() {
                           />
                         )}
                         <div className="min-w-0 flex-1">
-                          <div className="flex items-center gap-2">
+                          <div className="flex flex-wrap items-center gap-2">
                             <h4 className="text-sm font-medium text-zinc-200">
                               {template.name}
                             </h4>
@@ -1640,7 +1641,8 @@ export function GroupPage() {
                             </a>
                           </div>
                         </div>
-                        <div className="flex shrink-0 flex-col items-end gap-2">
+                        </div>
+                        <div className="flex shrink-0 flex-wrap items-center gap-2 @md:flex-col @md:items-end">
                           {autoRequeueTemplateIds.has(template.id) && (
                             <span className="inline-flex items-center gap-1 rounded-sm bg-purple-500/20 px-1.5 py-0.5 text-xs text-purple-400">
                               <svg className="size-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -1788,7 +1790,7 @@ export function GroupPage() {
 
       {/* Bulk Action Bars */}
       {selectedTemplateIds.size > 0 && (
-        <div className="fixed bottom-4 left-1/2 z-50 flex -translate-x-1/2 items-center gap-3 rounded-xs border border-zinc-700 bg-zinc-900 px-4 py-2 shadow-lg">
+        <div className="fixed bottom-4 inset-x-2 z-50 flex flex-wrap items-center justify-center gap-2 rounded-xs border border-zinc-700 bg-zinc-900 px-3 py-2 shadow-lg sm:inset-x-auto sm:left-1/2 sm:-translate-x-1/2 sm:flex-nowrap sm:gap-3 sm:px-4">
           <span className="text-sm text-zinc-300">{selectedTemplateIds.size} selected</span>
           <div className="h-4 w-px bg-zinc-700" />
           <button
@@ -1816,7 +1818,7 @@ export function GroupPage() {
       )}
 
       {selectedRunningIds.size > 0 && (
-        <div className="fixed bottom-4 left-1/2 z-50 flex -translate-x-1/2 items-center gap-3 rounded-xs border border-zinc-700 bg-zinc-900 px-4 py-2 shadow-lg">
+        <div className="fixed bottom-4 inset-x-2 z-50 flex flex-wrap items-center justify-center gap-2 rounded-xs border border-zinc-700 bg-zinc-900 px-3 py-2 shadow-lg sm:inset-x-auto sm:left-1/2 sm:-translate-x-1/2 sm:flex-nowrap sm:gap-3 sm:px-4">
           <span className="text-sm text-zinc-300">{selectedRunningIds.size} selected</span>
           <div className="h-4 w-px bg-zinc-700" />
           <button
@@ -1850,7 +1852,7 @@ export function GroupPage() {
       )}
 
       {selectedPendingIds.size > 0 && (
-        <div className="fixed bottom-4 left-1/2 z-50 flex -translate-x-1/2 items-center gap-3 rounded-xs border border-zinc-700 bg-zinc-900 px-4 py-2 shadow-lg">
+        <div className="fixed bottom-4 inset-x-2 z-50 flex flex-wrap items-center justify-center gap-2 rounded-xs border border-zinc-700 bg-zinc-900 px-3 py-2 shadow-lg sm:inset-x-auto sm:left-1/2 sm:-translate-x-1/2 sm:flex-nowrap sm:gap-3 sm:px-4">
           <span className="text-sm text-zinc-300">{selectedPendingIds.size} selected</span>
           <div className="h-4 w-px bg-zinc-700" />
           <button
diff --git a/ui/src/pages/RunnersPage.tsx b/ui/src/pages/RunnersPage.tsx
index e82a3cf..4c58bf4 100644
--- a/ui/src/pages/RunnersPage.tsx
+++ b/ui/src/pages/RunnersPage.tsx
@@ -58,9 +58,9 @@ export function RunnersPage() {
 
   return (
     <div className="space-y-6">
-      <div className="flex items-center justify-between">
+      <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
         <h1 className="text-2xl font-bold text-zinc-100">All Runners</h1>
-        <div className="flex items-center gap-4 text-sm">
+        <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-sm">
           <span className="text-zinc-400">
             <span className="font-semibold text-green-400">{idleCount}</span> idle
           </span>
@@ -89,8 +89,8 @@ export function RunnersPage() {
           ))}
         </div>
       ) : runners && runners.length > 0 ? (
-        <div className="overflow-hidden rounded-sm border border-zinc-800 bg-zinc-900">
-          <table className="w-full">
+        <div className="overflow-x-auto rounded-sm border border-zinc-800 bg-zinc-900">
+          <table className="w-full min-w-[44rem]">
             <thead className="border-b border-zinc-800 bg-zinc-900/50">
               <tr className="text-left text-sm font-medium text-zinc-400">
                 <th className="px-4 py-3">Name</th>
diff --git a/ui/src/stores/uiStore.ts b/ui/src/stores/uiStore.ts
index ad6001d..ca58a3a 100644
--- a/ui/src/stores/uiStore.ts
+++ b/ui/src/stores/uiStore.ts
@@ -2,10 +2,15 @@ import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 
 interface UIState {
+  // Desktop preference: whether the pinned sidebar is collapsed (persisted).
   sidebarCollapsed: boolean;
+  // Mobile-only: whether the overlay nav drawer is open (transient, not persisted).
+  mobileNavOpen: boolean;
   darkMode: boolean | null; // null = system preference
   toggleSidebar: () => void;
   setSidebarCollapsed: (collapsed: boolean) => void;
+  toggleMobileNav: () => void;
+  setMobileNavOpen: (open: boolean) => void;
   setDarkMode: (mode: boolean | null) => void;
 }
 
@@ -13,14 +18,23 @@ export const useUIStore = create<UIState>()(
   persist(
     (set) => ({
       sidebarCollapsed: false,
+      mobileNavOpen: false,
       darkMode: null,
       toggleSidebar: () =>
         set((state) => ({ sidebarCollapsed: !state.sidebarCollapsed })),
       setSidebarCollapsed: (collapsed) => set({ sidebarCollapsed: collapsed }),
+      toggleMobileNav: () =>
+        set((state) => ({ mobileNavOpen: !state.mobileNavOpen })),
+      setMobileNavOpen: (open) => set({ mobileNavOpen: open }),
       setDarkMode: (mode) => set({ darkMode: mode }),
     }),
     {
       name: 'dispatchoor-ui',
+      // Only persist durable preferences; the mobile drawer is transient.
+      partialize: (state) => ({
+        sidebarCollapsed: state.sidebarCollapsed,
+        darkMode: state.darkMode,
+      }),
     }
   )
 );