diff --git a/app/routes/_home+/index.tsx b/app/routes/_home+/index.tsx
index c0d2aef..3503ab7 100644
--- a/app/routes/_home+/index.tsx
+++ b/app/routes/_home+/index.tsx
@@ -1,7 +1,13 @@
 import { type MetaFunction } from '@remix-run/node'
 import { Link } from '@remix-run/react'
+import Autoscroll from 'embla-carousel-auto-scroll'
 import { useEffect, useState } from 'react'
 import { Button } from '#app/components/ui/button.js'
+import {
+	Carousel,
+	CarouselContent,
+	CarouselItem,
+} from '#app/components/ui/carousel.js'
 import { Icon } from '#app/components/ui/icon.js'
 export const meta: MetaFunction = () => [{ title: 'Petal' }]
 
@@ -94,29 +100,64 @@ const Logos = [
 
 function LogoCloud() {
 	return (
-		<div className="hidden bg-secondary lg:block">
-			<div className="mx-auto max-w-7xl px-4 pb-32 pt-12 sm:px-6 lg:px-8">
-				<div className="grid grid-cols-5 gap-8">
-					{Logos.map((logo) => (
-						<div
-							key={logo.name}
-							className="col-span-1 flex justify-center md:col-span-2 lg:col-span-1"
-						>
-							<a href={logo.url}>
-								<img
-									className="h-10 grayscale"
-									src={logo.image}
-									alt={logo.name}
-								/>
-							</a>
-						</div>
-					))}
-				</div>
+		<div className="bg-secondary">
+			<div className="pb-12">
+				<Carousel
+					opts={{
+						align: 'center',
+						watchDrag: () => {}, // Disable drag
+						loop: true,
+					}}
+					plugins={[Autoscroll({ startDelay: 0 })]}
+				>
+					<CarouselContent>
+						{[...Logos, ...Logos, ...Logos].map((logo, index) => (
+							<CarouselItem
+								key={logo.name + index}
+								className="flex basis-1/2 items-center justify-center sm:basis-1/3 md:basis-1/5 lg:basis-1/6 xl:basis-2/12 2xl:basis-1/12"
+							>
+								<a href={logo.url} target="_blank" rel="noopener noreferrer">
+									<img
+										src={logo.image}
+										alt={logo.name}
+										className="h-10 grayscale"
+										draggable={false}
+									/>
+								</a>
+							</CarouselItem>
+						))}
+					</CarouselContent>
+				</Carousel>
 			</div>
 		</div>
 	)
 }
 
+// function LogoCloud() {
+// 	return (
+// 		<div className="hidden bg-secondary lg:block">
+// 			<div className="mx-auto max-w-7xl px-4 pb-32 pt-12 sm:px-6 lg:px-8">
+// 				<div className="grid grid-cols-5 gap-8">
+// 					{Logos.map((logo) => (
+// 						<div
+// 							key={logo.name}
+// 							className="col-span-1 flex justify-center md:col-span-2 lg:col-span-1"
+// 						>
+// 							<a href={logo.url}>
+// 								<img
+// 									className="h-10 grayscale"
+// 									src={logo.image}
+// 									alt={logo.name}
+// 								/>
+// 							</a>
+// 						</div>
+// 					))}
+// 				</div>
+// 			</div>
+// 		</div>
+// 	)
+// }
+
 function Feature() {
 	return (
 		<div className="relative overflow-hidden bg-white py-32">
diff --git a/app/utils/extended-theme.ts b/app/utils/extended-theme.ts
index 5008ab8..48d323a 100644
--- a/app/utils/extended-theme.ts
+++ b/app/utils/extended-theme.ts
@@ -1,6 +1,9 @@
 import { type Config } from 'tailwindcss'
 
 export const extendedTheme = {
+	screens: {
+		'2xl': `2400px`,
+	},
 	colors: {
 		border: 'hsl(var(--border))',
 		input: {
diff --git a/package-lock.json b/package-lock.json
index 7de3e2f..24a7725 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -56,6 +56,7 @@
         "crypto-js": "^4.2.0",
         "date-fns": "^3.6.0",
         "dotenv": "^16.4.5",
+        "embla-carousel-auto-scroll": "^8.2.1",
         "embla-carousel-react": "^8.2.1",
         "execa": "^9.3.0",
         "express": "^4.19.2",
@@ -12732,6 +12733,15 @@
       "integrity": "sha512-9mTDtyMZJhFuuW5pixhTT4iLiJB1l3dH3IpXUKCsgLlRlHCiySf/wLKy5xIAzmxIsokcQ50xea8wi7BCt0+Rxg==",
       "license": "MIT"
     },
+    "node_modules/embla-carousel-auto-scroll": {
+      "version": "8.2.1",
+      "resolved": "https://registry.npmjs.org/embla-carousel-auto-scroll/-/embla-carousel-auto-scroll-8.2.1.tgz",
+      "integrity": "sha512-TAPuqO9S5juETlythxDXPvq8xMFwmKrA+Jcf/YU4pFn7BADpG99wcolVKl7DEpK2a+q/r5lYstQVQWGqr+V1zw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "embla-carousel": "8.2.1"
+      }
+    },
     "node_modules/embla-carousel-react": {
       "version": "8.2.1",
       "resolved": "https://registry.npmjs.org/embla-carousel-react/-/embla-carousel-react-8.2.1.tgz",
diff --git a/package.json b/package.json
index 82095ef..f027718 100644
--- a/package.json
+++ b/package.json
@@ -93,6 +93,7 @@
     "crypto-js": "^4.2.0",
     "date-fns": "^3.6.0",
     "dotenv": "^16.4.5",
+    "embla-carousel-auto-scroll": "^8.2.1",
     "embla-carousel-react": "^8.2.1",
     "execa": "^9.3.0",
     "express": "^4.19.2",