diff --git a/lib/music_library_web/components/stats_components.ex b/lib/music_library_web/components/stats_components.ex
index 2a770c0e..ff0e4cbe 100644
--- a/lib/music_library_web/components/stats_components.ex
+++ b/lib/music_library_web/components/stats_components.ex
@@ -337,4 +337,23 @@ defmodule MusicLibraryWeb.StatsComponents do
       _other -> ""
     end
   end
+
+  attr :container_class, :string, default: nil
+  slot :title, required: true
+  slot :side_actions
+  slot :inner_block, required: true
+
+  def section(assigns) do
+    ~H"""
+    <div class={["mt-5", @container_class]}>
+      <div class="flex items-center justify-between">
+        <h1 class="text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
+          {render_slot(@title)}
+        </h1>
+        {render_slot(@side_actions)}
+      </div>
+      {render_slot(@inner_block)}
+    </div>
+    """
+  end
 end
diff --git a/lib/music_library_web/live/stats_live/index.ex b/lib/music_library_web/live/stats_live/index.ex
index 5ece9bbe..a55e7b82 100644
--- a/lib/music_library_web/live/stats_live/index.ex
+++ b/lib/music_library_web/live/stats_live/index.ex
@@ -227,191 +227,191 @@ defmodule MusicLibraryWeb.StatsLive.Index do
     ~H"""
     <div class="flow-root">
       <.tabs id="scrobble-activity" class="mt-4">
-        <div class="mt-5 flex end items-center justify-between">
-          <div class="flex">
-            <h1 class="text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200 mr-2">
-              {gettext("Scrobble activity")}
-            </h1>
+        <.section>
+          <:title>
+            {gettext("Scrobble activity")}
             <.refresh_lastfm_feed_button />
-          </div>
-          <.tabs_list active_tab={@scrobble_activity_mode} variant="segmented">
-            <:tab
-              name="albums"
-              phx-click={JS.push("set_scrobble_activity_mode", value: %{mode: "albums"})}
+          </:title>
+          <:side_actions>
+            <.tabs_list active_tab={@scrobble_activity_mode} variant="segmented">
+              <: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>
+          </:side_actions>
+          <.tabs_panel name="albums" active={@scrobble_activity_mode == "albums"}>
+            <ul
+              id="scrobble-activity-albums"
+              role="list"
+              class="mt-4 rounded-md bg-white p-6 shadow-sm dark:bg-zinc-800"
+              phx-update="stream"
             >
-              {gettext("Albums")}
-            </:tab>
-            <:tab
-              name="tracks"
-              phx-click={JS.push("set_scrobble_activity_mode", value: %{mode: "tracks"})}
-            >
-              {gettext("Tracks")}
-            </:tab>
-          </.tabs_list>
-        </div>
-        <.tabs_panel name="albums" active={@scrobble_activity_mode == "albums"}>
-          <ul
-            id="scrobble-activity-albums"
-            role="list"
-            class="mt-4 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} />
+              <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>
-                  </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}
+                    <.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>
-                      <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>
+              </li>
+            </ul>
+          </.tabs_panel>
+          <.tabs_panel name="tracks" active={@scrobble_activity_mode == "tracks"}>
+            <ul
+              id="scrobble-activity-tracks"
+              role="list"
+              class="mt-4 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>
+        </.section>
       </.tabs>
     </div>
     """
@@ -516,25 +516,6 @@ defmodule MusicLibraryWeb.StatsLive.Index do
     """
   end
 
-  attr :container_class, :string, default: nil
-  slot :title, required: true
-  slot :side_actions
-  slot :inner_block, required: true
-
-  defp section(assigns) do
-    ~H"""
-    <div class={["mt-5", @container_class]}>
-      <div class="flex items-center justify-between">
-        <h1 class="text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
-          {render_slot(@title)}
-        </h1>
-        {render_slot(@side_actions)}
-      </div>
-      {render_slot(@inner_block)}
-    </div>
-    """
-  end
-
   defp assign_counts(socket) do
     collection_count_by_format = Collection.count_records_by_format()
 
diff --git a/lib/music_library_web/live/stats_live/top_by_period.ex b/lib/music_library_web/live/stats_live/top_by_period.ex
index 909dbf45..3ca27081 100644
--- a/lib/music_library_web/live/stats_live/top_by_period.ex
+++ b/lib/music_library_web/live/stats_live/top_by_period.ex
@@ -1,6 +1,8 @@
 defmodule MusicLibraryWeb.StatsLive.TopByPeriod do
   use MusicLibraryWeb, :live_component
 
+  import MusicLibraryWeb.StatsComponents, only: [section: 1]
+
   attr :id, :string, required: true
   attr :title, :string, required: true
   attr :key, :atom, required: true
@@ -19,67 +21,67 @@ defmodule MusicLibraryWeb.StatsLive.TopByPeriod do
   @impl true
   def render(assigns) do
     ~H"""
-    <div class="mt-5">
+    <div>
       <.tabs>
-        <div class="flex justify-between">
-          <h1 class="text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
-            {@title}
-          </h1>
-          <.tabs_list active_tab={name_from_period(@key, @period)} variant="segmented" size="xs">
-            <:tab
-              class="flex-1"
-              name={"#{@key}_last_7_days"}
-              phx-click={JS.push("set_period", value: %{period: "last_7_days"})}
-              phx-target={@myself}
-            >
-              {gettext("7d")}
-            </:tab>
-            <:tab
-              class="flex-1"
-              name={"#{@key}_last_30_days"}
-              phx-click={JS.push("set_period", value: %{period: "last_30_days"})}
-              phx-target={@myself}
-            >
-              {gettext("30d")}
-            </:tab>
-            <:tab
-              class="flex-1"
-              name={"#{@key}_last_90_days"}
-              phx-click={JS.push("set_period", value: %{period: "last_90_days"})}
-              phx-target={@myself}
-            >
-              {gettext("90d")}
-            </:tab>
-            <:tab
-              class="flex-1"
-              name={"#{@key}_last_365_days"}
-              phx-click={JS.push("set_period", value: %{period: "last_365_days"})}
-              phx-target={@myself}
-            >
-              {gettext("1y")}
-            </:tab>
-            <:tab
-              class="flex-1"
-              name={"#{@key}_all_time"}
-              phx-click={JS.push("set_period", value: %{period: "all_time"})}
-              phx-target={@myself}
-            >
-              {gettext("∞")}
-            </:tab>
-          </.tabs_list>
-        </div>
-        <.async_result :let={items} assign={assigns[@key]}>
-          <:loading>
-            <div class="flex h-182 items-center justify-center">
-              <.loading />
+        <.section>
+          <:title>{@title}</:title>
+          <:side_actions>
+            <.tabs_list active_tab={name_from_period(@key, @period)} variant="segmented" size="xs">
+              <:tab
+                class="flex-1"
+                name={"#{@key}_last_7_days"}
+                phx-click={JS.push("set_period", value: %{period: "last_7_days"})}
+                phx-target={@myself}
+              >
+                {gettext("7d")}
+              </:tab>
+              <:tab
+                class="flex-1"
+                name={"#{@key}_last_30_days"}
+                phx-click={JS.push("set_period", value: %{period: "last_30_days"})}
+                phx-target={@myself}
+              >
+                {gettext("30d")}
+              </:tab>
+              <:tab
+                class="flex-1"
+                name={"#{@key}_last_90_days"}
+                phx-click={JS.push("set_period", value: %{period: "last_90_days"})}
+                phx-target={@myself}
+              >
+                {gettext("90d")}
+              </:tab>
+              <:tab
+                class="flex-1"
+                name={"#{@key}_last_365_days"}
+                phx-click={JS.push("set_period", value: %{period: "last_365_days"})}
+                phx-target={@myself}
+              >
+                {gettext("1y")}
+              </:tab>
+              <:tab
+                class="flex-1"
+                name={"#{@key}_all_time"}
+                phx-click={JS.push("set_period", value: %{period: "all_time"})}
+                phx-target={@myself}
+              >
+                {gettext("∞")}
+              </:tab>
+            </.tabs_list>
+          </:side_actions>
+          <.async_result :let={items} assign={assigns[@key]}>
+            <:loading>
+              <div class="flex h-182 items-center justify-center">
+                <.loading />
+              </div>
+            </:loading>
+            <div class="mt-4 rounded-md bg-white p-4 shadow-sm dark:bg-zinc-800">
+              <div class="space-y-2">
+                {render_slot(@item, items)}
+              </div>
             </div>
-          </:loading>
-          <div class="mt-4 rounded-md bg-white p-4 shadow-sm dark:bg-zinc-800">
-            <div class="space-y-2">
-              {render_slot(@item, items)}
-            </div>
-          </div>
-        </.async_result>
+          </.async_result>
+        </.section>
       </.tabs>
     </div>
     """