diff --git a/.claude/research/paywall-redesign.md b/.claude/research/paywall-redesign.md
new file mode 100644
index 0000000000..5d63ad6c75
--- /dev/null
+++ b/.claude/research/paywall-redesign.md
@@ -0,0 +1,46 @@
+# Upgrade/Paywall Redesign — design brief (PR 6, task #7)
+
+Research-backed. Anchor: navy-violet orbital per DESIGN.md (semantic tokens only, ONE filled CTA, no countdowns/urgency).
+
+## Core insight (fixes the repetition + the yearly-only-feature problem)
+- **Chooser = 3 plan cards** (Free · **Pro-Yearly hero, center** · Pro-Monthly).
+- **Matrix = only 2 columns (Free vs Pro), placed BELOW the cards.** Monthly & yearly are the same Pro product minus one perk → the matrix never forks into near-identical columns (that *is* the current repetition).
+- Cards demote to **3–4 differentiators + price + CTA**; yearly card says **"Everything in Pro Monthly, plus AI Retrospective."** Matrix is the single exhaustive list.
+
+## Data-model change (also fixes the retrospective bug)
+`packages/shared/src/utils/upgrade.ts` — the matrix cell currently has `freeEnabled/proEnabled` booleans and retrospective is hacked `proEnabled:false`. Add a **third Pro state**: `pro: 'yearly' | true | false`. Render `'yearly'` as `✓` + a small inline **`Yearly`** pill. Shrink `upgrade.plans.proFeatures` to ~3–4 marquee keys; `trial.expired` points at the same source (no third copy).
+
+## Post-#186 entitlement matrix (reflect the free-tier rebalance — the screen is built on #186)
+| Feature | Free | Pro |
+|---|---|---|
+| Habits | 10 | Unlimited |
+| Sub-habits, Goals | ✗ | ✓ |
+| AI messages | 20/mo | 500/mo |
+| AI memory, Daily summary, Slip alerts, API keys | ✗ | ✓ |
+| Current/longest streak, XP/Level, Streak-freeze | **✓ (free, per #186)** | ✓ |
+| Achievements & XP system | ✗ | ✓ |
+| **AI Retrospective** | ✗ | **✓ `Yearly`** |
+| Themes/colors, Calendar, Ad-free | 1 theme | all |
+Mark availability **positively** (checks for what you get); **value-text for quantities** ("10"/"Unlimited"/"500/mo"); **"Not included"** text not a bare dash (a11y); grouped categories (Habits / AI / Insights / Personalization) + sticky header row.
+
+## Web layout (~640px cap)
+Gradient header (existing GradientTop) → ONE promise line (said once) → 3 cards: Free ($0, muted, outline "Stay free") · **Yearly center, raised+glow, violet badge "Save X%", filled glow pill CTA, per-month price + "billed $XX/yr · Save $Z a year"** · Monthly (right, outline, higher per-month = price anchor). Per-month price on ALL three (ascending $0→$X→$Y). Then "Compare every feature" → the 2-col matrix. Price in Inter (num), billing line Roboto (meta), else Rubik.
+
+## Trial framing (convert-not-start — trial is a backend signup grant; stores charge immediately)
+The paywall is a CONVERT surface, not trial-start. State-aware CTA:
+- Trial active → "Pro Trial · N days left", loss-aversion ("Keep your Pro features"), CTA **"Subscribe to keep Pro"**, "Cancel anytime."
+- Expired/free → "Your Pro trial ended…", CTA **"Upgrade to Pro."**
+- The "no card was ever taken · you dropped to Free automatically" line is a genuine trust differentiator — state it plainly.
+- Reassurance microcopy directly UNDER the CTA (not footer). First-person CTA ("…my…").
+- Discount: per-month-billed-annually as the big number + **"Save $Z a year"** (dollar > %); keep the "Save %" badge; use **"2 months free"** if the real discount is ~15–20%. Real discount only (no phantom monthly).
+
+## Mobile (~412px) — stack, don't shrink
+Header → **stacked full-width selectable cards** (Yearly hero pre-selected on top + "Save X%", Monthly below, Free as a quiet "Stay on Free" link) → 3–5 marquee differentiators (icon list, not a checkmark wall) → **"Compare all features" accordion** hiding the full matrix → **single sticky bottom glow-pill CTA** echoing the selected plan's price+terms → "No card · Cancel anytime" under it.
+
+## Forks decided (per "no more questions" — confirm later if wanted)
+1. Column order: **center-stage Yearly** (Free·Yearly·Monthly).
+2. Discount copy: **per-month + "Save $Z/year"** (+ "2 months free" if ~15–20%).
+3. Trial surface: **convert-not-start**, in-app CTA "Subscribe to keep Pro".
+
+## Files (from the inventory)
+shared: `utils/upgrade.ts` (the cell-state model + shrink proFeatures), i18n both locales. web: `app/(app)/upgrade/page.tsx`, `components/upgrade/{pricing-section,plan-selection,plan-comparison-cards}.tsx`. mobile: `app/upgrade.tsx` + `components/upgrade/*`. Verify whether phase-4 (#186) touched `upgrade.ts` before branching to avoid a merge conflict; set the matrix to the post-#186 split regardless.
diff --git a/apps/mobile/__tests__/components/calendar-shell.test.tsx b/apps/mobile/__tests__/components/calendar-shell.test.tsx
new file mode 100644
index 0000000000..8cd3dd48da
--- /dev/null
+++ b/apps/mobile/__tests__/components/calendar-shell.test.tsx
@@ -0,0 +1,116 @@
+import React from "react";
+import { describe, it, expect, vi } from "vitest";
+
+const TestRenderer = require("react-test-renderer");
+
+vi.mock("@/hooks/use-tour-target", () => ({
+  useTourTarget: () => {},
+}));
+
+vi.mock("lucide-react-native", () => {
+  const makeIcon = (name: string) => (props: Record<string, unknown>) =>
+    React.createElement(name, props);
+  return {
+    ChevronLeft: makeIcon("ChevronLeft"),
+    ChevronRight: makeIcon("ChevronRight"),
+    ChevronsLeft: makeIcon("ChevronsLeft"),
+    ChevronsRight: makeIcon("ChevronsRight"),
+  };
+});
+
+vi.mock("@/components/ui/stat-tile", () => ({
+  StatTile: ({ value, label }: { value: string | number; label: string }) =>
+    React.createElement(
+      "View",
+      null,
+      React.createElement("Text", null, value),
+      React.createElement("Text", null, label),
+    ),
+}));
+
+import { createTokensV2 } from "@/lib/theme";
+import { CalendarHeader } from "@/app/(tabs)/calendar/_components/calendar-shell";
+import {
+  CalendarStats,
+  type CalendarStat,
+} from "@/app/(tabs)/calendar/_components/calendar-stats";
+
+type TestNode = { type: unknown; props: Record<string, any> };
+type Tree = {
+  root: { findAll: (predicate: (node: TestNode) => boolean) => TestNode[] };
+};
+
+function hostTextValues(tree: Tree): unknown[] {
+  return tree.root
+    .findAll((node) => node.type === "Text")
+    .map((node) => node.props.children);
+}
+
+function pressByAccessibilityLabel(tree: Tree, label: string) {
+  const matches = tree.root.findAll(
+    (node) =>
+      typeof node.type === "string" && node.props.accessibilityLabel === label,
+  );
+  expect(matches).toHaveLength(1);
+  TestRenderer.act(() => {
+    matches[0]!.props.onPress();
+  });
+}
+
+describe("CalendarHeader year navigation (mobile)", () => {
+  it("fires the year handlers and renders the month label", () => {
+    const onPreviousYear = vi.fn();
+    const onNextYear = vi.fn();
+    const tokens = createTokensV2("purple", "dark");
+
+    let tree: Tree;
+    TestRenderer.act(() => {
+      tree = TestRenderer.create(
+        <CalendarHeader
+          monthLabel="April 2026"
+          previousMonthLabel="Previous month"
+          nextMonthLabel="Next month"
+          previousYearLabel="Previous year"
+          nextYearLabel="Next year"
+          currentMonthLabel="Go to current month"
+          onPreviousMonth={vi.fn()}
+          onNextMonth={vi.fn()}
+          onPreviousYear={onPreviousYear}
+          onNextYear={onNextYear}
+          onCurrentMonth={vi.fn()}
+          tokens={tokens}
+        />,
+      ) as unknown as Tree;
+    });
+
+    expect(hostTextValues(tree!)).toContain("April 2026");
+
+    pressByAccessibilityLabel(tree!, "Previous year");
+    pressByAccessibilityLabel(tree!, "Next year");
+
+    expect(onPreviousYear).toHaveBeenCalledTimes(1);
+    expect(onNextYear).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe("CalendarStats (mobile)", () => {
+  it("renders a tile for each stat, surfacing its label", () => {
+    const stats: readonly CalendarStat[] = [
+      { key: "bestStreak", emoji: "🔥", value: 5, label: "Best streak" },
+      { key: "totalLogs", emoji: "✅", value: 42, label: "Total logs" },
+      { key: "missed", emoji: "⚠️", value: 3, label: "Missed" },
+    ];
+
+    let tree: Tree;
+    TestRenderer.act(() => {
+      tree = TestRenderer.create(
+        <CalendarStats stats={stats} />,
+      ) as unknown as Tree;
+    });
+
+    const texts = hostTextValues(tree!);
+    expect(texts).toContain("Best streak");
+    expect(texts).toContain("Total logs");
+    expect(texts).toContain("Missed");
+  });
+});
diff --git a/apps/mobile/__tests__/components/calendar-sync-select-all-toggle.test.tsx b/apps/mobile/__tests__/components/calendar-sync-select-all-toggle.test.tsx
new file mode 100644
index 0000000000..d8a3d298b7
--- /dev/null
+++ b/apps/mobile/__tests__/components/calendar-sync-select-all-toggle.test.tsx
@@ -0,0 +1,71 @@
+import React from 'react'
+import { describe, expect, it, vi } from 'vitest'
+
+vi.mock('lucide-react-native', () => {
+  const ReactModule = require('react')
+  const createIcon = (name: string) => (props: Record<string, unknown>) =>
+    ReactModule.createElement(name, props)
+  return {
+    CheckCheck: createIcon('CheckCheck'),
+    SquareX: createIcon('SquareX'),
+  }
+})
+
+import { createTokensV2 } from '@/lib/theme'
+import { SelectAllToggle } from '@/app/calendar-sync-select-all-toggle'
+
+const TestRenderer = require('react-test-renderer')
+
+const tokens = createTokensV2('purple', 'dark')
+const selectAllLabel = 'Select all'
+const deselectAllLabel = 'Deselect all'
+
+interface TestNode {
+  type: unknown
+  props: Record<string, unknown>
+}
+
+function renderToggle(allSelected: boolean, onToggle: () => void) {
+  let tree: { root: { findAll: (predicate: (node: TestNode) => boolean) => TestNode[] } }
+  TestRenderer.act(() => {
+    tree = TestRenderer.create(
+      <SelectAllToggle
+        allSelected={allSelected}
+        onToggle={onToggle}
+        selectAllLabel={selectAllLabel}
+        deselectAllLabel={deselectAllLabel}
+        tokens={tokens}
+        tintStyle={undefined}
+      />,
+    )
+  })
+  return tree!
+}
+
+function getButton(tree: ReturnType<typeof renderToggle>) {
+  const nodes = tree.root.findAll(
+    (node) => typeof node.type === 'string' && node.props.accessibilityRole === 'button',
+  )
+  return nodes[0]!
+}
+
+describe('mobile SelectAllToggle', () => {
+  it('exposes the select-all label when nothing is selected', () => {
+    const tree = renderToggle(false, vi.fn())
+    expect(getButton(tree).props.accessibilityLabel).toBe(selectAllLabel)
+  })
+
+  it('exposes the deselect-all label when everything is selected', () => {
+    const tree = renderToggle(true, vi.fn())
+    expect(getButton(tree).props.accessibilityLabel).toBe(deselectAllLabel)
+  })
+
+  it('calls onToggle when pressed', () => {
+    const onToggle = vi.fn()
+    const tree = renderToggle(false, onToggle)
+    TestRenderer.act(() => {
+      ;(getButton(tree).props.onPress as () => void)()
+    })
+    expect(onToggle).toHaveBeenCalledTimes(1)
+  })
+})
diff --git a/apps/mobile/app/(tabs)/calendar.tsx b/apps/mobile/app/(tabs)/calendar.tsx
index 72136e3974..aa1728d7b2 100644
--- a/apps/mobile/app/(tabs)/calendar.tsx
+++ b/apps/mobile/app/(tabs)/calendar.tsx
@@ -17,6 +17,8 @@ import { useRouter } from "expo-router";
 import {
   addMonths,
   subMonths,
+  addYears,
+  subYears,
   startOfMonth,
   endOfMonth,
   startOfWeek,
@@ -41,13 +43,13 @@ import { SafeAreaView } from "react-native-safe-area-context";
 import { BottomSheetModal } from "@/components/bottom-sheet-modal";
 import { GradientTop } from "@/components/ui/gradient-top";
 import { SectionLabel } from "@/components/ui/section-label";
-import { SettingsRow } from "@/components/ui/settings-row";
 import {
   CalendarHeader,
   CalendarLegend,
 } from "./calendar/_components/calendar-shell";
 import { CalendarGrid } from "./calendar/_components/calendar-grid";
 import { CalendarDayDetail } from "./calendar/_components/calendar-day-detail";
+import { CalendarStats } from "./calendar/_components/calendar-stats";
 
 interface GridDay {
   date: Date;
@@ -122,6 +124,16 @@ export default function CalendarScreen() {
     setCurrentMonth((m) => addMonths(m, 1));
   }, []);
 
+  const prevYear = useCallback(() => {
+    setMonthSlide("left");
+    setCurrentMonth((m) => subYears(m, 1));
+  }, []);
+
+  const nextYear = useCallback(() => {
+    setMonthSlide("right");
+    setCurrentMonth((m) => addYears(m, 1));
+  }, []);
+
   const goToCurrentMonth = useCallback(() => {
     setMonthSlide(null);
     setCurrentMonth(startOfMonth(new Date()));
@@ -243,6 +255,30 @@ export default function CalendarScreen() {
     return { totalLogs, missed, bestStreak };
   }, [gridDays]);
 
+  const monthStatTiles = useMemo(
+    () => [
+      {
+        key: "bestStreak",
+        emoji: "🔥",
+        value: monthStats.bestStreak,
+        label: t("calendar.bestStreak"),
+      },
+      {
+        key: "totalLogs",
+        emoji: "✅",
+        value: monthStats.totalLogs,
+        label: t("calendar.totalLogs"),
+      },
+      {
+        key: "missed",
+        emoji: "⚠️",
+        value: monthStats.missed,
+        label: t("calendar.missedCount"),
+      },
+    ],
+    [monthStats, t],
+  );
+
   const monthEntering =
     monthSlide === "right"
       ? FadeInRight.duration(220).reduceMotion(ReduceMotion.System)
@@ -281,24 +317,7 @@ export default function CalendarScreen() {
   const listFooter = (
     <View style={styles.listFooter}>
       <SectionLabel>{t("calendar.thisMonth")}</SectionLabel>
-      <SettingsRow
-        label={t("calendar.bestStreak")}
-        value={String(monthStats.bestStreak)}
-        accessory="none"
-        mono
-      />
-      <SettingsRow
-        label={t("calendar.totalLogs")}
-        value={String(monthStats.totalLogs)}
-        accessory="none"
-        mono
-      />
-      <SettingsRow
-        label={t("calendar.missedCount")}
-        value={String(monthStats.missed)}
-        accessory="none"
-        mono
-      />
+      <CalendarStats stats={monthStatTiles} />
 
       <View style={{ height: 24 }} />
     </View>
@@ -311,9 +330,13 @@ export default function CalendarScreen() {
         monthLabel={monthLabel}
         previousMonthLabel={t("common.previousMonth")}
         nextMonthLabel={t("common.nextMonth")}
+        previousYearLabel={t("common.previousYear")}
+        nextYearLabel={t("common.nextYear")}
         currentMonthLabel={t("calendar.goToCurrentMonth")}
         onPreviousMonth={prevMonth}
         onNextMonth={nextMonth}
+        onPreviousYear={prevYear}
+        onNextYear={nextYear}
         onCurrentMonth={goToCurrentMonth}
         tokens={tokens}
       />
diff --git a/apps/mobile/app/(tabs)/calendar/_components/calendar-shell.tsx b/apps/mobile/app/(tabs)/calendar/_components/calendar-shell.tsx
index 2053d4a71b..4b2c4efd5c 100644
--- a/apps/mobile/app/(tabs)/calendar/_components/calendar-shell.tsx
+++ b/apps/mobile/app/(tabs)/calendar/_components/calendar-shell.tsx
@@ -1,5 +1,10 @@
 import { useMemo, useRef } from "react";
-import { ChevronLeft, ChevronRight } from "lucide-react-native";
+import {
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+} from "lucide-react-native";
 import {
   Pressable,
   StyleSheet,
@@ -13,9 +18,13 @@ interface CalendarHeaderProps {
   monthLabel: string;
   previousMonthLabel: string;
   nextMonthLabel: string;
+  previousYearLabel: string;
+  nextYearLabel: string;
   currentMonthLabel: string;
   onPreviousMonth: () => void;
   onNextMonth: () => void;
+  onPreviousYear: () => void;
+  onNextYear: () => void;
   onCurrentMonth: () => void;
   tokens: ReturnType<typeof createTokensV2>;
 }
@@ -38,6 +47,11 @@ function createStyles(tokens: ReturnType<typeof createTokensV2>) {
       paddingTop: 12,
       paddingBottom: 4,
     },
+    monthNavGroup: {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: 2,
+    },
     monthNavButton: {
       width: 36,
       height: 36,
@@ -125,9 +139,13 @@ export function CalendarHeader({
   monthLabel,
   previousMonthLabel,
   nextMonthLabel,
+  previousYearLabel,
+  nextYearLabel,
   currentMonthLabel,
   onPreviousMonth,
   onNextMonth,
+  onPreviousYear,
+  onNextYear,
   onCurrentMonth,
   tokens,
 }: CalendarHeaderProps) {
@@ -137,18 +155,32 @@ export function CalendarHeader({
 
   return (
     <View ref={monthNavRef} collapsable={false} style={styles.headerWrap}>
-      <Pressable
-        accessibilityRole="button"
-        accessibilityLabel={previousMonthLabel}
-        onPress={onPreviousMonth}
-        hitSlop={4}
-        style={({ pressed }) => [
-          styles.monthNavButton,
-          pressed && styles.monthNavButtonPressed,
-        ]}
-      >
-        <ChevronLeft size={22} color={tokens.fg2} strokeWidth={1.8} />
-      </Pressable>
+      <View style={styles.monthNavGroup}>
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel={previousYearLabel}
+          onPress={onPreviousYear}
+          hitSlop={4}
+          style={({ pressed }) => [
+            styles.monthNavButton,
+            pressed && styles.monthNavButtonPressed,
+          ]}
+        >
+          <ChevronsLeft size={18} color={tokens.fg3} strokeWidth={1.8} />
+        </Pressable>
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel={previousMonthLabel}
+          onPress={onPreviousMonth}
+          hitSlop={4}
+          style={({ pressed }) => [
+            styles.monthNavButton,
+            pressed && styles.monthNavButtonPressed,
+          ]}
+        >
+          <ChevronLeft size={22} color={tokens.fg2} strokeWidth={1.8} />
+        </Pressable>
+      </View>
       <Pressable
         accessibilityRole="button"
         accessibilityLabel={currentMonthLabel}
@@ -163,18 +195,32 @@ export function CalendarHeader({
           {monthLabel}
         </Text>
       </Pressable>
-      <Pressable
-        accessibilityRole="button"
-        accessibilityLabel={nextMonthLabel}
-        onPress={onNextMonth}
-        hitSlop={4}
-        style={({ pressed }) => [
-          styles.monthNavButton,
-          pressed && styles.monthNavButtonPressed,
-        ]}
-      >
-        <ChevronRight size={22} color={tokens.fg2} strokeWidth={1.8} />
-      </Pressable>
+      <View style={styles.monthNavGroup}>
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel={nextMonthLabel}
+          onPress={onNextMonth}
+          hitSlop={4}
+          style={({ pressed }) => [
+            styles.monthNavButton,
+            pressed && styles.monthNavButtonPressed,
+          ]}
+        >
+          <ChevronRight size={22} color={tokens.fg2} strokeWidth={1.8} />
+        </Pressable>
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel={nextYearLabel}
+          onPress={onNextYear}
+          hitSlop={4}
+          style={({ pressed }) => [
+            styles.monthNavButton,
+            pressed && styles.monthNavButtonPressed,
+          ]}
+        >
+          <ChevronsRight size={18} color={tokens.fg3} strokeWidth={1.8} />
+        </Pressable>
+      </View>
     </View>
   );
 }
diff --git a/apps/mobile/app/(tabs)/calendar/_components/calendar-stats.tsx b/apps/mobile/app/(tabs)/calendar/_components/calendar-stats.tsx
new file mode 100644
index 0000000000..f49b475599
--- /dev/null
+++ b/apps/mobile/app/(tabs)/calendar/_components/calendar-stats.tsx
@@ -0,0 +1,41 @@
+import { StyleSheet, View } from "react-native";
+import { StatTile } from "@/components/ui/stat-tile";
+
+export interface CalendarStat {
+  key: string;
+  emoji: string;
+  value: string | number;
+  label: string;
+}
+
+interface CalendarStatsProps {
+  stats: readonly CalendarStat[];
+}
+
+/** At-a-glance, data-driven month stat section: each entry renders as a kit StatTile
+ *  in a wrapping 3-up grid so new stats drop in as array entries without a layout rewrite. */
+export function CalendarStats({ stats }: Readonly<CalendarStatsProps>) {
+  return (
+    <View style={styles.row}>
+      {stats.map((stat) => (
+        <View key={stat.key} style={styles.cell}>
+          <StatTile emoji={stat.emoji} value={stat.value} label={stat.label} />
+        </View>
+      ))}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 10,
+    paddingHorizontal: 20,
+  },
+  cell: {
+    flexGrow: 1,
+    flexBasis: "30%",
+    minWidth: 96,
+  },
+});
diff --git a/apps/mobile/app/calendar-sync-select-all-toggle.tsx b/apps/mobile/app/calendar-sync-select-all-toggle.tsx
new file mode 100644
index 0000000000..67204b231a
--- /dev/null
+++ b/apps/mobile/app/calendar-sync-select-all-toggle.tsx
@@ -0,0 +1,43 @@
+import { Pressable, type StyleProp, type ViewStyle } from 'react-native'
+import { CheckCheck, SquareX } from 'lucide-react-native'
+import { createTokensV2 } from '@/lib/theme'
+import { createStyles } from './calendar-sync-styles'
+
+interface SelectAllToggleProps {
+  allSelected: boolean
+  onToggle: () => void
+  selectAllLabel: string
+  deselectAllLabel: string
+  tokens: ReturnType<typeof createTokensV2>
+  tintStyle: StyleProp<ViewStyle>
+}
+
+/** Icon Pressable that selects or deselects every calendar event; its label is the accessible name. */
+export function SelectAllToggle({
+  allSelected,
+  onToggle,
+  selectAllLabel,
+  deselectAllLabel,
+  tokens,
+  tintStyle,
+}: Readonly<SelectAllToggleProps>) {
+  const styles = createStyles()
+  return (
+    <Pressable
+      onPress={onToggle}
+      accessibilityRole="button"
+      accessibilityLabel={allSelected ? deselectAllLabel : selectAllLabel}
+      style={({ pressed }) => [
+        styles.quietActionIcon,
+        tintStyle,
+        pressed && styles.quietActionDim,
+      ]}
+    >
+      {allSelected ? (
+        <SquareX size={18} color={tokens.fg2} strokeWidth={2} />
+      ) : (
+        <CheckCheck size={18} color={tokens.fg2} strokeWidth={2} />
+      )}
+    </Pressable>
+  )
+}
diff --git a/apps/mobile/app/calendar-sync-styles.ts b/apps/mobile/app/calendar-sync-styles.ts
index 8a55295c3f..de286d0ec9 100644
--- a/apps/mobile/app/calendar-sync-styles.ts
+++ b/apps/mobile/app/calendar-sync-styles.ts
@@ -115,6 +115,14 @@ export function createStyles() {
       fontFamily: 'Rubik_500Medium',
       fontSize: 13,
     },
+    quietActionIcon: {
+      width: 36,
+      height: 36,
+      borderRadius: 999,
+      borderWidth: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
     actionPad: {
       paddingHorizontal: 20,
       paddingVertical: 18,
diff --git a/apps/mobile/app/calendar-sync.tsx b/apps/mobile/app/calendar-sync.tsx
index c41d85862f..04a7c46068 100644
--- a/apps/mobile/app/calendar-sync.tsx
+++ b/apps/mobile/app/calendar-sync.tsx
@@ -42,6 +42,7 @@ import { PillButton } from '@/components/ui/pill-button'
 import { CalendarAutoSyncSection } from './calendar-sync-auto-section'
 import { CalendarPickerSection } from './calendar-picker-section'
 import { CalendarSyncEventRow } from './calendar-sync-event-row'
+import { SelectAllToggle } from './calendar-sync-select-all-toggle'
 import { createStyles } from './calendar-sync-styles'
 
 const EVENTS_PAGE_SIZE = 20
@@ -518,21 +519,14 @@ export default function CalendarSyncScreen() {
               <>
                 <SectionLabel
                   trailing={
-                    <Pressable
-                      onPress={toggleAll}
-                      accessibilityRole="button"
-                      style={({ pressed }) => [
-                        styles.quietAction,
-                        chipTint,
-                        pressed && styles.quietActionDim,
-                      ]}
-                    >
-                      <Text style={[styles.quietActionText, { color: tokens.fg2 }]}>
-                        {allSelected
-                          ? t('calendar.deselectAll')
-                          : t('calendar.selectAll')}
-                      </Text>
-                    </Pressable>
+                    <SelectAllToggle
+                      allSelected={allSelected}
+                      onToggle={toggleAll}
+                      selectAllLabel={t('calendar.selectAll')}
+                      deselectAllLabel={t('calendar.deselectAll')}
+                      tokens={tokens}
+                      tintStyle={chipTint}
+                    />
                   }
                 >
                   {plural(
diff --git a/apps/mobile/test-mocks/lucide-react-native.ts b/apps/mobile/test-mocks/lucide-react-native.ts
index caed92ec50..67ed82f26a 100644
--- a/apps/mobile/test-mocks/lucide-react-native.ts
+++ b/apps/mobile/test-mocks/lucide-react-native.ts
@@ -15,12 +15,15 @@ export const Bell = createIcon('Bell')
 export const CalendarCheck = createIcon('CalendarCheck')
 export const CalendarClock = createIcon('CalendarClock')
 export const Check = createIcon('Check')
+export const CheckCheck = createIcon('CheckCheck')
 export const CheckCircle2 = createIcon('CheckCircle2')
 export const CalendarDays = createIcon('CalendarDays')
 export const ChevronDown = createIcon('ChevronDown')
 export const ChevronLeft = createIcon('ChevronLeft')
 export const ChevronRight = createIcon('ChevronRight')
 export const ChevronsDownUp = createIcon('ChevronsDownUp')
+export const ChevronsLeft = createIcon('ChevronsLeft')
+export const ChevronsRight = createIcon('ChevronsRight')
 export const ChevronsUpDown = createIcon('ChevronsUpDown')
 export const ClipboardCheck = createIcon('ClipboardCheck')
 export const ClipboardList = createIcon('ClipboardList')
@@ -50,6 +53,7 @@ export const ShieldAlert = createIcon('ShieldAlert')
 export const ShieldCheck = createIcon('ShieldCheck')
 export const Shuffle = createIcon('Shuffle')
 export const Sparkles = createIcon('Sparkles')
+export const SquareX = createIcon('SquareX')
 export const Tag = createIcon('Tag')
 export const Trash2 = createIcon('Trash2')
 export const TrendingDown = createIcon('TrendingDown')
diff --git a/apps/web/__tests__/components/calendar/calendar-grid.test.tsx b/apps/web/__tests__/components/calendar/calendar-grid.test.tsx
index 0272d5ca7d..e260838ba0 100644
--- a/apps/web/__tests__/components/calendar/calendar-grid.test.tsx
+++ b/apps/web/__tests__/components/calendar/calendar-grid.test.tsx
@@ -146,4 +146,18 @@ describe('CalendarGrid', () => {
     const disabledCells = document.querySelectorAll('[aria-disabled="true"]')
     expect(disabledCells.length).toBeGreaterThan(0)
   })
+
+  it('marks in-range days when range endpoints are provided', () => {
+    const { container } = render(
+      <CalendarGrid
+        currentMonth={currentMonth}
+        dayMap={emptyMap}
+        onSelectDay={vi.fn()}
+        rangeStart="2025-06-16"
+        rangeEnd="2025-06-18"
+      />,
+    )
+    const inRange = container.querySelectorAll('[data-in-range="true"]')
+    expect(inRange.length).toBe(3)
+  })
 })
diff --git a/apps/web/__tests__/components/calendar/calendar-shell.test.tsx b/apps/web/__tests__/components/calendar/calendar-shell.test.tsx
index 6c0763837d..74a2ce8f51 100644
--- a/apps/web/__tests__/components/calendar/calendar-shell.test.tsx
+++ b/apps/web/__tests__/components/calendar/calendar-shell.test.tsx
@@ -7,13 +7,16 @@ vi.mock('next-intl', () => ({
 
 import {
   CalendarHeader,
+  CalendarWeekNav,
   CalendarLegend,
 } from '@/app/(app)/calendar/_components/calendar-shell'
 
 describe('Calendar shell helpers', () => {
-  it('renders the calendar header actions', () => {
+  it('renders the calendar header actions including year jumps', () => {
     const onPreviousMonth = vi.fn()
     const onNextMonth = vi.fn()
+    const onPreviousYear = vi.fn()
+    const onNextYear = vi.fn()
     const onCurrentMonth = vi.fn()
 
     render(
@@ -21,9 +24,13 @@ describe('Calendar shell helpers', () => {
         monthLabel="April 2026"
         previousMonthLabel="common.previousMonth"
         nextMonthLabel="common.nextMonth"
+        previousYearLabel="common.previousYear"
+        nextYearLabel="common.nextYear"
         currentMonthLabel="calendar.goToCurrentMonth"
         onPreviousMonth={onPreviousMonth}
         onNextMonth={onNextMonth}
+        onPreviousYear={onPreviousYear}
+        onNextYear={onNextYear}
         onCurrentMonth={onCurrentMonth}
       />,
     )
@@ -32,13 +39,45 @@ describe('Calendar shell helpers', () => {
 
     fireEvent.click(screen.getByLabelText('common.previousMonth'))
     fireEvent.click(screen.getByLabelText('common.nextMonth'))
+    fireEvent.click(screen.getByLabelText('common.previousYear'))
+    fireEvent.click(screen.getByLabelText('common.nextYear'))
     fireEvent.click(screen.getByLabelText('calendar.goToCurrentMonth'))
 
     expect(onPreviousMonth).toHaveBeenCalledTimes(1)
     expect(onNextMonth).toHaveBeenCalledTimes(1)
+    expect(onPreviousYear).toHaveBeenCalledTimes(1)
+    expect(onNextYear).toHaveBeenCalledTimes(1)
     expect(onCurrentMonth).toHaveBeenCalledTimes(1)
   })
 
+  it('renders the week nav and fires week handlers', () => {
+    const onPreviousWeek = vi.fn()
+    const onNextWeek = vi.fn()
+    const onCurrentWeek = vi.fn()
+
+    render(
+      <CalendarWeekNav
+        weekLabel="Jun 16 - 22"
+        previousWeekLabel="common.previousWeek"
+        nextWeekLabel="common.nextWeek"
+        currentWeekLabel="calendar.goToCurrentWeek"
+        onPreviousWeek={onPreviousWeek}
+        onNextWeek={onNextWeek}
+        onCurrentWeek={onCurrentWeek}
+      />,
+    )
+
+    expect(screen.getByText('Jun 16 - 22')).toBeInTheDocument()
+
+    fireEvent.click(screen.getByLabelText('common.previousWeek'))
+    fireEvent.click(screen.getByLabelText('common.nextWeek'))
+    fireEvent.click(screen.getByLabelText('calendar.goToCurrentWeek'))
+
+    expect(onPreviousWeek).toHaveBeenCalledTimes(1)
+    expect(onNextWeek).toHaveBeenCalledTimes(1)
+    expect(onCurrentWeek).toHaveBeenCalledTimes(1)
+  })
+
   it('renders the calendar legend labels inline', () => {
     render(
       <CalendarLegend
diff --git a/apps/web/__tests__/components/calendar/calendar-stats.test.tsx b/apps/web/__tests__/components/calendar/calendar-stats.test.tsx
new file mode 100644
index 0000000000..90dad37cd1
--- /dev/null
+++ b/apps/web/__tests__/components/calendar/calendar-stats.test.tsx
@@ -0,0 +1,25 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+
+import { CalendarStats } from '@/components/calendar/calendar-stats'
+
+describe('CalendarStats', () => {
+  it('renders one stat tile per stat entry', () => {
+    render(
+      <CalendarStats
+        stats={[
+          { key: 'bestStreak', emoji: '🔥', value: 5, label: 'Best streak' },
+          { key: 'totalLogs', emoji: '✅', value: 12, label: 'Total logs' },
+          { key: 'missed', emoji: '⚠️', value: 3, label: 'Missed' },
+        ]}
+      />,
+    )
+
+    expect(screen.getByText('Best streak')).toBeInTheDocument()
+    expect(screen.getByText('5')).toBeInTheDocument()
+    expect(screen.getByText('Total logs')).toBeInTheDocument()
+    expect(screen.getByText('12')).toBeInTheDocument()
+    expect(screen.getByText('Missed')).toBeInTheDocument()
+    expect(screen.getByText('3')).toBeInTheDocument()
+  })
+})
diff --git a/apps/web/__tests__/components/calendar/calendar-time-grid.test.tsx b/apps/web/__tests__/components/calendar/calendar-time-grid.test.tsx
new file mode 100644
index 0000000000..80e4a01483
--- /dev/null
+++ b/apps/web/__tests__/components/calendar/calendar-time-grid.test.tsx
@@ -0,0 +1,86 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { enUS } from 'date-fns/locale'
+
+import { CalendarTimeGrid, type TimeGridColumn } from '@/components/calendar/calendar-time-grid'
+import type { CalendarDayEntry } from '@orbit/shared/types/calendar'
+
+function makeEntry(overrides: Partial<CalendarDayEntry> = {}): CalendarDayEntry {
+  return {
+    habitId: '1',
+    title: 'Meditate',
+    status: 'upcoming',
+    isBadHabit: false,
+    dueTime: null,
+    isOneTime: false,
+    ...overrides,
+  }
+}
+
+const displayTime = (time: string) => time
+
+function column(year: number, month: number, day: number): TimeGridColumn {
+  const date = new Date(year, month, day)
+  return {
+    date,
+    dateStr: `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`,
+    isToday: false,
+  }
+}
+
+function renderGrid(columns: TimeGridColumn[], dayMap: Map<string, CalendarDayEntry[]>, onSelectDay = vi.fn()) {
+  return render(
+    <CalendarTimeGrid
+      columns={columns}
+      dayMap={dayMap}
+      onSelectDay={onSelectDay}
+      displayTime={displayTime}
+      dateFnsLocale={enUS}
+      allDayLabel="All-day"
+      nowLabel="Now"
+    />,
+  )
+}
+
+describe('CalendarTimeGrid', () => {
+  it('places a timed habit in its hour slot in the correct column', () => {
+    const col = column(2025, 5, 16)
+    const dayMap = new Map<string, CalendarDayEntry[]>([
+      [col.dateStr, [makeEntry({ habitId: 'a', title: 'Standup', dueTime: '08:00' })]],
+    ])
+    renderGrid([col], dayMap)
+
+    const block = screen.getByTestId('time-grid-event')
+    expect(block).toHaveAttribute('data-hour', '8')
+    expect(block).toHaveTextContent('Standup')
+  })
+
+  it('places an untimed habit in the all-day row, not the time body', () => {
+    const col = column(2025, 5, 16)
+    const dayMap = new Map<string, CalendarDayEntry[]>([
+      [col.dateStr, [makeEntry({ habitId: 'b', title: 'Read', dueTime: null })]],
+    ])
+    renderGrid([col], dayMap)
+
+    expect(screen.queryByTestId('time-grid-event')).toBeNull()
+    const allDayEvent = screen.getByTestId('time-grid-all-day-event')
+    expect(allDayEvent).toHaveTextContent('Read')
+  })
+
+  it('renders one column per day in the selected range', () => {
+    const columns = [16, 17, 18, 19].map((d) => column(2025, 5, d))
+    renderGrid(columns, new Map())
+
+    expect(screen.getByTestId('calendar-time-grid')).toHaveAttribute('data-columns', '4')
+    expect(screen.getAllByTestId('time-grid-col-header')).toHaveLength(4)
+  })
+
+  it('opens the clicked day from a column header', () => {
+    const onSelectDay = vi.fn()
+    const col = column(2025, 5, 16)
+    renderGrid([col], new Map(), onSelectDay)
+
+    fireEvent.click(screen.getByTestId('time-grid-col-header'))
+    expect(onSelectDay).toHaveBeenCalledWith('2025-06-16')
+  })
+})
diff --git a/apps/web/__tests__/components/calendar/select-all-toggle.test.tsx b/apps/web/__tests__/components/calendar/select-all-toggle.test.tsx
new file mode 100644
index 0000000000..fef6c1b4d0
--- /dev/null
+++ b/apps/web/__tests__/components/calendar/select-all-toggle.test.tsx
@@ -0,0 +1,53 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+
+import { SelectAllToggle } from '@/app/(app)/calendar-sync/_components/select-all-toggle'
+
+const selectAllLabel = 'Select all'
+const deselectAllLabel = 'Deselect all'
+
+describe('SelectAllToggle', () => {
+  it('labels the action as select-all when nothing is selected', () => {
+    render(
+      <SelectAllToggle
+        allSelected={false}
+        onToggle={vi.fn()}
+        selectAllLabel={selectAllLabel}
+        deselectAllLabel={deselectAllLabel}
+      />,
+    )
+    const button = screen.getByRole('button')
+    expect(button.getAttribute('aria-label')).toBe(selectAllLabel)
+    expect(button.getAttribute('title')).toBe(selectAllLabel)
+    expect(button.getAttribute('aria-pressed')).toBe('false')
+  })
+
+  it('labels the action as deselect-all when everything is selected', () => {
+    render(
+      <SelectAllToggle
+        allSelected={true}
+        onToggle={vi.fn()}
+        selectAllLabel={selectAllLabel}
+        deselectAllLabel={deselectAllLabel}
+      />,
+    )
+    const button = screen.getByRole('button')
+    expect(button.getAttribute('aria-label')).toBe(deselectAllLabel)
+    expect(button.getAttribute('title')).toBe(deselectAllLabel)
+    expect(button.getAttribute('aria-pressed')).toBe('true')
+  })
+
+  it('calls onToggle when clicked', () => {
+    const onToggle = vi.fn()
+    render(
+      <SelectAllToggle
+        allSelected={false}
+        onToggle={onToggle}
+        selectAllLabel={selectAllLabel}
+        deselectAllLabel={deselectAllLabel}
+      />,
+    )
+    fireEvent.click(screen.getByRole('button'))
+    expect(onToggle).toHaveBeenCalledTimes(1)
+  })
+})
diff --git a/apps/web/__tests__/pages/calendar-sync.test.tsx b/apps/web/__tests__/pages/calendar-sync.test.tsx
index ab31009ee2..208945144b 100644
--- a/apps/web/__tests__/pages/calendar-sync.test.tsx
+++ b/apps/web/__tests__/pages/calendar-sync.test.tsx
@@ -386,9 +386,9 @@ describe('CalendarSyncPage', () => {
 
     render(<CalendarSyncPage />)
     await waitFor(() => {
-      expect(screen.getByText('calendar.deselectAll')).toBeInTheDocument()
+      expect(screen.getByLabelText('calendar.deselectAll')).toBeInTheDocument()
     })
-    expect(screen.getByText('calendar.deselectAll').closest('button')).toHaveAttribute('aria-pressed', 'true')
+    expect(screen.getByLabelText('calendar.deselectAll')).toHaveAttribute('aria-pressed', 'true')
   })
 
   it('all events are selected by default', async () => {
@@ -407,7 +407,7 @@ describe('CalendarSyncPage', () => {
       expect(screen.getByText('Event 1')).toBeInTheDocument()
     })
 
-    expect(screen.getByText('calendar.deselectAll')).toBeInTheDocument()
+    expect(screen.getByLabelText('calendar.deselectAll')).toBeInTheDocument()
     expect(document.body.textContent).toContain('calendar.importButton')
   })
 
diff --git a/apps/web/app/(app)/calendar-sync/_components/select-all-toggle.tsx b/apps/web/app/(app)/calendar-sync/_components/select-all-toggle.tsx
new file mode 100644
index 0000000000..eed18f3fe3
--- /dev/null
+++ b/apps/web/app/(app)/calendar-sync/_components/select-all-toggle.tsx
@@ -0,0 +1,37 @@
+'use client'
+
+import { CheckCheck, SquareX } from 'lucide-react'
+
+interface SelectAllToggleProps {
+  allSelected: boolean
+  onToggle: () => void
+  selectAllLabel: string
+  deselectAllLabel: string
+}
+
+/** Icon button that selects or deselects every calendar event; its label is both the accessible name and the tooltip. */
+export function SelectAllToggle({
+  allSelected,
+  onToggle,
+  selectAllLabel,
+  deselectAllLabel,
+}: Readonly<SelectAllToggleProps>) {
+  const label = allSelected ? deselectAllLabel : selectAllLabel
+  return (
+    <button
+      type="button"
+      className="icon-btn shrink-0"
+      style={{ width: 36, height: 36 }}
+      onClick={onToggle}
+      aria-pressed={allSelected}
+      aria-label={label}
+      title={label}
+    >
+      {allSelected ? (
+        <SquareX size={18} strokeWidth={1.8} color="var(--fg-2)" aria-hidden="true" />
+      ) : (
+        <CheckCheck size={18} strokeWidth={1.8} color="var(--fg-2)" aria-hidden="true" />
+      )}
+    </button>
+  )
+}
diff --git a/apps/web/app/(app)/calendar-sync/page.tsx b/apps/web/app/(app)/calendar-sync/page.tsx
index b548186c2d..a940b9bd20 100644
--- a/apps/web/app/(app)/calendar-sync/page.tsx
+++ b/apps/web/app/(app)/calendar-sync/page.tsx
@@ -26,6 +26,7 @@ import { useCalendarEvents } from '@/hooks/use-calendar-events'
 import { CalendarPickerSection } from './_components/calendar-picker-section'
 import { AutoSyncSettingsCard } from './_components/auto-sync-settings-card'
 import { CalendarSyncEventRow } from './_components/calendar-sync-event-row'
+import { SelectAllToggle } from './_components/select-all-toggle'
 import { connectGoogle } from './_components/connect-google'
 import type { CalendarSyncEvent, CalendarSyncSuggestion } from '@orbit/shared'
 import {
@@ -324,14 +325,12 @@ export default function CalendarSyncPage() {
                 >
                   {plural(t('calendar.eventsFound', { count: events.length }), events.length)}
                 </p>
-                <button
-                  type="button"
-                  className="chip"
-                  onClick={toggleAll}
-                  aria-pressed={allSelected}
-                >
-                  {allSelected ? t('calendar.deselectAll') : t('calendar.selectAll')}
-                </button>
+                <SelectAllToggle
+                  allSelected={allSelected}
+                  onToggle={toggleAll}
+                  selectAllLabel={t('calendar.selectAll')}
+                  deselectAllLabel={t('calendar.deselectAll')}
+                />
               </div>
 
               <div className="max-h-[60vh] overflow-y-auto stagger-enter">
diff --git a/apps/web/app/(app)/calendar/_components/calendar-shell.tsx b/apps/web/app/(app)/calendar/_components/calendar-shell.tsx
index c1d5442741..c903ddf884 100644
--- a/apps/web/app/(app)/calendar/_components/calendar-shell.tsx
+++ b/apps/web/app/(app)/calendar/_components/calendar-shell.tsx
@@ -1,26 +1,35 @@
 'use client'
 
-import { ChevronLeft, ChevronRight } from 'lucide-react'
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react'
 
 interface CalendarHeaderProps {
   monthLabel: string
   previousMonthLabel: string
   nextMonthLabel: string
+  previousYearLabel: string
+  nextYearLabel: string
   currentMonthLabel: string
   onPreviousMonth: () => void
   onNextMonth: () => void
+  onPreviousYear: () => void
+  onNextYear: () => void
   onCurrentMonth: () => void
 }
 
 /** Agenda header mirroring the Today date-nav: a centered, tappable month label
- *  (tap returns to the current month) flanked by prev/next icon buttons. */
+ *  (tap returns to the current month) flanked by month chevrons and outer
+ *  double-chevron year-jump controls. */
 export function CalendarHeader({
   monthLabel,
   previousMonthLabel,
   nextMonthLabel,
+  previousYearLabel,
+  nextYearLabel,
   currentMonthLabel,
   onPreviousMonth,
   onNextMonth,
+  onPreviousYear,
+  onNextYear,
   onCurrentMonth,
 }: Readonly<CalendarHeaderProps>) {
   return (
@@ -30,10 +39,96 @@ export function CalendarHeader({
         className="flex items-center justify-between w-full"
         style={{ padding: '0 4px' }}
       >
+        <div className="flex items-center shrink-0" style={{ gap: 2 }}>
+          <button
+            type="button"
+            aria-label={previousYearLabel}
+            onClick={onPreviousYear}
+            className="icon-btn shrink-0"
+            style={{ width: 36, height: 36 }}
+          >
+            <ChevronsLeft size={16} strokeWidth={1.8} color="var(--fg-3)" aria-hidden="true" />
+          </button>
+          <button
+            type="button"
+            aria-label={previousMonthLabel}
+            onClick={onPreviousMonth}
+            className="icon-btn shrink-0"
+            style={{ width: 36, height: 36 }}
+          >
+            <ChevronLeft size={18} strokeWidth={1.8} color="var(--fg-2)" aria-hidden="true" />
+          </button>
+        </div>
         <button
           type="button"
-          aria-label={previousMonthLabel}
-          onClick={onPreviousMonth}
+          aria-label={currentMonthLabel}
+          onClick={onCurrentMonth}
+          className="capitalize appearance-none border-0 bg-transparent cursor-pointer inline-flex items-center justify-center rounded-full transition-[background-color,transform] duration-[var(--dur-fast)] ease-[var(--ease-standard)] hover:bg-[var(--bg-elev)] active:scale-[0.98]"
+          style={{
+            height: 36,
+            padding: '0 16px',
+            fontFamily: 'var(--font-sans)',
+            fontSize: 17,
+            fontWeight: 500,
+            letterSpacing: '-0.01em',
+            color: 'var(--fg-1)',
+          }}
+        >
+          {monthLabel}
+        </button>
+        <div className="flex items-center shrink-0" style={{ gap: 2 }}>
+          <button
+            type="button"
+            aria-label={nextMonthLabel}
+            onClick={onNextMonth}
+            className="icon-btn shrink-0"
+            style={{ width: 36, height: 36 }}
+          >
+            <ChevronRight size={18} strokeWidth={1.8} color="var(--fg-2)" aria-hidden="true" />
+          </button>
+          <button
+            type="button"
+            aria-label={nextYearLabel}
+            onClick={onNextYear}
+            className="icon-btn shrink-0"
+            style={{ width: 36, height: 36 }}
+          >
+            <ChevronsRight size={16} strokeWidth={1.8} color="var(--fg-3)" aria-hidden="true" />
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+interface CalendarWeekNavProps {
+  weekLabel: string
+  previousWeekLabel: string
+  nextWeekLabel: string
+  currentWeekLabel: string
+  onPreviousWeek: () => void
+  onNextWeek: () => void
+  onCurrentWeek: () => void
+}
+
+/** Week-granularity nav for the week time-grid: a centered, tappable week-range
+ *  label (tap returns to the current week) flanked by prev/next week chevrons. */
+export function CalendarWeekNav({
+  weekLabel,
+  previousWeekLabel,
+  nextWeekLabel,
+  currentWeekLabel,
+  onPreviousWeek,
+  onNextWeek,
+  onCurrentWeek,
+}: Readonly<CalendarWeekNavProps>) {
+  return (
+    <div className="shrink-0" style={{ padding: '12px 20px 16px' }}>
+      <div className="flex items-center justify-between w-full" style={{ padding: '0 4px' }}>
+        <button
+          type="button"
+          aria-label={previousWeekLabel}
+          onClick={onPreviousWeek}
           className="icon-btn shrink-0"
           style={{ width: 36, height: 36 }}
         >
@@ -41,9 +136,9 @@ export function CalendarHeader({
         </button>
         <button
           type="button"
-          aria-label={currentMonthLabel}
-          onClick={onCurrentMonth}
-          className="capitalize appearance-none border-0 bg-transparent cursor-pointer inline-flex items-center justify-center rounded-full transition-[background-color,transform] duration-[var(--dur-fast)] ease-[var(--ease-standard)] hover:bg-[var(--bg-elev)] active:scale-[0.98]"
+          aria-label={currentWeekLabel}
+          onClick={onCurrentWeek}
+          className="appearance-none border-0 bg-transparent cursor-pointer inline-flex items-center justify-center rounded-full transition-[background-color,transform] duration-[var(--dur-fast)] ease-[var(--ease-standard)] hover:bg-[var(--bg-elev)] active:scale-[0.98]"
           style={{
             height: 36,
             padding: '0 16px',
@@ -54,12 +149,12 @@ export function CalendarHeader({
             color: 'var(--fg-1)',
           }}
         >
-          {monthLabel}
+          {weekLabel}
         </button>
         <button
           type="button"
-          aria-label={nextMonthLabel}
-          onClick={onNextMonth}
+          aria-label={nextWeekLabel}
+          onClick={onNextWeek}
           className="icon-btn shrink-0"
           style={{ width: 36, height: 36 }}
         >
diff --git a/apps/web/app/(app)/calendar/page.tsx b/apps/web/app/(app)/calendar/page.tsx
index 75f717531f..87c4411af4 100644
--- a/apps/web/app/(app)/calendar/page.tsx
+++ b/apps/web/app/(app)/calendar/page.tsx
@@ -4,23 +4,37 @@ import { useState, useMemo, useCallback, useRef } from 'react'
 import {
   addMonths,
   subMonths,
+  addYears,
+  subYears,
+  addWeeks,
+  subWeeks,
   startOfMonth,
   endOfMonth,
+  startOfWeek,
+  endOfWeek,
   eachDayOfInterval,
+  isSameMonth,
+  isToday,
   format,
 } from 'date-fns'
 import { enUS, ptBR } from 'date-fns/locale'
 import { useLocale, useTranslations } from 'next-intl'
-import { formatAPIDate } from '@orbit/shared/utils'
-import { useCalendarData } from '@/hooks/use-calendar-data'
+import { formatAPIDate, parseAPIDate } from '@orbit/shared/utils'
+import { useCalendarData, useCalendarRange } from '@/hooks/use-calendar-data'
+import { useTimeFormat } from '@/hooks/use-time-format'
+import { useProfile } from '@/hooks/use-profile'
 import { useCoachMark } from '@/hooks/use-coach-mark'
 import type { CalendarDayEntry } from '@orbit/shared/types/calendar'
 import { CalendarGrid } from '@/components/calendar/calendar-grid'
 import { CalendarDayDetail } from '@/components/calendar/calendar-day-detail'
+import { CalendarStats } from '@/components/calendar/calendar-stats'
+import { CalendarWeekView } from '@/components/calendar/calendar-week-view'
+import { CalendarRangeView } from '@/components/calendar/calendar-range-view'
+import type { TimeGridColumn } from '@/components/calendar/calendar-time-grid'
 import { AppOverlay } from '@/components/ui/app-overlay'
 import { GradientTop } from '@/components/ui/gradient-top'
 import { SectionLabel } from '@/components/ui/section-label'
-import { SettingsRow } from '@/components/ui/settings-row'
+import { SectionHeadTabs } from '@/components/ui/section-head-tabs'
 import {
   CalendarHeader,
   CalendarLegend,
@@ -29,14 +43,24 @@ import {
 const SWIPE_THRESHOLD = 50
 
 type MonthSlide = 'left' | 'right' | null
+type CalendarView = 'month' | 'week' | 'range'
 
 export default function CalendarPage() {
   const t = useTranslations()
   const locale = useLocale()
   const dateFnsLocale = locale === 'pt-BR' ? ptBR : enUS
+  const { displayTime } = useTimeFormat()
+  const { profile } = useProfile()
+  const weekStartsOn: 0 | 1 = profile?.weekStartDay ?? 1
   useCoachMark('coach-calendar')
+
+  const [view, setView] = useState<CalendarView>('month')
   const [currentMonth, setCurrentMonth] = useState(() => startOfMonth(new Date()))
   const [monthSlide, setMonthSlide] = useState<MonthSlide>(null)
+  const [weekAnchor, setWeekAnchor] = useState(() => new Date())
+  const [rangeStart, setRangeStart] = useState(() => formatAPIDate(new Date()))
+  const [rangeEnd, setRangeEnd] = useState(() => formatAPIDate(new Date()))
+  const [awaitingEnd, setAwaitingEnd] = useState(false)
   const [selectedDay, setSelectedDay] = useState<string | null>(() =>
     formatAPIDate(new Date()),
   )
@@ -44,11 +68,58 @@ export default function CalendarPage() {
 
   const { dayMap, isLoading, isFetching } = useCalendarData(currentMonth)
 
+  const weekStart = useMemo(
+    () => startOfWeek(weekAnchor, { weekStartsOn }),
+    [weekAnchor, weekStartsOn],
+  )
+  const weekEnd = useMemo(
+    () => endOfWeek(weekAnchor, { weekStartsOn }),
+    [weekAnchor, weekStartsOn],
+  )
+  const rangeBounds = useMemo(() => {
+    const a = parseAPIDate(rangeStart)
+    const b = parseAPIDate(rangeEnd)
+    return rangeStart <= rangeEnd ? { lo: a, hi: b } : { lo: b, hi: a }
+  }, [rangeStart, rangeEnd])
+
+  const gridStartDate = view === 'week' ? weekStart : rangeBounds.lo
+  const gridEndDate = view === 'week' ? weekEnd : rangeBounds.hi
+
+  const {
+    dayMap: rangeDayMap,
+    isLoading: rangeLoading,
+    isFetching: rangeFetching,
+  } = useCalendarRange(gridStartDate, gridEndDate, view !== 'month')
+
+  const gridColumns = useMemo<TimeGridColumn[]>(() => {
+    const days =
+      view === 'week'
+        ? eachDayOfInterval({ start: weekStart, end: weekEnd })
+        : eachDayOfInterval({ start: rangeBounds.lo, end: rangeBounds.hi })
+    return days.map((date) => ({
+      date,
+      dateStr: formatAPIDate(date),
+      isToday: isToday(date),
+    }))
+  }, [view, weekStart, weekEnd, rangeBounds])
+
   const monthLabel = useMemo(
     () => format(currentMonth, 'MMMM yyyy', { locale: dateFnsLocale }),
     [currentMonth, dateFnsLocale],
   )
 
+  const weekLabel = useMemo(() => {
+    const startLabel = format(weekStart, 'MMM d', { locale: dateFnsLocale })
+    const endLabel = isSameMonth(weekStart, weekEnd)
+      ? format(weekEnd, 'd', { locale: dateFnsLocale })
+      : format(weekEnd, 'MMM d', { locale: dateFnsLocale })
+    return `${startLabel} - ${endLabel}`
+  }, [weekStart, weekEnd, dateFnsLocale])
+
+  const activeDayMap = view === 'month' ? dayMap : rangeDayMap
+  const activeLoading = view === 'month' ? isLoading : rangeLoading
+  const activeFetching = view === 'month' ? isFetching : rangeFetching
+
   const prevMonth = useCallback(() => {
     setMonthSlide('left')
     setCurrentMonth((m) => subMonths(m, 1))
@@ -59,20 +130,50 @@ export default function CalendarPage() {
     setCurrentMonth((m) => addMonths(m, 1))
   }, [])
 
+  const prevYear = useCallback(() => {
+    setMonthSlide('left')
+    setCurrentMonth((m) => subYears(m, 1))
+  }, [])
+
+  const nextYear = useCallback(() => {
+    setMonthSlide('right')
+    setCurrentMonth((m) => addYears(m, 1))
+  }, [])
+
   const goToCurrentMonth = useCallback(() => {
     setMonthSlide(null)
     setCurrentMonth(startOfMonth(new Date()))
   }, [])
 
-  const onSelectDay = useCallback((dateStr: string) => {
+  const prevWeek = useCallback(() => setWeekAnchor((a) => subWeeks(a, 1)), [])
+  const nextWeek = useCallback(() => setWeekAnchor((a) => addWeeks(a, 1)), [])
+  const goToCurrentWeek = useCallback(() => setWeekAnchor(new Date()), [])
+
+  const openDay = useCallback((dateStr: string) => {
     setSelectedDay(dateStr)
     setIsDayDetailOpen(true)
   }, [])
 
+  function handleRangePick(dateStr: string) {
+    if (!awaitingEnd) {
+      setRangeStart(dateStr)
+      setRangeEnd(dateStr)
+      setAwaitingEnd(true)
+      return
+    }
+    if (dateStr >= rangeStart) {
+      setRangeEnd(dateStr)
+    } else {
+      setRangeEnd(rangeStart)
+      setRangeStart(dateStr)
+    }
+    setAwaitingEnd(false)
+  }
+
   const selectedEntries = useMemo(() => {
     if (!selectedDay) return []
-    return dayMap.get(selectedDay) ?? []
-  }, [selectedDay, dayMap])
+    return activeDayMap.get(selectedDay) ?? []
+  }, [selectedDay, activeDayMap])
 
   const monthStats = useMemo(() => {
     const monthStart = startOfMonth(currentMonth)
@@ -101,28 +202,44 @@ export default function CalendarPage() {
     return { bestStreak, totalLogs, missed }
   }, [currentMonth, dayMap])
 
+  const monthStatTiles = useMemo(
+    () => [
+      { key: 'bestStreak', emoji: '🔥', value: monthStats.bestStreak, label: t('calendar.bestStreak') },
+      { key: 'totalLogs', emoji: '✅', value: monthStats.totalLogs, label: t('calendar.totalLogs') },
+      { key: 'missed', emoji: '⚠️', value: monthStats.missed, label: t('calendar.missedCount') },
+    ],
+    [monthStats, t],
+  )
+
   const touchStartX = useRef<number | null>(null)
 
-  const handleTouchStart = useCallback((e: React.TouchEvent) => {
-    const touch = e.touches[0]
-    if (touch) touchStartX.current = touch.clientX
-  }, [])
+  const handleTouchStart = useCallback(
+    (e: React.TouchEvent) => {
+      if (view !== 'month') return
+      const touch = e.touches[0]
+      if (touch) touchStartX.current = touch.clientX
+    },
+    [view],
+  )
 
-  const handleTouchEnd = useCallback((e: React.TouchEvent) => {
-    if (touchStartX.current === null) return
-    const touch = e.changedTouches[0]
-    if (!touch) return
-    const deltaX = touch.clientX - touchStartX.current
-    touchStartX.current = null
-    if (Math.abs(deltaX) < SWIPE_THRESHOLD) return
-    if (deltaX < 0) {
-      setMonthSlide('right')
-      setCurrentMonth((m) => addMonths(m, 1))
-    } else {
-      setMonthSlide('left')
-      setCurrentMonth((m) => subMonths(m, 1))
-    }
-  }, [])
+  const handleTouchEnd = useCallback(
+    (e: React.TouchEvent) => {
+      if (view !== 'month' || touchStartX.current === null) return
+      const touch = e.changedTouches[0]
+      if (!touch) return
+      const deltaX = touch.clientX - touchStartX.current
+      touchStartX.current = null
+      if (Math.abs(deltaX) < SWIPE_THRESHOLD) return
+      if (deltaX < 0) {
+        setMonthSlide('right')
+        setCurrentMonth((m) => addMonths(m, 1))
+      } else {
+        setMonthSlide('left')
+        setCurrentMonth((m) => subMonths(m, 1))
+      }
+    },
+    [view],
+  )
 
   const monthSlideClass =
     monthSlide === 'right'
@@ -139,59 +256,99 @@ export default function CalendarPage() {
     >
       <GradientTop height={180} />
       <div className="relative z-[1]">
-        <CalendarHeader
-          monthLabel={monthLabel}
-          previousMonthLabel={t('common.previousMonth')}
-          nextMonthLabel={t('common.nextMonth')}
-          currentMonthLabel={t('calendar.goToCurrentMonth')}
-          onPreviousMonth={prevMonth}
-          onNextMonth={nextMonth}
-          onCurrentMonth={goToCurrentMonth}
+        <SectionHeadTabs<CalendarView>
+          tabs={[
+            { id: 'month', label: t('calendar.view.month') },
+            { id: 'week', label: t('calendar.view.week') },
+            { id: 'range', label: t('calendar.view.range') },
+          ]}
+          active={view}
+          onChange={setView}
+          ariaLabel={t('calendar.view.switchLabel')}
         />
 
+        {(view === 'month' || view === 'range') && (
+          <CalendarHeader
+            monthLabel={monthLabel}
+            previousMonthLabel={t('common.previousMonth')}
+            nextMonthLabel={t('common.nextMonth')}
+            previousYearLabel={t('common.previousYear')}
+            nextYearLabel={t('common.nextYear')}
+            currentMonthLabel={t('calendar.goToCurrentMonth')}
+            onPreviousMonth={prevMonth}
+            onNextMonth={nextMonth}
+            onPreviousYear={prevYear}
+            onNextYear={nextYear}
+            onCurrentMonth={goToCurrentMonth}
+          />
+        )}
+
         <div
           className={`loading-bar w-full transition-opacity duration-300 ${
-            isFetching && !isLoading ? 'opacity-100' : 'opacity-0 pointer-events-none'
+            activeFetching && !activeLoading ? 'opacity-100' : 'opacity-0 pointer-events-none'
           }`}
         />
 
-        <div key={format(currentMonth, 'yyyy-MM')} className={monthSlideClass}>
-          <CalendarGrid
-            currentMonth={currentMonth}
-            dayMap={dayMap}
-            onSelectDay={onSelectDay}
-            selectedDateStr={selectedDay}
-            isLoading={isLoading}
-          />
-        </div>
+        {view === 'month' && (
+          <>
+            <div key={format(currentMonth, 'yyyy-MM')} className={monthSlideClass}>
+              <CalendarGrid
+                currentMonth={currentMonth}
+                dayMap={dayMap}
+                onSelectDay={openDay}
+                selectedDateStr={selectedDay}
+                isLoading={isLoading}
+              />
+            </div>
 
-        <CalendarLegend
-          todayLabel={t('calendar.legend.today')}
-          doneLabel={t('calendar.legend.done')}
-          partialLabel={t('calendar.legend.partial')}
-          missedLabel={t('calendar.legend.missed')}
-        />
+            <CalendarLegend
+              todayLabel={t('calendar.legend.today')}
+              doneLabel={t('calendar.legend.done')}
+              partialLabel={t('calendar.legend.partial')}
+              missedLabel={t('calendar.legend.missed')}
+            />
 
-        <SectionLabel>{t('calendar.thisMonth')}</SectionLabel>
-        <SettingsRow
-          label={t('calendar.bestStreak')}
-          value={String(monthStats.bestStreak)}
-          accessory="none"
-          mono
-        />
-        <SettingsRow
-          label={t('calendar.totalLogs')}
-          value={String(monthStats.totalLogs)}
-          accessory="none"
-          mono
-        />
-        <SettingsRow
-          label={t('calendar.missedCount')}
-          value={String(monthStats.missed)}
-          accessory="none"
-          mono
-          divider={false}
-        />
+            <SectionLabel>{t('calendar.thisMonth')}</SectionLabel>
+            <CalendarStats stats={monthStatTiles} />
+          </>
+        )}
+
+        {view === 'week' && (
+          <CalendarWeekView
+            columns={gridColumns}
+            dayMap={rangeDayMap}
+            weekLabel={weekLabel}
+            previousWeekLabel={t('common.previousWeek')}
+            nextWeekLabel={t('common.nextWeek')}
+            currentWeekLabel={t('calendar.goToCurrentWeek')}
+            onPreviousWeek={prevWeek}
+            onNextWeek={nextWeek}
+            onCurrentWeek={goToCurrentWeek}
+            onSelectDay={openDay}
+            displayTime={displayTime}
+            dateFnsLocale={dateFnsLocale}
+            allDayLabel={t('calendar.timeGrid.allDay')}
+            nowLabel={t('calendar.timeGrid.now')}
+          />
+        )}
+
+        {view === 'range' && (
+          <CalendarRangeView
+            currentMonth={currentMonth}
+            monthDayMap={dayMap}
+            rangeStart={rangeStart}
+            rangeEnd={rangeEnd}
+            onPickDay={handleRangePick}
+            columns={gridColumns}
+            rangeDayMap={rangeDayMap}
+            hint={t('calendar.timeGrid.pickRangeHint')}
+            onSelectDay={openDay}
+            displayTime={displayTime}
+            dateFnsLocale={dateFnsLocale}
+            allDayLabel={t('calendar.timeGrid.allDay')}
+            nowLabel={t('calendar.timeGrid.now')}
+          />
+        )}
       </div>
 
       <AppOverlay open={isDayDetailOpen} onOpenChange={setIsDayDetailOpen}>
diff --git a/apps/web/components/calendar/calendar-grid.tsx b/apps/web/components/calendar/calendar-grid.tsx
index 887d829e64..eb1404caf8 100644
--- a/apps/web/components/calendar/calendar-grid.tsx
+++ b/apps/web/components/calendar/calendar-grid.tsx
@@ -23,11 +23,22 @@ interface CalendarGridProps {
   onSelectDay: (dateStr: string) => void
   /** Date string of the day whose detail panel is open (primary-filled pill). */
   selectedDateStr?: string | null
+  /** Inclusive range endpoints (yyyy-MM-dd) for range-pick mode. When set, the
+   *  grid renders an in-range band with highlighted endpoints. */
+  rangeStart?: string | null
+  rangeEnd?: string | null
   /** When true, suppresses status dots so the grid structure still renders
    *  while the month's data is loading. */
   isLoading?: boolean
 }
 
+function isInRange(dateStr: string, start?: string | null, end?: string | null): boolean {
+  if (!start || !end) return false
+  const lo = start <= end ? start : end
+  const hi = start <= end ? end : start
+  return dateStr >= lo && dateStr <= hi
+}
+
 interface GridDay {
   date: Date
   dateStr: string
@@ -68,6 +79,8 @@ export function CalendarGrid({
   dayMap,
   onSelectDay,
   selectedDateStr = null,
+  rangeStart = null,
+  rangeEnd = null,
   isLoading = false,
 }: Readonly<CalendarGridProps>) {
   const t = useTranslations()
@@ -166,6 +179,10 @@ export function CalendarGrid({
             const canSelect = cell.isCurrentMonth
             const status = dayStatus(cell)
             const selected = canSelect && cell.dateStr === selectedDateStr
+            const inRange = canSelect && isInRange(cell.dateStr, rangeStart, rangeEnd)
+            const isEndpoint =
+              canSelect && (cell.dateStr === rangeStart || cell.dateStr === rangeEnd)
+            const highlighted = selected || isEndpoint
             const statusLabel = dayStatusLabel(status, t)
             const dayLabel = statusLabel
               ? `${displayWeekdayDate(cell.date, true)}, ${statusLabel}`
@@ -179,6 +196,7 @@ export function CalendarGrid({
                 aria-label={dayLabel}
                 aria-current={cell.isToday ? 'date' : undefined}
                 aria-disabled={!canSelect}
+                data-in-range={inRange ? 'true' : undefined}
                 onClick={() => canSelect && onSelectDay(cell.dateStr)}
                 className={
                   'relative flex flex-col items-center justify-center bg-transparent transition-[background-color,transform] duration-[var(--dur-fast)] ease-[var(--ease-standard)] ' +
@@ -192,6 +210,9 @@ export function CalendarGrid({
                   borderRadius: 999,
                   cursor: canSelect ? 'pointer' : 'default',
                   opacity: cell.isCurrentMonth ? 1 : 0.5,
+                  background: inRange
+                    ? 'color-mix(in srgb, var(--primary) 12%, transparent)'
+                    : undefined,
                 }}
               >
                 <span
@@ -203,11 +224,11 @@ export function CalendarGrid({
                     fontFamily: 'var(--font-mono)',
                     fontSize: 14,
                     fontWeight: cell.isToday ? 700 : 500,
-                    color: dayNumberColor(cell, selected),
+                    color: dayNumberColor(cell, highlighted),
                     fontVariantNumeric: 'tabular-nums',
-                    background: selected ? 'var(--selection-bg)' : 'transparent',
+                    background: highlighted ? 'var(--selection-bg)' : 'transparent',
                     boxShadow:
-                      cell.isToday && !selected
+                      cell.isToday && !highlighted
                         ? 'inset 0 0 0 1.5px var(--primary)'
                         : 'none',
                   }}
diff --git a/apps/web/components/calendar/calendar-range-view.tsx b/apps/web/components/calendar/calendar-range-view.tsx
new file mode 100644
index 0000000000..d8161719a3
--- /dev/null
+++ b/apps/web/components/calendar/calendar-range-view.tsx
@@ -0,0 +1,76 @@
+'use client'
+
+import type { Locale } from 'date-fns'
+import type { CalendarDayEntry } from '@orbit/shared/types/calendar'
+import { CalendarGrid } from './calendar-grid'
+import { CalendarTimeGrid, type TimeGridColumn } from './calendar-time-grid'
+
+interface CalendarRangeViewProps {
+  /** Month shown in the mini-calendar range picker. */
+  currentMonth: Date
+  /** Month-scoped entries powering the mini-calendar's status dots. */
+  monthDayMap: Map<string, CalendarDayEntry[]>
+  rangeStart: string
+  rangeEnd: string
+  onPickDay: (dateStr: string) => void
+  columns: ReadonlyArray<TimeGridColumn>
+  /** Range-scoped entries powering the time grid. */
+  rangeDayMap: Map<string, CalendarDayEntry[]>
+  hint: string
+  onSelectDay: (dateStr: string) => void
+  displayTime: (time: string) => string
+  dateFnsLocale: Locale
+  allDayLabel: string
+  nowLabel: string
+}
+
+/** Custom-range view: a mini-calendar to pick a contiguous range, then the same
+ *  time grid rendered with one column per day in that range. */
+export function CalendarRangeView({
+  currentMonth,
+  monthDayMap,
+  rangeStart,
+  rangeEnd,
+  onPickDay,
+  columns,
+  rangeDayMap,
+  hint,
+  onSelectDay,
+  displayTime,
+  dateFnsLocale,
+  allDayLabel,
+  nowLabel,
+}: Readonly<CalendarRangeViewProps>) {
+  return (
+    <>
+      <CalendarGrid
+        currentMonth={currentMonth}
+        dayMap={monthDayMap}
+        onSelectDay={onPickDay}
+        rangeStart={rangeStart}
+        rangeEnd={rangeEnd}
+      />
+      <p
+        className="text-center"
+        style={{
+          margin: 0,
+          padding: '0 24px 4px',
+          fontFamily: 'var(--font-sans)',
+          fontSize: 13,
+          color: 'var(--fg-3)',
+        }}
+      >
+        {hint}
+      </p>
+      <CalendarTimeGrid
+        columns={columns}
+        dayMap={rangeDayMap}
+        onSelectDay={onSelectDay}
+        displayTime={displayTime}
+        dateFnsLocale={dateFnsLocale}
+        allDayLabel={allDayLabel}
+        nowLabel={nowLabel}
+      />
+    </>
+  )
+}
diff --git a/apps/web/components/calendar/calendar-stats.tsx b/apps/web/components/calendar/calendar-stats.tsx
new file mode 100644
index 0000000000..1d4c2e90c3
--- /dev/null
+++ b/apps/web/components/calendar/calendar-stats.tsx
@@ -0,0 +1,31 @@
+import { StatTile } from '@/components/ui/stat-tile'
+
+export interface CalendarStat {
+  key: string
+  emoji: string
+  value: string | number
+  label: string
+}
+
+interface CalendarStatsProps {
+  stats: ReadonlyArray<CalendarStat>
+}
+
+/** At-a-glance month stat tiles. Data-driven so new stats drop in as array
+ *  entries; the auto-fit grid reflows them without a layout rewrite. */
+export function CalendarStats({ stats }: Readonly<CalendarStatsProps>) {
+  return (
+    <div
+      className="grid"
+      style={{
+        gridTemplateColumns: 'repeat(auto-fit, minmax(96px, 1fr))',
+        gap: 10,
+        padding: '0 20px',
+      }}
+    >
+      {stats.map((stat) => (
+        <StatTile key={stat.key} emoji={stat.emoji} value={stat.value} label={stat.label} />
+      ))}
+    </div>
+  )
+}
diff --git a/apps/web/components/calendar/calendar-time-grid.tsx b/apps/web/components/calendar/calendar-time-grid.tsx
new file mode 100644
index 0000000000..25cec048b2
--- /dev/null
+++ b/apps/web/components/calendar/calendar-time-grid.tsx
@@ -0,0 +1,393 @@
+'use client'
+
+import { useEffect, useMemo, useRef } from 'react'
+import { format, getHours, getMinutes } from 'date-fns'
+import type { Locale } from 'date-fns'
+import type { CalendarDayEntry } from '@orbit/shared/types/calendar'
+
+const HOUR_HEIGHT = 48
+const DAY_HEIGHT = HOUR_HEIGHT * 24
+const BLOCK_HEIGHT = 38
+const GUTTER = 56
+const BODY_MAX_HEIGHT = 520
+const HOURS = Array.from({ length: 24 }, (_, h) => h)
+
+export interface TimeGridColumn {
+  date: Date
+  dateStr: string
+  isToday: boolean
+}
+
+interface CalendarTimeGridProps {
+  columns: ReadonlyArray<TimeGridColumn>
+  dayMap: Map<string, CalendarDayEntry[]>
+  onSelectDay: (dateStr: string) => void
+  displayTime: (time: string) => string
+  dateFnsLocale: Locale
+  allDayLabel: string
+  nowLabel: string
+}
+
+interface PlacedEntry {
+  entry: CalendarDayEntry
+  hour: number
+  top: number
+  lane: number
+  laneCount: number
+}
+
+function parseMinutes(time: string | null): number | null {
+  if (!time) return null
+  const match = /^(\d{1,2}):(\d{2})/.exec(time)
+  if (!match) return null
+  const hours = Number(match[1])
+  const minutes = Number(match[2])
+  if (Number.isNaN(hours) || Number.isNaN(minutes)) return null
+  return Math.min(hours * 60 + minutes, 24 * 60 - 1)
+}
+
+function entryAccent(entry: CalendarDayEntry): string {
+  if (entry.status === 'completed') {
+    return entry.isBadHabit ? 'var(--status-bad)' : 'var(--status-done)'
+  }
+  if (entry.status === 'missed') {
+    return entry.isBadHabit ? 'var(--status-done)' : 'var(--status-overdue)'
+  }
+  return 'var(--fg-4)'
+}
+
+/** Lays out timed entries into non-overlapping lanes so concurrent blocks sit
+ *  side by side instead of stacking on top of each other. */
+function layoutTimed(entries: CalendarDayEntry[]): PlacedEntry[] {
+  const timed = entries
+    .map((entry) => ({ entry, minutes: parseMinutes(entry.dueTime) }))
+    .filter((item): item is { entry: CalendarDayEntry; minutes: number } => item.minutes !== null)
+    .sort((a, b) => a.minutes - b.minutes)
+
+  const placed: PlacedEntry[] = []
+  let cluster: { entry: CalendarDayEntry; minutes: number }[] = []
+  let clusterEnd = -Infinity
+
+  const flush = () => {
+    const laneEnds: number[] = []
+    const local: PlacedEntry[] = []
+    for (const item of cluster) {
+      const top = (item.minutes / 60) * HOUR_HEIGHT
+      let lane = laneEnds.findIndex((end) => end <= top)
+      if (lane === -1) {
+        lane = laneEnds.length
+        laneEnds.push(0)
+      }
+      laneEnds[lane] = top + BLOCK_HEIGHT
+      local.push({ entry: item.entry, hour: Math.floor(item.minutes / 60), top, lane, laneCount: 0 })
+    }
+    for (const block of local) {
+      block.laneCount = laneEnds.length
+      placed.push(block)
+    }
+  }
+
+  for (const item of timed) {
+    const top = (item.minutes / 60) * HOUR_HEIGHT
+    if (cluster.length > 0 && top >= clusterEnd) {
+      flush()
+      cluster = []
+      clusterEnd = -Infinity
+    }
+    cluster.push(item)
+    clusterEnd = Math.max(clusterEnd, top + BLOCK_HEIGHT)
+  }
+  if (cluster.length > 0) flush()
+
+  return placed
+}
+
+function TimedBlock({
+  block,
+  displayTime,
+}: Readonly<{ block: PlacedEntry; displayTime: (time: string) => string }>) {
+  const accent = entryAccent(block.entry)
+  const completed = block.entry.status === 'completed'
+  return (
+    <div
+      data-testid="time-grid-event"
+      data-hour={block.hour}
+      className="absolute flex flex-col justify-center overflow-hidden"
+      style={{
+        top: block.top,
+        height: BLOCK_HEIGHT,
+        left: `calc(${(block.lane / block.laneCount) * 100}% + 2px)`,
+        width: `calc(${100 / block.laneCount}% - 4px)`,
+        padding: '4px 6px',
+        borderRadius: 8,
+        background: `color-mix(in srgb, ${accent} 16%, transparent)`,
+        boxShadow: `inset 3px 0 0 ${accent}, inset 0 0 0 1px color-mix(in srgb, ${accent} 30%, transparent)`,
+      }}
+    >
+      <span
+        className="truncate"
+        style={{
+          fontFamily: 'var(--font-sans)',
+          fontSize: 11,
+          fontWeight: 500,
+          lineHeight: 1.2,
+          color: completed ? 'var(--fg-3)' : 'var(--fg-1)',
+          textDecoration: completed ? 'line-through' : 'none',
+        }}
+      >
+        {block.entry.title}
+      </span>
+      {block.entry.dueTime && (
+        <span
+          className="truncate"
+          style={{
+            fontFamily: 'var(--font-mono)',
+            fontSize: 10,
+            color: 'var(--fg-3)',
+            fontVariantNumeric: 'tabular-nums',
+          }}
+        >
+          {displayTime(block.entry.dueTime)}
+        </span>
+      )}
+    </div>
+  )
+}
+
+function AllDayChip({ entry }: Readonly<{ entry: CalendarDayEntry }>) {
+  const accent = entryAccent(entry)
+  const completed = entry.status === 'completed'
+  return (
+    <div
+      data-testid="time-grid-all-day-event"
+      className="flex items-center gap-1 overflow-hidden"
+      style={{
+        padding: '3px 6px',
+        borderRadius: 6,
+        background: `color-mix(in srgb, ${accent} 14%, transparent)`,
+        boxShadow: `inset 0 0 0 1px color-mix(in srgb, ${accent} 28%, transparent)`,
+      }}
+    >
+      <span
+        aria-hidden="true"
+        className="shrink-0 rounded-full"
+        style={{ width: 5, height: 5, background: accent }}
+      />
+      <span
+        className="truncate"
+        style={{
+          fontFamily: 'var(--font-sans)',
+          fontSize: 11,
+          fontWeight: 500,
+          color: completed ? 'var(--fg-3)' : 'var(--fg-1)',
+          textDecoration: completed ? 'line-through' : 'none',
+        }}
+      >
+        {entry.title}
+      </span>
+    </div>
+  )
+}
+
+/** Google-Calendar-style time grid: a day column per entry in `columns`, an
+ *  untimed all-day band on top, and timed habits placed as blocks by dueTime.
+ *  Shared by the week view (7 columns) and custom-range view (N columns). */
+export function CalendarTimeGrid({
+  columns,
+  dayMap,
+  onSelectDay,
+  displayTime,
+  dateFnsLocale,
+  allDayLabel,
+  nowLabel,
+}: Readonly<CalendarTimeGridProps>) {
+  const bodyRef = useRef<HTMLDivElement>(null)
+  const nowMinutes = useMemo(() => {
+    const now = new Date()
+    return getHours(now) * 60 + getMinutes(now)
+  }, [])
+
+  useEffect(() => {
+    const node = bodyRef.current
+    if (node) node.scrollTop = 7 * HOUR_HEIGHT
+  }, [])
+
+  const gridTemplate = `${GUTTER}px repeat(${columns.length}, minmax(0, 1fr))`
+
+  const perColumn = useMemo(
+    () =>
+      columns.map((column) => {
+        const entries = dayMap.get(column.dateStr) ?? []
+        return {
+          column,
+          allDay: entries.filter((entry) => !entry.dueTime),
+          timed: layoutTimed(entries),
+        }
+      }),
+    [columns, dayMap],
+  )
+
+  return (
+    <div style={{ padding: '4px 20px 16px' }}>
+      <div
+        data-testid="calendar-time-grid"
+        data-columns={columns.length}
+        style={{
+          borderRadius: 18,
+          overflow: 'hidden',
+          background: 'var(--bg-card)',
+          boxShadow: 'inset 0 0 0 1px var(--hairline)',
+        }}
+      >
+        <div className="grid" style={{ gridTemplateColumns: gridTemplate }}>
+          <div aria-hidden="true" style={{ borderBottom: '1px solid var(--hairline)' }} />
+          {perColumn.map(({ column }) => (
+            <button
+              key={column.dateStr}
+              type="button"
+              data-testid="time-grid-col-header"
+              onClick={() => onSelectDay(column.dateStr)}
+              className="flex flex-col items-center bg-transparent transition-[background-color] duration-[var(--dur-fast)] ease-[var(--ease-standard)] hover:bg-[var(--bg-elev)]"
+              style={{
+                appearance: 'none',
+                border: 0,
+                borderLeft: '1px solid var(--hairline)',
+                borderBottom: '1px solid var(--hairline)',
+                cursor: 'pointer',
+                padding: '8px 2px',
+                gap: 2,
+              }}
+            >
+              <span
+                className="uppercase"
+                style={{
+                  fontFamily: 'var(--font-mono)',
+                  fontSize: 10,
+                  fontWeight: 500,
+                  letterSpacing: '0.04em',
+                  color: column.isToday ? 'var(--primary)' : 'var(--fg-3)',
+                }}
+              >
+                {format(column.date, 'EEE', { locale: dateFnsLocale })}
+              </span>
+              <span
+                className="inline-flex items-center justify-center rounded-full"
+                style={{
+                  width: 24,
+                  height: 24,
+                  fontFamily: 'var(--font-mono)',
+                  fontSize: 13,
+                  fontWeight: column.isToday ? 700 : 500,
+                  fontVariantNumeric: 'tabular-nums',
+                  color: column.isToday ? 'var(--fg-on-primary)' : 'var(--fg-1)',
+                  background: column.isToday ? 'var(--primary)' : 'transparent',
+                }}
+              >
+                {format(column.date, 'd', { locale: dateFnsLocale })}
+              </span>
+            </button>
+          ))}
+        </div>
+
+        <div className="grid" style={{ gridTemplateColumns: gridTemplate }}>
+          <div
+            className="flex items-start justify-end"
+            style={{
+              padding: '6px 6px 0',
+              borderBottom: '1px solid var(--hairline)',
+            }}
+          >
+            <span
+              className="uppercase"
+              style={{
+                fontFamily: 'var(--font-mono)',
+                fontSize: 9,
+                fontWeight: 500,
+                letterSpacing: '0.04em',
+                color: 'var(--fg-4)',
+              }}
+            >
+              {allDayLabel}
+            </span>
+          </div>
+          {perColumn.map(({ column, allDay }) => (
+            <div
+              key={column.dateStr}
+              data-testid="time-grid-all-day"
+              data-date={column.dateStr}
+              className="flex flex-col"
+              style={{
+                gap: 3,
+                minHeight: 34,
+                padding: '6px 3px',
+                borderLeft: '1px solid var(--hairline)',
+                borderBottom: '1px solid var(--hairline)',
+              }}
+            >
+              {allDay.map((entry) => (
+                <AllDayChip key={entry.habitId} entry={entry} />
+              ))}
+            </div>
+          ))}
+        </div>
+
+        <div
+          ref={bodyRef}
+          className="thin-scrollbar overflow-y-auto"
+          style={{ maxHeight: BODY_MAX_HEIGHT }}
+        >
+          <div className="grid" style={{ gridTemplateColumns: gridTemplate }}>
+            <div aria-hidden="true" style={{ position: 'relative', height: DAY_HEIGHT }}>
+              {HOURS.map((hour) => (
+                <span
+                  key={hour}
+                  className="absolute right-2"
+                  style={{
+                    top: hour * HOUR_HEIGHT + 2,
+                    fontFamily: 'var(--font-mono)',
+                    fontSize: 10,
+                    color: 'var(--fg-4)',
+                    fontVariantNumeric: 'tabular-nums',
+                  }}
+                >
+                  {displayTime(`${String(hour).padStart(2, '0')}:00`)}
+                </span>
+              ))}
+            </div>
+            {perColumn.map(({ column, timed }) => (
+              <div
+                key={column.dateStr}
+                style={{
+                  position: 'relative',
+                  height: DAY_HEIGHT,
+                  borderLeft: '1px solid var(--hairline)',
+                  backgroundImage:
+                    'repeating-linear-gradient(to bottom, var(--hairline) 0, var(--hairline) 1px, transparent 1px, transparent ' +
+                    HOUR_HEIGHT +
+                    'px)',
+                }}
+              >
+                {timed.map((block) => (
+                  <TimedBlock key={block.entry.habitId} block={block} displayTime={displayTime} />
+                ))}
+                {column.isToday && (
+                  <div
+                    className="absolute left-0 right-0 flex items-center"
+                    style={{ top: (nowMinutes / 60) * HOUR_HEIGHT, pointerEvents: 'none' }}
+                    aria-label={nowLabel}
+                  >
+                    <span
+                      className="shrink-0 rounded-full"
+                      style={{ width: 7, height: 7, marginLeft: -3, background: 'var(--primary)' }}
+                    />
+                    <span style={{ height: 1.5, flex: 1, background: 'var(--primary)' }} />
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/web/components/calendar/calendar-week-view.tsx b/apps/web/components/calendar/calendar-week-view.tsx
new file mode 100644
index 0000000000..201313d0cc
--- /dev/null
+++ b/apps/web/components/calendar/calendar-week-view.tsx
@@ -0,0 +1,64 @@
+'use client'
+
+import type { Locale } from 'date-fns'
+import type { CalendarDayEntry } from '@orbit/shared/types/calendar'
+import { CalendarWeekNav } from '@/app/(app)/calendar/_components/calendar-shell'
+import { CalendarTimeGrid, type TimeGridColumn } from './calendar-time-grid'
+
+interface CalendarWeekViewProps {
+  columns: ReadonlyArray<TimeGridColumn>
+  dayMap: Map<string, CalendarDayEntry[]>
+  weekLabel: string
+  previousWeekLabel: string
+  nextWeekLabel: string
+  currentWeekLabel: string
+  onPreviousWeek: () => void
+  onNextWeek: () => void
+  onCurrentWeek: () => void
+  onSelectDay: (dateStr: string) => void
+  displayTime: (time: string) => string
+  dateFnsLocale: Locale
+  allDayLabel: string
+  nowLabel: string
+}
+
+/** Week view: a 7-column time grid with week-granularity navigation. */
+export function CalendarWeekView({
+  columns,
+  dayMap,
+  weekLabel,
+  previousWeekLabel,
+  nextWeekLabel,
+  currentWeekLabel,
+  onPreviousWeek,
+  onNextWeek,
+  onCurrentWeek,
+  onSelectDay,
+  displayTime,
+  dateFnsLocale,
+  allDayLabel,
+  nowLabel,
+}: Readonly<CalendarWeekViewProps>) {
+  return (
+    <>
+      <CalendarWeekNav
+        weekLabel={weekLabel}
+        previousWeekLabel={previousWeekLabel}
+        nextWeekLabel={nextWeekLabel}
+        currentWeekLabel={currentWeekLabel}
+        onPreviousWeek={onPreviousWeek}
+        onNextWeek={onNextWeek}
+        onCurrentWeek={onCurrentWeek}
+      />
+      <CalendarTimeGrid
+        columns={columns}
+        dayMap={dayMap}
+        onSelectDay={onSelectDay}
+        displayTime={displayTime}
+        dateFnsLocale={dateFnsLocale}
+        allDayLabel={allDayLabel}
+        nowLabel={nowLabel}
+      />
+    </>
+  )
+}
diff --git a/apps/web/hooks/use-calendar-data.ts b/apps/web/hooks/use-calendar-data.ts
index ede18b126f..932149ce48 100644
--- a/apps/web/hooks/use-calendar-data.ts
+++ b/apps/web/hooks/use-calendar-data.ts
@@ -10,6 +10,7 @@ import { habitKeys, QUERY_STALE_TIMES } from '@orbit/shared/query'
 import { API } from '@orbit/shared/api'
 import { buildCalendarDayMap, formatAPIDate } from '@orbit/shared/utils'
 import type { CalendarMonthResponse } from '@orbit/shared/types/habit'
+import type { CalendarDayEntry } from '@orbit/shared/types/calendar'
 
 async function fetchCalendarMonth(
   monthStart: string,
@@ -24,17 +25,15 @@ async function fetchCalendarMonth(
   return res.json()
 }
 
-export function useCalendarData(currentMonth: Date) {
-  const monthStart = formatAPIDate(startOfMonth(currentMonth))
-  const monthEnd = formatAPIDate(endOfMonth(currentMonth))
-
+function useCalendarRangeQuery(rangeStart: string, rangeEnd: string, enabled = true) {
   const query = useQuery({
-    queryKey: habitKeys.calendar(monthStart, monthEnd),
-    queryFn: () => fetchCalendarMonth(monthStart, monthEnd),
+    queryKey: habitKeys.calendar(rangeStart, rangeEnd),
+    queryFn: () => fetchCalendarMonth(rangeStart, rangeEnd),
     staleTime: QUERY_STALE_TIMES.habits,
+    enabled,
   })
 
-  const dayMap = useMemo(() => {
+  const dayMap = useMemo<Map<string, CalendarDayEntry[]>>(() => {
     if (!query.data) return new Map()
     return buildCalendarDayMap(query.data)
   }, [query.data])
@@ -47,3 +46,19 @@ export function useCalendarData(currentMonth: Date) {
     refresh: () => query.refetch(),
   }
 }
+
+export function useCalendarData(currentMonth: Date) {
+  const monthStart = formatAPIDate(startOfMonth(currentMonth))
+  const monthEnd = formatAPIDate(endOfMonth(currentMonth))
+  return useCalendarRangeQuery(monthStart, monthEnd)
+}
+
+/** Calendar entries for an arbitrary contiguous date range, powering the
+ *  web-only week and custom-range time-grid views. Disabled in month view. */
+export function useCalendarRange(rangeStart: Date, rangeEnd: Date, enabled = true) {
+  return useCalendarRangeQuery(
+    formatAPIDate(rangeStart),
+    formatAPIDate(rangeEnd),
+    enabled,
+  )
+}
diff --git a/packages/shared/src/i18n/en.json b/packages/shared/src/i18n/en.json
index 80ae364e9c..39142405cc 100644
--- a/packages/shared/src/i18n/en.json
+++ b/packages/shared/src/i18n/en.json
@@ -150,6 +150,8 @@
     "nextMonth": "Next month",
     "previousYear": "Previous year",
     "nextYear": "Next year",
+    "previousWeek": "Previous week",
+    "nextWeek": "Next week",
     "continue": "Continue",
     "unknown": "Unknown",
     "failed": "Failed",
@@ -606,6 +608,18 @@
     "noHabitsScheduled": "No habits scheduled for this day.",
     "goToDay": "View this day",
     "goToCurrentMonth": "Go to current month",
+    "goToCurrentWeek": "Go to current week",
+    "view": {
+      "switchLabel": "Calendar view",
+      "month": "Month",
+      "week": "Week",
+      "range": "Range"
+    },
+    "timeGrid": {
+      "allDay": "All-day",
+      "now": "Now",
+      "pickRangeHint": "Pick a start and end day above to set your range."
+    },
     "status": {
       "completed": "Completed",
       "missed": "Missed",
@@ -665,7 +679,7 @@
       "lastSyncedHoursAgo": "{n} hour ago | {n} hours ago",
       "lastSyncedYesterday": "Yesterday",
       "lastSyncedDaysAgo": "{n} day ago | {n} days ago",
-      "syncNow": "Sync now",
+      "syncNow": "Sync",
       "syncNowRunning": "Syncing...",
       "connectGoogleFirst": "Connect your Google account first to enable auto-sync.",
       "reconnectTitle": "Google Calendar disconnected",
diff --git a/packages/shared/src/i18n/pt-BR.json b/packages/shared/src/i18n/pt-BR.json
index afa0f2cdf6..fb0cf216cb 100644
--- a/packages/shared/src/i18n/pt-BR.json
+++ b/packages/shared/src/i18n/pt-BR.json
@@ -150,6 +150,8 @@
     "nextMonth": "Próximo mês",
     "previousYear": "Ano anterior",
     "nextYear": "Próximo ano",
+    "previousWeek": "Semana anterior",
+    "nextWeek": "Próxima semana",
     "continue": "Continuar",
     "unknown": "Desconhecido",
     "failed": "Falhou",
@@ -606,6 +608,18 @@
     "noHabitsScheduled": "Nenhum hábito agendado para este dia.",
     "goToDay": "Ver este dia",
     "goToCurrentMonth": "Ir para o mês atual",
+    "goToCurrentWeek": "Ir para a semana atual",
+    "view": {
+      "switchLabel": "Visualização do calendário",
+      "month": "Mês",
+      "week": "Semana",
+      "range": "Intervalo"
+    },
+    "timeGrid": {
+      "allDay": "Dia inteiro",
+      "now": "Agora",
+      "pickRangeHint": "Escolha um dia inicial e final acima para definir seu intervalo."
+    },
     "status": {
       "completed": "Concluído",
       "missed": "Perdido",
@@ -665,7 +679,7 @@
       "lastSyncedHoursAgo": "há {n} hora | há {n} horas",
       "lastSyncedYesterday": "Ontem",
       "lastSyncedDaysAgo": "há {n} dia | há {n} dias",
-      "syncNow": "Sincronizar agora",
+      "syncNow": "Sincronizar",
       "syncNowRunning": "Sincronizando...",
       "connectGoogleFirst": "Conecte sua conta Google antes de ativar a sincronização automática.",
       "reconnectTitle": "Google Calendar desconectado",