diff --git a/donutshop_ecommerce/src/app/categories/page.js b/donutshop_ecommerce/src/app/categories/page.js
index 4fc2fb4..c0a40e7 100644
--- a/donutshop_ecommerce/src/app/categories/page.js
+++ b/donutshop_ecommerce/src/app/categories/page.js
@@ -86,7 +86,7 @@ const CategoriesPage = () => {
         <div className='mt-5'>
             <label className='-mb-1 text-gray-700 font-semibold text-sm'>Edit category</label>
             {categories?.length > 0 && categories.map(c => (
-                <button onClick={() => {setEditCategory(c); setCategoryName(c.name)}} className='w-full flex gap-2 bg-slate-100 px-4 py-2 cursor-pointer rounded-md mb-2'>
+                <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>
             ))}
diff --git a/donutshop_ecommerce/src/app/menu-items/new/page.js b/donutshop_ecommerce/src/app/menu-items/new/page.js
index e8cf45a..00d1f33 100644
--- a/donutshop_ecommerce/src/app/menu-items/new/page.js
+++ b/donutshop_ecommerce/src/app/menu-items/new/page.js
@@ -51,9 +51,9 @@ const NewMenuItemPage = () => {
 
 
   return (
-    <div className='px-5 mb-10'>
+    <div className='mb-10'>
         <UserTab isAdmin={true}/>
-        <div className='max-w-md mx-auto mt-10'>
+        <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}/>
@@ -73,7 +73,7 @@ const NewMenuItemPage = () => {
                 <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-pink-500 hover:opacity-60 duration-300'>Show all menu items</Link>
+                <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>
diff --git a/donutshop_ecommerce/src/app/menu-items/page.js b/donutshop_ecommerce/src/app/menu-items/page.js
index 238ceac..98f0e46 100644
--- a/donutshop_ecommerce/src/app/menu-items/page.js
+++ b/donutshop_ecommerce/src/app/menu-items/page.js
@@ -4,6 +4,7 @@ import { IoMdAddCircle } from "react-icons/io";
 import useProfile from '../../components/UseProfile'
 import UserTab from '../../components/layout/UserTab';
 import Link from 'next/link';
+import Image from 'next/image';
 
 const MenuItemsPage = () => {
     const {loading, data} = useProfile();
@@ -26,17 +27,22 @@ const MenuItemsPage = () => {
     
 
   return (
-    <div className='px-5 mb-10'>
+    <div className='mb-10'>
         <UserTab isAdmin={true}/>
-        <div className='max-w-md mx-auto mt-10'>
+        <div className='px-5 max-w-md mx-auto mt-10'>
             <Link href={'/menu-items/new'} className='w-full border p-2 flex justify-between items-center my-2 rounded-md outline-none border-[#DCA0AE]'>Create new menu item 
                 <IoMdAddCircle className='text-lg text-pink-500'/>
             </Link>
         </div>
-        <div className='max-w-md mx-auto'>
+        <div className='px-5 max-w-md mx-auto'>
             <p className='mt-10 text-sm text-gray-700 -mb-2 font-semibold'>Edit menu items</p>
             {menuItems?.length > 0 && menuItems.map(item => (
-                <button className='w-full p-2 flex justify-center items-center my-2 rounded-md outline-none border border-pink-500 hover:opacity-60 duration-300'>{item.itemName}</button>
+                <Link href={'/menu-items/edit/'+item._id} className='w-full p-2 flex justify-between items-center my-2 rounded-md outline-none border border-[#DCA0AE] hover:opacity-60 duration-300 text-gray-800 font-semibold text-sm'>
+                    <div className='relative'>
+                        <Image src={item.menuImg} alt='menu-item-img' width={60} height={60}/>
+                    </div>
+                    {item.itemName}
+                </Link>
             ))}
         </div>
     </div>