diff --git a/components/Card.tsx b/components/Card.tsx
index 663f9a2..d5fc7b2 100644
--- a/components/Card.tsx
+++ b/components/Card.tsx
@@ -12,7 +12,7 @@ export function Card(
       class="text-white rounded-3xl shadow-md p-4 relative overflow-hidden 
   lg:w-56 lg:h-56 
   sm:w-48 sm:h-48
-  w-32 h-32"
+  w-[37vw] h-[37vw]"
     >
       <div class="h-full flex flex-col justify-between relative z-10">
         <div>
diff --git a/components/Grid.tsx b/components/Grid.tsx
index 702d0c5..61f2687 100644
--- a/components/Grid.tsx
+++ b/components/Grid.tsx
@@ -2,10 +2,7 @@ import { ComponentChildren } from "preact";
 
 export const Grid = ({ children }: { children: ComponentChildren }) => {
   return (
-    <div
-      class="grid gap-4 py-6"
-      style={{ gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))" }}
-    >
+    <div class="grid gap-4 py-6 custom-grid">
       {children}
     </div>
   );
diff --git a/routes/recipes/index.tsx b/routes/recipes/index.tsx
index 9b9e063..ae998a1 100644
--- a/routes/recipes/index.tsx
+++ b/routes/recipes/index.tsx
@@ -15,9 +15,9 @@ export const handler: Handlers<Recipe[] | null> = {
 export default function Greet(props: PageProps<Recipe[] | null>) {
   return (
     <MainLayout url={props.url}>
-      <header class="flex gap-4 items-center mb-5 md:hidden">
+      <header class="flex gap-4 items-center mb-2 lg:mb-5 md:hidden">
         <a
-          class="px-4 ml-4 py-2 bg-gray-300 text-gray-800 rounded-lg flex items-center gap-1"
+          class="px-4 lg:ml-4 py-2 bg-gray-300 text-gray-800 rounded-lg flex items-center gap-1"
           href="/"
         >
           <IconArrowLeft class="w-5 h-5" />
diff --git a/static/global.css b/static/global.css
index bf0095b..44e7cb1 100644
--- a/static/global.css
+++ b/static/global.css
@@ -10,6 +10,16 @@ a {
   color: cadetblue
 }
 
+.custom-grid {
+  grid-template-columns: repeat(auto-fit, minmax(37vw, 1fr)) ;
+}
+
+@media(min-width: 640px){
+.custom-grid {
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) ;
+}
+}
+
 .noisy-gradient::after {
   content: "";
   top: 0;