From be240407ba15273a6ae6167b233170f3789fcb63 Mon Sep 17 00:00:00 2001
From: myrmidex <myrmidex@myrmidex.net>
Date: Mon, 13 Oct 2025 17:35:07 +0200
Subject: [PATCH] Improve style consistency

---
 frontend-react-router-backup/.dockerignore    |   4 +
 frontend-react-router-backup/.gitignore       |   6 +
 .../Dockerfile                                |   0
 .../LICENSE                                   |   0
 frontend-react-router-backup/README.md        |  87 ++++++
 .../app/app.css                               |   0
 .../app/root.tsx                              |   0
 .../app/routes.ts                             |   0
 .../app/routes/home.tsx                       |   0
 .../app/welcome/logo-dark.svg                 |   0
 .../app/welcome/logo-light.svg                |   0
 .../app/welcome/welcome.tsx                   |   0
 .../package-lock.json                         |   0
 frontend-react-router-backup/package.json     |  30 ++
 .../public/favicon.ico                        | Bin
 .../react-router.config.ts                    |   0
 frontend-react-router-backup/tsconfig.json    |  27 ++
 .../vite.config.ts                            |   0
 frontend/.dockerignore                        |   5 +-
 frontend/{archive => }/.env.local.example     |   0
 frontend/{archive => }/.env.production        |   0
 frontend/.gitignore                           |  49 ++-
 frontend/COMPONENT_GUIDE.md                   | 289 ++++++++++++++++++
 frontend/README.md                            |  87 +-----
 frontend/archive/.dockerignore                |   1 -
 frontend/archive/.gitignore                   |  45 ---
 frontend/archive/README.md                    |   2 -
 frontend/archive/package.json                 |  33 --
 .../archive/src/components/layout/Card.tsx    |  15 -
 frontend/archive/src/components/ui/Alert.tsx  |  34 ---
 frontend/archive/src/components/ui/Button.tsx |  62 ----
 .../components/ui/Buttons/OutlineButton.tsx   |  37 ---
 .../ui/Buttons/OutlineLinkButton.tsx          |  49 ---
 .../src/components/ui/Buttons/SolidButton.tsx |  39 ---
 .../components/ui/Buttons/SolidLinkButton.tsx |  46 ---
 frontend/archive/src/components/ui/Toggle.tsx |  42 ---
 .../archive/src/styles/components/buttons.css |  42 ---
 frontend/archive/tailwind.config.ts           |  18 --
 frontend/archive/tsconfig.json                |  27 --
 frontend/{archive => }/bin/update.sh          |   0
 frontend/{archive => }/build_and_push.sh      |   0
 frontend/{archive => }/eslint.config.mjs      |   0
 frontend/{archive => }/next.config.ts         |   0
 frontend/package.json                         |  45 +--
 frontend/{archive => }/postcss.config.mjs     |   0
 .../{archive => }/public/dish-planner.webp    | Bin
 frontend/{archive => }/public/file.svg        |   0
 frontend/{archive => }/public/globe.svg       |   0
 frontend/{archive => }/public/next.svg        |   0
 frontend/{archive => }/public/vercel.svg      |   0
 frontend/{archive => }/public/window.svg      |   0
 .../src/app/dishes/[id]/delete/page.tsx       |   4 +-
 .../src/app/dishes/[id]/edit/page.tsx         |   7 +-
 .../src/app/dishes/create/page.tsx            |   0
 .../{archive => }/src/app/dishes/page.tsx     |   0
 frontend/{archive => }/src/app/favicon.ico    | Bin
 frontend/{archive => }/src/app/layout.tsx     |   0
 frontend/{archive => }/src/app/login/page.tsx |   0
 frontend/{archive => }/src/app/page.tsx       |   0
 .../{archive => }/src/app/register/page.tsx   |   0
 .../src/app/schedule/[date]/edit/page.tsx     |   0
 .../scheduled-user-dishes/history/page.tsx    |   0
 .../src/app/users/[id]/edit/page.tsx          |   0
 .../src/app/users/create/page.tsx             |  23 +-
 frontend/{archive => }/src/app/users/page.tsx |   9 +-
 .../{archive => }/src/components/Spinner.tsx  |   0
 .../components/features/OnboardingBanner.tsx  |   0
 .../components/features/auth/LoginForm.tsx    |  13 +-
 .../features/auth/RegistrationForm.tsx        |  23 +-
 .../features/dishes/AddUserToDishForm.tsx     |  16 +-
 .../features/dishes/CreateDishForm.tsx        |  39 +--
 .../src/components/features/dishes/Dish.tsx   |   0
 .../components/features/dishes/DishCard.tsx   |   0
 .../features/dishes/EditDishForm.tsx          |  24 +-
 .../dishes/EditDishUserCardEditForm.tsx       |   9 +-
 .../features/dishes/RecurrenceLabels.tsx      |   0
 .../features/dishes/SyncUsersForm.tsx         |   0
 .../features/dishes/UserDishCard.tsx          |   0
 .../features/navbar/MobileDropdownMenu.tsx    |   2 +-
 .../features/schedule/HistoricalDishes.tsx    |   0
 .../features/schedule/ScheduleCalendar.tsx    |   0
 .../features/schedule/ScheduleEditForm.tsx    |   4 +-
 .../schedule/ScheduleRegenerateButton.tsx     |   0
 .../schedule/ScheduleRegenerateForm.tsx       |  19 +-
 .../features/schedule/UpcomingDishes.tsx      |   0
 .../features/schedule/UserDishEditCard.tsx    |   2 +-
 .../features/schedule/dayCard/DateBadge.tsx   |   2 +-
 .../schedule/dayCard/ScheduleDayCard.tsx      |   2 +-
 .../dayCard/ScheduleDayCardUserDish.tsx       |   6 +-
 .../features/users/EditUserForm.tsx           |  21 +-
 .../src/components/layout/AuthGuard.tsx       |   0
 frontend/src/components/layout/Card.tsx       |  22 ++
 .../src/components/layout/NavBar.tsx          |  10 +-
 frontend/src/components/ui/Alert.tsx          |  29 ++
 frontend/src/components/ui/Button.tsx         | 118 +++++++
 frontend/src/components/ui/Checkbox.tsx       |  64 ++++
 .../src/components/ui/Description.tsx         |   2 +-
 .../{archive => }/src/components/ui/Hr.tsx    |   0
 frontend/src/components/ui/Input.tsx          |  68 +++++
 .../{archive => }/src/components/ui/Label.tsx |   0
 .../{archive => }/src/components/ui/Modal.tsx |   0
 .../src/components/ui/PageTitle.tsx           |   2 +-
 .../src/components/ui/RecurrenceInput.tsx     |   0
 .../src/components/ui/SectionTitle.tsx        |   2 +-
 frontend/src/components/ui/Select.tsx         |  82 +++++
 frontend/src/components/ui/Toggle.tsx         |  75 +++++
 .../{archive => }/src/context/AuthContext.tsx |   0
 frontend/{archive => }/src/helpers/Date.ts    |   0
 .../{archive => }/src/hooks/useFetchDishes.ts |   0
 .../{archive => }/src/hooks/useFetchUsers.ts  |   0
 frontend/{archive => }/src/hooks/useRoutes.ts |   0
 .../{archive => }/src/styles/base/globals.css |   0
 .../src/styles/components/select.css          |   0
 frontend/{archive => }/src/styles/main.css    |   0
 .../src/styles/theme/borders.css              |   0
 .../{archive => }/src/styles/theme/colors.css |   0
 .../src/styles/theme/colors/background.css    |   0
 .../src/styles/theme/colors/border.css        |   0
 .../src/styles/theme/colors/root.css          |   0
 .../src/styles/theme/colors/text.css          |   0
 .../{archive => }/src/styles/theme/fonts.css  |   0
 frontend/{archive => }/src/types/DishType.ts  |   0
 .../{archive => }/src/types/ScheduleType.ts   |   0
 .../src/types/ScheduledUserDishType.ts        |   0
 .../{archive => }/src/types/UserDishType.ts   |   0
 frontend/{archive => }/src/types/UserType.ts  |   0
 .../{archive => }/src/utils/api/apiRequest.ts |   0
 frontend/{archive => }/src/utils/api/auth.ts  |   0
 .../{archive => }/src/utils/api/dishApi.ts    |   0
 .../src/utils/api/scheduleApi.ts              |   0
 .../src/utils/api/scheduledUserDishesApi.ts   |   0
 .../src/utils/api/userDishApi.ts              |   0
 .../{archive => }/src/utils/api/usersApi.ts   |   0
 .../{archive => }/src/utils/dateBuilder.ts    |   0
 .../src/utils/scheduleBuilder.ts              |   0
 frontend/tailwind.config.ts                   | 148 +++++++++
 frontend/tsconfig.json                        |  46 +--
 137 files changed, 1264 insertions(+), 750 deletions(-)
 create mode 100644 frontend-react-router-backup/.dockerignore
 create mode 100644 frontend-react-router-backup/.gitignore
 rename {frontend => frontend-react-router-backup}/Dockerfile (100%)
 rename {frontend => frontend-react-router-backup}/LICENSE (100%)
 create mode 100644 frontend-react-router-backup/README.md
 rename {frontend => frontend-react-router-backup}/app/app.css (100%)
 rename {frontend => frontend-react-router-backup}/app/root.tsx (100%)
 rename {frontend => frontend-react-router-backup}/app/routes.ts (100%)
 rename {frontend => frontend-react-router-backup}/app/routes/home.tsx (100%)
 rename {frontend => frontend-react-router-backup}/app/welcome/logo-dark.svg (100%)
 rename {frontend => frontend-react-router-backup}/app/welcome/logo-light.svg (100%)
 rename {frontend => frontend-react-router-backup}/app/welcome/welcome.tsx (100%)
 rename {frontend => frontend-react-router-backup}/package-lock.json (100%)
 create mode 100644 frontend-react-router-backup/package.json
 rename {frontend => frontend-react-router-backup}/public/favicon.ico (100%)
 rename {frontend => frontend-react-router-backup}/react-router.config.ts (100%)
 create mode 100644 frontend-react-router-backup/tsconfig.json
 rename {frontend => frontend-react-router-backup}/vite.config.ts (100%)
 rename frontend/{archive => }/.env.local.example (100%)
 rename frontend/{archive => }/.env.production (100%)
 create mode 100644 frontend/COMPONENT_GUIDE.md
 delete mode 100644 frontend/archive/.dockerignore
 delete mode 100644 frontend/archive/.gitignore
 delete mode 100644 frontend/archive/README.md
 delete mode 100644 frontend/archive/package.json
 delete mode 100644 frontend/archive/src/components/layout/Card.tsx
 delete mode 100644 frontend/archive/src/components/ui/Alert.tsx
 delete mode 100644 frontend/archive/src/components/ui/Button.tsx
 delete mode 100644 frontend/archive/src/components/ui/Buttons/OutlineButton.tsx
 delete mode 100644 frontend/archive/src/components/ui/Buttons/OutlineLinkButton.tsx
 delete mode 100644 frontend/archive/src/components/ui/Buttons/SolidButton.tsx
 delete mode 100644 frontend/archive/src/components/ui/Buttons/SolidLinkButton.tsx
 delete mode 100644 frontend/archive/src/components/ui/Toggle.tsx
 delete mode 100644 frontend/archive/src/styles/components/buttons.css
 delete mode 100644 frontend/archive/tailwind.config.ts
 delete mode 100644 frontend/archive/tsconfig.json
 rename frontend/{archive => }/bin/update.sh (100%)
 rename frontend/{archive => }/build_and_push.sh (100%)
 rename frontend/{archive => }/eslint.config.mjs (100%)
 rename frontend/{archive => }/next.config.ts (100%)
 rename frontend/{archive => }/postcss.config.mjs (100%)
 rename frontend/{archive => }/public/dish-planner.webp (100%)
 rename frontend/{archive => }/public/file.svg (100%)
 rename frontend/{archive => }/public/globe.svg (100%)
 rename frontend/{archive => }/public/next.svg (100%)
 rename frontend/{archive => }/public/vercel.svg (100%)
 rename frontend/{archive => }/public/window.svg (100%)
 rename frontend/{archive => }/src/app/dishes/[id]/delete/page.tsx (95%)
 rename frontend/{archive => }/src/app/dishes/[id]/edit/page.tsx (87%)
 rename frontend/{archive => }/src/app/dishes/create/page.tsx (100%)
 rename frontend/{archive => }/src/app/dishes/page.tsx (100%)
 rename frontend/{archive => }/src/app/favicon.ico (100%)
 rename frontend/{archive => }/src/app/layout.tsx (100%)
 rename frontend/{archive => }/src/app/login/page.tsx (100%)
 rename frontend/{archive => }/src/app/page.tsx (100%)
 rename frontend/{archive => }/src/app/register/page.tsx (100%)
 rename frontend/{archive => }/src/app/schedule/[date]/edit/page.tsx (100%)
 rename frontend/{archive => }/src/app/scheduled-user-dishes/history/page.tsx (100%)
 rename frontend/{archive => }/src/app/users/[id]/edit/page.tsx (100%)
 rename frontend/{archive => }/src/app/users/create/page.tsx (70%)
 rename frontend/{archive => }/src/app/users/page.tsx (88%)
 rename frontend/{archive => }/src/components/Spinner.tsx (100%)
 rename frontend/{archive => }/src/components/features/OnboardingBanner.tsx (100%)
 rename frontend/{archive => }/src/components/features/auth/LoginForm.tsx (88%)
 rename frontend/{archive => }/src/components/features/auth/RegistrationForm.tsx (82%)
 rename frontend/{archive => }/src/components/features/dishes/AddUserToDishForm.tsx (89%)
 rename frontend/{archive => }/src/components/features/dishes/CreateDishForm.tsx (69%)
 rename frontend/{archive => }/src/components/features/dishes/Dish.tsx (100%)
 rename frontend/{archive => }/src/components/features/dishes/DishCard.tsx (100%)
 rename frontend/{archive => }/src/components/features/dishes/EditDishForm.tsx (75%)
 rename frontend/{archive => }/src/components/features/dishes/EditDishUserCardEditForm.tsx (92%)
 rename frontend/{archive => }/src/components/features/dishes/RecurrenceLabels.tsx (100%)
 rename frontend/{archive => }/src/components/features/dishes/SyncUsersForm.tsx (100%)
 rename frontend/{archive => }/src/components/features/dishes/UserDishCard.tsx (100%)
 rename frontend/{archive => }/src/components/features/navbar/MobileDropdownMenu.tsx (96%)
 rename frontend/{archive => }/src/components/features/schedule/HistoricalDishes.tsx (100%)
 rename frontend/{archive => }/src/components/features/schedule/ScheduleCalendar.tsx (100%)
 rename frontend/{archive => }/src/components/features/schedule/ScheduleEditForm.tsx (95%)
 rename frontend/{archive => }/src/components/features/schedule/ScheduleRegenerateButton.tsx (100%)
 rename frontend/{archive => }/src/components/features/schedule/ScheduleRegenerateForm.tsx (88%)
 rename frontend/{archive => }/src/components/features/schedule/UpcomingDishes.tsx (100%)
 rename frontend/{archive => }/src/components/features/schedule/UserDishEditCard.tsx (98%)
 rename frontend/{archive => }/src/components/features/schedule/dayCard/DateBadge.tsx (95%)
 rename frontend/{archive => }/src/components/features/schedule/dayCard/ScheduleDayCard.tsx (96%)
 rename frontend/{archive => }/src/components/features/schedule/dayCard/ScheduleDayCardUserDish.tsx (75%)
 rename frontend/{archive => }/src/components/features/users/EditUserForm.tsx (73%)
 rename frontend/{archive => }/src/components/layout/AuthGuard.tsx (100%)
 create mode 100644 frontend/src/components/layout/Card.tsx
 rename frontend/{archive => }/src/components/layout/NavBar.tsx (93%)
 create mode 100644 frontend/src/components/ui/Alert.tsx
 create mode 100644 frontend/src/components/ui/Button.tsx
 create mode 100644 frontend/src/components/ui/Checkbox.tsx
 rename frontend/{archive => }/src/components/ui/Description.tsx (85%)
 rename frontend/{archive => }/src/components/ui/Hr.tsx (100%)
 create mode 100644 frontend/src/components/ui/Input.tsx
 rename frontend/{archive => }/src/components/ui/Label.tsx (100%)
 rename frontend/{archive => }/src/components/ui/Modal.tsx (100%)
 rename frontend/{archive => }/src/components/ui/PageTitle.tsx (95%)
 rename frontend/{archive => }/src/components/ui/RecurrenceInput.tsx (100%)
 rename frontend/{archive => }/src/components/ui/SectionTitle.tsx (75%)
 create mode 100644 frontend/src/components/ui/Select.tsx
 create mode 100644 frontend/src/components/ui/Toggle.tsx
 rename frontend/{archive => }/src/context/AuthContext.tsx (100%)
 rename frontend/{archive => }/src/helpers/Date.ts (100%)
 rename frontend/{archive => }/src/hooks/useFetchDishes.ts (100%)
 rename frontend/{archive => }/src/hooks/useFetchUsers.ts (100%)
 rename frontend/{archive => }/src/hooks/useRoutes.ts (100%)
 rename frontend/{archive => }/src/styles/base/globals.css (100%)
 rename frontend/{archive => }/src/styles/components/select.css (100%)
 rename frontend/{archive => }/src/styles/main.css (100%)
 rename frontend/{archive => }/src/styles/theme/borders.css (100%)
 rename frontend/{archive => }/src/styles/theme/colors.css (100%)
 rename frontend/{archive => }/src/styles/theme/colors/background.css (100%)
 rename frontend/{archive => }/src/styles/theme/colors/border.css (100%)
 rename frontend/{archive => }/src/styles/theme/colors/root.css (100%)
 rename frontend/{archive => }/src/styles/theme/colors/text.css (100%)
 rename frontend/{archive => }/src/styles/theme/fonts.css (100%)
 rename frontend/{archive => }/src/types/DishType.ts (100%)
 rename frontend/{archive => }/src/types/ScheduleType.ts (100%)
 rename frontend/{archive => }/src/types/ScheduledUserDishType.ts (100%)
 rename frontend/{archive => }/src/types/UserDishType.ts (100%)
 rename frontend/{archive => }/src/types/UserType.ts (100%)
 rename frontend/{archive => }/src/utils/api/apiRequest.ts (100%)
 rename frontend/{archive => }/src/utils/api/auth.ts (100%)
 rename frontend/{archive => }/src/utils/api/dishApi.ts (100%)
 rename frontend/{archive => }/src/utils/api/scheduleApi.ts (100%)
 rename frontend/{archive => }/src/utils/api/scheduledUserDishesApi.ts (100%)
 rename frontend/{archive => }/src/utils/api/userDishApi.ts (100%)
 rename frontend/{archive => }/src/utils/api/usersApi.ts (100%)
 rename frontend/{archive => }/src/utils/dateBuilder.ts (100%)
 rename frontend/{archive => }/src/utils/scheduleBuilder.ts (100%)
 create mode 100644 frontend/tailwind.config.ts

diff --git a/frontend-react-router-backup/.dockerignore b/frontend-react-router-backup/.dockerignore
new file mode 100644
index 0000000..9b8d514
--- /dev/null
+++ b/frontend-react-router-backup/.dockerignore
@@ -0,0 +1,4 @@
+.react-router
+build
+node_modules
+README.md
\ No newline at end of file
diff --git a/frontend-react-router-backup/.gitignore b/frontend-react-router-backup/.gitignore
new file mode 100644
index 0000000..9b7c041
--- /dev/null
+++ b/frontend-react-router-backup/.gitignore
@@ -0,0 +1,6 @@
+.DS_Store
+/node_modules/
+
+# React Router
+/.react-router/
+/build/
diff --git a/frontend/Dockerfile b/frontend-react-router-backup/Dockerfile
similarity index 100%
rename from frontend/Dockerfile
rename to frontend-react-router-backup/Dockerfile
diff --git a/frontend/LICENSE b/frontend-react-router-backup/LICENSE
similarity index 100%
rename from frontend/LICENSE
rename to frontend-react-router-backup/LICENSE
diff --git a/frontend-react-router-backup/README.md b/frontend-react-router-backup/README.md
new file mode 100644
index 0000000..5c4780a
--- /dev/null
+++ b/frontend-react-router-backup/README.md
@@ -0,0 +1,87 @@
+# Welcome to React Router!
+
+A modern, production-ready template for building full-stack React applications using React Router.
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/remix-run/react-router-templates/tree/main/default)
+
+## Features
+
+- 🚀 Server-side rendering
+- ⚡️ Hot Module Replacement (HMR)
+- 📦 Asset bundling and optimization
+- 🔄 Data loading and mutations
+- 🔒 TypeScript by default
+- 🎉 TailwindCSS for styling
+- 📖 [React Router docs](https://reactrouter.com/)
+
+## Getting Started
+
+### Installation
+
+Install the dependencies:
+
+```bash
+npm install
+```
+
+### Development
+
+Start the development server with HMR:
+
+```bash
+npm run dev
+```
+
+Your application will be available at `http://localhost:5173`.
+
+## Building for Production
+
+Create a production build:
+
+```bash
+npm run build
+```
+
+## Deployment
+
+### Docker Deployment
+
+To build and run using Docker:
+
+```bash
+docker build -t my-app .
+
+# Run the container
+docker run -p 3000:3000 my-app
+```
+
+The containerized application can be deployed to any platform that supports Docker, including:
+
+- AWS ECS
+- Google Cloud Run
+- Azure Container Apps
+- Digital Ocean App Platform
+- Fly.io
+- Railway
+
+### DIY Deployment
+
+If you're familiar with deploying Node applications, the built-in app server is production-ready.
+
+Make sure to deploy the output of `npm run build`
+
+```
+├── package.json
+├── package-lock.json (or pnpm-lock.yaml, or bun.lockb)
+├── build/
+│   ├── client/    # Static assets
+│   └── server/    # Server-side code
+```
+
+## Styling
+
+This template comes with [Tailwind CSS](https://tailwindcss.com/) already configured for a simple default starting experience. You can use whatever CSS framework you prefer.
+
+---
+
+Built with ❤️ using React Router.
diff --git a/frontend/app/app.css b/frontend-react-router-backup/app/app.css
similarity index 100%
rename from frontend/app/app.css
rename to frontend-react-router-backup/app/app.css
diff --git a/frontend/app/root.tsx b/frontend-react-router-backup/app/root.tsx
similarity index 100%
rename from frontend/app/root.tsx
rename to frontend-react-router-backup/app/root.tsx
diff --git a/frontend/app/routes.ts b/frontend-react-router-backup/app/routes.ts
similarity index 100%
rename from frontend/app/routes.ts
rename to frontend-react-router-backup/app/routes.ts
diff --git a/frontend/app/routes/home.tsx b/frontend-react-router-backup/app/routes/home.tsx
similarity index 100%
rename from frontend/app/routes/home.tsx
rename to frontend-react-router-backup/app/routes/home.tsx
diff --git a/frontend/app/welcome/logo-dark.svg b/frontend-react-router-backup/app/welcome/logo-dark.svg
similarity index 100%
rename from frontend/app/welcome/logo-dark.svg
rename to frontend-react-router-backup/app/welcome/logo-dark.svg
diff --git a/frontend/app/welcome/logo-light.svg b/frontend-react-router-backup/app/welcome/logo-light.svg
similarity index 100%
rename from frontend/app/welcome/logo-light.svg
rename to frontend-react-router-backup/app/welcome/logo-light.svg
diff --git a/frontend/app/welcome/welcome.tsx b/frontend-react-router-backup/app/welcome/welcome.tsx
similarity index 100%
rename from frontend/app/welcome/welcome.tsx
rename to frontend-react-router-backup/app/welcome/welcome.tsx
diff --git a/frontend/package-lock.json b/frontend-react-router-backup/package-lock.json
similarity index 100%
rename from frontend/package-lock.json
rename to frontend-react-router-backup/package-lock.json
diff --git a/frontend-react-router-backup/package.json b/frontend-react-router-backup/package.json
new file mode 100644
index 0000000..1337f19
--- /dev/null
+++ b/frontend-react-router-backup/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "my-react-router-app",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "react-router build",
+    "dev": "react-router dev",
+    "start": "react-router-serve ./build/server/index.js",
+    "typecheck": "react-router typegen && tsc"
+  },
+  "dependencies": {
+    "@react-router/node": "^7.5.3",
+    "@react-router/serve": "^7.5.3",
+    "isbot": "^5.1.27",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-router": "^7.5.3"
+  },
+  "devDependencies": {
+    "@react-router/dev": "^7.5.3",
+    "@tailwindcss/vite": "^4.1.4",
+    "@types/node": "^20",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
+    "tailwindcss": "^4.1.4",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.3",
+    "vite-tsconfig-paths": "^5.1.4"
+  }
+}
\ No newline at end of file
diff --git a/frontend/public/favicon.ico b/frontend-react-router-backup/public/favicon.ico
similarity index 100%
rename from frontend/public/favicon.ico
rename to frontend-react-router-backup/public/favicon.ico
diff --git a/frontend/react-router.config.ts b/frontend-react-router-backup/react-router.config.ts
similarity index 100%
rename from frontend/react-router.config.ts
rename to frontend-react-router-backup/react-router.config.ts
diff --git a/frontend-react-router-backup/tsconfig.json b/frontend-react-router-backup/tsconfig.json
new file mode 100644
index 0000000..dc391a4
--- /dev/null
+++ b/frontend-react-router-backup/tsconfig.json
@@ -0,0 +1,27 @@
+{
+  "include": [
+    "**/*",
+    "**/.server/**/*",
+    "**/.client/**/*",
+    ".react-router/types/**/*"
+  ],
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "types": ["node", "vite/client"],
+    "target": "ES2022",
+    "module": "ES2022",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "rootDirs": [".", "./.react-router/types"],
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./app/*"]
+    },
+    "esModuleInterop": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true
+  }
+}
diff --git a/frontend/vite.config.ts b/frontend-react-router-backup/vite.config.ts
similarity index 100%
rename from frontend/vite.config.ts
rename to frontend-react-router-backup/vite.config.ts
diff --git a/frontend/.dockerignore b/frontend/.dockerignore
index 9b8d514..11ee758 100644
--- a/frontend/.dockerignore
+++ b/frontend/.dockerignore
@@ -1,4 +1 @@
-.react-router
-build
-node_modules
-README.md
\ No newline at end of file
+.env.local
diff --git a/frontend/archive/.env.local.example b/frontend/.env.local.example
similarity index 100%
rename from frontend/archive/.env.local.example
rename to frontend/.env.local.example
diff --git a/frontend/archive/.env.production b/frontend/.env.production
similarity index 100%
rename from frontend/archive/.env.production
rename to frontend/.env.production
diff --git a/frontend/.gitignore b/frontend/.gitignore
index 9b7c041..b601ed9 100644
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -1,6 +1,45 @@
-.DS_Store
-/node_modules/
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
-# React Router
-/.react-router/
-/build/
+/.idea
+/.env.local
+/package-lock.json
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/frontend/COMPONENT_GUIDE.md b/frontend/COMPONENT_GUIDE.md
new file mode 100644
index 0000000..7027da9
--- /dev/null
+++ b/frontend/COMPONENT_GUIDE.md
@@ -0,0 +1,289 @@
+# Component Guide - Dish Planner
+
+This guide documents the standardized UI components in the Dish Planner application. All components use Tailwind CSS with our custom color variables from the design system.
+
+## Design System
+
+### Colors
+
+Our color palette is defined in `src/styles/theme/colors/root.css` and integrated into Tailwind via `tailwind.config.ts`:
+
+- **Primary (Rose)**: `bg-primary`, `text-primary`, `border-primary` with shades 50-950
+- **Secondary (Deluge)**: `bg-secondary`, `text-secondary`, `border-secondary` with shades 50-950
+- **Accent (Malibu Blue)**: `bg-accent`, `text-accent`, `border-accent` with shades 50-950
+- **Yellow (Gamboge)**: `bg-yellow`, `text-yellow`, `border-yellow` with shades 50-950
+- **Gray (Ebony Clay)**: `bg-gray`, `text-gray`, `border-gray` with shades 100-950
+- **Semantic Colors**:
+  - Danger (Alizarin Crimson): `bg-danger`, `text-danger`, `border-danger`
+  - Success (Spring Green): `bg-success`, `text-success`, `border-success`
+  - Warning (Burning Orange): `bg-warning`, `text-warning`, `border-warning`
+
+## Components
+
+### Button (`src/components/ui/Button.tsx`)
+
+Unified button component supporting multiple variants, appearances, and states.
+
+#### Props
+
+```typescript
+interface ButtonProps {
+    appearance?: 'solid' | 'outline' | 'text'; // Default: 'solid'
+    variant?: 'primary' | 'secondary' | 'accent' | 'danger'; // Default: 'primary'
+    size?: 'small' | 'medium' | 'large'; // Default: 'medium'
+    type?: 'button' | 'submit' | 'reset'; // Default: 'button'
+    href?: string; // For link buttons
+    icon?: ReactNode;
+    disabled?: boolean;
+    onClick?: () => void;
+    className?: string;
+    children: ReactNode;
+}
+```
+
+#### Examples
+
+```tsx
+// Solid primary button
+<Button variant="primary" appearance="solid">
+    Save
+</Button>
+
+// Outline accent button with icon
+<Button variant="accent" appearance="outline" icon={<PlusIcon />}>
+    Add Item
+</Button>
+
+// Text danger button
+<Button variant="danger" appearance="text" size="small">
+    Delete
+</Button>
+
+// Link button
+<Button href="/dishes" appearance="outline" icon={<ChevronLeftIcon />}>
+    Back to Dishes
+</Button>
+```
+
+### Input (`src/components/ui/Input.tsx`)
+
+Standardized text input component with label, error, and helper text support.
+
+#### Props
+
+```typescript
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    error?: string;
+    helperText?: string;
+    fullWidth?: boolean; // Default: true
+}
+```
+
+#### Examples
+
+```tsx
+// Basic input with label
+<Input
+    label="Email"
+    type="email"
+    value={email}
+    onChange={(e) => setEmail(e.target.value)}
+    required
+/>
+
+// Input with error
+<Input
+    label="Name"
+    value={name}
+    error="Name is required"
+/>
+
+// Input with helper text
+<Input
+    label="Password"
+    type="password"
+    helperText="Must be at least 8 characters"
+/>
+```
+
+### Select (`src/components/ui/Select.tsx`)
+
+Standardized select dropdown component.
+
+#### Props
+
+```typescript
+interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+    label?: string;
+    error?: string;
+    helperText?: string;
+    fullWidth?: boolean; // Default: true
+    options: Array<{ value: string | number; label: string }>;
+}
+```
+
+#### Example
+
+```tsx
+<Select
+    label="Recurrence"
+    value={recurrence}
+    onChange={(e) => setRecurrence(e.target.value)}
+    options={[
+        { value: 7, label: 'Weekly' },
+        { value: 30, label: 'Monthly' },
+        { value: 365, label: 'Yearly' }
+    ]}
+/>
+```
+
+### Checkbox (`src/components/ui/Checkbox.tsx`)
+
+Standardized checkbox component with label support.
+
+#### Props
+
+```typescript
+interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    error?: string;
+    helperText?: string;
+}
+```
+
+#### Example
+
+```tsx
+<Checkbox
+    label="Enable notifications"
+    checked={enabled}
+    onChange={(e) => setEnabled(e.target.checked)}
+/>
+```
+
+### Toggle (`src/components/ui/Toggle.tsx`)
+
+Enhanced toggle switch component.
+
+#### Props
+
+```typescript
+interface ToggleProps {
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    label?: string;
+    disabled?: boolean;
+    helperText?: string;
+}
+```
+
+#### Example
+
+```tsx
+<Toggle
+    checked={isActive}
+    onChange={setIsActive}
+    label="Active"
+    helperText="Enable this feature"
+/>
+```
+
+### Alert (`src/components/ui/Alert.tsx`)
+
+Standardized alert component for displaying messages.
+
+#### Props
+
+```typescript
+interface AlertProps {
+    type: 'error' | 'warning' | 'info' | 'success';
+    children: ReactNode;
+    className?: string;
+}
+```
+
+#### Examples
+
+```tsx
+// Error alert
+<Alert type="error">
+    An error occurred while saving.
+</Alert>
+
+// Success alert
+<Alert type="success">
+    User created successfully!
+</Alert>
+
+// Warning alert
+<Alert type="warning">
+    This action cannot be undone.
+</Alert>
+```
+
+### Card (`src/components/layout/Card.tsx`)
+
+Standardized card container component.
+
+#### Props
+
+```typescript
+interface CardProps {
+    children: ReactNode;
+    className?: string;
+}
+```
+
+#### Example
+
+```tsx
+<Card>
+    <div className="flex-grow">
+        <h3>User Name</h3>
+    </div>
+    <div className="flex gap-2">
+        <Button size="small">Edit</Button>
+        <Button size="small" variant="danger">Delete</Button>
+    </div>
+</Card>
+```
+
+## Migration Guide
+
+### From Old Button Components
+
+The old button components have been removed. Use the unified `Button` component instead:
+
+- `SolidButton` → `Button` with `appearance="solid"`
+- `OutlineButton` → `Button` with `appearance="outline"`
+- `SolidLinkButton` → `Button` with `appearance="solid"` and `href` prop
+- `OutlineLinkButton` → `Button` with `appearance="outline"` and `href` prop
+
+### Custom CSS Classes to Tailwind
+
+Replace custom CSS classes with Tailwind utilities:
+
+- `background-red` → `bg-primary`
+- `background-secondary` → `bg-secondary`
+- `font-size-18` → `text-lg`
+- `text-accent-blue` → `text-accent`
+- `border-accent` → `border-accent`
+
+## Best Practices
+
+1. **Use semantic color names**: Prefer `text-primary`, `bg-danger` over hardcoded colors
+2. **Consistent spacing**: Use Tailwind's spacing scale (p-2, p-4, etc.)
+3. **Responsive design**: Consider mobile-first responsive classes
+4. **Accessibility**: Use proper ARIA attributes and semantic HTML
+5. **Component reusability**: Always use the standardized components instead of creating custom styled elements
+
+## Future Enhancements
+
+Potential areas for further improvement:
+
+- Migrate remaining inline-styled inputs to use the `Input` component
+- Add dark mode support
+- Create compound components for common patterns (e.g., FormGroup)
+- Add animation utilities for better UX
+- Implement a comprehensive form validation system
diff --git a/frontend/README.md b/frontend/README.md
index 5c4780a..da15af8 100644
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -1,87 +1,2 @@
-# Welcome to React Router!
+# DishPlanner Front End
 
-A modern, production-ready template for building full-stack React applications using React Router.
-
-[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/remix-run/react-router-templates/tree/main/default)
-
-## Features
-
-- 🚀 Server-side rendering
-- ⚡️ Hot Module Replacement (HMR)
-- 📦 Asset bundling and optimization
-- 🔄 Data loading and mutations
-- 🔒 TypeScript by default
-- 🎉 TailwindCSS for styling
-- 📖 [React Router docs](https://reactrouter.com/)
-
-## Getting Started
-
-### Installation
-
-Install the dependencies:
-
-```bash
-npm install
-```
-
-### Development
-
-Start the development server with HMR:
-
-```bash
-npm run dev
-```
-
-Your application will be available at `http://localhost:5173`.
-
-## Building for Production
-
-Create a production build:
-
-```bash
-npm run build
-```
-
-## Deployment
-
-### Docker Deployment
-
-To build and run using Docker:
-
-```bash
-docker build -t my-app .
-
-# Run the container
-docker run -p 3000:3000 my-app
-```
-
-The containerized application can be deployed to any platform that supports Docker, including:
-
-- AWS ECS
-- Google Cloud Run
-- Azure Container Apps
-- Digital Ocean App Platform
-- Fly.io
-- Railway
-
-### DIY Deployment
-
-If you're familiar with deploying Node applications, the built-in app server is production-ready.
-
-Make sure to deploy the output of `npm run build`
-
-```
-├── package.json
-├── package-lock.json (or pnpm-lock.yaml, or bun.lockb)
-├── build/
-│   ├── client/    # Static assets
-│   └── server/    # Server-side code
-```
-
-## Styling
-
-This template comes with [Tailwind CSS](https://tailwindcss.com/) already configured for a simple default starting experience. You can use whatever CSS framework you prefer.
-
----
-
-Built with ❤️ using React Router.
diff --git a/frontend/archive/.dockerignore b/frontend/archive/.dockerignore
deleted file mode 100644
index 11ee758..0000000
--- a/frontend/archive/.dockerignore
+++ /dev/null
@@ -1 +0,0 @@
-.env.local
diff --git a/frontend/archive/.gitignore b/frontend/archive/.gitignore
deleted file mode 100644
index b601ed9..0000000
--- a/frontend/archive/.gitignore
+++ /dev/null
@@ -1,45 +0,0 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-/.idea
-/.env.local
-/package-lock.json
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.*
-.yarn/*
-!.yarn/patches
-!.yarn/plugins
-!.yarn/releases
-!.yarn/versions
-
-# testing
-/coverage
-
-# next.js
-/.next/
-/out/
-
-# production
-/build
-
-# misc
-.DS_Store
-*.pem
-
-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-.pnpm-debug.log*
-
-# env files (can opt-in for committing if needed)
-.env
-
-# vercel
-.vercel
-
-# typescript
-*.tsbuildinfo
-next-env.d.ts
diff --git a/frontend/archive/README.md b/frontend/archive/README.md
deleted file mode 100644
index da15af8..0000000
--- a/frontend/archive/README.md
+++ /dev/null
@@ -1,2 +0,0 @@
-# DishPlanner Front End
-
diff --git a/frontend/archive/package.json b/frontend/archive/package.json
deleted file mode 100644
index 62e44db..0000000
--- a/frontend/archive/package.json
+++ /dev/null
@@ -1,33 +0,0 @@
-{
-  "name": "dish-planner",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "next dev --turbopack",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint",
-    "export": "next export"
-  },
-  "dependencies": {
-    "@headlessui/react": "^2.2.0",
-    "@heroicons/react": "^2.2.0",
-    "classnames": "^2.5.1",
-    "luxon": "^3.5.0",
-    "next": "15.2.4",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
-  },
-  "devDependencies": {
-    "@eslint/eslintrc": "^3",
-    "@types/luxon": "^3.4.2",
-    "@types/node": "^20",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "eslint": "^9",
-    "eslint-config-next": "15.1.5",
-    "postcss": "^8",
-    "tailwindcss": "^3.4.1",
-    "typescript": "^5"
-  }
-}
diff --git a/frontend/archive/src/components/layout/Card.tsx b/frontend/archive/src/components/layout/Card.tsx
deleted file mode 100644
index 6784526..0000000
--- a/frontend/archive/src/components/layout/Card.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React, {FC} from "react";
-
-interface Props {
-    children: React.ReactNode;
-}
-
-const Card: FC<Props> = ({ children }) => {
-    return (
-        <div className="w-full border-2 border-secondary p-2 pl-4 my-2 rounded flex">
-            { children }
-        </div>
-    )
-}
-
-export default Card
\ No newline at end of file
diff --git a/frontend/archive/src/components/ui/Alert.tsx b/frontend/archive/src/components/ui/Alert.tsx
deleted file mode 100644
index c32070c..0000000
--- a/frontend/archive/src/components/ui/Alert.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React, {FC} from "react";
-import classNames from "classnames";
-
-interface Props {
-    children: React.ReactNode;
-    className?: string;
-    type: 'error' | 'warning' | 'info' | 'success';
-}
-
-const Alert: FC<Props> = ({ children, className, type } ) => {
-    let bgColor = 'bg-blue-200'
-    let fgColor = 'bg-blue-800'
-
-    if (type == 'error') {
-        bgColor = 'bg-red-200'
-        fgColor = 'bg-red-800'
-    } else if (type == 'warning') {
-        bgColor = 'bg-orange-200'
-        fgColor = 'bg-orange-800'
-    } else if (type == 'success') {
-        bgColor = 'border-2 border-green-500'
-        fgColor = 'text-green-500'
-    }
-
-    const styles = classNames(fgColor, bgColor, className, 'rounded')
-
-    return (
-        <div className={styles}>
-            { children}
-        </div>
-    )
-}
-
-export default Alert
\ No newline at end of file
diff --git a/frontend/archive/src/components/ui/Button.tsx b/frontend/archive/src/components/ui/Button.tsx
deleted file mode 100644
index 4ad006c..0000000
--- a/frontend/archive/src/components/ui/Button.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import Link from "next/link";
-import React, { FC, ReactElement, ReactNode } from "react";
-import classNames from "classnames";
-
-interface ButtonProps {
-    appearance?: 'solid' | 'outline' | 'text';
-    children: ReactNode;
-    className?: string;
-    href?: string;
-    icon?: ReactNode;
-    onClick?: () => void;
-    disabled?: boolean;
-    size?: 'small' | 'medium' | 'large';
-    type?: 'button' | 'submit' | 'reset';
-    variant?: 'primary' | 'secondary' | 'accent';
-}
-
-const Button: FC<ButtonProps> = ({ appearance, children, className, disabled, href, icon, onClick,
-    size = 'medium', type,
-    variant = 'primary'
-}) => {
-    const styles = classNames(
-        "flex items-center space-x-1",
-        "justify-center font-size-18 py-2 px-4 rounded flex",
-        {
-            'border-2 border-primary background-red text-white': variant === 'primary' && appearance === 'solid',
-            'border-2 border-primary text-primary': variant === 'primary' && appearance === 'outline',
-            'text-primary': variant === 'primary' && appearance === 'text',
-            'border-2 border-secondary text-secondary': variant === 'secondary' && appearance === 'outline',
-            'border-2 border-accent-blue text-accent-blue': variant === 'accent' && appearance === 'outline',
-        },
-        className
-    )
-
-    const iconClassNames = classNames({
-        "h-4 w-4 mr-1": size === "small",
-        "h-5 w-5 mr-1": size === "medium",
-        "h-7 w-7 mr-2": size === "large",
-    });
-
-    const iconElement =
-        React.isValidElement(icon) &&
-        React.cloneElement(icon as ReactElement<{ className?: string }>, {
-            className: iconClassNames,
-        });
-
-    if (href !== undefined) {
-        return (
-            <Link href={href} className={styles}>
-                { icon && iconElement}
-                { children}
-            </Link>
-        )
-    }
-
-    return <button onClick={onClick} className={styles} disabled={disabled} type={ type ?? 'button'}>
-        { icon && iconElement}
-        { children }
-    </button>
-}
-
-export default Button
\ No newline at end of file
diff --git a/frontend/archive/src/components/ui/Buttons/OutlineButton.tsx b/frontend/archive/src/components/ui/Buttons/OutlineButton.tsx
deleted file mode 100644
index b668b6b..0000000
--- a/frontend/archive/src/components/ui/Buttons/OutlineButton.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import React, { FC } from "react";
-import classNames from "classnames";
-
-interface Props {
-    children: React.ReactNode;
-    className?: string;
-    disabled?: boolean;
-    onClick?: () => void;
-    size?: "small" | "medium" | "large";
-    type: 'submit' | 'button';
-}
-
-const OutlineButton: FC<Props> = ({ children, className, disabled = false, onClick, size, type }) => {
-    const style = classNames(
-        "justify-center border-2 border-accent font-size-18 text-accent-blue py-2 px-4 rounded flex",
-        { 'text-xs': size === "small" },
-        className
-    )
-
-    if (onClick === undefined) {
-        onClick = () => {
-        }
-    }
-
-    return (
-        <button
-            type={ type }
-            className={ style }
-            disabled={ disabled }
-            onClick={ onClick }
-        >
-            { children }
-        </button>
-    )
-}
-
-export default OutlineButton
\ No newline at end of file
diff --git a/frontend/archive/src/components/ui/Buttons/OutlineLinkButton.tsx b/frontend/archive/src/components/ui/Buttons/OutlineLinkButton.tsx
deleted file mode 100644
index ab0e9b1..0000000
--- a/frontend/archive/src/components/ui/Buttons/OutlineLinkButton.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import React, { FC, ReactElement } from "react";
-import classNames from "classnames";
-import Link from "next/link";
-
-interface Props {
-    children: React.ReactNode;
-    className?: string;
-    href: string;
-    icon?: React.ReactNode;
-    size?: "small" | "medium" | "large";
-    variant?: "primary" | "secondary";
-}
-
-const OutlineLinkButton: FC<Props> = ({ children, className, href, icon, size = "medium", variant }) => {
-    const linkClassNames = classNames(
-        "underline font-default pt-3 pb-3 px-4 rounded mb-0 flex",
-        {
-            'text-primary border-primary': variant === "primary",
-            'text-secondary border-secondary': variant === "secondary",
-            'text-accent-blue border-accent': !variant || !["primary", "secondary"].includes(variant),
-        }, {
-            'text-size-14': size === "small",
-            'font-size-18': !size || size === "medium",
-            'text-2xl': size === "large",
-        },
-        className,
-    )
-
-    const iconClassNames = classNames("mt-0.5", {
-        "h-4 w-4 mr-1": size === "small",
-        "h-5 w-5 mr-1": size === "medium", // Default size
-        "h-7 w-7 mr-2": size === "large",
-    });
-
-    const iconElement =
-        React.isValidElement(icon) &&
-        React.cloneElement(icon as ReactElement<{ className?: string }>, {
-            className: iconClassNames,
-        });
-
-    return (
-        <Link className={linkClassNames} href={href}>
-            {iconElement}
-            {children}
-        </Link>
-    )
-}
-
-export default OutlineLinkButton
\ No newline at end of file
diff --git a/frontend/archive/src/components/ui/Buttons/SolidButton.tsx b/frontend/archive/src/components/ui/Buttons/SolidButton.tsx
deleted file mode 100644
index 62ac01d..0000000
--- a/frontend/archive/src/components/ui/Buttons/SolidButton.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import React, {FC} from "react";
-import classNames from "classnames";
-
-interface Props {
-    children: React.ReactNode;
-    className?: string;
-    disabled?: boolean;
-    onClick?: () => void;
-    size?: "small" | "medium" | "large";
-    type: 'submit' | 'button';
-}
-
-const SolidButton: FC<Props> = ({ children, className, disabled = false, onClick, size, type }) => {
-    const style = classNames(
-        "py-2 px-4 bg-primary text-white text-xl p-2 rounded hover:bg-secondary mb-0",
-        {
-            'text-xs' : size === "small",
-            'font-size-18' : !size || size === "medium",
-        },
-        className
-    )
-
-    if (onClick === undefined) {
-        onClick = () => {}
-    }
-
-    return (
-        <button
-            className={style}
-            disabled={disabled}
-            onClick={onClick}
-            type={type}
-        >
-            {children}
-        </button>
-    )
-}
-
-export default SolidButton
\ No newline at end of file
diff --git a/frontend/archive/src/components/ui/Buttons/SolidLinkButton.tsx b/frontend/archive/src/components/ui/Buttons/SolidLinkButton.tsx
deleted file mode 100644
index 77a78dd..0000000
--- a/frontend/archive/src/components/ui/Buttons/SolidLinkButton.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import React, { FC, ReactElement } from "react";
-import classNames from "classnames";
-import Link from "next/link";
-
-interface Props {
-    children: React.ReactNode;
-    className?: string;
-    href: string;
-    icon?: React.ReactNode;
-    size?: "small" | "medium" | "large";
-    variant?: "primary" | "secondary";
-}
-
-const SolidLinkButton: FC<Props> = ({ children, className, href, icon, size = "medium", variant }) => {
-    const style = classNames(
-        "py-2 px-4 text-xl p-2 rounded hover:bg-secondary mb-0 text-center flex",
-        {
-            'background-red text-white': variant === "primary",
-            'background-secondary border-2 border-secondary': variant === "secondary",
-        },
-        className
-    )
-
-    const iconClassNames = classNames("mt-1", {
-        "h-4 w-4 mr-1": size === "small",
-        "h-5 w-5 mr-1": size === "medium", // Default size
-        "h-7 w-7 mr-2": size === "large",
-    });
-
-    const iconElement =
-        React.isValidElement(icon) &&
-        React.cloneElement(icon as ReactElement<{ className?: string }>, {
-            className: iconClassNames,
-        });
-
-    return (
-        <Link className={style} href={href}>
-            <div className="flex-grow"></div>
-            {iconElement}
-            {children}
-            <div className="flex-grow"></div>
-        </Link>
-    )
-}
-
-export default SolidLinkButton
\ No newline at end of file
diff --git a/frontend/archive/src/components/ui/Toggle.tsx b/frontend/archive/src/components/ui/Toggle.tsx
deleted file mode 100644
index 786b093..0000000
--- a/frontend/archive/src/components/ui/Toggle.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import {FC} from "react";
-
-interface ToggleProps {
-    checked: boolean;
-    onChange: (checked: boolean) => void;
-}
-
-const Toggle: FC<ToggleProps> = ({ checked, onChange }) => {
-    const handleChange = () => {
-        onChange(checked);
-    }
-
-    return (
-        <label
-            className="flex items-center relative w-max cursor-pointer select-none"
-        >
-            {/* Hidden input */}
-            <input
-                type="checkbox"
-                checked={checked}
-                onChange={() => handleChange()} // Update state using the checkbox itself
-                className="sr-only"
-            />
-
-            {/* Toggle text-accent-blue */}
-            <div
-                className={`relative transition-colors w-14 h-7 rounded-full cursor-pointer ${
-                    checked ? "bg-green-500" : "bg-red-500"
-                }`}
-            >
-                {/* The slider dot */}
-                <span
-                    className={`absolute top-0.5 left-0.5 w-6 h-6 rounded-full transform transition-transform bg-white ${
-                        checked ? "translate-x-7" : "translate-x-0"
-                    }`}
-                ></span>
-            </div>
-        </label>
-    );
-};
-
-export default Toggle;
\ No newline at end of file
diff --git a/frontend/archive/src/styles/components/buttons.css b/frontend/archive/src/styles/components/buttons.css
deleted file mode 100644
index 07fc4de..0000000
--- a/frontend/archive/src/styles/components/buttons.css
+++ /dev/null
@@ -1,42 +0,0 @@
-.button-primary-solid {
-    background-color: var(--color-primary);
-    color: var(--color-secondary-200);
-    border: 1px solid var(--color-primary);
-    text-transform: uppercase;
-    font-family: "Anta", serif;
-    font-style: normal;
-    font-size: 1.1rem;
-    font-weight: 600;
-    padding: 4px 16px 2px 16px;
-}
-.button-primary-outline {
-    background-color: var(--color-background);
-    color: var(--color-primary);
-    border: 1px solid var(--color-primary);
-    text-transform: uppercase;
-    font-family: "Anta", serif;
-    font-style: normal;
-    font-size: 1.1rem;
-    font-weight: 600;
-    padding: 4px 16px 2px 16px;
-}
-
-.button-secondary-solid {
-    background-color: var(--color-secondary);
-    color: var(--color-primary);
-    border: 1px solid var(--color-secondary);
-}
-
-.button-accent-solid {
-    background-color: var(--color-accent-blue);
-    color: var(--color-secondary-900);
-    border: 1px solid var(--color-accent-blue);
-}
-.button-accent-outline {
-    background-color: var(--color-background);
-    color: var(--color-accent-blue);
-    border: 1px solid var(--color-accent-blue);
-}
-.button-accent-outline:hover {
-    background-color: var(--color-background-400);
-}
\ No newline at end of file
diff --git a/frontend/archive/tailwind.config.ts b/frontend/archive/tailwind.config.ts
deleted file mode 100644
index 109807b..0000000
--- a/frontend/archive/tailwind.config.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import type { Config } from "tailwindcss";
-
-export default {
-  content: [
-    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      colors: {
-        background: "var(--background)",
-        foreground: "var(--foreground)",
-      },
-    },
-  },
-  plugins: [],
-} satisfies Config;
diff --git a/frontend/archive/tsconfig.json b/frontend/archive/tsconfig.json
deleted file mode 100644
index c133409..0000000
--- a/frontend/archive/tsconfig.json
+++ /dev/null
@@ -1,27 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2017",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true,
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
-}
diff --git a/frontend/archive/bin/update.sh b/frontend/bin/update.sh
similarity index 100%
rename from frontend/archive/bin/update.sh
rename to frontend/bin/update.sh
diff --git a/frontend/archive/build_and_push.sh b/frontend/build_and_push.sh
similarity index 100%
rename from frontend/archive/build_and_push.sh
rename to frontend/build_and_push.sh
diff --git a/frontend/archive/eslint.config.mjs b/frontend/eslint.config.mjs
similarity index 100%
rename from frontend/archive/eslint.config.mjs
rename to frontend/eslint.config.mjs
diff --git a/frontend/archive/next.config.ts b/frontend/next.config.ts
similarity index 100%
rename from frontend/archive/next.config.ts
rename to frontend/next.config.ts
diff --git a/frontend/package.json b/frontend/package.json
index 1337f19..62e44db 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,30 +1,33 @@
 {
-  "name": "my-react-router-app",
+  "name": "dish-planner",
+  "version": "0.1.0",
   "private": true,
-  "type": "module",
   "scripts": {
-    "build": "react-router build",
-    "dev": "react-router dev",
-    "start": "react-router-serve ./build/server/index.js",
-    "typecheck": "react-router typegen && tsc"
+    "dev": "next dev --turbopack",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "export": "next export"
   },
   "dependencies": {
-    "@react-router/node": "^7.5.3",
-    "@react-router/serve": "^7.5.3",
-    "isbot": "^5.1.27",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "react-router": "^7.5.3"
+    "@headlessui/react": "^2.2.0",
+    "@heroicons/react": "^2.2.0",
+    "classnames": "^2.5.1",
+    "luxon": "^3.5.0",
+    "next": "15.2.4",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@react-router/dev": "^7.5.3",
-    "@tailwindcss/vite": "^4.1.4",
+    "@eslint/eslintrc": "^3",
+    "@types/luxon": "^3.4.2",
     "@types/node": "^20",
-    "@types/react": "^19.1.2",
-    "@types/react-dom": "^19.1.2",
-    "tailwindcss": "^4.1.4",
-    "typescript": "^5.8.3",
-    "vite": "^6.3.3",
-    "vite-tsconfig-paths": "^5.1.4"
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "15.1.5",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/archive/postcss.config.mjs b/frontend/postcss.config.mjs
similarity index 100%
rename from frontend/archive/postcss.config.mjs
rename to frontend/postcss.config.mjs
diff --git a/frontend/archive/public/dish-planner.webp b/frontend/public/dish-planner.webp
similarity index 100%
rename from frontend/archive/public/dish-planner.webp
rename to frontend/public/dish-planner.webp
diff --git a/frontend/archive/public/file.svg b/frontend/public/file.svg
similarity index 100%
rename from frontend/archive/public/file.svg
rename to frontend/public/file.svg
diff --git a/frontend/archive/public/globe.svg b/frontend/public/globe.svg
similarity index 100%
rename from frontend/archive/public/globe.svg
rename to frontend/public/globe.svg
diff --git a/frontend/archive/public/next.svg b/frontend/public/next.svg
similarity index 100%
rename from frontend/archive/public/next.svg
rename to frontend/public/next.svg
diff --git a/frontend/archive/public/vercel.svg b/frontend/public/vercel.svg
similarity index 100%
rename from frontend/archive/public/vercel.svg
rename to frontend/public/vercel.svg
diff --git a/frontend/archive/public/window.svg b/frontend/public/window.svg
similarity index 100%
rename from frontend/archive/public/window.svg
rename to frontend/public/window.svg
diff --git a/frontend/archive/src/app/dishes/[id]/delete/page.tsx b/frontend/src/app/dishes/[id]/delete/page.tsx
similarity index 95%
rename from frontend/archive/src/app/dishes/[id]/delete/page.tsx
rename to frontend/src/app/dishes/[id]/delete/page.tsx
index 95627e2..52f05f2 100644
--- a/frontend/archive/src/app/dishes/[id]/delete/page.tsx
+++ b/frontend/src/app/dishes/[id]/delete/page.tsx
@@ -58,7 +58,7 @@ export default function EditDishPage({params}: { params: Promise<{ id: number }>
                 <div className="text-2xl">
                     Are you sure you want to delete this dish?
                 </div>
-                <div className="my-2 background-secondary p-3">
+                <div className="my-2 bg-secondary p-3">
                     name: <strong className="text-lg">{name}</strong> <br/>
                     recurrence: <strong className="text-lg">{recurrence}</strong>
                     users: <strong className="text-lg">{users.map((user) => user.name).join(', ')}</strong>
@@ -66,7 +66,7 @@ export default function EditDishPage({params}: { params: Promise<{ id: number }>
 
                 <Link href={routes.dish.index()}>
                     <div
-                        className="w-full p-2 text-center mt-6 border-2 border-secondary background-foreground text-background text-bold my-2"
+                        className="w-full p-2 text-center mt-6 border-2 border-secondary bg-gray-800 text-background text-bold my-2"
                     >
                         No, take me back
                     </div>
diff --git a/frontend/archive/src/app/dishes/[id]/edit/page.tsx b/frontend/src/app/dishes/[id]/edit/page.tsx
similarity index 87%
rename from frontend/archive/src/app/dishes/[id]/edit/page.tsx
rename to frontend/src/app/dishes/[id]/edit/page.tsx
index 364f9b1..54c1719 100644
--- a/frontend/archive/src/app/dishes/[id]/edit/page.tsx
+++ b/frontend/src/app/dishes/[id]/edit/page.tsx
@@ -9,7 +9,7 @@ import {fetchDish} from "@/utils/api/dishApi";
 import SyncUsersForm from "@/components/features/dishes/SyncUsersForm";
 import {ChevronLeftIcon} from "@heroicons/react/16/solid";
 import useRoutes from "@/hooks/useRoutes";
-import OutlineLinkButton from "@/components/ui/Buttons/OutlineLinkButton";
+import Button from "@/components/ui/Button";
 import Hr from "@/components/ui/Hr"
 
 export default function EditDishPage({ params }: { params: Promise<{ id: number }> }) {
@@ -43,10 +43,9 @@ export default function EditDishPage({ params }: { params: Promise<{ id: number
         <div>
             <div className="flex mb-3">
                 <PageTitle>Edit Dish</PageTitle>
-                <OutlineLinkButton href={routes.dish.index()}>
-                    <ChevronLeftIcon className="w-5 h-5 mr-1" />
+                <Button appearance="outline" href={routes.dish.index()} icon={<ChevronLeftIcon />}>
                     <p className="text-sm">BACK</p>
-                </OutlineLinkButton>
+                </Button>
             </div>
 
             <EditDishForm dish={dish} />
diff --git a/frontend/archive/src/app/dishes/create/page.tsx b/frontend/src/app/dishes/create/page.tsx
similarity index 100%
rename from frontend/archive/src/app/dishes/create/page.tsx
rename to frontend/src/app/dishes/create/page.tsx
diff --git a/frontend/archive/src/app/dishes/page.tsx b/frontend/src/app/dishes/page.tsx
similarity index 100%
rename from frontend/archive/src/app/dishes/page.tsx
rename to frontend/src/app/dishes/page.tsx
diff --git a/frontend/archive/src/app/favicon.ico b/frontend/src/app/favicon.ico
similarity index 100%
rename from frontend/archive/src/app/favicon.ico
rename to frontend/src/app/favicon.ico
diff --git a/frontend/archive/src/app/layout.tsx b/frontend/src/app/layout.tsx
similarity index 100%
rename from frontend/archive/src/app/layout.tsx
rename to frontend/src/app/layout.tsx
diff --git a/frontend/archive/src/app/login/page.tsx b/frontend/src/app/login/page.tsx
similarity index 100%
rename from frontend/archive/src/app/login/page.tsx
rename to frontend/src/app/login/page.tsx
diff --git a/frontend/archive/src/app/page.tsx b/frontend/src/app/page.tsx
similarity index 100%
rename from frontend/archive/src/app/page.tsx
rename to frontend/src/app/page.tsx
diff --git a/frontend/archive/src/app/register/page.tsx b/frontend/src/app/register/page.tsx
similarity index 100%
rename from frontend/archive/src/app/register/page.tsx
rename to frontend/src/app/register/page.tsx
diff --git a/frontend/archive/src/app/schedule/[date]/edit/page.tsx b/frontend/src/app/schedule/[date]/edit/page.tsx
similarity index 100%
rename from frontend/archive/src/app/schedule/[date]/edit/page.tsx
rename to frontend/src/app/schedule/[date]/edit/page.tsx
diff --git a/frontend/archive/src/app/scheduled-user-dishes/history/page.tsx b/frontend/src/app/scheduled-user-dishes/history/page.tsx
similarity index 100%
rename from frontend/archive/src/app/scheduled-user-dishes/history/page.tsx
rename to frontend/src/app/scheduled-user-dishes/history/page.tsx
diff --git a/frontend/archive/src/app/users/[id]/edit/page.tsx b/frontend/src/app/users/[id]/edit/page.tsx
similarity index 100%
rename from frontend/archive/src/app/users/[id]/edit/page.tsx
rename to frontend/src/app/users/[id]/edit/page.tsx
diff --git a/frontend/archive/src/app/users/create/page.tsx b/frontend/src/app/users/create/page.tsx
similarity index 70%
rename from frontend/archive/src/app/users/create/page.tsx
rename to frontend/src/app/users/create/page.tsx
index 80480f9..6a76d8d 100644
--- a/frontend/archive/src/app/users/create/page.tsx
+++ b/frontend/src/app/users/create/page.tsx
@@ -7,7 +7,8 @@ import {useState} from "react";
 import Alert from "@/components/ui/Alert";
 import {createUser} from "@/utils/api/usersApi";
 import Link from "next/link";
-import SolidButton from "@/components/ui/Buttons/SolidButton";
+import Button from "@/components/ui/Button";
+import Input from "@/components/ui/Input";
 export const dynamic = 'force-dynamic';
 
 const CreateUsersPage = () => {
@@ -40,18 +41,18 @@ const CreateUsersPage = () => {
                     error != '' && <Alert type="error" className="mt-4">{ error }</Alert>
                 }
 
-                <label htmlFor="name">Name</label>
-                <input type="text"
-                       placeholder=""
-                       name="name"
-                       id="name"
-                       autoFocus={true}
-                       value={name}
-                       onChange={(e) => setName(e.target.value)}
-                       className="w-full p-2 border rounded bg-primary border-secondary bg-gray-600 text-secondary"
+                <Input
+                    label="Name"
+                    type="text"
+                    placeholder=""
+                    name="name"
+                    id="name"
+                    autoFocus={true}
+                    value={name}
+                    onChange={(e) => setName(e.target.value)}
                 />
 
-                <SolidButton type="submit" className="mt-4">Create</SolidButton>
+                <Button type="submit" appearance="solid" variant="primary" className="mt-4">Create</Button>
             </form>
         </div>
     );
diff --git a/frontend/archive/src/app/users/page.tsx b/frontend/src/app/users/page.tsx
similarity index 88%
rename from frontend/archive/src/app/users/page.tsx
rename to frontend/src/app/users/page.tsx
index 0943dd8..f58b450 100644
--- a/frontend/archive/src/app/users/page.tsx
+++ b/frontend/src/app/users/page.tsx
@@ -10,7 +10,7 @@ import React from "react";
 import {deleteUser} from "@/utils/api/usersApi";
 import {UserType} from "@/types/UserType";
 import Card from "@/components/layout/Card";
-import OutlineLinkButton from "@/components/ui/Buttons/OutlineLinkButton";
+import Button from "@/components/ui/Button";
 
 const UsersPage = () => {
     const { users, isLoading } = useFetchUsers();
@@ -59,10 +59,9 @@ const UsersPage = () => {
                 </div>
 
                 <div className="flex-grow flex justify-end">
-                    <OutlineLinkButton href={routes.user.create()} variant="primary">
-                        <PlusIcon className="w-4 h-4 mt-1 mr-1"/>
-                        <p>Add User</p>
-                    </OutlineLinkButton>
+                    <Button href={routes.user.create()} variant="primary" appearance="outline" icon={<PlusIcon />}>
+                        Add User
+                    </Button>
                 </div>
             </div>
 
diff --git a/frontend/archive/src/components/Spinner.tsx b/frontend/src/components/Spinner.tsx
similarity index 100%
rename from frontend/archive/src/components/Spinner.tsx
rename to frontend/src/components/Spinner.tsx
diff --git a/frontend/archive/src/components/features/OnboardingBanner.tsx b/frontend/src/components/features/OnboardingBanner.tsx
similarity index 100%
rename from frontend/archive/src/components/features/OnboardingBanner.tsx
rename to frontend/src/components/features/OnboardingBanner.tsx
diff --git a/frontend/archive/src/components/features/auth/LoginForm.tsx b/frontend/src/components/features/auth/LoginForm.tsx
similarity index 88%
rename from frontend/archive/src/components/features/auth/LoginForm.tsx
rename to frontend/src/components/features/auth/LoginForm.tsx
index 2189c36..c02be27 100644
--- a/frontend/archive/src/components/features/auth/LoginForm.tsx
+++ b/frontend/src/components/features/auth/LoginForm.tsx
@@ -6,9 +6,10 @@ import { login } from "@/utils/api/auth";
 import { useRouter } from 'next/navigation';
 import Link from "next/link";
 import useRoutes from "@/hooks/useRoutes";
-import SolidButton from "@/components/ui/Buttons/SolidButton";
+import Button from "@/components/ui/Button";
 import { useSearchParams } from 'next/navigation';
 import Alert from "@/components/ui/Alert";
+import Input from "@/components/ui/Input";
 
 export default function LoginForm() {
     const { login: authLogin } = useAuth();
@@ -70,23 +71,23 @@ export default function LoginForm() {
             }
             <form onSubmit={handleSubmit} className="max-w-sm mx-auto flex flex-col">
                 {error && <p className="text-red-600 mb-4">{error}</p>}
-                <input
+                <Input
                     type="email"
                     placeholder="Email"
                     value={email}
                     onChange={e => setEmail(e.target.value)}
                     required
-                    className="w-full p-2 mb-4 border rounded bg-primary border-secondary bg-gray-600 text-secondary"
+                    className="mb-4"
                 />
-                <input
+                <Input
                     type="password"
                     placeholder="Password"
                     value={password}
                     onChange={e => setPassword(e.target.value)}
                     required
-                    className="w-full p-2 mb-4 border rounded bg-primary border-secondary bg-gray-600 text-secondary"
+                    className="mb-4"
                 />
-                <SolidButton type="submit">Login</SolidButton>
+                <Button type="submit" appearance="solid" variant="primary">Login</Button>
                 <Link href={routes.auth.register()} className="lowercase hover:underline text-center mt-1 text-secondary underline">
                     Create an account
                 </Link>
diff --git a/frontend/archive/src/components/features/auth/RegistrationForm.tsx b/frontend/src/components/features/auth/RegistrationForm.tsx
similarity index 82%
rename from frontend/archive/src/components/features/auth/RegistrationForm.tsx
rename to frontend/src/components/features/auth/RegistrationForm.tsx
index 0738381..ea9df3c 100644
--- a/frontend/archive/src/components/features/auth/RegistrationForm.tsx
+++ b/frontend/src/components/features/auth/RegistrationForm.tsx
@@ -6,7 +6,8 @@ import { useRouter } from 'next/navigation';
 import useRoutes from "@/hooks/useRoutes";
 import Link from "next/link";
 import SectionTitle from "@/components/ui/SectionTitle";
-import SolidButton from "@/components/ui/Buttons/SolidButton";
+import Button from "@/components/ui/Button";
+import Input from "@/components/ui/Input";
 
 export default function LoginForm() {
     const router = useRouter();
@@ -57,44 +58,42 @@ export default function LoginForm() {
             <form onSubmit={ handleSubmit } className="max-w-sm mx-auto space-y-4 flex flex-col">
                 <h2 className="text-xl font-bold text-secondary">Register</h2>
                 { error && <p className="text-red-600">{ error }</p> }
-                <input
+                <Input
                     type="text"
                     placeholder="Name"
                     value={ name }
                     onChange={ e => setName(e.target.value) }
                     required
-                    className="w-full p-2 border rounded bg-primary border-secondary bg-gray-600 text-secondary"
                 />
-                <input
+                <Input
                     type="email"
                     placeholder="Email"
                     value={ email }
                     onChange={ e => setEmail(e.target.value) }
                     required
-                    className="w-full p-2 border rounded bg-primary border-secondary bg-gray-600 text-secondary"
                 />
-                <input
+                <Input
                     type="password"
                     placeholder="Password"
                     value={ password }
                     onChange={ e => setPassword(e.target.value) }
                     required
-                    className="w-full p-2 border rounded bg-primary border-secondary bg-gray-600 text-secondary"
                 />
-                <input
+                <Input
                     type="password"
                     placeholder="Password Again"
                     value={ passwordAgain }
                     onChange={ e => setPasswordAgain(e.target.value) }
                     required
-                    className="w-full p-2 border rounded bg-primary border-secondary bg-gray-600 text-secondary"
                 />
-                <SolidButton
+                <Button
                     type="submit"
-                    className={ isLoading ? "opacity-50 cursor-not-allowed" : "background-red" }
+                    appearance="solid"
+                    variant="primary"
+                    className={ isLoading ? "opacity-50 cursor-not-allowed" : "bg-primary" }
                 >
                     Create Account
-                </SolidButton>
+                </Button>
                 <Link href={routes.auth.login()} className="lowercase hover:underline text-center text-secondary underline">
                     Back to Login
                 </Link>
diff --git a/frontend/archive/src/components/features/dishes/AddUserToDishForm.tsx b/frontend/src/components/features/dishes/AddUserToDishForm.tsx
similarity index 89%
rename from frontend/archive/src/components/features/dishes/AddUserToDishForm.tsx
rename to frontend/src/components/features/dishes/AddUserToDishForm.tsx
index 2e2d2c8..a5ed556 100644
--- a/frontend/archive/src/components/features/dishes/AddUserToDishForm.tsx
+++ b/frontend/src/components/features/dishes/AddUserToDishForm.tsx
@@ -4,8 +4,7 @@ import { UserType } from "@/types/UserType";
 import { useFetchUsers } from "@/hooks/useFetchUsers";
 import Spinner from "@/components/Spinner";
 import {addUserToDish} from "@/utils/api/dishApi";
-import OutlineButton from "@/components/ui/Buttons/OutlineButton";
-import SolidButton from "@/components/ui/Buttons/SolidButton";
+import Button from "@/components/ui/Button";
 
 interface Props {
     dish: DishType;
@@ -54,14 +53,15 @@ const AddUserToDishForm: FC<Props> = ({ dish, reloadDish }) => {
 
     return (
         <>
-            <OutlineButton
+            <Button
+                appearance="outline"
                 className="mb-2 flex-none w-fit ml-auto"
                 onClick={() => setShowAdd(!showAdd)}
                 disabled={remainingUsers.length === 0}
                 type="button"
             >
                 Add User
-            </OutlineButton>
+            </Button>
 
             { showAdd && (
                 <div className="mt-2 mb-5 w-full">
@@ -71,7 +71,7 @@ const AddUserToDishForm: FC<Props> = ({ dish, reloadDish }) => {
                             <select
                                 value={selectedUser}
                                 onChange={(e) => setSelectedUser(e.target.value)}
-                                className="p-2 border rounded w-full background-secondary border-secondary"
+                                className="p-2 border rounded w-full bg-secondary border-secondary"
                             >
                                 <option value="-1">Select user</option>
                                 {remainingUsers.map((user: UserType) => (
@@ -83,12 +83,14 @@ const AddUserToDishForm: FC<Props> = ({ dish, reloadDish }) => {
                         </div>
 
                         <div className="flex-none py-2 pr-2 pl-4">
-                            <SolidButton type="submit"
+                            <Button type="submit"
+                                         appearance="solid"
+                                         variant="primary"
                                          size="small"
                                          className="mt-1"
                             >
                                 Add User
-                            </SolidButton>
+                            </Button>
                         </div>
                     </div>
                 </form>
diff --git a/frontend/archive/src/components/features/dishes/CreateDishForm.tsx b/frontend/src/components/features/dishes/CreateDishForm.tsx
similarity index 69%
rename from frontend/archive/src/components/features/dishes/CreateDishForm.tsx
rename to frontend/src/components/features/dishes/CreateDishForm.tsx
index 242c1f2..49420df 100644
--- a/frontend/archive/src/components/features/dishes/CreateDishForm.tsx
+++ b/frontend/src/components/features/dishes/CreateDishForm.tsx
@@ -3,10 +3,10 @@ import { useRouter } from "next/navigation";
 import { createDish } from "@/utils/api/dishApi";
 import PageTitle from "@/components/ui/PageTitle";
 import Alert from "@/components/ui/Alert";
-import SolidButton from "@/components/ui/Buttons/SolidButton";
-import OutlineLinkButton from "@/components/ui/Buttons/OutlineLinkButton";
+import Button from "@/components/ui/Button";
 import { ChevronLeftIcon } from "@heroicons/react/16/solid";
-import Hr from "@/components/ui/Hr"
+import Hr from "@/components/ui/Hr";
+import Input from "@/components/ui/Input";
 
 const CreateDishForm = () => {
     const router = useRouter()
@@ -55,37 +55,38 @@ const CreateDishForm = () => {
                     <Alert type="error">{ error }</Alert>
                 ) }
 
-                <div>
-                    <label htmlFor="name" className="block text-sm font-medium">Dish Name</label>
-                    <input
-                        type="text"
-                        id="name"
-                        name="name"
-                        value={ name }
-                        onChange={ (e) => setName(e.target.value) } // Update the name state on change
-                        className="w-full p-2 mb-4 border rounded bg-gray-600 border-secondary text-secondary focus:bg-gray-900"
-                        placeholder="Enter dish name"
-                    />
-                </div>
+                <Input
+                    label="Dish Name"
+                    type="text"
+                    id="name"
+                    name="name"
+                    value={ name }
+                    onChange={ (e) => setName(e.target.value) }
+                    placeholder="Enter dish name"
+                    className="mb-4"
+                />
 
-                <SolidButton
+                <Button
                     type="submit"
+                    appearance="solid"
+                    variant="primary"
                     disabled={ loading }
                     className={ loading ? "bg-gray-400" : '' }
                 >
                     { loading ? "Saving..." : "Save Changes" }
-                </SolidButton>
+                </Button>
             </form>
 
             <Hr />
 
-            <OutlineLinkButton
+            <Button
+                appearance="outline"
                 href="/dishes"
                 className="mt-4 pl-0 mr-0"
                 icon={ <ChevronLeftIcon/> }
             >
                 Back to dishes
-            </OutlineLinkButton>
+            </Button>
         </div>
     );
 
diff --git a/frontend/archive/src/components/features/dishes/Dish.tsx b/frontend/src/components/features/dishes/Dish.tsx
similarity index 100%
rename from frontend/archive/src/components/features/dishes/Dish.tsx
rename to frontend/src/components/features/dishes/Dish.tsx
diff --git a/frontend/archive/src/components/features/dishes/DishCard.tsx b/frontend/src/components/features/dishes/DishCard.tsx
similarity index 100%
rename from frontend/archive/src/components/features/dishes/DishCard.tsx
rename to frontend/src/components/features/dishes/DishCard.tsx
diff --git a/frontend/archive/src/components/features/dishes/EditDishForm.tsx b/frontend/src/components/features/dishes/EditDishForm.tsx
similarity index 75%
rename from frontend/archive/src/components/features/dishes/EditDishForm.tsx
rename to frontend/src/components/features/dishes/EditDishForm.tsx
index cfffb2a..6409b16 100644
--- a/frontend/archive/src/components/features/dishes/EditDishForm.tsx
+++ b/frontend/src/components/features/dishes/EditDishForm.tsx
@@ -5,7 +5,8 @@ import {updateDish} from "@/utils/api/dishApi";
 import {DishType} from "@/types/DishType";
 import useRoutes from "@/hooks/useRoutes";
 import Spinner from "@/components/Spinner";
-import Button from "@/components/ui/Button"
+import Button from "@/components/ui/Button";
+import Input from "@/components/ui/Input";
 
 interface Props {
     dish: DishType
@@ -57,20 +58,15 @@ const EditDishForm: FC<Props> = ({ dish }) => {
                 error != '' && <Alert type="error" >{ error }</Alert>
             }
 
-            {/* Dish name input */}
-            <div>
-                <label htmlFor="name" className="block text-sm font-medium">Dish Name</label>
-                <input
-                    type="text"
-                    id="name"
-                    name="name"
-                    value={name}
-                    onChange={(e) => setName(e.target.value)} // Update the name state on change
-                    className="p-2 border rounded w-full bg-gray-500 border-secondary background-secondary"
-                />
-            </div>
+            <Input
+                label="Dish Name"
+                type="text"
+                id="name"
+                name="name"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+            />
 
-            {/* Save button */}
             <Button
                 type="submit"
                 disabled={loading}
diff --git a/frontend/archive/src/components/features/dishes/EditDishUserCardEditForm.tsx b/frontend/src/components/features/dishes/EditDishUserCardEditForm.tsx
similarity index 92%
rename from frontend/archive/src/components/features/dishes/EditDishUserCardEditForm.tsx
rename to frontend/src/components/features/dishes/EditDishUserCardEditForm.tsx
index eb4bc06..fbaa508 100644
--- a/frontend/archive/src/components/features/dishes/EditDishUserCardEditForm.tsx
+++ b/frontend/src/components/features/dishes/EditDishUserCardEditForm.tsx
@@ -4,7 +4,8 @@ import {syncUserDishRecurrences} from "@/utils/api/usersApi";
 import Spinner from "@/components/Spinner";
 import {UserDishType} from "@/types/ScheduledUserDishType";
 import {RecurrenceType} from "@/types/ScheduleType";
-import SolidButton from "@/components/ui/Buttons/SolidButton";
+import Button from "@/components/ui/Button";
+import Input from "@/components/ui/Input";
 
 interface Props {
     userDish: UserDishType
@@ -74,7 +75,7 @@ const EditDishUserCardEditForm: FC<Props> = ({ userDish, onSubmit}) => {
                     isWeeklyOn && (
                         <div className="flex-grow ml-2">
                             <label htmlFor="weekday" className="mr-2">on</label>
-                            <select value={weekday} onChange={(e) => setWeekday(parseInt(e.currentTarget.value))} className="background-secondary border-secondary border-2">
+                            <select value={weekday} onChange={(e) => setWeekday(parseInt(e.currentTarget.value))} className="bg-secondary border-secondary border-2">
                                 <option value="0">Sunday</option>
                                 <option value="1">Monday</option>
                                 <option value="2">Tuesday</option>
@@ -104,14 +105,14 @@ const EditDishUserCardEditForm: FC<Props> = ({ userDish, onSubmit}) => {
                 {
                     isMinimumOn && (
                         <div className="flex-grow ml-2">
-                            <input type="number" value={minimumValue} onChange={(e) => setMinimumValue(parseInt(e.currentTarget.value))} min="0" max="365" className="background-secondary border-secondary border-2 w-12 px-2" />
+                            <Input type="number" value={minimumValue} onChange={(e) => setMinimumValue(parseInt(e.currentTarget.value))} min="0" max="365" className="w-12 px-2" fullWidth={false} />
                             <label htmlFor="minimum">Days</label>
                         </div>
                     )
                 }
             </div>
 
-            <SolidButton type="submit">Save</SolidButton>
+            <Button type="submit" appearance="solid" variant="primary">Save</Button>
         </form>
     );
 }
diff --git a/frontend/archive/src/components/features/dishes/RecurrenceLabels.tsx b/frontend/src/components/features/dishes/RecurrenceLabels.tsx
similarity index 100%
rename from frontend/archive/src/components/features/dishes/RecurrenceLabels.tsx
rename to frontend/src/components/features/dishes/RecurrenceLabels.tsx
diff --git a/frontend/archive/src/components/features/dishes/SyncUsersForm.tsx b/frontend/src/components/features/dishes/SyncUsersForm.tsx
similarity index 100%
rename from frontend/archive/src/components/features/dishes/SyncUsersForm.tsx
rename to frontend/src/components/features/dishes/SyncUsersForm.tsx
diff --git a/frontend/archive/src/components/features/dishes/UserDishCard.tsx b/frontend/src/components/features/dishes/UserDishCard.tsx
similarity index 100%
rename from frontend/archive/src/components/features/dishes/UserDishCard.tsx
rename to frontend/src/components/features/dishes/UserDishCard.tsx
diff --git a/frontend/archive/src/components/features/navbar/MobileDropdownMenu.tsx b/frontend/src/components/features/navbar/MobileDropdownMenu.tsx
similarity index 96%
rename from frontend/archive/src/components/features/navbar/MobileDropdownMenu.tsx
rename to frontend/src/components/features/navbar/MobileDropdownMenu.tsx
index 3e8639a..2e74d52 100644
--- a/frontend/archive/src/components/features/navbar/MobileDropdownMenu.tsx
+++ b/frontend/src/components/features/navbar/MobileDropdownMenu.tsx
@@ -17,7 +17,7 @@ const divStyles = classNames(
 
 const linkStyles = classNames(
     'border-b-2', 'border-secondary', 'uppercase',
-    'text-primary', 'hover:background-secondary', 'pb-2', 'pl-5',
+    'text-primary', 'hover:bg-secondary', 'pb-2', 'pl-5',
     'space-grotesk', 'text-xl'
 )
 
diff --git a/frontend/archive/src/components/features/schedule/HistoricalDishes.tsx b/frontend/src/components/features/schedule/HistoricalDishes.tsx
similarity index 100%
rename from frontend/archive/src/components/features/schedule/HistoricalDishes.tsx
rename to frontend/src/components/features/schedule/HistoricalDishes.tsx
diff --git a/frontend/archive/src/components/features/schedule/ScheduleCalendar.tsx b/frontend/src/components/features/schedule/ScheduleCalendar.tsx
similarity index 100%
rename from frontend/archive/src/components/features/schedule/ScheduleCalendar.tsx
rename to frontend/src/components/features/schedule/ScheduleCalendar.tsx
diff --git a/frontend/archive/src/components/features/schedule/ScheduleEditForm.tsx b/frontend/src/components/features/schedule/ScheduleEditForm.tsx
similarity index 95%
rename from frontend/archive/src/components/features/schedule/ScheduleEditForm.tsx
rename to frontend/src/components/features/schedule/ScheduleEditForm.tsx
index 0f436a9..716f69a 100644
--- a/frontend/archive/src/components/features/schedule/ScheduleEditForm.tsx
+++ b/frontend/src/components/features/schedule/ScheduleEditForm.tsx
@@ -77,7 +77,7 @@ const ScheduleEditForm: FC<Props> = ({ date }) => {
                 <PageTitle>Edit Day</PageTitle>
             </div>
             <div className="flex-grow">
-                <SectionTitle className="text-right font-size-24 capitalize font-default">{ transformDate(schedule.date) }</SectionTitle>
+                <SectionTitle className="text-right text-2xl capitalize font-default">{ transformDate(schedule.date) }</SectionTitle>
             </div>
         </div>
 
@@ -98,7 +98,7 @@ const ScheduleEditForm: FC<Props> = ({ date }) => {
                     {
                         scheduleData
                             .map((scheduleData) => <div className="flex w-full py-2" key={ scheduleData.user.id }>
-                                <div className="flex-none px-2 font-size-18 pt-2">{ scheduleData.user.name }</div>
+                                <div className="flex-none px-2 text-lg pt-2">{ scheduleData.user.name }</div>
                                 <div className="flex-grow px-2">
                                     <select
                                         className="w-full bg-gray-500 border-2 border-secondary p-2 rounded"
diff --git a/frontend/archive/src/components/features/schedule/ScheduleRegenerateButton.tsx b/frontend/src/components/features/schedule/ScheduleRegenerateButton.tsx
similarity index 100%
rename from frontend/archive/src/components/features/schedule/ScheduleRegenerateButton.tsx
rename to frontend/src/components/features/schedule/ScheduleRegenerateButton.tsx
diff --git a/frontend/archive/src/components/features/schedule/ScheduleRegenerateForm.tsx b/frontend/src/components/features/schedule/ScheduleRegenerateForm.tsx
similarity index 88%
rename from frontend/archive/src/components/features/schedule/ScheduleRegenerateForm.tsx
rename to frontend/src/components/features/schedule/ScheduleRegenerateForm.tsx
index 017b8c2..81d3784 100644
--- a/frontend/archive/src/components/features/schedule/ScheduleRegenerateForm.tsx
+++ b/frontend/src/components/features/schedule/ScheduleRegenerateForm.tsx
@@ -3,7 +3,7 @@ import Toggle from "@/components/ui/Toggle";
 import {FC, useEffect, useState} from "react";
 import {generateSchedule} from "@/utils/api/scheduleApi";
 import Alert from "@/components/ui/Alert";
-import SolidButton from "@/components/ui/Buttons/SolidButton";
+import Button from "@/components/ui/Button";
 
 interface ScheduleRegenerateFormProps {
     closeModal: () => void;
@@ -34,7 +34,7 @@ const ScheduleRegenerateForm: FC<ScheduleRegenerateFormProps> = ({closeModal}) =
         <div className="bg-gray-500 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
             <div className="sm:flex sm:items-start w-full">
                 <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left ">
-                    <DialogTitle as="h3" className="text-base font-semibold text-accent-blue">
+                    <DialogTitle as="h3" className="text-base font-semibold text-accent">
                         Regenerate Schedule
                     </DialogTitle>
                     <div className="mt-5">
@@ -43,7 +43,7 @@ const ScheduleRegenerateForm: FC<ScheduleRegenerateFormProps> = ({closeModal}) =
                                 error && <Alert type="error">{ error }</Alert>
                             }
                             <div className="flex-1/2 pr-5">
-                                <label htmlFor="overwrite" className="text-accent-blue">Overwrite current schedule</label>
+                                <label htmlFor="overwrite" className="text-accent">Overwrite current schedule</label>
                             </div>
                             <div className="flex-1/2">
                                 <Toggle onChange={handleToggle} checked={overwrite} />
@@ -56,21 +56,24 @@ const ScheduleRegenerateForm: FC<ScheduleRegenerateFormProps> = ({closeModal}) =
             </div>
         </div>
         <div className="bg-gray-500 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
-            <SolidButton
+            <Button
                 type="button"
+                appearance="solid"
+                variant="primary"
                 onClick={() => handleSubmit()}
                 className="inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold shadow-xs sm:ml-3 sm:w-auto"
             >
                 Regenerate
-            </SolidButton>
-            <SolidButton
+            </Button>
+            <Button
                 type="button"
-                data-autofocus
+                appearance="solid"
+                variant="secondary"
                 onClick={() => close()}
                 className="mt-3 inline-flex w-full justify-center rounded-md bg-gray-500 px-3 py-2 text-sm font-semibold text-gray-900 ring-1 shadow-xs border-secondary ring-inset  sm:mt-0 sm:w-auto"
             >
                 Cancel
-            </SolidButton>
+            </Button>
         </div>
     </>;
 };
diff --git a/frontend/archive/src/components/features/schedule/UpcomingDishes.tsx b/frontend/src/components/features/schedule/UpcomingDishes.tsx
similarity index 100%
rename from frontend/archive/src/components/features/schedule/UpcomingDishes.tsx
rename to frontend/src/components/features/schedule/UpcomingDishes.tsx
diff --git a/frontend/archive/src/components/features/schedule/UserDishEditCard.tsx b/frontend/src/components/features/schedule/UserDishEditCard.tsx
similarity index 98%
rename from frontend/archive/src/components/features/schedule/UserDishEditCard.tsx
rename to frontend/src/components/features/schedule/UserDishEditCard.tsx
index b82fc1b..3847c93 100644
--- a/frontend/archive/src/components/features/schedule/UserDishEditCard.tsx
+++ b/frontend/src/components/features/schedule/UserDishEditCard.tsx
@@ -16,7 +16,7 @@ const UserDishEditCard: FC<Props> = ({ scheduledUserDish, allDishes }) => {
     const [isSuccess, setIsSuccess] = useState(false);
 
     const selectStyle = classNames(
-        'p-2', 'rounded', 'w-full', 'background-secondary',
+        'p-2', 'rounded', 'w-full', 'bg-secondary',
         'focus:outline-none',
         'transition-[border-color] ease-out duration-1000', 'border-2', // Keep consistent base styles
         {
diff --git a/frontend/archive/src/components/features/schedule/dayCard/DateBadge.tsx b/frontend/src/components/features/schedule/dayCard/DateBadge.tsx
similarity index 95%
rename from frontend/archive/src/components/features/schedule/dayCard/DateBadge.tsx
rename to frontend/src/components/features/schedule/dayCard/DateBadge.tsx
index 9a61d87..edbcd31 100644
--- a/frontend/archive/src/components/features/schedule/dayCard/DateBadge.tsx
+++ b/frontend/src/components/features/schedule/dayCard/DateBadge.tsx
@@ -11,7 +11,7 @@ const DateBadge: FC<Props> = ({ className, date }) => {
     const isToday = DateTime.fromISO(date).toFormat("yyyy-LL-dd") == DateTime.now().toFormat("yyyy-LL-dd")
 
     const textStyle = classNames("inline font-bold", {
-        'text-accent-blue': isToday,
+        'text-accent': isToday,
         'text-secondary': !isToday,
     }, className)
 
diff --git a/frontend/archive/src/components/features/schedule/dayCard/ScheduleDayCard.tsx b/frontend/src/components/features/schedule/dayCard/ScheduleDayCard.tsx
similarity index 96%
rename from frontend/archive/src/components/features/schedule/dayCard/ScheduleDayCard.tsx
rename to frontend/src/components/features/schedule/dayCard/ScheduleDayCard.tsx
index 77c68e0..03a2355 100644
--- a/frontend/archive/src/components/features/schedule/dayCard/ScheduleDayCard.tsx
+++ b/frontend/src/components/features/schedule/dayCard/ScheduleDayCard.tsx
@@ -20,7 +20,7 @@ const ScheduleDayCard: FC<Props> = ({schedule, users}) => {
 
     const containerStyles = classNames(
         'w-full bg-gray-500 pt-5 pb-2 rounded-2xl text-xl', {
-            'border-2 text-accent-blue border-accent-blue': isToday,
+            'border-2 text-accent border-accent': isToday,
         }
     )
 
diff --git a/frontend/archive/src/components/features/schedule/dayCard/ScheduleDayCardUserDish.tsx b/frontend/src/components/features/schedule/dayCard/ScheduleDayCardUserDish.tsx
similarity index 75%
rename from frontend/archive/src/components/features/schedule/dayCard/ScheduleDayCardUserDish.tsx
rename to frontend/src/components/features/schedule/dayCard/ScheduleDayCardUserDish.tsx
index 64f0f0e..298f5cd 100644
--- a/frontend/archive/src/components/features/schedule/dayCard/ScheduleDayCardUserDish.tsx
+++ b/frontend/src/components/features/schedule/dayCard/ScheduleDayCardUserDish.tsx
@@ -22,9 +22,9 @@ const ScheduleDayCardUserDish: FC<Props> = ({ schedule, user }) => {
     }
 
     return (
-        <div className="w-full flex background-secondary pb-1 rounded-2xl text-xl" key={ `user-${ user.id }` }>
-            <div className="w-1/3 font-size-16 text-right pr-3">{ user.name } : </div>
-            <div className="w-2/3 font-size-16">{ getDish(user) }</div>
+        <div className="w-full flex bg-secondary pb-1 rounded-2xl text-xl" key={ `user-${ user.id }` }>
+            <div className="w-1/3 text-base text-right pr-3">{ user.name } : </div>
+            <div className="w-2/3 text-base">{ getDish(user) }</div>
         </div>
     );
 };
diff --git a/frontend/archive/src/components/features/users/EditUserForm.tsx b/frontend/src/components/features/users/EditUserForm.tsx
similarity index 73%
rename from frontend/archive/src/components/features/users/EditUserForm.tsx
rename to frontend/src/components/features/users/EditUserForm.tsx
index 1593dd9..0d68777 100644
--- a/frontend/archive/src/components/features/users/EditUserForm.tsx
+++ b/frontend/src/components/features/users/EditUserForm.tsx
@@ -6,7 +6,8 @@ import PageTitle from "@/components/ui/PageTitle";
 import Link from "next/link";
 import Alert from "@/components/ui/Alert";
 import {UserType} from "@/types/UserType";
-import SolidButton from "@/components/ui/Buttons/SolidButton";
+import Button from "@/components/ui/Button";
+import Input from "@/components/ui/Input";
 
 interface Props {
     user: UserType;
@@ -44,17 +45,17 @@ const EditUserForm: FC<Props> = ({ user }) => {
                     error != '' && <Alert type="error" className="mt-4">{ error }</Alert>
                 }
 
-                <label htmlFor="name">Name</label>
-                <input type="text"
-                       placeholder=""
-                       name="name"
-                       id="name"
-                       value={name}
-                       onChange={(e) => setName(e.target.value)}
-                       className="w-full p-2 border rounded bg-primary border-secondary bg-gray-600 text-secondary"
+                <Input
+                    label="Name"
+                    type="text"
+                    placeholder=""
+                    name="name"
+                    id="name"
+                    value={name}
+                    onChange={(e) => setName(e.target.value)}
                 />
 
-                <SolidButton type="submit" className="mt-4">Update</SolidButton>
+                <Button type="submit" appearance="solid" variant="primary" className="mt-4">Update</Button>
             </form>
         </div>
     );
diff --git a/frontend/archive/src/components/layout/AuthGuard.tsx b/frontend/src/components/layout/AuthGuard.tsx
similarity index 100%
rename from frontend/archive/src/components/layout/AuthGuard.tsx
rename to frontend/src/components/layout/AuthGuard.tsx
diff --git a/frontend/src/components/layout/Card.tsx b/frontend/src/components/layout/Card.tsx
new file mode 100644
index 0000000..055a4b2
--- /dev/null
+++ b/frontend/src/components/layout/Card.tsx
@@ -0,0 +1,22 @@
+import React, {FC} from "react";
+import classNames from "classnames";
+
+interface Props {
+    children: React.ReactNode;
+    className?: string;
+}
+
+const Card: FC<Props> = ({ children, className }) => {
+    const styles = classNames(
+        "w-full border-2 border-secondary p-4 my-2 rounded-lg flex bg-gray-700",
+        className
+    );
+
+    return (
+        <div className={styles}>
+            {children}
+        </div>
+    );
+}
+
+export default Card;
\ No newline at end of file
diff --git a/frontend/archive/src/components/layout/NavBar.tsx b/frontend/src/components/layout/NavBar.tsx
similarity index 93%
rename from frontend/archive/src/components/layout/NavBar.tsx
rename to frontend/src/components/layout/NavBar.tsx
index 67cadb2..56a9cd9 100644
--- a/frontend/archive/src/components/layout/NavBar.tsx
+++ b/frontend/src/components/layout/NavBar.tsx
@@ -53,21 +53,21 @@ const NavBar = () => {
 
                     {/* Desktop Menu */}
                     <div className="hidden md:flex space-x-6">
-                        <Link href={routes.home()} className="text-accent-blue hover:background-secondary">
+                        <Link href={routes.home()} className="text-accent hover:bg-secondary">
                             Home
                         </Link>
-                        <Link href={routes.dish.index()} className="text-accent-blue hover:background-secondary">
+                        <Link href={routes.dish.index()} className="text-accent hover:bg-secondary">
                             Dishes
                         </Link>
-                        <Link href={routes.user.index()} className="text-accent-blue hover:background-secondary">
+                        <Link href={routes.user.index()} className="text-accent hover:bg-secondary">
                             Users
                         </Link>
-                        <Link href={routes.schedule.history()} className="text-accent-blue hover:background-secondary">
+                        <Link href={routes.schedule.history()} className="text-accent hover:bg-secondary">
                             History
                         </Link>
                         <Link href={routes.auth.login()}
                               onClick={handleLogout}
-                              className="text-primary text-right hover:background-secondary">
+                              className="text-primary text-right hover:bg-secondary">
                             Logout
                         </Link>
                     </div>
diff --git a/frontend/src/components/ui/Alert.tsx b/frontend/src/components/ui/Alert.tsx
new file mode 100644
index 0000000..33bec26
--- /dev/null
+++ b/frontend/src/components/ui/Alert.tsx
@@ -0,0 +1,29 @@
+import React, {FC} from "react";
+import classNames from "classnames";
+
+interface Props {
+    children: React.ReactNode;
+    className?: string;
+    type: 'error' | 'warning' | 'info' | 'success';
+}
+
+const Alert: FC<Props> = ({ children, className, type } ) => {
+    const styles = classNames(
+        "px-4 py-3 rounded-lg border-2",
+        {
+            'bg-danger-50 border-danger text-danger-800': type === 'error',
+            'bg-warning-50 border-warning text-warning-800': type === 'warning',
+            'bg-accent-50 border-accent text-accent-800': type === 'info',
+            'bg-success-50 border-success text-success-800': type === 'success',
+        },
+        className
+    );
+
+    return (
+        <div className={styles} role="alert">
+            {children}
+        </div>
+    );
+}
+
+export default Alert;
\ No newline at end of file
diff --git a/frontend/src/components/ui/Button.tsx b/frontend/src/components/ui/Button.tsx
new file mode 100644
index 0000000..915756c
--- /dev/null
+++ b/frontend/src/components/ui/Button.tsx
@@ -0,0 +1,118 @@
+import Link from "next/link";
+import React, { FC, ReactElement, ReactNode } from "react";
+import classNames from "classnames";
+
+interface ButtonProps {
+    appearance?: 'solid' | 'outline' | 'text';
+    children: ReactNode;
+    className?: string;
+    href?: string;
+    icon?: ReactNode;
+    onClick?: () => void;
+    disabled?: boolean;
+    size?: 'small' | 'medium' | 'large';
+    type?: 'button' | 'submit' | 'reset';
+    variant?: 'primary' | 'secondary' | 'accent' | 'danger';
+}
+
+const Button: FC<ButtonProps> = ({
+    appearance = 'solid',
+    children,
+    className,
+    disabled,
+    href,
+    icon,
+    onClick,
+    size = 'medium',
+    type = 'button',
+    variant = 'primary'
+}) => {
+    const baseStyles = "inline-flex items-center justify-center gap-2 rounded font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed";
+
+    // Size styles
+    const sizeStyles = classNames({
+        "text-sm py-1.5 px-3": size === "small",
+        "text-base py-2 px-4": size === "medium",
+        "text-lg py-3 px-6": size === "large",
+    });
+
+    // Variant + Appearance styles
+    const variantStyles = classNames({
+        // Primary Solid
+        'bg-primary text-white border-2 border-primary hover:bg-primary-600 focus:ring-primary-500':
+            variant === 'primary' && appearance === 'solid',
+        // Primary Outline
+        'bg-transparent text-primary border-2 border-primary hover:bg-primary-50 focus:ring-primary-500':
+            variant === 'primary' && appearance === 'outline',
+        // Primary Text
+        'bg-transparent text-primary border-2 border-transparent hover:bg-primary-50 focus:ring-primary-500':
+            variant === 'primary' && appearance === 'text',
+
+        // Secondary Solid
+        'bg-secondary text-white border-2 border-secondary hover:bg-secondary-600 focus:ring-secondary-500':
+            variant === 'secondary' && appearance === 'solid',
+        // Secondary Outline
+        'bg-transparent text-secondary border-2 border-secondary hover:bg-secondary-50 focus:ring-secondary-500':
+            variant === 'secondary' && appearance === 'outline',
+        // Secondary Text
+        'bg-transparent text-secondary border-2 border-transparent hover:bg-secondary-50 focus:ring-secondary-500':
+            variant === 'secondary' && appearance === 'text',
+
+        // Accent Solid
+        'bg-accent text-white border-2 border-accent hover:bg-accent-600 focus:ring-accent-500':
+            variant === 'accent' && appearance === 'solid',
+        // Accent Outline
+        'bg-transparent text-accent border-2 border-accent hover:bg-accent-50 focus:ring-accent-500':
+            variant === 'accent' && appearance === 'outline',
+        // Accent Text
+        'bg-transparent text-accent border-2 border-transparent hover:bg-accent-50 focus:ring-accent-500':
+            variant === 'accent' && appearance === 'text',
+
+        // Danger Solid
+        'bg-danger text-white border-2 border-danger hover:bg-danger-600 focus:ring-danger-500':
+            variant === 'danger' && appearance === 'solid',
+        // Danger Outline
+        'bg-transparent text-danger border-2 border-danger hover:bg-danger-50 focus:ring-danger-500':
+            variant === 'danger' && appearance === 'outline',
+        // Danger Text
+        'bg-transparent text-danger border-2 border-transparent hover:bg-danger-50 focus:ring-danger-500':
+            variant === 'danger' && appearance === 'text',
+    });
+
+    const styles = classNames(baseStyles, sizeStyles, variantStyles, className);
+
+    const iconClassNames = classNames({
+        "h-4 w-4": size === "small",
+        "h-5 w-5": size === "medium",
+        "h-6 w-6": size === "large",
+    });
+
+    const iconElement = icon && React.isValidElement(icon)
+        ? React.cloneElement(icon as ReactElement<{ className?: string }>, {
+            className: iconClassNames,
+        })
+        : null;
+
+    if (href !== undefined) {
+        return (
+            <Link href={href} className={styles}>
+                {iconElement}
+                {children}
+            </Link>
+        );
+    }
+
+    return (
+        <button
+            onClick={onClick}
+            className={styles}
+            disabled={disabled}
+            type={type}
+        >
+            {iconElement}
+            {children}
+        </button>
+    );
+}
+
+export default Button;
\ No newline at end of file
diff --git a/frontend/src/components/ui/Checkbox.tsx b/frontend/src/components/ui/Checkbox.tsx
new file mode 100644
index 0000000..6db787c
--- /dev/null
+++ b/frontend/src/components/ui/Checkbox.tsx
@@ -0,0 +1,64 @@
+import React, { FC, InputHTMLAttributes } from "react";
+import classNames from "classnames";
+
+interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    label?: string;
+    error?: string;
+    helperText?: string;
+}
+
+const Checkbox: FC<CheckboxProps> = ({
+    label,
+    error,
+    helperText,
+    className,
+    id,
+    ...props
+}) => {
+    const checkboxId = id || label?.toLowerCase().replace(/\s+/g, '-');
+
+    const checkboxStyles = classNames(
+        "h-5 w-5 rounded border-2 transition-colors cursor-pointer",
+        "focus:outline-none focus:ring-2 focus:ring-offset-1",
+        {
+            "border-secondary text-primary focus:ring-primary-500": !error,
+            "border-danger text-danger focus:ring-danger-500": error,
+            "opacity-50 cursor-not-allowed": props.disabled,
+        },
+        className
+    );
+
+    const labelStyles = classNames(
+        "ml-2 text-sm font-medium cursor-pointer",
+        {
+            "text-secondary": !error,
+            "text-danger": error,
+        }
+    );
+
+    return (
+        <div>
+            <div className="flex items-center">
+                <input
+                    type="checkbox"
+                    id={checkboxId}
+                    className={checkboxStyles}
+                    {...props}
+                />
+                {label && (
+                    <label htmlFor={checkboxId} className={labelStyles}>
+                        {label}
+                    </label>
+                )}
+            </div>
+            {error && (
+                <p className="mt-1 text-sm text-danger">{error}</p>
+            )}
+            {helperText && !error && (
+                <p className="mt-1 text-sm text-gray-400">{helperText}</p>
+            )}
+        </div>
+    );
+};
+
+export default Checkbox;
diff --git a/frontend/archive/src/components/ui/Description.tsx b/frontend/src/components/ui/Description.tsx
similarity index 85%
rename from frontend/archive/src/components/ui/Description.tsx
rename to frontend/src/components/ui/Description.tsx
index 8b429c0..dea94f2 100644
--- a/frontend/archive/src/components/ui/Description.tsx
+++ b/frontend/src/components/ui/Description.tsx
@@ -7,7 +7,7 @@ interface Props {
 }
 
 const Description = ({ children, className }: Props) => {
-    const style = classNames("italic font-size-16",
+    const style = classNames("italic text-base",
         className
     )
 
diff --git a/frontend/archive/src/components/ui/Hr.tsx b/frontend/src/components/ui/Hr.tsx
similarity index 100%
rename from frontend/archive/src/components/ui/Hr.tsx
rename to frontend/src/components/ui/Hr.tsx
diff --git a/frontend/src/components/ui/Input.tsx b/frontend/src/components/ui/Input.tsx
new file mode 100644
index 0000000..f23ee4d
--- /dev/null
+++ b/frontend/src/components/ui/Input.tsx
@@ -0,0 +1,68 @@
+import React, { FC, InputHTMLAttributes } from "react";
+import classNames from "classnames";
+
+interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    label?: string;
+    error?: string;
+    helperText?: string;
+    fullWidth?: boolean;
+}
+
+const Input: FC<InputProps> = ({
+    label,
+    error,
+    helperText,
+    fullWidth = true,
+    className,
+    id,
+    required,
+    ...props
+}) => {
+    const inputId = id || label?.toLowerCase().replace(/\s+/g, '-');
+
+    const inputStyles = classNames(
+        "px-3 py-2 rounded border-2 transition-colors",
+        "bg-gray-600 text-secondary",
+        "focus:outline-none focus:ring-2 focus:ring-offset-1",
+        {
+            "border-secondary focus:border-primary focus:ring-primary-500": !error,
+            "border-danger focus:border-danger focus:ring-danger-500": error,
+            "w-full": fullWidth,
+            "opacity-50 cursor-not-allowed": props.disabled,
+        },
+        className
+    );
+
+    const labelStyles = classNames(
+        "block text-sm font-medium mb-1",
+        {
+            "text-secondary": !error,
+            "text-danger": error,
+        }
+    );
+
+    return (
+        <div className={fullWidth ? "w-full" : ""}>
+            {label && (
+                <label htmlFor={inputId} className={labelStyles}>
+                    {label}
+                    {required && <span className="text-danger ml-1">*</span>}
+                </label>
+            )}
+            <input
+                id={inputId}
+                className={inputStyles}
+                required={required}
+                {...props}
+            />
+            {error && (
+                <p className="mt-1 text-sm text-danger">{error}</p>
+            )}
+            {helperText && !error && (
+                <p className="mt-1 text-sm text-gray-400">{helperText}</p>
+            )}
+        </div>
+    );
+};
+
+export default Input;
diff --git a/frontend/archive/src/components/ui/Label.tsx b/frontend/src/components/ui/Label.tsx
similarity index 100%
rename from frontend/archive/src/components/ui/Label.tsx
rename to frontend/src/components/ui/Label.tsx
diff --git a/frontend/archive/src/components/ui/Modal.tsx b/frontend/src/components/ui/Modal.tsx
similarity index 100%
rename from frontend/archive/src/components/ui/Modal.tsx
rename to frontend/src/components/ui/Modal.tsx
diff --git a/frontend/archive/src/components/ui/PageTitle.tsx b/frontend/src/components/ui/PageTitle.tsx
similarity index 95%
rename from frontend/archive/src/components/ui/PageTitle.tsx
rename to frontend/src/components/ui/PageTitle.tsx
index ca65f18..abeafa1 100644
--- a/frontend/archive/src/components/ui/PageTitle.tsx
+++ b/frontend/src/components/ui/PageTitle.tsx
@@ -8,7 +8,7 @@ interface Props {
 
 const PageTitle: FC<Props> = ({ children, className }) => {
     const styles = classNames(
-        'ml-4 text-2xl font-default uppercase w-full text-accent-blue font-bold',
+        'ml-4 text-2xl font-default uppercase w-full text-accent font-bold',
         className,
     )
 
diff --git a/frontend/archive/src/components/ui/RecurrenceInput.tsx b/frontend/src/components/ui/RecurrenceInput.tsx
similarity index 100%
rename from frontend/archive/src/components/ui/RecurrenceInput.tsx
rename to frontend/src/components/ui/RecurrenceInput.tsx
diff --git a/frontend/archive/src/components/ui/SectionTitle.tsx b/frontend/src/components/ui/SectionTitle.tsx
similarity index 75%
rename from frontend/archive/src/components/ui/SectionTitle.tsx
rename to frontend/src/components/ui/SectionTitle.tsx
index 93d13c4..5940039 100644
--- a/frontend/archive/src/components/ui/SectionTitle.tsx
+++ b/frontend/src/components/ui/SectionTitle.tsx
@@ -6,7 +6,7 @@ interface Props {
 }
 
 const SectionTitle = ({ children, className }: Props) => {
-    const style = classNames("block font-size-18 uppercase w-full pl-2 text-accent-blue",
+    const style = classNames("block text-lg uppercase w-full pl-2 text-accent",
         className
     )
 
diff --git a/frontend/src/components/ui/Select.tsx b/frontend/src/components/ui/Select.tsx
new file mode 100644
index 0000000..3b04546
--- /dev/null
+++ b/frontend/src/components/ui/Select.tsx
@@ -0,0 +1,82 @@
+import React, { FC, SelectHTMLAttributes } from "react";
+import classNames from "classnames";
+
+interface SelectOption {
+    value: string | number;
+    label: string;
+}
+
+interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
+    label?: string;
+    error?: string;
+    helperText?: string;
+    fullWidth?: boolean;
+    options: SelectOption[];
+}
+
+const Select: FC<SelectProps> = ({
+    label,
+    error,
+    helperText,
+    fullWidth = true,
+    options,
+    className,
+    id,
+    required,
+    ...props
+}) => {
+    const selectId = id || label?.toLowerCase().replace(/\s+/g, '-');
+
+    const selectStyles = classNames(
+        "px-3 py-2 rounded border-2 transition-colors",
+        "bg-gray-600 text-secondary",
+        "focus:outline-none focus:ring-2 focus:ring-offset-1",
+        "cursor-pointer",
+        {
+            "border-secondary focus:border-primary focus:ring-primary-500": !error,
+            "border-danger focus:border-danger focus:ring-danger-500": error,
+            "w-full": fullWidth,
+            "opacity-50 cursor-not-allowed": props.disabled,
+        },
+        className
+    );
+
+    const labelStyles = classNames(
+        "block text-sm font-medium mb-1",
+        {
+            "text-secondary": !error,
+            "text-danger": error,
+        }
+    );
+
+    return (
+        <div className={fullWidth ? "w-full" : ""}>
+            {label && (
+                <label htmlFor={selectId} className={labelStyles}>
+                    {label}
+                    {required && <span className="text-danger ml-1">*</span>}
+                </label>
+            )}
+            <select
+                id={selectId}
+                className={selectStyles}
+                required={required}
+                {...props}
+            >
+                {options.map((option) => (
+                    <option key={option.value} value={option.value}>
+                        {option.label}
+                    </option>
+                ))}
+            </select>
+            {error && (
+                <p className="mt-1 text-sm text-danger">{error}</p>
+            )}
+            {helperText && !error && (
+                <p className="mt-1 text-sm text-gray-400">{helperText}</p>
+            )}
+        </div>
+    );
+};
+
+export default Select;
diff --git a/frontend/src/components/ui/Toggle.tsx b/frontend/src/components/ui/Toggle.tsx
new file mode 100644
index 0000000..7b36a7a
--- /dev/null
+++ b/frontend/src/components/ui/Toggle.tsx
@@ -0,0 +1,75 @@
+import {FC} from "react";
+import classNames from "classnames";
+
+interface ToggleProps {
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    label?: string;
+    disabled?: boolean;
+    helperText?: string;
+}
+
+const Toggle: FC<ToggleProps> = ({ checked, onChange, label, disabled = false, helperText }) => {
+    const handleChange = () => {
+        if (!disabled) {
+            onChange(!checked);
+        }
+    };
+
+    const containerStyles = classNames(
+        "flex items-center gap-3 cursor-pointer select-none",
+        {
+            "opacity-50 cursor-not-allowed": disabled,
+        }
+    );
+
+    const toggleStyles = classNames(
+        "relative transition-colors duration-200 w-14 h-7 rounded-full",
+        {
+            "bg-success": checked && !disabled,
+            "bg-gray-400": !checked && !disabled,
+            "bg-gray-500": disabled,
+        }
+    );
+
+    const sliderStyles = classNames(
+        "absolute top-0.5 left-0.5 w-6 h-6 rounded-full transform transition-transform duration-200 bg-white shadow-md",
+        {
+            "translate-x-7": checked,
+            "translate-x-0": !checked,
+        }
+    );
+
+    return (
+        <div>
+            <label className={containerStyles}>
+                {/* Hidden input */}
+                <input
+                    type="checkbox"
+                    checked={checked}
+                    onChange={handleChange}
+                    disabled={disabled}
+                    className="sr-only"
+                />
+
+                {/* Toggle switch */}
+                <div className={toggleStyles}>
+                    {/* The slider dot */}
+                    <span className={sliderStyles}></span>
+                </div>
+
+                {/* Label */}
+                {label && (
+                    <span className="text-sm font-medium text-secondary">
+                        {label}
+                    </span>
+                )}
+            </label>
+            {helperText && (
+                <p className="mt-1 text-sm text-gray-400 ml-1">{helperText}</p>
+            )}
+        </div>
+    );
+};
+
+export default Toggle;
\ No newline at end of file
diff --git a/frontend/archive/src/context/AuthContext.tsx b/frontend/src/context/AuthContext.tsx
similarity index 100%
rename from frontend/archive/src/context/AuthContext.tsx
rename to frontend/src/context/AuthContext.tsx
diff --git a/frontend/archive/src/helpers/Date.ts b/frontend/src/helpers/Date.ts
similarity index 100%
rename from frontend/archive/src/helpers/Date.ts
rename to frontend/src/helpers/Date.ts
diff --git a/frontend/archive/src/hooks/useFetchDishes.ts b/frontend/src/hooks/useFetchDishes.ts
similarity index 100%
rename from frontend/archive/src/hooks/useFetchDishes.ts
rename to frontend/src/hooks/useFetchDishes.ts
diff --git a/frontend/archive/src/hooks/useFetchUsers.ts b/frontend/src/hooks/useFetchUsers.ts
similarity index 100%
rename from frontend/archive/src/hooks/useFetchUsers.ts
rename to frontend/src/hooks/useFetchUsers.ts
diff --git a/frontend/archive/src/hooks/useRoutes.ts b/frontend/src/hooks/useRoutes.ts
similarity index 100%
rename from frontend/archive/src/hooks/useRoutes.ts
rename to frontend/src/hooks/useRoutes.ts
diff --git a/frontend/archive/src/styles/base/globals.css b/frontend/src/styles/base/globals.css
similarity index 100%
rename from frontend/archive/src/styles/base/globals.css
rename to frontend/src/styles/base/globals.css
diff --git a/frontend/archive/src/styles/components/select.css b/frontend/src/styles/components/select.css
similarity index 100%
rename from frontend/archive/src/styles/components/select.css
rename to frontend/src/styles/components/select.css
diff --git a/frontend/archive/src/styles/main.css b/frontend/src/styles/main.css
similarity index 100%
rename from frontend/archive/src/styles/main.css
rename to frontend/src/styles/main.css
diff --git a/frontend/archive/src/styles/theme/borders.css b/frontend/src/styles/theme/borders.css
similarity index 100%
rename from frontend/archive/src/styles/theme/borders.css
rename to frontend/src/styles/theme/borders.css
diff --git a/frontend/archive/src/styles/theme/colors.css b/frontend/src/styles/theme/colors.css
similarity index 100%
rename from frontend/archive/src/styles/theme/colors.css
rename to frontend/src/styles/theme/colors.css
diff --git a/frontend/archive/src/styles/theme/colors/background.css b/frontend/src/styles/theme/colors/background.css
similarity index 100%
rename from frontend/archive/src/styles/theme/colors/background.css
rename to frontend/src/styles/theme/colors/background.css
diff --git a/frontend/archive/src/styles/theme/colors/border.css b/frontend/src/styles/theme/colors/border.css
similarity index 100%
rename from frontend/archive/src/styles/theme/colors/border.css
rename to frontend/src/styles/theme/colors/border.css
diff --git a/frontend/archive/src/styles/theme/colors/root.css b/frontend/src/styles/theme/colors/root.css
similarity index 100%
rename from frontend/archive/src/styles/theme/colors/root.css
rename to frontend/src/styles/theme/colors/root.css
diff --git a/frontend/archive/src/styles/theme/colors/text.css b/frontend/src/styles/theme/colors/text.css
similarity index 100%
rename from frontend/archive/src/styles/theme/colors/text.css
rename to frontend/src/styles/theme/colors/text.css
diff --git a/frontend/archive/src/styles/theme/fonts.css b/frontend/src/styles/theme/fonts.css
similarity index 100%
rename from frontend/archive/src/styles/theme/fonts.css
rename to frontend/src/styles/theme/fonts.css
diff --git a/frontend/archive/src/types/DishType.ts b/frontend/src/types/DishType.ts
similarity index 100%
rename from frontend/archive/src/types/DishType.ts
rename to frontend/src/types/DishType.ts
diff --git a/frontend/archive/src/types/ScheduleType.ts b/frontend/src/types/ScheduleType.ts
similarity index 100%
rename from frontend/archive/src/types/ScheduleType.ts
rename to frontend/src/types/ScheduleType.ts
diff --git a/frontend/archive/src/types/ScheduledUserDishType.ts b/frontend/src/types/ScheduledUserDishType.ts
similarity index 100%
rename from frontend/archive/src/types/ScheduledUserDishType.ts
rename to frontend/src/types/ScheduledUserDishType.ts
diff --git a/frontend/archive/src/types/UserDishType.ts b/frontend/src/types/UserDishType.ts
similarity index 100%
rename from frontend/archive/src/types/UserDishType.ts
rename to frontend/src/types/UserDishType.ts
diff --git a/frontend/archive/src/types/UserType.ts b/frontend/src/types/UserType.ts
similarity index 100%
rename from frontend/archive/src/types/UserType.ts
rename to frontend/src/types/UserType.ts
diff --git a/frontend/archive/src/utils/api/apiRequest.ts b/frontend/src/utils/api/apiRequest.ts
similarity index 100%
rename from frontend/archive/src/utils/api/apiRequest.ts
rename to frontend/src/utils/api/apiRequest.ts
diff --git a/frontend/archive/src/utils/api/auth.ts b/frontend/src/utils/api/auth.ts
similarity index 100%
rename from frontend/archive/src/utils/api/auth.ts
rename to frontend/src/utils/api/auth.ts
diff --git a/frontend/archive/src/utils/api/dishApi.ts b/frontend/src/utils/api/dishApi.ts
similarity index 100%
rename from frontend/archive/src/utils/api/dishApi.ts
rename to frontend/src/utils/api/dishApi.ts
diff --git a/frontend/archive/src/utils/api/scheduleApi.ts b/frontend/src/utils/api/scheduleApi.ts
similarity index 100%
rename from frontend/archive/src/utils/api/scheduleApi.ts
rename to frontend/src/utils/api/scheduleApi.ts
diff --git a/frontend/archive/src/utils/api/scheduledUserDishesApi.ts b/frontend/src/utils/api/scheduledUserDishesApi.ts
similarity index 100%
rename from frontend/archive/src/utils/api/scheduledUserDishesApi.ts
rename to frontend/src/utils/api/scheduledUserDishesApi.ts
diff --git a/frontend/archive/src/utils/api/userDishApi.ts b/frontend/src/utils/api/userDishApi.ts
similarity index 100%
rename from frontend/archive/src/utils/api/userDishApi.ts
rename to frontend/src/utils/api/userDishApi.ts
diff --git a/frontend/archive/src/utils/api/usersApi.ts b/frontend/src/utils/api/usersApi.ts
similarity index 100%
rename from frontend/archive/src/utils/api/usersApi.ts
rename to frontend/src/utils/api/usersApi.ts
diff --git a/frontend/archive/src/utils/dateBuilder.ts b/frontend/src/utils/dateBuilder.ts
similarity index 100%
rename from frontend/archive/src/utils/dateBuilder.ts
rename to frontend/src/utils/dateBuilder.ts
diff --git a/frontend/archive/src/utils/scheduleBuilder.ts b/frontend/src/utils/scheduleBuilder.ts
similarity index 100%
rename from frontend/archive/src/utils/scheduleBuilder.ts
rename to frontend/src/utils/scheduleBuilder.ts
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
new file mode 100644
index 0000000..9ee2147
--- /dev/null
+++ b/frontend/tailwind.config.ts
@@ -0,0 +1,148 @@
+import type { Config } from "tailwindcss";
+
+export default {
+  content: [
+    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        // Primary colors (Rose)
+        primary: {
+          DEFAULT: "var(--color-primary)",
+          50: "var(--color-rose-50)",
+          100: "var(--color-primary-100)",
+          200: "var(--color-primary-200)",
+          300: "var(--color-primary-300)",
+          400: "var(--color-primary-400)",
+          500: "var(--color-primary-500)",
+          600: "var(--color-primary-600)",
+          700: "var(--color-primary-700)",
+          800: "var(--color-primary-800)",
+          900: "var(--color-primary-900)",
+          950: "var(--color-rose-950)",
+        },
+        // Secondary colors (Deluge)
+        secondary: {
+          DEFAULT: "var(--color-secondary)",
+          50: "var(--color-deluge-50)",
+          100: "var(--color-secondary-100)",
+          200: "var(--color-secondary-200)",
+          300: "var(--color-secondary-300)",
+          400: "var(--color-secondary-400)",
+          500: "var(--color-secondary-500)",
+          600: "var(--color-secondary-600)",
+          700: "var(--color-secondary-700)",
+          800: "var(--color-secondary-800)",
+          900: "var(--color-secondary-900)",
+          950: "var(--color-deluge-950)",
+        },
+        // Accent Blue (Malibu)
+        accent: {
+          DEFAULT: "var(--color-accent-blue)",
+          50: "var(--color-malibu-50)",
+          100: "var(--color-accent-blue-100)",
+          200: "var(--color-accent-blue-200)",
+          300: "var(--color-accent-blue-300)",
+          400: "var(--color-accent-blue-400)",
+          500: "var(--color-accent-blue-500)",
+          600: "var(--color-accent-blue-600)",
+          700: "var(--color-accent-blue-700)",
+          800: "var(--color-accent-blue-800)",
+          900: "var(--color-accent-blue-900)",
+          950: "var(--color-malibu-950)",
+        },
+        // Accent Yellow (Gamboge)
+        yellow: {
+          DEFAULT: "var(--color-accent-yellow)",
+          50: "var(--color-accent-yellow-50)",
+          100: "var(--color-accent-yellow-100)",
+          200: "var(--color-accent-yellow-200)",
+          300: "var(--color-accent-yellow-300)",
+          400: "var(--color-accent-yellow-400)",
+          500: "var(--color-accent-yellow-500)",
+          600: "var(--color-accent-yellow-600)",
+          700: "var(--color-accent-yellow-700)",
+          800: "var(--color-accent-yellow-800)",
+          900: "var(--color-accent-yellow-900)",
+          950: "var(--color-accent-yellow-950)",
+        },
+        // Grays (Ebony Clay)
+        gray: {
+          DEFAULT: "var(--color-gray-500)",
+          100: "var(--color-gray-100)",
+          200: "var(--color-gray-200)",
+          300: "var(--color-gray-300)",
+          400: "var(--color-gray-400)",
+          500: "var(--color-gray-500)",
+          600: "var(--color-gray-600)",
+          700: "var(--color-gray-700)",
+          800: "var(--color-gray-800)",
+          900: "var(--color-gray-900)",
+          950: "var(--color-ebony-clay-950)",
+        },
+        // Semantic colors
+        danger: {
+          DEFAULT: "var(--color-danger)",
+          50: "var(--color-danger-50)",
+          100: "var(--color-danger-100)",
+          200: "var(--color-danger-200)",
+          300: "var(--color-danger-300)",
+          400: "var(--color-danger-400)",
+          500: "var(--color-danger-500)",
+          600: "var(--color-danger-600)",
+          700: "var(--color-danger-700)",
+          800: "var(--color-danger-800)",
+          900: "var(--color-danger-900)",
+          950: "var(--color-danger-950)",
+        },
+        success: {
+          DEFAULT: "var(--color-success)",
+          50: "var(--color-success-50)",
+          100: "var(--color-success-100)",
+          200: "var(--color-success-200)",
+          300: "var(--color-success-300)",
+          400: "var(--color-success-400)",
+          500: "var(--color-success-500)",
+          600: "var(--color-success-600)",
+          700: "var(--color-success-700)",
+          800: "var(--color-success-800)",
+          900: "var(--color-success-900)",
+          950: "var(--color-success-950)",
+        },
+        warning: {
+          DEFAULT: "var(--color-warning)",
+          50: "var(--color-warning-50)",
+          100: "var(--color-warning-100)",
+          200: "var(--color-warning-200)",
+          300: "var(--color-warning-300)",
+          400: "var(--color-warning-400)",
+          500: "var(--color-warning-500)",
+          600: "var(--color-warning-600)",
+          700: "var(--color-warning-700)",
+          800: "var(--color-warning-800)",
+          900: "var(--color-warning-900)",
+          950: "var(--color-warning-950)",
+        },
+        // Legacy support
+        background: "var(--color-background)",
+        foreground: "var(--color-foreground)",
+      },
+      borderRadius: {
+        DEFAULT: "4px",
+        sm: "2px",
+        md: "4px",
+        lg: "8px",
+        xl: "12px",
+        "2xl": "16px",
+      },
+      fontFamily: {
+        default: ['"Anta"', 'serif'],
+        sans: ['Inter', 'system-ui', 'sans-serif'],
+      },
+    },
+  },
+  plugins: [],
+} satisfies Config;
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index dc391a4..c133409 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -1,27 +1,27 @@
 {
-  "include": [
-    "**/*",
-    "**/.server/**/*",
-    "**/.client/**/*",
-    ".react-router/types/**/*"
-  ],
   "compilerOptions": {
-    "lib": ["DOM", "DOM.Iterable", "ES2022"],
-    "types": ["node", "vite/client"],
-    "target": "ES2022",
-    "module": "ES2022",
-    "moduleResolution": "bundler",
-    "jsx": "react-jsx",
-    "rootDirs": [".", "./.react-router/types"],
-    "baseUrl": ".",
-    "paths": {
-      "~/*": ["./app/*"]
-    },
-    "esModuleInterop": true,
-    "verbatimModuleSyntax": true,
-    "noEmit": true,
-    "resolveJsonModule": true,
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
     "skipLibCheck": true,
-    "strict": true
-  }
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
 }