diff --git a/apps/www/src/routes/home/index.tsx b/apps/www/src/routes/home/index.tsx
index 221f8dec..ce9d5e6e 100644
--- a/apps/www/src/routes/home/index.tsx
+++ b/apps/www/src/routes/home/index.tsx
@@ -19,7 +19,7 @@ export default component$(() => {
                 </div>
             </section>
             <section class="flex flex-col gap-4 justify-center pt-10 items-center w-full text-left pb-4">
-                <div class="flex gap-4 mx-auto max-w-xl w-full">
+                <div class="flex gap-4 mx-auto max-w-xl lg:max-w-2xl w-full">
                     {/* <GameCard
                         game={{
                             release_date: 1478710740000,
@@ -38,7 +38,7 @@ export default component$(() => {
                         }}
                     /> */}
                 </div>
-                <div class="gap-4 mx-auto max-w-xl w-full grid grid-cols-1 md:grid-cols-2">
+                <div class="gap-4 w-full max-w-xl lg:max-w-4xl grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
                     <Card
                         game={{
                             // release_date: 1478710740000,
diff --git a/bun.lockb b/bun.lockb
index dc3f0ee1..bf213580 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index e659216e..08f45986 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
   },
   "devDependencies": {
     "prettier": "^3.2.5",
+    "sst": "^3.0.91",
     "turbo": "^2.0.12",
     "typescript": "^5.4.5"
   },
diff --git a/packages/ui/src/card.tsx b/packages/ui/src/card.tsx
index 689e4456..3addf169 100644
--- a/packages/ui/src/card.tsx
+++ b/packages/ui/src/card.tsx
@@ -41,20 +41,12 @@ export const Card = component$(({ game }: Props) => {
         g = Math.floor(g / count);
         b = Math.floor(b / count);
 
-        const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
 
-        if (isDarkMode) {
-            // Darken the color for dark mode
-            r = Math.floor(r * 0.8);
-            g = Math.floor(g * 0.8);
-            b = Math.floor(b * 0.8);
-        } else {
-            // For light mode, keep the existing logic
-            const minBrightness = 100;
-            r = Math.max(r, minBrightness);
-            g = Math.max(g, minBrightness);
-            b = Math.max(b, minBrightness);
-        }
+        // For light mode, keep the existing logic
+        const minBrightness = 100;
+        r = Math.max(r, minBrightness);
+        g = Math.max(g, minBrightness);
+        b = Math.max(b, minBrightness);
 
 
         return `rgb(${r},${g},${b})`;
@@ -80,9 +72,9 @@ export const Card = component$(({ game }: Props) => {
     return (
         <div
             style={{
-                backgroundColor: backgroundColor.value,
+                "--bg-color": backgroundColor.value,
             }}
-            class="min-w-[250px] group cursor-pointer backdrop-blur-sm select-none w-full group rounded-3xl text-primary-950/70 duration-300 transition-colors flex flex-col">
+            class="min-w-[250px] bg-[--bg-color] group cursor-pointer backdrop-blur-sm select-none w-full group rounded-3xl text-primary-950/70 duration-200 transition-colors flex flex-col">
             <header class="flex gap-4 justify-between p-4">
                 <div class="flex relative pr-[22px] overflow-hidden overflow-ellipsis whitespace-nowrap" >
                     <h3 class="overflow-hidden overflow-ellipsis whitespace-nowrap">{game.name}</h3>