diff --git a/client/src/App.jsx b/client/src/App.jsx
index 1be02d5..34ff1fc 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -1,4 +1,4 @@
-import { useContext, useEffect, useMemo, useRef, useState } from "react";
+import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
 import toast from "react-hot-toast";
 import Dashboard from "./components/Dashboard.jsx";
 import OnboardingFlow from "./components/OnboardingFlow.jsx";
@@ -26,7 +26,8 @@ function createSession() {
     elapsedSeconds: 0,
     completedTasks: [],
     actions: 0,
-    moodScore: 3
+    moodScore: 3,
+    stressLevel: 3
   };
 }
 
@@ -84,6 +85,28 @@ function getAdaptiveBurnRate(session, baseline) {
   return Math.max(0, Math.min(1, Number(score.toFixed(2))));
 }
 
+function getRecoveredBurnRate(burnRate) {
+  return Math.max(0, Number((burnRate - 0.1).toFixed(2)));
+}
+
+function clampMoodScore(value) {
+  return Math.max(1, Math.min(5, Number(value) || 3));
+}
+
+function getBurnRateFromCheckIn(currentBurnRate, moodScore, stressLevel) {
+  const normalizedMood = clampMoodScore(moodScore);
+  const normalizedStress = clampMoodScore(stressLevel);
+  const adjustment = (normalizedStress - 3) * 0.08 + (3 - normalizedMood) * 0.05;
+  return Math.max(0, Math.min(1, Number((currentBurnRate + adjustment).toFixed(2))));
+}
+
+function readStoredExtensionCheckIn() {
+  try {
+    const rawValue = window.localStorage.getItem("wellbyExtensionCheckIn");
+    return rawValue ? JSON.parse(rawValue) : null;
+  } catch {
+    return null;
+  }
 function CameraIndicator({ colors, active, onOpen }) {
   return (
     <button
@@ -117,6 +140,9 @@ export default function App() {
   const [sessions, setSessions] = useLocalStorage(STORAGE_KEYS.sessions, []);
   const [fatigueOptIn, setFatigueOptIn] = useLocalStorage(STORAGE_KEYS.fatigueOptIn, false);
   const [breakLogs, setBreakLogs] = useLocalStorage(STORAGE_KEYS.breakLogs, []);
+  const [extensionPromptInterval, setExtensionPromptInterval] = useLocalStorage(
+    STORAGE_KEYS.extensionPromptInterval,
+    5
   const [lastLoginName, setLastLoginName] = useLocalStorage(STORAGE_KEYS.lastLoginName, "");
   const [plannerTasks, setPlannerTasks] = useLocalStorage(STORAGE_KEYS.plannerTasks, []);
   const [dashboardSections, setDashboardSections] = useLocalStorage(
@@ -141,11 +167,41 @@ export default function App() {
   const [flowState, setFlowState] = useState("stable");
   const [flowRatio, setFlowRatio] = useState(1);
   const [notificationState, setNotificationState] = useState(null);
+  const [burnRateRecoveryOverride, setBurnRateRecoveryOverride] = useState(null);
   const [lastApiUpdatedAt, setLastApiUpdatedAt] = useState(0);
   const [notificationCooldownUntil, setNotificationCooldownUntil] = useState(0);
   const [fatiguePreviewPinned, setFatiguePreviewPinned] = useState(false);
   const apiRefreshRef = useRef(0);
   const activeToastIdRef = useRef(null);
+  const escalateOnNextRef = useRef(false);
+  const lastExtensionMoodAtRef = useRef(0);
+
+  const baseline = useMemo(() => getFlowBaseline(sessions), [sessions]);
+  const flowBaseline = useMemo(() => getFlowBaseline(sessions), [sessions]);
+  const flowDeviation = useMemo(() => getFlowDeviation(session, flowBaseline), [session, flowBaseline]);
+  const adaptiveBurnRate = useMemo(() => getAdaptiveBurnRate(session, baseline), [session, baseline]);
+  const calculatedBurnRate = Math.max(
+    0,
+    Math.min(
+      1,
+      Number(
+        (
+          Math.max(
+            apiBurnRate,
+            adaptiveBurnRate,
+            flowDeviation.penalty,
+            fatigueStatus.fatigueDetected ? 0.6 : 0
+          )
+        ).toFixed(2)
+      )
+    )
+  );
+  const recoveryOverrideActive =
+    burnRateRecoveryOverride &&
+    Date.now() < burnRateRecoveryOverride.activeUntil;
+  const effectiveBurnRate = recoveryOverrideActive
+    ? Math.min(burnRateRecoveryOverride.value, calculatedBurnRate)
+    : calculatedBurnRate;
 
   const baseline = useMemo(() => {
     if (sessions.length < 3) {
@@ -201,6 +257,16 @@ export default function App() {
     setNotificationState(null);
   }
 
+  function collapseMildNotification() {
+    dismissToast();
+    setNotificationState("mild-collapsed");
+  }
+
+  function reopenMildNotification() {
+    dismissToast();
+    showMildToast();
+  }
+
   function triggerFullBreakMode({ noSnooze, reason }) {
     dismissToast();
     setBanner(
@@ -241,6 +307,9 @@ export default function App() {
         burnRate={effectiveBurnRate}
         flowState={flowState}
         flowRatio={flowRatio}
+        snoozeCount={snoozeCount}
+        onDismiss={collapseMildNotification}
+        onSnooze={handleSnooze}
         onDismissForNow={handleMildDismiss}
         onTakeBreak={() => {
           dismissToast();
@@ -263,6 +332,120 @@ export default function App() {
     return () => clearInterval(timer);
   }, []);
 
+  useEffect(() => {
+    function applyExtensionCheckIn(nextMoodScore, nextStressLevel, intent) {
+      const moodScore = clampMoodScore(nextMoodScore);
+      const stressLevel = clampMoodScore(nextStressLevel);
+      setSession((current) => ({ ...current, moodScore, stressLevel }));
+      setApiBurnRate((current) => getBurnRateFromCheckIn(current, moodScore, stressLevel));
+
+      if (intent === "break" || stressLevel >= 4) {
+        setBanner("Wellby picked up a higher stress check. A short break could help.");
+      } else if (intent === "check-in") {
+        setBanner("Wellby logged your browser check-in and updated your session.");
+      } else {
+        setBanner("Wellby logged your browser check-in.");
+      }
+    }
+
+    function applyStoredCheckInIfNeeded() {
+      const storedCheckIn = readStoredExtensionCheckIn();
+      if (!storedCheckIn) {
+        return;
+      }
+
+      const updatedAt = Number(storedCheckIn.updatedAt) || Date.now();
+      if (updatedAt <= lastExtensionMoodAtRef.current) {
+        return;
+      }
+
+      lastExtensionMoodAtRef.current = updatedAt;
+      applyExtensionCheckIn(storedCheckIn.moodScore, storedCheckIn.stressLevel, storedCheckIn.intent);
+    }
+
+    function handleExtensionMessage(event) {
+      if (event.origin !== window.location.origin) {
+        return;
+      }
+
+      if (event.data?.source !== "wellby-extension" || event.data?.type !== "MOOD_SYNC") {
+        return;
+      }
+
+      const updatedAt = Number(event.data.updatedAt) || Date.now();
+      if (updatedAt <= lastExtensionMoodAtRef.current) {
+        return;
+      }
+
+      lastExtensionMoodAtRef.current = updatedAt;
+      applyExtensionCheckIn(event.data.moodScore, event.data.stressLevel, event.data.intent);
+    }
+
+    const params = new URLSearchParams(window.location.search);
+    const extensionMoodScore = params.get("extensionMoodScore");
+    const extensionStressLevel = params.get("extensionStressLevel");
+    const extensionIntent = params.get("extensionIntent");
+    const extensionMoodUpdatedAt = Number(params.get("extensionMoodUpdatedAt")) || Date.now();
+
+    if (extensionMoodScore !== null || extensionStressLevel !== null) {
+      lastExtensionMoodAtRef.current = extensionMoodUpdatedAt;
+      applyExtensionCheckIn(
+        extensionMoodScore ?? session.moodScore,
+        extensionStressLevel ?? session.stressLevel,
+        extensionIntent
+      );
+      params.delete("extensionMoodScore");
+      params.delete("extensionStressLevel");
+      params.delete("extensionIntent");
+      params.delete("extensionMoodUpdatedAt");
+      const nextQuery = params.toString();
+      const nextUrl = `${window.location.pathname}${nextQuery ? `?${nextQuery}` : ""}${window.location.hash}`;
+      window.history.replaceState({}, "", nextUrl);
+    }
+
+    window.addEventListener("message", handleExtensionMessage);
+    window.addEventListener("focus", applyStoredCheckInIfNeeded);
+    document.addEventListener("visibilitychange", applyStoredCheckInIfNeeded);
+    applyStoredCheckInIfNeeded();
+
+    return () => {
+      window.removeEventListener("message", handleExtensionMessage);
+      window.removeEventListener("focus", applyStoredCheckInIfNeeded);
+      document.removeEventListener("visibilitychange", applyStoredCheckInIfNeeded);
+    };
+  }, []);
+
+  useEffect(() => {
+    window.postMessage(
+      {
+        source: "wellby-app",
+        type: "SETTINGS_SYNC",
+        extensionPromptInterval,
+        theme,
+        mode
+      },
+      window.location.origin
+    );
+  }, [extensionPromptInterval, theme, mode]);
+
+  useEffect(() => {
+    const syncedTask = session.activeTask?.name ?? session.taskInput ?? "";
+    const activeTasks = session.activeTask?.name ? [session.activeTask.name] : [];
+
+    window.localStorage.setItem("wellbyCurrentTask", syncedTask);
+    window.localStorage.setItem("wellbyActiveTasks", JSON.stringify(activeTasks));
+
+    window.postMessage(
+      {
+        source: "wellby-app",
+        type: "TASK_SYNC",
+        currentTask: syncedTask,
+        activeTasks
+      },
+      window.location.origin
+    );
+  }, [session.activeTask, session.taskInput]);
+
   useEffect(() => {
     if (!profile) {
       return;
@@ -282,7 +465,8 @@ export default function App() {
           10,
           Math.max(
             0,
-            (6 - session.moodScore) * 1.4 +
+            (6 - session.moodScore) * 1.1 +
+              (session.stressLevel - 1) * 1.2 +
               Math.min(4, session.elapsedSeconds / 3600) +
               Math.max(0, (averageTaskSeconds - (baseline?.avgTaskSeconds || averageTaskSeconds)) / 600) +
               plannerInsights.overdueCount * 0.8 +
@@ -327,6 +511,9 @@ export default function App() {
         }
         const adjusted = Math.max(0, Number((Number(data.burn_rate ?? 0) - breakCredit).toFixed(2)));
         setApiBurnRate(adjusted);
+        if (!recoveryOverrideActive) {
+          setBurnRateRecoveryOverride(null);
+        }
         if (breakCredit > 0) {
           setBreakCredit(0);
         }
@@ -357,6 +544,7 @@ export default function App() {
     session.completedTasks,
     session.actions,
     session.moodScore,
+    session.stressLevel,
     baseline,
     breakCredit,
     session.startedAt,
@@ -502,6 +690,11 @@ export default function App() {
       return;
     }
 
+    if (notificationState === "mild-collapsed") {
+      return;
+    }
+
+    if (notificationState !== "mild") {
     if (effectiveBurnRate >= 0.6 || fatigueStatus.fatigueDetected) {
       triggerFullBreakMode({ noSnooze: true, reason: "high" });
       return;
@@ -523,25 +716,23 @@ export default function App() {
   ]);
 
   function completeCurrentSession() {
-    const taskDurations = session.completedTasks.map((task) => task.durationSeconds);
-    const summary = {
-      id: session.startedAt,
-      durationSeconds: session.elapsedSeconds,
-      avgTaskSeconds: taskDurations.length ? average(taskDurations) : session.elapsedSeconds || 0,
-      completedTasks: session.completedTasks.length,
-      breakTakenAt: new Date().toISOString()
-    };
-
-    setSessions((current) => [...current, summary]);
+    const recoveredBurnRate = getRecoveredBurnRate(effectiveBurnRate);
+    const breakTimestamp = new Date().toISOString();
     setBreakLogs((current) => [
       ...current,
-      { timestamp: summary.breakTakenAt, durationMinutes: breakMinutes }
+      { timestamp: breakTimestamp, durationMinutes: breakMinutes }
     ]);
+    setBurnRateRecoveryOverride({
+      value: recoveredBurnRate,
+      activeUntil: Date.now() + 45000
+    });
     setBreakCredit(0.1);
+    setApiBurnRate(recoveredBurnRate);
+    setSnoozeCount(0);
+    escalateOnNextRef.current = false;
     setApiBurnRate((current) => Math.max(0, Number((current - 0.1).toFixed(2))));
     setNotificationCooldownUntil(0);
     clearAllNotifications();
-    setSession(createSession());
   }
 
   function handleTaskDraftChange(field, value) {
@@ -610,6 +801,37 @@ export default function App() {
     setPlannerTasks((current) => current.filter((task) => task.id !== taskId));
   }
 
+      const completedTask = {
+        ...current.activeTask,
+        completedAt: Date.now(),
+        durationSeconds: Math.max(30, Math.floor((Date.now() - current.activeTask.startedAt) / 1000))
+      };
+      const completedTasks = [...current.completedTasks, completedTask];
+      const taskDurations = completedTasks.map((task) => task.durationSeconds);
+      const summary = {
+        id: current.startedAt,
+        durationSeconds: current.elapsedSeconds,
+        avgTaskSeconds: taskDurations.length ? average(taskDurations) : current.elapsedSeconds || 0,
+        completedTasks: completedTasks.length,
+        completedAt: new Date().toISOString()
+      };
+
+      setSessions((existing) => [...existing, summary]);
+      clearAllNotifications();
+      setBreakOpen(false);
+      setSnoozeCount(0);
+      escalateOnNextRef.current = false;
+
+      return createSession();
+    });
+  }
+
+  if (!profile) {
+    return (
+      <OnboardingFlow
+        onComplete={(nextProfile) => {
+          setProfile(nextProfile);
+          setCurrentPage("dashboard");
   function handleLogin(name, password) {
     if (!profile) {
       setCurrentPage("onboarding");
@@ -707,6 +929,9 @@ export default function App() {
     return (
       <SettingsPage
         fatigueOptIn={fatigueOptIn}
+        onToggleFatigue={() => setFatigueOptIn((current) => !current)}
+        extensionPromptInterval={extensionPromptInterval}
+        onSetExtensionPromptInterval={setExtensionPromptInterval}
         onToggleFatigue={() => {
           setFatigueOptIn((current) => {
             const next = !current;
@@ -754,6 +979,20 @@ export default function App() {
         flowRatio={flowRatio}
         breakMinutes={breakMinutes}
         history={history}
+        onTaskInputChange={(value) => setSession((current) => ({ ...current, taskInput: value }))}
+        onTaskStart={handleTaskStart}
+        onTaskComplete={handleTaskComplete}
+        onMoodSelect={(score) => {
+          const moodScore = clampMoodScore(score);
+          setSession((current) => ({ ...current, moodScore }));
+          setApiBurnRate((current) => getBurnRateFromCheckIn(current, moodScore, session.stressLevel));
+        }}
+        onStressSelect={(score) => {
+          const stressLevel = clampMoodScore(score);
+          setSession((current) => ({ ...current, stressLevel }));
+          setApiBurnRate((current) => getBurnRateFromCheckIn(current, session.moodScore, stressLevel));
+        }}
+        onStartBreak={() => triggerFullBreakMode({ noSnooze: false, reason: "manual" })}
         taskDraft={taskDraft}
         plannerTasks={plannerTasks}
         plannerInsights={plannerInsights}
@@ -776,6 +1015,20 @@ export default function App() {
           setCurrentPage("dashboard");
         }}
         banner={banner}
+        notificationState={notificationState}
+        onExpandNotification={reopenMildNotification}
+      />
+      {breakOpen ? (
+        <BreakMode
+          initialGame={profile.favoriteGame}
+          noSnooze={breakContext.noSnooze}
+          reason={breakContext.reason}
+          beforeBurnRate={breakContext.beforeBurnRate}
+          afterBurnRate={getRecoveredBurnRate(effectiveBurnRate)}
+          onClose={() => {
+            setBreakOpen(false);
+            completeCurrentSession();
+          }}
       />
       {showCameraIndicator ? (
         <CameraIndicator
diff --git a/client/src/components/BreakMode.jsx b/client/src/components/BreakMode.jsx
index 7eee659..635ea01 100644
--- a/client/src/components/BreakMode.jsx
+++ b/client/src/components/BreakMode.jsx
@@ -355,6 +355,19 @@ export default function BreakMode({ initialGame, onClose, noSnooze, reason, befo
                 </div>
               </div>
             </div>
+          ) : phase === "games" ? (
+            <div className="space-y-8">
+              <div className="rounded-[40px] p-7 shadow-glow md:p-10" style={{ background: colors.cardBg, border: `1px solid ${colors.cardBorder}` }}>
+                <div className="flex flex-col gap-5 lg:flex-row lg:items-start lg:justify-between">
+                  <div>
+                    <p className="text-sm font-bold uppercase tracking-[0.22em]" style={{ color: colors.muted }}>Wellby Game Lounge</p>
+                    <h2 className="font-display text-4xl md:text-5xl">Recharge in a way that actually feels fun</h2>
+                    <p className="mt-3 max-w-3xl text-base leading-8" style={{ color: colors.muted }}>{breakMessage}</p>
+                  </div>
+                  <button
+                    onClick={() => setPhase("complete")}
+                    className="rounded-full px-6 py-3 font-bold lg:self-start"
+                    style={{ background: colors.breakBtn, color: colors.breakBtnText }}
           </div>
         ) : phase === "games" ? (
           <div className="mx-auto max-w-6xl space-y-6">
@@ -410,6 +423,31 @@ export default function BreakMode({ initialGame, onClose, noSnooze, reason, befo
                     Finish break
                   </button>
                 </div>
+                <div className="mt-6 rounded-[28px] px-5 py-4" style={{ background: colors.secondary, border: `1px solid ${colors.cardBorder}` }}>
+                  <p className="text-sm leading-7" style={{ color: colors.muted }}>
+                    Pick a game, settle in for a minute, and then head back when you feel reset.
+                    Right now you&apos;re in <span className="font-bold" style={{ color: colors.secondaryText }}>{GAME_OPTIONS.find((game) => game.id === selectedGame)?.label}</span>.
+                  </p>
+                </div>
+                <div className="mt-8 grid gap-5 md:grid-cols-2 xl:grid-cols-4">
+                  {GAME_OPTIONS.map((game) => (
+                    <button
+                      key={game.id}
+                      onClick={() => setSelectedGame(game.id)}
+                      className="min-h-32 rounded-[28px] border px-6 py-7 text-left transition-transform hover:-translate-y-0.5"
+                      style={{
+                        background: selectedGame === game.id ? colors.primary : colors.gameCardBg,
+                        color: selectedGame === game.id ? colors.primaryText : colors.secondaryText,
+                        borderColor: selectedGame === game.id ? colors.primary : colors.gameCardBorder
+                      }}
+                    >
+                      <div className="text-4xl">{game.emoji}</div>
+                      <div className="mt-3 text-lg font-bold">{game.label}</div>
+                      <div className="mt-2 text-sm" style={{ color: selectedGame === game.id ? colors.primaryText : colors.muted }}>
+                        {selectedGame === game.id ? "Currently active" : "Open this game"}
+                      </div>
+                    </button>
+                  ))}
               </div>
 
               <div className="mt-8 grid gap-4 md:grid-cols-2 xl:grid-cols-4">
diff --git a/client/src/components/SettingsPage.jsx b/client/src/components/SettingsPage.jsx
index a082727..49b3e3f 100644
--- a/client/src/components/SettingsPage.jsx
+++ b/client/src/components/SettingsPage.jsx
@@ -1,6 +1,7 @@
-import { useContext } from "react";
+import React,{ useContext } from "react";
 import { ThemeContext } from "../context/ThemeContext.jsx";
 import LeafIcon from "./LeafIcon.jsx";
+import { EXTENSION_PROMPT_INTERVAL_OPTIONS } from "../lib/constants.js";
 import { hexToRgba } from "../lib/color.js";
 
 const THEME_OPTIONS = [
@@ -13,6 +14,8 @@ const THEME_OPTIONS = [
 export default function SettingsPage({
   fatigueOptIn,
   onToggleFatigue,
+  extensionPromptInterval,
+  onSetExtensionPromptInterval,
   fatigueStatus,
   mode,
   onToggleMode,
@@ -130,6 +133,48 @@ export default function SettingsPage({
                 {fatigueOptIn ? "Enabled" : "Disabled"}
               </button>
             </div>
+
+            <div className="mt-4 rounded-[24px] p-4" style={{ background: colors.secondary }}>
+              <div className="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
+                <div>
+                  <h2 className="font-bold">Browser check-in timer</h2>
+                  <p className="mt-2 text-sm leading-7" style={{ color: colors.muted }}>
+                    Pick how often the tiny Wellby tab should expand on other websites and ask for a stress check-in.
+                  </p>
+                </div>
+                <div
+                  className="rounded-full px-4 py-2 text-sm font-bold"
+                  style={{ background: colors.sidebarBg, color: colors.wordmark }}
+                >
+                  {extensionPromptInterval} min
+                </div>
+              </div>
+
+              <div className="mt-4 grid gap-3 md:grid-cols-2">
+                {EXTENSION_PROMPT_INTERVAL_OPTIONS.map((option) => (
+                  <button
+                    key={option.value}
+                    onClick={() => onSetExtensionPromptInterval(option.value)}
+                    className="rounded-[22px] border p-4 text-left"
+                    style={{
+                      background:
+                        extensionPromptInterval === option.value ? colors.navActiveBg : colors.cardBg,
+                      borderColor:
+                        extensionPromptInterval === option.value ? colors.navActiveBorder : colors.cardBorder,
+                      color:
+                        extensionPromptInterval === option.value ? colors.navActive : colors.secondaryText
+                    }}
+                  >
+                    <div className="flex items-center justify-between gap-3">
+                      <span className="font-bold">{option.label}</span>
+                      {extensionPromptInterval === option.value ? (
+                        <span className="text-sm font-bold">Selected</span>
+                      ) : null}
+                    </div>
+                  </button>
+                ))}
+              </div>
+            </div>
           </section>
         </div>
       </div>
diff --git a/client/src/components/games/ChessGame.jsx b/client/src/components/games/ChessGame.jsx
index 1d99e6a..66da3de 100644
--- a/client/src/components/games/ChessGame.jsx
+++ b/client/src/components/games/ChessGame.jsx
@@ -1,4 +1,4 @@
-import { useContext, useEffect, useMemo, useState } from "react";
+import React,{ useContext, useEffect, useMemo, useState } from "react";
 import { Chess } from "chess.js";
 import { ThemeContext } from "../../context/ThemeContext.jsx";
 
@@ -81,6 +81,11 @@ export default function ChessGame({ onExit }) {
   const [captured, setCaptured] = useState({ white: [], black: [] });
 
   const board = useMemo(() => game.board().flat(), [game]);
+  const winnerText = game.isGameOver()
+    ? game.isCheckmate()
+      ? `You ${game.turn() === "b" ? "win" : "lose"}!`
+      : "Game over."
+    : null;
 
   useEffect(() => {
     if (mode !== "ai" || game.turn() !== "b" || game.isGameOver()) {
@@ -146,14 +151,16 @@ export default function ChessGame({ onExit }) {
 
   return (
     <div className="rounded-[28px] p-5" style={{ background: colors.cardBg, color: colors.secondaryText, border: `1px solid ${colors.cardBorder}` }}>
-      <div className="mb-4 flex items-center justify-between">
-        <div>
-          <h3 className="font-display text-2xl">Chess</h3>
-          <p className="text-sm">Pass-and-play or a simple depth-3 AI opponent.</p>
-        </div>
-        <button onClick={onExit} className="rounded-full px-4 py-2 text-sm font-bold" style={{ background: colors.breakBtn, color: colors.breakBtnText }}>
+      <div className="mb-6 flex flex-col gap-4">
+        <button onClick={onExit} className="self-end rounded-full px-4 py-2 text-sm font-bold" style={{ background: colors.breakBtn, color: colors.breakBtnText }}>
           End Break & Return to Work
         </button>
+        <div className="rounded-[24px] px-6 py-5 text-center" style={{ background: colors.cardBg, border: `2px solid ${colors.primary}` }}>
+          <h3 className="font-display text-4xl">Chess</h3>
+          <p className="mt-2 text-sm" style={{ color: colors.muted }}>
+            Play pass-and-play or challenge a lighter AI opponent.
+          </p>
+        </div>
       </div>
       <div className="mb-4 flex gap-3">
         <button
@@ -177,8 +184,8 @@ export default function ChessGame({ onExit }) {
           Two-player
         </button>
       </div>
-      <div className="grid gap-4 lg:grid-cols-[auto_220px]">
-        <div className="grid w-full max-w-[520px] grid-cols-8 overflow-hidden rounded-[24px] shadow-lg">
+      <div className="grid gap-4 xl:grid-cols-[minmax(0,1fr)_220px]">
+        <div className="mx-auto grid w-full max-w-[460px] grid-cols-8 overflow-hidden rounded-[24px] shadow-lg">
           {board.map((piece, index) => {
             const isLight = (Math.floor(index / 8) + index) % 2 === 0;
             const square = algebraic(index);
@@ -190,7 +197,7 @@ export default function ChessGame({ onExit }) {
               <button
                 key={square}
                 onClick={() => handleSquareClick(index)}
-                className="aspect-square text-3xl transition"
+                className="aspect-square text-[2rem] transition"
                 style={{
                   background: isLight ? colors.secondary : colors.primary,
                   color: isLight ? colors.secondaryText : colors.primaryText,
@@ -224,6 +231,32 @@ export default function ChessGame({ onExit }) {
           </button>
         </aside>
       </div>
+      <div
+        className="mt-5 rounded-[24px] px-5 py-4 text-center"
+        style={{
+          background: winnerText
+            ? winnerText.includes("win")
+              ? colors.pillGoodBg
+              : colors.pillWarnBg
+            : colors.secondary,
+          color: winnerText
+            ? winnerText.includes("win")
+              ? colors.pillGoodText
+              : colors.pillWarnText
+            : colors.secondaryText,
+          border: `1px solid ${
+            winnerText
+              ? winnerText.includes("win")
+                ? colors.pillGoodBorder
+                : colors.pillWarnBorder
+              : colors.cardBorder
+          }`
+        }}
+      >
+        <div className="text-lg font-extrabold">
+          {winnerText ?? `Turn: ${game.turn() === "w" ? "White" : "Black"}`}
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/client/src/components/games/SnakeGame.jsx b/client/src/components/games/SnakeGame.jsx
index 1d753e7..fb8e083 100644
--- a/client/src/components/games/SnakeGame.jsx
+++ b/client/src/components/games/SnakeGame.jsx
@@ -29,6 +29,7 @@ export default function SnakeGame({ onExit }) {
   const [food, setFood] = useState(() => randomFood(INITIAL_SNAKE));
   const [score, setScore] = useState(0);
   const [gameOver, setGameOver] = useState(false);
+  const [isRunning, setIsRunning] = useState(false);
   const highScores = readStorage(STORAGE_KEYS.gameScores, { snake: 0 });
 
   useEffect(() => {
@@ -57,7 +58,7 @@ export default function SnakeGame({ onExit }) {
   }, []);
 
   useEffect(() => {
-    if (gameOver) {
+    if (gameOver || !isRunning) {
       return;
     }
 
@@ -98,7 +99,7 @@ export default function SnakeGame({ onExit }) {
     }, 140);
 
     return () => clearInterval(interval);
-  }, [food, gameOver, highScores, score]);
+  }, [food, gameOver, highScores, isRunning, score]);
 
   useEffect(() => {
     const canvas = canvasRef.current;
@@ -126,31 +127,55 @@ export default function SnakeGame({ onExit }) {
     setFood(randomFood(INITIAL_SNAKE));
     setScore(0);
     setGameOver(false);
+    setIsRunning(false);
   }
 
   return (
     <div className="rounded-[28px] p-6 md:p-7" style={{ background: colors.cardBg, color: colors.secondaryText, border: `1px solid ${colors.cardBorder}` }}>
-      <div className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
-        <div>
-          <h3 className="font-display text-2xl">Snake</h3>
-          <p className="text-sm">High score: {readStorage(STORAGE_KEYS.gameScores, { snake: 0 }).snake ?? 0}</p>
-        </div>
-        <button onClick={onExit} className="rounded-full px-4 py-2 text-sm font-bold" style={{ background: colors.breakBtn, color: colors.breakBtnText }}>
+      <div className="mb-6 flex flex-col gap-4">
+        <button onClick={onExit} className="self-end rounded-full px-4 py-2 text-sm font-bold" style={{ background: colors.breakBtn, color: colors.breakBtnText }}>
           End Break & Return to Work
         </button>
+        <div className="rounded-[24px] px-6 py-5 text-center" style={{ background: colors.cardBg, border: `2px solid ${colors.primary}` }}>
+          <h3 className="font-display text-4xl">Snake</h3>
+          <p className="mt-2 text-sm font-bold uppercase tracking-[0.16em]" style={{ color: colors.muted }}>
+            High score: {readStorage(STORAGE_KEYS.gameScores, { snake: 0 }).snake ?? 0}
+          </p>
+          <p className="mt-2 text-sm" style={{ color: colors.muted }}>
+            Glide through the grid, eat the food, and keep your streak alive.
+          </p>
+        </div>
       </div>
       <div className="flex justify-center rounded-[28px] px-4 py-6" style={{ background: colors.secondary }}>
         <canvas ref={canvasRef} width={320} height={320} className="rounded-[24px] shadow-inner" />
       </div>
+      <div
+        className="mt-5 rounded-[24px] px-5 py-4 text-center"
+        style={{
+          background: gameOver ? colors.pillDangerBg : colors.secondary,
+          color: gameOver ? colors.pillDangerText : colors.secondaryText,
+          border: `1px solid ${gameOver ? colors.pillDangerBorder : colors.cardBorder}`
+        }}
+      >
+        <div className="text-lg font-extrabold">
+          {gameOver ? "You lose!" : isRunning ? "Stay sharp and keep climbing." : "Press start when you're ready."}
+        </div>
+      </div>
       <div className="mt-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
         <p className="font-bold">Score: {score}</p>
         {gameOver ? (
           <div className="flex flex-wrap items-center gap-3">
-            <span className="text-sm font-bold">Ready to get back to it?</span>
             <button onClick={restart} className="rounded-full px-4 py-2 text-sm font-bold" style={{ background: colors.primary, color: colors.primaryText }}>
               Play again
             </button>
           </div>
+        ) : !isRunning ? (
+          <div className="flex flex-wrap items-center gap-3">
+            <span className="text-sm" style={{ color: colors.muted }}>Use arrow keys or WASD</span>
+            <button onClick={() => setIsRunning(true)} className="rounded-full px-5 py-2 text-sm font-bold" style={{ background: colors.primary, color: colors.primaryText }}>
+              Start
+            </button>
+          </div>
         ) : (
           <span className="text-sm" style={{ color: colors.muted }}>Use arrow keys or WASD</span>
         )}
diff --git a/client/src/components/games/TicTacToeGame.jsx b/client/src/components/games/TicTacToeGame.jsx
index 5409353..8d1436b 100644
--- a/client/src/components/games/TicTacToeGame.jsx
+++ b/client/src/components/games/TicTacToeGame.jsx
@@ -21,25 +21,43 @@ function getWinner(board) {
   return board.every(Boolean) ? "draw" : null;
 }
 
-function minimax(board, isMaximizing) {
-  const winner = getWinner(board);
-  if (winner === "O") return { score: 1 };
-  if (winner === "X") return { score: -1 };
-  if (winner === "draw") return { score: 0 };
+function findLineMove(board, marker) {
+  for (const [a, b, c] of lines) {
+    const values = [board[a], board[b], board[c]];
+    const markerCount = values.filter((value) => value === marker).length;
+    const emptyIndex = [a, b, c].find((index) => !board[index]);
+    if (markerCount === 2 && emptyIndex !== undefined) {
+      return emptyIndex;
+    }
+  }
+  return null;
+}
 
-  const moves = [];
-  board.forEach((cell, index) => {
-    if (!cell) {
-      const nextBoard = [...board];
-      nextBoard[index] = isMaximizing ? "O" : "X";
-      const result = minimax(nextBoard, !isMaximizing);
-      moves.push({ index, score: result.score });
+function chooseAiMove(board) {
+  const winningMove = findLineMove(board, "O");
+  if (winningMove !== null) {
+    return winningMove;
+  }
+
+  const shouldBlock = Math.random() > 0.35;
+  if (shouldBlock) {
+    const blockingMove = findLineMove(board, "X");
+    if (blockingMove !== null) {
+      return blockingMove;
     }
-  });
+  }
+
+  const preferredMoves = [4, 0, 2, 6, 8, 1, 3, 5, 7];
+  const availableMoves = preferredMoves.filter((index) => !board[index]);
+  if (!availableMoves.length) {
+    return undefined;
+  }
+
+  if (Math.random() > 0.55) {
+    return availableMoves[0];
+  }
 
-  return isMaximizing
-    ? moves.reduce((best, move) => (move.score > best.score ? move : best), { score: -Infinity })
-    : moves.reduce((best, move) => (move.score < best.score ? move : best), { score: Infinity });
+  return availableMoves[Math.floor(Math.random() * availableMoves.length)];
 }
 
 export default function TicTacToeGame({ onExit }) {
@@ -68,7 +86,7 @@ export default function TicTacToeGame({ onExit }) {
       return;
     }
 
-    const aiMove = minimax(nextBoard, true).index;
+    const aiMove = chooseAiMove(nextBoard);
     if (aiMove !== undefined) {
       nextBoard[aiMove] = "O";
       setBoard([...nextBoard]);
@@ -76,16 +94,28 @@ export default function TicTacToeGame({ onExit }) {
     }
   }
 
+  const resultMessage = winner
+    ? winner === "draw"
+      ? "Draw! That round was close."
+      : mode === "ai"
+        ? winner === "X"
+          ? "You win!"
+          : "The computer wins."
+        : `${winner} wins!`
+    : null;
+
   return (
     <div className="rounded-[28px] p-6 md:p-7" style={{ background: colors.cardBg, color: colors.secondaryText, border: `1px solid ${colors.cardBorder}` }}>
-      <div className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
-        <div>
-          <h3 className="font-display text-2xl">Tic Tac Toe</h3>
-          <p className="text-sm">Perfect-play AI or pass-and-play on the same screen.</p>
-        </div>
-        <button onClick={onExit} className="rounded-full px-4 py-2 text-sm font-bold" style={{ background: colors.breakBtn, color: colors.breakBtnText }}>
+      <div className="mb-6 flex flex-col gap-4">
+        <button onClick={onExit} className="self-end rounded-full px-4 py-2 text-sm font-bold" style={{ background: colors.breakBtn, color: colors.breakBtnText }}>
           End Break & Return to Work
         </button>
+        <div className="rounded-[24px] px-6 py-5 text-center" style={{ background: colors.cardBg, border: `2px solid ${colors.primary}` }}>
+          <h3 className="font-display text-4xl">Tic Tac Toe</h3>
+          <p className="mt-2 text-sm" style={{ color: colors.muted }}>
+            Take on the AI or pass and play on the same screen.
+          </p>
+        </div>
       </div>
       <div className="mb-6 flex flex-wrap gap-3">
         <button
@@ -123,10 +153,39 @@ export default function TicTacToeGame({ onExit }) {
           ))}
         </div>
       </div>
-      <div className="mt-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
-        <p className="font-bold">
-          {winner ? (winner === "draw" ? "Draw! Nicely matched." : `${winner} wins!`) : `Turn: ${turn}`}
-        </p>
+      <div
+        className="mt-5 rounded-[24px] px-5 py-4 text-center"
+        style={{
+          background: resultMessage
+            ? winner === "draw"
+              ? colors.secondary
+              : winner === "X"
+                ? colors.pillGoodBg
+                : colors.pillWarnBg
+            : colors.secondary,
+          color: resultMessage
+            ? winner === "draw"
+              ? colors.secondaryText
+              : winner === "X"
+                ? colors.pillGoodText
+                : colors.pillWarnText
+            : colors.secondaryText,
+          border: `1px solid ${
+            resultMessage
+              ? winner === "draw"
+                ? colors.cardBorder
+                : winner === "X"
+                  ? colors.pillGoodBorder
+                  : colors.pillWarnBorder
+              : colors.cardBorder
+          }`
+        }}
+      >
+        <div className="text-lg font-extrabold">
+          {resultMessage ?? (mode === "ai" ? "Beat the AI or force a draw." : `Turn: ${turn}`)}
+        </div>
+      </div>
+      <div className="mt-6 flex justify-end">
         <button onClick={reset} className="rounded-full px-4 py-2 text-sm font-bold" style={{ background: colors.breakBtn, color: colors.breakBtnText }}>
           Play again
         </button>
diff --git a/client/src/components/games/UnoGame.jsx b/client/src/components/games/UnoGame.jsx
index ca036e6..58eea3c 100644
--- a/client/src/components/games/UnoGame.jsx
+++ b/client/src/components/games/UnoGame.jsx
@@ -5,6 +5,14 @@ const UNO_COLORS = ["red", "yellow", "green", "blue"];
 const ACTION_TYPES = ["skip", "reverse", "draw2"];
 const AI_TURN_DELAY_MS = 5000;
 
+const CARD_STYLES = {
+  red: { background: "#f7d9d3", border: "#df9a8b", text: "#7f3c2e" },
+  yellow: { background: "#f8efc9", border: "#d8bc61", text: "#7a5a00" },
+  green: { background: "#d9f0dd", border: "#8cc39a", text: "#28583a" },
+  blue: { background: "#dbe8fb", border: "#92b3e3", text: "#284a7a" },
+  wild: { background: "#ebe4da", border: "#bba997", text: "#5d4d41" }
+};
+
 function shuffle(deck) {
   const next = [...deck];
   for (let index = next.length - 1; index > 0; index -= 1) {
@@ -61,6 +69,10 @@ function cardLabel(card) {
   return `${card.color} ${card.type}`;
 }
 
+function getCardTheme(card) {
+  return CARD_STYLES[card.color] ?? CARD_STYLES.wild;
+}
+
 function cloneState(state) {
   return {
     ...state,
@@ -360,28 +372,57 @@ export default function UnoGame({ onExit }) {
 
   const topCard = getTopCard(state);
   const activeColor = getActiveColor(state);
+  const currentPlayerLabel = state.currentPlayer === 0 ? "Your turn" : `Player ${state.currentPlayer + 1}'s turn`;
+  const winnerLabel =
+    winner === -1 ? null : winner === 0 ? "You win the round!" : `Player ${winner + 1} wins the round.`;
 
   return (
     <div className="rounded-[28px] p-6 md:p-7" style={{ background: colors.cardBg, color: colors.secondaryText, border: `1px solid ${colors.cardBorder}` }}>
-      <div className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
-        <div>
-          <h3 className="font-display text-2xl">UNO</h3>
-          <p className="text-sm">Single-player vs two AI opponents with slower turns and hidden opponent hands.</p>
-        </div>
-        <button onClick={onExit} className="rounded-full px-4 py-2 text-sm font-bold" style={{ background: colors.breakBtn, color: colors.breakBtnText }}>
+      <div className="mb-6 flex flex-col gap-4">
+        <button onClick={onExit} className="self-end rounded-full px-4 py-2 text-sm font-bold" style={{ background: colors.breakBtn, color: colors.breakBtnText }}>
           End Break & Return to Work
         </button>
+        <div className="rounded-[24px] px-6 py-5 text-center" style={{ background: colors.cardBg, border: `2px solid ${colors.primary}` }}>
+          <h3 className="font-display text-4xl">UNO</h3>
+          <p className="mt-2 text-sm" style={{ color: colors.muted }}>
+            Single-player vs two AI opponents with slower turns and hidden opponent hands.
+          </p>
+        </div>
       </div>
 
-      <div className="grid gap-6 lg:grid-cols-[240px_1fr]">
-        <aside className="rounded-[24px] p-4" style={{ background: colors.secondary }}>
-          <div className="text-sm font-bold">Discard pile</div>
-          <div className="mt-3 rounded-[24px] p-5 text-center font-bold capitalize" style={{ background: colors.cardBg }}>
-            {cardLabel(topCard)}
+      <div className="grid gap-5 xl:grid-cols-[280px_minmax(0,1fr)]">
+        <aside className="rounded-[28px] p-5" style={{ background: colors.secondary, border: `1px solid ${colors.cardBorder}` }}>
+          <div className="text-sm font-bold uppercase tracking-[0.16em]" style={{ color: colors.muted }}>Game status</div>
+          <div className="mt-4 rounded-[24px] p-5" style={{ background: colors.cardBg, border: `1px solid ${colors.cardBorder}` }}>
+            <div className="text-sm font-bold uppercase tracking-[0.14em]" style={{ color: colors.muted }}>Last played</div>
+            <div
+              className="mt-3 rounded-[22px] p-5 text-center font-bold capitalize"
+              style={{
+                background: getCardTheme(topCard).background,
+                color: getCardTheme(topCard).text,
+                border: `1px solid ${getCardTheme(topCard).border}`
+              }}
+            >
+              {cardLabel(topCard)}
+            </div>
+            <p className="mt-4 text-base font-semibold capitalize">Active color: {activeColor}</p>
+            <p className="mt-2 text-base font-bold">{currentPlayerLabel}</p>
+            <p className="mt-3 text-sm leading-7">{state.message}</p>
           </div>
-          <p className="mt-3 text-sm font-semibold capitalize">Active color: {activeColor}</p>
-          <p className="mt-4 text-sm">{state.message}</p>
-          <p className="mt-2 text-sm">Current turn: Player {state.currentPlayer + 1}</p>
+
+          {winnerLabel ? (
+            <div
+              className="mt-4 rounded-[22px] px-4 py-3 text-sm font-extrabold"
+              style={{
+                background: winner === 0 ? colors.pillGoodBg : colors.pillWarnBg,
+                color: winner === 0 ? colors.pillGoodText : colors.pillWarnText,
+                border: `1px solid ${winner === 0 ? colors.pillGoodBorder : colors.pillWarnBorder}`
+              }}
+            >
+              {winnerLabel}
+            </div>
+          ) : null}
+
           <div className="mt-4 flex flex-wrap gap-2">
             <button
               onClick={drawForPlayer}
@@ -408,13 +449,13 @@ export default function UnoGame({ onExit }) {
             </button>
           </div>
           <div className="mt-5">
-            <div className="text-sm font-bold">Recent moves</div>
-            <div className="mt-2 space-y-2 text-sm">
+            <div className="text-sm font-bold uppercase tracking-[0.16em]" style={{ color: colors.muted }}>Recent moves</div>
+            <div className="mt-3 space-y-3 text-sm">
               {state.turnFeed.map((entry, index) => (
                 <div
                   key={`${entry}-${index}`}
-                  className="rounded-2xl px-3 py-2"
-                  style={{ background: colors.cardBg }}
+                  className="rounded-[20px] px-4 py-3 leading-7"
+                  style={{ background: colors.cardBg, border: `1px solid ${colors.cardBorder}` }}
                 >
                   {entry}
                 </div>
@@ -425,18 +466,18 @@ export default function UnoGame({ onExit }) {
 
         <div className="space-y-4">
           {[1, 2].map((player) => (
-            <div key={player} className="rounded-[24px] p-4" style={{ background: colors.secondary }}>
+            <div key={player} className="rounded-[24px] p-4" style={{ background: colors.secondary, border: `1px solid ${colors.cardBorder}` }}>
               <div className="flex items-center justify-between">
                 <div className="font-bold">Player {player + 1}</div>
                 <div className="text-sm" style={{ color: colors.muted }}>
                   {state.players[player].length} card{state.players[player].length === 1 ? "" : "s"}
                 </div>
               </div>
-              <div className="mt-3 flex flex-wrap gap-2">
+              <div className="mt-4 flex flex-wrap gap-3">
                 {state.players[player].map((card) => (
                   <div
                     key={card.id}
-                    className="flex h-14 w-10 items-center justify-center rounded-xl text-[10px] font-bold tracking-wide"
+                    className="flex h-14 w-11 items-center justify-center rounded-2xl text-xs font-bold tracking-wide"
                     style={{ background: colors.primary, color: colors.primaryText }}
                   >
                     UNO
@@ -446,50 +487,60 @@ export default function UnoGame({ onExit }) {
             </div>
           ))}
 
-          <div className="rounded-[24px] p-4" style={{ background: colors.cardBg }}>
-            <div className="mb-3 flex items-center justify-between">
-              <div className="font-bold">Your hand</div>
-              {winner !== -1 ? <div className="text-sm font-bold">{winner === 0 ? "You win!" : `Player ${winner + 1} wins!`}</div> : null}
+          <div className="rounded-[28px] p-5" style={{ background: colors.cardBg, border: `1px solid ${colors.cardBorder}` }}>
+            <div className="mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+              <div>
+                <div className="text-sm font-bold uppercase tracking-[0.16em]" style={{ color: colors.muted }}>Your hand</div>
+                <div className="mt-1 text-lg font-bold">Your cards</div>
+              </div>
+              {winnerLabel ? <div className="text-sm font-bold">{winnerLabel}</div> : null}
             </div>
-            <div className="mb-4 flex flex-wrap items-center gap-2 text-sm">
-              <span style={{ color: colors.muted }}>
+            <div className="mb-5 rounded-[24px] p-4" style={{ background: colors.secondary, border: `1px solid ${colors.cardBorder}` }}>
+              <div className="flex flex-col gap-3 text-sm">
+                <span className="text-base font-semibold" style={{ color: colors.secondaryText }}>
                 {selectedCard ? `Selected: ${cardLabel(selectedCard)}` : "Select a card to play."}
-              </span>
-              <button
-                onClick={playSelectedCard}
-                disabled={!selectedCard || state.currentPlayer !== 0 || winner !== -1 || isAiThinking || !canPlay(selectedCard, state)}
-                className="rounded-full px-4 py-2 font-bold disabled:cursor-not-allowed disabled:opacity-50"
-                style={{ background: colors.breakBtn, color: colors.breakBtnText }}
-              >
-                Play selected
-              </button>
-              <button
-                onClick={() => setSelectedCardId(null)}
-                disabled={!selectedCard}
-                className="rounded-full px-4 py-2 font-bold disabled:cursor-not-allowed disabled:opacity-50"
-                style={{ background: colors.secondary, color: colors.secondaryText }}
-              >
-                Clear
-              </button>
+                </span>
+                <div className="flex flex-wrap gap-2">
+                  <button
+                    onClick={playSelectedCard}
+                    disabled={!selectedCard || state.currentPlayer !== 0 || winner !== -1 || isAiThinking || !canPlay(selectedCard, state)}
+                    className="rounded-full px-4 py-2 font-bold disabled:cursor-not-allowed disabled:opacity-50"
+                    style={{ background: colors.breakBtn, color: colors.breakBtnText }}
+                  >
+                    Play selected
+                  </button>
+                  <button
+                    onClick={() => setSelectedCardId(null)}
+                    disabled={!selectedCard}
+                    className="rounded-full px-4 py-2 font-bold disabled:cursor-not-allowed disabled:opacity-50"
+                    style={{ background: colors.cardBg, color: colors.secondaryText }}
+                  >
+                    Clear
+                  </button>
+                </div>
+              </div>
             </div>
-            <div className="flex flex-wrap gap-3">
+            <div className="flex flex-wrap gap-4">
               {state.players[0].map((card) => {
                 const selected = selectedCardId === card.id;
                 const playable = canPlay(card, state) && state.currentPlayer === 0 && !isAiThinking;
+                const theme = getCardTheme(card);
 
                 return (
                   <button
                     key={card.id}
                     onClick={() => setSelectedCardId((current) => (current === card.id ? null : card.id))}
-                    className="rounded-[22px] px-4 py-5 text-left text-sm font-bold shadow-sm transition"
+                    className="min-h-[118px] min-w-[96px] rounded-[24px] px-4 py-4 text-left text-sm font-bold shadow-sm transition"
                     style={{
-                      background: colors.cardBg,
-                      color: colors.secondaryText,
+                      background: theme.background,
+                      color: theme.text,
                       opacity: playable ? 1 : 0.6,
-                      boxShadow: selected ? `0 0 0 3px ${colors.burnWarn}` : `inset 0 0 0 1px ${colors.cardBorder}`
+                      boxShadow: selected ? `0 0 0 3px ${colors.burnWarn}` : `inset 0 0 0 1px ${theme.border}`
                     }}
                   >
-                    {cardLabel(card)}
+                    <div className="text-xs font-bold uppercase tracking-[0.14em]">{card.color === "wild" ? "Wild" : card.color}</div>
+                    <div className="mt-3 text-xl font-extrabold">{card.type === "number" ? card.value : card.type === "wild4" ? "+4" : card.type}</div>
+                    <div className="mt-3 text-sm leading-6">{cardLabel(card)}</div>
                   </button>
                 );
               })}
@@ -497,6 +548,32 @@ export default function UnoGame({ onExit }) {
           </div>
         </div>
       </div>
+      <div
+        className="mt-5 rounded-[24px] px-5 py-4 text-center"
+        style={{
+          background: winnerLabel
+            ? winner === 0
+              ? colors.pillGoodBg
+              : colors.pillWarnBg
+            : colors.secondary,
+          color: winnerLabel
+            ? winner === 0
+              ? colors.pillGoodText
+              : colors.pillWarnText
+            : colors.secondaryText,
+          border: `1px solid ${
+            winnerLabel
+              ? winner === 0
+                ? colors.pillGoodBorder
+                : colors.pillWarnBorder
+              : colors.cardBorder
+          }`
+        }}
+      >
+        <div className="text-lg font-extrabold">
+          {winnerLabel ?? currentPlayerLabel}
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/client/src/lib/constants.js b/client/src/lib/constants.js
index b1eafda..4cf13c2 100644
--- a/client/src/lib/constants.js
+++ b/client/src/lib/constants.js
@@ -5,6 +5,7 @@ export const STORAGE_KEYS = {
   fatigueOptIn: "wellby.fatigueOptIn",
   breakLogs: "wellby.breakLogs",
   gameScores: "wellby.gameScores",
+  extensionPromptInterval: "wellby.extensionPromptInterval"
   lastLoginName: "wellby.lastLoginName",
   plannerTasks: "wellby.plannerTasks",
   dashboardSections: "wellby.dashboardSections"
@@ -34,3 +35,10 @@ export const SENIORITY_OPTIONS = [
   { value: 4, label: "Lead / Staff" },
   { value: 5, label: "Director+" }
 ];
+
+export const EXTENSION_PROMPT_INTERVAL_OPTIONS = [
+  { value: 5, label: "Every 5 minutes" },
+  { value: 10, label: "Every 10 minutes" },
+  { value: 15, label: "Every 15 minutes" },
+  { value: 30, label: "Every 30 minutes" }
+];
diff --git a/extension/wellby-float/README.md b/extension/wellby-float/README.md
new file mode 100644
index 0000000..93231a7
--- /dev/null
+++ b/extension/wellby-float/README.md
@@ -0,0 +1,26 @@
+# Wellby Float
+
+This is a first-pass Chrome extension that injects a small floating Wellby launcher onto regular web pages.
+
+## What it does
+
+- Adds a small launcher pill on the right side of most websites
+- Opens the local Wellby app at `http://localhost:3000`
+- Reuses the existing Wellby tab if it is already open
+
+## Load it in Chrome
+
+1. Open `chrome://extensions`
+2. Turn on `Developer mode`
+3. Click `Load unpacked`
+4. Select this folder:
+
+```text
+C:\Users\miche\projects\Hackathon-app\extension\wellby-float
+```
+
+## Notes
+
+- This will not appear on restricted Chrome pages like `chrome://` URLs or the Chrome Web Store
+- Wellby should be running locally at `http://localhost:3000`
+- This first version opens/focuses the main app in a tab rather than using a side panel
diff --git a/extension/wellby-float/background.js b/extension/wellby-float/background.js
new file mode 100644
index 0000000..996f09b
--- /dev/null
+++ b/extension/wellby-float/background.js
@@ -0,0 +1,108 @@
+const WELLBY_URL = "http://localhost:3000";
+
+function buildWellbyUrl(moodScore, stressLevel, intent, updatedAt) {
+  const url = new URL(WELLBY_URL);
+
+  if (Number.isFinite(moodScore)) {
+    url.searchParams.set("extensionMoodScore", String(moodScore));
+  }
+
+  if (Number.isFinite(stressLevel)) {
+    url.searchParams.set("extensionStressLevel", String(stressLevel));
+  }
+
+  if (intent) {
+    url.searchParams.set("extensionIntent", intent);
+  }
+
+  if (Number.isFinite(updatedAt)) {
+    url.searchParams.set("extensionMoodUpdatedAt", String(updatedAt));
+  }
+
+  return url.toString();
+}
+
+async function getWellbyTabs() {
+  const tabs = await chrome.tabs.query({});
+  return tabs.filter((tab) => tab.url && tab.url.startsWith(WELLBY_URL));
+}
+
+async function syncCheckInToWellby(moodScore, stressLevel, intent) {
+  if (!Number.isFinite(moodScore) && !Number.isFinite(stressLevel)) {
+    return;
+  }
+
+  const updatedAt = Date.now();
+  await chrome.storage.local.set({
+    wellbyExtensionMoodScore: moodScore,
+    wellbyExtensionStressLevel: stressLevel,
+    wellbyExtensionIntent: intent ?? "open",
+    wellbyExtensionUpdatedAt: updatedAt
+  });
+
+  const existingWellbyTabs = await getWellbyTabs();
+
+  await Promise.all(
+    existingWellbyTabs.map((tab) =>
+      tab.id
+        ? chrome.tabs.sendMessage(tab.id, {
+            type: "SET_WELLBY_CHECKIN",
+            moodScore,
+            stressLevel,
+            intent: intent ?? "open",
+            updatedAt
+          }).catch(() => null)
+        : Promise.resolve(null)
+    )
+  );
+
+  return updatedAt;
+}
+
+async function focusOrOpenWellby({ moodScore, stressLevel, intent } = {}) {
+  let updatedAt = null;
+  if (Number.isFinite(moodScore) || Number.isFinite(stressLevel)) {
+    updatedAt = await syncCheckInToWellby(moodScore, stressLevel, intent);
+  }
+
+  const existingWellbyTabs = await getWellbyTabs();
+  const existingWellbyTab = existingWellbyTabs[0];
+
+  if (existingWellbyTab?.id) {
+    await chrome.tabs.update(existingWellbyTab.id, { active: true });
+    if (existingWellbyTab.windowId) {
+      await chrome.windows.update(existingWellbyTab.windowId, { focused: true });
+    }
+    return;
+  }
+
+  await chrome.tabs.create({ url: buildWellbyUrl(moodScore, stressLevel, intent, updatedAt), active: true });
+}
+
+chrome.action.onClicked.addListener(async () => {
+  await focusOrOpenWellby();
+});
+
+chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => {
+  if (message?.type === "SYNC_WELLBY_CHECKIN") {
+    syncCheckInToWellby(Number(message.moodScore), Number(message.stressLevel), message.intent)
+      .then(() => sendResponse({ ok: true }))
+      .catch((error) => sendResponse({ ok: false, error: error.message }));
+
+    return true;
+  }
+
+  if (message?.type === "OPEN_WELLBY") {
+    focusOrOpenWellby({
+      moodScore: Number(message.moodScore),
+      stressLevel: Number(message.stressLevel),
+      intent: message.intent
+    })
+      .then(() => sendResponse({ ok: true }))
+      .catch((error) => sendResponse({ ok: false, error: error.message }));
+
+    return true;
+  }
+
+  return false;
+});
diff --git a/extension/wellby-float/content.css b/extension/wellby-float/content.css
new file mode 100644
index 0000000..870e6ec
--- /dev/null
+++ b/extension/wellby-float/content.css
@@ -0,0 +1,242 @@
+#wellby-floating-launcher {
+  --wellby-ext-panel-bg: rgba(255, 250, 244, 0.99);
+  --wellby-ext-panel-bg-soft: rgba(255, 255, 255, 0.78);
+  --wellby-ext-rail-bg: rgba(255, 250, 244, 0.98);
+  --wellby-ext-text: #4b3423;
+  --wellby-ext-muted: #8e7158;
+  --wellby-ext-border: #ddcdbd;
+  --wellby-ext-border-soft: #eadccf;
+  --wellby-ext-accent: #8e7158;
+  --wellby-ext-accent-strong: #4b3423;
+  --wellby-ext-accent-text: #fff7ee;
+  --wellby-ext-shadow: rgba(75, 52, 35, 0.14);
+  position: fixed;
+  top: 50%;
+  right: 0;
+  z-index: 2147483646;
+  transform: translateY(-50%);
+  font-family: Georgia, "Times New Roman", serif;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: var(--wellby-ext-text);
+}
+
+#wellby-floating-launcher .wellby-rail-button {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 44px;
+  border: 1px solid var(--wellby-ext-border);
+  border-right: none;
+  border-radius: 16px 0 0 16px;
+  background: var(--wellby-ext-rail-bg);
+  box-shadow: 0 18px 40px var(--wellby-ext-shadow);
+  color: var(--wellby-ext-text);
+  cursor: pointer;
+  overflow: hidden;
+  padding: 10px 10px 10px 12px;
+  transition: transform 180ms ease, box-shadow 180ms ease, min-width 180ms ease;
+}
+
+#wellby-floating-launcher .wellby-rail-button:hover {
+  box-shadow: 0 22px 44px var(--wellby-ext-shadow);
+  min-width: 92px;
+  transform: translateX(-4px);
+}
+
+#wellby-floating-launcher .wellby-rail-button:focus-visible,
+#wellby-floating-launcher .wellby-action-button:focus-visible,
+#wellby-floating-launcher .wellby-mood-option:focus-visible {
+  outline: 2px solid var(--wellby-ext-accent);
+  outline-offset: 2px;
+}
+
+.wellby-launcher-dot {
+  display: inline-flex;
+  width: 14px;
+  height: 14px;
+  border-radius: 999px;
+  background: var(--wellby-ext-accent);
+  flex-shrink: 0;
+}
+
+.wellby-launcher-text {
+  white-space: nowrap;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+}
+
+#wellby-floating-launcher .wellby-mood-panel {
+  width: 238px;
+  border: 1px solid var(--wellby-ext-border);
+  border-right: none;
+  border-radius: 18px 0 0 18px;
+  background: var(--wellby-ext-panel-bg);
+  box-shadow: 0 18px 40px var(--wellby-ext-shadow);
+  color: var(--wellby-ext-text);
+  padding: 12px;
+}
+
+#wellby-floating-launcher .wellby-panel-title {
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--wellby-ext-muted);
+}
+
+#wellby-floating-launcher .wellby-panel-body {
+  margin-top: 6px;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+#wellby-floating-launcher .wellby-task-line {
+  margin-top: 10px;
+  display: flex;
+  gap: 6px;
+  align-items: baseline;
+  font-size: 11px;
+  line-height: 1.4;
+}
+
+#wellby-floating-launcher .wellby-task-label {
+  flex: 0 0 auto;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--wellby-ext-muted);
+}
+
+#wellby-floating-launcher .wellby-task-value {
+  min-width: 0;
+  color: var(--wellby-ext-text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+#wellby-floating-launcher .wellby-task-panel {
+  margin-top: 8px;
+  border: 1px solid var(--wellby-ext-border-soft);
+  border-radius: 14px;
+  background: var(--wellby-ext-panel-bg-soft);
+  padding: 8px 9px;
+}
+
+#wellby-floating-launcher .wellby-task-panel-label {
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--wellby-ext-muted);
+}
+
+#wellby-floating-launcher .wellby-task-list {
+  margin-top: 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+#wellby-floating-launcher .wellby-task-item,
+#wellby-floating-launcher .wellby-task-empty {
+  font-size: 11px;
+  line-height: 1.45;
+  color: var(--wellby-ext-text);
+}
+
+#wellby-floating-launcher .wellby-task-item {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+#wellby-floating-launcher .wellby-task-empty {
+  color: var(--wellby-ext-muted);
+}
+
+#wellby-floating-launcher .wellby-section-label {
+  margin-top: 12px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--wellby-ext-muted);
+}
+
+#wellby-floating-launcher .wellby-section-hint {
+  margin-top: 4px;
+  font-size: 12px;
+  line-height: 1.4;
+  color: var(--wellby-ext-muted);
+}
+
+#wellby-floating-launcher .wellby-mood-row {
+  display: flex;
+  gap: 8px;
+  margin-top: 10px;
+  flex-wrap: wrap;
+}
+
+#wellby-floating-launcher .wellby-mood-option {
+  width: 28px;
+  height: 28px;
+  border-radius: 999px;
+  border: 1px solid var(--wellby-ext-border);
+  background: var(--wellby-ext-panel-bg-soft);
+  color: var(--wellby-ext-text);
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+#wellby-floating-launcher .wellby-mood-option.is-selected {
+  background: var(--wellby-ext-accent);
+  border-color: var(--wellby-ext-accent);
+  color: var(--wellby-ext-accent-text);
+}
+
+#wellby-floating-launcher .wellby-feedback {
+  margin-top: 12px;
+  font-size: 13px;
+  line-height: 1.55;
+  color: var(--wellby-ext-muted);
+}
+
+#wellby-floating-launcher .wellby-action-button {
+  flex: 1 1 auto;
+  border: none;
+  border-radius: 999px;
+  background: var(--wellby-ext-accent-strong);
+  color: var(--wellby-ext-accent-text);
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 700;
+  padding: 10px 12px;
+}
+
+#wellby-floating-launcher .wellby-action-row {
+  display: flex;
+  gap: 8px;
+  margin-top: 12px;
+}
+
+#wellby-floating-launcher .wellby-dismiss-button {
+  flex: 0 0 auto;
+  border: 1px solid var(--wellby-ext-border);
+  border-radius: 999px;
+  background: var(--wellby-ext-panel-bg-soft);
+  color: var(--wellby-ext-text);
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 700;
+  padding: 10px 14px;
+}
+
+#wellby-floating-launcher .wellby-dismiss-button:focus-visible {
+  outline: 2px solid var(--wellby-ext-accent);
+  outline-offset: 2px;
+}
diff --git a/extension/wellby-float/content.js b/extension/wellby-float/content.js
new file mode 100644
index 0000000..2a4fca0
--- /dev/null
+++ b/extension/wellby-float/content.js
@@ -0,0 +1,637 @@
+(function mountWellbyLauncher() {
+  const EXTENSION_THEME_TOKENS = {
+    warm: {
+      light: {
+        panelBg: "rgba(255, 250, 244, 0.99)",
+        panelBgSoft: "rgba(255, 255, 255, 0.78)",
+        railBg: "rgba(255, 250, 244, 0.98)",
+        text: "#4b3423",
+        muted: "#8e7158",
+        border: "#ddcdbd",
+        borderSoft: "#eadccf",
+        accent: "#8e7158",
+        accentStrong: "#4b3423",
+        accentText: "#fff7ee",
+        shadow: "rgba(75, 52, 35, 0.14)"
+      },
+      dark: {
+        panelBg: "rgba(24, 17, 13, 0.98)",
+        panelBgSoft: "rgba(34, 24, 18, 0.9)",
+        railBg: "rgba(24, 17, 13, 0.97)",
+        text: "#ede4d6",
+        muted: "#b5967e",
+        border: "#5a3d2b",
+        borderSoft: "#3d2b1f",
+        accent: "#b5967e",
+        accentStrong: "#b5967e",
+        accentText: "#1a1210",
+        shadow: "rgba(0, 0, 0, 0.28)"
+      }
+    },
+    cool: {
+      light: {
+        panelBg: "rgba(248, 251, 255, 0.99)",
+        panelBgSoft: "rgba(255, 255, 255, 0.8)",
+        railBg: "rgba(248, 251, 255, 0.98)",
+        text: "#1e3a5f",
+        muted: "#5c84ad",
+        border: "#c9d9ee",
+        borderSoft: "#dce8f5",
+        accent: "#3a6ea8",
+        accentStrong: "#1e3a5f",
+        accentText: "#f4f7fb",
+        shadow: "rgba(30, 58, 95, 0.14)"
+      },
+      dark: {
+        panelBg: "rgba(12, 26, 41, 0.98)",
+        panelBgSoft: "rgba(20, 35, 56, 0.9)",
+        railBg: "rgba(12, 26, 41, 0.97)",
+        text: "#dde9f5",
+        muted: "#7aaed4",
+        border: "#2d5080",
+        borderSoft: "#1e3a5f",
+        accent: "#7aaed4",
+        accentStrong: "#7aaed4",
+        accentText: "#0d1b2a",
+        shadow: "rgba(0, 0, 0, 0.28)"
+      }
+    },
+    dark: {
+      light: {
+        panelBg: "rgba(247, 249, 251, 0.99)",
+        panelBgSoft: "rgba(255, 255, 255, 0.8)",
+        railBg: "rgba(247, 249, 251, 0.98)",
+        text: "#1c2128",
+        muted: "#6f8296",
+        border: "#d0d8e0",
+        borderSoft: "#dde4ea",
+        accent: "#5a8a6a",
+        accentStrong: "#1c2128",
+        accentText: "#e8f4ec",
+        shadow: "rgba(28, 33, 40, 0.14)"
+      },
+      dark: {
+        panelBg: "rgba(13, 17, 23, 0.98)",
+        panelBgSoft: "rgba(28, 33, 40, 0.9)",
+        railBg: "rgba(13, 17, 23, 0.97)",
+        text: "#c8d8e8",
+        muted: "#7ab890",
+        border: "#2d3748",
+        borderSoft: "#1c2128",
+        accent: "#7ab890",
+        accentStrong: "#7ab890",
+        accentText: "#0d1117",
+        shadow: "rgba(0, 0, 0, 0.3)"
+      }
+    },
+    pastel: {
+      light: {
+        panelBg: "rgba(250, 247, 255, 0.99)",
+        panelBgSoft: "rgba(255, 255, 255, 0.8)",
+        railBg: "rgba(250, 247, 255, 0.98)",
+        text: "#3a2860",
+        muted: "#7b6ba8",
+        border: "#ddd6f0",
+        borderSoft: "#e8e1f5",
+        accent: "#7b6ba8",
+        accentStrong: "#4a3870",
+        accentText: "#ede8f8",
+        shadow: "rgba(74, 56, 112, 0.14)"
+      },
+      dark: {
+        panelBg: "rgba(15, 13, 24, 0.98)",
+        panelBgSoft: "rgba(26, 21, 48, 0.9)",
+        railBg: "rgba(15, 13, 24, 0.97)",
+        text: "#ede8f8",
+        muted: "#9a8ac0",
+        border: "#2a2040",
+        borderSoft: "#1a1530",
+        accent: "#9a8ac0",
+        accentStrong: "#9a8ac0",
+        accentText: "#0f0d18",
+        shadow: "rgba(0, 0, 0, 0.28)"
+      }
+    }
+  };
+
+  if (window.top !== window.self) {
+    return;
+  }
+
+  const isWellbyPage =
+    (window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1") &&
+    window.location.port === "3000";
+
+  if (isWellbyPage) {
+    let lastDeliveredMoodAt = 0;
+    let lastTaskValue = "";
+    let lastTaskListValue = "[]";
+
+    function syncThemeFromStorage() {
+      const nextTheme = String(window.localStorage.getItem("wellby-theme") || "warm");
+      const nextMode = String(window.localStorage.getItem("wellby-mode") || "light");
+
+      chrome.storage.local.set({
+        wellbyExtensionTheme: nextTheme,
+        wellbyExtensionMode: nextMode
+      });
+    }
+
+    function deliverCheckInSync(moodScore, stressLevel, intent, updatedAt) {
+      const nextUpdatedAt = Number(updatedAt) || Date.now();
+      if (nextUpdatedAt <= lastDeliveredMoodAt) {
+        return;
+      }
+
+      lastDeliveredMoodAt = nextUpdatedAt;
+      window.localStorage.setItem(
+        "wellbyExtensionCheckIn",
+        JSON.stringify({
+          moodScore: Number(moodScore),
+          stressLevel: Number(stressLevel),
+          intent: intent ?? "open",
+          updatedAt: nextUpdatedAt
+        })
+      );
+      window.postMessage(
+        {
+          source: "wellby-extension",
+          type: "MOOD_SYNC",
+          moodScore: Number(moodScore),
+          stressLevel: Number(stressLevel),
+          intent: intent ?? "open",
+          updatedAt: nextUpdatedAt
+        },
+        window.location.origin
+      );
+    }
+
+    function syncStoredMood() {
+      chrome.storage.local
+        .get([
+          "wellbyExtensionMoodScore",
+          "wellbyExtensionStressLevel",
+          "wellbyExtensionIntent",
+          "wellbyExtensionUpdatedAt"
+        ])
+        .then((stored) => {
+          if (
+            !Number.isFinite(Number(stored.wellbyExtensionMoodScore)) &&
+            !Number.isFinite(Number(stored.wellbyExtensionStressLevel))
+          ) {
+            return;
+          }
+
+          deliverCheckInSync(
+            stored.wellbyExtensionMoodScore,
+            stored.wellbyExtensionStressLevel,
+            stored.wellbyExtensionIntent,
+            stored.wellbyExtensionUpdatedAt
+          );
+        });
+    }
+
+    function syncCurrentTaskFromStorage() {
+      const nextTaskValue = String(window.localStorage.getItem("wellbyCurrentTask") || "");
+      if (nextTaskValue === lastTaskValue) {
+      } else {
+        lastTaskValue = nextTaskValue;
+        chrome.storage.local.set({
+          wellbyCurrentTask: nextTaskValue
+        });
+      }
+
+      const nextTaskListValue = String(window.localStorage.getItem("wellbyActiveTasks") || "[]");
+      if (nextTaskListValue === lastTaskListValue) {
+        return;
+      }
+
+      lastTaskListValue = nextTaskListValue;
+
+      try {
+        const parsedTasks = JSON.parse(nextTaskListValue);
+        chrome.storage.local.set({
+          wellbyActiveTasks: Array.isArray(parsedTasks) ? parsedTasks : []
+        });
+      } catch {
+        chrome.storage.local.set({
+          wellbyActiveTasks: []
+        });
+      }
+    }
+
+    window.addEventListener("message", (event) => {
+      if (event.origin !== window.location.origin) {
+        return;
+      }
+
+      if (event.data?.source !== "wellby-app") {
+        return;
+      }
+
+      if (event.data?.type === "SETTINGS_SYNC") {
+        chrome.storage.local.set({
+          wellbyPromptIntervalMinutes: Number(event.data.extensionPromptInterval) || 5,
+          wellbyExtensionTheme: String(event.data.theme || "warm"),
+          wellbyExtensionMode: String(event.data.mode || "light")
+        });
+        return;
+      }
+
+      if (event.data?.type === "TASK_SYNC") {
+        chrome.storage.local.set({
+          wellbyCurrentTask: String(event.data.currentTask || ""),
+          wellbyActiveTasks: Array.isArray(event.data.activeTasks) ? event.data.activeTasks : []
+        });
+      }
+    });
+
+    window.addEventListener("focus", syncStoredMood);
+    document.addEventListener("visibilitychange", () => {
+      if (document.visibilityState === "visible") {
+        syncStoredMood();
+        syncCurrentTaskFromStorage();
+        syncThemeFromStorage();
+      }
+    });
+
+    chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => {
+      if (message?.type !== "SET_WELLBY_CHECKIN") {
+        return false;
+      }
+
+      deliverCheckInSync(message.moodScore, message.stressLevel, message.intent, message.updatedAt);
+
+      sendResponse({ ok: true });
+      return false;
+    });
+
+    syncStoredMood();
+    syncCurrentTaskFromStorage();
+    syncThemeFromStorage();
+    const taskSyncInterval = window.setInterval(syncCurrentTaskFromStorage, 750);
+    const themeSyncInterval = window.setInterval(syncThemeFromStorage, 1500);
+
+    return () => {
+      window.clearInterval(taskSyncInterval);
+      window.clearInterval(themeSyncInterval);
+    };
+  }
+
+  if (document.getElementById("wellby-floating-launcher")) {
+    return;
+  }
+
+  const host = document.createElement("div");
+  host.id = "wellby-floating-launcher";
+
+  const railButton = document.createElement("button");
+  railButton.type = "button";
+  railButton.className = "wellby-rail-button";
+  railButton.setAttribute("aria-label", "Open Wellby mood check");
+  railButton.title = "Wellby mood check";
+
+  const dot = document.createElement("span");
+  dot.className = "wellby-launcher-dot";
+  dot.setAttribute("aria-hidden", "true");
+
+  const text = document.createElement("span");
+  text.className = "wellby-launcher-text";
+  text.textContent = "Wellby";
+
+  railButton.appendChild(dot);
+  railButton.appendChild(text);
+
+  const panel = document.createElement("div");
+  panel.className = "wellby-mood-panel";
+  panel.hidden = true;
+
+  const panelTitle = document.createElement("div");
+  panelTitle.className = "wellby-panel-title";
+  panelTitle.textContent = "Quick mood + stress check";
+
+  const panelBody = document.createElement("div");
+  panelBody.className = "wellby-panel-body";
+  panelBody.textContent = "Share both so Wellby can keep your app check-in in sync.";
+
+  const taskLine = document.createElement("div");
+  taskLine.className = "wellby-task-line";
+
+  const taskLabel = document.createElement("span");
+  taskLabel.className = "wellby-task-label";
+  taskLabel.textContent = "Current task:";
+
+  const taskValue = document.createElement("span");
+  taskValue.className = "wellby-task-value";
+  taskValue.textContent = "No active task";
+
+  taskLine.appendChild(taskLabel);
+  taskLine.appendChild(taskValue);
+
+  const taskPanel = document.createElement("div");
+  taskPanel.className = "wellby-task-panel";
+
+  const taskPanelLabel = document.createElement("div");
+  taskPanelLabel.className = "wellby-task-panel-label";
+  taskPanelLabel.textContent = "Active tasks";
+
+  const taskList = document.createElement("div");
+  taskList.className = "wellby-task-list";
+
+  taskPanel.appendChild(taskPanelLabel);
+  taskPanel.appendChild(taskList);
+
+  const moodLabel = document.createElement("div");
+  moodLabel.className = "wellby-section-label";
+  moodLabel.textContent = "Mood";
+
+  const moodHint = document.createElement("div");
+  moodHint.className = "wellby-section-hint";
+  moodHint.textContent = "1 = low mood, 5 = feeling great";
+
+  const moodRow = document.createElement("div");
+  moodRow.className = "wellby-mood-row";
+
+  const stressLabel = document.createElement("div");
+  stressLabel.className = "wellby-section-label";
+  stressLabel.textContent = "Stress";
+
+  const stressHint = document.createElement("div");
+  stressHint.className = "wellby-section-hint";
+  stressHint.textContent = "1 = calm, 5 = overloaded";
+
+  const stressRow = document.createElement("div");
+  stressRow.className = "wellby-mood-row";
+
+  const feedback = document.createElement("div");
+  feedback.className = "wellby-feedback";
+  feedback.hidden = true;
+
+  const actionButton = document.createElement("button");
+  actionButton.type = "button";
+  actionButton.className = "wellby-action-button";
+  actionButton.hidden = true;
+  actionButton.textContent = "Open Wellby";
+
+  const dismissButton = document.createElement("button");
+  dismissButton.type = "button";
+  dismissButton.className = "wellby-dismiss-button";
+  dismissButton.hidden = true;
+  dismissButton.textContent = "Close";
+
+  const actionRow = document.createElement("div");
+  actionRow.className = "wellby-action-row";
+  actionRow.hidden = true;
+
+  let selectedMoodScore = 3;
+  let selectedStressLevel = 3;
+  let selectedIntent = "open";
+  let promptTimerId = null;
+  let promptIntervalMinutes = 5;
+  let currentTheme = "warm";
+  let currentMode = "light";
+
+  function updateTaskValue(nextTask) {
+    const trimmedTask = String(nextTask || "").trim();
+    taskValue.textContent = trimmedTask || "No active task";
+    taskValue.title = trimmedTask || "No active task";
+  }
+
+  function updateTaskList(tasks) {
+    taskList.replaceChildren();
+
+    const normalizedTasks = Array.isArray(tasks)
+      ? tasks.map((task) => String(task || "").trim()).filter(Boolean)
+      : [];
+
+    if (!normalizedTasks.length) {
+      const emptyState = document.createElement("div");
+      emptyState.className = "wellby-task-empty";
+      emptyState.textContent = "No active tasks yet.";
+      taskList.appendChild(emptyState);
+      return;
+    }
+
+    normalizedTasks.forEach((task, index) => {
+      const item = document.createElement("div");
+      item.className = "wellby-task-item";
+      item.textContent = `${index + 1}. ${task}`;
+      item.title = task;
+      taskList.appendChild(item);
+    });
+  }
+
+  function resolveThemeTokens(theme, mode) {
+    const themeConfig = EXTENSION_THEME_TOKENS[theme] || EXTENSION_THEME_TOKENS.warm;
+    return themeConfig[mode] || themeConfig.light || EXTENSION_THEME_TOKENS.warm.light;
+  }
+
+  function applyTheme(theme, mode) {
+    currentTheme = theme || "warm";
+    currentMode = mode || "light";
+    const tokens = resolveThemeTokens(currentTheme, currentMode);
+
+    host.style.setProperty("--wellby-ext-panel-bg", tokens.panelBg);
+    host.style.setProperty("--wellby-ext-panel-bg-soft", tokens.panelBgSoft);
+    host.style.setProperty("--wellby-ext-rail-bg", tokens.railBg);
+    host.style.setProperty("--wellby-ext-text", tokens.text);
+    host.style.setProperty("--wellby-ext-muted", tokens.muted);
+    host.style.setProperty("--wellby-ext-border", tokens.border);
+    host.style.setProperty("--wellby-ext-border-soft", tokens.borderSoft);
+    host.style.setProperty("--wellby-ext-accent", tokens.accent);
+    host.style.setProperty("--wellby-ext-accent-strong", tokens.accentStrong);
+    host.style.setProperty("--wellby-ext-accent-text", tokens.accentText);
+    host.style.setProperty("--wellby-ext-shadow", tokens.shadow);
+  }
+
+  function closePanel() {
+    panel.hidden = true;
+    host.classList.remove("is-open");
+  }
+
+  function openPanel() {
+    panel.hidden = false;
+    host.classList.add("is-open");
+  }
+
+  function resetPromptTimer() {
+    if (promptTimerId) {
+      window.clearTimeout(promptTimerId);
+    }
+
+    promptTimerId = window.setTimeout(() => {
+      openPanel();
+      resetPromptTimer();
+    }, promptIntervalMinutes * 60 * 1000);
+  }
+
+  function applyPromptInterval(nextIntervalMinutes) {
+    promptIntervalMinutes = Math.max(1, Number(nextIntervalMinutes) || 5);
+    resetPromptTimer();
+  }
+
+  function setFeedback() {
+    feedback.hidden = false;
+    actionRow.hidden = false;
+    actionButton.hidden = false;
+    dismissButton.hidden = false;
+
+    if (selectedStressLevel >= 4) {
+      feedback.textContent = "We recommend taking a break.";
+      actionButton.textContent = "Take a Wellby break";
+      actionButton.dataset.intent = "break";
+      selectedIntent = "break";
+      return;
+    }
+
+    if (selectedStressLevel === 3 || selectedMoodScore <= 2) {
+      feedback.textContent = "A short reset might help if this keeps building.";
+      actionButton.textContent = "Open Wellby";
+      actionButton.dataset.intent = "check-in";
+      selectedIntent = "check-in";
+      return;
+    }
+
+    feedback.textContent = "You seem steady. Keep going if things still feel manageable.";
+    actionButton.textContent = "Open Wellby";
+    actionButton.dataset.intent = "open";
+    selectedIntent = "open";
+  }
+
+  function createScaleButton(level, row, applySelection, title) {
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = "wellby-mood-option";
+    button.textContent = String(level);
+    button.title = title;
+    if (level === 3) {
+      button.classList.add("is-selected");
+    }
+    button.addEventListener("click", () => {
+      row.querySelectorAll(".wellby-mood-option").forEach((buttonElement) => {
+        buttonElement.classList.remove("is-selected");
+      });
+      button.classList.add("is-selected");
+      applySelection(level);
+      setFeedback();
+      chrome.runtime.sendMessage({
+        type: "SYNC_WELLBY_CHECKIN",
+        moodScore: selectedMoodScore,
+        stressLevel: selectedStressLevel,
+        intent: selectedIntent
+      });
+    });
+    return button;
+  }
+
+  [1, 2, 3, 4, 5].forEach((level) => {
+    moodRow.appendChild(
+      createScaleButton(
+        level,
+        moodRow,
+        (selectedLevel) => {
+          selectedMoodScore = selectedLevel;
+        },
+        `Mood level ${level}`
+      )
+    );
+
+    stressRow.appendChild(
+      createScaleButton(
+        level,
+        stressRow,
+        (selectedLevel) => {
+          selectedStressLevel = selectedLevel;
+        },
+        `Stress level ${level}`
+      )
+    );
+  });
+  setFeedback();
+
+  railButton.addEventListener("click", () => {
+    if (panel.hidden) {
+      openPanel();
+    } else {
+      closePanel();
+    }
+  });
+
+  actionButton.addEventListener("click", () => {
+    chrome.runtime.sendMessage({
+      type: "OPEN_WELLBY",
+      moodScore: selectedMoodScore,
+      stressLevel: selectedStressLevel,
+      intent: selectedIntent
+    });
+  });
+
+  dismissButton.addEventListener("click", () => {
+    closePanel();
+    resetPromptTimer();
+  });
+
+  document.addEventListener("click", (event) => {
+    if (!host.contains(event.target)) {
+      closePanel();
+    }
+  });
+
+  chrome.storage.local
+    .get([
+      "wellbyPromptIntervalMinutes",
+      "wellbyCurrentTask",
+      "wellbyActiveTasks",
+      "wellbyExtensionTheme",
+      "wellbyExtensionMode"
+    ])
+    .then((stored) => {
+      applyPromptInterval(stored.wellbyPromptIntervalMinutes);
+      updateTaskValue(stored.wellbyCurrentTask);
+      updateTaskList(stored.wellbyActiveTasks);
+      applyTheme(stored.wellbyExtensionTheme, stored.wellbyExtensionMode);
+    });
+
+  chrome.storage.onChanged.addListener((changes, areaName) => {
+    if (areaName !== "local") {
+      return;
+    }
+
+    if (changes.wellbyPromptIntervalMinutes) {
+      applyPromptInterval(changes.wellbyPromptIntervalMinutes.newValue);
+    }
+
+    if (changes.wellbyCurrentTask) {
+      updateTaskValue(changes.wellbyCurrentTask.newValue);
+    }
+
+    if (changes.wellbyActiveTasks) {
+      updateTaskList(changes.wellbyActiveTasks.newValue);
+    }
+
+    if (changes.wellbyExtensionTheme || changes.wellbyExtensionMode) {
+      applyTheme(
+        changes.wellbyExtensionTheme ? changes.wellbyExtensionTheme.newValue : currentTheme,
+        changes.wellbyExtensionMode ? changes.wellbyExtensionMode.newValue : currentMode
+      );
+    }
+  });
+
+  panel.appendChild(panelTitle);
+  panel.appendChild(panelBody);
+  panel.appendChild(taskLine);
+  panel.appendChild(taskPanel);
+  panel.appendChild(moodLabel);
+  panel.appendChild(moodHint);
+  panel.appendChild(moodRow);
+  panel.appendChild(stressLabel);
+  panel.appendChild(stressHint);
+  panel.appendChild(stressRow);
+  panel.appendChild(feedback);
+  actionRow.appendChild(actionButton);
+  actionRow.appendChild(dismissButton);
+  panel.appendChild(actionRow);
+  host.appendChild(railButton);
+  host.appendChild(panel);
+  document.documentElement.appendChild(host);
+})();
diff --git a/extension/wellby-float/manifest.json b/extension/wellby-float/manifest.json
new file mode 100644
index 0000000..46a376c
--- /dev/null
+++ b/extension/wellby-float/manifest.json
@@ -0,0 +1,38 @@
+{
+  "manifest_version": 3,
+  "name": "Wellby Float",
+  "version": "0.1.0",
+  "description": "Adds a small Wellby launcher to web pages and opens the local Wellby app.",
+  "permissions": [
+    "tabs",
+    "storage"
+  ],
+  "host_permissions": [
+    "<all_urls>",
+    "http://localhost/*",
+    "http://127.0.0.1/*"
+  ],
+  "background": {
+    "service_worker": "background.js"
+  },
+  "content_scripts": [
+    {
+      "matches": [
+        "http://*/*",
+        "https://*/*",
+        "http://localhost/*",
+        "http://127.0.0.1/*"
+      ],
+      "js": [
+        "content.js"
+      ],
+      "css": [
+        "content.css"
+      ],
+      "run_at": "document_idle"
+    }
+  ],
+  "action": {
+    "default_title": "Open Wellby"
+  }
+}