diff --git a/Websites/jefes-nextjs/app/about-us/page.tsx b/Websites/jefes-nextjs/app/about-us/page.tsx
index 9461299..7b00daf 100644
--- a/Websites/jefes-nextjs/app/about-us/page.tsx
+++ b/Websites/jefes-nextjs/app/about-us/page.tsx
@@ -57,31 +57,33 @@ const AboutUs = () => {
                 Jefes Mexican Cantina & Cocina
               </div>
             </div>
-            <p>
-              My name is Kevin Aguilar, and I am the owner and manager of the
-              Jefes Mexican Cantina and Cocina based in Broken Arrow, Oklahoma.
-              Our combination of authentic Mexican dishes, excellent customer
-              service, and family-friendly environment makes us one of the best
-              Mexican restaurants around.
-            </p>
+            <div className="text-xl max-w-[75ch] space-y-4">
+              <p>
+                My name is Kevin Aguilar, and I am the owner and manager of the
+                Jefes Mexican Cantina and Cocina based in Broken Arrow,
+                Oklahoma. Our combination of authentic Mexican dishes, excellent
+                customer service, and family-friendly environment makes us one
+                of the best Mexican restaurants around.
+              </p>
 
-            <p>
-              Whether you are wanting to book our upstairs venue for an event,
-              wanting to try out our creative alcoholic drinks or just wanting
-              to enjoy a meal with a loved one, you quickly see why so many
-              people choose Jefes. We take pride in our business as one of the
-              highest rated Mexican restaurants in Broken Arrow.
-            </p>
+              <p>
+                Whether you are wanting to book our upstairs venue for an event,
+                wanting to try out our creative alcoholic drinks or just wanting
+                to enjoy a meal with a loved one, you quickly see why so many
+                people choose Jefes. We take pride in our business as one of the
+                highest rated Mexican restaurants in Broken Arrow.
+              </p>
 
-            <p>
-              We just wanted to take a moment to express our heartfelt gratitude
-              to all of our loyal customers. Your continued support and loyalty
-              means the world to us, and it is because of you that we are able
-              to continue doing what we love. Thank you for choosing our
-              restaurant and for allowing us to serve you. We promise to always
-              strive for excellence and to bring you the best dining experience
-              possible. Thank you again!
-            </p>
+              <p>
+                We just wanted to take a moment to express our heartfelt
+                gratitude to all of our loyal customers. Your continued support
+                and loyalty means the world to us, and it is because of you that
+                we are able to continue doing what we love. Thank you for
+                choosing our restaurant and for allowing us to serve you. We
+                promise to always strive for excellence and to bring you the
+                best dining experience possible. Thank you again!
+              </p>
+            </div>
             <div className="mx-auto flex items-center justify-center w-full pb-6">
               <Image
                 src="/award.jpg"
diff --git a/Websites/jefes-nextjs/app/layout.css b/Websites/jefes-nextjs/app/layout.css
index ffd4c35..6a93b70 100644
--- a/Websites/jefes-nextjs/app/layout.css
+++ b/Websites/jefes-nextjs/app/layout.css
@@ -1,4 +1,7 @@
 .jefes_background{
     z-index: -1;
     filter: brightness(.19);
+}
+.par{
+    text-wrap: pretty;
 }
\ No newline at end of file
diff --git a/Websites/jefes-nextjs/app/layout.tsx b/Websites/jefes-nextjs/app/layout.tsx
index 664f274..2c3912f 100644
--- a/Websites/jefes-nextjs/app/layout.tsx
+++ b/Websites/jefes-nextjs/app/layout.tsx
@@ -5,6 +5,7 @@ import NavBar from "./components/NavBar/NavBar";
 import Image from "next/image";
 import Footer from "@/components/Footer/footer";
 import localFont from 'next/font/local';
+import './layout.css'
 
 const inter = Inter({ subsets: ["latin"] });
 const robleAlt = localFont({
@@ -24,7 +25,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body className={robleAlt.className}>
+      <body className={`${robleAlt.className} par`}>
         <NavBar />
         {/* <Image
             src="/PaintBackground1.webp"
diff --git a/Websites/jefes-nextjs/app/menu/Appetizers/page.tsx b/Websites/jefes-nextjs/app/menu/Appetizers/page.tsx
index a761030..80e7d6f 100644
--- a/Websites/jefes-nextjs/app/menu/Appetizers/page.tsx
+++ b/Websites/jefes-nextjs/app/menu/Appetizers/page.tsx
@@ -45,7 +45,7 @@ const Appetizers = () => {
               <h4 className="">
                 <strong>{menu_item.name}</strong>
               </h4>
-              <p>Description: {menu_item.description}</p>
+              <p className="max-w-[75ch]">Description: {menu_item.description}</p>
               <div className="flex flex-row bg-gray-500 justify-evenly">
                 <div className="bg-red-400 flex flex-row">
                   <span>
diff --git a/Websites/jefes-nextjs/app/menu/Bar/items.json b/Websites/jefes-nextjs/app/menu/Bar/items.json
new file mode 100644
index 0000000..0eb91ba
--- /dev/null
+++ b/Websites/jefes-nextjs/app/menu/Bar/items.json
@@ -0,0 +1,42 @@
+[
+    {
+        "id": 1,
+        "name": "Caguamas",
+        "photo": "Bar/32ozCaguamas.jpeg",
+        "price": 14,
+        "size": "32oz",
+        "description": "A drink."
+    },
+    {
+        "id": 2,
+        "name": "Jefes Tower",
+        "photo": "Bar/100ozTower.jpeg",
+        "price": 35,
+        "size": "100oz",
+        "description": "A tower full of Corona."
+    },
+    {
+        "id": 3,
+        "name": "Chambong",
+        "photo": "Bar/chambong.jpeg",
+        "price": 18,
+        "size": "36oz",
+        "description": "El Chambong."
+    },
+    {
+        "id": 4,
+        "name": "La Mera Mera Margarita",
+        "photo": "Bar/laMeraMera56ozMargarita.jpeg",
+        "price": 20,
+        "size": "56oz",
+        "description": "The special margarita."
+    },
+    {
+        "id": 5,
+        "name": "Michelada",
+        "photo": "Bar/Michelada.jpeg",
+        "price": 13,
+        "size": "24oz",
+        "description": "Corona with tamarindo."
+    }
+]
\ 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
new file mode 100644
index 0000000..57361ce
--- /dev/null
+++ b/Websites/jefes-nextjs/app/menu/Bar/page.tsx
@@ -0,0 +1,86 @@
+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";
+
+const Bar = () => {
+  return (
+    <main>
+      {/* Mapping out the menu
+      <div className=" flex flex-wrap gap-8 pt-6 justify-between w-full">
+        {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>
+                </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>
+        {Menu.map((menu_item) => {
+          return (
+                <Card key={menu_item.id} className="flex flex-wrap gap-8 pt-6 justify-evenly w-full">
+                  <CardHeader 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"
+                    />
+                  </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>
+          );
+        })}
+      </div>
+    </main>
+  );
+};
+
+export default Bar;