diff --git a/apps/web/src/components/dashboard-builder/canvas/dashboard-canvas.tsx b/apps/web/src/components/dashboard-builder/canvas/dashboard-canvas.tsx
index 2c3aece1..d2af3f47 100644
--- a/apps/web/src/components/dashboard-builder/canvas/dashboard-canvas.tsx
+++ b/apps/web/src/components/dashboard-builder/canvas/dashboard-canvas.tsx
@@ -10,8 +10,10 @@ import type {
 	WidgetMode,
 } from "@/components/dashboard-builder/types"
 import { useDashboardActions } from "@/components/dashboard-builder/dashboard-actions-context"
+import { useDashboardTimeRange } from "@/components/dashboard-builder/dashboard-providers"
 import { WidgetActionsProvider } from "@/components/dashboard-builder/widgets/widget-actions-context"
 import { useWidgetData } from "@/hooks/use-widget-data"
+import { zoomRangeToWarehouse } from "@/lib/time-utils"
 import { ChartWidget } from "@/components/dashboard-builder/widgets/chart-widget"
 import { StatWidget } from "@/components/dashboard-builder/widgets/stat-widget"
 import { GaugeWidget } from "@/components/dashboard-builder/widgets/gauge-widget"
@@ -39,6 +41,7 @@ const visualizationRegistry: Record<
 		dataState: WidgetDataState
 		display: WidgetDisplayConfig
 		mode: WidgetMode
+		onZoomSelect?: (range: { startBucket: string; endBucket: string }) => void
 	}>
 > = {
 	chart: ChartWidget,
@@ -97,16 +100,42 @@ function useInViewportSticky() {
 	return { ref, visible }
 }
 
-const WidgetRenderer = memo(function WidgetRenderer({ widget }: { widget: DashboardWidget }) {
+const WidgetRenderer = memo(function WidgetRenderer({
+	widget,
+	readOnly,
+}: {
+	widget: DashboardWidget
+	readOnly: boolean
+}) {
 	const { mode } = useDashboardActions()
+	const {
+		actions: { setTimeRange },
+	} = useDashboardTimeRange()
 	const { ref, visible } = useInViewportSticky()
 	const { dataState } = useWidgetData(widget, visible)
 	const Visualization = visualizationRegistry[widget.visualization] ?? visualizationRegistry.chart
 
+	// Drag-to-zoom: a chart hands back the bucket timestamps at each end of the
+	// dragged window; narrow the dashboard time range to that absolute window.
+	// Disabled in read-only mode (e.g. previewing a historical version) so a
+	// drag can't mutate the live dashboard time range.
+	const handleZoomSelect = useCallback(
+		(range: { startBucket: string; endBucket: string }) => {
+			const resolved = zoomRangeToWarehouse(range)
+			if (resolved) setTimeRange({ type: "absolute", ...resolved })
+		},
+		[setTimeRange],
+	)
+
 	return (
 		<div ref={ref} className="h-full w-full">
 			<WidgetActionsProvider widget={widget} dataState={dataState}>
-				<Visualization dataState={dataState} display={widget.display} mode={mode} />
+				<Visualization
+					dataState={dataState}
+					display={widget.display}
+					mode={mode}
+					onZoomSelect={readOnly ? undefined : handleZoomSelect}
+				/>
 			</WidgetActionsProvider>
 		</div>
 	)
@@ -185,7 +214,7 @@ export function DashboardCanvas({ widgets, readOnly = false }: DashboardCanvasPr
 				>
 					{widgets.map((widget) => (
 						<div key={widget.id}>
-							<WidgetRenderer widget={widget} />
+							<WidgetRenderer widget={widget} readOnly={readOnly} />
 						</div>
 					))}
 				</GridLayout>
diff --git a/apps/web/src/components/dashboard-builder/widgets/chart-expand-modal.tsx b/apps/web/src/components/dashboard-builder/widgets/chart-expand-modal.tsx
new file mode 100644
index 00000000..4d9611da
--- /dev/null
+++ b/apps/web/src/components/dashboard-builder/widgets/chart-expand-modal.tsx
@@ -0,0 +1,47 @@
+import type { ReactNode } from "react"
+
+import { cn } from "@maple/ui/utils"
+import { ChartLegendSlotContext } from "@maple/ui/components/ui/chart"
+import { Dialog, DialogPopup, DialogTitle } from "@maple/ui/components/ui/dialog"
+import { useMemo } from "react"
+
+interface ChartExpandModalProps {
+	open: boolean
+	onOpenChange: (open: boolean) => void
+	title: string
+	/** The chart, rendered larger to fill the modal body. */
+	children: ReactNode
+}
+
+/**
+ * A near-fullscreen, centered modal that renders a chart at a larger size.
+ * Reused by dashboard chart widgets and the service/home metrics grid so the
+ * expand affordance and dialog wiring live in one place.
+ *
+ * The body provides its own `ChartLegendSlotContext` (the in-modal chart shows
+ * its legend inline rather than hoisting it into a widget header), so the
+ * expanded chart renders independently of the parent widget's legend slot.
+ */
+export function ChartExpandModal({ open, onOpenChange, title, children }: ChartExpandModalProps) {
+	// The expanded chart renders its legend inline (legend is promoted to
+	// "visible"), so the hoist slot is a no-op sink — it just absorbs any items a
+	// chart tries to hoist without forcing a wasted re-render of the modal.
+	const legendSlot = useMemo(() => ({ setItems: () => {} }), [])
+
+	return (
+		<Dialog open={open} onOpenChange={onOpenChange}>
+			<DialogPopup
+				className={cn(
+					"h-[90vh] max-h-[90vh] w-[90vw] max-w-[1600px] origin-center flex-col gap-3 p-6",
+				)}
+			>
+				<DialogTitle className="shrink-0 truncate pe-10 text-base font-semibold">{title}</DialogTitle>
+				<div className="min-h-0 flex-1">
+					<ChartLegendSlotContext.Provider value={legendSlot}>
+						{open ? children : null}
+					</ChartLegendSlotContext.Provider>
+				</div>
+			</DialogPopup>
+		</Dialog>
+	)
+}
diff --git a/apps/web/src/components/dashboard-builder/widgets/chart-widget.tsx b/apps/web/src/components/dashboard-builder/widgets/chart-widget.tsx
index 6956c2f8..8fbc58b9 100644
--- a/apps/web/src/components/dashboard-builder/widgets/chart-widget.tsx
+++ b/apps/web/src/components/dashboard-builder/widgets/chart-widget.tsx
@@ -2,6 +2,7 @@ import { memo, Suspense } from "react"
 
 import { getChartById } from "@maple/ui/components/charts/registry"
 import { ChartSkeleton } from "@maple/ui/components/charts/_shared/chart-skeleton"
+import { useTimezonePreference } from "@/hooks/use-timezone-preference"
 import { WidgetFrame } from "@/components/dashboard-builder/widgets/widget-shell"
 import type { WidgetDataState, WidgetDisplayConfig, WidgetMode } from "@/components/dashboard-builder/types"
 
@@ -14,6 +15,8 @@ interface ChartWidgetProps {
 	onConfigure?: () => void
 	onCreateAlert?: () => void
 	onFix?: () => void
+	/** Drag-to-zoom on time-series charts. See `BaseChartProps.onZoomSelect`. */
+	onZoomSelect?: (range: { startBucket: string; endBucket: string }) => void
 }
 
 export const ChartWidget = memo(function ChartWidget({
@@ -25,7 +28,9 @@ export const ChartWidget = memo(function ChartWidget({
 	onConfigure,
 	onCreateAlert,
 	onFix,
+	onZoomSelect,
 }: ChartWidgetProps) {
+	const { effectiveTimezone } = useTimezonePreference()
 	const chartId = display.chartId ?? "gradient-area"
 	const entry = getChartById(chartId)
 	if (!entry) return null
@@ -37,6 +42,29 @@ export const ChartWidget = memo(function ChartWidget({
 	const seriesStats = display.chartPresentation?.seriesStats ?? legend !== "hidden"
 	const tooltip = display.chartPresentation?.tooltip
 
+	const renderChart = (expanded: boolean) => (
+		<ChartComponent
+			data={chartData}
+			className="h-full w-full aspect-auto"
+			// In the expanded modal the legend renders inline (there is no widget
+			// header to hoist it into), so promote a hidden legend to visible there.
+			legend={expanded && legend === "hidden" ? "visible" : legend}
+			seriesStats={seriesStats}
+			tooltip={tooltip}
+			stacked={display.stacked}
+			curveType={display.curveType}
+			unit={display.unit}
+			logScale={display.yAxis?.logScale}
+			softMin={display.yAxis?.softMin}
+			softMax={display.yAxis?.softMax}
+			fitYAxisToData={display.yAxis?.fitYAxisToData}
+			showPoints={display.chartPresentation?.showPoints}
+			thresholds={display.thresholds}
+			timeZone={effectiveTimezone}
+			onZoomSelect={onZoomSelect}
+		/>
+	)
+
 	return (
 		<WidgetFrame
 			title={display.title || "Untitled"}
@@ -48,25 +76,11 @@ export const ChartWidget = memo(function ChartWidget({
 			onCreateAlert={onCreateAlert}
 			onFix={onFix}
 			loadingSkeleton={<ChartSkeleton variant={entry.category} />}
+			renderExpanded={() => (
+				<Suspense fallback={<ChartSkeleton variant={entry.category} />}>{renderChart(true)}</Suspense>
+			)}
 		>
-			<Suspense fallback={<ChartSkeleton variant={entry.category} />}>
-				<ChartComponent
-					data={chartData}
-					className="h-full w-full aspect-auto"
-					legend={legend}
-					seriesStats={seriesStats}
-					tooltip={tooltip}
-					stacked={display.stacked}
-					curveType={display.curveType}
-					unit={display.unit}
-					logScale={display.yAxis?.logScale}
-					softMin={display.yAxis?.softMin}
-					softMax={display.yAxis?.softMax}
-					fitYAxisToData={display.yAxis?.fitYAxisToData}
-					showPoints={display.chartPresentation?.showPoints}
-					thresholds={display.thresholds}
-				/>
-			</Suspense>
+			<Suspense fallback={<ChartSkeleton variant={entry.category} />}>{renderChart(false)}</Suspense>
 		</WidgetFrame>
 	)
 })
diff --git a/apps/web/src/components/dashboard-builder/widgets/widget-shell.tsx b/apps/web/src/components/dashboard-builder/widgets/widget-shell.tsx
index aa94d543..1de7e98a 100644
--- a/apps/web/src/components/dashboard-builder/widgets/widget-shell.tsx
+++ b/apps/web/src/components/dashboard-builder/widgets/widget-shell.tsx
@@ -1,5 +1,7 @@
 import { useMemo, useState, type ReactNode } from "react"
+import { useHotkeys } from "@tanstack/react-hotkeys"
 import { cn } from "@maple/ui/utils"
+import { isEditableTarget, isOverlayOpen } from "@/lib/keyboard"
 import { ChartLegendSlotContext, type ChartLegendItem } from "@maple/ui/components/ui/chart"
 import {
 	GripDotsIcon,
@@ -9,7 +11,9 @@ import {
 	DotsVerticalIcon,
 	ChatBubbleSparkleIcon,
 	BellIcon,
+	MaximizeIcon,
 } from "@/components/icons"
+import { ChartExpandModal } from "@/components/dashboard-builder/widgets/chart-expand-modal"
 
 import { Card, CardContent, CardHeader, CardTitle, CardAction } from "@maple/ui/components/ui/card"
 import { Button } from "@maple/ui/components/ui/button"
@@ -41,6 +45,13 @@ interface WidgetShellProps {
 	/** Summary stat rendered below the card content. */
 	footer?: ReactNode
 	contentClassName?: string
+	/**
+	 * When provided, a "maximize" button is shown in the header that opens a
+	 * near-fullscreen modal rendering the result of this render-prop (typically
+	 * the same chart at a larger size). Kept as a callback so the larger chart
+	 * is only mounted while the modal is open.
+	 */
+	renderExpanded?: () => ReactNode
 	children: ReactNode
 }
 
@@ -54,6 +65,7 @@ export function WidgetShell({
 	headerValue,
 	footer,
 	contentClassName,
+	renderExpanded,
 	children,
 }: WidgetShellProps) {
 	const ctx = useWidgetActions()
@@ -66,12 +78,52 @@ export function WidgetShell({
 	// alerts can be spun off a chart without entering dashboard edit mode.
 	const showMenu = isEditable || createAlert != null
 	const [menuOpen, setMenuOpen] = useState(false)
+	const [expanded, setExpanded] = useState(false)
+	const canExpand = renderExpanded != null
 	const [legendItems, setLegendItems] = useState<ChartLegendItem[]>([])
 	const legendSlot = useMemo(() => ({ setItems: setLegendItems }), [])
 
+	// "F" opens the expand modal for the chart the user is currently pointing at
+	// or has keyboard focus within. Pointer hover and DOM focus are tracked
+	// independently so the shortcut works for both mouse and keyboard users and
+	// neither input clobbers the other; the hotkey fires while either is active.
+	const [hovered, setHovered] = useState(false)
+	const [focused, setFocused] = useState(false)
+
+	useHotkeys(
+		[
+			{
+				hotkey: "F",
+				callback: (e) => {
+					if (isEditableTarget(e.target) || isEditableTarget(document.activeElement)) return
+					if (isOverlayOpen()) return
+					if (canExpand) setExpanded(true)
+				},
+			},
+		],
+		{ enabled: (hovered || focused) && canExpand, stopPropagation: false },
+	)
+
 	return (
-		<Card className="h-full flex flex-col">
-			<CardHeader className="py-2.5">
+		<Card
+			className={cn(
+				"group/card h-full flex flex-col",
+				canExpand &&
+					"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
+			)}
+			// Make the card a tab stop only when it can expand, so keyboard users
+			// can focus it and use "F" the same way pointer users hover it.
+			tabIndex={canExpand ? 0 : undefined}
+			onMouseEnter={() => setHovered(true)}
+			onMouseLeave={() => setHovered(false)}
+			onFocus={() => setFocused(true)}
+			onBlur={(e) => {
+				// Only blur when focus leaves the card entirely, not when it moves
+				// between children (where relatedTarget stays inside).
+				if (!e.currentTarget.contains(e.relatedTarget)) setFocused(false)
+			}}
+		>
+			<CardHeader className="py-2.5 items-center">
 				<div className="flex min-w-0 items-center gap-2">
 					{isEditable && (
 						<div className="widget-drag-handle cursor-grab active:cursor-grabbing text-muted-foreground hover:text-foreground">
@@ -120,52 +172,70 @@ export function WidgetShell({
 							)
 						})()}
 				</div>
-				{showMenu && (
+				{(showMenu || canExpand) && (
 					<CardAction
+						// Pin to row 1 so the action centers against the title's row
+						// rather than the header's full two-row span (whose row gap
+						// would otherwise push the button off the title's center line).
+						style={{ gridRow: "1" }}
 						className={cn(
+							"-my-1 flex items-center gap-0.5 self-center",
 							!isEditable &&
 								"opacity-0 transition-opacity focus-within:opacity-100 group-hover/card:opacity-100",
-							!isEditable && menuOpen && "opacity-100",
+							!isEditable && (menuOpen || expanded) && "opacity-100",
 						)}
 					>
-						<DropdownMenu open={menuOpen} onOpenChange={setMenuOpen}>
-							<DropdownMenuTrigger
-								render={
-									<Button variant="ghost" size="icon-xs">
-										<DotsVerticalIcon size={14} />
-									</Button>
-								}
-							/>
-							<DropdownMenuContent align="end">
-								{isEditable && configure && (
-									<DropdownMenuItem onClick={configure}>
-										<PencilIcon size={14} />
-										Edit
-									</DropdownMenuItem>
-								)}
-								{isEditable && clone && (
-									<DropdownMenuItem onClick={clone}>
-										<CopyIcon size={14} />
-										Clone
-									</DropdownMenuItem>
-								)}
-								{createAlert && (
-									<DropdownMenuItem onClick={createAlert}>
-										<BellIcon size={14} />
-										Create alert
-									</DropdownMenuItem>
-								)}
-								{isEditable && remove && (
-									<>
-										<DropdownMenuSeparator />
-										<DropdownMenuItem variant="destructive" onClick={remove}>
-											<TrashIcon size={14} />
-											Delete
+						{canExpand && (
+							<Button
+								variant="ghost"
+								size="icon-xs"
+								aria-label="Expand chart"
+								title="Expand"
+								onClick={() => setExpanded(true)}
+							>
+								<MaximizeIcon size={14} />
+							</Button>
+						)}
+						{showMenu && (
+							<DropdownMenu open={menuOpen} onOpenChange={setMenuOpen}>
+								<DropdownMenuTrigger
+									render={
+										<Button variant="ghost" size="icon-xs">
+											<DotsVerticalIcon size={14} />
+										</Button>
+									}
+								/>
+								<DropdownMenuContent align="end">
+									{isEditable && configure && (
+										<DropdownMenuItem onClick={configure}>
+											<PencilIcon size={14} />
+											Edit
+										</DropdownMenuItem>
+									)}
+									{isEditable && clone && (
+										<DropdownMenuItem onClick={clone}>
+											<CopyIcon size={14} />
+											Clone
+										</DropdownMenuItem>
+									)}
+									{createAlert && (
+										<DropdownMenuItem onClick={createAlert}>
+											<BellIcon size={14} />
+											Create alert
 										</DropdownMenuItem>
-									</>
-								)}
-							</DropdownMenuContent>
-						</DropdownMenu>
+									)}
+									{isEditable && remove && (
+										<>
+											<DropdownMenuSeparator />
+											<DropdownMenuItem variant="destructive" onClick={remove}>
+												<TrashIcon size={14} />
+												Delete
+											</DropdownMenuItem>
+										</>
+									)}
+								</DropdownMenuContent>
+							</DropdownMenu>
+						)}
 					</CardAction>
 				)}
 			</CardHeader>
@@ -177,6 +247,11 @@ export function WidgetShell({
 			{footer != null && (
 				<div className="shrink-0 px-3 pb-2.5 text-[11px] text-muted-foreground">{footer}</div>
 			)}
+			{canExpand && (
+				<ChartExpandModal open={expanded} onOpenChange={setExpanded} title={title}>
+					{renderExpanded()}
+				</ChartExpandModal>
+			)}
 		</Card>
 	)
 }
@@ -200,6 +275,8 @@ interface WidgetFrameProps {
 	onCreateAlert?: () => void
 	onFix?: () => void
 	contentClassName?: string
+	/** See `WidgetShellProps.renderExpanded`. */
+	renderExpanded?: () => ReactNode
 	loadingSkeleton: ReactNode
 	children: ReactNode
 }
@@ -214,6 +291,7 @@ export function WidgetFrame({
 	onCreateAlert,
 	onFix,
 	contentClassName,
+	renderExpanded,
 	loadingSkeleton,
 	children,
 }: WidgetFrameProps) {
@@ -231,6 +309,7 @@ export function WidgetFrame({
 			onConfigure={onConfigure}
 			onCreateAlert={onCreateAlert}
 			contentClassName={contentClassName}
+			renderExpanded={dataState.status === "ready" ? renderExpanded : undefined}
 		>
 			{dataState.status === "loading" ? (
 				loadingSkeleton
diff --git a/apps/web/src/components/dashboard/metrics-grid.tsx b/apps/web/src/components/dashboard/metrics-grid.tsx
index 9adb9fb7..6dcee035 100644
--- a/apps/web/src/components/dashboard/metrics-grid.tsx
+++ b/apps/web/src/components/dashboard/metrics-grid.tsx
@@ -8,6 +8,7 @@ import type {
 	ChartReferenceLine,
 	ChartTooltipMode,
 } from "@maple/ui/components/charts/_shared/chart-types"
+import { useTimezonePreference } from "@/hooks/use-timezone-preference"
 import { ReadonlyWidgetShell } from "@/components/dashboard-builder/widgets/widget-shell"
 
 interface MetricsGridItem {
@@ -27,6 +28,8 @@ interface MetricsGridItem {
 	headerValue?: ReactNode
 	/** Summary stat rendered below the chart. */
 	footer?: ReactNode
+	/** Drag-to-zoom on the chart. See `BaseChartProps.onZoomSelect`. */
+	onZoomSelect?: (range: { startBucket: string; endBucket: string }) => void
 }
 
 interface MetricsGridProps {
@@ -41,6 +44,7 @@ interface MetricsGridProps {
 }
 
 export function MetricsGrid({ items, className, waiting, syncId }: MetricsGridProps) {
+	const { effectiveTimezone } = useTimezonePreference()
 	return (
 		<div
 			className={cn(
@@ -58,27 +62,48 @@ export function MetricsGrid({ items, className, waiting, syncId }: MetricsGridPr
 				const ChartComponent = entry.component
 				const fullWidth = item.layout.w > 6
 
+				const renderChart = (expanded: boolean) => (
+					<ChartComponent
+						data={item.data}
+						className="h-full w-full aspect-auto"
+						// In the expanded modal the legend renders inline (no widget
+						// header to hoist it into), so show it even when the inline
+						// chart's legend is hidden/unset.
+						legend={expanded ? (item.legend ?? "visible") : item.legend}
+						tooltip={item.tooltip}
+						rateMode={item.rateMode}
+						referenceLines={item.referenceLines}
+						renderReferenceMarker={item.renderReferenceMarker}
+						timeZone={effectiveTimezone}
+						// The expanded (modal) chart drops the shared syncId so hovering
+						// it doesn't drive the tooltip cursor on the grid charts hidden
+						// behind the dialog.
+						syncId={expanded ? undefined : syncId}
+						onZoomSelect={item.onZoomSelect}
+					/>
+				)
+
 				return (
 					<div key={item.id} className={cn("h-[240px] md:h-[280px]", fullWidth && "md:col-span-2")}>
 						<ReadonlyWidgetShell
 							title={item.title}
 							headerValue={item.headerValue}
 							footer={item.footer}
+							renderExpanded={
+								item.isLoading
+									? undefined
+									: () => (
+											<Suspense fallback={<ChartSkeleton variant={entry.category} />}>
+												{renderChart(true)}
+											</Suspense>
+										)
+							}
 						>
 							{item.isLoading ? (
 								<ChartSkeleton variant={entry.category} />
 							) : (
 								<Suspense fallback={<ChartSkeleton variant={entry.category} />}>
-									<ChartComponent
-										data={item.data}
-										className="h-full w-full aspect-auto"
-										legend={item.legend}
-										tooltip={item.tooltip}
-										rateMode={item.rateMode}
-										referenceLines={item.referenceLines}
-										renderReferenceMarker={item.renderReferenceMarker}
-										syncId={syncId}
-									/>
+									{renderChart(false)}
 								</Suspense>
 							)}
 						</ReadonlyWidgetShell>
diff --git a/apps/web/src/components/time-range-picker/custom-range-picker.tsx b/apps/web/src/components/time-range-picker/custom-range-picker.tsx
index 96de6fae..dd273149 100644
--- a/apps/web/src/components/time-range-picker/custom-range-picker.tsx
+++ b/apps/web/src/components/time-range-picker/custom-range-picker.tsx
@@ -2,31 +2,56 @@ import { useState } from "react"
 import { Calendar } from "@maple/ui/components/ui/calendar"
 import { Button } from "@maple/ui/components/ui/button"
 import { Input } from "@maple/ui/components/ui/input"
-import { format, parse, isValid, setHours, setMinutes } from "date-fns"
+import { parse, isValid } from "date-fns"
 import type { DateRange } from "react-day-picker"
-import { formatForTinybird } from "@/lib/time-utils"
+import { formatForTinybird, formatZoneOffsetLabel } from "@/lib/time-utils"
+import {
+	normalizeTimestampInput,
+	utcToZonedWallClock,
+	zonedWallClockToUtc,
+	type ZonedWallClock,
+} from "@/lib/timezone-format"
 
 interface CustomRangePickerProps {
 	startTime?: string
 	endTime?: string
+	/** IANA timezone the wall-clock inputs are interpreted in. */
+	timeZone: string
 	onApply: (range: { startTime: string; endTime: string }) => void
 	onCancel: () => void
 }
 
-export function CustomRangePicker({ startTime, endTime, onApply, onCancel }: CustomRangePickerProps) {
+const pad = (value: number) => value.toString().padStart(2, "0")
+
+// Resolve a stored warehouse timestamp into the calendar day + "HH:mm" inputs,
+// projected into `timeZone`. The Calendar tracks days via a Date's *local*
+// y/m/d, so we build a local-midnight Date from the zoned wall-clock day.
+function storedToWallClock(value: string, timeZone: string): { day: Date; time: string } {
+	const parts = utcToZonedWallClock(new Date(normalizeTimestampInput(value)), timeZone)
+	return {
+		day: new Date(parts.year, parts.month - 1, parts.day),
+		time: `${pad(parts.hour)}:${pad(parts.minute)}`,
+	}
+}
+
+export function CustomRangePicker({
+	startTime,
+	endTime,
+	timeZone,
+	onApply,
+	onCancel,
+}: CustomRangePickerProps) {
+	const initialStart = startTime ? storedToWallClock(startTime, timeZone) : undefined
+	const initialEnd = endTime ? storedToWallClock(endTime, timeZone) : undefined
+
 	const [dateRange, setDateRange] = useState<DateRange | undefined>(() => {
-		const from = startTime ? new Date(startTime) : undefined
-		const to = endTime ? new Date(endTime) : undefined
+		const from = initialStart?.day
+		const to = initialEnd?.day
 		return from || to ? { from, to } : undefined
 	})
 
-	const [startTimeInput, setStartTimeInput] = useState(() => {
-		return startTime ? format(new Date(startTime), "HH:mm") : "00:00"
-	})
-
-	const [endTimeInput, setEndTimeInput] = useState(() => {
-		return endTime ? format(new Date(endTime), "HH:mm") : "23:59"
-	})
+	const [startTimeInput, setStartTimeInput] = useState(() => initialStart?.time ?? "00:00")
+	const [endTimeInput, setEndTimeInput] = useState(() => initialEnd?.time ?? "23:59")
 
 	const handleApply = () => {
 		if (!dateRange?.from || !dateRange?.to) return
@@ -34,12 +59,29 @@ export function CustomRangePicker({ startTime, endTime, onApply, onCancel }: Cus
 		const [startHour, startMin] = startTimeInput.split(":").map(Number)
 		const [endHour, endMin] = endTimeInput.split(":").map(Number)
 
-		let startDate = setHours(setMinutes(dateRange.from, startMin || 0), startHour || 0)
-		let endDate = setHours(setMinutes(dateRange.to, endMin || 0), endHour || 0)
+		// Combine the selected calendar day (read from the Date's local y/m/d) with
+		// the entered wall-clock time, then resolve that wall-clock *in the chosen
+		// timezone* to a UTC instant. This keeps the round-trip symmetric so the
+		// applied range no longer jumps by the UTC offset.
+		const toWall = (day: Date, hour: number, minute: number): ZonedWallClock => ({
+			year: day.getFullYear(),
+			month: day.getMonth() + 1,
+			day: day.getDate(),
+			hour: hour || 0,
+			minute: minute || 0,
+			second: 0,
+		})
+
+		const a = zonedWallClockToUtc(toWall(dateRange.from, startHour, startMin), timeZone)
+		const b = zonedWallClockToUtc(toWall(dateRange.to, endHour, endMin), timeZone)
+		// The calendar orders days, but the time inputs are independent — a
+		// single-day selection with start time after end time would otherwise
+		// produce a reversed (start > end) range. Order the instants ascending.
+		const [startInstant, endInstant] = a.getTime() <= b.getTime() ? [a, b] : [b, a]
 
 		onApply({
-			startTime: formatForTinybird(startDate),
-			endTime: formatForTinybird(endDate),
+			startTime: formatForTinybird(startInstant),
+			endTime: formatForTinybird(endInstant),
 		})
 	}
 
@@ -87,6 +129,10 @@ export function CustomRangePicker({ startTime, endTime, onApply, onCancel }: Cus
 				</div>
 			</div>
 
+			<p className="text-[11px] text-muted-foreground">
+				Times are in {timeZone.replace(/_/g, " ")} ({formatZoneOffsetLabel(timeZone)})
+			</p>
+
 			<div className="flex justify-end gap-2">
 				<Button variant="ghost" size="sm" onClick={onCancel}>
 					Cancel
diff --git a/apps/web/src/components/time-range-picker/time-range-picker.tsx b/apps/web/src/components/time-range-picker/time-range-picker.tsx
index 6f9ea04f..b42aefae 100644
--- a/apps/web/src/components/time-range-picker/time-range-picker.tsx
+++ b/apps/web/src/components/time-range-picker/time-range-picker.tsx
@@ -4,6 +4,7 @@ import { Popover, PopoverContent, PopoverTrigger } from "@maple/ui/components/ui
 
 import { ClockIcon } from "@/components/icons"
 import { useAppHotkey } from "@/hooks/use-app-hotkey"
+import { useTimezonePreference } from "@/hooks/use-timezone-preference"
 import { useRecentlyUsedTimes, type RecentTimeRange } from "@/hooks/use-recently-used-times"
 import { formatTimeRangeDisplay, presetLabel, relativeToAbsolute, type TimePreset } from "@/lib/time-utils"
 
@@ -25,6 +26,7 @@ export function TimeRangePicker({
 	const [open, setOpen] = useState(false)
 	const [tab, setTab] = useState<TimeRangeTab>("relative")
 	const { recentTimes, addRecentTime } = useRecentlyUsedTimes()
+	const { effectiveTimezone } = useTimezonePreference()
 
 	// Only the page-level picker opts in (hotkey prop) so secondary pickers
 	// (e.g. the widget builder's) don't double-register "D".
@@ -125,6 +127,7 @@ export function TimeRangePicker({
 					<CustomRangePicker
 						startTime={startTime}
 						endTime={endTime}
+						timeZone={effectiveTimezone}
 						onApply={handleCustomApply}
 						onCancel={() => setTab("relative")}
 					/>
diff --git a/apps/web/src/components/time-range-picker/timezone-display.tsx b/apps/web/src/components/time-range-picker/timezone-display.tsx
index 7536d0c6..5994a4a7 100644
--- a/apps/web/src/components/time-range-picker/timezone-display.tsx
+++ b/apps/web/src/components/time-range-picker/timezone-display.tsx
@@ -1,18 +1,170 @@
-import { getTimezoneAbbr, getTimezoneDisplay } from "@/lib/time-utils"
+import { useMemo, useState } from "react"
+import { Popover, PopoverContent, PopoverTrigger } from "@maple/ui/components/ui/popover"
+import { Input } from "@maple/ui/components/ui/input"
+import { cn } from "@maple/ui/utils"
+import { ChevronExpandYIcon } from "@/components/icons"
+import { getBrowserTimeZone, SYSTEM_VALUE } from "@/atoms/timezone-preference-atoms"
+import { useTimezonePreference } from "@/hooks/use-timezone-preference"
+import { formatZoneOffsetLabel, getZoneOffsetMinutes } from "@/lib/time-utils"
+
+const prettyZone = (zone: string) => zone.replace(/_/g, " ")
+
+interface TzEntry {
+	/** Stored preference value: an IANA zone, or null for "system default". */
+	value: string | null
+	offsetLabel: string
+	offsetMinutes: number
+	primary: string
+	secondary?: string
+	search: string
+}
 
 export function TimezoneDisplay() {
-	const offset = getTimezoneDisplay()
-	const abbr = getTimezoneAbbr()
+	const { selectedTimezone, effectiveTimezone, setSelectedTimezone, supportedTimezones } =
+		useTimezonePreference()
+	const [open, setOpen] = useState(false)
+	const [query, setQuery] = useState("")
+
+	// Precompute labels/offsets once — recomputing ~400 Intl offsets per render
+	// (and per keystroke) would be wasteful.
+	const { pinned, zones } = useMemo(() => {
+		const browserZone = getBrowserTimeZone()
+		const pinned: TzEntry[] = [
+			{
+				value: null,
+				offsetLabel: formatZoneOffsetLabel(browserZone),
+				offsetMinutes: getZoneOffsetMinutes(browserZone),
+				primary: "System",
+				secondary: prettyZone(browserZone),
+				search: `system default ${prettyZone(browserZone)} ${browserZone} ${formatZoneOffsetLabel(
+					browserZone,
+				)}`.toLowerCase(),
+			},
+			{
+				value: "UTC",
+				offsetLabel: "UTC+0",
+				offsetMinutes: 0,
+				primary: "UTC",
+				search: "utc coordinated universal time utc+0",
+			},
+		]
+
+		const zones: TzEntry[] = supportedTimezones
+			.filter((zone) => zone !== "UTC")
+			.map((zone) => {
+				const offsetLabel = formatZoneOffsetLabel(zone)
+				return {
+					value: zone,
+					offsetLabel,
+					offsetMinutes: getZoneOffsetMinutes(zone),
+					primary: prettyZone(zone),
+					search: `${prettyZone(zone)} ${zone} ${offsetLabel}`.toLowerCase(),
+				}
+			})
+			.sort((a, b) => a.offsetMinutes - b.offsetMinutes || a.primary.localeCompare(b.primary))
+
+		return { pinned, zones }
+	}, [supportedTimezones])
+
+	// Re-filter only when the query (or the precomputed lists) change, not on
+	// every render — the zone list is ~400 entries.
+	const { filteredPinned, filteredZones } = useMemo(() => {
+		const q = query.trim().toLowerCase()
+		const matches = (entry: TzEntry) =>
+			q === "" || entry.search.includes(q) || entry.offsetLabel.toLowerCase().includes(q)
+		return { filteredPinned: pinned.filter(matches), filteredZones: zones.filter(matches) }
+	}, [query, pinned, zones])
+	const hasResults = filteredPinned.length > 0 || filteredZones.length > 0
+
+	const activeValue = selectedTimezone ?? null
+
+	const handleSelect = (value: string | null) => {
+		setSelectedTimezone(value)
+		setOpen(false)
+		setQuery("")
+	}
+
+	const renderRow = (entry: TzEntry) => {
+		const isActive = entry.value === activeValue
+		return (
+			<button
+				key={entry.value ?? SYSTEM_VALUE}
+				type="button"
+				onClick={() => handleSelect(entry.value)}
+				className={cn(
+					"grid w-full grid-cols-[4.25rem_1fr] items-baseline gap-2 rounded-md px-2 py-1.5 text-left transition-colors hover:bg-muted/60",
+					isActive && "bg-muted/50",
+				)}
+			>
+				<span className="text-right font-mono text-[11px] tabular-nums text-muted-foreground">
+					{entry.offsetLabel}
+				</span>
+				<span className="flex min-w-0 items-baseline gap-1.5">
+					<span
+						className={cn(
+							"truncate text-xs",
+							isActive ? "font-medium text-foreground" : "text-foreground/90",
+						)}
+					>
+						{entry.primary}
+					</span>
+					{entry.secondary && (
+						<span className="shrink-0 text-[10px] text-muted-foreground/70">
+							{entry.secondary}
+						</span>
+					)}
+				</span>
+			</button>
+		)
+	}
 
 	return (
-		<div className="flex items-center justify-between gap-3 border-t border-border/70 bg-muted/20 px-4 py-2.5">
-			<span className="text-[10px] font-medium uppercase tracking-[0.12em] text-muted-foreground/80">
-				Timezone
-			</span>
-			<span className="font-mono text-[11px] tracking-tight text-foreground/85">
-				{offset}
-				<span className="text-muted-foreground/70"> · {abbr}</span>
-			</span>
-		</div>
+		<Popover open={open} onOpenChange={setOpen}>
+			<div className="flex items-center justify-between gap-3 border-t border-border/70 bg-muted/20 px-4 py-2.5">
+				<span className="text-[10px] font-medium uppercase tracking-[0.12em] text-muted-foreground/80">
+					Timezone
+				</span>
+				<PopoverTrigger
+					render={
+						<button
+							type="button"
+							className="group inline-flex items-center gap-1 rounded font-mono text-[11px] tracking-tight text-foreground/85 outline-none transition-colors hover:text-foreground focus-visible:text-foreground"
+							title="Change timezone"
+						>
+							<span>{formatZoneOffsetLabel(effectiveTimezone)}</span>
+							<span className="text-muted-foreground/70">
+								{" "}
+								· {prettyZone(effectiveTimezone)}
+							</span>
+							<ChevronExpandYIcon className="size-3 text-muted-foreground/50 transition-colors group-hover:text-muted-foreground" />
+						</button>
+					}
+				/>
+			</div>
+
+			<PopoverContent align="end" className="w-[300px] p-0">
+				<div className="border-b border-border/70 p-2">
+					<Input
+						autoFocus
+						value={query}
+						onChange={(e) => setQuery(e.target.value)}
+						placeholder="Search name or offset (e.g. Berlin, +5:30)"
+						className="h-8 text-xs"
+					/>
+				</div>
+				<div className="max-h-[280px] overflow-y-auto p-1">
+					{!hasResults && (
+						<p className="px-2 py-6 text-center text-xs text-muted-foreground">
+							No timezones found.
+						</p>
+					)}
+					{filteredPinned.map(renderRow)}
+					{filteredPinned.length > 0 && filteredZones.length > 0 && (
+						<div className="mx-2 my-1 h-px bg-border/70" />
+					)}
+					{filteredZones.map(renderRow)}
+				</div>
+			</PopoverContent>
+		</Popover>
 	)
 }
diff --git a/apps/web/src/hooks/use-time-range-keyboard.ts b/apps/web/src/hooks/use-time-range-keyboard.ts
new file mode 100644
index 00000000..3dd1c5a1
--- /dev/null
+++ b/apps/web/src/hooks/use-time-range-keyboard.ts
@@ -0,0 +1,153 @@
+import { useHotkeys, type UseHotkeyDefinition } from "@tanstack/react-hotkeys"
+import { useRef } from "react"
+import { isEditableTarget, isOverlayOpen } from "@/lib/keyboard"
+import { formatForTinybird } from "@/lib/time-utils"
+import { normalizeTimestampInput } from "@/lib/timezone-format"
+
+/** Minimum window width zoom-in can shrink to (1 minute). */
+const MIN_WINDOW_MS = 60 * 1000
+/** Earliest start zoom-out / left-pan may reach (~2 years before now). */
+const MAX_LOOKBACK_MS = 2 * 365 * 24 * 60 * 60 * 1000
+
+/**
+ * Step multipliers. The base fraction is the slice of the current window
+ * width applied per keypress; Shift makes the action "significantly stronger",
+ * Control/Meta "significantly smaller". Pan and zoom each have their own base.
+ */
+const PAN_FRACTION = { base: 0.2, shift: 1.0, fine: 0.04 } as const
+const ZOOM_FRACTION = { base: 0.2, shift: 0.5, fine: 0.04 } as const
+
+type Modifier = "base" | "shift" | "fine"
+type ArrowKey = "ArrowLeft" | "ArrowRight" | "ArrowUp" | "ArrowDown"
+
+function parseMs(warehouse: string): number {
+	return new Date(normalizeTimestampInput(warehouse)).getTime()
+}
+
+interface ResolvedRange {
+	startMs: number
+	endMs: number
+}
+
+/**
+ * Clamp a window into the allowed band `[now − MAX_LOOKBACK_MS, now]`,
+ * preserving its width when it fits. If the window is wider than the whole band
+ * (reachable when a custom range spans more than the lookback), it collapses to
+ * exactly the full band rather than letting one edge escape past `now` or before
+ * the floor. Done as a single pass so the two bounds can't leak past each other
+ * the way two independent `if` clamps could.
+ */
+function clampToBand(startMs: number, endMs: number): ResolvedRange {
+	const now = Date.now()
+	const earliest = now - MAX_LOOKBACK_MS
+	const width = endMs - startMs
+	if (width >= MAX_LOOKBACK_MS) return { startMs: earliest, endMs: now }
+	if (endMs > now) return { startMs: now - width, endMs: now }
+	if (startMs < earliest) return { startMs: earliest, endMs: earliest + width }
+	return { startMs, endMs }
+}
+
+/**
+ * Pan/zoom the [start, end] window for one keypress, clamping so:
+ * - `end` never exceeds now,
+ * - `start` never precedes now − MAX_LOOKBACK_MS,
+ * - the width never falls below MIN_WINDOW_MS.
+ * Returns `null` when the action is a no-op (already clamped).
+ */
+function applyKey(key: ArrowKey, mod: Modifier, { startMs, endMs }: ResolvedRange): ResolvedRange | null {
+	const width = Math.max(MIN_WINDOW_MS, endMs - startMs)
+
+	let nextStart: number
+	let nextEnd: number
+
+	if (key === "ArrowLeft" || key === "ArrowRight") {
+		const delta = width * PAN_FRACTION[mod] * (key === "ArrowLeft" ? -1 : 1)
+		nextStart = startMs + delta
+		nextEnd = endMs + delta
+	} else {
+		const center = (startMs + endMs) / 2
+		const fraction = ZOOM_FRACTION[mod]
+		// Up = zoom in (shrink), Down = zoom out (grow).
+		const nextWidth =
+			key === "ArrowUp" ? Math.max(MIN_WINDOW_MS, width * (1 - fraction)) : width * (1 + fraction)
+		const half = nextWidth / 2
+		nextStart = center - half
+		nextEnd = center + half
+	}
+
+	const clamped = clampToBand(nextStart, nextEnd)
+	nextStart = Math.round(clamped.startMs)
+	nextEnd = Math.round(clamped.endMs)
+	if (nextEnd - nextStart < MIN_WINDOW_MS) return null
+	if (nextStart === startMs && nextEnd === endMs) return null
+	return { startMs: nextStart, endMs: nextEnd }
+}
+
+export interface UseTimeRangeKeyboardControls {
+	/** Resolved absolute start, warehouse format "YYYY-MM-DD HH:mm:ss" (UTC). */
+	start: string
+	/** Resolved absolute end, warehouse format "YYYY-MM-DD HH:mm:ss" (UTC). */
+	end: string
+	/** When false, the hotkeys stay registered but don't fire. */
+	enabled?: boolean
+	/** Receives the new absolute window in warehouse format. */
+	onChange: (range: { startTime: string; endTime: string }) => void
+}
+
+/**
+ * Arrow-key pan/zoom for a page's selected time window. Operates on the
+ * resolved absolute range and always writes an absolute range back via
+ * `onChange`:
+ * - Left / Right → pan into the past / future (Right clamps at now).
+ * - Up / Down → zoom in / out around the window center (clamped).
+ * - Shift → much larger step; Ctrl/Meta → much finer step.
+ *
+ * Registered through TanStack Hotkeys. Because the matcher requires exact
+ * modifier state, each arrow key is registered three times — plain, `Shift+`,
+ * and `Ctrl+`/`Meta+` — mapping to the base / strong / fine step. The handler
+ * bails while an editable element is focused or any overlay (dialog, menu,
+ * listbox) owns the keyboard, so it never hijacks menu/select navigation.
+ */
+export function useTimeRangeKeyboardControls({
+	start,
+	end,
+	enabled = true,
+	onChange,
+}: UseTimeRangeKeyboardControls): void {
+	// Read the latest range/handler from a ref so the callbacks stay stable
+	// across range changes (TanStack Hotkeys syncs callbacks each render anyway,
+	// but this keeps the closure reading current values).
+	const stateRef = useRef({ start, end, onChange })
+	stateRef.current = { start, end, onChange }
+
+	const run = (key: ArrowKey, mod: Modifier, event: KeyboardEvent) => {
+		// Defer to editable fields and keyboard-owning overlays (menu / listbox /
+		// dialog) so their own arrow navigation keeps working.
+		if (isEditableTarget(event.target) || isEditableTarget(document.activeElement)) return
+		if (isOverlayOpen()) return
+
+		const { start: s, end: en, onChange: emit } = stateRef.current
+		const startMs = parseMs(s)
+		const endMs = parseMs(en)
+		if (Number.isNaN(startMs) || Number.isNaN(endMs) || endMs <= startMs) return
+
+		const next = applyKey(key, mod, { startMs, endMs })
+		if (!next) return
+		emit({
+			startTime: formatForTinybird(new Date(next.startMs)),
+			endTime: formatForTinybird(new Date(next.endMs)),
+		})
+	}
+
+	const arrows: ArrowKey[] = ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"]
+	const definitions: UseHotkeyDefinition[] = arrows.flatMap((key) => [
+		{ hotkey: { key }, callback: (e) => run(key, "base", e) },
+		{ hotkey: { key, shift: true }, callback: (e) => run(key, "shift", e) },
+		// Ctrl and Meta both map to the fine step; register both since the
+		// matcher requires exact modifier state.
+		{ hotkey: { key, ctrl: true }, callback: (e) => run(key, "fine", e) },
+		{ hotkey: { key, meta: true }, callback: (e) => run(key, "fine", e) },
+	])
+
+	useHotkeys(definitions, { enabled, ignoreInputs: true, stopPropagation: false })
+}
diff --git a/apps/web/src/lib/keyboard.ts b/apps/web/src/lib/keyboard.ts
index c1cf81c4..71505b00 100644
--- a/apps/web/src/lib/keyboard.ts
+++ b/apps/web/src/lib/keyboard.ts
@@ -13,3 +13,19 @@ export function isDialogOpen(): boolean {
 	// Base UI marks open popups with a bare `data-open` attribute (not Radix's `data-state="open"`).
 	return document.querySelector('[role="dialog"][data-open], [role="alertdialog"][data-open]') !== null
 }
+
+/**
+ * True when ANY keyboard-owning overlay is open — a dialog, a dropdown menu, or
+ * a listbox (select / combobox). Page-level capture-phase shortcuts (arrow-key
+ * pan/zoom, the "F" expand key) must defer to these so the overlay's own
+ * arrow/typeahead navigation keeps working. Broader than `isDialogOpen` because
+ * Base UI menus render as `role="menu"` and selects/comboboxes as
+ * `role="listbox"`, neither of which is a dialog.
+ */
+export function isOverlayOpen(): boolean {
+	return (
+		document.querySelector(
+			'[role="dialog"][data-open], [role="alertdialog"][data-open], [role="menu"][data-open], [role="listbox"][data-open]',
+		) !== null
+	)
+}
diff --git a/apps/web/src/lib/time-utils.ts b/apps/web/src/lib/time-utils.ts
index b3578f80..0a50457f 100644
--- a/apps/web/src/lib/time-utils.ts
+++ b/apps/web/src/lib/time-utils.ts
@@ -180,15 +180,75 @@ export const QUICK_SELECT_OPTIONS: QuickSelectOption[] = [
 	{ label: "today", value: "today" },
 ]
 
-export function getTimezoneDisplay(): string {
-	const offset = new Date().getTimezoneOffset()
-	const hours = Math.abs(Math.floor(offset / 60))
-	const sign = offset <= 0 ? "+" : "-"
-	return `UTC${sign}${hours}`
+/**
+ * Current UTC offset label for an IANA timezone, e.g. "UTC-4" / "UTC+5:30".
+ * Falls back to "UTC" if the zone can't be resolved.
+ */
+export function formatZoneOffsetLabel(timeZone: string): string {
+	try {
+		const parts = new Intl.DateTimeFormat("en-US", {
+			timeZone,
+			timeZoneName: "shortOffset",
+		}).formatToParts(new Date())
+		const name = parts.find((p) => p.type === "timeZoneName")?.value
+		if (name) return name.replace("GMT", "UTC")
+	} catch {
+		// fall through
+	}
+	return "UTC"
+}
+
+/**
+ * Current UTC offset of an IANA timezone in minutes (e.g. UTC+5:30 → 330,
+ * UTC-4 → -240). Used to sort/search the timezone list. Returns 0 on failure.
+ */
+export function getZoneOffsetMinutes(timeZone: string): number {
+	try {
+		const parts = new Intl.DateTimeFormat("en-US", {
+			timeZone,
+			timeZoneName: "shortOffset",
+		}).formatToParts(new Date())
+		const name = parts.find((p) => p.type === "timeZoneName")?.value ?? ""
+		const match = name.match(/GMT([+-])(\d{1,2})(?::(\d{2}))?/)
+		if (!match) return 0
+		const sign = match[1] === "-" ? -1 : 1
+		const hours = parseInt(match[2], 10)
+		const minutes = match[3] ? parseInt(match[3], 10) : 0
+		return sign * (hours * 60 + minutes)
+	} catch {
+		return 0
+	}
 }
 
-export function getTimezoneAbbr(): string {
-	return Intl.DateTimeFormat().resolvedOptions().timeZone
+/**
+ * Convert a chart `bucket` timestamp (ISO 8601, e.g. "2026-06-20T12:00:00Z")
+ * to the warehouse/Tinybird DateTime format used by time-range params.
+ * Returns null when the bucket can't be parsed.
+ */
+export function bucketToWarehouse(bucket: string): string | null {
+	const ms = Date.parse(bucket)
+	if (Number.isNaN(ms)) return null
+	return formatForTinybird(new Date(ms))
+}
+
+/**
+ * Convert a drag-to-zoom selection (two chart `bucket` ISO timestamps) into an
+ * absolute warehouse-format `{ startTime, endTime }`, ordered ascending. Returns
+ * null for a degenerate selection (unparseable bucket, or both ends equal) so
+ * callers can no-op. Shared by every zoom surface (dashboard atom + URL routes)
+ * so the bucket conversion, ordering, and dedupe guard live in one place.
+ */
+export function zoomRangeToWarehouse(range: {
+	startBucket: string
+	endBucket: string
+}): { startTime: string; endTime: string } | null {
+	const a = bucketToWarehouse(range.startBucket)
+	const b = bucketToWarehouse(range.endBucket)
+	if (!a || !b || a === b) return null
+	// Warehouse strings ("YYYY-MM-DD HH:mm:ss", UTC) sort lexicographically by
+	// time, so a plain compare orders the window even if the buckets arrive
+	// reversed.
+	return a <= b ? { startTime: a, endTime: b } : { startTime: b, endTime: a }
 }
 
 const CACHE_SNAP_INTERVAL_S = 15
diff --git a/apps/web/src/lib/timezone-format.ts b/apps/web/src/lib/timezone-format.ts
index 34f06de5..ced40cf2 100644
--- a/apps/web/src/lib/timezone-format.ts
+++ b/apps/web/src/lib/timezone-format.ts
@@ -76,6 +76,74 @@ export function formatTimeInTimezone(
 	return formatter.format(date)
 }
 
+/** Wall-clock components, interpreted within a specific IANA timezone. */
+export interface ZonedWallClock {
+	year: number
+	month: number // 1-12
+	day: number
+	hour: number // 0-23
+	minute: number
+	second: number
+}
+
+const zonedPartsFormatters = new Map<string, Intl.DateTimeFormat>()
+
+function zonedPartsFormatter(timeZone: string): Intl.DateTimeFormat {
+	let formatter = zonedPartsFormatters.get(timeZone)
+	if (!formatter) {
+		formatter = new Intl.DateTimeFormat("en-US", {
+			timeZone,
+			hourCycle: "h23",
+			year: "numeric",
+			month: "2-digit",
+			day: "2-digit",
+			hour: "2-digit",
+			minute: "2-digit",
+			second: "2-digit",
+		})
+		zonedPartsFormatters.set(timeZone, formatter)
+	}
+	return formatter
+}
+
+function extractZonedParts(formatter: Intl.DateTimeFormat, instant: Date): ZonedWallClock {
+	const map: Record<string, number> = {}
+	for (const part of formatter.formatToParts(instant)) {
+		if (part.type !== "literal") map[part.type] = Number(part.value)
+	}
+	// `h23` reports midnight as hour 24 on some engines; fold it back to 0.
+	const hour = map.hour === 24 ? 0 : map.hour
+	return { year: map.year, month: map.month, day: map.day, hour, minute: map.minute, second: map.second }
+}
+
+/**
+ * Offset (in milliseconds) of `timeZone` from UTC at the given instant.
+ * Positive when the zone is ahead of UTC (e.g. +2h → 7_200_000).
+ */
+function timeZoneOffsetMs(instant: Date, timeZone: string): number {
+	const parts = extractZonedParts(zonedPartsFormatter(timeZone), instant)
+	const asUtc = Date.UTC(parts.year, parts.month - 1, parts.day, parts.hour, parts.minute, parts.second)
+	return asUtc - instant.getTime()
+}
+
+/**
+ * Convert a wall-clock time expressed in `timeZone` to the corresponding UTC
+ * instant. A single offset-correction pass resolves DST correctly outside the
+ * rare ambiguous/skipped hour at a transition boundary.
+ */
+export function zonedWallClockToUtc(wall: ZonedWallClock, timeZone: string): Date {
+	const tz = resolveTimeZone(timeZone)
+	const utcGuessMs = Date.UTC(wall.year, wall.month - 1, wall.day, wall.hour, wall.minute, wall.second)
+	const offset = timeZoneOffsetMs(new Date(utcGuessMs), tz)
+	return new Date(utcGuessMs - offset)
+}
+
+/** Decompose a UTC instant into wall-clock components within `timeZone`. */
+export function utcToZonedWallClock(instant: Date, timeZone: string): ZonedWallClock {
+	const tz = resolveTimeZone(timeZone)
+	return extractZonedParts(zonedPartsFormatter(tz), instant)
+}
+
 export function formatCompactTimeInTimezone(
 	input: TimezoneFormatInput,
 	options: { timeZone: string },
diff --git a/apps/web/src/routes/dashboards/$dashboardId.tsx b/apps/web/src/routes/dashboards/$dashboardId.tsx
index 2f166505..99b58ea7 100644
--- a/apps/web/src/routes/dashboards/$dashboardId.tsx
+++ b/apps/web/src/routes/dashboards/$dashboardId.tsx
@@ -19,6 +19,7 @@ import {
 import { PageRefreshProvider } from "@/components/time-range-picker/page-refresh-context"
 import type { WidgetMode } from "@/components/dashboard-builder/types"
 import { useDashboardStore } from "@/hooks/use-dashboard-store"
+import { useTimeRangeKeyboardControls } from "@/hooks/use-time-range-keyboard"
 import { DashboardHistoryPanel, PreviewedCanvas } from "@/components/dashboard-builder/history"
 import { historyPanelOpenAtom, previewedVersionAtom } from "@/atoms/dashboard-history-atoms"
 import { useDashboardVersions } from "@/components/dashboard-builder/history/use-dashboard-history"
@@ -39,9 +40,20 @@ export const Route = effectRoute(createFileRoute("/dashboards/$dashboardId"))({
 
 function DashboardRefreshBridge({ children }: { children: ReactNode }) {
 	const {
-		state: { timeRange },
+		state: { timeRange, resolvedTimeRange },
+		actions: { setTimeRange },
 	} = useDashboardTimeRange()
 	const timePreset = timeRange.type === "relative" ? timeRange.value : undefined
+
+	// Arrow-key pan/zoom over the resolved absolute window. Drag-to-zoom writes
+	// the range the same way (absolute), so this round-trips identically.
+	useTimeRangeKeyboardControls({
+		start: resolvedTimeRange?.startTime ?? "",
+		end: resolvedTimeRange?.endTime ?? "",
+		enabled: resolvedTimeRange != null,
+		onChange: ({ startTime, endTime }) => setTimeRange({ type: "absolute", startTime, endTime }),
+	})
+
 	return <PageRefreshProvider timePreset={timePreset}>{children}</PageRefreshProvider>
 }
 
diff --git a/apps/web/src/routes/index.tsx b/apps/web/src/routes/index.tsx
index ba7122d2..f4f4e855 100644
--- a/apps/web/src/routes/index.tsx
+++ b/apps/web/src/routes/index.tsx
@@ -1,4 +1,4 @@
-import { useMemo } from "react"
+import { useCallback, useMemo } from "react"
 import { useNavigate, createFileRoute } from "@tanstack/react-router"
 import { effectRoute } from "@effect-router/core"
 import { Result, useAtomValue, useAtomSet } from "@/lib/effect-atom"
@@ -31,6 +31,8 @@ import type { CustomChartTimeSeriesResponse } from "@/api/warehouse/custom-chart
 import type { ServiceDetailTimeSeriesPoint, ServicesFacetsResponse } from "@/api/warehouse/services"
 import { disabledResultAtom } from "@/lib/services/atoms/disabled-result-atom"
 import { applyTimeRangeSearch } from "@/components/time-range-picker/search"
+import { useTimeRangeKeyboardControls } from "@/hooks/use-time-range-keyboard"
+import { zoomRangeToWarehouse } from "@/lib/time-utils"
 import { isClerkAuthEnabled } from "@/lib/services/common/auth-mode"
 
 const dashboardSearchSchema = Schema.Struct({
@@ -172,6 +174,30 @@ function DashboardContent({
 		})
 	}
 
+	// Drag-to-zoom: a chart hands back the bucket timestamps (ISO) at each end of
+	// the dragged window; narrow the page time range to that absolute window, in
+	// the warehouse format the custom-range picker uses so the round-trip matches.
+	const handleChartZoom = useCallback(
+		(range: { startBucket: string; endBucket: string }) => {
+			const resolved = zoomRangeToWarehouse(range)
+			if (resolved) {
+				navigate({
+					search: (prev: Record<string, unknown>) => applyTimeRangeSearch(prev, resolved),
+				})
+			}
+		},
+		[navigate],
+	)
+
+	// Arrow-key pan/zoom over the resolved absolute window (Left/Right pan,
+	// Up/Down zoom, Shift/Ctrl modifiers). Writes an absolute range with
+	// `replace` so rapid presses don't stack history entries.
+	useTimeRangeKeyboardControls({
+		start: effectiveStartTime,
+		end: effectiveEndTime,
+		onChange: ({ startTime, endTime }) => handleTimeChange({ startTime, endTime }, { replace: true }),
+	})
+
 	const handleEnvironmentChange = (value: string | null) => {
 		navigate({
 			search: (prev: Record<string, unknown>) => ({
@@ -329,8 +355,9 @@ function DashboardContent({
 						</span>
 					</>
 				) : undefined,
+			onZoomSelect: handleChartZoom,
 		}))
-	}, [overviewPoints, logPoints, isOverviewLoading, isLogVolumeLoading])
+	}, [overviewPoints, logPoints, isOverviewLoading, isLogVolumeLoading, handleChartZoom])
 
 	const environmentItems = useMemo(
 		() => [
diff --git a/apps/web/src/routes/services/$serviceName.tsx b/apps/web/src/routes/services/$serviceName.tsx
index c4abbb9e..3d052ec6 100644
--- a/apps/web/src/routes/services/$serviceName.tsx
+++ b/apps/web/src/routes/services/$serviceName.tsx
@@ -6,6 +6,7 @@ import { Schema } from "effect"
 
 import { DashboardLayout } from "@/components/layout/dashboard-layout"
 import { useEffectiveTimeRange } from "@/hooks/use-effective-time-range"
+import { useTimeRangeKeyboardControls } from "@/hooks/use-time-range-keyboard"
 import { useRetainedRefreshableResultValue } from "@/hooks/use-retained-refreshable-result-value"
 import { MetricsGrid } from "@/components/dashboard/metrics-grid"
 import type {
@@ -21,6 +22,7 @@ import {
 import { detectReleaseMarkers } from "@/lib/services/release-markers"
 import { CommitShaHoverCard } from "@/components/vcs/commit-sha-hover-card"
 import { applyTimeRangeSearch } from "@/components/time-range-picker/search"
+import { zoomRangeToWarehouse } from "@/lib/time-utils"
 import { PageRefreshProvider } from "@/components/time-range-picker/page-refresh-context"
 import { TimeRangeHeaderControls } from "@/components/time-range-picker/time-range-header-controls"
 import { Button } from "@maple/ui/components/ui/button"
@@ -126,6 +128,31 @@ function ServiceDetailContent() {
 		})
 	}
 
+	// Drag-to-zoom: charts hand back the bucket timestamps (ISO) at each end of the
+	// dragged window; narrow the page time range to that absolute window. Convert to
+	// the warehouse format the custom-range picker uses so the round-trip is identical.
+	const handleChartZoom = useCallback(
+		(range: { startBucket: string; endBucket: string }) => {
+			const resolved = zoomRangeToWarehouse(range)
+			if (resolved) {
+				navigate({
+					search: (prev: Record<string, unknown>) => applyTimeRangeSearch(prev, resolved),
+				})
+			}
+		},
+		[navigate],
+	)
+
+	// Arrow-key pan/zoom over the resolved absolute window. Writes an absolute
+	// range (replace, so rapid presses don't stack history entries); only active
+	// on the Overview tab where the charts live.
+	useTimeRangeKeyboardControls({
+		start: effectiveStartTime,
+		end: effectiveEndTime,
+		enabled: (search.tab ?? "overview") === "overview",
+		onChange: ({ startTime, endTime }) => handleTimeChange({ startTime, endTime }, { replace: true }),
+	})
+
 	const activeTab: ServiceDetailTabValue = search.tab ?? "overview"
 	const handleTabChange = (value: unknown) => {
 		const next = value === "dependencies" ? "dependencies" : "overview"
@@ -188,7 +215,7 @@ function ServiceDetailContent() {
 						<TimeRangeHeaderControls
 							startTime={search.startTime}
 							endTime={search.endTime}
-							presetValue={search.timePreset ?? "12h"}
+							presetValue={search.timePreset}
 							onTimeChange={handleTimeChange}
 						/>
 						<Button
@@ -209,6 +236,7 @@ function ServiceDetailContent() {
 					effectiveStartTime={effectiveStartTime}
 					effectiveEndTime={effectiveEndTime}
 					environments={search.environments}
+					onZoomSelect={handleChartZoom}
 				/>
 			) : (
 				<ServiceDependenciesTab
@@ -229,9 +257,16 @@ interface OverviewTabProps {
 	effectiveStartTime: string
 	effectiveEndTime: string
 	environments?: string[]
+	onZoomSelect?: (range: { startBucket: string; endBucket: string }) => void
 }
 
-function OverviewTab({ serviceName, effectiveStartTime, effectiveEndTime, environments }: OverviewTabProps) {
+function OverviewTab({
+	serviceName,
+	effectiveStartTime,
+	effectiveEndTime,
+	environments,
+	onZoomSelect,
+}: OverviewTabProps) {
 	const detailResult = useRetainedRefreshableResultValue(
 		getCustomChartServiceDetailResultAtom({
 			data: {
@@ -317,6 +352,7 @@ function OverviewTab({ serviceName, effectiveStartTime, effectiveEndTime, enviro
 		rateMode: chart.rateMode,
 		referenceLines: releaseMarkers,
 		renderReferenceMarker,
+		onZoomSelect,
 		isLoading: isDetailLoading,
 	}))
 
diff --git a/packages/ui/src/components/charts/_shared/chart-types.ts b/packages/ui/src/components/charts/_shared/chart-types.ts
index c7c57e60..7f4c5225 100644
--- a/packages/ui/src/components/charts/_shared/chart-types.ts
+++ b/packages/ui/src/components/charts/_shared/chart-types.ts
@@ -46,6 +46,11 @@ export interface BaseChartProps {
 	 */
 	thresholds?: ChartThreshold[]
 	unit?: string
+	/**
+	 * IANA timezone for all x-axis time labels/tooltips (and the deploy-marker
+	 * time in the tooltip). Defaults to the browser zone when omitted.
+	 */
+	timeZone?: string
 	logScale?: boolean
 	softMin?: number
 	softMax?: number
@@ -62,6 +67,13 @@ export interface BaseChartProps {
 	 * tooltip cursor lines up to the same time bucket on hover.
 	 */
 	syncId?: string
+	/**
+	 * Enables "drag to zoom" on time-series charts: the user drags across the
+	 * plot to select a window, and on release this fires with the bucket
+	 * timestamps (the chart's `bucket` x-values) at each end, ordered ascending.
+	 * The host converts these to a time range. When omitted, drag-zoom is off.
+	 */
+	onZoomSelect?: (range: { startBucket: string; endBucket: string }) => void
 	pie?: {
 		donut?: boolean
 		innerRadius?: number
diff --git a/packages/ui/src/components/charts/_shared/use-drag-zoom.ts b/packages/ui/src/components/charts/_shared/use-drag-zoom.ts
new file mode 100644
index 00000000..480acccc
--- /dev/null
+++ b/packages/ui/src/components/charts/_shared/use-drag-zoom.ts
@@ -0,0 +1,170 @@
+import * as React from "react"
+
+import { cn } from "../../../lib/utils"
+
+/** Minimal shape of the Recharts categorical-chart mouse-event state we read. */
+interface RechartsMouseState {
+	activeLabel?: string | number
+}
+
+/** Props for the selection `<ReferenceArea>`, spread by the caller when set. */
+export interface DragZoomOverlayProps {
+	x1: string
+	x2: string
+	strokeOpacity: number
+	fill: string
+	fillOpacity: number
+	isAnimationActive: boolean
+}
+
+const OVERLAY_STYLE = {
+	strokeOpacity: 0.3,
+	fill: "var(--foreground)",
+	fillOpacity: 0.08,
+	isAnimationActive: false,
+} as const
+
+/** Recharts passes the native-ish mouse event as the second handler argument. */
+interface MouseLikeEvent {
+	clientX?: number
+}
+
+/**
+ * Minimum horizontal travel (px) between mousedown and mouseup before a gesture
+ * counts as a drag rather than a click. Below this, a plain click — or tiny
+ * cursor jitter — must never trigger a zoom.
+ */
+const DRAG_THRESHOLD_PX = 6
+
+const readClientX = (event: MouseLikeEvent | undefined): number | null =>
+	typeof event?.clientX === "number" ? event.clientX : null
+
+export interface ChartDragZoom {
+	/** Whether drag-zoom is wired up (an `onZoomSelect` handler was provided). */
+	enabled: boolean
+	/** True while the user is actively dragging out a selection past the threshold. */
+	isSelecting: boolean
+	/**
+	 * Classes for the chart container (an ancestor of `.recharts-surface`):
+	 * crosshair cursor while enabled, and text-selection suppression mid-drag.
+	 * Centralizes the magic class strings that were copy-pasted per chart.
+	 */
+	containerClassName: string
+	/**
+	 * Props for the selection `<ReferenceArea>`, or `null` when not dragging.
+	 * Render as `{dragZoom.overlayProps && <ReferenceArea {...dragZoom.overlayProps} />}`.
+	 * (Recharts must see `ReferenceArea` as a direct child, so the element itself
+	 * can't be hidden behind a wrapper component — only its props are shared.)
+	 */
+	overlayProps: DragZoomOverlayProps | null
+	/** Spread onto the Recharts chart element to capture the drag gesture. */
+	chartHandlers: {
+		onMouseDown?: (state: RechartsMouseState | undefined, event?: MouseLikeEvent) => void
+		onMouseMove?: (state: RechartsMouseState | undefined, event?: MouseLikeEvent) => void
+		onMouseUp?: (state: RechartsMouseState | undefined, event?: MouseLikeEvent) => void
+		onMouseLeave?: (state: RechartsMouseState | undefined, event?: MouseLikeEvent) => void
+	}
+}
+
+/**
+ * Drag-to-zoom gesture for Recharts time-series charts.
+ *
+ * Tracks the bucket category under the cursor between mousedown and mouseup,
+ * exposes the in-progress selection so the caller can render a `ReferenceArea`,
+ * and on release invokes `onZoomSelect` with the two endpoints ordered
+ * ascending. The click/drag decision is made purely from how far the pointer
+ * travelled (`clientX` at mousedown vs mouseup), so a click never zooms —
+ * regardless of where bucket boundaries fall.
+ */
+export function useChartDragZoom(
+	onZoomSelect?: (range: { startBucket: string; endBucket: string }) => void,
+): ChartDragZoom {
+	const enabled = typeof onZoomSelect === "function"
+	const [refAreaLeft, setRefAreaLeft] = React.useState<string | null>(null)
+	const [refAreaRight, setRefAreaRight] = React.useState<string | null>(null)
+	// True once the pointer has travelled past the click/drag threshold; drives
+	// the selection overlay. Pixel origin is a ref so it never forces a re-render.
+	const [isDragging, setIsDragging] = React.useState(false)
+	const downXRef = React.useRef<number | null>(null)
+
+	const reset = React.useCallback(() => {
+		setRefAreaLeft(null)
+		setRefAreaRight(null)
+		setIsDragging(false)
+		downXRef.current = null
+	}, [])
+
+	const onMouseDown = React.useCallback(
+		(state: RechartsMouseState | undefined, event?: MouseLikeEvent) => {
+			if (!enabled || state?.activeLabel == null) return
+			const label = String(state.activeLabel)
+			downXRef.current = readClientX(event)
+			setIsDragging(false)
+			setRefAreaLeft(label)
+			setRefAreaRight(label)
+		},
+		[enabled],
+	)
+
+	const onMouseMove = React.useCallback(
+		(state: RechartsMouseState | undefined, event?: MouseLikeEvent) => {
+			if (!enabled || state?.activeLabel == null || downXRef.current == null) return
+			setRefAreaRight((prev) => (prev === null ? prev : String(state.activeLabel)))
+			const x = readClientX(event)
+			if (x != null && Math.abs(x - downXRef.current) >= DRAG_THRESHOLD_PX) {
+				setIsDragging(true)
+			}
+		},
+		[enabled],
+	)
+
+	const commit = React.useCallback(
+		(event?: MouseLikeEvent) => {
+			if (!enabled) {
+				reset()
+				return
+			}
+			const upX = readClientX(event)
+			const travelled =
+				downXRef.current != null && upX != null
+					? Math.abs(upX - downXRef.current) >= DRAG_THRESHOLD_PX
+					: isDragging
+			if (travelled && refAreaLeft !== null && refAreaRight !== null && refAreaLeft !== refAreaRight) {
+				const leftMs = Date.parse(refAreaLeft)
+				const rightMs = Date.parse(refAreaRight)
+				const [startBucket, endBucket] =
+					Number.isNaN(leftMs) || Number.isNaN(rightMs) || leftMs <= rightMs
+						? [refAreaLeft, refAreaRight]
+						: [refAreaRight, refAreaLeft]
+				onZoomSelect?.({ startBucket, endBucket })
+			}
+			reset()
+		},
+		[enabled, isDragging, refAreaLeft, refAreaRight, onZoomSelect, reset],
+	)
+
+	const onMouseUp = React.useCallback(
+		(_state: RechartsMouseState | undefined, event?: MouseLikeEvent) => commit(event),
+		[commit],
+	)
+	const onMouseLeave = React.useCallback(
+		(_state: RechartsMouseState | undefined, event?: MouseLikeEvent) => commit(event),
+		[commit],
+	)
+
+	return {
+		enabled,
+		isSelecting: isDragging,
+		containerClassName: cn(
+			enabled && "[&_.recharts-surface]:cursor-crosshair",
+			isDragging && "select-none",
+		),
+		// Only surface the selection overlay once it's a real drag, so a click
+		// doesn't flash a zero-width marker.
+		overlayProps:
+			isDragging && refAreaLeft !== null && refAreaRight !== null
+				? { x1: refAreaLeft, x2: refAreaRight, ...OVERLAY_STYLE }
+				: null,
+		chartHandlers: enabled ? { onMouseDown, onMouseMove, onMouseUp, onMouseLeave } : {},
+	}
+}
diff --git a/packages/ui/src/components/charts/area/apdex-area-chart.tsx b/packages/ui/src/components/charts/area/apdex-area-chart.tsx
index a787422c..b35ce520 100644
--- a/packages/ui/src/components/charts/area/apdex-area-chart.tsx
+++ b/packages/ui/src/components/charts/area/apdex-area-chart.tsx
@@ -1,7 +1,9 @@
 import { useId, useMemo } from "react"
-import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts"
+import { Area, AreaChart, CartesianGrid, ReferenceArea, XAxis, YAxis } from "recharts"
 
+import { cn } from "../../../lib/utils"
 import type { BaseChartProps } from "../_shared/chart-types"
+import { useChartDragZoom } from "../_shared/use-drag-zoom"
 import { renderReferenceLines } from "../_shared/reference-markers"
 import { apdexTimeSeriesData } from "../_shared/sample-data"
 import { VerticalGradient } from "../_shared/svg-patterns"
@@ -30,7 +32,10 @@ export function ApdexAreaChart({
 	referenceLines,
 	renderReferenceMarker,
 	syncId,
+	onZoomSelect,
+	timeZone,
 }: BaseChartProps) {
+	const dragZoom = useChartDragZoom(onZoomSelect)
 	const id = useId()
 	const gradientId = `apdexGradient-${id.replace(/:/g, "")}`
 	const fadedGradientId = `apdexGradientFaded-${id.replace(/:/g, "")}`
@@ -56,8 +61,14 @@ export function ApdexAreaChart({
 	)
 
 	return (
-		<ChartContainer config={chartConfig} className={className}>
-			<AreaChart data={processedData} accessibilityLayer syncId={syncId} syncMethod="value">
+		<ChartContainer config={chartConfig} className={cn(className, dragZoom.containerClassName)}>
+			<AreaChart
+				data={processedData}
+				accessibilityLayer
+				syncId={syncId}
+				syncMethod="value"
+				{...dragZoom.chartHandlers}
+			>
 				<defs>
 					<VerticalGradient id={gradientId} color="var(--color-apdexScore)" />
 					{hasIncomplete && (
@@ -76,7 +87,7 @@ export function ApdexAreaChart({
 					tickLine={false}
 					axisLine={false}
 					tickMargin={8}
-					tickFormatter={(v) => formatBucketLabel(v, axisContext, "tick")}
+					tickFormatter={(v) => formatBucketLabel(v, axisContext, "tick", timeZone)}
 				/>
 				<YAxis domain={[0, 1]} tickLine={false} axisLine={false} tickMargin={8} width={50} />
 				{tooltip !== "hidden" && (
@@ -89,7 +100,7 @@ export function ApdexAreaChart({
 									const release = referenceLines?.find((rl) => rl.x === bucket)
 									return (
 										<span>
-											{formatBucketLabel(bucket, axisContext, "tooltip")}
+											{formatBucketLabel(bucket, axisContext, "tooltip", timeZone)}
 											{release?.label && (
 												<span className="ml-2 text-muted-foreground">
 													Deploy: {release.label}
@@ -145,6 +156,7 @@ export function ApdexAreaChart({
 						isAnimationActive={false}
 					/>
 				)}
+				{dragZoom.overlayProps && <ReferenceArea {...dragZoom.overlayProps} />}
 			</AreaChart>
 		</ChartContainer>
 	)
diff --git a/packages/ui/src/components/charts/area/error-rate-area-chart.tsx b/packages/ui/src/components/charts/area/error-rate-area-chart.tsx
index 96ded196..85b79b57 100644
--- a/packages/ui/src/components/charts/area/error-rate-area-chart.tsx
+++ b/packages/ui/src/components/charts/area/error-rate-area-chart.tsx
@@ -1,7 +1,9 @@
 import { useId, useMemo } from "react"
-import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts"
+import { Area, AreaChart, CartesianGrid, ReferenceArea, XAxis, YAxis } from "recharts"
 
+import { cn } from "../../../lib/utils"
 import type { BaseChartProps } from "../_shared/chart-types"
+import { useChartDragZoom } from "../_shared/use-drag-zoom"
 import { renderReferenceLines } from "../_shared/reference-markers"
 import { errorRateTimeSeriesData } from "../_shared/sample-data"
 import { VerticalGradient } from "../_shared/svg-patterns"
@@ -30,7 +32,10 @@ export function ErrorRateAreaChart({
 	referenceLines,
 	renderReferenceMarker,
 	syncId,
+	onZoomSelect,
+	timeZone,
 }: BaseChartProps) {
+	const dragZoom = useChartDragZoom(onZoomSelect)
 	const id = useId()
 	const gradientId = `errorRateGradient-${id.replace(/:/g, "")}`
 	const fadedGradientId = `errorRateGradientFaded-${id.replace(/:/g, "")}`
@@ -56,8 +61,14 @@ export function ErrorRateAreaChart({
 	)
 
 	return (
-		<ChartContainer config={chartConfig} className={className}>
-			<AreaChart data={processedData} accessibilityLayer syncId={syncId} syncMethod="value">
+		<ChartContainer config={chartConfig} className={cn(className, dragZoom.containerClassName)}>
+			<AreaChart
+				data={processedData}
+				accessibilityLayer
+				syncId={syncId}
+				syncMethod="value"
+				{...dragZoom.chartHandlers}
+			>
 				<defs>
 					<VerticalGradient id={gradientId} color="var(--color-errorRate)" />
 					{hasIncomplete && (
@@ -76,7 +87,7 @@ export function ErrorRateAreaChart({
 					tickLine={false}
 					axisLine={false}
 					tickMargin={8}
-					tickFormatter={(v) => formatBucketLabel(v, axisContext, "tick")}
+					tickFormatter={(v) => formatBucketLabel(v, axisContext, "tick", timeZone)}
 				/>
 				<YAxis
 					tickLine={false}
@@ -96,7 +107,7 @@ export function ErrorRateAreaChart({
 									const release = referenceLines?.find((rl) => rl.x === bucket)
 									return (
 										<span>
-											{formatBucketLabel(bucket, axisContext, "tooltip")}
+											{formatBucketLabel(bucket, axisContext, "tooltip", timeZone)}
 											{release?.label && (
 												<span className="ml-2 text-muted-foreground">
 													Deploy: {release.label}
@@ -152,6 +163,7 @@ export function ErrorRateAreaChart({
 						isAnimationActive={false}
 					/>
 				)}
+				{dragZoom.overlayProps && <ReferenceArea {...dragZoom.overlayProps} />}
 			</AreaChart>
 		</ChartContainer>
 	)
diff --git a/packages/ui/src/components/charts/area/query-builder-area-chart.tsx b/packages/ui/src/components/charts/area/query-builder-area-chart.tsx
index e4023956..8142f33f 100644
--- a/packages/ui/src/components/charts/area/query-builder-area-chart.tsx
+++ b/packages/ui/src/components/charts/area/query-builder-area-chart.tsx
@@ -1,10 +1,11 @@
 import * as React from "react"
-import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts"
+import { Area, AreaChart, CartesianGrid, ReferenceArea, XAxis, YAxis } from "recharts"
 
 import { cn } from "../../../lib/utils"
 import { useContainerSize } from "../../../hooks/use-container-size"
 import { resolveSeriesColor } from "../../../lib/semantic-series-colors"
 import type { BaseChartProps } from "../_shared/chart-types"
+import { useChartDragZoom } from "../_shared/use-drag-zoom"
 import {
 	type LegendSeries,
 	QueryBuilderLegend,
@@ -61,7 +62,10 @@ export function QueryBuilderAreaChart({
 	fitYAxisToData,
 	syncId,
 	thresholds,
+	onZoomSelect,
+	timeZone,
 }: BaseChartProps) {
+	const dragZoom = useChartDragZoom(onZoomSelect)
 	const { chartData, seriesDefinitions } = React.useMemo(() => {
 		const source = Array.isArray(data) && data.length > 0 ? data : fallbackData
 		const rawSeriesKeys: string[] = []
@@ -220,8 +224,17 @@ export function QueryBuilderAreaChart({
 
 	return (
 		<div ref={containerRef} className={cn("h-full w-full", className)}>
-			<ChartContainer config={chartConfig} className="h-full w-full aspect-auto">
-				<AreaChart data={processedData} accessibilityLayer syncId={syncId} syncMethod="value">
+			<ChartContainer
+				config={chartConfig}
+				className={cn("h-full w-full aspect-auto", dragZoom.containerClassName)}
+			>
+				<AreaChart
+					data={processedData}
+					accessibilityLayer
+					syncId={syncId}
+					syncMethod="value"
+					{...dragZoom.chartHandlers}
+				>
 					<defs>
 						{seriesDefinitions.map((definition) => (
 							<linearGradient
@@ -273,7 +286,7 @@ export function QueryBuilderAreaChart({
 						tickLine={false}
 						axisLine={false}
 						tickMargin={8}
-						tickFormatter={(value) => formatBucketLabel(value, axisContext, "tick")}
+						tickFormatter={(value) => formatBucketLabel(value, axisContext, "tick", timeZone)}
 					/>
 					<YAxis
 						tickLine={false}
@@ -299,6 +312,7 @@ export function QueryBuilderAreaChart({
 											payload[0].payload.bucket,
 											axisContext,
 											"tooltip",
+											timeZone,
 										)
 									}}
 									formatter={(value, name, item) => {
@@ -413,6 +427,7 @@ export function QueryBuilderAreaChart({
 								isAnimationActive={false}
 							/>
 						))}
+					{dragZoom.overlayProps && <ReferenceArea {...dragZoom.overlayProps} />}
 				</AreaChart>
 			</ChartContainer>
 		</div>
diff --git a/packages/ui/src/components/charts/area/throughput-area-chart.tsx b/packages/ui/src/components/charts/area/throughput-area-chart.tsx
index ffa7b8e1..f8dbc444 100644
--- a/packages/ui/src/components/charts/area/throughput-area-chart.tsx
+++ b/packages/ui/src/components/charts/area/throughput-area-chart.tsx
@@ -1,7 +1,9 @@
 import { useMemo, useId } from "react"
-import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts"
+import { Area, AreaChart, CartesianGrid, ReferenceArea, XAxis, YAxis } from "recharts"
 
+import { cn } from "../../../lib/utils"
 import type { BaseChartProps } from "../_shared/chart-types"
+import { useChartDragZoom } from "../_shared/use-drag-zoom"
 import { renderReferenceLines } from "../_shared/reference-markers"
 import { throughputTimeSeriesData } from "../_shared/sample-data"
 import { VerticalGradient } from "../_shared/svg-patterns"
@@ -33,7 +35,10 @@ export function ThroughputAreaChart({
 	referenceLines,
 	renderReferenceMarker,
 	syncId,
+	onZoomSelect,
+	timeZone,
 }: BaseChartProps) {
+	const dragZoom = useChartDragZoom(onZoomSelect)
 	const id = useId()
 	const gradientId = `throughputGradient-${id.replace(/:/g, "")}`
 	const fadedGradientId = `throughputGradientFaded-${id.replace(/:/g, "")}`
@@ -126,8 +131,14 @@ export function ThroughputAreaChart({
 	}, [rateLabel, incompleteKeys, hasSamplingData, hasErrorData, hasIncomplete])
 
 	return (
-		<ChartContainer config={chartConfig} className={className}>
-			<AreaChart data={displayData} accessibilityLayer syncId={syncId} syncMethod="value">
+		<ChartContainer config={chartConfig} className={cn(className, dragZoom.containerClassName)}>
+			<AreaChart
+				data={displayData}
+				accessibilityLayer
+				syncId={syncId}
+				syncMethod="value"
+				{...dragZoom.chartHandlers}
+			>
 				<defs>
 					<VerticalGradient id={gradientId} color="var(--color-throughput)" />
 					{hasIncomplete && (
@@ -146,7 +157,7 @@ export function ThroughputAreaChart({
 					tickLine={false}
 					axisLine={false}
 					tickMargin={8}
-					tickFormatter={(v) => formatBucketLabel(v, axisContext, "tick")}
+					tickFormatter={(v) => formatBucketLabel(v, axisContext, "tick", timeZone)}
 				/>
 				<YAxis
 					tickLine={false}
@@ -165,7 +176,7 @@ export function ThroughputAreaChart({
 									const release = referenceLines?.find((rl) => rl.x === bucket)
 									return (
 										<span>
-											{formatBucketLabel(bucket, axisContext, "tooltip")}
+											{formatBucketLabel(bucket, axisContext, "tooltip", timeZone)}
 											{release?.label && (
 												<span className="ml-2 text-muted-foreground">
 													Deploy: {release.label}
@@ -304,6 +315,7 @@ export function ThroughputAreaChart({
 						isAnimationActive={false}
 					/>
 				)}
+				{dragZoom.overlayProps && <ReferenceArea {...dragZoom.overlayProps} />}
 			</AreaChart>
 		</ChartContainer>
 	)
diff --git a/packages/ui/src/components/charts/bar/query-builder-bar-chart.tsx b/packages/ui/src/components/charts/bar/query-builder-bar-chart.tsx
index 67343ffc..70c18656 100644
--- a/packages/ui/src/components/charts/bar/query-builder-bar-chart.tsx
+++ b/packages/ui/src/components/charts/bar/query-builder-bar-chart.tsx
@@ -1,10 +1,11 @@
 import * as React from "react"
-import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts"
+import { Bar, BarChart, CartesianGrid, ReferenceArea, XAxis, YAxis } from "recharts"
 
 import { cn } from "../../../lib/utils"
 import { useContainerSize } from "../../../hooks/use-container-size"
 import { resolveSeriesColor } from "../../../lib/semantic-series-colors"
 import type { BaseChartProps } from "../_shared/chart-types"
+import { useChartDragZoom } from "../_shared/use-drag-zoom"
 import {
 	type LegendSeries,
 	QueryBuilderLegend,
@@ -52,7 +53,10 @@ export function QueryBuilderBarChart({
 	softMax,
 	syncId,
 	thresholds,
+	onZoomSelect,
+	timeZone,
 }: BaseChartProps) {
+	const dragZoom = useChartDragZoom(onZoomSelect)
 	const { chartData, seriesDefinitions } = React.useMemo(() => {
 		const source = Array.isArray(data) && data.length > 0 ? data : fallbackData
 		const rawSeriesKeys: string[] = []
@@ -186,15 +190,24 @@ export function QueryBuilderBarChart({
 
 	return (
 		<div ref={containerRef} className={cn("h-full w-full", className)}>
-			<ChartContainer config={chartConfig} className="h-full w-full aspect-auto">
-				<BarChart data={displayData} accessibilityLayer syncId={syncId} syncMethod="value">
+			<ChartContainer
+				config={chartConfig}
+				className={cn("h-full w-full aspect-auto", dragZoom.containerClassName)}
+			>
+				<BarChart
+					data={displayData}
+					accessibilityLayer
+					syncId={syncId}
+					syncMethod="value"
+					{...dragZoom.chartHandlers}
+				>
 					<CartesianGrid vertical={false} />
 					<XAxis
 						dataKey="bucket"
 						tickLine={false}
 						axisLine={false}
 						tickMargin={8}
-						tickFormatter={(value) => formatBucketLabel(value, axisContext, "tick")}
+						tickFormatter={(value) => formatBucketLabel(value, axisContext, "tick", timeZone)}
 					/>
 					<YAxis
 						tickLine={false}
@@ -217,6 +230,7 @@ export function QueryBuilderBarChart({
 											payload[0].payload.bucket,
 											axisContext,
 											"tooltip",
+											timeZone,
 										)
 									}}
 									formatter={(value, name, item) => {
@@ -291,6 +305,7 @@ export function QueryBuilderBarChart({
 							{...(stacked ? { stackId: "a" } : {})}
 						/>
 					))}
+					{dragZoom.overlayProps && <ReferenceArea {...dragZoom.overlayProps} />}
 				</BarChart>
 			</ChartContainer>
 		</div>
diff --git a/packages/ui/src/components/charts/line/latency-line-chart.tsx b/packages/ui/src/components/charts/line/latency-line-chart.tsx
index 434ccfeb..628b8b79 100644
--- a/packages/ui/src/components/charts/line/latency-line-chart.tsx
+++ b/packages/ui/src/components/charts/line/latency-line-chart.tsx
@@ -1,7 +1,9 @@
 import { useMemo } from "react"
-import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts"
+import { CartesianGrid, Line, LineChart, ReferenceArea, XAxis, YAxis } from "recharts"
 
+import { cn } from "../../../lib/utils"
 import type { BaseChartProps } from "../_shared/chart-types"
+import { useChartDragZoom } from "../_shared/use-drag-zoom"
 import { renderReferenceLines } from "../_shared/reference-markers"
 import { latencyTimeSeriesData } from "../_shared/sample-data"
 import { useIncompleteSegments, extendConfigWithIncomplete } from "../_shared/use-incomplete-segments"
@@ -31,8 +33,11 @@ export function LatencyLineChart({
 	referenceLines,
 	renderReferenceMarker,
 	syncId,
+	onZoomSelect,
+	timeZone,
 }: BaseChartProps) {
 	const chartData = data ?? latencyTimeSeriesData
+	const dragZoom = useChartDragZoom(onZoomSelect)
 
 	const {
 		data: processedData,
@@ -54,8 +59,14 @@ export function LatencyLineChart({
 	)
 
 	return (
-		<ChartContainer config={chartConfig} className={className}>
-			<LineChart data={processedData} accessibilityLayer syncId={syncId} syncMethod="value">
+		<ChartContainer config={chartConfig} className={cn(className, dragZoom.containerClassName)}>
+			<LineChart
+				data={processedData}
+				accessibilityLayer
+				syncId={syncId}
+				syncMethod="value"
+				{...dragZoom.chartHandlers}
+			>
 				<CartesianGrid vertical={false} />
 				{renderReferenceLines(referenceLines, renderReferenceMarker)}
 				<XAxis
@@ -63,7 +74,7 @@ export function LatencyLineChart({
 					tickLine={false}
 					axisLine={false}
 					tickMargin={8}
-					tickFormatter={(v) => formatBucketLabel(v, axisContext, "tick")}
+					tickFormatter={(v) => formatBucketLabel(v, axisContext, "tick", timeZone)}
 				/>
 				<YAxis
 					tickLine={false}
@@ -82,7 +93,7 @@ export function LatencyLineChart({
 									const release = referenceLines?.find((rl) => rl.x === bucket)
 									return (
 										<span>
-											{formatBucketLabel(bucket, axisContext, "tooltip")}
+											{formatBucketLabel(bucket, axisContext, "tooltip", timeZone)}
 											{release?.label && (
 												<span className="ml-2 text-muted-foreground">
 													Deploy: {release.label}
@@ -183,6 +194,7 @@ export function LatencyLineChart({
 						isAnimationActive={false}
 					/>
 				)}
+				{dragZoom.overlayProps && <ReferenceArea {...dragZoom.overlayProps} />}
 			</LineChart>
 		</ChartContainer>
 	)
diff --git a/packages/ui/src/components/charts/line/query-builder-line-chart.tsx b/packages/ui/src/components/charts/line/query-builder-line-chart.tsx
index 99483e65..4a007b3c 100644
--- a/packages/ui/src/components/charts/line/query-builder-line-chart.tsx
+++ b/packages/ui/src/components/charts/line/query-builder-line-chart.tsx
@@ -1,10 +1,11 @@
 import * as React from "react"
-import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts"
+import { CartesianGrid, Line, LineChart, ReferenceArea, XAxis, YAxis } from "recharts"
 
 import { cn } from "../../../lib/utils"
 import { useContainerSize } from "../../../hooks/use-container-size"
 import { resolveSeriesColor } from "../../../lib/semantic-series-colors"
 import type { BaseChartProps } from "../_shared/chart-types"
+import { useChartDragZoom } from "../_shared/use-drag-zoom"
 import {
 	type LegendSeries,
 	QueryBuilderLegend,
@@ -65,7 +66,10 @@ export function QueryBuilderLineChart({
 	showPoints,
 	syncId,
 	thresholds,
+	onZoomSelect,
+	timeZone,
 }: BaseChartProps) {
+	const dragZoom = useChartDragZoom(onZoomSelect)
 	const { chartData, seriesDefinitions } = React.useMemo(() => {
 		const source = Array.isArray(data) && data.length > 0 ? data : fallbackData
 		const rawSeriesKeys: string[] = []
@@ -229,15 +233,24 @@ export function QueryBuilderLineChart({
 
 	return (
 		<div ref={containerRef} className={cn("h-full w-full", className)}>
-			<ChartContainer config={chartConfig} className="h-full w-full aspect-auto">
-				<LineChart data={processedData} accessibilityLayer syncId={syncId} syncMethod="value">
+			<ChartContainer
+				config={chartConfig}
+				className={cn("h-full w-full aspect-auto", dragZoom.containerClassName)}
+			>
+				<LineChart
+					data={processedData}
+					accessibilityLayer
+					syncId={syncId}
+					syncMethod="value"
+					{...dragZoom.chartHandlers}
+				>
 					<CartesianGrid vertical={false} />
 					<XAxis
 						dataKey="bucket"
 						tickLine={false}
 						axisLine={false}
 						tickMargin={8}
-						tickFormatter={(value) => formatBucketLabel(value, axisContext, "tick")}
+						tickFormatter={(value) => formatBucketLabel(value, axisContext, "tick", timeZone)}
 					/>
 					<YAxis
 						tickLine={false}
@@ -260,7 +273,7 @@ export function QueryBuilderLineChart({
 									labelFormatter={(_, payload) => {
 										if (!payload?.[0]?.payload?.bucket) return ""
 										const bucket = payload[0].payload.bucket
-										return formatBucketLabel(bucket, axisContext, "tooltip")
+										return formatBucketLabel(bucket, axisContext, "tooltip", timeZone)
 									}}
 									formatter={(value, name, item) => {
 										const nameStr = String(name)
@@ -372,6 +385,7 @@ export function QueryBuilderLineChart({
 								isAnimationActive={false}
 							/>
 						))}
+					{dragZoom.overlayProps && <ReferenceArea {...dragZoom.overlayProps} />}
 				</LineChart>
 			</ChartContainer>
 		</div>
diff --git a/packages/ui/src/lib/format.ts b/packages/ui/src/lib/format.ts
index 11613053..a9a07ccf 100644
--- a/packages/ui/src/lib/format.ts
+++ b/packages/ui/src/lib/format.ts
@@ -121,6 +121,12 @@ export function formatBucketLabel(
 	value: unknown,
 	context: { rangeMs: number; bucketSeconds: number | undefined },
 	mode: "tick" | "tooltip",
+	/**
+	 * IANA timezone the label is projected into. When omitted (or `undefined`)
+	 * the browser's local zone is used — passing `timeZone: undefined` to Intl
+	 * already means "browser zone", so this is forwarded unconditionally.
+	 */
+	timeZone?: string,
 ): string {
 	if (typeof value !== "string") return ""
 
@@ -138,18 +144,20 @@ export function formatBucketLabel(
 			hour: "2-digit",
 			minute: "2-digit",
 			second: includeSeconds ? "2-digit" : undefined,
+			timeZone,
 		})
 	}
 
 	if (includeDate) {
 		if ((context.bucketSeconds ?? 0) >= 24 * 60 * 60) {
-			return date.toLocaleDateString(undefined, { month: "short", day: "numeric" })
+			return date.toLocaleDateString(undefined, { month: "short", day: "numeric", timeZone })
 		}
 		return date.toLocaleString(undefined, {
 			month: "short",
 			day: "numeric",
 			hour: "2-digit",
 			minute: "2-digit",
+			timeZone,
 		})
 	}
 
@@ -158,6 +166,7 @@ export function formatBucketLabel(
 			hour: "2-digit",
 			minute: "2-digit",
 			second: includeSeconds ? "2-digit" : undefined,
+			timeZone,
 		})
 		.replace(/^24:/, "00:")
 }