From bd9da836a9fddc154d84baeeecb79c6ef8a346cb Mon Sep 17 00:00:00 2001
From: arkohut <39525455+arkohut@users.noreply.github.com>
Date: Tue, 30 Jul 2024 15:55:28 +0800
Subject: [PATCH] feat: add shadcn svelte

---
 web/components.json                           |  14 ++
 web/package-lock.json                         | 205 ++++++++++++++++--
 web/package.json                              |   8 +
 web/src/app.css                               |  55 +++++
 web/src/lib/Figure.svelte                     |  25 +--
 .../lib/components/copy-to-clipboard.svelte   |  30 +++
 .../lib/components/ui/button/button.svelte    |  25 +++
 web/src/lib/components/ui/button/index.ts     |  49 +++++
 .../ui/calendar/calendar-cell.svelte          |  21 ++
 .../ui/calendar/calendar-day.svelte           |  42 ++++
 .../ui/calendar/calendar-grid-body.svelte     |  13 ++
 .../ui/calendar/calendar-grid-head.svelte     |  13 ++
 .../ui/calendar/calendar-grid-row.svelte      |  13 ++
 .../ui/calendar/calendar-grid.svelte          |  13 ++
 .../ui/calendar/calendar-head-cell.svelte     |  16 ++
 .../ui/calendar/calendar-header.svelte        |  16 ++
 .../ui/calendar/calendar-heading.svelte       |  19 ++
 .../ui/calendar/calendar-months.svelte        |  16 ++
 .../ui/calendar/calendar-next-button.svelte   |  27 +++
 .../ui/calendar/calendar-prev-button.svelte   |  27 +++
 .../components/ui/calendar/calendar.svelte    |  59 +++++
 web/src/lib/components/ui/calendar/index.ts   |  30 +++
 .../components/ui/date-range-picker.svelte    |  64 ++++++
 web/src/lib/components/ui/input/index.ts      |  29 +++
 web/src/lib/components/ui/input/input.svelte  |  42 ++++
 web/src/lib/components/ui/popover/index.ts    |  17 ++
 .../ui/popover/popover-content.svelte         |  22 ++
 .../lib/components/ui/range-calendar/index.ts |  30 +++
 .../range-calendar/range-calendar-cell.svelte |  21 ++
 .../range-calendar/range-calendar-day.svelte  |  43 ++++
 .../range-calendar-grid-body.svelte           |  13 ++
 .../range-calendar-grid-head.svelte           |  13 ++
 .../range-calendar-grid-row.svelte            |  13 ++
 .../range-calendar/range-calendar-grid.svelte |  16 ++
 .../range-calendar-head-cell.svelte           |  16 ++
 .../range-calendar-header.svelte              |  16 ++
 .../range-calendar-heading.svelte             |  19 ++
 .../range-calendar-months.svelte              |  16 ++
 .../range-calendar-next-button.svelte         |  27 +++
 .../range-calendar-prev-button.svelte         |  27 +++
 .../ui/range-calendar/range-calendar.svelte   |  60 +++++
 .../lib/components/ui/scroll-area/index.ts    |  10 +
 .../scroll-area/scroll-area-scrollbar.svelte  |  27 +++
 .../ui/scroll-area/scroll-area.svelte         |  32 +++
 web/src/lib/components/ui/sonner/index.ts     |   1 +
 .../lib/components/ui/sonner/sonner.svelte    |  20 ++
 web/src/lib/utils.ts                          |  62 ++++++
 web/src/routes/+layout.svelte                 |   5 +-
 web/src/routes/+page.svelte                   |   9 +-
 web/svelte.config.js                          |   2 +
 web/tailwind.config.js                        |  75 ++++++-
 51 files changed, 1430 insertions(+), 53 deletions(-)
 create mode 100644 web/components.json
 create mode 100644 web/src/lib/components/copy-to-clipboard.svelte
 create mode 100644 web/src/lib/components/ui/button/button.svelte
 create mode 100644 web/src/lib/components/ui/button/index.ts
 create mode 100644 web/src/lib/components/ui/calendar/calendar-cell.svelte
 create mode 100644 web/src/lib/components/ui/calendar/calendar-day.svelte
 create mode 100644 web/src/lib/components/ui/calendar/calendar-grid-body.svelte
 create mode 100644 web/src/lib/components/ui/calendar/calendar-grid-head.svelte
 create mode 100644 web/src/lib/components/ui/calendar/calendar-grid-row.svelte
 create mode 100644 web/src/lib/components/ui/calendar/calendar-grid.svelte
 create mode 100644 web/src/lib/components/ui/calendar/calendar-head-cell.svelte
 create mode 100644 web/src/lib/components/ui/calendar/calendar-header.svelte
 create mode 100644 web/src/lib/components/ui/calendar/calendar-heading.svelte
 create mode 100644 web/src/lib/components/ui/calendar/calendar-months.svelte
 create mode 100644 web/src/lib/components/ui/calendar/calendar-next-button.svelte
 create mode 100644 web/src/lib/components/ui/calendar/calendar-prev-button.svelte
 create mode 100644 web/src/lib/components/ui/calendar/calendar.svelte
 create mode 100644 web/src/lib/components/ui/calendar/index.ts
 create mode 100644 web/src/lib/components/ui/date-range-picker.svelte
 create mode 100644 web/src/lib/components/ui/input/index.ts
 create mode 100644 web/src/lib/components/ui/input/input.svelte
 create mode 100644 web/src/lib/components/ui/popover/index.ts
 create mode 100644 web/src/lib/components/ui/popover/popover-content.svelte
 create mode 100644 web/src/lib/components/ui/range-calendar/index.ts
 create mode 100644 web/src/lib/components/ui/range-calendar/range-calendar-cell.svelte
 create mode 100644 web/src/lib/components/ui/range-calendar/range-calendar-day.svelte
 create mode 100644 web/src/lib/components/ui/range-calendar/range-calendar-grid-body.svelte
 create mode 100644 web/src/lib/components/ui/range-calendar/range-calendar-grid-head.svelte
 create mode 100644 web/src/lib/components/ui/range-calendar/range-calendar-grid-row.svelte
 create mode 100644 web/src/lib/components/ui/range-calendar/range-calendar-grid.svelte
 create mode 100644 web/src/lib/components/ui/range-calendar/range-calendar-head-cell.svelte
 create mode 100644 web/src/lib/components/ui/range-calendar/range-calendar-header.svelte
 create mode 100644 web/src/lib/components/ui/range-calendar/range-calendar-heading.svelte
 create mode 100644 web/src/lib/components/ui/range-calendar/range-calendar-months.svelte
 create mode 100644 web/src/lib/components/ui/range-calendar/range-calendar-next-button.svelte
 create mode 100644 web/src/lib/components/ui/range-calendar/range-calendar-prev-button.svelte
 create mode 100644 web/src/lib/components/ui/range-calendar/range-calendar.svelte
 create mode 100644 web/src/lib/components/ui/scroll-area/index.ts
 create mode 100644 web/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte
 create mode 100644 web/src/lib/components/ui/scroll-area/scroll-area.svelte
 create mode 100644 web/src/lib/components/ui/sonner/index.ts
 create mode 100644 web/src/lib/components/ui/sonner/sonner.svelte
 create mode 100644 web/src/lib/utils.ts

diff --git a/web/components.json b/web/components.json
new file mode 100644
index 0000000..3f3ad02
--- /dev/null
+++ b/web/components.json
@@ -0,0 +1,14 @@
+{
+	"$schema": "https://shadcn-svelte.com/schema.json",
+	"style": "default",
+	"tailwind": {
+		"config": "tailwind.config.js",
+		"css": "src/app.css",
+		"baseColor": "neutral"
+	},
+	"aliases": {
+		"components": "$lib/components",
+		"utils": "$lib/utils"
+	},
+	"typescript": true
+}
\ No newline at end of file
diff --git a/web/package-lock.json b/web/package-lock.json
index 24acadc..c5238a5 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -8,8 +8,16 @@
 			"name": "web",
 			"version": "0.0.1",
 			"dependencies": {
+				"@internationalized/date": "^3.5.5",
 				"@tailwindcss/typography": "^0.5.13",
+				"bits-ui": "^0.21.13",
+				"clsx": "^2.1.1",
+				"lucide-svelte": "^0.417.0",
 				"marked": "^13.0.2",
+				"mode-watcher": "^0.4.1",
+				"svelte-sonner": "^0.3.27",
+				"tailwind-merge": "^2.4.0",
+				"tailwind-variants": "^0.2.1",
 				"typesense": "^1.7.2"
 			},
 			"devDependencies": {
@@ -49,7 +57,6 @@
 			"version": "2.3.0",
 			"resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
 			"integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
-			"dev": true,
 			"dependencies": {
 				"@jridgewell/gen-mapping": "^0.3.5",
 				"@jridgewell/trace-mapping": "^0.3.24"
@@ -509,6 +516,28 @@
 				"node": ">=14"
 			}
 		},
+		"node_modules/@floating-ui/core": {
+			"version": "1.6.5",
+			"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.5.tgz",
+			"integrity": "sha512-8GrTWmoFhm5BsMZOTHeGD2/0FLKLQQHvO/ZmQga4tKempYRLz8aqJGqXVuQgisnMObq2YZ2SgkwctN1LOOxcqA==",
+			"dependencies": {
+				"@floating-ui/utils": "^0.2.5"
+			}
+		},
+		"node_modules/@floating-ui/dom": {
+			"version": "1.6.8",
+			"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.8.tgz",
+			"integrity": "sha512-kx62rP19VZ767Q653wsP1XZCGIirkE09E0QUGNYTM/ttbbQHqcGPdSfWFxUyyNLc/W6aoJRBajOSXhP6GXjC0Q==",
+			"dependencies": {
+				"@floating-ui/core": "^1.6.0",
+				"@floating-ui/utils": "^0.2.5"
+			}
+		},
+		"node_modules/@floating-ui/utils": {
+			"version": "0.2.5",
+			"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.5.tgz",
+			"integrity": "sha512-sTcG+QZ6fdEUObICavU+aB3Mp8HY4n14wYHdxK4fXjPmv3PXZZeY5RaguJmGyeH/CJQhX3fqKUtS4qc1LoHwhQ=="
+		},
 		"node_modules/@humanwhocodes/config-array": {
 			"version": "0.11.14",
 			"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
@@ -566,6 +595,14 @@
 			"deprecated": "Use @eslint/object-schema instead",
 			"dev": true
 		},
+		"node_modules/@internationalized/date": {
+			"version": "3.5.5",
+			"resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.5.5.tgz",
+			"integrity": "sha512-H+CfYvOZ0LTJeeLOqm19E3uj/4YjrmOFtBufDHPfvtI80hFAMqtrp7oCACpe4Cil5l8S0Qu/9dYfZc/5lY8WQQ==",
+			"dependencies": {
+				"@swc/helpers": "^0.5.0"
+			}
+		},
 		"node_modules/@isaacs/cliui": {
 			"version": "8.0.2",
 			"resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -650,6 +687,39 @@
 				"@jridgewell/sourcemap-codec": "^1.4.14"
 			}
 		},
+		"node_modules/@melt-ui/svelte": {
+			"version": "0.76.2",
+			"resolved": "https://registry.npmjs.org/@melt-ui/svelte/-/svelte-0.76.2.tgz",
+			"integrity": "sha512-7SbOa11tXUS95T3fReL+dwDs5FyJtCEqrqG3inRziDws346SYLsxOQ6HmX+4BkIsQh1R8U3XNa+EMmdMt38lMA==",
+			"dependencies": {
+				"@floating-ui/core": "^1.3.1",
+				"@floating-ui/dom": "^1.4.5",
+				"@internationalized/date": "^3.5.0",
+				"dequal": "^2.0.3",
+				"focus-trap": "^7.5.2",
+				"nanoid": "^5.0.4"
+			},
+			"peerDependencies": {
+				"svelte": ">=3 <5"
+			}
+		},
+		"node_modules/@melt-ui/svelte/node_modules/nanoid": {
+			"version": "5.0.7",
+			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.0.7.tgz",
+			"integrity": "sha512-oLxFY2gd2IqnjcYyOXD8XGCftpGtZP2AbHbOkthDkvRywH5ayNtPVy9YlOPcHckXzbLTCHpkb7FB+yuxKV13pQ==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/ai"
+				}
+			],
+			"bin": {
+				"nanoid": "bin/nanoid.js"
+			},
+			"engines": {
+				"node": "^18 || >=20"
+			}
+		},
 		"node_modules/@nodelib/fs.scandir": {
 			"version": "2.1.5",
 			"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -789,6 +859,14 @@
 				"vite": "^4.0.0"
 			}
 		},
+		"node_modules/@swc/helpers": {
+			"version": "0.5.12",
+			"resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.12.tgz",
+			"integrity": "sha512-KMZNXiGibsW9kvZAO1Pam2JPTDBm+KSHMMHWdsyI/1DbIZjT2A6Gy3hblVXUMEDvUAKq+e0vL0X0o54owWji7g==",
+			"dependencies": {
+				"tslib": "^2.4.0"
+			}
+		},
 		"node_modules/@tailwindcss/typography": {
 			"version": "0.5.13",
 			"resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.13.tgz",
@@ -824,8 +902,7 @@
 		"node_modules/@types/estree": {
 			"version": "1.0.5",
 			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
-			"integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
-			"dev": true
+			"integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
 		},
 		"node_modules/@types/json-schema": {
 			"version": "7.0.15",
@@ -1045,7 +1122,6 @@
 			"version": "8.12.0",
 			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.0.tgz",
 			"integrity": "sha512-RTvkC4w+KNXrM39/lWCUaG0IbRkWdCv7W/IOW9oU6SawyxulvkQy5HQPVTKxEjczcUvapcrw3cFx/60VN/NRNw==",
-			"dev": true,
 			"bin": {
 				"acorn": "bin/acorn"
 			},
@@ -1132,7 +1208,6 @@
 			"version": "5.3.0",
 			"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
 			"integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
-			"dev": true,
 			"dependencies": {
 				"dequal": "^2.0.3"
 			}
@@ -1202,7 +1277,6 @@
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.0.0.tgz",
 			"integrity": "sha512-+60uv1hiVFhHZeO+Lz0RYzsVHy5Wr1ayX0mwda9KPDVLNJgZ1T9Ny7VmFbLDzxsH0D87I86vgj3gFrjTJUYznw==",
-			"dev": true,
 			"dependencies": {
 				"dequal": "^2.0.3"
 			}
@@ -1223,6 +1297,39 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
+		"node_modules/bits-ui": {
+			"version": "0.21.13",
+			"resolved": "https://registry.npmjs.org/bits-ui/-/bits-ui-0.21.13.tgz",
+			"integrity": "sha512-7nmOh6Ig7ND4DXZHv1FhNsY9yUGrad0+mf3tc4YN//3MgnJT1LnHtk4HZAKgmxCOe7txSX7/39LtYHbkrXokAQ==",
+			"dependencies": {
+				"@internationalized/date": "^3.5.1",
+				"@melt-ui/svelte": "0.76.2",
+				"nanoid": "^5.0.5"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/huntabyte"
+			},
+			"peerDependencies": {
+				"svelte": "^4.0.0 || ^5.0.0-next.118"
+			}
+		},
+		"node_modules/bits-ui/node_modules/nanoid": {
+			"version": "5.0.7",
+			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.0.7.tgz",
+			"integrity": "sha512-oLxFY2gd2IqnjcYyOXD8XGCftpGtZP2AbHbOkthDkvRywH5ayNtPVy9YlOPcHckXzbLTCHpkb7FB+yuxKV13pQ==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/ai"
+				}
+			],
+			"bin": {
+				"nanoid": "bin/nanoid.js"
+			},
+			"engines": {
+				"node": "^18 || >=20"
+			}
+		},
 		"node_modules/brace-expansion": {
 			"version": "2.0.1",
 			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
@@ -1370,11 +1477,18 @@
 				"node": ">= 6"
 			}
 		},
+		"node_modules/clsx": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+			"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
 		"node_modules/code-red": {
 			"version": "1.0.4",
 			"resolved": "https://registry.npmjs.org/code-red/-/code-red-1.0.4.tgz",
 			"integrity": "sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==",
-			"dev": true,
 			"dependencies": {
 				"@jridgewell/sourcemap-codec": "^1.4.15",
 				"@types/estree": "^1.0.1",
@@ -1460,7 +1574,6 @@
 			"version": "2.3.1",
 			"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
 			"integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
-			"dev": true,
 			"dependencies": {
 				"mdn-data": "2.0.30",
 				"source-map-js": "^1.0.1"
@@ -1552,7 +1665,6 @@
 			"version": "2.0.3",
 			"resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
 			"integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
-			"dev": true,
 			"engines": {
 				"node": ">=6"
 			}
@@ -1912,7 +2024,6 @@
 			"version": "3.0.3",
 			"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
 			"integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
-			"dev": true,
 			"dependencies": {
 				"@types/estree": "^1.0.0"
 			}
@@ -2043,6 +2154,14 @@
 			"integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==",
 			"dev": true
 		},
+		"node_modules/focus-trap": {
+			"version": "7.5.4",
+			"resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.5.4.tgz",
+			"integrity": "sha512-N7kHdlgsO/v+iD/dMoJKtsSqs5Dz/dXZVebRgJw23LDk+jMi/974zyiOYDziY2JPp8xivq9BmUGwIJMiuSBi7w==",
+			"dependencies": {
+				"tabbable": "^6.2.0"
+			}
+		},
 		"node_modules/follow-redirects": {
 			"version": "1.15.6",
 			"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
@@ -2397,7 +2516,6 @@
 			"version": "3.0.2",
 			"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.2.tgz",
 			"integrity": "sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==",
-			"dev": true,
 			"dependencies": {
 				"@types/estree": "*"
 			}
@@ -2515,8 +2633,7 @@
 		"node_modules/locate-character": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
-			"integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
-			"dev": true
+			"integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA=="
 		},
 		"node_modules/locate-path": {
 			"version": "6.0.0",
@@ -2568,11 +2685,18 @@
 				"node": "14 || >=16.14"
 			}
 		},
+		"node_modules/lucide-svelte": {
+			"version": "0.417.0",
+			"resolved": "https://registry.npmjs.org/lucide-svelte/-/lucide-svelte-0.417.0.tgz",
+			"integrity": "sha512-JizgL7FFw2vfYj0bkXUyivOvDx+rrbAdJrVzK2Yt/X2/OvUu/9IcOrcOyQcMxwztCvylS4q4MvxsAEnh2NZkLQ==",
+			"peerDependencies": {
+				"svelte": "^3 || ^4 || ^5.0.0-next.42"
+			}
+		},
 		"node_modules/magic-string": {
 			"version": "0.30.10",
 			"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.10.tgz",
 			"integrity": "sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==",
-			"dev": true,
 			"dependencies": {
 				"@jridgewell/sourcemap-codec": "^1.4.15"
 			}
@@ -2591,8 +2715,7 @@
 		"node_modules/mdn-data": {
 			"version": "2.0.30",
 			"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
-			"integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
-			"dev": true
+			"integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA=="
 		},
 		"node_modules/merge2": {
 			"version": "1.4.1",
@@ -2686,6 +2809,14 @@
 				"mkdirp": "bin/cmd.js"
 			}
 		},
+		"node_modules/mode-watcher": {
+			"version": "0.4.1",
+			"resolved": "https://registry.npmjs.org/mode-watcher/-/mode-watcher-0.4.1.tgz",
+			"integrity": "sha512-bNC+1NXmwEFZtziCdZSgP7HFQTpqJPcQn9GwwJQGSf6SBF3neEPYV1uRwkYuAQwbsvsXIYtzaqgedDzJ7D1mhg==",
+			"peerDependencies": {
+				"svelte": "^4.0.0 || ^5.0.0-next.1"
+			}
+		},
 		"node_modules/mri": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
@@ -2914,7 +3045,6 @@
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.1.0.tgz",
 			"integrity": "sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==",
-			"dev": true,
 			"dependencies": {
 				"@types/estree": "^1.0.0",
 				"estree-walker": "^3.0.0",
@@ -3631,7 +3761,6 @@
 			"version": "4.2.18",
 			"resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.18.tgz",
 			"integrity": "sha512-d0FdzYIiAePqRJEb90WlJDkjUEx42xhivxN8muUBmfZnP+tzUgz12DJ2hRJi8sIHCME7jeK1PTMgKPSfTd8JrA==",
-			"dev": true,
 			"dependencies": {
 				"@ampproject/remapping": "^2.2.1",
 				"@jridgewell/sourcemap-codec": "^1.4.15",
@@ -3773,6 +3902,43 @@
 				}
 			}
 		},
+		"node_modules/svelte-sonner": {
+			"version": "0.3.27",
+			"resolved": "https://registry.npmjs.org/svelte-sonner/-/svelte-sonner-0.3.27.tgz",
+			"integrity": "sha512-+PvbuePNTyTNCepCWqKcFeu+Lo27yYuwfSc7zJvrWjCRMJrWAmccPg3j7jO1W13QoN3TySXU5Trb956VBQiM5Q==",
+			"peerDependencies": {
+				"svelte": "^3.0.0 || ^4.0.0 || ^5.0.0-next.1"
+			}
+		},
+		"node_modules/tabbable": {
+			"version": "6.2.0",
+			"resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+			"integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="
+		},
+		"node_modules/tailwind-merge": {
+			"version": "2.4.0",
+			"resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.4.0.tgz",
+			"integrity": "sha512-49AwoOQNKdqKPd9CViyH5wJoSKsCDjUlzL8DxuGp3P1FsGY36NJDAa18jLZcaHAUUuTj+JB8IAo8zWgBNvBF7A==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/dcastil"
+			}
+		},
+		"node_modules/tailwind-variants": {
+			"version": "0.2.1",
+			"resolved": "https://registry.npmjs.org/tailwind-variants/-/tailwind-variants-0.2.1.tgz",
+			"integrity": "sha512-2xmhAf4UIc3PijOUcJPA1LP4AbxhpcHuHM2C26xM0k81r0maAO6uoUSHl3APmvHZcY5cZCY/bYuJdfFa4eGoaw==",
+			"dependencies": {
+				"tailwind-merge": "^2.2.0"
+			},
+			"engines": {
+				"node": ">=16.x",
+				"pnpm": ">=7.x"
+			},
+			"peerDependencies": {
+				"tailwindcss": "*"
+			}
+		},
 		"node_modules/tailwindcss": {
 			"version": "3.4.4",
 			"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.4.tgz",
@@ -3940,8 +4106,7 @@
 		"node_modules/tslib": {
 			"version": "2.6.3",
 			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz",
-			"integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==",
-			"dev": true
+			"integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ=="
 		},
 		"node_modules/type-check": {
 			"version": "0.4.0",
diff --git a/web/package.json b/web/package.json
index f19f0a1..f50ef19 100644
--- a/web/package.json
+++ b/web/package.json
@@ -34,8 +34,16 @@
 	},
 	"type": "module",
 	"dependencies": {
+		"@internationalized/date": "^3.5.5",
 		"@tailwindcss/typography": "^0.5.13",
+		"bits-ui": "^0.21.13",
+		"clsx": "^2.1.1",
+		"lucide-svelte": "^0.417.0",
 		"marked": "^13.0.2",
+		"mode-watcher": "^0.4.1",
+		"svelte-sonner": "^0.3.27",
+		"tailwind-merge": "^2.4.0",
+		"tailwind-variants": "^0.2.1",
 		"typesense": "^1.7.2"
 	}
 }
diff --git a/web/src/app.css b/web/src/app.css
index b5c61c9..dec2014 100644
--- a/web/src/app.css
+++ b/web/src/app.css
@@ -1,3 +1,58 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+ 
+@layer base {
+    :root {
+      --background: 0 0% 100%;
+      --foreground: 240 10% 3.9%;
+      --card: 0 0% 100%;
+      --card-foreground: 240 10% 3.9%;
+      --popover: 0 0% 100%;;
+      --popover-foreground: 240 10% 3.9%;
+      --primary: 240 5.9% 10%;
+      --primary-foreground: 0 0% 98%;
+      --secondary: 240 4.8% 95.9%;
+      --secondary-foreground: 240 5.9% 10%;
+      --muted: 240 4.8% 95.9%;
+      --muted-foreground: 240 3.8% 46.1%;
+      --accent: 240 4.8% 95.9%;
+      --accent-foreground: 240 5.9% 10%;
+      --destructive: 0 72.22% 50.59%;
+      --destructive-foreground: 0 0% 98%;
+      --border: 240 5.9% 90%;
+      --input: 240 5.9% 90%;
+      --ring: 240 5.9% 10%;
+      --radius: 0.5rem;
+    }
+    .dark {
+      --background: 240 10% 3.9%;
+      --foreground: 0 0% 98%;
+      --card: 240 10% 3.9%;
+      --card-foreground: 0 0% 98%;
+      --popover: 240 10% 3.9%;
+      --popover-foreground: 0 0% 98%;
+      --primary: 0 0% 98%;
+      --primary-foreground: 240 5.9% 10%;
+      --secondary: 240 3.7% 15.9%;
+      --secondary-foreground: 0 0% 98%;
+      --muted: 240 3.7% 15.9%;
+      --muted-foreground: 240 5% 64.9%;
+      --accent: 240 3.7% 15.9%;
+      --accent-foreground: 0 0% 98%;
+      --destructive: 0 62.8% 30.6%;
+      --destructive-foreground: 0 0% 98%;
+      --border: 240 3.7% 15.9%;
+      --input: 240 3.7% 15.9%;
+      --ring: 240 4.9% 83.9%;
+    }
+  }
+ 
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
\ No newline at end of file
diff --git a/web/src/lib/Figure.svelte b/web/src/lib/Figure.svelte
index 8b25453..3be3fb6 100644
--- a/web/src/lib/Figure.svelte
+++ b/web/src/lib/Figure.svelte
@@ -1,5 +1,7 @@
 <!-- Modal.svelte -->
 <script>
+	import { ScrollArea } from "$lib/components/ui/scroll-area";
+	import CopyToClipboard from "$lib/components/copy-to-clipboard.svelte"
 	import OCRTable from './OCRTable.svelte';
 	import { marked } from 'marked';
 
@@ -80,18 +82,6 @@
 
 		return true;
 	}
-
-	/**
-	 * Copy text to clipboard
-	 * @param {string} text
-	 */
-	 function copyToClipboard(text) {
-		navigator.clipboard.writeText(text).then(() => {
-			console.log('Text copied to clipboard');
-		}).catch(err => {
-			console.error('Failed to copy text: ', err);
-		});
-	}
 </script>
 
 <div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full" id="my-modal">
@@ -122,7 +112,7 @@
 				</a>
 			</div>
 			<!-- Description container -->
-			<div class="mt-4 md:mt-0 md:ml-6 overflow-y-auto max-h-full">
+			<ScrollArea class="mt-4 md:mt-0 md:ml-6 overflow-y-auto max-h-full">
 				<div class="mb-2 mr-2 pb-2 border-b border-gray-300">
 					<span class="uppercase tracking-wide text-sm text-indigo-600 font-bold">ID</span>
 					<span class="mt-1 text-sm leading-tight font-medium text-gray-500 font-mono">
@@ -168,12 +158,7 @@
 						<div class="mb-2">
 							<span class="font-bold flex items-center">
 								{entry.key}
-								<button class="ml-2 flex items-center" on:click={() => copyToClipboard(entry.value)}>
-									<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" style="margin-top: -4px;">
-										<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z" />
-										<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z" />
-									</svg>
-								</button>
+								<CopyToClipboard text={entry.value} />
 							</span>
 							{#if typeof entry.value === 'object'}
 								{#if isValidOCRDataStructure(entry.value)}
@@ -195,7 +180,7 @@
 						</div>
 					{/each}
 				</div>
-			</div>
+			</ScrollArea>
 		</div>
 		<div class="absolute top-0 right-0 pt-4 pr-4">
 			<button class="text-gray-400 hover:text-gray-600" on:click={onClose}>
diff --git a/web/src/lib/components/copy-to-clipboard.svelte b/web/src/lib/components/copy-to-clipboard.svelte
new file mode 100644
index 0000000..bf9f008
--- /dev/null
+++ b/web/src/lib/components/copy-to-clipboard.svelte
@@ -0,0 +1,30 @@
+<script>
+	import { Copy, Check } from 'lucide-svelte';
+
+	export let text;
+
+	let copied = false;
+
+	/**
+	 * Copy text to clipboard and change icon
+	 * @param {string} text
+	 */
+	function handleCopyClick(text) {
+		navigator.clipboard.writeText(text).then(() => {
+			copied = true;
+			setTimeout(() => {
+				copied = false;
+			}, 2000);
+		}).catch(err => {
+			console.error('Failed to copy text: ', err);
+		});
+	}
+</script>
+
+<button class="ml-2 flex items-center" on:click={() => handleCopyClick(text)}>
+	{#if copied}
+		<Check size={20} />
+	{:else}
+		<Copy size={20} />
+	{/if}
+</button>
\ No newline at end of file
diff --git a/web/src/lib/components/ui/button/button.svelte b/web/src/lib/components/ui/button/button.svelte
new file mode 100644
index 0000000..86827f3
--- /dev/null
+++ b/web/src/lib/components/ui/button/button.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { Button as ButtonPrimitive } from "bits-ui";
+	import { type Events, type Props, buttonVariants } from "./index.js";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = Props;
+	type $$Events = Events;
+
+	let className: $$Props["class"] = undefined;
+	export let variant: $$Props["variant"] = "default";
+	export let size: $$Props["size"] = "default";
+	export let builders: $$Props["builders"] = [];
+	export { className as class };
+</script>
+
+<ButtonPrimitive.Root
+	{builders}
+	class={cn(buttonVariants({ variant, size, className }))}
+	type="button"
+	{...$$restProps}
+	on:click
+	on:keydown
+>
+	<slot />
+</ButtonPrimitive.Root>
diff --git a/web/src/lib/components/ui/button/index.ts b/web/src/lib/components/ui/button/index.ts
new file mode 100644
index 0000000..af1e188
--- /dev/null
+++ b/web/src/lib/components/ui/button/index.ts
@@ -0,0 +1,49 @@
+import { type VariantProps, tv } from "tailwind-variants";
+import type { Button as ButtonPrimitive } from "bits-ui";
+import Root from "./button.svelte";
+
+const buttonVariants = tv({
+	base: "ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+	variants: {
+		variant: {
+			default: "bg-primary text-primary-foreground hover:bg-primary/90",
+			destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+			outline:
+				"border-input bg-background hover:bg-accent hover:text-accent-foreground border",
+			secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+			ghost: "hover:bg-accent hover:text-accent-foreground",
+			link: "text-primary underline-offset-4 hover:underline",
+		},
+		size: {
+			default: "h-10 px-4 py-2",
+			sm: "h-9 rounded-md px-3",
+			lg: "h-11 rounded-md px-8",
+			icon: "h-10 w-10",
+		},
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default",
+	},
+});
+
+type Variant = VariantProps<typeof buttonVariants>["variant"];
+type Size = VariantProps<typeof buttonVariants>["size"];
+
+type Props = ButtonPrimitive.Props & {
+	variant?: Variant;
+	size?: Size;
+};
+
+type Events = ButtonPrimitive.Events;
+
+export {
+	Root,
+	type Props,
+	type Events,
+	//
+	Root as Button,
+	type Props as ButtonProps,
+	type Events as ButtonEvents,
+	buttonVariants,
+};
diff --git a/web/src/lib/components/ui/calendar/calendar-cell.svelte b/web/src/lib/components/ui/calendar/calendar-cell.svelte
new file mode 100644
index 0000000..f2962b2
--- /dev/null
+++ b/web/src/lib/components/ui/calendar/calendar-cell.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CalendarPrimitive.CellProps;
+
+	export let date: $$Props["date"];
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.Cell
+	{date}
+	class={cn(
+		"[&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50 relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md",
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+</CalendarPrimitive.Cell>
diff --git a/web/src/lib/components/ui/calendar/calendar-day.svelte b/web/src/lib/components/ui/calendar/calendar-day.svelte
new file mode 100644
index 0000000..c9b2efc
--- /dev/null
+++ b/web/src/lib/components/ui/calendar/calendar-day.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { buttonVariants } from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CalendarPrimitive.DayProps;
+	type $$Events = CalendarPrimitive.DayEvents;
+
+	export let date: $$Props["date"];
+	export let month: $$Props["month"];
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.Day
+	on:click
+	{date}
+	{month}
+	class={cn(
+		buttonVariants({ variant: "ghost" }),
+		"h-9 w-9 p-0 font-normal ",
+		"[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground",
+		// Selected
+		"data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground data-[selected]:opacity-100",
+		// Disabled
+		"data-[disabled]:text-muted-foreground data-[disabled]:opacity-50",
+		// Unavailable
+		"data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through",
+		// Outside months
+		"data-[outside-month]:text-muted-foreground [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground data-[outside-month]:pointer-events-none data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:opacity-30",
+		className
+	)}
+	{...$$restProps}
+	let:selected
+	let:disabled
+	let:unavailable
+	let:builder
+>
+	<slot {selected} {disabled} {unavailable} {builder}>
+		{date.day}
+	</slot>
+</CalendarPrimitive.Day>
diff --git a/web/src/lib/components/ui/calendar/calendar-grid-body.svelte b/web/src/lib/components/ui/calendar/calendar-grid-body.svelte
new file mode 100644
index 0000000..80b6f84
--- /dev/null
+++ b/web/src/lib/components/ui/calendar/calendar-grid-body.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CalendarPrimitive.GridBodyProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.GridBody class={cn(className)} {...$$restProps}>
+	<slot />
+</CalendarPrimitive.GridBody>
diff --git a/web/src/lib/components/ui/calendar/calendar-grid-head.svelte b/web/src/lib/components/ui/calendar/calendar-grid-head.svelte
new file mode 100644
index 0000000..dbe3e8e
--- /dev/null
+++ b/web/src/lib/components/ui/calendar/calendar-grid-head.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CalendarPrimitive.GridHeadProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.GridHead class={cn(className)} {...$$restProps}>
+	<slot />
+</CalendarPrimitive.GridHead>
diff --git a/web/src/lib/components/ui/calendar/calendar-grid-row.svelte b/web/src/lib/components/ui/calendar/calendar-grid-row.svelte
new file mode 100644
index 0000000..3a1473c
--- /dev/null
+++ b/web/src/lib/components/ui/calendar/calendar-grid-row.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CalendarPrimitive.GridRowProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.GridRow class={cn("flex", className)} {...$$restProps}>
+	<slot />
+</CalendarPrimitive.GridRow>
diff --git a/web/src/lib/components/ui/calendar/calendar-grid.svelte b/web/src/lib/components/ui/calendar/calendar-grid.svelte
new file mode 100644
index 0000000..d52c9a7
--- /dev/null
+++ b/web/src/lib/components/ui/calendar/calendar-grid.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CalendarPrimitive.GridProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.Grid class={cn("w-full border-collapse space-y-1", className)} {...$$restProps}>
+	<slot />
+</CalendarPrimitive.Grid>
diff --git a/web/src/lib/components/ui/calendar/calendar-head-cell.svelte b/web/src/lib/components/ui/calendar/calendar-head-cell.svelte
new file mode 100644
index 0000000..f9eabbc
--- /dev/null
+++ b/web/src/lib/components/ui/calendar/calendar-head-cell.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CalendarPrimitive.HeadCellProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.HeadCell
+	class={cn("text-muted-foreground w-9 rounded-md text-[0.8rem] font-normal", className)}
+	{...$$restProps}
+>
+	<slot />
+</CalendarPrimitive.HeadCell>
diff --git a/web/src/lib/components/ui/calendar/calendar-header.svelte b/web/src/lib/components/ui/calendar/calendar-header.svelte
new file mode 100644
index 0000000..014ff28
--- /dev/null
+++ b/web/src/lib/components/ui/calendar/calendar-header.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CalendarPrimitive.HeaderProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.Header
+	class={cn("relative flex w-full items-center justify-between pt-1", className)}
+	{...$$restProps}
+>
+	<slot />
+</CalendarPrimitive.Header>
diff --git a/web/src/lib/components/ui/calendar/calendar-heading.svelte b/web/src/lib/components/ui/calendar/calendar-heading.svelte
new file mode 100644
index 0000000..409a182
--- /dev/null
+++ b/web/src/lib/components/ui/calendar/calendar-heading.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CalendarPrimitive.HeadingProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.Heading
+	let:headingValue
+	class={cn("text-sm font-medium", className)}
+	{...$$restProps}
+>
+	<slot {headingValue}>
+		{headingValue}
+	</slot>
+</CalendarPrimitive.Heading>
diff --git a/web/src/lib/components/ui/calendar/calendar-months.svelte b/web/src/lib/components/ui/calendar/calendar-months.svelte
new file mode 100644
index 0000000..4621c54
--- /dev/null
+++ b/web/src/lib/components/ui/calendar/calendar-months.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div
+	class={cn("mt-4 flex flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0", className)}
+	{...$$restProps}
+>
+	<slot />
+</div>
diff --git a/web/src/lib/components/ui/calendar/calendar-next-button.svelte b/web/src/lib/components/ui/calendar/calendar-next-button.svelte
new file mode 100644
index 0000000..dd0bffe
--- /dev/null
+++ b/web/src/lib/components/ui/calendar/calendar-next-button.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import ChevronRight from "lucide-svelte/icons/chevron-right";
+	import { buttonVariants } from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CalendarPrimitive.NextButtonProps;
+	type $$Events = CalendarPrimitive.NextButtonEvents;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.NextButton
+	on:click
+	class={cn(
+		buttonVariants({ variant: "outline" }),
+		"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+		className
+	)}
+	{...$$restProps}
+	let:builder
+>
+	<slot {builder}>
+		<ChevronRight class="h-4 w-4" />
+	</slot>
+</CalendarPrimitive.NextButton>
diff --git a/web/src/lib/components/ui/calendar/calendar-prev-button.svelte b/web/src/lib/components/ui/calendar/calendar-prev-button.svelte
new file mode 100644
index 0000000..48d8235
--- /dev/null
+++ b/web/src/lib/components/ui/calendar/calendar-prev-button.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import ChevronLeft from "lucide-svelte/icons/chevron-left";
+	import { buttonVariants } from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CalendarPrimitive.PrevButtonProps;
+	type $$Events = CalendarPrimitive.PrevButtonEvents;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.PrevButton
+	on:click
+	class={cn(
+		buttonVariants({ variant: "outline" }),
+		"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+		className
+	)}
+	{...$$restProps}
+	let:builder
+>
+	<slot {builder}>
+		<ChevronLeft class="h-4 w-4" />
+	</slot>
+</CalendarPrimitive.PrevButton>
diff --git a/web/src/lib/components/ui/calendar/calendar.svelte b/web/src/lib/components/ui/calendar/calendar.svelte
new file mode 100644
index 0000000..0857f3d
--- /dev/null
+++ b/web/src/lib/components/ui/calendar/calendar.svelte
@@ -0,0 +1,59 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import * as Calendar from "./index.js";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CalendarPrimitive.Props;
+
+	type $$Events = CalendarPrimitive.Events;
+
+	export let value: $$Props["value"] = undefined;
+	export let placeholder: $$Props["placeholder"] = undefined;
+	export let weekdayFormat: $$Props["weekdayFormat"] = "short";
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.Root
+	bind:value
+	bind:placeholder
+	{weekdayFormat}
+	class={cn("p-3", className)}
+	{...$$restProps}
+	on:keydown
+	let:months
+	let:weekdays
+>
+	<Calendar.Header>
+		<Calendar.PrevButton />
+		<Calendar.Heading />
+		<Calendar.NextButton />
+	</Calendar.Header>
+	<Calendar.Months>
+		{#each months as month}
+			<Calendar.Grid>
+				<Calendar.GridHead>
+					<Calendar.GridRow class="flex">
+						{#each weekdays as weekday}
+							<Calendar.HeadCell>
+								{weekday.slice(0, 2)}
+							</Calendar.HeadCell>
+						{/each}
+					</Calendar.GridRow>
+				</Calendar.GridHead>
+				<Calendar.GridBody>
+					{#each month.weeks as weekDates}
+						<Calendar.GridRow class="mt-2 w-full">
+							{#each weekDates as date}
+								<Calendar.Cell {date}>
+									<Calendar.Day {date} month={month.value} />
+								</Calendar.Cell>
+							{/each}
+						</Calendar.GridRow>
+					{/each}
+				</Calendar.GridBody>
+			</Calendar.Grid>
+		{/each}
+	</Calendar.Months>
+</CalendarPrimitive.Root>
diff --git a/web/src/lib/components/ui/calendar/index.ts b/web/src/lib/components/ui/calendar/index.ts
new file mode 100644
index 0000000..ab257ab
--- /dev/null
+++ b/web/src/lib/components/ui/calendar/index.ts
@@ -0,0 +1,30 @@
+import Root from "./calendar.svelte";
+import Cell from "./calendar-cell.svelte";
+import Day from "./calendar-day.svelte";
+import Grid from "./calendar-grid.svelte";
+import Header from "./calendar-header.svelte";
+import Months from "./calendar-months.svelte";
+import GridRow from "./calendar-grid-row.svelte";
+import Heading from "./calendar-heading.svelte";
+import GridBody from "./calendar-grid-body.svelte";
+import GridHead from "./calendar-grid-head.svelte";
+import HeadCell from "./calendar-head-cell.svelte";
+import NextButton from "./calendar-next-button.svelte";
+import PrevButton from "./calendar-prev-button.svelte";
+
+export {
+	Day,
+	Cell,
+	Grid,
+	Header,
+	Months,
+	GridRow,
+	Heading,
+	GridBody,
+	GridHead,
+	HeadCell,
+	NextButton,
+	PrevButton,
+	//
+	Root as Calendar,
+};
diff --git a/web/src/lib/components/ui/date-range-picker.svelte b/web/src/lib/components/ui/date-range-picker.svelte
new file mode 100644
index 0000000..5297441
--- /dev/null
+++ b/web/src/lib/components/ui/date-range-picker.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+    import { Calendar } from "lucide-svelte";
+    import type { DateRange } from "bits-ui";
+    import {
+      CalendarDate,
+      DateFormatter,
+      type DateValue,
+      getLocalTimeZone
+    } from "@internationalized/date";
+    import { cn } from "$lib/utils.js";
+    import { Button } from "$lib/components/ui/button/index.js";
+    import { RangeCalendar } from "$lib/components/ui/range-calendar/index.js";
+    import * as Popover from "$lib/components/ui/popover/index.js";
+   
+    const df = new DateFormatter("en-US", {
+      dateStyle: "medium"
+    });
+   
+    let value: DateRange | undefined = {
+      start: new CalendarDate(2022, 1, 20),
+      end: new CalendarDate(2022, 1, 20).add({ days: 20 })
+    };
+   
+    let startValue: DateValue | undefined = undefined;
+  </script>
+   
+  <div class="grid gap-2">
+    <Popover.Root openFocus>
+      <Popover.Trigger asChild let:builder>
+        <Button
+          variant="outline"
+          class={cn(
+            "w-[300px] justify-start text-left font-normal",
+            !value && "text-muted-foreground"
+          )}
+          builders={[builder]}
+        >
+          <Calendar class="mr-2 h-4 w-4" />
+          {#if value && value.start}
+            {#if value.end}
+              {df.format(value.start.toDate(getLocalTimeZone()))} - {df.format(
+                value.end.toDate(getLocalTimeZone())
+              )}
+            {:else}
+              {df.format(value.start.toDate(getLocalTimeZone()))}
+            {/if}
+          {:else if startValue}
+            {df.format(startValue.toDate(getLocalTimeZone()))}
+          {:else}
+            Pick a date
+          {/if}
+        </Button>
+      </Popover.Trigger>
+      <Popover.Content class="w-auto p-0" align="start">
+        <RangeCalendar
+          bind:value
+          bind:startValue
+          initialFocus
+          numberOfMonths={2}
+          placeholder={value?.start}
+        />
+      </Popover.Content>
+    </Popover.Root>
+  </div>
\ No newline at end of file
diff --git a/web/src/lib/components/ui/input/index.ts b/web/src/lib/components/ui/input/index.ts
new file mode 100644
index 0000000..75e3bc2
--- /dev/null
+++ b/web/src/lib/components/ui/input/index.ts
@@ -0,0 +1,29 @@
+import Root from "./input.svelte";
+
+export type FormInputEvent<T extends Event = Event> = T & {
+	currentTarget: EventTarget & HTMLInputElement;
+};
+export type InputEvents = {
+	blur: FormInputEvent<FocusEvent>;
+	change: FormInputEvent<Event>;
+	click: FormInputEvent<MouseEvent>;
+	focus: FormInputEvent<FocusEvent>;
+	focusin: FormInputEvent<FocusEvent>;
+	focusout: FormInputEvent<FocusEvent>;
+	keydown: FormInputEvent<KeyboardEvent>;
+	keypress: FormInputEvent<KeyboardEvent>;
+	keyup: FormInputEvent<KeyboardEvent>;
+	mouseover: FormInputEvent<MouseEvent>;
+	mouseenter: FormInputEvent<MouseEvent>;
+	mouseleave: FormInputEvent<MouseEvent>;
+	mousemove: FormInputEvent<MouseEvent>;
+	paste: FormInputEvent<ClipboardEvent>;
+	input: FormInputEvent<InputEvent>;
+	wheel: FormInputEvent<WheelEvent>;
+};
+
+export {
+	Root,
+	//
+	Root as Input,
+};
diff --git a/web/src/lib/components/ui/input/input.svelte b/web/src/lib/components/ui/input/input.svelte
new file mode 100644
index 0000000..cab1457
--- /dev/null
+++ b/web/src/lib/components/ui/input/input.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from "svelte/elements";
+	import type { InputEvents } from "./index.js";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLInputAttributes;
+	type $$Events = InputEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let value: $$Props["value"] = undefined;
+	export { className as class };
+
+	// Workaround for https://github.com/sveltejs/svelte/issues/9305
+	// Fixed in Svelte 5, but not backported to 4.x.
+	export let readonly: $$Props["readonly"] = undefined;
+</script>
+
+<input
+	class={cn(
+		"border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+		className
+	)}
+	bind:value
+	{readonly}
+	on:blur
+	on:change
+	on:click
+	on:focus
+	on:focusin
+	on:focusout
+	on:keydown
+	on:keypress
+	on:keyup
+	on:mouseover
+	on:mouseenter
+	on:mouseleave
+	on:mousemove
+	on:paste
+	on:input
+	on:wheel|passive
+	{...$$restProps}
+/>
diff --git a/web/src/lib/components/ui/popover/index.ts b/web/src/lib/components/ui/popover/index.ts
new file mode 100644
index 0000000..63aecf9
--- /dev/null
+++ b/web/src/lib/components/ui/popover/index.ts
@@ -0,0 +1,17 @@
+import { Popover as PopoverPrimitive } from "bits-ui";
+import Content from "./popover-content.svelte";
+const Root = PopoverPrimitive.Root;
+const Trigger = PopoverPrimitive.Trigger;
+const Close = PopoverPrimitive.Close;
+
+export {
+	Root,
+	Content,
+	Trigger,
+	Close,
+	//
+	Root as Popover,
+	Content as PopoverContent,
+	Trigger as PopoverTrigger,
+	Close as PopoverClose,
+};
diff --git a/web/src/lib/components/ui/popover/popover-content.svelte b/web/src/lib/components/ui/popover/popover-content.svelte
new file mode 100644
index 0000000..1d86206
--- /dev/null
+++ b/web/src/lib/components/ui/popover/popover-content.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { Popover as PopoverPrimitive } from "bits-ui";
+	import { cn, flyAndScale } from "$lib/utils.js";
+
+	type $$Props = PopoverPrimitive.ContentProps;
+	let className: $$Props["class"] = undefined;
+	export let transition: $$Props["transition"] = flyAndScale;
+	export let transitionConfig: $$Props["transitionConfig"] = undefined;
+	export { className as class };
+</script>
+
+<PopoverPrimitive.Content
+	{transition}
+	{transitionConfig}
+	class={cn(
+		"bg-popover text-popover-foreground z-50 w-72 rounded-md border p-4 shadow-md outline-none",
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+</PopoverPrimitive.Content>
diff --git a/web/src/lib/components/ui/range-calendar/index.ts b/web/src/lib/components/ui/range-calendar/index.ts
new file mode 100644
index 0000000..43adb92
--- /dev/null
+++ b/web/src/lib/components/ui/range-calendar/index.ts
@@ -0,0 +1,30 @@
+import Root from "./range-calendar.svelte";
+import Cell from "./range-calendar-cell.svelte";
+import Day from "./range-calendar-day.svelte";
+import Grid from "./range-calendar-grid.svelte";
+import Header from "./range-calendar-header.svelte";
+import Months from "./range-calendar-months.svelte";
+import GridRow from "./range-calendar-grid-row.svelte";
+import Heading from "./range-calendar-heading.svelte";
+import GridBody from "./range-calendar-grid-body.svelte";
+import GridHead from "./range-calendar-grid-head.svelte";
+import HeadCell from "./range-calendar-head-cell.svelte";
+import NextButton from "./range-calendar-next-button.svelte";
+import PrevButton from "./range-calendar-prev-button.svelte";
+
+export {
+	Day,
+	Cell,
+	Grid,
+	Header,
+	Months,
+	GridRow,
+	Heading,
+	GridBody,
+	GridHead,
+	HeadCell,
+	NextButton,
+	PrevButton,
+	//
+	Root as RangeCalendar,
+};
diff --git a/web/src/lib/components/ui/range-calendar/range-calendar-cell.svelte b/web/src/lib/components/ui/range-calendar/range-calendar-cell.svelte
new file mode 100644
index 0000000..5e9d2dd
--- /dev/null
+++ b/web/src/lib/components/ui/range-calendar/range-calendar-cell.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = RangeCalendarPrimitive.CellProps;
+
+	export let date: $$Props["date"];
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<RangeCalendarPrimitive.Cell
+	{date}
+	class={cn(
+		"[&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50 relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 first:[&:has([data-selected])]:rounded-l-md last:[&:has([data-selected])]:rounded-r-md [&:has([data-selected][data-selection-end])]:rounded-r-md [&:has([data-selected][data-selection-start])]:rounded-l-md",
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+</RangeCalendarPrimitive.Cell>
diff --git a/web/src/lib/components/ui/range-calendar/range-calendar-day.svelte b/web/src/lib/components/ui/range-calendar/range-calendar-day.svelte
new file mode 100644
index 0000000..86db6dd
--- /dev/null
+++ b/web/src/lib/components/ui/range-calendar/range-calendar-day.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+	import { buttonVariants } from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = RangeCalendarPrimitive.DayProps;
+	type $$Events = RangeCalendarPrimitive.DayEvents;
+
+	export let date: $$Props["date"];
+	export let month: $$Props["month"];
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<RangeCalendarPrimitive.Day
+	on:click
+	{date}
+	{month}
+	class={cn(
+		buttonVariants({ variant: "ghost" }),
+		"h-9 w-9 p-0 font-normal data-[selected]:opacity-100",
+		"[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground",
+		// Selection Start
+		"data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground data-[selection-start]:hover:bg-primary data-[selection-start]:hover:text-primary-foreground data-[selection-start]:focus:bg-primary data-[selection-start]:focus:text-primary-foreground",
+		// Selection End
+		"data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground data-[selection-end]:hover:bg-primary data-[selection-end]:hover:text-primary-foreground data-[selection-end]:focus:bg-primary data-[selection-end]:focus:text-primary-foreground",
+		// Outside months
+		"data-[outside-month]:text-muted-foreground [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground data-[outside-month]:pointer-events-none data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:opacity-30",
+		// Disabled
+		"data-[disabled]:text-muted-foreground data-[disabled]:opacity-50",
+		// Unavailable
+		"data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through",
+		className
+	)}
+	{...$$restProps}
+	let:disabled
+	let:unavailable
+	let:builder
+>
+	<slot {disabled} {unavailable} {builder}>
+		{date.day}
+	</slot>
+</RangeCalendarPrimitive.Day>
diff --git a/web/src/lib/components/ui/range-calendar/range-calendar-grid-body.svelte b/web/src/lib/components/ui/range-calendar/range-calendar-grid-body.svelte
new file mode 100644
index 0000000..23a5dee
--- /dev/null
+++ b/web/src/lib/components/ui/range-calendar/range-calendar-grid-body.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = RangeCalendarPrimitive.GridBodyProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<RangeCalendarPrimitive.GridBody class={cn(className)} {...$$restProps}>
+	<slot />
+</RangeCalendarPrimitive.GridBody>
diff --git a/web/src/lib/components/ui/range-calendar/range-calendar-grid-head.svelte b/web/src/lib/components/ui/range-calendar/range-calendar-grid-head.svelte
new file mode 100644
index 0000000..23dbefe
--- /dev/null
+++ b/web/src/lib/components/ui/range-calendar/range-calendar-grid-head.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = RangeCalendarPrimitive.GridHeadProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<RangeCalendarPrimitive.GridHead class={cn(className)} {...$$restProps}>
+	<slot />
+</RangeCalendarPrimitive.GridHead>
diff --git a/web/src/lib/components/ui/range-calendar/range-calendar-grid-row.svelte b/web/src/lib/components/ui/range-calendar/range-calendar-grid-row.svelte
new file mode 100644
index 0000000..157c7ea
--- /dev/null
+++ b/web/src/lib/components/ui/range-calendar/range-calendar-grid-row.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = RangeCalendarPrimitive.GridRowProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<RangeCalendarPrimitive.GridRow class={cn("flex", className)} {...$$restProps}>
+	<slot />
+</RangeCalendarPrimitive.GridRow>
diff --git a/web/src/lib/components/ui/range-calendar/range-calendar-grid.svelte b/web/src/lib/components/ui/range-calendar/range-calendar-grid.svelte
new file mode 100644
index 0000000..c5050ba
--- /dev/null
+++ b/web/src/lib/components/ui/range-calendar/range-calendar-grid.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = RangeCalendarPrimitive.GridProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<RangeCalendarPrimitive.Grid
+	class={cn("w-full border-collapse space-y-1", className)}
+	{...$$restProps}
+>
+	<slot />
+</RangeCalendarPrimitive.Grid>
diff --git a/web/src/lib/components/ui/range-calendar/range-calendar-head-cell.svelte b/web/src/lib/components/ui/range-calendar/range-calendar-head-cell.svelte
new file mode 100644
index 0000000..0806c60
--- /dev/null
+++ b/web/src/lib/components/ui/range-calendar/range-calendar-head-cell.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = RangeCalendarPrimitive.HeadCellProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<RangeCalendarPrimitive.HeadCell
+	class={cn("text-muted-foreground w-9 rounded-md text-[0.8rem] font-normal", className)}
+	{...$$restProps}
+>
+	<slot />
+</RangeCalendarPrimitive.HeadCell>
diff --git a/web/src/lib/components/ui/range-calendar/range-calendar-header.svelte b/web/src/lib/components/ui/range-calendar/range-calendar-header.svelte
new file mode 100644
index 0000000..3949ecd
--- /dev/null
+++ b/web/src/lib/components/ui/range-calendar/range-calendar-header.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = RangeCalendarPrimitive.HeaderProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<RangeCalendarPrimitive.Header
+	class={cn("relative flex w-full items-center justify-between pt-1", className)}
+	{...$$restProps}
+>
+	<slot />
+</RangeCalendarPrimitive.Header>
diff --git a/web/src/lib/components/ui/range-calendar/range-calendar-heading.svelte b/web/src/lib/components/ui/range-calendar/range-calendar-heading.svelte
new file mode 100644
index 0000000..f022eeb
--- /dev/null
+++ b/web/src/lib/components/ui/range-calendar/range-calendar-heading.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = RangeCalendarPrimitive.HeadingProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<RangeCalendarPrimitive.Heading
+	let:headingValue
+	class={cn("text-sm font-medium", className)}
+	{...$$restProps}
+>
+	<slot {headingValue}>
+		{headingValue}
+	</slot>
+</RangeCalendarPrimitive.Heading>
diff --git a/web/src/lib/components/ui/range-calendar/range-calendar-months.svelte b/web/src/lib/components/ui/range-calendar/range-calendar-months.svelte
new file mode 100644
index 0000000..4621c54
--- /dev/null
+++ b/web/src/lib/components/ui/range-calendar/range-calendar-months.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div
+	class={cn("mt-4 flex flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0", className)}
+	{...$$restProps}
+>
+	<slot />
+</div>
diff --git a/web/src/lib/components/ui/range-calendar/range-calendar-next-button.svelte b/web/src/lib/components/ui/range-calendar/range-calendar-next-button.svelte
new file mode 100644
index 0000000..661568b
--- /dev/null
+++ b/web/src/lib/components/ui/range-calendar/range-calendar-next-button.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+	import ChevronRight from "lucide-svelte/icons/chevron-right";
+	import { buttonVariants } from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = RangeCalendarPrimitive.NextButtonProps;
+	type $$Events = RangeCalendarPrimitive.NextButtonEvents;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<RangeCalendarPrimitive.NextButton
+	on:click
+	class={cn(
+		buttonVariants({ variant: "outline" }),
+		"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+		className
+	)}
+	{...$$restProps}
+	let:builder
+>
+	<slot {builder}>
+		<ChevronRight class="h-4 w-4" />
+	</slot>
+</RangeCalendarPrimitive.NextButton>
diff --git a/web/src/lib/components/ui/range-calendar/range-calendar-prev-button.svelte b/web/src/lib/components/ui/range-calendar/range-calendar-prev-button.svelte
new file mode 100644
index 0000000..f7c1383
--- /dev/null
+++ b/web/src/lib/components/ui/range-calendar/range-calendar-prev-button.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+	import ChevronLeft from "lucide-svelte/icons/chevron-left";
+	import { buttonVariants } from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = RangeCalendarPrimitive.PrevButtonProps;
+	type $$Events = RangeCalendarPrimitive.PrevButtonEvents;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<RangeCalendarPrimitive.PrevButton
+	on:click
+	class={cn(
+		buttonVariants({ variant: "outline" }),
+		"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+		className
+	)}
+	{...$$restProps}
+	let:builder
+>
+	<slot {builder}>
+		<ChevronLeft class="h-4 w-4" />
+	</slot>
+</RangeCalendarPrimitive.PrevButton>
diff --git a/web/src/lib/components/ui/range-calendar/range-calendar.svelte b/web/src/lib/components/ui/range-calendar/range-calendar.svelte
new file mode 100644
index 0000000..d20ba67
--- /dev/null
+++ b/web/src/lib/components/ui/range-calendar/range-calendar.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+	import * as RangeCalendar from "./index.js";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = RangeCalendarPrimitive.Props;
+	type $$Events = RangeCalendarPrimitive.Events;
+
+	export let value: $$Props["value"] = undefined;
+	export let placeholder: $$Props["placeholder"] = undefined;
+	export let weekdayFormat: $$Props["weekdayFormat"] = "short";
+	export let startValue: $$Props["startValue"] = undefined;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<RangeCalendarPrimitive.Root
+	on:keydown
+	bind:value
+	bind:placeholder
+	bind:startValue
+	{weekdayFormat}
+	class={cn("p-3", className)}
+	{...$$restProps}
+	let:months
+	let:weekdays
+>
+	<RangeCalendar.Header>
+		<RangeCalendar.PrevButton />
+		<RangeCalendar.Heading />
+		<RangeCalendar.NextButton />
+	</RangeCalendar.Header>
+	<RangeCalendar.Months>
+		{#each months as month}
+			<RangeCalendar.Grid>
+				<RangeCalendar.GridHead>
+					<RangeCalendar.GridRow class="flex">
+						{#each weekdays as weekday}
+							<RangeCalendar.HeadCell>
+								{weekday.slice(0, 2)}
+							</RangeCalendar.HeadCell>
+						{/each}
+					</RangeCalendar.GridRow>
+				</RangeCalendar.GridHead>
+				<RangeCalendar.GridBody>
+					{#each month.weeks as weekDates}
+						<RangeCalendar.GridRow class="mt-2 w-full">
+							{#each weekDates as date}
+								<RangeCalendar.Cell {date}>
+									<RangeCalendar.Day {date} month={month.value} />
+								</RangeCalendar.Cell>
+							{/each}
+						</RangeCalendar.GridRow>
+					{/each}
+				</RangeCalendar.GridBody>
+			</RangeCalendar.Grid>
+		{/each}
+	</RangeCalendar.Months>
+</RangeCalendarPrimitive.Root>
diff --git a/web/src/lib/components/ui/scroll-area/index.ts b/web/src/lib/components/ui/scroll-area/index.ts
new file mode 100644
index 0000000..e86a25b
--- /dev/null
+++ b/web/src/lib/components/ui/scroll-area/index.ts
@@ -0,0 +1,10 @@
+import Scrollbar from "./scroll-area-scrollbar.svelte";
+import Root from "./scroll-area.svelte";
+
+export {
+	Root,
+	Scrollbar,
+	//,
+	Root as ScrollArea,
+	Scrollbar as ScrollAreaScrollbar,
+};
diff --git a/web/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte b/web/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte
new file mode 100644
index 0000000..71b3328
--- /dev/null
+++ b/web/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { ScrollArea as ScrollAreaPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = ScrollAreaPrimitive.ScrollbarProps & {
+		orientation?: "vertical" | "horizontal";
+	};
+
+	let className: $$Props["class"] = undefined;
+	export let orientation: $$Props["orientation"] = "vertical";
+	export { className as class };
+</script>
+
+<ScrollAreaPrimitive.Scrollbar
+	{orientation}
+	class={cn(
+		"flex touch-none select-none transition-colors",
+		orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-px",
+		orientation === "horizontal" && "h-2.5 w-full border-t border-t-transparent p-px",
+		className
+	)}
+>
+	<slot />
+	<ScrollAreaPrimitive.Thumb
+		class={cn("bg-border relative rounded-full", orientation === "vertical" && "flex-1")}
+	/>
+</ScrollAreaPrimitive.Scrollbar>
diff --git a/web/src/lib/components/ui/scroll-area/scroll-area.svelte b/web/src/lib/components/ui/scroll-area/scroll-area.svelte
new file mode 100644
index 0000000..e8e368c
--- /dev/null
+++ b/web/src/lib/components/ui/scroll-area/scroll-area.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { ScrollArea as ScrollAreaPrimitive } from "bits-ui";
+	import { Scrollbar } from "./index.js";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = ScrollAreaPrimitive.Props & {
+		orientation?: "vertical" | "horizontal" | "both";
+		scrollbarXClasses?: string;
+		scrollbarYClasses?: string;
+	};
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+	export let orientation = "vertical";
+	export let scrollbarXClasses: string = "";
+	export let scrollbarYClasses: string = "";
+</script>
+
+<ScrollAreaPrimitive.Root {...$$restProps} class={cn("relative overflow-hidden", className)}>
+	<ScrollAreaPrimitive.Viewport class="h-full w-full rounded-[inherit]">
+		<ScrollAreaPrimitive.Content>
+			<slot />
+		</ScrollAreaPrimitive.Content>
+	</ScrollAreaPrimitive.Viewport>
+	{#if orientation === "vertical" || orientation === "both"}
+		<Scrollbar orientation="vertical" class={scrollbarYClasses} />
+	{/if}
+	{#if orientation === "horizontal" || orientation === "both"}
+		<Scrollbar orientation="horizontal" class={scrollbarXClasses} />
+	{/if}
+	<ScrollAreaPrimitive.Corner />
+</ScrollAreaPrimitive.Root>
diff --git a/web/src/lib/components/ui/sonner/index.ts b/web/src/lib/components/ui/sonner/index.ts
new file mode 100644
index 0000000..1ad9f4a
--- /dev/null
+++ b/web/src/lib/components/ui/sonner/index.ts
@@ -0,0 +1 @@
+export { default as Toaster } from "./sonner.svelte";
diff --git a/web/src/lib/components/ui/sonner/sonner.svelte b/web/src/lib/components/ui/sonner/sonner.svelte
new file mode 100644
index 0000000..7d5b2f1
--- /dev/null
+++ b/web/src/lib/components/ui/sonner/sonner.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Toaster as Sonner, type ToasterProps as SonnerProps } from "svelte-sonner";
+	import { mode } from "mode-watcher";
+
+	type $$Props = SonnerProps;
+</script>
+
+<Sonner
+	theme={$mode}
+	class="toaster group"
+	toastOptions={{
+		classes: {
+			toast: "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+			description: "group-[.toast]:text-muted-foreground",
+			actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+			cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+		},
+	}}
+	{...$$restProps}
+/>
diff --git a/web/src/lib/utils.ts b/web/src/lib/utils.ts
new file mode 100644
index 0000000..8871245
--- /dev/null
+++ b/web/src/lib/utils.ts
@@ -0,0 +1,62 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+import { cubicOut } from "svelte/easing";
+import type { TransitionConfig } from "svelte/transition";
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs));
+}
+
+type FlyAndScaleParams = {
+	y?: number;
+	x?: number;
+	start?: number;
+	duration?: number;
+};
+
+export const flyAndScale = (
+	node: Element,
+	params: FlyAndScaleParams = { y: -8, x: 0, start: 0.95, duration: 150 }
+): TransitionConfig => {
+	const style = getComputedStyle(node);
+	const transform = style.transform === "none" ? "" : style.transform;
+
+	const scaleConversion = (
+		valueA: number,
+		scaleA: [number, number],
+		scaleB: [number, number]
+	) => {
+		const [minA, maxA] = scaleA;
+		const [minB, maxB] = scaleB;
+
+		const percentage = (valueA - minA) / (maxA - minA);
+		const valueB = percentage * (maxB - minB) + minB;
+
+		return valueB;
+	};
+
+	const styleToString = (
+		style: Record<string, number | string | undefined>
+	): string => {
+		return Object.keys(style).reduce((str, key) => {
+			if (style[key] === undefined) return str;
+			return str + `${key}:${style[key]};`;
+		}, "");
+	};
+
+	return {
+		duration: params.duration ?? 200,
+		delay: 0,
+		css: (t) => {
+			const y = scaleConversion(t, [0, 1], [params.y ?? 5, 0]);
+			const x = scaleConversion(t, [0, 1], [params.x ?? 0, 0]);
+			const scale = scaleConversion(t, [0, 1], [params.start ?? 0.95, 1]);
+
+			return styleToString({
+				transform: `${transform} translate3d(${x}px, ${y}px, 0) scale(${scale})`,
+				opacity: t
+			});
+		},
+		easing: cubicOut
+	};
+};
\ No newline at end of file
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index 2e511e0..79a566d 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -1,5 +1,8 @@
-<script>
+<script lang="ts">
 	import '../app.css';
+	import { Toaster } from "$lib/components/ui/sonner";
 </script>
 
+<Toaster />
+
 <slot />
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index 816364e..a6f1944 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -1,5 +1,6 @@
 <script>
 	import Figure from '$lib/Figure.svelte';
+	import { Input } from "$lib/components/ui/input";
 	import { PUBLIC_API_ENDPOINT } from '$env/static/public';
 
 	let searchString = '';
@@ -11,6 +12,8 @@
 	let debounceTimer;
 	let showModal = false;
 	let selectedImage = 0;
+	let datetimeFilterStart = '';
+	let datetimeFilterEnd = '';
 
 	const debounceDelay = 300;
 	const apiEndpoint =
@@ -101,9 +104,9 @@
 <svelte:window on:keydown={handleKeydown} />
 
 <div class="container mx-auto my-10">
-	<input
+	<Input
 		type="text"
-		class="input input-bordered w-full my-4 p-2 text-lg border border-gray-500"
+		class="w-full my-4 p-2 text-lg border-gray-500"
 		bind:value={searchString}
 		placeholder="Type to search..."
 	/>
@@ -166,4 +169,4 @@
 			<a href="/changelog">Changelog</a>
 		</div>
 	</div>
-</footer>
+</footer>
\ No newline at end of file
diff --git a/web/svelte.config.js b/web/svelte.config.js
index ce13fb8..9f78c54 100644
--- a/web/svelte.config.js
+++ b/web/svelte.config.js
@@ -1,7 +1,9 @@
 import adapter from '@sveltejs/adapter-static';
+import { vitePreprocess } from '@sveltejs/kit/vite';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
+	preprocess: vitePreprocess(),
 	kit: {
 		adapter: adapter({
 			pages: '../memos/static',
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index 8e2282b..d6ac402 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -1,10 +1,67 @@
+import { fontFamily } from "tailwindcss/defaultTheme";
+
 /** @type {import('tailwindcss').Config} */
-export default {
-  content: ['./src/**/*.{html,js,svelte,ts}'],
-  theme: {
-    extend: {},
-  },
-  plugins: [
-    require('@tailwindcss/typography'),
-  ],
-}
\ No newline at end of file
+const config = {
+	darkMode: ["class"],
+	content: ["./src/**/*.{html,js,svelte,ts}"],
+	safelist: ["dark"],
+	plugins: [
+	    require('@tailwindcss/typography'),
+	],
+	theme: {
+		container: {
+			center: true,
+			padding: "2rem",
+			screens: {
+				"2xl": "1400px"
+			}
+		},
+		extend: {
+			colors: {
+				border: "hsl(var(--border) / <alpha-value>)",
+				input: "hsl(var(--input) / <alpha-value>)",
+				ring: "hsl(var(--ring) / <alpha-value>)",
+				background: "hsl(var(--background) / <alpha-value>)",
+				foreground: "hsl(var(--foreground) / <alpha-value>)",
+				primary: {
+					DEFAULT: "hsl(var(--primary) / <alpha-value>)",
+					foreground: "hsl(var(--primary-foreground) / <alpha-value>)"
+				},
+				secondary: {
+					DEFAULT: "hsl(var(--secondary) / <alpha-value>)",
+					foreground: "hsl(var(--secondary-foreground) / <alpha-value>)"
+				},
+				destructive: {
+					DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
+					foreground: "hsl(var(--destructive-foreground) / <alpha-value>)"
+				},
+				muted: {
+					DEFAULT: "hsl(var(--muted) / <alpha-value>)",
+					foreground: "hsl(var(--muted-foreground) / <alpha-value>)"
+				},
+				accent: {
+					DEFAULT: "hsl(var(--accent) / <alpha-value>)",
+					foreground: "hsl(var(--accent-foreground) / <alpha-value>)"
+				},
+				popover: {
+					DEFAULT: "hsl(var(--popover) / <alpha-value>)",
+					foreground: "hsl(var(--popover-foreground) / <alpha-value>)"
+				},
+				card: {
+					DEFAULT: "hsl(var(--card) / <alpha-value>)",
+					foreground: "hsl(var(--card-foreground) / <alpha-value>)"
+				}
+			},
+			borderRadius: {
+				lg: "var(--radius)",
+				md: "calc(var(--radius) - 2px)",
+				sm: "calc(var(--radius) - 4px)"
+			},
+			fontFamily: {
+				sans: [...fontFamily.sans]
+			}
+		}
+	},
+};
+
+export default config;