diff --git a/ui/src/app/panels.service.ts b/ui/src/app/panels.service.ts
index 93e63bb..e172c9c 100644
--- a/ui/src/app/panels.service.ts
+++ b/ui/src/app/panels.service.ts
@@ -274,6 +274,18 @@ export class PanelsService {
     }
   }
 
+  /** Reorder a tab (drag & drop). Order is purely visual; ids stay stable. */
+  moveWorkspace(id: number, toIndex: number): void {
+    this.workspaces.update((list) => {
+      const fromIndex = list.findIndex((w) => w.id === id);
+      if (fromIndex < 0) return list;
+      const next = [...list];
+      const [moved] = next.splice(fromIndex, 1);
+      next.splice(Math.max(0, Math.min(next.length, toIndex)), 0, moved);
+      return next;
+    });
+  }
+
   cycleWorkspace(delta: 1 | -1): void {
     const list = this.workspaces();
     if (list.length < 2) return;
diff --git a/ui/src/app/tab-bar/tab-bar.ts b/ui/src/app/tab-bar/tab-bar.ts
index 406e951..bb1384f 100644
--- a/ui/src/app/tab-bar/tab-bar.ts
+++ b/ui/src/app/tab-bar/tab-bar.ts
@@ -26,10 +26,17 @@ const CONCURRENCY_CHOICES = [2, 3, 4, 6, 8] as const;
       [class.pl-1.5]="!isMacChrome"
       [class.pt-1]="!isMacChrome"
     >
-      @for (ws of panels.workspaces(); track ws.id) {
+      @for (ws of panels.workspaces(); track ws.id; let i = $index) {
         <div
           class="group relative flex max-w-52 items-center rounded-md electrobun-webkit-app-region-no-drag"
           [class.bg-accent]="ws.id === panels.activeWorkspaceId()"
+          [class.opacity-50]="draggedId() === ws.id"
+          [style.box-shadow]="dropIndicatorShadow(i)"
+          draggable="true"
+          (dragstart)="onDragStart($event, ws.id)"
+          (dragover)="onDragOver($event, i)"
+          (drop)="onDrop($event, i)"
+          (dragend)="onDragEnd()"
         >
           <button
             (click)="panels.setActiveWorkspace(ws.id)"
@@ -190,8 +197,56 @@ export class TabBar {
   readonly transferModes = TRANSFER_MODES;
   readonly concurrencyChoices = CONCURRENCY_CHOICES;
 
+  // drag & drop reordering
+  readonly draggedId = signal<number | null>(null);
+  readonly dropTarget = signal<{ index: number; before: boolean } | null>(null);
+
   close(event: MouseEvent, id: number): void {
     event.stopPropagation();
     this.panels.closeWorkspace(id);
   }
+
+  /** Insertion line at the drop position (inset shadow: no layout shift). */
+  dropIndicatorShadow(index: number): string | null {
+    const target = this.dropTarget();
+    if (!target || target.index !== index || this.draggedId() === null) return null;
+    return target.before
+      ? 'inset 2px 0 0 var(--primary)'
+      : 'inset -2px 0 0 var(--primary)';
+  }
+
+  onDragStart(event: DragEvent, id: number): void {
+    this.draggedId.set(id);
+    // WebKit refuses to start a drag without data
+    event.dataTransfer?.setData('text/plain', String(id));
+    if (event.dataTransfer) event.dataTransfer.effectAllowed = 'move';
+  }
+
+  onDragOver(event: DragEvent, index: number): void {
+    if (this.draggedId() === null) return;
+    event.preventDefault();
+    if (event.dataTransfer) event.dataTransfer.dropEffect = 'move';
+    const el = event.currentTarget as HTMLElement;
+    const before = event.clientX < el.getBoundingClientRect().left + el.offsetWidth / 2;
+    this.dropTarget.set({ index, before });
+  }
+
+  onDrop(event: DragEvent, index: number): void {
+    event.preventDefault();
+    const id = this.draggedId();
+    const target = this.dropTarget();
+    this.onDragEnd();
+    if (id === null || !target) return;
+    const list = this.panels.workspaces();
+    const fromIndex = list.findIndex((w) => w.id === id);
+    if (fromIndex < 0) return;
+    let toIndex = target.before ? index : index + 1;
+    if (fromIndex < toIndex) toIndex--; // account for removal before insert
+    if (toIndex !== fromIndex) this.panels.moveWorkspace(id, toIndex);
+  }
+
+  onDragEnd(): void {
+    this.draggedId.set(null);
+    this.dropTarget.set(null);
+  }
 }