diff --git a/src/components/Stopwatch.tsx b/src/components/Stopwatch.tsx
new file mode 100644
index 0000000..2f6f0b3
--- /dev/null
+++ b/src/components/Stopwatch.tsx
@@ -0,0 +1,87 @@
+'use client';
+
+import React from 'react';
+import { useStopwatch } from '@/hooks/useStopwatch';
+
+function formatStopwatch(ms: number): string {
+  const totalSeconds = Math.floor(ms / 1000);
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
+}
+
+const Stopwatch: React.FC = () => {
+  const { status, elapsedMs, start, pause, reset } = useStopwatch();
+  const isRunning = status === 'running';
+
+  return (
+    <div className="stopwatch">
+      <div className="time">{formatStopwatch(elapsedMs)}</div>
+      <div className="buttons">
+        <button type="button" onClick={isRunning ? pause : start}>
+          {isRunning ? 'Stop' : 'Go'}
+        </button>
+        <button type="button" className="reset" onClick={reset}>
+          Reset
+        </button>
+      </div>
+
+      <style jsx>{`
+        .stopwatch {
+          position: absolute;
+          right: 1rem;
+          bottom: 1rem;
+          background: linear-gradient(145deg, #2b2b2b, #202020);
+          border: 1px solid #3a3a3a;
+          border-radius: 14px;
+          padding: 1rem 1.25rem;
+          box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
+          display: flex;
+          align-items: center;
+          gap: 1rem;
+          z-index: 1000;
+          color: #f1f1f1;
+        }
+
+        .time {
+          font-family: 'Courier New', monospace;
+          font-size: 2.2rem;
+          font-weight: 700;
+          letter-spacing: 1.5px;
+          min-width: 5rem;
+          text-align: center;
+        }
+
+        .buttons {
+          display: flex;
+          gap: 0.6rem;
+        }
+
+        button {
+          padding: 0.55rem 1rem;
+          border: none;
+          border-radius: 8px;
+          font-size: 1rem;
+          cursor: pointer;
+          font-weight: 500;
+          color: white;
+          background: #0070f3;
+        }
+
+        button:hover {
+          background: #005fcc;
+        }
+
+        button.reset {
+          background: #555;
+        }
+
+        button.reset:hover {
+          background: #666;
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default Stopwatch;
diff --git a/src/components/panels/TimerCard.tsx b/src/components/panels/TimerCard.tsx
index a5a2ef6..815f52e 100644
--- a/src/components/panels/TimerCard.tsx
+++ b/src/components/panels/TimerCard.tsx
@@ -5,6 +5,30 @@ import { useCountdown } from '@/hooks/useCountdown';
 
 const DEFAULT_PRESET_MS = 4 * 60 * 1000;
 
+type TimerVariant = 'order' | 'ingredient';
+
+const DEFAULT_COLOR = '#00ffcc';
+const FINISHED_COLOR = '#ff5566';
+
+// Ordered smallest-threshold-first so the first match wins.
+const COLOR_THRESHOLDS_MS: Record<TimerVariant, { maxMs: number; color: string }[]> = {
+  order: [
+    { maxMs: 42 * 1000, color: '#ff5566' }, // red
+    { maxMs: 90 * 1000, color: '#ff8c1a' }, // orange
+    { maxMs: 4 * 60 * 1000, color: '#ffcc00' }, // yellow
+  ],
+  ingredient: [
+    { maxMs: 35 * 1000, color: '#ff5566' }, // red
+    { maxMs: 60 * 1000, color: '#ffcc00' }, // yellow
+  ],
+};
+
+function countdownColorFor(variant: TimerVariant, remainingMs: number, isFinished: boolean): string {
+  if (isFinished) return FINISHED_COLOR;
+  const threshold = COLOR_THRESHOLDS_MS[variant].find((t) => remainingMs <= t.maxMs);
+  return threshold?.color ?? DEFAULT_COLOR;
+}
+
 function formatMmSs(ms: number): string {
   const totalSeconds = Math.max(0, Math.round(ms / 1000));
   const minutes = Math.floor(totalSeconds / 60);
@@ -28,9 +52,10 @@ interface TimerCardProps {
   label: string;
   onLabelChange?: (label: string) => void;
   onRemove?: () => void;
+  variant?: TimerVariant;
 }
 
-const TimerCard: React.FC<TimerCardProps> = ({ label, onLabelChange, onRemove }) => {
+const TimerCard: React.FC<TimerCardProps> = ({ label, onLabelChange, onRemove, variant = 'ingredient' }) => {
   const { status, remainingMs, start, pause, resume, reset } = useCountdown();
 
   const [presetMs, setPresetMs] = useState(DEFAULT_PRESET_MS);
@@ -42,13 +67,7 @@ const TimerCard: React.FC<TimerCardProps> = ({ label, onLabelChange, onRemove })
   const isPaused = status === 'paused';
   const isFinished = status === 'finished';
 
-  const countdownColor = isFinished
-    ? '#ff5566'
-    : remainingMs <= 30 * 1000
-      ? '#ff5566'
-      : remainingMs <= 60 * 1000
-        ? '#ffcc00'
-        : '#00ffcc';
+  const countdownColor = countdownColorFor(variant, remainingMs, isFinished);
 
   const handleGo = () => {
     const parsedMs = parseMmSs(inputText);
@@ -165,7 +184,7 @@ const TimerCard: React.FC<TimerCardProps> = ({ label, onLabelChange, onRemove })
         .label-input {
           margin: 0;
           padding: 0.15rem 0.3rem;
-          font-size: 0.95rem;
+          font-size: 1.5rem;
           font-weight: 600;
           color: #eaeaea;
           background: transparent;
diff --git a/src/components/panels/TimerPanel.tsx b/src/components/panels/TimerPanel.tsx
index 48e2be3..4b95f1b 100644
--- a/src/components/panels/TimerPanel.tsx
+++ b/src/components/panels/TimerPanel.tsx
@@ -2,18 +2,14 @@
 
 import React, { useState } from 'react';
 import TimerCard from './TimerCard';
+import Stopwatch from '@/components/Stopwatch';
 
-type TimerGroup = 'orders' | 'other';
-
-const DEFAULT_ORDER_COUNT = 3;
-const DEFAULT_OTHER_COUNT = 2;
-const MIN_TIMERS_PER_GROUP = 1;
-const MAX_TIMERS_PER_GROUP = 20;
-
-const GROUPS: { key: TimerGroup; title: string; addLabel: string }[] = [
-  { key: 'orders', title: 'Orders', addLabel: '+ Add Order Timer' },
-  { key: 'other', title: 'Cooking', addLabel: '+ Add Timer' },
-];
+const DEFAULT_COLUMN_NAMES = ['Orders', 'Cooking'];
+const DEFAULT_TIMERS_PER_COLUMN = [3, 2];
+const MIN_TIMERS_PER_COLUMN = 1;
+const MAX_TIMERS_PER_COLUMN = 20;
+const MIN_COLUMNS = 1;
+const MAX_COLUMNS = 10;
 
 function smallestFreeId(ids: number[]): number {
   const used = new Set(ids);
@@ -22,46 +18,115 @@ function smallestFreeId(ids: number[]): number {
   return id;
 }
 
-const initialOrderIds = Array.from({ length: DEFAULT_ORDER_COUNT }, (_, i) => i + 1);
-const initialOtherIds = Array.from(
-  { length: DEFAULT_OTHER_COUNT },
-  (_, i) => DEFAULT_ORDER_COUNT + i + 1,
-);
-const initialIds = [...initialOrderIds, ...initialOtherIds];
+let columnSeq = 0;
+function nextColumnId(): number {
+  columnSeq += 1;
+  return columnSeq;
+}
+
+const initialColumns = DEFAULT_COLUMN_NAMES.map((name, i) => ({
+  id: nextColumnId(),
+  name,
+  count: DEFAULT_TIMERS_PER_COLUMN[i] ?? 1,
+}));
+
+let idCounter = 0;
+const initialTimerIds: Record<number, number[]> = {};
+initialColumns.forEach((column) => {
+  const ids: number[] = [];
+  for (let i = 0; i < column.count; i += 1) {
+    idCounter += 1;
+    ids.push(idCounter);
+  }
+  initialTimerIds[column.id] = ids;
+});
 
 const TimerPanel: React.FC = () => {
-  const [timerIds, setTimerIds] = useState<number[]>(initialIds);
-  const [groups, setGroups] = useState<Record<number, TimerGroup>>(() => ({
-    ...Object.fromEntries(initialOrderIds.map((id) => [id, 'orders' as TimerGroup])),
-    ...Object.fromEntries(initialOtherIds.map((id) => [id, 'other' as TimerGroup])),
-  }));
-  const [labels, setLabels] = useState<Record<number, string>>(() =>
-    Object.fromEntries(initialIds.map((id) => [id, `Timer ${id}`])),
-  );
+  const [columns, setColumns] = useState(initialColumns.map(({ id, name }) => ({ id, name })));
+  const [timerIdsByColumn, setTimerIdsByColumn] = useState<Record<number, number[]>>(initialTimerIds);
+  const [labels, setLabels] = useState<Record<number, string>>(() => {
+    const all: Record<number, string> = {};
+    Object.values(initialTimerIds)
+      .flat()
+      .forEach((id) => {
+        all[id] = `Timer ${id}`;
+      });
+    return all;
+  });
+  const [notes, setNotes] = useState<Record<number, string>>({});
+  const [draggedIndex, setDraggedIndex] = useState<number | null>(null);
+  const [dragOverIndex, setDragOverIndex] = useState<number | null>(null);
 
-  const addTimer = (group: TimerGroup) => {
-    setTimerIds((prev) => {
-      const countInGroup = prev.filter((id) => groups[id] === group).length;
-      if (countInGroup >= MAX_TIMERS_PER_GROUP) return prev;
-      const id = smallestFreeId(prev);
-      setLabels((prevLabels) => ({ ...prevLabels, [id]: `Timer ${id}` }));
-      setGroups((prevGroups) => ({ ...prevGroups, [id]: group }));
-      return [...prev, id].sort((a, b) => a - b);
+  const addColumn = () => {
+    setColumns((prev) => {
+      if (prev.length >= MAX_COLUMNS) return prev;
+      const id = nextColumnId();
+      setTimerIdsByColumn((prevTimers) => ({ ...prevTimers, [id]: [] }));
+      return [...prev, { id, name: `Column ${prev.length + 1}` }];
     });
   };
 
-  const removeTimer = (id: number) => {
-    const group = groups[id];
-    const countInGroup = timerIds.filter((t) => groups[t] === group).length;
-    if (countInGroup <= MIN_TIMERS_PER_GROUP) return;
-
-    setTimerIds((prev) => prev.filter((t) => t !== id));
-    setLabels((prev) => {
+  const removeColumn = (columnId: number) => {
+    setColumns((prev) => {
+      if (prev.length <= MIN_COLUMNS) return prev;
+      return prev.filter((c) => c.id !== columnId);
+    });
+    setTimerIdsByColumn((prev) => {
       const next = { ...prev };
-      delete next[id];
+      delete next[columnId];
+      return next;
+    });
+    setNotes((prev) => {
+      const next = { ...prev };
+      delete next[columnId];
+      return next;
+    });
+  };
+
+  const renameColumn = (columnId: number, name: string) => {
+    setColumns((prev) => prev.map((c) => (c.id === columnId ? { ...c, name } : c)));
+  };
+
+  const setNote = (columnId: number, note: string) => {
+    setNotes((prev) => ({ ...prev, [columnId]: note }));
+  };
+
+  const reorderColumns = (fromIndex: number, toIndex: number) => {
+    setColumns((prev) => {
+      if (fromIndex === toIndex || fromIndex < 0 || toIndex < 0 || fromIndex >= prev.length || toIndex >= prev.length) {
+        return prev;
+      }
+      const next = [...prev];
+      const [moved] = next.splice(fromIndex, 1);
+      next.splice(toIndex, 0, moved);
       return next;
     });
-    setGroups((prev) => {
+  };
+
+  const handleColumnDrop = (index: number) => {
+    if (draggedIndex !== null) reorderColumns(draggedIndex, index);
+    setDraggedIndex(null);
+    setDragOverIndex(null);
+  };
+
+  const addTimer = (columnId: number) => {
+    setTimerIdsByColumn((prev) => {
+      const idsInColumn = prev[columnId] ?? [];
+      if (idsInColumn.length >= MAX_TIMERS_PER_COLUMN) return prev;
+      const allIds = Object.values(prev).flat();
+      const id = smallestFreeId(allIds);
+      setLabels((prevLabels) => ({ ...prevLabels, [id]: `Timer ${id}` }));
+      return { ...prev, [columnId]: [...idsInColumn, id] };
+    });
+  };
+
+  const removeTimer = (columnId: number, id: number) => {
+    setTimerIdsByColumn((prev) => {
+      const idsInColumn = prev[columnId] ?? [];
+      if (idsInColumn.length <= MIN_TIMERS_PER_COLUMN) return prev;
+      return { ...prev, [columnId]: idsInColumn.filter((t) => t !== id) };
+    });
+    setLabels((prev) => {
       const next = { ...prev };
       delete next[id];
       return next;
@@ -78,38 +143,120 @@ const TimerPanel: React.FC = () => {
         <h3>Multi-Timer</h3>
       </div>
 
-      {GROUPS.map(({ key, title, addLabel }) => {
-        const idsInGroup = timerIds.filter((id) => groups[id] === key);
-        return (
-          <div className="timer-section" key={key}>
-            <div className="section-header">
-              <h4>{title}</h4>
-              <button
-                type="button"
-                className="add-btn"
-                onClick={() => addTimer(key)}
-                disabled={idsInGroup.length >= MAX_TIMERS_PER_GROUP}
+      <div
+        className="columns-track"
+        style={{ gridTemplateColumns: `repeat(${columns.length}, 220px) 140px` }}
+      >
+        {columns.map((column, index) => {
+          const idsInColumn = timerIdsByColumn[column.id] ?? [];
+          const columnStyle = index > 0 ? { borderLeft: '1px solid #333', paddingLeft: '1rem' } : undefined;
+          const isDragTarget = draggedIndex !== null && draggedIndex !== index;
+          return (
+            <React.Fragment key={column.id}>
+              <div
+                className={`column-timer-cell${isDragTarget && dragOverIndex === index ? ' drag-over' : ''}`}
+                style={{ gridColumn: index + 1, gridRow: 1, ...columnStyle }}
+                onDragOver={(e) => {
+                  if (isDragTarget) e.preventDefault();
+                }}
+                onDragEnter={() => {
+                  if (isDragTarget) setDragOverIndex(index);
+                }}
+                onDragLeave={() => {
+                  setDragOverIndex((prev) => (prev === index ? null : prev));
+                }}
+                onDrop={(e) => {
+                  e.preventDefault();
+                  handleColumnDrop(index);
+                }}
               >
-                {addLabel}
-              </button>
-            </div>
-
-            <div className="timer-grid">
-              {idsInGroup.map((id) => (
+                <div
+                  className="drag-handle"
+                  draggable
+                  title="Drag to reorder column"
+                  aria-label={`Reorder ${column.name}`}
+                  onDragStart={(e) => {
+                    setDraggedIndex(index);
+                    e.dataTransfer.effectAllowed = 'move';
+                    e.dataTransfer.setData('text/plain', String(index));
+                  }}
+                  onDragEnd={() => {
+                    setDraggedIndex(null);
+                    setDragOverIndex(null);
+                  }}
+                >
+                  ⠿
+                </div>
                 <TimerCard
-                  key={id}
-                  label={labels[id] ?? `Timer ${id}`}
-                  onLabelChange={(label) => renameTimer(id, label)}
-                  onRemove={idsInGroup.length > MIN_TIMERS_PER_GROUP ? () => removeTimer(id) : undefined}
+                  label={column.name}
+                  onLabelChange={(name) => renameColumn(column.id, name)}
+                  onRemove={columns.length > MIN_COLUMNS ? () => removeColumn(column.id) : undefined}
+                  variant="order"
+                />
+                <textarea
+                  className="note-input"
+                  value={notes[column.id] ?? ''}
+                  placeholder="Add a note…"
+                  aria-label={`Note for ${column.name}`}
+                  rows={2}
+                  onChange={(e) => setNote(column.id, e.target.value)}
                 />
-              ))}
-            </div>
-          </div>
-        );
-      })}
+              </div>
+
+              <div
+                className="column-content-cell"
+                style={{ gridColumn: index + 1, gridRow: 3, ...columnStyle }}
+                onDragOver={(e) => {
+                  if (isDragTarget) e.preventDefault();
+                }}
+                onDrop={(e) => {
+                  e.preventDefault();
+                  handleColumnDrop(index);
+                }}
+              >
+                <button
+                  type="button"
+                  className="add-btn"
+                  onClick={() => addTimer(column.id)}
+                  disabled={idsInColumn.length >= MAX_TIMERS_PER_COLUMN}
+                >
+                  + Add Timer
+                </button>
+
+                <div className="timer-stack">
+                  {idsInColumn.map((id) => (
+                    <TimerCard
+                      key={id}
+                      label={labels[id] ?? `Timer ${id}`}
+                      onLabelChange={(label) => renameTimer(id, label)}
+                      onRemove={idsInColumn.length > MIN_TIMERS_PER_COLUMN ? () => removeTimer(column.id, id) : undefined}
+                      variant="ingredient"
+                    />
+                  ))}
+                </div>
+              </div>
+            </React.Fragment>
+          );
+        })}
+
+        <div className="column-divider" style={{ gridColumn: `1 / ${columns.length + 1}`, gridRow: 2 }} />
+
+        <button
+          type="button"
+          className="add-column-btn"
+          style={{ gridColumn: columns.length + 1, gridRow: '1 / 4' }}
+          onClick={addColumn}
+          disabled={columns.length >= MAX_COLUMNS}
+        >
+          + Add Column
+        </button>
+      </div>
+
+      <Stopwatch />
 
       <style jsx>{`
         .panel {
+          position: relative;
           background: radial-gradient(circle at top, #2a2a2a, #151515);
           color: #f1f1f1;
           padding: 1rem;
@@ -131,32 +278,86 @@ const TimerPanel: React.FC = () => {
           letter-spacing: 0.5px;
         }
 
-        .timer-section {
-          display: flex;
-          flex-direction: column;
-          min-height: 0;
+        .columns-track {
+          display: grid;
+          grid-template-rows: auto 0.9rem 1fr;
+          column-gap: 1rem;
+          align-items: start;
           flex: 1;
+          min-height: 0;
+          overflow-x: auto;
+          overflow-y: hidden;
+          padding-bottom: 0.25rem;
         }
 
-        .timer-section + .timer-section {
-          margin-top: 1.25rem;
-          padding-top: 1rem;
-          border-top: 1px solid #333;
+        .column-timer-cell {
+          min-width: 0;
+          border-radius: 8px;
+          outline: 2px solid transparent;
+          outline-offset: 4px;
+          transition: outline-color 0.15s ease;
         }
 
-        .section-header {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          margin-bottom: 0.6rem;
+        .column-timer-cell.drag-over {
+          outline-color: #0070f3;
         }
 
-        h4 {
-          margin: 0;
-          font-size: 0.95rem;
-          letter-spacing: 0.4px;
+        .drag-handle {
+          text-align: center;
+          color: #777;
+          font-size: 1rem;
+          line-height: 1;
+          padding: 0.2rem 0 0.35rem;
+          cursor: grab;
+          user-select: none;
+        }
+
+        .drag-handle:hover {
+          color: #ccc;
+        }
+
+        .note-input {
+          margin-top: 0.4rem;
+          width: 100%;
+          box-sizing: border-box;
+          resize: vertical;
+          padding: 0.35rem 0.5rem;
+          font-size: 1.4rem;
+          line-height: 1.4;
+          font-family: inherit;
           color: #bbb;
-          text-transform: uppercase;
+          background: transparent;
+          border: 1px solid #333;
+          border-radius: 6px;
+        }
+
+        .note-input:hover {
+          border-color: #444;
+        }
+
+        .note-input:focus {
+          outline: none;
+          background: #111;
+          border-color: #0070f3;
+          color: #eaeaea;
+        }
+
+        .note-input::placeholder {
+          color: #666;
+        }
+
+        .column-divider {
+          align-self: center;
+          height: 2px;
+          background: #0070f3;
+        }
+
+        .column-content-cell {
+          display: flex;
+          flex-direction: column;
+          min-height: 0;
+          max-height: 100%;
+          min-width: 0;
         }
 
         .add-btn {
@@ -168,6 +369,8 @@ const TimerPanel: React.FC = () => {
           font-weight: 500;
           color: white;
           background: #0070f3;
+          white-space: nowrap;
+          margin-bottom: 0.75rem;
         }
 
         .add-btn:hover:enabled {
@@ -180,12 +383,36 @@ const TimerPanel: React.FC = () => {
           cursor: not-allowed;
         }
 
-        .timer-grid {
-          display: grid;
-          grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-          gap: 1rem;
+        .timer-stack {
+          display: flex;
+          flex-direction: column;
+          gap: 0.75rem;
           overflow-y: auto;
           padding-right: 0.25rem;
+          min-height: 0;
+        }
+
+        .add-column-btn {
+          height: 100%;
+          padding: 0.5rem 0.75rem;
+          border: 1px dashed #444;
+          border-radius: 6px;
+          font-size: 0.85rem;
+          cursor: pointer;
+          font-weight: 500;
+          color: #ccc;
+          background: transparent;
+        }
+
+        .add-column-btn:hover:enabled {
+          border-color: #0070f3;
+          color: #fff;
+        }
+
+        .add-column-btn:disabled {
+          color: #555;
+          border-color: #333;
+          cursor: not-allowed;
         }
       `}</style>
     </div>
diff --git a/src/hooks/useStopwatch.ts b/src/hooks/useStopwatch.ts
new file mode 100644
index 0000000..eefaa7d
--- /dev/null
+++ b/src/hooks/useStopwatch.ts
@@ -0,0 +1,59 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+
+export type StopwatchStatus = 'idle' | 'running' | 'paused';
+
+const TICK_INTERVAL_MS = 200;
+
+export interface UseStopwatchResult {
+  status: StopwatchStatus;
+  elapsedMs: number;
+  start: () => void;
+  pause: () => void;
+  reset: () => void;
+}
+
+export function useStopwatch(): UseStopwatchResult {
+  const [status, setStatus] = useState<StopwatchStatus>('idle');
+  const [elapsedMs, setElapsedMs] = useState(0);
+  const startTimeRef = useRef<number | null>(null);
+  const baseElapsedRef = useRef(0);
+
+  useEffect(() => {
+    if (status !== 'running') return;
+
+    const tick = () => {
+      const now = Date.now();
+      setElapsedMs(baseElapsedRef.current + (now - (startTimeRef.current ?? now)));
+    };
+
+    tick();
+    const intervalId = window.setInterval(tick, TICK_INTERVAL_MS);
+
+    return () => window.clearInterval(intervalId);
+  }, [status]);
+
+  const start = () => {
+    startTimeRef.current = Date.now();
+    setStatus('running');
+  };
+
+  const pause = () => {
+    setStatus((prev) => {
+      if (prev !== 'running') return prev;
+      baseElapsedRef.current += Date.now() - (startTimeRef.current ?? Date.now());
+      startTimeRef.current = null;
+      return 'paused';
+    });
+  };
+
+  const reset = () => {
+    startTimeRef.current = null;
+    baseElapsedRef.current = 0;
+    setElapsedMs(0);
+    setStatus('idle');
+  };
+
+  return { status, elapsedMs, start, pause, reset };
+}