diff --git a/.gitignore b/.gitignore
index 5e4b43eb..e6651368 100644
--- a/.gitignore
+++ b/.gitignore
@@ -405,4 +405,5 @@ src/server/CookingApp/Properties/launchSettings.json
 .prettierrc
 .prettierignore
 src/server/CookingApp/Properties/launchSettings.json
-/src/server/CookingApp
+/src/server/CookingApp/appsettings.Development.json
+/src/server/CookingApp/Properties/launchSettings.json
diff --git a/src/client/CookingAppFE/components/screens/settings/Subscription.js b/src/client/CookingAppFE/components/screens/settings/Subscription.js
index 9a52206d..e1e30b24 100644
--- a/src/client/CookingAppFE/components/screens/settings/Subscription.js
+++ b/src/client/CookingAppFE/components/screens/settings/Subscription.js
@@ -177,7 +177,7 @@ const Subscription = () => {
         </View>
         <View style={tw`w-full items-start px-6`}>
           <Text
-            style={tw`text-2xl font-bold mb-4 ${isDarkTheme ? "text-white" : "text-black"}`}
+            style={tw`text-2xl font-bold mb-4 ${isDarkTheme ? "text-white" : "primaryText"}`}
           >
             Heading for FAQs
           </Text>
diff --git a/src/client/CookingAppReact/package-lock.json b/src/client/CookingAppReact/package-lock.json
index d54549e8..08d76402 100644
--- a/src/client/CookingAppReact/package-lock.json
+++ b/src/client/CookingAppReact/package-lock.json
@@ -35,13 +35,13 @@
         "@types/react": "^18.3.3",
         "@types/react-dom": "^18.3.0",
         "@vitejs/plugin-react": "^4.3.1",
-        "autoprefixer": "^10.4.19",
+        "autoprefixer": "^10.4.20",
         "eslint": "^8.57.0",
         "eslint-plugin-react": "^7.34.3",
         "eslint-plugin-react-hooks": "^4.6.2",
         "eslint-plugin-react-refresh": "^0.4.7",
-        "postcss": "^8.4.40",
-        "tailwindcss": "^3.4.7",
+        "postcss": "^8.4.41",
+        "tailwindcss": "^3.4.10",
         "vite": "^5.3.4"
       }
     },
@@ -1813,9 +1813,9 @@
       }
     },
     "node_modules/autoprefixer": {
-      "version": "10.4.19",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.19.tgz",
-      "integrity": "sha512-BaENR2+zBZ8xXhM4pUaKUxlVdxZ0EZhjvbopwnXmxRUfqDmwSpC2lAi/QXvx7NRdPCo1WKEcEF6mV64si1z4Ew==",
+      "version": "10.4.20",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz",
+      "integrity": "sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==",
       "dev": true,
       "funding": [
         {
@@ -1832,11 +1832,11 @@
         }
       ],
       "dependencies": {
-        "browserslist": "^4.23.0",
-        "caniuse-lite": "^1.0.30001599",
+        "browserslist": "^4.23.3",
+        "caniuse-lite": "^1.0.30001646",
         "fraction.js": "^4.3.7",
         "normalize-range": "^0.1.2",
-        "picocolors": "^1.0.0",
+        "picocolors": "^1.0.1",
         "postcss-value-parser": "^4.2.0"
       },
       "bin": {
@@ -1902,9 +1902,9 @@
       }
     },
     "node_modules/browserslist": {
-      "version": "4.23.2",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.2.tgz",
-      "integrity": "sha512-qkqSyistMYdxAcw+CzbZwlBy8AGmS/eEWs+sEV5TnLRGDOL+C5M2EnH6tlZyg0YoAxGJAFKh61En9BR941GnHA==",
+      "version": "4.23.3",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.3.tgz",
+      "integrity": "sha512-btwCFJVjI4YWDNfau8RhZ+B1Q/VLoUITrm3RlP6y1tYGWIOa+InuYiRGXUBXo8nA1qKmHMyLB/iVQg5TT4eFoA==",
       "dev": true,
       "funding": [
         {
@@ -1921,9 +1921,9 @@
         }
       ],
       "dependencies": {
-        "caniuse-lite": "^1.0.30001640",
-        "electron-to-chromium": "^1.4.820",
-        "node-releases": "^2.0.14",
+        "caniuse-lite": "^1.0.30001646",
+        "electron-to-chromium": "^1.5.4",
+        "node-releases": "^2.0.18",
         "update-browserslist-db": "^1.1.0"
       },
       "bin": {
@@ -1970,9 +1970,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001643",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001643.tgz",
-      "integrity": "sha512-ERgWGNleEilSrHM6iUz/zJNSQTP8Mr21wDWpdgvRwcTXGAq6jMtOUPP4dqFPTdKqZ2wKTdtB+uucZ3MRpAUSmg==",
+      "version": "1.0.30001651",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001651.tgz",
+      "integrity": "sha512-9Cf+Xv1jJNe1xPZLGuUXLNkE1BoDkqRqYyFJ9TDYSqhduqA4hu4oR9HluGoWYQC/aj8WHjsGVV+bwkh0+tegRg==",
       "dev": true,
       "funding": [
         {
@@ -2279,9 +2279,9 @@
       "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.2",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.2.tgz",
-      "integrity": "sha512-kc4r3U3V3WLaaZqThjYz/Y6z8tJe+7K0bbjUVo3i+LWIypVdMx5nXCkwRe6SWbY6ILqLdc1rKcKmr3HoH7wjSQ==",
+      "version": "1.5.7",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.7.tgz",
+      "integrity": "sha512-6FTNWIWMxMy/ZY6799nBlPtF1DFDQ6VQJ7yyDP27SJNt5lwtQ5ufqVvHylb3fdQefvRcgA3fKcFMJi9OLwBRNw==",
       "dev": true
     },
     "node_modules/emoji-regex": {
@@ -4315,9 +4315,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.40",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.40.tgz",
-      "integrity": "sha512-YF2kKIUzAofPMpfH6hOi2cGnv/HrUlfucspc7pDyvv7kGdqXrfj8SCl/t8owkEgKEuu8ZcRjSOxFxVLqwChZ2Q==",
+      "version": "8.4.41",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.41.tgz",
+      "integrity": "sha512-TesUflQ0WKZqAvg52PWL6kHgLKP6xB6heTOdoYM0Wt2UHyxNa4K25EZZMgKns3BH1RLVbZCREPpLY0rhnNoHVQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -5365,9 +5365,9 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "3.4.7",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.7.tgz",
-      "integrity": "sha512-rxWZbe87YJb4OcSopb7up2Ba4U82BoiSGUdoDr3Ydrg9ckxFS/YWsvhN323GMcddgU65QRy7JndC7ahhInhvlQ==",
+      "version": "3.4.10",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.10.tgz",
+      "integrity": "sha512-KWZkVPm7yJRhdu4SRSl9d4AK2wM3a50UsvgHZO7xY77NQr2V+fIrEuoDGQcbvswWvFGbS2f6e+jC/6WJm1Dl0w==",
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
diff --git a/src/client/CookingAppReact/package.json b/src/client/CookingAppReact/package.json
index d614b048..9e5e2ac4 100644
--- a/src/client/CookingAppReact/package.json
+++ b/src/client/CookingAppReact/package.json
@@ -37,13 +37,13 @@
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",
-    "autoprefixer": "^10.4.19",
+    "autoprefixer": "^10.4.20",
     "eslint": "^8.57.0",
     "eslint-plugin-react": "^7.34.3",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.7",
-    "postcss": "^8.4.40",
-    "tailwindcss": "^3.4.7",
+    "postcss": "^8.4.41",
+    "tailwindcss": "^3.4.10",
     "vite": "^5.3.4"
   }
 }
diff --git a/src/client/CookingAppReact/src/App.jsx b/src/client/CookingAppReact/src/App.jsx
index 5958b44b..65c75b0a 100644
--- a/src/client/CookingAppReact/src/App.jsx
+++ b/src/client/CookingAppReact/src/App.jsx
@@ -7,11 +7,13 @@ import Chat from "./pages/chat/Chat";
 import Layout from "./pages/layout/Layout";
 import Recipe from "./pages/recipe/Recipe";
 import Admin from "./pages/admin/Admin";
-import Subscribtion from "./pages/subscribtion/Subscribtion";
+import Subscribtion from "./pages/subscribtion/Subscription";
 import Success from "./pages/subscribtion/Succes";
-import Settings from "./components/userMenu/settings/Settings";
-import SubscribtionDetails from "./pages/subscribtion/SubscribtionDetails";
+import Settings from "./pages/settings/Settings";
+import SubscriptionDetails from "./pages/subscribtion/SubscriptionDetails";
+import Rules from "./pages/rules/Rules";
 import NotFound from "./pages/error/NotFound";
+import AuthorizeRoute from "./pages/authorize/AuthorizeRoute";
 const router = createBrowserRouter([
   {
     path: "/",
@@ -26,11 +28,39 @@ const router = createBrowserRouter([
         ],
       },
       { path: "r/:recipeId", element: <Recipe /> },
-      { path: "admin/dashboard", element: <Admin /> },
-      { path: "subscription", element: <Subscribtion /> },
-      { path: "subscription/manage", element: <SubscribtionDetails /> },
+      {
+        path: "admin/dashboard",
+        element: (
+          <AuthorizeRoute
+            succesPage={<Admin />}
+            requiredRole={"Admin"}
+            unAuthorizedPath={"/"}
+          />
+        ),
+      },
+      {
+        path: "subscription",
+        element: (
+          <AuthorizeRoute
+            succesPage={<Subscribtion />}
+            requiredRole={"Free"}
+            unAuthorizedPath={"/"}
+          />
+        ),
+      },
+      {
+        path: "subscription/manage",
+        element: (
+          <AuthorizeRoute
+            succesPage={<SubscriptionDetails />}
+            requiredRole={"Premium"}
+            unAuthorizedPath={"/"}
+          />
+        ),
+      },
       { path: "success", element: <Success /> },
       { path: "settings", element: <Settings /> },
+      { path: "/rules-and-policies", element: <Rules /> },
     ],
     errorElement: <NotFound />,
   },
diff --git a/src/client/CookingAppReact/src/components/auth/SignOutButton.jsx b/src/client/CookingAppReact/src/components/auth/SignOutButton.jsx
index 210a879c..5dd8c756 100644
--- a/src/client/CookingAppReact/src/components/auth/SignOutButton.jsx
+++ b/src/client/CookingAppReact/src/components/auth/SignOutButton.jsx
@@ -13,18 +13,14 @@ const SignOutButton = () => {
     <button className="flex items-center" title="Sign Out" onClick={() => handleLogout("redirect")}>
       <ArrowRightStartOnRectangleIcon
         className="w-6 h-6 mr-4
-      smallPhone:w-4
-      phone:w-4
-      tablet:w-6
-      web:w-6"
+      sm:w-4
+      md:w-4
+      lg:w-6
+      xl:w-6"
         // color={isDarkTheme ? "white" : "black"} 
         />
       <span
-        className={`
-        smallPhone:text-base
-        phone:text-base
-        tablet:text-lg
-        web:text-lg`}>Sign Out</span>
+        className={`text-primaryText`}>Sign Out</span>
     </button>
   );
 };
diff --git a/src/client/CookingAppReact/src/components/chat/BotResponse.jsx b/src/client/CookingAppReact/src/components/chat/BotResponse.jsx
index 08e7249c..331b7de1 100644
--- a/src/client/CookingAppReact/src/components/chat/BotResponse.jsx
+++ b/src/client/CookingAppReact/src/components/chat/BotResponse.jsx
@@ -20,7 +20,7 @@ export default function BotResponse({ message }) {
     navigate("/subscription");
   }
   return (
-    <li className="w-4/5" key={message.content}>
+    <li className="w-4/5 text-primaryText" key={message.content}>
       <div className="flex flex-col  justify-start items-start gap-1">
         <div className="flex flex-row items-start">
           <img
@@ -29,23 +29,25 @@ export default function BotResponse({ message }) {
             width={40}
             className="border shadow-sm rounded-full p-1 mr-5"
           />
-          <p className="whitespace-pre-wrap">{message.content}</p>
+          <p className="whitespace-pre-wrap text-primaryText">
+            {message.content}
+          </p>
         </div>
         {message.type === "Recipe" && role !== "Free" && (
           <div className="w-full flex justify-center content-center items-center my-5">
             <div
-              className={`w-fit flex flex-row border-2 px-4 py-2 rounded-full bg-orange-200 font-semibold cursor-pointer 
+              className={`w-fit flex flex-row border px-4 py-2 rounded-full bg-primary font-semibold cursor-pointer 
                 ${
                   isPending
                     ? "border-dance animate-border-dance"
-                    : "hover:border-orange-200 hover:scale-105 transition-transform duration-300"
+                    : "hover:scale-105 transition-transform duration-300"
                 } 
                 relative ${isPending && "sparkle"}`}
               onClick={handleClick}
             >
-              <SparklesIcon className="size-6 opacity-70 mr-2" />
+              <SparklesIcon className="size-6 opacity-70 mr-2 text-primaryText" />
               {isPending ? (
-                <span>
+                <span className="text-primaryText">
                   Crafting Meal
                   <span className="dot-1">.</span>
                   <span className="dot-2">.</span>
@@ -60,7 +62,7 @@ export default function BotResponse({ message }) {
         {message.type === "Recipe" && role === "Free" && (
           <div className="w-full flex justify-center content-center items-center my-5">
             <div
-              className={`w-fit flex flex-row border-2 px-4 py-2 rounded-full bg-orange-200 font-semibold cursor-pointer 
+              className={`w-fit flex flex-row border-2 px-4 py-2 rounded-full bg-primary font-semibold cursor-pointer 
                 ${
                   isPending
                     ? "border-dance animate-border-dance"
@@ -70,7 +72,7 @@ export default function BotResponse({ message }) {
               onClick={handleFreeUser}
             >
               <SparklesIcon className="size-6 opacity-70 mr-2" />
-              <p>Get Premium</p>
+              <p className="text-primaryText">Get Premium</p>
             </div>
           </div>
         )}
diff --git a/src/client/CookingAppReact/src/components/chat/ChatInput.jsx b/src/client/CookingAppReact/src/components/chat/ChatInput.jsx
index 584adebd..b72b0c1a 100644
--- a/src/client/CookingAppReact/src/components/chat/ChatInput.jsx
+++ b/src/client/CookingAppReact/src/components/chat/ChatInput.jsx
@@ -12,12 +12,13 @@ export default function ChatInput() {
   const input = useSelector((state) => state.ui.input);
   const fileAttacher = useRef();
   const selectedChat = useSelector((state) => state.user.selectedChat);
+  const isInitial = useSelector((state) => state.ui.isMessageWarningShowed);
   const role = useSelector((state) => state.user.role);
   const { mutate, isPending, error, isError } = useChat();
   const dispatch = useDispatch();
   const [base64Image, setBase64Image] = useState(null);
   useEffect(() => {
-    if (role.limitations.chatGeneration === 10) {
+    if (role.limitations.chatGeneration === 10 && !isInitial) {
       toast(
         (t) => (
           <span>
@@ -27,6 +28,7 @@ export default function ChatInput() {
         ),
         { position: "bottom-right" }
       );
+      dispatch(uiActions.setIsShown(true));
     }
   }, [role.limitations.chatGeneration]);
 
@@ -66,7 +68,6 @@ export default function ChatInput() {
   }
   function handleImageAttachment(event) {
     const file = event.target.files[0];
-    console.log(file);
 
     if (file) {
       const reader = new FileReader();
@@ -98,13 +99,12 @@ export default function ChatInput() {
         });
       }
       sendMessage();
-      console.log(base64Image);
     }
   }, [base64Image]);
 
   return (
-    <section className="flex items-center justify-center mb-5 w-full">
-      <ul className="flex w-4/5 md:w-3/5 lg:w-2/5 items-center bg-gray-200 rounded-full gap-2  py-2 px-4">
+    <section className="flex flex-col items-center justify-center mb-5 w-full gap-1 ">
+      <ul className="flex w-4/5 md:w-3/5 lg:w-2/5 items-center secondary rounded-full gap-2  py-2 px-4 bg-active text-primaryText">
         <li>
           <input
             type="file"
@@ -125,7 +125,7 @@ export default function ChatInput() {
             placeholder="What do you want to cook today?"
             onKeyDown={handleChange}
             onChange={handleChange}
-            className="w-full outline-none bg-gray-200 text-black placeholder-black"
+            className="w-full outline-none bg-active text-primaryText"
           />
         </li>
         <li>
@@ -137,6 +137,10 @@ export default function ChatInput() {
           />
         </li>
       </ul>
+      <p className="hidden md:inline text-sm opacity-80 text-primaryText">
+        Meal Master may occasionally make mistakes. Please verify any important
+        information.
+      </p>
     </section>
   );
 }
diff --git a/src/client/CookingAppReact/src/components/chat/Thinking.jsx b/src/client/CookingAppReact/src/components/chat/Thinking.jsx
index 1599a7e2..88031c06 100644
--- a/src/client/CookingAppReact/src/components/chat/Thinking.jsx
+++ b/src/client/CookingAppReact/src/components/chat/Thinking.jsx
@@ -3,7 +3,7 @@ import React from "react";
 import logo from "/public/logo-master.png";
 import { useSelector } from "react-redux";
 import { FaSpinner } from "react-icons/fa";
-import '../../assets/css/animations.css';
+import "../../assets/css/animations.css";
 
 const Thinking = () => {
   const isDarkTheme = useSelector((state) => state.ui.isDarkTheme);
@@ -12,22 +12,22 @@ const Thinking = () => {
     <div className="w-4/5">
       <div className="flex flex-col justify-start items-start">
         <div className="flex flex-row justify-center h-10 items-center text-center">
-            <img
-              src={logo}
-              alt=""
-              width={40}
-              className="border shadow-sm rounded-full p-1 mr-5"
-            />
-            <span
-              className={`text-sm font-semibold italic ${
-                isDarkTheme ? "text-white" : "text-black"
-              }`}
-            >
-              <span className="dot-1">•</span>
-              <span className="dot-2">•</span>
-              <span className="dot-3">•</span>
-            </span>
-          </div>
+          <img
+            src={logo}
+            alt=""
+            width={40}
+            className="border shadow-sm rounded-full p-1 mr-5"
+          />
+          <span
+            className={`text-sm font-semibold italic ${
+              isDarkTheme ? "text-white" : "primaryText"
+            }`}
+          >
+            <span className="dot-1">•</span>
+            <span className="dot-2">•</span>
+            <span className="dot-3">•</span>
+          </span>
+        </div>
       </div>
     </div>
   );
diff --git a/src/client/CookingAppReact/src/components/chat/UserMessage.jsx b/src/client/CookingAppReact/src/components/chat/UserMessage.jsx
index 93865838..99eb8a68 100644
--- a/src/client/CookingAppReact/src/components/chat/UserMessage.jsx
+++ b/src/client/CookingAppReact/src/components/chat/UserMessage.jsx
@@ -2,7 +2,7 @@ export default function UserMessage({ message }) {
   return (
     <li className="w-4/5 flex justify-end">
       {message.type === "Text" && (
-        <p className="bg-gray-100 rounded-full px-6 py-3 text-lg font-normal">
+        <p className="bg-active text-primaryText rounded-full px-6 py-3 text-lg font-normal">
           {message.content}
         </p>
       )}
diff --git a/src/client/CookingAppReact/src/components/landingpage/ui/downloadmobile.jsx b/src/client/CookingAppReact/src/components/landingpage/ui/downloadmobile.jsx
index ca6b9401..26963ecb 100644
--- a/src/client/CookingAppReact/src/components/landingpage/ui/downloadmobile.jsx
+++ b/src/client/CookingAppReact/src/components/landingpage/ui/downloadmobile.jsx
@@ -1,28 +1,38 @@
 import PhoneImg from "../../../assets/landing/iphone4.png";
 import QrImage from "../../../assets/landing/qrcode.png";
 
-
-export default function DownloadMobile(){
-    return (
-    <section className="md:h-[64rem] bg-gray-100 p-2 md:p-16">
-        <section className="bg-orange-400 h-full w-full rounded-3xl flex flex-col p-2 md:p-12 text-center gap-6">
-          <div className="h-full w-full rounded-3xl bg-white p-3 md:p-16 flex flex-col md:flex-row justify-start items-center">
-            <div className="md:w-2/3 md:h-full h-2/3 flex justify-center items-center">
-              <div className="lg:bg-orange-400 w-full lg:h-3/4 lg:w-1/2  rounded-full flex justify-center items-center">
-                <img src={PhoneImg} alt="" className="object-cover md:w-4/5 rounded-3xl" />
-              </div>
+export default function DownloadMobile() {
+  return (
+    <section className="md:h-[64rem] bg-base p-2 md:p-16">
+      <section className="bg-orange-400 h-full w-full rounded-3xl flex flex-col p-2 md:p-12 text-center gap-6">
+        <div className="h-full w-full rounded-3xl bg-white p-3 md:p-16 flex flex-col md:flex-row justify-start items-center">
+          <div className="md:w-2/3 md:h-full h-2/3 flex justify-center items-center">
+            <div className="lg:bg-orange-400 w-full lg:h-3/4 lg:w-1/2  rounded-full flex justify-center items-center">
+              <img
+                src={PhoneImg}
+                alt=""
+                className="object-cover md:w-4/5 rounded-3xl"
+              />
             </div>
-            <div className="md:w-1/3 md:h-full h-1/3 md:pt-24 flex flex-col justify-start gap-12 text-center">
-              <h2 className="text-black text-6xl font-bold text-center"><span className="text-orange-400">DOWNLOAD</span><br/> OUR APP</h2>
-              <p className="text-black">Cooking has never been easier. Download the MealMaster app on your mobile device today and have a personal chef right in your pocket. Available on:</p>
-              <div className="h-full p-5">
-                <div className="w-1/3">
+          </div>
+          <div className="md:w-1/3 md:h-full h-1/3 md:pt-24 flex flex-col justify-start gap-12 text-center">
+            <h2 className="primaryText text-6xl font-bold text-center">
+              <span className="text-orange-400">DOWNLOAD</span>
+              <br /> OUR APP
+            </h2>
+            <p className="primaryText">
+              Cooking has never been easier. Download the MealMaster app on your
+              mobile device today and have a personal chef right in your pocket.
+              Available on:
+            </p>
+            <div className="h-full p-5">
+              <div className="w-1/3">
                 <img src={QrImage} alt="" className="rounded-xl" />
-                </div>
               </div>
             </div>
           </div>
-        </section>
+        </div>
       </section>
-      );
-}
\ No newline at end of file
+    </section>
+  );
+}
diff --git a/src/client/CookingAppReact/src/components/landingpage/ui/footer.jsx b/src/client/CookingAppReact/src/components/landingpage/ui/footer.jsx
index c9fc981c..f8683ac8 100644
--- a/src/client/CookingAppReact/src/components/landingpage/ui/footer.jsx
+++ b/src/client/CookingAppReact/src/components/landingpage/ui/footer.jsx
@@ -2,11 +2,13 @@ import logo from "../../../../public/icon2.png";
 
 export default function Footer() {
   return (
-    <footer className="bg-gray-100 h-32 py-6 flex justify-center">
-          <div className="w-1/3 flex flex-col text-center md:justify-end items-center gap-4 h-full">
-          <img src={logo} alt="" className="object-cover size-11" />
-          <p className="text-orange-400 font-normal">&copy; MealMaster - All rights reserved.</p>
-          </div>
+    <footer className="bg-base h-32 py-6 flex justify-center">
+      <div className="w-1/3 flex flex-col text-center md:justify-end items-center gap-4 h-full">
+        <img src={logo} alt="" className="object-cover size-11" />
+        <p className="text-orange-400 font-normal">
+          &copy; MealMaster - All rights reserved.
+        </p>
+      </div>
     </footer>
   );
 }
diff --git a/src/client/CookingAppReact/src/components/landingpage/ui/header.jsx b/src/client/CookingAppReact/src/components/landingpage/ui/header.jsx
index eeaca9e4..b695fba6 100644
--- a/src/client/CookingAppReact/src/components/landingpage/ui/header.jsx
+++ b/src/client/CookingAppReact/src/components/landingpage/ui/header.jsx
@@ -3,15 +3,13 @@ import Logo from "./logo";
 import { SignInButton } from "../../auth/SignInButton";
 
 export default function Header() {
-  
-  
   return (
-    <header className="bg-gray-100 py-4 px-6 md:px-32 flex flex-row justify-between">
-          <div className="flex flex-1 items-center gap-2 md:gap-5">
-            <Logo />
-            <h1 className="font-bold text-2xl text-black">MEALMASTER</h1>
-          </div>
-          <SignInButton />
+    <header className="bg-base py-4 px-6 md:px-32 flex flex-row justify-between">
+      <div className="flex flex-1 items-center gap-2 md:gap-5">
+        <Logo />
+        <h1 className="font-bold text-2xl primaryText">MEALMASTER</h1>
+      </div>
+      <SignInButton />
     </header>
   );
 }
diff --git a/src/client/CookingAppReact/src/components/landingpage/ui/title.jsx b/src/client/CookingAppReact/src/components/landingpage/ui/title.jsx
index a7835708..c11b3341 100644
--- a/src/client/CookingAppReact/src/components/landingpage/ui/title.jsx
+++ b/src/client/CookingAppReact/src/components/landingpage/ui/title.jsx
@@ -3,11 +3,10 @@ import { SparklesIcon } from "@heroicons/react/24/outline";
 import PhoneImg from "../../../assets/landing/iphone4.png";
 import QrImage from "../../../assets/landing/qrcode.png";
 
-
 export default function Title() {
   return (
     <section className="relative">
-      <section className="bg-gray-100">
+      <section className="bg-base">
         {/* <PageIllustration /> */}
         <div className="mx-auto max-w-6xl px-4 sm:px-6">
           <div className="pb-12 pt-32 md:pb-20 md:pt-40">
@@ -16,7 +15,7 @@ export default function Title() {
                 className="mb-6 md:text-8xl text-6xl font-bold" //border-y  [border-image:linear-gradient(to_right,transparent,theme(colors.slate.300/.8),transparent)1]
               >
                 MEAL PLANNING MADE
-                <br/>
+                <br />
                 <span className="text-[#fb923c]">SIMPLE</span>
               </h1>
               <div className="mx-auto max-w-3xl">
diff --git a/src/client/CookingAppReact/src/components/navbar/Navbar.jsx b/src/client/CookingAppReact/src/components/navbar/Navbar.jsx
index d2d62ef7..fb0208bb 100644
--- a/src/client/CookingAppReact/src/components/navbar/Navbar.jsx
+++ b/src/client/CookingAppReact/src/components/navbar/Navbar.jsx
@@ -17,9 +17,11 @@ export default function Navbar() {
   const role = useSelector((state) => state.user.role.type);
   const sidebarOpen = useSelector((state) => state.ui.sidebarOpen);
   const recipesOpen = useSelector((state) => state.ui.recipesOpen);
-  const [dropDownOpen, setDropDownOpen] = useState(false);
-
+  const dropDownOpen = useSelector((state) => state.ui.dropdownOpen);
   function handleSidebar() {
+    if (recipesOpen && window.innerWidth < 1300) {
+      dispatch(uiActions.toggleRecipes());
+    }
     dispatch(uiActions.openSidebar());
   }
   function handleRecipes() {
@@ -28,14 +30,15 @@ export default function Navbar() {
   function handleNewChat() {
     dispatch(uiActions.clearActive());
     dispatch(userActions.emptyChat());
+
     navigate("/");
   }
   const toggleDropDown = () => {
-    setDropDownOpen(!dropDownOpen);
+    dispatch(uiActions.toggleDropdown());
   };
 
   return (
-    <nav className="">
+    <nav className="text-primaryText ">
       <ul className={`flex flex-row w-full py-3 justify-between sticky`}>
         <li
           className={`flex flex-row pl-6 items-center gap-2 ${
@@ -43,25 +46,25 @@ export default function Navbar() {
           }`}
         >
           <Bars3BottomLeftIcon
-            className="size-10 rounded-xl hover:bg-gray-100 hover:cursor-pointer p-2"
+            className="size-10 rounded-xl hover:bg-base hover:cursor-pointer p-2"
             onClick={handleSidebar}
           />
           <ChatBubbleOvalLeftEllipsisIcon
-            className="size-10 hidden sm:block rounded-xl hover:bg-gray-100 hover:cursor-pointer p-2"
+            className="size-10 hidden sm:block rounded-xl hover:bg-base hover:cursor-pointer p-2"
             onClick={handleNewChat}
           />
-          <h2 className="font-semibold text-xl flex flex-row justify-center content-center text-center h-full">
-            <span className="text-center px-2 py-1">Meal Master </span>
+          <h2 className="font-semibold text-sm xs:text-xl flex flex-row justify-center content-center text-center h-full">
+            <span className="text-center px-2 py-2 xs:py-1">Meal Master </span>
             <span
               className={`${
-                role === "Free" ? "bg-gray-200" : "bg-orange-200"
-              } text-gray-900 rounded-full px-4 py-1`}
+                role === "Free" ? "bg-base " : "bg-primary"
+              } text-center  rounded-full flex justify-center items-center px-4 py-1`}
             >
               {role}
             </span>
           </h2>
           {/* <h2 className="font-semibold text-xl flex flex-row justify-center items-center text-center content-center gap-2">
-            <div className="flex justify-center items-center text-center border-2 border-orange-300 text-black p-3 font-semibold text-xl rounded-full w-fit h-10">
+            <div className="flex justify-center items-center text-center border-2 border-orange-300 primaryText p-3 font-semibold text-xl rounded-full w-fit h-10">
                 Meal Master
             </div>
           </h2> */}
@@ -72,17 +75,19 @@ export default function Navbar() {
           }`}
         >
           <h2 className="font-semibold text-xl flex flex-row justify-center content-center text-center">
-            <span className="text-center px-2 py-1">Meal Master </span>
+            <span className="text-center px-2 py-1 text-primaryText">
+              Meal Master{" "}
+            </span>
             <span
               className={`${
-                role === "Free" ? "bg-gray-200" : "bg-orange-200"
-              } text-gray-900 rounded-full px-4 py-1`}
+                role === "Free" ? "bg-base" : "bg-primary"
+              } text-primaryText rounded-full px-4 py-1`}
             >
               {role}
             </span>
           </h2>
           {/* <h2 className="font-semibold text-xl flex flex-row justify-center items-center text-center content-center gap-2">
-            <div className="flex justify-center items-center text-center border-2 border-orange-300 text-black p-3 font-semibold text-xl rounded-full w-fit h-10">
+            <div className="flex justify-center items-center text-center border-2 border-orange-300 primaryText p-3 font-semibold text-xl rounded-full w-fit h-10">
                 Meal Master
             </div>
           </h2> */}
@@ -93,13 +98,16 @@ export default function Navbar() {
           }`}
         >
           <ClipboardDocumentCheckIcon
-            className="size-10 rounded-xl hidden sm:block hover:bg-gray-100 hover:cursor-pointer p-2"
+            className="size-10 rounded-xl hidden sm:block hover:bg-base hover:cursor-pointer p-2"
             onClick={handleRecipes}
           />
           <div className="relative">
             <UserIcon
-              className="size-10 rounded-xl hover:bg-gray-100 hover:cursor-pointer p-2"
-              onClick={toggleDropDown}
+              className="size-10 rounded-xl hover:bg-base hover:cursor-pointer p-2"
+              onClick={(e) => {
+                e.stopPropagation();
+                toggleDropDown();
+              }}
             />
             <UserMenu isOpen={dropDownOpen} toggleDropDown={toggleDropDown} />
           </div>
diff --git a/src/client/CookingAppReact/src/components/recipes/MyRecipes.jsx b/src/client/CookingAppReact/src/components/recipes/MyRecipes.jsx
index 1fa633a5..0c18ed66 100644
--- a/src/client/CookingAppReact/src/components/recipes/MyRecipes.jsx
+++ b/src/client/CookingAppReact/src/components/recipes/MyRecipes.jsx
@@ -9,12 +9,16 @@ import { useEffect, useState, useRef } from "react";
 import { Skeleton } from "../ui/skeleton";
 import useFirstPageRecipes from "@/hooks/useFirstPageRecipes";
 import "../../assets/css/animations.css";
+import UserMenu from "../userMenu/UserMenu";
+
 export default function MyRecipes() {
   const isOpen = useSelector((state) => state.ui.recipesOpen);
   const recipesState = useSelector((state) => state.ui.filteredRecipes);
   const [search, setSearch] = useState({ isTyping: false, message: "" });
   const timeoutRef = useRef();
+  const dropDownOpen = useSelector((state) => state.ui.dropdownOpen);
   const dispatch = useDispatch();
+
   const {
     getFirstPageRecipes,
     loadMoreRecipes,
@@ -24,9 +28,11 @@ export default function MyRecipes() {
   function handleRecipes() {
     dispatch(uiActions.toggleRecipes());
   }
+  const toggleDropDown = () => {
+    dispatch(uiActions.toggleDropdown());
+  };
   useEffect(() => {
     if (isOpen) {
-      console.log("open");
       async function getFirstPageAsync() {
         const token = await getToken();
         const decoded = jwtDecode(token);
@@ -51,7 +57,6 @@ export default function MyRecipes() {
     });
   }
   function handleChange(event) {
-    console.log(event.target.value);
     setSearch({ isTyping: true, message: event.target.value });
     if (timeoutRef.current) {
       clearTimeout(timeoutRef.current);
@@ -74,7 +79,6 @@ export default function MyRecipes() {
     }
 
     return () => {
-      console.log("clear");
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
       }
@@ -82,21 +86,28 @@ export default function MyRecipes() {
   }, [search.message]);
   return (
     <section
-      className={`bg-gray-100 flex flex-col flex-shrink-0 ${
+      className={`bg-base flex flex-col flex-shrink-0 ${
         isOpen ? "visible w-screen md:w-[25rem] md:relative" : "invisible w-0"
       }  h-screen duration-300`}
     >
       <header
-        className={`flex flex-row justify-between items-center px-3 py-3 ${
+        className={`flex flex-row justify-between items-center px-3 py-3 text-primaryText ${
           isOpen ? "" : "hidden"
         }`}
       >
         <ChevronLeftIcon
-          className="size-10  rounded-xl border border-gray-100  hover:border hover:border-gray-200 hover:cursor-pointer p-2"
+          className="size-10  rounded-xl border border-transparent   hover:border hover:border-active hover:cursor-pointer p-2"
           onClick={handleRecipes}
         />
-        <h1 className="text-lg">My Recipes</h1>
-        <UserIcon className="size-10 invisible md:visible rounded-xl border border-gray-100  hover:border hover:border-gray-200 hover:cursor-pointer p-2" />
+        <h1 className="text-lg text-primaryText">My Recipes</h1>
+        <UserIcon
+          className="size-10 invisible md:visible rounded-xl border border-transparent  hover:border hover:border-active hover:cursor-pointer p-2"
+          onClick={(e) => {
+            e.stopPropagation();
+            toggleDropDown();
+          }}
+        />
+        <UserMenu isOpen={dropDownOpen} toggleDropDown={toggleDropDown} />
       </header>
 
       <section
@@ -107,7 +118,7 @@ export default function MyRecipes() {
         <input
           type="text"
           onChange={handleChange}
-          className="bg-white w-full h-3/4 rounded-xl outline-none px-6 py-3"
+          className="bg-secondary text-primaryText w-full h-3/4 rounded-xl outline-none px-6 py-3"
           placeholder="Looking for your favourite recipe?"
         />
       </section>
@@ -170,16 +181,20 @@ export default function MyRecipes() {
         {recipesState.recipes.length > 0 &&
           !gettingRecipes &&
           !search.isTyping &&
-          recipesState.recipes.map((recipe) => <RecipeCard recipe={recipe} />)}
+          recipesState.recipes.map((recipe) => (
+            <RecipeCard recipe={recipe} key={recipe.id} />
+          ))}
         {recipesState.page < recipesState.totalPages && !gettingMoreRecipes && (
-          <button onClick={loadMore}>Load more...</button>
+          <button onClick={loadMore} className="text-primaryText">
+            Load more...
+          </button>
         )}
         {recipesState.recipes.length === 0 && (
-          <p>You dont't have any recipes </p>
+          <p className="text-primaryText">You dont't have any recipes </p>
         )}
 
         {gettingMoreRecipes && (
-          <span>
+          <span className="text-primaryText">
             Loading
             <span className="dot-1">.</span>
             <span className="dot-2">.</span>
diff --git a/src/client/CookingAppReact/src/components/recipes/RecipeCard.jsx b/src/client/CookingAppReact/src/components/recipes/RecipeCard.jsx
index edb149f4..622c2186 100644
--- a/src/client/CookingAppReact/src/components/recipes/RecipeCard.jsx
+++ b/src/client/CookingAppReact/src/components/recipes/RecipeCard.jsx
@@ -1,18 +1,21 @@
+import { uiActions } from "@/store/uiSlice";
 import { ClockIcon } from "@heroicons/react/24/outline";
 import { UserGroupIcon } from "@heroicons/react/24/outline";
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
 
 export default function RecipeCard({ recipe }) {
   const isOpen = useSelector((state) => state.ui.recipesOpen);
+  const dispatch = useDispatch();
   let navigate = useNavigate();
   function handleClick() {
+    dispatch(uiActions.closeRecipes());
     navigate(`/r/${recipe.id}`);
   }
   return (
     <li
       key={recipe.id}
-      className="group flex flex-col bg-white w-full h-72 rounded-2xl pb-2 border hover:cursor-pointer transition"
+      className="group flex flex-col text-primaryText bg-secondary w-full h-72 rounded-2xl pb-2  hover:cursor-pointer transition"
       onClick={handleClick}
     >
       <img
@@ -24,7 +27,7 @@ export default function RecipeCard({ recipe }) {
       ></img>
       <div className="min-w-[250px] max-w-[360px]">
         <h2 className="font-medium px-4 py-2 text-xl overflow-hidden whitespace-nowrap text-ellipsis">
-            {recipe.title}
+          {recipe.title}
         </h2>
       </div>
       <div className="w-full px-8 mb-3 text-gray-500 transition-all invisible group-hover:visible overflow-hidden">
@@ -33,7 +36,9 @@ export default function RecipeCard({ recipe }) {
       <section className="flex flex-row justify-between mb-2">
         <div className="flex w-full flex-row justify-start gap-2 ms-4">
           <ClockIcon className="size-6" />
-          <p className="w-4/5 whitespace-nowrap text-ellipsis overflow-hidden">{recipe.duration}</p>
+          <p className="w-4/5 whitespace-nowrap text-ellipsis overflow-hidden">
+            {recipe.duration}
+          </p>
         </div>
         <div className="flex w-24 flex-row justify-end gap-2 me-4">
           <UserGroupIcon className="size-6" />
diff --git a/src/client/CookingAppReact/src/components/settings/DietaryPreferences.jsx b/src/client/CookingAppReact/src/components/settings/DietaryPreferences.jsx
new file mode 100644
index 00000000..4776ac2f
--- /dev/null
+++ b/src/client/CookingAppReact/src/components/settings/DietaryPreferences.jsx
@@ -0,0 +1,109 @@
+import { useState } from "react";
+import { IoClose } from "react-icons/io5";
+export default function DietaryPreferences({
+  possibleAllergens,
+  error,
+  foodError,
+  allergens,
+  removeAllergen,
+  alergenInput,
+  setAlergenInput,
+  handleRemoveFoodPreference,
+  handleAddAlergenPressEnter,
+  handleAddAlergen,
+  foodPreferences,
+  foodPreferenceInput,
+  setFoodPreferenceInput,
+  handleAddDislikeFoodsPressEnter,
+  handleAddFoodPreference,
+}) {
+  return (
+    <div className="flex flex-col md:flex-row">
+      <div className="md:w-1/2 mb-10 pb-6 m-1 bg-secondary rounded-xl border shadow-sm py-4 px-4">
+        <h2 className="text-lg font-semibold mb-4 primaryText">Allergens</h2>
+        {allergens.length > 0 ? (
+          <div className="flex flex-wrap mb-4">
+            {allergens.map((alergen, index) => (
+              <button
+                key={index}
+                onClick={() => removeAllergen(index)}
+                className="border flex items-center rounded-full px-3 py-1 mx-1 mb-2 border-gray-300 bg-secondary primaryText shadow-md hover:border-gray-400 hover:bg-base hover:shadow-lg"
+              >
+                {alergen}
+                <IoClose className="ml-2" />
+              </button>
+            ))}
+          </div>
+        ) : (
+          <p className="text-gray-500 text-center mb-4">None added</p>
+        )}
+        <input
+          list="allergens"
+          value={alergenInput}
+          onChange={(e) => setAlergenInput(e.target.value)}
+          onKeyDown={handleAddAlergenPressEnter}
+          className="border rounded-lg px-4 py-2 mb-2 w-full border-gray-300 bg-secondary primaryText"
+          placeholder="Add your allergens"
+        />
+        <datalist id="allergens">
+          {possibleAllergens.map((alergen, index) => (
+            <option key={index} value={alergen} />
+          ))}
+        </datalist>
+        {error && <p className="text-red-500 text-center">{error}</p>}
+        <button
+          onClick={handleAddAlergen}
+          className="w-full flex items-center justify-center mt-4 transition duration-300 ease-in-out"
+        >
+          <div className="secondary font-semibold border rounded-full py-2 px-5">
+            <p className="text-primaryText text-center text-base font-medium">
+              Add Allergen
+            </p>
+          </div>
+        </button>
+      </div>
+      <div className="md:w-1/2 mb-10 pb-6 bg-secondary border shadow-sm m-1 rounded-xl py-4 px-4">
+        <h2 className="text-lg font-semibold mb-4 primaryText">
+          Disliked Foods
+        </h2>
+        {foodPreferences.length > 0 ? (
+          <div className="flex flex-wrap mb-4">
+            {foodPreferences.map((preference, index) => (
+              <button
+                key={index}
+                onClick={() => handleRemoveFoodPreference(index)}
+                className="border flex items-center rounded-full px-3 py-1 mx-1 mb-2 border-gray-300 bg-secondary primaryText shadow-md hover:border-gray-400 hover:bg-base hover:shadow-lg"
+              >
+                {preference}
+                <IoClose className="ml-2" />
+              </button>
+            ))}
+          </div>
+        ) : (
+          <p className="text-gray-500 text-center mb-4">None added</p>
+        )}
+        <input
+          type="text"
+          value={foodPreferenceInput}
+          onChange={(e) => setFoodPreferenceInput(e.target.value)}
+          onKeyDown={handleAddDislikeFoodsPressEnter}
+          className="border rounded-lg px-4 py-2 mb-2 w-full border-gray-300 bg-secondary primaryText"
+          placeholder="Add your disliked foods"
+        />
+        {foodError && (
+          <p className="text-red-500 mb-2 text-center">{foodError}</p>
+        )}
+        <button
+          onClick={handleAddFoodPreference}
+          className="w-full flex items-center justify-center mt-4 transition duration-300 ease-in-out"
+        >
+          <div className="secondary font-semibold border rounded-full py-2 px-5">
+            <p className="text-primaryText text-center text-base font-medium">
+              Add Food
+            </p>
+          </div>
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/client/CookingAppReact/src/components/settings/FoodPreferences.jsx b/src/client/CookingAppReact/src/components/settings/FoodPreferences.jsx
new file mode 100644
index 00000000..92badb94
--- /dev/null
+++ b/src/client/CookingAppReact/src/components/settings/FoodPreferences.jsx
@@ -0,0 +1,25 @@
+import { useState } from "react";
+
+export default function FoodPreferences({
+  selectedPreference,
+  setSelectedPreference,
+}) {
+  return (
+    <>
+      <h1 className="font-semibold text-lg mb-4 mt-4">Food Preferences</h1>
+      <div className="md:w-1/2 pr-2 bg-secondary">
+        <select
+          onChange={(e) => setSelectedPreference(e.target.value)}
+          className="border rounded-lg px-4 py-3 m-1 w-full text-sm shadow-sm bg-secondary"
+        >
+          <option disabled selected>
+            {`Current: ${selectedPreference ? selectedPreference : ""}`}
+          </option>
+          <option value="none">None</option>
+          <option value="vegetarian">Vegetarian</option>
+          <option value="vegan">Vegan</option>
+        </select>
+      </div>
+    </>
+  );
+}
diff --git a/src/client/CookingAppReact/src/components/settings/Preferences.jsx b/src/client/CookingAppReact/src/components/settings/Preferences.jsx
new file mode 100644
index 00000000..62c16c2a
--- /dev/null
+++ b/src/client/CookingAppReact/src/components/settings/Preferences.jsx
@@ -0,0 +1,161 @@
+import useFoodPreferences from "@/hooks/useFoodPreferences";
+import DietaryPreferences from "./DietaryPreferences";
+import FoodPreferences from "./FoodPreferences";
+import UserInterface from "./UserInterface";
+import { useEffect, useState } from "react";
+import { getToken } from "@/msal/msal";
+import { jwtDecode } from "jwt-decode";
+import { useSelect } from "@material-tailwind/react";
+import useFetchUserStatus from "../../hooks/useFetchUserStatus";
+import { useSelector } from "react-redux";
+import { useDispatch } from "react-redux";
+import { checkUserStatus } from "@/http/user";
+export default function Preferences() {
+  const possibleAllergens = [
+    "Peanuts",
+    "Soy",
+    "Egg",
+    "Milk",
+    "Fish",
+    "Wheat",
+    "Shellfish",
+    "Tree nuts",
+    "Sesame",
+    "Mustard",
+    "Celery",
+    "Molluscs",
+    "Sulphites",
+    "Nuts",
+    "Ketchup",
+    "Onion",
+    "Garlic",
+  ];
+  const dietaryPreferences = useSelector(
+    (state) => state.user.dietaryPreferences
+  );
+  const [foodPreferenceInput, setFoodPreferenceInput] = useState("");
+  const [selectedPreference, setSelectedPreference] = useState("none");
+
+  const [allergens, setAlergens] = useState([]);
+  const [alergenInput, setAlergenInput] = useState("");
+  const [foodPreferences, setFoodPreferences] = useState([]);
+  const [foodError, setFoodError] = useState("");
+  const [error, setError] = useState("");
+  const { save, isSaving } = useFoodPreferences();
+  useEffect(() => {
+    setAlergens(dietaryPreferences.allergies);
+    setFoodPreferences(dietaryPreferences.avoidedFoods);
+    setSelectedPreference(dietaryPreferences.dietaryPreference);
+  }, [dietaryPreferences]);
+  const handleRemoveAlergen = (indexToRemove) => {
+    setAlergens((prevAlergens) =>
+      prevAlergens.filter((_, index) => index !== indexToRemove)
+    );
+    setError("");
+  };
+  const handleRemoveFoodPreference = (indexToRemove) => {
+    setFoodPreferences((prevFoodPreferences) =>
+      prevFoodPreferences.filter((_, index) => index !== indexToRemove)
+    );
+    setFoodError("");
+  };
+
+  const handleAddAlergen = () => {
+    const normalizedInput = alergenInput.trim().toLowerCase();
+    const normalizedAllergens = possibleAllergens.map((alergen) =>
+      alergen.toLowerCase()
+    );
+
+    if (alergenInput.trim() !== "") {
+      if (!normalizedAllergens.includes(normalizedInput)) {
+        setError("Allergen not found.");
+      } else if (allergens.length >= 12) {
+        setError("You can add a maximum of 12 allergens.");
+      } else if (
+        allergens
+          .map((alergen) => alergen.toLowerCase())
+          .includes(normalizedInput)
+      ) {
+        setError("Allergen already added.");
+      } else {
+        setAlergens((prevAlergens) => [...prevAlergens, alergenInput.trim()]);
+        setAlergenInput("");
+        setError("");
+      }
+    }
+  };
+
+  const handleAddFoodPreference = () => {
+    if (foodPreferenceInput.trim() !== "") {
+      if (foodPreferences.includes(foodPreferenceInput.trim())) {
+        setFoodError("Food preference already added.");
+      } else {
+        setFoodPreferences((prevFoodPreferences) => [
+          ...prevFoodPreferences,
+          foodPreferenceInput.trim(),
+        ]);
+        setFoodPreferenceInput("");
+        setFoodError("");
+      }
+    }
+  };
+
+  const handleAddAlergenPressEnter = (event) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      handleAddAlergen();
+    }
+  };
+
+  const handleAddDislikeFoodsPressEnter = (event) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      handleAddFoodPreference();
+    }
+  };
+  async function savePreferences() {
+    const token = await getToken();
+    const decoded = jwtDecode(token);
+    save({
+      token: token,
+      userId: decoded.sub,
+      allergies: allergens,
+      avoidedfoods: foodPreferences,
+      dietaryPreference: selectedPreference,
+    });
+  }
+  return (
+    <div className="flex flex-col mt-4 ">
+      <UserInterface />
+      <FoodPreferences
+        selectedPreference={selectedPreference}
+        setSelectedPreference={setSelectedPreference}
+      />
+      <DietaryPreferences
+        possibleAllergens={possibleAllergens}
+        error={error}
+        allergens={allergens}
+        alergenInput={alergenInput}
+        handleAddFoodPreference={handleAddFoodPreference}
+        foodError={foodError}
+        foodPreferenceInput={foodPreferenceInput}
+        removeAllergen={handleRemoveAlergen}
+        setAlergenInput={setAlergenInput}
+        handleAddAlergenPressEnter={handleAddAlergenPressEnter}
+        handleAddAlergen={handleAddAlergen}
+        foodPreferences={foodPreferences}
+        handleRemoveFoodPreference={handleRemoveFoodPreference}
+        setFoodPreferenceInput={setFoodPreferenceInput}
+        handleAddDislikeFoodsPressEnter={handleAddDislikeFoodsPressEnter}
+      />
+      <div className="flex justify-center w-full">
+        <button
+          className="bg-primary font-semibold border rounded-full py-2 px-5"
+          onClick={savePreferences}
+        >
+          Save Changes
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/client/CookingAppReact/src/components/settings/UserInterface.jsx b/src/client/CookingAppReact/src/components/settings/UserInterface.jsx
new file mode 100644
index 00000000..e7a8d8c8
--- /dev/null
+++ b/src/client/CookingAppReact/src/components/settings/UserInterface.jsx
@@ -0,0 +1,61 @@
+import useUiPreferences from "@/hooks/useUiPreferences";
+import { getToken } from "@/msal/msal";
+import { uiActions } from "@/store/uiSlice";
+import { jwtDecode } from "jwt-decode";
+import { useSelector } from "react-redux";
+import { useDispatch } from "react-redux";
+export default function UserInterface() {
+  const theme = useSelector((state) => state.ui.theme);
+  const language = useSelector((state) => state.ui.lang);
+
+  const { changeUi } = useUiPreferences();
+  async function langChange(event) {
+    const token = await getToken();
+    const decoded = jwtDecode(token);
+    changeUi({
+      token: token,
+      userId: decoded.sub,
+      theme: theme,
+      language: event.target.value,
+    });
+  }
+  async function themeChange(event) {
+    const token = await getToken();
+    const decoded = jwtDecode(token);
+    changeUi({
+      token: token,
+      userId: decoded.sub,
+      theme: event.target.value,
+      language: language,
+    });
+  }
+  return (
+    <>
+      <h1 className="font-semibold text-lg mb-4 bg-secondary">
+        Language and Theme
+      </h1>
+      <div className="flex flex-col md:flex-row bg-secondary">
+        <select
+          className="border rounded-lg px-4 py-3 m-1 md:w-1/2 text-sm shadow-sm bg-secondary"
+          onChange={langChange}
+        >
+          <option value="none" disabled selected>
+            {`Current: ${language}`}
+          </option>
+          <option value="English">English</option>
+          <option value="German">German</option>
+        </select>
+        <select
+          className="border rounded-lg m-1 px-4 py-3 md:w-1/2 text-sm shadow-sm bg-secondary"
+          onChange={themeChange}
+        >
+          <option value="none" disabled selected>
+            {`Current: ${theme}`}
+          </option>
+          <option value="Light">Light</option>
+          <option value="Dark">Dark</option>
+        </select>
+      </div>
+    </>
+  );
+}
diff --git a/src/client/CookingAppReact/src/components/sidebar/ChatItem.jsx b/src/client/CookingAppReact/src/components/sidebar/ChatItem.jsx
index 27dd19ee..b1b4929d 100644
--- a/src/client/CookingAppReact/src/components/sidebar/ChatItem.jsx
+++ b/src/client/CookingAppReact/src/components/sidebar/ChatItem.jsx
@@ -14,14 +14,16 @@ export default function ChatItem({ title, id }) {
   return (
     <div
       className={`rounded-lg h-10 my-5 ${
-        activeChat && activeChat === id ? "bg-gray-200" : "hover:bg-gray-200 bg-transparent"
+        activeChat && activeChat === id
+          ? "bg-active"
+          : "hover:bg-active bg-transparent"
       } hover:cursor-pointer flex flex-row justify-between items-center text-center group transition-colors duration-1000"`}
     >
-      <h5 className="px-5 py-2 whitespace-nowrap text-ellipsis overflow-hidden">
+      <h5 className="px-5 text-primaryText py-2 whitespace-nowrap text-ellipsis overflow-hidden">
         {title}
       </h5>
       <TrashIcon
-        className="ml-1 mr-5 size-6 text-gray-600 hidden group-hover:inline-block"
+        className="ml-1 mr-5 size-6 text-primaryText hidden group-hover:inline-block"
         onClick={handleDeletion}
       />
     </div>
diff --git a/src/client/CookingAppReact/src/components/sidebar/Sidebar.jsx b/src/client/CookingAppReact/src/components/sidebar/Sidebar.jsx
index 5979550e..937c0985 100644
--- a/src/client/CookingAppReact/src/components/sidebar/Sidebar.jsx
+++ b/src/client/CookingAppReact/src/components/sidebar/Sidebar.jsx
@@ -9,7 +9,7 @@ import { BanknotesIcon } from "@heroicons/react/24/outline";
 import { useDispatch } from "react-redux";
 import { jwtDecode } from "jwt-decode";
 import { getToken } from "../../msal/msal";
-import { uiActions } from "../../store/uiSlice";
+import uiSlice, { uiActions } from "../../store/uiSlice";
 import ChatItem from "./ChatItem";
 import { useEffect } from "react";
 import useChatHistory from "../../hooks/useChatHistory";
@@ -24,7 +24,7 @@ export default function Sidebar() {
   const chatPage = useSelector((state) => state.user.chatHistory.page);
   const chatHistory = useSelector((state) => state.user.chatHistory.chats);
   const totalPages = useSelector((state) => state.user.chatHistory.totalPages);
-
+  let role = useSelector((state) => state.user.role.type);
   const selectChat = useSelectChat();
   const dispatch = useDispatch();
   const navigate = useNavigate();
@@ -37,16 +37,20 @@ export default function Sidebar() {
         const decoded = jwtDecode(token);
         getFirstPage({ token: token, userId: decoded.sub, pageIndex: 1 });
       }
-      console.log(chatHistory);
       getFirstPageAsync();
     }
   }, [isOpen]);
   function handleChatSelection(chatId) {
+    if (window.innerWidth < 1300) {
+      dispatch(uiActions.closeSidebar());
+    }
+
     navigate(`c/${chatId}`);
   }
   function handleNewChat() {
     dispatch(uiActions.clearActive());
     dispatch(userActions.emptyChat());
+
     navigate("/");
   }
   const sortedChatHistory = chatHistory
@@ -64,18 +68,28 @@ export default function Sidebar() {
     dispatch(uiActions.closeSidebar());
   }
   function handleClickDashboard() {
+    if (window.innerWidth < 1300) {
+      dispatch(uiActions.closeSidebar());
+    }
+
     navigate("/admin/dashboard");
   }
   function handleClickSubscribtion() {
+    if (window.innerWidth < 1300) {
+      dispatch(uiActions.closeSidebar());
+    }
+
     navigate("/subscription");
   }
   function handleClickYourSubscribtion() {
+    if (window.innerWidth < 1300) {
+      dispatch(uiActions.closeSidebar());
+    }
+
     navigate("/subscription/manage");
   }
 
   function isAdmin() {
-    let role = useSelector((state) => state.user.role.type);
-
     if (role === "Admin") {
       return true;
     } else {
@@ -84,8 +98,6 @@ export default function Sidebar() {
   }
 
   function isPremium() {
-    let role = useSelector((state) => state.user.role.type);
-
     if (role === "Premium") {
       return true;
     } else {
@@ -100,7 +112,7 @@ export default function Sidebar() {
   }
   return (
     <section
-      className={`bg-gray-100 flex flex-col flex-shrink-0   ${
+      className={`bg-base flex flex-col flex-shrink-0  text-primaryText   ${
         isOpen
           ? "visible w-screen absolute z-10 md:w-80 md:relative md:z-0"
           : "invisible w-0"
@@ -108,28 +120,34 @@ export default function Sidebar() {
     >
       <header className="flex justify-between px-4 py-4">
         <Bars3BottomLeftIcon
-          className="size-10  rounded-xl border border-gray-100  hover:border hover:border-gray-200 hover:cursor-pointer p-2"
+          className="size-10  rounded-xl border border-base hover:border hover:border-gray-200 hover:cursor-pointer p-2"
           onClick={handleClick}
         />
         <ChatBubbleOvalLeftEllipsisIcon
-          className="size-10 rounded-xl border border-gray-100  hover:border hover:border-gray-200 hover:cursor-pointer p-2"
+          className="size-10 rounded-xl border border-base  hover:border hover:border-gray-200 hover:cursor-pointer p-2"
           onClick={handleNewChat}
         />
       </header>
-      <button className={`${isPremium() ? "hidden" : ""}`} onClick={handleClickSubscribtion}>
-        <h5 className="hover:bg-gray-300 mt-5 rounded-lg m-3 px-5 py-2 flex flex-row justify-start items-center hover:cursor-pointer isolate bg-white/20 shadow-sm ring-1 ring-black/5">
+      <button
+        className={`${isPremium() || !isOpen ? "hidden" : ""}`}
+        onClick={handleClickSubscribtion}
+      >
+        <h5 className="hover:bg-active mt-5 rounded-lg m-3 px-5 py-2 flex flex-row justify-start items-center hover:cursor-pointer isolate bg-secondary shadow-sm ring-1 ring-black/5">
           <BanknotesIcon className="size-5 mr-5" />
           Get Premium
         </h5>
       </button>
-      <button className={`${isPremium() ? "" : "hidden"}`} onClick={handleClickYourSubscribtion}>
-        <h5 className="hover:bg-gray-300 mt-5 rounded-lg m-3 px-5 py-2 flex flex-row justify-start items-center hover:cursor-pointer isolate bg-white/20 shadow-sm ring-1 ring-black/5">
+      <button
+        className={`${!isPremium() || !isOpen ? "hidden" : ""}`}
+        onClick={handleClickYourSubscribtion}
+      >
+        <h5 className="hover:bg-active mt-5 rounded-lg m-3 px-5 py-2 flex flex-row justify-start items-center hover:cursor-pointer isolate bg-secondary shadow-sm ring-1 ring-black/5">
           <BanknotesIcon className="size-5 mr-5" />
-          Your Subscribtion
+          Your Subscription
         </h5>
       </button>
       <button
-        className={`${isAdmin() ? "hi :)" : "hidden"}`}
+        className={`${!isAdmin() || !isOpen ? "hidden" : ""}`}
         onClick={handleClickDashboard}
       >
         <h5 className="hover:bg-gray-300 mt-5 rounded-lg m-3 px-5 py-2 flex flex-row justify-start items-center hover:cursor-pointer isolate bg-white/20 shadow-sm ring-1 ring-black/5">
@@ -169,7 +187,7 @@ export default function Sidebar() {
               sortedChatHistory[sectionTitle] && (
                 <Fragment key={sectionTitle}>
                   <h3
-                    className=" text-md font-light tracking-normal"
+                    className=" text-md text-primaryText font-light tracking-normal"
                     key={sectionTitle}
                   >
                     {sectionTitle}
diff --git a/src/client/CookingAppReact/src/components/subscriptions/SubscriptionPlanFree.jsx b/src/client/CookingAppReact/src/components/subscriptions/SubscriptionPlanFree.jsx
index a7e0442e..0d3a0ce5 100644
--- a/src/client/CookingAppReact/src/components/subscriptions/SubscriptionPlanFree.jsx
+++ b/src/client/CookingAppReact/src/components/subscriptions/SubscriptionPlanFree.jsx
@@ -1,12 +1,12 @@
-import React from 'react';
+import React from "react";
 import MealMaster from "/public/logo-master.png";
-import { CheckIcon } from '@heroicons/react/24/outline';
-import { XMarkIcon } from '@heroicons/react/24/outline';
+import { CheckIcon } from "@heroicons/react/24/outline";
+import { XMarkIcon } from "@heroicons/react/24/outline";
 
 export const SubscriptionPlanFree = () => {
   return (
     <div className="bg-white p-2 border rounded-2xl w-[20rem] h-[32rem] flex flex-col justify-between items-center">
-      <div className="bg-gray-200 text-black text-center p-2 w-full uppercase font-bold rounded-xl">
+      <div className="active primaryText text-center p-2 w-full uppercase font-bold rounded-xl">
         Free
       </div>
       <div className="flex flex-col w-full justify-start items-center">
@@ -15,21 +15,31 @@ export const SubscriptionPlanFree = () => {
         </p>
         <img src={MealMaster} alt="" width={100} className="rounded-2xl" />
         <ul className="mt-4 text-gray-600">
-          <li className="flex flex-row text-center justify-start items-center"><CheckIcon className="size-5 font-bold text-green mr-2"/> Little amount of messages</li>
-          <li className="flex flex-row text-center justify-start items-center"><CheckIcon className="size-5 font-bold text-green mr-2"/> Image recognition</li>
-          <li className="flex flex-row text-center justify-start items-center"><XMarkIcon className="size-5 font-bold text-red-500 mr-2"/> Dietary Preferences</li>
-          <li className="flex flex-row text-center justify-start items-center"><XMarkIcon className="size-5 font-bold text-red-500 mr-2"/> Recipe Generation</li>
+          <li className="flex flex-row text-center justify-start items-center">
+            <CheckIcon className="size-5 font-bold text-green mr-2" /> Little
+            amount of messages
+          </li>
+          <li className="flex flex-row text-center justify-start items-center">
+            <CheckIcon className="size-5 font-bold text-green mr-2" /> Image
+            recognition
+          </li>
+          <li className="flex flex-row text-center justify-start items-center">
+            <XMarkIcon className="size-5 font-bold text-red-500 mr-2" /> Dietary
+            Preferences
+          </li>
+          <li className="flex flex-row text-center justify-start items-center">
+            <XMarkIcon className="size-5 font-bold text-red-500 mr-2" /> Recipe
+            Generation
+          </li>
         </ul>
       </div>
       <div className="mt-4 flex justify-between items-center border p-3 rounded">
-          <span className='text-gray-400 font-bold'>Limited Test Period</span>
-        </div>
-        <p className="text-xs text-gray-800 text-center mt-1">
-          Not featured
-        </p>
-      <button className="w-full text-gray-500 bg-gray-100 py-3 mt-6 font-bold rounded-xl cursor-default">
+        <span className="text-gray-400 font-bold">Limited Test Period</span>
+      </div>
+      <p className="text-xs text-gray-800 text-center mt-1">Not featured</p>
+      <button className="w-full text-gray-500 bg-base py-3 mt-6 font-bold rounded-xl cursor-default">
         Current Plan
       </button>
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/src/client/CookingAppReact/src/components/subscriptions/SubscriptionPlanPremium.jsx b/src/client/CookingAppReact/src/components/subscriptions/SubscriptionPlanPremium.jsx
index aa29d53c..58e8bb0b 100644
--- a/src/client/CookingAppReact/src/components/subscriptions/SubscriptionPlanPremium.jsx
+++ b/src/client/CookingAppReact/src/components/subscriptions/SubscriptionPlanPremium.jsx
@@ -1,11 +1,11 @@
-import React from 'react';
+import React from "react";
 import MealMaster from "/public/logo-master.png";
-import { CheckIcon } from '@heroicons/react/24/outline';
+import { CheckIcon } from "@heroicons/react/24/outline";
 
 export const SubscriptionPlanPremium = () => {
   return (
     <div className="bg-slate-50 p-2 border rounded-2xl w-[25rem] h-[32rem] flex flex-col justify-between items-center ml-20">
-      <div className="bg-orange-400 text-black text-center p-2 w-full uppercase font-bold rounded-xl">
+      <div className="bg-primary primaryText text-center p-2 w-full uppercase font-bold rounded-xl">
         Unlimited
       </div>
       <div className="flex flex-col w-full justify-start items-center">
@@ -13,24 +13,39 @@ export const SubscriptionPlanPremium = () => {
           For those who want to live healthy and meaningfully.
         </p>
         <img src={MealMaster} alt="" width={100} className="rounded-2xl" />
-        
+
         <ul className="mt-4 text-gray-600">
-          <li className="flex flex-row text-center justify-start items-center"><CheckIcon className="size-5 font-bold text-green mr-2"/> Unlimited messages</li>
-          <li className="flex flex-row text-center justify-start items-center"><CheckIcon className="size-5 font-bold text-green mr-2"/> Unlimited chats</li>
-          <li className="flex flex-row text-center justify-start items-center"><CheckIcon className="size-5 font-bold text-green mr-2"/> Recipe Generation</li>
-          <li className="flex flex-row text-center justify-start items-center"><CheckIcon className="size-5 font-bold text-green mr-2"/> Customizable dietary options</li>
-          <li className="flex flex-row text-center justify-start items-center"><CheckIcon className="size-5 font-bold text-green mr-2"/> Free cancellation</li>
+          <li className="flex flex-row text-center justify-start items-center">
+            <CheckIcon className="size-5 font-bold text-green mr-2" /> Unlimited
+            messages
+          </li>
+          <li className="flex flex-row text-center justify-start items-center">
+            <CheckIcon className="size-5 font-bold text-green mr-2" /> Unlimited
+            chats
+          </li>
+          <li className="flex flex-row text-center justify-start items-center">
+            <CheckIcon className="size-5 font-bold text-green mr-2" /> Recipe
+            Generation
+          </li>
+          <li className="flex flex-row text-center justify-start items-center">
+            <CheckIcon className="size-5 font-bold text-green mr-2" />{" "}
+            Customizable dietary options
+          </li>
+          <li className="flex flex-row text-center justify-start items-center">
+            <CheckIcon className="size-5 font-bold text-green mr-2" /> Free
+            cancellation
+          </li>
         </ul>
       </div>
       <div className="mt-4 flex justify-between items-center border p-3 rounded">
-          <span className='text-red-500 font-bold'>8.99 euro/month</span>
-        </div>
-        <p className="text-xs text-gray-800 text-center mt-1">
-          Old price: 12.99$
-        </p>
-      <button className="w-full text-black bg-gray-200 py-3 mt-6 font-bold rounded-xl">
+        <span className="text-red-500 font-bold">8.99 euro/month</span>
+      </div>
+      <p className="text-xs text-gray-800 text-center mt-1">
+        Old price: 12.99$
+      </p>
+      <button className="w-full primaryText active py-3 mt-6 font-bold rounded-xl">
         Start a subscribtion
       </button>
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/src/client/CookingAppReact/src/components/ui/skeleton.jsx b/src/client/CookingAppReact/src/components/ui/skeleton.jsx
index 543cfc2d..15af7557 100644
--- a/src/client/CookingAppReact/src/components/ui/skeleton.jsx
+++ b/src/client/CookingAppReact/src/components/ui/skeleton.jsx
@@ -1,14 +1,15 @@
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-function Skeleton({
-  className,
-  ...props
-}) {
+function Skeleton({ className, ...props }) {
   return (
-    (<div
-      className={cn("animate-pulse rounded-md bg-gray-100 dark:bg-gray-800", className)}
-      {...props} />)
+    <div
+      className={cn(
+        "animate-pulse rounded-md bg-base dark:bg-gray-800",
+        className
+      )}
+      {...props}
+    />
   );
 }
 
-export { Skeleton }
+export { Skeleton };
diff --git a/src/client/CookingAppReact/src/components/userMenu/UserMenu.jsx b/src/client/CookingAppReact/src/components/userMenu/UserMenu.jsx
index c0bb8b5e..7f0351c3 100644
--- a/src/client/CookingAppReact/src/components/userMenu/UserMenu.jsx
+++ b/src/client/CookingAppReact/src/components/userMenu/UserMenu.jsx
@@ -1,62 +1,106 @@
-import "tailwindcss/tailwind.css";
-import React from "react";
+import React, { useEffect, useRef } from "react";
 import { useNavigate } from "react-router-dom";
-import { useSelector } from "react-redux";
-import { Cog6ToothIcon } from "@heroicons/react/24/outline";
-import { CreditCardIcon } from "@heroicons/react/24/outline";
+import { useDispatch, useSelector } from "react-redux";
+import { uiActions } from "@/store/uiSlice";
+import {
+  Cog6ToothIcon,
+  CreditCardIcon,
+  ExclamationTriangleIcon,
+} from "@heroicons/react/24/outline";
 import SignOutButton from "../auth/SignOutButton";
 
 const UserMenu = ({ isOpen, toggleDropDown }) => {
-    const navigate = useNavigate();
-    const isDarkTheme = useSelector(state => state.ui.isDarkTheme);
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
+  const isDarkTheme = useSelector((state) => state.ui.isDarkTheme);
+  let role = useSelector((state) => state.user.role.type);
 
-    if (!isOpen) return null;
+  const menuRef = useRef(null);
 
-    return (
-        <div
-            onClick={event => event.stopPropagation()}
-            className={`absolute right-2 top-12 w-44 
-            ${isDarkTheme ? "bg-[#2F2F2F]" : "bg-white"} 
-            border border-gray-300 rounded-3xl shadow-sm z-20`}
-        >
-            <div className="flex flex-col p-4">
-                <div className="flex flex-col items-start w-full space-y-2">
-                    <div
-                        className={`flex items-center w-full cursor-pointer p-2  
-                        ${isDarkTheme ? 'hover:bg-[#424242]' : 'hover:bg-gray-100'} hover:rounded`}
-                        onClick={() => { navigate("/subscription"); toggleDropDown(); }}
-                        title="Subscription"
-                    >
-                        <CreditCardIcon
-                            className="w-6 h-6 mr-4"
-                            color={isDarkTheme ? "white" : "black"} 
-                        />
-                        <span className={`${isDarkTheme ? "text-white" : "text-black"}`}>
-                            Subscription
-                        </span>
-                    </div>
-                    <div
-                        className={`flex items-center w-full cursor-pointer p-2 
-                        ${isDarkTheme ? 'hover:bg-[#424242]' : 'hover:bg-gray-100'} hover:rounded`}
-                        onClick={() => { navigate("/settings"); toggleDropDown(); }}
-                        title="Settings"
-                    >
-                        <Cog6ToothIcon
-                            className="w-6 h-6 mr-4"
-                            color={isDarkTheme ? "white" : "black"} 
-                        />
-                        <span className={`${isDarkTheme ? "text-white" : "text-black"}`}>
-                            Settings
-                        </span>
-                    </div>
-                </div>
-                <hr className={`w-full mt-2 mb-2 ${isDarkTheme ? 'border-[#3C3C3C]' : 'border-gray-200'}`} />
-                <div className={`p-2 ${isDarkTheme ? 'hover:bg-[#424242]' : 'hover:bg-gray-100'} hover:rounded`}>
-                    <SignOutButton/>
-                </div>
-            </div>
+  useEffect(() => {
+    function handleClickOutside(event) {
+      if (menuRef.current && !menuRef.current.contains(event.target)) {
+        toggleDropDown();
+      }
+    }
+    if (isOpen) {
+      document.addEventListener("click", handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener("click", handleClickOutside);
+    };
+  }, [toggleDropDown]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div
+      ref={menuRef}
+      onClick={(e) => e.stopPropagation()}
+      className={`absolute right-2 top-12 w-56 
+      ${isDarkTheme ? "bg-[#2F2F2F]" : "bg-secondary"} 
+      border rounded-3xl shadow-sm z-20 text-primaryText`}
+    >
+      <div className="flex flex-col p-4">
+        <div className="flex flex-col items-start w-full space-y-2">
+          <div
+            className={`flex items-center w-full cursor-pointer p-2  
+            ${
+              isDarkTheme ? "hover:bg-[#424242]" : "hover:bg-base"
+            } hover:rounded`}
+            onClick={() => {
+              dispatch(uiActions.toggleDropdown());
+              if (role === "Premium") {
+                navigate("/subscription/manage");
+              } else {
+                navigate("/subscription");
+              }
+            }}
+            title="Subscription"
+          >
+            <CreditCardIcon className="w-6 h-6 mr-4" />
+            <span>Subscription</span>
+          </div>
+          <div
+            className={`flex items-center w-full cursor-pointer p-2 
+            hover:bg-base
+            hover:rounded`}
+            onClick={() => {
+              dispatch(uiActions.toggleDropdown());
+              navigate("/settings");
+            }}
+            title="Settings"
+          >
+            <Cog6ToothIcon className="w-6 h-6 mr-4" />
+            <span>Settings</span>
+          </div>
+          <div
+            className={`flex items-center w-full cursor-pointer p-2 
+            ${
+              isDarkTheme ? "hover:bg-[#424242]" : "hover:bg-base"
+            } hover:rounded`}
+            onClick={() => {
+              dispatch(uiActions.toggleDropdown());
+              navigate("/rules-and-policies");
+            }}
+            title="Rules & Policies"
+          >
+            <ExclamationTriangleIcon className="w-6 h-6 mr-4" />
+            <span>Rules & Policies</span>
+          </div>
+        </div>
+        <hr
+          className={`w-full mt-2 mb-2`}
+        />
+        <div className={`flex items-center w-full cursor-pointer p-2 
+            ${
+              isDarkTheme ? "hover:bg-[#424242]" : "hover:bg-base"
+            } hover:rounded`}>
+          <SignOutButton />
         </div>
-    );
+      </div>
+    </div>
+  );
 };
 
 export default UserMenu;
diff --git a/src/client/CookingAppReact/src/components/userMenu/settings/foodPreferences/FoodPreferences.jsx b/src/client/CookingAppReact/src/components/userMenu/settings/foodPreferences/FoodPreferences.jsx
index 79002e4e..7215b5db 100644
--- a/src/client/CookingAppReact/src/components/userMenu/settings/foodPreferences/FoodPreferences.jsx
+++ b/src/client/CookingAppReact/src/components/userMenu/settings/foodPreferences/FoodPreferences.jsx
@@ -9,7 +9,25 @@ import { IoClose } from "react-icons/io5";
 const FoodPreferences = () => {
   // const { theme } = useTheme();
   const isDarkTheme = "white" === "dark";
-  const possibleAllergens = ["Peanuts", "Soy", "Egg", "Milk", "Fish", "Wheat", "Shellfish", "Tree nuts", "Sesame", "Mustard", "Celery", "Molluscs", "Sulphites", "Nuts", "Ketchup", "Onion", "Garlic"];
+  const possibleAllergens = [
+    "Peanuts",
+    "Soy",
+    "Egg",
+    "Milk",
+    "Fish",
+    "Wheat",
+    "Shellfish",
+    "Tree nuts",
+    "Sesame",
+    "Mustard",
+    "Celery",
+    "Molluscs",
+    "Sulphites",
+    "Nuts",
+    "Ketchup",
+    "Onion",
+    "Garlic",
+  ];
   const [alergens, setAlergens] = useState([]);
   const [foodPreferences, setFoodPreferences] = useState([]);
   const [alergenInput, setAlergenInput] = useState("");
@@ -20,17 +38,23 @@ const FoodPreferences = () => {
 
   const handleAddAlergen = () => {
     const normalizedInput = alergenInput.trim().toLowerCase();
-    const normalizedAllergens = possibleAllergens.map(alergen => alergen.toLowerCase());
+    const normalizedAllergens = possibleAllergens.map((alergen) =>
+      alergen.toLowerCase()
+    );
 
     if (alergenInput.trim() !== "") {
       if (!normalizedAllergens.includes(normalizedInput)) {
         setError("Allergen not found.");
       } else if (alergens.length >= 12) {
         setError("You can add a maximum of 12 allergens.");
-      } else if (alergens.map(alergen => alergen.toLowerCase()).includes(normalizedInput)) {
+      } else if (
+        alergens
+          .map((alergen) => alergen.toLowerCase())
+          .includes(normalizedInput)
+      ) {
         setError("Allergen already added.");
       } else {
-        setAlergens(prevAlergens => [...prevAlergens, alergenInput.trim()]);
+        setAlergens((prevAlergens) => [...prevAlergens, alergenInput.trim()]);
         setAlergenInput("");
         setError("");
       }
@@ -42,44 +66,50 @@ const FoodPreferences = () => {
       if (foodPreferences.includes(foodPreferenceInput.trim())) {
         setFoodError("Food preference already added.");
       } else {
-        setFoodPreferences(prevFoodPreferences => [...prevFoodPreferences, foodPreferenceInput.trim()]);
+        setFoodPreferences((prevFoodPreferences) => [
+          ...prevFoodPreferences,
+          foodPreferenceInput.trim(),
+        ]);
         setFoodPreferenceInput("");
         setFoodError("");
       }
     }
   };
 
-  const handleRemoveAlergen = indexToRemove => {
-    setAlergens(prevAlergens => prevAlergens.filter((_, index) => index !== indexToRemove));
+  const handleRemoveAlergen = (indexToRemove) => {
+    setAlergens((prevAlergens) =>
+      prevAlergens.filter((_, index) => index !== indexToRemove)
+    );
     setError("");
   };
 
-  const handleRemoveFoodPreference = indexToRemove => {
-    setFoodPreferences(prevFoodPreferences => prevFoodPreferences.filter((_, index) => index !== indexToRemove));
+  const handleRemoveFoodPreference = (indexToRemove) => {
+    setFoodPreferences((prevFoodPreferences) =>
+      prevFoodPreferences.filter((_, index) => index !== indexToRemove)
+    );
     setFoodError("");
   };
 
   const handleSavePreferences = async () => {
-    const preferences = { alergens, foodPreferences, selectedPreference };
-    console.log("Saving preferences:", preferences);
-
     try {
-      await new Promise(resolve => setTimeout(resolve, 1000));
+      await new Promise((resolve) => setTimeout(resolve, 1000));
 
       alert("Success! Your food preferences have been saved successfully!");
     } catch (error) {
-      alert("Error! There was an error saving your preferences. Please try again.");
+      alert(
+        "Error! There was an error saving your preferences. Please try again."
+      );
     }
   };
 
-  const handleAddAlergenPressEnter = event => {
+  const handleAddAlergenPressEnter = (event) => {
     if (event.key === "Enter") {
       event.preventDefault();
       handleAddAlergen();
     }
   };
 
-  const handleAddDislikeFoodsPressEnter = event => {
+  const handleAddDislikeFoodsPressEnter = (event) => {
     if (event.key === "Enter") {
       event.preventDefault();
       handleAddFoodPreference();
@@ -93,20 +123,33 @@ const FoodPreferences = () => {
     sm:w-full
     md:w-full
     lg:w-2/3
-    xl:w-2/3`
-      }>
+    xl:w-2/3`}
+    >
       <div className="flex flex-col items-center">
-        <h1 className={`text-xl font-semibold mb-4 ${isDarkTheme ? "text-white" : "text-black"}`}>Food Preferences</h1>
+        <h1
+          className={`text-xl font-semibold mb-4 ${
+            isDarkTheme ? "text-white" : "primaryText"
+          }`}
+        >
+          Food Preferences
+        </h1>
 
         <div
-          className={`w-full mb-6 pb-6 ${isDarkTheme
-            ? "bg-gray-800"
-            : "bg-gray-200"} rounded-xl py-4 px-4 
+          className={`w-full mb-6 pb-6 ${
+            isDarkTheme ? "bg-gray-800" : "active"
+          } rounded-xl py-4 px-4 
         sm:py-5 sm:px-5 sm:text-sm
         md:py-6 md:px-6 md:text-sm
         lgt:py-7 lgt:px-7 lgt:text-base
-        xl:py-8 xl:px-8 xl:text-base`}>
-          <h2 className={`text-lg font-semibold mb-4 ${isDarkTheme ? "text-white" : "text-black"}`}>Allergens</h2>
+        xl:py-8 xl:px-8 xl:text-base`}
+        >
+          <h2
+            className={`text-lg font-semibold mb-4 ${
+              isDarkTheme ? "text-white" : "primaryText"
+            }`}
+          >
+            Allergens
+          </h2>
           {alergens.length > 0 ? (
             <div className="flex flex-wrap mb-4">
               {alergens.map((alergen, index) => (
@@ -117,122 +160,171 @@ const FoodPreferences = () => {
                     md:px-3 md:py-1.5 md:text-sm 
                     lgt:px-4 lgt:py-2 lgt:text-base 
                     xl:px-3 xl:py-1 xl:text-base
-                    ${isDarkTheme
-                      ? "border-blue-500 text-blue-300 bg-gray-800 hover:bg-gray-700 shadow-xl hover:shadow-2xl"
-                      : "border-gray-300 bg-white text-black shadow-md hover:border-gray-400 hover:bg-gray-100 hover:shadow-lg"}`}>
+                    ${
+                      isDarkTheme
+                        ? "border-blue-500 text-blue-300 bg-gray-800 hover:bg-gray-700 shadow-xl hover:shadow-2xl"
+                        : "border-gray-300 bg-secondary primaryText shadow-md hover:border-gray-400 hover:bg-base hover:shadow-lg"
+                    }`}
+                >
                   {alergen}
                   <IoClose className="ml-2" />
                 </button>
               ))}
             </div>
           ) : (
-            <p className={`${isDarkTheme ? "text-gray-400" : "text-gray-500"} text-center mb-4`}>No Allergens added</p>
+            <p
+              className={`${
+                isDarkTheme ? "text-gray-400" : "text-gray-500"
+              } text-center mb-4`}
+            >
+              No Allergens added
+            </p>
           )}
           <input
             list="allergens"
             value={alergenInput}
-            onChange={e => setAlergenInput(e.target.value)}
+            onChange={(e) => setAlergenInput(e.target.value)}
             onKeyDown={handleAddAlergenPressEnter}
             className={`border rounded-lg px-4 py-2 mb-2 w-full 
           md:px-4 md:py-2 md:text-sm 
           lgt:px-4 lgt:py-2 lgt:text-base 
           xl:text-base
-          ${isDarkTheme
-                ? "border-gray-600 bg-gray-900 text-white"
-                : "border-gray-300 bg-white text-black"}`}
-            placeholder="Add your allergens" />
+          ${
+            isDarkTheme
+              ? "border-gray-600 bg-gray-900 text-white"
+              : "border-gray-300 bg-secondary primaryText"
+          }`}
+            placeholder="Add your allergens"
+          />
           <datalist id="allergens">
             {possibleAllergens.map((alergen, index) => (
               <option key={index} value={alergen} />
             ))}
           </datalist>
           {error && <p className="text-red-500 mb-2 text-center">{error}</p>}
-          <button onClick={handleAddAlergen} className="w-full flex items-center justify-center mt-4 transition duration-300 ease-in-out">
+          <button
+            onClick={handleAddAlergen}
+            className="w-full flex items-center justify-center mt-4 transition duration-300 ease-in-out"
+          >
             <div
               className={`w-84 px-14 py-3 bg-customOrange rounded-full flex items-center justify-center border text-sm 
               md:px-14 md:py-3 md:text-sm 
               lgt:px-16 lgt:py-3.5 lgt:text-base 
               xl:px-18 xl:py-4 xl:px-18 xl:text-base 
-              ${isDarkTheme
+              ${
+                isDarkTheme
                   ? "border-gray-600 text-white hover:border-gray-400 hover:text-gray-400 hover:shadow-lg"
-                  : "border-gray-300 hover:border-gray-800 hover:text-gray-800 hover:shadow-lg"}`}>
-              <p className="text-black text-center text-base font-medium">Add Allergen</p>
+                  : "border-gray-300 hover:border-gray-800 hover:text-gray-800 hover:shadow-lg"
+              }`}
+            >
+              <p className="primaryText text-center text-base font-medium">
+                Add Allergen
+              </p>
             </div>
           </button>
         </div>
 
         <hr className="w-full border-orange-200 mt-4 mb-8" />
 
-        <div className={`w-full mb-6 pb-6 
-          ${isDarkTheme
-            ? "bg-gray-800"
-            : "bg-gray-200"} rounded-xl py-4 px-4
+        <div
+          className={`w-full mb-6 pb-6 
+          ${isDarkTheme ? "bg-gray-800" : "active"} rounded-xl py-4 px-4
         sm:py-5 sm:px-5 
         md:py-6 md:px-6 md:text-sm
         lgt:py-7 lgt:px-7 lgt:text-base
-        xl:py-8 xl:px-8 xl:text-base`}>
-          <h2 className={`text-lg font-semibold mb-4 ${isDarkTheme ? "text-white" : "text-black"}`}>Disliked Foods</h2>
+        xl:py-8 xl:px-8 xl:text-base`}
+        >
+          <h2
+            className={`text-lg font-semibold mb-4 ${
+              isDarkTheme ? "text-white" : "primaryText"
+            }`}
+          >
+            Disliked Foods
+          </h2>
           {foodPreferences.length > 0 ? (
             <div className="flex flex-wrap mb-4">
               {foodPreferences.map((preference, index) => (
                 <button
                   key={index}
                   onClick={() => handleRemoveFoodPreference(index)}
-                  className={`border flex items-center rounded-full px-3 py-1 mx-1 mb-2 ${isDarkTheme
-                    ? "border-blue-500 text-blue-300 bg-gray-800 hover:bg-gray-700 shadow-xl hover:shadow-2xl"
-                    : "border-gray-300 bg-white text-black shadow-md hover:border-gray-400 hover:bg-gray-100 hover:shadow-lg"}
+                  className={`border flex items-center rounded-full px-3 py-1 mx-1 mb-2 ${
+                    isDarkTheme
+                      ? "border-blue-500 text-blue-300 bg-gray-800 hover:bg-gray-700 shadow-xl hover:shadow-2xl"
+                      : "border-gray-300 bg-secondary primaryText shadow-md hover:border-gray-400 hover:bg-base hover:shadow-lg"
+                  }
                     md:px-3 md:py-1.5 md:text-sm 
                     lgt:px-4 lgt:py-2 lgt:text-base
                     xl:px-3 xl:py-1 xl:text-base
-                    `}>
+                    `}
+                >
                   {preference}
                   <IoClose className="ml-2" />
                 </button>
               ))}
             </div>
           ) : (
-            <p className={`${isDarkTheme ? "text-gray-400" : "text-gray-500"} text-center mb-4`}>There are no disliked foods added</p>
+            <p
+              className={`${
+                isDarkTheme ? "text-gray-400" : "text-gray-500"
+              } text-center mb-4`}
+            >
+              There are no disliked foods added
+            </p>
           )}
           <input
             type="text"
             value={foodPreferenceInput}
-            onChange={e => setFoodPreferenceInput(e.target.value)}
+            onChange={(e) => setFoodPreferenceInput(e.target.value)}
             onKeyDown={handleAddDislikeFoodsPressEnter}
             className={`border rounded-lg px-4 py-2 mb-2 w-full 
             md:px-4 md:py-2 md:text-sm 
             lgt:px-4 lgt:py-2 lgt:text-base  
             xl:text-base
-          ${isDarkTheme
-                ? "border-gray-600 bg-gray-900 text-white"
-                : "border-gray-300 bg-white text-black"}`}
-            placeholder="Add your disliked foods" />
-          {foodError && <p className="text-red-500 mb-2 text-center">{foodError}</p>}
+          ${
+            isDarkTheme
+              ? "border-gray-600 bg-gray-900 text-white"
+              : "border-gray-300 bg-secondary primaryText"
+          }`}
+            placeholder="Add your disliked foods"
+          />
+          {foodError && (
+            <p className="text-red-500 mb-2 text-center">{foodError}</p>
+          )}
           <button
             onClick={handleAddFoodPreference}
-            className="w-full flex items-center justify-center mt-2 transition duration-300 ease-in-out">
+            className="w-full flex items-center justify-center mt-2 transition duration-300 ease-in-out"
+          >
             <div
-              className={`w-84 px-16 py-3 my-3 bg-customOrange rounded-full flex items-center justify-center border ${isDarkTheme
-                ? "border-gray-600 hover:border-gray-400 hover:text-gray-400"
-                : "border-gray-300 hover:border-gray-800 hover:text-gray-800 hover:shadow-lg"}
+              className={`w-84 px-16 py-3 my-3 bg-customOrange rounded-full flex items-center justify-center border ${
+                isDarkTheme
+                  ? "border-gray-600 hover:border-gray-400 hover:text-gray-400"
+                  : "border-gray-300 hover:border-gray-800 hover:text-gray-800 hover:shadow-lg"
+              }
             md:px-18 md:py-3 md:text-sm 
             lgt:px-20 lgt:py-3.5 lgt:text-base 
             xl:px-20 xl:py-4 xl:text-base
-            `}>
-              <p className="text-black text-center text-base font-medium">Add Food</p>
+            `}
+            >
+              <p className="primaryText text-center text-base font-medium">
+                Add Food
+              </p>
             </div>
           </button>
           <div className="mt-4">
             <select
               value={selectedPreference}
-              onChange={e => setSelectedPreference(e.target.value)}
-              className={`border rounded-lg px-4 py-2 w-full ${isDarkTheme
-                ? "border-gray-600 bg-gray-900 text-white"
-                : "border-gray-300 bg-white text-black"}
+              onChange={(e) => setSelectedPreference(e.target.value)}
+              className={`border rounded-lg px-4 py-2 w-full ${
+                isDarkTheme
+                  ? "border-gray-600 bg-gray-900 text-white"
+                  : "border-gray-300 bg-secondary primaryText"
+              }
             text-sm sm:px-4 sm:py-2.5 
             md:px-4 md:py-2.5 md:text-sm 
             lgt:px-5 lgt:py-3 lgt:text-base 
             xl:px-6 xl:py-3.5 xl:text-base
-            `}>
+            `}
+            >
               <option value="none">None</option>
               <option value="vegetarian">Vegetarian</option>
               <option value="vegan">Vegan</option>
@@ -240,20 +332,28 @@ const FoodPreferences = () => {
           </div>
         </div>
 
-        <button onClick={handleSavePreferences} className="w-full flex items-center justify-center mt-4 mb-8 transition duration-300 ease-in-out">
-          <div className={`w-84 px-16 py-3 bg-green-500 rounded-full flex items-center justify-center border ${isDarkTheme
-            ? "border-gray-600 hover:border-gray-400 hover:text-gray-400"
-            : "border-gray-300 hover:border-gray-800 hover:text-gray-800 hover:shadow-lg"}
+        <button
+          onClick={handleSavePreferences}
+          className="w-full flex items-center justify-center mt-4 mb-8 transition duration-300 ease-in-out"
+        >
+          <div
+            className={`w-84 px-16 py-3 bg-green-500 rounded-full flex items-center justify-center border ${
+              isDarkTheme
+                ? "border-gray-600 hover:border-gray-400 hover:text-gray-400"
+                : "border-gray-300 hover:border-gray-800 hover:text-gray-800 hover:shadow-lg"
+            }
             md:px-18 md:py-3 md:text-sm 
             lgt:px-20 lgt:py-3.5 lgt:text-base 
             xl:px-18 xl:py-4 xl:px-20 xl:text-base
-            `}>
-            <p className="text-center text-base font-medium text-slate-50">Save Food</p>
+            `}
+          >
+            <p className="text-center text-base font-medium text-slate-50">
+              Save Food
+            </p>
           </div>
         </button>
-
-      </div >
-    </div >
+      </div>
+    </div>
   );
 };
 
diff --git a/src/client/CookingAppReact/src/hooks/useCancelSub.js b/src/client/CookingAppReact/src/hooks/useCancelSub.js
new file mode 100644
index 00000000..49acf74c
--- /dev/null
+++ b/src/client/CookingAppReact/src/hooks/useCancelSub.js
@@ -0,0 +1,18 @@
+import { useMutation } from "@tanstack/react-query";
+import toast from "react-hot-toast";
+import { cancelSub } from "@/http/subs";
+
+export default function useCancelSub({ refetchFn }) {
+  const { mutate, isPending, isError, error } = useMutation({
+    mutationFn: cancelSub,
+    onError: () => {
+      toast.error("There was an error!");
+    },
+    onSuccess: async () => {
+      toast.success("Successfully cancelled!");
+      refetchFn();
+    },
+  });
+
+  return { mutate, isPending, isError, error };
+}
diff --git a/src/client/CookingAppReact/src/hooks/useChatHistory.js b/src/client/CookingAppReact/src/hooks/useChatHistory.js
index 5af70bca..c655c374 100644
--- a/src/client/CookingAppReact/src/hooks/useChatHistory.js
+++ b/src/client/CookingAppReact/src/hooks/useChatHistory.js
@@ -14,7 +14,6 @@ const useChatHistory = () => {
   } = useMutation({
     mutationFn: getUserChats,
     onMutate: () => {
-      console.log("hii");
     },
     onSuccess: (response) => {
       dispatch(userActions.firstPageChatHistory(response.data));
@@ -28,10 +27,8 @@ const useChatHistory = () => {
     mutationFn: getUserChats,
     onMutate: () => {},
     onError: (errr) => {
-      console.log(errr);
     },
     onSuccess: (response) => {
-      console.log("return next page ", response);
       dispatch(userActions.setChatHistory(response.data));
     },
   });
diff --git a/src/client/CookingAppReact/src/hooks/useFetchUserStatus.js b/src/client/CookingAppReact/src/hooks/useFetchUserStatus.js
index f8b950e7..c32dfa66 100644
--- a/src/client/CookingAppReact/src/hooks/useFetchUserStatus.js
+++ b/src/client/CookingAppReact/src/hooks/useFetchUserStatus.js
@@ -8,35 +8,31 @@ import { userActions } from "../store/userSlice";
 const useFetchUserStatus = () => {
   const isInitial = useSelector((state) => state.ui.isInitial);
   const dispatch = useDispatch();
-
-  useEffect(() => {
-    const fetchToken = async () => {
-      const token = await getToken();
-      if (isInitial) {
-        const response = await checkUserStatus({ token });
-        if (response.status !== 401) {
-          const body = await response.json();
-          dispatch(
-            uiActions.setTheme(
-              body.data.interfacePreference.theme === "Light" ? false : true
-            )
-          );
-          dispatch(
-            uiActions.setLanguage(body.data.interfacePreference.language)
-          );
-          dispatch(userActions.setRole(body.data.role));
-          dispatch(
-            userActions.setDietaryPreferences({
-              allergies: body.data.allergies,
-              avoidedFoods: body.data.avoidedFoods,
-              dietaryPreference: body.data.dietaryPreference,
-            })
-          );
-          dispatch(uiActions.setIsInitial(false));
-        }
+  const fetchToken = async () => {
+    const token = await getToken();
+    if (isInitial) {
+      const response = await checkUserStatus({ token });
+      if (response.status !== 401) {
+        const body = await response.json();
+        dispatch(uiActions.setTheme(body.data.interfacePreference.theme));
+        dispatch(uiActions.setLanguage(body.data.interfacePreference.language));
+        dispatch(userActions.setRole(body.data.role));
+        dispatch(
+          userActions.setPersonal({ name: body.data.name, picture: null })
+        );
+        dispatch(
+          userActions.setDietaryPreferences({
+            allergies: body.data.allergies,
+            avoidedFoods: body.data.avoidedFoods,
+            dietaryPreference: body.data.dietaryPreference,
+          })
+        );
+        dispatch(userActions.setProfilePicture(body.data.imageUrl));
+        dispatch(uiActions.setIsInitial(false));
       }
-    };
-
+    }
+  };
+  useEffect(() => {
     fetchToken();
   }, [isInitial, dispatch]);
 };
diff --git a/src/client/CookingAppReact/src/hooks/useFirstPageRecipes.js b/src/client/CookingAppReact/src/hooks/useFirstPageRecipes.js
index d3d059cc..3781df67 100644
--- a/src/client/CookingAppReact/src/hooks/useFirstPageRecipes.js
+++ b/src/client/CookingAppReact/src/hooks/useFirstPageRecipes.js
@@ -11,7 +11,6 @@ const useFirstPageRecipes = () => {
       mutationFn: getRecipes,
       onMutate: () => {},
       onError: (errr) => {
-        console.log(errr);
       },
       onSuccess: (data) => {
         dispatch(uiActions.getFirstPage(data));
diff --git a/src/client/CookingAppReact/src/hooks/useFoodPreferences.js b/src/client/CookingAppReact/src/hooks/useFoodPreferences.js
new file mode 100644
index 00000000..8e392d2e
--- /dev/null
+++ b/src/client/CookingAppReact/src/hooks/useFoodPreferences.js
@@ -0,0 +1,44 @@
+import { useMutation } from "@tanstack/react-query";
+import { useDispatch, useSelector } from "react-redux";
+import { preferences } from "../http/user";
+import { getToken } from "@/msal/msal";
+import { userActions } from "@/store/userSlice";
+import { checkUserStatus } from "../http/user";
+import toast from "react-hot-toast";
+const useFoodPreferences = () => {
+  const dispatch = useDispatch();
+  const selectedChat = useSelector((state) => state.user.selectedChat);
+
+  const {
+    mutate: save,
+    isPending: isSaving,
+    isError,
+    error,
+  } = useMutation({
+    mutationFn: preferences,
+    onSuccess: async () => {
+      toast.success("Preferences saved!", { position: "top-center" });
+      const token = await getToken();
+      const response = await checkUserStatus({ token });
+      if (response.status !== 401) {
+        const body = await response.json();
+        dispatch(
+          userActions.setDietaryPreferences({
+            allergies: body.data.allergies,
+            avoidedFoods: body.data.avoidedFoods,
+            dietaryPreference: body.data.dietaryPreference,
+          })
+        );
+      }
+    },
+  });
+
+  return {
+    save,
+    isSaving,
+    isError,
+    error,
+  };
+};
+
+export default useFoodPreferences;
diff --git a/src/client/CookingAppReact/src/hooks/useGift.js b/src/client/CookingAppReact/src/hooks/useGift.js
new file mode 100644
index 00000000..a35b42ac
--- /dev/null
+++ b/src/client/CookingAppReact/src/hooks/useGift.js
@@ -0,0 +1,17 @@
+import { useMutation } from "@tanstack/react-query";
+import { gift } from "@/http/admin";
+import toast from "react-hot-toast";
+
+export default function useGift() {
+  const { mutate, isPending, isError, error } = useMutation({
+    mutationFn: gift,
+    onError: () => {
+      toast.error("There was an error!");
+    },
+    onSuccess: async () => {
+      toast.success("Successfully gifted!");
+    },
+  });
+
+  return { mutate, isPending, isError, error };
+}
diff --git a/src/client/CookingAppReact/src/hooks/useMySubscription.js b/src/client/CookingAppReact/src/hooks/useMySubscription.js
new file mode 100644
index 00000000..3c35d0e8
--- /dev/null
+++ b/src/client/CookingAppReact/src/hooks/useMySubscription.js
@@ -0,0 +1,20 @@
+import { useQuery } from "@tanstack/react-query";
+import { getRecipeById } from "@/http/recipe";
+import { getToken } from "@/msal/msal";
+import { mySub } from "@/http/subs";
+const useMySubscription = () => {
+  const { data, isPending, isError, error, refetch } = useQuery({
+    queryKey: ["mySub"],
+    queryFn: async () => {
+      const token = await getToken();
+      const userSub = await mySub({
+        token: token,
+      });
+      return userSub;
+    },
+  });
+
+  return { data, isPending, isError, error, refetch };
+};
+
+export default useMySubscription;
diff --git a/src/client/CookingAppReact/src/hooks/usePfp.js b/src/client/CookingAppReact/src/hooks/usePfp.js
new file mode 100644
index 00000000..83f2e9a1
--- /dev/null
+++ b/src/client/CookingAppReact/src/hooks/usePfp.js
@@ -0,0 +1,23 @@
+import { useMutation } from "@tanstack/react-query";
+import { setProfilePicture } from "@/http/user";
+import useFetchUserStatus from "./useFetchUserStatus";
+import { useDispatch } from "react-redux";
+import { userActions } from "@/store/userSlice";
+import { checkUserStatus } from "@/http/user";
+import { getToken } from "@/msal/msal";
+export default function usePfp() {
+  const dispatch = useDispatch();
+  const { mutate, isPending, isError, error } = useMutation({
+    mutationFn: setProfilePicture,
+    onSuccess: async () => {
+      const token = await getToken();
+      const response = await checkUserStatus({ token });
+      if (response.status !== 401) {
+        const body = await response.json();
+        dispatch(userActions.setProfilePicture(body.data.imageUrl));
+      }
+    },
+  });
+
+  return { mutate, isPending, isError, error };
+}
diff --git a/src/client/CookingAppReact/src/hooks/useSaveRecipe.js b/src/client/CookingAppReact/src/hooks/useSaveRecipe.js
index 61f3dbc4..ac69c265 100644
--- a/src/client/CookingAppReact/src/hooks/useSaveRecipe.js
+++ b/src/client/CookingAppReact/src/hooks/useSaveRecipe.js
@@ -25,7 +25,6 @@ const useSaveRecipe = () => {
       dispatch(userActions.reduceRecipeGeneration());
     },
     onSuccess: (response) => {
-      console.log(response);
       dispatch(uiActions.showToast(response));
     },
     onError: (error) => {
diff --git a/src/client/CookingAppReact/src/hooks/useStripeSession.js b/src/client/CookingAppReact/src/hooks/useStripeSession.js
index 71550097..2fd3037b 100644
--- a/src/client/CookingAppReact/src/hooks/useStripeSession.js
+++ b/src/client/CookingAppReact/src/hooks/useStripeSession.js
@@ -11,7 +11,6 @@ const useStripeSession = () => {
   } = useMutation({
     mutationFn: createSub,
     onSuccess: (response) => {
-      console.log(response.data.sessionUrl);
       window.location.href = response.data.sessionUrl;
     },
   });
diff --git a/src/client/CookingAppReact/src/hooks/useUiPreferences.js b/src/client/CookingAppReact/src/hooks/useUiPreferences.js
new file mode 100644
index 00000000..13c21b26
--- /dev/null
+++ b/src/client/CookingAppReact/src/hooks/useUiPreferences.js
@@ -0,0 +1,28 @@
+import { useMutation } from "@tanstack/react-query";
+import { setUi } from "../http/user";
+import { useDispatch } from "react-redux";
+import { uiActions } from "@/store/uiSlice";
+import { checkUserStatus } from "../http/user";
+import { getToken } from "@/msal/msal";
+const useUiPreferences = () => {
+  const dispatch = useDispatch();
+  const { mutate: changeUi } = useMutation({
+    mutationKey: ["setUi"],
+    mutationFn: setUi,
+    onSuccess: async () => {
+      const token = await getToken();
+      const response = await checkUserStatus({ token });
+      if (response.status !== 401) {
+        const body = await response.json();
+        dispatch(uiActions.setTheme(body.data.interfacePreference.theme));
+        dispatch(uiActions.setLanguage(body.data.interfacePreference.language));
+      }
+    },
+  });
+
+  return {
+    changeUi,
+  };
+};
+
+export default useUiPreferences;
diff --git a/src/client/CookingAppReact/src/http/admin.js b/src/client/CookingAppReact/src/http/admin.js
new file mode 100644
index 00000000..575d7491
--- /dev/null
+++ b/src/client/CookingAppReact/src/http/admin.js
@@ -0,0 +1,12 @@
+const ip = import.meta.env.VITE_PUBLIC_PERSONAL_IP;
+
+export async function gift({ token, userId }) {
+  const response = await fetch(`${ip}/gift-tokens/${userId}`, {
+    method: "POST",
+    headers: {
+      Authorization: `Bearer ${token}`,
+      "Content-Type": "application/json",
+    },
+  });
+  return response;
+}
diff --git a/src/client/CookingAppReact/src/http/chat.js b/src/client/CookingAppReact/src/http/chat.js
index b59cb43d..571bf99a 100644
--- a/src/client/CookingAppReact/src/http/chat.js
+++ b/src/client/CookingAppReact/src/http/chat.js
@@ -2,7 +2,6 @@ import toast from "react-hot-toast";
 const ip = import.meta.env.VITE_PUBLIC_PERSONAL_IP;
 
 export async function sendMessage({ token, chatId, type, content }) {
-  console.log("sending");
   const response = await fetch(`${ip}/message`, {
     method: "POST",
     headers: {
diff --git a/src/client/CookingAppReact/src/http/subs.js b/src/client/CookingAppReact/src/http/subs.js
index da986a00..0fefb02c 100644
--- a/src/client/CookingAppReact/src/http/subs.js
+++ b/src/client/CookingAppReact/src/http/subs.js
@@ -10,7 +10,6 @@ export async function fetchSubs(token) {
     throw new Error(response.errors);
   }
   const data = await response.json();
-  console.log(data);
   return data;
 }
 export async function createSub({ token, email, priceId }) {
@@ -25,11 +24,37 @@ export async function createSub({ token, email, priceId }) {
       priceId: priceId,
     }),
   });
-  console.log(response);
   if (!response.ok) {
     throw new Error(response.errors);
   }
   const data = await response.json();
-  console.log(data);
   return data;
 }
+export async function mySub({ token }) {
+  const response = await fetch(`${ip}/api/stripe/my-subscription`, {
+    method: "GET",
+    headers: {
+      Authorization: `Bearer ${token}`,
+      "Content-Type": "application/json",
+    },
+  });
+  if (!response.ok) {
+    throw new Error(response.errors);
+  }
+  const data = await response.json();
+  return data.data;
+}
+export async function cancelSub({ token, subscriptionId }) {
+  const response = await fetch(`${ip}/api/stripe/cancel/${subscriptionId}`, {
+    method: "POST",
+    headers: {
+      Authorization: `Bearer ${token}`,
+      "Content-Type": "application/json",
+    },
+  });
+  if (!response.ok) {
+    throw new Error(response.errors);
+  }
+  const data = await response.json();
+  return data.data;
+}
diff --git a/src/client/CookingAppReact/src/http/user.js b/src/client/CookingAppReact/src/http/user.js
index 4d45f97c..8aa59ec5 100644
--- a/src/client/CookingAppReact/src/http/user.js
+++ b/src/client/CookingAppReact/src/http/user.js
@@ -21,7 +21,6 @@ export async function setUi({ token, userId, language, theme }) {
   return responseBody.data;
 }
 export async function checkUserStatus({ token }) {
-  console.log(token);
   const response = await fetch(`${ip}/fetch-profile`, {
     method: "GET",
     headers: {
@@ -52,6 +51,17 @@ export async function preferences({
     }),
   });
   const responseBody = await response.json();
-  console.log(responseBody);
+  return responseBody;
+}
+export async function setProfilePicture({ token, image }) {
+  const response = await fetch(`${ip}/upload-pfp`, {
+    method: "POST",
+    headers: {
+      Authorization: `Bearer ${token}`,
+      "Content-Type": "application/json",
+    },
+    body: `"${image}"`,
+  });
+  const responseBody = await response.json();
   return responseBody;
 }
diff --git a/src/client/CookingAppReact/src/index.css b/src/client/CookingAppReact/src/index.css
index d71f0919..4c2fb974 100644
--- a/src/client/CookingAppReact/src/index.css
+++ b/src/client/CookingAppReact/src/index.css
@@ -4,19 +4,42 @@
 
 /* Slim gray and cool scrollbar */
 ::-webkit-scrollbar {
-    width: 6px; /* Adjust the width to make it slimmer */
+  width: 6px; /* Adjust the width to make it slimmer */
 }
 
 ::-webkit-scrollbar-track {
-    background-color: #d3d3d3; /* Light gray track color */
-    border-radius: 10px; /* Rounded corners for a smoother look */
+  background-color: #d3d3d3; /* Light gray track color */
+  border-radius: 10px; /* Rounded corners for a smoother look */
 }
 
 ::-webkit-scrollbar-thumb {
-    background: linear-gradient(135deg, #a0a0a0, #606060); /* Gradient thumb for a cool effect */
-    border-radius: 10px; /* Rounded corners for the thumb */
+  background: linear-gradient(
+    135deg,
+    #a0a0a0,
+    #606060
+  ); /* Gradient thumb for a cool effect */
+  border-radius: 10px; /* Rounded corners for the thumb */
 }
 
 ::-webkit-scrollbar-thumb:hover {
-    background: linear-gradient(135deg, #808080, #404040); /* Darker gradient on hover */
+  background: linear-gradient(
+    135deg,
+    #808080,
+    #404040
+  ); /* Darker gradient on hover */
+}
+.light {
+  --base: rgb(243 244 246);
+  --secondary: rgb(255, 255, 255);
+  --primary: rgb(254 215 170);
+  --active: rgb(229 231 235);
+  --primaryText: #0d0d0d;
+}
+.dark {
+  --base: #171717;
+  --secondary: #212121;
+  --active: #2f2f2f;
+  --primary: rgb(101 55 1);
+  --secondary: #212121;
+  --primaryText: #ececec;
 }
diff --git a/src/client/CookingAppReact/src/msal/msal.ts b/src/client/CookingAppReact/src/msal/msal.ts
index 45151209..b186ae23 100644
--- a/src/client/CookingAppReact/src/msal/msal.ts
+++ b/src/client/CookingAppReact/src/msal/msal.ts
@@ -10,7 +10,6 @@ import { msalConfig, loginRequest } from "../msal/authConfig";
 export const msalInstance = new PublicClientApplication(msalConfig);
 
 export function initializeMsal() {
-  console.log("=> msal initialization..");
   const accounts = msalInstance.getAllAccounts();
   if (accounts.length > 0) {
     msalInstance.setActiveAccount(accounts[0]);
diff --git a/src/client/CookingAppReact/src/msal/tokenFetcher.ts b/src/client/CookingAppReact/src/msal/tokenFetcher.ts
index 036ba2f8..226ebd44 100644
--- a/src/client/CookingAppReact/src/msal/tokenFetcher.ts
+++ b/src/client/CookingAppReact/src/msal/tokenFetcher.ts
@@ -9,7 +9,6 @@ export async function getCurrentToken(
   const accounts = msalInstance.getAllAccounts();
 
   if (accounts.length === 0) {
-    console.log("No accounts found in MSAL instance.");
     return null;
   }
 
diff --git a/src/client/CookingAppReact/src/pages/admin/Admin.jsx b/src/client/CookingAppReact/src/pages/admin/Admin.jsx
index 8d8c73b8..9e1e1a2e 100644
--- a/src/client/CookingAppReact/src/pages/admin/Admin.jsx
+++ b/src/client/CookingAppReact/src/pages/admin/Admin.jsx
@@ -1,133 +1,161 @@
 import {
-    Card,
-    CardBody,
-    CardHeader,
-    Typography,
-  } from "@material-tailwind/react";
-  import Chart from "react-apexcharts";
-  import { CurrencyEuroIcon } from "@heroicons/react/24/outline";
-
-  const chartConfig = {
-    type: "line",
-    height: 240,
-    series: [
-      {
-        name: "Sales",
-        data: [50, 40, 300, 320, 500, 350, 200, 230, 500],
-      },
-    ],
-    options: {
-      chart: {
-        toolbar: {
-          show: false,
-        },
-      },
-      title: {
-        show: "",
-      },
-      dataLabels: {
-        enabled: false,
+  Card,
+  CardBody,
+  CardHeader,
+  Typography,
+} from "@material-tailwind/react";
+import Chart from "react-apexcharts";
+import { CurrencyEuroIcon } from "@heroicons/react/24/outline";
+import { useRef } from "react";
+import useGift from "@/hooks/useGift";
+import { getToken } from "@/msal/msal";
+const chartConfig = {
+  type: "line",
+  height: 240,
+  series: [
+    {
+      name: "Sales",
+      data: [50, 40, 300, 320, 500, 350, 200, 230, 500],
+    },
+  ],
+  options: {
+    chart: {
+      toolbar: {
+        show: false,
       },
-      colors: ["#020617"],
-      stroke: {
-        lineCap: "round",
-        curve: "smooth",
+    },
+    title: {
+      show: "",
+    },
+    dataLabels: {
+      enabled: false,
+    },
+    colors: ["#020617"],
+    stroke: {
+      lineCap: "round",
+      curve: "smooth",
+    },
+    markers: {
+      size: 1,
+    },
+    xaxis: {
+      axisTicks: {
+        show: false,
       },
-      markers: {
-        size: 1,
+      axisBorder: {
+        show: false,
       },
-      xaxis: {
-        axisTicks: {
-          show: false,
-        },
-        axisBorder: {
-          show: false,
-        },
-        labels: {
-          style: {
-            colors: "#616161",
-            fontSize: "12px",
-            fontFamily: "inherit",
-            fontWeight: 400,
-          },
+      labels: {
+        style: {
+          colors: "#616161",
+          fontSize: "12px",
+          fontFamily: "inherit",
+          fontWeight: 400,
         },
-        categories: [
-          "Apr",
-          "May",
-          "Jun",
-          "Jul",
-          "Aug",
-          "Sep",
-          "Oct",
-          "Nov",
-          "Dec",
-        ],
       },
-      yaxis: {
-        labels: {
-          style: {
-            colors: "#616161",
-            fontSize: "12px",
-            fontFamily: "inherit",
-            fontWeight: 400,
-          },
+      categories: [
+        "Apr",
+        "May",
+        "Jun",
+        "Jul",
+        "Aug",
+        "Sep",
+        "Oct",
+        "Nov",
+        "Dec",
+      ],
+    },
+    yaxis: {
+      labels: {
+        style: {
+          colors: "#616161",
+          fontSize: "12px",
+          fontFamily: "inherit",
+          fontWeight: 400,
         },
       },
-      grid: {
-        show: true,
-        borderColor: "#dddddd",
-        strokeDashArray: 5,
-        xaxis: {
-          lines: {
-            show: true,
-          },
-        },
-        padding: {
-          top: 5,
-          right: 20,
+    },
+    grid: {
+      show: true,
+      borderColor: "#dddddd",
+      strokeDashArray: 5,
+      xaxis: {
+        lines: {
+          show: true,
         },
       },
-      fill: {
-        opacity: 0.8,
-      },
-      tooltip: {
-        theme: "dark",
+      padding: {
+        top: 5,
+        right: 20,
       },
     },
-  };
+    fill: {
+      opacity: 0.8,
+    },
+    tooltip: {
+      theme: "dark",
+    },
+  },
+};
 
 export default function Admin() {
-    return (
-        <>
-            <div className="p-10">
-                <Card className="p-10 w-full lg:w-3/5">
-                    <CardHeader
-                    floated={false}
-                    shadow={false}
-                    color="transparent"
-                    className="flex flex-col gap-4 rounded-none md:flex-row md:items-center"
-                    >
-                        <div className="w-max rounded-lg bg-orange-300 p-5 m-2 text-black">
-                            <CurrencyEuroIcon className="h-6 w-6" />
-                        </div>
-                        <div>
-                            <Typography variant="h6" color="blue-gray">
-                            Sales this week
-                            </Typography>
-                            <Typography
-                            variant="small"
-                            color="gray"
-                            className="max-w-sm font-normal"
-                            >
-                            For the period mon - sun
-                            </Typography>
-                        </div>
-                    </CardHeader>
-                    <CardBody className="px-2 pb-0">
-                    <Chart {...chartConfig} />
-                    </CardBody>
-                </Card>
+  const ref = useRef();
+  const { mutate } = useGift();
+  async function handleGifting() {
+    if (ref.current.value && ref.current.value !== "") {
+      const token = await getToken();
+      mutate({ token: token, userId: ref.current.value });
+      ref.current.value = "";
+    }
+  }
+  return (
+    <>
+      <div className="p-10">
+        <Card className="p-10 w-full lg:w-3/5">
+          <CardHeader
+            floated={false}
+            shadow={false}
+            color="transparent"
+            className="flex flex-col gap-4 rounded-none md:flex-row md:items-center"
+          >
+            <div className="w-max rounded-lg bg-orange-300 p-5 m-2 primaryText">
+              <CurrencyEuroIcon className="h-6 w-6" />
+            </div>
+            <div>
+              <Typography variant="h6" color="blue-gray">
+                Sales this week
+              </Typography>
+              <Typography
+                variant="small"
+                color="gray"
+                className="max-w-sm font-normal"
+              >
+                For the period mon - sun
+              </Typography>
             </div>
-        </>
-    );
-  }
\ No newline at end of file
+          </CardHeader>
+          <CardBody className="px-2 pb-0">
+            <Chart {...chartConfig} />
+          </CardBody>
+        </Card>
+      </div>
+      <div className="flex flex-col w-96 justify-center items-center p-5">
+        <h1 className="text-gray-800 font-semibold text-lg">
+          {"Gift 100 chat tokens & 10 recipe tokens"}
+        </h1>
+        <input
+          type="text"
+          placeholder="User ID"
+          className="w-full mt-2 border shadow-sm rounded-2xl px-5 py-2"
+          ref={ref}
+        />
+        <button
+          className="px-5 py-1 rounded-2xl border bg-primary mt-2"
+          onClick={handleGifting}
+        >
+          Gift
+        </button>
+      </div>
+    </>
+  );
+}
diff --git a/src/client/CookingAppReact/src/pages/authorize/AuthorizeRoute.jsx b/src/client/CookingAppReact/src/pages/authorize/AuthorizeRoute.jsx
new file mode 100644
index 00000000..0177d429
--- /dev/null
+++ b/src/client/CookingAppReact/src/pages/authorize/AuthorizeRoute.jsx
@@ -0,0 +1,12 @@
+import { Navigate } from "react-router-dom";
+import { useSelector } from "react-redux";
+const AuthorizeRoute = ({ succesPage, requiredRole, unAuthorizedPath }) => {
+  const role = useSelector((state) => state.user.role.type);
+  return requiredRole === role ? (
+    succesPage
+  ) : (
+    <Navigate to={unAuthorizedPath} />
+  );
+};
+
+export default AuthorizeRoute;
diff --git a/src/client/CookingAppReact/src/pages/chat/Chat.jsx b/src/client/CookingAppReact/src/pages/chat/Chat.jsx
index 1a89bd01..6ea77981 100644
--- a/src/client/CookingAppReact/src/pages/chat/Chat.jsx
+++ b/src/client/CookingAppReact/src/pages/chat/Chat.jsx
@@ -22,7 +22,6 @@ export default function Chat() {
   }, [chatId]);
   useEffect(() => {
     if (isError) {
-      console.log("err");
       toast.error(`Unable to load conversation ${chatId}`);
     }
   }, [isError]);
diff --git a/src/client/CookingAppReact/src/pages/chat/EmptyChat.jsx b/src/client/CookingAppReact/src/pages/chat/EmptyChat.jsx
index 5b359687..b7415d67 100644
--- a/src/client/CookingAppReact/src/pages/chat/EmptyChat.jsx
+++ b/src/client/CookingAppReact/src/pages/chat/EmptyChat.jsx
@@ -33,7 +33,7 @@ export default function EmptyChat() {
             <div className="flex flex-col justify-center items-center content-center">
               <img src={logo} alt="" width={130} />
               <div className="flex flex-col mt-4 justify-center items-center content-center">
-                <h1 className="text-lg text-black font-semibold">
+                <h1 className="text-lg primaryText font-semibold">
                   Let's figure out a recipe
                 </h1>
                 <h2 className="text-sm text-gray-500">
diff --git a/src/client/CookingAppReact/src/pages/layout/Layout.jsx b/src/client/CookingAppReact/src/pages/layout/Layout.jsx
index 0473307a..dff9a57c 100644
--- a/src/client/CookingAppReact/src/pages/layout/Layout.jsx
+++ b/src/client/CookingAppReact/src/pages/layout/Layout.jsx
@@ -4,13 +4,19 @@ import MyRecipes from "../../components/recipes/MyRecipes";
 import Navbar from "../../components/navbar/Navbar";
 import toast, { Toaster } from "react-hot-toast";
 import useFetchUserStatus from "../../hooks/useFetchUserStatus";
+import { useSelector } from "react-redux";
 
 export default function Layout() {
   useFetchUserStatus();
+  const theme = useSelector((state) => state.ui.theme);
   return (
-    <main className="flex w-full first-line:overflow-hidden bg-gray-100">
+    <main
+      className={`flex w-full first-line:overflow-hidden ${
+        theme === "Light" ? "light" : theme === "Dark" && "dark"
+      } bg-base`}
+    >
       <Sidebar />
-      <section className="flex w-screen flex-col overflow-hidden shrink rounded-none md:rounded-2xl bg-white border-none md:border m-0 md:m-1 h-screen md:h-[calc(100vh-1vh)]">
+      <section className="flex w-screen flex-col overflow-hidden shrink rounded-none md:rounded-2xl bg-secondary border-none md:border m-0 md:m-1 h-screen md:h-[calc(100vh-1vh)]">
         <Navbar />
         <Outlet />
       </section>
diff --git a/src/client/CookingAppReact/src/pages/recipe/Recipe.jsx b/src/client/CookingAppReact/src/pages/recipe/Recipe.jsx
index a454e072..8aa3c034 100644
--- a/src/client/CookingAppReact/src/pages/recipe/Recipe.jsx
+++ b/src/client/CookingAppReact/src/pages/recipe/Recipe.jsx
@@ -25,15 +25,14 @@ export default function Recipe() {
   const { data, isPending, isError, refetch } = useRecipeDetails(recipeId);
   useEffect(() => {
     if (isError) {
-      console.log("err");
       toast.error(`Unable to load recipe ${recipeId}`);
     }
   }, [isError]);
   return (
-    <div className="flex w-full pl-5 pr-5 xl:pl-28 xl:pr-36 py-16 flex-col overflow-y-auto">
+    <div className="flex w-full pl-5 text-primaryText pr-5 xl:pl-28 xl:pr-36 py-16 flex-col overflow-y-auto">
       {data && !isError && (
         <>
-          <div className="w-full flex flex-col xl:flex-row xl:h-[32rem] bg-gray-100 rounded-2xl">
+          <div className="w-full flex flex-col xl:flex-row xl:h-[32rem] bg-base rounded-2xl">
             <div className="w-full xl:w-2/3">
               <img
                 className="h-full w-full object-cover rounded-2xl"
@@ -43,10 +42,10 @@ export default function Recipe() {
             </div>
             <div className="py-12 px-8 w-full xl:w-1/3 flex flex-col gap-12 justify-center items-start">
               <h1 className="text-4xl font-medium">{data.title}</h1>
-              <p className="text-base">{data.description}</p>
+              <p className="">{data.description}</p>
             </div>
           </div>
-          <div className="h-fit bg-gray-100 flex content-start items-start flex-col lg:flex-row w-fit xl:w-1/2 rounded-2xl mt-16 p-5 gap-4">
+          <div className="h-fit bg-base flex content-start items-start flex-col lg:flex-row w-fit xl:w-1/2 rounded-2xl mt-16 p-5 gap-4">
             <div className="lg:w-1/3 h-full flex flex-row justify-center items-center gap-2">
               <ClockIcon className="size-8" />
               <p className="text-lg ">{data.duration}</p>
@@ -67,7 +66,7 @@ export default function Recipe() {
               <h2 className="text-xl mb-4">Ingredients</h2>
               <div className="grid grid-cols-1  gap-2">
                 {data.ingredients.map((ingredient) => (
-                  <div className="border-l-2 border-orange-200 shadow-sm rounded-e-xl col-span-1 items-center w-fit justify-center px-8 py-4">
+                  <div className="border-l-2 border-primary shadow-sm rounded-e-xl col-span-1 items-center w-fit justify-center px-8 py-4">
                     <p className="text-lg">
                       •{" "}
                       {`${ingredient.quantity} ${ingredient.metric} ${ingredient.name}`}
@@ -79,9 +78,9 @@ export default function Recipe() {
             <div className="w-full rounded-2xl px-6 py-4 flex flex-col items-start gap-4">
               <h2 className="text-xl mb-4">Preparation Steps</h2>
               {data.preparationSteps.map((step, index) => (
-                <div className="rounded-2xl bg-orange-50 w-full p-1">
+                <div className="rounded-2xl bg-primary w-full p-1">
                   <div className="border flex flex-col items-center md:items-start justify-start w-full h-full rounded-2xl px-8 py-4">
-                    <div className="text-center text-black text-3xl font-light flex flex-row items-center md:gap-2">
+                    <div className="text-center primaryText text-3xl font-light flex flex-row items-center md:gap-2">
                       <p className="text-xl font-semibold mr-2">
                         Step {index + 1}
                       </p>
diff --git a/src/client/CookingAppReact/src/pages/rules/Rules.jsx b/src/client/CookingAppReact/src/pages/rules/Rules.jsx
new file mode 100644
index 00000000..48e4036d
--- /dev/null
+++ b/src/client/CookingAppReact/src/pages/rules/Rules.jsx
@@ -0,0 +1,62 @@
+export default function Rules() {
+
+  return (
+<div className="flex flex-col justify-start items-start px-4 overflow-auto h-full py-5">
+      <div className="bg-secondary rounded-lg p-8 md:w-3/4 lg:w-2/4 text-primaryText">
+        <h1 className="text-3xl font-bold text-start mb-6">Meal Master Rules and Policies</h1>
+        
+        <div className="space-y-4 text-start">
+          <div>
+            <h2 className="text-xl font-semibold">User Conduct</h2>
+            <p className="mt-2">
+              Users are expected to interact with the app respectfully and responsibly. 
+              Any misuse of the platform, including submitting harmful or inappropriate content, will result in account suspension.
+            </p>
+          </div>
+
+          <div>
+            <h2 className="text-xl font-semibold">Content Ownership</h2>
+            <p className="mt-2">
+              All recipes generated by Meal Master are owned by the user who creates them. 
+              However, by using the app, you grant Meal Master the right to use your generated recipes for promotional purposes.
+            </p>
+          </div>
+
+          <div>
+            <h2 className="text-xl font-semibold">Privacy Policy</h2>
+            <p className="mt-2">
+              Meal Master is committed to protecting your privacy. 
+              We do not share your personal information with third parties without your consent. 
+              For more details, please review our comprehensive Privacy Policy.
+            </p>
+          </div>
+
+          <div>
+            <h2 className="text-xl font-semibold">Account Security</h2>
+            <p className="mt-2">
+              You are responsible for maintaining the confidentiality of your account information, including your password. 
+              Please notify us immediately if you suspect any unauthorized access to your account.
+            </p>
+          </div>
+
+          <div>
+            <h2 className="text-xl font-semibold">Recipe Accuracy</h2>
+            <p className="mt-2">
+              While Meal Master strives to provide accurate and reliable recipes, 
+              we cannot guarantee the success of every recipe generated. 
+              Users should use their discretion and culinary skills when following recipes.
+            </p>
+          </div>
+
+          <div>
+            <h2 className="text-xl font-semibold">Modifications to Policies</h2>
+            <p className="mt-2">
+              Meal Master reserves the right to modify these rules and policies at any time. 
+              Users will be notified of any significant changes through the app or via email.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/client/CookingAppReact/src/pages/settings/Settings.jsx b/src/client/CookingAppReact/src/pages/settings/Settings.jsx
new file mode 100644
index 00000000..9d5daeba
--- /dev/null
+++ b/src/client/CookingAppReact/src/pages/settings/Settings.jsx
@@ -0,0 +1,94 @@
+import Preferences from "@/components/settings/Preferences";
+import { UserIcon } from "@heroicons/react/24/outline";
+import { ClipboardDocumentIcon } from "@heroicons/react/24/outline";
+import { useRef } from "react";
+import { useSelector } from "react-redux";
+import { getLoggedInUser } from "@/msal/userHelper";
+import { getToken } from "@/msal/msal";
+import { jwtDecode } from "jwt-decode";
+import toast from "react-hot-toast";
+import usePfp from "@/hooks/usePfp";
+
+export default function Settings() {
+  const isOpenRecipes = useSelector((state) => state.ui.recipesOpen);
+  const isOpenSideBar = useSelector((state) => state.ui.sidebarOpen);
+  const personal = useSelector((state) => state.user.personal);
+  const pfp = useSelector((state) => state.user.profilePicture);
+
+  const fileAttacher = useRef();
+
+  const { mutate } = usePfp();
+
+  const handleCopy = async () => {
+    const token = await getToken();
+    const decoded = jwtDecode(token);
+    await navigator.clipboard.writeText(decoded.sub);
+    toast.success("Success! Your ID has been copied to the clipboard.");
+  };
+
+  function handleImageAttachment(event) {
+    const file = event.target.files[0];
+
+    if (file) {
+      const reader = new FileReader();
+      reader.onloadend = async () => {
+        const token = await getToken();
+        mutate({ token: token, image: reader.result });
+      };
+      reader.readAsDataURL(file);
+    }
+  }
+  function uploadImage() {
+    fileAttacher.current.click();
+  }
+  return (
+    <div
+      className={`flex flex-col w-full py-10 overflow-y-auto text-primaryText
+        ${
+          isOpenRecipes && isOpenSideBar
+            ? "px-10"
+            : !isOpenRecipes && !isOpenSideBar
+            ? "px-5 sm:px-10 md:px-20 lg:px-40 xl:px-60 2xl:px-80"
+            : "px-5 sm:px-10 md:px-10 lg:px-20 xl:px-40 2xl:px-60"
+        } transition-colors duration-300`}
+    >
+      <h1 className="font-semibold text-lg mb-4">Profile</h1>
+      <div className="flex flex-row justify-between rounded-2xl border py-5 px-5 items-center shadow-sm bg-base">
+        <div className="flex flex-row items-center rounded-full gap-2">
+          {pfp !== null ? (
+            <img src={pfp} className="rounded-full object-cover w-14 h-14" />
+          ) : (
+            <UserIcon className="size-10 mr-1" />
+          )}
+          <div>
+            <h1 className="font-semibold text-lg ">{personal.name}</h1>
+            <h2 className="text-gray-500 font-semibold text-sm flex flex-row items-center text-center">
+              <button
+                onClick={handleCopy}
+                className="flex flex-row items-center text-center"
+              >
+                Copy User Id <ClipboardDocumentIcon className="ml-1 size-5" />
+              </button>
+            </h2>
+          </div>
+        </div>
+        <div className="">
+          <input
+            type="file"
+            hidden
+            accept="image/*"
+            ref={fileAttacher}
+            onChange={(event) => handleImageAttachment(event)}
+          />
+          <button
+            className="active font-semibold border rounded-full py-2 px-5"
+            onClick={uploadImage}
+          >
+            Upload
+          </button>
+        </div>
+      </div>
+      <Preferences />
+    </div>
+  );
+}
diff --git a/src/client/CookingAppReact/src/pages/subscribtion/SubscribtionDetails.jsx b/src/client/CookingAppReact/src/pages/subscribtion/SubscribtionDetails.jsx
deleted file mode 100644
index 23d3b2ea..00000000
--- a/src/client/CookingAppReact/src/pages/subscribtion/SubscribtionDetails.jsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { useSelector } from "react-redux";
-import stripe from "../../assets/by-stripe.png";
-import { FireIcon } from "@heroicons/react/24/outline";
-
-export default function SubscribtionDetails() {
-  const isOpenRecipes = useSelector((state) => state.ui.recipesOpen);
-  const isOpenSideBar = useSelector((state) => state.ui.sidebarOpen);
-
-  return (
-    <div className="flex flex-col lg:flex-row w-full h-full justify-start content-start items-start bg-orange-50 px-10 lg:pl-40">
-        <div className="flex w-full justify-center content-start items-start flex-col h-full">
-          <div>
-            <ul className="flex flex-col justify-center content-center items-start gap-5 selection:bg-orange-400">
-              <li className="text-4xl font-bold">
-                Your subscription plan:
-              </li>
-              <li>
-                <div className="bg-orange-400 text-black p-2 uppercase font-bold rounded-xl w-fit 
-                flex flex-row justify-center items-center text-center selection:bg-white
-                hover:rounded-ss-none hover:rounded-ee-none transition-all duration-100">
-                  Premium
-                </div>
-              </li>
-              <li className="text-xl font-semibold border-b-2 border-transparent hover:border-b-2 hover:border-orange-400 selection:bg-orange-400">• Unlimited messages</li>
-              <li className="text-xl font-semibold border-b-2 border-transparent hover:border-b-2 hover:border-orange-400 selection:bg-orange-400">• Unlimited chats</li>
-              <li className="text-xl font-semibold border-b-2 border-transparent hover:border-b-2 hover:border-orange-400 selection:bg-orange-400">
-                • More than enough recipies
-              </li>
-              <li className="text-xl font-semibold border-b-2 border-transparent hover:border-b-2 hover:border-orange-400 selection:bg-orange-400">
-                • Customizable dietary options
-              </li>
-              <li className="text-xl font-semibold border-b-2 border-transparent hover:border-b-2 hover:border-orange-400 selection:bg-orange-400">• Free cancellation</li>
-            </ul>
-            <button
-              className="text-white bg-black py-3 font-bold rounded-xl w-full mt-10 border-2 border-transparent hover:border-gray-300 shadow-md hover:rounded-ss-none hover:rounded-ee-none transition-all duration-100"
-            >
-              <div className=" font-semibold text-xl flex flex-row items-center justify-center text-center selection:bg-orange-400">
-                Cancel Subscribtion
-              </div>
-            </button>
-            <div className="w-full flex justify-center items-center text-center mt-2 text-base selection:bg-orange-400">
-              <img className="w-28 mr-1" src={stripe} alt="stripe" />
-            </div>
-          </div>
-        </div>
-    </div>
-  );
-}
diff --git a/src/client/CookingAppReact/src/pages/subscribtion/Subscribtion.jsx b/src/client/CookingAppReact/src/pages/subscribtion/Subscription.jsx
similarity index 80%
rename from src/client/CookingAppReact/src/pages/subscribtion/Subscribtion.jsx
rename to src/client/CookingAppReact/src/pages/subscribtion/Subscription.jsx
index 790cfb21..9de1c9e6 100644
--- a/src/client/CookingAppReact/src/pages/subscribtion/Subscribtion.jsx
+++ b/src/client/CookingAppReact/src/pages/subscribtion/Subscription.jsx
@@ -6,7 +6,7 @@ import { jwtDecode } from "jwt-decode";
 import stripe from "../../assets/by-stripe.png";
 import { FireIcon } from "@heroicons/react/24/outline";
 
-export default function Subscribtion() {
+export default function Subscription() {
   const isOpenRecipes = useSelector((state) => state.ui.recipesOpen);
   const isOpenSideBar = useSelector((state) => state.ui.sidebarOpen);
   const { data: priceIds, isPending, isError, error } = useStripeProduct();
@@ -25,36 +25,44 @@ export default function Subscribtion() {
       {priceIds && (
         <div className="flex w-full justify-center content-start items-start flex-col h-full">
           <div>
-            <ul className="flex flex-col justify-center content-center items-start gap-5 selection:bg-orange-400">
+            <ul className="flex flex-col justify-center content-center items-start gap-5 selection:bg-primary">
               <li className="text-4xl font-bold">
                 Explore our subscription plan:
               </li>
               <li>
-                <div className="bg-orange-400 text-black p-2 uppercase font-bold rounded-xl w-fit 
-                flex flex-row justify-center items-center text-center selection:bg-white
-                hover:rounded-ss-none hover:rounded-ee-none transition-all duration-100">
-                  <FireIcon className="size-7 mr-1"/> Hot offer
+                <div
+                  className="bg-primary primaryText p-2 uppercase font-bold rounded-xl w-fit 
+                flex flex-row justify-center items-center text-center selection:bg-secondary
+                hover:rounded-ss-none hover:rounded-ee-none transition-all duration-100"
+                >
+                  <FireIcon className="size-7 mr-1" /> Hot offer
                 </div>
               </li>
-              <li className="text-xl font-semibold border-b-2 border-transparent hover:border-b-2 hover:border-orange-400 selection:bg-orange-400">• Unlimited messages</li>
-              <li className="text-xl font-semibold border-b-2 border-transparent hover:border-b-2 hover:border-orange-400 selection:bg-orange-400">• Unlimited chats</li>
-              <li className="text-xl font-semibold border-b-2 border-transparent hover:border-b-2 hover:border-orange-400 selection:bg-orange-400">
+              <li className="text-xl font-semibold border-b-2 border-transparent hover:border-b-2 hover:border-orange-400 selection:bg-primary">
+                • Unlimited messages
+              </li>
+              <li className="text-xl font-semibold border-b-2 border-transparent hover:border-b-2 hover:border-orange-400 selection:bg-primary">
+                • Unlimited chats
+              </li>
+              <li className="text-xl font-semibold border-b-2 border-transparent hover:border-b-2 hover:border-orange-400 selection:bg-primary">
                 • More than enough recipies
               </li>
-              <li className="text-xl font-semibold border-b-2 border-transparent hover:border-b-2 hover:border-orange-400 selection:bg-orange-400">
+              <li className="text-xl font-semibold border-b-2 border-transparent hover:border-b-2 hover:border-orange-400 selection:bg-primary">
                 • Customizable dietary options
               </li>
-              <li className="text-xl font-semibold border-b-2 border-transparent hover:border-b-2 hover:border-orange-400 selection:bg-orange-400">• Free cancellation</li>
+              <li className="text-xl font-semibold border-b-2 border-transparent hover:border-b-2 hover:border-orange-400 selection:bg-primary">
+                • Free cancellation
+              </li>
             </ul>
             <button
               className="text-white bg-black py-3 font-bold rounded-xl w-full mt-10 border-2 border-transparent hover:border-gray-300 shadow-md hover:rounded-ss-none hover:rounded-ee-none transition-all duration-100"
               onClick={handleClick}
             >
-              <div className=" font-semibold text-xl flex flex-row items-center justify-center text-center selection:bg-orange-400">
+              <div className=" font-semibold text-xl flex flex-row items-center justify-center text-center selection:bg-primary">
                 For €8.99
               </div>
             </button>
-            <div className="w-full flex justify-center items-center text-center mt-2 text-base selection:bg-orange-400">
+            <div className="w-full flex justify-center items-center text-center mt-2 text-base selection:bg-primary">
               <img className="w-28 mr-1" src={stripe} alt="stripe" />
             </div>
           </div>
diff --git a/src/client/CookingAppReact/src/pages/subscribtion/SubscriptionDetails.jsx b/src/client/CookingAppReact/src/pages/subscribtion/SubscriptionDetails.jsx
new file mode 100644
index 00000000..29ade93c
--- /dev/null
+++ b/src/client/CookingAppReact/src/pages/subscribtion/SubscriptionDetails.jsx
@@ -0,0 +1,75 @@
+import { useSelector } from "react-redux";
+import stripe from "../../assets/by-stripe.png";
+import { FireIcon } from "@heroicons/react/24/outline";
+import useMySubscription from "@/hooks/useMySubscription";
+import useCancelSub from "@/hooks/useCancelSub";
+import { getToken } from "@/msal/msal";
+
+export default function SubscriptionDetails() {
+  const isOpenRecipes = useSelector((state) => state.ui.recipesOpen);
+  const isOpenSideBar = useSelector((state) => state.ui.sidebarOpen);
+  const { data, isPending, refetch } = useMySubscription();
+  const { mutate } = useCancelSub({ refetchFn: refetch });
+
+  async function handleCancellation() {
+    const token = await getToken();
+    mutate({ token: token, subscriptionId: data.subscriptions[0].id });
+  }
+  return (
+    <div className="flex flex-col lg:flex-row w-full h-full justify-start content-start items-start px-10 lg:pl-40 text-primaryText">
+      <div className="flex w-full justify-center content-start items-start flex-col h-full">
+        <div>
+          {data && !isPending && (
+            <>
+              <ul className="flex flex-col justify-center content-center items-start gap-5 selection:bg-orange-400">
+                <li className="text-4xl font-bold">Your subscription plan:</li>
+
+                <li>
+                  <div
+                    className="bg-orange-400 primaryText p-2 uppercase font-bold rounded-xl w-fit 
+                flex flex-row justify-center items-center text-center selection:bg-secondary
+                hover:rounded-ss-none hover:rounded-ee-none transition-all duration-100"
+                  >
+                    Premium
+                  </div>
+                  <li className="text-xl font-semibold border-b-2 border-transparent hover:border-b-2 hover:border-orange-400 selection:bg-orange-400">
+                    {data.subscriptions[0].price}€ a month
+                  </li>
+                </li>
+                <li className="text-xl font-semibold border-b-2 border-transparent hover:border-b-2 hover:border-orange-400 selection:bg-orange-400">
+                  {`Created at ${data.subscriptions[0].created}`}
+                </li>
+
+                {data.subscriptions[0].cancelAt ? (
+                  <li className="text-xl font-semibold border-b-2 border-transparent hover:border-b-2 hover:border-orange-400 selection:bg-orange-400">
+                    {`Your subscription has been cancelled and it will expire on ${data.subscriptions[0].cancelAt}`}
+                  </li>
+                ) : (
+                  <li className="text-xl font-semibold border-b-2 border-transparent hover:border-b-2 hover:border-orange-400 selection:bg-orange-400">
+                    {`Your next charge will be on ${data.subscriptions[0].currentPeriodEnd}`}
+                  </li>
+                )}
+
+                <li className="text-xl font-semibold border-b-2 border-transparent hover:border-b-2 hover:border-orange-400 selection:bg-orange-400">
+                  • Free cancellation
+                </li>
+              </ul>
+              <button
+                className={`text-white bg-black ${
+                  data.subscriptions[0].cancelAt ? "opacity-40" : "opacity-100"
+                } py-3 font-bold rounded-xl w-full mt-10 border-2 border-transparent hover:border-gray-300 shadow-md hover:rounded-ss-none hover:rounded-ee-none transition-all duration-100`}
+                disabled={data.subscriptions[0].cancelAt ? true : false}
+                onClick={handleCancellation}
+              >
+                Cancel Subscription
+              </button>
+              <div className="w-full flex justify-center items-center text-center mt-2 text-base selection:bg-orange-400">
+                <img className="w-28 mr-1" src={stripe} alt="stripe" />
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/client/CookingAppReact/src/store/uiSlice.js b/src/client/CookingAppReact/src/store/uiSlice.js
index de1e4b47..2c5a766b 100644
--- a/src/client/CookingAppReact/src/store/uiSlice.js
+++ b/src/client/CookingAppReact/src/store/uiSlice.js
@@ -5,14 +5,15 @@ import { act } from "react";
 const initialState = {
   sidebarOpen: true,
   recipesOpen: false,
+  dropdownOpen: false,
   isInitial: true,
   input: "",
   isThinking: false,
   responseError: null,
-  isDarkTheme: false,
+  theme: "Light",
   photoUri: null,
   toastMealId: null,
-
+  isMessageWarningShowed: false,
   lang: "English",
   filteredRecipes: {
     page: 0,
@@ -29,21 +30,35 @@ const uiSlice = createSlice({
     openSidebar(state) {
       state.sidebarOpen = true;
     },
-    setInput(state, action) {
-      state.input = action.payload;
+    setIsShown(state) {
+      state.isMessageWarningShowed = true;
     },
     closeSidebar(state) {
       state.sidebarOpen = false;
     },
+    toggleRecipes(state) {
+      state.recipesOpen = !state.recipesOpen;
+      if (window.innerWidth < 1300 && state.recipesOpen) {
+        state.sidebarOpen = false;
+      }
+    },
+    closeRecipes(state) {
+      if (window.innerWidth < 1300 && state.recipesOpen) {
+        state.recipesOpen = false;
+      }
+    },
+    toggleDropdown(state) {
+      state.dropdownOpen = !state.dropdownOpen;
+    },
+    setInput(state, action) {
+      state.input = action.payload;
+    },
     showToast(state, action) {
       state.toastMealId = action.payload;
     },
     hideToast(state) {
       state.toastMealId = null;
     },
-    toggleRecipes(state) {
-      state.recipesOpen = !state.recipesOpen;
-    },
     setActive(state, action) {
       state.activeChat = action.payload;
     },
@@ -63,7 +78,7 @@ const uiSlice = createSlice({
       state.isDarkTheme = !state.isDarkTheme;
     },
     setTheme(state, action) {
-      state.isDarkTheme = action.payload;
+      state.theme = action.payload;
     },
     setPhotoUri(state, action) {
       state.photoUri = action.payload;
diff --git a/src/client/CookingAppReact/src/store/userSlice.js b/src/client/CookingAppReact/src/store/userSlice.js
index a4523fd9..cd4b2803 100644
--- a/src/client/CookingAppReact/src/store/userSlice.js
+++ b/src/client/CookingAppReact/src/store/userSlice.js
@@ -1,9 +1,15 @@
+import { setProfilePicture } from "@/http/user";
 import { createSlice } from "@reduxjs/toolkit";
 const initialState = {
   selectedChat: {
     id: null,
     content: [],
   },
+  profilePicture: null,
+  personal: {
+    name: "",
+    picture: "",
+  },
   role: {
     type: null,
     limitations: {
@@ -74,6 +80,9 @@ const userSlice = createSlice({
         content: [],
       };
     },
+    setPersonal(state, action) {
+      state.personal = action.payload;
+    },
     clearChat(state) {
       state.selectedChat = null;
     },
@@ -117,6 +126,9 @@ const userSlice = createSlice({
         },
       };
     },
+    setProfilePicture(state, action) {
+      state.profilePicture = action.payload;
+    },
   },
 });
 
diff --git a/src/client/CookingAppReact/tailwind.config.js b/src/client/CookingAppReact/tailwind.config.js
index d7b54cea..1d825c5a 100644
--- a/src/client/CookingAppReact/tailwind.config.js
+++ b/src/client/CookingAppReact/tailwind.config.js
@@ -1,14 +1,23 @@
+const colors = require("tailwindcss/colors");
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   darkMode: ["class"],
   content: [
-    './pages/**/*.{js,jsx}',
-    './components/**/*.{js,jsx}',
-    './app/**/*.{js,jsx}',
-    './src/**/*.{js,jsx}',
+    "./pages/**/*.{js,jsx}",
+    "./components/**/*.{js,jsx}",
+    "./app/**/*.{js,jsx}",
+    "./src/**/*.{js,jsx}",
   ],
   prefix: "",
   theme: {
+    colors: {
+      base: "var( --base)",
+      secondary: "var(--secondary)",
+      active: "var(--active)",
+      primary: "var(--primary)",
+      primaryText: "var(--primaryText)",
+      ...colors,
+    },
     container: {
       center: true,
       padding: "2rem",
@@ -16,7 +25,7 @@ module.exports = {
         "2xl": "1400px",
       },
       boxShadow: {
-        'gray-inset': 'inset -45px 0px 51px 0px rgba(243,244,246,1)',
+        "gray-inset": "inset -45px 0px 51px 0px rgba(243,244,246,1)",
       },
     },
     extend: {
@@ -35,9 +44,16 @@ module.exports = {
         "accordion-up": "accordion-up 0.2s ease-out",
       },
       backgroundImage: {
-        'landingPage': "url('src/assets/landing/phone.jpg')"
-      }
+        landingPage: "url('src/assets/landing/phone.jpg')",
+      },
+    },
+    screens: {
+      xs: "396px",
+      sm: "480px",
+      md: "768px",
+      lg: "976px",
+      xl: "1440px",
     },
   },
   plugins: [require("tailwindcss-animate")],
-}
\ No newline at end of file
+};
diff --git a/src/client/CookingAppWeb/src/app/about/page.jsx b/src/client/CookingAppWeb/src/app/about/page.jsx
index df583730..bd430e58 100644
--- a/src/client/CookingAppWeb/src/app/about/page.jsx
+++ b/src/client/CookingAppWeb/src/app/about/page.jsx
@@ -6,15 +6,59 @@ import React from "react";
 
 import { useSelector } from "react-redux";
 const About = () => {
-  const isDarkTheme = useSelector(state => state.ui.isDarkTheme);
+  const isDarkTheme = useSelector((state) => state.ui.isDarkTheme);
 
   return (
-    <div className={`flex flex-col p-6 min-h-screen ${isDarkTheme ? "bg-[#202020]" : "bg-white"}`}>
-      <h1 className={`text-2xl font-bold mb-4 ${isDarkTheme ? "text-orange-400" : "text-orange-500"}`}>About</h1>
-      <p className={`text-base leading-6 mb-5 ${isDarkTheme ? "text-white" : "text-black"}`}>Welcome to Cooking App, where culinary passion meets exceptional service. Established in 2024, we are dedicated to bringing you a dining experience like no other. Our menu features a delightful blend of traditional and contemporary dishes, crafted from the freshest ingredients sourced locally and globally.</p>
-      <p className={`text-base leading-6 mb-5 ${isDarkTheme ? "text-white" : "text-black"}`}>At Cooking App, we believe that food is more than just sustenance; it's a way to connect, celebrate, and create memories. Whether you're here for a casual meal, a special occasion, or just a cup of our signature coffee, we strive to make every visit unforgettable.</p>
-      <p className={`text-base leading-6 mb-5 ${isDarkTheme ? "text-white" : "text-black"}`}>Our team of talented chefs and friendly staff are committed to providing you with top-notch service and a warm, inviting atmosphere. We are passionate about what we do, and it shows in every plate we serve.</p>
-      <p className={`text-base leading-6 mb-5 ${isDarkTheme ? "text-white" : "text-black"}`}>Thank you for choosing Cooking App. We look forward to welcoming you and sharing our love for food with you.</p>
+    <div
+      className={`flex flex-col p-6 min-h-screen ${
+        isDarkTheme ? "bg-[#202020]" : "bg-white"
+      }`}
+    >
+      <h1
+        className={`text-2xl font-bold mb-4 ${
+          isDarkTheme ? "text-orange-400" : "text-orange-500"
+        }`}
+      >
+        About
+      </h1>
+      <p
+        className={`text-base leading-6 mb-5 ${
+          isDarkTheme ? "text-white" : "primaryText"
+        }`}
+      >
+        Welcome to Cooking App, where culinary passion meets exceptional
+        service. Established in 2024, we are dedicated to bringing you a dining
+        experience like no other. Our menu features a delightful blend of
+        traditional and contemporary dishes, crafted from the freshest
+        ingredients sourced locally and globally.
+      </p>
+      <p
+        className={`text-base leading-6 mb-5 ${
+          isDarkTheme ? "text-white" : "primaryText"
+        }`}
+      >
+        At Cooking App, we believe that food is more than just sustenance; it's
+        a way to connect, celebrate, and create memories. Whether you're here
+        for a casual meal, a special occasion, or just a cup of our signature
+        coffee, we strive to make every visit unforgettable.
+      </p>
+      <p
+        className={`text-base leading-6 mb-5 ${
+          isDarkTheme ? "text-white" : "primaryText"
+        }`}
+      >
+        Our team of talented chefs and friendly staff are committed to providing
+        you with top-notch service and a warm, inviting atmosphere. We are
+        passionate about what we do, and it shows in every plate we serve.
+      </p>
+      <p
+        className={`text-base leading-6 mb-5 ${
+          isDarkTheme ? "text-white" : "primaryText"
+        }`}
+      >
+        Thank you for choosing Cooking App. We look forward to welcoming you and
+        sharing our love for food with you.
+      </p>
     </div>
   );
 };
diff --git a/src/client/CookingAppWeb/src/app/archived-recipes/page.jsx b/src/client/CookingAppWeb/src/app/archived-recipes/page.jsx
index 7b00a744..9f9c680d 100644
--- a/src/client/CookingAppWeb/src/app/archived-recipes/page.jsx
+++ b/src/client/CookingAppWeb/src/app/archived-recipes/page.jsx
@@ -12,7 +12,7 @@ import { getArchivedRecipes } from "@/http/recipe";
 import Recipe from "@/components/Recipe";
 
 const ArchivedRecipes = () => {
-  const isDarkTheme = useSelector(state => state.ui.isDarkTheme);
+  const isDarkTheme = useSelector((state) => state.ui.isDarkTheme);
   const router = useRouter();
   const [input, setInput] = useState("");
   const [filteredRecipes, setFilteredRecipes] = useState([]);
@@ -25,10 +25,10 @@ const ArchivedRecipes = () => {
       const decodedToken = jwtDecode(token);
       const userRecipes = await getArchivedRecipes({
         token: token,
-        userId: decodedToken.sub
+        userId: decodedToken.sub,
       });
       return userRecipes;
-    }
+    },
   });
 
   useEffect(() => {
@@ -39,7 +39,9 @@ const ArchivedRecipes = () => {
 
   useEffect(() => {
     if (data) {
-      const filtered = data.filter(recipe => recipe.title.toLowerCase().includes(input.toLowerCase()));
+      const filtered = data.filter((recipe) =>
+        recipe.title.toLowerCase().includes(input.toLowerCase())
+      );
       setFilteredRecipes(filtered);
     }
   }, [input, data]);
@@ -54,20 +56,58 @@ const ArchivedRecipes = () => {
 
   const CustomCloseIcon = ({ color }) => (
     <svg height="14" width="14" viewBox="0 0 14 14">
-      <line x1="1" y1="1" x2="13" y2="13" stroke={color} strokeWidth="2" strokeLinecap="round" />
-      <line x1="1" y1="13" x2="13" y2="1" stroke={color} strokeWidth="2" strokeLinecap="round" />
+      <line
+        x1="1"
+        y1="1"
+        x2="13"
+        y2="13"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+      />
+      <line
+        x1="1"
+        y1="13"
+        x2="13"
+        y2="1"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+      />
     </svg>
   );
 
   return (
-    <div className={`flex flex-col min-h-screen ${isDarkTheme ? "bg-[#202020]" : "bg-white"} p-4`}>
-      <h1 className={`text-3xl font-bold my-4 text-center ${isDarkTheme ? "text-white" : "text-black"}`}>Archived Recipes</h1>
+    <div
+      className={`flex flex-col min-h-screen ${
+        isDarkTheme ? "bg-[#202020]" : "bg-white"
+      } p-4`}
+    >
+      <h1
+        className={`text-3xl font-bold my-4 text-center ${
+          isDarkTheme ? "text-white" : "primaryText"
+        }`}
+      >
+        Archived Recipes
+      </h1>
       <div className="flex justify-between items-center px-4 py-2 w-full">
-        <div className={`flex items-center flex-1 border ${isDarkTheme ? "border-gray-700" : "border-gray-300"} rounded-md`}>
+        <div
+          className={`flex items-center flex-1 border ${
+            isDarkTheme ? "border-gray-700" : "border-gray-300"
+          } rounded-md`}
+        >
           <button className="ml-2" onClick={refetch}>
             <FaSearch size={24} color={isDarkTheme ? "white" : "black"} />
           </button>
-          <input type="text" className={`flex-1 p-2 ${isDarkTheme ? "text-white bg-[#202020]" : "text-black bg-white"}`} placeholder="Search for recipes" value={input} onChange={e => setInput(e.target.value)} />
+          <input
+            type="text"
+            className={`flex-1 p-2 ${
+              isDarkTheme ? "text-white bg-[#202020]" : "primaryText bg-white"
+            }`}
+            placeholder="Search for recipes"
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+          />
           {input !== "" && (
             <button onClick={clearSearch} className="pr-3 pl-2">
               <CustomCloseIcon color={isDarkTheme ? "white" : "black"} />
@@ -75,7 +115,24 @@ const ArchivedRecipes = () => {
           )}
         </div>
       </div>
-      <div className="w-full flex flex-col items-center">{isLoading ? <div className="text-center mt-4">Loading...</div> : isError ? <div className="text-center mt-4 text-red-500">Error: {error.message}</div> : filteredRecipes.map(recipe => <Recipe key={recipe.id} recipe={recipe} refetch={refetch} onClick={() => handleSelection(recipe.id)} />)}</div>
+      <div className="w-full flex flex-col items-center">
+        {isLoading ? (
+          <div className="text-center mt-4">Loading...</div>
+        ) : isError ? (
+          <div className="text-center mt-4 text-red-500">
+            Error: {error.message}
+          </div>
+        ) : (
+          filteredRecipes.map((recipe) => (
+            <Recipe
+              key={recipe.id}
+              recipe={recipe}
+              refetch={refetch}
+              onClick={() => handleSelection(recipe.id)}
+            />
+          ))
+        )}
+      </div>
     </div>
   );
 };
diff --git a/src/client/CookingAppWeb/src/app/contacts/page.jsx b/src/client/CookingAppWeb/src/app/contacts/page.jsx
index 3f7b334c..2344f884 100644
--- a/src/client/CookingAppWeb/src/app/contacts/page.jsx
+++ b/src/client/CookingAppWeb/src/app/contacts/page.jsx
@@ -11,18 +11,37 @@ const Contacts = () => {
 
   return (
     <div
-      className={`flex h-screen flex-col mx-auto mt-10 p-5 min-h-screen ${isDarkTheme ? "bg-rgba(18, 18, 18, 1)" : "bg-customWhite"}
+      className={`flex h-screen flex-col mx-auto mt-10 p-5 min-h-screen ${
+        isDarkTheme ? "bg-rgba(18, 18, 18, 1)" : "bg-customWhite"
+      }
     smallPhone:w-full
     phone:w-full
     table:w-1/2
-    web:w-1/2`}>
-      <h1 className={`text-2xl font-semibold mx-auto mb-8 ${isDarkTheme ? "text-customWhite" : "text-gray-800"}`}>Contacts</h1>
+    web:w-1/2`}
+    >
+      <h1
+        className={`text-2xl font-semibold mx-auto mb-8 ${
+          isDarkTheme ? "text-customWhite" : "text-gray-800"
+        }`}
+      >
+        Contacts
+      </h1>
 
       <div className="flex flex-col mb-5 w-full">
-        <label className={`text-lg ${isDarkTheme ? "text-customWhite" : "text-gray-800"} mb-2`}>Subject</label>
+        <label
+          className={`text-lg ${
+            isDarkTheme ? "text-customWhite" : "text-gray-800"
+          } mb-2`}
+        >
+          Subject
+        </label>
         <input
           type="text"
-          className={`h-12 border placeholder-slate-500 ${isDarkTheme ? "border-customGray600 bg-gray-700 text-customWhite placeholder:text-#fff" : "border-customLightGray bg-customLightGray text-black placeholder:text-#555"} 
+          className={`h-12 border placeholder-slate-500 ${
+            isDarkTheme
+              ? "border-customGray600 bg-gray-700 text-customWhite placeholder:text-#fff"
+              : "border-customLightGray bg-customLightGray primaryText placeholder:text-#555"
+          } 
         rounded-full px-3 w-full 
         smallPhone:px-3 smallPhone:h-12 smallPhone:text-sm 
         phone:px-6 phone:h-14 phone:text-sm 
@@ -32,9 +51,19 @@ const Contacts = () => {
         />
       </div>
       <div className="flex flex-col mb-5 w-full">
-        <label className={`text-lg ${isDarkTheme ? "text-customWhite" : "text-gray-800"} mb-2`}>Message</label>
+        <label
+          className={`text-lg ${
+            isDarkTheme ? "text-customWhite" : "text-gray-800"
+          } mb-2`}
+        >
+          Message
+        </label>
         <textarea
-          className={`h-64 border placeholder-slate-500 ${isDarkTheme ? "border-customGray600 bg-gray-700 text-customWhite placeholder:text-#fff" : "border-customLightGray bg-customLightGray text-black placeholder:text-#222"} 
+          className={`h-64 border placeholder-slate-500 ${
+            isDarkTheme
+              ? "border-customGray600 bg-gray-700 text-customWhite placeholder:text-#fff"
+              : "border-customLightGray bg-customLightGray primaryText placeholder:text-#222"
+          } 
         rounded-lg px-3 pt-2 w-full 
         smallPhone:px-5 smallPhone:pt-4 smallPhone:text-sm 
         phone:px-6 phone:pt-5 phone:text-sm 
@@ -45,12 +74,25 @@ const Contacts = () => {
         />
       </div>
       <button
-        className={`h-12 flex justify-center items-center rounded-full transition duration-300 ease-in-out ${isDarkTheme ? "bg-gray-600 border-customWhite border hover:border-gray-700 hover:text-gray-400" : "bg-customOrange border hover:border-gray-800 hover:text-gray-800 hover:shadow-lg"} w-full 
+        className={`h-12 flex justify-center items-center rounded-full transition duration-300 ease-in-out ${
+          isDarkTheme
+            ? "bg-gray-600 border-customWhite border hover:border-gray-700 hover:text-gray-400"
+            : "bg-customOrange border hover:border-gray-800 hover:text-gray-800 hover:shadow-lg"
+        } w-full 
         smallPhone:h-14 smallPhone:text-sm 
         phone:h-16 phone:text-sm 
         tablet:h-18 tablet:text-base 
-        web:h-14 web:text-base`}>
-        <span className={`text-lg ${isDarkTheme ? "text-customWhite hover:text-gray-400" : "text-gray-800 hover:text-gray-800"}`}>Send</span>
+        web:h-14 web:text-base`}
+      >
+        <span
+          className={`text-lg ${
+            isDarkTheme
+              ? "text-customWhite hover:text-gray-400"
+              : "text-gray-800 hover:text-gray-800"
+          }`}
+        >
+          Send
+        </span>
       </button>
     </div>
   );
diff --git a/src/client/CookingAppWeb/src/app/food-preferences/page.jsx b/src/client/CookingAppWeb/src/app/food-preferences/page.jsx
index 203d832f..8b405b7e 100644
--- a/src/client/CookingAppWeb/src/app/food-preferences/page.jsx
+++ b/src/client/CookingAppWeb/src/app/food-preferences/page.jsx
@@ -9,7 +9,25 @@ import { IoClose } from "react-icons/io5";
 const FoodPreferences = () => {
   const { theme } = useTheme();
   const isDarkTheme = theme === "dark";
-  const possibleAllergens = ["Peanuts", "Soy", "Egg", "Milk", "Fish", "Wheat", "Shellfish", "Tree nuts", "Sesame", "Mustard", "Celery", "Molluscs", "Sulphites", "Nuts", "Ketchup", "Onion", "Garlic"];
+  const possibleAllergens = [
+    "Peanuts",
+    "Soy",
+    "Egg",
+    "Milk",
+    "Fish",
+    "Wheat",
+    "Shellfish",
+    "Tree nuts",
+    "Sesame",
+    "Mustard",
+    "Celery",
+    "Molluscs",
+    "Sulphites",
+    "Nuts",
+    "Ketchup",
+    "Onion",
+    "Garlic",
+  ];
   const [alergens, setAlergens] = useState([]);
   const [foodPreferences, setFoodPreferences] = useState([]);
   const [alergenInput, setAlergenInput] = useState("");
@@ -20,17 +38,23 @@ const FoodPreferences = () => {
 
   const handleAddAlergen = () => {
     const normalizedInput = alergenInput.trim().toLowerCase();
-    const normalizedAllergens = possibleAllergens.map(alergen => alergen.toLowerCase());
+    const normalizedAllergens = possibleAllergens.map((alergen) =>
+      alergen.toLowerCase()
+    );
 
     if (alergenInput.trim() !== "") {
       if (!normalizedAllergens.includes(normalizedInput)) {
         setError("Allergen not found.");
       } else if (alergens.length >= 12) {
         setError("You can add a maximum of 12 allergens.");
-      } else if (alergens.map(alergen => alergen.toLowerCase()).includes(normalizedInput)) {
+      } else if (
+        alergens
+          .map((alergen) => alergen.toLowerCase())
+          .includes(normalizedInput)
+      ) {
         setError("Allergen already added.");
       } else {
-        setAlergens(prevAlergens => [...prevAlergens, alergenInput.trim()]);
+        setAlergens((prevAlergens) => [...prevAlergens, alergenInput.trim()]);
         setAlergenInput("");
         setError("");
       }
@@ -42,20 +66,27 @@ const FoodPreferences = () => {
       if (foodPreferences.includes(foodPreferenceInput.trim())) {
         setFoodError("Food preference already added.");
       } else {
-        setFoodPreferences(prevFoodPreferences => [...prevFoodPreferences, foodPreferenceInput.trim()]);
+        setFoodPreferences((prevFoodPreferences) => [
+          ...prevFoodPreferences,
+          foodPreferenceInput.trim(),
+        ]);
         setFoodPreferenceInput("");
         setFoodError("");
       }
     }
   };
 
-  const handleRemoveAlergen = indexToRemove => {
-    setAlergens(prevAlergens => prevAlergens.filter((_, index) => index !== indexToRemove));
+  const handleRemoveAlergen = (indexToRemove) => {
+    setAlergens((prevAlergens) =>
+      prevAlergens.filter((_, index) => index !== indexToRemove)
+    );
     setError("");
   };
 
-  const handleRemoveFoodPreference = indexToRemove => {
-    setFoodPreferences(prevFoodPreferences => prevFoodPreferences.filter((_, index) => index !== indexToRemove));
+  const handleRemoveFoodPreference = (indexToRemove) => {
+    setFoodPreferences((prevFoodPreferences) =>
+      prevFoodPreferences.filter((_, index) => index !== indexToRemove)
+    );
     setFoodError("");
   };
 
@@ -64,22 +95,24 @@ const FoodPreferences = () => {
     console.log("Saving preferences:", preferences);
 
     try {
-      await new Promise(resolve => setTimeout(resolve, 1000));
+      await new Promise((resolve) => setTimeout(resolve, 1000));
 
       alert("Success! Your food preferences have been saved successfully!");
     } catch (error) {
-      alert("Error! There was an error saving your preferences. Please try again.");
+      alert(
+        "Error! There was an error saving your preferences. Please try again."
+      );
     }
   };
 
-  const handleAddAlergenPressEnter = event => {
+  const handleAddAlergenPressEnter = (event) => {
     if (event.key === "Enter") {
       event.preventDefault();
       handleAddAlergen();
     }
   };
 
-  const handleAddDislikeFoodsPressEnter = event => {
+  const handleAddDislikeFoodsPressEnter = (event) => {
     if (event.key === "Enter") {
       event.preventDefault();
       handleAddFoodPreference();
@@ -93,17 +126,33 @@ const FoodPreferences = () => {
     smallPhone:w-full
     phone:w-full
     table:w-1/2
-    web:w-1/2`}>
+    web:w-1/2`}
+    >
       <div className="flex flex-col items-center">
-        <h1 className={`text-xl font-semibold mb-4 ${isDarkTheme ? "text-white" : "text-black"}`}>Food Preferences</h1>
+        <h1
+          className={`text-xl font-semibold mb-4 ${
+            isDarkTheme ? "text-white" : "primaryText"
+          }`}
+        >
+          Food Preferences
+        </h1>
 
         <div
-          className={`w-full mb-6 pb-6 ${isDarkTheme ? "bg-gray-800" : "bg-gray-200"} rounded-xl py-4 px-4 
+          className={`w-full mb-6 pb-6 ${
+            isDarkTheme ? "bg-gray-800" : "active"
+          } rounded-xl py-4 px-4 
         smallPhone:py-5 smallPhone:px-5 smallPhone:text-sm
         phone:py-6 phone:px-6 phone:text-sm
         tablet:py-7 tablet:px-7 tablet:text-base
-        web:py-8 web:px-8 web:text-base`}>
-          <h2 className={`text-lg font-semibold mb-4 ${isDarkTheme ? "text-white" : "text-black"}`}>Allergens</h2>
+        web:py-8 web:px-8 web:text-base`}
+        >
+          <h2
+            className={`text-lg font-semibold mb-4 ${
+              isDarkTheme ? "text-white" : "primaryText"
+            }`}
+          >
+            Allergens
+          </h2>
           {alergens.length > 0 ? (
             <div className="flex flex-wrap mb-4">
               {alergens.map((alergen, index) => (
@@ -114,25 +163,40 @@ const FoodPreferences = () => {
                     phone:px-3 phone:py-1.5 phone:text-sm 
                     tablet:px-4 tablet:py-2 tablet:text-base 
                     web:px-3 web:py-1 web:text-base
-                    ${isDarkTheme ? "border-blue-500 text-blue-300 bg-gray-800 hover:bg-gray-700 shadow-xl hover:shadow-2xl" : "border-gray-300 bg-white text-black shadow-md hover:border-gray-400 hover:bg-gray-100 hover:shadow-lg"}`}>
+                    ${
+                      isDarkTheme
+                        ? "border-blue-500 text-blue-300 bg-gray-800 hover:bg-gray-700 shadow-xl hover:shadow-2xl"
+                        : "border-gray-300 bg-white primaryText shadow-md hover:border-gray-400 hover:bg-base hover:shadow-lg"
+                    }`}
+                >
                   {alergen}
                   <IoClose className="ml-2" />
                 </button>
               ))}
             </div>
           ) : (
-            <p className={`${isDarkTheme ? "text-gray-400" : "text-gray-500"} text-center mb-4`}>No Allergens added</p>
+            <p
+              className={`${
+                isDarkTheme ? "text-gray-400" : "text-gray-500"
+              } text-center mb-4`}
+            >
+              No Allergens added
+            </p>
           )}
           <input
             list="allergens"
             value={alergenInput}
-            onChange={e => setAlergenInput(e.target.value)}
+            onChange={(e) => setAlergenInput(e.target.value)}
             onKeyDown={handleAddAlergenPressEnter}
             className={`border rounded-lg px-4 py-2 mb-2 w-full 
           phone:px-4 phone:py-2 phone:text-sm 
           tablet:px-4 tablet:py-2 tablet:text-base 
           web:text-base
-          ${isDarkTheme ? "border-gray-600 bg-gray-900 text-white" : "border-gray-300 bg-white text-black"}`}
+          ${
+            isDarkTheme
+              ? "border-gray-600 bg-gray-900 text-white"
+              : "border-gray-300 bg-white primaryText"
+          }`}
             placeholder="Add your allergens"
           />
           <datalist id="allergens">
@@ -141,14 +205,24 @@ const FoodPreferences = () => {
             ))}
           </datalist>
           {error && <p className="text-red-500 mb-2 text-center">{error}</p>}
-          <button onClick={handleAddAlergen} className="w-full flex items-center justify-center mt-4 transition duration-300 ease-in-out">
+          <button
+            onClick={handleAddAlergen}
+            className="w-full flex items-center justify-center mt-4 transition duration-300 ease-in-out"
+          >
             <div
               className={`w-84 px-14 py-3 bg-customOrange rounded-full flex items-center justify-center border text-sm 
               phone:px-14 phone:py-3 phone:text-sm 
               tablet:px-16 tablet:py-3.5 tablet:text-base 
               web:px-18 web:py-4 web:px-18 web:text-base 
-              ${isDarkTheme ? "border-gray-600 text-white hover:border-gray-400 hover:text-gray-400 hover:shadow-lg" : "border-gray-300 hover:border-gray-800 hover:text-gray-800 hover:shadow-lg"}`}>
-              <p className="text-black text-center text-base font-medium">Add Allergen</p>
+              ${
+                isDarkTheme
+                  ? "border-gray-600 text-white hover:border-gray-400 hover:text-gray-400 hover:shadow-lg"
+                  : "border-gray-300 hover:border-gray-800 hover:text-gray-800 hover:shadow-lg"
+              }`}
+            >
+              <p className="primaryText text-center text-base font-medium">
+                Add Allergen
+              </p>
             </div>
           </button>
         </div>
@@ -157,64 +231,103 @@ const FoodPreferences = () => {
 
         <div
           className={`w-full mb-6 pb-6 
-          ${isDarkTheme ? "bg-gray-800" : "bg-gray-200"} rounded-xl py-4 px-4
+          ${isDarkTheme ? "bg-gray-800" : "active"} rounded-xl py-4 px-4
         smallPhone:py-5 smallPhone:px-5 
         phone:py-6 phone:px-6 phone:text-sm
         tablet:py-7 tablet:px-7 tablet:text-base
-        web:py-8 web:px-8 web:text-base`}>
-          <h2 className={`text-lg font-semibold mb-4 ${isDarkTheme ? "text-white" : "text-black"}`}>Disliked Foods</h2>
+        web:py-8 web:px-8 web:text-base`}
+        >
+          <h2
+            className={`text-lg font-semibold mb-4 ${
+              isDarkTheme ? "text-white" : "primaryText"
+            }`}
+          >
+            Disliked Foods
+          </h2>
           {foodPreferences.length > 0 ? (
             <div className="flex flex-wrap mb-4">
               {foodPreferences.map((preference, index) => (
                 <button
                   key={index}
                   onClick={() => handleRemoveFoodPreference(index)}
-                  className={`border flex items-center rounded-full px-3 py-1 mx-1 mb-2 ${isDarkTheme ? "border-blue-500 text-blue-300 bg-gray-800 hover:bg-gray-700 shadow-xl hover:shadow-2xl" : "border-gray-300 bg-white text-black shadow-md hover:border-gray-400 hover:bg-gray-100 hover:shadow-lg"}
+                  className={`border flex items-center rounded-full px-3 py-1 mx-1 mb-2 ${
+                    isDarkTheme
+                      ? "border-blue-500 text-blue-300 bg-gray-800 hover:bg-gray-700 shadow-xl hover:shadow-2xl"
+                      : "border-gray-300 bg-white primaryText shadow-md hover:border-gray-400 hover:bg-base hover:shadow-lg"
+                  }
                     phone:px-3 phone:py-1.5 phone:text-sm 
                     tablet:px-4 tablet:py-2 tablet:text-base
                     web:px-3 web:py-1 web:text-base
-                    `}>
+                    `}
+                >
                   {preference}
                   <IoClose className="ml-2" />
                 </button>
               ))}
             </div>
           ) : (
-            <p className={`${isDarkTheme ? "text-gray-400" : "text-gray-500"} text-center mb-4`}>There are no disliked foods added</p>
+            <p
+              className={`${
+                isDarkTheme ? "text-gray-400" : "text-gray-500"
+              } text-center mb-4`}
+            >
+              There are no disliked foods added
+            </p>
           )}
           <input
             type="text"
             value={foodPreferenceInput}
-            onChange={e => setFoodPreferenceInput(e.target.value)}
+            onChange={(e) => setFoodPreferenceInput(e.target.value)}
             onKeyDown={handleAddDislikeFoodsPressEnter}
             className={`border rounded-lg px-4 py-2 mb-2 w-full 
             phone:px-4 phone:py-2 phone:text-sm 
             tablet:px-4 tablet:py-2 tablet:text-base  
             web:text-base
-          ${isDarkTheme ? "border-gray-600 bg-gray-900 text-white" : "border-gray-300 bg-white text-black"}`}
+          ${
+            isDarkTheme
+              ? "border-gray-600 bg-gray-900 text-white"
+              : "border-gray-300 bg-white primaryText"
+          }`}
             placeholder="Add your disliked foods"
           />
-          {foodError && <p className="text-red-500 mb-2 text-center">{foodError}</p>}
-          <button onClick={handleAddFoodPreference} className="w-full flex items-center justify-center mt-2 transition duration-300 ease-in-out">
+          {foodError && (
+            <p className="text-red-500 mb-2 text-center">{foodError}</p>
+          )}
+          <button
+            onClick={handleAddFoodPreference}
+            className="w-full flex items-center justify-center mt-2 transition duration-300 ease-in-out"
+          >
             <div
-              className={`w-84 px-16 py-3 my-3 bg-customOrange rounded-full flex items-center justify-center border ${isDarkTheme ? "border-gray-600 hover:border-gray-400 hover:text-gray-400" : "border-gray-300 hover:border-gray-800 hover:text-gray-800 hover:shadow-lg"}
+              className={`w-84 px-16 py-3 my-3 bg-customOrange rounded-full flex items-center justify-center border ${
+                isDarkTheme
+                  ? "border-gray-600 hover:border-gray-400 hover:text-gray-400"
+                  : "border-gray-300 hover:border-gray-800 hover:text-gray-800 hover:shadow-lg"
+              }
             phone:px-18 phone:py-3 phone:text-sm 
             tablet:px-20 tablet:py-3.5 tablet:text-base 
             web:px-20 web:py-4 web:text-base
-            `}>
-              <p className="text-black text-center text-base font-medium">Add Food</p>
+            `}
+            >
+              <p className="primaryText text-center text-base font-medium">
+                Add Food
+              </p>
             </div>
           </button>
           <div className="mt-4">
             <select
               value={selectedPreference}
-              onChange={e => setSelectedPreference(e.target.value)}
-              className={`border rounded-lg px-4 py-2 w-full ${isDarkTheme ? "border-gray-600 bg-gray-900 text-white" : "border-gray-300 bg-white text-black"}
+              onChange={(e) => setSelectedPreference(e.target.value)}
+              className={`border rounded-lg px-4 py-2 w-full ${
+                isDarkTheme
+                  ? "border-gray-600 bg-gray-900 text-white"
+                  : "border-gray-300 bg-white primaryText"
+              }
             text-sm smallPhone:px-4 smallPhone:py-2.5 
             phone:px-4 phone:py-2.5 phone:text-sm 
             tablet:px-5 tablet:py-3 tablet:text-base 
             web:px-6 web:py-3.5 web:text-base
-            `}>
+            `}
+            >
               <option value="none">None</option>
               <option value="vegetarian">Vegetarian</option>
               <option value="vegan">Vegan</option>
@@ -222,14 +335,24 @@ const FoodPreferences = () => {
           </div>
         </div>
 
-        <button onClick={handleSavePreferences} className="w-full flex items-center justify-center mt-4 mb-8 transition duration-300 ease-in-out">
+        <button
+          onClick={handleSavePreferences}
+          className="w-full flex items-center justify-center mt-4 mb-8 transition duration-300 ease-in-out"
+        >
           <div
-            className={`w-84 px-16 py-3 bg-green-500 rounded-full flex items-center justify-center border ${isDarkTheme ? "border-gray-600 hover:border-gray-400 hover:text-gray-400" : "border-gray-300 hover:border-gray-800 hover:text-gray-800 hover:shadow-lg"}
+            className={`w-84 px-16 py-3 bg-green-500 rounded-full flex items-center justify-center border ${
+              isDarkTheme
+                ? "border-gray-600 hover:border-gray-400 hover:text-gray-400"
+                : "border-gray-300 hover:border-gray-800 hover:text-gray-800 hover:shadow-lg"
+            }
             phone:px-18 phone:py-3 phone:text-sm 
             tablet:px-20 tablet:py-3.5 tablet:text-base 
             web:px-18 web:py-4 web:px-20 web:text-base
-            `}>
-            <p className="text-center text-base font-medium text-slate-50">Save Food</p>
+            `}
+          >
+            <p className="text-center text-base font-medium text-slate-50">
+              Save Food
+            </p>
           </div>
         </button>
       </div>
diff --git a/src/client/CookingAppWeb/src/app/language-theme/page.jsx b/src/client/CookingAppWeb/src/app/language-theme/page.jsx
index 42497d4b..334b5a8d 100644
--- a/src/client/CookingAppWeb/src/app/language-theme/page.jsx
+++ b/src/client/CookingAppWeb/src/app/language-theme/page.jsx
@@ -9,7 +9,7 @@ import { useTheme } from "next-themes";
 import { ThemeSwitcher } from "@/components/ThemeSwitcher";
 
 const LanguageAndTheme = () => {
-  const isDarkTheme = useSelector(state => state.ui.isDarkTheme);
+  const isDarkTheme = useSelector((state) => state.ui.isDarkTheme);
   const [selectedLanguage, setSelectedLanguage] = useState("English");
   const dispatch = useDispatch();
   const { theme } = useTheme();
@@ -23,18 +23,43 @@ const LanguageAndTheme = () => {
     dispatch(uiActions.setTheme(theme === "dark"));
   }, [dispatch, theme]);
 
-  const handleLanguageChange = language => {
+  const handleLanguageChange = (language) => {
     setSelectedLanguage(language);
     localStorage.setItem("language", language);
     console.log(`Language changed to: ${language}`);
   };
 
   return (
-    <div className={`h-screen flex items-start justify-center ${isDarkTheme ? "bg-customGray" : "bg-customWhite"} ${isDarkTheme ? "text-white" : "text-black"}`}>
-      <div className={`p-8 rounded-lg shadow-lg ${isDarkTheme ? "bg-customGray" : "bg-white"}`}>
-        <h1 className={`text-center text-2xl mb-6 ${isDarkTheme ? "text-white" : "text-black"}`}>Language And Theme</h1>
+    <div
+      className={`h-screen flex items-start justify-center ${
+        isDarkTheme ? "bg-customGray" : "bg-customWhite"
+      } ${isDarkTheme ? "text-white" : "primaryText"}`}
+    >
+      <div
+        className={`p-8 rounded-lg shadow-lg ${
+          isDarkTheme ? "bg-customGray" : "bg-white"
+        }`}
+      >
+        <h1
+          className={`text-center text-2xl mb-6 ${
+            isDarkTheme ? "text-white" : "primaryText"
+          }`}
+        >
+          Language And Theme
+        </h1>
         <div className="space-y-4">
-          <button onClick={() => handleLanguageChange(selectedLanguage === "English" ? "Spanish" : "English")} className={`w-full py-3 rounded-full ${isDarkTheme ? "bg-customGray400 text-white" : "bg-white text-black"} mb-4`}>
+          <button
+            onClick={() =>
+              handleLanguageChange(
+                selectedLanguage === "English" ? "Spanish" : "English"
+              )
+            }
+            className={`w-full py-3 rounded-full ${
+              isDarkTheme
+                ? "bg-customGray400 text-white"
+                : "bg-white primaryText"
+            } mb-4`}
+          >
             {`Language: ${selectedLanguage}`}
           </button>
           <ThemeSwitcher />
diff --git a/src/client/CookingAppWeb/src/app/recipes-details/page.jsx b/src/client/CookingAppWeb/src/app/recipes-details/page.jsx
index 75a51069..d88973c7 100644
--- a/src/client/CookingAppWeb/src/app/recipes-details/page.jsx
+++ b/src/client/CookingAppWeb/src/app/recipes-details/page.jsx
@@ -10,7 +10,7 @@ const RecipesDetails = () => {
   const isDarkTheme = useSelector(state => state.ui.isDarkTheme);
 
   return (
-    <div className={`flex items-center justify-center min-h-screen ${isDarkTheme ? "bg-[#202020]" : "bg-gray-100"}`}>
+    <div className={`flex items-center justify-center min-h-screen ${isDarkTheme ? "bg-[#202020]" : "bg-base
       <h1 className={`text-2xl font-bold ${isDarkTheme ? "text-white" : "text-gray-900"}`}>RecipesDetails</h1>
     </div>
   );
diff --git a/src/client/CookingAppWeb/src/app/recipes/page.jsx b/src/client/CookingAppWeb/src/app/recipes/page.jsx
index 1992a40c..efc81028 100644
--- a/src/client/CookingAppWeb/src/app/recipes/page.jsx
+++ b/src/client/CookingAppWeb/src/app/recipes/page.jsx
@@ -12,7 +12,7 @@ import { getRecipes } from "../../http/recipe";
 import Recipe from "@/components/Recipe";
 
 const Recipes = () => {
-  const isDarkTheme = useSelector(state => state.ui.isDarkTheme);
+  const isDarkTheme = useSelector((state) => state.ui.isDarkTheme);
   const router = useRouter();
   const [input, setInput] = useState("");
   const [filteredRecipes, setFilteredRecipes] = useState([]);
@@ -24,10 +24,10 @@ const Recipes = () => {
       const decodedToken = jwtDecode(token);
       const userRecipes = await getRecipes({
         token: token,
-        userId: decodedToken.sub
+        userId: decodedToken.sub,
       });
       return userRecipes;
-    }
+    },
   });
 
   const memoizedRefetch = useCallback(() => {
@@ -42,7 +42,9 @@ const Recipes = () => {
 
   useEffect(() => {
     if (data) {
-      const filtered = data.filter(recipe => recipe.title.toLowerCase().includes(input.toLowerCase()));
+      const filtered = data.filter((recipe) =>
+        recipe.title.toLowerCase().includes(input.toLowerCase())
+      );
       setFilteredRecipes(filtered);
     }
   }, [input, data]);
@@ -57,20 +59,57 @@ const Recipes = () => {
 
   const CustomCloseIcon = ({ color }) => (
     <svg height="14" width="14" viewBox="0 0 14 14">
-      <line x1="1" y1="1" x2="13" y2="13" stroke={color} strokeWidth="2" strokeLinecap="round" />
-      <line x1="1" y1="13" x2="13" y2="1" stroke={color} strokeWidth="2" strokeLinecap="round" />
+      <line
+        x1="1"
+        y1="1"
+        x2="13"
+        y2="13"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+      />
+      <line
+        x1="1"
+        y1="13"
+        x2="13"
+        y2="1"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+      />
     </svg>
   );
 
   return (
-    <div className={`flex flex-col items-center min-h-screen ${isDarkTheme ? "bg-[#202020]" : "bg-white"}`}>
-      <h1 className={`text-3xl font-bold my-4 ${isDarkTheme ? "text-white" : "text-black"}`}>Recipes</h1>
+    <div
+      className={`flex flex-col items-center min-h-screen ${
+        isDarkTheme ? "bg-[#202020]" : "bg-white"
+      }`}
+    >
+      <h1
+        className={`text-3xl font-bold my-4 ${
+          isDarkTheme ? "text-white" : "primaryText"
+        }`}
+      >
+        Recipes
+      </h1>
       <div className="flex flex-row justify-between items-center px-4 py-2 w-full">
-        <div className={`flex flex-row items-center flex-1 border ${isDarkTheme ? "border-gray-700" : "border-gray-300"} rounded-md`}>
+        <div
+          className={`flex flex-row items-center flex-1 border ${
+            isDarkTheme ? "border-gray-700" : "border-gray-300"
+          } rounded-md`}
+        >
           <button className="ml-2" onClick={memoizedRefetch}>
             <MdSearch size={24} color={isDarkTheme ? "white" : "black"} />
           </button>
-          <input className={`flex-1 p-2 ${isDarkTheme ? "text-white bg-[#202020]" : "text-black bg-white"}`} placeholder="Search for recipes" value={input} onChange={e => setInput(e.target.value)} />
+          <input
+            className={`flex-1 p-2 ${
+              isDarkTheme ? "text-white bg-[#202020]" : "primaryText bg-white"
+            }`}
+            placeholder="Search for recipes"
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+          />
           {input !== "" && (
             <button onClick={clearSearch} className="pr-3 pl-2">
               <CustomCloseIcon color={isDarkTheme ? "white" : "black"} />
@@ -78,7 +117,19 @@ const Recipes = () => {
           )}
         </div>
       </div>
-      <div className="w-full flex flex-col items-center">{isPending ? <p className={`text-2xl ${isDarkTheme ? "text-white" : "text-black"}`}>Loading...</p> : filteredRecipes.map(recipe => <Recipe key={recipe.id} recipe={recipe} refetch={memoizedRefetch} />)}</div>
+      <div className="w-full flex flex-col items-center">
+        {isPending ? (
+          <p
+            className={`text-2xl ${isDarkTheme ? "text-white" : "primaryText"}`}
+          >
+            Loading...
+          </p>
+        ) : (
+          filteredRecipes.map((recipe) => (
+            <Recipe key={recipe.id} recipe={recipe} refetch={memoizedRefetch} />
+          ))
+        )}
+      </div>
     </div>
   );
 };
diff --git a/src/client/CookingAppWeb/src/app/rules-policies/page.jsx b/src/client/CookingAppWeb/src/app/rules-policies/page.jsx
index 8fd2b218..df9223b9 100644
--- a/src/client/CookingAppWeb/src/app/rules-policies/page.jsx
+++ b/src/client/CookingAppWeb/src/app/rules-policies/page.jsx
@@ -7,34 +7,138 @@ import React from "react";
 import { useSelector } from "react-redux";
 
 const RulesAndPolicies = () => {
-  const isDarkTheme = useSelector(state => state.ui.isDarkTheme);
+  const isDarkTheme = useSelector((state) => state.ui.isDarkTheme);
 
   return (
-    <div className={`flex-1 ${isDarkTheme ? "bg-[#202020]" : "bg-white"} min-h-screen`}>
+    <div
+      className={`flex-1 ${
+        isDarkTheme ? "bg-[#202020]" : "bg-white"
+      } min-h-screen`}
+    >
       <div className="p-6">
-        <h1 className={`text-3xl font-bold mb-6 text-center ${isDarkTheme ? "text-white" : "text-black"}`}>Rules And Policies</h1>
+        <h1
+          className={`text-3xl font-bold mb-6 text-center ${
+            isDarkTheme ? "text-white" : "primaryText"
+          }`}
+        >
+          Rules And Policies
+        </h1>
 
         <div className="mb-6">
-          <h2 className={`text-2xl font-semibold mb-2 ${isDarkTheme ? "text-white" : "text-black"}`}>Usage Rules</h2>
-          <p className={`text-base mb-4 ${isDarkTheme ? "text-gray-400" : "text-gray-600"}`}>1. Use the app responsibly. Do not misuse the generated recipes.</p>
-          <p className={`text-base mb-4 ${isDarkTheme ? "text-gray-400" : "text-gray-600"}`}>2. Ensure you have the proper ingredients and tools before attempting any recipe.</p>
-          <p className={`text-base mb-4 ${isDarkTheme ? "text-gray-400" : "text-gray-600"}`}>3. Follow the instructions in the recipes carefully to achieve the best results.</p>
-          <p className={`text-base mb-4 ${isDarkTheme ? "text-gray-400" : "text-gray-600"}`}>4. Report any issues or bugs in the app to help us improve your experience.</p>
-          <p className={`text-base mb-4 ${isDarkTheme ? "text-gray-400" : "text-gray-600"}`}>5. Do not share sensitive or personal information with the chat bot. The chat bot is not designed to handle such information securely.</p>
+          <h2
+            className={`text-2xl font-semibold mb-2 ${
+              isDarkTheme ? "text-white" : "primaryText"
+            }`}
+          >
+            Usage Rules
+          </h2>
+          <p
+            className={`text-base mb-4 ${
+              isDarkTheme ? "text-gray-400" : "text-gray-600"
+            }`}
+          >
+            1. Use the app responsibly. Do not misuse the generated recipes.
+          </p>
+          <p
+            className={`text-base mb-4 ${
+              isDarkTheme ? "text-gray-400" : "text-gray-600"
+            }`}
+          >
+            2. Ensure you have the proper ingredients and tools before
+            attempting any recipe.
+          </p>
+          <p
+            className={`text-base mb-4 ${
+              isDarkTheme ? "text-gray-400" : "text-gray-600"
+            }`}
+          >
+            3. Follow the instructions in the recipes carefully to achieve the
+            best results.
+          </p>
+          <p
+            className={`text-base mb-4 ${
+              isDarkTheme ? "text-gray-400" : "text-gray-600"
+            }`}
+          >
+            4. Report any issues or bugs in the app to help us improve your
+            experience.
+          </p>
+          <p
+            className={`text-base mb-4 ${
+              isDarkTheme ? "text-gray-400" : "text-gray-600"
+            }`}
+          >
+            5. Do not share sensitive or personal information with the chat bot.
+            The chat bot is not designed to handle such information securely.
+          </p>
         </div>
 
         <div className="mb-6">
-          <h2 className={`text-2xl font-semibold mb-2 ${isDarkTheme ? "text-white" : "text-black"}`}>Privacy Policy</h2>
-          <p className={`text-base mb-4 ${isDarkTheme ? "text-gray-400" : "text-gray-600"}`}>We are committed to protecting your privacy. Please read our Privacy Policy to understand how we handle your personal information.</p>
-          <p className={`text-base mb-4 ${isDarkTheme ? "text-gray-400" : "text-gray-600"}`}>We do not share your personal information with third parties without your consent.</p>
-          <p className={`text-base mb-4 ${isDarkTheme ? "text-gray-400" : "text-gray-600"}`}>Our app may collect data to improve your user experience, such as usage statistics and preferences.</p>
+          <h2
+            className={`text-2xl font-semibold mb-2 ${
+              isDarkTheme ? "text-white" : "primaryText"
+            }`}
+          >
+            Privacy Policy
+          </h2>
+          <p
+            className={`text-base mb-4 ${
+              isDarkTheme ? "text-gray-400" : "text-gray-600"
+            }`}
+          >
+            We are committed to protecting your privacy. Please read our Privacy
+            Policy to understand how we handle your personal information.
+          </p>
+          <p
+            className={`text-base mb-4 ${
+              isDarkTheme ? "text-gray-400" : "text-gray-600"
+            }`}
+          >
+            We do not share your personal information with third parties without
+            your consent.
+          </p>
+          <p
+            className={`text-base mb-4 ${
+              isDarkTheme ? "text-gray-400" : "text-gray-600"
+            }`}
+          >
+            Our app may collect data to improve your user experience, such as
+            usage statistics and preferences.
+          </p>
         </div>
 
         <div className="mb-6">
-          <h2 className={`text-2xl font-semibold mb-2 ${isDarkTheme ? "text-white" : "text-black"}`}>Terms of Service</h2>
-          <p className={`text-base mb-4 ${isDarkTheme ? "text-gray-400" : "text-gray-600"}`}>By using our app, you agree to our Terms of Service. Please read these terms carefully before using the app.</p>
-          <p className={`text-base mb-4 ${isDarkTheme ? "text-gray-400" : "text-gray-600"}`}>We reserve the right to update these terms at any time. Continued use of the app constitutes acceptance of the new terms.</p>
-          <p className={`text-base mb-4 ${isDarkTheme ? "text-gray-400" : "text-gray-600"}`}>If you have any questions about our terms or policies, please contact our support team.</p>
+          <h2
+            className={`text-2xl font-semibold mb-2 ${
+              isDarkTheme ? "text-white" : "primaryText"
+            }`}
+          >
+            Terms of Service
+          </h2>
+          <p
+            className={`text-base mb-4 ${
+              isDarkTheme ? "text-gray-400" : "text-gray-600"
+            }`}
+          >
+            By using our app, you agree to our Terms of Service. Please read
+            these terms carefully before using the app.
+          </p>
+          <p
+            className={`text-base mb-4 ${
+              isDarkTheme ? "text-gray-400" : "text-gray-600"
+            }`}
+          >
+            We reserve the right to update these terms at any time. Continued
+            use of the app constitutes acceptance of the new terms.
+          </p>
+          <p
+            className={`text-base mb-4 ${
+              isDarkTheme ? "text-gray-400" : "text-gray-600"
+            }`}
+          >
+            If you have any questions about our terms or policies, please
+            contact our support team.
+          </p>
         </div>
       </div>
     </div>
diff --git a/src/client/CookingAppWeb/src/app/subscription/page.jsx b/src/client/CookingAppWeb/src/app/subscription/page.jsx
index beeecee4..ea375ef4 100644
--- a/src/client/CookingAppWeb/src/app/subscription/page.jsx
+++ b/src/client/CookingAppWeb/src/app/subscription/page.jsx
@@ -17,82 +17,187 @@ const Subscription = () => {
     queryFn: async () => {
       const token = localStorage.getItem("token");
       return fetchSubs(token);
-    }
+    },
   });
 
   const mutation = useMutation({
     mutationFn: createSub,
-    onSuccess: data => {
+    onSuccess: (data) => {
       console.log(data);
       window.open(data.data.invoiceUrl, "_blank").focus();
       queryClient.invalidateQueries(["subs"]);
-    }
+    },
   });
 
-  const isDarkTheme = useSelector(state => state.ui.isDarkTheme);
+  const isDarkTheme = useSelector((state) => state.ui.isDarkTheme);
   const [openFaqIndex, setOpenFaqIndex] = useState(null);
 
   async function handleSelection(id) {
     const token = localStorage.getItem("token");
     const cred = jwtDecode(token);
     console.log(cred.preferred_username);
-    mutation.mutate({ token: token, email: cred.preferred_username, priceId: id });
+    mutation.mutate({
+      token: token,
+      email: cred.preferred_username,
+      priceId: id,
+    });
   }
 
   const faqs = [
     {
       question: "What's the most frequently asked question?",
-      answer: "Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list."
+      answer:
+        "Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list.",
     },
     {
       question: "How about a second one?",
-      answer: "Answer for the second question."
+      answer: "Answer for the second question.",
     },
-    { question: "And a third?", answer: "Answer for the third question." }
+    { question: "And a third?", answer: "Answer for the third question." },
   ];
 
-  const toggleFaq = index => {
+  const toggleFaq = (index) => {
     setOpenFaqIndex(openFaqIndex === index ? null : index);
   };
 
   return (
-    <div className={`flex-1 ${isDarkTheme ? "bg-[#202020]" : "bg-white"} min-h-screen`}>
+    <div
+      className={`flex-1 ${
+        isDarkTheme ? "bg-[#202020]" : "bg-white"
+      } min-h-screen`}
+    >
       <div className="flex-1 flex flex-col items-center p-6 mt-13">
-        {/* <h1 className={`text-3xl font-bold mb-2 ${isDarkTheme ? "text-white" : "text-black"}`}>Subscription</h1> */}
-        <h1 className={`text-3xl font-bold mb-2 ${isDarkTheme ? "text-white" : "text-black"}`}>{mutation.isLoading ? "Subscribing..." : "Choose your plan"}</h1>
-        <p className={`text-lg mb-6 ${isDarkTheme ? "text-gray-400" : "text-gray-500"}`}> Change plans or cancel any time your Cooking App Subscription.</p>
+        {/* <h1 className={`text-3xl font-bold mb-2 ${isDarkTheme ? "text-white" : "primaryText"}`}>Subscription</h1> */}
+        <h1
+          className={`text-3xl font-bold mb-2 ${
+            isDarkTheme ? "text-white" : "primaryText"
+          }`}
+        >
+          {mutation.isLoading ? "Subscribing..." : "Choose your plan"}
+        </h1>
+        <p
+          className={`text-lg mb-6 ${
+            isDarkTheme ? "text-gray-400" : "text-gray-500"
+          }`}
+        >
+          {" "}
+          Change plans or cancel any time your Cooking App Subscription.
+        </p>
 
         <div className="flex flex-wrap justify-center w-full px-6 mb-10 space-x-4">
-          {isLoading && <div className="mb-4">{<Spinner size="large" color={isDarkTheme ? "#ffffff" : "#000000"} />}</div>}
+          {isLoading && (
+            <div className="mb-4">
+              {
+                <Spinner
+                  size="large"
+                  color={isDarkTheme ? "#ffffff" : "#000000"}
+                />
+              }
+            </div>
+          )}
           {isError && (
             <div className="mb-4">
-              <p className={`text-xs mb-1 ${isDarkTheme ? "text-white" : "text-black"}`}>{error.message}</p>
+              <p
+                className={`text-xs mb-1 ${
+                  isDarkTheme ? "text-white" : "primaryText"
+                }`}
+              >
+                {error.message}
+              </p>
             </div>
           )}
           {data && (
             <>
               {/* Free sub */}
-              <div className={`w-64 p-6 m-4 rounded-lg text-center ${isDarkTheme ? "bg-[#303030]" : "bg-[#FFF4E2]"}`}>
-                <p className={`text-lg font-semibold mb-2 ${isDarkTheme ? "text-white" : "text-black"}`}>Meal Master</p>
-                <p className={`text-2xl font-bold ${isDarkTheme ? "text-white" : "text-black"}`}>Free</p>
-                <p className={`text-sm font-normal mb-4 ${isDarkTheme ? "text-white" : "text-black"}`}>one time</p>
+              <div
+                className={`w-64 p-6 m-4 rounded-lg text-center ${
+                  isDarkTheme ? "bg-[#303030]" : "bg-[#FFF4E2]"
+                }`}
+              >
+                <p
+                  className={`text-lg font-semibold mb-2 ${
+                    isDarkTheme ? "text-white" : "primaryText"
+                  }`}
+                >
+                  Meal Master
+                </p>
+                <p
+                  className={`text-2xl font-bold ${
+                    isDarkTheme ? "text-white" : "primaryText"
+                  }`}
+                >
+                  Free
+                </p>
+                <p
+                  className={`text-sm font-normal mb-4 ${
+                    isDarkTheme ? "text-white" : "primaryText"
+                  }`}
+                >
+                  one time
+                </p>
                 <div className="mb-4">
-                  <p className={`text-xs mb-1 ${isDarkTheme ? "text-white" : "text-black"}`}>• Limited chats</p>
+                  <p
+                    className={`text-xs mb-1 ${
+                      isDarkTheme ? "text-white" : "primaryText"
+                    }`}
+                  >
+                    • Limited chats
+                  </p>
                 </div>
-                <button className="px-4 py-2 bg-yellow-500 rounded-full text-xs font-medium text-white">Current</button>
+                <button className="px-4 py-2 bg-yellow-500 rounded-full text-xs font-medium text-white">
+                  Current
+                </button>
               </div>
 
               {/* Subscriptions */}
-              {data.data.map(sub => (
-                <div key={sub.id} className={`w-64 p-6 m-4 rounded-lg text-center ${isDarkTheme ? "bg-[#303030]" : "bg-[#FFF4E2]"}`}>
-                  <p className={`text-lg font-semibold mb-2 ${isDarkTheme ? "text-white" : "text-black"}`}>{sub.name}</p>
-                  <p className={`text-2xl font-bold ${isDarkTheme ? "text-white" : "text-black"}`}>{sub.price}$</p>
-                  <p className={`text-sm font-normal mb-4 ${isDarkTheme ? "text-white" : "text-black"}`}>{sub.period === "year" ? "per year" : "per month"}</p>
+              {data.data.map((sub) => (
+                <div
+                  key={sub.id}
+                  className={`w-64 p-6 m-4 rounded-lg text-center ${
+                    isDarkTheme ? "bg-[#303030]" : "bg-[#FFF4E2]"
+                  }`}
+                >
+                  <p
+                    className={`text-lg font-semibold mb-2 ${
+                      isDarkTheme ? "text-white" : "primaryText"
+                    }`}
+                  >
+                    {sub.name}
+                  </p>
+                  <p
+                    className={`text-2xl font-bold ${
+                      isDarkTheme ? "text-white" : "primaryText"
+                    }`}
+                  >
+                    {sub.price}$
+                  </p>
+                  <p
+                    className={`text-sm font-normal mb-4 ${
+                      isDarkTheme ? "text-white" : "primaryText"
+                    }`}
+                  >
+                    {sub.period === "year" ? "per year" : "per month"}
+                  </p>
                   <div className="mb-4">
-                    <p className={`text-xs mb-1 ${isDarkTheme ? "text-white" : "text-black"}`}>• Unlimited chats</p>
-                    <p className={`text-xs mb-1 ${isDarkTheme ? "text-white" : "text-black"}`}>• Unlimited chats</p>
+                    <p
+                      className={`text-xs mb-1 ${
+                        isDarkTheme ? "text-white" : "primaryText"
+                      }`}
+                    >
+                      • Unlimited chats
+                    </p>
+                    <p
+                      className={`text-xs mb-1 ${
+                        isDarkTheme ? "text-white" : "primaryText"
+                      }`}
+                    >
+                      • Unlimited chats
+                    </p>
                   </div>
-                  <button className="px-4 py-2 bg-yellow-500 rounded-full text-xs font-medium text-white" onClick={() => handleSelection(sub.priceId)}>
+                  <button
+                    className="px-4 py-2 bg-yellow-500 rounded-full text-xs font-medium text-white"
+                    onClick={() => handleSelection(sub.priceId)}
+                  >
                     Select
                   </button>
                 </div>
@@ -101,17 +206,46 @@ const Subscription = () => {
           )}
         </div>
         <div className="w-full items-start px-6">
-          <h2 className={`text-2xl font-bold mb-4 ${isDarkTheme ? "text-white" : "text-black"}`}>Heading for FAQs</h2>
+          <h2
+            className={`text-2xl font-bold mb-4 ${
+              isDarkTheme ? "text-white" : "primaryText"
+            }`}
+          >
+            Heading for FAQs
+          </h2>
         </div>
         {faqs.map((faq, index) => (
           <div key={index} className="mb-6 w-full px-6">
-            <button onClick={() => toggleFaq(index)} className="w-full text-left">
+            <button
+              onClick={() => toggleFaq(index)}
+              className="w-full text-left"
+            >
               <div className="flex justify-between items-center">
-                <p className={`text-lg font-semibold ${isDarkTheme ? "text-white" : "text-black"}`}>{faq.question}</p>
-                <p className={`text-2xl font-semibold ${isDarkTheme ? "text-white" : "text-black"}`}>{openFaqIndex === index ? "-" : "+"}</p>
+                <p
+                  className={`text-lg font-semibold ${
+                    isDarkTheme ? "text-white" : "primaryText"
+                  }`}
+                >
+                  {faq.question}
+                </p>
+                <p
+                  className={`text-2xl font-semibold ${
+                    isDarkTheme ? "text-white" : "primaryText"
+                  }`}
+                >
+                  {openFaqIndex === index ? "-" : "+"}
+                </p>
               </div>
             </button>
-            {openFaqIndex === index && <p className={`text-base mt-2 ${isDarkTheme ? "text-gray-400" : "text-gray-600"}`}>{faq.answer}</p>}
+            {openFaqIndex === index && (
+              <p
+                className={`text-base mt-2 ${
+                  isDarkTheme ? "text-gray-400" : "text-gray-600"
+                }`}
+              >
+                {faq.answer}
+              </p>
+            )}
           </div>
         ))}
       </div>
diff --git a/src/client/CookingAppWeb/src/app/user-menu/page.jsx b/src/client/CookingAppWeb/src/app/user-menu/page.jsx
index cde46d7a..c33b2b1c 100644
--- a/src/client/CookingAppWeb/src/app/user-menu/page.jsx
+++ b/src/client/CookingAppWeb/src/app/user-menu/page.jsx
@@ -4,17 +4,28 @@
 import "tailwindcss/tailwind.css";
 import React, { useEffect } from "react";
 import { useRouter } from "next/navigation";
-import SignOutButton from '@/components//auth/SignOutButton'
+import SignOutButton from "@/components//auth/SignOutButton";
 
 import { useDispatch, useSelector } from "react-redux";
 import { uiActions } from "@/store/ui-slice";
-import { FaUserCircle, FaUtensils, FaCreditCard, FaLeaf, FaArchive, FaLanguage, FaFileAlt, FaInfoCircle, FaEnvelope, FaSignOutAlt } from "react-icons/fa";
+import {
+  FaUserCircle,
+  FaUtensils,
+  FaCreditCard,
+  FaLeaf,
+  FaArchive,
+  FaLanguage,
+  FaFileAlt,
+  FaInfoCircle,
+  FaEnvelope,
+  FaSignOutAlt,
+} from "react-icons/fa";
 
 const UserMenu = () => {
   const router = useRouter();
-  const isDarkTheme = useSelector(state => state.ui.isDarkTheme);
+  const isDarkTheme = useSelector((state) => state.ui.isDarkTheme);
   const dispatch = useDispatch();
-  const photoUri = useSelector(state => state.ui.photoUri);
+  const photoUri = useSelector((state) => state.ui.photoUri);
 
   useEffect(() => {
     const savedPhotoUri = localStorage.getItem("photoUri");
@@ -23,7 +34,7 @@ const UserMenu = () => {
     }
   }, [dispatch]);
 
-  const handleImageUpload = event => {
+  const handleImageUpload = (event) => {
     const file = event.target.files[0];
     if (file) {
       const reader = new FileReader();
@@ -39,51 +50,170 @@ const UserMenu = () => {
   };
 
   return (
-    <div className={`flex flex-col ${isDarkTheme ? "bg-[#202020]" : "bg-white"} min-h-screen w-66 p-4`}>
+    <div
+      className={`flex flex-col ${
+        isDarkTheme ? "bg-[#202020]" : "bg-white"
+      } min-h-screen w-66 p-4`}
+    >
       <div className="flex justify-start w-full mb-4">
-        <h1 className={`text-2xl font-bold ${isDarkTheme ? "text-white" : "text-black"}`}>User Menu</h1>
+        <h1
+          className={`text-2xl font-bold ${
+            isDarkTheme ? "text-white" : "primaryText"
+          }`}
+        >
+          User Menu
+        </h1>
       </div>
       <div className="flex justify-center w-full mb-8 relative">
-        {photoUri ? <img src={photoUri} alt="Profile" className="w-24 h-24 rounded-full object-cover cursor-pointer" onClick={() => document.getElementById("fileInput").click()} style={{ width: "8rem", height: "8rem" }} /> : <FaUserCircle className="w-24 h-24 cursor-pointer" color={isDarkTheme ? "white" : "black"} onClick={() => document.getElementById("fileInput").click()} style={{ width: "6rem", height: "6rem" }} />}
-        <input type="file" id="fileInput" accept="image/*" style={{ display: "none" }} onChange={handleImageUpload} />
+        {photoUri ? (
+          <img
+            src={photoUri}
+            alt="Profile"
+            className="w-24 h-24 rounded-full object-cover cursor-pointer"
+            onClick={() => document.getElementById("fileInput").click()}
+            style={{ width: "8rem", height: "8rem" }}
+          />
+        ) : (
+          <FaUserCircle
+            className="w-24 h-24 cursor-pointer"
+            color={isDarkTheme ? "white" : "black"}
+            onClick={() => document.getElementById("fileInput").click()}
+            style={{ width: "6rem", height: "6rem" }}
+          />
+        )}
+        <input
+          type="file"
+          id="fileInput"
+          accept="image/*"
+          style={{ display: "none" }}
+          onChange={handleImageUpload}
+        />
       </div>
       <div className="flex flex-col items-start w-full space-y-6">
-        <div className="flex items-center w-full mb-2 cursor-pointer" onClick={() => router.push("/recipes")} title="Recipes">
-          <FaUtensils className="w-6 h-6 mr-4" color={isDarkTheme ? "white" : "black"} />
-          <span className={`text-lg ${isDarkTheme ? "text-white" : "text-black"}`}>Recipes</span>
+        <div
+          className="flex items-center w-full mb-2 cursor-pointer"
+          onClick={() => router.push("/recipes")}
+          title="Recipes"
+        >
+          <FaUtensils
+            className="w-6 h-6 mr-4"
+            color={isDarkTheme ? "white" : "black"}
+          />
+          <span
+            className={`text-lg ${isDarkTheme ? "text-white" : "primaryText"}`}
+          >
+            Recipes
+          </span>
         </div>
-        <div className="flex items-center w-full mb-2 cursor-pointer" onClick={() => router.push("/subscription")} title="Subscription">
-          <FaCreditCard className="w-6 h-6 mr-4" color={isDarkTheme ? "white" : "black"} />
-          <span className={`text-lg ${isDarkTheme ? "text-white" : "text-black"}`}>Subscription</span>
+        <div
+          className="flex items-center w-full mb-2 cursor-pointer"
+          onClick={() => router.push("/subscription")}
+          title="Subscription"
+        >
+          <FaCreditCard
+            className="w-6 h-6 mr-4"
+            color={isDarkTheme ? "white" : "black"}
+          />
+          <span
+            className={`text-lg ${isDarkTheme ? "text-white" : "primaryText"}`}
+          >
+            Subscription
+          </span>
         </div>
-        <div className="flex items-center w-full mb-2 cursor-pointer" onClick={() => router.push("/food-preferences")} title="Food Preferences">
-          <FaLeaf className="w-6 h-6 mr-4" color={isDarkTheme ? "white" : "black"} />
-          <span className={`text-lg ${isDarkTheme ? "text-white" : "text-black"}`}>Food Preferences</span>
+        <div
+          className="flex items-center w-full mb-2 cursor-pointer"
+          onClick={() => router.push("/food-preferences")}
+          title="Food Preferences"
+        >
+          <FaLeaf
+            className="w-6 h-6 mr-4"
+            color={isDarkTheme ? "white" : "black"}
+          />
+          <span
+            className={`text-lg ${isDarkTheme ? "text-white" : "primaryText"}`}
+          >
+            Food Preferences
+          </span>
         </div>
-        <div className="flex items-center w-full mb-2 cursor-pointer" onClick={() => router.push("/archived-recipes")} title="Archived Recipes">
-          <FaArchive className="w-6 h-6 mr-4" color={isDarkTheme ? "white" : "black"} />
-          <span className={`text-lg ${isDarkTheme ? "text-white" : "text-black"}`}>Archived Recipes</span>
+        <div
+          className="flex items-center w-full mb-2 cursor-pointer"
+          onClick={() => router.push("/archived-recipes")}
+          title="Archived Recipes"
+        >
+          <FaArchive
+            className="w-6 h-6 mr-4"
+            color={isDarkTheme ? "white" : "black"}
+          />
+          <span
+            className={`text-lg ${isDarkTheme ? "text-white" : "primaryText"}`}
+          >
+            Archived Recipes
+          </span>
         </div>
-        <div className="flex items-center w-full mb-2 cursor-pointer" onClick={() => router.push("/language-theme")} title="Language & Theme">
-          <FaLanguage className="w-6 h-6 mr-4" color={isDarkTheme ? "white" : "black"} />
-          <span className={`text-lg ${isDarkTheme ? "text-white" : "text-black"}`}>Language & Theme</span>
+        <div
+          className="flex items-center w-full mb-2 cursor-pointer"
+          onClick={() => router.push("/language-theme")}
+          title="Language & Theme"
+        >
+          <FaLanguage
+            className="w-6 h-6 mr-4"
+            color={isDarkTheme ? "white" : "black"}
+          />
+          <span
+            className={`text-lg ${isDarkTheme ? "text-white" : "primaryText"}`}
+          >
+            Language & Theme
+          </span>
         </div>
-        <div className="flex items-center w-full mb-2 cursor-pointer" onClick={() => router.push("/rules-policies")} title="Rules And Policies">
-          <FaFileAlt className="w-6 h-6 mr-4" color={isDarkTheme ? "white" : "black"} />
-          <span className={`text-lg ${isDarkTheme ? "text-white" : "text-black"}`}>Rules And Policies</span>
+        <div
+          className="flex items-center w-full mb-2 cursor-pointer"
+          onClick={() => router.push("/rules-policies")}
+          title="Rules And Policies"
+        >
+          <FaFileAlt
+            className="w-6 h-6 mr-4"
+            color={isDarkTheme ? "white" : "black"}
+          />
+          <span
+            className={`text-lg ${isDarkTheme ? "text-white" : "primaryText"}`}
+          >
+            Rules And Policies
+          </span>
         </div>
-        <div className="flex items-center w-full mb-2 cursor-pointer" onClick={() => router.push("/about")} title="About">
-          <FaInfoCircle className="w-6 h-6 mr-4" color={isDarkTheme ? "white" : "black"} />
-          <span className={`text-lg ${isDarkTheme ? "text-white" : "text-black"}`}>About</span>
+        <div
+          className="flex items-center w-full mb-2 cursor-pointer"
+          onClick={() => router.push("/about")}
+          title="About"
+        >
+          <FaInfoCircle
+            className="w-6 h-6 mr-4"
+            color={isDarkTheme ? "white" : "black"}
+          />
+          <span
+            className={`text-lg ${isDarkTheme ? "text-white" : "primaryText"}`}
+          >
+            About
+          </span>
         </div>
-        <div className="flex items-center w-full mb-2 cursor-pointer" onClick={() => router.push("/contacts")} title="Contacts">
-          <FaEnvelope className="w-6 h-6 mr-4" color={isDarkTheme ? "white" : "black"} />
-          <span className={`text-lg ${isDarkTheme ? "text-white" : "text-black"}`}>Contacts</span>
+        <div
+          className="flex items-center w-full mb-2 cursor-pointer"
+          onClick={() => router.push("/contacts")}
+          title="Contacts"
+        >
+          <FaEnvelope
+            className="w-6 h-6 mr-4"
+            color={isDarkTheme ? "white" : "black"}
+          />
+          <span
+            className={`text-lg ${isDarkTheme ? "text-white" : "primaryText"}`}
+          >
+            Contacts
+          </span>
         </div>
       </div>
 
       <div className="mt-auto mb-4">
-      <SignOutButton />
+        <SignOutButton />
       </div>
     </div>
   );
diff --git a/src/client/CookingAppWeb/src/components/Recipe.jsx b/src/client/CookingAppWeb/src/components/Recipe.jsx
index 299335e8..34cc411c 100644
--- a/src/client/CookingAppWeb/src/components/Recipe.jsx
+++ b/src/client/CookingAppWeb/src/components/Recipe.jsx
@@ -7,10 +7,16 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useSelector } from "react-redux";
 import { archive } from "@/http/recipe";
 
-import { FaArchive, FaRegBookmark, FaClock, FaUtensils, FaSpinner } from "react-icons/fa";
+import {
+  FaArchive,
+  FaRegBookmark,
+  FaClock,
+  FaUtensils,
+  FaSpinner,
+} from "react-icons/fa";
 
 export default function Recipe({ recipe, refetch }) {
-  const isDarkTheme = useSelector(state => state.ui.isDarkTheme);
+  const isDarkTheme = useSelector((state) => state.ui.isDarkTheme);
   const [loading, setLoading] = useState(false);
   const router = useRouter();
   const queryClient = useQueryClient();
@@ -23,10 +29,10 @@ export default function Recipe({ recipe, refetch }) {
       refetch();
       setLoading(false);
     },
-    onError: error => {
+    onError: (error) => {
       console.error(error);
       setLoading(false);
-    }
+    },
   });
 
   function handleSelection() {
@@ -44,21 +50,73 @@ export default function Recipe({ recipe, refetch }) {
 
   return (
     <div onClick={handleSelection} className="cursor-pointer">
-      <div className={`bg-white w-80 m-4 rounded-lg shadow-md overflow-hidden ${isDarkTheme ? "bg-[#303030]" : "bg-white"}`}>
-        <img src={recipe.imageUrl} alt={recipe.title} className="w-full h-40 object-cover" />
+      <div
+        className={`bg-white w-80 m-4 rounded-lg shadow-md overflow-hidden ${
+          isDarkTheme ? "bg-[#303030]" : "bg-white"
+        }`}
+      >
+        <img
+          src={recipe.imageUrl}
+          alt={recipe.title}
+          className="w-full h-40 object-cover"
+        />
         <div className="p-4 flex flex-col">
           <div className="flex flex-row justify-between items-center">
-            <h2 className={`text-xl font-bold ${isDarkTheme ? "text-white" : "text-black"}`}>{recipe.title}</h2>
-            {loading ? <FaSpinner className={`animate-spin ${isDarkTheme ? "text-white" : "text-black"} mr-2`} /> : <div onClick={archiveThisRecipe}>{recipe.isArchived ? <FaArchive className={isDarkTheme ? "text-white" : "text-black"} size={24} /> : <FaRegBookmark className={isDarkTheme ? "text-white" : "text-black"} size={24} />}</div>}
+            <h2
+              className={`text-xl font-bold ${
+                isDarkTheme ? "text-white" : "primaryText"
+              }`}
+            >
+              {recipe.title}
+            </h2>
+            {loading ? (
+              <FaSpinner
+                className={`animate-spin ${
+                  isDarkTheme ? "text-white" : "primaryText"
+                } mr-2`}
+              />
+            ) : (
+              <div onClick={archiveThisRecipe}>
+                {recipe.isArchived ? (
+                  <FaArchive
+                    className={isDarkTheme ? "text-white" : "primaryText"}
+                    size={24}
+                  />
+                ) : (
+                  <FaRegBookmark
+                    className={isDarkTheme ? "text-white" : "primaryText"}
+                    size={24}
+                  />
+                )}
+              </div>
+            )}
           </div>
 
           <div className="flex flex-row justify-start items-center">
-            <FaClock size={20} className={isDarkTheme ? "text-white" : "text-black"} />
-            <span className={`text-[16px] font-semibold ml-1 ${isDarkTheme ? "text-white" : "text-black"}`}>{recipe.duration}</span>
+            <FaClock
+              size={20}
+              className={isDarkTheme ? "text-white" : "primaryText"}
+            />
+            <span
+              className={`text-[16px] font-semibold ml-1 ${
+                isDarkTheme ? "text-white" : "primaryText"
+              }`}
+            >
+              {recipe.duration}
+            </span>
           </div>
           <div className="flex flex-row justify-start items-center">
-            <FaUtensils size={20} className={isDarkTheme ? "text-white" : "text-black"} />
-            <span className={`text-[16px] font-semibold ml-1 pt-1 ${isDarkTheme ? "text-white" : "text-black"}`}>{recipe.numberOfPortions}</span>
+            <FaUtensils
+              size={20}
+              className={isDarkTheme ? "text-white" : "primaryText"}
+            />
+            <span
+              className={`text-[16px] font-semibold ml-1 pt-1 ${
+                isDarkTheme ? "text-white" : "primaryText"
+              }`}
+            >
+              {recipe.numberOfPortions}
+            </span>
           </div>
         </div>
       </div>
diff --git a/src/client/CookingAppWeb/src/components/ThemeSwitcher.jsx b/src/client/CookingAppWeb/src/components/ThemeSwitcher.jsx
index f3e4a06c..52a51bd8 100644
--- a/src/client/CookingAppWeb/src/components/ThemeSwitcher.jsx
+++ b/src/client/CookingAppWeb/src/components/ThemeSwitcher.jsx
@@ -20,10 +20,17 @@ export function ThemeSwitcher() {
     setTheme(newTheme);
   };
 
-  const isDarkTheme = useSelector(state => state.ui.isDarkTheme);
+  const isDarkTheme = useSelector((state) => state.ui.isDarkTheme);
 
   return (
-    <button onClick={toggleTheme} className={`w-full py-3 rounded-full ${isDarkTheme ? "bg-customGray400 text-white" : "bg-white text-black"} border ${isDarkTheme ? "border-customGray400" : "border-customGray600"}`}>
+    <button
+      onClick={toggleTheme}
+      className={`w-full py-3 rounded-full ${
+        isDarkTheme ? "bg-customGray400 text-white" : "bg-white primaryText"
+      } border ${
+        isDarkTheme ? "border-customGray400" : "border-customGray600"
+      }`}
+    >
       {isDarkTheme ? "Dark Mode" : "Light Mode"}
     </button>
   );
diff --git a/src/client/CookingAppWeb/src/components/auth/SignOutButton.jsx b/src/client/CookingAppWeb/src/components/auth/SignOutButton.jsx
index f2d6b576..9852abce 100644
--- a/src/client/CookingAppWeb/src/components/auth/SignOutButton.jsx
+++ b/src/client/CookingAppWeb/src/components/auth/SignOutButton.jsx
@@ -1,11 +1,15 @@
-'use client'
+"use client";
 import { handleLogout } from "@/msal/msal";
 
 const SignOutButton = () => {
   return (
-    <button className="flex items-center" title="Sign Out" onClick={() => handleLogout("redirect")}>
-    <span className={`text-lg text-black`}>Sign Out</span>
-  </button>
+    <button
+      className="flex items-center"
+      title="Sign Out"
+      onClick={() => handleLogout("redirect")}
+    >
+      <span className={`text-lg primaryText`}>Sign Out</span>
+    </button>
   );
 };
-export default SignOutButton;
\ No newline at end of file
+export default SignOutButton;
diff --git a/src/client/CookingAppWeb/src/components/bot/ChatError.jsx b/src/client/CookingAppWeb/src/components/bot/ChatError.jsx
index 7109ea13..77ef5316 100644
--- a/src/client/CookingAppWeb/src/components/bot/ChatError.jsx
+++ b/src/client/CookingAppWeb/src/components/bot/ChatError.jsx
@@ -5,13 +5,22 @@ import { useSelector } from "react-redux";
 import { FaLaptop } from "react-icons/fa";
 
 const ChatError = ({ message }) => {
-  const isDarkTheme = useSelector(state => state.ui.isDarkTheme);
+  const isDarkTheme = useSelector((state) => state.ui.isDarkTheme);
 
   return (
     <div className="p-4 bg-red-600 shadow-lg rounded-lg m-4">
       <div className="flex flex-row items-center">
-        <FaLaptop size={24} className={isDarkTheme ? "text-white" : "text-black"} />
-        <span className={`ml-2 text-sm font-semibold italic ${isDarkTheme ? "text-white" : "text-black"}`}>{message}</span>
+        <FaLaptop
+          size={24}
+          className={isDarkTheme ? "text-white" : "primaryText"}
+        />
+        <span
+          className={`ml-2 text-sm font-semibold italic ${
+            isDarkTheme ? "text-white" : "primaryText"
+          }`}
+        >
+          {message}
+        </span>
       </div>
     </div>
   );
diff --git a/src/client/CookingAppWeb/src/components/bot/ChatInput.jsx b/src/client/CookingAppWeb/src/components/bot/ChatInput.jsx
index 09179623..05628a97 100644
--- a/src/client/CookingAppWeb/src/components/bot/ChatInput.jsx
+++ b/src/client/CookingAppWeb/src/components/bot/ChatInput.jsx
@@ -6,9 +6,9 @@ import { PaperclipIcon, ArrowUpCircle } from "lucide-react";
 import useChatMutation from "@/hooks/useChatMutation";
 
 export default function ChatInput({ isPending }) {
-  const input = useSelector(state => state.ui.input);
-  const isDarkTheme = useSelector(state => state.ui.isDarkTheme);
-  const selectedChat = useSelector(state => state.user.selectedChat);
+  const input = useSelector((state) => state.ui.input);
+  const isDarkTheme = useSelector((state) => state.ui.isDarkTheme);
+  const selectedChat = useSelector((state) => state.user.selectedChat);
   const { mutate, isPending: isChatPending } = useChatMutation();
   const fileInputRef = useRef(null);
 
@@ -19,9 +19,9 @@ export default function ChatInput({ isPending }) {
   }
 
   async function resizeImage(file) {
-    return new Promise(resolve => {
+    return new Promise((resolve) => {
       const reader = new FileReader();
-      reader.onload = readerEvent => {
+      reader.onload = (readerEvent) => {
         const image = new Image();
         image.onload = () => {
           const canvas = document.createElement("canvas");
@@ -53,7 +53,7 @@ export default function ChatInput({ isPending }) {
     dispatch(
       userActions.selectChat({
         ...selectedChat,
-        content: [...(selectedChat?.content || []), newContent]
+        content: [...(selectedChat?.content || []), newContent],
       })
     );
 
@@ -61,7 +61,7 @@ export default function ChatInput({ isPending }) {
       token,
       chatId: selectedChat ? selectedChat.id : null,
       type,
-      content
+      content,
     });
 
     dispatch(uiActions.setInput(""));
@@ -72,14 +72,46 @@ export default function ChatInput({ isPending }) {
   }
 
   return (
-    <div className={`flex w-3/4 flex-row justify-center items-center border ${isDarkTheme ? "border-gray-700 bg-gray-900" : "border-gray-300 bg-amber-50"} rounded-lg px-2 mx-1`}>
+    <div
+      className={`flex w-3/4 flex-row justify-center items-center border ${
+        isDarkTheme
+          ? "border-gray-700 bg-gray-900"
+          : "border-gray-300 bg-amber-50"
+      } rounded-lg px-2 mx-1`}
+    >
       <button onClick={openFileDialog} className="p-1" disabled={isPending}>
-        <PaperclipIcon className={`w-5 h-5 ${isDarkTheme ? "text-white" : "text-[#EAB308]"} ${isPending ? "text-gray-400" : ""}`} />
+        <PaperclipIcon
+          className={`w-5 h-5 ${
+            isDarkTheme ? "text-white" : "text-[#EAB308]"
+          } ${isPending ? "text-gray-400" : ""}`}
+        />
       </button>
-      <input type="file" ref={fileInputRef} onChange={handleFileChange} accept="image/*" style={{ display: "none" }} />
-      <input type="text" className={`flex-1 h-10 px-1 ${isDarkTheme ? "text-white bg-gray-900" : "text-black bg-amber-50"}`} placeholder="Message MealMasterBot" value={input} onChange={handleTyping} />
-      <button onClick={() => sendMessage(input)} className="p-1" disabled={isPending || !input}>
-        <ArrowUpCircle className={`w-6 h-6 ${isDarkTheme ? "text-white" : "text-[#EAB308]"} ${isPending || !input ? "text-gray-400" : ""}`} />
+      <input
+        type="file"
+        ref={fileInputRef}
+        onChange={handleFileChange}
+        accept="image/*"
+        style={{ display: "none" }}
+      />
+      <input
+        type="text"
+        className={`flex-1 h-10 px-1 ${
+          isDarkTheme ? "text-white bg-gray-900" : "primaryText bg-amber-50"
+        }`}
+        placeholder="Message MealMasterBot"
+        value={input}
+        onChange={handleTyping}
+      />
+      <button
+        onClick={() => sendMessage(input)}
+        className="p-1"
+        disabled={isPending || !input}
+      >
+        <ArrowUpCircle
+          className={`w-6 h-6 ${
+            isDarkTheme ? "text-white" : "text-[#EAB308]"
+          } ${isPending || !input ? "text-gray-400" : ""}`}
+        />
       </button>
     </div>
   );
diff --git a/src/client/CookingAppWeb/src/components/bot/Home.jsx b/src/client/CookingAppWeb/src/components/bot/Home.jsx
index 6faa5f8f..a17d5a27 100644
--- a/src/client/CookingAppWeb/src/components/bot/Home.jsx
+++ b/src/client/CookingAppWeb/src/components/bot/Home.jsx
@@ -15,11 +15,11 @@ import useSaveRecipe from "@/hooks/useSaveRecipe";
 const Home = () => {
   const router = useRouter();
   const { save, isLoading } = useSaveRecipe();
-  const isDarkTheme = useSelector(state => state.ui.isDarkTheme);
-  const isThinking = useSelector(state => state.ui.isThinking);
-  const responseError = useSelector(state => state.ui.responseError);
-  const chat = useSelector(state => state.user.selectedChat);
-  const profileImage = useSelector(state => state.ui.photoUri);
+  const isDarkTheme = useSelector((state) => state.ui.isDarkTheme);
+  const isThinking = useSelector((state) => state.ui.isThinking);
+  const responseError = useSelector((state) => state.ui.responseError);
+  const chat = useSelector((state) => state.user.selectedChat);
+  const profileImage = useSelector((state) => state.ui.photoUri);
   const dispatch = useDispatch();
 
   useEffect(() => {
@@ -49,22 +49,100 @@ const Home = () => {
         <div className={`flex-1 ${isDarkTheme ? "bg-[#202020]" : "bg-white"}`}>
           <div className="p-6 mt-10">
             {chat.content.map((msg, index) => (
-              <div key={index} className="mb-2 flex flex-row justify-start wrap pt-1">
-                {msg.role === "user" ? profileImage ? <Image src={profileImage} alt="Profile" className="w-8 h-8 rounded-full mr-2 mb-7" /> : <div className={`mr-2 mb-7 items-start -mt-1 ${isDarkTheme ? "text-white" : "text-black"}`}>👤</div> : <Image src="/icon2.png" alt="Icon" className="w-8 h-8 rounded-full mr-2 mb-7 items-start -mt-1" />}
+              <div
+                key={index}
+                className="mb-2 flex flex-row justify-start wrap pt-1"
+              >
+                {msg.role === "user" ? (
+                  profileImage ? (
+                    <Image
+                      src={profileImage}
+                      alt="Profile"
+                      className="w-8 h-8 rounded-full mr-2 mb-7"
+                    />
+                  ) : (
+                    <div
+                      className={`mr-2 mb-7 items-start -mt-1 ${
+                        isDarkTheme ? "text-white" : "primaryText"
+                      }`}
+                    >
+                      👤
+                    </div>
+                  )
+                ) : (
+                  <Image
+                    src="/icon2.png"
+                    alt="Icon"
+                    className="w-8 h-8 rounded-full mr-2 mb-7 items-start -mt-1"
+                  />
+                )}
                 <div>
-                  <p className={`text-base font-semibold mb-1 ${isDarkTheme ? "text-white" : "text-black"}`}>{msg.role === "user" ? "You" : "MealMasterBot"}:</p>
-                  {msg.role === "user" && msg.type === "Text" && <p className={`text-base mr-4 w-screen mb-1 ${isDarkTheme ? "text-white" : "text-black"}`}>{msg.content}</p>}
-                  {msg.role === "user" && msg.type === "Image" && <img src={msg.content} alt="User content" className="w-32 h-32 rounded-md mr-2 mb-7" />}
+                  <p
+                    className={`text-base font-semibold mb-1 ${
+                      isDarkTheme ? "text-white" : "primaryText"
+                    }`}
+                  >
+                    {msg.role === "user" ? "You" : "MealMasterBot"}:
+                  </p>
+                  {msg.role === "user" && msg.type === "Text" && (
+                    <p
+                      className={`text-base mr-4 w-screen mb-1 ${
+                        isDarkTheme ? "text-white" : "primaryText"
+                      }`}
+                    >
+                      {msg.content}
+                    </p>
+                  )}
+                  {msg.role === "user" && msg.type === "Image" && (
+                    <img
+                      src={msg.content}
+                      alt="User content"
+                      className="w-32 h-32 rounded-md mr-2 mb-7"
+                    />
+                  )}
                   {msg.role === "bot" && msg.type === "Recipe" && (
                     <>
-                      <p className={`max-w-full mr-12 text-base mb-1 ${isDarkTheme ? "text-white" : "text-black"}`}>{msg.content}</p>
-                      <button onClick={() => handleRecipeSave(msg.content)} className="mx-2 self-end">
-                        {!isLoading && <div className={`text-${isDarkTheme ? "white" : "black"}`}>🍴</div>}
-                        {isLoading && <div className={`mr-2 ${isDarkTheme ? "text-white" : "text-black"}`}>Loading...</div>}
+                      <p
+                        className={`max-w-full mr-12 text-base mb-1 ${
+                          isDarkTheme ? "text-white" : "primaryText"
+                        }`}
+                      >
+                        {msg.content}
+                      </p>
+                      <button
+                        onClick={() => handleRecipeSave(msg.content)}
+                        className="mx-2 self-end"
+                      >
+                        {!isLoading && (
+                          <div
+                            className={`text-${
+                              isDarkTheme ? "white" : "black"
+                            }`}
+                          >
+                            🍴
+                          </div>
+                        )}
+                        {isLoading && (
+                          <div
+                            className={`mr-2 ${
+                              isDarkTheme ? "text-white" : "primaryText"
+                            }`}
+                          >
+                            Loading...
+                          </div>
+                        )}
                       </button>
                     </>
                   )}
-                  {msg.role === "bot" && msg.type === "Text" && <p className={`max-w-full mr-12 text-base mb-1 ${isDarkTheme ? "text-white" : "text-black"}`}>{msg.content}</p>}
+                  {msg.role === "bot" && msg.type === "Text" && (
+                    <p
+                      className={`max-w-full mr-12 text-base mb-1 ${
+                        isDarkTheme ? "text-white" : "primaryText"
+                      }`}
+                    >
+                      {msg.content}
+                    </p>
+                  )}
                 </div>
               </div>
             ))}
@@ -77,18 +155,48 @@ const Home = () => {
 
     return (
       <div className="flex w-full h-full justify-center items-center flex-col p-5">
-        <Image src="/Main/icon2.png" alt="Icon" width={104} height={104} className="w-26 h-26 mb-2" />
-        <p className={`text-lg font-bold ${isDarkTheme ? "text-white" : "text-black"}`}>Let's figure out a recipe</p>
-        <p className={`text-base ${isDarkTheme ? "text-gray-400" : "text-black"}`}>Begin by typing a message</p>
+        <Image
+          src="/Main/icon2.png"
+          alt="Icon"
+          width={104}
+          height={104}
+          className="w-26 h-26 mb-2"
+        />
+        <p
+          className={`text-lg font-bold ${
+            isDarkTheme ? "text-white" : "primaryText"
+          }`}
+        >
+          Let's figure out a recipe
+        </p>
+        <p
+          className={`text-base ${
+            isDarkTheme ? "text-gray-400" : "primaryText"
+          }`}
+        >
+          Begin by typing a message
+        </p>
       </div>
     );
   };
 
   return (
-    <div className={`flex flex-col items-center justify-center pt-22 w-full h-full ${isDarkTheme ? "bg-[#202020]" : "bg-white"}`}>
+    <div
+      className={`flex flex-col items-center justify-center pt-22 w-full h-full ${
+        isDarkTheme ? "bg-[#202020]" : "bg-white"
+      }`}
+    >
       <NavBar />
       <div className="flex-grow w-full">{renderPost()}</div>
-      <div className={`flex w-full flex-row justify-center mb-5 ${isDarkTheme ? "border-gray-700 bg-[#202020]" : "border-gray-300 bg-white"}`}>{<ChatInput isLoading={isLoading} />}</div>
+      <div
+        className={`flex w-full flex-row justify-center mb-5 ${
+          isDarkTheme
+            ? "border-gray-700 bg-[#202020]"
+            : "border-gray-300 bg-white"
+        }`}
+      >
+        {<ChatInput isLoading={isLoading} />}
+      </div>
     </div>
   );
 };
diff --git a/src/client/CookingAppWeb/src/components/navigation/Sidebar.jsx b/src/client/CookingAppWeb/src/components/navigation/Sidebar.jsx
index 0d871050..5a60f7ce 100644
--- a/src/client/CookingAppWeb/src/components/navigation/Sidebar.jsx
+++ b/src/client/CookingAppWeb/src/components/navigation/Sidebar.jsx
@@ -11,9 +11,9 @@ import useSelectChat from "../../hooks/useSelectChat";
 import useChatHistory from "../../hooks/useChatHistory";
 
 const Sidebar = ({ open, setOpen }) => {
-  const isDarkTheme = useSelector(state => state.ui.isDarkTheme);
-  const chat = useSelector(state => state.user.selectedChat);
-  const chatHistory = useSelector(state => state.user.chatHistory);
+  const isDarkTheme = useSelector((state) => state.ui.isDarkTheme);
+  const chat = useSelector((state) => state.user.selectedChat);
+  const chatHistory = useSelector((state) => state.user.chatHistory);
   const selectChat = useSelectChat();
   const { refetchChatHistory } = useChatHistory();
   const dispatch = useDispatch();
@@ -22,7 +22,7 @@ const Sidebar = ({ open, setOpen }) => {
     refetchChatHistory();
   }, [chat]);
 
-  const handleChatPress = async chat => {
+  const handleChatPress = async (chat) => {
     selectChat(chat);
     setOpen(false);
   };
@@ -32,7 +32,7 @@ const Sidebar = ({ open, setOpen }) => {
     setOpen(false);
   };
 
-  const getSectionTitle = date => {
+  const getSectionTitle = (date) => {
     const today = new Date();
     const chatDate = new Date(date);
 
@@ -60,12 +60,27 @@ const Sidebar = ({ open, setOpen }) => {
       return acc;
     }, {});
 
-  const orderedSections = ["Today", "Yesterday", "Previous 7 days", "Previous 30 days", "Older than 30 days"];
+  const orderedSections = [
+    "Today",
+    "Yesterday",
+    "Previous 7 days",
+    "Previous 30 days",
+    "Older than 30 days",
+  ];
 
   return (
     <div className={`fixed inset-0 z-10 ${open ? "block" : "hidden"}`}>
-      <div className="absolute inset-0 bg-black opacity-50" onClick={() => setOpen(false)}></div>
-      <div className={`absolute top-0 bottom-0 left-0 w-72 p-4 ${isDarkTheme ? "bg-gray-800" : "bg-white"} transform ${open ? "translate-x-0" : "-translate-x-full"} transition-transform duration-300 ease-in-out`}>
+      <div
+        className="absolute inset-0 bg-black opacity-50"
+        onClick={() => setOpen(false)}
+      ></div>
+      <div
+        className={`absolute top-0 bottom-0 left-0 w-72 p-4 ${
+          isDarkTheme ? "bg-gray-800" : "bg-white"
+        } transform ${
+          open ? "translate-x-0" : "-translate-x-full"
+        } transition-transform duration-300 ease-in-out`}
+      >
         <div className="flex items-center justify-between mb-4">
           <button onClick={startNewChat} className="ml-2">
             <FaCommentDots size={24} color={isDarkTheme ? "white" : "black"} />
@@ -78,12 +93,24 @@ const Sidebar = ({ open, setOpen }) => {
         <div className="overflow-y-auto">
           {chatHistory &&
             orderedSections.map(
-              sectionTitle =>
+              (sectionTitle) =>
                 sortedChatHistory[sectionTitle] && (
                   <div key={sectionTitle} className="mb-6">
-                    <h3 className={`text-lg font-bold ${isDarkTheme ? "text-white" : "text-gray-700"}`}>{sectionTitle}</h3>
+                    <h3
+                      className={`text-lg font-bold ${
+                        isDarkTheme ? "text-white" : "text-gray-700"
+                      }`}
+                    >
+                      {sectionTitle}
+                    </h3>
                     {sortedChatHistory[sectionTitle].map((chat, idx) => (
-                      <button key={idx} onClick={() => handleChatPress(chat)} className={`block w-full text-left pl-4 pr-4 py-2 ${isDarkTheme ? "text-white" : "text-gray-700"} hover:bg-gray-200 dark:hover:bg-gray-700`}>
+                      <button
+                        key={idx}
+                        onClick={() => handleChatPress(chat)}
+                        className={`block w-full text-left pl-4 pr-4 py-2 ${
+                          isDarkTheme ? "text-white" : "text-gray-700"
+                        } hover:active:hover:bg-gray-700`}
+                      >
                         {chat.title}
                       </button>
                     ))}
diff --git a/src/server/CookingApp/Common/Helpers/Profiles/CreateRole.cs b/src/server/CookingApp/Common/Helpers/Profiles/CreateRole.cs
index e8e0875b..e94da4a6 100644
--- a/src/server/CookingApp/Common/Helpers/Profiles/CreateRole.cs
+++ b/src/server/CookingApp/Common/Helpers/Profiles/CreateRole.cs
@@ -16,8 +16,8 @@ public static Role Free()
                 Limitations = new Limitations()
                 {
                     ChatFromDate = DateTime.Now,
-                    ChatGeneration = 20,  
-                    RecipeGeneration = 0
+                    ChatGeneration = 10,  
+                    RecipeGeneration = 2
                 }
             };
         }
@@ -28,7 +28,9 @@ public static Role Premium()
                 Type = RoleType.Premium,
                 Limitations = new Limitations()
                 {
-                    RecipeGeneration = 20
+                    ChatFromDate = DateTime.Now,
+                    ChatGeneration = 20,
+                    RecipeGeneration = 30
                 }
             };
         }
diff --git a/src/server/CookingApp/Common/LimitationMessages.cs b/src/server/CookingApp/Common/LimitationMessages.cs
new file mode 100644
index 00000000..d69bd1d3
--- /dev/null
+++ b/src/server/CookingApp/Common/LimitationMessages.cs
@@ -0,0 +1,17 @@
+using CookingApp.Models.Enums;
+
+namespace CookingApp.Common
+{
+    public static class LimitationMessages
+    {
+        public static readonly Dictionary<ProcessResult,string> ProcessMessages =new Dictionary<ProcessResult,string>()
+        {
+            {
+                ProcessResult.MessageLimitationFailed,"You have reached the maximum number of messages!"
+            },
+            {
+                ProcessResult.RecipeLimitationFailed,"You have reached the maximum number of recipe generations!"
+            },    
+        };
+    }
+}
diff --git a/src/server/CookingApp/Controllers/AdminController.cs b/src/server/CookingApp/Controllers/AdminController.cs
index 6e3eaced..5b34f06d 100644
--- a/src/server/CookingApp/Controllers/AdminController.cs
+++ b/src/server/CookingApp/Controllers/AdminController.cs
@@ -4,6 +4,7 @@
     using CookingApp.Models.Enums;
     using CookingApp.Services.Limitation;
     using CookingApp.Services.Stripe;
+    using CookingApp.Services.UserProfile;
     using CookingApp.ViewModels.Api;
     using CookingApp.ViewModels.Stripe.Customer;
     using CookingApp.ViewModels.Stripe.Statistics;
@@ -11,7 +12,10 @@
     using Microsoft.AspNetCore.Mvc;
 
     [ApiController]
-    public class AdminController(IStripeService stripeService, ILimitationService limitationService, IHttpContextAccessor contextAccessor) : ControllerBase
+    public class AdminController(IStripeService stripeService,
+        ILimitationService limitationService, 
+        IUserProfileService userProfileService, 
+        IHttpContextAccessor contextAccessor) : ControllerBase
     {
         [HttpGet("subscribers-count")]
         public async Task<IActionResult> GetSubsCount()
@@ -103,5 +107,20 @@ public async Task<IActionResult> GetIncome30DaysBack()
                 Status = 403
             };
         }
+
+        [HttpPost("gift-tokens/{userId}")]
+        public async Task<IActionResult> GiftTokensByUid(string userId)
+        {
+            var limitResult = await limitationService.ProcessAdminLimitations(GetUser.ProfileId(contextAccessor));
+
+            if (limitResult == ProcessResult.LimitationSuccessfull)
+            {
+                await userProfileService.GiftTokens(userId);
+            }
+            return new ApiResponse<IActionResult>()
+            {
+                Status = 200
+            };
+        }
     }
 }
diff --git a/src/server/CookingApp/Controllers/ChatController.cs b/src/server/CookingApp/Controllers/ChatController.cs
index 7f2ee55a..1d6ab371 100644
--- a/src/server/CookingApp/Controllers/ChatController.cs
+++ b/src/server/CookingApp/Controllers/ChatController.cs
@@ -13,6 +13,7 @@ namespace CookingApp.Controllers
     using Microsoft.AspNetCore.Http;
     using Microsoft.AspNetCore.Mvc;
     using System.ComponentModel.DataAnnotations;
+    using CookingApp.Common;
 
     [ApiController]
     public class ChatController(IChatService chatService,
@@ -36,10 +37,10 @@ public async Task<IActionResult> SendMessage([FromBody] MessageData message)
                 };
             }
 
-            return new ApiResponse<ProcessResult>()
+            return new ApiResponse<string>()
             {
                 Status = 403,
-                Data = limitationResult
+                Data = LimitationMessages.ProcessMessages[limitationResult]
             };
         }
 
diff --git a/src/server/CookingApp/Controllers/RecipeController.cs b/src/server/CookingApp/Controllers/RecipeController.cs
index e3a7596c..16729fb2 100644
--- a/src/server/CookingApp/Controllers/RecipeController.cs
+++ b/src/server/CookingApp/Controllers/RecipeController.cs
@@ -8,6 +8,7 @@
 using System.ComponentModel.DataAnnotations;
 using CookingApp.Infrastructure.Extensions;
 using CookingApp.ViewModels.Recipes;
+using CookingApp.Common;
 
 namespace CookingApp.Controllers
 {
@@ -32,10 +33,10 @@ public async Task<IActionResult> CreateRecipe([FromBody] string request)
                 };
             }
 
-            return new ApiResponse<ProcessResult>()
+            return new ApiResponse<string>()
             {
                 Status = 403,
-                Data = limitationResult
+                Data = LimitationMessages.ProcessMessages[limitationResult]
             };
         }
 
diff --git a/src/server/CookingApp/Controllers/StripeController.cs b/src/server/CookingApp/Controllers/StripeController.cs
index 07f17668..bb64da79 100644
--- a/src/server/CookingApp/Controllers/StripeController.cs
+++ b/src/server/CookingApp/Controllers/StripeController.cs
@@ -1,4 +1,6 @@
 
+using CookingApp.ViewModels.Stripe.Customer;
+
 namespace CookingApp.Controllers
 {
     using CookingApp.Services.Stripe;
@@ -23,6 +25,18 @@ public async Task<ApiResponse<List<string>>> GetProductsAsync()
 
         }
 
+        [HttpGet("my-subscription")]
+        public async Task<ApiResponse<CustomerData>> GetMySubscription()
+        {
+            var sub = await stripeService.GetSubscription();
+            return new ApiResponse<CustomerData>()
+            {
+                Status = 200,
+                Data = sub
+            };
+        }
+
+
         [HttpPost("subscription")]
         public async Task<ApiResponse<SubscriptionCreationResponse>> CreateSubscriptionAsync([FromBody] SubscriptionCreation model)
         {
@@ -35,10 +49,10 @@ public async Task<ApiResponse<SubscriptionCreationResponse>> CreateSubscriptionA
             };
         }
 
-        [HttpPost("cancel")]
-        public async Task<ApiResponse<SubscriptionCancellationResponse>> CancelSubscriptionAsync([FromBody] SubscriptionCancellation model)
+        [HttpPost("cancel/{subscriptionId}")]
+        public async Task<ApiResponse<SubscriptionCancellationResponse>> CancelSubscriptionAsync(string subscriptionId)
         {
-            var subscription = await stripeService.CancelSubscriptionAsync(model);
+            var subscription = await stripeService.CancelSubscriptionAsync(subscriptionId);
 
             return new ApiResponse<SubscriptionCancellationResponse>()
             {
diff --git a/src/server/CookingApp/Controllers/UserProfileController.cs b/src/server/CookingApp/Controllers/UserProfileController.cs
index af2390e2..331a3906 100644
--- a/src/server/CookingApp/Controllers/UserProfileController.cs
+++ b/src/server/CookingApp/Controllers/UserProfileController.cs
@@ -1,10 +1,12 @@
 using CookingApp.Common.Helpers.Profiles;
+using CookingApp.Services.File;
 using CookingApp.Services.UserProfile;
 using CookingApp.ViewModels.Api;
 using CookingApp.ViewModels.Profile;
 using Microsoft.AspNetCore.Http;
 using Microsoft.AspNetCore.Mvc;
 
+
 namespace CookingApp.Controllers
 {
     [ApiController]
@@ -20,7 +22,7 @@ public async Task<IActionResult> FetchProfile()
             return new ApiResponse<ProfileFetchResult>()
             {
                 Status = 200,
-                Data = await userProfileService.FetchProfile(userId)
+                Data = await userProfileService.FetchProfile(userId,httpContextAccessor)
             };
         }
 
@@ -45,5 +47,15 @@ public async Task<IActionResult> SavePreferences([FromBody] PreferencesRequest r
                 Status = 200
             };
         }
+
+        [HttpPost("upload-pfp")]
+        public async Task<IActionResult> UploadPfp([FromBody] string image)
+        {
+            await userProfileService.UploadPfp(image);
+            return new ApiResponse<bool>()
+            {
+                Status = 200
+            };
+        }
     }
 }
diff --git a/src/server/CookingApp/Infrastructure/Attributes/DateTimeFormatAttribute.cs b/src/server/CookingApp/Infrastructure/Attributes/DateTimeFormatAttribute.cs
new file mode 100644
index 00000000..a8067967
--- /dev/null
+++ b/src/server/CookingApp/Infrastructure/Attributes/DateTimeFormatAttribute.cs
@@ -0,0 +1,12 @@
+using System;
+
+[AttributeUsage(AttributeTargets.Property)]
+sealed class DateTimeFormatAttribute : Attribute
+{
+    public string Format { get; }
+
+    public DateTimeFormatAttribute(string format)
+    {
+        Format = format;
+    }
+}
diff --git a/src/server/CookingApp/Infrastructure/Configurations/Stripe/StripeOptions.cs b/src/server/CookingApp/Infrastructure/Configurations/Stripe/StripeOptions.cs
index 3c8d447f..2107831a 100644
--- a/src/server/CookingApp/Infrastructure/Configurations/Stripe/StripeOptions.cs
+++ b/src/server/CookingApp/Infrastructure/Configurations/Stripe/StripeOptions.cs
@@ -5,5 +5,7 @@ public class StripeOptions
         public string PublishableKey { get; set; } = string.Empty;
         public string SecretKey { get; set; } = string.Empty;
         public string WebhookSecret { get; set; } = string.Empty;
+        public string SuccessRoute { get; set; } = string.Empty;
+
     }
 }
diff --git a/src/server/CookingApp/Infrastructure/Extensions/ServiceCollectionExtensions.cs b/src/server/CookingApp/Infrastructure/Extensions/ServiceCollectionExtensions.cs
index aa4aefa9..92e00a27 100644
--- a/src/server/CookingApp/Infrastructure/Extensions/ServiceCollectionExtensions.cs
+++ b/src/server/CookingApp/Infrastructure/Extensions/ServiceCollectionExtensions.cs
@@ -144,11 +144,12 @@ public static IHostApplicationBuilder AddStripeIntegration(this WebApplicationBu
             builder.Services.AddScoped<SessionService>();
             string apiKey = builder.Configuration.GetValue<string>("StripeOptions:SecretKey") ?? string.Empty;
             string webhookSecret = builder.Configuration.GetValue<string>("StripeOptions:WebhookSecret") ?? string.Empty;
-
+            string successRoute = builder.Configuration.GetValue<string>("StripeOptions:SuccessRoute") ?? string.Empty;
             builder.Services.Configure<StripeOptions>(options =>
             {
                 options.SecretKey = apiKey;
                 options.WebhookSecret = webhookSecret;
+                options.SuccessRoute = successRoute;
             });
             StripeConfiguration.ApiKey = apiKey;
             StripeConfiguration.StripeClient = new StripeClient(apiKey);
diff --git a/src/server/CookingApp/Models/UserProfile.cs b/src/server/CookingApp/Models/UserProfile.cs
index 1493b366..088a311a 100644
--- a/src/server/CookingApp/Models/UserProfile.cs
+++ b/src/server/CookingApp/Models/UserProfile.cs
@@ -18,6 +18,9 @@ public class UserProfile : MongoEntity
         [BsonElement("stripe-id")]
         public string StripeId { get; set; } = default!;
 
+        [BsonElement("image")]
+        public string ImageUrl { get; set; } = default!;
+
         [BsonElement("role")]
         public Role Role { get; set; } = default!;
 
diff --git a/src/server/CookingApp/Services/Limitation/LimitationService.cs b/src/server/CookingApp/Services/Limitation/LimitationService.cs
index 26d334d3..141debc5 100644
--- a/src/server/CookingApp/Services/Limitation/LimitationService.cs
+++ b/src/server/CookingApp/Services/Limitation/LimitationService.cs
@@ -12,10 +12,37 @@ public async Task<ProcessResult> ProcessUserMessageLimitations(string userId)
             var user = await repo.GetFirstOrDefaultAsync(a => a.UserId == userId);
             ArgumentNullException.ThrowIfNull(user, nameof(user));
 
-            if (user.Role.Type == RoleType.Premium || user.Role.Type == RoleType.Admin)
+            if (user.Role.Type == RoleType.Admin)
             {
                 return ProcessResult.MessageLimitationSuccessfull;
             }
+            else if (user.Role.Type == RoleType.Premium)
+            {
+                var today = DateTime.UtcNow;
+                var chatDate = user.Role.Limitations.ChatFromDate;
+                ArgumentNullException.ThrowIfNull(chatDate, nameof(chatDate));
+                var endDate = chatDate.Value.AddHours(5);
+
+                if (today >= chatDate.Value && today <= endDate)
+                {
+                    if (user.Role.Limitations.ChatGeneration > 0)
+                    {
+                        user.Role.Limitations.ChatGeneration--;
+                        await repo.UpdateAsync(user);
+                        return ProcessResult.MessageLimitationSuccessfull;
+                    }
+                    else
+                    {
+                        return ProcessResult.MessageLimitationFailed;
+                    }
+                }
+
+                user.Role.Limitations.ChatFromDate = today;
+                user.Role.Limitations.ChatGeneration = 20;
+                await repo.UpdateAsync(user);
+
+                return ProcessResult.MessageLimitationSuccessfull;
+            }
             else
             {
                 var today = DateTime.UtcNow;
@@ -42,6 +69,7 @@ public async Task<ProcessResult> ProcessUserMessageLimitations(string userId)
 
                 return ProcessResult.MessageLimitationSuccessfull;
             }
+
         }
 
         public async Task<ProcessResult> ProcessUserRecipeLimitations(string userId)
@@ -49,31 +77,23 @@ public async Task<ProcessResult> ProcessUserRecipeLimitations(string userId)
             var user = await repo.GetFirstOrDefaultAsync(a => a.UserId == userId);
             ArgumentNullException.ThrowIfNull(user, nameof(user));
 
-            if (user.Role.Type == RoleType.Free)
+            if (user.Role.Limitations.RecipeGeneration <= 0)
             {
                 return ProcessResult.RecipeLimitationFailed;
             }
-            else if (user.Role.Type == RoleType.Premium)
+            else if (user.Role.Limitations.RecipeGeneration > 0)
             {
-                if (user.Role.Limitations.RecipeGeneration > 0)
-                {
-                    user.Role.Limitations.RecipeGeneration--;
-                    await repo.UpdateAsync(user);
-                    return ProcessResult.RecipeLimitationSuccessfull;
-                }
-                else
-                {
-                    return ProcessResult.RecipeLimitationFailed;
-                }
+                user.Role.Limitations.RecipeGeneration--;
+                await repo.UpdateAsync(user);
+
+                return ProcessResult.RecipeLimitationSuccessfull;
             }
             else if (user.Role.Type == RoleType.Admin)
             {
                 return ProcessResult.RecipeLimitationSuccessfull;
             }
-            else
-            {
-                return ProcessResult.RecipeLimitationFailed;
-            }
+
+            return ProcessResult.RecipeLimitationFailed;
         }
 
         public async Task<ProcessResult> ProcessAdminLimitations(string userId)
diff --git a/src/server/CookingApp/Services/Stripe/IStripeService.cs b/src/server/CookingApp/Services/Stripe/IStripeService.cs
index 5b754e87..d443f779 100644
--- a/src/server/CookingApp/Services/Stripe/IStripeService.cs
+++ b/src/server/CookingApp/Services/Stripe/IStripeService.cs
@@ -10,9 +10,11 @@ public interface IStripeService
     {
         Task<IEnumerable<string>> GetProductsAsync();
         Task<SubscriptionCreationResponse> CreateSubscriptionAsync(SubscriptionCreation model);
-        Task<SubscriptionCancellationResponse> CancelSubscriptionAsync(SubscriptionCancellation model);
+        Task<SubscriptionCancellationResponse> CancelSubscriptionAsync(string subscriptionId);
         Task<List<CustomerData>> GetAllSubs();
         Task<SubscriptionStatistics> GetSubsStats();
         Task<IncomeStatistics> GetIncome30DaysBack();
+
+        Task<CustomerData> GetSubscription();
     }
 }
diff --git a/src/server/CookingApp/Services/Stripe/StripeService.cs b/src/server/CookingApp/Services/Stripe/StripeService.cs
index f1515a23..0e929ebd 100644
--- a/src/server/CookingApp/Services/Stripe/StripeService.cs
+++ b/src/server/CookingApp/Services/Stripe/StripeService.cs
@@ -38,7 +38,6 @@ public async Task<IEnumerable<string>> GetProductsAsync()
 
             foreach (var product in products)
             {
-
                 var price = await priceService.GetAsync(product.DefaultPriceId);
                 result.Add(price.Id);
             }
@@ -46,6 +45,8 @@ public async Task<IEnumerable<string>> GetProductsAsync()
             return result;
         }
 
+
+
         /// <summary>
         /// Creates a subscription with a status "default_incomplete" because the subscription
         /// requires a payment. It automatically generates an an initial Invoice.
@@ -73,7 +74,7 @@ public async Task<SubscriptionCreationResponse> CreateSubscriptionAsync(Subscrip
             
             var options = new SessionCreateOptions
                 {
-                    SuccessUrl = $"http://localhost:5173/success",
+                    SuccessUrl = $"{stripeOptions.Value.SuccessRoute}",
                     Mode = "subscription",
                     LineItems = new List<SessionLineItemOptions>
                         {
@@ -124,15 +125,15 @@ public async Task<SubscriptionCreationResponse> CreateSubscriptionAsync(Subscrip
         /// <summary>
         /// Cancels a subscription immediatly. The customer will not be charged again for the subscription
         /// </summary>
-        public async Task<SubscriptionCancellationResponse> CancelSubscriptionAsync(SubscriptionCancellation model)
+        public async Task<SubscriptionCancellationResponse> CancelSubscriptionAsync(string subscriptionId)
         {
-            ArgumentException.ThrowIfNullOrEmpty(model.SubscriptionId);
-            var sub = await subscriptionService.GetAsync(model.SubscriptionId);
+            ArgumentException.ThrowIfNullOrEmpty(subscriptionId);
+            var sub = await subscriptionService.GetAsync(subscriptionId);
             var options = new SubscriptionUpdateOptions
             {
                 CancelAtPeriodEnd=true
             };
-            subscriptionService.Update(model.SubscriptionId, options);
+            subscriptionService.Update(subscriptionId, options);
 
 
             return new SubscriptionCancellationResponse(sub.CurrentPeriodEnd);
@@ -158,6 +159,33 @@ public async Task<List<CustomerData>> GetAllSubs()
             return allActiveUsers;
         }
 
+        public async Task<CustomerData> GetSubscription()
+        {
+            var user = await GetUser.Profile(httpContextAccessor, userRepo);
+            var stripeCustomer = await customerService.GetAsync(user.StripeId);
+            var customer = mapper.Map<CustomerData>(stripeCustomer);
+
+            var subscriptionListOptions = new SubscriptionListOptions
+            {
+                Customer = customer.Id,
+            };
+
+            var subscriptions = await subscriptionService.ListAsync(subscriptionListOptions);
+            customer.Subscriptions = mapper.Map<List<SubscriptionState>>(subscriptions.Data);
+
+            var sub = await subscriptionService.GetAsync(subscriptions.First().Id);
+            if (sub.Items != null && sub.Items.Data.Count > 0)
+            { 
+                var subscriptionItem = sub.Items.Data.First();
+                var priceId = subscriptionItem.Price.Id;
+                var price = await priceService.GetAsync(priceId);
+                customer.Subscriptions.First().Price = price.UnitAmountDecimal/100;
+
+            }
+        
+            return customer;
+        }
+
         public async Task<SubscriptionStatistics> GetSubsStats()
         {
             var subStats = new SubscriptionStatistics();
diff --git a/src/server/CookingApp/Services/UserProfile/IUserProfileService.cs b/src/server/CookingApp/Services/UserProfile/IUserProfileService.cs
index bfa99b21..5e58de0a 100644
--- a/src/server/CookingApp/Services/UserProfile/IUserProfileService.cs
+++ b/src/server/CookingApp/Services/UserProfile/IUserProfileService.cs
@@ -4,10 +4,12 @@ namespace CookingApp.Services.UserProfile
 {
     public interface IUserProfileService
     {
-        Task<ProfileFetchResult> FetchProfile(string userId);
+        Task<ProfileFetchResult> FetchProfile(string userId,IHttpContextAccessor httpContextAccessor);
 
         Task ConfigurePreferences(ConfigurePreferencesRequest configureProfileRequest);
 
-        Task SaveInterfacePreferences (PreferencesRequest preferencesRequest);
+        Task SaveInterfacePreferences(PreferencesRequest preferencesRequest);
+        Task GiftTokens(string userId);
+        Task UploadPfp(string image);
     }
 }
diff --git a/src/server/CookingApp/Services/UserProfile/UserProfileService.cs b/src/server/CookingApp/Services/UserProfile/UserProfileService.cs
index dd877c32..a8e72173 100644
--- a/src/server/CookingApp/Services/UserProfile/UserProfileService.cs
+++ b/src/server/CookingApp/Services/UserProfile/UserProfileService.cs
@@ -2,17 +2,20 @@
 using CookingApp.Infrastructure.Exceptions;
 using CookingApp.Infrastructure.Interfaces;
 using CookingApp.Models.ValueObjects;
+using CookingApp.Services.File;
 using CookingApp.ViewModels.Profile;
+using Microsoft.AspNetCore.Http;
 using Microsoft.AspNetCore.Mvc;
-
+using Stripe;
+ 
 namespace CookingApp.Services.UserProfile
 {
-    public class UserProfileService(IRepository<Models.UserProfile> profileRepo) : IUserProfileService
+    public class UserProfileService(IRepository<Models.UserProfile> profileRepo, IHttpContextAccessor httpContextAccessor, IFileService fileService) : IUserProfileService
     {
-        public async Task<ProfileFetchResult> FetchProfile(string userId)
+        public async Task<ProfileFetchResult> FetchProfile(string userId,IHttpContextAccessor httpContextAccessor)
         {
             var profile = await profileRepo.GetFirstOrDefaultAsync(a => a.UserId == userId);
-
+            var username = httpContextAccessor.HttpContext?.User.Claims.FirstOrDefault(claim=>claim.Type=="name");
             if (profile is null)
             {
                 profile = new Models.UserProfile
@@ -23,6 +26,7 @@ public async Task<ProfileFetchResult> FetchProfile(string userId)
                     Allergies = new List<string>(),
                     AvoidedFoods = new List<string>(),
                     UserId = userId,
+                    Name = username.Value
                 };
 
                 await profileRepo.InsertAsync(profile);
@@ -36,9 +40,19 @@ public async Task<ProfileFetchResult> FetchProfile(string userId)
                 DietaryPreference = profile.DietaryPreference,
                 Allergies = profile.Allergies,
                 AvoidedFoods = profile.AvoidedFoods,
+                ImageUrl = profile.ImageUrl
             };
         }
-        
+
+        public async Task UploadPfp(string image)
+        {
+            var user = await GetUser.Profile(httpContextAccessor, profileRepo);
+            var imageUrl = await fileService.UploadFileAndGetUrl(Services.File.File.ConvertDataUriToFormFile(image));
+
+            user.ImageUrl = imageUrl;
+            await profileRepo.UpdateAsync(user);
+        }
+
         public async Task ConfigurePreferences(ConfigurePreferencesRequest configureProfileRequest)
         {
             var profile = await profileRepo
@@ -49,8 +63,6 @@ public async Task ConfigurePreferences(ConfigurePreferencesRequest configureProf
                 throw new NotFoundException();
             }
 
-
-
             profile.Allergies = configureProfileRequest.Allergies;
             profile.AvoidedFoods = configureProfileRequest.AvoidedFoods;
             profile.DietaryPreference = configureProfileRequest.DietaryPreference;
@@ -76,5 +88,21 @@ public async Task SaveInterfacePreferences(PreferencesRequest preferencesRequest
 
             await profileRepo.UpdateAsync(profile);
         }
+
+        public async Task GiftTokens(string userId)
+        {
+            var profile = await profileRepo
+                .GetFirstOrDefaultAsync(a => a.UserId == userId);
+
+            if (profile is null)
+            {
+                throw new NotFoundException();
+            }
+
+            profile.Role.Limitations.RecipeGeneration = profile.Role.Limitations.RecipeGeneration + 10;
+            profile.Role.Limitations.ChatGeneration = profile.Role.Limitations.ChatGeneration + 100;
+
+            await profileRepo.UpdateAsync(profile);
+        }
     }
 }
diff --git a/src/server/CookingApp/ViewModels/Profile/ProfileFetchResult.cs b/src/server/CookingApp/ViewModels/Profile/ProfileFetchResult.cs
index 9d54469e..a0d38529 100644
--- a/src/server/CookingApp/ViewModels/Profile/ProfileFetchResult.cs
+++ b/src/server/CookingApp/ViewModels/Profile/ProfileFetchResult.cs
@@ -10,6 +10,7 @@ public class ProfileFetchResult
         public List<string> Allergies { get; set; } = default!;
         public List<string> AvoidedFoods { get; set; } = default!;
         public string Name { get; set; } = default!;
+        public string ImageUrl { get; set; } = default!;
         public Role Role { get; set; } = default!;
     }
 }
diff --git a/src/server/CookingApp/ViewModels/Recipes/RecipeCard.cs b/src/server/CookingApp/ViewModels/Recipes/RecipeCard.cs
new file mode 100644
index 00000000..e5e9921e
--- /dev/null
+++ b/src/server/CookingApp/ViewModels/Recipes/RecipeCard.cs
@@ -0,0 +1,19 @@
+using CookingApp.Models.Entities;
+using CookingApp.Models.Enums;
+using Recipe = CookingApp.Models.Entities.Recipe;
+
+namespace CookingApp.ViewModels.Recipes
+{
+    public class RecipeCard
+    {   
+       
+        public string UserId { get; set; } = default!;
+        public string Title { get; set; } = default!;
+        public bool IsArchived { get; set; }
+        public string Description { get; set; } = default!;
+
+        public string Duration { get; set; } = default!;
+        public string ImageUrl { get; set; } = default!;
+        public int NumberOfPortions { get; set; }
+    }
+}
diff --git a/src/server/CookingApp/ViewModels/Stripe/Customer/CustomerData.cs b/src/server/CookingApp/ViewModels/Stripe/Customer/CustomerData.cs
index 51e9d2e5..d02c6acf 100644
--- a/src/server/CookingApp/ViewModels/Stripe/Customer/CustomerData.cs
+++ b/src/server/CookingApp/ViewModels/Stripe/Customer/CustomerData.cs
@@ -16,11 +16,13 @@ public class CustomerData : IMapFrom<Customer>
         public List<SubscriptionState> Subscriptions { get; set; } = new List<SubscriptionState>();
     }
 
-    public class SubscriptionState
+    public class SubscriptionState : IMapFrom<Subscription>
     {
         public string Id { get; set; } = string.Empty;
-        public string PriceId { get; set; } = string.Empty;
+        public decimal? Price { get; set; }
         public string State { get; set; } = string.Empty;
-        public DateTime CancelAt { get; set; }
+        public DateTime? CancelAt { get; set; }
+        public DateTime Created { get; set; }
+        public DateTime CurrentPeriodEnd { get; set; }
     }
 }
\ No newline at end of file