diff --git a/Websites/jefes-nextjs/app/components/MenuBar/MenuBar.tsx b/Websites/jefes-nextjs/app/components/MenuBar/MenuBar.tsx
index cf24b23..f2221a5 100644
--- a/Websites/jefes-nextjs/app/components/MenuBar/MenuBar.tsx
+++ b/Websites/jefes-nextjs/app/components/MenuBar/MenuBar.tsx
@@ -1,5 +1,4 @@
 import React from 'react'
-import NavLinks from '@/app/ui/dashboard/nav-links';
 
 const MenuBar = () => {
   return (
diff --git a/Websites/jefes-nextjs/app/components/NavBar/NavBar.tsx b/Websites/jefes-nextjs/app/components/NavBar/NavBar.tsx
index 83c559c..d6a2375 100644
--- a/Websites/jefes-nextjs/app/components/NavBar/NavBar.tsx
+++ b/Websites/jefes-nextjs/app/components/NavBar/NavBar.tsx
@@ -36,16 +36,16 @@ const NavBar = () => {
           <Image
             src="/img01.webp"
             alt="nav image"
-            layout="fill"
-            objectFit="cover"
+            fill
+            style={{ objectFit: "cover" }}
             quality={100}
             className="brightness-50 hidden md:block"
           />
           <Image
             src="/img01.webp"
             alt="nav image"
-            layout="fill"
-            objectFit="cover"
+            fill
+            style={{ objectFit: "cover" }}
             className="brightness-0 block md:hidden"
           />
         </div>
diff --git a/Websites/jefes-nextjs/app/gallery/carousel.css b/Websites/jefes-nextjs/app/gallery/carousel.css
index 75d2373..cbc3e63 100644
--- a/Websites/jefes-nextjs/app/gallery/carousel.css
+++ b/Websites/jefes-nextjs/app/gallery/carousel.css
@@ -1,4 +1,11 @@
-.carousel{
+.embla {
+    overflow: hidden;
+  }
+  .embla__container {
+    display: flex;
+  }
+  .embla__slide {
     flex: 0 0 100%;
     min-width: 0;
-}
\ No newline at end of file
+  }
+  
\ No newline at end of file
diff --git a/Websites/jefes-nextjs/app/gallery/carousel.tsx b/Websites/jefes-nextjs/app/gallery/carousel.tsx
index 5bf9822..632e930 100644
--- a/Websites/jefes-nextjs/app/gallery/carousel.tsx
+++ b/Websites/jefes-nextjs/app/gallery/carousel.tsx
@@ -1,42 +1,47 @@
+"use client";
 import React from "react";
 import useEmblaCarousel from "embla-carousel-react";
 import Image from "next/image";
-import Autoplay from 'embla-carousel-autoplay';
+import './carousel.css';
 
 export const EmblaCarousel = () => {
   const [emblaRef] = useEmblaCarousel();
 
   return (
-    <div className="overflow-hidden" ref={emblaRef}>
-      <div className="flex">
-        <div className="carousel">
+    <div className="embla" ref={emblaRef}>
+      <div className="embla__container">
+        <div className="embla__slide">
           <Image
-            src="/images/bar01.jpg"
-            alt="bar01"
-            fill
-            style={{ objectFit: "cover" }}
-            quality={100}
+            src="/img01.webp"
+            alt="/"
+            width={0}
+            height={0}
+            sizes="100vw"
+            style={{ width: "100%", height: "auto" }} // optional
           />
         </div>
         <div className="embla__slide">
+          {" "}
           <Image
-            src="/images/food01.jpg"
-            alt="food1"
-            fill
-            style={{ objectFit: "cover" }}
-            quality={100}
+            src="/IMG_2431.jpg"
+            alt="/"
+            width={0}
+            height={0}
+            sizes="100vw"
+            style={{ width: "100%", height: "auto" }} // optional
+          />
+        </div>
+        <div className="embla__slide">
+          {" "}
+          <Image
+            src="/images/bar01.jpg"
+            alt="/"
+            width={0}
+            height={0}
+            sizes="100vw"
+            style={{ width: "100%", height: "auto" }} // optional
           />
         </div>
-      </div>
-      <div className="embla__slide">
-        {" "}
-        <Image
-          src="/images/food02.webp"
-          alt="food2"
-          fill
-          style={{ objectFit: "cover" }}
-          quality={100}
-        />
       </div>
     </div>
   );
diff --git a/Websites/jefes-nextjs/app/gallery/page.tsx b/Websites/jefes-nextjs/app/gallery/page.tsx
index 4c0a577..8d6a74c 100644
--- a/Websites/jefes-nextjs/app/gallery/page.tsx
+++ b/Websites/jefes-nextjs/app/gallery/page.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 import { useState } from "react";
 import { BsChevronCompactLeft, BsChevronCompactRight } from "react-icons/bs";
@@ -7,40 +5,40 @@ import { RxDotFilled } from "react-icons/rx";
 import { EmblaCarousel } from "./carousel";
 
 const Gallery = () => {
-  const slides = [
-    { url: "/images/1577mobile.webp" },
-    { url: "/images/bar01.jpg" },
-    { url: "/images/fbimg02.jpg" },
-    { url: "/images/food01.jpg" },
-    { url: "/images/food02.webp" },
-    { url: "/images/IMG_2737.webp" },
-    { url: "/images/IMG_2749.webp" },
-    { url: "/images/IMG_2766.webp" },
-    { url: "/images/img01.webp" },
-    { url: "/images/img05.webp" },
-  ];
+  // const slides = [
+  //   { url: "/images/1577mobile.webp" },
+  //   { url: "/images/bar01.jpg" },
+  //   { url: "/images/fbimg02.jpg" },
+  //   { url: "/images/food01.jpg" },
+  //   { url: "/images/food02.webp" },
+  //   { url: "/images/IMG_2737.webp" },
+  //   { url: "/images/IMG_2749.webp" },
+  //   { url: "/images/IMG_2766.webp" },
+  //   { url: "/images/img01.webp" },
+  //   { url: "/images/img05.webp" },
+  // ];
 
-  const [currentIndex, setCurrentIndex] = useState(0);
+  // const [currentIndex, setCurrentIndex] = useState(0);
 
-  const prevSlide = () => {
-    const isFirstSlide = currentIndex === 0;
-    const newIndex = isFirstSlide ? slides.length - 1 : currentIndex - 1;
-    setCurrentIndex(newIndex);
-  };
+  // const prevSlide = () => {
+  //   const isFirstSlide = currentIndex === 0;
+  //   const newIndex = isFirstSlide ? slides.length - 1 : currentIndex - 1;
+  //   setCurrentIndex(newIndex);
+  // };
 
-  const nextSlide = () => {
-    const isLastSlide = currentIndex === slides.length - 1;
-    const newIndex = isLastSlide ? 0 : currentIndex + 1;
-    setCurrentIndex(newIndex);
-  };
+  // const nextSlide = () => {
+  //   const isLastSlide = currentIndex === slides.length - 1;
+  //   const newIndex = isLastSlide ? 0 : currentIndex + 1;
+  //   setCurrentIndex(newIndex);
+  // };
 
-  const goToSlide = (slideIndex) => {
-    setCurrentIndex(slideIndex);
-  };
+  // const goToSlide = (slideIndex) => {
+  //   setCurrentIndex(slideIndex);
+  // };
 
   return (
-    <div className="max-w-[1400px] h-[780px] w-full m-auto py-16 px-4 relative group">
-      <EmblaCarousel></EmblaCarousel>
+    <div className="">
+      <EmblaCarousel />
       {/* <div
         style={{ backgroundImage: `url(${slides[5].url})` }}
         className="w-full h-full rounded-2xl bg-center bg-cover duration-500"
diff --git a/Websites/jefes-nextjs/bun.lockb b/Websites/jefes-nextjs/bun.lockb
index f8a00a6..c3738fc 100755
Binary files a/Websites/jefes-nextjs/bun.lockb and b/Websites/jefes-nextjs/bun.lockb differ
diff --git a/Websites/jefes-nextjs/package.json b/Websites/jefes-nextjs/package.json
index 77e1018..92a5ede 100644
--- a/Websites/jefes-nextjs/package.json
+++ b/Websites/jefes-nextjs/package.json
@@ -13,6 +13,7 @@
     "classnames": "^2.3.2",
     "clsx": "^2.0.0",
     "easymde": "^2.18.0",
+    "embla-carousel-autoplay": "^8.0.0-rc14",
     "embla-carousel-react": "^8.0.0-rc14",
     "next": "13.5.6",
     "prisma": "^5.4.2",