diff --git a/.prettierrc b/.prettierrc
index 7b5c861b..58e54f14 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,4 +1,4 @@
 {
   "plugins": ["prettier-plugin-tailwindcss"],
   "tailwindStylesheet": "./app/globals.css"
-}
\ No newline at end of file
+}
diff --git a/README.md b/README.md
index 011e0c9e..2b001613 100644
--- a/README.md
+++ b/README.md
@@ -1,42 +1,32 @@
-# frontend
+# plancake Frontend
 
-This is where the frontend of tomeeto is!
-
-Current Tasks: - Build Mockups for all of the pages - Redesign the Create Event Page - Wait for Database man to do the funny backend thing
-
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+This repository contains the frontend code for plancake.
 
 ## Getting Started
 
-First, run the development server:
+To clone and run this application, [Node.js](https://nodejs.org/en/download/) (which comes with [npm](http://npmjs.com)) installed on your computer:
 
 ```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
+npm install npm@latest -g
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
-
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+### Installation
 
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
+```bash
+# Clone this repository
+$ git clone https://github.com/tomeeto/frontend.git
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+# Install dependencies
+$ npm install
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+# Run the app
+$ npm run dev
+```
 
-## Deploy on Vercel
+## Credits
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+This project is built with the following:
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+- [Next.js](https://nextjs.org/)
+- [Tailwind.css](https://tailwindcss.com/)
+- [Radix UI Elements](https://www.radix-ui.com/)
diff --git a/app/_lib/classname.ts b/app/_lib/classname.ts
new file mode 100644
index 00000000..d1ff4c93
--- /dev/null
+++ b/app/_lib/classname.ts
@@ -0,0 +1,7 @@
+// utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: any[]) {
+  return twMerge(clsx(inputs));
+}
diff --git a/app/_lib/grouped-timezones.ts b/app/_lib/grouped-timezones.ts
new file mode 100644
index 00000000..67b3d00e
--- /dev/null
+++ b/app/_lib/grouped-timezones.ts
@@ -0,0 +1,1721 @@
+// Auto-generated timezone list
+export const groupedTimezones = [
+  {
+    label: "Africa",
+    options: [
+      {
+        label: "Abidjan (GMT0:00)",
+        value: "Africa/Abidjan",
+      },
+      {
+        label: "Accra (GMT0:00)",
+        value: "Africa/Accra",
+      },
+      {
+        label: "Addis Ababa (GMT+3:00)",
+        value: "Africa/Addis_Ababa",
+      },
+      {
+        label: "Algiers (GMT+1:00)",
+        value: "Africa/Algiers",
+      },
+      {
+        label: "Asmera (GMT+3:00)",
+        value: "Africa/Asmera",
+      },
+      {
+        label: "Bamako (GMT0:00)",
+        value: "Africa/Bamako",
+      },
+      {
+        label: "Bangui (GMT+1:00)",
+        value: "Africa/Bangui",
+      },
+      {
+        label: "Banjul (GMT0:00)",
+        value: "Africa/Banjul",
+      },
+      {
+        label: "Bissau (GMT0:00)",
+        value: "Africa/Bissau",
+      },
+      {
+        label: "Blantyre (GMT+2:00)",
+        value: "Africa/Blantyre",
+      },
+      {
+        label: "Brazzaville (GMT+1:00)",
+        value: "Africa/Brazzaville",
+      },
+      {
+        label: "Bujumbura (GMT+2:00)",
+        value: "Africa/Bujumbura",
+      },
+      {
+        label: "Cairo (GMT+3:00)",
+        value: "Africa/Cairo",
+      },
+      {
+        label: "Casablanca (GMT+1:00)",
+        value: "Africa/Casablanca",
+      },
+      {
+        label: "Ceuta (GMT+2:00)",
+        value: "Africa/Ceuta",
+      },
+      {
+        label: "Conakry (GMT0:00)",
+        value: "Africa/Conakry",
+      },
+      {
+        label: "Dakar (GMT0:00)",
+        value: "Africa/Dakar",
+      },
+      {
+        label: "Dar es Salaam (GMT+3:00)",
+        value: "Africa/Dar_es_Salaam",
+      },
+      {
+        label: "Djibouti (GMT+3:00)",
+        value: "Africa/Djibouti",
+      },
+      {
+        label: "Douala (GMT+1:00)",
+        value: "Africa/Douala",
+      },
+      {
+        label: "El Aaiun (GMT+1:00)",
+        value: "Africa/El_Aaiun",
+      },
+      {
+        label: "Freetown (GMT0:00)",
+        value: "Africa/Freetown",
+      },
+      {
+        label: "Gaborone (GMT+2:00)",
+        value: "Africa/Gaborone",
+      },
+      {
+        label: "Harare (GMT+2:00)",
+        value: "Africa/Harare",
+      },
+      {
+        label: "Johannesburg (GMT+2:00)",
+        value: "Africa/Johannesburg",
+      },
+      {
+        label: "Juba (GMT+2:00)",
+        value: "Africa/Juba",
+      },
+      {
+        label: "Kampala (GMT+3:00)",
+        value: "Africa/Kampala",
+      },
+      {
+        label: "Khartoum (GMT+2:00)",
+        value: "Africa/Khartoum",
+      },
+      {
+        label: "Kigali (GMT+2:00)",
+        value: "Africa/Kigali",
+      },
+      {
+        label: "Kinshasa (GMT+1:00)",
+        value: "Africa/Kinshasa",
+      },
+      {
+        label: "Lagos (GMT+1:00)",
+        value: "Africa/Lagos",
+      },
+      {
+        label: "Libreville (GMT+1:00)",
+        value: "Africa/Libreville",
+      },
+      {
+        label: "Lome (GMT0:00)",
+        value: "Africa/Lome",
+      },
+      {
+        label: "Luanda (GMT+1:00)",
+        value: "Africa/Luanda",
+      },
+      {
+        label: "Lubumbashi (GMT+2:00)",
+        value: "Africa/Lubumbashi",
+      },
+      {
+        label: "Lusaka (GMT+2:00)",
+        value: "Africa/Lusaka",
+      },
+      {
+        label: "Malabo (GMT+1:00)",
+        value: "Africa/Malabo",
+      },
+      {
+        label: "Maputo (GMT+2:00)",
+        value: "Africa/Maputo",
+      },
+      {
+        label: "Maseru (GMT+2:00)",
+        value: "Africa/Maseru",
+      },
+      {
+        label: "Mbabane (GMT+2:00)",
+        value: "Africa/Mbabane",
+      },
+      {
+        label: "Mogadishu (GMT+3:00)",
+        value: "Africa/Mogadishu",
+      },
+      {
+        label: "Monrovia (GMT0:00)",
+        value: "Africa/Monrovia",
+      },
+      {
+        label: "Nairobi (GMT+3:00)",
+        value: "Africa/Nairobi",
+      },
+      {
+        label: "Ndjamena (GMT+1:00)",
+        value: "Africa/Ndjamena",
+      },
+      {
+        label: "Niamey (GMT+1:00)",
+        value: "Africa/Niamey",
+      },
+      {
+        label: "Nouakchott (GMT0:00)",
+        value: "Africa/Nouakchott",
+      },
+      {
+        label: "Ouagadougou (GMT0:00)",
+        value: "Africa/Ouagadougou",
+      },
+      {
+        label: "Porto-Novo (GMT+1:00)",
+        value: "Africa/Porto-Novo",
+      },
+      {
+        label: "Sao Tome (GMT0:00)",
+        value: "Africa/Sao_Tome",
+      },
+      {
+        label: "Tripoli (GMT+2:00)",
+        value: "Africa/Tripoli",
+      },
+      {
+        label: "Tunis (GMT+1:00)",
+        value: "Africa/Tunis",
+      },
+      {
+        label: "Windhoek (GMT+2:00)",
+        value: "Africa/Windhoek",
+      },
+    ],
+  },
+  {
+    label: "America",
+    options: [
+      {
+        label: "Adak (GMT-9:00)",
+        value: "America/Adak",
+      },
+      {
+        label: "Anchorage (GMT-8:00)",
+        value: "America/Anchorage",
+      },
+      {
+        label: "Anguilla (GMT-4:00)",
+        value: "America/Anguilla",
+      },
+      {
+        label: "Antigua (GMT-4:00)",
+        value: "America/Antigua",
+      },
+      {
+        label: "Araguaina (GMT-3:00)",
+        value: "America/Araguaina",
+      },
+      {
+        label: "Aruba (GMT-4:00)",
+        value: "America/Aruba",
+      },
+      {
+        label: "Asuncion (GMT-3:00)",
+        value: "America/Asuncion",
+      },
+      {
+        label: "Bahia (GMT-3:00)",
+        value: "America/Bahia",
+      },
+      {
+        label: "Bahia Banderas (GMT-6:00)",
+        value: "America/Bahia_Banderas",
+      },
+      {
+        label: "Barbados (GMT-4:00)",
+        value: "America/Barbados",
+      },
+      {
+        label: "Belem (GMT-3:00)",
+        value: "America/Belem",
+      },
+      {
+        label: "Belize (GMT-6:00)",
+        value: "America/Belize",
+      },
+      {
+        label: "Beulah (GMT-5:00)",
+        value: "America/North_Dakota/Beulah",
+      },
+      {
+        label: "Blanc-Sablon (GMT-4:00)",
+        value: "America/Blanc-Sablon",
+      },
+      {
+        label: "Boa Vista (GMT-4:00)",
+        value: "America/Boa_Vista",
+      },
+      {
+        label: "Bogota (GMT-5:00)",
+        value: "America/Bogota",
+      },
+      {
+        label: "Boise (GMT-6:00)",
+        value: "America/Boise",
+      },
+      {
+        label: "Buenos Aires (GMT-3:00)",
+        value: "America/Buenos_Aires",
+      },
+      {
+        label: "Cambridge Bay (GMT-6:00)",
+        value: "America/Cambridge_Bay",
+      },
+      {
+        label: "Campo Grande (GMT-4:00)",
+        value: "America/Campo_Grande",
+      },
+      {
+        label: "Cancun (GMT-5:00)",
+        value: "America/Cancun",
+      },
+      {
+        label: "Caracas (GMT-4:00)",
+        value: "America/Caracas",
+      },
+      {
+        label: "Catamarca (GMT-3:00)",
+        value: "America/Catamarca",
+      },
+      {
+        label: "Cayenne (GMT-3:00)",
+        value: "America/Cayenne",
+      },
+      {
+        label: "Cayman (GMT-5:00)",
+        value: "America/Cayman",
+      },
+      {
+        label: "Center (GMT-5:00)",
+        value: "America/North_Dakota/Center",
+      },
+      {
+        label: "Chicago (GMT-5:00)",
+        value: "America/Chicago",
+      },
+      {
+        label: "Chihuahua (GMT-6:00)",
+        value: "America/Chihuahua",
+      },
+      {
+        label: "Ciudad Juarez (GMT-6:00)",
+        value: "America/Ciudad_Juarez",
+      },
+      {
+        label: "Coral Harbour (GMT-5:00)",
+        value: "America/Coral_Harbour",
+      },
+      {
+        label: "Cordoba (GMT-3:00)",
+        value: "America/Cordoba",
+      },
+      {
+        label: "Costa Rica (GMT-6:00)",
+        value: "America/Costa_Rica",
+      },
+      {
+        label: "Creston (GMT-7:00)",
+        value: "America/Creston",
+      },
+      {
+        label: "Cuiaba (GMT-4:00)",
+        value: "America/Cuiaba",
+      },
+      {
+        label: "Curacao (GMT-4:00)",
+        value: "America/Curacao",
+      },
+      {
+        label: "Danmarkshavn (GMT0:00)",
+        value: "America/Danmarkshavn",
+      },
+      {
+        label: "Dawson (GMT-7:00)",
+        value: "America/Dawson",
+      },
+      {
+        label: "Dawson Creek (GMT-7:00)",
+        value: "America/Dawson_Creek",
+      },
+      {
+        label: "Denver (GMT-6:00)",
+        value: "America/Denver",
+      },
+      {
+        label: "Detroit (GMT-4:00)",
+        value: "America/Detroit",
+      },
+      {
+        label: "Dominica (GMT-4:00)",
+        value: "America/Dominica",
+      },
+      {
+        label: "Edmonton (GMT-6:00)",
+        value: "America/Edmonton",
+      },
+      {
+        label: "Eirunepe (GMT-5:00)",
+        value: "America/Eirunepe",
+      },
+      {
+        label: "El Salvador (GMT-6:00)",
+        value: "America/El_Salvador",
+      },
+      {
+        label: "Fort Nelson (GMT-7:00)",
+        value: "America/Fort_Nelson",
+      },
+      {
+        label: "Fortaleza (GMT-3:00)",
+        value: "America/Fortaleza",
+      },
+      {
+        label: "Glace Bay (GMT-3:00)",
+        value: "America/Glace_Bay",
+      },
+      {
+        label: "Godthab (GMT-1:00)",
+        value: "America/Godthab",
+      },
+      {
+        label: "Goose Bay (GMT-3:00)",
+        value: "America/Goose_Bay",
+      },
+      {
+        label: "Grand Turk (GMT-4:00)",
+        value: "America/Grand_Turk",
+      },
+      {
+        label: "Grenada (GMT-4:00)",
+        value: "America/Grenada",
+      },
+      {
+        label: "Guadeloupe (GMT-4:00)",
+        value: "America/Guadeloupe",
+      },
+      {
+        label: "Guatemala (GMT-6:00)",
+        value: "America/Guatemala",
+      },
+      {
+        label: "Guayaquil (GMT-5:00)",
+        value: "America/Guayaquil",
+      },
+      {
+        label: "Guyana (GMT-4:00)",
+        value: "America/Guyana",
+      },
+      {
+        label: "Halifax (GMT-3:00)",
+        value: "America/Halifax",
+      },
+      {
+        label: "Havana (GMT-4:00)",
+        value: "America/Havana",
+      },
+      {
+        label: "Hermosillo (GMT-7:00)",
+        value: "America/Hermosillo",
+      },
+      {
+        label: "Indianapolis (GMT-4:00)",
+        value: "America/Indianapolis",
+      },
+      {
+        label: "Inuvik (GMT-6:00)",
+        value: "America/Inuvik",
+      },
+      {
+        label: "Iqaluit (GMT-4:00)",
+        value: "America/Iqaluit",
+      },
+      {
+        label: "Jamaica (GMT-5:00)",
+        value: "America/Jamaica",
+      },
+      {
+        label: "Jujuy (GMT-3:00)",
+        value: "America/Jujuy",
+      },
+      {
+        label: "Juneau (GMT-8:00)",
+        value: "America/Juneau",
+      },
+      {
+        label: "Knox (GMT-5:00)",
+        value: "America/Indiana/Knox",
+      },
+      {
+        label: "Kralendijk (GMT-4:00)",
+        value: "America/Kralendijk",
+      },
+      {
+        label: "La Paz (GMT-4:00)",
+        value: "America/La_Paz",
+      },
+      {
+        label: "La Rioja (GMT-3:00)",
+        value: "America/Argentina/La_Rioja",
+      },
+      {
+        label: "Lima (GMT-5:00)",
+        value: "America/Lima",
+      },
+      {
+        label: "Los Angeles (GMT-7:00)",
+        value: "America/Los_Angeles",
+      },
+      {
+        label: "Louisville (GMT-4:00)",
+        value: "America/Louisville",
+      },
+      {
+        label: "Lower Princes (GMT-4:00)",
+        value: "America/Lower_Princes",
+      },
+      {
+        label: "Maceio (GMT-3:00)",
+        value: "America/Maceio",
+      },
+      {
+        label: "Managua (GMT-6:00)",
+        value: "America/Managua",
+      },
+      {
+        label: "Manaus (GMT-4:00)",
+        value: "America/Manaus",
+      },
+      {
+        label: "Marengo (GMT-4:00)",
+        value: "America/Indiana/Marengo",
+      },
+      {
+        label: "Marigot (GMT-4:00)",
+        value: "America/Marigot",
+      },
+      {
+        label: "Martinique (GMT-4:00)",
+        value: "America/Martinique",
+      },
+      {
+        label: "Matamoros (GMT-5:00)",
+        value: "America/Matamoros",
+      },
+      {
+        label: "Mazatlan (GMT-7:00)",
+        value: "America/Mazatlan",
+      },
+      {
+        label: "Mendoza (GMT-3:00)",
+        value: "America/Mendoza",
+      },
+      {
+        label: "Menominee (GMT-5:00)",
+        value: "America/Menominee",
+      },
+      {
+        label: "Merida (GMT-6:00)",
+        value: "America/Merida",
+      },
+      {
+        label: "Metlakatla (GMT-8:00)",
+        value: "America/Metlakatla",
+      },
+      {
+        label: "Mexico City (GMT-6:00)",
+        value: "America/Mexico_City",
+      },
+      {
+        label: "Miquelon (GMT-2:00)",
+        value: "America/Miquelon",
+      },
+      {
+        label: "Moncton (GMT-3:00)",
+        value: "America/Moncton",
+      },
+      {
+        label: "Monterrey (GMT-6:00)",
+        value: "America/Monterrey",
+      },
+      {
+        label: "Montevideo (GMT-3:00)",
+        value: "America/Montevideo",
+      },
+      {
+        label: "Monticello (GMT-4:00)",
+        value: "America/Kentucky/Monticello",
+      },
+      {
+        label: "Montserrat (GMT-4:00)",
+        value: "America/Montserrat",
+      },
+      {
+        label: "Nassau (GMT-4:00)",
+        value: "America/Nassau",
+      },
+      {
+        label: "New Salem (GMT-5:00)",
+        value: "America/North_Dakota/New_Salem",
+      },
+      {
+        label: "New York (GMT-4:00)",
+        value: "America/New_York",
+      },
+      {
+        label: "Nome (GMT-8:00)",
+        value: "America/Nome",
+      },
+      {
+        label: "Noronha (GMT-2:00)",
+        value: "America/Noronha",
+      },
+      {
+        label: "Ojinaga (GMT-5:00)",
+        value: "America/Ojinaga",
+      },
+      {
+        label: "Panama (GMT-5:00)",
+        value: "America/Panama",
+      },
+      {
+        label: "Paramaribo (GMT-3:00)",
+        value: "America/Paramaribo",
+      },
+      {
+        label: "Petersburg (GMT-4:00)",
+        value: "America/Indiana/Petersburg",
+      },
+      {
+        label: "Phoenix (GMT-7:00)",
+        value: "America/Phoenix",
+      },
+      {
+        label: "Port of Spain (GMT-4:00)",
+        value: "America/Port_of_Spain",
+      },
+      {
+        label: "Port-au-Prince (GMT-4:00)",
+        value: "America/Port-au-Prince",
+      },
+      {
+        label: "Porto Velho (GMT-4:00)",
+        value: "America/Porto_Velho",
+      },
+      {
+        label: "Puerto Rico (GMT-4:00)",
+        value: "America/Puerto_Rico",
+      },
+      {
+        label: "Punta Arenas (GMT-3:00)",
+        value: "America/Punta_Arenas",
+      },
+      {
+        label: "Rankin Inlet (GMT-5:00)",
+        value: "America/Rankin_Inlet",
+      },
+      {
+        label: "Recife (GMT-3:00)",
+        value: "America/Recife",
+      },
+      {
+        label: "Regina (GMT-6:00)",
+        value: "America/Regina",
+      },
+      {
+        label: "Resolute (GMT-5:00)",
+        value: "America/Resolute",
+      },
+      {
+        label: "Rio Branco (GMT-5:00)",
+        value: "America/Rio_Branco",
+      },
+      {
+        label: "Rio Gallegos (GMT-3:00)",
+        value: "America/Argentina/Rio_Gallegos",
+      },
+      {
+        label: "Salta (GMT-3:00)",
+        value: "America/Argentina/Salta",
+      },
+      {
+        label: "San Juan (GMT-3:00)",
+        value: "America/Argentina/San_Juan",
+      },
+      {
+        label: "San Luis (GMT-3:00)",
+        value: "America/Argentina/San_Luis",
+      },
+      {
+        label: "Santarem (GMT-3:00)",
+        value: "America/Santarem",
+      },
+      {
+        label: "Santiago (GMT-4:00)",
+        value: "America/Santiago",
+      },
+      {
+        label: "Santo Domingo (GMT-4:00)",
+        value: "America/Santo_Domingo",
+      },
+      {
+        label: "Sao Paulo (GMT-3:00)",
+        value: "America/Sao_Paulo",
+      },
+      {
+        label: "Scoresbysund (GMT-1:00)",
+        value: "America/Scoresbysund",
+      },
+      {
+        label: "Sitka (GMT-8:00)",
+        value: "America/Sitka",
+      },
+      {
+        label: "St Barthelemy (GMT-4:00)",
+        value: "America/St_Barthelemy",
+      },
+      {
+        label: "St Johns (GMT-2:30)",
+        value: "America/St_Johns",
+      },
+      {
+        label: "St Kitts (GMT-4:00)",
+        value: "America/St_Kitts",
+      },
+      {
+        label: "St Lucia (GMT-4:00)",
+        value: "America/St_Lucia",
+      },
+      {
+        label: "St Thomas (GMT-4:00)",
+        value: "America/St_Thomas",
+      },
+      {
+        label: "St Vincent (GMT-4:00)",
+        value: "America/St_Vincent",
+      },
+      {
+        label: "Swift Current (GMT-6:00)",
+        value: "America/Swift_Current",
+      },
+      {
+        label: "Tegucigalpa (GMT-6:00)",
+        value: "America/Tegucigalpa",
+      },
+      {
+        label: "Tell City (GMT-5:00)",
+        value: "America/Indiana/Tell_City",
+      },
+      {
+        label: "Thule (GMT-3:00)",
+        value: "America/Thule",
+      },
+      {
+        label: "Tijuana (GMT-7:00)",
+        value: "America/Tijuana",
+      },
+      {
+        label: "Toronto (GMT-4:00)",
+        value: "America/Toronto",
+      },
+      {
+        label: "Tortola (GMT-4:00)",
+        value: "America/Tortola",
+      },
+      {
+        label: "Tucuman (GMT-3:00)",
+        value: "America/Argentina/Tucuman",
+      },
+      {
+        label: "Ushuaia (GMT-3:00)",
+        value: "America/Argentina/Ushuaia",
+      },
+      {
+        label: "Vancouver (GMT-7:00)",
+        value: "America/Vancouver",
+      },
+      {
+        label: "Vevay (GMT-4:00)",
+        value: "America/Indiana/Vevay",
+      },
+      {
+        label: "Vincennes (GMT-4:00)",
+        value: "America/Indiana/Vincennes",
+      },
+      {
+        label: "Whitehorse (GMT-7:00)",
+        value: "America/Whitehorse",
+      },
+      {
+        label: "Winamac (GMT-4:00)",
+        value: "America/Indiana/Winamac",
+      },
+      {
+        label: "Winnipeg (GMT-5:00)",
+        value: "America/Winnipeg",
+      },
+      {
+        label: "Yakutat (GMT-8:00)",
+        value: "America/Yakutat",
+      },
+    ],
+  },
+  {
+    label: "Antarctica",
+    options: [
+      {
+        label: "Casey (GMT+8:00)",
+        value: "Antarctica/Casey",
+      },
+      {
+        label: "Davis (GMT+7:00)",
+        value: "Antarctica/Davis",
+      },
+      {
+        label: "DumontDUrville (GMT+10:00)",
+        value: "Antarctica/DumontDUrville",
+      },
+      {
+        label: "Macquarie (GMT+10:00)",
+        value: "Antarctica/Macquarie",
+      },
+      {
+        label: "Mawson (GMT+5:00)",
+        value: "Antarctica/Mawson",
+      },
+      {
+        label: "McMurdo (GMT+12:00)",
+        value: "Antarctica/McMurdo",
+      },
+      {
+        label: "Palmer (GMT-3:00)",
+        value: "Antarctica/Palmer",
+      },
+      {
+        label: "Rothera (GMT-3:00)",
+        value: "Antarctica/Rothera",
+      },
+      {
+        label: "Syowa (GMT+3:00)",
+        value: "Antarctica/Syowa",
+      },
+      {
+        label: "Troll (GMT+2:00)",
+        value: "Antarctica/Troll",
+      },
+      {
+        label: "Vostok (GMT+5:00)",
+        value: "Antarctica/Vostok",
+      },
+    ],
+  },
+  {
+    label: "Arctic",
+    options: [
+      {
+        label: "Longyearbyen (GMT+2:00)",
+        value: "Arctic/Longyearbyen",
+      },
+    ],
+  },
+  {
+    label: "Asia",
+    options: [
+      {
+        label: "Aden (GMT+3:00)",
+        value: "Asia/Aden",
+      },
+      {
+        label: "Almaty (GMT+5:00)",
+        value: "Asia/Almaty",
+      },
+      {
+        label: "Amman (GMT+3:00)",
+        value: "Asia/Amman",
+      },
+      {
+        label: "Anadyr (GMT+12:00)",
+        value: "Asia/Anadyr",
+      },
+      {
+        label: "Aqtau (GMT+5:00)",
+        value: "Asia/Aqtau",
+      },
+      {
+        label: "Aqtobe (GMT+5:00)",
+        value: "Asia/Aqtobe",
+      },
+      {
+        label: "Ashgabat (GMT+5:00)",
+        value: "Asia/Ashgabat",
+      },
+      {
+        label: "Atyrau (GMT+5:00)",
+        value: "Asia/Atyrau",
+      },
+      {
+        label: "Baghdad (GMT+3:00)",
+        value: "Asia/Baghdad",
+      },
+      {
+        label: "Bahrain (GMT+3:00)",
+        value: "Asia/Bahrain",
+      },
+      {
+        label: "Baku (GMT+4:00)",
+        value: "Asia/Baku",
+      },
+      {
+        label: "Bangkok (GMT+7:00)",
+        value: "Asia/Bangkok",
+      },
+      {
+        label: "Barnaul (GMT+7:00)",
+        value: "Asia/Barnaul",
+      },
+      {
+        label: "Beirut (GMT+3:00)",
+        value: "Asia/Beirut",
+      },
+      {
+        label: "Bishkek (GMT+6:00)",
+        value: "Asia/Bishkek",
+      },
+      {
+        label: "Brunei (GMT+8:00)",
+        value: "Asia/Brunei",
+      },
+      {
+        label: "Calcutta (GMT+5:30)",
+        value: "Asia/Calcutta",
+      },
+      {
+        label: "Chita (GMT+9:00)",
+        value: "Asia/Chita",
+      },
+      {
+        label: "Colombo (GMT+5:30)",
+        value: "Asia/Colombo",
+      },
+      {
+        label: "Damascus (GMT+3:00)",
+        value: "Asia/Damascus",
+      },
+      {
+        label: "Dhaka (GMT+6:00)",
+        value: "Asia/Dhaka",
+      },
+      {
+        label: "Dili (GMT+9:00)",
+        value: "Asia/Dili",
+      },
+      {
+        label: "Dubai (GMT+4:00)",
+        value: "Asia/Dubai",
+      },
+      {
+        label: "Dushanbe (GMT+5:00)",
+        value: "Asia/Dushanbe",
+      },
+      {
+        label: "Famagusta (GMT+3:00)",
+        value: "Asia/Famagusta",
+      },
+      {
+        label: "Gaza (GMT+3:00)",
+        value: "Asia/Gaza",
+      },
+      {
+        label: "Hebron (GMT+3:00)",
+        value: "Asia/Hebron",
+      },
+      {
+        label: "Hong Kong (GMT+8:00)",
+        value: "Asia/Hong_Kong",
+      },
+      {
+        label: "Hovd (GMT+7:00)",
+        value: "Asia/Hovd",
+      },
+      {
+        label: "Irkutsk (GMT+8:00)",
+        value: "Asia/Irkutsk",
+      },
+      {
+        label: "Jakarta (GMT+7:00)",
+        value: "Asia/Jakarta",
+      },
+      {
+        label: "Jayapura (GMT+9:00)",
+        value: "Asia/Jayapura",
+      },
+      {
+        label: "Jerusalem (GMT+3:00)",
+        value: "Asia/Jerusalem",
+      },
+      {
+        label: "Kabul (GMT+4:30)",
+        value: "Asia/Kabul",
+      },
+      {
+        label: "Kamchatka (GMT+12:00)",
+        value: "Asia/Kamchatka",
+      },
+      {
+        label: "Karachi (GMT+5:00)",
+        value: "Asia/Karachi",
+      },
+      {
+        label: "Katmandu (GMT+5:45)",
+        value: "Asia/Katmandu",
+      },
+      {
+        label: "Khandyga (GMT+9:00)",
+        value: "Asia/Khandyga",
+      },
+      {
+        label: "Krasnoyarsk (GMT+7:00)",
+        value: "Asia/Krasnoyarsk",
+      },
+      {
+        label: "Kuala Lumpur (GMT+8:00)",
+        value: "Asia/Kuala_Lumpur",
+      },
+      {
+        label: "Kuching (GMT+8:00)",
+        value: "Asia/Kuching",
+      },
+      {
+        label: "Kuwait (GMT+3:00)",
+        value: "Asia/Kuwait",
+      },
+      {
+        label: "Macau (GMT+8:00)",
+        value: "Asia/Macau",
+      },
+      {
+        label: "Magadan (GMT+11:00)",
+        value: "Asia/Magadan",
+      },
+      {
+        label: "Makassar (GMT+8:00)",
+        value: "Asia/Makassar",
+      },
+      {
+        label: "Manila (GMT+8:00)",
+        value: "Asia/Manila",
+      },
+      {
+        label: "Muscat (GMT+4:00)",
+        value: "Asia/Muscat",
+      },
+      {
+        label: "Nicosia (GMT+3:00)",
+        value: "Asia/Nicosia",
+      },
+      {
+        label: "Novokuznetsk (GMT+7:00)",
+        value: "Asia/Novokuznetsk",
+      },
+      {
+        label: "Novosibirsk (GMT+7:00)",
+        value: "Asia/Novosibirsk",
+      },
+      {
+        label: "Omsk (GMT+6:00)",
+        value: "Asia/Omsk",
+      },
+      {
+        label: "Oral (GMT+5:00)",
+        value: "Asia/Oral",
+      },
+      {
+        label: "Phnom Penh (GMT+7:00)",
+        value: "Asia/Phnom_Penh",
+      },
+      {
+        label: "Pontianak (GMT+7:00)",
+        value: "Asia/Pontianak",
+      },
+      {
+        label: "Pyongyang (GMT+9:00)",
+        value: "Asia/Pyongyang",
+      },
+      {
+        label: "Qatar (GMT+3:00)",
+        value: "Asia/Qatar",
+      },
+      {
+        label: "Qostanay (GMT+5:00)",
+        value: "Asia/Qostanay",
+      },
+      {
+        label: "Qyzylorda (GMT+5:00)",
+        value: "Asia/Qyzylorda",
+      },
+      {
+        label: "Rangoon (GMT+6:30)",
+        value: "Asia/Rangoon",
+      },
+      {
+        label: "Riyadh (GMT+3:00)",
+        value: "Asia/Riyadh",
+      },
+      {
+        label: "Saigon (GMT+7:00)",
+        value: "Asia/Saigon",
+      },
+      {
+        label: "Sakhalin (GMT+11:00)",
+        value: "Asia/Sakhalin",
+      },
+      {
+        label: "Samarkand (GMT+5:00)",
+        value: "Asia/Samarkand",
+      },
+      {
+        label: "Seoul (GMT+9:00)",
+        value: "Asia/Seoul",
+      },
+      {
+        label: "Shanghai (GMT+8:00)",
+        value: "Asia/Shanghai",
+      },
+      {
+        label: "Singapore (GMT+8:00)",
+        value: "Asia/Singapore",
+      },
+      {
+        label: "Srednekolymsk (GMT+11:00)",
+        value: "Asia/Srednekolymsk",
+      },
+      {
+        label: "Taipei (GMT+8:00)",
+        value: "Asia/Taipei",
+      },
+      {
+        label: "Tashkent (GMT+5:00)",
+        value: "Asia/Tashkent",
+      },
+      {
+        label: "Tbilisi (GMT+4:00)",
+        value: "Asia/Tbilisi",
+      },
+      {
+        label: "Tehran (GMT+3:30)",
+        value: "Asia/Tehran",
+      },
+      {
+        label: "Thimphu (GMT+6:00)",
+        value: "Asia/Thimphu",
+      },
+      {
+        label: "Tokyo (GMT+9:00)",
+        value: "Asia/Tokyo",
+      },
+      {
+        label: "Tomsk (GMT+7:00)",
+        value: "Asia/Tomsk",
+      },
+      {
+        label: "Ulaanbaatar (GMT+8:00)",
+        value: "Asia/Ulaanbaatar",
+      },
+      {
+        label: "Urumqi (GMT+6:00)",
+        value: "Asia/Urumqi",
+      },
+      {
+        label: "Ust-Nera (GMT+10:00)",
+        value: "Asia/Ust-Nera",
+      },
+      {
+        label: "Vientiane (GMT+7:00)",
+        value: "Asia/Vientiane",
+      },
+      {
+        label: "Vladivostok (GMT+10:00)",
+        value: "Asia/Vladivostok",
+      },
+      {
+        label: "Yakutsk (GMT+9:00)",
+        value: "Asia/Yakutsk",
+      },
+      {
+        label: "Yekaterinburg (GMT+5:00)",
+        value: "Asia/Yekaterinburg",
+      },
+      {
+        label: "Yerevan (GMT+4:00)",
+        value: "Asia/Yerevan",
+      },
+    ],
+  },
+  {
+    label: "Atlantic",
+    options: [
+      {
+        label: "Azores (GMT0:00)",
+        value: "Atlantic/Azores",
+      },
+      {
+        label: "Bermuda (GMT-3:00)",
+        value: "Atlantic/Bermuda",
+      },
+      {
+        label: "Canary (GMT+1:00)",
+        value: "Atlantic/Canary",
+      },
+      {
+        label: "Cape Verde (GMT-1:00)",
+        value: "Atlantic/Cape_Verde",
+      },
+      {
+        label: "Faeroe (GMT+1:00)",
+        value: "Atlantic/Faeroe",
+      },
+      {
+        label: "Madeira (GMT+1:00)",
+        value: "Atlantic/Madeira",
+      },
+      {
+        label: "Reykjavik (GMT0:00)",
+        value: "Atlantic/Reykjavik",
+      },
+      {
+        label: "South Georgia (GMT-2:00)",
+        value: "Atlantic/South_Georgia",
+      },
+      {
+        label: "St Helena (GMT0:00)",
+        value: "Atlantic/St_Helena",
+      },
+      {
+        label: "Stanley (GMT-3:00)",
+        value: "Atlantic/Stanley",
+      },
+    ],
+  },
+  {
+    label: "Australia",
+    options: [
+      {
+        label: "Adelaide (GMT+9:30)",
+        value: "Australia/Adelaide",
+      },
+      {
+        label: "Brisbane (GMT+10:00)",
+        value: "Australia/Brisbane",
+      },
+      {
+        label: "Broken Hill (GMT+9:30)",
+        value: "Australia/Broken_Hill",
+      },
+      {
+        label: "Darwin (GMT+9:30)",
+        value: "Australia/Darwin",
+      },
+      {
+        label: "Eucla (GMT+8:45)",
+        value: "Australia/Eucla",
+      },
+      {
+        label: "Hobart (GMT+10:00)",
+        value: "Australia/Hobart",
+      },
+      {
+        label: "Lindeman (GMT+10:00)",
+        value: "Australia/Lindeman",
+      },
+      {
+        label: "Lord Howe (GMT+10:30)",
+        value: "Australia/Lord_Howe",
+      },
+      {
+        label: "Melbourne (GMT+10:00)",
+        value: "Australia/Melbourne",
+      },
+      {
+        label: "Perth (GMT+8:00)",
+        value: "Australia/Perth",
+      },
+      {
+        label: "Sydney (GMT+10:00)",
+        value: "Australia/Sydney",
+      },
+    ],
+  },
+  {
+    label: "Europe",
+    options: [
+      {
+        label: "Amsterdam (GMT+2:00)",
+        value: "Europe/Amsterdam",
+      },
+      {
+        label: "Andorra (GMT+2:00)",
+        value: "Europe/Andorra",
+      },
+      {
+        label: "Astrakhan (GMT+4:00)",
+        value: "Europe/Astrakhan",
+      },
+      {
+        label: "Athens (GMT+3:00)",
+        value: "Europe/Athens",
+      },
+      {
+        label: "Belgrade (GMT+2:00)",
+        value: "Europe/Belgrade",
+      },
+      {
+        label: "Berlin (GMT+2:00)",
+        value: "Europe/Berlin",
+      },
+      {
+        label: "Bratislava (GMT+2:00)",
+        value: "Europe/Bratislava",
+      },
+      {
+        label: "Brussels (GMT+2:00)",
+        value: "Europe/Brussels",
+      },
+      {
+        label: "Bucharest (GMT+3:00)",
+        value: "Europe/Bucharest",
+      },
+      {
+        label: "Budapest (GMT+2:00)",
+        value: "Europe/Budapest",
+      },
+      {
+        label: "Busingen (GMT+2:00)",
+        value: "Europe/Busingen",
+      },
+      {
+        label: "Chisinau (GMT+3:00)",
+        value: "Europe/Chisinau",
+      },
+      {
+        label: "Copenhagen (GMT+2:00)",
+        value: "Europe/Copenhagen",
+      },
+      {
+        label: "Dublin (GMT+1:00)",
+        value: "Europe/Dublin",
+      },
+      {
+        label: "Gibraltar (GMT+2:00)",
+        value: "Europe/Gibraltar",
+      },
+      {
+        label: "Guernsey (GMT+1:00)",
+        value: "Europe/Guernsey",
+      },
+      {
+        label: "Helsinki (GMT+3:00)",
+        value: "Europe/Helsinki",
+      },
+      {
+        label: "Isle of Man (GMT+1:00)",
+        value: "Europe/Isle_of_Man",
+      },
+      {
+        label: "Istanbul (GMT+3:00)",
+        value: "Europe/Istanbul",
+      },
+      {
+        label: "Jersey (GMT+1:00)",
+        value: "Europe/Jersey",
+      },
+      {
+        label: "Kaliningrad (GMT+2:00)",
+        value: "Europe/Kaliningrad",
+      },
+      {
+        label: "Kiev (GMT+3:00)",
+        value: "Europe/Kiev",
+      },
+      {
+        label: "Kirov (GMT+3:00)",
+        value: "Europe/Kirov",
+      },
+      {
+        label: "Lisbon (GMT+1:00)",
+        value: "Europe/Lisbon",
+      },
+      {
+        label: "Ljubljana (GMT+2:00)",
+        value: "Europe/Ljubljana",
+      },
+      {
+        label: "London (GMT+1:00)",
+        value: "Europe/London",
+      },
+      {
+        label: "Luxembourg (GMT+2:00)",
+        value: "Europe/Luxembourg",
+      },
+      {
+        label: "Madrid (GMT+2:00)",
+        value: "Europe/Madrid",
+      },
+      {
+        label: "Malta (GMT+2:00)",
+        value: "Europe/Malta",
+      },
+      {
+        label: "Mariehamn (GMT+3:00)",
+        value: "Europe/Mariehamn",
+      },
+      {
+        label: "Minsk (GMT+3:00)",
+        value: "Europe/Minsk",
+      },
+      {
+        label: "Monaco (GMT+2:00)",
+        value: "Europe/Monaco",
+      },
+      {
+        label: "Moscow (GMT+3:00)",
+        value: "Europe/Moscow",
+      },
+      {
+        label: "Oslo (GMT+2:00)",
+        value: "Europe/Oslo",
+      },
+      {
+        label: "Paris (GMT+2:00)",
+        value: "Europe/Paris",
+      },
+      {
+        label: "Podgorica (GMT+2:00)",
+        value: "Europe/Podgorica",
+      },
+      {
+        label: "Prague (GMT+2:00)",
+        value: "Europe/Prague",
+      },
+      {
+        label: "Riga (GMT+3:00)",
+        value: "Europe/Riga",
+      },
+      {
+        label: "Rome (GMT+2:00)",
+        value: "Europe/Rome",
+      },
+      {
+        label: "Samara (GMT+4:00)",
+        value: "Europe/Samara",
+      },
+      {
+        label: "San Marino (GMT+2:00)",
+        value: "Europe/San_Marino",
+      },
+      {
+        label: "Sarajevo (GMT+2:00)",
+        value: "Europe/Sarajevo",
+      },
+      {
+        label: "Saratov (GMT+4:00)",
+        value: "Europe/Saratov",
+      },
+      {
+        label: "Simferopol (GMT+3:00)",
+        value: "Europe/Simferopol",
+      },
+      {
+        label: "Skopje (GMT+2:00)",
+        value: "Europe/Skopje",
+      },
+      {
+        label: "Sofia (GMT+3:00)",
+        value: "Europe/Sofia",
+      },
+      {
+        label: "Stockholm (GMT+2:00)",
+        value: "Europe/Stockholm",
+      },
+      {
+        label: "Tallinn (GMT+3:00)",
+        value: "Europe/Tallinn",
+      },
+      {
+        label: "Tirane (GMT+2:00)",
+        value: "Europe/Tirane",
+      },
+      {
+        label: "Ulyanovsk (GMT+4:00)",
+        value: "Europe/Ulyanovsk",
+      },
+      {
+        label: "Vaduz (GMT+2:00)",
+        value: "Europe/Vaduz",
+      },
+      {
+        label: "Vatican (GMT+2:00)",
+        value: "Europe/Vatican",
+      },
+      {
+        label: "Vienna (GMT+2:00)",
+        value: "Europe/Vienna",
+      },
+      {
+        label: "Vilnius (GMT+3:00)",
+        value: "Europe/Vilnius",
+      },
+      {
+        label: "Volgograd (GMT+3:00)",
+        value: "Europe/Volgograd",
+      },
+      {
+        label: "Warsaw (GMT+2:00)",
+        value: "Europe/Warsaw",
+      },
+      {
+        label: "Zagreb (GMT+2:00)",
+        value: "Europe/Zagreb",
+      },
+      {
+        label: "Zurich (GMT+2:00)",
+        value: "Europe/Zurich",
+      },
+    ],
+  },
+  {
+    label: "Indian",
+    options: [
+      {
+        label: "Antananarivo (GMT+3:00)",
+        value: "Indian/Antananarivo",
+      },
+      {
+        label: "Chagos (GMT+6:00)",
+        value: "Indian/Chagos",
+      },
+      {
+        label: "Christmas (GMT+7:00)",
+        value: "Indian/Christmas",
+      },
+      {
+        label: "Cocos (GMT+6:30)",
+        value: "Indian/Cocos",
+      },
+      {
+        label: "Comoro (GMT+3:00)",
+        value: "Indian/Comoro",
+      },
+      {
+        label: "Kerguelen (GMT+5:00)",
+        value: "Indian/Kerguelen",
+      },
+      {
+        label: "Mahe (GMT+4:00)",
+        value: "Indian/Mahe",
+      },
+      {
+        label: "Maldives (GMT+5:00)",
+        value: "Indian/Maldives",
+      },
+      {
+        label: "Mauritius (GMT+4:00)",
+        value: "Indian/Mauritius",
+      },
+      {
+        label: "Mayotte (GMT+3:00)",
+        value: "Indian/Mayotte",
+      },
+      {
+        label: "Reunion (GMT+4:00)",
+        value: "Indian/Reunion",
+      },
+    ],
+  },
+  {
+    label: "Pacific",
+    options: [
+      {
+        label: "Apia (GMT+13:00)",
+        value: "Pacific/Apia",
+      },
+      {
+        label: "Auckland (GMT+12:00)",
+        value: "Pacific/Auckland",
+      },
+      {
+        label: "Bougainville (GMT+11:00)",
+        value: "Pacific/Bougainville",
+      },
+      {
+        label: "Chatham (GMT+12:45)",
+        value: "Pacific/Chatham",
+      },
+      {
+        label: "Easter (GMT-6:00)",
+        value: "Pacific/Easter",
+      },
+      {
+        label: "Efate (GMT+11:00)",
+        value: "Pacific/Efate",
+      },
+      {
+        label: "Enderbury (GMT+13:00)",
+        value: "Pacific/Enderbury",
+      },
+      {
+        label: "Fakaofo (GMT+13:00)",
+        value: "Pacific/Fakaofo",
+      },
+      {
+        label: "Fiji (GMT+12:00)",
+        value: "Pacific/Fiji",
+      },
+      {
+        label: "Funafuti (GMT+12:00)",
+        value: "Pacific/Funafuti",
+      },
+      {
+        label: "Galapagos (GMT-6:00)",
+        value: "Pacific/Galapagos",
+      },
+      {
+        label: "Gambier (GMT-9:00)",
+        value: "Pacific/Gambier",
+      },
+      {
+        label: "Guadalcanal (GMT+11:00)",
+        value: "Pacific/Guadalcanal",
+      },
+      {
+        label: "Guam (GMT+10:00)",
+        value: "Pacific/Guam",
+      },
+      {
+        label: "Honolulu (GMT-10:00)",
+        value: "Pacific/Honolulu",
+      },
+      {
+        label: "Kiritimati (GMT+14:00)",
+        value: "Pacific/Kiritimati",
+      },
+      {
+        label: "Kosrae (GMT+11:00)",
+        value: "Pacific/Kosrae",
+      },
+      {
+        label: "Kwajalein (GMT+12:00)",
+        value: "Pacific/Kwajalein",
+      },
+      {
+        label: "Majuro (GMT+12:00)",
+        value: "Pacific/Majuro",
+      },
+      {
+        label: "Marquesas (GMT-9:30)",
+        value: "Pacific/Marquesas",
+      },
+      {
+        label: "Midway (GMT-11:00)",
+        value: "Pacific/Midway",
+      },
+      {
+        label: "Nauru (GMT+12:00)",
+        value: "Pacific/Nauru",
+      },
+      {
+        label: "Niue (GMT-11:00)",
+        value: "Pacific/Niue",
+      },
+      {
+        label: "Norfolk (GMT+11:00)",
+        value: "Pacific/Norfolk",
+      },
+      {
+        label: "Noumea (GMT+11:00)",
+        value: "Pacific/Noumea",
+      },
+      {
+        label: "Pago Pago (GMT-11:00)",
+        value: "Pacific/Pago_Pago",
+      },
+      {
+        label: "Palau (GMT+9:00)",
+        value: "Pacific/Palau",
+      },
+      {
+        label: "Pitcairn (GMT-8:00)",
+        value: "Pacific/Pitcairn",
+      },
+      {
+        label: "Ponape (GMT+11:00)",
+        value: "Pacific/Ponape",
+      },
+      {
+        label: "Port Moresby (GMT+10:00)",
+        value: "Pacific/Port_Moresby",
+      },
+      {
+        label: "Rarotonga (GMT-10:00)",
+        value: "Pacific/Rarotonga",
+      },
+      {
+        label: "Saipan (GMT+10:00)",
+        value: "Pacific/Saipan",
+      },
+      {
+        label: "Tahiti (GMT-10:00)",
+        value: "Pacific/Tahiti",
+      },
+      {
+        label: "Tarawa (GMT+12:00)",
+        value: "Pacific/Tarawa",
+      },
+      {
+        label: "Tongatapu (GMT+13:00)",
+        value: "Pacific/Tongatapu",
+      },
+      {
+        label: "Truk (GMT+10:00)",
+        value: "Pacific/Truk",
+      },
+      {
+        label: "Wake (GMT+12:00)",
+        value: "Pacific/Wake",
+      },
+      {
+        label: "Wallis (GMT+12:00)",
+        value: "Pacific/Wallis",
+      },
+    ],
+  },
+];
diff --git a/app/_types/date-range-types.tsx b/app/_types/date-range-types.tsx
new file mode 100644
index 00000000..5b0ebabd
--- /dev/null
+++ b/app/_types/date-range-types.tsx
@@ -0,0 +1,17 @@
+// _types/date-range-types.ts
+
+import { EventRange, WeekdayMap } from "@/app/_types/schedule-types";
+
+export type DateRangeProps = {
+  eventRange?: EventRange;
+  onChangeEventRange?: (range: EventRange) => void;
+  displayCalendar?: boolean;
+
+  // optional legacy support props
+  rangeType?: "specific" | "weekday";
+  onChangeRangeType?: (type: "specific" | "weekday") => void;
+  specificRange?: { from: Date | null; to: Date | null };
+  onChangeSpecific?: (key: "from" | "to", value: Date) => void;
+  weekdayRange?: WeekdayMap;
+  onChangeWeekday?: (map: WeekdayMap) => void;
+};
diff --git a/app/_types/schedule-types.tsx b/app/_types/schedule-types.tsx
new file mode 100644
index 00000000..24f73644
--- /dev/null
+++ b/app/_types/schedule-types.tsx
@@ -0,0 +1,115 @@
+export type TimeDateRange = {
+  from: Date | null;
+  to: Date | null;
+};
+
+// generic weekday mode map
+export type WeekdayMap = {
+  [day in "Sun" | "Mon" | "Tue" | "Wed" | "Thu" | "Fri" | "Sat"]: 0 | 1;
+};
+
+// specific date mode
+export type SpecificDateRange = {
+  type: "specific";
+  duration: number;
+  timezone: string;
+  dateRange: TimeDateRange;
+  timeRange: TimeDateRange;
+};
+
+// generic weekday mode
+export type WeekdayRange = {
+  type: "weekday";
+  duration: number;
+  timezone: string;
+  weekdays: WeekdayMap;
+  timeRange: TimeDateRange;
+};
+
+// unified type
+export type EventRange = SpecificDateRange | WeekdayRange;
+
+export type DateTimeSlot = {
+  day: string;
+  from: Date;
+  to: Date;
+};
+
+// Combine a date and a time-only object into a full Date object
+export function combineDateAndTime(date: Date, time: Date): Date {
+  const result = new Date(date);
+  result.setHours(time.getHours(), time.getMinutes(), 0, 0);
+  return result;
+}
+
+// Generate all concrete weekday instances for a given reference week
+export function generateConcreteInstancesForWeek(
+  range: WeekdayRange,
+  weekStart: Date,
+): DateTimeSlot[] {
+  const slots: DateTimeSlot[] = [];
+
+  const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+  const baseFrom = range.timeRange.from;
+  const baseTo = range.timeRange.to;
+
+  if (!baseFrom || !baseTo) return [];
+
+  for (let i = 0; i < 7; i++) {
+    const day = days[i] as keyof WeekdayMap;
+    if (range.weekdays[day]) {
+      const date = new Date(weekStart);
+      date.setDate(weekStart.getDate() + i);
+
+      const from = combineDateAndTime(date, baseFrom);
+      const to = combineDateAndTime(date, baseTo);
+
+      slots.push({ day, from, to });
+    }
+  }
+
+  return slots;
+}
+
+// Expand a specific date range into a list of dates (e.g., for previewing day-by-day)
+export function expandDateRange(range: TimeDateRange): Date[] {
+  const { from, to } = range;
+  if (!from || !to) return [];
+  const days: Date[] = [];
+
+  let current = new Date(from);
+  current.setHours(0, 0, 0, 0);
+
+  const end = new Date(to);
+  end.setHours(0, 0, 0, 0);
+
+  while (current <= end) {
+    days.push(new Date(current));
+    current.setDate(current.getDate() + 1);
+  }
+
+  return days;
+}
+
+// Format a weekday map into a list of active days (e.g., ["Mon", "Wed"])
+export function getEnabledWeekdays(weekdays: WeekdayMap): string[] {
+  return Object.entries(weekdays)
+    .filter(([, v]) => v === 1)
+    .map(([k]) => k);
+}
+
+// Create a list of visible day labels from a specific date range
+export function getDateLabels({ from, to }: TimeDateRange): string[] {
+  const labels: string[] = [];
+  const range = expandDateRange({ from, to });
+  for (const date of range) {
+    const weekday = date
+      .toLocaleDateString("en-US", { weekday: "short" })
+      .toUpperCase();
+    const monthDay = date
+      .toLocaleDateString("en-US", { month: "short", day: "numeric" })
+      .toUpperCase();
+    labels.push(`${weekday} ${monthDay}`);
+  }
+  return labels;
+}
diff --git a/app/_types/user-availability.tsx b/app/_types/user-availability.tsx
new file mode 100644
index 00000000..7be7009c
--- /dev/null
+++ b/app/_types/user-availability.tsx
@@ -0,0 +1,72 @@
+// keys are either weekdays or specific date strings:
+//    for specific days:  "2025-05-10"
+//    for weekdays: "Mon", "Tue", etc.
+// values are sets timeslots where the user is available
+export type AvailabilityMap = Record<string, Set<number>>;
+
+export type UserAvailability = {
+  type: "specific" | "weekday";
+  selections: AvailabilityMap;
+};
+
+// Initialize empty availability
+export const createEmptyUserAvailability = (
+  type: "specific" | "weekday" = "specific",
+): UserAvailability => ({
+  type,
+  selections: {},
+});
+
+// Toggle a cell's availability (add/remove hour from Set)
+export function toggleAvailability(
+  prev: UserAvailability,
+  key: string,
+  hour: number,
+): UserAvailability {
+  const updated = { ...prev, selections: { ...prev.selections } };
+  const hours = new Set(updated.selections[key] || []);
+
+  if (hours.has(hour)) {
+    hours.delete(hour);
+  } else {
+    hours.add(hour);
+  }
+
+  updated.selections[key] = hours;
+  return updated;
+}
+
+// Check if a user is available at a specific key + hour
+export function isAvailable(
+  user: UserAvailability,
+  key: string,
+  hour: number,
+): boolean {
+  return user.selections[key]?.has(hour) ?? false;
+}
+
+// Add multiple hours for drag selection
+export function addAvailability(
+  prev: UserAvailability,
+  key: string,
+  hour: number,
+): UserAvailability {
+  const updated = { ...prev, selections: { ...prev.selections } };
+  const hours = new Set(updated.selections[key] || []);
+  hours.add(hour);
+  updated.selections[key] = hours;
+  return updated;
+}
+
+// Remove hours for drag deselection (optional if you want toggling behavior)
+export function removeAvailability(
+  prev: UserAvailability,
+  key: string,
+  hour: number,
+): UserAvailability {
+  const updated = { ...prev, selections: { ...prev.selections } };
+  const hours = new Set(updated.selections[key] || []);
+  hours.delete(hour);
+  updated.selections[key] = hours;
+  return updated;
+}
diff --git a/app/_utils/providers.tsx b/app/_utils/providers.tsx
new file mode 100644
index 00000000..d0da32bd
--- /dev/null
+++ b/app/_utils/providers.tsx
@@ -0,0 +1,11 @@
+"use client";
+
+import { ThemeProvider } from "next-themes";
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+      {children}
+    </ThemeProvider>
+  );
+}
diff --git a/app/_utils/timezone-file-generator.tsx b/app/_utils/timezone-file-generator.tsx
new file mode 100644
index 00000000..95398cb9
--- /dev/null
+++ b/app/_utils/timezone-file-generator.tsx
@@ -0,0 +1,86 @@
+import { useEffect, useState } from "react";
+
+function formatLabel(tz: string): string {
+  try {
+    const now = new Date();
+    const offsetMinutes = -now.getTimezoneOffset();
+    const offset =
+      new Intl.DateTimeFormat("en-US", {
+        timeZone: tz,
+        hour12: false,
+        hour: "2-digit",
+        minute: "2-digit",
+        timeZoneName: "shortOffset",
+      })
+        .formatToParts(now)
+        .find((p) => p.type === "timeZoneName")?.value || "";
+
+    // Try to normalize to GMT+/-HH:MM
+    const match = offset.match(/GMT([+-]\d{1,2})(?::(\d{2}))?/);
+    const hours = match?.[1] ?? "0";
+    const minutes = match?.[2] ?? "00";
+    const fullOffset = `GMT${hours}:${minutes}`;
+
+    const city = tz.split("/").slice(-1)[0].replaceAll("_", " ");
+    return `${city} (${fullOffset})`;
+  } catch {
+    return tz;
+  }
+}
+
+function buildGroupedTimezones() {
+  const groups: Record<string, { label: string; value: string }[]> = {};
+  const timezones = Intl.supportedValuesOf("timeZone");
+
+  for (const tz of timezones) {
+    const [region = "Other"] = tz.split("/");
+    const label = formatLabel(tz);
+    if (!groups[region]) groups[region] = [];
+    groups[region].push({ label, value: tz });
+  }
+
+  return Object.entries(groups)
+    .sort(([a], [b]) => a.localeCompare(b))
+    .map(([region, options]) => ({
+      label: region,
+      options: options.sort((a, b) => a.label.localeCompare(b.label)),
+    }));
+}
+
+export default function TimezoneFileGenerator() {
+  const [output, setOutput] = useState<string>("");
+
+  useEffect(() => {
+    const grouped = buildGroupedTimezones();
+    const fileContent =
+      "// Auto-generated timezone list\nexport const groupedTimezones = " +
+      JSON.stringify(grouped, null, 2) +
+      ";\n";
+    setOutput(fileContent);
+  }, []);
+
+  return (
+    <div className="space-y-4 p-4">
+      <h2 className="text-lg font-semibold">Timezone List Generator</h2>
+      <textarea
+        value={output}
+        readOnly
+        rows={25}
+        className="w-full rounded border p-2 font-mono text-sm"
+      />
+      <button
+        onClick={() => {
+          const blob = new Blob([output], { type: "text/plain" });
+          const url = URL.createObjectURL(blob);
+          const a = document.createElement("a");
+          a.href = url;
+          a.download = "grouped-timezones.ts";
+          a.click();
+        }}
+        className="rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-700"
+      >
+        Download grouped-timezones.ts
+      </button>
+    </div>
+  );
+}
diff --git a/app/_utils/use-check-mobile.tsx b/app/_utils/use-check-mobile.tsx
new file mode 100644
index 00000000..e9075aea
--- /dev/null
+++ b/app/_utils/use-check-mobile.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+export default function useCheckMobile() {
+  const [isMobile, setIsMobile] = useState<boolean>(false);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth <= 768);
+    };
+
+    handleResize(); // Check on mount
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  return isMobile;
+}
diff --git a/app/_utils/use-theme.tsx b/app/_utils/use-theme.tsx
new file mode 100644
index 00000000..d6d191c2
--- /dev/null
+++ b/app/_utils/use-theme.tsx
@@ -0,0 +1,43 @@
+import { useState, useEffect, useCallback } from "react";
+
+export default function useDarkMode() {
+  const [isDarkMode, setIsDarkMode] = useState<boolean | null>(null);
+  const [isClientReady, setIsClientReady] = useState(false);
+
+  useEffect(() => {
+    const savedTheme = localStorage.getItem("theme");
+    const prefersDark = window.matchMedia(
+      "(prefers-color-scheme: dark)",
+    ).matches;
+
+    const dark = savedTheme ? savedTheme === "dark" : prefersDark;
+
+    setIsDarkMode(dark);
+    setIsClientReady(true);
+
+    const html = document.documentElement;
+    html.classList.toggle("dark", dark);
+  }, []);
+
+  const toggleDarkMode = useCallback(() => {
+    if (isDarkMode === null) return;
+
+    const newMode = !isDarkMode;
+    setIsDarkMode(newMode);
+    const html = document.documentElement;
+
+    if (newMode) {
+      html.classList.add("dark");
+      localStorage.setItem("theme", "dark");
+    } else {
+      html.classList.remove("dark");
+      localStorage.setItem("theme", "light");
+    }
+  }, [isDarkMode]);
+
+  return {
+    isDarkMode: isDarkMode ?? false,
+    isClientReady,
+    toggleDarkMode,
+  };
+}
diff --git a/app/globals.css b/app/globals.css
index 64250c38..159f72d2 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,51 +1,201 @@
 @import "tailwindcss";
+@import "react-day-picker/style.css";
 
 :root {
   --background: #f5f5f5;
-  --foreground: #3E505B;
+  --foreground: #3e3c53;
+  --calendar-accent: var(--color-blue);
+  --calendar-accent-background: var(--color-blue-100);
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --background: #3E505B;
-    --foreground: #f5f5f5;
+    --background: #3e3c53;
+    --foreground: #e9deca;
+    --calendar-accent: var(--color-red);
+    --calendar-accent-background: var(--color-red-200);
   }
 }
 
+.dark {
+  --background: #3e3c53;
+  --foreground: #e9deca;
+  --calendar-accent: var(--color-red);
+  --calendar-accent-background: var(--color-red-200);
+}
+
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: var(--font-roboto), system-ui, sans-serif;
+}
+
+.rdp-root {
+  --rdp-accent-color: var(--calendar-accent);
+  --rdp-accent-background-color: var(--calendar-accent-background);
+}
+
+.text-stroke-white {
+  -webkit-text-stroke: 2px var(--color-white);
+}
+
+.text-stroke-violet {
+  -webkit-text-stroke: 2px var(--color-violet);
+}
+
+.text-stroke-bone {
+  -webkit-text-stroke: 2px var(--color-bone);
+}
+
+.text-stroke-blue {
+  -webkit-text-stroke: 2px var(--color-blue);
+}
+
+.text-stroke-red {
+  -webkit-text-stroke: 2px var(--color-red);
+}
+
+.text-stroke-lion {
+  -webkit-text-stroke: 2px var(--color-lion);
 }
 
 @custom-variant dark (&:where(.dark, .dark *));
 
 @theme {
-  --color-red: oklch(69.1% 0.1987 23.91);
-  --color-red-100: oklch(96.1% 0.003 23.91);
-  --color-red-200: oklch(94.6% 0.0106 23.91);
-  --color-red-300: oklch(91.9% 0.0252 23.91);
-  --color-red-400: oklch(88.5% 0.0578 23.91);
-  --color-red-500: oklch(85.1% 0.0778 23.91);
-  --color-red-600: oklch(81.3% 0.0879 23.91);
-  --color-red-700: oklch(76% 0.0986 23.91);
-  --color-red-800: oklch(69.7% 0.1225 23.91);
-  --color-red-900: oklch(69.1% 0.1987 23.91);
-  --color-red-1000: oklch(65.3% 0.1987 23.91);
-  --color-red-1100: oklch(52.5% 0.1987 23.91);
-  --color-red-1200: oklch(34.4% 0.0939 23.91);
-
-  --color-dblue: oklch(42% 0.029 235.21);
-  --color-dblue-100: oklch(95.9% 0.0027 235.2);
-  --color-dblue-200: oklch(94.7% 0.0054 235.2);
-  --color-dblue-300: oklch(91.8% 0.0083 235.2);
-  --color-dblue-400: oklch(89.2% 0.011 235.2);
-  --color-dblue-500: oklch(86.8% 0.0136 235.2);
-  --color-dblue-600: oklch(84.2% 0.0167 235.2);
-  --color-dblue-700: oklch(80.6% 0.0215 235.2);
-  --color-dblue-800: oklch(74.5% 0.0298 235.2);
-  --color-dblue-900: oklch(59.4% 0.0311 235.2);
-  --color-dblue-1000: oklch(55.9% 0.0313 235.2);
-  --color-dblue-1100: oklch(45.5% 0.029 235.2);
-  --color-dblue-1200: oklch(24.1% 0.0255 235.2);
+  --font-modak: var(--font-modak);
+  --font-nunito: var(--font-nunito);
+
+  --text-stroke-white: var(--text-stroke-white);
+  --text-stroke-violet: var(--text-stroke-violet);
+  --text-stroke-bone: var(--text-stroke-bone);
+  --text-stroke-blue: var(--text-stroke-blue);
+  --text-stroke-red: var(--text-stroke-red);
+  --text-stroke-lion: var(--text-stroke-lion);
+
+  --animate-slideUpAndFade: slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1);
+  --animate-slideRightAndFade: slideRightAndFade 400ms
+    cubic-bezier(0.16, 1, 0.3, 1);
+  --animate-slideDownAndFade: slideDownAndFade 400ms
+    cubic-bezier(0.16, 1, 0.3, 1);
+  --animate-slideLeftAndFade: slideLeftAndFade 400ms
+    cubic-bezier(0.16, 1, 0.3, 1);
+  --animate-slideUp: slideUp 400ms cubic-bezier(0.16, 1, 0.3, 1);
+  --animate-slideDown: slideDown 400ms cubic-bezier(0.16, 1, 0.3, 1);
+
+  @keyframes slideUpAndFade {
+    0% {
+      opacity: 0;
+      transform: translateY(2px);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes slideRightAndFade {
+    0% {
+      opacity: 0;
+      transform: translateX(-2px);
+    }
+    100% {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+  @keyframes slideDownAndFade: {
+    0% {
+      opacity: 0;
+      transform: translateY(-2px);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes slideLeftAndFade {
+    0% {
+      opacity: 0;
+      transform: translateX(2px);
+    }
+    100% {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes slideUp {
+    0% {
+      transform: translateY(100%);
+    }
+    100% {
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes slideDown {
+    0% {
+      transform: translateY(0);
+    }
+    100% {
+      transform: translateY(100%);
+    }
+  }
+}
+
+@theme {
+  --color-white: oklch(0.9702 0 0);
+  --color-violet: oklch(0.368 0.0393 288.29);
+  --color-bone: oklch(0.904 0.0293 82.59);
+  --color-red: oklch(0.6909 0.1987 23.91);
+  --color-blue: oklch(0.54 0.0951 247.39);
+  --color-lion: oklch(0.7103 0.0803 60.22);
+
+  --color-violet-100: oklch(0.9568 0.0041 301.42);
+  --color-violet-200: oklch(0.8583 0.0137 290.71);
+  --color-violet-300: oklch(0.7358 0.0258 290.86);
+  --color-violet-400: oklch(0.6137 0.0375 288.91);
+  --color-violet-500: oklch(0.4915 0.0461 287.73);
+  --color-violet-600: oklch(0.368 0.0393 288.29);
+  --color-violet-700: oklch(0.2428 0.0265 287.52);
+
+  --color-bone-100: oklch(0.904 0.0293 82.59);
+  --color-bone-200: oklch(0.7811 0.0391 82.99);
+  --color-bone-300: oklch(0.6571 0.0328 83.59);
+  --color-bone-400: oklch(0.5349 0.0266 82.03);
+  --color-bone-500: oklch(0.4113 0.0209 84.56);
+  --color-bone-600: oklch(0.2869 0.0137 81.69);
+  --color-bone-700: oklch(0.1785 0.0086 84.57);
+
+  --color-red-100: oklch(0.9193 0.0413 17.93);
+  --color-red-200: oklch(0.8034 0.1122 19.82);
+  --color-red-300: oklch(0.6909 0.1987 23.91);
+  --color-red-400: oklch(0.5732 0.2352 29.23);
+  --color-red-500: oklch(0.4432 0.181862 29.2339);
+  --color-red-600: oklch(0.3138 0.128763 29.2339);
+  --color-red-700: oklch(0.1866 0.0766 29.23);
+
+  --color-blue-100: oklch(0.911 0.033 256.76);
+  --color-blue-200: oklch(0.7858 0.0852 252.63);
+  --color-blue-300: oklch(0.6638 0.1168 247.31);
+  --color-blue-400: oklch(0.54 0.0951 247.39);
+  --color-blue-500: oklch(0.4159 0.0737 247.64);
+  --color-blue-600: oklch(0.2933 0.0525 248.23);
+  --color-blue-700: oklch(0.1768 0.0317 246.64);
+
+  --color-lion-100: oklch(0.9523 0.0135 53.35);
+  --color-lion-200: oklch(0.8323 0.0604 57.73);
+  --color-lion-300: oklch(0.7103 0.0803 60.22);
+  --color-lion-400: oklch(0.5868 0.0663 59.49);
+  --color-lion-500: oklch(0.4619 0.0522 61.59);
+  --color-lion-600: oklch(0.3382 0.038 61.11);
+  --color-lion-700: oklch(0.2158 0.0243 60.3);
+
+  --color-gray-100: oklch(0.9709 0.0011 17.18);
+  --color-gray-200: oklch(0.8492 0.0055 17.27);
+  --color-gray-300: oklch(0.7257 0.014 17.48);
+  --color-gray-400: oklch(0.6034 0.0273 17.93);
+  --color-gray-500: oklch(0.4808 0.0223 17.96);
+  --color-gray-600: oklch(0.3573 0.017 17.98);
+  --color-gray-700: oklch(0.2347 0.011 17.96);
 }
diff --git a/app/layout.tsx b/app/layout.tsx
index 519ab66b..f64983ca 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,11 +1,21 @@
 import type { Metadata } from "next";
-import { Roboto } from "next/font/google";
+import { Modak, Nunito } from "next/font/google";
+import Header from "./ui/layout/header";
+import { Providers } from "./_utils/providers";
 import "./globals.css";
 
-const roboto = Roboto({
-  variable: "--font-roboto",
+const modak = Modak({
+  weight: "400",
   subsets: ["latin"],
-  style: ["normal", "italic"],
+  variable: "--font-modak",
+  display: "swap",
+});
+
+const nunito = Nunito({
+  weight: ["200", "300", "400", "600", "700", "800", "900"],
+  subsets: ["latin"],
+  variable: "--font-nunito",
+  display: "swap",
 });
 
 export const metadata: Metadata = {
@@ -19,9 +29,18 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
-      <body className={`${roboto.variable} antialiased`} >
-        {children}
+    <html
+      lang="en"
+      suppressHydrationWarning
+      className={`${modak.variable} ${nunito.variable}`}
+    >
+      <body className="font-sans antialiased">
+        <div className="flex min-h-dvh flex-col p-10">
+          <Providers>
+            <Header />
+            {children}
+          </Providers>
+        </div>
       </body>
     </html>
   );
diff --git a/app/new-event/page.tsx b/app/new-event/page.tsx
new file mode 100644
index 00000000..c8cfe65c
--- /dev/null
+++ b/app/new-event/page.tsx
@@ -0,0 +1,140 @@
+"use client";
+
+import { useState } from "react";
+
+import TimeDropdown from "../ui/components/time-dropdown";
+import DateRangeSelector from "../ui/components/date-range/date-range-selector";
+import TimezoneSelect from "../ui/components/timezone-select";
+import CustomSelect from "../ui/components/custom-select";
+import GridPreviewDialog from "../ui/components/schedule/grid-preview-dialog";
+
+import { EventRange } from "../_types/schedule-types";
+
+export default function Page() {
+  const defaultTZ = Intl.DateTimeFormat().resolvedOptions().timeZone;
+
+  const [eventRange, setEventRange] = useState<EventRange>({
+    type: "specific",
+    duration: 60,
+    timezone: defaultTZ,
+    dateRange: { from: new Date(), to: new Date() },
+    timeRange: { from: new Date(), to: new Date() },
+  });
+
+  const handleTZChange = (newTZ: string | number) => {
+    setEventRange((prev) => ({
+      ...prev,
+      timezone: newTZ.toString(),
+    }));
+  };
+
+  const duationOptions = [
+    { label: "30 minutes", value: 30 },
+    { label: "45 minutes", value: 45 },
+    { label: "1 hour", value: 60 },
+  ];
+
+  const handleDurationChange = (newDuration: string | number) => {
+    const duration = Number(newDuration);
+    setEventRange((prev) => ({
+      ...prev,
+      duration,
+    }));
+  };
+
+  const handleTimeChange = (key: "from" | "to", value: Date) => {
+    setEventRange((prev) => ({
+      ...prev,
+      timeRange: {
+        ...prev.timeRange,
+        [key]: value,
+      },
+    }));
+  };
+
+  const handleEventRangeChange = (range: EventRange) => {
+    setEventRange(range);
+  };
+
+  return (
+    <div className="flex w-full grow flex-col space-y-2">
+      <input
+        type="text"
+        placeholder="add event name"
+        className="w-full border-b-1 border-violet p-1 text-2xl focus:outline-none md:w-2/4 dark:border-gray-400"
+      />
+      <div className="flex flex-1 auto-rows-fr grid-cols-12 flex-col place-content-stretch gap-x-2 gap-y-2 md:grid [&>*]:px-2">
+        {/* Prompt */}
+        <div className="col-span-2 flex items-center text-center font-medium">
+          What times and dates is this event?
+        </div>
+
+        {/* Date range picker */}
+        <div className="col-span-10 flex items-center">
+          <DateRangeSelector
+            eventRange={eventRange}
+            onChangeEventRange={handleEventRangeChange}
+          />
+        </div>
+
+        {/* From/To */}
+        <div className="col-span-2 col-start-1 flex items-center justify-center space-x-4">
+          <label className="text-sm font-medium">from</label>
+          <TimeDropdown
+            defaultTZ={defaultTZ}
+            duration={eventRange.duration}
+            value={eventRange.timeRange.from}
+            onChange={(from) => handleTimeChange("from", from)}
+          />
+        </div>
+        <div className="col-span-2 col-start-1 flex items-center justify-center space-x-4">
+          <label className="text-sm font-medium">to</label>
+          <TimeDropdown
+            defaultTZ={defaultTZ}
+            duration={eventRange.duration}
+            value={eventRange.timeRange.to}
+            onChange={(to) => handleTimeChange("to", to)}
+          />
+        </div>
+
+        {/* Timezone */}
+        <div className="col-span-2 col-start-1 row-span-3">
+          <div className="flex items-center justify-between">
+            <label className="text-sm font-medium">Duration</label>
+            <CustomSelect
+              options={duationOptions}
+              value={eventRange.duration}
+              onValueChange={handleDurationChange}
+            />
+          </div>
+          <TimezoneSelect
+            value={eventRange.timezone}
+            onChange={handleTZChange}
+          />
+        </div>
+
+        <div className="group col-span-10 col-start-3 row-span-9 row-start-2 flex-1">
+          <GridPreviewDialog eventRange={eventRange} />
+
+          {/* <div className="mr-4 flex items-center justify-end space-x-2">
+            <label className="text-sm font-medium">{timezone}</label>
+            <label className="text-sm font-medium">Grid Preview</label>
+            <EnterFullScreenIcon className="h-5 w-5 cursor-pointer text-violet hover:text-red" />
+          </div>
+          <ScheduleGrid
+            eventRange={eventRange}
+            disableSelect={true}
+            timezone={timezone}
+          /> */}
+        </div>
+      </div>
+      <style jsx>{`
+        @media (max-width: 768px) {
+          div[style] {
+            grid-template-rows: 80px auto !important;
+          }
+        }
+      `}</style>
+    </div>
+  );
+}
diff --git a/app/newevent/page.tsx b/app/newevent/page.tsx
deleted file mode 100644
index 6a8b43cd..00000000
--- a/app/newevent/page.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import React from "react";
-
-export default function page() {
-  return <div>newevent page</div>;
-}
diff --git a/app/page.tsx b/app/page.tsx
index a7a61cd5..fcd0ebc6 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,7 +1,29 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+
 export default function Home() {
+  const router = useRouter().push;
+
   return (
-    <h1 className="text-3xl font-[900] underline">
-      Hello world!
-    </h1>
-  )
-}
\ No newline at end of file
+    <div className="flex h-full flex-col items-center justify-center gap-4 space-y-4 text-xl md:text-2xl">
+      <button
+        onClick={() => router("/newevent")}
+        className="pointer-events-auto h-1/4 w-3/4 rounded-xl bg-violet p-4 text-white dark:bg-white dark:text-violet"
+      >
+        create new event
+      </button>
+      <input
+        type="text"
+        id="event-code"
+        onKeyDown={(e) => {
+          if (e.key === "Enter") {
+            router("/schedule/availability/" + e.currentTarget.value);
+          }
+        }}
+        placeholder="or enter code here"
+        className="w-3/4 border-b-2 text-center focus:outline-none"
+      />
+    </div>
+  );
+}
diff --git a/app/schedule/availability/not-found.tsx b/app/schedule/availability/not-found.tsx
index 84d03025..abaee81f 100644
--- a/app/schedule/availability/not-found.tsx
+++ b/app/schedule/availability/not-found.tsx
@@ -1,3 +1,3 @@
 export default function NotFound() {
-  return <div>404 - Page Not Found</div>
-}
\ No newline at end of file
+  return <div>404 - Page Not Found</div>;
+}
diff --git a/app/schedule/results/not-found.tsx b/app/schedule/results/not-found.tsx
index 84d03025..abaee81f 100644
--- a/app/schedule/results/not-found.tsx
+++ b/app/schedule/results/not-found.tsx
@@ -1,3 +1,3 @@
 export default function NotFound() {
-  return <div>404 - Page Not Found</div>
-}
\ No newline at end of file
+  return <div>404 - Page Not Found</div>;
+}
diff --git a/app/ui/components/archive/date-range-drawer copy.tsx b/app/ui/components/archive/date-range-drawer copy.tsx
new file mode 100644
index 00000000..48d271e9
--- /dev/null
+++ b/app/ui/components/archive/date-range-drawer copy.tsx	
@@ -0,0 +1,115 @@
+import { Drawer } from "vaul";
+import { Calendar } from "./month-calendar";
+import { format } from "date-fns";
+
+type Props = {
+  specificRange: { from: Date | null; to: Date | null };
+  onChangeSpecific: (range: { from: Date | null; to: Date | null }) => void;
+};
+
+export default function DateRangeDrawer({
+  specificRange,
+  onChangeSpecific,
+}: Props) {
+  const displayFrom = specificRange.from
+    ? format(specificRange.from, "EEE, MMM d")
+    : "";
+  const displayTo = specificRange.to
+    ? format(specificRange.to, "EEE, MMM d")
+    : "";
+
+  return (
+    <Drawer.Root>
+      <Drawer.Trigger asChild>
+        <form className="ma2 w-fit rounded-full">
+          <input
+            size={10}
+            value={displayFrom}
+            onChange={(e) =>
+              onChangeSpecific({
+                ...specificRange,
+                from: new Date(e.target.value),
+              })
+            }
+            className="rounded-l-full border-1 border-violet-500 px-4 py-1 text-center hover:border-red focus:outline-none dark:border-gray-400"
+            aria-label="Start date"
+          />
+          <input
+            size={10}
+            value={displayTo}
+            onChange={(e) =>
+              onChangeSpecific({
+                ...specificRange,
+                to: new Date(e.target.value),
+              })
+            }
+            className="rounded-r-full border-1 border-violet-500 px-4 py-1 text-center hover:border-red focus:outline-none dark:border-gray-400"
+            aria-label="End date"
+          />
+        </form>
+      </Drawer.Trigger>
+
+      <Drawer.Portal>
+        <Drawer.Overlay className="fixed inset-0 bg-black/40" />
+        <Drawer.Content
+          className="fixed right-0 bottom-0 left-0 z-50 flex h-[500px] w-full flex-col"
+          aria-label="Date range picker"
+        >
+          <div className="flex-1 overflow-y-auto rounded-md rounded-t-[10px] bg-white p-4 shadow-lg dark:bg-violet">
+            <div
+              aria-hidden
+              className="sticky mx-auto mb-8 h-1.5 w-12 flex-shrink-0 rounded-full bg-gray-300"
+            />
+            <Drawer.Title className="mb-2 text-lg font-semibold text-gray-900 dark:text-white">
+              Select a Date Range
+            </Drawer.Title>
+            <Calendar
+              selectedRange={{
+                from: specificRange.from || undefined,
+                to: specificRange.to || undefined,
+              }}
+              onRangeSelect={(from, to) => onChangeSpecific({ from, to })}
+            />
+          </div>
+        </Drawer.Content>
+      </Drawer.Portal>
+    </Drawer.Root>
+  );
+}
+
+const DateRange = ({ specificRange, onChangeSpecific }: Props) => {
+  const displayFrom = specificRange.from
+    ? format(specificRange.from, "EEE, MMM d")
+    : "";
+  const displayTo = specificRange.to
+    ? format(specificRange.to, "EEE, MMM d")
+    : "";
+  return (
+    <form className="ma2 w-fit rounded-full">
+      <input
+        size={10}
+        value={displayFrom}
+        onChange={(e) =>
+          onChangeSpecific({
+            ...specificRange,
+            from: new Date(e.target.value),
+          })
+        }
+        className="rounded-l-full border-1 border-violet-500 px-4 py-1 text-center hover:border-red focus:outline-none dark:border-gray-400"
+        aria-label="Start date"
+      />
+      <input
+        size={10}
+        value={displayTo}
+        onChange={(e) =>
+          onChangeSpecific({
+            ...specificRange,
+            to: new Date(e.target.value),
+          })
+        }
+        className="rounded-r-full border-1 border-violet-500 px-4 py-1 text-center hover:border-red focus:outline-none dark:border-gray-400"
+        aria-label="End date"
+      />
+    </form>
+  );
+};
diff --git a/app/ui/components/archive/month-calendar.tsx b/app/ui/components/archive/month-calendar.tsx
new file mode 100644
index 00000000..75ad862b
--- /dev/null
+++ b/app/ui/components/archive/month-calendar.tsx
@@ -0,0 +1,116 @@
+"use client";
+
+import { ChangeEventHandler, useEffect, useState } from "react";
+import useCheckMobile from "@/app/_utils/use-check-mobile";
+
+import { format, isAfter, isBefore, isValid, parse } from "date-fns";
+import {
+  DateRange,
+  DayPicker,
+  SelectRangeEventHandler,
+  getDefaultClassNames,
+} from "react-day-picker";
+import "react-day-picker/dist/style.css";
+
+type CalendarProps = {
+  className?: string;
+  onRangeSelect?: (from: string | null, to: string | null) => void;
+};
+
+export function Calendar({ className, onRangeSelect }: CalendarProps) {
+  const defaultClassNames = getDefaultClassNames();
+
+  const isMobile = useCheckMobile();
+  const numberOfMonths = isMobile ? 12 : 2;
+  const hideNavigation = isMobile ? true : false;
+
+  const today = new Date();
+
+  const [month, setMonth] = useState(today);
+  const [selectedRange, setSelectedRange] = useState<DateRange>();
+
+  // const [fromValue, setFromValue] = useState<string>("");
+  // const [toValue, setToValue] = useState<string>("");
+
+  // const handleFromChange: ChangeEventHandler<HTMLInputElement> = (e) => {
+  //   setFromValue(e.target.value);
+  //   const date = parse(e.target.value, "EEE, MMM d", new Date());
+  //   if (!isValid(date)) {
+  //     return setSelectedRange({ from: undefined, to: undefined });
+  //   }
+  //   if (selectedRange?.to && isAfter(date, selectedRange.to)) {
+  //     setSelectedRange({ from: selectedRange.to, to: date });
+  //   } else {
+  //     setSelectedRange({ from: date, to: selectedRange?.to });
+  //   }
+  // };
+
+  // const handleToChange: ChangeEventHandler<HTMLInputElement> = (e) => {
+  //   setToValue(e.target.value);
+  //   const date = parse(e.target.value, "EEE, MMM d", new Date());
+
+  //   if (!isValid(date)) {
+  //     return setSelectedRange({ from: selectedRange?.from, to: undefined });
+  //   }
+  //   if (selectedRange?.from && isBefore(date, selectedRange.from)) {
+  //     setSelectedRange({ from: date, to: selectedRange.from });
+  //   } else {
+  //     setSelectedRange({ from: selectedRange?.from, to: date });
+  //   }
+  // };
+
+  const handleRangeSelect: SelectRangeEventHandler = (
+    range: DateRange | undefined,
+  ) => {
+    setSelectedRange(range);
+    const from = range?.from ? format(range.from, "EEE, MMM d") : "";
+    const to = range?.to ? format(range.to, "EEE, MMM d") : "";
+    // setFromValue(from);
+    // setToValue(to);
+    onRangeSelect?.(from, to);
+  };
+
+  return (
+    <div className={className}>
+      {/* <div className="mb-4 flex items-center justify-between">
+        <button
+          onClick={() => setMonth(today)}
+          className="rounded-full border-1 border-red px-6 py-1 hover:bg-red-300 dark:hover:bg-red-900"
+        >
+          Today
+        </button>
+        <form className="ma2 rounded-full">
+          <input
+            size={10}
+            placeholder="Start Day"
+            value={fromValue}
+            onChange={handleFromChange}
+            className="rounded-l-full border-1 border-violet-500 px-4 py-1 text-center hover:border-red focus:outline-none"
+          />
+          <input
+            size={10}
+            placeholder="End Day"
+            value={toValue}
+            onChange={handleToChange}
+            className="rounded-r-full border-1 border-violet-500 px-4 py-1 text-center hover:border-red focus:outline-none"
+          />
+        </form>
+      </div> */}
+
+      <DayPicker
+        mode="range"
+        numberOfMonths={numberOfMonths}
+        animate
+        hideNavigation={hideNavigation}
+        month={month}
+        onMonthChange={setMonth}
+        selected={selectedRange}
+        onSelect={handleRangeSelect}
+        disabled={{ before: new Date() }}
+        classNames={{
+          root: `${defaultClassNames.root}`,
+        }}
+      />
+    </div>
+  );
+}
diff --git a/app/ui/components/checkbox.tsx b/app/ui/components/checkbox.tsx
new file mode 100644
index 00000000..f9371175
--- /dev/null
+++ b/app/ui/components/checkbox.tsx
@@ -0,0 +1,23 @@
+type CheckboxProps = {
+  label: string;
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+};
+
+export default function Checkbox(props: CheckboxProps) {
+  const { label, checked, onChange } = props;
+  return (
+    <div className="flex items-center gap-2">
+      <input
+        type="checkbox"
+        id="confirm"
+        className="peer h-4 w-4 appearance-none rounded-sm border border-gray-300 checked:border-red checked:bg-red"
+        checked={checked}
+        onChange={(e) => onChange(e.target.checked)}
+      />
+      <label htmlFor="confirm" className="text-sm peer-checked:text-red">
+        {label}
+      </label>
+    </div>
+  );
+}
diff --git a/app/ui/components/custom-group-select.tsx b/app/ui/components/custom-group-select.tsx
new file mode 100644
index 00000000..9083d553
--- /dev/null
+++ b/app/ui/components/custom-group-select.tsx
@@ -0,0 +1,95 @@
+import * as Select from "@radix-ui/react-select";
+import { CheckIcon, ChevronDownIcon } from "@radix-ui/react-icons";
+import { cn } from "@/app/_lib/classname";
+import { forwardRef } from "react";
+
+type Option = { label: string; value: string };
+type GroupedOption = { label: string; options: Option[] };
+
+type CustomSelectProps = {
+  value: string;
+  onValueChange: (value: string) => void;
+  groupedOptions?: GroupedOption[];
+  className?: string;
+};
+
+export default function CustomGroupSelect({
+  groupedOptions,
+  value,
+  onValueChange,
+  className,
+}: CustomSelectProps) {
+  const allOptions = groupedOptions?.flatMap((g) => g.options) ?? [];
+  const current = allOptions.find((o) => o.value === value);
+
+  return (
+    <Select.Root value={value} onValueChange={onValueChange}>
+      <Select.Trigger
+        className={cn(
+          "inline-flex items-center justify-between rounded-md border border-gray-400 px-4 py-2 text-sm focus:outline-none",
+          className,
+        )}
+        aria-label="Custom select"
+      >
+        <Select.Value>{current?.label || "Select"}</Select.Value>
+        <Select.Icon>
+          <ChevronDownIcon className="ml-2 h-4 w-4" />
+        </Select.Icon>
+      </Select.Trigger>
+      <Select.Portal>
+        <Select.Content className="z-50 max-h-60 overflow-auto rounded-md border border-gray-400 bg-white shadow-lg dark:bg-violet dark:shadow-violet-700">
+          <Select.Viewport className="p-1">
+            {groupedOptions?.map((group) => (
+              <SelectGroup key={group.label} value={group.label}>
+                {group.options.map((option) => (
+                  <SelectItem key={option.value} value={option.value}>
+                    {option.label}
+                  </SelectItem>
+                ))}
+              </SelectGroup>
+            ))}
+          </Select.Viewport>
+        </Select.Content>
+      </Select.Portal>
+    </Select.Root>
+  );
+}
+
+type SelectItemProps = {
+  value: string;
+  children: React.ReactNode;
+};
+
+const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(
+  ({ children, value }, ref) => {
+    return (
+      <Select.Item
+        ref={ref}
+        value={value}
+        className="relative flex h-[30px] items-center rounded px-6 text-sm leading-none select-none hover:outline-none data-[disabled]:pointer-events-none data-[disabled]:text-gray-400 data-[highlighted]:bg-red-300 data-[highlighted]:text-red-900 dark:data-[highlighted]:bg-red-100 dark:data-[highlighted]:text-white"
+      >
+        <Select.ItemText>{children}</Select.ItemText>
+        <Select.ItemIndicator className="absolute left-2 inline-flex w-4 items-center justify-center">
+          <CheckIcon />
+        </Select.ItemIndicator>
+      </Select.Item>
+    );
+  },
+);
+
+SelectItem.displayName = "SelectItem";
+
+const SelectGroup = forwardRef<HTMLDivElement, SelectItemProps>(
+  ({ children, value }, ref) => {
+    return (
+      <Select.Group ref={ref}>
+        <Select.Label className="px-[25px] text-xs leading-[25px] font-bold">
+          {value}
+        </Select.Label>
+        {children}
+        <Select.Separator className="m-[5px] h-px bg-violet dark:bg-white" />
+      </Select.Group>
+    );
+  },
+);
+SelectGroup.displayName = "SelectGroup";
diff --git a/app/ui/components/custom-select.tsx b/app/ui/components/custom-select.tsx
new file mode 100644
index 00000000..1ddf5a6f
--- /dev/null
+++ b/app/ui/components/custom-select.tsx
@@ -0,0 +1,117 @@
+import * as Select from "@radix-ui/react-select";
+import { CheckIcon, ChevronDownIcon } from "@radix-ui/react-icons";
+import { forwardRef } from "react";
+import { cn } from "@/app/_lib/classname";
+
+type Option = { label: string; value: string | number };
+type GroupedOption = { label: string; options: Option[] };
+
+type CustomSelectOptions = Option | GroupedOption;
+
+type CustomSelectProps = {
+  value: string | number;
+  options: CustomSelectOptions[];
+  isGrouped?: boolean;
+  onValueChange: (value: string | number) => void;
+  className?: string;
+};
+
+export default function CustomSelect({
+  value,
+  options,
+  isGrouped = false,
+  onValueChange,
+  className,
+}: CustomSelectProps) {
+  // flatten options if they are grouped and fine the current selected option
+  const allOptions = isGrouped
+    ? (options as GroupedOption[]).flatMap((g) => g.options)
+    : (options as Option[]);
+  const current = allOptions.find((o) => o.value === value);
+
+  return (
+    <Select.Root
+      value={value.toString()}
+      onValueChange={(v) => onValueChange(isNaN(Number(v)) ? v : Number(v))}
+    >
+      <Select.Trigger
+        className={cn(
+          "inline-flex items-center justify-between rounded-md border border-gray-400 px-4 py-2 text-sm focus:outline-none",
+          className,
+        )}
+        aria-label="Custom select"
+      >
+        <Select.Value />
+        <Select.Icon>
+          <ChevronDownIcon className="ml-2 h-4 w-4" />
+        </Select.Icon>
+      </Select.Trigger>
+
+      <Select.Portal>
+        <Select.Content className="z-50 max-h-60 overflow-auto rounded-md border border-gray-400 bg-white shadow-lg dark:bg-violet dark:shadow-violet-700">
+          <Select.Viewport className="p-1">
+            {isGrouped
+              ? (options as GroupedOption[]).map((group) => (
+                  <SelectGroup key={group.label} value={group.label}>
+                    {group.options.map((option) => (
+                      <SelectItem
+                        key={`${group.label}-${option.value}`}
+                        value={option.value}
+                      >
+                        {option.label}
+                      </SelectItem>
+                    ))}
+                  </SelectGroup>
+                ))
+              : (options as Option[]).map((option) => (
+                  <SelectItem
+                    key={option.value.toString()}
+                    value={option.value}
+                  >
+                    {option.label}
+                  </SelectItem>
+                ))}
+          </Select.Viewport>
+        </Select.Content>
+      </Select.Portal>
+    </Select.Root>
+  );
+}
+
+type SelectProps = {
+  value: string | number;
+  children: React.ReactNode;
+};
+
+const SelectItem = forwardRef<HTMLDivElement, SelectProps>(
+  ({ children, value }, ref) => {
+    return (
+      <Select.Item
+        ref={ref}
+        value={value.toString()}
+        className="relative flex h-[30px] items-center rounded px-6 text-sm leading-none select-none hover:outline-none data-[disabled]:pointer-events-none data-[disabled]:text-gray-400 data-[highlighted]:bg-blue data-[highlighted]:text-white dark:data-[highlighted]:bg-red dark:data-[highlighted]:text-bone"
+      >
+        <Select.ItemText>{children}</Select.ItemText>
+        <Select.ItemIndicator className="absolute left-2 inline-flex w-4 items-center justify-center">
+          <CheckIcon />
+        </Select.ItemIndicator>
+      </Select.Item>
+    );
+  },
+);
+SelectItem.displayName = "SelectItem";
+
+const SelectGroup = forwardRef<HTMLDivElement, SelectProps>(
+  ({ children, value }, ref) => {
+    return (
+      <Select.Group ref={ref}>
+        <Select.Label className="px-[25px] text-xs leading-[25px] font-bold">
+          {value}
+        </Select.Label>
+        {children}
+        <Select.Separator className="m-[5px] h-px bg-violet dark:bg-white" />
+      </Select.Group>
+    );
+  },
+);
+SelectGroup.displayName = "SelectGroup";
diff --git a/app/ui/components/date-range/date-range-drawer.tsx b/app/ui/components/date-range/date-range-drawer.tsx
new file mode 100644
index 00000000..23a5b82b
--- /dev/null
+++ b/app/ui/components/date-range/date-range-drawer.tsx
@@ -0,0 +1,119 @@
+import * as Dialog from "@radix-ui/react-dialog";
+import { Calendar } from "../month-calendar";
+import CustomSelect from "../custom-select";
+import WeekdayCalendar from "../weekday-calendar";
+import DateRangeInput from "./date-range-input";
+import { DateRangeProps } from "@/app/_types/date-range-types";
+
+export default function DateRangeDrawer({
+  eventRange,
+  onChangeRangeType,
+  onChangeSpecific,
+  onChangeWeekday,
+}: DateRangeProps) {
+  const rangeType = eventRange?.type ?? "specific";
+
+  const select = (
+    <CustomSelect
+      options={[
+        { label: "Specific Dates", value: "specific" },
+        { label: "Days of the Week", value: "weekday" },
+      ]}
+      value={rangeType === "specific" ? "Specific Dates" : "Days of the Week"}
+      onValueChange={(value) =>
+        onChangeRangeType?.(value === "Specific Dates" ? "specific" : "weekday")
+      }
+      className="min-h-9 min-w-[100px] border-none px-2"
+    />
+  );
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <button className="cursor-pointer" aria-label="Open date range picker">
+          <DateRangeDrawerSelector
+            eventRange={eventRange}
+            onChangeSpecific={onChangeSpecific}
+            onChangeWeekday={onChangeWeekday}
+          />
+        </button>
+      </Dialog.Trigger>
+
+      <Dialog.Portal>
+        <Dialog.Overlay className="fixed inset-0 z-40 bg-gray-700/40" />
+        <Dialog.Content
+          className="fixed right-0 bottom-0 left-0 z-50 flex h-[500px] w-full animate-slideUp flex-col data-[state=closed]:animate-slideDown"
+          aria-label="Date range picker"
+        >
+          <div className="flex-1 justify-center overflow-y-auto rounded-md rounded-t-[10px] bg-white p-4 shadow-lg dark:bg-violet">
+            <div
+              aria-hidden
+              className="sticky mx-auto mb-8 h-1.5 w-12 flex-shrink-0 rounded-full bg-gray-300"
+            />
+            <Dialog.Title className="mb-2 flex flex-row items-center justify-between text-lg font-semibold">
+              Select Date Range
+              {select}
+            </Dialog.Title>
+
+            <DateRangeDrawerSelector
+              eventRange={eventRange}
+              onChangeSpecific={onChangeSpecific}
+              onChangeWeekday={onChangeWeekday}
+              displayCalendar={true}
+            />
+          </div>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+const DateRangeDrawerSelector = ({
+  eventRange,
+  onChangeSpecific,
+  onChangeWeekday = () => {},
+  displayCalendar = false,
+}: DateRangeProps) => {
+  if (eventRange?.type === "specific") {
+    const specificRange = eventRange.dateRange;
+    return (
+      <div className="flex flex-col space-y-2 space-x-20 md:flex-row md:pl-4">
+        <DateRangeInput
+          specificRange={specificRange}
+          onChangeSpecific={onChangeSpecific}
+        />
+        {displayCalendar && (
+          <Calendar
+            selectedRange={{
+              from: specificRange.from || undefined,
+              to: specificRange.to || undefined,
+            }}
+            onRangeSelect={(range) => {
+              if (range?.from) {
+                onChangeSpecific?.("from", range.from);
+              }
+              if (range?.to) {
+                onChangeSpecific?.("to", range.to);
+              }
+            }}
+          />
+        )}
+      </div>
+    );
+  }
+  return (
+    <WeekdayCalendar
+      selectedDays={
+        eventRange?.weekdays ?? {
+          Sun: 0,
+          Mon: 0,
+          Tue: 0,
+          Wed: 0,
+          Thu: 0,
+          Fri: 0,
+          Sat: 0,
+        }
+      }
+      onChange={onChangeWeekday}
+    />
+  );
+};
diff --git a/app/ui/components/date-range/date-range-input.tsx b/app/ui/components/date-range/date-range-input.tsx
new file mode 100644
index 00000000..c9badbe7
--- /dev/null
+++ b/app/ui/components/date-range/date-range-input.tsx
@@ -0,0 +1,36 @@
+import { format } from "date-fns";
+
+type DateRangeInputProps = {
+  specificRange: { from: Date | null; to: Date | null } | undefined;
+  onChangeSpecific?: (key: "from" | "to", value: Date) => void;
+};
+
+export default function DateRangeInput({
+  specificRange,
+  onChangeSpecific,
+}: DateRangeInputProps) {
+  const displayFrom = specificRange?.from
+    ? format(specificRange.from, "EEE, MMM d")
+    : "";
+  const displayTo = specificRange?.to
+    ? format(specificRange.to, "EEE, MMM d")
+    : "";
+  return (
+    <form className="ma2 flex w-fit flex-row rounded-full">
+      <input
+        size={10}
+        value={displayFrom}
+        onChange={(e) => onChangeSpecific?.("from", new Date(e.target.value))}
+        className="rounded-l-full border-1 border-violet-500 px-4 py-1 text-center hover:border-lion focus:outline-none dark:border-gray-400 dark:hover:border-bone"
+        aria-label="Start date"
+      />
+      <input
+        size={10}
+        value={displayTo}
+        onChange={(e) => onChangeSpecific?.("to", new Date(e.target.value))}
+        className="rounded-r-full border-1 border-violet-500 px-4 py-1 text-center hover:border-lion focus:outline-none dark:border-gray-400 dark:hover:border-bone"
+        aria-label="End date"
+      />
+    </form>
+  );
+}
diff --git a/app/ui/components/date-range/date-range-popover.tsx b/app/ui/components/date-range/date-range-popover.tsx
new file mode 100644
index 00000000..82d6b50c
--- /dev/null
+++ b/app/ui/components/date-range/date-range-popover.tsx
@@ -0,0 +1,49 @@
+"use client";
+
+import * as Popover from "@radix-ui/react-popover";
+import { Calendar } from "../month-calendar";
+import { format } from "date-fns";
+import { DateRangeProps } from "@/app/_types/date-range-types";
+import DateRangeInput from "./date-range-input";
+
+export default function DateRangePopover({
+  specificRange,
+  onChangeSpecific,
+}: DateRangeProps) {
+  return (
+    <Popover.Root>
+      <Popover.Trigger asChild>
+        <div>
+          <DateRangeInput
+            specificRange={specificRange}
+            onChangeSpecific={onChangeSpecific}
+          />
+        </div>
+      </Popover.Trigger>
+
+      <Popover.Portal>
+        <Popover.Content
+          sideOffset={10}
+          className="z-50 rounded-md border border-gray-300 bg-white p-4 shadow-lg data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=top]:animate-slideDownAndFade dark:border-gray-400 dark:bg-violet"
+          aria-label="Date range picker"
+        >
+          <Calendar
+            className="w-fit"
+            selectedRange={{
+              from: specificRange?.from || undefined,
+              to: specificRange?.to || undefined,
+            }}
+            onRangeSelect={(range) => {
+              if (range?.from) {
+                onChangeSpecific?.("from", range.from);
+              }
+              if (range?.to) {
+                onChangeSpecific?.("to", range.to);
+              }
+            }}
+          />
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
+  );
+}
diff --git a/app/ui/components/date-range/date-range-selector.tsx b/app/ui/components/date-range/date-range-selector.tsx
new file mode 100644
index 00000000..a1cc4ea5
--- /dev/null
+++ b/app/ui/components/date-range/date-range-selector.tsx
@@ -0,0 +1,124 @@
+import CustomSelect from "../custom-select";
+import DateRangeDrawer from "./date-range-drawer";
+import DateRangePopover from "./date-range-popover";
+import WeekdayCalendar from "../weekday-calendar";
+import { DateRangeProps } from "@/app/_types/date-range-types";
+import { WeekdayMap } from "@/app/_types/schedule-types";
+
+import useCheckMobile from "@/app/_utils/use-check-mobile";
+
+export default function DateRangeSelector({
+  eventRange,
+  onChangeEventRange,
+}: DateRangeProps) {
+  const isMobile = useCheckMobile();
+
+  const rangeType = eventRange?.type ?? "specific";
+
+  const handleRangeTypeChange = (value: string | number) => {
+    console.log("handleRangeTypeChange", value);
+    const newType = value === "specific" ? "specific" : "weekday";
+    if (newType !== eventRange?.type) {
+      onChangeEventRange?.(
+        newType === "specific"
+          ? {
+              type: "specific",
+              duration: 60,
+              dateRange: { from: new Date(), to: new Date() },
+              timeRange: eventRange?.timeRange ?? { from: null, to: null },
+              timezone:
+                eventRange?.timezone ??
+                Intl.DateTimeFormat().resolvedOptions().timeZone,
+            }
+          : {
+              type: "weekday",
+              duration: 60,
+              weekdays: {
+                Sun: 0,
+                Mon: 0,
+                Tue: 0,
+                Wed: 0,
+                Thu: 0,
+                Fri: 0,
+                Sat: 0,
+              },
+              timeRange: eventRange?.timeRange ?? { from: null, to: null },
+              timezone:
+                eventRange?.timezone ??
+                Intl.DateTimeFormat().resolvedOptions().timeZone,
+            },
+      );
+    }
+
+    console.log("handleRangeTypeChange", newType);
+    console.log("eventRange", eventRange);
+  };
+
+  const updateSpecificRange = (key: "from" | "to", value: Date) => {
+    if (eventRange?.type === "specific") {
+      onChangeEventRange?.({
+        ...eventRange,
+        dateRange: {
+          ...eventRange.dateRange,
+          [key]: value,
+        },
+      });
+    }
+  };
+
+  const updateWeekdayRange = (map: WeekdayMap) => {
+    if (eventRange?.type === "weekday") {
+      onChangeEventRange?.({ ...eventRange, weekdays: map });
+    }
+  };
+
+  const select = (
+    <CustomSelect
+      options={[
+        { label: "Specific Dates", value: "specific" },
+        { label: "Days of the Week", value: "weekday" },
+      ]}
+      value={rangeType === "specific" ? "specific" : "weekday"}
+      onValueChange={handleRangeTypeChange}
+      className="hidden min-h-9 min-w-[180px] md:flex"
+    />
+  );
+
+  if (isMobile) {
+    return (
+      <DateRangeDrawer
+        eventRange={eventRange}
+        onChangeRangeType={handleRangeTypeChange}
+        onChangeSpecific={updateSpecificRange}
+        onChangeWeekday={updateWeekdayRange}
+      />
+    );
+  }
+
+  return (
+    <div className="flex gap-4 md:flex-row">
+      {select}
+      {eventRange?.type === "specific" ? (
+        <DateRangePopover
+          specificRange={eventRange.dateRange}
+          onChangeSpecific={updateSpecificRange}
+        />
+      ) : (
+        <WeekdayCalendar
+          selectedDays={
+            eventRange?.weekdays ?? {
+              Sun: 0,
+              Mon: 0,
+              Tue: 0,
+              Wed: 0,
+              Thu: 0,
+              Fri: 0,
+              Sat: 0,
+            }
+          }
+          onChange={updateWeekdayRange}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/app/ui/components/month-calendar.tsx b/app/ui/components/month-calendar.tsx
new file mode 100644
index 00000000..61e6b6ad
--- /dev/null
+++ b/app/ui/components/month-calendar.tsx
@@ -0,0 +1,66 @@
+"use client";
+
+import { useState } from "react";
+import useCheckMobile from "@/app/_utils/use-check-mobile";
+
+import {
+  DateRange,
+  DayPicker,
+  SelectRangeEventHandler,
+  getDefaultClassNames,
+} from "react-day-picker";
+
+type CalendarProps = {
+  className?: string;
+  selectedRange: DateRange;
+  onRangeSelect: (range: { from: Date | null; to: Date | null }) => void;
+};
+
+export function Calendar({
+  className,
+  selectedRange,
+  onRangeSelect,
+}: CalendarProps) {
+  const defaultClassNames = getDefaultClassNames();
+
+  const isMobile = useCheckMobile();
+  const numberOfMonths = isMobile ? 6 : 2;
+  const hideNavigation = isMobile ? true : false;
+
+  const today = new Date();
+
+  const [month, setMonth] = useState(today);
+
+  const handleRangeSelect: SelectRangeEventHandler = (
+    range: DateRange | undefined,
+  ) => {
+    const from = range?.from || null;
+    const to = range?.to || null;
+    onRangeSelect({ from, to });
+  };
+
+  return (
+    <div className={className}>
+      {/* <button
+        onClick={() => setMonth(today)}
+        className="rounded-full border-1 border-red px-6 py-1 hover:bg-red-300 dark:hover:bg-red-900"
+      >
+        Today
+      </button> */}
+      <DayPicker
+        mode="range"
+        numberOfMonths={numberOfMonths}
+        animate
+        hideNavigation={hideNavigation}
+        month={month}
+        onMonthChange={setMonth}
+        selected={selectedRange}
+        onSelect={handleRangeSelect}
+        disabled={{ before: new Date() }}
+        classNames={{
+          root: `${defaultClassNames.root} flex justify-center items-center`,
+        }}
+      />
+    </div>
+  );
+}
diff --git a/app/ui/components/schedule/grid-preview-dialog.tsx b/app/ui/components/schedule/grid-preview-dialog.tsx
new file mode 100644
index 00000000..e33f3a1c
--- /dev/null
+++ b/app/ui/components/schedule/grid-preview-dialog.tsx
@@ -0,0 +1,107 @@
+"use client";
+
+import { EnterFullScreenIcon, Cross2Icon } from "@radix-ui/react-icons";
+import { motion } from "framer-motion";
+import ScheduleGrid from "./schedule-grid";
+import { EventRange } from "@/app/_types/schedule-types";
+import { useState } from "react";
+import TimezoneSelect from "../timezone-select";
+
+import InteractiveScheduleGrid from "./interactive-schedule-grid";
+import { UserAvailability } from "@/app/_types/user-availability";
+
+interface GridPreviewDialogProps {
+  eventRange: EventRange;
+}
+
+export default function GridPreviewDialog({
+  eventRange,
+}: GridPreviewDialogProps) {
+  const [userAvailability, setUserAvailability] = useState<UserAvailability>({
+    type: "specific",
+    selections: {},
+  });
+
+  const [isOpen, setIsOpen] = useState(false);
+  const [timezone, setTimezone] = useState(eventRange.timezone);
+
+  const handleTZChange = (newTZ: string | number) => {
+    setTimezone(newTZ.toString());
+  };
+
+  return (
+    <div className="h-full">
+      {isOpen && (
+        <div
+          className="fixed inset-0 z-50 bg-gray-700/40"
+          onClick={() => {
+            setIsOpen(false);
+            setTimezone(eventRange.timezone);
+          }}
+        />
+      )}
+      <motion.div
+        layout
+        className={`flex flex-col space-y-4 rounded border border-transparent ${isOpen ? "fixed inset-0 z-50 m-auto h-[85vh] w-[85vw] rounded-lg bg-white p-8 dark:bg-violet" : "h-full p-2 hover:border-violet dark:hover:border-gray-400"}`}
+      >
+        <motion.div
+          layout
+          className="mr-4 flex items-center justify-end space-x-2"
+        >
+          <label className="text-sm font-medium">Grid Preview</label>
+          {isOpen ? (
+            <Cross2Icon
+              className="h-5 w-5 cursor-pointer hover:text-blue dark:hover:text-red"
+              onClick={() => {
+                setIsOpen(!isOpen);
+                setTimezone(eventRange.timezone);
+              }}
+            />
+          ) : (
+            <EnterFullScreenIcon
+              className="h-5 w-5 cursor-pointer hover:text-blue dark:hover:text-red"
+              onClick={() => setIsOpen(!isOpen)}
+            />
+          )}
+        </motion.div>
+        {isOpen ? (
+          <motion.div className="grow space-y-4">
+            <ScheduleGrid
+              eventRange={eventRange}
+              // disableSelect={false}
+              timezone={timezone}
+            />
+            {/* <InteractiveScheduleGrid
+              eventRange={eventRange}
+              timezone={timezone}
+              setUserAvailability={setUserAvailability}
+              userAvailability={userAvailability}
+            /> */}
+            <div className="flex items-center justify-between">
+              <TimezoneSelect
+                value={timezone}
+                onChange={handleTZChange}
+                className="ml-[50px] flex items-end gap-4"
+                label="See event in"
+              />
+              <label className="mr-[20px] text-sm">
+                Original Event in{" "}
+                <span className="font-bold text-blue dark:text-red">
+                  {eventRange.timezone}
+                </span>
+              </label>
+            </div>
+          </motion.div>
+        ) : (
+          <motion.div className="grow space-y-4">
+            <ScheduleGrid
+              eventRange={eventRange}
+              disableSelect={true}
+              timezone={timezone}
+            />
+          </motion.div>
+        )}
+      </motion.div>
+    </div>
+  );
+}
diff --git a/app/ui/components/schedule/interactive-schedule-grid.tsx b/app/ui/components/schedule/interactive-schedule-grid.tsx
new file mode 100644
index 00000000..7048c276
--- /dev/null
+++ b/app/ui/components/schedule/interactive-schedule-grid.tsx
@@ -0,0 +1,138 @@
+// components/interactive-schedule-grid.tsx
+
+"use client";
+
+import { useCallback, useState, useRef } from "react";
+import ScheduleGrid from "./schedule-grid";
+import {
+  UserAvailability,
+  toggleAvailability,
+  isAvailable,
+  addAvailability,
+  removeAvailability,
+} from "@/app/_types/user-availability";
+import { EventRange } from "@/app/_types/schedule-types";
+
+interface InteractiveScheduleGridProps {
+  eventRange: EventRange;
+  timezone: string;
+  userAvailability: UserAvailability;
+  setUserAvailability: (ua: UserAvailability) => void;
+}
+
+export default function InteractiveScheduleGrid({
+  eventRange,
+  timezone,
+  userAvailability,
+  setUserAvailability,
+}: InteractiveScheduleGridProps) {
+  const [isDragging, setIsDragging] = useState(false);
+  const dragMode = useRef<"add" | "remove">("add");
+
+  const getDayKeys = (): string[] => {
+    if (eventRange.type === "specific") {
+      const { dateRange } = eventRange;
+      const days: string[] = [];
+      if (dateRange?.from && dateRange?.to) {
+        const current = new Date(dateRange.from);
+        while (current <= dateRange.to) {
+          days.push(current.toISOString().split("T")[0]);
+          current.setDate(current.getDate() + 1);
+        }
+      }
+      return days;
+    } else {
+      return Object.entries(eventRange.weekdays)
+        .filter(([, enabled]) => enabled === 1)
+        .map(([day]) => day);
+    }
+  };
+
+  const hours = (): number[] => {
+    const from = eventRange.timeRange.from;
+    const to = eventRange.timeRange.to;
+    if (!from || !to) return [];
+    const fromHour = from.getHours();
+    const toHour = to.getHours();
+    return Array.from(
+      { length: toHour - fromHour + 1 },
+      (_, i) => fromHour + i,
+    );
+  };
+
+  const dayKeys = getDayKeys();
+  const hourList = hours();
+
+  const handleStart = (day: string, hour: number) => {
+    const selected = isAvailable(userAvailability, day, hour);
+    dragMode.current = selected ? "remove" : "add";
+    setIsDragging(true);
+    updateSelection(day, hour);
+  };
+
+  const handleEnter = (day: string, hour: number) => {
+    if (isDragging) updateSelection(day, hour);
+  };
+
+  const handleEnd = () => {
+    setIsDragging(false);
+  };
+
+  const updateSelection = (day: string, hour: number) => {
+    const updated =
+      dragMode.current === "add"
+        ? addAvailability(userAvailability, day, hour)
+        : removeAvailability(userAvailability, day, hour);
+    setUserAvailability(updated);
+  };
+
+  return (
+    <div
+      className="h-full"
+      onMouseLeave={handleEnd}
+      onMouseUp={handleEnd}
+      onTouchEnd={handleEnd}
+    >
+      <ScheduleGrid
+        eventRange={eventRange}
+        timezone={timezone}
+        disableSelect={false}
+      />
+
+      <div
+        className="pointer-events-none absolute inset-0 z-10 grid"
+        style={{
+          gridTemplateColumns: `50px repeat(${dayKeys.length}, 1fr) 20px`,
+          gridTemplateRows: `50px repeat(${hourList.length}, 1fr)`,
+        }}
+      >
+        {hourList.map((hour) =>
+          dayKeys.map((day) => {
+            const selected = isAvailable(userAvailability, day, hour);
+            return (
+              <div
+                key={`${day}-${hour}`}
+                className={`pointer-events-auto border border-transparent ${selected ? "bg-blue-400/40" : "hover:bg-blue-200/30"}`}
+                onMouseDown={() => handleStart(day, hour)}
+                onMouseEnter={() => handleEnter(day, hour)}
+                onTouchStart={() => handleStart(day, hour)}
+                onTouchMove={(e) => {
+                  const target = document.elementFromPoint(
+                    e.touches[0].clientX,
+                    e.touches[0].clientY,
+                  );
+                  const dataset = target?.getAttribute("data-key-hour");
+                  if (dataset) {
+                    const [d, h] = dataset.split(":");
+                    handleEnter(d, parseInt(h));
+                  }
+                }}
+                data-key-hour={`${day}:${hour}`}
+              />
+            );
+          }),
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/app/ui/components/schedule/schedule-grid.tsx b/app/ui/components/schedule/schedule-grid.tsx
new file mode 100644
index 00000000..b4e48c34
--- /dev/null
+++ b/app/ui/components/schedule/schedule-grid.tsx
@@ -0,0 +1,222 @@
+"use client";
+
+import { useState, useMemo } from "react";
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ExclamationTriangleIcon,
+} from "@radix-ui/react-icons";
+
+import {
+  EventRange,
+  getDateLabels,
+  getEnabledWeekdays,
+} from "@/app/_types/schedule-types";
+import useCheckMobile from "@/app/_utils/use-check-mobile";
+
+interface ScheduleGridProps {
+  eventRange: EventRange;
+  timezone: string;
+  disableSelect?: boolean;
+}
+
+export default function ScheduleGrid({
+  disableSelect = false,
+  eventRange,
+  timezone, // current timezone of the user, not necessarily the original
+}: ScheduleGridProps) {
+  const isMobile = useCheckMobile();
+
+  let numHours = 0;
+  let numDays = 0;
+  let daysLabel: string[] = [];
+
+  const { timeRange } = eventRange;
+  numHours =
+    timeRange.to && timeRange.from
+      ? timeRange.to.getHours() - timeRange.from.getHours() + 1
+      : 0;
+
+  const hours = useMemo(() => {
+    const range: Date[] = [];
+    for (let i = 0; i < numHours; i++) {
+      const hour = timeRange.from
+        ? new Date(timeRange.from.getTime() + i * 3600000)
+        : new Date(); // Fallback to current time or handle appropriately
+      range.push(hour);
+    }
+    return range;
+  }, [timeRange, numHours]);
+
+  if (eventRange.type === "specific") {
+    const { dateRange } = eventRange;
+    if (!dateRange || !timeRange) {
+      return GridError({ message: "Invalid date or time range" });
+    }
+
+    numDays =
+      Math.ceil(
+        ((dateRange.to?.getTime() ?? 0) - (dateRange.from?.getTime() ?? 0)) /
+          (1000 * 60 * 60 * 24),
+      ) + 1;
+    daysLabel = getDateLabels(dateRange);
+  } else if (eventRange.type === "weekday") {
+    const { weekdays } = eventRange;
+    const enabledWeekdays = getEnabledWeekdays(weekdays);
+    if (!enabledWeekdays || !timeRange) {
+      return GridError({ message: "Invalid weekdays or time range" });
+    }
+
+    numDays = enabledWeekdays.length;
+    daysLabel = enabledWeekdays.map((day) => day.toUpperCase());
+  }
+
+  const maxDaysVisible = isMobile ? 4 : 7;
+  const [currentPage, setCurrentPage] = useState(0);
+  const totalPages = Math.ceil(numDays / maxDaysVisible);
+
+  const startIndex = currentPage * maxDaysVisible;
+  const endIndex = Math.min(startIndex + maxDaysVisible, numDays);
+  const visibleDays = daysLabel.slice(startIndex, endIndex);
+
+  const timeColWidth = 50;
+  const rightArrowWidth = 20;
+
+  if (numHours <= 0) {
+    return GridError({ message: "Invalid time range" });
+  } else if (numDays <= 0) {
+    return GridError({ message: "Invalid or missing date range" });
+  }
+
+  return (
+    <div className="relative h-[90%] w-full">
+      {/* Arrows */}
+      {currentPage > 0 && (
+        <button
+          onClick={() => setCurrentPage((p) => Math.max(p - 1, 0))}
+          className="absolute top-0 left-6 z-10 h-[50px] text-xl"
+          style={{ width: `${timeColWidth}px` }}
+        >
+          <ChevronLeftIcon className="h-5 w-5" />
+        </button>
+      )}
+      {currentPage < totalPages - 1 && (
+        <button
+          onClick={() => setCurrentPage((p) => Math.min(p + 1, totalPages - 1))}
+          className="absolute top-0 right-0 z-10 h-[50px] text-xl"
+          style={{ width: `${rightArrowWidth}px` }}
+        >
+          <ChevronRightIcon className="h-5 w-5" />
+        </button>
+      )}
+
+      {/* Grid */}
+      <div
+        className="grid h-full w-full divide-x-1 divide-y-1 divide-solid divide-gray-400"
+        style={{
+          gridTemplateColumns: `${timeColWidth}px repeat(${visibleDays.length}, 1fr) ${rightArrowWidth}px`,
+          gridTemplateRows: `50px repeat(${numHours}, 1fr)`,
+        }}
+      >
+        {Array.from({
+          length: (numHours + 1) * (visibleDays.length + 2) + 1,
+        }).map((_, i) => (
+          <div
+            key={i}
+            className={`${disableSelect ? "cursor-not-allowed" : ""}`}
+          />
+        ))}
+      </div>
+
+      {/* Time labels */}
+      <div
+        className="pointer-events-none absolute top-0 bg-white dark:bg-violet"
+        style={{
+          width: `${timeColWidth}px`,
+          height: "100%",
+          display: "grid",
+          gridTemplateRows: `50px repeat(${numHours}, 1fr)`,
+          left: 0,
+        }}
+      >
+        <div />
+        {Array.from({ length: numHours }).map((_, i) => {
+          const hour = timeRange.from
+            ? new Date(timeRange.from.getTime() + i * 3600000)
+            : new Date(); // Fallback to current time or handle appropriately
+          const formatter = new Intl.DateTimeFormat("en-US", {
+            timeZone: timezone,
+            hour: "numeric",
+            hour12: true,
+          });
+          return (
+            <div
+              key={i}
+              className="relative flex items-start justify-end pr-2 text-right text-xs"
+            >
+              <span className="absolute -top-2">{formatter.format(hour)}</span>
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Column headers */}
+      <div
+        className="absolute top-0 grid h-[50px]"
+        style={{
+          left: `${timeColWidth}px`,
+          right: `${rightArrowWidth}px`,
+          gridTemplateColumns: `repeat(${visibleDays.length}, 1fr)`,
+        }}
+      >
+        {visibleDays.map((day, dayIndex) => {
+          const type = eventRange.type;
+
+          if (type === "specific") {
+            // split the day string into date and month
+            const [weekday, month, date] = day.split(" ");
+            return (
+              <div
+                key={dayIndex}
+                className="flex flex-col items-center justify-center text-sm leading-tight font-medium"
+              >
+                <div>{weekday}</div>
+                <div>
+                  {month} {date}
+                </div>
+              </div>
+            );
+          } else if (type === "weekday") {
+            return (
+              <div
+                key={dayIndex}
+                className="flex items-center justify-center text-sm font-medium"
+              >
+                {day.toUpperCase()}
+              </div>
+            );
+          }
+        })}
+      </div>
+
+      {/* Right border */}
+      <div
+        className="pointer-events-none absolute top-0 bg-white dark:bg-violet"
+        style={{
+          width: `${rightArrowWidth}px`,
+          height: "100%",
+          right: 0,
+        }}
+      ></div>
+    </div>
+  );
+}
+
+const GridError = ({ message }: { message: string }) => {
+  return (
+    <div className="flex h-full w-full items-center justify-center text-sm">
+      <ExclamationTriangleIcon className="mr-2 h-5 w-5 text-red" />
+      {message}
+    </div>
+  );
+};
diff --git a/app/ui/components/time-dropdown.tsx b/app/ui/components/time-dropdown.tsx
new file mode 100644
index 00000000..b5c197e9
--- /dev/null
+++ b/app/ui/components/time-dropdown.tsx
@@ -0,0 +1,87 @@
+import CustomSelect from "./custom-select";
+import { fromZonedTime } from "date-fns-tz";
+
+type TimeDropdownProps = {
+  onChange: (time: Date) => void;
+  value: Date | null | undefined;
+  defaultTZ: string;
+  duration: number;
+};
+
+export default function TimeDropdown({
+  onChange,
+  value,
+  defaultTZ,
+  duration,
+}: TimeDropdownProps) {
+  const options = Array.from({ length: 24 }, (_, i) => {
+    const hour = i % 12 === 0 ? 12 : i % 12;
+    const period = i < 12 ? "am" : "pm";
+    return { label: `${hour}:00 ${period}`, value: i };
+  });
+
+  const handleValueChange = (selectedValue: string | number) => {
+    const hour = Number(selectedValue);
+
+    const zonedSelectedTime = new Date();
+    zonedSelectedTime.setHours(hour, 0, 0, 0);
+    onChange(fromZonedTime(zonedSelectedTime, defaultTZ));
+  };
+
+  // Format current `value` to match an option like "2 pm"
+  const formattedValue = (() => {
+    if (!value) return "";
+    const hour = value.getHours();
+    return hour;
+    // const displayHour = hour % 12 === 0 ? 12 : hour % 12;
+    // const period = hour < 12 ? "am" : "pm";
+    // return `${displayHour} ${period}`;
+  })();
+
+  return (
+    <CustomSelect
+      options={options}
+      value={value ? value.getHours() : ""}
+      onValueChange={handleValueChange}
+      className="h-fit w-fit"
+    />
+  );
+}
+
+//   const options = Array.from({ length: Math.ceil(1440 / duration) }, (_, i) => {
+//     const totalMinutes = i * duration;
+//     const hours = Math.floor(totalMinutes / 60);
+//     const minutes = totalMinutes % 60;
+//     const hour = hours % 12 === 0 ? 12 : hours % 12;
+//     const period = hours < 12 ? "am" : "pm";
+//     const label = `${hour}:${minutes.toString().padStart(2, "0")} ${period}`;
+//     return { label, value: totalMinutes };
+//   });
+
+//   const dateToMinutes = (date: Date, duration: number) => {
+//     const totalMinutes = date.getHours() * 60 + date.getMinutes();
+//     return Math.ceil(totalMinutes / duration) * duration;
+//   };
+
+//   const handleValueChange = (selectedValue: string | number) => {
+//     const totalMinutes = Number(selectedValue);
+//     const hour = Math.floor(totalMinutes / 60);
+//     const minutes = totalMinutes % 60;
+
+//     const zonedSelectedTime = new Date();
+//     zonedSelectedTime.setHours(hour, minutes, 0, 0);
+//     onChange(fromZonedTime(zonedSelectedTime, defaultTZ));
+//   };
+
+//   return (
+//     <div className="flex items-center justify-between">
+//       <div className="flex items-center gap-2">
+//         <CustomSelect
+//           options={options}
+//           value={dateToMinutes(value ?? new Date(), duration)}
+//           onValueChange={handleValueChange}
+//         />
+//       </div>
+//     </div>
+//   );
+// }
diff --git a/app/ui/components/timezone-select.tsx b/app/ui/components/timezone-select.tsx
new file mode 100644
index 00000000..14a01643
--- /dev/null
+++ b/app/ui/components/timezone-select.tsx
@@ -0,0 +1,31 @@
+import { groupedTimezones } from "@/app/_lib/grouped-timezones";
+import CustomSelect from "./custom-select";
+
+type TimezoneSelectProps = {
+  label?: string;
+  value: string;
+  onChange: (tz: string | number) => void;
+  className?: string;
+};
+
+export default function TimezoneSelect({
+  label = "Event Timezone",
+  value,
+  onChange,
+  className,
+}: TimezoneSelectProps) {
+  return (
+    <div className={className}>
+      <label htmlFor="timezone" className="mb-2 block text-sm font-medium">
+        {label}
+      </label>
+      <CustomSelect
+        options={groupedTimezones}
+        isGrouped
+        value={value}
+        onValueChange={onChange}
+        className="w-fit"
+      />
+    </div>
+  );
+}
diff --git a/app/ui/components/weekday-calendar.tsx b/app/ui/components/weekday-calendar.tsx
new file mode 100644
index 00000000..c4b59122
--- /dev/null
+++ b/app/ui/components/weekday-calendar.tsx
@@ -0,0 +1,68 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import Checkbox from "./checkbox";
+
+import { WeekdayMap } from "@/app/_types/schedule-types";
+
+type WeekdayCalendarProps = {
+  selectedDays: WeekdayMap;
+  onChange: (map: WeekdayMap) => void;
+};
+
+let days: Array<keyof WeekdayMap> = [
+  "Sun",
+  "Mon",
+  "Tue",
+  "Wed",
+  "Thu",
+  "Fri",
+  "Sat",
+];
+
+export default function WeekdayCalendar({
+  selectedDays,
+  onChange,
+}: WeekdayCalendarProps) {
+  const [startMonday, setStartMonday] = useState(false);
+  days = startMonday ? [...days.slice(1), days[0]] : days;
+
+  useEffect(() => {
+    const today = new Date();
+    const dayOfWeek = today.getDay();
+    selectedDays[days[dayOfWeek]] = 1;
+    onChange(selectedDays);
+  }, []);
+
+  const handleRangeSelect = (day: keyof WeekdayMap) => {
+    const newSelectedDays = { ...selectedDays };
+    newSelectedDays[day] = newSelectedDays[day] === 1 ? 0 : 1;
+    onChange(newSelectedDays);
+  };
+
+  return (
+    <div className="flex space-y-2">
+      <div className="grid flex-1 grid-cols-7 divide-x-1 divide-solid divide-gray-400 rounded-lg border border-gray-400 text-sm [&>*]:px-2">
+        {days.map((day) => (
+          <button
+            key={day}
+            onClick={() => handleRangeSelect(day as keyof WeekdayMap)}
+            className={`min-h-9 ${
+              selectedDays[day as keyof WeekdayMap] === 1
+                ? "bg-blue text-white dark:bg-red-300"
+                : ""
+            } `}
+          >
+            {day}
+          </button>
+        ))}
+      </div>
+      {/* 
+      <Checkbox
+        label="Start on Monday"
+        checked={startMonday}
+        onChange={setStartMonday}
+      /> */}
+    </div>
+  );
+}
diff --git a/app/ui/layout/header.tsx b/app/ui/layout/header.tsx
new file mode 100644
index 00000000..48a88d10
--- /dev/null
+++ b/app/ui/layout/header.tsx
@@ -0,0 +1,25 @@
+import Image from "next/image";
+import ToggleDarkMode from "./theme-toggle";
+export default function Header() {
+  return (
+    <div className="grid w-full grid-cols-3 items-center">
+      <div className="relative col-start-2 h-[75px] w-[100px] md:col-start-1">
+        <Image
+          src="/tomeeto-light.png"
+          alt="Tomeeto Logo"
+          fill
+          className="absolute inset-0 object-contain opacity-100 transition-opacity duration-500 dark:opacity-0"
+        />
+        <Image
+          src="/tomeeto-dark.png"
+          alt="Tomeeto Logo"
+          fill
+          className="absolute inset-0 object-contain opacity-0 transition-opacity duration-500 dark:opacity-100"
+        />
+      </div>
+      <div className="col-start-3 inline-flex justify-end">
+        <ToggleDarkMode />
+      </div>
+    </div>
+  );
+}
diff --git a/app/ui/layout/theme-toggle.tsx b/app/ui/layout/theme-toggle.tsx
new file mode 100644
index 00000000..b8c0a95f
--- /dev/null
+++ b/app/ui/layout/theme-toggle.tsx
@@ -0,0 +1,34 @@
+"use client";
+
+import { FiSun, FiMoon } from "react-icons/fi";
+import { useState, useEffect } from "react";
+import { useTheme } from "next-themes";
+import Image from "next/image";
+
+export default function ToggleDarkMode() {
+  const [mounted, setMounted] = useState(false);
+  const { setTheme, resolvedTheme } = useTheme();
+
+  useEffect(() => setMounted(true), []);
+
+  if (!mounted)
+    return (
+      <Image
+        src="data:image/svg+xml;base64,PHN2ZyBzdHJva2U9IiNGRkZGRkYiIGZpbGw9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iMCIgdmlld0JveD0iMCAwIDI0IDI0IiBoZWlnaHQ9IjIwMHB4IiB3aWR0aD0iMjAwcHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB4PSIyIiB5PSIyIiBmaWxsPSJub25lIiBzdHJva2Utd2lkdGg9IjIiIHJ4PSIyIj48L3JlY3Q+PC9zdmc+Cg=="
+        width={36}
+        height={36}
+        sizes="36x36"
+        alt="Loading Light/Dark Toggle"
+        priority={false}
+        title="Loading Light/Dark Toggle"
+      />
+    );
+
+  if (resolvedTheme === "dark") {
+    return <FiSun size={20} onClick={() => setTheme("light")} />;
+  }
+
+  if (resolvedTheme === "light") {
+    return <FiMoon size={20} onClick={() => setTheme("dark")} />;
+  }
+}
diff --git a/app/utils/useTheme.tsx b/app/utils/useTheme.tsx
deleted file mode 100644
index 15d71dbc..00000000
--- a/app/utils/useTheme.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { useState, useEffect, useCallback } from "react";
-
-export default function useDarkMode() {
-  const [isDarkMode, setIsDarkMode] = useState<boolean>(() => {
-    const savedTheme = localStorage.getItem("theme");
-    if (savedTheme) {
-      return savedTheme === "dark";
-    }
-    return window.matchMedia("(prefers-color-scheme: dark)").matches;
-  });
-
-  // Toggle dark mode
-  const toggleDarkMode = useCallback(() => {
-    setIsDarkMode((prev) => {
-      const newMode = !prev;
-      const html = document.documentElement;
-      if (newMode) {
-        html.classList.add("dark");
-        localStorage.setItem("theme", "dark");
-      } else {
-        html.classList.remove("dark");
-        localStorage.setItem("theme", "light");
-      }
-      return newMode;
-    });
-  }, []);
-
-  // Sync the theme with the <html> element
-  useEffect(() => {
-    const html = document.documentElement;
-    if (isDarkMode) {
-      html.classList.add("dark");
-    } else {
-      html.classList.remove("dark");
-    }
-  }, [isDarkMode]);
-
-  return { isDarkMode, toggleDarkMode };
-}
diff --git a/next.config.ts b/next.config.ts
index e9ffa308..28f40ec5 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -1,7 +1,7 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  /* config options here */
+  allowedDevOrigins: ["129.161.139.75"],
 };
 
 export default nextConfig;
diff --git a/package-lock.json b/package-lock.json
index bece80a2..73947a84 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,10 +8,22 @@
       "name": "frontend",
       "version": "0.1.0",
       "dependencies": {
+        "@radix-ui/react-dialog": "^1.1.13",
+        "@radix-ui/react-icons": "^1.3.2",
+        "@radix-ui/react-popover": "^1.1.13",
+        "@radix-ui/react-select": "^2.2.4",
+        "clsx": "^2.1.1",
+        "date-fns-tz": "^3.2.0",
+        "framer-motion": "^12.11.4",
         "next": "15.3.1",
+        "next-themes": "^0.4.6",
         "postcss": "^8.5.3",
         "react": "^19.0.0",
-        "react-dom": "^19.0.0"
+        "react-day-picker": "^9.6.7",
+        "react-dom": "^19.0.0",
+        "react-icons": "^5.5.0",
+        "tailwind-merge": "^3.2.0",
+        "vaul": "^1.1.2"
       },
       "devDependencies": {
         "@eslint/eslintrc": "^3",
@@ -39,6 +51,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@date-fns/tz": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@date-fns/tz/-/tz-1.2.0.tgz",
+      "integrity": "sha512-LBrd7MiJZ9McsOgxqWX7AaxrDjcFVjWH/tIKJd7pnR7McaslGYOP1QmmiBXdJH/H/yLCT+rcQ7FaPBUxRGUtrg=="
+    },
     "node_modules/@emnapi/core": {
       "version": "1.4.3",
       "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.4.3.tgz",
@@ -197,6 +214,40 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.0.tgz",
+      "integrity": "sha512-FRdBLykrPPA6P76GGGqlex/e7fbe0F1ykgxHYNXQsH/iTEtjMj/f9bpY5oQqbjt5VgZvgz/uKXbGuROijh3VLA==",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.9"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.0.tgz",
+      "integrity": "sha512-lGTor4VlXcesUMh1cupTUTDoCxMb0V6bm3CnxHzQcw8Eaf1jQbgQX4i02fYgT0vJ82tb5MZ4CZk1LRGkktJCzg==",
+      "dependencies": {
+        "@floating-ui/core": "^1.7.0",
+        "@floating-ui/utils": "^0.2.9"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.2.tgz",
+      "integrity": "sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.9.tgz",
+      "integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg=="
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.1",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -805,6 +856,578 @@
         "node": ">=12.4.0"
       }
     },
+    "node_modules/@radix-ui/number": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.1.tgz",
+      "integrity": "sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g=="
+    },
+    "node_modules/@radix-ui/primitive": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.2.tgz",
+      "integrity": "sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA=="
+    },
+    "node_modules/@radix-ui/react-arrow": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.6.tgz",
+      "integrity": "sha512-2JMfHJf/eVnwq+2dewT3C0acmCWD3XiVA1Da+jTDqo342UlU13WvXtqHhG+yJw5JeQmu4ue2eMy6gcEArLBlcw==",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collection": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.6.tgz",
+      "integrity": "sha512-PbhRFK4lIEw9ADonj48tiYWzkllz81TM7KVYyyMMw2cwHO7D5h4XKEblL8NlaRisTK3QTe6tBEhDccFUryxHBQ==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.2",
+        "@radix-ui/react-slot": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
+      "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-context": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+      "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.13.tgz",
+      "integrity": "sha512-ARFmqUyhIVS3+riWzwGTe7JLjqwqgnODBUZdqpWar/z1WFs9z76fuOs/2BOWCR+YboRn4/WN9aoaGVwqNRr8VA==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.9",
+        "@radix-ui/react-focus-guards": "1.1.2",
+        "@radix-ui/react-focus-scope": "1.1.6",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-portal": "1.1.8",
+        "@radix-ui/react-presence": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.2",
+        "@radix-ui/react-slot": "1.2.2",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-direction": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.1.tgz",
+      "integrity": "sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.9.tgz",
+      "integrity": "sha512-way197PiTvNp+WBP7svMJasHl+vibhWGQDb6Mgf5mhEWJkgb85z7Lfl9TUdkqpWsf8GRNmoopx9ZxCyDzmgRMQ==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.2",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-escape-keydown": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.2.tgz",
+      "integrity": "sha512-fyjAACV62oPV925xFCrH8DR5xWhg9KYtJT4s3u54jxp+L/hbpTY2kIeEFFbFe+a/HCE94zGQMZLIpVTPVZDhaA==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.6.tgz",
+      "integrity": "sha512-r9zpYNUQY+2jWHWZGyddQLL9YHkM/XvSFHVcWs7bdVuxMAnCwTAuy6Pf47Z4nw7dYcUou1vg/VgjjrrH03VeBw==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.2",
+        "@radix-ui/react-use-callback-ref": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-icons": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.3.2.tgz",
+      "integrity": "sha512-fyQIhGDhzfc9pK2kH6Pl9c4BDJGfMkPqkyIgYDthyNYoNg3wVhoJMMh19WS4Up/1KMPFVpNsT2q3WmXn2N1m6g==",
+      "peerDependencies": {
+        "react": "^16.x || ^17.x || ^18.x || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/@radix-ui/react-id": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.1.tgz",
+      "integrity": "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.13.tgz",
+      "integrity": "sha512-84uqQV3omKDR076izYgcha6gdpN8m3z6w/AeJ83MSBJYVG/AbOHdLjAgsPZkeC/kt+k64moXFCnio8BbqXszlw==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.9",
+        "@radix-ui/react-focus-guards": "1.1.2",
+        "@radix-ui/react-focus-scope": "1.1.6",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-popper": "1.2.6",
+        "@radix-ui/react-portal": "1.1.8",
+        "@radix-ui/react-presence": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.2",
+        "@radix-ui/react-slot": "1.2.2",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popper": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.6.tgz",
+      "integrity": "sha512-7iqXaOWIjDBfIG7aq8CUEeCSsQMLFdn7VEE8TaFz704DtEzpPHR7w/uuzRflvKgltqSAImgcmxQ7fFX3X7wasg==",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.0.0",
+        "@radix-ui/react-arrow": "1.1.6",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.2",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-rect": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1",
+        "@radix-ui/rect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-portal": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.8.tgz",
+      "integrity": "sha512-hQsTUIn7p7fxCPvao/q6wpbxmCwgLrlz+nOrJgC+RwfZqWY/WN+UMqkXzrtKbPrF82P43eCTl3ekeKuyAQbFeg==",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-presence": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.4.tgz",
+      "integrity": "sha512-ueDqRbdc4/bkaQT3GIpLQssRlFgWaL/U2z/S31qRwwLWoxHLgry3SIfCwhxeQNbirEUXFa+lq3RL3oBYXtcmIA==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.2.tgz",
+      "integrity": "sha512-uHa+l/lKfxuDD2zjN/0peM/RhhSmRjr5YWdk/37EnSv1nJ88uvG85DPexSm8HdFQROd2VdERJ6ynXbkCFi+APw==",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.2.4.tgz",
+      "integrity": "sha512-/OOm58Gil4Ev5zT8LyVzqfBcij4dTHYdeyuF5lMHZ2bIp0Lk9oETocYiJ5QC0dHekEQnK6L/FNJCceeb4AkZ6Q==",
+      "dependencies": {
+        "@radix-ui/number": "1.1.1",
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-collection": "1.1.6",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.9",
+        "@radix-ui/react-focus-guards": "1.1.2",
+        "@radix-ui/react-focus-scope": "1.1.6",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-popper": "1.2.6",
+        "@radix-ui/react-portal": "1.1.8",
+        "@radix-ui/react-primitive": "2.1.2",
+        "@radix-ui/react-slot": "1.2.2",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-visually-hidden": "1.2.2",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slot": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.2.tgz",
+      "integrity": "sha512-y7TBO4xN4Y94FvcWIOIh18fM4R1A8S4q1jhoz4PNzOoHsFcN8pogcFmZrTYAm4F9VRUrWP/Mw7xSKybIeRI+CQ==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz",
+      "integrity": "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.2.tgz",
+      "integrity": "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==",
+      "dependencies": {
+        "@radix-ui/react-use-effect-event": "0.0.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-effect-event": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-effect-event/-/react-use-effect-event-0.0.2.tgz",
+      "integrity": "sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-escape-keydown": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.1.tgz",
+      "integrity": "sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
+      "integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-previous": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.1.tgz",
+      "integrity": "sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-rect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.1.tgz",
+      "integrity": "sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==",
+      "dependencies": {
+        "@radix-ui/rect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-size": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.1.tgz",
+      "integrity": "sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-visually-hidden": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.2.2.tgz",
+      "integrity": "sha512-ORCmRUbNiZIv6uV5mhFrhsIKw4UX/N3syZtyqvry61tbGm4JlgQuSn0hk5TwCARsCjkcnuRkSdCE3xfb+ADHew==",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/rect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.1.tgz",
+      "integrity": "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw=="
+    },
     "node_modules/@rtsao/scc": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
@@ -1124,7 +1747,7 @@
       "version": "19.1.2",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.2.tgz",
       "integrity": "sha512-oxLPMytKchWGbnQM9O7D67uPa9paTNxO7jVoNMXgkkErULBPhPARCfkKL9ytcIJJRGjbsVwW4ugJzyFFvm/Tiw==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "csstype": "^3.0.2"
       }
@@ -1133,7 +1756,7 @@
       "version": "19.1.2",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.2.tgz",
       "integrity": "sha512-XGJkWF41Qq305SKWEILa1O8vzhb3aOo3ogBlSmiqNko/WmRb6QIaweuZCXjKygVDXpzXb5wyxKTSOsmkuqj+Qw==",
-      "dev": true,
+      "devOptional": true,
       "peerDependencies": {
         "@types/react": "^19.0.0"
       }
@@ -1644,6 +2267,17 @@
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
       "dev": true
     },
+    "node_modules/aria-hidden": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.4.tgz",
+      "integrity": "sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/aria-query": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
@@ -1986,6 +2620,14 @@
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
     },
+    "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/color": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
@@ -2051,7 +2693,7 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
@@ -2110,6 +2752,28 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/date-fns": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
+    "node_modules/date-fns-jalali": {
+      "version": "4.1.0-0",
+      "resolved": "https://registry.npmjs.org/date-fns-jalali/-/date-fns-jalali-4.1.0-0.tgz",
+      "integrity": "sha512-hTIP/z+t+qKwBDcmmsnmjWTduxCg+5KfdqWQvb2X/8C9+knYY6epN/pfxdDuyVlSVeFz0sM5eEfwIUQ70U4ckg=="
+    },
+    "node_modules/date-fns-tz": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-3.2.0.tgz",
+      "integrity": "sha512-sg8HqoTEulcbbbVXeg84u5UnlsQa8GS5QXMqjjYIhS4abEVVKIUwe0/l/UhrZdKaL/W5eWZNlbTeEIiOXTcsBQ==",
+      "peerDependencies": {
+        "date-fns": "^3.0.0 || ^4.0.0"
+      }
+    },
     "node_modules/debug": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
@@ -2176,6 +2840,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/detect-node-es": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
+      "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="
+    },
     "node_modules/doctrine": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
@@ -2932,6 +3601,32 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "12.11.4",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.11.4.tgz",
+      "integrity": "sha512-kyE5oWZCUxhDb7LtpEyyadNThJJvoE8a6bfUTBqz++zw3XxDOosPAvw1lqNhYbjOgy57YuAlJ5qG/Cx5BigiEQ==",
+      "dependencies": {
+        "motion-dom": "^12.11.4",
+        "motion-utils": "^12.9.4",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -2994,6 +3689,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/get-nonce": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
+      "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/get-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
@@ -4058,6 +4761,19 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/motion-dom": {
+      "version": "12.11.4",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.11.4.tgz",
+      "integrity": "sha512-1z/qYsrDjSx5QjOH8GfJ2RfFBvEzI2gdAEt2zNW+f7QkLlqjM3sQieESJr5+QtVmvD81qPANM7t97ROixKIt9Q==",
+      "dependencies": {
+        "motion-utils": "^12.9.4"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.9.4",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.9.4.tgz",
+      "integrity": "sha512-BW3I65zeM76CMsfh3kHid9ansEJk9Qvl+K5cu4DVHKGsI52n76OJ4z2CUJUV+Mn3uEP9k1JJA3tClG0ggSrRcg=="
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -4155,6 +4871,15 @@
         }
       }
     },
+    "node_modules/next-themes": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.6.tgz",
+      "integrity": "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==",
+      "peerDependencies": {
+        "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
+      }
+    },
     "node_modules/next/node_modules/postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
@@ -4600,6 +5325,26 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-day-picker": {
+      "version": "9.6.7",
+      "resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-9.6.7.tgz",
+      "integrity": "sha512-rCSt6X8FXQWpjykns/azRXjJk3cMSzkzGbDEXuEveFGNZgOjZULdJQ5wsu8Zfyo8ZgPBoYCBKQ5wRrgJfhJGbg==",
+      "dependencies": {
+        "@date-fns/tz": "1.2.0",
+        "date-fns": "4.1.0",
+        "date-fns-jalali": "4.1.0-0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/sponsors/gpbl"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/react-dom": {
       "version": "19.1.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
@@ -4611,12 +5356,86 @@
         "react": "^19.1.0"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
+      "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "dev": true
     },
+    "node_modules/react-remove-scroll": {
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.6.3.tgz",
+      "integrity": "sha512-pnAi91oOk8g8ABQKGF5/M9qxmmOPxaAnopyTHYfqYEwJhyFrbbBtHuSgtKEoH0jpcxx5o3hXqH1mNd9/Oi+8iQ==",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.7",
+        "react-style-singleton": "^2.2.3",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.3",
+        "use-sidecar": "^1.1.3"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-remove-scroll-bar": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.8.tgz",
+      "integrity": "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==",
+      "dependencies": {
+        "react-style-singleton": "^2.2.2",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-style-singleton": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
+      "integrity": "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==",
+      "dependencies": {
+        "get-nonce": "^1.0.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
@@ -5183,6 +6002,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/tailwind-merge": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.2.0.tgz",
+      "integrity": "sha512-FQT/OVqCD+7edmmJpsgCsY820RTD5AkBryuG5IUqR5YQZSdj5xlH5nLgH7YPths7WsLPSpSBNneJdM8aS8aeFA==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "4.1.4",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.4.tgz",
@@ -5445,6 +6273,59 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-callback-ref": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.3.tgz",
+      "integrity": "sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-sidecar": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.3.tgz",
+      "integrity": "sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==",
+      "dependencies": {
+        "detect-node-es": "^1.1.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vaul": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vaul/-/vaul-1.1.2.tgz",
+      "integrity": "sha512-ZFkClGpWyI2WUQjdLJ/BaGuV6AVQiJ3uELGk3OYtP+B6yCO7Cmn9vPFXVJkRaGkOJu3m8bQMgtyzNHixULceQA==",
+      "dependencies": {
+        "@radix-ui/react-dialog": "^1.1.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/package.json b/package.json
index 605027d4..f537f45e 100644
--- a/package.json
+++ b/package.json
@@ -6,13 +6,27 @@
     "dev": "next dev --turbopack",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "format": "prettier --write .",
+    "check-format": "prettier --check ."
   },
   "dependencies": {
+    "@radix-ui/react-dialog": "^1.1.13",
+    "@radix-ui/react-icons": "^1.3.2",
+    "@radix-ui/react-popover": "^1.1.13",
+    "@radix-ui/react-select": "^2.2.4",
+    "clsx": "^2.1.1",
+    "date-fns-tz": "^3.2.0",
+    "framer-motion": "^12.11.4",
     "next": "15.3.1",
+    "next-themes": "^0.4.6",
     "postcss": "^8.5.3",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-day-picker": "^9.6.7",
+    "react-dom": "^19.0.0",
+    "react-icons": "^5.5.0",
+    "tailwind-merge": "^3.2.0",
+    "vaul": "^1.1.2"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
diff --git a/postcss.config.mjs b/postcss.config.mjs
index 54e87396..7059fe95 100644
--- a/postcss.config.mjs
+++ b/postcss.config.mjs
@@ -3,4 +3,4 @@ const config = {
     "@tailwindcss/postcss": {},
   },
 };
-export default config;
\ No newline at end of file
+export default config;
diff --git a/public/tomeeto-dark.png b/public/tomeeto-dark.png
new file mode 100644
index 00000000..46cfe913
Binary files /dev/null and b/public/tomeeto-dark.png differ
diff --git a/public/tomeeto-light.png b/public/tomeeto-light.png
new file mode 100644
index 00000000..65160f4a
Binary files /dev/null and b/public/tomeeto-light.png differ