diff --git a/Websites/jefes-nextjs/app/Bar/page.tsx b/Websites/jefes-nextjs/app/Bar/page.tsx
new file mode 100644
index 0000000..983ebb8
--- /dev/null
+++ b/Websites/jefes-nextjs/app/Bar/page.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const page = () => {
+  return (
+    <div>page</div>
+  )
+}
+
+export default page
\ No newline at end of file
diff --git a/Websites/jefes-nextjs/app/components/MenuBar/MenuBar.tsx b/Websites/jefes-nextjs/app/components/MenuBar/MenuBar.tsx
index f2221a5..67f663f 100644
--- a/Websites/jefes-nextjs/app/components/MenuBar/MenuBar.tsx
+++ b/Websites/jefes-nextjs/app/components/MenuBar/MenuBar.tsx
@@ -1,4 +1,6 @@
 import React from 'react'
+import Link from 'next/link'
+import MenuLinks from './MenuLinks'
 
 const MenuBar = () => {
   return (
diff --git a/Websites/jefes-nextjs/app/components/MenuBar/MenuLinks.tsx b/Websites/jefes-nextjs/app/components/MenuBar/MenuLinks.tsx
index 18b2478..299054a 100644
--- a/Websites/jefes-nextjs/app/components/MenuBar/MenuLinks.tsx
+++ b/Websites/jefes-nextjs/app/components/MenuBar/MenuLinks.tsx
@@ -1,24 +1,44 @@
 "use client";
 
-import React from 'react'
-import clsx from 'clsx';
-import Link from 'next/link';
-import { usePathname } from 'next/navigation';
+import React from "react";
+import clsx from "clsx";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
 
 const links = [
-    {name: 'Appetizers', href: '/menu'},
-    {name: 'Brunch', href: '/menu/brunch'},
-    {name: 'Lunch', href: '/menu/lunch'},
-    {name: 'Dinner', href: '/menu/dinner'},
-    {name: 'Beverages', href: '/menu/beverages'},
-    {name: 'Beverages', href: '/menu/beverages'},
-
-]
+  { name: "Appetizers", href: "/menu" },
+  { name: "Brunch", href: "/menu/Brunch" },
+  { name: "Lunch", href: "/menu/Lunch" },
+  { name: "Dinner", href: "/menu/Dinner" },
+  { name: "Beverages", href: "/menu/Beverages" },
+  { name: "Bar", href: "/menu/Bar" },
+];
 
 const MenuLinks = () => {
-  return (
-    <div>MenuLinks</div>
-  )
-}
+  const pathname = usePathname();
 
-export default MenuLinks
\ No newline at end of file
+  return (
+    <>
+      {links.map((link) => {
+        // const LinkIcon = link.icon;
+        return (
+          <Link
+            key={link.name}
+            href={link.href}
+            className={clsx(
+              "flex h-[48px] grow items-center justify-center gap-2 bg-transparent p-3 text-xl font-semibold  hover:text-red-700 md:flex-none md:justify-start md:p-2 md:px-3",
+              {
+                "text-red-700": pathname === link.href,
+              }
+            )}
+          >
+            {/* <LinkIcon className="w-6" /> */}
+            <p className="hidden md:block">{link.name}</p>
+          </Link>
+        );
+      })}
+    </>
+  );
+};
+
+export default MenuLinks;
diff --git a/Websites/jefes-nextjs/app/menu/Beverages/page.tsx b/Websites/jefes-nextjs/app/menu/Beverages/page.tsx
index 983ebb8..159a7bc 100644
--- a/Websites/jefes-nextjs/app/menu/Beverages/page.tsx
+++ b/Websites/jefes-nextjs/app/menu/Beverages/page.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 
 const page = () => {
   return (
-    <div>page</div>
+    <div>Beverages</div>
   )
 }
 
diff --git a/Websites/jefes-nextjs/app/menu/Brunch/page.tsx b/Websites/jefes-nextjs/app/menu/Brunch/page.tsx
index 983ebb8..a17c7b9 100644
--- a/Websites/jefes-nextjs/app/menu/Brunch/page.tsx
+++ b/Websites/jefes-nextjs/app/menu/Brunch/page.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 
 const page = () => {
   return (
-    <div>page</div>
+    <div>Brunch</div>
   )
 }
 
diff --git a/Websites/jefes-nextjs/app/menu/layout.tsx b/Websites/jefes-nextjs/app/menu/layout.tsx
index bae22ec..6578b33 100644
--- a/Websites/jefes-nextjs/app/menu/layout.tsx
+++ b/Websites/jefes-nextjs/app/menu/layout.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import Image from "next/image";
+import MenuLinks from "../components/MenuBar/MenuLinks";
 
 const layout = ({ children }: { children: React.ReactNode }) => {
   return (
@@ -22,8 +23,10 @@ const layout = ({ children }: { children: React.ReactNode }) => {
           </div>
         </div>
       </div>
-
-      <div className="flex-grow p-6 md:overflow-y-auto md:p-12 bg-paintbg">{children}</div>
+      <div className="flex flex-row justify-evenly pt-4">
+        <MenuLinks />
+      </div>
+      <div className="flex-grow p-6 md:overflow-y-auto md:p-12">{children}</div>
     </div>
   );
 };
diff --git a/Websites/jefes-nextjs/app/menu/page.tsx b/Websites/jefes-nextjs/app/menu/page.tsx
index ece043f..c350ddc 100644
--- a/Websites/jefes-nextjs/app/menu/page.tsx
+++ b/Websites/jefes-nextjs/app/menu/page.tsx
@@ -5,9 +5,7 @@ import Image from "next/image";
 const menu = () => {
   return (
     <div className="flex flex-col relative justify-center items-center ">
-      <div>
-        <Appetizers />
-      </div>
+      <Appetizers />
     </div>
   );
 };