diff --git a/app/components/admin/site_customization/pages/index_component.html.erb b/app/components/admin/site_customization/pages/index_component.html.erb
new file mode 100644
index 000000000..68db19b5f
--- /dev/null
+++ b/app/components/admin/site_customization/pages/index_component.html.erb
@@ -0,0 +1,51 @@
+<%= header do %>
+  <%= link_to t("admin.site_customization.pages.index.create"), new_admin_site_customization_page_path %>
+<% end %>
+
+<% if pages.any? %>
+  <h3><%= page_entries_info pages %></h3>
+
+  <table class="cms-page-list">
+    <thead>
+      <tr>
+        <th><%= t("admin.site_customization.pages.page.title") %></th>
+        <th><%= t("admin.site_customization.pages.page.slug") %></th>
+        <th><%= t("admin.site_customization.pages.page.created_at") %></th>
+        <th><%= t("admin.site_customization.pages.page.updated_at") %></th>
+        <th><%= t("admin.site_customization.pages.page.status") %></th>
+        <th><%= t("admin.actions.actions") %></th>
+      </tr>
+    </thead>
+    <tbody>
+    <% pages.each do |page| %>
+      <tr id="<%= dom_id(page) %>">
+        <td><%= page.title %></td>
+        <td><%= page.slug %></td>
+        <td><%= I18n.l page.created_at, format: :long %></td>
+        <td><%= I18n.l page.updated_at, format: :long %></td>
+        <td><%= t("admin.site_customization.pages.page.status_#{page.status}") %></td>
+        <td>
+          <%= render Admin::TableActionsComponent.new(page) do |actions| %>
+            <%= actions.action(:cards,
+                               text: t("admin.site_customization.pages.page.see_cards"),
+                               path: admin_site_customization_page_widget_cards_path(page)) %>
+
+            <% if page.status == "published" %>
+              <%= actions.action(:show,
+                                 text: t("admin.site_customization.pages.index.see_page"),
+                                 path: page.url,
+                                 options: { target: "_blank" }) %>
+            <% end %>
+          <% end %>
+        </td>
+      </tr>
+    <% end %>
+    </tbody>
+  </table>
+
+  <%= paginate pages %>
+<% else %>
+  <div class="callout primary">
+    <%= page_entries_info pages %>
+  </div>
+<% end %>
diff --git a/app/components/admin/site_customization/pages/index_component.rb b/app/components/admin/site_customization/pages/index_component.rb
new file mode 100644
index 000000000..d68123b59
--- /dev/null
+++ b/app/components/admin/site_customization/pages/index_component.rb
@@ -0,0 +1,14 @@
+class Admin::SiteCustomization::Pages::IndexComponent < ApplicationComponent
+  include Header
+  attr_reader :pages
+
+  def initialize(pages)
+    @pages = pages
+  end
+
+  private
+
+    def title
+      t("admin.site_customization.pages.index.title")
+    end
+end
diff --git a/app/views/admin/site_customization/pages/index.html.erb b/app/views/admin/site_customization/pages/index.html.erb
index 8be93c234..d990389ee 100644
--- a/app/views/admin/site_customization/pages/index.html.erb
+++ b/app/views/admin/site_customization/pages/index.html.erb
@@ -1,54 +1 @@
-<% provide :title do %>
-  <%= t("admin.header.title") %> - <%= t("admin.menu.site_customization.pages") %>
-<% end %>
-
-<%= link_to t("admin.site_customization.pages.index.create"), new_admin_site_customization_page_path, class: "button float-right" %>
-<h2 class="inline-block"><%= t("admin.site_customization.pages.index.title") %></h2>
-
-<% if @pages.any? %>
-  <h3><%= page_entries_info @pages %></h3>
-
-  <table class="cms-page-list">
-    <thead>
-      <tr>
-        <th><%= t("admin.site_customization.pages.page.title") %></th>
-        <th><%= t("admin.site_customization.pages.page.slug") %></th>
-        <th><%= t("admin.site_customization.pages.page.created_at") %></th>
-        <th><%= t("admin.site_customization.pages.page.updated_at") %></th>
-        <th><%= t("admin.site_customization.pages.page.status") %></th>
-        <th><%= t("admin.actions.actions") %></th>
-      </tr>
-    </thead>
-    <tbody>
-    <% @pages.each do |page| %>
-      <tr id="<%= dom_id(page) %>">
-        <td><%= page.title %></td>
-        <td><%= page.slug %></td>
-        <td><%= I18n.l page.created_at, format: :short %></td>
-        <td><%= I18n.l page.created_at, format: :short %></td>
-        <td><%= t("admin.site_customization.pages.page.status_#{page.status}") %></td>
-        <td>
-          <%= render Admin::TableActionsComponent.new(page) do |actions| %>
-            <%= actions.action(:cards,
-                               text: t("admin.site_customization.pages.page.see_cards"),
-                               path: admin_site_customization_page_widget_cards_path(page)) %>
-
-            <% if page.status == "published" %>
-              <%= actions.action(:show,
-                                 text: t("admin.site_customization.pages.index.see_page"),
-                                 path: page.url,
-                                 options: { target: "_blank" }) %>
-            <% end %>
-          <% end %>
-        </td>
-      </tr>
-    <% end %>
-    </tbody>
-  </table>
-
-  <%= paginate @pages %>
-<% else %>
-  <div class="callout primary">
-    <%= page_entries_info @pages %>
-  </div>
-<% end %>
+<%= render Admin::SiteCustomization::Pages::IndexComponent.new(@pages) %>
diff --git a/spec/components/admin/site_customization/pages/index_component_spec.rb b/spec/components/admin/site_customization/pages/index_component_spec.rb
new file mode 100644
index 000000000..1792e52cb
--- /dev/null
+++ b/spec/components/admin/site_customization/pages/index_component_spec.rb
@@ -0,0 +1,15 @@
+require "rails_helper"
+
+describe Admin::SiteCustomization::Pages::IndexComponent, controller: Admin::SiteCustomization::PagesController do
+  before { SiteCustomization::Page.delete_all }
+
+  it "shows date in created_at and updated_at fields" do
+    custom_page = create(:site_customization_page, created_at: "2015-07-15 13:32:13")
+    custom_page.update!(updated_at: "2019-12-09 09:19:29")
+
+    render_inline Admin::SiteCustomization::Pages::IndexComponent.new(SiteCustomization::Page.page(1))
+
+    expect(page).to have_content "July 15, 2015 13:32"
+    expect(page).to have_content "December 09, 2019 09:19"
+  end
+end