diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..a94de29
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "Frontend",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}
diff --git a/wannameal/package-lock.json b/wannameal/package-lock.json
index fcbe7ab..e9c9bf7 100644
--- a/wannameal/package-lock.json
+++ b/wannameal/package-lock.json
@@ -16,9 +16,16 @@
         "axios": "^1.6.8",
         "bootstrap": "^5.3.3",
         "framer-motion": "^11.1.7",
+        "i18next": "^23.11.5",
+        "i18next-browser-languagedetector": "^8.0.0",
+        "i18next-http-backend": "^2.5.2",
+        "jwt-decode": "^4.0.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-helmet": "^6.1.0",
+        "react-i18next": "^14.1.2",
         "react-icons": "^5.1.0",
+        "react-input-emoji": "^5.9.0",
         "react-redux": "^9.1.1",
         "react-router-dom": "^6.22.3",
         "react-scripts": "5.0.1",
@@ -2311,6 +2318,20 @@
         "postcss-selector-parser": "^6.0.10"
       }
     },
+    "node_modules/@emoji-mart/data": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emoji-mart/data/-/data-1.2.1.tgz",
+      "integrity": "sha512-no2pQMWiBy6gpBEiqGeU77/bFejDqUTRY7KX+0+iur13op3bqUsXdnwoZs6Xb1zbv0gAj5VvS1PWoUUckSr5Dw=="
+    },
+    "node_modules/@emoji-mart/react": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@emoji-mart/react/-/react-1.1.1.tgz",
+      "integrity": "sha512-NMlFNeWgv1//uPsvLxvGQoIerPuVdXwK/EUek8OOkJ6wVOWPUizRBJU0hDqWZCOROVpfBgCemaC3m6jDOXi03g==",
+      "peerDependencies": {
+        "emoji-mart": "^5.2",
+        "react": "^16.8 || ^17 || ^18"
+      }
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -6564,6 +6585,14 @@
         "node": ">=10"
       }
     },
+    "node_modules/cross-fetch": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-4.0.0.tgz",
+      "integrity": "sha512-e4a5N8lVvuLgAWgnCrLr2PP0YyDOTHa9H/Rj54dirp61qXnNq46m82bRhNqIA5VccJtWBvPTFRV3TtvHUKPB1g==",
+      "dependencies": {
+        "node-fetch": "^2.6.12"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -7577,6 +7606,11 @@
         "url": "https://github.com/sindresorhus/emittery?sponsor=1"
       }
     },
+    "node_modules/emoji-mart": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/emoji-mart/-/emoji-mart-5.6.0.tgz",
+      "integrity": "sha512-eJp3QRe79pjwa+duv+n7+5YsNhRcMl812EcFVwrnRvYKoNPoQb5qxU8DG6Bgwji0akHdp6D4Ln6tYLG58MFSow=="
+    },
     "node_modules/emoji-regex": {
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
@@ -9631,6 +9665,14 @@
         "node": ">=12"
       }
     },
+    "node_modules/html-parse-stringify": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
+      "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
+      "dependencies": {
+        "void-elements": "3.1.0"
+      }
+    },
     "node_modules/html-webpack-plugin": {
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.6.0.tgz",
@@ -9774,6 +9816,44 @@
         "node": ">=10.17.0"
       }
     },
+    "node_modules/i18next": {
+      "version": "23.11.5",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-23.11.5.tgz",
+      "integrity": "sha512-41pvpVbW9rhZPk5xjCX2TPJi2861LEig/YRhUkY+1FQ2IQPS0bKUDYnEqY8XPPbB48h1uIwLnP9iiEfuSl20CA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://locize.com"
+        },
+        {
+          "type": "individual",
+          "url": "https://locize.com/i18next.html"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
+        }
+      ],
+      "dependencies": {
+        "@babel/runtime": "^7.23.2"
+      }
+    },
+    "node_modules/i18next-browser-languagedetector": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-8.0.0.tgz",
+      "integrity": "sha512-zhXdJXTTCoG39QsrOCiOabnWj2jecouOqbchu3EfhtSHxIB5Uugnm9JaizenOy39h7ne3+fLikIjeW88+rgszw==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2"
+      }
+    },
+    "node_modules/i18next-http-backend": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/i18next-http-backend/-/i18next-http-backend-2.5.2.tgz",
+      "integrity": "sha512-+K8HbDfrvc1/2X8jpb7RLhI9ZxBDpx3xogYkQwGKlWAUXLSEGXzgdt3EcUjLlBCdMwdQY+K+EUF6oh8oB6rwHw==",
+      "dependencies": {
+        "cross-fetch": "4.0.0"
+      }
+    },
     "node_modules/iconv-lite": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
@@ -12666,6 +12746,14 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/jwt-decode": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-4.0.0.tgz",
+      "integrity": "sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -13189,6 +13277,44 @@
         "tslib": "^2.0.3"
       }
     },
+    "node_modules/node-fetch": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
+      "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
+      "dependencies": {
+        "whatwg-url": "^5.0.0"
+      },
+      "engines": {
+        "node": "4.x || >=6.0.0"
+      },
+      "peerDependencies": {
+        "encoding": "^0.1.0"
+      },
+      "peerDependenciesMeta": {
+        "encoding": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/node-fetch/node_modules/tr46": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
+    },
+    "node_modules/node-fetch/node_modules/webidl-conversions": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
+    },
+    "node_modules/node-fetch/node_modules/whatwg-url": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+      "dependencies": {
+        "tr46": "~0.0.3",
+        "webidl-conversions": "^3.0.0"
+      }
+    },
     "node_modules/node-forge": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz",
@@ -15435,11 +15561,68 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-easy-emoji": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/react-easy-emoji/-/react-easy-emoji-1.8.1.tgz",
+      "integrity": "sha512-wAf2x+cjwtOlLfXnjc0J3k5B2PDZdoxd1BjtfKr5tq2AL7t2ygvByJQWgFOyN28xg3qe8EKBM6pKxGP+qrGWuQ==",
+      "dependencies": {
+        "string-replace-to-array": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=0.14.0",
+        "react": ">=0.14.27"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-error-overlay": {
       "version": "6.0.11",
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "node_modules/react-fast-compare": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
+      "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
+    },
+    "node_modules/react-helmet": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",
+      "integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==",
+      "dependencies": {
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.7.2",
+        "react-fast-compare": "^3.1.1",
+        "react-side-effect": "^2.1.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.3.0"
+      }
+    },
+    "node_modules/react-i18next": {
+      "version": "14.1.2",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-14.1.2.tgz",
+      "integrity": "sha512-FSIcJy6oauJbGEXfhUgVeLzvWBhIBIS+/9c6Lj4niwKZyGaGb4V4vUbATXSlsHJDXXB+ociNxqFNiFuV1gmoqg==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "html-parse-stringify": "^3.0.1"
+      },
+      "peerDependencies": {
+        "i18next": ">= 23.2.3",
+        "react": ">= 16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-icons": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.1.0.tgz",
@@ -15448,6 +15631,25 @@
         "react": "*"
       }
     },
+    "node_modules/react-input-emoji": {
+      "version": "5.9.0",
+      "resolved": "https://registry.npmjs.org/react-input-emoji/-/react-input-emoji-5.9.0.tgz",
+      "integrity": "sha512-37Bbg4DEI4UXQ/tNSG3shIA0iFqk3vkhvfTZSQxi/oweeB/870G/6lvp65Ebex2rNM+UlwjMmR80rlJQwl78lQ==",
+      "dependencies": {
+        "@emoji-mart/data": "1.2.1",
+        "@emoji-mart/react": "1.1.1",
+        "emoji-mart": "5.6.0",
+        "react-easy-emoji": "^1.8.1"
+      },
+      "engines": {
+        "node": ">=8",
+        "npm": ">=5"
+      },
+      "peerDependencies": {
+        "react": ">=17.0.x",
+        "react-dom": ">=17.0.x"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -15589,6 +15791,14 @@
         }
       }
     },
+    "node_modules/react-side-effect": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz",
+      "integrity": "sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==",
+      "peerDependencies": {
+        "react": "^16.3.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-smooth": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-4.0.1.tgz",
@@ -16790,6 +17000,11 @@
       "resolved": "https://registry.npmjs.org/string-natural-compare/-/string-natural-compare-3.0.1.tgz",
       "integrity": "sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw=="
     },
+    "node_modules/string-replace-to-array": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/string-replace-to-array/-/string-replace-to-array-2.1.1.tgz",
+      "integrity": "sha512-i31csTEoIrcB8pusAF72Z0WsF04sbdiH4s0egpcmFj30SgHYdYd1swmZ7Zb1qFryJ5DbZR6z4rSjOzoUcrWUWw=="
+    },
     "node_modules/string-width": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
@@ -17957,6 +18172,14 @@
         "d3-timer": "^3.0.1"
       }
     },
+    "node_modules/void-elements": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
+      "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/w3c-hr-time": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
diff --git a/wannameal/package.json b/wannameal/package.json
index 0b59327..fbbcc9e 100644
--- a/wannameal/package.json
+++ b/wannameal/package.json
@@ -11,9 +11,16 @@
     "axios": "^1.6.8",
     "bootstrap": "^5.3.3",
     "framer-motion": "^11.1.7",
+    "i18next": "^23.11.5",
+    "i18next-browser-languagedetector": "^8.0.0",
+    "i18next-http-backend": "^2.5.2",
+    "jwt-decode": "^4.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-helmet": "^6.1.0",
+    "react-i18next": "^14.1.2",
     "react-icons": "^5.1.0",
+    "react-input-emoji": "^5.9.0",
     "react-redux": "^9.1.1",
     "react-router-dom": "^6.22.3",
     "react-scripts": "5.0.1",
diff --git a/wannameal/public/index.html b/wannameal/public/index.html
index aa069f2..d860711 100644
--- a/wannameal/public/index.html
+++ b/wannameal/public/index.html
@@ -24,9 +24,9 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>WannaMeal</title>
   </head>
-  <body>
+  <body >
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <!--
diff --git a/wannameal/public/locales/ar/translation.json b/wannameal/public/locales/ar/translation.json
new file mode 100644
index 0000000..8b56d5f
--- /dev/null
+++ b/wannameal/public/locales/ar/translation.json
@@ -0,0 +1,167 @@
+{
+  "Where!?!?!?!": "الصفحة الرئيسية",
+  "heading": "الصحة تتطلب طعامًا صحيًا",
+  "mini": "إدارة وصفاتك بالطريقة السهلة",
+  "intro_p1": "شارك الوصفات مع أصدقائك واكتشف وصفات جديدة",
+  "intro_p2": "اعرف أجزاء الوجبة ومكوناتها وما تحتويه كل جزيئة.",
+  "mainBtn": "قم بإعداد وجبة",
+  "profile": {
+    "name": "{{fullname}}",
+    "Nickname": "{{nickname}}",
+    "edit": "تعديل الملف الشخصي",
+    "share": "مشاركة الملف الشخصي",
+    "followers": "المتابعون",
+    "following": "اتابع",
+    "savedRE": "الوصفات المحفوظة",
+    "MyRE": "وصفاتي",
+    "WannaMeaL": "WannaMeaL",
+    "premium": "مدفوع",
+    "Country": "الدولة",
+    "language": "اللغة",
+    "Invite": "ادعو صديقك",
+    "contactus": "تواصل معنا",
+    "log": "تسجيل خروج",
+    "Cancel": "الغاء"
+  },
+  "editprofile": {
+    "setting": "الإعدادات الشخصية",
+    "Profile": "الملف الشخصي",
+    "info": "سيتم عرض هذه المعلومات بشكل عام، لذا كن حذرًا فيما تشاركه.",
+    "fname": "الاسم الأول",
+    "lname": "الاسم الأخير",
+    "Email": "البريد الإلكتروني",
+    "image": "صورة الملف الشخصي",
+    "change": "تغيير الصورة",
+    "delte": "حذف",
+    "changePass": "تغيير كلمة المرور",
+    "info2": "سيتم استخدام هذا لتسجيل الدخول إلى حسابك وإكمال الإجراءات ذات الحساسية العالية.",
+    "CurrentPass": "كلمة المرور الحالية",
+    "NewPass": "كلمة المرور الجديدة",
+    "ConfirmPass": "تأكيد كلمة المرور",
+    "savedCH": "تم حفظ التغييرات",
+    "cancel": "إلغاء التغييرات",
+    "deltePers": "حذف الحساب الشخصي",
+    "info3": "لم تعد بحاجة إلى WeCraft؟ نحن نفهم ذلك ونقدر استخدامك لخدمتنا!",
+    "delteAcc": "حذف الحساب؟"
+  },
+  "add": {
+    "Rname": "اسم الوصفة",
+    "Special": "ما يميز هذه الوصفة",
+    "share": "شارك معنا صورة الوصفة",
+    "breaks": "فطور",
+    "lunch": "غداء",
+    "dinner": "عشاء",
+    "enough": "يكفي لـ",
+    "time": "وقت التحضير",
+    "Ingredients": "المكونات",
+    "Ingredient": "مكون",
+    "Directions": "التوجيهات",
+    "Direction": "توجيه",
+    "addingredient": "أضف مكون",
+    "addStep": "أضف خطوة",
+    "saveRecipe": "احفظ الوصفة",
+    "cancelRecipe": "ألغِ الوصفة",
+    "caloriess": "السعرات"
+  },
+  "contact": {
+    "head": "تواصل معنا",
+    "fname": "اسمك",
+    "Email": "بريدك الإلكتروني",
+    "msg": "أدخل رسالتك",
+    "send": "إرسال",
+    "location": "جامعة قناة السويس",
+    "phone": "010-11-0101010-14-52",
+    "mail": "Teem-ala-alaah@gmail.com"
+  },
+  "View": {
+    "apply": "تكفى حتى ",
+    "minutes": "دقيقة",
+    "components": "مكونات",
+    "people": "أشخاص",
+    "Ingredients": "المكونات",
+    "Directions": "التوجيهات",
+    "Latest": "أحدث الوصفات"
+  },
+  "make": {
+    "make": "اصنع",
+    "meal": "وجبتك الخاصة",
+    "Choose": "اختر المكونات",
+    "searchh": "ابحث عن المكونات"
+  },
+  "community": {
+    "Fname": "{{fullname}}",
+    "email": "{{email}}",
+    "edit": "تعديل الملف الشخصي",
+    "mine": "ملفي الشخصي",
+    "recommend": "موصى به لك",
+    "Norecommend": "لا يوجد مستخدمون موصى بهم لك!",
+    "more": "عرض المزيد",
+    "followers": "اتابعهم",
+    "following": "المتابعون",
+    "follow": "متابعة",
+    "photo": "صورة",
+    "video": "فيديو",
+    "share": "شارك ما تريد",
+    "who": "من تتابع",
+    "msg": "محادثة",
+    "comment": "تعليق",
+    "sharee": "مشاركة",
+    "like": "اعجاب"
+  },
+  "about": {
+    "about": "تعرف",
+    "us": "علينا",
+    "Healthy": "خيارات صحية ومتوازنة",
+    "HealthyP": "تُعد وجباتنا من قبل أخصائيي التغذية والطهاة لضمان توازن مثالي بين الطعم والتغذية، مما يساعدك على الحفاظ على نمط حياة صحي بسهولة.",
+    "Convenience": "خيارات صحية ومتوازنة",
+    "ConvenienceP": "استمتع براحة الحصول على وجبات فاخرة مُعدة من قبل الطهاة",
+    "Save": "وفر الوقت وتناول الطعام الجيد",
+    "SaveP": "وفر وقتك في التفكير فيما ستعده للطعام. أدخل ما تمتلكه وسنقدم لك أفضل الخيارات الصحية",
+    "Customizable": "خطط وجبات قابلة للتخصيص",
+    "CustomizableP": "خطط وجبات قابلة للتخصيص. مع مجموعة متنوعة من خطط الوجبات المصممة لتلبية الاحتياجات الغذائية المختلفة والتفضيلات، يمكنك بسهولة العثور على الخطة المثالية التي تناسب نمط حياتك.",
+    "Expertly": "وصفات معدة بخبرة",
+    "ExpertlyP": "يستخدم طهاتنا المحترفون خبراتهم في الطهي لإنشاء قائمة متنوعة من الوجبات ذات النكهات التي ستحافظ على حماسك لتذوقها",
+    "Community": "مركزة على المجتمع",
+    "CommunityP": "لدينا مجتمع للمستخدمين لمشاركة الوجبات التي يعدونها بأنفسهم ويمكنهم الإعجاب بمنشورات الآخرين والدردشة مع بعضهم البعض"
+  },
+  "auth": {
+    "Login": "تسجيل الدخول",
+    "email": "أدخل بريدك الإلكتروني",
+    "Password": "أدخل كلمة المرور",
+    "Remember": "تذكرني",
+    "Forgot": "نسيت كلمة المرور؟",
+    "Google": "جوجل",
+    "have": "ليس لديك حساب؟",
+    "haves": "هل لديك حساب؟",
+    "Sign": "سجل الآن",
+    "With": "أو بواسطة",
+    "Name": "الاسم",
+    "characters": "على الاقل 8 حروف",
+    "number": "على الاقل رقم",
+    "letters": "يتضمن كل من حروف الكبيرة و الصغيرة ",
+    "Create": "إنشاء حساب",
+    "What": "ماذا ستحصل؟",
+    "Manage": "إدارة وصفاتك بسهولة",
+    "Share": "شارك الوصفات مع أصدقائك واكتشف وصفات جديدة.",
+    "Organize": "نظم الوصفات بواسطة العلامات وشاركها مع أصدقائك",
+    "Know": "اعرف أجزاء الوجبة ومكوناتها والمكونات التي يحتوي عليها كل جزء.",
+    "ForgotP": "ادخل بريدك الاكتونى وسنرسل اليك كود لاعادة انشاء كلمة السر ",
+    "Send": "ارسل الكود",
+    "CreatePas": "انشاء كلمة سر جديدة",
+    "shuold": "كلمة السر يجب ان تكون مختلفة عن السابقة",
+    "Reset": "اعادة انشاء كلمة السر",
+    "check": "رجاء راجع بريدك الالكترونى",
+    "Verification": "تاكيد",
+    "sended": "لقد ارسلنا الكود الى بريدك"
+  },
+  "canvas": {
+    "Home": "الرئيسية",
+    "Community": "المجتمع",
+    "Make": "اصنع وجبة",
+    "Profile": "الملف الشخصى",
+    "Contact": "تواصل معنا",
+    "logoutt": "تسجيل الخروج",
+    "dashboard": "لوحة التحكم",
+    "makeMeal": " اضافة وجبه"
+  }
+}
diff --git a/wannameal/public/locales/en/translation.json b/wannameal/public/locales/en/translation.json
new file mode 100644
index 0000000..f6f5a23
--- /dev/null
+++ b/wannameal/public/locales/en/translation.json
@@ -0,0 +1,167 @@
+{
+  "Where!?!?!?!": "Home page",
+  "heading": "Health Requires Healthy food",
+  "mini": "Manage your recipes the easy way",
+  "intro_p1": "Share Recipes With Your Friends And Discover New Ones",
+  "intro_p2": "Know The Parts Of The Meal And What It Consists Of And The Components That Each Molecule Contains.",
+  "mainBtn": "Make a Meal",
+  "profile": {
+    "name": "{{fullname}}",
+    "Nickname": "{{NickName}}",
+    "edit": "edit profile",
+    "share": "share profile",
+    "followers": "followers",
+    "following": "following",
+    "savedRE": " saved recipes",
+    "MyRE": " My recipes",
+    "WannaMeaL": "WannaMeaL",
+    "premium": "premium",
+    "Country": "Country",
+    "language": "language",
+    "Invite": "Invite your friends to WannaMeaL",
+    "contactus": "contact us",
+    "log": "log out",
+    "Cancel": "Cancel"
+  },
+  "editprofile": {
+    "setting": "Personal Setting",
+    "Profile": "Profile",
+    "info": "This information will be displayed publicly so be careful what you share.",
+    "fname": "First Name",
+    "lname": "last   Name",
+    "Email": "Email",
+    "image": "Profile Picture",
+    "change": "change Picture",
+    "delte": "delte",
+    "changePass": "Change Password",
+    "info2": "This will be used to log into your account and complete high severity actions.",
+    "CurrentPass": "Current Password",
+    "NewPass": "New Password",
+    "ConfirmPass": "Current Password",
+    "savedCH": "saved Changes",
+    "cancel": "cancel Changes",
+    "deltePers": "Delete Personal Account",
+    "info3": "Don't need wecraft any longer? We understand, and appreciate you using our service!",
+    "delteAcc": "Delete Account?"
+  },
+  "add": {
+    "Rname": "Recipe Name",
+    "Special": "What distinguishes this recipe",
+    "share": "Share with us the picture of your dish",
+    "breaks": "Breakfast",
+    "lunch": "Lunch",
+    "dinner": "Dinner",
+    "enough": "enough for",
+    "time": "Preparation Time",
+    "Ingredients": "Ingredients",
+    "Ingredient": "Ingredient",
+    "Directions": "Directions",
+    "Direction": "Direction",
+    "addingredient": "add ingredient",
+    "addStep": "add Step",
+    "saveRecipe": "save Recipe",
+    "cancelRecipe": "cancel Recipe",
+    "caloriess": "calories"
+  },
+  "contact": {
+    "head": "get in touch",
+    "fname": "Your Name",
+    "Email": "Your Email",
+    "msg": "enter your message",
+    "send": "send",
+    "location": "Suez Canal University",
+    "phone": " 010-11-0101010-14-52",
+    "mail": "Teem-ala-alaah@gmail.com"
+  },
+  "View": {
+    "apply": "apply for",
+    "minutes": "minutes",
+    "components": "components",
+    "people": "people",
+    "Ingredients": "Ingredients",
+    "Directions": "Directions",
+    "Latest": "Latest Recipes"
+  },
+  "make": {
+    "make": "Make",
+    "meal": "Own Meal",
+    "Choose": "Choose Your Ingredients",
+    "searchh": "search for Your Ingredients"
+  },
+  "community": {
+    "Fname": "{{fullname}}",
+    "email": "{{email}}",
+    "edit": "edit profile",
+    "mine": "my profile",
+    "recommend": "recommended for you",
+    "Norecommend": "No recommended users for you!",
+    "more": "Show more",
+    "followers": "followers",
+    "following": "following",
+    "follow": "follow",
+    "photo": "photo",
+    "video": "video",
+    "share": "Share what you want",
+    "who": "who are you following",
+    "msg": "message",
+    "comment": "comment",
+    "sharee": "share",
+    "like": "like"
+  },
+  "about": {
+    "about": "about",
+    "us": "us",
+    "Healthy": "Healthy and Balanced Options",
+    "HealthyP": "Our meals are crafted by nutritionists and chefs to ensure a perfect balance of taste and nutrition, helping you maintain a healthy lifestyle effortlessly.",
+    "Convenience": "Healthy and Balanced Options",
+    "ConvenienceP": "Enjoy the convenience of having gourmet, chef-prepared meals",
+    "Save": "Save time and eat well",
+    "SaveP": "Save your time thinking about what to make for food Enter for uswhat you own and we give the best healthy choices",
+    "Customizable": "CustomizableMeal Plans",
+    "CustomizableP": "Customizable Meal PlansWith a variety of meal plans tailored todifferent dietary needs and preferences, you can easily find theperfect plan that fits your lifestyle.",
+    "Expertly": "ExpertlyMeal Crafted Recipes",
+    "ExpertlyP": " Our professional chefs use their culinary expertise to create adiverse menu of flavorful meals that will keep your taste budsexcited",
+    "Community": "Community Focused",
+    "CommunityP": " We have a community for users to share meals they madethemselves and can like their posts and chat with each other"
+  },
+  "auth": {
+    "Login": "Login",
+    "email": "Enter your Email",
+    "Password": "Enter your Password",
+    "Remember": "Remember Me",
+    "Forgot": "Forgot password?",
+    "Google": "Google",
+    "have": " Don't have an account?",
+    "haves": " have an account?",
+    "Sign": " Sign UP",
+    "With": "Or With",
+    "Name": "Name",
+    "characters": "At least 8 characters",
+    "number": "At least 1 number",
+    "letters": "Both upper and lower case letters",
+    "Create": "Create Account",
+    "What": "What you will get?",
+    "Manage": "Manage your recipes the easy way",
+    "Share": "Share recipes with your friends and discover new ones.",
+    "Organize": "Organize recipes by tag, share it with your friends",
+    "Know": "Know the parts of the meal and what it consists of and the components that each molecule contains.",
+    "ForgotP": "Enter the email address with your account and we’ll send an email with confirmation to reset your password",
+    "Send": "Send Code",
+    "CreatePas": "Create New password",
+    "shuold": "The password shuold be different from the previous password",
+    "Reset": "Reset Password",
+    "check": "Please check your Email",
+    "Verification": "Verification",
+    "sended": "We have sent code to Your email"
+  },
+  "canvas": {
+    "Home": "Home",
+    "Community": "Community",
+    "Make": "Make Meal",
+    "Profile": "My Profile",
+    "Contact": "Contact Us",
+    "logoutt": "logout",
+    "dashboard": "dashboard",
+    "makeMeal": "Add Recipe"
+  }
+}
diff --git a/wannameal/src/App.js b/wannameal/src/App.js
index 4db05ae..11a8002 100644
--- a/wannameal/src/App.js
+++ b/wannameal/src/App.js
@@ -1,4 +1,5 @@
-import { Route, Routes } from "react-router-dom";
+import { Navigate, Route, Routes } from "react-router-dom";
+import { Suspense } from "react";
 import "./App.css";
 import Home from "./pages/Home/Home";
 import ContactUs from "./pages/contact/contact";
@@ -8,23 +9,79 @@ import Dashboard from "./pages/dashboeard/dashboard";
 import Profile from "./pages/profile/profile";
 import EditProfile from "./pages/profile/edit/editProfile";
 import Auth from "./pages/Auth/Auth";
-
+import Chatting from "./pages/chatting/chatting";
+import Community from "./pages/community/comunity";
+import MakeMeal from "./pages/makeMeal/makeMeal";
+import Navbar from "./components/navbar/navbar";
+import Loading from "./components/loading/loading";
+//!
+import { useDispatch, useSelector } from "react-redux";
+import { getuser } from "./redux/slices/authSlice";
+import { getTheme } from "./redux/slices/systemModeSlice";
+let authorized = false;
+console.log("🚀 ~ authorized:", authorized);
 function App() {
+  const availableUser = useSelector(getuser);
+  console.log("🚀 ~ App ~ availableUser:", availableUser);
+  if (availableUser?.success) {
+    authorized = true;
+  } else authorized = false;
+
+  const theme = useSelector(getTheme);
+
+  theme == "dark"
+    ? document.body.classList.add("dark")
+    : document.body.classList.remove("dark");
+
   return (
     <>
-      {/* <Navbar /> */}
-      <Routes>
-        {["/", "home"].map((x, ind) => (
-          <Route path={x} key={ind} element={<Home />} />
-        ))}
-        <Route path="/contact" element={<ContactUs />} />
-        <Route path="/recipeDetails" element={<RecipeDetails />} />
-        <Route path="/AddProduct" element={<AddProduct />} />
-        <Route path="/dashboard/*" element={<Dashboard />} />
-        <Route path="/auth/*" element={<Auth />} />
-        <Route path="/profile" element={<Profile />} />
-        <Route path="/profile/edit/" element={<EditProfile />} />
-      </Routes>
+      <Navbar />
+      <Suspense
+        fallback={
+          <div className="w-100 d-flex justify-content-center align-items-center">
+            <Loading />
+          </div>
+        }
+      >
+        <Routes>
+          {["/", "home"].map((x, ind) => (
+            <Route path={x} key={ind} element={<Home />} />
+          ))}
+          <Route
+            path="/contact"
+            element={authorized ? <ContactUs /> : <Auth />}
+          />
+          <Route
+            path="/recipeDetails/:recepDetailsId"
+            element={authorized ? <RecipeDetails /> : <Auth />}
+          />
+          <Route path="/AddProduct" element={<AddProduct />} />
+          <Route
+            path="/dashboard/*"
+            element={authorized ? <Dashboard /> : <Auth />}
+          />
+          <Route path="/auth/*" element={<Auth />} />
+          <Route
+            path="/profile/*"
+            element={authorized ? <Profile /> : <Auth />}
+          />
+          <Route
+            path="/profile/edit/"
+            element={authorized ? <EditProfile /> : <Auth />}
+          />
+          <Route
+            path="/makeMeal"
+            element={authorized ? <MakeMeal /> : <Auth />}
+          />
+          <Route
+            path="/community"
+            element={authorized ? <Community /> : <Auth />}
+          />
+          <Route path="/community/chat" element={<Chatting />} />
+
+          <Route path="*" element={<Navigate to={"/"} />} />
+        </Routes>
+      </Suspense>
     </>
   );
 }
diff --git a/wannameal/src/assets/loading.gif b/wannameal/src/assets/loading.gif
new file mode 100644
index 0000000..bf31d87
Binary files /dev/null and b/wannameal/src/assets/loading.gif differ
diff --git a/wannameal/src/assets/logoDark.png b/wannameal/src/assets/logoDark.png
new file mode 100644
index 0000000..b58e440
Binary files /dev/null and b/wannameal/src/assets/logoDark.png differ
diff --git a/wannameal/src/assets/logoLight.png b/wannameal/src/assets/logoLight.png
new file mode 100644
index 0000000..704faa9
Binary files /dev/null and b/wannameal/src/assets/logoLight.png differ
diff --git a/wannameal/src/assets/noChat.gif b/wannameal/src/assets/noChat.gif
new file mode 100644
index 0000000..ab7ccce
Binary files /dev/null and b/wannameal/src/assets/noChat.gif differ
diff --git a/wannameal/src/assets/nomeals.gif b/wannameal/src/assets/nomeals.gif
new file mode 100644
index 0000000..4af709e
Binary files /dev/null and b/wannameal/src/assets/nomeals.gif differ
diff --git a/wannameal/src/assets/nosavedmeals.gif b/wannameal/src/assets/nosavedmeals.gif
new file mode 100644
index 0000000..bdb5e46
Binary files /dev/null and b/wannameal/src/assets/nosavedmeals.gif differ
diff --git a/wannameal/src/components/FoodIngreientSlider/FoodIngreientSlider.jsx b/wannameal/src/components/FoodIngreientSlider/FoodIngreientSlider.jsx
index 104448f..90553ca 100644
--- a/wannameal/src/components/FoodIngreientSlider/FoodIngreientSlider.jsx
+++ b/wannameal/src/components/FoodIngreientSlider/FoodIngreientSlider.jsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
+// import { ingredients } from "./ingredients";
 
 import styles from "./FoodIngreientSlider.module.css";
-import { ingredients } from "./ingredients";
 import "animate.css";
 import { Swiper, SwiperSlide } from "swiper/react";
 import "swiper/css";
@@ -20,19 +20,41 @@ import "swiper/css/free-mode";
 import { TiDelete } from "react-icons/ti";
 import { RiDeleteBin2Line } from "react-icons/ri";
 
+import { useDispatch, useSelector } from "react-redux";
+import { recommendMeals } from "../../redux/slices/recomendedMealsSlice";
+import {
+  fetchIngredients,
+  getIngredients,
+  getIngredientsError,
+  getIngredientsStatus,
+} from "../../redux/slices/ingredients";
+import { getuser } from "../../redux/slices/authSlice";
+import { getLanguage } from "../../redux/slices/language";
+import axios from "axios";
+import { useTranslation } from "react-i18next";
+
 function FoodIngreientSlider() {
+  // const ingredients = useSelector(getIngredients);
+  const ingredients = useSelector(getIngredients);
+  console.log("🚀 ~ FoodIngreientSlider ~ ingredients:", ingredients);
   const [checkedIngredients, setCheckedIngredients] = useState([]);
   const [searchQuery, setSearchQuery] = useState("");
   const [filteredIngredients, setFilteredIngredients] = useState(ingredients);
 
+  const availableUser = useSelector(getuser);
+  const dispatch = useDispatch();
+  const ingredientsStatus = useSelector(getIngredientsStatus);
+  const ingredientError = useSelector(getIngredientsError);
+  const language = useSelector(getLanguage);
+
   const handleCheckboxChange = (ingredient) => {
     setCheckedIngredients((prevIngredients) => {
       const isIngredientChecked = prevIngredients.some(
-        (item) => item.id === ingredient.id
+        (item) => item._id === ingredient._id
       );
 
       if (isIngredientChecked) {
-        return prevIngredients.filter((item) => item.id !== ingredient.id);
+        return prevIngredients.filter((item) => item._id !== ingredient._id);
       } else {
         return [...prevIngredients, ingredient];
       }
@@ -43,6 +65,20 @@ function FoodIngreientSlider() {
     );
   };
 
+  useEffect(() => {
+    const fetch = async () => {
+      await dispatch(
+        fetchIngredients({ token: availableUser.token, lang: language })
+      );
+    };
+
+    fetch();
+  }, [dispatch, availableUser.token, language]);
+
+  useEffect(() => {
+    setFilteredIngredients(ingredients);
+  }, [ingredients]);
+
   useEffect(() => {
     const filtered = ingredients.filter((ingredient) =>
       ingredient.name.toLowerCase().includes(searchQuery.toLowerCase())
@@ -50,6 +86,43 @@ function FoodIngreientSlider() {
     setFilteredIngredients(filtered);
   }, [searchQuery, ingredients]);
 
+  useEffect(() => {
+    const fetchMeals = async () => {
+      try {
+        let ingredientNames = ""; // Default value if no checked ingredients
+        console.log("🚀 ~ fetchMeals ~ ingredientNames:", ingredientNames);
+        if (checkedIngredients.length > 0) {
+          ingredientNames = checkedIngredients
+            .map((ingredient) => ingredient.name)
+            .join(",");
+        }
+
+        console.log(
+          "🚀 ~ fetchMeals ~ checkedIngredients:",
+          checkedIngredients
+        );
+        console.log(ingredientNames);
+        console.log(typeof ingredientNames);
+
+        if (ingredientNames !== "") {
+          const response = await dispatch(
+            recommendMeals({
+              ingredients: ingredientNames,
+              lang: language,
+              token: availableUser?.token,
+            })
+          );
+          console.log("Recommendation response:", response); // Log the response or handle it as needed
+        }
+      } catch (error) {
+        console.error("Error fetching meals:", error);
+      }
+    };
+
+    fetchMeals();
+  }, [checkedIngredients, dispatch, language]);
+  const { t } = useTranslation();
+  const { Choose, searchh } = t("make");
   return (
     <>
       <div className="container my-4">
@@ -59,16 +132,17 @@ function FoodIngreientSlider() {
               className={`col-4 ${styles.label}`}
               htmlFor="ingredientSearch"
             >
-              Choose your ingredients
+              {Choose}
             </label>
             <input
               className={`col-8 ${styles.searchinput}`}
               type="search"
               id="ingredientSearch"
               name="ingredientSearch"
-              placeholder="search for your ingredients"
+              placeholder={`${searchh}`}
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
+              // autocomplete="off"
             />
           </form>
         </div>
@@ -86,10 +160,10 @@ function FoodIngreientSlider() {
             </div>
           )}
           {checkedIngredients &&
-            checkedIngredients.map((ingredient) => {
+            checkedIngredients.map((ingredient, index) => {
               return (
                 <div
-                  key={ingredient.id}
+                  key={index}
                   className={`${styles.checkedIngredient} animate__animated animate__bounceIn`}
                 >
                   {ingredient.name}
@@ -98,7 +172,7 @@ function FoodIngreientSlider() {
                     onClick={() => {
                       setCheckedIngredients(
                         checkedIngredients.filter(
-                          (item) => item.id !== ingredient.id
+                          (item) => item._id !== ingredient._id
                         )
                       );
 
@@ -114,7 +188,7 @@ function FoodIngreientSlider() {
         </div>
 
         <div className={`${styles.ingredients}`}>
-          {filteredIngredients.length !== 0 ? (
+          {filteredIngredients && filteredIngredients.length !== 0 ? (
             <Swiper
               modules={[FreeMode]}
               grabCursor={true}
@@ -140,30 +214,32 @@ function FoodIngreientSlider() {
                   slidesPerView: 8.5,
                 },
               }}
+              style={{ direction: "ltr" }}
             >
-              {filteredIngredients.map((ingredient) => (
-                <SwiperSlide key={ingredient.id}>
+              {filteredIngredients.map((ingredient, index) => (
+                <SwiperSlide key={index}>
                   <div className={styles.parentcheckbox}>
                     <input
                       type="checkbox"
-                      id={`ingredientCheckbox_${ingredient.id}`}
+                      id={`ingredientCheckbox_${ingredient?._id}`}
                       checked={checkedIngredients.some(
-                        (ele) => ele.id === ingredient.id
+                        (ele) => ele._id === ingredient._id
                       )}
                       onChange={() => handleCheckboxChange(ingredient)}
                     />
                     <label
                       className={
                         checkedIngredients.some(
-                          (ele) => ele.id === ingredient.id
+                          (ele) => ele._id === ingredient._id
                         )
                           ? `${styles.ingredient} ${styles.checked}`
                           : `${styles.ingredient}`
                       }
-                      htmlFor={`ingredientCheckbox_${ingredient.id}`}
+                      htmlFor={`ingredientCheckbox_${ingredient._id}`}
                     >
-                      <div className={styles.symbol}>
-                        {String.fromCodePoint(parseInt(ingredient.hex, 16))}
+                      <div className={styles.symbolImage}>
+                        <img src={ingredient?.image?.url} alt="" srcset="" />
+                        {/* {String.fromCodePoint(parseInt(ingredient.hex, 16))} */}
                       </div>{" "}
                       <div className={styles.name}>{ingredient.name}</div>
                     </label>
diff --git a/wannameal/src/components/FoodIngreientSlider/FoodIngreientSlider.module.css b/wannameal/src/components/FoodIngreientSlider/FoodIngreientSlider.module.css
index 3eb67f1..5ce1cc5 100644
--- a/wannameal/src/components/FoodIngreientSlider/FoodIngreientSlider.module.css
+++ b/wannameal/src/components/FoodIngreientSlider/FoodIngreientSlider.module.css
@@ -43,11 +43,20 @@
   flex-direction: column;
   justify-content: center;
   gap: 10px;
+  gap: 10px;
   align-items: center;
   color: black;
 }
-.symbol {
-  font-size: 20px;
+.symbolImage {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  /* margin-bottom: 10px; */
+}
+.symbolImage img {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
 }
 .name {
   font-weight: 400;
@@ -74,9 +83,16 @@
   letter-spacing: 1.5px;
 }
 
+.parentcheckbox input[type="checkbox"] + label {
+  border-color: var(--grayWritingColor);
+  background-color: var(--body);
+  color: var(--text_black);
+}
 .parentcheckbox input[type="checkbox"]:checked + label {
-  background-color: rgba(168, 187, 164, 0.461);
   border-color: var(--green);
+  color: var(--text_black);
+  background-color: var(--light-green);
+  opacity: 0.8;
 }
 
 .noMatch {
@@ -111,13 +127,15 @@
   font-weight: 500;
   /* letter-spacing: 2px; */
   background-color: var(--light-green);
-  color: var(--text_white);
+  color: #fff;
 }
 .checkedIngredients .checkedIngredient .delete {
   margin: 7px;
   cursor: pointer;
   font-size: 20px;
-  color: var(--text_white);
+  /* color: var(--text_white) !important; */
+  color: #fff;
+
   background-color: #dc3545;
 }
 
@@ -132,7 +150,7 @@
   cursor: pointer;
   margin-right: auto;
   padding: 5px;
-  color: var(--text_white);
+  color: #fff;
   background-color: #dc3545;
   transition: 0.3s;
 }
diff --git a/wannameal/src/components/FoodIngreientSlider/ingredients.js b/wannameal/src/components/FoodIngreientSlider/ingredients.js
index fc2ec3c..8074e84 100644
--- a/wannameal/src/components/FoodIngreientSlider/ingredients.js
+++ b/wannameal/src/components/FoodIngreientSlider/ingredients.js
@@ -420,4 +420,9 @@ export const ingredients = [
     name: "بقرة",
     hex: "1F404",
   },
+  {
+    id: 81,
+    name: "ارز",
+    hex: "1F404",
+  },
 ];
diff --git a/wannameal/src/components/MyRecips/MyRecips.jsx b/wannameal/src/components/MyRecips/MyRecips.jsx
new file mode 100644
index 0000000..5da5c83
--- /dev/null
+++ b/wannameal/src/components/MyRecips/MyRecips.jsx
@@ -0,0 +1,86 @@
+import React, { useEffect } from "react";
+import style from "./MyRecips.module.css";
+import MealCard from "../mealCard/mealCard";
+import { MdSmsFailed } from "react-icons/md";
+
+import noMeals from "../../assets/nomeals.gif";
+import { useDispatch, useSelector } from "react-redux";
+import {
+  fetchMyRecipes,
+  fetchSavedMeals,
+  getMealsError,
+  getMealsStatus,
+  getMyRecipes,
+  getSavedMeals,
+} from "../../redux/slices/recomendedMealsSlice";
+import { getDecodedToken } from "../../redux/slices/authSlice";
+import Loading from "../loading/loading";
+import { getLanguage } from "../../redux/slices/language";
+export default function SavedMeals() {
+  const decodedToken = useSelector(getDecodedToken);
+  console.log("🚀 ~ SavedMeals ~ decodedToken:", decodedToken);
+  const mealsError = useSelector(getMealsError);
+  const mealsStatus = useSelector(getMealsStatus);
+  const dispatch = useDispatch();
+  const language = useSelector(getLanguage);
+  const myRecips = useSelector(getMyRecipes);
+  console.log("🚀 ~ SavedMeals ~ myRecips:", myRecips);
+
+  useEffect(() => {
+    if (decodedToken?.id) {
+      const fetchMeals = async () => {
+        await dispatch(
+          fetchMyRecipes({ userId: decodedToken?.id, lang: language })
+        );
+      };
+      fetchMeals();
+    }
+  }, []);
+
+  if (mealsStatus === "loading")
+    return (
+      <div className="w-100 d-flex flex-column justify-content-center align-items-center">
+        <Loading />
+      </div>
+    );
+
+  if (mealsError)
+    return (
+      <div className="w-100 text-center fs-2 mt-5">
+        <p className="mt-5">
+          {mealsError}
+          <MdSmsFailed size={25} className="text-danger ms-2 " />
+        </p>
+      </div>
+    );
+
+  return (
+    <div className="d-flex flex-column align-items-center justify-content-center">
+      <div className="container-lg">
+        <div
+          className={`row p-0 my-3 d-flex align-items-center  ${style.recipsContainer}`}
+        >
+          {myRecips && myRecips.length > 0 ? (
+            myRecips.map((meal) => (
+              <div key={meal._id} className="col-sm-12 col-md-5 col-lg p-0">
+                <MealCard meal={meal} />
+              </div>
+            ))
+          ) : (
+            <div className={style.noMealscontainer}>
+              <div className={style.imageContainer}>
+                <img src={noMeals} alt="" srcset="" />
+              </div>
+              <h3 className={style.mainTitle}>
+                You haven't published any recipe yet.
+              </h3>
+              <p className={style.secondaryTitle}>
+                Post your first recipe and you'll find it here.
+              </p>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/wannameal/src/components/MyRecips/MyRecips.module.css b/wannameal/src/components/MyRecips/MyRecips.module.css
new file mode 100644
index 0000000..15f5041
--- /dev/null
+++ b/wannameal/src/components/MyRecips/MyRecips.module.css
@@ -0,0 +1,26 @@
+.recipsContainer {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
+  gap: 30px;
+}
+
+.noMealscontainer {
+  margin: 20px 0;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  align-items: center;
+  justify-content: center;
+}
+
+.noMealscontainer .imageContainer {
+  width: 150px;
+}
+.noMealscontainer .imageContainer img {
+  width: 100%;
+}
+.noMealscontainer .mainTitle,
+.noMealscontainer .secondaryTitle {
+  max-width: 500px;
+}
diff --git a/wannameal/src/components/aboutUs/aboutUs.module.css b/wannameal/src/components/aboutUs/aboutUs.module.css
new file mode 100644
index 0000000..e2529af
--- /dev/null
+++ b/wannameal/src/components/aboutUs/aboutUs.module.css
@@ -0,0 +1,24 @@
+.mainTitle {
+  font-weight: 600;
+  z-index: 100;
+  text-transform: capitalize;
+  width: 100%;
+}
+.mainTitle span {
+  color: var(--green);
+}
+
+.darkmodeChanges {
+  background-color: var(--text_gray);
+}
+
+.text .title {
+  font-weight: 500;
+  font-size: 20px;
+  color: var(--text_black);
+}
+.text .desc {
+  font-size: 14px;
+  color: var(--grayWritingColor);
+  /* max-width: 95%; */
+}
diff --git a/wannameal/src/components/aboutUs/aboutus.jsx b/wannameal/src/components/aboutUs/aboutus.jsx
new file mode 100644
index 0000000..cd8f684
--- /dev/null
+++ b/wannameal/src/components/aboutUs/aboutus.jsx
@@ -0,0 +1,126 @@
+import React from "react";
+import style from "./aboutUs.module.css";
+
+import { PiUsersThreeDuotone } from "react-icons/pi";
+import { GiMeal } from "react-icons/gi";
+import { MdDashboardCustomize } from "react-icons/md";
+import { MdMoreTime } from "react-icons/md";
+import { TbHealthRecognition } from "react-icons/tb";
+import { useTranslation } from "react-i18next";
+export default function AboutUs() {
+  const { t, i18n } = useTranslation();
+  const isAr = i18n.dir();
+  console.log(isAr);
+  const {
+    about,
+    us,
+    Healthy,
+    HealthyP,
+    Convenience,
+    ConvenienceP,
+    Save,
+    SaveP,
+    Customizable,
+    CustomizableP,
+    Expertly,
+    ExpertlyP,
+    Community,
+    CommunityP,
+  } = t("about");
+
+  return (
+    <div
+      style={{ minHeight: "100vh" }}
+      className="d-flex flex-column align-items-center
+      justify-content-center"
+    >
+      <h1 className={`w-100 my-3 mx-auto text-center ${style.mainTitle}`}>
+        {about} <span>{us}</span>
+      </h1>
+      <div className="container-lg">
+        <div
+          className={`row p-0 my-3 d-flex flex-wrap w-100 justify-content-center justify-content-md-between align-items-center g-5`}
+        >
+          <div className=" col-12 col-md-6 d-flex">
+            <div className={`${style.icon} col-1 me-4`}>
+              <TbHealthRecognition color="#4ECB71" size={40} />
+            </div>
+            <div
+              className={`${style.text} d-flex flex-column gap-2 align-content-center justify-content-start`}
+            >
+              <div className={style.title}>{Healthy}</div>
+              <div className={style.desc}>
+                {HealthyP}
+              </div>
+            </div>
+          </div>
+          <div className=" col-12 col-md-6 d-flex">
+            <div className={`${style.icon} col-1 me-4`}>
+              <TbHealthRecognition color="#4ECB71" size={40} />
+            </div>
+            <div
+              className={`${style.text} d-flex flex-column gap-2 align-content-center justify-content-start`}
+            >
+              <div className={style.title}>{Convenience}</div>
+              <div className={style.desc}>
+                {ConvenienceP}
+              </div>
+            </div>
+          </div>
+          <div className=" col-12 col-md-6 d-flex">
+            <div className={`${style.icon} col-1 me-4`}>
+              <MdMoreTime color="#4ECB71" size={40} />
+            </div>
+            <div
+              className={`${style.text} d-flex flex-column gap-2 align-content-center justify-content-start`}
+            >
+              <div className={style.title}>{Save}</div>
+              <div className={style.desc}>
+                {SaveP}
+              </div>
+            </div>
+          </div>
+          <div className=" col-12 col-md-6 d-flex">
+            <div className={`${style.icon} col-1 me-4`}>
+              <MdDashboardCustomize color="#4ECB71" size={40} />
+            </div>
+            <div
+              className={`${style.text} d-flex flex-column gap-2 align-content-center justify-content-start`}
+            >
+              <div className={style.title}>{Customizable}</div>
+              <div className={style.desc}>
+                {CommunityP}
+              </div>
+            </div>
+          </div>
+          <div className=" col-12 col-md-6 d-flex">
+            <div className={`${style.icon} col-1 me-4`}>
+              <GiMeal color="#4ECB71" size={40} />
+            </div>
+            <div
+              className={`${style.text} d-flex flex-column gap-2 align-content-center justify-content-start`}
+            >
+              <div className={style.title}>{Expertly}</div>
+              <div className={style.desc}>
+                {ExpertlyP}
+              </div>
+            </div>
+          </div>
+          <div className=" col-12 col-md-6 d-flex">
+            <div className={`${style.icon} col-1 me-4`}>
+              <PiUsersThreeDuotone color="#4ECB71" size={40} />
+            </div>
+            <div
+              className={`${style.text} d-flex flex-column gap-2 align-content-center justify-content-start`}
+            >
+              <div className={style.title}>{Community}</div>
+              <div className={style.desc}>
+                {CommunityP}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/wannameal/src/components/commonMeals/commonMeals.jsx b/wannameal/src/components/commonMeals/commonMeals.jsx
new file mode 100644
index 0000000..bb83257
--- /dev/null
+++ b/wannameal/src/components/commonMeals/commonMeals.jsx
@@ -0,0 +1,82 @@
+import React, { useEffect } from "react";
+import style from "./commonMeals.module.css";
+import MealCard from "../mealCard/mealCard";
+import { useSelector, useDispatch } from "react-redux";
+import Loading from "../loading/loading";
+import {
+  fetchCommonMeals,
+  getCommonMeals,
+  getMealsError,
+  getMealsStatus,
+} from "../../redux/slices/recomendedMealsSlice";
+import { MdSmsFailed } from "react-icons/md";
+import { getuser } from "../../redux/slices/authSlice";
+import { getLanguage } from "../../redux/slices/language";
+
+export default function CommonMeals() {
+  const commonMeals = useSelector(getCommonMeals);
+  console.log("🚀 ~ CommonMeals ~ commonMeals:", commonMeals);
+  const mealsError = useSelector(getMealsError);
+  const mealsStatus = useSelector(getMealsStatus);
+  const availableUser = useSelector(getuser);
+  const language = useSelector(getLanguage);
+
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    if (availableUser?.token) {
+      const fetchMeals = async () => {
+        await dispatch(
+          fetchCommonMeals({ token: availableUser.token, lang: language })
+        );
+      };
+      fetchMeals();
+    }
+  }, [dispatch, language]);
+
+  if (mealsStatus === "loading")
+    return (
+      <div className="w-100 d-flex flex-column justify-content-center align-items-center">
+        <h1 className={`w-100 my-3 mx-auto text-center ${style.mainTitle}`}>
+          Latest <span>recipes</span>
+        </h1>
+        <Loading />
+      </div>
+    );
+
+  if (mealsError)
+    return (
+      <div className="w-100 text-center fs-2 mt-5">
+        <h1 className={`w-100 my-3 mx-auto text-center ${style.mainTitle}`}>
+          Latest <span>recipes</span>
+        </h1>
+        <p className="mt-5">
+          {mealsError}
+          <MdSmsFailed size={25} className="text-danger ms-2 " />
+        </p>
+      </div>
+    );
+
+  return (
+    <div
+      style={{ minHeight: "100vh" }}
+      className="d-flex flex-column align-items-center justify-content-center"
+    >
+      <h1 className={`w-100 my-3 mx-auto text-center ${style.mainTitle}`}>
+        Latest <span>recipes</span>
+      </h1>
+      <div className="container-lg">
+        <div
+          className={`row p-0 my-3 d-flex align-items-center  ${style.recipsContainer}`}
+        >
+          {commonMeals &&
+            commonMeals.slice(0, 6).map((meal) => (
+              <div key={meal._id} className="col-sm-12 col-md-5 col-lg p-0">
+                <MealCard meal={meal} />
+              </div>
+            ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/wannameal/src/components/commonMeals/commonMeals.module.css b/wannameal/src/components/commonMeals/commonMeals.module.css
new file mode 100644
index 0000000..0b53f2b
--- /dev/null
+++ b/wannameal/src/components/commonMeals/commonMeals.module.css
@@ -0,0 +1,40 @@
+.recipsContainer {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(370px, 1fr));
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.noMealscontainer {
+  margin: 20px 0;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  align-items: center;
+  justify-content: space-around;
+}
+
+.noMealscontainer .imageContainer {
+  width: 150px;
+}
+.noMealscontainer .imageContainer img {
+  width: 100%;
+}
+.noMealscontainer .mainTitle,
+.noMealscontainer .secondaryTitle {
+  max-width: 500px;
+}
+
+.mainTitle {
+  font-weight: 600;
+  z-index: 100;
+  text-transform: capitalize;
+}
+.mainTitle span {
+  color: var(--green);
+}
+
+.darkmodeChanges {
+  background-color: var(--text_gray);
+}
diff --git a/wannameal/src/components/dashNav/page.module.css b/wannameal/src/components/dashNav/page.module.css
index 9af7db3..60cd13f 100644
--- a/wannameal/src/components/dashNav/page.module.css
+++ b/wannameal/src/components/dashNav/page.module.css
@@ -4,7 +4,7 @@
   align-items: center;
   position: relative;
   border-radius: 12px;
-  background: #fff;
+  background: var(--text_white);
   box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.25);
 }
 
@@ -17,8 +17,8 @@
   border: 2px solid transparent;
   border-radius: 8px;
   outline: none;
-  background-color: #fff;
-  color: #0d0c22;
+  background-color: var(--text_white);
+  color: var(--text_black);
   transition: 0.3s ease;
 }
 
@@ -34,7 +34,7 @@
 }
 .backIcon {
   border-radius: 8px;
-  background: #fff;
+  background: var(--text_white);
   box-shadow: 0px 0px 7px 2px rgba(0, 0, 0, 0.25);
   padding: 0.5rem;
 }
diff --git a/wannameal/src/components/landingPage/LandingPage.jsx b/wannameal/src/components/landingPage/LandingPage.jsx
index f111e69..7a8fca7 100644
--- a/wannameal/src/components/landingPage/LandingPage.jsx
+++ b/wannameal/src/components/landingPage/LandingPage.jsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { } from "react";
 import rec2 from "../../assets/Rectangle 2.png";
 import rec3 from "../../assets/Rectangle 3.png";
 import rec4 from "../../assets/Rectangle 4.png";
@@ -8,39 +8,43 @@ import rec7 from "../../assets/Rectangle 7.png";
 import rec8 from "../../assets/Rectangle 8.png";
 import rec9 from "../../assets/Rectangle 9.png";
 import rec10 from "../../assets/Rectangle 10.png";
-import { motion } from "framer-motion"
-import styles from './landing.module.css';
-export default function landingPage() {
+import { motion } from "framer-motion";
+import styles from "./landing.module.css";
+import { Link } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+export default function LandingPage() {
+  const { t, i18n } = useTranslation()
+  const isAr = i18n.dir();
+  console.log(isAr);
   return (
     <div className={styles.homeContainer}>
       <div className={`container-lg m-0 p-0 `}>
-        <div className="row ">
+        <div className="row">
           <motion.div
             initial={{ x: -200, opacity: 0.3 }}
             animate={{ x: 0, opacity: 1 }}
             transition={{ duration: 0.8 }}
-            className={`col-12 col-lg-6  ${styles.info}`}>
+            className={`col-12 col-lg-6  ${styles.info}`}
+          >
             <div className={styles.mainTitle}>
-              <h1 >
-                Health Requires Healthy food
-              </h1>
-              <h3>Manage your recipes the easy way</h3>
+              <h1>{t("heading")}</h1>
+              <h3>{t("mini")}</h3>
             </div>
             <div className={styles.description}>
-              <p>share recipes with your friends and discover new ones</p>
-              <p>
-                Know the parts of the meal and what it consists of and the
-                components that each molecule contains.
-              </p>
+              <p>{t('intro_p1')}</p>
+              <p>{t('intro_p2')}</p>
             </div>
-            <button className={`btn ${styles.button}`}>Make a meal</button>
+            <Link to={"/makeMeal"} className={`btn ${styles.button}`}>
+              {t('mainBtn')}
+            </Link>
           </motion.div>
-          <div className={` col-lg-6 ${styles.images}`}>
+          <div className={` col-lg-6 ${isAr === 'ltr' ? styles.images : styles.imagesAR}`}>
             <motion.div
               initial={{ x: 600, scale: 0.5 }}
               animate={{ x: 0, scale: 1 }}
               transition={{ duration: 0.6 }}
-              className={` ${styles.imageCol}`}>
+              className={` ${styles.imageCol}`}
+            >
               <img
                 src={rec10}
                 width="100"
@@ -54,7 +58,8 @@ export default function landingPage() {
               initial={{ x: 600, scale: 0.5 }}
               animate={{ x: 0, scale: 1 }}
               transition={{ duration: 0.8 }}
-              className={` ${styles.imageCol}`}>
+              className={` ${styles.imageCol}`}
+            >
               <img
                 src={rec9}
                 width="110"
@@ -76,7 +81,8 @@ export default function landingPage() {
               initial={{ x: 600, scale: 0.5 }}
               animate={{ x: 0, scale: 1 }}
               transition={{ duration: 1 }}
-              className={` ${styles.imageCol}`}>
+              className={` ${styles.imageCol}`}
+            >
               <img
                 src={rec7}
                 width="130"
@@ -106,7 +112,8 @@ export default function landingPage() {
               initial={{ x: 600, scale: 0.5 }}
               animate={{ x: 0, scale: 1 }}
               transition={{ duration: 1.2 }}
-              className={` ${styles.imageCol}`}>
+              className={` ${styles.imageCol}`}
+            >
               <img
                 src={rec4}
                 width="150"
diff --git a/wannameal/src/components/landingPage/landing.module.css b/wannameal/src/components/landingPage/landing.module.css
index ac7836c..4ae34d4 100644
--- a/wannameal/src/components/landingPage/landing.module.css
+++ b/wannameal/src/components/landingPage/landing.module.css
@@ -1,10 +1,10 @@
 .homeContainer {
   width: 100%;
-  height: calc(100vh - 0px);
+  height: calc(100vh - 66px);
   display: flex;
   align-items: center;
   gap: 30px;
-  background-color: var(--body);
+  background-image: linear-gradient(to top, var(--body) 90%, var(--text_white));
   position: relative;
   overflow: hidden;
 }
@@ -15,10 +15,11 @@
   justify-content: space-evenly;
   align-items: flex-start;
   padding-left: 7rem;
+  /* padding-right: 5rem; */
 }
 
 .info .mainTitle {
-  color: #272727;
+  color: var(--text_black);
   font-style: normal;
   line-height: 80px;
 }
@@ -57,6 +58,17 @@
   top: 50%;
   transform: translateY(-50%);
 }
+.imagesAR {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 10px;
+  z-index: 100;
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
 .imageCol {
   display: flex;
   flex-direction: column;
@@ -66,13 +78,15 @@
 }
 
 @media (max-width: 991px) {
-  .homeContainer .images {
+  .homeContainer .images,
+  .homeContainer .imagesAR {
     display: none;
   }
 }
-@media (max-width: 700px) {
+@media (max-width: 990px) {
   .homeContainer .info {
     padding-left: 2rem;
+    padding-right: 5rem;
   }
 }
 @media (min-width: 992px) {
@@ -81,37 +95,45 @@
   }
 }
 @media (min-width: 1220px) {
-  .homeContainer .images .imageCol:nth-child(1) img {
+  .homeContainer .images .imageCol:nth-child(1) img,
+  .homeContainer .imagesAR .imageCol:nth-child(1) img {
     width: 130px;
     height: 130px;
   }
-  .homeContainer .images .imageCol:nth-child(2) img {
+  .homeContainer .images .imageCol:nth-child(2) img,
+  .homeContainer .imagesAR .imageCol:nth-child(2) img {
     width: 150px;
     height: 150px;
   }
-  .homeContainer .images .imageCol:nth-child(3) img {
+  .homeContainer .images .imageCol:nth-child(3) img,
+  .homeContainer .imagesAR .imageCol:nth-child(3) img {
     width: 180px;
     height: 180px;
   }
-  .homeContainer .images .imageCol:nth-child(4) img {
+  .homeContainer .images .imageCol:nth-child(4) img,
+  .homeContainer .imagesAR .imageCol:nth-child(4) img {
     width: 200px;
     height: 200px;
   }
 }
 @media (min-width: 1500px) {
-  .homeContainer .images .imageCol:nth-child(1) img {
+  .homeContainer .images .imageCol:nth-child(1) img,
+  .homeContainer .imagesAR .imageCol:nth-child(1) img {
     width: 160px;
     height: 160px;
   }
-  .homeContainer .images .imageCol:nth-child(2) img {
+  .homeContainer .images .imageCol:nth-child(2) img,
+  .homeContainer .imagesAR .imageCol:nth-child(2) img {
     width: 180px;
     height: 180px;
   }
-  .homeContainer .images .imageCol:nth-child(3) img {
+  .homeContainer .images .imageCol:nth-child(3) img,
+  .homeContainer .imagesAR .imageCol:nth-child(3) img {
     width: 210px;
     height: 210px;
   }
-  .homeContainer .images .imageCol:nth-child(4) img {
+  .homeContainer .images .imageCol:nth-child(4) img,
+  .homeContainer .imagesAR .imageCol:nth-child(4) img {
     width: 240px;
     height: 240px;
   }
diff --git a/wannameal/src/components/languageSelector/LanguageSelector.jsx b/wannameal/src/components/languageSelector/LanguageSelector.jsx
new file mode 100644
index 0000000..1693e38
--- /dev/null
+++ b/wannameal/src/components/languageSelector/LanguageSelector.jsx
@@ -0,0 +1,48 @@
+import React from 'react'
+import { useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import style from './style.module.css'
+import { MdLanguage } from "react-icons/md";
+import { useDispatch, useSelector } from "react-redux";
+import { switchToEnglish, switchToArabic, getLanguage } from "../../redux/slices/language";
+
+const langs = [
+    { code: 'en', lang: 'English' },
+    { code: 'ar', lang: 'Arabic' },
+]
+
+export default function LanguageSelector() {
+    const dispatch = useDispatch();
+    const language = useSelector(getLanguage)
+    const { i18n } = useTranslation()
+    const changeLanguage = (lng) => {
+        i18n.changeLanguage(lng);
+        if (lng === 'en') {
+            dispatch(switchToEnglish());
+        } else if (lng === 'ar') {
+            dispatch(switchToArabic());
+        }
+    };
+    useEffect(() => {
+        document.body.dir = i18n.dir()
+    }, [i18n, i18n.language])
+
+    return (
+        <>
+            <label className={style.popup}>
+                <input type="checkbox" />
+                <div tabIndex={0} className={style.burger}>
+                    <MdLanguage size={20} color='white' />
+                </div>
+                <nav className={style.popup_window}>
+                    <ul>
+                        {langs.map((x) => {
+                            return <li><button onClick={() => changeLanguage(x.code)} key={x.code}><span>{x.lang}</span></button></li>
+                        })}
+                    </ul>
+                </nav>
+            </label>
+
+        </>
+    )
+}
diff --git a/wannameal/src/components/languageSelector/style.module.css b/wannameal/src/components/languageSelector/style.module.css
new file mode 100644
index 0000000..e1e9326
--- /dev/null
+++ b/wannameal/src/components/languageSelector/style.module.css
@@ -0,0 +1,187 @@
+.popup {
+  --burger-line-width: 1.125em;
+  --burger-line-height: 0.125em;
+  --burger-offset: 0.625em;
+  --burger-bg: #00bf63;
+  --burger-color: #333;
+  --burger-line-border-radius: 0.1875em;
+  --burger-diameter: 3.125em;
+  --burger-btn-border-radius: calc(var(--burger-diameter) / 2);
+  --burger-line-transition: 0.3s;
+  --burger-transition: all 0.1s ease-in-out;
+  --burger-hover-scale: 1.1;
+  --burger-active-scale: 0.95;
+  --burger-enable-outline-color: var(--burger-bg);
+  --burger-enable-outline-width: 0.125em;
+  --burger-enable-outline-offset: var(--burger-enable-outline-width);
+  /* nav */
+  --nav-padding-x: 0.25em;
+  --nav-padding-y: 0.625em;
+  --nav-border-radius: 0.375em;
+  --nav-border-color: #ccc;
+  --nav-border-width: 0.0625em;
+  --nav-shadow-color: rgba(0, 0, 0, 0.2);
+  --nav-shadow-width: 0 1px 5px;
+  --nav-bg: #eee;
+  --nav-font-family: "Poppins", sans-serif;
+  --nav-default-scale: 0.8;
+  --nav-active-scale: 1;
+  --nav-position-left: 0;
+  --nav-position-right: unset;
+  /* if you want to change sides just switch one property */
+  /* from properties to "unset" and the other to 0 */
+  /* title */
+  --nav-title-size: 0.625em;
+  --nav-title-color: #777;
+  --nav-title-padding-x: 1rem;
+  --nav-title-padding-y: 0.25em;
+  /* nav button */
+  --nav-button-padding-x: 1rem;
+  --nav-button-padding-y: 0.375em;
+  --nav-button-border-radius: 0.375em;
+  --nav-button-font-size: 17px;
+  --nav-button-hover-bg: #00bf63;
+  --nav-button-hover-text-color: #fff;
+  --nav-button-distance: 0.875em;
+  /* underline */
+  --underline-border-width: 0.0625em;
+  --underline-border-color: #ccc;
+  --underline-margin-y: 0.3125em;
+}
+
+/* popup settings 👆 */
+
+.popup {
+  display: inline-block;
+  text-rendering: optimizeLegibility;
+  position: relative;
+}
+
+.popup input {
+  display: none;
+}
+
+.burger {
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  background: var(--green);
+  width: var(--burger-diameter);
+  height: var(--burger-diameter);
+  border-radius: var(--burger-btn-border-radius);
+  border: none;
+  cursor: pointer;
+  overflow: hidden;
+  transition: var(--burger-transition);
+  outline: var(--burger-enable-outline-width) solid transparent;
+  outline-offset: 0;
+}
+
+.popup_window {
+  transform: scale(var(--nav-default-scale));
+  visibility: hidden;
+  opacity: 0;
+  position: absolute;
+  padding: var(--nav-padding-y) var(--nav-padding-x);
+  background: var(--light_burble);
+  font-family: var(--nav-font-family);
+  color: var(--nav-text-color);
+  border-radius: var(--nav-border-radius);
+  box-shadow: var(--nav-shadow-width) var(--nav-shadow-color);
+  border: var(--nav-border-width) solid var(--nav-border-color);
+  top: calc(
+    var(--burger-diameter) + var(--burger-enable-outline-width) +
+      var(--burger-enable-outline-offset)
+  );
+  left: var(--nav-position-left);
+  right: var(--nav-position-right);
+  transition: var(--burger-transition);
+  margin-top: 10px;
+}
+
+@media (max-width: 1056px) {
+  .popup_window {
+    left: -38px;
+  }
+}
+@media (max-width: 991px) {
+  .popup_window {
+    top: 0px;
+    left: 110%;
+    margin: 0;
+    padding: 0;
+  }
+  .popup_window ul {
+    display: flex;
+  }
+  .popup_window ul button {
+    padding: 5px !important;
+  }
+}
+.popup_window ul {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+.popup_window ul button {
+  outline: none;
+  width: 100%;
+  border: none;
+  background: none;
+  display: flex;
+  align-items: center;
+  color: var(--green);
+  font-size: var(--nav-button-font-size);
+  padding: var(--nav-button-padding-y) var(--nav-button-padding-x);
+  white-space: nowrap;
+  border-radius: var(--nav-button-border-radius);
+  cursor: pointer;
+  column-gap: var(--nav-button-distance);
+}
+
+/* actions */
+
+.popup_window ul button:hover,
+.popup_window ul button:focus-visible,
+.popup_window ul button:hover svg,
+.popup_window ul button:focus-visible svg {
+  color: var(--text_white);
+  background: var(--green);
+}
+
+.burger:hover {
+  transform: scale(var(--burger-hover-scale));
+}
+
+.burger:active {
+  transform: scale(var(--burger-active-scale));
+}
+
+.burger:focus:not(:hover) {
+  outline-color: var(--burger-enable-outline-color);
+  outline-offset: var(--burger-enable-outline-offset);
+}
+
+.popup input:checked + .burger span:nth-child(1) {
+  top: 50%;
+  transform: translateY(-50%) rotate(45deg);
+}
+
+.popup input:checked + .burger span:nth-child(2) {
+  bottom: 50%;
+  transform: translateY(50%) rotate(-45deg);
+}
+
+.popup input:checked + .burger span:nth-child(3) {
+  transform: translateX(
+    calc(var(--burger-diameter) * -1 - var(--burger-line-width))
+  );
+}
+
+.popup input:checked ~ nav {
+  transform: scale(var(--nav-active-scale));
+  visibility: visible;
+  opacity: 1;
+}
diff --git a/wannameal/src/components/loading/loading.jsx b/wannameal/src/components/loading/loading.jsx
new file mode 100644
index 0000000..6111d7e
--- /dev/null
+++ b/wannameal/src/components/loading/loading.jsx
@@ -0,0 +1,13 @@
+import React from "react";
+import loading from "../../assets/loading.gif";
+
+export default function Loading({ width = "200px", height = "200px" }) {
+  return (
+    <div
+      className="imageContainer d-flex justify-content-center align-items-center"
+      style={{ width, height }}
+    >
+      <img src={loading} alt="loading" className="w-100 h-100" />
+    </div>
+  );
+}
diff --git a/wannameal/src/components/mealCard/dashCard.jsx b/wannameal/src/components/mealCard/dashCard.jsx
new file mode 100644
index 0000000..c9585fc
--- /dev/null
+++ b/wannameal/src/components/mealCard/dashCard.jsx
@@ -0,0 +1,48 @@
+import React from "react";
+import styles from "./dashcard.module.css";
+import { IoTime } from "react-icons/io5";
+import { BsFire } from "react-icons/bs";
+import { GiCookingPot } from "react-icons/gi";
+import { CiBookmark } from "react-icons/ci";
+import { Link } from "react-router-dom";
+function DashCard({ meal }) {
+    return (
+        <>
+            <Link to={`/recipeDetails/${meal?._id}`}>
+                <div className={`${styles.mealCard}`}>
+                    <div className={`${styles.imageContainer}`}>
+                        <img
+                            src={meal?.image.url}
+                            id={meal?.image.id}
+                            objectFit="cover"
+                            alt={`meal ${meal?.name}`}
+                            loading="lazy"
+                        />
+                    </div>
+                    <div className={`${styles.bookmark}`}>
+                        <CiBookmark size={35} color="#fff" />
+                    </div>
+                    <div className={`${styles.mealInfo}`}>
+                        <div className={`${styles.mealRates}`}>
+                            <div className={`${styles.time}`}>
+                                <IoTime size={25} color="#4CAF50" />
+                                <span>60</span>Minutes
+                            </div>
+                            <div className={`${styles.interacts}`}>
+                                <BsFire size={25} color="#4CAF50" />
+                                <span>600</span>
+                            </div>
+                            <div className={`${styles.components}`}>
+                                <GiCookingPot size={25} color="#4CAF50" /> <span>9</span>{" "}
+                                Components
+                            </div>
+                        </div>
+                        <h4 className={`${styles.description}`}>{meal?.name}</h4>
+                    </div>
+                </div>
+            </Link>
+        </>
+    );
+}
+
+export default DashCard;
diff --git a/wannameal/src/components/mealCard/dashcard.module.css b/wannameal/src/components/mealCard/dashcard.module.css
new file mode 100644
index 0000000..0ff1e7e
--- /dev/null
+++ b/wannameal/src/components/mealCard/dashcard.module.css
@@ -0,0 +1,93 @@
+.mealCard {
+  /* margin-top: 50px; */
+  width: 370px;
+  height: 300px;
+  border-radius: 15px;
+  background-image: url("../../assets/Rectangle\ 9.png");
+  background-repeat: no-repeat;
+  background-size: cover;
+  position: relative;
+  cursor: pointer;
+  transition: 0.2s;
+  transform: scale(1.001);
+}
+@media (min-width: 770px) {
+  .mealCard {
+    width: 300px;
+  }
+}
+@media (min-width: 1550px) {
+  .mealCard {
+    width: 300px !important;
+  }
+}
+@media (min-width: 1200px) {
+  .mealCard {
+    width: 250px;
+  }
+}
+.mealCard .mealInfo {
+  color: var(--text_white);
+  background-color: #4c4c4cba;
+  display: flex;
+  width: 100%;
+  height: 120px;
+  border-radius: 15px;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  align-items: end;
+  padding: 10px;
+}
+.mealCard .mealInfo .mealRates {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.mealCard .mealInfo .mealRates span {
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.mealCard .mealInfo .description {
+  font-family: poppins;
+  font-size: 28px;
+  font-weight: 600;
+  line-height: 36px;
+  letter-spacing: 0em;
+  text-align: right;
+  width: 100%;
+  white-space: nowrap; /* Prevent the text from wrapping */
+  overflow: hidden; /* Hide the overflowed text */
+  text-overflow: ellipsis;
+}
+
+.mealCard .bookmark {
+  position: absolute;
+  top: 15px;
+  left: 15px;
+  background-color: #4c4c4cba;
+  padding: 3px 12px;
+  border-radius: 10px;
+}
+
+.mealCard .imageContainer {
+  width: 100%;
+  height: 100%;
+  border-radius: 15px;
+  position: absolute;
+  left: 0;
+  top: 0;
+  overflow: hidden;
+}
+.mealCard .imageContainer img {
+  width: 100%;
+  height: 100%;
+  border-radius: 15px;
+  position: relative;
+  overflow: hidden;
+}
diff --git a/wannameal/src/components/mealCard/mealCard.jsx b/wannameal/src/components/mealCard/mealCard.jsx
index aaaedd7..dc3eb59 100644
--- a/wannameal/src/components/mealCard/mealCard.jsx
+++ b/wannameal/src/components/mealCard/mealCard.jsx
@@ -1,43 +1,142 @@
-import React from "react";
-import styles from "../mealsSlider/mealsslider.module.css";
+import React, { useEffect, useState } from "react";
+import styles from "./mealcard.module.css";
 import { IoTime } from "react-icons/io5";
 import { BsFire } from "react-icons/bs";
 import { GiCookingPot } from "react-icons/gi";
 import { CiBookmark } from "react-icons/ci";
-function MealCard() {
+import { Link } from "react-router-dom";
+import {
+  getMealsError,
+  getMealsStatus,
+  getsSavedMeal,
+  saveMeal,
+} from "../../redux/slices/recomendedMealsSlice";
+import { useDispatch, useSelector } from "react-redux";
+import { getDecodedToken, getuser } from "../../redux/slices/authSlice";
+import Swal from "sweetalert2";
+import { getLanguage } from "../../redux/slices/language";
+
+function MealCard({ meal }) {
+  console.log("🚀 ~ MealCard ~ meal:", meal);
+  const dispatch = useDispatch();
+  const [isSaved, setIsSaved] = useState(meal?.isSaved || false);
+  const availableUser = useSelector(getuser);
+  const mealError = useSelector(getMealsError);
+  const mealstatus = useSelector(getMealsStatus);
+  console.log("🚀 ~ MealCard ~ mealstatus:", mealstatus);
+  console.log("🚀 ~ MealCard ~ mealError:", mealError);
+  const savedmeal = useSelector(getsSavedMeal);
+  console.log("🚀 ~ MealCard ~ savedmeal:", savedmeal);
+
+  useEffect(() => {
+    if (savedmeal && savedmeal?._id === meal?._id) {
+      setIsSaved(savedmeal.isSaved);
+    }
+  }, [savedmeal, meal?._id]);
+
+  const row = {
+    _id: 182,
+    recipeName: "soucees-pgklh",
+    image:
+      "https://res.cloudinary.com/dz5dpvxg7/image/upload/v1719800011/WannaMeal/meals/0TFBf-7vKLP389w4n9EGY/lypi8rese0p43vw4lmyn.png",
+    typeMeals: "Lunch",
+    ingredients: "vnbgxxxxxxxx,gfxh",
+    steps: "hshtsjrjj,jjy",
+    calories: 125,
+    times: 145,
+    EnoughFor: 5,
+  };
+
+  const handleBookmarkClick = async (e) => {
+    e.preventDefault();
+    const mealData = {
+      _id: meal?._id,
+      recipeName: meal.recipeName,
+      image: meal?.image?.url,
+      typeMeals: "Lunch",
+      ingredients: meal?.ingredients,
+      steps: meal?.steps,
+      calories: meal?.calories,
+      times: meal?.times,
+      EnoughFor: meal?.EnoughFor,
+    };
+    console.log("🚀 ~ handleBookmarkClick ~ mealData:", mealData);
+
+    try {
+      await dispatch(
+        saveMeal({
+          mealData,
+          token: availableUser?.token,
+          mealId: meal._id,
+        })
+      );
+      setIsSaved((prevIsSaved) => !prevIsSaved);
+
+      Swal.fire({
+        icon: "success",
+        title: isSaved
+          ? "Meal unsaved successfully"
+          : "Meal saved successfully",
+        toast: true,
+        position: "top-end",
+        showConfirmButton: false,
+        timer: 3000,
+        timerProgressBar: true,
+      });
+    } catch (error) {
+      console.error("Failed to save meal: ", error);
+
+      Swal.fire({
+        icon: "error",
+        title: `${mealError || "Failed to save meal"}`,
+        toast: true,
+        position: "top-end",
+        showConfirmButton: false,
+        timer: 2000,
+        timerProgressBar: true,
+      });
+    }
+  };
+
   return (
     <>
-      <div className={`${styles.mealCard}`}>
-        <div className={`${styles.imageContainer}`}>
-          <img
-            style={{ borderRadius: "15px", width: 'inherit' }}
-            src="https://images.pexels.com/photos/70497/pexels-photo-70497.jpeg?auto=compress&cs=tinysrgb&w=600"
-            fill={true}
-            objectFit="cover"
-            alt="meal"
-          />
-        </div>
-        <div className={`${styles.bookmark}`}>
-          <CiBookmark size={35} color="#fff" />
-        </div>
-        <div className={`${styles.mealInfo}`}>
-          <div className={`${styles.mealRates}`}>
-            <div className={`${styles.time}`}>
-              <IoTime size={25} color="#4CAF50" />
-              <span>60</span>Minutes
-            </div>
-            <div className={`${styles.interacts}`}>
-              <BsFire size={25} color="#4CAF50" />
-              <span>600</span>
-            </div>
-            <div className={`${styles.components}`}>
-              <GiCookingPot size={25} color="#4CAF50" /> <span>9</span>{" "}
-              Components
+      <Link to={`/recipeDetails/${meal?._id}`} state={{ meal }}>
+        <div className={`${styles.mealCard} mx-auto`}>
+          <div className={`${styles.imageContainer}`}>
+            <img
+              src={meal?.image?.url}
+              id={meal?.image?.id}
+              objectFit="cover"
+              alt={`meal ${meal?.name}`}
+              loading="lazy"
+            />
+          </div>
+          <div
+            className={`${styles.bookmark}`}
+            onClick={handleBookmarkClick}
+            style={{ backgroundColor: isSaved ? "#3ac568" : "" }}
+          >
+            <CiBookmark size={35} color="#fff" />
+          </div>
+          <div className={`${styles.mealInfo}`}>
+            <div className={`${styles.mealRates}`}>
+              <div className={`${styles.time}`}>
+                <IoTime size={25} color="#4CAF50" />
+                <span>{meal?.times}</span> Minutes
+              </div>
+              <div className={`${styles.interacts}`}>
+                <BsFire size={25} color="#4CAF50" />
+                <span>{meal?.calories}</span>
+              </div>
+              <div className={`${styles.components}`}>
+                <GiCookingPot size={25} color="#4CAF50" />{" "}
+                <span>{meal?.ingredients?.split(",").length}</span> Components
+              </div>
             </div>
+            <h4 className={`${styles.description}`}>{meal?.recipeName}</h4>
           </div>
-          <h4 className={`${styles.description}`}>لحم بقطع البطاطس والبصل</h4>
         </div>
-      </div>
+      </Link>
     </>
   );
 }
diff --git a/wannameal/src/components/mealCard/mealcard.module.css b/wannameal/src/components/mealCard/mealcard.module.css
index 55619d0..a74a7c6 100644
--- a/wannameal/src/components/mealCard/mealcard.module.css
+++ b/wannameal/src/components/mealCard/mealcard.module.css
@@ -1,17 +1,24 @@
 .mealCard {
-  margin-top: 50px;
-  width: 420px;
-  height: 310px;
+  /* margin-top: 50px; */
+  width: 340px;
+  height: 300px;
   border-radius: 15px;
-  background-image: url("../../assets/Rectangle\ 9.png");
+  /* background-image: url("../../assets/Rectangle\ 9.png"); */
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   cursor: pointer;
+  transition: 0.3s;
+  transform: scale(1.001);
+}
+@media (max-width: 767px) {
+  .mealCard {
+    width: 100%;
+  }
 }
 
 .mealCard .mealInfo {
-  color: var(--text_white);
+  color: #fff;
   background-color: #4c4c4cba;
   display: flex;
   width: 100%;
@@ -43,7 +50,11 @@
   font-weight: 600;
   line-height: 36px;
   letter-spacing: 0em;
-  text-align: center;
+  text-align: right;
+  width: 100%;
+  white-space: nowrap; /* Prevent the text from wrapping */
+  overflow: hidden; /* Hide the overflowed text */
+  text-overflow: ellipsis;
 }
 
 .mealCard .bookmark {
@@ -59,6 +70,15 @@
   width: 100%;
   height: 100%;
   border-radius: 15px;
-  position: "relative";
-  overflow: "hidden";
+  position: absolute;
+  left: 0;
+  top: 0;
+  overflow: hidden;
+}
+.mealCard .imageContainer img {
+  width: 100%;
+  height: 100%;
+  border-radius: 15px;
+  position: relative;
+  overflow: hidden;
 }
diff --git a/wannameal/src/components/mealsSlider/mealsSlider.jsx b/wannameal/src/components/mealsSlider/mealsSlider.jsx
index 040225b..79653db 100644
--- a/wannameal/src/components/mealsSlider/mealsSlider.jsx
+++ b/wannameal/src/components/mealsSlider/mealsSlider.jsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { MdSmsFailed } from "react-icons/md";
 import styles from "./mealsslider.module.css";
 
 import { Swiper, SwiperSlide } from "swiper/react";
@@ -16,9 +17,42 @@ import "swiper/css/scrollbar";
 import "swiper/css/free-mode";
 import MealCard from "../mealCard/mealCard";
 
+import { useSelector } from "react-redux";
+import {
+  getMealsError,
+  getMealsStatus,
+  getRecommendMeals,
+} from "../../redux/slices/recomendedMealsSlice";
+import Loading from "../loading/loading";
+import CommonMeals from "../commonMeals/commonMeals";
+
 function MealsSlider() {
+  const recomendedMeals = useSelector(getRecommendMeals);
+  console.log("🚀 ~ MealsSlider ~ recomendedMeals:", recomendedMeals);
+  const mealsStatus = useSelector(getMealsStatus);
+  console.log("🚀 ~ MealsSlider ~ mealsStatus:", mealsStatus);
+  const error = useSelector(getMealsError);
+  console.log("🚀 ~ MealsSlider ~ error:", error);
+
+  if (recomendedMeals && recomendedMeals.length == 0) {
+    return <CommonMeals />;
+  }
+  if (mealsStatus == "loading")
+    return (
+      <div className="w-100 d-flex justify-content-center align-items-center">
+        <Loading />
+      </div>
+    );
+  if (error)
+    return (
+      <p className="w-100 text-center fs-2 mt-5">
+        {" "}
+        {error} <MdSmsFailed size={25} className="text-danger ms-2" />
+      </p>
+    );
+
   return (
-    <div className="container">
+    <div className="container mb-3">
       <Swiper
         modules={[FreeMode]}
         freeMode={true}
@@ -44,22 +78,13 @@ function MealsSlider() {
             spaceBetween: 40,
           },
         }}
+        style={{ direction: "ltr" }}
       >
-        <SwiperSlide>
-          <MealCard />
-        </SwiperSlide>
-        <SwiperSlide>
-          <MealCard />
-        </SwiperSlide>
-        <SwiperSlide>
-          <MealCard />
-        </SwiperSlide>
-        <SwiperSlide>
-          <MealCard />
-        </SwiperSlide>
-        <SwiperSlide>
-          <MealCard />
-        </SwiperSlide>
+        {recomendedMeals?.map((meal, index) => (
+          <SwiperSlide key={index}>
+            <MealCard meal={meal} />
+          </SwiperSlide>
+        ))}
       </Swiper>
     </div>
   );
diff --git a/wannameal/src/components/navbar/navbar.jsx b/wannameal/src/components/navbar/navbar.jsx
index 61d9c03..69d4aa6 100644
--- a/wannameal/src/components/navbar/navbar.jsx
+++ b/wannameal/src/components/navbar/navbar.jsx
@@ -1,10 +1,67 @@
-import React, { useMemo, useState } from "react";
+// import { jwtDecode } from "jwt-decode";
+import Swal from "sweetalert2";
+import React, { useMemo } from "react";
 import style from "./page.module.css";
 import { Link, useLocation } from "react-router-dom";
-import { curve, menuSlide, slide } from "./Animate";
-import { AnimatePresence, motion } from "framer-motion";
-
+import { IoIosSearch } from "react-icons/io";
+import { useDispatch, useSelector } from "react-redux";
+import { getuser, logout } from "../../redux/slices/authSlice";
+import { IoNotificationsOutline } from "react-icons/io5";
+import LanguageSelector from "../../components/languageSelector/LanguageSelector";
+import { getTheme, toggleTheme } from "../../redux/slices/systemModeSlice";
+import { IoMoonOutline } from "react-icons/io5";
+import { IoSunnyOutline } from "react-icons/io5";
+import { HiBars3 } from "react-icons/hi2";
+import { useTranslation } from "react-i18next";
+import { getLoggoedUser } from "../../redux/slices/userSLice";
 function Navbar() {
+  const availableUser = useSelector(getuser);
+  const loggedUser = useSelector(getLoggoedUser);
+  console.log("🚀 ~ Navbar ~ loggedUser:", loggedUser);
+  console.log("🚀 ~ Navbar ~ availableUser:", availableUser);
+  const dispatch = useDispatch();
+  const theme = useSelector(getTheme);
+  console.log("🚀 ~ Navbar ~ theme:", theme);
+
+  let handleLogout = () => {
+    Swal.fire({
+      toast: true,
+      position: "top-end",
+      title: "Are you Sure you want to log out ?",
+      icon: "warning",
+      showCancelButton: true,
+      confirmButtonColor: "rgb(236, 52, 52)",
+      cancelButtonColor: "#3ac568",
+      confirmButtonText: "Log Out",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        dispatch(logout());
+        let timerInterval;
+        Swal.fire({
+          title: "Logging Out!",
+          html: "",
+          timer: 3000,
+          timerProgressBar: true,
+
+          didOpen: () => {
+            Swal.showLoading();
+          },
+          willClose: () => {
+            clearInterval(timerInterval);
+          },
+        });
+      }
+    });
+  };
+
+  // let decodedUser = null;
+  // try {
+  //   decodedUser = jwtDecode(availableUser.result);
+  //   console.log("Decoded User:", decodedUser);
+  // } catch (error) {
+  //   console.error("Error decoding JWT token:", error);
+  // }
+
   const location = useLocation();
   const path = location.pathname;
 
@@ -13,8 +70,7 @@ function Navbar() {
       path === "/accounting" ||
       path === "/verification" ||
       path === "/forgotPassword" ||
-      path === "/reset" ||
-      path.startsWith("/dashboard")
+      path === "/reset"
     ) {
       return true;
     } else {
@@ -22,100 +78,209 @@ function Navbar() {
     }
   }, [path]);
 
-  const [clicked, setClicked] = useState(false);
-
-  const navItems = [
-    {
-      title: "Home",
-      href: "/",
-    },
-    {
-      title: "Community",
-      href: "/",
-    },
-    {
-      title: "Demo",
-      href: "/",
-    },
-    {
-      title: "Contact",
-      href: "/",
-    },
-  ];
+  const toggletheme = () => {
+    dispatch(toggleTheme());
+  };
+  const { t, i18n } = useTranslation();
+  const isAr = i18n.dir();
+  console.log(isAr);
+  const {
+    Home,
+    Community,
+    Make,
+    Profile,
+    Contact,
+    logoutt,
+    dashboard,
+    makeMeal,
+  } = t("canvas");
 
   return (
     <>
       {!hide && (
-        <AnimatePresence mode="wait" initial={false}>
-          <div className="d-flex align-items-center w-100 justify-content-between" id={style.Header}>
-            <Link to={'/'}>Fast Plat</Link>
-            {/* burger menu  */}
-            <div
-              onClick={() => setClicked(!clicked)}
-              className={`${style.toggle} ${clicked ? style.toggled : ""}`}
+        <nav className={`${style.nav} navbar navbar-expand-lg sticky-lg-top `}>
+          <div className="container">
+            <button
+              class={`${isAr === "ltr" ? style.leftBars : style.rightBars}`}
+              type=""
+              data-bs-toggle="offcanvas"
+              data-bs-target="#offcanvasRouting"
+              aria-controls="offcanvasWithBothOptions"
             >
-              <span></span>
-              <span></span>
-              <span></span>
-            </div>
-            {/* nav menu  */}
-            {clicked ? (
-              <motion.div
-                animate='enter'
-                exit='exit'
-                initial='initial'
-                variants={menuSlide}
-                className={style.menu}>
-                <div className={style.body}>
-                  <div className={style.nav}>
-                    <div className={style.header}>
-                      <p>Navigation</p>
-                    </div>
-                    {navItems.map((data, index) => {
-                      return (
-                        <motion.div
-                          key={index}
-                          variants={slide}
-                          custom={index}
-                          initial="initial"
-                          animate="enter"
-                          exit="exit"
-                          className={style.link}
-                        >
-                          <div
+              <HiBars3 size={22} />
+            </button>
 
-                            className={style.indicator}
-                          ></div>
-                          <Link data={{ ...data, index }} key={index} href={data.href}>{data.title}</Link>
-                        </motion.div>
-                      );
-                    })}
+            <Link className="" to="/">
+              {theme === "light" ? (
+                <div className={style.logoContainer}>
+                  <img
+                    src={require("../../assets/logoLight.png")}
+                    alt=""
+                    srcset=""
+                  />
+                </div>
+              ) : (
+                <div className={style.logoContainer}>
+                  <img
+                    src={require("../../assets/logoDark.png")}
+                    alt=""
+                    srcset=""
+                  />
+                </div>
+              )}
+            </Link>
+            <button
+              className={`${style.toggler} navbar-toggler`}
+              type="button"
+              data-bs-toggle="collapse"
+              data-bs-target="#navbarSupportedContent"
+              aria-controls="navbarSupportedContent"
+              aria-expanded="false"
+              aria-label="Toggle navigation"
+            >
+              <span className="navbar-toggler-icon" />
+            </button>
+            <div
+              className={` ${style.dragMenu} collapse navbar-collapse gap-3`}
+              id="navbarSupportedContent"
+            >
+              <form className={`d-flex mx-auto ${style.navForm}`} role="search">
+                <input
+                  className="form-control me-2"
+                  type="search"
+                  placeholder="Search recipes"
+                  aria-label="Search"
+                />
+                <div className={`${style.searchIcon}`}>
+                  {" "}
+                  <IoIosSearch size={20} />
+                </div>
+                {theme === "light" ? (
+                  <div className={style.moon} onClick={toggletheme}>
+                    <IoMoonOutline size={22} color="#fff" />
                   </div>
-                  <div className={style.footer}>
-                    <Link href={''}>Github</Link>
-                    <Link href={''}>Instagram</Link>
-                    <Link href={''}>Dribble</Link>
-                    <Link href={''}>LinkedIn</Link>
+                ) : (
+                  <div className={style.sun} onClick={toggletheme}>
+                    <IoSunnyOutline size={22} color="#fff" />
                   </div>
-                </div>
-                <svg className={style.svgCurve}>
-                  <motion.path
-                    initial="initial"
-                    animate="enter"
-                    exit="exit"
-                    variants={curve}
-                    d="..."
-                  ></motion.path>
-                </svg>
+                )}
+              </form>
 
-              </motion.div>
-            ) : (
-              ""
-            )}
-          </div >
-        </AnimatePresence>
-      )
-      }
+              <div className={` ${style.authBtns}`}>
+                {availableUser ? (
+                  <>
+                    <div className={style.userData}>
+                      <Link
+                        className={` ${style.notification}`}
+                        to="/community"
+                      >
+                        <IoNotificationsOutline
+                          size={25}
+                          className={style.icon}
+                        />
+                      </Link>
+                      <Link
+                        className={` ${style.userName}`}
+                        title={availableUser?.data.userName}
+                        to="/"
+                      >
+                        {availableUser?.data.userName}
+                      </Link>
+                      <Link className={` ${style.userImage}`} to="/profile">
+                        <img
+                          // src={userImage}
+                          src={availableUser?.data.profileImage.url}
+                          title={availableUser?.data.userName}
+                          alt="user"
+                          srcset=""
+                        />
+                      </Link>
+                    </div>
+                    {/* <div onClick={handleLogout} className={` ${style.logout}`}>
+                      logout
+                    </div> */}
+                  </>
+                ) : (
+                  <>
+                    <Link className={` ${style.register}`} to="/auth">
+                      sign up
+                    </Link>
+                    <Link className={` ${style.login}`} to="/auth">
+                      log in
+                    </Link>
+                  </>
+                )}
+              </div>
+              <LanguageSelector />
+            </div>
+          </div>
+        </nav>
+      )}
+
+      {/*left aside  offcanvas */}
+      <div
+        className={`offcanvas ${
+          isAr === "ltr" ? "offcanvas-start" : "offcanvas-end"
+        } ${style.Aside}`}
+        tabIndex={-1}
+        id="offcanvasRouting"
+        aria-labelledby="offcanvasExampleLabel"
+      >
+        <div className="offcanvas-header">
+          {theme === "light" ? (
+            <div className={style.logoContainer}>
+              <img
+                src={require("../../assets/logoLight.png")}
+                alt=""
+                srcset=""
+              />
+            </div>
+          ) : (
+            <div className={style.logoContainer}>
+              <img
+                src={require("../../assets/logoDark.png")}
+                alt=""
+                srcset=""
+              />
+            </div>
+          )}
+        </div>
+        <div className="offcanvas-body p-0">
+          <div>
+            <ul>
+              <li>
+                <Link to={"/"}>{Home}</Link>
+              </li>
+              <li>
+                <Link to={"/community"}>{Community}</Link>
+              </li>
+              <li>
+                <Link to={"/makeMeal"}>{Make}</Link>
+              </li>
+              <li>
+                <Link to={"/profile"}>{Profile}</Link>
+              </li>
+              <li>
+                <Link to={"/contact"}>{Contact}</Link>
+              </li>
+              {loggedUser && loggedUser?.role === "admin" && (
+                <>
+                  <li>
+                    <Link to={"/dashboard"}>{dashboard}</Link>
+                  </li>
+                  <li>
+                    <Link to={"/AddProduct"}>{makeMeal}</Link>
+                  </li>
+                </>
+              )}
+            </ul>
+
+            <div className={style.logout} onClick={handleLogout}>
+              {logoutt}
+            </div>
+          </div>
+        </div>
+      </div>
     </>
   );
 }
diff --git a/wannameal/src/components/navbar/page.module.css b/wannameal/src/components/navbar/page.module.css
index 251ab29..59206d7 100644
--- a/wannameal/src/components/navbar/page.module.css
+++ b/wannameal/src/components/navbar/page.module.css
@@ -1,137 +1,232 @@
-#Header {
-  position: absolute;
-  top: 15px;
-  z-index: 10000;
-  height: 80px;
-  background-color: transparent;
-  padding: 0px 4rem 0 7rem;
+.nav {
+  backdrop-filter: blur(10px) !important;
+  background-color: inherit !important;
+  position: relative;
+}
+.logoContainer {
+  width: 50px;
+  margin-right: 60px;
+}
+.logoContainer img {
+  width: 100%;
+  object-fit: cover;
+}
+@media (max-width: 991px) {
+  .dragMenu {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+  }
+}
+
+.toggler {
+  box-shadow: none !important;
+  border: none;
+  outline: none;
+  color: var(--text_black) !important;
+  font-size: 23px;
 }
-.toggle {
+
+.navForm {
+  width: 60%;
   position: relative;
-  width: 70px;
-  height: 70px;
-  background-color: var(--green);
-  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
-  border-radius: 50%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  overflow: hidden;
-  z-index: 100001;
 }
-.toggled {
-  position: fixed;
-  top: 1.2rem;
-  right: 4rem;
+
+.navForm input {
+  width: 100%;
+  border-radius: 10px !important;
+  transition: 0.1s;
+  padding-left: 40px;
+  background-color: var(--body);
+  border: 0;
+  color: var(--text_black);
+}
+.navForm input::placeholder {
+  text-transform: capitalize;
+  opacity: 0.7;
+  font-size: 14px;
+  color: var(--grayWritingColor);
+}
+.navForm input:focus {
+  outline: none;
+  box-shadow: none;
+  border: 1px solid var(--light-green) !important;
+  background-color: var(--text_white);
+  caret-color: var(--grayWritingColor);
+  color: var(--text_black);
 }
 
-.toggle span {
+.searchIcon {
   position: absolute;
-  height: 2px;
-  width: 40px;
-  background-color: rgb(255, 255, 255);
-  border-radius: 4px;
-  cursor: pointer;
-  transition: 0.5s;
+  top: 50%;
+  left: 10px;
+  transform: translateY(-50%);
+  font-size: 16px;
+  color: #999;
 }
 
-.toggle span:nth-child(1) {
-  transform: translateY(-15px);
-  width: 25px;
-  left: 15px;
-}
-.toggled span:nth-child(1) {
-  width: 40px;
-  transform: translateY(0px) rotate(45deg);
-  transition-delay: 0.125s;
+.authBtns {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
 }
 
-.toggle span:nth-child(2) {
-  transform: translateY(15px);
-  width: 15px;
-  left: 15px;
+.authBtns .login,
+.authBtns .register {
+  padding: 0.5rem 1rem;
+  color: var(--light-green);
+  text-transform: capitalize;
+  border-radius: 30px;
+  transition: 0.3s;
 }
 
-.toggled span:nth-child(2) {
-  width: 40px;
-  transform: translateY(0px) rotate(315deg);
-  transition-delay: 0.125s;
+.authBtns .login {
+  border: 1px solid var(--light-green);
+}
+.authBtns .login:hover {
+  border: 1px solid var(--light-green);
+  background-color: var(--light-green);
+  color: var(--text_white);
+  box-shadow: 0 5px 15px rgba(59, 59, 59, 0.17);
 }
 
-.toggled span:nth-child(3) {
-  transform: translateX(60px);
+.authBtns .register:hover {
+  border: 1px solid var(--light-green);
+  box-shadow: 0 5px 15px rgba(59, 59, 59, 0.17);
 }
 
-.menu {
-  height: 100vh;
-  background-color: rgb(41, 41, 41);
-  position: fixed;
-  right: 0;
-  top: 0;
-  color: white;
-  z-index: 1000;
-}
-.menu .body {
-  box-sizing: border-box;
-  height: 100%;
-  padding: 100px;
+.userData {
+  margin-right: 20px;
   display: flex;
-  flex-direction: column;
-  justify-content: space-between;
+  align-items: center;
+  gap: 15px;
+}
+.userName {
+  text-transform: capitalize;
+  font-size: 24px;
+  max-width: 150px;
+  line-height: 1.2;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
 }
-.menu .body .nav {
-  display: flex;
-  flex-direction: column;
-  font-size: 56px;
-  gap: 12px;
-  margin-top: 80px;
-}
-.menu .body .nav a {
-  text-decoration: none;
-  color: white;
-  font-weight: 300;
-}
-.menu .body .nav .header {
-  color: rgb(153, 153, 153);
-  border-bottom: 1px solid rgb(153, 153, 153);
-  text-transform: uppercase;
-  font-size: 11px;
-  margin-bottom: 40px;
-}
-/* link part  */
-.link {
-  position: relative;
+.notification {
+  padding: 6px;
+  border-radius: 4px;
+  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 5px;
+}
+.notification .icon {
+}
+
+.userImage {
+  width: 40px;
+  border-radius: 10px;
+  align-self: flex-end;
+}
+.userImage img {
+  border-radius: 10px;
+  width: 100%;
+  object-fit: cover;
+}
+
+.sun,
+.moon {
+  padding: 7px;
+  border-radius: 50%;
   display: flex;
+  justify-content: center;
   align-items: center;
+  transition: 0.3s;
+  cursor: pointer;
+}
+.sun {
+  background-color: #e98a2ff2;
+}
+.moon {
+  background-color: #5a5da0;
 }
-.indicator {
-  width: 10px;
-  height: 10px;
-  background-color: white;
+
+.leftBars {
+  padding: 7px;
   border-radius: 50%;
+  border: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: 0.3s;
+  background-color: var(--light-green);
+  color: #fff;
   position: absolute;
-  left: -30px;
+  top: 50%;
+  transform: translateY(-50%);
+  left: 20px;
 }
-.svgCurve {
+.rightBars {
+  padding: 7px;
+  border-radius: 50%;
+  border: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: 0.3s;
+  background-color: var(--light-green);
+  color: #fff;
   position: absolute;
-  top: 0;
-  left: -99px;
-  width: 100px;
-  height: 100%;
-  fill: rgb(41, 41, 41);
-  stroke: none;
-  z-index: 1000;
-}
-.footer {
+  top: 50%;
+  transform: translateY(-50%);
+  right: 50px;
+}
+
+.Aside {
   display: flex;
+  flex-direction: column;
+  gap: 20px;
+  background-color: var(--text_white);
+  color: var(--text_black);
+  width: 250px !important;
+}
+.Aside ul {
   width: 100%;
-  justify-content: space-between;
-  font-size: 12px;
-  gap: 40px;
+  display: flex;
+  flex-direction: column;
+  list-style-type: none;
+  padding: 0;
 }
-@media (max-width: 700px) {
-  #Header {
-    padding: 1rem;
-  }
+.Aside ul li {
+  width: 100%;
+  padding: 15px 0;
+  padding-left: 20px;
+  transition: 0.3s;
+  color: var(--text_black);
+  border-radius: 6px;
+  text-align: center;
+}
+.Aside ul li a {
+  width: 100% !important;
+  height: 100% !important;
+  display: block;
+}
+.Aside ul li:hover {
+  background-color: var(--green);
+  color: #fff;
+}
+
+.logout {
+  width: 70%;
+  padding: 5px 10px;
+  text-transform: capitalize;
+  font-size: 20px;
+  background-color: var(--green);
+  border-radius: 6px;
+  border: none;
+  margin: 30px auto;
+  color: var(--text_black);
+  text-align: center;
+  cursor: pointer;
+}
+
+.logout:hover {
+  background-color: var(--light-green);
 }
diff --git a/wannameal/src/components/pagination/pagination.jsx b/wannameal/src/components/pagination/pagination.jsx
index ef4c1a2..3f96e7f 100644
--- a/wannameal/src/components/pagination/pagination.jsx
+++ b/wannameal/src/components/pagination/pagination.jsx
@@ -1,33 +1,33 @@
 import React from "react";
 import { FaArrowLeft, FaArrowRight } from "react-icons/fa";
 import style from "./pagination.module.css";
-export default function Pagination() {
+
+export default function Pagination({ who, currentPage, totalPages, setCurrentPage, totalUsers }) {
+  const handlePageChange = (page) => {
+    if (page >= 1 && page <= totalPages) {
+      setCurrentPage(page);
+    }
+  };
   return (
-    <div
-      className={`d-flex justify-content-between align-items-center ${style.pagination_div}`}
-    >
-      <p className="fw-bold m-0">
-        Total users :<span className="ps-2">98</span>
-      </p>
+    <div className={`d-flex flex-column justify-content-between align-items-center flex-xl-row  ${style.pagination_div}`}>
+      <p className="fw-bold m-0">Total {who} :<span className="ps-2">{totalUsers}</span></p>
       <div className="d">
         <nav aria-label="Page navigation example">
-          <ul className="pagination d-flex gap-2">
+          <ul className="pagination d-flex gap-2 ">
             <li className={style.number_btn}>
-              <button className="" aria-label="Previous">
+              <button onClick={() => handlePageChange(currentPage - 1)} aria-label="Previous">
                 <FaArrowLeft />
               </button>
             </li>
+            {[...Array(totalPages)].map((_, index) => (
+              <li key={index} className={style.number_btn}>
+                <button onClick={() => handlePageChange(index + 1)} className={currentPage === index + 1 ? style.active : ""}>
+                  {index + 1}
+                </button>
+              </li>
+            ))}
             <li className={style.number_btn}>
-              <button className="">1</button>
-            </li>
-            <li className={style.number_btn}>
-              <button className="">2</button>
-            </li>
-            <li className={style.number_btn}>
-              <button className="">3</button>
-            </li>
-            <li className={style.number_btn}>
-              <button className="" aria-label="Next">
+              <button onClick={() => handlePageChange(currentPage + 1)} aria-label="Next">
                 <FaArrowRight />
               </button>
             </li>
diff --git a/wannameal/src/components/pagination/pagination.module.css b/wannameal/src/components/pagination/pagination.module.css
index 8db8422..c0aa6e3 100644
--- a/wannameal/src/components/pagination/pagination.module.css
+++ b/wannameal/src/components/pagination/pagination.module.css
@@ -4,9 +4,12 @@
 
 .number_btn button {
   padding: 5px 14px;
-  color: var(--text_black);
-  border-radius: 3px;
-  background: #ffffff;
+  color: var(--text_white);
+  border-radius: 7px;
+  background: var(--text_black);
   transition: 1s;
   border: 1px solid #eff3fd;
 }
+.active {
+  background-color: var(--green) !important;
+}
diff --git a/wannameal/src/components/post/post.jsx b/wannameal/src/components/post/post.jsx
new file mode 100644
index 0000000..8765d12
--- /dev/null
+++ b/wannameal/src/components/post/post.jsx
@@ -0,0 +1,174 @@
+import React, { useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { VscSend } from "react-icons/vsc";
+import {
+  commentPost,
+  getPostStatus,
+  getPostError,
+  likePost,
+  getlikkk,
+} from "../../redux/slices/postsSLlce";
+import { getDecodedToken, getuser } from "../../redux/slices/authSlice";
+import PostContent from "../postContent/PostContent";
+import Loading from "../loading/loading";
+import style from "./post.module.css";
+import defaultProfile from "../../assets/man-user.svg";
+import { getProfile } from "../../redux/slices/communityUserSlice";
+
+export default function Post({ post }) {
+  const dispatch = useDispatch();
+  const [commentText, setCommentText] = useState("");
+  const [postComments, setPostComments] = useState([]);
+  const [likedPost, setLikedPost] = useState(false);
+  const [likes, setLikes] = useState(post?.likes || []);
+
+  const commentStatus = useSelector(getPostStatus);
+  const postError = useSelector(getPostError);
+  const profile = useSelector(getProfile);
+  const { token } = useSelector(getuser);
+  const decodedToken = useSelector(getDecodedToken);
+  const likesta = useSelector(getlikkk);
+  console.log("🚀 ~ Post ~ likesta:", likesta);
+
+  useEffect(() => {
+    if (post?.replies) {
+      setPostComments(post.replies);
+    }
+    setLikedPost(post?.likes?.includes(decodedToken.id));
+  }, [post, decodedToken.id]);
+
+  const handleCommentSubmit = async (e) => {
+    e.preventDefault();
+    if (commentText.trim()) {
+      try {
+        const newComment = {
+          userProfilePic: profile?.user?.profileImage?.url || defaultProfile,
+          userName: profile?.user?.userName,
+          text: commentText,
+        };
+
+        setPostComments([...postComments, newComment]);
+
+        // Dispatch the action to add comment to server
+        await dispatch(
+          commentPost({ postId: post._id, text: commentText, token })
+        );
+
+        setCommentText("");
+      } catch (error) {
+        console.error(`Failed to add comment to ${post._id}`, postError);
+      }
+    }
+  };
+
+  const handleLikeClick = async () => {
+    try {
+      await dispatch(likePost({ postId: post._id, token })).unwrap(); // Unwrap the result to handle it as a plain promise
+
+      const newLikedPost = !likedPost;
+      setLikedPost(newLikedPost);
+
+      if (newLikedPost) {
+        setLikes([...likes, decodedToken.id]);
+      } else {
+        setLikes(likes.filter((like) => like !== decodedToken.id));
+      }
+
+      console.log("Post liked/unliked successfully");
+    } catch (error) {
+      console.error(`Failed to like ${post._id}`, error);
+    }
+  };
+
+  return (
+    <>
+      <PostContent
+        post={post}
+        comments={postComments}
+        likes={likes}
+        likedPost={likedPost}
+        onLikeClick={handleLikeClick}
+        onCommentChange={setPostComments}
+      />
+      <div
+        className="modal fade rounded-2"
+        id={`comment-${post._id}`}
+        tabIndex={-1}
+        aria-labelledby="exampleModalLabel"
+        aria-hidden="true"
+      >
+        <div className="modal-dialog modal-lg rounded-2">
+          <div className="modal-content position-relative">
+            <button
+              type="button"
+              className={` btn-close ${style.btnClose}`}
+              data-bs-dismiss="modal"
+              aria-label="Close"
+            />
+            <div className={`modal-body p-0 ${style.modalBody} rounded-2`}>
+              <PostContent
+                post={post}
+                comments={postComments}
+                likes={likes}
+                likedPost={likedPost}
+                onLikeClick={handleLikeClick}
+                onCommentChange={setPostComments}
+              />
+              <div className={`${style.comments}`}>
+                {commentStatus === "loading" ? (
+                  <Loading width="50px" height="50px" />
+                ) : postComments && postComments.length > 0 ? (
+                  postComments.map((comment, index) => (
+                    <div key={index} className={style.comment}>
+                      <div className={`${style.profileImage} col-1 me-1`}>
+                        <img
+                          src={comment.userProfilePic || defaultProfile}
+                          alt="Profile"
+                        />
+                      </div>
+                      <div className={style.commentBody}>
+                        <div className={style.name}>{comment.userName}</div>
+                        <div className={style.text}>{comment.text}</div>
+                      </div>
+                    </div>
+                  ))
+                ) : (
+                  <p className={style.noComments}>No comments yet.</p>
+                )}
+              </div>
+              <div className={`${style.uploadComment} d-flex p-`}>
+                <div className={`${style.profileImage} col-1 me-1`}>
+                  <img
+                    src={profile?.user?.profileImage?.url || defaultProfile}
+                    alt="Profile"
+                  />
+                </div>
+                <form onSubmit={handleCommentSubmit} className="col-11">
+                  <div className={`${style.textInput} col-12`}>
+                    <label htmlFor="comment">{profile?.user?.userName}</label>
+                    <input
+                      type="text"
+                      name="comment"
+                      id={`comment-${post?._id}`}
+                      className="w-100"
+                      value={commentText}
+                      onChange={(e) => setCommentText(e.target.value)}
+                      required
+                    />
+                    <button
+                      type="submit"
+                      className={style.sendIcon}
+                      disabled={commentStatus === "loading"}
+                    >
+                      <VscSend size={25} className={style.postIcon} />
+                    </button>
+                  </div>
+                </form>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/wannameal/src/components/post/post.module.css b/wannameal/src/components/post/post.module.css
new file mode 100644
index 0000000..7b0e29b
--- /dev/null
+++ b/wannameal/src/components/post/post.module.css
@@ -0,0 +1,265 @@
+.post {
+  border-radius: 6px;
+  padding: 15px;
+  background-color: var(--body);
+}
+
+.post .profileImage {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  overflow: hidden;
+}
+.post img {
+  width: 100%;
+  object-fit: cover;
+}
+
+.userInfo {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  letter-spacing: -1px;
+}
+.userInfo .name {
+  font-weight: 600;
+  color: var(--text_black);
+}
+.userInfo .email {
+  color: var(--text_gray);
+  font-size: 14px;
+  transform: scale(0.8) translate(-5px, -8px);
+}
+
+.postText {
+  line-height: 1.2rem;
+  font-weight: 500;
+}
+.preview {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.preview .imgContainer,
+.preview .videoContainer {
+  width: 100%;
+  height: 200px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+}
+.preview .imgContainer img,
+.preview .videoContainer video {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+  border-radius: 6px;
+}
+
+.modalview {
+  background-color: transparent;
+}
+
+.modalContent {
+  background-color: transparent;
+  backdrop-filter: blur(5px);
+  width: auto !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* height: auto !important; */
+}
+
+.modalBody {
+  width: 100% !important;
+}
+.modalBody img,
+.modalBody video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.reactsNum {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 5px 0px;
+  border-bottom: 1px solid var(--text_gray);
+}
+
+.reactsNum .likes,
+.reactsNum .comments {
+  font-weight: 500;
+  font-size: 12px;
+  letter-spacing: -0.5px;
+  margin: 0;
+}
+
+.reacts {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+
+.reacts .like,
+.reacts .comment,
+.reacts .share {
+  border-radius: 6px;
+  padding: 2px 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 7px;
+  background-color: var(--text_white);
+  width: 30%;
+  cursor: pointer;
+}
+
+.like .likeIcon {
+  color: var(--light-blue);
+}
+
+.like.likedPost {
+  background-color: var(--light-blue);
+}
+
+.like.likedPost .likeIcon {
+  color: var(--text_white);
+}
+
+.modalBody {
+  background-color: var(--body);
+}
+
+.modalBody .uploadComment {
+  width: 100%;
+  background-color: var(--body);
+  padding: 15px;
+  align-items: flex-start;
+}
+.modalBody .uploadComment form {
+  height: auto;
+  padding: 10px;
+  position: relative;
+  background-color: var(--text_white);
+  border-radius: 6px;
+}
+
+.modalBody .uploadComment form input {
+  border: 0;
+  margin-top: 4px;
+  background-color: transparent;
+  color: var(--text_black);
+  caret-color: var(--text_black);
+}
+.modalBody .uploadComment form label {
+  font-weight: 600;
+  letter-spacing: -1px;
+}
+.modalBody .uploadComment form input:focus {
+  border: 0px;
+  outline: 0;
+}
+.textInput .sendIcon {
+  background-color: transparent;
+  border: none;
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  background-size: cover;
+  padding: 8px;
+  transform: translateY(-50%);
+  border: 2px solid var(--light-blue);
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.textInput .sendIcon .postIcon {
+  color: var(--blue);
+  background: linear-gradient(to right, var(--blue), var(--text_black));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  transform: rotate(-45deg);
+  margin-left: 4px;
+}
+.uploadComment {
+  border-radius: 8px;
+}
+.uploadComment .profileImage {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  overflow: hidden;
+}
+.uploadComment img {
+  width: 100%;
+  object-fit: cover;
+}
+
+.comment {
+  display: flex;
+  width: 100%;
+  padding: 15px;
+  align-items: flex-start;
+}
+
+.comment .profileImage {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  overflow: hidden;
+}
+.comment .profileImage img {
+  width: 100%;
+  object-fit: cover;
+}
+.comment .commentBody {
+  background-color: var(--text_white);
+  height: auto;
+  max-width: 70%;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  border-radius: 6px;
+}
+.comment .commentBody .name {
+  letter-spacing: -1px;
+  font-weight: 600;
+}
+.comment .commentBody .text {
+  font-size: 14px;
+}
+
+.btnClose {
+  position: absolute;
+  top: 15px;
+  right: 15px;
+  width: 15px;
+  height: 15px;
+  color: #699bf7 !important;
+  z-index: 100;
+  outline: none !important;
+  box-shadow: none !important;
+  /* color: var(--light-blue) !important; */
+}
+
+.noComments {
+  text-transform: capitalize;
+  color: var(--grayWritingColor);
+  font-size: 18px;
+  width: 100%;
+  text-align: center;
+}
diff --git a/wannameal/src/components/postContent/PostContent.jsx b/wannameal/src/components/postContent/PostContent.jsx
new file mode 100644
index 0000000..91b8c76
--- /dev/null
+++ b/wannameal/src/components/postContent/PostContent.jsx
@@ -0,0 +1,189 @@
+import React, { useState, useEffect } from "react";
+import style from "./postContent.module.css";
+import profile from "../../assets/man-user.svg";
+import { AiFillHeart, AiFillMessage } from "react-icons/ai";
+import { IoIosShareAlt } from "react-icons/io";
+import { useSelector } from "react-redux";
+import { getDecodedToken, getuser } from "../../redux/slices/authSlice";
+import { useTranslation } from "react-i18next";
+
+export default function PostContent({
+  post,
+  comments,
+  likes,
+  likedPost,
+  onLikeClick,
+  onCommentChange,
+}) {
+  const [selectedImage, setSelectedImage] = useState(null);
+  const [selectedVideo, setSelectedVideo] = useState(null);
+  const [previewPhotos, setPreviewPhotos] = useState([]);
+  const [previewVideos, setPreviewVideos] = useState([]);
+
+  useEffect(() => {
+    setPreviewPhotos(post?.img ? [post?.img] : null);
+    setPreviewVideos(post?.video ? [post?.video] : null);
+  }, [post]);
+
+  const handleImageClick = (src) => {
+    setSelectedImage(src);
+  };
+
+  const handleVideoClick = (src) => {
+    setSelectedVideo(src);
+  };
+
+  const handleCommentClick = () => {
+    console.log("first comment");
+  };
+
+  const handleShareClick = () => {
+    console.log("first share");
+  };
+
+  const { t } = useTranslation();
+  const { comment, sharee, like } = t("community", {
+    fullname: "mahmoud khairy402",
+    email: "mahmoudkhairy402@gmail.com",
+  });
+
+  return (
+    <div className={`${style.post} w-100 d-flex align-items-start`}>
+      <div className={`${style.profileImage} col-1 me-1`}>
+        <img
+          src={post?.postedBy?.profileImage?.url || profile}
+          alt="profileImage"
+        />
+      </div>
+      <div className={`col-11 d-flex flex-column gap-2 ${style.postInfo}`}>
+        <div className={`${style.userInfo} col-12`}>
+          <div className={style.text}>
+            <div className={style.name}>{post?.postedBy?.userName}</div>
+            <div className={style.email}>{post?.postedBy?.email}</div>
+          </div>
+        </div>
+        <div className={`${style.postText} col-12`}>{post?.text}</div>
+        <div
+          className={`${style.preview} col-12 d-flex justify-content-center flex-wrap g-1`}
+        >
+          {post?.img &&
+            previewPhotos.map((img, index) => (
+              <div
+                className={`${style.imgContainer}`}
+                key={img?.id}
+                data-bs-toggle="modal"
+                data-bs-target={`#staticBackdrop${img?.id}`}
+                onClick={() => handleImageClick(img?.url)}
+              >
+                {img === undefined ? (
+                  ""
+                ) : (
+                  <img src={img?.url} alt={`Preview ${index}`} />
+                )}
+                {/* modal */}
+                <div
+                  className={`modal fade ${style.modalview}`}
+                  id={`staticBackdrop${img?.id}`}
+                  data-bs-keyboard="false"
+                  tabIndex="-1"
+                  aria-labelledby="staticBackdropLabel"
+                  aria-hidden="true"
+                >
+                  <div className="modal-dialog">
+                    <div className={`modal-content ${style.modalContent}`}>
+                      <div className="modal-header border-bottom-0">
+                        <button
+                          type="button"
+                          className="btn-close"
+                          data-bs-dismiss="modal"
+                          aria-label="Close"
+                        ></button>
+                      </div>
+                      <div
+                        className={`modal-body w-100 p-1 ${style.modalBody}`}
+                      >
+                        <img src={selectedImage} alt="Selected" />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))}
+          {post?.video &&
+            previewVideos.map((video, index) => (
+              <div
+                className={`${style.videoContainer}`}
+                key={video?.url}
+                data-bs-toggle="modal"
+                data-bs-target={`#staticBackdrop${video?.id}`}
+                onClick={() => handleVideoClick(video?.url)}
+              >
+                {video === undefined ? "" : <video src={video?.url} controls />}
+                {/* modal */}
+                <div
+                  className={`modal fade ${style.modalview}`}
+                  id={`staticBackdrop${video?.id}`}
+                  data-bs-keyboard="false"
+                  tabIndex="-1"
+                  aria-labelledby="staticBackdropLabel"
+                  aria-hidden="true"
+                >
+                  <div className="modal-dialog">
+                    <div className={`modal-content ${style.modalContent}`}>
+                      <div className="modal-header border-bottom-0">
+                        <button
+                          type="button"
+                          className="btn-close"
+                          data-bs-dismiss="modal"
+                          aria-label="Close"
+                        ></button>
+                      </div>
+                      <div
+                        className={`modal-body w-100 p-1 ${style.modalBody}`}
+                      >
+                        <video src={selectedVideo} controls />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))}
+        </div>
+
+        <div className={style.reactsNum}>
+          <p className={style.likes}>
+            <AiFillHeart size={16} color="#699bf7" className="me-1" />
+            {likes?.length >= 1000 ? `${likes?.length / 1000}k` : likes?.length}
+          </p>
+          <p className={style.comments}>
+            {comments.length} {comment} {/* Updated */}
+          </p>
+        </div>
+        <div className={style.reacts}>
+          <div
+            className={`${
+              likedPost ? `${style.like} ${style.likedPost}` : style.like
+            }`}
+            onClick={onLikeClick}
+          >
+            <AiFillHeart size={23} className={style.likeIcon} /> {like}
+          </div>
+          <div
+            className={style.comment}
+            onClick={handleCommentClick}
+            data-bs-toggle="modal"
+            data-bs-target={`#comment-${post._id}`}
+          >
+            <AiFillMessage size={23} color="#699bf7" />
+            {comment}
+          </div>
+
+          <div className={style.share} onClick={handleShareClick}>
+            <IoIosShareAlt size={23} color="#699bf7" />
+            {sharee}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/wannameal/src/components/postContent/postContent.module.css b/wannameal/src/components/postContent/postContent.module.css
new file mode 100644
index 0000000..9b203ca
--- /dev/null
+++ b/wannameal/src/components/postContent/postContent.module.css
@@ -0,0 +1,140 @@
+.post {
+  border-radius: 6px;
+  padding: 15px;
+  background-color: var(--body);
+  height: fit-content;
+}
+
+.post .profileImage {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  overflow: hidden;
+}
+.post img {
+  width: 100%;
+  object-fit: cover;
+}
+
+.userInfo .text {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  letter-spacing: -1px;
+  margin-left: 8px;
+}
+.userInfo .name {
+  font-weight: 600;
+  color: var(--text_black);
+}
+.userInfo .email {
+  color: var(--grayWritingColor);
+  font-size: 12px;
+  /* transform: scale(0.8); */
+}
+
+.postText {
+  line-height: 1.2rem;
+  font-weight: 500;
+}
+.preview {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.preview .imgContainer,
+.preview .videoContainer {
+  width: 100%;
+  height: 200px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  flex-basis: auto;
+}
+
+.preview .imgContainer img,
+.preview .videoContainer video {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+  border-radius: 6px;
+}
+
+.modalview {
+  background-color: transparent;
+}
+
+.modalContent {
+  background-color: transparent;
+  backdrop-filter: blur(5px);
+  width: auto !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* height: auto !important; */
+}
+
+.modalBody {
+  width: 100% !important;
+}
+.modalBody img,
+.modalBody video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.reactsNum {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 5px 0px;
+  border-bottom: 1px solid var(--text_gray);
+}
+
+.reactsNum .likes,
+.reactsNum .comments {
+  font-weight: 500;
+  font-size: 12px;
+  letter-spacing: -0.5px;
+  margin: 0;
+}
+
+.reacts {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+
+.reacts .like,
+.reacts .comment,
+.reacts .share {
+  border-radius: 6px;
+  padding: 2px 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 7px;
+  background-color: var(--text_white);
+  width: 30%;
+  cursor: pointer;
+}
+
+.like .likeIcon {
+  color: var(--light-blue);
+}
+
+.like.likedPost {
+  background-color: var(--light-blue);
+}
+
+.like.likedPost .likeIcon {
+  color: var(--text_white);
+}
diff --git a/wannameal/src/components/savedMeals/SavedMeals.jsx b/wannameal/src/components/savedMeals/SavedMeals.jsx
new file mode 100644
index 0000000..ec9ee3c
--- /dev/null
+++ b/wannameal/src/components/savedMeals/SavedMeals.jsx
@@ -0,0 +1,83 @@
+import React, { useEffect } from "react";
+import style from "./savedMeals.module.css";
+import MealCard from "../mealCard/mealCard";
+import { MdSmsFailed } from "react-icons/md";
+
+import noMeals from "../../assets/nosavedmeals.gif";
+import { useDispatch, useSelector } from "react-redux";
+import {
+  fetchSavedMeals,
+  getMealsError,
+  getMealsStatus,
+  getSavedMeals,
+} from "../../redux/slices/recomendedMealsSlice";
+import { getDecodedToken } from "../../redux/slices/authSlice";
+import Loading from "../loading/loading";
+import { getLanguage } from "../../redux/slices/language";
+export default function SavedMeals() {
+  const savedMeals = useSelector(getSavedMeals);
+  const decodedToken = useSelector(getDecodedToken);
+  const mealsError = useSelector(getMealsError);
+  const mealsStatus = useSelector(getMealsStatus);
+  const savedmeal = useSelector(getSavedMeals);
+  console.log("🚀 ~ SavedMeals ~ savedmeal:", savedmeal);
+  const dispatch = useDispatch();
+  const language = useSelector(getLanguage);
+
+  useEffect(() => {
+    if (decodedToken?.id) {
+      const fetchMeals = async () => {
+        await dispatch(fetchSavedMeals({ userId: decodedToken?._id }));
+      };
+      fetchMeals();
+    }
+  }, []);
+
+  if (mealsStatus === "loading")
+    return (
+      <div className="w-100 d-flex flex-column justify-content-center align-items-center">
+        <Loading />
+      </div>
+    );
+
+  if (mealsError)
+    return (
+      <div className="w-100 text-center fs-2 mt-5">
+        <p className="mt-5">
+          {mealsError}
+          <MdSmsFailed size={25} className="text-danger ms-2 " />
+        </p>
+      </div>
+    );
+
+  return (
+    <div className="d-flex flex-column align-items-center justify-content-center">
+      <div className="container-lg">
+        <div
+          className={`row p-0 my-3 d-flex align-items-center  ${style.recipsContainer}`}
+        >
+          {savedMeals && savedMeals.length > 0 ? (
+            savedMeals.map((meal) => (
+              <div key={meal._id} className="col-sm-12 col-md-5 col-lg p-0">
+                <MealCard meal={meal} />
+              </div>
+            ))
+          ) : (
+            <div className={style.noMealscontainer}>
+              <div className={style.imageContainer}>
+                <img src={noMeals} alt="" srcset="" />
+              </div>
+              <h3 className={style.mainTitle}>
+                There are no recipes saved yet.
+              </h3>
+              <p className={style.secondaryTitle}>
+                Save the recipes you like to try later and you will find them
+                saved here.{" "}
+              </p>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/wannameal/src/components/savedMeals/savedMeals.module.css b/wannameal/src/components/savedMeals/savedMeals.module.css
new file mode 100644
index 0000000..98d4c06
--- /dev/null
+++ b/wannameal/src/components/savedMeals/savedMeals.module.css
@@ -0,0 +1,27 @@
+.recipsContainer {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(370px, 1fr));
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.noMealscontainer {
+  margin: 20px 0;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  align-items: center;
+  justify-content: space-around;
+}
+
+.noMealscontainer .imageContainer {
+  width: 150px;
+}
+.noMealscontainer .imageContainer img {
+  width: 100%;
+}
+.noMealscontainer .mainTitle,
+.noMealscontainer .secondaryTitle {
+  max-width: 500px;
+}
diff --git a/wannameal/src/components/sidebar/page.module.css b/wannameal/src/components/sidebar/page.module.css
index 1a9dedb..bfaf17e 100644
--- a/wannameal/src/components/sidebar/page.module.css
+++ b/wannameal/src/components/sidebar/page.module.css
@@ -4,10 +4,18 @@
   left: 0;
   min-height: 100vh;
   width: 400px;
-  background: #fff;
+  background: var(--text_white);
   box-shadow: 4px 0px 26px 0px rgba(0, 0, 0, 0.08);
   padding: 3rem 0.7rem;
 }
+@media (max-width: 950px) {
+  .main_div {
+    width: 100px !important;
+  }
+  .title_div h4 {
+    display: none;
+  }
+}
 .logo {
   font-size: 35px;
   font-weight: 400;
diff --git a/wannameal/src/components/sidebar/sidebar.jsx b/wannameal/src/components/sidebar/sidebar.jsx
index f61832a..2566066 100644
--- a/wannameal/src/components/sidebar/sidebar.jsx
+++ b/wannameal/src/components/sidebar/sidebar.jsx
@@ -30,13 +30,12 @@ function Sidebar() {
         Fast Plate
       </Link>
       <div className={style.divider}></div>
-      <div className="d-flex flex-column gap-5 my-5 align-items-start ps-3 ps-lg-5">
+      <div className="d-flex flex-column gap-5 my-5 align-items-start ps-0  ps-lg-5">
         <Link to={"/dashboard"}>
           <div
             onClick={() => setChoosen("Dashboard")}
-            className={`d-flex gap-3 align-items-center ${style.title_div}  ${
-              choosen === "Dashboard" ? style.active : ""
-            }`}
+            className={`d-flex gap-3 align-items-center ${style.title_div}  ${choosen === "Dashboard" ? style.active : ""
+              }`}
           >
             <MdDashboard size={40} />
             <h4 className="m-0">Dashboard</h4>
@@ -45,9 +44,8 @@ function Sidebar() {
         <Link to={"/dashboard/users"}>
           <div
             onClick={() => setChoosen("Users")}
-            className={`d-flex gap-3 align-items-center ${style.title_div}  ${
-              choosen === "Users" ? style.active : ""
-            }`}
+            className={`d-flex gap-3 align-items-center ${style.title_div}  ${choosen === "Users" ? style.active : ""
+              }`}
           >
             <FaUsers size={40} />
             <h4 className="m-0">Users</h4>
@@ -56,9 +54,8 @@ function Sidebar() {
         <Link to={"/dashboard/ingredients"}>
           <div
             onClick={() => setChoosen("Ingredients")}
-            className={`d-flex gap-3 align-items-center ${style.title_div}  ${
-              choosen === "Ingredients" ? style.active : ""
-            }`}
+            className={`d-flex gap-3 align-items-center ${style.title_div}  ${choosen === "Ingredients" ? style.active : ""
+              }`}
           >
             <GiShinyApple size={40} />
             <h4 className="m-0">Ingredients</h4>
@@ -67,9 +64,8 @@ function Sidebar() {
         <Link to={"/dashboard/recipes"}>
           <div
             onClick={() => setChoosen("Recipes")}
-            className={`d-flex gap-3 align-items-center ${style.title_div}  ${
-              choosen === "Recipes" ? style.active : ""
-            }`}
+            className={`d-flex gap-3 align-items-center ${style.title_div}  ${choosen === "Recipes" ? style.active : ""
+              }`}
           >
             <GiHotMeal size={40} />
             <h4 className="m-0">Recipes</h4>
@@ -77,12 +73,11 @@ function Sidebar() {
         </Link>
         <div
           onClick={() => setChoosen("Settings")}
-          className={`d-flex gap-3 align-items-center ${style.title_div}  ${
-            choosen === "Settings" ? style.active : ""
-          }`}
+          className={`d-flex gap-3 align-items-center ${style.title_div}  ${choosen === "Settings" ? style.active : ""
+            }`}
         >
           <MdOutlineSettings size={40} />
-          <Link to={"/dashboard/settings"}>
+          <Link to={"/profile/edit"}>
             <h4 className="m-0">Settings</h4>
           </Link>
         </div>
diff --git a/wannameal/src/components/usercard/userCard.jsx b/wannameal/src/components/usercard/userCard.jsx
new file mode 100644
index 0000000..5adac82
--- /dev/null
+++ b/wannameal/src/components/usercard/userCard.jsx
@@ -0,0 +1,99 @@
+import React, { useEffect, useState } from "react";
+import style from "./usercard.module.css";
+import profile from "../../assets/man-user.svg";
+import { useSelector, useDispatch } from "react-redux";
+import { useNavigate } from "react-router-dom";
+import { getDecodedToken, getuser } from "../../redux/slices/authSlice";
+import {
+  getProfileById,
+  followUser,
+  getSuggestedUsers,
+  fetchSuggestedUsers,
+} from "../../redux/slices/communityUserSlice";
+import { getLanguage } from "../../redux/slices/language";
+
+export default function UserCard({ method, user }) {
+  const [activeBtn, setActiveBtn] = useState(false);
+  const userId = user?._id;
+  // console.log("🚀 ~ UserCard ~ user:", user);
+  const status = useSelector((state) => state.communityUser.status);
+  const error = useSelector((state) => state.communityUser.error);
+  console.log("🚀 ~ UserCard ~ error:", error);
+  const availableUser = useSelector(getuser);
+  const decodedToken = useSelector(getDecodedToken);
+  const language = useSelector(getLanguage);
+  const follow = useSelector((state) => state.communityUser.follow);
+  console.log("🚀 ~ UserCard ~ follow:", follow);
+  const pr = useSelector((state) => state.communityUser.profile);
+  // console.log("🚀 ~ UserCard ~ follow:", follow);
+
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+  // const fetchSuggested = async () => {
+  //   try {
+  //     await dispatch(fetchSuggestedUsers(availableUser.token));
+  //   } catch (error) {
+  //     console.error("Failed to fetch suggested users:", error);
+  //   }
+  // };
+
+  const fetchProfile = async () => {
+    try {
+      dispatch(
+        getProfileById({
+          userId: decodedToken.id,
+          token: availableUser.token,
+        })
+      );
+    } catch (error) {
+      console.error("Failed to fetch profile:", error);
+    }
+  };
+
+  useEffect(() => {
+    fetchProfile();
+  }, [activeBtn]);
+
+  const handleClick = async () => {
+    if (method === "follow") {
+      try {
+        await dispatch(
+          followUser({ userId, token: availableUser.token, lang: language })
+        );
+        if (error == null) {
+          setActiveBtn(!activeBtn);
+        } else {
+          setActiveBtn(activeBtn);
+        }
+      } catch {
+        setActiveBtn(activeBtn);
+      }
+    } else {
+      navigate("/community/chat");
+    }
+  };
+
+  return (
+    <div className={style.cardContainer}>
+      <div className={style.image}>
+        <img src={user ? user.profileImage.url : profile} alt="profile photo" />
+      </div>
+      <div className={style.text}>
+        <div className={style.name}>{user?.userName}</div>
+        <div className={style.email}>{user?.email}</div>
+      </div>
+      <div
+        className={
+          activeBtn
+            ? `btn ${style.btn} `
+            : `btn ${style.btn} ${style.activeBtn} `
+        }
+        onClick={handleClick}
+        disabled={status === "loading"} // Disable the button when loading
+      >
+        {activeBtn ? "following" : method}
+      </div>
+      {/* {error && <p className={style.error}>Error: {error}</p>} */}
+    </div>
+  );
+}
diff --git a/wannameal/src/components/usercard/usercard.module.css b/wannameal/src/components/usercard/usercard.module.css
new file mode 100644
index 0000000..5a2af0d
--- /dev/null
+++ b/wannameal/src/components/usercard/usercard.module.css
@@ -0,0 +1,46 @@
+.cardContainer {
+  width: 100%;
+  display: flex;
+  gap: 10px;
+
+  align-items: center;
+}
+.cardContainer .image {
+  border-radius: 50%;
+  width: 45px;
+}
+.cardContainer .image img {
+  border-radius: 50%;
+  width: 100%;
+}
+.cardContainer .text {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  letter-spacing: -1px;
+}
+.cardContainer .text .name {
+  font-weight: 600;
+  color: var(--text_black);
+}
+.cardContainer .text .email {
+  color: var(--grayWritingColor);
+  font-size: 14px;
+  transform: scale(0.8) translate(-5px, -8px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 120px;
+}
+.cardContainer .btn {
+  background-color: var(--text_gray);
+  color: #fff;
+  padding: 2px 17px;
+  border-radius: 20px;
+  margin-left: auto;
+}
+
+.activeBtn {
+  background-color: var(--blue) !important;
+}
diff --git a/wannameal/src/i18n.js b/wannameal/src/i18n.js
new file mode 100644
index 0000000..8455243
--- /dev/null
+++ b/wannameal/src/i18n.js
@@ -0,0 +1,11 @@
+import i18n from "i18next";
+import LanguageDetector from "i18next-browser-languagedetector";
+import { initReactI18next } from "react-i18next";
+import Backend from "i18next-http-backend";
+
+i18n.use(LanguageDetector).use(initReactI18next).use(Backend).init({
+  debug: true,
+  fallbackLng: "en",
+  lng: "en",
+  returnObjects: true,
+});
diff --git a/wannameal/src/index.css b/wannameal/src/index.css
index b5fb91b..8df2b08 100644
--- a/wannameal/src/index.css
+++ b/wannameal/src/index.css
@@ -1,4 +1,6 @@
 @import "bootstrap/dist/css/bootstrap.min.css";
+@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
+
 * {
   box-sizing: border-box;
   padding: 0;
@@ -10,13 +12,30 @@
   --green: #049601;
   --light-green: #3ac568;
   --opacity_green: #e6fee3;
-  --text_black: #3b3b3b;
+  --text_black: #0d0d0d;
   --text_white: #fff;
+  --text_gray: #00000080;
   --blue: #1976d2;
+  --light-blue: #699bf7;
   --grayWritingColor: #4c4c4cba;
   --mainFontFamily: "Poppins";
   --light_burble: #f2ecff;
 }
+
+.dark {
+  --body: #201e27;
+  --green: #049601;
+  --light-green: #4ecb77;
+  --opacity_green: #e6fee3;
+  --text_black: #fff;
+  --text_white: #0d0d0d;
+  --text_gray: #00000080;
+  --blue: #1976d2;
+  --light-blue: #699bf7;
+  --grayWritingColor: #b5b4b4ba;
+  --mainFontFamily: "Poppins";
+  --light_burble: #f2ecff;
+}
 a {
   color: inherit;
   text-decoration: none;
@@ -24,7 +43,29 @@ a {
 
 body {
   position: relative;
+  background-color: var(--text_white);
+  color: var(--text_black);
 }
 .row {
   max-width: 98vw;
 }
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+  -webkit-box-shadow: 0 0 0 30px var(--body) inset !important;
+  -webkit-text-fill-color: var(--text_black) !important;
+}
+
+::-webkit-scrollbar {
+  width: 5px;
+}
+::-webkit-scrollbar-track {
+  width: 60%;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--grayWritingColor);
+  border-radius: 4px;
+}
diff --git a/wannameal/src/index.js b/wannameal/src/index.js
index b8547f2..011bf85 100644
--- a/wannameal/src/index.js
+++ b/wannameal/src/index.js
@@ -1,15 +1,16 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
+import React from "react";
+import ReactDOM from "react-dom/client";
 import "bootstrap/dist/css/bootstrap.min.css";
 import "bootstrap/dist/js/bootstrap.bundle";
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
-import { BrowserRouter } from 'react-router-dom';
-import { Provider } from 'react-redux';
-import store from './redux/store';
+import "./index.css";
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
+import { BrowserRouter } from "react-router-dom";
+import { Provider } from "react-redux";
+import store from "./redux/store";
+import './i18n.js';
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <React.StrictMode>
     <BrowserRouter>
diff --git a/wannameal/src/pages/Auth/Account/Account.jsx b/wannameal/src/pages/Auth/Account/Account.jsx
index 466e55e..6018da4 100644
--- a/wannameal/src/pages/Auth/Account/Account.jsx
+++ b/wannameal/src/pages/Auth/Account/Account.jsx
@@ -9,6 +9,7 @@ import { useDispatch } from 'react-redux';
 import { loginUser } from '../../../redux/slices/authSlice';
 import { registerUser } from '../../../redux/slices/registerSlice';
 import Swal from 'sweetalert2';
+import { useTranslation } from 'react-i18next';
 export default function Account() {
     const [logappear, setlogappear] = useState(true)
     const navigate = useNavigate()
@@ -149,11 +150,34 @@ export default function Account() {
                 }
             });
     };
+    const { t } = useTranslation();
+    const {
+        Login,
+        email,
+        Password,
+        Remember,
+        Forgot,
+        Google,
+        have,
+        haves,
+        Sign,
+        With,
+        Create,
+        What,
+        Manage,
+        Share,
+        Organize,
+        Know,
+        Name,
+        characters,
+        number,
+        letters,
+    } = t('auth');
     return (
         <div>
             {/* start login component  */}
             <form method="get" className={`${style.form} ${logappear ? style.login_animation : ''}`} onSubmit={submitLogin}>
-                <p className={style.head}>Login</p>
+                <p className={style.head}>{Login}</p>
                 <div className="d-flex flex-column gap-4 my-3">
                     <div className={style.inputForm}>
                         <MdOutlineMailOutline size={20} />
@@ -163,7 +187,7 @@ export default function Account() {
                             value={user.email}
                             onChange={handleLoginChange}
                             className={style.input}
-                            placeholder="Enter your Email" />
+                            placeholder={`${email}`} />
                     </div>
                     <div className={style.inputForm}>
                         <MdPassword size={20} />
@@ -173,26 +197,28 @@ export default function Account() {
                             value={user.password}
                             onChange={handleLoginChange}
                             className={style.input}
-                            placeholder="Enter your Password"
+                            placeholder={`${Password}`}
                         />
                     </div>
                 </div>
                 <div className='d-flex justify-content-between'>
                     <div className="d-flex align-items-center gap-1">
                         <input type="checkbox" className={style.check} />
-                        <label className={style.typo}>Remember me </label>
+                        <label className={style.typo}>{Remember} </label>
                     </div>
-                    <Link className={style.typo} to={'/auth/forgotPassword'}><span >Forgot password?</span></Link>
+                    <Link className={style.typo} to={'/auth/forgotPassword'}><span >{Forgot}</span></Link>
                 </div>
-                <button className={style.button_submit}>Log In</button>
-                <p className={style.p}>Or With</p>
+                <button className={style.button_submit}>{Login}</button>
+                <p className={style.p}>{With}</p>
                 <div className={style.flex_row}>
-                    <button className={style.btn}>
-                        <FcGoogle size={35} />
-                        Google
-                    </button>
+                    <Link to={'https://fast-plat1.vercel.app/auth/google'} className={style.btn}>
+                        <div className={style.btn}>
+                            <FcGoogle size={35} />
+                            {Google}
+                        </div>
+                    </Link>
                     <p className={style.p}>
-                        Don't have an account? <span onClick={() => setlogappear(!logappear)} className={style.span}>Sign Up</span>
+                        {have} <span onClick={() => setlogappear(!logappear)} className={style.span}>{Sign}</span>
                     </p>
                 </div>
             </form>
@@ -208,7 +234,7 @@ export default function Account() {
                                 className={style.input}
                                 id="userName"
                                 name="userName"
-                                placeholder="Name"
+                                placeholder={`${Name}`}
                                 value={userData.userName}
                                 onChange={handleRegisterChange}
                             />
@@ -221,8 +247,7 @@ export default function Account() {
                                 value={userData.email}
                                 onChange={handleRegisterChange}
                                 className={style.input}
-                                placeholder="Enter your Email"
-                            />
+                                placeholder={`${email}`} />
                         </div>
                         <div className={style.inputForm}>
                             <MdPassword size={20} />
@@ -232,8 +257,7 @@ export default function Account() {
                                 value={userData.password}
                                 onChange={handleRegisterChange}
                                 className={style.input}
-                                placeholder="Enter your Password"
-                            />
+                                placeholder={`${Password}`} />
                         </div>
                         <div className={style.inputForm}>
                             <MdPassword size={20} />
@@ -243,57 +267,55 @@ export default function Account() {
                                 value={userData.confirmPassword}
                                 onChange={handleRegisterChange}
                                 className={style.input}
-                                placeholder="confirm your Password"
-                            />
+                                placeholder={`${Password}`} />
                         </div>
                     </div>
                     <div className="d-flex flex-column justify-content-between">
                         <div className={`d-flex gap-2 align-items-center ${miniNumber ? style.green : style.red}`}>
                             <IoCheckmarkCircle size={20} />
-                            <p className="m-0">At least 8 characters</p>
+                            <p className="m-0">{characters}</p>
                         </div>
                         <div className={`d-flex gap-2 align-items-center ${hasNumber ? style.green : style.red}`}>
                             <IoCheckmarkCircle size={20} />
-                            <p className="m-0">At least 1 number</p>
+                            <p className="m-0">{number}</p>
                         </div>
                         <div className={`d-flex gap-2 align-items-center ${lowerUpper ? style.green : style.red}`}>
                             <IoCheckmarkCircle size={20} />
-                            <p className="m-0">Bath upper and lower case letters</p>
+                            <p className="m-0">{letters}</p>
                         </div>
                     </div>
-                    <button type="submit" className={style.button_submit}>sign In</button>
-                    <p className={style.p}>Or With</p>
+                    <button type="submit" className={style.button_submit}>{Sign}</button>
+                    <p className={style.p}>{With}</p>
                     <div className={style.flex_row}>
-                        <Link href={'https://fast-plat1.vercel.app/auth/login/success'} className={style.btn}>
+                        <Link to={'https://fast-plat1.vercel.app/auth/google'} className={style.btn}>
                             <FcGoogle size={35} />
-                            Google
+                            {Google}
                         </Link>
                         <p className={style.p}>
-                            have an account? <span onClick={() => setlogappear(!logappear)} className={style.span}>log in</span>
+                            {haves}<span onClick={() => setlogappear(!logappear)} className={style.span}>{Login}</span>
                         </p>
                     </div>
                 </form>
                 <div className={`${style.register_content} ${!logappear ? style.full_opacity : ''}`}>
-                    <h1>Create Account</h1>
-                    <h3 className="mb-5">What you will get? </h3>
+                    <h1>{Create}</h1>
+                    <h3 className="mb-5">{What}</h3>
                     <div className="d-flex flex-column gap-5">
                         <div className="d-flex gap-2">
                             <MdStar color='#FFC107' size={25} />
-                            <p className="m-0">Manage your recipes the easy way</p>
+                            <p className="m-0">{Manage}</p>
                         </div>
                         <div className="d-flex gap-2">
                             <MdStar color='#FFC107' size={25} />
-                            <p className="m-0">Share recipes with your friends and discover new ones.</p>
+                            <p className="m-0">{Share}</p>
                         </div>
                         <div className="d-flex gap-2">
                             <MdStar color='#FFC107' size={25} />
-                            <p className="m-0">Organize recipes by tag, share it with your friends</p>
+                            <p className="m-0">{Organize}</p>
                         </div>
                         <div className="d-flex gap-2 ">
                             <MdStar color='#FFC107' size={25} />
                             <p className="m-0">
-                                Know the parts of the meal and what it consists of and the
-                                components that each molecule contains.
+                                {Know}
                             </p>
                         </div>
                     </div>
diff --git a/wannameal/src/pages/Auth/Auth.jsx b/wannameal/src/pages/Auth/Auth.jsx
index 61bc304..7c10d63 100644
--- a/wannameal/src/pages/Auth/Auth.jsx
+++ b/wannameal/src/pages/Auth/Auth.jsx
@@ -1,30 +1,31 @@
-import React, { useMemo } from 'react'
-import { Link, Route, Routes, useLocation } from 'react-router-dom'
-import style from './auth.module.css';
-import Account from './Account/Account';
-import Forgot from './Forgot/Forgot';
-import Verification from './Verification/Verification';
-import Reset from './Reset/Reset';
+import React, { useMemo } from "react";
+import { Link, Route, Routes, useLocation } from "react-router-dom";
+import style from "./auth.module.css";
+import Account from "./Account/Account";
+import Forgot from "./Forgot/Forgot";
+import Verification from "./Verification/Verification";
+import Reset from "./Reset/Reset";
+import plate_1 from '../../assets/plate_1.png';
+import plate_2 from '../../assets/plate_2.png';
+import plate_3 from '../../assets/plate_3.png';
 export default function Auth() {
-
-    return (
-        <div className={style.thebody}>
-            <Link to='/' className={style.logo}>Wanna Meal</Link>
-            <div className={style.plate_1}>
-                <img src="../../assets/plate_1.png" alt="plate" />
-            </div>
-            <div className={style.plate_2}>
-                <img src='../../assets/plate_2.png' alt="plate" />
-            </div>
-            <div className={style.plate_3}>
-                <img src='../../assets/plate_3.png' alt="plate" />
-            </div>
-            <Routes>
-                <Route path='/' element={< Account />} />
-                <Route path='/forgotPassword' element={<Forgot />} />
-                <Route path='/verification' element={<Verification />} />
-                <Route path='/reset' element={<Reset />} />
-            </Routes>
-        </div>
-    )
+  return (
+    <div className={style.thebody}>
+      <div className={style.plate_1}>
+        <img src={plate_3} alt="plate" />
+      </div>
+      <div className={style.plate_2}>
+        <img src={plate_2} alt="plate" />
+      </div>
+      <div className={style.plate_3}>
+        <img src={plate_1} alt="plate" />
+      </div>
+      <Routes>
+        <Route path="/" element={<Account />} />
+        <Route path="/forgotPassword" element={<Forgot />} />
+        <Route path="/verification" element={<Verification />} />
+        <Route path="/reset" element={<Reset />} />
+      </Routes>
+    </div>
+  );
 }
diff --git a/wannameal/src/pages/Auth/Forgot/Forgot.jsx b/wannameal/src/pages/Auth/Forgot/Forgot.jsx
index d3adf62..c586784 100644
--- a/wannameal/src/pages/Auth/Forgot/Forgot.jsx
+++ b/wannameal/src/pages/Auth/Forgot/Forgot.jsx
@@ -1,66 +1,78 @@
-import axios from 'axios';
-import React, { useState } from 'react'
-import { MdOutlineMailOutline } from 'react-icons/md';
-import { useNavigate } from 'react-router-dom';
-import Swal from 'sweetalert2';
+import axios from "axios";
+import React, { useState } from "react";
+import { MdOutlineMailOutline } from "react-icons/md";
+import { useNavigate } from "react-router-dom";
+import Swal from "sweetalert2";
 import style from "./page.module.css";
+import { useTranslation } from "react-i18next";
 
 export default function Forgot() {
-    const [email, setemail] = useState('')
-    const navigate = useNavigate()
-    const handleEmail = (e) => {
-        setemail(e.target.value);
-        console.log(email);
-    };
-    const confirmEmali = (e) => {
-        e.preventDefault();
-        axios.patch('https://fast-plat1.vercel.app/auth/forgetCode', { email })
-            .then((respo) => {
-                console.log(respo.data);
-                if (respo.data.success) {
-                    const Toast = Swal.mixin({
-                        toast: true,
-                        position: "top-end",
-                        showConfirmButton: false,
-                        timer: 3000,
-                        timerProgressBar: true,
-                        didOpen: (toast) => {
-                            toast.onmouseenter = Swal.stopTimer;
-                            toast.onmouseleave = Swal.resumeTimer;
-                        }
-                    });
-                    Toast.fire({
-                        icon: "success",
-                        title: "please check your email - forward to code page"
-                    }).then(() => {
-                        navigate('/auth/verification')
-                    });
-                }
-                localStorage.setItem('userToken', respo.data.token)
-                console.log(respo.data.token);
-            }).catch((err) => {
-                console.log(err.response.data);
-            })
-    }
-    return (
-        <div className={style.contain}>
-            <div className="d-flex align-items-center gap-2 flex-column justify-content-center w-75 text-center">
-                <h1>Forgot Password</h1>
-                <p className='text-black-50'>Enter the email address with your account and we’ll send an email with confirmation to reset your password</p>
-            </div>
-            <form onSubmit={confirmEmali} className={style.form}>
-                <div className={style.inputForm}>
-                    <MdOutlineMailOutline size={25} />
-                    <input
-                        name='email'
-                        onChange={handleEmail}
-                        value={email.email}
-                        type="text"
-                        className={style.input}
-                        placeholder="Enter your Email" />
-                </div>
-                <button className={style.button_submit}>send code</button>
-            </form>
+  const [email, setemail] = useState("");
+  const navigate = useNavigate();
+  const handleEmail = (e) => {
+    setemail(e.target.value);
+    console.log(email);
+  };
+  const confirmEmali = (e) => {
+    e.preventDefault();
+    axios
+      .patch("https://fast-plat1.vercel.app/auth/forgetCode?lang=en", { email })
+      .then((respo) => {
+        console.log(respo.data);
+        if (respo.data.success) {
+          const Toast = Swal.mixin({
+            toast: true,
+            position: "top-end",
+            showConfirmButton: false,
+            timer: 3000,
+            timerProgressBar: true,
+            didOpen: (toast) => {
+              toast.onmouseenter = Swal.stopTimer;
+              toast.onmouseleave = Swal.resumeTimer;
+            },
+          });
+          Toast.fire({
+            icon: "success",
+            title: "please check your email - forward to code page",
+          }).then(() => {
+            navigate("/auth/verification");
+          });
+        }
+        localStorage.setItem("userToken", respo.data.token);
+        console.log(respo.data.token);
+      })
+      .catch((err) => {
+        console.log(err.response.data);
+      });
+  };
+  const { t } = useTranslation();
+  const {
+    Forgot,
+    Forgotp,
+    Send,
+  } = t('auth');
+  return (
+    <div className={style.contain}>
+      <div className="d-flex align-items-center gap-2 flex-column justify-content-center w-75 text-center">
+        <h1>{Forgot}</h1>
+        <p className="text-50">
+         {Forgotp}
+        </p>
+      </div>
+      <form onSubmit={confirmEmali} className={style.form}>
+        <div className={style.inputForm}>
+          <MdOutlineMailOutline size={25} />
+          <input
+            name="email"
+            onChange={handleEmail}
+            value={email.email}
+            type="text"
+            className={style.input}
+            placeholder="Enter your Email"
+          />
         </div>
-    )
+        <button className={style.button_submit}>{Send}</button>
+      </form>
+    </div>
+  );
 }
diff --git a/wannameal/src/pages/Auth/Forgot/page.module.css b/wannameal/src/pages/Auth/Forgot/page.module.css
index faac0e8..0fd5c59 100644
--- a/wannameal/src/pages/Auth/Forgot/page.module.css
+++ b/wannameal/src/pages/Auth/Forgot/page.module.css
@@ -13,6 +13,8 @@
   box-shadow: 0px 0px 25px 10px rgba(0, 0, 0, 0.25);
   padding: 3rem 5rem;
   width: 730px;
+  color: var(--text_black);
+  background-color: var(--text_white);
 }
 .form {
   display: flex;
@@ -44,15 +46,20 @@
   border: none;
   height: 100%;
   background-color: var(--body);
+  color: var(--text_black);
   width: 100%;
 }
 
+.contain p {
+  color: var(--grayWritingColor);
+}
+
 .input:focus {
   outline: none;
 }
 .button_submit {
   margin: 25px 0 20px 0;
-  background-color: var(--blue);
+  background-color: var(--green);
   border: none;
   color: white;
   font-size: 1.5rem;
diff --git a/wannameal/src/pages/Auth/Reset/Reset.jsx b/wannameal/src/pages/Auth/Reset/Reset.jsx
index 34e4f19..3d76ff4 100644
--- a/wannameal/src/pages/Auth/Reset/Reset.jsx
+++ b/wannameal/src/pages/Auth/Reset/Reset.jsx
@@ -5,6 +5,7 @@ import { MdPassword } from 'react-icons/md';
 import { useNavigate } from 'react-router-dom';
 import Swal from 'sweetalert2';
 import style from './page.module.css';
+import { useTranslation } from 'react-i18next';
 
 export default function Reset() {
     const [user, setUser] = useState({
@@ -41,7 +42,7 @@ export default function Reset() {
     };
     const submit = (e) => {
         e.preventDefault();
-        axios.patch('https://fast-plat1.vercel.app/auth/resetPassword', user, config)
+        axios.patch('https://fast-plat1.vercel.app/auth/resetPassword?lang=en', user, config)
             .then((respo) => {
                 console.log(respo.data);
                 if (respo.data.success) {
@@ -67,10 +68,20 @@ export default function Reset() {
                 console.log(err.response.data);
             })
     }
+    const { t } = useTranslation();
+    const {
+        CreatePas,
+        shuold,
+        Reset,
+        Password,
+        characters,
+        number,
+        letters,
+    } = t('auth');
     return (
         <form onSubmit={submit} method="get" className={`${style.form} `}>
-            <p className={style.head}>Create New password</p>
-            <h5 className='text-center text-black-50'>The password shuold be different from the previous password</h5>
+            <p className={style.head}>{CreatePas}</p>
+            <h5 className='text-center text-black-50'>{shuold}</h5>
             <div className="d-flex flex-column gap-4 my-3 w-100">
                 <div className={style.inputForm}>
                     <MdPassword size={25} />
@@ -80,7 +91,7 @@ export default function Reset() {
                         value={user.password}
                         onChange={handleChange}
                         className={style.input}
-                        placeholder="Enter your Password"
+                        placeholder={`${Password}`}
                     />
                 </div>
                 <div className={style.inputForm}>
@@ -91,25 +102,25 @@ export default function Reset() {
                         value={user.confirmPassword}
                         onChange={handleChange}
                         className={style.input}
-                        placeholder="confirm your Password"
+                        placeholder={`${Password}`}
                     />
                 </div>
             </div>
             <div className="d-flex flex-column w-100 justify-content-between">
                 <div className={`d-flex gap-2 align-items-center ${miniNumber ? style.green : style.red}`}>
                     <IoCheckmarkCircle size={20} />
-                    <p className="m-0">At least 8 characters</p>
+                    <p className="m-0">{characters}</p>
                 </div>
                 <div className={`d-flex gap-2 align-items-center ${hasNumber ? style.green : style.red}`}>
                     <IoCheckmarkCircle size={20} />
-                    <p className="m-0">At least 1 number</p>
+                    <p className="m-0">{number}</p>
                 </div>
                 <div className={`d-flex gap-2 align-items-center ${lowerUpper ? style.green : style.red}`}>
                     <IoCheckmarkCircle size={20} />
-                    <p className="m-0">Bath upper and lower case letters</p>
+                    <p className="m-0">{letters}</p>
                 </div>
             </div>
-            <button className={style.button_submit}>Reset Password</button>
+            <button className={style.button_submit}>{Reset}</button>
         </form>
     )
 }
diff --git a/wannameal/src/pages/Auth/Reset/page.module.css b/wannameal/src/pages/Auth/Reset/page.module.css
index 01a7421..628e02b 100644
--- a/wannameal/src/pages/Auth/Reset/page.module.css
+++ b/wannameal/src/pages/Auth/Reset/page.module.css
@@ -8,14 +8,14 @@
   align-items: center;
 
   gap: 10px;
-  background-color: #ffffff;
+  background-color: var(--text_white);
   padding: 3rem 4rem;
   width: 650px;
   border-radius: 10px;
   box-shadow: 0px 0px 25px 10px rgba(0, 0, 0, 0.25);
 }
 .head {
-  color: var(text_black);
+  color: var(--text_black);
   font-size: 42px;
   font-style: normal;
   font-weight: 500;
@@ -63,9 +63,9 @@
 }
 .button_submit {
   margin: 25px 0 20px 0;
-  background-color: var(--blue);
+  background-color: var(--green);
   border: none;
-  color: white;
+  color: var(--text_white);
   font-size: 1.2rem;
   font-weight: 600;
   border-radius: 20px;
diff --git a/wannameal/src/pages/Auth/Verification/Verification.jsx b/wannameal/src/pages/Auth/Verification/Verification.jsx
index 69c3ec8..dfab08c 100644
--- a/wannameal/src/pages/Auth/Verification/Verification.jsx
+++ b/wannameal/src/pages/Auth/Verification/Verification.jsx
@@ -3,6 +3,7 @@ import React, { useRef, useState } from 'react'
 import { useNavigate } from 'react-router-dom';
 import Swal from 'sweetalert2';
 import style from "./page.module.css";
+import { useTranslation } from 'react-i18next';
 
 export default function Verification() {
     const [code, setCode] = useState(['', '', '', '', '']);
@@ -31,7 +32,7 @@ export default function Verification() {
     const forgetCode = code.join('')
     const submitCode = (e) => {
         e.preventDefault();
-        axios.patch('https://fast-plat1.vercel.app/auth/VerifyCode', { forgetCode }, config)
+        axios.patch('https://fast-plat1.vercel.app/auth/VerifyCode?lang=en', { forgetCode }, config)
             .then((respo) => {
                 console.log(respo.data);
                 if (respo.data.success) {
@@ -57,12 +58,19 @@ export default function Verification() {
                 console.log(err.response.data);
             })
     }
+    const { t } = useTranslation();
+    const {
+        check,
+        Verification,
+        Send,
+        Sended,
+    } = t('auth');
     return (
         <div >
             <form onSubmit={submitCode} className={style.contain}>
                 <div className="d-flex align-items-center gap-2 flex-column justify-content-center w-75 text-center">
-                    <h2>Please check your Email</h2>
-                    <p className='text-black-50'>We have sent code to Badr23@gmail.com</p>
+                    <h2>{check}</h2>
+                    <p className='text-black-50'>{Sended}</p>
                 </div>
                 <div className={style['code-input']}>
                     {code.map((digit, index) => (
@@ -77,8 +85,8 @@ export default function Verification() {
                         />
                     ))}
                 </div>
-                <p className='text-black-50 fs-3'>send code again <span className='text-black-50 fs-5'>00:45</span></p>
-                <button type='submit' className={style.button_submit}>Verification</button>
+                <p className='text-black-50 fs-3'>{Send} again <span className='text-black-50 fs-5'>00:45</span></p>
+                <button type='submit' className={style.button_submit}>{Verification}</button>
             </form>
         </div>
     )
diff --git a/wannameal/src/pages/Auth/Verification/page.module.css b/wannameal/src/pages/Auth/Verification/page.module.css
index a73fa52..1cf0c07 100644
--- a/wannameal/src/pages/Auth/Verification/page.module.css
+++ b/wannameal/src/pages/Auth/Verification/page.module.css
@@ -47,14 +47,18 @@
   align-items: center;
   gap: 1rem;
   border-radius: 10px;
-  background: #fff;
+  background: var(--text_white);
   box-shadow: 0px 0px 25px 10px rgba(0, 0, 0, 0.25);
   padding: 3rem 5rem;
   width: 730px;
 }
 
+.contain h2 {
+  color: var(--text_black);
+}
+
 .button_submit {
-  background-color: var(--blue);
+  background-color: var(--green);
   border: none;
   color: white;
   font-size: 1.5rem;
diff --git a/wannameal/src/pages/Auth/auth.module.css b/wannameal/src/pages/Auth/auth.module.css
index d48f4cb..ff20e4c 100644
--- a/wannameal/src/pages/Auth/auth.module.css
+++ b/wannameal/src/pages/Auth/auth.module.css
@@ -1,6 +1,7 @@
 .thebody {
-  background-color: var(--body);
-  height: 100vh;
+  background-image: linear-gradient(to top, var(--body) 90%, var(--text_white));
+  color: var(--text_Black);
+  height: 93vh;
   width: 100vw;
   position: relative;
 }
@@ -61,6 +62,8 @@
   border-radius: 10px;
   box-shadow: 0px 0px 25px 10px rgba(0, 0, 0, 0.25);
   opacity: 0;
+  color: var(--text_black);
+  background-color: var(--text_white);
 }
 
 .login_animation {
@@ -88,6 +91,8 @@
   padding-right: 5px;
   transition: 0.2s ease-in-out;
   background-color: var(--body);
+  color: var(--text_black);
+  background-color: var(--body);
 }
 .typo {
   color: rgba(76, 76, 76, 0.73) !important;
@@ -110,6 +115,7 @@
   border: none;
   width: 85%;
   height: 100%;
+  color: var(--text_black);
   background-color: var(--body);
 }
 
@@ -150,7 +156,7 @@
 
 .p {
   text-align: center;
-  color: black;
+  color: var(--text_Black);
   font-size: 14px;
   margin: 5px 0;
 }
@@ -172,6 +178,7 @@
   cursor: pointer;
   transition: 0.2s ease-in-out;
   text-decoration: none;
+  background-color: var(--body);
 }
 /* sign up style */
 .form_register {
@@ -188,6 +195,8 @@
   border-radius: 10px;
   box-shadow: 0px 0px 25px 10px rgba(0, 0, 0, 0.25);
   opacity: 0;
+  color: var(--text_black);
+  background-color: var(--text_white);
 }
 .signup_animation {
   animation: sign 1s forwards;
diff --git a/wannameal/src/pages/Home/Home.jsx b/wannameal/src/pages/Home/Home.jsx
index a7d1360..62dfe0e 100644
--- a/wannameal/src/pages/Home/Home.jsx
+++ b/wannameal/src/pages/Home/Home.jsx
@@ -1,19 +1,18 @@
-import FoodIngreientSlider from "../../components/FoodIngreientSlider/FoodIngreientSlider";
+import AboutUs from "../../components/aboutUs/aboutus";
+import CommonMeals from "../../components/commonMeals/commonMeals";
 import LandingPage from "../../components/landingPage/LandingPage";
-import MealsSlider from "../../components/mealsSlider/mealsSlider";
-import styles from "./page.module.css";
+import { Helmet } from "react-helmet";
 
 export default function Home() {
-    return (
-        <>
-            <LandingPage />
-            <div className="container-lg" style={{ maxHeight: "100vh" }}>
-                <h1 className={`w-100 mx-auto my-5 text-center  ${styles.mainTitle}`}>
-                    Make Your <span>Own Meal</span>
-                </h1>
-            </div>
-            <FoodIngreientSlider />
-            <MealsSlider />
-        </>
-    );
+  return (
+    <>
+      <Helmet>
+        <title>WannaMeal</title>
+        <meta name="description" content="WannaMeal" />
+      </Helmet>
+      <LandingPage />
+      <AboutUs />
+      <CommonMeals />
+    </>
+  );
 }
diff --git a/wannameal/src/pages/Home/page.module.css b/wannameal/src/pages/Home/page.module.css
index 66546b2..eb000d7 100644
--- a/wannameal/src/pages/Home/page.module.css
+++ b/wannameal/src/pages/Home/page.module.css
@@ -1,6 +1,11 @@
 .mainTitle {
   font-weight: 600;
+  z-index: 100;
 }
 .mainTitle span {
   color: var(--green);
 }
+
+.darkmodeChanges {
+  background-color: var(--text_gray);
+}
diff --git a/wannameal/src/pages/RecipeDetails/RecipeDetails.jsx b/wannameal/src/pages/RecipeDetails/RecipeDetails.jsx
index 414b935..99db405 100644
--- a/wannameal/src/pages/RecipeDetails/RecipeDetails.jsx
+++ b/wannameal/src/pages/RecipeDetails/RecipeDetails.jsx
@@ -1,96 +1,151 @@
-import React from 'react'
-import style from './page.module.css';
-import Food_Icon from '../../assets/fluent_food-24-filled.svg';
-import dish from '../../assets/dish.png';
+import React from "react";
+import style from "./page.module.css";
+import Food_Icon from "../../assets/fluent_food-24-filled.svg";
 import { IoTime } from "react-icons/io5";
-import { BsFire } from "react-icons/bs";
-import { GiCookingPot } from "react-icons/gi";
-import MealCard from '../../components/mealCard/mealCard';
+import { BsDiagram3, BsFire } from "react-icons/bs";
+import { useLocation } from "react-router-dom";
+
+import MealCard from "../../components/mealCard/mealCard";
+import CommonMeals from "../../components/commonMeals/commonMeals";
+import { useTranslation } from "react-i18next";
+import { Helmet } from "react-helmet";
 const RecipeDetails = () => {
-    let x = [1, 23, 45, 68, 564, 6, 456, 44]
-    return (
-        <div className='p-md-5 mx-md-5 my-4'>
-            <div className="row justify-content-between p-3">
-                <div className="col-12 col-lg-5 d-flex flex-column gap-5 px-4 mb-5 mb-lg-0">
-                    <h3 className={style.head_title}>The modus operandi of meat with potato and onion pieces</h3>
-                    <div className={`d-flex  gap-5 align-items-center mt-3 ${style.customize} flex-wrap`}>
-                        <div className="d-flex gap-2 ">
-                            <img className={style.Food_Icon} src={Food_Icon} alt='icon' />
-                            <div className="d-flex flex-column">
-                                <p className='m-0 opacity-50'>apply for</p>
-                                <span className='fw-bold fs-5 text-center'><big>2</big> people</span>
-                            </div>
-                        </div>
-                        <button className='border-0 rounded-3 px-2 ' style={{ background: 'var(--green)', color: 'var(--text_white)', height: '3rem' }}>customize</button>
-                    </div>
-                    <svg className='ms-lg-4' xmlns="http://www.w3.org/2000/svg" width="350" height="2" viewBox="0 0 557 2" fill="none">
-                        <path d="M1.5 1.00006L555.5 1.00001" stroke="#049601" stroke-width="2" stroke-linecap="round" stroke-dasharray="4 4" />
-                    </svg>
-                    <div className="d-flex gap-3 flex-wrap">
-                        <div className={`d-flex gap-2 align-items-center ${style.borderDash}`}>
-                            <IoTime className={style.icon_details} />
-                            <span className={style.icon_value}> <big className='fw-bold'>60</big> minutes</span>
-                        </div>
-                        <div className={`d-flex gap-2 align-items-center ${style.borderDash}`}>
-                            <BsFire className={style.icon_details} />
-                            <span className={style.icon_value}> <big className='fw-bold'>60</big> minutes</span>
-                        </div>
-                        <div className={`d-flex gap-2 align-items-center `}>
-                            <GiCookingPot className={style.icon_details} />
-                            <span className={style.icon_value}> <big className='fw-bold'>6</big> components</span>
-                        </div>
-                    </div>
-                </div>
-                <div className="col-12 col-lg-6">
-                    <img style={{ width: '100%' }} src={dish} alt='dish' />
-                </div>
+  const location = useLocation();
+  const { meal } = location.state || {};
+
+  console.log("🚀 ~ RecipeDetails ~ meal:", meal);
+  const stepsArray = meal?.steps ? meal.steps.split(",") : [];
+  const ingredientsArray = meal?.steps ? meal.ingredients.split(",") : [];
+  console.log(stepsArray);
+  let x = [1, 2, 35, 459, 88, 113, 87, 2];
+  const { t } = useTranslation();
+  const {
+    apply,
+    minutes,
+    components,
+    people,
+    Ingredients,
+    Directions,
+    Latest,
+  } = t("View");
+  return (
+    <div className="p-md-5 mx-md-5 my-4">
+      <Helmet>
+        <title>Recipe Detailes</title>
+        <meta name="description" content="Recipe Detailes of the meal" />
+      </Helmet>
+      <div className="row justify-content-between p-3">
+        <div className="col-12 col-lg-5 d-flex flex-column gap-5 px-4 mb-5 mb-lg-0">
+          <h3 className={style.head_title}>{meal.recipeName}</h3>
+          <div
+            className={`d-flex  gap-5 align-items-center mt-3 ${style.customize} flex-wrap`}
+          >
+            <div className="d-flex gap-2 ">
+              <img className={style.Food_Icon} src={Food_Icon} alt="icon" />
+              <div className="d-flex flex-column">
+                <p className="m-0 opacity-50">{apply}</p>
+                <span className="fw-bold fs-5 text-center">
+                  <big>{meal.EnoughFor}</big> {people}
+                </span>
+              </div>
             </div>
-            <h2 className={style.divider_title}>ingredients</h2>
-            <div className="row p-3">
-                <div className="col-12 col-md-8 d-flex flex-column gap-5">
-                    <div className={`d-flex justify-content-between ${style.ingredients}`}>
-                        <p>meat</p>
-                        <p className='opacity-50'>1/2 K</p>
-                    </div>
-                    <div className={`d-flex justify-content-between ${style.ingredients}`}>
-                        <p>meat</p>
-                        <p className='opacity-50'>1/2 K</p>
-                    </div>
-                    <div className={`d-flex justify-content-between ${style.ingredients}`}>
-                        <p>meat</p>
-                        <p className='opacity-50'>1/2 K</p>
-                    </div>
-                </div>
+            {/* <button
+              className="border-0 rounded-3 px-2 "
+              style={{
+                background: "var(--green)",
+                color: "var(--text_white)",
+                height: "3rem",
+              }}
+            >
+              customize
+            </button> */}
+          </div>
+          <svg
+            className="ms-lg-4"
+            xmlns="http://www.w3.org/2000/svg"
+            width="350"
+            height="2"
+            viewBox="0 0 557 2"
+            fill="none"
+          >
+            <path
+              d="M1.5 1.00006L555.5 1.00001"
+              stroke="#049601"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-dasharray="4 4"
+            />
+          </svg>
+          <div className="d-flex gap-3 flex-wrap">
+            <div
+              className={`d-flex gap-2 align-items-center ${style.borderDash}`}
+            >
+              <IoTime className={style.icon_details} />
+              <span className={style.icon_value}>
+                {" "}
+                <big className="fw-bold">{meal.times}</big> {minutes}
+              </span>
             </div>
-            <h2 className={style.divider_title}>Directions</h2>
-            <div className="row p-3">
-                <div className="col-12 col-md-8 d-flex flex-column gap-4">
-                    <div className={`d-flex justify-content-between align-items-center ${style.directionDiv}`}>
-                        <span>1</span>
-                        <p className='m-0'>قطع اللحم الي مكعبات متوسطه الحجم </p>
-                    </div>
-                    <div className={`d-flex justify-content-between align-items-center ${style.directionDiv}`}>
-                        <span>2</span>
-                        <p className='m-0'>ضع قطع اللحم في وعاء به ماء علي نار متوسطه وضع فيه البهارات (ملح - توابل لحم - فلفل اسود -ورق لوري )</p>
-                    </div>
-                    <div className={`d-flex justify-content-between align-items-center ${style.directionDiv}`}>
-                        <span>3</span>
-                        <p className='m-0'>عندما تنتهي البطاطس من الغليان اخرجها من الوعاء وقم بتقشيرها وقطعها اللي مكعبات متوسطه وقم برش بعض الملح والفلفل الاسود عليها </p>
-                    </div>
-                </div>
+            <div
+              className={`d-flex gap-2 align-items-center ${style.borderDash}`}
+            >
+              <BsFire className={style.icon_details} />
+              <span className={style.icon_value}>
+                {" "}
+                <big className="fw-bold">{meal.times}</big> {minutes}
+              </span>
             </div>
-            <h2 className={style.divider_title}>Latest Recipes</h2>
-            <div className="row">
-                {x.map((x) => {
-                    return (
-                        <div className="col d-flex justify-content-center">
-                            <MealCard />
-                        </div>
-                    )
-                })}
+            <div className={`d-flex gap-2 align-items-center `}>
+              <BsDiagram3 className={style.icon_details} />
+              <span className={style.icon_value}>
+                {" "}
+                <big className="fw-bold">{meal.calories}</big> {components}
+              </span>
             </div>
+          </div>
+        </div>
+        <div className="col-12 col-lg-6">
+          <img style={{ width: "100%" }} src={meal.image.url} alt="dish" />
+        </div>
+      </div>
+      <h2 className={style.divider_title}>{Ingredients}</h2>
+      <div className="row p-3">
+        <div className="col-12 col-md-8 d-flex flex-column gap-5">
+          {ingredientsArray?.map((x, ind) => {
+            return (
+              <div
+                key={ind}
+                className={`d-flex justify-content-between align-items-center ${style.directionDiv}`}
+              >
+                <span>{ind + 1}</span>
+                <p className="m-0">{x}</p>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+      <h2 className={style.divider_title}>{Directions}</h2>
+      <div className="row p-3">
+        <div className="col-12 col-md-8 d-flex flex-column gap-4">
+          {stepsArray?.map((x, ind) => {
+            return (
+              <div
+                key={ind}
+                className={`d-flex justify-content-between align-items-center ${style.directionDiv}`}
+              >
+                <span>{ind + 1}</span>
+                <p className="m-0">{x}</p>
+              </div>
+            );
+          })}
         </div>
-    )
-}
+      </div>
+      <h2 className={style.divider_title}>{Latest}</h2>
+      <div className="row">
+        <CommonMeals />
+      </div>
+    </div>
+  );
+};
 
-export default RecipeDetails
\ No newline at end of file
+export default RecipeDetails;
diff --git a/wannameal/src/pages/addProduct/addProduct.jsx b/wannameal/src/pages/addProduct/addProduct.jsx
index b2ec396..53f30ce 100644
--- a/wannameal/src/pages/addProduct/addProduct.jsx
+++ b/wannameal/src/pages/addProduct/addProduct.jsx
@@ -1,359 +1,417 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from "react";
 import style from "./page.module.css";
 import { BiSolidTrash } from "react-icons/bi";
 import { IoMdAddCircleOutline } from "react-icons/io";
 import { MdCheckCircleOutline } from "react-icons/md";
 import { CiCamera } from "react-icons/ci";
 import axios from "axios";
+import { useTranslation } from "react-i18next";
+import { useSelector } from "react-redux";
+import { getuser } from "../../redux/slices/authSlice";
+import { Helmet } from "react-helmet";
 
-const AddProduct = () => { // Changed from addProduct to AddProduct
-    const [ingredientsValue, setIngredientsValue] = useState([{ id: 1, value: "" }]);
-    const [directionsValue, setDirectionsValue] = useState([{ id: 1, value: "" }]);
-    const [isActive, setisActive] = useState("");
-    const [image, setImage] = useState(null);
-    const [recipe, setRecipe] = useState({
-        recipeName: "",
-        information: "",
-        typeMeals: "",
-        times: "",
-        EnoughFor: "",
-        calories: 500,
-        image: null,
-        ingredients: [],
-        steps: [],
-    });
-
-    const handleInputChange = (e) => {
-        const { name, value } = e.target;
-        setRecipe((prevRecipe) => ({
-            ...prevRecipe,
-            [name]: value,
-        }));
-        console.log(recipe);
-    };
+const AddProduct = () => {
+  // Changed from addProduct to AddProduct
+  const [ingredientsValue, setIngredientsValue] = useState([
+    { id: 1, value: "" },
+  ]);
+  const [directionsValue, setDirectionsValue] = useState([
+    { id: 1, value: "" },
+  ]);
+  const [isActive, setisActive] = useState("");
+  const [image, setImage] = useState(null);
+  const [randomNumber, setRandomNumber] = useState(null);
+  const { t } = useTranslation();
+  const {
+    Rname,
+    Special,
+    share,
+    breaks,
+    lunch,
+    dinner,
+    enough,
+    time,
+    Ingredients,
+    Directions,
+    addingredient,
+    addStep,
+    saveRecipe,
+    cancelRecipe,
+    caloriess,
+  } = t("add");
+  useEffect(() => {
+    const randomNum = Math.floor(Math.random() * 100) + 1; // Generate random number between 1 and 100
+    setRandomNumber(randomNum);
+  }, [])
 
-    const handleFileChange = (e) => {
-        const file = e.target.files[0];
-        setRecipe((prevRecipe) => ({
-            ...prevRecipe,
-            image: file,
-        }));
-        setImage(URL.createObjectURL(file));
-    };
+  const user = useSelector(getuser);
+  const [recipe, setRecipe] = useState({
+    recipeName: "",
+    information: "",
+    typeMeals: "",
+    times: "",
+    EnoughFor: "",
+    calories: null,
+    _id: 24,
+    image: null,
+    ingredients: [],
+    steps: [],
+  });
 
-    const handleAddIngredient = () => {
-        const newIngredient = { id: ingredientsValue.length + 1, value: "" };
-        setIngredientsValue([...ingredientsValue, newIngredient]);
-        setRecipe((prevRecipe) => ({
-            ...prevRecipe,
-            ingredients: [...ingredientsValue, newIngredient],
-        }));
-    };
+  const handleInputChange = (e) => {
+    const { name, value } = e.target;
+    setRecipe((prevRecipe) => ({
+      ...prevRecipe,
+      [name]: value,
+    }));
+    console.log(recipe);
+  };
 
-    const handleAddDirection = () => {
-        const newDirection = { id: directionsValue.length + 1, value: "" };
-        setDirectionsValue([...directionsValue, newDirection]);
-        setRecipe((prevRecipe) => ({
-            ...prevRecipe,
-            steps: [...directionsValue, newDirection],
-        }));
-    };
+  const handleFileChange = (e) => {
+    const file = e.target.files[0];
+    setRecipe((prevRecipe) => ({
+      ...prevRecipe,
+      image: file,
+    }));
+    setImage(URL.createObjectURL(file));
+  };
 
-    const handleIngredientChange = (index, value) => {
-        const updatedIngredients = [...ingredientsValue];
-        updatedIngredients[index].value = value;
-        setIngredientsValue(updatedIngredients);
-        setRecipe((prevRecipe) => ({
-            ...prevRecipe,
-            ingredients: updatedIngredients,
-        }));
-    };
+  const handleAddIngredient = () => {
+    const newIngredient = { id: ingredientsValue.length + 1, value: "" };
+    setIngredientsValue([...ingredientsValue, newIngredient]);
+    setRecipe((prevRecipe) => ({
+      ...prevRecipe,
+      ingredients: [...ingredientsValue, newIngredient],
+    }));
+  };
 
-    const handleDirectionChange = (index, value) => {
-        const updatedDirections = [...directionsValue];
-        updatedDirections[index].value = value;
-        setDirectionsValue(updatedDirections);
-        setRecipe((prevRecipe) => ({
-            ...prevRecipe,
-            steps: updatedDirections,
-        }));
-    };
+  const handleAddDirection = () => {
+    const newDirection = { id: directionsValue.length + 1, value: "" };
+    setDirectionsValue([...directionsValue, newDirection]);
+    setRecipe((prevRecipe) => ({
+      ...prevRecipe,
+      steps: [...directionsValue, newDirection],
+    }));
+  };
 
-    const handleRemoveIngredient = (index) => {
-        const updatedIngredients = [...ingredientsValue];
-        updatedIngredients.splice(index, 1);
-        setIngredientsValue(updatedIngredients);
-        setRecipe((prevRecipe) => ({
-            ...prevRecipe,
-            ingredients: updatedIngredients,
-        }));
-    };
+  const handleIngredientChange = (index, value) => {
+    const updatedIngredients = [...ingredientsValue];
+    updatedIngredients[index].value = value;
+    setIngredientsValue(updatedIngredients);
+    setRecipe((prevRecipe) => ({
+      ...prevRecipe,
+      ingredients: updatedIngredients,
+    }));
+  };
 
-    const handleRemoveDirection = (index) => {
-        const updatedDirections = [...directionsValue];
-        updatedDirections.splice(index, 1);
-        setDirectionsValue(updatedDirections);
-        setRecipe((prevRecipe) => ({
-            ...prevRecipe,
-            steps: updatedDirections,
-        }));
-    };
+  const handleDirectionChange = (index, value) => {
+    const updatedDirections = [...directionsValue];
+    updatedDirections[index].value = value;
+    setDirectionsValue(updatedDirections);
+    setRecipe((prevRecipe) => ({
+      ...prevRecipe,
+      steps: updatedDirections,
+    }));
+    console.log(recipe);
+  };
 
-    const clearInputs = () => {
-        setRecipe({
-            recipeName: "",
-            information: "",
-            typeMeals: "",
-            times: "",
-            EnoughFor: "",
-            calories: 500,
-            image: null,
-            ingredients: [],
-            steps: [],
-        });
-        setImage(null);
-        setIngredientsValue([{ id: 1, value: "" }]);
-        setDirectionsValue([{ id: 1, value: "" }]);
-        setisActive('')
-    };
+  const handleRemoveIngredient = (index) => {
+    const updatedIngredients = [...ingredientsValue];
+    updatedIngredients.splice(index, 1);
+    setIngredientsValue(updatedIngredients);
+    setRecipe((prevRecipe) => ({
+      ...prevRecipe,
+      ingredients: updatedIngredients,
+    }));
+  };
 
+  const handleRemoveDirection = (index) => {
+    const updatedDirections = [...directionsValue];
+    updatedDirections.splice(index, 1);
+    setDirectionsValue(updatedDirections);
+    setRecipe((prevRecipe) => ({
+      ...prevRecipe,
+      steps: updatedDirections,
+    }));
+  };
 
-    const handleAddRecipe = async (e) => {
-        e.preventDefault();
-        // take the value only 
-        const ingredients = ingredientsValue.map((ingredient) => ingredient.value);
-        const directions = directionsValue.map((direction) => direction.value);
-        // add data to form
-        const formData = new FormData();
-        formData.append("recipeName", recipe.recipeName);
-        formData.append("information", recipe.information);
-        formData.append("typeMeals", recipe.typeMeals);
-        formData.append("times", recipe.times);
-        formData.append("EnoughFor", recipe.EnoughFor);
-        formData.append("calories", recipe.calories);
-        formData.append("image", recipe.image);
-        formData.append("ingredients", JSON.stringify(ingredients));
-        formData.append("steps", JSON.stringify(directions));
-
-        try {
-            const response = await axios.post(
-                "https://fast-plat1.vercel.app/meals/addAnewRecipe",
-                formData,
-                {
-                    headers: {
-                        "Content-Type": "multipart/form-data",
-                        token:
-                            "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjY1ZTBlZWI1NDQ0NjExZTI2NzczNmMxNSIsImVtYWlsIjoia2FzYWJ5MTQxNUBnbWFpbC5jb20iLCJpYXQiOjE3MDk2NTQ0NjV9.l9-2_aFHYFrvSn_C0KpnbYTTpImtGMHCOWV0QXjYKZo",
-                    },
-                }
-            );
+  const clearInputs = () => {
+    setRecipe({
+      recipeName: "",
+      information: "",
+      typeMeals: "",
+      times: "",
+      EnoughFor: "",
+      calories: 500,
+      image: null,
+      ingredients: [],
+      steps: [],
+    });
+    setImage(null);
+    setIngredientsValue([{ id: 1, value: "" }]);
+    setDirectionsValue([{ id: 1, value: "" }]);
+    setisActive("");
+  };
 
-            console.log(response.data);
-            // Handle success
-            clearInputs();
-        } catch (error) {
-            console.error(error.response.data);
-            // Handle error
+  const handleAddRecipe = async (e) => {
+    e.preventDefault();
+    // take the value only
+    const ingredients = ingredientsValue.map((ingredient) => ingredient.value);
+    const directions = directionsValue.map((direction) => direction.value);
+    // add data to form
+    const formData = new FormData();
+    formData.append("recipeName", recipe.recipeName);
+    formData.append("information", recipe.information);
+    formData.append("typeMeals", recipe.typeMeals);
+    formData.append("times", recipe.times);
+    formData.append("EnoughFor", recipe.EnoughFor);
+    formData.append("calories", recipe.calories);
+    formData.append("_id", recipe._id);
+    formData.append("image", recipe.image);
+    formData.append("ingredients", JSON.stringify(ingredients.join(',')));
+    formData.append("steps", JSON.stringify(directions.join(',')));
+    try {
+      const response = await axios.post(
+        "https://fast-plat1.vercel.app/meals/addAnewRecipe",
+        formData,
+        {
+          headers: {
+            "Content-Type": "multipart/form-data",
+            token: user?.token,
+          },
         }
-    };
-    return (
-        <div className="p-md-5 mx-md-5 my-4">
-            <div className="row gap-3 ps-4">
-                <div className=" col-12 col-lg-4 d-flex flex-column gap-4">
-                    <input
-                        className={style.add_input}
-                        onChange={handleInputChange}
-                        value={recipe.recipeName}
-                        name="recipeName"
-                        type="text"
-                        placeholder="Recipe Name :"
+      );
+
+      console.log(response.data);
+      // Handle success
+      clearInputs();
+    } catch (error) {
+      console.error(error.response.data);
+      // Handle error
+    }
+  };
+  return (
+    <div className="p-md-5 mx-md-5 my-4">
+      <Helmet>
+        <title>Add Meal</title>
+        <meta
+          name="description"
+          content="making meal will all specefication & details"
+        />
+      </Helmet>
+      <div className="row gap-3 ps-4">
+        <div className=" col-12 col-lg-4 d-flex flex-column gap-4">
+          <input
+            className={style.add_input}
+            onChange={handleInputChange}
+            value={recipe.recipeName}
+            name="recipeName"
+            type="text"
+            placeholder={`${Rname} :`}
+          />
+          <input
+            className={style.add_input}
+            onChange={handleInputChange}
+            value={recipe.information}
+            name="information"
+            type="text"
+            placeholder={`${Special} :`}
+          />
+          <div className="d-flex gap-4 flex-wrap">
+            <button
+              onClick={(e) => {
+                setisActive("Breakfast");
+                handleInputChange({
+                  target: { name: "typeMeals", value: "Breakfast" },
+                });
+              }}
+              className={`${style.recipe_type} ${isActive === "Breakfast" ? style.recipe_active : ""
+                }`}
+              name="Breakfast"
+            >
+              {breaks}
+            </button>
+            <button
+              onClick={(e) => {
+                setisActive("Lunch");
+                handleInputChange({
+                  target: { name: "typeMeals", value: "Lunch" },
+                });
+              }}
+              className={`${style.recipe_type} ${isActive === "Lunch" ? style.recipe_active : ""
+                }`}
+              name="Lunch"
+            >
+              {lunch}
+            </button>
+            <button
+              onClick={(e) => {
+                setisActive("Dinner");
+                handleInputChange({
+                  target: { name: "typeMeals", value: "Dinner" },
+                });
+              }}
+              className={`${style.recipe_type} ${isActive === "Dinner" ? style.recipe_active : ""
+                }`}
+              name="Dinner"
+            >
+              {dinner}
+            </button>
+          </div>
+          <div className="d-flex gap-4 flex-wrap align-items-center justify-content-between ">
+            <p className={style.text_label}>{enough}</p>
+            <input
+              className={style.add_input}
+              onChange={handleInputChange}
+              value={recipe.EnoughFor}
+              name="EnoughFor"
+              type="text"
+              placeholder="How Many People ?"
+            />
+          </div>
+          <div className="d-flex gap-4 flex-wrap align-items-center justify-content-between  ">
+            <p className={style.text_label}>{time}</p>
+            <input
+              className={style.add_input}
+              onChange={handleInputChange}
+              value={recipe.times}
+              name="times"
+              type="text"
+              placeholder="How much time?"
+            />
+          </div>
+          <div className="d-flex gap-4 flex-wrap align-items-center justify-content-between  ">
+            <p className={style.text_label}>{caloriess}</p>
+            <input
+              className={style.add_input}
+              onChange={handleInputChange}
+              value={recipe.calories}
+              name="calories"
+              type="number"
+              placeholder="Recipe calories"
+            />
+          </div>
+        </div>
+        <div className="col-12 col-lg-5">
+          <label htmlFor="file" className={style.custum_file_upload}>
+            {image ? (
+              <img
+                src={image}
+                alt="Selected"
+                className={style.display_image}
+                width={100}
+                height={100}
+              />
+            ) : (
+              <div className="d">
+                <div className={style.icon}>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="158"
+                    height="158"
+                    viewBox="0 0 158 158"
+                    fill="none"
+                  >
+                    <path
+                      d="M33.9609 101.446V120.257C39.7071 127.303 46.951 132.981 55.1661 136.877C63.3812 140.773 72.3613 142.79 81.4535 142.781C102.668 142.781 121.371 132.007 132.38 115.635V89.2688C128.612 114.011 107.246 132.969 81.4535 132.969C60.0917 132.969 41.7668 119.967 33.9609 101.446ZM123.304 51.4073V42.9587C123.289 41.0954 123.595 39.2434 124.207 37.4834C112.771 26.3341 97.425 20.1036 81.4535 20.1251C67.1609 20.1039 53.3133 25.0953 42.3212 34.2305L42.3457 34.5298L42.3506 34.6623V47.9091C47.1823 42.2655 53.18 37.7364 59.9306 34.6338C66.6812 31.5313 74.0241 29.9291 81.4535 29.9376C98.6941 29.9376 113.953 38.4057 123.304 51.4073Z"
+                      fill="#049601"
+                      fillOpacity="0.44"
                     />
-                    <input
-                        className={style.add_input}
-                        onChange={handleInputChange}
-                        value={recipe.information}
-                        name="information"
-                        type="text"
-                        placeholder="What distinguishes this recipe ?"
+                    <path
+                      d="M120.703 81.4534C120.703 91.8631 116.568 101.847 109.207 109.207C101.846 116.568 91.8629 120.703 81.4531 120.703C71.0434 120.703 61.06 116.568 53.6992 109.207C46.3384 101.847 42.2031 91.8631 42.2031 81.4534C42.2031 71.0436 46.3384 61.0602 53.6992 53.6994C61.06 46.3386 71.0434 42.2034 81.4531 42.2034C91.8629 42.2034 101.846 46.3386 109.207 53.6994C116.568 61.0602 120.703 71.0436 120.703 81.4534ZM81.4531 115.797C85.9632 115.797 90.4291 114.909 94.5959 113.183C98.7627 111.457 102.549 108.927 105.738 105.738C108.927 102.549 111.457 98.7629 113.183 94.5961C114.909 90.4294 115.797 85.9634 115.797 81.4534C115.797 76.9433 114.909 72.4774 113.183 68.3106C111.457 64.1438 108.927 60.3578 105.738 57.1687C102.549 53.9796 98.7627 51.4498 94.5959 49.7239C90.4291 47.9979 85.9632 47.1096 81.4531 47.1096C72.3446 47.1096 63.6091 50.728 57.1684 57.1687C50.7277 63.6094 47.1094 72.3448 47.1094 81.4534C47.1094 90.5619 50.7277 99.2974 57.1684 105.738C63.6091 112.179 72.3446 115.797 81.4531 115.797ZM147.638 39.4559C147.638 35.0402 144.057 31.4587 139.641 31.4587C133.263 31.4587 128.161 36.6102 128.21 42.9393V70.169C128.21 76.3165 131.772 81.8213 137.286 84.3137V126.591C137.286 129.142 139.347 131.203 141.898 131.203H143.027C145.578 131.203 147.638 129.142 147.638 126.591V39.4559ZM33.9606 31.4587C33.0758 31.4587 32.2272 31.8102 31.6015 32.4358C30.9759 33.0615 30.6244 33.9101 30.6244 34.7949V47.9927C30.6244 48.974 29.8394 49.7099 28.9072 49.7099C27.9259 49.7099 27.19 48.9249 27.19 47.9927V34.9421C27.19 33.1268 25.7672 31.5077 23.9519 31.4587C22.0384 31.4096 20.4684 32.9305 20.4684 34.7949V47.9927C20.4684 48.974 19.6834 49.7099 18.7512 49.7099C17.77 49.7099 17.0341 48.9249 17.0341 47.9927V34.9421C17.0341 33.1268 15.6112 31.5077 13.7959 31.4587C11.8825 31.4096 10.3125 32.9305 10.3125 34.7949V57.2655C10.3125 61.691 12.4565 65.6405 15.7535 68.1035C18.7022 69.7667 18.7022 77.3812 18.7022 77.3812V126.542C18.7022 129.093 20.7628 131.154 23.3141 131.154H24.4425C26.9937 131.154 29.0544 129.093 29.0544 126.542V77.3812C29.0544 77.3812 29.0544 70.066 32.003 68.1035C33.6908 66.845 35.0616 65.2099 36.0062 63.3284C36.9508 61.4469 37.4431 59.3709 37.4441 57.2655V34.7949C37.3944 33.9009 37.007 33.0591 36.3604 32.4397C35.7137 31.8204 34.856 31.4697 33.9606 31.4587Z"
+                      fill="#049601"
+                      fillOpacity="0.44"
                     />
-                    <div className="d-flex gap-4 flex-wrap">
-                        <button
-                            onClick={(e) => {
-                                setisActive("Breakfast");
-                                handleInputChange({
-                                    target: { name: "typeMeals", value: "Breakfast" },
-                                });
-                            }}
-                            className={`${style.recipe_type} ${isActive === "Breakfast" ? style.recipe_active : ""
-                                }`}
-                            name="Breakfast"
-                        >
-                            Breakfast
-                        </button>
-                        <button
-                            onClick={(e) => {
-                                setisActive("Lunch");
-                                handleInputChange({
-                                    target: { name: "typeMeals", value: "Lunch" },
-                                });
-                            }}
-                            className={`${style.recipe_type} ${isActive === "Lunch" ? style.recipe_active : ""
-                                }`}
-                            name="Lunch"
-                        >
-                            Lunch
-                        </button>
-                        <button
-                            onClick={(e) => {
-                                setisActive("Dinner");
-                                handleInputChange({
-                                    target: { name: "typeMeals", value: "Dinner" },
-                                });
-                            }}
-                            className={`${style.recipe_type} ${isActive === "Dinner" ? style.recipe_active : ""
-                                }`}
-                            name="Dinner"
-                        >
-                            Dinner
-                        </button>
-                    </div>
-                    <div className="d-flex gap-4 flex-wrap align-items-center justify-content-between ">
-                        <p className={style.text_label}>Enough For</p>
-                        <input
-                            className={style.add_input}
-                            onChange={handleInputChange}
-                            value={recipe.EnoughFor}
-                            name="EnoughFor"
-                            type="text"
-                            placeholder="How Many People ?"
-                        />
-                    </div>
-                    <div className="d-flex gap-4 flex-wrap align-items-center justify-content-between  ">
-                        <p className={style.text_label}>Preparation time</p>
-                        <input
-                            className={style.add_input}
-                            onChange={handleInputChange}
-                            value={recipe.times}
-                            name="times"
-                            type="text"
-                            placeholder="How much time?"
-                        />
-                    </div>
-                </div>
-                <div className="col-12 col-lg-5">
-                    <label htmlFor="file" className={style.custum_file_upload}>
-                        {image ? (
-                            <img
-                                src={image}
-                                alt="Selected"
-                                className={style.display_image}
-                                width={100}
-                                height={100}
-                            />
-                        ) : (
-                            <div className="d">
-                                <div className={style.icon}>
-                                    <svg
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        width="158"
-                                        height="158"
-                                        viewBox="0 0 158 158"
-                                        fill="none"
-                                    >
-                                        <path
-                                            d="M33.9609 101.446V120.257C39.7071 127.303 46.951 132.981 55.1661 136.877C63.3812 140.773 72.3613 142.79 81.4535 142.781C102.668 142.781 121.371 132.007 132.38 115.635V89.2688C128.612 114.011 107.246 132.969 81.4535 132.969C60.0917 132.969 41.7668 119.967 33.9609 101.446ZM123.304 51.4073V42.9587C123.289 41.0954 123.595 39.2434 124.207 37.4834C112.771 26.3341 97.425 20.1036 81.4535 20.1251C67.1609 20.1039 53.3133 25.0953 42.3212 34.2305L42.3457 34.5298L42.3506 34.6623V47.9091C47.1823 42.2655 53.18 37.7364 59.9306 34.6338C66.6812 31.5313 74.0241 29.9291 81.4535 29.9376C98.6941 29.9376 113.953 38.4057 123.304 51.4073Z"
-                                            fill="#049601"
-                                            fillOpacity="0.44"
-                                        />
-                                        <path
-                                            d="M120.703 81.4534C120.703 91.8631 116.568 101.847 109.207 109.207C101.846 116.568 91.8629 120.703 81.4531 120.703C71.0434 120.703 61.06 116.568 53.6992 109.207C46.3384 101.847 42.2031 91.8631 42.2031 81.4534C42.2031 71.0436 46.3384 61.0602 53.6992 53.6994C61.06 46.3386 71.0434 42.2034 81.4531 42.2034C91.8629 42.2034 101.846 46.3386 109.207 53.6994C116.568 61.0602 120.703 71.0436 120.703 81.4534ZM81.4531 115.797C85.9632 115.797 90.4291 114.909 94.5959 113.183C98.7627 111.457 102.549 108.927 105.738 105.738C108.927 102.549 111.457 98.7629 113.183 94.5961C114.909 90.4294 115.797 85.9634 115.797 81.4534C115.797 76.9433 114.909 72.4774 113.183 68.3106C111.457 64.1438 108.927 60.3578 105.738 57.1687C102.549 53.9796 98.7627 51.4498 94.5959 49.7239C90.4291 47.9979 85.9632 47.1096 81.4531 47.1096C72.3446 47.1096 63.6091 50.728 57.1684 57.1687C50.7277 63.6094 47.1094 72.3448 47.1094 81.4534C47.1094 90.5619 50.7277 99.2974 57.1684 105.738C63.6091 112.179 72.3446 115.797 81.4531 115.797ZM147.638 39.4559C147.638 35.0402 144.057 31.4587 139.641 31.4587C133.263 31.4587 128.161 36.6102 128.21 42.9393V70.169C128.21 76.3165 131.772 81.8213 137.286 84.3137V126.591C137.286 129.142 139.347 131.203 141.898 131.203H143.027C145.578 131.203 147.638 129.142 147.638 126.591V39.4559ZM33.9606 31.4587C33.0758 31.4587 32.2272 31.8102 31.6015 32.4358C30.9759 33.0615 30.6244 33.9101 30.6244 34.7949V47.9927C30.6244 48.974 29.8394 49.7099 28.9072 49.7099C27.9259 49.7099 27.19 48.9249 27.19 47.9927V34.9421C27.19 33.1268 25.7672 31.5077 23.9519 31.4587C22.0384 31.4096 20.4684 32.9305 20.4684 34.7949V47.9927C20.4684 48.974 19.6834 49.7099 18.7512 49.7099C17.77 49.7099 17.0341 48.9249 17.0341 47.9927V34.9421C17.0341 33.1268 15.6112 31.5077 13.7959 31.4587C11.8825 31.4096 10.3125 32.9305 10.3125 34.7949V57.2655C10.3125 61.691 12.4565 65.6405 15.7535 68.1035C18.7022 69.7667 18.7022 77.3812 18.7022 77.3812V126.542C18.7022 129.093 20.7628 131.154 23.3141 131.154H24.4425C26.9937 131.154 29.0544 129.093 29.0544 126.542V77.3812C29.0544 77.3812 29.0544 70.066 32.003 68.1035C33.6908 66.845 35.0616 65.2099 36.0062 63.3284C36.9508 61.4469 37.4431 59.3709 37.4441 57.2655V34.7949C37.3944 33.9009 37.007 33.0591 36.3604 32.4397C35.7137 31.8204 34.856 31.4697 33.9606 31.4587Z"
-                                            fill="#049601"
-                                            fillOpacity="0.44"
-                                        />
-                                    </svg>
-                                </div>
-                                <div className={style.text}>
-                                    <CiCamera size={36} />
-                                    <span>Share with us the picture of your dish</span>
-                                </div>
-                            </div>
-                        )}
-                        <input onChange={handleFileChange} name="image" id="file" type="file" accept="image/*" />
-                    </label>
+                  </svg>
                 </div>
-            </div>
-            <h2 className={style.divider_title}>Ingredients</h2>
-            <div className="row ps-4">
-                <div className="col-8 d-flex flex-column gap-4">
-                    {ingredientsValue.map((ingredient, index) => (
-                        <div key={index} className="d-flex gap-3 align-items-center">
-                            <div className={style.count_circle}>{index + 1}</div>
-                            <input
-                                className={style.add_input}
-                                style={{ width: "900px" }}
-                                type="text"
-                                placeholder={`Ingredient ${index + 1}`}
-                                value={ingredient.value}
-                                onChange={(e) =>
-                                    handleIngredientChange(index, e.target.value)
-                                }
-                            />
-                            <BiSolidTrash
-                                color="red"
-                                className={style.icon}
-                                onClick={() => handleRemoveIngredient(index)}
-                            />
-                        </div>
-                    ))}
-                    <button onClick={handleAddIngredient} className={style.add_btn}>
-                        <IoMdAddCircleOutline />
-                        Add Ingredient
-                    </button>
-
-                </div>
-            </div>
-            <h2 className={style.divider_title}>Directions</h2>
-            <div className="row ps-4">
-                <div className="col-8 d-flex flex-column gap-4">
-                    {directionsValue.map((direction, index) => (
-                        <div key={index} className="d-flex gap-3 align-items-center">
-                            <div className={style.count_circle}>{index + 1}</div>
-                            <input
-                                className={style.add_input}
-                                style={{ width: "900px" }}
-                                type="text"
-                                placeholder={`direction ${index + 1}`}
-                                value={direction.value}
-                                onChange={(e) =>
-                                    handleDirectionChange(index, e.target.value)
-                                }
-                            />
-                            <BiSolidTrash
-                                color="red"
-                                className={style.icon}
-                                onClick={() => handleRemoveDirection(index)}
-                            />
-                        </div>
-                    ))}
-                    <button onClick={handleAddDirection} className={style.add_btn}>
-                        <IoMdAddCircleOutline />
-                        Add Step
-                    </button>
-
+                <div className={style.text}>
+                  <CiCamera size={36} />
+                  <span>{share}</span>
                 </div>
+              </div>
+            )}
+            <input
+              onChange={handleFileChange}
+              name="image"
+              id="file"
+              type="file"
+              accept="image/*"
+            />
+          </label>
+        </div>
+      </div>
+      <h2 className={style.divider_title}>{Ingredients}</h2>
+      <div className="row ps-4">
+        <div className="col-8 d-flex flex-column gap-4">
+          {ingredientsValue.map((ingredient, index) => (
+            <div key={index} className="d-flex gap-3 align-items-center">
+              <div className={style.count_circle}>{index + 1}</div>
+              <input
+                className={style.add_input}
+                style={{ width: "900px" }}
+                type="text"
+                placeholder={`Ingredient ${index + 1}`}
+                value={ingredient.value}
+                onChange={(e) => handleIngredientChange(index, e.target.value)}
+              />
+              <BiSolidTrash
+                color="red"
+                className={style.icon}
+                onClick={() => handleRemoveIngredient(index)}
+              />
             </div>
-            <div className={`col-12 col-lg-7 d-flex gap-4 mt-5 justify-content-center ${style.confirm_recipe}`}>
-                <button onClick={handleAddRecipe} className={style.confirm_btn}>
-                    <MdCheckCircleOutline />
-                    Save Recipe
-                </button>
-                <button onClick={clearInputs} className={style.confirm_btn} style={{ background: "red" }}>
-                    <BiSolidTrash />
-                    Cancel Recipe
-                </button>
+          ))}
+          <button onClick={handleAddIngredient} className={style.add_btn}>
+            <IoMdAddCircleOutline />
+            {addingredient}
+          </button>
+        </div>
+      </div>
+      <h2 className={style.divider_title}>{Directions}</h2>
+      <div className="row ps-4">
+        <div className="col-8 d-flex flex-column gap-4">
+          {directionsValue.map((direction, index) => (
+            <div key={index} className="d-flex gap-3 align-items-center">
+              <div className={style.count_circle}>{index + 1}</div>
+              <input
+                className={style.add_input}
+                style={{ width: "900px" }}
+                type="text"
+                placeholder={`direction ${index + 1}`}
+                value={direction.value}
+                onChange={(e) => handleDirectionChange(index, e.target.value)}
+              />
+              <BiSolidTrash
+                color="red"
+                className={style.icon}
+                onClick={() => handleRemoveDirection(index)}
+              />
             </div>
+          ))}
+          <button onClick={handleAddDirection} className={style.add_btn}>
+            <IoMdAddCircleOutline />
+            {addStep}
+          </button>
         </div>
-    );
+      </div>
+      <div
+        className={`col-12 col-lg-7 d-flex gap-4 mt-5 justify-content-center ${style.confirm_recipe}`}
+      >
+        <button onClick={handleAddRecipe} className={style.confirm_btn}>
+          <MdCheckCircleOutline />
+          {saveRecipe}
+        </button>
+        <button
+          onClick={clearInputs}
+          className={style.confirm_btn}
+          style={{ background: "red" }}
+        >
+          <BiSolidTrash />
+          {cancelRecipe}
+        </button>
+      </div>
+    </div>
+  );
 };
 
 export default AddProduct; // Changed from addProduct to AddProduct
diff --git a/wannameal/src/pages/addProduct/page.module.css b/wannameal/src/pages/addProduct/page.module.css
index ccb7f6e..24b8f35 100644
--- a/wannameal/src/pages/addProduct/page.module.css
+++ b/wannameal/src/pages/addProduct/page.module.css
@@ -92,7 +92,7 @@
   border: none;
   border-radius: 10px;
   padding: 0.9rem;
-  color: var(--text_black);
+  color: #000;
 }
 
 .add_input:focus {
diff --git a/wannameal/src/pages/chatting/chatting.jsx b/wannameal/src/pages/chatting/chatting.jsx
new file mode 100644
index 0000000..e91b5aa
--- /dev/null
+++ b/wannameal/src/pages/chatting/chatting.jsx
@@ -0,0 +1,190 @@
+import React, { useEffect, useRef, useState } from "react";
+import style from "./chatting.module.css";
+import defaultImageProfile from "../../assets/man-user.svg";
+import noChat from "../../assets/noChat.gif";
+import { IoIosSearch } from "react-icons/io";
+import { VscSend } from "react-icons/vsc";
+import InputEmoji from "react-input-emoji";
+import { useSelector, useDispatch } from "react-redux";
+import { getTheme } from "../../redux/slices/systemModeSlice";
+import { Helmet } from "react-helmet";
+
+export default function Chatting() {
+  let chats = [1, 2, 3, 4, 5, 6, 7, 8, 8, 8, 8, 8];
+  const [activeChat, setActiveChat] = useState(true);
+  const [message, setMessage] = useState("");
+  const chatBodyRef = useRef(null);
+
+  const theme = useSelector(getTheme);
+  const handleOnEnter = (message) => {
+    if (message !== "") {
+      console.log("Message:", message);
+    }
+    // Add your logic to send the message
+  };
+  const handCloseChat = (event) => {
+    if (event.key === "Escape") {
+      console.log("Escape key pressed");
+      setActiveChat(false);
+    }
+  };
+  const handleOpenChat = () => {
+    setActiveChat(true);
+  };
+
+  useEffect(() => {
+    if (chatBodyRef.current) {
+      chatBodyRef.current.scrollTop = chatBodyRef.current.scrollHeight;
+    }
+  }, [activeChat, message]);
+
+  useEffect(() => {
+    window.addEventListener("keydown", handCloseChat);
+    return () => {
+      window.removeEventListener("keydown", handCloseChat);
+    };
+  }, []);
+  return (
+    <div className={`  ${style.chattingContainer}`}>
+      <Helmet>
+        <title>WannaMeal messenger</title>
+        <meta
+          name="description"
+          content="chatting and contact with other users"
+        />
+      </Helmet>
+      <div className="container-lg pt-2">
+        <div className={`row p-0 w-100 d-flex gap-2 ${style.Chatting}`}>
+          <div className={`${style.aside} col-2 col-lg-4`}>
+            <div className={style.header}>chats</div>
+            <form
+              className={`d-flex col-12 mx-0  ${style.serchForm}`}
+              role="search"
+            >
+              <input
+                className="form-control me-2"
+                type="search"
+                placeholder="Search"
+                aria-label="Search"
+              />
+              <div className={`${style.searchIcon}`}>
+                {" "}
+                <IoIosSearch size={20} />
+              </div>
+            </form>
+            <div className={style.chatsUl}>
+              {chats
+                ? chats.map((ele) => {
+                    return (
+                      <div
+                        className={style.singleChat}
+                        onClick={handleOpenChat}
+                      >
+                        <div className={style.image}>
+                          <img src={defaultImageProfile} alt="profile photo" />
+                        </div>
+                        <div className={`${style.text} d-none d-lg-block`}>
+                          <div className={style.name}>
+                            Mahmoud khairy hassan
+                          </div>
+                          <div className={style.lastMessage}>
+                            welcom bro , how are you jjjjjjjjjjjkjkjkjkj kjkhnk
+                            jhjg ghhjn jgjj{" "}
+                          </div>
+                        </div>
+                        <div className={`${style.chatStatus} `}>
+                          <div
+                            className={`${style.lastMessageTime} d-none d-lg-block`}
+                          >
+                            2:21 Am
+                          </div>
+                          <div className={style.lastMessageNum}>1</div>
+                        </div>
+                      </div>
+                    );
+                  })
+                : "no chats yet..!"}
+            </div>
+          </div>
+          <div className={`${style.chatContent} p-0 col`}>
+            <div className={style.chatHeader}>
+              <div className={style.image}>
+                <img src={defaultImageProfile} alt="profile photo" />
+              </div>
+              <div className={style.text}>
+                <div className={style.name}>Mahmoud Khairy</div>
+                <div className={style.email}>mahmoudkhairy402@gmail.com</div>
+              </div>
+            </div>
+            {activeChat ? (
+              <div className={style.chatBody} ref={chatBodyRef}>
+                <div className={style.send}>welcome bro how are you </div>
+                <div className={style.send}>welcome bro how are you </div>
+                <div className={style.send}>welcome bro how are you </div>
+                <div className={style.send}>welcome bro how are you </div>
+                <div className={style.send}>welcome bro how are you </div>
+                <div className={style.send}>welcome bro how are you </div>
+                <div className={style.send}>welcome bro how are you </div>
+                <div className={style.send}>welcome bro how are you </div>
+                <div className={style.send}>رد يلا </div>
+                <div className={style.send}>رد ي جبان</div>
+                <div className={style.send}>welcome bro how are you </div>
+
+                <div className={style.received}>
+                  <div className={style.text}>
+                    i`m fine bro , how are your mother
+                  </div>
+                  {/* <div className={`${style.profileImage} col-1 me-1`}>
+                <img src={defaultImageProfile} alt="Profile" />
+              </div>{" "} */}
+                </div>
+
+                <div className={style.received}>
+                  <div className={style.text}>
+                    i`m fine bro , how are your mother
+                  </div>
+                  {/* <div className={`${style.profileImage} col-1 me-1`}>
+                <img src={defaultImageProfile} alt="Profile" />
+              </div>{" "} */}
+                </div>
+              </div>
+            ) : (
+              <div
+                className={`${style.chatBody} d-flex justify-content-center align-items-center flex-column g-1`}
+              >
+                <div className={style.noChatImage}>
+                  <img src={noChat} alt="" srcset="" />
+                </div>
+                <div className={style.noChatTitle}>send messages</div>
+                <div className={style.desc}>
+                  send messages to your friends write now
+                </div>
+              </div>
+            )}
+            <div className={`${style.sendMessage} d-flex `}>
+              <div className={`${style.textInput} col-12`}>
+                <InputEmoji
+                  className={style.messageInput}
+                  value={message}
+                  onChange={setMessage}
+                  cleanOnEnter
+                  onEnter={handleOnEnter}
+                  placeholder="Type a message"
+                  theme={`${theme}`}
+                  background={theme == "light" ? "#fff" : "#0d0d0d"}
+                  color={theme == "light" ? "#0d0d0d" : "#fff"}
+                  borderColor="transparent"
+                  keepOpened="true"
+                />
+
+                {/* <button onClick={handleOnEnter} className={style.sendIcon}>
+                  <VscSend size={25} className={style.postIcon} />
+                </button> */}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/wannameal/src/pages/chatting/chatting.module.css b/wannameal/src/pages/chatting/chatting.module.css
new file mode 100644
index 0000000..25bca66
--- /dev/null
+++ b/wannameal/src/pages/chatting/chatting.module.css
@@ -0,0 +1,320 @@
+.chattingContainer {
+  width: 100%;
+  height: calc(100vh - 66px);
+  background-color: var(--body);
+  font-family: var(--mainFontFamily);
+}
+
+.aside,
+.chatContent {
+  background-color: var(--text_white);
+  color: var(--text_black);
+  border-radius: 6px;
+  height: calc(100vh - 80px);
+}
+
+.aside {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  padding: 10px;
+}
+.aside .header {
+  width: 100%;
+  font-size: 25px;
+  font-weight: 500;
+  margin: 0;
+}
+.aside .chatsUl {
+  height: 100%;
+  overflow-y: scroll;
+}
+.singleChat {
+  width: 100%;
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  margin-bottom: 15px;
+  cursor: pointer;
+  /* padding: 10px; */
+}
+.singleChat .image {
+  width: 50px;
+}
+.singleChat .image img {
+  width: 100%;
+}
+
+.singleChat .text {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  color: var(--text_black);
+  width: 180px;
+}
+.singleChat .text .name {
+  font-weight: 500;
+  font-size: 18px;
+  letter-spacing: -1px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 150px;
+}
+.singleChat .text .lastMessage {
+  font-size: 14px;
+  letter-spacing: -1px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 180px;
+  color: var(--grayWritingColor);
+}
+
+.chatStatus {
+  margin-left: auto;
+  margin-right: 5px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  gap: 5px;
+}
+.chatStatus .lastMessageTime {
+  font-size: 14px;
+  color: var(--blue);
+}
+.chatStatus .lastMessageNum {
+  color: #fff;
+  font-size: 14px;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background-color: var(--blue);
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.serchForm {
+  position: relative;
+}
+
+.serchForm input {
+  width: 100%;
+  border-radius: 6px !important;
+  transition: 0.1s;
+  padding-left: 40px;
+  background-color: var(--body);
+  border: 0;
+  color: var(--text_black);
+  transition: 0.3s;
+}
+.serchForm input::placeholder {
+  text-transform: capitalize;
+  opacity: 0.7;
+  font-size: 14px;
+  color: var(--grayWritingColor);
+}
+.serchForm input:focus {
+  outline: none;
+  box-shadow: none;
+  border: 1px solid var(--light-blue) !important;
+  background-color: var(--text_white);
+  caret-color: var(--grayWritingColor);
+  color: var(--text_black);
+}
+
+@media (max-width: 991px) {
+  .serchForm input:focus {
+    width: 200px !important;
+    /* left: 20px; */
+  }
+}
+
+.searchIcon {
+  position: absolute;
+  top: 50%;
+  left: 10px;
+  transform: translateY(-50%);
+  font-size: 16px;
+  color: #999;
+}
+
+/* chat style */
+
+.chatHeader {
+  width: 100%;
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  padding: 8px;
+  background-color: #b3c4ef;
+  margin: 0;
+  border-radius: 6px 6px 0px 0px;
+  height: 10%;
+}
+.chatHeader .image {
+  width: 50px;
+}
+.chatHeader .image img {
+  width: 100%;
+}
+.chatHeader .text {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  letter-spacing: -0.5px;
+  color: #201e27;
+}
+.chatHeader .text .name {
+  font-weight: 600;
+}
+.chatHeader .text .email {
+  font-size: 10px;
+  /* transform: scale(0.8); */
+  /* overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 120px; */
+}
+
+.chatBody {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 10px;
+  height: 80%;
+  overflow-y: scroll;
+  scroll-behavior: smooth;
+}
+
+.send,
+.received {
+  padding: 7px;
+  color: var(--text_black);
+  max-width: 47%;
+  height: auto;
+  word-break: keep-all;
+  color: #fff;
+  font-size: 14px;
+}
+.send {
+  align-self: flex-end;
+  border-radius: 6px 6px 0px 6px;
+  background-color: var(--blue);
+}
+.received {
+  align-self: flex-start;
+  border-radius: 6px 6px 6px 0px;
+  background-color: #201e27;
+  /* position: relative; */
+  /* margin-left: 40px; */
+}
+/* .received .profileImage {
+  position: absolute;
+  width: 30px;
+  left: -30px;
+  top: 100%;
+}
+.received .profileImage img {
+  width: 100%;
+} */
+
+.chatSender {
+  height: 20%;
+}
+
+.sendMessage {
+  width: 100%;
+  margin: 0;
+  border-radius: 0px 0px 6px 6px;
+  height: 10%;
+  border: 2px solid var(--blue);
+}
+.sendMessage .textInput {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 10px;
+  gap: 10px;
+}
+.sendMessage .messageInput {
+  border: 0;
+  margin-top: 4px;
+  background-color: transparent;
+  color: var(--text_black);
+  caret-color: var(--text_black);
+  max-width: 85%;
+  word-break: break-all;
+  background-color: var(--text_white) !important;
+  color: var(--text_black) !important;
+}
+.messageInput {
+  border: none !important;
+}
+
+.sendMessage form input:focus {
+  border: 0px;
+  outline: 0;
+}
+
+.textInput .sendIcon {
+  background-color: transparent;
+  border: none;
+  background-size: cover;
+  padding: 8px;
+  border: 2px solid var(--light-blue);
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.textInput .sendIcon .postIcon {
+  color: var(--blue);
+  background: linear-gradient(to right, var(--blue), var(--text_black));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  transform: rotate(-45deg);
+  margin-left: 4px;
+}
+
+.sendMessage .profileImage {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  overflow: hidden;
+}
+.sendMessage img {
+  width: 100%;
+  object-fit: cover;
+}
+
+.chatBody::-webkit-scrollbar {
+  width: 5px;
+  display: none;
+}
+
+.chatBody .noChatImage {
+  width: 120px;
+}
+.chatBody .noChatImage img {
+  width: 100%;
+}
+
+.chatBody .noChatTitle {
+  font-size: 20px;
+  text-transform: capitalize;
+  color: var(--blue);
+}
+.chatBody .desc {
+  font-size: 16px;
+  color: var(--grayWritingColor);
+}
diff --git a/wannameal/src/pages/community/community.module.css b/wannameal/src/pages/community/community.module.css
new file mode 100644
index 0000000..70cf282
--- /dev/null
+++ b/wannameal/src/pages/community/community.module.css
@@ -0,0 +1,298 @@
+/* body {
+  background-color: var(--text_white);
+} */
+
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
+.communityContainer {
+  padding-top: 20px;
+  font-family: inter, poppins;
+}
+.Comunity {
+  display: grid;
+  grid-template-columns: 1.2fr 2.5fr 1.2fr;
+  gap: 10px;
+  height: 100vh;
+  /* overflow: hidden; */
+}
+
+/* .leftAside,
+.rightAside,
+.mainContent {
+} */
+.leftAside {
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+}
+
+.leftAside .userInfoCard,
+.leftAside .followInfoCard {
+  width: 100%;
+  height: 290px;
+  border-radius: 6px;
+  background-color: var(--body);
+}
+
+.leftAside .userInfoCard {
+  height: 290px;
+}
+.leftAside .userInfoCard .userProfile {
+  height: 60%;
+}
+.leftAside .userInfoCard .userProfile .coverPhoto {
+  border-radius: 6px 6px 0px 0px;
+  width: 100%;
+  height: 40%;
+  overflow: hidden;
+}
+.leftAside .userInfoCard .userProfile .coverPhoto img {
+  width: 100%;
+  object-fit: cover;
+}
+
+.leftAside .userInfoCard .userProfile .mainInfo {
+  display: flex;
+  flex-direction: column;
+  /* gap: 5px; */
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+}
+.leftAside .userInfoCard .userProfile .mainInfo .profileImage {
+  margin: -30px auto 0;
+  width: 70px;
+  height: 70px;
+  border-radius: 50%;
+  overflow: hidden;
+}
+.leftAside .userInfoCard .userProfile .mainInfo .profileImage img {
+  width: 100%;
+  object-fit: cover;
+}
+.leftAside .userInfoCard .userProfile .mainInfo .name {
+  margin-top: 10px;
+  text-transform: capitalize;
+  font-size: 20px;
+  font-weight: 600;
+  letter-spacing: -1.2px;
+}
+.leftAside .userInfoCard .userProfile .mainInfo .email {
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--grayWritingColor);
+}
+
+.leftAside .userInfoCard .follwInfo {
+  display: flex;
+  justify-content: space-evenly;
+  width: 100%;
+  height: 25%;
+  position: relative;
+  padding: 10px;
+  border-top: 1px solid var(--grayWritingColor);
+  border-bottom: 1px solid var(--grayWritingColor);
+}
+.leftAside .userInfoCard .follwInfo::after {
+  position: absolute;
+  content: "";
+  background-color: var(--grayWritingColor);
+  width: 1px;
+  height: 80%;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+.leftAside .userInfoCard .follwInfo div {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+}
+.leftAside .userInfoCard .follwInfo .followNum {
+  font-weight: 600;
+}
+.leftAside .userInfoCard .follwInfo .followTitle {
+  color: var(--grayWritingColor);
+  text-transform: capitalize;
+  letter-spacing: -1px;
+  font-size: 16px;
+}
+
+.profileLink {
+  color: var(--blue);
+  text-transform: capitalize;
+  width: 100%;
+  padding: 10px;
+  text-align: center;
+  font-size: 16px;
+  letter-spacing: -1.2px;
+}
+
+.leftAside .followInfoCard {
+  padding: 15px;
+}
+.leftAside .followInfoCard .title {
+  font-weight: 600;
+  margin-bottom: 10px;
+}
+.leftAside .followInfoCard .userCards {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+.showMore {
+  width: 100%;
+  text-align: left;
+  font-size: 18px;
+  letter-spacing: -1px;
+  color: var(--blue);
+  font-weight: 500;
+  margin-top: 10px;
+  cursor: pointer;
+}
+.rightAside .followInfoCard {
+  background-color: var(--body);
+  border-radius: 6px;
+  padding: 15px;
+}
+.rightAside .followInfoCard .title {
+  font-weight: 600;
+  margin-bottom: 10px;
+}
+.rightAside .followInfoCard .userCards {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+.showMore {
+  width: 100%;
+  text-align: left;
+  font-size: 18px;
+  letter-spacing: -1px;
+  color: var(--blue);
+  font-weight: 500;
+  margin-top: 10px;
+}
+.mainContent {
+  height: auto;
+  overflow: scroll;
+}
+.mainContent::-webkit-scrollbar {
+  display: none;
+}
+.mainContent .uploadPost {
+  border-radius: 6px;
+  padding: 15px;
+  background-color: var(--body);
+}
+.mainContent .uploadPost .profileImage {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  overflow: hidden;
+}
+.mainContent .uploadPost img {
+  width: 100%;
+  object-fit: cover;
+}
+
+.mainContent .uploadPost input[type="text"] {
+  padding: 10px;
+  border-radius: 6px;
+  border: none;
+  border: 1px solid transparent;
+  color: var(--text_black);
+  background-color: var(--text_white);
+}
+.mainContent .uploadPost input[type="text"]:focus {
+  outline: none;
+  border: 1px solid var(--blue);
+}
+.mainContent .uploadPost input[type="file"] + label {
+  width: 49%;
+  border: 1px solid var(--blue);
+  border-radius: 6px;
+  color: var(--grayWritingColor);
+  padding: 3px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  letter-spacing: -1.2px;
+  cursor: pointer;
+}
+
+.textInput {
+  position: relative;
+}
+
+.textInput .sendIcon {
+  background-color: transparent;
+  border: none;
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  background-size: cover;
+}
+
+.textInput .sendIcon .postIcon {
+  cursor: pointer;
+  color: var(--light-blue);
+  background-image: linear-gradient(to right, var(--blue), var(--text_black));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.preview {
+  margin-top: 20px;
+}
+.preview .imgContainer,
+.preview .videoContainer {
+  width: 100%;
+  height: 180px;
+  border-radius: 6px;
+  overflow: hidden;
+  margin-bottom: 10px;
+  /* height: 150px; */
+}
+.preview .imgContainer img,
+.preview .videoContainer video {
+  width: 100%;
+  border-radius: 6px;
+  object-fit: cover;
+  /* height: auto; */
+}
+
+/* 0 to md screens */
+@media (max-width: 992px) {
+  .Comunity {
+    grid-template-columns: 1fr;
+    height: auto;
+    gap: 20px;
+  }
+
+  .leftAside {
+    flex-direction: row;
+    justify-content: space-around;
+    gap: 10px;
+  }
+
+  .leftAside .userInfoCard,
+  .leftAside .followInfoCard {
+    width: 50%;
+    /* height: auto; */
+  }
+
+  .rightAside {
+    order: -1;
+    width: 100%;
+  }
+
+  .mainContent {
+    width: 100%;
+    order: 1;
+  }
+}
diff --git a/wannameal/src/pages/community/comunity.jsx b/wannameal/src/pages/community/comunity.jsx
new file mode 100644
index 0000000..d034d49
--- /dev/null
+++ b/wannameal/src/pages/community/comunity.jsx
@@ -0,0 +1,475 @@
+import React, { useEffect, useState } from "react";
+import style from "./community.module.css";
+import coverPhoto from "../../assets/Rectangle 2.png";
+import defaultProfile from "../../assets/man-user.svg"; // Renamed import to avoid conflict with the profile variable
+import Loading from "../../components/loading/loading";
+import { Link } from "react-router-dom";
+import UserCard from "../../components/usercard/userCard";
+import { HiPhoto } from "react-icons/hi2";
+import { IoVideocam } from "react-icons/io5";
+import Post from "../../components/post/post";
+import { VscSend } from "react-icons/vsc";
+import { useSelector, useDispatch } from "react-redux";
+import { getuser, getDecodedToken } from "../../redux/slices/authSlice";
+import { Helmet } from "react-helmet";
+
+import {
+  createPost,
+  fetchFeedPosts,
+  fetchRandomPosts,
+  getCreatedPosts,
+  getFeedPosts,
+  getPostError,
+  getPostStatus,
+  getRandomPosts,
+} from "../../redux/slices/postsSLlce";
+import {
+  getSuggestedUsers,
+  fetchSuggestedUsers,
+  getProfileById,
+  getProfile,
+  getFollowingUsers,
+  fetchFollowingUsers,
+} from "../../redux/slices/communityUserSlice";
+import Swal from "sweetalert2";
+import { useTranslation } from "react-i18next";
+import { getLanguage } from "../../redux/slices/language";
+
+export default function Community() {
+  const [text, setText] = useState("");
+  const [photos, setPhotos] = useState([]);
+  const [videos, setVideos] = useState([]);
+  const [previewPhotos, setPreviewPhotos] = useState([]);
+  const [previewVideos, setPreviewVideos] = useState([]);
+  const { t } = useTranslation();
+  const {
+    Fname,
+    email,
+    edit,
+    comment,
+    sharee,
+    like,
+    mine,
+    recommend,
+    Norecommend,
+    more,
+    follow,
+    msg,
+    share,
+    followers,
+    following,
+    photo,
+    video,
+    who,
+  } = t("community", {
+    fullname: "mahmoud khairy402",
+    email: "mahmoudkhairy402@gmail.com",
+  });
+  const [followingUsersPage, setFollowingUsersPage] = useState(1);
+  console.log("🚀 ~ Community ~ followingUsersPage:", followingUsersPage);
+  const [suggestedUsersPage, setSuggestedUsersPage] = useState(1);
+  console.log("🚀 ~ Community ~ suggestedUsersPage:", suggestedUsersPage);
+  const [postsLimit, setPostsLimit] = useState(5);
+  console.log("🚀🚀🚀🚀🚀🚀 ~ Community ~ postsLimit:", postsLimit);
+
+  // Use selectors to get state values
+  const { suggestedUsers } = useSelector(getSuggestedUsers);
+  console.log("🚀 ~ Community ~ suggestedUsers:", suggestedUsers);
+  const followingUsers = useSelector(getFollowingUsers);
+  console.log("🚀🚀🚀 ~ Community ~ followingUsers:", followingUsers);
+  const profile = useSelector(getProfile); // Ensure profile is fetched properly
+  console.log("🚀 ~ Community ~ profile:", profile);
+  const availableUser = useSelector(getuser);
+  const createdPosts = useSelector(getCreatedPosts);
+  const feedPostes = useSelector(getFeedPosts);
+  console.log("🚀 ~ Community ~ feedPostes:", feedPostes);
+  const randomposts = useSelector(getRandomPosts);
+  console.log("🚀 ~ Community ~ randomposts:", randomposts);
+  console.log("🚀 ~ Community ~ posts:", createdPosts);
+  const postError = useSelector(getPostError);
+  const postStatus = useSelector(getPostStatus);
+  console.log("🚀 ~ Community ~ postStatus:", postStatus);
+  const profileError = useSelector((state) => state.communityUser.error);
+  const profileStatus = useSelector((state) => state.communityUser.status);
+  const decodedToken = useSelector(getDecodedToken);
+  const language = useSelector(getLanguage);
+
+  const dispatch = useDispatch();
+
+  // Handle text input change
+  const handleTextChange = (e) => {
+    setText(e.target.value);
+  };
+
+  // Handle photo input change
+  const handlePhotoChange = (e) => {
+    const files = Array.from(e.target.files);
+    setPhotos(files);
+    setPreviewPhotos(files.map((file) => URL.createObjectURL(file)));
+  };
+
+  // Handle video input change
+  const handleVideoChange = (e) => {
+    const files = Array.from(e.target.files);
+    setVideos(files);
+    setPreviewVideos(files.map((file) => URL.createObjectURL(file)));
+  };
+
+  // Handle form submission
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    const formData = new FormData();
+
+    formData.append("postedBy", decodedToken.id);
+    formData.append("text", text);
+
+    photos.forEach((photo) => {
+      formData.append("img", photo);
+    });
+    videos.forEach((video) => {
+      formData.append("video", video);
+    });
+
+    await dispatch(createPost({ formData, token: availableUser?.token }));
+    if (postError) {
+      Swal.fire({
+        icon: "error",
+        title: `${postError}`,
+        toast: true,
+        position: "top-end",
+        showConfirmButton: false,
+        timer: 2000,
+        timerProgressBar: true,
+      });
+    } else {
+      Swal.fire({
+        icon: "success",
+        title: "Post created successfully",
+        toast: true,
+        position: "top-end",
+        showConfirmButton: false,
+        timer: 3000,
+        timerProgressBar: true,
+      });
+    }
+
+    setText("");
+    setPreviewPhotos([]);
+    setPreviewVideos([]);
+  };
+
+  //handle pagination on users
+  const handleShowMoreSuggestedUsers = () => {
+    setSuggestedUsersPage((prevPage) => prevPage + 1);
+  };
+
+  const handleShowMoreFollowingUsers = () => {
+    setFollowingUsersPage((prevPage) => prevPage + 1);
+  };
+
+  //handle fetching data
+
+  const fetchFollowing = async () => {
+    try {
+      await dispatch(
+        fetchFollowingUsers({
+          token: availableUser.token,
+          lang: language,
+          page: followingUsersPage,
+        })
+      );
+    } catch (error) {
+      console.error("Failed to fetch suggested users:", error);
+    }
+  };
+  const fetchSuggested = async () => {
+    try {
+      await dispatch(
+        fetchSuggestedUsers({
+          token: availableUser.token,
+          lang: language,
+          page: suggestedUsersPage,
+        })
+      );
+    } catch (error) {
+      console.error("Failed to fetch suggested users:", error);
+    }
+  };
+  const fetchAllRandomPosts = async () => {
+    try {
+      await dispatch(
+        fetchRandomPosts({
+          token: availableUser.token,
+          lang: language,
+        })
+      );
+    } catch (error) {
+      console.error("Failed to fetch random posts:", error);
+    }
+  };
+  const fetchAllFeedPosts = async () => {
+    try {
+      await dispatch(
+        fetchFeedPosts({
+          token: availableUser.token,
+          lang: language,
+        })
+      );
+    } catch (error) {
+      console.error("Failed to fetch feed posts:", error);
+    }
+  };
+
+  const fetchProfile = async () => {
+    try {
+      dispatch(
+        getProfileById({
+          userId: decodedToken?.id,
+          token: availableUser?.token,
+          lang: language,
+        })
+      );
+    } catch (error) {
+      console.error("Failed to fetch profile:", profileError);
+    }
+  };
+  useEffect(() => {
+    if (availableUser.token && decodedToken.id) {
+      fetchProfile();
+      fetchAllFeedPosts();
+      fetchAllRandomPosts();
+    }
+  }, [availableUser.token, decodedToken.id]);
+  useEffect(() => {
+    if (availableUser.token && decodedToken.id) {
+      fetchSuggested();
+    }
+  }, [availableUser.token, decodedToken.id, suggestedUsersPage]);
+
+  useEffect(() => {
+    if (availableUser.token && decodedToken.id) {
+      fetchFollowing();
+    }
+  }, [availableUser.token, decodedToken.id, followingUsersPage]);
+
+  const handleScroll = () => {
+    const bottom =
+      Math.ceil(window.innerHeight + window.scrollY) >=
+      document.documentElement.scrollHeight;
+
+    if (bottom) {
+      // Load more random posts
+      // Adjust the number of posts to load here
+      // dispatch(
+      //   fetchRandomPosts({
+      //     token: availableUser.token,
+      //     lang: language,
+      //     limit: randomposts.length + 5, // Increase the limit by 5 when scrolling to bottom
+      //   })
+      // );
+      setPostsLimit((prev) => prev + 5);
+    }
+  };
+  useEffect(() => {
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+
+  return (
+    <div className={style.communityContainer}>
+      <Helmet>
+        <title>WannaMeal community</title>
+        <meta
+          name="description"
+          content="Community for reacting with other users and sharing posts "
+        />
+      </Helmet>
+      <div className="container-lg">
+        <div className={style.Comunity}>
+          <div className={style.leftAside}>
+            {profile ? (
+              <div className={style.userInfoCard}>
+                <div className={style.userProfile}>
+                  <div className={style.coverPhoto}>
+                    <img
+                      src={profile.user?.coverImages[0] || coverPhoto} // Use defaultProfile if URL is not available
+                      alt="Cover"
+                    />
+                  </div>
+                  <div className={style.mainInfo}>
+                    <div className={style.profileImage}>
+                      <img
+                        src={profile.user?.profileImage?.url || defaultProfile} // Use defaultProfile if URL is not available
+                        alt="Profile"
+                      />
+                    </div>
+                    <div className={style.name}>{profile.user?.userName}</div>
+                    <div className={style.email}>{profile.user?.email}</div>
+                  </div>
+                </div>
+                <div className={style.follwInfo}>
+                  <div className={style.follwing}>
+                    <div className={style.followNum}>
+                      {profile.user.following?.length || 0}{" "}
+                    </div>
+                    <div className={style.followTitle}>{following}</div>
+                  </div>
+                  <div className={style.follwers}>
+                    <div className={style.followNum}>
+                      {profile.user.followers?.length || 0}{" "}
+                    </div>
+                    <div className={style.followTitle}>{followers}</div>
+                  </div>
+                </div>
+                <div className={style.profileLink}>
+                  <Link to="/profile">{mine}</Link>
+                </div>
+              </div>
+            ) : (
+              <Loading width="150px" height="150px" />
+            )}
+
+            {suggestedUsers ? (
+              <div className={style.followInfoCard}>
+                <div className={style.title}>{recommend}</div>
+                <div className={style.userCards}>
+                  {suggestedUsers && suggestedUsers?.length > 0 ? (
+                    suggestedUsers.map((user) => (
+                      <UserCard
+                        key={user._id}
+                        method={follow}
+                        user={user}
+                        // suggestedUsers={suggestedUsers}
+                      /> // Ensure unique key for each UserCard
+                    ))
+                  ) : (
+                    <p>{Norecommend}</p>
+                  )}
+                </div>
+                {suggestedUsers && suggestedUsers?.length > 3 && (
+                  <div className={style.showMore}>
+                    <div onClick={handleShowMoreSuggestedUsers}>{more}</div>
+                  </div>
+                )}
+              </div>
+            ) : (
+              <Loading width="150px" height="150px" />
+            )}
+          </div>
+          <div className={`${style.mainContent} d-flex flex-column gap-2`}>
+            <div
+              className={`${style.uploadPost} w-100 d-flex align-items-start flex-flex-nowrap`}
+            >
+              <div className={`${style.profileImage} col-1 me-1`}>
+                <img
+                  src={profile?.user?.profileImage?.url || defaultProfile}
+                  alt="Profile"
+                />
+              </div>
+              <form
+                onSubmit={handleSubmit}
+                className={`${style.postForm} col-11 d-flex flex-wrap justify-content-between row-gap-3`}
+              >
+                <div className={`${style.textInput} col-12`}>
+                  <input
+                    type="text"
+                    placeholder={`${share}`}
+                    name="post"
+                    value={text}
+                    id="post"
+                    className="w-100"
+                    onChange={handleTextChange}
+                    required
+                  />
+                  <button
+                    type="submit"
+                    className={style.sendIcon}
+                    disabled={postStatus === "loading"}
+                  >
+                    <VscSend size={25} className={style.postIcon} />
+                  </button>
+                </div>
+                <input
+                  type="file"
+                  name="photoInput"
+                  id="photoInput"
+                  accept="image/*"
+                  className="d-none"
+                  onChange={handlePhotoChange}
+                  multiple
+                />
+                <label htmlFor="photoInput">
+                  <HiPhoto size={23} color="#1976d2" className="me-1" />
+                  {photo}
+                </label>
+                <input
+                  type="file"
+                  name="videoInput"
+                  id="videoInput"
+                  accept="video/*"
+                  className="d-none"
+                  onChange={handleVideoChange}
+                />
+                <label htmlFor="videoInput">
+                  <IoVideocam size={23} color="#1976d2" className="me-1" />
+                  {video}
+                </label>
+              </form>
+              <div
+                className={`${style.preview} col-12 d-flex flex-column justify-content-center flex-wrap g-2`}
+              >
+                {previewPhotos.map((src, index) => (
+                  <div key={index} className={style.imgContainer}>
+                    <img src={src} alt={`Preview ${index}`} />
+                  </div>
+                ))}
+                {previewVideos.map((src, index) => (
+                  <div key={index} className={style.videoContainer}>
+                    <video src={src} controls />
+                  </div>
+                ))}
+              </div>
+            </div>
+            {createdPosts ? (
+              createdPosts.map((post) => <Post key={post._id} post={post} />)
+            ) : (
+              <Loading width="100px" height="100px" />
+            )}
+            {feedPostes && feedPostes.length > 0 ? (
+              feedPostes.map((post) => <Post key={post._id} post={post} />)
+            ) : randomposts && randomposts.length > 0 ? (
+              randomposts
+                .slice(0, postsLimit)
+                .map((post) => <Post key={post._id} post={post} />)
+            ) : (
+              <Loading width="100px" height="100px" />
+            )}
+          </div>
+          <div className={` ${style.rightAside}`}>
+            {followingUsers ? (
+              <div className={style.followInfoCard}>
+                <div className={style.title}>{who}</div>
+                <div className={style.userCards}>
+                  {followingUsers && followingUsers?.length > 0 ? (
+                    followingUsers.map((user) => (
+                      <UserCard key={user.id} method="message" user={user} />
+                    ))
+                  ) : (
+                    <p>{msg}</p>
+                  )}
+                </div>
+                {followingUsers && followingUsers?.length > 3 && (
+                  <div className={style.showMore}>
+                    <div onClick={handleShowMoreFollowingUsers}>{more}</div>
+                  </div>
+                )}
+              </div>
+            ) : (
+              <Loading width="150px" height="150px" />
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/wannameal/src/pages/contact/contact.jsx b/wannameal/src/pages/contact/contact.jsx
index 9427d38..9bd0252 100644
--- a/wannameal/src/pages/contact/contact.jsx
+++ b/wannameal/src/pages/contact/contact.jsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import styles from "./contactUS.module.css";
 import { MdOutlineLocationOn } from "react-icons/md";
 import { FiPhone } from "react-icons/fi";
@@ -7,20 +7,82 @@ import { TiSocialFacebook } from "react-icons/ti";
 import { FaXTwitter } from "react-icons/fa6";
 import { TiSocialLinkedin } from "react-icons/ti";
 import "animate.css";
+import { useTranslation } from "react-i18next";
+import axios from "axios";
+import Swal from "sweetalert2";
+import { Helmet } from "react-helmet";
+
 function ContactUs() {
+  const { t } = useTranslation();
+  const { head, fname, Email, msg, send, location, phone, mail } = t("contact");
+
+  const [formData, setFormData] = useState({
+    name: "",
+    email: "",
+    message: "",
+  });
+
+  console.log("🚀 ~ ContactUs ~ formData:", formData);
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData({
+      ...formData,
+      [name]: value,
+    });
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      const response = await axios.post(
+        "https://fast-plat1.vercel.app/contactus",
+        formData
+      );
+      console.log("🚀 ~ handleSubmit ~ response:", response);
+      Swal.fire({
+        icon: "success",
+        title: response?.data?.message,
+        toast: true,
+        position: "top-end",
+        showConfirmButton: false,
+        timer: 3000,
+        timerProgressBar: true,
+      });
+
+      setFormData({
+        name: "",
+        email: "",
+        message: "",
+      });
+    } catch (error) {
+      console.error("Failed to send contact: ", error);
+      Swal.fire({
+        icon: "error",
+        title: "Failed to send",
+        toast: true,
+        position: "top-end",
+        showConfirmButton: false,
+        timer: 2000,
+        timerProgressBar: true,
+      });
+    }
+  };
+
   return (
     <div className={` ${styles.contactContainer} `}>
+      <Helmet>
+        <title>Contact Us</title>
+        <meta name="description" content="Get in touch with us" />
+      </Helmet>
       <div
         className={`${styles.contact} animate__animated animate__backInRight container-lg`}
       >
-        <div className={styles.title}>
-          get in touch
-        </div>
+        <div className={styles.title}>{head}</div>
         <div
           className={`${styles.box} row justify-content-between align-items-center px-5`}
         >
           <div className={`${styles.form} col-7`}>
-            <form>
+            <form onSubmit={handleSubmit}>
               <div className={`py-5 px-4 ${styles.inputs}`}>
                 <div>
                   <input
@@ -28,7 +90,10 @@ function ContactUs() {
                     name="name"
                     className={`form-control ${styles.input}`}
                     id="exampleFormControlInput1"
-                    placeholder="Your Name"
+                    placeholder={fname}
+                    value={formData.name}
+                    onChange={handleChange}
+                    required
                   />
                 </div>
                 <div>
@@ -37,58 +102,42 @@ function ContactUs() {
                     name="email"
                     className={`form-control  ${styles.input}`}
                     id="exampleFormControlInput1"
-                    placeholder="Your Email "
+                    placeholder={Email}
+                    value={formData.email}
+                    onChange={handleChange}
+                    required
                   />
                 </div>
                 <div>
                   <textarea
                     name="message"
                     className={`form-control text-white ${styles.input}`}
-                    placeholder="Enter Your Message"
+                    placeholder={msg}
                     id="exampleFormControlTextarea1"
                     rows={3}
-                    defaultValue={""}
+                    value={formData.message}
+                    onChange={handleChange}
+                    required
                   />
                 </div>
-
-                <div className={`${styles.submit}  w-100  py-3`}>send</div>
-                {/* {message && <div className={`${style.message}`}>{message}</div>} */}
-                {/* {!isLoading ? (
-                  <div
-                    style={{ background: "#912b22" }}
-                    className="btn w-25 text-white align-self-end py-3"
-                    onClick={submitSend}
-                  >
-                    send message
-                  </div>
-                ) : (
-                  <div
-                    style={{ background: "#912b22" }}
-                    className=" w-25 justify-content-center rounded-3 align-self-end py-2"
-                  >
-                    <div
-                      class="spinner-border text-white mx-auto d-block"
-                      role="status"
-                    >
-                      <span class="sr-only">Loading...</span>
-                    </div>
-                  </div>
-                )} */}
+                <button type="submit" className={`${styles.submit} w-100 py-3`}>
+                  {send}
+                </button>
               </div>
             </form>
           </div>
           <div className={`${styles.information} col-5`}>
             <div className={`${styles.location}`}>
               <MdOutlineLocationOn color="#3AC568" size={22} className="me-2" />
-              Suez Canal University
+              {location}
             </div>
             <div className={`${styles.phone}`}>
               <FiPhone color="#3AC568" size={22} className="me-2" />
-              010-11-0101010-14-52
+              {phone}
             </div>
             <div className={`${styles.email}`}>
               <MdOutlineEmail color="#3AC568" size={22} className="me-2" />
-              Teem-ala-alaah@gmail.com
+              {mail}
             </div>
             <div className={`${styles.socialIcons}`}>
               <TiSocialFacebook size={22} /> <FaXTwitter size={22} />{" "}
diff --git a/wannameal/src/pages/dashboeard/dashboard.jsx b/wannameal/src/pages/dashboeard/dashboard.jsx
index c972541..b0bcaf1 100644
--- a/wannameal/src/pages/dashboeard/dashboard.jsx
+++ b/wannameal/src/pages/dashboeard/dashboard.jsx
@@ -6,16 +6,21 @@ import DashNav from "../../components/dashNav/dashNav";
 import Sidebar from "../../components/sidebar/sidebar";
 import { Route, Routes } from "react-router-dom";
 import React from "react";
+import { Helmet } from "react-helmet";
 
 export default function Dashboard() {
   return (
     <div className="d-flex">
+      <Helmet>
+        <title>Dashboard</title>
+        <meta name="description" content="" />
+      </Helmet>
       <Sidebar />
       <div
-        className="d-flex flex-column w-100"
+        className="d-flex flex-column w-100 overflow-hidden"
         style={{ background: "var(--body)" }}
       >
-        <DashNav />
+        {/* <DashNav /> */}
         <Routes>
           <Route path="/ingredients" element={<Ingredients />} />
           <Route path="/recipes" element={<Recipes />} />
diff --git a/wannameal/src/pages/dashboeard/defaultDash/dashboard.module.css b/wannameal/src/pages/dashboeard/defaultDash/dashboard.module.css
index dc524d8..af6c2e9 100644
--- a/wannameal/src/pages/dashboeard/defaultDash/dashboard.module.css
+++ b/wannameal/src/pages/dashboeard/defaultDash/dashboard.module.css
@@ -1,6 +1,6 @@
 .state_div {
   border-radius: 10px;
-  background: #fff;
+  background: var(--text_white);
   box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.25);
 }
 .card_image {
@@ -16,14 +16,14 @@
   border-radius: 8px;
   background: var(--green);
   box-shadow: 0px 4px 16px 0px rgba(90, 85, 210, 0.4);
-  color: white;
+  color: var(--text_white);
 }
 .Team_Icon {
   background-color: red;
   width: 40px;
   height: 40px;
   border-radius: 8px;
-  background: #783efd;
+  background: var(--light_burble);
   box-shadow: 0px 4px 16px 0px rgba(159, 152, 254, 0.64);
   padding: 8px;
   color: var(--text_white);
diff --git a/wannameal/src/pages/dashboeard/defaultDash/defaultDash.jsx b/wannameal/src/pages/dashboeard/defaultDash/defaultDash.jsx
index db72172..fefb930 100644
--- a/wannameal/src/pages/dashboeard/defaultDash/defaultDash.jsx
+++ b/wannameal/src/pages/dashboeard/defaultDash/defaultDash.jsx
@@ -80,8 +80,8 @@ export default function DefaultDash() {
           </div>
         </div>
       </div>
-      <div className="row  my-4">
-        <div className="col-9">
+      <div className="row  my-4 row-gap-2">
+        <div className="col-12 col-lg-9">
           {isClient && (
             <div className={`p-3 py-4 ${style.state_div}`}>
               <h4 className="mb-4">Market Overview</h4>
@@ -113,7 +113,7 @@ export default function DefaultDash() {
             </div>
           )}
         </div>
-        <div className="col-3 d-flex flex-column gap-5">
+        <div className="col-12 col-lg-3 d-flex flex-column gap-5">
           <div
             className={`p-3 py-5 d-flex flex-column gap-5 ${style.state_div}`}
           >
diff --git a/wannameal/src/pages/dashboeard/ingredients/ingredients.jsx b/wannameal/src/pages/dashboeard/ingredients/ingredients.jsx
index 34e7a94..dae5a93 100644
--- a/wannameal/src/pages/dashboeard/ingredients/ingredients.jsx
+++ b/wannameal/src/pages/dashboeard/ingredients/ingredients.jsx
@@ -1,29 +1,58 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import style from "./ingredients.module.css";
 import Pagination from "../../../components/pagination/pagination";
+import axios from "axios";
+const INGR_PER_PAGE = 9;
 export default function Ingredients() {
-  const divs = Array.from({ length: 24 }, (_, index) => (
-    <div
-      key={index}
-      className={`d-flex flex-column justify-content-center gap-3 ${style.ing_div}`}
-    >
-      <h1>🥩</h1>
-      <p>Meat</p>
-    </div>
-  ));
+
+  const [ingredients, setingredients] = useState([])
+  const [currentPage, setCurrentPage] = useState(1);
+  const getIngredients = () => {
+    axios.get(('https://fast-plat1.vercel.app/Ingredients/getAll')).then((res) => {
+      console.log(res.data.data);
+      setingredients(res.data.data)
+    }).catch((err) => {
+      console.log(err);
+    })
+  }
+  useEffect(() => {
+    getIngredients()
+  }, [])
+  const startIndex = (currentPage - 1) * INGR_PER_PAGE;
+  const selectedIngre = ingredients.slice(
+    startIndex,
+    startIndex + INGR_PER_PAGE
+  );
+  const totalPages = Math.ceil(ingredients.length / INGR_PER_PAGE);
+
   return (
-    <div className="px-5 my-4">
+    <div className="px-5 my-4" >
       <div className={`${style.confirm_recipe}`}>
-        <button className={style.confirm_btn}>add ingredient</button>
+        <button className={style.confirm_btn}>Add Ingredient</button>
       </div>
-      <div className="bg-body rounded-4 p-3">
+      <div className=" rounded-4 p-3" style={{ background: "var(--body)" }}>
         <div
-          className="row m-3 pb-3 flex-wrap align-items-start justify-content-center"
+          className="row m-3 pb-3 flex-wrap align-items-start justify-content-center "
           style={{ gap: "40px", borderBottom: "1px solid var(--text_black)" }}
         >
-          {divs}
+          {selectedIngre?.map((ing, index) => (
+            <div
+              key={index}
+              className={`col-6 col-lg-3 d-flex flex-column justify-content-center align-items-center gap-3 ${style.ing_div}`}
+            >
+              <img src={ing.image.url} alt="img" width={100} height={100} style={{ borderRadius: "18px" }} />
+              <h5>{ing.name || 'Meat'}</h5>
+              <p>category: {ing.category.name}</p>
+            </div>
+          ))}
         </div>
-        <Pagination />
+        <Pagination
+          who={'ingredients'}
+          currentPage={currentPage}
+          totalPages={totalPages}
+          setCurrentPage={setCurrentPage}
+          totalUsers={ingredients.length}
+        />
       </div>
     </div>
   );
diff --git a/wannameal/src/pages/dashboeard/ingredients/ingredients.module.css b/wannameal/src/pages/dashboeard/ingredients/ingredients.module.css
index 138729f..5a02d0f 100644
--- a/wannameal/src/pages/dashboeard/ingredients/ingredients.module.css
+++ b/wannameal/src/pages/dashboeard/ingredients/ingredients.module.css
@@ -16,10 +16,10 @@
   gap: 0.7rem;
 }
 .ing_div {
-  background: #f4f4f4;
+  background: var(--text_white);
   border: 0.5px solid rgba(0, 0, 0, 0.38);
-  width: 140px !important;
-  height: 160px;
+  /* width: 140px !important; */
+  height: 220px;
   flex-shrink: 0;
   border-radius: 39px;
   text-align: center;
diff --git a/wannameal/src/pages/dashboeard/recipes/recipes.jsx b/wannameal/src/pages/dashboeard/recipes/recipes.jsx
index 4e8f473..7a748ed 100644
--- a/wannameal/src/pages/dashboeard/recipes/recipes.jsx
+++ b/wannameal/src/pages/dashboeard/recipes/recipes.jsx
@@ -1,28 +1,70 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import style from "./recipes.module.css";
-import MealCard from "../../../components/mealCard/mealCard";
 import Pagination from "../../../components/pagination/pagination";
 import { Link } from "react-router-dom";
+import { useSelector, useDispatch } from 'react-redux';
+import { fetchMeals } from "../../../redux/slices/dashmeals";
+import axios from "axios";
+import DashCard from "../../../components/mealCard/dashCard";
+const Meals_PER_PAGE = 6;
 export default function Recipes() {
-  const recipes = Array.from({ length: 6 }, (_, index) => (
-    <div className="col-8 col-md-6 col-lg-4 col-lg-3 mb-4 d-flex flex-wrap justify-content-center align-items-center">
-      <MealCard />
-    </div>
-  ));
+  // const dispatch = useDispatch();
+  // const meals = useSelector((state) => state.meals.meals);
+  // const status = useSelector((state) => state.meals.status);
+  // const error = useSelector((state) => state.meals.error);
+
+  // useEffect(() => {
+  //   dispatch(fetchMeals());
+  // }, [dispatch]);
+  // if (!meals) {
+  //   return <div>Loading...</div>;
+  // }
+  // console.log('Meals from Redux:', meals);
+  const [meals, setmeals] = useState([])
+  const [currentPage, setCurrentPage] = useState(1);
+  useEffect(() => {
+    axios.get('https://fast-plat1.vercel.app/meals').then((res) => {
+      setmeals(res.data.result)
+    })
+  }, [meals])
+  const startIndex = (currentPage - 1) * Meals_PER_PAGE;
+  const selectedMeals = meals.slice(
+    startIndex,
+    startIndex + Meals_PER_PAGE
+  );
+  const totalPages = Math.ceil(meals.length / Meals_PER_PAGE);
+
   return (
     <div className="px-5 my-4">
       <div className={`${style.confirm_recipe}`}>
-        <Link href={"/addProduct"}>
-          <button className={style.confirm_btn}>add recipe</button>
+        <Link to={"/addProduct"}>
+          <button className={style.confirm_btn}>Add Recipe</button>
         </Link>
       </div>
+      {/* {status === "loading" && <p>Loading...</p>}
+      {status === "failed" && <p>Error: {error}</p>}
+      {status === "succeeded" && ( */}
       <div
-        className="row pb-3"
+        className="row pb-3 d-flex flex-wrap"
         style={{ borderBottom: "1px solid var(--text_black)" }}
       >
-        {recipes}
+        {selectedMeals?.map((meal) => (
+          <div
+            key={meal._id}
+            className="col-12 col-md-6 col-xl-4 col-xxl-3 mb-4 d-flex flex-wrap justify-content-center align-items-center"
+          >
+            <DashCard meal={meal} />
+          </div>
+        ))}
       </div>
-      <Pagination />
+      {/* )} */}
+      <Pagination
+        who={'recipes'}
+        currentPage={currentPage}
+        totalPages={totalPages}
+        setCurrentPage={setCurrentPage}
+        totalUsers={meals.length}
+      />
     </div>
   );
-}
+};
diff --git a/wannameal/src/pages/dashboeard/users/users.jsx b/wannameal/src/pages/dashboeard/users/users.jsx
index 315edb0..287bb20 100644
--- a/wannameal/src/pages/dashboeard/users/users.jsx
+++ b/wannameal/src/pages/dashboeard/users/users.jsx
@@ -1,12 +1,36 @@
-"use client";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import style from "./users.module.css";
 import { TbEdit } from "react-icons/tb";
 import { CiTrash } from "react-icons/ci";
-import { FaArrowLeft, FaArrowRight } from "react-icons/fa";
 import Pagination from "../../../components/pagination/pagination";
+import { useDispatch, useSelector } from "react-redux";
+import { fetchUsers } from "../../../redux/slices/dashusers";
+
+const USERS_PER_PAGE = 6;
+
 export default function Users() {
   const [choosen, setchoosen] = useState("Admin");
+  const [currentPage, setCurrentPage] = useState(1);
+  const dispatch = useDispatch();
+  const users = useSelector((state) => state.users.users);
+  const status = useSelector((state) => state.users.status);
+  const error = useSelector((state) => state.users.error);
+
+  useEffect(() => {
+    dispatch(fetchUsers());
+  }, [dispatch]);
+
+  if (!users || !users.data) {
+    return <div>Loading...</div>;
+  }
+
+  const startIndex = (currentPage - 1) * USERS_PER_PAGE;
+  const selectedUsers = users.data.slice(
+    startIndex,
+    startIndex + USERS_PER_PAGE
+  );
+  const totalPages = Math.ceil(users.data.length / USERS_PER_PAGE);
+
   return (
     <div className="px-5 my-4">
       <div
@@ -15,25 +39,22 @@ export default function Users() {
       >
         <div
           onClick={() => setchoosen("Admin")}
-          className={`${style.filter_btn}  ${
-            choosen === "Admin" ? style.green : ""
-          }`}
+          className={`${style.filter_btn} ${choosen === "Admin" ? style.green : ""
+            }`}
         >
           Admin users
         </div>
         <div
           onClick={() => setchoosen("premium")}
-          className={`${style.filter_btn}  ${
-            choosen === "premium" ? style.green : ""
-          }`}
+          className={`${style.filter_btn} ${choosen === "premium" ? style.green : ""
+            }`}
         >
           <span style={{ color: "gold" }}>premium</span> users
         </div>
         <div
           onClick={() => setchoosen("Normal")}
-          className={`${style.filter_btn}  ${
-            choosen === "Normal" ? style.green : ""
-          }`}
+          className={`${style.filter_btn} ${choosen === "Normal" ? style.green : ""
+            }`}
         >
           Normal users
         </div>
@@ -42,242 +63,66 @@ export default function Users() {
         className="my-4 rounded-3 p-3"
         style={{ background: "var(--text_white)" }}
       >
-        <table className={style.table}>
-          <thead>
-            <tr className={style.Table_head}>
-              <th className={style.head_table}>user</th>
-              <th className={style.head_table}>eamil</th>
-              <th className={style.head_table}>location</th>
-              <th className={style.head_table}>phone Number</th>
-              <th className={style.head_table}></th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td className={` ${style.body_table}`}>
-                <svg
-                  style={{ marginRight: "10px" }}
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="41"
-                  height="41"
-                  viewBox="0 0 41 41"
-                  fill="none"
-                >
-                  <rect
-                    x="0.5"
-                    y="0.5"
-                    width="40"
-                    height="40"
-                    rx="20"
-                    fill="#5CB85F"
-                    fill-opacity="0.64"
-                  />
-                  <path
-                    d="M20.5 8.5C22.0913 8.5 23.6174 9.13214 24.7426 10.2574C25.8679 11.3826 26.5 12.9087 26.5 14.5C26.5 16.0913 25.8679 17.6174 24.7426 18.7426C23.6174 19.8679 22.0913 20.5 20.5 20.5C18.9087 20.5 17.3826 19.8679 16.2574 18.7426C15.1321 17.6174 14.5 16.0913 14.5 14.5C14.5 12.9087 15.1321 11.3826 16.2574 10.2574C17.3826 9.13214 18.9087 8.5 20.5 8.5ZM20.5 23.5C27.13 23.5 32.5 26.185 32.5 29.5C32.5 31.1569 31.1569 32.5 29.5 32.5H11.5C9.84315 32.5 8.5 31.1569 8.5 29.5C8.5 26.185 13.87 23.5 20.5 23.5Z"
-                    fill="white"
-                  />
-                </svg>
-                <span>Elboob</span>
-              </td>
-              <td className={style.body_table}>Badr@gmail.com</td>
-              <td className={style.body_table}>
-                <p className="m-0">Egypt , elsharqia </p>
-                <p className={style.address}>mnia-elqamh, sunhot</p>
-              </td>
-              <td className={style.body_table}>01147174456</td>
-              <td className={style.body_table}>
-                <TbEdit />
-                <CiTrash />
-              </td>
-            </tr>
-            <tr>
-              <td className={` ${style.body_table}`}>
-                <svg
-                  style={{ marginRight: "10px" }}
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="41"
-                  height="41"
-                  viewBox="0 0 41 41"
-                  fill="none"
-                >
-                  <rect
-                    x="0.5"
-                    y="0.5"
-                    width="40"
-                    height="40"
-                    rx="20"
-                    fill="#5CB85F"
-                    fill-opacity="0.64"
-                  />
-                  <path
-                    d="M20.5 8.5C22.0913 8.5 23.6174 9.13214 24.7426 10.2574C25.8679 11.3826 26.5 12.9087 26.5 14.5C26.5 16.0913 25.8679 17.6174 24.7426 18.7426C23.6174 19.8679 22.0913 20.5 20.5 20.5C18.9087 20.5 17.3826 19.8679 16.2574 18.7426C15.1321 17.6174 14.5 16.0913 14.5 14.5C14.5 12.9087 15.1321 11.3826 16.2574 10.2574C17.3826 9.13214 18.9087 8.5 20.5 8.5ZM20.5 23.5C27.13 23.5 32.5 26.185 32.5 29.5C32.5 31.1569 31.1569 32.5 29.5 32.5H11.5C9.84315 32.5 8.5 31.1569 8.5 29.5C8.5 26.185 13.87 23.5 20.5 23.5Z"
-                    fill="white"
-                  />
-                </svg>
-                <span>Elboob</span>
-              </td>
-              <td className={style.body_table}>Badr@gmail.com</td>
-              <td className={style.body_table}>
-                <p className="m-0">Egypt , elsharqia </p>
-                <p className={style.address}>mnia-elqamh, sunhot</p>
-              </td>
-              <td className={style.body_table}>01147174456</td>
-              <td className={style.body_table}>
-                <TbEdit />
-                <CiTrash />
-              </td>
-            </tr>
-            <tr>
-              <td className={` ${style.body_table}`}>
-                <svg
-                  style={{ marginRight: "10px" }}
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="41"
-                  height="41"
-                  viewBox="0 0 41 41"
-                  fill="none"
-                >
-                  <rect
-                    x="0.5"
-                    y="0.5"
-                    width="40"
-                    height="40"
-                    rx="20"
-                    fill="#5CB85F"
-                    fill-opacity="0.64"
-                  />
-                  <path
-                    d="M20.5 8.5C22.0913 8.5 23.6174 9.13214 24.7426 10.2574C25.8679 11.3826 26.5 12.9087 26.5 14.5C26.5 16.0913 25.8679 17.6174 24.7426 18.7426C23.6174 19.8679 22.0913 20.5 20.5 20.5C18.9087 20.5 17.3826 19.8679 16.2574 18.7426C15.1321 17.6174 14.5 16.0913 14.5 14.5C14.5 12.9087 15.1321 11.3826 16.2574 10.2574C17.3826 9.13214 18.9087 8.5 20.5 8.5ZM20.5 23.5C27.13 23.5 32.5 26.185 32.5 29.5C32.5 31.1569 31.1569 32.5 29.5 32.5H11.5C9.84315 32.5 8.5 31.1569 8.5 29.5C8.5 26.185 13.87 23.5 20.5 23.5Z"
-                    fill="white"
-                  />
-                </svg>
-                <span>Elboob</span>
-              </td>
-              <td className={style.body_table}>Badr@gmail.com</td>
-              <td className={style.body_table}>
-                <p className="m-0">Egypt , elsharqia </p>
-                <p className={style.address}>mnia-elqamh, sunhot</p>
-              </td>
-              <td className={style.body_table}>01147174456</td>
-              <td className={style.body_table}>
-                <TbEdit />
-                <CiTrash />
-              </td>
-            </tr>
-            <tr>
-              <td className={` ${style.body_table}`}>
-                <svg
-                  style={{ marginRight: "10px" }}
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="41"
-                  height="41"
-                  viewBox="0 0 41 41"
-                  fill="none"
-                >
-                  <rect
-                    x="0.5"
-                    y="0.5"
-                    width="40"
-                    height="40"
-                    rx="20"
-                    fill="#5CB85F"
-                    fill-opacity="0.64"
-                  />
-                  <path
-                    d="M20.5 8.5C22.0913 8.5 23.6174 9.13214 24.7426 10.2574C25.8679 11.3826 26.5 12.9087 26.5 14.5C26.5 16.0913 25.8679 17.6174 24.7426 18.7426C23.6174 19.8679 22.0913 20.5 20.5 20.5C18.9087 20.5 17.3826 19.8679 16.2574 18.7426C15.1321 17.6174 14.5 16.0913 14.5 14.5C14.5 12.9087 15.1321 11.3826 16.2574 10.2574C17.3826 9.13214 18.9087 8.5 20.5 8.5ZM20.5 23.5C27.13 23.5 32.5 26.185 32.5 29.5C32.5 31.1569 31.1569 32.5 29.5 32.5H11.5C9.84315 32.5 8.5 31.1569 8.5 29.5C8.5 26.185 13.87 23.5 20.5 23.5Z"
-                    fill="white"
-                  />
-                </svg>
-                <span>Elboob</span>
-              </td>
-              <td className={style.body_table}>Badr@gmail.com</td>
-              <td className={style.body_table}>
-                <p className="m-0">Egypt , elsharqia </p>
-                <p className={style.address}>mnia-elqamh, sunhot</p>
-              </td>
-              <td className={style.body_table}>01147174456</td>
-              <td className={style.body_table}>
-                <TbEdit />
-                <CiTrash />
-              </td>
-            </tr>
-            <tr>
-              <td className={` ${style.body_table}`}>
-                <svg
-                  style={{ marginRight: "10px" }}
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="41"
-                  height="41"
-                  viewBox="0 0 41 41"
-                  fill="none"
-                >
-                  <rect
-                    x="0.5"
-                    y="0.5"
-                    width="40"
-                    height="40"
-                    rx="20"
-                    fill="#5CB85F"
-                    fill-opacity="0.64"
-                  />
-                  <path
-                    d="M20.5 8.5C22.0913 8.5 23.6174 9.13214 24.7426 10.2574C25.8679 11.3826 26.5 12.9087 26.5 14.5C26.5 16.0913 25.8679 17.6174 24.7426 18.7426C23.6174 19.8679 22.0913 20.5 20.5 20.5C18.9087 20.5 17.3826 19.8679 16.2574 18.7426C15.1321 17.6174 14.5 16.0913 14.5 14.5C14.5 12.9087 15.1321 11.3826 16.2574 10.2574C17.3826 9.13214 18.9087 8.5 20.5 8.5ZM20.5 23.5C27.13 23.5 32.5 26.185 32.5 29.5C32.5 31.1569 31.1569 32.5 29.5 32.5H11.5C9.84315 32.5 8.5 31.1569 8.5 29.5C8.5 26.185 13.87 23.5 20.5 23.5Z"
-                    fill="white"
-                  />
-                </svg>
-                <span>Elboob</span>
-              </td>
-              <td className={style.body_table}>Badr@gmail.com</td>
-              <td className={style.body_table}>
-                <p className="m-0">Egypt , elsharqia </p>
-                <p className={style.address}>mnia-elqamh, sunhot</p>
-              </td>
-              <td className={style.body_table}>01147174456</td>
-              <td className={style.body_table}>
-                <TbEdit />
-                <CiTrash />
-              </td>
-            </tr>
-            <tr>
-              <td className={` ${style.body_table}`}>
-                <svg
-                  style={{ marginRight: "10px" }}
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="41"
-                  height="41"
-                  viewBox="0 0 41 41"
-                  fill="none"
-                >
-                  <rect
-                    x="0.5"
-                    y="0.5"
-                    width="40"
-                    height="40"
-                    rx="20"
-                    fill="#5CB85F"
-                    fill-opacity="0.64"
-                  />
-                  <path
-                    d="M20.5 8.5C22.0913 8.5 23.6174 9.13214 24.7426 10.2574C25.8679 11.3826 26.5 12.9087 26.5 14.5C26.5 16.0913 25.8679 17.6174 24.7426 18.7426C23.6174 19.8679 22.0913 20.5 20.5 20.5C18.9087 20.5 17.3826 19.8679 16.2574 18.7426C15.1321 17.6174 14.5 16.0913 14.5 14.5C14.5 12.9087 15.1321 11.3826 16.2574 10.2574C17.3826 9.13214 18.9087 8.5 20.5 8.5ZM20.5 23.5C27.13 23.5 32.5 26.185 32.5 29.5C32.5 31.1569 31.1569 32.5 29.5 32.5H11.5C9.84315 32.5 8.5 31.1569 8.5 29.5C8.5 26.185 13.87 23.5 20.5 23.5Z"
-                    fill="white"
-                  />
-                </svg>
-                <span>Elboob</span>
-              </td>
-              <td className={style.body_table}>Badr@gmail.com</td>
-              <td className={style.body_table}>
-                <p className="m-0">Egypt , elsharqia </p>
-                <p className={style.address}>mnia-elqamh, sunhot</p>
-              </td>
-              <td className={style.body_table}>01147174456</td>
-              <td className={style.body_table}>
-                <TbEdit />
-                <CiTrash />
-              </td>
-            </tr>
-          </tbody>
-        </table>
-        <Pagination />
+        {status === "loading" && <p>Loading...</p>}
+        {status === "failed" && <p>Error: {error}</p>}
+        {status === "succeeded" && (
+          <>
+            <table className={style.table}>
+              <thead>
+                <tr className={style.Table_head}>
+                  <th className={style.head_table}>user</th>
+                  <th className={style.head_table}>email</th>
+                  <th className={style.head_table}>Status</th>
+                  <th className={style.head_table}></th>
+                </tr>
+              </thead>
+              <tbody>
+                {selectedUsers.map((user) => (
+                  <tr key={user.id}>
+                    <td className={style.body_table}>
+                      <svg
+                        style={{ marginRight: "10px" }}
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="41"
+                        height="41"
+                        viewBox="0 0 41 41"
+                        fill="none"
+                      >
+                        <rect
+                          x="0.5"
+                          y="0.5"
+                          width="40"
+                          height="40"
+                          rx="20"
+                          fill="#5CB85F"
+                          fillOpacity="0.64"
+                        />
+                        <path
+                          d="M20.5 8.5C22.0913 8.5 23.6174 9.13214 24.7426 10.2574C25.8679 11.3826 26.5 12.9087 26.5 14.5C26.5 16.0913 25.8679 17.6174 24.7426 18.7426C23.6174 19.8679 22.0913 20.5 20.5 20.5C18.9087 20.5 17.3826 19.8679 16.2574 18.7426C15.1321 17.6174 14.5 16.0913 14.5 14.5C14.5 12.9087 15.1321 11.3826 16.2574 10.2574C17.3826 9.13214 18.9087 8.5 20.5 8.5ZM20.5 23.5C27.13 23.5 32.5 26.185 32.5 29.5C32.5 31.1569 31.1569 32.5 29.5 32.5H11.5C9.84315 32.5 8.5 31.1569 8.5 29.5C8.5 26.185 13.87 23.5 20.5 23.5Z"
+                          fill="white"
+                        />
+                      </svg>
+                      <span>{user.userName}</span>
+                    </td>
+                    <td className={style.body_table}>{user.email}</td>
+                    <td className={style.body_table}>{user.status}</td>
+                    <td className={style.body_table}>
+                      <TbEdit />
+                      <CiTrash />
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+            <Pagination
+              who={'users'}
+              currentPage={currentPage}
+              totalPages={totalPages}
+              setCurrentPage={setCurrentPage}
+              totalUsers={users.data.length}
+            />
+          </>
+        )}
       </div>
     </div>
   );
diff --git a/wannameal/src/pages/dashboeard/users/users.module.css b/wannameal/src/pages/dashboeard/users/users.module.css
index 5556211..4eff8e5 100644
--- a/wannameal/src/pages/dashboeard/users/users.module.css
+++ b/wannameal/src/pages/dashboeard/users/users.module.css
@@ -1,19 +1,20 @@
 .filter_btn {
   background-color: var(--text_white);
   border-radius: 10px;
-  padding: 1rem 2rem;
+  padding: 1rem 1rem;
   transition: 0.3s;
   cursor: pointer;
   margin: 0.2rem 1.5rem;
 }
 .green {
   background-color: var(--green);
-  color: white;
+  color: var(--text_white);
 }
 .head_table {
-  color: #000;
-  text-align: center;
+  color: var(--text_black);
+  /* text-align: center; */
   font-family: Poppins;
+  padding: 0 8px;
   font-size: 20px;
   font-style: normal;
   font-weight: 600;
@@ -21,6 +22,14 @@
   letter-spacing: 0.18px;
   text-transform: capitalize;
 }
+@media (max-width: 940px) {
+  .head_table {
+    font-size: 14px;
+  }
+  .body_table {
+    font-size: 13px !important;
+  }
+}
 .table {
   width: 100%;
   border-collapse: separate;
@@ -33,8 +42,9 @@
   height: 72px;
 }
 .body_table {
-  color: #000;
-  text-align: center;
+  color: var(--text_black);
+  /* text-align: center; */
+  padding: 0 8px;
   font-family: Poppins;
   font-size: 18px;
   font-style: normal;
diff --git a/wannameal/src/pages/makeMeal/makeMeal.jsx b/wannameal/src/pages/makeMeal/makeMeal.jsx
new file mode 100644
index 0000000..f2e4fdb
--- /dev/null
+++ b/wannameal/src/pages/makeMeal/makeMeal.jsx
@@ -0,0 +1,36 @@
+import React from "react";
+import styles from "../Home/page.module.css";
+import { getTheme } from "../../redux/slices/systemModeSlice";
+import { useSelector } from "react-redux";
+import FoodIngreientSlider from "../../components/FoodIngreientSlider/FoodIngreientSlider";
+import MealsSlider from "../../components/mealsSlider/mealsSlider";
+import { useTranslation } from "react-i18next";
+import { Helmet } from "react-helmet";
+
+export default function MakeMeal() {
+  <Helmet>
+    <title>Make Your Meal</title>
+    <meta
+      name="description"
+      content="Making meal with your exist ingredients"
+    />
+  </Helmet>;
+  const theme = useSelector(getTheme);
+  const { t } = useTranslation();
+  const { make, meal } = t("make");
+  return (
+    <div
+      className={
+        theme === "dark" ? `py-5 w-100 ${styles.darkmodeChanges}` : "py-5 w-100"
+      }
+    >
+      <div className="" style={{ height: "100vh" }}>
+        <h1 className={`w-100 mx-auto text-center  ${styles.mainTitle}`}>
+          {make} <span>{meal}</span>
+        </h1>
+        <FoodIngreientSlider />
+        <MealsSlider />
+      </div>
+    </div>
+  );
+}
diff --git a/wannameal/src/pages/profile.rar b/wannameal/src/pages/profile.rar
deleted file mode 100644
index d8253a8..0000000
Binary files a/wannameal/src/pages/profile.rar and /dev/null differ
diff --git a/wannameal/src/pages/profile/edit/editProfile.jsx b/wannameal/src/pages/profile/edit/editProfile.jsx
index f39a04d..742b859 100644
--- a/wannameal/src/pages/profile/edit/editProfile.jsx
+++ b/wannameal/src/pages/profile/edit/editProfile.jsx
@@ -1,81 +1,235 @@
-"use client";
-
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import styles from "./editProfile.module.css";
-
 import { RiDeleteBinLine } from "react-icons/ri";
 import { PiUploadSimple } from "react-icons/pi";
 import Swal from "sweetalert2";
-import profile from "../../../assets/man-user.svg";
+import defaultProfile from "../../../assets/man-user.svg";
+import { useNavigate } from "react-router-dom";
+import {
+  getDecodedToken,
+  getuser,
+  logout,
+} from "../../../redux/slices/authSlice";
+import { useDispatch, useSelector } from "react-redux";
+
+import Loading from "../../../components/loading/loading";
+
+import {
+  fetchUser,
+  getLoggoedUser,
+  updateUser,
+  deleteAccount,
+} from "../../../redux/slices/userSLice";
+import { getUpdatedUser } from "../../../redux/slices/userSLice";
+import { useTranslation } from "react-i18next";
 
 function EditProfile() {
+  const { t } = useTranslation();
+  const {
+    setting,
+    Profile,
+    info,
+    fname,
+    lname,
+    Email,
+    image,
+    change,
+    delte,
+    changePass,
+    info2,
+    CurrentPass,
+    NewPass,
+    ConfirmPass,
+    savedCH,
+    cancel,
+    deltePers,
+    info3,
+    delteAcc,
+  } = t("editprofile");
+  const navigate = useNavigate();
+  const user = useSelector(getLoggoedUser); // Ensure profile is fetched properly
   const [formData, setFormData] = useState({
-    firstName: "",
-    lastName: "",
-    email: "",
+    firstName: user?.userName?.split(" ")[0],
+    lastName: user?.userName?.split(" ")[1],
+    email: user?.email,
+    phone: user?.phone || "",
     currentPassword: "",
     newPassword: "",
     confirmNewPassword: "",
-    profilePicture: null,
+    imageProfile: user?.profileImage?.url,
+    removeProfileImage: false,
   });
 
+  const [passwordValidity, setPasswordValidity] = useState({
+    length: false,
+    uppercase: false,
+    lowercase: false,
+    digit: false,
+    specialChar: false,
+    match: false,
+  });
+
+  const availableUser = useSelector(getuser);
+  const decodedToken = useSelector(getDecodedToken);
+
+  const userError = useSelector((state) => state.user.error);
+  console.log("🚀 ~ EditProfile ~ userError:", userError);
+  const userStatus = useSelector((state) => state.user.status);
+  console.log("🚀 ~ EditProfile ~ userStatus:", userStatus);
+  const dispatch = useDispatch();
+
+  const updatedUser = useSelector(getUpdatedUser);
+  console.log("🚀 ~ EditProfile ~ updatedUser:", updatedUser);
+
+  useEffect(() => {
+    const fetchProfileData = async () => {
+      await dispatch(fetchUser());
+    };
+    fetchProfileData();
+  }, [dispatch]);
+
+  const validatePassword = (password) => {
+    setPasswordValidity({
+      length: password.length >= 8,
+      uppercase: /[A-Z]/.test(password),
+      lowercase: /[a-z]/.test(password),
+      digit: /[0-9]/.test(password),
+      specialChar: /[!@#$%^&*]/.test(password),
+      match: password === formData.newPassword,
+    });
+  };
+
   const handleInputChange = (e) => {
     const { name, value } = e.target;
     setFormData((prevData) => ({
       ...prevData,
       [name]: value,
     }));
-    console.log(formData);
+    if (name === "newPassword" || name === "confirmNewPassword") {
+      validatePassword(value);
+    }
   };
+
   const cancelChanges = (e) => {
+    e.preventDefault();
     setFormData({
-      firstName: "",
-      lastName: "",
-      email: "",
+      firstName: user?.userName?.split(" ")[0],
+      lastName: user?.userName?.split(" ")[1],
+      email: user?.email,
+      phone: user?.phone || "",
       currentPassword: "",
       newPassword: "",
       confirmNewPassword: "",
-      profilePicture: null,
+      imageProfile: user?.profileImage?.url,
+      removeProfileImage: false,
     });
-    console.log(formData);
   };
 
   const handleImageChange = (e) => {
     const file = e.target.files[0];
-    console.log("🚀 ~ handleImageChange ~ file:", file);
     setFormData((prevData) => ({
       ...prevData,
-      profilePicture: file,
+      imageProfile: file,
+      removeProfileImage: false,
     }));
   };
 
   const handleDeletePhoto = () => {
     setFormData((prevData) => ({
       ...prevData,
-      profilePicture: null,
+      imageProfile: null,
+      removeProfileImage: true,
     }));
   };
-  const handleSubmit = (e) => {
+
+  const handleSubmit = async (e) => {
     e.preventDefault();
+    if (!formData.newPassword === "") {
+      if (!Object.values(passwordValidity).every(Boolean)) {
+        Swal.fire({
+          icon: "error",
+          title: "Password does not meet all requirments",
+          toast: true,
+          position: "top-end",
+          showConfirmButton: false,
+          timer: 3000,
+          timerProgressBar: true,
+        });
+        return;
+      }
+    }
+
+    if (
+      formData.firstName === "" ||
+      formData.lastName === "" ||
+      formData.email == ""
+    ) {
+      Swal.fire({
+        icon: "error",
+        title: "please fill all required fields",
+        toast: true,
+        position: "top-end",
+        showConfirmButton: false,
+        timer: 3000,
+        timerProgressBar: true,
+      });
+      return;
+    }
+
     const formDataToSend = new FormData();
-    Object.entries(formData).forEach(([key, value]) => {
-      formDataToSend.append(key, value);
-    });
 
-    fetch("", {
-      method: "POST",
-      body: formDataToSend,
-    })
-      .then((response) => response.json())
-      .then((data) => {
-        console.log("Success:", data);
+    formDataToSend.append(
+      "userName",
+      formData.firstName + " " + formData.lastName
+    );
+    formDataToSend.append("email", formData.email);
+    formDataToSend.append("password", formData.newPassword);
+    formDataToSend.append("confirmPassword", formData.confirmNewPassword);
+    if (
+      typeof formData.imageProfile !== "string" ||
+      formData.imageProfile !== null
+    ) {
+      formDataToSend.append("img", formData.imageProfile);
+    }
+    if (formData.removeProfileImage == true) {
+      formDataToSend.append("removeProfileImage", formData.removeProfileImage);
+    }
+    formDataToSend.append("phone", formData.phone);
+
+    await dispatch(
+      updateUser({
+        formData: formDataToSend,
+        userId: decodedToken.id,
+        token: availableUser.token,
       })
-      .catch((error) => {
-        console.error("Error:", error);
+    );
+
+    if (userError) {
+      Swal.fire({
+        icon: "error",
+        title: `${userError?.msgError}`,
+        toast: true,
+        position: "top-end",
+        showConfirmButton: false,
+        timer: 2000,
+        timerProgressBar: true,
+      });
+    } else {
+      Swal.fire({
+        icon: "success",
+        title: "Profile updated successfully",
+        toast: true,
+        position: "top-end",
+        showConfirmButton: false,
+        timer: 3000,
+        timerProgressBar: true,
       });
+
+      navigate("/profile");
+    }
   };
 
-  let handleDeleteAcount = () => {
+  const handleDeleteAccount = async () => {
     Swal.fire({
       title: "Are you sure?",
       text: "You won't be able to revert this!",
@@ -84,188 +238,283 @@ function EditProfile() {
       confirmButtonColor: "rgb(236, 52, 52)",
       cancelButtonColor: "#3ac568",
       confirmButtonText: "Yes, delete it!",
-    }).then((result) => {
+    }).then(async (result) => {
       if (result.isConfirmed) {
         let timerInterval;
-        Swal.fire({
-          title: "Deleting Account!",
-          html: "Your Account will be Deleted in <b></b> second.",
-          timer: 5000,
-          timerProgressBar: true,
 
-          didOpen: () => {
-            Swal.showLoading();
-            const timer = Swal.getPopup().querySelector("b");
-            timerInterval = setInterval(() => {
-              timer.textContent = `${parseInt(Swal.getTimerLeft() / 1000)}`;
-            }, 1000);
-          },
-          willClose: () => {
-            clearInterval(timerInterval);
-          },
-        }).then((result) => {
-          if (result.dismiss === Swal.DismissReason.timer) {
-            console.log("I was closed by the timer");
-            //روح علي الهوم بقا
+        try {
+          await dispatch(
+            deleteAccount({
+              userId: decodedToken.id,
+              token: availableUser.token,
+            })
+          );
+
+          if (userError) {
+            Swal.fire({
+              icon: "error",
+              title: `${userError?.msgError}`,
+              toast: true,
+              position: "top-end",
+              showConfirmButton: false,
+              timer: 2000,
+              timerProgressBar: true,
+            });
+          } else {
+            Swal.fire({
+              title: "Deleting Account!",
+              html: "Your Account will be Deleted in <b></b> second.",
+              timer: 5000,
+              timerProgressBar: true,
+              didOpen: () => {
+                Swal.showLoading();
+                const timer = Swal.getPopup().querySelector("b");
+                timerInterval = setInterval(() => {
+                  timer.textContent = `${parseInt(Swal.getTimerLeft() / 1000)}`;
+                }, 1000);
+              },
+              willClose: () => {
+                clearInterval(timerInterval);
+              },
+            }).then((result) => {
+              if (result.dismiss === Swal.DismissReason.timer) {
+                dispatch(logout());
+              }
+            });
           }
-        });
+        } catch (error) {
+          Swal.fire({
+            icon: "error",
+            title: `${userError?.msgError || "Failed to delete account"}`,
+            toast: true,
+            position: "top-end",
+            showConfirmButton: false,
+            timer: 2000,
+            timerProgressBar: true,
+          });
+        }
       }
     });
   };
+
   return (
     <>
       <div className={`py-5 ${styles.editportfolioContainer} `}>
         <div className="container-lg">
           <div className="row">
             <div className={`${styles.content} col-12 col-md-10`}>
-              <div className={styles.title}>Personal Setting</div>
-              <div className={styles.semiTitle}>profile</div>
-              <div className={styles.note}>
-                This information will be displayed publicly so be careful what
-                you share.
-              </div>
-              <form action="" onSubmit={handleSubmit} className={styles.form}>
+              <div className={styles.title}>{setting}</div>
+              <div className={styles.semiTitle}>{Profile}</div>
+              <div className={styles.note}>{info}</div>
+              <form onSubmit={handleSubmit} className={styles.form}>
                 <div className={`${styles.name} mt-2 `}>
                   <div className={`${styles.firstname}  col-12 col-md-5`}>
-                    <label htmlFor="firstName">first name</label>
+                    <label htmlFor="firstName">{fname}</label>
                     <input
                       type="text"
                       name="firstName"
                       id="firstName"
                       value={formData.firstName}
                       onChange={handleInputChange}
-                      placeholder="first name"
+                      placeholder={fname}
                     />
                   </div>
                   <div className={`${styles.lastname}  col-12 col-md-5`}>
-                    <label htmlFor="lastName">last name</label>
+                    <label htmlFor="lastName">{lname}</label>
                     <input
                       type="text"
                       name="lastName"
                       id="lastName"
                       value={formData.lastName}
                       onChange={handleInputChange}
-                      placeholder="last name"
+                      placeholder={lname}
                     />
                   </div>
                 </div>
                 <div className={`${styles.email}`}>
-                  <label htmlFor="email">email</label>
+                  <label htmlFor="email">{Email}</label>
                   <input
                     type="email"
                     name="email"
                     id="email"
                     value={formData.email}
                     onChange={handleInputChange}
-                    placeholder="email"
+                    placeholder={Email}
+                    required
+                  />
+                </div>
+                <div className={`${styles.email}`}>
+                  <label htmlFor="phone">Phone Number</label>
+                  <input
+                    type="text"
+                    name="phone"
+                    id="phone"
+                    value={formData.phone}
+                    onChange={handleInputChange}
+                    placeholder="phone"
+                    minLength="11"
+                    maxLength="11"
                   />
                 </div>
                 <hr />
-                <div className={styles.semiTitle}>profile picture</div>
+                <div className={styles.semiTitle}>{image}</div>
                 <div className={styles.imageProfile}>
                   <div className={styles.image}>
-                    {formData.profilePicture ? (
+                    {formData.imageProfile ? (
                       <img
-                        alt="user profile "
-                        src={URL.createObjectURL(formData.profilePicture)}
+                        alt="User Profile"
+                        src={
+                          typeof formData.imageProfile === "string"
+                            ? formData.imageProfile
+                            : URL.createObjectURL(formData.imageProfile)
+                        }
                       />
                     ) : (
-                      <img src={profile} alt="" objectFit="cover" fill="true" />
+                      <img
+                        src={defaultProfile}
+                        alt="Default Profile"
+                        objectFit="cover"
+                        fill="true"
+                      />
                     )}
                   </div>
                   <div className={styles.btns}>
                     <label htmlFor="change" className={styles.change}>
                       <PiUploadSimple size={22} className="mx-2" />
-                      change picture
+                      {change}
                     </label>
                     <input
                       id="change"
                       type="file"
-                      accept="image/jpeg, image/png, , image/svg+xml"
+                      accept="image/jpeg, image/png, image/svg+xml"
                       onChange={handleImageChange}
                     />
-                    <label className={` ${styles.delete}`}>
+                    <label className={styles.delete}>
                       <RiDeleteBinLine
                         size={22}
                         className="mx-2"
-                        on
                         onClick={handleDeletePhoto}
                       />
-                      delete
+                      {delte}
                     </label>
                   </div>
                 </div>
                 <hr />
-                <div className={styles.semiTitle}>change password</div>
-                <div className={styles.note}>
-                  This will be used to log into your account and complete high
-                  severity actions.
-                </div>
+                <div className={styles.semiTitle}>{changePass}</div>
+                <div className={styles.note}>{info2}</div>
                 <div className={`${styles.password} mt-2  `}>
                   <div className={styles.currentpassword}>
-                    <label htmlFor="currentPassword">current password</label>
+                    <label htmlFor="currentPassword">{CurrentPass}</label>
                     <input
                       type="password"
                       name="currentPassword"
                       id="currentPassword"
                       value={formData.currentPassword}
                       onChange={handleInputChange}
-                      placeholder="current passwword"
+                      placeholder={CurrentPass}
                     />
                   </div>
                   <div className={styles.newpassword}>
-                    <label htmlFor="newPassword">new password</label>
+                    <label htmlFor="newPassword">{NewPass}</label>
                     <input
                       type="password"
                       name="newPassword"
                       id="newPassword"
                       value={formData.newPassword}
                       onChange={handleInputChange}
-                      placeholder="new password"
+                      placeholder={NewPass}
                     />
+                    <div className={styles.passwordCriteria}>
+                      <ul>
+                        <li
+                          className={
+                            passwordValidity.length ? styles.green : styles.red
+                          }
+                        >
+                          Minimum 8 characters
+                        </li>
+                        <li
+                          className={
+                            passwordValidity.uppercase
+                              ? styles.green
+                              : styles.red
+                          }
+                        >
+                          At least one uppercase letter
+                        </li>
+                        <li
+                          className={
+                            passwordValidity.lowercase
+                              ? styles.green
+                              : styles.red
+                          }
+                        >
+                          At least one lowercase letter
+                        </li>
+                        <li
+                          className={
+                            passwordValidity.digit ? styles.green : styles.red
+                          }
+                        >
+                          At least one digit
+                        </li>
+                        <li
+                          className={
+                            passwordValidity.specialChar
+                              ? styles.green
+                              : styles.red
+                          }
+                        >
+                          At least one special character (!@#$%^&*)
+                        </li>
+                      </ul>
+                    </div>
                   </div>
                   <div className={styles.confirmnewpassword}>
-                    <label htmlFor="confirmNewPassword">
-                      confirm new password
-                    </label>
+                    <label htmlFor="confirmNewPassword">{ConfirmPass}</label>
                     <input
                       type="password"
                       name="confirmNewPassword"
                       id="confirmNewPassword"
                       value={formData.confirmNewPassword}
                       onChange={handleInputChange}
-                      placeholder="confirm new password"
+                      placeholder={ConfirmPass}
                     />
+                    {formData.newPassword === formData.confirmNewPassword ? (
+                      ""
+                    ) : (
+                      <p className={styles.red}>Passwords don`t match</p>
+                    )}
                   </div>
                 </div>
-
                 <div className={`${styles.btns} ${styles.submitbtns}`}>
                   <button
                     type="submit"
-                    className={` ${styles.change} col-12 col-md-5`}
+                    className={`${styles.change} col-12 col-md-5`}
                   >
-                    save changes
+                    {userStatus === "loading" ? (
+                      <Loading width="60px" height="40px" />
+                    ) : (
+                      "Save Changes"
+                    )}
                   </button>
                   <button
                     onClick={cancelChanges}
-                    className={` ${styles.delete} col-12 col-md-5`}
+                    className={`${styles.delete} col-12 col-md-5`}
                   >
-                    Cancel
+                    {cancel}
                   </button>
                 </div>
               </form>
               <hr />
-              <div className={styles.semiTitle}>Deiete Personal Account</div>
-              <div className={styles.note}>
-                Don't need wecraft any longer? We understand, and appreciate you
-                using our service!
-              </div>
+              <div className={styles.semiTitle}>{deltePers}</div>
+              <div className={styles.note}>{info3}</div>
 
               <div
                 className={styles.deleteAccount}
-                onClick={handleDeleteAcount}
+                onClick={handleDeleteAccount}
               >
-                delete account?
+                {delteAcc}
               </div>
             </div>
           </div>
diff --git a/wannameal/src/pages/profile/edit/editProfile.module.css b/wannameal/src/pages/profile/edit/editProfile.module.css
index 24d91c9..451db65 100644
--- a/wannameal/src/pages/profile/edit/editProfile.module.css
+++ b/wannameal/src/pages/profile/edit/editProfile.module.css
@@ -6,7 +6,7 @@
 .title,
 .semiTitle,
 .note {
-  text-align: left;
+  text-align: justify;
 }
 .title {
   font-size: 22px;
@@ -36,7 +36,7 @@
 }
 .form input {
   background-color: var(--body);
-
+  color: var(--text_black);
   border-radius: 8px;
   outline: navajowhite;
   border: none;
@@ -51,19 +51,20 @@
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
-  min-width: 98%;
+  width: 98%;
 }
 .form .name input {
-  min-width: 98%;
+  width: 100%;
 }
 .form .email input {
-  min-width: 98%;
+  width: 98%;
 }
 
 .imageProfile {
   width: 70%;
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-start;
+  gap: 50px;
   flex-wrap: wrap;
 }
 .imageProfile .image {
@@ -101,6 +102,7 @@
   cursor: pointer;
   transition: 0.2s;
   border: none;
+  max-height: 60px;
 }
 
 .btns .change:hover {
@@ -142,3 +144,10 @@
   min-width: 98%;
   gap: 5px;
 }
+
+.green {
+  color: var(--green);
+}
+.red {
+  color: red;
+}
diff --git a/wannameal/src/pages/profile/profile.jsx b/wannameal/src/pages/profile/profile.jsx
index e692441..47fb7a4 100644
--- a/wannameal/src/pages/profile/profile.jsx
+++ b/wannameal/src/pages/profile/profile.jsx
@@ -4,36 +4,89 @@ import styles from "./profile.module.css";
 import MealCard from "../../components/mealCard/mealCard";
 import "animate.css";
 import Swal from "sweetalert2";
-
+import defaultProfile from "../../assets/man-user.svg"; // Renamed import to avoid conflict with the profile variable
 import { IoSettingsOutline } from "react-icons/io5";
 import { CiBookmark } from "react-icons/ci";
+import { GiHotMeal } from "react-icons/gi";
 import { IoLinkOutline } from "react-icons/io5";
 import { FaCheckCircle } from "react-icons/fa";
-import { GiHotMeal } from "react-icons/gi";
 import { Link } from "react-router-dom";
+import { useDispatch, useSelector } from "react-redux";
+import { getDecodedToken, getuser, logout } from "../../redux/slices/authSlice";
+import SavedMeals from "../../components/savedMeals/SavedMeals";
+import MyRecips from "../../components/MyRecips/MyRecips";
+import { Helmet } from "react-helmet";
+
+import { getTheme } from "../../redux/slices/systemModeSlice";
+import Loading from "../../components/loading/loading";
+import { fetchUser, getLoggoedUser } from "../../redux/slices/userSLice";
+import { useTranslation } from "react-i18next";
 
 function Portfolio() {
-  const [systemlanguage, setsystemlanguage] = useState("english");
-  console.log("🚀 ~ Portfolio ~ systemlanguage:", systemlanguage);
+  const [systemlanguage, setsystemlanguage] = useState("eng");
   const [link, setLink] = useState("");
+  const [activeMeals, setActiveMeals] = useState("saved");
+  const availableUser = useSelector(getuser);
+  const decodedToken = useSelector(getDecodedToken);
+  const user = useSelector(getLoggoedUser); // Ensure profile is fetched properly
+  const userError = useSelector((state) => state.user.error);
+  const userStatus = useSelector((state) => state.user.status);
+  const dispatch = useDispatch();
+  const theme = useSelector(getTheme);
 
+  console.log("🚀 ~ profile ~ user:", user);
+  console.log("🚀 ~ Portfolio ~ systemlanguage:", systemlanguage);
+  const { t } = useTranslation();
+  const {
+    name,
+    Nickname,
+    edit,
+    share,
+    followers,
+    following,
+    savedRE,
+    MyRE,
+    WannaMeaL,
+    premium,
+    Country,
+    language,
+    Invite,
+    contactus,
+    log,
+    Cancel,
+  } = t("profile", {
+    fullname: "badr abdelhalim",
+    nickname: "badrJr",
+  });
   useEffect(() => {
     setLink(window.location.href);
-
-    // Function to update link state on popstate event (back/forward button)
     const handlePopState = () => {
       setLink(window.location.href);
     };
-
-    // Listen for the popstate event (back/forward button)
     window.addEventListener("popstate", handlePopState);
-
-    // Cleanup the event listener
     return () => {
       window.removeEventListener("popstate", handlePopState);
     };
   }, []);
 
+  useEffect(() => {
+    const fetchUserData = async () => {
+      try {
+        dispatch(
+          fetchUser({
+            token: availableUser.token,
+          })
+        );
+      } catch (error) {
+        console.error("Failed to fetch user:", userError);
+      }
+    };
+
+    if (availableUser.token && decodedToken.id) {
+      fetchUserData();
+    }
+  }, [dispatch, availableUser.token, decodedToken.id]);
+
   function copyLink() {
     navigator.clipboard.writeText(link);
     const Toast = Swal.mixin({
@@ -52,12 +105,44 @@ function Portfolio() {
       title: "Copied Successfully",
     });
   }
-  function logOut() {
-    console.log("logout");
-  }
+  let handleLogout = () => {
+    Swal.fire({
+      toast: true,
+      position: "top-end",
+      title: "Are you Sure you want to log out ?",
+      icon: "warning",
+      showCancelButton: true,
+      confirmButtonColor: "rgb(236, 52, 52)",
+      cancelButtonColor: "#3ac568",
+      confirmButtonText: "Log Out",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        dispatch(logout());
+        let timerInterval;
+        Swal.fire({
+          title: "Logging Out!",
+          html: "",
+          timer: 3000,
+          timerProgressBar: true,
+
+          didOpen: () => {
+            Swal.showLoading();
+          },
+          willClose: () => {
+            clearInterval(timerInterval);
+          },
+        });
+      }
+    });
+  };
+
   return (
     <>
       <div className={`py-5 ${styles.portfolioContainer} `}>
+        <Helmet>
+          <title>Profile</title>
+          <meta name="description" content="user profile with his data" />
+        </Helmet>
         <div className="container-lg">
           <div className="row">
             <div className={`col-12 col-lg-9 ${styles.userData}`}>
@@ -66,339 +151,387 @@ function Portfolio() {
                   style={{
                     borderRadius: "50%",
                   }}
-                  src="https://images.pexels.com/photos/771742/pexels-photo-771742.jpeg?auto=compress&cs=tinysrgb&w=400"
+                  src={user?.profileImage?.url || defaultProfile}
                   width={180}
                   height={180}
                   objectFit="cover"
-                  alt="meal"
+                  alt="profile"
                 />
               </div>
-              <div className={`${styles.info} `}>
-                <div className={`${styles.personalData}`}>
-                  <div>
-                    <div className={`${styles.userName}`}>
-                      Badr abd elheleem ali
+              {userStatus == "loading" ? (
+                <Loading />
+              ) : (
+                <div className={`${styles.info} `}>
+                  <div className={`${styles.personalData}`}>
+                    <div>
+                      <div className={`${styles.userName}`}>
+                        {user?.userName}
+                      </div>
+                      <div className={`${styles.acountName}`}>
+                        {user?.email}
+                      </div>
+                    </div>
+                    <div className={`${styles.followData}`}>
+                      <span className={`${styles.followers}`}>
+                        {user?.followers?.length || 0} {followers}
+                      </span>
+                      <span className={`${styles.following}`}>
+                        {user?.following?.length || 0} {following}
+                      </span>
                     </div>
-                    <div className={`${styles.acountName}`}>@Badr_Jr</div>
-                  </div>
-                  <div className={`${styles.followData}`}>
-                    <span className={`${styles.followers}`}>1 followers </span>
-                    <span className={`${styles.following}`}>1 following </span>
                   </div>
-                </div>
-                <div className={`${styles.btns}`}>
-                  <Link to="/profile/edit">
+                  <div className={`${styles.btns}`}>
+                    <Link to="/profile/edit">
+                      <div
+                        className={`${styles.btn}`}
+                        style={{ minWidth: "130px" }}
+                      >
+                        {edit}
+                      </div>
+                    </Link>
                     <div
+                      data-bs-target="#invite"
+                      data-bs-toggle="modal"
                       className={`${styles.btn}`}
                       style={{ minWidth: "130px" }}
                     >
-                      Edit profile
+                      {share}
                     </div>
-                  </Link>
-                  <div
-                    data-bs-target="#invite"
-                    data-bs-toggle="modal"
-                    className={`${styles.btn}`}
-                    style={{ minWidth: "130px" }}
-                  >
-                    Share profile
-                  </div>
-                  <div
-                    className={`${styles.settingIcon}`}
-                    data-bs-target="#exampleModalToggle"
-                    data-bs-toggle="modal"
-                    // onClick={() => {
-                    //   console.log("🚀 ~ Portfolio ~ showOverlay:", showOverlay);
-                    // }}
-                  >
-                    <IoSettingsOutline size={29} />
-                  </div>
-
-                  <div
-                    class="modal fade"
-                    id="exampleModalToggle"
-                    aria-hidden="true"
-                    aria-labelledby="exampleModalToggleLabel"
-                    tabindex="-1"
-                  >
-                    <div class="modal-dialog modal-dialog-centered">
-                      <div class="modal-content">
-                        <div class="modal-header">
-                          <h1
-                            class="modal-title5"
-                            id="exampleModalToggleLabel"
-                          ></h1>
+                    <div
+                      className={`${styles.settingIcon}`}
+                      data-bs-target="#exampleModalToggle"
+                      data-bs-toggle="modal"
+                      // onClick={() => {
+                      //   console.log("🚀 ~ Portfolio ~ showOverlay:", showOverlay);
+                      // }}
+                    >
+                      <IoSettingsOutline size={29} />
+                    </div>
+                    <div
+                      className={
+                        theme == "dark"
+                          ? `modal fade ${styles.darkModeChanges}`
+                          : "modal fade"
+                      }
+                      id="exampleModalToggle"
+                      aria-hidden="true"
+                      aria-labelledby="exampleModalToggleLabel"
+                      tabindex="-1"
+                    >
+                      <div class="modal-dialog modal-dialog-centered">
+                        <div class="modal-content">
+                          <div
+                            className={
+                              theme === "dark"
+                                ? `modal-header ${styles.darkModeChanges}`
+                                : "modal-header"
+                            }
+                          >
+                            <h1
+                              class="modal-title5"
+                              id="exampleModalToggleLabel"
+                            ></h1>
+                            <button
+                              type="button"
+                              class="btn-close"
+                              data-bs-dismiss="modal"
+                              aria-label="Close"
+                            ></button>
+                          </div>
+                          <div class="modal-body p-0 m-0">
+                            <ul className={`${styles.settingUl} `}>
+                              <li>
+                                {WannaMeaL}
+                                <span className={` ${styles.premium} `}>
+                                  {premium}
+                                </span>
+                              </li>
+                              <li
+                                data-bs-target="#country"
+                                data-bs-toggle="modal"
+                              >
+                                {Country}
+                              </li>
+                              <li
+                                data-bs-target="#language"
+                                data-bs-toggle="modal"
+                              >
+                                {language}
+                              </li>
+                              <li
+                                data-bs-target="#invite"
+                                data-bs-toggle="modal"
+                              >
+                                {Invite}
+                              </li>
+                              <li data-bs-dismiss="modal">
+                                <Link
+                                  to="/contact"
+                                  style={
+                                    {
+                                      // padding: "15px",
+                                      // display: "block",
+                                    }
+                                  }
+                                >
+                                  {contactus}
+                                </Link>
+                              </li>
+                              <li
+                                data-bs-dismiss="modal"
+                                onClick={handleLogout}
+                              >
+                                {log}
+                              </li>
+                            </ul>
+                          </div>
+                          <div class="modal-footer p-0 ">
+                            <div
+                              class="btn btn-danger w-100 h-0 m-0 rounded-0 "
+                              data-bs-dismiss="modal"
+                            >
+                              {Cancel}
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      class="modal fade"
+                      id="country"
+                      aria-hidden="true"
+                      aria-labelledby="exampleModalToggleLabel2"
+                      tabindex="-1"
+                    >
+                      {/* start country modal  */}
+                      <div class="modal-dialog modal-dialog-centered ">
+                        <div
+                          className={
+                            theme === "dark"
+                              ? `modal-content ${styles.darkModeChanges}`
+                              : "modal-content"
+                          }
+                        >
+                          <div class="modal-header">
+                            <h1
+                              className={
+                                theme === "dark"
+                                  ? `modal-title fs-5 ${styles.darkModeChanges}`
+                                  : `modal-title fs-5`
+                              }
+                              id="exampleModalToggleLabel2"
+                            >
+                              مصر ام الدنيا
+                            </h1>
+                            <button
+                              type="button"
+                              class="btn-close"
+                              data-bs-dismiss="modal"
+                              aria-label="Close"
+                            ></button>
+                          </div>
+                          <div class="modal-body p-0"></div>
+                          <div>
+                            <button
+                              class="btn btn-dark rounded-0 w-100"
+                              data-bs-target="#exampleModalToggle"
+                              data-bs-toggle="modal"
+                            >
+                              Back
+                            </button>
+                          </div>
+                        </div>
+                      </div>
+                      {/* end country modal  */}
+                    </div>
+                    <div
+                      class="modal fade"
+                      id="language"
+                      aria-hidden="true"
+                      aria-labelledby="exampleModalToggleLabel2"
+                      tabindex="-1"
+                    >
+                      {/* start country modal  */}
+                      <div class="modal-dialog modal-dialog-centered ">
+                        <div
+                          className={
+                            theme === "dark"
+                              ? `modal-content ${styles.darkModeChanges}`
+                              : "modal-content"
+                          }
+                        >
                           <button
                             type="button"
-                            class="btn-close"
+                            class="btn-close m-3 ms-auto "
                             data-bs-dismiss="modal"
                             aria-label="Close"
                           ></button>
-                        </div>
-                        <div class="modal-body p-0">
-                          <ul className={`${styles.settingUl} `}>
-                            <li>
-                              fast plate{" "}
-                              <span className={` ${styles.premium} `}>
-                                premium
-                              </span>
-                            </li>
-                            <li
-                              data-bs-target="#country"
-                              data-bs-toggle="modal"
-                            >
-                              Country
-                            </li>
-                            <li
-                              data-bs-target="#language"
-                              data-bs-toggle="modal"
-                            >
-                              language
-                            </li>
-                            <li data-bs-target="#invite" data-bs-toggle="modal">
-                              Invite your friends to fast plat
-                            </li>
-                            <li
-                              className="p-0"
-                              data-bs-target="#contact"
-                              data-bs-toggle="modal"
-                            >
-                              <Link
-                                to="/contact"
-                                style={{
-                                  padding: "15px",
-                                  display: "block",
-                                  // minWidth: "100%",
-                                  // minHeight: "100%",
+                          <div class="modal-body p-5 w-100  ">
+                            <div className={`${styles.input} mb-3 `}>
+                              <input
+                                className={`${styles.checkbox}`}
+                                type="checkbox"
+                                id={`CheckboxEnglish`}
+                                value="english"
+                                checked
+                                onChange={() => {
+                                  setsystemlanguage("eng");
                                 }}
+                              />
+                              <label
+                                className={
+                                  systemlanguage === "eng"
+                                    ? `${styles.checkboxlabel} ${styles.checked}`
+                                    : `${styles.checkboxlabel} `
+                                }
+                                htmlFor="CheckboxEnglish"
+                              >
+                                <div className="d-flex">
+                                  english
+                                  <FaCheckCircle
+                                    className={`${styles.checkicon}`}
+                                    size={25}
+                                    style={{ marginLeft: "auto" }}
+                                  />
+                                </div>
+                              </label>
+                            </div>
+                            <div className={`${styles.input} mb-1 `}>
+                              <input
+                                className={`${styles.checkbox}`}
+                                type="checkbox"
+                                id={`CheckboxArabic`}
+                                value="arabic"
+                                checked
+                                onChange={() => {
+                                  setsystemlanguage("arab");
+                                }}
+                              />
+                              <label
+                                className={
+                                  systemlanguage === "arab"
+                                    ? `${styles.checkboxlabel} ${styles.checked}`
+                                    : `${styles.checkboxlabel} `
+                                }
+                                htmlFor="CheckboxArabic"
                               >
-                                contact us
-                              </Link>
-                            </li>
-                            <li
-                              data-bs-target="#logout"
+                                <div className="d-flex">
+                                  arabic
+                                  <FaCheckCircle
+                                    className={`${styles.checkicon}`}
+                                    size={25}
+                                    style={{ marginLeft: "auto" }}
+                                  />
+                                </div>
+                              </label>
+                            </div>
+                          </div>
+                          <div>
+                            <button
+                              class="btn btn-dark rounded-0 w-100"
+                              data-bs-target="#exampleModalToggle"
                               data-bs-toggle="modal"
-                              onClick={logOut}
                             >
-                              log out
-                            </li>
-                          </ul>
-                        </div>
-                        <div class="modal-footer p-0 ">
-                          <div
-                            class="btn btn-danger w-100 h-0 m-0 rounded-0 "
-                            data-bs-dismiss="modal"
-                          >
-                            Cancel
+                              Back
+                            </button>
                           </div>
                         </div>
                       </div>
                     </div>
-                  </div>
-                  <div
-                    class="modal fade"
-                    id="country"
-                    aria-hidden="true"
-                    aria-labelledby="exampleModalToggleLabel2"
-                    tabindex="-1"
-                  >
-                    {/* start country modal  */}
-                    <div class="modal-dialog modal-dialog-centered ">
-                      <div class="modal-content">
-                        <div class="modal-header">
-                          <h1
-                            class="modal-title fs-5"
-                            id="exampleModalToggleLabel2"
-                          >
-                            مصر ام الدنيا
-                          </h1>
+                    <div
+                      class="modal fade"
+                      id="invite"
+                      aria-hidden="true"
+                      aria-labelledby="exampleModalToggleLabel2"
+                      tabindex="-1"
+                    >
+                      <div class="modal-dialog modal-dialog-centered ">
+                        <div
+                          className={
+                            theme === "dark"
+                              ? `modal-content ${styles.darkModeChanges}`
+                              : "modal-content"
+                          }
+                        >
                           <button
                             type="button"
-                            class="btn-close"
+                            className="btn-close m-3 ms-auto mb-0"
                             data-bs-dismiss="modal"
                             aria-label="Close"
                           ></button>
-                        </div>
-                        <div class="modal-body p-0"></div>
-                        <div>
-                          <button
-                            class="btn btn-dark rounded-0 w-100"
-                            data-bs-target="#exampleModalToggle"
-                            data-bs-toggle="modal"
-                          >
-                            Back
-                          </button>
-                        </div>
-                      </div>
-                    </div>
-                    {/* end country modal  */}
-                  </div>
-                  <div
-                    class="modal fade"
-                    id="language"
-                    aria-hidden="true"
-                    aria-labelledby="exampleModalToggleLabel2"
-                    tabindex="-1"
-                  >
-                    {/* start country modal  */}
-                    <div class="modal-dialog modal-dialog-centered ">
-                      <div class="modal-content">
-                        <button
-                          type="button"
-                          class="btn-close m-3 ms-auto "
-                          data-bs-dismiss="modal"
-                          aria-label="Close"
-                        ></button>
-                        <div class="modal-body p-5 w-100  ">
-                          <div className={`${styles.input} mb-3 `}>
-                            <input
-                              className={`${styles.checkbox}`}
-                              type="checkbox"
-                              id={`CheckboxEnglish`}
-                              value="english"
-                              checked
-                              onChange={() => {
-                                setsystemlanguage("english");
-                              }}
-                            />
-                            <label
-                              className={
-                                systemlanguage === "english"
-                                  ? `${styles.checkboxlabel} ${styles.checked}`
-                                  : `${styles.checkboxlabel} `
-                              }
-                              htmlFor="CheckboxEnglish"
-                            >
-                              <div className="d-flex">
-                                english
-                                <FaCheckCircle
-                                  className={`${styles.icon}`}
-                                  size={25}
-                                  style={{ marginLeft: "auto" }}
+                          <div className={` ${styles.inviteBody} `}>
+                            <h6>
+                              Send your personal page to your family and friends
+                            </h6>
+                            <div className={`${styles.links}`}>
+                              <label htmlFor="linkField">
+                                <IoLinkOutline size={26} />
+                              </label>
+
+                              <div className={`${styles.linkField}`}>
+                                <input
+                                  type="text"
+                                  className={`${styles.linkField}`}
+                                  placeholder=""
+                                  value={link}
+                                  // onChange={(e) => setLink(e.target.value)}
+                                  id="linkField"
                                 />
                               </div>
-                            </label>
-                          </div>
-                          <div className={`${styles.input} mb-1 `}>
-                            <input
-                              className={`${styles.checkbox}`}
-                              type="checkbox"
-                              id={`CheckboxArabic`}
-                              value="arabic"
-                              checked
-                              onChange={() => {
-                                setsystemlanguage("arabic");
-                              }}
-                            />
-                            <label
-                              className={
-                                systemlanguage === "arabic"
-                                  ? `${styles.checkboxlabel} ${styles.checked}`
-                                  : `${styles.checkboxlabel} `
-                              }
-                              htmlFor="CheckboxArabic"
-                            >
-                              <div className="d-flex">
-                                arabic
-                                <FaCheckCircle
-                                  className={`${styles.icon}`}
-                                  size={25}
-                                  style={{ marginLeft: "auto" }}
-                                />
+                              <div
+                                className={`btn btn-primary ${styles.copy}`}
+                                onClick={copyLink}
+                              >
+                                Copy
                               </div>
-                            </label>
-                          </div>
-                        </div>
-                        <div>
-                          <button
-                            class="btn btn-dark rounded-0 w-100"
-                            data-bs-target="#exampleModalToggle"
-                            data-bs-toggle="modal"
-                          >
-                            Back
-                          </button>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    class="modal fade"
-                    id="invite"
-                    aria-hidden="true"
-                    aria-labelledby="exampleModalToggleLabel2"
-                    tabindex="-1"
-                  >
-                    <div class="modal-dialog modal-dialog-centered ">
-                      <div class="modal-content">
-                        <button
-                          type="button"
-                          className="btn-close m-3 ms-auto mb-0"
-                          data-bs-dismiss="modal"
-                          aria-label="Close"
-                        ></button>
-                        <div className={` ${styles.inviteBody} `}>
-                          <h6>
-                            Send your personal page to your family and friends
-                          </h6>
-                          <div className={`${styles.links}`}>
-                            <label htmlFor="linkField">
-                              <IoLinkOutline size={26} />
-                            </label>
-
-                            <div className={`${styles.linkField}`}>
-                              <input
-                                type="text"
-                                className={`${styles.linkField}`}
-                                placeholder=""
-                                value={link}
-                                // onChange={(e) => setLink(e.target.value)}
-                                id="linkField"
-                              />
                             </div>
-                            <div
-                              className={`btn btn-primary ${styles.copy}`}
-                              onClick={copyLink}
+                          </div>
+                          <div>
+                            <button
+                              class="btn btn-dark rounded-0 w-100"
+                              data-bs-target="#exampleModalToggle"
+                              data-bs-toggle="modal"
                             >
-                              Copy
-                            </div>
+                              Back
+                            </button>
                           </div>
                         </div>
-                        <div>
-                          <button
-                            class="btn btn-dark rounded-0 w-100"
-                            data-bs-target="#exampleModalToggle"
-                            data-bs-toggle="modal"
-                          >
-                            Back
-                          </button>
-                        </div>
                       </div>
                     </div>
                   </div>
                 </div>
-              </div>
+              )}
             </div>
           </div>
           <div className={` ${styles.recipsContainer} `}>
             <div className={`  ${styles.labels}  `}>
-              <div className={` ${styles.saved} ${styles.active} `}>
-                <CiBookmark size={25} className={`${styles.icon}`} /> saved
-                recipes{" "}
+              <div
+                className={
+                  activeMeals === "saved"
+                    ? ` ${styles.saved} ${styles.activeSaved} `
+                    : `${styles.saved}`
+                }
+                onClick={() => {
+                  setActiveMeals("saved");
+                }}
+              >
+                <CiBookmark size={25} className={`${styles.icon}`} /> {savedRE}
               </div>
-              <div className={` ${styles.mine} `}>
-                <GiHotMeal size={25} className={`${styles.icon}`} /> my recipes
+              <div
+                className={
+                  activeMeals === "mine"
+                    ? ` ${styles.mine} ${styles.activeMine} `
+                    : `${styles.mine}`
+                }
+                onClick={() => {
+                  setActiveMeals("mine");
+                }}
+              >
+                <GiHotMeal size={25} className={`${styles.icon}`} /> {MyRE}
               </div>
             </div>
-            <div
-              className={`row justify-content-around align-items-center ${styles.recipsContainer} `}
-            >
-              <MealCard className=" col-12 col-lg-3" />
-              <MealCard className=" col-12 col-lg-3" />
-              <MealCard className=" col-12 col-lg-3" />
-              <MealCard className=" col-12 col-lg-3" />
-              <MealCard className=" col-12 col-lg-3" />
-              <MealCard className=" col-12 col-lg-3" />
-            </div>
+
+            {activeMeals === "saved" ? <SavedMeals /> : <MyRecips />}
           </div>
         </div>
       </div>
diff --git a/wannameal/src/pages/profile/profile.module.css b/wannameal/src/pages/profile/profile.module.css
index 3b3a5d2..2d9af76 100644
--- a/wannameal/src/pages/profile/profile.module.css
+++ b/wannameal/src/pages/profile/profile.module.css
@@ -1,6 +1,6 @@
 .portfolioContainer {
   width: 100%;
-  background-color: var(--body);
+  background-color: var(--text-white) !important ;
 }
 
 .userData {
@@ -64,6 +64,7 @@
   width: 67px;
   height: 40px;
   transition: 0.3s;
+  width: fit-content;
 }
 
 .btns .btn:hover {
@@ -82,7 +83,7 @@
 }
 
 .labels {
-  margin-top: 20px;
+  margin: 20px 0;
   border-top: 1px solid var(--text_black);
   width: 100%;
   display: flex;
@@ -91,14 +92,53 @@
   gap: 20px;
 }
 
-.labels div {
-  padding-top: 15px;
+.labels .saved,
+.labels .mine {
+  /* padding-top: 15px; */
+  padding: 15px 0 0 0;
+  cursor: pointer;
+  width: fit-content;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  text-transform: capitalize;
+  /* text-align: start; */
 }
 
-.active {
-  border-top: 2px solid var(--light-green);
+.labels .activeSaved {
+  position: relative;
+  transition: 0.3s;
 }
-.active .icon {
+.labels .activeSaved::after {
+  position: absolute;
+  content: "";
+  left: 0;
+  top: -1px;
+  width: 100%;
+  height: 2px;
+  background-color: var(--light-green);
+  z-index: 1000;
+  transform: translate(0px);
+  transition: 1s;
+}
+.labels .activeMine {
+  position: relative;
+  transition: 0.3s;
+}
+.labels .activeMine::after {
+  position: absolute;
+  content: "";
+  left: 0;
+  top: -1px;
+  width: 100%;
+  height: 2px;
+  background-color: var(--light-green);
+  z-index: 1000;
+  transform: translate(0px);
+  transition: 1s;
+}
+.labels .activeMine .icon,
+.labels .activeSaved .icon {
   color: var(--light-green);
 }
 
@@ -120,6 +160,7 @@
   height: fit-content;
   list-style-type: none;
   padding-left: 0;
+  margin: 0;
 }
 @keyframes fadeIn {
   0% {
@@ -133,6 +174,7 @@
 }
 
 .settingUl li {
+  margin: 0;
   padding: 15px;
   text-align: center;
   text-transform: capitalize;
@@ -156,6 +198,9 @@
   display: none;
 }
 
+.input input[type="checkbox"] + label {
+  color: #000 !important;
+}
 .input input[type="checkbox"]:checked + label {
   width: 100%;
   height: 100%;
@@ -168,7 +213,7 @@
   transition: 0.3s;
 }
 
-.icon {
+.checkicon {
   transition: 0.3s;
   opacity: 0;
 }
@@ -177,7 +222,7 @@
   border: 1px solid var(--green) !important;
   transform: scale(1.02);
 }
-.checked .icon {
+.checked .checkicon {
   opacity: 0.8;
   color: var(--green);
 }
@@ -192,12 +237,14 @@
 .inviteBody h6 {
   text-align: center;
   font-weight: 600;
+  color: var(--text_black);
 }
 .inviteBody .links {
   display: flex;
   justify-content: space-around;
   align-items: center;
   gap: 10px;
+  color: var(--text_black);
 }
 
 .linkField {
@@ -207,6 +254,8 @@
   padding: 4px 5px;
   border: none;
   outline: none;
+  color: var(--text_black);
+  background-color: var(--text-white);
 }
 /* .linkField:focus {
     width: 90%;
@@ -216,3 +265,9 @@
     border: none;
     outline: none;
   } */
+
+.darkModeChanges {
+  background-color: var(--text-white) !important;
+  opacity: 1;
+  color: var(--text-black) !important;
+}
diff --git a/wannameal/src/redux/slices/authSlice.jsx b/wannameal/src/redux/slices/authSlice.jsx
index d6aa7ec..8a09754 100644
--- a/wannameal/src/redux/slices/authSlice.jsx
+++ b/wannameal/src/redux/slices/authSlice.jsx
@@ -1,42 +1,56 @@
 import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
 import axios from "axios";
+import { jwtDecode } from "jwt-decode";
 
-
-export const loginUser = createAsyncThunk(
-    "auth/login",
-    async (user) => {
-        try {
-            const response = await axios.post("https://fast-plat1.vercel.app/auth/login", user);
-            return response.data;
-        } catch (error) {
-            throw error.response.data;
-        }
-    }
-);
+export const loginUser = createAsyncThunk("auth/login", async (user) => {
+  try {
+    const response = await axios.post(
+      "https://fast-plat1.vercel.app/auth/login?lang=en",
+      user
+    );
+    return response.data;
+  } catch (error) {
+    throw error.response.data;
+  }
+});
 
 const authSlice = createSlice({
-    name: "auth",
-    initialState: {
-        user: null,
-        loading: false,
-        error: null,
-    },
-    reducers: {},
-    extraReducers: (builder) => {
-        builder
-            .addCase(loginUser.pending, (state) => {
-                state.loading = true;
-                state.error = null;
-            })
-            .addCase(loginUser.fulfilled, (state, action) => {
-                state.loading = false;
-                state.user = action.payload;
-            })
-            .addCase(loginUser.rejected, (state, action) => {
-                state.loading = false;
-                state.error = action.payload;
-            });
+  name: "auth",
+  initialState: {
+    user: JSON.parse(localStorage.getItem("user") || null),
+    decodedToken: localStorage.getItem("user")
+      ? jwtDecode(JSON.parse(localStorage.getItem("user"))?.token)
+      : "",
+
+    loading: false,
+    error: null,
+  },
+  reducers: {
+    logout(state, action) {
+      state.user = null;
+      localStorage.removeItem("user");
     },
+  },
+  extraReducers: (builder) => {
+    builder
+      .addCase(loginUser.pending, (state) => {
+        state.loading = true;
+        state.error = null;
+      })
+      .addCase(loginUser.fulfilled, (state, action) => {
+        state.loading = false;
+        state.user = action.payload;
+        localStorage.setItem("user", JSON.stringify(state.user));
+      })
+      .addCase(loginUser.rejected, (state, action) => {
+        state.loading = false;
+        state.error = action.payload;
+      });
+  },
 });
 
-export default authSlice.reducer;
\ No newline at end of file
+export const getuser = (state) => state.auth.user;
+export const getDecodedToken = (state) => state.auth.decodedToken;
+export const { logout } = authSlice.actions;
+
+export default authSlice.reducer;
diff --git a/wannameal/src/redux/slices/communityUserSlice.jsx b/wannameal/src/redux/slices/communityUserSlice.jsx
new file mode 100644
index 0000000..ca9e297
--- /dev/null
+++ b/wannameal/src/redux/slices/communityUserSlice.jsx
@@ -0,0 +1,206 @@
+import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
+import axios from "axios";
+
+const initialState = {
+  profile: null,
+  updatedProfile: null,
+  suggestedUsers: [],
+  followingUsers: [],
+  follow: null,
+  status: "idle",
+  error: null,
+};
+
+export const getProfileById = createAsyncThunk(
+  "communityUser/getProfileById",
+  async ({ userId, token, lang }, { rejectWithValue }) => {
+    try {
+      const response = await axios.get(
+        `https://fast-plat1.vercel.app/auth/profile/${userId}?lang=${lang}`,
+        {
+          headers: {
+            token: token,
+          },
+        }
+      );
+      return response.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+      return rejectWithValue(error.response.data);
+    }
+  }
+);
+
+export const updateProfile = createAsyncThunk(
+  "communityUser/updateProfile",
+  async ({ formData, token, userId }, { rejectWithValue }) => {
+    try {
+      const response = await axios.put(
+        `https://fast-plat1.vercel.app/auth/update/${userId}`,
+        formData,
+        {
+          headers: {
+            token: `${token}`,
+            "Content-Type": "multipart/form-data",
+          },
+        }
+      );
+      return response.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+      return rejectWithValue(error.response.data);
+    }
+  }
+);
+
+export const followUser = createAsyncThunk(
+  "communityUser/followUser",
+  async ({ userId, token, lang }, { rejectWithValue }) => {
+    try {
+      const response = await axios.post(
+        `https://fast-plat1.vercel.app/auth/follow/${userId}?lang=${lang}`,
+
+        {},
+        {
+          headers: {
+            token: token,
+          },
+        }
+      );
+      return response.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+      return rejectWithValue(error.response.data);
+    }
+  }
+);
+
+export const fetchFollowingUsers = createAsyncThunk(
+  "communityUser/fetchFollowingUsers",
+  async ({ token, lang, page }, { rejectWithValue }) => {
+    try {
+      const response = await axios.get(
+        `https://fast-plat1.vercel.app/auth/following?page=${page}`,
+        {
+          headers: {
+            token: token,
+          },
+        }
+      );
+      return response.data.following.following;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+      return rejectWithValue(error.response.data);
+    }
+  }
+);
+export const fetchSuggestedUsers = createAsyncThunk(
+  "communityUser/fetchSuggestedUsers",
+  async ({ token, lang }, { rejectWithValue }) => {
+    try {
+      const response = await axios.get(
+        `https://fast-plat1.vercel.app/auth/suggested?lang=${lang}`,
+        {
+          headers: {
+            token: token,
+          },
+        }
+      );
+      return response.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+      return rejectWithValue(error.response.data);
+    }
+  }
+);
+
+const communityUserSlice = createSlice({
+  name: "communityUser",
+  initialState,
+  reducers: {},
+  extraReducers: (builder) => {
+    builder
+      // Get Profile by ID
+      .addCase(getProfileById.pending, (state) => {
+        state.status = "loading";
+      })
+      .addCase(getProfileById.fulfilled, (state, action) => {
+        state.status = "succeeded";
+        state.profile = action.payload;
+        state.error = null;
+      })
+      .addCase(getProfileById.rejected, (state, action) => {
+        state.status = "failed";
+        state.error = action.payload || action.error.message;
+      })
+      // update Profile by ID
+      .addCase(updateProfile.pending, (state) => {
+        state.status = "loading";
+      })
+      .addCase(updateProfile.fulfilled, (state, action) => {
+        state.status = "succeeded";
+        state.updatedProfile = action.payload;
+        state.error = null;
+      })
+      .addCase(updateProfile.rejected, (state, action) => {
+        state.status = "failed";
+        state.error = action.payload || action.error.message;
+      })
+      // Follow User
+      .addCase(followUser.pending, (state) => {
+        state.status = "loading";
+      })
+      .addCase(followUser.fulfilled, (state, action) => {
+        state.status = "succeeded";
+        state.follow = action.payload;
+        state.error = null;
+      })
+      .addCase(followUser.rejected, (state, action) => {
+        state.status = "failed";
+        state.error = action.payload || action.error.message;
+      })
+      // Get Suggested Users
+      .addCase(fetchSuggestedUsers.pending, (state) => {
+        state.status = "loading";
+      })
+      .addCase(fetchSuggestedUsers.fulfilled, (state, action) => {
+        state.status = "succeeded";
+        state.suggestedUsers = action.payload;
+        state.error = null;
+      })
+      .addCase(fetchSuggestedUsers.rejected, (state, action) => {
+        state.status = "failed";
+        state.error = action.payload || action.error.message;
+      })
+      // Get Following Users
+      .addCase(fetchFollowingUsers.pending, (state) => {
+        state.status = "loading";
+      })
+      .addCase(fetchFollowingUsers.fulfilled, (state, action) => {
+        state.status = "succeeded";
+        state.followingUsers = action.payload;
+        state.error = null;
+      })
+      .addCase(fetchFollowingUsers.rejected, (state, action) => {
+        state.status = "failed";
+        state.error = action.payload || action.error.message;
+      });
+  },
+});
+
+export const getProfile = (state) => state.communityUser.profile;
+export const getSuggestedUsers = (state) => state.communityUser.suggestedUsers;
+export const getFollowingUsers = (state) => state.communityUser.followingUsers;
+export const getupdatedProfile = (state) => state.communityUser.updatedProfile;
+
+export default communityUserSlice.reducer;
diff --git a/wannameal/src/redux/slices/dashmeals.jsx b/wannameal/src/redux/slices/dashmeals.jsx
new file mode 100644
index 0000000..c40f6f2
--- /dev/null
+++ b/wannameal/src/redux/slices/dashmeals.jsx
@@ -0,0 +1,43 @@
+import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+
+const baseUrl = 'https://fast-plat1.vercel.app';
+
+// Create an async thunk for fetching meals with try-catch for error handling
+export const fetchMeals = createAsyncThunk('meals/fetchMeals', async (_, { rejectWithValue }) => {
+    try {
+        const response = await axios.get(`${baseUrl}/meals`)
+        return response.data.result;
+    } catch (error) {
+        return rejectWithValue(error.message);
+    }
+});
+
+// Create the slice
+const mealsSlice = createSlice({
+    name: 'meals',
+    initialState: {
+        meals: [],
+        loading: false,
+        error: null,
+    },
+    reducers: {},
+    extraReducers: (builder) => {
+        builder
+            .addCase(fetchMeals.pending, (state) => {
+                state.loading = true;
+                state.error = null;
+            })
+            .addCase(fetchMeals.fulfilled, (state, action) => {
+                state.loading = false;
+                state.meals = action.payload;
+                console.log(action.payload);
+            })
+            .addCase(fetchMeals.rejected, (state, action) => {
+                state.loading = false;
+                state.error = action.payload;
+            });
+    },
+});
+
+export default mealsSlice.reducer;
diff --git a/wannameal/src/redux/slices/dashusers.jsx b/wannameal/src/redux/slices/dashusers.jsx
new file mode 100644
index 0000000..84677db
--- /dev/null
+++ b/wannameal/src/redux/slices/dashusers.jsx
@@ -0,0 +1,43 @@
+import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
+
+// Define the initial state
+const initialState = {
+    users: [],
+    status: 'idle', // 'idle' | 'loading' | 'succeeded' | 'failed'
+    error: null,
+};
+
+// Create an async thunk for fetching users
+export const fetchUsers = createAsyncThunk('users/fetchUsers', async () => {
+    const response = await fetch('https://fast-plat1.vercel.app/users', {
+        headers: {
+            'token': 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjY2N2M5ZjUyODg0NzNhZjBhMWY0ZTI0YSIsImVtYWlsIjoiYW1sZ2FtYWwxMDNAZ21haWwuY29tIiwiaWF0IjoxNzE5NDQzNDg5fQ.NAoaGb61PNvQxWNHaMINqHTxZaGaTZVd5qMPBfjuvok'
+        }
+    });
+    const data = await response.json();
+    return data;
+});
+
+// Create the user slice
+const userSlice = createSlice({
+    name: 'users',
+    initialState,
+    reducers: {},
+    extraReducers: (builder) => {
+        builder
+            .addCase(fetchUsers.pending, (state) => {
+                state.status = 'loading';
+            })
+            .addCase(fetchUsers.fulfilled, (state, action) => {
+                state.status = 'succeeded';
+                state.users = action.payload;
+                console.log(action.payload);
+            })
+            .addCase(fetchUsers.rejected, (state, action) => {
+                state.status = 'failed';
+                state.error = action.error.message || 'Something went wrong';
+            });
+    },
+});
+
+export default userSlice.reducer;
diff --git a/wannameal/src/redux/slices/ingredients.jsx b/wannameal/src/redux/slices/ingredients.jsx
new file mode 100644
index 0000000..1b78dd4
--- /dev/null
+++ b/wannameal/src/redux/slices/ingredients.jsx
@@ -0,0 +1,57 @@
+import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
+import axios from "axios";
+
+const initialState = {
+  ingredients: [],
+  status: "idle",
+  error: null,
+};
+
+export const fetchIngredients = createAsyncThunk(
+  "ingredients/fetchIngredients",
+  async ({ token, lang }, { rejectWithValue }) => {
+    try {
+      const response = await axios.get(
+        `https://fast-plat1.vercel.app/Ingredients/getAll?lang=${lang}`,
+        {
+          headers: {
+            token: `${token}`,
+            "Content-Type": "application/json",
+            Accept: "*/*",
+          },
+        }
+      );
+      return response.data.data; // Assuming the response has a field called `ingredients`
+    } catch (error) {
+      console.error("Error fetching ingredients:", error.message);
+      return rejectWithValue(error.message);
+    }
+  }
+);
+
+const ingredientsSlice = createSlice({
+  name: "ingredients",
+  initialState,
+  reducers: {},
+  extraReducers: (builder) => {
+    builder
+      .addCase(fetchIngredients.pending, (state) => {
+        state.status = "loading";
+        state.error = null;
+      })
+      .addCase(fetchIngredients.fulfilled, (state, action) => {
+        state.ingredients = action.payload;
+        state.status = "succeeded";
+      })
+      .addCase(fetchIngredients.rejected, (state, action) => {
+        state.status = "failed";
+        state.error = action.payload;
+      });
+  },
+});
+
+export const getIngredients = (state) => state.ingredients.ingredients;
+export const getIngredientsStatus = (state) => state.ingredients.status;
+export const getIngredientsError = (state) => state.ingredients.error;
+
+export default ingredientsSlice.reducer;
diff --git a/wannameal/src/redux/slices/language.jsx b/wannameal/src/redux/slices/language.jsx
new file mode 100644
index 0000000..8485505
--- /dev/null
+++ b/wannameal/src/redux/slices/language.jsx
@@ -0,0 +1,22 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const initialState = {
+  language: "en",
+};
+
+const languageSlice = createSlice({
+  name: "language",
+  initialState,
+  reducers: {
+    switchToEnglish: (state) => {
+      state.language = "en";
+    },
+    switchToArabic: (state) => {
+      state.language = "ar";
+    },
+  },
+});
+
+export const { switchToEnglish, switchToArabic } = languageSlice.actions;
+export const getLanguage = (state) => state.language.language;
+export default languageSlice.reducer;
diff --git a/wannameal/src/redux/slices/postsSLlce.jsx b/wannameal/src/redux/slices/postsSLlce.jsx
new file mode 100644
index 0000000..2a54c35
--- /dev/null
+++ b/wannameal/src/redux/slices/postsSLlce.jsx
@@ -0,0 +1,229 @@
+import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
+import axios from "axios";
+
+// Define the initial state of the slice
+const initialState = {
+  posts: [],
+  comments: null,
+  singlePost: null,
+  feedPosts: [], // New property for feed posts
+  randomPosts: [], // New property for random posts
+  like: null,
+  status: "idle",
+  error: null,
+};
+
+export const createPost = createAsyncThunk(
+  "posts/createPost",
+  async ({ formData, token }, { rejectWithValue }) => {
+    try {
+      const response = await axios.post(
+        "https://fast-plat1.vercel.app/post/create",
+        formData,
+        {
+          headers: {
+            token: token,
+            "Content-Type": "multipart/form-data",
+          },
+        }
+      );
+      return response.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+      return rejectWithValue(error.response.data);
+    }
+  }
+);
+
+export const fetchPost = createAsyncThunk(
+  "posts/fetchPost",
+  async ({ token, postId }, { rejectWithValue }) => {
+    try {
+      const response = await axios.get(
+        `https://fast-plat1.vercel.app/post/${postId}`,
+        {
+          headers: {
+            token: token,
+          },
+        }
+      );
+      return response.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+      return rejectWithValue(error.response.data);
+    }
+  }
+);
+
+export const likePost = createAsyncThunk(
+  "posts/likePost",
+  async ({ token, postId }, { rejectWithValue }) => {
+    try {
+      const response = await axios.put(
+        `https://fast-plat1.vercel.app/post/like/${postId}`,
+        {},
+        {
+          headers: {
+            token: token,
+          },
+        }
+      );
+      return response.data; // Ensure to return response data
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+      return rejectWithValue(error.response.data);
+    }
+  }
+);
+
+export const commentPost = createAsyncThunk(
+  "posts/commentPost",
+  async ({ postId, text, token }, { rejectWithValue }) => {
+    try {
+      const response = await axios.put(
+        `https://fast-plat1.vercel.app/post/reply/${postId}`,
+        { text },
+        {
+          headers: {
+            token: token,
+            "Content-Type": "application/json",
+          },
+        }
+      );
+      return response.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+      return rejectWithValue(error.response.data);
+    }
+  }
+);
+
+export const fetchRandomPosts = createAsyncThunk(
+  "posts/fetchRandomPosts",
+  async ({ token, lang }, { rejectWithValue }) => {
+    try {
+      const response = await axios.get("https://fast-plat1.vercel.app/post");
+      return response.data.posts;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+      return rejectWithValue(error.response.data);
+    }
+  }
+);
+
+export const fetchFeedPosts = createAsyncThunk(
+  "posts/fetchFeedPosts",
+  async ({ token, lang }, { rejectWithValue }) => {
+    try {
+      const response = await axios.get(
+        `https://fast-plat1.vercel.app/post/feed`,
+        {
+          headers: {
+            token: token,
+          },
+        }
+      );
+      return response.data.feedPosts;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+      return rejectWithValue(error.response.data);
+    }
+  }
+);
+
+const postsSlice = createSlice({
+  name: "posts",
+  initialState,
+  reducers: {},
+  extraReducers: (builder) => {
+    builder
+      .addCase(createPost.pending, (state) => {
+        state.status = "loading";
+      })
+      .addCase(createPost.fulfilled, (state, action) => {
+        state.status = "succeeded";
+        state.error = null;
+        state.posts.push(action.payload);
+      })
+      .addCase(createPost.rejected, (state, action) => {
+        state.status = "failed";
+        state.error = action.payload ? action.payload : action.error.message;
+      })
+      .addCase(commentPost.pending, (state) => {
+        state.status = "loading";
+      })
+      .addCase(commentPost.fulfilled, (state, action) => {
+        state.status = "succeeded";
+        state.error = null;
+        state.comments = action.payload;
+      })
+      .addCase(commentPost.rejected, (state, action) => {
+        state.status = "failed";
+        state.error = action.payload ? action.payload : action.error.message;
+      })
+      .addCase(likePost.fulfilled, (state, action) => {
+        state.status = "succeeded";
+        state.error = null;
+        state.like = action.payload;
+      })
+
+      .addCase(fetchPost.pending, (state) => {
+        state.status = "loading";
+      })
+      .addCase(fetchPost.fulfilled, (state, action) => {
+        state.status = "succeeded";
+        state.error = null;
+        state.singlePost = action.payload;
+      })
+      .addCase(fetchPost.rejected, (state, action) => {
+        state.status = "failed";
+        state.error = action.payload ? action.payload : action.error.message;
+      })
+      .addCase(fetchRandomPosts.pending, (state) => {
+        state.status = "loading";
+      })
+      .addCase(fetchRandomPosts.fulfilled, (state, action) => {
+        state.status = "succeeded";
+        state.error = null;
+        state.randomPosts = action.payload;
+      })
+      .addCase(fetchRandomPosts.rejected, (state, action) => {
+        state.status = "failed";
+        state.error = action.payload ? action.payload : action.error.message;
+      })
+      .addCase(fetchFeedPosts.pending, (state) => {
+        state.status = "loading";
+      })
+      .addCase(fetchFeedPosts.fulfilled, (state, action) => {
+        state.status = "succeeded";
+        state.error = null;
+        state.feedPosts = action.payload;
+      })
+      .addCase(fetchFeedPosts.rejected, (state, action) => {
+        state.status = "failed";
+        state.error = action.payload ? action.payload : action.error.message;
+      });
+  },
+});
+
+export const getCreatedPosts = (state) => state.posts.posts;
+export const getFeedPosts = (state) => state.posts.feedPosts;
+export const getRandomPosts = (state) => state.posts.randomPosts;
+export const getPostError = (state) => state.posts.error;
+export const getPostStatus = (state) => state.posts.status;
+export const getlikkk = (state) => state.posts.like;
+export const getCommentState = (state) => state.posts.comments;
+
+export default postsSlice.reducer;
diff --git a/wannameal/src/redux/slices/recomendedMealsSlice.jsx b/wannameal/src/redux/slices/recomendedMealsSlice.jsx
new file mode 100644
index 0000000..158cea1
--- /dev/null
+++ b/wannameal/src/redux/slices/recomendedMealsSlice.jsx
@@ -0,0 +1,225 @@
+import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
+import axios from "axios";
+
+const initialState = {
+  recomendedMeals: [],
+  singleMeal: [],
+  savedMeals: [],
+  myRecipes: [],
+  commonMeals: [],
+  savedMeal: null,
+  status: "idle",
+  error: null,
+};
+
+export const recommendMeals = createAsyncThunk(
+  "meals/recommendMeals",
+  async ({ ingredients, lang, token }, { rejectWithValue }) => {
+    try {
+      console.log("Sending request to API with params:", {
+        lang: lang,
+        ingredients: ingredients,
+      });
+
+      const response = await axios.get(
+        `https://tesst11.azurewebsites.net/meals/recommendMeal?lang=${lang}&ingredients=${ingredients}`,
+        {
+          headers: {
+            "Content-Type": "application/json",
+            token: token,
+          },
+        }
+      );
+      return response.data.Recommendation;
+    } catch (error) {
+      return rejectWithValue(error.message);
+    }
+  }
+);
+
+// export const recommendMeals = createAsyncThunk(
+//   "meals/recommendMeals",
+//   async ({ ingredients, lang,token }, { rejectWithValue }) => {
+//     try {
+//       const response = await fetch(
+//         `https://tesst11.azurewebsites.net/meals/recommendMeal?lang=${lang}&ingredients=${JSON.stringify(ingredients)}`,
+//         {
+//           method: 'GET',
+//           headers: {
+//            token: token,
+//             'Content-Type': 'application/json'
+//           }
+//         }
+//       );
+//       const data = await response.json(); // Parse response body as JSON
+//       console.log("Response from API:", data);
+//       return data; // Assuming Recommendation is in the response
+//     } catch (error) {
+//       console.error("Error from API:", error.message);
+//       return rejectWithValue(error.message);
+//     }
+//   }
+// );
+
+export const fetchSingleMeal = createAsyncThunk(
+  "meals/fetchSingleMeal",
+  async (productId) => {
+    const res = await fetch(`https://dummyjson.com/products/${productId}`);
+    const data = await res.json();
+    return data;
+  }
+);
+
+export const fetchSavedMeals = createAsyncThunk(
+  "meals/fetchSavedMeals",
+  async ({ userId }, { rejectWithValue }) => {
+    try {
+      const response = await axios.get(
+        `https://fast-plat1.vercel.app/meals?isSaved=true&id=${userId}`
+      );
+      return response.data.result;
+    } catch (error) {
+      return rejectWithValue(error.message);
+    }
+  }
+);
+export const fetchMyRecipes = createAsyncThunk(
+  "meals/fetchMyRecipes",
+  async ({ userId, lang }, { rejectWithValue }) => {
+    try {
+      const response = await axios.get(
+        `https://fast-plat1.vercel.app/meals?user=${userId}`
+      );
+      return response.data.result;
+    } catch (error) {
+      return rejectWithValue(error.message);
+    }
+  }
+);
+
+export const saveMeal = createAsyncThunk(
+  "meals/saveMeal",
+  async ({ mealData, token, mealId }, { rejectWithValue }) => {
+    try {
+      const response = await axios.post(
+        `https://fast-plat1.vercel.app/meals/isSaved?id=${mealId}`,
+        mealData,
+        {
+          headers: {
+            token: token,
+            "Content-Type": "application/json",
+          },
+        }
+      );
+      return response;
+    } catch (error) {
+      return rejectWithValue(error.message);
+    }
+  }
+);
+
+export const fetchCommonMeals = createAsyncThunk(
+  "meals/fetchCommonMeals",
+  async ({ token, lang }, { rejectWithValue }) => {
+    try {
+      const response = await axios.get(
+        `https://tesst11.azurewebsites.net/meals/common-meals?lang=${lang}`,
+        {
+          headers: {
+            token: `${token}`,
+          },
+        }
+      );
+      return response.data;
+    } catch (error) {
+      return rejectWithValue(error.message);
+    }
+  }
+);
+const mealsSlice = createSlice({
+  name: "meals",
+  initialState,
+  reducers: {},
+  extraReducers: (builder) => {
+    builder
+      .addCase(recommendMeals.pending, (state) => {
+        state.status = "loading";
+        state.error = null;
+      })
+      .addCase(recommendMeals.fulfilled, (state, action) => {
+        state.recomendedMeals = action.payload;
+        state.status = "succeeded";
+      })
+      .addCase(recommendMeals.rejected, (state, action) => {
+        state.status = "failed";
+        state.error = action.payload;
+      })
+      .addCase(fetchSingleMeal.pending, (state) => {
+        state.status = "loading";
+        state.error = null;
+      })
+      .addCase(fetchSingleMeal.fulfilled, (state, action) => {
+        state.singleMeal = action.payload;
+        state.status = "succeeded";
+      })
+      .addCase(fetchSingleMeal.rejected, (state, action) => {
+        state.status = "failed";
+        state.error = action.payload;
+      })
+      .addCase(fetchSavedMeals.pending, (state) => {
+        state.status = "loading";
+        state.error = null;
+      })
+      .addCase(fetchSavedMeals.fulfilled, (state, action) => {
+        state.savedMeals = action.payload;
+        state.status = "succeeded";
+      })
+      .addCase(fetchSavedMeals.rejected, (state, action) => {
+        state.status = "failed";
+        state.error = action.payload;
+      })
+      .addCase(fetchMyRecipes.pending, (state) => {
+        state.status = "loading";
+        state.error = null;
+      })
+      .addCase(fetchMyRecipes.fulfilled, (state, action) => {
+        state.myRecipes = action.payload;
+        state.status = "succeeded";
+      })
+      .addCase(fetchMyRecipes.rejected, (state, action) => {
+        state.status = "failed";
+        state.error = action.payload;
+      })
+      .addCase(fetchCommonMeals.pending, (state) => {
+        state.status = "loading";
+        state.error = null;
+      })
+      .addCase(fetchCommonMeals.fulfilled, (state, action) => {
+        state.commonMeals = action.payload;
+        state.status = "succeeded";
+      })
+      .addCase(fetchCommonMeals.rejected, (state, action) => {
+        state.status = "failed";
+        state.error = action.payload;
+      })
+      .addCase(saveMeal.fulfilled, (state, action) => {
+        state.savedMeal = action.payload;
+        state.status = "succeededddd";
+      })
+      .addCase(saveMeal.rejected, (state, action) => {
+        state.savedMeal = action.payload;
+        // state.status = "rejected";
+      });
+  },
+});
+
+export const getRecommendMeals = (state) => state.meals.recomendedMeals;
+export const getSingleMeal = (state) => state.meals.singleMeal;
+export const getSavedMeals = (state) => state.meals.savedMeals;
+export const getMyRecipes = (state) => state.meals.myRecipes;
+export const getCommonMeals = (state) => state.meals.commonMeals;
+export const getsSavedMeal = (state) => state.meals.savedMeal;
+export const getMealsStatus = (state) => state.meals.status;
+export const getMealsError = (state) => state.meals.error;
+
+export default mealsSlice.reducer;
diff --git a/wannameal/src/redux/slices/registerSlice.jsx b/wannameal/src/redux/slices/registerSlice.jsx
index 7c26820..c49b9ef 100644
--- a/wannameal/src/redux/slices/registerSlice.jsx
+++ b/wannameal/src/redux/slices/registerSlice.jsx
@@ -6,7 +6,7 @@ export const registerUser = createAsyncThunk(
     "auth/register",
     async (userData) => {
         try {
-            const response = await axios.post("https://fast-plat1.vercel.app/auth/register", userData)
+            const response = await axios.post("https://fast-plat1.vercel.app/auth/register?lang=en", userData)
             return response.data;
         } catch (error) {
             throw error.response.data;
@@ -31,6 +31,7 @@ const signupSlice = createSlice({
             .addCase(registerUser.fulfilled, (state, action) => {
                 state.loading = false;
                 state.user = action.payload;
+                console.log(action.payload);
             })
             .addCase(registerUser.rejected, (state, action) => {
                 state.loading = false;
diff --git a/wannameal/src/redux/slices/systemModeSlice.jsx b/wannameal/src/redux/slices/systemModeSlice.jsx
new file mode 100644
index 0000000..fe089a6
--- /dev/null
+++ b/wannameal/src/redux/slices/systemModeSlice.jsx
@@ -0,0 +1,35 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const loadTheme = () => {
+  try {
+    const savedTheme = localStorage.getItem("theme");
+    return savedTheme ? JSON.parse(savedTheme) : "dark";
+  } catch (err) {
+    return "light";
+  }
+};
+
+const saveTheme = (theme) => {
+  try {
+    localStorage.setItem("theme", JSON.stringify(theme));
+  } catch (err) {}
+};
+
+const initialState = {
+  theme: loadTheme(),
+};
+
+const themeSlice = createSlice({
+  name: "theme",
+  initialState,
+  reducers: {
+    toggleTheme: (state) => {
+      state.theme = state.theme === "light" ? "dark" : "light";
+      saveTheme(state.theme);
+    },
+  },
+});
+
+export const { toggleTheme } = themeSlice.actions;
+export const getTheme = (state) => state.theme.theme;
+export default themeSlice.reducer;
diff --git a/wannameal/src/redux/slices/userSLice.jsx b/wannameal/src/redux/slices/userSLice.jsx
new file mode 100644
index 0000000..cdb5a31
--- /dev/null
+++ b/wannameal/src/redux/slices/userSLice.jsx
@@ -0,0 +1,133 @@
+import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
+import axios from "axios";
+
+const initialState = {
+  user: null,
+  updatedUser: null,
+  status: "idle",
+  error: null,
+};
+
+export const fetchUser = createAsyncThunk(
+  "user/fetchUser",
+  async ({ token }, { rejectWithValue }) => {
+    try {
+      const response = await axios.get(
+        `https://fast-plat1.vercel.app/users/getMe`,
+        {
+          headers: {
+            token: `${token}`,
+          },
+        }
+      );
+      return response.data.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+      return rejectWithValue(error.response.data);
+    }
+  }
+);
+
+export const updateUser = createAsyncThunk(
+  "user/updateUser",
+  async ({ token, formData }, { rejectWithValue }) => {
+    try {
+      const response = await axios.put(
+        `https://fast-plat1.vercel.app/users/updateme`,
+        formData,
+        {
+          headers: {
+            token: `${token}`,
+            "Content-Type": "multipart/form-data",
+          },
+        }
+      );
+      return response.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+      return rejectWithValue(error.response.data);
+    }
+  }
+);
+
+export const deleteAccount = createAsyncThunk(
+  "user/deleteAccount",
+  async ({ userId, token }, { rejectWithValue }) => {
+    try {
+      const response = await axios.delete(
+        `https://fast-plat1.vercel.app/users/${userId}`,
+        {
+          headers: {
+            token: `${token}`,
+          },
+        }
+      );
+      return response.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+      return rejectWithValue(error.response.data);
+    }
+  }
+);
+
+const userSlice = createSlice({
+  name: "user",
+  initialState,
+  reducers: {},
+  extraReducers: (builder) => {
+    builder
+      // Fetch User
+      .addCase(fetchUser.pending, (state) => {
+        state.status = "loading";
+      })
+      .addCase(fetchUser.fulfilled, (state, action) => {
+        state.status = "succeeded";
+        state.user = action.payload;
+        state.error = null;
+      })
+      .addCase(fetchUser.rejected, (state, action) => {
+        state.status = "failed";
+        state.error = action.payload || action.error.message;
+      })
+      // Update User
+      .addCase(updateUser.pending, (state) => {
+        state.status = "loading";
+      })
+      .addCase(updateUser.fulfilled, (state, action) => {
+        state.status = "succeeded";
+        state.updatedUser = action.payload;
+        state.error = null;
+      })
+      .addCase(updateUser.rejected, (state, action) => {
+        state.status = "failed";
+        state.error = action.payload || action.error;
+      })
+      // Delete Account
+      .addCase(deleteAccount.pending, (state) => {
+        state.status = "loading";
+      })
+      .addCase(deleteAccount.fulfilled, (state, action) => {
+        state.status = "succeeded";
+        state.user = null;
+        state.updatedUser = null;
+        state.error = null;
+      })
+      .addCase(deleteAccount.rejected, (state, action) => {
+        state.status = "failed";
+        state.error = action.payload || action.error.message;
+      });
+  },
+});
+
+export const getLoggoedUser = (state) => state.user.user;
+export const getUpdatedUser = (state) => state.user.updatedUser;
+export const userSatus = (state) => state.user.status;
+export const userError = (state) => state.user.error;
+
+export default userSlice.reducer;
diff --git a/wannameal/src/redux/store.jsx b/wannameal/src/redux/store.jsx
index 1f8fc97..0b975a8 100644
--- a/wannameal/src/redux/store.jsx
+++ b/wannameal/src/redux/store.jsx
@@ -1,12 +1,30 @@
 import { configureStore } from "@reduxjs/toolkit";
 import authSlice from "./slices/authSlice";
 import registerSlice from "./slices/registerSlice";
+import recomendedMealsSlice from "./slices/recomendedMealsSlice";
+import postsSlice from "./slices/postsSLlce";
+import communityUserSlice from "./slices/communityUserSlice";
+import language from "./slices/language";
+import themeSlice from "./slices/systemModeSlice";
+import ingredientsReducer from "./slices/ingredients";
+import userReducer from "./slices/userSLice";
 
+import dashusers from "./slices/dashusers";
+import dashmeals from "./slices/dashmeals";
 const store = configureStore({
-    reducer: {
-        auth: authSlice,
-        signup: registerSlice,
-    },
+  reducer: {
+    auth: authSlice,
+    signup: registerSlice,
+    meals: recomendedMealsSlice,
+    posts: postsSlice,
+    communityUser: communityUserSlice,
+    language: language,
+    theme: themeSlice,
+    ingredients: ingredientsReducer,
+    user: userReducer,
+    dashmeals: dashmeals,
+    users: dashusers
+  },
 });
 
-export default store;
\ No newline at end of file
+export default store;