diff --git a/src/components/pages/MainPage/Clients.tsx b/src/components/pages/MainPage/Clients.tsx
index 7c93d0f9..16e13bfa 100644
--- a/src/components/pages/MainPage/Clients.tsx
+++ b/src/components/pages/MainPage/Clients.tsx
@@ -3,29 +3,51 @@ import Image from 'next/image';
 
 export function Clients() {
   return (
-    <div className="border-b border-[#3D425C] min-h-[117px] flex items-center overflow-hidden gap-x-24s min-w-[200vw] sm:-mx-6 py-6 mt-10">
-      <MarqueeHalf />
-      <MarqueeHalf />
+    <div className="space-y-6">
+      <div className="flex items-center overflow-hidden w-screen sm:-mx-6 mt-10 min-h-[117px]">
+        <MarqueeHalf items={clients.slice(0, clients.length / 3)} />
+        <MarqueeHalf items={clients.slice(0, clients.length / 3)} />
+      </div>
+      <div className="flex items-center overflow-hidden w-screen sm:-mx-6 min-h-[117px]">
+        <MarqueeHalf
+          reversed
+          items={clients.slice(clients.length / 3, (2 * clients.length) / 3)}
+        />
+        <MarqueeHalf
+          reversed
+          items={clients.slice(clients.length / 3, (2 * clients.length) / 3)}
+        />
+      </div>
+      <div className="border-b border-[#3D425C] flex items-center overflow-hidden w-screen sm:-mx-6 min-h-[117px] pb-16">
+        <MarqueeHalf items={clients.slice(2 * (clients.length / 3))} />
+        <MarqueeHalf items={clients.slice(2 * (clients.length / 3))} />
+      </div>
     </div>
   );
 }
 
-function MarqueeHalf() {
+function MarqueeHalf({
+  reversed = false,
+  items,
+}: {
+  items: { src: string }[];
+  reversed?: boolean;
+}) {
   return (
-    <div className="flex overflow-clips gap-x-24 items-center py-2 animate-infinite-scroll min-h-[117px]">
-      {clients.map(client => (
-        <div
+    <div
+      className={
+        'flex flex-nowrap overflow-clip items-center py-2 [flex:0_0_auto] animate-infinite-scroll ' +
+        (reversed ? '[animation-direction:reverse]' : '')
+      }
+    >
+      {items.map(client => (
+        <Image
           key={client.src}
-          className="relative min-h-[117px] content-center min-w-fit"
-        >
-          <Image
-            src={client.src}
-            key={client.src}
-            alt={client.src}
-            fill
-            className="object-contains !relative min-w-fit"
-          />
-        </div>
+          src={client.src}
+          alt={client.src}
+          fill
+          className="max-w-full h-auto !relative object-covesr mx-12"
+        />
       ))}
     </div>
   );
diff --git a/tailwind.config.ts b/tailwind.config.ts
index ebe60ea2..bc76a54d 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -13,7 +13,7 @@ const config: Config = {
           'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
       },
       animation: {
-        'infinite-scroll': 'infinite-scroll 10s linear infinite',
+        'infinite-scroll': 'infinite-scroll 25s linear infinite',
         'highlight-product': 'highlight-product 0.1s ease-in 0s',
       },
       keyframes: {