diff --git a/donutshop_ecommerce/src/app/api/models/MenuItem.js b/donutshop_ecommerce/src/app/api/models/MenuItem.js
index 02d02ea..11df751 100644
--- a/donutshop_ecommerce/src/app/api/models/MenuItem.js
+++ b/donutshop_ecommerce/src/app/api/models/MenuItem.js
@@ -1,5 +1,10 @@
 import { Schema, model, models } from "mongoose";
 
+const ExtraPriceSchema = new Schema({
+    itemName: String,
+    price: Number,
+});
+
 const MenuItemSchema = new Schema({
     itemName:{
         type: String
@@ -13,7 +18,9 @@ const MenuItemSchema = new Schema({
     basePrice:{
         type: Number
     },
-
+    sizes:{
+        type: [ExtraPriceSchema]
+    }
 }, {timestamps: true})
 
 export const MenuItem = models?.MenuItem || model('MenuItem', MenuItemSchema)
\ No newline at end of file
diff --git a/donutshop_ecommerce/src/app/categories/page.js b/donutshop_ecommerce/src/app/categories/page.js
index c0a40e7..0c976e5 100644
--- a/donutshop_ecommerce/src/app/categories/page.js
+++ b/donutshop_ecommerce/src/app/categories/page.js
@@ -3,6 +3,8 @@ import React, { useEffect, useState } from 'react'
 import UserTab from '../../components/layout/UserTab'
 import useProfile from '../../components/UseProfile'
 import toast from 'react-hot-toast'
+import { LiaEditSolid } from "react-icons/lia";
+import { IoTrashOutline } from "react-icons/io5";
 
 const CategoriesPage = () => {
     const {loading:profileLoading, data:profileData} = useProfile();
@@ -70,7 +72,7 @@ const CategoriesPage = () => {
                 <label className='-mb-1 text-gray-700 font-semibold text-sm flex'>
                     {editCategory ? 'Update category' : 'New category name'}
                     {editCategory && (
-                        <div className='font-notmal'>: {editCategory.name}</div>
+                        <div className='font-normal'>: {editCategory.name}</div>
                     )}
                 </label>
                 <div className='flex gap-2 items-center'>
@@ -84,11 +86,15 @@ const CategoriesPage = () => {
             </div>
         </form>
         <div className='mt-5'>
-            <label className='-mb-1 text-gray-700 font-semibold text-sm'>Edit category</label>
+            <label className='-mb-1 text-gray-700 font-semibold text-sm'>Categories</label>
             {categories?.length > 0 && categories.map(c => (
-                <button onClick={() => {setEditCategory(c); setCategoryName(c.name)}} className='w-full p-2 flex justify-center items-center my-2 rounded-md outline-none border border-[#DCA0AE] hover:opacity-60 duration-300'>
-                    <p>{c.name}</p>
-                </button>
+                <div className='w-full p-2 flex justify-between my-2 rounded-md outline-none border border-[#DCA0AE] duration-300'>
+                    <p onClick={() => {setEditCategory(c); setCategoryName(c.name)}} className='cursor-pointer hover:text-gray-600'>{c.name}</p>
+                    <div className='flex gap-2'>
+                        <button type='button' className='text-green-600 hover:opacity-60'><LiaEditSolid/></button>
+                        <button type='button' className='text-red-600 hover:opacity-60'><IoTrashOutline/></button>
+                    </div>
+                </div>
             ))}
         </div>
     </div>
diff --git a/donutshop_ecommerce/src/components/layout/MenuItemForm.js b/donutshop_ecommerce/src/components/layout/MenuItemForm.js
index aad86b0..81e8ec5 100644
--- a/donutshop_ecommerce/src/components/layout/MenuItemForm.js
+++ b/donutshop_ecommerce/src/components/layout/MenuItemForm.js
@@ -8,7 +8,7 @@ const MenuItemForm = ({handleMenuFormSubmit, menuItem}) => {
     const [itemName, setItemName] = useState(menuItem?.itemName || '');
     const [description, setDescription] = useState(menuItem?.description || '');
     const [basePrice, setBasePrice] = useState(menuItem?.basePrice || '');
-    const [sizes, setSizes] = useState([]);
+    const [sizes, setSizes] = useState(menuItem?.sizes || []);
     
 
 
diff --git a/donutshop_ecommerce/src/components/layout/MenuItemProps.js b/donutshop_ecommerce/src/components/layout/MenuItemProps.js
index a811036..d391edf 100644
--- a/donutshop_ecommerce/src/components/layout/MenuItemProps.js
+++ b/donutshop_ecommerce/src/components/layout/MenuItemProps.js
@@ -1,7 +1,9 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { IoTrashOutline } from "react-icons/io5";
+import { MdKeyboardArrowDown, MdKeyboardArrowUp } from "react-icons/md";
 
 const MenuItemProps = ({props, setProps}) => {
+    const [isOpen, setIsOpen] = useState(false);
 
     function addProp(){
         setProps(oldProp => {
@@ -25,24 +27,34 @@ const MenuItemProps = ({props, setProps}) => {
 
   return (
     <div>
-        <label className='mb-2 text-gray-700 font-semibold text-sm flex'>Box of donuts</label>
         <div className='border p-2 block my-2 w-full rounded-md outline-none border-[#DCA0AE]'>
-            {props?.length > 0 && props.map((size, index) => (
-                <div className='flex gap-2 items-center'>
-                    <div>
-                        <label className='-mb-1 text-gray-700 text-sm flex'>Donuts</label>
-                        <input type='text' placeholder='Donuts' value={size.itemName} onChange={ev => editProp(ev, index, 'itemName')}/>
+            <button onClick={() => setIsOpen(prev => !prev)} type='button' className='w-full flex justify-between items-center text-[#DCA0AE] '>
+                <label className='mb-2 text-gray-700 font-semibold text-sm flex'>Box of donuts ({props.length})</label>
+                {isOpen && (
+                    <MdKeyboardArrowUp/>
+                )}
+                {!isOpen && (
+                    <MdKeyboardArrowDown/>
+                )}
+            </button>
+            <div className={isOpen ? 'block' : 'hidden'}>
+                {props?.length > 0 && props.map((size, index) => (
+                    <div className='flex gap-2 items-center'>
+                        <div>
+                            <label className='-mb-1 text-gray-700 text-sm flex'>Donuts</label>
+                            <input type='text' placeholder='Donuts' value={size.itemName} onChange={ev => editProp(ev, index, 'itemName')}/>
+                        </div>
+                        <div>
+                            <label className='-mb-1 text-gray-700 text-sm flex'>Price</label>
+                            <input type='text' placeholder='Price' value={size.price} onChange={ev => editProp(ev, index, 'price')}/>
+                        </div>
+                        <div className='flex items-center mt-5 text-red-500'>
+                            <button type='button' onClick={() => removeProp(index)}><IoTrashOutline/></button>
+                        </div>
                     </div>
-                    <div>
-                        <label className='-mb-1 text-gray-700 text-sm flex'>Price</label>
-                        <input type='text' placeholder='Price' value={size.price} onChange={ev => editProp(ev, index, 'price')}/>
-                    </div>
-                    <div className='flex items-center mt-5 text-red-500'>
-                        <button type='button' onClick={() => removeProp(index)}><IoTrashOutline/></button>
-                    </div>
-                </div>
-            ))}
-            <button type='button' onClick={addProp} className='bg-gray-200 w-full p-2 rounded-md hover:opacity-80'>Add donuts</button>
+                ))}
+                <button type='button' onClick={addProp} className='bg-gray-200 w-full p-2 rounded-md hover:opacity-80'>Add donuts</button>
+            </div>
         </div>
     </div>
   )