diff --git a/src/App.jsx b/src/App.jsx
index ba25c6c..752fc09 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -25,16 +25,16 @@ export default function App() {
       const progress = clamp(cd.remainingMs / total, 0, 1);
       return {
         ringProgress: progress,
-        waterLevel: progress,
+        waterLevel: 1 - progress,
         waterVariant: "countdown",
-        title: "倒數",
-        subtitle: `總長 ${formatHMS(cd.totalMs)}`,
+        title: `倒數時長 ${formatHMS(cd.totalMs).slice(0, 5)}`,
+        subtitle: "",
         flashKey: null,
       };
     }
 
     // Stopwatch: make it feel calm by looping visuals each minute
-    const loop = 60 * 1000;
+    const loop = 10 * 1000;
     const phase = (sw.elapsedMs % loop) / loop;
     return {
       ringProgress: phase,
@@ -69,7 +69,11 @@ export default function App() {
   };
 
   const onPickPreset = (ms) => {
-    cd.setTotalWhileStopped(ms);
+    cd.addTotalWhileStopped(ms);
+  };
+
+  const onClearPreset = () => {
+    cd.clearTotalWhileStopped();
   };
 
   return (
@@ -87,51 +91,82 @@ export default function App() {
         }} />
       </header>
 
-      <main className="main">
-        <section className="card breathe" aria-label="Timer">
-          <div className="vizWrap">
-            <Ring progress={viz.ringProgress} />
-            {mode === "stopwatch" && viz.flashKey !== null ? (
-              <div className="ringFlash" key={viz.flashKey} />
-            ) : null}
-            <WaterGauge level={viz.waterLevel} variant={viz.waterVariant} />
-            <div className="vizOverlay">
-              <div className="modeTitle">{viz.title}</div>
-              <TimeDisplay primary={primaryTime} secondary={viz.subtitle} />
-            </div>
+      <main className={`main mode-${mode}`}>
+        {mode === "stopwatch" ? (
+          <div className="stopwatchGrid">
+            <section className="card breathe timerCard" aria-label="Stopwatch">
+              <div className="vizWrap">
+                <Ring progress={viz.ringProgress} size={300} />
+                <WaterGauge level={viz.waterLevel} variant={viz.waterVariant} size={260} />
+                {mode === "stopwatch" && viz.flashKey !== null ? (
+                  <div className="ringFlash" key={viz.flashKey} />
+                ) : null}
+                <div className="vizOverlay">
+                  <div className="modeTitle">{viz.title}</div>
+                  <TimeDisplay primary={primaryTime} secondary={viz.subtitle} />
+                </div>
+              </div>
+
+              <Controls
+                isRunning={active.isRunning}
+                onStart={active.start}
+                onPause={active.pause}
+                onReset={onReset}
+                extraLeft={
+                  <button
+                    className="btn btnLap"
+                    onClick={onLap}
+                    disabled={!sw.isRunning}
+                  >
+                    記錄
+                  </button>
+                }
+              />
+            </section>
+
+            <LapList laps={laps} />
           </div>
+        ) : (
+          <div className="stopwatchGrid">
+            <section className="card breathe timerCard countdownCard" aria-label="Countdown">
+              <div className="vizWrap">
+                <Ring progress={viz.ringProgress} size={300} />
+                <WaterGauge level={viz.waterLevel} variant={viz.waterVariant} size={260} />
+                <div className="vizOverlay">
+                  <div className="modeTitle">{viz.title}</div>
+                  <TimeDisplay primary={primaryTime} secondary={viz.subtitle} />
+                </div>
+              </div>
 
-          {mode === "countdown" ? (
-            <div className="countdownTools">
-              <CountdownPresets disabled={cd.isRunning} onPick={onPickPreset} />
-              <div className="hint">
-                小提示：使用快速鍵，依點擊次數，初始時間可累加，或按 "清除" 重新設定。
+              <Controls
+                isRunning={active.isRunning}
+                onStart={active.start}
+                onPause={active.pause}
+                onReset={onReset}
+                extraLeft={null}
+              />
+
+              {mode === "countdown" && cd.remainingMs === 0 ? (
+                <div className="done" role="status">
+                  完成 ✨
+                </div>
+              ) : null}
+            </section>
+
+            <section className="card sideCard" aria-label="Countdown presets">
+              <div className="countdownTools">
+                <CountdownPresets
+                  disabled={cd.isRunning}
+                  onPick={onPickPreset}
+                  onClear={onClearPreset}
+                />
+                <div className="hint">
+                  按多次可累加時間，或按「清除」重新設定。
+                </div>
               </div>
-            </div>
-          ) : null}
-
-          <Controls
-            isRunning={active.isRunning}
-            onStart={active.start}
-            onPause={active.pause}
-            onReset={onReset}
-            extraLeft={
-              mode === "stopwatch" ? (
-                <button className="btn" onClick={onLap} disabled={!sw.isRunning}>
-                  記錄
-                </button>
-              ) : null
-            }
-          />
-
-          {mode === "stopwatch" ? <LapList laps={laps} /> : null}
-
-          {mode === "countdown" && cd.remainingMs === 0 ? (
-            <div className="done" role="status">
-              完成 ✨
-            </div>
-          ) : null}
-        </section>
+            </section>
+          </div>
+        )}
       </main>
 
       <footer className="footer">
diff --git a/src/components/CountdownPresets.jsx b/src/components/CountdownPresets.jsx
index 7af299a..3ab76fe 100644
--- a/src/components/CountdownPresets.jsx
+++ b/src/components/CountdownPresets.jsx
@@ -8,7 +8,7 @@ const PRESETS = [
   { label: "25 分", ms: 25 * 60 * 1000 },
 ];
 
-export default function CountdownPresets({ disabled, onPick }) {
+export default function CountdownPresets({ disabled, onPick, onClear }) {
   return (
     <div className="presets">
       {PRESETS.map((p) => (
@@ -21,6 +21,14 @@ export default function CountdownPresets({ disabled, onPick }) {
           {p.label}
         </button>
       ))}
+      <button
+        className="chip chipClear"
+        onClick={onClear}
+        disabled={disabled}
+        aria-label="清除預設時間"
+      >
+        清除
+      </button>
     </div>
   );
 }
diff --git a/src/components/LapList.jsx b/src/components/LapList.jsx
index 582691a..6df55a3 100644
--- a/src/components/LapList.jsx
+++ b/src/components/LapList.jsx
@@ -2,18 +2,23 @@ import React from "react";
 import { formatHMS } from "../lib/time.js";
 
 export default function LapList({ laps }) {
-  if (!laps.length) return null;
   return (
-    <div className="laps">
-      <div className="lapsTitle">記錄</div>
-      <ol className="lapsList">
-        {laps.map((ms, idx) => (
-          <li key={idx} className="lapItem">
-            <span className="lapIndex">{String(idx + 1).padStart(2, "0")}</span>
-            <span className="lapTime">{formatHMS(ms, { showMs: true })}</span>
-          </li>
-        ))}
-      </ol>
-    </div>
+    <section className="card lapCard" aria-label="Laps">
+      <div className="laps">
+        <div className="lapsTitle">記錄</div>
+        {laps.length ? (
+          <ol className="lapsList">
+            {laps.map((ms, idx) => (
+              <li key={idx} className="lapItem">
+                <span className="lapIndex">{String(idx + 1).padStart(2, "0")}</span>
+                <span className="lapTime">{formatHMS(ms, { showMs: true })}</span>
+              </li>
+            ))}
+          </ol>
+        ) : (
+          <div className="lapsEmpty">尚無紀錄</div>
+        )}
+      </div>
+    </section>
   );
 }
diff --git a/src/components/WaterGauge.jsx b/src/components/WaterGauge.jsx
index d12ae54..80d8118 100644
--- a/src/components/WaterGauge.jsx
+++ b/src/components/WaterGauge.jsx
@@ -6,10 +6,14 @@ import { clamp } from "../lib/time.js";
  * or static dark plate for stopwatch.
  * level: 0..1 (1 = full) for animated mode
  */
-export default function WaterGauge({ level = 0.5, variant = "countdown" }) {
+export default function WaterGauge({ level = 0.5, variant = "countdown", size = 220 }) {
   if (variant === "stopwatch") {
     return (
-      <div className="waterGauge waterGaugeStatic" aria-hidden="true">
+      <div
+        className="waterGauge waterGaugeStatic"
+        aria-hidden="true"
+        style={{ width: size, height: size }}
+      >
         <div className="waterPlate" />
       </div>
     );
@@ -19,9 +23,16 @@ export default function WaterGauge({ level = 0.5, variant = "countdown" }) {
   const y = `${(1 - l) * 100}%`;
 
   return (
-    <div className="waterGauge" aria-hidden="true">
+    <div
+      className={`waterGauge ${variant === "countdown" ? "waterGaugeCountdown" : ""}`}
+      aria-hidden="true"
+      style={{ width: size, height: size }}
+    >
       <div className="waterSurface" style={{ top: y }} />
-      <div className="waterFill" style={{ transform: `translateY(${(1 - l) * 100}%)` }}>
+      <div
+        className="waterFill"
+        style={{ "--water-shift": `${(1 - l) * 100}%` }}
+      >
         <div className="wave wave1" />
         <div className="wave wave2" />
       </div>
diff --git a/src/lib/hooks.js b/src/lib/hooks.js
index e6f70bc..3512c12 100644
--- a/src/lib/hooks.js
+++ b/src/lib/hooks.js
@@ -114,6 +114,21 @@ export function useCountdown(initialTotalMs = 5 * 60 * 1000) {
     setRemainingMs(clamped);
   };
 
+  const addTotalWhileStopped = (ms) => {
+    if (isRunning) return;
+    const next = Math.max(0, totalMs + ms);
+    setTotalMs(next);
+    baseRemainingRef.current = next;
+    setRemainingMs(next);
+  };
+
+  const clearTotalWhileStopped = () => {
+    if (isRunning) return;
+    setTotalMs(0);
+    baseRemainingRef.current = 0;
+    setRemainingMs(0);
+  };
+
   useRafTicker(isRunning, (t) => {
     const spent = t - startRef.current;
     const next = Math.max(0, baseRemainingRef.current - spent);
@@ -133,5 +148,7 @@ export function useCountdown(initialTotalMs = 5 * 60 * 1000) {
     pause,
     reset,
     setTotalWhileStopped,
+    addTotalWhileStopped,
+    clearTotalWhileStopped,
   };
 }
diff --git a/src/styles.css b/src/styles.css
index 6a1d12f..05ee41f 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -19,12 +19,13 @@
 }
 
 .app.mode-countdown {
-  --bg1: #8dbe78;
-  --bg2: #4d7844;
+  --bg1: #9d6bdc;
+  --bg2: #6b40a4;
   --bg-highlight1: rgba(255, 255, 255, 0.10);
   --bg-highlight2: rgba(255, 255, 255, 0.08);
-  --water-top: rgba(193, 232, 173, 0.45);
-  --water-bottom: rgba(114, 176, 104, 0.26);
+  --water-top: rgba(0, 128, 255, 0.7);
+  --water-bottom: rgba(0, 128, 255, 0.55);
+  --water-surface: rgba(255,255,255,0.42);
 }
 
 * { box-sizing: border-box; }
@@ -75,13 +76,33 @@ a { color: inherit; }
 
 .main {
   display: grid;
-  grid-template-columns: 1fr;
-  gap: 18px;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 16px;
   align-items: start;
   max-width: 1100px;
   width: 100%;
   margin: 0 auto;
 }
+.main.mode-stopwatch .stopwatchGrid {
+  display: grid;
+  grid-template-columns: minmax(360px, 1fr) minmax(240px, 320px);
+  gap: 16px;
+  align-items: start;
+}
+.main.mode-countdown .stopwatchGrid {
+  display: grid;
+  grid-template-columns: minmax(360px, 1fr) minmax(240px, 320px);
+  gap: 16px;
+  align-items: start;
+}
+@media (max-width: 840px) {
+  .main.mode-stopwatch .stopwatchGrid {
+    grid-template-columns: 1fr;
+  }
+  .main.mode-countdown .stopwatchGrid {
+    grid-template-columns: 1fr;
+  }
+}
 
 .card {
   background: var(--card);
@@ -95,13 +116,21 @@ a { color: inherit; }
 
 .vizWrap {
   position: relative;
-  height: 360px;
+  height: 400px;
   display: grid;
   place-items: center;
   border-radius: 18px;
   background: radial-gradient(420px 240px at 50% 40%, rgba(255,255,255,0.06), transparent 70%);
   overflow: hidden;
 }
+.countdownCard {
+  background: #BE77FF;
+  border-color: rgba(255,255,255,0.26);
+}
+.sideCard {
+  background: #BE77FF;
+  border-color: rgba(255,255,255,0.26);
+}
 
 .vizOverlay {
   position: absolute;
@@ -114,7 +143,7 @@ a { color: inherit; }
 }
 .modeTitle {
   position: absolute;
-  top: 16px;
+  top: 18px;
   left: 0;
   right: 0;
   font-size: 14px;
@@ -142,6 +171,17 @@ a { color: inherit; }
 }
 .timeSecondary { font-size: 13px; color: var(--muted); }
 
+.stopwatchGrid .timerCard {
+  max-width: 700px;
+}
+.lapCard {
+  min-height: 100%;
+}
+.lapsEmpty {
+  color: var(--muted2);
+  font-size: 13px;
+}
+
 .controls { margin-top: 14px; }
 .controlsRow {
   display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
@@ -183,6 +223,13 @@ a { color: inherit; }
   box-shadow: 0 12px 26px rgba(165, 114, 75, 0.32);
 }
 .btnReset:hover { background: #9b6946; }
+.btnLap {
+  background: #84C1FF;
+  border-color: #6ca7e5;
+  color: #0d2a55;
+  box-shadow: 0 10px 22px rgba(132, 193, 255, 0.25);
+}
+.btnLap:hover { background: #8ec7ff; }
 
 .presets {
   display: flex;
@@ -202,6 +249,12 @@ a { color: inherit; }
 }
 .chip:hover { transform: translateY(-1px); background: rgba(255,255,255,0.10); color: var(--text); }
 .chip:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
+.chipClear {
+  color: #210b40;
+  background: rgba(255,255,255,0.85);
+  border-color: rgba(255,255,255,0.92);
+}
+.chipClear:hover { background: #fff; color: #210b40; }
 
 .hint {
   margin-top: 10px;
@@ -226,6 +279,11 @@ a { color: inherit; }
 }
 .lapIndex { color: var(--muted); font-variant-numeric: tabular-nums; }
 .lapTime { font-variant-numeric: tabular-nums; }
+.lapCard .laps {
+  margin-top: 0;
+  padding-top: 0;
+  border-top: 0;
+}
 
 .done {
   margin-top: 12px;
@@ -251,10 +309,10 @@ a { color: inherit; }
 
 /* Ring */
 .ring { position: absolute; inset: 0; margin: auto; filter: drop-shadow(0 10px 22px rgba(0,0,0,0.4)); }
-.ringTrack { fill: transparent; stroke: rgba(255,255,255,0.08); }
+.ringTrack { fill: transparent; stroke: rgba(255,255,255,0.10); }
 .ringProgress {
   fill: transparent;
-  stroke: rgba(255,255,255,0.22);
+  stroke: rgba(255,255,255,0.32);
   stroke-linecap: round;
   transform-origin: 50% 50%;
   transform: rotate(-90deg);
@@ -262,28 +320,28 @@ a { color: inherit; }
 }
 .ringFlash {
   position: absolute;
-  width: 280px;
-  height: 280px;
+  width: 320px;
+  height: 320px;
   border-radius: 999px;
-  border: 2px solid rgba(255,255,255,0.75);
-  z-index: 2;
+  border: 2px solid rgba(255,255,255,0.85);
+  z-index: 4;
   box-shadow:
-    0 0 30px rgba(255,255,255,0.45),
-    0 0 60px rgba(255,255,255,0.25);
+    0 0 30px rgba(255,255,255,0.55),
+    0 0 70px rgba(255,255,255,0.35);
   pointer-events: none;
   animation: ringFlash 0.9s ease-out forwards;
 }
 @keyframes ringFlash {
-  0% { opacity: 0; transform: scale(0.95); }
-  25% { opacity: 0.95; transform: scale(1); }
+  0% { opacity: 0; transform: scale(0.9); }
+  25% { opacity: 1; transform: scale(1); }
   100% { opacity: 0; transform: scale(1.14); }
 }
 
 /* Water */
 .waterGauge {
   position: absolute;
-  width: 220px;
-  height: 220px;
+  width: 260px;
+  height: 260px;
   border-radius: 999px;
   overflow: hidden;
   border: 1px solid rgba(255,255,255,0.10);
@@ -291,27 +349,31 @@ a { color: inherit; }
   box-shadow: inset 0 -30px 60px rgba(0,0,0,0.25);
 }
 .waterGaugeStatic {
-  background: radial-gradient(210px 160px at 50% 34%, rgba(255,255,255,0.06), rgba(0,0,0,0.58));
-  border: 1px solid rgba(255,255,255,0.14);
-  box-shadow:
-    inset 0 -30px 60px rgba(0,0,0,0.45),
-    inset 0 18px 40px rgba(0,0,0,0.35);
+  background: #000079;
+  border: 1px solid rgba(255,255,255,0.16);
+  box-shadow: none;
 }
 .waterFill {
   position: absolute;
   inset: 0;
-  transform: translateY(50%);
+  transform: translateY(var(--water-shift, 50%));
   transition: transform 180ms linear;
   background: linear-gradient(180deg, var(--water-top), var(--water-bottom));
 }
+.waterGaugeCountdown .waterFill {
+  background: linear-gradient(180deg, var(--water-top), var(--water-bottom));
+  animation: sway 6s ease-in-out infinite;
+}
+@keyframes sway {
+  0%, 100% { transform: translate(-6%, 0) translateY(var(--water-shift, 50%)); }
+  50% { transform: translate(6%, 0) translateY(var(--water-shift, 50%)); }
+}
 .waterPlate {
   position: absolute;
   inset: 0;
   border-radius: inherit;
-  background: radial-gradient(160px 140px at 50% 38%, rgba(255,255,255,0.08), rgba(0,0,0,0.7));
-  box-shadow:
-    inset 0 14px 40px rgba(0,0,0,0.55),
-    inset 0 -12px 30px rgba(0,0,0,0.4);
+  background: #000079;
+  box-shadow: none;
 }
 .waterSurface {
   position: absolute;