diff --git a/donutshop_ecommerce/src/app/api/menu-items/route.js b/donutshop_ecommerce/src/app/api/menu-items/route.js
index d80f069..2a70373 100644
--- a/donutshop_ecommerce/src/app/api/menu-items/route.js
+++ b/donutshop_ecommerce/src/app/api/menu-items/route.js
@@ -9,6 +9,14 @@ export async function POST(req){
     return Response.json(menuItemDoc)
 }
 
+export async function PUT(req){
+    mongoose.connect(process.env.MONGO_URL)
+    const {_id, ...data} = await req.json();
+    await MenuItem.findByIdAndUpdate(_id, data);
+
+    return Response.json(true)
+}
+
 export async function GET(){
     mongoose.connect(process.env.MONGO_URL)
     return Response.json(
diff --git a/donutshop_ecommerce/src/app/menu-items/edit/[id]/page.js b/donutshop_ecommerce/src/app/menu-items/edit/[id]/page.js
new file mode 100644
index 0000000..cb443b2
--- /dev/null
+++ b/donutshop_ecommerce/src/app/menu-items/edit/[id]/page.js
@@ -0,0 +1,96 @@
+"use client"
+import React, { useEffect, useState } from 'react'
+import useProfile from '../../../../components/UseProfile';
+import { redirect, useParams } from 'next/navigation'
+import Link from 'next/link'
+import UserTab from '../../../../components/layout/UserTab';
+import EditImage from '../../../../components/layout/EditImage';
+
+const EditMenuItemPage = () => {
+    const {loading, data} = useProfile();
+    const [menuImg, setMenuImg] = useState('');
+    const [itemName, setItemName] = useState('');
+    const [description, setDescription] = useState('');
+    const [basePrice, setBasePrice] = useState('');
+    const [goToItems, setGoToItems] = useState(false);
+    const {id} = useParams();
+
+
+    useEffect(() => {
+        fetch('/api/menu-items').then(res => {
+            res.json().then(items => {
+                const item = items.find(i => i._id === id);
+                setMenuImg(item.menuImg);
+                setItemName(item.itemName);
+                setDescription(item.description);
+                setBasePrice(item.basePrice);
+            })
+        })
+    }, [])
+
+    async function handleMenuFormSubmit(ev){
+        ev.preventDefault();
+        const data = {menuImg, itemName, description, basePrice, _id:id};
+        const menuSavingPromise = new Promise(async (resolve, reject) => {
+            const response = await fetch('/api/menu-items', {
+                method: 'PUT',
+                body: JSON.stringify(data),
+                headers: {'Content-Type': 'application/json'}
+            });
+            if(response.ok)
+                resolve();
+            else
+                reject();
+        });
+        await toast.promise(menuSavingPromise, {
+            loading: 'Saving...',
+            success: 'Menu is saved',
+            error: 'Fail to save menu!',
+        });
+
+        setGoToItems(true) 
+    }
+    if(goToItems){
+        return redirect('/menu-items')
+    }
+
+
+    if(loading){
+        return <p className='flex justify-center items-center'>Loading...</p>
+    }
+    if(!data.admin){
+        return <p className='flex justify-center items-center'>Please login as an admin</p>
+    }
+
+
+  return (
+    <div className='mb-10'>
+        <UserTab isAdmin={true}/>
+        <div className='px-5 max-w-md mx-auto mt-10'>
+            <form className='mt-10' onSubmit={handleMenuFormSubmit}>
+                <div className='flex flex-col gap-2 justify-center items-center max-w-[100px] mx-auto mb-5'>
+                    <EditImage link={menuImg} setLink={setMenuImg}/>
+                </div>
+                <div>
+                    <label className='-mb-1 text-gray-700 font-semibold text-sm flex'>Item name</label>
+                    <input type='text' placeholder='Enter items name' value={itemName} onChange={ev => setItemName(ev.target.value)}/>
+                </div>
+                <div>
+                    <label className='-mb-1 text-gray-700 font-semibold text-sm flex'>Description</label>
+                    <input type='text' placeholder='Enter discription' value={description} onChange={ev => setDescription(ev.target.value)}/>
+                </div>
+                <div>
+                    <label className='-mb-1 text-gray-700 font-semibold text-sm flex'>Price</label>
+                    <input type='text' placeholder='Enter base price' value={basePrice} onChange={ev => setBasePrice(ev.target.value)}/>
+                </div>
+                <button type='submit' className='w-full bg-pink-500 text-white p-2 rounded-md hover:opacity-80 duration-300'>Save</button>
+            </form>
+            <div className='max-w-md mx-auto mt-2'>
+                <Link href={'/menu-items'} className='w-full p-2 flex justify-center items-center my-2 rounded-md outline-none border border-[#DCA0AE] hover:opacity-60 duration-300'>Show all menu items</Link>
+            </div>
+        </div>    
+    </div>
+  )
+}
+
+export default EditMenuItemPage
\ No newline at end of file