diff --git a/lib/common.dart b/lib/common.dart
index 7a79d97e0..f08538a12 100644
--- a/lib/common.dart
+++ b/lib/common.dart
@@ -2,8 +2,6 @@ export 'src/common/adaptive_container.dart';
 export 'src/common/audio_card.dart';
 export 'src/common/audio_card_bottom.dart';
 export 'src/common/audio_filter.dart';
-export 'src/common/audio_page.dart';
-export 'src/common/audio_page_body.dart';
 export 'src/common/audio_page_control_panel.dart';
 export 'src/common/audio_page_header.dart';
 export 'src/common/audio_page_type.dart';
diff --git a/lib/src/common/audio_page.dart b/lib/src/common/audio_page.dart
deleted file mode 100644
index ea93f01fc..000000000
--- a/lib/src/common/audio_page.dart
+++ /dev/null
@@ -1,108 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:yaru/yaru.dart';
-
-import '../../common.dart';
-import '../../data.dart';
-
-class AudioPage extends StatelessWidget {
-  const AudioPage({
-    super.key,
-    required this.audios,
-    required this.audioPageType,
-    required this.pageId,
-    this.title,
-    this.controlPanelButton,
-    this.headerTitle,
-    this.headerSubtile,
-    this.headerLabel,
-    this.headerDescription,
-    this.image,
-    this.onAlbumTap,
-    this.onArtistTap,
-    this.noResultMessage,
-    this.noResultIcon,
-    this.titleLabel,
-    this.artistLabel,
-    this.albumLabel,
-    this.controlPanelTitle,
-    this.titleFlex = 1,
-    this.artistFlex = 1,
-    this.albumFlex = 1,
-    this.showTrack = true,
-    this.showAlbum = true,
-    this.showArtist = true,
-    this.imageRadius,
-    this.onLabelTab,
-    this.onSubTitleTab,
-    this.onAudioFilterSelected,
-    this.classicTiles = true,
-  });
-
-  final Set<Audio>? audios;
-  final AudioPageType audioPageType;
-  final String? headerLabel;
-  final String pageId;
-  final String? headerTitle;
-  final Widget? controlPanelTitle;
-  final String? headerDescription;
-  final String? headerSubtile;
-  final Widget? controlPanelButton;
-  final Widget? title;
-  final Widget? image;
-  final Widget? noResultMessage;
-  final Widget? noResultIcon;
-  final String? titleLabel, artistLabel, albumLabel;
-  final int titleFlex, artistFlex, albumFlex;
-  final bool showTrack, showAlbum, showArtist;
-  final BorderRadius? imageRadius;
-  final void Function(String text)? onSubTitleTab;
-  final void Function(String text)? onLabelTab;
-  final void Function(String text)? onAlbumTap;
-  final void Function(String text)? onArtistTap;
-  final void Function(AudioFilter)? onAudioFilterSelected;
-  final bool classicTiles;
-
-  @override
-  Widget build(BuildContext context) {
-    final body = AudioPageBody(
-      key: ValueKey(audios?.length),
-      classicTiles: classicTiles,
-      pageId: pageId,
-      audios: audios,
-      noResultMessage: noResultMessage,
-      noResultIcon: noResultIcon,
-      onAlbumTap: onAlbumTap,
-      onArtistTap: onArtistTap,
-      audioPageType: audioPageType,
-      image: image,
-      imageRadius: imageRadius,
-      headerDescription: headerDescription,
-      controlPanelButton: controlPanelButton,
-      headerLabel: headerLabel,
-      onLabelTab: onLabelTab,
-      headerSubTitle: headerSubtile,
-      onSubTitleTab: onSubTitleTab,
-      headerTitle: headerTitle,
-      controlPanelTitle: controlPanelTitle,
-      albumFlex: albumFlex,
-      titleFlex: titleFlex,
-      artistFlex: artistFlex,
-      titleLabel: titleLabel,
-      artistLabel: artistLabel,
-      albumLabel: albumLabel,
-      showTrack: showTrack,
-      showAlbum: showAlbum,
-      showArtist: showArtist,
-      onAudioFilterSelected: onAudioFilterSelected,
-    );
-
-    return YaruDetailPage(
-      key: ValueKey(pageId),
-      appBar: HeaderBar(
-        adaptive: true,
-        title: isMobile ? null : (title ?? Text(headerTitle ?? pageId)),
-      ),
-      body: AdaptiveContainer(child: body),
-    );
-  }
-}
diff --git a/lib/src/common/audio_page_body.dart b/lib/src/common/audio_page_body.dart
deleted file mode 100644
index 77a186c4f..000000000
--- a/lib/src/common/audio_page_body.dart
+++ /dev/null
@@ -1,265 +0,0 @@
-import 'package:animated_emoji/animated_emoji.dart';
-import 'package:collection/collection.dart';
-import 'package:flutter/material.dart';
-
-import '../../common.dart';
-import '../../constants.dart';
-import '../../data.dart';
-import '../../get.dart';
-import '../../l10n.dart';
-import '../../player.dart';
-import '../library/library_model.dart';
-
-class AudioPageBody extends StatefulWidget with WatchItStatefulWidgetMixin {
-  const AudioPageBody({
-    super.key,
-    required this.pageId,
-    this.audios,
-    required this.audioPageType,
-    this.headerLabel,
-    this.headerTitle,
-    this.headerDescription,
-    this.headerSubTitle,
-    this.controlPanelButton,
-    this.image,
-    this.onAlbumTap,
-    this.onArtistTap,
-    this.noResultMessage,
-    this.noResultIcon = const AnimatedEmoji(AnimatedEmojis.eyes),
-    this.titleLabel,
-    this.artistLabel,
-    this.albumLabel,
-    this.controlPanelTitle,
-    this.showTrack = true,
-    this.showAlbum = true,
-    this.showArtist = true,
-    this.titleFlex = 1,
-    this.artistFlex = 1,
-    this.albumFlex = 1,
-    this.padding,
-    this.imageRadius,
-    this.onLabelTab,
-    this.onSubTitleTab,
-    this.onAudioFilterSelected,
-    this.classicTiles = true,
-    this.showAudioTileHeader = true,
-  })  : showAudioPageHeader = audioPageType != AudioPageType.allTitlesView,
-        showControlPanel = audioPageType != AudioPageType.allTitlesView;
-
-  final String pageId;
-  final Set<Audio>? audios;
-  final AudioPageType audioPageType;
-  final String? headerLabel;
-  final Widget? controlPanelTitle;
-  final String? headerTitle;
-  final String? headerDescription;
-  final String? headerSubTitle;
-  final Widget? controlPanelButton;
-  final Widget? image;
-  final BorderRadius? imageRadius;
-  final bool? showAudioPageHeader;
-  final bool showControlPanel;
-  final bool showAudioTileHeader;
-  final Widget? noResultMessage;
-  final Widget? noResultIcon;
-  final String? titleLabel, artistLabel, albumLabel;
-  final int titleFlex, artistFlex, albumFlex;
-  final bool showTrack, showAlbum, showArtist;
-  final EdgeInsetsGeometry? padding;
-  final void Function(String text)? onSubTitleTab;
-  final void Function(String text)? onLabelTab;
-  final void Function(String text)? onAlbumTap;
-  final void Function(String text)? onArtistTap;
-  final void Function(AudioFilter)? onAudioFilterSelected;
-  final bool classicTiles;
-
-  @override
-  State<AudioPageBody> createState() => _AudioPageBodyState();
-}
-
-class _AudioPageBodyState extends State<AudioPageBody> {
-  bool reorderAble = false;
-
-  @override
-  Widget build(BuildContext context) {
-    final reorderAblePageType =
-        (widget.audioPageType == AudioPageType.playlist ||
-            widget.audioPageType == AudioPageType.likedAudio);
-    final isReorderAble = reorderAble && reorderAblePageType;
-    final isPlaying = watchPropertyValue((PlayerModel m) => m.isPlaying);
-
-    final playerModel = getIt<PlayerModel>();
-    final startPlaylist = playerModel.startPlaylist;
-
-    final currentAudio = watchPropertyValue((PlayerModel m) => m.audio);
-    final pause = playerModel.pause;
-    final resume = playerModel.resume;
-
-    watchPropertyValue((LibraryModel m) => m.likedAudios.length);
-    if (widget.audioPageType == AudioPageType.playlist) {
-      watchPropertyValue(
-        (LibraryModel m) => m.playlists[widget.pageId]?.length,
-      );
-    }
-
-    final libraryModel = getIt<LibraryModel>();
-
-    final audioControlPanel = Padding(
-      padding: kAudioControlPanelPadding,
-      child: AudioPageControlPanel(
-        title: widget.controlPanelTitle,
-        onTap: widget.audios?.isNotEmpty == false
-            ? null
-            : () => startPlaylist(
-                  audios: widget.audios!,
-                  listName: widget.pageId,
-                ),
-        controlButton: reorderAblePageType && widget.audios?.isNotEmpty == true
-            ? Row(
-                mainAxisSize: MainAxisSize.min,
-                children: [
-                  if (widget.controlPanelButton != null)
-                    widget.controlPanelButton!,
-                  IconButton(
-                    tooltip: context.l10n.move,
-                    isSelected: reorderAble,
-                    onPressed: () {
-                      setState(() {
-                        reorderAble = !reorderAble;
-                      });
-                    },
-                    icon: Icon(Iconz().reorder),
-                  ),
-                ],
-              )
-            : widget.controlPanelButton,
-        audios: widget.audios ?? {},
-      ),
-    );
-
-    final audioPageHeader = AudioPageHeader(
-      imageRadius: widget.imageRadius,
-      title: widget.headerTitle ??
-          widget.audios?.firstOrNull?.album ??
-          widget.pageId,
-      description:
-          widget.headerDescription ?? widget.audios?.firstOrNull?.description,
-      image: widget.image,
-      subTitle: widget.headerSubTitle,
-      onSubTitleTab: widget.onSubTitleTab,
-      label: widget.headerLabel,
-      onLabelTab: widget.onLabelTab,
-    );
-
-    if (widget.audios == null) {
-      return Column(
-        children: [
-          if (widget.showAudioPageHeader == true) audioPageHeader,
-          if (widget.showControlPanel) audioControlPanel,
-          const Expanded(
-            child: Center(
-              child: Progress(),
-            ),
-          ),
-        ],
-      );
-    } else {
-      if (widget.audios!.isEmpty) {
-        return Column(
-          children: [
-            if (widget.showAudioPageHeader == true) audioPageHeader,
-            if (widget.showControlPanel) audioControlPanel,
-            Expanded(
-              child: NoSearchResultPage(
-                icons: widget.noResultIcon,
-                message: widget.noResultMessage,
-              ),
-            ),
-          ],
-        );
-      }
-    }
-
-    Widget itemBuilder(BuildContext context, int index) {
-      final audio = widget.audios!.elementAt(index);
-      final audioSelected = currentAudio == audio;
-
-      return AudioTile(
-        onSubTitleTap: switch (widget.audioPageType) {
-          AudioPageType.artist => widget.onAlbumTap,
-          _ => widget.onArtistTap,
-        },
-        key: reorderAblePageType ? ObjectKey(audio) : null,
-        isPlayerPlaying: isPlaying,
-        pause: pause,
-        startPlaylist: widget.audios == null
-            ? null
-            : () => startPlaylist(
-                  audios: widget.audios!,
-                  listName: widget.pageId,
-                  index: index,
-                ),
-        resume: resume,
-        selected: audioSelected,
-        audio: audio,
-        insertIntoQueue: playerModel.insertIntoQueue,
-        pageId: widget.pageId,
-        libraryModel: libraryModel,
-        audioPageType: widget.audioPageType,
-      );
-    }
-
-    final audioTileHeader = widget.classicTiles
-        ? AudioTileHeader(
-            titleFlex: widget.titleFlex,
-            artistFlex: widget.artistFlex,
-            albumFlex: widget.albumFlex,
-            titleLabel: widget.titleLabel,
-            artistLabel: widget.artistLabel,
-            albumLabel: widget.albumLabel,
-            showTrack: widget.showTrack,
-            showAlbum: widget.showAlbum,
-            showArtist: widget.showArtist,
-            onAudioFilterSelected: widget.onAudioFilterSelected,
-          )
-        : const SizedBox(height: 10);
-
-    return Padding(
-      padding: widget.padding ?? EdgeInsets.zero,
-      child: Column(
-        children: [
-          if (widget.showAudioPageHeader == true) audioPageHeader,
-          if (widget.showControlPanel) audioControlPanel,
-          if (widget.showAudioTileHeader) audioTileHeader,
-          if (widget.showAudioTileHeader && widget.classicTiles)
-            const Divider(),
-          if (isReorderAble && widget.audios != null)
-            Expanded(
-              child: ReorderableListView.builder(
-                itemBuilder: itemBuilder,
-                itemCount: widget.audios!.length,
-                onReorder: (oldIndex, newIndex) {
-                  if (playerModel.queueName == widget.pageId) {
-                    playerModel.moveAudioInQueue(oldIndex, newIndex);
-                  }
-
-                  libraryModel.moveAudioInPlaylist(
-                    oldIndex: oldIndex,
-                    newIndex: newIndex,
-                    id: widget.pageId,
-                  );
-                },
-              ),
-            )
-          else
-            Expanded(
-              child: ListView.builder(
-                itemCount: widget.audios!.length,
-                itemBuilder: itemBuilder,
-              ),
-            ),
-        ],
-      ),
-    );
-  }
-}
diff --git a/lib/src/common/sliver_audio_page.dart b/lib/src/common/sliver_audio_page.dart
index 7d05b4684..20a79bebc 100644
--- a/lib/src/common/sliver_audio_page.dart
+++ b/lib/src/common/sliver_audio_page.dart
@@ -65,7 +65,9 @@ class SliverAudioPage extends StatelessWidget {
                           image: image,
                           subTitle: pageSubTitle,
                           label: pageLabel,
-                          onLabelTab: onPageLabelTab,
+                          onLabelTab: audioPageType == AudioPageType.likedAudio
+                              ? null
+                              : onPageLabelTab,
                           onSubTitleTab: onPageSubTitleTab,
                         ),
                       ),
diff --git a/lib/src/library/library_model.dart b/lib/src/library/library_model.dart
index 72f05e21d..755af5bbb 100644
--- a/lib/src/library/library_model.dart
+++ b/lib/src/library/library_model.dart
@@ -197,6 +197,9 @@ class LibraryModel extends SafeChangeNotifier {
   void addPlaylist(String name, Set<Audio> audios) =>
       _service.addPlaylist(name, audios);
 
+  Future<void> updatePlaylist(String id, Set<Audio> audios) async =>
+      await _service.updatePlaylist(id, audios);
+
   void removePlaylist(String id) {
     final playlistIndex = getIndexOfPlaylist(id);
     if (index == playlistIndex) {
diff --git a/lib/src/library/library_service.dart b/lib/src/library/library_service.dart
index 375e809e2..7cfb79293 100644
--- a/lib/src/library/library_service.dart
+++ b/lib/src/library/library_service.dart
@@ -222,6 +222,18 @@ class LibraryService {
     }
   }
 
+  Future<void> updatePlaylist(String id, Set<Audio> audios) async {
+    if (_playlists.containsKey(id)) {
+      await writeAudioMap(_playlists, kPlaylistsFileName).then((_) {
+        _playlists.update(
+          id,
+          (value) => audios,
+        );
+        _playlistsController.add(true);
+      });
+    }
+  }
+
   void removePlaylist(String id) {
     if (_playlists.containsKey(id)) {
       _playlists.remove(id);
diff --git a/lib/src/local_audio/local_audio_model.dart b/lib/src/local_audio/local_audio_model.dart
index 418958197..4d080df3c 100644
--- a/lib/src/local_audio/local_audio_model.dart
+++ b/lib/src/local_audio/local_audio_model.dart
@@ -311,4 +311,12 @@ class LocalAudioModel extends SafeChangeNotifier {
     _manualFilter = value;
     notifyListeners();
   }
+
+  bool _allowReorder = false;
+  bool get allowReorder => _allowReorder;
+  void setAllowReorder(bool value) {
+    if (value == _allowReorder) return;
+    _allowReorder = value;
+    notifyListeners();
+  }
 }
diff --git a/lib/src/local_audio/view/album_page.dart b/lib/src/local_audio/view/album_page.dart
index 6a5b47251..8aef1f410 100644
--- a/lib/src/local_audio/view/album_page.dart
+++ b/lib/src/local_audio/view/album_page.dart
@@ -143,6 +143,7 @@ class AlbumPageControlButton extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final libraryModel = getIt<LibraryModel>();
+    final pinnedAlbum = libraryModel.isPinnedAlbum(id);
     return Row(
       mainAxisSize: MainAxisSize.min,
       children: [
@@ -153,7 +154,8 @@ class AlbumPageControlButton extends StatelessWidget {
             tooltip: context.l10n.pinAlbum,
             isSelected: libraryModel.isPinnedAlbum(id),
             icon: Icon(
-              libraryModel.isPinnedAlbum(id) ? Iconz().pinFilled : Iconz().pin,
+              pinnedAlbum ? Iconz().pinFilled : Iconz().pin,
+              color: pinnedAlbum ? context.t.primaryColor : null,
             ),
             onPressed: () {
               if (libraryModel.isPinnedAlbum(id)) {
diff --git a/lib/src/local_audio/view/album_view.dart b/lib/src/local_audio/view/album_view.dart
index fffcbe832..5c15fe2fa 100644
--- a/lib/src/local_audio/view/album_view.dart
+++ b/lib/src/local_audio/view/album_view.dart
@@ -5,7 +5,6 @@ import '../../../constants.dart';
 import '../../../get.dart';
 import '../../../player.dart';
 import '../../data/audio.dart';
-import '../../l10n/l10n.dart';
 import '../local_audio_model.dart';
 import 'album_page.dart';
 
@@ -15,84 +14,115 @@ class AlbumsView extends StatelessWidget {
     required this.albums,
     this.noResultMessage,
     this.noResultIcon,
+    required this.sliver,
   });
 
   final Set<Audio>? albums;
   final Widget? noResultMessage, noResultIcon;
+  final bool sliver;
 
   @override
   Widget build(BuildContext context) {
-    if (albums == null) {
-      return const Center(
-        child: Progress(),
+    if (sliver) {
+      if (albums == null) {
+        return const SliverToBoxAdapter(
+          child: Center(
+            child: Progress(),
+          ),
+        );
+      }
+
+      if (albums!.isEmpty) {
+        return SliverToBoxAdapter(
+          child: NoSearchResultPage(
+            icons: noResultIcon,
+            message: noResultMessage,
+          ),
+        );
+      }
+
+      return SliverPadding(
+        padding: gridPadding,
+        sliver: SliverGrid.builder(
+          itemCount: albums!.length,
+          gridDelegate: audioCardGridDelegate,
+          itemBuilder: itemBuilder,
+        ),
       );
-    }
+    } else {
+      if (albums == null) {
+        return const Center(
+          child: Progress(),
+        );
+      }
+
+      if (albums!.isEmpty) {
+        return NoSearchResultPage(
+          icons: noResultIcon,
+          message: noResultMessage,
+        );
+      }
 
-    if (albums!.isEmpty) {
-      return NoSearchResultPage(
-        icons: noResultIcon,
-        message: noResultMessage,
+      return Padding(
+        padding: const EdgeInsets.only(top: 15),
+        child: GridView.builder(
+          padding: gridPadding,
+          itemCount: albums!.length,
+          gridDelegate: audioCardGridDelegate,
+          itemBuilder: itemBuilder,
+        ),
       );
     }
+  }
 
+  Widget itemBuilder(context, index) {
     final playerModel = getIt<PlayerModel>();
     final model = getIt<LocalAudioModel>();
+    final audio = albums!.elementAt(index);
+    String? id = audio.albumId;
+    final albumAudios = model.findAlbum(audio);
 
-    return Padding(
-      padding: const EdgeInsets.only(top: 15),
-      child: GridView.builder(
-        padding: gridPadding,
-        itemCount: albums!.length,
-        gridDelegate: audioCardGridDelegate,
-        itemBuilder: (context, index) {
-          final audio = albums!.elementAt(index);
-          String? id = audio.albumId;
-          final albumAudios = model.findAlbum(audio);
-
-          final image = audio.pictureData == null
-              ? null
-              : Image.memory(
-                  audio.pictureData!,
-                  fit: BoxFit.fitHeight,
-                  height: kAudioCardDimension,
-                  filterQuality: FilterQuality.medium,
-                );
-
-          final fallback = Image.asset(
-            'assets/images/media-optical.png',
+    final image = audio.pictureData == null
+        ? null
+        : Image.memory(
+            audio.pictureData!,
+            fit: BoxFit.fitHeight,
             height: kAudioCardDimension,
-            width: kAudioCardDimension,
+            filterQuality: FilterQuality.medium,
           );
 
-          return AudioCard(
-            bottom: AudioCardBottom(
-              text: audio.album?.isNotEmpty == false
-                  ? context.l10n.unknown
-                  : audio.album ?? '',
-            ),
-            image: image ?? fallback,
-            background: fallback,
-            onTap: id == null || albumAudios == null
-                ? null
-                : () => Navigator.of(context).push(
-                      MaterialPageRoute(
-                        builder: (context) {
-                          return AlbumPage(
-                            id: id,
-                            album: albumAudios,
-                          );
-                        },
-                      ),
-                    ),
-            onPlay: albumAudios == null || albumAudios.isEmpty || id == null
-                ? null
-                : () => playerModel.startPlaylist(
-                      audios: albumAudios,
-                      listName: id,
-                    ),
-          );
-        },
+    final fallback = Image.asset(
+      'assets/images/media-optical.png',
+      height: kAudioCardDimension,
+      width: kAudioCardDimension,
+    );
+
+    return AudioCard(
+      bottom: AudioCardBottom(
+        text: audio.album?.isNotEmpty == false
+            ? context.l10n.unknown
+            : audio.album ?? '',
       ),
+      image: image ?? fallback,
+      background: fallback,
+      onTap: id == null || albumAudios == null
+          ? null
+          : () => Navigator.of(context).push(
+                MaterialPageRoute(
+                  builder: (context) {
+                    return AlbumPage(
+                      id: id,
+                      album: albumAudios,
+                    );
+                  },
+                ),
+              ),
+      onPlay: albumAudios == null || albumAudios.isEmpty || id == null
+          ? null
+          : () => playerModel.startPlaylist(
+                audios: albumAudios,
+                listName: id,
+              ),
     );
   }
 }
diff --git a/lib/src/local_audio/view/artist_page.dart b/lib/src/local_audio/view/artist_page.dart
index 06cdcc5b3..c6792156d 100644
--- a/lib/src/local_audio/view/artist_page.dart
+++ b/lib/src/local_audio/view/artist_page.dart
@@ -4,14 +4,15 @@ import 'package:collection/collection.dart';
 import 'package:flutter/material.dart';
 import 'package:yaru/yaru.dart';
 
+import '../../../build_context_x.dart';
 import '../../../common.dart';
-import '../../../constants.dart';
 import '../../../data.dart';
 import '../../../get.dart';
 import '../../../local_audio.dart';
-import '../../../player.dart';
 import '../../../settings.dart';
 import '../../common/explore_online_popup.dart';
+import '../../common/sliver_audio_page_control_panel.dart';
+import '../../common/sliver_audio_tile_list.dart';
 import '../../l10n/l10n.dart';
 import 'genre_page.dart';
 
@@ -28,16 +29,15 @@ class ArtistPage extends StatelessWidget with WatchItMixin {
   @override
   Widget build(BuildContext context) {
     final model = getIt<LocalAudioModel>();
+    final pageId = artistAudios?.firstOrNull?.artist;
+    final albums = model.findAllAlbums(newAudios: artistAudios);
+
+    if (pageId == null || albums == null) {
+      return const SizedBox.shrink();
+    }
 
     final useGridView =
         watchPropertyValue((SettingsModel m) => m.useArtistGridView);
-    final setUseGridView = getIt<SettingsModel>().setUseArtistGridView;
-
-    final controlPanelButton = _ArtistPageControlButton(
-      useGridView: useGridView,
-      setUseGridView: setUseGridView,
-      artist: artistAudios?.firstOrNull?.artist,
-    );
 
     void onAlbumTap(text) {
       final audios = model.findAlbum(Audio(album: text));
@@ -67,132 +67,92 @@ class ArtistPage extends StatelessWidget with WatchItMixin {
       );
     }
 
-    final roundImageContainer = RoundImageContainer(
-      images: images,
-      fallBackText: artistAudios?.firstOrNull?.artist ?? 'a',
-    );
-
-    if (!useGridView) {
-      return AudioPage(
-        classicTiles: false,
-        showArtist: false,
-        onAlbumTap: onAlbumTap,
-        onSubTitleTab: onSubTitleTab,
-        audioPageType: AudioPageType.artist,
-        headerLabel: context.l10n.artist,
-        headerTitle: artistAudios?.firstOrNull?.artist,
-        image: roundImageContainer,
-        imageRadius: BorderRadius.circular(10000),
-        headerSubtile: artistAudios?.firstOrNull?.genre,
-        audios: artistAudios,
-        pageId: artistAudios?.firstOrNull?.artist ?? artistAudios.toString(),
-        controlPanelButton: controlPanelButton,
-      );
-    }
-
-    return _ArtistAlbumsCardGrid(
-      onLabelTab: onAlbumTap,
-      onSubTitleTab: onSubTitleTab,
-      image: roundImageContainer,
-      artistAudios: artistAudios,
-      controlPanelButton: controlPanelButton,
+    return YaruDetailPage(
+      appBar: HeaderBar(
+        adaptive: true,
+        title: Text(pageId),
+      ),
+      body: AdaptiveContainer(
+        child: CustomScrollView(
+          slivers: [
+            SliverToBoxAdapter(
+              child: AudioPageHeader(
+                imageRadius: BorderRadius.circular(10000),
+                title: artistAudios?.firstOrNull?.artist ?? '',
+                image: RoundImageContainer(
+                  images: images,
+                  fallBackText: pageId,
+                ),
+                subTitle: artistAudios?.firstOrNull?.genre,
+                label: context.l10n.artist,
+                onLabelTab: onAlbumTap,
+                onSubTitleTab: onSubTitleTab,
+              ),
+            ),
+            SliverAudioPageControlPanel(
+              controlPanel: _ArtistPageControlPanel(
+                pageId: pageId,
+                audios: artistAudios!,
+              ),
+            ),
+            if (useGridView)
+              AlbumsView(
+                sliver: true,
+                albums: albums,
+              )
+            else
+              SliverAudioTileList(
+                audios: artistAudios!,
+                pageId: pageId,
+                audioPageType: AudioPageType.artist,
+                onSubTitleTab: onAlbumTap,
+              ),
+          ],
+        ),
+      ),
     );
   }
 }
 
-class _ArtistPageControlButton extends StatelessWidget {
-  const _ArtistPageControlButton({
-    required this.useGridView,
-    required this.setUseGridView,
-    required this.artist,
+class _ArtistPageControlPanel extends StatelessWidget with WatchItMixin {
+  const _ArtistPageControlPanel({
+    required this.audios,
+    required this.pageId,
   });
 
-  final bool useGridView;
-  final void Function(bool) setUseGridView;
-  final String? artist;
+  final Set<Audio> audios;
+  final String pageId;
 
   @override
   Widget build(BuildContext context) {
+    final useGridView =
+        watchPropertyValue((SettingsModel m) => m.useArtistGridView);
+    final setUseGridView = getIt<SettingsModel>().setUseArtistGridView;
     return Row(
       mainAxisSize: MainAxisSize.min,
       children: [
+        AvatarPlayButton(audios: audios, pageId: pageId),
+        const SizedBox(
+          width: 10,
+        ),
         IconButton(
-          icon: Icon(Iconz().list),
+          icon: Icon(
+            Iconz().list,
+            color: !useGridView ? context.t.primaryColor : null,
+          ),
           isSelected: !useGridView,
           onPressed: () => setUseGridView(false),
         ),
         IconButton(
-          icon: Icon(Iconz().grid),
+          icon: Icon(
+            Iconz().grid,
+            color: useGridView ? context.t.primaryColor : null,
+          ),
           isSelected: useGridView,
           onPressed: () => setUseGridView(true),
         ),
-        if (artist != null) ExploreOnlinePopup(text: artist!),
+        ExploreOnlinePopup(text: pageId),
       ],
     );
   }
 }
-
-class _ArtistAlbumsCardGrid extends StatelessWidget {
-  const _ArtistAlbumsCardGrid({
-    required this.onLabelTab,
-    required this.controlPanelButton,
-    required this.image,
-    required this.artistAudios,
-    this.onSubTitleTab,
-  });
-
-  final void Function(String)? onLabelTab;
-  final void Function(String text)? onSubTitleTab;
-
-  final Widget controlPanelButton;
-
-  final Widget? image;
-  final Set<Audio>? artistAudios;
-
-  @override
-  Widget build(BuildContext context) {
-    final artist = artistAudios?.firstOrNull?.artist;
-    final model = getIt<LocalAudioModel>();
-    final playerModel = getIt<PlayerModel>();
-
-    return YaruDetailPage(
-      appBar: HeaderBar(
-        adaptive: true,
-        title: isMobile ? null : Text(artist ?? ''),
-      ),
-      body: AdaptiveContainer(
-        child: artist == null || artistAudios == null
-            ? const SizedBox.shrink()
-            : Column(
-                children: [
-                  AudioPageHeader(
-                    imageRadius: BorderRadius.circular(10000),
-                    title: artistAudios?.firstOrNull?.artist ?? '',
-                    image: image,
-                    subTitle: artistAudios?.firstOrNull?.genre,
-                    label: context.l10n.artist,
-                    onLabelTab: onLabelTab,
-                    onSubTitleTab: onSubTitleTab,
-                  ),
-                  Padding(
-                    padding: kAudioControlPanelPadding,
-                    child: AudioPageControlPanel(
-                      controlButton: controlPanelButton,
-                      audios: artistAudios!,
-                      onTap: () => playerModel.startPlaylist(
-                        audios: artistAudios!,
-                        listName: artist,
-                      ),
-                    ),
-                  ),
-                  Expanded(
-                    child: AlbumsView(
-                      albums: model.findAllAlbums(newAudios: artistAudios),
-                    ),
-                  ),
-                ],
-              ),
-      ),
-    );
-  }
-}
diff --git a/lib/src/local_audio/view/local_audio_body.dart b/lib/src/local_audio/view/local_audio_body.dart
index e9ad4843d..39e259457 100644
--- a/lib/src/local_audio/view/local_audio_body.dart
+++ b/lib/src/local_audio/view/local_audio_body.dart
@@ -41,6 +41,7 @@ class LocalAudioBody extends StatelessWidget {
           noResultIcon: noResultIcon,
         ),
       LocalAudioView.albums => AlbumsView(
+          sliver: false,
           albums: albums,
           noResultMessage: noResultMessage,
           noResultIcon: noResultIcon,
diff --git a/lib/src/playlists/view/liked_audio_page.dart b/lib/src/playlists/view/liked_audio_page.dart
index 2734d702f..63e66d56a 100644
--- a/lib/src/playlists/view/liked_audio_page.dart
+++ b/lib/src/playlists/view/liked_audio_page.dart
@@ -45,15 +45,20 @@ class LikedAudioPage extends StatelessWidget with WatchItMixin {
           ),
         );
       },
-      controlPanel: Padding(
-        padding: const EdgeInsets.only(
-          left: 10,
-          right: 10,
-        ),
-        child: Text(
-          '${likedAudios.length} ${context.l10n.titles}',
-          style: getControlPanelStyle(context.t.textTheme),
-        ),
+      controlPanel: Row(
+        children: [
+          AvatarPlayButton(audios: likedAudios, pageId: kLikedAudiosPageId),
+          Padding(
+            padding: const EdgeInsets.only(
+              left: 10,
+              right: 10,
+            ),
+            child: Text(
+              '${likedAudios.length} ${context.l10n.titles}',
+              style: getControlPanelStyle(context.t.textTheme),
+            ),
+          ),
+        ],
       ),
       noSearchResultMessage: Text(context.l10n.likedSongsSubtitle),
       noSearchResultIcons: const AnimatedEmoji(AnimatedEmojis.twoHearts),
@@ -61,8 +66,8 @@ class LikedAudioPage extends StatelessWidget with WatchItMixin {
       audioPageType: AudioPageType.likedAudio,
       pageId: kLikedAudiosPageId,
       pageTitle: context.l10n.likedSongs,
-      pageSubTitle: context.l10n.likedSongsSubtitle,
-      pageLabel: context.l10n.playlist,
+      // pageSubTitle: context.l10n.likedSongsSubtitle,
+      pageLabel: context.l10n.likedSongsSubtitle,
       image: FallBackHeaderImage(
         child: Icon(
           Iconz().heart,
diff --git a/lib/src/playlists/view/playlist_page.dart b/lib/src/playlists/view/playlist_page.dart
index 7245f881d..1ec2b6424 100644
--- a/lib/src/playlists/view/playlist_page.dart
+++ b/lib/src/playlists/view/playlist_page.dart
@@ -1,22 +1,59 @@
+import 'dart:async';
 import 'dart:io';
 
 import 'package:audio_metadata_reader/audio_metadata_reader.dart';
+import 'package:collection/collection.dart';
 import 'package:flutter/material.dart';
 import 'package:super_drag_and_drop/super_drag_and_drop.dart';
+import 'package:yaru/yaru.dart';
 
-import '../../../media_file_x.dart';
+import '../../../build_context_x.dart';
 import '../../../common.dart';
 import '../../../constants.dart';
 import '../../../data.dart';
 import '../../../get.dart';
 import '../../../library.dart';
 import '../../../local_audio.dart';
+import '../../../media_file_x.dart';
 import '../../../playlists.dart';
 import '../../common/fall_back_header_image.dart';
+import '../../common/sliver_audio_page_control_panel.dart';
+import '../../common/sliver_audio_tile_list.dart';
 import '../../l10n/l10n.dart';
+import '../../local_audio/view/genre_page.dart';
+import '../../player/player_model.dart';
 import '../../theme.dart';
 import 'playlst_add_audios_dialog.dart';
 
+// TODO: do this in an isolate, or import it first with local audio model
+Future<void> _import(
+  ({
+    PerformDropEvent event,
+    String id,
+    Set<Audio> audios,
+    Future<void> Function(String id, Set<Audio> audios) updatePlaylist
+  }) arg,
+) async {
+  Set<Audio> oldAudios = Set.from(arg.audios);
+
+  for (var item in arg.event.session.items.take(100)) {
+    item.dataReader?.getValue(
+      Formats.fileUri,
+      (value) async {
+        if (value == null) return;
+        final file = File.fromUri(value);
+        if (file.isValidMedia) {
+          final data = await readMetadata(file, getImage: true);
+          oldAudios.add(Audio.fromMetadata(path: file.path, data: data));
+        }
+      },
+      onError: (value) {},
+    );
+  }
+
+  await arg.updatePlaylist(arg.id, oldAudios);
+}
+
 class PlaylistPage extends StatelessWidget {
   const PlaylistPage({
     super.key,
@@ -47,29 +84,15 @@ class PlaylistPage extends StatelessWidget {
         );
       },
       onPerformDrop: (event) async {
-        for (var item in event.session.items) {
-          final reader = item.dataReader!;
-
-          reader.getValue(
-            Formats.fileUri,
-            (value) {
-              if (value == null) return;
-              final file = File.fromUri(value);
-              if (!file.isValidMedia) return;
-              readMetadata(file, getImage: true).then(
-                (data) {
-                  libraryModel.addAudioToPlaylist(
-                    playlist.key,
-                    Audio.fromMetadata(path: file.path, data: data),
-                  );
-                },
-              );
-            },
-            onError: (value) {
-              failedImports.add(value.toString());
-            },
-          );
-        }
+        // await compute(_import, (event: event, id: playlist.key));
+        await _import(
+          (
+            event: event,
+            id: playlist.key,
+            audios: playlist.value,
+            updatePlaylist: libraryModel.updatePlaylist,
+          ),
+        );
       },
       onDropOver: (event) {
         if (event.session.allowedOperations.contains(DropOperation.copy)) {
@@ -78,85 +101,47 @@ class PlaylistPage extends StatelessWidget {
           return DropOperation.none;
         }
       },
-      child: AudioPage(
-        classicTiles: false,
-        onAlbumTap: (text) {
-          final albumAudios = model.findAlbum(Audio(album: text));
-          if (albumAudios?.firstOrNull == null) return;
-          final id = albumAudios!.first.albumId;
-          if (id == null) return;
-
-          Navigator.of(context).push(
-            MaterialPageRoute(
-              builder: (_) {
-                return AlbumPage(
-                  id: id,
-                  album: albumAudios,
-                );
-              },
-            ),
-          );
-        },
-        onArtistTap: (text) {
-          final artistAudios = model.findArtist(Audio(artist: text));
-          final images = model.findImages(artistAudios ?? {});
-
-          Navigator.of(context).push(
-            MaterialPageRoute(
-              builder: (_) {
-                return ArtistPage(
-                  images: images,
-                  artistAudios: artistAudios,
-                );
-              },
-            ),
-          );
-        },
-        audioPageType: AudioPageType.playlist,
-        image: PlaylistHeaderImage(playlist: playlist),
-        headerLabel: context.l10n.playlist,
-        headerTitle: playlist.key,
-        audios: playlist.value,
-        pageId: playlist.key,
-        noResultMessage: Text(context.l10n.emptyPlaylist),
-        controlPanelButton: Row(
-          mainAxisSize: MainAxisSize.min,
-          children: [
-            IconButton(
-              tooltip: context.l10n.editPlaylist,
-              icon: Icon(Iconz().pen),
-              onPressed: () => showDialog(
-                context: context,
-                builder: (context) => AlertDialog(
-                  content: SizedBox(
-                    height: 200,
-                    width: 500,
-                    child: PlaylistContent(
-                      playlistName: playlist.key,
-                      initialValue: playlist.key,
-                      allowDelete: true,
-                      allowRename: true,
-                      libraryModel: libraryModel,
-                    ),
-                  ),
-                ),
+      child: YaruDetailPage(
+        appBar: HeaderBar(
+          adaptive: true,
+          title: Text(playlist.key),
+        ),
+        body: _PlaylistPageBody(
+          onAlbumTap: (text) {
+            final albumAudios = model.findAlbum(Audio(album: text));
+            if (albumAudios?.firstOrNull == null) return;
+            final id = albumAudios!.first.albumId;
+            if (id == null) return;
+
+            Navigator.of(context).push(
+              MaterialPageRoute(
+                builder: (_) {
+                  return AlbumPage(
+                    id: id,
+                    album: albumAudios,
+                  );
+                },
               ),
-            ),
-            IconButton(
-              tooltip: context.l10n.clearPlaylist,
-              icon: Icon(Iconz().clearAll),
-              onPressed: () => libraryModel.clearPlaylist(playlist.key),
-            ),
-            IconButton(
-              tooltip: context.l10n.add,
-              icon: Icon(Iconz().plus),
-              onPressed: () => showDialog(
-                context: context,
-                builder: (context) =>
-                    PlaylistAddAudiosDialog(playlistId: playlist.key),
+            );
+          },
+          onArtistTap: (text) {
+            final artistAudios = model.findArtist(Audio(artist: text));
+            final images = model.findImages(artistAudios ?? {});
+
+            Navigator.of(context).push(
+              MaterialPageRoute(
+                builder: (_) {
+                  return ArtistPage(
+                    images: images,
+                    artistAudios: artistAudios,
+                  );
+                },
               ),
-            ),
-          ],
+            );
+          },
+          image: PlaylistHeaderImage(playlist: playlist),
+          audios: playlist.value,
+          pageId: playlist.key,
         ),
       ),
     );
@@ -228,3 +213,198 @@ class PlaylistHeaderImage extends StatelessWidget {
     );
   }
 }
+
+class _PlaylistPageBody extends StatelessWidget with WatchItMixin {
+  const _PlaylistPageBody({
+    required this.pageId,
+    required this.audios,
+    this.image,
+    this.onAlbumTap,
+    this.onArtistTap,
+  });
+
+  final String pageId;
+  final Set<Audio> audios;
+  final Widget? image;
+
+  final void Function(String text)? onAlbumTap;
+  final void Function(String text)? onArtistTap;
+
+  @override
+  Widget build(BuildContext context) {
+    final localAudioModel = getIt<LocalAudioModel>();
+    final allowReorder =
+        watchPropertyValue((LocalAudioModel m) => m.allowReorder);
+    final isPlaying = watchPropertyValue((PlayerModel m) => m.isPlaying);
+    final libraryModel = getIt<LibraryModel>();
+    final playerModel = getIt<PlayerModel>();
+    final currentAudio = watchPropertyValue((PlayerModel m) => m.audio);
+
+    watchPropertyValue((LibraryModel m) => m.likedAudios.length);
+    watchPropertyValue(
+      (LibraryModel m) => m.playlists[pageId]?.length,
+    );
+
+    final audioControlPanel = Row(
+      children: [
+        AvatarPlayButton(audios: audios, pageId: pageId),
+        IconButton(
+          tooltip: context.l10n.editPlaylist,
+          icon: Icon(Iconz().pen),
+          onPressed: () => showDialog(
+            context: context,
+            builder: (context) => AlertDialog(
+              content: SizedBox(
+                height: 200,
+                width: 500,
+                child: PlaylistContent(
+                  playlistName: pageId,
+                  initialValue: pageId,
+                  allowDelete: true,
+                  allowRename: true,
+                  libraryModel: libraryModel,
+                ),
+              ),
+            ),
+          ),
+        ),
+        IconButton(
+          tooltip: context.l10n.clearPlaylist,
+          icon: Icon(Iconz().clearAll),
+          onPressed: () => libraryModel.clearPlaylist(pageId),
+        ),
+        IconButton(
+          tooltip: context.l10n.add,
+          icon: Icon(Iconz().plus),
+          onPressed: () => showDialog(
+            context: context,
+            builder: (context) => PlaylistAddAudiosDialog(playlistId: pageId),
+          ),
+        ),
+        IconButton(
+          tooltip: context.l10n.move,
+          isSelected: allowReorder,
+          onPressed: () => localAudioModel.setAllowReorder(!allowReorder),
+          icon: Icon(
+            Iconz().reorder,
+            color: allowReorder ? context.t.colorScheme.primary : null,
+          ),
+        ),
+      ],
+    );
+
+    final audioPageHeader = AudioPageHeader(
+      title: pageId,
+      image: image,
+      label: context.l10n.playlist,
+      descriptionWidget: _PlaylistGenreBar(audios: audios),
+    );
+
+    return CustomScrollView(
+      slivers: [
+        SliverToBoxAdapter(
+          child: audioPageHeader,
+        ),
+        SliverAudioPageControlPanel(controlPanel: audioControlPanel),
+        if (allowReorder)
+          SliverReorderableList(
+            itemCount: audios.length,
+            itemBuilder: (BuildContext context, int index) {
+              final audio = audios.elementAt(index);
+              final audioSelected = currentAudio == audio;
+
+              return ReorderableDragStartListener(
+                key: ValueKey(audio.path ?? audio.url),
+                index: index,
+                child: AudioTile(
+                  onSubTitleTap: onArtistTap,
+                  key: ValueKey(audio.path ?? audio.url),
+                  isPlayerPlaying: isPlaying,
+                  pause: playerModel.pause,
+                  startPlaylist: () => playerModel.startPlaylist(
+                    audios: audios,
+                    listName: pageId,
+                    index: index,
+                  ),
+                  resume: playerModel.resume,
+                  selected: audioSelected,
+                  audio: audio,
+                  insertIntoQueue: playerModel.insertIntoQueue,
+                  pageId: pageId,
+                  libraryModel: libraryModel,
+                  audioPageType: AudioPageType.playlist,
+                ),
+              );
+            },
+            onReorder: (oldIndex, newIndex) {
+              if (playerModel.queueName == pageId) {
+                playerModel.moveAudioInQueue(oldIndex, newIndex);
+              }
+
+              libraryModel.moveAudioInPlaylist(
+                oldIndex: oldIndex,
+                newIndex: newIndex,
+                id: pageId,
+              );
+            },
+          )
+        else
+          SliverAudioTileList(
+            audios: audios,
+            pageId: pageId,
+            audioPageType: AudioPageType.playlist,
+          ),
+      ],
+    );
+  }
+}
+
+class _PlaylistGenreBar extends StatelessWidget {
+  const _PlaylistGenreBar({
+    required this.audios,
+  });
+
+  final Set<Audio> audios;
+
+  @override
+  Widget build(BuildContext context) {
+    Set<String> genres = {};
+    for (var e in audios) {
+      final g = e.genre?.trim();
+      if (g?.isNotEmpty == true) {
+        genres.add(g!);
+      }
+    }
+
+    return SingleChildScrollView(
+      padding: const EdgeInsets.only(top: 5, left: 2),
+      child: Wrap(
+        spacing: 5,
+        runSpacing: 5,
+        children: genres
+            .mapIndexed(
+              (i, e) => Row(
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  TapAbleText(
+                    wrapInFlexible: false,
+                    text: e,
+                    onTap: () {
+                      Navigator.of(context).push(
+                        MaterialPageRoute(
+                          builder: (context) {
+                            return GenrePage(genre: e);
+                          },
+                        ),
+                      );
+                    },
+                  ),
+                  if (i != genres.length - 1) const Text(', '),
+                ],
+              ),
+            )
+            .toList(),
+      ),
+    );
+  }
+}