diff --git a/api/funkwhale_api/common/schema.yml b/api/funkwhale_api/common/schema.yml
index 3dd623900..9970d42fd 100644
--- a/api/funkwhale_api/common/schema.yml
+++ b/api/funkwhale_api/common/schema.yml
@@ -1,7 +1,7 @@
 openapi: 3.0.3
 info:
   title: Funkwhale API
-  version: 1.4.0
+  version: 2.0.0a1
   description: |
     # Funkwhale API
 
diff --git a/api/funkwhale_api/playlists/views.py b/api/funkwhale_api/playlists/views.py
index 03e5e378d..18bcaa2a2 100644
--- a/api/funkwhale_api/playlists/views.py
+++ b/api/funkwhale_api/playlists/views.py
@@ -7,6 +7,7 @@ from django.db.models import Count
 from drf_spectacular.utils import extend_schema
 from rest_framework import exceptions, mixins, status, viewsets
 from rest_framework.decorators import action
+from rest_framework.pagination import PageNumberPagination
 from rest_framework.parsers import FormParser, JSONParser, MultiPartParser
 from rest_framework.renderers import JSONRenderer
 from rest_framework.response import Response
@@ -138,9 +139,15 @@ class PlaylistViewSet(
                 plugins.TRIGGER_THIRD_PARTY_UPLOAD,
                 track=plt.track,
             )
-        serializer = serializers.PlaylistTrackSerializer(plts, many=True)
-        data = {"count": len(plts), "results": serializer.data}
-        return Response(data, status=200)
+
+        # Apply pagination
+        paginator = PageNumberPagination()
+        paginator.page_size = 100  # Set the page size (number of items per page)
+        paginated_plts = paginator.paginate_queryset(plts, request)
+
+        # Serialize the paginated data
+        serializer = serializers.PlaylistTrackSerializer(paginated_plts, many=True)
+        return paginator.get_paginated_response(serializer.data)
 
     @extend_schema(
         operation_id="add_to_playlist", request=serializers.PlaylistAddManySerializer
diff --git a/front/src/components/audio/track/MobileRow.vue b/front/src/components/audio/track/MobileRow.vue
index 39494a996..0bf47794b 100644
--- a/front/src/components/audio/track/MobileRow.vue
+++ b/front/src/components/audio/track/MobileRow.vue
@@ -2,7 +2,7 @@
 import type { Track, Artist, Album, Playlist, Library, Channel, Actor } from '~/types'
 import type { PlayOptionsProps } from '~/composables/audio/usePlayOptions'
 
-import { ref, computed } from 'vue'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { usePlayer } from '~/composables/audio/player'
@@ -12,9 +12,10 @@ import { useStore } from '~/store'
 import usePlayOptions from '~/composables/audio/usePlayOptions'
 
 import TrackFavoriteIcon from '~/components/favorites/TrackFavoriteIcon.vue'
-import TrackModal from '~/components/audio/track/Modal.vue'
 import { generateTrackCreditString } from '~/utils/utils'
 
+import Button from '~/components/ui/Button.vue'
+
 interface Props extends PlayOptionsProps {
   track: Track
   index: number
@@ -25,7 +26,6 @@ interface Props extends PlayOptionsProps {
 
   // TODO(wvffle): Remove after https://github.com/vuejs/core/pull/4512 is merged
   isPlayable?: boolean
-  tracks?: Track[]
   artist?: Artist | null
   album?: Album | null
   playlist?: Playlist | null
@@ -39,7 +39,6 @@ const props = withDefaults(defineProps<Props>(), {
   isArtist: false,
   isAlbum: false,
 
-  tracks: () => [],
   artist: null,
   album: null,
   playlist: null,
@@ -48,7 +47,9 @@ const props = withDefaults(defineProps<Props>(), {
   account: null
 })
 
-const showTrackModal = ref(false)
+const emit = defineEmits<{
+  (e: 'open-modal', track: Track, index: number): void
+}>()
 
 const { currentTrack } = useQueue()
 const { isPlaying } = usePlayer()
@@ -115,8 +116,10 @@ const actionsButtonLabel = computed(() => t('components.audio.track.MobileRow.bu
         />
       </p>
     </div>
-    <div
+    <track-favorite-icon
       v-if="store.state.auth.authenticated"
+      ghost
+      tiny
       :class="[
         'meta',
         'right',
@@ -125,17 +128,14 @@ const actionsButtonLabel = computed(() => t('components.audio.track.MobileRow.bu
         'mobile',
         { 'with-art': showArt },
       ]"
-      role="button"
-    >
-      <track-favorite-icon
-        class="tiny"
-        :border="false"
-        :track="track"
-      />
-    </div>
-    <div
-      role="button"
+      :track="track"
+    />
+    <!-- TODO: Replace with <PlayButton :dropdown-only="true"> after its display is fixed for mobile -->
+    <Button
       :aria-label="actionsButtonLabel"
+      icon="bi-three-dots-vertical"
+      ghost
+      tiny
       :class="[
         'modal-button',
         'right',
@@ -144,16 +144,7 @@ const actionsButtonLabel = computed(() => t('components.audio.track.MobileRow.bu
         'mobile',
         { 'with-art': showArt },
       ]"
-      @click.prevent.exact="showTrackModal = !showTrackModal"
-    >
-      <i class="ellipsis large vertical icon" />
-    </div>
-    <track-modal
-      v-model:show="showTrackModal"
-      :track="track"
-      :index="index"
-      :is-artist="isArtist"
-      :is-album="isAlbum"
+      @click.prevent.exact="emit('open-modal', track, index)"
     />
   </div>
 </template>
diff --git a/front/src/components/audio/track/Modal.vue b/front/src/components/audio/track/Modal.vue
index 1fa734214..36350827c 100644
--- a/front/src/components/audio/track/Modal.vue
+++ b/front/src/components/audio/track/Modal.vue
@@ -12,6 +12,8 @@ import { useVModel } from '@vueuse/core'
 import { generateTrackCreditString, getArtistCoverUrl } from '~/utils/utils'
 
 import Modal from '~/components/ui/Modal.vue'
+import Button from '~/components/ui/Button.vue'
+import Layout from '~/components/ui/Layout.vue'
 
 interface Events {
   (e: 'update:show', value: boolean): void
@@ -92,9 +94,11 @@ const labels = computed(() => ({
 </script>
 
 <template>
+  <!-- TODO: Delete this file after this modal is replaced with playbutton dropdown-only popover -->
   <Modal
     v-model="show"
     :title="track.title"
+    class="small"
   >
     <div class="header">
       <div class="ui large centered rounded image">
@@ -127,126 +131,105 @@ const labels = computed(() => ({
         {{ generateTrackCreditString(track) }}
       </h4>
     </div>
-    <div class="ui hidden divider" />
     <div class="content">
-      <div class="ui one column unstackable grid">
-        <div
+      <Layout
+        stack
+        no-gap
+      >
+        <Button
           v-if="store.state.auth.authenticated && track.artist_credit?.[0].artist.content_category !== 'podcast'"
-          class="row"
+          full
+          ghost
+          :aria-label="favoriteButton"
+          :icon="isFavorite ? 'bi-heart-fill' : 'bi-heart'"
+          :is-active="isFavorite"
+          @click.stop="store.dispatch('favorites/toggle', track.id)"
         >
-          <div
-            tabindex="0"
-            class="column"
-            role="button"
-            :aria-label="favoriteButton"
-            @click.stop="store.dispatch('favorites/toggle', track.id)"
-          >
-            <i :class="[ 'heart', 'favorite-icon', { favorited: isFavorite, pink: isFavorite }, 'icon', 'track-modal', 'list-icon' ]" />
-            <span class="track-modal list-item">{{ favoriteButton }}</span>
-          </div>
-        </div>
-        <div class="row">
-          <div
-            class="column"
-            role="button"
-            :aria-label="labels.addToQueue"
-            @click.stop.prevent="enqueue(); show = false"
-          >
-            <i class="plus icon track-modal list-icon" />
-            <span class="track-modal list-item">{{ labels.addToQueue }}</span>
-          </div>
-        </div>
-        <div class="row">
-          <div
-            class="column"
-            role="button"
-            :aria-label="labels.playNext"
-            @click.stop.prevent="enqueueNext(true);show = false"
-          >
-            <i class="step forward icon track-modal list-icon" />
-            <span class="track-modal list-item">{{ labels.playNext }}</span>
-          </div>
-        </div>
-        <div class="row">
-          <div
-            class="column"
-            role="button"
-            :aria-label="labels.startRadio"
-            @click.stop.prevent="() => { store.dispatch('radios/start', { type: 'similar', objectId: track.id }); show = false }"
-          >
-            <i class="rss icon track-modal list-icon" />
-            <span class="track-modal list-item">{{ labels.startRadio }}</span>
-          </div>
-        </div>
-        <div class="row">
-          <div
-            class="column"
-            role="button"
-            :aria-label="labels.addToPlaylist"
-            @click.stop="store.commit('playlists/chooseTrack', track)"
-          >
-            <i class="list icon track-modal list-icon" />
-            <span class="track-modal list-item">
-              {{ labels.addToPlaylist }}
-            </span>
-          </div>
-        </div>
-        <div class="ui divider" />
-        <div
+          {{ favoriteButton }}
+        </Button>
+        <Button
+          full
+          ghost
+          :aria-label="labels.addToQueue"
+          icon="bi-plus"
+          @click.stop.prevent="enqueue(); show = false"
+        >
+          {{ labels.addToQueue }}
+        </Button>
+        <Button
+          full
+          ghost
+          :aria-label="labels.playNext"
+          icon="bi-skip-end"
+          @click.stop.prevent="enqueueNext(true); show = false"
+        >
+          {{ labels.playNext }}
+        </Button>
+        <Button
+          full
+          ghost
+          :aria-label="labels.startRadio"
+          icon="bi-rss"
+          @click.stop.prevent="store.dispatch('radios/start', { type: 'similar', objectId: track.id }); show = false"
+        >
+          {{ labels.startRadio }}
+        </Button>
+        <Button
+          full
+          ghost
+          :aria-label="labels.addToPlaylist"
+          icon="bi-list"
+          @click.stop="store.commit('playlists/chooseTrack', track)"
+        >
+          {{ labels.addToPlaylist }}
+        </Button>
+        <hr>
+        <Button
           v-if="!isAlbum && track.album"
-          class="row"
+          full
+          ghost
+          :aria-label="albumDetailsButton"
+          icon="bi-disc"
+          @click.prevent.exact="router.push({ name: 'library.albums.detail', params: { id: track.album?.id } })"
         >
-          <div
-            class="column"
-            role="button"
-            :aria-label="albumDetailsButton"
-            @click.prevent.exact="router.push({ name: 'library.albums.detail', params: { id: track.album?.id } })"
-          >
-            <i class="compact disc icon track-modal list-icon" />
-            <span class="track-modal list-item">{{ albumDetailsButton }}</span>
-          </div>
-        </div>
-        <div
+          {{ albumDetailsButton }}
+        </Button>
+        <template
           v-if="!isArtist"
-          class="row"
         >
-          <div
+          <Button
             v-for="ac in track.artist_credit"
             :key="ac.artist.id"
-            class="column"
-            role="button"
+            full
+            ghost
             :aria-label="artistDetailsButton"
+            icon="bi-person-fill"
             @click.prevent.exact="router.push({ name: 'library.artists.detail', params: { id: ac.artist.id } })"
           >
-            <i class="user icon track-modal list-icon" />
-            <span class="track-modal list-item">{{ ac.credit }}</span>
-            <span v-if="ac.joinphrase">{{ ac.joinphrase }}</span>
-          </div>
-        </div>
-        <div class="row">
-          <div
-            class="column"
-            role="button"
-            :aria-label="trackDetailsButton"
-            @click.prevent.exact="router.push({ name: 'library.tracks.detail', params: { id: track.id } })"
-          >
-            <i class="info icon track-modal list-icon" />
-            <span class="track-modal list-item">{{ trackDetailsButton }}</span>
-          </div>
-        </div>
-        <div class="ui divider" />
-        <div
+            {{ ac.credit }}<span v-if="ac.joinphrase">{{ ac.joinphrase }}</span>
+          </Button>
+        </template>
+        <Button
+          full
+          ghost
+          :aria-label="trackDetailsButton"
+          icon="bi-info-circle"
+          @click.prevent.exact="router.push({ name: 'library.tracks.detail', params: { id: track.id } })"
+        >
+          {{ trackDetailsButton }}
+        </Button>
+        <hr>
+        <Button
           v-for="obj in getReportableObjects({ track, album: track.album, artistCredit: track.artist_credit })"
           :key="obj.target.type + obj.target.id"
-          class="row"
+          full
+          ghost
+          icon="bi-share"
           @click.stop.prevent="report(obj)"
         >
-          <div class="column">
-            <i class="share icon track-modal list-icon" />
-            <span class="track-modal list-item">{{ obj.label }}</span>
-          </div>
-        </div>
-      </div>
+          {{ obj.label }}
+        </Button>
+      </Layout>
     </div>
   </Modal>
 </template>
diff --git a/front/src/components/audio/track/Table.vue b/front/src/components/audio/track/Table.vue
index 1e32ea901..1bf0ab57d 100644
--- a/front/src/components/audio/track/Table.vue
+++ b/front/src/components/audio/track/Table.vue
@@ -8,6 +8,8 @@ import { ref, computed } from 'vue'
 import axios from 'axios'
 
 import TrackMobileRow from '~/components/audio/track/MobileRow.vue'
+import TrackModal from '~/components/audio/track/Modal.vue'
+
 import Pagination from '~/components/ui/Pagination.vue'
 import TrackRow from '~/components/audio/track/Row.vue'
 import Input from '~/components/ui/Input.vue'
@@ -143,6 +145,16 @@ const updatePage = (page: number) => {
     emit('page-changed', page)
   }
 }
+
+const showTrackModal = ref(false)
+const modalTrack = ref<Track | null>(null)
+const modalIndex = ref<number | null>(null)
+
+function openTrackModal(track: Track, index: number) {
+  showTrackModal.value = true
+  modalTrack.value = track
+  modalIndex.value = index
+}
 </script>
 
 <template>
@@ -251,13 +263,22 @@ const updatePage = (page: number) => {
         :key="track.id"
         :track="track"
         :index="index"
-        :tracks="allTracks"
         :show-position="showPosition"
         :show-art="showArt"
         :show-duration="showDuration"
         :is-artist="isArtist"
         :is-album="isAlbum"
         :is-podcast="isPodcast"
+        @open-modal="openTrackModal"
+      />
+      <!-- TODO: Replace with <PlayButton :dropdown-only="true"> after its display is fixed for mobile -->
+      <track-modal
+        v-if="modalTrack"
+        v-model:show="showTrackModal"
+        :track="modalTrack"
+        :index="modalIndex ?? 0"
+        :is-artist="isArtist"
+        :is-album="isAlbum"
       />
       <Pagination
         v-if="paginateResults"
diff --git a/front/src/components/library/ArtistBase.vue b/front/src/components/library/ArtistBase.vue
index 3a72a43c6..a9578e502 100644
--- a/front/src/components/library/ArtistBase.vue
+++ b/front/src/components/library/ArtistBase.vue
@@ -176,7 +176,6 @@ const isOpen = useModal('artist-description').isOpen
         class="description"
         :content="{ ...object.description, text: object.description.text ?? undefined }"
         :truncate-length="100"
-        :more-link="false"
       />
       <Spacer grow />
       <Link
diff --git a/front/src/locales/en_US.json b/front/src/locales/en_US.json
index fae68bcd4..43094e895 100644
--- a/front/src/locales/en_US.json
+++ b/front/src/locales/en_US.json
@@ -4597,7 +4597,8 @@
           "edit": "Edit",
           "embed": "Embed",
           "playAll": "Play all",
-          "stopEdit": "Stop Editing"
+          "stopEdit": "Stop Editing",
+          "loadMoreTracks": "Load more tracks"
         },
         "empty": {
           "noTracks": "There are no tracks in this playlist yet"
diff --git a/front/src/views/auth/ProfileBase.vue b/front/src/views/auth/ProfileBase.vue
index 062ce0612..ea9ebd0de 100644
--- a/front/src/views/auth/ProfileBase.vue
+++ b/front/src/views/auth/ProfileBase.vue
@@ -190,7 +190,6 @@ const isOpen = useModal('artist-description').isOpen
           class="description"
           :content="{ html: object?.summary.html || '' }"
           :truncate-length="100"
-          :more-link="false"
         />
         <Spacer grow />
         <Link
diff --git a/front/src/views/playlists/Detail.vue b/front/src/views/playlists/Detail.vue
index aa3943a5c..188b1393d 100644
--- a/front/src/views/playlists/Detail.vue
+++ b/front/src/views/playlists/Detail.vue
@@ -31,7 +31,7 @@ import useErrorHandler from '~/composables/useErrorHandler'
 // }
 
 interface Props {
-  id: number
+  id: string
   defaultEdit?: boolean
 }
 
@@ -40,7 +40,7 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const store = useStore()
-
+const isLoadingMoreTracks = ref(false)
 const edit = ref(props.defaultEdit)
 const playlist = ref<Playlist | null>(null)
 const playlistTracks = ref<PlaylistTrack[]>([])
@@ -57,17 +57,24 @@ const labels = computed(() => ({
 }))
 
 const isLoading = ref(false)
+const nextPage = ref<string | null>(null) // Tracks the next page URL
+const previousPage = ref<string | null>(null) // Tracks the previous page URL
+const totalTracks = ref<number>(0) // Total number of tracks
+
 const fetchData = async () => {
   isLoading.value = true
 
   try {
     const [playlistResponse, tracksResponse] = await Promise.all([
       axios.get(`playlists/${props.id}/`),
-      axios.get(`playlists/${props.id}/tracks/`)
+      axios.get(`playlists/${props.id}/tracks?page=1`)
     ])
 
     playlist.value = playlistResponse.data
     fullPlaylistTracks.value = tracksResponse.data.results
+    nextPage.value = tracksResponse.data.next
+    previousPage.value = tracksResponse.data.previous
+    totalTracks.value = tracksResponse.data.count
   } catch (error) {
     useErrorHandler(error as Error)
   }
@@ -75,6 +82,25 @@ const fetchData = async () => {
   isLoading.value = false
 }
 
+const loadMoreTracks = async () => {
+  if (nextPage.value) {
+    isLoadingMoreTracks.value = true; // Set loading state for the button
+    try {
+      const response = await axios.get(nextPage.value);
+
+      // Append new tracks to the existing list
+      fullPlaylistTracks.value = [...fullPlaylistTracks.value, ...response.data.results];
+
+      // Update pagination metadata
+      nextPage.value = response.data.next;
+    } catch (error) {
+      useErrorHandler(error as Error)
+    } finally {
+      isLoadingMoreTracks.value = false; // Reset loading state
+    }
+  }
+};
+
 fetchData()
 
 const images = computed(() => {
@@ -113,17 +139,6 @@ const randomizedColors = computed(() => shuffleArray(bgcolors.value))
 //   return t('components.audio.ChannelCard.title', { date })
 // })
 
-// TODO: Check if this function is still needed
-// const deletePlaylist = async () => {
-//   try {
-//     await axios.delete(`playlists/${props.id}/`)
-//     store.dispatch('playlists/fetchOwn')
-//     return router.push({ path: '/library' })
-//   } catch (error) {
-//     useErrorHandler(error as Error)
-//   }
-// }
-
 // TODO: Implement shuffle
 const shuffle = () => {}
 </script>
@@ -178,7 +193,6 @@ const shuffle = () => {}
     <RenderedDescription
       :content="{ html: playlist.description }"
       :truncate-length="100"
-      :show-more="true"
     />
     <Layout
       flex
@@ -240,6 +254,14 @@ const shuffle = () => {}
         :tracks="tracks"
         :unique="false"
       />
+      <Button
+        v-if="nextPage"
+        primary
+        :is-loading="isLoadingMoreTracks"
+        @click="loadMoreTracks"
+      >
+        {{ t('views.playlists.Detail.button.loadMoreTracks') }}
+      </Button>
     </template>
     <Alert
       v-else-if="!isLoading"