diff --git a/app/assets/stylesheets/shared/recommended_index.scss b/app/assets/stylesheets/shared/recommended_index.scss
index 8c0ee9466..0f581cb67 100644
--- a/app/assets/stylesheets/shared/recommended_index.scss
+++ b/app/assets/stylesheets/shared/recommended_index.scss
@@ -16,9 +16,14 @@
     text-transform: uppercase;
   }
 
-  h3 {
-    font-size: $base-font-size;
-    margin-bottom: 0;
+  ul {
+    font-weight: bold;
+    list-style: none;
+    margin: 0;
+
+    > li {
+      margin-bottom: calc($line-height / 4);
+    }
   }
 
   a {
@@ -29,11 +34,9 @@
   }
 
   .recommendation {
-    @include card;
     background: $body-background;
     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
     display: block;
-    margin-bottom: calc($line-height / 4);
     padding: calc($line-height / 2);
     z-index: 1;
 
diff --git a/app/components/shared/recommended_index_component.html.erb b/app/components/shared/recommended_index_component.html.erb
index 713f6478a..20fbc176c 100644
--- a/app/components/shared/recommended_index_component.html.erb
+++ b/app/components/shared/recommended_index_component.html.erb
@@ -16,13 +16,13 @@
         <span class="show-for-sr"><%= t("shared.recommended_index.hide") %></span>
       <% end %>
 
-      <% recommendations.each do |recommendation| %>
-        <div class="small-12 medium-6 large-4 column end">
-          <div class="recommendation" data-equalizer-watch>
-            <h3><%= link_to recommendation.title, polymorphic_path(recommendation) %></h3>
-          </div>
-        </div>
-      <% end %>
+      <ul>
+        <% recommendations.each do |recommendation| %>
+          <li class="small-12 medium-6 large-4 column end">
+            <%= link_to recommendation.title, polymorphic_path(recommendation), class: "recommendation", "data-equalizer-watch": true %>
+          </li>
+        <% end %>
+      </ul>
 
       <div class="small-12 column">
         <%= link_to t("shared.recommended_index.see_more"),