diff --git a/package.json b/package.json
index 5e94a5b..65b9fbb 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "nuxt-app",
   "private": true,
   "type": "module",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev",
@@ -14,6 +14,7 @@
     "generate:future:sql": "drizzle-kit export --sql | sed 's/CREATE TABLE/CREATE TABLE IF NOT EXISTS/g; s/CREATE INDEX/CREATE INDEX IF NOT EXISTS/g' > dbschema.sql; sed -i '1s/^/PRAGMA journal_mode = WAL; PRAGMA synchronous = normal; PRAGMA journal_size_limit = 6144000;\\n/' dbschema.sql"
   },
   "dependencies": {
+    "@internationalized/date": "^3.8.0",
     "@tailwindcss/vite": "^4.1.3",
     "@tanstack/vue-table": "^8.21.2",
     "@vueuse/core": "^12.8.2",
@@ -33,7 +34,7 @@
     "vue": "^3.5.13",
     "vue-router": "^4.5.0",
     "vue-sonner": "^1.3.0",
-    "zod": "^3.24.2"
+    "zod": "^3.24.3"
   },
   "packageManager": "pnpm@8.7.6+sha1.a428b12202bc4f23b17e6dffe730734dae5728e2",
   "devDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 382ab7a..6781a78 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -5,9 +5,12 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
+  '@internationalized/date':
+    specifier: ^3.8.0
+    version: 3.8.0
   '@tailwindcss/vite':
     specifier: ^4.1.3
-    version: 4.1.3(vite@6.2.5)
+    version: 4.1.3(vite@6.3.2)
   '@tanstack/vue-table':
     specifier: ^8.21.2
     version: 8.21.2(vue@3.5.13)
@@ -40,7 +43,7 @@ dependencies:
     version: 0.487.0(vue@3.5.13)
   nuxt:
     specifier: ^3.16.2
-    version: 3.16.2(better-sqlite3@11.9.1)(drizzle-orm@0.41.0)(typescript@5.8.3)(vite@6.2.5)
+    version: 3.16.2(better-sqlite3@11.9.1)(drizzle-orm@0.41.0)(typescript@5.8.3)(vite@6.3.2)
   reka-ui:
     specifier: ^2.2.0
     version: 2.2.0(typescript@5.8.3)(vue@3.5.13)
@@ -63,8 +66,8 @@ dependencies:
     specifier: ^1.3.0
     version: 1.3.0
   zod:
-    specifier: ^3.24.2
-    version: 3.24.2
+    specifier: ^3.24.3
+    version: 3.24.3
 
 devDependencies:
   '@iconify-json/radix-icons':
@@ -356,25 +359,25 @@ packages:
     resolution: {integrity: sha512-z33Il7l5dKjUgGULTqBsQBQwckHh5AbIuxhdsIxDDiZAzBOrZO6q9ogcWC65kU382AfynTfgNumVcNIjuIua6w==}
     dev: true
 
-  /@emnapi/core@1.4.0:
-    resolution: {integrity: sha512-H+N/FqT07NmLmt6OFFtDfwe8PNygprzBikrEMyQfgqSmT0vzE515Pz7R8izwB9q/zsH/MA64AKoul3sA6/CzVg==}
+  /@emnapi/core@1.4.3:
+    resolution: {integrity: sha512-4m62DuCE07lw01soJwPiBGC0nAww0Q+RY70VZ+n49yDIO13yyinhbWCeNnaob0lakDtWQzSdtNWzJeOJt2ma+g==}
     requiresBuild: true
     dependencies:
-      '@emnapi/wasi-threads': 1.0.1
+      '@emnapi/wasi-threads': 1.0.2
       tslib: 2.8.1
     dev: false
     optional: true
 
-  /@emnapi/runtime@1.4.0:
-    resolution: {integrity: sha512-64WYIf4UYcdLnbKn/umDlNjQDSS8AgZrI/R9+x5ilkUVFxXcA1Ebl+gQLc/6mERA4407Xof0R7wEyEuj091CVw==}
+  /@emnapi/runtime@1.4.3:
+    resolution: {integrity: sha512-pBPWdu6MLKROBX05wSNKcNb++m5Er+KQ9QkB+WVM+pW2Kx9hoSrVTnu3BdkI5eBLZoKu/J6mW/B6i6bJB2ytXQ==}
     requiresBuild: true
     dependencies:
       tslib: 2.8.1
     dev: false
     optional: true
 
-  /@emnapi/wasi-threads@1.0.1:
-    resolution: {integrity: sha512-iIBu7mwkq4UQGeMEM8bLwNK962nXdhodeScX4slfQnRhEMMzvYivHhutCIk8uojvmASXXPC2WNEjwxFWk72Oqw==}
+  /@emnapi/wasi-threads@1.0.2:
+    resolution: {integrity: sha512-5n3nTJblwRi8LlXkJ9eBzu+kZR8Yxcc7ubakyQTFzPMtIhFpUBRbsnc2Dv88IZDIbCDlBiWrknhB4Lsz7mg6BA==}
     requiresBuild: true
     dependencies:
       tslib: 2.8.1
@@ -1074,8 +1077,8 @@ packages:
       vue: 3.5.13(typescript@5.8.3)
     dev: true
 
-  /@internationalized/date@3.7.0:
-    resolution: {integrity: sha512-VJ5WS3fcVx0bejE/YHfbDKR/yawZgKqn/if+oEeLqNwBtPzVB06olkfcnojTmEMX+gTpH+FlQ69SHNitJ8/erQ==}
+  /@internationalized/date@3.8.0:
+    resolution: {integrity: sha512-J51AJ0fEL68hE4CwGPa6E0PO6JDaVLd8aln48xFCSy7CZkZc96dGEGmLs2OEEbBxcsVZtfrqkXJwI2/MSG8yKw==}
     dependencies:
       '@swc/helpers': 0.5.15
     dev: false
@@ -1174,12 +1177,12 @@ packages:
       - supports-color
     dev: false
 
-  /@napi-rs/wasm-runtime@0.2.8:
-    resolution: {integrity: sha512-OBlgKdX7gin7OIq4fadsjpg+cp2ZphvAIKucHsNfTdJiqdOmOEwQd/bHi0VwNrcw5xpBJyUw6cK/QilCqy1BSg==}
+  /@napi-rs/wasm-runtime@0.2.9:
+    resolution: {integrity: sha512-OKRBiajrrxB9ATokgEQoG87Z25c67pCpYcCwmXYX8PBftC9pBfN18gnm/fh1wurSLEKIAt+QRFLFCQISrb66Jg==}
     requiresBuild: true
     dependencies:
-      '@emnapi/core': 1.4.0
-      '@emnapi/runtime': 1.4.0
+      '@emnapi/core': 1.4.3
+      '@emnapi/runtime': 1.4.3
       '@tybys/wasm-util': 0.9.0
     dev: false
     optional: true
@@ -1254,7 +1257,7 @@ packages:
     resolution: {integrity: sha512-GBzP8zOc7CGWyFQS6dv1lQz8VVpz5C2yRszbXufwG/9zhStTIH50EtD87NmWbTMwXDvZLNg8GIpb1UFdH93JCA==}
     dev: false
 
-  /@nuxt/devtools-kit@2.3.2(magicast@0.3.5)(vite@6.2.5):
+  /@nuxt/devtools-kit@2.3.2(magicast@0.3.5)(vite@6.3.2):
     resolution: {integrity: sha512-K0citnz9bSecPCLl4jGfE5I5St+E9XtDmOvYqq3ranGZGZ2Mvs5RwgUkaOrn4rulvUmBGBl7Exwh5YX9PONrEQ==}
     peerDependencies:
       vite: '>=6.0'
@@ -1262,7 +1265,7 @@ packages:
       '@nuxt/kit': 3.16.2(magicast@0.3.5)
       '@nuxt/schema': 3.16.2
       execa: 8.0.1
-      vite: 6.2.5(jiti@2.4.2)
+      vite: 6.3.2
     transitivePeerDependencies:
       - magicast
     dev: false
@@ -1281,16 +1284,16 @@ packages:
       semver: 7.7.1
     dev: false
 
-  /@nuxt/devtools@2.3.2(vite@6.2.5)(vue@3.5.13):
+  /@nuxt/devtools@2.3.2(vite@6.3.2)(vue@3.5.13):
     resolution: {integrity: sha512-MMx7pUW0aPDRmhe3jy91srEiFWq/Q70rjbGoHhzpVosuvyvy/fi0oKOFQqN5V4V7jJLiEx4HAoD0QdqP0I6xBA==}
     hasBin: true
     peerDependencies:
       vite: '>=6.0'
     dependencies:
-      '@nuxt/devtools-kit': 2.3.2(magicast@0.3.5)(vite@6.2.5)
+      '@nuxt/devtools-kit': 2.3.2(magicast@0.3.5)(vite@6.3.2)
       '@nuxt/devtools-wizard': 2.3.2
       '@nuxt/kit': 3.16.2(magicast@0.3.5)
-      '@vue/devtools-core': 7.7.2(vite@6.2.5)(vue@3.5.13)
+      '@vue/devtools-core': 7.7.2(vite@6.3.2)(vue@3.5.13)
       '@vue/devtools-kit': 7.7.2
       birpc: 2.3.0
       consola: 3.4.2
@@ -1315,9 +1318,9 @@ packages:
       sirv: 3.0.1
       structured-clone-es: 1.0.0
       tinyglobby: 0.2.12
-      vite: 6.2.5(jiti@2.4.2)
-      vite-plugin-inspect: 11.0.0(@nuxt/kit@3.16.2)(vite@6.2.5)
-      vite-plugin-vue-tracer: 0.1.3(vite@6.2.5)(vue@3.5.13)
+      vite: 6.3.2
+      vite-plugin-inspect: 11.0.0(@nuxt/kit@3.16.2)(vite@6.3.2)
+      vite-plugin-vue-tracer: 0.1.3(vite@6.3.2)(vue@3.5.13)
       which: 5.0.0
       ws: 8.18.1
     transitivePeerDependencies:
@@ -1523,7 +1526,7 @@ packages:
     cpu: [wasm32]
     requiresBuild: true
     dependencies:
-      '@napi-rs/wasm-runtime': 0.2.8
+      '@napi-rs/wasm-runtime': 0.2.9
     dev: false
     optional: true
 
@@ -1879,6 +1882,14 @@ packages:
     dev: false
     optional: true
 
+  /@rollup/rollup-android-arm-eabi@4.40.0:
+    resolution: {integrity: sha512-+Fbls/diZ0RDerhE8kyC6hjADCXA1K4yVNlH0EYfd2XjyH0UGgzaQ8MlT0pCXAThfxv3QUAczHaL+qSv1E4/Cg==}
+    cpu: [arm]
+    os: [android]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@rollup/rollup-android-arm64@4.39.0:
     resolution: {integrity: sha512-It9+M1zE31KWfqh/0cJLrrsCPiF72PoJjIChLX+rEcujVRCb4NLQ5QzFkzIZW8Kn8FTbvGQBY5TkKBau3S8cCQ==}
     cpu: [arm64]
@@ -1887,6 +1898,14 @@ packages:
     dev: false
     optional: true
 
+  /@rollup/rollup-android-arm64@4.40.0:
+    resolution: {integrity: sha512-PPA6aEEsTPRz+/4xxAmaoWDqh67N7wFbgFUJGMnanCFs0TV99M0M8QhhaSCks+n6EbQoFvLQgYOGXxlMGQe/6w==}
+    cpu: [arm64]
+    os: [android]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@rollup/rollup-darwin-arm64@4.39.0:
     resolution: {integrity: sha512-lXQnhpFDOKDXiGxsU9/l8UEGGM65comrQuZ+lDcGUx+9YQ9dKpF3rSEGepyeR5AHZ0b5RgiligsBhWZfSSQh8Q==}
     cpu: [arm64]
@@ -1895,6 +1914,14 @@ packages:
     dev: false
     optional: true
 
+  /@rollup/rollup-darwin-arm64@4.40.0:
+    resolution: {integrity: sha512-GwYOcOakYHdfnjjKwqpTGgn5a6cUX7+Ra2HeNj/GdXvO2VJOOXCiYYlRFU4CubFM67EhbmzLOmACKEfvp3J1kQ==}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@rollup/rollup-darwin-x64@4.39.0:
     resolution: {integrity: sha512-mKXpNZLvtEbgu6WCkNij7CGycdw9cJi2k9v0noMb++Vab12GZjFgUXD69ilAbBh034Zwn95c2PNSz9xM7KYEAQ==}
     cpu: [x64]
@@ -1903,6 +1930,14 @@ packages:
     dev: false
     optional: true
 
+  /@rollup/rollup-darwin-x64@4.40.0:
+    resolution: {integrity: sha512-CoLEGJ+2eheqD9KBSxmma6ld01czS52Iw0e2qMZNpPDlf7Z9mj8xmMemxEucinev4LgHalDPczMyxzbq+Q+EtA==}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@rollup/rollup-freebsd-arm64@4.39.0:
     resolution: {integrity: sha512-jivRRlh2Lod/KvDZx2zUR+I4iBfHcu2V/BA2vasUtdtTN2Uk3jfcZczLa81ESHZHPHy4ih3T/W5rPFZ/hX7RtQ==}
     cpu: [arm64]
@@ -1911,6 +1946,14 @@ packages:
     dev: false
     optional: true
 
+  /@rollup/rollup-freebsd-arm64@4.40.0:
+    resolution: {integrity: sha512-r7yGiS4HN/kibvESzmrOB/PxKMhPTlz+FcGvoUIKYoTyGd5toHp48g1uZy1o1xQvybwwpqpe010JrcGG2s5nkg==}
+    cpu: [arm64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@rollup/rollup-freebsd-x64@4.39.0:
     resolution: {integrity: sha512-8RXIWvYIRK9nO+bhVz8DwLBepcptw633gv/QT4015CpJ0Ht8punmoHU/DuEd3iw9Hr8UwUV+t+VNNuZIWYeY7Q==}
     cpu: [x64]
@@ -1919,6 +1962,14 @@ packages:
     dev: false
     optional: true
 
+  /@rollup/rollup-freebsd-x64@4.40.0:
+    resolution: {integrity: sha512-mVDxzlf0oLzV3oZOr0SMJ0lSDd3xC4CmnWJ8Val8isp9jRGl5Dq//LLDSPFrasS7pSm6m5xAcKaw3sHXhBjoRw==}
+    cpu: [x64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@rollup/rollup-linux-arm-gnueabihf@4.39.0:
     resolution: {integrity: sha512-mz5POx5Zu58f2xAG5RaRRhp3IZDK7zXGk5sdEDj4o96HeaXhlUwmLFzNlc4hCQi5sGdR12VDgEUqVSHer0lI9g==}
     cpu: [arm]
@@ -1927,6 +1978,14 @@ packages:
     dev: false
     optional: true
 
+  /@rollup/rollup-linux-arm-gnueabihf@4.40.0:
+    resolution: {integrity: sha512-y/qUMOpJxBMy8xCXD++jeu8t7kzjlOCkoxxajL58G62PJGBZVl/Gwpm7JK9+YvlB701rcQTzjUZ1JgUoPTnoQA==}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@rollup/rollup-linux-arm-musleabihf@4.39.0:
     resolution: {integrity: sha512-+YDwhM6gUAyakl0CD+bMFpdmwIoRDzZYaTWV3SDRBGkMU/VpIBYXXEvkEcTagw/7VVkL2vA29zU4UVy1mP0/Yw==}
     cpu: [arm]
@@ -1935,6 +1994,14 @@ packages:
     dev: false
     optional: true
 
+  /@rollup/rollup-linux-arm-musleabihf@4.40.0:
+    resolution: {integrity: sha512-GoCsPibtVdJFPv/BOIvBKO/XmwZLwaNWdyD8TKlXuqp0veo2sHE+A/vpMQ5iSArRUz/uaoj4h5S6Pn0+PdhRjg==}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@rollup/rollup-linux-arm64-gnu@4.39.0:
     resolution: {integrity: sha512-EKf7iF7aK36eEChvlgxGnk7pdJfzfQbNvGV/+l98iiMwU23MwvmV0Ty3pJ0p5WQfm3JRHOytSIqD9LB7Bq7xdQ==}
     cpu: [arm64]
@@ -1943,6 +2010,14 @@ packages:
     dev: false
     optional: true
 
+  /@rollup/rollup-linux-arm64-gnu@4.40.0:
+    resolution: {integrity: sha512-L5ZLphTjjAD9leJzSLI7rr8fNqJMlGDKlazW2tX4IUF9P7R5TMQPElpH82Q7eNIDQnQlAyiNVfRPfP2vM5Avvg==}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@rollup/rollup-linux-arm64-musl@4.39.0:
     resolution: {integrity: sha512-vYanR6MtqC7Z2SNr8gzVnzUul09Wi1kZqJaek3KcIlI/wq5Xtq4ZPIZ0Mr/st/sv/NnaPwy/D4yXg5x0B3aUUA==}
     cpu: [arm64]
@@ -1951,6 +2026,14 @@ packages:
     dev: false
     optional: true
 
+  /@rollup/rollup-linux-arm64-musl@4.40.0:
+    resolution: {integrity: sha512-ATZvCRGCDtv1Y4gpDIXsS+wfFeFuLwVxyUBSLawjgXK2tRE6fnsQEkE4csQQYWlBlsFztRzCnBvWVfcae/1qxQ==}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@rollup/rollup-linux-loongarch64-gnu@4.39.0:
     resolution: {integrity: sha512-NMRUT40+h0FBa5fb+cpxtZoGAggRem16ocVKIv5gDB5uLDgBIwrIsXlGqYbLwW8YyO3WVTk1FkFDjMETYlDqiw==}
     cpu: [loong64]
@@ -1959,6 +2042,14 @@ packages:
     dev: false
     optional: true
 
+  /@rollup/rollup-linux-loongarch64-gnu@4.40.0:
+    resolution: {integrity: sha512-wG9e2XtIhd++QugU5MD9i7OnpaVb08ji3P1y/hNbxrQ3sYEelKJOq1UJ5dXczeo6Hj2rfDEL5GdtkMSVLa/AOg==}
+    cpu: [loong64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@rollup/rollup-linux-powerpc64le-gnu@4.39.0:
     resolution: {integrity: sha512-0pCNnmxgduJ3YRt+D+kJ6Ai/r+TaePu9ZLENl+ZDV/CdVczXl95CbIiwwswu4L+K7uOIGf6tMo2vm8uadRaICQ==}
     cpu: [ppc64]
@@ -1967,6 +2058,14 @@ packages:
     dev: false
     optional: true
 
+  /@rollup/rollup-linux-powerpc64le-gnu@4.40.0:
+    resolution: {integrity: sha512-vgXfWmj0f3jAUvC7TZSU/m/cOE558ILWDzS7jBhiCAFpY2WEBn5jqgbqvmzlMjtp8KlLcBlXVD2mkTSEQE6Ixw==}
+    cpu: [ppc64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@rollup/rollup-linux-riscv64-gnu@4.39.0:
     resolution: {integrity: sha512-t7j5Zhr7S4bBtksT73bO6c3Qa2AV/HqiGlj9+KB3gNF5upcVkx+HLgxTm8DK4OkzsOYqbdqbLKwvGMhylJCPhQ==}
     cpu: [riscv64]
@@ -1975,6 +2074,14 @@ packages:
     dev: false
     optional: true
 
+  /@rollup/rollup-linux-riscv64-gnu@4.40.0:
+    resolution: {integrity: sha512-uJkYTugqtPZBS3Z136arevt/FsKTF/J9dEMTX/cwR7lsAW4bShzI2R0pJVw+hcBTWF4dxVckYh72Hk3/hWNKvA==}
+    cpu: [riscv64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@rollup/rollup-linux-riscv64-musl@4.39.0:
     resolution: {integrity: sha512-m6cwI86IvQ7M93MQ2RF5SP8tUjD39Y7rjb1qjHgYh28uAPVU8+k/xYWvxRO3/tBN2pZkSMa5RjnPuUIbrwVxeA==}
     cpu: [riscv64]
@@ -1983,6 +2090,14 @@ packages:
     dev: false
     optional: true
 
+  /@rollup/rollup-linux-riscv64-musl@4.40.0:
+    resolution: {integrity: sha512-rKmSj6EXQRnhSkE22+WvrqOqRtk733x3p5sWpZilhmjnkHkpeCgWsFFo0dGnUGeA+OZjRl3+VYq+HyCOEuwcxQ==}
+    cpu: [riscv64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@rollup/rollup-linux-s390x-gnu@4.39.0:
     resolution: {integrity: sha512-iRDJd2ebMunnk2rsSBYlsptCyuINvxUfGwOUldjv5M4tpa93K8tFMeYGpNk2+Nxl+OBJnBzy2/JCscGeO507kA==}
     cpu: [s390x]
@@ -1991,6 +2106,14 @@ packages:
     dev: false
     optional: true
 
+  /@rollup/rollup-linux-s390x-gnu@4.40.0:
+    resolution: {integrity: sha512-SpnYlAfKPOoVsQqmTFJ0usx0z84bzGOS9anAC0AZ3rdSo3snecihbhFTlJZ8XMwzqAcodjFU4+/SM311dqE5Sw==}
+    cpu: [s390x]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@rollup/rollup-linux-x64-gnu@4.39.0:
     resolution: {integrity: sha512-t9jqYw27R6Lx0XKfEFe5vUeEJ5pF3SGIM6gTfONSMb7DuG6z6wfj2yjcoZxHg129veTqU7+wOhY6GX8wmf90dA==}
     cpu: [x64]
@@ -1999,6 +2122,14 @@ packages:
     dev: false
     optional: true
 
+  /@rollup/rollup-linux-x64-gnu@4.40.0:
+    resolution: {integrity: sha512-RcDGMtqF9EFN8i2RYN2W+64CdHruJ5rPqrlYw+cgM3uOVPSsnAQps7cpjXe9be/yDp8UC7VLoCoKC8J3Kn2FkQ==}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@rollup/rollup-linux-x64-musl@4.39.0:
     resolution: {integrity: sha512-ThFdkrFDP55AIsIZDKSBWEt/JcWlCzydbZHinZ0F/r1h83qbGeenCt/G/wG2O0reuENDD2tawfAj2s8VK7Bugg==}
     cpu: [x64]
@@ -2007,6 +2138,14 @@ packages:
     dev: false
     optional: true
 
+  /@rollup/rollup-linux-x64-musl@4.40.0:
+    resolution: {integrity: sha512-HZvjpiUmSNx5zFgwtQAV1GaGazT2RWvqeDi0hV+AtC8unqqDSsaFjPxfsO6qPtKRRg25SisACWnJ37Yio8ttaw==}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@rollup/rollup-win32-arm64-msvc@4.39.0:
     resolution: {integrity: sha512-jDrLm6yUtbOg2TYB3sBF3acUnAwsIksEYjLeHL+TJv9jg+TmTwdyjnDex27jqEMakNKf3RwwPahDIt7QXCSqRQ==}
     cpu: [arm64]
@@ -2015,6 +2154,14 @@ packages:
     dev: false
     optional: true
 
+  /@rollup/rollup-win32-arm64-msvc@4.40.0:
+    resolution: {integrity: sha512-UtZQQI5k/b8d7d3i9AZmA/t+Q4tk3hOC0tMOMSq2GlMYOfxbesxG4mJSeDp0EHs30N9bsfwUvs3zF4v/RzOeTQ==}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@rollup/rollup-win32-ia32-msvc@4.39.0:
     resolution: {integrity: sha512-6w9uMuza+LbLCVoNKL5FSLE7yvYkq9laSd09bwS0tMjkwXrmib/4KmoJcrKhLWHvw19mwU+33ndC69T7weNNjQ==}
     cpu: [ia32]
@@ -2023,6 +2170,14 @@ packages:
     dev: false
     optional: true
 
+  /@rollup/rollup-win32-ia32-msvc@4.40.0:
+    resolution: {integrity: sha512-+m03kvI2f5syIqHXCZLPVYplP8pQch9JHyXKZ3AGMKlg8dCyr2PKHjwRLiW53LTrN/Nc3EqHOKxUxzoSPdKddA==}
+    cpu: [ia32]
+    os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@rollup/rollup-win32-x64-msvc@4.39.0:
     resolution: {integrity: sha512-yAkUOkIKZlK5dl7u6dg897doBgLXmUHhIINM2c+sND3DZwnrdQkkSiDh7N75Ll4mM4dxSkYfXqU9fW3lLkMFug==}
     cpu: [x64]
@@ -2031,6 +2186,14 @@ packages:
     dev: false
     optional: true
 
+  /@rollup/rollup-win32-x64-msvc@4.40.0:
+    resolution: {integrity: sha512-lpPE1cLfP5oPzVjKMx10pgBmKELQnFJXHgvtHCtuJWOv8MxqdEIMNtgHgBFf7Ea2/7EuVwa9fodWUfXAlXZLZQ==}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@sindresorhus/is@7.0.1:
     resolution: {integrity: sha512-QWLl2P+rsCJeofkDNIT3WFmb6NrRud1SUYW8dIhXK/46XFV8Q/g7Bsvib0Askb0reRLe+WYPeeE+l5cH7SlkuQ==}
     engines: {node: '>=18'}
@@ -2176,7 +2339,7 @@ packages:
       '@tailwindcss/oxide-win32-x64-msvc': 4.1.3
     dev: false
 
-  /@tailwindcss/vite@4.1.3(vite@6.2.5):
+  /@tailwindcss/vite@4.1.3(vite@6.3.2):
     resolution: {integrity: sha512-lUI/QaDxLtlV52Lho6pu07CG9pSnRYLOPmKGIQjyHdTBagemc6HmgZxyjGAQ/5HMPrNeWBfTVIpQl0/jLXvWHQ==}
     peerDependencies:
       vite: ^5.2.0 || ^6
@@ -2184,7 +2347,7 @@ packages:
       '@tailwindcss/node': 4.1.3
       '@tailwindcss/oxide': 4.1.3
       tailwindcss: 4.1.3
-      vite: 6.2.5(jiti@2.4.2)
+      vite: 6.3.2
     dev: false
 
   /@tanstack/table-core@8.21.2:
@@ -2411,7 +2574,7 @@ packages:
     resolution: {integrity: sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==}
     dev: false
 
-  /@vue/devtools-core@7.7.2(vite@6.2.5)(vue@3.5.13):
+  /@vue/devtools-core@7.7.2(vite@6.3.2)(vue@3.5.13):
     resolution: {integrity: sha512-lexREWj1lKi91Tblr38ntSsy6CvI8ba7u+jmwh2yruib/ltLUcsIzEjCnrkh1yYGGIKXbAuYV2tOG10fGDB9OQ==}
     peerDependencies:
       vue: ^3.0.0
@@ -2421,7 +2584,7 @@ packages:
       mitt: 3.0.1
       nanoid: 5.1.5
       pathe: 2.0.3
-      vite-hot-client: 0.2.4(vite@6.2.5)
+      vite-hot-client: 0.2.4(vite@6.3.2)
       vue: 3.5.13(typescript@5.8.3)
     transitivePeerDependencies:
       - vite
@@ -3643,6 +3806,17 @@ packages:
       picomatch: 4.0.2
     dev: false
 
+  /fdir@6.4.4(picomatch@4.0.2):
+    resolution: {integrity: sha512-1NZP+GK4GfuAv3PqKvxQRDMjdSRZjnkq7KfhlNrCNNlZ0ygQFpebfrnfnq/W7fpUnAv9aGWmY1zKx7FYL3gwhg==}
+    peerDependencies:
+      picomatch: ^3 || ^4
+    peerDependenciesMeta:
+      picomatch:
+        optional: true
+    dependencies:
+      picomatch: 4.0.2
+    dev: false
+
   /file-uri-to-path@1.0.0:
     resolution: {integrity: sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==}
     dev: false
@@ -4668,7 +4842,7 @@ packages:
       boolbase: 1.0.0
     dev: false
 
-  /nuxt@3.16.2(better-sqlite3@11.9.1)(drizzle-orm@0.41.0)(typescript@5.8.3)(vite@6.2.5):
+  /nuxt@3.16.2(better-sqlite3@11.9.1)(drizzle-orm@0.41.0)(typescript@5.8.3)(vite@6.3.2):
     resolution: {integrity: sha512-yjIC/C4HW8Pd+m0ACGliEF0HnimXYGYvUzjOsTiLQKkDDt2T+djyZ+pCl9BfhQBA8rYmnsym2jUI+ubjv1iClw==}
     engines: {node: ^18.12.0 || ^20.9.0 || >=22.0.0}
     hasBin: true
@@ -4683,7 +4857,7 @@ packages:
     dependencies:
       '@nuxt/cli': 3.24.1
       '@nuxt/devalue': 2.0.2
-      '@nuxt/devtools': 2.3.2(vite@6.2.5)(vue@3.5.13)
+      '@nuxt/devtools': 2.3.2(vite@6.3.2)(vue@3.5.13)
       '@nuxt/kit': 3.16.2(magicast@0.3.5)
       '@nuxt/schema': 3.16.2
       '@nuxt/telemetry': 2.6.6
@@ -5451,7 +5625,7 @@ packages:
     dependencies:
       '@floating-ui/dom': 1.6.13
       '@floating-ui/vue': 1.1.6(vue@3.5.13)
-      '@internationalized/date': 3.7.0
+      '@internationalized/date': 3.8.0
       '@internationalized/number': 3.6.0
       '@tanstack/vue-virtual': 3.13.6(vue@3.5.13)
       '@vueuse/core': 12.8.2(typescript@5.8.3)
@@ -5548,6 +5722,36 @@ packages:
       fsevents: 2.3.3
     dev: false
 
+  /rollup@4.40.0:
+    resolution: {integrity: sha512-Noe455xmA96nnqH5piFtLobsGbCij7Tu+tb3c1vYjNbTkfzGqXqQXG3wJaYXkRZuQ0vEYN4bhwg7QnIrqB5B+w==}
+    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
+    hasBin: true
+    dependencies:
+      '@types/estree': 1.0.7
+    optionalDependencies:
+      '@rollup/rollup-android-arm-eabi': 4.40.0
+      '@rollup/rollup-android-arm64': 4.40.0
+      '@rollup/rollup-darwin-arm64': 4.40.0
+      '@rollup/rollup-darwin-x64': 4.40.0
+      '@rollup/rollup-freebsd-arm64': 4.40.0
+      '@rollup/rollup-freebsd-x64': 4.40.0
+      '@rollup/rollup-linux-arm-gnueabihf': 4.40.0
+      '@rollup/rollup-linux-arm-musleabihf': 4.40.0
+      '@rollup/rollup-linux-arm64-gnu': 4.40.0
+      '@rollup/rollup-linux-arm64-musl': 4.40.0
+      '@rollup/rollup-linux-loongarch64-gnu': 4.40.0
+      '@rollup/rollup-linux-powerpc64le-gnu': 4.40.0
+      '@rollup/rollup-linux-riscv64-gnu': 4.40.0
+      '@rollup/rollup-linux-riscv64-musl': 4.40.0
+      '@rollup/rollup-linux-s390x-gnu': 4.40.0
+      '@rollup/rollup-linux-x64-gnu': 4.40.0
+      '@rollup/rollup-linux-x64-musl': 4.40.0
+      '@rollup/rollup-win32-arm64-msvc': 4.40.0
+      '@rollup/rollup-win32-ia32-msvc': 4.40.0
+      '@rollup/rollup-win32-x64-msvc': 4.40.0
+      fsevents: 2.3.3
+    dev: false
+
   /run-applescript@7.0.0:
     resolution: {integrity: sha512-9by4Ij99JUr/MCFBUkDKLWK3G9HVXmabKz9U5MlIAIuvuzkiOicRYs8XJLxX+xahD+mLiiCYDqF9dKAgtzKP1A==}
     engines: {node: '>=18'}
@@ -5942,6 +6146,14 @@ packages:
       picomatch: 4.0.2
     dev: false
 
+  /tinyglobby@0.2.13:
+    resolution: {integrity: sha512-mEwzpUgrLySlveBwEVDMKk5B57bhLPYovRfPAXD5gA/98Opn0rCDj3GtLwFvCvH5RK9uPCExUROW5NjDwvqkxw==}
+    engines: {node: '>=12.0.0'}
+    dependencies:
+      fdir: 6.4.4(picomatch@4.0.2)
+      picomatch: 4.0.2
+    dev: false
+
   /to-regex-range@5.0.1:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
     engines: {node: '>=8.0'}
@@ -6226,30 +6438,30 @@ packages:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
     dev: false
 
-  /vite-dev-rpc@1.0.7(vite@6.2.5):
+  /vite-dev-rpc@1.0.7(vite@6.3.2):
     resolution: {integrity: sha512-FxSTEofDbUi2XXujCA+hdzCDkXFG1PXktMjSk1efq9Qb5lOYaaM9zNSvKvPPF7645Bak79kSp1PTooMW2wktcA==}
     peerDependencies:
       vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0-0 || ^5.0.0-0 || ^6.0.1
     dependencies:
       birpc: 2.3.0
-      vite: 6.2.5(jiti@2.4.2)
-      vite-hot-client: 2.0.4(vite@6.2.5)
+      vite: 6.3.2
+      vite-hot-client: 2.0.4(vite@6.3.2)
     dev: false
 
-  /vite-hot-client@0.2.4(vite@6.2.5):
+  /vite-hot-client@0.2.4(vite@6.3.2):
     resolution: {integrity: sha512-a1nzURqO7DDmnXqabFOliz908FRmIppkBKsJthS8rbe8hBEXwEwe4C3Pp33Z1JoFCYfVL4kTOMLKk0ZZxREIeA==}
     peerDependencies:
       vite: ^2.6.0 || ^3.0.0 || ^4.0.0 || ^5.0.0-0 || ^6.0.0-0
     dependencies:
-      vite: 6.2.5(jiti@2.4.2)
+      vite: 6.3.2
     dev: false
 
-  /vite-hot-client@2.0.4(vite@6.2.5):
+  /vite-hot-client@2.0.4(vite@6.3.2):
     resolution: {integrity: sha512-W9LOGAyGMrbGArYJN4LBCdOC5+Zwh7dHvOHC0KmGKkJhsOzaKbpo/jEjpPKVHIW0/jBWj8RZG0NUxfgA8BxgAg==}
     peerDependencies:
       vite: ^2.6.0 || ^3.0.0 || ^4.0.0 || ^5.0.0-0 || ^6.0.0-0
     dependencies:
-      vite: 6.2.5(jiti@2.4.2)
+      vite: 6.3.2
     dev: false
 
   /vite-node@3.1.1(jiti@2.4.2):
@@ -6324,7 +6536,7 @@ packages:
       vscode-uri: 3.1.0
     dev: false
 
-  /vite-plugin-inspect@11.0.0(@nuxt/kit@3.16.2)(vite@6.2.5):
+  /vite-plugin-inspect@11.0.0(@nuxt/kit@3.16.2)(vite@6.3.2):
     resolution: {integrity: sha512-Q0RDNcMs1mbI2yGRwOzSapnnA6NFO0j88+Vb8pJX0iYMw34WczwKJi3JgheItDhbWRq/CLUR0cs+ajZpcUaIFQ==}
     engines: {node: '>=14'}
     peerDependencies:
@@ -6343,13 +6555,13 @@ packages:
       perfect-debounce: 1.0.0
       sirv: 3.0.1
       unplugin-utils: 0.2.4
-      vite: 6.2.5(jiti@2.4.2)
-      vite-dev-rpc: 1.0.7(vite@6.2.5)
+      vite: 6.3.2
+      vite-dev-rpc: 1.0.7(vite@6.3.2)
     transitivePeerDependencies:
       - supports-color
     dev: false
 
-  /vite-plugin-vue-tracer@0.1.3(vite@6.2.5)(vue@3.5.13):
+  /vite-plugin-vue-tracer@0.1.3(vite@6.3.2)(vue@3.5.13):
     resolution: {integrity: sha512-+fN6oo0//dwZP9Ax9gRKeUroCqpQ43P57qlWgL0ljCIxAs+Rpqn/L4anIPZPgjDPga5dZH+ZJsshbF0PNJbm3Q==}
     peerDependencies:
       vite: ^6.0.0
@@ -6360,7 +6572,7 @@ packages:
       magic-string: 0.30.17
       pathe: 2.0.3
       source-map-js: 1.2.1
-      vite: 6.2.5(jiti@2.4.2)
+      vite: 6.3.2
       vue: 3.5.13(typescript@5.8.3)
     dev: false
 
@@ -6412,6 +6624,56 @@ packages:
       fsevents: 2.3.3
     dev: false
 
+  /vite@6.3.2:
+    resolution: {integrity: sha512-ZSvGOXKGceizRQIZSz7TGJ0pS3QLlVY/9hwxVh17W3re67je1RKYzFHivZ/t0tubU78Vkyb9WnHPENSBCzbckg==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^18.0.0 || ^20.0.0 || >=22.0.0
+      jiti: '>=1.21.0'
+      less: '*'
+      lightningcss: ^1.21.0
+      sass: '*'
+      sass-embedded: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.16.0
+      tsx: ^4.8.1
+      yaml: ^2.4.2
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      jiti:
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      sass-embedded:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+      tsx:
+        optional: true
+      yaml:
+        optional: true
+    dependencies:
+      esbuild: 0.25.2
+      fdir: 6.4.4(picomatch@4.0.2)
+      picomatch: 4.0.2
+      postcss: 8.5.3
+      rollup: 4.40.0
+      tinyglobby: 0.2.13
+    optionalDependencies:
+      fsevents: 2.3.3
+    dev: false
+
   /vscode-uri@3.1.0:
     resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==}
     dev: false
@@ -6608,6 +6870,6 @@ packages:
       readable-stream: 4.7.0
     dev: false
 
-  /zod@3.24.2:
-    resolution: {integrity: sha512-lY7CDW43ECgW9u1TcT3IoXHflywfVqDYze4waEz812jR/bZ8FHDsl7pFQoSZTz5N+2NqRXs8GBwnAwo3ZNxqhQ==}
+  /zod@3.24.3:
+    resolution: {integrity: sha512-HhY1oqzWCQWuUqvBFnsyrtZRhyPeR7SUGv+C4+MsisMuVfSPx8HpwWqH8tRahSlt6M3PiFAcoeFhZAqIXTxoSg==}
     dev: false
diff --git a/src/components/range-picker.vue b/src/components/range-picker.vue
new file mode 100644
index 0000000..a995456
--- /dev/null
+++ b/src/components/range-picker.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+import { Button } from '~/components/ui/button'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger
+} from '~/components/ui/popover'
+import { RangeCalendar } from '~/components/ui/range-calendar'
+import { type DateRange } from 'reka-ui'
+import {
+  CalendarDate,
+  DateFormatter,
+  type DateValue,
+  getLocalTimeZone
+} from '@internationalized/date'
+import { CalendarIcon } from 'lucide-vue-next'
+
+const route = useRoute()
+const router = useRouter()
+
+const dateRange = ref({
+  start: undefined,
+  end: undefined
+}) as Ref<DateRange>
+
+const drf = new DateFormatter('en-US', {
+  dateStyle: 'medium'
+})
+
+watch(dateRange, async () => {
+  router.push({
+    path: '/tasks',
+    query: {
+      ...route.params,
+      startDate: dateRange.value.start?.toString(),
+      endDate: dateRange.value.end?.toString()
+    }
+  })
+})
+</script>
+
+<template>
+  <div class="flex flex-col items-start gap-4 md:flex-row">
+    <Popover>
+      <PopoverTrigger as-child>
+        <Button
+          id="date"
+          :variant="'outline'"
+          :class="
+            cn(
+              'w-fit justify-start px-2 font-normal',
+              !dateRange && 'text-muted-foreground'
+            )
+          "
+        >
+          <CalendarIcon class="text-muted-foreground" />
+
+          <template v-if="dateRange.start">
+            <template v-if="dateRange.end">
+              {{ drf.format(dateRange.start.toDate(getLocalTimeZone())) }} -
+              {{ drf.format(dateRange.end.toDate(getLocalTimeZone())) }}
+            </template>
+
+            <template v-else>
+              {{ drf.format(dateRange.start.toDate(getLocalTimeZone())) }}
+            </template>
+          </template>
+          <template v-else> Pick a date </template>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        class="w-auto p-0"
+        align="start"
+      >
+        <RangeCalendar
+          v-model="dateRange"
+          :number-of-months="2"
+          initial-focus
+        />
+      </PopoverContent>
+    </Popover>
+  </div>
+</template>
diff --git a/src/components/ui/calendar/Calendar.vue b/src/components/ui/calendar/Calendar.vue
new file mode 100644
index 0000000..dac3a3c
--- /dev/null
+++ b/src/components/ui/calendar/Calendar.vue
@@ -0,0 +1,63 @@
+<script lang="ts" setup>
+import { cn } from '@/lib/utils'
+import { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useForwardPropsEmits } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from '.'
+
+const props = defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<CalendarRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <CalendarRoot
+    v-slot="{ grid, weekDays }"
+    data-slot="calendar"
+    :class="cn('p-3', props.class)"
+    v-bind="forwarded"
+  >
+    <CalendarHeader>
+      <CalendarHeading />
+
+      <div class="flex items-center gap-1">
+        <CalendarPrevButton />
+        <CalendarNextButton />
+      </div>
+    </CalendarHeader>
+
+    <div class="flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0">
+      <CalendarGrid v-for="month in grid" :key="month.value.toString()">
+        <CalendarGridHead>
+          <CalendarGridRow>
+            <CalendarHeadCell
+              v-for="day in weekDays" :key="day"
+            >
+              {{ day }}
+            </CalendarHeadCell>
+          </CalendarGridRow>
+        </CalendarGridHead>
+        <CalendarGridBody>
+          <CalendarGridRow v-for="(weekDates, index) in month.rows" :key="`weekDate-${index}`" class="mt-2 w-full">
+            <CalendarCell
+              v-for="weekDate in weekDates"
+              :key="weekDate.toString()"
+              :date="weekDate"
+            >
+              <CalendarCellTrigger
+                :day="weekDate"
+                :month="month.value"
+              />
+            </CalendarCell>
+          </CalendarGridRow>
+        </CalendarGridBody>
+      </CalendarGrid>
+    </div>
+  </CalendarRoot>
+</template>
diff --git a/src/components/ui/calendar/CalendarCell.vue b/src/components/ui/calendar/CalendarCell.vue
new file mode 100644
index 0000000..bc873ed
--- /dev/null
+++ b/src/components/ui/calendar/CalendarCell.vue
@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import { cn } from '@/lib/utils'
+import { CalendarCell, type CalendarCellProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<CalendarCellProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarCell
+    data-slot="calendar-cell"
+    :class="cn('relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarCell>
+</template>
diff --git a/src/components/ui/calendar/CalendarCellTrigger.vue b/src/components/ui/calendar/CalendarCellTrigger.vue
new file mode 100644
index 0000000..3a52b73
--- /dev/null
+++ b/src/components/ui/calendar/CalendarCellTrigger.vue
@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/components/ui/button'
+import { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = withDefaults(defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>(), {
+  as: 'button',
+})
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarCellTrigger
+    data-slot="calendar-cell-trigger"
+    :class="cn(
+      buttonVariants({ variant: 'ghost' }),
+      'size-8 p-0 font-normal aria-selected:opacity-100 cursor-default',
+      '[&[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]:opacity-100 data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground',
+      // Disabled
+      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
+      // Unavailable
+      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',
+      // Outside months
+      'data-[outside-view]:text-muted-foreground',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarCellTrigger>
+</template>
diff --git a/src/components/ui/calendar/CalendarGrid.vue b/src/components/ui/calendar/CalendarGrid.vue
new file mode 100644
index 0000000..4227b56
--- /dev/null
+++ b/src/components/ui/calendar/CalendarGrid.vue
@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import { cn } from '@/lib/utils'
+import { CalendarGrid, type CalendarGridProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<CalendarGridProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarGrid
+    data-slot="calendar-grid"
+    :class="cn('w-full border-collapse space-x-1', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarGrid>
+</template>
diff --git a/src/components/ui/calendar/CalendarGridBody.vue b/src/components/ui/calendar/CalendarGridBody.vue
new file mode 100644
index 0000000..7b2bf41
--- /dev/null
+++ b/src/components/ui/calendar/CalendarGridBody.vue
@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+import { CalendarGridBody, type CalendarGridBodyProps } from 'reka-ui'
+
+const props = defineProps<CalendarGridBodyProps>()
+</script>
+
+<template>
+  <CalendarGridBody
+    data-slot="calendar-grid-body"
+    v-bind="props"
+  >
+    <slot />
+  </CalendarGridBody>
+</template>
diff --git a/src/components/ui/calendar/CalendarGridHead.vue b/src/components/ui/calendar/CalendarGridHead.vue
new file mode 100644
index 0000000..3ba322b
--- /dev/null
+++ b/src/components/ui/calendar/CalendarGridHead.vue
@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { CalendarGridHead, type CalendarGridHeadProps } from 'reka-ui'
+
+const props = defineProps<CalendarGridHeadProps & { class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <CalendarGridHead
+    data-slot="calendar-grid-head"
+    v-bind="props"
+  >
+    <slot />
+  </CalendarGridHead>
+</template>
diff --git a/src/components/ui/calendar/CalendarGridRow.vue b/src/components/ui/calendar/CalendarGridRow.vue
new file mode 100644
index 0000000..a6909d9
--- /dev/null
+++ b/src/components/ui/calendar/CalendarGridRow.vue
@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import { cn } from '@/lib/utils'
+import { CalendarGridRow, type CalendarGridRowProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<CalendarGridRowProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarGridRow
+    data-slot="calendar-grid-row"
+    :class="cn('flex', props.class)" v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarGridRow>
+</template>
diff --git a/src/components/ui/calendar/CalendarHeadCell.vue b/src/components/ui/calendar/CalendarHeadCell.vue
new file mode 100644
index 0000000..ed9f523
--- /dev/null
+++ b/src/components/ui/calendar/CalendarHeadCell.vue
@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import { cn } from '@/lib/utils'
+import { CalendarHeadCell, type CalendarHeadCellProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<CalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarHeadCell
+    data-slot="calendar-head-cell"
+    :class="cn('text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarHeadCell>
+</template>
diff --git a/src/components/ui/calendar/CalendarHeader.vue b/src/components/ui/calendar/CalendarHeader.vue
new file mode 100644
index 0000000..efac13d
--- /dev/null
+++ b/src/components/ui/calendar/CalendarHeader.vue
@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import { cn } from '@/lib/utils'
+import { CalendarHeader, type CalendarHeaderProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<CalendarHeaderProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarHeader
+    data-slot="calendar-header"
+    :class="cn('flex justify-center pt-1 relative items-center w-full', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarHeader>
+</template>
diff --git a/src/components/ui/calendar/CalendarHeading.vue b/src/components/ui/calendar/CalendarHeading.vue
new file mode 100644
index 0000000..f49bf3b
--- /dev/null
+++ b/src/components/ui/calendar/CalendarHeading.vue
@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import { cn } from '@/lib/utils'
+import { CalendarHeading, type CalendarHeadingProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<CalendarHeadingProps & { class?: HTMLAttributes['class'] }>()
+
+defineSlots<{
+  default: (props: { headingValue: string }) => any
+}>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarHeading
+    v-slot="{ headingValue }"
+    data-slot="calendar-heading"
+    :class="cn('text-sm font-medium', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot :heading-value>
+      {{ headingValue }}
+    </slot>
+  </CalendarHeading>
+</template>
diff --git a/src/components/ui/calendar/CalendarNextButton.vue b/src/components/ui/calendar/CalendarNextButton.vue
new file mode 100644
index 0000000..71030ad
--- /dev/null
+++ b/src/components/ui/calendar/CalendarNextButton.vue
@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/components/ui/button'
+import { ChevronRight } from 'lucide-vue-next'
+import { CalendarNext, type CalendarNextProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<CalendarNextProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarNext
+    data-slot="calendar-next-button"
+    :class="cn(
+      buttonVariants({ variant: 'outline' }),
+      'absolute right-1',
+      'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot>
+      <ChevronRight class="size-4" />
+    </slot>
+  </CalendarNext>
+</template>
diff --git a/src/components/ui/calendar/CalendarPrevButton.vue b/src/components/ui/calendar/CalendarPrevButton.vue
new file mode 100644
index 0000000..bfba161
--- /dev/null
+++ b/src/components/ui/calendar/CalendarPrevButton.vue
@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/components/ui/button'
+import { ChevronLeft } from 'lucide-vue-next'
+import { CalendarPrev, type CalendarPrevProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<CalendarPrevProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarPrev
+    data-slot="calendar-prev-button"
+    :class="cn(
+      buttonVariants({ variant: 'outline' }),
+      'absolute left-1',
+      'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot>
+      <ChevronLeft class="size-4" />
+    </slot>
+  </CalendarPrev>
+</template>
diff --git a/src/components/ui/calendar/index.ts b/src/components/ui/calendar/index.ts
new file mode 100644
index 0000000..5239a1b
--- /dev/null
+++ b/src/components/ui/calendar/index.ts
@@ -0,0 +1,12 @@
+export { default as Calendar } from './Calendar.vue'
+export { default as CalendarCell } from './CalendarCell.vue'
+export { default as CalendarCellTrigger } from './CalendarCellTrigger.vue'
+export { default as CalendarGrid } from './CalendarGrid.vue'
+export { default as CalendarGridBody } from './CalendarGridBody.vue'
+export { default as CalendarGridHead } from './CalendarGridHead.vue'
+export { default as CalendarGridRow } from './CalendarGridRow.vue'
+export { default as CalendarHeadCell } from './CalendarHeadCell.vue'
+export { default as CalendarHeader } from './CalendarHeader.vue'
+export { default as CalendarHeading } from './CalendarHeading.vue'
+export { default as CalendarNextButton } from './CalendarNextButton.vue'
+export { default as CalendarPrevButton } from './CalendarPrevButton.vue'
diff --git a/src/components/ui/popover/Popover.vue b/src/components/ui/popover/Popover.vue
new file mode 100644
index 0000000..69afa77
--- /dev/null
+++ b/src/components/ui/popover/Popover.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { PopoverRootEmits, PopoverRootProps } from 'reka-ui'
+import { PopoverRoot, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<PopoverRootProps>()
+const emits = defineEmits<PopoverRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <PopoverRoot
+    data-slot="popover"
+    v-bind="forwarded"
+  >
+    <slot />
+  </PopoverRoot>
+</template>
diff --git a/src/components/ui/popover/PopoverAnchor.vue b/src/components/ui/popover/PopoverAnchor.vue
new file mode 100644
index 0000000..e96a121
--- /dev/null
+++ b/src/components/ui/popover/PopoverAnchor.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { PopoverAnchorProps } from 'reka-ui'
+import { PopoverAnchor } from 'reka-ui'
+
+const props = defineProps<PopoverAnchorProps>()
+</script>
+
+<template>
+  <PopoverAnchor
+    data-slot="popover-anchor"
+    v-bind="props"
+  >
+    <slot />
+  </PopoverAnchor>
+</template>
diff --git a/src/components/ui/popover/PopoverContent.vue b/src/components/ui/popover/PopoverContent.vue
new file mode 100644
index 0000000..860280f
--- /dev/null
+++ b/src/components/ui/popover/PopoverContent.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import {
+  PopoverContent,
+  type PopoverContentEmits,
+  type PopoverContentProps,
+  PopoverPortal,
+  useForwardPropsEmits,
+} from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<PopoverContentProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    align: 'center',
+    sideOffset: 4,
+  },
+)
+const emits = defineEmits<PopoverContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <PopoverPortal>
+    <PopoverContent
+      data-slot="popover-content"
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="
+        cn(
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md origin-(--reka-popover-content-transform-origin) outline-hidden',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </PopoverContent>
+  </PopoverPortal>
+</template>
diff --git a/src/components/ui/popover/PopoverTrigger.vue b/src/components/ui/popover/PopoverTrigger.vue
new file mode 100644
index 0000000..5ff67df
--- /dev/null
+++ b/src/components/ui/popover/PopoverTrigger.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { PopoverTrigger, type PopoverTriggerProps } from 'reka-ui'
+
+const props = defineProps<PopoverTriggerProps>()
+</script>
+
+<template>
+  <PopoverTrigger
+    data-slot="popover-trigger"
+    v-bind="props"
+  >
+    <slot />
+  </PopoverTrigger>
+</template>
diff --git a/src/components/ui/popover/index.ts b/src/components/ui/popover/index.ts
new file mode 100644
index 0000000..d724e78
--- /dev/null
+++ b/src/components/ui/popover/index.ts
@@ -0,0 +1,4 @@
+export { default as Popover } from './Popover.vue'
+export { default as PopoverAnchor } from './PopoverAnchor.vue'
+export { default as PopoverContent } from './PopoverContent.vue'
+export { default as PopoverTrigger } from './PopoverTrigger.vue'
diff --git a/src/components/ui/range-calendar/RangeCalendar.vue b/src/components/ui/range-calendar/RangeCalendar.vue
new file mode 100644
index 0000000..fc37098
--- /dev/null
+++ b/src/components/ui/range-calendar/RangeCalendar.vue
@@ -0,0 +1,91 @@
+<script lang="ts" setup>
+import { cn } from '@/lib/utils'
+import {
+  RangeCalendarRoot,
+  type RangeCalendarRootEmits,
+  type RangeCalendarRootProps,
+  useForwardPropsEmits
+} from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+import {
+  RangeCalendarCell,
+  RangeCalendarCellTrigger,
+  RangeCalendarGrid,
+  RangeCalendarGridBody,
+  RangeCalendarGridHead,
+  RangeCalendarGridRow,
+  RangeCalendarHeadCell,
+  RangeCalendarHeader,
+  RangeCalendarHeading,
+  RangeCalendarNextButton,
+  RangeCalendarPrevButton
+} from '.'
+
+const props = defineProps<
+  RangeCalendarRootProps & { class?: HTMLAttributes['class'] }
+>()
+
+const emits = defineEmits<RangeCalendarRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <RangeCalendarRoot
+    v-slot="{ grid, weekDays }"
+    data-slot="range-calendar"
+    :class="cn('p-3', props.class)"
+    v-bind="forwarded"
+  >
+    <RangeCalendarHeader>
+      <RangeCalendarHeading />
+
+      <div class="flex items-center gap-1">
+        <RangeCalendarPrevButton />
+        <RangeCalendarNextButton />
+      </div>
+    </RangeCalendarHeader>
+
+    <div class="flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0">
+      <RangeCalendarGrid
+        v-for="month in grid"
+        :key="month.value.toString()"
+      >
+        <RangeCalendarGridHead>
+          <RangeCalendarGridRow>
+            <RangeCalendarHeadCell
+              v-for="day in weekDays"
+              :key="day"
+            >
+              {{ day }}
+            </RangeCalendarHeadCell>
+          </RangeCalendarGridRow>
+        </RangeCalendarGridHead>
+        <RangeCalendarGridBody>
+          <RangeCalendarGridRow
+            v-for="(weekDates, index) in month.rows"
+            :key="`weekDate-${index}`"
+            class="mt-2 w-full"
+          >
+            <RangeCalendarCell
+              v-for="weekDate in weekDates"
+              :key="weekDate.toString()"
+              :date="weekDate"
+            >
+              <RangeCalendarCellTrigger
+                :day="weekDate"
+                :month="month.value"
+              />
+            </RangeCalendarCell>
+          </RangeCalendarGridRow>
+        </RangeCalendarGridBody>
+      </RangeCalendarGrid>
+    </div>
+  </RangeCalendarRoot>
+</template>
diff --git a/src/components/ui/range-calendar/RangeCalendarCell.vue b/src/components/ui/range-calendar/RangeCalendarCell.vue
new file mode 100644
index 0000000..f49016b
--- /dev/null
+++ b/src/components/ui/range-calendar/RangeCalendarCell.vue
@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import { cn } from '@/lib/utils'
+import { RangeCalendarCell, type RangeCalendarCellProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<RangeCalendarCellProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarCell
+    data-slot="range-calendar-cell"
+    :class="cn('relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:bg-accent 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', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </RangeCalendarCell>
+</template>
diff --git a/src/components/ui/range-calendar/RangeCalendarCellTrigger.vue b/src/components/ui/range-calendar/RangeCalendarCellTrigger.vue
new file mode 100644
index 0000000..f3385fe
--- /dev/null
+++ b/src/components/ui/range-calendar/RangeCalendarCellTrigger.vue
@@ -0,0 +1,43 @@
+<script lang="ts" setup>
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/components/ui/button'
+import { RangeCalendarCellTrigger, type RangeCalendarCellTriggerProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = withDefaults(defineProps<RangeCalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>(), {
+  as: 'button',
+})
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarCellTrigger
+    data-slot="range-calendar-trigger"
+    :class="cn(
+      buttonVariants({ variant: 'ghost' }),
+      'h-8 w-8 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-view]:text-muted-foreground',
+      // Disabled
+      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
+      // Unavailable
+      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </RangeCalendarCellTrigger>
+</template>
diff --git a/src/components/ui/range-calendar/RangeCalendarGrid.vue b/src/components/ui/range-calendar/RangeCalendarGrid.vue
new file mode 100644
index 0000000..aaa909e
--- /dev/null
+++ b/src/components/ui/range-calendar/RangeCalendarGrid.vue
@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import { cn } from '@/lib/utils'
+import { RangeCalendarGrid, type RangeCalendarGridProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<RangeCalendarGridProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarGrid
+    data-slot="range-calendar-grid"
+    :class="cn('w-full border-collapse space-x-1', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </RangeCalendarGrid>
+</template>
diff --git a/src/components/ui/range-calendar/RangeCalendarGridBody.vue b/src/components/ui/range-calendar/RangeCalendarGridBody.vue
new file mode 100644
index 0000000..52b6d3a
--- /dev/null
+++ b/src/components/ui/range-calendar/RangeCalendarGridBody.vue
@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+import { RangeCalendarGridBody, type RangeCalendarGridBodyProps } from 'reka-ui'
+
+const props = defineProps<RangeCalendarGridBodyProps>()
+</script>
+
+<template>
+  <RangeCalendarGridBody
+    data-slot="range-calendar-grid-body"
+    v-bind="props"
+  >
+    <slot />
+  </RangeCalendarGridBody>
+</template>
diff --git a/src/components/ui/range-calendar/RangeCalendarGridHead.vue b/src/components/ui/range-calendar/RangeCalendarGridHead.vue
new file mode 100644
index 0000000..0fe054d
--- /dev/null
+++ b/src/components/ui/range-calendar/RangeCalendarGridHead.vue
@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+import { RangeCalendarGridHead, type RangeCalendarGridHeadProps } from 'reka-ui'
+
+const props = defineProps<RangeCalendarGridHeadProps>()
+</script>
+
+<template>
+  <RangeCalendarGridHead
+    data-slot="range-calendar-grid-head"
+    v-bind="props"
+  >
+    <slot />
+  </RangeCalendarGridHead>
+</template>
diff --git a/src/components/ui/range-calendar/RangeCalendarGridRow.vue b/src/components/ui/range-calendar/RangeCalendarGridRow.vue
new file mode 100644
index 0000000..b90eb24
--- /dev/null
+++ b/src/components/ui/range-calendar/RangeCalendarGridRow.vue
@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import { cn } from '@/lib/utils'
+import { RangeCalendarGridRow, type RangeCalendarGridRowProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<RangeCalendarGridRowProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarGridRow
+    data-slot="range-calendar-grid-row"
+    :class="cn('flex', props.class)" v-bind="forwardedProps"
+  >
+    <slot />
+  </RangeCalendarGridRow>
+</template>
diff --git a/src/components/ui/range-calendar/RangeCalendarHeadCell.vue b/src/components/ui/range-calendar/RangeCalendarHeadCell.vue
new file mode 100644
index 0000000..aa0c2f6
--- /dev/null
+++ b/src/components/ui/range-calendar/RangeCalendarHeadCell.vue
@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import { cn } from '@/lib/utils'
+import { RangeCalendarHeadCell, type RangeCalendarHeadCellProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<RangeCalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarHeadCell
+    data-slot="range-calendar-head-cell"
+    :class="cn('w-8 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </RangeCalendarHeadCell>
+</template>
diff --git a/src/components/ui/range-calendar/RangeCalendarHeader.vue b/src/components/ui/range-calendar/RangeCalendarHeader.vue
new file mode 100644
index 0000000..9427a56
--- /dev/null
+++ b/src/components/ui/range-calendar/RangeCalendarHeader.vue
@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import { cn } from '@/lib/utils'
+import { RangeCalendarHeader, type RangeCalendarHeaderProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<RangeCalendarHeaderProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarHeader
+    data-slot="range-calendar-header"
+    :class="cn('flex justify-center pt-1 relative items-center w-full', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </RangeCalendarHeader>
+</template>
diff --git a/src/components/ui/range-calendar/RangeCalendarHeading.vue b/src/components/ui/range-calendar/RangeCalendarHeading.vue
new file mode 100644
index 0000000..27c24b2
--- /dev/null
+++ b/src/components/ui/range-calendar/RangeCalendarHeading.vue
@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import { cn } from '@/lib/utils'
+import { RangeCalendarHeading, type RangeCalendarHeadingProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<RangeCalendarHeadingProps & { class?: HTMLAttributes['class'] }>()
+
+defineSlots<{
+  default: (props: { headingValue: string }) => any
+}>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarHeading
+    v-slot="{ headingValue }"
+    data-slot="range-calendar-heading"
+    :class="cn('text-sm font-medium', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot :heading-value>
+      {{ headingValue }}
+    </slot>
+  </RangeCalendarHeading>
+</template>
diff --git a/src/components/ui/range-calendar/RangeCalendarNextButton.vue b/src/components/ui/range-calendar/RangeCalendarNextButton.vue
new file mode 100644
index 0000000..2bd0908
--- /dev/null
+++ b/src/components/ui/range-calendar/RangeCalendarNextButton.vue
@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/components/ui/button'
+import { ChevronRight } from 'lucide-vue-next'
+import { RangeCalendarNext, type RangeCalendarNextProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<RangeCalendarNextProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarNext
+    data-slot="range-calendar-next-button"
+    :class="cn(
+      buttonVariants({ variant: 'outline' }),
+      'absolute right-1',
+      'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot>
+      <ChevronRight class="size-4" />
+    </slot>
+  </RangeCalendarNext>
+</template>
diff --git a/src/components/ui/range-calendar/RangeCalendarPrevButton.vue b/src/components/ui/range-calendar/RangeCalendarPrevButton.vue
new file mode 100644
index 0000000..676ea0d
--- /dev/null
+++ b/src/components/ui/range-calendar/RangeCalendarPrevButton.vue
@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/components/ui/button'
+import { ChevronLeft } from 'lucide-vue-next'
+import { RangeCalendarPrev, type RangeCalendarPrevProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<RangeCalendarPrevProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarPrev
+    data-slot="range-calendar-prev-button"
+    :class="cn(
+      buttonVariants({ variant: 'outline' }),
+      'absolute left-1',
+      'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot>
+      <ChevronLeft class="size-4" />
+    </slot>
+  </RangeCalendarPrev>
+</template>
diff --git a/src/components/ui/range-calendar/index.ts b/src/components/ui/range-calendar/index.ts
new file mode 100644
index 0000000..7ba1637
--- /dev/null
+++ b/src/components/ui/range-calendar/index.ts
@@ -0,0 +1,12 @@
+export { default as RangeCalendar } from './RangeCalendar.vue'
+export { default as RangeCalendarCell } from './RangeCalendarCell.vue'
+export { default as RangeCalendarCellTrigger } from './RangeCalendarCellTrigger.vue'
+export { default as RangeCalendarGrid } from './RangeCalendarGrid.vue'
+export { default as RangeCalendarGridBody } from './RangeCalendarGridBody.vue'
+export { default as RangeCalendarGridHead } from './RangeCalendarGridHead.vue'
+export { default as RangeCalendarGridRow } from './RangeCalendarGridRow.vue'
+export { default as RangeCalendarHeadCell } from './RangeCalendarHeadCell.vue'
+export { default as RangeCalendarHeader } from './RangeCalendarHeader.vue'
+export { default as RangeCalendarHeading } from './RangeCalendarHeading.vue'
+export { default as RangeCalendarNextButton } from './RangeCalendarNextButton.vue'
+export { default as RangeCalendarPrevButton } from './RangeCalendarPrevButton.vue'
diff --git a/src/pages/tasks/[id].vue b/src/pages/tasks/[id].vue
index 423aa14..30a0c20 100644
--- a/src/pages/tasks/[id].vue
+++ b/src/pages/tasks/[id].vue
@@ -1,17 +1,23 @@
 <script setup lang="ts">
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { toast } from 'vue-sonner'
 import { formatDate } from '~/lib/utils'
 import { Button } from '~/components/ui/button'
-import { CopyIcon } from 'lucide-vue-next'
-import { toast } from 'vue-sonner'
+import { CopyIcon, LoaderCircleIcon } from 'lucide-vue-next'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { useIntervalFn } from '@vueuse/core'
 
 const route = useRoute()
 const router = useRouter()
-const { data: task, error } = useFetch(`/api/tasks/${route.params.id}`)
+const { data: task, error, refresh } = useFetch(`/api/tasks/${route.params.id}`)
 const copyToClipboard = (value: string) => {
   navigator.clipboard.writeText(value)
 }
 
+useIntervalFn(() => {
+  console.log('REFRESHING...')
+  refresh()
+}, 2000)
+
 const handleCopy = (value: string) => {
   copyToClipboard(value)
   toast('Successfully copied', {
@@ -80,7 +86,11 @@ const handleCopy = (value: string) => {
               </tr>
               <tr>
                 <th>Finished At</th>
-                <td>{{ formatDate(String(task.finishedAt)) }}</td>
+                <td v-if="task.state === 'running'">
+                  <LoaderCircleIcon class="animate-spin" />
+                </td>
+                <td v-else-if="task.state === 'abandoned'"></td>
+                <td v-else>{{ formatDate(String(task.finishedAt)) }}</td>
               </tr>
               <tr>
                 <th>Error</th>
@@ -105,6 +115,7 @@ const handleCopy = (value: string) => {
 <style scoped>
 th {
   text-align: left;
+  border-right: 1px solid #ddd;
 }
 th,
 td {
diff --git a/src/pages/tasks/index.vue b/src/pages/tasks/index.vue
index 61113d1..7132b66 100644
--- a/src/pages/tasks/index.vue
+++ b/src/pages/tasks/index.vue
@@ -3,9 +3,9 @@ import { useAsyncData } from '#app'
 import { useIntervalFn } from '@vueuse/core'
 import { computed, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { Button } from '@/components/ui/button'
+import { Button } from '~/components/ui/button'
 import { Input } from '~/components/ui/input'
-
+import RangePicker from '~/components/range-picker.vue'
 import type { TaskSelect } from '~/server/db/schema'
 import TasksTable from '~/components/tasks-table.vue'
 
@@ -20,19 +20,37 @@ const searchRef = ref('')
 const queryParams = reactive<{
   page: number
   perPage: number
-  state: string | undefined
-  search: string | undefined
-  sortByRuntime: string | undefined
-  sortByStartedAt: string | undefined
+  state?: string
+  search?: string
+  sortByRuntime?: string
+  sortByStartedAt?: string
+  startDate?: string
+  endDate?: string
 }>({
   page: Number(route.query.page) || 1,
   perPage: Number(route.query.perPage) || 15,
   state: route.query.state?.toString(),
   search: route.query.search?.toString(),
   sortByRuntime: route.query.sortByRuntime?.toString(),
-  sortByStartedAt: route.query.sortByStartedAt?.toString()
+  sortByStartedAt: route.query.sortByStartedAt?.toString(),
+  startDate: route.query.startDate?.toString(),
+  endDate: route.query.endDate?.toString()
 })
 
+watch(
+  () => route.query,
+  async () => {
+    queryParams.page = Number(route.query.page) || 1
+    queryParams.perPage = Number(route.query.perPage) || 15
+    queryParams.state = route.query.state?.toString()
+    queryParams.search = route.query.search?.toString()
+    queryParams.sortByRuntime = route.query.sortByRuntime?.toString()
+    queryParams.sortByStartedAt = route.query.sortByStartedAt?.toString()
+    queryParams.startDate = route.query.startDate?.toString()
+    queryParams.endDate = route.query.endDate?.toString()
+  }
+)
+
 const { data, refresh } = useAsyncData<{ tasks: TaskSelect[]; count: number }>(
   'tasks',
   () =>
@@ -43,7 +61,9 @@ const { data, refresh } = useAsyncData<{ tasks: TaskSelect[]; count: number }>(
         search: queryParams.search,
         offset: (queryParams.page - 1) * queryParams.perPage,
         sortByRuntime: queryParams.sortByRuntime,
-        sortByStartedAt: queryParams.sortByStartedAt
+        sortByStartedAt: queryParams.sortByStartedAt,
+        startDate: queryParams.startDate,
+        endDate: queryParams.endDate
       }
     }),
   {
@@ -56,11 +76,13 @@ const filtersExist = computed(
     queryParams.state ||
     queryParams.search ||
     queryParams.sortByRuntime ||
-    queryParams.sortByStartedAt
+    queryParams.sortByStartedAt ||
+    queryParams.startDate ||
+    queryParams.endDate
 )
 
 watch(queryParams, async () => {
-  router.replace({
+  router.push({
     path: '/tasks',
     query: {
       ...queryParams
@@ -84,10 +106,13 @@ const searchSubmit = () => {
 }
 
 const clearFilters = () => {
-  queryParams.state = undefined
-  queryParams.search = undefined
-  queryParams.sortByRuntime = undefined
-  queryParams.sortByStartedAt = undefined
+  router.push({
+    path: '/tasks',
+    query: {
+      page: route.query.perPage,
+      perPage: route.query.perPage
+    }
+  })
 }
 
 const sortHandler = (field: 'runtime' | 'startedAt', order: 'asc' | 'desc') => {
@@ -139,8 +164,9 @@ const handlePrev = () => {
           </NuxtLink>
         </Button>
       </div>
-      <div class="row mb-3">
+      <div class="mb-3">
         <div class="flex gap-3">
+          <RangePicker />
           <div>
             <Button
               variant="outline"
@@ -185,7 +211,10 @@ const handlePrev = () => {
       </div>
     </div>
 
-    <TasksTable :data="data" />
+    <TasksTable
+      v-if="data"
+      :data="data"
+    />
 
     <div class="flex mt-3 justify-between">
       <div>
diff --git a/src/server/api/tasks/backup.get.ts b/src/server/api/tasks/backup.get.ts
index e4b7ccf..d086cdc 100644
--- a/src/server/api/tasks/backup.get.ts
+++ b/src/server/api/tasks/backup.get.ts
@@ -1,6 +1,7 @@
 import fs from 'fs'
 import { db } from '~/server/db'
 import { envVariables } from '~/server/env'
+import { utcNow } from '~/server/utils'
 
 export default defineEventHandler(async (event) => {
   // TODO(future): add check if mode is WAL from dotenv
@@ -8,8 +9,14 @@ export default defineEventHandler(async (event) => {
   await db.$client.backup(envVariables.backupFilePath)
   const stream = fs.createReadStream(envVariables.backupFilePath)
 
+  const now = utcNow()
+  const formatted = now.format('YYYY-MM-DD HH-mm-ss')
   setHeader(event, 'Content-Type', 'application/octet-stream')
-  setHeader(event, 'Content-Disposition', 'attachment; filename="backup.db"')
+  setHeader(
+    event,
+    'Content-Disposition',
+    `attachment; filename="${formatted}-backup.db"`
+  )
 
   return sendStream(event, stream)
 })
diff --git a/src/server/api/tasks/index.get.ts b/src/server/api/tasks/index.get.ts
index ea668b2..20656ed 100644
--- a/src/server/api/tasks/index.get.ts
+++ b/src/server/api/tasks/index.get.ts
@@ -11,7 +11,9 @@ export default defineEventHandler(async (event) => {
     offset: query.offset,
     state: query.state,
     sortByRuntime: query.sortByRuntime,
-    sortByStartedAt: query.sortByStartedAt
+    sortByStartedAt: query.sortByStartedAt,
+    startDate: query.startDate ? new Date(query.startDate) : undefined,
+    endDate: query.endDate ? new Date(query.endDate) : undefined
   })
 
   return { tasks, count }
diff --git a/src/server/repositories/tasks.ts b/src/server/repositories/tasks.ts
index 5a608d9..7a8709e 100644
--- a/src/server/repositories/tasks.ts
+++ b/src/server/repositories/tasks.ts
@@ -1,7 +1,7 @@
 import { db } from '../db'
 import { tasksTable } from '../db/schema'
 import { takeUniqueOrThrow } from '../utils'
-import { count, eq, desc, like, and, asc } from 'drizzle-orm'
+import { count, eq, desc, like, and, asc, gte, lte } from 'drizzle-orm'
 
 export type TaskState = 'running' | 'success' | 'failed' | 'abandoned'
 
@@ -12,7 +12,9 @@ class TasksRepository {
     limit,
     offset,
     sortByRuntime,
-    sortByStartedAt
+    sortByStartedAt,
+    startDate,
+    endDate
   }: {
     limit: number
     offset: number
@@ -20,10 +22,22 @@ class TasksRepository {
     state?: 'success' | 'running' | 'failure' | 'abandoned'
     sortByRuntime?: 'asc' | 'desc'
     sortByStartedAt?: 'asc' | 'desc'
+    startDate?: Date
+    endDate?: Date
   }) {
-    const whereCondition = name
-      ? like(tasksTable.name, `%${name.toLowerCase()}%`)
-      : undefined
+    const whereConditions = []
+    if (name) {
+      whereConditions.push(like(tasksTable.name, `%${name.toLowerCase()}%`))
+    }
+    if (state) {
+      whereConditions.push(eq(tasksTable.state, state))
+    }
+    if (startDate) {
+      whereConditions.push(gte(tasksTable.startedAt, startDate))
+    }
+    if (endDate) {
+      whereConditions.push(lte(tasksTable.startedAt, endDate))
+    }
 
     const orderMap = { asc, desc }
     const sortConditions = []
@@ -36,23 +50,21 @@ class TasksRepository {
     if (sortConditions.length === 0) {
       sortConditions.push(desc(tasksTable.startedAt))
     }
+    if (startDate) {
+    }
 
     const countResult = await db
       .select({
         count: count()
       })
       .from(tasksTable)
-      .where(
-        and(whereCondition, state ? eq(tasksTable.state, state) : undefined)
-      )
+      .where(and(...whereConditions))
       .then(takeUniqueOrThrow)
 
     const tasks = await db
       .select()
       .from(tasksTable)
-      .where(
-        and(whereCondition, state ? eq(tasksTable.state, state) : undefined)
-      )
+      .where(and(...whereConditions))
       .orderBy(...sortConditions)
       .limit(limit)
       .offset(offset)
diff --git a/src/server/schemas/tasks.ts b/src/server/schemas/tasks.ts
index 26752de..f57bddc 100644
--- a/src/server/schemas/tasks.ts
+++ b/src/server/schemas/tasks.ts
@@ -25,5 +25,7 @@ export const getTasksQueryParamsSchema = z.object({
   offset: z.coerce.number().gte(0),
   state: z.enum(['success', 'running', 'failure', 'abandoned']).optional(),
   sortByRuntime: z.enum(['asc', 'desc']).optional(),
-  sortByStartedAt: z.enum(['asc', 'desc']).optional()
+  sortByStartedAt: z.enum(['asc', 'desc']).optional(),
+  startDate: z.string().date().optional(),
+  endDate: z.string().date().optional()
 })
diff --git a/src/server/utils.ts b/src/server/utils.ts
index bd977ca..8f843ee 100644
--- a/src/server/utils.ts
+++ b/src/server/utils.ts
@@ -1,7 +1,15 @@
-import { NotFoundError } from "./exceptions"
+import dayjs from 'dayjs'
+import utc from 'dayjs/plugin/utc'
+import { NotFoundError } from './exceptions'
+
+dayjs.extend(utc)
 
 export const takeUniqueOrThrow = <T extends any[]>(values: T): T[number] => {
   if (values.length !== 1)
-    throw new NotFoundError("Found non unique or inexistent value")
+    throw new NotFoundError('Found non unique or inexistent value')
   return values[0]!
 }
+
+export const utcNow = () => {
+  return dayjs.utc()
+}