diff --git a/package-lock.json b/package-lock.json
index 01ce3fc..dea2328 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,7 +16,7 @@
         "@supabase/auth-ui-react": "^0.4.7",
         "@supabase/auth-ui-shared": "^0.1.8",
         "@supabase/ssr": "^0.7.0",
-        "@supabase/supabase-js": "^2.56.1",
+        "@supabase/supabase-js": "^2.90.1",
         "clsx": "^2.1.1",
         "date-fns": "^4.1.0",
         "lucide-react": "^0.542.0",
@@ -1704,12 +1704,15 @@
       }
     },
     "node_modules/@supabase/auth-js": {
-      "version": "2.71.1",
-      "resolved": "https://registry.npmjs.org/@supabase/auth-js/-/auth-js-2.71.1.tgz",
-      "integrity": "sha512-mMIQHBRc+SKpZFRB2qtupuzulaUhFYupNyxqDj5Jp/LyPvcWvjaJzZzObv6URtL/O6lPxkanASnotGtNpS3H2Q==",
+      "version": "2.90.1",
+      "resolved": "https://registry.npmjs.org/@supabase/auth-js/-/auth-js-2.90.1.tgz",
+      "integrity": "sha512-vxb66dgo6h3yyPbR06735Ps+dK3hj0JwS8w9fdQPVZQmocSTlKUW5MfxSy99mN0XqCCuLMQ3jCEiIIUU23e9ng==",
       "license": "MIT",
       "dependencies": {
-        "@supabase/node-fetch": "^2.6.14"
+        "tslib": "2.8.1"
+      },
+      "engines": {
+        "node": ">=20.0.0"
       }
     },
     "node_modules/@supabase/auth-ui-react": {
@@ -1732,7 +1735,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
       "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -1772,45 +1774,42 @@
       }
     },
     "node_modules/@supabase/functions-js": {
-      "version": "2.4.5",
-      "resolved": "https://registry.npmjs.org/@supabase/functions-js/-/functions-js-2.4.5.tgz",
-      "integrity": "sha512-v5GSqb9zbosquTo6gBwIiq7W9eQ7rE5QazsK/ezNiQXdCbY+bH8D9qEaBIkhVvX4ZRW5rP03gEfw5yw9tiq4EQ==",
+      "version": "2.90.1",
+      "resolved": "https://registry.npmjs.org/@supabase/functions-js/-/functions-js-2.90.1.tgz",
+      "integrity": "sha512-x9mV9dF1Lam9qL3zlpP6mSM5C9iqMPtF5B/tU1Jj/F0ufX5mjDf9ghVBaErVxmrQJRL4+iMKWKY2GnODkpS8tw==",
       "license": "MIT",
       "dependencies": {
-        "@supabase/node-fetch": "^2.6.14"
-      }
-    },
-    "node_modules/@supabase/node-fetch": {
-      "version": "2.6.15",
-      "resolved": "https://registry.npmjs.org/@supabase/node-fetch/-/node-fetch-2.6.15.tgz",
-      "integrity": "sha512-1ibVeYUacxWYi9i0cf5efil6adJ9WRyZBLivgjs+AUpewx1F3xPi7gLgaASI2SmIQxPoCEjAsLAzKPgMJVgOUQ==",
-      "license": "MIT",
-      "dependencies": {
-        "whatwg-url": "^5.0.0"
+        "tslib": "2.8.1"
       },
       "engines": {
-        "node": "4.x || >=6.0.0"
+        "node": ">=20.0.0"
       }
     },
     "node_modules/@supabase/postgrest-js": {
-      "version": "1.21.3",
-      "resolved": "https://registry.npmjs.org/@supabase/postgrest-js/-/postgrest-js-1.21.3.tgz",
-      "integrity": "sha512-rg3DmmZQKEVCreXq6Am29hMVe1CzemXyIWVYyyua69y6XubfP+DzGfLxME/1uvdgwqdoaPbtjBDpEBhqxq1ZwA==",
+      "version": "2.90.1",
+      "resolved": "https://registry.npmjs.org/@supabase/postgrest-js/-/postgrest-js-2.90.1.tgz",
+      "integrity": "sha512-jh6vqzaYzoFn3raaC0hcFt9h+Bt+uxNRBSdc7PfToQeRGk7PDPoweHsbdiPWREtDVTGKfu+PyPW9e2jbK+BCgQ==",
       "license": "MIT",
       "dependencies": {
-        "@supabase/node-fetch": "^2.6.14"
+        "tslib": "2.8.1"
+      },
+      "engines": {
+        "node": ">=20.0.0"
       }
     },
     "node_modules/@supabase/realtime-js": {
-      "version": "2.15.4",
-      "resolved": "https://registry.npmjs.org/@supabase/realtime-js/-/realtime-js-2.15.4.tgz",
-      "integrity": "sha512-e/FYIWjvQJHOCNACWehnKvg26zosju3694k0NMUNb+JGLdvHJzEa29ZVVLmawd2kvx4hdbv8mxSqfttRnH3+DA==",
+      "version": "2.90.1",
+      "resolved": "https://registry.npmjs.org/@supabase/realtime-js/-/realtime-js-2.90.1.tgz",
+      "integrity": "sha512-PWbnEMkcQRuor8jhObp4+Snufkq8C6fBp+MchVp2qBPY1NXk/c3Iv3YyiFYVzo0Dzuw4nAlT4+ahuPggy4r32w==",
       "license": "MIT",
       "dependencies": {
-        "@supabase/node-fetch": "^2.6.13",
         "@types/phoenix": "^1.6.6",
         "@types/ws": "^8.18.1",
+        "tslib": "2.8.1",
         "ws": "^8.18.2"
+      },
+      "engines": {
+        "node": ">=20.0.0"
       }
     },
     "node_modules/@supabase/ssr": {
@@ -1835,27 +1834,32 @@
       }
     },
     "node_modules/@supabase/storage-js": {
-      "version": "2.11.0",
-      "resolved": "https://registry.npmjs.org/@supabase/storage-js/-/storage-js-2.11.0.tgz",
-      "integrity": "sha512-Y+kx/wDgd4oasAgoAq0bsbQojwQ+ejIif8uczZ9qufRHWFLMU5cODT+ApHsSrDufqUcVKt+eyxtOXSkeh2v9ww==",
+      "version": "2.90.1",
+      "resolved": "https://registry.npmjs.org/@supabase/storage-js/-/storage-js-2.90.1.tgz",
+      "integrity": "sha512-GHY+Ps/K/RBfRj7kwx+iVf2HIdqOS43rM2iDOIDpapyUnGA9CCBFzFV/XvfzznGykd//z2dkGZhlZZprsVFqGg==",
       "license": "MIT",
       "dependencies": {
-        "@supabase/node-fetch": "^2.6.14"
+        "iceberg-js": "^0.8.1",
+        "tslib": "2.8.1"
+      },
+      "engines": {
+        "node": ">=20.0.0"
       }
     },
     "node_modules/@supabase/supabase-js": {
-      "version": "2.56.1",
-      "resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.56.1.tgz",
-      "integrity": "sha512-cb/kS0d6G/qbcmUFItkqVrQbxQHWXzfRZuoiSDv/QiU6RbGNTn73XjjvmbBCZ4MMHs+5teihjhpEVluqbXISEg==",
+      "version": "2.90.1",
+      "resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.90.1.tgz",
+      "integrity": "sha512-U8KaKGLUgTIFHtwEW1dgw1gK7XrdpvvYo7nzzqPx721GqPe8WZbAiLh/hmyKLGBYQ/mmQNr20vU9tWSDZpii3w==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
-        "@supabase/auth-js": "2.71.1",
-        "@supabase/functions-js": "2.4.5",
-        "@supabase/node-fetch": "2.6.15",
-        "@supabase/postgrest-js": "1.21.3",
-        "@supabase/realtime-js": "2.15.4",
-        "@supabase/storage-js": "^2.10.4"
+        "@supabase/auth-js": "2.90.1",
+        "@supabase/functions-js": "2.90.1",
+        "@supabase/postgrest-js": "2.90.1",
+        "@supabase/realtime-js": "2.90.1",
+        "@supabase/storage-js": "2.90.1"
+      },
+      "engines": {
+        "node": ">=20.0.0"
       }
     },
     "node_modules/@swc/helpers": {
@@ -2248,9 +2252,9 @@
       }
     },
     "node_modules/@types/phoenix": {
-      "version": "1.6.6",
-      "resolved": "https://registry.npmjs.org/@types/phoenix/-/phoenix-1.6.6.tgz",
-      "integrity": "sha512-PIzZZlEppgrpoT2QgbnDU+MMzuR6BbCjllj0bM70lWoejMeNJAxCchxnv7J3XFkI8MpygtRpzXrIlmWUBclP5A==",
+      "version": "1.6.7",
+      "resolved": "https://registry.npmjs.org/@types/phoenix/-/phoenix-1.6.7.tgz",
+      "integrity": "sha512-oN9ive//QSBkf19rfDv45M7eZPi0eEXylht2OLEXicu5b4KoQ1OzXIw+xDSGWxSxe1JmepRR/ZH283vsu518/Q==",
       "license": "MIT"
     },
     "node_modules/@types/react": {
@@ -2259,7 +2263,6 @@
       "integrity": "sha512-cMoR+FoAf/Jyq6+Df2/Z41jISvGZZ2eTlnsaJRptmZ76Caldwy1odD4xTr/gNV9VLj0AWgg/nmkevIyUfIIq5w==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.0.2"
       }
@@ -2270,7 +2273,6 @@
       "integrity": "sha512-qXRuZaOsAdXKFyOhRBg6Lqqc0yay13vN7KrIg4L7N4aaHN68ma9OK3NE1BoDFgFOTfM7zg+3/8+2n8rLUH3OKQ==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "@types/react": "^19.0.0"
       }
@@ -2336,7 +2338,6 @@
       "integrity": "sha512-gTtSdWX9xiMPA/7MV9STjJOOYtWwIJIYxkQxnSV1U3xcE+mnJSH3f6zI0RYP+ew66WSlZ5ed+h0VCxsvdC1jJg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.41.0",
         "@typescript-eslint/types": "8.41.0",
@@ -2854,7 +2855,6 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -3919,7 +3919,6 @@
       "integrity": "sha512-RNCHRX5EwdrESy3Jc9o8ie8Bog+PeYvvSR8sDGoZxNFTvZ4dlxUB3WzQ3bQMztFrSRODGrLLj8g6OFuGY/aiQg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -4094,7 +4093,6 @@
       "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",
@@ -4772,6 +4770,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/iceberg-js": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/iceberg-js/-/iceberg-js-0.8.1.tgz",
+      "integrity": "sha512-1dhVQZXhcHje7798IVM+xoo/1ZdVfzOMIc8/rgVSijRK38EDqOJoGula9N/8ZI5RD8QTxNQtK/Gozpr+qUqRRA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -5927,7 +5934,6 @@
       "resolved": "https://registry.npmjs.org/next-auth/-/next-auth-4.24.11.tgz",
       "integrity": "sha512-pCFXzIDQX7xmHFs4KVH4luCjaCbuPRtZ9oBUjUhOk84mZ9WVPf94n87TxYI4rSRf9HmfHEF8Yep3JrYDVOo3Cw==",
       "license": "ISC",
-      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.20.13",
         "@panva/hkdf": "^1.0.2",
@@ -6315,7 +6321,6 @@
       "resolved": "https://registry.npmjs.org/preact/-/preact-10.27.1.tgz",
       "integrity": "sha512-V79raXEWch/rbqoNc7nT9E4ep7lu+mI3+sBmfRD4i1M73R3WLYcCtdI0ibxGVf4eQL8ZIz2nFacqEC+rmnOORQ==",
       "license": "MIT",
-      "peer": true,
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/preact"
@@ -6396,7 +6401,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
       "integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -6427,7 +6431,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
       "integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "scheduler": "^0.26.0"
       },
@@ -6439,15 +6442,13 @@
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/react-redux": {
       "version": "9.2.0",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
       "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/use-sync-external-store": "^0.0.6",
         "use-sync-external-store": "^1.4.0"
@@ -6566,8 +6567,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
       "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/redux-thunk": {
       "version": "3.1.0",
@@ -7214,8 +7214,7 @@
       "version": "4.1.12",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.12.tgz",
       "integrity": "sha512-DzFtxOi+7NsFf7DBtI3BJsynR+0Yp6etH+nRPTbpWnS2pZBaSksv/JGctNwSWzbFjp0vxSqknaUylseZqMDGrA==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/tailwindcss-animate": {
       "version": "1.0.7",
@@ -7305,7 +7304,6 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -7326,12 +7324,6 @@
         "node": ">=8.0"
       }
     },
-    "node_modules/tr46": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
-      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
-      "license": "MIT"
-    },
     "node_modules/ts-api-utils": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.1.0.tgz",
@@ -7461,7 +7453,6 @@
       "integrity": "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -7623,22 +7614,6 @@
         "d3-timer": "^3.0.1"
       }
     },
-    "node_modules/webidl-conversions": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
-      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
-      "license": "BSD-2-Clause"
-    },
-    "node_modules/whatwg-url": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
-      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
-      "license": "MIT",
-      "dependencies": {
-        "tr46": "~0.0.3",
-        "webidl-conversions": "^3.0.0"
-      }
-    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -7755,9 +7730,9 @@
       }
     },
     "node_modules/ws": {
-      "version": "8.18.3",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz",
-      "integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==",
+      "version": "8.19.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.19.0.tgz",
+      "integrity": "sha512-blAT2mjOEIi0ZzruJfIhb3nps74PRWTCz1IjglWEEpQl5XS/UNama6u2/rjFkDDouqr4L67ry+1aGIALViWjDg==",
       "license": "MIT",
       "engines": {
         "node": ">=10.0.0"
diff --git a/package.json b/package.json
index 4589686..d1589c1 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
     "@supabase/auth-ui-react": "^0.4.7",
     "@supabase/auth-ui-shared": "^0.1.8",
     "@supabase/ssr": "^0.7.0",
-    "@supabase/supabase-js": "^2.56.1",
+    "@supabase/supabase-js": "^2.90.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "lucide-react": "^0.542.0",
diff --git a/postcss.config.mjs b/postcss.config.mjs
index c7bcb4b..a044be1 100644
--- a/postcss.config.mjs
+++ b/postcss.config.mjs
@@ -3,3 +3,13 @@ const config = {
 };
 
 export default config;
+
+// /** @type {import('postcss-load-config').Config} */
+// const config = {
+//   plugins: {
+//     tailwindcss: {},
+//     autoprefixer: {},
+//   },
+// };
+
+// export default config;
diff --git a/src/app/globals.css b/src/app/globals.css
index a1aeb19..d814eac 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,5 +1,17 @@
 @import "tailwindcss";
 @plugin "tailwindcss-animate";
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* OVERRIDE Tailwind to use dark mode via class */
+:root {
+  color-scheme: light;
+}
+
+html.dark {
+  color-scheme: dark;
+}
 
 :root {
   --background: #ffffff;
@@ -237,3 +249,186 @@ body {
     padding: 8rem 0;
   }
 }
+
+/* Light mode variables (default) */
+:root {
+  --bg: #ffffff;
+  --text: #111111;
+  --card: #f4f4f4;
+  --border: #e2e2e2;
+}
+
+/* Dark mode variables */
+.dark {
+  --bg: #0d0d0d;
+  --text: #f5f5f5;
+  --card: #1a1a1a;
+  --border: #333333;
+}
+
+/* Global application */
+body {
+  background-color: var(--bg);
+  color: var(--text);
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+html.dark {
+  background-color: #0f172a; /* slate-900 */
+  color: #f1f5f9; /* slate-100 */
+}
+
+body {
+  transition: background 0.3s, color 0.3s;
+}
+
+/********************************************
+UNIVERSAL DARK MODE STYLES (GLOBAL)
+********************************************/
+
+/* Base */
+html.dark {
+  background-color: #0f172a; /* slate-900 */
+  color-scheme: dark;
+}
+
+html.dark body {
+  background-color: #0f172a;
+  color: #f1f5f9; /* slate-100 */
+}
+
+/********************************************
+HEADERS & NAVBARS 
+********************************************/
+header {
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+html.dark header {
+  background-color: #1e293b; /* slate-800 */
+  color: #f1f5f9;
+  border-color: #334155; /* slate-700 */
+}
+
+/********************************************
+SIDEBARS (ADMIN + TOURIST)
+********************************************/
+.sidebar {
+  background-color: white;
+  color: #0f172a;
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+html.dark .sidebar {
+  background-color: #1e293b; /* slate-800 */
+  color: #f1f5f9;
+}
+
+/********************************************
+CARDS (Any container with .card class)
+********************************************/
+.card {
+  background-color: white;
+  color: #0f172a;
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+html.dark .card {
+  background-color: #1e293b; /* slate-800 */
+  color: #f1f5f9;
+  border-color: #334155;
+}
+
+/********************************************
+INPUTS, TEXTAREAS, SELECTS
+********************************************/
+input,
+textarea,
+select {
+  background-color: white;
+  color: #0f172a;
+  border-color: #cbd5e1; /* slate-300 */
+  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
+}
+
+html.dark input,
+html.dark textarea,
+html.dark select {
+  background-color: #0f172a; /* slate-900 */
+  color: #f1f5f9;
+  border-color: #475569; /* slate-600 */
+}
+
+/********************************************
+TABLES
+********************************************/
+table {
+  color: inherit;
+  background-color: transparent;
+}
+
+html.dark table thead {
+  background-color: #1e293b; /* slate-800 */
+}
+
+html.dark table tbody tr {
+  background-color: #0f172a; /* slate-900 */
+  border-color: #334155;
+}
+
+html.dark table tbody tr:hover {
+  background-color: #1e293b !important; /* slate-800 */
+}
+
+/********************************************
+BUTTONS
+********************************************/
+button {
+  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
+}
+
+/* Green buttons */
+button.bg-green-600,
+button.bg-green-500 {
+  color: white;
+}
+
+html.dark button.bg-green-600,
+html.dark button.bg-green-500 {
+  background-color: #15803d !important; /* green-700 */
+}
+
+/* Neutral buttons */
+html.dark .btn {
+  color: #f1f5f9;
+  background-color: #1e293b;
+  border-color: #334155;
+}
+
+/********************************************
+ICONS
+********************************************/
+html.dark svg {
+  color: #f1f5f9 !important;
+  stroke: #f1f5f9 !important;
+}
+
+/********************************************
+SEARCH BARS
+********************************************/
+html.dark input[type="text"] {
+  background-color: #1e293b;
+  border-color: #334155;
+  color: #f1f5f9;
+}
+
+/********************************************
+DROPDOWNS & POPUPS
+********************************************/
+html.dark .dropdown,
+html.dark .menu,
+html.dark .popup,
+html.dark .modal {
+  background-color: #1e293b !important;
+  color: #f1f5f9 !important;
+  border-color: #334155 !important;
+}
\ No newline at end of file
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 86a39c4..5f32849 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -43,6 +43,23 @@ export default function RootLayout({
         <AuthProvider>
           {children}
         </AuthProvider>
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+              try {
+                const saved = localStorage.getItem('theme');
+                const html = document.documentElement;
+                
+                if (saved === 'dark') {
+                  html.classList.add('dark');
+                } else if (saved === 'light') {
+                  html.classList.remove('dark');
+                }
+              } catch (e) {}
+            `,
+          }}
+        />
+
       </body>
     </html>
   );
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 715de67..db9fe20 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -5,6 +5,7 @@ import { Bell, Search, User, LogOut, Settings, Shield, UserCircle, ChevronDown,
 import { useAuth } from '@/contexts/AuthContext';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
+import ThemeToggle from "./ThemeToggle";
 
 export default function Header() {
   const { user, signOut, isAdmin } = useAuth();
@@ -44,6 +45,10 @@ export default function Header() {
 
         {/* Right side */}
         <div className="flex items-center space-x-4">
+
+          {/* Theme Toggle (Dark/Light Mode) */}
+          <ThemeToggle />
+
           {/* Notifications */}
           <button className="relative p-2 text-gray-400 hover:text-gray-600 transition-colors">
             <Bell className="h-5 w-5" />
diff --git a/src/components/ThemeToggle.tsx b/src/components/ThemeToggle.tsx
new file mode 100644
index 0000000..65cef88
--- /dev/null
+++ b/src/components/ThemeToggle.tsx
@@ -0,0 +1,29 @@
+"use client";
+
+export default function ThemeToggle() {
+    const toggle = () => {
+        const html = document.documentElement;
+
+        if (html.classList.contains("dark")) {
+        html.classList.remove("dark");
+        localStorage.setItem("theme", "light");
+        } else {
+        html.classList.add("dark");
+        localStorage.setItem("theme", "dark");
+        }
+    };
+
+    return (
+        <button
+        onClick={toggle}
+        className="px-3 py-2 rounded-md border"
+        style={{
+            background: "var(--card)",
+            color: "var(--text)",
+            borderColor: "var(--border)",
+        }}
+        >
+        🌙 / ☀️
+        </button>
+    );
+}
diff --git a/src/components/TouristHeader.tsx b/src/components/TouristHeader.tsx
index dfc95a1..72072cf 100644
--- a/src/components/TouristHeader.tsx
+++ b/src/components/TouristHeader.tsx
@@ -5,6 +5,7 @@ import { Bell, User, Search, MapPin, Calendar, Heart, ChevronDown, Key, Settings
 import { useAuth } from '@/contexts/AuthContext';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
+import ThemeToggle from "./ThemeToggle";
 
 export default function TouristHeader() {
   const { user, signOut } = useAuth();
@@ -67,7 +68,7 @@ export default function TouristHeader() {
               <span className="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full"></span>
             </button>
           </div>
-
+          <ThemeToggle />
           {/* User Menu */}
           <div className="flex items-center space-x-4">
             <div className="text-right">