diff --git a/Cargo.lock b/Cargo.lock
index 15ae524..2e2c55e 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -465,9 +465,9 @@ dependencies = [
 
 [[package]]
 name = "borsh"
-version = "1.5.2"
+version = "1.5.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f5327f6c99920069d1fe374aa743be1af0031dea9f250852cdf1ae6a0861ee24"
+checksum = "2506947f73ad44e344215ccd6403ac2ae18cd8e046e581a441bf8d199f257f03"
 dependencies = [
  "borsh-derive",
  "cfg_aliases",
@@ -475,9 +475,9 @@ dependencies = [
 
 [[package]]
 name = "borsh-derive"
-version = "1.5.2"
+version = "1.5.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "10aedd8f1a81a8aafbfde924b0e3061cd6fedd6f6bbcfc6a76e6fd426d7bfe26"
+checksum = "c2593a3b8b938bd68373196c9832f516be11fa487ef4ae745eb282e6a56a7244"
 dependencies = [
  "once_cell",
  "proc-macro-crate",
@@ -579,7 +579,7 @@ dependencies = [
  "cached_proc_macro_types",
  "hashbrown 0.14.5",
  "once_cell",
- "thiserror",
+ "thiserror 1.0.69",
  "web-time",
 ]
 
@@ -609,9 +609,9 @@ checksum = "37b2a672a2cb129a2e41c10b1224bb368f9f37a2b16b612598138befd7b37eb5"
 
 [[package]]
 name = "cc"
-version = "1.1.37"
+version = "1.2.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "40545c26d092346d8a8dab71ee48e7685a7a9cba76e634790c215b41a4a7b4cf"
+checksum = "fd9de9f2205d5ef3fd67e685b0df337994ddd4495e2a28d185500d0e1edfea47"
 dependencies = [
  "jobserver",
  "libc",
@@ -664,9 +664,9 @@ dependencies = [
 
 [[package]]
 name = "comfy-table"
-version = "7.1.1"
+version = "7.1.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b34115915337defe99b2aff5c2ce6771e5fbc4079f4b506301f5cf394c8452f7"
+checksum = "24f165e7b643266ea80cb858aed492ad9280e3e05ce24d4a99d7d7b889b6a4d9"
 dependencies = [
  "strum 0.26.3",
  "strum_macros 0.26.4",
@@ -1032,9 +1032,9 @@ dependencies = [
 
 [[package]]
 name = "flate2"
-version = "1.0.34"
+version = "1.0.35"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a1b589b4dc103969ad3cf85c950899926ec64300a1a46d76c03a6072957036f0"
+checksum = "c936bfdafb507ebbf50b8074c54fa31c5be9a1e7e5f467dd659697041407d07c"
 dependencies = [
  "crc32fast",
  "miniz_oxide",
@@ -1179,8 +1179,10 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "c4567c8db10ae91089c99af84c68c38da3ec2f087c3f82960bcdbf3656b6f4d7"
 dependencies = [
  "cfg-if",
+ "js-sys",
  "libc",
  "wasi",
+ "wasm-bindgen",
 ]
 
 [[package]]
@@ -1777,9 +1779,9 @@ dependencies = [
 
 [[package]]
 name = "libc"
-version = "0.2.162"
+version = "0.2.164"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "18d287de67fe55fd7e1581fe933d965a5a9477b38e949cfa9f8574ef01506398"
+checksum = "433bfe06b8c75da9b2e3fbea6e5329ff87748f0b144ef75306e674c3f6f7c13f"
 
 [[package]]
 name = "libduckdb-sys"
@@ -2284,7 +2286,7 @@ dependencies = [
  "sse-codec",
  "sync_wrapper",
  "tempfile",
- "thiserror",
+ "thiserror 1.0.69",
  "time",
  "tokio",
  "tokio-stream",
@@ -2327,7 +2329,7 @@ dependencies = [
  "serde_json",
  "serde_urlencoded",
  "serde_yaml",
- "thiserror",
+ "thiserror 1.0.69",
  "time",
  "tokio",
 ]
@@ -2347,7 +2349,7 @@ dependencies = [
  "quote",
  "regex",
  "syn 2.0.87",
- "thiserror",
+ "thiserror 1.0.69",
 ]
 
 [[package]]
@@ -2446,9 +2448,9 @@ dependencies = [
 
 [[package]]
 name = "quinn"
-version = "0.11.5"
+version = "0.11.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8c7c5fdde3cdae7203427dc4f0a68fe0ed09833edc525a03456b153b79828684"
+checksum = "62e96808277ec6f97351a2380e6c25114bc9e67037775464979f3037c92d05ef"
 dependencies = [
  "bytes 1.8.0",
  "pin-project-lite",
@@ -2457,26 +2459,29 @@ dependencies = [
  "rustc-hash",
  "rustls",
  "socket2",
- "thiserror",
+ "thiserror 2.0.3",
  "tokio",
  "tracing",
 ]
 
 [[package]]
 name = "quinn-proto"
-version = "0.11.8"
+version = "0.11.9"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "fadfaed2cd7f389d0161bb73eeb07b7b78f8691047a6f3e73caaeae55310a4a6"
+checksum = "a2fe5ef3495d7d2e377ff17b1a8ce2ee2ec2a18cde8b6ad6619d65d0701c135d"
 dependencies = [
  "bytes 1.8.0",
+ "getrandom",
  "rand",
  "ring",
  "rustc-hash",
  "rustls",
+ "rustls-pki-types",
  "slab",
- "thiserror",
+ "thiserror 2.0.3",
  "tinyvec",
  "tracing",
+ "web-time",
 ]
 
 [[package]]
@@ -2600,7 +2605,7 @@ dependencies = [
  "regex",
  "serde",
  "siphasher",
- "thiserror",
+ "thiserror 1.0.69",
  "time",
  "toml",
  "url",
@@ -2873,9 +2878,9 @@ dependencies = [
 
 [[package]]
 name = "rustls"
-version = "0.23.16"
+version = "0.23.17"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "eee87ff5d9b36712a58574e12e9f0ea80f915a5b0ac518d322b24a465617925e"
+checksum = "7f1a745511c54ba6d4465e8d5dfbd81b45791756de28d4981af70d6dca128f1e"
 dependencies = [
  "once_cell",
  "ring",
@@ -2899,6 +2904,9 @@ name = "rustls-pki-types"
 version = "1.10.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "16f1201b3c9a7ee8039bcadc17b7e605e2945b27eee7631788c1bd2b0643674b"
+dependencies = [
+ "web-time",
+]
 
 [[package]]
 name = "rustls-webpki"
@@ -2961,18 +2969,18 @@ checksum = "61697e0a1c7e512e84a621326239844a24d8207b4669b41bc18b32ea5cbf988b"
 
 [[package]]
 name = "serde"
-version = "1.0.214"
+version = "1.0.215"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f55c3193aca71c12ad7890f1785d2b73e1b9f63a0bbc353c08ef26fe03fc56b5"
+checksum = "6513c1ad0b11a9376da888e3e0baa0077f1aed55c17f50e7b2397136129fb88f"
 dependencies = [
  "serde_derive",
 ]
 
 [[package]]
 name = "serde_derive"
-version = "1.0.214"
+version = "1.0.215"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "de523f781f095e28fa605cdce0f8307e451cc0fd14e2eb4cd2e98a355b147766"
+checksum = "ad1e866f866923f252f05c889987993144fb74e722403468a4ebd70c3cd756c0"
 dependencies = [
  "proc-macro2",
  "quote",
@@ -2981,9 +2989,9 @@ dependencies = [
 
 [[package]]
 name = "serde_json"
-version = "1.0.132"
+version = "1.0.133"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d726bfaff4b320266d395898905d0eba0345aae23b54aee3a737e260fd46db03"
+checksum = "c7fceb2473b9166b2294ef05efcb65a3db80803f0b03ef86a5fc88a2b85ee377"
 dependencies = [
  "itoa",
  "memchr",
@@ -3270,7 +3278,16 @@ version = "1.0.69"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "b6aaf5339b578ea85b50e080feb250a3e8ae8cfcdff9a461c9ec2904bc923f52"
 dependencies = [
- "thiserror-impl",
+ "thiserror-impl 1.0.69",
+]
+
+[[package]]
+name = "thiserror"
+version = "2.0.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c006c85c7651b3cf2ada4584faa36773bd07bac24acfb39f3c431b36d7e667aa"
+dependencies = [
+ "thiserror-impl 2.0.3",
 ]
 
 [[package]]
@@ -3284,6 +3301,17 @@ dependencies = [
  "syn 2.0.87",
 ]
 
+[[package]]
+name = "thiserror-impl"
+version = "2.0.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f077553d607adc1caf65430528a576c757a71ed73944b66ebb58ef2bbd243568"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.87",
+]
+
 [[package]]
 name = "thread_local"
 version = "1.1.8"
@@ -3612,9 +3640,9 @@ checksum = "e91b56cd4cadaeb79bbf1a5645f6b4f8dc5bde8834ad5894a8db35fda9efa1fe"
 
 [[package]]
 name = "unicode-width"
-version = "0.1.14"
+version = "0.2.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7dd6e30e90baa6f72411720665d41d89b9a3d039dc45b8faea1ddd07f617f6af"
+checksum = "1fc81956842c57dac11422a97c3b8195a1ff727f06e85c84ed2e8aa277c9a0fd"
 
 [[package]]
 name = "unicode-xid"
diff --git a/bun.lockb b/bun.lockb
deleted file mode 100755
index 25e032e..0000000
Binary files a/bun.lockb and /dev/null differ
diff --git a/package.json b/package.json
deleted file mode 100644
index 925ca0c..0000000
--- a/package.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "dependencies": {},
-  "devDependencies": {
-    "capture-website": "^4.1.0"
-  }
-}
\ No newline at end of file
diff --git a/web/bun.lockb b/web/bun.lockb
index 0be8dc2..2b0cd9c 100755
Binary files a/web/bun.lockb and b/web/bun.lockb differ
diff --git a/web/package.json b/web/package.json
index 02498f9..95457d5 100644
--- a/web/package.json
+++ b/web/package.json
@@ -18,14 +18,14 @@
 		"@radix-ui/react-accordion": "^1.2.1",
 		"@radix-ui/react-dialog": "^1.1.2",
 		"@radix-ui/react-tabs": "^1.1.1",
-		"@scaleway/use-query-params": "^5.0.8",
-		"@tanstack/react-query": "^5.59.20",
+		"@tanstack/react-query": "^5.60.5",
 		"@uidotdev/usehooks": "^2.4.1",
 		"date-fns": "^4.1.0",
-		"fets": "^0.8.3",
+		"fets": "^0.8.4",
 		"fuzzysort": "^3.1.0",
 		"lightningcss": "^1.28.1",
-		"lucide-react": "^0.456.0",
+		"little-date": "^1.0.0",
+		"lucide-react": "^0.460.0",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
 		"react-simple-maps": "^3.0.0",
@@ -37,7 +37,7 @@
 		"@types/react": "^18.3.12",
 		"@types/react-dom": "^18.3.1",
 		"@types/react-simple-maps": "^3.0.6",
-		"astro": "^4.16.10",
+		"astro": "^4.16.13",
 		"bun-types": "^1.1.34",
 		"rollup-plugin-license": "^3.5.3",
 		"typescript": "^5.6.3"
diff --git a/web/src/api/ranges.ts b/web/src/api/ranges.ts
index 6a1d0d1..f0cdefc 100644
--- a/web/src/api/ranges.ts
+++ b/web/src/api/ranges.ts
@@ -5,11 +5,13 @@ import {
 	differenceInMonths,
 	endOfDay,
 	endOfHour,
+	endOfYear,
 	startOfDay,
 	startOfMonth,
 	startOfYear,
 	subDays,
 	subMonths,
+	subYears,
 } from "date-fns";
 
 import type { DateRange } from "./types";
@@ -111,3 +113,27 @@ export const ranges: Record<RangeName, () => { range: DateRange; dataPoints: num
 		return { range: { start, end: now }, dataPoints: months + 1, graphRange: "month" };
 	},
 };
+
+export const previusRange = (range: string) => {
+	if (range === "today") return "yesterday";
+	if (range === "yearToDate") {
+		const lastYear = subYears(new Date(), 1);
+		const start = startOfYear(lastYear).getTime();
+		const end = endOfYear(lastYear).getTime();
+		return serializeRange({ start, end });
+	}
+	const r = deserializeRange(range);
+	const size = r.end - r.start;
+	const start = r.start - size;
+	const end = r.end - size;
+	return serializeRange({ start: startOfDay(start).getTime(), end: endOfDay(end).getTime() });
+};
+
+export const nextRange = (range: string) => {
+	if (range === "yesterday") return "today";
+	const r = deserializeRange(range);
+	const size = r.end - r.start;
+	const start = r.start + size;
+	const end = r.end + size;
+	return serializeRange({ start: startOfDay(start).getTime(), end: endOfDay(end).getTime() });
+};
diff --git a/web/src/components/daterange/daterange.module.css b/web/src/components/daterange/daterange.module.css
new file mode 100644
index 0000000..310e05c
--- /dev/null
+++ b/web/src/components/daterange/daterange.module.css
@@ -0,0 +1,5 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
diff --git a/web/src/components/daterange/index.tsx b/web/src/components/daterange/index.tsx
new file mode 100644
index 0000000..9c3a6da
--- /dev/null
+++ b/web/src/components/daterange/index.tsx
@@ -0,0 +1,38 @@
+import styles from "./daterange.module.css";
+import { useId } from "react";
+
+const resolution = {
+	hours: "hours",
+	days: "days",
+	weeks: "weeks",
+	months: "months",
+};
+
+export const DateRange = () => {
+	const start = useId();
+	const end = useId();
+
+	return (
+		<div className={styles.container}>
+			<label>
+				Start date:
+				<input type="date" id="start" name="trip-start" value="2018-07-22" min="2018-01-01" max="2018-12-31" />
+			</label>
+			<label>
+				End date:
+				<input type="date" id="start" name="trip-start" value="2018-07-22" min="2018-01-01" max="2018-12-31" />
+			</label>
+
+			<label>
+				Resolution:
+				<select>
+					{Object.entries(resolution).map(([key, value]) => (
+						<option key={key} value={key}>
+							{value}
+						</option>
+					))}
+				</select>
+			</label>
+		</div>
+	);
+};
diff --git a/web/src/components/project/range.module.css b/web/src/components/project/range.module.css
index 186d197..2917747 100644
--- a/web/src/components/project/range.module.css
+++ b/web/src/components/project/range.module.css
@@ -1,7 +1,26 @@
+.container {
+  display: flex;
+  gap: 0.2rem;
+  button {
+    display: flex;
+    background: transparent;
+    opacity: 0.6;
+    border: none;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    &:hover {
+      background-color: var(--pico-card-background-color);
+      color: var(--pico-h1-background-color);
+    }
+  }
+}
+
 details.selectRange {
   width: 10rem;
 
-  a {
+  button {
+    all: unset;
     cursor: pointer;
   }
 
diff --git a/web/src/components/project/range.tsx b/web/src/components/project/range.tsx
index c79218a..fb40066 100644
--- a/web/src/components/project/range.tsx
+++ b/web/src/components/project/range.tsx
@@ -1,7 +1,11 @@
 import styles from "./range.module.css";
 import { useRef } from "react";
-import { rangeNames, type RangeName } from "../../api/ranges";
+import { deserializeRange, nextRange, previusRange, rangeNames, type RangeName } from "../../api/ranges";
 import { cls } from "../../utils";
+import { Dialog } from "../dialog";
+import { DateRange } from "../daterange";
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import { formatDateRange } from "little-date";
 
 export const SelectRange = ({ onSelect, range }: { onSelect: (name: string) => void; range: string }) => {
 	const rangeName = range.includes(":") ? "Custom" : rangeNames[range as RangeName];
@@ -12,19 +16,49 @@ export const SelectRange = ({ onSelect, range }: { onSelect: (name: string) => v
 		onSelect(name);
 	};
 
+	const isCustom = !Object.keys(rangeNames).includes(range);
+	const r = deserializeRange(range);
+
 	return (
-		<details ref={detailsRef} className={cls("dropdown", styles.selectRange)}>
-			<summary>{rangeName}</summary>
-			<ul>
-				{Object.entries(rangeNames).map(([key, value]) => (
-					<li key={key}>
-						{/* biome-ignore lint/a11y/useValidAnchor: this is fine */}
-						<a className={key === range ? styles.selected : ""} onClick={handleSelect(key as RangeName)}>
-							{value}
-						</a>
+		<div className={styles.container}>
+			<button type="button" className="secondary" onClick={handleSelect(previusRange(range))}>
+				<ChevronLeftIcon size="24" />
+			</button>
+			<button type="button" className="secondary" onClick={handleSelect(nextRange(range))}>
+				<ChevronRightIcon size="24" />
+			</button>
+			<details ref={detailsRef} className={cls("dropdown", styles.selectRange)}>
+				<summary>{isCustom ? formatDateRange(new Date(r.start), new Date(r.end)) : rangeName}</summary>
+				<ul>
+					{Object.entries(rangeNames).map(([key, value]) => (
+						<li key={key}>
+							{/* biome-ignore lint/a11y/useValidAnchor: this is fine */}
+							<button
+								type="button"
+								className={key === range ? styles.selected : ""}
+								onClick={handleSelect(key as RangeName)}
+							>
+								{value}
+							</button>
+						</li>
+					))}
+					<li>
+						<Dialog
+							trigger={
+								<button type="button" className={isCustom ? styles.selected : ""}>
+									Custom
+								</button>
+							}
+							title="Custom Range"
+							showClose
+							hideTitle
+							autoOverflow
+						>
+							<DateRange />
+						</Dialog>
 					</li>
-				))}
-			</ul>
-		</details>
+				</ul>
+			</details>
+		</div>
 	);
 };
diff --git a/web/src/pages/test.astro b/web/src/pages/test.astro
new file mode 100644
index 0000000..675b0d8
--- /dev/null
+++ b/web/src/pages/test.astro
@@ -0,0 +1,8 @@
+---
+import { DateRange } from "../components/daterange";
+import Layout from "../layouts/Layout.astro";
+---
+
+<Layout title="Test">
+    <DateRange client:only="react" />
+</Layout>
\ No newline at end of file