diff --git a/src/Roux/Html.hs b/src/Roux/Html.hs
index 0572c52..87657ae 100644
--- a/src/Roux/Html.hs
+++ b/src/Roux/Html.hs
@@ -1334,7 +1334,9 @@ landingStyles =
         , ""
         , ".lnd-card { cursor: pointer; }"
         , ".lnd-card-image { width: 100%; aspect-ratio: 1.3; border-radius: 8px; background-size: cover; background-position: center; background: linear-gradient(135deg, #E8B86A, #C9893F 60%, #8A5A2A); transition: opacity 0.15s; }"
+        , ".lnd-card-image.contain { background-size: contain; background-repeat: no-repeat; background-color: var(--roux-bg); }"
         , ".lnd-card:hover .lnd-card-image { opacity: 0.92; }"
+        , ".lnd-card a { text-decoration: none; color: inherit; display: block; }"
         , ".lnd-card-title { font-family: \"Fraunces\", serif; font-size: 17px; font-weight: 500; margin: 10px 0 4px; }"
         , ".lnd-card-meta { font-size: 12px; color: #8A7560; }"
         , ""
@@ -1439,18 +1441,30 @@ encodeRecipeJson recipes =
     escapeChar '\t' = "\\t"
     escapeChar c = T.singleton c
 
+-- | Get the recipe image URL from RecipeInfo, if available.
+getRecipeImage :: Idx.RecipeInfo -> Maybe Text
+getRecipeImage info = case Idx.riRecipe info of
+    Right r -> metaImage (recipeMetadata r)
+    Left _ -> Nothing
+
 -- | Render a landing page card for recently cooked (with date).
 renderLandingCookedCard :: Text -> CookLog.CookEntry -> Idx.RecipeInfo -> Html
 renderLandingCookedCard imgClass entry info =
-    H.div ! A.class_ "lnd-card" $ do
-        H.div ! A.class_ (H.toValue ("lnd-card-image " <> imgClass)) $ ""
-        H.div ! A.class_ "lnd-card-title" $ H.toHtml (Idx.riTitle info)
-        H.div ! A.class_ "lnd-card-meta" $ H.toHtml (formatDay (CookLog.ceCookedDate entry))
+    H.a ! A.href (H.toValue ("/recipes/" <> T.pack (Idx.riFilename info))) $
+        H.div ! A.class_ "lnd-card" $ do
+            case getRecipeImage info of
+                Just url -> H.div ! A.class_ "lnd-card-image contain" ! A.style (H.toValue ("background-image: url(" <> url <> ")")) $ ""
+                Nothing -> H.div ! A.class_ (H.toValue ("lnd-card-image " <> imgClass)) $ ""
+            H.div ! A.class_ "lnd-card-title" $ H.toHtml (Idx.riTitle info)
+            H.div ! A.class_ "lnd-card-meta" $ H.toHtml (formatDay (CookLog.ceCookedDate entry))
 
 -- | Render a landing page card for recently added (with "Added" date).
 renderLandingCard :: Text -> Idx.RecipeInfo -> Html
 renderLandingCard imgClass info =
-    H.div ! A.class_ "lnd-card" $ do
-        H.div ! A.class_ (H.toValue ("lnd-card-image " <> imgClass)) $ ""
-        H.div ! A.class_ "lnd-card-title" $ H.toHtml (Idx.riTitle info)
-        H.div ! A.class_ "lnd-card-meta" $ H.toHtml ("Recently added" :: Text)
+    H.a ! A.href (H.toValue ("/recipes/" <> T.pack (Idx.riFilename info))) $
+        H.div ! A.class_ "lnd-card" $ do
+            case getRecipeImage info of
+                Just url -> H.div ! A.class_ "lnd-card-image contain" ! A.style (H.toValue ("background-image: url(" <> url <> ")")) $ ""
+                Nothing -> H.div ! A.class_ (H.toValue ("lnd-card-image " <> imgClass)) $ ""
+            H.div ! A.class_ "lnd-card-title" $ H.toHtml (Idx.riTitle info)
+            H.div ! A.class_ "lnd-card-meta" $ H.toHtml ("Recently added" :: Text)