diff --git a/app/Section/Photos.tsx b/app/Section/Photos.tsx
index 097a5b9..3cf9420 100644
--- a/app/Section/Photos.tsx
+++ b/app/Section/Photos.tsx
@@ -21,7 +21,7 @@ const links = [
   },
 ];
 
-const OPTIONS: EmblaOptionsType = { dragFree: true, loop: true };
+const OPTIONS: EmblaOptionsType = { loop: true};
 const SLIDES = [
   "/images/photos/2024-06-14T19_32_04_024.JPG",
   "/images/photos/2024-06-17T18_55_55_030.JPG",
diff --git a/app/components/Photos.Carousel.tsx b/app/components/Photos.Carousel.tsx
index 68e43f5..c0f20de 100644
--- a/app/components/Photos.Carousel.tsx
+++ b/app/components/Photos.Carousel.tsx
@@ -90,18 +90,24 @@ const EmblaCarousel: React.FC<PropType> = (props) => {
     <div className="embla">
       <div className="embla__viewport" ref={emblaRef}>
         <div className="embla__container">
-          {slides.map((index) => (
-            <div className="embla__slide" key={index}>
+          {slides.map((item, index) => (
+            <button
+              className="embla__slide"
+              onClick={() => {
+                if (emblaApi) emblaApi.scrollTo(index);
+              }}
+              key={`embla.slide.${index}`}
+            >
               <div className="embla__parallax">
                 <div className="embla__parallax__layer">
                   <img
                     className="embla__slide__img embla__parallax__img"
-                    src={index}
+                    src={item}
                     alt=""
                   />
                 </div>
               </div>
-            </div>
+            </button>
           ))}
         </div>
       </div>