diff --git a/frontend/src/App.css b/frontend/src/App.css
index 2bddac5..a3b8351 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -4,8 +4,9 @@
 @tailwind utilities;
 
 /* Custom recipe app styles */
-@layer preflight {
-    /* headlines */
+
+@layer components {
+
     h1 {
         @apply text-3xl font-black text-blue-900;
     }
@@ -18,18 +19,15 @@
         @apply font-semibold;
     }
 
-    /* labels */
-    label {
-        @apply text-gray-600;
-    }
-
     /* input fields */
     input, textarea {
         @apply p-2 w-full border rounded-md bg-white placeholder-gray-400 border-gray-600 hover:border-blue-800 transition-colors text-gray-600 focus:outline-none focus:border-blue-900;
     }
-}
 
-@layer components {
+    /* labels */
+    label {
+        @apply text-gray-600;
+    }
 
     /* background */
     .app-bg {
diff --git a/frontend/src/components/recipes/RecipeListItem.tsx b/frontend/src/components/recipes/RecipeListItem.tsx
index 76d13ee..ef12451 100644
--- a/frontend/src/components/recipes/RecipeListItem.tsx
+++ b/frontend/src/components/recipes/RecipeListItem.tsx
@@ -1,40 +1,41 @@
-import { Link } from "react-router-dom"
+import {Link} from "react-router-dom"
 
 type RecipeListItemProps = {
-  title: string
-  targetPath: string
-  imageUrl?: string
+    title: string
+    targetPath: string
+    imageUrl?: string
 }
 
 /**
  * List item for the recipe list. Selecting an item navigates to the recipe
  */
 
-export default function RecipeListItem({ title, targetPath, imageUrl }: RecipeListItemProps) {
-  return (
-    <Link
-      to={targetPath}
-      className="h-60 w-60 block rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-shadow bg-white dark:bg-gray-800"
-    >
-      {/* Optional recipe image */}
-      {imageUrl ? (
-        <img
-          src={imageUrl}
-          alt={title}
-          className="w-full h-40 object-cover"
-        />
-      ) 
-      : <div className="bg-gray-300 w-full h-40 flex justify-center items-center">
-          <label className="font-black text-gray-500" >no image</label>
-        </div>
-      }
+export default function RecipeListItem({title, targetPath, imageUrl}: RecipeListItemProps) {
+    return (
+        <Link
+            to={targetPath}
+            className="h-60 w-60 block rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-shadow bg-white dark:bg-gray-800 flex flex-col"
+        >
+            {/* Image or placeholder */}
+            {imageUrl ? (
+                <img
+                    src={imageUrl}
+                    alt={title}
+                    className="w-full h-2/3 object-cover"
+                />
+            ) : (
+                <div className="bg-gray-300 w-full h-2/3 flex justify-center items-center">
+                    <label className="font-black text-gray-600">no image</label>
+                </div>
+            )}
 
-      {/* Card content */}
-      <div className="p-4">
-        <h2 className="text-lg font-semibold text-blue-400 dark:text-gray-100">
-          {title}
-        </h2>
-      </div>
-    </Link>
-  )
+            {/* Recipe name section (takes remaining space) */}
+            <div className="flex-1 flex items-center justify-center p-2">
+                <label className="text-lg font-semibold text-blue-400 dark:text-gray-100 text-center">
+                    {title}
+                </label>
+            </div>
+        </Link>
+    );
 }
+