diff --git a/app/views/admin/homepage/_card.html.erb b/app/components/admin/widget/cards/row_component.html.erb
similarity index 100%
rename from app/views/admin/homepage/_card.html.erb
rename to app/components/admin/widget/cards/row_component.html.erb
diff --git a/app/components/admin/widget/cards/row_component.rb b/app/components/admin/widget/cards/row_component.rb
new file mode 100644
index 000000000..fed569949
--- /dev/null
+++ b/app/components/admin/widget/cards/row_component.rb
@@ -0,0 +1,7 @@
+class Admin::Widget::Cards::RowComponent < ApplicationComponent
+  attr_reader :card
+
+  def initialize(card)
+    @card = card
+  end
+end
diff --git a/app/components/admin/widget/cards/table_component.html.erb b/app/components/admin/widget/cards/table_component.html.erb
new file mode 100644
index 000000000..01a52aec5
--- /dev/null
+++ b/app/components/admin/widget/cards/table_component.html.erb
@@ -0,0 +1,22 @@
+<% if cards.any? %>
+  <table>
+    <thead>
+      <tr>
+        <th><%= ::Widget::Card.human_attribute_name(:title) %></th>
+        <th class="small-4"><%= ::Widget::Card.human_attribute_name(:description) %></th>
+        <th><%= ::Widget::Card.human_attribute_name(:link_text) %> / <%= ::Widget::Card.human_attribute_name(:link_url) %></th>
+        <th><%= t("admin.shared.image") %></th>
+        <th><%= t("admin.shared.actions") %></th>
+      </tr>
+    </thead>
+    <tbody>
+      <% cards.each do |card| %>
+        <%= render Admin::Widget::Cards::RowComponent.new(card) %>
+      <% end %>
+    </tbody>
+  </table>
+<% else %>
+  <div class="callout primary clear">
+    <%= no_cards_message %>
+  </div>
+<% end %>
diff --git a/app/components/admin/widget/cards/table_component.rb b/app/components/admin/widget/cards/table_component.rb
new file mode 100644
index 000000000..74e2112a3
--- /dev/null
+++ b/app/components/admin/widget/cards/table_component.rb
@@ -0,0 +1,8 @@
+class Admin::Widget::Cards::TableComponent < ApplicationComponent
+  attr_reader :cards, :no_cards_message
+
+  def initialize(cards, no_cards_message:)
+    @cards = cards
+    @no_cards_message = no_cards_message
+  end
+end
diff --git a/app/views/admin/homepage/_cards.html.erb b/app/views/admin/homepage/_cards.html.erb
deleted file mode 100644
index ae2fef6d0..000000000
--- a/app/views/admin/homepage/_cards.html.erb
+++ /dev/null
@@ -1,16 +0,0 @@
-<table>
-  <thead>
-    <tr>
-      <th><%= Widget::Card.human_attribute_name(:title) %></th>
-      <th class="small-4"><%= Widget::Card.human_attribute_name(:description) %></th>
-      <th><%= Widget::Card.human_attribute_name(:link_text) %> / <%= Widget::Card.human_attribute_name(:link_url) %></th>
-      <th><%= t("admin.shared.image") %></th>
-      <th class="small-3"><%= t("admin.shared.actions") %></th>
-    </tr>
-  </thead>
-  <tbody>
-    <% cards.each do |card| %>
-      <%= render "card", card: card %>
-    <% end %>
-  </tbody>
-</table>
diff --git a/app/views/admin/homepage/show.html.erb b/app/views/admin/homepage/show.html.erb
index b931feff5..3c933c961 100644
--- a/app/views/admin/homepage/show.html.erb
+++ b/app/views/admin/homepage/show.html.erb
@@ -9,13 +9,10 @@
     <%= link_to t("admin.homepage.create_header"), new_admin_widget_card_path(header_card: true), class: "button" %>
   </div>
 
-  <% if @header.present? %>
-    <%= render "cards", cards: @header %>
-  <% else %>
-    <div class="callout primary clear">
-      <%= t("admin.homepage.no_header") %>
-    </div>
-  <% end %>
+  <%= render Admin::Widget::Cards::TableComponent.new(
+    @header,
+    no_cards_message: t("admin.homepage.no_header")
+  ) %>
 </div>
 
 <hr>
@@ -27,13 +24,10 @@
     <%= link_to t("admin.homepage.create_card"), new_admin_widget_card_path, class: "button" %>
   </div>
 
-  <% if @cards.present? %>
-    <%= render "cards", cards: @cards %>
-  <% else %>
-    <div class="callout primary clear">
-      <%= t("admin.homepage.no_cards") %>
-    </div>
-  <% end %>
+  <%= render Admin::Widget::Cards::TableComponent.new(
+    @cards,
+    no_cards_message: t("admin.homepage.no_cards")
+  ) %>
 </div>
 
 <hr>
diff --git a/app/views/admin/site_customization/cards/_card.html.erb b/app/views/admin/site_customization/cards/_card.html.erb
deleted file mode 100644
index 94025a7b1..000000000
--- a/app/views/admin/site_customization/cards/_card.html.erb
+++ /dev/null
@@ -1,22 +0,0 @@
-<tr id="<%= dom_id(card) %>" class="homepage-card">
-  <td>
-    <%= card.label %><br>
-    <%= card.title %>
-  </td>
-  <td><%= card.description %></td>
-  <td>
-    <%= card.link_text %><br>
-    <%= card.link_url %>
-  </td>
-
-  <!-- remove conditional once specs have image validations -->
-  <td>
-    <% if card.image.present? %>
-      <%= link_to t("admin.shared.show_image"), card.image_url(:large),
-                  title: card.image.title, target: "_blank" %>
-    <% end %>
-  </td>
-  <td>
-    <%= render Admin::TableActionsComponent.new(card) %>
-  </td>
-</tr>
diff --git a/app/views/admin/site_customization/cards/_cards.html.erb b/app/views/admin/site_customization/cards/_cards.html.erb
deleted file mode 100644
index 8d9d87c96..000000000
--- a/app/views/admin/site_customization/cards/_cards.html.erb
+++ /dev/null
@@ -1,16 +0,0 @@
-<table>
-  <thead>
-    <tr>
-      <th><%= Widget::Card.human_attribute_name(:title) %></th>
-      <th class="small-4"><%= Widget::Card.human_attribute_name(:description) %></th>
-      <th><%= Widget::Card.human_attribute_name(:link_text) %> / <%= Widget::Card.human_attribute_name(:link_url) %></th>
-      <th><%= t("admin.shared.image") %></th>
-      <th class="small-2"><%= t("admin.shared.actions") %></th>
-    </tr>
-  </thead>
-  <tbody>
-    <% cards.each do |card| %>
-      <%= render "card", card: card %>
-    <% end %>
-  </tbody>
-</table>
diff --git a/app/views/admin/site_customization/cards/index.html.erb b/app/views/admin/site_customization/cards/index.html.erb
index ff94623f5..1957744ff 100644
--- a/app/views/admin/site_customization/cards/index.html.erb
+++ b/app/views/admin/site_customization/cards/index.html.erb
@@ -11,11 +11,8 @@
                 new_admin_site_customization_page_widget_card_path(@page), class: "button" %>
   </div>
 
-  <% if @cards.present? %>
-    <%= render "cards", cards: @cards %>
-  <% else %>
-    <div class="callout primary clear">
-      <%= t("admin.site_customization.pages.cards.no_cards") %>
-    </div>
-  <% end %>
+  <%= render Admin::Widget::Cards::TableComponent.new(
+    @cards,
+    no_cards_message: t("admin.site_customization.pages.cards.no_cards")
+  ) %>
 </div>