diff --git a/lib/music_library_web/live/stats_live/index.ex b/lib/music_library_web/live/stats_live/index.ex
index b60b3ca8..f5b39548 100644
--- a/lib/music_library_web/live/stats_live/index.ex
+++ b/lib/music_library_web/live/stats_live/index.ex
@@ -16,342 +16,31 @@ defmodule MusicLibraryWeb.StatsLive.Index do
   def render(assigns) do
     ~H"""
     <Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
-      <div>
-        <h1 class="mt-5 text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
-          {gettext("Records")}
-        </h1>
-        <dl class="mt-5 grid grid-cols-3 gap-5 sm:grid-cols-5">
-          <.album_preview
-            record={@latest_record}
-            title={gettext("Latest purchase")}
-            class="col-span-3 sm:col-span-2"
-          />
-          <.counter
-            title={gettext("Collection")}
-            count={@collection_count}
-            path={~p"/collection"}
-          />
-          <.counter title={gettext("Wishlist")} count={@wishlist_count} path={~p"/wishlist"} />
-          <.counter
-            title={gettext("Scrobbles")}
-            count={to_compact(@scrobble_count)}
-            tooltip={@scrobble_count}
-            path={~p"/scrobbled-tracks"}
-          />
-        </dl>
-      </div>
-
+      <.record_stats
+        latest_record={@latest_record}
+        collection_count={@collection_count}
+        wishlist_count={@wishlist_count}
+        scrobble_count={@scrobble_count}
+      />
       <div class="grid gap-5 lg:grid-cols-2">
-        <div>
-          <h1 class="mt-5 text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
-            {gettext("Formats")}
-          </h1>
-          <.counters_by_category
-            categories_with_counts={@collection_count_by_format}
-            category_format_fn={&format_label/1}
-            category_path_fn={fn format -> ~p"/collection?query=format:#{format}" end}
-          />
-        </div>
-
-        <div>
-          <h1 class="mt-5 text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
-            {gettext("Types")}
-          </h1>
-          <.counters_by_category
-            categories_with_counts={@collection_count_by_type}
-            category_format_fn={&type_label/1}
-            category_path_fn={fn type -> ~p"/collection?query=type:#{type}" end}
-          />
-        </div>
+        <.formats_stats collection_count_by_format={@collection_count_by_format} />
+        <.types_stats collection_count_by_type={@collection_count_by_type} />
       </div>
-
       <div class="grid grid-cols-1 gap-5 lg:grid-cols-3 mt-5">
         <TopArtists.live id="top-artists" timezone={@timezone} last_updated_uts={@last_updated_uts} />
         <TopAlbums.live id="top-albums" timezone={@timezone} last_updated_uts={@last_updated_uts} />
-        <div class="order-first lg:order-last">
-          <div class="flex items-center justify-between">
-            <h1 class="text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
-              {gettext("On This day")}
-            </h1>
-            <.form
-              :let={f}
-              for={to_form(%{"current_date" => @current_date})}
-              phx-change="set_current_date"
-            >
-              <.date_picker size="xs" field={f[:current_date]}>
-                <:outer_suffix>
-                  <.button
-                    size="xs"
-                    type="button"
-                    phx-click={
-                      JS.push("set_current_date", value: %{"current_date" => Date.utc_today()})
-                    }
-                  >
-                    Today
-                  </.button>
-                </:outer_suffix>
-              </.date_picker>
-            </.form>
-          </div>
-          <div class="rounded-md bg-white shadow-sm dark:bg-zinc-800">
-            <.records_on_this_day
-              current_date={@current_date}
-              records={@records_on_this_day}
-              record_show_path={fn record -> ~p"/collection/#{record}" end}
-            />
-          </div>
-        </div>
+        <.on_this_day current_date={@current_date} records_on_this_day={@records_on_this_day} />
       </div>
 
-      <div class="flow-root">
-        <div class="mt-5 flex items-center justify-between">
-          <h1 class="text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
-            {gettext("Scrobble activity")}
-          </h1>
-          <.refresh_lastfm_feed_button />
-        </div>
-        <.tabs id="scrobble-activity" class="mt-4">
-          <.tabs_list active_tab={@scrobble_activity_mode} variant="segmented" class="w-48">
-            <:tab
-              name="albums"
-              phx-click={JS.push("set_scrobble_activity_mode", value: %{mode: "albums"})}
-            >
-              {gettext("Albums")}
-            </:tab>
-            <:tab
-              name="tracks"
-              phx-click={JS.push("set_scrobble_activity_mode", value: %{mode: "tracks"})}
-            >
-              {gettext("Tracks")}
-            </:tab>
-          </.tabs_list>
-
-          <.tabs_panel name="albums" active={@scrobble_activity_mode == "albums"}>
-            <ul
-              id="scrobble-activity-albums"
-              role="list"
-              class="mt-5 rounded-md bg-white p-6 shadow-sm dark:bg-zinc-800"
-              phx-update="stream"
-            >
-              <li
-                :for={
-                  {id,
-                   %{
-                     album: album,
-                     artist_id: artist_id,
-                     collected_record_id: collected_record_id,
-                     wishlisted_record_id: wishlisted_record_id,
-                     cover_hash: cover_hash
-                   }} <- @streams.recent_albums
-                }
-                id={id}
-                class="group"
-              >
-                <div class="relative pb-4 group-last:pb-0">
-                  <span
-                    class="absolute top-6 left-6 -ml-px h-full w-0.5 bg-zinc-200 group-last:hidden"
-                    aria-hidden="true"
-                  >
-                  </span>
-                  <div class="relative flex items-center justify-between space-x-3">
-                    <div class="flex min-w-0 items-center justify-between space-x-4">
-                      <img
-                        class="size-12 rounded-md shadow-sm"
-                        src={track_or_album_cover_url(album, cover_hash)}
-                        alt={album.metadata.title}
-                      />
-                      <div>
-                        <p
-                          :if={!artist_id(album, artist_id)}
-                          class="block text-sm font-semibold text-zinc-500 dark:text-zinc-400"
-                        >
-                          {album.artist.name}
-                        </p>
-                        <.link
-                          :if={artist_id(album, artist_id)}
-                          class="block text-sm font-semibold text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
-                          navigate={~p"/artists/#{artist_id(album, artist_id)}"}
-                        >
-                          {album.artist.name}
-                        </.link>
-                        <p class="text-sm font-semibold text-zinc-700 md:text-base dark:text-zinc-300">
-                          {album.metadata.title}
-                        </p>
-                        <time
-                          datetime={format_scrobbled_at_uts(album.scrobbled_at_uts)}
-                          class="text-right text-xs whitespace-nowrap text-zinc-500 sm:text-sm dark:text-zinc-400"
-                        >
-                          {album.scrobbled_at_label}
-                        </time>
-                        <.album_metadata_tooltip album={album} />
-                      </div>
-                    </div>
-
-                    <.record_status_badges
-                      musicbrainz_id={album.metadata.musicbrainz_id}
-                      collected_record_id={collected_record_id}
-                      wishlisted_record_id={wishlisted_record_id}
-                    />
-
-                    <.import_format_dropdown
-                      :if={
-                        album.metadata.musicbrainz_id !== "" and !collected_record_id and
-                          !wishlisted_record_id
-                      }
-                      id={"actions-#{album.scrobbled_at_uts}-albums"}
-                      musicbrainz_id={album.metadata.musicbrainz_id}
-                    />
-                  </div>
-                </div>
-              </li>
-            </ul>
-          </.tabs_panel>
-          <.tabs_panel name="tracks" active={@scrobble_activity_mode == "tracks"}>
-            <ul
-              id="scrobble-activity-tracks"
-              role="list"
-              class="mt-5 rounded-md bg-white p-6 shadow-sm dark:bg-zinc-800"
-              phx-update="stream"
-            >
-              <li
-                :for={
-                  {id,
-                   %{
-                     track: track,
-                     artist_id: artist_id,
-                     collected_record_id: collected_record_id,
-                     wishlisted_record_id: wishlisted_record_id,
-                     cover_hash: cover_hash
-                   }} <- @streams.recent_tracks
-                }
-                id={id}
-                class="group"
-              >
-                <div class="relative pb-4 group-last:pb-0">
-                  <span
-                    class="absolute top-6 left-6 -ml-px h-full w-0.5 bg-zinc-200 group-last:hidden"
-                    aria-hidden="true"
-                  >
-                  </span>
-                  <div class="relative flex items-center justify-between space-x-3">
-                    <div class="flex min-w-0 items-center justify-between space-x-4">
-                      <img
-                        class="size-12 rounded-md shadow-sm"
-                        src={track_or_album_cover_url(track, cover_hash)}
-                        alt={track.title}
-                      />
-                      <div>
-                        <p
-                          :if={!artist_id(track, artist_id)}
-                          class="block text-sm font-semibold text-zinc-500 dark:text-zinc-400"
-                        >
-                          {track.artist.name}
-                        </p>
-                        <.link
-                          :if={artist_id(track, artist_id)}
-                          class="block text-sm font-semibold text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
-                          navigate={~p"/artists/#{artist_id(track, artist_id)}"}
-                        >
-                          {track.artist.name}
-                        </.link>
-                        <p class="text-sm font-semibold text-zinc-700 md:text-base dark:text-zinc-300">
-                          {track.title}
-                        </p>
-                        <p class="text-sm font-semibold text-zinc-500 dark:text-zinc-400">
-                          {track.album.title}
-                        </p>
-                        <time
-                          datetime={format_scrobbled_at_uts(track.scrobbled_at_uts)}
-                          class="text-right text-xs whitespace-nowrap text-zinc-500 sm:text-sm dark:text-zinc-400"
-                        >
-                          {track.scrobbled_at_label}
-                        </time>
-                        <.track_metadata_tooltip track={track} />
-                      </div>
-                    </div>
-
-                    <.record_status_badges
-                      musicbrainz_id={track.album.musicbrainz_id}
-                      collected_record_id={collected_record_id}
-                      wishlisted_record_id={wishlisted_record_id}
-                    />
-
-                    <.import_format_dropdown
-                      :if={
-                        track.album.musicbrainz_id !== "" and !collected_record_id and
-                          !wishlisted_record_id
-                      }
-                      id={"actions-#{track.scrobbled_at_uts}-tracks"}
-                      musicbrainz_id={track.album.musicbrainz_id}
-                    />
-                  </div>
-                </div>
-              </li>
-            </ul>
-          </.tabs_panel>
-        </.tabs>
-      </div>
+      <.scrobble_activity
+        scrobble_activity_mode={@scrobble_activity_mode}
+        streams={@streams}
+      />
 
       <div class="mt-5 grid grid-cols-1 gap-5 lg:grid-cols-3">
-        <div>
-          <h1 class="text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
-            {gettext("Top %{n} Collection Artists", %{n: length(@records_by_artist)})}
-          </h1>
-          <div class="mt-5 rounded-md bg-white shadow-sm dark:bg-zinc-800">
-            <.vertical_bar_chart
-              data={@records_by_artist}
-              color_class="bg-red-500"
-              label_fn={fn datum -> datum.name end}
-              value_fn={fn datum -> datum.count end}
-              datum_click={
-                fn datum ->
-                  JS.navigate(~p"/artists/#{datum.id}")
-                end
-              }
-              class="w-full"
-            />
-          </div>
-        </div>
-
-        <div>
-          <h1 class="text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
-            {gettext("Top %{n} Collection Genres", %{n: length(@records_by_genre)})}
-          </h1>
-          <div class="mt-5 rounded-md bg-white shadow-sm dark:bg-zinc-800">
-            <.vertical_bar_chart
-              data={@records_by_genre}
-              color_class="bg-zinc-500"
-              label_fn={fn {genre, _count} -> genre end}
-              value_fn={fn {_genre, count} -> count end}
-              datum_click={
-                fn {genre, _count} ->
-                  JS.navigate(~p"/collection?#{%{query: ~s(genre:"#{genre}")}}")
-                end
-              }
-              class="w-full"
-            />
-          </div>
-        </div>
-
-        <div>
-          <h1 class="text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
-            {gettext("Top 20 Release Years")}
-          </h1>
-          <div class="mt-5 rounded-md bg-white shadow-sm dark:bg-zinc-800">
-            <.vertical_bar_chart
-              data={@records_by_release_year}
-              color_class="bg-zinc-800 dark:bg-zinc-300"
-              label_fn={fn {year, _count} -> year end}
-              value_fn={fn {_year, count} -> count end}
-              datum_click={
-                fn {year, _count} ->
-                  JS.navigate(~p"/collection?#{%{query: "release_year:#{year}"}}")
-                end
-              }
-              class="w-full"
-            />
-          </div>
-        </div>
+        <.top_collection_artists records_by_artist={@records_by_artist} />
+        <.top_collection_genres records_by_genre={@records_by_genre} />
+        <.top_release_years records_by_release_year={@records_by_release_year} />
       </div>
     </Layouts.app>
     """
@@ -459,6 +148,366 @@ defmodule MusicLibraryWeb.StatsLive.Index do
      |> assign_scrobble_activity()}
   end
 
+  defp top_release_years(assigns) do
+    ~H"""
+    <div>
+      <h1 class="text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
+        {gettext("Top 20 Release Years")}
+      </h1>
+      <div class="mt-5 rounded-md bg-white shadow-sm dark:bg-zinc-800">
+        <.vertical_bar_chart
+          data={@records_by_release_year}
+          color_class="bg-zinc-800 dark:bg-zinc-300"
+          label_fn={fn {year, _count} -> year end}
+          value_fn={fn {_year, count} -> count end}
+          datum_click={
+            fn {year, _count} ->
+              JS.navigate(~p"/collection?#{%{query: "release_year:#{year}"}}")
+            end
+          }
+          class="w-full"
+        />
+      </div>
+    </div>
+    """
+  end
+
+  defp top_collection_genres(assigns) do
+    ~H"""
+    <div>
+      <h1 class="text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
+        {gettext("Top %{n} Collection Genres", %{n: length(@records_by_genre)})}
+      </h1>
+      <div class="mt-5 rounded-md bg-white shadow-sm dark:bg-zinc-800">
+        <.vertical_bar_chart
+          data={@records_by_genre}
+          color_class="bg-zinc-500"
+          label_fn={fn {genre, _count} -> genre end}
+          value_fn={fn {_genre, count} -> count end}
+          datum_click={
+            fn {genre, _count} ->
+              JS.navigate(~p"/collection?#{%{query: ~s(genre:"#{genre}")}}")
+            end
+          }
+          class="w-full"
+        />
+      </div>
+    </div>
+    """
+  end
+
+  defp top_collection_artists(assigns) do
+    ~H"""
+    <div>
+      <h1 class="text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
+        {gettext("Top %{n} Collection Artists", %{n: length(@records_by_artist)})}
+      </h1>
+      <div class="mt-5 rounded-md bg-white shadow-sm dark:bg-zinc-800">
+        <.vertical_bar_chart
+          data={@records_by_artist}
+          color_class="bg-red-500"
+          label_fn={fn datum -> datum.name end}
+          value_fn={fn datum -> datum.count end}
+          datum_click={
+            fn datum ->
+              JS.navigate(~p"/artists/#{datum.id}")
+            end
+          }
+          class="w-full"
+        />
+      </div>
+    </div>
+    """
+  end
+
+  defp scrobble_activity(assigns) do
+    ~H"""
+    <div class="flow-root">
+      <div class="mt-5 flex items-center justify-between">
+        <h1 class="text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
+          {gettext("Scrobble activity")}
+        </h1>
+        <.refresh_lastfm_feed_button />
+      </div>
+      <.tabs id="scrobble-activity" class="mt-4">
+        <.tabs_list active_tab={@scrobble_activity_mode} variant="segmented" class="w-48">
+          <:tab
+            name="albums"
+            phx-click={JS.push("set_scrobble_activity_mode", value: %{mode: "albums"})}
+          >
+            {gettext("Albums")}
+          </:tab>
+          <:tab
+            name="tracks"
+            phx-click={JS.push("set_scrobble_activity_mode", value: %{mode: "tracks"})}
+          >
+            {gettext("Tracks")}
+          </:tab>
+        </.tabs_list>
+
+        <.tabs_panel name="albums" active={@scrobble_activity_mode == "albums"}>
+          <ul
+            id="scrobble-activity-albums"
+            role="list"
+            class="mt-5 rounded-md bg-white p-6 shadow-sm dark:bg-zinc-800"
+            phx-update="stream"
+          >
+            <li
+              :for={
+                {id,
+                 %{
+                   album: album,
+                   artist_id: artist_id,
+                   collected_record_id: collected_record_id,
+                   wishlisted_record_id: wishlisted_record_id,
+                   cover_hash: cover_hash
+                 }} <- @streams.recent_albums
+              }
+              id={id}
+              class="group"
+            >
+              <div class="relative pb-4 group-last:pb-0">
+                <span
+                  class="absolute top-6 left-6 -ml-px h-full w-0.5 bg-zinc-200 group-last:hidden"
+                  aria-hidden="true"
+                >
+                </span>
+                <div class="relative flex items-center justify-between space-x-3">
+                  <div class="flex min-w-0 items-center justify-between space-x-4">
+                    <img
+                      class="size-12 rounded-md shadow-sm"
+                      src={track_or_album_cover_url(album, cover_hash)}
+                      alt={album.metadata.title}
+                    />
+                    <div>
+                      <p
+                        :if={!artist_id(album, artist_id)}
+                        class="block text-sm font-semibold text-zinc-500 dark:text-zinc-400"
+                      >
+                        {album.artist.name}
+                      </p>
+                      <.link
+                        :if={artist_id(album, artist_id)}
+                        class="block text-sm font-semibold text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
+                        navigate={~p"/artists/#{artist_id(album, artist_id)}"}
+                      >
+                        {album.artist.name}
+                      </.link>
+                      <p class="text-sm font-semibold text-zinc-700 md:text-base dark:text-zinc-300">
+                        {album.metadata.title}
+                      </p>
+                      <time
+                        datetime={format_scrobbled_at_uts(album.scrobbled_at_uts)}
+                        class="text-right text-xs whitespace-nowrap text-zinc-500 sm:text-sm dark:text-zinc-400"
+                      >
+                        {album.scrobbled_at_label}
+                      </time>
+                      <.album_metadata_tooltip album={album} />
+                    </div>
+                  </div>
+
+                  <.record_status_badges
+                    musicbrainz_id={album.metadata.musicbrainz_id}
+                    collected_record_id={collected_record_id}
+                    wishlisted_record_id={wishlisted_record_id}
+                  />
+
+                  <.import_format_dropdown
+                    :if={
+                      album.metadata.musicbrainz_id !== "" and !collected_record_id and
+                        !wishlisted_record_id
+                    }
+                    id={"actions-#{album.scrobbled_at_uts}-albums"}
+                    musicbrainz_id={album.metadata.musicbrainz_id}
+                  />
+                </div>
+              </div>
+            </li>
+          </ul>
+        </.tabs_panel>
+        <.tabs_panel name="tracks" active={@scrobble_activity_mode == "tracks"}>
+          <ul
+            id="scrobble-activity-tracks"
+            role="list"
+            class="mt-5 rounded-md bg-white p-6 shadow-sm dark:bg-zinc-800"
+            phx-update="stream"
+          >
+            <li
+              :for={
+                {id,
+                 %{
+                   track: track,
+                   artist_id: artist_id,
+                   collected_record_id: collected_record_id,
+                   wishlisted_record_id: wishlisted_record_id,
+                   cover_hash: cover_hash
+                 }} <- @streams.recent_tracks
+              }
+              id={id}
+              class="group"
+            >
+              <div class="relative pb-4 group-last:pb-0">
+                <span
+                  class="absolute top-6 left-6 -ml-px h-full w-0.5 bg-zinc-200 group-last:hidden"
+                  aria-hidden="true"
+                >
+                </span>
+                <div class="relative flex items-center justify-between space-x-3">
+                  <div class="flex min-w-0 items-center justify-between space-x-4">
+                    <img
+                      class="size-12 rounded-md shadow-sm"
+                      src={track_or_album_cover_url(track, cover_hash)}
+                      alt={track.title}
+                    />
+                    <div>
+                      <p
+                        :if={!artist_id(track, artist_id)}
+                        class="block text-sm font-semibold text-zinc-500 dark:text-zinc-400"
+                      >
+                        {track.artist.name}
+                      </p>
+                      <.link
+                        :if={artist_id(track, artist_id)}
+                        class="block text-sm font-semibold text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
+                        navigate={~p"/artists/#{artist_id(track, artist_id)}"}
+                      >
+                        {track.artist.name}
+                      </.link>
+                      <p class="text-sm font-semibold text-zinc-700 md:text-base dark:text-zinc-300">
+                        {track.title}
+                      </p>
+                      <p class="text-sm font-semibold text-zinc-500 dark:text-zinc-400">
+                        {track.album.title}
+                      </p>
+                      <time
+                        datetime={format_scrobbled_at_uts(track.scrobbled_at_uts)}
+                        class="text-right text-xs whitespace-nowrap text-zinc-500 sm:text-sm dark:text-zinc-400"
+                      >
+                        {track.scrobbled_at_label}
+                      </time>
+                      <.track_metadata_tooltip track={track} />
+                    </div>
+                  </div>
+
+                  <.record_status_badges
+                    musicbrainz_id={track.album.musicbrainz_id}
+                    collected_record_id={collected_record_id}
+                    wishlisted_record_id={wishlisted_record_id}
+                  />
+
+                  <.import_format_dropdown
+                    :if={
+                      track.album.musicbrainz_id !== "" and !collected_record_id and
+                        !wishlisted_record_id
+                    }
+                    id={"actions-#{track.scrobbled_at_uts}-tracks"}
+                    musicbrainz_id={track.album.musicbrainz_id}
+                  />
+                </div>
+              </div>
+            </li>
+          </ul>
+        </.tabs_panel>
+      </.tabs>
+    </div>
+    """
+  end
+
+  defp on_this_day(assigns) do
+    ~H"""
+    <div class="order-first lg:order-last">
+      <div class="flex items-center justify-between">
+        <h1 class="text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
+          {gettext("On This day")}
+        </h1>
+        <.form
+          :let={f}
+          for={to_form(%{"current_date" => @current_date})}
+          phx-change="set_current_date"
+        >
+          <.date_picker size="xs" field={f[:current_date]}>
+            <:outer_suffix>
+              <.button
+                size="xs"
+                type="button"
+                phx-click={JS.push("set_current_date", value: %{"current_date" => Date.utc_today()})}
+              >
+                Today
+              </.button>
+            </:outer_suffix>
+          </.date_picker>
+        </.form>
+      </div>
+      <div class="rounded-md bg-white shadow-sm dark:bg-zinc-800">
+        <.records_on_this_day
+          current_date={@current_date}
+          records={@records_on_this_day}
+          record_show_path={fn record -> ~p"/collection/#{record}" end}
+        />
+      </div>
+    </div>
+    """
+  end
+
+  defp types_stats(assigns) do
+    ~H"""
+    <div>
+      <h1 class="mt-5 text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
+        {gettext("Types")}
+      </h1>
+      <.counters_by_category
+        categories_with_counts={@collection_count_by_type}
+        category_format_fn={&type_label/1}
+        category_path_fn={fn type -> ~p"/collection?query=type:#{type}" end}
+      />
+    </div>
+    """
+  end
+
+  defp formats_stats(assigns) do
+    ~H"""
+    <div>
+      <h1 class="mt-5 text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
+        {gettext("Formats")}
+      </h1>
+      <.counters_by_category
+        categories_with_counts={@collection_count_by_format}
+        category_format_fn={&format_label/1}
+        category_path_fn={fn format -> ~p"/collection?query=format:#{format}" end}
+      />
+    </div>
+    """
+  end
+
+  defp record_stats(assigns) do
+    ~H"""
+    <div>
+      <h1 class="mt-5 text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
+        {gettext("Records")}
+      </h1>
+      <dl class="mt-5 grid grid-cols-3 gap-5 sm:grid-cols-5">
+        <.album_preview
+          record={@latest_record}
+          title={gettext("Latest purchase")}
+          class="col-span-3 sm:col-span-2"
+        />
+        <.counter
+          title={gettext("Collection")}
+          count={@collection_count}
+          path={~p"/collection"}
+        />
+        <.counter title={gettext("Wishlist")} count={@wishlist_count} path={~p"/wishlist"} />
+        <.counter
+          title={gettext("Scrobbles")}
+          count={to_compact(@scrobble_count)}
+          tooltip={@scrobble_count}
+          path={~p"/scrobbled-tracks"}
+        />
+      </dl>
+    </div>
+    """
+  end
+
   defp assign_counts(socket) do
     collection_count_by_format = Collection.count_records_by_format()