diff --git a/front/src/components/album/Widget.vue b/front/src/components/album/Widget.vue
index 89442369f..748c3c107 100644
--- a/front/src/components/album/Widget.vue
+++ b/front/src/components/album/Widget.vue
@@ -8,14 +8,15 @@ import { useI18n } from 'vue-i18n'
 
 import axios from 'axios'
 
-import AlbumCard from '~/components/album/Card.vue'
-import Button from '~/components/ui/Button.vue'
-import Layout from '~/components/ui/Layout.vue'
-import Spacer from '~/components/ui/Spacer.vue'
-import Loader from '~/components/ui/Loader.vue'
-
+import usePage from '~/composables/navigation/usePage'
 import useErrorHandler from '~/composables/useErrorHandler'
 
+import AlbumCard from '~/components/album/Card.vue'
+import Section from '~/components/ui/Section.vue'
+import Loader from '~/components/ui/Loader.vue'
+import Pagination from '~/components/ui/Pagination.vue'
+
+
 const { t } = useI18n()
 
 interface Props {
@@ -23,6 +24,7 @@ interface Props {
   showCount?: boolean
   search?: boolean
   limit?: number
+  title?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -36,6 +38,7 @@ const store = useStore()
 const query = ref('')
 const albums = reactive([] as Album[])
 const count = ref(0)
+const page = usePage()
 const nextPage = ref()
 
 const isLoading = ref(false)
@@ -46,6 +49,7 @@ const fetchData = async (url = 'albums/') => {
     const params = {
       q: query.value,
       ...props.filters,
+      page: page.value,
       page_size: props.limit
     }
 
@@ -60,44 +64,39 @@ const fetchData = async (url = 'albums/') => {
   isLoading.value = false
 }
 
+setTimeout(fetchData, 1000)
+
 const performSearch = () => {
   albums.length = 0
   fetchData()
 }
 
 watch(
-  () => store.state.moderation.lastUpdate,
+  [() => store.state.moderation.lastUpdate, page],
   () => fetchData(),
   { immediate: true }
 )
 </script>
 
 <template>
-  <div class="album-widget">
-    <h2
-      v-if="!!$slots.title"
-    >
-      <slot name="title" />
-      <span
-        v-if="showCount"
-        class="ui tiny circular label"
-      >{{ count }}</span>
-    </h2>
-    <slot />
+  <Section
+    :h2="title"
+    align-left
+    small-items
+  >
     <inline-search-bar
       v-if="search"
+      style="grid-column: 1 / -1;"
       v-model="query"
       @search="performSearch"
     />
     <Loader v-if="isLoading" />
     <template v-if="!isLoading && albums.length > 0">
-      <Layout flex>
         <album-card
           v-for="album in albums"
           :key="album.id"
           :album="album"
         />
-      </Layout>
     </template>
     <slot
       v-if="!isLoading && albums.length === 0"
@@ -106,17 +105,14 @@ watch(
       <empty-state
         :refresh="true"
         @refresh="fetchData"
+        style="grid-column: 1 / -1;"
       />
     </slot>
-    <template v-if="nextPage">
-      <Spacer />
-      <Button
-        v-if="nextPage"
-        primary
-        @click="fetchData(nextPage)"
-      >
-        {{ t('components.audio.album.Widget.button.more') }}
-      </Button>
-    </template>
-  </div>
+    <Pagination
+      v-if="albums && count > props.limit"
+      v-model:page="page"
+      :pages="Math.ceil((count || 0) / props.limit)"
+      style="grid-column: 1 / -1;"
+    />
+  </Section>
 </template>
diff --git a/front/src/components/artist/Widget.vue b/front/src/components/artist/Widget.vue
index 0b603561c..f04bf982d 100644
--- a/front/src/components/artist/Widget.vue
+++ b/front/src/components/artist/Widget.vue
@@ -1,25 +1,26 @@
 <script setup lang="ts">
 import type { Artist } from '~/types'
 
-import { reactive, ref, watch } from 'vue'
+import { reactive, ref, watch, onMounted } from 'vue'
 import { useStore } from '~/store'
-import { useI18n } from 'vue-i18n'
 
 
 import axios from 'axios'
 
-import ArtistCard from '~/components/artist/Card.vue'
-import Button from '~/components/ui/Button.vue'
-
 import useErrorHandler from '~/composables/useErrorHandler'
+import usePage from '~/composables/navigation/usePage'
+
+import ArtistCard from '~/components/artist/Card.vue'
+import Section from '~/components/ui/Section.vue'
+import Pagination from '~/components/ui/Pagination.vue'
 
-const { t } = useI18n()
 
 interface Props {
   filters: Record<string, string | boolean>
   search?: boolean
   header?: boolean
   limit?: number
+  title?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -33,6 +34,7 @@ const store = useStore()
 const query = ref('')
 const artists = reactive([] as Artist[])
 const count = ref(0)
+const page = usePage()
 const nextPage = ref()
 
 const isLoading = ref(false)
@@ -43,6 +45,7 @@ const fetchData = async (url = 'artists/') => {
     const params = {
       q: query.value,
       ...props.filters,
+      page: page.value,
       page_size: props.limit
     }
 
@@ -57,46 +60,31 @@ const fetchData = async (url = 'artists/') => {
   isLoading.value = false
 }
 
+onMounted(() => {
+  setTimeout(fetchData, 1000)
+})
+
 const performSearch = () => {
   artists.length = 0
   fetchData()
 }
 
 watch(
-  () => store.state.moderation.lastUpdate,
+  [() => store.state.moderation.lastUpdate, page],
   () => fetchData(),
   { immediate: true }
 )
 </script>
 
 <template>
-  <div class="wrapper">
-    <h3
-      v-if="header"
-      class="ui header"
-    >
-      <slot name="title" />
-      <span class="ui tiny circular label">{{ count }}</span>
-    </h3>
-    <inline-search-bar
-      v-if="search"
-      v-model="query"
-      @search="performSearch"
+  <Section
+    align-left
+    :h2="title"
+  >
+    <Loader
+      v-if="isLoading"
+      style="grid-column: 1 / -1;"
     />
-    <div class="ui hidden divider" />
-    <div style="display:flex; flex-wrap:wrap; gap: 32px; margin-top:32px;">
-      <div
-        v-if="isLoading"
-        class="ui inverted active dimmer"
-      >
-        <div class="ui loader" />
-      </div>
-      <artist-card
-        v-for="artist in artists"
-        :key="artist.id"
-        :artist="artist"
-      />
-    </div>
     <slot
       v-if="!isLoading && artists.length === 0"
       name="empty-state"
@@ -106,14 +94,21 @@ watch(
         @refresh="fetchData"
       />
     </slot>
-    <template v-if="nextPage">
-      <div class="ui hidden divider" />
-      <Button
-        v-if="nextPage"
-        @click="fetchData(nextPage)"
-      >
-        {{ t('components.audio.artist.Widget.button.more') }}
-      </Button>
-    </template>
-  </div>
+    <inline-search-bar
+      v-if="!isLoading && search"
+      v-model="query"
+      @search="performSearch"
+      style="grid-column: 1 / -1;"
+    />
+      <artist-card
+        v-for="artist in artists"
+        :key="artist.id"
+        :artist="artist"
+      />
+    <Pagination
+      v-if="artists && count > limit"
+      v-model:page="page"
+      :pages="Math.ceil((count || 0) / limit)"
+    />
+  </Section>
 </template>
diff --git a/front/src/components/audio/ChannelsWidget.vue b/front/src/components/audio/ChannelsWidget.vue
index dd9a2be06..7277f9e07 100644
--- a/front/src/components/audio/ChannelsWidget.vue
+++ b/front/src/components/audio/ChannelsWidget.vue
@@ -59,33 +59,39 @@ const fetchData = async (url = 'channels/') => {
 }
 
 onMounted(() => {
-  fetchData()
+  setTimeout(fetchData, 1000)
 })
 
-watch(() => [props.filters, page], () => {
-  fetchData()
-}, { deep: true })
+watch([() => props.filters, page],
+  () => fetchData(),
+  { deep: true }
+)
 </script>
 
 <template>
-  <Section aling-left :h2="title" class="channel-widget">
-    <slot />
-    <Loader v-if="isLoading" />
+  <Section
+    align-left
+    :h2="title"
+  >
+    <Loader v-if="isLoading" style="grid-column: 1 / -1;" />
+    <template
+      v-if="!isLoading && channels.length === 0"
+      style="grid-column: 1 / -1;"
+    >
+      <empty-state
+        :refresh="true"
+        @refresh="fetchData('channels/')"
+      />
+    </template>
     <channel-card
       v-for="object in channels"
       :key="object.uuid"
       :object="object"
     />
-  </Section>
-  <template v-if="!isLoading && channels.length === 0">
-    <empty-state
-      :refresh="true"
-      @refresh="fetchData('channels/')"
+    <Pagination
+      v-if="channels && count > limit"
+      v-model:page="page"
+      :pages="Math.ceil((count || 0) / limit)"
     />
-  </template>
-  <Pagination
-    v-if="channels && count > limit"
-    v-model:page="page"
-    :pages="Math.ceil((count || 0) / limit)"
-  />
+  </Section>
 </template>
diff --git a/front/src/components/audio/track/Widget.vue b/front/src/components/audio/track/Widget.vue
index 524b8d3b3..8bb35716e 100644
--- a/front/src/components/audio/track/Widget.vue
+++ b/front/src/components/audio/track/Widget.vue
@@ -8,9 +8,9 @@ import { useI18n } from 'vue-i18n'
 import { getArtistCoverUrl } from '~/utils/utils'
 
 import axios from 'axios'
-
+import usePage from '~/composables/navigation/usePage'
 import useWebSocketHandler from '~/composables/useWebSocketHandler'
-import Button from '~/components/ui/Button.vue'
+
 import PlayButton from '~/components/audio/PlayButton.vue'
 import TagsList from '~/components/tags/List.vue'
 import Section from '~/components/ui/Section.vue'
@@ -18,6 +18,7 @@ import Alert from '~/components/ui/Alert.vue'
 import Spacer from '~/components/ui/Spacer.vue'
 import Loader from '~/components/ui/Loader.vue'
 import Heading from '~/components/ui/Heading.vue'
+import Pagination from '~/components/ui/Pagination.vue'
 
 import useErrorHandler from '~/composables/useErrorHandler'
 
@@ -30,16 +31,15 @@ interface Props {
   filters: Record<string, string | boolean>
   url: string
   isActivity?: boolean
-  showCount?: boolean
   limit?: number
   itemClasses?: string
   websocketHandlers?: string[]
+  title?: string
 }
 
 const emit = defineEmits<Events>()
 const props = withDefaults(defineProps<Props>(), {
   isActivity: true,
-  showCount: false,
   limit: 9,
   itemClasses: '',
   websocketHandlers: () => []
@@ -50,7 +50,7 @@ const { t } = useI18n()
 
 const objects = reactive([] as Listening[])
 const count = ref(0)
-const nextPage = ref<string | null>(null)
+const page = usePage()
 
 const isLoading = ref(false)
 
@@ -59,12 +59,12 @@ const fetchData = async (url = props.url) => {
 
   const params = {
     ...clone(props.filters),
-    page_size: props.limit
+    page: page.value,
+    page_size: props.limit ?? 9
   }
 
   try {
     const response = await axios.get(url, { params })
-    nextPage.value = response.data.next
     count.value = response.data.count
 
     const newObjects = !props.isActivity
@@ -80,11 +80,11 @@ const fetchData = async (url = props.url) => {
 }
 
 onMounted(() => {
-  fetchData()
+  setTimeout(fetchData, 1000)
 })
 
 watch(
-  () => store.state.moderation.lastUpdate,
+  [() => store.state.moderation.lastUpdate, page],
   () => fetchData(),
   { immediate: true }
 )
@@ -113,18 +113,17 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
 </script>
 
 <template>
-<!-- TODO: Use activity.vue -->
-  <div class="track-widget">
-    <h2 v-if="!!$slots.title">
-      <slot name="title" />
-      <span
-        v-if="showCount"
-        class="ui tiny circular label"
-      >{{ count }}</span>
-    </h2>
-    <Spacer :size="8" />
+  <Section
+    :h2="title"
+    medium-items
+    align-left
+  >
+    <Loader v-if="isLoading"
+      style="grid-column: 1 / -1;"
+    />
     <Alert
       v-if="!isLoading && count === 0"
+      style="grid-column: 1 / -1;"
       blue
       align-items="center"
     >
@@ -133,103 +132,94 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
         {{ t('components.audio.track.Widget.empty.noResults') }}
       </h4>
     </Alert>
-    <Section
+    <!-- TODO: Use activity.vue -->
+    <div class="funkwhale activity"
       v-if="count > 0"
-      medium-items
-      alignLeft
-    >
-      <div class="funkwhale activity"
-        v-for="object in objects"
-        :key="object.id"
-        :class="['item', itemClasses]"
-      >
-        <div class="activity-image">
-          <img
-            v-if="object.track.album && object.track.album.cover"
-            v-lazy="store.getters['instance/absoluteUrl'](object.track.album.cover.urls.medium_square_crop)"
-            alt=""
-          >
-          <img
-            v-else-if="object.track.cover"
-            v-lazy="store.getters['instance/absoluteUrl'](object.track.cover.urls.medium_square_crop)"
-            alt=""
-          >
-          <img
-            v-else-if="object.track.artist_credit && object.track.artist_credit.length > 1"
-            v-lazy="getArtistCoverUrl(object.track.artist_credit)"
-            alt=""
-          >
-          <i
-            v-else
-            class="bi bi-vinyl-fill"
-          />
-          <!-- TODO: Add Playbutton overlay -->
-        </div>
-        <div class="activity-content">
-            <router-link
-              class="funkwhale link artist"
-              :to="{name: 'library.tracks.detail', params: {id: object.track.id}}"
-            >
-              <Heading :h3="object.track.title" title />
-            </router-link>
-            <Spacer :size="2"/>
-          <div
-            v-if="object.track.artist_credit"
-            class="funkwhale link artist"
-          >
-            <span
-              v-for="ac in object.track.artist_credit"
-              :key="ac.artist.id"
-            >
-              <router-link
-                class="discrete link"
-                :to="{ name: 'library.artists.detail', params: { id: ac.artist.id } }"
-              >
-                {{ ac.credit }}
-              </router-link>
-              <span v-if="ac.joinphrase">{{ ac.joinphrase }}</span>
-            </span>
-          </div>
-          <TagsList
-            label-classes="tiny"
-            :truncate-size="20"
-            :limit="2"
-            :show-more="false"
-            :tags="object.track.tags"
-          />
-          <Spacer :size="4"/>
-          <div
-            v-if="isActivity"
-            class="extra"
-          >
-            <router-link
-              class="funkwhale link user"
-              :to="{name: 'profile.overview', params: {username: object.actor.name}}"
-            >
-              <span class="at symbol" />{{ object.actor.name }}
-            </router-link>
-            <span class="right floated"><human-date :date="object.creation_date" /></span>
-          </div>
-        </div>
-        <play-button
-          :account="object.actor"
-          :dropdown-only="true"
-          :track="object.track"
-          square-small
+      v-for="object in objects"
+      :key="object.id"
+      :class="['item', itemClasses]">
+      <div class="activity-image">
+        <img
+          v-if="object.track.album && object.track.album.cover"
+          v-lazy="store.getters['instance/absoluteUrl'](object.track.album.cover.urls.medium_square_crop)"
+          alt=""
+        >
+        <img
+          v-else-if="object.track.cover"
+          v-lazy="store.getters['instance/absoluteUrl'](object.track.cover.urls.medium_square_crop)"
+          alt=""
+        >
+        <img
+          v-else-if="object.track.artist_credit && object.track.artist_credit.length > 1"
+          v-lazy="getArtistCoverUrl(object.track.artist_credit)"
+          alt=""
+        >
+        <i
+          v-else
+          class="bi bi-vinyl-fill"
         />
+        <!-- TODO: Add Playbutton overlay -->
       </div>
-    </Section>
-    <Loader v-if="isLoading" />
-    <template v-if="nextPage">
-      <Spacer />
-      <Button
-        primary
-        @click="fetchData(nextPage as string)"
-      >
-        {{ t('components.audio.track.Widget.button.more') }}
-      </Button>
-    </template>
-  </div>
+      <div class="activity-content">
+          <router-link
+            class="funkwhale link artist"
+            :to="{name: 'library.tracks.detail', params: {id: object.track.id}}"
+          >
+            <Heading :h3="object.track.title" title />
+          </router-link>
+          <Spacer :size="2"/>
+        <div
+          v-if="object.track.artist_credit"
+          class="funkwhale link artist"
+        >
+          <span
+            v-for="ac in object.track.artist_credit"
+            :key="ac.artist.id"
+          >
+            <router-link
+              class="discrete link"
+              :to="{ name: 'library.artists.detail', params: { id: ac.artist.id } }"
+            >
+              {{ ac.credit }}
+            </router-link>
+            <span v-if="ac.joinphrase">{{ ac.joinphrase }}</span>
+          </span>
+        </div>
+        <TagsList
+          label-classes="tiny"
+          :truncate-size="20"
+          :limit="2"
+          :show-more="false"
+          :tags="object.track.tags"
+        />
+        <Spacer :size="4"/>
+        <div
+          v-if="isActivity"
+          class="extra"
+        >
+          <router-link
+            class="funkwhale link user"
+            :to="{name: 'profile.overview', params: {username: object.actor.name}}"
+          >
+            <span class="at symbol" />{{ object.actor.name }}
+          </router-link>
+          <span class="right floated"><human-date :date="object.creation_date" /></span>
+        </div>
+      </div>
+      <play-button
+        :account="object.actor"
+        :dropdown-only="true"
+        :track="object.track"
+        square-small
+      />
+    </div>
+    <Pagination
+      v-if="count > props.limit"
+      v-model:page="page"
+      :pages="Math.ceil((count || 0) / props.limit)"
+      style="grid-column: 1 / -1;"
+    />
+  </Section>
 </template>
 
 
diff --git a/front/src/components/federation/LibraryWidget.vue b/front/src/components/federation/LibraryWidget.vue
index 1276bdf93..bbd642ee9 100644
--- a/front/src/components/federation/LibraryWidget.vue
+++ b/front/src/components/federation/LibraryWidget.vue
@@ -9,9 +9,8 @@ import axios from 'axios'
 
 import LibraryCard from '~/views/content/remote/Card.vue'
 import Button from '~/components/ui/Button.vue'
-import Layout from '~/components/ui/Layout.vue'
+import Section from '~/components/ui/Section.vue'
 import Loader from '~/components/ui/Loader.vue'
-import Spacer from '~/components/ui/Spacer.vue'
 
 import useErrorHandler from '~/composables/useErrorHandler'
 
@@ -21,6 +20,7 @@ interface Events {
 
 interface Props {
   url: string
+  title?: string
 }
 
 const { t } = useI18n()
@@ -53,7 +53,7 @@ const fetchData = async (url = props.url) => {
 }
 
 onMounted(() => {
-  fetchData()
+  setTimeout(fetchData, 1000)
 })
 
 watch(() => props.url, () => {
@@ -62,37 +62,34 @@ watch(() => props.url, () => {
 </script>
 
 <template>
-  <div class="wrapper">
-    <h3
-      v-if="!!$slots.title"
-      class="ui header"
-    >
-      <slot name="title" />
-    </h3>
+  <Section
+    :h2="title"
+    align-left
+    small-items
+  >
+    <Loader v-if="isLoading" style="grid-column: 1 / -1;" />
     <p
       v-if="!isLoading && libraries.length > 0"
+      style="grid-column: 1 / -1;"
       class="ui subtitle"
     >
       <slot />
     </p>
     <p
       v-if="!isLoading && libraries.length === 0"
+      style="grid-column: 1 / -1;"
       class="ui subtitle"
     >
       {{ t('components.federation.LibraryWidget.empty.noMatch') }}
     </p>
-    <div class="ui hidden divider" />
-    <Layout flex>
-      <Loader v-if="isLoading" />
-      <library-card
-        v-for="library in libraries"
-        :key="library.uuid"
-        :display-scan="false"
-        :display-follow="store.state.auth.authenticated && library.actor.full_username != store.state.auth.fullUsername"
-        :initial-library="library"
-        :display-copy-fid="true"
-      />
-    </Layout>
+    <library-card
+      v-for="library in libraries"
+      :key="library.uuid"
+      :display-scan="false"
+      :display-follow="store.state.auth.authenticated && library.actor.full_username != store.state.auth.fullUsername"
+      :initial-library="library"
+      :display-copy-fid="true"
+    />
     <template v-if="nextPage">
       <Spacer />
       <Button
@@ -103,5 +100,5 @@ watch(() => props.url, () => {
         {{ t('components.federation.LibraryWidget.button.showMore') }}
       </Button>
     </template>
-  </div>
+  </Section>
 </template>
diff --git a/front/src/components/library/AlbumDetail.vue b/front/src/components/library/AlbumDetail.vue
index f07387a0e..a0c15ecd6 100644
--- a/front/src/components/library/AlbumDetail.vue
+++ b/front/src/components/library/AlbumDetail.vue
@@ -9,6 +9,9 @@ import Pagination from '~/components/vui/Pagination.vue'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import Loader from '~/components/ui/Loader.vue'
+import Spacer from '~/components/ui/Spacer.vue'
+
 interface Events {
   (e: 'libraries-loaded', libraries: Library[]): void
 }
@@ -57,14 +60,14 @@ const paginatedDiscs = computed(() => props.object.tracks.slice(props.paginateBy
   <div
     v-if="!isLoadingTracks"
   >
-    <!-- <h2 class="ui header">
+    <h2 class="ui header">
       <span v-if="isSerie">
         {{ t('components.library.AlbumDetail.header.episodes') }}
       </span>
       <span v-else>
         {{ t('components.library.AlbumDetail.header.tracks') }}
       </span>
-    </h2> -->
+    </h2>
 
     <channel-entries
       v-if="artistCredit && artistCredit[0].artist.channel && isSerie"
@@ -73,6 +76,8 @@ const paginatedDiscs = computed(() => props.object.tracks.slice(props.paginateBy
       :filters="{channel: artistCredit[0].artist.channel.uuid, album: object.id, ordering: '-creation_date'}"
     />
 
+    <Loader v-if="isLoadingTracks" />
+
     <template v-else>
       <template v-if="discCount > 1">
         <div
@@ -125,12 +130,11 @@ const paginatedDiscs = computed(() => props.object.tracks.slice(props.paginateBy
     </template>
 
     <template v-if="artistCredit && !artistCredit[0]?.artist.channel && !isSerie">
-      <h2>
-        {{ t('components.library.AlbumDetail.header.libraries') }}
-      </h2>
+      <Spacer />
       <library-widget
         :url="'albums/' + object.id + '/libraries/'"
         @loaded="emit('libraries-loaded', $event)"
+        :title="t('components.library.AlbumDetail.header.libraries')"
       >
         {{ t('components.library.AlbumDetail.description.libraries') }}
       </library-widget>
diff --git a/front/src/components/library/Home.vue b/front/src/components/library/Home.vue
index 784208a6a..ccbee4b0a 100644
--- a/front/src/components/library/Home.vue
+++ b/front/src/components/library/Home.vue
@@ -80,29 +80,22 @@ fetchData()
     v-if="scope === 'all'"
     :show-modification-date="true"
     :filters="{ordering: '-creation_date'}"
-    :limit="12"
+    :limit="8"
     :title="t('components.library.Home.header.newChannels')"
-  >
-  </channels-widget>
+  />
 
   <track-widget
+    :title="t('components.library.Home.header.recentlyListened')"
     :url="'history/listenings/'"
     :filters="{ scope, ordering: '-creation_date', ...qualityFilters }"
     :websocket-handlers="['Listen']"
-  >
-    <template #title>
-      {{ t('components.library.Home.header.recentlyListened') }}
-    </template>
-  </track-widget>
+  />
 
   <track-widget
+    :title="t('components.library.Home.header.recentlyFavorited')"
     :url="'favorites/tracks/'"
     :filters="{scope: scope, ordering: '-creation_date'}"
-  >
-    <template #title>
-      {{ t('components.library.Home.header.recentlyFavorited') }}
-    </template>
-  </track-widget>
+  />
 
   <album-widget :filters="{scope: scope, playable: true, ordering: '-creation_date', ...qualityFilters}">
     <template #title>
diff --git a/front/src/components/playlists/Widget.vue b/front/src/components/playlists/Widget.vue
index e982739d7..fc42a0251 100644
--- a/front/src/components/playlists/Widget.vue
+++ b/front/src/components/playlists/Widget.vue
@@ -9,17 +9,20 @@ import { useI18n } from 'vue-i18n'
 import axios from 'axios'
 
 import useErrorHandler from '~/composables/useErrorHandler'
+import usePage from '~/composables/navigation/usePage'
 
 import PlaylistCard from '~/components/playlists/Card.vue'
 import Button from '~/components/ui/Button.vue'
-import Layout from '~/components/ui/Layout.vue'
+import Section from '~/components/ui/Section.vue'
 import Alert from '~/components/ui/Alert.vue'
 import Spacer from '~/components/ui/Spacer.vue'
 import Loader from '~/components/ui/Loader.vue'
+import Pagination from '~/components/ui/Pagination.vue'
 
 interface Props {
   filters: Record<string, unknown>
   url: string
+  title?: string
 }
 
 const { t } = useI18n()
@@ -29,19 +32,25 @@ const props = defineProps<Props>()
 const store = useStore()
 
 const objects = reactive([] as Playlist[])
-const isLoading = ref(false)
+const page = usePage()
 const nextPage = ref('')
+const count = ref(0)
+
+const isLoading = ref(false)
+
 const fetchData = async (url = props.url) => {
   isLoading.value = true
 
   try {
     const params = {
       ...props.filters,
-      page_size: props.filters.limit ?? 3
+      page: page.value,
+      page_size: props.filters.limit ?? 4
     }
 
     const response = await axios.get(url, { params })
     nextPage.value = response.data.next
+    count.value = response.data.count
     objects.push(...response.data.results)
   } catch (error) {
     useErrorHandler(error as Error)
@@ -50,35 +59,24 @@ const fetchData = async (url = props.url) => {
   isLoading.value = false
 }
 
+setTimeout(fetchData, 1000)
+
 watch(
-  () => store.state.moderation.lastUpdate,
+  [() => store.state.moderation.lastUpdate, page],
   () => fetchData(),
   { immediate: true }
 )
 </script>
 
 <template>
-  <div class="playlist-widget">
-    <h2 v-if="!!$slots.title">
-      <slot name="title" />
-    </h2>
-
+  <Section
+    align-left
+    :h2="title"
+  >
     <Loader v-if="isLoading"/>
-
-    <Layout
-      v-else-if="objects.length > 0"
-      flex
-      gap-16
-    >
-      <PlaylistCard
-        v-for="playlist in objects"
-        :key="playlist.id"
-        :playlist="playlist"
-      />
-    </Layout>
-
     <Alert
-      v-else
+      v-if="!isLoading && objects.length === 0"
+      style="grid-column: 1 / -1;"
       blue
       align-items="center"
     >
@@ -97,16 +95,15 @@ watch(
         {{ t('components.playlists.Widget.button.create') }}
       </Button>
     </Alert>
-
-    <template v-if="nextPage">
-      <Spacer />
-      <Button
-        v-if="nextPage"
-        primary
-        @click="fetchData(nextPage)"
-      >
-        {{ t('components.playlists.Widget.button.more') }}
-      </Button>
-    </template>
-  </div>
+    <PlaylistCard
+      v-for="playlist in objects"
+      :key="playlist.id"
+      :playlist="playlist"
+    />
+  </Section>
+  <Pagination
+    v-if="objects && count > props.filters.limit"
+    v-model:page="page"
+    :pages="Math.ceil((count || 0) / props.filters.limit)"
+  />
 </template>
diff --git a/front/src/views/auth/ProfileActivity.vue b/front/src/views/auth/ProfileActivity.vue
index bb2b3833a..326cad8be 100644
--- a/front/src/views/auth/ProfileActivity.vue
+++ b/front/src/views/auth/ProfileActivity.vue
@@ -10,6 +10,7 @@ import TrackWidget from '~/components/audio/track/Widget.vue'
 import AlbumWidget from '~/components/album/Widget.vue'
 import RadioButton from '~/components/radios/Button.vue'
 import Layout from '~/components/ui/Layout.vue'
+import Header from '~/components/ui/Header.vue'
 
 interface Props {
   object?: Actor
@@ -26,47 +27,45 @@ const { t } = useI18n()
 </script>
 
 <template>
-  <Layout stack>
-    <radio-button
-      v-if="recentActivity > 0"
-      class="right floated"
-      type="account"
-      :object?-id="{username: object?.preferred_username, fullUsername: object?.full_username}"
-      :client-only="true"
-    />
+  <Layout stack gap-64>
+    <Header
+      align-left
+      medium-items
+      :h1="t('views.auth.ProfileBase.link.overview')"
+    >
+      <template #action>
+        <radio-button
+          v-if="recentActivity > 0"
+          class="right floated"
+          type="account"
+          :object-id="{username: object?.preferred_username, fullUsername: object?.full_username}"
+          :client-only="true"
+        />
+      </template>
+    </Header>
+
     <track-widget
       :url="'history/listenings/'"
       :filters="{ scope: `actor:${object?.full_username}`, ordering: '-creation_date', ...qualityFilters}"
       :websocket-handlers="['Listen']"
       @count="recentActivity = $event"
-    >
-      <template #title>
-        {{ t('components.library.Home.header.recentlyListened') }}
-      </template>
-    </track-widget>
-
+      :title="t('components.library.Home.header.recentlyListened')"
+    />
     <track-widget
       :url="'favorites/tracks/'"
-      :filters="{scope: 'actor:${object?.full_username}', ordering: '-creation_date'}"
-    >
-      <template #title>
-        {{ t('components.library.Home.header.recentlyFavorited') }}
-      </template>
-    </track-widget>
+      :filters="{scope: `actor:${object?.full_username}`, ordering: '-creation_date'}"
+      :title="t('components.library.Home.header.recentlyFavorited')"
+    />
 
     <playlist-widget
       :url="'playlists/'"
       :filters="{scope: `actor:${object?.full_username}`, playable: true, ordering: '-modification_date'}"
-    >
-      <template #title>
-        {{ t('views.auth.ProfileActivity.header.playlists') }}
-      </template>
-    </playlist-widget>
+      :title="t('views.auth.ProfileActivity.header.playlists')"
+    />
 
-    <album-widget :filters="{scope: `actor:${object?.full_username}`, playable: true, ordering: '-creation_date', ...qualityFilters}">
-      <template #title>
-        {{ t('components.library.Home.header.recentlyAdded') }}
-      </template>
-    </album-widget>
+    <album-widget
+      :filters="{scope: `actor:${object?.full_username}`, playable: true, ordering: '-creation_date', ...qualityFilters}"
+      :title="t('components.library.Home.header.recentlyAdded')"
+    />
   </Layout>
 </template>
diff --git a/front/src/views/auth/ProfileBase.vue b/front/src/views/auth/ProfileBase.vue
index a9bcc5735..4d0f6f7c5 100644
--- a/front/src/views/auth/ProfileBase.vue
+++ b/front/src/views/auth/ProfileBase.vue
@@ -129,7 +129,6 @@ const recentActivity = ref(0)
     </Layout>
     <Tabs>
       <Tab :title="t('views.auth.ProfileBase.link.overview')" :to="{name: 'profile.overview', params: routerParams}">
-        <h2>{{ t('views.auth.ProfileBase.link.overview') }}</h2>
         <router-view
           :object="object"
           @updated="fetchData"