diff --git a/src/components/designs.jsx b/src/components/designs.jsx
index 2611814..7269506 100644
--- a/src/components/designs.jsx
+++ b/src/components/designs.jsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import "./styles/designs.css";
 import left1 from "./assests/designs/left1.png";
 import left2 from "./assests/designs/left2.png";
@@ -7,6 +7,7 @@ import left4 from "./assests/designs/left4.png";
 import center1 from "./assests/designs/center1.png";
 import center2 from "./assests/designs/center2.png";
 import center3 from "./assests/designs/center3.png";
+import center4 from "./assests/designs/center4.png";
 
 import right1 from "./assests/designs/right1.png";
 import right2 from "./assests/designs/right2.png";
@@ -22,40 +23,96 @@ import mobileright2 from "./assests/designs/mobileright2.png";
 import mobileright3 from "./assests/designs/mobileright3.png";
 import mobileright4 from "./assests/designs/mobileright4.png";
 
-export default function designs() {
+export default function Designs() {
+  // useEffect(() => {
+  //   const setScrollHeight = (selector, variable) => {
+  //     const element = document.querySelector(selector);
+  //     const scrollHeight = element.scrollHeight;
+  //     const duration = scrollHeight / 100;
+  //     element.style.setProperty(variable, `${duration}s`);
+  //   };
+
+  //   setScrollHeight(".designleft-scroll", "--left-scroll-duration");
+  //   setScrollHeight(".designcenter-scroll", "--center-scroll-duration");
+  //   setScrollHeight(".designright-scroll", "--right-scroll-duration");
+  // }, []);
+
   return (
     <div className="designsbody">
       <h1 className="commonheader">Our Designs</h1>
       <div className="designsmain">
         <div className="designleft">
-          <img src={left1} alt="" />
-          <img src={left2} alt="" />
-          <img src={left3} alt="" />
-          <img src={left4} alt="" />
+          <div className="designleft-scroll">
+            <img src={left1} alt="" />
+            <img src={left2} alt="" />
+            <img src={left3} alt="" />
+            <img src={left4} alt="" />
+          </div>
+          <div className="designleft-scroll">
+            <img src={left1} alt="" />
+            <img src={left2} alt="" />
+            <img src={left3} alt="" />
+            <img src={left4} alt="" />
+          </div>
         </div>
         <div className="designcenter">
-          <img src={center1} alt="" />
-          <img src={center2} alt="" />
-          <img src={center3} alt="" />
+          <div className="designcenter-scroll">
+            <img src={center1} alt="" />
+            <img src={center2} alt="" />
+            <img src={center3} alt="" />
+            <img src={center4} alt="" />
+          </div>
+          <div className="designcenter-scroll">
+            {/* Duplicate images for seamless scrolling */}
+            <img src={center1} alt="" />
+            <img src={center2} alt="" />
+            <img src={center3} alt="" />
+            <img src={center4} alt="" />
+          </div>
         </div>
         <div className="designright">
-          <img src={right1} alt="" />
-          <img src={right2} alt="" />
-          <img src={right3} alt="" />
+          <div className="designright-scroll">
+            <img src={right1} alt="" />
+            <img src={right2} alt="" />
+            <img src={right3} alt="" />
+          </div>
+          <div className="designright-scroll">
+            <img src={right1} alt="" />
+            <img src={right2} alt="" />
+            <img src={right3} alt="" />
+          </div>
         </div>
       </div>
       <div className="designsmobile">
         <div className="designleft">
-          <img src={mobileleft1} alt="" />
-          <img src={mobileleft2} alt="" />
-          <img src={mobileleft3} alt="" />
-          <img src={mobileleft4} alt="" />
+          <div className="designleft-scroll">
+            <img src={mobileleft1} alt="" />
+            <img src={mobileleft2} alt="" />
+            <img src={mobileleft3} alt="" />
+            <img src={mobileleft4} alt="" />
+          </div>
+          <div className="designleft-scroll">
+            {/* Duplicate images for seamless scrolling */}
+            <img src={mobileleft1} alt="" />
+            <img src={mobileleft2} alt="" />
+            <img src={mobileleft3} alt="" />
+            <img src={mobileleft4} alt="" />
+          </div>
         </div>
         <div className="designright">
-          <img src={mobileright1} alt="" />
-          <img src={mobileright2} alt="" />
-          <img src={mobileright3} alt="" />
-          <img src={mobileright4} alt="" />
+          <div className="designright-scroll">
+            <img src={mobileright1} alt="" />
+            <img src={mobileright2} alt="" />
+            <img src={mobileright3} alt="" />
+            <img src={mobileright4} alt="" />
+          </div>
+          <div className="designright-scroll">
+            {/* Duplicate images for seamless scrolling */}
+            <img src={mobileright1} alt="" />
+            <img src={mobileright2} alt="" />
+            <img src={mobileright3} alt="" />
+            <img src={mobileright4} alt="" />
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/components/styles/designs.css b/src/components/styles/designs.css
index 8364d63..a7801f1 100644
--- a/src/components/styles/designs.css
+++ b/src/components/styles/designs.css
@@ -3,13 +3,62 @@
   padding: 50px 0px;
 }
 .designsmain {
-  height: 100vh;
   display: flex;
   justify-content: center;
   gap: 40px;
   padding-inline: 40px;
-  overflow-y: scroll;
+  overflow: hidden;
+}
+
+.designleft,
+.designcenter,
+.designright {
+  width: 30%;
+  height: 100vh;
+  overflow: hidden;
+  position: relative;
+}
+
+.designleft-scroll,
+.designcenter-scroll,
+.designright-scroll {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  animation-timing-function: linear;
+  white-space: nowrap;
+}
+
+.designleft-scroll {
+  animation: scroll-up 15s linear infinite;
+}
+
+.designright-scroll {
+  animation: scroll-up 15s linear infinite;
+}
+.designcenter-scroll {
+  animation: scroll-down 15s linear infinite;
 }
+
+@keyframes scroll-up {
+  0% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(calc(-100%));
+  }
+}
+
+@keyframes scroll-down {
+  0% {
+    transform: translateY(-100%);
+  }
+
+  100% {
+    transform: translateY(0%);
+  }
+}
+
 .designleft img,
 .designcenter img,
 .designright img {
@@ -22,7 +71,7 @@
   height: 100vh;
   justify-content: center;
   gap: 40px;
-  padding-inline: 40px;
+  padding-inline: 10px;
   overflow-y: scroll;
 }
 
@@ -33,4 +82,14 @@
   .designsmobile {
     display: flex;
   }
+  .designright,
+  .designleft {
+    width: 45%;
+  }
+  .designright-scroll {
+    animation: scroll-down 10s linear infinite;
+  }
+  .designleft-scroll {
+    animation: scroll-up 10s linear infinite;
+  }
 }