diff --git a/src/_includes/layouts/home.njk b/src/_includes/layouts/home.njk
index 16f2a81..3894575 100644
--- a/src/_includes/layouts/home.njk
+++ b/src/_includes/layouts/home.njk
@@ -27,7 +27,7 @@ bodyClass: c-home
                 <div class="c-card__wrapper">
                     {% set favouriteRecipes = collections["Favourite ⭐"] | limit(4) %}
                     {% for recipe in favouriteRecipes %}
-                        <a class="c-card" href="{{ recipe.url }}">
+                        <div class="c-card">
                             {% recipeimage recipe.data.image, "c-card__image", recipe.data.title, "(min-width: 1150px) 25vw, (min-width: 850px) 33vw, (min-width: 550px) 50vw, 100vw" %}
                             <div class="c-card__info">
                                 <div>
@@ -42,10 +42,10 @@ bodyClass: c-home
                                     </div>
                                 {% endif %}
                             </div>
-                            <div class="c-card__title-wrapper">
+                            <a class="c-card__title-wrapper" href="{{ recipe.url }}">
                                 <h3 class="c-card__title">{{ recipe.data.title }}</h3>
-                            </div>
-                        </a>
+                            </a>
+                        </div>
                     {% endfor %}
                 </div>
             </div>
diff --git a/src/_includes/layouts/recipes-list.njk b/src/_includes/layouts/recipes-list.njk
index ab72f3b..6e1b2d4 100644
--- a/src/_includes/layouts/recipes-list.njk
+++ b/src/_includes/layouts/recipes-list.njk
@@ -16,7 +16,7 @@
                 <div class="c-card__wrapper">
                     {% for recipe in collections.recipes %}
                         {% if not selectedTag or selectedTag in recipe.data.tags %} {# If we don't have a selectedTag, we are on the all recipes page #}
-                            <a class="c-card" href="{{ recipe.url }}">
+                            <div class="c-card">
                                 {% recipeimage recipe.data.image, "c-card__image", recipe.data.title, "(min-width: 1150px) 25vw, (min-width: 850px) 33vw, (min-width: 550px) 50vw, 100vw" %}
                                 <div class="c-card__info">
                                     <div>
@@ -31,10 +31,10 @@
                                         </div>
                                     {% endif %}
                                 </div>
-                                <div class="c-card__title-wrapper">
+                                <a class="c-card__title-wrapper" href="{{ recipe.url }}">
                                     <h3 class="c-card__title">{{ recipe.data.title }}</h3>
-                                </div>
-                            </a>
+                                </a>
+                            </div>
                         {% endif %}
                     {% endfor %}
                 </div>
diff --git a/src/scss/components/_card.scss b/src/scss/components/_card.scss
index 824ee54..97d2edb 100644
--- a/src/scss/components/_card.scss
+++ b/src/scss/components/_card.scss
@@ -5,6 +5,7 @@
 }
 
 .c-card {
+    position: relative;
     width: 100%;
     max-width: 600px;
     margin: 0 auto;
@@ -15,18 +16,6 @@
     box-shadow: var(--shadow-md);
     text-decoration: none;
     color: var(--color-grey-900);
-
-    &:hover, &:focus {
-        outline: none;
-        box-shadow: var(--shadow-lg);
-        color: var(--color-grey-900);
-        text-decoration: none;
-    }
-
-    &:focus-visible {
-        box-shadow: 0 0 0 2px var(--color-secondary),
-        var(--shadow-lg);
-    }
 }
 
 .c-card__image {
@@ -77,6 +66,35 @@
     display: flex;
     align-items: center;
     padding: 12px 18px;
+    text-decoration: none;
+    color: var(--color-grey-900);
+
+    &::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 100%;
+        border-radius: 20px;
+    }
+
+    &:hover, &:focus {
+        text-decoration: none;
+        
+        &::before {
+            outline: none;
+            box-shadow: var(--shadow-lg);
+            color: var(--color-grey-900);
+            text-decoration: none;
+        }
+    }
+
+    &:focus-visible {
+        &::before {
+            box-shadow: 0 0 0 2px var(--color-secondary), var(--shadow-lg);
+        }
+    }
 }
 
 .c-card__title {