diff --git a/build/1.51d47afc6e300b87b054.jpeg b/build/1.51d47afc6e300b87b054.jpeg
deleted file mode 100644
index 0ceffc6..0000000
Binary files a/build/1.51d47afc6e300b87b054.jpeg and /dev/null differ
diff --git a/src/components/MainPageProducts.jsx b/src/components/MainPageProducts.jsx
index c80ce91..4d4b42d 100644
--- a/src/components/MainPageProducts.jsx
+++ b/src/components/MainPageProducts.jsx
@@ -44,6 +44,7 @@ const MainPageProducts=()=>{
      const [brands,setBrands]=useState([])
      const [search,setSearch]=useState(false)
      const [searchPage,setSearchPage]=useState(1)
+    
 
 
     
@@ -221,10 +222,10 @@ const MainPageProducts=()=>{
                   onClick={() => navigate(`/productPage/${data._id}`)}
                   className="font-Lexend cursor-pointer sm:max-md:text-[12px] xs:max-sm:text-[10px] text-gray-800"
                 />
-                <p className="font-Poppins xs:max-sm:text-[14px] text-gray-600">{data.options}</p>
+                <p className="font-Poppins xs:max-sm:text-[14px] text-gray-600">{data.options[0]?.option}</p>
                 <div className="grid w-full absolute bottom-2 py-2 grid-cols-2 xs:max-sm:grid-cols-1 xs:max-sm:gap-y-2 gap-x-2">
-                  <div className="bg-gray-200 xs:max-sm:py-[2px] sm:max-md:py-[2px] font-Abel py-2 xs:max-sm:text-[16px] text-[20px] rounded-md text-center">${data.price}</div>
-                  {carted ? <div style={{ userSelect: 'none' }} onClick={toggleCart} className="text-md border-2 cursor-pointer rounded-md py-2 sm:max-md:text-xs xs:max-sm:text-xs font-Abel text-center border-gray-300">View in cart</div> : <div onClick={() => dispatch(addItemToCartAsync({ product: data, quantity: 1 }))} className="text-md border-2 cursor-pointer rounded-md py-2 sm:max-md:text-xs xs:max-sm:text-xs font-Abel text-center border-gray-300">Add to cart</div>}
+                  <div className="bg-gray-200 xs:max-sm:py-[2px] sm:max-md:py-[2px] font-Abel py-2 xs:max-sm:text-[16px] text-[20px] rounded-md text-center">${data.options[0]?.price}</div>
+                  {carted ? <div style={{ userSelect: 'none' }} onClick={toggleCart} className="text-md border-2 cursor-pointer rounded-md py-2 sm:max-md:text-xs xs:max-sm:text-xs font-Abel text-center border-gray-300">View in cart</div> : <div onClick={() => dispatch(addItemToCartAsync({ product: { ...data, option:{id: data.options[0].id,price:data.options[0].price} }, quantity: 1 }))} className="text-md border-2 cursor-pointer rounded-md py-2 sm:max-md:text-xs xs:max-sm:text-xs font-Abel text-center border-gray-300">Add to cart</div>}
                 </div>
               </div>
             </div>
diff --git a/src/components/MainProductCarousal.jsx b/src/components/MainProductCarousal.jsx
index 21dab1a..8060f3a 100644
--- a/src/components/MainProductCarousal.jsx
+++ b/src/components/MainProductCarousal.jsx
@@ -159,10 +159,10 @@ const MainProductCarousal=()=>{
                                            onClick={()=>{window.location.href=`/productPage/${data._id}`}}
                                            className="font-Lexend cursor-pointer text-gray-800"
                                      />
-                                    <p className="font-Poppins text-gray-600">150 Grams</p>
+                                    <p className="font-Poppins text-gray-600">{data.options[0]?.option}</p>
                                     <div  className="grid py-2 grid-cols-2 gap-x-2 ">
-                                        <div className="bg-gray-200 font-Abel py-2 text-[20px] rounded-md text-center">${data.price}</div>
-                                        {carted ?   <div style={{userSelect:'none'}} onClick={toggleCart}  className="text-md border-2 cursor-pointer rounded-md py-2 sm:max-md:text-xs xs:max-sm:text-xs font-Abel text-center border-gray-300">View in cart</div>      : <div onClick={()=>dispatch(addItemToCartAsync({product:data,quantity:1}))}  className="text-md border-2 cursor-pointer rounded-md py-2 sm:max-md:text-xs xs:max-sm:text-xs font-Abel text-center border-gray-300">Add to cart</div>}
+                                        <div className="bg-gray-200 font-Abel py-2 text-[20px] rounded-md text-center">${data.options[0]?.price}</div>
+                                        {carted ?   <div style={{userSelect:'none'}} onClick={toggleCart}  className="text-md border-2 cursor-pointer rounded-md py-2 sm:max-md:text-xs xs:max-sm:text-xs font-Abel text-center border-gray-300">View in cart</div>      : <div onClick={()=>dispatch(addItemToCartAsync({ product: { ...data, option:{id: data.options[0].id,price:data.options[0].price}}}))}  className="text-md border-2 cursor-pointer rounded-md py-2 sm:max-md:text-xs xs:max-sm:text-xs font-Abel text-center border-gray-300">Add to cart</div>}
                                     </div>
                                     </div>
             
diff --git a/src/components/SearchComponent.jsx b/src/components/SearchComponent.jsx
index 424dd7d..f70ca40 100644
--- a/src/components/SearchComponent.jsx
+++ b/src/components/SearchComponent.jsx
@@ -150,7 +150,7 @@ const SearchComponent = ({ isMobile }) => {
                     className="my-auto font-Abel cursor-pointer"
                   />
                 </div>
-                <p className="my-auto font-bold font-Abel">${data.price}</p>
+                <p className="my-auto font-bold font-Abel">${data.options[0].price}</p>
               </div>
             </div>
           ))}
diff --git a/src/scenes/BrandPage.jsx b/src/scenes/BrandPage.jsx
index 5e837c2..ab4b346 100644
--- a/src/scenes/BrandPage.jsx
+++ b/src/scenes/BrandPage.jsx
@@ -98,22 +98,22 @@ const BrandPage = () => {
         >
           <img
             className="w-[50%] h-[100%] mx-auto my-auto"
-            src={`${process.env.REACT_APP_API_URL}/assets/products/md/${data.productImage?.medium ?? '404.jpeg'}`}
+            src={`${process.env.REACT_APP_API_URL}/assets/products/md/${data?.productImage?.medium ?? '404.jpeg'}`}
             alt={data.name}
           />
         </div>
         <div className="m-2 relative h-[180px] flex flex-col">
-          <p className="font-Abel text-[12px] xs:max-sm:text-[10px] font-bold text-emerald-400 my-[2px]">{data.brand}</p>
+          <p className="font-Abel text-[12px] xs:max-sm:text-[10px] font-bold text-emerald-400 my-[2px]">{data?.brand}</p>
           <p
             onClick={() => { navigate(`/productPage/${data._id}`); }}
             className="font-Lexend cursor-pointer xs:max-sm:text-[10px] text-gray-800"
           >
             {data.name}
           </p>
-          <p className="font-Poppins xs:max-sm:text-[14px] text-gray-600">150 Grams</p>
+          <p className="font-Poppins xs:max-sm:text-[14px] text-gray-600">{data?.options[0].option}</p>
           <div className="grid w-full absolute bottom-2 py-2 grid-cols-2 xs:max-sm:grid-cols-1 xs:max-sm:gap-y-2 gap-x-2">
             <div className="bg-gray-200 xs:max-sm:py-[2px] sm:max-md:py-[2px] font-Abel py-2 xs:max-sm:text-[16px] text-[20px] rounded-md text-center">
-              ${data.price}
+              ${data.options[0].price}
             </div>
             {carted ? (
               <div
@@ -125,7 +125,7 @@ const BrandPage = () => {
               </div>
             ) : (
               <div
-                onClick={() => dispatch(addItemToCartAsync({ product: data, quantity: 1 }))}
+                onClick={() => dispatch(addItemToCartAsync({ product: { ...data, option:{id: data.options[0].id,price:data.options[0].price}}}))}
                 className="text-md border-2 cursor-pointer rounded-md py-2 sm:max-md:text-xs xs:max-sm:text-xs font-Abel text-center border-gray-300"
               >
                 Add to cart
diff --git a/src/scenes/CategoryPage.jsx b/src/scenes/CategoryPage.jsx
index 9bbc153..b33ddbf 100644
--- a/src/scenes/CategoryPage.jsx
+++ b/src/scenes/CategoryPage.jsx
@@ -105,10 +105,10 @@ const CategoryPage = () => {
           >
             {data.name}
           </p>
-          <p className="font-Poppins xs:max-sm:text-[14px] text-gray-600">150 Grams</p>
+          <p className="font-Poppins xs:max-sm:text-[14px] text-gray-600">{data.options[0].option}</p>
           <div className="grid w-full absolute bottom-2 py-2 grid-cols-2 xs:max-sm:grid-cols-1 xs:max-sm:gap-y-2 gap-x-2">
             <div className="bg-gray-200 xs:max-sm:py-[2px] sm:max-md:py-[2px] font-Abel py-2 xs:max-sm:text-[16px] text-[20px] rounded-md text-center">
-              ${data.price}
+              ${data.options[0].price}
             </div>
             {carted ? (
               <div
@@ -120,7 +120,7 @@ const CategoryPage = () => {
               </div>
             ) : (
               <div
-                onClick={() => dispatch(addItemToCartAsync({ product: data, quantity: 1 }))}
+                onClick={() => dispatch(addItemToCartAsync({ product: { ...data, option:{id: data.options[0].id,price:data.options[0].price}}}))}
                 className="text-md border-2 cursor-pointer rounded-md py-2 sm:max-md:text-xs xs:max-sm:text-xs font-Abel text-center border-gray-300"
               >
                 Add to cart
diff --git a/src/scenes/NavBar.jsx b/src/scenes/NavBar.jsx
index 177e8d7..694d026 100644
--- a/src/scenes/NavBar.jsx
+++ b/src/scenes/NavBar.jsx
@@ -298,10 +298,10 @@ const NavBar=()=>{
 <div className="flex flex-col gap-y-2">
   <p className="text-emerald-600 font-bold">Children's Health</p>
   <p onClick={()=>window.location.href='/category/Children-vitamins'} className="font-Livvic cursor-pointer hover:underline text-sm">Children's Multivitamins</p>
-  <p onClick={()=>window.location.href='/category/Childern-supplements'} className="font-Livvic cursor-pointer hover:underline text-sm">Children's Supplements</p>
+  <p onClick={()=>window.location.href='/category/Children-supplements'} className="font-Livvic cursor-pointer hover:underline text-sm">Children's Supplements</p>
   <p onClick={()=>window.location.href='/category/Children-digestive-supplements'} className="font-Livvic cursor-pointer hover:underline text-sm">Children's Digestive Support</p>
   <p onClick={()=>window.location.href='/category/Children-immune-supplements'} className="font-Livvic cursor-pointer hover:underline text-sm">Children's Immune Support</p>
-  <p onClick={()=>window.location.href='/category/Childern-supplements'} className="font-Livvic cursor-pointer hover:underline text-sm">Shop All</p>
+  <p onClick={()=>window.location.href='/category/Children-supplements'} className="font-Livvic cursor-pointer hover:underline text-sm">Shop All</p>
 </div>
 
 
@@ -337,7 +337,7 @@ const NavBar=()=>{
   <p className="text-emerald-600 font-bold">Probiotics</p>
   <p onClick={()=>window.location.href='/category/Women-probiotics'} className="font-Livvic cursor-pointer hover:underline text-sm">Women's Probiotics</p>
   <p onClick={()=>window.location.href='/category/Men-probiotics'} className="font-Livvic cursor-pointer hover:underline text-sm">Men's Probiotics</p>
-  <p onClick={()=>window.location.href='/category/Childern-probiotics'} className="font-Livvic cursor-pointer hover:underline text-sm">Children's Probiotics</p>
+  <p onClick={()=>window.location.href='/category/Children-probiotics'} className="font-Livvic cursor-pointer hover:underline text-sm">Children's Probiotics</p>
   <p onClick={()=>window.location.href='/category/Probiotics'} className="font-Livvic cursor-pointer hover:underline text-sm">Shop All</p>
 </div>
 
diff --git a/src/scenes/Order.jsx b/src/scenes/Order.jsx
index 2888811..cd65b8c 100644
--- a/src/scenes/Order.jsx
+++ b/src/scenes/Order.jsx
@@ -488,7 +488,7 @@ const Order=()=>{
                    maxLength={15}
                     className="font-Poppins text-xs underline text-emerald-500"
               />
-                            <p className='text-Livvic text-[14px] text-gray-700'>{data.options}</p>
+                            <p className='text-Livvic text-[14px] text-gray-700'>{data.option}</p>
                         </div>
 
                     </div>
diff --git a/src/scenes/ProductPage.jsx b/src/scenes/ProductPage.jsx
index 6469d4d..26e5782 100644
--- a/src/scenes/ProductPage.jsx
+++ b/src/scenes/ProductPage.jsx
@@ -30,6 +30,7 @@ const ProductPage=()=>{
      const [quantity,setQuantity]=useState(1)
      const cartItems=useSelector((state)=>state.cartItems)
      const {productId}=useParams();
+     const [selectedOption,setSelectedOption]=useState(null)
      const [carted,setCarted] = useState(false);
 
 
@@ -37,7 +38,10 @@ const ProductPage=()=>{
      const fetchProduct=async ()=>{
        await fetch(`${process.env.REACT_APP_API_URL}/products/id/${productId}`,{
             method:'GET'
-        }).then((response)=>response.json()).then((data)=>{setProduct(data); })
+        }).then((response)=>response.json()).then((data)=>{setProduct(data);
+            setSelectedOption({id:0,...data.options[0]})
+
+         })
     }
        
 
@@ -63,7 +67,7 @@ const ProductPage=()=>{
     const handleAddToCart = () => {
         const productToDispatch = {
           name: product.name,
-          price: product.price,
+          option:selectedOption,
           productImage: product.productImage,
           _id: product._id,
         };
@@ -103,7 +107,7 @@ if (foundItem) {
             <div className="flex flex-row xs:max-md:grid xs:max-md:grid-cols-1">
                 <div className="basis-[40%]">
 
-                    <div className="border-2 w-[80%] flex mx-auto h-[500px] border-gray-300 rounded-md">
+                    <div className="border-2 w-[80%] flex mx-auto xs:max-md:h-[450px] h-[500px] border-gray-300 rounded-md">
                         
                     {isLoading ? 
         <div className="w-full h-full">
@@ -111,7 +115,7 @@ if (foundItem) {
           </div>
         : 
           <img
-            className="w-[60%]  h-[350px] mx-auto my-auto"
+            className="w-[60%] xs:max-md:h-[300px] h-[350px] mx-auto my-auto"
             src={`${process.env.REACT_APP_API_URL}/assets/products/lg/${product.productImage?.large??'404.jpeg'}`}
             alt={product.name}
           />
@@ -189,10 +193,18 @@ if (foundItem) {
                 </div>
                 
                 :
-                <div className="px-4 py-2 border-2 border-black md:max-lg:w-[40%] sm:max-md:w-[30%] xs:max-sm:w-[40%] w-[30%] rounded-full bg-gray-100">
-                <p className="font-Abel  ">{product.options}</p>
+                <div className="flex flex-row gap-x-4">
+                {
+                  Array.isArray(product.options)&&  product.options.map((data,index)=>(
+                    <div onClick={()=>{setSelectedOption({id:index,...product.options[index]})}} className={`px-4  cursor-pointer py-2 border-2 border-black w-auto rounded-full ${Number(selectedOption.price)===Number(data.price)?'bg-gray-100':'bg-white'}`}>
+                    <p className="font-Abel  ">{data.option}</p>  
+                    </div>  
+                  ))
+                }
                 </div>
                 
+                
+                
                  }
 
 
@@ -213,7 +225,7 @@ if (foundItem) {
                     </div>
                     :
                    
-                   <div  className="my-auto  font-Lexend text-lg font-bold"> <p> ${product.price} </p> </div>
+                   <div  className="my-auto  font-Lexend text-lg font-bold"> <p> ${selectedOption.price} </p> </div>
                    }
 
 
diff --git a/src/state/index.js b/src/state/index.js
index 829f1cb..fbfb95e 100644
--- a/src/state/index.js
+++ b/src/state/index.js
@@ -16,7 +16,7 @@ const initialState = {
     const state = getState();
 
     if (state.accessToken) {
-       api.get(`/cart/create/${product._id}/${quantity?quantity:1}`)
+       api.get(`/cart/create/${product._id}/${quantity?quantity:1}?option=${product.option.id}`)
       .then((response)=>{
         if (response.status === 201) {
        
diff --git a/src/widget/Cart.jsx b/src/widget/Cart.jsx
index bbfd264..d1d1e94 100644
--- a/src/widget/Cart.jsx
+++ b/src/widget/Cart.jsx
@@ -53,10 +53,10 @@ const Cart=()=>{
 
     useEffect(() => {
    
-    
+     console.log(cartItems)
         // Calculate individual total prices when the cart changes
         const individualTotals = cartItems.map((item) => {
-          const individualTotal = item.price * item.quantity;
+          const individualTotal = item?.option?.price * item.quantity;
           return individualTotal;
         });
         
@@ -147,7 +147,7 @@ const Cart=()=>{
                     className="font-Poppins text-xs underline text-emerald-500"
               />
 
-                            <p className='text-Livvic text-[14px] text-gray-700'>{data.options}</p>
+                            <p className='text-Livvic text-[14px] text-gray-700'>{data?.option?.option}</p>
                         </div>
 
                     </div>
@@ -168,7 +168,7 @@ const Cart=()=>{
                         </div>
 
                         <div>
-                            <p className='font-Abel text-end'>${data.price}</p>
+                            <p className='font-Abel text-end'>${data?.option?.price}</p>
                         </div>
 
                     </div>
diff --git a/src/widget/CategoriesWidget.jsx b/src/widget/CategoriesWidget.jsx
index 8e9e7ca..0fffc96 100644
--- a/src/widget/CategoriesWidget.jsx
+++ b/src/widget/CategoriesWidget.jsx
@@ -118,10 +118,10 @@ const Categories=()=>{
 <div className="flex flex-col gap-y-2">
   <p className="text-emerald-600 font-bold">Children's Health</p>
   <p onClick={()=>window.location.href='/category/Children-vitamins'} className="font-Livvic cursor-pointer hover:underline text-sm">Children's Multivitamins</p>
-  <p onClick={()=>window.location.href='/category/Childern-supplements'} className="font-Livvic cursor-pointer hover:underline text-sm">Children's Supplements</p>
+  <p onClick={()=>window.location.href='/category/Children-supplements'} className="font-Livvic cursor-pointer hover:underline text-sm">Children's Supplements</p>
   <p onClick={()=>window.location.href='/category/Children-digestive-supplements'} className="font-Livvic cursor-pointer hover:underline text-sm">Children's Digestive Support</p>
   <p onClick={()=>window.location.href='/category/Children-immune-supplements'} className="font-Livvic cursor-pointer hover:underline text-sm">Children's Immune Support</p>
-  <p onClick={()=>window.location.href='/category/Childern-supplements'} className="font-Livvic cursor-pointer hover:underline text-sm">Shop All</p>
+  <p onClick={()=>window.location.href='/category/Children-supplements'} className="font-Livvic cursor-pointer hover:underline text-sm">Shop All</p>
 </div>
 
 
@@ -157,7 +157,7 @@ const Categories=()=>{
   <p className="text-emerald-600 font-bold">Probiotics</p>
   <p onClick={()=>window.location.href='/category/Women-probiotics'} className="font-Livvic cursor-pointer hover:underline text-sm">Women's Probiotics</p>
   <p onClick={()=>window.location.href='/category/Men-probiotics'} className="font-Livvic cursor-pointer hover:underline text-sm">Men's Probiotics</p>
-  <p onClick={()=>window.location.href='/category/Childern-probiotics'} className="font-Livvic cursor-pointer hover:underline text-sm">Children's Probiotics</p>
+  <p onClick={()=>window.location.href='/category/Children-probiotics'} className="font-Livvic cursor-pointer hover:underline text-sm">Children's Probiotics</p>
   <p onClick={()=>window.location.href='/category/Probiotics'} className="font-Livvic cursor-pointer hover:underline text-sm">Shop All</p>
 </div>
 
diff --git a/src/widget/SimiliarProducts.jsx b/src/widget/SimiliarProducts.jsx
index 912367f..5b36423 100644
--- a/src/widget/SimiliarProducts.jsx
+++ b/src/widget/SimiliarProducts.jsx
@@ -62,9 +62,9 @@ const SimiliarProducts=()=>{
                                           
                                            className="font-Lexend xs:max-sm:text-[10px] cursor-pointer text-gray-800"
                                      />
-                                <p className="font-Poppins xs:max-sm:text-[13px] text-gray-600">{data.options}</p>
+                                <p className="font-Poppins xs:max-sm:text-[13px] text-gray-600">{data.options[0].options}</p>
                                
-                                    <div className="bg-gray-200 font-Abel py-2 xs:max-sm:py-[4px] xs:max-sm:text-[13px] text-[20px] rounded-md text-center">${data.price}</div>
+                                    <div className="bg-gray-200 font-Abel py-2 xs:max-sm:py-[4px] xs:max-sm:text-[13px] text-[20px] rounded-md text-center">${data.options[0].price}</div>
                                     
                                
                                 </div>