diff --git a/frontend/public/batch1/files_list.json b/frontend/public/batch1/files_list.json
index 82f9f07..8dbe018 100644
--- a/frontend/public/batch1/files_list.json
+++ b/frontend/public/batch1/files_list.json
@@ -15,7 +15,7 @@
         "photo": "batch1/Mockup 134.jpg",
         "price": 25,
         "size": "Youth-S/M/L/2XL | Adult-S/M/L/2XL",
-        "inStock": "yes",
+        "inStock": "no",
         "favorite": "no",
         "description": "It's not an option.."
     },
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index 3adc04f..1f3e1a5 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -11,6 +11,7 @@ import { Poppins } from "next/font/google";
 
 const Popp = Poppins({ weight: "400", subsets: ["latin"] });
 
+// improve to drag & drop side cart for more fun
 
 export default function Home() {
   const [isOpen, setIsOpen] = React.useState(false);
diff --git a/frontend/src/components/ui/MenuCard/MenuCard.tsx b/frontend/src/components/ui/MenuCard/MenuCard.tsx
index 0c3c3eb..0117d11 100644
--- a/frontend/src/components/ui/MenuCard/MenuCard.tsx
+++ b/frontend/src/components/ui/MenuCard/MenuCard.tsx
@@ -43,20 +43,21 @@ const MenuCard = ({ Menu }: any) => {
             </div>
             <div className="m-[8px] space-y-[4px]">
               {/* title and description of item  */}
-              <div className="flex flex-col w-full font-sans">
+              <div className="flex flex-col w-full font-sans text-center">
                 {/* title and photo */}
-                <div className="inline-block">
+                <div className="flex flex-col items-center justify-center text-start">
                   <h4
-                    className={`pt-2 float-left ${Popp.className} flex-wrap w-3/4 text-emerald-500`}
+                    className={`pt-2 float-left ${Popp.className} flex-wrap w-3/4 text-[#EEEEEE]`}
                   >
-                    <strong>{menu_item.name}</strong>
+                    <strong>{menu_item.id}</strong>
                   </h4>
-                  <div className="right-4 absolute h-[25px] flex flex-row w-1/4 mt-2 text-orange-500">
+                  <div className="right-2 absolute h-[25px] flex flex-row w-1/4 mt-2 text-[#7B9922]">
                     {menu_item.inStock === "yes" ? (
                       <span>In Stock!</span>
                     ) : (
-                      <span>Out of Stock</span>
+                      <span className="text-orange-600">Out of Stock</span>
                     )}
+                    {/* Check if item is a favorite */}
                     {menu_item.favorite === "yes" ? (
                       <Image
                         src="/star.svg"
@@ -76,13 +77,13 @@ const MenuCard = ({ Menu }: any) => {
                   </div>
                 </div>
                 {/* description text */}
-                <div className="inline-block text-left pt-2">
+                {/* <div className="inline-block text-left pt-2">
                   <p
                     className={`max-w-[75ch] ${Popp.className} leading-tight font-[12px] text-blue-400 `}
                   >
                     {menu_item.description}
                   </p>
-                </div>
+                </div> */}
               </div>
             </div>
           </Card>