diff --git a/donutshop_ecommerce/package-lock.json b/donutshop_ecommerce/package-lock.json
index b2eadea..9e86627 100644
--- a/donutshop_ecommerce/package-lock.json
+++ b/donutshop_ecommerce/package-lock.json
@@ -12,6 +12,7 @@
         "@aws-sdk/client-s3": "^3.576.0",
         "bcrypt": "^5.1.1",
         "framer-motion": "^11.1.8",
+        "gsap": "^3.12.5",
         "mongodb": "^6.6.1",
         "mongoose": "^8.3.4",
         "next": "14.2.3",
@@ -4787,6 +4788,11 @@
       "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
       "dev": true
     },
+    "node_modules/gsap": {
+      "version": "3.12.5",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.12.5.tgz",
+      "integrity": "sha512-srBfnk4n+Oe/ZnMIOXt3gT605BX9x5+rh/prT2F1SsNJsU1XuMiP0E2aptW481OnonOGACZWBqseH5Z7csHxhQ=="
+    },
     "node_modules/has-bigints": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
diff --git a/donutshop_ecommerce/package.json b/donutshop_ecommerce/package.json
index c7003c8..c10905b 100644
--- a/donutshop_ecommerce/package.json
+++ b/donutshop_ecommerce/package.json
@@ -13,6 +13,7 @@
     "@aws-sdk/client-s3": "^3.576.0",
     "bcrypt": "^5.1.1",
     "framer-motion": "^11.1.8",
+    "gsap": "^3.12.5",
     "mongodb": "^6.6.1",
     "mongoose": "^8.3.4",
     "next": "14.2.3",
diff --git a/donutshop_ecommerce/public/donut-story.jpg b/donutshop_ecommerce/public/donut-story.jpg
new file mode 100644
index 0000000..8e860aa
Binary files /dev/null and b/donutshop_ecommerce/public/donut-story.jpg differ
diff --git a/donutshop_ecommerce/public/story.jpg b/donutshop_ecommerce/public/story.jpg
new file mode 100644
index 0000000..bfa01fb
Binary files /dev/null and b/donutshop_ecommerce/public/story.jpg differ
diff --git a/donutshop_ecommerce/src/app/about/page.js b/donutshop_ecommerce/src/app/about/page.js
new file mode 100644
index 0000000..d966f58
--- /dev/null
+++ b/donutshop_ecommerce/src/app/about/page.js
@@ -0,0 +1,37 @@
+"use client"
+import Image from 'next/image'
+import React from 'react'
+
+
+const AboutPage = () => {
+  
+  return (
+    <>
+      <div className='w-full h-full lg:h-screen flex flex-col relative'>
+        <p className='text-center mt-20 uppercase text-6xl md:text-[90px] lg:text-[125px] xl:text-[150px] leading-none text-black font-extrabold tracking-tighter drop-shadow-[0_3px_3px_rgba(45,45,45,0.5)] px-5'>our story</p>
+        <Image src='/donut-story.jpg' width={1600} height={1600} alt='home-hero' className='w-full h-[400px] sm:h-full object-cover -mt-5 sm:-mt-10 -z-10'/>
+      </div>
+      <div className='bg-[#FAF3E8] -mt-10 w-full h-full rounded-t-3xl'>
+        <div className='max-w-4xl mx-auto'>
+          <div className='flex flex-col gap-4 pt-20 lg:pt-40 pb-10 sm:pb-20 px-5 sm:px-10 text-center text-lg sm:text-2xl lg:text-3xl'>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, ut labore et dolore magna aliqua.</p> 
+            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat sed do eiusmod tempor incididunt.</p> 
+            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
+          </div>
+          <div className='px-5 lg:px-10'>
+            <svg width="159" height="406" viewBox="0 0 159 406" fill="none" xmlns="http://www.w3.org/2000/svg" className='absolute -mt-20'><path d="M147.909 405.212C148.569 405.713 149.51 405.584 150.01 404.924L158.174 394.172C158.674 393.512 158.546 392.571 157.886 392.07C157.226 391.569 156.285 391.698 155.784 392.358L148.528 401.915L138.97 394.659C138.311 394.159 137.37 394.287 136.869 394.947C136.368 395.607 136.496 396.548 137.156 397.049L147.909 405.212ZM38.4791 0.233987C23.3568 28.9106 5.51875 76.4686 1.12258 126.046C-3.27307 175.618 5.75683 227.476 44.7273 264.351L46.7892 262.171C8.75375 226.182 -0.243382 175.416 4.11086 126.311C8.46457 77.2124 26.1533 30.039 41.1327 1.63335L38.4791 0.233987ZM44.7273 264.351C83.1605 300.717 108.28 331.68 124.062 355.58C139.879 379.532 146.242 396.278 147.33 404.221L150.302 403.814C149.122 395.198 142.46 377.997 126.566 353.927C110.638 329.806 85.3619 298.67 46.7892 262.171L44.7273 264.351Z" fill="#DB001C"/></svg>
+          </div>
+          <div className='flex justify-center items-center pb-10 sm:pb-20 px-5 sm:px-10'>
+            <Image src='/story.jpg' width={1000} height={1000} className='w-[800px] h-[500px] rounded-3xl object-cover'/>
+          </div>
+          <div className='flex flex-col gap-4 pt-0 pb-20 px-5 sm:px-10 text-center text-xl sm:text-2xl lg:text-3xl'>
+            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat sed do eiusmod tempor incididunt.</p> 
+            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default AboutPage
\ No newline at end of file
diff --git a/donutshop_ecommerce/src/app/cart/page.js b/donutshop_ecommerce/src/app/cart/page.js
index c3203d7..c985a0a 100644
--- a/donutshop_ecommerce/src/app/cart/page.js
+++ b/donutshop_ecommerce/src/app/cart/page.js
@@ -81,7 +81,7 @@ const CartPage = () => {
                         <p className='text-center mt-10'>Your cart is empty</p>
                     )}
                     {cartProducts?.length > 0 &&  cartProducts.map((product, index) => (
-                        <div className='flex gap-2 justify-between items-center border-b'>
+                        <div key={index} className='flex gap-2 justify-between items-center border-b'>
                             <div className='flex items-center gap-0 lg:gap-2'>
                                 <div className='w-[60px] sm:w-[100px] flex items-center justify-center py-2'>
                                     <Image src={product.menuImg} alt='' width={100} height={100} className='w-[45px] sm:w-[65px] lg:w-[80px]'/>
diff --git a/donutshop_ecommerce/src/app/categories/page.js b/donutshop_ecommerce/src/app/categories/page.js
index 83724e7..0b963ad 100644
--- a/donutshop_ecommerce/src/app/categories/page.js
+++ b/donutshop_ecommerce/src/app/categories/page.js
@@ -109,7 +109,7 @@ const CategoriesPage = () => {
         <div className='mt-5'>
             <label className='-mb-1 text-gray-700 font-semibold text-sm'>Categories</label>
             {categories?.length > 0 && categories.map(c => (
-                <div className='w-full p-2 flex justify-between my-2 rounded-md outline-none border border-[#DCA0AE] duration-300'>
+                <div key={c._id} className='w-full p-2 flex justify-between my-2 rounded-md outline-none border border-[#DCA0AE] duration-300'>
                     <p>{c.name}</p>
                     <div className='flex gap-2'>
                         <button type='button' onClick={() => {setEditCategory(c); setCategoryName(c.name)}} className='text-green-600 hover:opacity-60'><LiaEditSolid/></button>
diff --git a/donutshop_ecommerce/src/app/globals.css b/donutshop_ecommerce/src/app/globals.css
index dd2d5e6..7062a30 100644
--- a/donutshop_ecommerce/src/app/globals.css
+++ b/donutshop_ecommerce/src/app/globals.css
@@ -39,9 +39,6 @@ div.tabs > *{
 div.tabs > *.active{
   @apply bg-pink-500 text-white font-semibold
 }
-
-
-
 /*=====Responsive=====*/
 @media (min-width: 765px){
   .letter {
diff --git a/donutshop_ecommerce/src/app/layout.js b/donutshop_ecommerce/src/app/layout.js
index cdd5652..4baf360 100644
--- a/donutshop_ecommerce/src/app/layout.js
+++ b/donutshop_ecommerce/src/app/layout.js
@@ -1,10 +1,17 @@
 import { Inter } from "next/font/google";
+import { Creepster } from "next/font/google";
 import "./globals.css";
 import Header from "../components/layout/Header";
 import AppProvider from "../components/AppContext";
 import { Toaster } from "react-hot-toast";
 
 const inter = Inter({ subsets: ["latin"] });
+const creepster = Creepster({
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-creepster',
+  weight: '400',
+})
 
 export const metadata = {
   title: "Puffy Dough | Donuts, Coffee, and Drinks",
@@ -15,7 +22,7 @@ export default function RootLayout({ children }) {
   return (
     <html lang="en">
       <link rel="shortcut icon" href="/favicon.png" />
-      <body className={inter.className} suppressHydrationWarning={true}>
+      <body className={`${inter.className} ${creepster.variable}`} suppressHydrationWarning={true}>
         <AppProvider>
           <Toaster/>
           <Header/>
diff --git a/donutshop_ecommerce/src/app/menu-items/page.js b/donutshop_ecommerce/src/app/menu-items/page.js
index 98f0e46..cdcd894 100644
--- a/donutshop_ecommerce/src/app/menu-items/page.js
+++ b/donutshop_ecommerce/src/app/menu-items/page.js
@@ -37,7 +37,7 @@ const MenuItemsPage = () => {
         <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 => (
-                <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'>
+                <Link key={item._id} 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>
diff --git a/donutshop_ecommerce/src/app/menu/page.js b/donutshop_ecommerce/src/app/menu/page.js
index 189e050..b7eceee 100644
--- a/donutshop_ecommerce/src/app/menu/page.js
+++ b/donutshop_ecommerce/src/app/menu/page.js
@@ -21,11 +21,11 @@ const MenuPage = () => {
   return (
     <div className='pb-20 md:pb-40'>
         {categories?.length > 0 && categories.map(c => (
-            <div className='px-10 min-[380px]:px-5 lg:px-10 py-5 sm:py-10'>
+            <div key={c._id} className='px-10 min-[380px]:px-5 lg:px-10 py-5 sm:py-10'>
                 <p className='text-center text-2xl sm:text-3xl md:text-4xl text-pink-500 uppercase font-bold drop-shadow-[0_2px_2px_rgba(105,105,105,1)]'>{c.name}</p>
                 <div className='grid grid-cols-1 min-[380px]:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4 min-[380px]:gap-5 mt-5 sm:mt-10'>
                     {menuItems.filter(item => item.category === c._id).map(item => (
-                        <Menu {...item}/>
+                        <Menu key={item._id} {...item}/>
                     ))}
                 </div>
             </div>
diff --git a/donutshop_ecommerce/src/app/orders/[id]/page.js b/donutshop_ecommerce/src/app/orders/[id]/page.js
index 176638a..7a26cf0 100644
--- a/donutshop_ecommerce/src/app/orders/[id]/page.js
+++ b/donutshop_ecommerce/src/app/orders/[id]/page.js
@@ -58,7 +58,7 @@ const OrdersPage = () => {
                     <div className='border-b pb-5'>
                         <p className='mb-5 text-pink-500 font-semibold text-center'>Order Summary</p>
                         {order.cartProducts.map(product => (
-                            <div className='flex justify-between'>
+                            <div key={product._id} className='flex justify-between'>
                                 <div>
                                     <p className='w-[150px] lg:w-[300px] text-ellipsis whitespace-nowrap overflow-hidden text-gray-800 text-xs sm:text-sm font-bold'>{product.itemName}</p>
                                     {product.size && (
@@ -66,7 +66,7 @@ const OrdersPage = () => {
                                     )}
                                     {product.extra?.length > 0 && (
                                         <div className='text-gray-800 font-semibold text-xs sm:text-sm flex gap-1 items-center'>Add: {product.extra.map(extras => (
-                                            <span className='text-[10px] sm:text-xs text-gray-600'>{extras.itemName} (+${extras.price})</span>
+                                            <span key={extras._id} className='text-[10px] sm:text-xs text-gray-600'>{extras.itemName} (+${extras.price})</span>
                                             ))}
                                         </div>
                                     )}
diff --git a/donutshop_ecommerce/src/app/orders/page.js b/donutshop_ecommerce/src/app/orders/page.js
index f2e9c7a..2c155ad 100644
--- a/donutshop_ecommerce/src/app/orders/page.js
+++ b/donutshop_ecommerce/src/app/orders/page.js
@@ -37,7 +37,7 @@ const OrderPage = () => {
         <UserTab isAdmin={true}/>
         <div className='max-w-md mx-auto mt-10'>
             {orders?.length > 0 && orders.map((order) => (
-                <div className='border p-2 my-2 w-full rounded-md outline-none border-[#DCA0AE] flex items-center justify-between'>
+                <div key={order._id} className='border p-2 my-2 w-full rounded-md outline-none border-[#DCA0AE] flex items-center justify-between'>
                     <div className='flex flex-col gap-2'>
                         <div className='text-gray-700 font-semibold'>{order.userEmail}</div>
                         <div className='mb-2'>
diff --git a/donutshop_ecommerce/src/app/users/page.js b/donutshop_ecommerce/src/app/users/page.js
index 720714d..8bbc351 100644
--- a/donutshop_ecommerce/src/app/users/page.js
+++ b/donutshop_ecommerce/src/app/users/page.js
@@ -32,7 +32,7 @@ const Userspage = () => {
         <UserTab isAdmin={true}/>
         <div className='max-w-md mx-auto mt-10'>
             {users?.length > 0 && users.map(user => (
-                <div className='border p-2 my-2 w-full rounded-md outline-none border-[#DCA0AE] flex items-center justify-between'>
+                <div key={user._id} className='border p-2 my-2 w-full rounded-md outline-none border-[#DCA0AE] flex items-center justify-between'>
                     <div className='flex flex-col'>
                         <div className='text-gray-700 font-semibold'>
                             {!!user.name && (
diff --git a/donutshop_ecommerce/src/components/layout/AddressInfo.js b/donutshop_ecommerce/src/components/layout/AddressInfo.js
index b377497..3e31e72 100644
--- a/donutshop_ecommerce/src/components/layout/AddressInfo.js
+++ b/donutshop_ecommerce/src/components/layout/AddressInfo.js
@@ -7,29 +7,29 @@ const AddressInfo = ({addressProps, setAddressProps, disabled=false}) => {
     <>
         <div>
             <label className='text-gray-700 text-sm font-semibold'>Phone number</label>
-            <input type='tel' placeholder='Phone number' value={phoneNumber} onChange={ev => setAddressProps('phoneNumber', ev.target.value)} disabled={disabled} className=' disabled:bg-gray-100 disabled:text-gray-400'/>
+            <input type='tel' placeholder='Phone number' value={phoneNumber || ''} onChange={ev => setAddressProps('phoneNumber', ev.target.value)} disabled={disabled} className=' disabled:bg-gray-100 disabled:text-gray-400'/>
         </div>
         <div>
             <label className='text-gray-700 text-sm font-semibold'>Street Address</label>
-            <input type='text' placeholder='Address' value={streetAddress} onChange={ev => setAddressProps('streetAddress', ev.target.value)} disabled={disabled} className=' disabled:bg-gray-100 disabled:text-gray-400'/>
+            <input type='text' placeholder='Address' value={streetAddress || ''} onChange={ev => setAddressProps('streetAddress', ev.target.value)} disabled={disabled} className=' disabled:bg-gray-100 disabled:text-gray-400'/>
         </div>
         <div>
             <label className='text-gray-700 text-sm font-semibold'>City</label>
-            <input type='text' placeholder='City' value={city} onChange={ev => setAddressProps('city', ev.target.value)} disabled={disabled} className=' disabled:bg-gray-100 disabled:text-gray-400'/>
+            <input type='text' placeholder='City' value={city || ''} onChange={ev => setAddressProps('city', ev.target.value)} disabled={disabled} className=' disabled:bg-gray-100 disabled:text-gray-400'/>
         </div>
         <div className='flex flex-col sm:flex-row gap-0 sm:gap-2'>
             <div>
               <label className='text-gray-700 text-sm font-semibold'>State/Province</label>
-              <input type='text' placeholder='State/Province' value={stateProvince} onChange={ev => setAddressProps('stateProvince', ev.target.value)} disabled={disabled} className=' disabled:bg-gray-100 disabled:text-gray-400'/>
+              <input type='text' placeholder='State/Province' value={stateProvince || ''} onChange={ev => setAddressProps('stateProvince', ev.target.value)} disabled={disabled} className=' disabled:bg-gray-100 disabled:text-gray-400'/>
             </div>
             <div>
               <label className='text-gray-700 text-sm font-semibold'>Zip/Postal code</label>
-              <input type='text' placeholder='Zip/Postal code' value={zipCode} onChange={ev => setAddressProps('zipCode', ev.target.value)} disabled={disabled} className=' disabled:bg-gray-100 disabled:text-gray-400'/>
+              <input type='text' placeholder='Zip/Postal code' value={zipCode || ''} onChange={ev => setAddressProps('zipCode', ev.target.value)} disabled={disabled} className=' disabled:bg-gray-100 disabled:text-gray-400'/>
             </div>
         </div>
         <div>
             <label className='text-gray-700 text-sm font-semibold'>Country</label>
-            <input type='text' placeholder='Country' value={country} onChange={ev => setAddressProps('country', ev.target.value)} disabled={disabled} className=' disabled:bg-gray-100 disabled:text-gray-400'/>
+            <input type='text' placeholder='Country' value={country || ''} onChange={ev => setAddressProps('country', ev.target.value)} disabled={disabled} className=' disabled:bg-gray-100 disabled:text-gray-400'/>
         </div>
     </>
   )
diff --git a/donutshop_ecommerce/src/components/layout/Header.js b/donutshop_ecommerce/src/components/layout/Header.js
index 77c5d02..566dcb6 100644
--- a/donutshop_ecommerce/src/components/layout/Header.js
+++ b/donutshop_ecommerce/src/components/layout/Header.js
@@ -49,8 +49,8 @@ const Header = () => {
                 <ul className="hidden md:flex flex-row gap-10 text-xs font-semibold uppercase text-[#95743D]">
                 <Link href='/' className="">Home</Link>
                 <Link href='/menu' className="">Menu</Link>
-                <Link href='' className="">about</Link>
-                <Link href='' className="">contact</Link>
+                <Link href='/about' className="">about</Link>
+                <Link href='/contact' className="">contact</Link>
                 </ul>
             </div>
             <div className='mt-3'>
@@ -73,13 +73,31 @@ const Header = () => {
                 </ul>
                 <div onClick={() => setNav(!nav)} className="cursor-pointer pr-4 z-20 text-[#95743D] md:hidden "> {nav ? <IoCloseOutline size={30} /> : <HiBars2 size={30} />}</div>
                 {nav && (
-                    <ul className="w-full h-screen flex justify-center items-center text-center absolute top-0 left-0  bg-gradient-to-b from-[#f8cdc6] to-[#FDE2DE] text-[#95743D] z-10">
-                    <li onClick={() => setNav(!nav)} className="flex flex-col gap-4 cursor-pointer capitalize text-3xl">
-                        <Link  href='/'>Home</Link>
-                        <Link  href='/menu'>menu</Link>
-                        <Link  href=''>about</Link>
-                        <Link  href=''>contact</Link>
-                        <Link  href=''>login</Link>
+                    <ul className="w-full h-[80%] flex justify-start items-center text-center absolute top-0 left-0 bg-gradient-to-b from-[#f8cdc6] to-[#FDE2DE] text-[#95743D] z-10">
+                    <li onClick={() => setNav(!nav)} className="w-full flex flex-col gap-5 cursor-pointer capitalize text-xl px-5">
+                        <div className="flex flex-col gap-20 justify-between">
+                            <div className="flex flex-col gap-3">
+                                <Link  href='/'>Home</Link>
+                                <Link  href='/menu' >menu</Link>
+                                <Link  href='/about' >about</Link>
+                                <Link  href='/contact' >contact</Link>
+                            </div>
+                            <div className="flex flex-col gap-2 items-center text-lg">
+                                {status === 'authenticated' && (
+                                    <>
+                                        <Link href={'/profile'} className="text-gray-700 text-sm capitalize">{userName}</Link>
+                                        <Link href='/cart' className="flex gap-1 items-center text-sm">Your cart({cartProducts.length})</Link>
+                                        <button onClick={() => signOut()} className="w-[100px] p-1 border border-[#95743D] rounded-full">Logout</button>
+                                    </>
+                                )}
+                                {status === 'unauthenticated' && (
+                                    <>
+                                        <Link  href='/login' className="border border-[#95743D] p-1 w-[100px] rounded-full">login</Link>
+                                        <Link  href='/register' className="bg-[#95743D] p-1 w-[100px] text-white rounded-full">Register</Link>
+                                    </>
+                                )}
+                            </div>
+                        </div>
                     </li>        
                     </ul>
                 )}
diff --git a/donutshop_ecommerce/src/components/layout/HomeMenu.js b/donutshop_ecommerce/src/components/layout/HomeMenu.js
index 71f0cfd..678afca 100644
--- a/donutshop_ecommerce/src/components/layout/HomeMenu.js
+++ b/donutshop_ecommerce/src/components/layout/HomeMenu.js
@@ -79,8 +79,8 @@ const HomeDrink = () => {
       <div className='py-2 sm:py-10 px-10'>
         <Slider arrows={false} {...menuSlide}>
           {bestSeller?.length > 0 && bestSeller.map(item => (
-            <div className='px-2'>
-              <MenuItem {...item}/>
+            <div key={item} className='px-2'>
+              <MenuItem  {...item}/>
             </div>
           ))}
         </Slider>
diff --git a/donutshop_ecommerce/src/components/layout/MenuItemForm.js b/donutshop_ecommerce/src/components/layout/MenuItemForm.js
index a1fdf97..6f0798c 100644
--- a/donutshop_ecommerce/src/components/layout/MenuItemForm.js
+++ b/donutshop_ecommerce/src/components/layout/MenuItemForm.js
@@ -32,7 +32,7 @@ const MenuItemForm = ({handleMenuFormSubmit, menuItem}) => {
             <label className='-mb-1 text-gray-700 font-semibold text-sm flex'>Category</label>
             <select value={category} onChange={ev => setCategory(ev.target.value)} className='border p-2 block my-2 w-full rounded-md outline-none border-[#DCA0AE] bg-transparent'>
                 {categories?.length > 0 && categories.map(c => (
-                    <option value={c._id} >{c.name}</option>
+                    <option key={c._id} value={c._id} >{c.name}</option>
                 ))}
             </select>
         </div>
diff --git a/donutshop_ecommerce/src/components/layout/UserForm.js b/donutshop_ecommerce/src/components/layout/UserForm.js
index e0c7b84..578335a 100644
--- a/donutshop_ecommerce/src/components/layout/UserForm.js
+++ b/donutshop_ecommerce/src/components/layout/UserForm.js
@@ -45,7 +45,7 @@ const UserForm = ({user, onSave}) => {
           {loginAsUser.admin && (
             <div className='flex gap-2 items-center mb-5'>
               <label htmlFor='admin' className='text-gray-700 text-sm font-semibold'>Admin:</label>
-              <input type='checkbox' id='admin' value={'1'} checked={admin} onClick={ev => setAdmin(ev.target.checked)}/>
+              <input type='checkbox' id='admin' value={'1'} checked={admin} onChange={ev => setAdmin(ev.target.checked)}/>
             </div>
           )}
           <button className='w-full bg-pink-500 text-white p-2 rounded-md hover:opacity-80 duration-300 disabled:cursor-not-allowed'>Save</button>
diff --git a/donutshop_ecommerce/src/components/menu/Menu.js b/donutshop_ecommerce/src/components/menu/Menu.js
index 8907511..b8b87d0 100644
--- a/donutshop_ecommerce/src/components/menu/Menu.js
+++ b/donutshop_ecommerce/src/components/menu/Menu.js
@@ -61,8 +61,8 @@ const Menu = (menuItem) => {
                 <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 key={size._id} className='flex justify-start text-start text-xs sm:text-sm gap-2 py-1'>
+                      <input type='radio' name='size' onChange={() => setSelectedsize(size)} checked={selectedSize?.itemName === size.itemName}/>{size.itemName} ${basePrice + size.price}
                     </div>
                   ))}
                 </div>
@@ -71,8 +71,8 @@ const Menu = (menuItem) => {
                 <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 key={extraTopping._id} className='flex justify-start text-start text-xs sm:text-sm gap-2 py-1'>
+                      <input type='checkbox' name={extraTopping.itemName} onChange={ev => handleSelectedTopping(ev, extraTopping)}/>{extraTopping.itemName} (${extraTopping.price})
                     </div>
                   ))}
                 </div>
diff --git a/donutshop_ecommerce/tailwind.config.js b/donutshop_ecommerce/tailwind.config.js
index 7980350..0847a68 100644
--- a/donutshop_ecommerce/tailwind.config.js
+++ b/donutshop_ecommerce/tailwind.config.js
@@ -12,6 +12,9 @@ module.exports = {
         "gradient-conic":
           "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
       },
+      fontFamily: {
+        creepSter: ["var(--font-creepster)"],
+      },
     },
   },
   plugins: [],