diff --git a/packages/react/src/components/video/VideoMenu.tsx b/packages/react/src/components/video/VideoMenu.tsx
index 3850be8ed..9402fedb7 100644
--- a/packages/react/src/components/video/VideoMenu.tsx
+++ b/packages/react/src/components/video/VideoMenu.tsx
@@ -40,7 +40,7 @@ export function VideoMenu({
             to={`https://youtu.be/${videoId}`}
             target="_blank"
           >
-            <div className="i-lucide:youtube" />
+            <div className="i-mdi:youtube" />
             Open on YouTube
           </Link>
         </DropdownMenuItem>
diff --git a/packages/react/src/routes/home.tsx b/packages/react/src/routes/home.tsx
index ab42093e0..1790f218d 100644
--- a/packages/react/src/routes/home.tsx
+++ b/packages/react/src/routes/home.tsx
@@ -61,9 +61,9 @@ export function Home() {
   const listCN = useMemo(
     () =>
       cn({
-        "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6 gap-x-4 gap-y-6":
+        "grid grid-cols-1 grid-cols-[repeat(auto-fill,_minmax(300px,_1fr))] gap-x-4 gap-y-6":
           cardSize === "lg",
-        "grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-x-2 gap-y-4":
+        "grid grid-cols-2 grid-cols-[repeat(auto-fill,_minmax(200px,_1fr))] gap-x-2 gap-y-4":
           cardSize === "md",
         "flex flex-col max-w-screen-lg mx-auto": cardSize === "sm",
       }),