diff --git a/donutshop_ecommerce/src/components/menu/Menu.js b/donutshop_ecommerce/src/components/menu/Menu.js
index 53047c9..9529677 100644
--- a/donutshop_ecommerce/src/components/menu/Menu.js
+++ b/donutshop_ecommerce/src/components/menu/Menu.js
@@ -7,6 +7,9 @@ const Menu = (menuItem) => {
   const {menuImg, itemName, description, basePrice, sizes, extraItems} = menuItem
   const {addToCart} = useContext(CartContext);
   const [showPopup, setShowPopup] = useState(false);
+  const [selectedSize, setSelectedsize] = useState(null);
+  const [selectedTopping, setSelectedTopping] = useState([]);
+
 
   function handleAddToCartButtonClick(){
     if(sizes.length === 0 &&  extraItems.length === 0){
@@ -17,6 +20,17 @@ const Menu = (menuItem) => {
     }
   }
 
+  //topping checked functionality
+  function handleSelectedTopping(ev, extraTopping){
+    const checked = ev.target.checked;
+    if(checked){
+      setSelectedTopping(prev => [...prev, extraTopping]);
+    } else {
+      setSelectedTopping(prev => {
+        return prev.filter(e => e.itemName !== extraTopping.itemName);
+      });
+    }
+  }
   
 
 
@@ -24,32 +38,34 @@ const Menu = (menuItem) => {
     <>
     {showPopup && (
       <div className='fixed inset-0 bg-black/80 flex justify-center items-center'>
-        <div className='bg-white p-5 rounded-md'>
-          <div className='py-0 sm:py-5 flex flex-col gap-2 sm:gap-4 justify-center items-center text-center px-0 sm:px-10'>
-            <Image src={menuImg} width={300} height={300} alt='menu-donut' className='w-[100px] min-[550px]:w-[120px]'/>
-            <p className='text-sm sm:text-base font-semibold capitalize text-[#95743D] px-2'>{itemName}</p>
-            <p className='text-xs sm:text-sm px-2 line-clamp-2 text-[#95743D]'>{description}</p>
-            {sizes?.length > 0 && (
-              <div className='w-full border-t-[1px] border-pink-500 border-dashed'>
-                <p className='text-xs sm:text-sm font-semibold capitalize text-[#95743D] px-2 m-2'>Choose your size</p>
-                {sizes.map(size => (
-                  <div className='flex justify-start text-start text-xs sm:text-sm gap-2 py-1'>
-                    <input type='radio' name='size'/>{size.itemName} ${basePrice + size.price}
-                  </div>
-                ))}
-              </div>
-            )}
-            {extraItems?.length > 0 && (
-              <div className='w-full border-t-[1px] border-pink-500 border-dashed'>
-                <p className='text-xs sm:text-sm font-semibold capitalize text-[#95743D] px-2 m-2'>Extra toppings</p>
-                {extraItems.map(extraTopping => (
-                  <div className='flex justify-start text-start text-xs sm:text-sm gap-2 py-1'>
-                    <input type='checkbox' name={extraTopping.itemName}/>{extraTopping.itemName} (${extraTopping.price})
-                  </div>
-                ))}
-              </div>
-            )}
-            <button type='button' className='bg-pink-500 text-white p-1 sm:p-2 text-sm sm:text-base rounded-md hover:opacity-80 duration-300 mt-5'>Add to cart</button>
+        <div className='bg-white p-5 rounded-md max-w-md'>
+          <div className='overflow-y-scroll' style={{maxHeight:'calc(100vh - 250px)'}}>
+            <div className='py-0 sm:py-5 flex flex-col gap-2 sm:gap-4 justify-center items-center text-center px-5'>
+              <Image src={menuImg} width={300} height={300} alt='menu-donut' className='w-[100px] min-[550px]:w-[120px]'/>
+              <p className='text-sm sm:text-base font-semibold capitalize text-[#95743D] px-2'>{itemName}</p>
+              <p className='text-xs sm:text-sm px-2 line-clamp-2 text-[#95743D]'>{description}</p>
+              {sizes?.length > 0 && (
+                <div className='w-full border-t-[1px] border-pink-500 border-dashed'>
+                  <p className='text-xs sm:text-sm font-semibold capitalize text-[#95743D] px-2 m-2'>Choose your size</p>
+                  {sizes.map(size => (
+                    <div className='flex justify-start text-start text-xs sm:text-sm gap-2 py-1'>
+                      <input type='radio' name='size' onClick={() => setSelectedsize(size)} checked={selectedSize?.itemName === size.itemName}/>{size.itemName} ${basePrice + size.price}
+                    </div>
+                  ))}
+                </div>
+              )}
+              {extraItems?.length > 0 && (
+                <div className='w-full border-t-[1px] border-pink-500 border-dashed'>
+                  <p className='text-xs sm:text-sm font-semibold capitalize text-[#95743D] px-2 m-2'>Extra toppings</p>
+                  {extraItems.map(extraTopping => (
+                    <div className='flex justify-start text-start text-xs sm:text-sm gap-2 py-1'>
+                      <input type='checkbox' name={extraTopping.itemName} onClick={ev => handleSelectedTopping(ev, extraTopping)}/>{extraTopping.itemName} (${extraTopping.price})
+                    </div>
+                  ))}
+                </div>
+              )}
+              <button type='button' className='bg-pink-500 text-white p-1 sm:p-2 text-sm sm:text-base rounded-md hover:opacity-80 duration-300 mt-5'>Add to cart</button>
+            </div>
           </div>
         </div>
       </div>