diff --git a/apps/frontpage/components/home/social-validation/slider.tsx b/apps/frontpage/components/home/social-validation/slider.tsx
new file mode 100644
index 00000000..5325ab3d
--- /dev/null
+++ b/apps/frontpage/components/home/social-validation/slider.tsx
@@ -0,0 +1,176 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { useReducedMotion, useInView } from 'framer-motion';
+import Image from 'next/image';
+
+const SLIDE_WIDTH = 400;
+const ANIMATION_INTERVAL = 4000;
+
+function getTranslateX(indexOffset : number ) {
+  return indexOffset * SLIDE_WIDTH;
+}
+
+export const storybooks = [
+  {
+    name: 'Monday.com',
+    url: 'https://style.monday.com/',
+    logo: 'https://avatars.githubusercontent.com/u/61420283?v=4',
+    image: {
+      src: '/home/community/storybooks/monday-com.webp',
+      width: 1440,
+      height: 1050,
+    },
+  },
+  {
+    name: 'Microsoft',
+    url: 'https://master--628d031b55e942004ac95df1.chromatic.com/',
+    logo: 'https://avatars.githubusercontent.com/u/6154722?v=4',
+    image: {
+      src: '/home/community/storybooks/microsoft.webp',
+      width: 1440,
+      height: 1050,
+    },
+  },
+  {
+    name: 'D2IQ',
+    url: 'http://design-system.d2iq.com/',
+    logo: 'https://avatars.githubusercontent.com/u/19392808?v=4',
+    image: {
+      src: '/home/community/storybooks/d2iq.webp',
+      width: 1440,
+      height: 1050,
+    },
+  },
+  {
+    name: 'Drei',
+    url: 'https://drei.pmnd.rs/',
+    logo: 'https://avatars.githubusercontent.com/u/45790596?v=4',
+    image: {
+      src: '/home/community/storybooks/drei.webp',
+      width: 1440,
+      height: 1050,
+    },
+  },
+  {
+    name: 'Shopify',
+    url: 'https://main--5d559397bae39100201eedc1.chromatic.com/',
+    logo: 'https://avatars.githubusercontent.com/u/8085?v=4',
+    image: {
+      src: '/home/community/storybooks/shopify.webp',
+      width: 1440,
+      height: 1050,
+    },
+  },
+  {
+    name: 'kickstartDS',
+    url: 'https://www.kickstartds.com/storybook/',
+    logo: 'https://avatars.githubusercontent.com/u/79609753?v=4',
+    image: {
+      src: '/home/community/storybooks/kickstart-ds.webp',
+      width: 1440,
+      height: 1050,
+    },
+  },
+  {
+    name: 'Grommet',
+    url: 'https://master--5d9774839a6eff00203f5cbf.chromatic.com/',
+    logo: 'https://avatars.githubusercontent.com/u/14203820?v=4',
+    image: {
+      src: '/home/community/storybooks/grommet.webp',
+      width: 1440,
+      height: 1050,
+    },
+  },
+  {
+    name: 'JSTOR',
+    url: 'https://develop--60919c26122bd50039b34644.chromatic.com/',
+    logo: 'https://avatars.githubusercontent.com/u/74469?v=4',
+    image: {
+      src: '/home/community/storybooks/jstor.webp',
+      width: 1440,
+      height: 1050,
+    },
+  },
+];
+
+export default function AutoSlider() {
+  const ref = useRef(null);
+  const isInView = useInView(ref, { once: true, amount: 'all' });
+  const shouldReduceMotion = useReducedMotion();
+  const centerIndex = Math.floor(storybooks.length / 2);
+
+  const [animationState, setAnimationState] = useState({
+    storybooks,
+    isAnimating: false,
+  });
+
+  useEffect(() => {
+    if (shouldReduceMotion || !isInView) return;
+
+    const timer = setTimeout(() => {
+      setAnimationState((prev) => ({
+        isAnimating: true,
+        storybooks: [...prev.storybooks.slice(1), prev.storybooks[0]],
+      }));
+    }, ANIMATION_INTERVAL);
+
+    return () => clearTimeout(timer);
+  }, [animationState.storybooks, isInView, shouldReduceMotion]);
+
+  return (
+ 
+  
+    <div
+      ref={ref}
+      className="relative flex h-[400px] mt-16 w-full items-center justify-center overflow-hidden"
+    >
+      <div className="relative flex w-full justify-center items-center gap-20">
+        {animationState.storybooks.map((item, index) => {
+          const offset = index - centerIndex;
+          const isActive = offset === 0;
+          return (
+            <div
+              key={item.name}
+              className="absolute transition-transform duration-700 ease-in-out"
+              style={{
+                transform: `translateX(${getTranslateX(offset)}px) scale(${
+                  isActive ? 1 : 0.8
+                })`,
+                opacity: isActive ? 1 : 0.5,
+                zIndex: isActive ? 10 : 1,
+              }}
+            >
+              <a
+                href={item.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="block w-[300px] md:w-[400px] overflow-hidden rounded-lg bg-zinc-900 text-white shadow-lg"
+              >
+                <div className="flex h-5 items-center gap-1 border-y border-b-zinc-300 border-t-transparent bg-zinc-200 pl-2">
+                  <div className="h-[5px] w-[5px] rounded-full bg-red-500" />
+                  <div className="h-[5px] w-[5px] rounded-full bg-yellow-500" />
+                  <div className="h-[5px] w-[5px] rounded-full bg-green-500" />
+                </div>
+                <Image
+                  alt={item.name}
+                  width={item.image.width}
+                  height={item.image.height}
+                  src={item.image.src}
+                />
+                <div className="mt-2 flex items-center gap-2 px-2 py-1">
+                  <Image
+                    alt={item.name}
+                    src={item.logo}
+                    width={20}
+                    height={20}
+                    className="rounded"
+                  />
+                  <span className="text-sm font-medium">{item.name}</span>
+                </div>
+              </a>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/frontpage/components/home/social-validation/social-validation.tsx b/apps/frontpage/components/home/social-validation/social-validation.tsx
index f0f9c4b7..6149ad53 100644
--- a/apps/frontpage/components/home/social-validation/social-validation.tsx
+++ b/apps/frontpage/components/home/social-validation/social-validation.tsx
@@ -8,14 +8,16 @@ import { Button } from '../../ui/button';
 import { AspectRatio } from '../../ui/aspect-ratio';
 import { Community } from '../../community';
 import { Youtube } from '../../logos/youtube';
+import   AutoSlider  from './slider';
 import BlueskySvg from '../share/images/bluesky.svg';
 import XSvg from '../share/images/x.svg';
 
+
 const projects = [
   {
     name: 'Polaris',
     bgColor: '#377e62',
-    width: 100,
+    width: 80,
     height: 28,
     logoAlt: 'Shopify',
     logoUrl: '/home/community/logos/shopify.svg',
@@ -24,7 +26,7 @@ const projects = [
   {
     name: 'Psammead',
     bgColor: '#8F1F19',
-    width: 102,
+    width: 80,
     height: 28,
     logoAlt: 'BBC',
     logoUrl: '/home/community/logos/bbc.svg',
@@ -33,7 +35,7 @@ const projects = [
   {
     name: 'UI React',
     bgColor: '#333333',
-    width: 88,
+    width: 80,
     height: 30,
     logoAlt: 'Audi UI React',
     logoUrl: '/home/community/logos/audi.svg',
@@ -42,8 +44,8 @@ const projects = [
   {
     name: 'Fluent UI Web Compnents',
     bgColor: '#0078d4',
-    width: 40,
-    height: 70,
+    width: 20,
+    height: 40,
     logoAlt: 'Fluent UI Web Compnents',
     logoUrl: '/home/community/logos/fluent.svg',
     projectUrl:
@@ -52,8 +54,8 @@ const projects = [
   {
     name: 'Gutenberg',
     bgColor: '#3171A6',
-    width: 52,
-    height: 52,
+    width: 40,
+    height: 40,
     logoAlt: 'WordPress Gutenberg',
     logoUrl: '/home/community/logos/wordpress.svg',
     projectUrl: 'https://storybook.js.org/showcase/wordpress-gutenberg',
@@ -61,7 +63,7 @@ const projects = [
   {
     name: 'Explorer 1',
     bgColor: '#0b3d91',
-    width: 100,
+    width: 80,
     height: 28,
     logoAlt: 'Nasa Explorer 1',
     logoUrl: '/home/community/logos/nasa.svg',
@@ -70,8 +72,8 @@ const projects = [
   {
     name: 'React Spectrum',
     bgColor: '#e03422',
-    width: 56,
-    height: 48,
+    width: 36,
+    height: 38,
     logoAlt: 'Adobe',
     logoUrl: '/home/community/logos/adobe.svg',
     projectUrl:
@@ -79,88 +81,6 @@ const projects = [
   },
 ];
 
-const storybooks = [
-  {
-    name: 'Monday.com',
-    url: 'https://style.monday.com/',
-    logo: 'https://avatars.githubusercontent.com/u/61420283?v=4',
-    image: {
-      src: '/home/community/storybooks/monday-com.webp',
-      width: 1440,
-      height: 1050,
-    },
-  },
-  {
-    name: 'Microsoft',
-    url: 'https://master--628d031b55e942004ac95df1.chromatic.com/',
-    logo: 'https://avatars.githubusercontent.com/u/6154722?v=4',
-    image: {
-      src: '/home/community/storybooks/microsoft.webp',
-      width: 1440,
-      height: 1050,
-    },
-  },
-  {
-    name: 'D2IQ',
-    url: 'http://design-system.d2iq.com/',
-    logo: 'https://avatars.githubusercontent.com/u/19392808?v=4',
-    image: {
-      src: '/home/community/storybooks/d2iq.webp',
-      width: 1440,
-      height: 1050,
-    },
-  },
-  {
-    name: 'Drei',
-    url: 'https://drei.pmnd.rs/',
-    logo: 'https://avatars.githubusercontent.com/u/45790596?v=4',
-    image: {
-      src: '/home/community/storybooks/drei.webp',
-      width: 1440,
-      height: 1050,
-    },
-  },
-  {
-    name: 'Shopify',
-    url: 'https://main--5d559397bae39100201eedc1.chromatic.com/',
-    logo: 'https://avatars.githubusercontent.com/u/8085?v=4',
-    image: {
-      src: '/home/community/storybooks/shopify.webp',
-      width: 1440,
-      height: 1050,
-    },
-  },
-  {
-    name: 'kickstartDS',
-    url: 'https://www.kickstartds.com/storybook/',
-    logo: 'https://avatars.githubusercontent.com/u/79609753?v=4',
-    image: {
-      src: '/home/community/storybooks/kickstart-ds.webp',
-      width: 1440,
-      height: 1050,
-    },
-  },
-  {
-    name: 'Grommet',
-    url: 'https://master--5d9774839a6eff00203f5cbf.chromatic.com/',
-    logo: 'https://avatars.githubusercontent.com/u/14203820?v=4',
-    image: {
-      src: '/home/community/storybooks/grommet.webp',
-      width: 1440,
-      height: 1050,
-    },
-  },
-  {
-    name: 'JSTOR',
-    url: 'https://develop--60919c26122bd50039b34644.chromatic.com/',
-    logo: 'https://avatars.githubusercontent.com/u/74469?v=4',
-    image: {
-      src: '/home/community/storybooks/jstor.webp',
-      width: 1440,
-      height: 1050,
-    },
-  },
-];
 
 const contributors = [
   '/home/community/contributor6.jpg',
@@ -218,45 +138,11 @@ export function SocialValidation({
           </div>
         </div>
       </Container>
-      <div className="mb-[calc(5rem-1rem)] mt-12 flex snap-x scroll-p-8 gap-8 overflow-scroll px-8 py-0 pb-4 text-white sm:mt-20 md:mt-28">
-        {storybooks.map((storybookProject) => (
-          <a
-            className="block w-[240px] flex-none no-underline sm:w-[480px]"
-            href={storybookProject.url}
-            key={storybookProject.name}
-            rel="noopener nofollow noreferrer"
-            target="_blank"
-          >
-            <div className="overflow-hidden rounded-md">
-              <div className="flex h-4 w-full items-center gap-1 border-y border-b-zinc-300 border-t-transparent bg-zinc-200 pl-2">
-                <div className="h-[5px] w-[5px] rounded-full bg-red-500" />
-                <div className="h-[5px] w-[5px] rounded-full bg-yellow-500" />
-                <div className="h-[5px] w-[5px] rounded-full bg-green-500" />
-              </div>
-              <Image
-                alt={storybookProject.name}
-                height={storybookProject.image.height}
-                src={storybookProject.image.src}
-                width={storybookProject.image.width}
-              />
-            </div>
-            <div className="mt-3 flex items-center text-white">
-              <Image
-                alt={storybookProject.name}
-                className="mr-2 h-5 w-5"
-                height={20}
-                src={storybookProject.logo}
-                width={20}
-              />
-              <span className="text-sm">{storybookProject.name}</span>
-            </div>
-          </a>
-        ))}
-      </div>
-      <div className="mb-[calc(5rem-1rem)] mt-12 flex snap-x scroll-p-8 gap-8 overflow-scroll px-8 py-0 pb-4 sm:mt-20 md:mt-28">
+      <AutoSlider/>
+      <div className="mb-[calc(5rem-1rem)] mt-12 flex snap-x scroll-p-8 gap-8 md:overflow-hidden overflow-x-scroll justify-center items-center px-8 py-0 pb-4 sm:mt-20 md:mt-28">
         {projects.map((project) => (
           <a
-            className="w-[240px] flex-none rounded-md bg-red-500"
+            className="w-[160px] flex-none rounded-md bg-red-500"
             href={project.projectUrl}
             key={project.logoAlt}
             rel="noopener"
@@ -264,7 +150,7 @@ export function SocialValidation({
             target="_blank"
           >
             <AspectRatio
-              className="flex flex-col items-center justify-center gap-2 font-bold text-white"
+              className="flex flex-col items-center justify-center gap-4 font-bold text-white"
               ratio={4 / 3}
             >
               <Image
@@ -273,7 +159,7 @@ export function SocialValidation({
                 src={project.logoUrl}
                 width={project.width}
               />
-              {project.name}
+             <p className='text-sm text-center'>{project.name}</p>
             </AspectRatio>
           </a>
         ))}