diff --git a/Websites/jefes-nextjs/app/layout.tsx b/Websites/jefes-nextjs/app/layout.tsx
index 2c3912f..612b34b 100644
--- a/Websites/jefes-nextjs/app/layout.tsx
+++ b/Websites/jefes-nextjs/app/layout.tsx
@@ -7,7 +7,7 @@ import Footer from "@/components/Footer/footer";
 import localFont from 'next/font/local';
 import './layout.css'
 
-const inter = Inter({ subsets: ["latin"] });
+// const inter = Inter({ subsets: ["latin"] });
 const robleAlt = localFont({
   src: './RobleAlt.woff',
   display: 'swap',
diff --git a/Websites/jefes-nextjs/app/menu/Bar/Inter-Bold.woff b/Websites/jefes-nextjs/app/menu/Bar/Inter-Bold.woff
new file mode 100644
index 0000000..827d6d0
Binary files /dev/null and b/Websites/jefes-nextjs/app/menu/Bar/Inter-Bold.woff differ
diff --git a/Websites/jefes-nextjs/app/menu/Bar/Inter-ExtraBold.woff b/Websites/jefes-nextjs/app/menu/Bar/Inter-ExtraBold.woff
new file mode 100644
index 0000000..eb21edc
Binary files /dev/null and b/Websites/jefes-nextjs/app/menu/Bar/Inter-ExtraBold.woff differ
diff --git a/Websites/jefes-nextjs/app/menu/Bar/items.json b/Websites/jefes-nextjs/app/menu/Bar/items.json
index 0eb91ba..de948b9 100644
--- a/Websites/jefes-nextjs/app/menu/Bar/items.json
+++ b/Websites/jefes-nextjs/app/menu/Bar/items.json
@@ -38,5 +38,13 @@
         "price": 13,
         "size": "24oz",
         "description": "Corona with tamarindo."
+    },
+    {
+        "id": 6,
+        "name": "Cheesy Mac & Cheese With a Fruit Cup",
+        "photo": "Bar/Michelada.jpeg",
+        "price": 13,
+        "size": "24oz",
+        "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
     }
 ]
\ No newline at end of file
diff --git a/Websites/jefes-nextjs/app/menu/Bar/page.tsx b/Websites/jefes-nextjs/app/menu/Bar/page.tsx
index 3102e6d..6643862 100644
--- a/Websites/jefes-nextjs/app/menu/Bar/page.tsx
+++ b/Websites/jefes-nextjs/app/menu/Bar/page.tsx
@@ -1,81 +1,81 @@
+"use client";
 import * as React from "react";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import Menu from "./items.json";
 import Image from "next/image";
+import localFont from 'next/font/local';
+
+const interBold = localFont({
+  src: './Inter-Bold.woff',
+  display: 'swap',
+})
 
 const Bar = () => {
+  let pic = "cover";
   return (
     <main>
-      {/* Mapping out the menu
-      <div className=" flex flex-wrap gap-8 pt-6 justify-between w-full">
+      <div className="flex flex-wrap gap-8">
         {Menu.map((menu_item) => {
           return (
-            <div
-              key={menu_item.id}
-              className="flex flex-col flex-grow h-[452px] w-[325px] rounded-lg shadow-xl drop-shadow-xl"
-            >
-              <div className="h-[55%] relative w-full overflow-hidden">
-                <Image
-                  src={`/${menu_item.photo}`}
-                  alt="chili pepper spice"
-                  fill
-                  style={{ objectFit: "cover", objectPosition: "center" }}
-                  quality={100}
-                  className="rounded-t-lg"
-                />
-              </div>
-              <h4 className="">
-                <strong>{menu_item.name}</strong>
-              </h4>
-              <p className="max-w-[75ch]">
-                Description: {menu_item.description}
-              </p>
-              <div className="flex flex-row  justify-evenly">
-                <div className=" flex flex-row">
-                  <span>{`$${menu_item.price}`}</span>
+            <Card key={menu_item.id} className="flex flex-grow flex-col w-[325px] h-[452px]">
+              <div className="w-full h-[55%]">
+                <div className="h-full relative w-full">
+                  <Image
+                    src={`/${menu_item.photo}`}
+                    alt="chili pepper spice"
+                    fill
+                    style={{ objectFit: "cover", objectPosition: "center" }}
+                    quality={100}
+                    className="rounded-t-lg"
+                  />
                 </div>
-                <div className="flex  w-1/2 relative">
-                  <div className="flex  w-3 h-full items-end justify-end">
-                    <div className=""></div>
+              </div>
+              <div className="m-[8px] space-y-[4px]">
+                {/* title and description of item  */}
+                <div className="w-full font-sans">
+                  {/* title and photo */}
+                  <div className="inline-block">
+                    <h4 className={`pt-2 float-left ${interBold.className}`}>
+                      <strong>{menu_item.name}</strong>
+                    </h4>
+                    {/* <div className="bg-red-300 float-right relative w-[25px] h-[25px]">
+                      <Image
+                        src="/red-chili-pepper.svg"
+                        alt="chili pepper spice"
+                        fill
+                        style={{
+                          objectFit: "contain",
+                        }}
+                        quality={100}
+                        className=""
+                      />
+                    </div> */}
+                  </div>
+                  {/* paragraph text */}
+                  <div className="inline-block text-left">
+                    {/* <p className="max-w-[75ch]">
+                      Description: {menu_item.description}
+                    </p> */}
+                    {/* 16px line height */}
+                    <p className="leading-4 text-[#8F8F8F]">
+                      {menu_item.description}
+                    </p>
+                  </div>
+                </div>
+                {/* cart addon */}
+                <div className="flex flex-row">
+                  <div className=" flex flex-row">
+                    <strong>{`$${menu_item.price}`}</strong>
+                  </div>
+                  <div className="flex  w-1/2 relative">
+                    <div className="flex  w-3 h-full items-end justify-end">
+                      <div className=""></div>
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
-          );
-        })}
-      </div> */}
-      <div>
-        {Menu.map((menu_item) => {
-          return (
-                <Card key={menu_item.id} className="flex flex-wrap gap-8 pt-6 justify-evenly w-[325px] h-[452px]">
-                  <CardHeader className="h-full relative w-full overflow-hidden">
-                    <Image
-                      src={`/${menu_item.photo}`}
-                      alt="chili pepper spice"
-                      fill
-                      style={{ objectFit: "cover", objectPosition: "center" }}
-                      quality={100}
-                      className="rounded-t-lg"
-                    />
-                  </CardHeader>
-                  <h4 className="">
-                    <strong>{menu_item.name}</strong>
-                  </h4>
-                  <p className="max-w-[75ch]">
-                    Description: {menu_item.description}
-                  </p>
-                  <div className="flex flex-row  justify-evenly">
-                    <div className=" flex flex-row">
-                      <span>{`$${menu_item.price}`}</span>
-                    </div>
-                    <div className="flex  w-1/2 relative">
-                      <div className="flex  w-3 h-full items-end justify-end">
-                        <div className=""></div>
-                      </div>
-                    </div>
-                  </div>
-                </Card>
+            </Card>
           );
         })}
       </div>
diff --git a/Websites/jefes-nextjs/public/Bar/100ozTower.jpeg b/Websites/jefes-nextjs/public/Bar/100ozTower.jpeg
index a125058..47e52da 100644
Binary files a/Websites/jefes-nextjs/public/Bar/100ozTower.jpeg and b/Websites/jefes-nextjs/public/Bar/100ozTower.jpeg differ
diff --git a/Websites/jefes-nextjs/tailwind.config.ts b/Websites/jefes-nextjs/tailwind.config.ts
index fba46e5..0428c83 100644
--- a/Websites/jefes-nextjs/tailwind.config.ts
+++ b/Websites/jefes-nextjs/tailwind.config.ts
@@ -1,4 +1,7 @@
 /** @type {import('tailwindcss').Config} */
+
+
+
 module.exports = {
   darkMode: ["class"],
   content: [