diff --git a/package-lock.json b/package-lock.json
index 15682a6..9e8a1ca 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "mockman-js": "^1.1.5",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-helmet-async": "^1.3.0",
         "react-icons": "^4.8.0",
         "react-router": "^6.11.2",
         "react-router-dom": "^6.11.2",
@@ -8569,6 +8570,14 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/ipaddr.js": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.0.1.tgz",
@@ -14122,6 +14131,27 @@
       "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-async": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/react-helmet-async/-/react-helmet-async-1.3.0.tgz",
+      "integrity": "sha512-9jZ57/dAn9t3q6hneQS0wukqC2ENOBgMNVEhb/ZG9ZSxUetzVIw4iAmEU38IaVg3QGYauQPhSeUTuIUtFglWpg==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "invariant": "^2.2.4",
+        "prop-types": "^15.7.2",
+        "react-fast-compare": "^3.2.0",
+        "shallowequal": "^1.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.6.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.6.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-icons": {
       "version": "4.8.0",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.8.0.tgz",
@@ -14999,6 +15029,11 @@
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
       "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
     },
+    "node_modules/shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -23284,6 +23319,14 @@
         "side-channel": "^1.0.4"
       }
     },
+    "invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "ipaddr.js": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.0.1.tgz",
@@ -27167,6 +27210,23 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "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=="
+    },
+    "react-helmet-async": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/react-helmet-async/-/react-helmet-async-1.3.0.tgz",
+      "integrity": "sha512-9jZ57/dAn9t3q6hneQS0wukqC2ENOBgMNVEhb/ZG9ZSxUetzVIw4iAmEU38IaVg3QGYauQPhSeUTuIUtFglWpg==",
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "invariant": "^2.2.4",
+        "prop-types": "^15.7.2",
+        "react-fast-compare": "^3.2.0",
+        "shallowequal": "^1.1.0"
+      }
+    },
     "react-icons": {
       "version": "4.8.0",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.8.0.tgz",
@@ -27800,6 +27860,11 @@
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
       "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
     },
+    "shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+    },
     "shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
diff --git a/package.json b/package.json
index e508a72..f1d0d78 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "mockman-js": "^1.1.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-helmet-async": "^1.3.0",
     "react-icons": "^4.8.0",
     "react-router": "^6.11.2",
     "react-router-dom": "^6.11.2",
diff --git a/src/App.jsx b/src/App.jsx
index 31818a0..ef39bd3 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -3,14 +3,17 @@ import "react-toastify/dist/ReactToastify.css";
 import { Index as Route } from "./routes/index";
 import "./custom.styles.css";
 import { ToastContainer } from "react-toastify";
+import { HelmetProvider } from "react-helmet-async";
 
 const App = () => {
+  const helmetContext = {};
   return (
     <>
-      <ToastContainer hideProgressBar theme="dark" autoClose={2000} />
-      <Route />
+      <HelmetProvider context={helmetContext}>
+        <ToastContainer hideProgressBar theme="dark" autoClose={2000} />
+        <Route />
+      </HelmetProvider>
     </>
   );
 };
-
 export default App;
diff --git a/src/pages/Cart.jsx b/src/pages/Cart.jsx
index 7c4355b..3fa5e39 100644
--- a/src/pages/Cart.jsx
+++ b/src/pages/Cart.jsx
@@ -4,6 +4,7 @@ import { useCartContext } from "../contexts";
 import { CartItemCard } from "../components";
 import CartTotalCard from "../components/cart/CartTotalCard";
 import { useNavigate } from "react-router";
+import { Helmet } from "react-helmet-async";
 
 const Cart = () => {
   const { cart } = useCartContext();
@@ -11,8 +12,12 @@ const Cart = () => {
 
   return (
     <div className="py-2 ">
+      <Helmet>
+        <title>Cart | eyesome</title>
+        <meta name="description" content="Login page eyesome" />
+      </Helmet>
       {cart.length > 0 && (
-        <h1 className="text-2xl font-bold p-3 ">Bag({cart.length})</h1>
+        <h1 className="text-2xl font-bold p-3 ">Bag({cart.length})</h1> 
       )}
       {cart.length ? (
         <div className="md:grid md:grid-cols-3 gap-5">
diff --git a/src/pages/Checkout.jsx b/src/pages/Checkout.jsx
index 02fe598..3070b9e 100644
--- a/src/pages/Checkout.jsx
+++ b/src/pages/Checkout.jsx
@@ -4,6 +4,7 @@ import Address from "../components/address/Address";
 import { useLocation, useNavigate } from "react-router";
 import Modal from "../components/checkout/Modal";
 import { useCartContext } from "../contexts";
+import { Helmet } from "react-helmet-async";
 
 const Checkout = () => {
   const navigate = useNavigate();
@@ -20,6 +21,10 @@ const Checkout = () => {
 
   return (
     <>
+      <Helmet>
+        <title>Checkout | eyesome</title>
+        <meta name="description" content="" />
+      </Helmet>
       <div className="md:min-h-[80vh] flex justify-center items-center py-3">
         <main className="grid md:grid-cols-2 gap-10 w-full">
           <Modal
diff --git a/src/pages/ErrorPage.jsx b/src/pages/ErrorPage.jsx
index 08adb5d..6386b8f 100644
--- a/src/pages/ErrorPage.jsx
+++ b/src/pages/ErrorPage.jsx
@@ -1,9 +1,14 @@
 import React from "react";
 import errorImage from "../assets/404-error.gif";
+import { Helmet } from "react-helmet-async";
 
 const ErrorPage = () => {
   return (
     <div className="h-[60vh] w-full flex flex-col items-center justify-center ">
+      <Helmet>
+        <title>Error 404 | eyesome</title>
+        <meta name="description" content="" />
+      </Helmet>
       <img
         src={errorImage}
         alt="error-image"
@@ -15,5 +20,4 @@ const ErrorPage = () => {
     </div>
   );
 };
-
 export default ErrorPage;
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index 88492d7..21ca3bb 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -1,10 +1,15 @@
 import { useRef } from "react";
 import { Banner, CategoryList, Footer, Trending } from "../components";
+import { Helmet } from "react-helmet-async";
 
 const Home = () => {
   const catRef = useRef(null);
   return (
     <>
+     <Helmet>
+        <title>Home | eyesome</title>
+        <meta name="description" content="" />
+      </Helmet>
       <Banner catRef={catRef} />
       <Trending />
       <CategoryList catRef={catRef} />
diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx
index e375e46..ea11bd8 100644
--- a/src/pages/Login.jsx
+++ b/src/pages/Login.jsx
@@ -4,6 +4,7 @@ import { Link } from "react-router-dom";
 import bannerHero from "../assets/bannerHero.jpg";
 import { Logo } from "../components";
 import { useAuthContext } from "../contexts";
+import { Helmet } from "react-helmet-async";
 
 const Login = () => {
   const { loginHandler, token, loggingIn } = useAuthContext();
@@ -33,6 +34,10 @@ const Login = () => {
   };
   return (
     <main className="grid  grid-rows-1 lg:grid-cols-2 w-full  h-screen m-auto">
+      <Helmet>
+        <title>Login | eyesome</title>
+        <meta name="description" content="Login page eyesome" />
+      </Helmet>
       <section className=" hidden lg:block max-h-screen  rounded-lg">
         <img src={bannerHero} alt="" className="w-full h-full object-cover" />
       </section>
diff --git a/src/pages/Orders.jsx b/src/pages/Orders.jsx
index af68b4c..f2ae2de 100644
--- a/src/pages/Orders.jsx
+++ b/src/pages/Orders.jsx
@@ -1,6 +1,7 @@
 import React, { useEffect } from "react";
 import orderSuccess from "../assets/success-order.gif";
 import { useLocation, useNavigate } from "react-router";
+import { Helmet } from "react-helmet-async";
 
 const Orders = () => {
   const location = useLocation();
@@ -16,6 +17,10 @@ const Orders = () => {
   }, []);
   return (
     <div className="min-h-[80vh] flex justify-center items-center py-3 ">
+     <Helmet>
+        <title>Orders | eyesome</title>
+        <meta name="description" content="" />
+      </Helmet>
       <div className="bg-white h-1/2 w-96 m-auto  rounded-md flex flex-col items-center justify-center p-5 modalShadow">
         <div className=" w-64  flex items-center justify-center ">
           <img
diff --git a/src/pages/ProductDetails.jsx b/src/pages/ProductDetails.jsx
index 69ff3ca..9dd10ef 100644
--- a/src/pages/ProductDetails.jsx
+++ b/src/pages/ProductDetails.jsx
@@ -12,6 +12,7 @@ import {
 import { getProductByIdService } from "../api/apiServices";
 import { StarRating } from "../components";
 import { notify } from "../utils/utils";
+import { Helmet } from "react-helmet-async";
 
 const ProductDetails = () => {
   const navigate = useNavigate();
@@ -40,6 +41,10 @@ const ProductDetails = () => {
 
   return (
     <div className="md:min-h-[80vh] flex justify-center items-center pt-5 sm:pt-3 pb-2 relative">
+      <Helmet>
+        <title>Product Details | eyesome</title>
+        <meta name="description" content="" />
+      </Helmet>
       <main className="grid grid-rows-1 sm:grid-cols-2 gap-2 sm:gap-10 ">
         <section className="relative p-7 bg-black/[0.075]  flex items-center justify-center rounded-lg">
           <img
diff --git a/src/pages/Profile.jsx b/src/pages/Profile.jsx
index 53bf200..6de7802 100644
--- a/src/pages/Profile.jsx
+++ b/src/pages/Profile.jsx
@@ -4,6 +4,7 @@ import { useAuthContext, useProductsContext } from "../contexts";
 
 import { AddressCard, AddressForm } from "../components";
 import Address from "../components/address/Address";
+import { Helmet } from "react-helmet-async";
 
 const Profile = () => {
   const userDetails = localStorage.getItem("userInfo")
@@ -26,6 +27,10 @@ const Profile = () => {
 
   return (
     <div className="min-h-[80vh] min-w-md max-w-lg m-auto mt-10">
+     <Helmet>
+        <title>Profile | eyesome</title>
+        <meta name="description" content="" />
+      </Helmet>
       <section className="h-full p-7 rounded-md shadow-sm bg-white/[0.7] flex flex-col gap-6 w-full">
         <div className="flex">
           <button
diff --git a/src/pages/Signup.jsx b/src/pages/Signup.jsx
index 1aa46e8..16e1f31 100644
--- a/src/pages/Signup.jsx
+++ b/src/pages/Signup.jsx
@@ -5,6 +5,7 @@ import bannerHero from "../assets/bannerHero.jpg";
 import { Logo } from "../components";
 import { useAuthContext } from "../contexts";
 import { useEffect, useState } from "react";
+import { Helmet } from "react-helmet-async";
 
 const Signup = () => {
   const { signupHandler, signingUp, isAuthenticated } = useAuthContext();
@@ -47,6 +48,11 @@ const Signup = () => {
     !confirmPassword;
   return (
     <main className="grid  grid-rows-1 md:grid-cols-2 w-full  h-screen m-auto ">
+      <Helmet>
+        <title>Signup | eyesome</title>
+        <meta name="description" content="" />
+      </Helmet>
+     
       <section className=" hidden md:block max-h-screen  rounded-lg">
         <img src={bannerHero} alt="" className="w-full h-full object-cover" />
       </section>
diff --git a/src/pages/Wishlist.jsx b/src/pages/Wishlist.jsx
index d8388c9..b334c9f 100644
--- a/src/pages/Wishlist.jsx
+++ b/src/pages/Wishlist.jsx
@@ -2,6 +2,7 @@ import React from "react";
 import SingleProduct from "../components/products/SingleProduct";
 import { useWishlistContext } from "../contexts";
 import emptyWish from "../assets/empty-wish.gif";
+import { Helmet } from "react-helmet-async";
 
 const Wishlist = () => {
   const { wishlist } = useWishlistContext();
@@ -10,7 +11,10 @@ const Wishlist = () => {
     <div>
       {wishlist.length ? (
         <>
-          {" "}
+          <Helmet>
+            <title>Wishlist | eyesome</title>
+            <meta name="description" content="" />
+          </Helmet>
           <h1 className="text-2xl py-6 font-semibold text-gray-800">
             Wishlist
           </h1>